@import url("tokens.css");

/* ============================================================
   SOCLE — les rôles typographiques et le rythme.
   Aucune taille, aucune marge n'est écrite ailleurs qu'ici
   ou dans tokens.css. Toute valeur en dur est un bug.
   ============================================================ */

:root{--accent:var(--co-700);
  /* hauteur reelle de .hdr.solid, mesuree au navigateur.
     --tap (44px) ne l'a jamais decrite : l'en-tete vaut 68 px sous 900,
     75 px au-dela. Toute reserve sous l'en-tete part d'ici. */
  --hdr-h:68px;
  /* alias hérités */
  --bg:var(--ink-900); --bg-2:var(--ink-800);
  --paper:var(--pa-200); --paper-2:var(--pa-300); --ink:var(--ink-900);
  --on-dark:var(--on); --on-dark-2:var(--on-2); --on-dark-3:var(--on-3);
  --on-light-2:var(--on-2); --on-light-3:var(--on-3);
  --line-dark:var(--ln); --line-light:var(--ln);
  --coral:var(--co-500);
  --display:var(--ff-dsp); --text:var(--ff-txt); --mono:var(--ff-mon);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--ff-txt);font-size:var(--fs-body);line-height:var(--lh-body);
  letter-spacing:var(--ls-body);color:var(--on);background:var(--pa-200);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--co-500);color:#fff}
[id]{scroll-margin-top:calc(var(--hdr-h) + var(--s5))}

/* ── conteneurs ── */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);
  position:relative;z-index:2}
.wrap--narrow{max-width:var(--wrap-narrow)}
.sec{padding-block:var(--sy);position:relative}
.sec--sm{padding-block:var(--sy-sm)}
.sec--notop{padding-top:0}

/* ── les quatre surfaces, dans l'ordre de la charte ──────────── */
.s-paper{--surface:var(--pa-200);--on:var(--tx-l1);--on-2:var(--tx-l2);--on-3:var(--tx-l3);--accent:var(--co-700);
  --ln:var(--ln-l);background:var(--surface);color:var(--on)}
.s-paper2{--surface:var(--pa-300);--on:var(--tx-l1);--on-2:var(--tx-l2);--on-3:var(--tx-l3);--accent:var(--co-700);
  --ln:var(--ln-l);background:var(--surface);color:var(--on)}
.s-coral{--surface:var(--co-500);--on:#fff;--on-2:rgba(255,255,255,.86);--on-3:rgba(255,255,255,.62);--accent:#fff;
  --ln:rgba(255,255,255,.3);background:var(--surface);color:var(--on)}
.s-coral .eyebrow{color:#fff}
.s-coral .eyebrow::before{background:#fff}
.s-coral .hl{color:var(--ink-900)}
.s-ink{--surface:var(--ink-900);--on:var(--tx-d1);--on-2:var(--tx-d2);--on-3:var(--tx-d3);--accent:var(--co-500);
  --ln:var(--ln-d);background:var(--surface);color:var(--on)}
.s-ink2{--surface:var(--ink-800);--on:var(--tx-d1);--on-2:var(--tx-d2);--on-3:var(--tx-d3);--accent:var(--co-500);
  --ln:var(--ln-d);background:var(--surface);color:var(--on)}
/* alias hérités */
.sec--light{--surface:var(--pa-200);--on:var(--tx-l1);--on-2:var(--tx-l2);--on-3:var(--tx-l3);--accent:var(--co-700);
  --ln:var(--ln-l);background:var(--surface);color:var(--on)}
.sec--paper2{--surface:var(--pa-300);--on:var(--tx-l1);--on-2:var(--tx-l2);--on-3:var(--tx-l3);--accent:var(--co-700);
  --ln:var(--ln-l);background:var(--surface);color:var(--on)}
.sec--deep,.cs-sec--light{--surface:var(--pa-200);--on:var(--tx-l1);--on-2:var(--tx-l2);--accent:var(--co-700);
  --on-3:var(--tx-l3);--ln:var(--ln-l);background:var(--surface);color:var(--on)}
.cs-sec--paper2{--surface:var(--pa-300);--on:var(--tx-l1);--on-2:var(--tx-l2);--on-3:var(--tx-l3);--accent:var(--co-700);
  --ln:var(--ln-l);background:var(--surface);color:var(--on)}
.sec--glow::before,.cs-sec--glow::before{content:"";position:absolute;inset:0 0 auto;height:60%;
  z-index:0;pointer-events:none;
  background:radial-gradient(120% 100% at 12% 0%,rgba(241,84,88,.07) 0%,transparent 62%)}

/* ── rôles typographiques ── */
h1,.h1{font-family:var(--ff-dsp);font-weight:var(--fw-h1);font-size:var(--fs-h1);
  line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
h2,.h2{font-family:var(--ff-dsp);font-weight:var(--fw-h2);font-size:var(--fs-h2);
  line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3,.h3{font-family:var(--ff-dsp);font-weight:var(--fw-h3);font-size:var(--fs-h3);
  line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
h4,.h4{font-family:var(--ff-dsp);font-weight:var(--fw-h4);font-size:var(--fs-h4);
  line-height:var(--lh-h4);letter-spacing:var(--ls-h4)}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--on-2);
  max-width:var(--mw-lead)}
p{max-width:var(--mw-body)}
.sm{font-size:var(--fs-sm);color:var(--on-2)}
.mono{font-family:var(--ff-mon);font-size:var(--fs-mono);line-height:var(--lh-mono);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--on-3)}
.hl{color:var(--accent)}

/* ── étiquette de section ── */
.eyebrow{display:inline-flex;align-items:center;gap:var(--s3);
  font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--accent)}

/* ── bloc de titre : rythme constant sur tout le site ── */
.head{max-width:58ch}
.head > .eyebrow + *{margin-top:var(--rh-eyebrow)}
.head > h2 + .lead,.head > .h2 + .lead{margin-top:var(--rh-title)}
.head + *{margin-top:var(--rh-head)}

/* ── piles verticales ── */
.stack > * + *{margin-top:var(--s4)}
.stack-sm > * + *{margin-top:var(--s3)}
.stack-lg > * + *{margin-top:var(--s6)}

/* ── boutons — taille fixe, cible tactile garantie ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);font-family:var(--ff-dsp);font-weight:var(--fw-cta);
  font-size:var(--fs-cta);letter-spacing:var(--ls-cta);
  padding:var(--s4) var(--s6);background:var(--co-500);color:#fff;
  border:var(--bd-2) solid var(--co-500);border-radius:var(--radius);
  position:relative;overflow:hidden;
  transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.btn::after{content:"";position:absolute;inset:0;background:#fff;transform:translateY(101%);
  transition:transform var(--t-slow) var(--ease);z-index:0}
.btn:hover::after{transform:translateY(0)}
.btn:hover{color:var(--co-500)}
.btn span{position:relative;z-index:1}
.btn--ghost{background:transparent;border-color:var(--ln);color:var(--on)}
.btn--ghost::after{background:var(--on)}
.btn--ghost:hover{color:var(--surface);border-color:var(--on)}
.btn-row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s7)}

/* ── lien de continuité : mène à la section suivante ── */
.next{display:inline-flex;align-items:center;gap:var(--s3);min-height:var(--tap);
  margin-top:var(--s7);font-family:var(--ff-dsp);font-weight:var(--fw-cta);
  font-size:var(--fs-cta);letter-spacing:var(--ls-cta);color:var(--accent);
  border-bottom:var(--bd-2) solid transparent;
  transition:gap var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.next::after{content:"→";transition:transform var(--t-base) var(--ease)}
.next:hover{gap:var(--s4);border-bottom-color:var(--accent)}
.next:hover::after{transform:translateX(2px)}

/* ============================================================ EN-TÊTE */
.hdr{position:fixed;inset:0 0 auto;z-index:80;display:flex;align-items:center;
  justify-content:space-between;padding:var(--s4) var(--gutter);
  transition:background .45s var(--ease),padding .45s var(--ease),box-shadow .45s}
.hdr.solid{background:rgba(243,242,238,.9);backdrop-filter:blur(16px) saturate(1.4);
  padding-block:var(--s3);box-shadow:0 1px 0 var(--ln)}
.hdr{color:var(--tx-l1)}
.hdr .brand img{height:clamp(30px,3.2vw,42px);width:auto;transition:height var(--t-base) var(--ease)}
.hdr.solid .brand img{height:clamp(26px,2.6vw,34px)}
.nav{display:flex;align-items:center;gap:var(--s6)}
@media(min-width:1100px){ .nav{gap:var(--s6)} }
.nav a{font-family:var(--ff-dsp);font-weight:600;font-size:var(--fs-cta);letter-spacing:-.01em;
  position:relative;padding-block:.3rem;
  transition:color var(--t-base) var(--ease)}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:var(--bd-2);
  background:var(--accent);transition:width .35s var(--ease)}
.nav a:not(.btn):hover::after{width:100%}
.nav a:not(.btn)[aria-current]::after{width:100%}
.nav a:not(.btn)[aria-current]{color:var(--accent)}
.nav a:not(.btn):focus-visible{outline:var(--bd-2) solid var(--accent);outline-offset:var(--s2)}

.nav .btn{padding:var(--s3) 1.25rem;font-size:var(--fs-cta)}
.burger{display:none;width:44px;height:44px;position:relative;z-index:90}
.burger span{display:block;width:22px;height:2px;background:var(--tx-l1);margin:5px auto;
  transition:.35s var(--ease)}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:85;background:var(--co-500);color:#fff;display:flex;flex-direction:column;
  justify-content:center;padding:5rem var(--gutter) 2rem;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.drawer.on{opacity:1;visibility:visible;transition:opacity .4s,visibility 0s 0s}
.drawer a{font-family:var(--ff-dsp);font-weight:800;font-size:clamp(1.8rem,8vw,3rem);
  letter-spacing:-.035em;padding:var(--s3) 0;border-bottom:1px solid var(--ln);
  display:flex;align-items:baseline;gap:var(--s4);transform:translateY(18px);opacity:0;
  transition:transform .5s var(--ease),opacity .5s var(--ease),color .3s}
.drawer.on a{transform:none;opacity:1}
.drawer.on a:nth-child(2){transition-delay:.06s}.drawer.on a:nth-child(3){transition-delay:.12s}
.drawer.on a:nth-child(4){transition-delay:.18s}.drawer.on a:nth-child(5){transition-delay:.24s}
.drawer a:hover{color:var(--co-500)}
.drawer a i{font-family:var(--ff-mon);font-size:var(--fs-mono);font-style:normal;color:var(--ink-900)}

/* ============================================================ HERO */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;
  padding-block:7rem 3rem}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.16;
  transform:scale(1.1);animation:slowZoom 22s var(--ease-out) forwards}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--pa-200) 0%,rgba(243,242,238,.72) 55%,rgba(243,242,238,.35) 100%)}
