/* ---------------------------------------------------------------------------
   Système de design Epsight Recovery.

   Relevé sur la maquette « Epsight Recovery.dc.html » (Claude Design) : c'est
   elle qui fait autorité sur les couleurs, les rayons, les graisses et les
   espacements. Les valeurs sont reprises telles quelles, pas approchées.

   Ce fichier a remplacé Pico.css. La maquette style chaque élément
   explicitement ; garder Pico dessous obligeait à défaire ses règles sur
   `button`, `input`, `table` et `article` à chaque composant. Il n'y a donc
   plus de framework CSS dans le portail : ce fichier est le socle complet
   (remise à zéro comprise), `ecrans.css` ne porte que les mises en page
   propres à un écran.

   Les polices sont vendorisées dans `static/fonts` - la maquette les chargeait
   depuis Google Fonts, ce que le portail ne peut pas faire : il doit s'afficher
   sur un réseau coupé de l'Internet, exactement le jour où il sert.

   Un seul thème, clair. La maquette assume un parti pris unique ; un thème
   sombre inventé ici ne serait plus la charte de personne.
--------------------------------------------------------------------------- */

/* --- Polices ------------------------------------------------------------ */

/* Montserrat est distribuée en fonte variable : un seul fichier couvre 100 à
   900, d'où l'absence de déclaration par graisse. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/montserrat-variable.311d352d9323.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat/montserrat-variable-ext.d16dfe26bcd7.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-400.79936b18df9f.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-500.b1c8a895f5fd.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Jetons ------------------------------------------------------------- */

:root {
  --eps-marine: #00005f;
  --eps-marine-survol: #000047;
  --eps-encre: #19133d;
  --eps-safran: #ffac13;
  --eps-safran-survol: #f0a00a;
  --eps-neige: #f9f9f9;
  --eps-lavande: #cecce4;
  --eps-brume: #ededff;

  /* Sémantique. Chaque état a une teinte pleine (pastilles, jauges, textes
     forts) et un couple fond/texte pour les puces - la maquette ne réutilise
     jamais la teinte pleine en fond de puce, le contraste ne passerait pas. */
  --eps-ok: #1b7f5a;
  --eps-ok-fond: #e4f3ec;
  --eps-ok-texte: #146149;
  --eps-erreur: #b3261e;
  --eps-erreur-fond: #fbe9e7;
  --eps-erreur-texte: #96201a;
  --eps-avert: #b26a00;
  --eps-avert-fond: #fff2dc;
  --eps-avert-texte: #8a5200;

  --eps-sourdine: rgba(25, 19, 61, 0.55);
  --eps-sourdine-forte: rgba(25, 19, 61, 0.45);
  --eps-trait: rgba(25, 19, 61, 0.1);
  --eps-trait-fin: rgba(25, 19, 61, 0.06);
  --eps-bordure-champ: rgba(25, 19, 61, 0.16);

  --eps-rayon-carte: 6px;
  --eps-rayon-controle: 6px;
  --eps-rayon-champ: 6px;
  --eps-rayon-bloc: 6px;

  --eps-police: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --eps-police-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --eps-largeur-cote: 228px;
  --eps-hauteur-barre: 66px;

  color-scheme: light;
}

/* --- Remise à zéro ------------------------------------------------------ */

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--eps-neige);
}

body {
  font-family: var(--eps-police);
  font-size: 14px;
  line-height: 1.5;
  color: var(--eps-encre);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--eps-marine);
  text-decoration: none;
}

a:hover {
  color: var(--eps-safran);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(25, 19, 61, 0.18);
  border-radius: 8px;
  border: 3px solid var(--eps-neige);
}

/* Le focus clavier doit rester visible : la maquette pose `outline:none` sur
   les champs, ce qui est acceptable pour une image mais pas pour un portail
   qu'on pilote au clavier en situation de crise. */
:focus-visible {
  outline: 2px solid var(--eps-marine);
  outline-offset: 2px;
}

/* --- Animations --------------------------------------------------------- */

@keyframes eps-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@keyframes eps-rotation {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Typographie -------------------------------------------------------- */

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

.eps-titre-section {
  font-size: 18px;
  font-weight: 600;
}

.eps-titre-carte {
  font-size: 15px;
  font-weight: 600;
}

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

/* Intertitre en capitales espacées : la maquette s'en sert pour les en-têtes
   de tableau, les libellés de KPI et les sections de la barre latérale. */
.eps-surtitre {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eps-sourdine-forte);
}

.eps-sourdine {
  color: var(--eps-sourdine);
  font-size: 12.5px;
}

.eps-mono {
  font-family: var(--eps-police-mono);
}

/* Les durées, compteurs et pourcentages s'alignent en colonne : sans chiffres
   tabulaires, un tableau qui se rafraîchit toutes les 3 s tremble. */
