/* ═══════════════════════════════════════════════════════════════════
   GUYLAINE COSSERON — « Velours & Or »
   style.css (1/3) — fondations : jetons de design, réinitialisation,
   typographie, boutons, navigation, héros, bandeau défilant.
   → Les sections sont dans sections.css · les effets dans effects.css
   POUR CHANGER LES COULEURS : modifiez uniquement le bloc :root.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────── JETONS DE DESIGN — thème NUIT (par défaut) ─────────── */
:root{
  --ink:        #0a0908;
  --ink-2:      #100e0b;
  --ink-3:      #17140f;
  --ink-4:      #221d16;

  --gold:       #c8a25e;
  --gold-soft:  #e8d5a3;
  --gold-deep:  #96703a;
  --velvet:     #4a1220;
  --ivory:      #f3ede2;

  --bg:        var(--ink);
  --bg-alt:    var(--ink-2);
  --bg-card:   rgba(255,255,255,.035);
  --bg-card-2: rgba(255,255,255,.06);
  --text:      var(--ivory);
  /* ─── Les trois niveaux de texte, et pourquoi ces nombres exactement ───
     Un texte écrit en opacité n'a PAS de contraste fixe : il dépend de ce
     qu'il y a derrière. Ces trois valeurs ont donc été calculées, pas
     choisies à l'œil, et chacune tient le plancher WCAG AA de 4,5:1 sur le
     fond le plus défavorable du thème (ici --bg-alt, #100e0b) :
        --text  #f3ede2 pleine opacité ......... 16,5:1
        --muted 62 % ............................ 6,7:1
        --faint 49 % ............................ 4,6:1   ← était 30 % = 2,4:1
     --faint était sous le plancher : il habille pourtant de vrais textes
     (durée d'un spectacle, source d'une citation, note sous un champ de
     formulaire, texte de remplacement des champs). Le relever ne « tasse »
     pas la hiérarchie : les trois niveaux restent séparés d'un facteur
     lisible à l'œil, ils cessent simplement de descendre sous le seuil. */
  --muted:     rgba(243,237,226,.62);
  --faint:     rgba(243,237,226,.49);
  /* Or utilisable comme TEXTE sur les surfaces de verre (barre d'écoute,
     bouton de retour en haut). Sur le thème nuit ces surfaces sont sombres,
     donc l'or clair convient ; sur le thème ivoire elles deviennent claires
     et il faut un or encre — voir le bloc [data-theme="ivoire"]. */
  --gold-ink:  var(--gold-soft);
  --line:      rgba(200,162,94,.20);
  --line-soft: rgba(243,237,226,.10);
  --glass:     rgba(10,9,8,.72);
  --shadow:    0 34px 90px -34px rgba(0,0,0,.9);
  --placeholder: radial-gradient(80% 80% at 30% 18%, rgba(200,162,94,.22), transparent 64%),
                 linear-gradient(158deg, #241c12, #100c09);

  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-ui:      'Outfit', -apple-system, 'Segoe UI', system-ui, sans-serif;
  /* Troisième rôle du trio : les tout petits libellés (dates, durées,
     surtitres, numéros de section). Largeur fixe, donc les chiffres
     s'alignent en colonne d'une ligne à l'autre. Le mono a déjà de l'air
     dans ses lettres : partout où on le pose, on RÉDUIT l'interlettrage,
     sinon l'étiquette part en confettis. */
  --font-mono:    'DM Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --container: 1280px;
  --gutter:    clamp(1.15rem, 4vw, 3.25rem);
  --nav-h:     86px;
  --radius:    3px;
  --section-y: clamp(4.5rem, 11vw, 10rem);
}
/* ─────────── Thème IVOIRE (clair) — activé par le bouton lune/soleil ───────────
   Seuls les jetons changent : tout le reste du site suit automatiquement. */
[data-theme="ivoire"]{
  --bg:        #f4f0e8;
  --bg-alt:    #ebe5d9;
  --bg-card:   rgba(23,20,15,.035);
  --bg-card-2: rgba(23,20,15,.06);
  --text:      #17140f;
  /* Mêmes planchers, recalculés pour un fond clair : l'encre noire couvre
     moins vite un fond ivoire qu'un ivoire ne couvre un fond noir.
        --muted 68 % ............................ 5,7:1
        --faint 61 % ............................ 4,6:1   ← était 34 % = 2,2:1 */
  --muted:     rgba(23,20,15,.68);
  --faint:     rgba(23,20,15,.61);
  /* L'or du thème clair était #a97c31 : 3,3:1 sur le fond de page, donc
     SOUS le plancher pour les 28 endroits où il sert de texte (liens de
     carte, libellés en petites capitales). #7d5c24 garde la même teinte et
     tient 5,4:1 sur --bg comme 4,9:1 sur --bg-alt. */
  --gold:      #7d5c24;
  --gold-soft: #c8a25e;
  /* Or clair sur fond clair = 2,1:1. Les trois surfaces de verre du thème
     ivoire (poignée « Écouter », minutage, retour en haut) réclament donc
     un or encre, sans quoi leur libellé est illisible. */
  --gold-ink:  #7d5c24;
  --line:      rgba(169,124,49,.26);
  --line-soft: rgba(23,20,15,.12);
  --glass:     rgba(244,240,232,.82);
  --shadow:    0 30px 70px -34px rgba(60,45,20,.35);
  --placeholder: radial-gradient(80% 80% at 30% 18%, rgba(169,124,49,.26), transparent 64%),
                 linear-gradient(158deg, #e6dcc7, #cfc3a8);
}

/* ─────────── RÉINITIALISATION & BASE ─────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-weight:300;
  font-size:clamp(.95rem, .35vw + .88rem, 1.06rem);
  line-height:1.75;
  /* Ce rognage PORTE quelque chose, il ne rattrape pas une négligence.
     Deux mots géants débordent volontairement de la page : les .section-ghost
     (« Voix », « Scène »), posés à left:-2vw et right:-2vw, en white-space:nowrap
     et clamp(9rem,26vw,24rem), que GSAP décale encore au défilement
     (data-parallax="0.05"). Sans overflow-x:hidden, chacun ouvrirait une barre
     de défilement horizontale sur toute la hauteur du site.

     Ce qu'il faut savoir en revanche : « hidden » CACHE le débord, il ne
     l'empêche pas. Un bloc trop large passerait donc inaperçu à l'œil et
     coupé à l'écran. Le contrôle « aucun défilement horizontal » ne se fait
     pas en cherchant une barre — elle ne peut pas apparaître — mais en
     comparant, dans la console :
         document.documentElement.scrollWidth > window.innerWidth
     Un test de fumée relit cette paire (le rognage et ce qu'il porte) : le
     jour où les .section-ghost disparaîtront, la ligne devra partir avec eux. */
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Une police variable possède un axe « optical size » : le dessin des
     lettres s'ajuste à la taille de rendu — pleins et déliés plus fins en
     grand, plus robustes en petit. « auto » laisse le navigateur suivre cet
     axe au lieu de figer un seul dessin pour toutes les tailles. */
  font-optical-sizing:auto;
  transition:background .6s var(--ease-soft), color .6s var(--ease-soft);
}
body.is-locked{ overflow:hidden; }

/* ─── Détails de composition ──────────────────────────────────────────
   Trois réglages qui ne se voient pas un par un, et qu'on remarque tous
   ensemble : c'est ce qui distingue une page « bien faite » d'une page
   « composée ». Aucun ne coûte un octet de plus au visiteur, et chacun est
   ignoré sans dommage par un navigateur qui ne le connaît pas. */
p{ text-wrap:pretty; }
/* Les guillemets d'ouverture d'une citation sortent dans la marge : le bord
   gauche du texte reste net, au lieu d'être décalé d'un caractère. */
blockquote{ hanging-punctuation:first last; }
/* Chiffres à largeur fixe partout où un nombre change ou s'aligne : dates
   de l'agenda, minutages, années de disques, numéros de bloc. Sans cela,
   le « 1 » plus étroit que le « 8 » fait danser des colonnes qui devraient
   se lire d'un seul coup d'œil. */
time,.event-date,.event-place,.disc-year,.stat-value,.dock-time,
.group-count,.group-num,.ndm-num,.mm-num,.preloader-count{ font-variant-numeric:tabular-nums; }

img,svg,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font-family:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,textarea,select{ font-family:inherit; }
::selection{ background:var(--gold); color:var(--ink); }
/* Anneau de mise au point : accessibilité clavier soignée */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}
/* <main tabindex="-1"> reçoit le focus au clic sur le lien d'évitement. On
   retire son anneau : il encadrerait la page entière, ce qui n'apprend rien.
   Le focus reste bien posé — c'est lui qui compte, pas son dessin. */
