/* =========================================================
   ALEXIS CHORON — one page
   Palette bichrome : orange (veste) · gris béton · blanc craie
   Couleurs échantillonnées sur le portrait original.
   ========================================================= */

:root{
  --orange:       #CB5321;
  --orange-vif:   #E86A28;
  --orange-dark:  #75270B;
  --craie:        #F2EFEA;
  --craie-2:      #E4E0D9;
  --beton:        #787B7C;
  --beton-clair:  #B9BAB9;
  --graphite:     #16181A;
  --graphite-2:   #23262A;

  /* variables de thème — pilotées par JS section par section */
  --bg:      var(--craie);
  --fg:      var(--graphite);
  --accent:  var(--orange);
  --muted:   #6E7175;
  --rule:    rgba(22,24,26,.14);
  --hl:      var(--orange);
  --hl-fg:   var(--craie);

  --wrap: 1440px;
  --pad: clamp(20px, 5vw, 92px);
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

html[data-active-theme="dark"]{
  --bg: var(--graphite); --fg: var(--craie); --accent: var(--orange-vif);
  --muted: #8E9296; --rule: rgba(242,239,234,.16);
  --hl: var(--orange-vif); --hl-fg: var(--craie);
}
html[data-active-theme="orange"]{
  --bg: var(--orange); --fg: var(--craie); --accent: var(--graphite);
  --muted: rgba(242,239,234,.72); --rule: rgba(242,239,234,.28);
  --hl: var(--graphite); --hl-fg: var(--craie);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--bg); color:var(--fg);
  font-size:clamp(15px,1.02vw,17px); line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color .7s var(--ease-io), color .7s var(--ease-io);
}
img,svg,canvas{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }
em{ font-style:normal }
::selection{ background:var(--orange); color:var(--craie) }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }

/* ---------- Typographie display ---------- */
.hero__title,.sect__title,.contact__title,.nav__name,.sect__num,
.hero__eyebrow,.sect__since,.marquee,.btn,.book__title,.manifeste__q{
  font-family:'Jost', 'Futura', 'Century Gothic', sans-serif;
}
.hero__title,.sect__title,.contact__title{
  font-weight:200; text-transform:uppercase; line-height:.9;
  letter-spacing:-.005em; font-stretch:100%;
}
.hero__title{ font-weight:180 }
.sect__title{ font-weight:250 }
.lead{ font-size:clamp(19px,2vw,28px); line-height:1.34; font-weight:400; letter-spacing:-.015em }

/* =========================================================
   LOADER
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:200; background:var(--graphite);
  display:grid; place-content:center; gap:26px; justify-items:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader.is-done{ opacity:0; visibility:hidden }
.loader__label{
  font-family:'Jost',sans-serif; font-weight:800; font-size:12px;
  letter-spacing:.42em; color:var(--craie); opacity:.55;
}
.loader__bar{ width:min(240px,52vw); height:2px; background:rgba(242,239,234,.18); overflow:hidden }
.loader__bar span{ display:block; height:100%; width:0; background:var(--orange-vif); transition:width .3s linear }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:clamp(16px,3vw,48px);
  padding:22px var(--pad); color:var(--fg);
  transition:color .7s var(--ease-io), transform .5s var(--ease), background-color .4s;
  mix-blend-mode:normal;
}
.nav.is-hidden{ transform:translateY(-104%) }
.nav__logo{ display:flex; align-items:center; gap:11px; margin-right:auto }
.nav__mark{ width:26px; color:var(--accent); flex:none }
.nav__mark svg{ width:100%; height:auto }
.nav__name{
  font-family:'Jost',sans-serif; font-weight:800; font-size:11px;
  line-height:1.02; letter-spacing:.1em; text-transform:uppercase;
}
.nav__links{ display:flex; gap:clamp(14px,2vw,34px) }
.nav__links a{
  font-size:12.5px; font-weight:500; letter-spacing:.02em;
  padding-block:4px;
}
.nav__cta{ flex:none }

/* bouton pilule */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  border:1px solid currentColor; transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s;
}
.btn--pill{ font-size:11px; padding:9px 18px; border-radius:100px; border-color:var(--rule) }
.btn--pill:hover{ background:var(--accent); border-color:var(--accent); color:var(--bg) }
.btn--big{ font-size:12.5px; padding:17px 34px; border-radius:100px; background:var(--accent); color:var(--bg); border-color:var(--accent) }
.btn--big:hover{ background:transparent; color:var(--accent) }
.btn--ghost{ background:transparent; color:var(--fg); border-color:var(--fg) }
.btn--ghost:hover{ background:var(--fg); color:var(--bg) }

