/* --------------- Tokens (Palette Mo2neytattoo 2025) --------------- */
:root{
  /* Primaire */
  --primary-100:#ab7969; --primary-200:#9d6250; --primary-300:#8f4c37; --primary-400:#81361e; --primary-500:#742006;
  --primary-600:#681c05; --primary-700:#5c1904; --primary-800:#511604; --primary-900:#451303; --primary-950:#3a1003;

  /* Secondaire */
  --secondary-100:#ba6767; --secondary-200:#ae4e4e; --secondary-300:#a33535; --secondary-400:#971c1c; --secondary-500:#8c0303;
  --secondary-600:#7e0202; --secondary-700:#700202; --secondary-800:#620202; --secondary-900:#540101; --secondary-950:#460101;

  /* Neutres */
  --neutral-0:#000000; --neutral-50:#111111; --neutral-100:#1E1E1E; --neutral-150:#212121;
  --neutral-200:#3c3c3c; --neutral-250:#4d4d4d; --neutral-300:#424242; --neutral-350:#606060;
  --neutral-400:#757575; --neutral-450:#9E9E9E; --neutral-500:#BDBDBD; --neutral-550:#E0E0E0;
  --neutral-600:#EEEEEE; --neutral-650:#F5F5F5; --neutral-700:#FAFAFA; --neutral-750:#FFFFFF;

  /* Thème clair (par défaut) */
  --bg: var(--neutral-750);
  --bg-soft: var(--neutral-650);
  --bg-alt: var(--neutral-600);
  --txt: var(--neutral-50);
  --muted: var(--neutral-400);
  --border: var(--neutral-550);

  /* Marque */
  --brand: var(--primary-400);
  --brand-2: var(--secondary-400);

  /* États */
  --ok:#43a047; --warn:#f59e0b; --err:#e53935;

  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Mode sombre auto (si pas forcé light) */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    --bg: var(--neutral-50);
    --bg-soft:#141414;
    --bg-alt:#101010;
    --txt: var(--neutral-750);
    --muted: var(--neutral-450);
    --border:#242424;

    --brand: var(--primary-300);
    --brand-2: var(--secondary-400);
    --shadow: 0 10px 30px rgba(0,0,0,.35);
  }
}
/* Mode sombre forcé */
html[data-theme="dark"]{
  --bg: var(--neutral-50);
  --bg-soft:#141414;
  --bg-alt:#101010;
  --txt: var(--neutral-750);
  --muted: var(--neutral-450);
  --border:#242424;

  --brand: var(--primary-300);
  --brand-2: var(--secondary-400);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* --------------- Reset & base --------------- */
*{box-sizing:border-box}
html,body{margin:0}
body{
  font: 16px/1.65 "Lato", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  background: var(--bg);
  color: var(--txt);
  accent-color: var(--brand);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
.container{width:min(1120px, 92%); margin-inline:auto}
h1,h2,h3,h4,h5,h6,.brand span{font-family:"Cinzel Decorative", serif; letter-spacing:.3px}

/* --------------- Utilities --------------- */
.section{padding:72px 0}
.grid-2{display:grid; gap:32px; grid-template-columns: 1.2fr .8fr}

.kv{list-style:none; padding:0; margin:0}
.kv li{display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px dashed var(--border)}
.kv li span:first-child{color:var(--muted)}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.cards-inline{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.card{background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px}
.card.mini{padding:16px}
.tags{display:flex; gap:8px; padding:0; list-style:none; margin:.6rem 0 0}
.tags li{font-size:.85rem; color:var(--muted); border:1px solid var(--border); padding:.25rem .6rem; border-radius:999px}

/* --------------- Buttons --------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.1rem; border:1px solid var(--border);
  border-radius:999px; background:transparent; cursor:pointer;
  transition:.2s transform ease,.3s background ease
}
.btn:hover{transform:translateY(-1px); background:var(--bg-soft)}
.btn.ghost{border-color:var(--border); background:transparent}

/* Bouton primaire (utilisé aussi par .nav-toggle) */
.btn-primary,
.nav-toggle.btn.btn-primary{
  color:#fff;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-color: transparent;
  font-weight:700;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  transition: transform .2s ease, filter .2s ease, box-shadow .25s ease, background-position .35s ease;
  background-size: 200% 100%;
  background-position: 0% 50%;
  box-shadow: var(--shadow);
}
.btn-primary:hover,
.nav-toggle.btn.btn-primary:hover{
  background-position: 100% 50%;
  filter: brightness(1.06) saturate(1.05);
  transform: translateY(-2px);
  color:var(--brand);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}
.btn-primary:focus-visible,
.nav-toggle.btn.btn-primary:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--brand) 50%, transparent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--brand) 25%, transparent), 0 12px 26px rgba(0,0,0,.14);
}
.btn-primary:active,
.nav-toggle.btn.btn-primary:active{
  transform: translateY(0);
  filter: brightness(1.02);
  color:var(--brand);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* --------------- Header / Nav --------------- */
.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:12px; top:12px; z-index:9999; background:var(--brand); color:#111; padding:.5rem .8rem; border-radius:8px}

.site-header{
  position:sticky; top:0; z-index:100; backdrop-filter:saturate(140%) blur(12px);
  background: color-mix(in oklab, var(--bg-soft) 85%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--border) 80%, transparent);
  transform: translateZ(0);
}
.site-header[data-scrolled="true"]{ box-shadow: 0 4px 26px rgba(0,0,0,.08) }