@media(min-width:900px){
  .hero-bg img{opacity:.24}
  .hero-bg::after{background:linear-gradient(104deg,var(--pa-200) 6%,rgba(243,242,238,.86) 46%,rgba(243,242,238,.3) 100%)}
}

@keyframes slowZoom{to{transform:scale(1)}}
.hero h1{max-width:18ch}
.hero h1 span{display:block;overflow:hidden}
.hero h1 span i{display:block;font-style:normal;transform:translateY(105%);
  animation:riseIn .95s var(--ease) forwards}
.hero h1 span:nth-child(2) i{animation-delay:.09s}
.hero h1 span:nth-child(3) i{animation-delay:.18s}
@keyframes riseIn{to{transform:none}}
.hero-sub{margin-top:var(--s6);max-width:58ch;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--on-2)}
.hero-cta{margin-top:var(--s7);display:flex;gap:var(--s3);flex-wrap:wrap}
.hero-spec{margin-top:var(--s9);padding-top:var(--s4);border-top:var(--bd-1) solid var(--ln);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.hero-spec b{font-family:var(--ff-mon);font-weight:400;font-size:var(--fs-mono);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--on-2)}

/* ============================================================ BANDEAU DÉFILANT */
.mq{border-block:var(--bd-1) solid var(--ln-d);padding-block:var(--s5);overflow:hidden;
  background:var(--ink-900);display:flex;position:relative}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:3;
  pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--ink-900),transparent)}
.mq::after{right:0;background:linear-gradient(270deg,var(--ink-900),transparent)}
.mq-in{display:flex;align-items:center;gap:var(--s7);flex:none;padding-right:2.4rem;
  animation:slide 34s linear infinite;will-change:transform}
.mq:hover .mq-in{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-100%)}}
.mq-in b{font-family:var(--ff-dsp);font-weight:800;font-size:clamp(.95rem,1.5vw,1.25rem);
  letter-spacing:-.02em;color:var(--on-2);white-space:nowrap}
.mq-in i{width:6px;height:6px;border-radius:50%;background:var(--co-500);flex:none}

/* ============================================================ MANIFESTE */
.mf{display:grid;grid-template-columns:1fr;gap:var(--s6)}
.mf-big{font-family:var(--ff-dsp);font-weight:900;letter-spacing:-.04em;line-height:1.06;
  font-size:clamp(1.9rem,5vw,4.2rem);max-width:15ch}

/* ============================================================ LIVRABLES */
.dl{margin-top:var(--gap);border-top:1px solid var(--ln)}
.dv{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) 1.4rem;align-items:center;
  padding:clamp(1.4rem,2.6vw,2rem) 0;border-bottom:1px solid var(--ln);
  position:relative;overflow:hidden;transition:padding-left .5s var(--ease)}
.dv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--co-500);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.dv:hover::before{transform:scaleY(1);transform-origin:top}
.dv:hover{padding-left:var(--s5)}
.dv-n{font-family:var(--ff-dsp);font-weight:900;font-size:clamp(1.6rem,3.4vw,2.8rem);
  letter-spacing:-.05em;color:var(--on-3);transition:color .4s}
.dv:hover .dv-n{color:var(--accent)}
.dv h3{margin-bottom:var(--s2)}
.dv p{font-size:var(--fs-sm);color:var(--on-2);max-width:58ch}

/* ============================================================
   PROJETS — la mosaïque. Tout est visible, rien ne se cache.
   ============================================================ */
.pj{position:relative;background:var(--ink-900);color:var(--tx-d1);padding-block:var(--sy);overflow:hidden;
  --on:var(--tx-d1);--on-2:var(--tx-d2);--on-3:var(--tx-d3);--ln:var(--ln-d)}
.pj::before{content:"";position:absolute;inset:0;z-index:0;background:var(--live);opacity:.13;
  transition:background var(--t-xslow) var(--ease)}
.pj-head{display:grid;gap:var(--s5);align-items:end}
/* Repli mobile : 4 projets visibles, les 4 autres au clic.
   Sans JS le bouton reste [hidden] et les neuf cases s'affichent. */
.pj-more{display:none;width:100%;margin-top:var(--gap);min-height:var(--tap);
  align-items:center;justify-content:center;gap:var(--s3);
  border:var(--bd-1) solid var(--ln);background:transparent;
  font-family:var(--ff-dsp);font-weight:var(--fw-cta);font-size:var(--fs-cta);
  letter-spacing:var(--ls-cta);color:var(--on);
  transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
             color var(--t-base) var(--ease)}
.pj-more::after{content:"↓";transition:transform var(--t-base) var(--ease)}
.pj-more:hover{background:var(--co-500);border-color:var(--co-500);color:#fff}
.pj-more:hover::after{transform:translateY(2px)}
@media(max-width:599.98px){
  .pj-more:not([hidden]){display:flex}
  .pj-grid.is-clipped .pj-card:nth-of-type(n+5){display:none}
}

.pj-grid{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--rh-head);
  position:relative;z-index:2}
.pj-card{position:relative;display:block;overflow:hidden;background:var(--ink-800);
  border:var(--bd-1) solid var(--ln-d);
  transition:border-color var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.pj-card:hover{border-color:var(--c);transform:translateY(-4px)}
.pj-media{position:relative;aspect-ratio:16/9;overflow:hidden}
.pj-media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-xslow) var(--ease),filter var(--t-slow) var(--ease);
  filter:saturate(.9)}
.pj-card:hover .pj-media img{transform:scale(1.05);filter:saturate(1.05)}
.pj-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,10,.55) 0%,transparent 55%);
  opacity:0;transition:opacity var(--t-slow) var(--ease)}
.pj-card:hover .pj-media::after{opacity:1}
.pj-bar{height:var(--bd-3);background:var(--c);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--ease)}
.pj-card:hover .pj-bar{transform:scaleX(1)}
.pj-body{padding:var(--s5)}
.pj-tag{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--ff-mon);
  font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;
  color:var(--on-2);margin-bottom:var(--s3)}
.pj-card h3{color:var(--on);text-transform:uppercase;margin-bottom:var(--s3)}
.pj-card p{font-size:var(--fs-sm);color:var(--on-2);max-width:44ch}
.pj-foot{margin-top:var(--s4);padding-top:var(--s3);border-top:var(--bd-1) solid var(--ln);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:var(--tap)}
.pj-go{font-family:var(--ff-dsp);font-weight:var(--fw-cta);font-size:var(--fs-cta);
  letter-spacing:var(--ls-cta);color:var(--co-500);display:inline-flex;align-items:center;gap:var(--s2);
  transition:gap var(--t-base) var(--ease)}
.pj-card:hover .pj-go{gap:var(--s4)}
.pj-scope{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--on-3)}

/* ============================================================ MÉTHODE
   Quatre phases toujours lisibles : numéro, titre, objectif et résultat
   restent à l'écran en permanence. Seul l'inventaire des livrables se
   déplie — une ligne à la fois. Sans JS, les quatre lignes sont ouvertes.
   Le corail ne sert qu'à signaler la ligne ouverte. */
