/* CyberAcadémie — charte graphique du Gouvernement (Marque État Congolais), version claire */
@font-face { font-family: 'Cooper Hewitt'; font-weight: 400; font-display: swap; src: url(fonts/cooper-hewitt-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cooper Hewitt'; font-weight: 500; font-display: swap; src: url(fonts/cooper-hewitt-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cooper Hewitt'; font-weight: 600; font-display: swap; src: url(fonts/cooper-hewitt-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cooper Hewitt'; font-weight: 700; font-display: swap; src: url(fonts/cooper-hewitt-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-weight: 400; font-display: swap; src: url(fonts/eb-garamond-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/eb-garamond-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-weight: 600; font-display: swap; src: url(fonts/eb-garamond-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Great Vibes'; font-weight: 400; font-display: swap; src: url(fonts/great-vibes-latin-400-normal.woff2) format('woff2'); }

:root {
  --bleu: #174899; --bleu-fonce: #0F2F66; --bleu-clair: #0095C9; --bleu-ciel: #E2F3FA; --bleu-pale: #EAF6FB;
  --jaune: #FFF24B; --jaune-pale: #FFFCE0; --or: #BD9A00; --or-texte: #7A6300;
  --rouge: #DB3832; --rouge-texte: #B42A25; --rouge-pale: #FDECEB;
  --vert: #65B32E; --vert-texte: #1F4D0B; --vert-pale: #E3F2D8;
  --texte: #323230; --texte-2: #4D4D4D; --texte-3: #666666;
  --bord: #D7DCDF; --bord-fort: #AFB8BE; --fond: #F3F5F7; --fond-2: #E4E8EB; --blanc: #FFFFFF;
  --rayon: 10px; --ombre: 0 10px 28px rgba(23, 72, 153, 0.08);
  --police: 'Cooper Hewitt', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-doc: 'EB Garamond', Garamond, Georgia, serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); font-size: var(--echelle, 15px); line-height: 1.45; }
/* v2.57 : taille du texte (réglable par l'agent) */
:root[data-echelle="grand"] { --echelle: 16.5px; }
:root[data-echelle="tres-grand"] { --echelle: 18.5px; }
/* v2.57 : mode sombre — redéfinition des couleurs, le reste de la charte ne change pas */
:root[data-theme="sombre"] {
  --bleu: #4C86D6; --bleu-fonce: #6FA2E4; --bleu-clair: #35B9E8; --bleu-ciel: #16304d; --bleu-pale: #142a44;
  --jaune: #FFE94B; --jaune-pale: #2c2a16; --or: #E0B400; --or-texte: #E8C65A;
  --rouge: #F0675F; --rouge-texte: #F4897F; --rouge-pale: #371d1c;
  --vert: #7FC850; --vert-texte: #A7DC7F; --vert-pale: #1d2e14;
  --texte: #E7EAEC; --texte-2: #B9C0C6; --texte-3: #8C949B;
  --bord: #313A42; --bord-fort: #495561; --fond: #14181C; --fond-2: #222A31; --blanc: #1C2229;
  color-scheme: dark;
}
:root[data-theme="sombre"] body { background: var(--fond); }
a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--bleu-fonce); text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; }
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 19px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
p { margin: 0 0 .8em; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--bleu-clair); outline-offset: 2px; }
.cache { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sur-titre { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bleu); }
.muet { color: var(--texte-3); }
.petit { font-size: 12px; }
.centre { text-align: center; }
.ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.espace { justify-content: space-between; }
.pile { display: flex; flex-direction: column; gap: 12px; }
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

