/* =============================================================
   SMOW STUDIO — Refonte (maquette) · Design system
   Direction "Studio Console" : dark premium + accent jaune.
   Fichier partagé par toutes les pages de la maquette.
   ============================================================= */
:root{
  --ink:#09090a;--ink-2:#0e0e10;--surface:#141418;--surface-2:#1b1b20;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.17);
  --text:#f3f1ea;--dim:#8c887f;--dimmer:#5c5953;
  --accent:#ffe000;--accent-2:#ffbf00;--accent-ink:#0a0a0b;--accent-rgb:255,224,0;
  --ok:#3ddc97;--ok-rgb:61,220,151;
  --font-display:'Anton',sans-serif;
  --font-body:'Hanken Grotesk',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(1.15rem,4vw,3.5rem);--maxw:1320px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--text);font-family:var(--font-body);font-weight:300;line-height:1.55;
  overflow-x:hidden;position:relative;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Fond d'ambiance global (fixe) : halos jaune + violet pour la profondeur
   + grille "studio" ultra-discrète. Reste derrière tout le contenu (z-index:-1),
   position:fixed → pas de recalcul au scroll (performant, même sur mobile).
   --bg-a / --bg-b : couleurs d'ambiance, surchargeables par page. */
body{--bg-a:var(--accent-rgb);--bg-b:124,92,255}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(50% 42% at 88% -6%,rgba(var(--bg-a),.06),transparent 60%),
    radial-gradient(46% 40% at 3% 8%,rgba(var(--bg-b),.07),transparent 62%),
    radial-gradient(64% 52% at 50% 114%,rgba(var(--bg-b),.05),transparent 60%),
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,100% 100%,72px 72px,72px 72px}
/* Ambiance légèrement différente par page (cohérent mais pas identique) */
body.bg-enreg{--bg-a:255,224,0;--bg-b:255,150,40}
body.bg-photo{--bg-a:150,110,255;--bg-b:124,92,255}
body.bg-regl{--bg-a:124,92,255;--bg-b:255,224,0}
body.bg-resa{--bg-a:46,210,150;--bg-b:124,92,255}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-weight:400}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--font-mono);font-weight:400;letter-spacing:.22em;text-transform:uppercase}
.skip{position:absolute;left:-9999px}

/* ---- Cursor ---- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;translate:-50% -50%;mix-blend-mode:difference}
.cursor{width:34px;height:34px;border:1px solid #fff;transition:width .3s var(--ease),height .3s var(--ease),background .3s}
.cursor-dot{width:5px;height:5px;background:#fff}
body.cursor-hover .cursor{width:58px;height:58px;background:rgba(255,255,255,.1)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* ---- Nav ---- */
.nav{position:fixed;inset:0 0 auto 0;z-index:900;transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(9,9,10,.72);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-size:1.4rem;letter-spacing:.06em}
.brand .on{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.2em;color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.4);border-radius:40px;padding:.28rem .5rem;text-transform:uppercase}
.brand .on b{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6)}50%{opacity:.5;box-shadow:0 0 0 6px rgba(var(--accent-rgb),0)}}
.nav-links{display:flex;gap:2.2rem;align-items:center}
.nav-links a{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);position:relative;padding:.3rem 0;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--accent);transition:width .35s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:40px;padding:.6rem 1.2rem;color:var(--text);transition:.35s var(--ease)}
.nav-cta:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--text);transition:.3s}
@media(max-width:860px){.nav-links{display:none}.burger{display:flex}.nav-cta{margin-left:auto;margin-right:.9rem}}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:950;background:rgba(9,9,10,.97);backdrop-filter:blur(10px);display:none;flex-direction:column;justify-content:center;gap:1.2rem;padding:var(--gut)}
.drawer.open{display:flex}
.drawer a{font-family:var(--font-display);font-size:2rem;text-transform:uppercase;letter-spacing:.03em;color:var(--text)}
.drawer a:hover{color:var(--accent)}
.drawer .x{position:absolute;top:1.8rem;right:var(--gut);background:none;border:1px solid var(--line-2);color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.2rem}

/* ---- Buttons ---- */
.btn{position:relative;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  border-radius:50px;padding:1.05rem 1.8rem;cursor:pointer;border:none;background:var(--accent);color:var(--accent-ink);font-weight:700;overflow:hidden;transition:transform .3s var(--ease)}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--text);transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{transform:translateY(-2px)}
.btn .arr{transition:transform .35s var(--ease);position:relative;z-index:1}
.btn:hover .arr{transform:translate(4px,-4px)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-2)}
.btn.ghost::before{background:var(--surface-2)}
.btn.block{width:100%}
.link-ghost{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);display:inline-flex;align-items:center;gap:.6rem;position:relative}
.link-ghost::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;background:var(--line-2);transform-origin:right;transition:transform .4s var(--ease)}
.link-ghost:hover::after{transform:scaleX(0)}

