/* =========================================================================
   Charte Wifirst - couleurs et typographie relevees sur wifirst.com
   ========================================================================= */
:root {
  --bleu: #008cc7;
  --bleu-fonce: #004c6c;
  --bleu-pale: #e8f4fa;
  --encre: #222326;
  --gris: #6a6d77;
  --bordure: #e3e6ec;
  --bordure-forte: #cfd2d8;
  --fond: #f7f7f7;
  --blanc: #ffffff;
  --magenta: #a31781;
  --vert: #1d7a46;
  --rouge: #b3261e;
  --orange: #c9781a;

  --seg-residences: #008cc7;
  --seg-hotellerie: #004c6c;
  --seg-plein-air: #2e9e6b;
  --seg-sante: #a31781;
  --seg-retail: #d98324;
  --seg-defense: #6a6d77;

  --ombre: 0 1px 2px rgba(34, 35, 38, .06), 0 2px 8px rgba(34, 35, 38, .04);
  --rayon: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Hind Madurai", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--encre);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; }

/* ------------------------------------------------------------------ entete */
.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
  position: sticky;
  top: 0;
  z-index: 30;
}

.entete-haut {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 24px 12px;
  max-width: 1680px;
  margin: 0 auto;
}

.logo svg { height: 30px; width: auto; display: block; }

.entete-titre {
  border-left: 1px solid var(--bordure);
  padding-left: 20px;
  line-height: 1.25;
}
.entete-titre strong { font-size: 15px; font-weight: 600; display: block; }
.entete-titre span { font-size: 12.5px; color: var(--gris); }

.badge-demo {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff6e5;
  border: 1px solid #f0d199;
  color: #8a5d00;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}
.badge-demo::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #e0a020;
  flex: none;
}

/* ------------------------------------------------------------- onglets */
.onglets {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  max-width: 1680px;
  margin: 0 auto;
}
.onglet {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--gris);
  padding: 11px 16px 13px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color .12s, border-color .12s;
}
.onglet:hover { color: var(--encre); }
.onglet[aria-selected="true"] {
  color: var(--bleu);
  border-bottom-color: var(--bleu);
  font-weight: 600;
}
.onglet:focus-visible { outline: 2px solid var(--bleu); outline-offset: -2px; }

/* --------------------------------------------------------------- contenu */
main {
  max-width: 1680px;
  margin: 0 auto;
  padding: 20px 24px 48px;
}

.panneau[hidden] { display: none; }

.vide {
  background: var(--blanc);
  border: 1px dashed var(--bordure-forte);
  border-radius: var(--rayon);
  padding: 64px 32px;
  text-align: center;
  color: var(--gris);
}
.vide strong { display: block; color: var(--encre); font-size: 16px; margin-bottom: 6px; }

/* ------------------------------------------------------------------- KPI */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kpi {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 14px 16px 13px;
  box-shadow: var(--ombre);
}
.kpi-libelle {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gris);
  font-weight: 600;
  margin-bottom: 6px;
}
.kpi-valeur {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi-detail { font-size: 12.5px; color: var(--gris); margin-top: 4px; }
.hausse { color: var(--vert); font-weight: 600; }
.baisse { color: var(--rouge); font-weight: 600; }

/* -------------------------------------------------------------- barre outils */
.outils {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  box-shadow: var(--ombre);
}
.groupe-outil { display: flex; flex-direction: column; gap: 6px; }
.groupe-outil > label,
.groupe-outil > .intitule {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gris);
  font-weight: 600;
}

.segmente { display: flex; border: 1px solid var(--bordure-forte); border-radius: var(--rayon); overflow: hidden; }
.segmente button {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--bordure-forte);
  background: var(--blanc);
  font: inherit;
  font-size: 13.5px;
  padding: 7px 15px;
  cursor: pointer;
  color: var(--encre);
  transition: background .1s, color .1s;
}
.segmente button:last-child { border-right: 0; }
.segmente button:hover { background: var(--bleu-pale); }
.segmente button[aria-pressed="true"] { background: var(--bleu); color: var(--blanc); font-weight: 600; }
.segmente button:focus-visible { outline: 2px solid var(--bleu-fonce); outline-offset: -2px; }

