/* =============================================================================
   GESCOL — Direction A « Registre clair » (maquette validée le 6 sept. 2026)
   Chargé APRÈS app.css (socle MecSyf) : redéfinit les tokens et les surfaces
   principales (barre latérale claire, barre de contexte, connexion).
   Palette : papier chaud #F6F4EF, vert profond #1F6F5B, encre #1D1B16.
   Typo : Bricolage Grotesque (titres) + Manrope (interface).
   ============================================================================= */
:root {
    --brand-primary-darkest: #123F35;
    --brand-primary-dark: #174F42;
    --brand-primary: #1F6F5B;
    --brand-primary-light: #2E8A72;
    --brand-primary-lighter: #4FA58E;
    --brand-primary-bg: #E6F2EC;
    --brand-secondary: #8A5A1E;
    --brand-secondary-dark: #6E4715;
    --brand-secondary-light: #C9A24B;
    --brand-secondary-bg: #FBEFD9;
    --brand-action: #1F6F5B;
    --gs-paper: #F6F4EF;
    --gs-surface: #FFFFFF;
    --gs-surface-2: #FBFAF7;
    --gs-ink: #1D1B16;
    --gs-ink-2: #4A463F;
    --gs-muted: #6B6760;
    --gs-line: #E4E0D8;
    --gs-line-2: #EFECE5;
    --gray-50: #FBFAF7; --gray-100: #EFECE5; --gray-200: #E4E0D8; --gray-300: #D5D0C6;
    --gray-400: #9A958B; --gray-500: #6B6760; --gray-600: #4A463F; --gray-700: #33302A;
    --gray-800: #1D1B16; --gray-900: #141310;
    --status-success-bg: #E6F2EC; --status-success-fg: #174F42;
    --status-warning-bg: #FBEFD9; --status-warning-fg: #8A5A1E;
    --status-danger-bg: #FBE4E1; --status-danger-fg: #8E1F17;
    --status-info-bg: #E5EEF6; --status-info-fg: #1F4E79;
    --sidebar-w: 232px;
    --radius-sm: 8px; --radius: 12px;
    --gs-font: 'Manrope', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --gs-font-display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', Arial, sans-serif;
}
body { font-family: var(--gs-font); color: var(--gs-ink); background: var(--gs-paper); }
h1, h2, h3, .page-title { font-family: var(--gs-font-display); letter-spacing: -0.01em; }
.num, td.num, .gs-kpi-value { font-variant-numeric: tabular-nums; }

