:root{
  /* LES JETONS D'EZTheme.swift, recopies a l'identique : le site est la
     meme famille que les apps, il n'a pas sa propre palette. ET LA MEME
     GRAMMAIRE : le ROUGE est la couleur du direct (LIVE, REC), l'ambre
     l'attention, le bleu ON AIR et les effets, le violet les sons, le teal
     les faders. Le vert n'est que le succes -- une case cochee, jamais un
     accent. Le site du 30/07 avait pris le vert pour le niveau ; l'ecran de
     diffusion des apps a tranche autrement depuis, et c'est lui qui fait
     foi (Damien, 10/09/2026). */
  --bg:#000000; --surface:#141416; --elevated:#1C1C1E; --control:#3A3A3C;
  --separator:#232326; --text:#F2F2F7; --secondary:#AEAEB2; --tertiary:#8E8E93;
  --inactive:#6E6E73;
  --green:#34C759; --red:#E30614; --amber:#FFB020; --blue:#0A84FF;
  --sounds:#BF5AF2; --faders:#64D2FF; --radius:12px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(227,6,20,.25)}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ---------- typographie ---------- */
h1{font-size:clamp(44px,8.5vw,96px);line-height:.98;letter-spacing:-.035em;font-weight:800}
h2{font-size:clamp(30px,4.6vw,54px);line-height:1.04;letter-spacing:-.03em;font-weight:800}
h3{font-size:17px;font-weight:650;letter-spacing:-.01em}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tertiary)}
.lead{font-size:clamp(17px,2vw,21px);line-height:1.55;color:var(--secondary);font-weight:400}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  gap:28px;padding:0 clamp(20px,4vw,48px);height:60px;
  background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;transition:border-color .3s}
nav.scrolled{border-bottom-color:var(--separator)}
.brand{display:flex;align-items:center;gap:9px;font-weight:750;font-size:17px;letter-spacing:-.02em}
/* L'ICONE DE L'APP, et non un logo a part : le site est la meme famille
   que les apps, jusqu'a l'icone qu'on retrouve sur l'ecran d'accueil. */
.brand-mark{width:22px;height:22px;border-radius:6px;display:block;flex:none}
footer .brand-mark{width:18px;height:18px;border-radius:5px}
nav .links{display:flex;gap:22px;margin-left:auto;font-size:13.5px;color:var(--secondary)}
nav .links a:hover{color:var(--text)}
.cta{background:var(--red);color:#fff;font-weight:650;font-size:14px;padding:9px 18px;
  border-radius:999px;transition:transform .15s,box-shadow .15s;white-space:nowrap}
.cta:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(227,6,20,.35)}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  width:38px;height:38px;border-radius:9px;align-items:center;justify-content:center}
.burger span{display:block;width:17px;height:2px;background:var(--text);border-radius:1px;
  position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:2px;
  background:var(--text);border-radius:1px;transition:transform .25s,top .25s}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{top:0;transform:rotate(45deg)}
body.menu-open .burger span::after{top:0;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:60px 0 auto;z-index:99;background:rgba(0,0,0,.92);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--separator);padding:10px 22px 24px;
  display:none;flex-direction:column}
body.menu-open .mobile-menu{display:flex}
.mobile-menu a{padding:15px 4px;font-size:17px;font-weight:600;letter-spacing:-.01em;
  border-bottom:1px solid var(--separator);color:var(--text)}
.mobile-menu a:last-child{border-bottom:0}
/* Huit liens sur l'accueil : sous 1000 px ils chevaucheraient le bouton
   rouge (mesure : 550 px de liens, 166 de bouton, 188 de marque). */
