/* =========================================================================
   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 */
  --paper:#FFFBF2;      /* fond papier chaud */
  --sand:#F2ECDD;       /* creux, pistes, rails */
  --card:#FFFFFF;
  --line:#E7DFCC;
  --line-d:#D6CBB0;

  /* encre */
  --ink:#14201D;
  --ink2:#66736D;
  --ink3:#98A29C;

  /* couleurs franches */
  --green:#0F9B6C;  --green-d:#0A7250;  --green-l:#E4F4EE;
  --teal:#0E4B44;
  --gold:#EFA51B;   --gold-d:#C2820A;   --gold-l:#FDF1D9;
  --coral:#E4573D;  --coral-d:#B93F29;  --coral-l:#FCE9E4;
  --blue:#2F6BD8;   --blue-d:#2251AC;   --blue-l:#E5EDFB;
  --violet:#6B4BD6; --violet-d:#5236AE; --violet-l:#ECE7FB;

  --r:16px; --r-s:11px; --r-l:22px;
  --t:.26s cubic-bezier(.2,.75,.3,1);
  --lift:0 3px 0 var(--line-d);
}

/* 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.25;letter-spacing:-.01em}
h1{color:var(--teal);font-size:1.65rem;margin:.1em 0 .45em}
h2{color:var(--teal);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)
}

/* 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)}}
.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)}

/* ============================ 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. */
.pay-buttons{margin-top:16px;text-align:start}
.pay-buttons > div:empty{display:none}

/* Séparateur « ou » : deux filets et un mot, pour que les deux entrées se
   lisent comme un choix et non comme une hiérarchie. */
.pay-or{
  display:flex;align-items:center;gap:12px;margin:12px 0;
  color:var(--ink3);font-size:.8rem;font-weight:600
}
.pay-or::before,.pay-or::after{content:"";flex:1;height:2px;background:var(--line);border-radius:2px}

.pay-card-note{margin-top:10px;font-size:.82rem;text-align:start}

/* 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{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. */
.pay-methods{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.pay-method{
  display:flex;align-items:flex-start;gap:13px;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:12px}
[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}