/* ============================================================================
   MON ÉCOLE + — Fondations du design system
   Palette : Bleu institutionnel / Vert / Blanc / Or sahélien / Orange discret
   Typo : Sora (display) + Inter (texte) + IBM Plex Mono (données)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
    /* Couleurs de marque */
    --navy: #0A2540;
    --navy-light: #123456;
    --blue: #0B5FA0;
    --blue-dark: #084677;
    --blue-tint: #E8F1FA;
    --green: #1C9B6E;
    --green-tint: #E4F5EE;
    --gold: #D9A94E;
    --gold-tint: #FBF3E1;
    --orange: #E2883E;

    --cream: #F7F9FB;
    --white: #FFFFFF;
    --ink: #1B2B3A;
    --ink-soft: #52697D;
    --ink-faint: #8A9AAA;
    --border: #E3E9EF;

    /* Typographie */
    --font-display: 'Sora', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* Rayons et ombres */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;
    --shadow-sm: 0 2px 10px rgba(10, 37, 64, 0.06);
    --shadow-md: 0 12px 32px rgba(10, 37, 64, 0.10);
    --shadow-lg: 0 24px 60px rgba(10, 37, 64, 0.16);

    --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--navy);
    line-height: 1.15;
    margin: 0 0 .5em;
}

h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3, h4 { font-weight: 600; }

p { margin: 0 0 1em; color: var(--ink-soft); }

a { color: var(--blue); text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.eyebrow::before {
    content: '';
    width: 22px; height: 2px;
    background: var(--orange);
    display: inline-block;
    border-radius: 2px;
}

.section { padding: 88px 0; }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); }
.section-head p { font-size: 17px; }

/* Boutons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    padding: 14px 26px;
    border-radius: var(--radius-pill);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 8px 22px rgba(11, 95, 160, .28);
}
.btn-primary:hover { background: var(--blue-dark); box-shadow: 0 10px 26px rgba(11, 95, 160, .36); }

.btn-gold {
    background: var(--gold);
    color: var(--navy);
    box-shadow: 0 8px 22px rgba(217, 169, 78, .35);
}
.btn-gold:hover { filter: brightness(1.05); }

.btn-outline {
    background: transparent;
    color: var(--navy);
    border: 1.5px solid var(--border);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }

.btn-white {
    background: #fff;
    color: var(--navy);
}
.btn-white:hover { background: var(--gold-tint); }

.btn-sm { padding: 9px 18px; font-size: 13.5px; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
}
.badge-blue { background: var(--blue-tint); color: var(--blue); }
.badge-green { background: var(--green-tint); color: var(--green); }
.badge-gold { background: var(--gold-tint); color: #9c7726; }

.card {
    background: #fff;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Formulaires et alertes génériques (réutilisés par landing, auth et dashboard) */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.field input, .field textarea, .field select {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: 14.5px; background: #fff; color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); outline: none; }
.field input:disabled { background: var(--cream); color: var(--ink-faint); }
.field textarea { resize: vertical; min-height: 120px; }

.alert { padding: 13px 16px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 18px; }
.alert-success { background: var(--green-tint); color: #146142; }
.alert-error { background: #FDECEB; color: #A3302A; }

::selection { background: var(--gold); color: var(--navy); }

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}