@media(max-width:1000px){
  nav .links{display:none}
  nav .cta{margin-left:0}
  .burger{display:flex}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:110px clamp(20px,5vw,48px) 60px;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
   radial-gradient(58% 42% at 50% 64%,rgba(227,6,20,.07),transparent 70%),
   radial-gradient(80% 55% at 50% -10%,rgba(255,255,255,.05),transparent 60%);
}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(var(--separator) 1px,transparent 1px),
    linear-gradient(90deg,var(--separator) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(60% 52% at 50% 42%,#000 20%,transparent 75%);
  mask-image:radial-gradient(60% 52% at 50% 42%,#000 20%,transparent 75%)}
.hero .eyebrow{margin-bottom:22px;color:var(--secondary)}
.hero h1 .accent{display:block;color:var(--red)}
.hero .lead{max-width:620px;margin:26px auto 0}
.hero-ctas{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;justify-content:center}
.btn-store{display:inline-flex;align-items:center;gap:10px;background:var(--text);color:#000;
  font-weight:650;font-size:15px;padding:13px 24px;border-radius:999px;
  transition:transform .15s,box-shadow .15s}
.btn-store:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(255,255,255,.15)}
.btn-store svg{width:18px;height:18px}
/* Le compagnon du PC : deux boutons au meme gabarit que les stores, en
   contour -- ce qu'il faut installer EN PLUS, pas un second choix. */
.pc-ctas{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;justify-content:center;align-items:center}
.pc-lead{flex-basis:100%;text-align:center;font-size:13px;color:var(--secondary);margin-bottom:2px}
.btn-pc{display:inline-flex;align-items:center;gap:11px;padding:10px 20px 10px 16px;border-radius:999px;
  border:1px solid var(--control);background:var(--surface);color:var(--text);
  transition:border-color .15s,transform .15s,box-shadow .15s}
.btn-pc:hover{border-color:var(--secondary);transform:translateY(-1px);box-shadow:0 8px 30px rgba(0,0,0,.5)}
.btn-pc svg{width:20px;height:20px;flex:none}
.btn-pc span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.btn-pc b{font-size:15px;font-weight:650}
.btn-pc small{font-size:11px;color:var(--secondary)}
.get-note{margin:14px 0 0;font-size:12.5px;color:var(--tertiary);text-align:center}
.hero-sub{margin-top:16px;font-size:13px;color:var(--tertiary)}
.hero-sub a{color:var(--secondary);border-bottom:1px solid var(--control)}
.hero-sub a:hover{color:var(--text)}

/* L'ONDE -- la meme que l'ecran de diffusion des apps (WaveField), pas un
   vumetre : quinze secondes d'enveloppe, le passe qui s'efface vers la
   gauche, la ligne de zero, le repere « maintenant » a droite. Dessinee en
   canvas par wave.js avec la recette exacte de WaveField.swift. */
.wave{display:block;width:min(720px,100%);height:120px;margin:52px auto 0}
@media(max-width:560px){.wave{height:88px}}
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:48px}
.chip{font-family:var(--mono);font-size:12px;color:var(--secondary);
  border:1px solid var(--separator);border-radius:999px;padding:7px 14px;background:rgba(20,20,22,.6)}
.chip b{color:var(--text);font-weight:600}

/* la carte "peripherique d'entree" */
.picker{margin:64px auto 0;max-width:430px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--separator);border-radius:16px;
  padding:18px 18px 8px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.picker .ptitle{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tertiary);margin-bottom:12px}
.picker .row{display:flex;align-items:center;gap:12px;padding:12px 10px;
  border-radius:10px;font-size:14.5px;color:var(--secondary)}
.picker .row.on{background:var(--elevated);color:var(--text);font-weight:600}
.picker .dot{width:8px;height:8px;border-radius:50%;background:var(--control);flex:none}
.picker .row.on .dot{background:var(--red);box-shadow:0 0 10px rgba(227,6,20,.8)}
.picker .tag{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--secondary);border:1px solid var(--control);padding:3px 8px;border-radius:6px}

/* ---------- sections ---------- */
section{padding:clamp(90px,12vw,150px) clamp(20px,5vw,48px);position:relative;scroll-margin-top:64px}
.wrap{max-width:1120px;margin:0 auto}
.sec-head{max-width:680px;margin-bottom:clamp(40px,6vw,72px)}
.sec-head .eyebrow{margin-bottom:16px}
.sec-head p{margin-top:18px}

/* etapes */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--separator);border-radius:var(--radius);
  padding:30px 26px;position:relative;overflow:hidden}
.step .num{font-family:var(--mono);font-size:44px;font-weight:700;color:var(--control);line-height:1}
.step h3{margin:18px 0 10px;font-size:19px}
.step p{font-size:14.5px;line-height:1.6;color:var(--secondary)}

/* grille de features */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--separator);border-radius:var(--radius);
  padding:24px 22px;transition:border-color .25s,transform .25s}