/* hover à double texte (technique relevée sur landonorris.com) */
[data-swap]{ position:relative; overflow:hidden; display:inline-flex }
[data-swap] .sw{ display:block; transition:transform .48s var(--ease) }
[data-swap] .sw--b{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform:translateY(105%) }
[data-swap]:hover .sw--a{ transform:translateY(-105%) }
[data-swap]:hover .sw--b{ transform:translateY(0) }

/* burger mobile */
.nav__burger{ display:none; width:34px; height:34px; background:none; border:0; cursor:pointer; color:inherit; position:relative }
.nav__burger span{ position:absolute; left:6px; right:6px; height:1.5px; background:currentColor; transition:transform .4s var(--ease), opacity .3s }
.nav__burger span:nth-child(1){ top:14px } .nav__burger span:nth-child(2){ top:20px }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg) }
.nav__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg) }

.menu{
  position:fixed; inset:0; z-index:99; background:var(--graphite); color:var(--craie);
  display:grid; place-content:center;
  clip-path:inset(0 0 100% 0); transition:clip-path .7s var(--ease);
  pointer-events:none;
}
.menu.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto }
.menu__links{ display:grid; gap:6px; padding:var(--pad) }
.menu__links a{
  font-family:'Jost',sans-serif; font-weight:250; text-transform:uppercase;
  font-size:clamp(30px,9vw,58px); line-height:1.05; letter-spacing:-.03em;
  display:flex; align-items:baseline; gap:14px;
}
.menu__links a:hover{ color:var(--orange-vif) }
.menu__links i{ font-family:'Inter',sans-serif; font-style:normal; font-size:12px; font-weight:500; opacity:.45; letter-spacing:.1em }

/* =========================================================
   HERO
   ========================================================= */
.hero{ height:220vh; position:relative; background:var(--graphite) }
.hero__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; grid-template-rows:1fr auto; justify-items:center;
  color:var(--craie);
}
.hero__media{ position:absolute; inset:0; z-index:1 }
.hero__gl,.hero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
}
.hero__gl{ z-index:2; opacity:0; transition:opacity 1.1s var(--ease) }
.hero__gl.is-live{ opacity:1 }
/* le canvas recouvre exactement la photo : si WebGL ne rend rien
   (onglet masqué, contexte refusé, pilote capricieux), la photo reste visible */
.hero__img{ z-index:1 }
.hero__fade{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(22,24,26,.52) 0%, rgba(22,24,26,0) 15%, rgba(22,24,26,0) 40%, rgba(22,24,26,.5) 64%, rgba(22,24,26,.9) 88%, var(--graphite) 100%),
    radial-gradient(120% 88% at 50% 30%, rgba(22,24,26,0) 46%, rgba(22,24,26,.5) 100%);
}

/* le tracé technique — centré sur le visage */
.hero__trace{
  position:absolute; z-index:4; left:50%; top:23.5svh;
  transform:translate(-50%,-50%);
  /* le cercle doit rester plus grand que la tete : il est donc cale sur la
     hauteur d'ecran (la tete fait ~36 svh), le cadre le serre au plus pres */
  width:min(49svh, 98vw); aspect-ratio:1; height:auto;
  /* le viseur se deplace sur toute la page : sans cela le SVG
     rognerait son propre contenu des qu'il sort de sa boite */
  overflow:visible;
  color:rgba(242,239,234,.55); pointer-events:none;
}
.hero__trace .t-draw{ stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200) }
.hero__trace .t-draw,.hero__trace .t-label{ transition:stroke-dashoffset 1.6s var(--ease), opacity .8s var(--ease) }
.hero__trace .t-scan{ stroke:var(--orange-vif); opacity:.85 }
.t-label{
  font-family:'Jost',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.24em; opacity:0; fill:rgba(242,239,234,.62);
}
.t-label--c{ text-anchor:middle; fill:var(--orange-vif); opacity:0 }
.t-label--r{ text-anchor:end }

