/* =====================================================================
   Midway · charpente et composants
   Mesures reprises de la passation, sections 8.1 et 8.2.
   ===================================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--police);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Cible tactile de 44 px minimum sur tout element interactif : un technicien
   consulte la console debout devant une colonne, parfois de nuit. */
button,
a.bouton,
input,
select {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Charpente ─────────────────────────────────────────────────────── */

.appli {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.bloc-collant {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.centre {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 24px;
}

.entete {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.motsymbole {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}

.motsymbole b {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.motsymbole span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

.ressort {
  flex: 1;
}

/* Gouttiere de segments · sert au domaine ET a la profondeur */
.segments {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-3);
  border-radius: var(--r-pastille);
  flex-shrink: 0;
}

.segments button {
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-2);
  background: transparent;
  border-radius: var(--r-pastille);
  white-space: nowrap;
}

.segments button:hover {
  color: var(--text);
}

.segments button[aria-pressed='true'] {
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  box-shadow: var(--ombre-segment);
}

.segments.profondeur button {
  padding: 0 12px;
}

.mention-lecture {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  flex-shrink: 0;
}

.bouton-icone {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-bouton);
  background: var(--surface);
  color: var(--text-2);
  flex-shrink: 0;
}

.bouton-icone:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.bouton-icone[aria-pressed='true'] {
  color: var(--primary);
  border-color: var(--primary);
}

/* ── Navigation ────────────────────────────────────────────────────── */

.nav {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav button {
  position: relative;
  height: 44px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--text-2);
  background: transparent;
  white-space: nowrap;
}

.nav button:hover {
  color: var(--primary);
}

.nav button[aria-current='page'] {
  color: var(--text);
  font-weight: 700;
}

.nav button[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  border-radius: var(--r-puce);
  background: var(--primary);
}

/* ── Contenu et pied ──────────────────────────────────────────────── */

.contenu {
  flex: 1;
  max-width: var(--largeur);
  width: 100%;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pied {
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  color: var(--text-3);
}

.pied > div {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── Bandeau d'erreur · AUCUNE disparition automatique ─────────────────
   Le front d'eclairage public actuel affiche des messages de quatre secondes,
   identiques pour un refus de droits et pour une panne serveur, si bien que
   « ca n'affiche rien » veut souvent dire « il y a eu une erreur que personne
   n'a lue ». La troisieme ligne NOMME la nature de l'erreur.
   ------------------------------------------------------------------- */

.bandeau-erreur {
  padding: 14px 16px;
  border: 1px solid var(--error);
  border-radius: var(--r-carte);
  background: var(--error-weak);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.bandeau-erreur .ico {
  color: var(--error-ink);
  flex-shrink: 0;
}

.bandeau-erreur .corps {
  flex: 1;
  min-width: 0;
}

.bandeau-erreur .titre {
  font-weight: 700;
  color: var(--error-ink);
}

.bandeau-erreur .nature {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 4px;
}

/* ── Titres de page ───────────────────────────────────────────────── */

.kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

h1 {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 900;
}

.sous-titre {
  margin: 6px 0 0;
  color: var(--text-2);
}

.titre-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
}

/* ── Compteurs ────────────────────────────────────────────────────── */

.compteurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.compteur {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-carte);
  background: var(--surface);
}

.compteur .libelle {
  font-size: 11px;
  color: var(--text-2);
}

.compteur .valeur {
  font-size: 20px;
  font-weight: 900;
  margin: 2px 0;
}

.compteur .note {
  font-size: 11px;
  color: var(--text-3);
}

/* Accent de bonne nouvelle. Zero silence anormal DOIT se lire comme une bonne
   nouvelle ; a l'inverse 13 776 bornes inconnues ne sont pas une mauvaise
   nouvelle et restent en neutre. */
.compteur.bon {
  border-color: var(--success);
  background: var(--success-weak);
}

.compteur.bon .valeur {
  color: var(--success-ink);
}

/* ── Encart pedagogique ───────────────────────────────────────────── */

.encart {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-carte);
  background: var(--surface);
  color: var(--text-2);
}

/* ── Cartes et blocs ──────────────────────────────────────────────── */

.carte {
  border: 1px solid var(--border);
  border-radius: var(--r-carte);
  background: var(--surface);
  overflow: hidden;
}

.carte > .tete {
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.carte > .pied-carte {
  padding: 12px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-2);
}

.carte .corps {
  padding: 16px;
}

.blocs {
  display: grid;
  gap: 16px;
}

/* ── Recherche et regroupements ───────────────────────────────────── */

.recherche {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-champ);
  background: var(--surface-2);
}

.recherche svg {
  color: var(--text-3);
  flex-shrink: 0;
}

.recherche input {
  flex: 1;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: none;
  min-width: 0;
}

.puces {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.puce {
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-puce);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--text-2);
}

