/* =====================================================================
   Edgio — Site vitrine
   Direction : dark futuriste, dégradés magenta → indigo, glassmorphism,
   halos, grain léger. Typo Sora (display) + Manrope (corps).
   ===================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ---------- Tokens ---------- */
:root{
  --bg:#08090d;
  --bg-2:#0b0d13;
  --card:#12141d;
  --card-2:#161925;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --txt:#eef1f7;
  --dim:#9aa3b6;
  --dim-2:#6b7386;

  --magenta:#c81fe0;
  --violet:#8a2be8;
  --indigo:#5638e8;
  --accent:#a26bff;
  --accent-2:#d33cf0;

  --green:#34d399;
  --red:#f8717a;

  --grad:linear-gradient(120deg,#c81fe0 0%,#8a2be8 48%,#5638e8 100%);
  --grad-soft:linear-gradient(120deg,#d33cf0 0%,#a26bff 100%);

  --gutter:24px;
  --radius:22px;
  --radius-sm:14px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1);

  --shadow-glow:0 30px 90px -30px rgba(138,43,232,.55);

  --font-display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ---------- Base ---------- */
html{scroll-behavior:auto}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--txt);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* Grain overlay */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
section{position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{display:none}

h1,h2,h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.section-head{max-width:720px;margin:0 auto 48px;text-align:center}
.section-head h2{font-size:clamp(2.1rem,5vw,3.4rem);margin:18px 0 16px}
.section-head p{color:var(--dim);font-size:clamp(1rem,2.2vw,1.15rem);max-width:560px;margin:0 auto}
.grad-text{background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:100px;font-weight:700;font-size:1rem;letter-spacing:-.01em;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
  will-change:transform;white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 40px -12px rgba(200,31,224,.7)}
.btn-primary:hover{box-shadow:0 18px 60px -12px rgba(200,31,224,.9)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--txt);border:1px solid var(--line-strong);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25)}
.btn-lg{padding:18px 36px;font-size:1.08rem}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,9,13,.72);backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:800;font-size:1.28rem;letter-spacing:-.02em}
.brand img{width:34px;height:34px;border-radius:9px}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{color:var(--dim);font-size:.95rem;font-weight:500;transition:color .25s}
.nav-links a:hover{color:var(--txt)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-cta .btn{padding:11px 22px;font-size:.92rem}
.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{width:18px;height:2px;background:var(--txt);border-radius:2px;transition:.3s var(--ease)}
.mobile-menu{
  position:fixed;inset:72px 0 auto 0;z-index:999;
  background:rgba(8,9,13,.96);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
  padding:24px;display:none;flex-direction:column;gap:6px;
}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:14px 12px;font-size:1.1rem;font-weight:600;color:var(--dim);border-radius:12px}
.mobile-menu a:hover{background:rgba(255,255,255,.05);color:var(--txt)}
.mobile-menu .btn{margin-top:12px}

/* ---------- Aurora background ---------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.aurora .b1{width:60vw;height:60vw;top:-18vw;left:-12vw;background:radial-gradient(circle,#c81fe0,transparent 65%);animation:drift1 22s var(--ease) infinite alternate}
.aurora .b2{width:55vw;height:55vw;top:-6vw;right:-16vw;background:radial-gradient(circle,#5638e8,transparent 65%);animation:drift2 26s var(--ease) infinite alternate}
.aurora .b3{width:46vw;height:46vw;top:34vh;left:24vw;background:radial-gradient(circle,#8a2be8,transparent 65%);opacity:.4;animation:drift3 30s var(--ease) infinite alternate}
.aurora::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,transparent 40%,var(--bg) 78%)}
@keyframes drift1{to{transform:translate3d(8vw,6vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-6vw,10vh,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(10vw,-8vh,0) scale(1.2)}}

.grid-overlay{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 70%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 70%);
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px 0 80px;position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:100px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-strong);
  font-size:.85rem;font-weight:600;color:var(--dim);backdrop-filter:blur(10px);
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.hero-badge b{color:var(--txt);font-weight:700}
.hero h1{
  font-size:clamp(2.9rem,4.6vw,3.9rem);margin:24px 0 20px;letter-spacing:-.04em;
}
.hero h1 .line{display:block;overflow:hidden}
.hero p.lead{font-size:clamp(1.08rem,2.4vw,1.32rem);color:var(--dim);max-width:520px;margin-bottom:34px;line-height:1.55}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-trust{display:flex;align-items:center;gap:10px;margin-top:26px;color:var(--dim-2);font-size:.9rem}
.hero-trust .gift{color:var(--accent);font-weight:700}
.hero-trust svg{width:16px;height:16px;color:var(--green)}

/* phone in hero */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px}
.hero-visual .glow-ring{
  position:absolute;width:min(120%,100vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(162,107,255,.28),transparent 62%);
  filter:blur(20px);
}

