/* =============================================================================
   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; }

/* ---- 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. */
.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; }
.gs-h2 { flex-wrap: wrap; }
@media (max-width: 640px) {
    .gs-kpi-row { grid-template-columns: 1fr; }
    .gs-kpi-value { font-size: 1.5rem; }
    .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, 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: 1fr 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); }
.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; }
.gs-dash-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); gap: 16px; margin-top: 16px; align-items: start; }
.gs-dash-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.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. */
.gs-dash-classes-2col .gs-dash-barres > div { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px !important; }
.gs-dash-classes-2col .hbar-row > div:first-child { margin-bottom: 2px !important; }
@media (max-width: 1400px) { .gs-dash-classes-2col .gs-dash-barres > div { grid-template-columns: 1fr; } }
.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(2, 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, .gs-dash-grille-3 { grid-template-columns: 1fr; } }

/* 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; }