#main:focus,#main:focus-visible{ outline:none; }

/* ─────────── LIEN D'ÉVITEMENT ───────────
   Il ne se cache PAS avec display:none ni visibility:hidden : ces deux
   déclarations le retireraient de l'ordre de tabulation, donc de l'existence.
   On le sort de l'écran par une transformation, et il redescend au focus. */
.skip-link{
  position:fixed; top:0; left:50%; z-index:9999;
  padding:.75rem 1.4rem;
  font-family:var(--font-ui); font-size:.82rem;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:var(--gold);
  border-radius:0 0 6px 6px;
  transform:translate(-50%,-130%);
  transition:transform .2s var(--ease-soft);
}
.skip-link:focus{ transform:translate(-50%,0); }
@media (prefers-reduced-motion:reduce){ .skip-link{ transition:none; } }

/* Ascenseur discret, teinté or */
*{ scrollbar-width:thin; scrollbar-color:var(--gold-deep) transparent; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--gold-deep), #3a2d18); border-radius:20px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--gold); }

/* ─────────── STRUCTURE ─────────── */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
main{ position:relative; z-index:1; }

section[data-section]{ position:relative; }

/* ─────────── TYPOGRAPHIE ─────────── */
/* Règle de partage du trio, valable dans tout le site :
      – un TITRE           → var(--font-display)   (Cormorant, il a du caractère)
      – du TEXTE COURANT   → var(--font-ui)        (Outfit, il se fait oublier)
      – une MÉTADONNÉE     → var(--font-mono)      (DM Mono : date, durée,
        surtitre, compteur, étiquette — tout ce qui renseigne sans inviter)
      – une ACTION         → var(--font-ui)        (bouton, lien, onglet : le
        mono y ferait « terminal », et on clique moins volontiers sur ce qui
        ressemble à une console)
   La frontière métadonnée / action est le seul point où il faut réfléchir :
   « 26 SEPT · GENÈVE » informe → mono. « ÉCOUTER » demande un geste → sans. */
