/* ============================================================
   TOMY'S PROD — DESIGN SYSTEM V2 "STUDIO"
   Palette d'origine conservée (or #C9A84C / noir / bone)
   ============================================================ */
/* ---------------- TOKENS ----------------
   Le sombre est l'identité par défaut. Le mode clair est un choix
   explicite du visiteur (bouton dans l'en-tête), pas une bascule
   automatique selon son système : la marque reste maîtrisée. */
:root{
  --gold:#C9A84C;
  --gold-lt:#EBD08A;
  --gold-deep:#7D6530;
  --gold-rgb:201 168 76;
  --gold-lt-rgb:235 208 138;
  --gold-deep-rgb:125 101 48;

  --ink:#08080A;
  --ink-2:#0D0D10;
  --ink-3:#131318;
  --ink-4:#1B1B21;
  --bone:#F4F1EA;
  --muted:#8B877F;

  --bg-rgb:8 8 10;
  --bg2-rgb:13 13 16;
  --fg-rgb:244 241 234;

  --line:rgb(var(--gold-rgb) / .16);
  --line-soft:rgb(var(--fg-rgb) / .08);
  --shadow:0 40px 90px -30px rgb(0 0 0 / .9);

  --f-display:'Playfair Display',Georgia,serif;
  --f-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-2:cubic-bezier(.65,0,.35,1);
  --pad:clamp(20px,5vw,88px);
  color-scheme:dark;
}

/* ---------------- MODE CLAIR ---------------- */
:root[data-theme="light"]{
  --gold:#8A6B21;            /* or assombri : contraste suffisant sur fond clair */
  --gold-lt:#B8912F;
  --gold-deep:#D9C48A;
  --gold-rgb:138 107 33;
  --gold-lt-rgb:184 145 47;
  --gold-deep-rgb:217 196 138;

  --ink:#F7F5F0;             /* fond de page */
  --ink-2:#EFEBE2;           /* surfaces */
  --ink-3:#E6E1D6;
  --ink-4:#DCD6C8;
  --bone:#17161A;            /* texte principal */
  --muted:#5E5A52;

  --bg-rgb:247 245 240;
  --bg2-rgb:239 235 226;
  --fg-rgb:23 22 26;

  --line:rgb(var(--gold-rgb) / .28);
  --line-soft:rgb(var(--fg-rgb) / .12);
  --shadow:0 30px 70px -32px rgb(23 22 26 / .28);
  color-scheme:light;
}

/* Le hero reste sombre dans les deux modes : il contient le rendu WebGL,
   et un hero sombre sur une page claire est un parti pris assumé. */
:root[data-theme="light"] .hero,
:root[data-theme="light"] .phero,
:root[data-theme="light"] .pj-hero,
:root[data-theme="light"] .tr-veil,
:root[data-theme="light"] .pre,
:root[data-theme="light"] .curtain{
  --bone:#F4F1EA;
  --muted:#8B877F;
  --fg-rgb:244 241 234;
  --bg-rgb:8 8 10;
  --ink:#08080A;
  --ink-2:#0D0D10;
  --ink-3:#131318;
  --gold:#C9A84C;
  --gold-lt:#EBD08A;
  --gold-rgb:201 168 76;
  --gold-lt-rgb:235 208 138;
  --line:rgb(201 168 76 / .16);
  --line-soft:rgb(244 241 234 / .08);
  color:var(--bone);
}
:root[data-theme="light"] .pre,
:root[data-theme="light"] .curtain,
:root[data-theme="light"] .tr-veil{background:#0D0D10}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
h1,h2,h3,h4{text-wrap:balance}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  background:var(--ink);
  color:var(--bone);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--gold-deep);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

/* ---------- GRAIN + VIGNETTE GLOBAUX ---------- */
/* Les deux voiles plein écran sont promus sur leur propre couche GPU :
   sans ça, le compositeur les repeint à chaque image de défilement. */
.fx-grain{
  position:fixed;inset:0;z-index:9990;pointer-events:none;
  transform:translateZ(0);will-change:transform;contain:strict;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:160px 160px;
  animation:grain 1.2s steps(6) infinite;
  will-change:background-position}
@keyframes grain{
  0%{background-position:0 0}17%{background-position:-20px 10px}33%{background-position:15px -25px}
  50%{background-position:-25px 15px}67%{background-position:20px 20px}83%{background-position:-10px -20px}
  100%{background-position:0 0}}
.fx-vignette{position:fixed;inset:0;z-index:9989;pointer-events:none;
  transform:translateZ(0);will-change:transform;contain:strict;
  background:radial-gradient(ellipse 110% 90% at 50% 45%,transparent 40%,rgba(0,0,0,.55) 100%)}

/* ---------- CURSEUR CUSTOM ---------- */
.cur{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;will-change:transform;opacity:0;transition:opacity .4s}
body.has-cur .cur{opacity:1}
.cur-dot{width:7px;height:7px;background:var(--gold);border-radius:50%;margin:-3.5px 0 0 -3.5px;
  box-shadow:0 0 12px rgb(var(--gold-rgb) / .9)}
.cur-ring{width:38px;height:38px;border:1px solid rgb(var(--gold-rgb) / .55);border-radius:50%;margin:-19px 0 0 -19px;
  transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
body.cur-hover .cur-ring{width:76px;height:76px;margin:-38px 0 0 -38px;border-color:var(--gold);background:rgb(var(--gold-rgb) / .10)}
body.cur-hover .cur-dot{opacity:0}
.cur-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.6);
  font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  opacity:0;transition:opacity .3s,transform .4s var(--ease);white-space:nowrap}