.mth{margin-top:var(--rh-head);border-top:var(--bd-2) solid var(--on)}
.mth-row{border-bottom:var(--bd-1) solid var(--ln);padding-block:var(--s5)}

.mth-hd{position:relative;display:grid;align-items:baseline;
  grid-template-columns:3rem minmax(0,1fr) 1.5rem;
  column-gap:var(--s4);row-gap:var(--s3)}
.mth-h{grid-column:1 / 3;margin:0}
.mth-btn{display:grid;grid-template-columns:3rem minmax(0,1fr);
  column-gap:var(--s4);align-items:baseline;width:100%;text-align:left}
.mth-btn::after{content:"";position:absolute;inset:0;z-index:1}
.mth-no{font-family:var(--ff-dsp);font-weight:var(--fw-h1);font-size:var(--fs-h3);
  line-height:1;letter-spacing:-.04em;color:var(--on-2);
  transition:color var(--t-base) var(--ease)}
.mth-t{font-family:var(--ff-dsp);font-weight:var(--fw-h3);font-size:var(--fs-h3);
  line-height:var(--lh-h3);letter-spacing:var(--ls-h3);color:var(--on)}
.mth-g{grid-column:2;font-size:var(--fs-sm);line-height:var(--lh-body);
  color:var(--on-2);max-width:var(--mw-sm)}

.mth-sg{grid-column:3;grid-row:1;justify-self:end;align-self:center;
  position:relative;width:1.5rem;height:1.5rem;color:var(--on-2);
  transition:color var(--t-base) var(--ease)}
.mth-sg::before,.mth-sg::after{content:"";position:absolute;top:50%;left:50%;
  width:.875rem;height:var(--bd-2);background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform var(--t-base) var(--ease)}
.mth-sg::after{transform:translate(-50%,-50%) rotate(90deg)}
.mth-btn:hover .mth-no,.mth-btn:hover .mth-sg{color:var(--on)}
.mth-btn:focus-visible{outline:var(--bd-2) solid var(--accent);outline-offset:var(--s2)}

.mth-row.on .mth-no,.mth-row.on .mth-sg{color:var(--accent)}
.mth-row.on .mth-sg::after{transform:translate(-50%,-50%) rotate(0)}

.mth-res{grid-column:2;margin-top:var(--s2);margin-left:calc((var(--s4) + var(--bd-2)) * -1);padding-left:var(--s4);
  border-left:var(--bd-2) solid var(--ln);
  transition:border-color var(--t-base) var(--ease)}
.mth-row.on .mth-res{border-left-color:var(--accent)}
.mth-res b{display:block;margin-top:var(--s1);font-family:var(--ff-txt);
  font-weight:var(--fw-strong);font-size:var(--fs-body);line-height:var(--lh-body);
  letter-spacing:var(--ls-body);color:var(--on);max-width:var(--mw-sm)}

.mth-lbl{display:block;font-family:var(--ff-mon);font-size:var(--fs-mono);
  line-height:var(--lh-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--on-2)}

.mth-c{margin-top:var(--s5);margin-left:3rem;padding-left:var(--s4)}
.mth-c[hidden]{display:none}
.mth-c ul{list-style:none;display:grid;gap:var(--s2);margin-top:var(--s3)}
.mth-c li{position:relative;padding-left:var(--s4);font-size:var(--fs-sm);
  line-height:var(--lh-body);color:var(--on-2);max-width:var(--mw-sm)}
.mth-c li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;background:var(--co-500)}

.mth-note{margin-top:var(--s6);padding-top:var(--s4);border-top:var(--bd-1) solid var(--ln)}

/* révélation d'adresse dans un texte courant */
.rv--txt{display:inline;padding:0;border:0;background:none;font:inherit;color:var(--accent);
  text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.rv--txt:hover{text-decoration-thickness:2px}

/* ── formulaire : deux canaux, un seul visible à la fois ──
   Sans JS, les deux volets restent ouverts et tous les champs
   partent : le formulaire reste utilisable, simplement plus long. */
.cf-canal{margin-bottom:var(--s5)}
.cf-volet + .cf-volet{margin-top:var(--s5)}
.cf-volet[hidden]{display:none}
/* consentement : case jamais pré-cochée, sinon elle ne vaut rien */
.cf-accord{display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s5);
  max-width:62ch;cursor:pointer}
.cf-accord input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--co-500);cursor:pointer}
.cf-accord span{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--on-2)}
.cf-accord a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
.cf-accord input:focus-visible{outline:var(--bd-2) solid var(--accent);outline-offset:var(--s2)}
/* le bouton respire après la case : il collait au texte sur deux lignes */
.cf-accord + .btn{margin-top:var(--s6)}
.fd textarea{width:100%;min-height:7rem;padding:var(--s3) var(--s4);
  border:var(--bd-1) solid var(--ln);background:var(--pa-100);color:var(--on);
  font-family:var(--ff-txt);font-size:var(--fs-body);line-height:var(--lh-body);resize:vertical;
  transition:border-color var(--t-base) var(--ease)}
.fd textarea:focus{outline:none;border-color:var(--accent)}

/* ============================================================ AIDES À LA LECTURE
   Trois éléments, jamais plus de deux visibles en même temps. */

/* ── lien d'évitement : invisible tant qu'on ne tabule pas ── */
.skip{position:absolute;left:var(--s4);top:calc(var(--s4) * -4);z-index:var(--z-modal);
  padding:var(--s3) var(--s5);background:var(--ink-900);color:var(--tx-d1);
  font-family:var(--ff-dsp);font-weight:var(--fw-cta);font-size:var(--fs-cta);
  letter-spacing:var(--ls-cta);
  transition:top var(--t-fast) var(--ease)}
.skip:focus{top:var(--s4)}

/* ── retour en haut ── */
.haut{position:fixed;right:var(--gutter);bottom:var(--s5);z-index:var(--z-sticky);
  width:var(--tap);height:var(--tap);display:grid;place-items:center;
  border:var(--bd-1) solid var(--ln-l);background:var(--pa-200);color:var(--tx-l1);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease),
             visibility var(--t-base),background var(--t-base),border-color var(--t-base)}
.haut.on{opacity:1;visibility:visible;transform:none}
.haut:hover{background:var(--co-500);border-color:var(--co-500);color:#fff}
.haut svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}

/* ── bandeau de rappel, en bas d'écran ── */
.rappel{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-drawer);
  background:var(--ink-900);color:var(--tx-d1);
  border-top:var(--bd-2) solid var(--co-500);
  transform:translateY(100%);transition:transform var(--t-slow) var(--ease)}
.rappel.on{transform:none}
.rappel-in{max-width:var(--wrap);margin-inline:auto;padding:var(--s4) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.rappel p{font-family:var(--ff-dsp);font-weight:var(--fw-h4);font-size:var(--fs-sm);
  line-height:var(--lh-h4);color:var(--tx-d1);margin:0}
.rappel-act{display:flex;align-items:center;gap:var(--s4);flex:none}
.rappel .btn{white-space:nowrap}
.rappel-x{width:var(--tap);height:var(--tap);display:grid;place-items:center;flex:none;
  color:var(--tx-d2);font-size:1.1rem;line-height:1;
  transition:color var(--t-base) var(--ease)}
.rappel-x:hover{color:var(--tx-d1)}
/* Sur grand écran les deux cohabitent, le bouton se décale.
   Sous 900 px le bandeau occupe déjà 17 % de la hauteur : un seul
   élément flottant à la fois, et c'est celui qui porte l'action. */
.haut.decale{bottom:calc(var(--s5) + 7rem)}
@media(max-width:899.98px){
  .haut.decale{opacity:0;visibility:hidden;pointer-events:none}
}

@media(max-width:599.98px){
  .rappel-in{padding-block:var(--s3)}
  .rappel p{font-size:var(--fs-sm);max-width:none;flex:1 1 100%}
  .rappel-act{width:100%;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){
  .haut,.rappel{transition:none}
}

/* ============================================================ CARNET
   Le carnet photographique. Réutilise au maximum les composants
   d'étude de cas (.cs-*) ; ci-dessous seulement ce qui manque. */

/* ── index : la liste des carnets ── */
.cn-grid{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--rh-head)}
.cn-card{position:relative;display:flex;flex-direction:column;
  border:var(--bd-1) solid var(--ln);background:var(--pa-100);
  transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.cn-card:hover{border-color:var(--c,var(--accent));transform:translateY(-3px)}
.cn-media{aspect-ratio:16/10;overflow:hidden;background:var(--ink-900)}
.cn-media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-xslow) var(--ease)}
.cn-card:hover .cn-media img{transform:scale(1.04)}
.cn-body{padding:var(--s5) var(--s5) var(--s6);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.cn-cat{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--c,var(--accent))}
.cn-card h3{font-family:var(--ff-dsp);font-weight:var(--fw-h3);font-size:var(--fs-h3);
  line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.cn-card p{font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--on-2);max-width:52ch}