.nav{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.4px}
.brand .accent{color:var(--brand-2)}
.logo-img{height:70px; width:auto; filter: drop-shadow(0 0 8px rgba(140,3,3,.15)); padding: 15px;}

/* Par défaut → logo clair */
.logo-dark { display: none; }
.logo-light { display: block; }

/* En thème sombre → logo blanc */
html[data-theme="dark"] .logo-light { display: none; }
html[data-theme="dark"] .logo-dark { display: block; }

@media (max-width: 900px), (width <= 900px) {
html[data-theme="dark"] .logo-light { display: none; }
html[data-theme="dark"] .logo-dark { display: none; }
}


.primary-nav{
  position: relative;
  display: flex;
  align-content: center;
  flex-direction: column;        /* pour loger bouton + liste */
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.primary-nav ul{
  display:flex; gap:18px; align-items:center; list-style:none; margin:0; padding:0
}
.primary-nav a{padding:.6rem .8rem; border-radius:10px}
.primary-nav a:hover{background: color-mix(in oklab, var(--brand) 10%, var(--bg-soft))}

/* ===== NAV TOGGLE : bouton skull animé (HTML inchangé) ===== */
.nav-toggle{
  display:none;                 /* desktop: masqué (affiché en mobile dans @media) */
  width:50px; height:50px;
  border-radius:50%;
  border:2px solid var(--border);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  position:relative;
  cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, background-position .35s ease;
  z-index:1001;                 /* au-dessus du panneau */
  color:#fff;
  background-size: 200% 100%;
  background-position: 0% 50%;
}
.nav-toggle:hover{
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 10px 24px rgba(0,0,0,.15);
  background-position: 100% 50%;
}
.nav-toggle:active{ transform: scale(0.96) }

/* Icône skull via pseudo-élément (pas besoin de span) */
.nav-toggle::before{
  content:""; position:absolute; inset:0; margin:auto; width:24px; height:24px; background:currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
  position:absolute; inset:0; margin:auto;
  width:17px; height:17px;
  background: currentColor;
  transition: transform .45s ease, color .25s ease, filter .25s ease;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
}
.nav-toggle:hover::before{ transform: rotate(-8deg) scale(1.08) }
.nav-toggle[aria-expanded="true"]::before{
  transform: rotate(360deg) scale(1.18);
  color: var(--neutral-750);
}

/* ===== Bouton thème flottant — tête de mort (clair = gris, sombre = doré pulsant) ===== */
.theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border, #ccc);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .35s ease;

  /* Couleur visible (passe par le masque) */
  background-color: #BDBDBD; /* clair = gris clair */

  /* Masque SVG (la couleur du stroke n'a pas d'importance pour le rendu final) */
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 4c4.418 0 8 3.358 8 7.5c0 1.901-.755 3.637-2 4.96V19a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2.54c-1.245-1.322-2-3.058-2-4.96C4 7.358 7.582 4 12 4m-2 13v3m4-3v3'/%3E%3Cpath d='M8 11a1 1 0 1 0 2 0a1 1 0 1 0-2 0m6 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.theme-toggle:hover {
  transform: scale(1.08);
  /* ⚠️ ne pas changer background/background-color ici,
     sinon l'icône perd sa couleur (jaune en sombre) */
  box-shadow: 0 0 10px rgba(0,0,0,.15);
}

/* ===== Thème sombre — doré (#FFC107) + glow pulsant ===== */
html[data-theme="dark"] .theme-toggle {
  background-color: #FFC107; /* sombre = doré */
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.35), 0 0 24px rgba(255, 193, 7, 0.15);
  animation: goldGlow 3.5s ease-in-out infinite;
}