/* --- viseur autofocus : le seul element qui reagit a la souris.
       La photo, elle, n'est jamais modifiee. --- */
.t-ring{ transform-box:view-box; transform-origin:500px 500px; transition:transform .55s var(--ease) }
.t-corners{ transition:stroke .45s var(--ease) }
.t-lockmsg{
  font-family:'Jost',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.24em; text-anchor:middle; fill:var(--orange-vif);
  opacity:0; transition:opacity .4s var(--ease);
}
.hero__trace.is-locked .t-ring{ transform:scale(.968) }
.hero__trace.is-locked .t-corners{ stroke:var(--orange-vif) }
.hero__trace.is-locked .t-lockmsg{ opacity:1 }

/* fiche technique */
/* Le fond doit etre assez dense pour tenir sur le beton FLOU des cotes,
   qui est clair et sans texture : a 24% d'opacite la fiche disparaissait. */
.hero__card{
  position:absolute; z-index:6; left:var(--pad); top:50%; transform:translateY(-50%);
  width:242px; border:1px solid rgba(242,239,234,.34);
  backdrop-filter:blur(10px); background:rgba(22,24,26,.62);
}
.hero__card-h,.hero__card-f{
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  padding:12px 14px; color:rgba(242,239,234,.80); text-align:center;
}
.hero__card-h{ border-bottom:1px solid rgba(242,239,234,.26) }
.hero__card-f{ border-top:1px solid rgba(242,239,234,.26) }
.hero__card-b{ padding:20px 14px; display:grid; gap:9px; justify-items:center; text-align:center }
.hero__card-b strong{
  font-family:'Jost',sans-serif; font-size:22px; font-weight:700;
  letter-spacing:-.01em; text-transform:uppercase; line-height:1;
}
/* libelle en blanc sur pave orange : bien plus lisible que l'orange sur photo */
.hero__card-flag{
  display:inline-block; background:var(--orange);
  color:var(--craie); font-size:12.5px; font-weight:500; line-height:1.35;
  padding:4px 8px; letter-spacing:.002em; white-space:nowrap;
}
.hero__card-flag sup{ font-size:.68em; vertical-align:.42em; line-height:0 }
/* « ouvertes » clignote comme une enseigne — allumee bien plus longtemps
   qu'eteinte, sinon ca devient penible a lire */
.hero__card-open{
  font-family:'Jost',sans-serif; font-size:15px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange-vif);
  animation:blink 1.7s steps(1,end) infinite;
}
@keyframes blink{ 0%,72%{ opacity:1 } 74%,86%{ opacity:.15 } 88%,100%{ opacity:1 } }

/* titre */
.hero__type{
  position:relative; z-index:5; grid-row:2; text-align:center;
  padding-inline:var(--pad); padding-bottom:clamp(98px,13.5svh,152px); width:100%;
}
.hero__eyebrow{ font-size:11px; font-weight:700; letter-spacing:.42em; opacity:.62; margin-bottom:16px }
.hero__title{ font-size:clamp(42px,10.4vw,158px); letter-spacing:.005em }
.hero__title .line{ display:block }
.hero__roles{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center;
  margin-top:22px; font-size:clamp(11px,1.05vw,13.5px); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
}
.hero__roles i{ font-style:normal; color:var(--orange-vif) }

/* split lettres */
[data-split] .ch{ display:inline-block; will-change:transform }
.hero__title .line{ overflow:hidden; padding-bottom:.04em }

