/*
 * Feuille de style COMMUNE de la plateforme — charte « Lagon » (choisie au prompt C3a).
 * Mode clair uniquement, polices système, aucune ressource externe.
 * 1. Variables (couleurs, formes, typographie)  2. Mise en page et composants.
 * Une SAÉ peut ajouter sa propre feuille (saeXX/css/…) sans modifier celle-ci.
 */

/* ========== 1. Variables ========== */

:root {
    --police-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --police-titres: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --poids-titres: 700;
    --espacement-titres: -0.01em;

    --fond: #f2f7f7;
    --surface: #ffffff;
    --texte: #16302e;
    --texte-doux: #4a6361;
    --titres: #0b2a28;
    --bordure: #dce7e6;
    --bordure-forte: #bcd1cf;
    --focus: #5eead4;

    --primaire: #0f766e;
    --primaire-fonce: #115e59;
    --primaire-doux: #e3f4f1;
    --sur-primaire: #ffffff;
    --accent: #f26b55;
    --accent-fonce: #a1321f;
    --accent-doux: #ffe8e3;
    --sur-accent: #3a1008;

    --entete-fond: #0f766e;
    --entete-texte: #ffffff;
    --entete-bordure: #0f766e;
    --entete-ombre: 0 6px 20px rgba(15, 118, 110, 0.25);
    --entete-bordure-bouton: rgba(255, 255, 255, 0.6);
    --menu-texte: #e3f4f1;
    --menu-survol: rgba(255, 255, 255, 0.12);
    --menu-actif-fond: #ffffff;
    --menu-actif-texte: #115e59;
    --logo-fond: #f26b55;
    --logo-texte: #3a1008;
    --avatar-fond: #e3f4f1;
    --avatar-texte: #115e59;
    --etiquette-texte: #a1321f;

    --rayon: 14px;
    --rayon-petit: 10px;
    --rayon-bouton: 10px;
    --rayon-champ: 10px;
    --rayon-badge: 6px;
    --rayon-logo: 10px;

    --ombre: 0 1px 3px rgba(11, 42, 40, 0.06);
    --ombre-forte: 0 24px 60px rgba(11, 42, 40, 0.25);
    --carte-fond: #ffffff;
    --carte-bordure: #dce7e6;
    --carte-ombre: 0 2px 6px rgba(11, 42, 40, 0.05);
    --carte-ombre-survol: 0 14px 30px rgba(15, 118, 110, 0.16);

    --inactif-fond: #f4f7f7;
    --inactif-texte: #586d6b;
    --inactif-bouton: #e8eeed;
    --progression-fond: #dcefeb;
    --progression-barre: linear-gradient(90deg, #0f766e, #14b8a6);
    --connexion-fond: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);

    --champ-fond: #ffffff;
    --champ-bordure: #bcd1cf;
    --tableau-entete: #f2f7f7;
    --tableau-survol: #f7fbfb;

    /* Séries de graphique : palette vérifiée (bande de clarté, chroma, écart
       daltonisme et contraste sur fond blanc). Ne pas en ajouter une 5e sans
       la revalider — une teinte inventée devient indistinguable en vision CVD. */
    --serie-1: #0d9488;
    --serie-2: #e2553c;
    --serie-3: #6d28d9;
    --serie-4: #b45309;

    --gris-doux: #eaefef;
    --gris-fonce: #44585a;
    --info: #0e6a85;
    --info-doux: #e2f4f8;
    --succes: #137333;
    --succes-doux: #e6f5eb;
    --alerte: #9a3412;
    --alerte-doux: #ffedd5;
    --erreur: #b91c1c;
    --erreur-doux: #fdecec;
}

/* ========== 2. Mise en page et composants ========== */

* { box-sizing: border-box; }
/* Un élément masqué par l'attribut hidden le reste, même si sa classe fixe un display (flex, grid…) */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

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

h1, h2, h3 {
    font-family: var(--police-titres);
    font-weight: var(--poids-titres);
    line-height: 1.25;
    color: var(--titres);
    letter-spacing: var(--espacement-titres);
}

h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 8px; }
h2 { font-size: 1.3rem; margin: 32px 0 16px; }
h3 { font-size: 1.1rem; margin: 12px 0 8px; }