select {
  font: inherit;
  font-size: 13.5px;
  padding: 7px 10px;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre);
  min-width: 168px;
}
select:focus-visible { outline: 2px solid var(--bleu); outline-offset: -1px; }

.bouton-lien {
  appearance: none;
  border: 1px solid var(--bordure-forte);
  background: var(--blanc);
  border-radius: var(--rayon);
  font: inherit;
  font-size: 13.5px;
  padding: 7px 14px;
  cursor: pointer;
  color: var(--bleu);
  font-weight: 600;
}
.bouton-lien:hover { background: var(--bleu-pale); }

/* ------------------------------------------------------------ mise en page */
.grille-principale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1180px) {
  .grille-principale { grid-template-columns: minmax(0, 1fr); }
}

.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
}
.carte-entete {
  padding: 13px 16px 12px;
  border-bottom: 1px solid var(--bordure);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.carte-entete h2 { font-size: 15px; }
.carte-entete .sous { font-size: 12.5px; color: var(--gris); }
.carte-corps { padding: 14px 16px 16px; }

/* -------------------------------------------------------------- graphique */
#grille { display: block; width: 100%; height: auto; }
.point { cursor: pointer; transition: stroke-width .1s; }
.point:hover { stroke: var(--encre); stroke-width: 2; }
.point.attenue { opacity: .12; }
.point.choisi { stroke: var(--encre); stroke-width: 2.5; }
.axe-ligne { stroke: var(--bordure-forte); stroke-width: 1; }
.axe-texte { fill: var(--gris); font-size: 11px; }
.mediane { stroke: var(--gris); stroke-width: 1; stroke-dasharray: 5 4; }
.quadrant-titre {
  fill: var(--gris);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.axe-titre { fill: var(--encre); font-size: 12px; font-weight: 600; }
.zero-ligne { stroke: var(--rouge); stroke-width: 1; stroke-dasharray: 2 3; opacity: .5; }

/* --------------------------------------------------------------- legende */
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.legende button {
  appearance: none; border: 0; background: none; font: inherit;
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--encre); cursor: pointer; padding: 2px 0;
}
.legende button[aria-pressed="false"] { opacity: .38; }
.pastille { width: 11px; height: 11px; border-radius: 50%; flex: none; }

.note-taille { font-size: 12px; color: var(--gris); margin-top: 8px; }

/* Rappel de secours : les pastilles masquees depuis la legende restent
   actives quand on change de maille, ou l'on ne les voit plus. Sans ce
   rappel, l'utilisateur n'a aucun moyen de comprendre pourquoi la grille
   est vide ou incomplete. */
.rattrapage {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--encre);
  margin: 10px 0 0;
  padding: 9px 12px;
  background: #fff6e5;
  border: 1px solid #f0d199;
  border-radius: var(--rayon);
}
.rattrapage[hidden] { display: none; }
.rattrapage .bouton-lien { padding: 4px 11px; font-size: 12.5px; }

