/* =============================================================================
   budgetatrous.fr — thème « le trou », en bleu-blanc-rouge
   Fond gris clair, cartes bleues, rouge pour ce qui creuse le trou, bleu pour ce
   qui le rebouche, et le trou toujours noir. Liseré tricolore sous l'en-tête.
   Pas de Marianne ni de typographie de l'État : le site reste indépendant et ne
   doit pas passer pour un site officiel.
   Titres en Archivo serré, texte en Atkinson Hyperlegible (lisibilité).
   ============================================================================= */

:root {
  --fond: #EEF0F3;
  --surface: #FFFFFF;
  --encre: #16181D;
  --texte-2: #4A505C;
  --muet: #5B6270;
  --ligne: #D8DCE2;
  --bleu: #1E3A8A;
  --bleu-fonce: #16296B;
  --bleu-doux: #E3E9F7;
  --bleu-clair: #D3DDF5;
  --rouge: #D7263D;
  --accent: var(--rouge);
  --accent-fonce: #B01E33;
  --accent-tres-fonce: #7A1420;
  --accent-doux: #FBE3E6;
  --accent-clair: #FFD9DE;
  --vert: var(--bleu);         /* « rebouche le trou » = bleu */
  --tricolore: linear-gradient(90deg, var(--bleu) 0 33.33%, #FFFFFF 33.33% 66.66%, var(--rouge) 66.66% 100%);

  --titre: "Archivo", "Arial Narrow", "Segoe UI", sans-serif;
  --corps: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  --rayon: 20px;
  --ombre-trou: inset 0 8px 18px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .6);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 16px/1.5 var(--corps); }
img { max-width: 100%; }
a { color: var(--accent-fonce); }
a:hover { color: var(--accent-tres-fonce); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }

.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 16px; background: var(--surface); padding: 8px 12px; z-index: 10; }

