/* ==========================================================================
   Feuille de style commune de la formation.
   Toutes les pages (accueil, leçons, fiches de référence) s'y rattachent.

   Style : aplats de couleur, sans dégradé ni ombre portée, pensé pour des
   débutants qui lisent longtemps (contrastes d'au moins 4,5:1, cibles de
   44 px, focus toujours visible, animations réduites sur demande).

   Pour changer l'habillage, modifier uniquement les variables des blocs
   « Couleurs » ci-dessous (thème clair, puis thème sombre).
   Aucune ressource externe : polices du système, icônes dessinées ici.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ----- Couleurs, thème clair ----- */
  --fond: #F0FDFA;
  --carte: #FFFFFF;
  --attenue: #E8F1F4;
  --texte: #134E4A;
  --texte-2: #475569;
  --bordure: #5EEAD4;
  --filet: #CBD5E1;
  --bordure-forte: #64748B;
  --primaire: #0D9488;
  --primaire-fonce: #0F766E;
  --primaire-tres-fonce: #115E59;
  --primaire-clair: #CCFBF1;
  --sur-primaire: #FFFFFF;
  --secondaire: #2DD4BF;
  --accent: #D97706;
  --accent-fonce: #B45309;
  --accent-clair: #FEF3C7;
  --ok: #15803D;
  --ok-fonce: #166534;
  --ok-clair: #DCFCE7;
  --sur-ok: #FFFFFF;
  --ko: #DC2626;
  --ko-fonce: #B91C1C;
  --ko-clair: #FEE2E2;
  --sur-ko: #FFFFFF;
  --surlignage: #FDE68A;
  --selection: #BAE6FD;
  --bandeau: #0F766E;
  --sur-bandeau: #FFFFFF;
  --sur-bandeau-2: #CCFBF1;
  --anneau: #0D9488;

  /* ----- Polices (celles du système : rien n'est téléchargé) ----- */
  --police-texte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --police-titres: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --police-interface: var(--police-texte);
  --police-code: "Cascadia Mono", Consolas, "Courier New", monospace;

  /* ----- Mesures ----- */
  --mesure: 39rem;
  --rayon: 10px;
  --rayon-petit: 6px;
  --rapide: 160ms;

  /* ----- Icônes (tracés SVG intégrés, utilisés comme masques) ----- */
  --ic-ordinateur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E");
  --ic-fenetre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M7 6.5h.01M10 6.5h.01'/%3E%3C/svg%3E");
  --ic-bouclier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.2 7.8-8 9-4.8-1.2-8-4.5-8-9V6l8-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --ic-nuage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4 4 0 0 1-.5-7.97A6 6 0 0 1 18 9.5a4.25 4.25 0 0 1-.5 8.5H7z'/%3E%3C/svg%3E");
  --ic-courrier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
  --ic-document: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
  --ic-tableur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M3 15h18M9 4v16M15 4v16'/%3E%3C/svg%3E");
  --ic-presentation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18M5 4v11h14V4M12 15v3M8 21l4-3 4 3M9 11l2-2 2 2 3-3'/%3E%3C/svg%3E");
  --ic-discussion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-8l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/%3E%3Cpath d='M8 10h8M8 13h5'/%3E%3C/svg%3E");
  --ic-trophee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0V4zM8 6H5a3 3 0 0 0 3 4M16 6h3a3 3 0 0 1-3 4M12 13v4M8 20h8'/%3E%3C/svg%3E");
  --ic-livre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v15H6a2 2 0 0 0-2 2V5zM4 20a2 2 0 0 0 2 2h13v-4M8 7h7'/%3E%3C/svg%3E");
  --ic-clavier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Cpath d='M6 10h.01M10 10h.01M14 10h.01M18 10h.01M7 14h10'/%3E%3C/svg%3E");
  --ic-eclair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7l1-8z'/%3E%3C/svg%3E");
  --ic-dossier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z'/%3E%3C/svg%3E");
  --ic-calcul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 5H7l6 7-6 7h10'/%3E%3C/svg%3E");
  --ic-liste: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l1.5 1.5L8 5M4 12l1.5 1.5L8 11M4 18l1.5 1.5L8 17M11 6h9M11 12h9M11 18h9'/%3E%3C/svg%3E");
  --ic-fleche-gauche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
  --ic-fleche-droite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ic-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --ic-croix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --ic-imprimer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V3h10v5M7 17H5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M7 14h10v7H7z'/%3E%3C/svg%3E");
  --ic-horloge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --ic-maison: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8M5 10v10h14V10M10 20v-6h4v6'/%3E%3C/svg%3E");
  --ic-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 1-1 1.7M12 17h.01'/%3E%3C/svg%3E");
  --ic-ampoule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M8 14a6 6 0 1 1 8 0c-.7.7-1 1.5-1 2.5H9c0-1-.3-1.8-1-2.5z'/%3E%3C/svg%3E");
  --ic-alerte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 17H2L12 3zM12 10v4M12 17h.01'/%3E%3C/svg%3E");
  --ic-cible: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E");
  --ic-signet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4-6 4V3z'/%3E%3C/svg%3E");
  --ic-boussole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5 5-2z'/%3E%3C/svg%3E");
  --ic-souris: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='5'/%3E%3Cpath d='M12 7v3'/%3E%3C/svg%3E");
  --ic-oeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --ic-lecture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4l13 8-13 8V4z'/%3E%3C/svg%3E");
}

