/**
 * Styles de base - CFM77 / ECSR Depot
 * Variables CSS + Reset + Layout
 */

/* ========================================
   VARIABLES CSS GLOBALES
   ======================================== */

:root {
    /* Couleurs principales */
    --color-primary: #3b82f6;
    --color-primary-dark: #2563eb;
    --color-primary-light: #60a5fa;

    /* Header sombre */
    --color-header: #1e293b;
    --color-header-text: #ffffff;

    /* Couleurs secondaires */
    --color-secondary: #64748b;
    --color-secondary-dark: #475569;
    --color-secondary-light: #94a3b8;

    /* Vert de l'opérationnalisation (section + coches) */
    --color-ope: #059669;

    /* Couleurs d'etat */
    --color-success: #10b981;
    --color-success-light: #34d399;
    --color-success-bg: #d1fae5;
    --color-warning: #f59e0b;
    --color-warning-light: #fbbf24;
    --color-warning-dark: #d97706;
    --color-warning-bg: #fef3c7;
    --color-error: #ef4444;
    --color-error-light: #f87171;
    --color-error-bg: #fee2e2;
    --color-error-text: #991b1b;
    --color-error-border: #fecaca;
    --color-success-text: #065f46;
    --color-success-border: #a7f3d0;
    --color-warning-text: #92400e;
    --color-warning-border: #fde68a;
    --color-info-text: #1e40af;
    --color-info-border: #bfdbfe;
    --color-info: #3b82f6;
    --color-info-light: #60a5fa;
    --color-info-bg: #dbeafe;

    /* Contenu venu de CFM77 (base admin) : teinte de fond volontairement très pâle,
       elle situe l'origine sans jamais concurrencer les couleurs de statut. */
    --color-natif-bg: #f4f8fd;

    /* Alias couleurs semantiques */
    --color-danger: #ef4444;
    --color-danger-light: rgba(239, 68, 68, 0.1);
    --color-danger-bg: #fee2e2;
    --color-danger-text: #991b1b;

    /* Mode copier/coller (étiquette et jour/semaine) – rose, utilisé pour
       les boutons, pastilles, ghosts et highlights du mode copie */
    --color-copy: #ec4899;
    --color-copy-dark: #db2777;
    --color-copy-darker: #be185d;
    --color-copy-bg: #fdf2f8;
    --color-copy-border: #fbcfe8;
    --color-copy-border-hover: #f9a8d4;
    --color-copy-alpha: rgba(236, 72, 153, 0.10);

    /* Couleurs de fond */
    --color-bg-hover: rgba(0, 0, 0, 0.02);
    --color-bg-secondary: #f8fafc;
    --color-bg-tertiary: #f1f5f9;
    --color-primary-light-alpha: rgba(37, 99, 235, 0.08);
    --color-success-light-alpha: rgba(34, 197, 94, 0.1);

    /* Couleurs par role */
    --color-role-eleve: #8b5cf6;
    --color-role-eleve-light: #a78bfa;
    --color-role-formateur: #06b6d4;
    --color-role-formateur-light: #22d3ee;
    --color-role-admin: #ef4444;
    --color-role-admin-light: #f87171;

    /* Couleurs neutres */
    --color-white: #ffffff;
    --color-black: #0f172a;
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;

    /* Bordure card - teinte bleutee subtile */
    --color-border: #e0e7ff;
    --color-border-light: #eef2ff;

    /* LE FILET SOUS UN TITRE : la couleur du titre lui-même, éclaircie. Le bleuté de
       --color-border convient au cadre d'une carte, pas au trait qui souligne un titre
       gris foncé : la parenté ne se lit pas, et le trait tire vers le bleu. */
    --color-border-titre: color-mix(in srgb, var(--color-gray-800) 22%, white);

    /* Couleurs des 6 catégories de thèmes 57 (REMC) – source de vérité */
    --color-cat-physiologique:    #24a6da;  /* cyan */
    --color-cat-comportement:     #f59e0b;  /* orange */
    --color-cat-physique:         #10b981;  /* vert */
    --color-cat-reglementation:   #3b82f6;  /* bleu */
    --color-cat-conscientisation: #8b5cf6;  /* violet */
    --color-cat-accidentologie:   #ef4444;  /* rouge */

    /* Couleurs du RÉFÉRENTIEL – sections du livret ECSR (--color-tc/ccp1/ccp2 et
       leurs variantes -text/-light/-hover) et compétences du livret B
       (--color-comp-1..4) : VOLONTAIREMENT ABSENTES D'ICI.
       Elles se règlent dans la console (Réglages → Couleurs du référentiel), vivent
       dans la table `settings` de la base admin, et sont injectées par les deux
       en-têtes (renderCouleursReferentielCss). Une valeur écrite ici en ferait une
       seconde source, qui finirait par contredire la base. */

    /* Couleurs des types de bloc (headers d'étiquettes planning) – source de vérité */
    --color-type-salle:           #8b5cf6;  /* violet */
    --color-type-vehicule:        #10b981;  /* vert */
    --color-type-preparation:     #d97706;  /* orange */
    --color-type-theme_ecsr:      #3b82f6;  /* bleu */
    --color-type-pause:           #64748b;  /* gris */
    --color-type-accueil:         #64748b;
    --color-type-lancement:       #64748b;
    --color-type-bilan:           #64748b;
    --color-type-travail:         #64748b;
    --color-type-autre:           #64748b;
    --color-type-ccp1:            #ca8a04;  /* jaune moyen */
    --color-type-ccp2:            #eab308;  /* jaune clair */
    --color-type-entretien_final: #a16207;  /* jaune soutenu */

    /* Les quatre niveaux de score (getScoreLevel) : teinte franche, fond pâle, bordure.
       Lues par le badge de score ET par la carte d'un élève – une seule source. */
    /* La rampe va du rouge au vert, sans jamais passer par le bleu : une note se lit comme
       un feu, du plus mauvais au meilleur. Un bleu au milieu casse la lecture – il ne dit
       ni « attention » ni « c'est bon ». */
    --score-1-color: #dc2626;
    --score-1-bg: #fee2e2;
    --score-1-border: #fecaca;
    --score-2-color: #ea580c;
    --score-2-bg: #ffedd5;
    --score-2-border: #fed7aa;
    --score-3-color: #ca8a04;
    --score-3-bg: #fef9c3;
    --score-3-border: #fde047;
    --score-4-color: #16a34a;
    --score-4-bg: #dcfce7;
    --score-4-border: #bbf7d0;

    /* Couleurs des épreuves (salle / véhicule / entretien technique) */
    --epreuve-salle-color: #3b82f6;
    --epreuve-salle-bg: #eff6ff;
    --epreuve-vehicule-color: #059669;
    --epreuve-vehicule-bg: #ecfdf5;
    --epreuve-entretien_technique-color: var(--color-warning, #f59e0b);
    --epreuve-entretien_technique-bg: #fff7ed;
    --epreuve-entretien_final-color: #db2777;
    --epreuve-entretien_final-bg: #fdf2f8;
    --epreuve-questionnaire-color: #8b5cf6;
    --epreuve-questionnaire-bg: #f5f3ff;
    --epreuve-sensibilisation-color: #ef4444;
    --epreuve-sensibilisation-bg: #fef2f2;
    /* Le CCP 2 prend la couleur de la sensibilisation, et ses deux temps la partagent. */
    --epreuve-ccp2-color: var(--epreuve-sensibilisation-color);
    --epreuve-ccp2-bg: var(--epreuve-sensibilisation-bg);

    /* Couleurs livret ECSR (déclaratif / acquisition) */
    --livret-declaratif-vide: #e5e7eb;
    --livret-declaratif-abordee: #93c5fd;
    --livret-declaratif-traitee: #3b82f6;
    --livret-acquisition-vide: #e5e7eb;
    --livret-acquisition-en-cours: #f59e0b;
    --livret-acquisition-acquis: #10b981;
    --livret-indent-chapitre: 20px;
    --livret-indent-souschapitre: 40px;
    --livret-indent-theme: 60px;

    /* Tailles de texte */
    --text-title: 25px;
    --text-h2: 20px;
    --text-subtitle: 18px;
    --text-section-title: 17px;
    --text-h3: 16px;
    --text-body: 15px;
    --text-small: 15px;
    --text-label: 14px;
    --text-tiny: 13px;
    --text-meta: 12px;
    --text-xs: 11px;
}

/* ========================================
   MAPPINGS PÉDAGOGIQUES (catégorie/compétence → couleur)
   Tout élément portant un data-categorie ou data-competence expose la couleur
   correspondante via les custom properties --cat-color / --comp-color, que le
   CSS de page peut ensuite consommer (background, border, color, accent-color…).
   Source unique de vérité : --color-cat-* et --color-comp-* définis dans :root.
   ======================================== */

/* data-categorie expose plusieurs alias de la même couleur pour compatibilité
   avec les CSS existantes :
   - --cat-color      : nom canonique (utilisé par planning, générateur, récap)
   - --theme-color    : alias historique (cartes themes, livret)
   - --category-color : alias historique (titres de section, suivi pédago)
   - --filter-color   : alias historique (boutons de filtres)
   - --fiche-color    : alias historique (fiches de cours – cours.css, pedago-livret-b-cours.css)
   - --lpb-color      : alias historique (wrappers .lpb_cours – partagés livret B / thèmes 57) */
[data-categorie="physiologique"]    { --cat-color: var(--color-cat-physiologique);    --theme-color: var(--color-cat-physiologique);    --category-color: var(--color-cat-physiologique);    --filter-color: var(--color-cat-physiologique);    --fiche-color: var(--color-cat-physiologique);    --lpb-color: var(--color-cat-physiologique); }
[data-categorie="comportement"]     { --cat-color: var(--color-cat-comportement);     --theme-color: var(--color-cat-comportement);     --category-color: var(--color-cat-comportement);     --filter-color: var(--color-cat-comportement);     --fiche-color: var(--color-cat-comportement);     --lpb-color: var(--color-cat-comportement); }
[data-categorie="physique"]         { --cat-color: var(--color-cat-physique);         --theme-color: var(--color-cat-physique);         --category-color: var(--color-cat-physique);         --filter-color: var(--color-cat-physique);         --fiche-color: var(--color-cat-physique);         --lpb-color: var(--color-cat-physique); }
[data-categorie="reglementation"]   { --cat-color: var(--color-cat-reglementation);   --theme-color: var(--color-cat-reglementation);   --category-color: var(--color-cat-reglementation);   --filter-color: var(--color-cat-reglementation);   --fiche-color: var(--color-cat-reglementation);   --lpb-color: var(--color-cat-reglementation); }
[data-categorie="conscientisation"] { --cat-color: var(--color-cat-conscientisation); --theme-color: var(--color-cat-conscientisation); --category-color: var(--color-cat-conscientisation); --filter-color: var(--color-cat-conscientisation); --fiche-color: var(--color-cat-conscientisation); --lpb-color: var(--color-cat-conscientisation); }
[data-categorie="accidentologie"]   { --cat-color: var(--color-cat-accidentologie);   --theme-color: var(--color-cat-accidentologie);   --category-color: var(--color-cat-accidentologie);   --filter-color: var(--color-cat-accidentologie);   --fiche-color: var(--color-cat-accidentologie);   --lpb-color: var(--color-cat-accidentologie); }

/* data-competence expose plusieurs alias de la même couleur pour compatibilité
   avec les CSS existantes :
   - --comp-color : nom canonique
   - --cat-color  : alias générique pour les composants qui affichent
                    indifféremment un thème salle ou un objectif véhicule
   - --remc-color : alias historique pour les composants REMC (livret B, cours)
   - --lpb-color  : alias historique pour les accordéons/badges livret B */
[data-competence="1"] { --comp-color: var(--color-comp-1); --cat-color: var(--color-comp-1); --remc-color: var(--color-comp-1); --lpb-color: var(--color-comp-1); --category-color: var(--color-comp-1); }
[data-competence="2"] { --comp-color: var(--color-comp-2); --cat-color: var(--color-comp-2); --remc-color: var(--color-comp-2); --lpb-color: var(--color-comp-2); --category-color: var(--color-comp-2); }
[data-competence="3"] { --comp-color: var(--color-comp-3); --cat-color: var(--color-comp-3); --remc-color: var(--color-comp-3); --lpb-color: var(--color-comp-3); --category-color: var(--color-comp-3); }
[data-competence="4"] { --comp-color: var(--color-comp-4); --cat-color: var(--color-comp-4); --remc-color: var(--color-comp-4); --lpb-color: var(--color-comp-4); --category-color: var(--color-comp-4); }

/* data-type-bloc expose --type-color pour les composants affichant le type
   d'une étiquette planning (headers de créneaux, aperçu du générateur, etc.) */
[data-type-bloc="salle"]           { --type-color: var(--color-type-salle); }
[data-type-bloc="vehicule"]        { --type-color: var(--color-type-vehicule); }
[data-type-bloc="preparation"]     { --type-color: var(--color-type-preparation); }
[data-type-bloc="theme_ecsr"]      { --type-color: var(--color-type-theme_ecsr); }
[data-type-bloc="pause"]           { --type-color: var(--color-type-pause); }
[data-type-bloc="accueil"]         { --type-color: var(--color-type-accueil); }
[data-type-bloc="lancement"]       { --type-color: var(--color-type-lancement); }
[data-type-bloc="bilan"]           { --type-color: var(--color-type-bilan); }
[data-type-bloc="travail"]         { --type-color: var(--color-type-travail); }
[data-type-bloc="autre"]           { --type-color: var(--color-type-autre); }
[data-type-bloc="ccp1"]            { --type-color: var(--color-type-ccp1); }
[data-type-bloc="ccp2"]            { --type-color: var(--color-type-ccp2); }
[data-type-bloc="entretien_final"] { --type-color: var(--color-type-entretien_final); }

/* Réduction proportionnelle en mobile : -2/-3px pour les titres, -1px pour le reste */
@media (max-width: 950px) {
    :root {
        --text-title: 22px;
        --text-h2: 18px;
        --text-subtitle: 16px;
        --text-section-title: 15px;
        --text-h3: 15px;
        --text-body: 14px;
        --text-small: 14px;
        --text-label: 13px;
        --text-tiny: 12px;
        --text-meta: 11px;
        --text-xs: 10px;
    }
}

/* ========================================
   RESET CSS
   ======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* UN ÉLÉMENT `hidden` EST CACHÉ, QUELLE QUE SOIT SA CLASSE : la règle du navigateur cède devant
   le moindre `display` d'une classe. Une seule règle pour tout le site – pas une par composant. */
[hidden] {
    display: none !important;
}

/* LE REPÈRE DU CLAVIER, une fois pour tout le site : sans lui, chaque navigateur pose son
   propre trait, noir et épais. `:focus-visible` ne se montre qu'à la navigation au clavier –
   un clic à la souris ne le déclenche pas. Les champs de saisie gardent le leur
   (`components/forms.css`), chargé après celui-ci. */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

html {
    font-size: var(--text-body);
    scroll-behavior: smooth;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

html.menu_ouvert,
html.modale_ouverte {
    overflow: clip;
}

/* ========================================
   BARRES DE DÉFILEMENT
   ======================================== */

/* Réglage COMMUN à tout le site : la page, les modales, et n'importe quelle zone qui
   défile à l'intérieur (tableau, liste, aperçu). La barre du système est large et
   opaque – dans une fenêtre de 600 px elle forme un bandeau qui pèse autant que ce
   qu'on lit. Fine, translucide, un peu plus marquée au survol.
   Posé sur `*` et non sur `html` : `scrollbar-width` ne s'hérite pas, une zone
   scrollable imbriquée retrouverait la barre du système. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.25);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--color-gray-700);
    background-color: var(--color-gray-50);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-wrap: pretty;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 150ms ease;
}

a:hover {
    color: var(--color-primary-dark);
}

p {
    text-align: justify;
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

button {
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* ========================================
   LAYOUT
   ======================================== */

.main_content {
    flex: 1;
    padding: 20px 20px;
    max-width: 1350px;
    width: 100%;
    margin: 0 auto;
}

/* ========================================
   PAGE HEADER
   ======================================== */

.page_header {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-left: 16px;
    border-left: 3px solid var(--color-primary);
}

/* Le titre d'écran nomme la PAGE, pas le document : une feuille imprimée porte son
   propre titre, ou n'en a pas besoin. */
@media print {
    .page_header {
        display: none;
    }
}

.page_header_actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.page_header_group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.page_title {
    font-size: var(--text-title);
    color: var(--color-gray-800);
    font-weight: 700;
}

/* Au fer à gauche, jamais justifié : sur deux lignes et peu de mots, la justification
   écarte les espaces jusqu'à trouer la phrase. Le site justifie tous ses paragraphes
   (règle sur `p`) – celui-ci fait exception, c'est une légende, pas un texte suivi. */
.page_subtitle {
    color: var(--color-gray-500);
    font-size: var(--text-body);
    text-align: left;
}

@media (max-width: 1350px) {
    /* L'écart de 16 px séparait le titre des boutons, côte à côte. Empilés, il devient une
       bande vide sous le titre – et sous 950 px, où les boutons partent en bas de l'écran,
       il ne sépare plus rien du tout. */
    .page_header {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .page_header_actions {
        flex-wrap: wrap;
    }
}

/* Sur écran étroit, la NAVIGATION de l'en-tête s'efface : elle est reprise en bas de l'écran
   par `mobile-nav.php`, que la page déclare avec `$mobileNav`. Un lien mène ailleurs, il a sa
   place dans une barre de navigation.
   Les GESTES restent : « Vider le journal », « Tirage au sort », « Nouvel établissement » ne
   vont nulle part, ils agissent sur la page ouverte. Leur place est près de ce sur quoi ils
   agissent – et la barre du bas ne les porte jamais. */
@media (max-width: 950px) {
    .page_header_actions > a,
    .page_header_actions > .page_selector,
    .page_header_actions > .page_header_group {
        display: none;
    }
}

/* ========================================
   STYLES DE LISTES – Classes utilitaires
   Chaque <ul> ou <ol> porte sa propre classe de style.
   Pas d'héritage contextuel, pas de reset nécessaire.
   Utilisable partout dans l'app (cours, pages, modales).
   ======================================== */

/* --- Puces disc ● --- */
ul.list_disc {
    list-style: disc;
    padding-left: 20px;
    margin: 0 0 16px;
}
ul.list_disc > li {
    position: static;
    padding-left: 0;
}
ul.list_disc > li::before {
    content: none;
}
/* Puce légèrement grise (uniforme sur tout le site) */
ul.list_disc > li::marker {
    color: var(--color-gray-500);
}

/* --- Croix ✕ (rouge, pour erreurs / insuffisances) --- */
ul.list_cross {
    list-style: none;
    padding-left: 24px;
    margin: 0 0 12px;
}
ul.list_cross > li {
    position: relative;
    padding-left: 4px;
}
ul.list_cross > li::before {
    content: '\2715';
    position: absolute;
    left: -22px;
    top: 0;
    font-size: var(--text-tiny);
    font-weight: 700;
    color: #dc2626;
    line-height: 1.6;
}

/* --- Flèches → (couleur = --section-color > --fiche-color) – pour détailler une étape, une méthode --- */
ul.list_arrow {
    list-style: none;
    padding-left: 20px;
    margin: 0 0 12px;
}
ul.list_arrow > li {
    position: relative;
    padding-left: 4px;
}
ul.list_arrow > li::before {
    content: '→';
    position: absolute;
    left: -18px;
    top: 0;
    font-weight: 700;
    color: var(--section-color, var(--fiche-color, #2c3e6b));
    line-height: 1.6;
}
/* Liste imbriquée dans un <li> : collée à son parent, pas de marge sup./inf. */
li > ul.list_arrow,
li > ul.list_disc,
li > ul.list_check {
    margin: 0;
}

/* Coches « appartient à cette catégorie » : en liste ou ailleurs (.coche).
   Pour un « oui / non », voir .icone_oui / .icone_non dans base/cours.css.
   .fiche_tableau .coche : passe devant la couleur de la 1re colonne. */
ul.list_check > li::before,
.coche,
.fiche_tableau .coche {
    font-weight: 700;
    color: var(--section-color, var(--fiche-color, #2c3e6b));
}

ul.list_check {
    list-style: none;
    padding-left: 24px;
    margin: 0 0 12px;
}
ul.list_check > li {
    position: relative;
    padding-left: 4px;
}
ul.list_check > li::before {
    content: '✓';
    position: absolute;
    left: -22px;
    top: 0;
    font-size: var(--text-label);
    line-height: 1.6;
}

/* --- Pastilles numérotées ①②③ (couleur = --section-color > --fiche-color) --- */
ol.list_steps {
    padding-left: 0;
    margin: 0 0 16px;
    list-style: none;
    counter-reset: fiche-step;
}
ol.list_steps > li {
    position: relative;
    padding-left: 32px;
    counter-increment: fiche-step;
}
ol.list_steps > li::before {
    content: counter(fiche-step);
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--section-color, var(--fiche-color, #2c3e6b)) 12%, white);
    color: var(--section-color, var(--fiche-color, #2c3e6b));
    font-size: var(--text-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Sans style (flex, badges, composants spéciaux) --- */
ul.list_bare,
ol.list_bare {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
ul.list_bare > li,
ol.list_bare > li {
    position: static;
    padding-left: 0;
}
ul.list_bare > li::before,
ol.list_bare > li::before {
    content: none;
}

/* ========================================
   CHEVRON UNIFORME
   Style fin en "v" pour tous les accordeons/toggles
   Centralise ici - ne pas dupliquer ailleurs
   ======================================== */

.chevron,
.toggle_icon,
.accordeon_chevron,
.theme_toggle_icon,
.question_expand_icon,
.livret_toggle_icon,
.livret_section_expand_icon,
.livret_section_arrow,
.livret_chapitre_arrow,
.livret_souschapitre_arrow,
.date_arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.chevron::before,
.toggle_icon::before,
.accordeon_chevron::before,
.theme_toggle_icon::before,
.question_expand_icon::before,
.livret_toggle_icon::before,
.livret_section_expand_icon::before,
.livret_section_arrow::before,
.livret_chapitre_arrow::before,
.livret_souschapitre_arrow::before,
.date_arrow::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border: solid #747A81;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    transform-origin: 75% 75%;
    transition: transform 200ms ease;
}

/* Etats ouverts/expanded - rotation vers le haut */
.ouvert .toggle_icon::before,
.ouvert .accordeon_chevron::before,
[data-expanded="true"] .accordeon_chevron::before,
.theme_row.ouvert .theme_toggle_icon::before,
.question_card.ouvert .question_expand_icon::before,
[data-expanded="true"] .livret_toggle_icon::before,
[data-expanded="true"] .livret_section_expand_icon::before,
.livret_section.ouvert .livret_section_arrow::before,
.lpb_competence.ouvert .livret_section_arrow::before,
.livret_chapitre.ouvert .livret_chapitre_arrow::before,
.livret_souschapitre.ouvert .livret_souschapitre_arrow::before,
[data-order="asc"] .date_arrow::before {
    transform: rotate(-135deg);
}



/* ========================================
   ONGLETS (composant reutilisable)
   ======================================== */

.section_tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border, #e2e8f0);
    margin-bottom: 20px;
}

.section_tab {
    padding: 12px 24px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: var(--text-body);
    font-weight: 500;
    color: var(--color-gray-500, #64748b);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 150ms ease;
}

.section_tab:hover {
    color: var(--color-primary, #3b82f6);
}

.section_tab.active {
    color: var(--color-primary, #3b82f6);
    border-bottom-color: var(--color-primary, #3b82f6);
}

/* Onglet sans objet (ex. « Exporter » quand il n'y a rien à sortir). État porté par une
   classe et non par l'attribut `disabled` : un bouton désactivé ne reçoit plus le survol,
   et l'info-bulle qui explique pourquoi il est fermé ne s'afficherait pas. */
.section_tab_disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.section_tab_disabled:hover {
    color: var(--color-gray-500, #64748b);
}

.section_tab_content {
    display: none;
}

.section_tab_content.active {
    display: block;
}

/* Responsive onglets */
@media (max-width: 500px) {
    .section_tab {
        padding: 10px 12px;
    }
}

/* ========================================
   ALERTES
   ======================================== */

.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: var(--text-body);
}

.alert_error {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-border);
}

.alert_success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

.alert_warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

/* ========================================
   UTILITIES
   ======================================== */

.text_center,
.table th.text_center,
.table td.text_center {
    text-align: center;
}

.text_right,
.table th.text_right,
.table td.text_right {
    text-align: right;
}

.text_muted {
    color: var(--color-gray-500);
}

.eleves_list .text_muted {
    padding: 16px;
}

.action_buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.hidden {
    display: none;
}

/* Ce qui n'a pas sa place sur un téléphone : un geste destructeur qu'on ne fait pas
   debout dans un couloir, un repère qui n'éclaire qu'une décision de bureau. L'élément
   reste rendu par PHP – il revient dès que l'écran s'élargit, sans rien recharger. */
/* L'inverse de `secondaire_large` : ce qui n'existe QUE sur téléphone, quand la même chose
   se dit autrement sur un écran large. Les deux vont par paire – un élément marqué ici a son
   jumeau marqué `secondaire_large` ailleurs dans la page. */
@media (min-width: 751px) {
    .seulement_petit {
        display: none !important;
    }
}

@media (max-width: 750px) {
    /* `!important` assumé : un utilitaire ne pèse qu'une classe et perdrait contre
       n'importe quel composant déclaré plus loin – `.badge`, `.button_icon_danger`, qui
       posent tous leur propre `display`. Masquer doit trancher, sans quoi la classe ne
       sert à rien là où on en a justement besoin. */
    .secondaire_large {
        display: none !important;
    }
}

.display_inline {
    display: inline;
}

/* --- Spacing utilities --- */

.mt_4 { margin-top: 4px; }
.mt_8 { margin-top: 8px; }
.mt_16 { margin-top: 16px; }
.mt_24 { margin-top: 24px; }

.mb_8 { margin-bottom: 8px; }
.mb_16 { margin-bottom: 16px; }
.mb_24 { margin-bottom: 24px; }

.ml_8 { margin-left: 8px; }

.no_margin { margin: 0; }

.text_small { font-size: var(--text-tiny); }
.text_xsmall { font-size: var(--text-meta); }