/* theme-accent.css — le chakra du logiciel : power bi (jaune).
   GENERE par scripts/09-moderniser-cours.py — ne pas editer ici.
   Source des chakras : scripts/theme/theme-chakras.css. */

/* =========================================================================
   theme-chakras.css — les couleurs des 7 chakras, sur tous les cours
   -------------------------------------------------------------------------
   Demande du proprietaire (27/09/2026) : un theme personnalise, « pas celui
   que proposent toutes les IA », aux couleurs des chakras, du rouge au
   violet, plus blanc et noir. Trois tons MELANGES :

     Pantone (vif)   accents forts : boutons principaux, barres, bandeaux,
                     logo, degrades ;
     pastel          badges, bordures colorees, etats ; en SOMBRE, les
                     textes d accent ;
     legere          fonds d encadres et zones, en CLAIR ;
     encre           textes colores en CLAIR (4,5:1 au moins sur blanc).

   Un chakra par logiciel : PowerPoint rouge (racine), Illustrator orange
   (sacre), Power BI jaune (plexus solaire), Excel vert (coeur), Word bleu
   (gorge), Photoshop indigo (troisieme oeil), InDesign violet (couronne).

   Tous les effets du theme restent (aurore, degrades qui coulent, verre
   depoli, lueurs, apparitions, pop, confettis, pulsations) : ils changent
   de couleur, pas de nature. Le degrade multicolore passe par les 7
   chakras ; celui d un logiciel va de son chakra au chakra voisin ; son
   aurore melange trois chakras.

   Arrondis : 6 px sur tous les blocs (--r-bloc). Les boutons et les
   etiquettes gardent leur forme de pilule (999 px) : a trancher par le
   proprietaire sur l apercu.

   SOURCE. Ce fichier n est pas pose tel quel : scripts/09-moderniser-cours.py
   le recopie EN TETE de chaque theme-accent.css, suivi des jetons propres au
   logiciel (son chakra). Figma et Affinity ne le recoivent pas : ils gardent
   leur habillage (CLAUDE.md § 8 bis).
   ========================================================================= */

/* ------------------------------------------------------- 1. la palette --- */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --ck-rouge: #C8363D;  --ck-orange: #E07A2F; --ck-jaune: #F0B92C; --ck-vert: #2E9B6B;
  --ck-bleu: #2B78B8;   --ck-indigo: #3F4C9A; --ck-violet: #7A4E9E;

  --ckp-rouge: #F2A6A6; --ckp-orange: #F7C59F; --ckp-jaune: #F6E3A1; --ckp-vert: #A9D9B8;
  --ckp-bleu: #A8C9EA;  --ckp-indigo: #B3B8E3; --ckp-violet: #CFB6E4;

  --ckl-rouge: #FBE3E1; --ckl-orange: #FDECDF; --ckl-jaune: #FDF5D9; --ckl-vert: #E3F3E8;
  --ckl-bleu: #E2EEF8;  --ckl-indigo: #E7E8F7; --ckl-violet: #F1E8F8;

  --cke-rouge: #9E2A2B; --cke-orange: #9A4A14; --cke-jaune: #735400; --cke-vert: #1D6645;
  --cke-bleu: #1D5A8C;  --cke-indigo: #323D82; --cke-violet: #5E3D7C;

  --ck-blanc: #FFFFFF;  --ck-noir: #1B1B1F;

  /* les roles du theme (cf. theme-affinity.css, ATTENTION 2) */
  --coral:  var(--ck-rouge);     /* alerte, erreur */
  --orange: var(--ck-orange);    /* avertissement */
  --mint:   var(--ck-vert);      /* succes */
  --grad-3: linear-gradient(120deg, var(--ck-rouge), var(--ck-orange), var(--ck-jaune),
            var(--ck-vert), var(--ck-bleu), var(--ck-indigo), var(--ck-violet));

  /* les arrondis */
  --r-bloc: 6px;
  --radius: 6px;
  --radius-s: 6px;
  --ink: var(--txt);
}