.eps-chiffres {
  font-variant-numeric: tabular-nums;
}

/* Lu par un lecteur d'écran, invisible à l'œil : l'en-tête d'une colonne de
   boutons, par exemple. Le masquer avec `display: none` le retirerait aussi
   de ce qu'on entend. */
.eps-visuellement-masque {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Coquille applicative -----------------------------------------------

   Version simplifiée (D-37) : une barre latérale marine qui ne porte que la
   marque, l'organisation et la navigation ; une barre supérieure qui ne porte
   que le fil d'Ariane et l'action principale. */

.eps-app {
  display: flex;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--eps-neige);
}

.eps-cote {
  width: var(--eps-largeur-cote);
  flex: none;
  background: var(--eps-marine);
  color: var(--eps-brume);
  display: flex;
  flex-direction: column;
  padding: 26px 14px 18px;
  overflow-y: auto;
}

.eps-marque {
  display: block;
  padding: 0 10px 26px;
  color: #fff;
}

.eps-marque:hover {
  color: #fff;
}

/* Le logotype, en lettres : des minuscules grasses, comme la marque. */
.eps-marque-nom {
  display: block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Le nom de la plateforme, sous le logotype. Discret : c'est le produit, pas
   la marque - et il change plus souvent qu'elle. */
.eps-marque-plateforme {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eps-safran);
  margin-top: 7px;
}

.eps-organisation {
  display: block;
  background: rgba(237, 237, 255, 0.08);
  border-radius: var(--eps-rayon-bloc);
  padding: 11px 12px;
  color: #fff;
}

.eps-organisation:hover,
.eps-organisation[aria-current="page"] {
  background: rgba(237, 237, 255, 0.14);
  color: #fff;
}

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

.eps-organisation-nom {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pour un agent Epsight, le bloc devient un menu : il choisit le client dont il
   regarde la vue (D-39). C'est un `details` de boutons, pas un `select` : la
   liste ouverte d'un `select` est dessinée par le navigateur, qui impose son
   surlignage, alors que celle-ci prend les couleurs du portail et reste la même
   partout. */
.eps-organisation--choix {
  position: relative;
}

.eps-menu {
  display: block;
}

.eps-menu-titre {
  position: relative;
  display: block;
  padding-right: 22px;
  cursor: pointer;
  list-style: none;
}

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

/* La flèche : un triangle fait de bordures, qui se retourne quand le menu est
   ouvert. */
.eps-menu-titre::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 8px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.15s ease;
}

.eps-menu[open] > .eps-menu-titre::after {
  transform: rotate(180deg);
}

/* L'anneau de focus ne s'affiche qu'au clavier : un clic de souris n'a pas à
   encadrer le bloc. */
.eps-menu-titre:focus-visible {
  outline: 2px solid var(--eps-safran);
  outline-offset: 4px;
  border-radius: 4px;
}

.eps-menu-liste {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(60vh, 360px);
  overflow-y: auto;
  padding: 6px;
  background: #fff;
  border-radius: var(--eps-rayon-bloc);
  box-shadow:
    0 14px 34px rgba(0, 0, 40, 0.38),
    0 0 0 1px rgba(25, 19, 61, 0.08);
  animation: eps-menu-ouvre 0.14s ease-out;
}

@keyframes eps-menu-ouvre {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.eps-menu-choix {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 4px;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--eps-encre);
  cursor: pointer;
}

.eps-menu-choix:hover,
.eps-menu-choix:focus-visible {
  background: var(--eps-brume);
  color: var(--eps-marine);
  outline: none;
}

/* Le choix courant : plus marqué, avec un point safran à droite. */
.eps-menu-choix--actif {
  font-weight: 700;
  color: var(--eps-marine);
}

.eps-menu-choix--actif::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--eps-safran);
}

.eps-menu-separateur {
  height: 1px;
  margin: 6px 4px;
  background: var(--eps-trait);
}

.eps-organisation-fiche {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(237, 237, 255, 0.75);
  text-decoration: underline;
}

.eps-organisation-fiche:hover {
  color: #fff;
}

.eps-cote-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eps-cote-section {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237, 237, 255, 0.55);
  padding: 26px 10px 10px;
}

.eps-cote-lien {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--eps-rayon-controle);
  font-size: 13px;
  font-weight: 500;
  color: rgba(237, 237, 255, 0.86);
}

.eps-cote-lien:hover {
  background: rgba(237, 237, 255, 0.08);
  color: #fff;
}

.eps-cote-lien[aria-current="page"] {
  background: rgba(237, 237, 255, 0.12);
  color: #fff;
  font-weight: 600;
}

/* Icônes de la coquille (`portail/_icone.html`) : le trait suit le texte. */
.eps-icone {
  width: 17px;
  height: 17px;
  flex: none;
}