/* ---- Barre latérale claire (spécificité alignée sur app.css : .sidebar-nav .nav-item) ---- */
.sidebar { background: var(--gs-surface-2); color: var(--gs-ink); border-right: 1px solid var(--gs-line); }
.sidebar-header { border-bottom: 1px solid var(--gs-line); }
.sidebar-header .brand h2 { color: var(--gs-ink); font-family: var(--gs-font-display); font-size: 1.05rem; }
.sidebar-header .brand span { color: var(--gs-muted); }
.sidebar-close { color: var(--gs-ink); }
.sidebar-nav .nav-section { color: var(--gray-400); font-size: .68rem; letter-spacing: .08em; font-weight: 700; }
.sidebar-nav .nav-section:hover { color: var(--gs-ink-2); }
.sidebar-nav .nav-item { color: var(--gs-ink-2); font-weight: 500; }
.sidebar-nav .nav-item i { color: #7A756C; }
.sidebar-nav .nav-item:hover { background: var(--gray-100); color: var(--gs-ink); }
.sidebar-nav .nav-item:hover i { color: var(--brand-primary); }
.sidebar-nav .nav-item.active { background: var(--brand-primary-bg); color: var(--brand-primary-dark); font-weight: 700; box-shadow: inset 3px 0 0 var(--brand-primary); }
.sidebar-nav .nav-item.active i { color: var(--brand-primary-dark); }
.sidebar-footer { border-top: 1px solid var(--gs-line); color: var(--gs-ink); }
.sidebar-footer .avatar { background: var(--brand-primary-bg); color: var(--brand-primary-dark); }
.sidebar-footer .user-info .role { opacity: 1; color: var(--gs-muted); }
.sidebar-footer .logout-btn { color: var(--gray-400); }
.sidebar-footer .logout-btn:hover { background: var(--gray-100); }
.gs-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---- Barre du haut + contexte tenant ------------------------------------- */
.topbar { background: var(--gs-surface); border-bottom: 1px solid var(--gs-line); }
.scope-chip { display: inline-flex; align-items: center; gap: .4rem; height: 32px; padding: 0 .7rem; border: 1px solid var(--gs-line); border-radius: var(--radius-sm); background: var(--gs-surface); font-size: .8rem; color: var(--gs-ink); }
.scope-chip i { color: var(--gray-400); }
.scope-chip.scope-warning { background: var(--status-warning-bg); color: var(--status-warning-fg); border-color: transparent; }
.search-box { background: var(--gs-surface-2); border: 1px solid var(--gs-line); border-radius: var(--radius-sm); }

/* ---- Composants GESCOL ----------------------------------------------------- */
.content { background: var(--gs-paper); }
.gs-card { background: var(--gs-surface); border: 1px solid var(--gs-line); border-radius: var(--radius); padding: 20px; }
.gs-h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; }
.gs-muted { color: var(--gs-muted); font-size: .9rem; margin: 0; }
.gs-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.gs-page-header h1 { font-size: 1.75rem; font-weight: 700; margin: 0 0 4px; }
.gs-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .gs-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gs-kpi { display: flex; flex-direction: column; gap: 6px; }
.gs-kpi-label { font-size: .82rem; color: var(--gs-muted); font-weight: 600; }
.gs-kpi-value { font-family: var(--gs-font-display); font-size: 1.9rem; font-weight: 700; }
.gs-kpi-note { font-size: .78rem; color: var(--gs-muted); }
.gs-label { display: block; font-size: .78rem; font-weight: 600; color: var(--gs-muted); margin: 14px 0 6px; }
.gs-input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font: inherit; font-size: .95rem; background: var(--gs-surface); box-sizing: border-box; }
.gs-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-bg); }
.gs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid var(--gray-300); background: var(--gs-surface); font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; }
.gs-btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.gs-btn-primary:hover { background: var(--brand-primary-dark); }
.gs-btn:disabled { opacity: .6; cursor: default; }
.gs-btn-block { width: 100%; margin-top: 20px; }
.gs-error { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--status-danger-bg); color: var(--status-danger-fg); font-size: .85rem; }
/* Écrans du mot de passe (#223, PR 2) : message de réussite, erreur sous un champ, liens. */
.gs-succes { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--status-success-bg, #e8f5ee); color: var(--status-success-fg, #1f6b43); font-size: .85rem; }
.gs-champ-erreur { margin: 4px 0 0; color: var(--status-danger-fg); font-size: .78rem; }
/* École servie par l'hôte (#223) : repère au-dessus de la carte de connexion. */
.gs-login-ecole { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 10px 12px; background: var(--gs-surface-2); border: 1px solid var(--gs-line); border-radius: 10px; font-size: .9rem; color: var(--gs-ink); }
.gs-login-ecole[hidden] { display: none; }
.gs-login-ecole-mark { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--brand-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .72rem; letter-spacing: .4px; }
.gs-login-ecole-texte { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.gs-login-ecole-pre { color: var(--gs-muted); font-size: .72rem; }
.gs-login-lien { margin: 14px 0 0; text-align: center; font-size: .85rem; }
.gs-login-lien a { color: var(--brand-primary); font-weight: 600; text-decoration: none; }
.gs-login-lien a:hover { text-decoration: underline; }

/* ---- Connexion ------------------------------------------------------------- */
.gs-login { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 46%) minmax(0, 1fr); background: var(--gs-paper); }
.gs-login-band { background: var(--brand-primary-darkest); color: #EAF3EE; padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; }
.gs-brand { display: flex; align-items: center; gap: 12px; }
.gs-brand-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.gs-brand-name { font-family: var(--gs-font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: .04em; }
.gs-eyebrow { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-primary-lighter); margin: 0 0 12px; font-weight: 700; }
.gs-login-pitch h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 16px; font-weight: 600; color: #fff; text-wrap: pretty; }
.gs-sub { font-size: 1rem; line-height: 1.5; color: #C8DDD3; margin: 0; max-width: 40ch; }
.gs-login-legal { font-size: .78rem; color: #9FBFB2; margin: 0; }
.gs-login-card { align-self: center; justify-self: center; width: min(420px, 90%); background: var(--gs-surface); border: 1px solid var(--gs-line); border-radius: 16px; padding: 36px; }
.gs-login-card h2 { margin: 0 0 6px; font-size: 1.5rem; }
.gs-login-sub { color: var(--gs-muted); font-size: .9rem; margin: 0 0 8px; }
@media (max-width: 860px) { .gs-login { grid-template-columns: 1fr; } .gs-login-band { padding: 28px; gap: 24px; } .gs-login-pitch h1 { font-size: 1.4rem; } }

/* ---- Onglets, barres d'outils, en-têtes de carte (responsive) --------------
   Points de rupture du skill frontend-responsive : 1024 (sidebar), 900, 640 (mobile).
   Le document ne défile jamais horizontalement : ce qui est large défile dans son conteneur. */
/* En-têtes de ligne (<th> dans tbody : Finances, synthèses) : même remplissage et même filet que
   les <td>, sinon le libellé se colle au bord de la carte (app.css ne stylait que thead th / tbody td). */
.data-table tbody th { padding: .75rem 1rem; font-size: .85rem; text-align: left; color: var(--gray-700); border-bottom: 1px solid var(--gray-100); background: transparent; }
.tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.tabs .tab { white-space: nowrap; flex-shrink: 0; }
.gs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.gs-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.gs-card-head > :first-child { min-width: 0; }
.gs-card-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
/* Boutons d'une cellule de tableau (Modifier, Mot de passe, Désactiver…) : espacés dans les
   deux sens quand ils passent à la ligne, jamais coupés au milieu d'un libellé (#106). */
.gs-actions { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.gs-actions .btn { white-space: nowrap; }
/* Bouton d'action d'une section de formulaire (« Nouveau tuteur », #110) : sur le bord haut, à droite. */
/* Bloc Renseignements de la fiche élève (#112). */
.gs-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: .9rem; }
.gs-dl dt { color: var(--gray-500); } .gs-dl dd { margin: 0; }
@media (max-width: 640px) { .gs-dl { grid-template-columns: 1fr; } .gs-dl dt { margin-top: 6px; } }
.ff-section { position: relative; }
.ff-section-action { position: absolute; top: -14px; right: 12px; background: var(--white); padding: 0 6px; }
.gs-h2 { flex-wrap: wrap; }
@media (max-width: 640px) {
    /* Barre du haut sur téléphone : le préfixe de fil d'Ariane (« Principal / ») disparaît et le
       titre se tronque plutôt que de pousser la cloche hors de l'écran (5 px de débordement
       horizontal à 360 px, toute la page décalée). */
    .topbar { min-width: 0; }
    .topbar .crumb-section, .topbar .crumb-sep { display: none; }
    .topbar .page-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .scope-chip { display: none; }  /* app.css la masque déjà à cette taille, mais la règle .scope-chip de ce fichier, chargé après, la réaffichait */
    /* Deux tuiles par ligne, valeurs resserrées (#204) : en une colonne, les indicateurs du tableau
       de bord occupaient un écran et demi avant le premier contenu. */
    .gs-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .gs-kpi-row > .gs-card { padding: 12px; }
    .gs-kpi-value { font-size: 1.15rem; overflow-wrap: anywhere; }
    .gs-kpi-label { font-size: .74rem; }
    .gs-card { padding: 14px; }
    .gs-page-header { flex-direction: column; align-items: flex-start; }
    .gs-card-actions { width: 100%; }
    .gs-card-actions .btn { flex: 1 1 auto; }
    .page-header .actions { width: 100%; flex-wrap: wrap; }
}

/* ---- Connexion : pied de page (sécurité, domaine, version) et mobile ------- */
.gs-login-foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--gs-line); font-size: .74rem; line-height: 1.45; color: var(--gs-muted); display: flex; flex-direction: column; gap: 4px; }
.gs-login-foot i { margin-right: .3rem; color: var(--brand-primary); }
.gs-login-foot .gs-login-sig { font-variant-numeric: tabular-nums; }
.gs-login-foot #login-version:not(:empty)::before { content: " · "; }
@media (max-width: 640px) {
    .gs-login-band { padding: 20px; gap: 12px; justify-content: flex-start; }
    .gs-login-pitch h1 { font-size: 1.15rem; margin-bottom: 0; }
    /* Le texte d'accroche disparaît : la mention sécurité est reprise dans le pied de la carte. */
    .gs-sub, .gs-login-legal { display: none; }
    .gs-login-card { width: 100%; align-self: start; border-radius: 0; border-left: 0; border-right: 0; padding: 24px 20px; }
}

/* ---- Caisse (maquette Encaissement : élève | échéances | règlement) ---------------- */
.gs-caisse { display: grid; grid-template-columns: 320px minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.gs-caisse-col { min-width: 0; }
.gs-caisse-resultats { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; }
.gs-caisse-resultats li + li { border-top: 1px solid var(--gray-200); }
.gs-caisse-resultats button { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; background: none; border: 0; text-align: left; cursor: pointer; font: inherit; }
.gs-caisse-resultats button:hover, .gs-caisse-resultats button:focus { background: var(--brand-primary-bg); outline: none; }
.gs-caisse-eleve { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.gs-caisse-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-primary-bg); color: var(--brand-primary-dark); display: grid; place-items: center; font-weight: 700; font-family: var(--gs-font-display); flex: none; }
.gs-caisse-infos { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 14px 0; font-size: .9rem; }
.gs-caisse-infos dt { color: var(--gs-muted); }
.gs-caisse-infos dd { margin: 0; }
.gs-caisse-situation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gs-caisse-situation > div { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--gray-200); border-radius: 10px; }
.gs-caisse-situation .num { font-weight: 700; }
.gs-caisse-arriere { margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: .85rem; }
.gs-caisse-cochee td { background: var(--brand-primary-bg); }
.gs-caisse-montant { display: flex; align-items: center; gap: 8px; }
.gs-caisse-montant .gs-input { flex: 1; min-width: 0; width: auto; font-size: 1.6rem; font-weight: 700; padding: 8px 12px; text-align: right; font-family: var(--gs-font-display); }
.gs-caisse-montant span { font-weight: 600; color: var(--gs-muted); }
.gs-caisse-selection { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: var(--brand-primary-bg); color: var(--brand-primary-dark); font-size: .9rem; }
.gs-caisse-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 6px 0 12px; }
.gs-caisse-mode { padding: 10px; border: 1px solid var(--gray-200); border-radius: 10px; background: var(--gs-surface); font: inherit; cursor: pointer; text-align: left; }
.gs-caisse-mode.active { border-color: var(--brand-primary); background: var(--brand-primary-bg); color: var(--brand-primary-dark); font-weight: 600; }
.gs-caisse-imputation { list-style: none; margin: 6px 0 0; padding: 0; }
.gs-caisse-imputation li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--gray-200); font-size: .9rem; }
.gs-caisse-recu { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--brand-primary-bg); color: var(--brand-primary-dark); }
@media (max-width: 1100px) { .gs-caisse { grid-template-columns: 1fr 1fr; } .gs-caisse-col:nth-child(2) { grid-column: 1 / -1; order: 1; } }
@media (max-width: 720px) { .gs-caisse { grid-template-columns: 1fr; } .gs-caisse-situation { grid-template-columns: 1fr; } }