/* ------------------------------------------------ 2. sombre (par defaut) */
:root, :root[data-theme="dark"] {
  --bg:        #121215;
  --bg-2:      #1B1B1F;
  --surface:   rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.075);
  --surface-3: rgba(255,255,255,.11);
  --line:      rgba(255,255,255,.11);
  --line-2:    rgba(255,255,255,.19);
  --txt:       #F2F2F4;
  --txt-2:     #BDBDC7;
  --txt-3:     #9E9EAA;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.8);
  --code-bg:   #0E0E11;
  --shot-bg:   #1B1B1F;
  /* textes qui portent un sens : le pastel */
  --t-info: var(--ckp-bleu); --t-attention: var(--ckp-orange); --t-conseil: var(--ckp-jaune);
  --t-analyse: var(--ckp-indigo); --t-erreur: var(--ckp-rouge); --t-succes: var(--ckp-vert);
  --ok-txt: var(--ckp-vert); --ko-txt: var(--ckp-rouge);
  --bord-champ: #8B8B97;
}

/* ------------------------------------------------------------ 3. clair --- */
:root[data-theme="light"] {
  --bg:        #FFFFFF;
  --bg-2:      #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F6F6F8;
  --surface-3: #ECECF1;
  --line:      #E5E5EA;
  --line-2:    #D0D0D8;
  --txt:       #1B1B1F;
  --txt-2:     #4B4B55;
  --txt-3:     #5F5F6A;
  --shadow:    0 1px 2px rgba(27,27,31,.05), 0 14px 36px -18px rgba(27,27,31,.22);
  --code-bg:   #1B1B1F;
  --shot-bg:   #F6F6F8;
  /* textes qui portent un sens : l encre */
  --t-info: var(--cke-bleu); --t-attention: var(--cke-orange); --t-conseil: var(--cke-jaune);
  --t-analyse: var(--cke-indigo); --t-erreur: var(--cke-rouge); --t-succes: var(--cke-vert);
  --ok-txt: var(--cke-vert); --ko-txt: var(--cke-rouge);
  --bord-champ: #7C7C88;
}

/* ------------------------------------------------ 4. les encadres types ---
   Chaque type garde son sens, avec sa couleur : objectif = le logiciel,
   conseil = jaune, attention = orange (erreur = rouge), analyse = indigo,
   information = bleu. En clair : fond leger, filet vif, texte a l encre.
   En sombre : un voile de la couleur vive, texte pastel. */
.callout { border-radius: var(--r-bloc); }
.callout.info  { --ck-t: var(--ck-bleu);   --ck-f: var(--ckl-bleu);   --ck-e: var(--t-info); }
.callout.warn  { --ck-t: var(--ck-orange); --ck-f: var(--ckl-orange); --ck-e: var(--t-attention); }
.callout.tip   { --ck-t: var(--ck-jaune);  --ck-f: var(--ckl-jaune);  --ck-e: var(--t-conseil); }
.callout.goal,
.callout.xl, .callout.ps, .callout.pp, .callout.wd, .callout.pbi,
.callout.fg    { --ck-t: var(--ck);        --ck-f: var(--ck-legere);  --ck-e: var(--accent-txt); }
.callout.info, .callout.warn, .callout.tip, .callout.goal,
.callout.xl, .callout.ps, .callout.pp, .callout.wd, .callout.pbi, .callout.fg {
  background: var(--ck-f);
  border-color: color-mix(in srgb, var(--ck-t) 38%, transparent);
  color: var(--ck-e);
}
.callout.info::after, .callout.warn::after, .callout.tip::after, .callout.goal::after,
.callout.xl::after, .callout.ps::after, .callout.pp::after, .callout.fg::after {
  background: var(--ck-t);
}
.callout.info strong, .callout.warn strong, .callout.tip strong, .callout.goal strong,
.callout.info b, .callout.warn b, .callout.tip b, .callout.goal b { color: inherit; }
[data-theme="dark"] .callout.info, [data-theme="dark"] .callout.warn,
[data-theme="dark"] .callout.tip, [data-theme="dark"] .callout.goal,
[data-theme="dark"] .callout.xl, [data-theme="dark"] .callout.ps,
[data-theme="dark"] .callout.pp, [data-theme="dark"] .callout.wd,
[data-theme="dark"] .callout.pbi, [data-theme="dark"] .callout.fg {
  background: color-mix(in srgb, var(--ck-t) 13%, var(--bg));
  color: var(--ck-e);
}

