/* ---------------------------------------------------------------------------
   Mises en page par écran.

   `epsight.css` porte le système de design (jetons, primitives, coquille) ;
   ce fichier ne contient que ce qui est propre à un écran - grilles, largeurs,
   compositions. Une règle qui sert à deux écrans a sa place dans l'autre
   fichier, pas ici.
--------------------------------------------------------------------------- */

/* --- Écrans d'entrée ----------------------------------------------------- */

.eps-entree {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 100vh;
}

.eps-entree-recit {
  background: var(--eps-marine);
  color: var(--eps-brume);
  padding: 56px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

/* Deux formes de fond, reprises de la maquette : un disque très pâle en haut à
   droite, un cercle safran filaire en bas. Purement décoratives, donc dans un
   conteneur `aria-hidden`. */
.eps-entree-halo,
.eps-entree-cercle {
  position: absolute;
  border-radius: 50%;
}

.eps-entree-halo {
  right: -160px;
  top: -120px;
  width: 520px;
  height: 520px;
  background: rgba(206, 204, 228, 0.06);
}

.eps-entree-cercle {
  right: 40px;
  bottom: -220px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255, 172, 19, 0.28);
}

.eps-entree-recit .eps-marque {
  position: relative;
  padding: 0;
}

.eps-entree-recit .eps-marque-point {
  width: 11px;
  height: 11px;
}

.eps-entree-recit .eps-marque-nom {
  font-size: 19px;
}

.eps-entree-texte {
  position: relative;
  max-width: 460px;
}

.eps-entree-surtitre {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eps-safran);
  margin-bottom: 22px;
}

.eps-entree-accroche {
  font-size: 44px;
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.eps-entree-detail {
  font-size: 17px;
  line-height: 1.6;
  margin-top: 20px;
  color: rgba(237, 237, 255, 0.78);
  text-wrap: pretty;
}

.eps-entree-mentions {
  position: relative;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(237, 237, 255, 0.5);
}

.eps-entree-panneau {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--eps-neige);
}

.eps-entree-boite {
  width: 100%;
  max-width: 396px;
}

.eps-entree-titre {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.eps-entree-sous-titre {
  font-size: 14px;
  color: var(--eps-sourdine);
  margin-top: 8px;
}

.eps-formulaire {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eps-entree-alerte {
  margin-top: 20px;
}

.eps-entree-action,
.eps-entree-secondaire {
  margin-top: 14px;
}

.eps-entree-note {
  margin-top: 28px;
}

.eps-entree-pied {
  margin-top: 32px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--eps-sourdine-forte);
  text-align: center;
}

/* Contrôles bloquants nommés sur le tableau de bord. */
.eps-liste-controles {
  list-style: none;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eps-liste-controles li {
  padding-left: 14px;
  position: relative;
}

.eps-liste-controles li::before {
  content: "-";
  position: absolute;
  left: 0;
  opacity: 0.6;
}

.eps-repli {
  margin-top: 20px;
  font-size: 13px;
}

.eps-repli summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}

.eps-qr {
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-carte);
  padding: 18px;
  display: flex;
  justify-content: center;
}

.eps-qr svg {
  width: 190px;
  height: 190px;
}

.eps-secret {
  display: inline-block;
  background: var(--eps-brume);
  color: var(--eps-marine);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  word-break: break-all;
}

.eps-arguments {
  list-style: none;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eps-arguments li {
  background: #fff;
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-bloc);
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--eps-sourdine);
}

.eps-arguments strong {
  color: var(--eps-encre);
  display: block;
  margin-bottom: 3px;
}

@media (max-width: 900px) {
  .eps-entree {
    grid-template-columns: 1fr;
  }

  .eps-entree-recit {
    display: none;
  }
}

/* --- Tableau de bord ----------------------------------------------------- */

.eps-entete-vue {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.eps-entete-vue-detail {
  font-size: 13.5px;
  color: var(--eps-sourdine);
  margin-top: 5px;
}

/* --- Préparation du parc ------------------------------------------------- */

/* Écran de préparation : le score à gauche, les exercices à droite. Les deux
   colonnes passent l'une sous l'autre d'elles-mêmes quand la place manque. */
.eps-grille-preparation {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.eps-grille-preparation > * {
  min-width: 0;
}

.eps-preparation-cote {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eps-preparation-tete {
  display: flex;
  align-items: center;
  gap: 24px;
}

.eps-preparation-reste {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--eps-trait);
}

.eps-preparation-liste {
  list-style: none;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eps-item-preparation {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-controle);
}

.eps-item-preparation-corps {
  flex: 1;
}

.eps-item-preparation-titre {
  font-size: 13px;
  font-weight: 600;
}

.eps-item-preparation-points {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--eps-avert-texte);
  white-space: nowrap;
}

/* Un item de surveillance ne fait rien gagner : il ne prend pas la couleur
   d'un gain. */
.eps-item-preparation-points--maintient {
  color: var(--eps-sourdine);
}

/* La synthèse de préparation et trois indicateurs. Autant de colonnes que la
   largeur en accueille, jamais moins de 230 px chacune. */
.eps-bandeau-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

/* Panneau marine « Exercices de reprise », sur l'écran de préparation. */
.eps-panneau-exercices-titre {
  font-size: 17px;
  font-weight: 600;
  margin-top: 10px;
}

.eps-panneau-exercices-texte {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(237, 237, 255, 0.78);
  margin-top: 8px;
  max-width: 72ch;
}

.eps-panneau-exercices-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.eps-panneau-exercices-pied {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(237, 237, 255, 0.14);
  font-size: 12px;
  color: rgba(237, 237, 255, 0.7);
}

/* Temps de reprise face à l'objectif : une barre par plan, dont le bout est
   l'objectif. */
.eps-rto-liste {
  list-style: none;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eps-rto-entete {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.eps-rto-plan {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eps-rto-mesure {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.eps-rto-mesure--tenu {
  color: var(--eps-ok-texte);
}

.eps-rto-mesure--depasse {
  color: var(--eps-erreur-texte);
}

.eps-rto-objectif {
  font-size: 11.5px;
  color: var(--eps-sourdine-forte);
  font-variant-numeric: tabular-nums;
}

.eps-rto-jauge {
  position: relative;
  margin-top: 7px;
  background: var(--eps-brume);
}

.eps-rto-remplissage {
  background: var(--eps-marine);
}

.eps-rto-jauge--objectif::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: var(--eps-encre);
  opacity: 0.55;
}

.eps-rto-note {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--eps-neige);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--eps-sourdine);
}

.eps-bandeau-direct-kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eps-safran);
}