.cn-card a::after{content:"";position:absolute;inset:0}
.cn-when{margin-top:auto;padding-top:var(--s4);border-top:var(--bd-1) solid var(--ln);
  font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--on-2);display:flex;justify-content:space-between;gap:var(--s3)}

/* ── article : le bloc de faits, en tête de carnet ── */
.cn-facts{display:grid;grid-template-columns:1fr;gap:var(--bd-1);
  background:var(--ln);border:var(--bd-1) solid var(--ln);margin-top:var(--rh-head)}
.cn-fact{background:var(--surface);padding:var(--s5)}
.cn-fact b{display:block;font-family:var(--ff-mon);font-size:var(--fs-mono);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--on-2);margin-bottom:var(--s2)}
.cn-fact span{display:block;font-family:var(--ff-dsp);font-weight:var(--fw-h4);
  font-size:var(--fs-h4);line-height:var(--lh-h4);color:var(--on)}
.cn-fact em{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--on-2);margin-top:var(--s1)}

/* ── article : les étapes ── */
.cn-step{margin-top:var(--s10)}
.cn-step:first-of-type{margin-top:var(--rh-head)}
.cn-step > h2{font-family:var(--ff-dsp);font-weight:var(--fw-h3);font-size:var(--fs-h3);
  line-height:var(--lh-h3);letter-spacing:var(--ls-h3);color:var(--on);
  padding-bottom:var(--s3);border-bottom:var(--bd-2) solid var(--on);
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4)}
.cn-step > h2 i{font-family:var(--ff-mon);font-style:normal;font-size:var(--fs-mono);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--on-2);flex:none}
.cn-step > p{margin-top:var(--s5);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--on-2);max-width:var(--mw-body)}

/* ── article : les images ── */
.cn-shots{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--s6)}
.cn-shots--2{grid-template-columns:1fr}
.cn-shot{margin:0;overflow:hidden}
.cn-shot img{width:100%;height:auto;display:block}
.cn-shot figcaption{margin-top:var(--s3);font-family:var(--ff-mon);font-size:var(--fs-mono);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--on-3)}

/* emplacement en attente d'image — visible en édition, jamais en ligne */
.cn-ph{aspect-ratio:3/2;border:var(--bd-2) dashed var(--ln);display:grid;place-items:center;
  padding:var(--s5);text-align:center}
.cn-ph span{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--on-3);max-width:40ch;line-height:1.7}

/* ── article : pied de carnet ── */
.cn-nav{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--rh-head);
  padding-top:var(--s6);border-top:var(--bd-1) solid var(--ln)}
.cn-nav a{display:block;padding:var(--s5);border:var(--bd-1) solid var(--ln);
  transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease)}
.cn-nav a:hover{border-color:var(--accent)}
.cn-nav b{display:block;font-family:var(--ff-mon);font-size:var(--fs-mono);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--on-2);margin-bottom:var(--s2)}
.cn-nav span{font-family:var(--ff-dsp);font-weight:var(--fw-h4);font-size:var(--fs-h4);color:var(--on)}

/* ── carnet : sommaire numéroté (direction 2a) ── */
.cn-som{margin-top:var(--rh-head);border-top:var(--bd-2) solid var(--on)}
/* La bande d'année reste dans l'emprise du sommaire : débordée, elle
   dépassait les filets de 72 px de chaque côté et donnait un décalage
   qui se lisait comme un bug. */
.cn-annee{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);border-bottom:var(--bd-1) solid var(--ln);
  background:var(--pa-300)}
.cn-annee b{font-family:var(--ff-dsp);font-weight:var(--fw-h2);font-size:var(--fs-h3);
  line-height:1;letter-spacing:var(--ls-h3);color:var(--on)}
.cn-annee span{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--on-2)}
.cn-entree{position:relative;display:grid;grid-template-columns:3rem 1fr auto;
  align-items:baseline;gap:var(--s4);padding:var(--s5);
  border-bottom:var(--bd-1) solid var(--ln);
  transition:background var(--t-base) var(--ease)}
.cn-entree:hover{background:var(--pa-100)}
.cn-entree i{font-family:var(--ff-dsp);font-style:normal;font-weight:var(--fw-h1);
  font-size:var(--fs-h4);line-height:1;color:var(--on-2)}
.cn-entree h3{font-family:var(--ff-dsp);font-weight:var(--fw-h3);font-size:var(--fs-h3);
  line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.cn-entree em{display:block;font-style:normal;font-family:var(--ff-mon);font-size:var(--fs-mono);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--on-2);margin-top:var(--s2)}
.cn-entree time{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  color:var(--on-2);white-space:nowrap}
.cn-entree a::after{content:"";position:absolute;inset:0}
.cn-entree--vide{opacity:.55}
.cn-entree--vide h3{color:var(--on-2);font-weight:var(--fw-h4)}

/* ── carnet : le défilé, sur encre ── */
.cn-defile{margin-top:0}
.cn-serie{margin-top:var(--sy-sm)}
.cn-serie:first-child{margin-top:var(--rh-head)}
.cn-serie figure{margin:0;overflow:hidden;position:relative}
.cn-serie img{width:100%;height:auto;display:block;
  transition:transform var(--t-xslow) var(--ease)}
.cn-serie a:hover img{transform:scale(1.02)}
.cn-serie-bas{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4)}
.cn-serie h3{font-family:var(--ff-dsp);font-weight:var(--fw-h2);font-size:var(--fs-h2);
  line-height:var(--lh-h2);letter-spacing:var(--ls-h2);color:var(--on)}
.cn-serie p{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--on-2)}

/* ── article : texte d'un côté, document de l'autre ──
   Colonnes volontairement inégales : un texte de trois paragraphes et
   une carte en portrait n'ont pas la même hauteur naturelle. On aligne
   en haut et on assume l'écart plutôt que d'étirer l'un des deux. */
.cn-duo{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--rh-head);
  align-items:start}
.cn-duo-txt > * + *{margin-top:var(--s5)}
.cn-duo-doc{margin:0;max-width:420px}   /* empilée, une carte en portrait n'a
                                            pas besoin de toute la largeur :
                                            elle deviendrait interminable */
.cn-duo-doc img{width:100%;height:auto;display:block}
.cn-duo-doc figcaption{margin-top:var(--s3);font-family:var(--ff-mon);font-size:var(--fs-mono);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--on-2)}
.cn-duo-doc a{display:block;position:relative}
.cn-duo-doc a::after{content:"";position:absolute;inset:0;
  border:var(--bd-2) solid transparent;transition:border-color var(--t-base) var(--ease)}
.cn-duo-doc a:hover::after{border-color:var(--accent)}
.cn-duo-doc a:focus-visible{outline:var(--bd-2) solid var(--accent);outline-offset:var(--s2)}
.cn-zoom{color:var(--accent)}
.cn-duo-doc a:hover ~ figcaption .cn-zoom{text-decoration:underline}

/* ── visionneuse de document ──
   Un <dialog> natif : on hérite gratuitement du fond, de la touche Échap
   et du piège à focus. Zoom à la molette et au clic, déplacement au
   glisser. Sans JS, le lien reste un lien vers l'image. */
.lb{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
  padding:0;border:0;background:transparent;overflow:hidden}
.lb::backdrop{background:rgba(12,12,15,.94)}
.lb-scene{width:100%;height:100%;display:grid;place-items:center;overflow:hidden;
  cursor:zoom-in;touch-action:none}
.lb-scene.zoome{cursor:grab}
.lb-scene.tire{cursor:grabbing}
.lb img{max-width:92vw;max-height:88dvh;width:auto;height:auto;display:block;
  transform-origin:center center;will-change:transform;
  transition:transform var(--t-base) var(--ease)}
.lb-scene.tire img{transition:none}
.lb-fermer{position:absolute;top:var(--s5);right:var(--s5);z-index:2;
  width:var(--tap);height:var(--tap);display:grid;place-items:center;
  border:var(--bd-1) solid rgba(243,242,238,.28);color:var(--tx-d1);
  background:rgba(12,12,15,.5);font-size:1.2rem;line-height:1;
  transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease)}
.lb-fermer:hover{border-color:var(--co-500);background:var(--co-500);color:#fff}
.lb-aide{position:absolute;bottom:var(--s5);left:50%;transform:translateX(-50%);
  font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--tx-d3);pointer-events:none;
  transition:opacity var(--t-base) var(--ease)}
.lb-scene.zoome ~ .lb-aide{opacity:0}
@media(prefers-reduced-motion:reduce){ .lb img{transition:none} }

/* ── article : la jauge d'étapes, seul élément épinglé ── */
.cn-jauge{position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--surface);border-bottom:var(--bd-1) solid var(--ln);
  display:flex;gap:var(--s4);overflow-x:auto;scrollbar-width:none;
  padding-block:var(--s3);margin-bottom:var(--s6)}
