/* ==========================================================================
   Mon Examen Civique — tokens de design
   Socle commun de la refonte. À charger avant toute autre feuille.
   ========================================================================== */

/* --- Typographie auto-hébergée -------------------------------------------
   Les fichiers .woff2 sont attendus dans static/vitrine/fonts/.
   Aucun appel à Google Fonts : les adresses IP des visiteurs ne sortent pas
   du serveur (exigence RGPD, cf. décisions CNIL sur les polices distantes).
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Public Sans';
    src: url("../fonts/public-sans-400.60715978fab2.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Public Sans';
    src: url("../fonts/public-sans-600.6b1fe1f62892.woff2") format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Public Sans';
    src: url("../fonts/public-sans-700.3c0eda7c2982.woff2") format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spectral';
    src: url("../fonts/spectral-600.ccd396b92abd.woff2") format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Spectral';
    src: url("../fonts/spectral-700.456f29ac2c8a.woff2") format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Arabe : police compagnon, Spectral et Public Sans ne couvrent pas l'écriture */
@font-face {
    font-family: 'Noto Naskh Arabic';
    src: url("../fonts/noto-naskh-arabic-400.bd4ec46e5154.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
    /* --- Couleurs : palette République ----------------------------------- */
    --v2-blue: #0F3D63;          /* couleur principale */
    --v2-blue-deep: #0B2E4C;     /* bandeaux sombres */
    --v2-blue-dark: #08243C;     /* survol */
    --v2-blue-tint: #EAF0F5;     /* fonds teintés */
    --v2-blue-tint-2: #E3EBF2;   /* badges */
    --v2-blue-rgb: 15, 61, 99;   /* pour dégradés / halos en rgba() */

    --v2-red: #A32A2E;           /* accent secondaire, usage rare */
    --v2-red-tint: #F6E9E7;
    --v2-red-rgb: 163, 42, 46;   /* pour dégradés / halos en rgba() */

    --v2-cream: #FAF8F4;         /* fond général */
    --v2-white: #FFFFFF;
    --v2-sand: #F0EDE6;          /* aplats neutres */

    --v2-ink: #17212B;           /* texte principal */
    --v2-ink-2: #4A5560;         /* texte secondaire */
    --v2-ink-3: #7A8490;         /* texte tertiaire */

    --v2-border: #E5E1D9;
    --v2-border-soft: #D7D2C8;
    --v2-rail: #E8E4DC;          /* fond des barres de progression */

    /* --- Typographie ------------------------------------------------------ */
    --v2-font-title: 'Spectral', Georgia, 'Times New Roman', serif;
    --v2-font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --v2-font-arabic: 'Noto Naskh Arabic', 'Public Sans', sans-serif;

    --v2-text-xs: 0.8125rem;   /* 13 px */
    --v2-text-sm: 0.875rem;    /* 14 px */
    --v2-text-base: 1rem;      /* 16 px */
    --v2-text-lg: 1.125rem;    /* 18 px */
    --v2-text-xl: 1.3125rem;   /* 21 px */
    --v2-text-2xl: 1.8125rem;  /* 29 px */
    --v2-text-3xl: 2.25rem;    /* 36 px */
    --v2-text-4xl: clamp(2.125rem, 1.55rem + 2.6vw, 3.75rem); /* 34 → 60 px, fluide */

    /* --- Espacement, rayons, ombres --------------------------------------- */
    --v2-gap-xs: 0.5rem;
    --v2-gap-sm: 0.75rem;
    --v2-gap: 1.25rem;
    --v2-gap-lg: 2.25rem;
    --v2-gap-xl: 3.5rem;

    --v2-radius-sm: 0.625rem;
    --v2-radius: 1.125rem;
    --v2-radius-lg: 1.375rem;
    --v2-radius-pill: 999px;

    --v2-shadow: 0 1px 2px rgba(23, 33, 43, 0.04);
    --v2-shadow-lift: 0 8px 24px rgba(23, 33, 43, 0.08);

    --v2-container: 1280px;
    --v2-pad-x: 3.5rem;

    /* Cible tactile minimale, appliquée à tous les éléments cliquables */
    --v2-tap: 44px;

    /* --- Retour de bonne réponse (quiz) — usage unique et ponctuel,
       n'élargit pas la palette de marque --------------------------------- */
    --v2-success: #1F7A4D;
    --v2-success-tint: #EAF3EE;

    /* --- Système de motion : mêmes courbes/durées partout, jamais de valeur
       magique isolée dans un composant --------------------------------- */
    --v2-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --v2-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --v2-duration-fast: 150ms;
    --v2-duration-base: 250ms;
    --v2-duration-slow: 500ms;
}

/* Écriture arabe : police et sens de lecture */
[lang="ar"],
html[dir="rtl"] {
    --v2-font-body: 'Noto Naskh Arabic', 'Public Sans', sans-serif;
    --v2-font-title: 'Noto Naskh Arabic', Georgia, serif;
}

@media (max-width: 640px) {
    :root {
        --v2-pad-x: 1.25rem;
        --v2-text-3xl: 1.75rem;
        --v2-text-2xl: 1.4375rem;
    }
}

/* Respect de la préférence système : pas d'animation imposée */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* --- Message de bienvenue / retour (toast) --------------------------------
   Affiché par le petit script de main_v2.html à partir du message de session
   Django ou du paramètre ?success= laissé par la connexion. */
.v2-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1000;
    max-width: min(28rem, calc(100vw - 2rem));
    padding: 0.875rem 1.25rem;
    border: 1px solid var(--v2-success);
    border-radius: var(--v2-radius);
    background: var(--v2-success-tint);
    color: var(--v2-success);
    font-weight: 600;
    font-size: var(--v2-text-sm, 0.9375rem);
    box-shadow: var(--v2-shadow-lift);
    opacity: 0;
    transform: translate(-50%, 0.75rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.v2-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .v2-toast { transition: none; }
}


/* --- Modales déplacées sous <body> (attribut data-v2-modal, voir main_v2.html) ---
   Au-dessus du header sticky (1000) ; la spécificité l'emporte sur le z-index propre à chaque modale. */
body.v2 > [data-v2-modal] { z-index: 1100; }