a { color: var(--primaire); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.visuellement-cache {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- En-tête ---------- */

.entete {
    background: var(--entete-fond);
    color: var(--entete-texte);
    border-bottom: 1px solid var(--entete-bordure);
    box-shadow: var(--entete-ombre);
}

.entete-interieur {
    max-width: 1180px; margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}

.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.marque-nom { font-family: var(--police-titres); font-weight: 700; font-size: 1.1rem; }

.marque-logo {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--rayon-logo);
    background: var(--logo-fond); color: var(--logo-texte);
    font-weight: 800; font-size: 1.1rem;
}
.marque-logo-grand { width: 56px; height: 56px; font-size: 1.6rem; }

.menu { display: flex; gap: 4px; flex: 1; }
.menu-lien {
    white-space: nowrap;
    padding: 8px 14px; border-radius: var(--rayon-bouton);
    color: var(--menu-texte); text-decoration: none; font-weight: 600; font-size: 0.95rem;
}
.menu-lien:hover { background: var(--menu-survol); }
.menu-lien.actif { background: var(--menu-actif-fond); color: var(--menu-actif-texte); }

.compte { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.compte-nom { display: flex; flex-direction: column; font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
.compte-nom small { font-weight: 400; opacity: 0.8; }
.avatar {
    display: inline-grid; place-items: center; width: 36px; height: 36px;
    border-radius: 50%; background: var(--avatar-fond); color: var(--avatar-texte);
    font-weight: 700; font-size: 0.8rem;
}

/* ---------- Contenu ---------- */

.contenu { max-width: 1180px; margin: 0 auto; padding: 24px; }

.bloc {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: clamp(20px, 4vw, 40px);
    margin: 0 0 32px;
}

.bloc > h2:first-child, .bloc > .etiquette-section + h2 { margin-top: 0; }

.etiquette-section {
    display: inline-block; margin: 0 0 12px;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--etiquette-texte);
}

.chapeau { color: var(--texte-doux); font-size: 1.05rem; max-width: 60ch; margin: 0; }

.accueil { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }

.resume {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; border-radius: var(--rayon);
    background: var(--primaire-doux); color: var(--primaire-fonce);
}
.resume-chiffre { font-family: var(--police-titres); font-size: 2.2rem; font-weight: 800; line-height: 1; }
.resume-texte { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }

/* ---------- Cartes de SAÉ ---------- */

.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }

.carte-sae {
    display: flex; flex-direction: column;
    padding: 22px; border-radius: var(--rayon);
    background: var(--carte-fond); border: 1px solid var(--carte-bordure);
    box-shadow: var(--carte-ombre);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.carte-sae:hover { transform: translateY(-2px); box-shadow: var(--carte-ombre-survol); }
.carte-sae h3 { margin-top: 14px; }
.carte-texte { color: var(--texte-doux); font-size: 0.93rem; margin: 0 0 16px; flex: 1; }
.carte-meta { font-size: 0.85rem; color: var(--texte-doux); margin: 8px 0 16px; }
.carte-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.code-sae { font-weight: 800; font-size: 0.85rem; color: var(--primaire-fonce); letter-spacing: 0.04em; }

.carte-inactive { background: var(--inactif-fond); box-shadow: none; }
.carte-inactive:hover { transform: none; box-shadow: none; }
.carte-inactive h3, .carte-inactive .code-sae { color: var(--inactif-texte); }

.progression { height: 8px; border-radius: 99px; background: var(--progression-fond); overflow: hidden; }
.progression-barre { display: block; height: 100%; border-radius: 99px; background: var(--progression-barre); }

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

.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 20px; min-height: 44px;
    border-radius: var(--rayon-bouton); border: 1px solid transparent;
    font: inherit; font-weight: 700; font-size: 0.95rem;
    text-decoration: none; cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.bouton:active { transform: translateY(1px); }
.bouton-principal { background: var(--primaire); color: var(--sur-primaire); }
.bouton-principal:hover { background: var(--primaire-fonce); }
.bouton-secondaire { background: var(--surface); color: var(--primaire-fonce); border-color: var(--bordure-forte); }
.bouton-secondaire:hover { background: var(--primaire-doux); }
.bouton-discret { background: transparent; color: var(--entete-texte); border-color: var(--entete-bordure-bouton); min-height: 36px; padding: 6px 14px; font-size: 0.85rem; }
.bouton-desactive { background: var(--inactif-bouton); color: var(--inactif-texte); cursor: not-allowed; }
.bouton-petit { min-height: 34px; padding: 5px 12px; font-size: 0.85rem; }
.bouton-large { width: 100%; }

/* ---------- Connexion ---------- */

.ecran-connexion {
    display: grid; place-items: center; padding: clamp(24px, 6vw, 56px) 12px;
    border-radius: var(--rayon); background: var(--connexion-fond);
}
.carte-connexion {
    width: 100%; max-width: 400px; text-align: center;
    padding: 36px 28px; border-radius: var(--rayon);
    background: var(--surface); box-shadow: var(--ombre-forte);
}
.carte-connexion .formulaire { text-align: left; margin-top: 20px; }

/* ---------- Formulaires ---------- */

.formulaire label { display: block; font-weight: 600; font-size: 0.92rem; margin: 0 0 6px; }

.champ {
    width: 100%; min-height: 46px; padding: 10px 14px;
    font: inherit; color: var(--texte);
    background: var(--champ-fond); border: 1.5px solid var(--champ-bordure);
    border-radius: var(--rayon-champ);
}
.champ:focus { border-color: var(--primaire); outline: 3px solid var(--focus); outline-offset: 0; }
.champ-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.25rem; letter-spacing: 0.2em; text-align: center; text-transform: uppercase; }
.champ-erreur { border-color: var(--erreur); background: var(--erreur-doux); }
.erreur-champ { color: var(--erreur); font-size: 0.85rem; font-weight: 600; margin: 6px 0 0; }
.aide { color: var(--texte-doux); font-size: 0.85rem; margin: 6px 0 16px; }

.formulaire-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; max-width: 760px; }
.champ-large { grid-column: 1 / -1; }
.case { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.case input { width: 20px; height: 20px; accent-color: var(--primaire); }
.actions-formulaire { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Tableau ---------- */

.barre-outils { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.barre-outils h2 { margin: 0; }
.outils { display: flex; gap: 10px; flex-wrap: wrap; }
.champ-recherche { width: 240px; }

.tableau-conteneur { overflow-x: auto; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); }
.tableau { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 640px; }
.tableau th {
    text-align: left; padding: 12px 16px;
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--texte-doux); background: var(--tableau-entete);
}
.tableau td { padding: 14px 16px; border-top: 1px solid var(--bordure); vertical-align: middle; }
.tableau tbody tr:hover { background: var(--tableau-survol); }
.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tableau .actions { text-align: right; }

/* ---------- Badges et messages ---------- */

.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: var(--rayon-badge);
    font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.badge-verrouille { background: var(--gris-doux); color: var(--gris-fonce); }
.badge-a-venir    { background: var(--gris-doux); color: var(--gris-fonce); }
.badge-disponible { background: var(--primaire-doux); color: var(--primaire-fonce); }
.badge-en-cours   { background: var(--accent-doux); color: var(--accent-fonce); }
.badge-soumis     { background: var(--info-doux); color: var(--info); }
.badge-corrige    { background: var(--succes-doux); color: var(--succes); }
.liste-badges { display: flex; flex-wrap: wrap; gap: 10px; }

.message {
    padding: 14px 18px; margin: 0 0 12px;
    border-radius: var(--rayon-petit); border-left: 5px solid;
    font-weight: 500;
}
.message-succes { background: var(--succes-doux); color: var(--succes); border-color: var(--succes); }
.message-info   { background: var(--info-doux); color: var(--info); border-color: var(--info); }
.message-alerte { background: var(--alerte-doux); color: var(--alerte); border-color: var(--alerte); }
.message-erreur { background: var(--erreur-doux); color: var(--erreur); border-color: var(--erreur); }

.pied { text-align: center; color: var(--texte-doux); font-size: 0.85rem; padding: 8px 16px 40px; }

/* ---------- Page de connexion (plein écran) ---------- */

.page-connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px 12px; background: var(--connexion-fond); }
.page-connexion .carte-connexion .message { text-align: left; }
.page-connexion { gap: 20px; align-content: center; }