.kicker{
  display:inline-flex; align-items:center; gap:.85rem;
  font-family:var(--font-mono);
  font-size:.7rem; font-weight:400;
  /* .42em → .3em : le mono porte déjà son air dans le dessin des lettres. */
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.1rem;
}
.kicker::before{
  content:""; width:34px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold));
}

.section-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.4rem, 6.2vw, 5rem);
  line-height:1.02;
  letter-spacing:-.015em;
  /* « balance » répartit les mots entre les lignes au lieu de remplir la
     première et de laisser un mot seul en dessous. C'est le détail qui
     sépare un titre composé d'un titre simplement affiché : plus aucune
     ligne orpheline, quelle que soit la largeur de l'écran. Le navigateur
     qui ne connaît pas la propriété l'ignore — rien à prévoir. */
  text-wrap:balance;
}
.section-title em{ font-style:italic; color:var(--gold); }

.section-lead{
  max-width:56ch; margin-top:1.4rem;
  color:var(--muted); font-size:1.02rem;
  /* « pretty » ne rééquilibre pas tout le paragraphe : il ne soigne que les
     dernières lignes, pour qu'aucune ne se réduise à un mot isolé. C'est la
     bonne propriété pour du texte courant — « balance » y coûterait cher. */
  text-wrap:pretty;
}
.section-header{ margin-bottom:clamp(2.5rem, 6vw, 4.5rem); max-width:var(--container); }
.section-header.center{ text-align:center; }
.section-header.center .kicker::before{ display:none; }
.section-header.center .section-lead{ margin-inline:auto; }