/* Halo amplifié au survol (sans toucher à background-color) */
html[data-theme="dark"] .theme-toggle:hover {
  box-shadow: 0 0 16px rgba(255, 193, 7, 0.65), 0 0 36px rgba(255, 193, 7, 0.3);
  transform: scale(1.12);
}

/* ===== Animation "respiration" dorée ===== */
@keyframes goldGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.25), 0 0 20px rgba(255, 193, 7, 0.1);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 14px rgba(255, 193, 7, 0.55), 0 0 30px rgba(255, 193, 7, 0.25);
    transform: scale(1.05);
  }
}


/* --------------- Hero --------------- */
.hero{position:relative; min-height:68vh; display:grid; place-items:center; overflow:hidden}
.hero-media{position:absolute; inset:0;}
.hero-overlay{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; opacity:.06}
.hero-mark{max-width:min(360px, 50vw); height:auto}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:240px;}
.hero-content{position:relative; text-align:center; z-index: 10;  padding:120px 0}
.hero-content .btn{position: relative; z-index: 11; pointer-events: auto; cursor: pointer;}
.hero h1{font-size:clamp(2rem,4vw + 1rem,4rem); line-height:1.05; margin: 50px 0px 0px 0px;}
/* accent dans le H1 */
.hero h1 .accent {color: var(--brand-2);}
.hero p{color:var(--muted); max-width:680px; margin:0 auto 18px}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.badges{display:flex; gap:16px; list-style:none; padding:0; margin:14px 0 0; justify-content:center; color:var(--muted)}
.hero-mark-dark { display: none; }
.hero-mark-light { display: block; }
/* quand thème sombre actif */
html[data-theme="dark"] .hero-mark-light { display: none; }
html[data-theme="dark"] .hero-mark-dark { display: block; }
/* Avis Google dans la hero */
.google-reviews {
  display: flex;
  margin: 14px 0;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  padding: auto;
  color: var(--muted);
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  }

.google-logo {
  height: 24px;
  vertical-align: middle;
  transition: transform .2s ease;
}

.google-logo:hover {
  transform: scale(1.1);
}

/* --------------- Carousel Studio (scroll-snap) --------------- */
.studio-carousel{ margin:0; max-width:100%; max-height:100%; padding:30px 30px 50px }
.studio-carousel h3{ margin:0 0 12px; text-align:center }
.carousel{ position:relative }
.carousel-viewport{
  width:100%;
  height:330px;
  overflow:hidden;
  border-radius: var(--radius);
  background: var(--bg-soft);
  border:1px solid var(--border);

  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.carousel-track{ display:flex; height:100% }
.carousel-slide{ flex:0 0 100%; height:100%; scroll-snap-align:start }
.carousel-slide figure{ margin:0; width:100%; height:100%; position:relative }
.carousel-slide img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
.carousel-viewport::-webkit-scrollbar{ height:8px }
.carousel-viewport::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, #000 15%, transparent);
  border-radius:999px;
}
@supports not (color-mix: in oklab, white 10%, black){
  .carousel-viewport::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15) }
}

