/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   DossierBC — le design de la Colombie-Britannique, posé PAR-DESSUS commun/dq.css.

   D'où il vient : le cahier « Nouveau site dossier BC » livré par Martin le 8 novembre 2026
   (design_handoff_dossierbc_home, variante 2a « Horizon »), haute fidélité, anglais seulement.
   Son identité : « Sun & waves » — le drapeau de la province réduit à de la géométrie sur un fond
   papier. Grammaire : coins carrés, filets d'un pixel, repères « + » aux coins des cadres,
   Barlow Condensed en titres sur Barlow en texte.

   CE QU'IL CHANGE PAR RAPPORT À LA CHARTE DOSSIER, et c'est assumé (Martin, 8 nov. 2026) :
     · l'accent n'est pas le #0047BB de la charte, mais le bleu héraldique #1f4f8a du cahier ;
     · le jaune commun de la famille (#FFD24D) cède la place à l'or soleil #e3b528 ;
     · les ombres dures de DossierQuébec disparaissent : le cahier ne veut que des filets.
   DossierBC est donc un cousin de la famille plutôt qu'un jumeau. Tout le reste — la structure
   des pages, les composants, les noms de classes — vient de dq.css et n'est pas touché ici.

   CETTE FEUILLE NE RÉÉCRIT JAMAIS dq.css : elle se pose dessus. Un correctif de DossierQuébec
   peut donc être recopié sans rien perdre d'ici.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */


/* ---------- 1. LES POLICES ----------
   Le cahier demande Barlow et Barlow Condensed. Plutôt que de renommer les cinquante règles de
   dq.css qui nomment 'Archivo' et 'Archivo Narrow', on sert Barlow SOUS CES NOMS : la feuille de
   DossierQuébec reste intacte et affiche pourtant la bonne police. Les fichiers sont servis par
   le site (commun/polices/), pas par Google : une dépendance de moins, et rien à charger ailleurs.
   Les deux vrais noms sont déclarés aussi, pour les règles d'ici qui les nomment directement. */
@font-face{font-family:'Archivo'; font-weight:400; font-style:normal; font-display:swap; src:url(/commun/polices/barlow-400.woff2) format('woff2');}
@font-face{font-family:'Archivo'; font-weight:500; font-style:normal; font-display:swap; src:url(/commun/polices/barlow-500.woff2) format('woff2');}
@font-face{font-family:'Archivo'; font-weight:600; font-style:normal; font-display:swap; src:url(/commun/polices/barlow-600.woff2) format('woff2');}
@font-face{font-family:'Archivo'; font-weight:700 900; font-style:normal; font-display:swap; src:url(/commun/polices/barlow-700.woff2) format('woff2');}
@font-face{font-family:'Archivo Narrow'; font-weight:400 500; font-style:normal; font-display:swap; src:url(/commun/polices/barlow-condensed-400.woff2) format('woff2');}
@font-face{font-family:'Archivo Narrow'; font-weight:600 900; font-style:normal; font-display:swap; src:url(/commun/polices/barlow-condensed-700.woff2) format('woff2');}
@font-face{font-family:'Barlow'; font-weight:400; font-style:normal; font-display:swap; src:url(/commun/polices/barlow-400.woff2) format('woff2');}
@font-face{font-family:'Barlow'; font-weight:500; font-style:normal; font-display:swap; src:url(/commun/polices/barlow-500.woff2) format('woff2');}
@font-face{font-family:'Barlow'; font-weight:600; font-style:normal; font-display:swap; src:url(/commun/polices/barlow-600.woff2) format('woff2');}
@font-face{font-family:'Barlow'; font-weight:700 900; font-style:normal; font-display:swap; src:url(/commun/polices/barlow-700.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed'; font-weight:400 500; font-style:normal; font-display:swap; src:url(/commun/polices/barlow-condensed-400.woff2) format('woff2');}
@font-face{font-family:'Barlow Condensed'; font-weight:600 900; font-style:normal; font-display:swap; src:url(/commun/polices/barlow-condensed-700.woff2) format('woff2');}


/* ---------- 2. LA PALETTE ----------
   Les valeurs viennent du cahier : fond papier, encre bleu-nuit, bleu héraldique en accent, or
   soleil en surlignage. Mêmes JETONS que dq.css, nouvelles valeurs — c'est ce qui permet à toute
   la feuille de DossierQuébec de changer d'habit sans qu'on y touche.
   Les --bc-* sont ce que DossierQuébec n'a pas et que le cahier demande. */
:root{
  --bc-bleu:#1f4f8a;          /* accent : boutons, vagues, numéros de projet */
  --bc-bleu-fonce:#193f6e;    /* le cran plus profond, pour un petit texte d'accent */
  --bc-bleu-nuit:#132f52;     /* le survol d'un bloc plein */
  --bc-bleu-tres-pale:#e9f0f9;
  --bc-bleu-pale:#d3e1f3;
  --bc-or:#e3b528;            /* or soleil : surlignages, repères, plaque du parrain */
  --bc-encre:#17202b;
  --bc-papier:#fbfbfa;
  --bc-surface:#f1f1ef;
  --bc-filet:rgba(23,32,43,.2);
  --bc-estompe:rgba(23,32,43,.65);
  /* Le bleu quand il sert d'ENCRE (un lien, un numéro, un filet) et non de fond plein. Les deux
     usages ne peuvent pas partager un jeton : en thème sombre l'encre doit s'éclaircir, le fond
     doit rester profond pour garder son texte clair. */
  --bc-bleu-encre:var(--bc-bleu);

  /* Les jetons de DossierQuébec, repeints */
  --ink:var(--bc-encre);
  --ink-2:var(--bc-encre);
  --paper:var(--bc-papier);
  --paper-2:var(--bc-surface);
  --card:var(--bc-papier);     /* le cahier ne remplit pas les cartes : il les encadre d'un filet */
  --line:var(--bc-filet);
  --line-soft:rgba(23,32,43,.12);
  --slate:#6b727b;             /* le texte estompé du cahier, en valeur pleine */
  --ink-bg:var(--bc-encre);
  --sur-clair:var(--bc-encre); /* ce qui se pose SUR l'or : de l'encre */
  --sur-fonce:var(--bc-papier);/* ce qui se pose SUR le bleu : du papier */

  /* Deux jetons que dq.css appelle sans que personne ne les définisse : il tombait donc sur ses
     valeurs de repli, #5B6570 et #fff, identiques dans les deux thèmes (la note de prix de
     « Représentez votre ville » en gris sur la nuit, le menu des codes cadeaux en blanc).
     Ils sont adossés à des jetons qui, eux, se repeignent. */
  --muted:var(--slate);
  --bg:var(--card);

  --gold:var(--bc-bleu);
  --gold-bg:var(--bc-bleu);
  --gold-soft:var(--bc-bleu-tres-pale);
  --gold-hover:var(--bc-bleu-nuit);
  --gold-pale:var(--bc-bleu-pale);
  --gold-paler:var(--bc-bleu-tres-pale);

  --yellow:var(--bc-or);

  /* Aucune ombre : le cahier est formel, « hairlines only ». */
  --shadow:none;
  --shadow-sm:none;
  --shadow-lg:none;
}

/* Le thème sombre n'est pas dessiné dans le cahier. On garde donc celui de DossierQuébec, avec
   les couleurs d'ici : l'accent s'éclaircit pour rester lisible sur fond sombre, le bloc d'accent
   reste profond pour garder son texte clair.

   Martin, 9 novembre 2026 : ce bloc ne repeignait que les jetons de DossierQuébec. Les --bc-*
   gardaient leur valeur claire, et 64 textes de la seule page d'accueil tombaient sous le seuil
   de contraste 3:1 — les deux colonnes de la mission étaient carrément invisibles. Un jeton de
   couleur qui ne se repeint pas en sombre est un jeton cassé : ils y passent tous. */
html[data-theme="dark"]{
  --bc-estompe:rgba(238,240,242,.62);
  --bc-filet:rgba(238,240,242,.24);
  --bc-bleu-encre:#8fb4e4;     /* le bleu héraldique éclairci, pour rester lisible sur la nuit */
  --bc-bleu-fonce:#9cc0e8;     /* le cran d'accent : en sombre il monte au lieu de descendre */
  --bc-bleu-tres-pale:#1a2a3e; /* le fond de survol : une nuit bleutée, pas un papier bleu */
  --ink:#eef0f2;
  --ink-2:#eef0f2;
  --paper:#12171d;
  --paper-2:#171d24;
  --card:#171d24;
  --line:rgba(238,240,242,.22);
  --line-soft:rgba(238,240,242,.12);
  --slate:#9aa3ad;
  --ink-bg:#0d1116;
  --gold:#7fa8dd;
  --gold-bg:var(--bc-bleu);
  --gold-soft:#1a2a3e;
  --gold-hover:var(--bc-bleu-nuit);
  /* Ces deux-là ne servent QUE de couleur de texte sur une bande pleine (bande bleue, bande du
     comparateur), qui reste sombre dans les deux thèmes : ils gardent donc leur valeur claire,
     écrite en dur, au lieu de suivre le bleu de survol que le thème sombre fait descendre. */
  --gold-pale:#d3e1f3;
  --gold-paler:#e9f0f9;
  --yellow:var(--bc-or);
  --shadow:none; --shadow-sm:none; --shadow-lg:none;
}

/* La bande or rétablit toute la palette claire à l'intérieur d'elle-même (voir dq.css) : son
   accent doit donc rester celui du thème clair, sinon l'accent sombre y passerait. */
html[data-theme="dark"] .band-yellow{
  --gold:var(--bc-bleu);
  --gold-soft:var(--bc-bleu-tres-pale);
}

/* La bande bleue garde elle aussi son fond dans les deux thèmes, et DossierQuébec y écrit le
   texte courant en --gold-soft. Le thème sombre ramenait ce jeton à une nuit bleutée : du bleu
   nuit sur du bleu héraldique, ratio 1,76. À l'intérieur d'une bande pleine, les jetons clairs
   restent les bons. */
html[data-theme="dark"] .band-blue{
  --gold-soft:#e9f0f9;
  --bc-bleu-tres-pale:#e9f0f9;
  --bc-bleu-encre:#e9f0f9;
}

/* La cellule or de l'accueil (« Bring your city council in ») garde son fond or dans les deux
   thèmes : la palette claire doit donc être rétablie à l'intérieur, sinon l'encre éclaircie du
   thème sombre y écrirait en blanc sur jaune. Mêmes valeurs qu'au :root, en dur — c'est ce bloc
   qui fait autorité sur l'or. */
html[data-theme="dark"] .bc-cellule-or{
  --ink:#17202b;
  --ink-2:#17202b;
  --slate:#4c545e;
  --card:#fbfbfa;
  --bc-estompe:rgba(23,32,43,.68);
  --bc-filet:rgba(23,32,43,.25);
  --bc-bleu-encre:#193f6e;
  --bc-bleu-fonce:#193f6e;
}


/* ---------- 3. LES FORMES ----------
   Le cahier : coins carrés (déjà la règle de dq.css), AUCUNE ombre, et des filets d'un pixel là
   où DossierQuébec met deux ou trois pixels d'encre pleine.

   Le !important est volontaire, et il a un précédent dans dq.css (`*{border-radius:0 !important}`).
   Il n'y a pas d'autre moyen court : les 73 règles de bordure épaisse et les 28 ombres écrites en
   dur de DossierQuébec sont dispersées dans toute la feuille, et les réécrire une à une ferait
   exactement ce que la charte interdit — une copie divergente qu'il faudrait corriger deux fois.
   `border-width` ne change rien aux éléments sans bordure : un élément en `border:none` garde son
   style « none », la largeur ne s'applique pas. */
*, *::before, *::after{
  border-width:1px !important;
  box-shadow:none !important;
}
/* Sauf le focus clavier : lui doit rester bien visible. */
:focus-visible{
  outline:2px solid var(--bc-bleu-encre) !important;
  outline-offset:2px;
}

/* Le filet d'un pixel, mais en encre estompée plutôt qu'en noir plein : c'est ce qui donne au
   cahier son air de plan d'architecte. */
hr{border-color:var(--bc-filet) !important;}


/* ---------- 4. LA TYPOGRAPHIE ----------
   Barlow Condensed en capitales pour les titres, Barlow en texte. L'échelle du cahier : h1 à
   104 px avec une interligne serrée, h2 de section à 40 px, surtitres très espacés. */
.hero-h1{font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:-0.02em; line-height:.88;}
.hero-h1-md{line-height:.92;}
.hero-sujet,
.kicker,
.view-hero .hero-sujet{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--bc-bleu-fonce);
}
.section-head h2,
.band h2,
.mission-box h2{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0;
  line-height:.95;
}
/* Le contour du cahier n'existe pas : la deuxième ligne du titre est pleine, comme sur la
   maquette. On neutralise donc le trait de DossierQuébec plutôt que de le garder à moitié. */
.hero-outline{
  -webkit-text-stroke:0 !important;
  color:var(--ink) !important;
}

/* Le surlignage or du cahier : « by person », « plain language », « This site ». */
mark, .surligne{
  background:var(--bc-or);
  color:var(--bc-encre);
  padding:0 .18em;
}


/* ---------- 5. LES MEUBLES ----------
   Ce que le cahier dessine et que dq.css ne connaît pas encore. Le reste des composants garde
   l'allure de DossierQuébec, repeinte par la palette ci-dessus. */

/* Le cadre « plan d'architecte » : un filet, et quatre repères « + » aux coins. */
.cadre-plan{
  position:relative;
  border:1px solid var(--bc-filet);
}
.cadre-plan::before,
.cadre-plan::after{
  content:'+';
  position:absolute;
  font:400 11px/1 'Barlow',sans-serif;
  color:rgba(23,32,43,.55);
  pointer-events:none;
}
.cadre-plan::before{top:-6px; left:-6px;}
.cadre-plan::after{top:-6px; right:-6px;}
.cadre-plan > .cadre-plan-bas{position:absolute; left:0; right:0; bottom:0; height:0;}
.cadre-plan > .cadre-plan-bas::before,
.cadre-plan > .cadre-plan-bas::after{
  content:'+';
  position:absolute;
  bottom:-6px;
  font:400 11px/1 'Barlow',sans-serif;
  color:rgba(23,32,43,.55);
}
.cadre-plan > .cadre-plan-bas::before{left:-6px;}
.cadre-plan > .cadre-plan-bas::after{right:-6px;}

/* Le mot-symbole : un disque or dont le bas est rayé de vagues bleues. */
.bc-marque{
  display:inline-block;
  width:20px; height:20px;
  border-radius:999px !important;   /* la seule rondeur du site : le soleil */
  background:
    repeating-linear-gradient(to bottom, var(--bc-bleu-encre) 0 1.5px, var(--paper) 1.5px 3px) bottom/100% 7px no-repeat,
    var(--bc-or);
  vertical-align:-3px;
}

/* La bande de vagues sous la ligne d'horizon. */
.bc-vagues{
  display:block;
  width:100%;
  height:120px;
  border-top:1px solid var(--ink) !important;
  color:var(--bc-bleu-encre);
}

/* Le soleil de l'affiche : disque or, cercle de repère en pointillé, huit traits. */
.bc-soleil{display:block; width:100%; max-width:440px; height:auto; color:var(--bc-bleu-encre);}

/* La bande de compteurs, en feuille de spécifications : un filet au-dessus, des colonnes
   séparées par des filets. */
.bc-compteurs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink) !important;
}
.bc-compteurs > div{padding:14px 0 0; border-left:1px solid var(--bc-filet) !important;}
.bc-compteurs > div:first-child{border-left:0 !important;}
.bc-compteurs b{
  display:block;
  font:600 40px/1 'Barlow Condensed',sans-serif;
  color:var(--ink);
}
.bc-compteurs span{
  display:block;
  margin-top:4px;
  font:400 11px/1.2 'Barlow',sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bc-estompe);
}