/* ---- Hero visual : captures réelles de l'app ---- */
.hero-stack{position:relative;width:100%;max-width:460px;margin:0 auto;padding:10px 0 26px}
.hero-stack .hero-phone{width:270px;margin:0 auto;will-change:transform,opacity}
.float-shot{
  position:absolute;margin:0;padding:12px;border-radius:16px;
  border:1px solid var(--line-strong);
  background:rgba(18,20,29,.86);backdrop-filter:blur(14px);
  box-shadow:0 26px 60px -22px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03);
  will-change:transform,opacity;
}
.float-shot figcaption{
  font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:9px;
}
.float-shot img{display:block;width:100%;height:auto;border-radius:6px}
.fs-1{width:238px;top:14%;left:-17%;animation:floatA 7s ease-in-out infinite}
.fs-2{width:236px;bottom:8%;right:-12%;animation:floatB 8s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.fs-1,.fs-2{animation:none}}

/* phone component (shared) */
.phone{
  position:relative;width:290px;aspect-ratio:1170/2200;
  border-radius:26px;padding:11px;
  background:linear-gradient(160deg,#2a2d3a,#0c0d13);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.04);
  will-change:transform;
}
/* Encoche retirée : les captures ont leur propre en-tête, on garde l'écran plein
   pour ne jamais masquer le titre de l'app. */
.phone-screen{
  position:relative;width:100%;height:100%;border-radius:15px;overflow:hidden;background:#0a0b10;
}
/* Le décalage de 8 px poussait la capture vers le bas : comme l'image remplit
   déjà la hauteur exacte de l'écran, il ne cachait rien en bas mais ouvrait une
   bande noire en haut, juste au-dessus du titre de l'écran. Cadrage au ras. */
.phone-screen img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
}

/* =====================================================================
   PINNED CINEMATIC
   ===================================================================== */
.cine{position:relative}
.cine-pin{height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.cine-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;width:100%}
.cine-copy{position:relative;min-height:340px}
.cine-state{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(30px);will-change:transform,opacity;
}
.cine-state .num{
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  color:var(--accent);letter-spacing:.05em;margin-bottom:18px;
}
.cine-state h3{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:18px;letter-spacing:-.03em}
.cine-state p{color:var(--dim);font-size:1.1rem;max-width:440px;line-height:1.6}
.cine-state .tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.cine-state .tags span{
  padding:7px 14px;border-radius:100px;font-size:.85rem;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--dim);
}
.cine-state .tags span.win{color:var(--green);border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.08)}
.cine-state .tags span.loss{color:var(--red);border-color:rgba(248,113,122,.3);background:rgba(248,113,122,.08)}

.cine-phone-wrap{display:flex;justify-content:center;perspective:1400px}
.cine-phone{width:300px;will-change:transform}
.cine-phone .phone-screen img{opacity:0}
.cine-phone .phone-screen img.active{opacity:1}
.cine-progress{
  position:absolute;bottom:6vh;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;z-index:6;
}
.cine-progress .seg{flex:0 0 auto;width:36px;height:5px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden}
.cine-progress .seg i{display:block;height:100%;width:100%;background:var(--grad-soft);transform:scaleX(0);transform-origin:left}

/* =====================================================================
   FEATURES
   ===================================================================== */
.features{padding:96px 0}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  position:relative;padding:30px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--line);overflow:hidden;
  transition:border-color .4s var(--ease),transform .1s linear;
  will-change:transform;transform-style:preserve-3d;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;opacity:0;
  background:var(--grad-soft);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .4s;
}
.card:hover::before{opacity:.6}
.card .spot{
  position:absolute;width:280px;height:280px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(162,107,255,.18),transparent 60%);
  opacity:0;transition:opacity .3s;transform:translate(-50%,-50%);left:var(--mx,50%);top:var(--my,50%);
}
.card:hover .spot{opacity:1}
.card .ic{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(200,31,224,.22),rgba(86,56,232,.22));
  border:1px solid var(--line-strong);margin-bottom:20px;
}
.card .ic svg{width:26px;height:26px;color:var(--accent)}
.card h3{font-size:1.3rem;margin-bottom:10px;letter-spacing:-.02em}
.card p{color:var(--dim);font-size:.98rem}
.card.wide{grid-column:span 2}

/* =====================================================================
   TRADERS (segments)
   ===================================================================== */