/* ----- Couleurs, thème sombre : suit le réglage de Windows, à l'écran seulement ----- */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --fond: #0A1F1C;
    --carte: #10302B;
    --attenue: #173F39;
    --texte: #E0F7F3;
    --texte-2: #A8C5C0;
    --bordure: #1F6B61;
    --filet: #2B4F4A;
    --bordure-forte: #7FA9A2;
    --primaire: #2DD4BF;
    --primaire-fonce: #5EEAD4;
    --primaire-tres-fonce: #99F6E4;
    --primaire-clair: #134E4A;
    --sur-primaire: #042F2E;
    --secondaire: #14B8A6;
    --accent: #FBBF24;
    --accent-fonce: #FCD34D;
    --accent-clair: #3F2E0A;
    --ok: #4ADE80;
    --ok-fonce: #86EFAC;
    --ok-clair: #123D26;
    --sur-ok: #052E16;
    --ko: #F87171;
    --ko-fonce: #FCA5A5;
    --ko-clair: #4A1D1D;
    --sur-ko: #450A0A;
    --surlignage: #6B5300;
    --selection: #0C4A6E;
    --bandeau: #134E4A;
    --sur-bandeau: #F0FDFA;
    --sur-bandeau-2: #99F6E4;
    --anneau: #5EEAD4;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* 19 px quand le navigateur est à sa taille par défaut ; suit le réglage de l'utilisateur sinon. */
html { font-size: 118.75%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  line-height: 1.65;
}

/* ---------- Icônes ---------- */

.ic, .bloc:is(.objectif, .pratique, .retenir, .attention, .astuce, .usage, .source) > :is(h2, h3)::before,
details.rappel > summary::before, .exercice > .titre-ex::before, .quiz .verdict::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -.22em;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.ic-ordinateur { --i: var(--ic-ordinateur); }
.ic-fenetre { --i: var(--ic-fenetre); }
.ic-bouclier { --i: var(--ic-bouclier); }
.ic-nuage { --i: var(--ic-nuage); }
.ic-courrier { --i: var(--ic-courrier); }
.ic-document { --i: var(--ic-document); }
.ic-tableur { --i: var(--ic-tableur); }
.ic-presentation { --i: var(--ic-presentation); }
.ic-discussion { --i: var(--ic-discussion); }
.ic-trophee { --i: var(--ic-trophee); }
.ic-livre { --i: var(--ic-livre); }
.ic-clavier { --i: var(--ic-clavier); }
.ic-eclair { --i: var(--ic-eclair); }
.ic-dossier { --i: var(--ic-dossier); }
.ic-calcul { --i: var(--ic-calcul); }
.ic-liste { --i: var(--ic-liste); }
.ic-fleche-gauche { --i: var(--ic-fleche-gauche); }
.ic-fleche-droite { --i: var(--ic-fleche-droite); }
.ic-coche { --i: var(--ic-coche); }
.ic-croix { --i: var(--ic-croix); }
.ic-imprimer { --i: var(--ic-imprimer); }
.ic-horloge { --i: var(--ic-horloge); }
.ic-maison { --i: var(--ic-maison); }
.ic-question { --i: var(--ic-question); }
.ic-ampoule { --i: var(--ic-ampoule); }
.ic-alerte { --i: var(--ic-alerte); }
.ic-cible { --i: var(--ic-cible); }
.ic-signet { --i: var(--ic-signet); }
.ic-boussole { --i: var(--ic-boussole); }
.ic-souris { --i: var(--ic-souris); }
.ic-oeil { --i: var(--ic-oeil); }
.ic-lecture { --i: var(--ic-lecture); }

/* ---------- Texte courant ---------- */

h1, h2, h3, h4 { font-family: var(--police-titres); line-height: 1.2; font-weight: 700; text-wrap: balance; }
h1 { font-size: 2.1rem; margin: 0 0 .6rem; letter-spacing: -.015em; }
h2 {
  font-size: 1.45rem; margin: 3.2rem 0 .8rem; padding-top: 1rem;
  /* un court trait de couleur au-dessus de chaque grande partie */
  background: linear-gradient(var(--secondaire), var(--secondaire)) left top / 3rem 4px no-repeat;
}
h3 { font-size: 1.12rem; margin: 1.8rem 0 .5rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
li { margin-bottom: .35rem; }
strong { font-weight: 700; }
a { color: var(--primaire-fonce); text-underline-offset: .18em; transition: color var(--rapide), background-color var(--rapide), border-color var(--rapide); }
a:hover { color: var(--primaire-tres-fonce); }
hr { border: 0; border-top: 1px solid var(--filet); margin: 2.5rem 0; }
img, svg { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--anneau); outline-offset: 3px; border-radius: 4px; }