body.cur-view .cur-label{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* ---------- PRELOADER ---------- */
.pre{position:fixed;inset:0;z-index:10000;background:var(--ink);display:grid;place-items:center}
.pre-inner{text-align:center}
.pre-mark{width:74px;height:74px;margin:0 auto 26px}
.pre-mark path,.pre-mark circle{fill:none;stroke:var(--gold);stroke-width:2;
  stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.6s var(--ease) forwards}
.pre-mark circle{animation-delay:.15s}
@keyframes draw{to{stroke-dashoffset:0}}
.pre-num{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.3em;color:var(--gold);margin-bottom:14px}
.pre-bar{width:170px;height:1px;background:rgb(var(--gold-rgb) / .2);margin:0 auto;overflow:hidden}
.pre-bar i{display:block;height:100%;width:0;background:var(--gold)}
.pre-word{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.34em;color:var(--muted);margin-top:16px;text-transform:uppercase}
/* Rideaux d'ouverture. Ils sont au-dessus du rideau de transition (9998
   contre 9995) : une fois l'intro finie, ils sont masqués pour de bon.
   Sans ça, leur bord s'arrête pile sur le pixel 0 (hauteur en vh, donc
   fractionnaire) et laisse une fine ligne visible en haut et en bas de
   l'écran pendant les changements de page. */
.curtain{position:fixed;left:0;width:100%;height:50.5vh;background:var(--ink);z-index:9998;pointer-events:none;
  transition:transform 1.1s var(--ease)}
.curtain.top{top:0}.curtain.bot{bottom:0}
body.loaded .curtain{visibility:hidden;transition:transform 1.1s var(--ease),visibility 0s linear 1.2s}
body.loaded .curtain.top{transform:translateY(-101%)}
body.loaded .curtain.bot{transform:translateY(101%)}
body.loaded .pre{opacity:0;pointer-events:none;transition:opacity .5s}

/* ---------- HEADER ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--pad);
  transition:padding .5s var(--ease),background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s;
  border-bottom:1px solid transparent}
.topbar.stuck{padding:12px var(--pad);background:rgb(var(--bg-rgb) / .82);backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:var(--line)}
.topbar.hide{transform:translateY(-102%)}
.topbar{transition:transform .6s var(--ease),padding .5s var(--ease),background .5s var(--ease),border-color .5s}
.brand{display:flex;align-items:center;gap:11px;z-index:2}
/* ---------- Logo réel ----------
   Dès qu'un fichier logo existe dans assets/img/, Media::mark() renvoie une
   image à la place du monogramme dessiné. Ces règles lui donnent la bonne
   taille et sa propre animation, puisque fill et stroke ne s'appliquent
   pas à une image. */
.is-logo{object-fit:contain;display:block}
img.brand-mark{width:38px;height:38px;flex:0 0 38px;
  transition:transform .5s var(--ease),filter .5s var(--ease)}
.brand:hover img.brand-mark{transform:scale(1.06)}
img.pre-mark{width:78px;height:78px;margin:0 auto 26px;
  opacity:0;animation:logoIn 1.1s var(--ease) .12s forwards}
@keyframes logoIn{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:none}}
img.tr-mark{width:48px;height:48px;animation:logoBreathe 2.4s ease-in-out infinite}
@keyframes logoBreathe{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.08);opacity:1}}
@media (prefers-reduced-motion:reduce){
  img.pre-mark{animation:none;opacity:1}
  img.tr-mark{animation:none}
}
.brand-mark{width:34px;height:34px;flex:0 0 34px}
.brand-mark path,.brand-mark circle{fill:none;stroke:var(--gold);stroke-width:2.4}
.brand-txt{line-height:1.2}
.brand-txt b{display:block;font-family:var(--f-display);font-size:1rem;font-weight:900;letter-spacing:.01em;margin-bottom:3px}
.brand-txt span{display:block;font-family:var(--f-mono);font-size:.52rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
.nav{display:flex;gap:6px;align-items:center}
.nav a{position:relative;padding:9px 15px;font-size:.76rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:rgb(var(--fg-rgb) / .62);transition:color .35s}
.nav a::after{content:'';position:absolute;left:15px;right:15px;bottom:4px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover{color:var(--bone)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.top-right{display:flex;align-items:center;gap:14px}
.lang{display:flex;gap:2px;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em}
.lang a{padding:5px 7px;color:var(--muted);transition:color .3s}
.lang a.on{color:var(--gold)}
.lang a:hover{color:var(--bone)}

/* boutons */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;overflow:hidden;
  padding:14px 30px;border-radius:100px;
  font-family:var(--f-mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  background:var(--gold);color:var(--ink);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  box-shadow:0 0 0 rgb(var(--gold-rgb) / 0)}
.btn span{position:relative;z-index:1}
.btn svg{position:relative;z-index:1;width:13px;height:13px;transition:transform .5s var(--ease)}
.btn::before{content:'';position:absolute;inset:0;background:var(--gold-lt);
  transform:translateY(101%);transition:transform .55s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{box-shadow:0 14px 44px -12px rgb(var(--gold-rgb) / .65)}
.btn:hover svg{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--bone);border:1px solid rgb(var(--fg-rgb) / .22)}
.btn.ghost::before{background:var(--bone)}
.btn.ghost:hover{color:var(--ink);border-color:var(--bone);box-shadow:none}
.btn.sm{padding:11px 22px;font-size:.62rem}
.burger{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;gap:6px;align-items:flex-end}
.burger i{display:block;height:1.5px;background:var(--bone);transition:.4s var(--ease)}
.burger i:nth-child(1){width:22px}.burger i:nth-child(2){width:15px}
body.menu .burger i:nth-child(1){width:22px;transform:translateY(3.75px) rotate(45deg)}
body.menu .burger i:nth-child(2){width:22px;transform:translateY(-3.75px) rotate(-45deg)}

/* menu plein écran */
.overlay{position:fixed;inset:0;z-index:880;background:var(--ink-2);
  clip-path:circle(0% at calc(100% - 60px) 42px);transition:clip-path .9s var(--ease);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0 var(--pad)}
body.menu .overlay{clip-path:circle(150% at calc(100% - 60px) 42px)}
.overlay nav{display:flex;flex-direction:column;gap:2px}
.overlay nav a{font-family:var(--f-display);font-size:clamp(2rem,7vw,4.4rem);font-weight:900;line-height:1.1;
  color:rgb(var(--fg-rgb) / .35);transition:color .4s,transform .6s var(--ease);transform:translateY(20px);opacity:0}
body.menu .overlay nav a{transform:none;opacity:1;transition-delay:calc(.25s + var(--i)*.06s)}
.overlay nav a:hover{color:var(--gold)}
.overlay nav a em{font-family:var(--f-mono);font-style:normal;font-size:.7rem;color:var(--gold);vertical-align:super;margin-right:12px}

/* sélecteur de langue, repris dans le menu plein écran : sur petit écran,
   .lang (barre du haut) se cache et c'est le seul moyen de changer de
   langue (voir la media query plus bas). */
.overlay-lang{display:flex;gap:20px;margin-top:40px;font-family:var(--f-mono);
  font-size:.72rem;letter-spacing:.14em;transition:opacity .5s,transform .6s var(--ease);
  transform:translateY(14px);opacity:0}
body.menu .overlay-lang{transform:none;opacity:1;transition-delay:.56s}
.overlay-lang a{color:rgb(var(--fg-rgb) / .35);transition:color .3s}
.overlay-lang a.on{color:var(--gold)}
.overlay-lang a:hover{color:var(--bone)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:130px var(--pad) 0;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg::before{content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 55% at 78% 32%,rgb(var(--gold-rgb) / .20),transparent 62%),
    radial-gradient(ellipse 70% 60% at 12% 78%,rgb(var(--gold-deep-rgb) / .16),transparent 60%),
    linear-gradient(160deg,#0B0B0E,#08080A 55%,#0C0A08)}
.hero-bg i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5}
.hero-bg i:nth-child(1){width:44vw;height:44vw;left:52%;top:-14%;background:radial-gradient(circle,rgb(var(--gold-rgb) / .30),transparent 68%);animation:float1 18s ease-in-out infinite}
.hero-bg i:nth-child(2){width:34vw;height:34vw;left:-8%;top:44%;background:radial-gradient(circle,rgb(var(--gold-lt-rgb) / .16),transparent 68%);animation:float2 22s ease-in-out infinite}
/* Pendant le défilement, on met en pause les animations permanentes les plus
   chères à repeindre. Le grain redessine tout l'écran 5 fois par seconde et
   les deux halos du hero font 44 vw avec un flou de 70 px : invisible à
   l'arrêt, coûteux en mouvement. Elles repartent 160 ms après l'arrêt. */
body.scrolling .fx-grain,
body.scrolling .hero-bg i{animation-play-state:paused}

@keyframes float1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7%,7%) scale(1.12)}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9%,-6%) scale(1.08)}}
.hero-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  mask-image:radial-gradient(ellipse 75% 70% at 50% 40%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 40%,#000 20%,transparent 78%)}
.hero-inner{position:relative;z-index:2;max-width:1500px;width:100%;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:12px;
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.eyebrow::before{content:'';width:44px;height:1px;background:var(--gold)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1;box-shadow:0 0 0 0 rgb(var(--gold-rgb) / .6)}50%{opacity:.55;box-shadow:0 0 0 7px rgb(var(--gold-rgb) / 0)}}
h1.hero-h{font-family:var(--f-display);font-weight:900;
  font-size:clamp(2.6rem,8.2vw,7.6rem);line-height:.94;letter-spacing:-.028em;margin-bottom:30px}
h1.hero-h em{font-style:italic;font-weight:400;color:var(--gold)}
.hero-sub{max-width:520px;font-size:clamp(1rem,1.15vw,1.12rem);color:rgb(var(--fg-rgb) / .66);margin-bottom:40px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}

/* masque de révélation ligne par ligne */
.rl{display:block;overflow:hidden}
.rl>span{display:block;transform:translateY(105%);transition:transform 1.15s var(--ease)}
.in .rl>span,.rl.go>span{transform:none}
.fade{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.in .fade,.fade.go{opacity:1;transform:none}
.reveal{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1.15s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.28s}.d4{transition-delay:.38s}.d5{transition-delay:.5s}.d6{transition-delay:.62s}

/* scroll cue + stats */
.hero-foot{position:relative;z-index:2;max-width:1500px;width:100%;margin:clamp(48px,7vh,96px) auto 0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;
  padding-bottom:34px}
.cue{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.26em;color:var(--muted);text-transform:uppercase}
.cue-line{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.cue-line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--bone);animation:cueRun 2.2s var(--ease-2) infinite}
@keyframes cueRun{0%{top:-100%}60%,100%{top:100%}}
.hstats{display:flex;gap:clamp(24px,3.5vw,64px);flex-wrap:wrap}
.hstat b{display:block;font-family:var(--f-display);font-size:clamp(1.7rem,3vw,2.7rem);font-weight:900;color:var(--gold);line-height:1}
.hstat span{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- MARQUEE ---------- */
.band{border-block:1px solid var(--line);background:var(--ink-2);overflow:hidden;padding:20px 0}
.band-track{display:flex;gap:0;width:max-content;will-change:transform}
.band-track span{display:inline-flex;align-items:center;gap:34px;padding-right:34px;
  font-family:var(--f-display);font-size:clamp(1.1rem,2.1vw,1.9rem);font-weight:900;letter-spacing:-.01em;white-space:nowrap;
  color:rgb(var(--fg-rgb) / .16)}
.band-track span i{width:7px;height:7px;background:var(--gold);border-radius:50%;flex:0 0 7px}
.band-track span b{color:var(--bone);font-weight:900}

/* ---------- SECTIONS GÉNÉRIQUES ---------- */
section{position:relative}
.wrap{max-width:1500px;margin:0 auto;padding-inline:var(--pad)}
.pad{padding-block:clamp(80px,11vw,170px)}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:34px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,74px)}
.shead h2{font-family:var(--f-display);font-weight:900;font-size:clamp(2rem,4.6vw,4rem);line-height:1.02;letter-spacing:-.025em;max-width:15ch}
.shead h2 em{font-style:italic;font-weight:400;color:var(--gold)}
.shead p{max-width:38ch;color:var(--muted);font-size:.98rem}
.idx{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;display:block;margin-bottom:16px}

/* ---------- MANIFESTO (scroll gelé, révélation mot à mot) ---------- */
.mani{position:relative;background:var(--ink-2);border-top:1px solid var(--line-soft)}
.mani-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.mani p{font-family:var(--f-display);font-weight:400;font-size:clamp(1.35rem,3.5vw,3.05rem);line-height:1.32;letter-spacing:-.02em;max-width:22ch;margin:0 auto;text-align:center}
.mani .w{color:rgb(var(--fg-rgb) / .13);transition:color .35s linear}
.mani .w.on{color:var(--bone)}
.mani .w.gold.on{color:var(--gold)}
.mani-sign{text-align:center;margin-top:44px;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.24em;color:var(--muted);text-transform:uppercase}
/* Sur petit écran, un scroll "gelé" est désorientant et coûte du temps de
   défilement précieux : la section redevient un paragraphe classique. */
@media (max-width:820px){.mani-sticky{position:static;height:auto;padding-block:clamp(60px,10vw,110px)}}

/* ---------- SERVICES ---------- */
.srv{border-top:1px solid var(--line-soft)}
.srv-row{position:relative;display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:clamp(16px,3vw,50px);
  padding:clamp(26px,3.4vw,44px) 0;border-bottom:1px solid var(--line-soft);cursor:pointer;overflow:hidden}
.srv-row::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--gold-rgb) / .10),transparent 60%);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.srv-row:hover::before{transform:scaleX(1)}
.srv-n{font-family:var(--f-mono);font-size:.68rem;color:var(--gold);letter-spacing:.16em;position:relative}
.srv-t{position:relative;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.srv-t h3{font-family:var(--f-display);font-weight:900;font-size:clamp(1.5rem,4vw,3.2rem);line-height:1;letter-spacing:-.025em;
  transition:transform .7s var(--ease),color .5s}
.srv-row:hover .srv-t h3{transform:translateX(18px);color:var(--gold)}
.srv-tags{display:flex;gap:8px;flex-wrap:wrap;transition:transform .7s var(--ease) .05s}
.srv-row:hover .srv-tags{transform:translateX(18px)}
.tag{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-soft);border-radius:100px;padding:5px 11px}
.srv-go{position:relative;width:52px;height:52px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  color:var(--gold);flex:0 0 52px;transition:background .5s var(--ease),transform .6s var(--ease),border-color .5s}
.srv-row:hover .srv-go{background:var(--gold);color:var(--ink);transform:rotate(-45deg) scale(1.08);border-color:var(--gold)}
.srv-go svg{width:16px;height:16px}
/* aperçu flottant qui suit le curseur */
.srv-peek{position:fixed;top:0;left:0;z-index:60;pointer-events:none;will-change:transform}
/* Le format est fixé en JavaScript d'après l'image réelle (voir module 17) :
   ces valeurs ne servent que d'état de départ et de repli sans image. */
.peek-in{width:min(400px,30vw);aspect-ratio:16/10;border-radius:10px;overflow:hidden;position:relative;
  margin:-13% 0 0 -50%;
  opacity:0;transform:scale(.86) rotate(-4deg);
  transition:opacity .45s var(--ease),transform .55s var(--ease);
  border:1px solid var(--line);box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.srv-peek.on .peek-in{opacity:1;transform:scale(1) rotate(-2deg)}
.peek-img{position:absolute;inset:0;z-index:5;width:100%;height:100%;object-fit:cover;
  object-position:50% 50%;opacity:0;transition:opacity .35s var(--ease)}
@media (max-width:900px){.srv-peek{display:none}}

/* faux visuels (placeholders CSS, à remplacer par tes vrais mockups) */
.shot{position:absolute;inset:0;background:var(--ink-3);overflow:hidden}
@property --sc{syntax:'<number>';inherits:true;initial-value:1.06}
@property --py{syntax:'<length>';inherits:true;initial-value:0px}
.shot::before{content:'';position:absolute;inset:0;
  transform:scale(var(--sc)) translate3d(0,var(--py),0);
  transition:--sc 1.1s cubic-bezier(.19,1,.22,1);
  background:var(--look,
    radial-gradient(ellipse 55% 55% at 22% 18%,rgb(var(--gold-rgb) / .22),transparent 62%)),
    radial-gradient(ellipse 65% 65% at 82% 88%,rgb(var(--gold-deep-rgb) / .26),transparent 64%),
    linear-gradient(140deg,#16161C,#0C0C10)}
.shot::after{content:'';position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgb(var(--fg-rgb) / .05) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--fg-rgb) / .05) 1px,transparent 1px);
  background-size:26px 26px}