/* ---- Reveal ---- */
[data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}

/* ---- Section frame ---- */
.sec{padding-block:clamp(2.6rem,5.5vw,4.6rem)}
.sec-sm{padding-block:clamp(2rem,4vw,3.2rem)}
.sec-head{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:clamp(1.5rem,3.2vw,2.4rem);max-width:62ch}
.sec-idx{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.3em;color:var(--accent);text-transform:uppercase;display:flex;gap:.8rem;align-items:center;margin-bottom:1.1rem}
.sec-head .sec-idx{margin-bottom:0}
.sec-idx::before{content:"";width:26px;height:1px;background:var(--accent)}
.sec-title{font-family:var(--font-display);line-height:1.04;text-transform:uppercase;font-size:clamp(2.2rem,6vw,5rem);letter-spacing:.01em}
.sec-title em{font-style:normal;color:transparent;-webkit-text-stroke:1.2px var(--dim)}
.sec-note{color:var(--dim);font-size:1.05rem;font-weight:400;max-width:50ch}

/* ---- Hero ---- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(96px,12vh,120px);padding-bottom:clamp(5.5rem,13vh,9rem);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.42) contrast(1.05)}
.hero-media::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 80% 10%,rgba(var(--accent-rgb),.12),transparent 55%),
    radial-gradient(85% 80% at 8% 94%,rgba(124,92,255,.17),transparent 58%),
    linear-gradient(180deg,rgba(9,9,10,.5),rgba(9,9,10,.92))}
.hero-grid{position:absolute;inset:0;z-index:0;opacity:.4;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(130% 100% at 50% 35%,#000 35%,transparent 78%)}
.hero-in{position:relative;z-index:2;width:100%}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:clamp(1.2rem,3vw,2.4rem);color:var(--dim);font-size:.64rem}
.hero-top .r{text-align:right;color:var(--dimmer)}
.kicker{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:1.4rem}
.kicker .bar{width:38px;height:1px;background:var(--accent)}
h1.display{font-family:var(--font-display);line-height:.86;letter-spacing:.005em;font-size:clamp(3.2rem,14vw,15rem);text-transform:uppercase}
.line-mask{display:block;overflow:hidden}
.line-mask>span{display:block;transform:translateY(110%);opacity:0}
.hero.in .line-mask>span{animation:lineUp 1s var(--ease) forwards}
.hero.in .line-mask:nth-child(1)>span{animation-delay:.15s}
.hero.in .line-mask:nth-child(2)>span{animation-delay:.28s}
.hero.in .line-mask:nth-child(3)>span{animation-delay:.41s}
@keyframes lineUp{to{transform:translateY(0);opacity:1}}
h1 .stroke{-webkit-text-stroke:1.5px var(--accent);-webkit-text-fill-color:transparent}
h1 .yellow{color:var(--accent)}
.hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2rem;margin-top:clamp(1.6rem,4vw,3rem)}
.hero-sub{max-width:40ch;color:var(--dim);font-size:clamp(.95rem,1.4vw,1.1rem);font-weight:400}
.hero-sub b{color:var(--text);font-weight:600}
.hero-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.eq{display:flex;align-items:flex-end;gap:4px;height:46px}
.eq i{width:4px;background:linear-gradient(var(--accent),var(--accent-2));border-radius:3px;animation:eq 1.1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}.eq i:nth-child(4){animation-delay:.1s}
.eq i:nth-child(5){animation-delay:.5s}.eq i:nth-child(6){animation-delay:.3s}.eq i:nth-child(7){animation-delay:.15s}
@keyframes eq{0%,100%{height:18%}50%{height:100%}}
.scroll-hint{position:absolute;bottom:1.6rem;left:50%;translate:-50%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.28em;color:var(--dimmer);text-transform:uppercase}
.scroll-hint .l{width:1px;height:42px;background:linear-gradient(var(--accent),transparent);animation:scrolly 2s infinite}
@keyframes scrolly{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* Hero — garde-fous anti-chevauchement / respiration */
.hero-foot{margin-bottom:1.5rem}
@media (max-height:720px){.scroll-hint{display:none}}
@media(max-width:600px){
  .hero-top{flex-direction:column;align-items:flex-start;gap:.35rem}
  .hero-top .r{text-align:left}
  .hero-actions{gap:1rem;flex-direction:column;align-items:center;width:100%}
  .hero-actions .eq{display:none}
  h1.display{font-size:clamp(2rem,9vw,3.3rem)}
  .kicker{font-size:.56rem;letter-spacing:.14em}
  .phead h1{font-size:clamp(1.9rem,9.4vw,3.4rem)}
  .sec-title{font-size:clamp(1.6rem,7.6vw,2.9rem);overflow-wrap:break-word}
  .btn{padding:.9rem 1.35rem}
  .photo-card{flex-direction:column;align-items:flex-start;gap:1.4rem}
  .stepper{gap:.5rem}
  .pill{padding:.7rem .75rem;gap:.55rem;min-width:0}
  .pill .n{width:28px;height:28px;font-size:.72rem}
  .pill .v{font-size:.8rem}
  .pill .k{font-size:.46rem}
  .rule .desc,.gear-cell .v,.gdesc,.svc-desc,.hero-sub{overflow-wrap:break-word}
  /* Footer mobile : les colonnes de liens sont alignées en haut (même hauteur),
     le "SMOW" passe dessous (centré) et le bas de footer est centré. */
  .foot-grid{align-items:flex-start;gap:1.5rem 1rem}
  .foot-col{order:1}
  .foot-brand{order:5;flex-basis:100%;width:100%;text-align:center;font-size:clamp(3rem,16vw,4.5rem);margin-top:.6rem}
  .foot-bot{flex-direction:column;align-items:center;text-align:center;gap:.6rem}
}
@media(max-width:520px){.nav-cta{display:none}}

