/* =====================================================================
   (03/11/2026, revue UX) « Mon entraînement du jour » et « Je bloque sur… » : mêmes couleurs que l'appli.
   Chargé APRÈS le <style> de la page (cartes claires d'origine), il remplace leurs couleurs par des variables :
   - Sombre (pas d'habillage) : cartes nuit et or de l'appli (css/appli.css) ;
   - Clair / Perso : les couleurs de l'habillage (js/habillages.js, <body data-hab-page> → html[data-hab]) ;
   - boutons principaux : la palette « prestige » (html[data-acc]).
   Les figures (SVG tracés en noir) gardent un fond clair.
   ===================================================================== */
:root{
  --c-fond:rgba(23,17,33,.94); --c-fond2:#2a2147; --c-encre:#f6ecd6; --c-douce:#cdbb98; --c-titre:#ffd970;
  --c-or:#d9a521; --c-trait:rgba(255,214,120,.28); --c-champ:#1d1633;
  --c-ok:#5fd38a; --c-ko:#ff9a8a;
  --ink:var(--c-encre); --muted:var(--c-douce); --or:var(--c-titre);
}
html[data-hab]{
  --c-fond:var(--carte-solide); --c-fond2:color-mix(in srgb, var(--encre) 9%, var(--carte-solide));
  --c-encre:var(--encre); --c-douce:var(--encre-douce); --c-titre:var(--titre); --c-or:var(--or);
  --c-trait:color-mix(in srgb, var(--or) 40%, transparent); --c-champ:color-mix(in srgb, var(--encre) 5%, var(--carte-solide));
  --c-ok:var(--ok, #15803d); --c-ko:var(--ko, #b91c1c);
}
body{ background:radial-gradient(120% 70% at 50% -10%, #2b1f52 0%, #140f24 62%) fixed, #140f24; color:var(--c-encre); }
body[class*="theme-"]{ background-image:none; background-color:transparent; }

.titre, .carte{ background:var(--c-fond); color:var(--c-encre); border:1px solid var(--c-trait); box-shadow:0 8px 24px rgba(0,0,0,.28); }
.titre h1, .carte h2, .unite{ color:var(--c-titre); }
.wrap, .enonce{ color:var(--c-encre); }
.titre p, .aide, .comp small{ color:var(--c-douce); }
.etiquette, .etape .num{ background:var(--c-fond2); color:var(--c-titre); }
.jauge span{ background:var(--c-fond2); }
.jauge span.cours{ background:var(--c-titre); }

.saisie input, .recherche input, .choix button, .comp, .second, .etape{
  background:var(--c-champ); color:var(--c-encre) !important; border-color:var(--c-trait);
}
.saisie input::placeholder, .recherche input::placeholder{ color:var(--c-douce); opacity:.8; }
.comp:hover, .choix button:hover{ border-color:var(--c-or); }
.etape.suivante{ border-color:var(--c-or); box-shadow:0 0 0 3px color-mix(in srgb, var(--c-or) 25%, transparent); }

.choix button.bonne, .etape.faite{ border-color:var(--c-ok); background:color-mix(in srgb, var(--c-ok) 18%, var(--c-champ)); }
.choix button.fausse{ border-color:var(--c-ko); background:color-mix(in srgb, var(--c-ko) 18%, var(--c-champ)); }
.retour.ok{ background:color-mix(in srgb, var(--c-ok) 18%, var(--c-fond)); color:var(--c-encre); border:1px solid var(--c-ok); }
.retour.ko{ background:color-mix(in srgb, var(--c-ko) 18%, var(--c-fond)); color:var(--c-encre); border:1px solid var(--c-ko); }
.indice, .encart{ background:var(--c-fond2); color:var(--c-encre); border:1px solid var(--c-trait); }
.pm{ color:var(--c-titre); }

/* figures et écritures tracées en noir par les générateurs : sur fond clair */
.enonce svg, .enonce img, .enonce canvas{ background:#fffaf0; border-radius:10px; padding:4px; }

/* boutons principaux : palette prestige si elle existe */
html[data-acc] .gros{ background:linear-gradient(180deg, var(--acc2), var(--acc1)); color:var(--acc-txt) !important; box-shadow:0 4px 0 rgba(0,0,0,.35); }