/* calque loupe : n'affiche que ce qui tombe dans le cercle du viseur */
.hero__zoom{
  position:absolute; inset:0; z-index:7; pointer-events:none;
  /* masque plutot que clip-path : une coupe franche briserait les lettres
     sur le bord du cercle, le fondu les raccorde */
  -webkit-mask-image:radial-gradient(circle 0px at 50% 50%, #000 0, transparent 0);
  mask-image:radial-gradient(circle 0px at 50% 50%, #000 0, transparent 0);
}
.hero__zoom-in{ position:absolute; inset:0 }

.hero__cue{
  position:absolute; z-index:6; bottom:26px; left:50%; transform:translateX(-50%);
  display:grid; gap:9px; justify-items:center; font-size:9px; font-weight:600;
  letter-spacing:.24em; opacity:.6;
}
.hero__cue svg{ width:11px; animation:cue 2.1s var(--ease) infinite }
@keyframes cue{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(6px); opacity:1 } }

/* =========================================================
   MANIFESTE
   ========================================================= */
.manifeste{ padding:clamp(90px,13vw,190px) 0 0 }
.manifeste__q{
  /* interligne desserre : avec un surlignage de fond, un interligne trop
     serre fait recouvrir le bas de la ligne precedente par le pave suivant */
  font-weight:280; text-transform:uppercase; line-height:1.24;
  font-size:clamp(28px,5.4vw,80px); letter-spacing:-.032em;
  max-width:19ch;
}
/* doit rester inline : un inline-block ne se fragmente pas par ligne,
   et le surlignage redeviendrait un pave rectangulaire */
.manifeste__q em{ display:inline }
/* surlignage animé — porté par le fond et non par un pseudo-element,
   pour qu'il epouse chaque ligne quand le texte passe a la ligne */
[data-hl]{
  color:inherit; padding:.01em .07em;
  background-image:linear-gradient(var(--hl), var(--hl));
  background-repeat:no-repeat; background-position:left center;
  background-size:0% 100%;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:background-size .8s var(--ease), color .45s var(--ease);
}
[data-hl="left"]{ background-position:right center }
[data-hl].is-hl{ background-size:100% 100%; color:var(--hl-fg) }

.manifeste__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,72px); margin-top:clamp(40px,6vw,84px);
  max-width:1080px; margin-left:auto;
}
.manifeste__grid p{ color:var(--muted) }
/* la chute est detachee du paragraphe : un <br> ne laissait pas
   assez d'air, il faut une vraie ligne de blanc */
.manifeste__sig{ display:block; margin-top:1.15em }
.manifeste__grid .lead{ color:var(--fg) }

.marquee{
  margin-top:clamp(70px,10vw,140px); overflow:hidden;
  border-block:1px solid var(--rule); padding-block:16px;
}
.marquee__track{ display:flex; width:max-content; animation:mq 42s linear infinite }
.marquee span{
  display:flex; align-items:center; white-space:nowrap;
  font-weight:300; text-transform:uppercase; font-size:clamp(15px,1.9vw,26px);
  letter-spacing:.06em; padding-right:0;
}
.marquee i{ font-style:normal; color:var(--accent); padding-inline:.7em; font-size:.62em; transform:translateY(-.12em) }
@keyframes mq{ to{ transform:translateX(-50%) } }

/* =========================================================
   SECTIONS
   ========================================================= */
.sect{ padding:clamp(88px,12vw,176px) 0 }
.sect__head{
  display:grid; grid-template-columns:auto 1fr auto; align-items:end;
  gap:clamp(14px,3vw,40px); padding-bottom:clamp(26px,3.4vw,46px);
  border-bottom:1px solid var(--rule); margin-bottom:clamp(38px,5vw,76px);
}
.sect__num{
  font-size:clamp(13px,1.2vw,15px); font-weight:800; letter-spacing:.14em;
  color:var(--accent); padding-bottom:.5em;
}
.sect__title{ font-size:clamp(38px,8.6vw,132px) }
.sect__title span{ display:block }
/* titres tenant sur une seule ligne : la taille est calee sur le nombre
   de signes pour qu'ils ne debordent jamais, meme sur petit ecran */
.sect__title--l1,.sect__title--l2{ white-space:nowrap }
.sect__title--l1{ font-size:clamp(34px,6.9vw,100px) }   /* PROMPTOGRAPHE */
.sect__title--l2{ font-size:clamp(26px,4.7vw,68px) }    /* DIRECTEUR COM. ANIA */
.sect__since{
  font-family:'Jost',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.22em; color:var(--muted); padding-bottom:.9em; white-space:nowrap;
}

.sect__intro{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(22px,4vw,68px);
  margin-bottom:clamp(48px,7vw,104px);
}
.sect__intro p:not(.lead){ color:var(--muted) }
/* colonne de droite : les blocs s'empilent dans UNE seule cellule de la
   grille, sinon le 3e paragraphe repart a gauche sur la ligne suivante. */