/* Lien d'évitement : premier arrêt du clavier, visible seulement quand il a le focus */
.evitement {
  position: absolute; left: .6rem; top: -5rem; z-index: 50;
  padding: .7rem 1rem; background: var(--carte); color: var(--texte); font-weight: 700;
  border: 2px solid var(--anneau); border-radius: var(--rayon-petit);
}
.evitement:focus { top: .6rem; }

/* Un mot nouveau, défini dans le glossaire */
a.terme { color: inherit; text-decoration: underline dotted var(--primaire); text-decoration-thickness: 2px; }
a.terme:hover { background: var(--primaire-clair); }

mark { background: var(--surlignage); color: inherit; padding: 0 .15em; border-radius: 3px; }

/* Touches du clavier : <kbd>Ctrl</kbd> + <kbd>C</kbd> */
kbd {
  display: inline-block;
  min-width: 1.9em;
  padding: .08em .5em .12em;
  font: 600 .82em var(--police-interface);
  text-align: center;
  white-space: nowrap;
  color: var(--texte);
  background: var(--carte);
  border: 1px solid var(--bordure-forte);
  border-bottom-width: 3px;
  border-radius: var(--rayon-petit);
}

/* Ce qu'on tape ou ce qu'on lit à l'écran */
code, .saisie {
  font-family: var(--police-code);
  font-size: .9em;
  background: var(--attenue);
  border: 1px solid var(--filet);
  border-radius: 5px;
  padding: .05em .35em;
  white-space: normal;
  overflow-wrap: anywhere;
}
code.formule { background: var(--ok-clair); border-color: var(--ok); color: var(--ok-fonce); font-weight: 600; }

/* Un bouton ou un libellé de l'écran : <span class="ui">Enregistrer</span> */
.ui, .chemin {
  font-family: var(--police-interface);
  font-size: .9em;
  background: var(--carte);
  border: 1px solid var(--bordure-forte);
  border-radius: 5px;
  padding: .05em .45em;
}
.ui { font-weight: 600; white-space: nowrap; }

/* Un chemin de menus : <span class="chemin"><b>Fichier</b><b>Enregistrer sous</b></span> */
.chemin b { font-weight: 600; white-space: nowrap; }
.chemin b + b::before { content: "›"; color: var(--primaire-fonce); font-weight: 700; margin: 0 .4em; }

/* ---------- Mise en page générale ---------- */

.barre-haut {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1rem;
  min-height: 3rem; padding: .35rem 1.2rem;
  background: var(--carte);
  border-bottom: 2px solid var(--bordure);
  font-size: .82rem;
}
.barre-haut a.accueil {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.4rem; padding: 0 .6rem; margin-left: -.6rem;
  font-weight: 700; text-decoration: none; white-space: nowrap; border-radius: var(--rayon-petit);
}
.barre-haut a.accueil:hover { background: var(--primaire-clair); }
.barre-haut .ou { color: var(--texte-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-haut .avancement { display: flex; align-items: center; gap: .6rem; white-space: nowrap; color: var(--texte-2); font-weight: 600; }
.jauge { width: 7rem; height: .55rem; background: var(--attenue); border: 1px solid var(--bordure-forte); border-radius: 99px; overflow: hidden; }
.jauge > span { display: block; height: 100%; background: var(--ok); width: 0; transition: width 400ms ease-out; }

main { max-width: var(--mesure); margin: 0 auto; padding: 2.4rem 1.2rem 5rem; }
main.large { max-width: 60rem; }

/* Leçon : sur grand écran, le sommaire de la leçon se place à gauche du texte */
.sommaire-lecon { display: none; }
@media (min-width: 1140px) {
  .page-lecon {
    display: grid; grid-template-columns: 13rem minmax(0, var(--mesure));
    justify-content: center; column-gap: 2.5rem; align-items: start; padding: 0 1.2rem;
  }
  .page-lecon > main { margin: 0; padding-left: 0; padding-right: 0; max-width: none; }
  .sommaire-lecon {
    display: block; position: sticky; top: 3.4rem; padding: 2.6rem 0 1rem;
    max-height: calc(100vh - 3.4rem); overflow-y: auto; font-size: .8rem; line-height: 1.35;
  }
}
.sommaire-lecon .titre { margin: 0 0 .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: var(--texte-2); }
.sommaire-lecon ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--filet); }
.sommaire-lecon li { margin: 0; }
.sommaire-lecon a {
  display: block; padding: .45rem .7rem; margin-left: -2px; border-left: 2px solid transparent;
  color: var(--texte-2); text-decoration: none;
}
.sommaire-lecon a:hover { color: var(--primaire-tres-fonce); background: var(--primaire-clair); }
.sommaire-lecon a.ici { color: var(--texte); font-weight: 700; border-left-color: var(--primaire); }