.traders{padding:110px 0}
.seg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:14px}
.seg-grid .seg{
  position:relative;padding:28px 24px 30px;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid var(--line);overflow:hidden;transition:transform .4s var(--ease),border-color .4s;
}
.seg-grid .seg:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.seg-grid .seg .k{font-family:var(--font-display);font-weight:800;font-size:2.4rem;background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.seg-grid .seg h3{font-size:1.15rem;margin:16px 0 8px}
.seg-grid .seg p{color:var(--dim);font-size:.92rem}
.traders-note{text-align:center;color:var(--dim);margin-top:40px;font-size:1.05rem}
.traders-note b{color:var(--txt)}

/* =====================================================================
   HOW (steps)
   ===================================================================== */
.how{padding:110px 0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
.step{position:relative;padding:34px 28px;border-radius:var(--radius);background:rgba(255,255,255,.02);border:1px solid var(--line)}
.step .n{
  font-family:var(--font-display);font-weight:800;font-size:3.4rem;line-height:1;
  background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9;
}
.step h3{font-size:1.35rem;margin:16px 0 10px}
.step p{color:var(--dim)}
.step-line{position:absolute;top:52px;left:60%;width:80%;height:1px;background:linear-gradient(90deg,var(--line-strong),transparent)}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{padding:110px 0}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.qa{border:1px solid var(--line);border-radius:var(--radius-sm);background:rgba(255,255,255,.02);overflow:hidden;transition:border-color .3s}
.qa.open{border-color:var(--line-strong)}
.qa button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;text-align:left;font-family:var(--font-display);font-weight:600;font-size:1.08rem;letter-spacing:-.01em}
.qa .plus{width:24px;height:24px;flex-shrink:0;position:relative;transition:transform .35s var(--ease)}
.qa .plus::before,.qa .plus::after{content:"";position:absolute;background:var(--accent);border-radius:2px;top:50%;left:50%;transform:translate(-50%,-50%)}
.qa .plus::before{width:14px;height:2px}
.qa .plus::after{width:2px;height:14px;transition:transform .35s var(--ease)}
.qa.open .plus{transform:rotate(180deg)}
.qa.open .plus::after{transform:translate(-50%,-50%) scaleY(0)}
.qa .ans{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.qa .ans p{padding:0 24px 24px;color:var(--dim);font-size:.98rem;line-height:1.65}
.qa .ans p b{color:var(--txt)}

/* =====================================================================
   CTA FINAL
   ===================================================================== */
/* Une phrase de 520 px centrée dans un cadre de 1180 laissait un tiers de
   largeur vide de chaque côté, et 44 px de padding par-dessus. La phrase prend
   la place à gauche, le bouton la rejoint à droite : même contenu, deux fois
   moins de hauteur, plus de vide. */
.cta{padding:22px 0 64px}
.cta-box{
  position:relative;border-radius:28px;padding:30px 36px;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  background:linear-gradient(150deg,rgba(200,31,224,.14),rgba(86,56,232,.08));
  border:1px solid var(--line-strong);
}
.cta-box .btn{flex:0 0 auto}
.cta-box::before{
  content:"";position:absolute;width:70%;height:200%;top:-50%;left:15%;
  background:radial-gradient(circle,rgba(162,107,255,.25),transparent 60%);filter:blur(30px);
}
.cta-box > *{position:relative;z-index:1}
.cta-box p{
  color:var(--txt);font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.08rem,2vw,1.32rem);max-width:620px;margin:0;line-height:1.4;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{border-top:1px solid var(--line);padding:64px 0 40px;background:var(--bg-2)}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr .9fr;gap:40px;margin-bottom:48px}
.foot-brand .brand{margin-bottom:16px}
.foot-brand p{color:var(--dim);max-width:320px;font-size:.95rem}
.foot-social{display:flex;gap:12px;margin-top:20px}
.foot-social a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);color:var(--dim);transition:color .25s,border-color .25s,transform .25s}
.foot-social a:hover{color:var(--txt);border-color:var(--accent);transform:translateY(-2px)}
.foot-social svg{width:18px;height:18px}
.foot-col h4{font-family:var(--font-display);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim-2);margin-bottom:16px;font-weight:700}
.foot-col a{display:block;color:var(--dim);padding:6px 0;font-size:.95rem;transition:color .25s}
.foot-col a:hover{color:var(--txt)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:26px;border-top:1px solid var(--line);color:var(--dim-2);font-size:.88rem}
.foot-bottom .risk{max-width:640px;line-height:1.5}

/* ---------- Curseur bougie (chandelier) ---------- */
/* Activé par JS (classe sur <html>) uniquement en pointeur fin + motion OK ;
   sinon le curseur natif est conservé (progressive enhancement). */
html.candle-cursor,
html.candle-cursor *{cursor:none!important}
.cursor-candle{
  position:fixed;left:0;top:0;z-index:10000;pointer-events:none;
  width:20px;height:40px;margin-left:-10px;margin-top:-20px;
  opacity:0;will-change:transform;
  filter:drop-shadow(0 0 5px rgba(52,211,153,.65));
}
.cursor-candle .cc-scale,.cursor-candle .cc-squash{width:100%;height:100%;transform-origin:50% 50%}
.cursor-candle svg{display:block;width:100%;height:100%}
/* état survol d'un élément cliquable : la bougie grandit + glow accru */
.cursor-candle.is-hot{filter:drop-shadow(0 0 9px rgba(52,211,153,.9))}