/* Mot fantôme en très grand, en arrière-plan (profondeur) */
.section-ghost{
  position:absolute; top:6%; left:-2vw; z-index:0;
  font-family:var(--font-display); font-weight:600; font-style:italic;
  font-size:clamp(9rem, 26vw, 24rem); line-height:.8;
  color:var(--text); opacity:.028;
  pointer-events:none; user-select:none; white-space:nowrap;
}
.section-ghost.right{ left:auto; right:-2vw; }

/* ─────────── BOUTONS ─────────── */
.btn{
  --btn-bg:transparent;
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.75rem;
  padding:1.05rem 2.35rem;
  font-size:.73rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
  border:1px solid var(--gold);
  border-radius:var(--radius);
  color:var(--text);
  transition:color .45s var(--ease), border-color .45s var(--ease),
             transform .45s var(--ease), box-shadow .45s var(--ease);
  will-change:transform;
}
.btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.4; }
.btn svg path{ transition:transform .45s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }

/* Remplissage doré qui monte depuis le bas */
.btn::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn > *{ position:relative; z-index:1; }
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:#0a0908; border-color:var(--gold-soft); }
.btn:active{ transform:scale(.97); }
/* Variante pleine (or) */
.btn-solid{ color:#0a0908; }
.btn-solid::before{ transform:translateY(0); }
.btn-solid:hover::before{ transform:translateY(-101%); }
/* Au survol, le remplissage doré redescend et laisse réapparaître le fond de
   la page. Sur le thème ivoire, un or clair sur un fond ivoire donnait 2,1:1
   — un bouton d'appel à l'action illisible pendant tout le survol, c'est-à-
   dire au moment précis où l'on vise le clic. --gold-ink suit le thème. */
.btn-solid:hover{ color:var(--gold-ink); }
.btn-solid::after{
  content:""; position:absolute; inset:0; z-index:0;
  border:1px solid var(--gold);
}

/* Variante fantôme (contour discret) */
.btn-ghost{ border-color:var(--line-soft); color:var(--text); }
.btn-ghost:hover{ border-color:var(--gold); }

.btn-sm{ padding:.7rem 1.5rem; font-size:.66rem; letter-spacing:.2em; }
.btn-wide{ width:100%; }

/* Mini-égaliseur dans le bouton « Écouter un extrait » */
.btn-eq{ display:inline-flex; align-items:flex-end; gap:2px; height:12px; }
.btn-eq i{ width:2px; background:var(--gold); height:100%; transform-origin:bottom;
  animation:eqBar 1.1s ease-in-out infinite; }
.btn-eq i:nth-child(2){ animation-delay:.14s; }
.btn-eq i:nth-child(3){ animation-delay:.28s; }
.btn-eq i:nth-child(4){ animation-delay:.42s; }
.btn-ghost:hover .btn-eq i{ background:var(--gold); }
@keyframes eqBar{ 0%,100%{ transform:scaleY(.3); } 50%{ transform:scaleY(1); } }

/* Lien souligné « à la main » */
.link-line{
  position:relative; color:var(--gold);
  font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
}
.link-line::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.link-line:hover::after{ transform:scaleX(1); }
/* ═══════════════ NAVIGATION ═══════════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:70;
  border-bottom:1px solid transparent;
  transition:transform .6s var(--ease), background .5s var(--ease-soft),
             border-color .5s var(--ease-soft), backdrop-filter .5s;
}
.nav.is-scrolled{
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav.is-hidden{ transform:translateY(-100%); }

.nav-inner{
  max-width:var(--container); margin-inline:auto;
  padding-inline:var(--gutter);
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}

/* Logo */
.nav-logo{ display:inline-flex; align-items:center; gap:.8rem; }
.nav-logo-mark{ width:40px; height:40px; flex:none; }
.nav-logo-mark svg{ width:100%; height:100%; overflow:visible; }
.nav-logo-mark circle{
  fill:none; stroke:var(--gold); stroke-width:1;
  stroke-dasharray:139; stroke-dashoffset:0;
  transition:stroke-dashoffset .9s var(--ease), opacity .4s;
}
.nav-logo-mark text{
  fill:var(--gold); font-family:var(--font-display); font-size:15px;
  letter-spacing:.04em;
}
.nav-logo:hover .nav-logo-mark circle{ stroke-dashoffset:139; }
.nav-logo-text{
  font-family:var(--font-display); font-size:1.22rem;
  letter-spacing:.055em; white-space:nowrap;
}
.nav-logo-text em{ font-style:italic; color:var(--gold); }

/* Liens */
.nav-links{ display:flex; align-items:center; gap:2.1rem; }
.nav-link{
  position:relative; display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem 0;
  font-size:.71rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);
  transition:color .4s var(--ease);
}
.nav-link:hover,.nav-link.is-active{ color:var(--text); }
/* Soulignement doré qui se déploie depuis la gauche */
.nav-link > span{ position:relative; display:inline-block; }
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.nav-link:hover::after,.nav-link.is-active::after{ transform:scaleX(1); }