.sect__intro-side{ display:grid; gap:clamp(18px,2.2vw,30px); align-content:start }

.formations{ margin-top:clamp(56px,7vw,110px) }
.formations__list{ display:grid; gap:0 }
.formations__list li{
  display:grid; grid-template-columns:minmax(150px,.28fr) 1fr auto; gap:clamp(14px,3vw,44px);
  align-items:baseline; padding:20px 0; border-top:1px solid var(--rule);
}
/* la duree en colonne dediee plutot qu'entre parentheses dans le texte :
   c'est l'information qu'on cherche du regard quand on compare */
.formations__list i{
  font-style:normal; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; text-align:right;
}
.formations__list li:last-child{ border-bottom:1px solid var(--rule) }
.formations__list strong{
  font-family:'Jost',sans-serif; font-size:clamp(18px,1.8vw,25px); font-weight:400;
  text-transform:uppercase; letter-spacing:-.01em; line-height:1;
}
.formations__list span{ font-size:15px; color:var(--muted) }

.formations h4, .pubs-block h4, .tags h4{
  font-family:'Jost',sans-serif; font-size:11px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); margin-bottom:18px;
}
.list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:15px 0; border-top:1px solid var(--rule);
}
.list li:last-child{ border-bottom:1px solid var(--rule) }
.list span{ font-size:clamp(15px,1.35vw,19px); font-weight:500 }
.list i{ font-style:normal; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap }

/* publications */
.pubs-block{ margin-top:clamp(56px,7vw,104px) }

/* =========================================================
   BANDEAU DE REFERENCES
   Meme composant que le bandeau du manifeste (.marquee) : meme
   corps, meme graisse, meme filets. Trois differences seulement :
   pas de capitales, separateur tiret, et une duree bien plus
   longue — la piste fait environ cinq fois celle du manifeste,
   a 42s elle defilerait trop vite pour etre lue.
   ========================================================= */
.refs{ margin-top:clamp(46px,5.6vw,88px) }
.marquee--refs{ margin-top:clamp(10px,1.2vw,18px) }
.marquee--refs .marquee__track{ animation-duration:96s }  /* 6948px / 96s = 72 px/s */
.marquee--refs span{ text-transform:none; letter-spacing:.01em }
.marquee--refs i{ font-size:1em; transform:none; padding-inline:.62em }
.marquee--refs a{ color:inherit; text-decoration:none; transition:color .25s var(--ease) }
.marquee--refs a:hover, .marquee--refs a:focus-visible{ color:var(--accent) }
/* sans cette pause, viser un lien qui defile a 57 px/s est intenable */
.marquee--refs:hover .marquee__track,
.marquee--refs:focus-within .marquee__track{ animation-play-state:paused }
.pubs{
  margin-top:26px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,40px);
}
.pub{ display:grid; gap:18px; align-content:start }

/* Les trois couvertures ont des formats differents (1:1.33, 1:1.41, 1:1.50)
   mais doivent s'afficher a taille identique. On adopte donc un format
   commun de 1:1.42 — celui de la couverture du milieu — et on recadre :
   c'est le choix qui minimise la coupe (au pire 3,4 % par bord). */
.pub__frame{ display:block }
.pub__cover{
  width:100%; aspect-ratio:1/1.42; height:auto; object-fit:cover;
  object-position:center center; display:block;
  border:1px solid var(--rule);
  box-shadow:0 18px 44px rgba(22,24,26,.16);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
/* couverture plus haute que le format commun : on coupe dans le ciel du
   haut plutot que dans le titre et la signature du bas */
.pub__cover--keepbottom{ object-position:center bottom }
.pub:hover .pub__cover{ transform:translateY(-6px); box-shadow:0 26px 60px rgba(22,24,26,.24) }
.pub__txt{ display:grid; gap:8px }
.pub__tag{
  font-family:'Jost',sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--accent);
}
.pub__txt h3{
  font-family:'Jost',sans-serif; font-size:clamp(17px,1.55vw,21px);
  font-weight:400; line-height:1.18; letter-spacing:-.01em;
}
.pub__txt h3 i{ font-style:normal; color:var(--muted) }
.pub__txt p{ font-size:14px; color:var(--muted); line-height:1.5 }

