/*
 * allavage.ma — la palette de l'app : turquoise sur encre profonde, mousse en clair.
 *
 * Tout ce qui bouge ne bouge que si <html> porte la classe « anime »
 * (contenu.json → effets.animations) et que vie.js tourne (classe « js ») :
 * sans JavaScript, la page s'affiche entière et immobile. Et quiconque a
 * demandé à son téléphone de réduire les animations n'en voit aucune.
 *
 * Les marges sont écrites « inline-start / inline-end » plutôt que gauche /
 * droite : la page arabe se retourne toute seule.
 */

:root{
  --ink:#0B2427; --ink-2:#0F3134; --ink-3:#154145;
  --teal:#0EA5A4; --teal-2:#22C3C1; --deep:#0B7E7D; --mint:#5EEAD4;
  --foam:#E6F6F5; --surface:#F5F9F9; --line:#DDE6E6;
  --text:#14212B; --muted:#5B6C71; --soft-ink:#B9CDCF; --faint-ink:#7F9AA0;
  --amber:#B45309; --amber-2:#F59E0B; --wa:#25D366; --wa-2:#1DAE55;
  --wrap:1160px; --radius:22px;
  --shadow:0 18px 40px rgba(11,36,39,.10), 0 2px 6px rgba(11,36,39,.06);
  --shadow-lg:0 30px 70px rgba(11,36,39,.18), 0 4px 12px rgba(11,36,39,.08);
  --ease:cubic-bezier(.2,.7,.2,1);
  --police:"Barlow","Segoe UI",system-ui,Arial,sans-serif;
}
html[lang="ar"]{ --police:"Tajawal","Barlow","Segoe UI",Tahoma,Arial,sans-serif; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
html,body{ overflow-x:hidden; max-width:100%; }
body{
  font-family:var(--police); color:var(--text); background:#fff; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }
.ico{ flex:0 0 auto; }
[dir="rtl"] .ico-fleche{ transform:scaleX(-1); }

h1,h2,h3{ line-height:1.1; letter-spacing:-.015em; }
h1{ font-size:clamp(36px,5.6vw,64px); font-weight:800; }
h2{ font-size:clamp(28px,3.8vw,42px); font-weight:800; }
h3{ font-size:19px; font-weight:700; }
.lead{ font-size:clamp(17px,2.1vw,20px); color:var(--muted); }
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal);
}
.kicker::before{ content:""; width:22px; height:2px; border-radius:2px; background:currentColor; opacity:.7; }

/* L'arabe s'écrit lié : un espacement entre les lettres les casse. */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .kicker, html[lang="ar"] .btn{ letter-spacing:0; }
html[lang="ar"] h1{ line-height:1.25; }
html[lang="ar"] h2, html[lang="ar"] h3{ line-height:1.3; }
html[lang="ar"] body{ line-height:1.75; }

/* Les mots surlignés (« **…** » dans contenu.json) : un trait de
   surligneur turquoise sous le texte, qui se trace à l'arrivée. */