.shot-ui{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;padding:16px;gap:12px}
.shot-bar{display:flex;gap:5px;align-items:center}
.shot-bar i{width:7px;height:7px;border-radius:50%;background:rgb(var(--fg-rgb) / .35)}
.shot-bar u{flex:1;height:8px;border-radius:4px;background:rgb(var(--fg-rgb) / .14);margin-left:10px}
.shot-body{flex:1;display:flex;gap:12px;min-height:0}
.shot-body u{display:block;border-radius:6px;background:rgb(var(--fg-rgb) / .10);border:1px solid rgb(var(--fg-rgb) / .07)}
.shot-body .c1{width:24%}
.shot-body .c2{flex:1;background:linear-gradient(135deg,rgb(var(--gold-rgb) / .42),rgb(var(--gold-rgb) / .06));border-color:rgb(var(--gold-rgb) / .25)}
.shot-lines{display:flex;flex-direction:column;gap:7px}
.shot-lines u{height:6px;border-radius:4px;background:rgb(var(--fg-rgb) / .18)}
.shot-lines u:nth-child(2){width:70%}.shot-lines u:nth-child(3){width:42%;background:rgb(var(--gold-rgb) / .75)}
/* Vraie capture : elle remplace le gabarit dès que le fichier existe
   dans assets/img/projets/ (voir app/Media.php). */
.shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;
  transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.wcard:hover .shot-img,.case-media:hover .shot-img{transform:scale(1.05)}
/* Gabarit en format téléphone : une seule colonne, pas de barre d'onglets */
.shot-ui.mob{padding:20px 18px}
.shot-ui.mob .shot-bar u{margin-left:0;height:6px;width:46%;flex:none;border-radius:3px}
.shot-ui.mob .shot-body{flex-direction:column}
.shot-ui.mob .shot-body .c2{width:100%;flex:1}
.ph{position:absolute;right:10px;top:10px;z-index:3;font-family:var(--f-mono);font-size:.5rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgb(var(--fg-rgb) / .42);background:rgb(var(--bg-rgb) / .6);border:1px solid var(--line-soft);
  padding:4px 8px;border-radius:4px;background:rgb(var(--bg-rgb) / .78)}

/* ---------- PROCESS ---------- */
.proc{background:var(--ink-2);border-block:1px solid var(--line-soft)}
.proc-cols{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,80px);align-items:start}
.proc-list{position:relative;display:grid;gap:0}
.proc-visual{position:sticky;top:120px;border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;background:var(--ink-3)}
.proc-visual .pv-media{position:relative;aspect-ratio:4/3;overflow:hidden}
.pv-media .peek-img{position:absolute;inset:0;z-index:5;width:100%;height:100%;
  object-fit:contain;object-position:50% 50%;opacity:0;transition:opacity .5s var(--ease)}
.proc-visual .pv-body{padding:24px 26px 26px;border-top:1px solid var(--line-soft);background:var(--ink-2)}
.pv-step{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px}
.pv-title{font-family:var(--f-display);font-size:1.45rem;font-weight:700;line-height:1.15;min-height:2.4em;
  transition:opacity .4s var(--ease),transform .5s var(--ease)}
.pv-title.swap{opacity:0;transform:translateY(10px)}
.pv-bar{height:2px;background:var(--line-soft);margin-top:20px;overflow:hidden;border-radius:2px}
.pv-bar i{display:block;height:100%;width:100%;transform:scaleX(.25);transform-origin:left;
  background:linear-gradient(90deg,var(--gold),var(--gold-lt));transition:transform .6s var(--ease)}
@media (max-width:1000px){.proc-cols{grid-template-columns:1fr}.proc-visual{display:none}}
.proc-line{position:absolute;left:19px;top:14px;bottom:14px;width:1px;background:var(--line-soft)}
.proc-line i{position:absolute;top:0;left:0;width:100%;height:100%;transform:scaleY(0);transform-origin:top;
  background:linear-gradient(var(--gold),var(--gold-lt));box-shadow:0 0 14px rgb(var(--gold-rgb) / .7);will-change:transform}
.proc-item{display:grid;grid-template-columns:40px 1fr;gap:clamp(18px,3vw,48px);padding:clamp(22px,3vw,38px) 0;align-items:start}
.proc-dot{width:39px;height:39px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  background:var(--ink-2);font-family:var(--f-mono);font-size:.6rem;color:var(--muted);transition:.55s var(--ease);z-index:1}
.proc-item.on .proc-dot{border-color:var(--gold);color:var(--ink);background:var(--gold);box-shadow:0 0 0 6px rgb(var(--gold-rgb) / .12)}
.proc-body h3{font-family:var(--f-display);font-size:clamp(1.15rem,2.2vw,1.75rem);font-weight:700;margin-bottom:8px;transition:color .5s}
.proc-item.on .proc-body h3{color:var(--gold)}
.proc-body p{color:var(--muted);max-width:56ch;font-size:.96rem}
.proc-body .dur{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-soft);border-radius:100px;padding:4px 10px;display:inline-block;margin-top:12px}

/* ---------- RÉALISATIONS ---------- */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,26px);align-items:start}
.wcard{position:relative;grid-column:span 6;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft);
  background:var(--ink-3);transition:border-color .6s var(--ease),transform .8s var(--ease);
  transform-style:preserve-3d}
.wcard:hover{border-color:var(--line)}
.wcard.w7{grid-column:span 7}
.wcard.w5{grid-column:span 5}
.wcard.w12{grid-column:span 12}
.wcard-media{position:relative;aspect-ratio:16/10;overflow:hidden}
.wcard.w5 .wcard-media{aspect-ratio:4/3}
.wcard.w12 .wcard-media{aspect-ratio:21/8}
.wcard:hover .shot{--sc:1.15}
.wcard-veil{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgb(var(--bg-rgb) / .9) 4%,transparent 55%);opacity:.9}
.wcard-body{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(18px,2vw,28px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.wcard-body h3{font-family:var(--f-display);font-size:clamp(1.1rem,1.8vw,1.6rem);font-weight:700;line-height:1.1}
.wcard-body .meta{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:7px;display:block}
.wcard-arrow{width:40px;height:40px;border-radius:50%;background:rgb(var(--fg-rgb) / .06);border:1px solid var(--line-soft);
  display:grid;place-items:center;color:var(--bone);flex:0 0 40px;
  transition:background .5s,color .5s,transform .6s var(--ease)}
.wcard:hover .wcard-arrow{background:var(--gold);color:var(--ink);transform:rotate(-45deg)}
.wcard-arrow svg{width:14px;height:14px}
@media (max-width:820px){.wcard,.wcard.w7,.wcard.w5,.wcard.w12{grid-column:span 12}
  .wcard.w12 .wcard-media{aspect-ratio:16/10}}

/* ---------- CHIFFRES ---------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft)}
.num{background:var(--ink);padding:clamp(28px,4vw,54px) clamp(18px,2.5vw,34px)}
.num b{display:block;font-family:var(--f-display);font-size:clamp(2.1rem,4.6vw,3.7rem);font-weight:900;color:var(--gold);line-height:1;letter-spacing:-.03em}
.num span{display:block;margin-top:10px;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media (max-width:760px){.nums{grid-template-columns:repeat(2,1fr)}}

/* ---------- TÉMOIGNAGES ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.quote{border:1px solid var(--line-soft);border-radius:12px;padding:clamp(24px,2.6vw,36px);background:var(--ink-2);
  transition:border-color .6s,transform .7s var(--ease)}
.quote:hover{border-color:var(--line);transform:translateY(-5px)}
.quote .qm{font-family:var(--f-display);font-size:2.6rem;color:var(--gold);line-height:.7;display:block;margin-bottom:16px}
.quote p{color:rgb(var(--fg-rgb) / .78);font-size:.98rem;margin-bottom:22px}
.quote .who{display:flex;align-items:center;gap:12px}
.quote .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--gold-deep),var(--ink-4));flex:0 0 38px;
  display:grid;place-items:center;font-family:var(--f-mono);font-size:.62rem;color:var(--gold)}
.quote .who b{display:block;font-size:.86rem}
.quote .who span{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}

/* ---------- OFFRES ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);align-items:stretch}
.plan{position:relative;border:1px solid var(--line-soft);border-radius:14px;padding:clamp(26px,2.8vw,40px);
  background:var(--ink-2);display:flex;flex-direction:column;transition:border-color .6s,transform .7s var(--ease),background .6s}
.plan:hover{border-color:var(--line);transform:translateY(-6px)}
.plan.hi{background:linear-gradient(170deg,rgb(var(--gold-rgb) / .13),var(--ink-2) 55%);border-color:var(--line)}
.plan-flag{position:absolute;top:-1px;right:22px;font-family:var(--f-mono);font-size:.53rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--gold);color:var(--ink);padding:5px 12px;border-radius:0 0 6px 6px}
.plan h3{font-family:var(--f-display);font-size:1.5rem;font-weight:700;margin-bottom:6px}
.plan .sub{color:var(--muted);font-size:.88rem;margin-bottom:22px}
.plan .price{font-family:var(--f-display);font-size:clamp(2rem,3.4vw,2.9rem);font-weight:900;color:var(--gold);line-height:1;letter-spacing:-.03em}
.plan .price small{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;color:var(--muted);display:block;margin-top:8px;text-transform:uppercase}
.plan ul{list-style:none;margin:26px 0 30px;display:flex;flex-direction:column;gap:11px;flex:1}
.plan li{display:flex;gap:11px;font-size:.92rem;color:rgb(var(--fg-rgb) / .74);align-items:flex-start}
.plan li svg{width:14px;height:14px;flex:0 0 14px;margin-top:4px;color:var(--gold)}
@media (max-width:900px){.plans{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line-soft)}
.qa{border-bottom:1px solid var(--line-soft)}
.qa-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:22px;text-align:left;
  padding:clamp(20px,2.4vw,30px) 0;font-family:var(--f-display);font-size:clamp(1.05rem,1.9vw,1.5rem);font-weight:700;
  transition:color .4s}
.qa-q:hover{color:var(--gold)}
.qa-ico{position:relative;width:34px;height:34px;flex:0 0 34px;border:1px solid var(--line);border-radius:50%;transition:.5s var(--ease)}
.qa-ico::before,.qa-ico::after{content:'';position:absolute;top:50%;left:50%;background:var(--gold);transition:.45s var(--ease)}
.qa-ico::before{width:12px;height:1.5px;margin:-.75px 0 0 -6px}
.qa-ico::after{width:1.5px;height:12px;margin:-6px 0 0 -.75px}
.qa.open .qa-ico{background:var(--gold);transform:rotate(90deg)}
.qa.open .qa-ico::before{background:var(--ink)}
.qa.open .qa-ico::after{opacity:0}
.qa-a{max-height:0;overflow:hidden;transition:max-height .65s var(--ease)}
.qa-a p{color:var(--muted);max-width:70ch;padding-bottom:26px;font-size:.98rem}

/* ---------- CTA FINAL ---------- */
.final{position:relative;text-align:center;overflow:hidden;padding-block:clamp(90px,13vw,190px)}
.final::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 65% at 50% 55%,rgb(var(--gold-rgb) / .16),transparent 68%)}
.final h2{position:relative;font-family:var(--f-display);font-weight:900;
  font-size:clamp(2.3rem,8vw,6.4rem);line-height:.96;letter-spacing:-.03em;margin-bottom:26px}
