/* EVM Logistique — feuille de style principale */
:root {
    --bleu: #0a6ebd;
    --bleu-f: #08548f;
    --rouge: #d62f5b;
    --vert: #1f9d55;
    --orange: #e8771e;
    --jaune: #f5b800;
    --violet: #5b3fb5;
    --nuit: #0f2133;
    --nuit-2: #17314b;
    --fond: #f3f6f9;
    --carte: #ffffff;
    --texte: #1c2b39;
    --doux: #5e7183;
    --bord: #dfe6ed;
    --rayon: 12px;
    --ombre: 0 1px 2px rgba(15, 33, 51, .06), 0 4px 14px rgba(15, 33, 51, .06);
    --police: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--police); font-size: 15px; line-height: 1.55; color: var(--texte); background: var(--fond); }
body.sans-defil { overflow: hidden; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; }
code { background: #eef2f6; padding: 1px 6px; border-radius: 4px; font-size: .9em; }
small { color: var(--doux); }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border: 1px solid transparent; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none !important; transition: background .15s, border-color .15s, transform .05s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primaire { background: var(--bleu); color: #fff; }
.btn-primaire:hover { background: var(--bleu-f); }
.btn-secondaire { background: #fff; color: var(--texte); border-color: var(--bord); }
.btn-secondaire:hover { border-color: var(--bleu); color: var(--bleu); }
.btn-fantome { background: transparent; color: var(--doux); border-color: var(--bord); }
.btn-fantome:hover { color: var(--texte); background: #eef2f6; }
.btn-danger { background: var(--rouge); color: #fff; }
.btn-danger:hover { background: #b8234a; }
.btn-succes { background: var(--vert); color: #fff; }
.btn-succes:hover { background: #187e44; }
.btn-mini { padding: 5px 10px; font-size: 13px; background: #fff; border-color: var(--bord); color: var(--texte); }
.btn-mini.btn-danger { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.btn-mini.btn-succes { background: var(--vert); color: #fff; border-color: var(--vert); }
.bloc { width: 100%; }
.en-ligne { display: inline; }

/* ---------- Authentification ---------- */
.page-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: radial-gradient(circle at 15% 10%, #e7f1fb 0, transparent 45%), radial-gradient(circle at 90% 90%, #fdeee4 0, transparent 40%), var(--fond); }
.auth-carte { width: 100%; max-width: 420px; background: var(--carte); border-radius: 16px; padding: 32px 28px; box-shadow: var(--ombre); }
.auth-carte.large { max-width: 680px; }
.auth-entete { text-align: center; margin-bottom: 22px; }
.auth-logo { width: 150px; height: auto; }
.auth-entete h1 { font-size: 24px; margin: 8px 0 2px; color: var(--nuit); }
.slogan { margin: 0; color: var(--doux); font-weight: 500; }
.note-auth { text-align: center; color: var(--doux); font-size: 13px; margin: 16px 0 0; }
.pied-auth { text-align: center; color: var(--doux); font-size: 12px; margin: 18px 0 0; }
.liste-prerequis { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 4px; }
.liste-prerequis li span { display: inline-block; width: 20px; font-weight: 700; }
.liste-prerequis .ok span { color: var(--vert); }
.liste-prerequis .ko { color: var(--rouge); }

/* ---------- Formulaires ---------- */
.formulaire { display: grid; gap: 14px; }
.formulaire label { display: grid; gap: 5px; font-weight: 600; font-size: 14px; }
.formulaire label.case { display: flex; align-items: center; gap: 8px; font-weight: 500; align-self: end; padding-bottom: 10px; }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 8px; font: inherit; font-weight: 400; color: var(--texte); background: #fff; transition: border-color .15s, box-shadow .15s; }
input[type=checkbox], input[type=radio] { width: auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(10, 110, 189, .15); }
.invalide { border-color: var(--rouge) !important; box-shadow: 0 0 0 3px rgba(214, 47, 91, .12) !important; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grille-2 .pleine { grid-column: 1 / -1; }
.titre-section { font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--bleu); margin: 10px 0 0; padding-bottom: 6px; border-bottom: 1px solid var(--bord); }
.champ-mdp { display: flex; gap: 8px; }
.actions-form { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

.bloc-info { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; border-left: 4px solid var(--bleu); background: #eaf3fb; }
.bloc-info.succes { border-color: var(--vert); background: #e8f6ee; }
.bloc-info.danger { border-color: var(--rouge); background: #fdebf0; }
.bloc-info.alerte { border-color: var(--jaune); background: #fff8e1; }

/* ---------- Structure application ---------- */
.app { display: flex; min-height: 100vh; }
.barre-laterale { width: 260px; flex-shrink: 0; background: var(--nuit); color: #c9d6e2; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 30; }
.marque { display: flex; align-items: center; gap: 10px; padding: 18px 16px; color: #fff !important; text-decoration: none !important; border-bottom: 1px solid rgba(255,255,255,.08); }
.marque img { width: 56px; height: auto; }
.marque strong { display: block; font-size: 16px; }
.marque small { display: block; color: #8fa6bb; font-size: 12px; }
.menu { flex: 1; padding: 14px 10px; display: grid; gap: 2px; align-content: start; overflow-y: auto; }
.menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: #c9d6e2; font-weight: 500; text-decoration: none; }
.menu a svg { width: 19px; height: 19px; fill: currentColor; opacity: .85; }
.menu a:hover { background: var(--nuit-2); color: #fff; }
.menu a.actif { background: var(--bleu); color: #fff; }
.menu-pied { padding: 14px; border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: 10px; }
.menu-pied .btn-fantome { color: #c9d6e2; border-color: rgba(255,255,255,.15); }
.menu-pied .btn-fantome:hover { background: var(--nuit-2); color: #fff; }
.moi { display: flex; align-items: center; gap: 10px; }
.moi strong { display: block; color: #fff; font-size: 14px; }
.moi small { color: #8fa6bb; font-size: 12px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--bleu), var(--violet)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.avatar.grand { width: 64px; height: 64px; font-size: 22px; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bandeau { display: flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--carte); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 20; }
.bandeau h1 { font-size: 20px; margin: 0; color: var(--nuit); }
.btn-menu { display: none; background: none; border: 0; padding: 6px; cursor: pointer; }
.btn-menu span { display: block; width: 22px; height: 2px; background: var(--nuit); margin: 4px 0; border-radius: 2px; }
.contenu { flex: 1; padding: 24px 28px; display: grid; gap: 20px; align-content: start; }
.pied { padding: 16px 28px; color: var(--doux); font-size: 12px; text-align: center; }
.voile { display: none; }

/* ---------- Cartes ---------- */
.carte { background: var(--carte); border-radius: var(--rayon); padding: 20px 22px; box-shadow: var(--ombre); min-width: 0; }
.carte > h2 { font-size: 17px; color: var(--nuit); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.carte > h2 small { font-weight: 400; font-size: 13px; }
.carte.etroite { max-width: 820px; }
.lien-droite { margin-left: auto; font-size: 13px; font-weight: 500; }
.grille-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grille-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.carte-stat { background: var(--carte); border-radius: var(--rayon); padding: 16px 18px; box-shadow: var(--ombre); border-top: 4px solid var(--bleu); }
.carte-stat:nth-child(2) { border-top-color: var(--vert); }
.carte-stat:nth-child(3) { border-top-color: var(--orange); }
.carte-stat:nth-child(4) { border-top-color: var(--rouge); }
.carte-stat .lib { display: block; font-size: 13px; color: var(--doux); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.carte-stat strong { display: block; font-size: 28px; color: var(--nuit); margin: 2px 0; }
.vide { color: var(--doux); font-style: italic; margin: 0; }
.note { color: var(--doux); font-size: 13px; }
.compteur { color: var(--doux); font-size: 13px; margin: 4px 0 10px; }

/* ---------- Tableaux ---------- */
.table-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--doux); padding: 10px; border-bottom: 2px solid var(--bord); white-space: nowrap; }
.tableau td { padding: 10px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau tbody tr:hover { background: #f7fafc; }
.tableau .droite { text-align: right; }
.tableau .actions { white-space: nowrap; }
.tableau .actions > * { margin-left: 4px; }
.ligne-inactive td { opacity: .6; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; background: #eef2f6; color: var(--doux); white-space: nowrap; }
.badge.vert { background: #e3f4ea; color: #157040; }
.badge.rouge { background: #fce4eb; color: #a81e43; }
.badge.orange { background: #fdeedf; color: #a4520f; }
.badge.bleu { background: #e3effa; color: var(--bleu-f); }
.badge.violet { background: #ece7f8; color: var(--violet); }
.badge.gris { background: #eceff2; color: #67788a; }
.pastille { display: inline-block; min-width: 34px; text-align: center; padding: 2px 6px; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 700; margin-right: 6px; }

.jauge { display: inline-block; width: 80px; height: 8px; background: #e7ecf1; border-radius: 5px; overflow: hidden; vertical-align: middle; }
.jauge.large { width: 140px; }
.jauge i { display: block; height: 100%; background: var(--bleu); border-radius: 5px; }

/* ---------- Outils & filtres ---------- */
.barre-outils { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtres input, .filtres select { width: auto; min-width: 150px; padding: 8px 10px; }
.mini-lib { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--doux); }
.pagination { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.pagination a { padding: 5px 11px; border: 1px solid var(--bord); border-radius: 6px; color: var(--texte); }
.pagination a.actif { background: var(--bleu); color: #fff; border-color: var(--bleu); }

/* ---------- Histogramme ---------- */
.histo { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding-top: 10px; }
.histo-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.histo-barre { width: 100%; max-width: 30px; background: linear-gradient(180deg, var(--bleu), #4aa3e6); border-radius: 4px 4px 0 0; min-height: 2px; }
.histo-val { font-size: 11px; font-weight: 700; color: var(--doux); }
.histo-lib { font-size: 10px; color: var(--doux); margin-top: 4px; white-space: nowrap; }
.liste-barres { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.liste-barres li { display: grid; grid-template-columns: 1fr 120px 30px; align-items: center; gap: 10px; font-size: 14px; }
.liste-barres .jauge { width: 100%; }
.liste-barres b { text-align: right; }
.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--bord); font-size: 14px; }
.liste-simple li span { color: var(--doux); font-size: 13px; }

/* ---------- Flux d'activité ---------- */
.flux { list-style: none; margin: 0; padding: 0; }
.flux li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--bord); font-size: 14px; }
.flux li:last-child { border-bottom: 0; }
.flux-txt { flex: 1; min-width: 0; }
.flux-date { color: var(--doux); font-size: 12px; white-space: nowrap; }
.flux-type { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--doux); flex-shrink: 0; }
.t-connexion { background: var(--vert); }
.t-deconnexion { background: #9aa9b7; }
.t-connexion_echec, .t-connexion_bloquee, .t-user_desactivation { background: var(--rouge); }
.t-user_creation, .t-user_activation { background: var(--bleu); }
.t-user_modification, .t-mot_de_passe { background: var(--violet); }
.t-lecon_terminee { background: var(--jaune); }
.t-quiz, .t-simulation { background: var(--orange); }
.t-attestation, .t-installation { background: var(--nuit); }

/* ---------- Fiche utilisateur ---------- */
.fiche-tete { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.fiche-tete > div:nth-child(2) { flex: 1; min-width: 220px; }
.fiche-tete h2 { font-size: 20px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.fiche-tete p { margin: 2px 0; }
.fiche-actions { display: flex; gap: 8px; }
.infos { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; margin: 0; }
.infos dt { color: var(--doux); font-weight: 600; font-size: 14px; }
.infos dd { margin: 0; }

/* ---------- Espace apprenant ---------- */
.accueil-banniere { display: flex; gap: 24px; align-items: center; justify-content: space-between; background: linear-gradient(120deg, #0f2133, #17406a); color: #e8f0f7; }
.accueil-banniere h2 { color: #fff; font-size: 22px; }
.accueil-banniere > div:first-child { min-width: 0; }
.accueil-banniere p { max-width: 680px; }
.accueil-banniere .btn { white-space: normal; text-align: left; max-width: 100%; }
.anneau { --p: 0; width: 130px; height: 130px; border-radius: 50%; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(closest-side, #17345a 78%, transparent 79% 100%), conic-gradient(var(--jaune) calc(var(--p) * 1%), rgba(255,255,255,.15) 0); }
.anneau span { font-size: 26px; font-weight: 800; color: #fff; }
.anneau small { color: #b7c8d8; font-size: 12px; }
.grille-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.carte-module { --c: var(--bleu); background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px 20px; display: flex; flex-direction: column; border-top: 5px solid var(--c); }
.carte-module header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.carte-module .code { background: var(--c); color: #fff; font-weight: 800; padding: 2px 10px; border-radius: 6px; font-size: 13px; }
.carte-module .duree { color: var(--doux); font-size: 13px; font-weight: 600; }
.carte-module h3 { font-size: 17px; color: var(--nuit); }
.carte-module p { margin: 0 0 10px; font-size: 14px; color: #3c4e60; }
.carte-module .metiers { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--doux); }
.carte-module .metiers svg { width: 15px; height: 15px; fill: var(--c); flex-shrink: 0; margin-top: 2px; }
.carte-module footer { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.carte-module footer .jauge { flex: 1; }
.carte-module footer .jauge i { background: var(--c); }

/* ---------- Modales ---------- */
.modale-fond { position: fixed; inset: 0; background: rgba(15, 33, 51, .55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 1000; opacity: 0; transition: opacity .18s; }
.modale-fond.visible { opacity: 1; }
.modale { background: #fff; border-radius: 14px; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.25); transform: translateY(12px) scale(.98); transition: transform .18s; border-top: 5px solid var(--bleu); }
.modale-large { max-width: 760px; }
.modale-fond.visible .modale { transform: none; }
.modale-succes { border-top-color: var(--vert); }
.modale-erreur { border-top-color: var(--rouge); }
.modale-question { border-top-color: var(--orange); }
.modale-tete { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px; }
.modale-tete h3 { margin: 0; font-size: 17px; flex: 1; }
.modale-ico svg { width: 26px; height: 26px; fill: var(--bleu); display: block; }
.modale-succes .modale-ico svg { fill: var(--vert); }
.modale-erreur .modale-ico svg { fill: var(--rouge); }
.modale-question .modale-ico svg { fill: var(--orange); }
.modale-fermer { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--doux); cursor: pointer; padding: 0 4px; }
.modale-corps { padding: 6px 18px 4px 54px; overflow-y: auto; }
.modale-corps p { margin: 0 0 8px; }
.modale-corps ul { margin: 0; padding-left: 18px; }
.modale-corps li { margin-bottom: 4px; }
.modale-pied { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 16px; }


/* ================= FORMATION ================= */
.fil { font-size: 13px; color: var(--doux); margin-bottom: -6px; }
.fil a { color: var(--doux); }
.fil span { color: var(--texte); font-weight: 600; }
.entete-module { --c: var(--bleu); display: flex; justify-content: space-between; gap: 20px; align-items: center; border-left: 6px solid var(--c); }
.entete-module h2 { font-size: 22px; margin: 6px 0; color: var(--nuit); }
.entete-module p { margin: 0 0 6px; color: #3c4e60; }
.code-module { background: var(--c); color: #fff; font-weight: 800; padding: 2px 10px; border-radius: 6px; font-size: 13px; }
.meta-module { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--doux) !important; }
.anneau.petit { width: 96px; height: 96px; background: radial-gradient(closest-side, #fff 76%, transparent 77% 100%), conic-gradient(var(--vert) calc(var(--p) * 1%), #e7ecf1 0); }
.anneau.petit span { color: var(--nuit); font-size: 20px; }
.anneau.petit small { color: var(--doux); }

.parcours { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.parcours li { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--bord); }
.parcours li:last-child { border-bottom: 0; }
.parcours .puce { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: #e7ecf1; color: var(--doux); flex-shrink: 0; }
.parcours li.faite .puce { background: var(--vert); color: #fff; }
.parcours li.ouverte .puce { background: var(--bleu); color: #fff; }
.parcours-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.parcours-txt a, .parcours-txt > span { font-weight: 600; }
.parcours li.verrou .parcours-txt > span { color: var(--doux); }
.cadenas { font-size: 16px; }
.bloc-quiz { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: linear-gradient(120deg, #fff 60%, #eaf3fb); }
.bloc-quiz p { margin: 0 0 4px; }
.nav-modules { display: flex; justify-content: space-between; }
.actions-ligne { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* Leçon */
.mise-lecon { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.lecon { --c: var(--bleu); border-top: 5px solid var(--c); padding: 24px 30px; }
.lecon-tete { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--bord); }
.lecon-tete h2 { width: 100%; font-size: 24px; color: var(--nuit); margin: 6px 0 0; }
.lecon-tete .duree { font-size: 13px; color: var(--doux); font-weight: 600; }
.lecon-pied { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--bord); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lecon-pied form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.lecon-pied .note { margin: 0; }
.sommaire { position: sticky; top: 84px; padding: 16px; }
.sommaire h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .03em; color: var(--doux); }
.sommaire ol { margin: 0 0 12px; padding-left: 20px; font-size: 14px; display: grid; gap: 6px; }
.sommaire li.courante > a { font-weight: 700; color: var(--nuit); }
.sommaire li.faite::marker { color: var(--vert); font-weight: 700; }
.sommaire li span { color: var(--doux); }
.sommaire-nav { display: flex; gap: 6px; flex-wrap: wrap; }

/* Parcours personnalisé et fil rouge */
.badge-prio { background: var(--jaune); color: #4a3800; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin: 0 auto 0 8px; }
.parcours-metier { background: rgba(255,255,255,.1); border-radius: 8px; padding: 8px 12px; }
.fil-rouge { border-left: 6px solid var(--orange); background: linear-gradient(120deg, #fff 60%, #fdf0e4); }
.fil-rouge h2 { color: var(--orange) !important; font-size: 15px !important; text-transform: uppercase; letter-spacing: .04em; }
.fil-rouge p { margin: 0; }

.dossier-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.dossier-tete p { margin: 2px 0; }

/* Objectifs et synthèse */
.bloc-objectifs { background: #f3f6f9; border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; border-left: 4px solid var(--c, var(--bleu)); }
.bloc-objectifs h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--nuit); margin: 0 0 6px; }
.bloc-objectifs ul { margin: 0 0 8px; padding-left: 20px; }
.bloc-objectifs li { margin-bottom: 2px; }
.prerequis { margin: 0; font-size: 13px; color: var(--doux); }
.bloc-synthese { margin-top: 22px; padding: 14px 16px; border-radius: 10px; background: #efeafb; border-left: 4px solid var(--violet); }
.bloc-synthese p { margin: 0 0 6px; }
.bloc-synthese p:last-child { margin: 0; }

/* Contenu pédagogique */
.contenu-lecon { font-size: 15.5px; line-height: 1.7; }
.contenu-lecon h3 { font-size: 19px; color: var(--nuit); margin: 28px 0 10px; padding-left: 10px; border-left: 4px solid var(--c, var(--bleu)); }
.contenu-lecon h4 { font-size: 16px; color: var(--bleu-f); margin: 20px 0 8px; }
.contenu-lecon p { margin: 0 0 12px; }
.contenu-lecon ul, .contenu-lecon ol { margin: 0 0 14px; padding-left: 22px; }
.contenu-lecon li { margin-bottom: 4px; }
.contenu-lecon table { width: 100%; border-collapse: collapse; margin: 10px 0 18px; font-size: 14px; display: block; overflow-x: auto; }
.contenu-lecon table thead, .contenu-lecon table tbody { display: table; width: 100%; border-collapse: collapse; }
.contenu-lecon th { background: var(--nuit); color: #fff; text-align: left; padding: 8px 10px; font-weight: 600; }
.contenu-lecon td { border: 1px solid var(--bord); padding: 7px 10px; }
.contenu-lecon tbody tr:nth-child(even) td { background: #f7fafc; }
.contenu-lecon td.n, .contenu-lecon th.n { text-align: right; white-space: nowrap; }
.contenu-lecon tr.total td { font-weight: 700; background: #eaf3fb !important; }
.contenu-lecon .formule { font-family: Consolas, "Courier New", monospace; background: #0f2133; color: #e8f0f7; padding: 10px 14px; border-radius: 8px; overflow-x: auto; margin: 8px 0 14px; white-space: pre-wrap; }
.contenu-lecon kbd { background: #eef2f6; border: 1px solid var(--bord); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: .88em; }
.encadre { border-radius: 10px; padding: 14px 16px 6px; margin: 14px 0 18px; border-left: 5px solid var(--bleu); background: #eaf3fb; }
.encadre > strong:first-child, .encadre .titre-encadre { display: block; margin-bottom: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.encadre.exemple { border-color: var(--vert); background: #e8f6ee; }
.encadre.attention { border-color: var(--rouge); background: #fdebf0; }
.encadre.astuce { border-color: var(--jaune); background: #fff8e1; }
.encadre.retenir { border-color: var(--violet); background: #efeafb; }
.encadre.terrain { border-color: var(--orange); background: #fdf0e4; }
.contenu-lecon details { border: 1px solid var(--bord); border-radius: 8px; padding: 10px 14px; margin: 10px 0 16px; background: #fcfdfe; }
.contenu-lecon details summary { cursor: pointer; font-weight: 700; color: var(--bleu); }
.contenu-lecon details[open] summary { margin-bottom: 8px; }
.etapes { counter-reset: etape; list-style: none; padding-left: 0 !important; }
.etapes > li { counter-increment: etape; position: relative; padding: 4px 0 8px 42px; }
.etapes > li::before { content: counter(etape); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%; background: var(--c, var(--bleu)); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* Exercices intégrés */
.exercice { border: 2px dashed #b9cde0; border-radius: 10px; padding: 14px 16px; margin: 16px 0; background: #fbfdff; }
.exercice::before { content: "✎ Exercice"; display: block; font-weight: 700; color: var(--bleu); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.exercice-ligne { display: flex; gap: 8px; max-width: 420px; }
.exercice-choix { list-style: none; padding: 0 !important; display: grid; gap: 6px; }
.exercice-choix li { border: 1px solid var(--bord); border-radius: 8px; padding: 8px 12px; cursor: pointer; background: #fff; }
.exercice-choix li:hover { border-color: var(--bleu); }
.exercice-retour { margin-top: 8px; font-weight: 600; font-size: 14px; }
.exercice-retour.ok { color: #157040; }
.exercice-retour.ko { color: #a81e43; }
.exercice-aide { margin-top: 8px; padding: 10px 12px; background: #f3f6f9; border-radius: 8px; font-size: 14px; }
input.juste, li.juste { border-color: var(--vert) !important; background: #e8f6ee !important; }
input.faux, li.faux { border-color: var(--rouge) !important; background: #fdebf0 !important; }

/* Zone de simulation */
.zone-simulation { margin-top: 24px; border: 2px solid var(--orange); border-radius: 12px; padding: 18px; background: #fffaf5; }
.zone-simulation::before { content: "▶ Simulation interactive"; display: block; font-weight: 800; color: var(--orange); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; margin-bottom: 10px; }
.sim-consigne { background: #fff; border-radius: 8px; padding: 12px 14px; border: 1px solid #f2dcc6; margin-bottom: 14px; }
.sim-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.sim-grille label { display: grid; gap: 4px; font-weight: 600; font-size: 13.5px; }
.sim-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: #fff; }
.sim-table th { background: var(--nuit); color: #fff; padding: 7px 8px; text-align: left; font-weight: 600; white-space: nowrap; }
.sim-table td { border: 1px solid var(--bord); padding: 4px 6px; }
.sim-table td input, .sim-table td select { padding: 6px 8px; min-width: 80px; }
.sim-table td.n { text-align: right; white-space: nowrap; }
.sim-table td.fixe { background: #f3f6f9; }
.sim-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 14px; }
.sim-doc { background: #fff; border: 1px solid #c9d3dd; border-radius: 4px; padding: 18px; font-family: "Courier New", monospace; font-size: 13px; }
.bilan-sim { text-align: center; padding: 6px 0 12px; }
.bilan-score { font-size: 28px; font-weight: 800; margin: 0; }
.bilan-score span { font-size: 18px; color: var(--doux); }
.bilan-sim.ok .bilan-score { color: var(--vert); }
.bilan-sim.moyen .bilan-score { color: var(--orange); }
.bilan-sim.ko .bilan-score { color: var(--rouge); }
.correction-sim { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.correction-sim th, .correction-sim td { border: 1px solid var(--bord); padding: 5px 8px; text-align: left; }
.correction-sim th { background: #f3f6f9; }
.correction-sim .ok { color: #157040; font-weight: 700; }
.correction-sim .ko { color: #a81e43; font-weight: 700; }

/* Productions écrites */
.production { border: 2px solid var(--violet); border-radius: 12px; padding: 16px; margin: 18px 0; background: #faf8ff; }
.production::before { content: "✍ Production écrite — " attr(data-titre); display: block; font-weight: 800; color: var(--violet); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.production-saisie { display: grid; gap: 10px; margin: 10px 0; }
.production-saisie > label { font-weight: 600; font-size: 14px; }
.production-saisie textarea { min-height: 130px; resize: vertical; }
.production-grille { border: 1px solid var(--bord); border-radius: 8px; padding: 10px 12px; margin: 0; display: grid; gap: 6px; background: #fff; }
.production-grille legend { font-weight: 700; font-size: 13px; padding: 0 4px; }
.production-grille label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.production-grille input { margin-top: 4px; }
.production-corrige { border-top: 1px dashed #c9bfe8; padding-top: 10px; margin-top: 6px; }

.production-admin { border-top: 1px solid var(--bord); padding: 10px 0; }
.production-admin h3 { font-size: 15px; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.production-admin p { margin: 0; white-space: normal; }

/* Mode guidé */
.guide-sim { margin-top: 22px; border: 1px solid #f2dcc6; border-radius: 12px; padding: 14px 16px; background: #fff; }
.guide-tete { color: var(--orange); margin-bottom: 6px; }
.guide-etapes { margin: 0 0 8px; padding-left: 22px; display: grid; gap: 6px; font-size: 14.5px; }
.guide-etapes:empty { display: none; }
.guide-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.guide-sim + .zone-simulation { margin-top: 12px; }

/* Quiz */
.liste-quiz { padding-left: 22px; display: grid; gap: 16px; }
.liste-quiz > li { padding: 14px 16px; border: 1px solid var(--bord); border-radius: 10px; background: #fff; }
.liste-quiz > li.repondue { border-color: #9cc7ea; background: #f7fbff; }
.liste-quiz .question { font-weight: 600; margin: 0 0 10px; }
.liste-quiz .choix { display: grid; gap: 6px; list-style: none; padding: 0; margin: 0; }
.liste-quiz .choix label { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-weight: 400; }
.liste-quiz .choix label:hover { background: #f3f6f9; }
.liste-quiz .choix label input { margin-top: 4px; }
.liste-quiz .choix label:has(input:checked) { border-color: var(--bleu); background: #eaf3fb; }
.correction > li.juste { border-left: 5px solid var(--vert); }
.correction > li.faux { border-left: 5px solid var(--rouge); }
.correction .choix li { padding: 6px 10px; border-radius: 6px; }
.correction .choix li.bonne { background: #e3f4ea; color: #157040; font-weight: 600; }
.correction .choix li.mauvaise { background: #fce4eb; color: #a81e43; text-decoration: line-through; }
.explication { margin-top: 10px; padding: 10px 12px; background: #f3f6f9; border-radius: 8px; font-size: 14px; }
.barre-quiz { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #fff; padding: 12px 0; border-top: 1px solid var(--bord); margin-top: 16px; }
.resultat-quiz { display: flex; gap: 20px; align-items: center; border-left: 6px solid var(--rouge); }
.resultat-quiz.reussi { border-left-color: var(--vert); }
.resultat-quiz p { margin: 0; }

/* Attestation */
.attestation-etat { display: flex; gap: 22px; align-items: flex-start; }
.medaille { font-size: 56px; line-height: 1; }
.medaille.gris { filter: grayscale(1); opacity: .6; }
.liste-manques { margin: 0; padding-left: 20px; color: #a81e43; }
.attestation-etat h3 { font-size: 15px; margin-top: 14px; }

@media (max-width: 1100px) {
    .mise-lecon { grid-template-columns: 1fr; }
    .sommaire { position: static; }
}
@media (max-width: 560px) {
    .lecon { padding: 18px 16px; }
    .lecon-tete h2 { font-size: 20px; }
    .entete-module, .resultat-quiz, .attestation-etat { flex-direction: column; align-items: flex-start; }
    .exercice-ligne { flex-direction: column; }
    .zone-simulation { padding: 12px; }
}


/* Glossaire */
.terme { background: none; border: 0; padding: 0; font: inherit; color: inherit; border-bottom: 1px dotted var(--bleu); cursor: help; }
.terme:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.bulle-terme { position: absolute; z-index: 900; max-width: 320px; background: var(--nuit); color: #fff; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.bulle-terme [lang="ar"] { display: inline-block; margin-top: 4px; font-size: 15px; color: #f5d77a; }

/* Retour juste / faux : icône en plus de la couleur (WCAG 1.4.1) */
input.juste, select.juste { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23157040' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 6px center !important; background-size: 16px !important; padding-right: 26px !important; }
input.faux, select.faux { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a81e43' d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 6px center !important; background-size: 16px !important; padding-right: 26px !important; }
li.juste::after { content: " ✔"; color: #157040; font-weight: 700; }
li.faux::after { content: " ✖"; color: #a81e43; font-weight: 700; }

/* Simulations sur téléphone : chaque ligne devient une carte */
@media (max-width: 560px) {
    .zone-simulation .table-defile { overflow: visible; }
    .zone-simulation .sim-table thead { display: none; }
    .zone-simulation .sim-table, .zone-simulation .sim-table tbody { display: block; width: 100%; }
    .zone-simulation .sim-table tr { display: block; border: 1px solid var(--bord); border-radius: 10px; margin-bottom: 10px; padding: 6px 10px; background: #fff; }
    .zone-simulation .sim-table td { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid #eef2f6; padding: 6px 0; text-align: right; }
    .zone-simulation .sim-table td:last-child { border-bottom: 0; }
    .zone-simulation .sim-table td::before { content: attr(data-label); font-weight: 600; color: var(--doux); font-size: 12.5px; text-align: left; flex: 0 0 42%; }
    .zone-simulation .sim-table td:first-child { font-weight: 700; color: var(--nuit); }
    .zone-simulation .sim-table td:empty, .zone-simulation .sim-table td.fixe:empty { display: none; }
    .zone-simulation .sim-table td input, .zone-simulation .sim-table td select { min-width: 0 !important; flex: 1 1 55%; max-width: 58%; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .grille-stats { grid-template-columns: repeat(2, 1fr); }
    .grille-2col { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .barre-laterale { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .22s; }
    .barre-laterale.ouvert { transform: none; }
    .voile { position: fixed; inset: 0; background: rgba(15,33,51,.45); z-index: 25; }
    .voile.visible { display: block; }
    .btn-menu { display: block; }
    .bandeau { padding: 12px 16px; }
    .bandeau h1 { font-size: 17px; }
    .contenu { padding: 16px; gap: 16px; }
    .carte { padding: 16px; }
    .accueil-banniere { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
    .grille-2, .grille-stats { grid-template-columns: 1fr; }
    .filtres input, .filtres select { min-width: 0; flex: 1 1 140px; }
    .barre-outils > .btn { width: 100%; }
    .infos { grid-template-columns: 1fr; }
    .liste-barres li { grid-template-columns: 1fr 80px 26px; }
    .modale-corps { padding-left: 18px; }
    .champ-mdp { flex-direction: column; }
}
@media print {
    .barre-laterale, .bandeau, .pied, .btn { display: none !important; }
    .contenu { padding: 0; }
    .carte { box-shadow: none; border: 1px solid var(--bord); }
}

/* ---------- Super Administrateur ---------- */
.badge.super { background: #fff3cd; color: #8a5a00; border: 1px solid #f5b800; }
.champ-modale { display: block; margin-top: 10px; font-size: .92rem; }
.champ-modale input { display: block; width: 100%; margin-top: 6px; padding: 9px 11px; border: 1px solid #c9d3dd; border-radius: 8px; font: inherit; }
.champ-modale input:focus { outline: 2px solid var(--bleu, #0a6ebd); outline-offset: 1px; }