/* Le tableau de données du cahier : en-tête en petites capitales, lignes aérées, survol léger. */
.bc-tableau{width:100%; border-collapse:collapse; font-family:'Barlow',sans-serif;}
.bc-tableau th{
  padding:10px 12px;
  text-align:left;
  font:400 11px/1.2 'Barlow',sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bc-estompe);
  border-bottom:1px solid var(--bc-filet) !important;
}
.bc-tableau td{
  padding:20px 12px;
  font-size:14px;
  border-bottom:1px solid var(--bc-filet) !important;
  vertical-align:top;
}
.bc-tableau tr:hover td{background:rgba(23,32,43,.04);}
.bc-tableau .bc-num{
  font:600 22px/1 'Barlow Condensed',sans-serif;
  color:var(--bc-bleu-encre);
  white-space:nowrap;
}

/* L'étiquette d'étape : un fond bleu très pâle, pas de bordure. */
.bc-etape{
  display:inline-block;
  padding:4px 8px;
  background:var(--bc-bleu-tres-pale);
  color:var(--bc-bleu-fonce);
  font:400 12px/1.2 'Barlow',sans-serif;
  border:0 !important;
}

/* Le journal : une ligne verticale, un point par entrée, le plus récent en or. */
.bc-journal{position:relative; padding-left:22px;}
.bc-journal::before{
  content:''; position:absolute; left:0; top:4px; bottom:4px;
  border-left:1px solid var(--ink) !important;
}
.bc-journal li{position:relative; list-style:none; margin:0 0 26px;}
.bc-journal li::before{
  content:''; position:absolute; left:-27px; top:4px;
  width:11px; height:11px; border-radius:999px !important;
  background:var(--card);
  border:1px solid var(--ink) !important;
}
.bc-journal li:first-child::before{background:var(--bc-or); border-color:var(--bc-or) !important;}
.bc-journal .bc-date{
  display:block;
  font:600 13px/1.2 'Barlow Condensed',sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bc-bleu-encre);
  margin-bottom:4px;
}