.final h2 em{font-style:italic;font-weight:400;color:var(--gold)}
.final p{position:relative;color:var(--muted);max-width:46ch;margin:0 auto 40px}
.final .btns{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.magnet{display:inline-block;will-change:transform}

/* ---------- FOOTER ---------- */
/* ---------- Pied de page : même rendu que les heros ----------
   Le canvas occupe tout le pied de page, un voile le calme pour que le
   texte reste lisible, et le mot TOMY'S PROD passe par-dessus. Le pied de
   page reste sombre en mode clair, comme les heros. */
footer{position:relative;isolation:isolate;overflow:hidden;
  border-top:1px solid var(--line-soft);background:var(--ink-2)}
footer.has-gl{background:var(--ink)}
.foot-gl{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.4s var(--ease)}
.foot-gl.ready{opacity:1}
.foot-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,var(--ink) 0%,rgb(var(--bg-rgb) / .72) 20%,rgb(var(--bg-rgb) / .58) 55%,rgb(var(--bg-rgb) / .86) 100%),
    linear-gradient(100deg,rgb(var(--bg-rgb) / .70) 0%,rgb(var(--bg-rgb) / .20) 46%,transparent 72%),
    radial-gradient(ellipse 70% 60% at 50% 108%,rgb(var(--gold-rgb) / .12),transparent 66%)}
footer .wrap{position:relative;z-index:2}
:root[data-theme="light"] footer.has-gl{
  --bone:#F4F1EA;
  --muted:#8B877F;
  --fg-rgb:244 241 234;
  --bg-rgb:8 8 10;
  --ink:#08080A;
  --ink-2:#0D0D10;
  --gold:#C9A84C;
  --gold-rgb:201 168 76;
  --line:rgb(201 168 76 / .16);
  --line-soft:rgb(244 241 234 / .08);
  background:#08080A;color:#F4F1EA}

.f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(26px,3vw,50px);padding-block:clamp(50px,6vw,84px)}
/* Les titres de colonnes du pied de page étaient des h5 posés juste après
   un h1, h2 ou h3 : saut de niveau sur les 9 pages. Passés en h2, avec
   la même apparence. */
.f-top .foot-h{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;font-weight:400}
.f-top a,.f-top p{display:block;color:var(--muted);font-size:.9rem;margin-bottom:10px;transition:color .35s;width:fit-content}
.f-top a:hover{color:var(--bone)}
.f-social{display:flex;gap:9px;margin-top:20px}
.f-social a{width:38px;height:38px;border:1px solid var(--line-soft);border-radius:50%;display:grid;place-items:center;
  color:var(--muted);margin:0;transition:.4s var(--ease)}
.f-social a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.f-social svg{width:15px;height:15px}
.f-word{padding-bottom:26px;overflow:hidden}
.f-word svg{width:100%;height:auto;display:block}
.f-word text{font-family:var(--f-display);font-weight:900;fill:none;stroke:rgb(var(--gold-rgb) / .28);stroke-width:.5}
.f-bot{border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding-block:20px;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.13em;color:var(--muted);text-transform:uppercase}
.f-bot a{color:var(--muted);transition:color .35s}
.f-bot a:hover{color:var(--gold)}
@media (max-width:900px){.f-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.f-top{grid-template-columns:1fr}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:flex}
  .topbar .btn.sm{display:none}
}
@media (max-width:700px){
  .srv-row{grid-template-columns:54px 1fr auto;gap:14px}
  .srv-go{width:42px;height:42px;flex-basis:42px}
  .hero-foot{padding-bottom:26px}
  .lang{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rl>span{transform:none}.fade{opacity:1;transform:none}
}

/* ============================================================
   V3 — MODULES AVANCÉS
   ============================================================ */

/* ---------- SMOOTH SCROLL ---------- */
html.smooth{scroll-behavior:auto}

/* ---------- TRANSITIONS DE PAGE ---------- */
/* ============================================================
   TRANSITION DE PAGE : VOILE UNIQUE
   ------------------------------------------------------------
   L'ancien rideau était fait de cinq panneaux décalés. Par
   construction, tant que les cinq n'étaient pas fermés, on voyait
   la page entre eux : c'est le « trou » signalé. Aucun réglage de
   durée ne pouvait le supprimer, seul le principe le pouvait.

   Un seul panneau monte donc désormais, d'un bloc, avec un bord
   supérieur courbe qui s'aplatit en arrivant. Il ne peut plus rien
   laisser passer : à aucun instant il n'y a deux morceaux de voile
   avec du vide entre eux. À la sortie il continue sa course vers le
   haut : le mouvement est continu, jamais un aller-retour.
   ============================================================ */
/* ------------------------------------------------------------
   ANIMATIONS, ET NON TRANSITIONS.

   Le voile était piloté par des « transitions » CSS. Une transition
   marche dans les deux sens : quand on retirait la classe qui le
   tenait en haut de l'écran, il REVENAIT vers le bas en glissant,
   et on voyait ce troisième mouvement descendant à la fin. Le
   rustine (une classe posée le temps d'une image pour couper la
   transition) dépendait d'un réglage au millième de seconde et du
   fait que le navigateur ait bien la dernière feuille de style.

   Une « animation » CSS, elle, ne repasse jamais à l'envers : quand
   la classe part, l'élément retrouve son état de repos d'un coup,
   sans rien dessiner. Le troisième mouvement ne peut donc plus
   exister, quels que soient les réglages. Les deux montées, elles,
   sont identiques au pixel près.
   ------------------------------------------------------------ */
.tr-veil{position:fixed;left:-1px;right:-1px;top:-1px;bottom:-1px;z-index:9995;pointer-events:none;
  background:var(--ink-2);
  transform:translate3d(0,102%,0);
  border-radius:50% 50% 0 0 / 15% 15% 0 0;
  box-shadow:0 -1px 0 rgb(var(--gold-rgb) / .30),0 -46px 110px -24px rgb(var(--gold-rgb) / .16);
  will-change:transform,border-radius}
.tr-veil::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 60% at 50% 108%,rgb(var(--gold-rgb) / .18),transparent 62%)}

/* 1. Le voile monte et couvre l'écran */
body.tr-out .tr-veil{animation:veilUp .54s cubic-bezier(.83,0,.17,1) forwards}
@keyframes veilUp{
  from{transform:translate3d(0,102%,0);border-radius:50% 50% 0 0 / 15% 15% 0 0}
  to  {transform:translate3d(0,0,0);border-radius:0}}

/* 2. Il continue sa course vers le haut et sort de l'écran */
body.tr-in .tr-veil{animation:veilOut .66s cubic-bezier(.76,0,.24,1) forwards;
  box-shadow:0 1px 0 rgb(var(--gold-rgb) / .30),0 46px 110px -24px rgb(var(--gold-rgb) / .16)}
@keyframes veilOut{
  from{transform:translate3d(0,0,0);border-radius:0}
  to  {transform:translate3d(0,-102%,0);border-radius:0 0 50% 50% / 0 0 15% 15%}}

/* 3. Il n'y a pas de trois. Classe retirée, retour au repos instantané. */

/* Marque et nom de la page vers laquelle on va : même principe */
.tr-veil-in{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:20px;
  opacity:0;transform:translateY(16px)}
body.tr-out .tr-veil-in{animation:veilTxtIn .34s var(--ease) .2s forwards}
@keyframes veilTxtIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
body.tr-in .tr-veil-in{animation:veilTxtOut .22s var(--ease) forwards}
@keyframes veilTxtOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-14px)}}
.tr-mark{width:44px;height:44px;fill:none;stroke:var(--gold);stroke-width:3.4;
  animation:trspin 3.4s linear infinite}
@keyframes trspin{to{transform:rotate(360deg)}}
.tr-label{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--muted);min-height:1em}
@media (prefers-reduced-motion:reduce){
  .tr-mark{animation:none}
  body.tr-out .tr-veil,body.tr-in .tr-veil{animation-duration:.25s}
}
#app{min-height:60vh}
body.tr-out #app{pointer-events:none}

/* ---------- HERO WEBGL ---------- */
.hero-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.2s var(--ease)}
.hero-canvas.ready{opacity:1}
.hero .hero-inner,.hero .hero-foot{position:relative;z-index:3}
.hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgb(var(--bg-rgb) / .90) 0%,rgb(var(--bg-rgb) / .46) 44%,rgb(var(--bg-rgb) / .06) 74%)}

/* titre déformable au survol */
.warp{display:inline-block;white-space:pre}
.warp span{display:inline-block;will-change:transform;transition:transform .45s cubic-bezier(.19,1,.22,1)}
.warp.live span{transition:transform .12s linear}

/* ---------- SECTION SCROLL HORIZONTAL ---------- */
.hz{position:relative;background:var(--ink-2);border-block:1px solid var(--line-soft)}
.hz-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hz-head{padding:0 var(--pad);margin-bottom:clamp(24px,4vh,48px);display:flex;justify-content:space-between;
  align-items:flex-end;gap:24px;flex-wrap:wrap}
.hz-head h2{font-family:var(--f-display);font-size:clamp(1.8rem,4vw,3.4rem);font-weight:900;letter-spacing:-.025em;line-height:1.02}
.hz-head h2 em{font-style:italic;font-weight:400;color:var(--gold)}
.hz-prog{display:flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.hz-prog u{display:block;width:clamp(80px,14vw,190px);height:1px;background:var(--line-soft);position:relative;text-decoration:none}
.hz-prog u i{position:absolute;inset:0;transform:scaleX(0);transform-origin:left;
  background:var(--gold);box-shadow:0 0 12px rgb(var(--gold-rgb) / .8);will-change:transform}
.hz-track{display:flex;gap:clamp(16px,2vw,32px);padding-inline:var(--pad);will-change:transform}
.hz-card{flex:0 0 clamp(260px,26vw,380px);border:1px solid var(--line-soft);border-radius:14px;
  background:var(--ink-3);padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:14px;
  min-height:clamp(300px,42vh,420px);transition:border-color .5s,background .5s}
.hz-card:hover{border-color:var(--line);background:var(--ink-4)}
.hz-card .hz-n{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.24em;color:var(--gold)}
.hz-card h3{font-family:var(--f-display);font-size:clamp(1.2rem,1.9vw,1.6rem);font-weight:700;line-height:1.15}
.hz-card p{color:var(--muted);font-size:.94rem;flex:1}
.hz-card .hz-tag{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);border-top:1px solid var(--line-soft);padding-top:14px}
.hz-card.accent{background:linear-gradient(165deg,rgb(var(--gold-rgb) / .14),var(--ink-3) 60%);border-color:var(--line)}
@media (max-width:820px){
  .hz-sticky{position:static;height:auto;padding-block:clamp(60px,10vw,110px)}
  .hz-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;transform:none!important}
  .hz-card{scroll-snap-align:start;flex-basis:78vw}
  .hz-spacer{display:none}
}

/* ---------- TILT 3D ---------- */
.tilt{perspective:1100px}
.tilt-in{position:relative;transform-style:preserve-3d;transition:transform .7s var(--ease);will-change:transform}
.tilt.live .tilt-in{transition:transform .1s linear}
.tilt-layer{transform:translateZ(38px)}
.tilt-gloss{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle 260px at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 65%)}
.tilt:hover .tilt-gloss{opacity:1}