/* ---------- Reveal base ---------- */
.rv{opacity:0;transform:translateY(34px);filter:blur(6px);will-change:transform,opacity,filter}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1000px){
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .card.wide{grid-column:span 2}
  .seg-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .step-line{display:none}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  /* ---- Barre de navigation ---- */
  .nav-links{display:none}
  .nav-cta .btn-ghost{display:none}
  .burger{display:flex}
  .nav-inner{height:62px}
  .brand{font-size:1.22rem;gap:9px}
  .brand img{width:34px;height:34px;border-radius:9px}
  .nav-cta{gap:10px}
  .nav-cta .btn{padding:8px 16px;font-size:.85rem}
  .burger{width:36px;height:36px;border-radius:10px}
  .burger span{width:15px}
  .mobile-menu{inset:62px 0 auto 0}

  /* ---- Hero : le texte d'abord, le visuel ensuite ----
     Le téléphone passait devant le titre : on arrivait sur une capture sans
     savoir ce qu'on regardait. L'ordre du DOM est déjà le bon, il suffit de ne
     plus le renverser. La hauteur plein écran saute aussi — elle étirait la
     section bien au-delà de son contenu. */
  .hero{min-height:0;padding:88px 0 44px}
  .hero-inner{grid-template-columns:1fr;gap:24px;text-align:center}
  .hero h1{font-size:clamp(1.95rem,8.2vw,2.6rem);margin:16px 0 14px}
  .hero p.lead{margin:0 auto 24px;font-size:1rem;line-height:1.5}
  .hero-badge{margin:0 auto;font-size:.78rem;padding:7px 14px}
  .hero-cta{justify-content:center}
  .hero-visual{min-height:auto;margin:0}
  .eyebrow{justify-content:center}

  /* ---- Séquence cinématique ----
     La barre de navigation est fixe : centrer dans la fenêtre entière masquait
     le haut du téléphone derrière elle. On centre dans ce qui reste visible. */
  .cine-pin{flex-direction:column;justify-content:center;padding:74px 0 26px}
  .cine-inner{grid-template-columns:1fr;gap:14px}
  .cine-phone-wrap{order:1;margin-top:0}
  .cine-copy{order:2;min-height:210px;text-align:center}
  .cine-phone{width:172px}
  .cine-state{align-items:center}
  .cine-state .num{font-size:.85rem;margin-bottom:10px}
  .cine-state h3{font-size:1.35rem;margin-bottom:12px}
  .cine-state p{margin:0 auto;font-size:.92rem}
  .cine-state .tags{justify-content:center;margin-top:16px}
  .cine-state .tags span{padding:5px 11px;font-size:.78rem}
  /* Même centré sous la barre de navigation, l'ensemble restait haut dans
     l'écran. On le descend d'un cran — en transform, pour ne pas allonger la
     boîte : la hauteur de la section est fixée à 100svh et tout ce qui
     déborderait serait rogné. */
  .cine-inner{transform:translateY(30px)}
  .cine-progress{position:static;transform:translateY(30px);margin-top:16px}

  /* ---- Maquettes de téléphone : des bords, pas des bourrelets ---- */
  .phone{padding:6px;border-radius:20px}
  .phone-screen{border-radius:15px}

  .section-head{margin-bottom:30px}
  .section-head h2{margin:12px 0 12px}
  .cta{padding:18px 0 48px}
  .footer{padding:44px 0 28px}
}
@media(max-width:600px){
  :root{--gutter:18px}
  .card.wide{grid-column:span 1}
  .seg-grid{grid-template-columns:1fr 1fr}
  /* Côte à côte sous 600 px, la phrase se réduisait à deux mots par ligne. */
  .cta-box{flex-direction:column;text-align:center;gap:20px;padding:28px 22px}
  .cta-box p{font-size:1.02rem}
  /* Un bouton pleine largeur n'est pas plus cliquable, il est juste plus gros. */
  .btn-lg{padding:14px 26px;font-size:1rem}
  .hero-cta .btn{width:auto}
  .nav-cta .btn{width:auto}
}

/* =====================================================================
   REDUCED MOTION — fallback statique propre
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv,.reveal-word{opacity:1!important;transform:none!important;filter:none!important}
  .aurora .blob{animation:none!important}
  .cine-pin{height:auto;display:block;padding:80px 0}
  .cine-inner{grid-template-columns:1fr;gap:60px}
  .cine-copy{display:block!important;position:static;min-height:auto}
  .cine-state{position:static;opacity:1;transform:none;margin-bottom:50px}
  .cine-phone .phone-screen img{position:static;opacity:0}
  .cine-phone .phone-screen img:first-child{opacity:1}
  .cine-progress{display:none}
}

/* =====================================================================
   POSITIONNEMENT (pitch) — le fond du produit
   ===================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.pitch{padding:110px 0}
.pitch-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.pitch-copy p{color:var(--dim);font-size:1.05rem;line-height:1.75;margin-bottom:18px}
.pitch-copy p b{color:var(--txt);font-weight:700}
.pitch-copy .big{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.4;color:var(--txt);margin-bottom:26px;
}
.pitch-copy .big b{background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent}
.pitch-copy .kicker{
  margin-top:28px;padding-left:18px;border-left:2px solid var(--accent);
  color:var(--txt);font-weight:600;font-size:1.05rem;
}
.pitch-copy .tags{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 8px}
.pitch-copy .tags span{
  position:relative;padding:7px 14px;border-radius:100px;font-size:.85rem;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--dim);
  transition:transform .35s var(--ease),color .3s ease,border-color .3s ease,
             background .3s ease,box-shadow .35s var(--ease);
}
/* Quatre mots qui résument le produit méritaient de ne pas être inertes — mais
   seulement là où survoler veut dire quelque chose : au doigt, :hover reste
   collé après le tap. */