.eps-cote-pousse {
  flex: 1;
}

.eps-cote-pied {
  border-top: 1px solid rgba(237, 237, 255, 0.12);
  margin-top: 14px;
  padding: 14px 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.eps-cote-utilisateur {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eps-cote-deconnexion {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  color: rgba(237, 237, 255, 0.7);
  cursor: pointer;
}

.eps-cote-deconnexion:hover {
  color: #fff;
  text-decoration: underline;
}

.eps-principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.eps-barre {
  height: var(--eps-hauteur-barre);
  flex: none;
  background: #fff;
  border-bottom: 1px solid var(--eps-trait);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 32px;
}

/* Le fil d'Ariane : l'organisation, puis l'écran. Il doit pouvoir rétrécir :
   sans `min-width: 0`, un titre long pousse les boutons hors de la barre. */
.eps-fil {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--eps-marine);
}

.eps-fil-separateur {
  color: var(--eps-sourdine-forte);
}

.eps-fil-courant {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eps-vue {
  flex: 1;
  overflow: auto;
  padding: 30px 32px 60px;
}

/* --- Champs de recherche des écrans -------------------------------------

   `.eps-recherche` est déclaré avec les formulaires ; ces trois règles le
   complètent. Elles vivaient avec la recherche de la barre supérieure, partie
   avec elle (D-37) - les champs des écrans, eux, restent. */

.eps-recherche:focus-within {
  border-color: var(--eps-marine);
  background: #fff;
}

.eps-recherche input::placeholder {
  color: var(--eps-sourdine-forte);
}

/* Chrome et Safari posent leur propre croix d'effacement, à leur taille et
   dans leur gris. Le champ en a déjà une : la touche Échap. */
.eps-recherche input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

/* --- Cartes et panneaux ------------------------------------------------- */

.eps-carte {
  background: #fff;
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-carte);
  padding: 20px;
}

.eps-carte--large {
  padding: 22px 24px;
}

.eps-carte--serree {
  padding: 16px 18px;
}

/* Carte sans bordure sur fond lavande clair : la maquette la réserve aux
   panneaux d'appoint (récapitulatif, sélection, journal d'audit). */
.eps-panneau {
  background: var(--eps-brume);
  border-radius: var(--eps-rayon-carte);
  padding: 22px 24px;
}

.eps-panneau--marine {
  background: var(--eps-marine);
  color: var(--eps-brume);
  border-radius: var(--eps-rayon-carte);
  padding: 22px 24px;
}

.eps-panneau--nuit {
  background: var(--eps-encre);
  color: var(--eps-brume);
  border-radius: var(--eps-rayon-carte);
  padding: 20px 22px;
}

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

/* --- Boutons ------------------------------------------------------------ */

.eps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-weight: 600;
  font-size: 12.5px;
  padding: 9px 14px;
  border-radius: var(--eps-rayon-controle);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
}

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

.eps-btn--marine:hover {
  background: var(--eps-marine-survol);
  color: #fff;
}

/* Le safran est réservé à l'action qui déclenche ou reprend une restauration.
   L'étendre aux boutons ordinaires ferait disparaître le seul repère visuel
   qui distingue « j'enregistre » de « je restaure ». */
.eps-btn--or {
  background: var(--eps-safran);
  color: var(--eps-encre);
  font-weight: 700;
}

.eps-btn--or:hover {
  background: var(--eps-safran-survol);
  color: var(--eps-encre);
}

.eps-btn--fantome {
  border-color: var(--eps-bordure-champ);
  background: #fff;
  color: var(--eps-encre);
}

.eps-btn--fantome:hover {
  border-color: var(--eps-marine);
  color: var(--eps-encre);
}

.eps-btn--tirets {
  border: 1px dashed rgba(0, 0, 95, 0.35);
  color: var(--eps-marine);
}

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

/* Sur fond marine ou nuit, la variante claire du bouton fantôme. */
.eps-btn--clair {
  border-color: rgba(237, 237, 255, 0.35);
  color: var(--eps-brume);
}

.eps-btn--clair:hover {
  border-color: var(--eps-brume);
  color: #fff;
}

.eps-btn--grand {
  font-size: 13.5px;
  padding: 12px 20px;
}

.eps-btn--bloc {
  width: 100%;
  padding: 14px;
  font-size: 14.5px;
}