.eps-deux-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

/* Sans quoi un nom de plan trop long élargit sa colonne et pousse l'autre
   hors de l'écran. */
.eps-deux-colonnes > * {
  min-width: 0;
}

.eps-mini-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-radius: var(--eps-rayon-controle);
  color: inherit;
}

.eps-mini-ligne:hover {
  background: var(--eps-neige);
  color: inherit;
}

.eps-mini-nom {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eps-mini-ligne--panneau {
  background: #fff;
  margin-bottom: 8px;
}

.eps-mini-ligne--panneau:hover {
  background: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 95, 0.1);
}

.eps-mini-meta {
  font-size: 11.5px;
  color: rgba(25, 19, 61, 0.5);
}

@media (max-width: 1000px) {
  .eps-bandeau-kpi,
  .eps-deux-colonnes,
  .eps-compteurs {
    grid-template-columns: 1fr;
  }

  .eps-item-preparation {
    flex-wrap: wrap;
  }

  .eps-bandeau-direct {
    grid-template-columns: 1fr;
  }
}

/* Tableau « derniers exercices » du tableau de bord. */
.eps-tableau--exercices {
  --eps-colonnes: 1fr auto auto;
}

/* Carte d'état vide : un paragraphe court, une action. */
.eps-carte-vide {
  margin-top: 16px;
}

.eps-carte-vide p {
  max-width: 56ch;
  margin-top: 8px;
  line-height: 1.6;
}

.eps-carte-vide .eps-btn {
  margin-top: 20px;
}

/* --- Plans --------------------------------------------------------------- */

.eps-carte-plan:hover {
  color: inherit;
  box-shadow: 0 8px 24px rgba(0, 0, 95, 0.1);
}

/* --- Historique ---------------------------------------------------------- */

.eps-tableau--historique {
  --eps-colonnes: 2fr 1.3fr 0.9fr 0.7fr 1.1fr 1fr;
}

.eps-pagination {
  border-top: 1px solid var(--eps-trait);
  margin-top: 0;
  background: #fff;
  border: 1px solid var(--eps-trait);
  border-top: 0;
  border-radius: 0 0 var(--eps-rayon-carte) var(--eps-rayon-carte);
}

/* --- Détail d'un plan ---------------------------------------------------- */

.eps-entete-objet {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.eps-entete-objet-detail {
  margin-top: 5px;
}

/* La séquence porte le rail vertical : le dernier trait est masqué pour que la
   ligne ne dépasse pas sous la dernière étape. */
.eps-sequence {
  margin-top: 20px;
}

.eps-sequence > .eps-sequence-etape:last-child .eps-sequence-trait {
  display: none;
}

.eps-sequence-fin {
  padding: 4px 0 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--eps-ok-texte);
}

.eps-meta-plan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.eps-meta-valeur {
  font-size: 18px;
  font-weight: 600;
  margin-top: 8px;
}

.eps-meta-valeur--ok,
.eps-meta-detail--ok {
  color: var(--eps-ok-texte);
}

.eps-meta-valeur--erreur,
.eps-meta-detail--erreur {
  color: var(--eps-erreur-texte);
}

.eps-meta-detail {
  font-size: 11.5px;
  color: var(--eps-sourdine);
  margin-top: 4px;
}

.eps-machines-etape {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 9px;
}

.eps-onglets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.eps-onglet {
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: var(--eps-rayon-controle);
  border: 1px solid rgba(25, 19, 61, 0.12);
  background: #fff;
  color: rgba(25, 19, 61, 0.7);
}

.eps-onglet:hover {
  color: var(--eps-marine);
  border-color: var(--eps-marine);
}

.eps-onglet[aria-current="page"] {
  background: var(--eps-marine);
  border-color: var(--eps-marine);
  color: #fff;
}

@media (max-width: 1000px) {
  .eps-entete-objet-detail {
  margin-top: 5px;
}

/* La séquence porte le rail vertical : le dernier trait est masqué pour que la
   ligne ne dépasse pas sous la dernière étape. */
.eps-sequence {
  margin-top: 20px;
}

.eps-sequence > .eps-sequence-etape:last-child .eps-sequence-trait {
  display: none;
}

.eps-sequence-fin {
  padding: 4px 0 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--eps-ok-texte);
}

.eps-meta-plan {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Exercice en direct -------------------------------------------------- */

@media (max-width: 1200px) {
  .eps-colonnes-direct {
    grid-template-columns: 1fr;
  }
}

/* --- Éditeur de rings ---------------------------------------------------- */

/* Nom de ring modifiable sur place : il doit se lire comme un titre tant qu'on
   n'y touche pas, et se comporter comme un champ dès qu'on clique. */
.eps-saisie--discrete {
  border-color: transparent;
  background: none;
  font-size: 15.5px;
  font-weight: 600;
  padding: 4px 8px;
  width: auto;
  max-width: 26ch;
}

.eps-saisie--discrete:hover {
  border-color: var(--eps-bordure-champ);
  background: #fff;
}

.eps-zone-depot {
  list-style: none;
  margin-top: 12px;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  min-height: 56px;
  align-items: center;
  background: var(--eps-neige);
  border: 1px dashed rgba(25, 19, 61, 0.16);
  border-radius: var(--eps-rayon-bloc);
  padding: 10px;
}

.eps-zone-depot-vide {
  font-size: 12px;
  color: var(--eps-sourdine-forte);
  padding: 0 4px;
  list-style: none;
}

.eps-jeton-machine {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  color: var(--eps-encre);
  padding: 9px 12px;
  border-radius: var(--eps-rayon-controle);
  border: 1px solid var(--eps-trait);
  cursor: grab;
  list-style: none;
}

.eps-jeton-machine:hover {
  border-color: var(--eps-marine);
}

.eps-jeton-machine:active {
  cursor: grabbing;
}

/* Un plan verrouillé n'est plus déplaçable : le curseur doit le dire avant
   que l'utilisateur ne l'apprenne en essayant. */
.eps-plateau--verrouille .eps-jeton-machine {
  cursor: default;
}

/* Classe posée par Sortable sur l'élément fantôme pendant le glissement
   (`ghostClass` dans rings.js - les deux noms doivent rester alignés). */
.eps-membre--fantome {
  opacity: 0.35;
  border-style: dashed;
}

.eps-jeton-poignee {
  opacity: 0.4;
  flex: none;
}

.eps-jeton-nom {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.eps-jeton-detail {
  display: block;
  font-size: 11px;
  color: var(--eps-sourdine);
  margin-top: 2px;
}

.eps-jeton-retirer {
  border: 0;
  background: none;
  color: var(--eps-sourdine-forte);
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
  flex: none;
}

.eps-jeton-retirer:hover {
  color: var(--eps-erreur);
}

/* --- Sélecteur de machines ----------------------------------------------- */

.eps-selecteur {
  margin-top: 12px;
}

.eps-selecteur summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
}

.eps-selecteur summary::-webkit-details-marker {
  display: none;
}

.eps-selecteur-champ {
  margin-top: 10px;
}

.eps-resultats {
  list-style: none;
  margin-top: 8px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-bloc);
  background: #fff;
}

