/* ═══════════════════════════════════════════════════════════════
   🎨 XARIT — THÈME RÉVISER v1.0
   Une seule feuille, chargée après tout le reste, qui reprend la main
   sur les styles injectés par xarit-reviser.js. Aucune ligne de logique
   n'est touchée : on ne change que l'apparence.

   Pourquoi ça fonctionne : xarit-reviser.js injecte ses règles dans un
   <style> ajouté au <head> à l'ouverture — donc APRÈS un <link>. À
   égalité de spécificité, c'est lui qui gagnerait. Toutes les règles
   ici sont donc préfixées par #xr-overlay ou #xr-box, ce qui leur donne
   une spécificité supérieure : elles passent devant, quel que soit
   l'ordre de chargement.

   À mettre dans le <head> de index.php :
     <link rel="stylesheet" href="xarit-theme.css?v=1">

   PRINCIPES
   • Une seule famille de rayons (14 / 18 px), une seule ombre douce.
   • Le vert XARIT pour ce qui est actif, l'or pour ce qui est précieux
     (abonnement, réussite) — jamais pour décorer.
   • Le mouvement sert à dire « ça a marché », jamais à occuper l'œil :
     entrées décalées, survol de 2 px, rien qui clignote.
   • Tout s'arrête si l'appareil demande moins d'animations.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --xr-vert:#0e3d2a;
  --xr-vert-clair:#1d6e4c;
  --xr-or:#f0c56a;
  --xr-encre:#16241d;
  --xr-gris:#64748b;
  --xr-bord:#e6edea;
  --xr-fond:#f6faf8;
  --xr-r:14px;
  --xr-r-g:18px;
  --xr-ombre:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --xr-ombre-h:0 2px 4px rgba(15,23,42,.05), 0 16px 40px rgba(15,23,42,.12);
}

/* ─────────── Le cadre ─────────── */
#xr-overlay{
  background:rgba(10,25,18,.5);
  backdrop-filter:blur(6px) saturate(1.1);
  padding:20px 10px;
}
#xr-box{
  background:var(--xr-fond);
  border-radius:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.5) inset;
  padding:24px 20px 26px;
}
#xr-box h2{
  font-size:1.28rem;
  letter-spacing:-.6px;
  color:var(--xr-vert);
}
#xr-box .xr-sub{
  font-size:.68rem;
  letter-spacing:.09em;
  color:#9aa8a2;
  margin-bottom:16px;
}
#xr-close{
  width:34px;height:34px;border-radius:11px;
  background:rgba(14,61,42,.05);
  color:#7c8b85;font-size:1rem;
  transition:background .16s, color .16s, transform .16s;
}
#xr-close:hover{ background:rgba(14,61,42,.1); color:var(--xr-vert); transform:rotate(90deg); }

/* ─────────── Le parcours (4 étapes) ─────────── */
#xr-box .xr-parc{
  background:#fff;
  border:1px solid var(--xr-bord);
  border-radius:var(--xr-r-g);
  box-shadow:var(--xr-ombre);
  padding:7px;
}
#xr-box .xr-parc-n{
  transition:background .2s, color .2s, box-shadow .2s;
}
#xr-box .xr-parc-p.on .xr-parc-n{
  box-shadow:0 0 0 4px rgba(14,61,42,.1);
}
#xr-box .xr-parc-p.fait:hover{ background:rgba(16,185,129,.07); }

/* ─────────── Le menu : une barre segmentée ───────────
   Quatre boutons qui flottent côte à côte se lisent comme quatre
   options sans lien. Un seul rail, avec l'onglet actif posé dessus,
   dit qu'on est au même endroit, sur un onglet différent. */
#xr-box .xr-nav{
  background:#eef4f1;
  border-radius:15px;
  padding:5px;
  gap:4px;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.05);
}
#xr-box .xr-nav button{
  border:none;
  background:transparent;
  border-radius:11px;
  color:#5d6f68;
  font-size:.77rem;
  padding:10px 6px;
  transition:background .18s, color .18s, box-shadow .18s, transform .14s;
}
#xr-box .xr-nav button:hover{ background:rgba(255,255,255,.7); color:var(--xr-vert); }
#xr-box .xr-nav button:active{ transform:scale(.97); }
#xr-box .xr-nav button.on{
  background:#fff;
  color:var(--xr-vert);
  box-shadow:0 1px 3px rgba(15,23,42,.1), 0 4px 12px rgba(14,61,42,.08);
}