/* --------------- Artist --------------- */
.artist{
  display:grid;
  grid-template-columns: 110px 1fr auto;
  grid-template-areas: "avatar bio cta";
  gap:16px; align-items:center;
}
.artist-title{grid-area: h3; display:none}
.avatar {
  grid-area: avatar;
  width: 110px;
  height: 110px;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  overflow: hidden; /* ✅ important : garde les angles arrondis */
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit; /* ✅ l’image suit la forme du parent */
  display: block;
}


/* --------------- Chips / Filters --------------- */
.chips{
display:flex;
flex-wrap:wrap;
gap:10px;
padding:10px 5px 25px 5px;
}

/* Thème clair (par défaut) */
:root{
  --chip-bg: var(--neutral-650);
  --chip-txt: var(--neutral-100);
  --chip-hover: var(--neutral-550);
  --chip-active-bg: linear-gradient(90deg, var(--brand), var(--brand-2));
  --chip-active-txt: #fff;
}
/* Thème sombre */
html[data-theme="dark"]{
  --chip-bg: var(--bg-soft);
  --chip-txt: var(--neutral-650);
  --chip-hover: var(--neutral-200);
  --chip-active-bg: linear-gradient(90deg, color-mix(in oklab, var(--brand) 60%, var(--bg-soft)), color-mix(in oklab, var(--brand-2) 60%, var(--bg-soft)));
  --chip-active-txt: #fff;
}
.chip{
  padding:.55rem .9rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--chip-bg);
  color:var(--chip-txt);
  cursor:pointer;
  transition:.2s ease transform, .3s ease background, .3s ease box-shadow, .3s ease color;
}
.chip:hover{ background:var(--chip-hover); transform:translateY(-1px) }
.chip.is-active{
  background:var(--chip-active-bg);
  color:var(--chip-active-txt);
  border-color:transparent;
  font-weight:600;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

/* --------------- Masonry gallery --------------- */
.masonry{columns: 3 280px; column-gap:16px}
.tile{break-inside:avoid; background:var(--bg-alt); border:1px solid var(--border); border-radius:14px; overflow:hidden; margin:0 0 16px}
.tile .ph{display:block; width:100%; height:auto; object-fit:cover}
.tile.tall .ph{aspect-ratio: 3/4}
.tile.wide .ph{aspect-ratio: 16/10}
.tile figcaption{padding:10px 12px; color:var(--muted); font-size:.92rem}

/* --------------- Forms --------------- */
.hp{position:absolute; left:-9999px; opacity:0}
form{display:block}
.form-grid{display:grid; gap:14px; grid-template-columns: repeat(2, 1fr)}
.form-grid .full{grid-column:1/-1}
label{display:grid; gap:6px; font-weight:600}
input,select,textarea{width:100%; padding:.8rem .9rem; border-radius:12px; border:1px solid var(--border); background:var(--bg); color:var(--txt)}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in oklab, var(--brand) 55%, var(--bg)); outline-offset:1px}
.check{display:flex; align-items:center; gap:.6rem; font-weight:400; padding:.8rem .9rem}
.form-actions{display:flex; align-items:center; gap:12px; margin-top:10px}
#form-status{min-height:1.2em; font-size:.95rem}
.notice{margin-top:12px; padding:10px 12px; border:1px dashed var(--border); border-radius:12px; color:var(--muted)}

/* --------------- Map --------------- */
.map-embed{margin-top:16px; border-radius:14px; overflow:hidden; border:1px solid var(--border); background:var(--bg-alt)}
.map-embed iframe{display:block; width:100%; height:340px; border:0}

