/* ============================================================
   Socle commun — jetons de design et primitives
   ------------------------------------------------------------
   Un seul endroit où sont écrites les couleurs, les rayons, les ombres et
   les fontes. Chaque feuille suivante ne contient plus que ce qui lui est
   propre ; aucune ne devrait porter de couleur en dur.

   Identité : un lavage de nuit. Encre d'asphalte mouillé, papier gris-vert
   très pâle, « eau vive » pour l'accent, « sodium » pour ce qui demande
   l'attention, « arrêt » pour ce qui est fermé ou faux. Le thème sombre se
   fait en redéfinissant les jetons, jamais en dupliquant des règles.

   Ratios de contraste (WCAG 2, calculés) — thème clair :
     encre #10242b / papier #f2f4f3 ............ 14,5 : 1
     text-2 #3b4d53 / papier ..................... 8,0 : 1
     text-3 #566a70 / papier ..................... 5,2 : 1  (5,7 sur blanc)
     accent #0b7280 / papier ..................... 5,1 : 1  (blanc sur accent 5,6)
     warn #8f4f0c / warn-soft #fbeedd ............ 5,6 : 1
     danger #a33a2c / papier ..................... 5,9 : 1
     border-strong #7a8d90 / blanc ............... 3,5 : 1  (3,15 sur papier — 1.4.11)
   Thème sombre :
     encre #e8eeed / papier #0b1518 ............. 15,8 : 1
     text-3 #91a5a4 / surface #12211f ............ 6,4 : 1
     accent #5cc3cf / surface .................... 8,1 : 1  (papier sur accent 9,0)
     border-strong #5d797b / surface ............. 3,6 : 1
   ============================================================ */