/* La cellule or de la section « commandite ». */
.bc-cellule-or{background:var(--bc-or); color:var(--bc-encre);}
.bc-cellule-or .btn-principal,
.bc-cellule-or .bouton-plein{background:var(--bc-encre); color:var(--bc-papier);}

/* Le mot-symbole du cahier : « DossierBC.ca » — « BC » en bleu, « .ca » plus petit et estompé,
   précédé du disque soleil. */
.brand-title{font-family:'Barlow Condensed',sans-serif; font-weight:600; letter-spacing:0;}
.brand-ca{font:400 .72em/1 'Barlow',sans-serif; opacity:.45; letter-spacing:0;}
.bc-marque{margin-right:7px;}

/* Le surtitre de l'affiche : le cahier en fait un petit texte bleu espacé, pas un bloc or.
   (L'or est réservé aux surlignages de phrase et aux repères.) */
.hero-sujet{
  background:none !important;
  color:var(--bc-bleu-fonce) !important;
  padding:0 !important;
  border:0 !important;
  font:600 12px/1.3 'Barlow Condensed',sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Les deux boutons de l'affiche : un plein, un bordé — comme sur la maquette. Le second bouton
   d'une paire prend la version secondaire. */
.hero-ctas .btn + .btn,
.hero-actions .btn + .btn,
.hero-poster .btn + .btn{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--bc-filet) !important;
}
.hero-ctas .btn + .btn:hover,
.hero-actions .btn + .btn:hover,
.hero-poster .btn + .btn:hover{
  background:var(--paper-2);
  color:var(--ink);
}

