/* ============================================================
   Complexe Scolaire Louise-Thérèse de Montaignac
   Design system « Le Registre » — cycle École (FIVE SARL)
   Inspiration linear.app (précis, dense, accessible) + identité bleu/rouge/or.
   WCAG 2.1 AA. CSS variables uniquement.
   Polices : Fraunces (display, serif académique) + IBM Plex Sans (corps).
   ============================================================ */
:root{
  /* Identité école */
  --bleu:#0b2e6b;          /* bleu uniforme (primaire) */
  --bleu-700:#123a82;
  --bleu-600:#1a4fa0;
  --bleu-100:#e8eefb;
  --bleu-050:#f3f6fd;
  --rouge:#c1121f;         /* rouge uniforme (accent/alerte) */
  --rouge-700:#8a0d17;
  --rouge-050:#fdeced;
  --or:#c79a1e;            /* or — hairlines & médailles (assombri pour contraste AA) */
  --or-050:#fbf5e4;

  /* Neutres (thème clair institutionnel) */
  --canvas:#f7f8fb;
  --surface:#ffffff;
  --surface-2:#fbfcfe;
  --ink:#0e1726;           /* texte principal — contraste AAA sur surface */
  --ink-muted:#475069;
  --ink-subtle:#6b7488;
  --hairline:#e4e8f0;
  --hairline-strong:#cdd4e2;

  /* Sémantique */
  --ok:#1a7f46;
  --ok-050:#e7f4ec;
  --warn:#9a6a00;
  --warn-050:#fdf3e0;
  --danger:var(--rouge);
  --danger-050:var(--rouge-050);
  --info:var(--bleu-600);

  /* Typo */
  --font-display:"Fraunces","Georgia",serif;
  --font-sans:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  /* Rayons */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  /* Ombres (discrètes) */
  --sh-1:0 1px 2px rgba(14,23,38,.06),0 1px 3px rgba(14,23,38,.04);
  --sh-2:0 4px 12px rgba(14,23,38,.08);
  --sh-3:0 18px 46px rgba(11,46,107,.16);

  /* Espacements */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--canvas);
  font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;color:var(--bleu)}
a{color:var(--bleu-600);text-decoration:none}
a:hover{text-decoration:underline}

/* Utilitaires */
.muted{color:var(--ink-muted)}
.subtle{color:var(--ink-subtle)}
.mono{font-family:var(--font-mono)}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.hairline{border:1px solid var(--hairline)}

/* Boutons */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-family:var(--font-sans);font-weight:600;font-size:14px;
  padding:10px 16px;border-radius:var(--r-md);border:1px solid transparent;
  cursor:pointer;transition:.15s ease;line-height:1;
}
.btn:focus-visible{outline:3px solid var(--bleu-100);outline-offset:1px}
.btn-primary{background:var(--bleu);color:#fff}
.btn-primary:hover{background:var(--bleu-700)}
.btn-danger{background:var(--rouge);color:#fff}
.btn-danger:hover{background:var(--rouge-700)}
.btn-ghost{background:transparent;color:var(--ink-muted);border-color:var(--hairline-strong)}
.btn-ghost:hover{background:var(--bleu-050);color:var(--bleu)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Champs */
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-muted);margin-bottom:6px;letter-spacing:.02em}
.input,select,textarea{
  width:100%;font:inherit;color:var(--ink);
  padding:10px 12px;border:1px solid var(--hairline-strong);border-radius:var(--r-md);
  background:var(--surface);transition:.15s;
}
.input:focus,select:focus,textarea:focus{outline:none;border-color:var(--bleu-600);box-shadow:0 0 0 3px var(--bleu-100)}

/* Badges / pills */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:3px 10px;border-radius:var(--r-pill);border:1px solid var(--hairline)}
.badge-ok{background:var(--ok-050);color:var(--ok);border-color:transparent}
.badge-warn{background:var(--warn-050);color:var(--warn);border-color:transparent}
.badge-danger{background:var(--danger-050);color:var(--rouge-700);border-color:transparent}
.badge-info{background:var(--bleu-050);color:var(--bleu);border-color:transparent}
.badge-demo{background:var(--or-050);color:#7a5c00;border-color:var(--or)}

/* Écusson */
.ecusson{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--bleu-600) 0 50%, var(--rouge) 50% 100%);
  border:2px solid var(--or);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-display);font-weight:700;font-size:14px;
}

/* Devise */
.devise{display:inline-flex;gap:8px;align-items:center;font-family:var(--font-display);
  font-weight:600;color:var(--bleu);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.devise .sep{color:var(--or)}

/* États */
.empty,.loading,.error{padding:var(--sp-6);text-align:center;color:var(--ink-subtle);font-size:14px}
.error{color:var(--rouge-700)}
.skel{background:linear-gradient(90deg,#eef1f7 25%,#f6f8fb 37%,#eef1f7 63%);
  background-size:400% 100%;animation:sk 1.2s ease infinite;border-radius:var(--r-sm)}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* Footer légal FIVE SARL */
.legal{font-size:11px;color:var(--ink-subtle);line-height:1.6}