/* =============================================================================
 * MAPIRANDO — Variables de design
 * =============================================================================
 *
 * Réécrit le 2026-09-03. Ce fichier existait déjà, avec une vraie structure de
 * jetons (espacements, rayons, ombres) — mais ses couleurs n'avaient jamais
 * été alignées sur la palette validée sur l'app, et surtout : **rien ne le
 * chargeait**. Mapirando_Assets_Manager, censé l'enqueue, n'est instanciée
 * nulle part dans le plugin (vérifié, pas supposé) — voir le commit qui
 * corrige mapirando-admin.css pour le même symptôme. Aucune règle du site
 * n'utilisait donc une seule de ces variables ; elles étaient décoratives.
 *
 * Il est maintenant chargé en tout premier (voir mapirando-community.php),
 * pour que chaque feuille qui suit puisse s'appuyer sur ces jetons.
 *
 * ── LA PALETTE ────────────────────────────────────────────────────────────
 * Reprise à l'identique de la bascule sombre + jaune de l'app (2026-09-02,
 * voir mémoire project_design_system_2026_09_01) : jaune Tour de France
 * #FFF200 sur fond #0A0B0D (contraste 16,8:1), texte sur jaune TOUJOURS noir
 * (du blanc y donnerait 1,1:1 — illisible). Règle tenue côté app à respecter
 * ici aussi : le jaune se rationne, il ne doit jamais couvrir de grandes
 * surfaces de texte courant.
 *
 * Les rouges (alerte, suppression, signalement) sont des SIGNAUX, pas la
 * marque — l'app les a délibérément gardés rouges plutôt que de les jaunir,
 * même règle ici.
 * ---------------------------------------------------------------------------- */

/* === IMPORT MATERIAL ICONS === */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

/* === FIX MATERIAL ICONS === */
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

:root {
    /* ===== FOND & SURFACES (sombre) ===== */
    --mapi-ground: #0a0b0d;              /* Fond de page — identique à l'app */
    --mapi-surface: #141619;             /* Cartes, encarts */
    --mapi-surface-raised: #1c1f24;      /* Surface au-dessus d'une surface (modale sur carte) */
    --mapi-surface-hover: #22262c;       /* Survol d'une ligne/carte */
    --mapi-border: rgba(255, 255, 255, 0.10);
    --mapi-border-subtle: rgba(255, 255, 255, 0.06);

    /* ===== ACCENT (jaune) ===== */
    --mapi-accent: #fff200;              /* Le jaune Tour de France — se rationne */
    --mapi-accent-hover: #e6da00;
    --mapi-on-accent: #0a0b0d;           /* Texte SUR le jaune : toujours sombre */

    /* ===== TEXTE ===== */
    --mapi-text-primary: #f4f3f0;        /* Blanc cassé — jamais blanc pur */
    --mapi-text-secondary: #9aa3ad;
    --mapi-text-muted: #6b7683;
    --mapi-on-dark-strong: #ffffff;      /* Cas ponctuel : texte sur photo (bandeaux héros) */

    /* ===== SIGNAUX — jamais jaunis, ce sont des alertes ===== */
    --mapi-danger: #ff5252;
    --mapi-danger-hover: #e63946;
    --mapi-success: #10b981;
    --mapi-success-hover: #059669;
    --mapi-warning: #f59e0b;

    /* ===== COULEURS NIVEAU (badges de difficulté / rythme) ===== */
    --mapi-level-expert: #ef4444;
    --mapi-level-confirme: #f59e0b;
    --mapi-level-intermediaire: var(--mapi-accent);
    --mapi-level-debutant: #10b981;
    --mapi-level-default: #6b7683;

    /* ===== BORDURES (alias rétro-compatibles) ===== */
    --mapi-border-light: rgba(255, 255, 255, 0.08);
    --mapi-border-normal: rgba(255, 255, 255, 0.1);
    --mapi-border-strong: rgba(255, 255, 255, 0.15);

    /* ===== OMBRES (fond sombre : plus discrètes, un fond clair en a besoin de plus marquées) ===== */
    --mapi-shadow-xs: 0 2px 4px rgba(0, 0, 0, 0.4);
    --mapi-shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.35);
    --mapi-shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
    --mapi-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
    --mapi-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255, 255, 255, 0.05);

    /* ===== ESPACEMENTS ===== */
    --mapi-space-xs: 4px;
    --mapi-space-sm: 8px;
    --mapi-space-md: 16px;
    --mapi-space-lg: 24px;
    --mapi-space-xl: 32px;
    --mapi-space-2xl: 48px;

    /* ===== BORDER RADIUS ===== */
    --mapi-radius-sm: 8px;
    --mapi-radius-md: 12px;
    --mapi-radius-lg: 16px;
    --mapi-radius-xl: 20px;
    --mapi-radius-full: 50%;

    /* ===== TRANSITIONS ===== */
    --mapi-transition-fast: 0.15s ease;
    --mapi-transition-normal: 0.3s ease;
    --mapi-transition-slow: 0.5s ease;

    /* ===== FONTS ===== */
    --mapi-font-main: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
    --mapi-font-display: 'Oswald', sans-serif;
    --mapi-font-icons: 'Material Symbols Rounded';

    /* ===== TAILLES DE POLICE ===== */
    --mapi-text-xs: 0.75rem;
    --mapi-text-sm: 0.875rem;
    --mapi-text-base: 1rem;
    --mapi-text-lg: 1.125rem;
    --mapi-text-xl: 1.25rem;
    --mapi-text-2xl: 1.5rem;
    --mapi-text-3xl: 1.875rem;
    --mapi-text-4xl: 2.25rem;

    /* ===== Z-INDEX ===== */
    --mapi-z-base: 1;
    --mapi-z-elevated: 10;
    --mapi-z-header: 100;
    --mapi-z-dropdown: 1000;
    --mapi-z-modal: 9999;
    --mapi-z-top: 99999;
}

/* ===== CLASSES UTILITAIRES ===== */

.mapi-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--mapi-space-lg);
}

.mapi-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mapi-card {
    background: var(--mapi-surface);
    border-radius: var(--mapi-radius-md);
    border: 1px solid var(--mapi-border-light);
    padding: var(--mapi-space-xl);
}

.mapi-reset {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}