/* ---- Ticker ---- */
.ticker{border-block:1px solid var(--line);background:var(--ink-2);overflow:hidden;padding:1.1rem 0;position:relative;z-index:3}
.ticker-track{display:flex;gap:3rem;white-space:nowrap;width:max-content;animation:marq 32s linear infinite;font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,2rem);letter-spacing:.04em;text-transform:uppercase;color:var(--dimmer)}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{display:inline-flex;align-items:center;gap:3rem}
.ticker-track em{color:var(--accent);font-style:normal}
.ticker-track .dot{width:7px;height:7px;background:var(--accent);border-radius:50%}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---- Stats ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.stat{background:var(--ink-2);padding:clamp(1.6rem,3vw,2.6rem);position:relative;transition:background .4s}
.stat:hover{background:var(--surface)}
.stat .n{font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4.4rem);line-height:.9;color:var(--accent)}
.stat .l{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:.9rem}
.stat .c{position:absolute;top:1.1rem;right:1.2rem;font-family:var(--font-mono);font-size:.52rem;color:var(--dimmer)}
@media(max-width:780px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ---- About split ---- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split p{color:var(--dim);font-weight:400;margin-bottom:1.1rem;font-size:1.02rem}
.split p strong{color:var(--text);font-weight:600}
@media(max-width:860px){.split{grid-template-columns:1fr}}
/* Stats dans la colonne "À propos" : 2×2 pour ne pas comprimer les chiffres */
.split .stats{grid-template-columns:repeat(2,1fr)}

/* ---- Services ---- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.svc-card{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;min-height:clamp(340px,42vw,440px);display:flex;flex-direction:column;justify-content:flex-end;padding:1.8rem;cursor:pointer;isolation:isolate;transition:border-color .4s}
.svc-card:hover{border-color:var(--line-2)}
.svc-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;opacity:.5;filter:saturate(.85) brightness(.85);transition:transform .9s var(--ease),opacity .5s}
.svc-card:hover .svc-bg{transform:scale(1.06);opacity:.62}
.svc-card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(90% 72% at var(--tpos,68% 16%),var(--tint,transparent),transparent 62%),
    linear-gradient(180deg,rgba(5,5,6,.12) 0%,rgba(5,5,6,.5) 55%,rgba(5,5,6,.95) 100%)}
/* Teinte de couleur par service (ambre / violet / vert) */
.svc-1{--tint:rgba(255,196,64,.34);--tpos:78% 16%}
.svc-2{--tint:rgba(150,110,255,.36);--tpos:24% 16%}
.svc-3{--tint:rgba(46,210,150,.32);--tpos:56% 24%}
.svc-idx{position:absolute;top:1.5rem;right:1.6rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.28em;color:var(--dim)}
.svc-name{font-family:var(--font-display);font-size:clamp(1.6rem,2.3vw,2.1rem);text-transform:uppercase;line-height:1;letter-spacing:.02em}
.svc-desc{color:var(--dim);font-size:.86rem;font-weight:400;margin-top:.6rem;max-width:34ch;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svc-go{margin-top:1.2rem;display:flex;align-items:center;justify-content:space-between;padding-top:1rem;border-top:1px solid var(--line-2);font-family:var(--font-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.svc-go .arr{transition:transform .35s var(--ease)}
.svc-card:hover .svc-go .arr{transform:translateX(5px)}
@media(max-width:860px){.svc{grid-template-columns:1fr}.svc-card{min-height:300px}}

/* ---- Reel ---- */
.reel{border:1px solid var(--line);border-radius:22px;background:linear-gradient(130deg,var(--surface),var(--ink-2));padding:clamp(1.8rem,4vw,3.2rem);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;position:relative;overflow:hidden}
.reel::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 100% 0,rgba(var(--accent-rgb),.1),transparent 60%);pointer-events:none}
.reel-h{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.4rem);text-transform:uppercase;line-height:1.02}
.reel p{color:var(--dim);margin-top:1rem;font-weight:400;max-width:40ch}
.reel-play{margin-top:1.8rem;display:inline-flex;align-items:center;gap:1rem;cursor:pointer}
.reel-play .pbtn{width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease);flex-shrink:0;font-size:1rem}
.reel-play:hover .pbtn{transform:scale(1.08)}
.reel-play .t{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.wave{display:flex;align-items:center;gap:3px;height:120px}
.wave i{flex:1;background:linear-gradient(var(--accent),rgba(var(--accent-rgb),.25));border-radius:3px;height:20%;animation:wv 1.4s ease-in-out infinite}
@keyframes wv{0%,100%{height:15%;opacity:.5}50%{height:95%;opacity:1}}
@media(max-width:780px){.reel{grid-template-columns:1fr;gap:2rem}.wave{height:80px}}

/* ---- Process ---- */
.proc{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;counter-reset:step}
.step-b{border-top:1px solid var(--line-2);padding-top:1.6rem;position:relative}
.step-b::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-display);font-size:clamp(2.4rem,4vw,3.6rem);color:transparent;-webkit-text-stroke:1px var(--dimmer);display:block;margin-bottom:1rem}
.step-b h3{font-family:var(--font-display);font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em}
.step-b p{color:var(--dim);font-size:.92rem;font-weight:400;margin-top:.7rem}
.step-b .mono{color:var(--accent);font-size:.56rem;margin-top:1.2rem;display:block}
@media(max-width:780px){.proc{grid-template-columns:1fr;gap:2rem}}

