/* ============================================================
   ZALE SECK — direction artistique
   Blanc éditorial · photographie · accents sénégalais contemporains.
   ============================================================ */

:root{
  /* Surfaces */
  --paper:  #faf8f5;   /* blanc cassé chaud */
  --ink:    #12100f;   /* noir chaud */
  --ink-2:  #6d6863;
  --ink-3:  #a8a29b;
  --line:   #e4dfd8;
  --dark:   #0c0b0a;

  /* Accents sénégalais — versions sourdes, lisibles sur le papier (texte) */
  --vert:   #0f6b46;
  --ocre:   #8a6212;
  --rouge:  #ae3319;

  /* Mêmes accents, versions vives — décor uniquement, jamais du texte */
  --vert-vif:  #1a9a66;
  --jaune-vif: #edb111;
  --rouge-vif: #e0451f;

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --maxw:   1320px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --sec-y:  clamp(5rem, 12vh, 10rem);

  --ease:   cubic-bezier(.22, 1, .36, 1);
  --ease-s: cubic-bezier(.4, 0, .2, 1);

  /* Couleur des réserves dans les logos (triangle YouTube, ondes Spotify) :
     elle doit suivre le fond, sinon les marques disparaissent sur fond sombre. */
  --knockout: var(--paper);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  font-family: var(--sans);
  font-size:16px; font-weight:400; line-height:1.6;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Le français est écrit dans la page : il s'affiche sans attendre. Seul un
   visiteur déjà passé en anglais patiente la frame que met la traduction. */
html.i18n-pending body{ opacity:0; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }

::selection{ background: var(--vert); color:#fff; }
:focus-visible{ outline:2px solid var(--vert); outline-offset:3px; border-radius:2px; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:500; background:var(--ink); color:#fff; padding:.8rem 1.2rem; font-size:.875rem; }
.skip-link:focus{ left:0; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Bande latérale fixe — progression de lecture */
.edge-rail{
  position:fixed; top:0; bottom:0; width:5px; z-index:80;
  background: rgba(127,122,116,.18); pointer-events:none;
}
.edge-left{ left:0; }
.edge-right{ right:0; }
.edge-rail .rail-fill{
  position:absolute; inset:0; display:block;
  background: linear-gradient(180deg, var(--vert-vif) 0%, var(--jaune-vif) 52%, var(--rouge-vif) 100%);
  clip-path: inset(0 0 calc(100% - var(--p, 0%)) 0);
}
.edge-right .rail-fill{
  background: linear-gradient(0deg, var(--vert-vif) 0%, var(--jaune-vif) 52%, var(--rouge-vif) 100%);
  clip-path: inset(calc(100% - var(--p, 0%)) 0 0 0);
}

/* Bandes de couleur en marge de bloc */
.side-band{ display:block; width:5px; border-radius:0; }
.js .side-band{ transform: scaleY(0); transform-origin:top; transition: transform .9s var(--ease); }
.js .side-band.in{ transform:none; }
.side-vert{ background: var(--vert-vif); }
.side-jaune{ background: var(--jaune-vif); }
.side-rouge{ background: var(--rouge-vif); }

/* Triade sénégalaise — marqueur décoratif minuscule */
.tri{ display:inline-flex; gap:3px; align-items:center; }
.tri i{ width:5px; height:5px; border-radius:50%; display:block; }
.tri i:nth-child(1){ background: var(--vert-vif); }
.tri i:nth-child(2){ background: var(--jaune-vif); }
.tri i:nth-child(3){ background: var(--rouge-vif); }

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
.hero-title, .sec-title, .statement, .d-name, .quote blockquote,
.footer-brand, .nav-brand, .mail, .mobile-menu nav a,
.vid-title, .press-cover figcaption{
  font-family: var(--serif); font-weight:400; letter-spacing:-0.015em;
}

.sec-title{ font-size: clamp(2.75rem, 7vw, 5.5rem); line-height:1; margin-top:1rem; }

/* Filet coloré sous un titre de section */
.rule{ position:relative; display:inline-block; padding-bottom:.18em; }
.rule::after{
  content:""; position:absolute; left:0; bottom:0; height:5px; width: clamp(72px, 22%, 170px);
  transform: scaleX(0); transform-origin:left; transition: transform .9s var(--ease) .25s;
}
.js .rule.in::after{ transform:none; }
html:not(.js) .rule::after{ transform:none; }
.rule-vert::after{ background: var(--vert-vif); }
.rule-jaune::after{ background: var(--jaune-vif); }
.rule-rouge::after{ background: var(--rouge-vif); }

.eyebrow, .dates-h, .disco-h, .lang-btn, .car-drag, .rep-label, .follow-label, .gal-hint,
.car-count, .lb-count, .btn, .nav-links a, .nav-pasa-label,
.footer-nav a, .footer-bottom span, .footer-pasa span, .mobile-pasa span,
.d-go, .d-year, .meta dt, .quote figcaption, .lb-close,
.origine, .hero-vertical, .vid-kind, .vid-out, .vid-note,
.press-file, .press-contact dt,
.instruments li, .mobile-follow{
  font-family: var(--sans); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
}

.eyebrow{ display:flex; align-items:center; gap:.8rem; color: var(--ink-2); }
.eyebrow .eb-bar{
  flex:0 0 auto; display:block; width:26px; height:4px; background: currentColor;
  transform: scaleX(0); transform-origin:left; transition: transform .7s var(--ease);
}
.eyebrow .eb-bar{ transform:none; }
.js .eyebrow .eb-bar{ transform: scaleX(0); }
.js .eyebrow.in .eb-bar{ transform:none; }
.eyebrow::after{ content:""; flex:0 0 auto; width:clamp(2rem,6vw,4.5rem); height:2px; background: currentColor; opacity:.35; }
.eb-vert{ color: var(--vert); } .eb-jaune{ color: var(--ocre); } .eb-rouge{ color: var(--rouge); }

/* Couleur dans la typographie */
.c-vert{ color: var(--vert); font-style:normal; }
.c-rouge{ color: var(--rouge); font-style:normal; }
.quote blockquote .g{ font-style:normal; color: var(--jaune-vif); }

p{ text-wrap: pretty; }
.lede{
  font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height:1.55; font-weight:300;
  color: var(--ink); max-width: 44ch;
}
.lede em{ font-style:italic; font-family: var(--serif); font-size:1.08em; }

/* ============================================================
   MISE EN PAGE
   ============================================================ */
.section{ position:relative; max-width: var(--maxw); margin:0 auto; padding: var(--sec-y) var(--gutter); }
.section-x{ padding-inline: var(--gutter); max-width: var(--maxw); margin-inline:auto; }
.sec-head{ margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec-head--split{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.5rem, 4vw, 4rem); align-items:end;
}
.sec-sub{ color: var(--ink-2); max-width:46ch; font-weight:300; font-size:1rem; }

/* ============================================================
   RÉVÉLATIONS
   ============================================================ */
/* Le masque porte sur l'enfant, jamais sur l'élément observé : un clip-path
   sur la cible annule son intersection et l'IntersectionObserver ne se
   déclencherait jamais. */
.reveal{ overflow:hidden; display:block; }
.reveal > picture{ display:block; width:100%; height:100%; }
.js .reveal > picture, .js .reveal > img{ clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); }
.js .reveal img{ transform: scale(1.08); transition: transform 1.4s var(--ease); }
.js .reveal.in > picture, .js .reveal.in > img{ clip-path: inset(0 0 0 0); }
.js .reveal.in img{ transform:none; }

.js [data-fade]{ opacity:0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-fade].in{ opacity:1; transform:none; }

/* Marge haute/basse : sans elle, `overflow:hidden` rogne les accents des
   capitales (É, À) et les jambages. */
.js [data-splitlines] .split-line{
  display:block; overflow:hidden; padding:.18em 0 .1em; margin:-.18em 0 -.1em;
}
.js [data-splitlines] .split-line > span{ display:block; transform: translateY(105%); transition: transform .95s var(--ease); }
.js [data-splitlines].in .split-line > span{ transform:none; }
.js [data-splitlines].in .split-line:nth-child(2) > span{ transition-delay:.08s; }
.js [data-splitlines].in .split-line:nth-child(3) > span{ transition-delay:.16s; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding: clamp(.7rem, 1.5vw, 1.1rem) 0;
  transition: transform .45s var(--ease), background-color .4s var(--ease-s), backdrop-filter .4s;
}
.nav.hide{ transform: translateY(-105%); }
.nav.solid{ background: rgba(250,248,245,.88); backdrop-filter: saturate(150%) blur(14px); }

.nav-inner{
  max-width: var(--maxw); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; gap: clamp(1rem, 3vw, 2.5rem);
}
.nav-brand{ font-size:1.35rem; color:#fff; transition: color .35s var(--ease-s); flex:0 0 auto; }
.nav-links{ display:flex; gap: clamp(.9rem, 1.7vw, 1.6rem); margin-inline:auto; }
.nav-links a{ position:relative; color: rgba(255,255,255,.82); transition: color .3s var(--ease-s); padding-block:.3rem; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--rouge-vif); transform: scaleX(0); transform-origin:right;
  transition: transform .4s var(--ease);
}
.nav-links a:nth-child(3n+1)::after{ background: var(--vert-vif); }
.nav-links a:nth-child(3n+2)::after{ background: var(--jaune-vif); }
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::after{ transform: scaleX(1); transform-origin:left; }


/* Sélecteur de langue — deux mots et un filet. Le français reste par défaut :
   le bouton actif est marqué, jamais caché. */
.lang{ display:flex; align-items:center; gap:.55rem; flex:0 0 auto; }
.lang-btn{
  position:relative; padding:.5rem .15rem;
  color: rgba(255,255,255,.52); transition: color .3s var(--ease-s);
}
.lang-btn::after{
  content:""; position:absolute; left:0; right:0; bottom:.22rem; height:2px;
  background: var(--jaune-vif); transform: scaleX(0); transform-origin:left;
  transition: transform .4s var(--ease);
}
.lang-btn:hover{ color:#fff; }
.lang-btn.is-on{ color:#fff; }
.lang-btn.is-on::after{ transform:none; }
.lang-sep{ display:block; width:1px; height:11px; background: rgba(255,255,255,.26); }

.nav.on-light .lang-btn{ color: var(--ink-3); }
.nav.on-light .lang-btn:hover,
.nav.on-light .lang-btn.is-on{ color: var(--ink); }
.nav.on-light .lang-sep{ background: var(--line); }

.lang--mobile .lang-btn,
body.menu-open .nav .lang-btn{ color: var(--ink-3); }
.lang--mobile .lang-btn:hover,
.lang--mobile .lang-btn.is-on,
body.menu-open .nav .lang-btn:hover,
body.menu-open .nav .lang-btn.is-on{ color: var(--ink); }
.lang--mobile .lang-sep,
body.menu-open .nav .lang-sep{ background: var(--line); }

/* Gérance PASA Musik — présente dès la barre, sans dominer Zale Seck */
.nav-pasa{ display:flex; align-items:center; gap:.65rem; flex:0 0 auto; padding-left: clamp(.75rem, 2vw, 1.5rem); border-left:1px solid rgba(255,255,255,.18); transition: border-color .35s var(--ease-s), opacity .3s; }
.nav-pasa-label{ color: rgba(255,255,255,.55); font-size:.6rem; letter-spacing:.18em; transition: color .35s var(--ease-s); }
.nav-pasa-mark{ position:relative; display:block; width: clamp(60px, 5.4vw, 78px); }
.nav-pasa-mark img{ width:100%; height:auto; transition: opacity .35s var(--ease-s); }
.nav-pasa-mark .pasa-pos{ position:absolute; inset:0; opacity:0; }
.nav-pasa:hover .nav-pasa-mark{ opacity:.82; }

.nav.on-light .nav-brand{ color: var(--ink); }
.nav.on-light .nav-links a{ color: var(--ink-2); }
.nav.on-light .nav-links a:hover{ color: var(--ink); }
.nav.on-light .nav-pasa{ border-left-color: var(--line); }
.nav.on-light .nav-pasa-label{ color: var(--ink-3); }
.nav.on-light .nav-pasa-mark .pasa-rev{ opacity:0; }
.nav.on-light .nav-pasa-mark .pasa-pos{ opacity:1; }
.nav.on-light .burger span{ background: var(--ink); }

.burger{ display:none; flex-direction:column; gap:6px; padding:8px 2px; flex:0 0 auto; }
.burger span{ width:26px; height:1.5px; background:#fff; display:block; transition: transform .4s var(--ease), background .35s; }
/* Menu ouvert : la barre passe sur fond clair, quel que soit le thème dessous. */
body.menu-open .nav-brand{ color: var(--ink); }
body.menu-open .nav-pasa{ opacity:0; pointer-events:none; }
.nav-pasa{ transition: opacity .3s var(--ease-s), border-color .35s var(--ease-s); }
body.menu-open .burger span{ background: var(--ink); }
body.menu-open .burger span:nth-child(1){ transform: translateY(3.75px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ transform: translateY(-3.75px) rotate(-45deg); }

/* Menu mobile */
.mobile-menu{
  position:fixed; inset:0; z-index:90; background: var(--paper);
  padding: calc(var(--gutter) + 3.5rem) var(--gutter) var(--gutter);
  display:flex; flex-direction:column; justify-content:center; gap: clamp(2rem, 6vh, 3.5rem);
  clip-path: inset(0 0 100% 0); visibility:hidden;
  transition: clip-path .6s var(--ease), visibility 0s linear .6s;
}
body.menu-open .mobile-menu{
  clip-path: inset(0 0 0 0); visibility:visible;
  transition: clip-path .6s var(--ease), visibility 0s;
}
.mobile-menu nav{ display:flex; flex-direction:column; gap:.1rem; }
.mobile-menu nav a{
  font-size: clamp(1.85rem, 9vw, 2.9rem); line-height:1.24; color: var(--ink);
  display:flex; align-items:baseline; gap:1rem;
  opacity:0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.mobile-menu nav a i{
  flex:0 0 auto; width:18px; height:4px; background: currentColor; align-self:center;
}
.mobile-menu nav a:nth-child(1) i{ color: var(--vert-vif); }
.mobile-menu nav a:nth-child(2) i{ color: var(--jaune-vif); }
.mobile-menu nav a:nth-child(3) i{ color: var(--rouge-vif); }
.mobile-menu nav a:nth-child(4) i{ color: var(--vert-vif); }
.mobile-menu nav a:nth-child(5) i{ color: var(--jaune-vif); }
.mobile-menu nav a:nth-child(6) i{ color: var(--rouge-vif); }
.mobile-menu nav a:nth-child(7) i{ color: var(--vert-vif); }
body.menu-open .mobile-menu nav a{ opacity:1; transform:none; }
body.menu-open .mobile-menu nav a:nth-child(1){ transition-delay:.12s; }
body.menu-open .mobile-menu nav a:nth-child(2){ transition-delay:.17s; }
body.menu-open .mobile-menu nav a:nth-child(3){ transition-delay:.22s; }
body.menu-open .mobile-menu nav a:nth-child(4){ transition-delay:.27s; }
body.menu-open .mobile-menu nav a:nth-child(5){ transition-delay:.32s; }
body.menu-open .mobile-menu nav a:nth-child(6){ transition-delay:.37s; }
body.menu-open .mobile-menu nav a:nth-child(7){ transition-delay:.42s; }

/* Cinq icônes et la gérance ne tiennent pas sur une ligne à 375 px :
   chaque bloc prend la sienne plutôt que de se replier n'importe comment. */
.mobile-foot{
  display:grid; grid-template-columns: minmax(0,1fr);
  gap:.7rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.lang--mobile{ margin-bottom:.2rem; }
.mobile-follow{ color: var(--ink-3); }
.mobile-foot .social-row{ margin-left:-11px; flex-wrap:nowrap; }
.mobile-pasa{ display:flex; align-items:center; gap:.6rem; justify-self:end; }
.mobile-pasa span{ color: var(--ink-3); font-size:.6rem; letter-spacing:.18em; }
.mobile-pasa img{ width:92px; height:auto; }

/* ============================================================
   ICÔNES SOCIALES
   ============================================================ */
.social-row{ display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.social-row a{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  color: var(--ink-2);
  transition: color .3s var(--ease-s), background-color .3s var(--ease-s), transform .35s var(--ease);
}
.social-row svg{ width:21px; height:21px; }
.social-row a:hover{ color: var(--ink); background: rgba(18,16,15,.06); transform: translateY(-2px); }
.social-row--lg a{ width:52px; height:52px; }
.social-row--lg svg{ width:24px; height:24px; }
.social-row--dark{ --knockout: var(--dark); }
.social-row--dark a{ color: rgba(255,255,255,.6); }
.social-row--dark a:hover{ color:#fff; background: rgba(255,255,255,.1); }

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.7rem; border-radius:2px;
  transition: background-color .35s var(--ease-s), color .35s var(--ease-s), transform .35s var(--ease);
}
.btn-solid{ background:#fff; color: var(--ink); }
.btn-solid:hover{ background: var(--vert); color:#fff; }
.btn-dark{ background: var(--ink); color:#fff; }
.btn-dark:hover{ background: var(--vert); }
.btn-ghost{ border:1px solid rgba(255,255,255,.45); color:#fff; }
.btn-ghost:hover{ background:#fff; color: var(--ink); border-color:#fff; }
.btn svg{ width:18px; height:18px; flex:0 0 auto; }
.btn-dl svg{ transition: transform .4s var(--ease); }
.btn-dl:hover svg{ transform: translateY(3px); }

/* ============================================================
   HERO — séquence photographique
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; background: var(--dark); color:#fff;
}
.hero-media{
  position:absolute; inset:0; z-index:0;
  /* --out : 0 → 1 pendant que le héros quitte l'écran (posé par le script). */
  transform: translate3d(0, calc(var(--out, 0) * 9vh), 0) scale(calc(1 + var(--out, 0) * .06));
  transform-origin: 50% 40%;
  will-change: transform;
}
.hero-slide{
  position:absolute; inset:0; opacity:0; z-index:0;
  transition: opacity 1.15s var(--ease-s);
}
/* L'entrante passe au-dessus et s'opacifie ; la sortante reste pleine en
   dessous le temps d'être couverte. Deux images à 50 % donnaient une
   surimpression trouble à chaque changement. */
.hero-slide.was-on{ opacity:1; z-index:1; transition:none; }
.hero-slide.is-on{ opacity:1; z-index:2; }
.hero-slide picture, .hero-slide img{ display:block; width:100%; height:100%; }
.hero-slide img{
  object-fit:cover; object-position: var(--pos, 50% 30%);
  transform: scale(1.06);
  will-change: transform; backface-visibility:hidden;
}
/* Chaque photo dérive lentement dans sa propre direction : la séquence reste
   vivante sans jamais ressembler à un diaporama automatique. */
.hero-slide.is-on img{ animation: heroDrift 9.5s linear forwards; }
@keyframes heroDrift{
  from{ transform: scale(1.085) translate3d(var(--dx, 0), var(--dy, 0), 0); }
  to  { transform: scale(1)     translate3d(0, 0, 0); }
}
.hero-slide:nth-child(6n+1) img{ --dx: -1.4%; --dy:  .9%; }
.hero-slide:nth-child(6n+2) img{ --dx:  1.6%; --dy: -.7%; }
.hero-slide:nth-child(6n+3) img{ --dx:   .4%; --dy: 1.5%; }
.hero-slide:nth-child(6n+4) img{ --dx: -1.1%; --dy:-1.2%; }
.hero-slide:nth-child(6n+5) img{ --dx:  1.2%; --dy: 1.1%; }
.hero-slide:nth-child(6n+6) img{ --dx:  -.5%; --dy:-1.5%; }
.hero-media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(8,7,6,.58) 0%, rgba(8,7,6,.1) 30%, rgba(8,7,6,.42) 66%, rgba(8,7,6,.9) 100%);
}
.js .hero-media{ clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease) .05s; }
.js .hero.play .hero-media{ clip-path: inset(0 0 0 0); }

/* Filet vertical discret */
.hero-vertical{
  position:absolute; z-index:3; right: calc(var(--gutter) - .35rem); top:50%;
  transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  color: rgba(255,255,255,.6); font-size:.64rem; letter-spacing:.3em;
}
.hero-vertical b{ color: var(--jaune-vif); font-weight:400; }

.hero-body{
  position:relative; z-index:2; width:100%; max-width: var(--maxw); margin:0 auto;
  padding: 0 var(--gutter) clamp(3.5rem, 10vh, 7rem);
  transform: translate3d(0, calc(var(--out, 0) * -4vh), 0);
  opacity: calc(1 - var(--out, 0) * .85);
}
.hero-title{
  font-size: clamp(4.2rem, 16vw, 14rem); line-height:.82; letter-spacing:-.04em;
  margin-bottom: clamp(1.2rem, 2.4vw, 2rem);
}
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.05em; margin-bottom:-.05em; }
.hero-title .line:nth-child(2){ margin-left: clamp(1.5rem, 7vw, 8rem); }  /* asymétrie */
.hero-title .line > span{ display:block; }
.js .hero-title .line > span{ transform: translateY(105%); transition: transform 1.1s var(--ease); }
.js .hero.play .hero-title .line:nth-child(1) > span{ transform:none; transition-delay:.3s; }
.js .hero.play .hero-title .line:nth-child(2) > span{ transform:none; transition-delay:.42s; }

.hero-foot{ display:flex; align-items:center; gap: clamp(1.2rem, 3vw, 2.5rem); flex-wrap:wrap; }
.hero-cta{ display:flex; gap:.7rem; flex-wrap:wrap; }
.hero-line{
  font-size: clamp(.98rem, 1.4vw, 1.15rem); font-weight:300;
  color: rgba(255,255,255,.88); max-width:28ch;
}
.js .hero-foot{ opacity:0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .hero.play .hero-foot{ opacity:1; transform:none; transition-delay:.68s; }

/* Repères de la séquence — la barre active passe vert → jaune → rouge */
.hero-tribar{
  position:absolute; left:0; right:0; bottom:0; height:6px; z-index:3;
  background: linear-gradient(90deg, var(--vert-vif) 0 33.33%, var(--jaune-vif) 33.33% 66.66%, var(--rouge-vif) 66.66% 100%);
  transform: scaleX(0); transform-origin:left; transition: transform 1.1s var(--ease) .9s;
}
.hero.play .hero-tribar{ transform:none; }
.hero-ticks{
  position:absolute; z-index:3; right: var(--gutter); bottom: clamp(3.5rem, 10vh, 7rem);
  display:flex; gap:6px; align-items:center;
  opacity: calc(1 - var(--out, 0));
}
.tick{ padding:9px 0; display:block; }
.tick i{
  display:block; width: clamp(14px, 2vw, 26px); height:2px;
  background: rgba(255,255,255,.28); position:relative; overflow:hidden;
}
.tick i::after{
  content:""; position:absolute; inset:0; background:#fff;
  transform: scaleX(0); transform-origin:left;
}
/* Le remplissage court sur toute la durée d'affichage de la photo :
   la barre est une horloge, pas un simple point actif. */
.tick.is-on i::after{ animation: tickFill var(--dwell, 4200ms) linear forwards; }
@keyframes tickFill{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
.hero.is-paused .tick.is-on i::after{ animation-play-state: paused; }
.tick:nth-child(3n+1).is-on i::after{ background: var(--vert-vif); }
.tick:nth-child(3n+2).is-on i::after{ background: var(--jaune-vif); }
.tick:nth-child(3n+3).is-on i::after{ background: var(--rouge-vif); }
.tick:hover i{ background: rgba(255,255,255,.55); }

/* ============================================================
   01 — À PROPOS
   ============================================================ */
.identite .side-band{
  position:absolute; left:0; top: calc(var(--sec-y) + 4.2rem); height: clamp(5.5rem, 12vw, 10rem);
}
.statement{
  font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height:1.12;
  margin: clamp(1.5rem,3vw,2.5rem) 0 clamp(3rem, 7vw, 5.5rem);
  max-width: 14em;            /* tient les 3 lignes composées sans renvoi */
}
.statement em{ font-style:italic; color: var(--vert); }

.identite-grid{
  display:grid; grid-template-columns: minmax(0,.8fr) minmax(0,1fr);
  gap: clamp(2rem, 5vw, 5.5rem); align-items:start;
}
/* Le portrait et la fiche restent à l'écran pendant qu'on lit la biographie. */
/* Portrait ET fiche dans la colonne collante : la fiche empêche la colonne
   de se vider sous le portrait pendant la lecture de la biographie. */
.identite-aside{
  position:sticky; top: clamp(5.5rem, 11vh, 8rem);
  display:flex; flex-direction:column; gap: clamp(1.5rem, 3vw, 2.25rem);
}
.identite-portrait{ display:flex; flex-direction:column; gap:1rem; }
.identite-portrait .reveal{ aspect-ratio: 4/5; }
.identite-portrait img{ width:100%; height:100%; object-fit:cover; object-position: 50% 26%; }

.origine{
  display:flex; align-items:center; gap:.6rem;
  color: var(--ink-2); letter-spacing:.16em;
}
.origine .flag{ display:block; width:26px; flex:0 0 auto; line-height:0; }
.origine .flag img{ width:100%; height:auto; }
.origine .flag[hidden]{ display:none; }

.identite-copy{ display:flex; flex-direction:column; gap: clamp(1.75rem, 3.5vw, 2.5rem); padding-top:.4rem; }
.lede{ font-size: clamp(1.08rem, 1.7vw, 1.35rem); line-height:1.5; font-weight:300; max-width:34ch; }
.lede em{ font-family: var(--serif); font-style:italic; font-size:1.12em; }
.prose p{ color: var(--ink-2); font-weight:300; font-size:1rem; line-height:1.75; max-width:58ch; }
.prose p + p{ margin-top:1.1rem; }

/* Instruments — une ligne de signalétique, pas des étiquettes */
.instruments{ display:flex; flex-wrap:wrap; gap:.55rem 1.5rem; }
.instruments li{ color: var(--ink-2); display:flex; align-items:center; gap:.55rem; }
.instruments li::before{ content:""; width:6px; height:6px; background: var(--vert-vif); flex:0 0 auto; }
.instruments li:nth-child(3n+2)::before{ background: var(--jaune-vif); }
.instruments li:nth-child(3n+3)::before{ background: var(--rouge-vif); }

.meta{ border-top:3px solid transparent; border-image: linear-gradient(90deg, var(--vert-vif) 0 33.33%, var(--jaune-vif) 33.33% 66.66%, var(--rouge-vif) 66.66% 100%) 1; }
.meta > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  padding:.85rem 0; border-bottom:1px solid var(--line);
}
.meta dt{ color: var(--ink-3); }
.meta dd{ font-size:.9375rem; text-align:right; }

/* ============================================================
   BANDES PHOTOGRAPHIQUES EN DÉFILEMENT CONTINU
   ============================================================ */
.band{ padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem); }

.mq{ position:relative; overflow:hidden; }
.mq::before, .mq::after{
  content:""; position:absolute; left:0; right:0; height:3px; z-index:2; pointer-events:none;
}
.mq::before{ top:0; }
.mq::after{ bottom:0; }
.mq--strip::before{ background: linear-gradient(90deg, var(--vert-vif), var(--jaune-vif) 50%, var(--rouge-vif)); }
.mq--strip::after{ display:none; }
.mq--gallery::after{ background: linear-gradient(90deg, var(--rouge-vif), var(--jaune-vif) 50%, var(--vert-vif)); }
.mq--gallery::before{ display:none; }
.mq-rail{ display:flex; width:max-content; will-change:transform; }
.mq-group{ display:flex; flex:0 0 auto; }
.mq-group > li{ flex:0 0 auto; }
.mq picture{ display:block; height:100%; }
.mq img{ height:100%; width:auto; object-fit:cover; user-select:none; -webkit-user-drag:none; }

.mq--strip .mq-group{ gap: clamp(.5rem, 1vw, .9rem); padding-right: clamp(.5rem, 1vw, .9rem); }
.mq--strip .mq-group > li{ height: clamp(250px, 38vh, 440px); }
.mq--strip img{ height:100%; }

.mq--gallery .mq-group{ gap: clamp(.6rem, 1.2vw, 1.1rem); padding-right: clamp(.6rem, 1.2vw, 1.1rem); }
.mq--gallery .mq-group > li{ height: clamp(280px, 44vh, 500px); }
.mq-fig{ display:block; height:100%; padding:0; overflow:hidden; background: var(--line); }
.mq-fig img{ transition: transform .8s var(--ease), filter .5s var(--ease-s); }
@media (hover:hover){
  .mq-fig:hover img{ transform: scale(1.04); }
  .mq--gallery{ cursor: grab; }
  .mq--gallery.dragging{ cursor: grabbing; }
}
.mq.dragging .mq-fig{ pointer-events:none; }

/* ============================================================
   02 — MUSIQUE
   ============================================================ */
.music{ border-top:1px solid var(--line); padding-block: var(--sec-y); }

/* ---- Bande d'écoute ----
   Le lecteur Spotify est un objet sombre. Plutôt que de le poser sur le
   papier crème comme un corps étranger, la section bascule en noir autour
   de lui : le widget devient une intention de mise en page. */
.listen{
  position:relative; background: var(--dark); color:#fff; --knockout: var(--dark);
  margin-block: clamp(2.5rem, 5vw, 4.5rem);
  padding-block: clamp(2.75rem, 6vw, 4.75rem);
}
.listen::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, var(--vert-vif) 0 33.33%, var(--jaune-vif) 33.33% 66.66%, var(--rouge-vif) 66.66% 100%);
}
.listen-inner{
  display:grid; grid-template-columns: minmax(0,.82fr) minmax(0,1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items:center;
}
.listen-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:1.15rem; }
.listen-h{
  font-family: var(--serif); font-weight:400; letter-spacing:-.02em;
  font-size: clamp(2.3rem, 5vw, 3.9rem); line-height:.98; color:#fff;
}
.listen-note{
  color: rgba(255,255,255,.58); font-weight:300; font-size:1rem; max-width:30ch;
}
.listen .player iframe{ display:block; width:100%; border:0; }

.plat{ width:100%; margin-top:.35rem; border-top:1px solid rgba(255,255,255,.14); }
.plat li + li{ border-top:1px solid rgba(255,255,255,.14); }
.plat a{
  display:flex; align-items:center; gap:1rem; padding:.95rem .2rem;
  color: rgba(255,255,255,.82);
  transition: padding-left .4s var(--ease), color .3s var(--ease-s);
}
.plat a span{ font-size:1rem; margin-right:auto; }
.plat .plat-ico{ width:21px; height:21px; flex:0 0 auto; color:#fff; }
.plat .plat-go{ width:16px; height:16px; color: rgba(255,255,255,.4); transition: transform .4s var(--ease), color .3s; }
.plat a:hover{ padding-left:.65rem; color:#fff; }
.plat a:hover .plat-go{ transform: translateX(4px); color: var(--jaune-vif); }

.disco-h{ color: var(--ink-3); margin: 0 0 .5rem; }
.disco{ border-top:3px solid transparent; border-image: linear-gradient(90deg, var(--vert-vif) 0 33.33%, var(--jaune-vif) 33.33% 66.66%, var(--rouge-vif) 66.66% 100%) 1; }
.disco li{ border-bottom:1px solid var(--line); }
.disco a{
  display:grid;
  grid-template-columns: minmax(0,1fr) auto 4.5rem auto;
  align-items:center; gap: clamp(.8rem, 2vw, 1.6rem);
  padding: clamp(.9rem, 2vw, 1.45rem) 0; transition: padding-left .45s var(--ease);
}
.d-year{ color: var(--vert); font-variant-numeric: tabular-nums; text-align:right; transition: color .35s; }
.disco li:nth-child(3n+2) .d-year{ color: var(--ocre); }
.disco li:nth-child(3n+3) .d-year{ color: var(--rouge); }
.d-name{ font-size: clamp(1.5rem, 3.4vw, 2.45rem); line-height:1.05; transition: color .35s var(--ease-s); }
.d-go{
  display:inline-flex; align-items:center; gap:.5rem; color: var(--ink-3);
  opacity:0; transform: translateX(-6px); transition: opacity .35s, transform .4s var(--ease);
}
.d-go svg{ width:16px; height:16px; transition: transform .4s var(--ease); }

/* Égaliseur — cinq barres au repos, qui s'animent au survol de la ligne.
   Signal d'écoute, pas un lecteur : aucun fichier audio n'est servi ici. */
.d-eq{ display:flex; align-items:flex-end; gap:3px; height:20px; opacity:.38; transition: opacity .35s var(--ease-s); }
/* Les barres sont mises à l'échelle, jamais redimensionnées : la boucle
   reste sur le compositeur et ne relance pas la mise en page. */
.d-eq i{
  display:block; width:3px; height:20px; background: var(--ink);
  transform: scaleY(.2); transform-origin: bottom;
  transition: background-color .35s var(--ease-s);
}
.disco a:hover .d-eq, .disco a:focus-visible .d-eq{ opacity:1; }
.disco a:hover .d-eq i, .disco a:focus-visible .d-eq i{
  background: var(--ocre); animation: eqBar .9s ease-in-out infinite alternate;
}
.d-eq i:nth-child(1){ animation-delay: 0ms;   --sy: .65; }
.d-eq i:nth-child(2){ animation-delay: 140ms; --sy: 1;   }
.d-eq i:nth-child(3){ animation-delay: 70ms;  --sy: .45; }
.d-eq i:nth-child(4){ animation-delay: 210ms; --sy: .85; }
.d-eq i:nth-child(5){ animation-delay: 40ms;  --sy: .55; }
@keyframes eqBar{ from{ transform: scaleY(.2); } to{ transform: scaleY(var(--sy, .7)); } }

.disco a:hover{ padding-left: clamp(.5rem, 1.5vw, 1.2rem); }
.disco a:hover .d-name{ color: var(--ocre); }
.disco a:hover .d-go{ opacity:1; transform:none; color: var(--ocre); }
.disco a:hover .d-go svg{ transform: translateX(3px); }



/* ============================================================
   CITATION PLEIN CADRE
   ============================================================ */
.quote{
  position:relative; overflow:hidden; background: var(--dark); color:#fff;
  min-height: clamp(440px, 78vh, 820px); display:flex; align-items:center;
}
.quote-media{ position:absolute; inset:-8% 0; z-index:0; }
.quote-media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.quote::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(100deg, rgba(8,7,6,.88) 0%, rgba(8,7,6,.62) 46%, rgba(8,7,6,.2) 100%);
}
.quote-body{ position:relative; z-index:2; max-width: var(--maxw); width:100%; margin:0 auto; padding: var(--sec-y) var(--gutter); }
.quote-body .side-band{
  position:absolute; left: max(0px, calc(var(--gutter) - 1.6rem)); top: var(--sec-y);
  height: clamp(5rem, 11vw, 9rem);
}
.quote blockquote{
  font-size: clamp(1.6rem, 3.5vw, 2.9rem); line-height:1.2; font-style:italic;
  max-width:15em; letter-spacing:-.01em;
}
.quote figcaption{
  margin-top: clamp(1.4rem, 3vw, 2rem); color: rgba(255,255,255,.62);
  padding-top:1rem; border-top:2px solid var(--jaune-vif); display:inline-block;
}

/* ============================================================
   03 — SCÈNE
   ============================================================ */
.live{ padding-block: var(--sec-y); }
.carousel{ position:relative; margin-bottom: clamp(3.5rem, 8vw, 6.5rem); }
.car-track{
  display:flex; gap: clamp(.75rem, 1.6vw, 1.5rem);
  overflow-x:auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Aligne la première image sur le bord du conteneur centré, pas sur la
     gouttière de la fenêtre. En pourcentage plutôt qu'en vw, pour ignorer
     la barre de défilement. */
  --edge: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  padding: 0 var(--edge) 1.25rem;
  scroll-padding-left: var(--edge);
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.car-track::-webkit-scrollbar{ display:none; }
.car-slide{ flex:0 0 auto; scroll-snap-align:start; height: clamp(340px, 62vh, 640px); }
.car-slide.is-tall{ aspect-ratio: 2/3; }
.car-slide.is-wide{ aspect-ratio: 3/2; }
.car-fig{ display:block; width:100%; height:100%; overflow:hidden; background: var(--line); padding:0; }
.car-fig picture, .car-fig img{ width:100%; height:100%; display:block; }
.car-fig img{ object-fit:cover; transition: transform .9s var(--ease); }
@media (hover:hover){
  .car-fig:hover img{ transform: scale(1.035); }
  .car-track{ cursor:grab; }
}
.carousel.dragging .car-track{ scroll-snap-type:none; cursor:grabbing; }
.carousel.dragging .car-fig{ pointer-events:none; }

.car-bar{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-top:1.5rem; }
.car-count, .lb-count{ color: var(--ink-3); font-variant-numeric: tabular-nums; }
.car-drag{ display:none; margin-left:1.1rem; color: var(--ink-3); }
.car-count i, .lb-count i{ font-style:normal; margin-inline:.45rem; opacity:.5; }
.car-count span:first-child{ color: var(--ink); }
.car-nav{ display:flex; gap:.5rem; }
.car-btn{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); color: var(--ink);
  transition: background-color .3s var(--ease-s), border-color .3s var(--ease-s), color .3s var(--ease-s), opacity .3s;
}
.car-btn svg{ width:19px; height:19px; }
.car-btn .flip{ transform: scaleX(-1); }
.car-btn:hover:not(:disabled){ background: var(--ink); border-color: var(--ink); color:#fff; }
.car-btn:disabled{ opacity:.3; cursor:default; }

/* Une colonne par année : l'ancienne liste mélangeait 2024, 2025 et 2026
   sur deux colonnes, et rien ne disait où s'arrêtait une année. */
.dates{ position:relative; display:grid; gap: clamp(1.5rem, 3.5vw, 2.75rem); }
.dates-h{ color: var(--ink-3); }
.dates .side-band{ position:absolute; left:0; top:.2rem; height: clamp(4rem, 8vw, 6.5rem); }

.dates-years{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.dyear-n{
  font-family: var(--serif); font-weight:400; font-size: clamp(1.7rem, 2.8vw, 2.35rem);
  line-height:1; color: var(--ink-3); font-variant-numeric: tabular-nums;
  padding-bottom:.55rem; border-bottom:3px solid var(--line);
}
.dates-years .dyear:nth-child(1) .dyear-n{ border-bottom-color: var(--rouge-vif); color: var(--ink); }
.dates-years .dyear:nth-child(2) .dyear-n{ border-bottom-color: var(--jaune-vif); }
.dates-years .dyear:nth-child(3) .dyear-n{ border-bottom-color: var(--vert-vif); }
.dyear li{
  padding:.8rem 0; border-bottom:1px solid var(--line);
  font-size:.9375rem; font-weight:300; line-height:1.45; color: var(--ink);
}
.dates .btn{ justify-self:start; white-space:nowrap; }

/* ============================================================
   04 — GALERIE
   ============================================================ */
.gallery{ padding-block: var(--sec-y); border-top:1px solid var(--line); }
.gallery .sec-head{ margin-bottom: clamp(2rem, 4vw, 3rem); }
.gal-hint{ color: var(--ink-3); margin-top:1.1rem; }

/* ============================================================
   05 — CONTACT
   ============================================================ */
.contact{ border-top:1px solid var(--line); }
.contact .sec-title{ line-height:.92; }
.contact-cta{ justify-self:start; }
.contact-grid{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.72fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  border-top:3px solid transparent; border-image: linear-gradient(90deg, var(--vert-vif) 0 33.33%, var(--jaune-vif) 33.33% 66.66%, var(--rouge-vif) 66.66% 100%) 1;
  padding-top: clamp(2rem, 4vw, 3rem);
}
.rep{ display:flex; flex-direction:column; align-items:flex-start; gap:1.1rem; }
.rep-label{ color: var(--ink-3); }
.rep-logo{ display:block; width: clamp(140px, 15vw, 180px); transition: opacity .35s var(--ease-s), transform .4s var(--ease); }
.rep-logo img{ width:100%; height:auto; }
.rep-logo:hover{ opacity:.78; transform: translateY(-2px); }
.rep-note{ color: var(--ink-2); font-size:.9375rem; font-weight:300; max-width:28ch; }

.reach{ display:flex; flex-direction:column; align-items:flex-start; }
.mail{
  font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height:1.2;
  border-bottom:1px solid var(--line); padding-bottom:.15rem;
  transition: color .35s var(--ease-s), border-color .35s var(--ease-s);
  overflow-wrap:anywhere;
}
.mail:hover{ color: var(--vert); border-color: var(--vert); }
.tel{ margin-top:1rem; color: var(--ink-2); font-size:1rem; transition: color .3s var(--ease-s); }
.tel:hover{ color: var(--ink); }
.follow-label{ color: var(--ink-3); margin: clamp(2.25rem, 5vw, 3.25rem) 0 .6rem; }
.social-row--lg{ margin-left:-13px; }

/* ============================================================
   03 — VIDÉOS
   Section sombre : elle marque une respiration cinématographique
   entre la citation et la scène.
   ============================================================ */
.videos{
  background: var(--dark); color:#fff; --knockout: var(--dark);
  padding-block: var(--sec-y);
}
.videos .sec-title{ color:#fff; }
.videos .sec-sub{ color: rgba(255,255,255,.62); }
.eb-light{ color: rgba(255,255,255,.72); }

.vid-feature{ margin-bottom: clamp(2rem, 4vw, 3.25rem); }

/* Vignette : bouton plein cadre. L'iframe n'est injectée qu'au clic —
   aucune requête YouTube tant que l'utilisateur n'a rien demandé. */
.vid-shot{
  position:relative; display:block; width:100%; padding:0;
  aspect-ratio:16/9; overflow:hidden; background:#161412;
}
.vid-shot img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1s var(--ease), opacity .5s var(--ease-s);
}
.vid-shot::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,7,6,.05) 40%, rgba(8,7,6,.62) 100%);
  opacity:.75; transition: opacity .5s var(--ease-s);
}
.vid-cue{
  position:absolute; z-index:2; left:50%; top:50%; transform: translate(-50%,-50%);
  display:grid; place-items:center; width: clamp(56px, 6vw, 82px); aspect-ratio:1;
  border:1px solid rgba(255,255,255,.55); border-radius:50%; color:#fff;
  background: rgba(12,11,10,.28); backdrop-filter: blur(2px);
  transition: background-color .4s var(--ease-s), border-color .4s var(--ease-s),
              transform .5s var(--ease), color .4s var(--ease-s);
}
.vid-cue svg{ width: clamp(18px, 2vw, 26px); height: clamp(18px, 2vw, 26px); margin-left:.15em; }
@media (hover:hover){
  .vid-shot:hover img{ transform: scale(1.045); }
  .vid-shot:hover::after{ opacity:1; }
  .vid-shot:hover .vid-cue{
    background:#fff; border-color:#fff; color: var(--ink);
    transform: translate(-50%,-50%) scale(1.06);
  }
}
.vid-shot:focus-visible .vid-cue{ background:#fff; border-color:#fff; color: var(--ink); }

/* L'iframe remplace la vignette, au même format */
.vid-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.vid-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.vid--feat{ display:grid; grid-template-columns: minmax(0,1fr); gap: clamp(1.1rem, 2.5vw, 1.9rem); }
.vid--feat .vid-meta{
  display:grid; grid-template-columns: minmax(0,1fr) auto;
  align-items:end; gap:1rem 2rem;
}
.vid--feat .vid-title{
  grid-row:2; font-size: clamp(1.8rem, 4.2vw, 3.1rem); line-height:1.06; color:#fff;
}
.vid--feat .vid-kind{ grid-row:1; }
.vid-kind{
  display:flex; align-items:center; gap:.7rem;
  color: rgba(255,255,255,.55); margin-bottom:.55rem;
}
.vid-title{ font-size:1.12rem; line-height:1.25; color: rgba(255,255,255,.92); font-weight:400; }
.vid-out{
  grid-row:2; display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap;
  color: rgba(255,255,255,.7); padding-bottom:.35rem;
  border-bottom:1px solid rgba(255,255,255,.28);
  transition: color .3s var(--ease-s), border-color .3s var(--ease-s);
}
.vid-out svg{ width:16px; height:16px; transition: transform .4s var(--ease); }
.vid-out:hover{ color:#fff; border-color:#fff; }
.vid-out:hover svg{ transform: translateX(4px); }

.vid-grid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(1.1rem, 2.4vw, 2rem) clamp(1rem, 2vw, 1.6rem);
}
.vid-grid .vid-shot{ margin-bottom:.95rem; }
.vid-grid .vid-kind{ margin-bottom:.35rem; }

.vid-note{
  margin-top: clamp(2rem, 4vw, 3rem); padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.4);
  display:flex; gap:.6rem 1.5rem; flex-wrap:wrap; justify-content:space-between;
}
.vid-note a{ color: rgba(255,255,255,.7); border-bottom:1px solid rgba(255,255,255,.28); transition: color .3s, border-color .3s; }
.vid-note a:hover{ color:#fff; border-color:#fff; }

/* ============================================================
   06 — PRESSE
   ============================================================ */
.press{ border-top:1px solid var(--line); }
.press .sec-title{ line-height:.94; }
.press-grid{
  display:grid; grid-template-columns: minmax(0,1fr) clamp(260px, 30vw, 380px);
  gap: clamp(2.5rem, 6vw, 6rem); align-items:start;
}
.press-copy{ display:flex; flex-direction:column; align-items:flex-start; gap: clamp(1.5rem, 3vw, 2.25rem); }

.press-toc{
  width:100%; max-width:34rem;
  border-top:3px solid transparent;
  border-image: linear-gradient(90deg, var(--vert-vif) 0 33.33%, var(--jaune-vif) 33.33% 66.66%, var(--rouge-vif) 66.66% 100%) 1;
}
.press-toc li{
  padding:.8rem 0; border-bottom:1px solid var(--line);
  font-size:.9375rem; font-weight:300; color: var(--ink-2);
}

/* Deux téléchargements côte à côte : le français est plein, l'anglais est
   au filet. La hiérarchie dit la langue par défaut sans l'écrire. */
.press-dl{ display:flex; flex-wrap:wrap; gap:.7rem; }
.btn-line{ border:1px solid var(--ink); color: var(--ink); }
.btn-line:hover{ background: var(--ink); color:#fff; }
.btn-dl{ background: var(--ink); color:#fff; }
.btn-line.btn-dl{ background:none; color: var(--ink); }
.btn-line.btn-dl:hover{ background: var(--ink); color:#fff; }
.btn-dl:hover{ background: var(--vert); color:#fff; }
.press-file{ color: var(--ink-3); margin-top:-1rem; }

.press-contact{ display:grid; gap:.9rem; width:100%; max-width:34rem; padding-top:.5rem; border-top:1px solid var(--line); }
.press-contact > div{ display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; padding-top:.7rem; }
.press-contact dt{ color: var(--ink-3); }
.press-contact dd{ font-size:.9375rem; text-align:right; }
.press-contact a{ border-bottom:1px solid var(--line); transition: color .3s, border-color .3s; }
.press-contact a:hover{ color: var(--vert); border-color: var(--vert); }

/* La couverture du PDF, présentée comme un objet posé */
.press-cover{ display:flex; flex-direction:column; gap:1rem; }
.press-cover a{
  display:block; overflow:hidden; background: var(--line);
  box-shadow: 0 1px 0 var(--line), 18px 18px 0 -6px rgba(18,16,15,.06);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.press-cover img{ width:100%; height:auto; transition: transform 1s var(--ease); }
.press-cover a:hover{ transform: translateY(-4px); box-shadow: 0 1px 0 var(--line), 22px 22px 0 -6px rgba(18,16,15,.09); }
.press-cover a:hover img{ transform: scale(1.02); }
.press-cover figcaption{ color: var(--ink-3); font-size:.875rem; }

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.footer{ position:relative; background: var(--dark); color:#fff; }
.footer::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background: linear-gradient(90deg, var(--vert-vif) 0 33.33%, var(--jaune-vif) 33.33% 66.66%, var(--rouge-vif) 66.66% 100%);
}
.footer-inner{
  max-width: var(--maxw); margin:0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.75rem 3rem; flex-wrap:wrap;
}
.footer-brand{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
.footer-nav{ display:flex; gap: clamp(1rem, 2.2vw, 1.9rem); flex-wrap:wrap; }
.footer-nav a{ color: rgba(255,255,255,.6); transition: color .3s var(--ease-s); }
.footer-nav a:hover{ color:#fff; }
.footer-side{ display:flex; align-items:center; gap: clamp(1.1rem, 2.5vw, 2rem); }
.footer-pasa{ display:flex; align-items:center; gap:.7rem; transition: opacity .3s var(--ease-s); }
.footer-pasa span{ color: rgba(255,255,255,.4); font-size:.6rem; letter-spacing:.18em; }
.footer-pasa img{ width:118px; height:auto; }
.footer-pasa:hover{ opacity:.8; }

.footer-bottom{
  max-width: var(--maxw); margin:0 auto; padding:1.4rem var(--gutter) 2.5rem;
  display:flex; justify-content:space-between; gap:.6rem 2rem; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer-bottom span{ color: rgba(255,255,255,.42); letter-spacing:.1em; }

/* ============================================================
   VISIONNEUSE
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:300;
  /* Fond opaque : une visionneuse doit isoler la photo, et un fond translucide
     sur un calque composité ne se mélange pas de façon fiable. */
  background: var(--dark);
  display:flex; align-items:center; justify-content:center;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1rem, 6vw, 5.5rem);
  opacity:0; transition: opacity .35s var(--ease-s);
}
.lightbox[hidden]{ display:none; }
.lightbox.open{ opacity:1; }
.lightbox img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  transform: scale(.985); transition: transform .45s var(--ease);
}
.lightbox.open img{ transform:none; }
.lb-count{
  position:absolute; top: clamp(1.1rem, 3vw, 2.1rem); left: clamp(1rem, 5vw, 3rem);
  color: rgba(255,255,255,.55);
}
.lb-count span:first-child{ color:#fff; }
.lb-close{
  position:absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 5vw, 3rem);
  color: rgba(255,255,255,.7); padding:.5rem; transition: color .3s var(--ease-s);
}
.lb-close:hover{ color:#fff; }
.lb-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  color:#fff; background: rgba(255,255,255,.08); transition: background-color .3s var(--ease-s);
}
.lb-arrow svg{ width:20px; height:20px; }
.lb-arrow .flip{ transform: scaleX(-1); }
.lb-arrow:hover{ background: rgba(255,255,255,.2); }
.lb-prev{ left: clamp(.5rem, 2vw, 1.6rem); }
.lb-next{ right: clamp(.5rem, 2vw, 1.6rem); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 981px){ .mobile-menu{ display:none !important; } }

@media (max-width: 1240px){ .nav-links{ gap: clamp(.7rem, 1.3vw, 1.2rem); } }

@media (max-width: 1240px){
  .nav-pasa-label{ display:none; }
}

/* La gérance quitte la barre avant le menu : la langue, elle, reste
   visible à toutes les largeurs. */
@media (max-width: 1040px){
  .nav-pasa{ display:none; }
}

@media (max-width: 980px){
  .nav-links{ display:none; }
  .burger{ display:flex; }
  .nav .lang{ margin-left:auto; margin-right:.4rem; }
  /* Sans JS le menu ne peut pas s'ouvrir : on garde les liens dans la barre. */
  html:not(.js) .nav-links{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; font-size:.62rem; }
  html:not(.js) .burger{ display:none; }

  .identite-grid{ grid-template-columns:1fr; gap: clamp(2rem,5vw,3rem); }
  .identite-aside{ position:static; }
  .identite-portrait{ max-width:460px; }

  .vid-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* Un nombre impair laisserait un trou en fin de grille : la dernière
     vidéo prend alors toute la largeur. */
  .vid-grid > .vid:last-child:nth-child(odd){ grid-column: 1 / -1; }
  .vid--feat .vid-meta{ grid-template-columns:1fr; align-items:start; }
  .vid--feat .vid-out{ grid-row:auto; justify-self:start; }

  .press-grid{ grid-template-columns:1fr; gap: clamp(2.5rem,6vw,3.5rem); }
  .press-cover{ max-width:320px; }

  .listen-inner{ grid-template-columns:1fr; gap: clamp(1.75rem,4vw,2.5rem); }
  .listen-copy{ align-items:stretch; }

  .dates-years{ grid-template-columns: repeat(2, minmax(0,1fr)); }

  .sec-head--split{ grid-template-columns:1fr; gap:1.75rem; }

  .contact-grid{ grid-template-columns:1fr; gap:3rem; }
}

@media (max-width: 740px){
  .edge-rail{ width:3px; }
  .hero-vertical{ display:none; }
  .hero-title{ font-size: clamp(3.4rem, 20vw, 6rem); }
  .hero-title .line:nth-child(2){ margin-left: 1.25rem; }
  .hero-foot{ gap:1.1rem; }
  .hero-line{ font-size:.9375rem; max-width:24ch; }
  .hero-ticks{ left: var(--gutter); right:auto; bottom: clamp(1.5rem, 4vh, 2.5rem); gap:5px; }
  .hero-cta{ width:100%; }
  .hero-cta .btn{ flex:1 1 auto; justify-content:center; padding-inline:1.1rem; }
  .hero-body{ padding-bottom: clamp(5rem, 14vh, 8rem); }
  .hero-media::after{
    background: linear-gradient(180deg, rgba(8,7,6,.5) 0%, rgba(8,7,6,.06) 24%, rgba(8,7,6,.45) 56%, rgba(8,7,6,.84) 78%, rgba(8,7,6,.96) 100%);
  }

  .statement{ font-size: clamp(1.6rem, 7vw, 2.2rem); max-width:none; }
  .eyebrow::after{ width:1.75rem; }

  .disco a{ grid-template-columns: minmax(0,1fr) auto; gap:.9rem; align-items:baseline; }
  .d-go{ display:none; }
  .d-eq{ display:none; }

  .vid-grid{ grid-template-columns:1fr; }
  .vid--feat .vid-title{ font-size: clamp(1.55rem, 8vw, 2.2rem); }
  .vid-note{ flex-direction:column; gap:.5rem; }

  .press-cover{ max-width:none; }
  .press-cover a{ box-shadow: 0 1px 0 var(--line), 12px 12px 0 -5px rgba(18,16,15,.07); }

  .dates-years{ grid-template-columns:1fr; gap:1.75rem; }

  .mq--strip .mq-group > li{ height: clamp(210px, 46vw, 300px); }
  .mq--gallery .mq-group > li{ height: clamp(230px, 46vw, 330px); }

  .car-slide{ height:auto; }
  .car-slide.is-tall{ width:74vw; aspect-ratio:2/3; }
  .car-slide.is-wide{ width:88vw; aspect-ratio:3/2; }
  .car-nav{ display:none; }
  .car-bar{ justify-content:flex-start; }
  .car-drag{ display:inline; }

  .footer-inner{ flex-direction:column; align-items:flex-start; gap:1.75rem; }
  .footer .social-row{ margin-left:-11px; }
  .footer-bottom{ flex-direction:column; gap:.5rem; }

  .lb-arrow{ width:44px; height:44px; top:auto; bottom: clamp(1rem,4vw,2rem); transform:none; }
}

@media (max-width: 380px){
  :root{ --gutter:1.1rem; }
  .social-row a{ width:40px; height:40px; }
  .nav-pasa-mark{ width:60px; }
}

/* ============================================================
   MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js .reveal > picture, .js .reveal > img, .js .hero-media{ clip-path:none !important; }
  .js .reveal img, .js [data-splitlines] .split-line > span,
  .js .hero-title .line > span, .hero-slide img{ transform:none !important; }
  .js [data-fade], .js .hero-foot{ opacity:1 !important; transform:none !important; }
  /* Pas de dérive, pas d'égaliseur, pas de sortie parallaxe du héros. */
  .hero-slide.is-on img, .d-eq i, .tick.is-on i::after{ animation:none !important; }
  .tick.is-on i::after{ transform: scaleX(1) !important; }
  .hero-media, .hero-body{ transform:none !important; opacity:1 !important; }
  .hero-ticks{ opacity:1 !important; }
  .identite-aside{ position:static !important; }
  .rule.in::after{ width: clamp(56px, 12%, 120px); }
  /* Les bandes ne défilent plus toutes seules : elles deviennent parcourables. */
  .mq{ overflow-x:auto; }
  .mq-rail{ transform:none !important; }
  .car-track{ scroll-behavior:auto; }
}