/* ---------- 6. L'AFFICHE ----------
   Le cahier : le texte à gauche (760 px au plus), le soleil et la feuille de spécifications à
   droite, puis la ligne d'horizon et sa bande de vagues sur toute la largeur de l'écran. */
.bc-affiche{
  display:grid;
  grid-template-columns:minmax(0,1fr) 440px;
  gap:48px;
  align-items:start;
  padding:72px 0 60px;
}
.bc-affiche-texte{max-width:760px;}
.bc-affiche-texte .hero-session{
  font:400 12px/1.3 'Barlow',sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bc-estompe);
  margin:0 0 10px;
}
.bc-affiche .hero-h1{
  margin:0 0 26px;
  font-size:clamp(44px,7vw,104px);
}
.bc-affiche .hero-h1 span{display:block;}
.bc-lead{
  max-width:620px;
  margin:0 0 30px;
  font:400 20px/1.45 'Barlow',sans-serif;
  color:var(--ink);
}
/* Le surlignage or : la couleur du texte est écrite, pas héritée — en thème sombre elle
   hériterait de l'encre claire et donnerait du blanc sur jaune. */
.bc-lead b{font-weight:400; background:var(--bc-or); color:var(--bc-encre); padding:0 .18em;}

.bc-boutons{display:flex; flex-wrap:wrap; gap:12px;}
.bc-bouton{
  display:inline-block;
  padding:14px 22px;
  background:var(--bc-bleu);
  color:var(--bc-papier);
  font:600 15px/1 'Barlow Condensed',sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--bc-bleu) !important;
}
.bc-bouton:hover{background:var(--bc-bleu-nuit); border-color:var(--bc-bleu-nuit) !important; color:var(--bc-papier);}
.bc-bouton-second{
  background:transparent;
  color:var(--ink);
  border-color:var(--bc-filet) !important;
}
.bc-bouton-second:hover{background:var(--paper-2); color:var(--ink); border-color:var(--bc-filet) !important;}

.bc-affiche-figure{display:flex; flex-direction:column; gap:40px;}

/* L'horizon : un filet d'encre sur toute la largeur, et la bande de vagues dessous. */
.bc-horizon{line-height:0;}

/* Sous 900 px, le cahier le dit lui-même : le soleil passe sous le titre. */
@media (max-width:900px){
  .bc-affiche{grid-template-columns:1fr; gap:36px; padding:40px 0 34px;}
  .bc-affiche-figure{max-width:440px;}
}

/* Le tableau des projets sur l'accueil : les colonnes du cahier, la rangée entière cliquable. */
#apercuBills .bc-tableau a{color:var(--ink); text-decoration:none;}
#apercuBills .bc-tableau tr:hover a{color:var(--bc-bleu-encre);}
.bc-date-col{white-space:nowrap; color:var(--bc-estompe); font-size:13px; text-align:right;}

/* La section en 1fr / 3fr du cahier : le titre et l'explication à gauche, la donnée à droite. */
.bc-section{display:grid; grid-template-columns:1fr 3fr; gap:48px; align-items:start; padding:28px 0;}
@media (max-width:900px){ .bc-section{grid-template-columns:1fr; gap:20px;} }


/* ---------- 7. LES SECTIONS DE L'ACCUEIL ----------
   Le cahier ne se contente pas d'une palette : il range l'accueil autrement que DossierQuébec.
   Quatre blocs, dans cet ordre : le cadre des projets signalés, les projets récents en 1/3,
   le journal en frise, puis suivre + commandite dans un seul cadre et la mission en deux colonnes.
   Tout est posé PAR-DESSUS dq.css : les classes de DossierQuébec restent en place (c'est elles
   que le JavaScript écrit), on ne fait que les remeubler ici. */

/* Le cadre à filet d'encre pleine, pour les grands meubles de l'accueil ; le .cadre-plan ordinaire
   garde son filet estompé. */
.cadre-encre{border-color:var(--ink) !important;}


/* ---------- 7.1 LES PROJETS SIGNALÉS ----------
   Quatre cellules dans un cadre : la première porte le titre, l'avertissement et le pager ; les
   trois autres sont les projets, écrits par renderChallenged() sous forme de .ch-card. */