.card:hover{border-color:var(--control);transform:translateY(-2px)}
.card .ic{width:34px;height:34px;border-radius:9px;background:var(--elevated);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.card .ic svg{width:17px;height:17px;stroke:var(--text);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:8px}
.card p{font-size:14px;line-height:1.58;color:var(--secondary)}
/* LES COULEURS DE FEATURES, comme sur l'ecran des apps : la touche FX est
   bleue, SOUNDS violette, FADERS teal, et chaque feuille reprend sa couleur
   dans son titre et ses accents. Sur le site, les cartes de ces trois
   familles portent leur couleur dans le titre et l'icone -- et nulle part
   ailleurs : l'identite n'est pas l'etat, le rouge reste le direct. */
.card.fx h3{color:var(--blue)} .card.fx .ic svg{stroke:var(--blue)}
.card.sounds h3{color:var(--sounds)} .card.sounds .ic svg{stroke:var(--sounds)}
.card.faders h3{color:var(--faders)} .card.faders .ic svg{stroke:var(--faders)}
.card .badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--amber);border:1px solid rgba(255,176,32,.35);border-radius:6px;
  padding:2px 7px;margin-left:8px;vertical-align:2px}

/* spotlight (atelier / transcription) */
.spot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:900px){.spot{grid-template-columns:1fr}}
.spot .demo{background:var(--surface);border:1px solid var(--separator);border-radius:16px;
  padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.slider{margin:20px 0}
.slider .lab{display:flex;justify-content:space-between;font-size:13px;margin-bottom:9px}
.slider .lab b{font-family:var(--mono);font-weight:600;color:var(--blue)}
.slider .track{height:4px;background:var(--control);border-radius:2px;position:relative}
.slider .fill{position:absolute;left:0;top:0;bottom:0;background:var(--blue);border-radius:2px;
  width:var(--w);transition:width 1.2s cubic-bezier(.22,1,.36,1)}
.slider .knob{position:absolute;top:50%;left:var(--w);transform:translate(-50%,-50%);
  width:16px;height:16px;border-radius:50%;background:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,.6);transition:left 1.2s cubic-bezier(.22,1,.36,1)}
.caption-demo .line{font-size:clamp(19px,2.6vw,26px);font-weight:650;line-height:1.4;min-height:2.9em}
.caption-demo .line .ghost{color:var(--tertiary)}
.caption-demo .cursor{display:inline-block;width:2px;height:1em;background:var(--text);
  vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.caption-demo .src{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tertiary);margin-bottom:16px}

/* latence */
.lat{text-align:center}
.lat .big{font-size:clamp(64px,12vw,150px);font-weight:800;letter-spacing:-.04em;line-height:1;
  color:var(--text)}
.lat .big small{font-size:.35em;font-weight:700;color:var(--secondary);letter-spacing:-.02em}
.lat-rows{max-width:560px;margin:56px auto 0;text-align:left}
.lat-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--separator);font-size:14.5px}
.lat-row:last-child{border-bottom:0}
.lat-row .who{width:180px;flex:none;color:var(--secondary)}
.lat-row .bar{height:6px;border-radius:3px;background:var(--red);width:var(--w);min-width:6px}
.lat-row.slow .bar{background:var(--control)}
.lat-row .val{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--tertiary)}

/* use cases */
.cases{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:980px){.cases{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cases{grid-template-columns:1fr}}
.case{background:var(--surface);border:1px solid var(--separator);border-radius:var(--radius);
  padding:26px 22px}
.case h3{margin-bottom:10px;font-size:18px}
.case p{font-size:13.5px;line-height:1.6;color:var(--secondary)}
.case .mini{display:block;width:100%;height:26px;margin-bottom:18px}

/* pricing */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px;margin:0 auto}
.plans.three{grid-template-columns:repeat(3,1fr);max-width:1120px}
@media(max-width:900px){.plans.three{grid-template-columns:1fr}}
@media(max-width:760px){.plans{grid-template-columns:1fr}}
.plan{background:var(--surface);border:1px solid var(--separator);border-radius:16px;padding:34px 30px}
.plan.pro{border-color:rgba(227,6,20,.45);position:relative;overflow:hidden}
.plan.pro::before{content:"";position:absolute;inset:-40% -20% auto;height:120%;
  background:radial-gradient(50% 50% at 50% 0%,rgba(227,6,20,.13),transparent 70%);pointer-events:none}
.plan .pname{font-size:22px;font-weight:750;letter-spacing:-.02em}
.plan .psub{font-size:13px;color:var(--tertiary);margin-top:6px}
.plan ul{list-style:none;margin-top:24px}
.plan li{display:flex;gap:12px;font-size:14.5px;line-height:1.5;color:var(--secondary);
  padding:8px 0;align-items:flex-start}
.plan li::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;
  background:var(--elevated) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"%3E%3Cpath d="M4.5 8.5l2.5 2.5 4.5-5" stroke="%23F2F2F7" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') center/contain no-repeat}