.eps-btn[disabled],
.eps-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Lien d'action discret : « Tout voir », « Historique complet », « Masquer ». */
.eps-lien-action {
  font-size: 12px;
  font-weight: 600;
  color: var(--eps-marine);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.eps-lien-action:hover {
  color: var(--eps-marine-survol);
  text-decoration: underline;
}

/* --- Puces d'état ------------------------------------------------------- */

.eps-puce {
  background: var(--eps-brume);
  color: #3b3570;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-block;
  white-space: nowrap;
}

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

.eps-puce--erreur {
  background: var(--eps-erreur-fond);
  color: var(--eps-erreur-texte);
}

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

/* Plein marine : réservé à « en cours ». C'est le seul état qui bouge, il doit
   se repérer d'un coup d'œil dans une liste. */
.eps-puce--actif {
  background: var(--eps-marine);
  color: #fff;
}

.eps-puce--sourdine {
  background: rgba(25, 19, 61, 0.06);
  color: rgba(25, 19, 61, 0.62);
}

/* --- Pastilles ---------------------------------------------------------- */

.eps-pastille {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--eps-lavande);
  flex: none;
}

.eps-pastille--ok {
  background: var(--eps-ok);
}
.eps-pastille--erreur {
  background: var(--eps-erreur);
}
.eps-pastille--avert {
  background: var(--eps-safran);
}
.eps-pastille--actif {
  background: var(--eps-marine);
}
.eps-pastille--pulse {
  animation: eps-pulse 1.6s infinite;
}

/* --- Formulaires -------------------------------------------------------- */

.eps-champ {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.eps-champ-libelle {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.eps-champ-aide {
  font-size: 11.5px;
  color: var(--eps-sourdine);
}

.eps-champ-erreur {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--eps-erreur-texte);
}

.eps-saisie,
.eps-champ input[type="text"],
.eps-champ input[type="email"],
.eps-champ input[type="password"],
.eps-champ input[type="number"],
.eps-champ input[type="date"],
.eps-champ input[type="datetime-local"],
.eps-champ select,
.eps-champ textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  border-radius: var(--eps-rayon-champ);
  border: 1px solid var(--eps-bordure-champ);
  background: #fff;
  color: var(--eps-encre);
  width: 100%;
}

.eps-champ textarea {
  resize: vertical;
  min-height: 84px;
}

.eps-saisie:focus,
.eps-champ input:focus,
.eps-champ select:focus,
.eps-champ textarea:focus {
  border-color: var(--eps-marine);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 95, 0.12);
}

.eps-champ input[aria-invalid="true"],
.eps-champ textarea[aria-invalid="true"],
.eps-champ select[aria-invalid="true"] {
  border-color: var(--eps-erreur);
}

/* Liste déroulante. La flèche native se colle au bord du champ, et le
   navigateur n'en laisse pas régler le retrait : on la remplace par un petit
   triangle dessiné en dégradés. Rien à charger, donc rien à autoriser dans la
   CSP - et il suit la couleur du texte (`currentColor`), grisé avec lui quand
   la liste est désactivée.

   Géométrie : deux boîtes de 5 px côte à côte, dont chacune ne colore que sa
   moitié haute, vers le centre. Leur réunion est un triangle de 10 px de
   large, pointe en bas, centré à 20 px du bord droit. Le retrait à droite du
   texte doit rester au-dessus de 25 px, sans quoi un libellé long passe sous
   la flèche.

   Ce sont les trois gabarits de champ du portail. Une feuille chargée après
   celle-ci qui écrirait `background` ou `padding` en raccourci sur l'un
   d'eux effacerait la flèche sans rien signaler : `test_interface.py` le
   refuse. */
select.eps-saisie,
.eps-champ select,
.eps-reglage-controle select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 1px),
    calc(100% - 15px) calc(50% + 1px);
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--eps-marine);
}

/* Champ de recherche décoratif de la barre supérieure et des filtres. */
.eps-recherche {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--eps-neige);
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-controle);
  padding: 9px 13px;
  color: var(--eps-sourdine-forte);
  font-size: 13px;
}

.eps-recherche input {
  border: 0;
  background: none;
  outline: none;
  font-size: 13px;
  width: 100%;
  color: var(--eps-encre);
}

.eps-recherche--carte {
  background: #fff;
  border-color: rgba(25, 19, 61, 0.12);
}

/* Interrupteur. Un `input` réel dessous : le lecteur d'écran et le clavier
   doivent le voir comme une case, pas comme un carré coloré. */
.eps-bascule {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.eps-bascule input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 25px;
  margin: 0;
  cursor: pointer;
}

.eps-bascule-piste {
  width: 44px;
  height: 25px;
  border-radius: 999px;
  background: rgba(25, 19, 61, 0.2);
  padding: 3px;
  display: flex;
  justify-content: flex-start;
  transition: background 0.18s, justify-content 0.18s;
  pointer-events: none;
}

.eps-bascule input:checked + .eps-bascule-piste {
  background: var(--eps-marine);
  justify-content: flex-end;
}