/* ---------- BOUTON RETOUR HAUT ---------- */
.totop{position:fixed;right:22px;bottom:22px;z-index:880;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:rgb(var(--bg2-rgb) / .8);backdrop-filter:blur(10px);color:var(--gold);
  display:grid;place-items:center;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),background .4s}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--gold);color:var(--ink)}
.totop svg{width:15px;height:15px;transform:rotate(-90deg)}

/* ---------- FORMULAIRES ---------- */
.form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:1200px;margin:0 auto;
  border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;background:var(--ink-2)}
.form-side{position:relative;min-height:420px;overflow:hidden}
.form-side .shot{position:absolute;inset:0}
/* Le panneau .shot est une maquette de navigateur : il reste SOMBRE dans
   les deux thèmes. Le texte posé dessus doit donc rester clair même en mode
   clair, sinon on lisait du texte sombre sur un fond sombre (mesuré à
   1,82:1 sur le paragraphe, il en faut 4,5:1). Couleurs figées ici, pas de
   variable de thème, et le voile est figé lui aussi. */
.form-side-txt{position:absolute;inset:auto 0 0 0;z-index:3;padding:clamp(24px,3vw,40px);
  background:linear-gradient(to top,rgb(8 8 10 / .96) 30%,rgb(8 8 10 / .78) 70%,transparent);
  color:#F4F1EA}
.form-side-txt h3{font-family:var(--f-display);font-size:1.5rem;font-weight:700;margin-bottom:8px;color:#F4F1EA}
.form-side-txt p{color:#B7B2A8;font-size:.92rem}
.form-side-txt a{color:#EBD08A}
.form-body{padding:clamp(28px,3.4vw,48px)}
.form-body h2{font-family:var(--f-display);font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:900;margin-bottom:8px}
.form-body>p.lede{color:var(--muted);margin-bottom:28px;font-size:.95rem}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-field{display:flex;flex-direction:column;gap:7px}
.f-field.full{grid-column:1/-1}
.f-field label{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.f-field input,.f-field select,.f-field textarea{
  padding:13px 15px;background:var(--ink-3);color:var(--bone);font-family:var(--f-body);font-size:.95rem;
  border:1px solid rgb(var(--fg-rgb) / .09);border-radius:10px;width:100%;
  transition:border-color .35s,box-shadow .35s,background .35s}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  outline:none;border-color:var(--gold);background:var(--ink-4);box-shadow:0 0 0 3px rgb(var(--gold-rgb) / .13)}
.f-field textarea{min-height:130px;resize:vertical}
.f-field select option{background:var(--ink-2)}
.f-field .err{font-size:.78rem;color:#FCA5A5}
.f-field.bad input,.f-field.bad textarea,.f-field.bad select{border-color:rgba(239,68,68,.55)}
.f-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-legal{font-size:.78rem;color:var(--muted);margin-top:18px;line-height:1.6}
.f-legal a{color:var(--gold)}
.flash{max-width:1200px;margin:24px auto;padding:16px 22px;border-radius:12px;font-size:.95rem;
  display:flex;align-items:center;gap:12px}
.flash svg{width:18px;height:18px;flex:0 0 18px}
.flash.ok{background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.35);color:#6EE7B7}
.flash.ko{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.32);color:#FCA5A5}
@media (max-width:900px){.form-wrap{grid-template-columns:1fr}.form-side{min-height:240px;order:-1}.f-grid{grid-template-columns:1fr}}

/* ---------- PAGE LÉGALE ---------- */
/* ---------- Pages légales : sommaire latéral collant ----------
   Le sommaire est construit à partir des <h2> par assets/js/app.js
   (module 27) : aucun contenu à maintenir en double. */
.doc{display:grid;grid-template-columns:minmax(180px,220px) minmax(0,1fr);
  gap:clamp(30px,5vw,80px);align-items:start;max-width:1120px;margin:0 auto;
  padding-block:clamp(40px,6vw,80px)}
.doc-nav{position:sticky;top:112px;display:grid;gap:2px}
.doc-nav b{display:block;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:12px}
.doc-nav a{position:relative;display:block;padding:7px 0 7px 16px;font-size:.86rem;
  color:var(--muted);line-height:1.4;transition:color .35s var(--ease),padding-left .4s var(--ease)}
.doc-nav a::before{content:'';position:absolute;left:0;top:50%;width:7px;height:1px;
  background:var(--line-soft);transform:translateY(-50%) scaleX(.5);transform-origin:left;
  transition:background .35s,transform .4s var(--ease)}
.doc-nav a:hover{color:var(--bone);padding-left:21px}
.doc-nav a.on{color:var(--gold)}
.doc-nav a.on::before,.doc-nav a:hover::before{background:var(--gold);transform:translateY(-50%) scaleX(1)}
@media (max-width:900px){
  .doc{grid-template-columns:1fr}
  .doc-nav{position:static;display:flex;flex-wrap:wrap;gap:6px 14px;
    padding-bottom:22px;border-bottom:1px solid var(--line-soft);margin-bottom:26px}
  .doc-nav a{padding:4px 0 4px 14px;font-size:.8rem}
}
.legal{max-width:820px;padding-block:0}
.legal h2{scroll-margin-top:120px}
.legal h2{font-family:var(--f-display);font-size:clamp(1.2rem,2vw,1.55rem);font-weight:700;color:var(--gold);
  margin:44px 0 14px;padding-left:16px;border-left:2px solid var(--gold)}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--muted);margin-bottom:14px;font-size:.98rem;line-height:1.75}
.legal ul{padding-left:20px}
.legal a{color:var(--gold)}
.legal strong{color:var(--bone);font-weight:600}

/* ---------- 404 ----------
   Le chiffre est un trou découpé dans le fond de la page (masque SVG) :
   la fumée dorée du hero est le seul élément vivant de l'écran. */
.e4{padding:clamp(96px,14vh,180px) 0 clamp(80px,10vh,140px);text-align:center}
.e4-in{display:flex;flex-direction:column;align-items:center;gap:0}
.e4 .section-eyebrow{margin-bottom:clamp(24px,4vh,44px)}

.e4-num{width:min(1100px,94vw);margin:0 0 clamp(18px,3vh,34px)}
.e4-num .tilt-in{position:relative;aspect-ratio:1200 / 340}
.e4-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.e4-cut{position:absolute;inset:0;width:100%;height:100%}
.e4-veil{fill:var(--ink)}
.e4-glyph{font-family:var(--f-display);font-size:290px;font-weight:900;
  text-anchor:middle;fill:#000;letter-spacing:.01em}
.e4-rim{font-family:var(--f-display);font-size:290px;font-weight:900;
  text-anchor:middle;letter-spacing:.01em;fill:none;
  stroke:rgb(var(--gold-rgb) / .5);stroke-width:1.1;
  vector-effect:non-scaling-stroke}

/* Sur cette page, le chiffre est la seule source de lumière :
   l'ambiance dorée du reste du site s'efface pour ne pas créer
   de rectangle visible derrière le voile. */
body:has(#app[data-page="404"]) .amb{opacity:0;transition:opacity .9s var(--ease)}

.e4 h1{margin-bottom:14px}
.e4 .page-subtitle{max-width:52ch;margin:0 auto}

/* L'adresse réellement demandée : le visiteur voit qu'on l'a lue */
.e4-url{margin:clamp(26px,4vh,40px) 0 clamp(34px,5vh,52px);display:inline-flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:12px;font-family:var(--f-mono);font-size:.72rem}
.e4-url span{color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.e4-url code{padding:8px 14px;border:1px solid var(--line);border-radius:999px;
  background:rgb(var(--bg2-rgb) / .7);color:rgb(var(--fg-rgb) / .6);
  text-decoration:line-through;text-decoration-color:rgb(var(--gold-rgb) / .8);
  max-width:min(560px,86vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Les sorties : cinq vraies portes plutôt qu'un seul bouton « retour » */
.e4-exits{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-bottom:clamp(56px,9vh,110px)}
.e4-exit{display:inline-flex;align-items:center;gap:12px;padding:14px 22px 14px 18px;
  border:1px solid var(--line-soft);border-radius:999px;background:rgb(var(--bg2-rgb) / .6);
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.e4-exit i{font-family:var(--f-mono);font-size:.64rem;font-style:normal;color:var(--gold);
  letter-spacing:.1em;opacity:.8}
.e4-exit b{font-weight:500;font-size:.94rem}
.e4-exit svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;
  opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.e4-exit:hover{border-color:rgb(var(--gold-rgb) / .5);background:rgb(var(--gold-rgb) / .07);transform:translateY(-2px)}
.e4-exit:hover svg{opacity:1;transform:none}

/* Trois projets réels : une page d'erreur qui vend encore */
.e4-work{width:100%}
.e4-work .idx{display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.e4-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;text-align:left}
.e4-card{display:block;border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;
  background:rgb(var(--bg2-rgb) / .6);padding-bottom:18px;
  transition:border-color .5s var(--ease),transform .5s var(--ease)}
.e4-shot{display:block;aspect-ratio:16 / 10;overflow:hidden;background:var(--ink-3)}
.e4-shot img,.e4-void{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.e4-card b{display:block;padding:16px 18px 4px;font-weight:500;font-size:1rem}
.e4-card em{display:block;padding:0 18px;font-style:normal;font-size:.8rem;color:var(--muted)}
.e4-card:hover{border-color:rgb(var(--gold-rgb) / .4);transform:translateY(-4px)}
.e4-card:hover img{transform:scale(1.05)}

@media (max-width:640px){
  .e4-glyph,.e4-rim{font-size:280px}
  .e4-url{font-size:.66rem}
}

/* Ancien bloc conservé : d'autres vues peuvent encore l'utiliser */
.e404{min-height:70svh;display:grid;place-items:center;text-align:center;padding:var(--pad)}
.e404 b{display:block;font-family:var(--f-display);font-size:clamp(5rem,18vw,13rem);font-weight:900;
  line-height:.85;color:transparent;-webkit-text-stroke:1px var(--gold);margin-bottom:20px}

/* ---------- SKIP LINK (a11y) ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:10001;background:var(--gold);color:var(--ink);
  padding:12px 20px;border-radius:0 0 8px 0;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.skip:focus{left:0}

/* ---------- COOKIES ---------- */
.ck{position:fixed;left:22px;bottom:22px;z-index:890;max-width:400px;background:rgb(var(--bg2-rgb) / .94);
  backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  transform:translateY(140%);transition:transform .8s var(--ease);box-shadow:0 30px 70px -30px #000}
.ck.on{transform:none}
.ck p{font-size:.86rem;color:var(--muted);margin-bottom:16px;line-height:1.6}
.ck p a{color:var(--gold)}
.ck .ck-btns{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:560px){.ck{left:12px;right:12px;bottom:12px;max-width:none}}

/* ---------- EN-TÊTE DES PAGES INTERNES ----------
   (le header est fixed sur toutes les pages : il faut dégager le haut) */
/* ============================================================
   HERO DES PAGES SECONDAIRES
   ------------------------------------------------------------
   Même moteur que l'accueil : le shader de fumée dorée tourne dans
   un canvas #heroGL, repris automatiquement par bindHero() à chaque
   changement de page. Le hero est plus court que celui de l'accueil
   (58 vh) pour que le contenu reste visible d'emblée.
   ============================================================ */
.phero{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(430px,58vh,640px);display:flex;flex-direction:column;
  padding:clamp(112px,13vh,160px) var(--pad) clamp(26px,4vh,44px);
  background:var(--ink);border-bottom:1px solid var(--line-soft)}
.phero-gl{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.3s var(--ease)}
.phero-gl.ready{opacity:1}
.phero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 76% 86% at 50% 42%,rgb(var(--bg-rgb) / .84),rgb(var(--bg-rgb) / .40) 56%,transparent 80%),
    linear-gradient(to bottom,rgb(var(--bg-rgb) / .88) 0%,transparent 24%,transparent 58%,var(--ink) 100%)}
.phero-net{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:clamp(64px,7vw,116px) clamp(64px,7vw,116px);
  mask-image:radial-gradient(ellipse 74% 100% at 50% 0%,#000 8%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 74% 100% at 50% 0%,#000 8%,transparent 72%)}
.phero-in{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;
  align-items:center;max-width:1500px;width:100%;margin:0 auto;text-align:center}
.phero-in>*{max-width:100%}
.phero-foot{position:relative;z-index:2;max-width:1500px;width:100%;margin:0 auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* Fil d'Ariane */
.crumb{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:22px;
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.crumb a{transition:color .35s}
.crumb a:hover{color:var(--gold)}
.crumb i{display:block;width:16px;height:1px;background:var(--line-soft)}
.crumb b{color:var(--gold);font-weight:400}

.section-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
  font-family:var(--f-mono);font-size:.6rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.section-eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgb(var(--gold-rgb) / .5);animation:pdot 2.6s var(--ease) infinite}
@keyframes pdot{0%{box-shadow:0 0 0 0 rgb(var(--gold-rgb) / .5)}70%,100%{box-shadow:0 0 0 9px rgb(var(--gold-rgb) / 0)}}

.title-pages{font-family:var(--f-display);font-weight:900;
  font-size:clamp(2.2rem,6vw,4.8rem);line-height:1.02;letter-spacing:-.03em}
.title-pages em,.title-pages span.g{font-style:italic;font-weight:400;color:var(--gold)}
.page-subtitle{margin:22px auto 0;max-width:58ch;color:rgb(var(--fg-rgb) / .76);
  font-size:clamp(1rem,1.15vw,1.12rem)}

/* Trois repères sous le titre, alimentés par les données réelles */
.phero-facts{display:flex;gap:clamp(16px,3vw,44px);flex-wrap:wrap;justify-content:center;
  margin-top:clamp(26px,3.5vh,44px)}
.phero-fact{display:flex;flex-direction:column;gap:5px;align-items:center}
.phero-fact b{font-family:var(--f-display);font-size:clamp(1rem,1.5vw,1.3rem);font-weight:700}
.phero-fact span{font-family:var(--f-mono);font-size:.53rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}

/* Entrée : jouée au chargement comme à chaque changement de page,
   mise en pause tant que le préloader est visible. */
@keyframes pheroUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.phero .crumb,.phero .section-eyebrow,.phero .page-subtitle,
.phero .phero-facts,.phero .phero-foot>*{
  opacity:0;animation:pheroUp 1s var(--ease) forwards;animation-play-state:paused}
body.loaded .phero .crumb,body.loaded .phero .section-eyebrow,
body.loaded .phero .page-subtitle,body.loaded .phero .phero-facts,
body.loaded .phero .phero-foot>*{animation-play-state:running}
.phero .crumb{animation-delay:.10s}
.phero .section-eyebrow{animation-delay:.18s}
.phero .page-subtitle{animation-delay:.52s}
.phero .phero-facts{animation-delay:.62s}
.phero .phero-foot>*{animation-delay:.72s}
.phero .title-pages .rl>span{transition-duration:1.05s}

/* L'index de section est décoratif : il disparaît sur les pages où il
   recouvrirait du contenu utile (formulaires, pages légales). */
body:has(#app[data-page="devis"]) .sec-idx,
body:has(#app[data-page="contact"]) .sec-idx,
body:has(#app[data-page="legal"]) .sec-idx,
body:has(#app[data-page="terms"]) .sec-idx{opacity:0 !important;visibility:hidden}

.phero-sig{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted)}
.phero+section,.phero+.wrap,.phero+div{padding-top:clamp(54px,7vw,96px)}
@media (max-width:760px){
  .phero{min-height:auto;padding-bottom:clamp(30px,5vh,48px)}
  .phero-foot{justify-content:center}
  .phero-foot .cue,.phero-sig{display:none}
  .phero-facts{gap:14px 20px}
  .phero-fact b{font-size:1rem}
  .phero-fact span{font-size:.48rem;letter-spacing:.16em}
  .page-subtitle{font-size:.96rem}
}
@media (prefers-reduced-motion:reduce){
  .phero .crumb,.phero .section-eyebrow,.phero .page-subtitle,
  .phero .phero-facts,.phero .phero-foot>*{animation:none;opacity:1}
}

/* ---------- BANDEAU COOKIES : ne doit rien recouvrir ---------- */
.ck{max-width:380px}
@media (max-width:1100px){.ck{left:12px;right:12px;bottom:12px;max-width:none}}

/* ---------- OFFRES : mention « à partir de » ---------- */
.plan .price .from{display:block;margin-bottom:6px;
  font-family:var(--f-mono);font-size:.55rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ---------- FOOTER : signature manuscrite ---------- */
.f-word-img{display:flex;justify-content:center;padding-bottom:34px}
.f-word-img img{width:min(100%,760px);height:auto;opacity:.55;
  filter:brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(543%) hue-rotate(2deg) brightness(92%) contrast(88%);
  transition:opacity .6s var(--ease)}
.f-word-img img:hover{opacity:.85}

/* ============================================================
   V3.1 — NOUVELLES ANIMATIONS + OPTIMISATIONS
   ============================================================ */

/* Note : content-visibility a été retiré volontairement. Sur une page
   pilotée au scroll il fausse la hauteur du document tant qu'une section
   n'a pas été affichée une première fois, ce qui décale la barre de
   progression et empêche les révélations de se déclencher. Le gain de
   performance vient d'ailleurs : suppression des mix-blend-mode et des
   backdrop-filter, et boucle d'animation unique. */

/* ---------- Barre de progression de lecture ---------- */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:9994;pointer-events:none;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-lt));
  transform:scaleX(0);transform-origin:left;will-change:transform}

/* ---------- Index de section ---------- */
.sec-idx{position:fixed;left:var(--pad);bottom:34px;z-index:880;display:flex;align-items:center;gap:12px;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.sec-idx.on{opacity:1;transform:none}
.sec-idx .si-num{color:var(--gold);font-size:.9rem;font-weight:600}
.sec-idx .si-sep{width:26px;height:1px;background:var(--line)}
.sec-idx .si-tot{color:var(--muted)}
.sec-idx .si-name{color:var(--bone);margin-left:6px}
.sec-idx .si-num,.sec-idx .si-name{transition:opacity .18s linear,transform .18s var(--ease)}
.sec-idx.swap .si-num,.sec-idx.swap .si-name{opacity:0;transform:translateY(-6px)}
@media (max-width:900px){.sec-idx{display:none}}

/* ---------- Ambiance : voiles dont l'opacité suit la section ---------- */
.amb{position:fixed;inset:0;z-index:-1;pointer-events:none}
.amb i{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.amb i:nth-child(1){background:radial-gradient(ellipse 80% 60% at 15% 10%,rgb(var(--gold-rgb) / .09),transparent 62%)}
.amb i:nth-child(2){background:radial-gradient(ellipse 70% 70% at 85% 40%,rgb(var(--gold-deep-rgb) / .13),transparent 60%)}
.amb i:nth-child(3){background:radial-gradient(ellipse 90% 60% at 50% 90%,rgb(var(--gold-lt-rgb) / .08),transparent 65%)}
.amb i:nth-child(4){background:radial-gradient(ellipse 75% 75% at 20% 70%,rgb(var(--gold-rgb) / .10),transparent 62%)}

/* ---------- Révélation par volet (clip-path) ---------- */
.clip{clip-path:inset(0 0 100% 0);
  transition:clip-path 1.15s cubic-bezier(.76,0,.24,1)}
.clip.in{clip-path:inset(0 0 0% 0)}
.clip > *{transform:scale(1.08);transition:transform 1.4s cubic-bezier(.19,1,.22,1)}
.clip.in > *{transform:none}

/* ---------- Titres de section découpés en lignes ---------- */
.rl-auto .rl > span{transform:translateY(105%);transition:transform 1.05s var(--ease)}
.rl-auto.in .rl > span{transform:none}

/* ---------- Libellés qui se déchiffrent ---------- */
.scramble{font-variant-ligatures:none}

/* ---------- Halo doré qui suit le curseur (bloc final) ---------- */
.final::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 420px at var(--fx,50%) var(--fy,50%),rgb(var(--gold-rgb) / .13),transparent 70%);
  transition:opacity .6s}

/* ---------- Bloc « une seule personne » ---------- */
.solo{border-block:1px solid var(--line-soft);background:var(--ink-2)}
.solo-in{display:grid;grid-template-columns:clamp(240px,30vw,400px) 1fr;
  gap:clamp(40px,6vw,90px);align-items:center;max-width:1180px;margin:0 auto}

/* Cadre doré en léger décalage derrière la photo : effet portrait
   encadré plutôt qu'une simple vignette perdue dans la grille. */
.solo-frame{position:relative}
.solo-frame::after{content:'';position:absolute;inset:0;z-index:0;
  border:1px solid var(--gold);border-radius:16px;
  transform:translate(20px,20px);
  transition:transform .7s var(--ease)}

.solo-photo{position:relative;z-index:1;width:100%;aspect-ratio:3/4;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow)}
.solo-photo .shot{position:absolute;inset:0}
.solo-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease)}
.solo-frame:hover .solo-photo img{transform:scale(1.04)}

.solo-txt h2{font-family:var(--f-display);font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:900;
  line-height:1.1;letter-spacing:-.02em;margin-bottom:20px}
.solo-txt h2 em{font-style:italic;font-weight:400;color:var(--gold)}
.solo-txt p{color:var(--muted);max-width:58ch;margin-bottom:14px;font-size:1.02rem}
.solo-sign{margin-top:22px;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}

@media (max-width:760px){
  .solo-in{grid-template-columns:1fr;max-width:420px}
  .solo-frame{width:min(280px,72vw);margin:0 auto}
  .solo-frame::after{transform:translate(14px,14px)}
}

/* ---------- Budget (remplace les formules figées) ---------- */
.bud-scale{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;margin-bottom:clamp(34px,4vw,56px)}
.bud-step{background:var(--ink-2);padding:clamp(24px,2.8vw,38px);position:relative;
  transition:background .5s var(--ease)}
.bud-step:hover{background:var(--ink-3)}
.bud-step::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.bud-step.in::before{transform:scaleX(1)}
.bud-step:nth-child(2)::before{transition-delay:.12s}
.bud-step:nth-child(3)::before{transition-delay:.24s}
.bud-range{display:block;font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2.15rem);
  font-weight:900;color:var(--gold);letter-spacing:-.02em;line-height:1;margin-bottom:12px}
.bud-for{display:block;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.bud-step p{color:rgb(var(--fg-rgb) / .72);font-size:.94rem}
@media (max-width:820px){.bud-scale{grid-template-columns:1fr}}

.bud-fact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,50px);align-items:start}
.bud-fact h3{font-family:var(--f-display);font-size:clamp(1.2rem,2vw,1.6rem);font-weight:700;margin-bottom:6px}
.bud-fact > p{color:var(--muted);font-size:.95rem}
.bud-list{list-style:none;display:flex;flex-direction:column;gap:0}
.bud-list li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line-soft);
  color:rgb(var(--fg-rgb) / .78);font-size:.95rem}
.bud-list li:first-child{border-top:1px solid var(--line-soft)}
.bud-list li b{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;color:var(--gold);
  flex:0 0 26px}
@media (max-width:820px){.bud-fact{grid-template-columns:1fr}}

/* ---------- Mode performance réduite ----------
   Activé automatiquement si la machine descend sous 40 images/s. */
.perf-low .fx-grain{animation:none;opacity:.03}
.perf-low .amb,
.perf-low .tilt-gloss,
.perf-low .final::after{display:none}
.perf-low .topbar.stuck{backdrop-filter:none;background:rgb(var(--bg-rgb) / .96)}
.perf-low .cur-ring{transition:none}
.perf-low .hero-bg i{animation:none}

/* ---------- Retour sur le site : ouverture courte, sans logo ---------- */
body.quick .curtain{transition:transform .55s cubic-bezier(.76,0,.24,1),visibility 0s linear .6s}
body.quick .hero .rl > span{transition-duration:.75s}
body.quick .hero .fade{transition-duration:.6s}

/* ---------- Section horizontale : promotion en couche GPU ---------- */
.hz-track{backface-visibility:hidden}
.hz-sticky{transform:translateZ(0)}

/* ============================================================
   PAGES DE SERVICE
   ============================================================ */

/* ---------- Déclaration d'ouverture ---------- */
.state-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,90px);align-items:start}
.state-h{font-family:var(--f-display);font-weight:900;
  font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1.05;letter-spacing:-.028em}
.state-h em{font-style:italic;font-weight:400;color:var(--gold)}
.state-txt p{color:var(--muted);font-size:clamp(1rem,1.15vw,1.08rem);margin-bottom:18px;max-width:56ch}
.state-txt p:first-child{color:rgb(var(--fg-rgb) / .84)}
@media (max-width:860px){.state-in{grid-template-columns:1fr}}

/* ---------- Ce que vous obtenez ---------- */
.deliv{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:14px;overflow:hidden}
.deliv-item{background:var(--ink-2);padding:clamp(26px,2.8vw,40px);position:relative;
  transition:background .5s var(--ease)}
.deliv-item:hover{background:var(--ink-3)}
.deliv-n{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.24em;color:var(--gold);
  display:block;margin-bottom:16px}
.deliv-item h3{font-family:var(--f-display);font-size:clamp(1.1rem,1.7vw,1.4rem);font-weight:700;
  margin-bottom:10px;line-height:1.2}
.deliv-item p{color:var(--muted);font-size:.93rem}
@media (max-width:980px){.deliv{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.deliv{grid-template-columns:1fr}}

/* ---------- Projets mis en avant ----------
   Remplace les tableaux « contexte / problème / solution / résultat » :
   ces pages sont désormais portées par le visuel, pas par du texte à
   rédiger. Chaque projet n'utilise que des informations déjà présentes
   dans app/projects.php. */
.cases{display:grid;gap:clamp(52px,7vw,110px)}
.case{display:grid;grid-template-columns:1.22fr .78fr;gap:clamp(26px,3.6vw,64px);align-items:center}
.case:nth-child(even){grid-template-columns:.78fr 1.22fr}
.case:nth-child(even) .case-media{order:2}
.case-media{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line-soft);
  aspect-ratio:16/10;perspective:900px;background:var(--ink-3);box-shadow:var(--shadow)}
.case-media .tilt-in{position:absolute;inset:0;transform-style:preserve-3d}
.case-n{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.24em;color:var(--gold);display:block;margin-bottom:14px}
.case-body h3{font-family:var(--f-display);font-size:clamp(1.45rem,2.6vw,2.25rem);font-weight:700;
  line-height:1.12;letter-spacing:-.02em}
.case-body h3 a{transition:color .4s var(--ease)}
.case-body h3 a:hover{color:var(--gold)}
.case-meta{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);display:block;margin:10px 0 20px}
.case-sum{color:var(--muted);font-size:.97rem;line-height:1.72;max-width:48ch}
.case-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.case-go{display:inline-flex;align-items:center;gap:11px;margin-top:26px;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);padding-bottom:6px;border-bottom:1px solid var(--line);
  transition:color .4s var(--ease),gap .4s var(--ease),border-color .4s var(--ease)}
.case-go:hover{color:var(--gold);gap:18px;border-color:var(--gold)}
.case-go svg{width:14px;height:14px}
@media (max-width:900px){
  .case,.case:nth-child(even){grid-template-columns:1fr;gap:22px}
  .case:nth-child(even) .case-media{order:0}
}

/* ---------- Page Réalisations : sommaire en lignes ----------
   Pas de bouton rond ni de grosse flèche : la ligne se déplace, un filet
   doré se trace sous elle et le libellé « Voir » se dévoile. Tout le
   mouvement porte l'information, aucun ornement. */
.wx-rows{border-top:1px solid var(--line-soft)}
.wx-row{position:relative;display:grid;
  grid-template-columns:52px minmax(0,1fr) minmax(0,.72fr) 62px 76px;
  align-items:baseline;gap:clamp(12px,2vw,30px);
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line-soft)}
.wx-row::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease)}
.wx-row:hover::after{transform:scaleX(1)}
.wx-row>*{transition:transform .6s var(--ease),color .45s var(--ease),opacity .45s var(--ease)}
.wx-row:hover>*{transform:translateX(clamp(6px,1vw,16px))}
.wx-n{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;color:var(--gold);opacity:.7}
.wx-row:hover .wx-n{opacity:1}
.wx-t{font-family:var(--f-display);font-size:clamp(1.15rem,2.2vw,1.85rem);font-weight:700;
  line-height:1.14;letter-spacing:-.015em}