/* ─────────── La barre de profil ─────────── */
#xr-box .xr-prof{
  border:1px solid var(--xr-bord);
  border-radius:var(--xr-r-g);
  box-shadow:var(--xr-ombre);
  padding:12px 13px;
}
#xr-box .xr-prof-av{
  border-radius:14px;
  box-shadow:0 6px 16px rgba(14,61,42,.22);
}
#xr-box .xr-prof-t{ letter-spacing:-.3px; }
#xr-box .xr-prof-e{
  border-radius:14px;
  border-color:#d8e7e0;
  transition:border-color .16s, box-shadow .16s, transform .14s, background .16s;
}
#xr-box .xr-prof-e:hover{
  background:#fff;
  border-color:var(--xr-vert);
  box-shadow:0 8px 20px rgba(14,61,42,.14);
}

/* ─────────── Titres de section ─────────── */
#xr-box .xr-h{
  font-size:1.05rem;
  letter-spacing:-.4px;
  margin-top:4px;
}
#xr-box .xr-hs{ color:#7d8c86; }

/* ─────────── Les cartes de matière ───────────
   Elles entrent en cascade : l'œil suit l'ordre de lecture au lieu de
   recevoir la grille d'un bloc. Le décalage s'arrête à la 8e carte,
   sinon la dernière se ferait attendre. */
#xr-box .xr-mgrid{ gap:11px; }
#xr-box .xr-m{
  border:1px solid var(--xr-bord);
  border-radius:var(--xr-r-g);
  box-shadow:var(--xr-ombre);
  padding:15px 15px 14px;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s, border-color .2s;
  animation:xrCarte .34s cubic-bezier(.22,1,.36,1) both;
}
#xr-box .xr-m:nth-child(1){ animation-delay:.02s }
#xr-box .xr-m:nth-child(2){ animation-delay:.05s }
#xr-box .xr-m:nth-child(3){ animation-delay:.08s }
#xr-box .xr-m:nth-child(4){ animation-delay:.11s }
#xr-box .xr-m:nth-child(5){ animation-delay:.14s }
#xr-box .xr-m:nth-child(6){ animation-delay:.17s }
#xr-box .xr-m:nth-child(7){ animation-delay:.2s }
#xr-box .xr-m:nth-child(n+8){ animation-delay:.22s }
@keyframes xrCarte{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
#xr-box .xr-m::before{ width:5px; border-radius:var(--xr-r-g) 0 0 var(--xr-r-g); }
#xr-box .xr-m:hover{
  transform:translateY(-3px);
  box-shadow:var(--xr-ombre-h);
  border-color:#cfe0d8;
}
#xr-box .xr-m:active{ transform:translateY(-1px) scale(.995); }
#xr-box .xr-m-i{
  font-size:1.5rem;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;
  background:color-mix(in srgb, var(--mc,#0e3d2a) 10%, #fff);
}
#xr-box .xr-m-n{ font-size:.87rem; letter-spacing:-.2px; margin:9px 0 7px; }
#xr-box .xr-m-c b{ letter-spacing:-1px; }
#xr-box .xr-m-ch{ color:#9aa8a2; font-size:.69rem; }

/* ─────────── Les chapitres ─────────── */
#xr-box .xr-chs{ gap:7px; }
#xr-box .xr-c{
  border:1px solid var(--xr-bord);
  border-radius:var(--xr-r);
  padding:12px 13px;
  transition:border-color .16s, background .16s, transform .16s, box-shadow .16s;
}
#xr-box .xr-c:hover{
  border-color:#a7d3b8;
  background:#fff;
  transform:translateX(3px);
  box-shadow:var(--xr-ombre);
}
#xr-box .xr-c-n{ border-radius:9px; }
#xr-box .xr-c-free{ background:#dcfce7; color:#15803d; }

/* ─────────── Boutons ─────────── */
#xr-box .xr-btn{
  border-radius:var(--xr-r);
  background:linear-gradient(135deg, var(--xr-vert), var(--xr-vert-clair));
  box-shadow:0 8px 22px rgba(14,61,42,.26);
  letter-spacing:.01em;
  transition:transform .15s, box-shadow .2s, filter .16s;
}
#xr-box .xr-btn:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(14,61,42,.3);
  filter:brightness(1.06);
}
#xr-box .xr-btn:active:not(:disabled){ transform:translateY(0) scale(.99); }
#xr-box .xr-btn2{
  background:#fff;
  border:1.5px solid #dbe6e1;
  color:var(--xr-vert);
  box-shadow:var(--xr-ombre);
}
#xr-box .xr-btn2:hover:not(:disabled){ border-color:var(--xr-vert); filter:none; }