.bc-signales{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--card);
  margin:0;
  padding:0;
}
.bc-signales-intro{
  padding:24px 28px;
  display:flex;
  flex-direction:column;
  gap:10px;
  border-right:1px solid var(--line) !important;
}
.bc-signales-intro .section-head{display:block; margin:0; padding:0; border:0;}
.bc-signales-intro h2{font-size:28px; line-height:1; margin:0;}
.bc-signales-intro .sub{font-size:12px; color:var(--bc-estompe); margin:6px 0 0; line-height:1.5;}
.bc-signales-avis{font-size:13px; color:var(--bc-estompe); line-height:1.55; margin:0; flex:1;}
.bc-signales-avis b{color:var(--ink);}

/* Le pager du cahier : deux boutons carrés, la plage affichée, puis « Tout » à droite. */
.bc-pager{display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap;}
.bc-pager button{
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent;
  border:1px solid var(--line) !important;
  color:var(--ink);
  font:600 16px/1 'Barlow',sans-serif;
  cursor:pointer;
}
.bc-pager button:hover{background:var(--paper-2);}
.bc-pager .bc-rang{font:600 13px/1 'Barlow',sans-serif; letter-spacing:.06em; color:var(--bc-bleu-fonce);}
.bc-pager .bc-tout{margin-left:auto; font:600 13px/1 'Barlow',sans-serif; text-decoration:none; color:var(--bc-bleu-encre);}

/* Les cartes deviennent les cellules du cadre : le conteneur s'effface (display:contents), ses
   enfants prennent sa place dans la grille. */
.bc-signales #challengedList{display:contents;}
.bc-signales .ch-card{
  padding:24px 28px;
  margin:0;
  background:transparent;
  border:0;
  border-left:1px solid var(--line) !important;
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
}
.bc-signales .ch-card:hover{background:rgba(23,32,43,.03);}
.bc-signales .ch-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.bc-signales .ch-num{
  font:600 26px/1 'Barlow Condensed',sans-serif;
  letter-spacing:0;
  color:var(--bc-bleu-encre);
  background:none;
  padding:0;
}
.bc-signales .ch-badge{
  font:600 18px/1 'Barlow Condensed',sans-serif;
  background:none; color:var(--ink); padding:0; border:0;
  white-space:nowrap;
}
.bc-signales .ch-title{font:400 14px/1.5 'Barlow',sans-serif; flex:1;}
.bc-signales .ch-stage{
  align-self:flex-start;
  border:0 !important;
  padding:4px 9px;
  background:var(--bc-bleu-tres-pale);
  color:var(--bc-bleu-fonce);
  font:600 11px/1 'Barlow',sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.bc-signales .ch-demand{
  background:none; border:0 !important; padding:0;
  color:var(--bc-bleu-encre);
  font:600 12px/1.4 'Barlow',sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
  text-align:left; cursor:pointer;
}
.bc-signales .ch-demand.on{color:var(--ink);}
.bc-signales .ch-share{font-size:11px; color:var(--bc-estompe); gap:6px;}
.bc-signales .ch-petition{font:600 11px/1.3 'Barlow',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--bc-bleu-fonce);}
/* Quand personne n'a encore rien signalé, le message occupe les trois cellules restantes. */
.bc-signales #challengedList > div:not(.ch-card){grid-column:span 3; border:0 !important; background:none;}
@media (max-width:1000px){
  .bc-signales{grid-template-columns:1fr 1fr;}
  .bc-signales-intro{grid-column:span 2;}
  .bc-signales .ch-card{border-top:1px solid var(--line) !important;}
}
@media (max-width:620px){
  .bc-signales{grid-template-columns:1fr;}
  .bc-signales-intro{grid-column:span 1; border-right:0 !important;}
  .bc-signales .ch-card{border-left:0 !important;}
}


/* ---------- 7.2 LES SECTIONS EN 1 / 3 ----------
   Le titre et l'explication dans la colonne mince à gauche, la donnée dans le cadre à droite. */
.bc-section{padding:64px 0 0;}
.bc-section-intro .kicker{margin-bottom:10px;}
.bc-section-intro h2{font-size:clamp(28px,3.4vw,40px); line-height:.95; margin:0 0 14px;}
.bc-section-intro p{font-size:14px; color:var(--bc-estompe); line-height:1.6; margin:0 0 14px;}
.bc-section-intro .bc-tout{font:600 14px/1 'Barlow',sans-serif; text-decoration:none; color:var(--bc-bleu-encre);}
.bc-section-cadre{padding:0; background:var(--card);}
.bc-section-cadre .bc-tableau{margin:0;}
.bc-section-source{font-size:12px; color:var(--bc-estompe); margin:12px 0 0;}


/* ---------- 7.3 LE JOURNAL EN FRISE ----------
   Une ligne verticale, un point par journée, le plus récent en or. Les classes écrites par
   renderNews() (.news-item, .news-date, .news-body) sont conservées : on les remeuble. */
.bc-frise{position:relative; padding-left:40px; border-left:1px solid var(--ink) !important;}
.bc-frise .news-item{
  position:relative;
  display:block;
  margin:0;
  padding:0 0 26px;
  border:0;
  background:none;
}
.bc-frise .news-item::before{
  content:'';
  position:absolute;
  left:-47px; top:6px;
  width:13px; height:13px;
  border-radius:50% !important;
  background:var(--card);
  border:1px solid var(--ink) !important;
}
.bc-frise .news-item:first-child::before{background:var(--bc-or);}
.bc-frise .news-date{
  font:600 13px/1.2 'Barlow',sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--bc-bleu-fonce);
  margin:0 0 4px;
  background:none;
  padding:0;
  border:0;
  width:auto;
}
.bc-frise .news-body{margin:0; padding:0;}
.bc-frise .news-body p{font:400 16px/1.5 'Barlow',sans-serif; margin:0 0 3px;}
.bc-frise .bill-more{
  background:none; border:0 !important; padding:0; margin-top:4px;
  font:600 13px/1 'Barlow',sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bc-bleu-encre); cursor:pointer;
}
.bc-frise .no-results{border:0 !important; background:none; padding:0; font-size:13px; color:var(--bc-estompe);}
@media (max-width:620px){
  .bc-frise{padding-left:26px;}
  .bc-frise .news-item::before{left:-33px;}
}


