/* ==========================================================================
   anesthia-layout.css — largeur de contenu et en-tête de liste collant
   Lot 9a · 27/08/2026 · demandes 63 (convergence) et 87 (nouvelle)

   POURQUOI CE FICHIER EXISTE, ET PAS LE SOCLE.
   Au lot 10a, anesthia-shell.css n'a été branché que sur quatre écrans :
   secrétariat, anesthésiste, urgentiste, bloc. Les sept autres gardent leur
   CSS complet en propre. Y brancher le socle entier maintenant, c'est refaire
   sept mises en page d'un coup — exactement le geste qui a fait disparaître le
   SHELL v1 le 13 août.
   Ce fichier ne porte donc QUE les deux règles de mise en page qui doivent
   valoir partout tout de suite. Il est importé par tous les écrans, socle ou
   pas. Chaque écran qui passera au socle dans son lot pourra s'en détacher —
   ou pas, ces règles n'entrent en conflit avec rien.

   Toutes les variables ont un repli en dur : les écrans sans le socle
   définissent bien les leurs, mais ce fichier ne doit pas en dépendre.
   ========================================================================== */

:root{ --appbar-h:60px; --sticky-top:60px; }

/* --- 1. Largeur de contenu ------------------------------------------------
   .wrap était déclaré dans chaque écran avec neuf valeurs différentes, de
   940 à 1520 px. Sur une dalle 1920, le secrétariat n'utilisait que 56 % de
   la largeur : colonnes de table écrasées, quatre patients visibles au lieu
   de neuf. Une seule valeur ici, avec un plafond qui évite les lignes de
   lecture absurdes sur écran ultra-large.
   Le portail (index.html) garde sa carte centrée : il n'a pas de .wrap. */
.wrap{max-width:1800px; margin:0 auto; padding:20px 22px 48px;}

/* --- 2. En-tête de liste collant -----------------------------------------
   Titre, boutons d'action, recherche, tris et filtres restent visibles quand
   la liste défile ; les en-têtes de colonnes s'ancrent juste en dessous.
   Sans cela, plus on descend dans la file, moins on peut agir dessus.
   Le bandeau se réduit au défilement — le sous-titre descriptif s'efface, le
   titre et les contrôles rétrécissent — pour ne pas immobiliser un quart de
   l'écran sur le plancher de cadrage 1366x768.
   La structure .list-head est posée automatiquement par anesthia-layout.js :
   les onze écrans n'ont pas la même arborescence, et aucun n'a été remanié. */
.list-head{position:sticky; top:var(--appbar-h); z-index:20; background:var(--paper,#f6f4ee); margin:0 -22px; padding:8px 22px 2px; transition:padding .15s;}
.list-head::after{content:""; position:absolute; left:0; right:0; bottom:-10px; height:10px; background:linear-gradient(to bottom, rgba(19,36,34,.07), transparent); opacity:0; transition:opacity .15s; pointer-events:none;}
.list-head.compact::after{opacity:1;}

/* État replié : on rétrécit aussi les contrôles, pas seulement les marges.
   Sans cela le bandeau immobilise 150 px, soit 27 % d'un écran 1366x768 — on
   retire d'un côté la place qu'on vient de gagner de l'autre. */
.list-head.compact{padding-top:6px;}
.list-head.compact .sub{display:none;}
.list-head.compact h1{font-size:17px; margin-bottom:0;}
.list-head.compact .head-row{margin-bottom:7px; align-items:center;}
.list-head.compact .toolbar{margin:0 0 6px;}
.list-head.compact .filters{gap:6px; margin-bottom:6px;}
.list-head.compact .btn{height:34px; font-size:13px; padding:0 14px;}
.list-head.compact .chip{height:27px; font-size:12px; padding:0 11px;}
.list-head.compact input[type="text"], .list-head.compact input:not([type]), .list-head.compact select{height:31px;}
.list-head.compact .tf label{font-size:11.5px;}

/* En-têtes de colonnes collants sous le bandeau.
   `overflow:clip` remplace `overflow:hidden` sur la carte de liste : hidden
   établit un contexte de défilement, ce qui neutralise position:sticky à
   l'intérieur. clip arrondit les coins sans créer ce contexte. La classe est
   posée par le script, uniquement sur la carte qui porte la liste. */
.card.sticky-head{overflow:clip;}
.card.sticky-head thead th{position:sticky; top:var(--sticky-top); z-index:10; background:#fbfbf8; box-shadow:inset 0 -1px 0 var(--line,#dbe4e1);}

/* Repli mobile : quatre écrans le déclaraient déjà en propre, les autres non.
   Ici pour tout le monde ; les déclarations locales restent chargées après ce
   fichier et continuent donc de primer là où elles existent. */
@media (max-width:900px){
  .wrap{padding:18px 14px 50px;}
  .list-head{margin:0 -14px; padding-left:14px; padding-right:14px;}
}

/* Bandeau ancré à l'intérieur de la carte de liste (écran Avis : ses filtres
   vivent dans la carte, pas avant elle). Fond de carte, pas fond de page, et
   pas de marges négatives : il est déjà à la bonne largeur. */
.list-head.in-card{background:var(--card,#fff); margin:0; padding:10px 16px 2px;}
/* ⚠️ 16 px horizontaux, et ce n'est pas un choix esthétique : c'est la MÊME
   valeur que `thead th` et `tbody td`. Sans elle, le titre de la liste et le
   bouton d'action sont collés aux bords de la carte pendant que les colonnes,
   elles, sont en retrait — l'en-tête ne s'aligne sur rien.
   ⚠️ Portée MESURÉE avant d'y toucher : `list-head in-card` n'est porté que par
   UN écran dans tout le dépôt — celui des interfaces inter-services. Une règle
   du socle ne se change pas sans compter ses consommateurs. */


/* =====================================================================
   DEMANDE 157 — LA PASTILLE DE STATUT DU QUESTIONNAIRE
   =====================================================================
   Ces règles existaient dans `anesthia-shell.css`, que SEULS quatre écrans
   chargent. Le service demandeur, lui, ne charge que cette feuille : la
   pastille s'y serait affichée nue. Mêmes valeurs qu'au shell, au pixel près
   — les écrans qui chargent les deux feuilles ne voient aucune différence, et
   leurs déclarations locales continuent de primer là où elles existent
   (même raisonnement que le repli mobile juste au-dessus).
   ⚠️ `--amber-*`, `--green-*` et `--grey-*` sont déclarées par chaque écran. */
.qbadge{font-size:11.5px; font-weight:600; border-radius:999px; padding:3px 10px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; width:fit-content;}
.qbadge::before{content:""; width:7px; height:7px; border-radius:50%;}
.q-non{background:var(--grey-soft); color:var(--ink-soft);}
.q-non::before{background:var(--grey);}
.q-envoye{background:var(--amber-soft); color:var(--amber);}
.q-envoye::before{background:var(--amber);}
.q-complete{background:var(--green-soft); color:var(--green);}
.q-complete::before{background:var(--green);}