/* =====================================================================
   ExpertMED - em.css : socle de design (tokens + composants applicatifs)
   Charge APRES tailwind.css. Ne remplace pas Tailwind : le fichier fige
   la charte (couleurs, typo, composants) sans dependre d'un build.
   Toute nouvelle couleur passe par un token, jamais par une valeur en dur.
   Reference : expertmed_design/README.md (fidelite hifi).
   ===================================================================== */

/* ---------------------------------------------------------------
   1. TOKENS
   Les valeurs vivent dans css/em_tokens.css, charge AVANT celle-ci et
   chargeable seul par les pages autonomes (espace patient). Ici, les
   noms prefixes n'en sont que des ALIAS : c'est ce qui fait descendre la
   couleur du cabinet (brandingColor -> --banner-color -> --brand ->
   --em-brand) dans toute la charte. Tant que --em-brand portait sa
   propre valeur en dur, le reglage du cabinet ne colorait rien.

   Le repli apres la virgule garde la feuille autonome : si em_tokens.css
   n'est pas charge, les valeurs par defaut d'ExpertMED s'appliquent.
   --------------------------------------------------------------- */
:root {
  /* Marque */
  --em-brand:        var(--brand, #0a7a52);
  --em-brand-strong: var(--brand-strong, #085f40);
  --em-brand-soft:   var(--brand-soft, #f2f9f6);
  --em-brand-border: var(--brand-border, #cfe3d9);

  /* Texte */
  --em-ink:         var(--ink, #0b0f14);
  --em-text:        var(--text, #374151);
  --em-muted:       var(--muted, #6b7280);
  --em-faint:       var(--faint, #8b929a);
  --em-placeholder: var(--placeholder, #9aa1a9);

  /* Surfaces */
  --em-surface:     var(--surface, #ffffff);
  --em-surface-alt: var(--surface-alt, #fafbfc);
  --em-canvas:      var(--canvas, #f6f7f9);

  /* Traits */
  --em-border:      var(--border, #e8eaee);
  --em-border-soft: var(--border-soft, #eef0f3);
  --em-line:        var(--line, #f1f3f5);

  /* Semantique (le vert reste reserve a l'action et au succes) */
  --em-warning:       var(--warning, #b45309);
  --em-warning-soft:  var(--warning-soft, #fff7ed);
  --em-danger:        var(--danger, #b42318);
  --em-danger-soft:   var(--danger-soft, #fef3f2);
  --em-danger-border: var(--danger-border, #f0c6c2);
  --em-info:          var(--info, #175cd3);
  --em-info-soft:     var(--info-soft, #eff4ff);
  /* Les pastilles portent une bordure la ou les badges n'en ont pas : il leur
     fallait ces deux tokens pour cesser d'ecrire leur trait en dur. Les replis
     sont les valeurs qu'elles avaient deja, donc aucun trait ne bouge. */
  --em-warning-border: var(--warning-border, #f3e0b8);
  --em-info-border:    var(--info-border, #cddff5);
  /* Etat soutenu de la pastille qui appelle : le creux de sa respiration, et
     ce sur quoi elle se pose quand l'animation est coupee. */
  --em-danger-pulse:        var(--danger-pulse, #f9dada);
  --em-danger-pulse-border: var(--danger-pulse-border, #e9a9a9);

  /* Rayons */
  --em-radius-card:    var(--radius-card, 16px);
  --em-radius-control: var(--radius-control, 10px);
  --em-radius-inner:   12px;
  --em-radius-pill:    999px;

  /* Espacement : echelle unique, rien d'autre */
  --em-sp-1: 4px;  --em-sp-2: 8px;  --em-sp-3: 12px; --em-sp-4: 16px;
  --em-sp-5: 20px; --em-sp-6: 24px; --em-sp-7: 32px; --em-sp-8: 40px; --em-sp-9: 56px;

  /* Ombres */
  --em-shadow-card:  0 20px 50px rgba(11, 15, 20, 0.10);
  --em-shadow-menu:  0 16px 40px rgba(11, 15, 20, 0.12);
  --em-shadow-modal: 0 18px 44px rgba(11, 15, 20, 0.16);
  --em-focus-ring:   0 0 0 3px rgba(10, 122, 82, 0.12);

  /* Typo : IBM Plex Sans AUTO-HEBERGEE (jamais de CDN tiers : contexte
     HDS, l'IP du patient ne doit pas partir chez un tiers). Tant que les
     fichiers ne sont pas deposes dans /assets/fonts, le repli system-ui
     s'applique et le rendu reste propre. */
  --em-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------- */
.em, .em-scope { font-family: var(--em-font); color: var(--em-text); }

.em-page       { background: var(--em-canvas); }
.em-title-page { font-size: 26px;   font-weight: 600; color: var(--em-ink); letter-spacing: -0.01em; }
.em-title      { font-size: 22px;   font-weight: 600; color: var(--em-ink); letter-spacing: -0.01em; }
.em-title-card { font-size: 16px;   font-weight: 600; color: var(--em-ink); }
.em-name       { font-size: 15px;   font-weight: 600; color: var(--em-ink); }
.em-body       { font-size: 14.5px; font-weight: 400; line-height: 1.6; text-wrap: pretty; }
.em-label      { font-size: 13px;   font-weight: 500; color: var(--em-text); }
.em-secondary  { font-size: 13px;   font-weight: 400; color: var(--em-muted); }
.em-meta       { font-size: 12.5px; font-weight: 400; color: var(--em-faint); }
.em-colhead    { font-size: 11px;   font-weight: 400; color: var(--em-muted);
                 text-transform: uppercase; letter-spacing: 0.09em; }

/* ---------------------------------------------------------------
   3. BOUTONS  (hauteur 42, un seul primaire par zone)
   --------------------------------------------------------------- */
.em-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--em-sp-2);
  height: 42px; padding: 0 var(--em-sp-5);
  border: 1px solid transparent; border-radius: var(--em-radius-control);
  font-family: var(--em-font); font-size: 14px; font-weight: 600;
  line-height: 1; text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.em-btn:focus-visible { outline: none; box-shadow: var(--em-focus-ring); }

.em-btn--primary   { background: var(--em-brand); color: #fff; }
.em-btn--primary:hover:not(:disabled) { background: var(--em-brand-strong); }

.em-btn--secondary { background: var(--em-surface); color: var(--em-ink); border-color: #d8dce1; }
.em-btn--secondary:hover:not(:disabled) { background: var(--em-surface-alt); }

/* Action possible mais SANS OBJET pour l'instant : elle reste cliquable et
   cesse de peser. Sert au bouton « Compte-rendu » tant que rien n'est ecrit -
   il ne doit pas se disputer l'oeil avec l'action principale d'a cote. Ce
   n'est pas --disabled : le geste reste offert a qui le cherche. */
/* .em-btn--efface : retiree par erreur le 23-09-2026, retablie le 24-09-2026.
   Aucun fichier n'ecrit « em-btn--efface » en toutes lettres : em_button()
   compose la classe depuis la variante ('em-btn--' . $variant), et
   dossier.php pose 'variant' => 'efface' sur le bouton « Compte-rendu » d'un
   rapport vide. Un grep sur le nom de classe ne la trouve donc pas ; chercher
   aussi « 'variant' => » avant de conclure qu'une variante est morte. */
.em-btn--efface    { background: transparent; color: var(--em-placeholder); border-color: transparent; }
.em-btn--efface:hover:not(:disabled) { background: var(--em-surface-alt); color: var(--em-text); }

.em-btn--quiet     { background: transparent; color: var(--em-brand); }
.em-btn--quiet:hover:not(:disabled) { background: var(--em-brand-soft); }

.em-btn--danger    { background: var(--em-surface); color: var(--em-danger); border-color: var(--em-danger-border); }
/* Action principale qui reclame le cabinet sans etre une faute : « Appeler »
   un patient qui ne repond pas (fin de chaine des relances, 17-09-2026).
   Ambre plein, entre le vert de l'action ordinaire et le rouge de l'annulation. */
.em-btn--primary.em-btn--ton-alerte { background: var(--em-warning); }
.em-btn--primary.em-btn--ton-alerte:hover:not(:disabled) { background: #92400e; }
.em-btn--danger:hover:not(:disabled) { background: var(--em-danger-soft); }

.em-btn:disabled, .em-btn--disabled {
  background: var(--em-border-soft); color: var(--em-placeholder);
  border-color: transparent; cursor: not-allowed;
}
.em-btn--block { width: 100%; }
.em-btn--sm    { height: 36px; padding: 0 var(--em-sp-3); font-size: 13px; }
/* Etiquette dans un bouton (« Bêta » d'une fonction pas encore officielle) :
   l'ambre des badges d'avertissement, en plus petit. */
.em-btn__tag {
  display: inline-flex; align-items: center; padding: 1px 7px;
  border-radius: var(--em-radius-pill); font-size: 11px; font-weight: 600;
  background: var(--em-warning-soft); color: var(--em-warning); line-height: 16px;
}
.em-btn--icon  { width: 38px; height: 38px; padding: 0; }

/* Pastille FILTRE + CREATION : une categorie qu'on peut afficher seule, et
   creer directement. Ne des pastilles de l'annuaire (patients, medecins,
   assureurs), remontees ici le 17-08-2026 pour que l'ecran des comptes parle
   la meme langue - un design qui vit dans UN fichier diverge des le second.

   Un bouton ne pouvant pas en contenir un autre, c'est un groupe de deux
   boutons qui partagent une bordure ; le filet les separe pour qu'on ne
   declenche pas l'un en visant l'autre. Le "+" reprend le vert du bouton
   primaire : c'est le meme geste, deplace au plus pres de ce qu'il cree. */
.em-grp     { display: inline-flex; align-items: stretch; border: 1px solid var(--em-border);
              border-radius: 999px; overflow: hidden; background: var(--em-surface); }
.em-grp--on { background: var(--em-ink); border-color: var(--em-ink); }

.em-pilule  { padding: 9px 16px; border: 0; background: none; color: var(--em-muted);
              font-size: 13.5px; cursor: pointer; font-family: inherit; }
.em-pilule:hover { color: var(--em-ink); }
.em-grp--on .em-pilule, .em-grp--on .em-pilule:hover { color: #fff; }

.em-plus    { padding: 0 11px; border: 0; border-left: 1px solid var(--em-border);
              background: none; color: var(--em-brand); font-size: 16px; line-height: 1;
              cursor: pointer; font-family: inherit; }
.em-plus:hover { background: var(--em-brand-soft); }
.em-grp--on .em-plus       { border-left-color: rgba(255,255,255,.22); color: #fff; }
.em-grp--on .em-plus:hover { background: rgba(255,255,255,.12); }
.em-plus:disabled          { color: var(--em-faint); cursor: not-allowed; background: none; }

/* Groupe segmente : des choix EXCLUSIFS sur un meme axe (une vue, une
   periode). A ne pas confondre avec une rangee de boutons, qui declenche
   des actions differentes. Un seul segment est actif, et il est plein. */
.em-seg   { display: inline-flex; background: var(--em-surface); border: 1px solid var(--em-border);
            border-radius: 10px; overflow: hidden; }
.em-seg-b { height: 40px; padding: 0 var(--em-sp-3); border: 0; background: none; cursor: pointer;
            font-size: 13.5px; color: var(--em-muted); font-family: inherit; }
.em-seg-b + .em-seg-b { border-left: 1px solid var(--em-border-soft); }
.em-seg-b:hover        { background: var(--em-surface-alt); color: var(--em-ink); }
.em-seg-b--on,
.em-seg-b--on:hover    { background: var(--em-ink); color: #fff; }
/* Filtres de la liste (tableau de bord, 18-09-2026) : des selecteurs au
   libelle neutre, discrets, et les filtres poses en etiquettes fermables. */
.em-filtre        { height: 32px; padding: 0 28px 0 12px; border: 1px solid var(--em-border); border-radius: 999px;
                    background: var(--em-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
                    font: inherit; font-size: 12.5px; color: var(--em-muted); cursor: pointer; appearance: none; -webkit-appearance: none; }
.em-filtre:hover  { border-color: #c9ced6; color: var(--em-ink); }
.em-filtre:focus  { outline: none; border-color: var(--em-brand); }
.em-etiquette     { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px;
                    border-radius: 999px; background: var(--em-brand-soft); color: var(--em-brand);
                    font-size: 12.5px; font-weight: 600; border: 1px solid rgba(10,122,82,.18); }
.em-etiquette-f   { font-weight: 400; opacity: .8; }
.em-etiquette-x   { width: 20px; height: 20px; border-radius: 50%; border: 0; background: transparent; color: inherit;
                    font-size: 16px; line-height: 20px; cursor: pointer; padding: 0; }
.em-etiquette-x:hover { background: rgba(10,122,82,.15); }
.em-etiquette-tout { border: 0; background: none; color: var(--em-muted); font-size: 12px; cursor: pointer;
                     text-decoration: underline; padding: 0 4px; }
.em-etiquette-tout:hover { color: var(--em-danger); }

/* Le nom du patient dans le titre de la fiche : un lien qui ne se declare
   qu'au survol (soulignement et crayon), pour ne pas transformer un titre en
   bouton. */
.em-lien-titre        { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.em-lien-titre:hover  { text-decoration: underline; text-underline-offset: 4px; }
.em-lien-titre:hover svg { opacity: 1 !important; }

/* Un segment peut etre un lien (les onglets de la page Modeles). */
a.em-seg-b             { display: inline-flex; align-items: center; text-decoration: none; }

/* ---------------------------------------------------------------
   4. BADGES  (pilule ; le vert reste reserve au succes)
   --------------------------------------------------------------- */
.em-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--em-radius-pill);
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.em-badge--success { background: var(--em-brand-soft);   color: var(--em-brand); }
.em-badge--info    { background: var(--em-info-soft);    color: var(--em-info); }
.em-badge--warning { background: var(--em-warning-soft); color: var(--em-warning); }
.em-badge--danger  { background: var(--em-danger-soft);  color: var(--em-danger); }
.em-badge--neutral { background: var(--em-line);         color: var(--em-muted); }

/* ---------------------------------------------------------------
   5. CARTES
   --------------------------------------------------------------- */
.em-card {
  background: var(--em-surface); border: 1px solid var(--em-border);
  border-radius: var(--em-radius-card);
}
.em-card--alt      { background: var(--em-surface-alt); }
.em-card--floating { box-shadow: var(--em-shadow-card); }
.em-card__body   { padding: var(--em-sp-6); }
.em-card__header { display: flex; align-items: center; justify-content: space-between;
                   gap: var(--em-sp-3); padding: var(--em-sp-5) var(--em-sp-6); }
.em-card__footer { padding: var(--em-sp-4) var(--em-sp-6);
                   border-top: 1px solid var(--em-border-soft); }

/* ---------------------------------------------------------------
   6. CHAMPS
   --------------------------------------------------------------- */
.em-field       { display: flex; flex-direction: column; gap: var(--em-sp-2); }
.em-field__label{ font-size: 13px; font-weight: 500; color: var(--em-text); }
.em-input {
  height: 44px; padding: 0 14px; width: 100%; box-sizing: border-box;
  background: var(--em-surface); border: 1px solid var(--em-border);
  border-radius: var(--em-radius-control);
  font-family: var(--em-font); font-size: 14.5px; color: var(--em-ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.em-input::placeholder { color: var(--em-placeholder); }
.em-input:focus { outline: none; border-color: var(--em-brand); box-shadow: var(--em-focus-ring); }
.em-input--error { border-color: var(--em-danger); }
.em-field__error { font-size: 12.5px; color: var(--em-danger); }
textarea.em-input { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.6; }

/* ---------------------------------------------------------------
   7. TABLEAU DE DONNEES
   --------------------------------------------------------------- */
.em-table       { background: var(--em-surface); border: 1px solid var(--em-border);
                  border-radius: var(--em-radius-card); overflow: hidden; }
/* __head et __row sont parties le 23-09-2026 : aucun ecran ne les posait.
   Ce composant en <div> date d'avant les vraies tables ; les listes de
   l'application sont des <table class="em-table"> (regles plus bas), ce qui
   est le bon choix - un tableau de donnees est un tableau. Seul le PIED a
   survecu, parce qu'il sert sous une vraie table (le nombre de dossiers,
   admin_dashboard.php) : il n'a pas d'equivalent en balise de tableau. */
.em-table__foot { padding: var(--em-sp-4) var(--em-sp-6); border-top: 1px solid var(--em-line);
                  font-size: 13px; color: var(--em-faint); }

/* ---------------------------------------------------------------
   8. STEPPER / FRISE D'AVANCEMENT
   --------------------------------------------------------------- */
.em-steps      { display: grid; gap: var(--em-sp-3); }
.em-step__bar  { height: 4px; border-radius: var(--em-radius-pill); background: var(--em-border); }
.em-step__label{ font-size: 13.5px; color: var(--em-placeholder); }
.em-step--done .em-step__bar,
.em-step--current .em-step__bar { background: var(--em-brand); }
.em-step--done .em-step__label    { color: var(--em-brand); }
.em-step--current .em-step__label { color: var(--em-brand); font-weight: 600; }

/* Segments compacts (ligne de tableau de bord) */
.em-progress      { display: flex; gap: var(--em-sp-1); min-width: 0; }
.em-progress__seg { flex: 1; height: 4px; border-radius: var(--em-radius-pill);
                    background: var(--em-border); }
.em-progress__seg--on { background: var(--em-brand); }

/* ---------------------------------------------------------------
   9. PANNEAU REPLIABLE
   Promu depuis css/notes.css (.nm-org), ou il etait le mieux ecrit des
   trois accordeons de l'application : un vrai <button>, les tokens, et
   deux niveaux dessines et pas trois. Le releve du 10-09-2026
   (docs/MESURE_ACCORDEON_2026-09-10.md) a mesure les deux autres - celui
   du compte-rendu ecrit ses couleurs en dur et pose un <div onclick>
   quatorze fois, celui du tableau de bord construit son en-tete en JS.
   Ils rejoindront celui-ci, dans cet ordre.

   Les valeurs sont reprises telles quelles : cette promotion ne deplace
   aucun pixel. Ce qui reste a faire quand les deux autres arrivent, et
   qui ne se fait pas ici parce que ca changerait le rendu ou le
   comportement : le chevron (chaque ecran a le sien) et aria-expanded,
   qu'aucun des trois ne pose et qui demande de toucher la bascule JS.
   --------------------------------------------------------------- */
.em-panel {
  background: var(--em-surface); border: 1px solid var(--em-border);
  border-radius: 14px; overflow: hidden;
}
.em-panel__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px; text-align: left; cursor: pointer;
  background: var(--em-surface); border: 0; font-family: inherit;
  transition: background-color 120ms ease;
}
.em-panel__head:hover { background: var(--em-surface-alt); }
.em-panel__body { padding: 12px; border-top: 1px solid var(--em-border-soft); }

/* ---------------------------------------------------------------
   10. ETAT VIDE
   --------------------------------------------------------------- */
.em-empty {
  border: 1px dashed #dfe3e8; border-radius: var(--em-radius-inner);
  padding: 34px var(--em-sp-6); text-align: center;
}
.em-empty__title { font-size: 15.5px; font-weight: 600; color: var(--em-ink); }
.em-empty__text  { font-size: 13.5px; color: var(--em-muted); max-width: 360px;
                   margin: var(--em-sp-2) auto var(--em-sp-4); line-height: 1.6; }

/* ---------------------------------------------------------------
   11. MODALE
   --------------------------------------------------------------- */
.em-modal {
  background: var(--em-surface); border-radius: 14px; box-shadow: var(--em-shadow-modal);
  width: 420px; max-width: calc(100vw - 32px);
}
.em-modal--wide  { width: 728px; }
.em-modal__head  { padding: var(--em-sp-5) var(--em-sp-6); }
.em-modal__title { font-size: 16px; font-weight: 600; color: var(--em-ink); }
.em-modal__body  { padding: 0 var(--em-sp-6) var(--em-sp-5); font-size: 13.5px; color: var(--em-text); }
.em-modal__foot  { display: flex; align-items: center; justify-content: space-between;
                   gap: var(--em-sp-3); padding: var(--em-sp-4) var(--em-sp-6);
                   border-top: 1px solid var(--em-border-soft); }

/* ---------------------------------------------------------------
   12. MENU FLOTTANT
   --------------------------------------------------------------- */
/* Le composant existait depuis la refonte sans un seul utilisateur : les
   menus « Nouveau contact » (annuaire.php) et « Nouveau compte »
   (admin/users.php) se le refabriquaient chacun sous un nom a eux
   (.an-menu-l, .cpt-menu-l) avec, au detail pres, LES MEMES declarations.
   Trois ecritures pour un seul dessin. Adopte le 23-09-2026 ; ce qu'il leur
   manquait est entre ici, mesure sur ce qu'elles posaient reellement :
   l'entree en <button> (largeur pleine, pas de bordure, police heritee),
   l'etat DESACTIVE - une entree fermee par la licence reste lisible et garde
   son motif, c'est une regle du produit - et la taille des icones. */
.em-menu { background: var(--em-surface); border: 1px solid var(--em-border);
           border-radius: var(--em-radius-inner); box-shadow: var(--em-shadow-menu); padding: 6px; }
/* Menu FLOTTANT, ancre sous le bouton qui l'ouvre. Les deux ecrans posaient
   ces cinq declarations en style="" ; elles vivent ici. Le parent doit porter
   position:relative. */
.em-menu--flottant { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; }
.em-menu__group  { padding: var(--em-sp-2) var(--em-sp-3) var(--em-sp-1); }
.em-menu__title  { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;
                   color: var(--em-faint); }
.em-menu__item   { display: flex; align-items: center; gap: 10px; width: 100%;
                   padding: 9px var(--em-sp-3); border: 0; background: none;
                   border-radius: 8px; font: inherit; font-size: 13.5px;
                   color: var(--em-ink); text-align: left; cursor: pointer;
                   text-decoration: none; }
.em-menu__item:hover:not(:disabled) { background: var(--em-surface-alt); }
.em-menu__item:disabled { color: var(--em-placeholder); cursor: not-allowed; }
.em-menu__item svg { width: 15px; height: 15px; color: var(--em-muted); flex: none; }
/* Entree a DEUX niveaux : le geste, puis ce qu'il fait. Les comptes l'ecrivaient
   en style="" (« Indisponible ») et le menu Mail en Tailwind (« Mail court,
   lien valable 7 jours ») ; c'est le meme besoin. */
.em-menu__item__l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.em-menu__sous    { font-size: 11.5px; font-weight: 400; color: var(--em-faint); }
.em-menu__item--danger { color: var(--em-danger); }
.em-menu__sep    { height: 1px; background: var(--em-border-soft); margin: 6px 0; }

/* ---------------------------------------------------------------
   13. ACCESSIBILITE
   --------------------------------------------------------------- */
:where(.em-btn, .em-input, .em-menu__item):focus-visible {
  outline: none; box-shadow: var(--em-focus-ring);
}
@media (prefers-reduced-motion: reduce) {
  .em-btn, .em-input { transition: none; }
}

/* ---------------------------------------------------------------
   14. LIGNE DE TABLEAU : actions secondaires repliees
   La barre complete reste disponible derriere le bouton "...", en
   panneau flottant. On ne retire aucune action : on les hierarchise.

   Le panneau est en position FIXE et place par toggleRowActions(), pas
   en absolu dans la cellule : la carte du tableau porte overflow:hidden
   et l'onglet qui l'englobe garde un transform (animate-fadeIn ...
   forwards), ce qui en fait le bloc conteneur - un panneau en absolu s'y
   faisait donc rogner. Le menu MAIL avait deja du s'en echapper de la
   meme facon (toggleMailMenu le deplace dans <body>).
   --------------------------------------------------------------- */
.em-row-actions {
  position: fixed; z-index: 150;
  background: var(--em-surface); border: 1px solid var(--em-border);
  border-radius: var(--em-radius-inner); box-shadow: var(--em-shadow-menu);
  padding: 10px 12px; max-width: min(720px, 92vw);
}
.em-row-actions.hidden { display: none; }

/* Tableau HTML reel. Les regles de mise en page en div qui vivaient plus haut
   (.em-table__head/__row) sont parties le 23-09-2026, faute d'utilisateur : un
   <table class="em-table"> n'en heritait pas et retombait sur les defauts du
   navigateur - th centre, td a gauche, d'ou un decalage visible entre
   l'en-tete et les valeurs. Ce sont ces regles-ci qui le corrigent. */
.em-table { width: 100%; border-collapse: collapse; }
.em-table th,
.em-table td { text-align: left; padding: 12px var(--em-sp-4); vertical-align: middle; }
.em-table th { font-size: 11px; font-weight: 400; color: var(--em-muted);
               text-transform: uppercase; letter-spacing: .04em;
               background: var(--em-surface-alt); border-bottom: 1px solid var(--em-border); }
.em-table td { font-size: 13px; color: var(--em-text); border-top: 1px solid var(--em-line); }
.em-table tbody tr:first-child td { border-top: 0; }
.em-table tbody tr:hover { background: var(--em-surface-alt); }
/* Colonnes d'action : au plus juste, alignees a droite.
   :not([colspan]) est essentiel (23-09-2026). Une cellule qui TRAVERSE le
   tableau - « Chargement... », un etat vide, un message - est elle aussi la
   derniere de sa ligne : elle heritait donc de nowrap et de width:1%, et une
   phrase un peu longue partait en une seule ligne qui faisait defiler tout le
   tableau vers la droite (constat d'Aurelien sur « Classeur »).
   Une cellule a colspan n'est jamais une colonne d'action.
   Enfants DIRECTS seulement (24-09-2026) : un tableau imbrique dans une
   ligne (l'inventaire d'un recueil, dossier.php) recevait la regle sur sa
   propre derniere colonne, reduite a 1 % et rejetee a droite. */
.em-table > thead > tr > th:last-child:not([colspan]),
.em-table > tbody > tr > td:last-child:not([colspan]) { text-align: right; white-space: nowrap; width: 1%; }

/* Boutons d'action a l'icone : une rangee de carres blancs ne dit pas qu'on
   peut agir. L'icone prend la couleur de marque, le fond reste neutre - assez
   pour signaler l'action sans rivaliser avec le bouton principal. */
.em-btn--secondary.em-btn--icon        { color: var(--em-brand); border-color: #d8dce1; }
.em-btn--secondary.em-btn--icon:hover:not(:disabled) {
    background: var(--em-brand-soft, #eaf5f0); border-color: var(--em-brand); }
.em-btn--secondary.em-btn--icon:disabled { color: var(--em-placeholder); }

/* Bouton d'analyse en attente : respiration lente entre le blanc et le vert.
   C'est le seul endroit ou l'analyse se declenche desormais, il doit se
   remarquer sans clignoter agressivement - 3 secondes de cycle, pas 0,5.
   Respecte prefers-reduced-motion : l'animation n'est pas de l'information,
   la couleur de bordure suffit. */
@keyframes em-respire {
    0%, 100% { background: var(--em-surface);            border-color: #d8dce1; }
    50%      { background: var(--em-brand-soft, #eaf5f0); border-color: var(--em-brand); }
}
.em-btn--attente { animation: em-respire 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .em-btn--attente { animation: none; border-color: var(--em-brand); }
}

/* Pastilles de ligne : plus petites que les badges de titre, elles doivent
   tenir dans une cellule sans la faire respirer. */
.em-pastille { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px;
               border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.5;
               border: 1px solid transparent; background: none; cursor: default; }
/* Un etat a UNE couleur, quelle que soit la taille de la pilule : ces trois
   variantes ecrivaient leurs hexadecimaux en dur pendant que .em-badge disait
   le meme etat avec les tokens. Un cabinet qui surchargeait --danger voyait sa
   marque sur les badges de titre et pas sur les pastilles de ligne. */
.em-pastille--danger  { background: var(--em-danger-soft);  color: var(--em-danger);  border-color: var(--em-danger-border); }
.em-pastille--warning { background: var(--em-warning-soft); color: var(--em-warning); border-color: var(--em-warning-border); }
.em-pastille--info    { background: var(--em-info-soft);    color: var(--em-info);    border-color: var(--em-info-border); }
/* Reussite : le meme ton que .em-badge--success, a la taille d'une ligne.
   Ajoutee pour l'export fige courant dans « Documents du rapport » (17-09-2026). */
.em-pastille--success { background: var(--em-brand-soft); color: var(--em-brand); border-color: transparent; }
/* Etat eteint (dossier annule, clos) : il doit se lire sans se faire remarquer.
   Ajoute avec le passage a la charte de la colonne Avancement du tableau de bord. */
.em-pastille--neutral { background: var(--em-surface-alt); color: var(--em-muted); border-color: var(--em-border); }
/* L'icone d'une pastille reste plus petite que celle d'un bouton : la pastille
   fait 11px, une icone de 16 la deformerait. */
.em-pastille [data-lucide] { flex: none; }
button.em-pastille    { cursor: pointer; }
button.em-pastille:hover { filter: brightness(0.96); }

/* Pastille qui APPELLE : la seule qui bouge. Meme parti que le bouton
   d'analyse en attente (em-btn--attente) - 3 secondes de cycle, pas 0,5 :
   elle doit accrocher l'oeil qui balaie le tableau sans clignoter dessus.
   Le mouvement n'est jamais l'information : sous prefers-reduced-motion la
   pastille se pose sur son etat le plus soutenu, qui suffit a la distinguer. */
@keyframes em-pastille-respire {
    0%, 100% { background: var(--em-danger-soft);  border-color: var(--em-danger-border); }
    50%      { background: var(--em-danger-pulse); border-color: var(--em-danger-pulse-border); }
}
.em-pastille--danger.em-pastille--appel { animation: em-pastille-respire 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .em-pastille--danger.em-pastille--appel {
        animation: none; background: var(--em-danger-pulse); border-color: var(--em-danger-pulse-border); }
}

/* Analyse en cours : une vague verte qui traverse le bouton. Elle dit que
   quelque chose avance, sans pretendre connaitre l'avancement reel - une
   barre de progression mentirait, on ignore combien de temps il reste. */
/* Lien texte qui attend un geste : la meme respiration lente, sur la couleur
   seule (un lien n'a pas de fond). Reservee a ce qui attend vraiment : le
   prochain rendez-vous d'un dossier conserve (18-09-2026). */
@keyframes em-lien-respire {
    0%, 100% { color: #94a3b8; }
    50%      { color: var(--em-brand); }
}
.em-lien--appel { animation: em-lien-respire 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .em-lien--appel { animation: none; color: var(--em-brand); }
}

@keyframes em-vague { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.em-btn--travaille {
    background-image: linear-gradient(90deg,
        var(--em-surface) 0%, var(--em-surface) 35%,
        var(--em-brand-soft, #eaf5f0) 50%,
        var(--em-surface) 65%, var(--em-surface) 100%);
    background-size: 200% 100%;
    animation: em-vague 1.4s linear infinite;
    border-color: var(--em-brand);
}
@media (prefers-reduced-motion: reduce) { .em-btn--travaille { animation: none; } }

/* Actions de l'en-tete : une teinte par NATURE d'action, pour qu'on les
   distingue du premier coup d'oeil au lieu d'une rangee verte uniforme.
   Le fond reste neutre : c'est l'icone qui porte la couleur, et le bouton
   principal garde son avantage. */
.em-btn--secondary.em-btn--ton-envoi   { color: var(--em-brand); }
.em-btn--secondary.em-btn--ton-verrou  { color: #8a5a00; }
.em-btn--secondary.em-btn--ton-temps   { color: #1d4f91; }
.em-btn--secondary.em-btn--ton-visio   { color: #4c3fa8; }
.em-btn--secondary.em-btn--ton-agenda  { color: #1d4f91; }
.em-btn--secondary.em-btn--ton-envoi:hover:not(:disabled)  { background: var(--em-brand-soft, #eaf5f0); border-color: var(--em-brand); }
.em-btn--secondary.em-btn--ton-verrou:hover:not(:disabled) { background: #fdf4e3; border-color: #d8a33a; }
.em-btn--secondary.em-btn--secondary.em-btn--ton-temps:hover:not(:disabled),
.em-btn--secondary.em-btn--ton-agenda:hover:not(:disabled) { background: #eaf1fb; border-color: #4a7fc9; }
.em-btn--secondary.em-btn--ton-visio:hover:not(:disabled)  { background: #eeecfa; border-color: #6f61cf; }
/* Fichiers et carnet, ajoutes avec la fiche de contact. Ouvrir un dossier de
   fichiers (pieces, courriers) est UNE nature : les deux partagent l'ardoise. */
.em-btn--secondary.em-btn--ton-fichier { color: #4a5568; }
/* Questions de la mission. Ce n'est pas une nature d'action mais un ETAT :
   l'expert est tenu de repondre a toutes, donc un reste a faire se voit, et
   un travail acheve se voit aussi. L'ambre n'alerte pas d'une faute - il dit
   qu'il reste quelque chose avant de pouvoir envoyer. */
.em-btn--quiet.em-btn--ton-manque  { color: var(--em-warning); }
.em-btn--quiet.em-btn--ton-complet { color: var(--em-brand); }
.em-btn--quiet.em-btn--ton-manque:hover:not(:disabled)  { background: var(--em-warning-soft, #fff7ed); }
.em-btn--quiet.em-btn--ton-complet:hover:not(:disabled) { background: var(--em-brand-soft, #eaf5f0); }
.em-btn--secondary.em-btn--ton-carnet  { color: #0f6f63; }
.em-btn--secondary.em-btn--ton-fichier:hover:not(:disabled) { background: #eef0f4; border-color: #8792a4; }
.em-btn--secondary.em-btn--ton-carnet:hover:not(:disabled)  { background: #e7f4f2; border-color: #2f9387; }

/* COMBOBOX : chercher dans une liste, ou creer ce qui n'y est pas. Deux
   emplois - la compagnie d'assurance et le medecin traitant - donc les regles
   vivent ICI et non dans l'un des deux partiels : mod/medecin_combobox.php
   sert aussi la modale de planification, ou le partiel assureur n'est pas
   inclus. Sans .ia-liste, sa liste resterait ouverte en permanence.
   La liste est posee en absolu SOUS le champ : elle deborde de la carte,
   elle ne peut donc pas vivre dans le flux. */
.ia-wrap   { position: relative; }
.ia-champ  { position: relative; }
.ia-fin    { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
             background: none; border: 0; padding: 4px; cursor: pointer; line-height: 0;
             color: var(--em-placeholder); }
.ia-fin:hover { color: var(--em-ink); }
.ia-liste  { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px);
             z-index: 60; max-height: 280px; overflow: auto; padding: 4px; }
.ia-liste--on { display: block; }
.ia-liste mark { background: var(--em-brand-soft); color: var(--em-brand); font-weight: 600; }

/* FRISE DE SUIVI apres le rapport (11-10-2026, parcoursFriseHtml) : la
   grammaire de la frise du dossier (.em-step__bar), une couleur par etat -
   vert fait, ambre a faire, gris passe / exclu / facultatif. Elle passe a la
   ligne dans une colonne etroite (ecran du rapport). */
.em-frise { list-style: none; margin: 0; padding: 0; display: grid;
            grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 12px 10px; }
.em-frise li { min-width: 0; }
.em-frise__pas { display: grid; gap: 5px; text-decoration: none; color: inherit; border-radius: 8px; padding: 2px 2px 4px; }
a.em-frise__pas:hover .em-frise__lib { color: var(--em-ink); text-decoration: underline; }
.em-frise__bar { height: 5px; border-radius: var(--em-radius-pill); background: var(--em-border); }
.em-frise__lib { font-size: 12.5px; font-weight: 600; color: var(--em-muted); line-height: 1.25;
                 overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.em-frise__sous { font-size: 11.5px; color: var(--em-placeholder); line-height: 1.3; }
.em-frise__pas--fait .em-frise__bar { background: var(--em-brand); }
.em-frise__pas--fait .em-frise__sous { color: var(--em-brand); }
.em-frise__pas--a_faire .em-frise__bar { background: var(--em-warning, #b45309); }
.em-frise__pas--a_faire .em-frise__sous { color: var(--em-warning, #b45309); font-weight: 600; }
.em-frise__pas--sans .em-frise__bar { background: var(--em-border-soft, #eef0f3); }
.em-frise__bilan { margin: 10px 0 0; font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.em-frise__legende { display: inline-flex; gap: 6px; align-items: center; color: var(--em-placeholder); }
.em-frise__point { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-left: 4px; }
.em-frise__point--fait { background: var(--em-brand); }
.em-frise__point--a_faire { background: var(--em-warning, #b45309); }
.em-frise__point--sans { background: var(--em-border); }

/* Formulaire parcouru par SECTIONS (js/form_sections.js). Le trait reprend
   celui du parcours d'un dossier - .em-step__bar plus haut : meme grammaire,
   il verdit quand la section porte quelque chose. Ce n'est pas un parcours
   impose, seulement un reperage. */
.em-fnav        { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
                  gap: 14px; margin-bottom: 26px; }
.em-fnav button { background: none; border: 0; padding: 0; text-align: left;
                  cursor: pointer; font-family: inherit; display: grid; gap: 7px; }
.em-fnav .b     { height: 4px; border-radius: var(--em-radius-pill);
                  background: var(--em-border); transition: background .15s; }
.em-fnav .t     { font-size: 13px; color: var(--em-placeholder); }
.em-fnav button:hover .t   { color: var(--em-muted); }
.em-fnav .rempli .b        { background: var(--em-brand); }
.em-fnav .rempli .t        { color: var(--em-brand); }
.em-fnav .actif .b         { background: var(--em-brand); }
.em-fnav .actif .t         { color: var(--em-brand); font-weight: 600; }
/* Une section masquee garde ses champs dans le formulaire : l'envoi porte
   tout, quelle que soit la section affichee. */
.em-fsections .em-fsec       { display: none; }
.em-fsections .em-fsec--on   { display: block; }
/* Le titre de section ferait doublon avec l'onglet actif. */
.em-fsections .em-fsec > .em-meta:first-child { display: none; }
@media (max-width: 780px) { .em-fnav { grid-auto-flow: row; } }

/* Voile de chargement d'un apercu. La mise en page vit ICI et non en attribut
   style : un display en ligne l'emporte sur .hidden, et le voile resterait
   affiche par-dessus le document, empechant de le faire defiler. */
.em-voile { position: absolute; inset: 0; display: flex; align-items: center;
            justify-content: center; background: var(--em-surface); z-index: 10; }
.em-voile.hidden { display: none; }

/* ---------------------------------------------------------------
   15. CASE A COCHER
   Une case nue de navigateur ne se voit pas dans une carte : elle est
   grise, minuscule, et sa legende flotte a cote sans lui appartenir. Ici
   la case ET son explication forment UNE zone cliquable, qui verdit quand
   elle est retenue - meme grammaire que les choix exclusifs du parcours.
   --------------------------------------------------------------- */
.em-check {
  display: flex; align-items: flex-start; gap: var(--em-sp-3);
  padding: 13px 15px; border: 1px solid var(--em-border);
  border-radius: var(--em-radius-control); background: var(--em-surface);
  cursor: pointer; transition: background 120ms ease, border-color 120ms ease;
}
.em-check:hover { background: var(--em-surface-alt); }
.em-check:has(input:checked) { background: var(--em-brand-soft); border-color: var(--em-brand-border); }
.em-check:has(input:disabled) { cursor: not-allowed; opacity: .7; }

.em-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 18px; height: 18px; margin: 1px 0 0;
  border: 1px solid #c9ced5; border-radius: 5px; background: var(--em-surface);
  cursor: inherit; position: relative;
  transition: background 120ms ease, border-color 120ms ease;
}
.em-check input[type="checkbox"]:checked { background: var(--em-brand); border-color: var(--em-brand); }
/* Le crochet : deux traits, pas une image - il suit la couleur du texte. */
.em-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(43deg);
}
.em-check input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--em-focus-ring); }

.em-check__titre { display: block; font-size: 13.5px; font-weight: 500; color: var(--em-ink); }
.em-check__note  { display: block; font-size: 12.5px; color: var(--em-muted);
                   line-height: 1.5; margin-top: 3px; }
.em-check:has(input:checked) .em-check__titre { color: var(--em-brand-strong); }

/* ---------------------------------------------------------------
   16. CHOIX EXCLUSIF EN CASES
   Meme grammaire que .em-seg (un seul retenu), mais en cases larges
   qu'on vise vite : la modalite, la duree d'un rendez-vous. Au repos
   elles sont blanches ; la retenue passe en VERT. La charte remplit
   a l'encre (.em-seg-b--on) et reserve le vert a l'action : ecart
   assume, ces cases vivent a cote d'un calendrier et de creneaux dont
   le retenu est deja vert - deux facons de dire "c'est celui-la" dans
   le meme regard se liraient comme deux etats.

   Ne .ci-choix dans create_invitation.php ; promu ici le 16-09-2026
   quand la modale de replanification a eu besoin des memes cases -
   sans quoi elle en aurait recopie une version.

   La case est le frere suivant d'un <input class="peer sr-only">,
   comme les :checked de Tailwind : c'est l'etat de la radio qui la
   colore, sans JS.
   --------------------------------------------------------------- */
.em-choix { padding: 11px 14px; border: 1px solid var(--em-border); border-radius: var(--em-radius-control);
            background: var(--em-surface); color: var(--em-muted); text-align: center;
            font-size: 13.5px; transition: background .12s, border-color .12s, color .12s; }
.em-choix:hover { background: var(--em-brand-soft); border-color: var(--em-brand-border); color: var(--em-brand); }
.peer:checked ~ .em-choix { background: var(--em-brand); border-color: var(--em-brand); color: #fff; font-weight: 600; }
/* Les quarts d'heure intercalaires (1 h 15, 1 h 45) : presents, mais en
   retrait - plus petits et plus pales, pour que les heures pleines restent
   ce que l'oeil vise en premier. Retenus, ils se remplissent comme les autres. */
.em-choix--duree { padding-left: 4px; padding-right: 4px; white-space: nowrap; }
.em-choix--inter { font-size: 12px; color: var(--em-faint); }
.peer:focus-visible ~ .em-choix { box-shadow: var(--em-focus-ring); }

/* Creneau intercalaire (:15, :45) : un bouton secondaire en retrait, comme
   la duree intercalaire ci-dessus. Retenu (--primary), il redevient blanc
   sur vert comme les autres. */
.em-btn--inter { font-size: 12px; color: var(--em-faint); }
.em-btn--inter.em-btn--primary { color: #fff; }

/* ---------------------------------------------------------------
   17. ATTENTE : l'anneau qui tourne
   Le mouvement n'est jamais l'information : sous prefers-reduced-motion
   l'anneau se ferme et reste pose, le texte a cote dit ce qu'on attend.
   --------------------------------------------------------------- */
@keyframes em-tourne { to { transform: rotate(360deg); } }
.em-spin { width: 36px; height: 36px; border-radius: 50%; flex: none;
           border: 2px solid var(--em-brand); border-top-color: transparent;
           animation: em-tourne .8s linear infinite; }
.em-spin--sm { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
    .em-spin { animation: none; border-top-color: var(--em-brand); }
    .em-choix { transition: none; }
}

/* ---------------------------------------------------------------
   18. COMPTEUR : une tuile qui compte et qui filtre
   Nee avec la page « Ma journee » (17-09-2026) : cinq compteurs qui
   font defiler vers leur section et n'y laissent que leurs lignes. C'est
   un <button> parce qu'il AGIT ; a zero il est eteint (disabled) et ne
   se dispute plus l'oeil avec ceux qui ont quelque chose a dire.
   --on : le filtre est pose sur ce compteur (remplace le ring-2 de
   Tailwind que le JS posait). --danger : le nombre alerte (urgents,
   retard), et seulement s'il est superieur a zero.
   --------------------------------------------------------------- */
.em-compteurs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--em-sp-3); }
@media (max-width: 780px) { .em-compteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.em-compteur {
  display: flex; flex-direction: column; align-items: center; gap: var(--em-sp-1);
  padding: var(--em-sp-4) var(--em-sp-3);
  background: var(--em-surface); border: 1px solid var(--em-border);
  border-radius: var(--em-radius-inner); font-family: inherit; cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.em-compteur:hover:not(:disabled) { border-color: var(--em-muted); }
.em-compteur:focus-visible { outline: none; box-shadow: var(--em-focus-ring); }
.em-compteur__n { font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--em-ink); letter-spacing: -0.01em; }
.em-compteur__l { font-size: 11px; color: var(--em-muted); text-transform: uppercase; letter-spacing: 0.09em; }
.em-compteur--danger                { border-color: var(--em-danger-border); }
.em-compteur--danger .em-compteur__n { color: var(--em-danger); }
.em-compteur--on,
.em-compteur--on:hover:not(:disabled) { border-color: var(--em-brand); background: var(--em-brand-soft); box-shadow: var(--em-focus-ring); }
.em-compteur:disabled { cursor: default; background: var(--em-surface-alt); border-color: var(--em-border-soft); }
.em-compteur:disabled .em-compteur__n { color: var(--em-placeholder); }
.em-compteur:disabled .em-compteur__l { color: var(--em-faint); }

/* ---------------------------------------------------------------
   19. LISTE COMPACTE : des lignes qui portent chacune une action
   Plus serree que .em-table (une ligne de rappel, un rendez-vous, un
   appel manque), et sans en-tete de colonnes. Le conteneur ne pose pas
   de display : le JS de la page peut le masquer par .hidden. Une ligne
   se lit de gauche a droite comme une phrase : l'etat (pastille), le
   corps (libelle + meta), les actions (boutons du socle).
   --------------------------------------------------------------- */
.em-liste { border: 1px solid var(--em-border-soft); border-radius: var(--em-radius-inner); overflow: hidden; }
.em-liste__tete {
  display: flex; align-items: center; justify-content: space-between; gap: var(--em-sp-2);
  padding: var(--em-sp-2) var(--em-sp-3); background: var(--em-surface-alt);
  border-bottom: 1px solid var(--em-border-soft);
}
/* Sous-titre de groupe (« En retard », « Aujourd'hui »), meme voix que .em-colhead. */
.em-liste__groupe {
  padding: 5px var(--em-sp-3); background: var(--em-surface-alt);
  font-size: 11px; color: var(--em-muted); text-transform: uppercase; letter-spacing: 0.09em;
}
.em-liste__groupe--danger { color: var(--em-danger); background: var(--em-danger-soft); }
/* Le filet est porte par la ligne, jamais par le sous-titre : ainsi une ligne
   qui suit un sous-titre ou l'en-tete ne double pas son trait. */
.em-liste__ligne {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--em-sp-2) var(--em-sp-3);
  padding: var(--em-sp-2) var(--em-sp-3); border-top: 1px solid var(--em-line);
  transition: background-color 120ms ease;
}
.em-liste__ligne:hover { background: var(--em-surface-alt); }
.em-liste > .em-liste__ligne:first-child { border-top: 0; }
/* Le corps garde une largeur lisible ; dans une colonne etroite, ce sont les
   actions qui passent a la ligne (alignees a droite), pas le nom qui s'ecrase. */
.em-liste__corps   { flex: 1 1 160px; min-width: 0; }
.em-liste__actions { display: flex; align-items: center; gap: var(--em-sp-2); flex: none; margin-left: auto; }
/* La pastille en tete de ligne garde sa largeur quand le corps se tronque. */
.em-liste__ligne > .em-pastille { flex: none; }

/* ---------------------------------------------------------------
   20. JAUGE : une progression continue
   .em-progress compte des etapes ; la jauge dit une part (3 sur 7
   actions traitees). Le vert de la marque, reserve au succes, y est a sa
   place. Sous prefers-reduced-motion la barre se pose sans glisser.
   --------------------------------------------------------------- */
.em-jauge       { height: 8px; border-radius: var(--em-radius-pill); background: var(--em-border-soft); overflow: hidden; }
.em-jauge__fill { height: 100%; border-radius: var(--em-radius-pill); background: var(--em-brand); transition: width 300ms ease; }

/* Une jauge qui mesure un PLAFOND (le quota d'un depot) et non un avancement :
   le vert du succes n'y a plus de sens en approchant de la limite - remplir
   n'est pas reussir. Deux modificateurs, poses par l'appelant a partir du
   taux : attention des trois quarts, limite quand il n'y a plus de place. */
.em-jauge__fill--attention { background: var(--em-warning); }
.em-jauge__fill--limite    { background: var(--em-danger); }

/* Bouton qui VALIDE (« Fait », « Traité », « Reçu ») : neutre au repos, vert
   au survol. Decision du 25-07-2026 : un bouton vert au repos se lit comme
   deja fait ; le vert n'apparait qu'au moment du geste. */
.em-btn--secondary.em-btn--ton-valider:hover:not(:disabled) {
  background: var(--em-brand-soft); border-color: var(--em-brand); color: var(--em-brand); }

/* Lien dans le texte (un nom de patient qui ouvre ses notes) : il garde la
   couleur de son texte et ne se signale qu'au survol. */
.em-lien       { color: inherit; text-decoration: none; }
.em-lien:hover { color: var(--em-brand); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .em-compteur, .em-liste__ligne, .em-jauge__fill { transition: none; }
}

/* ---------------------------------------------------------------
   99. .hidden : on rend la main
   tailwind.css declare .hidden{display:none} AVANT cette feuille. A
   specificite egale, c'est la DERNIERE regle qui gagne : nos classes de
   composants, qui posent un display, laissaient donc visible un element
   pourtant marque "hidden". Le tableau de bord contournait ca par un
   .hidden{display:none !important} pose en fin de page - un !important
   qui ecrasait du meme coup toutes les variantes responsives de Tailwind
   (hidden lg:block restait masque a toute largeur).
   Chaque composant rend la main explicitement : deux classes battent une.
   --------------------------------------------------------------- */
.em-badge.hidden, .em-btn.hidden, .em-card__header.hidden, .em-check.hidden,
.em-check__note.hidden, .em-check__titre.hidden, .em-field.hidden, .em-fnav.hidden,
.em-grp.hidden, .em-menu__item.hidden, .em-modal__foot.hidden, .em-pastille.hidden,
.em-progress.hidden, .em-seg.hidden, .em-steps.hidden, .em-voile.hidden,
.em-compteur.hidden, .em-compteurs.hidden, .em-liste__tete.hidden, .em-liste__ligne.hidden,
.em-liste__actions.hidden, .ia-liste.hidden { display: none; }

/* ---------------------------------------------------------------------
   21. Grille de widgets (Ma journee, 17-09-2026)
   Les cartes remplissent la largeur quel que soit leur nombre : trois cartes
   font trois colonnes, une seule prend toute la ligne. Une carte large
   (.em-widget--large : les actions par patient) prend deux colonnes quand
   il y a la place, et redevient simple des que la grille n'en a qu'une.
   --------------------------------------------------------------------- */
.em-widgets        { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
                     gap: 20px; align-items: start; }
.em-widget--large  { grid-column: span 2; }
@media (max-width: 720px) { .em-widget--large { grid-column: auto; } }

/* ---------------------------------------------------------------
   Icone des traitements de l'en-tete (24-09-2026, js/traitements_suivi.js).
   Un anneau qui tourne tant qu'un traitement tourne ; la liste s'ouvre au
   survol ou au clic. Remplace le bandeau vert de suivi de generation.
   --------------------------------------------------------------- */
.trt-anneau {
    display: inline-block; width: 18px; height: 18px; border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .22); border-top-color: #34d399;
    animation: trt-tour .9s linear infinite;
}
.trt-anneau--petit { width: 14px; height: 14px; border-width: 2px;
    border-color: var(--em-border); border-top-color: var(--em-brand); }
@keyframes trt-tour { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .trt-anneau { animation-duration: 3s; } }
.trt-item { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--em-border-soft); }
.trt-item:first-child { border-top: 0; }
.trt-patient { display: block; font-size: 13px; font-weight: 600; color: var(--em-ink); }
.trt-detail { display: block; font-size: 12px; color: var(--em-muted); margin-top: 2px; line-height: 1.4; }
.trt-lien { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--em-brand);
    text-decoration: underline; text-underline-offset: 3px; }
.trt-vide { padding: 16px; font-size: 13px; color: var(--em-muted); }