/* =========================================================================
   Tijara — design system « plateau de jeu »
   Règles : couleurs franches et plates (AUCUN dégradé), aucun emoji (SVG only),
   thème clair uniquement, mobile-first, RTL natif (propriétés logiques).
   ========================================================================= */

:root{
  /* surfaces — blanc chaud premium, aligné mot pour mot sur la page d'accueil */
  --paper:#FBFAF7;      /* fond papier chaud */
  --sand:#F1ECE1;       /* creux, pistes, rails */
  --card:#FFFFFF;
  --line:#EAE5D9;
  --line-d:#D9D2C2;

  /* encre chaude, presque noire — titres compris, comme sur l'accueil */
  --ink:#17140E;
  --ink2:#5A554B;
  --ink3:#938B7B;

  /* Couleurs de module — l'identité colorée du plateau, CONSERVÉE (bleu, vert,
     corail, violet). Seul le doré s'accorde au doré premium de l'accueil, parce
     qu'il sert aussi d'accent partagé (lueurs, badges, panneaux). */
  --green:#0F9B6C;  --green-d:#0A7250;  --green-l:#E4F4EE;
  --teal:#0E4B44;
  --gold:#BD8524;   --gold-d:#8C6215;   --gold-l:#FAF3E3;   --gold-hi:#E7B851;
  --coral:#E4573D;  --coral-d:#B93F29;  --coral-l:#FCE9E4;
  --blue:#2F6BD8;   --blue-d:#2251AC;   --blue-l:#E5EDFB;
  --violet:#6B4BD6; --violet-d:#5236AE; --violet-l:#ECE7FB;

  /* Panneaux « console », lueurs et élévation — repris de la page d'accueil. */
  --panel:#161209;  --panel-2:#221B10;  --panel-3:#2E2616;
  --panel-line:rgba(255,255,255,.10);
  --panel-ink:#F6F0E3; --panel-ink2:#B6AC97;
  --glow:rgba(190,133,36,.28); --glow-strong:rgba(190,133,36,.42);
  --sh-1:0 1px 2px rgba(23,20,14,.05),0 8px 20px -12px rgba(23,20,14,.16);
  --sh-2:0 22px 48px -28px rgba(23,20,14,.36);
  --sh-glow:0 12px 32px -14px var(--glow-strong);
  --grad-gold:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,var(--gold-d));

  --r:16px; --r-s:11px; --r-l:22px;
  --t:.26s cubic-bezier(.2,.75,.3,1);
  /* La profondeur des cartes passe d'une ombre plate « plateau » à une ombre
     douce et étagée, premium — comme sur l'accueil. Les accents franchement
     ludiques (nœud actif, numéro de chapitre, médaille) gardent, eux, leur
     ombre colorée à 3 px. */
  --lift:var(--sh-1);
}

/* couleurs par module — le parcours se lit comme un plateau */
.m0{--mc:var(--gold);   --mc-d:var(--gold-d);   --mc-l:var(--gold-l)}
.m1{--mc:var(--blue);   --mc-d:var(--blue-d);   --mc-l:var(--blue-l)}
.m2{--mc:var(--green);  --mc-d:var(--green-d);  --mc-l:var(--green-l)}
.m3{--mc:var(--coral);  --mc-d:var(--coral-d);  --mc-l:var(--coral-l)}
.m4{--mc:var(--violet); --mc-d:var(--violet-d); --mc-l:var(--violet-l)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  font-size:16px;font-weight:400;line-height:1.75;padding-bottom:84px;
}
[dir="rtl"] body{font-size:17px;line-height:1.9}
h1,h2,h3,.display{font-family:"Baloo Bhaijaan 2","Readex Pro",system-ui,sans-serif;font-weight:800;line-height:1.22;letter-spacing:-.015em}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:0}
h1{color:var(--ink);font-size:1.7rem;margin:.1em 0 .45em}
h2{color:var(--ink);font-size:1.2rem;margin:0 0 .35em}
h3{font-size:1rem;margin:0 0 .2em}
p{margin:.35em 0 .7em}
a{color:var(--green-d);text-underline-offset:3px}
.muted{color:var(--ink2);font-size:.9rem;line-height:1.65}
.ico{flex:none;display:block}
.center{text-align:center}
.stack{display:flex;flex-direction:column;gap:14px}

