/* =============================================================================
   Savoir où Habiter — jetons de conception
   =============================================================================

   Source unique de toutes les valeurs de couleur, d'espacement, de rayon et de
   typographie. Aucune valeur littérale ne doit apparaître ailleurs que dans ce
   fichier : si une couleur manque ici, c'est qu'il faut l'y ajouter, pas la
   coder en dur dans un composant.

   Avant cette refonte, le projet comptait 416 lignes de CSS réparties dans les
   templates Twig, sans une seule variable : `.card` y était redéfinie 11 fois,
   `#818cf8` apparaissait 21 fois, et les 9 couleurs de types de lieu vivaient
   en double dans le JS et dans un template.

   Les couleurs sont dérivées du dégradé de la marque et vérifiées au contraste
   sur fond blanc — les ratios sont notés en commentaire.
   ========================================================================== */

/* ── Polices ─────────────────────────────────────────────────────────────── */
/* Auto-hébergées : aucune requête vers un tiers, donc rien à déclarer côté RGPD.
   Variables 400→700, ce qui évite de charger un fichier par graisse.
   `swap` : le texte s'affiche immédiatement dans la police système en attendant. */

@font-face {
    font-family: 'Outfit';
    src: url("../fonts/outfit-latin-WRQvzHJ.woff2") format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Outfit';
    src: url("../fonts/outfit-latin-ext-bHlsocC.woff2") format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    src: url("../fonts/manrope-latin-bDYqjI6.woff2") format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Manrope';
    src: url("../fonts/manrope-latin-ext-Q3ebhOa.woff2") format('woff2');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ── Marque ───────────────────────────────────────────────────────────
       Les deux ancres du dégradé du logo. `--brand` tient les deux rôles :
       5,75:1 sur blanc (donc lisible en texte) ET 5,75:1 avec du blanc dessus
       (donc utilisable en bouton plein). Une seule couleur au lieu de deux. */
    --brand:            #4f46ff;   /* 5,75:1 sur blanc — AA */
    --brand-strong:     #3d31c9;   /* 8,46:1 — pour les liens en texte courant */
    --brand-violet:     #b84df1;   /* 3,91:1 — aplats et dégradés seulement */
    --brand-gradient:   linear-gradient(135deg, #4f46ff 0%, #6d4cff 46%, #b84df1 100%);
    --brand-wash:       #f2f1ff;   /* fond des états sélectionnés */
    --brand-wash-firm:  #e6e3ff;   /* bordure de ces mêmes états */

    /* ── Neutres ──────────────────────────────────────────────────────────
       Volontairement teintés de violet plutôt que gris pur : la surface
       entière reste parente de la marque, sans qu'on puisse nommer la teinte. */
    --paper:            #ffffff;
    --paper-tint:       #f8f8fc;   /* fond de page */
    --paper-sunken:     #f2f2f8;   /* zones en retrait, en-têtes de tableau */
    --line:             #e7e7f0;   /* bordures */
    --line-strong:      #d5d5e3;

    --ink:              #14142b;   /* 18,0:1 — titres */
    --ink-body:         #3d3d55;   /* 10,5:1 — texte courant */
    --ink-muted:        #6b6b85;   /*  5,2:1 — texte secondaire, AA */
    --ink-subtle:       #8f8fa8;   /*  3,2:1 — mentions non essentielles */

    /* ── Signaux ──────────────────────────────────────────────────────────
       Chaque signal a une teinte d'aplat et une teinte de texte distinctes.
       L'ambre de l'ancienne version (#f59e0b) tombait à 2,15:1 sur blanc :
       il fonctionnait sur fond noir, il devient illisible sur blanc. */
    --amber:            #f59e0b;   /* aplats, marqueurs de carte */
    --amber-text:       #b45309;   /* 5,0:1 — texte, AA */
    --amber-wash:       #fef6e7;
    --success:          #16a34a;
    --success-text:     #15803d;
    --success-wash:     #eefaf1;
    --danger:           #dc2626;   /* 4,8:1 — AA */
    --danger-wash:      #fef2f2;

    /* ── Types de lieu ────────────────────────────────────────────────────
       Les neuf couleurs, désormais définies une seule fois. Elles étaient
       recopiées à la main entre assets/place-types.js et scenario/show.twig.
       Le JS les lit maintenant ici, via getComputedStyle. */
    --place-school:     #2563eb;
    --place-coparent:   #e11d48;
    --place-work:       #ea580c;
    --place-childcare:  #db2777;
    --place-family:     #9333ea;
    --place-health:     #0d9488;
    --place-shopping:   #c2410c;
    --place-leisure:    #15803d;
    --place-other:      #64748b;

    /* ── Modes de transport ───────────────────────────────────────────────
       La version précédente divergeait : #22c55e en CSS, #16a34a dans le JS. */
    --mode-car:         #4f46ff;
    --mode-foot:        #15803d;
    --mode-custom:      #64748b;

    /* ── Typographie ──────────────────────────────────────────────────────
       Outfit reprend la géométrie du logo — mêmes rondeurs, même assurance —
       et ne sert qu'aux titres et aux grands nombres. Manrope, plus humaniste,
       tient mieux la lecture en petit corps et ses chiffres tabulaires font
       s'aligner les colonnes de durées. */
    --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-body:    'Manrope', system-ui, -apple-system, sans-serif;

    --text-2xs:  0.6875rem;  /* 11px — étiquettes en capitales */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.8125rem;  /* 13px */
    --text-base: 0.9375rem;  /* 15px — texte courant */
    --text-md:   1.0625rem;  /* 17px */
    --text-lg:   1.375rem;   /* 22px */
    --text-xl:   1.75rem;    /* 28px */
    --text-2xl:  2.25rem;    /* 36px */
    --text-3xl:  3rem;       /* 48px — hero */

    --leading-tight: 1.15;
    --leading-snug:  1.35;
    --leading-body:  1.6;

    /* ── Espacement ───────────────────────────────────────────────────────
       Échelle de 4 px, nommée par usage plutôt que par taille. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* ── Rayons ───────────────────────────────────────────────────────────
       Trois valeurs au lieu des sept d'avant (3, 6, 10, 14, 16, 20, 50 %). */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   18px;
    --radius-full: 999px;

    /* ── Ombres ───────────────────────────────────────────────────────────
       Teintées d'encre plutôt que noires : sur fond clair, une ombre noire
       pure grise la couleur qu'elle touche. */
    --shadow-sm: 0 1px 2px rgba(20, 20, 43, 0.06);
    --shadow-md: 0 2px 8px rgba(20, 20, 43, 0.07), 0 1px 2px rgba(20, 20, 43, 0.04);
    --shadow-lg: 0 12px 32px rgba(20, 20, 43, 0.10), 0 2px 8px rgba(20, 20, 43, 0.05);
    --shadow-brand: 0 6px 20px rgba(79, 70, 255, 0.28);

    /* ── Mouvement ────────────────────────────────────────────────────────
       Une seule durée et une seule courbe : au-delà, l'interface se met à
       bouger de plusieurs façons différentes sans que personne l'ait décidé. */
    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --duration: 180ms;

    /* ── Trames ───────────────────────────────────────────────────────── */
    --container: 60rem;
    --container-wide: 72rem;
    --header-height: 4rem;
}

/* Respect du réglage système : personne ne devrait subir une animation qu'il a
   explicitement désactivée. */
@media (prefers-reduced-motion: reduce) {
    :root { --duration: 0ms; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}