/* ==========================================================================
   Gestion d'école — feuille de style
   Univers visuel : le tableau noir (vert ardoise), l'encre bleue du stylo,
   le stylo rouge de la correction et le cahier Seyès.
   ========================================================================== */

/* Polices locales : l'application fonctionne sans Internet sous Laragon */
@font-face {
    font-family: 'Andika';
    src: url('../fonts/andika-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Andika';
    src: url('../fonts/andika-latin-700-normal.woff2') format('woff2');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Caractères étendus (ex. ɓ, ɗ, ŋ, ɲ des noms en pular) */
@font-face {
    font-family: 'Andika';
    src: url('../fonts/andika-latin-ext-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Andika';
    src: url('../fonts/andika-latin-ext-700-normal.woff2') format('woff2');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Andika';
    src: url('../fonts/andika-latin-400-italic.woff2') format('woff2');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Cursive Ecole';
    src: url('../fonts/playwrite-fr-moderne-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Thème « Tableau noir » (par défaut) */
:root, [data-theme="tableau"] {
    --tableau: #1D3B31;
    --tableau-2: #25493D;
    --tableau-3: #2F5749;
    --cadre: #6E4B33;
    --craie: #F1F4EF;
    --craie-2: rgba(241, 244, 239, .72);
    --craie-3: rgba(241, 244, 239, .5);
    --craie-jaune: #E9B949;

    --encre: #1E3F99;
    --encre-2: #16307A;
    --encre-pale: #E8EDFA;
    --rouge: #C0262D;
    --rouge-pale: #FBEAEA;
    --vert: #2F7D4F;
    --vert-pale: #E4F1E8;
    --ambre: #8A5A00;
    --ambre-pale: #FBF1DC;

    --papier: #FFFFFF;
    --fond: #F2F5F3;
    --texte: #1B2622;
    --gris: #56645F;
    --gris-2: #84918C;
    --trait: #D8E0DB;
    --trait-2: #E7ECE9;
    --seyes: #D5DEF0;
    --seyes-fort: #B9C6E6;
    --marge: #E59A9E;

    --serie-1: #3460C8;   /* recettes, effectifs : encre */
    --serie-2: #B57A10;   /* dépenses : craie jaune foncée */
    --barres-1: #2F7D4F;  /* barres de chargement : vert, vert clair, craie jaune */
    --barres-2: #63B58A;
    --barres-3: #E9B949;

    /* Nuances dérivées (chaque thème les redéfinit) */
    --titre: var(--tableau);            /* titres écrits à la craie */
    --encre-texte: var(--encre);        /* encre utilisée comme couleur de texte */
    --encre-texte-2: var(--encre-2);
    --encre-active: #12286A;
    --encre-bord: #9DB0E0;
    --encre-bord-pale: #C8D3F0;
    --encre-fonce: #1C3373;
    --vert-bord: #BFDCC8;
    --vert-fonce: #1F5A37;
    --rouge-bord: #F0C2C4;
    --rouge-fonce: #8E1B21;
    --rouge-active: #A31F25;
    --rouge-contour: #E7AFB1;
    --ambre-fonce: #6B4600;
    --ambre-bord: #C08A1E;
    --craie-jaune-survol: #DFAE3C;
    --rebord-haut: #8C6545;
    --rebord-bas: #5E3F2A;

    --surface-1: #FAFBFA;   /* bandeaux de filtres, en-têtes discrets */
    --surface-2: #F7F9F8;   /* en-têtes de tableaux, cases vides */
    --surface-3: #ECF0EE;   /* pastilles neutres, icônes */
    --survol: #F8FAFE;      /* ligne survolée */
    --champ-fond: #FFFFFF;
    --champ-bord: #C8D2CD;
    --champ-desactive: #EEF2F0;
    --libelle: #2C3833;
    --texte-doux: #33403B;
    --topbar-fond: rgba(255, 255, 255, .96);
    --cahier-fond: #FFFFFF;
    --cahier-trame: #E6EBF6;
    --discussion-fond: #FCFDFE;
    --discussion-trame: #EEF2FA;
    --bulle-fond: #FFFFFF;
    --ligne-alerte: #FFF8F8;
    --ligne-alerte-survol: #FFF1F1;
    --icone-vide: #A7B6D9;
    --jauge-fond: #E6ECE9;
    --aide-fond: #FBF6E9;
    --aide-bord: #EEDDB3;
    --aide-texte: #5A4A1E;
    --wa: #1C8A4B;          /* vert WhatsApp (boutons) */
    --wa-texte: #1C8A4B;
    --wa-pale: #E3F4EA;
    --wa-fait: #F3FAF6;
    --wa-bord: #9FD3B4;
    --focus: rgba(52, 96, 200, .55);
    --focus-doux: rgba(52, 96, 200, .18);

    --r-petit: 6px;
    --r-moyen: 10px;
    --r-grand: 14px;

    --bs-body-font-family: 'Andika', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: var(--texte);
    --bs-body-bg: var(--fond);
    --bs-primary: #1E3F99;
    --bs-primary-rgb: 30, 63, 153;
    --bs-danger: #C0262D;
    --bs-danger-rgb: 192, 38, 45;
    --bs-success: #2F7D4F;
    --bs-success-rgb: 47, 125, 79;
    --bs-link-color: var(--encre-texte);
    --bs-link-color-rgb: 30, 63, 153;
    --bs-link-hover-color: var(--encre-texte-2);
    --bs-border-color: var(--trait);
    --bs-secondary-color: var(--gris);
}

/* ---------- Thème « Océan » : l'Atlantique de Conakry, bleu profond et sable ---------- */
[data-theme="ocean"] {
    --tableau: #0D3446; --tableau-2: #12435A; --tableau-3: #18526D;
    --cadre: #B8956A; --rebord-haut: #CBA97D; --rebord-bas: #8C6B43;
    --craie: #EEF6F9; --craie-2: rgba(238, 246, 249, .74); --craie-3: rgba(238, 246, 249, .52);
    --craie-jaune: #F4B860; --craie-jaune-survol: #EAA845;
    --encre: #0B6E8A; --encre-2: #085A71; --encre-pale: #E1F1F6;
    --encre-texte: #0B6E8A; --encre-texte-2: #075468;
    --encre-active: #064A5D; --encre-bord: #8FC3D3; --encre-bord-pale: #C3E0EA; --encre-fonce: #0A4253;
    --titre: #0D3446;
    --fond: #EDF4F7; --papier: #FFFFFF;
    --texte: #13272F; --gris: #4C6470; --gris-2: #7D949E;
    --trait: #D0DFE6; --trait-2: #E2ECF0;
    --seyes: #CBE1EA; --seyes-fort: #A6C9D6; --marge: #EE9787;
    --surface-1: #F7FAFC; --surface-2: #F1F7F9; --surface-3: #E1ECF0; --survol: #F0F8FB;
    --champ-bord: #C1D4DC; --champ-desactive: #ECF3F6; --libelle: #21404B; --texte-doux: #2B434C;
    --cahier-trame: #DFEDF3; --discussion-fond: #FAFDFE; --discussion-trame: #E5F1F5;
    --icone-vide: #9CC3D1; --jauge-fond: #DEEAEF;
    --serie-1: #0B6E8A; --serie-2: #E08A2E;
    --focus: rgba(11, 110, 138, .5); --focus-doux: rgba(11, 110, 138, .18);
    --bs-primary: #0B6E8A; --bs-primary-rgb: 11, 110, 138; --bs-link-color-rgb: 11, 110, 138;
}

/* ---------- Thème « Savane » : terre rouge, bois et soleil ---------- */
[data-theme="savane"] {
    --tableau: #3A2317; --tableau-2: #4A2E1F; --tableau-3: #5A3928;
    --cadre: #9A5A2E; --rebord-haut: #B0703F; --rebord-bas: #71401D;
    --craie: #FBF3E6; --craie-2: rgba(251, 243, 230, .74); --craie-3: rgba(251, 243, 230, .52);
    --craie-jaune: #F2B632; --craie-jaune-survol: #E2A41E;
    --encre: #974712; --encre-2: #7B390E; --encre-pale: #F7E9DE;
    --encre-texte: #974712; --encre-texte-2: #74360D;
    --encre-active: #5F2C0A; --encre-bord: #D9B092; --encre-bord-pale: #ECD3C0; --encre-fonce: #5C2B0B;
    --titre: #5A3928;
    --fond: #F6EFE6; --papier: #FFFDF9;
    --texte: #2B1E16; --gris: #6A594D; --gris-2: #998678;
    --trait: #E4D6C6; --trait-2: #EEE4D7;
    --seyes: #EADBC7; --seyes-fort: #D7BFA1; --marge: #D2775A;
    --surface-1: #FBF7F1; --surface-2: #F8F1E8; --surface-3: #EEE3D5; --survol: #FBF4EA;
    --champ-bord: #DAC9B4; --champ-desactive: #F3ECE2; --libelle: #3D2B20; --texte-doux: #44332A;
    --cahier-trame: #F0E6D8; --discussion-fond: #FFFCF7; --discussion-trame: #F2E8DC;
    --icone-vide: #D0B597; --jauge-fond: #EDE2D4;
    --serie-1: #974712; --serie-2: #2F7D4F;
    --focus: rgba(151, 71, 18, .5); --focus-doux: rgba(151, 71, 18, .18);
    --bs-primary: #974712; --bs-primary-rgb: 151, 71, 18; --bs-link-color-rgb: 151, 71, 18;
}

/* ---------- Thème « Nuit » : sombre, repose les yeux le soir ---------- */
[data-theme="nuit"] {
    color-scheme: dark;
    --barres-1: #4FAF7C; --barres-2: #8FD1AC; --barres-3: #E9B949;
    --tableau: #0D1412; --tableau-2: #16201D; --tableau-3: #1F2C28;
    --cadre: #4A3626; --rebord-haut: #5C4330; --rebord-bas: #36271B;
    --craie: #E8EEEA; --craie-2: rgba(232, 238, 234, .72); --craie-3: rgba(232, 238, 234, .5);
    --craie-jaune: #E9B949; --craie-jaune-survol: #F2C764;
    --encre: #3C62D2; --encre-2: #3357C0; --encre-pale: #1B2747;
    --encre-texte: #93AEFF; --encre-texte-2: #B8CAFF;
    --encre-active: #2A49A6; --encre-bord: #3E5591; --encre-bord-pale: #2D3E6C; --encre-fonce: #C9D6FF;
    --rouge: #E5484D; --rouge-pale: #381B1D; --rouge-bord: #6A2C30; --rouge-fonce: #FFB3B5; --rouge-active: #CC3A3F; --rouge-contour: #7C3438;
    --vert: #4CC584; --vert-pale: #15301F; --vert-bord: #285E3D; --vert-fonce: #A6E9C2;
    --ambre: #F0B95A; --ambre-pale: #382B11; --ambre-fonce: #F6D38E; --ambre-bord: #8A6420;
    --titre: #DCE7E1;
    --fond: #0F1513; --papier: #172120;
    --texte: #E2E9E5; --gris: #A0AEA8; --gris-2: #7B8984;
    --trait: #2B3835; --trait-2: #232F2C;
    --seyes: #22303A; --seyes-fort: #324558; --marge: #8A4A4E;
    --surface-1: #1A2523; --surface-2: #1C2826; --surface-3: #25332F; --survol: #1D2A32;
    --champ-fond: #111917; --champ-bord: #34433F; --champ-desactive: #19221F; --libelle: #CFD9D4; --texte-doux: #C4CFCA;
    --topbar-fond: rgba(19, 27, 25, .94);
    --cahier-fond: #172120; --cahier-trame: #1E2A31; --discussion-fond: #131C1A; --discussion-trame: #1A2630;
    --bulle-fond: #1E2A27;
    --ligne-alerte: #29191A; --ligne-alerte-survol: #321E1F;
    --icone-vide: #4B5E88; --jauge-fond: #25322F;
    --aide-fond: #2A2513; --aide-bord: #5B4E21; --aide-texte: #EAD8A5;
    --wa: #1F9A55; --wa-texte: #4FD08A; --wa-pale: #14301F; --wa-fait: #13281C; --wa-bord: #2E6A47;
    --serie-1: #7C9BFF; --serie-2: #E9B949;
    --focus: rgba(147, 174, 255, .6); --focus-doux: rgba(147, 174, 255, .22);
    --bs-primary: #3C62D2; --bs-primary-rgb: 60, 98, 210; --bs-link-color-rgb: 147, 174, 255;
    --bs-danger: #E5484D; --bs-danger-rgb: 229, 72, 77;
    --bs-success: #4CC584; --bs-success-rgb: 76, 197, 132;
    --bs-secondary-bg: var(--surface-2); --bs-tertiary-bg: var(--surface-1); --bs-emphasis-color: #F4F8F6;
}
[data-theme="nuit"] .tableau-noir { box-shadow: inset 0 0 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .04); }
[data-theme="nuit"] .avatar-craie { background: #2B3A35; color: var(--craie); }

/* Menus déroulants, panneaux et fenêtres sur la couleur du papier (tous thèmes) */
.dropdown-menu { --bs-dropdown-bg: var(--papier); --bs-dropdown-border-color: var(--trait); --bs-dropdown-link-color: var(--texte); --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-hover-color: var(--texte); --bs-dropdown-divider-bg: var(--trait-2); --bs-dropdown-header-color: var(--gris); }
.offcanvas { --bs-offcanvas-bg: var(--papier); --bs-offcanvas-color: var(--texte); }
.modal { --bs-modal-bg: var(--papier); --bs-modal-color: var(--texte); --bs-modal-border-color: var(--trait); }

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--bs-body-font-family);
    font-size: .9375rem;
    line-height: 1.55;
    background: var(--fond);
    color: var(--texte);
}
a { text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.text-muted, .text-secondary { color: var(--gris) !important; }
.chiffres { font-variant-numeric: tabular-nums; }
.fw-semi { font-weight: 600; }
.petit { font-size: .82rem; }

/* ---------- Boutons et formulaires ---------- */
.btn { --bs-btn-border-radius: var(--r-petit); --bs-btn-font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.btn-sm { --bs-btn-border-radius: 5px; }
.btn-primary {
    --bs-btn-bg: var(--encre); --bs-btn-border-color: var(--encre);
    --bs-btn-hover-bg: var(--encre-2); --bs-btn-hover-border-color: var(--encre-2);
    --bs-btn-active-bg: var(--encre-active); --bs-btn-active-border-color: var(--encre-active);
    --bs-btn-disabled-bg: var(--encre); --bs-btn-disabled-border-color: var(--encre);
}
.btn-outline-primary {
    --bs-btn-color: var(--encre-texte); --bs-btn-border-color: var(--encre-bord);
    --bs-btn-hover-bg: var(--encre); --bs-btn-hover-border-color: var(--encre); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--encre-2); --bs-btn-active-border-color: var(--encre-2);
}
.btn-light {
    --bs-btn-bg: var(--papier); --bs-btn-border-color: var(--trait); --bs-btn-color: var(--texte);
    --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--champ-bord); --bs-btn-hover-color: var(--texte);
    --bs-btn-active-bg: var(--surface-3); --bs-btn-active-border-color: var(--champ-bord); --bs-btn-active-color: var(--texte);
    --bs-btn-disabled-bg: var(--papier); --bs-btn-disabled-color: var(--gris); --bs-btn-disabled-border-color: var(--trait);
}
.btn-danger {
    --bs-btn-bg: var(--rouge); --bs-btn-border-color: var(--rouge);
    --bs-btn-hover-bg: var(--rouge-active); --bs-btn-hover-border-color: var(--rouge-active);
}
.btn-outline-danger {
    --bs-btn-color: var(--rouge); --bs-btn-border-color: var(--rouge-contour); --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--rouge); --bs-btn-hover-border-color: var(--rouge);
}
.btn-craie {
    --bs-btn-bg: var(--craie-jaune); --bs-btn-border-color: var(--craie-jaune); --bs-btn-color: #2B230F;
    --bs-btn-hover-bg: var(--craie-jaune-survol); --bs-btn-hover-border-color: var(--craie-jaune-survol); --bs-btn-hover-color: #2B230F;
}

.form-label { font-weight: 600; font-size: .86rem; margin-bottom: .3rem; color: var(--libelle); }
.form-control, .form-select { border-color: var(--champ-bord); border-radius: var(--r-petit); background-color: var(--champ-fond); color: var(--texte); }
.form-control:disabled, .form-select:disabled { background-color: var(--champ-desactive); }
.form-control:focus, .form-select:focus { border-color: var(--encre); box-shadow: 0 0 0 .2rem var(--focus-doux); }
.form-text { color: var(--gris); font-size: .8rem; }
.form-check-input:checked { background-color: var(--encre); border-color: var(--encre); }
.requis { color: var(--rouge); }
.invalid-feedback { color: var(--rouge); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--rouge); }

/* ---------- Mise en page ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: 272px;
    flex-shrink: 0;
    background-color: var(--tableau);
    /* poussière de craie, très discrète */
    background-image:
        radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.4px),
        radial-gradient(rgba(255, 255, 255, .03) 1px, transparent 1.4px);
    background-size: 9px 9px, 17px 17px;
    background-position: 0 0, 4px 6px;
    color: var(--craie);
    z-index: 1040;
}
.sidebar-interne {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--tableau-3) transparent;
}
.marque { display: flex; align-items: center; gap: 12px; padding: 20px 20px 18px; border-bottom: 1px solid color-mix(in srgb, var(--craie) 12%, transparent); text-decoration: none; color: var(--craie); }
.marque:hover { color: #fff; }
.marque-logo { width: 42px; height: 42px; border-radius: 50%; background: var(--craie); color: var(--tableau); display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; overflow: hidden; }
.marque-logo img { width: 100%; height: 100%; object-fit: cover; }
.marque-nom { font-family: 'Cursive Ecole', cursive; font-size: 1rem; line-height: 1.55; display: block; }
.marque-sous { display: block; font-size: .76rem; color: var(--craie-3); margin-top: 2px; }

.nav-groupe { padding: 14px 12px 2px; }
.nav-groupe-titre { font-size: .76rem; color: var(--craie-3); padding: 0 10px 5px; }
.nav-lien {
    display: flex; align-items: center; gap: 11px;
    padding: 7px 10px; margin-bottom: 1px;
    border-radius: var(--r-petit);
    color: color-mix(in srgb, var(--craie) 86%, transparent); text-decoration: none; font-size: .92rem;
    position: relative;
}
.nav-lien .bi { font-size: 1.02rem; width: 18px; text-align: center; opacity: .9; }
.nav-lien:hover { background: var(--tableau-2); color: #fff; }
.nav-lien.actif { background: var(--tableau-3); color: #fff; font-weight: 600; }
.nav-lien.actif::before { content: ''; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 4px; border-radius: 0 3px 3px 0; background: var(--craie-jaune); }
.nav-compteur { margin-left: auto; font-size: .72rem; font-weight: 700; background: color-mix(in srgb, var(--craie-jaune) 20%, transparent); color: var(--craie-jaune); border-radius: 999px; padding: 0 7px; }
.sidebar-pied { padding: 16px 22px 22px; font-size: .78rem; color: var(--craie-3); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 1020;
    height: 60px; display: flex; align-items: center; gap: 12px;
    padding: 0 28px; background: var(--topbar-fond);
    border-bottom: 1px solid var(--trait);
    backdrop-filter: saturate(1.2) blur(6px);
}
.topbar .btn-menu { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 9px; font-size: 1.3rem; border-radius: 9px; }

/* ---------- Menu principal ----------
   Sur ordinateur : bouton ☰ et recherche en haut à gauche ; le menu s'ouvre en panneau de tuiles sous la barre du haut
   et la page garde toute la largeur. Sur téléphone : le menu latéral vert, en liste. */
.menu-ouvert .topbar .btn-menu { background: var(--encre); border-color: var(--encre); color: #fff; }
.menu-recherche { width: 300px; max-width: 30vw; }
.menu-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid color-mix(in srgb, var(--craie) 12%, transparent); }
.menu-tete .marque { border-bottom: 0; flex: 1; min-width: 0; }
.menu-fermer { flex-shrink: 0; width: 38px; height: 38px; margin-right: 12px; border: 0; border-radius: 50%; background: transparent;
    color: var(--craie-2); font-size: 1.05rem; display: grid; place-items: center; }
.menu-fermer:hover { background: var(--tableau-2); color: #fff; }
.menu-aucun { margin: 18px 22px; color: var(--craie-2); font-size: .9rem; }
button.nav-groupe-titre { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none;
    font: inherit; font-size: .76rem; color: var(--craie-3); padding: 0 10px 5px; text-align: left; }
button.nav-groupe-titre .bi, .nav-chevron { display: none; }

@media (min-width: 992px) {
    .sidebar {
        position: fixed; left: 0; top: 60px; bottom: 0; width: 540px; max-width: calc(100vw - 80px);
        transform: translateX(-102%); visibility: hidden; transition: transform .25s ease, visibility .25s;
        background: var(--fond); background-image: none; color: var(--texte); border-right: 1px solid var(--trait);
    }
    .sidebar-interne { max-height: 100%; height: 100%; display: flex; flex-direction: column; scrollbar-color: var(--trait) transparent; }
    .menu-ouvert .sidebar { transform: none; visibility: visible; box-shadow: 12px 0 40px -8px rgba(16, 32, 26, .28); }
    .menu-ouvert .voile { display: block; position: fixed; left: 0; right: 0; top: 60px; bottom: 0; background: rgba(15, 25, 21, .16); z-index: 1030; }

    .menu-tete { background: var(--papier); border-bottom: 1px solid var(--trait); }
    .menu-tete .marque { color: var(--titre); padding: 13px 18px; }
    .menu-tete .marque:hover { color: var(--titre); }
    .menu-tete .marque-logo { width: 38px; height: 38px; background: var(--tableau); color: var(--craie); }
    .menu-tete .marque-sous { color: var(--gris); }
    .menu-fermer { color: var(--gris); }
    .menu-fermer:hover { background: var(--fond); color: var(--texte); }
    .menu-nav { flex: 1 0 auto; display: flex; flex-direction: column; padding-bottom: 6px; }
    .menu-aucun { color: var(--gris); }

    /* Tuiles : trois par ligne, l'icône au-dessus du nom, de la couleur de la rubrique */
    .nav-groupe { padding: 16px 18px 2px; }
    .nav-groupe-titre { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gris); padding: 0 2px 8px; }
    .nav-liens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .nav-lien {
        flex-direction: column; justify-content: center; gap: 7px; min-height: 92px; margin: 0; padding: 14px 8px 11px;
        background: var(--papier); border: 1px solid var(--trait); border-radius: 10px;
        color: var(--texte); font-size: .84rem; line-height: 1.25; text-align: center;
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .nav-lien .bi { font-size: 1.75rem; width: auto; opacity: 1; color: var(--g); }
    .nav-lien:hover { background: var(--papier); color: var(--texte); border-color: color-mix(in srgb, var(--g) 55%, var(--trait));
        transform: translateY(-2px); box-shadow: 0 10px 18px -12px color-mix(in srgb, var(--g) 70%, #000); }
    .nav-lien.actif { background: color-mix(in srgb, var(--g) 9%, var(--papier)); border-color: var(--g); color: var(--texte); font-weight: 700; }
    .nav-lien.actif::before { display: none; }
    .nav-compteur { position: absolute; top: 7px; right: 7px; margin: 0; background: var(--rouge); color: #fff; }
    .nav-lien > .barres-chargement { position: absolute; top: 9px; left: 9px; margin: 0; color: var(--g); }

    .nav-groupe-principal { --g: var(--encre); }
    .nav-groupe-scolarite { --g: #3460C8; }
    .nav-groupe-suivi { --g: #2F8A57; }
    .nav-groupe-finances { --g: #B57A10; }
    .nav-groupe-communication { --g: #7B5BC8; }
    .nav-groupe-administration { --g: #4F6B78; }
    [data-theme="nuit"] .nav-lien .bi, [data-theme="nuit"] button.nav-groupe-titre .bi { color: color-mix(in srgb, var(--g) 65%, #fff); }

    /* Administration : en bas du panneau, repliée, en liste (comme « Système ») */
    .nav-groupe.repliable { margin-top: auto; padding-top: 10px; }
    .nav-groupe.repliable .nav-groupe-titre { padding: 11px 6px; border-top: 1px solid var(--trait); font-size: .95rem; font-weight: 600;
        letter-spacing: 0; text-transform: none; color: var(--texte); cursor: pointer; }
    .nav-groupe.repliable .nav-groupe-titre .bi { display: inline; color: var(--g); margin-right: 8px; }
    .nav-groupe.repliable .nav-chevron { display: inline; color: var(--gris); margin: 0; transition: transform .2s ease; }
    .nav-groupe.repliable.replie .nav-chevron { transform: rotate(-90deg); }
    .nav-groupe.repliable.replie .nav-liens { display: none; }
    .nav-groupe.repliable.replie.recherche .nav-liens { display: grid; }
    .nav-groupe.repliable .nav-liens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; padding-bottom: 6px; }
    .nav-groupe.repliable .nav-lien { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 0; padding: 8px 10px;
        border-color: transparent; background: none; text-align: left; font-size: .88rem; }
    .nav-groupe.repliable .nav-lien .bi { font-size: 1.05rem; }
    .nav-groupe.repliable .nav-lien:hover { background: var(--papier); border-color: var(--trait); transform: none; box-shadow: none; }
    .nav-groupe.repliable .nav-lien.actif { background: color-mix(in srgb, var(--g) 9%, var(--papier)); border-color: var(--g); }
    .sidebar-pied { padding: 10px 24px 14px; color: var(--gris); border-top: 1px solid var(--trait); }
}
@media (max-width: 991.98px) {
    .menu-recherche { display: none; }
}
.annee-choix { display: flex; align-items: center; gap: 8px; }
.annee-choix .form-select { width: auto; font-weight: 600; font-size: .88rem; padding-top: .3rem; padding-bottom: .3rem; }
.archive { font-size: .76rem; font-weight: 700; color: var(--ambre); background: var(--ambre-pale); border-radius: 999px; padding: 2px 9px; }
.utilisateur { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texte); }
.utilisateur-nom { font-weight: 600; font-size: .88rem; line-height: 1.2; }
.utilisateur-role { font-size: .76rem; color: var(--gris); }

.app-content { padding: 26px 28px 48px; width: 100%; }  /* toute la largeur de l'écran */

/* ---------- En-tête de page : le titre est « écrit au tableau » ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.page-title { font-family: 'Cursive Ecole', cursive; font-weight: 400; font-size: 1.75rem; line-height: 1.6; margin: 0; color: var(--titre); }
.page-sub { color: var(--gris); margin: 0; font-size: .95rem; max-width: 70ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fil { font-size: .84rem; margin-bottom: 2px; }
.fil a { color: var(--gris); text-decoration: none; }
.fil a:hover { color: var(--encre-texte); text-decoration: underline; }

/* ---------- Feuilles (panneaux de papier) ---------- */
.feuille { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r-moyen); }
.feuille + .feuille { margin-top: 20px; }
.feuille-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 18px; min-height: 58px; border-bottom: 1px solid var(--trait-2); }
.feuille-titre { font-size: 1rem; font-weight: 700; margin: 0; }
.feuille-titre small { font-weight: 400; color: var(--gris); font-size: .84rem; margin-left: 6px; }
.feuille-corps { padding: 18px; }
.feuille-pied { padding: 12px 18px; border-top: 1px solid var(--trait-2); }

/* ---------- Registre : tableau aux lignes de cahier ---------- */
.registre { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.registre thead th {
    font-size: .79rem; font-weight: 700; color: var(--gris);
    background: var(--surface-2); border-bottom: 1px solid var(--trait);
    padding: 9px 14px; white-space: nowrap; text-align: left;
}
.registre tbody td { padding: 10px 14px; border-bottom: 1px solid var(--seyes); vertical-align: middle; }
.registre tbody tr:last-child td { border-bottom: 0; }
.registre tbody tr:hover td { background: var(--survol); }
.registre tfoot td { padding: 10px 14px; border-top: 2px solid var(--seyes-fort); font-weight: 700; }
.registre .num { width: 46px; text-align: right; color: var(--gris-2); border-right: 2px solid var(--marge); padding-right: 12px; }
.registre thead .num { border-right: 2px solid var(--marge); }
.registre .droite, .registre th.droite { text-align: right; }
.registre .centre, .registre th.centre { text-align: center; }
.registre .actions { text-align: right; white-space: nowrap; width: 1%; }
.registre-scroll { overflow-x: auto; }
.ligne-alerte td { background: var(--ligne-alerte); }
.ligne-alerte:hover td { background: var(--ligne-alerte-survol) !important; }

/* ---------- Pastilles ---------- */
.pastille { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; font-size: .77rem; font-weight: 700; line-height: 1.65; white-space: nowrap; }
.pastille .bi { font-size: .8rem; }
.pastille-ok { background: var(--vert-pale); color: var(--vert); }
.pastille-alerte { background: var(--rouge-pale); color: var(--rouge); }
.pastille-attente { background: var(--ambre-pale); color: var(--ambre); }
.pastille-info { background: var(--encre-pale); color: var(--encre-texte); }
.pastille-neutre { background: var(--surface-3); color: var(--gris); }

/* Notes : le stylo rouge souligne ce qui est sous la moyenne */
.note-faible { color: var(--rouge); font-weight: 700; }
.note-bonne { color: var(--vert); font-weight: 700; }
.montant { font-variant-numeric: tabular-nums; white-space: nowrap; }
.montant-reste { color: var(--rouge); font-weight: 700; }

/* ---------- Avatars ---------- */
.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: .78rem; background: var(--encre-pale); color: var(--encre-texte); flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 104px; height: 104px; font-size: 1.8rem; border: 4px solid var(--papier); box-shadow: 0 0 0 1px var(--trait); }
.avatar-craie { background: var(--craie); color: var(--tableau); }
.avatar-sm { width: 28px; height: 28px; font-size: .66rem; }
.avatar-photo { background: var(--papier); box-shadow: 0 0 0 1px var(--trait); }
.personne { display: flex; align-items: center; gap: 10px; min-width: 0; }
.personne-nom { font-weight: 600; color: var(--texte); text-decoration: none; display: block; line-height: 1.25; }
a.personne-nom:hover { color: var(--encre-texte); text-decoration: underline; }
.personne-sous { font-size: .8rem; color: var(--gris); display: block; }

/* ---------- Le tableau noir (tableau de bord) ---------- */
.tableau-noir {
    position: relative;
    background-color: var(--tableau);
    background-image:
        radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px),
        radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.4px);
    background-size: 8px 8px, 15px 15px;
    background-position: 0 0, 3px 5px;
    color: var(--craie);
    border: 7px solid var(--cadre);
    border-radius: var(--r-grand);
    box-shadow: inset 0 0 50px rgba(0, 0, 0, .28);
    padding: 22px 28px 20px;
    margin-bottom: 34px;
}
/* Rebord en bois du tableau… */
.tableau-noir.avec-rebord::after {
    content: '';
    position: absolute;
    left: 2.5%; right: 2.5%; bottom: -17px;
    height: 10px;
    background: linear-gradient(var(--rebord-haut), var(--rebord-bas));
    border-radius: 1px 1px 5px 5px;
    box-shadow: 0 4px 8px -3px rgba(27, 38, 34, .4);
}
/* …et deux bâtons de craie posés dessus (blanc, puis jaune) */
.tableau-noir.avec-rebord::before {
    content: '';
    position: absolute;
    left: 8%; bottom: -7px;
    width: 32px; height: 6px;
    background: #F4F6F2;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(27, 38, 34, .3), 44px 0 0 -1px var(--craie-jaune);
    z-index: 1;
}
.tableau-date { font-family: 'Cursive Ecole', cursive; font-size: 1.55rem; line-height: 1.7; margin: 0; }
.tableau-ligne { color: var(--craie-2); margin: 0; font-size: .95rem; }
.craie-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: 18px; }
.craie-stat { padding: 4px 22px; border-left: 1px dashed color-mix(in srgb, var(--craie) 28%, transparent); }
.craie-stat:first-child { border-left: 0; padding-left: 0; }
.craie-stat .valeur { font-size: 1.85rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.craie-stat .valeur small { font-size: 1rem; font-weight: 600; color: var(--craie-2); }
.craie-stat .libelle { font-size: .86rem; color: var(--craie-2); }
.craie-stat .detail { font-size: .8rem; color: var(--craie-jaune); margin-top: 2px; }
.craie-stat a { color: inherit; }

/* ---------- Pagination aux couleurs de l'encre ---------- */
.pagination {
    --bs-pagination-color: var(--encre-texte); --bs-pagination-hover-color: var(--encre-texte-2);
    --bs-pagination-active-bg: var(--encre); --bs-pagination-active-border-color: var(--encre);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--focus-doux);
    --bs-pagination-bg: var(--papier); --bs-pagination-hover-bg: var(--surface-2); --bs-pagination-hover-border-color: var(--trait);
    --bs-pagination-disabled-bg: var(--surface-1); --bs-pagination-disabled-color: var(--gris-2); --bs-pagination-disabled-border-color: var(--trait);
    --bs-pagination-border-color: var(--trait); font-variant-numeric: tabular-nums;
}

/* ---------- Divers ---------- */
.vide { text-align: center; padding: 38px 20px; color: var(--gris); }
.vide .bi { font-size: 2rem; color: var(--icone-vide); display: block; margin-bottom: 8px; }
.vide p { margin: 0 auto 14px; max-width: 46ch; }

.filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 18px; border-bottom: 1px solid var(--trait-2); background: var(--surface-1); border-radius: var(--r-moyen) var(--r-moyen) 0 0; }
.filtres .form-control, .filtres .form-select { font-size: .88rem; }
.filtres > div { min-width: 140px; }
.filtres label:not(.btn), .filtres .filtre-titre { font-size: .76rem; font-weight: 600; color: var(--gris); margin-bottom: 2px; display: block; }
.filtres .btn-group .btn { font-size: .86rem; }

.jauge { height: 8px; border-radius: 4px; background: var(--jauge-fond); overflow: hidden; min-width: 80px; }
.jauge > span { display: block; height: 100%; border-radius: 4px; background: var(--serie-1); }
.jauge.pleine > span { background: var(--rouge); }

.fiche-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--trait); font-size: .92rem; }
.fiche-ligne:last-child { border-bottom: 0; }
.fiche-ligne .cle { color: var(--gris); }
.fiche-ligne .val { font-weight: 600; text-align: right; }

.nav-onglets { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--trait); margin-bottom: 18px; }
.nav-onglets .onglet { border: 0; background: none; padding: 9px 14px; font-weight: 600; color: var(--gris); border-bottom: 3px solid transparent; margin-bottom: -1px; text-decoration: none; font-size: .92rem; }
.nav-onglets .onglet:hover { color: var(--texte); }
.nav-onglets .onglet.active { color: var(--encre-texte); border-bottom-color: var(--encre); }

.annonce { padding: 14px 0; border-bottom: 1px solid var(--trait-2); }
.annonce:last-child { border-bottom: 0; padding-bottom: 0; }
.annonce:first-child { padding-top: 0; }
.annonce-titre { font-weight: 700; margin: 0 0 2px; font-size: .95rem; }
.annonce-meta { font-size: .78rem; color: var(--gris); }
.annonce-texte { margin: 6px 0 0; font-size: .9rem; color: var(--texte-doux); white-space: pre-line; }
/* Date d'une annonce : petite feuille d'éphéméride */
.annonce-date { width: 54px; border: 1px solid var(--trait); border-radius: var(--r-petit); overflow: hidden; background: var(--papier); align-self: flex-start; }
.annonce-date .jour { display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.5; color: var(--texte); font-variant-numeric: tabular-nums; }
.annonce-date .mois { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--rouge); color: #fff; padding: 1px 0; }
.min-w-0 { min-width: 0; }

/* Chiffres clés sur une feuille blanche */
.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.indicateur { padding: 14px 20px; border-left: 1px solid var(--trait-2); }
.indicateur:first-child { border-left: 0; }
.indicateur .valeur { font-size: 1.45rem; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; white-space: nowrap; }
.indicateur .valeur small { font-size: .85rem; font-weight: 600; color: var(--gris); }
.indicateur .libelle { font-size: .83rem; color: var(--gris); }

/* Une note dans la liste des notes d'une matière */
.note-puce { display: inline-flex; align-items: baseline; gap: 2px; padding: 1px 8px; border-radius: 6px; background: var(--encre-pale); color: var(--encre-texte); font-weight: 700; font-size: .84rem; font-variant-numeric: tabular-nums; }
.note-puce small { font-weight: 600; opacity: .7; font-size: .72rem; }
.note-puce .type { font-weight: 400; font-size: .7rem; opacity: .75; margin-left: 4px; }
.note-puce.basse { background: var(--rouge-pale); color: var(--rouge); }

.roles-aide { background: var(--surface-2); border: 1px solid var(--trait-2); border-radius: var(--r-petit); padding: 10px 12px; color: var(--gris); display: grid; gap: 3px; }
.roles-aide strong { color: var(--texte); }
.apercu-logo { width: 64px; height: 64px; font-size: 1.6rem; box-shadow: 0 0 0 1px var(--trait); }

.alerte { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--r-moyen); padding: 11px 14px; margin-bottom: 16px; font-size: .92rem; border: 1px solid; }
.alerte .bi { font-size: 1.05rem; margin-top: 1px; }
.alerte-succes { background: var(--vert-pale); border-color: var(--vert-bord); color: var(--vert-fonce); }
.alerte-erreur { background: var(--rouge-pale); border-color: var(--rouge-bord); color: var(--rouge-fonce); }
.alerte-info { background: var(--encre-pale); border-color: var(--encre-bord-pale); color: var(--encre-fonce); }
.alerte .fermer { margin-left: auto; background: none; border: 0; color: inherit; opacity: .6; padding: 0 2px; }

/* Appel : boutons Présent / Absent / Retard */
.choix-statut { display: inline-flex; border: 1px solid var(--trait); border-radius: var(--r-petit); overflow: hidden; }
.choix-statut input { position: absolute; opacity: 0; pointer-events: none; }
.choix-statut label { padding: 5px 12px; font-size: .84rem; font-weight: 600; cursor: pointer; color: var(--gris); border-left: 1px solid var(--trait); user-select: none; }
.choix-statut label:first-of-type { border-left: 0; }
.choix-statut input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: -3px; }
.choix-statut input[value="present"]:checked + label { background: var(--vert-pale); color: var(--vert); }
.choix-statut input[value="absent"]:checked + label { background: var(--rouge); color: #fff; }
.choix-statut input[value="retard"]:checked + label { background: var(--ambre-pale); color: var(--ambre); }

.saisie-note { width: 92px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.saisie-note.sous-moyenne { color: var(--rouge); border-color: var(--rouge-contour); }

/* Emploi du temps */
.edt { width: 100%; border-collapse: separate; border-spacing: 6px; table-layout: fixed; }
.edt th { font-size: .82rem; color: var(--gris); font-weight: 700; text-align: center; padding: 4px; }
.edt .heure { width: 92px; font-size: .8rem; color: var(--gris); text-align: right; vertical-align: top; padding-top: 10px; font-variant-numeric: tabular-nums; }
.edt td.case { vertical-align: top; height: 74px; border-radius: 8px; background: var(--surface-2); border: 1px dashed var(--trait); }
.cours { display: block; height: 100%; border-radius: 8px; padding: 8px 10px; background: var(--papier); border: 1px solid var(--trait); border-left: 5px solid var(--couleur, var(--encre)); text-decoration: none; color: var(--texte); font-size: .84rem; line-height: 1.35; text-align: left; width: 100%; }
button.cours:hover { border-top-color: var(--champ-bord); border-right-color: var(--champ-bord); border-bottom-color: var(--champ-bord); box-shadow: 0 3px 10px -6px rgba(27, 38, 34, .45); }
.cours-matiere { font-weight: 700; display: block; }
.cours-detail { color: var(--gris); font-size: .78rem; display: block; }

/* Connexion : un cahier ouvert */
.page-connexion { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: var(--fond); }
.connexion-tableau { background-color: var(--tableau); background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px), radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.4px); background-size: 8px 8px, 15px 15px; color: var(--craie); padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; border-right: 10px solid var(--cadre); }
.connexion-tableau h1 { font-family: 'Cursive Ecole', cursive; font-weight: 400; font-size: 2.3rem; line-height: 1.6; margin: 0 0 12px; }
.connexion-tableau p { color: var(--craie-2); max-width: 40ch; font-size: 1.02rem; }
.connexion-liste { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.connexion-liste li { display: flex; gap: 10px; align-items: baseline; color: var(--craie); }
.connexion-liste .bi { color: var(--craie-jaune); }
.connexion-cahier { display: grid; place-items: center; padding: 40px 24px; }
.cahier {
    width: 100%; max-width: 440px; padding: 36px 36px 30px 92px; border-radius: 4px 12px 12px 4px;
    background-color: var(--cahier-fond);
    background-image:
        linear-gradient(90deg, transparent 62px, var(--marge) 62px, var(--marge) 64px, transparent 64px),
        repeating-linear-gradient(0deg, transparent 0 31px, var(--seyes-fort) 31px 32px),
        repeating-linear-gradient(0deg, transparent 0 7px, var(--cahier-trame) 7px 8px),
        repeating-linear-gradient(90deg, transparent 0 31px, var(--cahier-trame) 31px 32px);
    box-shadow: 0 1px 0 rgba(27, 38, 34, .05), 0 18px 40px -24px rgba(27, 38, 34, .45);
    border: 1px solid var(--trait);
}
.cahier h2 { font-family: 'Cursive Ecole', cursive; font-weight: 400; font-size: 1.5rem; color: var(--encre-texte); margin: 0 0 18px; line-height: 1.7; }
.cahier .form-control { background: color-mix(in srgb, var(--champ-fond) 92%, transparent); }
.demo { margin-top: 18px; font-size: .82rem; background: color-mix(in srgb, var(--papier) 94%, transparent); border: 1px dashed var(--trait); border-radius: 8px; padding: 10px 12px; }
.demo button { background: none; border: 0; padding: 0; color: var(--encre-texte); text-decoration: underline; text-underline-offset: 2px; font-size: .82rem; }

/* ---------- Emploi du temps : toutes les classes sur une grille ---------- */
.edt-general { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-variant-numeric: tabular-nums; }
.edt-general thead th { background: var(--surface-2); border-bottom: 1px solid var(--trait); padding: 9px 8px; font-size: .8rem; font-weight: 700; color: var(--gris); text-align: center; }
.edt-general thead th.aujourdhui { color: var(--encre-texte); box-shadow: inset 0 -3px 0 var(--encre); }
.edt-general .col-classe { width: 120px; }
.edt-general .col-heure { width: 110px; }
.edt-general tbody th.col-classe { background: var(--surface-1); border-right: 2px solid var(--marge); border-bottom: 2px solid var(--seyes-fort); text-align: center; vertical-align: middle; padding: 8px 6px; font-weight: 400; }
.edt-general tbody th.col-classe a { display: block; font-family: 'Cursive Ecole', cursive; font-size: 1.25rem; line-height: 1.7; color: var(--titre); text-decoration: none; }
.edt-general tbody th.col-classe a:hover { color: var(--encre-texte); }
.edt-general tbody th.col-classe span { display: block; font-size: .74rem; color: var(--gris-2); }
.edt-general td { height: 48px; padding: 4px 5px; border-bottom: 1px solid var(--seyes); border-right: 1px solid var(--trait-2); vertical-align: middle; }
.edt-general td:last-child { border-right: 0; }
.edt-general tbody tr:last-child td { border-bottom: 2px solid var(--seyes-fort); }
.edt-general td.col-heure { font-size: .76rem; color: var(--gris); text-align: center; white-space: nowrap; background: var(--surface-1); }

.puce-cours {
    display: block; width: 100%; min-height: 39px; padding: 4px 8px;
    border: 0; border-left: 4px solid var(--couleur, var(--encre)); border-radius: 6px;
    background: var(--surface-2); background: color-mix(in srgb, var(--couleur, var(--encre)) 12%, var(--papier));
    color: var(--texte); font-size: .78rem; line-height: 1.3; text-align: left;
    transition: opacity .15s ease, background-color .15s ease;
}
.puce-cours .matiere { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puce-cours .prof { display: block; font-size: .73rem; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.puce-cours:hover { background: color-mix(in srgb, var(--couleur, var(--encre)) 21%, var(--papier)); }
.puce-cours.estompe { opacity: .22; }
.case-vide { display: grid; place-items: center; width: 100%; min-height: 39px; border: 1px dashed transparent; border-radius: 6px; background: none; color: transparent; }
.case-vide:hover, .case-vide:focus-visible { border-color: var(--seyes-fort); background: var(--survol); color: var(--encre-texte); }
.puce-cours.selection, .case-vide.selection { outline: 2px solid var(--encre); outline-offset: 1px; }

/* Panneau latéral d'un cours */
.panneau-cours { --bs-offcanvas-width: 400px; --bs-offcanvas-bg: var(--papier); }
.panneau-cours .offcanvas-header { padding: 14px 22px; border-bottom: 1px solid var(--trait-2); }
.panneau-titre { margin: 0; font-family: 'Cursive Ecole', cursive; font-weight: 400; font-size: 1.45rem; line-height: 1.7; color: var(--titre); }
.panneau-cours .offcanvas-body { padding: 18px 22px 20px; }
.panneau-pied { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--trait-2); }

/* ---------- Calendrier des évaluations ---------- */
.calendrier-filtres .form-select { width: auto; min-width: 11rem; }
.calendrier-mois { margin: 0 6px; min-width: 9.5em; text-align: center; font-family: 'Cursive Ecole', cursive; font-weight: 400; font-size: 1.3rem; line-height: 1.7; color: var(--titre); }
.calendrier-entete, .calendrier-semaine { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) repeat(2, minmax(0, .6fr)); }
.calendrier-entete span { padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--trait); font-size: .78rem; font-weight: 700; color: var(--gris); }
.calendrier-case { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 122px; padding: 6px 7px 8px; border-right: 1px solid var(--trait-2); border-bottom: 1px solid var(--seyes); }
.calendrier-case:last-child { border-right: 0; }
.calendrier-semaine:last-child .calendrier-case { border-bottom: 0; }
.calendrier-case.week-end { background: var(--surface-1); }
.calendrier-case.hors-mois { background: var(--surface-2); }
.calendrier-case.hors-mois .calendrier-date { color: var(--gris-2); font-weight: 400; }
.calendrier-date { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 2px; border-radius: 50%; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.calendrier-case.aujourdhui .calendrier-date { background: var(--encre); color: #fff; }
.eval-puce { display: block; padding: 2px 7px; border-left: 3px solid; border-radius: 5px; font-size: .74rem; line-height: 1.4; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eval-puce .bi { font-size: .7rem; margin-right: 2px; }
.eval-puce .classe { font-weight: 700; }
.eval-puce:hover { filter: brightness(.96); }
.eval-interrogation { background: var(--encre-pale); color: var(--encre-texte-2); border-color: var(--encre); }
.eval-devoir { background: var(--ambre-pale); color: var(--ambre-fonce); border-color: var(--ambre-bord); }
.eval-composition { background: var(--rouge-pale); color: var(--rouge-fonce); border-color: var(--rouge); }
.eval-texte-interrogation { color: var(--encre-texte); }
.eval-texte-devoir { color: var(--ambre); }
.eval-texte-composition { color: var(--rouge); }
.eval-plus { padding-left: 4px; font-size: .74rem; color: var(--gris); }
.legende-type { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-left: 3px solid; border-radius: 5px; font-size: .72rem; }
.a-venir { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--trait-2); }
.a-venir:first-child { padding-top: 0; }
.a-venir:last-child { border-bottom: 0; padding-bottom: 0; }

/* Pages d'erreur (403, 404, 419...) : le message est écrit au tableau */
.page-erreur { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; text-align: center; }
.erreur-tableau { width: 100%; max-width: 520px; margin-bottom: 18px; }
.erreur-code { font-family: 'Cursive Ecole', cursive; font-size: 3.4rem; line-height: 1.5; margin: 0; color: var(--craie-jaune); }
.erreur-titre { font-family: 'Cursive Ecole', cursive; font-weight: 400; font-size: 1.6rem; line-height: 1.6; margin: 0; }
.erreur-message { max-width: 52ch; color: var(--gris); margin: 0 0 18px; }

/* ---------- Photo de profil ---------- */
.choix-photo { display: flex; align-items: flex-start; gap: 16px; }
.choix-photo-apercu { flex-shrink: 0; }
.choix-photo .avatar-lg { width: 92px; height: 92px; }

/* ---------- Paramètres : barème par cycle ---------- */
.table-bareme { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.table-bareme th, .table-bareme td { padding: 6px 8px 6px 0; vertical-align: top; }
.table-bareme thead th { font-size: .76rem; font-weight: 600; color: var(--gris); border-bottom: 1px solid var(--trait-2); }
.table-bareme tbody th { font-weight: 600; padding-top: 11px; width: 34%; }
.table-bareme tbody tr + tr th, .table-bareme tbody tr + tr td { border-top: 1px dashed var(--trait-2); }

/* ---------- Accès en ligne des familles ---------- */
.identifiant { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .03em; white-space: nowrap; }
td .identifiant { display: block; }
.connexion-aide { margin-top: 18px; display: grid; gap: 4px; font-size: .84rem; line-height: 1.45; background: color-mix(in srgb, var(--encre-pale) 94%, transparent); border-left: 3px solid var(--encre); border-radius: 0 8px 8px 0; padding: 9px 12px; }
.connexion-aide > div { display: flex; gap: 8px; align-items: baseline; }
.connexion-aide .bi { color: var(--encre-texte); }

.premiere-connexion { max-width: 580px; margin: 6px auto 0; }
.premiere-connexion .tableau-noir { margin-bottom: 36px; }
.premiere-connexion .tableau-date { font-size: 1.45rem; }

.acces-ligne { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; }
.acces-liste .acces-ligne + .acces-ligne { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--trait); }
.acces-icone { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface-3); color: var(--gris); font-size: 1.1rem; }
.acces-icone-ok { background: var(--encre-pale); color: var(--encre-texte); }
.acces-texte { flex: 1 1 0; min-width: 0; }
.acces-titre { font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.acces-action { flex-basis: 100%; padding-left: 50px; }

.alerte-acces .acces-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 10px 0 12px; }
.acces-ticket { background: var(--papier); border: 1.5px dashed var(--vert-bord); border-radius: 8px; padding: 8px 12px 6px; color: var(--texte); min-width: 0; }
.acces-ticket-espace { font-size: .72rem; font-weight: 700; color: var(--vert); text-transform: uppercase; letter-spacing: .05em; }
.acces-ticket-espace .bi { font-size: .78rem; margin: 0; }
.acces-ticket-nom { font-family: 'Cursive Ecole', cursive; color: var(--encre-texte); font-size: 1.02rem; line-height: 1.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acces-ticket-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .84rem; padding: 3px 0; border-top: 1px solid var(--trait-2); }
.acces-ticket-ligne span { color: var(--gris); }
.acces-ticket-ligne .identifiant { font-size: 1rem; }
.acces-ticket-code { background: var(--encre-pale); margin: 2px -12px 0; padding: 5px 12px; border-top-style: dashed; }
.acces-ticket-code span .bi { margin-right: 2px; }
.acces-ticket-code .identifiant { color: var(--encre-texte); letter-spacing: .06em; }
.acces-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.acces-resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); border-bottom: 1px solid var(--trait-2); }
.acces-bloc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 16px 18px; }
.acces-bloc + .acces-bloc { border-left: 1px solid var(--trait-2); }