/* Connexion rapide : développement local uniquement (inc/connexion_rapide.php) */
.connexion-rapide { width: 100%; max-width: 760px; padding: 20px 22px; border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre-forte); }
.connexion-rapide h2 { margin: 0 0 4px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.connexion-rapide-groupe { border-top: 1px solid var(--bordure); padding: 8px 0; }
.connexion-rapide-groupe summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.connexion-rapide-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.connexion-rapide-liste form { margin: 0; }
.connexion-rapide-compte {
    width: 100%; display: grid; gap: 2px; text-align: left; cursor: pointer;
    padding: 8px 10px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
    background: var(--fond); color: var(--texte); font: inherit;
}
.connexion-rapide-compte:hover { border-color: var(--primaire); background: var(--primaire-doux); }
.connexion-rapide-compte:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.connexion-rapide-nom { font-weight: 600; }
.connexion-rapide-detail { font-size: 0.8rem; color: var(--texte-doux); }
.connexion-rapide-code { font-size: 0.85rem; color: var(--primaire-fonce); letter-spacing: 0.04em; }

/* ---------- Titres de page, retour, blocs ---------- */

.titre-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 0 0 24px; }
.titre-page h1 { margin: 0; }
.lien-retour { display: inline-block; margin: 0 0 12px; font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.lien-retour:hover { text-decoration: underline; }
.texte-doux { color: var(--texte-doux); }
.vide { padding: 32px 16px; text-align: center; color: var(--texte-doux); }

/* ---------- Tableau de bord ---------- */

.grille-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin: 0 0 32px; }
.stat { padding: 18px 20px; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--bordure); box-shadow: var(--ombre); }
.stat-chiffre { display: block; font-family: var(--police-titres); font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--primaire-fonce); }
.stat-libelle { color: var(--texte-doux); font-size: 0.9rem; font-weight: 600; }
.grille-liens { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.lien-carte { display: block; padding: 20px; border-radius: var(--rayon); background: var(--carte-fond); border: 1px solid var(--carte-bordure); box-shadow: var(--carte-ombre); color: var(--texte); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.lien-carte:hover { transform: translateY(-2px); box-shadow: var(--carte-ombre-survol); }
.lien-carte strong { display: block; color: var(--primaire-fonce); font-size: 1.05rem; margin-bottom: 4px; }
.lien-carte span { color: var(--texte-doux); font-size: 0.9rem; }
.lien-carte-inactif { opacity: 0.65; pointer-events: none; }

/* ---------- Messages : bouton de fermeture ---------- */

.message { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.message-fermer { flex: none; border: 0; background: transparent; color: inherit; font-size: 1.2rem; line-height: 1; padding: 0 4px; cursor: pointer; opacity: 0.7; }
.message-fermer:hover { opacity: 1; }
.messages { margin: 0 0 20px; }

/* ---------- Page d'erreur ---------- */

.page-erreur { text-align: center; padding: clamp(32px, 8vw, 72px) 16px; }
.page-erreur .code-erreur { display: block; font-family: var(--police-titres); font-size: clamp(3rem, 12vw, 5.5rem); font-weight: 800; line-height: 1; color: var(--primaire); }
.page-erreur p { color: var(--texte-doux); max-width: 50ch; margin: 12px auto 24px; }

/* ---------- Boutons supplémentaires ---------- */

.bouton-danger { background: var(--erreur); color: #ffffff; }
.bouton-danger:hover { background: #8f1616; }

/* ---------- Barres de progression : largeur par paliers de 5 % (pas de style en ligne) ---------- */

.progression-0 { width: 0%; }
.progression-5 { width: 5%; }
.progression-10 { width: 10%; }
.progression-15 { width: 15%; }
.progression-20 { width: 20%; }
.progression-25 { width: 25%; }
.progression-30 { width: 30%; }
.progression-35 { width: 35%; }
.progression-40 { width: 40%; }
.progression-45 { width: 45%; }
.progression-50 { width: 50%; }
.progression-55 { width: 55%; }
.progression-60 { width: 60%; }
.progression-65 { width: 65%; }
.progression-70 { width: 70%; }
.progression-75 { width: 75%; }
.progression-80 { width: 80%; }
.progression-85 { width: 85%; }
.progression-90 { width: 90%; }
.progression-95 { width: 95%; }
.progression-100 { width: 100%; }

/* ---------- Tablette et téléphone ---------- */

@media (max-width: 900px) {
    .entete-interieur { gap: 12px; }
    .menu { order: 3; flex-basis: 100%; overflow-x: auto; }
}

@media (max-width: 600px) {
    .contenu { padding: 16px 12px; }
    .compte-nom { display: none; }
    .formulaire-grille { grid-template-columns: 1fr; }
    .champ-recherche { width: 100%; }
    .outils { width: 100%; }
    .outils .bouton { width: 100%; }
    .resume { width: 100%; }
    .grille-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .stat { padding: 14px 16px; }
    .bloc { margin-bottom: 20px; }
}

/* ---------- Compléments de la page de connexion ---------- */

.titre-connexion { font-size: 1.35rem; margin: 14px 0 4px; }
.carte-connexion .messages, .carte-connexion .message { margin-top: 16px; }

/* ---------- Gestion : filtres, actions en ligne, comptes ---------- */

.filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 0 0 20px; }
.filtres .champ-groupe { min-width: 180px; }
.filtres label { display: block; font-weight: 600; font-size: 0.85rem; margin: 0 0 4px; }
.form-en-ligne { display: inline; margin: 0; }
.tableau .actions { white-space: nowrap; }
.tableau .actions .bouton { margin-left: 4px; }
.ligne-inactive td { color: var(--inactif-texte); background: var(--inactif-fond); }
.petit { font-size: 0.85rem; }

/* ---------- Fiche de code d'accès ---------- */

.fiche-code { max-width: 640px; }
.code-affiche {
    margin: 24px 0; padding: 18px 20px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 700; letter-spacing: 0.12em; text-align: center;
    color: var(--primaire-fonce); background: var(--primaire-doux);
    border: 2px dashed var(--bordure-forte); border-radius: var(--rayon-petit);
}
.consignes { padding-left: 1.3em; margin: 0 0 16px; }
.consignes li { margin: 6px 0; }

/* ---------- Classes et apprenants ---------- */

.grille-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.carte-action { padding: 20px; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--fond); }
.carte-action h3 { margin-top: 0; }
.carte-action .bouton { margin-top: 12px; }
.code-liste { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 700; letter-spacing: 0.08em; color: var(--primaire-fonce); }

/* ---------- Étiquettes de codes (écran : aperçu ; impression : planche A4) ---------- */

.planche-etiquettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.etiquette {
    padding: 14px 16px; text-align: center;
    background: var(--surface); border: 1.5px dashed var(--bordure-forte); border-radius: var(--rayon-petit);
    break-inside: avoid;
}
.etiquette p { margin: 0; }
.etiquette-titre { font-size: 0.78rem; font-weight: 700; color: var(--texte-doux); text-transform: uppercase; letter-spacing: 0.05em; }
.etiquette-nom { font-weight: 600; margin-top: 4px; }
.etiquette-code {
    margin: 8px 0 !important;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.7rem; font-weight: 700; letter-spacing: 0.18em; color: var(--primaire-fonce);
}
.etiquette-adresse { font-size: 0.78rem; color: var(--texte-doux); word-break: break-all; }

/* ---------- SAÉ : classes, formateurs, catalogue ---------- */

.champ-compact { min-height: 36px; padding: 5px 10px; font-size: 0.9rem; }
.champ-ordre { width: 80px; }
.champ-coef { width: 90px; text-align: right; }
.affectation { display: flex; gap: 6px; align-items: center; }
.affectation .champ { width: auto; max-width: 200px; }
.puce-formateur {
    display: inline-flex; align-items: center; gap: 4px; margin: 2px 4px 2px 0; padding: 3px 4px 3px 10px;
    border-radius: 999px; background: var(--primaire-doux); color: var(--primaire-fonce); font-size: 0.85rem; font-weight: 600;
}
.puce-retirer {
    border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1;
    width: 22px; height: 22px; border-radius: 50%;
}
.puce-retirer:hover { background: var(--surface); }
.tableau-catalogue { min-width: 1000px; }
.tableau-catalogue td { padding: 8px 10px; }
.total-coefficients { margin: 0; color: var(--texte-doux); }
.total-ok { color: var(--succes); }
.total-faux { color: var(--erreur); }
.tableau-catalogue { min-width: 1150px; }
.tableau-catalogue .col-titre { min-width: 340px; }

/* ---------- Équipes ---------- */

.resume-lien { text-decoration: none; }
.resume-lien:hover { background: var(--bordure); }
.liste-membres { list-style: none; padding: 0; margin: 12px 0; }
.liste-membres li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.liste-membres-compacte li { justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--bordure); font-size: 0.92rem; }
.liste-equipes { list-style: none; padding: 0; margin: 0; }
.equipe-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bordure); }
.equipe-ligne div { display: flex; flex-direction: column; gap: 2px; }
.equipe-ligne .badge { align-self: flex-start; margin-top: 4px; }
.deplacement { display: flex; gap: 6px; align-items: center; }
.deplacement .champ { width: auto; max-width: 170px; }
.carte-equipe .carte-meta { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.reglages-equipe { margin-top: 12px; border-top: 1px solid var(--bordure); padding-top: 8px; }
.reglages-equipe summary { cursor: pointer; font-weight: 600; color: var(--primaire-fonce); }
.reglages-equipe .formulaire { margin-top: 10px; }
.reglages-equipe label { font-size: 0.85rem; }
.creation-equipe { margin-top: 24px; max-width: 420px; }
.liste-membres-compacte li { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 0; }
.liste-membres-compacte .deplacement .champ { flex: 1; max-width: none; }

/* ---------- Parcours de microressources (apprenant) ---------- */

.avancement { margin-top: 24px; max-width: 520px; }
.avancement .progression { margin-bottom: 6px; }
.avancement p { margin: 0; }

.sequence { padding: clamp(16px, 3vw, 28px); }
.liste-mr { list-style: none; padding: 0; margin: 0; }

.mr-ligne {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 0; border-top: 1px solid var(--bordure);
}
.mr-ligne:first-child { border-top: 0; }

.mr-code {
    flex: none; min-width: 52px; padding: 4px 8px; text-align: center;
    border-radius: var(--rayon-badge); background: var(--primaire-doux); color: var(--primaire-fonce);
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
}
.mr-corps { flex: 1; min-width: 0; }
.mr-titre { display: block; font-weight: 600; color: var(--titres); text-decoration: none; }
a.mr-titre { color: var(--primaire-fonce); }
a.mr-titre:hover { text-decoration: underline; }
.mr-meta { margin: 2px 0 0; color: var(--texte-doux); font-size: 0.85rem; }

.mr-verrouillee .mr-code { background: var(--gris-doux); color: var(--gris-fonce); }
.mr-verrouillee .mr-titre { color: var(--inactif-texte); }

@media (max-width: 600px) {
    .mr-ligne { flex-wrap: wrap; gap: 8px 12px; }
    .mr-corps { flex-basis: 100%; order: 3; }
}

/* ---------- Pilotage d'une classe (formateur) ---------- */

.tableau-suivi td, .tableau-suivi th { padding: 8px 10px; text-align: center; }
.tableau-suivi td:first-child, .tableau-suivi th:first-child { text-align: left; white-space: nowrap; }
.tableau-suivi th { font-size: 0.72rem; }
.tableau-suivi a.badge { text-decoration: none; }
.tableau-suivi a.badge:hover { outline: 2px solid var(--bordure-forte); }
.tableau .texte-doux.petit { display: block; }
.barre-outils .texte-doux { margin: 0; max-width: 46ch; }

/* ---------- Présentations et annexes ---------- */

.lien-annexes { margin-left: 16px; }

.contenu-mr { max-width: 75ch; }
.contenu-mr img { max-width: 100%; height: auto; border-radius: var(--rayon-petit); }
.contenu-mr table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.93rem; }
.contenu-mr th, .contenu-mr td { padding: 8px 12px; border: 1px solid var(--bordure); text-align: left; }
.contenu-mr th { background: var(--tableau-entete); }
.contenu-mr blockquote {
    margin: 16px 0; padding: 12px 18px;
    border-left: 4px solid var(--primaire); background: var(--primaire-doux); border-radius: var(--rayon-petit);
}
.contenu-mr figure { margin: 16px 0; }
.contenu-mr figcaption { color: var(--texte-doux); font-size: 0.85rem; }

