/* LA PEAU HÉRITÉE DE LA MAIN COURANTE — ce qu'il reste de la feuille de
   l'espace agent après sa remise à Hune (04/09/2026).

   POURQUOI ELLE EXISTE ENCORE. Les vingt écrans de l'espace agent parlent
   désormais le vocabulaire de « static/design/hune.css » et n'ont plus besoin
   d'une ligne d'ici. Mais dix écrans MOBILES DE LA MAIN COURANTE (rondes,
   points de contrôle, passations) étendent la même base et emploient toujours
   ces classes « ea- » : les convertir n'est pas le chantier des portails, et
   les laisser sans peau aurait cassé, le même jour, un dispositif qu'un agent
   tient en ronde. Cette feuille est donc un PONT, appelé à disparaître quand
   la main courante passera à son tour.

   CE QU'ELLE NE FAIT PLUS, ET C'EST L'ESSENTIEL. Elle ne définit plus aucune
   couleur, aucune fonte, aucune règle sur « body », « h1 » ou « h2 » : elle
   les prenait à elle seule, et deux feuilles qui se disputent la couleur du
   fond, c'est exactement la dérive qu'on répare. Ses jetons POINTENT
   maintenant sur ceux de Hune — donc le thème sombre du produit s'applique
   aux écrans de la main courante sans qu'ils aient changé d'une ligne. */

:root {
  /* Les anciens noms, branchés sur les jetons de Hune. « --encre » n'est pas
     repris : Hune le porte déjà, sous le même nom et pour le même usage. */
  --primaire: var(--coque);
  --primaire-fonce: var(--coque-3);
  --ambre: var(--lampe);
  --surface: var(--surf);
  --encre2: var(--encre-2);
  --encre3: var(--encre-3);
  --bordure: var(--filet);
  --succes: var(--ok);          --succes-fond: var(--ok-f);
  --alerte: var(--al);          --alerte-fond: var(--al-f);
  --danger: var(--dg);          --danger-fond: var(--dg-f);
  --info: var(--veille);        --info-fond: var(--veille-f);
}

/* ---- La carte, la ligne, la mention secondaire ---- */
.ea-carte {
  background: var(--surf); border: 1px solid var(--filet);
  border-radius: var(--r); padding: var(--e3) var(--e4); margin-bottom: var(--e2);
  box-shadow: var(--ombre);
}
.ea-carte h3 { margin: 0 0 4px; font-size: 15px; }
.ea-sous { color: var(--encre-3); font-size: 12.5px; }
.ea-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e2); }

/* ---- Les pastilles d'état ---- */
.ea-badge {
  display: inline-block; border-radius: 999px; padding: 1px 9px;
  font-size: 11px; font-weight: 700;
}
.ea-badge-succes { background: var(--ok-f); color: var(--ok); }
.ea-badge-alerte { background: var(--al-f); color: var(--al); }
.ea-badge-danger { background: var(--dg-f); color: var(--dg); }
.ea-badge-info   { background: var(--veille-f); color: var(--veille); }

/* ---- Les commandes : pleine largeur et 50 px de haut, c'est la géométrie
   d'une ronde, gantée, à une main. On ne la change pas. ---- */
.ea-btn {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 50px; padding: 12px var(--e4); margin: var(--e2) 0;
  border: 1px solid var(--veille); border-radius: var(--r);
  font-size: 15px; font-weight: 600;
  background: var(--veille); color: var(--sur-veille); cursor: pointer;
  text-decoration: none; text-align: center;
  transition: background var(--etat), border-color var(--etat);
}
.ea-btn:hover { color: var(--sur-veille); }
.ea-btn:active { background: var(--coque); border-color: var(--coque); }
.ea-btn-succes { background: var(--ok); border-color: var(--ok); color: #fff; }
.ea-btn-secondaire { background: var(--surf); color: var(--encre); border-color: var(--encre-3); }
.ea-btn-secondaire:hover { background: var(--surf-2); color: var(--encre); }
.ea-btn[disabled] { opacity: .5; }

/* ---- Le bandeau d'information d'un écran ---- */
.ea-bandeau {
  background: var(--veille-f); color: var(--encre);
  border: 1px solid var(--filet); border-radius: var(--r);
  padding: var(--e3) var(--e4); margin-bottom: var(--e3); font-size: 13px;
}
.ea-bandeau .ea-btn { margin-bottom: 0; }

/* ---- Les messages posés dans le corps d'un écran ---- */
.ea-message { border-radius: var(--r); padding: 10px var(--e4); margin-bottom: var(--e2); font-size: 13px; }
.ea-message-success { background: var(--ok-f); color: var(--ok); }
.ea-message-error   { background: var(--dg-f); color: var(--dg); }
.ea-message-warning { background: var(--al-f); color: var(--al); }
.ea-message-info    { background: var(--veille-f); color: var(--veille); }