/* Écrans équipe. Interface d'outil : dense, lisible, sans ornement. */

/* `hidden` doit l'emporter sur toute règle d'affichage.
   Sans cette ligne, `.connexion { display: grid }` — un sélecteur de classe,
   feuille auteur — écrasait `[hidden] { display: none }` de la feuille du
   navigateur : l'écran « Chargement… » restait affiché par-dessus
   l'application, qui tournait pourtant derrière. */
[hidden] { display: none !important; }

:root {
  --encre: #221E18; --doux: #6B635A; --creme: #FAFAF8; --blanc: #fff;
  --or: #A9834B; --or-f: #8A6535; --trait: #E3DED5;
  --rouge: #A8402C; --vert: #3F7A50; --ambre: #B5822A;
  --r: 10px;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--creme); color: var(--encre);
  font: 400 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1 { font-size: 1.5rem; margin: 0; font-weight: 600; }
h2 { font-size: 1rem; margin: 0 0 .75rem; font-weight: 600; }
h3 { font-size: .82rem; margin: 0 0 .5rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--doux); }
a { color: var(--or-f); }
button, input, select, textarea { font: inherit; }
input, select, textarea {
  width: 100%; padding: .5rem .65rem; border: 1px solid var(--trait);
  border-radius: 7px; background: var(--blanc); color: inherit; font-size: max(.95rem, 16px);
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
label { display: block; font-size: .82rem; font-weight: 500; margin-bottom: .25rem; color: var(--doux); }

button {
  padding: .5rem 1.1rem; border: 1px solid var(--encre); border-radius: 999px;
  background: var(--encre); color: var(--creme); font-weight: 600; cursor: pointer;
}
button:disabled { opacity: .45; cursor: not-allowed; }
button.secondaire { background: transparent; color: var(--encre); border-color: var(--trait); }
button.secondaire:hover:not(:disabled) { border-color: var(--encre); }
button.lien { background: none; border: 0; color: inherit; padding: 0; font-weight: 400;
  text-decoration: underline; cursor: pointer; }
button.petit { padding: .3rem .75rem; font-size: .85rem; }

/* ── Connexion ─────────────────────────────────────────────────────────── */
.connexion { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.connexion form { width: min(24rem, 100%); padding: 2rem; background: var(--blanc);
  border: 1px solid var(--trait); border-radius: var(--r); }
.connexion h1 { margin: 0 0 1.5rem; }
.connexion label { margin-top: 1rem; }
.connexion button { width: 100%; margin-top: 1.5rem; }
.marque { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--or-f); margin: 0 0 1rem; text-decoration: none; font-weight: 600; }

/* ── Barre ─────────────────────────────────────────────────────────────── */
.barre { position: sticky; top: 0; z-index: 20; display: flex; gap: 1.5rem;
  align-items: center; justify-content: space-between; padding: .85rem 1.5rem;
  background: var(--encre); color: var(--creme); }
.barre .marque { color: var(--or); margin: 0; }
.barre nav { display: flex; gap: 1.25rem; align-items: center; font-size: .9rem; }
.barre a { color: var(--creme); text-decoration: none; }
.barre .qui { color: #A9A198; font-size: .85rem; }

/* ── Vues ──────────────────────────────────────────────────────────────── */
main { max-width: 76rem; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }
.entete-vue { display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 1.25rem; }
.filtres { display: flex; gap: .6rem; }
.filtres input { width: 18rem; }
.filtres select { width: auto; }

.carte { padding: 1.25rem; background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--r); margin-bottom: 1rem; }
.grille { display: grid; gap: 1rem; }
.grille.deux { grid-template-columns: 1fr 1fr; }
.grille.trois { grid-template-columns: repeat(3, 1fr); }
.colonnes { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1rem;
  align-items: start; }
@media (max-width: 62rem) {
  .colonnes, .grille.deux, .grille.trois { grid-template-columns: 1fr; }
  .filtres { width: 100%; } .filtres input { flex: 1; width: auto; }
}

/* ── Tableaux ──────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; background: var(--blanc);
  border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden; }
th, td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--trait);
  font-size: .9rem; vertical-align: middle; }
th { background: #F4F2EE; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--doux); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #FBFAF7; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vide { padding: 2.5rem; text-align: center; color: var(--doux); background: var(--blanc);
  border: 1px dashed var(--trait); border-radius: var(--r); }

/* ── Étiquettes ────────────────────────────────────────────────────────── */
.et { display: inline-block; padding: .12rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
  background: #EFECE5; color: var(--doux); }
.et.ok { background: #E7F0E9; color: var(--vert); }
.et.attention { background: #FBF1DF; color: var(--ambre); }
.et.bloquant { background: #FBE9E5; color: var(--rouge); }
.et.al { background: #EAF0F4; color: #3A5F76; }
.et.ala { background: #F1EAF4; color: #6A4176; }

/* ── Conformité ────────────────────────────────────────────────────────── */
.controle { display: flex; gap: .6rem; align-items: baseline; padding: .5rem 0;
  border-bottom: 1px solid var(--trait); font-size: .88rem; }
.controle:last-child { border-bottom: 0; }
.controle .pastille { width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--trait); flex: none; transform: translateY(-1px); }
.controle.ok .pastille { background: var(--vert); }
.controle.attention .pastille { background: var(--ambre); }
.controle.bloquant .pastille { background: var(--rouge); }

/* ── Devis ─────────────────────────────────────────────────────────────── */
.ligne-devis { display: grid; grid-template-columns: minmax(0,1fr) 7rem 4rem 2rem;
  gap: .5rem; align-items: center; margin-bottom: .5rem; }
.ligne-devis .surcharge { border-color: var(--ambre); background: #FEFCF7; }
.total { display: flex; justify-content: space-between; padding: .75rem 0 0;
  margin-top: .75rem; border-top: 2px solid var(--encre); font-weight: 700; font-size: 1.05rem; }
.ventilation { display: flex; justify-content: space-between; font-size: .85rem;
  color: var(--doux); padding: .15rem 0; }

.etat { font-size: .85rem; color: var(--doux); min-height: 1.3em; margin: .5rem 0 0; }
.erreur { color: var(--rouge); font-size: .87rem; margin: .5rem 0 0; }
.erreur:empty { display: none; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.mention { font-size: .82rem; color: var(--doux); }
.lien-copiable { display: flex; gap: .5rem; margin-top: .5rem; }
.lien-copiable input { font-family: ui-monospace, monospace; font-size: .8rem; }

/* ── Parcours d'inscription ────────────────────────────────────────────── */
.etape { display:inline-grid; place-items:center; width:1.5rem; height:1.5rem;
  margin-right:.5rem; border-radius:50%; background:var(--encre); color:var(--creme);
  font-size:.8rem; font-weight:700; vertical-align:.05rem; }

.bascule { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
@media (max-width:40rem) { .bascule { grid-template-columns:1fr; } }
.bascule label { display:block; padding:.9rem 1rem; border:1px solid var(--trait);
  border-radius:var(--r); cursor:pointer; margin:0; font-weight:400; color:inherit; }
.bascule label.choisi { border-color:var(--or); background:#FDFBF7; }
.bascule input { width:auto; margin-right:.4rem; }
.bascule strong { display:inline; font-size:.95rem; }
.bascule span { display:block; margin-top:.3rem; font-size:.82rem; color:var(--doux); }

.examen { padding:.5rem 0; border-bottom:1px solid var(--trait); }
.examen:last-of-type { border-bottom:0; }
.examen label { display:flex; gap:.5rem; align-items:baseline; margin:0;
  font-weight:400; color:inherit; cursor:pointer; }
.examen input[type="checkbox"] { width:auto; }
.examen-detail { display:grid; grid-template-columns:1fr .7fr .7fr; gap:.5rem;
  margin:.5rem 0 .25rem 1.6rem; }
@media (max-width:40rem) { .examen-detail { grid-template-columns:1fr; } }

.apercu { position:sticky; top:4.5rem; }
.apercu h3 { margin-top:.9rem; }
.corps-mail { white-space:pre-wrap; font:inherit; font-size:.85rem; line-height:1.55;
  margin:.5rem 0 0; padding:.75rem; background:#F6F4F0; border-radius:8px;
  max-height:20rem; overflow:auto; }
details summary { cursor:pointer; font-size:.85rem; color:var(--or-f); padding:.3rem 0; }
.pieces { margin:.4rem 0 0; padding-left:1.1rem; font-size:.88rem; }
.pieces li { margin-bottom:.2rem; }
.alerte { padding:.7rem .9rem; margin-bottom:.9rem; border-radius:8px;
  background:#FBF1DF; border-left:3px solid var(--ambre); font-size:.87rem; }
.alerte.bloquant { background:#FBE9E5; border-left-color:var(--rouge); }
.alerte p { margin:0 0 .3rem; }
.alerte p:last-child { margin-bottom:0; }
.avert-format { padding:.6rem .8rem; background:#F6F4F0; border-radius:8px; margin-top:.6rem; }
.alerte.ok-envoi { background:#E7F0E9; border-left-color:var(--vert); }
.alerte.info { background:#EEF2F5; border-left-color:#3A5F76; }

/* Remplacent des attributs `style` en ligne, que la politique de sécurité
   bloque — et qu'elle doit bloquer : c'est la même directive qui empêche
   l'injection de balisage par une donnée patient. */
.centre { text-align: center; }
.doux { color: var(--doux); }
.espace-h { margin-top: 1rem; }
.espace-l { margin-top: 1.1rem; }
.cliquable { cursor: pointer; }

/* ── L'écran de la réception : ce qu'il reste à faire ─────────────────── */
.onglets { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.onglet {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .85rem; border: 1px solid var(--trait); border-radius: 999px;
  background: var(--blanc); color: var(--doux); font-size: .87rem; font-weight: 500;
}
.onglet:hover { border-color: var(--encre); color: var(--encre); }
.onglet.actif { background: var(--encre); border-color: var(--encre); color: var(--creme); }
.onglet .n { font-variant-numeric: tabular-nums; opacity: .65; font-size: .82rem; }

.taches { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.tache {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 7rem 6rem;
  gap: 1rem; align-items: center;
  padding: .85rem 1.1rem .85rem 1.35rem;
  background: var(--blanc); border: 1px solid var(--trait);
  border-left: 3px solid var(--trait);
  border-radius: 0 var(--r) var(--r) 0;
  cursor: pointer;
}
.tache:hover { border-color: var(--encre); }
.tache.blo { border-left-color: var(--rouge); }
.tache.att { border-left-color: var(--ambre); }
.tache.ok  { border-left-color: var(--vert); }
.tache-qui strong { font-size: .97rem; }
.tache-qui .mention, .tache-quoi .mention { display: block; margin-top: .1rem; font-size: .82rem; }
.tache-quoi b { font-size: .95rem; font-weight: 600; }
.tache-quand { text-align: right; font-size: .85rem; }
.tache-quand .date { display: block; font-variant-numeric: tabular-nums; }
.tache-quand .delai { color: var(--doux); font-size: .8rem; }
.tache-quand .delai.urgent { color: var(--rouge); font-weight: 600; }
.tache .et { justify-self: end; }
@media (max-width: 56rem) {
  .tache { grid-template-columns: 1fr auto; gap: .5rem 1rem; }
  .tache-quoi { grid-column: 1 / -1; }
  .tache-quand { text-align: left; }
}

/* ── Historique et document hors liasse ──────────────────────────────── */
.journal { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .87rem; }
.journal li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: baseline; }
.choix-doc { display: flex; gap: .5rem; margin-top: .5rem; }
.choix-doc select { flex: 1; }
.choix-doc button { white-space: nowrap; }

/* ── Retours discrets ──────────────────────────────────────────────────── */
/* « enregistré » à côté du titre de l'étape : présent, jamais bruyant. */
h2 .etat { display:inline-block; margin:0 0 0 .6rem; font-weight:400;
  font-size:.78rem; text-transform:none; letter-spacing:0; min-height:0; }
.etat:empty { display:none; }

/* Liste vide : le message porte une sortie, pas seulement un constat. */
.vide p { margin:0 0 .8rem; }
.vide p:last-child { margin-bottom:0; }

/* Bandeau de panne : coiffe la liste sans l'effacer. */
#bandeau-liste { margin-bottom:1rem; }