.wx-row:hover .wx-t{color:var(--gold)}
.wx-s,.wx-y{font-family:var(--f-mono);font-size:.57rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-go{justify-self:end;font-family:var(--f-mono);font-size:.57rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);opacity:0;transform:translateX(-10px)}
.wx-row:hover .wx-go{opacity:1;transform:translateX(0)}
@media (max-width:900px){
  .wx-row{grid-template-columns:40px 1fr auto;align-items:center}
  .wx-s,.wx-go{display:none}
}

/* ---------- Galerie design ----------
   Grille asymétrique de 12 colonnes, comme les réalisations, mais avec la
   légende sous le visuel : une carte de visite ou une enseigne se lit en
   entier, on ne recadre pas dessus.
   .dsg-img est en object-fit:contain (et non cover) : un logo carré, une
   carte de visite portrait ou une enseigne ne sont plus coupés pour
   remplir le cadre. L'image entière est montrée, avec un fond neutre
   (--ink-3, hérité de .dsg-media) si son format ne correspond pas
   exactement au cadre. */
/* Photo de client dans un témoignage, si le fichier existe */
img.av{object-fit:cover;border-radius:50%}

.dsg-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.2vw,34px);align-items:start}
.dsg{grid-column:span 6}
.dsg.d7{grid-column:span 7}
.dsg.d5{grid-column:span 5}
.dsg.d12{grid-column:span 12}
.dsg-media{position:relative;aspect-ratio:940/788;border-radius:14px;overflow:hidden;
  border:1px solid var(--line-soft);background:var(--ink-3);perspective:900px;box-shadow:var(--shadow)}
