/* =========================================================================
   e-Visa Sénégal — feuille de style unique.

   Aucune règle en ligne dans les gabarits : la politique de sécurité du
   contenu interdit `unsafe-inline`. Tout ce qui est visuel vit ici.
   ========================================================================= */

:root {
  --vert: #00853f;
  --vert-fonce: #00632f;
  --vert-clair: #e6f3ec;
  --jaune: #fcd116;
  --rouge: #b3121b;
  --rouge-clair: #fdecec;

  --encre: #16202b;
  --encre-doux: #4a5866;
  --gris-bord: #d8dee5;
  --gris-fond: #f4f6f8;
  --blanc: #ffffff;

  --bleu-info: #1a5fb4;
  --bleu-info-clair: #e8f0fb;
  --ambre: #8a6100;
  --ambre-clair: #fdf4e0;

  --rayon: 8px;
  --rayon-large: 14px;
  --ombre: 0 1px 2px rgba(22, 32, 43, 0.06), 0 4px 16px rgba(22, 32, 43, 0.06);
  --ombre-forte: 0 4px 24px rgba(22, 32, 43, 0.12);
  --largeur: 1120px;
  --transition: 140ms ease;

  /* Polices hébergées localement ; la pile de repli couvre le temps de
     chargement et les navigateurs qui refuseraient le woff2. */
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --titre: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  /* Hauteur figée : l'en-tête flottant de l'accueil s'y adosse. */
  --hauteur-bandeau: 34px;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--encre);
  background: var(--gris-fond);
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.5em; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }
a { color: var(--vert-fonce); text-underline-offset: 3px; }
a:hover { color: var(--vert); }

:focus-visible {
  outline: 3px solid var(--bleu-info);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Accessibilité ------------------------------------------------------ */
.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--encre);
  color: var(--blanc);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.lien-evitement:focus { left: 0; }

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

/* --- Structure ---------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.contenu-principal {
  min-height: 60vh;
  padding: 2.5rem 0 4rem;
}

.bandeau-officiel {
  background: var(--encre);
  color: #cfd8e1;
  font-size: 0.8rem;
  height: var(--hauteur-bandeau);
  display: flex;
  align-items: center;
}
.bandeau-officiel .conteneur { display: flex; align-items: center; gap: 0.6rem; }
.bandeau-officiel span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Sans `min-width: 0`, un élément flex refuse de rétrécir sous la largeur
     de son contenu : le nom complet du ministère élargissait alors toute la
     page, et l'ellipse ne se déclenchait jamais. */
  min-width: 0;
}
.drapeau {
  display: inline-block;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.en-tete {
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-bord);
  position: sticky;
  top: 0;
  z-index: 40;
}
.en-tete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
  flex-wrap: wrap;
}
.marque { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; }
.marque-sceau {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--vert) 0%, var(--vert-fonce) 100%);
  color: var(--blanc);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  flex: none;
}
.marque-texte strong { display: block; font-size: 1.05rem; line-height: 1.2; }
.marque-texte span { display: block; font-size: 0.75rem; color: var(--encre-doux); }

.navigation { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.navigation a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--rayon);
  text-decoration: none;
  color: var(--encre-doux);
  font-size: 0.93rem;
  font-weight: 550;
}
.navigation a:hover { background: var(--gris-fond); color: var(--encre); }
.navigation a[aria-current="page"] { color: var(--vert-fonce); background: var(--vert-clair); }
.navigation form { margin: 0; }
/* `.navigation a` (0-1-1) l'emporterait sur `.bouton-principal` (0-1-0) et
   rendrait le bouton illisible — vert sur vert. On rétablit ici. */
.navigation a.bouton-principal,
.navigation a.bouton-principal:hover { color: var(--blanc); }
.navigation a.bouton-secondaire,
.navigation a.bouton-secondaire:hover { color: var(--encre); }

/* --- Boutons ------------------------------------------------------------ */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.35rem;
  border-radius: var(--rayon);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.bouton:active { transform: translateY(1px); }