/* ---------- 7.4 SUIVRE ET COMMANDITER ----------
   Un seul cadre, deux cellules : le compte gratuit à gauche, la commandite sur fond or à droite. */
.bc-suivre{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:64px 0 0;
  background:var(--card);
}
.bc-suivre > div{
  padding:40px;
  margin:0;
  border:0;
  background:none;
}
.bc-suivre > div:first-child{border-right:1px solid var(--line) !important;}
.bc-suivre .promo-sur{
  font:600 11px/1 'Barlow',sans-serif;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--bc-bleu-fonce);
  background:none; padding:0; margin:0 0 8px;
  border:0;
}
.bc-suivre h2{font-size:30px; line-height:1; margin:0 0 10px;}
.bc-suivre .promo-texte{font-size:14px; color:var(--bc-estompe); line-height:1.6; margin:0 0 18px;}
.bc-suivre .bc-cellule-or .promo-sur,
.bc-suivre .bc-cellule-or .promo-texte{color:var(--bc-encre);}
.bc-suivre .bc-cellule-or .promo-texte{opacity:.8;}
.bc-suivre .promo-compte-ligne{display:flex; gap:8px; max-width:420px; flex-wrap:wrap;}
.bc-suivre .promo-compte-ligne input{
  flex:1 1 180px;
  border:1px solid var(--line) !important;
  background:var(--paper);
  padding:10px 12px;
  font:400 14px/1 'Barlow',sans-serif;
  color:var(--ink);
}
.bc-suivre .account-btn{
  background:var(--bc-bleu);
  border:1px solid var(--bc-bleu) !important;
  color:#fff;
  font:600 13px/1 'Barlow',sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
  padding:11px 16px;
  white-space:nowrap;
  cursor:pointer;
}
.bc-suivre .promo-mes-dossiers{
  display:inline-block; margin-top:14px;
  font:600 13px/1 'Barlow',sans-serif; text-decoration:none; color:var(--bc-bleu-encre);
}
.bc-suivre .bc-cellule-or .hero-cta,
.bc-suivre .bc-cellule-or .bc-bouton{
  display:inline-block;
  background:var(--bc-encre);
  border:1px solid var(--bc-encre) !important;
  color:var(--bc-papier);
  font:600 13px/1 'Barlow',sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
  padding:12px 18px;
  text-decoration:none;
}
.bc-suivre .nb-commandite-villes{font-size:12px; color:var(--bc-encre); opacity:.7; margin:14px 0 0;}
@media (max-width:820px){
  .bc-suivre{grid-template-columns:1fr;}
  .bc-suivre > div:first-child{border-right:0 !important; border-bottom:1px solid var(--line) !important;}
}


/* ---------- 7.5 LA MISSION ----------
   Deux colonnes : la phrase en gros à gauche, les deux comparaisons à droite. Le cahier la pose
   sur le papier, pas sur une bande de couleur. */
.bc-mission{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
  padding:72px 0 56px;
}
.bc-mission .mission-eyebrow{
  font:600 11px/1 'Barlow',sans-serif;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--bc-bleu-fonce);
  background:none; border:0; padding:0; margin:0 0 10px;
}
.bc-mission .mission-statement{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  font-size:clamp(26px,3.2vw,40px);
  line-height:.95;
  letter-spacing:-0.01em;
  text-transform:uppercase;
  margin:0;
}
.bc-mission .mission-statement .hl{background:var(--bc-or); color:var(--bc-encre); padding:0 .12em;}
.bc-mission .compare{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.bc-mission .compare-col{
  border:0 !important; background:none; padding:0;
  font-size:14px; line-height:1.7; color:var(--bc-estompe);
}
.bc-mission .compare-col .tag{
  display:inline-block;
  font:600 13px/1 'Barlow',sans-serif;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink);
  background:none; border:0 !important; padding:0; margin:0 0 10px;
}
.bc-mission .compare-col:last-child .tag{background:var(--bc-or); color:var(--bc-encre); padding:2px 6px;}
.bc-mission .compare-col ul{margin:0; padding:0; list-style:none;}
.bc-mission .compare-col li{margin:0 0 7px; padding:0;}
@media (max-width:900px){
  .bc-mission{grid-template-columns:1fr; gap:28px; padding:48px 0 40px;}
}


/* ---------- 7.6 LE PIED DE PAGE ----------
   Un filet d'encre, les liens à gauche, l'avis « non officiel » à droite. */
footer{border-top:1px solid var(--ink) !important;}
.footer-inner{font-size:12px;}
.footer-nav{font-family:'Barlow',sans-serif; letter-spacing:.04em;}
.footer-inner{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:baseline;}
/* Le cahier met les liens à gauche et l'avis « non officiel » à droite : on inverse l'ordre
   d'affichage sans toucher à l'ordre du HTML. */
.footer-inner .footer-right-group{order:1;}
.footer-inner .footer-left-line{order:2;}


/* ---------- 7.7 CORRECTIFS SUR CE QUE DOSSIERQUÉBEC AVAIT PRÉVU AILLEURS ----------
   Trois meubles de DossierQuébec n'étaient pas dessinés pour l'endroit où le cahier les pose. */

/* Le pager se cache quand tout tient sur une page : son display:flex battait l'attribut hidden. */
.bc-pager[hidden]{display:none !important;}

/* La boîte du compte gratuit vivait sur fond foncé : son titre et son texte étaient écrits en
   papier, donc invisibles ici. Et sa cellule or doit rester or : la règle commune de .bc-suivre
   remet le fond à zéro. */
.bc-suivre h2{color:var(--ink);}
.bc-suivre .promo-texte{color:var(--bc-estompe);}
.bc-suivre > .bc-cellule-or{background:var(--bc-or);}
.bc-suivre > .bc-cellule-or h2,
.bc-suivre > .bc-cellule-or .promo-sur,
.bc-suivre > .bc-cellule-or .promo-texte,
.bc-suivre > .bc-cellule-or .nb-commandite-villes{color:var(--bc-encre);}