/* ---- Gallery ---- */
.gal{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory;scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
.gal figure{flex:0 0 clamp(240px,30%,360px);scroll-snap-align:center;aspect-ratio:4/5;border-radius:16px;overflow:hidden;border:1px solid var(--line);position:relative;margin:0;cursor:pointer;background:var(--surface)}
.gal figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1) brightness(.92) contrast(1.05);transition:transform .7s var(--ease),filter .5s}
.gal figure:hover img{transform:scale(1.06);filter:none}
.gal figure::after{content:"⤢";position:absolute;top:.8rem;right:.9rem;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);border:1px solid var(--line-2);border-radius:50%;opacity:0;transition:.3s}
.gal figure:hover::after{opacity:1}
.gal-nav{display:flex;gap:.5rem;margin-top:1rem}
.gal-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--text);cursor:pointer;font-size:1rem;transition:.25s}
.gal-nav button:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ---- CTA / Footer ---- */
.cta{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(150deg,#15150f,#0c0c0e);padding:clamp(2.6rem,7vw,6rem);text-align:center}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 50% 0,rgba(var(--accent-rgb),.12),transparent 60%)}
.cta-h{position:relative;font-family:var(--font-display);font-size:clamp(2.6rem,8vw,7rem);text-transform:uppercase;line-height:.96}
.cta-h em{font-style:normal;color:var(--accent)}
.cta p{position:relative;color:var(--dim);margin:1.4rem auto 2.4rem;max-width:44ch;font-weight:400}
.contact-row{display:flex;flex-wrap:wrap;justify-content:center;gap:2.4rem;margin-top:2.6rem;position:relative;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.contact-row b{color:var(--text);font-weight:500}
footer{border-top:1px solid var(--line);padding-block:clamp(2.2rem,4vw,3.2rem) 2rem;margin-top:clamp(2.4rem,5vw,4rem)}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2rem;align-items:flex-start}
.foot-brand{font-family:var(--font-display);font-size:clamp(3rem,10vw,7rem);line-height:.8;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px var(--line-2)}
.foot-col{display:flex;flex-direction:column;gap:.7rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.foot-col a:hover{color:var(--accent)}
.foot-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dimmer)}

/* ---- Page header (sous-pages) ---- */
.phead{position:relative;padding:calc(74px + clamp(3rem,8vw,7rem)) 0 clamp(2.4rem,6vw,4.5rem);overflow:hidden}
.phead::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 90% at 85% 0,rgba(var(--accent-rgb),.12),transparent 55%),linear-gradient(180deg,#0d0d0f,var(--ink))}
.phead[data-ghost]::after{content:attr(data-ghost);position:absolute;right:-2%;bottom:-6%;font-family:var(--font-display);font-size:clamp(5rem,22vw,20rem);color:#fff;opacity:.025;letter-spacing:.02em;pointer-events:none;white-space:nowrap;z-index:0}
.phead .wrap{position:relative;z-index:1}
.crumbs{position:relative;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:1.5rem;display:flex;gap:.6rem}
.crumbs .s{color:var(--dimmer)}
.phead h1{position:relative;font-family:var(--font-display);font-size:clamp(2.6rem,9vw,7rem);line-height:.86;text-transform:uppercase;letter-spacing:.01em;overflow-wrap:break-word}
.phead h1 em{font-style:normal;color:var(--accent)}
.phead .desc{position:relative;color:var(--dim);max-width:54ch;margin-top:1.5rem;font-size:clamp(1rem,1.5vw,1.2rem);font-weight:400}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--text);font-weight:400;max-width:62ch;border-left:2px solid var(--accent);padding-left:1.5rem;line-height:1.7}
.lead b{color:var(--accent)}