/* Cartes de choix (niveau, classe) */
#xr-box .xr-card, #xr-box .xr-pill{
  border-radius:var(--xr-r);
  border-color:var(--xr-bord);
  transition:border-color .16s, transform .16s, box-shadow .18s, background .16s;
}
#xr-box .xr-card:hover{ transform:translateY(-3px); box-shadow:var(--xr-ombre-h); }
#xr-box .xr-pill{ padding:10px 17px; }
#xr-box .xr-pill:hover{ transform:translateY(-1px); box-shadow:var(--xr-ombre); }
#xr-box .xr-pill.on{ box-shadow:0 6px 16px rgba(14,61,42,.22); }

/* ─────────── Les onglets Cours / Quiz ─────────── */
#xr-box .xr-tabs{
  background:#eef4f1;
  border-radius:15px;
  padding:5px;
  gap:4px;
}
#xr-box .xr-tab{
  border:none;background:transparent;border-radius:11px;
  transition:background .18s, color .18s, box-shadow .18s;
}
#xr-box .xr-tab:hover{ background:rgba(255,255,255,.7); }
#xr-box .xr-tab.on{
  background:#fff;color:var(--xr-vert);
  box-shadow:0 1px 3px rgba(15,23,42,.1), 0 4px 12px rgba(14,61,42,.08);
}
/* ═══════════════════════════════════════════════════════════════
   XARIT — couleurs des niveaux + 8ᵉ carte « Soutien scolaire »
   À COLLER À LA FIN de xarit-theme.css, puis monter le ?v= du <link>.

   Tout est préfixé #xr-box : ça suffit à battre la feuille injectée
   par xarit-reviser.js, qui arrive après dans le document et gagnerait
   autrement à égalité de spécificité.

   Chaque niveau a sa teinte, très pâle en fond et plus franche sur la
   pastille de l'icône. Pâle parce que le texte doit rester lisible sur
   un téléphone en plein soleil — un fond saturé ferait joli sur ta
   capture d'écran et illisible à Thiès à 14 h.
   ═══════════════════════════════════════════════════════════════ */

#xr-box .xr-card[data-v="primaire"]   { background:linear-gradient(150deg,#fff5f7,#fff); border-color:#f9d7e0; }
#xr-box .xr-card[data-v="primaire"] .xr-card-i   { background:#fde4ec; }

#xr-box .xr-card[data-v="college"]    { background:linear-gradient(150deg,#f2f8ff,#fff); border-color:#cfe2f7; }
#xr-box .xr-card[data-v="college"] .xr-card-i    { background:#ddebfb; }

#xr-box .xr-card[data-v="lycee"]      { background:linear-gradient(150deg,#f1fbf5,#fff); border-color:#c6e8d3; }
#xr-box .xr-card[data-v="lycee"] .xr-card-i      { background:#d8f2e3; }

#xr-box .xr-card[data-v="cpge"]       { background:linear-gradient(150deg,#fff9ec,#fff); border-color:#f6e0b0; }
#xr-box .xr-card[data-v="cpge"] .xr-card-i       { background:#fdeecb; }

#xr-box .xr-card[data-v="universite"] { background:linear-gradient(150deg,#f6f3ff,#fff); border-color:#ded5f8; }
#xr-box .xr-card[data-v="universite"] .xr-card-i { background:#e9e2fd; }

#xr-box .xr-card[data-v="concours"]   { background:linear-gradient(150deg,#f0fbfa,#fff); border-color:#c2e7e2; }
#xr-box .xr-card[data-v="concours"] .xr-card-i   { background:#d6f2ee; }

#xr-box .xr-card[data-v="permis"]     { background:linear-gradient(150deg,#fff4ef,#fff); border-color:#f8d6c4; }
#xr-box .xr-card[data-v="permis"] .xr-card-i     { background:#fde3d5; }

/* La carte sélectionnée garde sa teinte mais prend le cadre XARIT :
   sans ça, choisir un niveau lui faisait perdre sa couleur. */
#xr-box .xr-card.on{ border-color:#0e3d2a; box-shadow:0 0 0 3px rgba(14,61,42,.10); }

