/* Application de La Fraternité, styles communs (parent, administration, Super Administration, connexion)
   Les couleurs --brand / --brand-2 / --accent sont injectées depuis les paramètres de l'école. */

/* ====== Police Uni Sans, hébergée dans l'application (aucun service externe) ======
   Fichiers réduits aux caractères du français (accents, ligatures œ, guillemets « », espaces fines), affichage immédiat (swap).
   Correspondance des graisses (les fichiers déclarent tous 400, la correspondance est donc fixée ici) :
   Book 300 · Regular 400 · Italic 400 · SemiBold 600 · Bold 700 · Heavy 800. */
@font-face { font-family: 'Uni Sans'; src: url('/fonts/uni-sans/uni-sans-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Uni Sans'; src: url('/fonts/uni-sans/uni-sans-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Uni Sans'; src: url('/fonts/uni-sans/uni-sans-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---- Système typographique : chaque rôle a une graisse, une taille et un interlignage ---- */
  --font: 'Uni Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font);
  /* Graisses Uni Sans et leur rôle : Book (secondaire, légendes), Regular (texte courant), SemiBold (sous-titres, boutons, montants de tableau),
     Bold (titres, montants clés), Heavy (grands titres d'accueil et chiffres des statistiques uniquement). Thin et Light ne sont pas utilisées. */
  --fw-light: 300; --fw-book: 300; --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  /* Échelle de six tailles */
  --fs-1: .75rem;   /* 12 px : micro-libellés (barre d'onglets, badges, jours de la semaine) */
  --fs-2: .875rem;  /* 14 px : secondaire, légendes, aides */
  --fs-3: 1rem;     /* 16 px : texte courant, champs (évite le zoom automatique de Safari) */
  --fs-4: 1.125rem; /* 18 px : titres de sections et de cartes */
  --fs-5: 1.375rem; /* 22 px : titre d'écran, montants clés */
  --fs-6: 1.75rem;  /* 28 px : chiffres des statistiques, grands titres d'accueil */
  --lh-tight: 1.2; --lh-snug: 1.35; --lh-body: 1.55;
  /* Rôles (graisse, taille, interlignage) */
  --t-titre-ecran: var(--fw-bold) var(--fs-5) / var(--lh-tight) var(--font);
  --t-titre-section: var(--fw-semibold) var(--fs-4) / var(--lh-snug) var(--font);
  --t-montant: var(--fw-bold) var(--fs-5) / var(--lh-tight) var(--font);
  --t-statistique: var(--fw-heavy) var(--fs-6) / var(--lh-tight) var(--font);
  --t-texte: var(--fw-regular) var(--fs-3) / var(--lh-body) var(--font);
  --t-libelle: var(--fw-regular) var(--fs-2) / var(--lh-snug) var(--font);
  --t-secondaire: var(--fw-light) var(--fs-2) / var(--lh-snug) var(--font);
  --t-legende: var(--fw-light) var(--fs-1) / var(--lh-snug) var(--font);
  --t-bouton: var(--fw-semibold) var(--fs-3) / var(--lh-tight) var(--font);
  --t-badge: var(--fw-semibold) var(--fs-1) / var(--lh-tight) var(--font);
  --t-chapeau: var(--fw-regular) var(--fs-2) / var(--lh-snug) var(--font); /* texte sous un titre */
  /* Gestion financière et Facturier : tableaux denses, montants alignés à droite */
  --t-fin-entete: var(--fw-semibold) var(--fs-1) / var(--lh-tight) var(--font);
  --t-fin-cellule: var(--fw-regular) var(--fs-2) / var(--lh-snug) var(--font);
  --t-fin-montant: var(--fw-semibold) var(--fs-2) / var(--lh-snug) var(--font);
  --t-fin-total: var(--fw-bold) var(--fs-3) / var(--lh-tight) var(--font);
  --brand: #1F5C4A; --brand-2: #E3A72F; --accent: #B5462E;
  /* Couleurs dérivées : valeurs fixes lisibles par tous les navigateurs (le script les recalcule aux couleurs de l'école).
     Les navigateurs récents les recalculent aussi en CSS (bloc @supports plus bas). */
  --brand-ink: #194B3D;
  --brand-soft: #EBF0EF;
  --brand-2-soft: #FAEFDA;
  --accent-soft: #F8ECEA;
  --brand-line: #C7D6D2;
  --brand-msg-line: #BEC4B4;
  --brand-2-line: #E4C27F;
  --brand-a20: rgba(31,92,74,0.2); --brand-a25: rgba(31,92,74,0.25); --brand-a35: rgba(31,92,74,0.35);
  --bg: #F8F4EC; --surface: #FFFFFF; --surface-2: #F3EEE4; --line: #E6DECF; --line-strong: #D3C8B5;
  --ink: #2A251F; --ink-2: #5E554A; --ink-3: #8A7F70;
  --ok: #2F7A4F; --ok-soft: #E4F2E9; --warn: #A86A00; --warn-soft: #FBF0D9; --danger: #B3352B; --danger-soft: #FBE7E4; --info: #2E62A3; --info-soft: #E5EEF9;
  --radius: 16px; --radius-sm: 10px; --shadow: 0 1px 2px rgba(42,37,31,.06), 0 4px 16px rgba(42,37,31,.06);
  --weave: repeating-linear-gradient(90deg, var(--brand-2) 0 10px, var(--brand) 10px 14px, var(--accent) 14px 20px, var(--brand) 20px 24px);
}
/* Navigateurs récents (Chrome 111+, Safari 16.2+) : couleurs dérivées calculées en CSS. Les plus anciens gardent les valeurs fixes ci-dessus. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root:not([data-theme-js]) {
    --brand-ink: color-mix(in srgb, var(--brand) 82%, #000);
    --brand-soft: color-mix(in srgb, var(--brand) 9%, #fff);
    --brand-2-soft: color-mix(in srgb, var(--brand-2) 18%, #fff);
    --accent-soft: color-mix(in srgb, var(--accent) 10%, #fff);
    --brand-line: color-mix(in srgb, var(--brand) 25%, #fff);
    --brand-msg-line: color-mix(in srgb, var(--brand) 20%, var(--line));
    --brand-2-line: color-mix(in srgb, var(--brand-2) 50%, var(--line));
    --brand-a20: color-mix(in srgb, var(--brand) 20%, transparent);
    --brand-a25: color-mix(in srgb, var(--brand) 25%, transparent);
    --brand-a35: color-mix(in srgb, var(--brand) 35%, transparent);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--t-texte); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; }
h1 { font: var(--t-titre-ecran); } h2 { font: var(--t-titre-section); } h3 { font-weight: var(--fw-semibold); font-size: var(--fs-3); line-height: var(--lh-snug); }
b, strong { font-weight: var(--fw-semibold); }
p { margin: 0 0 .75rem; }
a { color: var(--brand); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
.muted { color: var(--ink-2); } .small { font-size: var(--fs-2); } .tiny { font: var(--t-legende); } .small.muted { font-weight: var(--fw-light); }
/* Rôles typographiques réutilisables */
.t-titre-ecran { font: var(--t-titre-ecran); } .t-titre-section { font: var(--t-titre-section); } .t-montant { font: var(--t-montant); font-variant-numeric: tabular-nums; }
.t-statistique { font: var(--t-statistique); font-variant-numeric: tabular-nums; } .t-texte { font: var(--t-texte); } .t-libelle { font: var(--t-libelle); } .t-bouton { font: var(--t-bouton); } .t-badge { font: var(--t-badge); } .t-secondaire { font: var(--t-secondaire); } .t-legende { font: var(--t-legende); } .center { text-align: center; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.stack > * + * { margin-top: 12px; } .stack-lg > * + * { margin-top: 20px; }
.row { display: flex; gap: 10px; align-items: center; } .row.wrap { flex-wrap: wrap; } .spacer { flex: 1; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.weave { height: 5px; background: var(--weave); }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent;
  background: var(--brand); color: #fff; font: var(--t-bouton); cursor: pointer; text-decoration: none; transition: filter .15s, transform .05s; -webkit-tap-highlight-color: transparent; }
.btn:hover { filter: brightness(1.07); } .btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary { background: var(--surface); color: var(--brand-ink); border-color: var(--line-strong); }
.btn.ghost { background: transparent; color: var(--brand-ink); }
.btn.danger { background: var(--danger); }
.btn.warn { background: var(--brand-2); color: #2A1E00; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: var(--fs-2); border-radius: 10px; }
.btn.block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; display: inline-grid; place-items: center; cursor: pointer; color: inherit; position: relative; }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font: var(--t-badge); display: grid; place-items: center; border: 2px solid var(--brand); }

/* Formulaires */
label.field { display: block; }
label.field > span { display: block; font: var(--t-libelle); margin-bottom: 6px; color: var(--ink); }
label.field > small { display: block; color: var(--ink-3); font: var(--t-secondaire); margin-top: 4px; }
.input, select.input, textarea.input { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: #fff; outline: none; }
textarea.input { min-height: 110px; resize: vertical; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-a20); }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.form-error { background: var(--danger-soft); color: var(--danger); border-radius: 10px; padding: 10px 12px; font-weight: var(--fw-regular); font-size: var(--fs-2); }

/* Cartes et listes */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.card.flat { box-shadow: none; }
.card-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-title h2, .card-title h3 { flex: 1; }
.list { list-style: none; margin: 0; padding: 0; }
.list > li + li { border-top: 1px solid var(--line); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: var(--t-badge); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.chip.brand { background: var(--brand-soft); color: var(--brand-ink); }
.chip.gold { background: var(--brand-2-soft); color: #6B4A00; }
.chip.accent { background: var(--accent-soft); color: var(--accent); }
.chip.ok { background: var(--ok-soft); color: var(--ok); } .chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.danger { background: var(--danger-soft); color: var(--danger); } .chip.info { background: var(--info-soft); color: var(--info); }
.demo-flag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px; font: var(--t-badge); letter-spacing: .04em; text-transform: uppercase;
  background: repeating-linear-gradient(45deg, #FFF3D1 0 6px, #FBE7B0 6px 12px); color: #7A5300; border: 1px dashed #D7A836; }
.notice { border-radius: 12px; padding: 12px 14px; background: var(--info-soft); color: #1F4474; font-size: var(--fs-2); }
.notice.demo-note, .demo-note { font: var(--t-secondaire); }
.notice.warn { background: var(--warn-soft); color: #6E4700; } .notice.ok { background: var(--ok-soft); color: #1E5535; }
.empty { text-align: center; padding: 28px 16px; color: var(--ink-2); }
.empty svg { width: 40px; height: 40px; color: var(--ink-3); margin: 0 auto 8px; }

/* Catégories du calendrier */
.cat-composition { --c: #B3352B; --ct: #fff; } .cat-devoir { --c: #2E62A3; --ct: #fff; } .cat-reunion { --c: #7A4FA0; --ct: #fff; } .cat-activite { --c: #2F7A4F; --ct: #fff; } .cat-conge { --c: #E3A72F; --ct: #2A1E00; } .cat-autre { --c: #6B6255; --ct: #fff; }
/* Calendrier officiel */
.cat-ferie { --c: #C2185B; --ct: #fff; } .cat-examen { --c: #00838F; --ct: #fff; } .cat-rentree { --c: #455A64; --ct: #fff; } .cat-repere { --c: #6D4C41; --ct: #fff; }
.off-badge { display: inline-flex; align-items: center; gap: 4px; font: var(--t-badge); padding: 2px 8px; border-radius: 999px; background: #182A42; color: #fff; }
.cat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); display: inline-block; flex: none; }
.cat-tag { display: inline-flex; align-items: center; gap: 6px; font: var(--t-badge); color: var(--c); }

/* Fenêtre modale / feuille (mobile) */
.overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(30,24,18,.45); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: fade .15s; }
.sheet { background: var(--surface); width: 100%; max-width: 640px; max-height: 92vh; overflow: auto; border-radius: 20px 20px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); animation: up .2s ease-out; }
.sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sheet-head h2 { flex: 1; }
@media (min-width: 760px) { .overlay { align-items: center; } .sheet { border-radius: 20px; max-width: 680px; } .sheet.wide { max-width: 960px; } }
@keyframes fade { from { opacity: 0; } } @keyframes up { from { transform: translateY(24px); opacity: .6; } }
.toast-zone { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80; display: grid; gap: 8px; width: min(92vw, 440px); }
.toast { background: #2A251F; color: #fff; border-radius: 12px; padding: 12px 16px; font-weight: var(--fw-semibold); box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: up .2s; }
.toast.error { background: var(--danger); } .toast.ok { background: var(--ok); }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand); animation: spin .8s linear infinite; margin: 30px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ====== Carte scolaire (SVG, mêmes coordonnées que le badge PDF) ====== */
.school-card { position: relative; width: 100%; aspect-ratio: 85.6 / 54; border-radius: 3.5% / 5.5%; overflow: hidden; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 12px 32px rgba(42,37,31,.16); }
.school-card svg { display: block; width: 100%; height: 100%; }
.ic svg { width: 1.15em; height: 1.15em; }

/* ====== Compatibilité : anciennes valeurs écrites directement dans certains écrans ======
   Elles sont ramenées aux rôles du système typographique (à retirer au fil des prochaines modifications de ces écrans). */
[style*="font-weight: 700"], [style*="font-weight: 600"], [style*="font-weight: 800"] { font-weight: var(--fw-semibold) !important; }
[style*="font-size: 1.3rem"], [style*="font-size: 1.35rem"] { font-size: var(--fs-5) !important; }
[style*="font-size: 1.2rem"], [style*="font-size: 1.1rem"] { font-size: var(--fs-4) !important; }
[style*="font-size: 0.9rem"] { font-size: var(--fs-2) !important; }
[style*="font-size: 0.78rem"] { font-size: var(--fs-1) !important; }