/* ORIZON Care — charte 2ACI : vert #33B04A, jaune #EDE947, noir #231F20. */
:root{
  --brand-rgb:51,176,74;
  --gold-rgb:237,233,71;
  --brand:rgb(var(--brand-rgb));
  --encre:#231F20;
  --texte:#22262b;
  --doux:#6b7280;
  --fond:#f4f6f8;
  --panel:#fff;
  --bord:#e3e8ee;
  --ok:#1a7f3c;
  --alerte:#b45309;
  --stop:#b91c1c;
  --rayon:12px;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--fond);color:var(--texte);font-size:15px;line-height:1.5}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Liens : une seule manière de réagir dans toute l'app ─────────────────
   Les liens de CONTENU (dans un paragraphe, une cellule, une carte) prennent
   un soulignement qui se déploie au survol, tracé en vert→or — la même paire
   que le sceau et la barre de navigation. Les liens de CHÂSSIS (sidebar,
   topbar, boutons, cloche, logo, lignes cliquables) gardent leur propre langage
   et sont explicitement exclus : les harmoniser tous à l'identique effacerait
   la hiérarchie. */
.contenu a:not(.btn):not(.badge):not(.carte-lien):not([class*="chip"]){
  text-decoration:none;
  background-image:linear-gradient(90deg, rgb(var(--brand-rgb)), rgb(var(--gold-rgb)));
  background-repeat:no-repeat;background-position:0 100%;
  background-size:0% 2px;padding-bottom:1px;
  transition:background-size .25s ease}
.contenu a:not(.btn):not(.badge):not(.carte-lien):not([class*="chip"]):hover{
  background-size:100% 2px}
@media (prefers-reduced-motion:reduce){
  .contenu a:not(.btn):not(.badge):not(.carte-lien):not([class*="chip"]){
    transition:none}}

/* Anneau de focus unique : même trait au clavier pour liens, boutons, champs.
   L'accessibilité est aussi une forme d'harmonie. */
a:focus-visible,.btn:focus-visible,button:focus-visible,
summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid rgba(var(--brand-rgb),.55);outline-offset:2px;
  border-radius:6px}

/* ── Structure & navigation ───────────────────────────────────────────────
   La sidebar était PLATE : 20 liens d'affilée, aucun repère, aucune profondeur.
   Refonte : la marque soignée en tête, la navigation GROUPÉE par section avec
   des sous-menus repliables (accordéon), une icône par entrée, et de la matière
   (dégradé sombre, filet de marque, pastille active en relief). */