/* ---------- Fontes, servies depuis ce domaine ----------
   La CSP est `font-src 'self'` : aucune fonte tierce ne serait chargée, et
   aucune adresse IP ne part chez un fournisseur. Trois fichiers, instanciés
   et sous-ensemblés en latin (57 Ko en tout) :
   Schibsted Grotesk pour tout ce qui est interface, titre et chiffre ;
   Literata pour le texte qui se lit. Les deux sont sous licence OFL,
   copie dans assets/fontes/. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../assets/fontes/schibsted-grotesk-400.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
    U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
    U+2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 501 900;
  font-display: swap;
  src: url('../assets/fontes/schibsted-grotesk-650.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
    U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
    U+2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fontes/literata-400.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
    U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
    U+2044, U+20AC, U+2122, U+2212, U+2215;
}

:root {
  /* Fonds. --bg est le fond des bandeaux et pieds : encre, dans les deux
     thèmes. --panel est la surface posée, --panel-2 le papier de la page. */
  --bg:            #10242b;
  --panel:         #ffffff;
  --panel-2:       #f2f4f3;

  /* Traits. --border sépare (filets) ; --border-strong délimite un contrôle
     — champ, bouton de filtre — et tient les 3 : 1 de WCAG 1.4.11. */
  --border:        #d7dedd;
  --border-strong: #7a8d90;

  /* Textes, du plus appuyé au plus discret. --text-3 colore des données
     (« Adresse », « Horaires »), le fil d'Ariane, les compteurs : il doit
     rester AA, donc ≥ 4,5 : 1 sur le papier. */
  --text:          #10242b;
  --text-2:        #3b4d53;
  --text-3:        #566a70;

  /* Accent « eau vive » : liens, boutons, états actifs. */
  --accent:        #0b7280;
  --accent-dark:   #0a5f6a;
  --accent-soft:   #dff0f2;
  --accent-contraste: #ffffff;   /* le texte posé sur un aplat d'accent */

  /* États. Trois teintes sémantiques, distinctes de l'accent :
     sodium (attention, ouverture, restriction), arrêt (fermé, erreur),
     vert (confirmé). Chaque texte a son fond doux. */
  --warn:          #8f4f0c;
  --warn-soft:     #fbeedd;
  --warn-vif:      #c8761f;      /* la lampe au sodium elle-même : aplats, points */
  --danger:        #a33a2c;
  --danger-soft:   #f9e7e3;
  --success:       #2c7a4b;
  --success-soft:  #e3f2e8;

  /* Niveaux VigiEau : une échelle officielle à quatre degrés, pas un état
     de l'interface. */
  --eau-1: #7a5a10; --eau-1-fond: #fbf3dc;
  --eau-2: #8f4f0c; --eau-2-fond: #fbeedd;
  --eau-3: #9a3f1c; --eau-3-fond: #fae6de;
  --eau-4: #8e2318; --eau-4-fond: #f9e3e0;

  /* Catégories de station, pour les aperçus SVG et les légendes. */
  --cat-portique:       #0b63ce;
  --cat-tunnel:         #be185d;
  --cat-haute-pression: #0e7490;
  --cat-sans-contact:   #15803d;
  --cat-lavage-main:    #c2410c;
  --cat-mixte:          #a16207;
  --cat-autre:          #566a70;

  /* Le bandeau est toujours sur encre : ses textes ont leurs jetons. */
  --bandeau-fond:    var(--bg);
  --bandeau-texte:   #e8eeed;
  --bandeau-texte-2: #a9bcbf;
  --bandeau-trait:   rgba(232, 238, 237, .16);
  --bandeau-survol:  rgba(232, 238, 237, .09);

  /* Fond des cartes, le temps que les tuiles arrivent. */
  --carte-fond:      #e9eeec;

  /* Formes. Peu de rayon : la hiérarchie vient des filets et de l'espace,
     pas d'une carte arrondie sur chaque bloc. */
  --radius:        6px;
  --radius-sm:     4px;
  --shadow:        0 1px 2px rgba(16, 36, 43, .06), 0 6px 20px -8px rgba(16, 36, 43, .18);
  --shadow-lg:     0 18px 50px -12px rgba(16, 36, 43, .32);
  --voile:         rgba(16, 36, 43, .55);   /* fond des modales et visionneuses */

  /* Fontes. --font est l'interface (titres, chiffres, étiquettes, boutons) ;
     --font-lecture le texte qui se lit d'une traite. */
  --font:         'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-lecture: 'Literata', Georgia, 'Times New Roman', serif;

  /* Échelle de type, tenue d'une page à l'autre. */
  --t-xs:   .75rem;    /* 12 — mentions, compteurs */
  --t-sm:   .8125rem;  /* 13 — étiquettes, fil d'Ariane, chips */
  --t-md:   .875rem;   /* 14 — données */
  --t-base: .9375rem;  /* 15 — interface courante */
  --t-lg:   1.0625rem; /* 17 — chapeau, lecture */
  --t-xl:   1.25rem;   /* 20 — h3 */
  --t-2xl:  1.5rem;    /* 24 — h2 */
  --t-3xl:  2rem;      /* 32 — h1 */
  --t-4xl:  2.5rem;    /* 40 — h1 d'accueil */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #071011;
    --panel:         #12211f;
    --panel-2:       #0b1518;

    --border:        #26393b;
    --border-strong: #5d797b;

    --text:          #e8eeed;
    --text-2:        #b6c4c2;
    --text-3:        #91a5a4;

    --accent:        #5cc3cf;
    --accent-dark:   #83d5de;
    --accent-soft:   #10282c;
    --accent-contraste: #071011;

    --warn:          #e8a35a;
    --warn-soft:     #2b1d0c;
    --warn-vif:      #d9852e;
    --danger:        #e88676;
    --danger-soft:   #2c1512;
    --success:       #7ccb98;
    --success-soft:  #0f2a1a;

    --eau-1: #e3c25a; --eau-1-fond: #2a2208;
    --eau-2: #e8a35a; --eau-2-fond: #2b1d0c;
    --eau-3: #ee8f6a; --eau-3-fond: #2d180f;
    --eau-4: #f08a7e; --eau-4-fond: #2e1210;

    --cat-portique:       #6aa9f0;
    --cat-tunnel:         #ee7fb0;
    --cat-haute-pression: #5cc3cf;
    --cat-sans-contact:   #7ccb98;
    --cat-lavage-main:    #f0946c;
    --cat-mixte:          #e3c25a;
    --cat-autre:          #91a5a4;

    --bandeau-texte:   #e8eeed;
    --bandeau-texte-2: #a9bcbf;
    --bandeau-trait:   rgba(232, 238, 237, .14);
    --bandeau-survol:  rgba(232, 238, 237, .08);

    --carte-fond:      #0e1c1e;

    --shadow:    0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -8px rgba(0, 0, 0, .6);
    --shadow-lg: 0 20px 60px -12px rgba(0, 0, 0, .7);
    --voile:     rgba(3, 8, 9, .72);

    color-scheme: dark;
  }
}

/* ---------- Primitives communes à toutes les pages ---------- */

/* Pas de gras ni d'italique de synthèse pour la grotesque : ses deux graisses
   couvrent 300–900. L'italique reste synthétisable pour la Literata, dont la
   version italique n'est pas embarquée (budget). */
html { font-synthesis: style; -webkit-text-size-adjust: 100%; }

/* L'attribut `hidden` doit gagner contre toute règle de `display` : sans ceci,
   `.btn { display: inline-flex }` ressuscitait le bouton Back-office masqué
   par le HTML, et il s'est retrouvé visible en production. */
[hidden] { display: none !important; }

/* Un anneau de focus réel, partout, au clavier seulement. Deux couches :
   l'accent, puis le fond, pour rester visible sur un aplat d'accent. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
::selection { background: var(--accent-soft); color: var(--text); }

/* Les chiffres s'alignent dès qu'ils sont dans une colonne, un compteur ou
   une liste : tabulaires par défaut, l'interface les demande partout. */
b, strong, time, td, dd, .chip, .compteur { font-variant-numeric: tabular-nums; }

/* Défilement fluide et transitions : à la demande du visiteur seulement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}