/* l analyse (exercices) : indigo */
.analyse {
  border-radius: var(--r-bloc);
  border-left-color: var(--ck-indigo);
  background: var(--ckl-indigo);
  color: var(--txt-2);
}
.analyse b, .analyse strong { color: var(--t-analyse); }
[data-theme="dark"] .analyse {
  background: color-mix(in srgb, var(--ck-indigo) 18%, var(--bg));
  border-color: var(--line-2); border-left-color: var(--ck-indigo);
}
[data-theme="dark"] .analyse b, [data-theme="dark"] .analyse strong { color: var(--t-analyse); }

/* l explication d une reponse de QCM : bleu, comme une information */
.explain {
  border-radius: var(--r-bloc);
  border-left-color: var(--ck-bleu);
  background: color-mix(in srgb, var(--ck-bleu) 9%, var(--surface));
}

/* le point d arbitrage : orange */
.arbitrage { border-color: color-mix(in srgb, var(--ck-orange) 40%, transparent);
  background: color-mix(in srgb, var(--ck-orange) 9%, var(--surface)); }
.arbitrage .titre, .arbitrage .regle b { color: var(--t-attention); }

/* ------------------------------------------- 5. verdicts et resultats --- */
.opt.correct { background: color-mix(in srgb, var(--ck-vert) 13%, var(--surface));
  border-color: color-mix(in srgb, var(--ck-vert) 50%, transparent); }
.opt.wrong   { background: color-mix(in srgb, var(--ck-rouge) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--ck-rouge) 50%, transparent); }
.opt.correct .mark, [data-theme="dark"] .opt.correct .mark { color: var(--t-succes); }
.opt.wrong .mark, [data-theme="dark"] .opt.wrong .mark { color: var(--t-erreur); }
[data-theme="dark"] .opt.wrong { background: color-mix(in srgb, var(--ck-rouge) 16%, var(--bg)); }
.result-banner.pass { background: color-mix(in srgb, var(--ck-vert) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--ck-vert) 45%, transparent); }
.result-banner.fail { background: color-mix(in srgb, var(--ck-orange) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--ck-orange) 45%, transparent); }
[data-theme="dark"] .result-banner.pass,
[data-theme="dark"] .graded-cta-txt span,
[data-theme="dark"] .graded-cta-txt strong { color: var(--t-succes); }
[data-theme="dark"] .result-banner.fail { color: var(--t-attention); }
.module.completed { border-color: color-mix(in srgb, var(--ck-vert) 45%, transparent); }
.module.completed .module-badge { background: var(--ck-vert); color: var(--ck-noir); }
.done-flag { color: var(--t-succes); background: color-mix(in srgb, var(--ck-vert) 13%, transparent);
  border-color: color-mix(in srgb, var(--ck-vert) 40%, transparent); }
.btn-done.is-done { background: color-mix(in srgb, var(--ck-vert) 14%, transparent);
  border-color: var(--ck-vert); color: var(--t-succes); }
[data-theme="dark"] .btn-done.is-done { color: var(--t-succes); }
.sol-body .verif b { color: var(--t-succes); }

/* ------------------------------------------ 6. les autres textes de sens */
[data-theme="dark"] .callout.web,
[data-theme="dark"] .toolnote.web { color: var(--t-info); }
[data-theme="dark"] .toolnote.desktop { color: var(--t-conseil); }

/* ---------------------------------------------- 7. zones, en clair ------
   Les fonds legers du logiciel pour les zones de travail. */
:root[data-theme="light"] .task { background: var(--ck-legere);
  border-color: color-mix(in srgb, var(--ck) 45%, transparent); }
:root[data-theme="light"] .course-card:hover,
:root[data-theme="light"] .tile:hover { background: var(--ck-legere); }
:root[data-theme="light"] details.solution { background: var(--surface-2); }

/* ----------------------------------------------- 8. arrondis : 6 px -----
   Les blocs des anciennes feuilles (style.css de chaque module) ont leurs
   propres arrondis, souvent ecrits en dur : 8 a 24 px. Les pilules (999 px)
   et les ronds (50 %) ne sont pas touches. */