.cn-jauge::-webkit-scrollbar{display:none}
.cn-jauge a{flex:none;font-family:var(--ff-mon);font-size:var(--fs-mono);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--on-3);
  white-space:nowrap;transition:color var(--t-base) var(--ease)}
.cn-jauge a:hover,.cn-jauge a[aria-current]{color:var(--accent)}

/* ── article : le troisième traitement, image seule resserrée ── */
.cn-shots--solo{max-width:760px}
.cn-shots--solo.cn-shots--droite{margin-left:auto}

/* ============================================================ CATALOGUE */
.ct{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--s7)}
.ct-row{display:grid;grid-template-columns:2.4rem 1fr;gap:var(--s4);padding:var(--s4) 0;
  border-bottom:1px solid var(--ln);align-items:baseline}
.ct-row b{font-family:var(--ff-mon);font-size:var(--fs-mono);color:var(--co-500);letter-spacing:.14em}
.ct-row strong{font-family:var(--ff-dsp);font-weight:700;font-size:var(--fs-body);display:block;margin-bottom:var(--s1)}
.ct-row p{font-size:var(--fs-sm);color:var(--on-2);max-width:50ch}
.ct-note{border-left:2px solid var(--co-500);padding-left:var(--s5)}
.ct-note p{color:var(--on-2);max-width:42ch}

/* ============================================================ CONTACT */
.cf{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);margin-top:var(--s7)}
.fd{display:grid;gap:var(--s2);margin-bottom:var(--s4)}
.fd label,.chips legend{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-3)}
.fd input{font-family:var(--ff-txt);font-size:16px;padding:var(--s3) var(--s4);border:1px solid var(--ln);
  background:var(--pa-100);color:var(--tx-l1);transition:border-color .3s}
.fd input:hover,.fd input:focus{border-color:var(--tx-l1)}
.chips{border:0;margin-bottom:var(--s5)}
.chips legend{margin-bottom:var(--s2)}
.chips-row{display:flex;gap:var(--s2);flex-wrap:wrap}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;width:0;height:0}
.chips span{display:inline-block;padding:var(--s3) var(--s4);border:1px solid var(--ln);
  font-family:var(--ff-dsp);font-weight:600;font-size:var(--fs-cta);cursor:pointer;transition:.3s var(--ease)}
.chips input:checked + span{background:var(--co-500);color:#fff;border-color:var(--co-500)}
.chips input:focus-visible + span{outline:2px solid var(--co-500);outline-offset:2px}
.note{font-size:var(--fs-sm);color:var(--on-3);margin-top:var(--s4);max-width:44ch}
.rv-box{border-top:1px solid var(--ln);margin-top:var(--s5);padding-top:var(--s4);display:grid;gap:var(--s3)}
.rv{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--ff-dsp);font-weight:600;
  font-size:var(--fs-cta);border:1px solid var(--ln);padding:var(--s3) var(--s4);justify-self:start;
  transition:.3s var(--ease)}
.rv:hover{border-color:var(--accent);color:var(--accent)}

/* ============================================================ PIED */
.ft{background:var(--ink-900);--on:var(--tx-d1);--on-2:var(--tx-d2);--on-3:var(--tx-d3);--ln:var(--ln-d);color:var(--on-2);padding-block:clamp(2.6rem,5vw,4rem);font-size:var(--fs-sm);color:var(--on-2)}
.ft-top{display:flex;flex-wrap:wrap;gap:var(--s6);justify-content:space-between;align-items:flex-start}
.ft-links{display:flex;gap:var(--s5);flex-wrap:wrap}
.ft-links a{font-family:var(--ff-dsp);font-weight:600;font-size:var(--fs-cta);transition:color .3s}
.ft-links a:hover{color:var(--co-500)}
.ft-bot{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--ln);
  display:flex;flex-wrap:wrap;gap:var(--s3) 2rem;justify-content:space-between;
  font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-3)}
.ft-bot a:hover{color:var(--co-500)}

/* ============================================================ PLANCHES */
.plate{position:relative;overflow:hidden;background:var(--ink-900)}
.plate img{width:100%;height:auto;display:block}
.plate figcaption{position:absolute;inset:auto 0 0 0;z-index:3;padding:clamp(1rem,2.4vw,2rem);
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);flex-wrap:wrap;
  background:linear-gradient(to top,rgba(8,8,10,.8),transparent)}
.plate-ref{font-family:var(--ff-dsp);font-weight:900;font-size:clamp(1.4rem,3vw,2.6rem);
  letter-spacing:-.05em;color:rgba(243,242,238,.28);line-height:1}

/* ============================================================ ÉTUDES (pages) */
.cs-hero--bc{padding-top:var(--sy-sm)}
.ds-hero--bc{padding-top:var(--sy-sm)}
.legal--bc{padding-top:0}
.cs-hero{padding-top:calc(var(--tap) + var(--s9));padding-bottom:var(--sy-sm)}
.cs-hero h1{font-weight:900;font-size:clamp(2.2rem,6.4vw,5.2rem);max-width:15ch;
  letter-spacing:-.045em;margin-top:var(--s4);text-transform:uppercase}
.cs-hero .lead{margin-top:var(--s5);max-width:54ch}
.cs-banner{margin-top:clamp(1.8rem,3.5vw,3rem)}
.cs-kpis{display:grid;grid-template-columns:1fr;border-top:1px solid var(--ln);
  margin-top:clamp(2rem,3.5vw,3rem)}
.cs-kpi{padding:1.3rem 0;border-bottom:1px solid var(--ln)}
.cs-kpi b{display:block;font-family:var(--ff-dsp);font-weight:900;letter-spacing:-.04em;
  font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1;margin-bottom:var(--s2);color:var(--accent)}
.cs-kpi span{font-size:var(--fs-sm);color:var(--on-2)}
.cs-sec{padding-block:var(--sy);border-top:1px solid var(--ln)}
.cs-sec--light{background:var(--pa-200);color:var(--tx-l1);border-color:var(--ln)}
.cs-sec--paper2{background:var(--pa-300);color:var(--tx-l1);border-color:var(--ln)}
.cs-stmt{font-family:var(--ff-dsp);font-weight:900;letter-spacing:-.04em;line-height:1;
  font-size:clamp(1.7rem,3.6vw,3rem);max-width:18ch;margin:.9rem 0 1.4rem}
.cs-lede{font-size:var(--fs-lead);color:var(--on-2);max-width:56ch;margin-top:var(--gap)}
.cs-stmt + .cs-lede{margin-top:0}
.cs-cols{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--s6)}
.cs-block h3{margin-bottom:var(--s2)}
.cs-block p{font-size:var(--fs-sm)}
.cs-list{list-style:none;display:grid;gap:var(--s3);margin-top:var(--s5)}
.cs-list li{font-size:var(--fs-sm);padding-left:var(--s4);position:relative;max-width:60ch}
.cs-list li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--co-500)}
.cs-list b{font-family:var(--ff-dsp);font-weight:700;font-size:var(--fs-sm)}
.cs-fig{margin-top:var(--gap);overflow:hidden}
.cs-fig img{width:100%;height:auto}
/* paires de figures : même cadre, même hauteur */
.cs-cols .cs-fig{margin-top:0}
.cs-cols .cs-fig img{aspect-ratio:16/10;object-fit:cover;height:auto}
.cs-banner img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.cs-fig figcaption{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-2);padding-top:var(--s3)}
.cs-gen{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--bd-1);background:var(--ink-700);--on:var(--tx-d1);--on-2:var(--tx-d2);--on-3:var(--tx-d3);margin-top:var(--s6)}
.cs-gen figure{background:var(--ink-900);padding:clamp(1rem,2.4vw,2rem);text-align:center}
.cs-gen img{margin:0 auto;max-height:120px;width:auto}
.cs-gen .n{font-family:var(--ff-mon);font-size:var(--fs-mono);color:var(--co-500);
  display:block;margin:1rem 0 .3rem;letter-spacing:.14em}
.cs-gen strong{font-family:var(--ff-dsp);font-weight:700;font-size:var(--fs-sm);display:block;margin-bottom:var(--s1)}
.cs-gen p{font-size:var(--fs-cta);color:var(--on-2);max-width:24ch;margin-inline:auto}
.cs-quote{border-left:2px solid var(--co-500);padding-left:var(--s5);margin-top:var(--s6);max-width:54ch}
.cs-quote p{font-family:var(--ff-dsp);font-weight:600;font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.35;letter-spacing:-.02em}
.cs-quote cite{display:block;margin-top:var(--s3);font-family:var(--ff-mon);font-size:var(--fs-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--on-2);font-style:normal}
.cs-scope{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--s6)}
.cs-scope h4{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:400;margin-bottom:var(--s3);padding-bottom:var(--s2);
  border-bottom:1px solid var(--ln)}