/* -------------------------------------------------------------- infobulle */
.infobulle {
  position: fixed;
  pointer-events: none;
  background: var(--encre);
  color: var(--blanc);
  border-radius: var(--rayon);
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  z-index: 60;
  max-width: 280px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.infobulle[hidden] { display: none; }
.infobulle strong { display: block; margin-bottom: 3px; font-size: 13px; }
.infobulle dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 1px 12px; }
.infobulle dt { color: #b9bcc4; }
.infobulle dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- detail */
.detail-vide { color: var(--gris); font-size: 13px; padding: 8px 0 4px; }
.detail-titre { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.detail-sous { font-size: 12.5px; color: var(--gris); margin-bottom: 12px; }
.detail-liste { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; font-size: 13px; }
.detail-liste dt { color: var(--gris); }
.detail-liste dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.detail-sep { grid-column: 1 / -1; border-top: 1px solid var(--bordure); margin: 5px 0; }

.puce {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; margin-right: 5px;
}
.puce-alerte { background: #fdecea; color: var(--rouge); }
.puce-info { background: var(--bleu-pale); color: var(--bleu-fonce); }

/* ------------------------------------------------------------- recherche */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.recherche {
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
}
.recherche-icone {
  position: absolute;
  left: 10px;
  width: 15px; height: 15px;
  color: var(--gris);
  pointer-events: none;
}
.recherche input {
  font: inherit;
  font-size: 13.5px;
  padding: 7px 30px 7px 32px;
  width: 300px;
  max-width: 100%;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre);
}
.recherche input::placeholder { color: #9a9da5; }
.recherche input:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: -1px;
  border-color: var(--bleu);
}
/* la croix native de Chrome ferait doublon avec notre bouton */
.recherche input::-webkit-search-cancel-button { -webkit-appearance: none; }

.recherche button {
  position: absolute;
  right: 6px;
  appearance: none;
  border: 0;
  background: none;
  font-size: 19px;
  line-height: 1;
  color: var(--gris);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
}
.recherche button:hover { color: var(--encre); background: var(--fond); }
.recherche button[hidden] { display: none; }

.compteur {
  font-size: 12.5px;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.compteur.vide { color: var(--rouge); font-weight: 600; }

.surligne {
  background: #ffe9a8;
  border-radius: 2px;
  padding: 0 1px;
}

@media (max-width: 640px) {
  .recherche { margin-left: 0; width: 100%; }
  .recherche input { width: 100%; }
}

/* --------------------------------------------------------------- tableau */
.tableau-enveloppe { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 7px 10px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; white-space: normal; min-width: 190px; }
thead th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--gris); border-bottom: 1px solid var(--bordure-forte);
  cursor: pointer; user-select: none;
}
thead th:hover { color: var(--bleu); }
tbody tr { border-bottom: 1px solid var(--bordure); cursor: pointer; }
tbody tr:hover { background: var(--bleu-pale); }
tbody tr.choisi { background: var(--bleu-pale); box-shadow: inset 3px 0 0 var(--bleu); }
td.num { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ petits ecrans */
/* En dessous de 640 px, l'entete ne tient plus sur une ligne : le badge de
   demonstration debordait de 9 px. Il passe donc en pleine largeur sous le
   logo plutot que d'etre pousse hors cadre par le margin-left auto. */
@media (max-width: 640px) {
  .entete-haut {
    flex-wrap: wrap;
    padding: 12px 16px 10px;
    gap: 10px 14px;
  }
  .entete-titre { border-left: 0; padding-left: 0; }
  .badge-demo {
    margin-left: 0;
    order: 3;
    width: 100%;
    justify-content: center;
  }
  .onglets {
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .onglet { padding: 11px 12px 13px; white-space: nowrap; }
  main { padding: 16px 12px 40px; }
  .pied { padding: 0 16px 32px; }
  .outils { gap: 12px; padding: 12px; }
  .groupe-outil { flex: 1 1 100%; }
  select { min-width: 0; width: 100%; }
  .segmente { width: 100%; }
  .segmente button { flex: 1; padding: 8px 6px; }
  .kpi-valeur { font-size: 22px; }
}

/* ------------------------------------------------------------------- pied */
.pied {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 24px 40px;
  font-size: 12px;
  color: var(--gris);
  line-height: 1.6;
}
.pied strong { color: var(--encre); }

/* ------------------------------------------------- onglet comptable */
/* Bandeau de provenance. Un etat comptable sans son systeme source et sa
   date d'arrete n'est pas un etat comptable : on affiche donc d'ou vient
   la balance et quand elle a ete synchronisee. */
.source {
  display: flex;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-left: 3px solid var(--bleu);
  border-radius: var(--rayon);
  padding: 11px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  box-shadow: var(--ombre);
}
.source-titre { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.source-titre::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--vert);
  box-shadow: 0 0 0 3px rgba(29, 122, 70, .15);
}
.source-detail { color: var(--gris); }
.source-detail b { color: var(--encre); font-weight: 600; }

.grille-deux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: 16px;
  align-items: start;
}

/* cascade */
.barre-total { fill: var(--bleu-fonce); }
.barre-hausse { fill: var(--vert); }
.barre-baisse { fill: var(--rouge); }
.cascade-lien { stroke: var(--bordure-forte); stroke-width: 1; stroke-dasharray: 3 3; }
.cascade-valeur { font-size: 11px; font-variant-numeric: tabular-nums; }
.cascade-etiquette { fill: var(--gris); font-size: 10.5px; }

/* balance */
tr.rubrique { background: #f2f6f9; font-weight: 600; }
tr.rubrique:hover { background: var(--bleu-pale); }
tr.rubrique td:first-child { padding-left: 10px; }
.chevron {
  display: inline-block; width: 13px; color: var(--gris);
  transition: transform .12s;
}
tr.ouverte .chevron { transform: rotate(90deg); }
tr.compte td:first-child { padding-left: 34px; }
.numero-compte {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px; color: var(--bleu-fonce); margin-right: 9px;
}
tr.origine td {
  background: #fbfbfc; font-size: 12.5px; color: var(--gris);
  padding-left: 58px; text-align: left; white-space: normal;
}
tr.origine ul { margin: 3px 0; padding-left: 16px; }
tr.origine b { color: var(--encre); }

/* table de passage */
.passage-bloc { border-bottom: 1px solid var(--bordure); padding: 11px 0; }
.passage-bloc:last-child { border-bottom: 0; }
.passage-entete {
  display: flex; justify-content: space-between; gap: 12px;
  font-weight: 600; font-size: 13.5px; margin-bottom: 7px;
}
.passage-entete span { font-variant-numeric: tabular-nums; }
.passage-barre { display: flex; height: 9px; border-radius: 5px; overflow: hidden; gap: 1px; }
.passage-part { height: 100%; }
.passage-liste { margin: 7px 0 0; font-size: 12.5px; display: grid; gap: 4px; }
.passage-ligne { display: flex; align-items: baseline; gap: 8px; }
.passage-puce { width: 9px; height: 9px; border-radius: 2px; flex: none; margin-top: 3px; }
.passage-ligne em { color: var(--gris); font-style: normal; margin-left: auto;
                    font-variant-numeric: tabular-nums; white-space: nowrap; }

/* BFR */
.bfr-ligne {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--bordure); font-size: 13px;
}
.bfr-ligne:last-of-type { border-bottom: 0; }
.bfr-ligne .num {
  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  color: var(--bleu-fonce); flex: none; width: 54px;
}
.bfr-ligne .mt { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500; }
.bfr-ligne.dominant { background: #fff6e5; margin: 0 -8px; padding: 8px; border-radius: 4px; }
.bfr-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; padding-top: 11px; border-top: 2px solid var(--encre);
  font-weight: 600; font-size: 15px;
}
.bfr-total span:last-child { font-variant-numeric: tabular-nums; }

/* reperes publics */
.repere-note { font-size: 12.5px; color: var(--gris); margin: 0 0 12px; line-height: 1.5; }
.repere-ligne {
  display: grid; grid-template-columns: 1fr auto auto; gap: 4px 14px;
  padding: 6px 0; border-bottom: 1px solid var(--bordure); font-size: 13px;
}
.repere-ligne:last-child { border-bottom: 0; }
.repere-ligne b { font-variant-numeric: tabular-nums; font-weight: 600; }
.repere-ligne .ref { color: var(--gris); font-variant-numeric: tabular-nums; }
.repere-entete { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
                 color: var(--gris); font-weight: 600; border-bottom: 1px solid var(--bordure-forte); }

/* ------------------------------------------------------------- bridge */
#bridge, #cascade { display: block; width: 100%; height: auto; }
.barre-pont { cursor: pointer; transition: opacity .1s; }
.barre-pont:hover { opacity: .78; }
.barre-pont.choisie { stroke: var(--encre); stroke-width: 2; }
.pont-detail {
  margin-top: 12px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: #fbfbfc;
  padding: 12px 14px;
}
.pont-detail h3 {
  font-size: 13.5px;
  margin-bottom: 9px;
  display: flex; justify-content: space-between; gap: 12px;
}
.pont-detail h3 span { font-variant-numeric: tabular-nums; }
.pont-ligne {
  display: grid;
  grid-template-columns: 62px 1fr auto auto auto;
  gap: 4px 12px;
  padding: 5px 0;
  border-top: 1px solid var(--bordure);
  font-size: 12.5px;
  align-items: baseline;
}
.pont-ligne:first-of-type { border-top: 0; }
.pont-ligne .num {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px; color: var(--bleu-fonce);
}
.pont-ligne .val { font-variant-numeric: tabular-nums; color: var(--gris); }
.pont-ligne .var { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ------------------------------------------------- onglet budgetaire */
.jauge {
  display: flex; height: 30px; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--bordure-forte); margin-bottom: 8px;
}
.jauge-part { display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; }
.jauge-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px;
  margin-bottom: 16px; }