/* --------------- Footer --------------- */
.site-footer{display: flex; border-top:1px solid var(--border); padding:28px 0; background:var(--bg)}
.foot{display:flex; gap:12px; justify-content:space-between; align-items:center; flex-wrap:wrap}
.foot nav{display:flex; gap:14px}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--txt)}
.social-icon {
  height: 28px;
  width: auto;
  margin: 0 8px;
  display: inline-block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-icon:hover {
  transform: scale(1.1);
  opacity: 0.85;
}


/* --------------- Motion --------------- */
@media (prefers-reduced-motion:no-preference){
  .hero-content{animation: fadeUp .7s ease both .1s}
  .cards .card{animation: fadeUp .6s ease both}
  .cards .card:nth-child(2){animation-delay:.08s}
  .cards .card:nth-child(3){animation-delay:.16s}
  .btn-primary:hover{animation: shine 1.2s ease forwards}
  @keyframes shine{
    0%   { text-shadow: 0 1px 0 rgba(0,0,0,.25) }
    40%  { text-shadow: 0 0 12px rgba(255,255,255,.55), 0 1px 0 rgba(0,0,0,.25) }
    100% { text-shadow: 0 1px 0 rgba(0,0,0,.25) }
  }
}
@keyframes fadeUp{from{opacity:0; transform: translateY(8px)} to{opacity:1; transform:none}}

/* =================== Responsive =================== */

/* ≥1200 → 3 colonnes, <1200 → 2 colonnes cartes */
@media (max-width: 1200px), (width <= 1200px){
  .cards{grid-template-columns: repeat(2, 1fr)}
  .cookie-modal-content {padding: 10px;}
}

/* ≤900px : menu colonne (slide down full-bleed, centré), artiste en pile, galerie + check adaptés */
@media (max-width: 900px), (width <= 900px){
  .grid-2{grid-template-columns:1fr; padding: 0px 20px 0px 20px;}
  .hero{min-height:58vh}
  .hero-content{padding:80px 0}
  .hero h3 {font-size: 24px; font-weight: bold;}
  .studio-carousel {padding: 0px 0px 0px 0px;} 
  .container {padding: 0px 20px 0px 20px;}
  .cookie-modal-content {padding: 10px;}
  /* --- Artist : fixes alignement gauche & overflow --- */
  .card.artist{
    width:100%;
    max-width:680px;
    margin-inline:auto;
    overflow:hidden;
  }
  .artist {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    /* align-items: center;  <- centre horizontalement et fait paraître le texte centré */
    align-items: stretch;       /* ← prend toute la largeur = texte à gauche */
    justify-content: center;
    padding: 16px;
    text-align: left;           /* sécurité si héritage d’un centrage */
  }
  .avatar{width:100%; height:auto; justify-items:center}
  .avatar img{
    /* width:900px;            <- faisait déborder en mobile */
    max-width:100%;            /* ← responsive */
    height:auto;
    display:block;
    margin:0 auto;
  }
  .bio{
        width:100%; 
        margin: 0px; 
      }
  .bio p{
    padding: 10px;
    margin: 0;
    text-align: left;          /* ← force l’alignement du texte à gauche */
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .tags{
    display:flex;
    flex-wrap:wrap;            /* ← retour à la ligne */
    gap:8px;
    justify-content:flex-start;/* ← aligne à gauche */
    padding:0;
    margin:.6rem 0 0;
  }
  .tags li{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  /* Header plein et stable */
  .site-header{ background:var(--bg); border-bottom:1px solid var(--border) }

  /* Empiler brand, bouton, menu */
  .nav{
    flex-direction: column;
    align-items: center;      /* centre brand + bouton */
    gap: 10px;
    height: auto;
    padding: 10px 0;
  }

  /* Masquer le logo image en mobile */
  .logo-img{ display:none }

  .brand{ padding:0 5vw; margin:0 auto; text-align:center }

  /* Bouton menu affiché et centré */
  .nav-toggle{ display:inline-flex; margin:0 auto }

  .primary-nav{ width:100%; position:relative }

  /* Panneau du menu full-bleed, contenu centré, slide-down */
  .primary-nav ul{
    position: relative;
    left: 55%;
    transform: translateX(-50%);
    width: 100vw;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    margin: 6px 0 0;
    padding: 6px 0;

    display:flex;
    flex-direction:column;
    align-items:stretch;

    max-height:0;
    opacity:0;
    overflow:hidden;
    transition:max-height .35s ease, opacity .25s ease;
  }
  .primary-nav[aria-expanded="true"] ul{ max-height:70vh; opacity:1 }

  .primary-nav li a{
    display:block; width:100%; padding:14px 0;
    border-bottom:1px solid var(--border);
    text-align:center;
    max-width:680px;
    margin-inline:auto;
    border-radius:0;
  }
  .primary-nav li:last-child a{ border-bottom:0 }

  /* Artiste en pile : H3, IMG, BIO, CTA (si tu repasses en grid un jour) */
  .artist-title{display:block; margin:0}

  /* Galerie plus petite */
  .masonry{columns: 3 220px; column-gap:14px}

  /* Check en colonne */
  .check{flex-direction:column; align-items:flex-start; gap:.4rem}

  .cards-inline{grid-template-columns:1fr 1fr}
}

/* ≤720px : compact, galerie 2 colonnes */
@media (max-width: 720px), (width <= 720px){
  .nav{height:auto}
  .brand span{font-size:1.25rem; padding: 0.5rem;}
  .cards{grid-template-columns:1fr}
  .cards-inline{grid-template-columns:1fr}
  .cookie-modal-content {padding: 10px;}

  /* Artist – mêmes sécurités */
  .card.artist{max-width:640px}
  .artist{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: stretch;       /* ← important */
    justify-content: center;
    padding: 16px;
    text-align: left;
  } 
  .avatar img{max-width:100%; height:auto; display:block}
  .bio {margin: 0px;}
  .bio p  {
    padding: 10px;
    margin: 0;
    text-align:left;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .tags{flex-wrap:wrap; gap:8px; justify-content:flex-start}
  .tags li{max-width:100%; overflow-wrap:anywhere; word-break:break-word}

  .btn, .chip{padding:.8rem 1rem}
  .badges{flex-wrap:wrap; gap:10px}
  .masonry{columns: 2 200px; column-gap:12px}
  .tile figcaption{font-size:.9rem}
  .form-grid{grid-template-columns:1fr}
  .map-embed iframe{height:260px}
}

/* ≤480px : CTA pleine largeur, galerie étroite */
@media (max-width: 480px), (width <= 480px){
  .hero{min-height:52vh}
  .hero-mark{max-width:64%}
  .hero p{padding:0 8px}
  .btn{width:50%} /* tu avais 50% ici */
  .kv li{flex-direction:column; align-items:flex-start}
  .map-embed iframe{height:220px}
  .masonry{columns: 2 160px; column-gap:10px}
  .cookie-modal-content {padding: 10px;}

  /* Artist – version très petit écran */
  .card.artist{max-width:100%}
  .artist{
    align-items:stretch;        /* ← garde bien à gauche */
    padding: 16px;
  }
  .avatar img{max-width:100%; height:auto}
  .bio {margin: 0px;}
  .bio p{
    padding: 10px;
    margin: 0;
    text-align:left;
  }
  .tags{gap:8px; justify-content:flex-start; flex-wrap:wrap}
  .tags li{max-width:100%}
}


/* Accessibilité : tailles de cibles tactiles */
button, .btn, .chip, .nav-toggle{min-height:44px}
.tile .ph{width:100%; height:auto; object-fit:cover}

/* =================== Ancres (scroll offset) =================== */
#about, 
#artist, 
#styles, 
#gallery, 
#booking {
  scroll-margin-top: 480px; /* hauteur de ton header sticky */
}

/* ===================== COOKIES (themed + modal centré) ===================== */

/* Boutons → héritent du thème comme .btn / .btn-primary */
.cookie-banner button,
.cookie-modal button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--txt);
  cursor: pointer;
  transition: .2s transform ease, .3s background ease, .25s box-shadow ease, .25s filter ease;
  font: inherit;
  min-height: 44px; /* accessibilité tactile */
}

.cookie-banner button:hover,
.cookie-modal button:hover {
  transform: translateY(-1px);
  background: var(--bg-soft);
}

/* Variante ghost (ex: Paramètres) */
#cookie-settings {
  background: transparent;
  border-color: var(--border);
}