/* Le formulaire : le cahier ne l'encadre pas d'une boîte blanche à filet noir. */
.bc-suivre .promo-compte{
  background:none; color:inherit; border:0 !important; padding:0; margin:0;
}
.bc-suivre .promo-compte-note{font-size:12px; color:var(--bc-estompe); margin:10px 0 0;}
.bc-suivre .promo-compte .account-btn:not(:disabled):hover{background:var(--bc-bleu-nuit); border-color:var(--bc-bleu-nuit) !important;}

/* La liste vide des signalements : le cahier n'a pas d'emoji, et la boîte n'a pas de filet. */
.bc-signales #challengedList > div:not(.ch-card){
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:24px 28px; text-align:center;
}
.bc-signales #challengedList > div:not(.ch-card) > div:first-child{display:none;}
.bc-signales #challengedList .sort-toggle{
  background:none; border:0 !important; padding:0; margin-top:14px;
  color:var(--bc-bleu-encre); font:600 12px/1.4 'Barlow',sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
}


/* ---------- 7.8 LA MISSION ET LE PIED DE PAGE, SUR PAPIER ----------
   DossierQuébec pose ces deux blocs sur fond foncé : leur texte est donc écrit en papier. Le
   cahier de la C.-B. les pose sur le papier. Sans ces deux rappels, la phrase de la mission et
   les liens du pied de page sont blancs sur blanc. */
.bc-mission .mission-statement{color:var(--ink);}

footer{
  background:var(--paper);
  color:var(--bc-estompe);
  margin:56px 0 0;
  padding:0;
}
.footer-nav{
  border-bottom:1px solid var(--line) !important;
  padding-top:22px;
}
.footer-nav a{color:var(--ink);}
.footer-nav a:hover{color:var(--bc-bleu-encre);}
.footer-nav-villes > span:first-child{color:var(--bc-estompe);}
.footer-inner{padding-bottom:28px;}
.footer-gh{color:var(--ink); font-weight:600;}
.footer-gh:hover{color:var(--bc-bleu-encre);}
.footer-etmoi{color:var(--bc-bleu-encre);}
#footerLeft, #footerRight{color:var(--bc-estompe);}

/* Le bouton « remonter » : or sur encre, sans ombre. */
.dq-remonter{background:var(--bc-or); color:var(--bc-encre); border-color:var(--bc-encre) !important;}
.dq-remonter:hover{background:var(--bc-encre); color:var(--bc-or);}

/* Le pager cache les cartes hors page : .bc-signales .ch-card{display:flex} battait la règle
   commune .ch-card.ch-hidden (même poids, mais bc.css est chargée après dq.css). */
.bc-signales .ch-card.ch-hidden{display:none;}


/* ---------- 7.9 LE TÉLÉPHONE ----------
   Quatre colonnes ne tiennent pas dans 375 pixels : la colonne de date se retire et sa valeur
   repasse sous le titre, où ligneProjetAccueil() l'écrit déjà. */
.bc-date-petite{display:none;}
@media (max-width:700px){
  .bc-tableau th:last-child,
  .bc-tableau .bc-date-col{display:none;}
  .bc-tableau th, .bc-tableau td{padding-left:12px; padding-right:12px;}
  .bc-date-petite{display:block; margin-top:4px; font-size:12px; color:var(--bc-estompe);}
}


/* ---------- 7.10 LA PREMIÈRE RANGÉE, DÉPLIÉE ----------
   Martin, 8 novembre 2026 : la première rangée du tableau est ouverte d'office. Une rangée
   cliquable ne dit pas d'elle-même où elle mène ; celle-ci le montre, et les suivantes se lisent
   alors toutes seules. Le liseré or est le même repère que le premier point de la frise.
   Le survol générique (.bc-tableau tr:hover td) est annulé ici : ce panneau n'est pas cliquable. */
.bc-ligne-ouverte td,
.bc-tableau tr.bc-ligne-ouverte:hover td{
  background:var(--bc-bleu-tres-pale);
  border-left:3px solid var(--bc-or) !important;
  padding:18px 12px 20px;
}
.bc-ouvert-faits{font:400 13px/1.5 'Barlow',sans-serif; color:var(--bc-estompe);}
.bc-ouvert-faits b{color:var(--ink); font-weight:600;}
.bc-ouvert-mode{margin:8px 0 14px; font-size:14px; line-height:1.5; color:var(--ink); max-width:64ch;}
.bc-ouvert-liens{display:flex; gap:22px; flex-wrap:wrap;}
#apercuBills .bc-ouvert-liens a{
  font:600 12px/1 'Barlow',sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--bc-bleu-encre);
  text-decoration:none;
  border-bottom:1px solid var(--bc-bleu-encre) !important;
  padding-bottom:3px;
}
#apercuBills .bc-ouvert-liens a:hover{color:var(--ink); border-bottom-color:var(--ink) !important;}


/* ---------- 7.11 LE RÉSULTAT DU SCRUTIN ----------
   Entre l'élection et la première séance, l'encadré d'état porte la barre des sièges (dq.js,
   blocResultat). Les couleurs sont celles des partis, la source est nommée en dessous : ces
   chiffres viennent de Wikipédia, pas de l'Assemblée, et la page ne le cache pas. */
.bc-scrutin{margin-top:18px; padding-top:16px; border-top:1px solid var(--bc-filet) !important;}
.bc-scrutin-titre{
  font:600 12px/1.2 'Barlow',sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bc-estompe);
  margin-bottom:10px;
}
.bc-scrutin-barre{display:flex; height:14px; width:100%; overflow:hidden; border:1px solid var(--ink) !important;}
.bc-scrutin-barre span{display:block; height:100%; border:0 !important;}
.bc-scrutin-liste{
  display:flex;
  flex-wrap:wrap;
  gap:6px 24px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}