.liste-annexes { list-style: none; padding: 0; margin: 0; }
.liste-annexes li {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-top: 1px solid var(--bordure);
}
.liste-annexes li:first-child { border-top: 0; }
.annexe-type {
    flex: none; min-width: 54px; padding: 4px 8px; text-align: center;
    border-radius: var(--rayon-badge); background: var(--gris-doux); color: var(--gris-fonce);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
}
.annexe-titre { flex: 1; min-width: 0; font-weight: 600; }
.annexe-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ajout-annexe { margin-top: 20px; border-top: 1px solid var(--bordure); padding-top: 16px; }
.ajout-annexe .formulaire-grille { margin-bottom: 16px; }

@media (max-width: 600px) {
    .liste-annexes li { flex-wrap: wrap; }
    .annexe-titre { flex-basis: 100%; }
}

/* ---------- QCM ---------- */

.barre-qcm { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.barre-qcm p { margin: 0; }
.chrono {
    padding: 6px 14px; border-radius: var(--rayon-bouton);
    background: var(--primaire-doux); color: var(--primaire-fonce); font-weight: 600;
}
.chrono strong { font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.chrono-urgent { background: var(--erreur-doux); color: var(--erreur); }

.question h2 { margin-top: 4px; font-size: 1.15rem; }
.support-question {
    margin: 0 0 12px; padding: 12px 18px;
    border-left: 4px solid var(--bordure-forte); background: var(--fond);
    border-radius: var(--rayon-petit); color: var(--texte-doux);
}

.liste-choix { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.liste-choix .case { padding: 10px 14px; border: 1.5px solid var(--champ-bordure); border-radius: var(--rayon-champ); background: var(--surface); cursor: pointer; }
.liste-choix .case:hover { border-color: var(--primaire); }
.liste-choix input:disabled + span { color: var(--inactif-texte); }
.choix-attendu > .case { border-color: var(--succes); background: var(--succes-doux); }
.choix-faux > .case { border-color: var(--erreur); background: var(--erreur-doux); }

.question-fiche { padding: 16px 0; border-top: 1px solid var(--bordure); }
.question-fiche:first-of-type { border-top: 0; }
.question-fiche h3 { margin: 0; }
.liste-choix-gestion { list-style: none; padding: 0; margin: 8px 0; }
.liste-choix-gestion li { padding: 2px 0; font-size: 0.93rem; }
.liste-choix-gestion .choix-attendu { color: var(--succes); font-weight: 600; }
.proposition { margin-bottom: 8px; }
.proposition .champ { flex: 1; max-width: 520px; }

/* ---------- Graphiques (SVG écrit dans les contenus, sans script) ---------- */

.figure { margin: 24px 0; }
.figure figcaption { color: var(--texte-doux); font-size: 0.85rem; margin-top: 8px; }
.graphique { width: 100%; height: auto; }

.serie-1 { fill: var(--serie-1); }
.serie-2 { fill: var(--serie-2); }
.serie-3 { fill: var(--serie-3); }
.serie-4 { fill: var(--serie-4); }

.graphique-grille { stroke: var(--bordure); stroke-width: 1; }
.graphique-axe { stroke: var(--bordure-forte); stroke-width: 1; }
.graphique-texte { fill: var(--texte-doux); font-family: var(--police-texte); font-size: 12px; }
.graphique-mois { fill: var(--texte); font-family: var(--police-texte); font-size: 13px; font-weight: 600; }
.graphique-total { fill: var(--titres); font-family: var(--police-texte); font-size: 12px; font-weight: 700; }

.legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 12px; padding: 0; list-style: none; }
.legende li { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--texte-doux); }
.puce-serie { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.puce-serie-1 { background: var(--serie-1); }
.puce-serie-2 { background: var(--serie-2); }
.puce-serie-3 { background: var(--serie-3); }
.puce-serie-4 { background: var(--serie-4); }

/* ---------- Navigation d'une microressource à l'autre ---------- */

.navigation-mr {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin: 0 0 32px; padding-top: 16px; border-top: 1px solid var(--bordure);
}
.navigation-mr > div { display: flex; align-items: center; min-width: 0; }
.navigation-precedente { flex: 1; }
.navigation-suivante { flex: 1; justify-content: flex-end; text-align: right; }
.navigation-mr .bouton { max-width: 32ch; }

@media (max-width: 600px) {
    .navigation-mr { flex-direction: column; align-items: stretch; }
    .navigation-suivante { justify-content: flex-start; text-align: left; }
    .navigation-mr .bouton { max-width: none; width: 100%; }
}

/* ---------- Notes ---------- */

.tableau-notes th, .tableau-notes td { text-align: center; padding: 8px 10px; }
.tableau-notes td:first-child, .tableau-notes th:first-child { text-align: left; white-space: nowrap; }
.tableau-notes .note-ajustee { background: var(--accent-doux); color: var(--accent-fonce); font-weight: 600; }
.tableau-notes td a { display: block; font-size: 0.75rem; }
.ligne-note { padding: 6px 0; border-top: 1px solid var(--bordure); }
.ligne-note .nom-note { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.ligne-note .champ-ordre { width: 70px; }

/* ---------- Classification ---------- */

.liste-elements { list-style: none; padding: 0; margin: 0; }
.element { padding: 16px 0; border-top: 1px solid var(--bordure); }
.element:first-child { border-top: 0; }
.element-enonce { display: flex; gap: 10px; align-items: baseline; margin: 0 0 10px; font-weight: 500; }
.element-numero {
    flex: none; min-width: 26px; padding: 2px 6px; text-align: center;
    border-radius: var(--rayon-badge); background: var(--gris-doux); color: var(--gris-fonce);
    font-size: 0.78rem; font-weight: 700;
}
.element-categories { display: flex; gap: 8px; flex-wrap: wrap; }
.categorie {
    padding: 8px 14px; border: 1.5px solid var(--champ-bordure);
    border-radius: var(--rayon-champ); background: var(--surface); cursor: pointer;
}
.categorie:hover { border-color: var(--primaire); }
.categorie.choix-attendu { border-color: var(--succes); background: var(--succes-doux); }
.categorie.choix-faux { border-color: var(--erreur); background: var(--erreur-doux); }

/* Classification en glisser-déposer (commun/js/classement.js) */
.classement-plateau { display: grid; gap: 16px; }
.zones-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.zone-classement { min-height: 120px; padding: 10px; border: 2px dashed var(--bordure-forte); border-radius: var(--rayon); background: var(--fond); }
.zone-classement:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.zone-depart { background: var(--surface); }
.zone-nsp { border-style: dotted; }
.zone-survolee { border-color: var(--primaire); background: var(--primaire-doux); }
.zone-titre { margin: 0 0 8px; font-weight: 700; font-size: 0.9rem; color: var(--titres); }
.zone-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 40px; }
.zone-depart .zone-cartes { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.classement-plateau .element.carte-classement { padding: 8px 10px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); background: var(--surface); box-shadow: var(--carte-ombre); cursor: grab; }
.classement-plateau .element-enonce { margin: 0; font-size: 0.92rem; }
.classement-plateau .element-categories { display: none; }
.carte-classement:hover { border-color: var(--primaire); }
.carte-classement:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.carte-selectionnee { border-color: var(--primaire); background: var(--primaire-doux); box-shadow: 0 0 0 2px var(--primaire); }
.carte-deplacee { opacity: 0.5; }
.classement-plateau .element.carte-figee { cursor: default; box-shadow: none; background: var(--fond); }
.carte-figee:hover { border-color: var(--bordure); }
.element .message { margin-top: 10px; }

/* ---------- Dialogues ---------- */

.dialogue-progression { max-width: 420px; margin-bottom: 6px; }
.dialogue-compteur { margin: 0 0 16px; }
.dialogue-repliques { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }

.replique { display: flex; align-items: flex-start; gap: 12px; max-width: 42em; }
.replique-apprenant { flex-direction: row-reverse; margin-left: auto; }

.portrait { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--primaire-doux); }
.portrait-initiales {
    display: inline-grid; place-items: center;
    color: var(--primaire-fonce); font-weight: 700; font-size: 0.95rem;
}
.replique-apprenant .portrait { background: var(--accent-doux); color: var(--accent-fonce); }

.bulle {
    flex: 1; padding: 12px 16px;
    background: var(--surface); border: 1px solid var(--bordure);
    border-radius: var(--rayon); border-top-left-radius: 4px;
}
.replique-apprenant .bulle { background: var(--primaire-doux); border-color: var(--primaire-doux); border-top-left-radius: var(--rayon); border-top-right-radius: 4px; }
.bulle .locuteur { margin: 0 0 4px; font-size: 0.9rem; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.bulle .propos { margin: 0; }

.dialogue-commandes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.dialogue-attente .bulle { color: var(--texte-doux); font-style: italic; font-size: 0.9rem; padding-top: 8px; padding-bottom: 8px; }
.dialogue-attente { margin-left: 60px; }
.dialogue-attente.replique-apprenant { margin-left: auto; margin-right: 60px; }
.dialogue-choix { margin-top: 20px; display: grid; gap: 8px; max-width: 42em; }
.dialogue-choix .bouton-large { justify-content: flex-start; text-align: left; }