.plan .cta{display:inline-block;margin-top:26px}
.plan .ghostbtn{display:inline-block;margin-top:26px;font-weight:650;font-size:14px;
  padding:9px 18px;border-radius:999px;border:1px solid var(--control);color:var(--secondary)}
.plan .ghostbtn:hover{color:var(--text);border-color:var(--tertiary)}

/* FAQ */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--separator)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:20px;padding:22px 0;font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--tertiary);
  transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px;font-size:14.5px;line-height:1.65;color:var(--secondary);max-width:640px}

/* final */
.final{text-align:center;padding-bottom:clamp(60px,8vw,110px)}
.final h2{font-size:clamp(36px,6.5vw,72px)}
.final .lead{max-width:520px;margin:20px auto 0}
footer{border-top:1px solid var(--separator);padding:34px clamp(20px,5vw,48px);
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--tertiary)}
footer .brand{font-size:14px}
footer .right{margin-left:auto;display:flex;gap:20px}
footer a:hover{color:var(--text)}

/* reveals */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .caption-demo .cursor{animation:none}
  .rv{opacity:1;transform:none;transition:none}
}

/* ---------- pages secondaires : support, confidentialite ----------
   Meme feuille pour les trois pages : une seule source, rien qui diverge. */
.page{padding:120px clamp(20px,5vw,48px) clamp(60px,8vw,110px)}
.page .wrap{max-width:860px}
.page-head{margin-bottom:clamp(36px,5vw,64px)}
.page-head .eyebrow{margin-bottom:16px}
.page-head h1{font-size:clamp(38px,6.5vw,72px)}
.page-head .lead{margin-top:20px;max-width:640px}
.prose h2{font-size:clamp(22px,3vw,30px);margin:clamp(40px,6vw,64px) 0 14px}
.prose h3{font-size:17px;margin:26px 0 8px}
.prose p,.prose li{font-size:15.5px;line-height:1.7;color:var(--secondary)}
.prose p+p{margin-top:12px}
.prose ul{padding-left:20px;margin-top:8px}
.prose li{margin-top:6px}
.prose li b,.prose p b{color:var(--text);font-weight:650}
.prose a{color:var(--text);border-bottom:1px solid var(--control)}
.prose a:hover{border-bottom-color:var(--tertiary)}
.prose code{font-family:var(--mono);font-size:13px;color:var(--text);background:var(--elevated);
  padding:2px 6px;border-radius:6px}
.prose .note{margin-top:14px;padding:14px 16px;border:1px solid var(--separator);
  border-radius:var(--radius);background:var(--surface);font-size:14px;color:var(--secondary)}
.contact{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:28px;
  padding:22px 24px;background:var(--surface);border:1px solid var(--separator);
  border-radius:var(--radius)}
.contact .mail{font-family:var(--mono);font-size:16px;color:var(--text);font-weight:600}
.contact .mail:hover{color:var(--red)}
.fixes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
@media(max-width:720px){.fixes{grid-template-columns:1fr}}
.fix{background:var(--surface);border:1px solid var(--separator);border-radius:var(--radius);
  padding:20px 20px 22px}
.fix h3{margin:0 0 8px;font-size:16px}
.fix p{font-size:14px;line-height:1.6;color:var(--secondary)}
.fix p+p{margin-top:8px}
.fix .badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tertiary);border:1px solid var(--separator);
  border-radius:999px;padding:3px 8px;margin-bottom:12px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 10px}
@media(max-width:720px){.facts{grid-template-columns:1fr}}
.fact{background:var(--surface);border:1px solid var(--separator);border-radius:var(--radius);
  padding:20px}
.fact .big{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.fact p{font-size:13.5px;line-height:1.55;color:var(--secondary);margin-top:6px}
table.perm{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px}
table.perm th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tertiary);padding:0 12px 10px 0;font-weight:600}
table.perm td{padding:11px 12px 11px 0;border-top:1px solid var(--separator);
  color:var(--secondary);line-height:1.55;vertical-align:top}
table.perm td:first-child{color:var(--text);font-weight:600;white-space:nowrap}
.meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--tertiary);margin-top:10px}

/* ---------- galerie d'ecrans (10/09/2026) ----------
   Un ruban qui defile a l'horizontale : des cadres de telephone, la capture
   dedans, une legende dessous. Les captures sont des PNG bruts de l'appareil. */