/* ---------- WhatsApp ---------- */
.btn-whatsapp { --bs-btn-color: #fff; --bs-btn-bg: #1C8A4B; --bs-btn-border-color: #1C8A4B; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #15703C; --bs-btn-hover-border-color: #15703C; --bs-btn-active-bg: #125F33; --bs-btn-active-border-color: #125F33; --bs-btn-active-color: #fff; --bs-btn-focus-shadow-rgb: 28, 138, 75; }
.texte-whatsapp { color: var(--wa-texte); }

/* ---------- Barre du haut : messagerie ---------- */
.topbar-messages { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--gris); text-decoration: none; font-size: 1.15rem; }
.topbar-messages:hover { background: var(--fond); color: var(--encre-texte); }
.topbar-badge { position: absolute; top: 1px; right: -1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rouge); color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--papier); }

/* ---------- Messagerie : liste des conversations + conversation ouverte ---------- */
.messagerie { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 18px; height: calc(100vh - 215px); min-height: 520px; }
.messagerie > .feuille + .feuille { margin-top: 0; }
.messagerie-liste, .messagerie-fil { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.messagerie-recherche, .carnet-recherche { position: relative; padding: 12px; border-bottom: 1px solid var(--trait-2); }
.messagerie-recherche .bi, .carnet-recherche .bi { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: var(--gris-2); font-size: .85rem; }
.messagerie-recherche .form-control, .carnet-recherche .form-control { padding-left: 34px; }
.conversations { flex: 1; overflow-y: auto; }
.conv { display: flex; gap: 11px; padding: 11px 14px; text-decoration: none; color: var(--texte); border-bottom: 1px solid var(--trait-2); position: relative; }
.conv:hover { background: var(--surface-2); color: var(--texte); }
.conv.actif { background: var(--encre-pale); }
.conv.actif::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--encre); }
.conv-texte { flex: 1; min-width: 0; display: block; }
.conv-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.conv-nom { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-heure { font-size: .72rem; color: var(--gris-2); white-space: nowrap; }
.conv-role, .conv-sujet, .conv-extrait { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-role { font-size: .74rem; color: var(--gris-2); }
.conv-sujet { font-size: .78rem; color: var(--encre-texte); font-weight: 600; }
.conv-extrait { font-size: .82rem; color: var(--gris); }
.conv.non-lu .conv-nom, .conv.non-lu .conv-extrait { color: var(--texte); font-weight: 700; }
.conv.non-lu .conv-heure { color: var(--rouge); font-weight: 700; }
.conv-pastille { align-self: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--rouge); color: #fff; font-size: .7rem; font-weight: 700; line-height: 20px; text-align: center; }
.messagerie-envois { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--trait-2); background: var(--surface-1); text-decoration: none; font-size: .86rem; font-weight: 600; color: var(--encre-texte); }
.messagerie-envois:hover { background: var(--encre-pale); }

.fil-tete { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--trait-2); }
.fil-tete .retour-liste { display: none; }
/* La conversation s'écrit sur une page de cahier : lignes discrètes et marge rouge */
.discussion {
    flex: 1; overflow-y: auto; padding: 16px 20px 10px 22px;
    background-color: var(--discussion-fond);
    background-image:
        linear-gradient(90deg, transparent 10px, color-mix(in srgb, var(--marge) 45%, transparent) 10px, color-mix(in srgb, var(--marge) 45%, transparent) 11.5px, transparent 11.5px),
        repeating-linear-gradient(0deg, transparent 0 31px, var(--discussion-trame) 31px 32px);
    background-attachment: local;
}
.discussion-jour { text-align: center; margin: 12px 0 10px; }
.discussion-jour span { font-family: 'Cursive Ecole', cursive; font-size: .95rem; line-height: 1.8; color: var(--gris); background: var(--discussion-fond); padding: 0 12px; border-radius: 999px; box-shadow: 0 0 0 1px var(--trait-2); }
.bulle-ligne { display: flex; align-items: flex-end; gap: 8px; margin: 5px 0; }
.bulle-ligne.moi { justify-content: flex-end; }
.bulle { max-width: min(560px, 80%); padding: 7px 12px 5px; border-radius: 14px 14px 14px 4px; background: var(--bulle-fond); border: 1px solid var(--trait); box-shadow: 0 1px 1px rgba(27, 38, 34, .05); }
.moi .bulle { background: var(--encre); border-color: var(--encre); color: #fff; border-radius: 14px 14px 4px 14px; }
.bulle-ligne.vient-d-arriver .bulle { animation: bulle-arrive .4s cubic-bezier(.2, 1.25, .4, 1) backwards; }
.bulle-ligne.moi.vient-d-arriver .bulle { transform-origin: bottom right; }
@keyframes bulle-arrive { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
.bulle-texte { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .92rem; line-height: 1.45; }
.bulle-heure { font-size: .68rem; color: var(--gris-2); text-align: right; margin-top: 1px; }
.moi .bulle-heure { color: rgba(255, 255, 255, .72); }
.bulle-image img { display: block; max-width: 260px; max-height: 240px; border-radius: 9px; margin: 3px 0 4px; object-fit: cover; }
.bulle-fichier { display: inline-flex; align-items: center; gap: 6px; margin: 3px 0; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--texte) 7%, transparent); color: inherit; text-decoration: none; font-size: .86rem; }
.moi .bulle-fichier { background: rgba(255, 255, 255, .16); color: #fff; }
.lu-marque { text-align: right; font-size: .72rem; color: var(--gris-2); margin: 0 2px 6px; }
.lu-marque .bi { color: var(--encre-texte); }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--trait-2); background: var(--papier); }
.composer textarea { resize: none; min-height: 40px; max-height: 160px; line-height: 1.4; }
.composer-piece { cursor: pointer; }
.composer-info { font-size: .76rem; color: var(--gris); margin-top: 3px; }
.discussion-vide { flex: 1; display: grid; place-items: center; text-align: center; color: var(--gris); padding: 24px; background: var(--discussion-fond); }
.discussion-vide > div > .bi { font-size: 2.4rem; color: var(--icone-vide); }
.discussion-vide p { margin: 8px 0 14px; }