.puce:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.puce[aria-pressed='true'] {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-weak);
}

/* ── Pastille de verdict · composant reutilise partout ────────────── */

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pastille);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.pastille .point {
  width: 8px;
  height: 8px;
  border-radius: var(--r-puce);
  flex-shrink: 0;
}

.pastille.conforme {
  background: var(--success-weak);
  color: var(--success-ink);
}
.pastille.conforme .point {
  background: var(--success);
}

.pastille.retard {
  background: var(--warning-weak);
  color: var(--warning-ink);
}
.pastille.retard .point {
  background: var(--warning);
}

.pastille.silence {
  background: var(--error-weak);
  color: var(--error-ink);
}
.pastille.silence .point {
  background: var(--error);
}

/* « Jamais vue » est NEUTRE et non une erreur : une borne inconnue n'est pas
   une borne en panne, et 13 776 d'entre elles ne sont pas une mauvaise
   nouvelle. La peindre en rouge serait exactement la faute d'Alaska. */
.pastille.inconnue {
  background: var(--surface-3);
  color: var(--text-2);
}
.pastille.inconnue .point {
  background: var(--text-3);
}

.pastille.encours {
  background: var(--ongoing-weak);
  color: var(--ongoing-ink);
}
.pastille.encours .point {
  background: var(--ongoing);
}

/* ── Tableaux ─────────────────────────────────────────────────────── */

.grille {
  display: grid;
}

.grille .ligne {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  text-align: left;
  width: 100%;
  min-height: 60px;
}

.grille .ligne.entete-grille {
  border-top: 0;
  min-height: 0;
  padding: 10px 16px;
  background: var(--surface-2);
}

.grille .ligne.entete-grille span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

button.ligne:hover {
  background: var(--surface-2);
}

.identite .titre {
  font-weight: 700;
}

.identite .meta {
  font-size: 11px;
  color: var(--text-3);
}

.aligne-droite {
  justify-self: end;
}

.valeur-technique {
  font-family: var(--police-fixe);
  font-size: 12px;
  word-break: break-all;
}

/* ── Carte de joignabilite · le noyau du produit ───────────────────── */

.joignabilite {
  display: grid;
  gap: 12px;
}

.joignabilite .phrase {
  font-size: 14px;
}

.joignabilite .paire {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.joignabilite .mesure .libelle {
  font-size: 11px;
  color: var(--text-2);
}

.joignabilite .mesure .valeur {
  font-size: 16px;
  font-weight: 700;
}

/* Signale que la cadence observee differe de la declaree. La conception l'exige :
   une borne annonce 24 h et se reveille toutes les 12 h, donc se fier a la
   declaration ferait manquer DEUX reveils avant tout signalement. */
.ecart {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--warning);
  border-radius: var(--r-carte);
  background: var(--warning-weak);
  color: var(--warning-ink);
  font-size: 12px;
}

/* ── Emplacement nomme · jamais un nombre invente ─────────────────── */

.emplacement {
  color: var(--warning-ink);
  font-weight: 700;
}

/* ── Etat vide ────────────────────────────────────────────────────── */

.vide {
  padding: 24px 16px;
  color: var(--text-2);
  text-align: center;
}

/* ── Connexion ────────────────────────────────────────────────────── */

.connexion {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.connexion form {
  width: 100%;
  max-width: 360px;
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-carte);
  background: var(--surface);
}