/* bloc LinkedIn — sous les publications.
   Le nombre d'abonnes est l'argument : il porte la mise en page. */
.li{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(22px,3vw,52px); margin-top:clamp(24px,3vw,40px);
  padding:clamp(24px,2.8vw,36px) clamp(24px,3vw,40px);
  border:1px solid var(--rule);
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
.li:hover{ border-color:var(--accent) }
.li__count{ display:grid; justify-items:center; line-height:1 }
.li__count strong{
  font-family:'Jost',sans-serif; font-size:clamp(38px,4.4vw,60px);
  font-weight:250; letter-spacing:-.02em; color:var(--accent); white-space:nowrap;
}
.li__count span{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; line-height:1.5;
  text-transform:uppercase; color:var(--fg); margin-top:10px;
  max-width:13ch; text-align:center;
}
.li__txt h5{
  font-family:'Jost',sans-serif; font-size:clamp(17px,1.6vw,22px);
  font-weight:400; letter-spacing:-.01em; line-height:1.2; margin-bottom:8px;
}
.li__txt p{ font-size:14.5px; color:var(--muted); line-height:1.5; max-width:56ch }
.li__go{
  display:inline-flex; align-items:center; gap:12px; white-space:nowrap;
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.li__go svg{ width:26px; transition:transform .4s var(--ease) }
.li:hover .li__go svg{ transform:translateX(6px) }

/* bandeau CTA */
.cta-band{
  margin-top:clamp(56px,7vw,104px); padding-top:clamp(28px,3.4vw,44px);
  border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
}
.cta-band p{ font-size:clamp(17px,1.8vw,25px); font-weight:500; letter-spacing:-.015em; max-width:34ch }
.cta-band em{ color:var(--accent); font-weight:inherit }

/* =========================================================
   GALERIE PROMPTOGRAPHIE
   ========================================================= */
.gal{
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(210px, 23vw, 380px);
  gap:clamp(10px,1.4vw,22px);
  padding:0 var(--pad); margin-block:clamp(24px,4vw,56px);
  max-width:var(--wrap); margin-inline:auto;
}
.gal__i{ position:relative; overflow:hidden; grid-column:span 3 }
.gal__i:nth-child(1){ grid-column:span 5; grid-row:span 2 }
.gal__i:nth-child(2){ grid-column:span 4 }
.gal__i:nth-child(3){ grid-column:span 3 }
.gal__i:nth-child(4){ grid-column:span 3 }
.gal__i:nth-child(5){ grid-column:span 4 }
.gal__i:nth-child(6){ grid-column:span 4 }
.gal__i:nth-child(7){ grid-column:span 4 }
.gal__i:nth-child(8){ grid-column:span 4 }
.gal__i img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transform:scale(1.06); transition:transform 1.1s var(--ease), filter .6s;
}
.gal__i:hover img{ transform:scale(1) }
.gal__i figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:0;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--craie); overflow:hidden;
}
/* padding ET dégradé portés par le span : sinon le figcaption laisse une
   bande visible en bas de l'image au repos */
.gal__i figcaption span{
  display:block; padding:34px 16px 16px;
  background:linear-gradient(0deg, rgba(22,24,26,.9), transparent);
  transform:translateY(100%); transition:transform .55s var(--ease);
}
.gal__i:hover figcaption span{ transform:translateY(0) }

/* révélation clip-path */
[data-reveal]{ clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease) }
[data-reveal].is-in{ clip-path:inset(0 0 0% 0) }
[data-reveal-up]{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .9s var(--ease) }
[data-reveal-up].is-in{ opacity:1; transform:none }
[data-stagger] > *{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .8s var(--ease) }
[data-stagger].is-in > *{ opacity:1; transform:none }

/* =========================================================
   ANIA
   ========================================================= */
.ania__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,40px) }
.ania__c{ border-top:2px solid var(--fg); padding-top:20px; display:grid; gap:10px; align-content:start }
.ania__c h3{ font-family:'Jost',sans-serif; font-size:clamp(18px,1.7vw,24px); font-weight:400; text-transform:uppercase; letter-spacing:-.02em }
.ania__c p{ font-size:15px; color:var(--muted) }
.cta-band--ghost{ border-top-color:rgba(242,239,234,.34) }