.bouton-principal { background: var(--vert); color: var(--blanc); }
.bouton-principal:hover { background: var(--vert-fonce); color: var(--blanc); }
.bouton-secondaire { background: var(--blanc); color: var(--encre); border-color: var(--gris-bord); }
.bouton-secondaire:hover { background: var(--gris-fond); color: var(--encre); }
.bouton-discret { background: transparent; color: var(--encre-doux); padding: 0.5rem 0.75rem; }
.bouton-discret:hover { background: var(--gris-fond); color: var(--encre); }
.bouton-danger { background: var(--rouge); color: var(--blanc); }
.bouton-danger:hover { background: #8f0e15; color: var(--blanc); }
.bouton[disabled] { opacity: 0.55; cursor: not-allowed; }
.bouton-large { width: 100%; padding: 0.85rem 1.5rem; font-size: 1rem; }

.barre-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gris-bord);
}
.barre-actions .pousse-droite { margin-left: auto; }

/* --- Cartes ------------------------------------------------------------- */
.carte {
  background: var(--blanc);
  border: 1px solid var(--gris-bord);
  border-radius: var(--rayon-large);
  padding: 1.75rem;
  box-shadow: var(--ombre);
}
.carte + .carte { margin-top: 1.25rem; }
.carte-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.carte-sobre { box-shadow: none; background: var(--gris-fond); }

.grille { display: grid; gap: 1.25rem; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.colonnes-formulaire { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.pleine-largeur { grid-column: 1 / -1; }

/* --- Formulaires -------------------------------------------------------- */
.champ { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.25rem; }
.champ label { font-weight: 600; font-size: 0.9rem; }
.champ .obligatoire { color: var(--rouge); }
.champ input[type="text"],
.champ input[type="email"],
.champ input[type="password"],
.champ input[type="tel"],
.champ input[type="date"],
.champ input[type="number"],
.champ input[type="file"],
.champ select,
.champ textarea {
  font: inherit;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--gris-bord);
  border-radius: var(--rayon);
  background: var(--blanc);
  color: var(--encre);
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  border-color: var(--vert);
  box-shadow: 0 0 0 3px var(--vert-clair);
  outline: none;
}
.champ textarea { min-height: 96px; resize: vertical; }
.champ .aide { font-size: 0.82rem; color: var(--encre-doux); }
.champ .erreur-champ { font-size: 0.85rem; color: var(--rouge); font-weight: 550; }
.champ-en-erreur input,
.champ-en-erreur select,
.champ-en-erreur textarea { border-color: var(--rouge); background: var(--rouge-clair); }

.champ-case { flex-direction: row; align-items: flex-start; gap: 0.6rem; }
.champ-case input { margin-top: 0.35rem; flex: none; width: auto; }
.champ-case label { font-weight: 450; font-size: 0.9rem; }

fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; }
legend {
  font-weight: 650;
  font-size: 1.05rem;
  padding: 0 0 0.75rem;
  margin-bottom: 0.75rem;
  width: 100%;
  border-bottom: 1px solid var(--gris-bord);
}

