/* ============================================================
   Socle de la charte du site vitrine — source UNIQUE.

   Avant ce fichier, quatre pages redeclaraient chacune leur :root
   (landing.py, fonctionnalites.py/STYLE_VITRINE, legal.py,
   page_demo_acces.py). Changer une couleur voulait dire la changer
   quatre fois, et elles avaient fini par diverger.

   DA « terrain / cartographique », accent violet profond.
   Attention en relisant : le site est parti d'un degrade violet
   #667eea -> #764ba2, celui des generateurs de landing, et y revient
   en apparence. Ce n'est pas la meme chose. Ce qui faisait « genere »
   n'etait pas la teinte, c'etaient le DEGRADE et ses motifs : hero
   degrade plein ecran, pastilles a icone, fenetre macOS a trois
   points, coches vertes, cartes clonees. Il ne reste qu'un aplat
   violet unique et aucune surface degradee.

   Ratios WCAG MESURES (pas estimes), le 06/09/2026 :
     accent #4338ca   -> 6.76:1 sur le papier, 7.90:1 en blanc dessus
       (indigo profond : l'ecart rouge-vert tombe de 69 a 11, l'accent
        precedent tirait au magenta)
     hover  #372ea8   -> 9.91:1 en blanc dessus
     ink    #241a3d   -> violet nuit, 16.28:1 en blanc dessus
       (l'encre precedente, #161320, etait presque noire : indice 3)
     body   #38333f   -> 10.48:1
     muted  #625c6e   ->  5.48:1   (le plus juste : ne pas l'eclaircir)
     accent clair #c0b6f2 -> 8.69:1 sur l'encre
     vert   #0f6b48   ->  5.58:1
   ============================================================ */

:root {
  /* ---- Accent : un seul, en aplat comme en texte ---- */
  --brand1: #4338ca;
  --brand2: #372ea8;
  --brand-txt: #4338ca;
  /* --grad et --grad-btn ne sont plus des degrades mais des aplats.
     Les noms sont conserves : le HTML partage (footer, bloc tarifs)
     s'y refere encore. On remappe les valeurs, on ne renomme pas. */
  --grad: #4338ca;
  --grad-btn: #4338ca;
  --accent-clair: #c0b6f2;   /* l'accent remonte, pour les fonds sombres */

  /* ---- Neutres, famille FROIDE ---- */
  --ink: #241a3d;            /* violet-noir profond : fonds sombres et titres */
  --body: #38333f;
  --muted: #625c6e;
  --line: #dcd6e6;
  --bg-soft: #efecf3;        /* le papier : fond de page */
  --surface: #fdfcff;        /* ce qui porte du contenu, pose AU-DESSUS du papier */
  --green: #0f6b48;

  /* ---- Ombres neutres et discretes ---- */
  --shadow: 0 1px 2px rgba(22,19,32,.06), 0 12px 32px rgba(22,19,32,.10);
  --shadow-sm: 0 1px 2px rgba(22,19,32,.07);

  /* ---- Typo et mouvement ---- */
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* ---- Alias pour page_demo_acces.py, qui nomme ses tokens autrement.
          Ils pointent sur les memes valeurs : la page garde son CSS tel
          quel et suit la charte sans etre reecrite. ---- */
  --bg: #efecf3;
  --surface-2: #e7e2ee;
  --line-soft: #e7e2ee;
  --text: #38333f;
  --heading: #241a3d;
  --accent: #4338ca;
  --accent-d: #372ea8;
  --accent-soft: #e9e7fb;
  --vert: #0f6b48;
  --ombre: 0 1px 2px rgba(22,19,32,.06), 0 12px 32px rgba(22,19,32,.10);
  --r: 6px;
}

/* ---------- Fondamentaux communs a toutes les pages ----------
   Le tracking est propre a CHAQUE taille : un letter-spacing unique est
   forcement faux quelque part. Plus le texte grandit, plus il se
   resserre ; le corps reste a zero ; les capitales en petit corps
   s'aerent (traite dans les libelles mono de chaque page). */
h1 { letter-spacing: -0.042em; line-height: 1.02; }
h2 { letter-spacing: -0.03em;  line-height: 1.08; }
h3 { letter-spacing: -0.008em; line-height: 1.25; }
body, p, li, td, th { letter-spacing: 0; }

/* Le retour se fait a l'APPUI, pas au relachement : un bouton qui
   n'affiche son etat qu'au clic relache parait mort. `transform` seul,
   rien qui sorte du compositeur. */
.btn:active, button:active, .cta:active { transform: scale(0.97); }

/* L'anneau de focus n'est jamais supprime. */
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand1);
  outline-offset: 3px;
}

/* ---------- Fond de carte ----------
   Les tuiles OSM standard sont vertes, jaunes et rouges : sur la charte
   elles ramenaient trois couleurs de plus. Desaturees, elles deviennent un
   fond de plan et laissent le trace de l'accent etre la seule couleur.
   Le filtre porte sur le CONTENEUR et non sur chaque tuile : applique tuile
   par tuile, Chrome laisse une couture claire aux jointures. */
/* Le fond OSM porte du jaune vif (autoroutes) et du noir pur (libelles) :
   il faut le desaturer pour l'accorder a la charte, sans l'aplatir. */
.leaflet-tile-pane { filter: grayscale(0.72) saturate(0.9) brightness(1.02) contrast(1.12)
                             sepia(0.16) hue-rotate(212deg); }

/* ---------- Captures de l'application ----------
   Ce sont des IMAGES figees : le filtre pose sur les tuiles Leaflet ne peut
   rien pour elles. Elles portent des fonds de carte satures (vert, jaune,
   rouge) et, surtout, l'ANCIENNE identite violette de l'application, qui
   n'a pas encore ete refaite. Les desaturer les accorde a la charte et
   atténue cet ecart, en attendant que l'app soit reprise.
   ⚠ Mesure transitoire : a retirer le jour ou les captures sont refaites. */
.shot img, .shots img, figure.shot img {
  filter: grayscale(0.82) contrast(0.95) brightness(1.04) sepia(0.08) hue-rotate(215deg);
}

/* ---------- Reglages systeme, livres avec, pas apres ----------
   Mouvement reduit : l'enfoncement tombe, les retours de couleur restent
   -- un equivalent plus doux, pas une suppression du retour. */
@media (prefers-reduced-motion: reduce) {
  .btn:active, button:active, .cta:active { transform: none; }
}
/* Transparence reduite : les materiaux flous redeviennent des aplats. */
@media (prefers-reduced-transparency: reduce) {
  .nav, .nav.defile, .toolbar {
    background: var(--bg-soft) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
/* Contraste renforce : bordures franches. */
@media (prefers-contrast: more) {
  .btn-ghost, .btn-secondary { border-color: currentColor; }
}