/* e-vision RSE 360° learning — charte « Carotte »
   Le parcours se lit comme une carotte de forage : des strates (les niveaux) que l'on traverse.
   Kaolin pour le fond, schiste pour l'encre, malachite pour l'action, latérite pour l'alerte et la note, ocre pour le signal,
   manganèse (la ressource de Moanda) pour le chrome sombre. Archivo à chasse variable : titres et chiffres élargis, texte courant normal.
   Mouvements : nommés une fois (variables --m-*), amortis sans rebond pour tout ce qui est déclenché au clic, désactivés sur demande. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  /* Matières */
  --kaolin: #e8ebe5; --kaolin-2: #dde1d9;
  --feuille: #f6f7f3; --surface: #ffffff; --surface-2: #f9faf7; --surface-3: #eef0eb;
  --schiste: #17211c; --schiste-2: #222d27; --schiste-3: #34413a;
  --manganese: #3a3350; --manganese-2: #2a2539; --manganese-pale: #efedf4;
  --malachite: #0b7353; --malachite-vif: #12a172; --malachite-pale: #e3f2eb; --malachite-encre: #075a41; --malachite-clair: #8fc3ab;
  --laterite: #b4462b; --laterite-pale: #f8e8e3; --laterite-encre: #8e3119;
  --ocre: #c4861c; --ocre-pale: #f8efdd; --ocre-encre: #865a0e;
  --cuivre: #a8693a; --cuivre-pale: #f4ebe2;
  /* Alias conservés par les écrans */
  --fond: var(--feuille); --papier: var(--feuille); --basalte: var(--manganese-2);
  --sur-sombre: #e9e7f0; --sur-sombre-2: #a7a2b8;
  /* Encre et filets */
  --encre: #17211c; --encre-2: #4d5852; --encre-3: #858f89;
  --ligne: rgba(23, 33, 28, .09); --ligne-forte: rgba(23, 33, 28, .17);
  /* Géométrie : rayons étagés selon la hiérarchie */
  --r-s: 7px; --r: 11px; --r-l: 15px; --r-xl: 22px;
  /* Ombres teintées de schiste, une seule source de lumière (au-dessus) */
  --ombre-1: 0 1px 1px rgba(23, 33, 28, .04);
  --ombre-2: 0 1px 2px rgba(23, 33, 28, .05), 0 8px 24px -10px rgba(23, 33, 28, .14);
  --ombre-3: 0 2px 6px rgba(23, 33, 28, .06), 0 28px 60px -20px rgba(23, 33, 28, .30);
  --ombre: var(--ombre-2);
  --anneau-focus: 0 0 0 3px rgba(18, 161, 114, .22);
  /* Mouvement nommé */
  --courbe: cubic-bezier(.22, 1, .36, 1);          /* arrivée douce, sans dépassement */
  --courbe-sortie: cubic-bezier(.4, 0, 1, 1);
  --m-tap: .16s;  --m-ui: .32s;  --m-sortie: .16s;
  --ease: var(--courbe);
  /* Typographie */
  --sans: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --large: 116%;   /* chasse des titres et des chiffres */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100dvh; background: var(--feuille); color: var(--encre); font: 400 15px/1.55 var(--sans); font-stretch: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: var(--malachite); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--m-tap); }
