/* =========================================================================
   theme-pont.css — le pont entre les anciens cours et le theme Affinity
   -------------------------------------------------------------------------
   Charge APRES theme-affinity.css. Trois roles, et rien d autre :

   1. RENOMMER. Les anciennes feuilles parlent --card, --muted, --tint ;
      Affinity parle --surface, --txt-2, --surface-2. On fait pointer les
      anciens noms vers les nouveaux jetons : toute regle ancienne qui
      utilise une variable suit alors le theme, clair comme sombre, sans
      qu on la reecrive.

   2. LE TEXTE. --ink ne veut pas dire la meme chose des deux cotes :
      texte courant dans les anciennes feuilles, texte SOMBRE SUR FOND
      CLAIR dans Affinity. Le 17/09 on avait contourne selecteur par
      selecteur -- et rate ceux des pages metier (.skillcard b, .timeline b :
      22 textes illisibles). Depuis le 18/09 on fait l inverse : --ink suit
      le theme partout, et les SEULS usages d Affinity -- ses boutons blancs
      et le champ de la fenetre d identification -- sont figes a part.

   3. LES FONDS ECRITS EN DUR. 28 selecteurs portent un fond clair en dur
      (#eef3f0, #fff7d4...). En mode sombre ils feraient des blocs blancs
      sur une page noire. Corriges EN MODE SOMBRE SEULEMENT : en clair,
      les teintes d origine restent, elles avaient ete dessinees pour ca.
      Deux exceptions volontaires : les captures d ecran et le logo gardent
      leur fond blanc -- une capture d Excel est blanche, c est la verite.

   GENERE par scripts/09-moderniser-cours.py — ne pas editer dans un module.
   ========================================================================= */

/* ------------------------------------------------------ 1. les jetons --- */

:root {
  --card:        var(--surface);
  --muted:       var(--txt-2);
  --ink-soft:    var(--txt-2);
  --line-strong: var(--line-2);
  --tint:        var(--surface-2);
  --tint-line:   var(--line-2);
  --accent-soft: var(--surface-2);
  --info-soft:   var(--surface-2);
  --warn-soft:   var(--surface-2);
  --tip-soft:    var(--surface-2);
}

/* ------------------------------------------------------- 2. le texte --- */

body,
.chip, .toc a, .toc .num, .path,
.page-head p, .module-body h3, .pager .ttl,
.steps > li strong, .tile .t-name,
.course-card h3, .course-card p,
.ms-btn.active, .ms-btn:hover, .btn-reset:hover {
  color: var(--txt);
}

.page-head p, .course-card p, .toc a, .pager .ttl { color: var(--txt-2); }

/* ------------------------------------ 3. les fonds, en mode sombre seul */

[data-theme="dark"] .chip,
[data-theme="dark"] .path,
[data-theme="dark"] .course-card .tag,
[data-theme="dark"] table.demo th,
[data-theme="dark"] table.demo code,
[data-theme="dark"] .mode-switch,
[data-theme="dark"] .btn-reset:hover {
  background: var(--surface-2);
  border-color: var(--line);
}

[data-theme="dark"] .module-head:hover,
[data-theme="dark"] .toc a:hover,
[data-theme="dark"] .btn-primary:hover {
  background: var(--surface-2);
}

[data-theme="dark"] .toc .num {
  background: var(--surface-3);
  color: var(--txt);
}

[data-theme="dark"] .progress-bar,
[data-theme="dark"] .course-card .cc-progress {
  background: var(--surface-3);
}

[data-theme="dark"] .task {
  background: var(--surface);
  border-color: var(--line);
}

[data-theme="dark"] .btn-done.is-done {
  background: color-mix(in srgb, var(--mint) 18%, transparent);
  color: var(--txt);
}

/* Les surlignages jaune pale (#fff7d4) : un jaune translucide en sombre,
   qui garde l idee de "mise en avant" sans eblouir. */
[data-theme="dark"] .kicker,
[data-theme="dark"] .ui,
[data-theme="dark"] .data-badge,
[data-theme="dark"] .toc a.active {
  background: rgba(242, 200, 17, .16);
  color: var(--txt);
}