.dsg.d12 .dsg-media{aspect-ratio:21/9}
.dsg-media .tilt-in{position:absolute;inset:0;transform-style:preserve-3d}
.dsg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;
  transition:transform 1.1s var(--ease)}
.dsg-media:hover .dsg-img{transform:scale(1.04)}
.dsg-body{padding-top:clamp(16px,1.8vw,24px)}
.dsg-kind{display:block;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.dsg-body h3{font-family:var(--f-display);font-size:clamp(1.15rem,1.9vw,1.55rem);font-weight:700;
  line-height:1.15;margin-bottom:10px}
.dsg-body p{color:var(--muted);font-size:.93rem;line-height:1.7;max-width:52ch}
.dsg-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
@media (max-width:900px){
  .dsg,.dsg.d7,.dsg.d5,.dsg.d12{grid-column:span 12}
  .dsg.d12 .dsg-media{aspect-ratio:940/788}
}

/* Visuel principal d'une pièce de design sur sa page individuelle
   (views/pages/design-item.php) : même logique que .dsg-img, en entier
   sans recadrage, fond neutre autour si besoin. */
.dsg-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--ink-3)}

/* ---------- Méthode compacte ---------- */
.mini-proc{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px);
  counter-reset:mini}
.mini-step{position:relative;padding-top:26px;border-top:1px solid var(--line-soft)}
.mini-step::before{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease)}
.mini-step.in::before{transform:scaleX(1)}
.mini-n{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.22em;color:var(--gold);
  display:block;margin-bottom:12px}
.mini-step h3{font-family:var(--f-display);font-size:clamp(1rem,1.5vw,1.25rem);font-weight:700;
  line-height:1.2;margin-bottom:12px}