a:hover { color: var(--malachite-encre); }
h1, h2, h3, h4 { margin: 0; font-weight: 620; font-stretch: var(--large); letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 640; font-stretch: 122%; letter-spacing: -.035em; }
h2 { font-size: 19px; letter-spacing: -.02em; }
h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0 0 .8em; text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(18, 161, 114, .2); color: var(--encre); }
:focus-visible { outline: 2px solid var(--malachite-vif); outline-offset: 2px; border-radius: 4px; }
#contenu:focus { outline: none; }
.mono, .num { font-variant-numeric: tabular-nums; }
.code { font-family: var(--mono); font-feature-settings: "zero"; letter-spacing: -.01em; }
.muet { color: var(--encre-3); }
.discret { color: var(--encre-2); }
.petit { font-size: 13.5px; }
.tpetit { font-size: 12px; }
.gras { font-weight: 600; }
.centre { text-align: center; }
.droite { text-align: right; }
.cache { display: none !important; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ico { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; }
.ico svg { width: 100%; height: 100%; }

/* Petit libellé : casse normale, gris (plus de capitales espacées) */
.sur { font: 550 12.5px/1.25 var(--sans); letter-spacing: 0; color: var(--encre-3); }
.sur.ocre { color: var(--ocre-encre); } .sur.vert { color: var(--malachite); }
.contexte { margin: 0; font-size: 13.5px; color: var(--encre-2); }

/* ------------------------------------------------------------------ Mouvement */
@keyframes entre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes sortFondu { to { opacity: 0; } }
@keyframes ouvre { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ferme { to { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes remplir { from { transform: scaleX(0); } }
@keyframes pousse { from { transform: scaleY(0); } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .5; } }
@keyframes onde { 0% { box-shadow: 0 0 0 0 currentColor; } 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes progression { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
/* Compatibilité : anciens noms d'animation encore référencés */
@keyframes monteDoux { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes zoomDoux { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

/* Transitions de page natives : le contenu glisse et se fond, l'indicateur de menu se déplace d'une entrée à l'autre */
#contenu { view-transition-name: contenu; }
.lateral a.lien .indic { view-transition-name: menu-actif; }
.nav-h a .indic { view-transition-name: nav-actif; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(contenu) { animation: none; }
::view-transition-old(contenu) { animation: sortFondu .12s var(--courbe-sortie) both; }
::view-transition-new(contenu) { animation: entre .34s var(--courbe) both; }
::view-transition-group(menu-actif), ::view-transition-group(nav-actif) { animation-duration: .34s; animation-timing-function: var(--courbe); }

/* Progression du chargement (n'apparaît qu'au-delà de 120 ms) */
.progression { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 450; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .2s; }
.progression::before { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--malachite-vif), transparent); animation: progression 1s var(--courbe) infinite; }
.progression.actif { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ------------------------------------------------------------------ Mise en page */
.page { max-width: 1240px; margin: 0 auto; padding: 32px 36px 88px; }
.page.etroite { max-width: 880px; }
.rangee { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rangee.espace { justify-content: space-between; }
.pile > * + * { margin-top: 16px; }
.pile-l > * + * { margin-top: 28px; }
.pile > .cache:first-child + *, .pile-l > .cache:first-child + * { margin-top: 0; }
.grille { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.flex1 { flex: 1; min-width: 0; }
@media (max-width: 960px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } .page { padding: 22px 16px 72px; } }

.entete-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px 28px; flex-wrap: wrap; margin-bottom: 28px; }
.entete-page .titres { min-width: 0; max-width: 72ch; }
.entete-page .contexte { margin-bottom: 8px; }
.entete-page .sur { display: block; margin-bottom: 8px; }
.entete-page p { margin: 10px 0 0; color: var(--encre-2); font-size: 15px; }
.entete-page .actions { gap: 8px; }

/* Valeur absente : discrète, à chasse normale */
.absent { font-weight: 300; font-stretch: 100%; color: var(--encre-3); letter-spacing: 0; }

/* Lien de retour : flèche qui recule au survol */
.retour { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 13.5px; font-weight: 550; color: var(--encre-2); text-decoration: none; }
.retour .ico { width: 16px; height: 16px; transform: rotate(180deg); transition: transform var(--m-ui) var(--courbe); }
.retour:hover { color: var(--encre); }
.retour:hover .ico { transform: rotate(180deg) translateX(3px); }
.page > .retour:first-child, .page > .rangee:first-child > .retour { margin-bottom: 18px; }

/* En-tête de module : titre élargi, chapeau, relevé à droite */
.entete-module { padding-bottom: 12px; }
.entete-module-corps { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; padding-bottom: 28px; border-bottom: 1px solid var(--ligne); }
.entete-module h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.04; margin-top: 10px; max-width: 26ch; }
.chapeau { margin: 14px 0 0; max-width: 64ch; font-size: 16px; color: var(--encre-2); }
.dd-texte { font: 500 14px var(--sans) !important; letter-spacing: 0 !important; padding-top: 8px; }
.page.suite { padding-top: 16px; }
@media (max-width: 860px) { .entete-module-corps { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Panneaux : une surface, un filet, pas d'ombre portée */
.panneau { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); overflow: hidden; }
.panneau > .tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 4px; }
.panneau > .tete h3 { font-size: 15px; font-weight: 620; font-stretch: 108%; }
.panneau > .corps { padding: 14px 20px 20px; }
.panneau > .corps:first-child { padding-top: 20px; }
.panneau > .corps.serre { padding: 8px 0 0; }
.panneau > .corps.serre:first-child { padding-top: 0; }
.panneau.sombre { background: var(--manganese-2); border-color: transparent; color: var(--sur-sombre); }
/* États : un repère latéral fin plutôt qu'une bande colorée */
.panneau.accent, .panneau.alerte, .panneau.signal { position: relative; }
.panneau.accent::before, .panneau.alerte::before, .panneau.signal::before { content: ""; position: absolute; left: 0; top: 18px; width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--malachite-vif); }
.panneau.alerte::before { background: var(--laterite); }
.panneau.signal::before { background: var(--ocre); }
details.panneau > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary.sur::before { content: "▸ "; display: inline-block; transition: transform var(--m-ui) var(--courbe); }
details[open] > summary.sur::before { transform: rotate(90deg); }

/* État vide : une ligne d'orientation, pas une boîte géante */
.vide { display: flex; align-items: center; gap: 12px; padding: 14px 0; color: var(--encre-2); font-size: 14px; text-align: left; }
.panneau .corps.serre > .vide { padding: 16px 20px 20px; }
.vide-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858f89' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M4 13h4l2 3h4l2-3h4'/%3E%3Cpath d='M5.5 6.5 4 13v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5l-1.5-6.5A2 2 0 0 0 16.6 5H7.4a2 2 0 0 0-1.9 1.5z'/%3E%3C/svg%3E") center / 16px no-repeat; }

/* Indicateurs : une bande continue (relevé), séparée par des filets, plutôt que des cartes identiques */
.grille:has(> .kpi) { gap: 0; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); overflow: hidden; }
.kpi { position: relative; padding: 20px 22px 18px; background: transparent; }
.grille > .kpi + .kpi { box-shadow: inset 1px 0 var(--ligne); }
.kpi .sur { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 550; color: var(--encre-2); }
.kpi .val { font: 600 38px/1 var(--sans); font-stretch: 118%; letter-spacing: -.035em; margin-top: 14px; font-variant-numeric: tabular-nums; }
.kpi .val small { font-size: 15px; color: var(--encre-3); font-weight: 500; margin-left: 3px; letter-spacing: 0; font-stretch: 100%; }
.kpi .pied { font-size: 12.5px; color: var(--encre-3); margin-top: 10px; }
/* Repère de strate sous le chiffre, à la couleur de l'état */
.kpi::after { content: ""; position: absolute; left: 22px; bottom: 0; width: 28px; height: 3px; border-radius: 3px 3px 0 0; background: var(--k, var(--ligne-forte)); }
@media (max-width: 960px) { .grille > .kpi:nth-child(3) { box-shadow: inset 0 1px var(--ligne); } .grille > .kpi:nth-child(4) { box-shadow: inset 1px 0 var(--ligne), inset 0 1px var(--ligne); } }
@media (max-width: 640px) { .grille:has(> .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi { padding: 16px 16px 14px; } .kpi::after { left: 16px; } .kpi .val { font-size: 30px; margin-top: 10px; } .kpi .pied { font-size: 12px; } }

/* ------------------------------------------------------------------ Boutons : réaction à l'appui, pas au relâchement */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 17px; border-radius: 999px; border: 1px solid transparent;
  background: var(--malachite); color: #fff; font-weight: 600; font-size: 14px; letter-spacing: -.003em; cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(7, 90, 65, .25);
  transition: transform var(--m-tap) var(--courbe), background var(--m-tap), border-color var(--m-tap), color var(--m-tap), box-shadow var(--m-ui) var(--courbe); }
.btn:hover { color: #fff; background: var(--malachite-encre); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 16px -8px rgba(7, 90, 65, .6); }
.btn:active { transform: scale(.97); transition-duration: .06s; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn.sec { background: var(--surface); color: var(--encre); border-color: var(--ligne-forte); box-shadow: none; }
.btn.sec:hover { background: var(--surface-3); border-color: rgba(23, 33, 28, .26); color: var(--encre); }
.btn.fantome { background: transparent; color: var(--encre-2); box-shadow: none; }
.btn.fantome:hover { background: var(--surface-3); color: var(--encre); box-shadow: none; }
.btn.danger { background: var(--laterite); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(110, 30, 10, .25); }
.btn.danger:hover { background: var(--laterite-encre); }
.btn.danger.sec { background: var(--surface); color: var(--laterite); border-color: rgba(180, 70, 43, .32); box-shadow: none; }
.btn.danger.sec:hover { background: var(--laterite-pale); }
.btn.ocre { background: var(--ocre); color: #24180a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(110, 70, 5, .25); }
.btn.ocre:hover { background: #b07613; color: #24180a; }
.btn.sombre { background: var(--manganese); }
.btn.sombre:hover { background: var(--manganese-2); }
.btn.mini { height: 32px; padding: 0 13px; font-size: 13px; }
.btn.grand { height: 50px; padding: 0 26px; font-size: 15.5px; }
.btn.bloc { width: 100%; }
.btn .fl { transition: transform var(--m-ui) var(--courbe); }
.btn:hover .fl { transform: translateX(3px); }
.btn-ico { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; border: 0; background: transparent; color: var(--encre-2); cursor: pointer; transition: background var(--m-tap), color var(--m-tap), transform var(--m-tap) var(--courbe); }
.btn-ico:hover { background: var(--surface-3); color: var(--encre); }
.btn-ico:active { transform: scale(.94); }

/* ------------------------------------------------------------------ Formulaires */
.champ { display: block; }
.champ > span { display: block; font-size: 13px; font-weight: 600; color: var(--encre); margin-bottom: 7px; }
.champ > small { display: block; color: var(--encre-3); font-size: 12.5px; margin-top: 6px; }
.saisie, .champ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .champ select, .champ textarea {
  width: 100%; height: 42px; padding: 0 13px; border: 1px solid var(--ligne-forte); border-radius: var(--r); background: var(--surface); transition: border-color var(--m-tap), box-shadow var(--m-ui) var(--courbe); }
.saisie:hover, .champ input:hover, .champ select:hover, .champ textarea:hover { border-color: rgba(23, 33, 28, .28); }
.champ textarea, textarea.saisie { height: auto; min-height: 96px; padding: 11px 13px; line-height: 1.55; resize: vertical; }
.saisie:focus, .champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--malachite-vif); box-shadow: var(--anneau-focus); }
select.saisie, .champ select { appearance: none; padding-right: 34px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%234d5852' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center; }
select[multiple].saisie, .champ select[multiple] { height: auto; padding: 6px; background-image: none; }
.saisie.mini { height: 34px; font-size: 13.5px; border-radius: 9px; }
input[type="file"] { font-size: 13px; color: var(--encre-2); }
input[type="file"]::file-selector-button { height: 32px; padding: 0 13px; margin-right: 10px; border: 1px solid var(--ligne-forte); border-radius: 999px; background: var(--surface); font: 600 13px var(--sans); color: var(--encre); cursor: pointer; transition: background var(--m-tap); }
input[type="file"]::file-selector-button:hover { background: var(--surface-3); }
.case { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; }
.case input, input[type="checkbox"], input[type="radio"] { accent-color: var(--malachite); }
.case input { width: 17px; height: 17px; }
.form-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px 18px; }
.form-grille .large { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--ligne); border-radius: var(--r); padding: 18px; margin: 0; background: var(--surface-2); }
legend { padding: 0 8px; font: 600 13px var(--sans); color: var(--encre-2); }
.erreur-form { background: var(--laterite-pale); color: var(--laterite-encre); border: 1px solid rgba(180, 70, 43, .22); padding: 11px 14px; font-size: 14px; border-radius: var(--r); animation: entre var(--m-ui) var(--courbe); }

/* ------------------------------------------------------------------ Tableaux */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
table.t th { text-align: left; font: 550 12.5px/1.2 var(--sans); color: var(--encre-3); padding: 12px 14px; border-bottom: 1px solid var(--ligne); background: var(--surface); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
table.t td { padding: 13px 14px; border-bottom: 1px solid var(--ligne); vertical-align: middle; transition: background var(--m-tap); }
table.t th:first-child, table.t td:first-child { padding-left: 20px; }
table.t th:last-child, table.t td:last-child { padding-right: 20px; }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover td { background: var(--surface-2); }
table.t tr.cliquable { cursor: pointer; }
table.t tr.cliquable:active td { background: var(--surface-3); }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.t td.actions { text-align: right; white-space: nowrap; }
table.t.compacte td { padding: 8px 12px; }
table.t.compacte th:first-child, table.t.compacte td:first-child { padding-left: 16px; }

/* Pastilles d'état : carrées, pas de pilule */
.pastille { display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 8px; border-radius: 6px; font: 600 12px/1 var(--sans); background: var(--surface-3); color: var(--encre-2); white-space: nowrap; }
.pastille::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: currentColor; }
.pastille.ok { background: var(--malachite-pale); color: var(--malachite-encre); }
.pastille.attention { background: var(--ocre-pale); color: var(--ocre-encre); }
.pastille.danger { background: var(--laterite-pale); color: var(--laterite-encre); }
.pastille.neutre::before, .pastille.sans::before { display: none; }
.pastille.cuivre { background: var(--cuivre-pale); color: #7e4c25; }
.pastille.mg { background: var(--manganese-pale); color: var(--manganese); }
.etiq { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 7px; background: var(--surface-3); font: 500 12.5px var(--sans); color: var(--encre-2); margin: 0 4px 4px 0; text-decoration: none; transition: background var(--m-tap), color var(--m-tap); }
a.etiq:hover { background: var(--malachite-pale); color: var(--malachite-encre); }

/* Jauges */
.jauge { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.jauge > i { display: block; height: 100%; border-radius: 99px; background: var(--malachite-vif); transform-origin: left; animation: remplir .8s var(--courbe) both; transition: width .5s var(--courbe); }
.jauge.ocre > i { background: var(--ocre); } .jauge.laterite > i { background: var(--laterite); }
.jauge.epaisse { height: 10px; }

/* ------------------------------------------------------------------ Marque */
.marque { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--encre); }
.marque:hover { color: var(--encre); }
.marque .tuile { width: 34px; height: 34px; flex: none; transition: transform var(--m-ui) var(--courbe); }
.marque:hover .tuile { transform: rotate(-4deg); }
.marque .tuile svg { width: 100%; height: 100%; }
.marque .mots { display: flex; flex-direction: column; line-height: 1.05; }
.marque .sigle { font: 650 15.5px/1.1 var(--sans); font-stretch: 112%; letter-spacing: -.02em; white-space: nowrap; }
.marque .sigle em { font-style: normal; }
.marque .deg { font: 500 12px var(--sans); color: var(--encre-3); margin-top: 3px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 11px; background: var(--manganese-pale); color: var(--manganese); font: 650 12px var(--sans); font-stretch: 112%; text-decoration: none; }
.puce-user { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 14px; text-decoration: none; color: var(--encre); transition: background var(--m-tap); min-width: 0; }
.puce-user:hover { background: var(--surface-3); color: var(--encre); }

/* ------------------------------------------------------------------ Espace apprenant : barre supérieure */
.coque-apprenant { min-height: 100dvh; }
.barre { position: sticky; top: 0; z-index: 30; background: rgba(246, 247, 243, .82); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--ligne); }
.barre .int { max-width: 1240px; margin: 0 auto; padding: 0 36px; height: 64px; display: flex; align-items: center; gap: 32px; }
.nav-h { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-3); }
.nav-h a { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border-radius: 999px; color: var(--encre-2); text-decoration: none; font-weight: 550; font-size: 14px; transition: color var(--m-tap); }
.nav-h a .ico { width: 17px; height: 17px; color: var(--encre-3); transition: color var(--m-tap); }
.nav-h a:hover { color: var(--encre); }
.nav-h a.actif { color: var(--encre); }
.nav-h a.actif .ico { color: var(--malachite); }
.nav-h a .indic { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface); box-shadow: 0 1px 2px rgba(23, 33, 28, .08), 0 2px 8px -2px rgba(23, 33, 28, .08); }
.utilisateur { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 550; }
@media (max-width: 820px) { .barre .int { padding: 0 14px; gap: 10px; } .barre .marque .mots, .utilisateur .nom { display: none; } .nav-h a { padding: 0 12px; } .nav-h a span:not(.indic) { display: none; } }

/* ------------------------------------------------------------------ Accueil apprenant : la carotte du parcours */
.accueil { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.accueil-gauche { position: sticky; top: 96px; }
.accueil-gauche > * + * { margin-top: 28px; }
.accueil .salut { margin: 12px 0 8px; font-size: clamp(40px, 4.6vw, 64px); font-weight: 650; font-stretch: 122%; letter-spacing: -.045em; line-height: .95; }
.releve { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 0; }
.releve > div { padding: 0 22px; border-left: 1px solid var(--ligne-forte); }
.releve > div:first-child { padding-left: 0; border-left: 0; }
.releve dt { font-size: 13px; color: var(--encre-2); }
.releve dd { margin: 6px 0 0; font: 600 30px/1 var(--sans); font-stretch: 118%; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.releve dd small { font-size: 14px; font-weight: 500; color: var(--encre-3); margin-left: 2px; letter-spacing: 0; font-stretch: 100%; }
.etape { display: grid; gap: 6px; justify-items: start; padding: 20px 22px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--ligne); }
.etape .etiquette { font-size: 13px; color: var(--malachite); font-weight: 600; }
.etape b { font-size: 18px; font-weight: 620; font-stretch: 110%; letter-spacing: -.015em; line-height: 1.25; }
.etape .discret { font-size: 14px; }
.etape .btn { margin-top: 10px; }
.etape.urgente { background: var(--ocre-pale); border-color: rgba(196, 134, 28, .35); }
.etape.urgente .etiquette { color: var(--ocre-encre); }

.carotte-parcours > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.legende { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--encre-3); }
.legende i { width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
.couches { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-xl); overflow: hidden; }
.couche-module { --carotte: 64px; position: relative; display: grid; grid-template-columns: var(--carotte) 54px minmax(0, 1fr) auto; align-items: center; gap: 0 18px; padding: 0 22px 0 0; min-height: 112px; text-decoration: none; color: inherit; border-top: 1px solid var(--ligne); transition: background var(--m-tap); }
.couche-module:first-child { border-top: 0; }
.couche-module:hover { background: var(--surface-2); color: inherit; }
.couche-module:active { background: var(--surface-3); }
/* Segment de carotte : trois sous-strates empilées, continues d'une ligne à l'autre */
.carotte-seg { align-self: stretch; display: grid; grid-template-rows: repeat(3, 1fr); margin-left: 22px; width: calc(var(--carotte) - 22px); background: var(--kaolin); box-shadow: inset 1px 0 rgba(23, 33, 28, .06), inset -1px 0 rgba(23, 33, 28, .06); }
.couche-module:first-child .carotte-seg { border-radius: 14px 14px 0 0; margin-top: 14px; }
.couche-module:last-child .carotte-seg { border-radius: 0 0 14px 14px; margin-bottom: 14px; }
.carotte-seg i { display: block; transform-origin: left; animation: remplir .7s var(--courbe) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.carotte-seg i.valide:nth-child(1), .legende i.valide { background: var(--malachite-clair); }
.carotte-seg i.valide:nth-child(2) { background: var(--malachite); }
.carotte-seg i.valide:nth-child(3) { background: var(--manganese); }
.carotte-seg i.ouvert, .legende i.ouvert { background: repeating-linear-gradient(135deg, rgba(11, 115, 83, .28) 0 2px, transparent 2px 7px); }
.carotte-seg i.verrou, .legende i.verrou { background: radial-gradient(rgba(23, 33, 28, .14) 1px, transparent 1.5px) 0 0 / 6px 6px; }
.legende i.valide { background: var(--malachite); }
.code-mod { font: 650 22px/1 var(--sans); font-stretch: 120%; letter-spacing: -.03em; color: var(--encre-3); }
.corps-mod { display: grid; gap: 7px; padding: 18px 0; min-width: 0; }
.corps-mod > b { font-size: 16px; font-weight: 620; font-stretch: 106%; letter-spacing: -.012em; line-height: 1.3; }
.niveaux { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--encre-3); }
.niv::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 6px; background: var(--kaolin-2); vertical-align: 1px; }
.niv.valide { color: var(--malachite-encre); } .niv.valide::before { background: var(--malachite); }
.niv.ouvert { color: var(--encre-2); } .niv.ouvert::before { background: var(--malachite-clair); }
.avance { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--encre-3); }
.jauge-fine { width: 120px; height: 3px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.jauge-fine i { display: block; height: 100%; background: var(--encre-2); border-radius: 3px; }
.note-mod { display: grid; justify-items: end; gap: 6px; font: 600 30px/1 var(--sans); font-stretch: 118%; letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-align: right; }
.note-mod small { font-size: 12px; font-weight: 500; color: var(--encre-3); letter-spacing: 0; font-stretch: 100%; }
.note-mod .sans-note { font-size: 12.5px; }
.note-mod .pastille { letter-spacing: 0; font-stretch: 100%; }
.badge-niveau { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; background: var(--surface); border: 1px solid var(--ligne-forte); }
.badge-niveau.n1 { color: var(--malachite); } .badge-niveau.n2 { color: var(--malachite-encre); border-color: rgba(11, 115, 83, .35); } .badge-niveau.n3 { color: var(--manganese); border-color: rgba(58, 51, 80, .35); }
@media (max-width: 1000px) { .accueil { grid-template-columns: 1fr; gap: 32px; } .accueil-gauche { position: static; } }
@media (max-width: 640px) {
  .couche-module { --carotte: 40px; grid-template-columns: var(--carotte) minmax(0, 1fr) auto; gap: 0 12px; padding-right: 14px; }
  .carotte-seg { margin-left: 14px; width: calc(var(--carotte) - 14px); }
  .code-mod { display: none; }
  .note-mod { font-size: 24px; }
  .releve dd { font-size: 24px; } .releve > div { padding: 0 14px; }
}

/* Blocs sobres et listes : titres de section, lignes séparées par des filets */
.bloc-sobre > header, .bloc-sobre > h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bloc-sobre h2 { font-size: 16px; font-stretch: 108%; }
.bloc-sobre .compte { min-width: 22px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 7px; background: var(--surface-3); font: 650 12px var(--sans); color: var(--encre-2); }
.liste-sobre { list-style: none; margin: 0; padding: 0; }
.liste-sobre > li { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--ligne); }
.liste-sobre > li:last-child { border-bottom: 1px solid var(--ligne); }
.liste-sobre b { display: block; font-size: 14px; font-weight: 600; }
.liste-sobre .flex1 > span { display: block; font-size: 12.5px; color: var(--encre-3); margin-top: 2px; }
.liste-sobre .date-courte { width: 56px; flex: none; font-size: 12.5px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.liste-sobre.cliquable > li { padding: 0; }
.liste-sobre.cliquable a { flex: 1; display: flex; align-items: center; gap: 14px; padding: 11px 10px; margin: 0 -10px; border-radius: 10px; color: inherit; text-decoration: none; transition: background var(--m-tap); min-width: 0; }
.liste-sobre.cliquable a:hover { background: var(--surface-3); }
.liste-sobre.cliquable a:active { background: var(--kaolin); }
.repere { width: 8px; height: 8px; border-radius: 3px; flex: none; background: var(--encre-3); }
.repere.danger { background: var(--laterite); } .repere.signal { background: var(--ocre); } .repere.neutre { background: var(--kaolin-2); }
.quand { font-size: 12.5px; color: var(--encre-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Tableau de bord formateur */
.tableau-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: start; }
@media (max-width: 1000px) { .tableau-grille { grid-template-columns: 1fr; } }
.barres-modules { display: grid; gap: 4px; }
.barre-module { display: grid; grid-template-columns: 48px minmax(0, 1fr) 56px minmax(150px, auto); align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--ligne); }
.barre-module b { font-stretch: 116%; font-weight: 650; }
.barre-module .piste { height: 12px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.barre-module .piste i { display: block; height: 100%; background: var(--malachite); border-radius: 3px; transform-origin: left; animation: remplir .8s var(--courbe) both; }
.barre-module .chiffre-mod { font: 600 17px var(--sans); font-stretch: 112%; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .barre-module { grid-template-columns: 40px minmax(0, 1fr) 48px; } .barre-module > :last-child { grid-column: 2 / -1; } }

/* ------------------------------------------------------------------ Bandeau sombre (manganèse) avec courbes de niveau */
.relief { position: relative; color: var(--sur-sombre); overflow: hidden; background: var(--manganese-2); }
.relief::before { content: ""; position: absolute; inset: 0; background: url("../assets/topo.svg") center / cover no-repeat; opacity: .09; filter: invert(1); pointer-events: none; }
.relief > * { position: relative; }
.relief .sur { color: var(--sur-sombre-2); }
.relief h1 { color: #fff; }
.relief .btn.sec { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .18); }
.relief .btn.sec:hover { background: rgba(255, 255, 255, .14); }

/* ------------------------------------------------------------------ Connexion : la carotte de forage en grand */
.connexion { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr); background: var(--manganese-2); }
.connexion .visuel { position: relative; padding: 40px 52px 36px; color: var(--sur-sombre); display: flex; flex-direction: column; gap: 32px; overflow: hidden; }
.connexion .visuel::before { content: ""; position: absolute; inset: 0; background: url("../assets/topo.svg") center / cover no-repeat; opacity: .07; filter: invert(1); pointer-events: none; }
.connexion .visuel > * { position: relative; }
.connexion .logos { display: flex; gap: 28px; align-items: center; }
.connexion .logos img { height: 38px; width: auto; opacity: .9; }
.connexion .scene { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 40px; align-items: center; }
.connexion .contexte { color: var(--sur-sombre-2); font-size: 14px; }
.connexion .titre-geant { font: 680 clamp(52px, 6.6vw, 104px)/.88 var(--sans); font-stretch: 125%; letter-spacing: -.05em; color: #fff; margin: 16px 0 0; }
.connexion .accroche { max-width: 44ch; font-size: 16px; line-height: 1.6; color: var(--sur-sombre-2); margin-top: 26px; }
.connexion .pied-visuel { margin: 0; font-size: 12.5px; color: #8a849c; }
/* Forage : échelle de profondeur et carotte */
.forage { position: relative; height: min(64vh, 560px); display: grid; grid-template-columns: 52px 1fr; }
.forage .echelle { position: relative; }
.forage .echelle span { position: absolute; right: 10px; top: var(--y); transform: translateY(-50%); font: 500 11px var(--sans); color: #8a849c; font-variant-numeric: tabular-nums; white-space: nowrap; }
.forage .echelle span::after { content: ""; position: absolute; right: -10px; top: 50%; width: 6px; height: 1px; background: #5c566e; }
.forage .carotte { display: flex; flex-direction: column; border-radius: 60px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(0, 0, 0, .55); transform-origin: top; animation: pousse 1.1s var(--courbe) both .15s; }
.forage .couche { position: relative; flex: var(--h) 1 0; display: flex; align-items: flex-start; padding: 12px 16px; }
.forage .couche + .couche { box-shadow: inset 0 1px rgba(0, 0, 0, .18); }
.forage .couche.sol { background: linear-gradient(180deg, #e9ebe4, #d9ddd3); }
.forage .couche.n1 { background: repeating-linear-gradient(172deg, rgba(255, 255, 255, .08) 0 3px, transparent 3px 11px), var(--malachite-clair); }
.forage .couche.n2 { background: repeating-linear-gradient(168deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 9px), var(--malachite); }
.forage .couche.n3 { background: repeating-linear-gradient(176deg, rgba(196, 134, 28, .22) 0 2px, transparent 2px 13px), #4a3f5f; }
.forage .couche span { font: 500 11.5px/1.25 var(--sans); color: rgba(255, 255, 255, .78); }
.forage .couche span b { display: block; font-weight: 650; font-size: 13px; font-stretch: 112%; color: #fff; }
.forage .couche.n1 span { color: rgba(23, 33, 28, .7); } .forage .couche.n1 span b { color: var(--schiste); }
.connexion .formulaire { background: var(--feuille); display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(28px, 5vw, 76px); position: relative; }
.connexion .formulaire form { width: 100%; max-width: 380px; animation: ouvre .5s var(--courbe) both .1s; }
.connexion .formulaire h2 { font-size: 30px; font-weight: 650; font-stretch: 118%; letter-spacing: -.035em; margin: 0 0 10px; }
.connexion .lien-discret { margin-top: 32px; font-size: 13px; color: var(--encre-3); }
.connexion .lien-discret a { color: var(--encre-2); text-decoration: none; border-bottom: 1px solid var(--ligne-forte); }
.connexion .lien-discret a:hover { color: var(--malachite); border-color: var(--malachite); }
.connexion.staff .formulaire { background: var(--surface); }
.connexion.staff .visuel { background: linear-gradient(180deg, #2f2a40, var(--manganese-2)); }
@media (max-width: 1100px) { .connexion .scene { grid-template-columns: minmax(0, 1fr) 130px; gap: 24px; } .forage { grid-template-columns: 40px 1fr; } .forage .couche span { display: none; } }
@media (max-width: 900px) {
  .connexion { grid-template-columns: 1fr; }
  .connexion .visuel { padding: 24px 20px 28px; gap: 20px; }
  .connexion .scene { grid-template-columns: 1fr; }
  .connexion .titre-geant { font-size: 48px; }
  .forage { display: none; }
  .connexion .pied-visuel { display: none; }
  .connexion .formulaire { padding: 32px 20px 48px; }
}

/* ------------------------------------------------------------------ Strates : les trois niveaux d'un module */
.strates { display: flex; flex-direction: column; border: 1px solid var(--ligne); border-radius: var(--r-xl); overflow: hidden; background: var(--surface); }
.strate { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 22px 24px 22px 30px; border-top: 1px solid var(--ligne); position: relative; transition: background var(--m-tap); }
.strate:hover { background: var(--surface-2); }
.strate:first-child { border-top: 0; }
.strate::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--strate, var(--kaolin)); }
.strate[data-n="1"] { --strate: var(--malachite-clair); } .strate[data-n="2"] { --strate: var(--malachite); } .strate[data-n="3"] { --strate: var(--manganese); }
.strate .prof { font: 500 12.5px var(--sans); color: var(--encre-3); }
.strate .prof b { display: block; font: 650 19px var(--sans); font-stretch: 116%; color: var(--encre); letter-spacing: -.02em; margin-top: 4px; }
.strate h3 { font-size: 16px; }
.strate .meta { font-size: 13px; color: var(--encre-2); margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; }
.strate.verrou { background: radial-gradient(rgba(23, 33, 28, .06) 1px, transparent 1.5px) 0 0 / 7px 7px, var(--surface-2); }
.strate.verrou::before { background: var(--kaolin-2); }
.strate.verrou h3, .strate.verrou .meta { color: var(--encre-3); }
.strate .score { font: 600 30px var(--sans); font-stretch: 118%; text-align: right; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.strate .score small { display: block; font: 500 12px var(--sans); color: var(--encre-3); letter-spacing: 0; font-stretch: 100%; }
@media (max-width: 640px) { .strate { grid-template-columns: 1fr; gap: 10px; } .strate .score { text-align: left; } }

.module-grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
@media (max-width: 1000px) { .module-grille { grid-template-columns: 1fr; } }

/* Carte de module (conservée pour les écrans qui l'emploient) */
.carte-module { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); text-decoration: none; color: inherit; overflow: hidden; transition: border-color var(--m-tap), box-shadow var(--m-ui) var(--courbe); }
.carte-module:hover { color: inherit; border-color: rgba(11, 115, 83, .3); box-shadow: var(--ombre-2); }
.carte-module .haut { padding: 18px 20px 16px; display: flex; justify-content: space-between; gap: 12px; }
.carte-module .code { font: 650 13px var(--sans); font-stretch: 116%; color: var(--malachite); }
.carte-module h3 { margin-top: 8px; font-size: 16.5px; line-height: 1.28; }
.carte-module .note { font: 600 26px var(--sans); font-stretch: 116%; letter-spacing: -.04em; text-align: right; font-variant-numeric: tabular-nums; }
.carte-module .note small { display: block; font-size: 11px; color: var(--encre-3); font-weight: 500; }
.carte-module .colonne-strates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 14px 14px; }
.carte-module .colonne-strates div { padding: 10px 12px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--ligne); font: 500 11.5px var(--sans); color: var(--encre-3); }
.carte-module .colonne-strates b { display: block; color: var(--encre); font-size: 15px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.carte-module .colonne-strates .ok { background: var(--malachite-pale); border-color: rgba(11, 115, 83, .18); }
.carte-module .pied-carte { margin-top: auto; padding: 12px 20px; border-top: 1px solid var(--ligne); display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--encre-2); }

/* Échelle de maîtrise */
.maitrise { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.maitrise .barres { display: inline-flex; gap: 3px; align-items: flex-end; }
.maitrise .barres i { width: 5px; border-radius: 2px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--ligne); }
.maitrise .barres i:nth-child(1) { height: 7px; } .maitrise .barres i:nth-child(2) { height: 10px; } .maitrise .barres i:nth-child(3) { height: 13px; } .maitrise .barres i:nth-child(4) { height: 16px; }
.maitrise .barres i.on { background: var(--m, var(--malachite-vif)); box-shadow: none; }

/* ------------------------------------------------------------------ Cours */
.cours-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
.sommaire { position: sticky; top: 88px; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); max-height: calc(100dvh - 112px); overflow: auto; padding: 6px 0; }
.sommaire .chap { border-top: 1px solid var(--ligne); padding-bottom: 6px; }
.sommaire .chap:first-child { border-top: 0; }
.sommaire .chap > div { padding: 14px 18px 6px; font: 600 12.5px var(--sans); color: var(--encre-3); display: flex; justify-content: space-between; gap: 8px; }
.sommaire a { display: flex; gap: 10px; align-items: flex-start; margin: 1px 8px; padding: 8px 10px; border-radius: 10px; color: var(--encre); text-decoration: none; font-size: 14px; line-height: 1.38; transition: background var(--m-tap); }
.sommaire a:hover { background: var(--surface-3); color: var(--encre); }
.sommaire a.actif { background: var(--malachite-pale); color: var(--malachite-encre); font-weight: 600; }
.sommaire a .coche { flex: none; width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid var(--ligne-forte); border-radius: 50%; transition: background var(--m-ui) var(--courbe), border-color var(--m-ui); }
.sommaire a.fait .coche { border-color: var(--malachite); background: var(--malachite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 8.3 2.3 2.2 4.7-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sommaire .verrouille { padding: 7px 18px 12px; font-size: 12.5px; color: var(--encre-3); }
.cours-layout.edit { grid-template-columns: 340px minmax(0, 1fr); }
@media (max-width: 960px) { .cours-layout, .cours-layout.edit { grid-template-columns: 1fr; } .sommaire { position: static; max-height: none; } }

.prose { font-size: 16.5px; line-height: 1.75; max-width: 68ch; color: #1f2a24; }
.prose h2 { font-size: 22px; margin: 1.8em 0 .6em; padding-top: 1.1em; border-top: 1px solid var(--ligne); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 17px; margin: 1.5em 0 .5em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin: .4em 0; }
.prose li::marker { color: var(--malachite); font-weight: 700; }
.prose blockquote { margin: 1.2em 0; padding: 14px 18px; border-radius: var(--r); background: var(--ocre-pale); border-left: 3px solid var(--ocre); color: #4a3510; }
.prose code { font: 14px var(--mono); background: var(--surface-3); padding: 2px 6px; border-radius: 6px; }
.prose table { border-collapse: separate; border-spacing: 0; margin: 1.2em 0; font-size: 14.5px; border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; }
.prose th, .prose td { border-bottom: 1px solid var(--ligne); padding: 9px 13px; text-align: left; }
.prose th { background: var(--surface-2); font-weight: 650; }
.prose strong { font-weight: 650; color: var(--encre); }

.support { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: var(--r); background: var(--surface); text-decoration: none; color: inherit; transition: border-color var(--m-tap), background var(--m-tap); }
.support:hover { color: inherit; border-color: rgba(11, 115, 83, .3); background: var(--surface-2); }
.support:active { background: var(--surface-3); }
.support .ext { width: 44px; height: 44px; display: grid; place-items: center; font: 650 11px var(--sans); font-stretch: 116%; color: #fff; background: var(--schiste-2); border-radius: 11px; }
.support .ext.pdf { background: var(--laterite); } .support .ext.pptx, .support .ext.ppt { background: var(--cuivre); } .support .ext.xlsx { background: var(--malachite); } .support .ext.docx { background: #3e5f8f; }
.visionneuse { width: 100%; height: 72vh; border: 1px solid var(--ligne); border-radius: var(--r-l); background: #fff; }
.video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-l); overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------------ Passage d'épreuve */
.epreuve { min-height: 100dvh; background: var(--feuille); display: flex; flex-direction: column; }
.epreuve-barre { background: rgba(42, 37, 57, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--sur-sombre); position: sticky; top: 0; z-index: 40; }
.epreuve-barre .int { max-width: 1240px; margin: 0 auto; padding: 0 24px; min-height: 70px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.epreuve-barre .titre { flex: 1; min-width: 200px; }
.epreuve-barre .titre b { display: block; font-size: 15.5px; color: #fff; font-stretch: 110%; }
.epreuve-barre .titre span { font: 500 12.5px var(--sans); color: var(--sur-sombre-2); }
.chrono { text-align: right; min-width: 96px; }
.chrono .lib { font: 500 12px var(--sans); color: var(--sur-sombre-2); }
.chrono .val { font: 600 25px/1.1 var(--mono); color: #fff; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.chrono.alerte .val { color: #f0ae48; }
.chrono.critique .val { color: #ff8066; animation: pulse 1s ease-in-out infinite; }
.chrono .fil { height: 3px; border-radius: 3px; background: var(--schiste-3); margin-top: 6px; overflow: hidden; }
.chrono .fil i { display: block; height: 100%; border-radius: 3px; background: var(--malachite-vif); transition: width 1s linear; }
.chrono.alerte .fil i { background: var(--ocre); } .chrono.critique .fil i { background: var(--laterite); }
.vigilance { display: flex; align-items: center; gap: 10px; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .12); }
.vigilance .lib { font: 500 12px var(--sans); color: var(--sur-sombre-2); }
.vigilance .segments { display: flex; gap: 3px; margin-top: 6px; }
.vigilance .segments i { width: 9px; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, .14); transition: background var(--m-ui); }
.vigilance .segments i.on { background: var(--malachite-vif); }
.vigilance.orange .segments i.on { background: var(--ocre); }
.vigilance.rouge .segments i.on { background: var(--laterite); }
.blocs-fil { display: flex; gap: 2px; background: var(--manganese-2); }
.blocs-fil div { flex: 1; padding: 8px 24px; font: 500 12px var(--sans); color: var(--sur-sombre-2); border-top: 2px solid rgba(255, 255, 255, .12); }
.blocs-fil div.en_cours { color: #fff; border-top-color: var(--malachite-vif); background: var(--manganese); }
.blocs-fil div.clos { color: #7d778f; border-top-color: #4d4760; text-decoration: line-through; }
.epreuve-corps { flex: 1; max-width: 1240px; width: 100%; margin: 0 auto; padding: 30px 24px 120px; display: grid; grid-template-columns: minmax(0, 1fr) 256px; gap: 28px; align-items: start; }
@media (max-width: 980px) { .epreuve-corps { grid-template-columns: 1fr; } .vigilance { border: 0; padding: 0; } }
.cas { background: var(--manganese); color: #f1eff6; padding: 22px 24px; border-radius: var(--r-l); margin-bottom: 20px; }
.cas .sur { color: #c9c3d9; }
.cas p { margin: 10px 0 0; line-height: 1.7; }
.question { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: 24px 26px; margin-bottom: 16px; scroll-margin-top: 140px; }
.question .ent { display: flex; gap: 14px; align-items: baseline; margin-bottom: 16px; }
.question .no { display: inline-grid; place-items: center; min-width: 32px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--surface-3); font: 650 12.5px var(--sans); font-stretch: 112%; color: var(--encre-2); flex: none; font-variant-numeric: tabular-nums; }
.question .enonce { font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; }
.question .consigne { font: 500 12.5px var(--sans); color: var(--encre-3); margin: -6px 0 12px 46px; }
.question.invalide { border-color: rgba(180, 70, 43, .4); background: var(--laterite-pale); }
.choix { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; border: 1px solid var(--ligne-forte); border-radius: var(--r); margin-top: 8px; cursor: pointer; transition: border-color var(--m-tap), background var(--m-tap), box-shadow var(--m-ui) var(--courbe), transform var(--m-tap) var(--courbe); user-select: none; }
.choix:hover { border-color: rgba(11, 115, 83, .4); background: var(--surface-2); }
.choix:active { transform: scale(.992); transition-duration: .06s; }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix .marq { flex: none; width: 22px; height: 22px; border: 1.5px solid var(--ligne-forte); border-radius: 7px; display: grid; place-items: center; font: 650 11px var(--sans); color: var(--encre-3); transition: background var(--m-tap), border-color var(--m-tap), color var(--m-tap); background: var(--surface); }
.choix.radio .marq { border-radius: 50%; }
.choix.coche { border-color: var(--malachite); background: var(--malachite-pale); box-shadow: 0 0 0 3px rgba(18, 161, 114, .12); }
.choix.coche .marq { background: var(--malachite); border-color: var(--malachite); color: #fff; }
.choix input:focus-visible + .marq { outline: 2px solid var(--malachite-vif); outline-offset: 2px; }
.trou { display: inline-block; width: 150px; height: 34px; margin: 0 4px; padding: 0 10px; border: 1px solid rgba(11, 115, 83, .3); border-radius: 8px; background: var(--malachite-pale); font: 500 15px var(--sans); transition: box-shadow var(--m-ui), border-color var(--m-tap); }
.trou:focus { outline: none; border-color: var(--malachite-vif); box-shadow: var(--anneau-focus); background: #fff; }
.navigateur { position: sticky; top: 96px; }
.navigateur .grille-q { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 14px; }
.navigateur .grille-q a { height: 36px; display: grid; place-items: center; border: 1px solid var(--ligne-forte); font: 600 12.5px var(--sans); color: var(--encre-2); text-decoration: none; border-radius: 9px; transition: background var(--m-tap), border-color var(--m-tap), color var(--m-tap); font-variant-numeric: tabular-nums; }
.navigateur .grille-q a:hover { border-color: var(--malachite-vif); color: var(--malachite-encre); }
.navigateur .grille-q a.rep { background: var(--malachite); color: #fff; border-color: var(--malachite); }
.navigateur .grille-q a.inv { background: var(--laterite); border-color: var(--laterite); color: #fff; }
.voile { position: fixed; inset: 0; z-index: 100; background: rgba(32, 28, 44, .9); color: var(--sur-sombre); display: grid; place-items: center; padding: 24px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fondu .25s; }
.voile .boite { max-width: 520px; text-align: center; animation: ouvre var(--m-ui) var(--courbe); }
.voile h2 { color: #fff; font-size: 27px; margin: 12px 0; }
.alerte-triche { position: fixed; left: 50%; top: 86px; transform: translateX(-50%); z-index: 90; background: var(--laterite); color: #fff; padding: 13px 18px; border-radius: var(--r); font-weight: 600; font-size: 14px; box-shadow: var(--ombre-3); max-width: min(560px, calc(100vw - 32px)); animation: fondu .25s; }
.message-surv { position: fixed; right: 20px; bottom: 20px; z-index: 95; width: min(380px, calc(100vw - 40px)); background: var(--ocre); color: #24180a; border-radius: var(--r-l); padding: 16px 18px; box-shadow: var(--ombre-3); animation: ouvre var(--m-ui) var(--courbe); }

/* Correction */
.corr .choix { cursor: default; }
.corr .choix:hover { background: inherit; }
.corr .choix.juste { border-color: var(--malachite); background: var(--malachite-pale); }
.corr .choix.faux { border-color: rgba(180, 70, 43, .45); background: var(--laterite-pale); }
.corr .choix.attendu { border-style: dashed; border-color: var(--malachite); }
.explication { margin-top: 14px; padding: 13px 16px; background: var(--cuivre-pale); border-left: 3px solid var(--cuivre); border-radius: var(--r-s); font-size: 14.5px; color: #5a3a1e; }

/* Score circulaire */
.anneau { --p: 0; --c: var(--malachite-vif); width: 172px; height: 172px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0); display: grid; place-items: center; flex: none; animation: ouvre .6s var(--courbe) both; }
.anneau > div { width: 142px; height: 142px; border-radius: 50%; background: var(--manganese-2); display: grid; place-items: center; text-align: center; }
.anneau b { font: 600 42px/1 var(--sans); font-stretch: 118%; color: #fff; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.anneau span { display: block; font: 500 12px var(--sans); color: var(--sur-sombre-2); margin-top: 5px; }

/* ------------------------------------------------------------------ Espace formateur : menu latéral sur kaolin, contenu sur une feuille */
.coque { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100dvh; background: var(--kaolin); }
.lateral { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.lateral-tete { padding: 20px 20px 18px; }
.lateral nav { padding: 0 12px 12px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.lateral nav:hover { scrollbar-color: var(--ligne-forte) transparent; }
.lateral .bloc-nav + .bloc-nav { margin-top: 10px; }
.lateral .groupe { font: 550 12px var(--sans); color: var(--encre-3); padding: 6px 12px 4px; }
.lateral a.lien { position: relative; isolation: isolate; display: flex; align-items: center; gap: 11px; height: 35px; padding: 0 12px; margin: 1px 0; color: var(--encre-2); text-decoration: none; font-size: 14px; font-weight: 550; border-radius: 10px; transition: color var(--m-tap), background var(--m-tap); }
.lateral a.lien .ico { color: var(--encre-3); transition: color var(--m-tap); }
.lateral a.lien .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral a.lien:hover { color: var(--encre); background: rgba(255, 255, 255, .45); }
.lateral a.lien:active { background: rgba(255, 255, 255, .7); }
.lateral a.lien.actif { color: var(--encre); font-weight: 620; }
.lateral a.lien.actif .ico { color: var(--malachite); }
/* Indicateur actif : un seul élément qui glisse d'une entrée à l'autre (transition de page) */
.lateral a.lien .indic { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface); box-shadow: 0 1px 2px rgba(23, 33, 28, .07), 0 4px 12px -6px rgba(23, 33, 28, .14); }
.lateral a.lien .badge { margin-left: auto; min-width: 20px; height: 20px; display: inline-grid; place-items: center; padding: 0 6px; font: 650 11px var(--sans); background: var(--laterite); color: #fff; border-radius: 7px; }
.lateral a.lien .badge.vert { background: var(--malachite); }
.lateral .pied { padding: 12px 12px 14px; display: flex; align-items: center; gap: 6px; }
.lateral .pied .puce-user { flex: 1; }
.lateral .pied .puce-user:hover { background: rgba(255, 255, 255, .5); }
.lateral .pied .btn-ico:hover { background: rgba(255, 255, 255, .5); }
.lateral .pied .flex1 { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.lateral .pied .flex1 b { font-size: 13.5px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral .pied .flex1 span { font-size: 12px; color: var(--encre-3); }
.coque .contenu { min-width: 0; margin: 8px 8px 8px 0; background: var(--feuille); border-radius: 18px; box-shadow: 0 0 0 1px rgba(23, 33, 28, .06), 0 1px 3px rgba(23, 33, 28, .05); min-height: calc(100dvh - 16px); overflow: clip; }
.coque .page { max-width: 1320px; }
.barre-haut { position: sticky; top: 0; z-index: 25; height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 36px; background: rgba(246, 247, 243, .84); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--ligne); }
.barre-haut .fil { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--encre-3); min-width: 0; }
.barre-haut .fil b { color: var(--encre); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-haut .fil .sep { color: var(--ligne-forte); }
.barre-haut .date-jour { margin-left: auto; font-size: 13px; color: var(--encre-3); white-space: nowrap; }
.barre-haut .date-jour::first-letter { text-transform: uppercase; }
.burger { display: none !important; }
.voile-nav { display: none; }
@media (max-width: 1000px) {
  .coque { grid-template-columns: 1fr; }
  .coque .contenu { margin: 0; border-radius: 0; box-shadow: none; min-height: 100dvh; }
  .lateral { position: fixed; z-index: 60; left: 0; top: 0; width: 280px; background: var(--kaolin); transform: translateX(-104%); transition: transform var(--m-ui) var(--courbe); box-shadow: var(--ombre-3); }
  .lateral.ouvert { transform: none; }
  .voile-nav { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(32, 28, 44, .36); opacity: 0; pointer-events: none; transition: opacity var(--m-ui); }
  .voile-nav.ouvert { opacity: 1; pointer-events: auto; }
  .burger { display: inline-grid !important; margin-left: -8px; }
  .barre-haut { padding: 0 16px; }
  .barre-haut .date-jour { display: none; }
}

/* Onglets : contrôle segmenté */
.onglets { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-3); border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.onglets a, .onglets button { height: 34px; padding: 0 15px; border: 0; border-radius: 999px; background: none; color: var(--encre-2); font-weight: 600; font-size: 13.5px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--m-ui) var(--courbe), color var(--m-tap), box-shadow var(--m-ui); display: inline-flex; align-items: center; }
.onglets a:hover, .onglets button:hover { color: var(--encre); }
.onglets .actif { background: var(--surface); color: var(--encre); box-shadow: 0 1px 2px rgba(23, 33, 28, .08), 0 2px 8px -2px rgba(23, 33, 28, .08); }

/* Surveillance en direct */
.mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.vignette { position: relative; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); padding: 15px 16px 14px 19px; overflow: hidden; transition: border-color var(--m-tap); }
.vignette::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--etat, var(--malachite-vif)); }
.vignette:hover { border-color: var(--ligne-forte); }
.vignette.orange { --etat: var(--ocre); } .vignette.rouge { --etat: var(--laterite); background: #fdf6f4; } .vignette.pause { --etat: var(--manganese); background: var(--manganese-pale); }
.vignette .nom { font-weight: 650; font-size: 14.5px; }
.vignette .ex { font-size: 12.5px; color: var(--encre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vignette .chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0 10px; font: 500 11.5px var(--sans); color: var(--encre-3); }
.vignette .chiffres > div { background: var(--surface-2); border-radius: 9px; padding: 7px 9px; }
.vignette .chiffres b { display: block; font: 600 16px var(--sans); font-stretch: 112%; color: var(--encre); margin-top: 2px; font-variant-numeric: tabular-nums; }
.vignette .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.direct { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--laterite-pale); font: 650 12px var(--sans); color: var(--laterite); }
.direct::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--laterite); color: rgba(180, 70, 43, .45); animation: onde 1.4s ease-out infinite; }

/* Calendrier */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-l); overflow: hidden; }
.cal .jn { padding: 10px; font: 550 12.5px var(--sans); color: var(--encre-3); border-bottom: 1px solid var(--ligne); }
.cal .j { min-height: 108px; padding: 8px; border-right: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); font-size: 12px; transition: background var(--m-tap); }
.cal .j:nth-child(7n) { border-right: 0; }
.cal .j:hover { background: var(--surface-2); }
.cal .j.hors { background: var(--surface-2); color: var(--encre-3); }
.cal .j.auj .d { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 7px; background: var(--malachite); color: #fff; }
.cal .j .d { font: 600 12.5px var(--sans); margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.cal .ev { display: block; padding: 3px 7px; margin-bottom: 3px; border-radius: 6px; border-left: 3px solid var(--malachite-vif); background: var(--malachite-pale); font-size: 11.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--encre); text-decoration: none; }
.cal .ev:hover { color: var(--encre); background: #d5ebe1; }
.cal .ev.cloture, .cal .ev.devoir { border-color: var(--laterite); background: var(--laterite-pale); }
.cal .ev.soutenance { border-color: var(--manganese); background: var(--manganese-pale); }
.cal .ev.cours, .cal .ev.reunion, .cal .ev.autre { border-color: var(--cuivre); background: var(--cuivre-pale); }
@media (max-width: 700px) { .cal .j { min-height: 64px; padding: 4px; } .cal .ev { font-size: 0; height: 6px; padding: 0; } }

/* Matrice de compétences et lecture de copie */
.chaleur td.v { text-align: center; font: 600 12.5px var(--sans); color: var(--encre); font-variant-numeric: tabular-nums; border-left: 2px solid var(--surface); }
.lecteur-pdf { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(330px, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1100px) { .lecteur-pdf { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Fenêtres modales et notifications */
.modale-fond { position: fixed; inset: 0; z-index: 200; background: rgba(32, 28, 44, .34); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px; overflow-y: auto; animation: fondu .2s var(--courbe); }
.modale { width: 100%; max-width: 580px; background: var(--surface); border-radius: var(--r-xl); box-shadow: 0 0 0 1px rgba(23, 33, 28, .06), 0 36px 80px -24px rgba(32, 28, 44, .5); animation: ouvre var(--m-ui) var(--courbe); overflow: hidden; }
.modale-fond.sortie { animation: sortFondu var(--m-sortie) var(--courbe-sortie) both; }
.modale-fond.sortie .modale { animation: ferme var(--m-sortie) var(--courbe-sortie) both; }
.modale.large { max-width: 940px; }
.modale.danger .tete h2 { color: var(--laterite-encre); }
.modale .tete { padding: 22px 24px 4px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.modale .tete h2 { font-size: 20px; font-weight: 640; }
.modale .corps { padding: 14px 24px 22px; }
.modale .pied { padding: 14px 24px; background: var(--surface-2); border-top: 1px solid var(--ligne); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.modale form > .rangee:last-child { margin: 8px -24px -22px; padding: 14px 24px; background: var(--surface-2); border-top: 1px solid var(--ligne); }
.fermer { display: grid; place-items: center; width: 34px; height: 34px; margin: -4px -8px 0 0; background: none; border: 0; border-radius: 10px; font-size: 22px; line-height: 1; cursor: pointer; color: var(--encre-3); transition: background var(--m-tap), color var(--m-tap), transform var(--m-tap) var(--courbe); }
.fermer:hover { background: var(--surface-3); color: var(--encre); }
.fermer:active { transform: scale(.92); }
.notifs { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.notif { display: flex; align-items: center; gap: 10px; background: var(--manganese-2); color: #fff; padding: 12px 18px 12px 14px; border-radius: 14px; font-size: 14px; font-weight: 500; box-shadow: 0 16px 40px -12px rgba(32, 28, 44, .55); pointer-events: auto; animation: ouvre var(--m-ui) var(--courbe); max-width: calc(100vw - 32px); }
.notif::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 7px; background: var(--malachite-vif) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 8.3 2.3 2.2 4.7-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.notif.erreur::before { background: var(--laterite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8 4.5v4.5M8 11.6v.1'/%3E%3C/svg%3E") center / 12px no-repeat; }

.secret { font: 600 18px var(--mono); letter-spacing: .05em; background: var(--manganese-2); color: #7fe0b8; padding: 14px 18px; border-radius: var(--r); user-select: all; word-break: break-all; }
/* Squelette : reprend la forme d'une page (titre, relevé, liste) */
.chargement { position: relative; height: 320px; color: transparent; font-size: 0; overflow: hidden; border-radius: var(--r-l);
  background:
    linear-gradient(var(--surface-3) 0 0) 0 0 / 34% 30px no-repeat,
    linear-gradient(var(--surface-3) 0 0) 0 48px / 52% 14px no-repeat,
    linear-gradient(var(--surface) 0 0) 0 96px / 100% 96px no-repeat,
    linear-gradient(var(--surface) 0 0) 0 216px / 100% 104px no-repeat; }
.chargement::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: progression 1.4s ease-in-out infinite; }

/* Démarrage : la marque seule, au centre, pendant le chargement de la session */
.demarrage { min-height: 100dvh; display: grid; place-items: center; background: var(--kaolin); }
.demarrage img { width: 44px; height: 44px; animation: pulse 1.6s ease-in-out infinite; }

/* Lien d'évitement pour la navigation au clavier */
.evitement { position: fixed; left: 16px; top: -60px; z-index: 500; padding: 10px 16px; border-radius: 10px; background: var(--manganese-2); color: #fff; font-weight: 600; text-decoration: none; transition: top var(--m-ui) var(--courbe); }
.evitement:focus { top: 16px; color: #fff; }

/* Attestation imprimable */
.attestation { background: #fff; max-width: 900px; margin: 0 auto; border: 1px solid var(--ligne); border-radius: var(--r-l); position: relative; overflow: hidden; box-shadow: var(--ombre-2); }
.attestation .bande { background: var(--manganese-2); color: #fff; padding: 28px 40px; display: flex; justify-content: space-between; align-items: center; position: relative; }
.attestation .bande::before { content: ""; position: absolute; inset: 0; background: url("../assets/topo.svg") center / cover; opacity: .12; filter: invert(1); }
.attestation .bande > * { position: relative; }
.attestation .bande img { height: 44px; width: auto; }
.attestation .corps-att { padding: 40px 48px 36px; }
.attestation .nom-tit { font: 650 42px/1.05 var(--sans); font-stretch: 120%; letter-spacing: -.035em; margin: 12px 0 6px; }
.attestation .grille-att { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ligne-forte); border-bottom: 1px solid var(--ligne-forte); margin: 28px 0; }
.attestation .grille-att div { padding: 14px 16px; border-left: 1px solid var(--ligne); }
.attestation .grille-att div:first-child { border-left: 0; padding-left: 0; }
.attestation .grille-att b { display: block; font: 600 21px var(--sans); font-stretch: 112%; margin-top: 4px; font-variant-numeric: tabular-nums; }
.attestation .verif { display: flex; gap: 20px; align-items: center; }
.attestation .verif img { width: 108px; height: 108px; }
.attestation .liseré { height: 6px; background: linear-gradient(90deg, var(--malachite-clair) 0 25%, var(--malachite) 25% 55%, var(--manganese) 55% 85%, var(--ocre) 85%); }

@media print {
  .barre, .barre-haut, .lateral, .voile-nav, .non-imprime, .notifs, .progression { display: none !important; }
  body, .coque, .coque .contenu { background: #fff; }
  * { animation: none !important; }
  .coque { display: block; }
  .coque .contenu { margin: 0; box-shadow: none; }
  .page { padding: 0; max-width: none; }
  .attestation { border: 0; box-shadow: none; }
  .panneau, .kpi { break-inside: avoid; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}