/* ─────────── La 8ᵉ carte : le soutien scolaire ───────────
   Elle n'est pas un niveau, c'est une offre. Elle ne doit donc pas
   ressembler aux sept autres : fond vert plein, texte clair, un ruban.
   Un élève qui parcourt la grille voit sept cartes claires et une
   sombre — l'œil s'y arrête, c'est tout l'objectif. */
#xr-box .xr-card-soutien{
  grid-column:1 / -1;
  background:linear-gradient(135deg,#0e3d2a,#14532d);
  border-color:#0e3d2a;
  color:#fff;
  position:relative;
  overflow:hidden;
}
#xr-box .xr-card-soutien .xr-card-i{ background:rgba(240,197,106,.20); }
#xr-box .xr-card-soutien .xr-card-t{ color:#f0c56a; font-weight:800; }
#xr-box .xr-card-soutien small{
  display:block; font-size:.71rem; color:rgba(255,255,255,.88);
  font-weight:600; line-height:1.5; margin-top:3px;
}
#xr-box .xr-card-soutien:hover{ border-color:#f0c56a; }

/* Le ruban « Garantie progrès », en biais dans le coin. */
#xr-box .xr-card-soutien::after{
  content:'Garantie progrès';
  position:absolute; top:11px; right:-32px; transform:rotate(38deg);
  background:linear-gradient(135deg,#f0c56a,#e0a93f); color:#0e3d2a;
  font-size:.58rem; font-weight:800; letter-spacing:.03em;
  padding:4px 36px; box-shadow:0 2px 8px rgba(0,0,0,.18);
}
@media(max-width:420px){
  #xr-box .xr-card-soutien::after{ font-size:.54rem; padding:3px 32px; right:-34px; }
}
/* ─────────── Le cours et le quiz ─────────── */
#xr-box .xr-doc{
  border-radius:var(--xr-r-g);
  box-shadow:0 10px 30px rgba(14,61,42,.26);
  transition:transform .18s, box-shadow .2s;
}
#xr-box .xr-doc:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 16px 40px rgba(14,61,42,.3); }
#xr-box .xr-q{
  border-radius:var(--xr-r-g);
  border:1px solid var(--xr-bord);
  box-shadow:var(--xr-ombre);
}
#xr-box .xr-q label{ border-radius:11px; transition:border-color .14s, background .14s, transform .12s; }
#xr-box .xr-q label:hover{ transform:translateX(2px); }
#xr-box .xr-note{ border-radius:20px; box-shadow:var(--xr-ombre-h); }
#xr-box .xr-note .xr-big{ letter-spacing:-2.5px; }

/* ─────────── Le lecteur ─────────── */
#xr-lire-overlay .xr-lire-barre{ background:rgba(14,61,42,.97); }
#xr-lire-overlay .xr-lire-feuille{ border-radius:9px; box-shadow:0 14px 44px rgba(0,0,0,.45); }
#xr-lire-overlay .xr-lire-cote{ border-radius:14px; }

/* ─────────── Le paywall ─────────── */
#xr-box .xr-pw-head{ border-radius:var(--xr-r-g); box-shadow:0 12px 34px rgba(14,61,42,.26); }
#xr-box .xr-o{ border-radius:var(--xr-r-g); box-shadow:var(--xr-ombre); }
#xr-box .xr-o:hover{ box-shadow:var(--xr-ombre-h); }
#xr-box .xr-o-btn{ border-radius:var(--xr-r); }
#xr-box .xr-pay-p{ border-radius:13px; border-color:var(--xr-bord); }

/* ─────────── Chargement : une respiration, pas un moulin ─────────── */
#xr-box .xr-load .xr-spin,
#xr-box .xr-spin{
  border-color:#dfeae5;
  border-top-color:var(--xr-vert);
}
#xr-box .xr-charge{ border-radius:var(--xr-r-g); background:#fff; box-shadow:var(--xr-ombre); }

/* ─────────── Téléphone ─────────── */
@media(max-width:480px){
  #xr-overlay{ padding:10px 8px; }
  #xr-box{ border-radius:18px; padding:18px 14px 20px; }
  #xr-box .xr-nav{ padding:4px; }
  #xr-box .xr-nav button{ font-size:.71rem; padding:9px 4px; }
  #xr-box .xr-mgrid{ gap:9px; }
  #xr-box .xr-m{ padding:13px; }
  #xr-box .xr-m-i{ width:34px;height:34px;font-size:1.25rem; }
}

