/* ===================================================================
   STUCK — CSS PROPRE À LA HOME (chargé uniquement sur la page d'accueil).
   Le reste vient de stuck.css. Porté de mockups/home.html (bloc <style>).
   Seul changement vs maquette : l'URL du wireframe de révélation est
   relative à CE fichier (assets/), donc « standFEDA-blueprint.webp ».
   =================================================================== */

/* Variables propres à home (le reste vient de stuck.css) */
:root{
  --paper-2:#EEEFF1;        /* tint / comble l'espace révélé derrière le footer lent (= --tint) */
  --line-2:rgba(22,22,26,.30);
  --dot:rgba(22,22,26,.15);
  --plan:rgba(22,22,26,.20);
}
body{background:var(--paper-2)}   /* la .page peint --paper par-dessus */
/* scroll-snap plein-page (desktop + mouvement autorisé) */
@media(min-width:761px) and (prefers-reduced-motion:no-preference){html{scroll-snap-type:y proximity}}
.dsp{font-family:var(--sans),sans-serif}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#3a3b40;display:inline-flex;gap:.6em;align-items:center}
.eyebrow::before{content:"";width:12px;height:12px;background:var(--yellow);box-shadow:2px 2px 0 var(--ink)}

/* tracé SVG animé */
.draw line,.draw path,.draw rect,.draw polygon{stroke-dasharray:1700;stroke-dashoffset:1700}
.in .draw line,.in .draw path,.in .draw rect,.in .draw polygon{animation:draw 2.6s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.draw *{stroke-dashoffset:0}}

/* ============================ HERO ============================ */
.hero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:34px;align-items:center;
  padding-block:clamp(44px,7vw,96px);min-height:calc(100svh - 4.25rem)}