.champ {
  display: grid;
  gap: 6px;
}

.champ label {
  font-size: 11px;
  color: var(--text-2);
}

.champ input {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-champ);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
}

.champ input:focus {
  border-color: var(--primary);
}

.bouton-primaire {
  height: 44px;
  padding: 0 16px;
  border-radius: var(--r-bouton);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
}

.bouton-primaire:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.bouton-discret {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-bouton);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
}

.bouton-discret:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .entete {
    height: auto;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .mention-lecture {
    display: none;
  }

  .contenu {
    padding: 16px;
  }

  .centre {
    padding: 0 16px;
  }

  /* Les grilles de tableau se replient en blocs empiles : une grille de cinq
     colonnes sur un telephone rend chaque cellule illisible. */
  .grille .ligne {
    grid-template-columns: 1fr !important;
    gap: 6px;
  }

  .grille .ligne.entete-grille {
    display: none;
  }

  .aligne-droite {
    justify-self: start;
  }
}

/* ── Pastilles d'etat du parc ──────────────────────────────────────────
   Chaque etat est un COMPTEUR qui devient un FILTRE. C'est ce qui remplace les
   trois listes empilees de la premiere version : l'ecran garde une hauteur fixe
   que le parc compte une borne ou treize mille.

   Une grille auto-fit plutot qu'une rangee qui defile : sur un telephone les
   pastilles se replient en colonnes au lieu de sortir de l'ecran, et un
   exploitant devant une colonne doit pouvoir toutes les voir.
   ------------------------------------------------------------------- */

.etats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.etat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 76px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--r-carte);
  background: var(--surface);
}

.etat:not([disabled]):hover {
  border-color: var(--primary);
}

.etat[aria-pressed='true'] {
  border-color: var(--primary);
  background: var(--primary-weak);
}

/* Un etat sans borne n'est pas cliquable : une pastille qui ouvre un tableau vide
   fait perdre un aller-retour pour rien. Il reste LISIBLE, parce que « zero borne
   sans cle » est une bonne nouvelle qu'il faut pouvoir lire. */
.etat[disabled] {
  cursor: default;
  opacity: 0.7;
}

.etat-valeur {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
}

.etat-libelle {
  font-size: 12px;
  font-weight: 700;
}

.etat-note {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.3;
}

/* Le ton vient du serveur : c'est une decision de domaine, pas d'affichage. Deux
   interfaces differentes doivent peindre le meme etat de la meme facon. */
.etat.erreur .etat-valeur { color: var(--error-ink); }
.etat.erreur { border-left: 3px solid var(--error); }
.etat.attention .etat-valeur { color: var(--warning-ink); }
.etat.attention { border-left: 3px solid var(--warning); }
.etat.encours .etat-valeur { color: var(--ongoing-ink); }
.etat.encours { border-left: 3px solid var(--ongoing); }
.etat.succes .etat-valeur { color: var(--success-ink); }
.etat.succes { border-left: 3px solid var(--success); }
.etat.neutre .etat-valeur { color: var(--text-2); }

/* Un etat a zero ne merite pas un liseré d'alerte : « zero borne sans cle » doit
   se lire comme une bonne nouvelle, pas comme un incident. */
.etat.erreur.vide-bon,
.etat.attention.vide-bon {
  border-left-color: var(--border);
}

/* ── Volet des ressources d'une borne ─────────────────────────────── */

/* Tuile de l'essentiel : la meme grille que les etats du parc, mais inerte.
   Elle affiche une valeur, elle ne filtre rien, donc elle ne doit pas repondre
   au survol comme un bouton : promettre un clic qui n'existe pas est un defaut
   d'interface a part entiere. */
.etat.fixe {
  cursor: default;
}

.etat.fixe:hover {
  border-color: var(--border-strong);
  color: inherit;
}

/* Entete de domaine, repliable. Toute la barre est cliquable : viser un chevron
   de 16 pixels est inutilement precis pour une action aussi courante. */
.repli {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
}

.repli:hover {
  background: var(--surface-2);
  color: var(--primary);
}

