/* ==========================================================================
   EvalNumérique — Système de design « Éditorial »
   Source unique de vérité, partagée par index.php et l'espace apprenant.
   Chargé APRÈS MDB : les quelques surcharges ci-dessous sont volontaires.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */
:root {
    /* Encre — la fondation. Du plus profond au plus léger. */
    --ink-900: #080D18;
    --ink-800: #0E1626;
    --ink-700: #1A2436;
    --ink-600: #2C3850;
    --ink-500: #4A5570;
    --ink-400: #6E7891;
    --ink-300: #9AA3B5;
    --ink-200: #C7CDD9;

    /* Papier — chaud, jamais gris bleuté. */
    --paper:     #FBFAF7;
    --surface:   #FFFFFF;
    --surface-2: #F5F3ED;
    --hairline:  rgba(8, 13, 24, 0.08);
    --hairline-strong: rgba(8, 13, 24, 0.14);

    /* Or — l'accent unique de la marque. */
    --gold-700: #8A6B1F;
    --gold-600: #A8842C;
    --gold-500: #C9A227;
    --gold-400: #DCBB50;
    --gold-300: #EBD68F;
    --gold-050: #FBF4DF;

    /* Sarcelle — l'action dans l'espace apprenant. */
    --teal-700: #0A5C50;
    --teal-600: #0E7C6B;
    --teal-500: #159685;
    --teal-050: #E7F3F1;

    /* Sémantique — réservé au sens, jamais à la décoration. */
    --pass-600: #1B7F4B;
    --pass-050: #E8F5EE;
    --fail-600: #B3261E;
    --fail-050: #FCECEA;
    --warn-600: #9A6700;
    --warn-050: #FFF6E0;

    /* Élévation — ombres teintées d'encre, jamais du noir pur. */
    --e1: 0 1px 2px rgba(8,13,24,.04), 0 1px 3px rgba(8,13,24,.05);
    --e2: 0 4px 14px -2px rgba(8,13,24,.07), 0 2px 6px -2px rgba(8,13,24,.04);
    --e3: 0 20px 44px -16px rgba(8,13,24,.20), 0 6px 16px -8px rgba(8,13,24,.10);
    --e-gold: 0 12px 28px -10px rgba(168,132,44,.45);

    /* Rayons */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 30px;

    /* Rythme */
    --gutter: clamp(1rem, 3vw, 2.25rem);

    /* Mouvement */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    /* Typographie */
    --font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
}

/* --------------------------------------------------------------------------
   2. Fondations
   -------------------------------------------------------------------------- */
body {
    font-family: var(--font-ui);
    background-color: var(--paper);
    color: var(--ink-700);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-ui);
    color: var(--ink-900);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.18;
}

/* La serif est un choix, pas un défaut : réservée au display et aux notes. */
.ev-display {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.04;
}
.ev-display em {
    font-style: italic;
    color: var(--gold-500);
}

/* Chiffres alignés — indispensable pour comparer des notes en colonne. */
.ev-num {
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 400;
    letter-spacing: -0.02em;
}

.ev-eyebrow {
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-400);
}

.ev-lede { color: var(--ink-500); font-size: 1.02rem; }
.ev-muted { color: var(--ink-400); }
.ev-hair { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

::selection { background: var(--gold-300); color: var(--ink-900); }

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

/* --------------------------------------------------------------------------
   3. Surfaces
   -------------------------------------------------------------------------- */
.ev-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    box-shadow: var(--e1);
    transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out),
                border-color .45s var(--ease-out);
}
.ev-card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--e3);
    border-color: var(--hairline-strong);
}

/* Panneau d'encre — pour les zones qui doivent dominer visuellement. */
.ev-ink {
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(201,162,39,.14) 0%, transparent 55%),
        linear-gradient(158deg, var(--ink-800) 0%, var(--ink-900) 100%);
    color: #fff;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-lg);
}
.ev-ink h1, .ev-ink h2, .ev-ink h3, .ev-ink h4, .ev-ink h5 { color: #fff; }

/* Filet doré : marque discrètement les surfaces importantes. */
.ev-topline::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: var(--r-md) var(--r-md) 0 0;
    background: linear-gradient(90deg, var(--gold-500), var(--gold-300) 55%, transparent);
}

/* Grain : casse le plat des grands aplats sombres. */
.ev-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .32;
    mix-blend-mode: overlay;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.ev-btn {
    --btn-bg: var(--ink-900);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .82rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-ui);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
                background-color .3s var(--ease), color .3s var(--ease);
}
.ev-btn:hover { transform: translateY(-2px); box-shadow: var(--e2); color: var(--btn-fg); }
.ev-btn:active { transform: translateY(0); }