.eps-bascule input:focus-visible + .eps-bascule-piste {
  outline: 2px solid var(--eps-marine);
  outline-offset: 2px;
}

.eps-bascule-bouton {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
}

/* Groupe de choix courts (délais, nombre de tentatives, filtres). */
.eps-choix {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 11px;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  color: rgba(25, 19, 61, 0.65);
  border: 1px solid rgba(25, 19, 61, 0.14);
}

.eps-choix--actif {
  background: var(--eps-marine);
  color: #fff;
  border-color: var(--eps-marine);
}

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

.eps-filtre--actif {
  background: var(--eps-marine);
  color: #fff;
  border-color: var(--eps-marine);
}

/* Étiquette de catégorie (tags, permissions). */
.eps-etiquette {
  background: var(--eps-brume);
  color: var(--eps-marine);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  display: inline-block;
}

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

/* Les tableaux de la maquette sont des grilles, pas des `<table>` : chaque
   ligne est cliquable en entier et les colonnes sont proportionnelles. On
   garde la sémantique `table` et on la remet en grille - un tableau de
   machines reste un tableau pour un lecteur d'écran.
   `--eps-colonnes` porte le gabarit, posé par l'écran. */
.eps-tableau {
  background: #fff;
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-carte);
  overflow: hidden;
  display: block;
}

.eps-tableau thead,
.eps-tableau tbody,
.eps-tableau tfoot {
  display: block;
}

.eps-tableau tr {
  display: grid;
  grid-template-columns: var(--eps-colonnes, 1fr);
  gap: 16px;
  align-items: center;
}

.eps-tableau thead tr {
  padding: 15px 22px;
  background: #f8f8fc;
  border-bottom: 1px solid var(--eps-trait);
}

.eps-tableau th {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eps-marine);
  text-align: left;
  padding: 0;
}

.eps-tableau tbody tr {
  padding: 18px 22px;
  border-bottom: 1px solid var(--eps-trait);
}

.eps-tableau tbody tr:last-child {
  border-bottom: 0;
}

.eps-tableau tbody tr:hover {
  background: var(--eps-neige);
}

.eps-tableau td {
  font-size: 12.5px;
  color: var(--eps-marine);
  padding: 0;
  min-width: 0;
}

/* Tableau posé DANS une carte : il ne porte plus ni cadre ni fond, la carte
   les porte déjà. */
.eps-tableau--nu {
  border: 0;
  border-radius: 0;
  background: none;
  margin-top: 14px;
}

.eps-tableau--nu thead tr,
.eps-tableau--nu tbody tr {
  padding-left: 0;
  padding-right: 0;
}

.eps-tableau--nu thead tr {
  background: none;
}

.eps-tableau--nu tbody tr:hover {
  background: none;
}

.eps-tableau-pied {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--eps-sourdine);
}

/* Cellule d'identité : pastille + nom + sous-titre technique. */
.eps-cellule-nom {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

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

.eps-cellule-detail {
  font-size: 11px;
  color: rgba(25, 19, 61, 0.5);
  margin-top: 2px;
}

/* Toute la ligne est cliquable ; le lien couvre la cellule de nom et déborde
   sur la ligne entière, sans imbriquer de lien dans un lien. */
.eps-lien-ligne::after {
  content: "";
  position: absolute;
  inset: 0;
}

.eps-tableau tbody tr {
  position: relative;
}

/* --- Séquence de reprise ------------------------------------------------ */

/* La colonne de gauche porte le numéro d'étape, le trait vertical et la pilule
   d'attente ; la carte d'étape occupe la colonne de droite. */
.eps-sequence-etape {
  display: grid;
  grid-template-columns: 64px 1fr;
}

.eps-sequence-etape--serree {
  grid-template-columns: 56px 1fr;
}

.eps-sequence-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2px;
}

.eps-sequence-numero {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex: none;
  background: var(--eps-marine);
  color: #fff;
}

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

.eps-sequence-numero--actif {
  background: var(--eps-marine);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 172, 19, 0.28);
}

.eps-sequence-numero--attente {
  background: var(--eps-brume);
  color: rgba(25, 19, 61, 0.5);
}

.eps-sequence-numero--echec {
  background: var(--eps-erreur-fond);
  color: var(--eps-erreur-texte);
}

.eps-sequence-trait {
  width: 2px;
  flex: 1;
  min-height: 18px;
  background: rgba(25, 19, 61, 0.12);
}

/* Pilule « on attend ici » intercalée dans le trait. */
.eps-sequence-attente {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--eps-avert-fond);
  color: var(--eps-avert-texte);
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 7px;
  white-space: nowrap;
}

.eps-sequence-carte {
  border-radius: 13px;
  padding: 16px 18px;
  margin-left: 6px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--eps-trait);
}