.conteneur { max-width: 1180px; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
.page { padding-block: 40px 64px; display: flex; flex-direction: column; gap: 48px; }

/* --- Le trou : l'élément signature --------------------------------------- */
.trou { display: inline-block; background: var(--encre); border-radius: 50%; box-shadow: var(--ombre-trou); flex: none; }
.trou--m { width: 46px; height: 46px; }
.trou--l { width: 72px; height: 72px; }
.trou--xl { width: 96px; height: 96px; }
.trou--cercle { box-shadow: inset 0 8px 18px rgba(0, 0, 0, .9), 0 0 0 6px var(--accent); }

/* --- En-tête -------------------------------------------------------------- */
.entete { background: var(--surface); position: relative; }
.entete::after { content: ""; display: block; height: 6px; background: var(--tricolore); box-shadow: 0 1px 0 var(--ligne); }
.entete__ligne { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-block: 14px; }
.logo { display: inline-flex; align-items: baseline; text-decoration: none; color: var(--encre);
        font: 900 26px/1 var(--titre); font-stretch: 85%; letter-spacing: -.01em; }
.logo__o { width: 18px; height: 18px; align-self: center; margin: 4px 1px 0; }
.logo__tld { font-weight: 600; font-size: 15px; color: var(--accent); margin-left: 2px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nav__lien { padding: 10px 14px; border-radius: 8px; color: var(--encre); text-decoration: none; }
.nav__lien:hover { background: var(--fond); color: var(--encre); }
.nav__lien--actif { background: var(--bleu-doux); color: var(--bleu-fonce); font-weight: 700; }

/* --- Typographie ---------------------------------------------------------- */
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.titre-xl { font: 900 clamp(2.4rem, 6vw, 4rem)/.98 var(--titre); font-stretch: 80%; letter-spacing: -.01em; }
.titre-l { font: 800 clamp(1.7rem, 3.6vw, 2.25rem)/1.05 var(--titre); font-stretch: 85%; }
.titre-m { font: 800 1.35rem/1.15 var(--titre); font-stretch: 90%; }
.surtitre { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--bleu); }
.surtitre--clair { color: var(--bleu-clair); }
.chapo { font-size: 1.15rem; color: var(--texte-2); max-width: 52ch; }
.muet { color: var(--muet); }
.muet-clair { color: #C9CDD6; }
.petit { font-size: 14px; }
.source { font-size: 13px; color: var(--muet); }
.centre { text-align: center; }
.droite { text-align: right; }
.accent { color: var(--accent-fonce); }
.positif { color: var(--vert); }
.negatif { color: var(--accent-fonce); }
.chiffre-xl { display: block; font: 900 clamp(2.6rem, 7vw, 3.8rem)/1 var(--titre); font-stretch: 85%; font-variant-numeric: tabular-nums; }
.chiffre-l { display: block; font: 900 2.4rem/1.05 var(--titre); font-variant-numeric: tabular-nums; }
.chiffre-m { display: block; font: 800 1.6rem/1.1 var(--titre); font-variant-numeric: tabular-nums; }
.texte { display: flex; flex-direction: column; gap: 14px; max-width: 70ch; }

/* --- Boutons, puces ------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bouton { display: inline-block; padding: 14px 20px; border-radius: 10px; font: 700 1rem var(--corps);
          text-decoration: none; border: 2px solid transparent; cursor: pointer; text-align: center; }
.bouton--sombre { background: var(--encre); color: #fff; }
.bouton--sombre:hover { color: #fff; background: #2A2E37; }
.bouton--contour { border-color: var(--encre); color: var(--encre); background: transparent; }
.bouton--accent { background: var(--rouge); color: #fff; }
.bouton--accent:hover { background: var(--accent-fonce); color: #fff; }
.bouton--plein { width: 100%; }
.puces, .filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { font: 14px var(--corps); padding: 10px 14px; border-radius: 999px; border: 2px solid var(--ligne);
        background: var(--surface); color: var(--encre); cursor: pointer; }
.puce[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.tampon { display: inline-block; transform: rotate(-4deg); border: 2px solid var(--accent-fonce); color: var(--accent-fonce);
          font: 800 12px var(--titre); letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.badge--elevee { background: var(--bleu-doux); color: var(--bleu-fonce); }
.badge--moyenne { background: #FFF3D6; color: #7A5300; }
.badge--faible { background: var(--accent-doux); color: var(--accent-tres-fonce); }

/* --- Blocs et cartes ------------------------------------------------------ */
.bloc { display: flex; flex-direction: column; gap: 16px; }
.bloc--blanc { background: var(--surface); border-radius: 24px; padding: 28px; }
.entete-bloc { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: end; }
.intro { display: flex; flex-direction: column; gap: 12px; }
.intro--candidat { flex-direction: row; align-items: center; gap: 20px; }
.carte { background: var(--surface); border-radius: var(--rayon); padding: 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.carte--ligne { flex-direction: row; align-items: center; gap: 18px; }
.carte--ligne > span:last-child > span { display: block; }
.carte--sombre { background: var(--encre); color: #fff; }
.carte--info { background: var(--bleu-doux); color: var(--bleu-fonce); }
.carte--lien { flex-direction: row; gap: 16px; text-decoration: none; color: var(--encre); }
.carte--lien > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.carte--candidat { text-decoration: none; color: var(--encre); }
.grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.grille-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.grille-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }

/* --- Accueil : hero et carte percée -------------------------------------- */
.hero { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.hero__texte { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.carte-trou { flex: 0 1 440px; aspect-ratio: 1; max-width: 100%; background: var(--bleu); border-radius: 28px;
              position: relative; display: grid; place-items: center; box-shadow: 0 18px 40px rgba(30, 58, 138, .28); overflow: hidden; }
.carte-trou::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--tricolore); }
.carte-trou__trou { box-shadow: var(--ombre-trou), 0 0 0 8px var(--rouge); }
.carte-trou__legende { position: absolute; top: 26px; left: 24px; color: var(--bleu-clair); font-size: 14px; display: flex; flex-direction: column; }
.carte-trou__legende strong { color: #fff; }
.carte-trou__trou { width: 62%; aspect-ratio: 1; display: grid; place-items: center; text-align: center; }
.carte-trou__valeur { display: flex; flex-direction: column; gap: 4px; color: #C9CDD6; padding: 12px; }
.carte-trou__valeur strong { font: 900 clamp(2rem, 6vw, 3.2rem)/1 var(--titre); font-stretch: 85%; color: #fff; }
.carte-trou__pct { color: #FF8C9B; font-weight: 700; }
.carte-trou__source { position: absolute; bottom: 20px; right: 24px; color: var(--bleu-clair); font-size: 13px; }

/* --- 100 pièces ----------------------------------------------------------- */
.pieces { flex-direction: row; flex-wrap: wrap; gap: 36px; align-items: center; }
.pieces__texte { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.legende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 15px; }
.legende li { display: flex; align-items: center; gap: 10px; }
.legende li > span:nth-child(2) { flex: 1; }
.legende strong { font-variant-numeric: tabular-nums; }
.legende__total { padding-top: 6px; border-top: 1px dashed var(--ligne); font-weight: 700; }
.pastille { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.pastille--trou { background: var(--encre); box-shadow: var(--ombre-trou); }
.grille-pieces { flex: 0 1 420px; min-width: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; }
.piece { aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
/* Pièce trouée : l'euro existe, mais il a été emprunté */
.piece--trouee { background: radial-gradient(circle, var(--encre) 0 45%, var(--c) 46%); }

/* --- Barres du déficit (elles descendent comme des trous) ---------------- */
.graphique-defile { overflow-x: auto; }
.barres { position: relative; min-width: 640px; display: flex; gap: 12px; align-items: flex-start;
          border-top: 3px solid var(--encre); height: calc(var(--h) * 1px + 60px); }
.barres__limite { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--accent); }
.barres__limite span { position: absolute; right: 0; top: -10px; font-size: 12px; font-weight: 700; color: var(--accent-fonce); background: var(--surface); padding: 0 4px; }
.barres__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.barres__barre { width: 100%; max-width: 52px; background: var(--encre); border-radius: 0 0 26px 26px; box-shadow: inset 0 6px 10px rgba(0, 0, 0, .35); }
.barres__barre--ok { background: var(--bleu); }
.barres__val { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barres__an { font-size: 12px; color: var(--muet); }

/* --- Bandeau final -------------------------------------------------------- */
.bandeau { background: var(--bleu-fonce); color: #fff; border-radius: 28px; padding: 36px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center;
           position: relative; overflow: hidden; }
.bandeau::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--tricolore); }
.bandeau > div { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bandeau p { color: var(--bleu-clair); max-width: 55ch; }

/* --- Candidats ------------------------------------------------------------ */
.candidat { display: flex; align-items: center; gap: 12px; }
.candidat__pastille { width: 44px; height: 44px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.candidat__pastille--l { width: 72px; height: 72px; font-size: 20px; }
.candidat__nom { display: flex; flex-direction: column; min-width: 0; }
.candidat__net { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding-top: 10px; border-top: 1px dashed var(--ligne); font-size: 14px; margin-top: auto; }
.liste-fiches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fiche__tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }

/* --- Simulateur ----------------------------------------------------------- */
.simulateur { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.simulateur__mesures { flex: 999 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.simulateur__resultat { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.liste-mesures { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mesure { width: 100%; font: inherit; text-align: left; display: flex; gap: 14px; align-items: center; padding: 14px 16px;
          border-radius: 16px; border: 2px solid var(--ligne); background: var(--surface); color: var(--encre); cursor: pointer; }
.mesure:disabled { cursor: default; opacity: .8; }
.mesure__case { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ligne); flex: none; display: grid; place-items: center; }
.mesure[aria-pressed="true"] { border-color: var(--accent); }
.mesure[aria-pressed="true"] .mesure__case { background: var(--accent); border-color: var(--accent); }
.mesure[aria-pressed="true"] .mesure__case::after { content: "✓"; color: #fff; font-weight: 700; font-size: 14px; }
.mesure__texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mesure__effet { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.mesure__effet span { font-size: 12px; color: var(--muet); }
.carte-orange { background: var(--bleu); color: #fff; border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 14px;
                position: relative; overflow: hidden; }
.carte-orange::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--tricolore); }
.carte-orange--ligne { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.carte-orange .muet-clair { color: var(--bleu-clair); }
.cible { position: relative; aspect-ratio: 1; width: 100%; display: grid; place-items: center; }
.cible__limite { position: absolute; aspect-ratio: 1; border-radius: 50%; border: 2px dashed #FFFFFF; }
.cible__trou { box-shadow: var(--ombre-trou), 0 0 0 5px var(--rouge); }
.cible__trou { aspect-ratio: 1; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.cible__texte { position: absolute; display: flex; flex-direction: column; align-items: center; text-align: center; color: #C9CDD6; }
.cible__texte strong { font: 900 2.8rem/1 var(--titre); font-stretch: 85%; color: #fff; }
.cible--bouche .cible__texte, .cible--bouche .cible__texte strong { color: var(--encre); }
.encart { background: rgba(10, 18, 48, .28); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.encart strong { font: 900 2rem/1.05 var(--titre); font-variant-numeric: tabular-nums; }

/* --- Calculette ----------------------------------------------------------- */
.calculette { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.calculette__saisie { flex: 1 1 340px; gap: 12px; }
.calculette__saisie label { font-weight: 700; }
.calculette__resultat { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.champ { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.champ input { font: 700 1.4rem var(--corps); width: 100%; padding: 12px; border: 2px solid var(--ligne); border-radius: 12px; color: var(--encre); background: var(--surface); }
.detail { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; padding-top: 12px; border-top: 1px dashed var(--ligne); font-size: 14px; }
.detail dt { margin: 0; }
.detail dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.repartition { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.repartition__ligne { display: flex; justify-content: space-between; gap: 10px; }
.repartition strong { font-variant-numeric: tabular-nums; }
.jauge { display: block; height: 12px; background: var(--fond); border-radius: 6px; margin-top: 4px; }
.jauge span { display: block; height: 12px; border-radius: 6px; }

/* --- Fuites (fourchette) -------------------------------------------------- */
.fourchette { display: flex; flex-direction: column; gap: 8px; }
.fourchette__barre { height: 18px; background: var(--fond); border-radius: 9px; position: relative; }
.fourchette__barre span { position: absolute; left: 15%; right: 15%; top: 0; bottom: 0; border-radius: 9px;
                          background: repeating-linear-gradient(45deg, #E8798A 0 6px, var(--accent-clair) 6px 12px); }
.fourchette__bornes { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }

/* --- Pied de page --------------------------------------------------------- */
.pied { border-top: 1px solid var(--ligne); background: var(--surface); }
.pied__ligne { padding-block: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muet); }

@media (max-width: 640px) {
  .page { padding-block: 24px 48px; gap: 36px; }
  .bloc--blanc, .bandeau { padding: 20px; }
  .simulateur__resultat { position: static; }
  .intro--candidat { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =============================================================================
   Page « Pour les jeunes »
   ============================================================================= */
.dates { display: flex; flex-wrap: wrap; gap: 10px; }
.puce-date { background: var(--bleu-doux); color: var(--bleu-fonce); font-weight: 700; padding: 6px 12px; border-radius: 999px; font-size: .92rem; }
.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.role__titre { display: flex; align-items: center; gap: 10px; }
.role__icone { width: 36px; height: 36px; flex: none; color: var(--bleu); }
.etapes { background: var(--surface); border-radius: var(--rayon); overflow: hidden; }
.etapes__nav { display: flex; border-bottom: 1px solid var(--ligne); }
.etapes__nav button { flex: 1; font: 700 1rem var(--corps); padding: 14px 6px; background: none; border: 0; color: var(--muet);
                      cursor: pointer; border-bottom: 3px solid transparent; }
.etapes__nav button[aria-selected="true"] { color: var(--bleu); border-bottom-color: var(--bleu); }
.etapes__scene { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.pions { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.pion { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .72rem;
        transition: transform .5s, opacity .5s; }
.pion--sorti { opacity: .15; transform: scale(.7); }
.pion--elu { transform: scale(1.35); box-shadow: 0 0 0 3px var(--bleu), 0 0 0 6px var(--rouge); }
.axe { background: var(--surface); border-radius: var(--rayon); padding: 18px 14px; overflow-x: auto; }
.axe__interieur { position: relative; min-width: 640px; height: 250px; margin: 0 56px; }
.axe__ligne { position: absolute; left: 0; right: 0; top: 118px; height: 8px; border-radius: 4px;
              background: linear-gradient(90deg, #A51C2E, #D97A8A 30%, #9AA1AE 50%, #5B7BC7 70%, #16296B); }
.axe__repere { position: absolute; top: 134px; font-size: .78rem; color: var(--muet); transform: translateX(-50%); white-space: nowrap; }
.axe__point { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px;
              font-size: .74rem; font-weight: 700; white-space: nowrap; }
.axe__point i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--surface); display: block; }
.sondage { background: var(--surface); border-radius: var(--rayon); padding: 18px; display: flex; flex-direction: column; gap: 7px; }
.sondage__ligne { display: grid; grid-template-columns: minmax(110px, 160px) 1fr 56px; gap: 10px; align-items: center; font-size: .92rem; }
.sondage__nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sondage__piste { height: 16px; background: var(--fond); border-radius: 4px; overflow: hidden; }
.sondage__barre { height: 100%; border-radius: 4px; animation: pousser 1.1s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes pousser { from { width: 0 !important; } }
.sondage__pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.alerte-info { background: var(--accent-doux); border-left: 4px solid var(--rouge); padding: 12px 14px; border-radius: 6px; }
.quiz { background: var(--surface); border-radius: var(--rayon); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.quiz__choix { display: flex; flex-direction: column; gap: 8px; }
.quiz__choix button { font: inherit; text-align: left; padding: 12px 14px; border-radius: 10px; border: 2px solid var(--ligne);
                      background: var(--fond); color: var(--encre); cursor: pointer; }
.quiz__choix button.bon { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.quiz__choix button.faux { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.quiz__pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* =============================================================================
   Page « Où va l'argent ? »
   ============================================================================= */
.postes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.poste { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline; }
.poste__nom { font-weight: 700; }
.poste__chiffres { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.poste .jauge { grid-column: 1 / -1; }
.poste__detail { grid-column: 1 / -1; font-size: 14px; color: var(--muet); }
@media (max-width: 600px) {
  .poste { grid-template-columns: minmax(0, 1fr); }
  .poste__chiffres { text-align: left; white-space: normal; }
}
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.compare__case { border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.compare__case--bleu { background: var(--bleu); color: #fff; }
.compare__case--rouge { background: var(--rouge); color: #fff; }
.compare__case--noir { background: var(--encre); color: #fff; }
.fiche-fuite { display: flex; flex-direction: column; gap: 10px; }
.estimations { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.estimations li { display: grid; grid-template-columns: 1fr auto; gap: 10px; font-size: 14px; padding: 6px 0; border-bottom: 1px dashed var(--ligne); }
.estimations strong { font-variant-numeric: tabular-nums; }
.debat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.debat__pour, .debat__contre { border-radius: 12px; padding: 14px; font-size: 15px; }
.debat__pour { background: var(--accent-doux); }
.debat__contre { background: var(--bleu-doux); }
.montee { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--muet); }
.tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bleu);
       background: var(--bleu-doux); padding: 3px 8px; border-radius: 999px; }
.montee span[aria-hidden="true"]:last-child { display: none; }