@media (hover:hover){
  .pitch-copy .tags span:hover{
    transform:translateY(-3px);
    color:var(--txt);border-color:rgba(162,107,255,.45);
    background:linear-gradient(140deg,rgba(200,31,224,.18),rgba(86,56,232,.14));
    box-shadow:0 12px 26px -14px rgba(162,107,255,.85);
  }
}

.vs{
  position:sticky;top:110px;display:grid;gap:14px;padding:26px;
  border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
}
.vs-col h3{font-size:1.05rem;margin-bottom:14px;letter-spacing:-.01em}
.vs-col ul{display:grid;gap:9px}
.vs-col li{
  position:relative;padding-left:26px;font-size:.94rem;color:var(--dim);line-height:1.5;
}
.vs-col li b{color:var(--txt)}
.vs-col li::before{
  content:"";position:absolute;left:0;top:.15em;width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;line-height:1;font-weight:800;color:#fff;
}
.vs-them li::before{content:"✕";background:rgba(255,90,90,.85);box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.vs-them h3{color:var(--dim-2)}
.vs-us{
  padding:20px;border-radius:var(--radius-sm);
  background:linear-gradient(140deg,rgba(200,31,224,.10),rgba(86,56,232,.08));
  border:1px solid rgba(162,107,255,.28);
}
.vs-us h3{color:var(--txt)}
.vs-us li::before{content:"✓";background:#2ee6a6;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.vs-us li{color:#cfd4e2}
.vs-sep{
  justify-self:center;font-family:var(--font-display);font-weight:800;font-size:.75rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--dim-2);
}

/* =====================================================================
   SHOTS — captures d'écran encadrées
   ===================================================================== */
.shot{
  position:relative;margin:0;border-radius:16px;overflow:hidden;background:var(--card);
  border:1px solid var(--line-strong);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.03);
}
.shot img{display:block;width:100%;height:auto}
.shot-bar{
  display:flex;align-items:center;gap:5px;padding:5px 10px;
  background:rgba(255,255,255,.04);border-bottom:1px solid var(--line);
}
.shot-bar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16);flex:0 0 auto}
.shot-bar span{
  margin-left:10px;font-size:.76rem;color:var(--dim-2);letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.shot figcaption{
  padding:14px 18px;font-size:.85rem;color:var(--dim-2);
  border-top:1px solid var(--line);background:rgba(0,0,0,.2);
}
.shot.big{max-width:900px;margin:0 auto 46px}
.shot.big img{max-height:none}

/* =====================================================================
   ANALYSE — fonctionnalité signature
   ===================================================================== */
.analyse{padding:96px 0}

/* Deux paragraphes nus posés sous la capture avaient l'air tombés là. Ils
   deviennent deux cartes numérotées — filet dégradé, halo, pastille d'index —
   et sur grand écran elles remontent à droite de la capture, à la place du
   vide qu'elle laissait. */
.analyse-notes{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;max-width:900px;margin:0 auto 52px;counter-reset:note}
.analyse-notes .note{
  position:relative;overflow:hidden;padding:20px 22px 20px 24px;border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  transition:transform .4s var(--ease),border-color .4s ease,box-shadow .4s var(--ease);
}
.analyse-notes .note::before{
  content:"";position:absolute;left:0;top:20px;bottom:20px;width:2px;border-radius:2px;
  background:var(--grad-soft);
}
.analyse-notes .note::after{
  content:"";position:absolute;top:-64px;right:-52px;width:190px;height:190px;pointer-events:none;
  background:radial-gradient(circle,rgba(162,107,255,.20),transparent 66%);
}
.analyse-notes h3{
  position:relative;z-index:1;display:flex;align-items:center;gap:11px;
  font-size:1.02rem;letter-spacing:-.02em;margin-bottom:10px;line-height:1.25;
}
.analyse-notes h3::before{
  counter-increment:note;content:counter(note,decimal-leading-zero);
  flex:0 0 auto;display:grid;place-items:center;width:27px;height:27px;border-radius:9px;
  font-family:var(--font-display);font-size:.7rem;font-weight:800;letter-spacing:.02em;
  color:var(--accent);background:rgba(162,107,255,.12);border:1px solid rgba(162,107,255,.3);
}
.analyse-notes p{position:relative;z-index:1;color:var(--dim);font-size:.93rem;line-height:1.6}
.analyse-notes p b{color:var(--txt)}
@media (hover:hover){
  .analyse-notes .note:hover{
    transform:translateY(-4px);border-color:rgba(162,107,255,.35);
    box-shadow:0 26px 50px -30px rgba(162,107,255,.9);
  }
}
.analyse .shot.big{max-width:820px;margin:0 auto 40px}

/* Au-delà de la bascule du deck (980 px), la capture et les notes se partagent
   la ligne : la capture garde sa largeur utile, les notes s'empilent en face. */
@media (min-width:981px){
  .analyse > .wrap{
    display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
    column-gap:36px;align-items:start;
  }
  .analyse > .wrap > .section-head{grid-column:1 / -1}
  .analyse > .wrap > .shot.big{grid-column:1;max-width:none;margin:0}
  .analyse > .wrap > .analyse-notes{
    grid-column:2;grid-template-columns:1fr;gap:18px;max-width:none;margin:0;
  }
  .analyse > .wrap > .deck{grid-column:1 / -1;margin-top:52px}
}

/* =====================================================================
   STRUCTURE
   ===================================================================== */
.structure{padding:96px 0}

/* =====================================================================
   DECK — un seul cadre, plusieurs écrans
   Ce qui était une pile de sections (titre, phrase, grande capture, et on
   recommence) tient désormais dans une hauteur d'écran : la liste à gauche,
   la capture à droite, et la transition remplace le scroll.
   ===================================================================== */
.deck{
  display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:40px;align-items:center;
}
.deck-list{display:flex;flex-direction:column;gap:2px}

.deck-tab{
  position:relative;padding:13px 18px 13px 20px;border-radius:14px;cursor:pointer;
  border:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.deck-tab::before{
  content:"";position:absolute;left:0;top:11px;bottom:11px;width:2px;border-radius:2px;
  background:rgba(255,255,255,.10);transition:background .4s var(--ease);
}
.deck-tab h3{
  font-size:1.01rem;line-height:1.35;letter-spacing:-.02em;color:var(--dim);
  transition:color .3s var(--ease);
}
.deck-tab:hover h3{color:var(--txt)}
.deck-tab[aria-selected="true"]{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border-color:var(--line);
}
.deck-tab[aria-selected="true"]::before{background:var(--grad-soft)}
.deck-tab[aria-selected="true"] h3{color:var(--txt)}
.deck-tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Le texte de l'élément actif se déplie ; les autres restent une ligne. */
.deck-body{
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .55s var(--ease),opacity .35s var(--ease);
}
.deck-body>div{overflow:hidden}
.deck.is-ready .deck-body{grid-template-rows:0fr;opacity:0}
.deck.is-ready .deck-tab[aria-selected="true"] .deck-body{grid-template-rows:1fr;opacity:1}
.deck-body p{color:var(--dim);font-size:.97rem;line-height:1.65;padding-top:9px}
.deck-body p b{color:var(--txt)}

/* Le texte de l'onglet actif, déporté sous la rangée de pastilles. Il n'existe
   que sur mobile : ailleurs, le corps reste dans l'onglet et l'afficher en plus
   le doublonnerait. */
.deck-caption{display:none}

/* Avancement vers la capture suivante : la jauge sert de minuterie. */
.deck-prog{
  display:block;height:2px;margin-top:12px;border-radius:2px;
  background:rgba(255,255,255,.08);overflow:hidden;opacity:0;
  transition:opacity .3s var(--ease);
}
.deck.is-ready .deck-tab[aria-selected="true"] .deck-prog{opacity:1}
.deck-prog i{display:block;height:100%;width:100%;background:var(--grad-soft);transform:scaleX(0);transform-origin:left}

/* La scène : toutes les captures superposées, une seule visible. Le cadre
   prend la hauteur de la capture affichée — les vignettes de la page Analyse
   n'ont pas le même format que les captures pleine page. */
.deck-stage{position:relative;display:grid;gap:20px;touch-action:pan-y}
.deck.is-ready .deck-stage{display:block;overflow:hidden;border-radius:16px;transition:height .55s var(--ease)}
.deck-slide{margin:0}
.deck.is-ready .deck-slide{
  position:absolute;left:0;right:0;top:0;bottom:0;
  height:-moz-fit-content;height:fit-content;margin-block:auto;
  opacity:0;visibility:hidden;will-change:transform,opacity;
}
.deck.is-ready .deck-slide.is-active{opacity:1;visibility:visible}

.deck-spaced{margin-top:84px}

/* Pastilles — seul repère de position sur mobile. */
.deck-dots{display:none;justify-content:center;gap:8px;margin-top:18px}
.deck-dots button{
  width:7px;height:7px;padding:0;border-radius:50%;background:rgba(255,255,255,.18);
  transition:background .3s,transform .3s;
}
.deck-dots button[aria-selected="true"]{background:var(--accent);transform:scale(1.5)}

/* =====================================================================
   SÉLECTEUR DE LANGUE
   ===================================================================== */
.lang{position:relative;flex:0 0 auto}
.lang-btn{
  display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:12px;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.05);
  color:var(--dim);font-family:inherit;font-size:.86rem;font-weight:600;
  letter-spacing:.04em;cursor:pointer;transition:color .25s,border-color .25s;
}
.lang-btn:hover{color:var(--txt);border-color:var(--accent)}
.lang-btn svg{width:16px;height:16px;flex:0 0 auto}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:1001;
  min-width:172px;padding:6px;margin:0;list-style:none;
  border-radius:14px;border:1px solid var(--line-strong);
  background:rgba(14,16,24,.97);backdrop-filter:blur(20px);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu a{
  display:block;padding:9px 12px;border-radius:9px;
  color:var(--dim);font-size:.92rem;font-weight:500;transition:background .2s,color .2s;
}
.lang-menu a:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.lang-menu a[aria-current]{color:var(--txt);background:rgba(162,107,255,.14)}

/* Dans le menu mobile et le pied de page, le sélecteur est déjà déplié. */
.mobile-menu .lang,.foot-col .lang{width:100%}
.mobile-menu .lang-btn,.foot-col .lang-btn{display:none}
.mobile-menu .lang-menu,.foot-col .lang-menu{
  position:static;opacity:1;visibility:visible;transform:none;
  min-width:0;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;
}
.mobile-menu .lang-menu{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mobile-menu .lang-menu a{padding:10px 14px;border:1px solid var(--line);font-size:.95rem}
.foot-col .lang-menu a{padding:6px 0;font-size:.95rem;border-radius:0}
.foot-col .lang-menu a:hover{background:none;color:var(--txt)}
.foot-col .lang-menu a[aria-current]{background:none;color:var(--txt)}

/* =====================================================================
   PERSONNALISATION — mêmes lignes alternées que la structure
   ===================================================================== */
.custom{padding:96px 0}

/* =====================================================================
   PLATEFORMES
   ===================================================================== */
.platforms{padding:100px 0}
.plat-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}

/* =====================================================================
   ROADMAP
   ===================================================================== */
.roadmap{padding:100px 0}
.road-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.road-card{
  position:relative;padding:30px;border-radius:var(--radius);
  border:1px dashed rgba(162,107,255,.34);
  background:linear-gradient(140deg,rgba(200,31,224,.07),rgba(86,56,232,.05));
}
.road-card.soft{border-style:solid;border-color:var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
.road-card .lock{
  position:absolute;top:26px;right:26px;width:34px;height:34px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--line-strong);color:var(--dim-2);
}
.road-card .lock svg{width:17px;height:17px}
.road-tag{
  display:inline-block;padding:5px 12px;border-radius:100px;margin-bottom:16px;
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:rgba(162,107,255,.12);border:1px solid rgba(162,107,255,.3);
}
.road-card h3{font-size:1.35rem;margin-bottom:12px;letter-spacing:-.02em}
.road-card p{color:var(--dim);line-height:1.7}
.road-card p b{color:var(--txt)}

/* =====================================================================
   RESPONSIVE — nouveaux composants
   ===================================================================== */
@media (max-width:980px){
  .pitch-grid{grid-template-columns:1fr;gap:38px}
  .vs{position:static}
  .deck{grid-template-columns:1fr;gap:20px}
  .deck-stage{order:-2}
  .deck-list{order:0}
  .deck.is-ready .deck-dots{display:flex;order:-1;margin:-6px 0 0}
  .deck-tab{padding:12px 14px 12px 16px;border-radius:12px}
  .deck-tab h3{font-size:.98rem}
  .deck-body p{font-size:.93rem}
}
@media (max-width:760px){
  .analyse-notes{grid-template-columns:1fr;gap:22px;margin-bottom:38px}
  .road-grid{grid-template-columns:1fr}
  /* Huit cartes empilées font huit écrans : elles défilent à l'horizontale. */
  .feat-grid{
    display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter) 8px;
  }
  .feat-grid::-webkit-scrollbar{display:none}
  .feat-grid>.card{flex:0 0 80%;scroll-snap-align:center}
  /* Les deux vignettes faisaient tout le sel du visuel sur ordinateur et
     disparaissaient sur mobile, où l'espace à gauche et à droite du téléphone
     restait vide. Elles reviennent, plus petites et calées sur les bords de la
     pile plutôt qu'en débord. */
  .hero-stack{max-width:340px;padding:0}
  .hero-stack .hero-phone{width:182px}
  .float-shot{padding:9px;border-radius:13px}
  .float-shot figcaption{font-size:.58rem;letter-spacing:.1em;margin-bottom:6px}
  .float-shot img{border-radius:4px}
  .fs-1{width:140px;top:14%;left:-14px}
  .fs-2{width:140px;bottom:6%;right:-14px}
  .shot-bar span{display:none}

  /* ---- Decks : les titres en pastilles, la capture reste visible ----
     Sept titres empilés occupaient l'écran entier : il fallait choisir entre
     voir la liste et voir ce qu'elle désigne. En rangée défilante, les deux
     tiennent ensemble, et le texte de l'onglet actif passe sous la rangée. */
  .deck{gap:12px}
  .deck.is-ready .deck-dots{display:none}
  .deck-list{
    flex-direction:row;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter);
  }
  .deck-list::-webkit-scrollbar{display:none}
  .deck-tab{
    flex:0 0 auto;scroll-snap-align:center;padding:9px 15px;border-radius:100px;
    border:1px solid var(--line);background:rgba(255,255,255,.03);
  }
  .deck-tab::before{display:none}
  .deck-tab h3{font-size:.85rem;white-space:nowrap;font-weight:600}
  .deck-tab[aria-selected="true"]{
    background:linear-gradient(140deg,rgba(200,31,224,.16),rgba(86,56,232,.12));
    border-color:rgba(162,107,255,.45);
  }
  .deck.is-ready .deck-body{display:none}
  .deck.is-ready .deck-caption{display:block;color:var(--dim);font-size:.93rem;line-height:1.6}
  .deck-caption b{color:var(--txt)}
  .deck-prog{position:absolute;left:12px;right:12px;bottom:4px;top:auto;width:auto;height:2px}

  /* ---- Plateformes : le titre à côté du picto, pas dessous ---- */
  .plat-grid{grid-template-columns:1fr;gap:12px}
  .plat-grid .card{display:grid;grid-template-columns:auto 1fr;gap:0 14px;align-items:center}
  .plat-grid .card .ic{margin:0}
  .plat-grid .card h3{margin:0;align-self:center}
  .plat-grid .card p{grid-column:1 / -1;margin-top:10px}

  /* ---- FAQ : des questions, pas des pancartes ----
     Une question sur deux lignes à 1,6 d'interligne occupait la hauteur d'un
     paragraphe entier, neuf fois de suite. */
  .qa button{padding:14px 15px;font-size:.94rem;gap:10px;line-height:1.3}
  .qa .plus{width:18px;height:18px}
  .qa .plus::before{width:12px}
  .qa .plus::after{height:12px}
  .qa .ans p{padding:0 15px 15px;font-size:.92rem;line-height:1.55}
  .faq-list{gap:8px}

  /* ---- Pied de page : deux colonnes plutôt qu'une bande de vide à droite ----
     « Produit » porte huit liens quand « Légal » en porte trois : les mettre
     face à face laissait une colonne vide sur la moitié de la hauteur. Il
     prend donc toute la largeur et range ses liens sur deux colonnes, et les
     deux courtes se partagent la ligne suivante. */
  .foot-top{grid-template-columns:1fr 1fr;gap:24px 20px;margin-bottom:30px}
  .foot-brand{grid-column:1 / -1}
  .foot-brand .brand{font-size:1.3rem}
  .foot-brand .brand img{width:38px;height:38px;border-radius:10px}
  .foot-brand p{max-width:none;font-size:.9rem}
  .foot-col-wide{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
  .foot-col-wide h4{grid-column:1 / -1}
  .foot-col a{padding:7px 0;font-size:.92rem}
  .foot-bottom{font-size:.82rem;gap:10px;padding-top:20px}
}