/* --- Choix illustrés (type de visa, moyen de paiement) ------------------- */
.liste-choix { display: grid; gap: 0.85rem; }
.choix {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.1rem 1.25rem;
  border: 1.5px solid var(--gris-bord);
  border-radius: var(--rayon-large);
  background: var(--blanc);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.choix:hover { border-color: var(--vert); background: var(--vert-clair); }
.choix input { margin-top: 0.35rem; flex: none; }
.choix:has(input:checked) { border-color: var(--vert); background: var(--vert-clair); }
.choix-corps { flex: 1; }
.choix-titre { display: flex; justify-content: space-between; gap: 1rem; font-weight: 650; flex-wrap: wrap; }
.choix-prix { color: var(--vert-fonce); white-space: nowrap; }
.choix-detail { font-size: 0.88rem; color: var(--encre-doux); margin: 0.15rem 0 0; }

/* --- Fil d'étapes ------------------------------------------------------- */
.etapes {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  flex-wrap: wrap;
  counter-reset: etape;
}
.etapes li {
  flex: 1 1 150px;
  padding: 0.7rem 0.9rem;
  border-top: 4px solid var(--gris-bord);
  font-size: 0.86rem;
  color: var(--encre-doux);
  background: var(--blanc);
  border-radius: 0 0 var(--rayon) var(--rayon);
}
.etapes li .numero-etape { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.etapes li .titre-etape { font-weight: 600; color: var(--encre); }
.etapes li.faite { border-top-color: var(--vert); }
.etapes li.faite .titre-etape::after { content: " ✓"; color: var(--vert); }
.etapes li.courante { border-top-color: var(--vert); box-shadow: var(--ombre); }
.etapes li.courante .titre-etape { color: var(--vert-fonce); }

/* --- Alertes ------------------------------------------------------------ */
.alerte {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-radius: var(--rayon);
  border-left: 4px solid;
  margin-bottom: 1.25rem;
  font-size: 0.94rem;
}
.alerte p:last-child { margin-bottom: 0; }
.alerte-succes { background: var(--vert-clair); border-color: var(--vert); }
.alerte-erreur { background: var(--rouge-clair); border-color: var(--rouge); }
.alerte-info { background: var(--bleu-info-clair); border-color: var(--bleu-info); }
.alerte-attention { background: var(--ambre-clair); border-color: var(--ambre); }
.alerte ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }

/* --- Badges de statut --------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-brouillon { background: var(--gris-fond); color: var(--encre-doux); border-color: var(--gris-bord); }
.badge-en_attente_paiement { background: var(--ambre-clair); color: var(--ambre); }
.badge-payee { background: var(--bleu-info-clair); color: var(--bleu-info); }
.badge-en_cours_examen { background: var(--bleu-info-clair); color: var(--bleu-info); }
.badge-complement_requis { background: var(--ambre-clair); color: var(--ambre); }
.badge-approuvee { background: var(--vert-clair); color: var(--vert-fonce); }
.badge-refusee { background: var(--rouge-clair); color: var(--rouge); }
.badge-annulee { background: var(--gris-fond); color: var(--encre-doux); }
.badge-expiree { background: var(--gris-fond); color: var(--encre-doux); }

/* --- Tableaux ----------------------------------------------------------- */
.cadre-tableau { overflow-x: auto; border: 1px solid var(--gris-bord); border-radius: var(--rayon-large); background: var(--blanc); }
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
thead th {
  text-align: left;
  padding: 0.85rem 1rem;
  background: var(--gris-fond);
  border-bottom: 1px solid var(--gris-bord);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--encre-doux);
}
tbody th { text-align: left; font-weight: 650; }
tbody th, tbody td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--gris-bord); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--gris-fond); }
.reference { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88rem; letter-spacing: 0.02em; }

/* --- Récapitulatif / montants ------------------------------------------- */
.recapitulatif { list-style: none; margin: 0; padding: 0; }
.recapitulatif li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px dashed var(--gris-bord);
}
.recapitulatif li:last-child { border-bottom: 0; }
.recapitulatif .libelle { color: var(--encre-doux); }
.recapitulatif .valeur { font-weight: 600; text-align: right; }
.recapitulatif .ligne-total {
  border-top: 2px solid var(--encre);
  border-bottom: 0;
  margin-top: 0.5rem;
  padding-top: 0.9rem;
  font-size: 1.15rem;
}
.recapitulatif .ligne-total .valeur { color: var(--vert-fonce); font-size: 1.35rem; }
.montant-reduction .valeur { color: var(--vert-fonce); }

.definition { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: 0.55rem 1rem; margin: 0; font-size: 0.94rem; }
.definition dt { color: var(--encre-doux); }
.definition dd { margin: 0; font-weight: 550; }

/* --- Accueil ------------------------------------------------------------ */
.heros {
  background: linear-gradient(160deg, #00301a 0%, var(--vert-fonce) 55%, var(--vert) 100%);
  color: var(--blanc);
  padding: 4rem 0 4.5rem;
}
.heros h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); max-width: 22ch; }
.heros p { font-size: 1.08rem; max-width: 60ch; color: #dcefe4; }
.heros .bouton-secondaire { background: transparent; color: var(--blanc); border-color: rgba(255, 255, 255, 0.5); }
.heros .bouton-secondaire:hover { background: rgba(255, 255, 255, 0.12); color: var(--blanc); }
.heros-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 1.75rem; }
.heros-garanties { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.5rem; font-size: 0.9rem; color: #cfe6d9; }

.section { padding: 3.5rem 0; }
.section-claire { background: var(--blanc); border-block: 1px solid var(--gris-bord); }
.section-titre { text-align: center; margin-bottom: 2.5rem; }
.section-titre p { color: var(--encre-doux); max-width: 62ch; margin-inline: auto; }

.etape-illustree { text-align: center; padding: 1.5rem 1rem; }
.etape-illustree .pastille {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--vert-clair);
  color: var(--vert-fonce);
  display: grid;
  place-items: center;
  font-weight: 700;
  margin: 0 auto 0.9rem;
}
.etape-illustree p { color: var(--encre-doux); font-size: 0.93rem; }