.entete-lecon { margin-bottom: 2rem; }
.surtitre {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--primaire-fonce); margin: 0 0 .6rem;
}
.surtitre .duree { display: inline-flex; align-items: center; gap: .35rem; color: var(--texte-2); font-weight: 600; text-transform: none; letter-spacing: 0; }
.chapeau { font-size: 1.15rem; color: var(--texte-2); margin: 0; }

/* ---------- Blocs ---------- */

.bloc {
  margin: 1.6rem 0;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--filet);
  border-left: 6px solid var(--bordure-forte);
  border-radius: var(--rayon);
  background: var(--carte);
}
.bloc > :last-child { margin-bottom: 0; }
.bloc > h2, .bloc > h3 { margin-top: 0; padding-top: 0; background: none; font-size: 1.12rem; }
.bloc > h2::before, .bloc > h3::before { margin-right: .5em; }

.bloc.objectif { border-color: var(--bordure); border-left-color: var(--primaire); }
.bloc.objectif > h2, .bloc.objectif > h3 { --i: var(--ic-cible); }
.bloc.pratique { border-left-color: var(--ok); }
.bloc.pratique > h2, .bloc.pratique > h3 { --i: var(--ic-souris); }
.bloc.retenir { border-color: var(--bordure); border-left-color: var(--primaire); background: var(--primaire-clair); }
.bloc.retenir > h2, .bloc.retenir > h3 { --i: var(--ic-signet); }
.bloc.attention { border-color: var(--ko); background: var(--ko-clair); }
.bloc.attention > h2, .bloc.attention > h3 { --i: var(--ic-alerte); color: var(--ko-fonce); }
.bloc.astuce { border-color: var(--accent); background: var(--accent-clair); }
.bloc.astuce > h2, .bloc.astuce > h3 { --i: var(--ic-ampoule); color: var(--accent-fonce); }
.bloc.usage { border-left-color: var(--secondaire); }
.bloc.usage > h2, .bloc.usage > h3 { --i: var(--ic-boussole); }
.bloc.source { background: var(--attenue); }
.bloc.source > h2, .bloc.source > h3 { --i: var(--ic-livre); }
.bloc.professeur { display: flex; gap: .8rem; align-items: flex-start; border-left-color: var(--secondaire); font-size: .92rem; }
.bloc.professeur > .ic { margin-top: .2rem; width: 1.5em; height: 1.5em; color: var(--primaire-fonce); }
.bloc.professeur > div > :last-child, .bloc.professeur p { margin: 0; }

/* Référence à une source, en fin de phrase : <a class="src" href="…">Microsoft</a> */
a.src {
  font-family: var(--police-interface); font-size: .68em; font-weight: 600; vertical-align: .35em;
  text-decoration: none; color: var(--texte-2); border: 1px solid var(--bordure-forte); border-radius: 99px;
  padding: .05em .55em; margin-left: .15em; white-space: nowrap; background: var(--carte);
}
a.src:hover { color: var(--primaire-tres-fonce); border-color: var(--primaire); background: var(--primaire-clair); }

/* ---------- Tableaux ---------- */