.surligne{
  color:inherit; font-weight:700; padding:0 .12em; margin:0 -.04em; border-radius:.2em;
  background:linear-gradient(transparent 48%, rgba(14,165,164,.32) 48%, rgba(14,165,164,.32) 96%, transparent 96%) no-repeat left / 100% 100%;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
[dir="rtl"] .surligne{ background-position:right; }
.ink .surligne, .tease .surligne, .total .surligne, .final .surligne, .hero .surligne{
  color:#fff; background-image:linear-gradient(transparent 48%, rgba(34,195,193,.48) 48%, rgba(34,195,193,.48) 96%, transparent 96%);
}

/* ─────────────────────────── Boutons ─────────────────────────── */

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 22px; border-radius:999px; font-weight:700; font-size:16px; border:2px solid transparent;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s, color .2s;
  white-space:nowrap; overflow:hidden; isolation:isolate;
}
.btn-grand{ padding:16px 28px; font-size:17px; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn .ico-fleche{ transition:transform .2s var(--ease); }
.btn:hover .ico-fleche{ transform:translateX(4px); }
[dir="rtl"] .btn:hover .ico-fleche{ transform:scaleX(-1) translateX(4px); }
/* Un reflet qui traverse le bouton au survol. */
.btn-primary::after, .btn-whatsapp::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.btn-primary:hover::after, .btn-whatsapp:hover::after{ transform:translateX(120%); }
.btn-primary{ background:linear-gradient(135deg, var(--teal-2), var(--teal) 55%, var(--deep)); color:#fff; box-shadow:0 12px 28px rgba(14,165,164,.35); }
.btn-primary:hover{ box-shadow:0 16px 36px rgba(14,165,164,.45); }
.btn-ghost{ border-color:rgba(255,255,255,.28); color:#fff; background:rgba(255,255,255,.04); backdrop-filter:blur(6px); }
.btn-ghost:hover{ border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.08); }
.btn-whatsapp{ background:linear-gradient(135deg, #34E27A, var(--wa) 50%, var(--wa-2)); color:#fff; box-shadow:0 12px 28px rgba(37,211,102,.32); }
.btn-clair{ border-color:rgba(255,255,255,.3); color:#fff; }
.btn-clair:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* ─────────────────────────── En-tête ─────────────────────────── */

.entete{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .3s, box-shadow .3s, backdrop-filter .3s;
}
.entete .wrap{ display:flex; align-items:center; gap:18px; height:72px; transition:height .3s var(--ease); }
.entete.colle{ background:rgba(11,36,39,.86); backdrop-filter:saturate(1.4) blur(14px); box-shadow:0 8px 30px rgba(0,0,0,.18); }
.entete.colle .wrap{ height:62px; }
.logo{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; letter-spacing:.12em; font-size:18px; font-family:"Barlow","Segoe UI",Arial,sans-serif; }
.logo img{ width:28px; height:28px; transition:transform .5s var(--ease); }
.logo:hover img{ transform:rotate(-12deg) scale(1.08); }
.entete nav{ margin-inline-start:auto; display:flex; align-items:center; gap:6px; }
.nav-lien{ position:relative; color:#CBD5E1; font-weight:600; font-size:15px; padding:8px 12px; border-radius:999px; transition:color .2s, background .2s; }
.nav-lien:hover{ color:#fff; background:rgba(255,255,255,.06); }
.nav-lien.actif{ color:#fff; }
.nav-lien::after{
  content:""; position:absolute; inset-inline:12px; bottom:3px; height:2px; border-radius:2px;
  background:var(--teal-2); transform:scaleX(0); transition:transform .3s var(--ease);
}
.nav-lien.actif::after{ transform:scaleX(1); }
.btn-entete{ padding:10px 18px; font-size:15px; }

.langues{ display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); }
.langue{ min-width:34px; height:28px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-size:13px; font-weight:700; color:#9FBCC0; transition:background .2s, color .2s; }
a.langue:hover{ color:#fff; background:rgba(255,255,255,.1); }
.langue.on{ background:var(--teal); color:#fff; }

@media (max-width:900px){ .entete nav{ display:none; } .langues{ margin-inline-start:auto; } }
@media (max-width:520px){ .btn-entete{ display:none; } .entete .wrap{ height:62px; } }

/* ─────────────────────────── Hero ─────────────────────────── */

.hero{ position:relative; background:var(--ink); color:#fff; padding:148px 0 150px; overflow:hidden; isolation:isolate; }
.hero-fond{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-fond i{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; }
.hero-fond i:nth-child(1){ width:620px; height:620px; background:radial-gradient(circle, #0EA5A4, transparent 65%); inset-inline-end:-160px; top:-200px; }
.hero-fond i:nth-child(2){ width:520px; height:520px; background:radial-gradient(circle, #0B7E7D, transparent 65%); inset-inline-start:-180px; bottom:-220px; }
.hero-fond i:nth-child(3){ width:360px; height:360px; background:radial-gradient(circle, #5EEAD4, transparent 65%); inset-inline-start:40%; top:30%; opacity:.18; }
/* Une grille très légère : le fond a de la matière sans prendre la parole. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
}

/* Les bulles de savon */
.bulles{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.bulles span{
  position:absolute; bottom:-80px; inset-inline-start:var(--g); width:var(--t); height:var(--t); border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.55), rgba(255,255,255,.08) 38%, rgba(94,234,212,.08) 62%, rgba(255,255,255,.22) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  opacity:0;
}

.hero-grille{ display:grid; grid-template-columns:1.12fr .88fr; gap:40px; align-items:center; }
.hero-texte > *{ max-width:60ch; }
.hero h1{ margin-top:18px; max-width:15ch; }
.hero h1 .mot{ display:inline-block; }
/* Le dernier mot du titre, en dégradé turquoise. */
.hero h1 .mot:last-child{ background:linear-gradient(120deg, #5EEAD4, #22C3C1 45%, #0EA5A4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-texte > p{ margin-top:22px; font-size:clamp(17px,2.1vw,21px); color:var(--soft-ink); }
.hero .kicker{ color:var(--mint); padding:7px 14px; border-radius:999px; background:rgba(94,234,212,.08); border:1px solid rgba(94,234,212,.2); letter-spacing:.1em; }
.hero .kicker::before{ width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(94,234,212,.18); opacity:1; }
.hero .cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }
.hero .note{ margin-top:18px; font-size:14px; color:var(--faint-ink); }

/* Le visuel : la marque dans son halo, et ce qu'on gagne qui flotte autour. */
.hero-visuel{ position:relative; height:470px; }
.hero-visuel{ --cx:38%; }
.halo{ position:absolute; top:calc(50% - 170px); inset-inline-start:calc(var(--cx) - 170px); width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(34,195,193,.55), rgba(14,165,164,.12) 55%, transparent 70%); filter:blur(8px); }
.anneau{ position:absolute; top:calc(50% - 150px); inset-inline-start:calc(var(--cx) - 150px); width:300px; height:300px; border-radius:50%;
  border:1.5px dashed rgba(94,234,212,.35); }
.anneau::before{ content:""; position:absolute; inset:28px; border-radius:50%; border:1px solid rgba(255,255,255,.08); }
.anneau::after{ content:""; position:absolute; top:-6px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--mint); box-shadow:0 0 16px var(--mint); }
.hero-marque{ position:absolute; top:calc(50% - 56px); inset-inline-start:calc(var(--cx) - 56px); width:112px; height:112px; filter:drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
.flotte{
  position:absolute; z-index:1; display:flex; align-items:center; gap:12px; padding:14px 18px 14px 14px; max-width:268px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:18px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 20px 40px rgba(0,0,0,.25);
}
[dir="rtl"] .flotte{ padding:14px 14px 14px 18px; }
.flotte b{ display:block; font-size:15.5px; line-height:1.2; }
.flotte span:not(.flotte-ico){ display:block; margin-top:3px; font-size:13.5px; color:var(--soft-ink); }
.flotte-ico{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, var(--teal-2), var(--deep)); color:#fff; flex:0 0 auto; }
.f1{ top:6%; inset-inline-start:0; }
.f2{ top:41%; inset-inline-end:0; }
.f3{ bottom:5%; inset-inline-start:10%; }

.vague{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:90px; fill:#fff; }

@media (max-width:980px){
  .hero{ padding:120px 0 110px; }
  .hero-grille{ grid-template-columns:1fr; }
  .hero-visuel{ height:auto; display:flex; flex-direction:column; gap:12px; margin-top:6px; }
  .halo,.anneau,.hero-marque{ display:none; }
  .flotte{ position:static; max-width:none; }
}

/* ─────────────────────────── Ruban ─────────────────────────── */

.ruban{ background:#fff; padding:10px 0 26px; overflow:hidden; }
.ruban-piste{ display:flex; width:max-content; align-items:center; gap:26px; font-weight:700; font-size:17px; color:var(--ink); }
.ruban-piste span{ white-space:nowrap; }
.ruban-piste i{ font-style:normal; color:var(--teal); font-size:14px; }
.ruban{ -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* ─────────────────────────── Sections ─────────────────────────── */

section{ padding:92px 0; position:relative; }
.section-head{ max-width:740px; }
.section-head h2{ margin-top:12px; }
.section-head p{ margin-top:16px; }
.soft{ background:var(--surface); }
.soft::before{ content:""; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent); }
.ink{ background:var(--ink); color:#fff; overflow:hidden; }
.ink .lead, .ink p{ color:var(--soft-ink); }

.grid{ display:grid; gap:22px; margin-top:44px; }
/* Un enfant de grille vaut par défaut min-width:auto : un contenu qui
   refuse de rétrécir (« 3 000 dh », en une seule ligne) élargit sa
   colonne et dépasse l'écran d'un téléphone. */
.grid > *{ min-width:0; }
.g3{ grid-template-columns:repeat(3,1fr); }
.g2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .g3,.g2{ grid-template-columns:1fr; } section{ padding:72px 0; } }

/* Les cartes : elles se soulèvent, et une lumière suit la souris. */
.card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  overflow:hidden; isolation:isolate;
}
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(14,165,164,.10), transparent 45%);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(14,165,164,.35); }
.card:hover::before{ opacity:1; }
.card h3{ margin-top:18px; }
.card p{ margin-top:8px; color:var(--muted); font-size:15.5px; }
.num{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center; font-weight:800; font-size:18px; color:#fff;
  background:linear-gradient(135deg, var(--teal-2), var(--deep)); box-shadow:0 10px 20px rgba(14,165,164,.28);
  transition:transform .35s var(--ease);
}
.card:hover .num{ transform:rotate(-8deg) scale(1.06); }
.trait{ width:44px; height:4px; border-radius:4px; background:linear-gradient(90deg, var(--teal), var(--mint)); transition:width .35s var(--ease); }
.card:hover .trait{ width:72px; }

/* L'encadré à bouton */
.tease{
  margin-top:40px; display:flex; align-items:center; justify-content:space-between; gap:22px 34px; flex-wrap:wrap;
  padding:30px 34px; border-radius:var(--radius); position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg, var(--ink), var(--ink-3)); color:#fff;
}
.tease::before{ content:""; position:absolute; z-index:-1; width:320px; height:320px; inset-inline-end:-80px; top:-160px; border-radius:50%; background:radial-gradient(circle, rgba(14,165,164,.5), transparent 65%); }
.tease-texte{ flex:1 1 380px; }
.tease h3{ font-size:23px; }
.tease p{ margin-top:8px; color:var(--soft-ink); max-width:62ch; }

/* ─────────────────── Ce que perd un lavage ─────────────────── */

.fuite{ align-items:stretch; }
.fuites{ display:flex; flex-direction:column; gap:12px; }
.leak{
  display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 24px; border-radius:18px;
  background:#fff; border:1px solid var(--line); border-inline-start:4px solid var(--amber-2);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.leak:hover{ transform:translateX(4px); box-shadow:var(--shadow); }
[dir="rtl"] .leak:hover{ transform:translateX(-4px); }
.leak > div{ min-width:0; }
.leak-titre{ display:block; font-size:16.5px; }
.leak > div > span{ color:var(--muted); font-size:14.5px; display:block; }
.leak-montant{ font-size:24px; font-weight:800; color:var(--amber); white-space:nowrap; font-variant-numeric:tabular-nums; }
.leak.inconnu{ border-inline-start-color:var(--line); }
.leak.inconnu .leak-montant{ color:var(--muted); }
.total{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg, var(--ink), var(--ink-3)); color:#fff; border-radius:var(--radius); padding:34px;
  display:flex; flex-direction:column; justify-content:center; box-shadow:var(--shadow-lg);
}
.total::before{ content:""; position:absolute; z-index:-1; width:380px; height:380px; inset-inline-end:-140px; bottom:-180px; border-radius:50%; background:radial-gradient(circle, rgba(245,158,11,.30), transparent 65%); }
.total .kicker{ color:var(--amber-2); }
.total .big{ margin-top:12px; font-size:clamp(48px,6vw,68px); font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
.jauge{ margin-top:20px; height:8px; border-radius:8px; background:rgba(255,255,255,.1); overflow:hidden; }
.jauge span{ display:block; height:100%; width:100%; border-radius:8px; background:linear-gradient(90deg, var(--amber-2), #FB923C); transform-origin:left; }
[dir="rtl"] .jauge span{ transform-origin:right; }
.total p{ color:var(--soft-ink); margin-top:16px; font-size:15.5px; }
.total .conclusion{ color:#fff; font-weight:700; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); }

/* ─────────────────── Deux applications ─────────────────── */

.duo{ position:relative; overflow:hidden; isolation:isolate; border-radius:var(--radius); padding:34px; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.duo:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.duo.dark{ background:linear-gradient(150deg, var(--ink), var(--ink-3)); color:#fff; }
.duo.dark::before{ content:""; position:absolute; z-index:-1; width:300px; height:300px; inset-inline-end:-100px; top:-120px; border-radius:50%; background:radial-gradient(circle, rgba(14,165,164,.45), transparent 65%); }
.duo.light{ background:linear-gradient(150deg, var(--foam), #F4FBFA); border:1px solid #CFEDEA; }
.duo h3{ font-size:25px; margin-top:18px; }
.duo p{ margin-top:10px; font-size:16.5px; }
.duo.dark p{ color:var(--soft-ink); }
.duo.light p{ color:var(--muted); }
.badge{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-weight:800; font-size:20px; color:#fff; background:linear-gradient(135deg, var(--teal-2), var(--deep)); box-shadow:0 12px 24px rgba(14,165,164,.3); }
.duo.light .badge{ background:var(--ink); box-shadow:0 12px 24px rgba(11,36,39,.2); }
.duo-tete{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
/* L'icône telle qu'elle est sur le téléphone : carré aux coins arrondis. */
.app-icone{ width:64px; height:64px; border-radius:18px; box-shadow:0 14px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.12); transition:transform .35s var(--ease); }
.duo.light .app-icone{ box-shadow:0 14px 28px rgba(11,36,39,.22); }
.duo:hover .app-icone{ transform:rotate(-6deg) scale(1.05); }
.bientot{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; font-size:13.5px; font-weight:700; background:var(--ink); color:#fff; letter-spacing:.02em; }
.bientot i{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--mint); }
html[lang="ar"] .bientot{ letter-spacing:0; font-size:14.5px; }

/* ─────────────────── La frise de la démonstration ─────────────────── */

.frise{ list-style:none; margin-top:52px; display:grid; grid-template-columns:repeat(var(--n,3),1fr); gap:28px; position:relative; }
/* La ligne qui relie les étapes, et celle qui se dessine par-dessus. */
.frise::before, .frise::after{ content:""; position:absolute; top:27px; inset-inline:calc(100% / (2 * var(--n,3))); height:3px; border-radius:3px; }
.frise::before{ background:var(--line); }
.frise::after{ background:linear-gradient(90deg, var(--teal), var(--mint)); transform-origin:left; }
[dir="rtl"] .frise::after{ transform-origin:right; background:linear-gradient(270deg, var(--teal), var(--mint)); }
.etape{ position:relative; text-align:center; padding:0 6px; }
.etape-num{
  position:relative; z-index:1; width:56px; height:56px; margin:0 auto; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:21px; color:#fff; background:linear-gradient(135deg, var(--teal-2), var(--deep));
  box-shadow:0 0 0 8px #fff, 0 14px 26px rgba(14,165,164,.35);
}
.soft .etape-num{ box-shadow:0 0 0 8px var(--surface), 0 14px 26px rgba(14,165,164,.35); }
.etape h3{ margin-top:22px; font-size:21px; }
.etape p{ margin-top:8px; color:var(--muted); font-size:15.5px; max-width:36ch; margin-inline:auto; }
@media (max-width:900px){
  .frise{ grid-template-columns:1fr; gap:30px; }
  .frise::before, .frise::after{ top:28px; bottom:28px; inset-inline:27px auto; width:3px; height:auto; transform-origin:top; }
  [dir="rtl"] .frise::after{ transform-origin:top; }
  .frise::after{ background:linear-gradient(180deg, var(--teal), var(--mint)); }
  .etape{ text-align:start; padding-inline-start:80px; }
  .etape-num{ position:absolute; inset-inline-start:0; top:0; margin:0; }
  .etape h3{ margin-top:12px; }
  .etape p{ margin-inline:0; }
}

/* ─────────────────── Hors ligne : les preuves et la scène ─────────────────── */

.ink::before{ content:""; position:absolute; width:700px; height:700px; inset-inline-start:-300px; top:-300px; border-radius:50%; background:radial-gradient(circle, rgba(14,165,164,.22), transparent 65%); pointer-events:none; }
.hors-ligne{ align-items:center; gap:56px; margin-top:0; position:relative; }
.preuves{ margin-top:30px; display:flex; flex-direction:column; gap:12px; }
.proof{ display:flex; gap:14px; align-items:flex-start; padding:18px 20px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); transition:background .3s, border-color .3s; }
.proof:hover{ background:rgba(255,255,255,.08); border-color:rgba(94,234,212,.25); }
.proof b{ display:block; color:#fff; }
.proof span:not(.proof-ico){ display:block; color:var(--soft-ink); font-size:15px; margin-top:2px; }
.proof-ico{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:rgba(14,165,164,.2); color:var(--mint); flex:0 0 auto; margin-top:1px; }

/* La scène : une tablette qui perd le wifi, garde la voiture, et l'envoie. */
.scene{
  --cycle:9s;
  position:relative; padding:22px; border-radius:28px;
  background:linear-gradient(160deg, #123A3D, #0D2C2F); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.scene::after{ content:""; position:absolute; inset:8px; border-radius:22px; border:1px solid rgba(255,255,255,.04); pointer-events:none; }
.scene-barre{ display:flex; align-items:center; gap:10px; padding:4px 6px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.scene-wifi{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:rgba(14,165,164,.2); color:var(--mint); }
.scene-etat{ display:grid; font-weight:700; font-size:15px; }
.scene-etat i{ grid-area:1/1; font-style:normal; }
.scene-etat .en-ligne{ color:var(--mint); }
.scene-etat .hors{ color:var(--amber-2); opacity:0; }
.scene-voiture{
  margin-top:14px; display:flex; align-items:center; gap:14px; padding:16px; border-radius:18px;
  background:rgba(255,255,255,.06); border:1.5px solid rgba(245,158,11,.55);
}
.scene-voiture.fantome{ border-color:rgba(255,255,255,.08); opacity:.55; }
.scene-v-ico{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.08); color:#fff; flex:0 0 auto; }
.scene-v-txt{ flex:1; min-width:0; }
.scene-v-txt b{ display:block; color:#fff; font-size:16px; }
.scene-v-txt span{ display:block; color:var(--soft-ink); font-size:14px; }
.scene-pastille{ display:grid; font-size:13px; font-weight:700; }
.scene-pastille > i, .scene-pastille.ok{ font-style:normal; display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; white-space:nowrap; }
.scene-pastille > i{ grid-area:1/1; }
.scene-pastille .attente{ background:rgba(245,158,11,.16); color:#FCD34D; }
.scene-pastille .envoyee, .scene-pastille.ok{ background:rgba(14,165,164,.2); color:var(--mint); }
.scene-pastille .envoyee{ opacity:0; }
.scene-legende{ margin-top:16px; font-size:14px; color:var(--faint-ink) !important; text-align:center; }

/* ─────────────────── Prix (caché pour l'instant) ─────────────────── */

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
@media (max-width:900px){ .plans{ grid-template-columns:1fr; } }
.plan{ border:1px solid var(--line); border-radius:var(--radius); padding:30px; background:#fff; display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.plan:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.plan.featured{ border-color:var(--teal); box-shadow:var(--shadow); }
.plan .price{ margin-top:10px; font-size:44px; font-weight:800; line-height:1; }
.plan .price small{ font-size:16px; font-weight:600; color:var(--muted); }
.plan ul{ margin-top:18px; list-style:none; display:flex; flex-direction:column; gap:10px; }
.plan li{ display:flex; gap:10px; font-size:15.5px; }
.plan li::before{ content:"✓"; color:var(--deep); font-weight:800; }
.offer{ margin-top:26px; background:var(--ink); color:#fff; border-radius:var(--radius); padding:22px 26px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; }
.offer b{ font-size:20px; }
.offer span{ color:var(--teal); font-weight:600; }

/* ─────────────────── L'appel final ─────────────────── */

.final{ background:var(--ink); color:#fff; padding:110px 0; overflow:hidden; isolation:isolate; }
.final-fond{ position:absolute; inset:0; z-index:-1; }
.final-fond i{ position:absolute; border-radius:50%; filter:blur(60px); }
.final-fond i:nth-child(1){ width:560px; height:560px; left:50%; top:-280px; margin-left:-280px; background:radial-gradient(circle, rgba(14,165,164,.55), transparent 65%); }
.final-fond i:nth-child(2){ width:420px; height:420px; inset-inline-end:-160px; bottom:-220px; background:radial-gradient(circle, rgba(37,211,102,.22), transparent 65%); }
.contact{ text-align:center; }
.contact .kicker{ color:var(--mint); }
.contact h2{ margin-top:12px; font-size:clamp(32px,4.6vw,52px); }
.contact .lead{ margin:16px auto 0; max-width:58ch; color:var(--soft-ink); }
.contact .cta{ margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.contact .small{ margin-top:18px; font-size:14.5px; color:var(--faint-ink); }
.contact .small a{ color:var(--mint); font-weight:600; }
.contact .small a:hover{ text-decoration:underline; }

footer{ background:#081B1D; color:#8FA9AE; padding:36px 0; font-size:14px; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; }
footer .logo{ font-size:15px; }
footer nav{ margin-inline-start:auto; display:flex; flex-wrap:wrap; gap:18px; }
footer nav a:hover{ color:#fff; }
@media (max-width:700px){ footer nav{ margin-inline-start:0; } }

/* Le bouton WhatsApp qui suit la lecture : caché sur le haut de page et près des vrais boutons. */
.wa-flottant{
  position:fixed; z-index:55; bottom:22px; inset-inline-end:22px; width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, #34E27A, var(--wa-2));
  box-shadow:0 14px 30px rgba(37,211,102,.4); transition:transform .35s var(--ease), opacity .35s;
}
.wa-flottant::before{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--wa); opacity:0; }
.wa-flottant:hover{ transform:scale(1.08); }
.js .wa-flottant:not(.vu){ opacity:0; transform:scale(.6); pointer-events:none; }

/* ═══════════════════════════ Le mouvement ═══════════════════════════ */

/* Le ruban défile même quand l'appareil demande moins d'animations (choix
   d'Ali, 30 sept. 2026) : c'est un glissement lent et régulier, et il
   s'arrête sous la souris ou le doigt. Seul effets.animations le coupe. */
.anime .ruban-piste{ animation:ruban 38s linear infinite reverse; } /* vers la droite en français et en anglais, vers la gauche en arabe */
.anime[dir="rtl"] .ruban-piste{ animation-name:ruban-rtl; }
.anime .ruban:hover .ruban-piste, .anime .ruban:active .ruban-piste{ animation-play-state:paused; }

@media (prefers-reduced-motion:no-preference){

  /* Le fond du haut respire, les bulles montent. */
  .anime .hero-fond i:nth-child(1){ animation:derive1 18s ease-in-out infinite alternate; }
  .anime .hero-fond i:nth-child(2){ animation:derive2 22s ease-in-out infinite alternate; }
  .anime .hero-fond i:nth-child(3){ animation:derive3 16s ease-in-out infinite alternate; }
  .anime .bulles span{ animation:bulle var(--d) linear var(--r) infinite; }
  .anime .anneau{ animation:tourne 40s linear infinite; }
  .anime .halo{ animation:pouls 5s ease-in-out infinite; }
  .anime .hero-marque{ animation:flotte-marque 6s ease-in-out infinite; }
  .anime .flotte{ animation:flotte 7s ease-in-out infinite; }
  .anime .f2{ animation-delay:-2.3s; animation-duration:8s; }
  .anime .f3{ animation-delay:-4.6s; animation-duration:7.5s; }

  /* Le titre se pose mot à mot, le reste suit. */
  .anime .hero h1 .mot{ animation:mot .8s var(--ease) calc(.15s + var(--i) * 75ms) both; }
  .anime .entree{ animation:monte .8s var(--ease) calc(.1s + var(--i) * 80ms) both; }
  .anime .hero-visuel{ animation:apparait 1.1s var(--ease) .35s both; }


  .anime .wa-flottant::before{ animation:onde 2.6s ease-out infinite; }
  .anime .bientot i::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--mint); animation:onde 2s ease-out infinite; }

  /* Ce qui entre à l'écran en défilant (vie.js ajoute « vu »). */
  .anime.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--i, 0) * 110ms); }
  .anime.js .reveal.vu{ opacity:1; transform:none; }
  .anime.js .reveal .surligne{ background-size:0% 100%; transition:background-size 1.1s var(--ease) .55s; }
  .anime.js .reveal.vu .surligne{ background-size:100% 100%; }
  .anime.js .jauge span{ transform:scaleX(0); transition:transform 1.6s var(--ease) .3s; }
  .anime.js .total.vu .jauge span{ transform:scaleX(1); }
  .anime.js .frise::after{ transform:scaleX(0); transition:transform 1.8s var(--ease) .2s; }
  .anime.js .frise.vu::after{ transform:scaleX(1); }
  .anime.js .frise .etape{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(.3s + var(--i) * 450ms); }
  .anime.js .frise.vu .etape{ opacity:1; transform:none; }
  @media (max-width:900px){ .anime.js .frise::after{ transform:scaleY(0); } .anime.js .frise.vu::after{ transform:scaleY(1); } }

  /* La scène hors ligne, en boucle, une fois à l'écran. */
  .anime .scene .en-ligne{ animation:s-en-ligne var(--cycle) infinite paused; }
  .anime .scene .hors{ animation:s-hors var(--cycle) infinite paused; }
  .anime .scene-wifi{ animation:s-wifi var(--cycle) infinite paused; }
  .anime .scene-voiture:not(.fantome){ animation:s-voiture var(--cycle) infinite paused; }
  .anime .scene .attente{ animation:s-attente var(--cycle) infinite paused; }
  .anime .scene .envoyee{ animation:s-envoyee var(--cycle) infinite paused; }
  .anime .scene.vu *, .anime:not(.js) .scene *{ animation-play-state:running; }
}

@keyframes derive1{ to{ transform:translate(-80px, 60px) scale(1.12); } }
@keyframes derive2{ to{ transform:translate(90px, -50px) scale(1.08); } }
@keyframes derive3{ to{ transform:translate(-60px, -40px) scale(1.25); } }
@keyframes bulle{
  0%{ transform:translate(0,0) scale(.6); opacity:0; }
  12%{ opacity:.9; }
  85%{ opacity:.7; }
  100%{ transform:translate(var(--x), -115vh) scale(1.05); opacity:0; }
}
@keyframes tourne{ to{ rotate:360deg; } }
@keyframes pouls{ 50%{ transform:scale(1.08); opacity:.8; } }
@keyframes flotte-marque{ 50%{ transform:translateY(-10px); } }
@keyframes flotte{ 50%{ transform:translateY(-12px); } }
@keyframes mot{ from{ opacity:0; transform:translateY(.55em) rotate(2deg); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes monte{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
@keyframes apparait{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:none; } }
@keyframes ruban{ to{ transform:translateX(-50%); } }
@keyframes ruban-rtl{ to{ transform:translateX(50%); } }
@keyframes onde{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(1.7); opacity:0; } }

/* Le cycle de la scène : en ligne → le wifi tombe → une voiture arrive,
   en attente → le réseau revient → elle part. */
@keyframes s-en-ligne{ 0%,14%{ opacity:1; } 16%,58%{ opacity:0; } 60%,100%{ opacity:1; } }
@keyframes s-hors{ 0%,14%{ opacity:0; } 16%,58%{ opacity:1; } 60%,100%{ opacity:0; } }
@keyframes s-wifi{
  0%,14%{ background:rgba(14,165,164,.2); color:#5EEAD4; }
  16%,58%{ background:rgba(245,158,11,.16); color:#F59E0B; transform:scale(.94); }
  60%,100%{ background:rgba(14,165,164,.2); color:#5EEAD4; }
}
@keyframes s-voiture{
  0%,22%{ opacity:0; transform:translateY(-12px) scale(.97); border-color:rgba(245,158,11,.55); }
  28%,64%{ opacity:1; transform:none; border-color:rgba(245,158,11,.55); }
  68%,94%{ opacity:1; transform:none; border-color:rgba(14,165,164,.6); }
  100%{ opacity:0; transform:none; border-color:rgba(14,165,164,.6); }
}
@keyframes s-attente{ 0%,64%{ opacity:1; } 67%,100%{ opacity:0; } }
@keyframes s-envoyee{ 0%,64%{ opacity:0; transform:scale(.8); } 67%{ opacity:1; transform:scale(1.08); } 70%,100%{ opacity:1; transform:none; } }

/* Sans mouvement, la scène montre son moment le plus parlant : le wifi est
   tombé, et la voiture attend quand même, gardée par la tablette. */
@media (prefers-reduced-motion:reduce){
  .scene .en-ligne{ opacity:0; }
  .scene .hors{ opacity:1; }
  .scene-wifi{ background:rgba(245,158,11,.16); color:#F59E0B; }
}
html:not(.anime) .scene .en-ligne{ opacity:0; }
html:not(.anime) .scene .hors{ opacity:1; }
html:not(.anime) .scene-wifi{ background:rgba(245,158,11,.16); color:#F59E0B; }