.ev-btn-gold  { --btn-bg: var(--gold-500); --btn-fg: var(--ink-900); }
.ev-btn-gold:hover { --btn-bg: var(--gold-400); box-shadow: var(--e-gold); }
.ev-btn-teal  { --btn-bg: var(--teal-600); --btn-fg: #fff; }
.ev-btn-teal:hover { --btn-bg: var(--teal-500); }
.ev-btn-ghost {
    --btn-bg: transparent; --btn-fg: var(--ink-900);
    border-color: var(--hairline-strong);
}
.ev-btn-ghost:hover { --btn-bg: var(--ink-900); --btn-fg: #fff; border-color: var(--ink-900); }
.ev-btn-light {
    --btn-bg: rgba(255,255,255,.10); --btn-fg: #fff;
    border-color: rgba(255,255,255,.22);
    backdrop-filter: blur(8px);
}
.ev-btn-light:hover { --btn-bg: rgba(255,255,255,.18); }
.ev-btn-block { width: 100%; }
.ev-btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }
.ev-btn-sm { padding: .58rem 1.05rem; font-size: .84rem; }

/* --------------------------------------------------------------------------
   5. Étiquettes
   -------------------------------------------------------------------------- */
.ev-tag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--hairline);
    background: var(--surface-2);
    color: var(--ink-500);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1;
}
.ev-tag-gold { background: var(--gold-050); border-color: var(--gold-300); color: var(--gold-700); }
.ev-tag-teal { background: var(--teal-050); border-color: rgba(14,124,107,.25); color: var(--teal-700); }
.ev-tag-pass { background: var(--pass-050); border-color: rgba(27,127,75,.25); color: var(--pass-600); }
.ev-tag-fail { background: var(--fail-050); border-color: rgba(179,38,30,.25); color: var(--fail-600); }
.ev-tag-warn { background: var(--warn-050); border-color: rgba(154,103,0,.25); color: var(--warn-600); }
.ev-tag-onink {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.20);
    color: rgba(255,255,255,.92);
}

/* --------------------------------------------------------------------------
   6. Note — le composant signature
   -------------------------------------------------------------------------- */
.ev-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: .7rem .9rem;
    border-radius: var(--r-md);
    border: 1px solid var(--hairline);
    background: var(--surface-2);
    line-height: 1;
}
.ev-score-value { font-family: var(--font-display); font-size: 2.3rem; font-variant-numeric: tabular-nums; }
.ev-score-max {
    margin-top: .35rem; padding-top: .3rem;
    width: 62%; text-align: center;
    border-top: 1px solid var(--hairline-strong);
    font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    color: var(--ink-400);
}
.ev-score-pass { background: var(--pass-050); border-color: rgba(27,127,75,.22); }
.ev-score-pass .ev-score-value { color: var(--pass-600); }
.ev-score-fail { background: var(--fail-050); border-color: rgba(179,38,30,.22); }
.ev-score-fail .ev-score-value { color: var(--fail-600); }

/* Jauge fine sous une note */
.ev-meter { height: 4px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.ev-meter > span { display: block; height: 100%; border-radius: 999px; background: var(--ink-900); }
.ev-meter-pass > span { background: var(--pass-600); }
.ev-meter-fail > span { background: var(--fail-600); }

/* --------------------------------------------------------------------------
   7. État vide
   -------------------------------------------------------------------------- */
.ev-empty { text-align: center; padding: clamp(2.5rem, 7vw, 4.5rem) 1.5rem; }
.ev-empty-icon {
    width: 76px; height: 76px; margin: 0 auto 1.4rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
    color: var(--ink-300);
    font-size: 1.7rem;
}

/* --------------------------------------------------------------------------
   8. Mouvement — discret, et désactivable
   -------------------------------------------------------------------------- */
@keyframes ev-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.ev-rise { animation: ev-rise .7s var(--ease-out) both; }
.ev-d1 { animation-delay: .06s } .ev-d2 { animation-delay: .12s }
.ev-d3 { animation-delay: .18s } .ev-d4 { animation-delay: .24s }
.ev-d5 { animation-delay: .30s } .ev-d6 { animation-delay: .36s }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .ev-card-hover:hover, .ev-btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   9. Accords avec MDB
   -------------------------------------------------------------------------- */
.form-control {
    border-radius: var(--r-sm) !important;
    border-color: var(--hairline-strong);
    font-family: var(--font-ui);
}
.form-control:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(201,162,39,.16); }
.form-outline .form-control ~ .form-label { color: var(--ink-400); }
.form-outline .form-control:focus ~ .form-notch .form-notch-leading,
.form-outline .form-control:focus ~ .form-notch .form-notch-middle,
.form-outline .form-control:focus ~ .form-notch .form-notch-trailing { border-color: var(--gold-500) !important; }
.form-outline .form-control:focus ~ .form-label { color: var(--gold-700) !important; }

.swal2-popup { border-radius: var(--r-lg) !important; font-family: var(--font-ui) !important; }
.swal2-title { font-family: var(--font-ui) !important; letter-spacing: -.02em; color: var(--ink-900) !important; }
.swal2-styled { border-radius: 999px !important; font-weight: 600 !important; padding: .7rem 1.6rem !important; }