/* ---- Fiche élève (maquette FicheEleve) ---------------------------------------------- */
.gs-breadcrumb { font-size: .85rem; color: var(--gs-muted); margin: 0 0 12px; }
.gs-breadcrumb a { color: inherit; }
.gs-fiche-entete { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.gs-fiche-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--brand-primary-bg); color: var(--brand-primary-dark); display: grid; place-items: center; font-weight: 700; font-size: 1.4rem; font-family: var(--gs-font-display); flex: none; }
.gs-fiche-identite { flex: 1 1 320px; min-width: 0; }
.gs-fiche-nom { font-family: var(--gs-font-display); font-size: 1.6rem; margin: 0; line-height: 1.2; }
.gs-fiche-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gs-fiche-identite .btn-link { background: none; border: 0; padding: 0 4px; color: var(--brand-primary-dark); cursor: pointer; font: inherit; font-size: .85rem; }
.gs-fiche-identite .btn-link:hover { text-decoration: underline; }
.gs-fiche-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.gs-parcours { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 6px; }
.gs-parcours-case { height: 44px; border-radius: 8px; display: grid; place-items: center; font-size: .72rem; font-weight: 600; color: #fff; }
.gs-parcours-case.is-payee, .gs-parcours-pastille.is-payee, .gs-parcours-legende .is-payee { background: var(--brand-primary); }
.gs-parcours-case.is-reliquat, .gs-parcours-pastille.is-reliquat, .gs-parcours-legende .is-reliquat { background: #f59e0b; }
.gs-parcours-case.is-echue, .gs-parcours-pastille.is-echue, .gs-parcours-legende .is-echue { background: #dc2626; }
.gs-parcours-case.is-avenir, .gs-parcours-pastille.is-avenir, .gs-parcours-legende .is-avenir { background: var(--gray-300); color: var(--gray-700); }
/* #120 : échéance annulée par un abandon — grisée et barrée, plus rien n'est dû. */
.gs-parcours-case.is-annulee, .gs-parcours-pastille.is-annulee, .gs-parcours-legende .is-annulee { background: var(--gray-100); color: var(--gray-500); border: 1px dashed var(--gray-300); }
.gs-parcours-case.is-annulee span { text-decoration: line-through; }
/* #119 : versement porté par l'organisme payeur — liseré violet, couleur d'état conservée. */
.gs-parcours-case.is-organisme, .gs-parcours-pastille.is-organisme { box-shadow: inset 0 0 0 2px #7c3aed; }
.gs-parcours-legende .is-organisme { background: #fff; border: 2px solid #7c3aed; }
.gs-organisme-versements { display: flex; gap: 4px; flex-wrap: wrap; }
.gs-organisme-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--gray-200); font-size: 1.05rem; }
.gs-parcours-pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.gs-parcours-legende { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: .8rem; color: var(--gs-muted); }
.gs-parcours-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.gs-solde-ligne { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--gray-200); }
.gs-solde-total { border-bottom: 0; font-weight: 700; font-size: 1.05rem; padding-top: 12px; }
.gs-timeline { list-style: none; margin: 0; padding: 0; }
.gs-timeline li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-200); }
.gs-journal li { grid-template-columns: 90px 1fr; font-size: .85rem; padding: 6px 0; }
.gs-journal li:last-child { border-bottom: 0; }
.gs-card-head .btn-link { background: none; border: 0; padding: 0; color: var(--brand-primary-dark); cursor: pointer; font: inherit; font-size: .85rem; }
.gs-timeline time { color: var(--gs-muted); font-size: .85rem; }
@media (max-width: 900px) { .gs-fiche-grille { grid-template-columns: 1fr; } .gs-timeline li { grid-template-columns: 1fr; gap: 2px; } }