@media (max-width:860px){.mini-proc{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.mini-proc{grid-template-columns:1fr}}

/* ---------- Ajustements du mode clair ---------- */
:root[data-theme="light"] body{background:var(--ink);color:var(--bone)}
:root[data-theme="light"] .fx-grain{opacity:.028}
:root[data-theme="light"] .fx-vignette{
  background:radial-gradient(ellipse 110% 90% at 50% 45%,transparent 45%,rgb(120 110 90 / .16) 100%)}
:root[data-theme="light"] .btn{color:#FFFDF7}
:root[data-theme="light"] .btn::before{background:var(--gold-lt)}
:root[data-theme="light"] .btn.ghost{color:var(--bone);border-color:rgb(var(--fg-rgb) / .22)}
:root[data-theme="light"] .btn.ghost:hover{color:#FFFDF7;background:var(--gold);border-color:var(--gold)}
:root[data-theme="light"] .btn.ghost::before{background:var(--gold)}
/* En mode clair, l'en-tête flotte au-dessus d'un hero resté sombre :
   tant qu'il n'a pas de fond (avant le premier défilement), il doit
   garder le texte clair, sinon il devient invisible. */
:root[data-theme="light"] .topbar:not(.stuck){
  --bone:#F4F1EA;
  --muted:#8B877F;
  --fg-rgb:244 241 234;
  --line:rgb(201 168 76 / .16);
  --line-soft:rgb(244 241 234 / .10);
  color:#F4F1EA}
:root[data-theme="light"] .topbar:not(.stuck) .nav a,
:root[data-theme="light"] .topbar:not(.stuck) .brand-txt b{color:#F4F1EA}
:root[data-theme="light"] .topbar:not(.stuck) .brand-txt span,
:root[data-theme="light"] .topbar:not(.stuck) .lang a{color:#8B877F}
:root[data-theme="light"] .topbar:not(.stuck) .lang a.on{color:#C9A84C}
:root[data-theme="light"] .topbar:not(.stuck) .burger i{background:#F4F1EA}
/* La page 404 n'a pas de hero sombre : en mode clair, l'en-tête doit y
   reprendre ses couleurs normales, sinon il devient illisible. */
:root[data-theme="light"] body:has(#app[data-page="404"]) .topbar:not(.stuck){
  --bone:#17161A;
  --muted:#5E5A52;
  --fg-rgb:23 22 26;
  --line:rgb(138 107 33 / .16);
  --line-soft:rgb(23 22 26 / .10);
  color:#17161A}
:root[data-theme="light"] body:has(#app[data-page="404"]) .topbar:not(.stuck) .nav a,
:root[data-theme="light"] body:has(#app[data-page="404"]) .topbar:not(.stuck) .brand-txt b{color:#17161A}
:root[data-theme="light"] body:has(#app[data-page="404"]) .topbar:not(.stuck) .brand-txt span,
:root[data-theme="light"] body:has(#app[data-page="404"]) .topbar:not(.stuck) .lang a{color:#5E5A52}
:root[data-theme="light"] body:has(#app[data-page="404"]) .topbar:not(.stuck) .lang a.on{color:#8A6B21}
:root[data-theme="light"] body:has(#app[data-page="404"]) .topbar:not(.stuck) .burger i{background:#17161A}

/* En mode clair, --gold #8A6B21 passe 4,5:1 sur le fond de page (4,58:1)
   mais tombe à 4,20 / 3,83 / 3,45:1 dès qu'il est posé sur --ink-2, --ink-3
   ou --ink-4. Les petites étiquettes en mono passent donc sur un or plus
   sombre, réservé au texte. */
:root[data-theme="light"]{--gold-txt:#6E5417}
:root:not([data-theme="light"]){--gold-txt:var(--gold)}
:root[data-theme="light"] .idx,
:root[data-theme="light"] .deliv-n,
:root[data-theme="light"] .case-n,
:root[data-theme="light"] .mini-n,
:root[data-theme="light"] .hz-n,
:root[data-theme="light"] .dsg-kind,
:root[data-theme="light"] .pv-step,
:root[data-theme="light"] .wx-n,
:root[data-theme="light"] .srv-n,
:root[data-theme="light"] .e4-exit i{color:var(--gold-txt)}

:root[data-theme="light"] .shot{background:var(--ink-3)}
:root[data-theme="light"] .wcard-veil{
  background:linear-gradient(to top,rgb(var(--bg-rgb) / .94) 4%,transparent 55%)}
:root[data-theme="light"] .amb i:nth-child(1){background:radial-gradient(ellipse 80% 60% at 15% 10%,rgb(var(--gold-rgb) / .07),transparent 62%)}
:root[data-theme="light"] .amb i:nth-child(2){background:radial-gradient(ellipse 70% 70% at 85% 40%,rgb(var(--gold-rgb) / .06),transparent 60%)}
:root[data-theme="light"] .amb i:nth-child(3){background:radial-gradient(ellipse 90% 60% at 50% 90%,rgb(var(--gold-rgb) / .05),transparent 65%)}
:root[data-theme="light"] .amb i:nth-child(4){background:radial-gradient(ellipse 75% 75% at 20% 70%,rgb(var(--gold-rgb) / .07),transparent 62%)}
:root[data-theme="light"] .f-word text{stroke:rgb(var(--gold-rgb) / .38)}
:root[data-theme="light"] ::-webkit-scrollbar-thumb{background:var(--gold-deep)}
:root[data-theme="light"] .cur-dot{box-shadow:0 0 10px rgb(var(--gold-rgb) / .6)}

/* ============================================================
   V3.3 — CURSEUR FLÈCHE, MODE CLAIR, SON, PAGES PROJET
   ============================================================ */

/* ---------- Curseur : flèche sur les projets ---------- */
.cur-arrow{position:absolute;top:50%;left:50%;width:16px;height:16px;color:var(--gold);
  transform:translate(-50%,-50%) scale(.4) rotate(-45deg);opacity:0;
  transition:opacity .3s,transform .45s var(--ease)}
body.cur-view .cur-arrow{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-45deg)}
body.cur-view .cur-ring{width:62px;height:62px;margin:-31px 0 0 -31px;
  background:rgb(var(--gold-rgb) / .10);border-color:var(--gold)}
body.cur-view .cur-dot{opacity:0}

/* ---------- Boutons d'en-tête : thème et son ---------- */
.hbtn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-soft);color:var(--muted);background:none;
  transition:color .35s,border-color .35s,background .35s,transform .5s var(--ease)}
.hbtn:hover{color:var(--gold);border-color:var(--line);transform:translateY(-2px)}
.hbtn svg{width:15px;height:15px}
.hbtn .ic-off{display:none}
.hbtn.off .ic-on{display:none}
.hbtn.off .ic-off{display:block}
@media (max-width:520px){#sound{display:none}}

/* ---------- Notification discrète ---------- */
.toast{position:fixed;left:50%;bottom:34px;z-index:9993;transform:translate(-50%,26px);
  background:rgb(var(--bg2-rgb) / .94);border:1px solid var(--line);border-radius:100px;
  padding:11px 22px;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease),transform .5s var(--ease);white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- Page projet ---------- */
.pj-hero{position:relative;overflow:hidden;padding:clamp(120px,15vh,190px) var(--pad) 0;
  background:var(--ink-2);border-bottom:1px solid var(--line-soft)}
.pj-hero::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 70% 90% at 50% 0%,rgb(var(--gold-rgb) / .12),transparent 68%)}
/* Même fumée que les autres pages, voilée pour rester lisible */
.pj-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(105deg,rgb(var(--bg-rgb) / .93) 0%,rgb(var(--bg-rgb) / .62) 48%,rgb(var(--bg-rgb) / .28) 100%),
    linear-gradient(to bottom,transparent 40%,var(--ink-2) 100%)}
.pj-head{position:relative;z-index:3;max-width:1500px;margin:0 auto}
.pj-back{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:26px;
  transition:color .35s,gap .35s}
.pj-back:hover{color:var(--gold);gap:14px}
.pj-back svg{width:12px;height:12px;transform:rotate(180deg)}
.pj-title{font-family:var(--f-display);font-weight:900;
  font-size:clamp(2.1rem,6vw,4.6rem);line-height:1;letter-spacing:-.03em;margin-bottom:20px}
.pj-sum{color:var(--muted);max-width:62ch;font-size:clamp(1rem,1.15vw,1.1rem)}
.pj-facts{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;
  max-width:1500px;margin:clamp(34px,4vw,56px) auto 0;transform:translateY(1px)}
.pj-fact{background:var(--ink);padding:22px 24px}
.pj-fact span{display:block;font-family:var(--f-mono);font-size:.55rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.pj-fact b{font-family:var(--f-display);font-size:1.05rem;font-weight:700}
@media (max-width:820px){.pj-facts{grid-template-columns:1fr 1fr}}

.pj-shot{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  border:1px solid var(--line-soft);margin-bottom:clamp(44px,6vw,80px);box-shadow:var(--shadow)}

/* ---------- Corps de la page projet ----------
   Les quatre cases à remplir ont été retirées : la page est portée par
   le visuel et par les informations déjà présentes dans projects.php.
   Les blocs optionnels (citation, chiffres) n'apparaissent que si tu
   les remplis, sinon ils n'existent tout simplement pas. */
.pj-lead{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,86px);align-items:start}
.pj-lead-t{font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.3rem,2.5vw,2.05rem);line-height:1.34;letter-spacing:-.015em}
.pj-lead-t em{font-style:italic;color:var(--gold)}
.pj-aside{border-top:1px solid var(--line);padding-top:22px}
.pj-aside h2{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:6px}
.pj-list{list-style:none}
.pj-list li{display:flex;align-items:flex-start;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--line-soft);color:var(--muted);font-size:.94rem}
.pj-list li svg{width:13px;height:13px;color:var(--gold);flex:none;margin-top:5px}
.pj-aside-p{color:var(--muted);font-size:.9rem;line-height:1.7;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line-soft)}
@media (max-width:900px){.pj-lead{grid-template-columns:1fr;gap:30px}}

/* Galerie : un visuel large, un mobile, un bandeau de détail */
.pj-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.5vw,22px);
  margin-top:clamp(44px,6vw,80px)}
.pj-gal figure{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line-soft);
  background:var(--ink-3)}
.pj-gal .g1{grid-column:span 2;aspect-ratio:16/10}
.pj-gal .g1:only-child,.pj-gal .g1:has(+ .g3:last-child){grid-column:span 3;aspect-ratio:16/9}
.pj-gal .g2{min-height:100%}          /* s'aligne sur la hauteur du visuel large */
.pj-gal .g3{grid-column:span 3;aspect-ratio:21/8}
@media (max-width:760px){
  .pj-gal{grid-template-columns:1fr}
  .pj-gal .g1,.pj-gal .g3{grid-column:span 1}
  .pj-gal .g2{aspect-ratio:4/5;min-height:0}
}

/* Citation client : bloc optionnel, clé « quote » dans projects.php */
.pj-quote{margin-top:clamp(44px,6vw,80px);padding:clamp(30px,3.6vw,54px);
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(160deg,rgb(var(--gold-rgb) / .09),var(--ink-2) 68%)}
.pj-quote p{font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(1.12rem,2vw,1.6rem);line-height:1.42}
.pj-quote footer{margin-top:20px;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}

/* Chiffres : bloc optionnel, clé « figures » dans projects.php */
.pj-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;margin-top:clamp(44px,6vw,80px)}
.pj-fig{background:var(--ink-2);padding:clamp(24px,2.8vw,38px)}
.pj-fig b{display:block;font-family:var(--f-display);font-weight:900;color:var(--gold);
  font-size:clamp(1.7rem,3.2vw,2.7rem);line-height:1;letter-spacing:-.02em;margin-bottom:10px}
.pj-fig span{color:var(--muted);font-size:.9rem}
@media (max-width:700px){.pj-figs{grid-template-columns:1fr}}

.pj-stack{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.pj-next{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  border-top:1px solid var(--line-soft);padding-top:clamp(28px,3vw,44px);margin-top:clamp(40px,5vw,70px)}
.pj-next-lbl{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pj-next a{font-family:var(--f-display);font-size:clamp(1.3rem,2.6vw,2.1rem);font-weight:900;
  letter-spacing:-.02em;display:inline-flex;align-items:center;gap:16px;transition:color .4s,gap .4s}
.pj-next a:hover{color:var(--gold);gap:24px}
.pj-next a svg{width:20px;height:20px}

/* ---------- Note sous les chiffres ---------- */
.nums-note{max-width:1500px;margin:18px auto 0;padding-inline:var(--pad);
  font-size:.85rem;color:var(--muted);text-align:center;line-height:1.6}

/* ---------- Pagination (Réalisations) ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:clamp(40px,5vw,64px)}
.pager a{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 14px;border-radius:100px;
  border:1px solid var(--line-soft);background:transparent;
  font-family:var(--f-mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;
  color:var(--muted);transition:color .35s,border-color .35s,background .35s,transform .4s var(--ease)}
.pager a:hover{color:var(--bone);border-color:var(--line);transform:translateY(-2px)}
.pager a.is-active{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.pager a.is-active:hover{transform:none}
@media (max-width:520px){
  .pager a{min-width:36px;height:36px;padding:0 10px;font-size:.62rem}
}