.eps-resultat {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--eps-trait-fin);
}

.eps-resultat:hover {
  background: var(--eps-brume);
}

.eps-resultat-vide {
  padding: 12px;
  font-size: 12px;
  color: var(--eps-sourdine);
}

/* --- Listes à autocomplétion (nouveau client, D-51) ---------------------- */

.eps-rapprochement {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.eps-autocompletion {
  display: grid;
  gap: 6px;
}

/* La liste se déroule sous le champ, avec l'ombre du menu de la barre
   latérale. Vide, elle ne prend aucune place. */
.eps-autocompletion-liste:empty {
  display: none;
}

.eps-autocompletion-resultats {
  list-style: none;
  max-height: min(50vh, 300px);
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border-radius: var(--eps-rayon-bloc);
  box-shadow:
    0 10px 26px rgba(0, 0, 40, 0.18),
    0 0 0 1px rgba(25, 19, 61, 0.08);
  animation: eps-menu-ouvre 0.14s ease-out;
}

.eps-autocompletion-resultats .eps-menu-choix {
  justify-content: space-between;
}

.eps-autocompletion-choisi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-bloc);
  background: var(--eps-brume);
}

.eps-autocompletion-changer {
  margin-left: auto;
}

/* --- Panneau d'une machine ----------------------------------------------- */

.eps-formulaire--serre {
  margin-top: 14px;
  gap: 12px;
}

.eps-liste-sondes {
  list-style: none;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eps-sonde {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-champ);
  padding: 10px 12px;
}

.eps-bouton-icone {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--eps-neige);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--eps-sourdine);
  border: 0;
  cursor: pointer;
  flex: none;
}

.eps-bouton-icone:hover {
  background: var(--eps-brume);
  color: var(--eps-marine);
}

/* --- Fiches et listes agents --------------------------------------------- */