.cs-scope ul{list-style:none;display:grid;gap:var(--s2)}
.cs-scope li{font-size:var(--fs-sm);color:var(--on-2)}
.cs-end{padding-block:var(--sy);border-top:1px solid var(--ln)}
.cs-end .dsp{font-weight:900;font-size:clamp(1.8rem,4.4vw,3.4rem);max-width:16ch;text-transform:uppercase}
.cs-end p{margin-top:var(--s5);color:var(--on-2)}
.cs-end .hero-cta{margin-top:var(--s6)}

/* ============================================================ PAGES LÉGALES */
.legal{padding-top:calc(var(--tap) + var(--s9));padding-bottom:var(--s9)}
.legal h1{font-weight:900;font-size:clamp(2rem,4.6vw,3.6rem);letter-spacing:-.04em;margin-bottom:var(--s5)}
.legal h2{margin-top:var(--s7);margin-bottom:var(--s3);padding-top:var(--s4);border-top:1px solid var(--ln);
  font-size:clamp(1.15rem,1.8vw,1.5rem)}
.legal h3{margin-top:var(--s5);margin-bottom:var(--s2)}
.legal p,.legal li{color:var(--on-2);max-width:70ch}
.legal ul{margin:.6rem 0 0 1.1rem;display:grid;gap:var(--s2)}
.legal dl{display:grid;gap:var(--s2);margin-top:var(--s3)}
.legal dt{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-3)}
.legal dd{margin-bottom:var(--s2)}
.legal .maj{margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid var(--ln)}
.legal .mono{color:var(--on-3)}

/* ============================================================ MOUVEMENT */
.rv-up{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv-up.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
:focus-visible{outline:2px solid var(--co-500);outline-offset:3px}

/* ============================================================
   FIL D'ARIANE
   ============================================================ */
.bc{padding-top:calc(var(--hdr-h) + var(--s6));padding-bottom:0}
.bc ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);
  font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;margin:0;padding:0}
.bc li{display:flex;align-items:center;gap:var(--s3);color:var(--on-3);margin:0}
.bc li::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--ln);flex:none}
.bc li:last-child::after{display:none}
.bc a{color:var(--on-3);transition:color var(--t-base) var(--ease)}
.bc a:hover{color:var(--accent)}
.bc li[aria-current]{color:var(--accent)}


/* ============================================================
   TÉMOIGNAGES
   ============================================================ */
.tm{display:grid;grid-template-columns:1fr;gap:var(--bd-1);background:var(--ln);
  border:var(--bd-1) solid var(--ln);margin-top:var(--rh-head)}
.tm-cell{background:var(--pa-100);padding:var(--s7);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s6)}
.tm-cell blockquote{font-family:var(--ff-dsp);font-weight:600;letter-spacing:var(--ls-h4);
  font-size:var(--fs-h4);line-height:1.4;color:var(--on);max-width:44ch}
.tm-cell--wide blockquote{max-width:78ch}
.tm-cell blockquote::before{content:"";display:block;width:26px;height:var(--bd-3);
  background:var(--co-500);margin-bottom:var(--s4)}
.tm-who{display:flex;align-items:center;gap:var(--s3)}
.tm-who i{width:11px;height:11px;border-radius:50%;background:var(--c);flex:none;font-style:normal}
.tm-who b{font-family:var(--ff-dsp);font-weight:var(--fw-h4);font-size:var(--fs-sm);display:block}
.tm-who span{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--on-3)}

/* ============================================================
   FAQ
   ============================================================ */
.fq{margin-top:var(--rh-head);border-top:var(--bd-1) solid var(--ln)}
.fq-item{border-bottom:var(--bd-1) solid var(--ln)}
.fq-q{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--s5);padding:var(--s5) 0;min-height:var(--tap);
  font-family:var(--ff-dsp);font-weight:var(--fw-h3);font-size:var(--fs-h4);
  letter-spacing:var(--ls-h4);line-height:1.35;color:var(--ink-900);
  transition:color var(--t-base) var(--ease)}
.fq-q:hover{color:var(--accent)}
.fq-ico{flex:none;width:22px;height:22px;position:relative;margin-top:.2em}
.fq-ico::before,.fq-ico::after{content:"";position:absolute;background:var(--co-500);
  transition:transform var(--t-base) var(--ease)}
.fq-ico::before{left:0;right:0;top:10px;height:2px}
.fq-ico::after{top:0;bottom:0;left:10px;width:2px}
.fq-item.on .fq-ico::after{transform:scaleY(0)}
.fq-a{overflow:hidden;max-height:0;transition:max-height var(--t-slow) var(--ease)}
.fq-a > div{padding-bottom:var(--s5)}
.fq-a p{color:var(--on-2);font-size:var(--fs-body)}
.fq-a p + p{margin-top:var(--s3)}

/* ============================================================
   GRILLE DES UNIVERS (page dédiée)
   ============================================================ */
.uv{display:grid;grid-template-columns:1fr;gap:var(--gap);margin-top:var(--rh-head)}
.uv-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--ink-900);color:var(--tx-d1);border:var(--bd-1) solid var(--ln-d);
  --on:var(--tx-d1);--on-2:var(--tx-d2);--on-3:var(--tx-d3);--ln:var(--ln-d);
  transition:border-color var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.uv-card:hover{border-color:var(--c);transform:translateY(-4px)}
.uv-media{position:relative;aspect-ratio:16/9;overflow:hidden}
.uv-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-xslow) var(--ease)}
.uv-card:hover .uv-media img{transform:scale(1.05)}
.uv-bar{height:var(--bd-3);background:var(--c)}
.uv-body{padding:var(--s6);flex:1;display:flex;flex-direction:column}
.uv-actions{margin-top:auto}
.uv-sector{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--on-2);display:block;margin-bottom:var(--s3)}
.uv-body h3{color:var(--on);text-transform:uppercase;margin-bottom:var(--s3)}
.uv-body p{font-size:var(--fs-sm);color:var(--on-2);max-width:44ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(3 * 1.6em)}
.uv-meta{margin-top:var(--s5);padding-top:var(--s3);border-top:var(--bd-1) solid var(--ln);
  font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-3);line-height:1.8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.8em)}
.uv-go{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--tap);
  font-family:var(--ff-dsp);font-weight:var(--fw-cta);font-size:var(--fs-cta);
  letter-spacing:var(--ls-cta);color:var(--co-500);transition:gap var(--t-base) var(--ease)}
.uv-card:hover .uv-go{gap:var(--s4)}

/* ============================================================
   BLOC SYSTÈME (chaîne d'acquisition)
   ============================================================ */
.sy{display:grid;grid-template-columns:1fr;gap:var(--bd-1);background:var(--ln);
  border:var(--bd-1) solid var(--ln);margin-top:var(--rh-head)}
.sy-cell{background:var(--pa-100);padding:var(--s6);transition:background var(--t-slow) var(--ease)}
.sy-cell:hover{background:var(--pa-300)}
.sy-n{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--co-500);display:block;margin-bottom:var(--s4)}
.sy-cell h3{margin-bottom:var(--s3)}
.sy-cell p{font-size:var(--fs-sm);color:var(--on-2);max-width:42ch}
.sy-cell--wide{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:var(--gap);
  align-items:center;background:var(--pa-300)}
.sy-cell--wide img{width:100%;height:auto;max-width:300px}

/* ============================================================
   NOTE D'INTENTION — le gabarit
   ============================================================ */
.ni{display:grid;grid-template-columns:1fr;border:var(--bd-1) solid var(--ln);
  margin-top:var(--sy-sm);overflow:hidden}
.ni-left{background:var(--co-500);color:#fff;--on:#fff;--on-2:rgba(255,255,255,.86);padding:var(--s8);
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s7);min-height:16rem}
.ni-no{font-family:var(--ff-dsp);font-weight:var(--fw-h3);font-size:var(--fs-h4);
  letter-spacing:var(--ls-h4);line-height:1.3}
.ni-no b{display:block;color:var(--ink-900)}
.ni-quote{font-family:var(--ff-dsp);font-weight:var(--fw-h2);letter-spacing:var(--ls-h2);
  line-height:var(--lh-h2);font-size:var(--fs-h2)}
.ni-quote em{font-style:normal;color:var(--ink-900)}
.ni-sign{font-size:var(--fs-sm);color:rgba(255,255,255,.75)}
.ni-right{background:var(--pa-100);color:var(--tx-l1);--on:var(--tx-l1);--on-2:var(--tx-l2);
  --on-3:var(--tx-l3);--ln:var(--ln-l);padding:var(--s8);display:grid;gap:var(--s5);align-content:start}
.ni-blk h4{margin-bottom:var(--s3)}
.ni-blk p{font-size:var(--fs-sm);color:var(--on-2);max-width:52ch;line-height:1.6}
.ni-sw{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.ni-sw span{flex:1 1 5rem;aspect-ratio:1/1;display:flex;align-items:flex-end;padding:var(--s2);
  font-family:var(--ff-txt);font-weight:500;font-size:var(--fs-mono);color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);line-height:1.2}

