:root {
  /* ── Charte graphique MIBsoft ──────────────────────────────────────────
     Tokens repris de la charte de la plateforme (charte-graphique.html).
     L'interface utilise la gamme émeraude « vigil » ; les deux verts du
     logo (#62BE1E / #467C0C) restent réservés au logo lui-même.
     Contrastes vérifiés sur blanc : --primaire 5,48:1 et --primaire-fonce
     7,68:1 (AA texte). --primaire-vif, à 3,77:1, ne sert qu'aux aplats et
     dégradés, jamais au texte courant. */
  --primaire: #047857;        /* vigil-700 */
  --primaire-fonce: #065F46;  /* vigil-800 */
  --primaire-vif: #059669;    /* vigil-600 — décor uniquement */
  --primaire-clair: #ECFDF5;  /* vigil-50  */
  --primaire-bord: #A7F3D0;   /* vigil-200 */
  --vert: #047857;
  --texte: #0F172A;           /* neutral-900 */
  --texte-doux: #64748B;      /* neutral-500 */
  --bord: #E2E8F0;            /* neutral-200 */
  --fond: #F8FAFC;            /* neutral-50  */
  --carte: #ffffff;
  --ombre: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ombre-forte: 0 10px 30px -10px rgba(15, 23, 42, 0.15);
  --radius: 14px;             /* radius-lg */
  --largeur-nav: 250px;
  --hauteur-entete: 58px;
  /* Typographies de la charte : titres en Plus Jakarta Sans, texte en Inter. */
  --police-titre: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --police-texte: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--police-texte);
  color: var(--texte);
  background: var(--fond);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primaire); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--primaire); color: #fff;
  padding: 8px 14px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ── En-tête ── */
