/*
 * Direction : bord de bassin a maree basse. Fond blanc coquille, encre ardoise,
 * bleu du lac herite de la charte de 2020, signal corail pour les alertes.
 * Lato pour les titres, Oxygen pour le texte, monospace pour les donnees de fiche.
 *
 * Ces trois lignes arbitrent les decisions de detail des semaines suivantes.
 * Sans direction ecrite, chaque ajustement se discute a partir de rien.
 *
 * REGLE ABSOLUE : aucune couleur n'est declaree uniquement dans un bloc de media
 * query. Les deux palettes passent par les memes jetons, en trois blocs.
 *
 * Contrastes verifies le 2026-09-23 sur le produit croise encre x fond, dans les
 * deux palettes : 42 paires, 0 echec, seuil 4,5 pour le texte.
 * Le controle se rejoue par : bin/contraste.py data/palette-proposee.json
 */

:root {
  /* ---- couleurs, par ROLE et non par teinte ---- */
  --ground:        #ffffff;
  --surface:       #e5e8ec;   /* le gris de la charte 2020 */
  --surface-2:     #fafafa;

  --ink:           #323943;   /* charte 2020, inchange */
  --ink-2:         #4d5765;
  --ink-3:         #5b6775;   /* descendu de #5f6b7a : 4,41 sur --surface */

  --rule:          #c9d1d9;
  --rule-soft:     #e8ecf0;

  --accent:        #00467a;   /* LE bleu du site. Ne bouge pas. */
  --accent-hover:  #00233d;   /* charte 2020 */
  --accent-2:      #00718f;   /* #0091b8 assombri pour atteindre 4,5 en TEXTE */
  --accent-decor:  #008fb5;   /* #0091b8 quasi intact, filets et decor, seuil 3 */
  --accent-soft:   #e8f1f6;
  --on-accent:     #ffffff;

  --signal:        #cb1e25;   /* #CF1F26 d'un cheveu, pour passer sur --surface */
  --signal-soft:   #fdeaeb;

  /* ---- typographie, echelle fluide : plus aucune media query de taille ---- */
  --font-titre: 'Lato', 'Trebuchet MS', Arial, sans-serif;
  --font-texte: 'Oxygen', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
  --font-data:  ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.11rem + 0.44vw, 1.45rem);
  --step-2:  clamp(1.44rem, 1.29rem + 0.73vw, 1.86rem);
  --step-3:  clamp(1.73rem, 1.49rem + 1.16vw, 2.38rem);
  --step-4:  clamp(2.07rem, 1.72rem + 1.78vw, 3.05rem);

  /* ---- espace et forme ---- */
  --gap:         1rem;
  --section:     clamp(2.5rem, 1.8rem + 3.5vw, 5rem);
  --wrap:        1200px;
  --wrap-narrow: 720px;
  --radius:      4px;
  --shadow:      0 1px 3px rgba(0, 35, 61, 0.10), 0 4px 16px rgba(0, 35, 61, 0.06);

  /* Toute mesure partagee entre composants est un jeton.
     Codee deux fois en dur, elle se desynchronise au premier ajustement. */
  --header-h:    68px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:       #0b1a24;
    --surface:      #12242f;
    --surface-2:    #0f1e28;

    --ink:          #e6edf2;
    --ink-2:        #c3d0da;
    --ink-3:        #a3b3c0;

    --rule:         #2a3f4d;
    --rule-soft:    #1b2f3b;

    --accent:       #5cc4e4;
    --accent-hover: #8ad8f0;
    --accent-2:     #7fd0e8;
    --accent-decor: #5cc4e4;
    --accent-soft:  #13303d;
    --on-accent:    #06131b;

    --signal:       #ff8a8f;
    --signal-soft:  #33191b;

    --shadow:       0 1px 3px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.30);
  }
}

/* Le choix explicite gagne, dans les DEUX sens.
   Le :not([data-theme="light"]) ci-dessus permet a un visiteur sous systeme
   sombre de forcer le clair. Sans lui, le bouton ne marche que dans un sens,
   et c'est le bug qu'on ne voit pas quand on developpe sous systeme clair. */
:root[data-theme="dark"] {
  --ground:       #0b1a24;
  --surface:      #12242f;
  --surface-2:    #0f1e28;

  --ink:          #e6edf2;
  --ink-2:        #c3d0da;
  --ink-3:        #a3b3c0;

  --rule:         #2a3f4d;
  --rule-soft:    #1b2f3b;

  --accent:       #5cc4e4;
  --accent-hover: #8ad8f0;
  --accent-2:     #7fd0e8;
  --accent-decor: #5cc4e4;
  --accent-soft:  #13303d;
  --on-accent:    #06131b;

  --signal:       #ff8a8f;
  --signal-soft:  #33191b;

  --shadow:       0 1px 3px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.30);
}