.nav-caret{ width:9px; height:6px; fill:none; stroke:var(--gold); stroke-width:1.6;
  transition:transform .4s var(--ease); }
.nav-drop{ position:relative; }
.nav-drop:hover .nav-caret{ transform:rotate(180deg); }

.nav-drop-menu{
  position:absolute; top:calc(100% + 14px); left:50%;
  min-width:220px; padding:.55rem;
  background:var(--bg-alt);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden;
  transform:translateX(-50%) translateY(10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop.is-open .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-drop.is-open .nav-caret{ transform:rotate(180deg); }
.nav-drop-menu::before{
  content:""; position:absolute; top:-7px; left:50%; margin-left:-6px;
  width:12px; height:12px; background:var(--bg-alt);
  border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:rotate(45deg);
}
.nav-drop-menu a{
  position:relative; display:flex; align-items:center; gap:.8rem;
  padding:.7rem .95rem; font-size:.84rem; color:var(--muted);
  transition:color .3s, background .3s, padding-left .3s var(--ease);
}
.nav-drop-menu a:hover{ color:var(--text); background:var(--bg-card); padding-left:1.3rem; }
.ndm-num{ font-family:var(--font-display); font-style:italic; color:var(--gold); font-size:.9rem; }
/* Actions à droite */
.nav-actions{ display:flex; align-items:center; gap:1rem; }

.theme-toggle{
  position:relative; width:40px; height:40px; flex:none;
  border:1px solid var(--line-soft); border-radius:50%;
  display:grid; place-items:center;
  transition:border-color .4s, background .4s, transform .4s var(--ease);
}
.theme-toggle:hover{ border-color:var(--gold); background:var(--bg-card); transform:rotate(18deg); }
.theme-toggle svg{
  position:absolute; width:17px; height:17px;
  fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round;
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.ti-sun{ opacity:0; transform:rotate(-90deg) scale(.5); }
.ti-moon{ opacity:1; transform:none; }
[data-theme="ivoire"] .ti-sun{ opacity:1; transform:none; }
[data-theme="ivoire"] .ti-moon{ opacity:0; transform:rotate(90deg) scale(.5); }

/* Bouton hamburger */
.nav-toggle{
  display:none; width:44px; height:44px; flex:none;
  border:1px solid var(--line-soft); border-radius:50%;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{
  display:block; width:19px; height:1.5px; background:var(--text);
  transition:transform .45s var(--ease), opacity .3s;
}
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }
/* ═══════════════ MENU PLEIN ÉCRAN (mobile) ═══════════════ */
.mobile-menu{
  position:fixed; inset:0; z-index:90;
  visibility:hidden; pointer-events:none;
}
.mobile-menu.is-open{ visibility:visible; pointer-events:auto; }
.mm-backdrop{
  position:absolute; inset:0; background:rgba(6,5,4,.6);
  opacity:0; transition:opacity .6s var(--ease);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.mobile-menu.is-open .mm-backdrop{ opacity:1; }

.mm-panel{
  position:absolute; inset:0 0 0 auto;
  width:min(100%, 460px);
  padding:calc(var(--nav-h) * .8) clamp(1.5rem,7vw,3.5rem) 2rem;
  background:var(--bg-alt);
  border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .75s var(--ease);
  overflow-y:auto;
}
.mobile-menu.is-open .mm-panel{ transform:none; }
.mm-panel::before{
  content:"GC"; position:absolute; right:-.5rem; bottom:-2rem;
  font-family:var(--font-display); font-weight:700; font-size:16rem; line-height:1;
  color:var(--text); opacity:.03; pointer-events:none;
}
.mm-close{
  position:absolute; top:1.5rem; right:clamp(1.5rem,7vw,3.5rem);
  width:42px; height:42px; border:1px solid var(--line-soft); border-radius:50%;
  display:grid; place-items:center; transition:border-color .3s, transform .4s var(--ease);
}
.mm-close svg{ width:16px; height:16px; fill:none; stroke:var(--text); stroke-width:1.5; }
.mm-close:hover{ border-color:var(--gold); transform:rotate(90deg); }
.mm-kicker{
  font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:2rem;
}
.mm-links{ display:flex; flex-direction:column; }
.mm-links a{
  display:flex; align-items:baseline; gap:1rem;
  padding:.62rem 0;
  border-bottom:1px solid var(--line-soft);
  opacity:0; transform:translateX(30px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
.mobile-menu.is-open .mm-links a{ opacity:1; transform:none; }
.mobile-menu.is-open .mm-links a:nth-child(1){ transition-delay:.16s; }
.mobile-menu.is-open .mm-links a:nth-child(2){ transition-delay:.22s; }
.mobile-menu.is-open .mm-links a:nth-child(3){ transition-delay:.28s; }
.mobile-menu.is-open .mm-links a:nth-child(4){ transition-delay:.34s; }
.mobile-menu.is-open .mm-links a:nth-child(5){ transition-delay:.40s; }
.mobile-menu.is-open .mm-links a:nth-child(6){ transition-delay:.46s; }
.mobile-menu.is-open .mm-links a:nth-child(7){ transition-delay:.52s; }
.mobile-menu.is-open .mm-links a:nth-child(8){ transition-delay:.58s; }
.mm-num{ font-size:.62rem; letter-spacing:.2em; color:var(--gold); flex:none; }
.mm-txt{
  font-family:var(--font-display); font-size:1.85rem; font-weight:400;
  line-height:1.15; transition:transform .4s var(--ease);
}
.mm-links a:hover .mm-txt{ color:var(--gold); transform:translateX(6px); }

.mm-foot{ margin-top:auto; padding-top:2rem; }
.mm-socials{ display:flex; gap:.6rem; margin-bottom:1rem; }
.mm-mail{ font-size:.85rem; color:var(--muted); border-bottom:1px solid var(--line); }
.mm-mail:hover{ color:var(--gold); }

/* ═══════════════ REPÈRES DE SECTION (colonne de droite) ═══════════════ */
.dots-nav{
  position:fixed; top:50%; right:clamp(.6rem,1.6vw,1.6rem); z-index:60;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:.15rem;
  opacity:0; transition:opacity .6s var(--ease);
}
body.is-loaded .dots-nav{ opacity:1; }
.dots-nav a{
  display:flex; align-items:center; justify-content:flex-end; gap:.6rem;
  padding:.42rem .2rem;
}
.dots-nav .dot{
  width:18px; height:1px; background:var(--faint); flex:none;
  transition:width .5s var(--ease), background .4s;
}
.dots-nav a:hover .dot{ width:30px; background:var(--gold); }
.dots-nav a.is-active .dot{ width:34px; background:var(--gold); }
.dot-label{
  font-family:var(--font-mono);
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
  opacity:0; transform:translateX(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  order:-1;
}
.dots-nav a:hover .dot-label,
.dots-nav a.is-active .dot-label{ opacity:1; transform:none; }

/* ═══════════════ HÉROS ═══════════════
   Il ne reste ici que la TYPOGRAPHIE du premier écran : le surtitre, le nom,
   la phrase, les deux boutons. Le décor est parti dans css/prelude.css, et
   ce partage est volontaire — c'est ce qui fait que le prélude est un calque
   au-dessus du site plutôt qu'une réécriture du site.

   Ce qui a disparu d'ici, et pourquoi :
     • .hero-slides / .hero-slide / @keyframes kenBurns / les trois [data-tone]
       — trois fonds qui se relayaient. Le film n'a plus de diapositive à
       fondre : il a une position. Le zoom lent de Ken Burns est devenu la
       caméra continue du canvas, qui va de 1,06 à 1,14 sur TOUT le trajet au
       lieu de repartir de zéro toutes les douze secondes ;
     • .hero-shade — un voile fixe. Remplacé par les quatre couches de
       lisibilité du prélude, dont deux suivent le texte au lieu de couvrir
       l'écran en permanence ;
     • .hero-particles, .hero-monogram, .hero-rule, .hero-card, .hero-nav,
       .scroll-cue, .hero-equalizer — sept éléments animés sur un écran, donc
       zéro point d'entrée. Il en reste un : le nom, posé sur le film.

   .hero elle-même a disparu comme classe de section (le premier écran est
   désormais .prelude), mais la règle reste, courte, pour une raison : le
   guide PDF, l'impression et deux contrôles de npm test la nomment encore
   comme conteneur générique. Elle ne coûte rien et évite un mensonge. */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + 3rem) var(--gutter) clamp(7rem,14vh,10rem);
  overflow:hidden;
}

/* Contenu du héros */
.hero-content{
  position:relative; z-index:2;
  width:100%; max-width:var(--container); margin-inline:auto;
  padding-left:clamp(0px, 2vw, 2.5rem);
}
/* ─── La bande d'identité du prélude ───
   Ces quatre règles habillaient l'ancien héros, où elles étaient posées sur une
   photo sombre. Elles sont devenues la bande 0 du film sans être rejugées, et
   elles écrivaient leurs couleurs EN DUR : clair sur foncé, toujours. En thème
   ivoire le résultat mesurait 1,05:1 sur le nom et 1,01:1 sur l'accroche —
   c'est-à-dire rien du tout. Elles lisent maintenant les mêmes encres que les
   trois autres bandes, celles que l'audit de la pire image surveille.

   Elles reçoivent aussi --tshadow, la troisième couche de lisibilité, qui leur
   manquait : sans elle, la cliente n'avait qu'à charger une photo claire dans
   sa première diapositive pour effacer son propre nom, même en thème nuit. */
.hero-kicker{
  display:inline-flex; align-items:center; gap:1rem;
  font-family:var(--font-mono);
  font-size:.68rem; font-weight:400;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--pr-surtitre);
  text-shadow:var(--tshadow);
  margin-bottom:1.6rem;
}
/* currentColor plutôt que --gold : le trait suit le surtitre au lieu de vivre
   sa vie, exactement comme .pr-chip-trait dans les trois autres bandes. */
.hk-line{ width:clamp(30px,6vw,72px); height:1px; background:currentColor; opacity:.7; display:inline-block; }

.hero-title{
  font-family:var(--font-display); font-weight:300;
  line-height:.86; letter-spacing:-.02em;
  color:var(--pr-texte);
  text-shadow:var(--tshadow);
}
.ht-row{ display:block; overflow:hidden; padding-bottom:.06em; }
.ht-row-2{ padding-left:clamp(0px, 6vw, 5.5rem); }
.ht-word{
  display:inline-block;
  font-size:clamp(3.4rem, 12.5vw, 11rem);
}
/* Le dégradé à trois arrêts d'or a été retiré, et ce n'est pas une perte.
   Mesuré sur la pire photo, il valait 4,52:1 sur son arrêt le plus clair mais
   2,74:1 au milieu et moins encore au bout : un mot dont la lisibilité change
   d'une lettre à l'autre. La doctrine met d'ailleurs les dégradés d'or dans sa
   liste d'anti-patrons — la signature de ce site est la ligne de voix, pas un
   effet de matière sur un nom propre. Un aplat tient la même hiérarchie : le
   prénom prend l'encre du texte, le nom prend l'or. */
.ht-italic{
  font-style:italic; font-weight:400;
  color:var(--pr-accent);
}
/* Chaque lettre est un bloc : elles montent une à une (voir animations.js) */
.ht-word .ltr{
  display:inline-block; will-change:transform;
  transform:translateY(110%) rotate(6deg);
  transition:transform 1.15s var(--ease);
}
.ht-word .ltr.is-space{ width:.3em; }
body.is-loaded .ht-word .ltr{ transform:none; }

.hero-tagline{
  max-width:38ch; margin-top:1.9rem;
  /* Graisse 300 et non 200. Une graisse « cheveu » sur une photo est le
     défaut d'amateur le plus courant : le lissage en niveaux de gris
     (-webkit-font-smoothing:antialiased) amincit encore les fûts en clair
     sur foncé, et le peu qui reste se noie dans le grain de l'image. Le
     contraste mesuré ne bouge pas d'un point — c'est la LISIBILITÉ qui
     change, et elle ne se lit pas dans un rapport de luminance. */
  font-size:clamp(1rem,1.5vw,1.16rem); font-weight:300;
  color:var(--pr-texte-doux);
  text-shadow:var(--tshadow);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.6rem; }
/* Retirés ici, et listés pour que personne ne les cherche : .hero-card et
   ses .hc-*, .hero-nav et ses .hn-*, .scroll-cue et .sc-line, @keyframes
   cueRun, .hero-equalizer. Cinq éléments d'interface qui n'existaient que
   pour piloter un diaporama disparu — deux flèches, un compteur, des
   pastilles, une fiche « à l'affiche » et un égaliseur décoratif.

   Le calcul de lisibilité de la fiche (plaque à 72 %, pire cas photo
   blanche) n'est pas perdu : il a été refait pour les bandes du prélude,
   avec le même raisonnement et des chiffres vérifiés par npm run test:site.
   Voir docs/prelude-paquet-de-conception.md, section 8. */
/* ═══════════════ BANDEAU DÉFILANT ═══════════════ */
.marquee{
  position:relative; overflow:hidden;
  padding:1.15rem 0;
  background:var(--bg-alt);
  border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex; width:max-content;
  animation:marquee 42s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.mq-item{
  display:inline-flex; align-items:center; gap:1.6rem;
  padding-right:1.6rem;
  font-family:var(--font-display); font-style:italic; font-weight:300;
  font-size:clamp(1.15rem,2.2vw,1.6rem);
  color:var(--muted); white-space:nowrap;
}
.mq-item i{ font-style:normal; font-size:.6em; color:var(--gold); }
@keyframes marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ═══════════════ ADAPTATION AUX ÉCRANS ═══════════════ */
@media (max-width:1180px){
  .dots-nav{ display:none; }
}
@media (max-width:1024px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .hero{ align-items:flex-end; padding-bottom:clamp(8rem,18vh,11rem); }
  .hero-content{ padding-top:3rem; }
}
@media (max-width:640px){
  :root{ --nav-h:72px; }
  .nav-logo-text{ font-size:1.05rem; }
  .nav-cta{ display:none; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .ht-row-2{ padding-left:1.2rem; }
}


/* ═══════════════════ PAGE « INTROUVABLE » (404.html) ═══════════════════
   Une adresse qui n'existe pas doit ressembler au site, pas à une panne.
   Sans cette page, Netlify affiche son propre écran gris : le visiteur croit
   que c'est le site de la chanteuse qui est cassé.                        */
.oops{
  min-height:100vh; display:grid; place-items:center; text-align:center;
  padding:2rem; background:var(--ink); color:var(--ivory);
}
.oops-inner{ max-width:34rem; }
.oops-code{
  font-family:var(--font-display); font-size:clamp(5rem,18vw,9rem); line-height:1;
  color:var(--gold); letter-spacing:.04em; margin:0;
}
.oops-title{
  font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,4vw,2.1rem);
  margin:.6rem 0 1rem;
}
.oops-text{ opacity:.72; line-height:1.7; margin:0 0 2rem; }
.oops-back{
  display:inline-block; padding:.9rem 1.8rem; border:1px solid var(--gold);
  color:var(--gold); text-decoration:none; letter-spacing:.12em;
  text-transform:uppercase; font-size:.78rem; transition:.3s;
}
.oops-back:hover,.oops-back:focus-visible{ background:var(--gold); color:var(--ink); }