/* Primaire (Accepter / Enregistrer) */
#cookie-accept,
#cookie-save {
  color: #fff;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border-color: transparent;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  background-size: 200% 100%;
  background-position: 0% 50%;
  box-shadow: var(--shadow);
}

#cookie-accept:hover,
#cookie-save:hover {
  background-position: 100% 50%;
  filter: brightness(1.06) saturate(1.05);
  transform: translateY(-2px);
  color: var(--brand);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

#cookie-accept:focus-visible,
#cookie-save:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--brand) 50%, transparent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--brand) 25%, transparent), 0 12px 26px rgba(0,0,0,.14);
}

#cookie-accept:active,
#cookie-save:active {
  transform: translateY(0);
  filter: brightness(1.02);
  color:var(--brand);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Bouton Refuser (style neutre) */
#cookie-reject {
  background: transparent;
  color: var(--txt);
  border-color: var(--border);
}

/* Focus accessible pour tous les boutons cookies */
.cookie-banner button:focus-visible,
.cookie-modal button:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--brand) 45%, transparent);
  outline-offset: 2px;
}

/* ---------- MODAL CENTRÉ (on n’utilise plus la bannière en bas) ---------- */

/* Laisse la bannière stylée mais “off” par défaut (fallback possible) */
.cookie-banner {
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: none; /* affichée via JS si tu veux un fallback */
}