.shots{display:flex;gap:clamp(18px,3vw,34px);overflow-x:auto;padding:12px clamp(20px,5vw,48px) 22px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  justify-content:safe center}
.shots::-webkit-scrollbar{display:none}
.shot{--w:min(250px,70vw);flex:none;scroll-snap-align:center;text-align:center;width:var(--w)}
/* Les captures de l'iPhone seulement, BRUTES : ce que le telephone a produit, reduit
   a 720 px de large, sans recadrage ni retouche (12/09/2026 -- une version
   recadree et masquee, puis une galerie melee iPhone/Android, ont ete retirees).
   C'est le cadre du site qui epouse l'ecran : la capture garde sa proportion, ses
   coins s'arrondissent comme la dalle (l'arrondi continu de l'app, approche par un
   cercle de 11 % de la largeur, mesure sur une capture de 1206 px), et le cadre
   d'etat rouge court le long du bord comme sur le telephone. */
.shot .frame{border-radius:calc((var(--w) - 16px) * .11 + 7px);border:1px solid var(--control);
  background:#000;padding:7px;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.04)}
.shot img{width:100%;height:auto;display:block;background:#000;border-radius:11% / 5.06%}
.shot figcaption{margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tertiary)}

/* ---------- groupes de features ---------- */
.group{margin-top:clamp(40px,6vw,64px)}
.group:first-of-type{margin-top:0}
.ghead{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;margin-bottom:22px}
.ghead h3{font-size:clamp(22px,3vw,28px);letter-spacing:-.02em;font-weight:750}
.ghead p{grid-column:2;font-size:15px;color:var(--secondary);margin-top:6px}
.gdot{width:10px;height:10px;border-radius:50%;background:var(--red);
  box-shadow:0 0 12px rgba(227,6,20,.7);position:relative;top:-2px}
.gdot.white{background:var(--text);box-shadow:0 0 12px rgba(242,242,247,.5)}
.gdot.blue{background:var(--blue);box-shadow:0 0 12px rgba(10,132,255,.6)}
.gdot.purple{background:var(--sounds);box-shadow:0 0 12px rgba(191,90,242,.6)}
.gdot.amber{background:var(--amber);box-shadow:0 0 12px rgba(255,176,32,.6)}
.gdot.teal{background:var(--faders);box-shadow:0 0 12px rgba(100,210,255,.6)}
.gdot.red{background:var(--red);box-shadow:0 0 12px rgba(227,6,20,.6)}
.card p em{color:var(--text);font-style:normal;font-weight:600}
.step p em{color:var(--text);font-style:normal;font-weight:600}
.lead em{color:var(--text);font-style:normal;font-weight:600}
.langs{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:clamp(40px,6vw,64px);
  padding:22px 24px;border:1px solid var(--separator);border-radius:var(--radius);background:var(--surface);
  font-size:15px;color:var(--secondary)}
.langs .eyebrow{margin-right:8px}

/* ---------- demo du chat du jeu ---------- */
.chat-demo .src{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tertiary);margin-bottom:16px}
.chat-demo .round{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--tertiary);margin:6px 0 14px}
.chat-demo .msg{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:10px;
  background:var(--elevated);margin-bottom:10px}
.chat-demo .who{font-family:var(--mono);font-size:12px;font-weight:600}
.chat-demo .who.t{color:var(--amber)}.chat-demo .who.ct{color:var(--blue)}
.chat-demo .txt{font-size:15.5px;color:var(--text)}
.chat-demo .tr{font-size:13px;color:var(--secondary)}
.chat-demo .reply{margin-top:6px;font-size:13.5px;color:var(--secondary);font-weight:600}
.chat-demo .reply em{color:var(--secondary);font-style:normal;font-weight:400}
.grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.grid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid.four{grid-template-columns:1fr}}
@media(max-width:760px){nav{gap:14px} nav .cta{padding:8px 14px;font-size:13px}}

/* ---- « Bientot disponible » : le site est en ligne AVANT les apps, parce que
   le transfert de l'app iOS exige des pages legales joignables. Rien ne doit
   promettre un telechargement qui n'existe pas : les boutons de la section
   finale ne sont plus des liens, et la pastille le dit avant le titre. ---- */
.soonpill{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;
  border:1px solid var(--red);background:rgba(227,6,20,.12);color:var(--text);
  font-size:12.5px;font-weight:650;letter-spacing:.02em;padding:7px 14px;border-radius:999px}
.soonpill i{width:7px;height:7px;border-radius:50%;background:var(--red);display:block;flex:none}
.soon-note{margin:14px auto 0;max-width:52ch;font-size:13px;line-height:1.5;color:var(--tertiary)}
.soon-note a{color:var(--secondary);text-decoration:underline;text-underline-offset:2px}
.btn-store.is-soon,.btn-pc.is-soon{opacity:.45;cursor:default;pointer-events:none}