/* Chiffres cles de l'association. Les nombres sont en Jost, comme les
   titres ; le qualificatif (« plus de », « pres de ») passe au-dessus en
   petit pour rester exact sans alourdir le chiffre. */
.ania__stats{ margin-top:clamp(44px,5vw,76px); padding-top:clamp(26px,3vw,38px); border-top:1px solid var(--rule) }
.ania__stats-lead{ font-size:clamp(15px,1.35vw,18px); color:var(--fg); margin-bottom:clamp(24px,2.6vw,36px) }
.ania__stats-grid{ list-style:none; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(18px,2vw,30px) }
.ania__stats-grid li{ display:grid; gap:6px; align-content:start }
.ania__stats-grid b{
  font-family:'Jost',sans-serif; font-weight:250; line-height:.92;
  font-size:clamp(34px,3.6vw,54px); letter-spacing:-.03em; color:var(--fg);
  display:block; position:relative;
}
/* la ligne du qualificatif est reservee sur TOUS les chiffres, meme ceux
   qui n'en ont pas : sans ca, « 400 » descendrait de 18px sous « 50 » et
   les six nombres ne partageraient plus la meme ligne de base. */
.ania__stats-grid b::before{ content:''; display:block; height:18px }
.ania__stats-grid b i{
  position:absolute; top:0; left:0;
  font-style:normal; font-family:'Inter',sans-serif;
  font-weight:500; font-size:11px; line-height:1; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
.ania__stats-grid span{ font-size:13.5px; line-height:1.35; color:var(--muted) }
@media (max-width:1080px){ .ania__stats-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:560px){ .ania__stats-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* =========================================================
   BIO
   ========================================================= */
.bio{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,5vw,88px) }
.bio__txt{ display:grid; gap:20px }
.bio__txt p:not(.lead){ color:var(--muted) }
.tl{ display:grid; gap:0 }
.tl__i{ display:grid; grid-template-columns:64px 1fr; gap:18px; padding:17px 0; border-top:1px solid var(--rule) }
.tl__i:last-child{ border-bottom:1px solid var(--rule) }
.tl__i i{ font-family:'Jost',sans-serif; font-style:normal; font-weight:800; font-size:14px; letter-spacing:.06em; color:var(--accent) }
.tl__i span{ font-size:14.5px; color:var(--muted) }
/* l'exposant de « 1re » ne doit pas ecarter l'interligne */
.tl__i sup{ font-size:.62em; line-height:0; vertical-align:.42em }

.tags{ margin-top:clamp(50px,6vw,88px); padding-top:clamp(26px,3vw,40px); border-top:1px solid var(--rule) }
.tags__line{ font-size:clamp(15px,1.35vw,18px); color:var(--fg); margin-bottom:6px }
/* le palmares passe en retrait : le fait se lit d'abord, la performance ensuite */
.tags__line i{ font-style:normal; color:var(--muted) }
.tags__h2{ margin-top:30px }
.tags__line + .tags__line{ margin-bottom:22px }
.tags ul{ display:flex; flex-wrap:wrap; gap:10px }
.tags li{
  border:1px solid var(--rule); border-radius:100px; padding:9px 18px;
  font-size:12.5px; font-weight:500; letter-spacing:.02em;
  transition:background-color .3s, color .3s, border-color .3s;
}
.tags li:hover{ background:var(--accent); border-color:var(--accent); color:var(--bg) }

/* =========================================================
   CONTACT + FOOTER
   ========================================================= */
.contact{ padding:clamp(96px,14vw,200px) 0; text-align:center }
.contact__eyebrow{ font-size:11px; font-weight:700; letter-spacing:.42em; color:var(--accent); margin-bottom:22px }
.contact__title{ font-size:clamp(46px,11vw,168px) }
.contact__title span{ display:block }
.contact__txt{ margin:clamp(24px,3vw,40px) auto 0; max-width:46ch; color:var(--muted); font-size:clamp(16px,1.4vw,19px) }
.contact__mail{
  display:inline-block; margin-top:clamp(30px,4vw,52px);
  font-family:'Jost',sans-serif; font-weight:300; text-transform:none;
  font-size:clamp(19px,3.2vw,44px); letter-spacing:-.03em;
  border-bottom:2px solid var(--accent); padding-bottom:4px;
  transition:color .35s;
}
.contact__mail:hover{ color:var(--accent) }
.contact__links{ display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,42px); justify-content:center; margin-top:clamp(34px,4vw,56px) }
.contact__links a{ font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted) }
.contact__links a:hover{ color:var(--accent) }