/* ============================ topbar ============================ */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  background:var(--paper);padding:9px 14px;border-bottom:2px solid var(--line);
}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--teal);margin-inline-end:auto}
.brand-mark{width:30px;height:30px;border-radius:9px;background:var(--teal);color:#fff;display:grid;place-items:center;flex:none}
.brand-txt{font-family:Amiri,serif;font-weight:700;font-size:1.18rem;white-space:nowrap}
.chip{
  display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:99px;
  font-size:.82rem;font-weight:600;background:var(--card);border:2px solid var(--line);color:var(--ink)
}
.chip b{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800}
.chip-flame{border-color:#F6D9BC;color:var(--coral-d)}
.chip-flame .ico{color:var(--coral);animation:flicker 2.2s ease-in-out infinite}
@keyframes flicker{50%{transform:translateY(-1.5px) scale(1.08)}}
.chip-xp{border-color:#F0DFAE;color:var(--gold-d)}

/* sélecteur de langue — les langues en toutes lettres
   Chaque langue s'annonce dans sa propre écriture : quelqu'un qui ne lit pas le
   français doit reconnaître « العربية » sans déchiffrer le reste de la page.
   Un intitulé complet ne tient pas dans une barre de téléphone à trois entrées,
   d'où le menu déroulant : seule la langue courante est affichée.

   Ces règles sont dupliquées à l'identique dans landing.css. Toute retouche ici
   doit y être reportée — le composant Blade, lui, est partagé. */
.langpick{position:relative;flex:none}
.langpick summary{
  display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;
  background:var(--sand);border-radius:99px;padding:5px 11px;
  font-size:.78rem;font-weight:600;color:var(--ink);white-space:nowrap;
  transition:var(--t);-webkit-tap-highlight-color:transparent
}
.langpick summary::-webkit-details-marker{display:none}
.langpick summary:hover{background:var(--line)}
.langpick[open] summary{background:var(--teal);color:#fff}
.langpick-caret{transition:transform var(--t)}
.langpick[open] .langpick-caret{transform:rotate(180deg)}
.langpick ul{
  position:absolute;z-index:60;top:calc(100% + 7px);inset-inline-end:0;min-width:164px;
  list-style:none;margin:0;padding:6px;
  background:var(--card);border:2px solid var(--line);border-radius:13px;
  box-shadow:0 14px 30px -16px rgba(20,32,29,.45)
}
.langpick ul a{
  display:block;padding:9px 12px;border-radius:9px;text-decoration:none;
  color:var(--ink);font-size:.92rem;font-weight:500;transition:var(--t)
}
.langpick ul a:hover{background:var(--sand)}
.langpick ul a[aria-current]{background:var(--green-l);color:var(--green-d);font-weight:700}
.iconbtn{
  width:32px;height:32px;display:grid;place-items:center;border:0;background:none;
  color:var(--ink3);cursor:pointer;border-radius:9px;padding:0;transition:var(--t)
}
.iconbtn:hover{background:var(--sand);color:var(--ink)}

/* ============================ page ============================ */
.page{max-width:660px;margin:0 auto;padding:18px 15px 10px;animation:pagein .34s cubic-bezier(.2,.75,.3,1) both}
@keyframes pagein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.flash{
  display:flex;align-items:center;gap:9px;background:var(--green-l);border:2px solid #BFE6D6;
  color:var(--green-d);border-radius:var(--r-s);padding:11px 14px;margin-bottom:14px;font-weight:500;font-size:.92rem;
  animation:slidein .4s cubic-bezier(.2,.75,.3,1) both
}
@keyframes slidein{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ============================ cartes ============================ */
.card{
  background:var(--card);border:2px solid var(--line);border-radius:var(--r);
  box-shadow:var(--lift);padding:16px 17px;transition:transform var(--t),box-shadow var(--t)
}
.card + .card{margin-top:14px}
.card-head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.card-head h2,.card-head h3{margin:0;flex:1}
.tile{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:var(--mc-l,var(--green-l));color:var(--mc,var(--green))
}
.tile.t-gold{background:var(--gold-l);color:var(--gold-d)}
.tile.t-blue{background:var(--blue-l);color:var(--blue)}
.tile.t-green{background:var(--green-l);color:var(--green-d)}
.tile.t-coral{background:var(--coral-l);color:var(--coral-d)}
.tile.t-violet{background:var(--violet-l);color:var(--violet)}
.kicker{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);display:block}
[dir="rtl"] .kicker{letter-spacing:0}

/* ==================== illustration d'une brique ====================
   Le média touche les bords de la carte : une image d'illustration encadrée
   d'une marge dans une carte déjà encadrée fait deux cadres. D'où le padding
   annulé et le rayon repris sur celui de la carte.

   `display:block` sur img/video n'est pas cosmétique : en ligne, ils reposent
   sur la ligne de base et laissent quelques pixels de blanc sous l'élément,
   qui se voient d'autant plus que le fond de la vidéo est noir. */
.brick-media{padding:0;overflow:hidden;margin:0 0 14px}
.brick-media img,
.brick-media video{
  display:block;width:100%;height:auto;max-height:60vh;
  object-fit:contain;background:#000;border-radius:calc(var(--r) - 2px)
}
/* Une image porte rarement du noir : on lui rend le fond de la carte. */
.brick-media img{background:var(--card)}
.brick-media figcaption{
  padding:10px 15px 12px;font-size:.85rem;color:var(--ink3);line-height:1.6
}

/* apparition au défilement — masqué UNIQUEMENT si JS est actif (sinon page blanche) */
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.seen{animation:pagein .5s cubic-bezier(.2,.75,.3,1) both;animation-delay:var(--d,0s)}

/* ============================ boutons ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  background:var(--green);color:#fff;border:0;border-radius:13px;padding:14px 20px;
  font:inherit;font-family:"Baloo Bhaijaan 2","Readex Pro",sans-serif;font-weight:700;font-size:1rem;
  cursor:pointer;box-shadow:0 4px 0 var(--green-d);transition:transform .1s ease,box-shadow .1s ease,background var(--t);
  text-decoration:none;-webkit-tap-highlight-color:transparent
}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--green-d)}
.btn[disabled]{background:var(--line);color:var(--ink3);box-shadow:0 4px 0 var(--line-d);cursor:not-allowed}
.btn[disabled]:active{transform:none;box-shadow:0 4px 0 var(--line-d)}
.btn.gold{background:var(--gold);box-shadow:0 4px 0 var(--gold-d)}
.btn.gold:active{box-shadow:0 0 0 var(--gold-d)}
.btn.coral{background:var(--coral);box-shadow:0 4px 0 var(--coral-d)}
.btn.ghost{background:var(--card);color:var(--teal);border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.btn.ghost:active{box-shadow:0 0 0 var(--line)}
.btn.sm{width:auto;padding:9px 15px;font-size:.88rem;border-radius:10px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.btn-row .btn{width:auto;flex:1;min-width:150px}

/* ============================ anneau de progression ============================ */
.ring{position:relative;width:104px;height:104px;flex:none}
.ring svg{transform:rotate(-90deg)}
[dir="rtl"] .ring svg{transform:rotate(-90deg) scaleY(-1)}
.ring .bg{stroke:var(--sand)}
.ring .fg{stroke:var(--green);stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.75,.3,1)}
.ring-val{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.1;
  font-family:"Baloo Bhaijaan 2",sans-serif
}
.ring-val b{font-size:1.7rem;font-weight:800;color:var(--teal)}
.ring-val span{font-size:.66rem;font-weight:600;color:var(--ink3);letter-spacing:.06em;text-transform:uppercase}

/* ============================ hero du parcours ============================ */
.hero{display:flex;align-items:center;gap:16px}
.hero-txt{flex:1;min-width:0}
.hero-txt h1{margin:0 0 2px;font-size:1.35rem}
.statrow{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.stat{
  display:flex;align-items:center;gap:6px;background:var(--sand);border-radius:9px;
  padding:5px 10px;font-size:.78rem;font-weight:600;color:var(--ink2)
}
.stat b{font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;color:var(--ink);font-size:.95rem}
.stat .ico{color:var(--gold-d)}

/* ============================ plateau : modules & briques ============================ */
.chapter{margin-top:22px}
.chapter-head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.chapter-num{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:var(--mc);color:#fff;font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:.95rem;
  box-shadow:0 3px 0 var(--mc-d)
}
.chapter-head h2{flex:1;font-size:1.05rem;margin:0;color:var(--ink)}
.chapter-head .sub{display:block;font-family:"Readex Pro",sans-serif;font-size:.74rem;font-weight:500;color:var(--ink3)}
.medal{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--sand);color:var(--ink3);border:2px solid var(--line)}
.medal.won{background:var(--gold-l);color:var(--gold-d);border-color:#F0DFAE;animation:pop .55s cubic-bezier(.2,.75,.3,1) both}
@keyframes pop{0%{transform:scale(.5) rotate(-18deg);opacity:0}60%{transform:scale(1.18) rotate(6deg);opacity:1}100%{transform:none;opacity:1}}

.track{height:9px;background:var(--sand);border-radius:99px;overflow:hidden;margin-bottom:12px}
.track i{display:block;height:100%;background:var(--mc,var(--green));border-radius:99px;
  width:0;transition:width 1s cubic-bezier(.2,.75,.3,1)}

/* le chemin : nœuds reliés */
.path{position:relative;padding-inline-start:6px}
.node{
  position:relative;display:flex;align-items:center;gap:13px;padding:11px 13px;margin-bottom:9px;
  background:var(--card);border:2px solid var(--line);border-radius:var(--r-s);box-shadow:var(--lift);
  text-decoration:none;color:var(--ink);transition:transform var(--t),box-shadow var(--t),border-color var(--t)
}
.node:active{transform:translateY(3px);box-shadow:0 0 0 var(--line-d)}
.node::before{ /* rail entre les nœuds */
  content:"";position:absolute;inset-inline-start:34px;top:-11px;width:3px;height:11px;background:var(--line);border-radius:2px
}
.node:first-child::before{display:none}
.node-dot{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;
  border:2px solid var(--line);background:var(--sand);color:var(--ink3);
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:.78rem
}
.node-body{flex:1;min-width:0;line-height:1.4}
.node-title{font-weight:600;font-size:.95rem;display:block}
.node-sub{color:var(--ink3);font-size:.76rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node-go{color:var(--ink3);flex:none}
[dir="rtl"] .node-go{transform:scaleX(-1)}

.node.done{border-color:#BFE6D6;background:#FAFEFC}
.node.done .node-dot{background:var(--green);border-color:var(--green-d);color:#fff}
.node.done::after{content:"";position:absolute;inset-inline-start:34px;bottom:-11px;width:3px;height:11px;background:var(--green);border-radius:2px}
.node.done:last-child::after{display:none}

.node.active{border-color:var(--mc);box-shadow:0 3px 0 var(--mc-d);animation:breathe 2.6s ease-in-out infinite}
.node.active .node-dot{background:var(--mc);border-color:var(--mc-d);color:#fff}
.node.active .node-go{color:var(--mc)}
@keyframes breathe{50%{transform:translateY(-3px)}}
.node.locked{opacity:.55;pointer-events:none;box-shadow:none;background:var(--sand)}
.node.locked .node-dot{background:var(--card)}

/* ============================ page brique ============================ */
.brickbar{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.codechip{
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:.9rem;color:#fff;
  background:var(--mc,var(--teal));border-radius:9px;padding:4px 11px;box-shadow:0 3px 0 var(--mc-d,var(--teal));flex:none
}
.brickbar .track{flex:1;margin:0}
.brickbar .count{font-size:.78rem;font-weight:600;color:var(--ink2);white-space:nowrap}

.verse{
  background:var(--gold-l);border:2px solid #F0DFAE;border-inline-start:6px solid var(--gold);
  border-radius:var(--r-s);padding:14px 18px;margin:12px 0;
  font-family:Amiri,serif;font-size:1.32rem;line-height:2.15;color:var(--teal);
  direction:rtl;text-align:center
}
.principle{
  background:var(--sand);border-radius:var(--r-s);padding:11px 14px;margin-top:10px;
  font-weight:500;border-inline-start:4px solid var(--line-d)
}

/* « Pourquoi cet exercice » — le sens, posé avant la consigne. Ton bleu de
   l'exercice qu'il introduit, mais discret : il éclaire, il ne crie pas. */
.exercise-why{
  background:var(--blue-l);border-radius:var(--r-s);padding:11px 14px;margin:0 0 14px;
  color:var(--blue-d);border-inline-start:4px solid var(--blue)
}

/* réponse à l'exercice — remplace le classeur papier */
.answer-box{margin-top:14px}
.answer-lbl{display:block;font-size:.82rem;font-weight:700;color:var(--blue-d);
  letter-spacing:.02em;text-transform:uppercase;margin-bottom:7px}
.answer-input{
  width:100%;background:var(--blue-l);border:2px solid #CBD9F2;border-radius:var(--r-s);
  padding:12px 14px;font:inherit;font-size:.96rem;color:inherit;line-height:1.6;
  resize:vertical;min-height:112px;transition:border-color var(--t),box-shadow var(--t)
}
.answer-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,107,216,.16)}
.answer-input::placeholder{color:#8D9AAF}
/* Hauteur réservée : l'état apparaît et disparaît sans faire sauter la page. */
.answer-state{min-height:1.15em;margin:6px 0 0;font-size:.8rem;font-weight:600;color:var(--muted)}
.answer-state.ok{color:var(--green-d)}
.answer-state.err{color:var(--coral-d)}

/* lu par les lecteurs d'écran, invisible à l'œil */
.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}

/* grille d'exercice — mobile d'abord : chaque ligne devient un bloc étiqueté,
   un tableau à 3 colonnes étant illisible sur un téléphone. */
.answer-grid{width:100%;border-collapse:collapse}
.answer-grid thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.answer-grid tr{
  display:block;background:var(--blue-l);border:2px solid #CBD9F2;border-radius:var(--r-s);
  padding:10px 12px;margin-bottom:10px;position:relative
}
.answer-grid td{display:block;padding:0}
.answer-grid td[data-label]::before{
  content:attr(data-label);display:block;font-size:.74rem;font-weight:700;color:var(--blue-d);
  letter-spacing:.02em;margin:8px 0 4px
}
.grid-num{
  position:absolute;inset-inline-end:10px;top:8px;font-size:.72rem;font-weight:700;
  color:var(--blue-d);opacity:.5
}
.grid-cell{
  width:100%;background:var(--card);border:1.5px solid #D8E2F5;border-radius:9px;
  padding:8px 10px;font:inherit;font-size:.93rem;color:inherit;line-height:1.5;
  resize:none;overflow:hidden;min-height:38px;transition:border-color var(--t),box-shadow var(--t)
}
.grid-cell:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,107,216,.14)}

/* à partir de la tablette, la grille redevient un vrai tableau */
@media (min-width:720px){
  .grid-wrap{overflow-x:auto}
  .answer-grid thead{position:static;width:auto;height:auto;clip:auto}
  .answer-grid th{
    text-align:start;font-size:.74rem;font-weight:700;color:var(--blue-d);
    letter-spacing:.02em;padding:0 6px 7px;vertical-align:bottom
  }
  .answer-grid tr{display:table-row;background:none;border:0;padding:0;margin:0}
  .answer-grid td{display:table-cell;padding:0 6px 8px;vertical-align:top}
  .answer-grid td[data-label]::before{display:none}
  .grid-num{
    position:static;width:26px;padding-top:9px;text-align:center;
    font-size:.8rem;opacity:.45
  }
  .answer-grid th.grid-num{padding-bottom:7px}
}

/* démonstration IA
   Le doré identifie déjà la section (pastille + ampoule dans l'en-tête) : le
   répéter en aplat sur tout le bloc écrasait la lecture. Le fond redevient
   presque neutre, et le doré ne marque plus que les phrases à dire au client. */
.demo-out{
  white-space:pre-wrap;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-s);padding:14px 16px;margin-top:11px;
  transition:opacity var(--t);font-size:.96rem;line-height:1.65
}
.demo-out.appear{animation:demoin .5s cubic-bezier(.2,.75,.3,1) both}
.demo-out.fading{opacity:.28}

/* Le modèle rend un seul bloc. Les paroles à dire au client — la partie
   réutilisable telle quelle — sont détachées pour être repérables d'un coup d'œil. */
.demo-out .demo-p{margin:0 0 10px;white-space:normal;line-height:1.65}
.demo-out .demo-p:last-child{margin-bottom:0}
/* Les paroles à dire au client : le seul endroit où le doré est mérité,
   parce que c'est la partie réutilisable telle quelle. */
.demo-line{
  white-space:normal;margin:0 0 11px;padding:10px 14px 10px 16px;
  background:var(--gold-l);border-radius:10px;
  border-inline-start:3px solid var(--gold);
  font-size:.97rem;line-height:1.55;position:relative
}
.demo-line::before{
  content:'“';position:absolute;inset-inline-start:6px;top:1px;
  font-size:1.35rem;line-height:1;color:var(--gold-d);opacity:.4
}
.demo-line:last-child{margin-bottom:0}
/* En arabe le texte part de la droite : le guillemet ouvrant suit. */
[dir="rtl"] .demo-line::before{content:'”'}
.demo-out.demo-err-box{background:var(--coral-l);border-color:#F3CFC6;color:var(--coral-d)}
@keyframes demoin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.demo-loading[hidden]{display:none}
.demo-loading-lbl{display:flex;align-items:center;gap:8px;color:var(--gold-d);font-size:.85rem;font-weight:600;
  margin:12px 0 10px;animation:fade 1.5s ease-in-out infinite}
@keyframes fade{50%{opacity:.5}}
.skel{height:13px;border-radius:99px;margin:9px 0;background:var(--sand);animation:pulse 1.3s ease-in-out infinite}
.skel:nth-child(3){animation-delay:.14s}.skel:nth-child(4){animation-delay:.28s}.skel:nth-child(5){animation-delay:.42s}
.skel.short{width:52%}
@keyframes pulse{50%{background:#E6DECB;transform:scaleX(.985)}}
.spin{display:inline-block;width:16px;height:16px;border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;flex:none}
.spin.gold{border-color:rgba(239,165,27,.28);border-top-color:var(--gold-d)}
@keyframes sp{to{transform:rotate(360deg)}}

/* Barre de progression INDÉTERMINÉE — la génération du playbook n'a pas d'étape
   mesurable, mais un mouvement continu vaut mille mots : « ça travaille, ce n'est
   pas figé ». Le liseré glisse en boucle d'un bord à l'autre. */
.pb-bar{height:6px;border-radius:99px;background:var(--sand);overflow:hidden;margin:14px 0}
.pb-bar i{display:block;height:100%;width:38%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold),var(--gold-d));animation:pbslide 1.5s ease-in-out infinite}
@keyframes pbslide{0%{margin-inline-start:-40%}100%{margin-inline-start:102%}}
@media (prefers-reduced-motion:reduce){.pb-bar i{animation:fade 1.6s ease-in-out infinite}}
.demo-regen{margin-top:13px}
.demo-regen[hidden]{display:none}
.demo-regen:disabled{opacity:.55}

/* validation */
.card-validate{border-color:#BFE6D6;background:#FBFEFD}
.checkrow{display:flex;gap:12px;align-items:flex-start;cursor:pointer;user-select:none}
.checkrow input{position:absolute;opacity:0;width:0;height:0}
.checkbox{
  width:30px;height:30px;border-radius:9px;border:2.5px solid var(--line-d);background:var(--card);
  display:grid;place-items:center;flex:none;color:#fff;transition:var(--t);margin-top:2px
}
.checkbox .ico{opacity:0;transform:scale(.4);transition:var(--t)}
.checkrow input:checked + .checkbox{background:var(--green);border-color:var(--green-d);animation:pop .4s cubic-bezier(.2,.75,.3,1)}
.checkrow input:checked + .checkbox .ico{opacity:1;transform:none}
.checkrow input:focus-visible + .checkbox{outline:3px solid var(--green-l)}
.checkrow-txt{font-weight:500;line-height:1.6}
.done-banner{display:flex;align-items:center;gap:11px;background:var(--green-l);border:2px solid #BFE6D6;
  border-radius:var(--r-s);padding:13px 15px;color:var(--green-d);font-weight:600}

/* ============================ onboarding ============================ */
.steps-rail{display:flex;align-items:center;gap:6px;margin:6px 0 18px}
.steps-rail i{flex:1;height:7px;border-radius:99px;background:var(--sand);transition:background .45s var(--t)}
.steps-rail i.on{background:var(--gold)}
.step{display:none}
.step.on{display:block;animation:pagein .38s cubic-bezier(.2,.75,.3,1) both}
label{display:block;font-size:.85rem;font-weight:600;color:var(--ink2);margin:12px 0 5px}
/* La liste des types est explicite, et c'est un piège : un type absent d'ici
   retombe sur l'habillage par défaut du navigateur — champ étroit, bordure
   grise, hauteur différente des voisins. C'est arrivé à `tel` le jour où le
   téléphone est apparu à l'inscription.

   `tel`, `search`, `url` et `number` sont donc listés d'avance : ce sont les
   seuls autres types de saisie texte qu'un formulaire de ce site peut avoir
   besoin d'utiliser. */
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=search],input[type=url],input[type=number],textarea{
  width:100%;font:inherit;font-size:.98rem;color:var(--ink);background:var(--card);
  border:2px solid var(--line);border-radius:var(--r-s);padding:12px 14px;transition:var(--t)
}
input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px var(--green-l)}
input::placeholder{color:var(--ink3)}
.err{color:var(--coral-d);font-size:.82rem;margin:5px 0 0;font-weight:500}
.rules{list-style:none;padding:0;margin:6px 0 0}
.rules li{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.rules li:last-child{border:0}
.rules .n{width:26px;height:26px;border-radius:8px;background:var(--gold-l);color:var(--gold-d);flex:none;
  display:grid;place-items:center;font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:.8rem}
.checkline{display:flex;align-items:center;gap:9px;font-weight:500;color:var(--ink2);margin-top:12px;font-size:.9rem}
.checkline input{width:19px;height:19px;accent-color:var(--green)}

/* ---- onboarding : pastilles de canaux (choix ordonné, max 3) ---- */
.pillpick{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 4px}
.pill{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:inherit;font-size:.9rem;font-weight:600;color:var(--ink2);
  background:var(--card);border:2px solid var(--line);border-radius:999px;
  padding:9px 15px;transition:var(--t);line-height:1}
.pill:hover{border-color:var(--line-d);color:var(--ink)}
.pill:focus-visible{outline:none;border-color:var(--green);box-shadow:0 0 0 4px var(--green-l)}
.pill .rank{
  display:none;width:20px;height:20px;flex:none;border-radius:999px;
  background:#fff;color:var(--green-d);font-family:"Baloo Bhaijaan 2",sans-serif;
  font-weight:800;font-size:.74rem;line-height:20px;text-align:center}
.pill.on{background:var(--green);border-color:var(--green-d);color:#fff;box-shadow:0 3px 0 var(--green-d)}
.pill.on .rank{display:inline-block}
.pill.full:not(.on){opacity:.5;cursor:not-allowed}
.pill-err{display:block;color:var(--coral-d);font-size:.82rem;font-weight:500;margin:2px 0 0}
.pill-err[hidden]{display:none}

/* ---- onboarding : groupes de mesures (radios en pastilles) ---- */
.radioset{border:0;padding:0;margin:16px 0 0;min-width:0}
.radioset legend{
  display:block;font-size:.85rem;font-weight:600;color:var(--ink2);
  margin:0 0 7px;padding:0;float:none}
.optrow{display:flex;flex-wrap:wrap;gap:9px}
.opt{margin:0}
.opt input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.opt span{
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:.9rem;font-weight:600;color:var(--ink2);
  background:var(--card);border:2px solid var(--line);border-radius:999px;
  padding:9px 16px;transition:var(--t);line-height:1}
.opt:hover span{border-color:var(--line-d);color:var(--ink)}
.opt input:checked + span{background:var(--gold);border-color:var(--gold-d);color:#fff;box-shadow:0 3px 0 var(--gold-d)}
.opt input:focus-visible + span{outline:none;box-shadow:0 0 0 4px var(--gold-l)}

/* ============================ score ============================ */
.scorerow{padding:11px 0;border-bottom:1px solid var(--line)}
.scorerow:last-of-type{border:0}
.scorerow .lbl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;font-weight:500;font-size:.94rem}
.scorerow output{
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:800;font-size:.95rem;color:#fff;background:var(--green);
  min-width:34px;text-align:center;border-radius:8px;padding:1px 8px;transition:background var(--t)
}
.scorerow output.low{background:var(--coral)}
.scorerow output.mid{background:var(--gold)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:9px;border-radius:99px;background:var(--sand);outline:none
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--card);
  border:4px solid var(--green);cursor:grab;box-shadow:0 2px 0 var(--line-d)
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--card);border:4px solid var(--green);cursor:grab
}
.bars{display:flex;flex-direction:column;gap:13px}
.bar-lbl{display:block;font-size:.86rem;font-weight:500;margin-bottom:5px}
.bar-tracks{display:flex;flex-direction:column;gap:4px}
.bar-tracks .t{height:10px;background:var(--sand);border-radius:99px;overflow:hidden}
.bar-tracks .t i{display:block;height:100%;border-radius:99px;width:0;transition:width .9s cubic-bezier(.2,.75,.3,1)}
.s0{background:var(--line-d)}.s1{background:var(--blue)}.s2{background:var(--green)}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:.78rem;color:var(--ink2)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:4px;display:block}

/* ============================ accueil ============================ */
.hero-welcome{text-align:center;padding:24px 18px}
.hero-welcome h1{font-size:1.9rem;margin-top:14px}
.feats{display:flex;flex-direction:column;gap:11px;margin-top:16px}
.feat{display:flex;gap:12px;align-items:flex-start;text-align:start;background:var(--card);
  border:2px solid var(--line);border-radius:var(--r-s);padding:12px 14px}
.feat b{display:block;font-size:.94rem}
.feat p{margin:2px 0 0;font-size:.84rem;color:var(--ink2);line-height:1.55}

/* ============================ nav basse ============================ */
.bottomnav{
  position:fixed;bottom:0;inset-inline:0;z-index:30;display:flex;background:var(--card);
  border-top:2px solid var(--line);padding:7px 0 max(7px,env(safe-area-inset-bottom))
}
.bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;
  color:var(--ink3);font-size:.66rem;font-weight:600;transition:color var(--t)
}
.bottomnav a .ico{transition:transform var(--t)}
.bottomnav a:active .ico{transform:translateY(-3px)}
.bottomnav a.on{color:var(--green-d)}
.bottomnav a.on .ico{color:var(--green)}

/* ============================ célébration ============================ */
/* le canvas est en haute densité (dpr) : on force sa taille CSS au viewport */
#confetti{position:fixed;inset:0;width:100vw;height:100vh;z-index:60;pointer-events:none}
.toast-win{
  position:fixed;z-index:61;inset-inline:0;top:16px;margin:0 auto;width:max-content;max-width:92vw;
  display:flex;align-items:center;gap:11px;background:var(--teal);color:#fff;
  border-radius:99px;padding:11px 20px;box-shadow:0 6px 0 rgba(14,75,68,.28);
  font-family:"Baloo Bhaijaan 2",sans-serif;font-weight:700;
  animation:toastin .5s cubic-bezier(.2,.75,.3,1) both,toastout .4s ease-in 2.6s both
}
.toast-win .ico{color:var(--gold)}
@keyframes toastin{from{opacity:0;transform:translateY(-26px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateY(-20px)}}

/* ============================ divers ============================ */
/* petits écrans : on protège l'en-tête du débordement */
@media (max-width:430px){
  .topbar{gap:7px;padding:9px 11px}
  .brand-txt{display:none}
  .chip{padding:0 8px;font-size:.78rem}
  .langpick summary{padding:5px 9px;font-size:.74rem;gap:4px}
  .langpick summary > svg:first-child{display:none}
}
@media (min-width:720px){
  .page{padding-top:26px}
  .btn{width:auto}
  form .btn{width:100%}
  .btn-row .btn{width:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .track i,.bar-tracks .t i{transition:none}
}

/* ===================== code promo (page de paiement) ===================== */
.coupon-card { margin-top: 14px; }
.coupon-form .answer-lbl { display: block; margin-bottom: 8px; }
.coupon-row { display: flex; gap: 8px; align-items: stretch; }
/* `min-height` remis à plat, et c'est LE correctif visuel de cette rangée.
   .answer-input est dessiné pour les réponses d'exercice — plusieurs lignes,
   d'où ses 112 px de hauteur minimale. Un code promo tient sur une ligne :
   il héritait d'un champ trois fois trop haut, qui étirait le bouton avec lui
   et donnait à toute la rangée l'allure d'un bloc de saisie libre. */
.coupon-row .answer-input {
  flex: 1; min-width: 0; margin: 0; min-height: 0; height: 48px;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
/* Le bouton doit faire EXACTEMENT la hauteur du champ.
   `align-self:stretch` ne suffisait pas : .btn porte ses propres 14 px de
   marge verticale, qui le rendaient plus haut que le champ et faisaient donc
   grandir toute la rangée. On annule la marge verticale et on laisse
   l'étirement caler la hauteur sur celle du champ. */
.coupon-row .btn {
  flex: 0 0 auto; width: auto; align-self: stretch;
  padding-block: 0; padding-inline: 18px;
  font-size: .92rem; border-radius: var(--r-s);
}
.coupon-on {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap;
}
.coupon-on > span { display: inline-flex; align-items: center; gap: 7px; color: var(--teal); }
@media (max-width: 420px) {
  /* Empilés, il n'y a plus de hauteur à aligner : le bouton reprend sa marge
     verticale, sans quoi il devient une barre écrasée. */
  .coupon-row { flex-direction: column; }
  .coupon-row .btn { padding-block: 13px; }
}

/* ===================== paiement : boutons du SDK PayPal =====================
   Les boutons sont rendus par PayPal dans des iframes : on ne peut pas les
   styler, seulement leur ménager la place. Tout ce qui suit encadre, sépare et
   annonce — jamais ne déguise. Un bouton de paiement maquillé est un bouton
   dont on se méfie. */
/* PayPal et Carte CÔTE À CÔTE, plus l'un sous l'autre : les deux entrées se
   lisent d'un coup d'œil comme un choix, sans faire défiler. Sur mobile, la
   grille retombe sur une colonne — deux boutons de paiement serrés sur 320 px
   seraient illisibles. */
.pay-buttons{
  margin-top:16px;text-align:start;
  display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start
}
.pay-buttons > div:empty{display:none}
#paypal-wallet,#paypal-card{min-width:0}

/* Le séparateur « ou » n'a plus de sens quand les deux boutons sont côte à
   côte : la grille dit déjà que ce sont deux options équivalentes. */
.pay-or{display:none}

/* La note carte et l'état de paiement traversent toute la largeur : ils
   parlent des DEUX boutons, pas d'une seule colonne. */
.pay-card-note{grid-column:1/-1;margin-top:6px;font-size:.82rem;text-align:start}

@media (max-width:520px){
  .pay-buttons{grid-template-columns:1fr}
}

/* Hauteur réservée : l'état apparaît et disparaît sans faire sauter la page
   au moment précis où l'acheteur attend une confirmation. */
.pay-status{grid-column:1/-1;min-height:1.2em;margin:10px 0 0;font-size:.85rem;font-weight:600;color:var(--ink2)}
.pay-status.warn{color:var(--gold-d)}
.pay-status.err{color:var(--coral-d)}

#paypal-fallback[hidden]{display:none}

/* ============== versement hors ligne (virement / Wafacash / CashPlus) ============== */

/* ==================== choix du moyen de paiement ====================
   Des CARTES, pas des lignes : les moyens n'ont ni le même geste ni le même
   délai, et un lien nu ne dit ni l'un ni l'autre. */
/* Des TUILES en grille, toutes visibles d'un coup, plutôt qu'une liste qu'on
   déroule : virement, Wafacash et CashPlus tiennent côte à côte. auto-fit +
   minmax fait le travail responsive tout seul — trois de front sur large,
   deux sur tablette, une sur téléphone, sans point de rupture à régler. */
.pay-methods{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-top:16px
}
.pay-method{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:15px 15px;
  background:var(--card);border:2px solid var(--line);border-radius:var(--r-s);
  box-shadow:var(--lift);text-decoration:none;color:var(--ink);text-align:start;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t)
}
.pay-method:hover{border-color:var(--gold)}
.pay-method:active{transform:translateY(3px);box-shadow:0 0 0 var(--line-d)}

/* Pastille du logo : taille FIXE, quel que soit le logo. Les logos bancaires
   vont du carré au bandeau très allongé — sans cadre commun, chaque carte
   prendrait une hauteur différente et la colonne partirait en escalier. */
.pay-method-mark{
  width:46px;height:46px;flex:none;border-radius:11px;
  background:var(--sand);display:grid;place-items:center;color:var(--gold-d);overflow:hidden
}
.pay-method-mark img{max-width:38px;max-height:30px;object-fit:contain}

.pay-method-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pay-method-name{font-weight:700;font-size:1rem;line-height:1.35}
.pay-method-desc{color:var(--ink2);font-size:.86rem;line-height:1.5}
.pay-method-speed{color:var(--green-d);font-size:.82rem;font-weight:600;line-height:1.5;margin-top:3px}
.pay-method-go{color:var(--ink3);flex:none;margin-top:auto;align-self:flex-end}
[dir="rtl"] .pay-method-go{transform:scaleX(-1)}

/* La promesse de validation : encadrée, verte, et jamais en petit. C'est la
   réponse à « et après, il se passe quoi ? » — la question qui décide entre
   payer maintenant et fermer l'onglet. */
.pay-promise{
  display:flex;align-items:flex-start;gap:11px;margin-top:18px;
  padding:14px 15px;border-radius:var(--r-s);
  background:var(--green-l);border:1.5px solid #BFE6D6;color:var(--ink);
  font-size:.9rem;line-height:1.6;text-align:start
}
.pay-promise svg{color:var(--green-d);flex:none;margin-top:3px}
.pay-promise b{display:block;margin-bottom:2px}
.pay-speed-note{margin-top:10px;font-size:.82rem;text-align:start}

/* En-tête du bloc carte : nommer le moyen le plus rapide, et le dire. */
.pay-card-head{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:18px;flex-wrap:wrap}
.pay-card-head b{font-size:1rem}
.pay-badge{
  background:var(--green-l);color:var(--green-d);border-radius:99px;
  padding:3px 11px;font-size:.75rem;font-weight:700
}
.pay-card-sub{margin-top:4px;font-size:.86rem}

.pay-logo{height:34px;width:auto;max-width:140px;object-fit:contain;flex:none}
[dir="rtl"] .pay-method svg{transform:scaleX(-1)}

/* Coordonnées de versement. `user-select:all` : un RIB se recopie d'un geste,
   et un RIB à moitié sélectionné est un virement qui part chez quelqu'un
   d'autre. La police à chasse fixe rend le 0 et le O distinguables. */
.pay-details{margin:0 0 14px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px}
.pay-details dt{color:var(--ink3);font-size:.84rem}
.pay-details dd{margin:0;font-weight:600}
.select-all{
  user-select:all;-webkit-user-select:all;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.95rem;letter-spacing:.02em;word-break:break-all
}

.pay-steps{margin:0 0 12px;padding-inline-start:20px;list-style:decimal}
.pay-steps li{margin-bottom:5px;line-height:1.7}

.pay-pending{border-color:var(--gold);background:#FFFDF7}
.pay-rejected{border-color:var(--coral);background:#FFFAF9}

/* ---------------------------------------- téléversement du reçu (obligatoire)
   L'input type=file natif est un petit bouton gris qu'on ne voit pas. Comme le
   reçu est OBLIGATOIRE, il faut au contraire qu'il saute aux yeux : on masque
   l'input (mais il reste, cliquable et « required ») et on habille une grande
   zone dorée à sa place. Le JS bascule vers l'état « fichier choisi » ; sans
   JS, la zone reste cliquable et le formulaire fonctionne. */
.f-head{display:block;font-size:.85rem;font-weight:600;color:var(--ink2);margin:12px 0 5px}
.req{
  display:inline-block;margin-inline-start:6px;font-size:.7rem;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;color:var(--coral-d)
}

.uploader{position:relative;display:block;margin:0;cursor:pointer}
/* L'input couvre toute la zone : un clic n'importe où ouvre le sélecteur, y
   compris sur l'aperçu pour remplacer la photo. opacity:0, pas display:none —
   un champ masqué par display ne se soumet pas et perd son « required ». */
.uploader input[type=file]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1
}
.uploader-face{
  display:flex;align-items:center;gap:13px;
  border:2px dashed var(--gold);border-radius:var(--r-s);background:var(--gold-l);
  padding:15px 16px;transition:var(--t)
}
.uploader:hover .uploader-face{background:#FCEBC7;border-color:var(--gold-d)}
.uploader input[type=file]:focus-visible + .uploader-face{
  outline:none;border-style:solid;box-shadow:0 0 0 4px var(--gold-l);border-color:var(--gold-d)
}
.uploader-ico{
  width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--gold);color:#fff;box-shadow:0 3px 0 var(--gold-d)
}
.uploader-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.uploader-cta{color:var(--gold-d);font-size:1rem;line-height:1.35}
.uploader-hint{color:var(--ink2);font-size:.82rem}
.uploader-plus{flex:none;color:var(--gold-d)}
[dir="rtl"] .uploader-plus{transform:scaleX(-1)}

/* état « une photo est choisie » */
.uploader.has-file .uploader-face{display:none}
.uploader-picked{
  display:flex;align-items:center;gap:12px;
  border:2px solid var(--green);border-radius:var(--r-s);background:var(--green-l);padding:11px 14px
}
.uploader-thumb{
  width:46px;height:46px;flex:none;border-radius:9px;object-fit:cover;
  border:2px solid var(--green-d);background:var(--card)
}
.uploader-picked-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.uploader-name{
  color:var(--green-d);font-size:.92rem;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.uploader-ok{
  flex:none;width:30px;height:30px;border-radius:99px;display:grid;place-items:center;
  background:var(--green);color:#fff
}

/* Bandeau du parcours verrouillé : même traitement que l'attente, parce que
   c'est la même chose vue depuis l'autre page. */
.locked-note{border-color:var(--gold);background:#FFFDF7}

/* Monogramme de marque dans la barre du parcours. Remplace la pastille
   colorée : c'est le même signe que sur l'onglet du navigateur. */
.brand-mark-img{width:30px;height:30px;flex:none;object-fit:contain}

/* =========================================================================
   COUCHE PREMIUM « minimal gaming » — accordée à la page d'accueil
   -------------------------------------------------------------------------
   Le plateau garde ses couleurs de module (bleu, vert, corail, violet) et ses
   accents franchement ludiques (nœud actif, numéros, médailles, confettis).
   Ce qui change, c'est le GRAIN : ombres douces et étagées plutôt que plates,
   lueur dorée discrète, panneaux « console » anthracite pour les moments forts,
   boutons en dégradé avec reflet — exactement le vocabulaire de l'accueil.
   Aucune modification de contenu : uniquement de la peinture.
   ========================================================================= */

/* Atmosphère : une lueur dorée très basse, fixée, presque imperceptible. */
body{position:relative}
body::before{
  content:"";position:fixed;inset:0 0 auto;height:62vh;z-index:-1;pointer-events:none;
  background:radial-gradient(115% 55% at 85% -12%,rgba(231,184,81,.11),transparent 60%)
}

/* Barre du haut : verre dépoli, filet fin, ombre basse. */
.topbar{
  background:rgba(251,250,247,.82);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);box-shadow:0 10px 30px -24px rgba(23,20,14,.5)
}

/* Kicker → « eyebrow » doré, comme les titres de section de l'accueil. */
.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--gold-d)}
.kicker::before{
  content:"";width:18px;height:3px;border-radius:99px;background:var(--grad-gold);
  box-shadow:0 0 10px -1px var(--glow-strong)
}
[dir="rtl"] .kicker{letter-spacing:.09em}

/* --------------------------------- boutons ---------------------------------
   Dégradé + reflet supérieur + lueur au survol + enfoncement doux — le geste
   de l'accueil. La couleur de remplissage, elle, ne bouge pas : le vert reste
   le vert, action et progrès. */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#1BB489,var(--green));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 22px -12px rgba(15,155,108,.55);
  transition:transform var(--t),box-shadow var(--t),background var(--t)
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
  transition:transform .6s cubic-bezier(.2,.75,.3,1)
}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 30px -12px rgba(15,155,108,.6)}
.btn:hover::before{transform:translateX(120%)}
[dir="rtl"] .btn::before{transform:translateX(120%)}
[dir="rtl"] .btn:hover::before{transform:translateX(-120%)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 2px 7px rgba(0,0,0,.28)}

.btn.gold{background:var(--grad-gold);color:#211802;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 28px -12px var(--glow-strong)}
.btn.gold:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 34px -12px var(--glow-strong)}
.btn.coral{background:linear-gradient(180deg,#EC6B53,var(--coral));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 28px -12px rgba(228,87,61,.55)}
.btn.ghost{background:var(--card);color:var(--teal);box-shadow:inset 0 0 0 1.5px var(--line-d),var(--sh-1)}
.btn.ghost::before{display:none}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--gold),0 0 0 1px var(--glow),var(--sh-glow)}

/* --------------------------------- cartes ---------------------------------
   Bordure fine, filet de lumière en haut, ombre douce étagée. */
.card{
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),var(--sh-1)
}
.tile{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}

/* Illustration de brique : légère profondeur autour du média. */
.brick-media img,.brick-media video{box-shadow:var(--sh-1)}

/* Chips (série / niveau) : pastilles premium à fine profondeur. */
.chip{border:1px solid var(--line);box-shadow:var(--sh-1)}
.chip-flame{border-color:#F3D8C2}
.chip-xp{border-color:#EEDDB0}

/* Anneau de progression : le vert garde le sens « progrès », mais il rayonne. */
.ring .bg{stroke:var(--sand)}
.ring .fg{filter:drop-shadow(0 0 4px rgba(15,155,108,.5))}

/* ------------------------- tableau de bord du parcours -------------------------
   La première carte du parcours devient un vrai « panneau console » anthracite,
   comme le tableau de bord de score de l'accueil. (classe .panel posée sur la
   carte dans la vue — aucun texte changé.) */
.card.panel{
  position:relative;overflow:hidden;color:var(--panel-ink);
  background:radial-gradient(120% 130% at 100% 0,var(--panel-2),var(--panel));
  border-color:var(--panel-line);box-shadow:var(--sh-2)
}
.card.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 15% 0,rgba(231,184,81,.16),transparent 60%)
}
.card.panel>*{position:relative}
.card.panel h1{color:#fff}
.card.panel .kicker{color:var(--gold-hi)}
.card.panel .stat{background:rgba(255,255,255,.06);border:1px solid var(--panel-line);color:var(--panel-ink2)}
.card.panel .stat b{color:#fff}
.card.panel .stat .ico{color:var(--gold-hi)}
.card.panel .ring .bg{stroke:rgba(255,255,255,.12)}
.card.panel .ring-val b{color:#fff}
.card.panel .ring-val span{color:var(--panel-ink2)}
/* Sur fond sombre, l'action passe en doré : la même « entrée » que l'accueil. */
.card.panel .btn:not(.ghost):not(.gold){
  background:var(--grad-gold);color:#211802;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 28px -12px var(--glow-strong)
}

/* --------------------------------- le plateau ---------------------------------
   Rails et pistes gardent la couleur du module ; on ajoute une lueur douce. */
.track i{box-shadow:0 0 10px -3px var(--mc,var(--green))}
.chapter-head h2{color:var(--ink)}

/* Nœuds : profondeur douce, décollement au survol, enfoncement léger. */
.node:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.node:active{transform:translateY(1px);box-shadow:var(--sh-1)}
.node.active{box-shadow:0 3px 0 var(--mc-d),0 14px 26px -16px var(--mc-d)}
.node.done{background:linear-gradient(180deg,#FBFEFC,#F4FBF7)}
.node.locked{box-shadow:none}

/* --------------------------------- brique ---------------------------------
   Le verset garde son doré, avec un fond légèrement dégradé et de la profondeur. */
.verse{
  background:linear-gradient(135deg,var(--gold-l),#FFFDF8);
  box-shadow:var(--sh-1)
}
.answer-input:focus{box-shadow:0 0 0 4px rgba(47,107,216,.14)}

/* Validation / bannières : profondeur douce. */
.flash,.done-banner{box-shadow:var(--sh-1)}
.card-validate{background:linear-gradient(180deg,#FBFEFD,#F4FBF7)}
.locked-note{background:linear-gradient(135deg,var(--gold-l),#FFFDF8);box-shadow:var(--sh-1)}

/* --------------------------------- onboarding / score ---------------------------------
   Le rail d'étapes actives et les jauges reprennent le doré/vert lumineux. */
.steps-rail i.on{background:var(--grad-gold);box-shadow:0 0 10px -1px var(--glow-strong)}
.rules .n{box-shadow:inset 0 0 0 1px #EFE2C4}
.feat{border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform var(--t),box-shadow var(--t)}
.feat:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}

/* Navigation basse : verre dépoli, filet doré, onglet actif qui rayonne. */
.bottomnav{
  background:rgba(251,250,247,.94);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -14px 34px -26px rgba(23,20,14,.55)
}
.bottomnav::before{
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--glow-strong),transparent)
}
.bottomnav{position:fixed}

/* Moyens de paiement : mêmes cartes premium que le reste. */
.pay-method:hover{transform:translateY(-2px);box-shadow:var(--sh-glow);border-color:var(--gold)}
.pay-method:active{transform:translateY(1px);box-shadow:var(--sh-1)}
.pay-promise{background:linear-gradient(135deg,var(--green-l),#F3FBF7)}

/* Personnalisation depuis le diagnostic (§30) : un rappel doré de la priorité du
   visiteur, jusque sur la page de paiement. */
.pay-perso{
  margin:0 0 14px;padding:13px 16px;border-radius:var(--r-s);
  background:linear-gradient(135deg,var(--gold-l),#FFFDF8);
  border:1px solid #EFE2C4;border-inline-start:3px solid var(--gold);
  color:var(--ink);font-size:.94rem;line-height:1.6
}
.pay-perso b{display:block;color:var(--gold-d);font-size:.8rem;font-weight:800;margin-bottom:3px}

/* V2 — choix de la durée du pack sur la page de versement. */
.pack-choice { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; cursor: pointer; }
.pack-choice input { margin-top: 4px; }

/* V2 — les packs affichés (informatif) sur la page de paiement. Le pack mis en
   avant est cadré en doré ; le choix réel se fait à l'étape du versement. */
.pay-packs { list-style:none; margin:0; padding:0; display:grid; gap:8px; text-align:start; }
.pay-packs li {
  position:relative; display:flex; align-items:baseline; justify-content:space-between;
  gap:8px 12px; flex-wrap:wrap; border:1px solid var(--line); border-radius:12px; padding:12px 14px;
}
.pay-packs li.is-default { border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold); }
.pay-pack-tag {
  position:absolute; top:-9px; inset-inline-end:12px; background:var(--gold); color:#fff;
  font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px;
}
.pay-pack-dur { font-size:1rem; }
.pay-pack-price { font-weight:800; font-size:1.15rem; color:var(--teal); }
.pay-pack-month { color:var(--ink2); font-size:.8rem; flex-basis:100%; }