/* --- Pied de page ------------------------------------------------------- */
.pied {
  background: var(--encre);
  color: #b9c4cf;
  padding: 2.75rem 0 2rem;
  font-size: 0.9rem;
  margin-top: 3rem;
}
.pied a { color: var(--blanc); }
.pied h3 { color: var(--blanc); font-size: 0.95rem; }
.slogan-pied {
  color: var(--jaune);
  font-style: italic;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 0.4rem; }
.pied-bas {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --- Divers ------------------------------------------------------------- */
.vide {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--encre-doux);
  border: 1.5px dashed var(--gris-bord);
  border-radius: var(--rayon-large);
  background: var(--blanc);
}
.compteur { font-size: 2rem; font-weight: 700; color: var(--vert-fonce); display: block; line-height: 1.1; }
.grille-indicateurs { margin-bottom: 1.25rem; }
.indicateur { text-align: center; padding: 1.5rem 1rem; }
.indicateur h2 { font-size: 0.85rem; color: var(--encre-doux); font-weight: 600; margin: 0.4rem 0 0;
                 text-transform: uppercase; letter-spacing: 0.04em; }
.filtres-periode { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.filtres-periode .bouton { padding: 0.5rem 1rem; font-size: 0.88rem; }
.mention-legale { font-size: 0.84rem; color: var(--encre-doux); }
.page-etroite { max-width: 560px; margin: 0 auto; }
.page-moyenne { max-width: 820px; margin: 0 auto; }

@media (max-width: 640px) {
  .contenu-principal { padding: 1.75rem 0 3rem; }
  .carte { padding: 1.25rem; }
  .definition { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .definition dd { margin-bottom: 0.6rem; }
  .en-tete .conteneur { min-height: 0; padding-block: 0.75rem; }
}

@media print {
  .en-tete, .pied, .bandeau-officiel, .barre-actions, .navigation { display: none !important; }
  body { background: var(--blanc); }
  .carte { box-shadow: none; border-color: #999; }
}

/* --- Frise de suivi d'un dossier ---------------------------------------- */
.frise {
  display: flex;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  gap: 0.25rem;
  counter-reset: frise;
}
.frise-etape {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--rayon);
  background: var(--gris-fond);
  font-size: 0.85rem;
  color: var(--encre-doux);
  position: relative;
}
.frise-puce {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 700;
  background: var(--gris-bord);
  color: var(--encre-doux);
  flex: none;
}
.frise-libelle { line-height: 1.25; }

.frise-faite { background: var(--vert-clair); color: var(--vert-fonce); }
.frise-faite .frise-puce { background: var(--vert); color: var(--blanc); }
.frise-courante { background: var(--blanc); box-shadow: inset 0 0 0 2px var(--vert); color: var(--encre); font-weight: 600; }
.frise-courante .frise-puce { background: var(--vert); color: var(--blanc); }
.frise-attention { background: var(--ambre-clair); color: var(--ambre); font-weight: 600; }
.frise-attention .frise-puce { background: var(--ambre); color: var(--blanc); }
.frise-reussie { background: var(--vert); color: var(--blanc); font-weight: 600; }
.frise-reussie .frise-puce { background: rgba(255, 255, 255, 0.25); color: var(--blanc); }
.frise-echouee { background: var(--rouge-clair); color: var(--rouge); font-weight: 600; }
.frise-echouee .frise-puce { background: var(--rouge); color: var(--blanc); }
.frise-interrompue { background: var(--gris-fond); color: var(--encre-doux); }

.frise-compacte { margin-bottom: 1.1rem; }
.frise-compacte .frise-etape { padding: 0.4rem 0.5rem; font-size: 0.78rem; gap: 0.4rem; }
.frise-compacte .frise-puce { width: 20px; height: 20px; font-size: 0.7rem; }

@media (max-width: 720px) {
  .frise { flex-direction: column; }
  .frise-compacte .frise-libelle,
  .frise .frise-libelle { font-size: 0.82rem; }
}

/* --- Cartes de dossier (espace demandeur) ------------------------------- */
.liste-dossiers { display: grid; gap: 1.25rem; }
.carte-dossier { padding: 1.5rem; }
.carte-dossier-urgente { border-left: 4px solid var(--ambre); }
.dossier-entete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.dossier-entete h2 { font-size: 1.15rem; margin: 0 0 0.15rem; }
.dossier-entete .reference { margin: 0; color: var(--encre-doux); font-size: 0.85rem; }
.definition-serree { gap: 0.3rem 1rem; font-size: 0.9rem; margin-bottom: 1rem; }
.dossier-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

.rappel-action {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  background: var(--gris-fond);
  border-radius: var(--rayon-large);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.rappel-action p { margin: 0; }
.rappel-urgent { background: var(--ambre-clair); border: 1px solid var(--ambre); }

/* --- Diagrammes en barres ----------------------------------------------- */
.diagramme { list-style: none; margin: 0; padding: 0; }
.diagramme li {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.4rem 0;
}
.diagramme-libelle { font-size: 0.88rem; color: var(--encre-doux); }
.diagramme-piste { background: var(--gris-fond); border-radius: 999px; height: 12px; overflow: hidden; }
.diagramme-barre {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vert-fonce), var(--vert));
  min-width: 2px;
}
.diagramme-valeur { font-weight: 650; font-size: 0.9rem; white-space: nowrap; }
.diagramme-valeur small { color: var(--encre-doux); font-weight: 450; }
.diagramme-large li { grid-template-columns: minmax(140px, 30%) 1fr auto; }

/* Largeurs des barres : l'attribut `style` en ligne est interdit par la CSP,
   la largeur passe donc par une classe, au palier de 2 %. */
.l-0 { width: 0%; }
.l-2 { width: 2%; }
.l-4 { width: 4%; }
.l-6 { width: 6%; }
.l-8 { width: 8%; }
.l-10 { width: 10%; }
.l-12 { width: 12%; }
.l-14 { width: 14%; }
.l-16 { width: 16%; }
.l-18 { width: 18%; }
.l-20 { width: 20%; }
.l-22 { width: 22%; }
.l-24 { width: 24%; }
.l-26 { width: 26%; }
.l-28 { width: 28%; }
.l-30 { width: 30%; }
.l-32 { width: 32%; }
.l-34 { width: 34%; }
.l-36 { width: 36%; }
.l-38 { width: 38%; }
.l-40 { width: 40%; }
.l-42 { width: 42%; }
.l-44 { width: 44%; }
.l-46 { width: 46%; }
.l-48 { width: 48%; }
.l-50 { width: 50%; }
.l-52 { width: 52%; }
.l-54 { width: 54%; }
.l-56 { width: 56%; }
.l-58 { width: 58%; }
.l-60 { width: 60%; }
.l-62 { width: 62%; }
.l-64 { width: 64%; }
.l-66 { width: 66%; }
.l-68 { width: 68%; }
.l-70 { width: 70%; }
.l-72 { width: 72%; }
.l-74 { width: 74%; }
.l-76 { width: 76%; }
.l-78 { width: 78%; }
.l-80 { width: 80%; }
.l-82 { width: 82%; }
.l-84 { width: 84%; }
.l-86 { width: 86%; }
.l-88 { width: 88%; }
.l-90 { width: 90%; }
.l-92 { width: 92%; }
.l-94 { width: 94%; }
.l-96 { width: 96%; }
.l-98 { width: 98%; }
.l-100 { width: 100%; }

/* --- Courbe des dépôts --------------------------------------------------- */
.graphique-courbe { width: 100%; height: auto; display: block; overflow: visible; }
.courbe-aire { fill: var(--vert-clair); }
.courbe-trait { fill: none; stroke: var(--vert); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.courbe-point { fill: var(--blanc); stroke: var(--vert); stroke-width: 2; }
.courbe-base { stroke: var(--gris-bord); stroke-width: 1; }
.graphique-legende {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--encre-doux); margin-top: 0.6rem;
}