/* =====================================================================
   RESPIRATION MOBILE
   Ce bloc ferme la feuille à dessein : les marges de section sont déclarées
   plus haut, et une règle de média placée avant elles perdrait l'arbitrage
   à spécificité égale.
   ===================================================================== */
@media(max-width:820px){
  /* 220 px de marge cumulée entre deux sections, sur une fenêtre de 660 px,
     c'était un tiers d'écran de vide à chaque passage. */
  .pitch,.analyse,.features,.structure,.custom,.platforms,.roadmap,.faq{padding:54px 0}
  .deck-spaced{margin-top:44px}
  .analyse .shot.big{margin-bottom:26px}

  /* Un titre de section tenait deux lignes hautes de 34 px avant même que le
     contenu commence. */
  .section-head h2{font-size:clamp(1.75rem,7vw,2.3rem)}
  .section-head p{font-size:.97rem;line-height:1.55}
  .card{padding:22px}
  .card h3{font-size:1.12rem;margin-bottom:8px}
  .card p{font-size:.93rem}
  .card .ic{width:44px;height:44px;border-radius:13px;margin-bottom:14px}
  .card .ic svg{width:22px;height:22px}
  .pitch-copy .big{font-size:1.2rem;margin-bottom:18px}
  .pitch-copy p{font-size:.97rem;margin-bottom:14px}
  .pitch-copy .kicker{font-size:.98rem;margin-top:20px}
  .analyse-notes h3{font-size:1.1rem}
  .analyse-notes p{font-size:.93rem}
  .road-card h3{font-size:1.15rem}
  .road-card p{font-size:.93rem}
}