.hero, .page-head, .module, .module-head, .module-badge, .course-card, .course-card .cc-num,
.tile, .task, .callout, .data-badge, .pager a, .toc, .toc a, .card, .stat, .skillcard,
.skillcard .ic, .exo, .q-card, .opt, .explain, .scorebar, .result-banner, .analyse, .miss,
.arbitrage, details.solution, .toolnote, .mode-switch, .ms-btn, .brand .logo, .topnav a,
.theme-toggle, .nav-burger, .skolae-box, .lightbox img, figure.shot, figure.shot img,
table.demo, .table-wrap, pre, .code, .kbd-card, .livrable-card, .timeline li, .graded-cta,
.readiness, .q-nav, .exam-timer, .timer, .dl-card, .fiche, .etape, .labo, .sec-h,
.steps > li::before, .check input, .aide-panneau, .aide-bulle, .aide-champ, .aide-question,
input[type="text"], input[type="email"], input[type="number"], input[type="search"],
select, textarea {
  border-radius: var(--r-bloc);
}
.scorebar { border-radius: var(--r-bloc) var(--r-bloc) 0 0; }
.hero::after, .page-head::before { border-radius: 50%; }
/* la fenetre d identification : ses regles sont injectees par script.js,
   apres toutes les feuilles -- html devant les siennes */
html .skolae-box, html .skolae-box input, html .skolae-box select, html .skolae-btn { border-radius: var(--r-bloc); }
html .skolae-box .sk-suffixe { border-radius: 0 var(--r-bloc) var(--r-bloc) 0; }
/* Correction du 30/09/2026 (signalee par le formateur, capture en sombre) :
   script.js peint le bouton « Plus tard » en blanc fixe (#fff) avec la couleur
   d encre du theme : en sombre, texte clair sur blanc, 1,1:1. Bouton rendu
   transparent, texte = encre du theme, bordure = jeton des champs (3:1).
   Les listes Ecole / Promotion n avaient ni marge ni taille de texte : 19 px
   de haut contre 42 px pour les autres champs. Meme gabarit que les champs. */