/* Nouveau message : carnet d'adresses */
.carnet { display: flex; flex-direction: column; max-height: calc(100vh - 220px); min-height: 420px; }
.carnet-liste { flex: 1; overflow-y: auto; }
.carnet-titre { position: sticky; top: 0; z-index: 1; padding: 8px 16px 6px; background: var(--surface-1); border-bottom: 1px solid var(--trait-2); font-size: .76rem; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
.carnet-titre span { font-weight: 400; margin-left: 4px; }
.carnet-contact { display: flex; align-items: center; gap: 11px; padding: 9px 16px; border-bottom: 1px solid var(--trait-2); cursor: pointer; }
.carnet-contact:hover { background: var(--surface-2); }
.carnet-contact:has(input:checked) { background: var(--encre-pale); }
.carnet-contact:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: -2px; }
.carnet-nom { display: block; font-weight: 600; }
.carnet-detail { display: block; font-size: .78rem; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carnet-coche { color: var(--encre-texte); font-size: 1.1rem; opacity: 0; }
.carnet-contact:has(input:checked) .carnet-coche { opacity: 1; }
.destinataire-choisi { padding: 9px 12px; margin-bottom: 14px; border-radius: var(--r-petit); background: var(--survol); border: 1px dashed var(--seyes-fort); font-size: .9rem; }
.destinataire-choisi.is-invalid { border-color: var(--rouge); background: var(--rouge-pale); }

/* Message à un groupe */
.audience-comptes { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 7px; font-size: .84rem; color: var(--gris); }
.audience-comptes strong { color: var(--texte); }
.canaux { border: 0; padding: 0; margin: 4px 0 0; }
.canal { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; border: 1px solid var(--trait); border-radius: var(--r-moyen); margin-bottom: 8px; cursor: pointer; }
.canal:has(input:checked) { border-color: var(--encre); background: var(--survol); }
.canal .form-check-input { margin-top: 10px; flex-shrink: 0; }
.canal-icone { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; background: var(--encre-pale); color: var(--encre-texte); font-size: 1rem; }
.canal-whatsapp { background: var(--wa-pale); color: var(--wa-texte); }
.apercu-whatsapp .feuille-titre .bi { color: var(--wa-texte); }
.apercu-ecran { padding: 20px 18px 26px; background-color: #EFE7DD; background-image: radial-gradient(rgba(120, 100, 70, .07) 1px, transparent 1.3px); background-size: 12px 12px; border-radius: 0 0 var(--r-moyen) var(--r-moyen); }
.apercu-bulle { position: relative; max-width: 92%; background: #fff; border-radius: 0 10px 10px 10px; padding: 9px 12px 8px; color: #111B21; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.apercu-bulle [data-apercu-contenu] { white-space: pre-wrap; }
.apercu-bulle strong { display: block; margin-bottom: 6px; }
.apercu-signature { display: block; margin-top: 8px; color: #667781; }
.aide-encadre { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-moyen); background: var(--aide-fond); border: 1px solid var(--aide-bord); font-size: .86rem; color: var(--aide-texte); }
.aide-encadre ul { padding-left: 1.1rem; }
.aide-encadre li + li { margin-top: 4px; }

/* Suivi d'un envoi groupé */
.message-diffuse { white-space: pre-wrap; font-size: .95rem; line-height: 1.55; padding: 4px 0 4px 14px; border-left: 3px solid var(--marge); }
.jauge-whatsapp span { background: var(--wa); }
.whatsapp-liste { list-style: none; margin: 0; padding: 0; max-height: 470px; overflow-y: auto; border-top: 1px solid var(--trait-2); }
.whatsapp-liste li { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--trait-2); }
.whatsapp-nom { display: block; font-weight: 600; font-size: .9rem; }
.whatsapp-detail { display: block; font-size: .76rem; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whatsapp-fait { display: none; color: var(--wa-texte); font-size: 1.15rem; }
.whatsapp-liste li.fait { background: var(--wa-fait); }
.whatsapp-liste li.fait .whatsapp-fait { display: inline; }
.whatsapp-liste li.fait .btn-whatsapp { --bs-btn-bg: var(--papier); --bs-btn-color: var(--wa-texte); --bs-btn-border-color: var(--wa-bord); }

/* ---------- Page d'accueil : le menu principal en tuiles ---------- */
.btn-menu-libelle { display: none; }
.topbar-deconnexion { display: none; }
.page-accueil .topbar-deconnexion { display: block; }

.accueil { max-width: 1240px; margin: 0 auto; }
.accueil-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.accueil-entete .page-title { margin-bottom: 0; }
.accueil-avatar { width: 60px; height: 60px; font-size: 1.15rem; box-shadow: 0 0 0 3px var(--papier), 0 0 0 4px var(--trait); }
.accueil-date { display: grid; text-align: right; font-size: .86rem; color: var(--gris); }
.accueil-date span:first-child { font-weight: 700; color: var(--texte); }

.accueil-alertes { display: grid; gap: 8px; margin-bottom: 14px; }
.accueil-alerte {
    display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px;
    background: var(--rouge-pale); border: 1px solid var(--rouge-bord); color: var(--rouge-fonce);
    font-weight: 600; font-size: .9rem; text-decoration: none;
    animation: alerte-arrive .4s cubic-bezier(.2, .9, .3, 1.15) backwards; animation-delay: calc(var(--i, 0) * 80ms);
}
.accueil-alerte > .bi { color: var(--rouge); font-size: 1.05rem; }
.accueil-alerte:hover { color: var(--rouge-fonce); background: color-mix(in srgb, var(--rouge-pale) 80%, var(--rouge-bord)); }
.accueil-alerte-attente { background: var(--ambre-pale); border-color: color-mix(in srgb, var(--ambre-bord) 45%, transparent); color: var(--ambre-fonce); }
.accueil-alerte-attente > .bi { color: var(--ambre); }
.accueil-alerte-attente:hover { color: var(--ambre-fonce); background: color-mix(in srgb, var(--ambre-pale) 75%, var(--ambre-bord)); }
.accueil-alerte-info { background: var(--encre-pale); border-color: var(--encre-bord-pale); color: var(--encre-fonce); }
.accueil-alerte-info > .bi { color: var(--encre-texte); }
.accueil-alerte-info:hover { color: var(--encre-fonce); background: color-mix(in srgb, var(--encre-pale) 80%, var(--encre-bord-pale)); }
.accueil-alerte-voir { margin-left: auto; white-space: nowrap; font-size: .84rem; text-decoration: underline; text-underline-offset: 3px; }
.accueil-alerte-voir .bi, .accueil-bandeau .bi-arrow-right { display: inline-block; transition: transform .2s ease; }
.accueil-alerte:hover .accueil-alerte-voir .bi, .accueil-bandeau:hover .bi-arrow-right { transform: translateX(4px); }

.accueil-bandeau {
    position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
    padding: 15px 20px; margin-bottom: 22px; border-radius: 14px; background: var(--encre); color: #fff; text-decoration: none;
    box-shadow: 0 12px 26px -18px color-mix(in srgb, var(--encre) 90%, #000);
}
.accueil-bandeau:hover { color: #fff; background: var(--encre-2); }
/* Un reflet passe de temps en temps sur le bandeau */
.accueil-bandeau::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .16) 48%, transparent 62%); transform: translateX(-100%); animation: reflet 4.5s ease-in-out 1.2s infinite; }
@keyframes reflet { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.accueil-bandeau-titre { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.04rem; }
.accueil-bandeau-texte { font-size: .87rem; opacity: .92; }

.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tuile {
    --c: #3460C8;
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 176px; padding: 22px 14px 18px; border-radius: 16px; text-align: center; text-decoration: none;
    background: var(--papier); border: 1px solid var(--trait); color: var(--texte); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    animation: tuile-arrive .5s cubic-bezier(.2, .9, .3, 1.1) backwards; animation-delay: calc(min(var(--i, 0), 14) * 28ms);
}
@keyframes tuile-arrive { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.tuile:hover { color: var(--texte); transform: translateY(-5px); border-color: color-mix(in srgb, var(--c) 45%, var(--trait)); box-shadow: 0 18px 32px -22px color-mix(in srgb, var(--c) 75%, #000); }
.tuile:active { transform: translateY(-1px) scale(.98); }
.tuile:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tuile-illu {
    position: relative; display: grid; place-items: center; width: 134px; height: 74px; margin-bottom: 11px; overflow: hidden;
    border-radius: 18px; background: color-mix(in srgb, var(--c) 13%, var(--papier));
    transition: transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.tuile-illu::before { content: ''; position: absolute; width: 66px; height: 66px; border-radius: 50%; right: -20px; top: -28px; background: color-mix(in srgb, var(--c) 17%, transparent); }
.tuile-illu::after { content: ''; position: absolute; left: 14px; bottom: 12px; width: 28px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--c) 32%, transparent); box-shadow: 0 -10px 0 -1px color-mix(in srgb, var(--c) 18%, transparent); }
.tuile-illu .bi { position: relative; z-index: 1; font-size: 2.1rem; color: var(--c); }
.tuile:hover .tuile-illu { transform: scale(1.07) rotate(-2deg); }
.tuile-photo { position: relative; z-index: 1; width: 58px; height: 58px; font-size: 1.15rem; box-shadow: 0 0 0 3px var(--papier); }
.tuile-titre { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.tuile-sous { font-size: .8rem; color: var(--gris); line-height: 1.35; }
.tuile-badge { position: absolute; top: 12px; right: 12px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--rouge); color: #fff; font-size: .76rem; font-weight: 700; line-height: 24px; animation: badge-pouls 2.2s ease-in-out infinite; }
@keyframes badge-pouls { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rouge) 55%, transparent); } 60% { box-shadow: 0 0 0 7px transparent; } }
/* Tuile cliquée : elle reste soulevée avec un liseré de sa couleur, l'icône s'efface derrière les barres de chargement */
.tuile-illu .bi, .tuile-photo { transition: opacity .25s ease, transform .25s ease; }
.tuile.en-cours { transform: translateY(-5px); border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent), 0 18px 32px -22px color-mix(in srgb, var(--c) 75%, #000); }
.tuile.en-cours .tuile-illu { transform: scale(1.04); }
.tuile.en-cours .tuile-illu .bi, .tuile.en-cours .tuile-photo { opacity: .16; transform: scale(.76); }
.tuile-illu > .barres-chargement { --b: 9px; --barres-1: var(--c); --barres-2: color-mix(in srgb, var(--c) 50%, var(--papier));
    position: absolute; inset: 0; z-index: 2; margin: auto; justify-content: center; }
/* Couleur de chaque module */
.tuile-bleu { --c: #3460C8; }
.tuile-vert { --c: #2F8A57; }
.tuile-ambre { --c: #C98A12; }
.tuile-rouge { --c: #D2453F; }
.tuile-violet { --c: #7B5BC8; }
.tuile-sarcelle { --c: #138A8A; }
.tuile-rose { --c: #C2477E; }
.tuile-terre { --c: #A0602A; }
.tuile-ardoise { --c: #4F6B78; }
.tuile-whatsapp { --c: #1C8A4B; }
.tuile-craie { --c: #B8901F; }
[data-theme="nuit"] .tuile-illu .bi { color: color-mix(in srgb, var(--c) 72%, #fff); }
[data-theme="nuit"] .tuile-illu { background: color-mix(in srgb, var(--c) 20%, var(--papier)); }
[data-theme="nuit"] .tuile-illu > .barres-chargement { --barres-1: color-mix(in srgb, var(--c) 72%, #fff); --barres-2: color-mix(in srgb, var(--c) 42%, #fff); }
@media (max-width: 1199.98px) { .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .tuile { min-height: 152px; padding: 16px 10px 14px; border-radius: 14px; }
    .tuile-illu { width: 104px; height: 60px; border-radius: 15px; margin-bottom: 8px; }
    .tuile-illu .bi { font-size: 1.7rem; }
    .tuile-titre { font-size: .93rem; }
    .accueil-date { text-align: left; }
    .accueil-avatar { width: 48px; height: 48px; }
    .page-accueil .btn-menu-libelle, .page-accueil .topbar-deconnexion { display: none; }
}

/* ---------- Choix du thème ---------- */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.theme-choix {
    display: flex; flex-direction: column; gap: 10px; padding: 10px; cursor: pointer;
    border: 2px solid var(--trait); border-radius: var(--r-grand); background: var(--papier); color: var(--texte);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.theme-choix:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -18px rgba(0, 0, 0, .55); }
.theme-choix:has(input:checked) { border-color: var(--encre); box-shadow: 0 0 0 4px var(--focus-doux); }
.theme-choix:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.theme-apercu { display: flex; height: 116px; border-radius: 9px; overflow: hidden; border: 1px solid var(--trait); background: var(--fond); }
.ta-menu { width: 28%; padding: 12px 8px; display: flex; flex-direction: column; gap: 7px; background-color: var(--tableau);
    background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.3px); background-size: 6px 6px; }
.ta-menu i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--craie) 32%, transparent); }
.ta-menu i.ta-actif { background: var(--craie-jaune); }
.ta-page { flex: 1; min-width: 0; padding: 11px; display: flex; flex-direction: column; gap: 8px; }
.ta-titre { width: 58%; height: 9px; border-radius: 5px; background: var(--titre); }
.ta-carte { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 9px; border-radius: 7px; background: var(--papier); border: 1px solid var(--trait); }
.ta-ligne { height: 5px; border-radius: 3px; background: var(--seyes-fort); }
.ta-courte { width: 62%; }
.ta-bas { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.ta-pastille { width: 28px; height: 9px; border-radius: 5px; background: var(--vert-pale); box-shadow: inset 0 0 0 1px var(--vert-bord); }
.ta-bouton { width: 40px; height: 13px; border-radius: 4px; background: var(--encre); }
.theme-texte { padding: 0 4px 2px; }
.theme-nom { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.theme-nom .bi { color: var(--encre-texte); opacity: 0; transform: scale(.4); transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.theme-choix:has(input:checked) .theme-nom .bi { opacity: 1; transform: none; }
.theme-desc { display: block; font-size: .8rem; color: var(--gris); line-height: 1.4; }
/* Pastilles du menu de l'utilisateur */
.themes-rapides { display: flex; gap: 6px; }
.theme-pastille { width: 34px; height: 34px; padding: 3px; border-radius: 50%; border: 2px solid transparent; background: none; color: inherit; }
.theme-pastille span { display: block; width: 100%; height: 100%; border-radius: 50%;
    background: linear-gradient(135deg, var(--tableau) 0 52%, var(--encre) 52% 100%);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--craie-jaune) 85%, transparent); transition: transform .15s ease; }
.theme-pastille:hover span { transform: scale(1.08); }
.theme-pastille.actif { border-color: currentColor; }
/* Passage d'un thème à l'autre en douceur */
html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after {
    transition: background-color .4s ease, border-color .4s ease, color .4s ease, fill .4s ease !important;
}

/* ---------- Animations : chargement et validation ---------- */
/* Barre de progression en haut de l'écran pendant le chargement d'une page */
.barre-chargement {
    position: fixed; z-index: 2000; top: 0; left: 0; height: 4px; width: 0; opacity: 0; pointer-events: none;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, var(--craie-jaune), var(--encre) 55%, var(--craie-jaune)); background-size: 200% 100%;
    box-shadow: 0 0 10px color-mix(in srgb, var(--encre) 60%, transparent);
}
.barre-chargement::after { content: ''; position: absolute; right: 0; top: 0; width: 90px; height: 100%; border-radius: inherit;
    box-shadow: 0 0 12px var(--craie-jaune), 0 0 5px var(--craie-jaune); transform: rotate(2.5deg) translateY(-3px); opacity: .9; }
.barre-chargement.active { opacity: 1; animation: barre-avance 9s cubic-bezier(.08, .7, .2, 1) forwards, barre-reflet 1.1s linear infinite; }
@keyframes barre-avance { 0% { width: 0; } 12% { width: 34%; } 40% { width: 66%; } 100% { width: 94%; } }
@keyframes barre-reflet { to { background-position: -200% 0; } }

/* Bouton cliqué : des petites barres montent à la place de l'icône, le bouton ne peut plus être cliqué deux fois */
.btn.en-cours, .nav-lien.en-cours, .tuile.en-cours { pointer-events: none; }
.btn.en-cours { position: relative; overflow: hidden; cursor: progress; }
.btn.en-cours > .bi { display: none; }
.btn.en-cours::after { content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
    background: linear-gradient(105deg, transparent 25%, color-mix(in srgb, currentColor 22%, transparent) 50%, transparent 75%);
    animation: bouton-reflet 1.1s ease-in-out infinite; }
@keyframes bouton-reflet { to { transform: translateX(100%); } }
.btn > .barres-chargement { margin-right: .5em; }
.nav-lien > .barres-chargement { margin-left: auto; color: var(--craie-jaune); }

/* Barres de chargement : cinq barres qui montent et descendent en vague (les mêmes dans l'application mobile).
   --b = largeur d'une barre ; tout le reste en découle. */
.barres-chargement { --b: 14px; display: inline-flex; align-items: flex-end; gap: calc(var(--b) * .57); height: calc(var(--b) * 5);
    flex-shrink: 0; vertical-align: middle; }
.barres-chargement i { display: block; width: var(--b); height: var(--b); background: var(--barres-1);
    border-radius: calc(var(--b) * .29) calc(var(--b) * .29) calc(var(--b) * .14) calc(var(--b) * .14);
    animation: barres-vague 1.4s ease-in-out infinite; }
.barres-chargement i:nth-child(2) { animation-delay: .12s; background: var(--barres-2); }
.barres-chargement i:nth-child(3) { animation-delay: .24s; }
.barres-chargement i:nth-child(4) { animation-delay: .36s; background: var(--barres-3); }
.barres-chargement i:nth-child(5) { animation-delay: .48s; background: var(--barres-2); }
@keyframes barres-vague { 0%, 100% { height: var(--b); } 50% { height: calc(var(--b) * 4.7); } }
/* Petites barres : boutons, menu, textes « en cours » */
.barres-chargement.mini { --b: 3px; }
/* Unies : de la couleur du texte, pour aller sur les boutons de toutes les couleurs */
.barres-chargement.unie i { background: currentColor; }
.barres-chargement.unie i:nth-child(2), .barres-chargement.unie i:nth-child(5) { opacity: .62; }
.barres-chargement.unie i:nth-child(4) { opacity: .82; }

/* Voile de chargement : à chaque changement de page, les barres au centre de l'écran avec ce qui se passe.
   Il reste au moins 600 ms (même si la page est rapide), puis s'efface en fondu sur la nouvelle page. */
.chargement-page {
    position: fixed; inset: 0; z-index: 1990; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px;
    background: color-mix(in srgb, var(--fond) 86%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    color: var(--gris); font-weight: 700; font-size: 1.05rem; text-align: center;
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s;
}
.chargement-page.visible { opacity: 1; visibility: visible; transition: opacity .15s ease; }
.chargement-page.immediat { transition: none; }
.chargement-page p { margin: 0; max-width: 30ch; }

/* Un bouton s'enfonce légèrement sous le doigt */
/* Grands boutons : un peu moins hauts de police pour tenir sur une ligne dans les colonnes étroites */
.btn-lg { --bs-btn-font-size: 1.125rem; --bs-btn-padding-y: .6rem; }
.btn { text-wrap: balance; transition: transform .08s ease, box-shadow .18s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:active:not(:disabled):not(.en-cours) { transform: translateY(1px) scale(.97); }
.btn-primary:hover, .btn-danger:hover, .btn-whatsapp:hover, .btn-craie:hover { box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--bs-btn-hover-bg) 85%, transparent); }

/* La page arrive en douceur (« backwards » : une fois arrivée, la page redevient normale,
   sinon les fenêtres modales et les panneaux qu'elle contient resteraient sous leur voile) */
.app-content { animation: page-arrive .3s ease-out backwards; }
@keyframes page-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Messages : arrivée, coche qui saute, erreur qui secoue */
.alerte { animation: alerte-arrive .4s cubic-bezier(.2, .9, .3, 1.15) backwards; }
@keyframes alerte-arrive { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
.alerte-succes > .bi { animation: coche-saute .6s cubic-bezier(.3, 1.6, .5, 1) .2s backwards; }
@keyframes coche-saute { 0% { opacity: 0; transform: scale(0) rotate(-35deg); } 70% { opacity: 1; transform: scale(1.35) rotate(8deg); } 100% { transform: none; } }
.alerte-erreur { animation: alerte-arrive .3s ease backwards, secousse .5s ease .3s; }
.form-control.is-invalid, .form-select.is-invalid, .destinataire-choisi.is-invalid { animation: secousse .45s ease; }
@keyframes secousse { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }

/* Confirmation flottante : un cercle de craie se dessine, puis la coche */
.toast-ecole {
    position: fixed; z-index: 2100; right: 22px; bottom: 22px; overflow: hidden;
    display: flex; align-items: center; gap: 12px; max-width: min(380px, calc(100vw - 32px)); padding: 12px 18px 14px 12px;
    border-radius: 14px; background: var(--tableau); color: var(--craie);
    border: 1px solid color-mix(in srgb, var(--craie) 14%, transparent); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6);
    animation: toast-entre .5s cubic-bezier(.2, 1.3, .4, 1) both;
}
.toast-ecole.sort { animation: toast-sort .35s ease forwards; }
.toast-ecole .coche { width: 36px; height: 36px; flex-shrink: 0; }
.toast-ecole .coche circle { fill: none; stroke: var(--craie-jaune); stroke-width: 2.5; stroke-dasharray: 101; stroke-dashoffset: 101; animation: trace .55s ease-out .1s forwards; }
.toast-ecole .coche path { fill: none; stroke: var(--craie); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: trace .35s ease-out .55s forwards; }
.toast-ecole strong { display: block; font-family: 'Cursive Ecole', cursive; font-weight: 400; font-size: 1.05rem; line-height: 1.6; }
.toast-ecole span { display: block; font-size: .84rem; color: var(--craie-2); }
.toast-ecole::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--craie-jaune); transform-origin: left; animation: toast-temps 3.4s linear .3s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes toast-entre { from { opacity: 0; transform: translateY(22px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes toast-sort { to { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes toast-temps { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- Sécurité des données ---------- */
/* Paiement annulé : barré, avec le motif */
.registre tr.ligne-annulee td { color: var(--gris); }
.registre tr.ligne-annulee .montant, .registre tr.ligne-annulee .personne-nom { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--rouge) 70%, transparent); }
.registre tr.ligne-annulee .personne-nom { color: var(--gris); }
.registre tr.ligne-annulee td { border-bottom: 0; }
.registre tr.ligne-annulee-motif td { padding-top: 0; padding-bottom: 12px; font-size: .82rem; color: var(--rouge-fonce); }
.registre tr.ligne-annulee-motif .bi { color: var(--rouge); margin-right: 4px; }
.motifs-rapides { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.motifs-rapides .btn { border-radius: 999px; font-size: .8rem; }
.modal .aide-encadre { display: flex; gap: 10px; margin-top: 0; }
.modal .aide-encadre > .bi { font-size: 1.1rem; line-height: 1.3; }

/* Trimestre clôturé : notes verrouillées */
.bandeau-verrou, .cloture { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-moyen);
    background: var(--surface-2); border: 1px solid var(--trait); color: var(--texte); font-size: .9rem; }
.bandeau-verrou > .bi, .cloture > .bi { font-size: 1.25rem; color: var(--gris); flex-shrink: 0; }
.bandeau-verrou { background: var(--ambre-pale); border-color: color-mix(in srgb, var(--ambre-bord) 45%, transparent); color: var(--ambre-fonce); }
.bandeau-verrou > .bi { color: var(--ambre); }
.bandeau-verrou a { color: inherit; font-weight: 700; }
.feuille .cloture { margin: 0; border-radius: 0; border-width: 0 0 1px; flex-wrap: wrap; }
.cloture > div { flex: 1 1 320px; min-width: 0; }
.cloture > form, .cloture > .btn { margin-left: auto; flex-shrink: 0; }
.cloture-fermee { background: var(--ambre-pale); color: var(--ambre-fonce); }
.cloture-fermee > .bi { color: var(--ambre); }
fieldset:disabled .saisie-note, fieldset:disabled .form-control { background: var(--champ-desactive); }
fieldset:disabled .form-control::placeholder { color: transparent; } /* notes verrouillées : pas d’invitation à écrire */

/* Journal des opérations */
.journal-categories { display: flex; flex-wrap: wrap; gap: 8px; }
.journal-categorie { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--trait);
    background: var(--papier); color: var(--texte); font-size: .86rem; font-weight: 600; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; }
.journal-categorie:hover { color: var(--texte); border-color: var(--encre-bord-pale); background: var(--surface-1); }
.journal-categorie.actif { background: var(--encre); border-color: var(--encre); color: #fff; }
.journal-compteur { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-3); color: var(--gris); font-size: .72rem; text-align: center; line-height: 18px; }
.journal-categorie.actif .journal-compteur { background: rgba(255, 255, 255, .22); color: #fff; }
.journal { padding: 6px 0 4px; }
.journal-jour { margin: 0; padding: 14px 18px 6px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
.journal-ligne { display: grid; grid-template-columns: 52px 34px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 18px; border-top: 1px solid var(--trait-2); }
.journal-jour + .journal-ligne { border-top: 0; }
.journal-heure { padding-top: 6px; font-size: .84rem; font-weight: 700; color: var(--gris); }
.journal-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.journal-auteur { font-weight: 700; font-size: .88rem; }
.journal-description { margin-top: 2px; font-size: .9rem; overflow-wrap: anywhere; }
.journal-poste { padding-top: 6px; font-variant-numeric: tabular-nums; }
.journal-discret { padding-top: 6px; padding-bottom: 6px; }
.journal-discret .journal-description { display: none; }
.journal-discret .journal-auteur { font-weight: 600; color: var(--gris); }
.journal-discret .journal-heure, .journal-discret .journal-poste { padding-top: 3px; }
.journal-discret .avatar { transform: scale(.85); }
.journal-pastille { font-size: .7rem; }
/* D'où vient l'opération (version 1.6) : site web ou application mobile ; connexion ou déconnexion */
.journal-source { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--trait); border-radius: 999px;
    font-size: .7rem; font-weight: 600; line-height: 1.7; color: var(--gris); white-space: nowrap; }
.journal-source-application { border-color: color-mix(in srgb, var(--vert) 45%, var(--trait)); color: var(--vert); }
.journal-evenement { font-size: .74rem; font-weight: 700; color: var(--texte); }
.journal-appareil { max-width: 230px; color: var(--texte-doux, var(--gris)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journal-poste { text-align: right; }
.journal-vert { background: var(--vert-pale); color: var(--vert); }
.journal-ambre { background: var(--ambre-pale); color: var(--ambre-fonce); }
.journal-bleu { background: var(--encre-pale); color: var(--encre-texte); }
.journal-violet { background: color-mix(in srgb, #7B5BC8 14%, var(--papier)); color: color-mix(in srgb, #7B5BC8 85%, var(--texte)); }
.journal-sarcelle { background: color-mix(in srgb, #138A8A 14%, var(--papier)); color: color-mix(in srgb, #138A8A 85%, var(--texte)); }
.journal-gris { background: var(--surface-3); color: var(--gris); }
.journal-details { margin-top: 5px; font-size: .84rem; }
.journal-details summary { cursor: pointer; color: var(--encre-texte); font-weight: 600; width: max-content; }

/* Accès du personnel (version 1.6) : pages ouvertes à chaque compte du secrétariat et de la comptabilité */
.perso-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.perso-nombre { font-weight: 700; font-size: .95rem; }
.perso-groupes { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; }
.perso-groupe-vide { opacity: .55; text-decoration: line-through; }
.perso-carte { margin: 0; min-width: 0; }
.perso-carte legend { float: none; width: auto; font-size: 1rem; }
.perso-liste { display: grid; gap: 10px; }
.perso-page .form-check-label { display: block; font-weight: 600; cursor: pointer; }
.perso-explication { display: block; font-weight: 400; font-size: .84rem; color: var(--texte-doux); }
.perso-du-role { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--encre-pale); color: var(--encre-texte);
    font-size: .68rem; font-weight: 700; line-height: 1.6; vertical-align: 1px; }
.journal-detail { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin: 6px 0 0; padding: 9px 12px;
    border-radius: var(--r-petit); background: var(--surface-1); border: 1px solid var(--trait-2); }
.journal-detail dt { font-weight: 600; color: var(--gris); }
.journal-detail dd { margin: 0; overflow-wrap: anywhere; }
.journal-detail .avant { color: var(--gris); text-decoration: line-through; }

/* Sauvegardes */
.etat-sauvegarde, .etat-bilan { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: var(--r-grand);
    border: 1px solid var(--trait); background: var(--papier); }
.etat-sauvegarde-icone { display: grid; place-items: center; width: 54px; height: 54px; flex-shrink: 0; border-radius: 16px; font-size: 1.7rem; }
.etat-ok .etat-sauvegarde-icone { background: var(--vert-pale); color: var(--vert); }
.etat-attente .etat-sauvegarde-icone { background: var(--ambre-pale); color: var(--ambre); }
.etat-alerte .etat-sauvegarde-icone { background: var(--rouge-pale); color: var(--rouge); }
.etat-sauvegarde.etat-alerte { border-color: var(--rouge-bord); }
.etat-sauvegarde-titre, .etat-bilan-titre { font-weight: 700; font-size: 1.08rem; color: var(--titre); }
.etat-sauvegarde-texte, .etat-bilan-texte { color: var(--gris); font-size: .9rem; }
.etat-sauvegarde-copie { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--trait); font-size: .86rem; }
.etat-ok .etat-sauvegarde-copie .bi { color: var(--vert); }
.etat-attente .etat-sauvegarde-copie .bi, .etat-alerte .etat-sauvegarde-copie .bi { color: var(--ambre); }
.feuille-danger { border-color: var(--rouge-bord); }
.feuille-danger .feuille-tete { background: var(--rouge-pale); color: var(--rouge-fonce); border-bottom-color: var(--rouge-bord); border-radius: var(--r-moyen) var(--r-moyen) 0 0; }

/* État du système */
.etat-bilan > .bi { font-size: 1.9rem; line-height: 1; }
.etat-bilan.etat-ok { background: var(--vert-pale); border-color: var(--vert-bord); }
.etat-bilan.etat-ok > .bi { color: var(--vert); }
.etat-bilan.etat-attente { background: var(--ambre-pale); border-color: color-mix(in srgb, var(--ambre-bord) 45%, transparent); }
.etat-bilan.etat-attente > .bi { color: var(--ambre); }
.etat-bilan.etat-alerte { background: var(--rouge-pale); border-color: var(--rouge-bord); }
.etat-bilan.etat-alerte > .bi { color: var(--rouge); }
.etat-liste { list-style: none; margin: 0; padding: 4px 0; }
.etat-point { display: flex; gap: 12px; padding: 11px 18px; }
.etat-point + .etat-point { border-top: 1px solid var(--trait-2); }
.etat-point > .bi { font-size: 1.1rem; line-height: 1.35; flex-shrink: 0; }
.etat-point.etat-ok > .bi { color: var(--vert); }
.etat-point.etat-attente > .bi { color: var(--ambre); }
.etat-point.etat-alerte > .bi { color: var(--rouge); }
.etat-point.etat-info > .bi { color: var(--encre-texte); }
.etat-point-titre { font-weight: 700; font-size: .92rem; }
.etat-point-texte { font-size: .88rem; color: var(--gris); overflow-wrap: anywhere; }
.etat-point-solution { margin-top: 5px; padding: 6px 10px; border-radius: var(--r-petit); background: var(--surface-1); border: 1px solid var(--trait-2);
    font-size: .82rem; color: var(--texte); overflow-wrap: anywhere; }
.etat-point-solution .bi { color: var(--gris); }

/* ---------- Réductions et délais de paiement ---------- */
.pastille-reduction { background: color-mix(in srgb, #7B5BC8 13%, var(--papier)); color: color-mix(in srgb, #7B5BC8 88%, var(--texte)); margin-left: 4px; }
.montant-reduction { color: color-mix(in srgb, #7B5BC8 88%, var(--texte)); }
.montant-avant { display: block; font-size: .76rem; font-weight: 400; color: var(--gris); text-decoration: line-through; }
.montant-note { display: block; font-size: .74rem; font-weight: 400; color: var(--gris); }
.registre tfoot tr.situation-detail td { font-weight: 500; color: var(--gris); border-top: 0; padding-top: 6px; padding-bottom: 6px; }
.registre tfoot tr.situation-detail:first-child td { border-top: 1px solid var(--trait); }
.amenagements { list-style: none; margin: 0; padding: 4px 0; }
.amenagements li { display: flex; align-items: center; gap: 12px; padding: 11px 18px; }
.amenagements li + li { border-top: 1px solid var(--trait-2); }
.amenagement-icone { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; font-size: 1rem;
    background: color-mix(in srgb, #7B5BC8 13%, var(--papier)); color: color-mix(in srgb, #7B5BC8 88%, var(--texte)); }
.amenagement-icone.delai { background: var(--encre-pale); color: var(--encre-texte); }
.amenagement-texte { flex: 1 1 auto; min-width: 0; }
.amenagements .montant { font-weight: 700; }
.choix-segment { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.choix-segment .btn { border-radius: 999px; padding: 5px 14px; font-weight: 600; }
fieldset > legend.form-label { float: none; width: auto; font-size: inherit; margin-bottom: .5rem; }
.apercu-calcul { padding: 9px 12px; border-radius: var(--r-petit); background: var(--surface-1); border: 1px dashed var(--trait); font-size: .88rem; }
.apercu-calcul strong { color: color-mix(in srgb, #7B5BC8 88%, var(--texte)); }

/* ---------- SMS ---------- */
.alerte-attente { background: var(--ambre-pale); border-color: color-mix(in srgb, var(--ambre-bord) 45%, transparent); color: var(--ambre-fonce); }
.alerte-attente a, .alerte-info a { color: inherit; font-weight: 700; }
.file-sms .progress { height: 10px; border-radius: 999px; background: var(--jauge-fond); }
.file-sms .progress-bar { background: var(--encre); border-radius: 999px; transition: width .45s ease; }
.liste-sms .sms-type { margin-bottom: 4px; }
.sms-texte { max-width: 620px; font-size: .88rem; color: var(--texte-doux); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sms-erreur { display: block; max-width: 260px; margin: 4px 0 0 auto; font-size: .78rem; line-height: 1.35; color: var(--rouge-fonce); text-align: right; white-space: normal; }
.sms-destinataire { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 14px; border-radius: var(--r-moyen);
    background: var(--surface-1); border: 1px solid var(--trait-2); }
.sms-destinataire-icone { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--encre-pale); color: var(--encre-texte); }
.compteur-sms { font-weight: 600; font-variant-numeric: tabular-nums; }
.compteur-sms.compteur-long { color: var(--ambre); }
.choix-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.choix-carte { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 14px 12px; border: 1.5px solid var(--trait);
    border-radius: var(--r-moyen); background: var(--papier); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.choix-carte:hover { border-color: var(--encre-bord); }
.choix-carte input { position: absolute; opacity: 0; pointer-events: none; }
.choix-carte:has(input:checked) { border-color: var(--encre); background: var(--encre-pale); box-shadow: 0 0 0 3px var(--focus-doux); }
.choix-carte:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choix-carte-icone { font-size: 1.3rem; line-height: 1; color: var(--encre-texte); margin-bottom: 4px; }
.choix-carte-titre { font-weight: 700; }
.choix-carte-texte { font-size: .82rem; line-height: 1.4; color: var(--gris); }
.etapes-aide { margin: 0 0 14px; padding-left: 1.2rem; font-size: .88rem; color: var(--texte-doux); }
.etapes-aide li + li { margin-top: 3px; }
.modele-sms + .modele-sms { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--trait); }
.font-monospace-champ textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem; }
.canal-sms { background: color-mix(in srgb, #138A8A 14%, var(--papier)); color: color-mix(in srgb, #138A8A 88%, var(--texte)); }
.registre .case-selection { width: 42px; padding-right: 0; }
.registre .case-selection .form-check-input { margin: 0; width: 1.15em; height: 1.15em; cursor: pointer; }
.registre .case-selection .form-check-input:disabled { cursor: not-allowed; }
.registre tbody tr:has(.case-selection input:checked) > td { background: var(--encre-pale); }
.bloc-sms { margin: 2px 0 10px 46px; }
.aide-encadre:has(> .bi) { display: flex; gap: 10px; }
.aide-encadre > .bi { font-size: 1.1rem; line-height: 1.3; }

/* ---------- Paiement en ligne (Orange Money, MTN Mobile Money) ---------- */
:root { --om: #FF7900; --om-texte: #B34D00; --momo: #FFCB05; --momo-texte: #7A5C00; }
.btn-success { --bs-btn-color: #fff; --bs-btn-bg: var(--vert); --bs-btn-border-color: var(--vert); --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--vert) 84%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--vert) 84%, #000);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--vert) 76%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--vert) 76%, #000); }
[data-theme="nuit"] { --om-texte: #FFAA66; --momo-texte: #FFD95A; }
.text-ambre { color: var(--ambre) !important; }
.enfants-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.enfant-choix { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; border: 1.5px solid var(--trait);
    background: var(--papier); color: var(--texte); font-weight: 600; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.enfant-choix:hover { border-color: var(--encre-bord); color: var(--texte); }
.enfant-choix.actif { border-color: var(--encre); background: var(--encre-pale); color: var(--encre-texte); }
.etape-numero { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 6px; border-radius: 50%;
    background: var(--encre); color: #fff; font-size: .85rem; font-weight: 700; vertical-align: 1px; }
.frais-choix { display: grid; gap: 10px; }
.frais-carte { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 46px; border: 1.5px solid var(--trait);
    border-radius: var(--r-moyen); background: var(--papier); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.frais-carte:hover { border-color: var(--encre-bord); }
.frais-carte input { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin: -9px 0 0; accent-color: var(--encre); }
.frais-carte:has(input:checked) { border-color: var(--encre); background: var(--encre-pale); box-shadow: 0 0 0 3px var(--focus-doux); }
.frais-carte-texte { flex: 1 1 auto; min-width: 0; }
.frais-carte-titre { display: block; font-weight: 700; }
.frais-carte-sous { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .82rem; color: var(--gris); }
.frais-carte-sous .pastille { margin-left: 0; }
.frais-carte-montant { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.frais-carte-montant small { display: block; font-size: .74rem; font-weight: 500; color: var(--gris); }
.champ-montant .form-control { font-weight: 700; font-variant-numeric: tabular-nums; }
.operateurs-choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.operateur-carte { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--trait); border-radius: var(--r-moyen);
    background: var(--papier); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.operateur-carte:hover { transform: translateY(-1px); }
.operateur-carte input { position: absolute; opacity: 0; pointer-events: none; }
.operateur-carte:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.operateur-logo { display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; font-weight: 800; font-size: .86rem; letter-spacing: -.02em; }
.operateur-orange .operateur-logo { background: var(--om); color: #fff; }
.operateur-mtn .operateur-logo { background: var(--momo); color: #1A1A1A; }
.operateur-nom { display: block; font-weight: 700; }
.operateur-texte { display: block; font-size: .8rem; line-height: 1.35; color: var(--gris); }
.operateur-coche { position: absolute; top: 8px; right: 9px; font-size: 1.05rem; opacity: 0; transform: scale(.4); transition: opacity .15s ease, transform .2s cubic-bezier(.2, 1.4, .4, 1); }
.operateur-carte:has(input:checked) .operateur-coche { opacity: 1; transform: none; }
.operateur-orange:has(input:checked) { border-color: var(--om); background: color-mix(in srgb, var(--om) 8%, var(--papier)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--om) 18%, transparent); }
.operateur-orange .operateur-coche { color: var(--om); }
.operateur-mtn:has(input:checked) { border-color: #E0B000; background: color-mix(in srgb, var(--momo) 12%, var(--papier)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--momo) 30%, transparent); }
.operateur-mtn .operateur-coche { color: #C99A00; }
.operateur-pastille { display: inline-grid; place-items: center; min-width: 36px; height: 22px; padding: 0 6px; border-radius: 7px; font-size: .7rem; font-weight: 800; vertical-align: 1px; }
.operateur-pastille.operateur-orange { background: var(--om); color: #fff; }
.operateur-pastille.operateur-mtn { background: var(--momo); color: #1A1A1A; }
.point-operateur { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; vertical-align: 2px; }
.point-operateur.orange { background: var(--om); }
.point-operateur.mtn { background: var(--momo); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.indicateur-operateurs { font-size: 1.15rem !important; }
.recap-paiement { position: sticky; top: 86px; }
.recap-eleve { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--trait-2); }
.recap-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: var(--r-moyen);
    background: var(--surface-1); border: 1px solid var(--trait-2); }
.recap-total strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.etapes-paiement { margin: 6px 0 0; padding-left: 1.15rem; }
.etapes-paiement li + li { margin-top: 3px; }
.adresse-copie + .adresse-copie { margin-top: 10px; }

/* ---------- Cahier de textes ---------- */
.barre-semaine { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; }
.barre-semaine-titre { display: flex; flex-direction: column; min-width: 220px; line-height: 1.3; }
.barre-semaine-titre strong { font-size: 1.05rem; }
.barre-semaine-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.barre-semaine-filtres .form-select { width: auto; min-width: 150px; }
.remplissage { padding: 0 18px 16px; }
.jauge.jauge-faible > span { background: var(--ambre-bord); }
.jour-cahier { margin-bottom: 18px; }
.jour-cahier-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 2px; font-size: 1rem; font-weight: 700; }
.jour-cahier.aujourdhui .jour-cahier-titre { color: var(--encre-texte); }
.cours-cahier-liste { display: grid; gap: 8px; }
.cours-cahier { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 14px; border-radius: var(--r-moyen);
    background: var(--papier); border: 1px solid var(--trait-2); border-left: 4px solid var(--couleur, var(--encre)); }
.cours-cahier.a-remplir { background: color-mix(in srgb, var(--ambre-pale) 55%, var(--papier)); }
.cours-cahier-heure { font-weight: 700; line-height: 1.25; }
.cours-cahier-heure span { display: block; font-weight: 500; color: var(--gris); font-size: .84rem; }
.cours-cahier-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cours-cahier-titre { margin-top: 4px; font-weight: 700; color: var(--couleur, var(--texte)); }
[data-theme="nuit"] .cours-cahier-titre { color: color-mix(in srgb, var(--couleur) 55%, #fff); }
.cours-cahier-texte { font-size: .88rem; color: var(--texte-doux); white-space: pre-line; }
.cours-cahier-devoirs { display: flex; gap: 8px; margin-top: 6px; padding: 7px 10px; border-radius: 8px; font-size: .86rem;
    background: color-mix(in srgb, var(--couleur, var(--encre)) 8%, var(--papier)); }
.cours-cahier-devoirs .bi { color: var(--couleur, var(--encre)); }
.cours-cahier-action { align-self: center; }
.feuille-tete-matiere { border-top: 4px solid var(--couleur); border-top-left-radius: inherit; border-top-right-radius: inherit; }
.bloc-devoirs { margin-top: 6px; padding: 14px; border-radius: var(--r-moyen); background: var(--surface-1); border: 1px dashed var(--trait); }
.precedent-cahier { padding: 10px 18px; border-left: 3px solid var(--couleur, transparent); }
.precedent-cahier + .precedent-cahier { border-top: 1px solid var(--trait-2); }
.journal-cahier { list-style: none; margin: 0; padding: 4px 0; }
.journal-cahier li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 14px 18px; }
.journal-cahier li + li { border-top: 1px solid var(--trait-2); }
.journal-cahier-date { display: grid; place-items: center; align-content: center; height: 54px; border-radius: 12px; line-height: 1.1;
    background: color-mix(in srgb, var(--couleur) 12%, var(--papier)); color: color-mix(in srgb, var(--couleur) 85%, var(--texte)); }
.journal-cahier-date strong { font-size: 1.3rem; }
.journal-cahier-date span { font-size: .75rem; text-transform: uppercase; }
.matiere-puce { font-weight: 600; color: color-mix(in srgb, var(--couleur, var(--encre)) 85%, var(--texte)); }
/* Devoirs dans l'espace des élèves et des parents */
.devoirs-jour + .devoirs-jour { margin-top: 16px; }
.devoirs-jour-titre { margin: 0 0 8px; font-size: .95rem; font-weight: 700; }
.devoirs-jour-titre.proche { color: var(--ambre); }
.devoir-carte { display: flex; gap: 12px; padding: 11px 14px; border-radius: var(--r-moyen); background: var(--papier); border: 1px solid var(--trait-2);
    border-left: 4px solid var(--couleur); }
.devoir-carte + .devoir-carte { margin-top: 8px; }
.devoir-carte .matiere-puce { display: block; }

/* ---------- Import des élèves depuis Excel ---------- */
.text-vert { color: var(--vert) !important; }
.etapes-import { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 0 0 18px; padding: 0; }
.etapes-import li { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-moyen); background: var(--papier); border: 1px solid var(--trait-2); }
.etapes-import li > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: .9rem; }
.etapes-import li span:not(.etape-numero) { color: var(--gris); font-size: .84rem; line-height: 1.4; }
.etapes-import .etape-numero { flex-shrink: 0; margin: 0; }
.depot-fichier { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 18px; text-align: center; cursor: pointer;
    border: 2px dashed var(--trait); border-radius: var(--r-moyen); background: var(--surface-1); transition: border-color .15s ease, background-color .15s ease; }
.depot-fichier:hover, .depot-fichier.survol { border-color: var(--encre); background: var(--encre-pale); }
.depot-fichier.is-invalid { border-color: var(--rouge); }
.depot-fichier > .bi { font-size: 2.2rem; color: var(--encre); }
.depot-fichier input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.depot-titre { font-weight: 700; }
.depot-fichier.choisi .depot-titre { color: var(--encre-texte); }
.depot-sous { font-size: .82rem; color: var(--gris); }
.colonnes-import { margin: 0 0 12px; padding-left: 1.1rem; font-size: .9rem; }
.colonnes-import li + li { margin-top: 6px; }
.colonnes-import .pastille { font-size: .68rem; vertical-align: 1px; }
.colonnes-trouvees { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 20px 14px; border-top: 1px solid var(--trait-2); }
.apercu-import .import-message { display: block; margin-top: 3px; font-size: .78rem; line-height: 1.35; }
.import-erreur { color: var(--rouge-fonce); }
.import-avertissement { color: var(--ambre); }
.registre tr.ligne-erreur > td:first-child { box-shadow: inset 3px 0 0 var(--rouge); }
.registre tr.ligne-existe td { color: var(--gris); }

/* Suivi d'un paiement : attente, réussite, échec */
.suivi-paiement { max-width: 640px; margin: 8px auto 0; }
.suivi-carte { padding: 34px 30px 26px; text-align: center; }
.suivi-titre { font-family: 'Cursive Ecole', cursive; font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.7; margin: 4px 0 6px; }
.suivi-texte { max-width: 480px; margin: 0 auto 18px; color: var(--texte-doux); }
.suivi-illustration { display: grid; place-items: center; height: 104px; margin-bottom: 8px; }
.suivi-coche { width: 92px; height: 92px; }
.suivi-coche circle { fill: color-mix(in srgb, var(--vert) 12%, var(--papier)); stroke: var(--vert); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: trace .7s ease-out .1s forwards; }
.suivi-coche path { fill: none; stroke: var(--vert); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: trace .4s ease-out .75s forwards; }
.suivi-rond { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--surface-3); color: var(--gris); font-size: 2.2rem; animation: coche-saute .5s ease backwards; }
.suivi-rond-alerte { background: var(--rouge-pale); color: var(--rouge); }
.suivi-telephone { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--encre-pale); color: var(--encre-texte); font-size: 2.3rem; }
.suivi-telephone::before, .suivi-telephone::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--encre); opacity: 0; animation: onde 2.2s ease-out infinite; }
.suivi-telephone::after { animation-delay: 1.1s; }
.suivi-telephone .bi { animation: vibre 2.2s ease-in-out infinite; }
@keyframes onde { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes vibre { 0%, 50%, 100% { transform: none; } 55%, 65%, 75% { transform: rotate(-9deg); } 60%, 70% { transform: rotate(9deg); } }
.suivi-attente-barre { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px; background: var(--encre-pale); color: var(--encre-texte); font-size: .86rem; font-weight: 600; }
.suivi-details { max-width: 440px; margin: 0 auto 22px; text-align: left; }
.suivi-details .montant { font-size: 1.05rem; }
.suivi-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.suivi-reussi { border-top: 4px solid var(--vert); }
.suivi-echoue { border-top: 4px solid var(--rouge); }
.suivi-en_attente { border-top: 4px solid var(--encre); }

/* Simulation (mode essai) : un téléphone dessiné */
.simulation { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: center; max-width: 900px; margin: 0 auto; }
.telephone-maquette { width: 300px; padding: 12px; border-radius: 40px; background: #1C2321; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55), inset 0 0 0 2px #3A4441; }
.telephone-ecran { overflow: hidden; border-radius: 30px; background: #F6F7F6; color: #1B2622; min-height: 540px; display: flex; flex-direction: column; }
.telephone-barre { display: flex; justify-content: space-between; padding: 10px 20px 6px; font-size: .78rem; font-weight: 600; }
.telephone-entete { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #fff; }
.operateur-orange .telephone-entete { background: var(--om); }
.operateur-mtn .telephone-entete { background: var(--momo); color: #1A1A1A; }
.telephone-entete .operateur-logo { width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .92); color: #1A1A1A; font-size: .74rem; }
.telephone-corps { flex: 1; display: flex; flex-direction: column; padding: 18px 18px 20px; }
.telephone-montant { font-size: 1.7rem; font-weight: 800; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
.code-secret { font-size: 1.4rem; letter-spacing: .5em; text-align: center; }
.telephone-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 16px; }
.operateur-orange .telephone-boutons .btn-primary { background: var(--om); border-color: var(--om); }
.operateur-mtn .telephone-boutons .btn-primary { background: #1A1A1A; border-color: #1A1A1A; }
.telephone-ecran .form-control { background: #fff; color: #1B2622; border-color: #CBD5D0; }
.telephone-ecran .form-text, .telephone-ecran .form-label { color: #4A5753; }

/* ---------- Présence des enseignants ---------- */
.presences-profs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: start; }
.presences-profs > .feuille { margin-bottom: 0; overflow: hidden; }
.presence-prof-tete { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--trait-2); }
.presence-prof-tete .personne-nom { display: block; }
.presence-prof-tete .personne-sous { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.presence-cours { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 16px 10px 14px;
    border-left: 4px solid var(--couleur, var(--encre)); transition: background-color .15s ease; }
.presence-cours + .presence-cours { border-top: 1px solid var(--trait-2); }
.presence-cours:has(input[value="absent"]:checked) { background: color-mix(in srgb, var(--rouge-pale) 60%, var(--papier)); }
.presence-cours:has(input[value="retard"]:checked) { background: color-mix(in srgb, var(--ambre-pale) 60%, var(--papier)); }
.presence-cours-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.presence-cours-info span:last-child { color: var(--texte-doux); font-size: .88rem; }
.presence-details { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.presence-details .form-control, .presence-details .form-select { flex: 1 1 170px; width: auto; }
.presence-details .presence-minutes { flex: 0 0 150px; }
.barre-enregistrer { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 18px; padding: 12px 18px; border-radius: var(--r-moyen); background: var(--papier); border: 1px solid var(--trait);
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .45); }
.pastille-violet { background: color-mix(in srgb, #7B5BC8 13%, var(--papier)); color: color-mix(in srgb, #7B5BC8 88%, var(--texte)); }
.registre td.droite.chiffres, .registre td.droite.montant { white-space: nowrap; }
.indicateurs-fiche { border-bottom: 1px solid var(--trait-2); }

/* ---------- Petits écrans ---------- */
.voile { display: none; }
@media (max-width: 991.98px) {
    .sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); visibility: hidden; transition: transform .22s ease, visibility .22s; }
    .sidebar-interne { max-height: 100%; height: 100%; }
    .menu-ouvert .sidebar { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
    .menu-ouvert .voile { display: block; position: fixed; inset: 0; background: rgba(15, 25, 21, .45); z-index: 1030; }
    .topbar { padding: 0 16px; }
    .topbar .btn-menu { display: inline-flex; }
    .app-content { padding: 18px 16px 40px; }
    .page-title { font-size: 1.45rem; }
    .tableau-noir { padding: 18px 18px 16px; border-width: 5px; }
    .craie-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
    .craie-stat { padding: 2px 14px; }
    .craie-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
    .craie-stat .valeur { font-size: 1.45rem; }
    .page-connexion { grid-template-columns: 1fr; }
    .connexion-tableau { padding: 30px 24px; border-right: 0; border-bottom: 8px solid var(--cadre); }
    .connexion-tableau h1 { font-size: 1.7rem; }
    .connexion-liste { display: none; }
    .cahier { padding: 28px 22px 24px 76px; background-image:
        linear-gradient(90deg, transparent 52px, var(--marge) 52px, var(--marge) 54px, transparent 54px),
        repeating-linear-gradient(0deg, transparent 0 31px, var(--seyes-fort) 31px 32px),
        repeating-linear-gradient(0deg, transparent 0 7px, var(--cahier-trame) 7px 8px),
        repeating-linear-gradient(90deg, transparent 0 31px, var(--cahier-trame) 31px 32px); }
    .utilisateur-texte { display: none; }
    .indicateurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .indicateur { padding: 12px 14px; }
    .indicateur:nth-child(odd) { border-left: 0; }
    .indicateur:nth-child(n+3) { border-top: 1px solid var(--trait-2); }
    .indicateur .valeur { font-size: 1.2rem; }
    .masquer-mobile { display: none !important; }
    .acces-bloc + .acces-bloc { border-left: 0; border-top: 1px solid var(--trait-2); }
    /* Messagerie sur téléphone : la liste, ou la conversation ouverte */
    .messagerie { grid-template-columns: 1fr; height: calc(100dvh - 190px); min-height: 440px; }
    .messagerie.avec-conversation .messagerie-liste, .messagerie:not(.avec-conversation) .messagerie-fil { display: none; }
    /* Conversation ouverte sur téléphone : elle prend tout l'écran, la zone d'écriture reste visible en bas */
    .app-content:has(.messagerie.avec-conversation) { padding-bottom: 14px; }
    .app-content:has(.messagerie.avec-conversation) > .page-head { display: none; }
    .messagerie.avec-conversation { height: calc(100dvh - 60px - 18px - 14px); min-height: 380px; }
    .fil-tete .retour-liste { display: inline-flex; }
    .discussion { padding: 12px 12px 8px 16px; }
    .bulle { max-width: 86%; }
    .carnet { max-height: 60vh; min-height: 0; }
    .journal-ligne { grid-template-columns: 44px minmax(0, 1fr); }
    .journal-qui { display: none; }
    .etat-sauvegarde { flex-direction: column; }
    .recap-paiement { position: static; }
    .cours-cahier { grid-template-columns: 50px minmax(0, 1fr); gap: 10px; }
    .cours-cahier-action { grid-column: 2; }
    .barre-semaine-filtres { margin-left: 0; width: 100%; }
    .simulation { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 18px; }
    .telephone-maquette { width: min(300px, 100%); }
    .telephone-ecran { min-height: 500px; }
    .suivi-carte { padding: 26px 18px 20px; }
    .barre-enregistrer { bottom: 0; }
}
@media (max-width: 575.98px) {
    .barre-semaine-titre { min-width: 0; flex: 1 1 0; }
    .presence-cours { grid-template-columns: minmax(0, 1fr); }
    .barre-enregistrer .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
    /* Moins de mouvement : seules les indications de chargement restent animées */
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .barres-chargement i { animation-duration: 2.8s !important; animation-iteration-count: infinite !important; }
}

/* ---------- Impression (listes) ---------- */
@media print {
    .sidebar, .topbar, .page-actions, .filtres, .no-print, .alerte .fermer, .pagination { display: none !important; }
    .chargement-page, .barre-chargement { display: none !important; }
    body { background: #fff; }
    .app-content { padding: 0; max-width: none; }
    .feuille { border: 0; }
    .registre tbody tr:hover td { background: none; }
    .case-vide, .offcanvas { display: none !important; }
    .puce-cours { box-shadow: none; }
}

/* ---------- Arrivées du jour : cartes scannées à l'entrée (version 1.7) ---------- */
.scan-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; padding: 18px 20px; align-items: stretch; }
.scan-titre { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 700; font-size: 1.08rem; color: var(--titre); }
.scan-titre .bi { font-size: 1.3rem; }
.scan-champ { display: flex; gap: 8px; }
.scan-champ .form-control { font-size: 1.2rem; letter-spacing: .03em; }
.scan-aide { margin: 10px 0 0; font-size: .84rem; color: var(--gris); }
.scan-resultat { display: flex; align-items: center; gap: 16px; min-height: 124px; padding: 14px 16px; border-radius: 14px; border: 2px dashed var(--trait);
                 background: var(--fond); transition: background-color .2s, border-color .2s, opacity .2s; }
.scan-attente { display: flex; align-items: center; gap: 12px; color: var(--gris); }
.scan-attente .bi { font-size: 2rem; }
.scan-photo { width: 84px; height: 84px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
              background: var(--encre-pale); color: var(--encre-texte); font-weight: 700; font-size: 1.7rem; box-shadow: 0 0 0 3px var(--papier); }
.scan-photo img { width: 100%; height: 100%; object-fit: cover; }
.scan-texte { min-width: 0; }
.scan-nom { font-weight: 700; font-size: 1.3rem; line-height: 1.2; }
.scan-nom a { color: inherit; text-decoration: none; }
.scan-classe { color: var(--gris); }
.scan-statut { margin-top: 6px; font-weight: 700; font-size: 1.06rem; display: flex; align-items: center; gap: 6px; }
.scan-message { margin-top: 2px; font-size: .84rem; color: var(--gris); }
.scan-ok { border: 2px solid var(--vert); background: var(--vert-pale); }
.scan-ok .scan-statut { color: var(--vert); }
.scan-retard { border: 2px solid var(--ambre); background: var(--ambre-pale); }
.scan-retard .scan-statut { color: var(--ambre); }
.scan-deja { border: 2px solid var(--encre-texte); background: var(--encre-pale); }
.scan-deja .scan-statut { color: var(--encre-texte); }
.scan-erreur { border: 2px solid var(--rouge); background: var(--rouge-pale); }
.scan-erreur .scan-statut { color: var(--rouge); }
.scan-sortie { border: 2px solid var(--encre); background: var(--encre-pale); }
.scan-sortie .scan-statut { color: var(--encre-texte); }
/* Arrivée (vert) ou sortie facultative (bleu) : la couleur du bandeau rappelle le mode choisi */
.scan-zone { border-top: 4px solid var(--vert); }
.scan-zone.scan-mode-sortie { border-top-color: var(--encre); }
.scan-mode { display: flex; width: 100%; margin-bottom: 14px; }
.scan-mode .btn { flex: 1 1 0; font-weight: 700; }
.scan-mode .btn-check:checked + .btn[for="mode-arrivee"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.scan-facultatif { font-size: .76rem; font-weight: 500; opacity: .85; }
.scan-aide-sortie { color: var(--encre-texte); }

/* Historique des arrivées et sorties : raccourcis de période, filtres avancés, filtres choisis */
.periodes { display: flex; flex-wrap: wrap; gap: 8px; }
.periode { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--trait); background: var(--papier);
    color: var(--texte); font-size: .86rem; font-weight: 600; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; }
.periode:hover { color: var(--texte); border-color: var(--encre-bord-pale); background: var(--surface-1); }
.periode.actif { background: var(--encre); border-color: var(--encre); color: #fff; }
.filtres-avances { flex-basis: 100%; }
.filtres-avances > summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; user-select: none;
    font-size: .86rem; font-weight: 700; color: var(--encre-texte); padding: 2px 0; }
.filtres-avances > summary::-webkit-details-marker { display: none; }
.filtres-avances > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.filtres-avances-nb { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--encre); color: #fff; font-size: .72rem; text-align: center; line-height: 18px; }
.filtres-avances-chevron { font-size: .78rem; transition: transform .15s ease; }
.filtres-avances[open] .filtres-avances-chevron { transform: rotate(180deg); }
.filtres-avances-corps { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding-top: 10px; }
.filtres-avances-corps > div { min-width: 140px; }
.filtres-heures .form-control { min-width: 0; width: 108px; }
.filtres-actifs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 18px; }
.filtre-actif { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 11px; border-radius: 999px; background: var(--encre-pale);
    color: var(--encre-texte); font-size: .82rem; font-weight: 600; }
.filtre-actif a { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; color: inherit; text-decoration: none; }
.filtre-actif a:hover { background: var(--encre-bord-pale); }
.registre tr.historique-jour th { background: var(--surface-1); padding: 8px 14px; border-bottom: 1px solid var(--trait-2);
    font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
.registre tr.historique-jour a { color: inherit; text-decoration: none; }
.registre tr.historique-jour a:hover { color: var(--encre-texte); text-decoration: underline; }
.registre tr.historique-jour:hover th { background: var(--surface-1); }
.personne-sous .lien-discret { color: var(--encre-texte); }
.historique-pied { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
/* Boutons « Arrivées et sorties », « Arrivées seulement », « Sorties seulement » (vert : arrivées, bleu : sorties) */
.modes-passage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mode-passage { --mode: var(--texte); --mode-plein: var(--texte); --mode-texte: var(--papier);
    display: flex; align-items: center; gap: 10px; padding: 11px 16px; border: 2px solid var(--trait); border-radius: var(--r-moyen);
    background: var(--papier); color: var(--texte); font-weight: 700; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.mode-passage .bi { font-size: 1.35rem; color: var(--mode); flex-shrink: 0; }
.mode-passage .mode-libelle { flex: 1; min-width: 0; line-height: 1.25; }
.mode-passage .mode-nombre { padding: 1px 10px; border-radius: 999px; background: var(--surface-2); color: var(--gris); font-size: .86rem;
    font-variant-numeric: tabular-nums; white-space: nowrap; }
.mode-passage:hover { border-color: var(--mode); color: var(--texte); }
.mode-passage:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mode-passage.actif { background: var(--mode-plein); border-color: var(--mode-plein); color: var(--mode-texte); }
.mode-passage.actif .bi { color: var(--mode-texte); }
.mode-passage.actif .mode-nombre { background: rgba(255, 255, 255, .22); color: var(--mode-texte); }
.mode-arrivees { --mode: var(--vert); --mode-plein: #2F7D4F; --mode-texte: #fff; }
.mode-sorties { --mode: var(--encre-texte); --mode-plein: var(--encre); --mode-texte: #fff; }
.sous-modes .periode.actif { background: #2F7D4F; border-color: #2F7D4F; }
.periode-nombre { margin-left: 6px; font-weight: 500; opacity: .75; font-variant-numeric: tabular-nums; }
[data-theme="nuit"] .scan-mode .btn-check:checked + .btn[for="mode-arrivee"] { background: #2F7D4F; border-color: #2F7D4F; }
@media (max-width: 575.98px) {
    .modes-passage { gap: 6px; }
    .mode-passage { flex-direction: column; align-items: flex-start; gap: 4px; padding: 9px 10px; font-size: .86rem; }
    .mode-passage .bi { font-size: 1.15rem; }
}
.scan-en-cours { opacity: .55; }
.scan-flash { animation: scan-flash .5s ease-out; }
@keyframes scan-flash { from { transform: scale(1.025); } to { transform: none; } }
.liste-simple { list-style: none; margin: 0; padding: 4px 0; max-height: 420px; overflow: auto; }
.liste-simple li { padding: 6px 18px; border-bottom: 1px solid var(--trait-2); }
.liste-simple li:last-child { border-bottom: 0; }
.registre tr.ligne-choisie td { background: var(--encre-pale); }
.appel-arrivee { display: block; font-size: .78rem; font-weight: 600; }
.appel-arrivee.ok { color: var(--vert); }
.appel-arrivee.retard { color: var(--ambre); }
.appel-arrivee.absent { color: var(--gris); font-weight: 400; }
@media (max-width: 991.98px) {
    .scan-grille { grid-template-columns: minmax(0, 1fr); padding: 14px; }
    .scan-resultat { min-height: 100px; }
}

/* Notes du mois : carnet de la classe (écrit et oral chaque mois, la composition le dernier mois) */
.carnet-table td, .carnet-table th { vertical-align: middle; }
.carnet-table td.centre, .carnet-table th.centre { min-width: 150px; }
.carnet-compo { display: block; font-size: .7rem; font-weight: 700; color: var(--rouge); text-transform: uppercase; letter-spacing: .04em; }
.carnet-cases { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.carnet-puce { display: inline-flex; flex-direction: column; align-items: center; min-width: 64px; padding: 4px 8px; border-radius: 9px; border: 1.5px solid var(--trait);
    background: var(--papier); color: var(--texte); text-decoration: none; line-height: 1.2; }
.carnet-puce:hover { border-color: var(--encre-bord); color: var(--texte); }
.carnet-libelle { font-weight: 700; font-size: .82rem; white-space: nowrap; }
.carnet-libelle .bi { margin-right: 2px; }
.carnet-detail { font-size: .7rem; color: var(--gris); white-space: nowrap; }
.carnet-complet { border-color: var(--vert); background: var(--vert-pale); }
.carnet-complet .carnet-libelle { color: var(--vert); }
.carnet-partiel { border-color: var(--ambre); background: var(--ambre-pale); }
.carnet-partiel .carnet-libelle { color: var(--ambre); }
.carnet-vide { border-color: var(--encre-bord-pale); }
.carnet-manque { border-style: dashed; color: var(--gris); background: transparent; }
.carnet-manque .carnet-libelle { color: var(--encre-texte); font-weight: 600; }
.carnet-ancienne { opacity: .75; border-style: dotted; }
.carnet-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.carnet-pastille { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid; vertical-align: -2px; margin-right: 4px; }
.poids-info { padding: 6px 12px; border: 1px dashed var(--trait); border-radius: var(--r-petit); background: var(--surface-1); font-weight: 700; }
.eval-ecrit { background: var(--encre-pale); color: var(--encre-texte-2); border-color: var(--encre); }
.eval-oral { background: var(--vert-pale); color: var(--vert); border-color: var(--vert); }
.eval-texte-ecrit { color: var(--encre-texte); }
.eval-texte-oral { color: var(--vert); }
.bulletins-mois { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--trait-2); background: var(--surface-1); }
.bulletins-mois-titre { font-weight: 700; font-size: .9rem; margin-right: 4px; }