/* ─────────── Respect du réglage d'accessibilité ─────────── */
@media(prefers-reduced-motion:reduce){
  #xr-box .xr-m,
  #xr-box *{ animation:none !important; }
  #xr-box .xr-m:hover,
  #xr-box .xr-card:hover,
  #xr-box .xr-btn:hover:not(:disabled){ transform:none; }
}
/* ═══════════════════════════════════════════════════════════════
   XARIT — couleurs des niveaux + 8ᵉ carte « Soutien scolaire »
   À COLLER À LA FIN de xarit-theme.css, puis monter le ?v= du <link>.

   Tout est préfixé #xr-box : ça suffit à battre la feuille injectée
   par xarit-reviser.js, qui arrive après dans le document et gagnerait
   autrement à égalité de spécificité.

   Chaque niveau a sa teinte, très pâle en fond et plus franche sur la
   pastille de l'icône. Pâle parce que le texte doit rester lisible sur
   un téléphone en plein soleil — un fond saturé ferait joli sur ta
   capture d'écran et illisible à Thiès à 14 h.
   ═══════════════════════════════════════════════════════════════ */

#xr-box .xr-card[data-v="primaire"]   { background:linear-gradient(150deg,#fff5f7,#fff); border-color:#f9d7e0; }
#xr-box .xr-card[data-v="primaire"] .xr-card-i   { background:#fde4ec; }

#xr-box .xr-card[data-v="college"]    { background:linear-gradient(150deg,#f2f8ff,#fff); border-color:#cfe2f7; }
#xr-box .xr-card[data-v="college"] .xr-card-i    { background:#ddebfb; }

#xr-box .xr-card[data-v="lycee"]      { background:linear-gradient(150deg,#f1fbf5,#fff); border-color:#c6e8d3; }
#xr-box .xr-card[data-v="lycee"] .xr-card-i      { background:#d8f2e3; }

#xr-box .xr-card[data-v="cpge"]       { background:linear-gradient(150deg,#fff9ec,#fff); border-color:#f6e0b0; }
#xr-box .xr-card[data-v="cpge"] .xr-card-i       { background:#fdeecb; }

#xr-box .xr-card[data-v="universite"] { background:linear-gradient(150deg,#f6f3ff,#fff); border-color:#ded5f8; }
#xr-box .xr-card[data-v="universite"] .xr-card-i { background:#e9e2fd; }

#xr-box .xr-card[data-v="concours"]   { background:linear-gradient(150deg,#f0fbfa,#fff); border-color:#c2e7e2; }
#xr-box .xr-card[data-v="concours"] .xr-card-i   { background:#d6f2ee; }

#xr-box .xr-card[data-v="permis"]     { background:linear-gradient(150deg,#fff4ef,#fff); border-color:#f8d6c4; }
#xr-box .xr-card[data-v="permis"] .xr-card-i     { background:#fde3d5; }

/* La carte sélectionnée garde sa teinte mais prend le cadre XARIT :
   sans ça, choisir un niveau lui faisait perdre sa couleur. */
#xr-box .xr-card.on{ border-color:#0e3d2a; box-shadow:0 0 0 3px rgba(14,61,42,.10); }

/* ─────────── La 8ᵉ carte : le soutien scolaire ───────────
   Une tuile comme les sept autres, même taille, même place dans la
   grille. Le bandeau pleine largeur cassait la rangée et son ruban en
   biais se retrouvait coupé : illisible, et l'écran paraissait en
   désordre. Avec huit tuiles, la grille se referme proprement — 4 + 4
   au lieu de 4 + 3 et un trou.

   Elle reste identifiable sans occuper plus de place : c'est la seule
   verte au milieu de sept pastel. Ça suffit à attirer l'œil, et ça ne
   coûte rien à la lecture des autres. */
#xr-box .xr-card-soutien{
  background:linear-gradient(140deg,#0e3d2a,#17603f);
  border-color:#0e3d2a;
  color:#fff;
}
#xr-box .xr-card-soutien .xr-card-i{ background:rgba(240,197,106,.20); }
#xr-box .xr-card-soutien .xr-card-t{ color:#f0c56a; font-weight:800; }

/* La seconde ligne remplace le ruban : elle dit la même chose, elle
   tient dans la tuile, et elle se lit. */
#xr-box .xr-card-soutien small{
  display:block; margin-top:2px;
  font-size:.66rem; font-weight:600; line-height:1.35;
  color:rgba(255,255,255,.86);
}
#xr-box .xr-card-soutien:hover{ border-color:#f0c56a; }
#xr-box .xr-card-soutien.on{ box-shadow:0 0 0 3px rgba(240,197,106,.35); }
#xr-box .xr-card-soutien{ grid-column:auto; overflow:visible; }
#xr-box .xr-card-soutien::after{ content:none; }