.entete {
  position: sticky; top: 0; z-index: 40;
  height: var(--hauteur-entete);
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(120deg, var(--primaire-fonce), var(--primaire));
  color: #fff; padding: 0 16px; box-shadow: var(--ombre);
}
.menu-bascule {
  display: none; background: rgba(255, 255, 255, 0.15); border: 0; color: #fff;
  font-size: 20px; width: 40px; height: 40px; border-radius: 8px; cursor: pointer;
}
.marque { display: flex; align-items: center; gap: 10px; color: #fff; }
.marque:hover { text-decoration: none; }
/* Logo officiel MIBsoft. Le fond blanc arrondi le détache du dégradé vert
   de l'en-tête, ses deux verts étant proches de celui-ci. */
.marque-logo {
  width: 34px; height: 34px; flex-shrink: 0; display: block;
  background: #fff; border-radius: 9px; padding: 4px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}
.marque-texte { display: flex; flex-direction: column; line-height: 1.1; }
.marque-texte strong { font-size: 16px; }
.marque-texte small { font-size: 11px; opacity: 0.85; }

/* ── Mise en page ── */
.mise-en-page { display: flex; min-height: calc(100vh - var(--hauteur-entete)); }

/* Barre latérale sombre, reprise des tokens de la plateforme :
   dégradé vert foncé vers bleu foncé, lien actif souligné d'un filet vert.
   Opacités choisies pour rester lisibles (AA) aux DEUX extrémités du
   dégradé : 80 % au repos (6,86:1) et 62 % pour les libellés de section
   (4,79:1). L'écart visuel vient de la taille et des capitales, non d'un
   contraste dégradé — en dessous de 60 %, le texte ne passe plus l'AA. */
.barre-laterale {
  width: var(--largeur-nav); flex-shrink: 0;
  background: linear-gradient(180deg, #064E3B 0%, #1E3A8A 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 4px 0 20px rgba(15, 23, 42, 0.08);
  color: rgba(255, 255, 255, 0.8);
  padding: 18px 12px; position: sticky;
  top: var(--hauteur-entete); height: calc(100vh - var(--hauteur-entete));
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.nav-section {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.62); margin: 20px 10px 7px; font-weight: 700;
}
.nav-section:first-of-type { margin-top: 14px; }
.nav-lien {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 10px; color: rgba(255, 255, 255, 0.8);
  font-weight: 600; font-size: 14px; margin-bottom: 3px;
  transition: background 0.15s, color 0.15s;
}
.nav-lien:hover { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; }
.nav-lien:focus-visible { outline: 2px solid #34D399; outline-offset: 1px; }
/* Le filet vert à gauche marque la page courante même sans percevoir la teinte. */
.nav-lien.actif {
  background: rgba(16, 185, 129, 0.18); color: #fff;
  box-shadow: inset 3px 0 0 #34D399;
}
.nav-ico { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.nav-externe { margin-left: auto; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.nav-lien:hover .nav-externe { color: inherit; }

.barre-pied {
  margin-top: auto; padding: 14px 10px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
.barre-pied small { font-size: 12px; }
/* Une seule définition : une seconde règle plus bas imposait une couleur
   sombre, devenue illisible sur la barre latérale sombre. */
.pied-user {
  display: block; margin-bottom: 8px; font-weight: 600;
  color: #fff; word-break: break-all;
}
.barre-pied .btn-deco {
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff; margin-top: 8px;
}
.barre-pied .btn-deco:hover { background: rgba(255, 255, 255, 0.18); }

.voile {
  position: fixed; inset: var(--hauteur-entete) 0 0 0; background: rgba(0, 0, 0, 0.4);
  z-index: 30;
}

.contenu { flex: 1; min-width: 0; padding: 28px 32px 80px; }
.vue, .vue-accueil { max-width: 960px; margin: 0 auto; animation: apparait 0.25s ease; }
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h1, h2, h3, .marque-texte strong { font-family: var(--police-titre); letter-spacing: -0.01em; }
h1 { font-size: 26px; margin: 0 0 6px; font-weight: 800; }
h2 { font-size: 19px; font-weight: 700; }
.intro { color: var(--texte-doux); font-size: 15px; margin: 0 0 22px; max-width: 70ch; }

/* ── Cartes génériques ── */
.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--ombre); margin-bottom: 18px;
}
.carte h2 { margin-top: 0; }
.carte.encart { background: var(--primaire-clair); border-color: var(--primaire-bord); }
.carte.avertissement { background: #fff7ed; border-color: #fed7aa; }
.carte.vide { text-align: center; color: var(--texte-doux); }
.aide { color: var(--texte-doux); font-size: 13.5px; }
.aide-mini { font-size: 13px; margin: 6px 0; }

/* ── Accueil ── */
.hero {
  background: linear-gradient(120deg, var(--primaire-fonce), var(--primaire));
  color: #fff; border-radius: 16px; padding: 34px 30px; margin-bottom: 24px;
  box-shadow: var(--ombre-forte);
}
.hero h1 { color: #fff; font-size: 28px; }
.hero-sous { color: var(--primaire-clair); font-size: 16px; max-width: 75ch; margin: 8px 0 0; }

.modules-grille { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; }
.module-carte {
  display: flex; align-items: center; gap: 16px; background: var(--carte);
  border: 1px solid var(--bord); border-radius: var(--radius); padding: 18px 20px;
  color: var(--texte); box-shadow: var(--ombre); transition: transform 0.12s, box-shadow 0.12s;
}
.module-carte:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--ombre-forte); border-color: var(--primaire-bord); }
.module-ico {
  font-size: 26px; width: 54px; height: 54px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--primaire-clair); border-radius: 12px;
}
.module-carte h3 { margin: 0 0 3px; font-size: 17px; }
.module-carte p { margin: 0; color: var(--texte-doux); font-size: 14px; }
.module-fleche { margin-left: auto; font-size: 22px; color: var(--primaire); flex-shrink: 0; }

.badge {
  display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 600;
  background: var(--vert); color: #fff; padding: 2px 9px; border-radius: 999px;
}
.badge-doux { background: var(--primaire-clair); color: var(--primaire-fonce); }

/* ── Recherche réglementaire ── */
.barre-recherche { position: relative; margin-bottom: 12px; }
.champ-recherche {
  width: 100%; padding: 14px 16px 14px 44px; font-size: 16px; border: 2px solid var(--bord);
  border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center;
}
.champ-recherche:focus { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.14); }

.suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--bord);
  border-radius: 12px; box-shadow: var(--ombre-forte); max-height: 320px; overflow-y: auto;
}
.suggestion {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
  cursor: pointer; font-size: 14.5px;
}
.suggestion:hover, .suggestion.actif { background: var(--primaire-clair); }
.sugg-ico { opacity: 0.6; }

.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.puce {
  border: 1px solid var(--bord); background: #fff; color: var(--texte); padding: 7px 14px;
  border-radius: 999px; font-size: 13.5px; cursor: pointer;
}
.puce:hover { border-color: var(--primaire); }
.puce.active { background: var(--primaire); color: #fff; border-color: var(--primaire); }
.compteur { color: var(--texte-doux); font-size: 13.5px; margin: 0 0 14px; }

/* ── Recherche officielle Légifrance ── */
.barre-officielle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.btn-officiel { background: var(--primaire-fonce); color: #fff; border-color: var(--primaire-fonce); }
.btn-officiel:hover { background: var(--primaire-fonce); color: #fff; }
.legifrance-zone:not(:empty) { margin-bottom: 16px; padding-bottom: 4px; }
.legifrance-titre { font-weight: 700; color: var(--primaire-fonce); margin: 6px 0 10px; }
.resultat-officiel { border-left: 4px solid var(--primaire-fonce); }
.tag-officiel { background: #065f46; }
.resultat-code { color: var(--texte-doux); font-size: 13px; margin-bottom: 6px; }
.btn-juris { background: #92400e; color: #fff; border-color: #92400e; }
.btn-juris:hover { background: #78350f; color: #fff; }
.resultat-juris-officiel { border-left: 4px solid #92400e; }
.tag-juris { background: #92400e; }
.diagnostic { margin-top: 10px; font-size: 12px; color: var(--texte-doux); }
.diagnostic summary { cursor: pointer; }
.diagnostic-pre { white-space: pre-wrap; word-break: break-all; background: #f3f4f6; padding: 10px; border-radius: 8px; max-height: 240px; overflow: auto; }

.resultat-entete { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tag-source {
  font-size: 11.5px; font-weight: 600; background: var(--primaire-fonce); color: #fff;
  padding: 3px 10px; border-radius: 6px;
}
.resultat-ref { font-weight: 700; color: var(--primaire-fonce); }
.resultat-titre { margin: 4px 0 12px; font-size: 17px; }
.resultat-bloc { margin-bottom: 12px; }
.resultat-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texte-doux);
  font-weight: 700; margin-bottom: 3px;
}
.resultat-texte { font-size: 14.5px; }
.resultat-explication { font-size: 14.5px; background: var(--primaire-clair); padding: 12px 14px; border-radius: 8px; border-left: 3px solid var(--primaire); }
.resultat-lien { font-size: 13.5px; font-weight: 600; }
mark { background: #fde68a; padding: 0 2px; border-radius: 3px; }

/* ── Jurisprudence ── */
.resultat-juris { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 10px 12px; }
.juris-arret { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-bottom: 1px dashed #fcd34d; }
.juris-arret:last-of-type { border-bottom: 0; }
.juris-ref { font-weight: 700; color: #92400e; font-size: 13.5px; }
.juris-portee { font-size: 13.5px; color: var(--texte); }
.juris-liens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.juris-lien { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #fcd34d; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: #92400e; }
.juris-lien:hover { text-decoration: none; background: #fffbeb; border-color: #f59e0b; }

/* ── Recherche web (repli hors base locale) ── */
.web-panel { margin-top: 16px; border: 1px dashed var(--primaire-bord); background: #f5f8ff; border-radius: 12px; padding: 14px 16px; text-align: left; }
.web-panel-fort { border-style: solid; border-color: var(--primaire); background: var(--primaire-clair); }
.web-panel-titre { font-weight: 700; color: var(--primaire-fonce); margin-bottom: 2px; }
.web-liens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.web-lien { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--bord); border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--primaire-fonce); }
.web-lien:hover { text-decoration: none; border-color: var(--primaire); background: var(--primaire-clair); }

/* ── Accidents : grilles méthodes ── */
.methodes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.methode-carte {
  display: block; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--radius);
  padding: 18px; color: var(--texte); box-shadow: var(--ombre); transition: transform 0.12s, box-shadow 0.12s;
}
.methode-carte:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--ombre-forte); border-color: var(--primaire-bord); }
.methode-carte h3 { margin: 0 0 6px; font-size: 16px; }
.methode-carte p { margin: 0 0 10px; color: var(--texte-doux); font-size: 13.5px; }

.lien-retour { font-size: 14px; font-weight: 600; display: inline-block; margin-bottom: 10px; }
.methode-entete { margin-bottom: 16px; }

/* ── Outils interactifs ── */
.outil { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--radius); padding: 22px; box-shadow: var(--ombre); margin-top: 8px; }
.outil-entete h2 { margin: 0 0 4px; }
.outil-entete p { margin: 0 0 16px; color: var(--texte-doux); font-size: 14px; }

.label { display: block; font-size: 13px; font-weight: 600; color: var(--texte); margin: 10px 0 5px; }
.champ {
  width: 100%; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 9px; font-size: 14.5px;
  font-family: inherit; background: #fff;
}
.champ:focus { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12); }
.champ-mini { padding: 7px 10px; font-size: 13.5px; }
.champ-zone { resize: vertical; }
.zone-texte {
  width: 100%; padding: 12px 14px; border: 1px solid var(--bord); border-radius: 10px;
  font-size: 14.5px; font-family: inherit; resize: vertical;
}
.zone-texte:focus { outline: none; border-color: var(--primaire); box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.btn {
  border: 1px solid var(--bord); background: #fff; color: var(--texte); padding: 10px 16px;
  border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.btn:hover { border-color: var(--primaire); background: var(--primaire-clair); text-decoration: none; }
.btn-primaire { background: var(--primaire); color: #fff; border-color: var(--primaire); }
.btn-primaire:hover { background: var(--primaire-fonce); color: #fff; }
.btn-discret { color: #b91c1c; }
.btn-discret:hover { background: #fef2f2; border-color: #fecaca; }
.btn-mini { padding: 6px 12px; font-size: 13px; }

/* ── Arbre des causes ── */
.arbre-legende { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 8px 0 14px; font-size: 13px; color: var(--texte-doux); }
.pastille { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 5px; }
.pastille-fait { background: #fecaca; border: 1px solid #f87171; }
.pastille-cause { background: var(--primaire-bord); border: 1px solid var(--primaire-bord); }
.lg-aide { font-style: italic; }

.arbre-sortie { overflow-x: auto; padding: 6px 2px 2px; }
.arbre-grille { display: flex; gap: 28px; align-items: flex-start; min-width: min-content; padding-bottom: 8px; }
.arbre-col { display: flex; flex-direction: column; gap: 12px; min-width: 180px; position: relative; }
.arbre-col-titre { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texte-doux); font-weight: 700; text-align: center; }
.arbre-noeud {
  background: var(--primaire-bord); border: 1px solid var(--primaire-bord); border-radius: 9px; padding: 10px 12px;
  font-size: 13.5px; cursor: pointer; position: relative; transition: transform 0.1s;
}
.arbre-noeud:hover { transform: scale(1.02); box-shadow: var(--ombre); }
.noeud-ultime { background: #fee2e2; border: 2px solid #ef4444; font-weight: 600; }
.noeud-marque { font-size: 10px; font-weight: 700; color: #b91c1c; letter-spacing: 0.05em; margin-top: 4px; }
/* Connecteurs entre colonnes */
.arbre-col:not(:last-child)::after {
  content: ""; position: absolute; top: 40px; right: -28px; width: 28px; border-top: 2px solid #cbd5e1;
}
.arbre-note { margin-top: 14px; }

/* ── 5 Pourquoi ── */
.pourquoi-liste { display: flex; flex-direction: column; gap: 10px; }
.pourquoi-ligne { display: flex; align-items: center; gap: 12px; }
.pourquoi-num { flex-shrink: 0; width: 100px; font-size: 13px; font-weight: 600; color: var(--primaire-fonce); }
.synthese { margin-top: 18px; background: var(--primaire-clair); border-radius: 10px; padding: 16px 18px; }
.chaine { margin: 8px 0; }
.chaine li { margin: 4px 0; }

/* ── Ishikawa / niveaux ── */
.ishikawa-grille, .niveaux-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 14px; }
.ishikawa-col, .niveau-bloc { background: var(--fond); border: 1px solid var(--bord); border-radius: 10px; padding: 12px; }
.ishikawa-titre, .niveau-titre { font-weight: 700; color: var(--primaire-fonce); margin-bottom: 4px; }
.ishikawa-aide { font-size: 12px; color: var(--texte-doux); margin: 0 0 10px; }
.ishikawa-causes, .niveau-causes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ishikawa-cause { display: flex; gap: 6px; align-items: flex-start; }
/* La cause est une zone de texte qui grandit avec son contenu — voir
   « champCause » dans modules/accidents.js. On lui retire la poignée de
   redimensionnement (la hauteur se calcule toute seule) et la barre de
   défilement (elle ne défile jamais, elle s'allonge). */
.champ-cause {
  flex: 1 1 auto; min-width: 0;
  resize: none; overflow: hidden;
  line-height: 1.4; font-family: inherit;
}
.btn-supprimer {
  flex-shrink: 0; width: 28px; height: 28px; border: 1px solid var(--bord); background: #fff;
  border-radius: 7px; cursor: pointer; color: #b91c1c; font-size: 18px; line-height: 1;
}
.btn-supprimer:hover { background: #fef2f2; border-color: #fecaca; }

/* ── Arbre graphique (éditeur) ── */
.arbre-editeur { overflow: auto; border: 1px solid var(--bord); border-radius: 10px; background:
  radial-gradient(circle, #e8eef6 1px, transparent 1px) 0 0 / 22px 22px, #fbfdff; padding: 10px; }
.arbre-scene { position: relative; min-width: 100%; }
.arbre-liens { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
.arbre-lien { fill: none; stroke: #94a3b8; stroke-width: 2; }
.gnoeud {
  position: absolute; background: var(--primaire-bord); border: 1px solid var(--primaire-bord); border-radius: 10px;
  padding: 8px 10px; box-sizing: border-box; cursor: pointer; box-shadow: var(--ombre);
  display: flex; flex-direction: column; gap: 4px; transition: transform 0.1s, box-shadow 0.1s;
}
.gnoeud:hover { transform: translateY(-1px); box-shadow: var(--ombre-forte); border-color: var(--primaire); }
.gnoeud-cause { background: var(--primaire-bord); border-color: var(--primaire-bord); }
.gnoeud-fait { background: #e0f2fe; border-color: #7dd3fc; }
.gnoeud-ultime { background: #fee2e2; border: 2px solid #ef4444; }
.gnoeud-texte { font-size: 13px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.gnoeud-tag { font-size: 9.5px; font-weight: 800; color: #b91c1c; letter-spacing: 0.05em; }
.gnoeud-pieds { display: flex; gap: 8px; font-size: 11px; color: var(--texte-doux); margin-top: auto; }
.gnoeud-ico { display: inline-flex; align-items: center; gap: 2px; }

.btn-ia { background: linear-gradient(120deg, #7c3aed, var(--primaire)); color: #fff; border-color: transparent; }
.btn-ia:hover { background: linear-gradient(120deg, #6d28d9, var(--primaire)); color: #fff; }
.etat-ia { display: inline-block; font-size: 13.5px; color: var(--primaire-fonce); margin: 4px 0; font-weight: 600; }

/* ── Modale ── */
.modale-fond { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 60; display: grid; place-items: center; padding: 16px; }
.modale { background: #fff; border-radius: 14px; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: var(--ombre-forte); }
.modale-entete { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--bord); position: sticky; top: 0; background: #fff; }
.modale-entete h3 { margin: 0; }
.modale-x { background: none; border: 0; font-size: 24px; cursor: pointer; color: var(--texte-doux); line-height: 1; }
.modale-corps { padding: 16px 20px; }
.modale-pied { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--bord); position: sticky; bottom: 0; background: #fff; }
.radios { display: flex; gap: 16px; }
.radio { font-size: 14px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ant-liste { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; border: 1px solid var(--bord); border-radius: 8px; padding: 8px; }
.ant-item { font-size: 13.5px; display: flex; gap: 6px; align-items: flex-start; cursor: pointer; }
.photo-item { position: relative; }
.photo-item .btn-supprimer { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; font-size: 14px; }
.photo-vignette { cursor: zoom-in; }

/* Ce que pèsent les photos d'une ligne — affiché seulement quand ça commence à
   compter. Un poids muet est la même faute qu'une file muette : on ne
   découvrirait le problème qu'au moment où le stockage refuse, c'est-à-dire
   trop tard, et pour le travail de quelqu'un d'autre. Voir lib/photos.js. */
.photo-poids {
  font-size: 12px; color: var(--texte-doux);
  align-self: center; white-space: nowrap;
}

/* La photo en grand. Une vignette de 130 px ne montre pas un carter déposé ;
   et l'on ne peut pas ouvrir un « data: » dans un onglet — les navigateurs le
   bloquent, et l'on obtenait une page blanche sans explication. */
.photo-plein { cursor: zoom-out; }
.photo-plein img {
  max-width: 92vw; max-height: 88vh;
  border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.photo-plein .modale-x {
  position: absolute; top: 16px; right: 20px;
  background: rgba(255, 255, 255, 0.92); border-radius: 9999px;
}

/* La bande de photos sous une ligne de tableau. Elle est HORS de la grille des
   colonnes : y glisser des vignettes déformerait le tableau, et la colonne
   qu'on vient lire — la criticité — sortirait de l'écran. On l'a déjà mesuré
   sur l'APR à huit colonnes. */
.tr-photos {
  padding: 4px 12px 10px;
  border-top: 1px dashed var(--bord, #e2e8f0);
}
.tr-photos .photo-zone { margin-top: 6px; gap: 10px; }

/* Le bloc « photos » d'une analyse entière — 5 Pourquoi, Ishikawa, AcciMap,
   HFACS, retour d'expérience. Ces méthodes rangent des PHRASES : leurs causes
   n'ont pas d'identité à laquelle accrocher une image, et ce qu'on
   photographie est la scène, pas un barreau de l'échelle. */
.carte-photos { margin-top: 16px; }
.carte-photos h3 { margin-top: 0; }
.carte-photos .aide { margin-bottom: 10px; }

/* ── Analyses enregistrées ── */
.analyses-liste { display: flex; flex-direction: column; gap: 8px; }
.analyse-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--bord); border-radius: 9px; padding: 10px 12px; flex-wrap: wrap; }
.analyse-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

/* ── Visites ── */
.entete-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.visites-liste { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.visite-carte {
  display: flex; align-items: center; gap: 14px; background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--radius); padding: 16px 18px; color: var(--texte); box-shadow: var(--ombre);
}
.visite-carte:hover { text-decoration: none; border-color: var(--primaire-bord); box-shadow: var(--ombre-forte); }
.visite-carte-corps { flex: 1; }
.visite-carte h3 { margin: 0 0 4px; font-size: 16px; }
.visite-meta { margin: 0; color: var(--texte-doux); font-size: 13.5px; }
.visite-meta2 { margin: 3px 0; font-size: 13px; color: var(--texte-doux); }

.form-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-champ { display: flex; flex-direction: column; }

.itamami-intro { margin: 4px 0 14px; font-size: 14px; }
.itamami { display: flex; flex-direction: column; gap: 16px; }
.axe {
  background: var(--carte); border: 1px solid var(--bord); border-left: 5px solid var(--axe-couleur, var(--primaire));
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--ombre);
}
.axe-entete { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.axe-lettre {
  flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px;
  background: var(--axe-couleur, var(--primaire)); color: #fff; font-weight: 800; font-size: 17px;
}
.axe-titre { margin: 0; font-size: 17px; }
.axe-desc { margin: 0; font-size: 13.5px; color: var(--texte-doux); }
.axe-points-wrap { margin: 6px 0 12px; }
.axe-points-wrap summary { cursor: pointer; font-size: 13.5px; color: var(--primaire); font-weight: 600; }
.axe-points { margin: 8px 0 0; font-size: 13.5px; color: var(--texte-doux); }

.axe-observations { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; }
.observation { position: relative; background: var(--fond); border: 1px solid var(--bord); border-radius: 10px; padding: 14px 16px; }
.btn-supprimer-obs { position: absolute; top: 10px; right: 10px; }
.obs-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }

.risque-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.risque-puce { border: 1.5px solid var(--c); background: #fff; color: var(--c); padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; }
.risque-puce.active { background: var(--c); color: #fff; }

.photo-zone { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.photo-apercu { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.photo-vignette { max-width: 160px; max-height: 130px; border-radius: 8px; border: 1px solid var(--bord); }

.actions-sticky { position: sticky; bottom: 0; background: linear-gradient(to top, var(--fond) 60%, transparent); padding: 14px 0; margin-top: 20px; }
.flash { background: var(--vert); color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; display: inline-block; margin-bottom: 10px; }

/* ── Notifications (toasts) ── */
.toasts {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 100; display: flex; flex-direction: column; gap: 8px;
  align-items: center; width: max-content; max-width: min(92vw, 460px);
  pointer-events: none;
}
.toast {
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  background: #1f2937; color: #fff; padding: 11px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 500; box-shadow: var(--ombre-forte);
  opacity: 0; transform: translateY(12px); transition: opacity 0.2s, transform 0.2s;
  max-width: 100%;
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast-ico { flex-shrink: 0; font-size: 15px; line-height: 1; }
.toast-txt { line-height: 1.35; }
.toast-succes { background: var(--vert); }
.toast-erreur { background: #b91c1c; }
.toast-attention { background: #b45309; }
.toast-info { background: var(--primaire-fonce); }
@media (max-width: 640px) {
  .toasts { bottom: 14px; left: 12px; right: 12px; transform: none; width: auto; max-width: none; }
}

/* ── Connexion (login formateur) ── */
body.mode-login .entete,
body.mode-login .barre-laterale,
body.mode-login .voile { display: none !important; }
body.mode-login .contenu { padding: 0; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(135deg, var(--primaire-fonce), var(--primaire)); }
.login-carte { background: #fff; border-radius: 20px; box-shadow: var(--ombre-forte);
  padding: 36px 32px; width: min(410px, 100%); text-align: center;
  animation: apparait 0.3s ease; }
.login-logo { width: 68px; height: 68px; display: block; margin: 0 auto 4px; }
.login-titre { margin: 6px 0 2px; font-size: 24px; font-weight: 800; }
.login-sous { color: var(--texte-doux); margin: 0 0 20px; font-size: 14.5px; }
/* Le compte connecté, sur un écran de refus. Michel a trois comptes MIBsoft :
   « votre compte n'a pas accès » ne lui disait pas lequel, donc ne lui
   apprenait rien. Cette ligne-là tient en quatre mots et remplace un quart
   d'heure de doute — elle mérite donc d'être lisible, pas discrète. */
.login-compte {
  background: var(--fond-doux, #f8fafc);
  border: 1px solid var(--bord, #e2e8f0);
  border-radius: 9px;
  padding: 8px 12px;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--texte-doux);
}
/* ⚠ L'adresse sur SA PROPRE LIGNE, et pas à la suite de l'étiquette.
   Michel, capture du 26/08/2026 : « contact@mib-prevention.f | r ». Le « r »
   seul à la ligne suivante — une adresse coupée en deux au milieu d'un mot se
   relit mal, et c'est précisément la chose qu'on demande à quelqu'un de lire
   pour comprendre pourquoi on lui refuse l'entrée.

   La cause était « word-break: break-all » : il coupe n'importe où dès que ça
   dépasse. Or ça ne dépassait que parce que l'étiquette « Connecté en tant
   que » mangeait la moitié de la ligne. On rend donc la largeur entière à
   l'adresse, et l'on ne coupe plus qu'en dernier recours — « anywhere » ne
   coupe que si aucune autre solution n'existe, là où « break-all » coupe
   d'abord et regarde ensuite. */
.login-compte strong {
  display: block;
  margin-top: 2px;
  color: var(--texte);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.login-form { text-align: left; display: flex; flex-direction: column; }
.login-form .label { margin-top: 12px; }
.login-btn { margin-top: 18px; width: 100%; justify-content: center; padding: 12px; font-size: 15px; }
.login-erreur { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 8px;
  padding: 8px 12px; font-size: 13.5px; margin: 12px 0 0; }
.login-aide { margin-top: 16px; font-size: 12.5px; }
/* Acceptation des CGU intégrée au formulaire de connexion */
.login-cgu { display: flex; gap: 9px; align-items: flex-start; margin: 16px 0 0;
  font-size: 13px; line-height: 1.45; cursor: pointer; color: var(--texte-doux); }
.login-cgu input { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 auto; cursor: pointer; }
.login-cgu a { color: var(--primaire); font-weight: 600; text-decoration: underline; }
.login-cgu.verrouille, .login-cgu.verrouille input { cursor: not-allowed; }
.login-cgu.verrouille > span { opacity: .68; }
.login-cgu-aide { margin: 4px 0 0 27px; font-size: 11.5px; color: var(--texte-doux); line-height: 1.35; }
.login-btn:disabled { opacity: .55; cursor: not-allowed; }
/* Sortie de secours de l'écran des CGU : discrète, car elle ne sert qu'en
   panne — mais toujours là, pour qu'un écran qui barre l'entrée s'ouvre. */
.btn-discret { width: 100%; justify-content: center; margin-top: 10px;
  background: none; border: none; color: var(--texte-doux); font-size: 13px;
  text-decoration: underline; }
.btn-discret:hover { background: none; color: var(--primaire); }
.btn-deco { width: 100%; justify-content: center; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .menu-bascule { display: block; }
  .barre-laterale {
    position: fixed; left: 0; top: var(--hauteur-entete); height: calc(100vh - var(--hauteur-entete));
    transform: translateX(-100%); transition: transform 0.2s; z-index: 35; box-shadow: var(--ombre-forte);
  }
  .barre-laterale.ouverte { transform: none; }
  .contenu { padding: 20px 16px 80px; }
  .form-grille, .obs-deux { grid-template-columns: 1fr; }
  .hero { padding: 24px 20px; }
  .hero h1 { font-size: 23px; }
}

/* ── Impression ── */
@media print {
  .entete, .barre-laterale, .actions, .actions-sticky, .menu-bascule { display: none !important; }
  .contenu { padding: 0; }
}

/* ── Fraîcheur du fonds réglementaire ── */
.fraicheur {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline;
  background: var(--primaire-clair); border: 1px solid var(--primaire-bord);
  border-radius: 10px; padding: 10px 14px; margin: 0 0 16px;
  font-size: 13px; color: var(--texte); line-height: 1.5;
}
.fraicheur strong { color: var(--primaire-fonce); }
.fraicheur a { color: var(--primaire); font-weight: 600; text-decoration: underline; }
.fraicheur-perimee {
  background: #fff7ed; border-color: #fed7aa;
}
.fraicheur-perimee strong { color: #9a3412; }
.fraicheur-perimee a { color: #9a3412; }

/* « À valider » n'est pas « périmé », et la couleur doit le dire aussi.
   L'orange du périmé signale une DÉGRADATION — quelque chose qui était bon
   et ne l'est plus. Ici rien ne s'est dégradé : le fonds n'a simplement
   jamais été confronté à la source. Le bleu de l'attention convient, et il
   n'apprend pas à ignorer l'orange. */
.fraicheur-a-valider {
  background: #eff6ff; border-color: #bfdbfe;
}
.fraicheur-a-valider strong { color: #1e40af; }
.fraicheur-a-valider a { color: #1d4ed8; }

/* Le marqueur d'une entrée dont la numérotation ou la rédaction demandent
   une relecture. Discret : il informe, il n'alarme pas — vingt marqueurs
   rouges dans une liste ne se lisent plus. */
.tag-a-verifier {
  background: #eff6ff; color: #1e40af; border: 1px dashed #93c5fd;
}
.resultat-a-verifier { border-left: 3px solid #bfdbfe; }

/* ── Espace du centre ──────────────────────────────────────────────────────
   Cartes d'indicateurs à icône, chiffres mis en avant, entrées progressives.
   Aligné sur le tableau de bord centre de la plateforme SSIAP. */

.carte-centre { background: linear-gradient(135deg, #fff 0%, var(--primaire-clair) 160%); }
.centre-entete { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.centre-identite { display: flex; align-items: center; gap: 14px; }
.centre-avatar {
  width: 48px; height: 48px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 24px; border-radius: 14px;
  background: linear-gradient(135deg, var(--primaire-fonce), var(--primaire));
  box-shadow: 0 4px 12px -4px rgba(4, 120, 87, 0.5);
}
.centre-identite h2 { margin: 0 0 1px; }
.centre-modules { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-module {
  background: var(--primaire); color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; letter-spacing: 0.01em;
}

.section-entete { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.section-entete h2 { margin: 0; }
.compteur-pastille {
  font-size: 11.5px; font-weight: 700; color: var(--primaire-fonce);
  background: var(--primaire-clair); border: 1px solid var(--primaire-bord);
  padding: 2px 9px; border-radius: 999px;
}

/* ── Indicateurs ── */
.tableau-bord {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px; margin: 16px 0 12px;
}
.stat-centre {
  position: relative; overflow: hidden;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 16px; padding: 18px 16px;
  box-shadow: var(--ombre);
  transition: transform 0.16s ease-out, box-shadow 0.16s ease-out;
  animation: apparait 0.32s ease-out both;
}
.stat-centre:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
/* Filet de couleur en haut : discret, il hiérarchise sans alourdir. */
.stat-centre::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--bord);
}
.stat-centre.accent::before { background: linear-gradient(90deg, var(--primaire), var(--primaire-vif)); }
.stat-centre.accent { background: linear-gradient(180deg, #fff 65%, var(--primaire-clair)); }
.stat-ico { font-size: 20px; line-height: 1; margin-bottom: 8px; }
.stat-valeur {
  font-family: var(--police-titre); font-size: 30px; font-weight: 800;
  line-height: 1.05; color: var(--texte-doux); letter-spacing: -0.02em;
}
.stat-centre.accent .stat-valeur { color: var(--primaire-fonce); }
.stat-libelle {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--texte-doux); margin-top: 5px;
}

/* ── Formateurs ── */
.liste-formateurs { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 22px; }
.ligne-formateur {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  border: 1px solid var(--bord); border-radius: 14px; padding: 12px 14px; background: #fff;
  transition: border-color 0.14s, box-shadow 0.14s;
  animation: apparait 0.3s ease-out both;
}
.ligne-formateur:hover { border-color: var(--primaire-bord); box-shadow: var(--ombre); }
.ligne-formateur.inactif { opacity: 0.6; }
.formateur-avatar {
  width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 50%; background: var(--primaire-clair); color: var(--primaire-fonce);
  font-weight: 800; font-size: 13px; letter-spacing: 0.02em;
}
.formateur-identite { display: flex; flex-direction: column; min-width: 170px; flex: 1; }
.formateur-identite small { color: var(--texte-doux); font-size: 12.5px; }
.badge-inactif {
  align-self: flex-start; margin-top: 3px; font-size: 11px; font-weight: 700;
  background: var(--bord); color: var(--texte-doux); padding: 1px 8px; border-radius: 999px;
}
.formateur-specialites { display: flex; flex-wrap: wrap; gap: 6px; }

/* Puce d'habilitation : cliquable, son état est porté par aria-pressed. */
.chip-specialite {
  border: 1px solid var(--bord); background: #fff; color: var(--texte-doux);
  font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.1s;
}
.chip-specialite:hover { border-color: var(--primaire); color: var(--primaire); transform: translateY(-1px); }
.chip-specialite:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
.chip-specialite.active { background: var(--primaire); border-color: var(--primaire); color: #fff; }
.chip-specialite.active:hover { background: var(--primaire-fonce); color: #fff; }
.chip-specialite:disabled { opacity: 0.5; cursor: wait; transform: none; }

/* ── État vide ── */
.etat-vide { text-align: center; padding: 26px 12px; color: var(--texte-doux); }
.etat-vide-ico { font-size: 34px; margin-bottom: 8px; opacity: 0.75; }
.etat-vide p { margin: 2px 0; }

/* ── Formulaire d'ajout ── */
.formulaire-formateur { border-top: 1px solid var(--bord); padding-top: 18px; }
.formulaire-formateur h3 { margin: 0 0 12px; font-size: 15px; }
.champs-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 8px; }
.modules-choix { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 14px 0; }
.case-module {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer;
  padding: 4px 10px; border: 1px solid var(--bord); border-radius: 999px;
  transition: border-color 0.14s, background 0.14s;
}
.case-module:hover { border-color: var(--primaire); background: var(--primaire-clair); }
.case-module input { width: 15px; height: 15px; cursor: pointer; }

/* ── Squelette de chargement ── */
.squelette {
  background: linear-gradient(90deg, var(--bord) 25%, #eef2f5 37%, var(--bord) 63%);
  background-size: 400% 100%; border-radius: 10px; animation: chargement 1.3s ease infinite;
}
.sq-titre { height: 22px; width: 42%; margin-bottom: 12px; }
.sq-ligne { height: 14px; width: 68%; }
.sq-stat { height: 104px; border-radius: 16px; }
@keyframes chargement { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
  .stat-centre, .ligne-formateur { animation: none; }
  .stat-centre:hover { transform: none; }
}

/* Rappel des autres modules du centre, gérés dans leur propre application. */
.note-autres-modules {
  border-top: 1px dashed var(--bord); padding-top: 9px; margin-top: 10px;
  color: var(--texte-doux);
}

/* ── Sessions ─────────────────────────────────────────────────────────────── */
.retour-sessions { margin-bottom: 12px; }

.liste-sessions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ligne-session {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 1px solid var(--bord); border-radius: 14px; padding: 12px 14px;
  background: #fff; font: inherit; color: inherit; cursor: pointer;
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.1s;
  animation: apparait 0.3s ease-out both;
}
.ligne-session:hover { border-color: var(--primaire-bord); box-shadow: var(--ombre); transform: translateY(-1px); }
.ligne-session:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
.session-corps { display: flex; flex-direction: column; flex: 1; min-width: 150px; }
.session-corps small { color: var(--texte-doux); font-size: 12.5px; }
.session-formateur { font-size: 13px; color: var(--texte-doux); white-space: nowrap; }
.session-fleche { font-size: 22px; color: var(--texte-doux); line-height: 1; }

/* Le statut porte une couleur propre : on le repère sans lire. */
.pastille-statut {
  display: inline-block; font-size: 11.5px; font-weight: 700; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bord); color: var(--texte-doux);
}
.pastille-statut[data-statut="en_cours"] { background: var(--primaire); color: #fff; }
.pastille-statut[data-statut="prevue"]   { background: var(--primaire-clair); color: var(--primaire-fonce); }
.pastille-statut[data-statut="terminee"] { background: #e2e8f0; color: #334155; }
.pastille-statut[data-statut="annulee"]  { background: #fee2e2; color: #b91c1c; }

.session-statut-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.select-statut { width: auto; min-width: 140px; }

.formulaire-session .champ { margin-bottom: 0; }
.champ-date { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--texte-doux); }

/* ── Co-animation ── */
.liste-coanim { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.chip-coanim {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--primaire-clair); color: var(--primaire-fonce);
  border: 1px solid var(--primaire-bord); border-radius: 999px;
  padding: 4px 6px 4px 12px; font-size: 13px; font-weight: 600;
}
.chip-retirer {
  border: 0; background: rgba(15, 23, 42, 0.08); color: inherit; cursor: pointer;
  width: 20px; height: 20px; border-radius: 50%; font-size: 11px; line-height: 1;
  display: grid; place-items: center; transition: background 0.14s;
}
.chip-retirer:hover { background: #fee2e2; color: #b91c1c; }
.chip-retirer:disabled { opacity: 0.5; cursor: wait; }

/* ── Stagiaires ── */
.liste-stagiaires { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 20px; }
.ligne-stagiaire {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--bord); border-radius: 12px; padding: 9px 12px; background: #fff;
}
.stagiaire-identite { display: flex; flex-direction: column; flex: 1; min-width: 140px; }
.stagiaire-identite small { color: var(--texte-doux); font-size: 12px; }
.presence { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texte-doux); cursor: pointer; }
.presence input { width: 16px; height: 16px; cursor: pointer; }
.formulaire-stagiaire { border-top: 1px solid var(--bord); padding-top: 16px; }
.formulaire-stagiaire h3 { margin: 0 0 10px; font-size: 15px; }

/* ── Travaux rattachés ── */
.groupe-travaux { margin-bottom: 18px; }
.groupe-travaux h3 { margin: 0 0 8px; font-size: 14.5px; }
.liste-travaux { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ligne-travail {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--bord); border-radius: 10px; padding: 8px 12px;
  font-size: 13.5px; background: var(--fond);
}

/* ── Bandeau de session ───────────────────────────────────────────────
   Rappel discret de la formation en cours, au-dessus de chaque écran :
   les travaux produits s'y rattachent, il faut donc la voir sans la subir. */
.bandeau-session {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--primaire-clair);
  border: 1px solid var(--primaire-bord);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.bandeau-session .bs-libelle {
  font-weight: 600;
  color: var(--primaire-fonce);
}
.bandeau-session select {
  padding: 6px 10px;
  border: 1px solid var(--bord);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  max-width: 100%;
}
.bandeau-session .bs-aide {
  color: var(--texte-doux);
}

/* ── Training CSE : la modale « groupe ou individuel » ──────────────────────
   Une modale et non un écran : le formateur ne vient pas lire, il vient
   lancer une partie. Deux choix, deux grands boutons — sur un vidéoprojecteur
   à 1280 × 720, une liste de liens ne se voit pas du fond de la salle. */
.tr-fond {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(15, 23, 42, .55);
  display: grid; place-items: center;
  padding: 16px;
  overflow-y: auto;
  backdrop-filter: blur(2px);
}
.tr-modale {
  position: relative;
  background: var(--carte);
  border-radius: var(--radius);
  box-shadow: var(--ombre-forte);
  padding: 26px 24px 20px;
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.tr-fermer {
  position: absolute; top: 10px; right: 12px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--texte-doux);
  padding: 6px 8px; border-radius: 8px;
}
.tr-fermer:hover { background: var(--fond); color: var(--texte); }
.tr-titre {
  font-family: var(--police-titre);
  font-size: 22px; margin: 0 0 4px; color: var(--primaire-fonce);
}
.tr-sous { margin: 0 0 14px; color: var(--texte-doux); font-size: 14px; }
.tr-session {
  margin: 0 0 16px; padding: 8px 12px;
  background: var(--primaire-clair);
  border: 1px solid var(--primaire-bord);
  border-radius: 10px;
  font-size: 13.5px; color: var(--primaire-fonce); font-weight: 600;
}
.tr-erreur {
  margin: 12px 0 0; padding: 10px 12px;
  background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px;
  color: #991B1B; font-size: 13.5px;
}
.tr-choix {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  font: inherit; color: var(--texte);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.tr-choix:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--ombre-forte);
  border-color: var(--primaire-bord);
}
.tr-choix:disabled { opacity: .6; cursor: progress; }
.tr-ico { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.tr-corps { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.tr-corps strong { font-size: 16px; }
.tr-corps small { color: var(--texte-doux); font-size: 13px; line-height: 1.45; }
.tr-fleche { color: var(--primaire); font-weight: 700; flex: 0 0 auto; }

/* Sur un téléphone, la flèche ne sert à rien et vole de la largeur au texte. */
@media (max-width: 480px) {
  .tr-modale { padding: 22px 16px 16px; }
  .tr-fleche { display: none; }
  .tr-choix { padding: 14px; gap: 10px; }
}

/* ── Tableau de bord CSE ────────────────────────────────────────────────────
   Trois blocs, du plus large au plus précis : les sessions, les stagiaires,
   ce qui a coincé. Rien d'autre — un tableau de bord qui montre tout ne
   montre rien. */
.tb-sessions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 12px; margin-bottom: 26px;
}
.tb-session {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--ombre);
}
/* La session sur laquelle on travaille se reconnaît d'un coup d'œil : c'est
   à elle que se rattache tout ce que l'on produit ensuite. */
.tb-session.actif { border-color: var(--primaire); background: var(--primaire-clair); }
.tb-session-tete { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tb-session-tete strong { font-size: 15px; }
.tb-statut { font-size: 12px; color: var(--texte-doux); white-space: nowrap; }
.tb-session-dates { font-size: 13px; color: var(--texte-doux); margin: 4px 0 10px; }
.tb-session-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; }
.tb-ici { color: var(--primaire-fonce); font-weight: 600; font-size: 12.5px; }

.tb-table {
  border: 1px solid var(--bord); border-radius: var(--radius);
  overflow: hidden; background: var(--carte); margin-bottom: 20px;
}
.tb-ligne {
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 10px; padding: 10px 14px; font-size: 13.5px;
  border-top: 1px solid var(--bord);
}
.tb-ligne.tb-2 { grid-template-columns: minmax(0, 5fr) minmax(0, 1fr); }
.tb-ligne:first-child { border-top: 0; }
.tb-entete { background: var(--fond); font-weight: 600; color: var(--texte-doux); font-size: 12.5px; }
.tb-ligne span { min-width: 0; overflow-wrap: anywhere; }

.tb-erreur {
  background: #FEF2F2; border: 1px solid #FECACA; border-radius: var(--radius);
  padding: 12px 14px; margin: 12px 0; font-size: 13.5px; color: #991B1B;
}
.tb-erreur .aide { color: #B45309; margin-top: 6px; }

/* Sur un téléphone, quatre colonnes deviennent illisibles : la ligne se plie
   en deux, l'intitulé au-dessus des chiffres. */
@media (max-width: 620px) {
  .tb-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .tb-ligne span:first-child { grid-column: 1 / -1; font-weight: 600; }
  .tb-ligne.tb-2 { grid-template-columns: minmax(0, 1fr) auto; }
  .tb-ligne.tb-2 span:first-child { grid-column: auto; font-weight: 400; }
}

/* Les actions du tableau de bord : lancer, et relire. Côte à côte, elles se
   replient l'une sous l'autre sur un écran étroit plutôt que de déborder. */
.tb-actions {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 14px;
}

/* Le choix du programme, en tête de la modale Training : c'est lui qui décide
   des questions posées, il vient donc avant le mode de jeu. */
.tr-programme-champ { display: block; margin-bottom: 16px; }
.tr-programme-champ > span {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texte-doux); margin-bottom: 5px;
}
.tr-programme {
  width: 100%; padding: 9px 11px;
  border: 1px solid var(--bord); border-radius: 10px;
  font: inherit; font-size: 14px; background: #fff; color: var(--texte);
}
.tr-programme-detail {
  display: block; margin-top: 6px;
  color: var(--texte-doux); font-size: 12.5px; line-height: 1.45;
}

/* Ce qui attend d'être transmis — voir index.html et lib/synchro.js. */
.en-attente {
  margin-left: auto;
  font-size: 0.76rem;
  font-weight: 600;
  color: #7c2d12;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 9999px;
  padding: 4px 11px;
  white-space: nowrap;
}
.en-attente:hover { filter: brightness(0.97); }
.en-attente:focus-visible { outline: 2px solid #34D399; outline-offset: 2px; }

/* « Refusé » n'est pas « en attente », et ne doit donc pas s'habiller pareil :
   l'orange dit « patiente », le rouge dit « il faut faire quelque chose ».
   Voir le défaut 4 dans lib/synchro.js — une ligne refusée n'attend pas le
   réseau, elle attend qu'on s'en occupe. */
.en-attente-refus {
  color: #7f1d1d;
  background: #fef2f2;
  border-color: #fecaca;
}

/* Le détail de la file : ce qui coince, et la raison telle que le serveur l'a
   donnée. Elle est technique, et c'est voulu — elle doit pouvoir être recopiée
   mot pour mot. Une raison reformulée « en clair » est une raison perdue. */
.refus-liste { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.refus-liste li {
  border: 1px solid #fecaca; border-radius: 8px;
  background: #fef2f2; padding: 10px 12px; font-size: 13px;
}
.refus-liste code { font-size: 12px; color: #7f1d1d; word-break: break-all; }
.refus-liste small { color: var(--texte-doux); }
.refus-raison {
  display: block; margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.5; color: #7f1d1d;
  white-space: pre-wrap; word-break: break-word;
}

/* On affiche le local parce que le serveur n'a pas répondu — et on le dit. */
.repli-local {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 8px 12px;
  color: #7c2d12;
  margin-bottom: 10px;
}

/* ── L'arête d'Ishikawa ─────────────────────────────────────────────────────
   Le dessin est un miroir de la grille de saisie : il se refait à chaque
   frappe. Voir assets/js/lib/ishikawa-dessin.js. */
.ishikawa-dessin {
  margin: 14px 0 18px;
  padding: 10px;
  border: 1px solid var(--bordure, #e2e8f0);
  border-radius: 12px;
  background: #fcfdff;
  overflow-x: auto;
}
/* Le dessin porte ses couleurs et ses polices SUR SES PROPRES ÉLÉMENTS — voir
   l'en-tête de « lib/ishikawa-dessin.js ». Il ne reste donc ici que son
   encombrement : une largeur minimale pour que les cinq blocs ne se tassent
   pas sur un téléphone, le cadre défilant s'en chargeant.

   Les règles « .ish-arete », « .ish-os », « .ish-famille », « .ish-cause » et
   « .ish-vide » qui vivaient ici ont été retirées avec l'ancien dessin : une
   feuille de style qui habille un dessin absent ne dit rien quand on la lit,
   et elle contredit celui qui la remplace le jour où quelqu'un la rebranche. */
.ishikawa-svg { width: 100%; height: auto; min-width: 680px; }

/* ── Le tableau blanc : l'arbre projeté, et toujours modifiable ─────────────
   L'éditeur est DÉPLACÉ ici, pas recopié — il n'y a qu'un seul arbre. Voir
   « ouvrirTableauBlanc » dans modules/accidents.js. */
.tb-cadre {
  position: fixed; inset: 0; z-index: 200;
  background: #f8fafc;
  display: flex; flex-direction: column;
}
.tb-barre {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 18px;
  background: linear-gradient(120deg, var(--primaire-fonce, #064e3b), var(--primaire, #047857));
  color: #fff;
}
.tb-barre .tb-aide { font-size: 0.78rem; opacity: 0.85; margin-right: auto; }
/* La scène occupe tout le reste et défile dans les deux sens : un arbre large
   ne doit pas obliger à quitter le plein écran pour voir sa gauche. */
.tb-scene { flex: 1; overflow: auto; padding: 24px; }
/* Projeté, c'est vu du fond de la salle : on agrandit. « zoom » plutôt qu'une
   transformation, pour que le défilement suive la taille réelle.

   La règle vise l'ENFANT DIRECT de la scène, quel qu'il soit : depuis que les
   cinq outils d'analyse se projettent, ce n'est plus toujours l'arbre. Elle ne
   peut pas attraper la fiche d'un fait, qui se pose sur le cadre et non dans
   la scène — sans quoi un zoom sur un élément « position: fixed » déplacerait
   la fiche hors de l'écran, et l'on croirait le clic sans effet. */
.tb-scene > * { zoom: 1.3; }
@media (max-width: 900px) { .tb-scene > * { zoom: 1; } }

/* Ce qui part au mur quand un outil projette plusieurs morceaux à la fois :
   l'arête ET sa grille de saisie, la chaîne ET sa synthèse. Projeter le seul
   dessin donnerait une image morte, et il faudrait quitter la projection pour
   ajouter une cause — au moment précis où le groupe en trouve une. */
.zone-projetable { display: flex; flex-direction: column; gap: 14px; }

/* ── Une colonne projetée doit se LIRE en entier ───────────────────────────
   Mesuré sur l'AcciMap projeté : cinq colonnes à 180 px minimum, moins la
   croix de suppression, donnaient des champs où l'on lisait « L'opérateur a
   rem… ». Sur un écran de bureau on clique dans le champ et l'on fait défiler
   le texte ; PROJETÉ, personne ne peut faire ça — la salle voit une analyse
   tronquée, et le formateur doit lire à voix haute ce qui devrait s'afficher.

   On élargit donc le minimum d'une colonne pendant la projection : cinq
   niveaux deviennent deux rangées lisibles plutôt qu'une rangée illisible. La
   scène défile déjà dans les deux sens, la hauteur n'est pas un problème. */
.tb-scene .ishikawa-grille,
.tb-scene .niveaux-grille { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
/* Le champ occupe la largeur restante et se replie sur plusieurs lignes : la
   règle vit avec « .champ-cause », plus haut, car elle vaut aussi à l'écran de
   bureau — un facteur illisible n'est pas plus utile là-bas. */

/* ── La fiche d'un fait, PENDANT la projection ─────────────────────────────
   Elle se pose désormais DANS ce cadre (voir « lib/surcouche.js »), donc les
   « z-index » se comptent entre eux : 60 pour la fiche, 100 pour les
   notifications, au-dessus d'une scène qui n'en a pas. Rien à surenchérir.

   L'agrandissement, lui, n'est pas un ornement : la scène est à 1,35 et la
   fiche serait restée à 1, si bien que le groupe verrait l'arbre du fond de
   la salle et pas ce que l'animateur y écrit. Il porte sur la boîte et non
   sur le fond, pour que le voile couvre toujours tout l'écran. */
.tb-cadre .modale { width: min(680px, 100%); font-size: 1.06rem; }
.tb-cadre .modale-entete h3 { font-size: 1.25rem; }
.tb-cadre .ant-liste { max-height: 210px; }
.tb-cadre .ant-item { font-size: 15px; }
@media (max-width: 900px) {
  .tb-cadre .modale { width: min(560px, 100%); font-size: 1rem; }
}

/* ════════════════════════ ANALYSE DES RISQUES ════════════════════════════
   Michel, 26/08/2026 : « on peut faire un bouton analyse des risques qui est
   différent de l'analyse des causes ». Trois outils en tableau — JSA, APR,
   Kinney — qui partagent la même grille.
   ====================================================================== */

/* La mention sous l'intitulé de la barre latérale : « en amont » / « après
   l'accident ». Elle dit en trois mots ce qu'un stagiaire met une demi-journée
   à comprendre, et c'est pour ça qu'elle ne doit pas crier plus fort que le
   nom du module. */
.nav-quand {
  display: block;
  margin-left: 30px;
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.68;
  letter-spacing: 0.2px;
}

/* Le renvoi vers un outil qui vit ailleurs se distingue d'un outil d'ici :
   sans cela on clique en croyant rester, et l'on se retrouve dans une autre
   section sans comprendre pourquoi. */
.methode-renvoi { border-style: dashed; }

.aide-jumelle {
  margin: -6px 0 18px;
  padding: 10px 14px;
  border-left: 3px solid var(--primaire, #047857);
  background: var(--fond, #f8fafc);
  border-radius: 0 8px 8px 0;
}
.aide-jumelle a { font-weight: 600; }

/* ── La grille des tableaux d'analyse ──────────────────────────────────────
   Une grille et non un « table » : chaque cellule porte une zone de texte qui
   grandit avec son contenu, et un tableau HTML gère mal des hauteurs qui
   changent à la frappe. Les colonnes sont déclarées par outil, plus bas. */
.tableau-risques {
  margin: 14px 0 6px;
  border: 1px solid var(--bord, #e2e8f0);
  border-radius: 12px;
  overflow-x: auto;
}
.tr-entete, .tr-ligne {
  display: grid;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
}
.tr-entete {
  background: var(--fond, #f8fafc);
  border-bottom: 1px solid var(--bord, #e2e8f0);
  font-size: 12px;
  font-weight: 700;
  color: var(--primaire-fonce, #064e3b);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.tr-ligne + .tr-ligne { border-top: 1px solid var(--bord, #e2e8f0); }
.tr-ligne:nth-child(even) { background: #fcfdff; }

/* JSA : étape · dangers · niveau · mesures · retrait */
.tableau-risques .tr-entete,
.tableau-risques .tr-ligne { grid-template-columns: 1.3fr 1.3fr 110px 1.5fr 34px; min-width: 860px; }
/* APR : deux lignes par danger. Voir « rendre » dans modules/risques.js —
   à huit colonnes, la criticité sortait de l'écran, c'est-à-dire la colonne
   que les sept autres servent à produire. */
.tableau-apr .tr-entete,
.tableau-apr .tr-ligne { grid-template-columns: 1.1fr 1.1fr 1fr 1fr 34px; min-width: 780px; }
.tr-bloc + .tr-bloc { border-top: 2px solid var(--bord, #e2e8f0); }
.tr-bloc:nth-child(odd) { background: #fcfdff; }
.tableau-apr .tr-ligne-2 {
  grid-template-columns: minmax(340px, auto) 1fr;
  padding-top: 0;
}
.apr-cotation { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.apr-etiquette {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px; color: var(--texte-doux, #64748b);
}
.apr-etiquette .tr-badge { align-self: flex-start; }
.apr-mesures { flex: 1; }
/* Kinney : situation · F · P · G · résultat · retrait
   Les colonnes sont resserrées pour que le SCORE tienne dans la largeur d'un
   écran ordinaire : c'est la colonne qu'on vient lire, et elle était la
   première à sortir du cadre — donc la première à disparaître, alors que tout
   le reste n'existe que pour la produire. */
.tableau-kinney .tr-entete,
.tableau-kinney .tr-ligne { grid-template-columns: 1.3fr 148px 172px 152px 196px 34px; min-width: 940px; }

.tr-num { display: flex; gap: 8px; align-items: flex-start; }
.tr-rang {
  flex-shrink: 0;
  width: 24px; height: 24px; margin-top: 3px;
  display: grid; place-items: center;
  background: var(--primaire, #047857); color: #fff;
  border-radius: 50%; font-size: 12px; font-weight: 700;
}
.tr-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
}
.kinney-resultat { display: flex; flex-direction: column; gap: 5px; }
/* Ce que le score COMMANDE, écrit à côté du score : un nombre seul ne dit rien
   à un groupe, et « 270 » ne se traduit pas de tête en « mesures immédiates ». */
.kinney-action { font-size: 11.5px; color: var(--texte-doux, #64748b); line-height: 1.35; }

@media (max-width: 900px) {
  .nav-quand { display: none; }
}

/* ════════════════════════ RETOUR D'EXPÉRIENCE ═══════════════════════════
   Michel, 26/08/2026 : « le REX on pourrait l'intégrer à part, il pourrait
   servir à tout : analyse, visite, DUERP ».
   ====================================================================== */

.rex-bloc {
  margin: 18px 0;
  padding: 16px;
  border: 1px solid var(--bord, #e2e8f0);
  border-radius: 12px;
  background: #fcfdff;
}
.rex-titre {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--primaire-fonce, #064e3b);
}
/* La consigne qui accompagne chaque titre porte tout le sens de la méthode —
   « des enseignements, pas des réparations ». Elle doit se lire sans voler la
   vedette au titre : c'est un rappel, pas une injonction. */
.rex-aide {
  font-size: 0.78rem;
  font-weight: 500;
  font-style: italic;
  color: var(--texte-doux, #64748b);
}
.rex-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rex-item {
  display: grid;
  grid-template-columns: 26px 1fr 34px;
  gap: 8px;
  align-items: start;
}
.rex-item-action {
  grid-template-columns: 14px minmax(220px, 1fr) 150px 150px 120px 34px;
}
.rex-puce { padding-top: 6px; text-align: center; }
/* Le statut d'une action se voit à la couleur avant de se lire : dans une
   liste de dix, c'est ce qui montre d'un regard ce qui n'a pas bougé. */
.rex-statut {
  width: 10px;
  height: 10px;
  margin-top: 12px;
  border-radius: 50%;
  background: #dc2626;
}
@media (max-width: 900px) {
  .rex-item-action { grid-template-columns: 14px 1fr 34px; }
  .rex-item-action .champ-mini:not(.champ-cause) { grid-column: 2; }
}

/* ── L'exemple d'arbre des conséquences, dans sa carte ─────────────────────
   Le dessin est produit par le générateur de l'arbre des causes, sens inversé.
   Il tient dans la carte plutôt que derrière un lien : personne ne clique pour
   voir l'exemple d'une méthode qu'il ne connaît pas encore. */
.exemple-arbre {
  margin: 12px 0 4px; padding: 12px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
}
.exemple-arbre-titre {
  font-size: 12px; font-weight: 700; color: var(--primaire-fonce);
  margin-bottom: 8px;
}
/* Le dessin déborde sur un petit écran : il défile DANS son cadre plutôt que
   d'élargir la page — une carte qui pousse la mise en page se remarque bien
   plus qu'un exemple qu'on fait glisser. */
.exemple-arbre-dessin { overflow-x: auto; }
.exemple-arbre-dessin svg { min-width: 460px; }

/* ── Le quart d'heure sécurité ─────────────────────────────────────────────
   Deux écrans : la bibliothèque (douze cartes, quatre familles, une jauge de
   couverture annuelle) et la séance (cinq temps numérotés).

   Une seule règle de forme commande tout le reste : ce qui se PROJETTE doit
   rester lisible à cinq mètres, dans un atelier, sur un vidéoprojecteur fatigué.
   D'où les corps de texte des temps 1 à 3 nettement plus gros qu'ailleurs dans
   l'application, et des cibles de clic larges — l'animateur coche debout, une
   tablette dans l'autre main. */

.qh-couverture { margin: 14px 0 18px; }
.qh-jauge-barre {
  height: 10px; background: var(--bord); border-radius: 999px; overflow: hidden;
}
.qh-jauge-plein {
  height: 100%; background: linear-gradient(90deg, var(--primaire), var(--primaire-vif));
  border-radius: 999px; transition: width .4s ease;
}
.qh-jauge-texte { margin: 8px 0 0; font-size: 14px; color: var(--texte-doux); }

.qh-famille { margin-top: 22px; }
.qh-famille-titre {
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--primaire-fonce); margin: 0 0 10px;
}
/* 340 px et non 300 : en dessous, un titre de quatre mots se coupe en quatre
   lignes, et douze cartes de hauteurs différentes se lisent comme un désordre.
   Le titre est ce qui fait choisir — il doit tenir sur deux lignes au plus. */
.qh-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }

.qh-carte {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--ombre); color: inherit;
}
.qh-carte:hover {
  text-decoration: none; border-color: var(--primaire-bord); box-shadow: var(--ombre-forte);
}
.qh-carte-ico { font-size: 26px; line-height: 1.2; }
.qh-carte-corps { flex: 1; min-width: 0; }
.qh-carte-sujet { font-size: 12px; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .04em; }
.qh-carte-titre { margin: 2px 0 4px; font-size: 16px; font-family: var(--police-titre); }
.qh-carte-pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px;
}
.qh-carte-meta { font-size: 13px; color: var(--texte-doux); min-width: 0; }
.qh-carte-badge {
  flex: none; font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--fond); color: var(--texte-doux);
  border: 1px solid var(--bord); border-radius: 999px; padding: 3px 9px;
}
.qh-badge-tenu { background: var(--primaire-clair); color: var(--primaire-fonce); border-color: var(--primaire-bord); }

.qh-fil { margin: 0 0 6px; font-size: 13.5px; }
.qh-marque-exemple {
  margin-left: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  background: #fef3c7; color: #92400e; border-radius: 999px; padding: 2px 8px;
}
/* ── Les deux fonds ne se ressemblent pas ─────────────────────────────────
   Ce que le client écrit porte une marque, sur la carte comme dans la séance.
   Si un contenu de prévention est faux et que quelqu'un est blessé, il faut
   qu'on puisse dire qui l'a écrit sans ouvrir un dossier — une fiche du client
   qui ressemblerait aux nôtres nous ferait porter ce qu'elle affirme. */
.qh-marque-vous {
  margin-left: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  background: var(--marine-soft, #EFF6FF); color: #1D4ED8;
  border: 1px solid #BFDBFE; border-radius: 999px; padding: 2px 8px;
}
.qh-badge-vous { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
.qh-responsabilite {
  margin: 6px 0 0; padding: 8px 12px; font-size: 13px;
  background: #fffbeb; border-left: 3px solid #d97706; border-radius: 0 8px 8px 0;
}

/* ── L'éditeur de thématique ──────────────────────────────────────────────
   Une fiche s'écrit en plusieurs fois, entre deux réunions : les blocs sont
   nettement séparés pour qu'on retrouve où l'on s'était arrêté. */
.qhf-bloc {
  background: var(--fond); border: 1px solid var(--bord);
  border-radius: 12px; padding: 14px 16px; margin: 14px 0;
}
.qhf-liste { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.qhf-item {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 10px; padding: 10px 12px;
}
.qhf-item-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.qhf-item-tete .champ { flex: 1; }
.qhf-item-tete .aide-mini { margin: 0; }
.qhf-item-tete .btn-supprimer { margin-left: auto; }
.qhf-num {
  flex: none; min-width: 26px; height: 24px; padding: 0 6px; border-radius: 999px;
  background: var(--primaire-clair); color: var(--primaire-fonce);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.qhf-choix { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.qhf-choix-ligne { display: flex; align-items: center; gap: 8px; }
.qhf-choix-ligne .champ { flex: 1; }
.qhf-icone { max-width: 90px; font-size: 22px; text-align: center; }

/* Le minuteur. Il n'interdit rien — il rappelle. Un quart d'heure qui dure
   quarante minutes ne se retiendra pas, et personne ne regarde sa montre en
   animant. */
/* ── Le minuteur, qui ne quitte plus l'écran ──────────────────────────────
   Michel, 05/09/2026 : « il faut que le chronomètre reste visible pour
   maîtriser le temps ». Il était en haut d'un écran qui fait deux mètres de
   long : dès le temps 2 il était sorti du champ, et un chronomètre qu'on ne
   voit pas donne l'impression d'avoir le temps.

   « sticky » et non « fixed » : il reste dans le flux, ne recouvre rien, et
   n'a pas besoin qu'on réserve une bande en haut de la page. Il se cale sous
   l'en-tête de l'application, qui est elle-même « sticky » à z-index 40. */
.qh-chrono {
  position: sticky; top: var(--hauteur-entete); z-index: 20;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--fond); border: 1px solid var(--bord); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 16px;
  /* Il passe DEVANT le déroulé : sans ombre, le texte qui glisse dessous
     semblerait le traverser. */
  box-shadow: 0 2px 10px rgba(15, 23, 42, .10);
}
.qh-chrono-ico { font-size: 18px; }
.qh-chrono-valeur { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qh-chrono-depasse { color: #b45309; }
.qh-chrono-cible { color: var(--texte-doux); font-size: 14px; }
.qh-chrono-sep {
  width: 1px; align-self: stretch; background: var(--bord); margin: 0 2px;
}
/* Le temps EN COURS, et ce qu'il en reste. C'est la question que se pose
   l'animateur — « est-ce que je traîne sur ce temps-ci ? » —, et non le total
   écoulé depuis le début, auquel il ne peut plus rien. */
.qh-chrono-ou { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.qh-chrono-phase { font-weight: 700; font-size: 14px; }
.qh-chrono-reste {
  font-size: 12.5px; color: var(--texte-doux); font-variant-numeric: tabular-nums;
}
.qh-chrono-son { margin-left: auto; }
/* Les dix dernières secondes du temps en cours. Le décompte s'entend — le ton
   monte, le volume croît —, mais le son peut être coupé, se perdre dans le
   bruit d'un atelier, ou ne jamais partir sur un appareil qui le refuse. Il se
   voit donc aussi. */
.qh-chrono-final {
  color: #b45309; font-weight: 700;
  animation: qh-final 1s steps(2, jump-none) infinite;
}
@keyframes qh-final { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .qh-chrono-final { animation: none; }
}
/* Le changement de temps se VOIT autant qu'il s'entend : le bip peut être
   coupé, se perdre dans le bruit d'un atelier, ou ne jamais partir sur un
   appareil qui refuse le son. L'éclat, lui, arrive toujours. */
.qh-chrono-bascule { animation: qh-bascule 1.2s ease; }
@keyframes qh-bascule {
  0%   { background: var(--fond); }
  12%  { background: #fef3c7; box-shadow: 0 2px 18px rgba(217, 119, 6, .38); }
  100% { background: var(--fond); }
}
@media (prefers-reduced-motion: reduce) {
  .qh-chrono-bascule { animation: none; background: #fef3c7; }
}

.qh-temps {
  background: var(--fond); border: 1px solid var(--bord);
  border-radius: 12px; padding: 14px 16px; margin: 14px 0;
}
.qh-titre {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 4px; font-size: 16px; color: var(--primaire-fonce);
}
/* Même règle que le titre au-dessus : sans « gap », le titre et son aide se
   collaient — « La synthèsepour qui n'était pas là ». Un h4 n'est pas un h3,
   et la règle ne s'héritait pas. */
.qh-sous-titre {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.qh-numero {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--primaire); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.qh-duree {
  font-size: 11.5px; font-weight: 600; color: var(--texte-doux);
  border: 1px solid var(--bord); border-radius: 999px; padding: 1px 8px; background: var(--carte);
}
.qh-aide, .qh-aide-temps { font-weight: 400; font-size: 13px; color: var(--texte-doux); }
.qh-aide-temps { margin: 0 0 10px; }
.qh-sous-titre { margin: 14px 0 6px; font-size: 14px; color: var(--primaire-fonce); }
.qh-compteur { margin-left: auto; font-size: 13px; color: var(--texte-doux); font-weight: 600; }

.qh-ajout { display: flex; gap: 8px; margin-bottom: 8px; }
.qh-ajout .champ { flex: 1; }
.qh-presents { display: flex; flex-wrap: wrap; gap: 8px; }
.qh-present {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 999px;
  padding: 5px 6px 5px 12px; font-size: 14px;
}
.qh-present-nom { white-space: nowrap; }

/* Temps 1 — projeté, donc gros. On lit ça à cinq mètres. */
.qh-accroche { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 14px 16px; }

/* ── Le visuel de l'accroche ───────────────────────────────────────────────
   Le carton par défaut, ou la photo du site. Il occupe toute la largeur : c'est
   ce que la salle regarde pendant les deux minutes où personne ne parle, et une
   image timide n'accroche rien.

   Le rapport 16/9 est tenu par le « viewBox » du carton et par « aspect-ratio »
   pour les médias déposés : une photo de téléphone en portrait ferait sinon
   défiler la page entière au moment précis où l'on veut que tout le monde
   regarde le même écran. */
.qh-visuel { margin: -2px 0 12px; }
.qh-visuel svg,
.qh-visuel-media {
  display: block; width: 100%; border-radius: 10px;
  aspect-ratio: 16 / 9; object-fit: cover;
  background: #0f172a;
}
.qh-carton { line-height: 0; }
.qh-visuel-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px;
}
/* ⚠ Les commandes disparaissent à la projection. On ne montre pas « Changer
   l'image » à une équipe réunie devant un mur — et le bouton, lui, resterait
   cliquable par mégarde pendant qu'on parle. */
.tb-scene .qh-visuel-actions { display: none; }
.qh-situation { margin: 0 0 10px; font-size: 17px; line-height: 1.6; }
.qh-consigne { margin: 0; font-size: 15px; color: var(--primaire-fonce); }

/* Temps 2 — l'anomalie reste MASQUÉE tant que l'équipe ne l'a pas nommée.
   C'est cette règle-là qui fait la participation : la liste affichée d'emblée
   se lit à voix haute, et le temps 2 redevient un exposé. */
.qh-anomalies { display: flex; flex-direction: column; gap: 8px; }
.qh-anomalie {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 10px 12px;
}
.qh-anomalie-vue { border-color: var(--primaire-bord); background: var(--primaire-clair); }
.qh-anomalie-btn {
  flex: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--bord); background: var(--fond);
  font-size: 14px; font-weight: 700; color: var(--texte-doux);
}
.qh-anomalie-vue .qh-anomalie-btn { background: var(--primaire); border-color: var(--primaire); color: #fff; }
.qh-anomalie-corps { flex: 1; min-width: 0; }
.qh-anomalie-libelle { font-size: 16px; font-weight: 600; }
.qh-anomalie-expl { margin: 4px 0 0; font-size: 14px; color: var(--texte-doux); }
.qh-anomalie-masque { font-size: 14px; color: var(--texte-doux); font-style: italic; }

.qh-score { margin: 10px 0; font-size: 15px; font-weight: 700; color: var(--texte-doux); }
.qh-score-plein { color: var(--primaire); }

/* Temps 3 — les choix sont des boutons larges : on répond à la voix, quelqu'un
   coche. Après la réponse, la bonne se colore MÊME si l'on s'est trompé :
   l'écran doit dire ce qui est juste, pas seulement qu'on a eu faux. */
.qh-questions { display: flex; flex-direction: column; gap: 12px; }
.qh-question { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 12px 14px; }
.qh-question-enonce { font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.qh-question-num {
  display: inline-block; margin-right: 8px; font-size: 12px; font-weight: 700;
  color: var(--primaire); background: var(--primaire-clair);
  border-radius: 6px; padding: 1px 7px;
}
.qh-choix { display: flex; flex-direction: column; gap: 6px; }
.qh-choix-btn {
  text-align: left; cursor: pointer; font-size: 15px; font-family: inherit;
  background: var(--fond); border: 1px solid var(--bord); border-radius: 8px; padding: 9px 12px;
}
.qh-choix-btn:hover { border-color: var(--primaire-bord); }
.qh-choix-juste { background: var(--primaire-clair); border-color: var(--primaire); font-weight: 600; }
.qh-choix-faux { background: #fef2f2; border-color: #fecaca; }
.qh-choix-eteint { opacity: .5; }
.qh-explication { margin: 10px 0 0; font-size: 14px; line-height: 1.55; }

/* Temps 4 — la question est en gras, la zone est grande : c'est le temps qu'on
   saute, et une zone étroite dit qu'on n'attend pas grand-chose. */
.qh-parole { margin-bottom: 12px; }
.qh-parole-q { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--primaire-fonce); }
/* ── La prise de parole (lib/prise-de-parole.js) ───────────────────────────
   Elle a remplacé la liste de remarques libres qui vivait ici : une remarque
   tapée après coup est ce que l'animateur a retenu, un passage transcrit est ce
   qui a été dit — et lui seul peut se faire relire.

   Trois états à rendre lisibles d'un coup d'œil, parce que c'est sur eux que
   repose l'honnêteté du compte rendu : DIT (gris, la machine a entendu), RELU
   (vert, quelqu'un a vérifié), VALIDÉ (le nom de la personne, coché). */
.pp-bloc {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 12px; padding: 14px 16px; margin-top: 12px;
}
.pp-sous-titre {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 8px; font-size: 15px; color: var(--primaire-fonce);
}
.pp-aide { font-weight: 400; font-size: 13px; color: var(--texte-doux); }
.pp-barre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

/* ── Quand le navigateur ne sait pas transcrire ───────────────────────────
   Un encadré, et non une phrase grise en bout de ligne. Devant une équipe, on
   n'a pas le temps de comprendre pourquoi un bouton manque : il faut voir tout
   de suite qu'il y a une autre façon de faire, et laquelle. */
.pp-sans-micro {
  background: var(--maybe-soft, #FFFBEB); border: 1px solid #FDE68A;
  border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; font-size: 13.5px;
}
.pp-sans-micro p { margin: 0 0 6px; }
.pp-sans-micro ul { margin: 0; padding-left: 20px; }
.pp-sans-micro li { margin: 4px 0; }
.pp-sans-micro .aide-mini { margin: 8px 0 0; }
.pp-etat { font-size: 13px; color: var(--texte-doux); }

/* Le bouton d'écoute pulse en rouge : dans une salle, il faut qu'on VOIE que
   ça enregistre, depuis l'autre bout de la table. */
.pp-mic { border-color: var(--primaire); color: var(--primaire-fonce); font-weight: 600; }
.pp-mic-ecoute {
  background: #dc2626; border-color: #dc2626; color: #fff;
  animation: pp-pulse 1.1s ease-in-out infinite;
}
.pp-mic-ecoute:hover { background: #b91c1c; color: #fff; }
@keyframes pp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .5); }
  50% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
}

.pp-auteurs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.pp-auteurs-titre { font-size: 13px; color: var(--texte-doux); margin-right: 4px; }
.pp-chip {
  cursor: pointer; font-family: inherit; font-size: 13px;
  background: var(--fond); border: 1px solid var(--bord); border-radius: 999px; padding: 4px 12px;
}
.pp-chip:hover { border-color: var(--primaire-bord); }
.pp-chip-actif { background: var(--primaire); border-color: var(--primaire); color: #fff; font-weight: 600; }
.pp-chip-valide { background: var(--primaire-clair); border-color: var(--primaire); color: var(--primaire-fonce); font-weight: 600; }

.pp-passages { display: flex; flex-direction: column; gap: 8px; }
.pp-passage {
  border: 1px solid var(--bord); border-left: 3px solid #cbd5e1;
  border-radius: 8px; padding: 8px 10px; background: var(--fond);
}
.pp-passage-relu { border-left-color: var(--primaire); background: var(--carte); }
.pp-passage-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pp-auteur { max-width: 220px; }
.pp-marque {
  cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texte-doux); background: var(--carte);
  border: 1px solid var(--bord); border-radius: 999px; padding: 3px 10px;
}
.pp-marque:hover { border-color: var(--primaire-bord); }
.pp-passage-relu .pp-marque {
  color: var(--primaire-fonce); background: var(--primaire-clair); border-color: var(--primaire-bord);
}
/* Le × se range à droite, seul : le retrait d'un passage n'est pas un geste
   qu'on veut à côté du pouce qui marque « relu ». */
.pp-passage-tete .btn-supprimer { margin-left: auto; }
.pp-texte { width: 100%; resize: none; overflow: hidden; }
.pp-compte { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: var(--texte-doux); }
.pp-compte-plein { color: var(--primaire); }
.pp-validation { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--bord); }

/* ── L'enregistrement de la réunion ───────────────────────────────────────
   Le bloc est encadré et un peu plus sévère que le reste : ce qu'on y fait
   sort de l'appareil et concerne la voix de gens qui n'ont pas de bouton pour
   dire non. La ligne d'information vient AVANT les commandes, et le bouton
   reste fermé tant qu'elle n'est pas cochée — l'ordre à l'écran est l'ordre
   dans lequel les choses doivent se produire. */
.pp-enr {
  margin: 12px 0; padding: 12px 14px;
  background: var(--fond); border: 1px solid var(--line-strong, #cbd5e1); border-radius: 10px;
}
.pp-info {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.5; margin-bottom: 10px;
}
.pp-info input { margin-top: 3px; flex: none; }
.pp-noms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.pp-noms .aide-mini { width: 100%; margin: 0; }
.pp-effacement { margin-top: 8px; }
.pp-efface { margin: 0; font-size: 13px; color: var(--primaire-fonce); }
.pp-a-effacer { margin: 0; font-size: 13px; color: #92400e; }

/* La synthèse est SOUS le verbatim, et visiblement moins forte que lui :
   c'est un résumé pour qui n'était pas là, pas ce qui fait foi. Ce qui fait
   foi, ce sont les passages que les participants ont relus et validés. */
.qh-synthese { margin-top: 14px; }
.qh-synthese .actions { margin-top: 8px; }

.qh-suggestions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
.qh-suggestions .btn-mini { text-align: left; white-space: normal; }

.qh-precedent { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 14px 16px; margin: 14px 0; }
.qh-citation {
  margin: 8px 0; padding-left: 12px; border-left: 3px solid #f59e0b;
  font-size: 15.5px; font-style: italic;
}

.qh-cles { margin: 6px 0 0; padding-left: 20px; }
.qh-cles li { margin: 6px 0; font-size: 15px; }

.qh-liens { margin: 6px 0 0; padding-left: 20px; }
.qh-liens li { margin: 5px 0; font-size: 14.5px; }
.qh-source { color: var(--texte-doux); font-size: 13px; }

@media (max-width: 700px) {
  .qh-grille { grid-template-columns: 1fr; }
  .qh-carte-pied { flex-wrap: wrap; }
  .qh-ajout { flex-direction: column; }
}

/* ── L'application d'un seul outil ────────────────────────────────────────
   Le 1/4 d'heure sécurité s'ouvre aussi seul, à « /quart-heure/ », sans barre
   latérale : un menu d'un seul lien ferait cliquer quelqu'un pour arriver là
   où il est déjà. Le pied de barre — qui est connecté, par où sortir — n'a
   donc plus de fond sombre sous lui, et ses couleurs claires y deviendraient
   du blanc sur blanc. */
.barre-pied-solo {
  max-width: 960px;
  margin: 34px auto 0;
  border-top: 1px solid var(--bord, #e2e8f0);
  color: var(--texte-doux, #64748b);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.barre-pied-solo .pied-user { color: var(--texte, #0f172a); margin-bottom: 0; }
.barre-pied-solo .btn-deco {
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--bord, #e2e8f0);
  color: var(--texte, #0f172a); margin-top: 0;
}
.barre-pied-solo .btn-deco:hover { background: var(--bord, #e2e8f0); }