table { border-collapse: collapse; width: 100%; margin: 1.2rem 0; font-size: .88rem; line-height: 1.45; }
caption { caption-side: top; text-align: left; font-weight: 700; padding-bottom: .4rem; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--filet); vertical-align: top; }
thead th { border-bottom: 2px solid var(--texte); font-weight: 700; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.defile { overflow-x: auto; }

/* ---------- Boutons ---------- */

.bouton, button.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 2.75rem;
  font: 700 .95rem var(--police-interface);
  color: var(--sur-primaire); background: var(--primaire-fonce);
  border: 2px solid var(--primaire-fonce); border-radius: 8px; padding: .5rem 1.2rem;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--rapide), border-color var(--rapide), color var(--rapide);
}
.bouton:hover { background: var(--primaire-tres-fonce); border-color: var(--primaire-tres-fonce); color: var(--sur-primaire); }
.bouton.secondaire { background: var(--carte); color: var(--primaire-fonce); }
.bouton.secondaire:hover { background: var(--primaire-clair); color: var(--primaire-tres-fonce); }
.bouton.succes { background: var(--ok); border-color: var(--ok); color: var(--sur-ok); }
.bouton.succes:hover { background: var(--ok-fonce); border-color: var(--ok-fonce); color: var(--sur-ok); }
.bouton.grand { font-size: 1.05rem; padding: .7rem 1.5rem; }
.bouton.petit { min-height: 2.3rem; font-size: .82rem; padding: .3rem .8rem; }
.bouton[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Étapes guidées (actions réelles sur l'ordinateur) ---------- */

ol.etapes { list-style: none; padding: 0; counter-reset: etape; }
ol.etapes > li {
  counter-increment: etape;
  position: relative;
  margin: 0 0 .7rem;
  padding: .85rem 1rem .85rem 3.5rem;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  transition: background-color var(--rapide), border-color var(--rapide);
}
ol.etapes > li::before {
  content: counter(etape);
  position: absolute; left: .9rem; top: .8rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--primaire-fonce); color: var(--sur-primaire);
  font: 700 .9rem/1.9rem var(--police-interface); text-align: center;
}
ol.etapes > li.fait { background: var(--ok-clair); border-color: var(--ok); }
ol.etapes > li.fait::before { content: "✓"; background: var(--ok); color: var(--sur-ok); }
ol.etapes .attendu {
  display: block; margin-top: .5rem; padding: .1rem 0 .1rem .8rem; border-left: 3px solid var(--ok);
  font-size: .86rem; color: var(--texte-2);
}
ol.etapes .attendu::before { content: "Vous devez voir : "; font-weight: 700; color: var(--ok-fonce); }
ol.etapes label.coche {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; margin-top: .3rem; padding-right: .6rem;
  font: 600 .86rem var(--police-interface); cursor: pointer; user-select: none;
}
ol.etapes label.coche input { width: 1.4rem; height: 1.4rem; accent-color: var(--ok); cursor: pointer; }
.etapes-bilan { font: 600 .9rem var(--police-interface); color: var(--texte-2); margin: .2rem 0 1.4rem; }
.etapes-bilan.complet { color: var(--ok-fonce); }

/* ---------- Rappels (pratique de récupération) ---------- */

details.rappel {
  margin: 0 0 .7rem; background: var(--carte); border: 1px solid var(--filet); border-radius: var(--rayon);
  transition: background-color var(--rapide), border-color var(--rapide);
}
details.rappel > summary {
  --i: var(--ic-question);
  cursor: pointer; position: relative; display: block; padding: .85rem 1rem .85rem 3rem;
  font-weight: 600; font-size: .95rem; list-style: none; border-radius: var(--rayon);
}
details.rappel > summary::-webkit-details-marker { display: none; }
details.rappel > summary::before { position: absolute; left: 1rem; top: .95rem; width: 1.3em; height: 1.3em; color: var(--primaire-fonce); }
details.rappel > summary::after { content: "Voir la réponse"; display: block; margin-top: .25rem; font-size: .78rem; font-weight: 700; color: var(--primaire-fonce); text-decoration: underline; text-underline-offset: .18em; }
details.rappel[open] > summary::after { content: "Masquer la réponse"; }
details.rappel > .reponse { padding: 0 1rem .9rem 3rem; }
details.rappel .auto-eval { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; font-size: .82rem; color: var(--texte-2); }
details.rappel.su { border-color: var(--ok); background: var(--ok-clair); }
details.rappel.oublie { border-color: var(--accent); background: var(--accent-clair); }

/* Analyse ou corrigé repliable : <details> ordinaire, sans classe */
details:not(.rappel) { margin: 1rem 0; padding: .7rem 1rem; background: var(--carte); border: 1px solid var(--filet); border-left: 4px solid var(--primaire); border-radius: var(--rayon); }
details:not(.rappel) > summary { cursor: pointer; font-weight: 700; font-size: .95rem; color: var(--primaire-fonce); min-height: 1.8rem; }
details:not(.rappel)[open] > summary { margin-bottom: .6rem; }
details:not(.rappel) > :last-child { margin-bottom: 0; }

/* ---------- Quiz ---------- */

.quiz { margin: 1.2rem 0; }
.quiz .question { margin: 0 0 1.4rem; padding: 1.1rem 1.2rem; background: var(--carte); border: 1px solid var(--filet); border-radius: var(--rayon); }
.quiz .enonce { font-weight: 700; margin-bottom: .8rem; }
.quiz .enonce .num { color: var(--primaire-fonce); margin-right: .35em; }
.quiz ul.choix { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.quiz ul.choix li { margin: 0; }
.quiz button.choix-btn {
  width: 100%; min-height: 2.75rem; text-align: left; cursor: pointer;
  font: 1rem/1.4 var(--police-texte); color: var(--texte);
  background: var(--fond); border: 2px solid var(--bordure-forte); border-radius: 8px; padding: .6rem .9rem;
  transition: background-color var(--rapide), border-color var(--rapide);
}
.quiz button.choix-btn:hover:not([disabled]) { border-color: var(--primaire); background: var(--primaire-clair); }
.quiz button.choix-btn[disabled] { cursor: default; color: var(--texte-2); border-color: var(--filet); }
.quiz button.choix-btn.juste { border-color: var(--ok); background: var(--ok-clair); color: var(--texte); font-weight: 700; }
.quiz button.choix-btn.faux { border-color: var(--ko); background: var(--ko-clair); color: var(--texte); }
/* la bonne et la mauvaise réponse sont nommées, pas seulement colorées */
.quiz button.choix-btn.juste::after { content: "✓ Bonne réponse"; float: right; margin-left: 1rem; font: 700 .78rem/1.8 var(--police-interface); color: var(--ok-fonce); }
.quiz button.choix-btn.faux::after { content: "✗ Votre réponse"; float: right; margin-left: 1rem; font: 700 .78rem/1.8 var(--police-interface); color: var(--ko-fonce); }
.quiz .verdict { font-weight: 700; font-size: .92rem; margin: .8rem 0 .3rem; }
.quiz .verdict::before { margin-right: .4em; }
.quiz .verdict.juste { --i: var(--ic-coche); color: var(--ok-fonce); }
.quiz .verdict.faux { --i: var(--ic-croix); color: var(--ko-fonce); }
.quiz .explication { display: none; font-size: .95rem; margin: 0; color: var(--texte-2); }
.quiz .question.repondu .explication { display: block; }
.quiz .bilan { padding: 1rem 1.2rem; border-radius: var(--rayon); background: var(--primaire-clair); border: 1px solid var(--bordure); }
.quiz .bilan strong { font-size: 1.15rem; }
.quiz .bilan .bouton { margin-top: .6rem; }

/* ---------- Exercices interactifs (cadre commun) ---------- */

.exercice {
  margin: 1.4rem 0; padding: 1rem 1.2rem 1.2rem;
  background: var(--carte); border: 2px solid var(--primaire); border-radius: var(--rayon);
  font-family: var(--police-interface); font-size: .92rem;
  transition: border-color var(--rapide);
}
.exercice > .titre-ex { --i: var(--ic-souris); font-weight: 700; margin: 0 0 .3rem; }
.exercice > .titre-ex::before { margin-right: .45em; color: var(--primaire-fonce); }
.exercice .consigne { margin: 0 0 .8rem; }
.exercice .retour { min-height: 1.6em; font-weight: 700; margin: .7rem 0 0; }
.exercice .retour.ok { color: var(--ok-fonce); }
.exercice .retour.ko { color: var(--ko-fonce); }
.exercice.reussi { border-color: var(--ok); }
.exercice.reussi > .titre-ex::after { content: " — réussi ✓"; color: var(--ok-fonce); }

/* ---------- Maquettes d'écran (schémas simplifiés, pas des captures) ---------- */

.maquette {
  margin: 1.4rem 0; padding: 1rem; background: var(--attenue); border: 1px solid var(--filet); border-radius: var(--rayon);
  font-family: var(--police-interface); font-size: .8rem; line-height: 1.45; overflow-x: auto;
}
.maquette > figcaption, figure.maquette figcaption { margin-top: .7rem; font-size: .8rem; color: var(--texte-2); }
figure { margin: 1.4rem 0; }
figcaption { font-size: .82rem; color: var(--texte-2); margin-top: .5rem; }

.fenetre { background: var(--carte); border: 1px solid var(--bordure-forte); border-radius: 8px; overflow: hidden; min-width: 18rem; }
.fenetre-titre { display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem; background: var(--attenue); border-bottom: 1px solid var(--filet); font-weight: 600; }
.fenetre-titre .boutons { margin-left: auto; display: flex; gap: 0; }
.fenetre-titre .boutons > span:not(.repere) { width: 2.2rem; text-align: center; padding: .1rem 0; border-radius: 4px; }
.fenetre-titre .boutons > span.fermer { background: var(--ko); color: var(--sur-ko); }
.fenetre-corps { padding: .8rem; min-height: 4rem; }
.ruban { display: flex; gap: .2rem; flex-wrap: wrap; padding: .3rem .5rem 0; background: var(--attenue); border-bottom: 1px solid var(--filet); }
.ruban .onglet { padding: .3rem .7rem; border-radius: 6px 6px 0 0; }
.ruban .onglet.actif { background: var(--carte); border: 1px solid var(--filet); border-bottom-color: var(--carte); margin-bottom: -1px; font-weight: 700; color: var(--primaire-fonce); }
.barre-taches { position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .45rem .8rem; background: var(--carte); border: 1px solid var(--bordure-forte); border-radius: 8px; }
.barre-taches .zone-droite { position: absolute; right: .8rem; display: flex; align-items: center; gap: .6rem; color: var(--texte-2); }
.barre-taches .zone-gauche { position: absolute; left: .8rem; display: flex; align-items: center; gap: .6rem; }
.icone { display: inline-flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 4.2rem; padding: .35rem .3rem; border-radius: 6px; text-align: center; font-size: .75rem; }
.icone .pic { font-size: 1.7rem; line-height: 1; }
.icone.choisie { background: var(--selection); outline: 1px solid var(--primaire); }
.menu-contextuel { display: inline-block; min-width: 11rem; background: var(--carte); border: 1px solid var(--bordure-forte); border-radius: 8px; padding: .3rem; }
.menu-contextuel div { padding: .3rem .7rem; border-radius: 5px; }
.menu-contextuel div.survol { background: var(--primaire-clair); }
.repere {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--accent-fonce); color: var(--carte); font: 700 .78rem var(--police-interface); vertical-align: middle;
}
.arbre { font-family: var(--police-code); font-size: .82rem; line-height: 1.55; white-space: pre; background: var(--carte); border: 1px solid var(--filet); border-radius: var(--rayon); padding: .9rem 1.1rem; overflow-x: auto; }

/* ---------- Pied de leçon ---------- */

.fin-lecon { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 2px solid var(--bordure); }
.fin-lecon .terminer { text-align: center; margin: 1.8rem 0; }
.fin-lecon .terminer p { font-size: .88rem; color: var(--texte-2); margin: .6rem 0 0; }
.nav-lecons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.nav-lecons a {
  display: block; padding: .9rem 1rem; min-height: 4.4rem; border: 2px solid var(--filet); border-radius: var(--rayon);
  background: var(--carte); text-decoration: none; color: var(--texte); font-weight: 600; line-height: 1.35;
}
.nav-lecons a:hover { border-color: var(--primaire); background: var(--primaire-clair); }
.nav-lecons a small { display: flex; align-items: center; gap: .35rem; margin-bottom: .2rem; color: var(--primaire-fonce); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.nav-lecons a.suivante { text-align: right; grid-column: 2; }
.nav-lecons a.suivante small { justify-content: flex-end; }
.nav-lecons a.suivante.mise-en-avant { background: var(--primaire-fonce); color: var(--sur-primaire); border-color: var(--primaire-fonce); }
.nav-lecons a.suivante.mise-en-avant small { color: inherit; }
.nav-lecons a.suivante.mise-en-avant:hover { background: var(--primaire-tres-fonce); border-color: var(--primaire-tres-fonce); }

/* ---------- Accueil ---------- */

/* bandeau de couleur sur toute la largeur de la fenêtre */
.hero {
  margin: -2.4rem 0 0; padding: 2.6rem 0 4.4rem;
  background: var(--bandeau); color: var(--sur-bandeau);
  box-shadow: 0 0 0 100vmax var(--bandeau); clip-path: inset(0 -100vmax);
}
.hero h1 { font-size: 2.6rem; margin-bottom: .8rem; }
.hero .surtitre { color: var(--sur-bandeau-2); }
.hero .chapeau { max-width: 42rem; color: var(--sur-bandeau-2); }

.reprise {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
  margin: -2.4rem 0 2.4rem; padding: 1.3rem 1.5rem;
  background: var(--carte); border: 2px solid var(--primaire); border-radius: var(--rayon);
}
.reprise .texte { flex: 1; min-width: 14rem; }
.reprise .texte strong { font-size: 1.1rem; }
.reprise .texte p { margin: 0; color: var(--texte-2); }
.reprise .jauge { width: 100%; height: .75rem; margin-top: .7rem; }

/* vue d'ensemble : une tuile par étape */
.grille-etapes { list-style: none; margin: 0 0 2.6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .7rem; }
.grille-etapes li { margin: 0; }
.grille-etapes a {
  display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: .8rem .9rem;
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  text-decoration: none; color: var(--texte); font-size: .84rem; line-height: 1.3;
}
.grille-etapes a:hover { border-color: var(--primaire); background: var(--primaire-clair); }
.grille-etapes .ic { width: 1.5rem; height: 1.5rem; color: var(--primaire-fonce); }
.grille-etapes small { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-2); }
.grille-etapes strong { flex: 1; }
.jauge-etape { display: block; width: 100%; height: .4rem; margin-top: .3rem; background: var(--attenue); border: 1px solid var(--bordure-forte); border-radius: 99px; overflow: hidden; }
.jauge-etape > span { display: block; height: 100%; background: var(--ok); }
.grille-etapes .compte { font-size: .74rem; font-weight: 600; color: var(--texte-2); }
.grille-etapes a.finie { border-color: var(--ok); }
.grille-etapes a.finie .compte { color: var(--ok-fonce); }

.etape { margin: 0 0 1.6rem; padding: 1.2rem 1.3rem 1.3rem; background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); }
.etape > h2 { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: 0 0 .3rem; padding: 0; background: none; font-size: 1.3rem; }
.etape > h2 .boite { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 8px; background: var(--primaire-clair); color: var(--primaire-fonce); }
.etape > h2 .boite .ic { width: 1.35rem; height: 1.35rem; vertical-align: 0; }
.etape > h2 .compte { margin-left: auto; font: 600 .8rem var(--police-interface); color: var(--texte-2); }
.etape > p.resume { color: var(--texte-2); margin: 0 0 .8rem; font-size: .95rem; }
ol.liste-lecons { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--filet); }
ol.liste-lecons li { margin: 0; border-bottom: 1px solid var(--filet); }
ol.liste-lecons a {
  display: flex; align-items: center; gap: .9rem; min-height: 3rem; padding: .45rem .6rem;
  text-decoration: none; color: var(--texte); font-size: .95rem; line-height: 1.35; border-radius: var(--rayon-petit);
}
ol.liste-lecons a:hover { background: var(--primaire-clair); }
ol.liste-lecons .pastille { flex: none; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--bordure-forte); font: 700 .8rem/calc(2rem - 4px) var(--police-interface); text-align: center; color: var(--texte-2); }
ol.liste-lecons li.terminee .pastille { background: var(--ok); border-color: var(--ok); color: var(--sur-ok); }
ol.liste-lecons li.prochaine a { background: var(--primaire-clair); font-weight: 700; }
ol.liste-lecons li.prochaine .pastille { border-color: var(--primaire-fonce); color: var(--primaire-fonce); background: var(--carte); }
ol.liste-lecons .t { flex: 1; }
ol.liste-lecons .etat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--primaire-fonce); white-space: nowrap; }
ol.liste-lecons li.terminee .etat { color: var(--ok-fonce); }
ol.liste-lecons .d { color: var(--texte-2); font-size: .8rem; font-weight: 400; white-space: nowrap; }