.app{display:flex;min-height:100vh}
.sidebar{width:262px;flex-shrink:0;display:flex;flex-direction:column;
  color:#eef1f4;position:sticky;top:0;height:100vh;overflow-y:auto;
  /* Profondeur : dégradé vertical + une lueur de marque très basse. */
  background:
    radial-gradient(420px 220px at 12% 108%, rgba(var(--brand-rgb),.22), transparent 70%),
    linear-gradient(180deg, #2a2628 0%, var(--encre) 46%, #1c1a1b 100%);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.05), 2px 0 14px rgba(0,0,0,.10)}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}

/* Bloc marque : logo posé sur une pastille claire (le lockup a du texte vert
   foncé, illisible sur fond sombre), marque à côté, filet vert→or dessous. */
.sidebar .marque{position:relative;display:flex;align-items:center;gap:12px;
  padding:18px 18px 20px}
.sidebar .marque::after{content:"";position:absolute;left:18px;right:18px;bottom:0;
  height:2px;border-radius:2px;
  background:linear-gradient(90deg, rgb(var(--brand-rgb)), rgb(var(--gold-rgb)), transparent)}
.sidebar .logo-chip{flex:none;width:52px;height:52px;border-radius:13px;
  background:#fff;display:grid;place-items:center;padding:7px;
  box-shadow:0 4px 12px rgba(0,0,0,.28)}
/* Spécificité (0,3,1) : bat le `.logo-chip img{height:30px}` générique défini
   plus bas, quel que soit l'ordre de source. */
.sidebar .marque .logo-chip img{width:100%;height:auto;display:block}
.sidebar .marque-txt strong{display:block;font-size:17px;font-weight:800;
  letter-spacing:.2px;line-height:1.1}
.sidebar .marque-txt small{color:rgba(255,255,255,.55);font-size:11px;
  letter-spacing:.3px}

/* Navigation groupée. */
.nav{padding:10px 10px 14px;flex:1}
.nav-groupe{margin-bottom:2px}
.nav-titre{width:100%;display:flex;align-items:center;gap:8px;
  background:none;border:0;cursor:pointer;color:rgba(255,255,255,.5);
  font:inherit;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;padding:12px 10px 7px}
.nav-titre span{flex:1;text-align:left}
.nav-titre:hover{color:rgba(255,255,255,.8)}
.nav-titre .chev{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  transform:rotate(90deg);transition:transform .22s ease;opacity:.8}
.nav-groupe.replie .nav-titre .chev{transform:rotate(0deg)}
/* Pastille du groupe replié qui contient la page courante : sans elle, replier
   « son » groupe fait disparaître le seul repère de position. */
.nav-titre .pt{display:none;flex:none;width:6px;height:6px;border-radius:50%;
  background:rgb(var(--brand-rgb));box-shadow:0 0 0 3px rgba(var(--brand-rgb),.22)}
.nav-groupe.actif.replie .nav-titre .pt{display:block}

/* Sous-menu repliable. La HAUTEUR est pilotée en JS (inline), pas par une règle
   `!important` qui écraserait l'animation : ouvert = pas de contrainte (hauteur
   auto), fermé = `max-height:0` posé inline. La classe `.replie` ne sert plus
   qu'au chevron. La transition n'est armée (`.anime`) qu'après le 1er rendu,
   pour qu'un groupe fermé au chargement ne « tombe » pas sous les yeux. */
.nav-liens{overflow:hidden;display:flex;flex-direction:column;gap:2px}
.nav-liens.anime{transition:max-height .26s ease}

.nav-liens a{display:flex;align-items:center;gap:11px;
  padding:9px 11px;border-radius:9px;color:rgba(255,255,255,.78);
  font-size:13.5px;line-height:1.2;position:relative;transition:background .15s ease,color .15s ease}
.nav-liens a .ico{flex:none;width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.nav-liens a span{flex:1;min-width:0}
.nav-liens a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav-liens a:hover .ico{opacity:1}
/* Entrée active : pastille en relief, teintée de marque, avec un onglet vert. */
.nav-liens a.actif{color:#fff;font-weight:600;
  background:linear-gradient(90deg, rgba(var(--brand-rgb),.30), rgba(var(--brand-rgb),.12));
  box-shadow:inset 0 0 0 1px rgba(var(--brand-rgb),.35)}
.nav-liens a.actif::before{content:"";position:absolute;left:-1px;top:6px;bottom:6px;
  width:3px;border-radius:3px;
  background:linear-gradient(180deg, rgb(var(--brand-rgb)), rgb(var(--gold-rgb)))}
.nav-liens a.actif .ico{opacity:1;stroke-width:2.1}
.sidebar a:focus-visible{outline:2px solid rgba(var(--gold-rgb),.7);outline-offset:-2px}

.sidebar .pied{padding:12px 14px 14px;font-size:11.5px;color:rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.sidebar .pied .etat{display:flex;align-items:center;gap:7px;min-width:0}
.sidebar .pied .point{flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.25)}
.sidebar .pied .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reduire{flex:none;width:28px;height:28px;padding:0;border:0;border-radius:8px;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);cursor:pointer;
  display:grid;place-items:center;transition:background .15s ease,color .15s ease}
.reduire:hover{background:rgba(255,255,255,.14);color:#fff}
.reduire svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.reduire[aria-pressed="true"] svg{transform:rotate(180deg)}

.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--panel);border-bottom:1px solid var(--bord);
  padding:14px 24px;display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:30;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.topbar h1{margin:0;font-size:17px;font-weight:600}
.topbar .droite{margin-left:auto;display:flex;align-items:center;gap:14px;
  font-size:13px;color:var(--doux)}
.contenu{padding:22px 24px;max-width:1180px;width:100%}

/* Bouton menu (hamburger) : caché sur desktop, révélé quand la sidebar passe en
   tiroir. */
.menu-bascule{display:none;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:38px;padding:9px;border:1px solid var(--bord);border-radius:9px;
  background:var(--panel);cursor:pointer}
.menu-bascule span{display:block;height:2px;border-radius:2px;background:var(--encre);
  transition:transform .25s ease, opacity .2s ease}
.menu-bascule[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-bascule[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-bascule[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.voile-menu{position:fixed;inset:0;z-index:39;background:rgba(16,24,40,.42);border:0}

/* ── Mode RAIL : la sidebar réduite aux icônes ────────────────────────────
   Volontairement cantonné au BUREAU. Sous 900 px la sidebar est déjà un tiroir
   qui se ferme entièrement : y superposer un rail donnerait deux mécanismes de
   réduction concurrents pour le même geste. */
@media(min-width:901px){
  .sidebar.rail{width:74px}
  .sidebar.rail .marque{justify-content:center;padding:16px 8px 18px}
  .sidebar.rail .marque::after{left:14px;right:14px}
  .sidebar.rail .marque-txt{display:none}
  .sidebar.rail .logo-chip{width:46px;height:46px;border-radius:12px;padding:6px}
  .sidebar.rail .nav{padding:8px 8px 12px}
  /* Les titres disparaissent : c'est un filet qui sépare désormais les groupes. */
  .sidebar.rail .nav-titre{display:none}
  .sidebar.rail .nav-groupe + .nav-groupe{margin-top:9px;padding-top:9px;
    border-top:1px solid rgba(255,255,255,.09)}
  .sidebar.rail .nav-liens a{justify-content:center;padding:11px 0}
  /* Le libellé est masqué : l'attribut `title` du gabarit fournit l'infobulle
     ET le nom accessible de repli. */
  .sidebar.rail .nav-liens a span{display:none}
  .sidebar.rail .nav-liens a.actif::before{left:2px}
  .sidebar.rail .pied{justify-content:center;padding:12px 8px 14px}
  .sidebar.rail .pied .etat{display:none}
}

/* Sous 900 px : la sidebar devient un tiroir qui glisse par-dessus le contenu. */
@media(max-width:900px){
  /* Le rail n'a pas de sens dans un tiroir : le bouton s'efface. */
  .reduire{display:none}
  .sidebar{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);
    transition:transform .28s ease;box-shadow:2px 0 24px rgba(0,0,0,.28)}
  body.menu-ouvert .sidebar{transform:translateX(0)}
  body.menu-ouvert .voile-menu{display:block}
  .menu-bascule{display:flex}
}
@media(prefers-reduced-motion:reduce){
  .sidebar{transition:none}.nav-titre .chev{transition:none}
  .nav-liens.anime{transition:none}}

/* ── Panneaux ────────────────────────────────────────────────────────── */
.panel{background:var(--panel);border:1px solid var(--bord);
  border-radius:var(--rayon);padding:18px;margin-bottom:18px}
.panel h2{margin:0 0 14px;font-size:15px;font-weight:600;
  padding-left:10px;border-left:3px solid var(--brand)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:980px){.grid-2{grid-template-columns:1fr}}

/* ── Verdict de couverture ───────────────────────────────────────────── */
.verdict{border-radius:var(--rayon);padding:20px 22px;margin-bottom:18px;
  display:flex;align-items:center;gap:18px;color:#fff}
.verdict.oui{background:linear-gradient(120deg,#1a7f3c,#33B04A)}
.verdict.non{background:linear-gradient(120deg,#991b1b,#dc2626)}
.verdict .pastille{font-size:34px;line-height:1}
.verdict h2{margin:0 0 3px;font-size:20px;border:0;padding:0}
.verdict p{margin:0;opacity:.92;font-size:13px}

/* Un bouton qui a l'air d'un lien : l'action est SECONDAIRE (écarter une
   notification), et un vrai bouton lui donnerait le poids d'un « Enregistrer ».
   C'est bien un <button> dans un <form> — donc une action POST, pas un lien
   qu'un aspirateur de pages pourrait déclencher en le suivant. */
.lien-bouton{background:none;border:0;padding:0;font:inherit;font-size:12px;
  color:var(--doux);cursor:pointer;text-decoration:underline}
.lien-bouton:hover{color:var(--encre)}

/* ── Onglets du bas — téléphone ──────────────────────────────────────────
   ⭐ Les quatre portails externes (prestataire, assuré, entreprise,
   compagnie) portaient 8 à 9 liens de texte dans leur entête. Enroulés, ils
   tenaient sur TROIS lignes et mangeaient le tiers de l'écran avant la
   moindre information — mesuré : 370 px d'entête sur un écran de 812.

   La navigation descend donc en bas, en onglets à icônes : là où le pouce
   l'atteint, et là où toute app de santé la place. C'est le geste qu'on
   attend d'une application, pas d'un site consulté au téléphone.

   ⚠️ Bâti sur `<details>` pour le tiroir « Plus » : aucun JavaScript, donc la
   barre survit à l'échec d'un script, et le clavier l'ouvre nativement. */
.onglets{display:none}
.sur-petit{display:none}
@media(max-width:640px){
  .sur-grand{display:none}
  .sur-petit{display:block}
  .onglets{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--panel);border-top:1px solid var(--bord);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 14px rgba(0,0,0,.06)}
  .onglets a{flex:1;display:flex;flex-direction:column;align-items:center;
    gap:3px;padding:5px 2px;font-size:10.5px;color:var(--doux);
    text-decoration:none;border-radius:10px;min-height:48px;
    justify-content:center;text-align:center}
  /* ⚠️ 48 px de haut : en deçà, la cible tactile passe sous le seuil où un
     doigt vise juste, et le comptoir ouvre le mauvais écran. */
  .onglets a svg{width:22px;height:22px;stroke:currentColor;fill:none;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .onglets a.actif{color:var(--brand);background:rgba(var(--brand-rgb),.10)}
  .onglets .pastille-notif{position:absolute;transform:translate(12px,-10px)}
  .onglets details{flex:1}
  .onglets summary{list-style:none;display:flex;flex-direction:column;
    align-items:center;gap:3px;padding:5px 2px;font-size:10.5px;
    color:var(--doux);cursor:pointer;min-height:48px;justify-content:center}
  .onglets summary::-webkit-details-marker{display:none}
  .onglets summary svg{width:22px;height:22px;stroke:currentColor;fill:none;
    stroke-width:1.8}
  .onglets details[open] summary{color:var(--brand)}
  .onglets details > div{position:fixed;left:0;right:0;bottom:64px;
    background:var(--panel);border-top:1px solid var(--bord);
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;gap:2px;
    box-shadow:0 -8px 24px rgba(0,0,0,.12)}
  .onglets details > div a{flex-direction:row;justify-content:flex-start;
    gap:10px;font-size:14px;padding:11px 12px;color:var(--encre)}
  .onglets details > div a svg{width:19px;height:19px}
}

/* ── Tableaux sur petit écran ────────────────────────────────────────────
   `.table-wrap` reste le bon geste : il dit explicitement « ce tableau
   défile ». Mais 26 gabarits sur 60 portent au moins une table sans lui, et
   les corriger un par un laisserait le 27e passer demain sans que rien ne le
   signale — c'est exactement la faiblesse d'une couverture posée à la main.
   Cette règle est le FILET : sous 640 px, tout tableau devient sa propre zone
   de défilement plutôt que de pousser la page entière de côté.

   ⚠️ `display:block` sur un `<table>` conserve l'alignement des colonnes :
   `thead`/`tbody` gardent leur rôle de table et le navigateur recrée la boîte
   de table anonyme autour d'eux.
   ⚠️ Bornée à l'ÉCRAN : à l'impression, un tableau doit se poser entier sur
   la feuille, pas devenir une bande qui défile. */
@media screen and (max-width:640px){
  table{display:block;overflow-x:auto;max-width:100%;
        -webkit-overflow-scrolling:touch}
}

/* ── Anomalies ───────────────────────────────────────────────────────── */
.anomalie{padding:10px 14px;border-radius:8px;margin-bottom:8px;font-size:13px;
  border-left:4px solid}
.anomalie.bloquant{background:#fef2f2;border-color:var(--stop);color:#7f1d1d}
.anomalie.alerte{background:#fffbeb;border-color:var(--alerte);color:#78350f}

/* ── Pagination ──────────────────────────────────────────────────────────
   La position dans l'ensemble (« 51 à 100 sur 2 001 ») est à GAUCHE et les
   commandes à droite : on lit d'abord où l'on est, on agit ensuite. */
.pagination{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--bord)}

/* ── Pièces jointes d'une contestation ───────────────────────────────────
   Une pièce se voit et s'ouvre : elle ne se devine pas derrière un compteur.
   Le trombone donne la nature de l'objet, le nom donne ce que c'est. */
.pieces-jointes{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.piece{display:inline-flex;align-items:center;gap:4px;max-width:100%;
  font-size:12px;padding:3px 9px;border-radius:20px;
  background:rgba(var(--brand-rgb),.10);color:#166534;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.piece:hover{background:rgba(var(--brand-rgb),.20);text-decoration:none}

/* ── Parcours d'émission ─────────────────────────────────────────────────
   Le fil d'Ariane numéroté du progiciel concurrent, mais chaque jalon est
   MESURÉ dans les données. On garde donc la numérotation — elle dit un ordre
   habituel — sans la barre horizontale : un jalon manquant doit porter sa
   PORTE (le lien qui le remplit), ce qu'une frise horizontale ne permet pas. */
/* ── Fil d'étapes ────────────────────────────────────────────────────────
   Né au portail comptoir (Carte → Patient → Actes → Ordonnance), remonté ici
   pour servir aussi aux écrans internes : un formulaire long se parcourt mieux
   en étapes qu'en déroulant jusqu'en bas.
   ⚠️ Il s'enroule sur mobile plutôt que de déborder — le comptoir travaille
   aussi sur un téléphone. */
.parcours{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.parcours li{display:flex;align-items:center;gap:7px;font-size:13px;
  padding:7px 13px;border-radius:999px;border:1px solid var(--bord);
  color:var(--doux);background:var(--panel)}
.parcours .pas{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--bord);
  color:var(--encre);font-size:11.5px;font-weight:700}
.parcours li.fait{color:var(--ok);border-color:rgba(var(--brand-rgb),.35)}
/* Une étape faite est un CHEMIN DE RETOUR : elle doit se voir cliquable. */
.parcours li.fait a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.parcours li.fait:hover{background:rgba(var(--brand-rgb),.08)}
.parcours li.fait .pas{background:rgba(var(--brand-rgb),.15);color:var(--ok)}
.parcours li.courant{color:var(--encre);font-weight:600;
  border-color:rgba(var(--brand-rgb),.6);background:rgba(var(--brand-rgb),.08)}
.parcours li.courant .pas{background:var(--brand);color:#fff}
/* Une étape à venir n'est pas cliquable : elle n'a pas encore de destination. */
.parcours li[aria-disabled="true"]{opacity:.75}

/* ── Les sections d'un formulaire parcouru en étapes ──────────────────────
   ⚠️ `.etape[hidden]` doit être écrit : `[hidden]{display:none}` du navigateur
   est une règle de la feuille par DÉFAUT, que n'importe quelle règle auteur
   bat. C'est pour la même raison que `.grid-2{display:grid}` reste sur un
   <div> À L'INTÉRIEUR de la section, jamais sur la section elle-même.
   (Précédent maison : `.pastille-notif[hidden]`, plus bas.)
   ⚠️ Aucune transition : la bascule est instantanée. Un glissement ferait
   décoller la barre collante, rognerait les bulles de validation natives et
   casserait le défilement horizontal du tableau des garanties. */
.etape[hidden]{display:none}
/* La barre du haut est collante : sans cette marge, le titre de l'étape qu'on
   vient d'atteindre se range DERRIÈRE elle.
   🪤 Sa hauteur n'est PAS une constante. Mesurée : 52 px sur poste, mais 157 px
   sur un écran de 375 px, où `.topbar{flex-wrap:wrap}` la replie sur trois
   rangs. Une valeur en dur — même « généreuse » — masquerait donc le titre
   exactement là où le parcours sert le plus. `etapes.js` renseigne la variable
   à partir de la barre réelle ; le repli à 72 px ne sert qu'avant sa première
   mesure, et sans JavaScript rien ne défile de toute façon. */
.etape{scroll-margin-top:var(--barre-collante, 72px)}
.etape:focus{outline:none}
.etape-actions{display:flex;gap:10px;justify-content:flex-end;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--bord)}
.etape-position{margin:-10px 0 16px}
.recap-liste{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;
  margin:0 0 4px;font-size:14px}
.recap-liste dt{color:var(--doux)}
.recap-liste dd{margin:0;font-weight:600}
.brouillon-repris{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-left-color:var(--or,#EDE947)}
@media(max-width:640px){
  /* Le pouce vise mal : les deux boutons prennent toute la largeur et la
     hauteur minimale d'une cible tactile. */
  .etape-actions{flex-direction:row}
  .etape-actions .btn{flex:1;min-height:48px}
  /* 🪤 Sous 16 px, Safari iOS ZOOME à chaque champ touché — et ne dézoome
     pas. La feuille sert 14 px ailleurs ; dans un parcours, ce zoom ferait
     perdre le fil à chaque étape. */
  .etape input,.etape select,.etape textarea{font-size:16px}
}

/* 🪤 Le panneau « parcours d'émission » porte un nom voisin mais n'a RIEN à
   voir avec le fil ci-dessus. Sans ce suffixe, `.parcours{display:flex}`
   transformerait le panneau en rangée horizontale le jour où les deux se
   croisent sur un même écran. */
.parcours-emission h2{display:flex;align-items:center;gap:10px}
.parcours-score{font-size:12px;font-weight:700;letter-spacing:.5px;
  background:#fef3c7;color:#92400e;border-radius:20px;padding:2px 10px}
.parcours-score.ok{background:#dcfce7;color:#166534}
.jalons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:8px;counter-reset:jalon}
.jalon{display:flex;align-items:center;gap:14px;padding:11px 14px;
  border:1px solid var(--bord);border-radius:10px;background:#fff;
  /* Le liseré gauche porte l'état : gris = à faire, vert = constaté. */
  box-shadow:inset 3px 0 0 #d5dbe1}
.jalon.fait{box-shadow:inset 3px 0 0 rgb(var(--brand-rgb))}
.jalon.alerte{box-shadow:inset 3px 0 0 var(--stop);background:#fffbfb}
.jalon-num{flex:none;width:26px;height:26px;border-radius:50%;display:grid;
  place-items:center;font-size:12px;font-weight:700;background:#eef1f4;
  color:var(--doux)}
.jalon.fait .jalon-num{background:rgba(var(--brand-rgb),.15);color:#166534}
.jalon.alerte .jalon-num{background:#fee2e2;color:#991b1b}
.jalon-corps{flex:1;min-width:0}
.jalon-tete{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.jalon-valeur{font-size:12.5px;color:var(--doux);font-variant-numeric:tabular-nums}
.jalon.fait .jalon-valeur{color:var(--ok);font-weight:600}
.jalon.alerte .jalon-valeur{color:var(--stop);font-weight:600}
.jalon-detail{font-size:12.5px;color:var(--doux);margin-top:2px;line-height:1.5}
.jalon .btn{flex:none}
@media(max-width:700px){
  .jalon{flex-wrap:wrap}
  .jalon .btn{width:100%;text-align:center}
}

/* ── Foyers (annuaire des adhérents) ─────────────────────────────────────
   L'unité de ce métier est le FOYER : un adhérent principal et les siens. Le
   bloc porte donc la famille entière — la tête posée sur un fond distinct, les
   ayants droit dans un tableau en retrait. On voit d'un coup qui commande le
   contrat et qui en dépend, ce qu'une liste à plat ne montrait jamais. */
.foyer{background:var(--panel);border:1px solid var(--bord);
  border-radius:var(--rayon);margin-bottom:12px;overflow:hidden}
.foyer-tete{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding:12px 16px;background:#fafbfc;
  border-bottom:1px solid var(--bord);
  /* Le liseré vert relie visuellement la tête au reste du bloc. */
  box-shadow:inset 3px 0 0 rgb(var(--brand-rgb))}
.foyer-qui{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.foyer-nom{font-size:15.5px;font-weight:600;color:var(--texte)}
.foyer-nom:hover{color:var(--brand)}
.foyer-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:12px;color:var(--doux)}
.foyer-membres{margin:0}
.foyer-membres th{background:#fff}
.foyer-membres td,.foyer-membres th{padding-left:16px}
.foyer-membres tr:last-child td{border-bottom:0}
/* Un foyer dont la tête est sortie reste lisible, mais s'efface. */
.foyer-sorti .foyer-tete{box-shadow:inset 3px 0 0 var(--doux)}
.foyer-sorti .foyer-nom{color:var(--doux)}
/* Ce qui a répondu à la recherche : marqué, jamais crié. */
.surligne{background:rgba(var(--gold-rgb),.45);border-radius:4px;
  padding:1px 4px;font-weight:600}

/* Barre de filtres : les critères sur une ligne, le bouton au bout. */
.filtres-foyers{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.champ-inline{display:flex;flex-direction:column;gap:4px;margin:0;min-width:0}
.champ-inline > span{font-size:11px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--doux)}
.champ-inline select,.champ-inline input{min-width:220px}
.champ-inline.grand{flex:1}
.champ-inline.grand input{width:100%;min-width:240px}
.filtres-foyers .case{margin-bottom:9px}

/* ── En-têtes triables ───────────────────────────────────────────────────
   La flèche est TOUJOURS présente, même sur les colonnes non triées : sinon
   rien ne dit qu'on peut cliquer, et la fonction reste invisible. Elle est
   simplement plus discrète tant que la colonne n'est pas celle qui classe. */
th a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;
  gap:5px;white-space:nowrap}
th a:hover{color:var(--accent)}
.tri-fleche{font-size:11px;opacity:.35;line-height:1}
th a:hover .tri-fleche{opacity:.7}
.tri-actif{color:var(--accent)}
.tri-actif .tri-fleche{opacity:1}

/* Formulaire en colonnes : chaque champ porte son étiquette au-dessus, ce qui
   reste lisible sur un écran étroit sans réécrire la grille. */
.grille-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px}
.grille-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;
  color:var(--doux)}
.grille-form input,.grille-form select{font-size:14px;padding:8px 10px}

/* ── Menu d'actions par ligne ────────────────────────────────────────────
   Bâti sur <details>/<summary> : aucun JavaScript, donc il fonctionne même
   si un script échoue, et le clavier l'ouvre nativement (Entrée/Espace).
   Le conteneur de la ligne doit rester au-dessus de ses voisines quand le
   menu est ouvert, d'où le z-index sur l'état [open]. */
.menu-actions{position:relative;display:inline-block}
.menu-actions[open]{z-index:30}
.menu-actions>summary{list-style:none;cursor:pointer;user-select:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:26px;border:1px solid var(--bord);border-radius:7px;
  background:var(--panel);color:var(--doux);font-size:15px;line-height:1}
.menu-actions>summary::-webkit-details-marker{display:none}
.menu-actions>summary:hover{border-color:var(--accent);color:var(--texte)}
.menu-actions-liste{position:absolute;right:0;top:30px;min-width:250px;
  background:var(--panel);border:1px solid var(--bord);border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.14);padding:6px;text-align:left}
.menu-actions-liste a,
.menu-actions-liste button{display:block;width:100%;text-align:left;
  padding:8px 10px;border:0;background:none;border-radius:7px;font-size:13px;
  color:var(--texte);cursor:pointer;text-decoration:none;font-family:inherit}
.menu-actions-liste a:hover,
.menu-actions-liste button:hover{background:var(--fond)}
/* Le rouge est réservé à ce qui retire un accès : le voir ailleurs le
   banaliserait, et on finirait par cliquer sans lire. */
.menu-actions-liste button.danger{color:var(--stop)}
.menu-actions-liste form{margin:0}
.menu-actions-liste hr{border:0;border-top:1px solid var(--bord);margin:5px 2px}

/* ── Hors de la compagnie hôte ───────────────────────────────────────────
   Volontairement RAYÉ et non simplement coloré : la plateforme sert la
   gestion interne d'UNE compagnie, et travailler sur les données d'une autre
   est un état qu'on ne doit pas pouvoir oublier en cours de lecture. Un
   liseré discret se serait fondu dans le décor au bout de deux écrans. */
.bandeau-hors-hote{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;margin-bottom:14px;border-radius:8px;font-size:13px;
  color:#78350f;border:1px solid var(--alerte);
  background:repeating-linear-gradient(135deg,#fffbeb,#fffbeb 12px,
    #fef3c7 12px,#fef3c7 24px)}
.bandeau-hors-hote form{margin-left:auto}
.bandeau-hors-hote .btn{background:#fff}

/* ── KPI / enveloppes ────────────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px}
.kpi{background:var(--panel);border:1px solid var(--bord);border-radius:10px;
  padding:14px 16px}
.kpi .titre{font-size:12px;color:var(--doux);margin-bottom:4px}
.kpi .valeur{font-size:22px;font-weight:600}
.kpi .sous{font-size:11px;color:var(--doux);margin-top:3px}
.kpi.attn{border-left:4px solid var(--stop)}
.jauge{height:7px;background:#eef1f4;border-radius:4px;margin-top:9px;overflow:hidden}
.jauge span{display:block;height:100%;background:var(--brand);border-radius:4px}
.jauge.chaud span{background:var(--alerte)}
.jauge.plein span{background:var(--stop)}

/* ── Tableaux ────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--bord)}
th{font-weight:600;color:var(--doux);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.4px;background:#fafbfc}
tbody tr:hover{background:#fafbfc}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.exclu td{opacity:.55}

/* ── Badges & boutons ────────────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;
  font-weight:600;white-space:nowrap}
.badge-ok{background:#dcfce7;color:#166534}
.badge-non{background:#fee2e2;color:#991b1b}
.badge-warn{background:#fef3c7;color:#92400e}
.badge-info{background:rgba(var(--brand-rgb),.13);color:#166534}
.badge-neutre{background:#eef1f4;color:#475569}
.btn{display:inline-block;padding:9px 16px;border-radius:8px;border:1px solid var(--bord);
  background:var(--panel);font-size:14px;cursor:pointer;font-family:inherit}
.btn:hover{background:#f7f9fa;text-decoration:none}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.btn-primary:hover{filter:brightness(.94);background:var(--brand)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ── Formulaires ─────────────────────────────────────────────────────── */
label{display:block;font-size:12.5px;color:var(--doux);margin-bottom:4px}
input,select{width:100%;padding:9px 11px;border:1px solid var(--bord);
  border-radius:8px;font-size:14px;font-family:inherit;background:#fff}
input:focus,select:focus{outline:2px solid rgba(var(--brand-rgb),.35);border-color:var(--brand)}
.champ{margin-bottom:12px}
/* 🪤 Sans `flex-wrap`, une barre de filtres à trois champs déborde l'écran d'un
   téléphone : mesuré à 616 px de contenu dans un panneau de 327. Invisible au
   bureau, et sur mobile elle poussait TOUTE la page en défilement horizontal —
   le pire défaut d'un écran de comptoir, qu'on tient d'une main. */
.barre-recherche{display:flex;gap:10px;flex-wrap:wrap}
.barre-recherche input{flex:1;min-width:170px}
/* ⚠️ `min-width:auto` est le défaut d'un enfant flex : un `<select>` au
   contenu large refuse alors de rétrécir et déborde à son tour. */
.barre-recherche select,.barre-recherche .btn,
.barre-recherche button{min-width:0}

/* ── Login ───────────────────────────────────────────────────────────────
   Reprise de l'identité d'ORIZON Connect (2aci-souscription-auto) : halo doré
   en haut, dégradé de marque en diagonale, carte blanche à liseré vert→or,
   logo aéré, séparateur « CONNEXION », libellés en petites capitales.
   🔑 Un utilisateur passe de Connect à Care dans la même journée : deux pages
   de connexion différentes lui feraient croire à deux fournisseurs. */
.login-page{display:flex;align-items:center;justify-content:center;
  min-height:100vh;padding:24px;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(var(--gold-rgb),.20), transparent 62%),
    linear-gradient(155deg, rgb(var(--brand-rgb)) 0%,
      rgba(var(--brand-rgb),.80) 52%, rgba(0,0,0,.42) 145%)}
.login-carte{position:relative;background:#fff;border-radius:18px;
  padding:40px 34px 26px;width:384px;max-width:92vw;text-align:center;
  overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.login-carte::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg, rgb(var(--brand-rgb)), rgb(var(--gold-rgb)))}
.login-logo{width:172px;margin:4px auto 16px}
.login-logo img{width:100%;height:auto;display:block}
.login-marque{font-size:27px;font-weight:800;color:var(--brand);
  letter-spacing:-.3px;line-height:1.1}
.login-compagnie{font-size:13.5px;font-weight:600;color:#2b2b2b;margin-top:5px}
.login-slogan{color:var(--doux);font-size:12.5px;margin-top:2px}
.login-sep{display:flex;align-items:center;gap:12px;margin:24px 0 16px}
.login-sep::before,.login-sep::after{content:"";flex:1;height:1px;
  background:var(--bord)}
.login-sep span{font-size:11px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--doux)}
.login-form{text-align:left}
.login-carte .champ{margin-top:14px}
.login-carte .champ > label{display:block;font-size:11px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:var(--doux);
  margin-bottom:6px}
.login-carte .champ input{padding:12px 14px;border-radius:10px}
.login-carte .btn{width:100%;margin-top:22px;padding:13px;font-size:15px;
  border-radius:10px}
.login-pied{margin-top:22px;font-size:11.5px;color:var(--doux)}
.erreur{background:#fef2f2;color:#991b1b;padding:9px 12px;border-radius:8px;
  font-size:13px;margin-bottom:14px;text-align:left}

/* ── Chargement : UN seul vocabulaire pour toute l'app ────────────────────
   Le splash d'ORIZON Connect posait une barre qui glisse sous un monogramme.
   Care garde le principe (la marque pendant l'attente) mais en plus soigné :
   un ARC vert→or qui balaie autour du logo — le « sceau » — décliné sur trois
   surfaces qui parlent la même langue :
     · #voile     attente au submit des pages PUBLIQUES (login, activation) ;
     · #splash    premier écran d'une session INTERNE (une fois, puis plus) ;
     · #barre-nav fine progression en haut, à CHAQUE navigation interne.
   Cohérence : mêmes couleurs, même courbe, même respect de reduced-motion. */

/* Le sceau : le logo dans un anneau conique qui tourne, battement discret. */
.sceau{position:relative;width:128px;height:128px;display:grid;place-items:center}
.sceau::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(var(--brand-rgb),0) 0deg, rgba(var(--brand-rgb),.12) 70deg,
    rgb(var(--brand-rgb)) 290deg, rgb(var(--gold-rgb)) 360deg);
  -webkit-mask:radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 calc(100% - 5px));
          mask:radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 calc(100% - 5px));
  animation:sceau-tourne 1s linear infinite}
.sceau img{width:80px;height:auto;display:block;
  animation:sceau-battement 1.7s ease-in-out infinite}
@keyframes sceau-tourne{to{transform:rotate(1turn)}}
@keyframes sceau-battement{0%,100%{transform:scale(.96)}50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){
  .sceau::before{animation-duration:2.8s}
  .sceau img{animation:none}}

/* Voile public : l'attente au submit est réelle (le login interroge le
   référentiel), on la montre plutôt que de laisser un bouton mort. */
.voile-chargement{position:fixed;inset:0;z-index:9998;
  background:rgba(255,255,255,.94);
  display:none;align-items:center;justify-content:center;
  opacity:0;transition:opacity .22s ease}
.voile-chargement.on{display:flex;opacity:1}
/* Ancien nom conservé le temps de la bascule : le voile reste utilisable si un
   gabarit porte encore .loader-marque. */
.loader-marque{width:128px;height:128px;display:grid;place-items:center}

/* Splash interne : même sceau + la marque, une seule fois par session. */
.splash{position:fixed;inset:0;z-index:10000;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:
    radial-gradient(820px 460px at 50% 32%, rgba(var(--gold-rgb),.13), transparent 60%),
    #ffffff;
  transition:opacity .5s ease}
html.demarre .splash{display:flex}
html.demarre.fondu .splash{opacity:0;pointer-events:none}
.splash-marque{text-align:center;line-height:1.15;
  font-family:"Segoe UI",Roboto,system-ui,sans-serif}
.splash-marque b{display:block;font-size:23px;font-weight:800;color:var(--brand)}
.splash-marque span{display:block;margin-top:4px;font-size:11px;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--doux)}
@media (prefers-reduced-motion:reduce){.splash{transition:none}}

/* Barre de navigation : la respiration commune à TOUS les liens internes.
   Un clic → elle pousse à ~90 % ; la page suivante la remplace. Perçue comme
   de la vitesse, sur chaque déplacement, sans jamais bloquer. */
.barre-nav{position:fixed;top:0;left:0;height:3px;width:0;z-index:10001;
  border-radius:0 3px 3px 0;opacity:0;pointer-events:none;
  background:linear-gradient(90deg, rgb(var(--brand-rgb)), rgb(var(--gold-rgb)));
  box-shadow:0 0 8px rgba(var(--brand-rgb),.55);
  transition:width .28s ease, opacity .3s ease}
.barre-nav.on{opacity:1}
@media (prefers-reduced-motion:reduce){.barre-nav{transition:opacity .2s ease}}

/* ── Login : ce que Care ajoute au gabarit de Connect ─────────────────────
   Le squelette ci-dessus ne bouge pas. Ce qui suit répond à des situations que
   Connect ne rencontre pas : on se connecte à Care depuis un COMPTOIR
   (pharmacie, clinique, cabinet) sur un réseau qui tombe, sur un téléphone, et
   QUATRE publics externes entrent par la même porte. */

/* Signature « santé » : un tracé cardiaque effacé, tracé une seule fois au
   chargement. Assez discret pour ne pas concurrencer la carte, assez présent
   pour qu'on ne confonde pas Care avec Connect au premier regard. */
.login-page{position:relative;overflow:hidden}
.trace-ecg{position:absolute;left:0;right:0;bottom:7vh;height:110px;
  pointer-events:none;opacity:.17}
.trace-ecg svg{width:100%;height:100%;display:block}
.trace-ecg path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:1500;stroke-dashoffset:1500;
  animation:ecg 2.4s .3s ease-out forwards}
@keyframes ecg{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .trace-ecg path{animation:none;stroke-dashoffset:0}}

/* Œil afficher/masquer DANS le champ : un mot de passe de 12 caractères tapé
   sur un clavier de téléphone, au comptoir, ne se vérifie pas autrement. */
/* La boîte est posée par le script AUTOUR du seul input : ancrer l'œil sur
   `.champ-mdp` le ferait chevaucher l'avertissement VERR. MAJ qui s'ouvre
   dessous. */
.boite-mdp{position:relative;display:block}
/* Spécificité : `.login-carte .champ input` pose un `padding` raccourci qui
   écraserait un `padding-right` moins spécifique. */
.login-carte .champ-mdp input{padding-right:46px}
.oeil{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;
  background:none;padding:0;cursor:pointer;color:var(--doux);display:flex;
  align-items:center;justify-content:center;border-radius:8px}
.oeil:hover{background:#f3f5f7;color:var(--brand)}
.oeil:focus-visible{outline:2px solid rgba(var(--brand-rgb),.55);outline-offset:1px}
.oeil svg{width:19px;height:19px;display:block}

/* Avertissement sous un champ (VERR. MAJ) et bandeau réseau. */
.indice-champ{display:none;margin-top:6px;font-size:11.5px;font-weight:600;
  color:#92400e;background:#fffbeb;border-left:3px solid #f59e0b;
  padding:5px 8px;border-radius:0 6px 6px 0}
.indice-champ.on{display:block}
.bandeau-reseau{display:none;margin-bottom:14px;font-size:12.5px;text-align:left;
  background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;border-radius:10px;
  padding:9px 12px}
.bandeau-reseau.on{display:block}

/* Mémoriser l'identifiant — jamais le mot de passe. */
.login-options{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:14px;font-size:12px}
.case{display:flex;align-items:center;gap:7px;margin:0;cursor:pointer;
  font-weight:600;color:var(--doux)}
.case input{width:auto;margin:0;accent-color:rgb(var(--brand-rgb))}

/* ── Bouton occupé : le geste attend, et ça se voit ───────────────────────
   ⭐ Généralisé à TOUT bouton d'envoi (02/08/2026). La règle ne visait que
   `.btn`, et seule la page d'activation la posait : les 103 autres boutons
   d'envoi de la plateforme — accorder une prise en charge, déposer une
   facture, régler un bordereau — ne rendaient RIEN. Sur une liaison de
   comptoir, un bouton muet se reclique, et un second POST part.

   🪤 On ne met JAMAIS `disabled` : un bouton désactivé n'est plus envoyé avec
   le formulaire, et plusieurs écrans portent la DÉCISION dans le bouton
   lui-même (`name="statut" value="rejete"`). Neutraliser le second clic se
   fait donc en CSS (`pointer-events`) et en JS, pas par `disabled`. */
.btn.occupe, button.occupe{position:relative;color:transparent;
  pointer-events:none}
.btn.occupe::after, button.occupe::after{content:"";position:absolute;
  top:50%;left:50%;width:17px;height:17px;margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:tourne .7s linear infinite}
/* 🔑 Un bouton SECONDAIRE a un fond clair : un anneau blanc y serait
   invisible — on aurait remplacé un bouton muet par un bouton vide. Il tourne
   donc dans la couleur de marque. */
.btn.occupe:not(.btn-primary):not(.danger)::after,
button.occupe:not(.btn-primary):not(.danger)::after{
  border-color:rgba(var(--brand-rgb),.28);
  border-top-color:rgb(var(--brand-rgb))}
@keyframes tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn.occupe::after, button.occupe::after{animation-duration:2.4s}}

/* Une porte, quatre espaces. Sans cette ligne, un pharmacien qui reçoit le lien
   se demande s'il est au bon endroit. */
.login-espaces{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin-top:18px}
.login-espaces span{font-size:10.5px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--doux);background:#f4f6f8;
  border-radius:20px;padding:4px 10px}
.login-aide{margin-top:14px;font-size:12px;text-align:left}
.login-aide summary{cursor:pointer;color:var(--brand);font-weight:700;
  list-style:none;text-align:center}
.login-aide summary::-webkit-details-marker{display:none}
.login-aide summary:hover{text-decoration:underline}
.login-aide summary:focus-visible{outline:2px solid rgba(var(--brand-rgb),.55);
  outline-offset:2px;border-radius:4px}
.login-aide p{margin:10px 0 0;color:var(--doux);line-height:1.55}

/* Activation : les règles se cochent en direct. Un lien à usage unique ne se
   gaspille pas dans un aller-retour serveur. */
.regles-mdp{list-style:none;margin:10px 0 0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:4px 12px}
.regles-mdp li{display:flex;align-items:center;gap:6px;font-size:11.5px;
  color:var(--doux)}
.regles-mdp li::before{content:"○";font-size:13px;line-height:1;color:#c7ced4}
.regles-mdp li.ok{color:var(--brand)}
.regles-mdp li.ok::before{content:"●";color:rgb(var(--brand-rgb))}
.jauge{height:4px;border-radius:3px;background:#eef1f4;margin-top:12px;
  overflow:hidden}
.jauge i{display:block;height:100%;width:0;border-radius:3px;background:#ef4444;
  transition:width .25s ease,background .25s ease}
.jauge.n1 i{width:25%}
.jauge.n2 i{width:52%;background:#f59e0b}
.jauge.n3 i{width:78%;background:#84cc16}
.jauge.n4 i{width:100%;background:rgb(var(--brand-rgb))}
.echeance{font-size:11.5px;color:var(--doux);margin-top:6px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ── Cloche ──────────────────────────────────────────────────────────── */
.cloche{position:relative;font-size:17px;text-decoration:none;line-height:1}
.cloche:hover{text-decoration:none}
.pastille-notif{position:absolute;top:-6px;right:-9px;background:var(--stop);
  color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  padding:0 4px}
/* ⚠️ `display:flex` ci-dessus ÉCRASE le `display:none` que le navigateur
   applique à l'attribut `hidden` : sans cette règle, la pastille reste visible
   en affichant « 0 » même quand il n'y a rien à lire. Spécificité (0,2,0) donc
   pas besoin de !important. */
.pastille-notif[hidden]{display:none}
.notif{display:flex;gap:12px;padding:12px 14px;border:1px solid var(--bord);
  border-radius:10px;margin-bottom:8px;background:var(--panel)}
.notif.non-lue{border-left:4px solid var(--brand);background:#fbfdfc}
.notif .corps{flex:1;min-width:0}
.notif .titre{font-weight:600;font-size:14px}
.notif .texte{font-size:13px;color:var(--doux);margin-top:2px}
.notif .quand{font-size:11.5px;color:var(--doux);white-space:nowrap}
.notif.urgent{border-left-color:var(--stop)}
.notif.alerte{border-left-color:var(--alerte)}
.notif.succes{border-left-color:var(--ok)}

.muted{color:var(--doux)}
.petit{font-size:12px}
.mono{font-variant-numeric:tabular-nums}

/* ── Logo de marque ──────────────────────────────────────────────────────
   ⚠️ Le lockup AOA porte un texte VERT FONCÉ sur fond transparent : posé tel
   quel sur un en-tête sombre, la raison sociale devient illisible. D'où la
   « chip » blanche — même solution que sur le login d'ORIZON Insight. Sur fond
   clair (carte de connexion, carte d'assuré imprimable), le logo va directement. */
.logo-chip{background:#fff;border-radius:9px;padding:5px 9px;display:inline-flex;
  align-items:center;flex-shrink:0}
.logo-chip img{display:block;height:30px;width:auto}
.logo-clair img,img.logo-clair{display:block;height:52px;width:auto;max-width:100%}
@media(max-width:640px){.logo-chip img{height:24px}}

/* ── Lignes cliquables ───────────────────────────────────────────────────
   Une ligne qui mène quelque part doit LE DIRE avant qu'on clique : curseur,
   survol appuyé, liseré de marque et chevron. Sans signal visuel, la
   fonctionnalité existe sans que personne ne la découvre.
   Cf. static/js/lignes_cliquables.js */
tr[data-href]{cursor:pointer}
tbody tr[data-href]:hover{background:rgba(var(--brand-rgb),.07)}
tbody tr[data-href]:hover td:first-child{box-shadow:inset 3px 0 0 rgba(var(--brand-rgb),.55)}
tbody tr[data-href]:focus-visible{outline:2px solid rgba(var(--brand-rgb),.65);
  outline-offset:-2px}
/* Chevron ajouté en CSS : aucun tableau n'a de colonne à rajouter pour ça. */
tbody tr[data-href] td:last-child{position:relative}
tbody tr[data-href] td:last-child::after{content:'\203A';position:absolute;
  right:3px;top:50%;transform:translateY(-50%);color:var(--doux);
  font-size:17px;line-height:1;opacity:0;transition:opacity .12s}
tbody tr[data-href]:hover td:last-child::after,
tbody tr[data-href]:focus-visible td:last-child::after{opacity:.7}
/* Pas de chevron quand la dernière cellule porte déjà un bouton ou un lien :
   il viendrait se superposer à l'affordance existante. */
tbody tr[data-href] td:last-child:has(a,button,form,input)::after{content:none}
@media print{tbody tr[data-href] td:last-child::after{display:none}}

/* ═══════════════════════════════════════════════════════════════════
   VISITE GUIDÉE
   🔑 Le trou est fait par une OMBRE INTÉRIEURE géante, pas par un
   découpage : aucun calcul de masque, et la zone éclairée reste
   parfaitement nette quel que soit le zoom du navigateur.
   ═══════════════════════════════════════════════════════════════════ */
.guide-voile{position:fixed;inset:0;z-index:9000;display:none}
.guide-voile.ouvert{display:block}
.guide-trou{position:fixed;border-radius:8px;
  box-shadow:0 0 0 9999px rgba(15,26,20,.66);
  transition:top .22s ease,left .22s ease,width .22s ease,height .22s ease;
  pointer-events:none;outline:3px solid var(--or,#EDE947);outline-offset:0}
.guide-carte{position:fixed;width:min(23rem,calc(100vw - 1rem));
  background:var(--carte,#fff);color:var(--encre,#231F20);
  border-radius:8px;padding:1rem 1.15rem 1.05rem;
  font-family:"Futura","Futura PT","Century Gothic","Avenir Next","Trebuchet MS",system-ui,sans-serif;
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  transition:top .22s ease,left .22s ease}
.guide-compteur{margin:0 0 .35rem;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted,#6B7269);font-weight:700}
.guide-titre{margin:0 0 .5rem;font-size:1.1rem;line-height:1.25;font-weight:700}
.guide-titre::after{content:"";display:block;width:36px;height:4px;border-radius:2px;
  background:var(--or,#EDE947);margin-top:.45rem}
.guide-texte{margin:0 0 .9rem;font-size:.94rem;line-height:1.55;
  color:var(--muted,#6B7269)}
.guide-actions{display:flex;align-items:center;gap:.5rem}
.guide-espace{flex:1}
.guide-actions button{font:inherit;font-size:.88rem;cursor:pointer;
  border-radius:6px;padding:.42rem .85rem;border:1px solid var(--trait,#E3E8E1);
  background:transparent;color:inherit}
/* 🪤 `.guide-actions button` (0,1,1) battait `.guide-suivant` (0,1,0) : bouton principal
   BLANC. Qualifié par le conteneur ; texte NOIR charte sur le vert (5,8:1 contre 2,8:1). */
.guide-actions .guide-passer{color:var(--muted,#6B7269)}
.guide-actions .guide-suivant{background:var(--vert,#33B04A);border-color:var(--vert,#33B04A);
  color:#231F20;font-weight:700}
.guide-actions button:focus-visible{outline:2px solid var(--vert,#33B04A);
  outline-offset:2px}
/* Discret par nature : on le trouve quand on le cherche, il n'attire pas
   l'œil de celui qui travaille. */
.guide-rejouer{font-size:.82rem;color:var(--muted,#6B7269);
  text-decoration:none;border-bottom:1px dotted currentColor}
.guide-rejouer:hover{color:var(--vert,#33B04A)}
@media (prefers-reduced-motion:reduce){
  .guide-trou,.guide-carte{transition:none}
}

/* ══════════════════════════════════════════════════════════════════
   MISE EN ROUTE — où en est linstallation

/* ══════════════════════════════════════════════════════════════════
   MISE EN ROUTE — où en est l'installation de cette compagnie
   ══════════════════════════════════════════════════════════════════
   Le bandeau vit dans la barre latérale, juste au-dessus du pied. Il est
   DISCRET par construction : c'est un rappel, pas une injonction — et il
   disparaît tout seul quand les dix gestes sont faits. */
.mer-bandeau{display:flex;gap:9px;align-items:flex-start;margin:6px 10px 0;
  padding:10px 11px;border-radius:11px;text-decoration:none;
  background:rgba(var(--brand-rgb),.13);
  border:1px solid rgba(var(--brand-rgb),.28);
  color:inherit;transition:background .15s ease,border-color .15s ease}
.mer-bandeau:hover{background:rgba(var(--brand-rgb),.22);
  border-color:rgba(var(--brand-rgb),.45)}
.mer-bandeau .ico{width:17px;height:17px;flex:0 0 17px;margin-top:1px;
  fill:none;stroke:currentColor;stroke-width:1.8;opacity:.85}
.mer-txt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.mer-txt b{font-size:.8rem;font-weight:650;letter-spacing:.01em}
.mer-pct{font-size:.72rem;opacity:.8;font-variant-numeric:tabular-nums}
/* Une seule ligne, tronquée : le titre complet reste dans l'infobulle du lien
   et sur l'écran dédié. Un rappel qui prend quatre lignes n'est plus discret. */
.mer-suite{font-size:.7rem;opacity:.72;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
/* Réduit au rail : plus que la pastille. Le libellé masqué reste accessible
   par le `title` du lien. */
.sidebar.reduite .mer-bandeau{justify-content:center;padding:9px 0;margin:6px 8px 0}
.sidebar.reduite .mer-txt{display:none}

/* La jauge, partagée entre le bandeau et l'écran. */
.mer-barre{display:block;height:5px;border-radius:99px;overflow:hidden;
  background:rgba(127,127,127,.28)}
.mer-barre>span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,rgb(var(--brand-rgb)),rgb(var(--gold-rgb)));
  transition:width .4s ease}
.panel>.mer-barre{height:9px;margin-top:12px}

/* L'écran : une liste numérotée où le numéro devient une coche. */
.mer-liste{list-style:none;margin:8px 0 0;padding:0;display:flex;
  flex-direction:column;gap:2px}
.mer-etape{display:flex;gap:12px;align-items:flex-start;padding:11px 4px;
  border-top:1px solid var(--bord)}
.mer-etape:first-child{border-top:0}
.mer-puce{flex:0 0 26px;height:26px;border-radius:50%;display:grid;
  place-items:center;font-size:.78rem;font-weight:650;
  background:rgba(127,127,127,.16);color:var(--txt-doux);
  font-variant-numeric:tabular-nums}
.mer-etape.faite .mer-puce{background:rgba(var(--brand-rgb),.18);
  color:rgb(var(--brand-rgb))}
.mer-corps{min-width:0;flex:1}
.mer-titre{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-weight:600}
.mer-corps p{margin:3px 0 0}
/* 🔑 Barrer le titre d'une étape FAITE : c'est le geste qui dit « c'est
   derrière vous » sans avoir à lire. Mais on ne barre pas l'explication —
   elle reste utile pour comprendre à quoi servait l'étape. */
.mer-etape.faite .mer-titre a,
.mer-etape.faite .mer-titre span:not(.badge){text-decoration:line-through;
  opacity:.62}

@media (prefers-reduced-motion:reduce){
  .mer-barre>span{transition:none}
}

/* ── Filtrer un tableau sur place ─────────────────────────────────────────
   Posé par `filtre_tableau.js`, jamais écrit dans un gabarit : le champ
   n'apparaît que si le tableau est assez long pour le mériter. */
.filtre-tableau{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.filtre-tableau input{flex:1;max-width:340px;font-size:13.5px;padding:8px 11px}
.filtre-tableau .petit{white-space:nowrap;font-variant-numeric:tabular-nums}
/* ⚠️ Un tableau qui se vide sans un mot laisse croire à une panne. */
.filtre-tableau .rien{color:var(--warn);font-weight:600}
@media(max-width:640px){
  .filtre-tableau input{max-width:none}
}

/* ── L'ACCUEIL : l'outil par rubrique ─────────────────────────────────────
   ⭐ Une carte par métier, pas une liste de 35 liens. La rubrique unique
   « Portefeuille » comptait 18 entrées : au-delà d'une dizaine, un menu ne se
   lit plus, il se parcourt — le contraire de ce qu'un menu doit faire.

   🔑 Chaque rubrique porte une TEINTE, posée sur un liseré et le titre. Elle
   n'est pas décorative : elle donne à l'écran une géographie stable, et c'est
   elle qu'on retient (« la carte verte, à gauche ») bien avant le libellé.
   Toutes sont tirées de la charte 2ACI ou de ses voisines — pas de palette
   d'emprunt. */
.hub-entete{margin:0 0 18px}
.hub-entete h1{margin:0 0 4px;font-size:24px;font-weight:600;letter-spacing:-.2px}
.hub{display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.hub-carte{background:var(--panel);border:1px solid var(--bord);
  border-radius:var(--rayon);padding:18px 20px 14px;
  border-top:3px solid var(--accent,var(--brand));
  display:flex;flex-direction:column}
.hub-titre{display:flex;align-items:center;gap:10px;margin-bottom:2px}
/* Emblème de rubrique : une pastille teintée de la couleur du métier. Elle
   sert de repère — on revient sur « Règlement » par sa forme avant d'avoir lu
   son titre. Dessinée au trait, jamais illustrée : une vignette de personnage
   n'apprend rien du contenu et vieillit mal. */
.hub-emb{flex:none;width:38px;height:38px;border-radius:11px;display:grid;
  place-items:center;background:color-mix(in srgb,var(--accent,var(--brand)) 12%,#fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,var(--brand)) 22%,#fff)}
.hub-emb svg{width:22px;height:22px;stroke:var(--accent,var(--brand));fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
/* Repli pour les navigateurs sans `color-mix` : la pastille reste lisible. */
@supports not (background:color-mix(in srgb,#000 10%,#fff)){
  .hub-emb{background:#f2f5f7;box-shadow:inset 0 0 0 1px var(--bord)}
}
.hub-titre h2{margin:0;font-size:19px;font-weight:600;color:var(--accent,var(--brand))}
.hub-phrase{margin:0 0 14px;font-size:13px;color:var(--doux);line-height:1.5}
.hub-liens{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:1px}
.hub-liens li{display:flex;align-items:baseline;gap:10px;
  padding:7px 8px;margin:0 -8px;border-radius:7px}
.hub-liens li:hover{background:rgba(var(--brand-rgb),.06)}
.hub-liens a{color:var(--texte);font-size:14.5px;flex:1}
.hub-liens a:hover{color:var(--accent,var(--brand))}
/* Le nombre ET ce qu'il attend : « 12 » seul ne dit pas s'il faut agir. */
.hub-attente{font-size:11.5px;color:var(--alerte);font-weight:600;
  white-space:nowrap;font-variant-numeric:tabular-nums}
/* Le detail d'une file passe SOUS le lien, sur toute la largeur : c'est une
   phrase d'aide a la decision, pas une seconde pastille. */
.hub-liens li{flex-wrap:wrap}
.hub-detail{flex-basis:100%;margin:1px 0 2px;font-size:12px;
  color:var(--doux);line-height:1.5}
.hub-detail strong{color:var(--alerte);font-weight:650}
.hub-comptoir{--accent:#1a7f3c}
.hub-production{--accent:#0e7490}
.hub-reseau{--accent:#7c3aed}
.hub-reglement{--accent:#b45309}
.hub-comptabilite{--accent:#a16207}
.hub-pilotage{--accent:#b91c1c}
.hub-administration{--accent:#475569}
@media(max-width:640px){
  .hub{grid-template-columns:1fr}
  .hub-carte{padding:16px}
}

/* Le bloc marque est un LIEN vers l'accueil (voir base.html). Il ne doit pas
   pour autant ressembler à un lien de contenu : ni couleur de marque, ni
   soulignement — le châssis a son propre langage. */
.sidebar a.marque{color:inherit;text-decoration:none}
.sidebar a.marque:hover{text-decoration:none;background:rgba(255,255,255,.04)}
.sidebar a.marque:focus-visible{outline:2px solid rgba(var(--gold-rgb),.75);
  outline-offset:-2px}

/* ── « À quoi sert cet écran ? » ───────────────────────────────────────────
   ⭐ Discret par construction : un liseré, pas un panneau. Un encart d'aide
   qui pèse autant que le contenu finit par n'être plus lu du tout — y compris
   le jour où il dit quelque chose d'important. */
.aide-ecran{background:rgba(var(--brand-rgb),.05);
  border:1px solid rgba(var(--brand-rgb),.22);
  border-left:3px solid var(--brand);
  border-radius:10px;margin:0 0 16px;font-size:13.5px}
.aide-ecran>summary{cursor:pointer;padding:10px 14px;font-weight:600;
  color:var(--ok);list-style:none;user-select:none}
.aide-ecran>summary::-webkit-details-marker{display:none}
/* Le chevron dit dans quel sens ça va s'ouvrir — sans lui, un `summary` sans
   puce ne se signale plus comme cliquable.
   🪤 Écrit en échappement CSS et non en caractère : passé au shell dans une
   commande entre guillemets, le caractère perdait ses guillemets et la règle
   devenait invalide — en silence, le chevron disparaissait simplement. */
.aide-ecran>summary::before{content:"\203A";display:inline-block;margin-right:8px;
  transition:transform .18s ease;font-weight:700}
.aide-ecran[open]>summary::before{transform:rotate(90deg)}
.aide-ecran>summary:hover{text-decoration:underline}
.aide-ecran>summary:focus-visible{outline:2px solid rgba(var(--brand-rgb),.55);
  outline-offset:2px;border-radius:8px}
.aide-corps{padding:0 14px 12px 30px}
.aide-role{margin:0 0 10px;font-weight:600;color:var(--texte)}
.aide-corps dl{margin:0;display:grid;grid-template-columns:150px 1fr;
  gap:5px 14px;align-items:baseline}
.aide-corps dt{color:var(--doux);font-size:12px;text-transform:uppercase;
  letter-spacing:.03em;font-weight:700}
.aide-corps dd{margin:0;color:var(--texte);line-height:1.5}
/* L'erreur que tout le monde commet la première fois : c'est la seule partie
   qu'on relit, elle mérite d'être trouvable d'un coup d'œil. */
.aide-corps .aide-piege{color:var(--alerte)}
@media(prefers-reduced-motion:reduce){
  .aide-ecran>summary::before{transition:none}
}
@media(max-width:640px){
  .aide-corps{padding-left:14px}
  .aide-corps dl{grid-template-columns:1fr;gap:2px}
  .aide-corps dd{margin-bottom:8px}
}

/* -- Le vocabulaire des colonnes ------------------------------------------
   Un terme du glossaire porte un pointille : discret quand on lit le tableau,
   trouvable quand on cherche. Sur le MOT, jamais sur la cellule entiere --
   sur une colonne large, un souligne de cellule designerait le vide.
   ⚠️ Seuls les termes du dictionnaire sont marques. Tout marquer apprendrait
   a ne plus voir les marqueurs, y compris sur les quinze termes dont la
   mauvaise lecture coute de l'argent. */
.terme{border-bottom:1px dotted currentColor;cursor:help;text-decoration:none}
.terme:hover{border-bottom-style:solid}
.terme:focus-visible{outline:2px solid rgba(var(--brand-rgb),.55);
  outline-offset:2px;border-radius:3px}
.glossaire-bulle{position:absolute;z-index:70;max-width:320px;
  background:var(--encre);color:#fff;font-size:12.5px;line-height:1.5;
  font-weight:400;text-transform:none;letter-spacing:normal;
  padding:9px 12px;border-radius:9px;
  box-shadow:0 8px 26px rgba(0,0,0,.28);pointer-events:none}
.glossaire-bulle[hidden]{display:none}
@media(max-width:640px){.glossaire-bulle{max-width:min(320px,calc(100vw - 24px))}}

/* -- Aller a une reference -------------------------------------------------
   Une seule zone de saisie, dans la barre de titre, presente partout. Elle
   accepte une reference (le papier qu'on a sous les yeux) OU un nom.
   ⭐ Placee au centre et non dans le coin droit : c'est le geste le plus
   frequent d'un gestionnaire, pas un accessoire de compte. */
.topbar .aller-a{flex:1;max-width:340px;margin:0 16px}
.topbar .aller-a input{width:100%;padding:7px 12px;font-size:13.5px;
  border-radius:999px;border:1px solid var(--bord);background:var(--fond)}
.topbar .aller-a input:focus{background:#fff}
@media(max-width:900px){
  .topbar .aller-a{max-width:none;margin:0 10px}
}
@media(max-width:640px){
  /* Sur telephone la barre de titre est deja pleine : la zone passe sous le
     titre plutot que de comprimer les deux. */
  .topbar{flex-wrap:wrap}
  .topbar .aller-a{order:9;flex-basis:100%;margin:8px 0 2px;max-width:none}
}

/* -- Que faire de ce contrat : des cibles, pas un tableau ---------------- */
.gestes{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.gestes a{display:block;padding:12px 14px;border:1px solid var(--bord);
  border-radius:10px;background:var(--panel);color:var(--texte)}
.gestes a:hover{border-color:var(--brand);background:rgba(var(--brand-rgb),.05);
  text-decoration:none}
.gestes strong{display:block;margin-bottom:2px}
.gestes .petit{display:block;line-height:1.45}
/* Legende des prefixes reconnus : une description, pas des donnees. */
.legende-prefixes{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;
  margin:12px 0 0;align-items:baseline}
.legende-prefixes dt{font-size:13px;color:var(--texte)}
.legende-prefixes dd{margin:0;font-size:13px;color:var(--doux)}
@media(max-width:520px){
  .legende-prefixes{grid-template-columns:1fr;gap:1px 0}
  .legende-prefixes dd{margin-bottom:8px}
}

/* -- Decider une duree de conservation, ligne a ligne -------------------- */
.ligne-duree{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ligne-duree input[type=number]{width:82px;padding:6px 8px;font-size:13px}
.ligne-duree input[name=motif]{flex:1;min-width:150px;padding:6px 8px;font-size:12.5px}
/* Un bouton qui doit se lire comme un lien : l action est secondaire et ne
   merite pas le poids visuel d un bouton plein. */
.lien-bouton{background:none;border:0;padding:0;font:inherit;font-size:inherit;
  color:var(--brand);cursor:pointer;text-decoration:none}
.lien-bouton:hover{text-decoration:underline}