.jauge-legende span { display: flex; align-items: center; gap: 6px; }
.jauge-legende i { width: 11px; height: 11px; border-radius: 2px; display: block; }

#courbe-capex { display: block; width: 100%; height: auto; }
.courbe-budget { fill: none; stroke: var(--gris); stroke-width: 1.4; stroke-dasharray: 5 4; }
.courbe-engage { fill: none; stroke: var(--bleu); stroke-width: 2.4; }
.courbe-decaisse { fill: none; stroke: var(--bleu-fonce); stroke-width: 2; stroke-dasharray: 2 3; }

.filtres-statut { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.puce-statut {
  appearance: none; border: 1px solid var(--bordure-forte); background: var(--blanc);
  border-radius: 999px; font: inherit; font-size: 12.5px; padding: 4px 12px;
  cursor: pointer; display: flex; align-items: center; gap: 7px;
}
.puce-statut:hover { background: var(--bleu-pale); }
.puce-statut[aria-pressed="true"] { background: var(--encre); color: #fff; border-color: var(--encre); }
.puce-statut b { font-variant-numeric: tabular-nums; opacity: .75; font-weight: 500; }

.etiquette {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.st-soumise { background: #eef1f5; color: #4a4f5a; }
.st-instruite { background: #e8f4fa; color: #00618a; }
.st-validee { background: #e6f3ec; color: #14603a; }
.st-engagee { background: #d9edf7; color: #00567a; }
.st-receptionnee { background: #004c6c; color: #fff; }
.st-ajournee { background: #fff6e5; color: #8a5d00; }
.st-refusee { background: #fdecea; color: var(--rouge); }

tr.derogation td:first-child::after {
  content: "dérogation"; margin-left: 8px; font-size: 11px; font-weight: 600;
  color: #8a5d00; background: #fff6e5; padding: 1px 7px; border-radius: 999px;
}
tr.motif td { background: #fbfbfc; font-size: 12.5px; color: var(--gris);
  text-align: left; white-space: normal; padding-left: 22px; }

.regle { padding: 9px 0; border-bottom: 1px solid var(--bordure); font-size: 13px; }
.regle:last-child { border-bottom: 0; }
.regle b { display: block; margin-bottom: 2px; }
.regle span { color: var(--gris); font-size: 12.5px; }

.barre-taux { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--bordure); font-size: 13px; }
.barre-taux:last-of-type { border-bottom: 0; }
.barre-taux .nom { width: 168px; flex: none; }
.barre-taux .piste { flex: 1; height: 15px; background: var(--fond);
  border-radius: 3px; position: relative; overflow: hidden; }
.barre-taux .remplissage { height: 100%; border-radius: 3px; }
.barre-taux .seuil { position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--encre); }
.barre-taux .valeur { width: 46px; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; flex: none; }