.grille-fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; }
.grille-fiches a { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-items: start; padding: 1rem; background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon); text-decoration: none; color: var(--texte); line-height: 1.35; }
.grille-fiches a:hover { border-color: var(--primaire); background: var(--primaire-clair); }
.grille-fiches a .ic { grid-row: span 2; width: 1.5rem; height: 1.5rem; margin-top: .1rem; color: var(--primaire-fonce); }
.grille-fiches a strong { display: block; }
.grille-fiches a span.r { font-size: .84rem; color: var(--texte-2); }

.pied-accueil { margin: 2.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--filet); font-size: .82rem; color: var(--texte-2); text-align: center; }

/* ---------- Fiches de référence ---------- */

body.fiche main { max-width: 60rem; }
.fiche-entete { display: flex; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; border-bottom: 3px solid var(--primaire); padding-bottom: .7rem; margin-bottom: 1.4rem; }
.fiche-entete h1 { margin: 0; font-size: 1.9rem; }
.fiche-entete p { margin: 0; color: var(--texte-2); font-size: .9rem; flex: 1; min-width: 14rem; }
.colonnes { columns: 2 22rem; column-gap: 1.6rem; }
.colonnes > * { break-inside: avoid; }
.carte { break-inside: avoid; margin: 0 0 1.2rem; padding: .9rem 1.1rem; background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); }
.carte > h2, .carte > h3 { margin: 0 0 .5rem; padding: 0; background: none; font-size: 1.05rem; color: var(--primaire-fonce); }
.carte table { margin: 0; font-size: .84rem; }
.carte table + p, .carte table + ul { margin-top: .7rem; }
.carte > :last-child { margin-bottom: 0; }
.carte > p, .carte > ul, .carte > ol { font-size: .88rem; line-height: 1.5; }
td code, th code, .carte code { white-space: normal; overflow-wrap: anywhere; }
dl.glossaire { margin: 0; font-size: .92rem; line-height: 1.5; }
dl.glossaire dt { font-weight: 700; margin-top: 1rem; scroll-margin-top: 4rem; }
dl.glossaire dd { margin: .1rem 0 0; }
dl.glossaire dd.eviter { font-size: .8rem; color: var(--texte-2); font-style: italic; }
dl.glossaire dt:target { background: var(--surlignage); outline: 4px solid var(--surlignage); border-radius: 2px; }
.imprimer-fiche { margin-left: auto; }