/* ═══════════════════════════════════════════════════════════════
   XARIT — couleurs des niveaux, version FRANCHE
   À coller TOUT À LA FIN de xarit-theme.css, après tout le reste.
   Rien à supprimer : ces règles redéfinissent les mêmes propriétés
   que les précédentes, et la dernière écrite gagne.
   Pense à monter le ?v= du <link> dans index.php.

   Pourquoi c'était trop pâle : j'avais choisi des fonds à 98 % de
   clarté, par prudence pour la lisibilité au soleil. Le calcul montre
   que j'avais trop de marge — le texte vert XARIT sur ces fonds-ci
   garde un contraste de 8,3 à 9,9 pour 1, là où la norme demande 4,5.
   On peut donc doubler la présence de la couleur sans rien risquer.

   Contrastes mesurés (texte #0E3D2A sur le fond) :
     primaire 9.11 · collège 9.13 · lycée 9.33 · CPGE 9.86
     université 8.31 · concours 9.19 · permis 8.84
   ═══════════════════════════════════════════════════════════════ */

#xr-box .xr-card[data-v="primaire"]{
  background:linear-gradient(145deg,#ffd3e2,#ffe9f1); border-color:#f5a8c4; }
#xr-box .xr-card[data-v="primaire"] .xr-card-i{ background:#ffb9d0; }

#xr-box .xr-card[data-v="college"]{
  background:linear-gradient(145deg,#c9e1ff,#e6f1ff); border-color:#8fbef8; }
#xr-box .xr-card[data-v="college"] .xr-card-i{ background:#a8ceff; }

#xr-box .xr-card[data-v="lycee"]{
  background:linear-gradient(145deg,#bfebd3,#dff7e9); border-color:#7fd2a8; }
#xr-box .xr-card[data-v="lycee"] .xr-card-i{ background:#9bdfbc; }

#xr-box .xr-card[data-v="cpge"]{
  background:linear-gradient(145deg,#ffe4ae,#fff3d6); border-color:#f5c462; }
#xr-box .xr-card[data-v="cpge"] .xr-card-i{ background:#ffd483; }

#xr-box .xr-card[data-v="universite"]{
  background:linear-gradient(145deg,#FFB8FF,#ece5ff); border-color:#ad97f5; }
#xr-box .xr-card[data-v="universite"] .xr-card-i{ background:#c3afff; }

#xr-box .xr-card[data-v="concours"]{
  background:linear-gradient(145deg,#FFF9A3,#d9f5f1); border-color:#75cec3; }
#xr-box .xr-card[data-v="concours"] .xr-card-i{ background:#93dcd3; }

#xr-box .xr-card[data-v="permis"]{
  background:linear-gradient(145deg,#ffd2bc,#ffe8dd); border-color:#f5a67f; }
#xr-box .xr-card[data-v="permis"] .xr-card-i{ background:#ffba98; }

/* Le titre passe en vert XARIT foncé sur toutes les cartes : sur un
   fond coloré, un gris moyen perd le peu de contraste qu'il avait. */
#xr-box .xr-card .xr-card-t{ color:#0e3d2a; font-weight:700; }

/* La carte choisie : elle garde SA couleur et gagne un cadre vert
   épais. Avant, la sélection effaçait la teinte — on perdait le repère
   au moment précis où on venait de le choisir. */
#xr-box .xr-card.on{
  border-color:#0e3d2a; border-width:2px;
  box-shadow:0 0 0 3px rgba(14,61,42,.12);
}

/* La 8ᵉ carte reste verte et pleine : c'est une offre, pas un niveau.
   Au milieu de sept pastels francs, elle se distingue toujours. */
#xr-box .xr-card-soutien{
  background:linear-gradient(140deg,skyblue,grey) !important;
  border-color:#0e3d2a !important;
  grid-column:auto; overflow:visible;
}
#xr-box .xr-card-soutien::after{ content:none; }
#xr-box .xr-card-soutien .xr-card-t{ color:#A3FFFB !important; font-weight:800; }
#xr-box .xr-card-soutien .xr-card-i{ background:rgba(240,197,106,.20); }
#xr-box .xr-card-soutien small{
  display:block; margin-top:2px;
  font-size:.66rem; font-weight:600; line-height:1.35;
  color:rgba(255,255,255,.86);
}