/* ============================================================
   COMPLÉMENTS ÉTUDES
   ============================================================ */
.cs-no{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--co-500);display:inline-block}
.cs-sec--glow::before{content:"";position:absolute;inset:0 0 auto;height:60%;z-index:0;
  pointer-events:none;
  background:radial-gradient(120% 100% at 12% 0%,rgba(241,84,88,.10) 0%,transparent 62%)}
.cs-sec{position:relative}
.btn--live{letter-spacing:var(--ls-cta)}

/* ============================================================
   CHARTE — mise en page propre au manuel
   ============================================================ */
.ds-hero{padding:calc(var(--tap) + var(--s9)) 0 var(--sy-sm)}
.ds-nav{position:sticky;top:calc(var(--tap) + var(--s4));z-index:var(--z-sticky);
  background:rgba(243,242,238,.94);backdrop-filter:blur(14px);
  border-block:var(--bd-1) solid var(--ln);padding-block:var(--s3)}
.ds-nav .wrap{display:flex;gap:var(--s5);overflow-x:auto;scrollbar-width:none}
.ds-nav .wrap::-webkit-scrollbar{display:none}
.ds-nav a{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--on-3);white-space:nowrap;
  min-height:var(--tap);display:flex;align-items:center;transition:color var(--t-base) var(--ease)}
.ds-nav a:hover{color:var(--co-500)}
.ds-sec{padding-block:var(--sy);border-top:var(--bd-1) solid var(--ln)}
.ds-sec h2{max-width:16ch}
.ds-grid{display:grid;gap:var(--bd-1);background:var(--ln);
  border:var(--bd-1) solid var(--ln);margin-top:var(--rh-head);grid-template-columns:1fr}
.ds-cell{background:var(--pa-100);padding:var(--s6)}
.ds-k{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--on-3);display:block;margin-bottom:var(--s3)}
.ds-cell p{font-size:var(--fs-sm);color:var(--on-2);max-width:44ch}
.ds-cell h3{margin-bottom:var(--s2)}
.sw-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--bd-1);background:var(--ln);
  border:var(--bd-1) solid var(--ln);margin-top:var(--s5)}
.sw{aspect-ratio:3/2;padding:var(--s3);display:flex;flex-direction:column;justify-content:flex-end;
  font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:.06em;line-height:1.5}
.sw b{display:block;font-weight:400;opacity:.75}
.tp{border-top:var(--bd-1) solid var(--ln);padding:var(--s5) 0;display:grid;
  grid-template-columns:1fr;gap:var(--s2)}
.tp-meta{font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--co-500)}
.tp-ex{color:var(--on);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp{display:flex;align-items:flex-end;gap:var(--s2);margin-top:var(--s5);flex-wrap:wrap}
.sp i{background:var(--co-500);display:block;width:1.6rem;font-style:normal}
.sp figure{text-align:center}
.sp figcaption{font-family:var(--ff-mon);font-size:var(--fs-mono);color:var(--on-3);
  margin-top:var(--s2);letter-spacing:.06em}
.mo{display:grid;grid-template-columns:1fr;gap:var(--bd-1);background:var(--ln);
  border:var(--bd-1) solid var(--ln);margin-top:var(--s6)}
.mo-cell{background:var(--pa-100);padding:var(--s5);display:flex;align-items:center;gap:var(--s4)}
.mo-dot{width:14px;height:14px;border-radius:50%;background:var(--co-500);flex:none;
  animation:grow 2.4s var(--ease) infinite}
@keyframes grow{0%,100%{transform:scale(.35)}45%{transform:scale(1)}}
.mo-cell:nth-child(2) .mo-dot{animation-delay:.2s}
.mo-cell:nth-child(3) .mo-dot{animation-delay:.4s}
.mo-cell:nth-child(4) .mo-dot{animation-delay:.6s}
.mark{display:grid;grid-template-columns:1fr;gap:var(--s6);margin-top:var(--rh-head);align-items:center}
.mark-fig{background:var(--ink-900);border:var(--bd-1) solid var(--ln);padding:var(--s9);
  display:grid;place-items:center}
.mark-oo{display:flex;align-items:center;gap:var(--s4)}
.mark-oo i{border-radius:50%;border:.32em solid var(--co-500);display:block;font-size:1rem}
.mark-oo i:first-child{width:2.6rem;height:2.6rem}
.mark-oo i:last-child{width:4.4rem;height:4.4rem}
.vo{display:grid;grid-template-columns:1fr;gap:var(--bd-1);background:var(--ln);
  border:var(--bd-1) solid var(--ln);margin-top:var(--s6)}
.vo-cell{background:var(--pa-100);padding:var(--s6)}
.vo-cell.no{background:var(--pa-300)}
.vo-cell ul{list-style:none;display:grid;gap:var(--s3);margin-top:var(--s4)}
.vo-cell li{font-size:var(--fs-sm);color:var(--on-2);padding-left:var(--s5);position:relative}
.vo-cell li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--co-500)}
.vo-cell.no li::before{background:var(--on-3)}

/* ============================================================
   RESPONSIVE — la typographie et l'espace sont déjà fluides.
   Ces paliers ne servent qu'aux changements de GRILLE.
   360 → 599 : une colonne · 600 → 899 : deux · 900+ : trois
   ============================================================ */

/* ---- MOBILE (défaut, 360 → 599) ---- */
.hero{min-height:auto;padding-block:calc(var(--tap) + var(--s11)) var(--sy-sm)}
.hero-cta{flex-direction:column;align-items:stretch}
.hero-cta .btn{width:100%}
.fd input{font-size:16px}          /* empêche le zoom iOS */
.rv{width:100%;justify-content:center}

@media(min-width:600px){
  .hero{min-height:92svh;padding-block:calc(var(--tap) + var(--s12)) var(--sy)}
  .hero-cta{flex-direction:row;align-items:center}
  .hero-cta .btn{width:auto}
  .rv{width:auto}
  .mf{grid-template-columns:1fr 1.05fr;gap:var(--gap)}
  .pj-grid{grid-template-columns:repeat(2,1fr)}
  .cn-grid{grid-template-columns:repeat(2,1fr)}
  .cn-entree{grid-template-columns:4rem 1fr auto}
  .cn-facts{grid-template-columns:repeat(2,1fr)}
  .cn-shots--2{grid-template-columns:1fr 1fr}
  .cn-nav{grid-template-columns:1fr 1fr}
  .pj-cta{grid-column:span 2}
  .uv-cta{grid-column:span 2}
  .pj-head{grid-template-columns:1fr auto}
  .tm{grid-template-columns:1fr 1fr}
  .tm-cell--wide{grid-column:1 / -1}
  .uv{grid-template-columns:1fr 1fr}
  .cs-kpis{grid-template-columns:repeat(3,1fr);gap:0 var(--gap)}
  .cs-cols{grid-template-columns:repeat(2,1fr)}
  .cs-scope{grid-template-columns:repeat(3,1fr)}
  .cs-gen{grid-template-columns:repeat(2,1fr)}
  .ct{grid-template-columns:1.25fr .8fr}
  .cf{grid-template-columns:1.05fr .8fr}

  .ni{grid-template-columns:.85fr 1.15fr}
  .sy{grid-template-columns:repeat(2,1fr)}
  .ds-grid{grid-template-columns:repeat(2,1fr)}
  .sw-row{grid-template-columns:repeat(3,1fr)}
  .tp{grid-template-columns:11rem 1fr;align-items:baseline;gap:var(--s6)}
  .mo{grid-template-columns:repeat(2,1fr)}
  .vo{grid-template-columns:1fr 1fr}
  .mark{grid-template-columns:1fr 1.1fr}
}

@media(min-width:900px){
  :root{--hdr-h:75px}

  .hero{min-height:100svh}
  .pj-grid{grid-template-columns:repeat(3,1fr)}
  .cn-grid{grid-template-columns:repeat(3,1fr)}
  .cn-duo{grid-template-columns:1.25fr .75fr;gap:var(--s8)}
  .cn-duo-doc{max-width:none}
  .cn-facts{grid-template-columns:repeat(4,1fr)}
  .pj-cta{grid-column:span 2}
  .uv-cta{grid-column:span 2}

  .mth-row{padding-block:var(--s6)}
  .mth-hd{grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1.15fr) 1.5rem}
  .mth-btn{grid-template-columns:5.5rem minmax(0,1fr)}
  .mth-no{font-size:var(--fs-h2)}
  .mth-g{grid-column:3;grid-row:1 / 3;align-self:start;max-width:52ch}
  .mth-sg{grid-column:4}
  .mth-c{margin-left:5.5rem}

  .uv{grid-template-columns:repeat(3,1fr)}

  .cs-gen{grid-template-columns:repeat(4,1fr)}
  .cs-cols--3{grid-template-columns:repeat(3,1fr)}
  .sy{grid-template-columns:repeat(4,1fr)}
  .sy-cell--wide{grid-template-columns:280px 1fr}
  .ds-grid--3{grid-template-columns:repeat(3,1fr)}
  .sw-row{grid-template-columns:repeat(6,1fr)}
}