/* =========================================================
   ZONES TACTILES
   Apple recommande 44px, Google 48. Plusieurs liens etaient
   sous ce seuil. On agrandit la surface sensible avec un calque
   invisible, hors du flux : le texte ne bouge pas d'un pixel.
   ========================================================= */
.contact__links a, .nav__logo, .nav__burger, .marquee--refs a{ position:relative }
.contact__links a::after, .nav__logo::after{
  content:''; position:absolute; left:-6px; right:-6px;
  top:50%; transform:translateY(-50%); height:44px;
}
.nav__burger::after{
  content:''; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); width:48px; height:48px;
}
/* le bandeau defile : on elargit aussi ses liens en hauteur */
.marquee--refs a::after{
  content:''; position:absolute; left:0; right:0;
  top:50%; transform:translateY(-50%); height:44px;
}
/* seul cas ou le rembourrage passe dans le flux : le menu plein ecran,
   ou 8px de plus par lien ecartent la liste de 80px sur un ecran entier. */
.menu__links a{ padding-block:8px }

/* Le survol n'existe pas au doigt : sans ca, les references du bandeau
   restent des cibles mouvantes sur telephone. */
.marquee--refs.is-touched .marquee__track,
.marquee--refs:active .marquee__track{ animation-play-state:paused }

.foot{ background:var(--graphite); color:var(--craie); padding:26px 0 }
.foot__in{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.55 }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .ania__grid{ grid-template-columns:1fr 1fr }
  .pubs{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  /* la carte reste affichee, simplement resserree pour ne pas
     empieter sur les epaules quand la photo se recadre */
  .hero__card{ width:208px }
  .hero__card-b strong{ font-size:19px }
  .hero__card-flag{ font-size:11px; padding:4px 7px }
  .hero__card-open{ font-size:13px }
}
@media (max-width:719px){
  .hero__card{ display:none }
}
@media (max-width:900px){
  /* sur ecran etroit le viseur est cale sur la largeur : ses libelles
     viendraient percuter le logo. Ils sont decoratifs, on les retire. */
  .hero__trace .trace-type{ display:none }
}
@media (max-width:820px){
  .nav__links{ display:none }
  .nav__cta{ display:none }
  .nav__burger{ display:block }
  .hero{ height:180vh }
  .hero__type{ margin-top:20vh }
  .sect__head{ grid-template-columns:1fr auto; row-gap:8px }
  .sect__num{ grid-column:1; grid-row:1 }
  .sect__since{ grid-column:2; grid-row:1; padding-bottom:0 }
  .sect__title{ grid-column:1 / -1; grid-row:2 }
  .sect__intro,.manifeste__grid,.bio{ grid-template-columns:1fr }
  .pubs{ grid-template-columns:1fr }
  .li{ grid-template-columns:1fr; gap:18px; text-align:left }
  .li__count{ justify-items:start }
  .formations__list li{ grid-template-columns:1fr; gap:6px }
  .formations__list i{ text-align:left }
  .ania__grid{ grid-template-columns:1fr }
  .gal{ grid-template-columns:repeat(2,1fr) }
  .gal__i,.gal__i:nth-child(n){ grid-column:span 1; grid-row:auto }
  .cta-band{ flex-direction:column; align-items:flex-start }
}
@media (max-width:560px){
  .gal{ grid-template-columns:1fr }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .hero__card-open{ animation:none; opacity:1 }
  [data-reveal],[data-reveal-up],[data-stagger] > *{ opacity:1; transform:none; clip-path:none }
  /* le bandeau de references s'arrete et devient parcourable a la main,
     sinon la moitie des noms resterait hors champ */
  .marquee--refs .marquee__track{ animation:none !important; width:auto }
  .marquee--refs{ overflow-x:auto }
  .marquee--refs span[aria-hidden="true"]{ display:none }
  .hero{ height:100svh }
}