/* ---- Impayés (maquette Impayes : cellule par échéance) ------------------------------ */
.gs-impaye-cellule { display: inline-block; min-width: 44px; padding: 3px 6px; border-radius: 6px; font-size: .78rem; font-weight: 600; text-align: center; color: #fff; }
.gs-impaye-cellule.is-payee { background: var(--brand-primary); }
.gs-impaye-cellule.is-reliquat { background: #f59e0b; }
.gs-impaye-cellule.is-echue { background: #dc2626; }
.gs-impaye-cellule.is-avenir { background: var(--gray-100); color: var(--gray-400); min-width: 24px; }
.gs-impaye-legende { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 10px; font-size: .8rem; color: var(--gs-muted); }
.gs-impaye-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.gs-impaye-legende .is-payee { background: var(--brand-primary); } .gs-impaye-legende .is-reliquat { background: #f59e0b; } .gs-impaye-legende .is-echue { background: #dc2626; } .gs-impaye-legende .is-avenir { background: var(--gray-300); }
/* ---- Tableau de bord (maquette Main) ------------------------------------------------- */
.gs-kpi-success { border-left: 4px solid var(--brand-primary); }
.gs-kpi-warning { border-left: 4px solid #f59e0b; }
.gs-kpi-danger { border-left: 4px solid #dc2626; }
.gs-kpi-barre { height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
.gs-kpi-barre > div { height: 100%; border-radius: 3px; }
/* Tableau de bord : à gauche une colonne qui empile Encaissements du jour, À faire et Finances
   (elle remplit la hauteur du recouvrement par classe à droite, souvent 20 à 30 classes) ; en
   bas, une grille qui s'adapte au nombre de cartes (Effectifs, Sites) — plus de carte seule sur
   un tiers de ligne. Le conteneur principal accepte de rétrécir sous son contenu minimal
   (min-width: 0), sinon la page déborde de 14 px sur téléphone. */
.main-area { min-width: 0; }
.gs-dash-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); gap: 16px; margin-top: 16px; align-items: start; }
.gs-dash-colonne { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gs-dash-grille-auto { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }  /* min() : jamais plus large que le conteneur sur téléphone */
.gs-dash-table td, .gs-dash-table th { padding: 8px 10px; font-size: .86rem; }
.gs-dash-table .gs-dash-objet { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le conteneur des barres (Charts.hBars) porte un display/gap inline : !important nécessaire. */
/* Deux colonnes de barres quand la CARTE est assez large (requête de conteneur) : sur tablette
   la carte occupe toute la largeur et retrouve ses deux colonnes ; à 1440 px elle fait 3/8. */
.gs-dash-barres { container-type: inline-size; }
.gs-dash-classes-2col .hbar-row > div:first-child { margin-bottom: 2px !important; }
/* Seuil = largeur intérieure de la carte : ~387 px à 1440 px (3/8 du contenu), pleine largeur
   sur tablette ; deux colonnes de ~180 px suffisent aux barres. */
@container (min-width: 380px) { .gs-dash-classes-2col .gs-dash-barres > div { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px !important; } }
.gs-afaire { list-style: none; margin: 0; padding: 0; }
.gs-afaire li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--gray-200); }
.gs-afaire li:last-child { border-bottom: 0; }
.gs-afaire a { color: inherit; }
.gs-cycles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.gs-cycles > div { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--gray-200); border-radius: 10px; }
@media (max-width: 1100px) { .gs-dash-grille:not(.gs-dash-grille-auto) { grid-template-columns: 1fr; } }  /* la grille du bas garde son auto-adaptation sur tablette */

/* Paie (#72) : cellules éditables de l'état de paie et de la grille d'émargement ; fiche agent. */
.gs-paie-input { padding: 4px 6px; border: 1px solid var(--gray-300); border-radius: 6px; font: inherit; text-align: right; }
.gs-paie-input:focus { outline: 2px solid var(--brand-primary-bg); border-color: var(--brand-primary); }
.gs-fiche-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.gs-fiche-dl dt { color: var(--gs-muted); }
.gs-fiche-dl dd { margin: 0; }

/* Instance de démonstration (#94) : bandeau dans l'app, comptes en un clic à la connexion. */
.gs-demo-banner { background: var(--brand-secondary-bg); color: var(--brand-secondary-dark); border-bottom: 1px solid var(--brand-secondary-light); padding: 6px 16px; font-size: .82rem; text-align: center; }
.gs-demo-banner a { color: inherit; font-weight: 600; }

/* Bannière d'abonnement suspendu (#134) — même gabarit que celle de la démonstration, en
   registre d'alerte : l'accès va s'arrêter, ce n'est pas une information de courtoisie. */
.gs-abo-banner { background: var(--status-danger-bg); color: var(--status-danger-fg); border-bottom: 1px solid var(--status-danger-fg); padding: 6px 16px; font-size: .82rem; text-align: center; }
.gs-abo-banner a { color: inherit; font-weight: 700; text-decoration: underline; }
.gs-demo { margin: 0 0 14px; padding: 10px 12px; background: var(--brand-secondary-bg); border: 1px solid var(--brand-secondary-light); border-radius: 8px; }
.gs-demo-titre { margin: 0 0 8px; font-size: .8rem; color: var(--brand-secondary-dark); }
.gs-demo-titre code { background: #fff; padding: 1px 5px; border-radius: 4px; }
.gs-demo-comptes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.gs-demo-compte { text-align: left; padding: 6px 8px; background: #fff; border: 1px solid var(--gs-line); border-radius: 6px; cursor: pointer; font: inherit; line-height: 1.25; }
.gs-demo-compte:hover, .gs-demo-compte:focus { border-color: var(--brand-primary); outline: none; }
.gs-demo-compte strong { display: block; font-size: .82rem; color: var(--gs-ink); }
.gs-demo-compte span { font-size: .72rem; color: var(--gs-muted); }

/* Barre d'outils : les actions (date + boutons de la fiche abonnement, #133) s'enroulent au lieu
   de déborder du document sous 375px ; `min-width: 0` pour que l'item flex puisse rétrécir
   (review Copilot PR #136, /frontend-responsive règle 2). */
.toolbar .toolbar-actions { flex-wrap: wrap; min-width: 0; align-items: center; }
@media (max-width: 900px) { .toolbar .toolbar-actions { width: 100%; margin-left: 0; } }

/* DatePicker dans un formulaire (#137) : même largeur et même hauteur que les autres champs du
   groupe (`.form-group input` impose width:100% et une bordure à l'input interne : neutralisé). */
.form-group .dp { display: block; width: 100%; }
.form-group .dp-field { display: flex; align-items: center; width: 100%; }
.form-group .dp-field .dp-input { flex: 1 1 auto; width: auto; min-width: 0; border: none; box-shadow: none; background: transparent; padding: .625rem .875rem; font-size: inherit; line-height: inherit; color: inherit; }
.form-group .dp-field .dp-input:focus { border: none; box-shadow: none; }
.form-group .dp-field .dp-cal-btn { flex: 0 0 auto; padding: .35rem .75rem; }

/* ---- Fiches et tableaux lisibles, surtout sur téléphone (#204) ------------------------------
   Relevé sur la fiche prospect : actions en vrac, fiche en colonne interminable de « — », tableau
   dans une carte dans une carte dont les actions fuyaient hors écran, état vide d'un écran. */

/* Fiche : paires libellé / valeur compactes (Fiche.render), grille qui s'adapte seule. */
.gs-fiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 24px; margin: 0; }
.gs-fiche-item { min-width: 0; }
.gs-fiche-large { grid-column: 1 / -1; }
.gs-fiche dt { font-size: .75rem; font-weight: 600; color: var(--gs-muted); margin: 0 0 2px; }
.gs-fiche dd { margin: 0; font-size: .92rem; overflow-wrap: break-word; }
.gs-fiche-vide { margin: 0; font-size: .9rem; }

/* Un cadre n'en contient pas un autre : dans une section, le DataTable abandonne le sien. */
.gs-card .dt-card, .card-body .dt-card { border: 0; box-shadow: none; border-radius: 0; background: transparent; }

/* Un montant ou un numéro de pièce ne se coupe jamais dans un tableau : « 540 000 / FCFA » ou
   « PF-26- / 000001 » à 900 px. Faute de place, le tableau défile dans son propre cadre. */
.data-table .num { white-space: nowrap; }

/* Filtres d'une barre d'outils : sur grand écran, le conteneur s'efface (les chips restent des
   éléments de la barre, disposition inchangée) et le bouton « Filtres » n'existe pas. */
.toolbar-filtres { display: contents; }
.toolbar-filtres-bouton { display: none; }

/* Chip de filtre : jamais plus large que l'écran. Son libellé de valeur passe à la ligne plutôt
   que de pousser la page — « Recouvrement : Familles (hors organismes payeurs) » débordait de
   48 px à 375 px au tableau de bord. Le menu ouvert reste lui aussi dans l'écran. */
.chip { max-width: 100%; }
.chip-select .dd, .chip-select .dd-trigger { min-width: 0; max-width: 100%; }
.chip-select .dd-label { white-space: normal; overflow-wrap: anywhere; }
.chip-select .dd-menu { max-width: calc(100vw - 32px); }
.chip-select .dd-menu .dd-option { white-space: normal; }

/* Étape vide du pipeline : son en-tête et son « 0 » suffisent. */
.pipeline-colonne-vide { opacity: .7; }

/* Colonne réservée à la carte mobile (`carteSeule`) : absente du tableau sur grand écran. */
.data-table th.dt-carte-seule, .data-table td[data-carte-seule] { display: none; }
/* Pastilles d'échéances : le résumé des impayés dans une carte, une pastille par échéance. */
.gs-pastilles { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; max-width: 100%; }
.gs-pastilles .gs-impaye-cellule { min-width: 0; padding: 1px 5px; border-radius: 4px; font-size: .66rem; font-weight: 600; }

/* Sections d'une fiche : un titre et son contenu, espacées d'un rythme constant. */
.gs-fiche-section { margin-top: 16px; }

/* État vide d'une section : discret, il ne réclame pas un écran. */
.empty-state-compact { padding: 1.25rem 1rem; }
.empty-state-compact i { font-size: 1.5rem; margin-bottom: .5rem; }
.empty-state-compact .empty-state-action { margin-top: .75rem; }

/* Retour : un lien au-dessus du titre, pas un bouton de plus parmi les actions. */
.page-retour { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .35rem; font-size: .82rem; color: var(--gs-muted); text-decoration: none; }
.page-retour:hover { color: var(--brand-primary-dark); }

@media (max-width: 640px) {
    .gs-fiche { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
    .gs-fiche-longue { grid-column: 1 / -1; }

    /* Groupes d'actions (en-tête de page, en-tête de fiche, actions de carte) : boutons resserrés en
       lignes pleines, l'action principale sur toute la largeur pour qu'elle se détache. La fiche
       élève alignait six boutons sur cinq lignes. Pas de `order` : l'ordre à l'écran reste celui du
       document, que suit le focus au clavier (review PR #205). */
    .page-header .actions, .gs-fiche-actions, .gs-card-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
    .page-header .actions > .btn, .gs-fiche-actions > .btn, .gs-card-actions > .btn { flex: 1 1 auto; justify-content: center; padding: .55rem .75rem; font-size: .84rem; }
    .page-header .actions > .btn-primary, .gs-fiche-actions > .btn-primary, .gs-card-actions > .btn-primary { flex-basis: 100%; }

    /* Barre d'outils : la recherche prend toute la largeur, les filtres se rangent dessous. */
    .toolbar .search-box { flex: 1 1 100%; }
    .toolbar .search-input { width: 100%; }

    /* Onglets : tous visibles, sur deux lignes s'il le faut, plutôt qu'un défilement horizontal
       qui cachait « Historique » sans autre indice qu'une fine barre. Les icônes s'effacent. */
    /* row-gap : le soulignement (margin-bottom -2px) d'une ligne d'onglets ne mord pas sur la
       suivante (mesure de chevauchement, smoke du 3 oct. 2026). */
    .tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 4px; }
    .tabs .tab, .tabs .tab-btn { flex: 1 1 auto; justify-content: center; padding: .6rem .75rem; font-size: .84rem; }
    .tabs .tab > i, .tabs .tab-btn > i { display: none; }

    /* Tableau en cartes : une ligne = une carte. La 1re colonne en est le titre, chaque autre
       cellule porte son libellé (data-label) à gauche et sa valeur à droite ; la colonne
       d'actions (libellé vide) prend toute la largeur. Flottant plutôt que flex : le contenu
       d'une cellule (badge + motif) garde son propre flux. */
    .data-table-cartes thead { display: none; }
    .data-table-cartes, .data-table-cartes tbody, .data-table-cartes tr { display: block; width: 100%; }
    .data-table-cartes tbody tr { padding: 12px 14px; border-bottom: 1px solid var(--gs-line); }
    .data-table-cartes tbody tr:last-child { border-bottom: 0; }
    .gs-card .data-table-cartes tbody tr { padding-left: 0; padding-right: 0; }  /* la section porte déjà la marge */
    .data-table-cartes tbody td { display: block; width: auto; padding: 3px 0; border: 0; text-align: right; overflow-wrap: anywhere; }
    .data-table-cartes tbody td::before { content: attr(data-label); float: left; margin-right: 12px; max-width: 45%; text-align: left; font-size: .75rem; font-weight: 600; line-height: 1.7; color: var(--gs-muted); }
    .data-table-cartes tbody td::after { content: ""; display: table; clear: both; }
    .data-table-cartes tbody td:first-child { text-align: left; font-size: .95rem; padding-bottom: 6px; }
    .data-table-cartes tbody td:first-child::before, .data-table-cartes tbody td[data-label=""]::before { content: none; }
    /* Titre désigné (colonne `titre: true`) : il passe en tête de la carte, la première colonne
       redevient une ligne libellée comme les autres. */
    .dt-titre-explicite tbody tr { display: flex; flex-direction: column; }
    .dt-titre-explicite tbody td[data-titre] { order: -1; text-align: left; font-size: .95rem; padding-bottom: 6px; }
    .dt-titre-explicite tbody td[data-titre]::before { content: none; }
    /* `:not([data-coin])` : une case de coin en première colonne garde son rendu de coin, sans
       libellé — plus spécifique, cette règle lui rendait « Active » tassé contre la case (#176). */
    .dt-titre-explicite tbody td:first-child:not([data-titre]):not([data-coin]) { text-align: right; font-size: inherit; padding-bottom: 3px; }
    .dt-titre-explicite tbody td:first-child:not([data-titre]):not([data-coin])::before { content: attr(data-label); }
    .data-table-cartes tbody td[data-label=""] { text-align: left; padding-top: 8px; }
    /* Fiche élève, onglet Notes (#178) : les pastilles d'une matière s'alignent à droite, face
       à leur libellé, comme les autres valeurs d'une carte. */
    .notes-fiche .notes-fiche-pastilles { justify-content: flex-end; }
    .data-table-cartes tbody td:empty { display: none; }
    .data-table-cartes tbody td[data-hors-carte] { display: none; }
    .data-table-cartes tbody td[data-carte-seule] { display: block; }
    .data-table-cartes tbody tr { position: relative; }
    .data-table-cartes tbody td[data-coin] { position: absolute; top: 12px; right: 0; padding: 0; }
    .data-table-cartes tbody td[data-coin]::before { content: none; }
    .data-table-cartes:not(.gs-card *) tbody td[data-coin] { right: 14px; }
    .data-table-cartes tbody tr:has(td[data-coin]) td[data-titre],
    .data-table-cartes:not(.dt-titre-explicite) tbody tr:has(td[data-coin]) td:first-child { padding-right: 32px; }

    /* Filtres repliés derrière un bouton ; ouverts, ils se rangent sur toute la largeur. */
    .toolbar-filtres-bouton { display: inline-flex; }
    .toolbar-filtres { display: none; }
    .toolbar-filtres.ouverts { display: flex; flex-wrap: wrap; gap: .5rem; width: 100%; }
}

/* Affectations (#177) : les sélecteurs d'enseignant d'une grille ont tous la même largeur,
   quel que soit le nom choisi — sinon la colonne se décale à chaque changement. */
#aff-grille .dd { width: min(100%, 280px); }
#aff-grille .dd-trigger { width: 100%; min-width: 0; }

/* Saisie des notes (#178) : grille au clavier. Elle défile dans son cadre, jamais la page ; la
   colonne des élèves reste visible quand on défile vers les évaluations de droite. */
.notes-grille-cadre { border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--gs-surface); }
.notes-grille { border-collapse: collapse; width: 100%; font-size: .9rem; }
.notes-grille th, .notes-grille td { padding: 6px 8px; border-bottom: 1px solid var(--gray-200); vertical-align: middle; }
.notes-grille thead th { text-align: left; font-weight: 600; background: var(--gray-50, var(--gs-surface)); vertical-align: bottom; }
.notes-grille .notes-eleve { position: sticky; left: 0; z-index: 1; background: var(--gs-surface); text-align: left; font-weight: 500; white-space: nowrap; }
.notes-grille .notes-rang { display: inline-block; min-width: 1.6em; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.notes-grille .notes-eval { min-width: 120px; }
.notes-eval-titre { white-space: nowrap; }
.notes-eval-sous { font-size: .75rem; font-weight: 400; white-space: nowrap; }
.notes-eval-actions { display: inline-flex; gap: 4px; margin-top: 4px; }
.notes-grille .notes-case { text-align: right; }
.notes-grille .notes-moyenne { text-align: right; white-space: nowrap; }
.notes-input { height: 36px; width: 84px; text-align: right; }
.notes-input.invalide { border-color: var(--status-danger-fg); background: var(--status-danger-bg); }
.notes-choix { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.notes-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-top: 12px; }
/* Onglet « Notes » de la fiche élève (#178) : une pastille par évaluation, qui s'enroule. */
.notes-fiche-periode + .notes-fiche-periode { margin-top: 16px; }
.notes-fiche .notes-fiche-matiere { font-weight: 500; }
.notes-fiche-sous { font-size: .75rem; font-weight: 400; }
.notes-fiche-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.note-fiche { display: inline-flex; flex-direction: column; align-items: center; min-width: 64px; padding: 3px 8px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.note-fiche small { font-size: .7rem; color: var(--gray-500); white-space: nowrap; }
.note-fiche small.note-fiche-detail { white-space: normal; max-width: 16ch; text-align: center; overflow-wrap: anywhere; }
.note-fiche-absent strong, .note-fiche-vide strong { color: var(--gray-500); font-weight: 500; }
.notes-fiche td.num { white-space: nowrap; }

/* Écoles de l'éditeur (#218) : une carte par école, en grille ; une colonne sur téléphone. */
.gs-ecoles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; align-items: start; }
.gs-ecole { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; min-width: 0; }
.gs-ecole-tete { display: flex; align-items: flex-start; gap: 10px; }
.gs-ecole-pastille { flex: none; width: 14px; height: 14px; border-radius: 4px; margin-top: 4px; }
.gs-ecole-nom { min-width: 0; overflow-wrap: anywhere; }
.gs-ecole-nom strong { font-size: 1rem; }
.gs-ecole .gs-muted { font-size: .8rem; overflow-wrap: anywhere; }
.gs-ecole-adresse { font-size: .85rem; overflow-wrap: anywhere; }
.gs-ecole-titre { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gs-muted); margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--gs-line); }
.gs-ecole-admins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gs-ecole-admin { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.gs-ecole-admin-qui { min-width: 0; }
.gs-ecole-pied { padding-top: 10px; border-top: 1px solid var(--gs-line); }
/* Formulaires de mise en service et d'invitation : champs resserrés (l'espacement du socle, prévu
   pour des formulaires de quelques champs, étalait ces treize champs sur trois écrans). */
#ecole-form .ff-section > [class^="grid-"] { row-gap: 14px; margin-bottom: 0; }
#ecole-form .form-group { margin-bottom: 0; }
#ecole-form .ff-section + .ff-section { margin-top: 14px; }