.bc-scrutin-liste li{display:flex; align-items:baseline; gap:7px; font-size:14px;}
.bc-scrutin-liste i{width:9px; height:9px; flex:0 0 9px; border:0 !important;}
.bc-scrutin-liste b{font:600 17px/1 'Barlow Condensed',sans-serif; color:var(--ink);}
.bc-scrutin-nom{color:var(--ink);}
.bc-scrutin-pct{color:var(--bc-estompe); font-size:13px; white-space:nowrap;}
.bc-scrutin-resume{margin:12px 0 0; font-size:14px; line-height:1.5; color:var(--ink);}
.bc-scrutin-note{margin:8px 0 0; font-size:12.5px; line-height:1.5; color:var(--bc-estompe);}
.bc-scrutin-note a{color:var(--bc-bleu-encre);}
@media (max-width:620px){
  .bc-scrutin-liste{gap:6px 16px;}
  .bc-scrutin-nom{max-width:none;}
}


/* ---------- 7.12 L'ONGLET ACTIF ----------
   Martin, 9 novembre 2026 : l'onglet actif était une tuile NOIRE, héritée de DossierQuébec. Sur
   le papier du cahier, c'est la seule tache d'encre pleine de l'en-tête. Il prend le bleu
   héraldique — l'accent du site, déjà celui des boutons et du mot « BC » du logotype. L'or reste
   réservé aux surlignages de phrase et aux repères. */
nav.tabs a.active{
  color:var(--bc-papier);
  background:var(--bc-bleu);
  border-color:var(--bc-bleu) !important;
  border-bottom-color:var(--bc-bleu) !important;
}
nav.tabs a:hover:not(.active){
  background:var(--bc-bleu-tres-pale);
  border-color:var(--bc-bleu-tres-pale) !important;
  color:var(--bc-bleu-fonce);
}


/* ---------- 7.13 LE MENU « VILLES » DANS LA BARRE ----------
   Martin, 9 novembre 2026 : cliquer « Villes » faisait apparaître une barre de défilement grise
   en travers de la barre d'onglets.

   Pourquoi : chez DossierQuébec, le menu des villes vit à côté du nom du site. Ici il est devenu
   un onglet, DANS nav.tabs — qui porte overflow-x:auto pour qu'on puisse faire défiler les
   onglets sur une fenêtre étroite. Un enfant en position absolue compte dans le débordement de
   son conteneur de défilement : le panneau déplié élargissait la barre de 612 à 675 pixels, et le
   navigateur dessinait sa barre de défilement (celle de dq.css, épaisse et arrondie).

   La barre cesse donc de défiler PENDANT que le menu est ouvert, et le panneau s'aligne sur la
   droite du bouton — « Villes » est le dernier onglet, un panneau aligné à gauche sortait de
   l'écran par la droite. */
/* dq.css pose overflow-x:auto DEUX fois, et la seconde (#dq-topbar nav.tabs) porte un id :
   sans l'id ici, la règle ne gagne pas. Et overflow-x:auto force overflow-y:auto, ce qui
   découpait aussi le panneau vers le bas : ouvert, il n'était tout simplement pas dessine. */
nav.tabs:has(.villes-menu[open]),
#dq-topbar nav.tabs:has(.villes-menu[open]){overflow:visible;}
nav.tabs .villes-menu ul{left:auto; right:0;}

/* Le panneau lui-même : papier sur papier, sans ombre (le cahier n'en veut pas) et avec un filet
   à 20 % d'encre, il était pratiquement invisible. Il prend le filet d'encre pleine des cadres. */
.villes-menu ul{
  border:1px solid var(--ink) !important;
  background:var(--card);
  padding:0;
}
.villes-menu li a{padding:10px 14px;}
.villes-menu li a:hover, .villes-menu li a:focus-visible{background:var(--bc-bleu-tres-pale); color:var(--bc-bleu-fonce);}

/* La pastille elle-même. Le gold de DossierQuébec ferait une deuxième tache or à côté du soleil
   du logotype : elle prend le bleu héraldique, comme l'onglet actif. Carrée, forcément. */
.city-flip{
  background:var(--bc-bleu);
  color:var(--bc-papier);
  font-family:'Barlow',sans-serif;
  letter-spacing:.08em;
  /* dq.css l'arrondit avec un !important : la règle commune *{border-radius:0} ne suffit pas. */
  border-radius:0 !important;
}
.city-flip:hover, .villes-menu[open] .city-flip{
  background:var(--bc-bleu-nuit);
  color:var(--bc-papier);
  transform:none;
}


/* ---------- 7.14 LES VILLES QU'ON NE PEUT PAS LIVRER ----------
   Sur /represente-ta-ville, trois villes sur vingt-quatre refusent la lecture automatisée
   (Vancouver, Kelowna, district de Langley : page de vérification Cloudflare au lieu du
   document). On ne contourne pas, donc on ne les vend pas — et on le dit sur la page plutôt que
   d'encaisser une commandite qu'on ne pourrait pas honorer. La rangée s'estompe, le prix cède la
   place à une étiquette. Pas de rouge : la palette du cahier n'en a pas, et l'encre suffit. */
.rtv-bloquee td{color:var(--bc-estompe);}
.rtv-bloc{
  display:inline-block;
  padding:2px 7px;
  border:1px solid var(--ink) !important;
  font:600 10px/1.4 'Barlow',sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
}


/* ---------- 7.15 L'ÉCHELLE DE PRÉSENCE QUAND LA MÉDIANE EST À 100 % ----------
   Martin, 9 novembre 2026. Les 74 divisions de la Chambre de la 43e donnent une médiane de
   100 % : le groupe vert va donc de 100 à 100, un segment de largeur nulle, et la barre peinte
   de dq.css n'en montrait aucun — alors que 52 élu·e·s sur 92 sont vertes.

   On ne déforme pas l'échelle pour faire tenir un segment qui n'en est pas un : on marque le
   BOUT de la barre, là où le groupe se trouve vraiment, et la légende dit « 100 % pile ». */
.lp-barre-au-bout::after{
  content:'';
  position:absolute; top:-2px; bottom:-2px; right:-2px;
  width:10px;
  background:#1E7B45;
  border:2px solid var(--ink);
}