/* Overlay plein écran */
.cookie-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: grid;
  place-items: center;
  z-index: 10000;
}

/* Fenêtre */
.cookie-modal-content {
  background: var(--bg);
  color: var(--txt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;               /* ← augmenté pour un peu plus d'air */
  width: min(92vw, 420px);
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
  text-align: center;          /* ← centrer tout le contenu du modal */
}

/* Zone boutons du modal */
.cookie-modal-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: center;     /* ← centrer les boutons */
  flex-wrap: wrap;
}

/* “Gérer mes cookies” (footer) */
#manage-cookies {
  font-weight: 600;
  cursor: pointer;
}
#manage-cookies:hover { text-decoration: underline; }

/* IMPORTANT : cache tout élément portant l’attribut hidden */
[hidden] { display: none !important; }

/* Petits écrans : aère un peu */
@media (max-width: 420px) {
  .cookie-modal-content { padding: 10px; }
  .cookie-modal-actions { gap: 8px; }
}

/* ---------- Ajustements mobile : modale cookies ---------- */
@media (max-width: 720px) {
  .cookie-modal-content {
    padding: 2rem 1.5rem; /* 🟢 padding global augmenté */
    max-width: 90%;
    border-radius: 1rem;
  }

  .cookie-options {
    display: flex;
    flex-direction: column;
    align-items: center; /* 🟢 centre horizontalement tout le contenu */
    gap: 1rem;
    text-align: center;
  }

  .cookie-option {
    display: flex;
    flex-direction: column;
    align-items: center; /* 🟢 aligne chaque checkbox et label au centre */
    gap: 0.5rem;
  }

  .cookie-option input[type="checkbox"] {
    transform: scale(1.3);
    margin: 0 auto; /* 🟢 centre visuellement la checkbox */
  }

  .cookie-option label {
    font-size: 1rem;
    line-height: 1.3;
  }

  .cookie-modal-content button {
    width: 100%;
    max-width: 240px;
    margin: 0.5rem auto;
    font-size: 1rem;
    padding: 0.8rem 1.2rem;
  }
}