.repli svg {
  flex-shrink: 0;
}

.repli-titre {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.repli-note {
  flex: 1;
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repli-compte {
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Une ligne porteuse d'une demande en attente : signalee par un lisere, pas par
   une couleur de fond. Une demande en cours n'est pas une anomalie. */
.grille .ligne.ligne-attente {
  border-left: 3px solid var(--ongoing);
}

.demande {
  color: var(--ongoing-ink);
}

.actions-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Formulaire de saisie, ouvert SOUS la ligne concernee plutot que dans une
   fenetre : la valeur courante et la date de sa remontee doivent rester sous les
   yeux pendant la saisie, sinon on decide sans savoir ce qu'on remplace. */
.edition {
  padding: 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.etiquette {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  max-width: 420px;
}

.etiquette input,
.etiquette select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-champ);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  outline: none;
}

.etiquette input:focus,
.etiquette select:focus {
  border-color: var(--primary);
}

/* Encart de consequence. Il n'est pas rouge par gout du rouge : ces ecritures
   ont des effets qu'on ne peut pas defaire depuis la console, comme faire
   reculer une borne dans son historique de depots. */
.encart.alerte {
  border-color: var(--warning);
  background: var(--warning-weak);
  color: var(--text);
}

.acquit {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  cursor: pointer;
}

.acquit input {
  margin-top: 2px;
  flex-shrink: 0;
}

/* ── Formulaires · bibliotheque, groupes, campagnes ───────────────── */

.champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.etiquette textarea {
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-champ);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  resize: vertical;
}

.etiquette textarea:focus {
  border-color: var(--primary);
}

.etiquette input[type='file'] {
  padding: 8px;
  height: auto;
}

/* Un critere de filtre : trois champs et un retrait, sur une ligne. */
.critere {
  display: grid;
  grid-template-columns: 1.2fr .6fr 1.2fr auto;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.critere select,
.critere input {
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-champ);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  outline: none;
  min-width: 0;
}

@media (max-width: 700px) {
  .critere {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Selection multiple sur l'ecran du parc ───────────────────────── */

.identite.avec-case {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Case de selection. Un vrai bouton et non une case a cocher native : la ligne
   est reconstruite a chaque rendu, et l'etat coche vient de `etat.selection`,
   donc du modele et jamais du DOM. */
.case {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--surface);
  cursor: pointer;
  padding: 0;
}

.case:hover {
  border-color: var(--primary);
}

.case.cochee {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Emplacement de la case pour un appareil non selectionnable : la colonne reste
   alignee, sans promettre une action qui n'existe pas. */
.case.vide-case {
  border-style: dashed;
  border-color: var(--border);
  cursor: default;
}

.lien-titre {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.lien-titre:hover {
  color: var(--primary);
  text-decoration: underline;
}

.carte-selection {
  border-color: var(--primary);
}

/* ── Jauge d'avancement de campagne ──────────────────────────────── */

/* Trois segments et non un pourcentage : « 60 % » ne dit pas si les 40 %
   restants attendent ou ont echoue, or c'est toute la difference entre
   patienter et intervenir. */
.jauge {
  display: block;
}

.jauge-barre {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 6px;
}

.jauge-part {
  display: block;
  height: 100%;
}

.jauge-part.succes { background: var(--success); }
.jauge-part.erreur { background: var(--error); }
.jauge-part.annulee { background: var(--text-3); }

.ligne.cliquable {
  cursor: pointer;
}

.ligne.cliquable:hover {
  background: var(--surface-2);
}

/* Un appareil qui bute toujours au meme bloc : liseré d'alerte, parce que
   reessayer ne servira a rien. */
.grille .ligne.ligne-bute {
  border-left: 3px solid var(--error);
}

/* ── Etapes d'une distribution ───────────────────────────────────── */

.etapes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.etape {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-puce);
  font-size: 12px;
  color: var(--text-3);
  background: var(--surface-2);
}

.etape.faite {
  color: var(--success-ink);
  border-color: var(--success);
}

.etape.active {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--primary-weak);
  font-weight: 600;
}