.eps-sequence-carte--actif {
  border-color: var(--eps-marine);
  box-shadow: 0 6px 22px rgba(0, 0, 95, 0.13);
}

.eps-sequence-carte--echec {
  border-color: rgba(179, 38, 30, 0.4);
  background: #fffbfa;
}

.eps-sequence-carte--attente {
  background: var(--eps-neige);
  border-color: rgba(25, 19, 61, 0.08);
}

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

.eps-sequence-nom {
  font-size: 15.5px;
  font-weight: 600;
}

.eps-sequence-conditions {
  display: flex;
  gap: 16px;
  margin-top: 9px;
  font-size: 12px;
  color: rgba(25, 19, 61, 0.6);
  flex-wrap: wrap;
}

/* Vignette de machine dans une étape. */
.eps-machine {
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-champ);
  padding: 11px 13px;
  background: var(--eps-neige);
  display: flex;
  align-items: center;
  gap: 10px;
}

.eps-machine--echec {
  background: var(--eps-erreur-fond);
  border-color: rgba(179, 38, 30, 0.25);
}

.eps-machine-nom {
  font-size: 13px;
  font-weight: 600;
}

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

/* --- Jauges ------------------------------------------------------------- */

.eps-jauge {
  height: 7px;
  border-radius: 999px;
  background: rgba(25, 19, 61, 0.12);
  overflow: hidden;
}

.eps-jauge--claire {
  background: rgba(237, 237, 255, 0.16);
}

.eps-jauge--fine {
  height: 6px;
  width: 110px;
  flex: none;
}

.eps-jauge-remplissage {
  height: 100%;
  border-radius: 999px;
  background: var(--eps-safran);
  /* `--eps-part` est posé en ligne par le gabarit : c'est une donnée. */
  width: var(--eps-part, 0%);
  transition: width 0.4s ease;
}

.eps-jauge-remplissage--ok {
  background: #7bd3ac;
}

.eps-jauge-remplissage--erreur {
  background: var(--eps-erreur);
}

