/* ============================================================
   THEME — Identité visuelle partagée (« Livrée de course »)
   Orange + Bleu racing + Blanc + Encre bleu-nuit
   Chargé AVANT les CSS de page. Source unique des couleurs/typo.
   ============================================================ */

:root {
    /* Couleurs de marque */
    --orange:        #eea527;   /* orange de marque (exact) */
    --orange-amber:  #eea527;   /* même orange (états survol) */
    --orange-grad:   linear-gradient(120deg, #eea527 0%, #2686ed 100%); /* signature orange→bleu */

    --blue:          #2686ed;   /* bleu de marque (exact) */
    --blue-bright:   #2686ed;

    --ink:           #16181d;   /* texte : noir neutre (plus de bleu-nuit) */
    --paper:         #ffffff;
    --paper-2:       #f4f6f8;   /* surface très claire (≈ blanc) */
    --line:          #e7e9ec;
    --muted:         #6b7280;   /* gris neutre */

    /* Typographie */
    --font-title:    'Climate Crisis', 'Space Grotesk', sans-serif;  /* gros titres */
    --font-display:  'Space Grotesk', 'DM Sans', sans-serif;         /* sous-titres, labels, nav */
    --font-body:     'DM Sans', sans-serif;

    /* Formes & profondeur */
    --radius:        10px;
    --radius-pill:   999px;
    --shadow-1:      0 2px 10px rgba(0, 0, 0, .08);
    --shadow-2:      0 16px 48px rgba(0, 0, 0, .28);

    /* Transitions */
    --t-fast:        .18s ease;
    --t:             .3s ease;
}

/* Base partagée */
* { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    color: var(--ink);
}

/* Accessibilité : focus clavier visible (manquait avant) */
:focus-visible {
    outline: 2px solid var(--blue-bright);
    outline-offset: 3px;
    border-radius: 3px;
}

/* ---- Motif signature : bande de course orange | bleu ---- */
.stripe {
    width: 64px;
    height: 6px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--orange) 0 48%,
        var(--blue-bright) 52% 100%
    );
}

.stripe-lg { width: 96px; height: 8px; }

/* ---- Footer unifié (bleu-nuit) ---- */
.site-footer {
    background-color: var(--paper);
    color: var(--ink);
    text-align: center;
    padding: 40px 20px 32px;
    width: 100%;
    margin-top: auto;
    position: relative;
}

/* liseré de course en haut du footer */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--orange-grad);
}

.site-footer p {
    margin: 0;
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--muted);
}

.social-links {
    margin-top: 14px;
    display: inline-flex;
    gap: 28px;
}

.social-links a {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    padding-bottom: 4px;
    transition: color var(--t-fast);
}

.social-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--orange);
    transition: width var(--t);
}

.social-links a:hover { color: var(--orange-amber); }
.social-links a:hover::after { width: 100%; }

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}