.eps-filtres {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.eps-colonnes-fiche {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr;
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.eps-colonnes-fiche--inverse {
  grid-template-columns: 0.9fr 1.35fr;
}

@media (max-width: 1100px) {
  .eps-colonnes-fiche,
  .eps-colonnes-fiche--inverse {
    /* minmax(0, 1fr) : un « 1fr » seul ne descend jamais sous son contenu le
       plus large, et la page débordait d'un téléphone. */
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Rapport ------------------------------------------------------------- */

.eps-rapport {
  max-width: 940px;
}

.eps-rapport-entete {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* --- Gabarits de colonnes des tableaux ----------------------------------- */

/* `--eps-colonnes` est lu par `.eps-tableau` (epsight.css). Un gabarit par
   tableau plutôt qu'un style en ligne : la largeur des colonnes est une
   décision de mise en page, pas une donnée. */

.eps-tableau--exercices-plan {
  --eps-colonnes: 1.1fr 0.9fr 1.2fr 0.5fr 0.8fr 0.9fr;
}

.eps-tableau--deroule {
  --eps-colonnes: 1.3fr 1.4fr 0.7fr 0.7fr 1.2fr 0.9fr;
}

/* D-64 (US-217) : les temps observés et la capture de chaque console. */
.eps-tableau--temps {
  --eps-colonnes: 1.4fr 0.9fr 0.9fr 0.9fr 1.2fr;
}

.eps-galerie-preuves {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.eps-preuve {
  margin: 0;
  display: grid;
  gap: 6px;
  break-inside: avoid;
}

.eps-preuve img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-bloc);
  background: var(--eps-encre);
}

.eps-preuve figcaption {
  display: grid;
  gap: 2px;
  font-size: 0.85em;
}

.eps-tableau--instantane {
  --eps-colonnes: 1.2fr 1.2fr 1fr 1.2fr 1fr 0.5fr;
}

.eps-tableau--zones {
  --eps-colonnes: 0.5fr 1.2fr 1.2fr 1.1fr 1.1fr 1.1fr 0.6fr;
}

.eps-tableau--procedures {
  --eps-colonnes: 2fr 0.6fr 1fr;
}

.eps-tableau--a-valider {
  --eps-colonnes: 1.6fr 1fr 0.9fr;
}

.eps-tableau--clients {
  --eps-colonnes: 1.6fr 0.6fr 0.6fr 0.7fr 0.8fr 1.1fr;
}

.eps-tableau--plans-client {
  --eps-colonnes: 1.6fr 1fr 1.2fr 0.5fr 0.7fr;
}

.eps-tableau--inventaire {
  --eps-colonnes: 1.4fr 1.3fr 1fr 1.1fr 0.7fr;
}

.eps-tableau--inventaire-global {
  --eps-colonnes: 1.4fr 1fr 1.3fr 1fr 1.1fr 0.7fr;
}

.eps-tableau--rapprochements {
  --eps-colonnes: 1.2fr 0.8fr 1.4fr 1.2fr 1.2fr 1fr;
}

.eps-tableau--correspondances {
  --eps-colonnes: 0.4fr 1.4fr 1.4fr 0.5fr;
}

/* Cellule occupant toute la largeur : état vide, ou erreurs d'une ligne de
   formulaire. La grille n'a pas d'équivalent de `colspan`. */
.eps-cellule-pleine {
  grid-column: 1 / -1;
}

/* Une machine ou un client inactif reste lisible mais recule d'un plan : il
   est encore là, il ne compte plus. */
.eps-ligne-inactive {
  opacity: 0.55;
}

/* --- Compléments d'écrans ------------------------------------------------ */

.eps-bandeau-kpi--quatre {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

/* Un indicateur cliquable qui appelle un geste : le liseré dit qu'il y a
   quelque chose à faire, sans crier comme une alerte. */
.eps-kpi--action {
  border-left: 4px solid var(--eps-marine);
  color: inherit;
}

.eps-kpi--alerte {
  border-left: 4px solid var(--eps-safran);
  color: inherit;
}

a.eps-kpi:hover {
  color: inherit;
  box-shadow: 0 6px 18px rgba(0, 0, 95, 0.1);
}

.eps-recherche--large {
  width: 320px;
  max-width: 100%;
}

.eps-liste-en-ligne {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
}

/* Formulaire seul au centre de l'écran : au-delà de cette largeur, l'œil perd
   le début de la ligne suivante. */
.eps-formulaire-large {
  max-width: 760px;
}

.eps-champ--court {
  max-width: 280px;
}

@media (max-width: 1200px) {
  .eps-bandeau-kpi--quatre {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

/* Sur un téléphone, deux colonnes de 180 pixels débordent de l'écran : le
   tableau de bord des agents défilait de côté. */
@media (max-width: 480px) {
  .eps-bandeau-kpi--quatre {
    grid-template-columns: 1fr;
  }
}

/* --- Procédures (Markdown rendu côté serveur) ---------------------------- */

/* Le corps d'une procédure est du HTML produit par `markdown`. Il n'a aucune
   classe : ces règles sont le seul style qu'il recevra, et elles remplacent ce
   que Pico apportait avant. Une procédure illisible le jour du sinistre est
   une procédure inutile. */
.eps-procedure {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.65;
  max-width: 78ch;
}

.eps-procedure h1,
.eps-procedure h2,
.eps-procedure h3,
.eps-procedure h4 {
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 26px 0 8px;
}

.eps-procedure h1 {
  font-size: 20px;
}
.eps-procedure h2 {
  font-size: 17px;
}
.eps-procedure h3 {
  font-size: 15px;
}
.eps-procedure h4 {
  font-size: 14px;
}

.eps-procedure > :first-child {
  margin-top: 0;
}

.eps-procedure p {
  margin: 10px 0;
}

.eps-procedure ul,
.eps-procedure ol {
  margin: 10px 0;
  padding-left: 22px;
}

.eps-procedure li {
  margin: 4px 0;
}

.eps-procedure code {
  font-family: var(--eps-police-mono);
  font-size: 12.5px;
  background: var(--eps-brume);
  color: var(--eps-marine);
  border-radius: 5px;
  padding: 2px 5px;
}

.eps-procedure pre {
  background: var(--eps-encre);
  color: var(--eps-brume);
  border-radius: var(--eps-rayon-bloc);
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.5;
}

.eps-procedure pre code {
  background: none;
  color: inherit;
  padding: 0;
}

.eps-procedure blockquote {
  margin: 14px 0;
  padding: 10px 16px;
  border-left: 3px solid var(--eps-lavande);
  background: var(--eps-neige);
  color: var(--eps-sourdine);
}

/* Un vrai `<table>`, pas une grille : le contenu vient de l'auteur de la
   procédure, on ne connaît ni le nombre ni la largeur des colonnes. */
.eps-procedure table {
  display: table;
  margin: 14px 0;
  font-size: 13px;
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-champ);
  overflow: hidden;
}

.eps-procedure th,
.eps-procedure td {
  border-bottom: 1px solid var(--eps-trait-fin);
  padding: 8px 12px;
  text-align: left;
}

.eps-procedure th {
  background: var(--eps-neige);
  font-weight: 600;
}

.eps-procedure a {
  text-decoration: underline;
}

.eps-procedure img {
  border-radius: var(--eps-rayon-champ);
  margin: 12px 0;
}

/* --- Infrastructure et fiche machine ------------------------------------- */

.eps-tableau--machines {
  /* Chaque ligne est sa propre grille : une colonne `auto` prendrait la
     largeur de SON bouton, et « Mettre sous sauvegarde » décalerait sa ligne
     par rapport aux autres. La colonne du geste a donc une largeur fixe. */
  --eps-colonnes: 1.5fr 1.1fr 1.4fr 0.6fr 1fr 190px;
}

.eps-rangee--serree {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.eps-chevron {
  font-size: 15px;
  color: rgba(25, 19, 61, 0.3);
}

.eps-liste-points {
  margin-top: 16px;
  gap: 8px;
}

/* Marqueur du point retenu, à droite de la ligne. */
.eps-point-marqueur {
  font-size: 11px;
  font-weight: 700;
  color: var(--eps-marine);
  white-space: nowrap;
}

.eps-pile--espacee {
  gap: 16px;
}

/* --- Assistant de création ------------------------------------------------ */

.eps-assistant-etapes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 18px 24px;
}

.eps-assistant-etape {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: inherit;
}

.eps-assistant-etape:hover {
  color: var(--eps-marine);
}

.eps-assistant-numero {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--eps-brume);
  color: rgba(25, 19, 61, 0.5);
}

.eps-assistant-numero--faite {
  background: var(--eps-ok-fond);
  color: var(--eps-ok-texte);
}

.eps-assistant-numero--courante {
  background: var(--eps-marine);
  color: #fff;
}

.eps-assistant-libelle {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--eps-sourdine);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eps-assistant-etape--courante .eps-assistant-libelle {
  font-weight: 700;
  color: var(--eps-encre);
}

/* Le trait qui relie deux étapes prend la place restante : la barre occupe
   toute la largeur quel que soit le nombre d'étapes. */
.eps-assistant-trait {
  flex: 1;
  height: 1px;
  min-width: 10px;
  background: rgba(25, 19, 61, 0.12);
}

.eps-assistant-pied {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.eps-assistant-aide {
  flex: 1;
  min-width: 200px;
  font-size: 12.5px;
  color: rgba(25, 19, 61, 0.5);
}

.eps-assistant-fin {
  max-width: 720px;
  padding: 34px 36px;
}

.eps-assistant-fin .eps-titre-objet {
  margin-top: 18px;
}

/* --- Étape 2 : choix des machines ---------------------------------------- */

.eps-liste-choix {
  margin-top: 18px;
  gap: 8px;
}

.eps-choix-machine {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border-radius: var(--eps-rayon-bloc);
  border: 1px solid var(--eps-trait);
  background: #fff;
}

/* L'état retenu suit la case cochée, pas une classe rendue par le serveur :
   sans cela, décocher laisse le contour allumé jusqu'au rechargement. */
.eps-choix-machine:has(input[type="checkbox"]:checked) {
  border-color: var(--eps-marine);
  background: var(--eps-brume);
}

.eps-choix-machine:has(input[type="checkbox"]:focus-visible) {
  outline: 2px solid var(--eps-marine);
  outline-offset: 2px;
}

/* Le libellé enveloppe la case et prend toute la place : la ligne entière
   devient cliquable sans une ligne de JavaScript. */
.eps-choix-machine-libelle {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.eps-choix-machine-libelle input[type="checkbox"] {
  width: 19px;
  height: 19px;
  flex: none;
}

.eps-saisie--compacte {
  width: auto;
  min-width: 210px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 600;
}

.eps-panneau--collant {
  position: sticky;
  top: 0;
}

.eps-selection-compte {
  font-size: 34px;
  font-weight: 700;
  color: var(--eps-marine);
  letter-spacing: -0.03em;
  margin-top: 10px;
}

.eps-selection-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: var(--eps-rayon-controle);
  padding: 10px 12px;
  margin-bottom: 7px;
}

/* --- Étape 4 : comportement des rings ------------------------------------ */

.eps-reglages-ring {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.eps-reglage {
  background: var(--eps-neige);
  border-radius: var(--eps-rayon-bloc);
  padding: 14px 16px;
}

.eps-reglage-titre {
  font-size: 12.5px;
  font-weight: 600;
}

.eps-reglage-detail {
  font-size: 11.5px;
  color: var(--eps-sourdine);
  margin-top: 4px;
  line-height: 1.45;
}

.eps-reglage-champ {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.eps-reglage-champ input {
  width: 88px;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid rgba(25, 19, 61, 0.14);
  background: #fff;
}

.eps-reglage-unite {
  font-size: 12px;
  color: var(--eps-sourdine);
}

.eps-reglage .eps-bascule {
  margin-top: 12px;
}

@media (max-width: 1000px) {
  .eps-reglages-ring {
    grid-template-columns: 1fr;
  }
}

/* --- Organisation, utilisateurs, réglages -------------------------------- */

.eps-tableau--utilisateurs {
  --eps-colonnes: 2fr 1.4fr 1.3fr 1fr;
}

/* Avec les gestes de l'administrateur : le rôle devient une liste, une
   colonne s'ajoute pour retirer ou réinitialiser (D-55). */
.eps-tableau--utilisateurs-gestion {
  --eps-colonnes: 1.6fr 1.6fr 1fr 0.8fr 1.7fr;
}

.eps-tableau--agents {
  --eps-colonnes: 1.6fr 1.6fr 1.1fr 0.8fr 1.9fr;
}

/* Une cellule de grille ne descend pas sous la largeur de son contenu : la
   liste du rôle et son bouton débordaient sur la colonne voisine, qui
   recouvrait le bouton. On les laisse se réduire, puis passer à la ligne. */
.eps-tableau--utilisateurs-gestion td,
.eps-tableau--agents td {
  min-width: 0;
}

.eps-tableau--utilisateurs-gestion .eps-rangee--serree,
.eps-tableau--agents .eps-rangee--serree {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.eps-tableau--utilisateurs-gestion .eps-saisie--compacte,
.eps-tableau--agents .eps-saisie--compacte {
  min-width: 0;
  flex: 1 1 130px;
}

.eps-vignette--marine {
  background: var(--eps-marine);
  color: #fff;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 18px;
}

/* Ligne du journal d'activité : heure à gauche en chasse fixe, phrase à
   droite. Les heures s'alignent, donc se parcourent. */
.eps-activite {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  align-items: start;
}

.eps-activite-heure {
  font-size: 11px;
  color: var(--eps-sourdine-forte);
  padding-top: 2px;
}

.eps-activite-texte {
  font-size: 12.5px;
  line-height: 1.5;
}

.eps-reglages-menu {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: start;
}

.eps-reglages-lien {
  padding: 11px 13px;
  border-radius: var(--eps-rayon-controle);
  font-size: 13px;
  font-weight: 500;
  color: rgba(25, 19, 61, 0.65);
}

.eps-reglages-lien:hover {
  background: var(--eps-neige);
  color: var(--eps-marine);
}

.eps-reglages-lien[aria-current="page"] {
  background: var(--eps-brume);
  color: var(--eps-marine);
  font-weight: 600;
}

/* Réglage : intitulé et explication à gauche, contrôle à droite. */
.eps-reglage-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(25, 19, 61, 0.07);
}

.eps-reglage-ligne:last-child {
  border-bottom: 0;
}

/* Pas de raccourci `background` ni `padding` ici : sur la liste déroulante, ils
   effaceraient la flèche et le retrait que `epsight.css` lui pose. */
.eps-reglage-controle input,
.eps-reglage-controle select {
  font-size: 12.5px;
  font-weight: 600;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 14px;
  border-radius: var(--eps-rayon-controle);
  border: 1px solid rgba(25, 19, 61, 0.14);
  background-color: #fff;
  min-width: 170px;
}

.eps-reglage-controle input {
  padding-right: 14px;
}

/* Lecture seule (US-015) : un champ qu'on ne peut pas modifier ne doit pas en
   avoir l'air. `background-color` et non `background`, qui effacerait la
   flèche des listes déroulantes. */
.eps-reglage-controle input:disabled,
.eps-reglage-controle select:disabled {
  background-color: var(--eps-brume);
  color: var(--eps-sourdine);
  border-color: transparent;
  cursor: not-allowed;
}

/* --- File des mises sous sauvegarde -------------------------------------- */

/* Les deux champs de traitement côte à côte, les boutons sous eux : l'agent
   saisit puis tranche, dans cet ordre. */
.eps-traitement {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.eps-traitement .eps-rangee {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .eps-traitement {
    grid-template-columns: 1fr;
  }
}

/* --- Résultats de recherche ---------------------------------------------- */

/* Une ligne par résultat, séparées par un trait plutôt que par des cartes :
   on parcourt une liste des yeux, on ne compare pas des objets. */
.eps-resultats {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
}

.eps-resultat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-top: 1px solid var(--eps-trait-fin);
  text-decoration: none;
  color: inherit;
}

.eps-resultat:first-child {
  border-top: 0;
}

.eps-resultat:hover {
  color: var(--eps-marine);
}

.eps-resultat-nom {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.eps-resultat-detail {
  display: block;
  font-size: 12px;
  color: var(--eps-sourdine);
  margin-top: 3px;
}

/* La flèche ne bouge qu'au survol du résultat entier : la faire apparaître
   seulement alors la rendrait invisible au clavier, où il n'y a pas de survol. */
.eps-resultat-fleche {
  margin-left: auto;
  flex: none;
  color: var(--eps-sourdine-forte);
}

.eps-resultat:hover .eps-resultat-fleche {
  color: var(--eps-marine);
}

/* --- Une paire clé/valeur qui se saisit ---------------------------------- */

/* Le VLAN d'un client se lit et s'écrit au même endroit : il vit dans la liste
   des attributs de la fiche, pas dans un écran de réglages à part. Le
   formulaire doit donc s'aligner exactement comme les paires voisines, sinon
   la ligne modifiable saute aux yeux comme une pièce rapportée. */
.eps-paire--saisie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.eps-paire--saisie input[type="number"],
.eps-paire--saisie input[type="text"] {
  width: 8ch;
  text-align: right;
  font-family: var(--eps-police-mono);
}

.eps-erreur-champ {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--eps-erreur-texte);
  text-align: right;
}

/* --- Destination de restauration ----------------------------------------- */

/* Quatre champs courts : une grille qui s'adapte plutôt que quatre lignes
   pleine largeur, où l'œil parcourrait de la marge pour rien. */
.eps-grille-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.eps-aide-champ {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--eps-sourdine);
}

@media (max-width: 720px) {
  .eps-grille-champs {
    grid-template-columns: 1fr;
  }
}

/* --- Interface simplifiée (D-37) -----------------------------------------

   Les écrans principaux suivent la maquette « Portail PRA/PRI » : un en-tête
   de page (sur-titre, titre, phrase), des indicateurs, puis des cartes à
   en-tête et des tableaux sobres. Rien ici n'est propre à un seul écran : ce
   sont les briques que les six écrans partagent. */

/* En-tête de page : ce qu'on regarde, et en une phrase pourquoi. */
.eps-entete-page {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.eps-entete-page-surtitre {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eps-marine);
}

.eps-entete-page-titre {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--eps-marine);
  margin-top: 6px;
}

.eps-entete-page-detail {
  font-size: 12.5px;
  color: var(--eps-marine);
  margin-top: 6px;
  max-width: 72ch;
}

.eps-entete-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Pastille d'état à droite de l'en-tête du tableau de bord. */
.eps-statut {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
}

.eps-statut::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.eps-statut--ok {
  background: var(--eps-ok-fond);
  color: var(--eps-ok-texte);
}

.eps-statut--avert {
  background: var(--eps-avert-fond);
  color: var(--eps-avert-texte);
}

/* Les indicateurs de tête : autant de colonnes que la largeur en accueille. */
.eps-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* Carte à en-tête : un titre et une précision, puis le contenu. */
.eps-carte--sections {
  padding: 0;
  overflow: hidden;
}

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

.eps-carte-titre {
  font-size: 14px;
  font-weight: 700;
  color: var(--eps-marine);
}

.eps-carte-meta {
  font-size: 11.5px;
  color: var(--eps-sourdine-forte);
}

.eps-carte-corps {
  padding: 18px;
}

/* --- Tableau de bord ------------------------------------------------------ */

.eps-grille-accueil {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 1100px) {
  .eps-grille-accueil {
    grid-template-columns: 1fr;
  }
}

.eps-preparation-titre {
  font-size: 16px;
  font-weight: 700;
  color: var(--eps-marine);
}

.eps-anneau--grand {
  width: 118px;
  height: 118px;
}

.eps-anneau--grand .eps-anneau-centre {
  width: 92px;
  height: 92px;
}

.eps-anneau--grand .eps-anneau-valeur {
  font-size: 26px;
}

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

.eps-lien-detail {
  display: inline-block;
  margin-top: 12px;
}

/* « À faire maintenant » : une ligne par geste, la marque dit sa gravité. */
.eps-actions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eps-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-controle);
}

.eps-action-marque {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--eps-brume);
  color: var(--eps-marine);
}

.eps-action-marque--critique {
  background: var(--eps-erreur-fond);
  color: var(--eps-erreur-texte);
}

.eps-action-marque--important {
  background: var(--eps-avert-fond);
  color: var(--eps-avert-texte);
}

/* Un sinistre ouvert (D-65) : la seule marque pleine, en tête de liste. */
.eps-action-marque--sinistre {
  background: var(--eps-erreur);
  color: #fff;
}

.eps-action-corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eps-action-titre {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--eps-marine);
}

.eps-action-detail {
  font-size: 11px;
  color: var(--eps-sourdine);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Filtres d'une liste --------------------------------------------------- */

.eps-barre-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.eps-barre-filtres-champ {
  flex: 1 1 320px;
  min-width: 0;
}

.eps-liste {
  width: auto;
  flex: none;
  font-weight: 600;
  color: var(--eps-marine);
  cursor: pointer;
}

/* --- Tableaux --------------------------------------------------------------- */

/* Tableau posé dans une carte à en-tête : la carte porte déjà le cadre. */
.eps-tableau--carte {
  border: 0;
  border-radius: 0;
}

.eps-tableau .eps-lien-ligne {
  font-size: 13px;
  font-weight: 700;
  color: var(--eps-marine);
}

.eps-tableau .eps-cellule-detail {
  display: block;
}

/* Le bouton d'une ligne passe AU-DESSUS du lien qui rend la ligne entière
   cliquable (`.eps-lien-ligne::after`) : sans cela, le clic sur « Ouvrir »
   ou « Mettre sous sauvegarde » partirait vers la fiche. */
.eps-cellule-action {
  justify-self: end;
  position: relative;
  z-index: 1;
}

.eps-tableau--reprises {
  --eps-colonnes: 2fr 1.3fr 1fr 0.7fr 1fr;
}

.eps-tableau--plans {
  --eps-colonnes: 2fr 0.6fr 0.7fr 1.4fr 1fr 96px;
}

/* --- Fiche d'un plan -------------------------------------------------------- */

/* Dépliant : la checklist d'un plan conforme tient sur une ligne. */
.eps-depliant {
  background: #fff;
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-carte);
}

.eps-depliant-titre {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}

.eps-depliant-titre::-webkit-details-marker {
  display: none;
}

.eps-depliant-titre::after {
  content: "▾";
  margin-left: auto;
  color: var(--eps-sourdine-forte);
}

.eps-depliant[open] > .eps-depliant-titre {
  border-bottom: 1px solid var(--eps-trait);
}

.eps-depliant[open] > .eps-depliant-titre::after {
  content: "▴";
}

.eps-depliant .eps-checklist {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.eps-liens-plan {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* Séquence chronologique : un rond par étape, relié au suivant par un trait.
   La couleur du rond dit l'état - fait, en cours, en échec, à venir. */
.eps-chrono {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eps-chrono-etape {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  position: relative;
}

.eps-chrono-etape::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: -14px;
  width: 2px;
  background: var(--eps-trait);
}

.eps-chrono-etape:last-child::before {
  display: none;
}

.eps-chrono-numero {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--eps-marine);
  background: #fff;
  color: var(--eps-marine);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  position: relative;
}

.eps-chrono-etape--faite .eps-chrono-numero {
  background: var(--eps-ok);
  border-color: var(--eps-ok);
  color: #fff;
}

.eps-chrono-etape--active .eps-chrono-numero {
  background: var(--eps-safran);
  border-color: var(--eps-safran);
  color: var(--eps-encre);
}

.eps-chrono-etape--echec .eps-chrono-numero {
  background: var(--eps-erreur);
  border-color: var(--eps-erreur);
  color: #fff;
}

.eps-chrono-etape--attente .eps-chrono-numero {
  border-color: rgba(25, 19, 61, 0.25);
  color: var(--eps-sourdine);
}

.eps-chrono-carte {
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-controle);
  padding: 14px 16px;
  min-width: 0;
}

.eps-chrono-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.eps-chrono-nom {
  font-size: 13px;
  font-weight: 700;
  color: var(--eps-marine);
}

.eps-chrono-condition {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--eps-trait);
  font-size: 11.5px;
  color: var(--eps-marine);
}

.eps-puces-vm {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

/* Le nom d'une machine, en étiquette compacte. */
.eps-puce-vm {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--eps-marine);
  background: var(--eps-brume);
  border-radius: 4px;
  padding: 4px 8px;
}

/* Une machine qui n'a rien pour dire qu'elle est saine, dans une étape qui
   attend sa santé. */
.eps-puce-vm--avert {
  background: var(--eps-avert-fond);
  color: var(--eps-avert-texte);
}

.eps-chrono-machines {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.eps-chrono-machine {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--eps-trait);
}

.eps-chrono-machine:first-child {
  border-top: 0;
}

.eps-chrono-action {
  flex: 1;
  font-size: 11.5px;
  color: var(--eps-marine);
}

/* Bandeau d'une reprise : l'étape, les machines, le temps restant, l'état. */
.eps-bandeau-reprise {
  background: var(--eps-marine);
  color: var(--eps-brume);
  border-radius: var(--eps-rayon-carte);
  padding: 20px 24px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: minmax(220px, 2.2fr) repeat(3, minmax(110px, 1fr)) auto;
  gap: 24px;
  align-items: center;
}

@media (max-width: 1100px) {
  .eps-bandeau-reprise {
    grid-template-columns: 1fr 1fr;
  }
}

/* Une étape en échec assombrit le bandeau : resté marine, il continuerait de
   se lire « ça avance ». */
.eps-bandeau-reprise--echec {
  background: var(--eps-encre);
}

.eps-bandeau-reprise-bloc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.eps-bandeau-reprise-libelle {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(237, 237, 255, 0.75);
}

.eps-bandeau-reprise-valeur {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.eps-bandeau-reprise-etat {
  color: var(--eps-safran);
}

.eps-bandeau-reprise-alerte {
  font-size: 11.5px;
  font-weight: 700;
  color: #ffb4ab;
}

.eps-bandeau-reprise .eps-jauge {
  margin-top: 10px;
}

/* Une précision discrète sous un tableau ou un bandeau. */
.eps-note {
  font-size: 11.5px;
  color: var(--eps-sourdine);
  margin-top: 12px;
  max-width: 72ch;
}

/* --- VLAN de session (D-54) ---------------------------------------------- */

/* Une teinte par état, la même partout : compteur, tuile, puce, légende.
   La couleur n'est jamais seule à porter l'état : la tuile dit le client ou
   l'état en clair, la légende et l'infobulle le nomment. */
.eps-etat-vlan--libre {
  background: var(--eps-ok-fond);
  color: var(--eps-ok-texte);
}
.eps-etat-vlan--reserve {
  background: var(--eps-brume);
  color: #3b3570;
}
.eps-etat-vlan--en_preparation {
  background: var(--eps-lavande);
  color: var(--eps-encre);
}
.eps-etat-vlan--actif_test {
  background: var(--eps-marine);
  color: #fff;
}
.eps-etat-vlan--actif_sinistre {
  background: var(--eps-safran);
  color: var(--eps-encre);
}
.eps-etat-vlan--en_nettoyage {
  background: var(--eps-avert-fond);
  color: var(--eps-avert-texte);
}
.eps-etat-vlan--a_controler {
  background: var(--eps-erreur-fond);
  color: var(--eps-erreur-texte);
}
.eps-etat-vlan--hors_service {
  background: rgba(25, 19, 61, 0.06);
  color: rgba(25, 19, 61, 0.62);
}

/* Huit états : deux rangées de quatre, deux colonnes sur un téléphone. Une
   grille libre laissait le dernier compteur seul sur sa ligne. */
.eps-compteurs-vlan {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

@media (max-width: 700px) {
  .eps-compteurs-vlan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Un état sans aucun VLAN s'efface : l'œil va à ce qui existe. */
.eps-compteur--vide {
  opacity: 0.55;
}

.eps-legende-vlan {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 11.5px;
  color: var(--eps-sourdine);
}

.eps-legende-vlan li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.eps-legende-vlan-pastille {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--eps-trait);
}

.eps-grille-vlan {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 6px;
}

.eps-vlan {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 9px;
  border-radius: var(--eps-rayon-bloc);
  border: 1px solid var(--eps-trait);
  text-decoration: none;
}

.eps-vlan:hover,
.eps-vlan:focus-visible {
  text-decoration: none;
  outline: 2px solid var(--eps-marine);
  outline-offset: 1px;
}

.eps-vlan-numero {
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.eps-vlan-detail {
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}

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

.eps-constat-vlan {
  text-align: right;
  white-space: normal;
}

/* --- Demandes d'accès dans la file de validation (D-55) ------------------- */

.eps-demande-acces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--eps-trait-fin);
}

.eps-demande-acces:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* --- Le mode d'une reprise (US-197) ---------------------------------------- */

/* Le mot porte le sens, la couleur le souligne : jamais l'inverse. */
.eps-mode {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.eps-mode--test {
  background: var(--eps-marine);
  color: #fff;
}

.eps-mode--sinistre {
  background: var(--eps-erreur);
  color: #fff;
}

/* Sur le bandeau marine d'une reprise, le test s'inverse pour rester lisible. */
.eps-bandeau-reprise .eps-mode--test {
  background: #fff;
  color: var(--eps-marine);
}

/* --- Mode dégradé (US-199) ------------------------------------------------ */

.eps-bandeau-degrade {
  margin-bottom: 16px;
}

/* US-205 : l'activité d'un client sous son nom, dans la liste. */
.eps-badges-client {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 4px;
}

.eps-badges-client:empty {
  display: none;
}

/* US-191 : les dates de la période, avec leur libellé. */
.eps-filtre-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--eps-sourdine);
}

/* US-125 : les anomalies, sur le suivi et au rapport. */
.eps-tableau--anomalies {
  --eps-colonnes: 0.7fr 2fr 1.6fr 1fr 0.7fr;
}

/* Un champ court et son bouton sur la même ligne, le bouton aligné sur la
   base du champ et non sur son libellé. Passe à la ligne sur un téléphone. */
.eps-formulaire-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.eps-formulaire-ligne .eps-champ {
  flex: 0 1 220px;
}

.eps-formulaire-ligne .eps-btn {
  flex: none;
  /* La hauteur du champ voisin, pour que les deux bords s'alignent. */
  padding-top: 13px;
  padding-bottom: 13px;
}

/* Le groupe de ports de chaque VLAN, un champ par ligne, en colonnes. */
.eps-groupes-vlan {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 8px 16px;
}

.eps-groupe-vlan {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.eps-groupe-vlan-numero {
  flex: none;
  width: 44px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.eps-groupe-vlan .eps-saisie {
  flex: 1;
  min-width: 0;
  padding: 8px 11px;
  font-family: var(--eps-police-mono);
  font-size: 12.5px;
}

/* --- Le sinistre réel (D-65) ---------------------------------------------- */

/* Plan, déclaré le, nature, déclaré par, validé par, phase. */
.eps-tableau--sinistres {
  --eps-colonnes: 1.6fr 1.1fr 1fr 1fr 1fr 1.4fr;
}

/* L'avertissement qui ouvre une déclaration ou une validation : il se lit
   avant le formulaire, et le mot « SINISTRE » y est en tête. */
.eps-encart-sinistre {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.eps-encart-sinistre .eps-mode {
  flex: none;
  margin-top: 1px;
}

/* En tête de l'accueil, au-dessus des indicateurs. */
.eps-encarts-sinistre {
  margin-bottom: 16px;
}

/* La case qui confirme qu'on déclare un sinistre réel : toute la ligne est
   cliquable, comme une machine du périmètre. */
.eps-confirmation {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.eps-confirmation input[type="checkbox"] {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 1px;
}

/* Le journal d'une machine qui attend que son nom restauré se libère : il se
   lit pendant l'attente, aux couleurs d'un avertissement, pas d'une erreur. */
.eps-trace--attente {
  background: var(--eps-avert-fond);
  color: var(--eps-avert-texte);
}

/* --- Les ordres d'un sinistre (US-150, US-151, US-152, US-220) ----------- */

/* Machine, dernière capture, ordres en cours, gestes. Sur un téléphone, la
   grille passe sur une colonne (`.eps-tableau`, epsight.css). */
.eps-tableau--machines-sinistre {
  --eps-colonnes: 1.3fr 1fr 1.3fr 2.2fr;
}

/* Demandé le, ordre, demandé par, statut, résultat. */
.eps-tableau--ordres {
  --eps-colonnes: 0.9fr 1.3fr 1fr 1fr 1.8fr;
}

/* Les gestes d'une machine passent à la ligne plutôt que de déborder. */
.eps-gestes-machine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.eps-gestes-machine form {
  margin: 0;
}

/* Le choix des machines à ajouter, en deux groupes : du plan, puis hors du plan. */
.eps-groupe-ajout + .eps-groupe-ajout {
  margin-top: 22px;
}

/* --- La consommation des sessions (US-207) --------------------------------- */

/* Client, session, début et fin, heures, machines, vCPU, RAM, stockage. */
.eps-tableau--consommation {
  --eps-colonnes: 1.3fr 1.5fr 1.3fr 0.6fr 0.6fr 0.7fr 0.8fr 0.9fr;
}

/* --- La vie et le rapport d'un sinistre (US-153, US-155, US-158) ---------- */

/* Geste, par, le, second facteur. */
.eps-tableau--decisions {
  --eps-colonnes: 1.8fr 1.1fr 0.9fr 1.4fr;
}

/* Machine, étape, restauration, point restauré, source, RPO. */
.eps-tableau--points {
  --eps-colonnes: 1.3fr 1fr 0.9fr 1fr 1fr 0.7fr;
}

/* Machine, prise le, empreinte. */
.eps-tableau--captures {
  --eps-colonnes: 1.4fr 1fr 1.6fr;
}

/* --- Le rapport d'un test, opposable (US-129, US-087, US-106) -------------- */

/* Objectif, cible, mesuré, verdict, constat. */
.eps-tableau--objectifs {
  --eps-colonnes: 0.5fr 0.8fr 0.8fr 0.9fr 2.6fr;
}

/* Machine, ring, résultat, restauration, point restauré, RPO. */
.eps-tableau--bilan {
  --eps-colonnes: 1.4fr 1fr 0.9fr 0.9fr 1.1fr 0.8fr;
}

/* Machine, restauration alors, cette fois, écart. */
.eps-tableau--comparaison {
  --eps-colonnes: 1.4fr 1fr 1fr 1.2fr;
}

/* Une empreinte SHA-256 tient en 64 caractères sans espace : elle passe à la
   ligne n'importe où plutôt que de faire défiler la page d'un téléphone. */
.eps-empreinte {
  font-family: var(--eps-police-mono);
  font-weight: 500;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* Le détail d'une vérification réussie : la trace, sans la couleur d'une erreur. */
.eps-trace--neutre {
  background: var(--eps-brume);
  color: var(--eps-marine);
}