/* ---------- Signature institutionnelle : armoiries | Ligne d'État | intitulé ---------- */
.signature { display: flex; align-items: center; gap: 10px; }
.signature img { width: 54px; height: 54px; flex: none; display: block; }
.ligne-etat { width: 5px; height: 54px; flex: none; background: linear-gradient(#0095C9 0 33.33%, #FFF24B 33.33% 66.66%, #DB3832 66.66%); }
.ligne-etat-blanc { width: 5px; height: 54px; flex: none; background: var(--blanc); }
.signature .intitule { font-size: 11px; font-weight: 600; letter-spacing: .3px; line-height: 1.25; color: var(--texte); }
.signature-blanc .intitule { color: #FFFFFF; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: var(--rayon);
  border: 1.5px solid transparent; font: 600 14px var(--police); cursor: pointer; text-decoration: none !important; transition: background .15s, border-color .15s; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primaire { background: var(--bleu); color: #FFF; }
.btn-primaire:hover:not(:disabled) { background: var(--bleu-fonce); color: #FFF; }
.btn-contour { background: var(--blanc); color: var(--bleu); border-color: var(--bleu); }
.btn-contour:hover:not(:disabled) { background: var(--bleu-pale); }
.btn-jaune { background: var(--jaune); color: var(--texte); box-shadow: inset 0 0 0 1.5px var(--or); }
.btn-jaune:hover:not(:disabled) { background: #FFEA00; color: var(--texte); }
.btn-danger { background: var(--blanc); color: var(--rouge-texte); border-color: var(--rouge); }
.btn-danger:hover:not(:disabled) { background: var(--rouge-pale); }
.btn-discret { background: transparent; color: var(--bleu); min-height: 36px; padding: 0 10px; }
.btn-discret:hover { background: var(--bleu-pale); }
.btn-petit { min-height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-bloc { width: 100%; }
.btn svg { flex: none; }

/* ---------- Cartes, pastilles, barres ---------- */
.carte { background: var(--blanc); border: 1px solid var(--bord); border-radius: 14px; padding: 18px; }
.carte-bleue { background: var(--bleu); color: #FFF; border-color: var(--bleu); }
.carte-jaune { background: var(--jaune-pale); border-color: #E0D23C; }
.pastille { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pastille-vert { background: var(--vert-pale); color: var(--vert-texte); }
.pastille-jaune { background: #FFF6A8; color: #5C4A00; }
.pastille-rouge { background: var(--rouge-pale); color: var(--rouge-texte); }
.pastille-gris { background: var(--fond-2); color: var(--texte-2); }
.pastille-bleu { background: var(--bleu-ciel); color: #0A4F6B; }
.pastille-exemple { border: 1px dashed var(--or); background: var(--jaune-pale); color: var(--or-texte); }
.barre { height: 6px; border-radius: 3px; background: var(--fond-2); overflow: hidden; }
.barre > span { display: block; height: 100%; background: var(--bleu-clair); border-radius: 3px; }
.barre-rouge > span { background: var(--rouge); }

/* ---------- Formulaires ---------- */
label, .etiquette { display: block; font-size: 12px; font-weight: 600; color: var(--texte-2); margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=url], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 8px; border: 1.5px solid var(--bord-fort); background: var(--blanc);
  color: var(--texte); font: 15px var(--police); }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--bleu); outline: none; box-shadow: 0 0 0 3px rgba(0, 149, 201, .2); }
.champ { margin-bottom: 14px; }
.case { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 400; color: var(--texte); cursor: pointer; }
.case input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--bleu); flex: none; }
.aide { font-size: 12px; color: var(--texte-3); margin-top: 4px; }
.erreur { background: var(--rouge-pale); color: var(--rouge-texte); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.info { background: var(--bleu-pale); color: #0A4F6B; border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.code-saisie { font-size: 22px !important; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; text-align: center; }

/* ---------- Notifications éphémères et fenêtres ---------- */
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: var(--texte); color: #FFF; padding: 12px 18px; border-radius: 10px;
  font-size: 14px; z-index: 1000; max-width: calc(100% - 32px); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.toast-ko { background: var(--rouge-texte); }
.voile { position: fixed; inset: 0; background: rgba(20, 30, 50, .45); z-index: 900; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modale { background: var(--blanc); border-radius: 14px; width: 100%; max-width: 620px; max-height: calc(100vh - 32px); overflow: auto; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modale-large { max-width: 980px; }
.modale h2 { margin-bottom: 14px; }
.modale .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.chargement { padding: 40px; text-align: center; color: var(--texte-3); }

/* ---------- Front office (mobile d'abord) ---------- */
.app { max-width: 600px; margin: 0 auto; min-height: 100vh; background: var(--fond); display: flex; flex-direction: column; }
.bandeau { background: var(--bleu); color: #FFF; padding: 18px 20px; }
.bandeau .signature img { width: 54px; height: 54px; }
.entete-app { background: var(--bleu); color: #FFF; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.entete-app .salut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.entete-app .bonjour { font-size: 13px; color: #D6E0F2; }
.entete-app .nom { font-size: 22px; font-weight: 600; }
.avatar { border: 0; cursor: pointer; font: inherit; font-weight: 700; width: 46px; height: 46px; border-radius: 50%; background: var(--jaune); color: var(--texte); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.entete-page { background: var(--bleu); color: #FFF; padding: 14px 16px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 50; }
.entete-page h1 { font-size: 16px; font-weight: 600; margin: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.retour { width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; color: #FFF; flex: none; }
.retour:hover { background: rgba(255,255,255,.12); }
.contenu { flex: 1; padding: 18px 18px 100px; display: flex; flex-direction: column; gap: 16px; }
.nav-bas { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 600px; height: 70px; background: var(--blanc); border-top: 1px solid var(--bord);
  display: flex; justify-content: space-around; align-items: center; z-index: 60; padding-bottom: env(safe-area-inset-bottom); }
.nav-bas a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--texte-3); min-width: 64px; position: relative; text-decoration: none; }
.nav-bas a.actif { color: var(--bleu); font-weight: 700; }
.nav-bas a.actif::after { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--jaune); box-shadow: 0 0 0 .5px var(--or); }
.nav-bas .compteur { position: absolute; top: -4px; right: 12px; background: var(--rouge); color: #FFF; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

.anneau { position: relative; width: 104px; height: 104px; flex: none; }
.anneau .valeur { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.anneau .valeur strong { font-size: 24px; color: var(--bleu); }
.anneau .valeur span { font-size: 11px; color: var(--texte-3); }
.carte-progression { display: flex; align-items: center; gap: 18px; }

.lignes { display: flex; flex-direction: column; gap: 8px; }
.ligne-lecon { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--blanc); border: 1px solid var(--bord); color: var(--texte); text-decoration: none !important; }
.ligne-lecon:hover { border-color: var(--bleu); }
.ligne-lecon .icone { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: var(--fond); }
.ligne-lecon .titre { flex: 1; font-size: 14px; }
.ligne-lecon .etat { font-size: 12px; font-weight: 600; }
.ligne-lecon.termine .icone { background: var(--bleu-ciel); }
.ligne-lecon.termine .etat { color: #00739B; }
.ligne-lecon.encours { border: 1.5px solid var(--bleu); }
.ligne-lecon.encours .icone { background: var(--bleu); }
.ligne-lecon.encours .titre { font-weight: 600; }
.ligne-lecon.encours .etat { color: var(--bleu); }
.ligne-test { background: var(--jaune-pale); border: 1.5px dashed var(--or); }
.ligne-test .icone { background: var(--jaune); }
.ligne-test.ouvert { border-style: solid; }
.titre-module { font-size: 13px; font-weight: 700; color: var(--texte-2); margin: 8px 0 2px; }

.carte-reprise { background: var(--bleu); color: #FFF; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; text-decoration: none !important; }
.carte-reprise:hover { background: var(--bleu-fonce); color: #FFF; }
.carte-reprise .sur-titre { color: var(--jaune); }
.carte-reprise .titre { font-size: 16px; font-weight: 600; }
.carte-reprise .detail { font-size: 12px; color: #D6E0F2; }
.carte-reprise .barre { background: rgba(255,255,255,.25); height: 4px; }
.carte-reprise .barre > span { background: var(--jaune); }
.bouton-rond { width: 48px; height: 48px; border-radius: 50%; background: var(--jaune); display: flex; align-items: center; justify-content: center; flex: none; }

.formation { display: flex; flex-direction: column; gap: 10px; color: var(--texte); text-decoration: none !important; }
.formation:hover { border-color: var(--bleu); }

/* Lecteur de leçon */
.lecteur video, .lecteur iframe { width: 100%; border: 0; border-radius: 12px; background: #000; display: block; }
.lecteur iframe.pdf { height: 70vh; background: var(--blanc); border: 1px solid var(--bord); }
.lecteur iframe.integre { aspect-ratio: 16 / 9; height: auto; }
.html-lecon { font-size: 16px; line-height: 1.6; }
.html-lecon h2 { color: var(--bleu); font-size: 20px; margin-top: .4em; }
.html-lecon h3 { font-size: 17px; margin-top: 1em; }
.html-lecon blockquote { margin: 1em 0; padding: 12px 16px; background: var(--jaune-pale); border-left: 4px solid var(--or); border-radius: 0 8px 8px 0; }
.html-lecon ul, .html-lecon ol { padding-left: 1.3em; }
.html-lecon li { margin-bottom: .35em; }
.html-lecon img { border-radius: 8px; }
.html-lecon table { border-collapse: collapse; width: 100%; }
.html-lecon td, .html-lecon th { border: 1px solid var(--bord); padding: 6px 8px; }
.etat-sauvegarde { font-size: 12px; color: var(--texte-3); display: flex; align-items: center; gap: 6px; }
.etat-sauvegarde.attente { color: var(--or-texte); }
.etat-sauvegarde .point { width: 8px; height: 8px; border-radius: 50%; background: var(--vert); }
.etat-sauvegarde.attente .point { background: var(--or); }

/* ---------- Questions ---------- */
.question { display: flex; flex-direction: column; gap: 14px; }
.question .enonce { font-size: 17px; font-weight: 600; line-height: 1.4; }
.question .media { border-radius: 10px; border: 1px solid var(--bord); }
.options { display: flex; flex-direction: column; gap: 8px; }
.option { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 10px; border: 1.5px solid var(--bord); background: var(--blanc); cursor: pointer; font-size: 15px; text-align: left; font-family: var(--police); color: var(--texte); width: 100%; }
.option:hover { border-color: var(--bleu-clair); }
.option .puce { width: 22px; height: 22px; flex: none; border: 2px solid var(--bord-fort); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.option.carre .puce { border-radius: 5px; }
.option.choisie { border-color: var(--bleu); background: var(--bleu-pale); }
.option.choisie .puce { border-color: var(--bleu); background: var(--bleu); }
.option.choisie .puce::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--blanc); }
.option.carre.choisie .puce::after { width: 10px; height: 6px; border-radius: 0; background: none; border: solid #FFF; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); }
.option.correcte { border-color: var(--vert); background: var(--vert-pale); }
.option.fausse { border-color: var(--rouge); background: var(--rouge-pale); }
.option:disabled { cursor: default; }
.vf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vf .option { justify-content: center; font-weight: 600; font-size: 17px; padding: 18px; }
.encadre { padding: 12px 14px; border-radius: 10px; background: var(--fond); border: 1px solid var(--bord); }
.encadre strong { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--bleu); margin-bottom: 4px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: var(--blanc); border: 1.5px solid var(--bord-fort); font-size: 14px;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; max-width: 100%; }
.chip.choisi { border-color: var(--bleu); background: var(--bleu-pale); box-shadow: 0 0 0 3px rgba(0,149,201,.25); }
.chip.fantome { position: fixed; pointer-events: none; z-index: 2000; box-shadow: 0 12px 30px rgba(0,0,0,.25); transform: rotate(2deg); }
.chip .poignee { color: var(--texte-3); }
.reserve { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: 10px; border: 1.5px dashed var(--bord-fort); min-height: 58px; background: var(--fond); }
.zones-depot { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.zone-depot { border: 1.5px dashed var(--bleu); border-radius: 10px; padding: 10px; min-height: 90px; background: var(--bleu-pale); display: flex; flex-direction: column; gap: 8px; }
.zone-depot .nom-zone { font-size: 12px; font-weight: 700; color: var(--bleu); text-transform: uppercase; letter-spacing: .8px; }
.zone-depot.survol, .emplacement.survol { background: #D3EDF8; border-style: solid; }
.zone-depot .chip { width: 100%; }
.associer { display: flex; flex-direction: column; gap: 8px; }
.paire { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.paire .gauche { padding: 10px 12px; border-radius: 10px; background: var(--fond); border: 1px solid var(--bord); font-size: 14px; display: flex; align-items: center; }
.emplacement { border: 1.5px dashed var(--bleu); border-radius: 10px; min-height: 46px; padding: 4px; background: var(--bleu-pale); display: flex; align-items: center; }
.emplacement .chip { width: 100%; }
.liste-ordre { display: flex; flex-direction: column; gap: 8px; }
.liste-ordre .item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--blanc); border: 1.5px solid var(--bord-fort); touch-action: none; user-select: none; }
.liste-ordre .item.survol { border-color: var(--bleu); box-shadow: 0 -3px 0 var(--bleu); }
.liste-ordre .rang { width: 26px; height: 26px; border-radius: 50%; background: var(--bleu); color: #FFF; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.liste-ordre .texte { flex: 1; font-size: 14px; }
.liste-ordre .fleches { display: flex; gap: 2px; }
.liste-ordre .fleches button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--bord); background: var(--blanc); cursor: pointer; color: var(--bleu); }
.trous { font-size: 16px; line-height: 2.4; }
.trous select, .trous input { display: inline-block; width: auto; min-width: 140px; min-height: 38px; padding: 4px 10px; margin: 0 4px; font-size: 15px; }
.zone-image { position: relative; display: inline-block; max-width: 100%; cursor: crosshair; border-radius: 10px; overflow: hidden; border: 1px solid var(--bord); line-height: 0; touch-action: manipulation; }
.zone-image img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.marqueur { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(23,72,153,.85); border: 3px solid var(--jaune); color: #FFF;
  font: 700 13px/24px var(--police); text-align: center; cursor: pointer; }
.rect-zone { position: absolute; border: 3px solid var(--vert); background: rgba(101,179,46,.18); border-radius: 4px; }
.retour-question { border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.retour-question.ok { background: var(--vert-pale); color: var(--vert-texte); }
.retour-question.ko { background: var(--rouge-pale); color: var(--rouge-texte); }
.retour-question .corrige { margin-top: 6px; color: var(--texte); }
.navigation-test { display: flex; gap: 10px; justify-content: space-between; position: sticky; bottom: 0; background: var(--fond); padding: 12px 0; }
.points-questions { display: flex; flex-wrap: wrap; gap: 6px; }
.points-questions button { width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--bord-fort); background: var(--blanc); font: 600 13px var(--police); cursor: pointer; color: var(--texte-2); }
.points-questions button.repondu { background: var(--bleu-ciel); border-color: var(--bleu-clair); color: #0A4F6B; }
.points-questions button.actuel { border-color: var(--bleu); box-shadow: 0 0 0 2px var(--bleu); }

/* Certificats et partage */
.apercu-certificat { width: 100%; border-radius: 10px; border: 1px solid var(--bord); display: block; }
.partage { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.partage .btn { min-height: 44px; font-size: 13px; }
.logo-reseau { width: 18px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: #FFF; font-size: 11px; font-weight: 700; }

/* Connexion */
.ecran-connexion { min-height: 100vh; background: var(--blanc); display: flex; flex-direction: column; max-width: 600px; margin: 0 auto; padding: 32px 24px; gap: 24px; }
.embleme { width: 96px; height: 96px; border-radius: 26px; background: var(--blanc); border: 1px solid #E3E7EA; display: flex; align-items: center; justify-content: center; margin: 8px auto 0; box-shadow: 0 12px 30px rgba(23,72,153,.22); }
.titre-appli { text-align: center; font-size: 32px; font-weight: 700; color: var(--bleu); margin: 0; }
.titre-appli span { color: var(--bleu-clair); }
.onglets { display: flex; gap: 4px; background: var(--fond); border-radius: 10px; padding: 4px; }
.onglets button { flex: 1; min-height: 40px; border: 0; border-radius: 8px; background: transparent; font: 600 13px var(--police); color: var(--texte-2); cursor: pointer; }
.onglets button.actif { background: var(--blanc); color: var(--bleu); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.separateur { display: flex; align-items: center; gap: 12px; color: var(--texte-3); font-size: 12px; }
.separateur::before, .separateur::after { content: ''; flex: 1; height: 1px; background: var(--bord); }
.google-zone { display: flex; justify-content: center; min-height: 44px; }

/* ---------- Page publique de vérification ---------- */
.page-publique { background: var(--fond); }
.page-publique .bandeau { padding: 16px 20px; }
.verif { max-width: 720px; margin: 0 auto; padding: 28px 18px 60px; }
.verif form { display: flex; flex-direction: column; gap: 12px; }
.resultat { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.resultat .pastille { font-size: 15px; padding: 6px 14px; }
.resultat-texte { font-size: 16px; margin: 0; }
.fiche { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; width: 100%; }
.fiche dt { color: var(--texte-3); font-size: 13px; }
.fiche dd { margin: 0; font-weight: 600; }
.fiche .titulaire { font-family: var(--police-doc); font-size: 22px; color: var(--bleu); }
.fiche .numero { color: var(--bleu); letter-spacing: .5px; }
.apercu-partage { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--bord); }
.mention { font-size: 12px; color: var(--texte-3); margin: 0; }

/* ---------- Back office ---------- */
.bo { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.bo > div { min-width: 0; }
.bo-menu { background: var(--bleu); color: #FFF; padding: 22px 16px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.bo-menu .signature { padding: 0 6px 16px; border-bottom: 1px solid rgba(255,255,255,.2); }
.bo-menu .signature .intitule { font-size: 10px; }
.bo-produit { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.bo-produit .tuile { width: 38px; height: 38px; border-radius: 10px; background: var(--blanc); display: flex; align-items: center; justify-content: center; flex: none; }
.bo-produit strong { display: block; font-size: 15px; }
.bo-produit span { font-size: 11px; color: #D6E0F2; }
.bo-menu nav { display: flex; flex-direction: column; gap: 3px; }
.bo-menu nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; color: #FFF; font-size: 14px; text-decoration: none; }
.bo-menu nav a:hover { background: rgba(255,255,255,.1); }
.bo-menu nav a.actif { background: var(--jaune); color: var(--texte); font-weight: 600; }
.bo-menu nav a.actif svg { stroke: var(--texte); }
.bo-menu nav .badge { margin-left: auto; background: var(--jaune); color: var(--texte); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.bo-menu nav a.actif .badge { background: var(--bleu); color: #FFF; }
.bo-menu nav .rubrique { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #AFC3E6; padding: 12px 12px 4px; }
.bo-utilisateur { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.1); }
.bo-utilisateur .avatar { width: 36px; height: 36px; font-size: 13px; }
.bo-utilisateur strong { display: block; font-size: 13px; }
.bo-utilisateur div > span { font-size: 11px; color: #D6E0F2; }
.bo-main { padding: 28px 32px 60px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.bo-titre { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.bo-titre h1 { margin: 0; }
.bo-mobile { display: none; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.kpi { background: var(--blanc); border: 1px solid var(--bord); border-top: 3px solid var(--bleu); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.kpi .libelle { font-size: 12px; color: var(--texte-2); }
.kpi .nombre { font-size: 30px; font-weight: 700; color: var(--bleu); line-height: 1.1; }
.kpi .detail { font-size: 12px; color: #00739B; }
.kpi.jaune { background: var(--jaune-pale); border-color: #E0D23C; border-top-color: var(--jaune); }
.kpi.jaune .nombre { color: var(--texte); }
.kpi.rouge { border-top-color: var(--rouge); }
.kpi.rouge .nombre { color: var(--rouge-texte); }
.tableau-conteneur { overflow-x: auto; border-radius: 10px; border: 1px solid var(--bord); background: var(--blanc); }
table.tableau { width: 100%; border-collapse: collapse; font-size: 13px; }
.tableau th { background: var(--bleu); color: #FFF; text-align: left; font-weight: 600; padding: 10px 12px; white-space: nowrap; }
.tableau td { padding: 10px 12px; border-bottom: 1px solid var(--fond-2); vertical-align: middle; }
.tableau tr:nth-child(even) td { background: #F8F9FA; }
.tableau tr.cliquable { cursor: pointer; }
.tableau tr.cliquable:hover td { background: var(--bleu-pale); }
.tableau .actions { text-align: right; white-space: nowrap; }
.barre-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.barre-outils input, .barre-outils select { width: auto; min-width: 200px; min-height: 40px; }
.barre-province { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.barre-province .nom { width: 190px; color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-province .barre { flex: 1; height: 12px; border-radius: 6px; }
.barre-province .barre > span { border-radius: 6px; }
.barre-province .valeur { width: 52px; text-align: right; font-weight: 600; }
.arbre { list-style: none; margin: 0; padding: 0; }
.arbre ul { list-style: none; margin: 0; padding-left: 22px; border-left: 1px dashed var(--bord-fort); margin-left: 9px; }
.arbre li { margin: 2px 0; }
.noeud { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 14px; }
.noeud:hover { background: var(--fond); }
.noeud .type { font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--texte-3); }
.noeud.hors-perimetre { opacity: .45; }
.noeud input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--bleu); }
.choix-portee { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.choix-portee label { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--bord); cursor: pointer; font-weight: 400; color: var(--texte); margin: 0; }
.choix-portee label strong { display: block; font-size: 14px; color: var(--texte); }
.choix-portee label span { font-size: 12px; color: var(--texte-3); }
.choix-portee input { accent-color: var(--bleu); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.choix-portee label:has(input:checked) { border-color: var(--bleu); background: var(--bleu-pale); }
.code-genere { background: var(--bleu-pale); border: 1.5px solid var(--bleu-clair); border-radius: 8px; padding: 14px 16px; }
.code-genere .code { font-size: 24px; font-weight: 700; letter-spacing: 4px; color: var(--bleu); }
.editeur-ligne { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.editeur-ligne input[type=text] { flex: 1; }
.editeur-ligne .btn { flex: none; }
.types-questions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.types-questions button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border-radius: 10px; border: 1.5px solid var(--bord); background: var(--blanc); cursor: pointer; font: 600 13px var(--police); color: var(--texte); text-align: left; }
.types-questions button span { font-weight: 400; font-size: 12px; color: var(--texte-3); }
.types-questions button:hover, .types-questions button.actif { border-color: var(--bleu); background: var(--bleu-pale); }
.module-bloc { border: 1px solid var(--bord); border-radius: 12px; background: var(--blanc); }
.module-bloc > header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--fond-2); }
.module-bloc > header h3 { margin: 0; }
.lecon-ligne { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--fond-2); font-size: 14px; }
.lecon-ligne:last-child { border-bottom: 0; }
.lecon-ligne .type { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--bleu-clair); width: 60px; flex: none; }
.lecon-ligne .titre { flex: 1; }
.dessin-zones { position: relative; display: inline-block; line-height: 0; cursor: crosshair; user-select: none; border: 1px solid var(--bord); border-radius: 8px; overflow: hidden; touch-action: none; }
.dessin-zones img { max-width: 100%; display: block; -webkit-user-drag: none; }
.dessin-zones .rect-zone { border-color: var(--bleu); background: rgba(0,149,201,.2); }
.dessin-zones .rect-zone button { position: absolute; top: -2px; right: -2px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--rouge); color: #FFF; cursor: pointer; line-height: 1; }
.repartition { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.repartition div { display: flex; justify-content: space-between; border-bottom: 1px solid #EFE6A0; padding-bottom: 5px; }
.signature-sg-apercu { max-width: 240px; max-height: 90px; border: 1px dashed var(--bord-fort); border-radius: 8px; padding: 6px; background: var(--blanc); }
@media (max-width: 900px) {
  .bo { grid-template-columns: 1fr; }
  .bo-menu { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 800; transform: translateX(-100%); transition: transform .2s; }
  .bo-menu.ouvert { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }
  .bo-mobile { display: flex; align-items: center; gap: 12px; background: var(--bleu); color: #FFF; padding: 12px 16px; position: sticky; top: 0; z-index: 700; }
  .bo-mobile button { background: transparent; border: 1.5px solid rgba(255,255,255,.6); border-radius: 8px; color: #FFF; width: 40px; height: 40px; cursor: pointer; }
  .bo-main { padding: 18px 16px 50px; }
  .barre-outils input, .barre-outils select { min-width: 0; flex: 1; }
}
@media print {
  .bo-menu, .bo-mobile, .barre-outils, .nav-bas, .no-print { display: none !important; }
  .bo { display: block; } body { background: var(--blanc); }
}

/* ---------- Impression des codes d'invitation ---------- */
.zone-impression { display: none; }
body.impression > *:not(.zone-impression) { display: none !important; }
body.impression .zone-impression { display: block; }
.feuille-impression { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; background: var(--blanc); }
.coupon { border: 1.5px dashed var(--bord-fort); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; break-inside: avoid; page-break-inside: avoid; }
.coupon .signature img { width: 44px; height: 44px; }
.coupon .signature .intitule { font-size: 9px; }
@media print { body.impression { background: var(--blanc); } .coupon { font-size: 11px; } }
.sablier { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--fond-2); border-top-color: var(--bleu); animation: tourner 1s linear infinite; }
@keyframes tourner { to { transform: rotate(360deg); } }

/* Barre d'actions des modules : en haut à droite, toujours visible au défilement (bureau) */
.barre-modules { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 0; background: var(--fond); position: sticky; top: 0; z-index: 40; }
@media (max-width: 900px) { .barre-modules { position: static; } .barre-modules > .ligne { width: 100%; } }

/* Test final protégé : pas de sélection du texte, filigrane nominatif discret */
.zone-test-protegee { position: relative; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.zone-test-protegee input, .zone-test-protegee textarea { -webkit-user-select: text; user-select: text; }
.filigrane-test { position: absolute; inset: 0; overflow: hidden; pointer-events: none; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 34px 46px; padding: 10px; transform: rotate(-18deg) scale(1.3); opacity: .07; font-size: 13px; font-weight: 600; color: #174899; }
.filigrane-test span { white-space: nowrap; }

/* Référentiel des certifications : familles à gauche, fiche et niveaux à droite */
.referentiel { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.carte-famille { text-align: left; background: var(--blanc); border: 1px solid var(--bord); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; font: inherit; color: var(--texte); }
.carte-famille:hover { border-color: var(--bleu); }
.carte-famille.actif { border: 2px solid var(--bleu); background: #F2F6FC; }
@media (max-width: 900px) { .referentiel { grid-template-columns: 1fr; } }
/* Leçon : barre d'édition visible des concepteurs */
.barre-edition { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border: 1px dashed var(--bleu); border-radius: 10px; background: #F2F6FC; }
.actions-edition { justify-content: flex-end; position: sticky; bottom: 0; padding: 10px 0; background: var(--fond); }
/* Éditeur de texte : une ligne d'icônes collée en haut, menu « ⋯ », barre du tableau au-dessus du tableau courant */
.editeur { position: relative; display: flex; flex-direction: column; gap: 8px; }
.editeur-outils { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; overflow: visible; padding: 6px; background: var(--blanc); border: 1px solid var(--bord); border-radius: 10px; position: sticky; top: 0; z-index: 30; }
.editeur-outils .outil { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--texte); cursor: pointer; }
.editeur-outils .outil:hover { background: var(--fond-2); }
.editeur-outils .outil.actif { background: var(--bleu-ciel); color: var(--bleu); }
.editeur-outils .outil-sep { flex: none; width: 1px; height: 22px; background: var(--bord); margin: 0 3px; }
.outils-plus { position: relative; margin-left: auto; }
.outils-menu { position: absolute; right: 0; top: 42px; min-width: 250px; background: var(--blanc); border: 1px solid var(--bord); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; z-index: 40; }
.outils-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: transparent; border-radius: 8px; font: inherit; color: var(--texte); text-align: left; cursor: pointer; }
.outils-menu button:hover { background: var(--fond-2); }
.barre-tableau { position: absolute; left: 18px; display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; background: var(--bleu-fonce); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.18); z-index: 20; }
.barre-tableau button { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: #FFF; font: inherit; font-size: 12.5px; cursor: pointer; }
.barre-tableau button:hover { background: rgba(255,255,255,.16); }
.barre-tableau button:nth-child(3) { margin-left: 8px; }
.barre-tableau button:last-child { margin-left: 8px; color: #FFC9C6; }
.html-lecon[contenteditable] td, .html-lecon[contenteditable] th { min-width: 60px; height: 34px; }
.html-lecon[contenteditable] table.table-active { margin-top: 46px; }
/* Animatiques en arrière-plan : indicateur en bas à droite, sur toutes les pages */
.suivi-animatiques { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.carte-anim { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--blanc); border: 1px solid var(--bord); border-left: 4px solid var(--bleu); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.carte-anim.pret { border-left-color: var(--vert); }
.carte-anim.erreur { border-left-color: var(--rouge); }
.texte-anim { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 13.5px; }
.texte-anim strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.texte-anim span { color: var(--texte-3); }
.roue-anim { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--bleu-ciel); border-top-color: var(--bleu); animation: tourne-anim .8s linear infinite; }
@keyframes tourne-anim { to { transform: rotate(360deg); } }
.pastille-anim { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--vert); color: #FFF; font-weight: 700; }
.carte-anim.erreur .pastille-anim { background: var(--rouge); }
@media (max-width: 700px) { .suivi-animatiques { bottom: 84px; } } /* au-dessus de la barre de navigation du téléphone */
/* Leçon vidéo : script dépliable pour les concepteurs */
.panneau-script { border: 1px dashed var(--bleu); border-radius: 10px; background: #F2F6FC; padding: 12px 14px; }
.panneau-script summary { cursor: pointer; font-weight: 700; color: var(--bleu); }
/* Couleur des familles de certification */
.puce-couleur { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.nuancier { display: flex; flex-wrap: wrap; gap: 8px; }
.nuance { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #FFF; box-shadow: 0 0 0 1px var(--bord); cursor: pointer; }
.nuance.actif { box-shadow: 0 0 0 3px var(--texte); }
/* Organigramme dépliable */
.deplier { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--texte-2); cursor: pointer; transform: rotate(-90deg); transition: transform .15s; }
.deplier.ouvert { transform: none; }
.deplier:hover { background: var(--fond-2); }
.deplier-vide { flex: none; width: 26px; }
.pastille-nb { font-size: 11px; font-weight: 700; color: var(--bleu); background: var(--bleu-ciel); border-radius: 10px; padding: 1px 8px; }
.noeud.trouve strong { background: var(--jaune-pale); box-shadow: 0 0 0 3px var(--jaune-pale); border-radius: 3px; }
.bloc-signataire { border-top: 1px solid var(--bord); padding-top: 14px; margin-top: 14px; }
.bloc-signataire h3 { margin: 0 0 4px; font-size: 1rem; }
.bloc-signataire .ligne { align-items: center; gap: 14px; flex-wrap: wrap; }
.module-partage { display: flex; gap: 8px; align-items: flex-start; padding: 8px 14px; background: #EEF4FB; color: var(--bleu, #174899); font-size: .86rem; border-bottom: 1px solid var(--fond-2); }
.module-partage a { color: inherit; font-weight: 600; }
.module-lecture .lecon-ligne { color: var(--texte-2, #6B7378); background: #F7F8F9; }
.module-lecture .lecon-ligne .type { opacity: .6; }
.module-lecture > header h3 { color: #4D4D4D; }
/* Organigramme (Structures) : tableau à colonnes alignées, niveaux indentés */
.org-carte { padding: 0; overflow: hidden; }
.org-entete, .org-ligne { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 72px 112px; align-items: center; gap: 16px; padding: 0 16px; }
.org-entete { background: var(--fond); border-bottom: 1px solid var(--bord); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--texte-3); min-height: 40px; }
.org-ligne { min-height: 60px; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--fond-2); }
.org-ligne:last-child { border-bottom: 0; }
.org-ligne:hover { background: #F8FAFC; }
.org-ligne.org-n0 { background: var(--bleu-pale); }
.org-ligne.trouve { background: var(--jaune-pale); }
.org-ligne.hors-perimetre { opacity: .45; }
.org-structure { display: flex; align-items: center; gap: 10px; min-width: 0; padding-left: calc(var(--niveau, 0) * 26px); }
.org-texte { min-width: 0; }
.org-personne { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.org-nom { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.org-entete .org-agents { font-size: inherit; color: inherit; }
.org-nom { font-weight: 600; color: var(--texte); }
.org-n0 .org-nom { font-weight: 700; font-size: 15px; }
.org-n1 .org-nom { font-weight: 700; }
.org-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--texte-3); margin-top: 1px; }
.org-type { flex: none; min-width: 58px; max-width: 92px; padding: 3px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--fond-2); color: var(--texte-2); }
.org-type-ministere, .org-type-cabinet { background: var(--bleu-fonce); color: #FFF; }
.org-type-secretariat_general { background: var(--bleu); color: #FFF; }
.org-type-inspection_generale { background: #00707A; color: #FFF; }
.org-type-direction { background: var(--bleu-ciel); color: var(--bleu-fonce); }
.org-type-proved, .org-type-sous_proved { background: var(--vert-pale); color: var(--vert-texte); }
.org-type-ipp { background: #E3F1F2; color: #00585F; }
.org-resp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.org-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--bleu-ciel); color: var(--bleu-fonce); }
.org-resp.vide .org-avatar { background: transparent; border: 1px dashed var(--bord-fort); color: var(--texte-3); }
.org-resp.vide .org-meta { font-style: italic; }
.org-agents { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--texte-2); }
.org-actions { display: flex; justify-content: flex-end; gap: 2px; opacity: .55; transition: opacity .15s; }
.org-ligne:hover .org-actions, .org-actions:focus-within { opacity: 1; }
.btn-icone { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--bleu); cursor: pointer; }
.btn-icone:hover { background: var(--bleu-ciel); }
.btn-icone.danger { color: var(--rouge-texte); }
.btn-icone.danger:hover { background: var(--rouge-pale); }
@media (max-width: 900px) {
  .org-entete { display: none; }
  .org-ligne { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "s a" "r a"; row-gap: 4px; padding: 10px 12px; }
  .org-structure { grid-area: s; padding-left: calc(var(--niveau) * 14px); }
  .org-resp { grid-area: r; padding-left: calc(var(--niveau) * 14px + 36px); }
  .org-agents { display: none; }
  .org-actions { grid-area: a; opacity: 1; flex-direction: column; }
}
.module-bloc { scroll-margin-top: 96px; transition: box-shadow .4s, border-color .4s; }
.module-bloc.module-cible { border-color: var(--bleu); box-shadow: 0 0 0 4px var(--jaune), 0 10px 28px rgba(23, 72, 153, .18); }
/* Module en brouillon déjà utilisé par un parcours : signal qui attire l'œil (point qui pulse) */
.signal-attendu { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 2px 10px 2px 8px; border-radius: 999px; background: var(--rouge-pale); color: var(--rouge-texte); font-size: 12px; font-weight: 700; white-space: nowrap; }
.signal-attendu::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); animation: pulse-attendu 1.6s ease-out infinite; }
@keyframes pulse-attendu { 0% { box-shadow: 0 0 0 0 rgba(219, 56, 50, .55); } 70% { box-shadow: 0 0 0 7px rgba(219, 56, 50, 0); } 100% { box-shadow: 0 0 0 0 rgba(219, 56, 50, 0); } }
@media (prefers-reduced-motion: reduce) { .signal-attendu::before { animation: none; } }
.module-bloc > header { flex-wrap: wrap; row-gap: 8px; }
.module-bloc > header .sur-titre { flex: none; white-space: nowrap; }
.module-tete { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.module-tete .signal-attendu, .module-tete .pastille { margin-top: 0; }
.module-actions { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.module-actions .btn { white-space: nowrap; }
.ligne > .signal-attendu { margin-top: 0; }
/* Présentation d'une formation (première page de l'agent) */
.presentation { display: flex; flex-direction: column; gap: 10px; }
.objectifs { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.objectifs li { position: relative; padding-left: 26px; }
.objectifs li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--bleu-ciel); color: var(--bleu); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.grille-presentation { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.info-presentation { background: var(--fond); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.info-presentation span { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--texte-3); }
.info-presentation strong { font-size: 14px; font-weight: 600; }

/* v2.34 : vers le certificat de cursus complet (Mes formations) */
.carte-cursus { border-left: 4px solid var(--famille, var(--bleu)); gap: 10px; }
.carte-cursus .sur-titre { color: var(--famille, var(--bleu)); }
.pastille-nouveau { background: var(--rouge, #DB3832); color: #FFF; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; padding: 2px 8px; vertical-align: middle; }

/* v2.35 : état des vidéos des scripts, documents et liens de référence des leçons */
.pastille.petite { font-size: 10.5px; padding: 1px 7px; margin-left: 8px; vertical-align: middle; display: inline-flex; align-items: center; gap: 2px; }
.pastille-orange { background: #FDEBD9; color: #8A3D00; }
.ressource-edition { display: grid; grid-template-columns: 18px 1fr 1.3fr auto; gap: 8px; align-items: center; }
.ressource-edition input { margin: 0; }
.ressources { gap: 6px; }
.ressource { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--bordure, #D7DCDF); border-radius: 10px; text-decoration: none; color: inherit; }
.ressource:hover { border-color: var(--bleu); background: var(--bleu-ciel); }
@media (max-width: 600px) { .ressource-edition { grid-template-columns: 18px 1fr auto; } .ressource-edition > :nth-child(3) { grid-column: 2 / 4; grid-row: 2; } }

/* v2.36 : logo CyberAcadémie (symbole sur tuile blanche + nom), toujours après la signature du Ministère */
.marque { display: flex; align-items: center; gap: 8px; flex: none; color: #FFF; }
.marque .tuile { width: 36px; height: 36px; border-radius: 9px; background: var(--blanc); display: flex; align-items: center; justify-content: center; }
.marque .nom-marque { font-size: 17px; letter-spacing: .1px; }
.marque .nom-marque b { font-weight: 700; }
.bandeau { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 420px) { .marque .nom-marque { display: none; } }

/* v2.39 : habilitations — matrice des droits par profil */
.matrice-droits { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.matrice-droits th, .matrice-droits td { padding: 9px 12px; border-bottom: 1px solid #E3E7EA; text-align: left; vertical-align: middle; }
.matrice-droits th { background: var(--bleu); color: #FFF; position: sticky; top: 0; font-weight: 600; }
.matrice-droits th .muet { color: #D6E0F2; font-weight: 400; }
.matrice-droits .centre { text-align: center; }
.matrice-droits td.centre > span { justify-content: center; }
.matrice-droits tr.domaine td { background: var(--bleu-pale); color: var(--bleu); font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.matrice-droits tbody tr:not(.domaine):hover td { background: #F7F9FA; }
.lien-profil { background: none; border: 0; color: #FFF; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.lien-profil:disabled { cursor: default; text-decoration: none; }

/* v2.41 : revue des accès */
.profils-agent { display: flex; flex-wrap: wrap; gap: 6px; }
.pastille-acces { display: inline-flex; align-items: center; gap: 6px; background: var(--jaune-pale, #FFFBD6); border: 1px solid #E8DC6A; border-radius: 8px; padding: 3px 4px 3px 9px; font-size: 12px; }
.pastille-acces strong { font-weight: 700; }
.pastille-acces span { color: var(--texte-2); }
.pastille-acces.admin { background: var(--rouge-pale); border-color: #F2B8B5; }
.pastille-acces.admin strong { color: var(--rouge-texte); }
.pastille-acces.office { background: var(--bleu-pale); border-color: #BFDCEB; padding-right: 9px; }
.pastille-acces .retirer { border: 0; background: none; color: var(--rouge-texte); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 4px; }
.pastille-acces .retirer:hover { background: rgba(180, 42, 37, .12); }
.attention-acces { gap: 10px; border-color: #F2B8B5; }
.alerte-acces { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; border-left: 4px solid var(--rouge); background: var(--rouge-pale); font-size: 13.5px; }
.alerte-acces.jaune { border-left-color: #C9A400; background: var(--jaune-pale, #FFFBD6); }
button.kpi:hover { border-color: var(--bleu); }

/* v2.42 : page Profil de l'agent */
.avatar-grand { width: 64px; height: 64px; font-size: 22px; }
.nom-profil { font-size: 19px; }
.chemin-structure { font-size: 12.5px; color: var(--bleu); font-weight: 600; }
.grille-profil { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.info-profil { background: var(--fond); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-profil span { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--texte-3); }
.info-profil strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.stats-profil { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-profil { border: 1px solid var(--bord); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 2px; text-decoration: none !important; color: inherit; }
.stat-profil strong { font-size: 24px; color: var(--bleu); line-height: 1.1; }
.stat-profil span { font-size: 12px; color: var(--texte-2); }
a.stat-profil:hover { border-color: var(--bleu); }
.prochaine-echeance { display: flex; align-items: center; gap: 10px; background: var(--jaune-pale); border: 1px solid #E8DC6A; border-radius: 10px; padding: 10px 12px; color: inherit; text-decoration: none !important; font-size: 13.5px; }
@media (max-width: 420px) { .stats-profil { grid-template-columns: 1fr 1fr; } }

/* v2.45 : catalogue des cours — code de catégorie et code de cours */
.code-categorie { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 6px; background: #0F2F66; color: #FFFFFF; font-weight: 700; font-size: 13px; letter-spacing: .06em; }
.code-cours { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 5px; background: #E7F1FB; color: #174899; font-size: 12px; font-weight: 700; letter-spacing: .03em; vertical-align: 2px; }

/* v2.46 : un élément masqué reste masqué, même si sa classe fixe un affichage (grille, flex) */
[hidden] { display: none !important; }

/* v2.46 : page de connexion — présentation à gauche sur ordinateur, pied de page avec les informations légales */
.connexion-page { min-height: 100vh; background: var(--blanc); }
.connexion-presentation { display: none; }
.aide-code { margin-top: 8px; font-size: 13px; color: var(--texte-2); }
.aide-code summary { cursor: pointer; color: var(--bleu); font-weight: 600; }
.aide-code p { margin: 6px 0 0; }
.pied-connexion { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--bord); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texte-2); text-align: center; }
.pied-connexion nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.pied-connexion a, .lien-pied { color: var(--bleu); font: inherit; font-size: 13px; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.pied-connexion a:hover, .lien-pied:hover { text-decoration: underline; }
.texte-legal h3 { margin: 8px 0 0; font-size: 15px; }
.texte-legal p, .texte-legal ul { margin: 0; }
@media (min-width: 960px) {
  .connexion-page { display: grid; grid-template-columns: 1fr 1fr; }
  .connexion-presentation { display: flex; flex-direction: column; justify-content: center; gap: 36px; padding: 56px 64px; color: #FFF;
    background: linear-gradient(160deg, #174899 0%, #0F2F66 100%); position: relative; overflow: hidden; }
  .connexion-presentation::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #0095C9 0 33.33%, #FFF24B 33.33% 66.66%, #DB3832 66.66%); }
  .connexion-presentation .signature { position: absolute; top: 40px; left: 64px; }
  .connexion-presentation h2 { margin: 0; font-size: 30px; line-height: 1.2; max-width: 520px; color: #FFF; }
  .connexion-presentation p { margin: 0; font-size: 16px; line-height: 1.55; max-width: 520px; color: rgba(255,255,255,.88); }
  .atouts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; max-width: 520px; }
  .atouts li { display: flex; gap: 14px; align-items: flex-start; }
  .atout-icone { flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; }
  .atouts strong { display: block; font-size: 15.5px; margin-bottom: 2px; }
  .atouts span { font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.45; }
  .connexion-page .ecran-connexion { width: 100%; padding: 32px 48px; }
  .connexion-page .ecran-connexion > .signature { display: none; }
}

/* v2.48 : menu du compte (avatar), bande « Ma situation », lien Administration de la barre d'onglets */
.compte { position: relative; flex: none; }
.avatar:focus-visible { outline: 3px solid #FFF; outline-offset: 2px; }
.menu-compte { text-align: left; position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; min-width: 250px; background: var(--blanc); color: var(--texte); border: 1px solid var(--bord);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; }
.menu-compte-tete { padding: 10px 12px 12px; border-bottom: 1px solid var(--bord); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; }
.menu-compte-tete span { font-size: 12.5px; color: var(--texte-2); }
.menu-compte a, .menu-compte button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; font: inherit; font-size: 14px;
  color: var(--texte); background: none; border: 0; text-align: left; cursor: pointer; text-decoration: none !important; }
.menu-compte a:hover, .menu-compte button:hover { background: var(--fond-2); }
.menu-compte .menu-sortie { color: var(--rouge); border-top: 1px solid var(--bord); border-radius: 0 0 8px 8px; margin-top: 4px; }
.situation { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tuile-situation { background: var(--blanc); border: 1px solid var(--bord); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tuile-situation strong { font-size: 24px; line-height: 1.15; color: var(--bleu); }
.tuile-situation span { font-size: 12.5px; color: var(--texte-2); }
.tuile-situation small { font-size: 12px; color: var(--texte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.formation .btn-petit { min-height: 32px; }
.nav-bas .lien-admin, .menu-compte .seulement-pc { display: none; }

/* v2.51 : bas de page de l'espace agent (nouveautés, aide, informations) */
.contenu:has(+ .pied-agent) { padding-bottom: 28px; }
.pied-agent { background: var(--blanc); border-top: 1px solid var(--bord); padding: 24px 18px 96px; display: flex; flex-direction: column; gap: 22px; font-size: 13.5px; }
.pied-agent h2 { font-size: 15px; margin: 0 0 10px; }
.grille-nouveautes { display: grid; grid-template-columns: 1fr; gap: 10px; }
.nouveaute { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--bord); border-left: 4px solid var(--bleu-clair, #0095C9); border-radius: 10px;
  background: var(--fond); color: var(--texte); text-decoration: none !important; }
a.nouveaute:hover { border-color: var(--bleu); }
.etiquette-nouveaute { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--bleu); }
.etiquette-nouveaute small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--texte-3); }
.pied-colonnes { display: grid; grid-template-columns: 1fr; gap: 18px; }
.pied-colonnes nav { gap: 6px; align-items: flex-start; }
.pied-copyright { border-top: 1px solid var(--bord); padding-top: 14px; font-size: 12px; color: var(--texte-3); }

/* v2.52 : leçon — en-tête avec le cours et la position, sommaire (colonne sur ordinateur, panneau sur téléphone), précédente / suivante */
.entete-lecon { position: sticky; }
.titres-lecon { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.titres-lecon span { font-size: 12px; color: #D6E0F2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titres-lecon h1 { flex: none; }
.logo-entete { display: none; text-decoration: none !important; }
.rang-lecon { display: none; font-size: 13px; color: #D6E0F2; white-space: nowrap; }
.btn-sommaire { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.6);
  background: none; color: #FFF; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; flex: none; }
.progression-lecon { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.3); } /* téléphone seulement : sur ordinateur, le sommaire montre la progression */
.progression-lecon > span { display: block; height: 100%; background: var(--jaune); }
.fin-lecon { display: flex; flex-direction: column-reverse; gap: 10px; } /* téléphone : « Terminer » en premier, sur toute la largeur */
.sommaire > :not(nav) { flex-shrink: 0; }
.cadre-lecon { flex: 1; display: block; }
.sommaire { display: none; background: var(--blanc); }
.app-lecon.sommaire-ouvert .sommaire { display: flex; flex-direction: column; gap: 12px; position: fixed; inset: 0; z-index: 120; overflow: hidden; padding: 18px 16px 0; }
.sommaire-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fermer-sommaire { width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid var(--bord); background: var(--blanc); font-size: 24px; line-height: 1; cursor: pointer; color: var(--texte); }
.sommaire nav { display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: 18px; } /* seule la liste défile */
.module-sommaire { display: flex; flex-direction: column; gap: 2px; }
.module-sommaire > strong { font-size: 12.5px; color: var(--texte-2); padding: 4px 8px; }
.etape-sommaire { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 8px; color: var(--texte); text-decoration: none !important; font-size: 14px; line-height: 1.35; }
.etape-sommaire:hover { background: var(--fond-2); }
.etape-sommaire .titre { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.etape-sommaire small { font-size: 12px; color: var(--texte-3); }
.etape-sommaire .puce { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--bord-fort); display: flex; align-items: center; justify-content: center; }
.etape-sommaire.termine .puce { background: var(--bleu-clair); border-color: var(--bleu-clair); }
.etape-sommaire.en-cours .puce { border-color: var(--bleu-clair); box-shadow: inset 0 0 0 4px #FFF; background: var(--bleu-clair); }
.etape-sommaire.actuelle { background: var(--bleu-pale); font-weight: 700; color: var(--bleu); }
.etape-sommaire.actuelle .puce { border-color: var(--bleu); background: var(--bleu); box-shadow: inset 0 0 0 4px var(--bleu-pale); }

/* v2.47 : espace agent sur ordinateur — pleine largeur, menu en haut, cartes en grille ; le téléphone ne change pas */
@media (min-width: 960px) {
  .app { max-width: none; --marge: max(32px, calc((100% - 1120px) / 2)); }
  .entete-app, .entete-page { padding-left: var(--marge); padding-right: var(--marge); }
  .entete-app { padding-top: 22px; padding-bottom: 22px; }
  .nav-bas { order: -1; position: sticky; top: 0; left: auto; transform: none; max-width: none; height: 56px; padding: 0 var(--marge);
    justify-content: flex-start; gap: 6px; border-top: 0; border-bottom: 1px solid var(--bord); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
  .entete-app { order: -2; }
  .nav-bas a { flex-direction: row; gap: 8px; font-size: 14.5px; height: 100%; padding: 0 16px; min-width: 0; }
  .nav-bas a:hover { color: var(--bleu); }
  .nav-bas a.actif::after { position: absolute; left: 12px; right: 12px; bottom: 0; width: auto; height: 3px; }
  .nav-bas .compteur { top: 9px; right: 2px; }
  .contenu { width: 100%; max-width: 1184px; margin: 0 auto; padding: 32px 32px 56px; gap: 20px; }
  .page-formations, .page-certificats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; align-content: start; }
  .page-certificats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-formations > :not(.formation), .page-certificats > .sur-titre, .page-certificats > .centre { grid-column: 1 / -1; }
  .page-notifications, .page-profil { max-width: 880px; }
  .app > .entete-page + .contenu { max-width: 904px; }
  .entete-page { --marge: max(32px, calc((100% - 840px) / 2)); } /* titre aligné sur le texte de la leçon */
  .suivi-animatiques { bottom: 16px; }
  /* v2.48 : en-tête sur une ligne, Administration dans la barre d'onglets, quatre tuiles de situation */
  .entete-app { flex-direction: row; align-items: center; padding-top: 16px; padding-bottom: 16px; gap: 28px; }
  .entete-app > .ligne { flex: 1; justify-content: flex-start !important; gap: 28px !important; }
  .entete-app .salut { gap: 14px; text-align: right; }
  .entete-app .nom { font-size: 17px; }
  .entete-app .avatar { width: 42px; height: 42px; }
  .nav-bas .lien-admin { display: flex; margin-left: auto; color: var(--bleu); font-weight: 600; }
  .nav-bas .onglet-profil, .menu-compte .seulement-mobile { display: none; }
  .menu-compte .seulement-pc { display: flex; }
  .situation { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pied-agent { padding: 32px var(--marge) 28px; }
  .grille-nouveautes { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .pied-colonnes { grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
  /* v2.52 : leçon avec son sommaire */
  .entete-lecon { --marge: max(32px, calc((100% - 1240px) / 2)); }
  .rang-lecon { display: block; }
  .logo-entete { display: flex; padding-right: 20px; margin-right: 6px; border-right: 1px solid rgba(255,255,255,.3); }
  .btn-sommaire, .progression-lecon { display: none; }
  .fin-lecon { flex-direction: row; }
  .fin-lecon > .btn-primaire { flex: 1; }
  .cadre-lecon { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; width: 100%; max-width: 1304px; margin: 0 auto; padding: 0 32px; align-items: start; }
  .app-lecon .sommaire { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 92px; max-height: calc(100vh - 116px); overflow: hidden;
    margin: 32px 0; padding: 18px 12px 0 16px; border: 1px solid var(--bord); border-radius: 14px; }
  .fermer-sommaire { display: none; }
  .cadre-lecon > .contenu { max-width: 900px; padding: 32px 0 56px; }
}

/* ======================= v2.57 : affichage de niveau « plateforme » ======================= */
/* Squelette de chargement */
.sq { background: linear-gradient(90deg, var(--fond-2) 25%, var(--bord) 37%, var(--fond-2) 63%); background-size: 400% 100%; border-radius: 6px; animation: sq 1.3s ease infinite; }
@keyframes sq { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sq { animation: none; } }

/* Vignettes des cours */
.vignette { position: relative; flex: none; margin: -18px -18px 4px; border-radius: 14px 14px 0 0; overflow: hidden; aspect-ratio: 16 / 7; background: var(--fond-2); }
/* Cartes de cours alignées : le bloc d'action (bouton, état) reste collé en bas, quelle que soit la hauteur du texte */
.formation.a-vignette > :last-child { margin-top: auto; }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Galerie de modèles de messages piège (simulations) */
.section-titre { font-size: 15px; margin: 20px 0 8px; }
.modeles-canal { margin-bottom: 12px; }
.titre-canal { margin: 10px 0 8px; font-size: 14px; }
.galerie-modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px; }
.modele-piege { border: 1px solid var(--bord); border-radius: 12px; padding: 14px; background: var(--blanc); display: flex; flex-direction: column; gap: 8px; }
.modele-piege .modele-nom { font-size: 14px; }
.modele-apercu { font-size: 12.5px; margin: 0; flex: 1 1 auto; line-height: 1.45; }
.modele-piege .btn { align-self: flex-start; }
.canal-badge { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 9px; border-radius: 20px; color: #fff; }
.canal-badge.canal-email { background: #174899; }
.canal-badge.canal-whatsapp { background: #1FA855; }
.canal-badge.canal-sms { background: #4D4D8A; }
.canal-badge.canal-autre { background: #777; }
.modele-piege.cliquable { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.modele-piege.cliquable:hover { border-color: #174899; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.voir-apercu { font-size: 12px; font-weight: 600; color: #174899; }
/* Maquettes réalistes des messages piège (aperçu) */
.maq-email { border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; max-width: 580px; }
.maq-email-entete { background: #f3f4f6; color: #1a1a1a; padding: 12px 14px; border-bottom: 1px solid var(--bord); font-size: 13px; }
.maq-email-ligne { margin: 2px 0; }
.maq-email .maq-lbl { color: #777; }
.maq-email-corps { padding: 16px 14px; font-size: 14px; line-height: 1.55; color: #1a1a1a; background: #fff; }
.faux-lien { color: #174899; text-decoration: underline; word-break: break-all; }
.faux-bouton { display: inline-block; background: #174899; color: #fff !important; padding: 8px 16px; border-radius: 8px; text-decoration: none; margin-top: 8px; font-weight: 600; }
.maq-wa { max-width: 420px; border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; }
.maq-wa-entete { background: #075E54; color: #fff; padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.maq-wa-num { margin-left: auto; font-weight: 400; opacity: .85; font-size: 12px; }
.maq-wa-fond { background: #E5DDD5; padding: 16px 12px; }
.maq-wa-bulle { background: #fff; color: #111; border-radius: 2px 10px 10px 10px; padding: 10px 12px; max-width: 88%; font-size: 14px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.maq-wa-heure { display: block; text-align: right; font-size: 10.5px; color: #888; margin-top: 4px; }
.maq-sms { max-width: 380px; border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; }
.maq-sms-entete { background: #f3f4f6; color: #555; padding: 10px 14px; text-align: center; font-size: 12.5px; border-bottom: 1px solid var(--bord); }
.maq-sms-fond { padding: 16px 12px; background: #fff; }
.maq-sms-bulle { background: #E9E9EB; color: #111; border-radius: 16px; padding: 10px 14px; max-width: 88%; font-size: 14px; line-height: 1.45; }
/* Assistant de campagne : barre d'étapes, entonnoir, stats */
.etapes { display: flex; margin-bottom: 14px; }
.etape { flex: 1; min-width: 92px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; padding: 6px 4px; position: relative; color: #8a8a88; cursor: default; }
.etape:not(:last-child)::after { content: ''; position: absolute; top: 18px; left: 50%; width: 100%; height: 2px; background: var(--bord); z-index: 0; }
.etape-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--blanc); border: 2px solid var(--bord); font-weight: 700; z-index: 1; }
.etape-lib { font-size: 12.5px; }
.etape-faite { color: #174899; cursor: pointer; }
.etape-faite .etape-num { background: #174899; border-color: #174899; color: #fff; }
.etape-active { color: #174899; }
.etape-active .etape-lib { font-weight: 700; }
.etape-active .etape-num { border-color: #174899; color: #174899; box-shadow: 0 0 0 4px rgba(23,72,153,.14); }
.assistant-corps { margin: 0 0 12px; min-height: 150px; }
.assistant-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.recap { display: grid; gap: 2px; margin: 8px 0 16px; }
.recap-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.modele-piege.choisi { border-color: #174899; box-shadow: 0 0 0 2px rgba(23,72,153,.22); }
.stats-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat-carte { border: 1px solid var(--bord); border-radius: 12px; padding: 16px 14px; text-align: center; }
.stat-val { font-size: 24px; font-weight: 700; line-height: 1.1; }
.stat-lib { margin-top: 4px; }
.funnel { display: grid; gap: 10px; margin: 10px 0; }
.funnel-etape { display: flex; align-items: center; gap: 12px; }
.funnel-barre { height: 26px; border-radius: 6px; min-width: 8px; display: block; transition: width .3s; }
.funnel-lib { white-space: nowrap; font-size: 14px; }
.vignette-generee { display: flex; align-items: center; justify-content: center; background: #174899; }
.vignette-fond-hote { position: absolute; inset: 0; }
.vignette-fond { width: 100%; height: 100%; display: block; }
.vignette-symbole { position: relative; z-index: 1; opacity: .92; }
.vignette-code { position: absolute; left: 10px; top: 9px; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: rgba(255,255,255,.95); background: rgba(0,0,0,.26); padding: 3px 8px; border-radius: 7px; }
.vignette-niveau { position: absolute; right: 10px; bottom: 8px; z-index: 1; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.95); background: rgba(0,0,0,.22); padding: 2px 8px; border-radius: 20px; }
.carte.a-vignette { padding-top: 18px; overflow: hidden; }
.formation.a-vignette { display: flex; flex-direction: column; gap: 8px; }

/* Explorer */
.filtres-explorer { display: flex; flex-wrap: wrap; gap: 10px; }
.filtres-explorer input[type="search"] { flex: 1 1 200px; }
.filtres-explorer select { flex: 0 1 auto; }
.grille-cours { display: grid; grid-template-columns: 1fr; gap: 16px; }
.note-etoiles { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--or-texte); }
@media (min-width: 700px) { .grille-cours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grille-cours { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Astuces */
.carte-astuce .html-lecon { font-size: inherit; }
.carte-astuce .html-lecon p { margin: 0 0 .5em; }

/* Test de positionnement */
.carte-positionnement { background: var(--bleu-pale); color: var(--texte); border: 1px solid var(--bleu-clair); }
.carte-positionnement .sur-titre, .carte-positionnement .titre { color: var(--bleu); }
.carte-positionnement .detail { color: var(--texte-2); }
.carte-positionnement .bouton-rond { background: var(--blanc); }

/* Avis de fin de cours */
.etoiles-saisie { display: flex; gap: 4px; }
.etoile-btn { background: none; border: 0; padding: 2px; cursor: pointer; line-height: 0; border-radius: 6px; }
.etoile-btn:hover { background: var(--fond-2); }
.carte-avis textarea { width: 100%; resize: vertical; }

/* Lecture audio et bascule de langue */
.barre-lecture { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Chapitres de vidéo */
.chapitres { display: flex; flex-direction: column; gap: 2px; }
.chapitres .etiquette { margin-bottom: 2px; }
.chapitre { display: flex; gap: 10px; align-items: baseline; text-align: left; background: none; border: 0; padding: 7px 8px; border-radius: 8px; font: inherit; color: var(--texte); cursor: pointer; }
.chapitre:hover { background: var(--fond-2); }
.chapitre-t { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--bleu); min-width: 44px; }
.transcription summary { cursor: pointer; font-weight: 600; color: var(--bleu); display: flex; align-items: center; gap: 8px; }

/* Contenu SCORM */
.lecteur iframe.scorm { width: 100%; aspect-ratio: 16 / 10; height: auto; min-height: 420px; background: var(--blanc); border: 1px solid var(--bord); }

/* Questions au formateur */
.questions-formateur textarea { width: 100%; resize: vertical; }
.echange { border-left: 3px solid var(--bord); padding: 2px 0 2px 12px; }
.echange.mien { border-left-color: var(--bleu); }
.echange .question-q { font-size: 14px; }
.echange .question-r { margin-top: 8px; padding: 10px 12px; background: var(--bleu-pale); border-radius: 10px; font-size: 14px; }

/* Badges, série, classement */
.serie { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--rouge-texte); background: var(--rouge-pale); padding: 4px 10px; border-radius: 999px; }
.grille-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.badge-carte { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 8px; border: 1px solid var(--bord); border-radius: 12px; background: var(--fond); opacity: .55; }
.badge-carte.obtenu { opacity: 1; background: var(--jaune-pale); border-color: var(--or); }
.badge-carte strong { font-size: 12.5px; line-height: 1.2; }
.ligne-classement { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--bord); border-radius: 10px; }
.ligne-classement.mienne { border-color: var(--bleu); background: var(--bleu-pale); font-weight: 700; }
.ligne-classement .rang { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--bleu); color: #FFF; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ligne-classement .titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-classement .etat { font-variant-numeric: tabular-nums; color: var(--bleu); font-weight: 700; }

/* Réglages (segments) */
.reglage { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.reglage > span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.reglage-langue select { max-width: 220px; }
.reglage-choix { display: inline-flex; border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; }
.segment { background: var(--blanc); border: 0; border-left: 1px solid var(--bord); padding: 8px 14px; font: inherit; font-size: 13.5px; color: var(--texte-2); cursor: pointer; }
.segment:first-child { border-left: 0; }
.segment.actif { background: var(--bleu); color: #FFF; font-weight: 600; }

/* Nav à 5 onglets : un peu plus serré sur les petits téléphones */
@media (max-width: 380px) { .nav-bas a { min-width: 0; font-size: 10px; } .nav-bas a span.compteur { right: 6px; } }

/* v2.57 : score de risque par structure (back office) */
.ligne-risque { display: flex; align-items: center; gap: 14px; }
.ligne-risque .titre { flex: 0 0 240px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jauge-risque { flex: 1; height: 12px; border-radius: 6px; background: var(--fond-2); overflow: hidden; }
.jauge-risque > span { display: block; height: 100%; border-radius: 6px; }

/* v2.57.1 : code d'invitation cliquable pour copier */
.code-copiable { display: inline-flex; align-items: center; gap: 8px; background: var(--bleu-pale); border: 1px solid var(--bord); border-radius: 8px; padding: 6px 10px;
  font: inherit; font-weight: 700; letter-spacing: 2px; color: var(--bleu); white-space: nowrap; cursor: pointer; }
.code-copiable:hover { border-color: var(--bleu); }
.code-copiable .copier-ic { display: inline-flex; }

/* v2.59 : bande « Pour vous » en bas de l'accueil (astuce, cours recommandés, progression, à faire) */
.bande-accueil { display: flex; flex-direction: column; gap: 16px; }
.titre-bande { font-size: 17px !important; margin: 0 !important; }
.bloc-astuce .html-lecon { font-size: 14px; }
.bloc-astuce .html-lecon p { margin: 0 0 .5em; }
.bloc-reco .sur-titre, .bloc-panneaux .sur-titre { display: block; margin-bottom: 8px; }
.grille-reco { display: grid; grid-template-columns: 1fr; gap: 12px; }
.grille-reco .formation.a-vignette { padding: 16px; gap: 6px; }
.grille-reco .vignette { margin: -16px -16px 2px; }
.grille-reco h3 { font-size: 15px; line-height: 1.25; }
.bloc-panneaux { display: grid; grid-template-columns: 1fr; gap: 12px; }
.panneau { gap: 10px; }
.panneau .serie { align-self: center; }
.ligne-afaire { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 10px; background: var(--fond); color: var(--texte); text-decoration: none !important; }
.ligne-afaire:hover { border-color: var(--bleu); }
.ligne-afaire .icone { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--blanc); border: 1px solid var(--bord); display: flex; align-items: center; justify-content: center; }
.ligne-afaire .titre { flex: 1; min-width: 0; font-size: 14px; }
@media (min-width: 760px) {
  .grille-reco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bloc-panneaux { grid-template-columns: 1fr 1fr; }
}

/* v2.60 : Explorer montre tout le catalogue ; cours ciblés « Sur affectation » */
.grille-cours .formation h3 { font-size: 15.5px; line-height: 1.25; }
.sur-affectation { display: block; text-align: center; padding: 8px 10px; border: 1px dashed var(--bord-fort); border-radius: 8px; color: var(--texte-2); font-size: 13px; font-weight: 600; }
.sur-affectation svg { vertical-align: -2px; }
.cours-cible .vignette { filter: saturate(.7); }
.cours-cible .vignette::after { content: ''; position: absolute; inset: 0; background: rgba(20,24,28,.18); }

/* v2.61 : bouton « Afficher plus » du catalogue (pleine largeur de la grille) */
.grille-cours .afficher-plus { grid-column: 1 / -1; justify-self: center; margin-top: 4px; }