/* ===========================================================================
   BASE — Mobikes

   TABLE DES MATIÈRES
     1. VARIABLES (:root)      — largeurs, couleurs, typo, échelles, z-index
     2. CONDITIONNEMENTS       — overrides des variables par breakpoint
     3. RESET                  — reset moderne scopé
     4. ÉLÉMENTS GLOBAUX       — wrapper, titres, paragraphes, liens, listes
     5. LAYOUT / CONTENEURS    — .layout-container, .section
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. VARIABLES
--------------------------------------------------------------------------- */
:root {
    /* Largeurs & espacements structurels */
    --site-outer-margin: 4%;              /* gouttière latérale du navigateur */
    --grid-gutter: 1.5rem;                /* gouttière entre colonnes (grid.css) */
    --content-max: 100rem;                /* largeur max du contenu (1600px) */
    --section-py: clamp(3rem, 6vw, 6rem); /* espacement vertical de section */

    /* Couleurs — rôles sémantiques. Fond crème calé sur la maquette
       (teinte approximative, à finaliser avec la palette Figma complète). */
    --bg: #f4f1ea;                        /* fond de page (crème maquette) */
    --surface: #e9e5db;                   /* zones/cartes surélevées */
    --surface-2: #e3e2dd;                 /* 2e surface (bande de section grise) */
    --ink: #16130f;                       /* texte principal */
    --muted: #6a655d;                     /* texte secondaire */
    --green: #559734;                     /* vert de marque (logo Mobikes) */
    --green-dark: #47812e;                /* vert foncé (survol boutons) */
    --accent: var(--green);               /* accent = vert de marque */
    --line: rgba(22, 19, 15, 0.14);       /* filets, bordures */

    /* Typographie — appairage Figma (auto-hébergées, voir fonts.css) :
       Raleway = titres / nav / UI (défaut du thème) ; Teachers = corps de texte. */
    --font-display: 'Raleway', system-ui, "Segoe UI", sans-serif;
    --font-body: 'Teachers', system-ui, "Segoe UI", sans-serif;

    /* Échelle typographique (structurelle) */
    --fs-100: 0.875rem;
    --fs-200: 1rem;
    --fs-300: 1.125rem;
    --fs-400: clamp(1.25rem, 2vw, 1.5rem);
    --fs-500: clamp(1.5rem, 3vw, 2.125rem);
    --fs-600: clamp(2rem, 5vw, 3.25rem);
    --fs-700: clamp(2.75rem, 7vw, 5rem);

    /* Échelle de z-index sémantique (ordonnée) */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-menu-overlay: 400;  
    --z-header: 500;         

    /* Courbe de transition commune */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------------
   2. CONDITIONNEMENTS (overrides de variables)
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root { --site-outer-margin: 6%; --grid-gutter: 1rem; }
}
@media (max-width: 480px) {
    :root { --site-outer-margin: 7%; }
}

/* ---------------------------------------------------------------------------
   3. RESET (scopé)
--------------------------------------------------------------------------- */
.mobikes-theme *,
.mobikes-theme *::before,
.mobikes-theme *::after {
    box-sizing: border-box;
    margin: 0;
}

/* Notre CSS n'est chargé qu'en front (jamais dans l'admin, thème séparé). */
body {
    margin: 0;
}

.mobikes-theme img,
.mobikes-theme picture,
.mobikes-theme video,
.mobikes-theme svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.mobikes-theme input,
.mobikes-theme button,
.mobikes-theme textarea,
.mobikes-theme select {
    font: inherit;
    color: inherit;
}

.mobikes-theme ul[class],
.mobikes-theme ol[class] {
    list-style: none;
    padding: 0;
}

@media (prefers-reduced-motion: reduce) {
    .mobikes-theme *,
    .mobikes-theme *::before,
    .mobikes-theme *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   4. ÉLÉMENTS GLOBAUX
--------------------------------------------------------------------------- */
.mobikes-theme {
    /* Défaut = Raleway (nav, UI, boutons…). Le corps de texte (p) bascule sur
       Teachers ci-dessous. */
    font-family: var(--font-display);
    font-size: var(--fs-200);
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

.mobikes-theme h1,
.mobikes-theme h2,
.mobikes-theme h3,
.mobikes-theme h4,
.mobikes-theme h5,
.mobikes-theme h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.08;
}
.mobikes-theme h1 { font-size: var(--fs-700); }
.mobikes-theme h2 { font-size: var(--fs-600); margin-bottom: 30px; }
.mobikes-theme h3 { font-size: var(--fs-500); margin-bottom: 10px; }
.mobikes-theme h4 { font-size: var(--fs-400); margin-bottom: 10px; }
.mobikes-theme h5 { font-size: var(--fs-300); }
.mobikes-theme h6 { font-size: var(--fs-200); }

/* text-wrap : balance sur les titres courts, pretty sur les paragraphes */
.mobikes-theme h1,
.mobikes-theme h2,
.mobikes-theme h3 { text-wrap: balance; }

.mobikes-theme p {
    font-family: var(--font-body);
    font-size: var(--fs-300);       /* 18px */
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.03em;         /* 3% */
    text-wrap: pretty;
    margin-bottom: 1em;             /* petite respiration entre paragraphes */
}

.mobikes-theme a {
    color: inherit;
    text-decoration: none;
}

.mobikes-theme :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* --- ACCESSIBILITÉ — lien d'évitement ----------------------------------- */
.mobikes-theme .skip-link {
    position: absolute;
    left: -9999px;
}
.mobikes-theme .skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    padding: 0.5rem 0.9rem;
    background: var(--ink);
    color: var(--bg);
}

/* ---------------------------------------------------------------------------
   5. LAYOUT / CONTENEURS

   Modèle NATIF Concrete. Les zones éditables appellent enableGridContainer() ;
   le framework de grille enveloppe alors chaque bloc / agencement dans un
   .layout-container → marges + largeur max centrée PAR DÉFAUT.
--------------------------------------------------------------------------- */
.mobikes-theme .layout-container {
    /* Largeur = min(viewport moins la gouttière des 2 côtés, largeur max),
       centré. Une SEULE marge (plus de double inset max-width + padding). */
    width: min(100% - 2 * var(--site-outer-margin), var(--content-max));
    margin-inline: auto;
}

/* Espacement vertical d'une section (optionnel, composable) */
.mobikes-theme .section {
    padding-block: var(--section-py);
}