/* MATHRENA.COM — LE STYLE DE L'APP (3 oct. 2026, maquette w1 : reference/maquettes/v2/w1-site-accueil.js).
   Fond uni, couleurs pleines, une seule police (Nunito, hébergée ICI : ouvrir le site n'envoie rien à Google), bords
   de 2 px, coins de 16, relief par une « lèvre » sous les boutons et les cartes (le bouton s'enfonce sous le doigt).
   Clair par défaut, sombre si le téléphone l'est. Les couleurs sont celles de src/theme/colors.ts (thème clair
   = maquette s8) ; les noms des rangs, celles de couleurRangEcrite (src/lib/ranks.ts).
   Une seule feuille pour toutes les pages : l'accueil (index.html) et les pages « feuille » (.card : accord
   parental, confidentialité, règles, duel, ami, Pro, liste, suppression), dont les scripts créent encore
   button, button.danger, a.button, .error, .muted, .code. */

@font-face{font-family:'Nunito';src:url(fonts/Nunito-600.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Nunito';src:url(fonts/Nunito-800.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Nunito';src:url(fonts/Nunito-900.woff2) format('woff2');font-weight:900;font-display:swap}

:root{
  --bg:#FFFFFF;--surface:#F3F5F8;--carte:#FFFFFF;--bord:#E1E5EB;--levre:#D3D9E1;--texte:#1B2230;--doux:#5E6778;--faible:#7A8394;
  --violet:#7C5CFF;--violet-levre:#5A3DD6;--violet-ecrit:#6A48F0;--bleu:#4DA8FF;--bleu-levre:#2C7FD4;--bleu-encre:#07223D;
  --vert:#3DDC84;--vert-levre:#1FA85E;--vert-encre:#0D2A19;--vert-ecrit:#1A9E57;--rouge:#FF5C6C;--rouge-levre:#C93A4A;--rouge-ecrit:#D93848;
  --ambre:#FFC24B;--ambre-levre:#D69A12;--ambre-encre:#3A2A00;--ambre-ecrit:#A87400;--ambre-fond:#FFF6E0;--violet-fond:#F1EDFF;--creux:#F3F5F8;
  --bronze:#A8733D;--argent:#7D8A9C;--or:#C99A12;--platine:#2FA3A3;--diamant:#3AA3DD;--maitre:#9A4FF0;--gm:#E0464F;--legende:#B58A10;
}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;
  --bg:#131820;--surface:#1B212C;--carte:#1B212C;--bord:#2A3242;--levre:#222936;--texte:#EEF1F6;--doux:#98A1B3;--faible:#7A8496;
  --violet-ecrit:#B9A8FF;--vert-ecrit:#3DDC84;--rouge-ecrit:#FF7A88;--ambre-ecrit:#FFC24B;--ambre-fond:#2E2512;--violet-fond:#221C40;--creux:#131820;
  --bronze:#C68F53;--argent:#C4CEDA;--or:#F2C94C;--platine:#7FD8D8;--diamant:#9BDCFF;--maitre:#B36FFF;--gm:#FF6B72;--legende:#F2C94C}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--texte);font-family:Nunito,ui-rounded,-apple-system,'Segoe UI',Arial,sans-serif;font-weight:600;line-height:1.5;padding-inline:16px}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet-ecrit);font-weight:800}
h1,h2,h3{text-wrap:balance}

/* ── la marque (l'icône + « mathrena ») ── */
.marque{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.marque .icone{width:40px;height:40px;border-radius:22.5%}
.marque .nom{width:132px;height:22px}

/* ── les boutons à lèvre de l'app ── */
.btn,button,a.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:16px;border:0;
  font:inherit;font-weight:900;font-size:16px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  background:var(--violet);color:#FFFFFF;box-shadow:0 4px 0 var(--violet-levre);transition:transform .08s,box-shadow .08s}
.btn:active,button:active,a.button:active{transform:translateY(4px);box-shadow:none}
.btn:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}
button:disabled{opacity:.6;cursor:default;transform:none}
button.danger{background:var(--rouge);box-shadow:0 4px 0 var(--rouge-levre)}
.btn.bleu{background:var(--bleu);color:var(--bleu-encre);box-shadow:0 4px 0 var(--bleu-levre);min-height:48px;padding:0 18px;font-size:14px}
.btn.petit-btn{min-height:40px;padding:0 16px;font-size:13px}

/* ── les champs ── */
input[type=email],input[type=text]{width:100%;min-height:48px;border-radius:14px;border:2px solid var(--bord);background:var(--carte);color:var(--texte);font:inherit;font-size:16px;padding:0 14px}
.muted{color:var(--doux);font-size:15px}
.error{color:var(--rouge-ecrit);font-size:15px;font-weight:800;margin-top:10px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ═════════════ L'ACCUEIL ═════════════ */
.page{max-width:1120px;margin:0 auto}
header.haut-de-page{display:flex;align-items:center;gap:20px;padding-block:14px}
header.haut-de-page .marque{margin-right:auto}
header.haut-de-page nav{display:flex;gap:20px}
header.haut-de-page nav a{color:var(--doux);text-decoration:none;font-size:15px}
.ouverture{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-block:28px 56px}
h1.titre{font-size:clamp(46px,7vw,78px);line-height:1.02;font-weight:900;margin:0 0 16px;letter-spacing:-.01em}
h1.titre span{color:var(--violet-ecrit)}
.chapeau{font-size:20px;color:var(--doux);max-width:30ch;margin:0 0 26px}
.chapeau b{color:var(--texte)}
.petit{font-size:15px;color:var(--doux);margin:12px 0 0}
.liste{margin-top:22px;max-width:440px}
.liste label{display:block;font-size:15px;color:var(--doux);font-weight:800;margin-bottom:8px}
.liste .ligne{display:flex;gap:10px}
.liste .ligne .btn{flex:none;white-space:nowrap}
.liste .ligne input{flex:1 1 auto;min-width:0;width:auto}
.liste .status{margin:8px 0 0;font-size:14px;font-weight:800;min-height:0}
.liste .status.err{color:var(--rouge-ecrit)}
.liste .ok{display:none;align-items:center;gap:10px;background:var(--surface);border-radius:14px;padding:12px 14px;font-size:15px}
.liste .ok b{display:block}
.liste.done .ligne,.liste.done label{display:none}
.liste.done .ok{display:flex}
.puces{display:flex;flex-wrap:wrap;gap:6px 18px;margin:18px 0 0;padding:0;list-style:none;font-size:15px;font-weight:800;color:var(--doux)}
.puces li::before{content:"✓";color:var(--vert-ecrit);margin-right:6px;font-weight:900}
/* le téléphone (une vraie capture de l'app), Hexa et sa bulle */
.scene{position:relative;width:min(480px,100%);height:612px;margin:0 auto}
.scene .tel{position:absolute;right:0;top:0;width:290px;border-radius:44px;background:#0B0D12;padding:10px;box-shadow:0 8px 0 #000000}
.scene .tel img{border-radius:34px;width:270px}
.scene .hexa{position:absolute;left:20px;bottom:0;width:170px}
.scene .hexa img{width:100%}
.scene .bulle{position:absolute;left:0;bottom:178px;background:var(--carte);border:2px solid var(--bord);border-radius:16px;padding:10px 14px;font-weight:900;font-size:17px;max-width:176px;box-shadow:0 4px 0 var(--levre);margin:0}
/* les sections */
section.bloc{padding-block:52px;border-top:2px solid var(--bord)}
h2.titre{font-size:clamp(30px,4.4vw,44px);line-height:1.1;font-weight:900;margin:0 0 8px}
.intro{font-size:19px;color:var(--doux);max-width:46ch;margin:0 0 26px}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.regle{border-radius:20px;padding:22px}
.regle .gros{font-size:58px;font-weight:900;line-height:1}
.regle h3{font-size:21px;font-weight:900;margin:6px 0 4px}
.regle p{margin:0;font-size:16px}
.r1{background:var(--violet);color:#FFFFFF;box-shadow:0 5px 0 var(--violet-levre)}
.r2{background:var(--vert);color:var(--vert-encre);box-shadow:0 5px 0 var(--vert-levre)}
.r3{background:var(--ambre);color:var(--ambre-encre);box-shadow:0 5px 0 var(--ambre-levre)}
.etagere{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;background:var(--surface);border:2px solid var(--bord);border-radius:20px;padding:20px 12px 16px;box-shadow:0 5px 0 var(--levre);margin:0;list-style:none}
.rang{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.rang img{width:84px;height:84px}
.rang b{font-size:15px;font-weight:900;line-height:1.15}
.rang small{font-size:12px;color:var(--faible);font-weight:800}
.rang.ici small{color:var(--violet-ecrit)}
.chapitres{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;list-style:none}
.chapitre{display:flex;align-items:center;gap:12px;background:var(--carte);border:2px solid var(--bord);border-radius:16px;padding:12px 14px;font-weight:900;font-size:17px;box-shadow:0 4px 0 var(--levre)}
.chapitre img{width:44px;height:44px;flex:none}
.quatre{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tuile{background:var(--carte);border:2px solid var(--bord);border-radius:20px;padding:18px;box-shadow:0 5px 0 var(--levre)}
.tuile .dessin{height:96px;display:flex;align-items:center;gap:6px}
.tuile .dessin img{height:88px;width:auto}
.tuile .dessin img.petit-dessin{height:54px}
.tuile h3{font-size:21px;font-weight:900;margin:8px 0 2px}
.tuile p{margin:0;font-size:16px;color:var(--doux)}
.parents{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.parent{background:var(--surface);border-radius:20px;padding:20px}
.parent h3{font-size:19px;font-weight:900;margin:0 0 4px}
.parent p{margin:0;font-size:16px;color:var(--doux)}
.note{font-size:15px;color:var(--faible);margin:18px 0 0}
.final{background:var(--violet);color:#FFFFFF;border-radius:28px;padding:36px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;box-shadow:0 6px 0 var(--violet-levre);margin-block:52px 40px}
.final h2.titre{color:#FFFFFF;margin-bottom:18px}
.final .btn{background:#FFFFFF;color:var(--violet-levre);box-shadow:0 4px 0 #C9BEFF}
.final .btn.bleu{background:var(--bleu);color:var(--bleu-encre);box-shadow:0 4px 0 var(--bleu-levre)}
.final .petit,.final .liste label,.final .petit a{color:#EDE8FF}
.final .liste input{border-color:#B9A8FF;background:#FFFFFF;color:#1B2230}
.final .liste .ok{background:#6A4BEF;color:#FFFFFF}
.final .liste .status.err{color:#FFE0E3}
.final .hexa-fin{width:190px}
footer.bas-de-page{border-top:2px solid var(--bord);padding-block:24px 40px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
footer.bas-de-page nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-left:auto}
footer.bas-de-page nav a{color:var(--doux);text-decoration:none;font-size:15px}
footer.bas-de-page p{flex-basis:100%;margin:0;font-size:14px;color:var(--faible)}

@media (max-width:900px){
  .ouverture{grid-template-columns:1fr;gap:24px;padding-top:12px}
  .trois{grid-template-columns:1fr}
  .etagere{grid-template-columns:repeat(4,1fr);gap:14px 6px}
  .chapitres{grid-template-columns:1fr 1fr}
  .quatre,.parents{grid-template-columns:1fr 1fr}
  .final{grid-template-columns:1fr;padding:26px 20px}
  .final .hexa-fin{width:130px}
  header.haut-de-page nav{display:none}
}
@media (max-width:540px){
  .chapitres,.quatre,.parents{grid-template-columns:1fr}
  .rang img{width:64px;height:64px}
  .rang b{font-size:13px}
  .btn.large{width:100%}
  .scene{height:525px}
  .scene .tel{width:250px;border-radius:38px}.scene .tel img{width:230px;border-radius:30px}
  .scene .hexa{left:0;width:116px}
  .scene .bulle{bottom:122px;font-size:14px;max-width:110px;padding:8px 10px}
  .regle{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:center}
  .regle .gros{grid-row:span 2;font-size:48px}
  .regle h3{margin:0}
}

/* ── les mouvements de l'accueil (3 oct. 2026, demande de l'utilisateur) ──
   1. En descendant, chaque bloc arrive en fondu en montant un peu, un par un (--i : son rang dans le groupe). La classe
      « anime » n'est posée (en tête de index.html) que si le navigateur sait faire et que le téléphone ne réduit pas les
      animations : sinon tout est visible tout de suite.
   2. Les petits dessins bougent doucement, en boucle : Hexa et les cristaux flottent, la flamme vacille, le flocon
      tourne, la pièce pivote, l'Hexa-boîte tremblote (comme dans l'onglet Quêtes), Hexa se balance en bas de page.
      Un mouvement de boucle ne vit jamais sur le même élément qu'une apparition (les deux se disputeraient transform). */
@media (prefers-reduced-motion:no-preference){
  .anime .revele{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.75,.3,1);transition-delay:calc(var(--i,0) * 110ms)}
  .anime .revele.vu{opacity:1;transform:none}
  .anime .revele.saute{transform:translateY(10px) scale(.6);transform-origin:20% 100%}
  .anime .revele.saute.vu{transform:none;transition-timing-function:ease,cubic-bezier(.3,1.6,.5,1)}
  .flotte{animation:flotte 3.2s ease-in-out infinite;animation-delay:var(--d,0s)}
  .flotte-lent{animation:flotte 6s ease-in-out infinite}
  .vacille{animation:vacille 1.4s ease-in-out infinite;transform-origin:50% 90%}
  .tourne{animation:tourne 10s linear infinite}
  .tremble{animation:tremble 2.4s ease-in-out infinite;transform-origin:50% 90%}
  .pivote{animation:pivote 3.6s ease-in-out infinite}
  .balance{animation:balance 2.6s ease-in-out infinite;transform-origin:50% 85%}
}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes vacille{0%,100%{transform:scale(1,1) rotate(0)}30%{transform:scale(1.05,.95) rotate(-2deg)}60%{transform:scale(.96,1.05) rotate(2deg)}}
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes tremble{0%,58%,100%{transform:none}63%{transform:translateY(2px) scale(1.05,.93)}68%{transform:translateY(-3px) rotate(-5deg)}73%{transform:rotate(5deg)}78%{transform:rotate(-4deg)}83%{transform:rotate(3deg)}90%{transform:none}}
@keyframes pivote{0%,55%{transform:rotateY(0)}80%,100%{transform:rotateY(360deg)}}
@keyframes balance{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* ═════════════ LES PAGES « FEUILLE » ═════════════ */
.card{max-width:640px;margin:24px auto 48px;background:var(--carte);border:2px solid var(--bord);border-radius:20px;padding:28px;box-shadow:0 5px 0 var(--levre)}
.card > .marque{margin-bottom:18px}
.card h1{font-size:28px;line-height:1.15;font-weight:900;margin:0 0 12px}
.card h2{font-size:20px;line-height:1.25;font-weight:900;margin:28px 0 8px;scroll-margin-top:24px}
.card p{margin:0 0 14px}
.card ol,.card ul{margin:0 0 14px;padding-left:22px}
.card li{margin:0 0 8px}
.card label{display:block;font-size:15px;font-weight:800;color:var(--doux);margin:16px 0 6px}
.card button,.card a.button{display:flex;width:100%;margin-top:20px}
.card hr{border:0;border-top:2px solid var(--bord);margin:24px 0}
.card .code{font-size:38px;letter-spacing:8px;font-weight:900;margin:18px 0;padding:18px 8px;border-radius:16px;border:2px solid var(--violet);background:var(--violet-fond);color:var(--violet-ecrit);word-break:break-all;text-align:center}
.card .encadre{background:var(--creux);border-radius:16px;padding:16px 18px;margin:0 0 18px}
.card .bandeau,.card .todo{background:var(--ambre-fond);border:2px solid var(--ambre);border-radius:16px;padding:14px 16px;margin:18px 0}
.card .bandeau p,.card .todo p{color:var(--ambre-ecrit);margin:0 0 8px}
.card .bandeau p:last-child,.card .todo p:last-child{margin-bottom:0}
.card .fill{display:inline-block;padding:2px 8px;border-radius:8px;border:2px dashed var(--ambre);color:var(--ambre-ecrit);font-weight:800;font-size:14px}
.card .resume{background:var(--violet-fond);border-radius:16px;padding:16px 18px;margin:20px 0}
.card .resume ul{margin:0;padding-left:20px}
.card .resume li:last-child{margin-bottom:0}
.card .toc{font-size:15px;padding-left:20px}
.card .toc li{margin:0 0 4px}
.card dl.donnees{margin:0 0 12px;padding:0}
.card dl.donnees dt{margin-top:16px;font-weight:900}
.card dl.donnees dd{margin:4px 0 0;color:var(--doux)}
.card .offres{display:grid;gap:10px;margin:0 0 14px}
.card .offre{background:var(--creux);border-radius:16px;padding:14px 16px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px}
.card .prix{font-weight:900}
.card .offre .muted{flex-basis:100%;margin:0}
.card footer,footer.pied{margin-top:28px;font-size:14px;color:var(--faible)}
.card footer a,footer.pied a{color:var(--doux)}
footer.pied{max-width:640px;margin:0 auto 40px;text-align:center}
.centre{text-align:center}
.centre .marque{justify-content:center}
@media (max-width:540px){.card{padding:22px 18px;margin-top:12px}.card h1{font-size:25px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,button,a.button{transition:none}}

/* ═════════════ LA PAGE « MATHRENA PRO, POUR LES PARENTS » (pro.html, 18 oct. 2026) ═════════════
   Pensée d'abord pour le téléphone (la plupart des parents l'ouvrent depuis le message de leur enfant). L'identité du Pro,
   AURORE : la nuit (#161B3F), le dégradé cyan → violet → magenta, Hexa Pro. Le haut et la bande des formules restent dans la
   nuit dans les deux thèmes ; le reste suit le téléphone (clair par défaut, sombre s'il l'est). De vraies captures de l'app,
   dans un téléphone dessiné. */
.page-pro{--nuit:#161B3F;--nuit-carte:#1E2452;--nuit-bord:#2A3170;--nuit-texte:#F4F6FF;--nuit-doux:#B9BEE6;
  --aurore:linear-gradient(135deg,#2EE6D6,#7C5CFF 52%,#FF4FA3);--aurore-plat:linear-gradient(90deg,#2EE6D6,#7C5CFF,#FF4FA3);
  --aurore-sombre:linear-gradient(135deg,#1FA89C,#5A3DD6 52%,#C42E78);--aurore-pale:#F1EDFF}
@media (prefers-color-scheme:dark){.page-pro{--aurore-pale:#221C40}}
.degrade{background:var(--aurore-plat);-webkit-background-clip:text;background-clip:text;color:transparent}
.etiquette-pro{display:inline-block;border-radius:9px;padding-bottom:3px;background:var(--aurore-sombre);vertical-align:middle}
.etiquette-pro span{display:block;border-radius:9px;background:var(--aurore-plat);color:#fff;font-weight:900;font-size:13px;letter-spacing:.12em;padding:3px 10px;line-height:1.3}
.btn.aurore{background:var(--aurore);box-shadow:0 4px 0 #5A3DD6}

/* le haut, dans la nuit, sur toute la largeur */
.pro-haut{position:relative;margin-inline:-16px;background:var(--nuit);color:var(--nuit-texte);overflow:hidden;padding:0 16px 34px}
.pro-haut::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--aurore-plat)}
.pro-haut-dedans{max-width:1080px;margin:0 auto;position:relative;z-index:1}
.pro-barre{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px}
.pro-barre .pour{font-size:14px;font-weight:800;color:var(--nuit-doux);text-align:right}
.pro-ouverture{display:grid;gap:8px;padding-top:6px}
.pro-ouverture h1{font-size:clamp(36px,10.5vw,64px);line-height:1.04;font-weight:900;margin:14px 0 12px;letter-spacing:-.01em}
.pro-chapeau{font-size:18px;line-height:1.45;color:var(--nuit-doux);margin:0 0 18px;max-width:32ch}
.pro-chapeau b{color:var(--nuit-texte)}
.pro-prix{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;background:rgba(255,255,255,.08);border:2px solid var(--nuit-bord);border-radius:16px;padding:10px 14px;font-weight:800;font-size:15px}
.pro-prix b{font-size:22px;font-weight:900}
.pro-note{font-size:14px;color:var(--nuit-doux);margin:14px 0 0;display:flex;gap:8px;align-items:flex-start}
.pro-note::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#FFC24B;margin-top:7px}
.pro-scene{position:relative;height:250px;display:flex;align-items:center;justify-content:center;margin-top:8px}
.pro-scene .hexa{width:210px;height:210px;position:relative;z-index:2}
.pro-scene .icone-app{position:absolute;width:64px;height:64px;border-radius:22.5%;right:8%;bottom:20px;transform:rotate(9deg);box-shadow:0 6px 0 rgba(0,0,0,.35);z-index:3}
.pro-scene .rang{position:absolute;width:58px;z-index:1}
.ciel{position:absolute;inset:0;pointer-events:none}
.ciel i{position:absolute;border-radius:50%;background:#fff;opacity:.6}
.ciel b{position:absolute;width:10px;height:10px;background:#2EE6D6;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.ciel b.rose{background:#FF4FA3}

.pro-corps{max-width:1080px;margin:0 auto}
.pro-section{padding-block:44px 8px}
.pro-section > h2,.pro-titre{font-size:clamp(28px,7.5vw,44px);line-height:1.1;font-weight:900;margin:0 0 10px}
.pro-section > .sous{font-size:17px;color:var(--doux);margin:0 0 24px;max-width:46ch}

/* les trois grands avantages : le texte, puis l'écran de l'app */
.atout{display:grid;gap:22px;align-items:center;padding-block:26px;border-top:2px solid var(--bord)}
.atout:first-of-type{border-top:0}
.atout .rond-atout{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--aurore);box-shadow:0 4px 0 #5A3DD6;margin-bottom:14px}
.atout .rond-atout svg{width:28px;height:28px}
.atout h3{font-size:clamp(24px,6.6vw,34px);line-height:1.12;font-weight:900;margin:0 0 10px}
.atout p{font-size:17px;color:var(--doux);margin:0 0 16px;max-width:40ch}
.atout p b{color:var(--texte)}
.duo{display:flex;flex-wrap:wrap;gap:8px}
.duo span{border-radius:12px;padding:7px 12px;font-size:14px;font-weight:900;background:var(--creux);color:var(--doux);border:2px solid var(--bord)}
.duo span.pro{background:var(--aurore-pale);color:var(--violet-ecrit);border-color:transparent;box-shadow:inset 0 0 0 2px #7C5CFF}

/* le téléphone dessiné autour d'une vraie capture */
.ecrans{position:relative;display:flex;justify-content:center;padding:8px 0 18px}
.tel{margin:0;width:min(250px,68vw);border-radius:30px;border:7px solid #0E1230;background:#131820;box-shadow:0 10px 0 #0A0D24,0 24px 48px rgba(22,27,63,.25);overflow:hidden;position:relative}
.tel img{width:100%}
.tel.petit{position:absolute;width:min(190px,50vw);right:max(0px,calc(50% - 210px));bottom:-6px;border-width:6px;border-radius:24px;transform:rotate(4deg)}
.ecrans.avec-petit{padding-right:34px;justify-content:flex-start;padding-left:max(0px,calc(50% - 160px))}
.tel .halo{display:none}

/* « et aussi » : des cartes */
.aussi{display:grid;gap:12px}
.carte-pro{background:var(--carte);border:2px solid var(--bord);border-radius:20px;box-shadow:0 5px 0 var(--levre);padding:18px;display:grid;grid-template-columns:56px 1fr;gap:4px 14px;align-items:center}
.carte-pro img.ic{width:56px;height:56px;grid-row:span 2}
.carte-pro h3{font-size:18px;font-weight:900;margin:0;line-height:1.2}
.carte-pro p{font-size:15px;color:var(--doux);margin:0}
.carte-pro .apercu{grid-column:1 / -1;margin-top:12px;border-radius:14px;overflow:hidden;border:2px solid var(--bord)}

/* le tableau gratuit / Pro */
.comparatif{background:var(--carte);border:2px solid var(--bord);border-radius:20px;box-shadow:0 5px 0 var(--levre);padding:6px 14px 10px;position:relative}
.comparatif .ligne{display:grid;grid-template-columns:1fr 82px 82px;align-items:center;min-height:52px;border-top:2px solid var(--bord);font-weight:800;font-size:15px;line-height:1.25}
.comparatif .ligne:first-child{border-top:0;min-height:46px}
.comparatif .ligne > span:nth-child(n+2){text-align:center;font-size:13.5px}
.comparatif .entete span{font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--doux)}
.comparatif .entete .etiquette-pro span{color:#fff;font-size:11px;letter-spacing:.12em;padding:2px 8px}
.comparatif .gratuit{color:var(--doux)}
.comparatif .propro{font-weight:900;color:var(--violet-ecrit)}
.comparatif .coche{display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--aurore);color:#fff;align-items:center;justify-content:center;font-size:14px;font-weight:900}
.comparatif .coche.grise{background:var(--creux);color:var(--doux);border:2px solid var(--bord)}
.comparatif .tiret{display:inline-block;width:16px;height:3px;border-radius:2px;background:var(--bord);vertical-align:middle}

/* ce qui reste gratuit */
.toujours{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.toujours li{display:flex;gap:12px;align-items:flex-start;font-size:16px;font-weight:700;background:var(--creux);border-radius:16px;padding:14px 16px}
.toujours li::before{content:"✓";flex:none;width:26px;height:26px;border-radius:50%;background:var(--vert);color:var(--vert-encre);display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:14px}
.toujours b{font-weight:900}

/* les formules, dans la nuit */
.formules{margin-inline:-16px;background:var(--nuit);color:var(--nuit-texte);padding:44px 16px;margin-top:44px;position:relative;overflow:hidden}
.formules-dedans{max-width:1080px;margin:0 auto;position:relative;z-index:1}
.formules h2{font-size:clamp(28px,7.5vw,44px);line-height:1.1;font-weight:900;margin:0 0 20px}
.offres-pro{display:grid;gap:14px}
.offre-pro{border-radius:22px;padding:20px;background:var(--nuit-carte);border:2px solid var(--nuit-bord);position:relative}
.offre-pro.vedette{border:0;padding:22px;background:linear-gradient(var(--nuit-carte),var(--nuit-carte)) padding-box,var(--aurore) border-box;border:3px solid transparent}
.offre-pro .badge{position:absolute;top:-13px;left:18px;background:#3DDC84;color:#0D2A19;font-weight:900;font-size:12.5px;letter-spacing:.04em;border-radius:10px;padding:4px 10px;box-shadow:0 3px 0 #1FA85E}
.offre-pro h3{margin:0 0 6px;font-size:18px;font-weight:900}
.offre-pro .montant{font-size:34px;font-weight:900;line-height:1.1}
.offre-pro .montant small{font-size:16px;font-weight:800;color:var(--nuit-doux)}
.offre-pro p{margin:6px 0 0;color:var(--nuit-doux);font-size:15px}
.formules .petit-texte{font-size:14px;color:var(--nuit-doux);margin:18px 0 0;max-width:62ch}

/* moins de 15 ans : les étapes */
.etapes{list-style:none;counter-reset:e;margin:0;padding:0;display:grid;gap:12px}
.etapes li{counter-increment:e;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;font-size:16px}
.etapes li::before{content:counter(e);width:40px;height:40px;border-radius:12px;background:var(--violet);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--violet-levre)}
.etapes b{font-weight:900}
.etapes p{margin:0;color:var(--doux)}
.etapes p b{color:var(--texte)}

/* les questions */
.faq{display:grid;gap:10px}
.faq details{background:var(--carte);border:2px solid var(--bord);border-radius:16px;box-shadow:0 4px 0 var(--levre)}
.faq summary{cursor:pointer;list-style:none;padding:16px 48px 16px 18px;font-weight:900;font-size:16px;position:relative;min-height:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;border-right:3px solid var(--doux);border-bottom:3px solid var(--doux);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0;padding:0 18px 16px;color:var(--doux);font-size:15.5px}

.pro-fin{text-align:center;padding:44px 0 8px}
.pro-fin img{width:96px;height:96px;margin:0 auto 10px}
.pro-fin p{font-size:17px;color:var(--doux);max-width:36ch;margin:0 auto}

/* l'ordinateur et la tablette : deux colonnes, l'écran à côté du texte */
@media (min-width:860px){
  .pro-ouverture{grid-template-columns:1.1fr .9fr;align-items:center;gap:28px}
  .pro-scene{height:340px}
  .pro-scene .hexa{width:280px;height:280px}
  .atout{grid-template-columns:1fr 1fr;gap:48px;padding-block:44px}
  .atout.inverse .atout-texte{order:2}
  .aussi{grid-template-columns:1fr 1fr}
  .offres-pro{grid-template-columns:1fr 1fr}
  .comparatif .ligne{grid-template-columns:1fr 130px 130px}
}
@media (prefers-reduced-motion:no-preference){
  .scintille{animation:scintille 2.4s ease-in-out infinite;animation-delay:var(--d,0s)}
}
@keyframes scintille{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.5);opacity:.5}}