/* Les encadres "Excel bureau" / "Excel en ligne" et les notes d outil. */
[data-theme="dark"] .callout.excel,
[data-theme="dark"] .callout.web,
[data-theme="dark"] .toolnote.desktop,
[data-theme="dark"] .toolnote.web {
  background: var(--surface-2);
  border-color: var(--line-2);
  color: var(--txt);
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .ms-btn.active {
  background: var(--surface-3);
  color: var(--txt);
}

[data-theme="dark"] kbd {
  background: var(--surface-3);
  color: var(--txt);
  border-color: var(--line-2);
}

/* Volontairement laisses blancs : .brand .logo, figure.shot img. */

/* ------------------------------------------------- les etapes numerotees
   Les anciennes feuilles avancent le compteur sur .steps > li::before ;
   theme-affinity.css l avance sur .steps > li. Les deux s additionnaient :
   les etapes etaient numerotees 2, 4, 6 (releve sur Power BI le 27/09).
   Le compteur n avance plus que sur le li. Les modules qui l avaient deja
   corrige dans leur feuille (Illustrator BA1, Power BI) ne changent pas. */
.steps > li::before { counter-increment: none; }

/* ------------------------------------------------- les tableaux de cours */

[data-theme="dark"] table.demo td,
[data-theme="dark"] table.demo th {
  border-color: var(--line);
}

/* ------------------------------------- la fenetre d identification ------
   Construite par script.js avec les classes du module : elle suit le
   theme comme le reste. */

[data-theme="dark"] .skolae-box {
  background: var(--bg-2);
  color: var(--txt);
  border: 1px solid var(--line-2);
}

[data-theme="dark"] .skolae-box input,
[data-theme="dark"] .skolae-box select {
  background: var(--surface-2);
  color: var(--txt);
  border-color: var(--line-2);
}

[data-theme="dark"] .skolae-box .sk-suffixe {
  background: var(--surface-3);
  color: var(--txt-2);
}

/* ------------------------------------------ les blocs des pages elles-memes
   Ajoute le 18/09 apres un signalement : ces regles ne sont pas dans
   style.css mais dans des blocs <style> ecrits DANS les pages d exercices,
   de QCM et de metier -- et deux sont des DEGRADES (#f3faf6 vers #fff).
   L inventaire du 17/09 ne regardait ni l un ni l autre. */

[data-theme="dark"] .miss,
[data-theme="dark"] .analyse {
  background: var(--surface);
  color: var(--txt);
  border-color: var(--line-2);
}

[data-theme="dark"] .opt:hover { background: var(--surface-2); }

[data-theme="dark"] .opt.wrong {
  background: color-mix(in srgb, var(--coral) 18%, transparent);
  color: var(--txt);
}

[data-theme="dark"] .skillcard .ic { background: var(--surface-2); }

/* ---------------------------------------- les TEXTES sombres ecrits en dur
   Le probleme miroir des fonds clairs : 29 selecteurs ecrivent leur texte
   en couleur FONCEE en dur (#0e4d2e, #7a3d00...). Sur fond clair c etait
   juste ; sur fond sombre, 1,35:1 -- invisible. Releve le 18/09 en mesurant
   le contraste rendu, element par element, et non en relisant les regles.

   On ne les passe PAS en blanc uniforme, qui effacerait leur sens. */

/* 1. Ce qui varie selon le logiciel -- etiquettes, badges, titres de tache,
      titres de solution -- prend la couleur vive du logiciel. */
[data-theme="dark"] .kicker,
[data-theme="dark"] .ui,
[data-theme="dark"] .data-badge,
[data-theme="dark"] .data-badge b,
[data-theme="dark"] .task .task-title,
[data-theme="dark"] details.solution > summary,
[data-theme="dark"] .toc a.active,
[data-theme="dark"] .callout.xl,
[data-theme="dark"] .callout.ps,
[data-theme="dark"] .callout.pp,
[data-theme="dark"] .att {
  color: var(--accent-txt);
}

/* 2. Ce qui porte un SENS garde sa teinte, eclaircie pour le fond sombre. */
[data-theme="dark"] .callout.warn,
[data-theme="dark"] .result-banner.fail,
[data-theme="dark"] .analyse b,
[data-theme="dark"] .analyse strong { color: #F5C26B; }      /* attention */

[data-theme="dark"] .callout.info,
[data-theme="dark"] .callout.web,
[data-theme="dark"] .toolnote.web  { color: #8AB8FF; }       /* information */

[data-theme="dark"] .callout.tip,
[data-theme="dark"] .toolnote.desktop { color: #C9B3F5; }     /* conseil */

[data-theme="dark"] .callout.goal,
[data-theme="dark"] .result-banner.pass,
[data-theme="dark"] .graded-cta-txt span,
[data-theme="dark"] .graded-cta-txt strong { color: #5EE0A0; } /* reussite */

[data-theme="dark"] .opt.wrong .mark { color: #FF8A7A; }      /* erreur */

[data-theme="dark"] .explain,
[data-theme="dark"] .steps > li::before { color: var(--txt); }

/* Volontairement non touches : .brand .logo garde son fond blanc, donc son
   texte sombre ; .topnav a.active est deja reecrit par le theme. */

/* ---------------------------------------------------- --ink suit le theme
   Voir l en-tete, point 2. Les anciennes feuilles l emploient pour le texte
   courant : il doit donc etre clair en sombre et sombre en clair. */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --ink: var(--txt);
}

/* Les deux usages d Affinity, figes : ils ont un fond blanc dans les deux
   themes, leur texte doit rester sombre dans les deux. */
.btn-white, .btn-white:hover { color: #15111C; }

/* Le champ de la fenetre d identification : Affinity le force en blanc
   avec !important. En sombre, notre texte clair y serait devenu invisible.
   !important ici n est pas un confort : c est le seul moyen de passer
   devant un !important. */
[data-theme="dark"] .skolae-modal .skolae-box input,
[data-theme="dark"] .skolae-modal .skolae-box select {
  background: var(--surface-2) !important;
  color: var(--txt) !important;
}
[data-theme="light"] .skolae-modal .skolae-box input,
[data-theme="light"] .skolae-modal .skolae-box select {
  color: #15111C !important;
}

/* ----------------------------------------------------- pages metier ------ */
[data-theme="dark"] .stat .big { color: var(--txt); }

/* ------------------------------------------------- le texte tertiaire ----
   #6E6786 donnait 3,3:1 sur les cartes, sous le seuil de 4,5. #8C85A3
   donne 5,0:1 et reste visiblement plus discret que le texte secondaire. */
:root[data-theme="dark"] { --txt-3: #8C85A3; }

/* ------------------------------------------ le texte pose sur l accent ---
   Le theme ecrit en blanc sur la couleur du logiciel (var(--grad)) : logo,
   onglet actif, badges, boutons. Mesure du 27/09/2026 dans les vraies
   pages, sur les DEUX couleurs du degrade : 2,1:1 (Illustrator) a 3,8:1
   (Word). L ancienne regle de l onglet actif (encre sombre) ne tenait que
   sur la couleur vive : 2,9:1 sur le bleu profond de Word.
   Chaque logiciel recoit donc un fond et une encre calcules pour passer
   4,5:1 (--accent-fond, --accent-encre, dans theme-accent.css). Le prefixe
   html[data-theme] passe devant les feuilles chargees apres celle-ci
   (aide, exercices). En sombre, .btn-primary reste sur sa surface grise. */
html[data-theme] .brand .logo,
html[data-theme] .topnav a.active,
html[data-theme] .module.open .module-badge,
html[data-theme] .sec-h .pill,
html[data-theme] .livrable-card .num,
html[data-theme] ol.legende li::before,
html[data-theme] .labo-tab[aria-selected="true"],
html[data-theme] #aide-lanceur,
html[data-theme] #aide-envoi,
html[data-theme] .aide-bulle.moi,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-primary:hover {
  background: var(--accent-fond, var(--grad));
  color: var(--accent-encre, #fff);
}
html[data-theme] .check input:checked { background: var(--accent-fond, var(--grad)); }
html[data-theme] .check input:checked::after { color: var(--accent-encre, #fff); }

/* Le chevron des accordeons : la couleur vive sur blanc (2,1:1 en
   Illustrator). En clair, la version foncee de l accent. */
html[data-theme="light"] .module .caret { color: var(--accent-txt); }

/* ------------------------------------------ texte tertiaire, en clair ---
   #8B84A3 donnait 3,5:1 sur blanc (pieds de page, sous-titres, liens
   Precedent / Suivant). #615A7A : 6,3:1 sur blanc, 5,0:1 sur gris. */
:root[data-theme="light"] { --txt-3: #615A7A; }

/* -------------------------------------------- les champs de saisie ---
   Une bordure de champ doit se voir : 3:1. --line-2 donnait 1,5:1 en clair
   et 1,8:1 en sombre. Et les couleurs de verdict (juste / faux) etaient
   celles du theme sombre, illisibles en clair (1,5:1). */
:root[data-theme="light"] { --bord-champ: #817A98; --ok-txt: #08704D; --ko-txt: #A61E17; }
:root[data-theme="dark"]  { --bord-champ: #8A8597; --ok-txt: #5EE0A0; --ko-txt: #FF8A7A; }
html[data-theme] .skolae-box input,
html[data-theme] .skolae-box select,
html[data-theme] .aide-champ,
html[data-theme] .aide-question {
  border-color: var(--bord-champ);
}

/* --------------------------------------------- les boutons desactives ---
   Le navigateur et les pages les grisaient par l opacite (.5, parfois en
   style sur la balise) : du blanc sur l accent a moitie efface, 1,4:1. Un
   bouton inactif reste lisible : surface neutre, texte secondaire.
   !important : seul moyen de passer devant style="opacity:.5". */
html[data-theme] .btn:disabled,
html[data-theme] .btn[disabled] {
  opacity: 1 !important;
  background: var(--surface-2) !important;
  color: var(--txt-2) !important;
  border-color: var(--line-2) !important;
  box-shadow: none !important;
  cursor: default;
}

/* Les boutons du bandeau d accueil, en sombre : leur surface translucide
   eclaircissait le bandeau sous un texte clair (4,2:1). Le bouton principal
   y prend l accent, comme en clair ; le second, un voile sombre. */
html[data-theme="dark"] .hero .btn-primary,
html[data-theme="dark"] .hero .btn-primary:hover {
  background: var(--accent-fond, var(--grad));
  color: var(--accent-encre, #fff);
}
html[data-theme="dark"] .hero .btn-ghost { background: rgba(8, 6, 12, .35); color: #F1EEF7; }

/* Le separateur du fil d Ariane : opacite .5 dans le theme (2,2:1). */
.path .sep { opacity: 1; color: var(--txt-2); }

/* La coche d une bonne reponse du QCM, en sombre (2,9:1). */
[data-theme="dark"] .opt.correct .mark { color: #5EE0A0; }

/* Les etiquettes : un fond teinte de la couleur du logiciel plutot que du
   jaune. Le jaune eclaircissait le fond sous un texte bleu (Word : 2,5:1). */
[data-theme="dark"] .kicker,
[data-theme="dark"] .ui,
[data-theme="dark"] .data-badge,
[data-theme="dark"] .toc a.active {
  background: color-mix(in srgb, var(--violet) 14%, transparent);
}

/* -------------------------------------------- les anciens bandeaux sombres
   .hero (l accueil d un cours) et .scorebar (l ecran "Pret ?" du QCM)
   gardent leur degrade vert fonce d origine DANS LES DEUX THEMES : ils font
   partie des 38 classes que le theme Affinity ne couvre pas. Leur texte doit
   donc rester clair dans les deux themes. Or le theme impose a tout <strong>
   la couleur du texte courant -- sombre en mode clair : du gras sombre sur
   vert fonce, 2,3:1. On rend a ces elements la couleur de leur bandeau. */
.hero strong, .hero b { color: inherit; }
.scorebar { color: #fff; }
.scorebar .big, .scorebar strong, .scorebar b { color: inherit; }

/* Les numeros des cartes de cours : blancs sur une teinte translucide, donc
   presque blancs sur blanc en mode clair (1,2:1). */
[data-theme="light"] .cc-num { color: var(--accent-txt); }

/* -------------------------------------- les degrades poses sur la balise
   La carte "Le QCM final" porte son degrade dans son attribut style :
   style="background: linear-gradient(#f3faf6, #fff)". Rien dans une feuille
   ne passe devant un style en ligne, sauf !important. On ne cible QUE les
   cartes qui en ont un, et seulement en mode sombre -- en clair, ce
   degrade pale est exactement ce qui etait voulu. */
[data-theme="dark"] .course-card[style*="gradient"],
[data-theme="dark"] .callout[style*="gradient"] {
  background: var(--surface) !important;
}

/* =========================================================================
   LE BANDEAU DU HAUT
   -------------------------------------------------------------------------
   Mesure du 25/09 sur Excel BA2 : neuf liens occupaient 666 px d un espace
   de 748, avant meme la pastille d identite et le bouton de theme. Sous
   640 px, style.css les enfermait dans un defilement horizontal de 62vw --
   les liens etaient la, mais hors champ, et rien ne le disait.

   Deux regimes :
     au-dessus de 700 px  la navigation prend sa propre rangee, pleine
                          largeur. Rien n est tronque, rien ne defile.
     en dessous           un bouton la replie ; deployee, elle s empile
                          verticalement, un lien par ligne.
   ========================================================================= */

.topbar-inner {
  flex-wrap: wrap;
  row-gap: 8px;
  column-gap: 12px;
}
.topbar-inner .brand { flex: 1 1 auto; min-width: 0; }
.topbar-inner .brand .logo { flex-shrink: 0; }   /* jamais ecrase en "X" etroit */
.topbar-inner .skolae-idchip,
.topbar-inner .theme-toggle { order: 2; flex: 0 0 auto; }

.topnav {
  order: 3;
  flex: 1 0 100%;
  margin-left: 0;
  max-width: none;
  overflow: visible;
  flex-wrap: wrap;
  gap: 4px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 8px;
}
.topnav a { white-space: nowrap; }

/* Le bouton n existe que sur les petits ecrans. */
.nav-burger { display: none; }

@media (max-width: 700px) {
  .topbar-inner { flex-wrap: nowrap; row-gap: 0; }
  /* theme-affinity.css masque TOUT span de la marque sous 700 px
     (.brand span:not(.logo)). En enveloppant le nom du module dans un span
     pour pouvoir cacher la suite, on le faisait tomber dans cette regle : la
     barre n affichait plus que le logo. On rend donc le nom -- c est ce qui
     dit a l etudiant dans quel cours il se trouve -- et on ne cache que le
     "· Cours interactif", qui ne lui apprend rien.
     Specificite : trois classes, pour passer devant .brand span:not(.logo). */
  .topbar-inner .brand .brand-nom {
    display: inline-block; vertical-align: middle;
    max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .brand-sous { display: none; }          /* "· Cours interactif" */
  .brand { font-size: 14px; }

  /* La pastille d identite garde son icone, pas son texte : "S'identifier"
     prenait 91 px et rognait le nom du module a quatre lettres. Le cadenas
     suffit a comprendre, et le titre de survol donne le detail. */
  .skolae-idchip .sk-chip-txt { display: none; }
  .skolae-idchip { padding-left: 9px; padding-right: 9px; }

  .nav-burger {
    display: inline-flex; align-items: center; gap: 8px;
    order: 2; margin-left: auto;
    padding: 7px 12px; border-radius: var(--r-bloc, 10px); cursor: pointer;
    /* jetons du theme : l'ancien blanc translucide etait blanc sur blanc en
       theme clair, le bouton etait invisible (constate le 08/10/2026) */
    border: 1px solid var(--line-2, rgba(255, 255, 255, .28));
    background: var(--surface-2, rgba(255, 255, 255, .10));
    color: var(--txt, #fff); font: inherit; font-size: 13px; font-weight: 600;
  }
  .nav-burger-ic {
    width: 16px; height: 2px; background: currentColor; border-radius: 2px;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  }
  .nav-burger-txt { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Replie par defaut : c est tout l interet. */
  .topnav { display: none; }

  /* Ouvert, le menu doit passer SOUS la premiere rangee. La rangee fermee
     interdit le retour a la ligne (pour rester compacte) : sans cette
     regle, le menu prenait 100 % de la largeur SUR LA MEME LIGNE et
     ecrasait tout le reste dans la moitie gauche -- logo coupe, nom du
     module disparu. Constate sur iPhone le 25/09. */
  .topbar.nav-ouvert .topbar-inner { flex-wrap: wrap; row-gap: 4px; }
  .topbar.nav-ouvert .topnav {
    display: flex; flex-direction: column;
    order: 3; flex: 1 0 100%; width: 100%;
    gap: 2px; padding: 8px 0 4px;
  }
  .topbar.nav-ouvert .topnav a {
    padding: 11px 12px; font-size: 15px; border-radius: var(--r-bloc, 8px);
  }
}

/* Sous 420 px -- un iPhone tenu droit -- le bouton se reduit a son icone.
   Le nom du module reprend la place : il dit dans quel cours on est, tandis
   que la section est deja en gros titre juste en dessous. */
@media (max-width: 420px) {
  .nav-burger-txt { display: none; }
  .nav-burger { padding: 8px 11px; }
  .topbar-inner .brand .brand-nom { max-width: 52vw; }
}

/* --- La demarcation des groupes (08/10/2026) --------------------------------
   Le menu est classe en trois groupes : Decouvrir | Apprendre | S'evaluer.
   effets.js insere un <span class="nav-sep" aria-hidden="true"> entre deux
   groupes. Ici, sur ordinateur : un fin trait vertical en degrade (1 px,
   22 px de haut). La marge negative de 2 px loge le trait dans l'ecart de 4 px
   entre deux liens : le menu ne s'allonge que de 1 px par trait (InDesign BA2
   n'a que 6 px de reserve a 900 px, il passerait sur deux rangees) ; l'air
   vient du remplissage des liens (12 px). L'intitule et le premier
   separateur ne servent qu'au mode replie. Decoratif : pas de clic, pas de
   focus, lisible en clair comme en sombre (jeton --txt-3 des deux themes). */
.topnav .nav-sep {
  flex: 0 0 auto; align-self: center;
  width: 1px; height: 22px; margin: 0 -2px; padding: 0;
  background: linear-gradient(to bottom, transparent, var(--txt-3, #8B84A3) 30%,
              var(--txt-3, #8B84A3) 70%, transparent);
  pointer-events: none; user-select: none;
}
.topnav .nav-sep-t,
.topnav .nav-sep-debut,
.topnav .nav-sep-tete { display: none; }   /* debut / tete de rangee : voir effets.js */
.topnav .nav-sep-fin { visibility: hidden; }

/* En mode replie (bouton menu, sous 700 px) : chaque groupe commence par un
   trait horizontal en degrade puis son intitule en petites capitales. Le
   premier groupe n'a pas de trait (le menu a deja sa propre ligne en haut).
   Les marges de 12 px alignent l'intitule sur le texte des liens. */
@media (max-width: 700px) {
  .topbar.nav-ouvert .topnav .nav-sep {
    display: block; visibility: visible; align-self: stretch;
    width: auto; height: auto; margin: 8px 12px 0; background: none;
  }
  .topbar.nav-ouvert .topnav .nav-sep::before {
    content: ""; display: block; height: 1px; margin-bottom: 8px;
    background: linear-gradient(to right, var(--txt-3, #8B84A3), transparent);
  }
  .topbar.nav-ouvert .topnav .nav-sep-debut { margin-top: 2px; }
  .topbar.nav-ouvert .topnav .nav-sep-debut::before { display: none; }
  .topbar.nav-ouvert .topnav .nav-sep-t {
    display: block; padding-bottom: 2px;
    font-size: 11px; line-height: 1.4; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--txt-2, #5B5470);
  }
}

/* La barre fait deux rangees : une ancre visee par un lien #m3 ne doit pas
   se retrouver cachee dessous. */
html { scroll-padding-top: 112px; }
@media (max-width: 700px) { html { scroll-padding-top: 64px; } }