/* Systeme visuel commun a tout le site — direction « editoriale ».
 *
 * Charge AVANT le <style> de chaque gabarit : les regles propres a une page
 * (grilles de vignettes, cartes de chaleur, onglets du simulateur...) restent
 * dans leur gabarit et l'emportent naturellement sur ce fichier. Ici on ne met
 * que ce qui doit etre identique partout : polices, couleurs, titres, tableaux,
 * boutons, notes, pied de page.
 *
 * Parti pris, apres mesure (cf. DEPLOY.md) : le produit du site, ce sont des
 * CHIFFRES. Ils sont donc composes en Fraunces (serif a caractere), en gros, et
 * la couleur est rare pour qu'elle signifie quelque chose quand elle apparait.
 * Les blocs encadres cedent la place a des filets : un tableau a sept colonnes
 * se lit, encadre il s'empile.
 *
 * Polices AUTO-HEBERGEES (OFL, redistribuables) et jamais chargees depuis le
 * CDN Google : celui-ci transmet l'IP des visiteurs hors UE, et trois requetes
 * bloquantes vers un tiers ruineraient la compression activee cote Caddy.
 */

@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight: 100 900;          /* police variable : une seule ressource */
  font-style: normal;
  font-display: swap;            /* le texte s'affiche tout de suite, en repli */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "InterVF";
  src: url("/static/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  --papier: #fbfaf7;
  --bg: #fbfaf7;                 /* alias : les gabarits utilisent deja --bg */
  --carte: #ffffff;
  --card: #ffffff;               /* alias historique */
  --encre: #14140f;
  --ink: #14140f;
  --doux: #6d6a60;
  --muted: #6d6a60;
  --trait: #e3e0d8;
  --line: #e3e0d8;
  --trait-fort: #14140f;
  --accent: #8c2f24;             /* rouge terre — rare, donc lu */
  --accent-ink: #ffffff;
  --vert: #3f6b4a;
  --gold: #8a6d1f;
  --gold-bg: #faf5e6;
  --radius: 4px;                 /* quasi droit : l'arrondi appartenait a l'ancien style */

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "InterVF", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  background: var(--papier);
  color: var(--encre);
  font-variant-numeric: tabular-nums;   /* les colonnes de chiffres s'alignent */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- titres : le serif porte l'identite ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.08; }
h2 { font-size: 1.35rem; line-height: 1.2; }
h3 { font-size: 1.05rem; }

.chapo { font-size: 1.02rem; line-height: 1.62; color: #3a382f; max-width: 66ch; }
.chapo b, .chapo strong { font-weight: 600; color: var(--encre); }

a { color: var(--accent); }

/* ---------- marque ---------- */
.logo, .marque {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.01em;
  color: var(--encre); text-decoration: none;
}

/* ---------- chiffres mis en scene ---------- */
.carte .v, .stat .v, .vc .v, .parc .v {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.025em; line-height: 1;
}
.carte .k, .stat .k, .vc .vk, .lab {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--doux); font-weight: 600;
}
.carte .s, .stat .s, .sous {
  font-size: .78rem; color: var(--doux); line-height: 1.45;
  text-wrap: pretty;             /* evite le « % » orphelin en fin de ligne */
}

/* Les cartes deviennent des blocs sobres : filet fin, pas d'arrondi marque. */
.carte, .stat {
  background: var(--carte); border: 1px solid var(--trait); border-radius: var(--radius);
}

/* ---------- tableaux : filets, jamais de boites ---------- */
table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
thead th {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--doux); font-weight: 600; border-bottom: 1px solid var(--trait-fort);
}
tbody td { border-bottom: 1px solid var(--trait); }
tbody tr:hover td { background: #f4f2ec; }
td.num, th.num { text-align: right; }

/* ---------- boutons et rangee d'actions ----------
   Source unique : ces regles etaient recopiees (avec de petites variantes
   d'arrondi et de graisse) dans 14 gabarits. Un gabarit ne les redefinit
   plus ; l'accueil garde ses propres variantes (.btn-primary, .btn-ghost). */
.actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-block; padding: 12px 20px; font-family: var(--sans);
  font-weight: 700; font-size: .9rem; border-radius: 6px;
  background: var(--accent); color: #fff; text-decoration: none;
}
.btn.secondaire {
  background: var(--carte); color: var(--encre); border: 1px solid var(--trait);
}
.btn:hover { opacity: .92; }

/* ---------- notes et pied de page ---------- */
.notes, footer { font-size: .78rem; color: var(--doux); line-height: 1.62; }
.notes { background: transparent; border: none; border-top: 1px solid var(--trait);
         border-radius: 0; padding: 20px 0 0; }
footer a { color: var(--doux); }

/* ---------- accessibilite ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}