html .skolae-box .skolae-btn.ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--bord-champ);
}
html .skolae-box .skolae-btn.ghost:hover,
html .skolae-box .skolae-btn.ghost:focus-visible { background: var(--surface-2); color: var(--ink); }
html .skolae-box select {
  font: inherit; font-size: 15px; line-height: 1.3; padding: 10px 12px; min-height: 42px;
  color: var(--ink); border: 1px solid var(--bord-champ);
}
html[data-theme="dark"] .skolae-box select option { background: #1B1B1F; color: #F2F2F4; }
/* les blocs des pages metier : style ecrit dans la page, apres les feuilles */
.path, html .job, html .job .ic, html .skillcard .ic, html span.ic { border-radius: var(--r-bloc); }

/* ----------------------------------------------- 9. le bandeau d accueil */
.hero::after { background: var(--ck-pastel); }

/* ----------------------------------- 10. les panneaux flottants ---------
   L aide et les raccourcis ont leurs propres jetons (aide.css,
   raccourcis.css), charges APRES cette feuille : html devant leur
   selecteur suffit a passer devant. Aide = violet (la couronne),
   raccourcis = le chakra du logiciel ; blanc dessus, 6:1 au moins. */
html .aide-lanceur, html .aide-panneau {
  --aide-accent: var(--ck-violet);
  --aide-fond: var(--ck-noir); --aide-fond-2: #26262C;
}
html[data-theme="light"] .aide-lanceur, html[data-theme="light"] .aide-panneau {
  --aide-fond: #FFFFFF; --aide-fond-2: #F6F6F8;
}
html .rc-lanceur, html .rc-panneau {
  --rc-accent: var(--ck-encre); --rc-accent-txt: var(--ck-pastel);
  --rc-fond: var(--ck-noir); --rc-fond-2: #26262C; --rc-touche: #2C2C33; --rc-etoile: var(--ckp-jaune);
}
html[data-theme="light"] .rc-lanceur, html[data-theme="light"] .rc-panneau {
  --rc-accent-txt: var(--ck-encre); --rc-fond: #FFFFFF; --rc-fond-2: #F6F6F8;
  --rc-touche: #ECECF1; --rc-etoile: var(--cke-jaune);
}

/* ------------------------------------------ 11. corrections mesurees ---
   Mesure du 27/09 sur l apercu (audit-contraste.js) :
   - les commentaires des formules (code .com) : 3,6:1 sur le fond du code ;
   - la coche d une bonne reponse du QCM, en clair : 3,2:1. Le style ecrit
     dans qcm.html passe apres les feuilles : html devant. */
html .code .com, html code .com, html pre .com { color: #A3A3AE; }
/* les blocs de code : gris neutres (les gris violaces d Affinity sortaient
   de la palette), mots-cles au pastel du logiciel (lisible sur le noir) */
.code .code-head { color: #A3A3AE; }
.code code { color: #E4E4E9; }
.btn-copy { color: #D6D6DD; }
html .code .kw { color: var(--ck-pastel); }
html .opt.correct .mark { color: var(--t-succes); }
html .opt.wrong .mark { color: var(--t-erreur); }
/* Mesure du 28/09 apres deploiement (audit de tous les modules) :
   - le chevron d un module ouvert prenait la couleur vive du chakra, en
     sombre : 2,2:1 (indigo) a 3,6:1 (bleu). Il prend l accent lisible ;
   - les etoiles de difficulte (Word, InDesign 2 : style ecrit dans la page) :
     allumees a la couleur vive (2,8 a 3,6:1 en sombre), eteintes au gris des
     bordures (1,5:1 en clair, 1,8:1 en sombre). */
html[data-theme] .module.open .caret { color: var(--accent-txt); }
html .star, html .diff .star { color: var(--accent-txt); }
html .star.off, html .diff .star.off { color: var(--txt-3); }

/* ---------------------------------------- 10. le chakra du logiciel --- */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --ck: #F0B92C;
  --ck-voisin: #2E9B6B;
  --ck-pastel: #F6E3A1;
  --ck-legere: #FDF5D9;
  --ck-encre: #735400;
  --violet: #F0B92C;
  --blue: #2E9B6B;
  --grad: linear-gradient(135deg, #F0B92C 0%, #2E9B6B 100%);
  --grad-soft: linear-gradient(135deg, rgba(240,185,44,.18), rgba(46,155,107,.14));
  --glow: 0 0 0 1px rgba(240,185,44,.30), 0 18px 44px -20px rgba(240,185,44,.50);
  --xl: #F0B92C;
  --xl-dark: #735400;
  --xl-deep: #735400;
  --ps: #F0B92C;
  --ps-dark: #735400;
  --ps-deep: #735400;
  --pp: #F0B92C;
  --pp-dark: #735400;
  --pp-deep: #735400;
  --wd: #F0B92C;
  --wd-dark: #735400;
  --wd-deep: #735400;
  --pbi-yellow: #F0B92C;
  --pbi-yellow-dark: #735400;
  --brand: #1B1B1F;
  --accent: var(--ck-vert);
  --accent-soft: var(--surface-2);
  --tint-line: #F6E3A1;
}
/* l aurore melange trois chakras : celui du logiciel et ses deux voisins */
:root, :root[data-theme="dark"] {
  --aurora-1: rgba(240,185,44,.26);
  --aurora-2: rgba(46,155,107,.20);
  --aurora-3: rgba(224,122,47,.16);
  --accent-txt: #F6E3A1;
  --info: var(--ckp-bleu); --warn: var(--ckp-orange); --tip: var(--ckp-jaune);
}
:root[data-theme="light"] {
  --aurora-1: rgba(240,185,44,.16);
  --aurora-2: rgba(46,155,107,.12);
  --aurora-3: rgba(224,122,47,.10);
  --accent-txt: #735400;
  --tint: #FDF5D9;
  --info: var(--cke-bleu); --warn: var(--cke-orange); --tip: var(--cke-jaune);
}
/* Le texte pose SUR l accent (logo, onglet actif, boutons, badges) :
   un fond et une encre qui passent 4,5:1 (texte_sur_accent, script 09). */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --accent-fond: var(--grad);
  --accent-encre: #1B1B1F;
}
/* Le bandeau d accueil : du chakra vers son voisin, assombri juste assez
   pour son texte clair (5,2:1, 4,8:1 sous le disque decoratif). */
.hero { background: linear-gradient(135deg, #604A12 0%, #1B5B3F 100%); }
.hero h1, .hero p, .hero p strong, .hero p b, .hero p em { color: #F1EEF7; }
.hero::after { opacity: .18; }