/* Anneau de disponibilité. Le pourcentage est passé en `--eps-part`. */
.eps-anneau {
  width: 104px;
  height: 104px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(
    var(--eps-marine) 0 var(--eps-part, 0%),
    var(--eps-lavande) var(--eps-part, 0%) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

.eps-anneau-centre {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.eps-anneau-valeur {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--eps-marine);
}

.eps-anneau-libelle {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eps-sourdine-forte);
}

/* Grille de proportions.

   `--eps-part` ne peut PAS être posé en ligne : la CSP du portail est
   `style-src 'self'` sans `'unsafe-inline'` (voir `config/settings.py`), et un
   attribut `style` serait silencieusement ignoré - l'anneau tomberait à 0 %
   sans que rien ne le signale. Le serveur arrondit donc au pas de 5 %
   (`portail/templatetags/proportions.py`) et le gabarit pose une classe.

   Le pas et ces règles doivent rester d'accord : changer `PAS` impose de
   régénérer ce bloc. */
.eps-part--0 {
  --eps-part: 0%;
}
.eps-part--5 {
  --eps-part: 5%;
}
.eps-part--10 {
  --eps-part: 10%;
}
.eps-part--15 {
  --eps-part: 15%;
}
.eps-part--20 {
  --eps-part: 20%;
}
.eps-part--25 {
  --eps-part: 25%;
}
.eps-part--30 {
  --eps-part: 30%;
}
.eps-part--35 {
  --eps-part: 35%;
}
.eps-part--40 {
  --eps-part: 40%;
}
.eps-part--45 {
  --eps-part: 45%;
}
.eps-part--50 {
  --eps-part: 50%;
}
.eps-part--55 {
  --eps-part: 55%;
}
.eps-part--60 {
  --eps-part: 60%;
}
.eps-part--65 {
  --eps-part: 65%;
}
.eps-part--70 {
  --eps-part: 70%;
}
.eps-part--75 {
  --eps-part: 75%;
}
.eps-part--80 {
  --eps-part: 80%;
}
.eps-part--85 {
  --eps-part: 85%;
}
.eps-part--90 {
  --eps-part: 90%;
}
.eps-part--95 {
  --eps-part: 95%;
}
.eps-part--100 {
  --eps-part: 100%;
}

/* --- Indicateurs -------------------------------------------------------- */

.eps-kpi {
  background: #fff;
  border: 1px solid var(--eps-trait);
  border-radius: var(--eps-rayon-carte);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.eps-kpi-valeur {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 10px 0 6px;
  color: var(--eps-marine);
}

.eps-kpi-detail {
  font-size: 11.5px;
  color: var(--eps-sourdine);
}

/* Le libellé d'un indicateur, et la couleur de la phrase qui le commente :
   verte quand il n'y a rien à faire, ambre quand il faut regarder, bleue
   quand elle informe seulement. */
.eps-kpi-libelle {
  font-size: 12.5px;
  color: var(--eps-marine);
}

.eps-kpi-detail--ok {
  color: var(--eps-ok-texte);
}

.eps-kpi-detail--avert {
  color: var(--eps-avert-texte);
}

.eps-kpi-detail--info {
  color: #2f4fc0;
}

/* Compteur coloré (12 prêts / 1 en cours / 1 à surveiller / 0 en échec). */
.eps-compteur {
  border-radius: var(--eps-rayon-bloc);
  padding: 13px 14px;
  background: var(--eps-neige);
  color: rgba(25, 19, 61, 0.5);
}

.eps-compteur--ok {
  background: var(--eps-ok-fond);
  color: var(--eps-ok-texte);
}
.eps-compteur--actif {
  background: var(--eps-marine);
  color: #fff;
}
.eps-compteur--avert {
  background: var(--eps-avert-fond);
  color: var(--eps-avert-texte);
}
.eps-compteur--erreur {
  background: var(--eps-erreur-fond);
  color: var(--eps-erreur-texte);
}

.eps-compteur-valeur {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.eps-compteur-libelle {
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 2px;
}

/* Paire clé / valeur, utilisée par les fiches et les récapitulatifs. */
.eps-paire {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--eps-trait-fin);
  font-size: 12.5px;
}

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

.eps-paire-cle {
  color: var(--eps-sourdine);
}

.eps-paire-valeur {
  font-weight: 600;
  text-align: right;
}

/* --- Points de restauration --------------------------------------------- */

.eps-point {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--eps-rayon-bloc);
  cursor: pointer;
  border: 1px solid var(--eps-trait);
  background: #fff;
  position: relative;
}

.eps-point--choisi {
  border-color: var(--eps-marine);
  background: var(--eps-brume);
}

.eps-point input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.eps-point-marque {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: none;
  border: 2px solid rgba(25, 19, 61, 0.25);
  background: #fff;
}

.eps-point--choisi .eps-point-marque {
  border-color: var(--eps-marine);
  background: radial-gradient(var(--eps-marine) 0 42%, #fff 44%);
}

.eps-point-libelle {
  font-size: 13.5px;
  font-weight: 600;
}

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

/* --- Journaux ----------------------------------------------------------- */

.eps-journal {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 520px;
  overflow: auto;
}

.eps-journal-ligne {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  font-family: var(--eps-police-mono);
  font-size: 11.5px;
  line-height: 1.5;
}

.eps-journal-heure {
  color: var(--eps-sourdine-forte);
}

.eps-journal-texte {
  color: rgba(25, 19, 61, 0.75);
  white-space: pre-wrap;
  word-break: break-word;
}

.eps-journal-texte--ok {
  color: var(--eps-ok-texte);
  font-weight: 500;
}
.eps-journal-texte--avert {
  color: var(--eps-avert-texte);
  font-weight: 500;
}
.eps-journal-texte--erreur {
  color: var(--eps-erreur-texte);
  font-weight: 500;
}

/* Sur fond nuit, le contraste s'inverse. */
.eps-panneau--nuit .eps-journal-heure {
  color: rgba(237, 237, 255, 0.4);
}
.eps-panneau--nuit .eps-journal-texte {
  color: rgba(237, 237, 255, 0.82);
}
.eps-panneau--nuit .eps-journal-texte--ok {
  color: #7bd3ac;
}
.eps-panneau--nuit .eps-journal-texte--avert {
  color: var(--eps-safran);
}
.eps-panneau--nuit .eps-journal-texte--erreur {
  color: #ff8c82;
}

/* Trace d'erreur brute, sous une machine en échec. */
.eps-trace {
  font-family: var(--eps-police-mono);
  font-size: 11.5px;
  line-height: 1.5;
  background: var(--eps-erreur-fond);
  color: var(--eps-erreur-texte);
  border-radius: var(--eps-rayon-champ);
  padding: 10px 12px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* --- Fenêtre modale ----------------------------------------------------- */

.eps-voile {
  position: fixed;
  inset: 0;
  background: rgba(25, 19, 61, 0.42);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  z-index: 50;
}

.eps-modale {
  background: #fff;
  border-radius: 16px;
  padding: 26px 28px;
  width: 480px;
  max-width: 100%;
  max-height: 86vh;
  overflow: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 95, 0.28);
}

.eps-modale--large {
  width: 560px;
}

.eps-modale-fermer {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--eps-neige);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--eps-sourdine);
  border: 0;
  flex: none;
}

.eps-modale-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
}

/* --- Encarts ------------------------------------------------------------ */

.eps-encart {
  border-radius: var(--eps-rayon-bloc);
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.55;
  background: var(--eps-brume);
  color: rgba(25, 19, 61, 0.7);
}