/* ---------- Petits écrans ---------- */

@media (max-width: 640px) {
  html { font-size: 106.25%; }
  h1 { font-size: 1.7rem; }
  .hero h1 { font-size: 1.9rem; }
  .barre-haut .ou { display: none; }
  .barre-haut .avancement { margin-left: auto; }
  .nav-lecons { grid-template-columns: 1fr; }
  .nav-lecons a.suivante { grid-column: 1; }
  ol.liste-lecons .etat { display: none; }
  .quiz button.choix-btn.juste::after, .quiz button.choix-btn.faux::after { float: none; display: block; margin: .2rem 0 0; }
}

/* ---------- Animations réduites sur demande (réglage de Windows) ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ---------- Impression (toujours en clair, sur A4) ---------- */

@media print {
  html { font-size: 11pt; }
  body { background: #fff; }
  .barre-haut, .evitement, .sommaire-lecon, .fin-lecon, .bouton, .imprimer-fiche, .bloc.professeur, .auto-eval, label.coche, .etapes-bilan { display: none !important; }
  .page-lecon { display: block; padding: 0; }
  main, body.fiche main, main.large { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  h2 { margin-top: 1.6rem; }
  .bloc, .carte, .quiz .question, ol.etapes > li, details.rappel, .maquette, .exercice { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  .carte { border-color: #64748B; margin-bottom: .8rem; padding: .6rem .8rem; }
  .colonnes { column-gap: 1.2rem; }
  details.rappel > .reponse { display: block; }
  details.rappel > summary::after { content: none; }
  .exercice { border-width: 1px; }
  .hero { box-shadow: none; clip-path: none; background: none; color: inherit; margin: 0; padding: 0 0 1rem; }
  .hero .chapeau, .hero .surtitre { color: inherit; }
  .reprise { margin-top: 0; }
  @page { size: A4; margin: 14mm; }
}

/* Les ancres ne se cachent pas sous la barre du haut (elle reste collée en haut de l'écran). */
html { scroll-padding-top: 4rem; }
[id] { scroll-margin-top: 4rem; }