/* ---- Pricing rows ---- */
.pricing{display:flex;flex-direction:column;gap:1rem}
.prow{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,3vw,2.5rem);align-items:center;background:var(--ink-2);border:1px solid var(--line);border-radius:18px;padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2.4rem);overflow:hidden;transition:border-color .4s,transform .4s var(--ease)}
.prow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--ease)}
.prow:hover{border-color:var(--line-2);transform:translateX(4px)}
.prow:hover::before{transform:scaleY(1)}
.prow .idx{font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.6rem);color:transparent;-webkit-text-stroke:1px rgba(var(--accent-rgb),.5);line-height:1}
.prow .name{font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.1rem);text-transform:uppercase;letter-spacing:.02em}
.prow .det{color:var(--dim);font-size:.92rem;font-weight:400;margin:.5rem 0 .9rem;max-width:54ch}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:30px;padding:.35rem .7rem}
.amt{text-align:right;min-width:120px}
.amt .v{font-family:var(--font-display);font-size:clamp(2.2rem,4vw,3.2rem);color:var(--accent);line-height:1}
.amt .u{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);display:block;margin-top:.3rem}
@media(max-width:680px){.prow{grid-template-columns:auto 1fr;gap:1rem}.amt{grid-column:1/-1;text-align:left;display:flex;align-items:baseline;gap:.8rem}.amt .u{margin:0}}
.notice{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.4rem}
.ncard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.8rem}
.ncard .ttl{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem}
.ncard p{color:var(--dim);font-size:.92rem;font-weight:400}
@media(max-width:680px){.notice{grid-template-columns:1fr}}

