/* Système de design Letubevert — « modèle 2027 ».
 *
 * Le site s'était construit page par page : l'accueil en verre dépoli, le portail
 * en atelier sombre, « À la une » en éditorial clair, le référentiel sans
 * navigation. Même code couleur, trois écritures différentes.
 *
 * Ce fichier pose le vocabulaire commun. Il ne remplace pas Tailwind, qui reste
 * pour la mise en page : il fixe ce que Tailwind ne sait pas tenir d'une page à
 * l'autre — les polices, l'échelle typographique, le traitement des chiffres et
 * les quelques composants qui portent le propos.
 *
 * Le code couleur ne change pas. Le vert reste la marque, et la palette de charge
 * (jaune, orange, rouge) garde le sens qu'elle a sur les deux cartes : une couleur
 * veut dire la même chose partout.
 */

@import url("/fonts/fonts.css");

:root{
  /* --- marque, inchangée --- */
  --vert:        #00A86B;
  --vert-clair:  #10B981;
  --vert-sombre: #065F46;
  --vert-pale:   #E6F7F0;

  /* --- charge, identique aux deux cartes --- */
  --froid: #ffd43b;   /* moins de 400 trajets/jour */
  --ambre: #ff922b;   /* de 400 à 1 000 */
  --flamme:#ff4d2e;   /* plus de 1 000 */

  /* --- encre et fonds --- */
  --encre:       #0b1014;
  --encre-douce: #1e293b;
  --gris:        #64748b;
  --gris-clair:  #94a3b8;
  --trait:       #e2e8f0;
  --papier:      #ffffff;
  --papier-casse:#fafafa;

  /* --- fonds sombres, pour les panneaux de données --- */
  --nuit:       #0f171c;
  --nuit-trait: #28383f;
  --nuit-encre: #dce6ea;

  --rayon: 14px;
  --mesure: 68ch;          /* longueur de ligne confortable */
}

/* --- typographie ------------------------------------------------------- */

body{
  font-family:"Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings:"kern" 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

.titre, h1.titre, h2.titre, h3.titre{
  font-family:"Fraunces", Georgia, serif;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.08;
}

/* Les chiffres s'alignent en colonne : sans cela une mesure qui change sous le
   curseur fait sautiller toute la ligne. */
.chiffre, .mono{ font-variant-numeric:tabular-nums }
.mono{
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric:tabular-nums;
}

/* Surtitre de section : court, espacé, jamais criard. */
.surtitre{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:10.5px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gris);
}

/* Le texte courant ne dépasse pas la mesure : au-delà, l'œil perd la ligne. */
.mesure{ max-width:var(--mesure) }

/* --- ce qui est mesuré, ce qui est supposé ------------------------------
   Distinction centrale du projet : un chiffre mesuré et une hypothèse ne se
   présentent pas de la même façon, et le lecteur doit le voir sans lire la note. */

.marque-source{
  display:inline-flex; align-items:center; gap:5px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:9.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; border-radius:9999px; white-space:nowrap;
}
.marque-source::before{ content:""; width:5px; height:5px; border-radius:9999px }

.marque-mesure{ color:var(--vert-sombre); background:var(--vert-pale) }
.marque-mesure::before{ background:var(--vert) }