@media(min-width:980px){.hero__inner{grid-template-columns:1.08fr .92fr;gap:48px}}
.hero__copy h1{font-family:var(--sans);font-weight:700;font-size:clamp(2.5rem,5.6vw,5rem);line-height:1;letter-spacing:-.035em;margin:18px 0 0}
.hero__lead{font-size:clamp(.98rem,1.15vw,1.1rem);max-width:42ch;margin-top:22px;color:#44454b;line-height:1.6}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__coords{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap}
.coord{font-family:var(--mono);font-size:.72rem;color:#6b6c72;text-transform:uppercase;letter-spacing:.04em}
.coord b{color:var(--ink);display:block;font-size:.88rem}
.stage{position:relative;aspect-ratio:1/.96;border:1px solid var(--line);background:#FAFBFC;overflow:hidden}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
@keyframes ttfloat{50%{transform:translate(-50%,-56%)}}
.lstage{position:relative;aspect-ratio:1/1;border:1px solid var(--line);background:#FAFBFC;overflow:hidden}
.lstage .tt{position:absolute;z-index:3;left:50%;top:50%;width:84%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 20px 24px rgba(22,22,26,.20));animation:ttfloat 7s ease-in-out infinite;will-change:transform}
.lstage .scalem,.stage .scalem{position:absolute;right:12px;top:12px;z-index:6;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--ink);background:color-mix(in srgb,var(--paper) 88%,transparent);padding:4px 8px;border:1px solid var(--line)}
.lstage .tagm,.stage .tagm{position:absolute;left:12px;bottom:12px;z-index:6;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--ink);text-transform:uppercase;background:color-mix(in srgb,var(--paper) 88%,transparent);padding:5px 9px;border:1px solid var(--line)}

/* ============================ STRIP (bandeau) ============================ */
.strip{position:relative;overflow:hidden;background:var(--paper-2);padding:14px 0;border-block:1px solid var(--line)}
.strip--dark{background:var(--ink);border-color:var(--ink);min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,1vw,.75rem);padding:2.5rem 0}
.strip__row{display:flex;overflow:hidden}
.strip__in{display:flex;gap:36px;white-space:nowrap;width:max-content;line-height:.95;animation:scroll 48s linear infinite}
.strip__in--rev{animation-direction:reverse}
.strip span{font-family:var(--sans);font-weight:400;font-size:clamp(3rem,9vw,7rem);line-height:.95;letter-spacing:-.025em;text-transform:uppercase;display:inline-flex;gap:.4em;align-items:center;color:#1c1d23}
.strip--dark span{color:var(--paper)}
.strip span::after{content:"";width:16px;height:16px;background:var(--yellow);box-shadow:1.5px 1.5px 0 var(--ink)}
.strip--dark span::after{box-shadow:1.5px 1.5px 0 rgba(240,242,245,.45)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============================ SECTION + INTRO (variantes home) ============================ */
.section{padding:clamp(72px,11vw,10rem) 0;position:relative}
.intro{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:880px){.intro{grid-template-columns:.78fr 1.22fr;gap:4rem}}
.intro h2{font-family:var(--sans);font-weight:600;font-size:clamp(1.9rem,3.4vw,3.1rem);line-height:1.04;letter-spacing:-.025em;margin-top:16px}
.intro p{font-size:clamp(1rem,1.15vw,1.12rem);max-width:54ch;color:#44454b;line-height:1.65}
.intro p+p{margin-top:1em}
.intro__meta{display:flex;gap:44px;margin-top:34px;flex-wrap:wrap}
.m b{font-family:var(--sans);font-weight:700;font-size:2rem;display:block;line-height:1}
.m span{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;color:#6b6c72}

/* ============================ POLES — liste hover (façon vucko.co) ============================ */
.snap{scroll-snap-align:start;scroll-snap-stop:always}
.section.snap{min-height:100svh;display:flex;align-items:center}
.poles{position:relative;background:var(--paper);min-height:100svh;display:flex;align-items:center;overflow:hidden}
.poles__items{position:relative;z-index:1;width:100%;padding-block:clamp(60px,9vh,7rem)}
.poles__head{padding-left:48%;margin-bottom:clamp(18px,3vh,2rem)}
.pitem{position:static;display:flex;justify-content:flex-start;padding-left:48%}
.ptitle{display:inline-flex;align-items:baseline;white-space:nowrap;font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.7rem,7.2vw,6.8rem);line-height:1.06;letter-spacing:-.035em;padding:.05em 0;color:rgba(22,22,26,.26);cursor:pointer;
  transition:color .35s var(--ease),transform .35s var(--ease)}
.ptitle:hover{transform:translateX(-12px)}
.ptitle.is-active{color:var(--ink)}
.ppane{position:absolute;top:0;left:3%;width:38%;text-align:left;transform-origin:left center;
  opacity:0;pointer-events:none;transform:scale(.9) translateY(34px);
  transition:opacity .5s var(--ease),transform .62s var(--ease),top .55s var(--ease);will-change:opacity,transform}
.ppane.is-active{opacity:1;pointer-events:auto;transform:none;z-index:2}
@media(max-width:899px){.ppane{left:2%;width:44%}.pitem,.poles__head{padding-left:50%}}
.ppane__copy{margin-top:18px;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease) .12s,transform .6s var(--ease) .12s}
.ppane.is-active .ppane__copy{opacity:1;transform:none}
.flag{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;background:var(--yellow);color:var(--ink);padding:5px 10px;text-transform:uppercase;display:inline-block;width:fit-content;margin-bottom:14px;box-shadow:2px 2px 0 var(--ink)}
.ppane__copy p{font-size:clamp(.96rem,1.05vw,1.06rem);max-width:42ch;color:#44454b;line-height:1.6}
.pole__media{position:relative;aspect-ratio:4/3;max-height:38vh;overflow:hidden;background:#FAFBFC;border:1px solid var(--line)}
.pole__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pole__media .cap{position:absolute;left:12px;bottom:12px;z-index:2;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--ink);text-transform:uppercase;background:color-mix(in srgb,var(--paper) 88%,transparent);padding:5px 9px;border:1px solid var(--line)}
.cubestage{cursor:ew-resize;background:#FAFBFC;touch-action:pan-y}
.cubestage .cubeimg{position:absolute;inset:4%;width:92%;height:92%;object-fit:contain;-webkit-user-drag:none;user-select:none;pointer-events:none;filter:drop-shadow(0 16px 22px rgba(22,22,26,.18))}
.cubestage .cap{pointer-events:none}
.pole__media .webframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.revealmedia{cursor:crosshair}
.revealmedia .rm-wire{position:absolute;inset:0;z-index:1;background:#0a0a0c url("standFEDA-blueprint.webp") center/cover no-repeat;opacity:0;transition:opacity .45s var(--ease);
  -webkit-mask-image:radial-gradient(circle 200px at var(--mx,50%) var(--my,50%),#000 46%,rgba(0,0,0,.35) 72%,transparent 100%);
          mask-image:radial-gradient(circle 200px at var(--mx,50%) var(--my,50%),#000 46%,rgba(0,0,0,.35) 72%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.revealmedia:hover .rm-wire{opacity:1}
.revealmedia .cap{z-index:2}
@media (prefers-reduced-motion:reduce),(max-width:760px){
  .snap{scroll-snap-align:none!important}
  .poles{display:block;min-height:0}
  .poles__head{padding-left:0;margin-bottom:6px}
  .pitem{display:block;padding:26px 0;border-top:1px solid var(--line);text-align:left}
  .pitem:first-child{border-top:0}
  .ptitle{color:var(--ink);transform:none!important;white-space:normal;font-size:clamp(1.8rem,9vw,3rem)}
  .ppane{position:static!important;width:auto;top:auto!important;transform:none!important;opacity:1!important;pointer-events:auto;margin-top:18px}
  .ppane .pole__media,.ppane .ppane__copy{opacity:1!important;transform:none!important}
  .section.snap{min-height:0;display:block}
}

/* ============================ STANDS FOCUS ============================ */
.focus{position:relative;background:var(--ink);color:var(--paper);overflow:hidden}
.focus .wrap{position:relative;z-index:2}
.focus__top{display:grid;grid-template-columns:1fr;gap:24px;align-items:end;margin-bottom:46px}
@media(min-width:820px){.focus__top{grid-template-columns:1.3fr .7fr}}
.focus__top .eyebrow{color:#cfd0d4}
.focus__top h2{font-family:var(--sans);font-weight:700;font-size:clamp(2.1rem,5.2vw,4rem);line-height:1;letter-spacing:-.03em;margin-top:16px}
.focus__top h2 em{font-style:normal;color:var(--yellow)}
.focus__top p{color:rgba(240,242,245,.72);max-width:36ch}
.steps{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(240,242,245,.16);border:1px solid rgba(240,242,245,.16)}
@media(min-width:720px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--ink);padding:28px 24px;min-height:180px;display:flex;flex-direction:column;gap:14px;justify-content:space-between;transition:background .3s}
.step:hover{background:#202229}
.step .ico{width:38px;height:38px;color:var(--yellow)}
.step .sn{font-family:var(--mono);color:var(--yellow);font-size:.8rem}
.step h4{font-family:var(--sans);font-weight:600;font-size:1.25rem;letter-spacing:-.01em}
.step p{font-size:.88rem;color:rgba(240,242,245,.6)}
.focus__cta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:42px}

/* ============================ INTRO PLEIN ÉCRAN + WORDMARK ============================ */
.introhero{position:fixed;inset:0;z-index:1;background:#0a0b0d;overflow:hidden;display:grid;place-items:center}
.introhero__lines{position:absolute;inset:0;z-index:0}
.introhero__lines canvas{display:block}
.wm{position:relative;z-index:1;display:inline-flex;align-items:flex-start;justify-content:center;
  font-family:var(--sans);font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff;
  font-size:clamp(3.2rem,12.5vw,10rem);filter:drop-shadow(0 12px 50px rgba(0,0,0,.55));
  user-select:none;will-change:transform;transition:transform .7s var(--ease)}
.wm__slot{position:relative;height:var(--capH,.72em);overflow:hidden;flex:0 0 auto;transition:width .7s var(--ease)}
.wm__lift{display:block;transform:translateY(135%);opacity:0;transition:transform 1s var(--ease),opacity .6s var(--ease)}
.introhero.in .wm__lift{transform:translateY(0);opacity:1}
.wm__reel{display:block;will-change:transform}
.wm__g{display:block;height:var(--capH,.72em);overflow:hidden}
.wm__c{display:block;line-height:1;width:100%;text-align:center;transform:translateY(var(--mt,0))}
@media (prefers-reduced-motion:reduce){.wm__lift{transform:none!important;opacity:1!important}.wm,.wm__slot,.wm__reel{transition:none!important}}

/* .page : recouvre l'intro au scroll (parallaxe) */
.page{position:relative;z-index:2;background:var(--paper);margin-top:100svh}
@media (prefers-reduced-motion:reduce){.page{margin-top:0}.introhero{position:absolute}}