/* ---- Gear ---- */
.gear{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gcard{background:var(--ink-2);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:border-color .4s,transform .4s var(--ease)}
.gcard:hover{border-color:var(--line-2);transform:translateY(-4px)}
.gthumb{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:radial-gradient(70% 70% at 50% 35%,#222018,#0f0f11);position:relative;padding:1.5rem}
.gthumb img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
.gthumb .ico{font-size:2.6rem}
.gbody{padding:1.3rem 1.4rem 1.6rem}
.gbrand{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.gname{font-family:var(--font-display);font-size:1.4rem;text-transform:uppercase;letter-spacing:.02em;margin:.3rem 0 .6rem}
.gdesc{color:var(--dim);font-size:.82rem;font-weight:400;line-height:1.5}
.gear-band{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:1.4rem}
.gear-cell{background:var(--ink-2);padding:1.5rem 1.7rem}
.gear-cell .k{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.gear-cell .v{color:var(--dim);font-size:.9rem;font-weight:400;line-height:1.5}
@media(max-width:900px){.gear{grid-template-columns:repeat(2,1fr)}.gear-band{grid-template-columns:1fr}}
/* Mobile : "Le matériel" devient un slider horizontal (swipe) pour gagner
   de la hauteur au lieu d'empiler les cartes. */
@media(max-width:620px){
  .gear{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.9rem;
    padding-bottom:.7rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gear::-webkit-scrollbar{display:none}
  .gcard{flex:0 0 74%;scroll-snap-align:center}
}

/* ---- Photo / Clip ---- */
.photo-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2rem;border:1px solid var(--line);border-radius:20px;background:linear-gradient(130deg,var(--surface),var(--ink-2));padding:clamp(1.8rem,4vw,2.6rem)}
.photo-price{font-family:var(--font-display);font-size:clamp(2.6rem,6vw,4.2rem);color:var(--accent);line-height:1}
.photo-price small{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;display:block;margin-top:.3rem}
.swatches{display:flex;gap:1.4rem;flex-wrap:wrap}
.swatch{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.swatch .disc{width:62px;height:62px;border-radius:50%;border:1px solid var(--line-2)}
.swatch .disc.k{background:#0c0c0c}.swatch .disc.w{background:#efeee9}.swatch .disc.g{background:#15c15a}
.swatch .lab{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.photo-note{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.2rem;color:var(--dim);font-size:.9rem;font-weight:400}
.photo-note .tag{color:var(--accent);border-color:rgba(var(--accent-rgb),.4)}
.clips{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.clip{position:relative;border:1px solid var(--line);border-radius:20px;background:var(--ink-2);padding:clamp(1.6rem,3vw,2.2rem);transition:border-color .4s,transform .4s var(--ease)}
.clip:hover{border-color:var(--line-2);transform:translateY(-4px)}
.clip.featured{border-color:rgba(var(--accent-rgb),.4);background:linear-gradient(160deg,#15150f,var(--ink-2))}
.clip .idx{position:absolute;top:1.4rem;right:1.6rem;font-family:var(--font-display);font-size:2.4rem;color:transparent;-webkit-text-stroke:1px var(--dimmer)}
.clip .tag{display:inline-block;margin-bottom:1rem}
.clip.featured .tag{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.clip .name{font-family:var(--font-display);font-size:clamp(1.4rem,2.5vw,2rem);text-transform:uppercase;letter-spacing:.02em;max-width:16ch}
.clip .price{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);color:var(--accent);line-height:1;margin:.8rem 0 1.2rem}
.clip .price small{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;display:block;margin-top:.3rem}
.clip ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.clip li{color:var(--dim);font-size:.9rem;font-weight:400;padding-left:1.3rem;position:relative}
.clip li::before{content:"→";position:absolute;left:0;color:var(--accent)}
.clip li strong{color:var(--text);font-weight:500}
@media(max-width:760px){.clips{grid-template-columns:1fr}}

/* ---- Rules ---- */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.rule{border:1px solid var(--line);border-radius:18px;background:var(--ink-2);padding:clamp(1.5rem,3vw,2rem);transition:border-color .4s,transform .4s var(--ease)}
.rule:hover{border-color:var(--line-2);transform:translateY(-3px)}
.rule .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.rule .glyph{width:48px;height:48px;border:1px solid var(--line-2);border-radius:12px;display:flex;align-items:center;justify-content:center}
.rule .glyph svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rule .idx{font-family:var(--font-display);font-size:1.6rem;color:transparent;-webkit-text-stroke:1px var(--dimmer)}
.rule .name{font-family:var(--font-display);font-size:1.4rem;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.6rem}
.rule .desc{color:var(--dim);font-size:.92rem;font-weight:400}
.rule .desc strong{color:var(--text);font-weight:600}
.rules-warn{display:flex;gap:1.4rem;align-items:flex-start;border:1px solid rgba(var(--accent-rgb),.35);border-radius:18px;background:linear-gradient(130deg,#15150f,var(--ink-2));padding:clamp(1.6rem,3vw,2.2rem);margin-top:1.4rem}
.rules-warn .bolt{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:var(--accent);display:flex;align-items:center;justify-content:center}
.rules-warn .bolt svg{width:24px;height:24px;fill:var(--accent-ink)}
.rules-warn p{color:var(--dim);font-weight:400}
.rules-warn strong{color:var(--text);font-weight:600}
@media(max-width:760px){.rules{grid-template-columns:1fr}}

/* ---- Booking (réservation) ---- */
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-block:clamp(1.5rem,3vw,2.5rem)}
.pill{display:flex;align-items:center;gap:.8rem;border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem;background:var(--ink-2);transition:.4s}
.pill .n{width:34px;height:34px;flex-shrink:0;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.8rem;color:var(--dim)}
.pill .k{font-family:var(--font-mono);font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer);display:block;margin-bottom:.15rem}
.pill .v{font-family:var(--font-display);font-size:1rem;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);line-height:1.1;display:block}
.pill.done{border-color:rgba(var(--ok-rgb),.3)}.pill.done .n{border-color:var(--ok);color:var(--ok)}
.pill.active{border-color:var(--accent);background:linear-gradient(180deg,rgba(var(--accent-rgb),.06),transparent)}
.pill.active .n{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.pill.active .v{color:var(--text)}
@media(max-width:820px){.stepper{grid-template-columns:repeat(2,1fr)}.pill .v{font-size:.85rem}}
.book{display:grid;grid-template-columns:1.6fr .9fr;gap:1.1rem;padding-bottom:clamp(3rem,7vw,6rem)}
@media(max-width:940px){.book{grid-template-columns:1fr}}
.panel{background:var(--ink-2);border:1px solid var(--line);border-radius:20px;padding:clamp(1.4rem,3vw,2rem)}
.step-title{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.3rem);text-transform:uppercase;line-height:1;letter-spacing:.01em}
.step-title em{font-style:normal;color:var(--accent)}
.step-sub{color:var(--dim);font-size:.9rem;font-weight:400;margin:.7rem 0 1.6rem}
.calwrap{display:grid;grid-template-columns:1fr .85fr;gap:1.1rem}
@media(max-width:720px){.calwrap{grid-template-columns:1fr}}
.cal{border:1px solid var(--line);border-radius:14px;padding:1.1rem;background:var(--surface)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.cal-title{font-family:var(--font-display);font-size:1.2rem;letter-spacing:.04em;text-transform:uppercase}
.cal-nav button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line-2);background:transparent;color:var(--text);cursor:pointer;font-size:1rem}
.cal-nav button:hover{border-color:var(--accent);color:var(--accent)}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.1em;color:var(--dimmer);text-transform:uppercase;text-align:center}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.day{aspect-ratio:1;border-radius:9px;border:1px solid transparent;background:var(--ink-2);display:flex;align-items:center;justify-content:center;font-size:.82rem;color:var(--text);cursor:pointer;position:relative;transition:.2s}
.day.muted{color:var(--dimmer);background:transparent;cursor:default}
.day.off{color:var(--dimmer);background:transparent;cursor:not-allowed;text-decoration:line-through}
.day.avail:hover{border-color:var(--line-2);background:var(--surface-2)}
.day.avail::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--accent)}
.day.sel{background:var(--accent);color:var(--accent-ink);font-weight:600}.day.sel::after{display:none}
.slots-head{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:.9rem}
.slots-head b{color:var(--text);font-weight:500}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.slot{border:1px solid var(--line-2);border-radius:10px;padding:.7rem .4rem;text-align:center;font-family:var(--font-mono);font-size:.72rem;cursor:pointer;color:var(--text);background:var(--ink-2);transition:.2s}
.slot:hover{border-color:var(--accent);color:var(--accent)}
.slot.off{color:var(--dimmer);border-color:var(--line);cursor:not-allowed;text-decoration:line-through}
.slot.sel{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.eng{margin-top:1.4rem}
.eng h4{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:.7rem}
.eng-list{display:flex;gap:.6rem;flex-wrap:wrap}
.eng-opt{display:flex;align-items:center;gap:.6rem;border:1px solid var(--line-2);border-radius:40px;padding:.5rem .9rem .5rem .5rem;cursor:pointer;transition:.2s}
.eng-opt:hover{border-color:var(--accent)}.eng-opt.sel{border-color:var(--accent);background:rgba(var(--accent-rgb),.07)}
.eng-av{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.85rem}
.eng-opt .nm{font-size:.82rem}
.booknav{display:flex;justify-content:space-between;gap:.8rem;margin-top:1.4rem}
.aside{position:sticky;top:94px;align-self:start}
.recap{background:linear-gradient(160deg,var(--surface),var(--ink-2));border:1px solid var(--line);border-radius:20px;padding:1.6rem;overflow:hidden;position:relative}
.recap::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 100% 0,rgba(var(--accent-rgb),.09),transparent 60%);pointer-events:none}
.recap h3{position:relative;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:1.2rem}
.ritem{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line);position:relative}
.ritem .l{font-size:.9rem}.ritem .l small{display:block;color:var(--dim);font-size:.72rem;margin-top:.15rem}
.ritem .p{font-family:var(--font-mono);font-size:.82rem;white-space:nowrap}
.rmeta{position:relative;display:flex;flex-direction:column;gap:.5rem;margin:1rem 0;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;color:var(--dim);text-transform:uppercase}
.rmeta b{color:var(--text);font-weight:500}
.rtotal{position:relative;display:flex;align-items:baseline;justify-content:space-between;margin:1.2rem 0;padding-top:1rem;border-top:1px solid var(--line-2)}
.rtotal .k{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.rtotal .v{font-family:var(--font-display);font-size:2.6rem;color:var(--accent);line-height:1}
.rnote{position:relative;font-size:.72rem;color:var(--dimmer);margin-top:.9rem;line-height:1.5}
.secure{position:relative;display:flex;align-items:center;gap:.5rem;margin-top:1rem;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ok)}

/* ---- CTA band (sous-pages) ---- */
.ctaband{margin-top:clamp(3rem,6vw,5rem);border:1px solid var(--line);border-radius:22px;background:linear-gradient(140deg,#15150f,var(--ink-2));padding:clamp(2rem,5vw,3.5rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;position:relative;overflow:hidden}
.ctaband::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 90% 0,rgba(var(--accent-rgb),.12),transparent 60%)}
.ctaband h3{position:relative;font-family:var(--font-display);font-size:clamp(1.8rem,4vw,3rem);text-transform:uppercase;line-height:1.02}
.ctaband .actions{position:relative;display:flex;gap:.8rem;flex-wrap:wrap}

/* ---- Lightbox ---- */
.lb{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;background:rgba(5,5,6,.94);backdrop-filter:blur(8px);padding:4vh 2vw}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:84vh;object-fit:contain;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-x{position:absolute;top:4vh;right:5vw;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:rgba(20,20,22,.7);color:#fff;cursor:pointer;font-size:1.2rem}
.lb-nav{position:absolute;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:rgba(20,20,22,.7);color:#fff;cursor:pointer;font-size:1.3rem}
.lb-prev{left:3vw}.lb-next{right:3vw}

/* ---- misc ---- */
.note{position:fixed;left:50%;bottom:14px;translate:-50% 0;z-index:9000;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);background:rgba(14,14,16,.85);border:1px solid var(--line);border-radius:40px;padding:.5rem .95rem;backdrop-filter:blur(8px)}
@media(max-width:620px){.note{display:none}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .line-mask>span{transform:none;opacity:1}
  [data-reveal]{opacity:1;transform:none}
}

/* ---- Deck Spotify (section 003 — Réalisations) ---------------------
   Cartes superposées « façon pile », la carte du dessus se glisse à la
   souris / au doigt (voir maquette.js : bloc #deck). On garde le lecteur
   Spotify officiel interactif ; on glisse via l'en-tête / les marges. */
.deck-wrap{max-width:460px;margin-inline:auto}
.deck{position:relative;height:476px;margin-top:clamp(1.6rem,3.5vw,2.6rem);touch-action:pan-y}
.scard{position:absolute;left:50%;top:0;width:100%;transform:translateX(-50%);
  background:linear-gradient(160deg,var(--surface),var(--ink-2));border:1px solid var(--line);border-radius:20px;
  padding:14px;box-shadow:0 26px 60px -26px rgba(0,0,0,.75);
  transition:transform .45s var(--ease),opacity .4s;will-change:transform;cursor:grab;user-select:none;-webkit-user-select:none}
.scard.is-front:active{cursor:grabbing}
.scard:not(.is-front){pointer-events:none}
.scard-head{display:flex;align-items:center;justify-content:space-between;margin:.15rem .3rem .75rem;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.scard-head .sp{display:inline-flex;align-items:center;gap:.45rem;color:var(--accent)}
.scard-head .sp .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.scard-head .grip{color:var(--dimmer);letter-spacing:.14em}
.scard-frame{border-radius:12px;overflow:hidden;background:#0b0b0d}
.scard-frame iframe{display:block;width:100%;height:352px;border:0}
.deck-ctrl{display:flex;align-items:center;justify-content:center;gap:1.3rem;margin-top:1.4rem}
.deck-btn{width:46px;height:46px;flex-shrink:0;border-radius:50%;border:1px solid var(--line-2);background:transparent;
  color:var(--text);cursor:pointer;font-size:1.35rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:.25s}
.deck-btn:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.deck-dots{display:flex;gap:.55rem;align-items:center}
.deck-dot{width:8px;height:8px;border-radius:50%;border:1px solid var(--line-2);background:transparent;cursor:pointer;padding:0;transition:.25s}
.deck-dot.on{background:var(--accent);border-color:var(--accent);transform:scale(1.2)}
.deck-hint{text-align:center;margin-top:1rem;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dimmer)}