.marque-hypothese{ color:#92400e; background:#fef3c7 }
.marque-hypothese::before{ background:#d97706 }

.marque-derive{ color:#1e40af; background:#dbeafe }
.marque-derive::before{ background:#2563eb }

/* sur fond sombre, les mêmes marques tiennent sans éclat */
.sombre .marque-mesure{ color:#6ee7b7; background:rgba(16,185,129,.14) }
.sombre .marque-hypothese{ color:#fcd34d; background:rgba(217,119,6,.18) }
.sombre .marque-derive{ color:#93c5fd; background:rgba(37,99,235,.18) }

/* --- la tuile de chiffre ------------------------------------------------ */

.tuile{
  background:var(--papier); border:1px solid var(--trait);
  border-radius:var(--rayon); padding:18px 18px 16px;
  display:flex; flex-direction:column; gap:3px;
}
.tuile-valeur{
  font-family:"Fraunces", Georgia, serif;
  font-size:clamp(26px, 3.4vw, 36px); font-weight:700; line-height:1;
  letter-spacing:-.025em; color:var(--encre); font-variant-numeric:tabular-nums;
}
.tuile-valeur em{ font-style:normal; color:var(--vert) }
.tuile-libelle{ font-size:12.5px; color:var(--gris); line-height:1.4; margin-top:5px }
.tuile-note{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:9.5px; color:var(--gris-clair); line-height:1.45; margin-top:7px;
  padding-top:7px; border-top:1px solid var(--trait);
}

.sombre .tuile{ background:rgba(15,23,28,.72); border-color:var(--nuit-trait) }
.sombre .tuile-valeur{ color:#fff }
.sombre .tuile-libelle{ color:#8ea3af }
.sombre .tuile-note{ color:#6f858f; border-top-color:var(--nuit-trait) }

/* --- la carte de choix (les deux cartographies) ------------------------- */

.choix{
  display:block; background:var(--papier); border:1px solid var(--trait);
  border-radius:var(--rayon); padding:22px 22px 20px; text-decoration:none;
  color:inherit; position:relative; overflow:hidden;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.choix::after{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--vert); opacity:0; transition:opacity .18s ease;
}
.choix:hover, .choix:focus-visible{
  border-color:var(--vert); transform:translateY(-2px);
  box-shadow:0 14px 34px -18px rgba(0,168,107,.45);
}
.choix:hover::after, .choix:focus-visible::after{ opacity:1 }
@media (prefers-reduced-motion:reduce){
  .choix, .choix:hover, .choix:focus-visible{ transform:none; transition:none }
}

.choix-question{
  font-family:"Fraunces", Georgia, serif; font-size:20px; font-weight:700;
  line-height:1.22; letter-spacing:-.015em; color:var(--encre); margin:9px 0 0;
}
.choix-texte{ font-size:13.5px; color:var(--gris); line-height:1.55; margin:9px 0 0 }

/* La ligne de chiffres qui distingue les deux cartes : même gabarit, donc
   comparables d'un coup d'œil. */
.choix-faits{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  margin:16px 0 0; padding-top:14px; border-top:1px solid var(--trait);
}
.choix-faits div{ min-width:0 }
.choix-faits dt{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gris-clair); margin:0;
}
.choix-faits dd{
  margin:3px 0 0; font-size:17px; font-weight:700; color:var(--encre);
  font-variant-numeric:tabular-nums; letter-spacing:-.015em;
}
.choix-faits dd small{ font-size:10.5px; font-weight:400; color:var(--gris) }

/* --- liens et boutons --------------------------------------------------- */

.bouton{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:9999px; font-weight:600; font-size:14px;
  text-decoration:none; transition:background-color .18s ease, color .18s ease;
}
.bouton-plein{ background:var(--vert); color:#fff }
.bouton-plein:hover{ background:var(--vert-sombre) }
.bouton-creux{ border:1px solid var(--trait); color:var(--encre); background:var(--papier) }
.bouton-creux:hover{ border-color:var(--vert); color:var(--vert-sombre) }

:where(a, button, [tabindex]):focus-visible{
  outline:2px solid var(--vert-clair); outline-offset:3px; border-radius:6px;
}

/* --- séparateur de section ---------------------------------------------- */

.filet{ border:0; border-top:1px solid var(--trait); margin:0 }
.sombre .filet{ border-top-color:var(--nuit-trait) }

/* --- titrage, pour toutes les pages ------------------------------------
   Les titres passaient d'un sans extra-gras a l'autre selon la page. Une seule
   regle les reunit : Fraunces en titrage, Public Sans en lecture. Les classes de
   taille et de graisse de Tailwind continuent de s'appliquer par-dessus ; seules
   la famille et l'approche changent. */
h1, h2{
  font-family:"Fraunces", Georgia, serif;
  letter-spacing:-.025em;
  line-height:1.1;
}
h3{ letter-spacing:-.012em }