.eps-encart--avert {
  background: var(--eps-avert-fond);
  color: #6e4200;
}

.eps-encart--erreur {
  background: var(--eps-erreur-fond);
  color: var(--eps-erreur-texte);
}

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

/* Grande vignette carrée d'en-tête de fiche (VM, incident, réussite). */
.eps-vignette {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: var(--eps-brume);
  color: var(--eps-marine);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  flex: none;
}

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

.eps-vignette--erreur {
  background: var(--eps-erreur-fond);
  color: var(--eps-erreur-texte);
}

/* --- Messages Django ---------------------------------------------------- */

.eps-message {
  border-radius: var(--eps-rayon-bloc);
  padding: 13px 16px;
  font-size: 13px;
  margin-bottom: 14px;
  background: var(--eps-brume);
  color: rgba(25, 19, 61, 0.75);
}

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

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

.eps-message--error {
  background: var(--eps-erreur-fond);
  color: var(--eps-erreur-texte);
}

/* --- Utilitaires -------------------------------------------------------- */

.eps-pile {
  display: flex;
  flex-direction: column;
}

/* `.eps-pile` sert autant à empiler des paires clé/valeur collées qu'à
   espacer des cartes : l'écart est donc porté par un modificateur, pas par la
   classe de base. */

.eps-rangee {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eps-rangee--haut {
  align-items: flex-start;
}

.eps-rangee--retour {
  flex-wrap: wrap;
}

.eps-pousse {
  flex: 1;
  min-width: 0;
}

/* Un enfant de flex ou de grille ne rétrécit pas sous la largeur de son
   contenu sans ceci - d'où les débordements de noms de machines. */
.eps-etroit {
  min-width: 0;
}

.eps-espace-haut {
  margin-top: 16px;
}

/* Paragraphe d'explication à l'intérieur d'une carte. */
.eps-texte {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--eps-sourdine);
  margin-top: 6px;
}

/* Largeur de lecture. La zone de vue n'est volontairement PAS plafonnée : elle
   porte des tableaux et des grilles qui doivent occuper l'écran. C'est donc la
   prose qui se borne - sans cela, une phrase court sur 3000 px et l'œil perd
   le début de la ligne suivante en revenant à la ligne. */
.eps-texte,
.eps-vue > p,
.eps-entete-vue-detail,
.eps-carte-vide p {
  max-width: 72ch;
}

.eps-grille {
  display: grid;
  gap: 16px;
}

.eps-vide {
  padding: 40px 20px;
  text-align: center;
  color: var(--eps-sourdine);
  font-size: 13px;
}

.eps-sans-impression {
  /* neutralisé par impression.css */
}

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

/* --- Adaptation ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .eps-app {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .eps-cote {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
  }

  .eps-cote-section,
  .eps-cote-pied,
  .eps-cote-pousse {
    display: none;
  }

  .eps-marque {
    padding: 0 12px 0 0;
  }

  .eps-organisation {
    width: auto;
  }

  .eps-barre {
    height: auto;
    padding: 14px 18px;
    flex-wrap: wrap;
  }

  .eps-vue {
    padding: 18px 18px 48px;
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .eps-tableau tr {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .eps-tableau thead {
    display: none;
  }

  .eps-tableau tbody tr {
    padding: 14px 16px;
  }

  .eps-sequence-etape,
  .eps-sequence-etape--serree {
    grid-template-columns: 40px 1fr;
  }

  .eps-modale {
    padding: 20px;
  }
}

/* Bouton compact, posé dans une ligne de liste : mêmes couleurs, moitié moins
   de place. Sans lui, un « Se connecter » dans une vignette de machine fait
   grandir toute la ligne. */
.eps-btn--compact {
  font-size: 11.5px;
  padding: 6px 11px;
  box-shadow: none;
}

/* --- Boutons segmentés ---------------------------------------------------- */

/* Un groupe de boutons radio qui se lit comme une barre de choix. La case
   reste dans le DOM, seulement masquée : c'est elle qui porte le focus, la
   navigation aux flèches et l'annonce du lecteur d'écran. Un groupe fabriqué
   avec des `div` cliquables perdrait les trois. */
.eps-segments {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.eps-segment {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 11px;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  color: rgba(25, 19, 61, 0.65);
  border: 1px solid rgba(25, 19, 61, 0.14);
}

.eps-segment--etroit {
  min-width: 34px;
  padding: 7px 0;
}

.eps-segment input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.eps-segment:has(input:checked) {
  background: var(--eps-marine);
  border-color: var(--eps-marine);
  color: #fff;
}

.eps-segment:has(input:focus-visible) {
  outline: 2px solid var(--eps-marine);
  outline-offset: 2px;
}