@media(max-width:899px){ .nav{display:none} .burger{display:block} }

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rv-up{opacity:1;transform:none}
  .hero h1 span i{transform:none}
  .hero-bg img{transform:none}
}

/* ── rythme par défaut hors .head (titres et chapôs isolés) ── */
.eyebrow + h1,.eyebrow + h2,.eyebrow + .h2,.eyebrow + .dsp{margin-top:var(--rh-eyebrow)}
h1 + .lead,h2 + .lead,.h2 + .lead,.dsp + p{margin-top:var(--rh-title)}
.lead + .lead,p + p{margin-top:var(--s4)}
.cs-hero .lead,.ds-hero .lead{margin-top:var(--rh-title)}

/* ── lien vers le site client — coexiste avec le lien d'étude ── */
.pj-card{position:relative}
.pj-go--main::after{content:"";position:absolute;inset:0;z-index:1}   /* toute la carte est cliquable */
.pj-live{position:relative;z-index:2;display:inline-flex;align-items:center;gap:var(--s2);
  min-height:var(--tap);font-family:var(--ff-mon);font-size:var(--fs-mono);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--on-3);
  transition:color var(--t-base) var(--ease)}
.pj-live:hover{color:var(--co-500)}
.pj-live::after{content:"↗";font-family:var(--ff-txt)}
.pj-foot{flex-wrap:wrap}
.uv-live{position:relative;z-index:2;display:inline-flex;align-items:center;gap:var(--s2);
  min-height:var(--tap);font-family:var(--ff-mon);font-size:var(--fs-mono);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--on-3);
  transition:color var(--t-base) var(--ease)}
.uv-live:hover{color:var(--co-500)}
.uv-live::after{content:"↗";font-family:var(--ff-txt)}
.uv-actions{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin-top:var(--s4);padding-top:var(--s3);border-top:var(--bd-1) solid var(--ln)}

/* ── utilitaires de rythme — remplacent tout style en ligne ── */
.mt-1{margin-top:var(--s4)}
.mt-2{margin-top:var(--s6)}
.mt-3{margin-top:var(--s7)}
.mb-1{margin-bottom:var(--s4)}
.blk{display:block}

/* ── neuvième case : l'appel à l'action, la grille reste pleine ── */
.uv-cta,.pj-cta{display:flex;flex-direction:column;justify-content:space-between;
  background:var(--co-500);color:#fff;padding:var(--s7);min-height:100%;
  border:var(--bd-1) solid var(--co-500);position:relative;overflow:hidden;
  transition:background var(--t-slow) var(--ease)}
.uv-cta:hover,.pj-cta:hover{background:var(--co-700);border-color:var(--co-700)}
.uv-cta .k,.pj-cta .k{font-family:var(--ff-mon);font-size:var(--fs-mono);
  letter-spacing:var(--ls-mono);text-transform:uppercase;color:rgba(255,255,255,.72)}
.uv-cta h3,.pj-cta h3{color:#fff;text-transform:uppercase;margin:var(--s5) 0 var(--s3)}
.uv-cta p,.pj-cta p{color:rgba(255,255,255,.82);font-size:var(--fs-sm);max-width:32ch}
.uv-cta .go,.pj-cta .go{margin-top:var(--s6);display:inline-flex;align-items:center;gap:var(--s2);
  min-height:var(--tap);font-family:var(--ff-dsp);font-weight:var(--fw-cta);
  font-size:var(--fs-cta);letter-spacing:var(--ls-cta);
  border-bottom:var(--bd-2) solid rgba(255,255,255,.5);align-self:flex-start;
  transition:gap var(--t-base) var(--ease),border-color var(--t-base) var(--ease)}
.uv-cta:hover .go,.pj-cta:hover .go{gap:var(--s4);border-bottom-color:#fff}

/* ── mosaïque accueil : mêmes règles, mêmes hauteurs ── */
.pj-card{display:flex;flex-direction:column}
.pj-body{flex:1;display:flex;flex-direction:column}
.pj-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.6em)}
.pj-foot{margin-top:auto}

/* ── bandeau d'aperçus : la couleur arrive dès le premier écran ── */
.mqi-in{display:flex;align-items:center;gap:var(--gap);flex:none;padding-right:var(--gap);
  animation:slide 46s linear infinite;will-change:transform}
.mq:hover .mqi-in{animation-play-state:paused}
.mqi{flex:none;width:clamp(220px,26vw,340px);position:relative;overflow:hidden;
  aspect-ratio:16/9;border:var(--bd-1) solid var(--ln-d);display:block;
  transition:border-color var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.mqi:hover{border-color:var(--c);transform:translateY(-3px)}
.mqi img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);
  transition:filter var(--t-slow) var(--ease),transform var(--t-xslow) var(--ease)}
.mqi:hover img{filter:saturate(1.08);transform:scale(1.04)}
.mqi span{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--s3);
  font-family:var(--ff-mon);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(8,8,10,.85),transparent);
  opacity:0;transform:translateY(6px);
  transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.mqi:hover span{opacity:1;transform:none}
.mqi i{position:absolute;top:0;left:0;right:0;height:var(--bd-3);background:var(--c);
  z-index:2;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-slow) var(--ease)}
.mqi:hover i{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){ .mqi-in{animation:none} .mq{overflow-x:auto} }

/* ============================================================
   FILM DE MARQUE — le son
   ============================================================ */
.film-frame{margin-top:var(--rh-head);border:var(--bd-1) solid var(--ln);overflow:hidden;background:#000}
.film-frame video{width:100%;height:auto;display:block;aspect-ratio:16/9;background:#000}
.film-frame figcaption{padding:var(--s3) var(--s4);font-family:var(--ff-mon);font-size:var(--fs-mono);
  letter-spacing:var(--ls-mono);text-transform:uppercase;text-align:center;
  color:rgba(243,242,238,.55);background:var(--ink-900)}

/* ============================================================
   GALERIE — mosaïque asymétrique, faite maison
   ============================================================ */
.regard{display:grid;grid-template-columns:1fr;gap:var(--s3);margin-top:var(--rh-head)}
.regard figure{margin:0;overflow:hidden;background:var(--ink-800)}
.regard img{width:100%;height:auto;display:block;transition:transform var(--t-xslow) var(--ease)}
.regard figure:hover img{transform:scale(1.045)}
@media(min-width:640px){
  .regard{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .regard img{height:100%;object-fit:cover}
  .rg-studio{grid-column:span 2}
}
@media(min-width:980px){
  .regard{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(170px,14vw,205px)}
  .rg-studio{grid-column:span 4;grid-row:span 2}
  .rg-meditation,.rg-cristal,.rg-the,.rg-lifestyle{grid-column:span 2;grid-row:span 2}
  .rg-bolsor,.rg-geste{grid-column:span 3;grid-row:span 2}
}

/* ============================================================
   MARQUEE DE PHRASES — une seule ligne, même rythme que le
   bandeau d'images (46 s, linéaire), sens inverse pour que les
   deux couches se lisent comme un seul mouvement coordonné et
   non comme deux défilements concurrents.
   ============================================================ */
.claim{border-block:var(--bd-1) solid var(--ln);padding-block:var(--s6);
  overflow:hidden;background:var(--pa-200);position:relative;display:flex}
.claim::before,.claim::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:3;
  pointer-events:none}
.claim::before{left:0;background:linear-gradient(90deg,var(--pa-200),transparent)}
.claim::after{right:0;background:linear-gradient(270deg,var(--pa-200),transparent)}
.claim-in{display:flex;align-items:center;gap:var(--s8);flex:none;padding-right:var(--s8);
  animation:slide 46s linear infinite reverse;will-change:transform}
.claim:hover .claim-in{animation-play-state:paused}
.claim-in i{width:8px;height:8px;border-radius:50%;background:var(--co-500);flex:none}
.claim p{font-family:var(--ff-dsp);font-weight:900;letter-spacing:-.04em;line-height:1;
  white-space:nowrap;font-size:clamp(1.6rem,4.4vw,3.4rem);color:var(--tx-l1)}
.claim p em{font-style:normal;color:var(--co-700)}
@media(prefers-reduced-motion:reduce){ .claim-in{animation:none} .claim{overflow-x:auto} }

/* ============================================================
   THÈME SOMBRE DE PAGE — univers.html reste dans le registre
   cinématographique : cohérence avec les cartes, déjà en encre.
   ============================================================ */
body.theme-dark{background:var(--ink-900)}
body.theme-dark .hdr{color:var(--tx-d1)}
body.theme-dark .hdr.solid{background:rgba(12,12,15,.9)}
body.theme-dark .burger span{background:var(--tx-d1)}
body.theme-dark .nav a::after{background:var(--co-500)}