/* Feuille de style du back-office, fidèle au canevas des maquettes.
   Les jetons viennent de tokens.css (maquettes), les canaux de channels.css. */
@import url('tokens.css');
@import url('channels.css');

/* Polices : uniquement celles installées sur la plupart des PC,
   avec repli sans-serif (pas de police embarquée ni de service tiers). */
:root {
  --police: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--taille-texte);
  color: var(--texte);
  background: var(--fond);
}

/* --- Bandeau 56 px : hamburger, titre, profil (canevas Main) ------------- */
.bandeau {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--hauteur-bandeau);
  padding: 0 8px;
  background: var(--violet-bandeau);
  color: #fff;
}
.bandeau-titre {
  flex: 1;
  min-width: 0;
  padding-left: 4px;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bouton-bandeau {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
  min-height: 0;
}
.bouton-profil { border-radius: 50%; }
.cercle-profil {
  width: 34px;
  height: 34px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Bande d'état (canevas) ----------------------------------------------- */
.bande-etat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  min-height: 36px;
  padding: 6px 16px;
  background: var(--violet-teinte);
  border-bottom: 1px solid var(--bordure);
  font-size: 15px;
  color: var(--violet-bandeau);
}
.bande-element { display: inline-flex; align-items: center; gap: 6px; }
.bande-fort { font-weight: 600; }
.bande-droite { margin-left: auto; color: var(--texte-secondaire); }
.pastille-etat { fill: var(--violet-bandeau); }

/* --- Tiroir de navigation (canevas Mobile-Menu) ---------------------------- */
.voile {
  position: fixed;
  top: var(--hauteur-bandeau);
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: rgba(29, 26, 38, 0.45);
  border: 0;
}
.tiroir {
  position: fixed;
  top: var(--hauteur-bandeau);
  left: 0;
  bottom: 0;
  z-index: 31;
  width: 300px;
  max-width: 85%;
  background: #fff;
  box-shadow: 4px 0 24px rgba(29, 26, 38, 0.18);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.tiroir-entete {
  height: var(--hauteur-bandeau);
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 16px;
  background: var(--violet-bandeau);
  color: #fff;
}
.tiroir-titre { flex: 1; font-size: 18px; font-weight: 600; }
.tiroir-liens { display: flex; flex-direction: column; padding: 8px 0; }
.tiroir-liens a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  color: var(--texte);
  text-decoration: none;
}
.tiroir-liens a[aria-current="page"] {
  background: var(--violet-teinte);
  color: var(--violet-bandeau);
  font-weight: 700;
  box-shadow: inset 4px 0 0 var(--violet-action);
}
.tiroir-pied { margin-top: auto; padding: 16px; border-top: 1px solid var(--bordure); }

/* Sur grand écran, le menu déplié réduit la zone de contenu (il la pousse) ;
   en dessous de 900 px il passe en surimpression avec le voile. */
.bande-etat, .contenu { transition: margin-left .15s ease; }
@media (min-width: 900px) {
  .voile { display: none !important; }
  body.tiroir-ouvert .bande-etat,
  body.tiroir-ouvert .contenu { margin-left: 300px; }
}

/* --- Popover profil (canevas) ---------------------------------------------- */
.popover-profil {
  position: fixed;
  top: 60px;
  right: 8px;
  z-index: 31;
  width: 300px;
  max-width: calc(100% - 16px);
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  box-shadow: 0 12px 32px rgba(29, 26, 38, 0.18);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.profil-identite { display: flex; align-items: center; gap: 12px; }
.profil-detail { display: flex; flex-direction: column; min-width: 0; }
.initiales {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--violet-bandeau);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profil-pseudo { font-size: 18px; font-weight: 700; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce {
  background: var(--violet-teinte);
  color: var(--violet-bandeau);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.pleine-largeur { width: 100%; }

/* --- Contenu ----------------------------------------------------------------- */
.contenu { max-width: 880px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: var(--taille-titre-ecran); margin-top: 0; }
h2 { font-size: var(--taille-titre-carte); }

/* --- Formulaires : boutons à la fin, jamais de barre fixe (règle n° 5) ------- */
.form-etroit { max-width: 480px; }
.form-etroit, .form-large, .formulaire-etape { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.form-large, .formulaire-etape { width: 100%; }
.panneau-corps .form-large { margin-bottom: 0; }
fieldset {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-carte);
  padding: 12px 16px 16px;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
legend { font-weight: 700; font-size: var(--taille-titre-carte); padding: 0 6px; }
label { font-weight: 600; margin-top: 8px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="file"], select, textarea {
  min-height: var(--cible-tactile-min);
  padding: 8px 12px;
  border: 1px solid var(--bordure-champ);
  border-radius: var(--rayon-bouton);
  font: inherit;
  width: 100%;
}
textarea { min-height: 0; }
button {
  min-height: var(--cible-tactile-min);
  padding: 8px 20px;
  border: none;
  border-radius: var(--rayon-bouton);
  background: var(--violet-action);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
}
button.secondaire { background: #fff; color: var(--violet-action); border: 1.5px solid var(--violet-action); }
.case { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.case input { width: auto; min-height: 0; }
.inline { display: inline-block; margin: 0; }
.fin-de-formulaire { display: flex; align-items: center; gap: 12px; }

/* --- Tableaux : actions en colonne fixe (règles n° 6 et 7) -------------------- */
.tableau { border-collapse: collapse; width: 100%; margin-bottom: 24px; }
.tableau th, .tableau td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bordure); vertical-align: middle; }
.tableau thead th { color: var(--texte-secondaire); font-size: var(--taille-meta); }
.colonne-actions { width: 240px; }
.colonne-actions form { margin-right: 4px; }

/* --- Messages ------------------------------------------------------------------ */
.flash { padding: 12px 16px; border-radius: var(--rayon-carte); }
.flash.info { background: var(--violet-teinte); }
.flash.erreur { background: var(--orange-teinte); color: var(--orange-arbitrer); font-weight: 600; }
.alerte { color: var(--bordeaux-urgent); font-weight: 600; }
.ok { color: var(--bleu-fait); }
.note { color: var(--texte-secondaire); font-size: var(--taille-meta); }
.origine { color: var(--texte-secondaire); font-size: var(--taille-meta); margin: 0 8px; }
.ligne-reglage { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ligne-parametre { display: grid; grid-template-columns: minmax(180px, 340px) 1fr max-content; align-items: center; gap: 8px 12px; }
.ligne-parametre input, .ligne-parametre select { width: 100%; }
@media (max-width: 700px) { .ligne-parametre { grid-template-columns: 1fr; } }
.ligne-reglage input[type="text"] { flex: 1; min-width: 160px; width: auto; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Liste des scénarios (boutons en ligne, titre mis en avant) -------------- */
.ligne-scenario {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--bordure);
}
.ligne-scenario .titre-scenario {
  font-size: var(--taille-titre-carte);
  font-weight: 700;
  text-decoration: none;
  color: var(--violet-action);
  min-width: 200px;
  flex: 1 1 240px;
}
.ligne-scenario .meta-scenario { color: var(--texte-secondaire); font-size: var(--taille-meta); flex: 0 1 auto; }
.ligne-scenario .actions-scenario { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.btn-petit {
  min-height: 36px;
  padding: 0 12px;
  font-size: 15px;
}
a.btn-petit { display: inline-flex; align-items: center; }

/* --- Éditeur de scénario (maquette M3) : trois colonnes ----------------------- */
.contenu-large { max-width: 1480px; }
.contenu-large:has(.page-participant-large) { max-width: none; }
.entete-scenario { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--bordure); margin-bottom: 12px; }
.entete-scenario .bloc-titre { flex: 1 1 280px; display: flex; flex-direction: column; }
.entete-scenario h1 { margin: 0; font-size: 24px; }
.stats-scenario { font-size: 14px; color: var(--texte-secondaire); }

details.panneau { border: 1px solid var(--bordure); border-radius: var(--rayon-carte); margin-bottom: 10px; }
details.panneau > summary {
  cursor: pointer;
  list-style: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-weight: 700;
}
details.panneau > summary::before { content: '▸'; color: var(--violet-action); }
details.panneau[open] > summary::before { content: '▾'; }
details.panneau > .panneau-corps { padding: 4px 16px 16px; display: flex; flex-wrap: wrap; gap: 24px; }
.panneau-corps section { flex: 1 1 240px; display: flex; flex-direction: column; }
.panneau-corps section .pills { flex: 1; align-content: flex-start; }
.panneau-corps section > .ligne-reglage { margin-top: auto; padding-top: 10px; }
.panneau-corps h3 { margin: 4px 0 8px; font-size: 16px; }

.grille-editeur { display: grid; grid-template-columns: minmax(300px, 360px) minmax(360px, 1fr) minmax(280px, 340px); gap: 0; border: 1px solid var(--bordure); border-radius: var(--rayon-carte); overflow: hidden; }
@media (max-width: 1100px) { .grille-editeur { grid-template-columns: minmax(280px, 340px) 1fr; } .apercu-colonne { display: none; } }
@media (max-width: 760px) { .grille-editeur { grid-template-columns: 1fr; } .sequence { border-right: 0; border-bottom: 1px solid var(--bordure); } }

/* Colonne séquence */
.sequence { border-right: 1px solid var(--bordure); padding: 8px 0 16px; font-size: 15px; background: var(--fond); min-width: 0; }
.phase-tete { display: flex; align-items: center; gap: 6px; padding: 10px 8px 6px 16px; border-top: 1px solid var(--bordure); color: var(--violet-bandeau); }
.sequence > .phase-tete:first-child { border-top: 0; }
.phase-tete input {
  flex: 1;
  min-width: 80px;
  border: 0;
  padding: 4px 6px;
  min-height: 36px;
  font-weight: 700;
  color: var(--violet-bandeau);
  background: transparent;
}
.phase-tete input:focus { outline: 2px solid var(--violet-action); border-radius: 6px; }
.btn-icone {
  width: 32px; height: 32px; min-height: 32px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--texte-secondaire);
  border-radius: 6px; cursor: pointer; font-size: 15px;
}
.btn-icone:hover { background: var(--violet-teinte); color: var(--violet-bandeau); }
.liste-etapes { list-style: none; margin: 0; padding: 0; }
.etape-ligne { position: relative; }
.etape-ligne > a {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 2px 8px 2px 14px;
  color: var(--texte); text-decoration: none;
}
.etape-ligne > a:hover { background: var(--fond-ligne-active); }
.etape-ligne.actif > a { background: var(--violet-teinte); box-shadow: inset 4px 0 0 var(--violet-action); font-weight: 700; }
.etape-ligne .poignee { color: var(--bordure-champ); cursor: grab; flex: none; }
.etape-heure { width: 52px; flex: none; font-size: 13px; color: var(--texte-secondaire); font-weight: 400; }
.chip-canal {
  width: 24px; height: 24px; flex: none;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--violet-teinte); color: var(--violet-bandeau);
  font-weight: 700; font-size: 14px;
}
.chip-question { background: var(--violet-action); color: #fff; }
.chip-decision { background: #fff; color: var(--violet-bandeau); border: 1.5px solid var(--violet-bandeau); }
.chip-alerte { background: var(--bordeaux-urgent); color: #fff; }
.etape-ligne .etape-nom { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge-facultative { font-size: 11px; font-weight: 700; color: var(--texte-secondaire); border: 1.5px dashed var(--texte-desactive); border-radius: 4px; padding: 0 4px; flex: none; }
.icone-auto { color: var(--texte-secondaire); flex: none; }
.branches-resume { margin: 0 16px 4px 56px; padding-left: 12px; border-left: 2px solid var(--bordure); font-size: 14px; color: var(--texte-secondaire); }
.branches-resume span { display: flex; align-items: center; min-height: 30px; gap: 6px; }
.etape-mobile-actions { display: none; }
@media (max-width: 760px) {
  .etape-mobile-actions { display: flex; gap: 2px; }
  .etape-ligne .poignee { display: none; }
}
.ajout-etape { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 16px 10px; }
.ajout-etape button { min-height: 34px; padding: 0 10px; font-size: 14px; background: none; border: 0; color: var(--violet-action); font-weight: 600; }
.ajout-etape button:hover { background: var(--violet-teinte); border-radius: 6px; }
.ajout-phase { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--bordure); }
.ajout-phase input { min-height: 38px; }

/* Colonne éditeur d'étape */
.editeur-etape { padding: 20px 24px 32px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.editeur-etape-vide { padding: 48px 24px; color: var(--texte-secondaire); text-align: center; }
.editeur-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.editeur-tete .bloc-titre { flex: 1 1 220px; display: flex; flex-direction: column; }
.editeur-tete .surtitre { font-size: 14px; color: var(--texte-secondaire); }
.editeur-tete h2 { margin: 0; font-size: 22px; }
.btn-texte { min-height: 40px; padding: 0 12px; border: 0; background: transparent; color: var(--violet-action); font-weight: 600; font-size: 15px; }
.btn-texte.danger { color: var(--bordeaux-urgent); }
.segmente { display: inline-flex; border: 1.5px solid var(--violet-action); border-radius: var(--rayon-bouton); overflow: hidden; }
.segmente-vertical { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
.segmente-vertical button { text-align: left; border-bottom: 1px solid var(--bordure); }
.segmente-vertical button:last-child { border-bottom: 0; }
.segmente button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 0; background: #fff; color: var(--violet-action); font-size: 15px; }
.segmente button + button { border-left: 1.5px solid var(--violet-action); }
.segmente button[aria-pressed="true"] { background: var(--violet-action); color: #fff; }
.rangee { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; }
.rangee > label { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; margin-top: 0; }
.rangee > label.large { flex: 2 1 300px; }

/* Puces de cibles et de pièces jointes */
.pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 6px 0 12px;
  background: var(--violet-teinte); color: var(--violet-bandeau);
  border-radius: 999px; font-size: 15px; font-weight: 600;
}
.pill-fichier { background: #fff; border: 1px solid var(--bordure); color: var(--texte); border-radius: 8px; font-weight: 400; font-size: 14px; }
.pill .btn-icone { width: 28px; height: 28px; min-height: 28px; color: inherit; }
details.selecteur { position: relative; }
details.selecteur > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; color: var(--violet-action); font-weight: 600; border-radius: var(--rayon-bouton); }
details.selecteur > summary:hover { background: var(--violet-teinte); }
details.selecteur > .selecteur-corps { padding: 8px 12px; border: 1px solid var(--bordure); border-radius: var(--rayon-bouton); background: #fff; display: flex; flex-direction: column; gap: 4px; max-width: 420px; }

/* Priorité en pastilles radio */
.pilules-priorite { display: flex; gap: 8px; flex-wrap: wrap; }
.pilules-priorite label { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 15px; font-weight: 600; cursor: pointer; margin: 0; }
.pilules-priorite input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pilule-information { border: 1.5px solid var(--bleu-fait); color: var(--bleu-fait); }
.pilule-important { border: 1.5px solid var(--orange-arbitrer); color: var(--orange-arbitrer); background: var(--orange-teinte); }
.pilule-urgent { border: 1.5px solid var(--bordeaux-urgent); color: var(--bordeaux-urgent); }
.pilules-priorite label:has(input:checked) { outline: 2px solid currentColor; outline-offset: 2px; font-weight: 700; }
.pilules-priorite label:has(input:checked).pilule-urgent { background: var(--bordeaux-urgent); color: #fff; outline-color: var(--bordeaux-urgent); }
.pilules-priorite input:focus-visible + span { text-decoration: underline; }

/* WYSIWYG léger (texte des injects) */
.wysiwyg { border: 1.5px solid var(--bordure-champ); border-radius: var(--rayon-bouton); overflow: hidden; }
.wysiwyg-barre { display: flex; gap: 2px; padding: 4px; border-bottom: 1px solid var(--bordure); background: var(--fond-ligne-active); }
.wysiwyg-barre button { width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--texte); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.wysiwyg-barre button:hover { background: var(--violet-teinte); }
.wysiwyg-zone { padding: 10px 12px; min-height: 96px; font-size: 16px; line-height: 1.5; outline: none; }
.wysiwyg-zone:focus-visible { box-shadow: inset 0 0 0 2px var(--violet-action); }
.js-actif textarea[data-wysiwyg-source] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* Colonne aperçu */
.apercu-colonne { border-left: 1px solid var(--bordure); background: var(--fond-ligne-active); padding: 20px; display: flex; flex-direction: column; gap: 12px; align-items: center; position: static; }
.apercu-colonne h2 { align-self: stretch; margin: 0; font-size: 16px; }
.apercu-note { font-size: 13px; color: var(--texte-secondaire); text-align: center; }
.etiquette { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.champ-texte { display: flex; flex-direction: column; gap: 6px; }
.champ-note textarea { background: var(--fond-ligne-active); }
fieldset.sans-cadre { border: 0; padding: 0; margin: 0; }
fieldset.sans-cadre legend { font-size: inherit; padding: 0; margin-bottom: 4px; }
.champ-heure { width: 110px; }
.case .champ-heure, .case select { width: auto; min-width: 110px; }
.alerte-case { margin-top: 28px; }
.zone-depot-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1.5px dashed var(--bordure-champ); border-radius: var(--rayon-bouton); color: var(--violet-action); font-weight: 600; font-size: 14px; cursor: pointer; }
.zone-depot-chip:hover { background: var(--violet-teinte); }
.panneau-pleine-largeur { display: block; }
.zone-etape { min-width: 0; }
#zone-apercu:empty { display: none; }

/* --- Exercices : liste et préparation ------------------------------------------ */

.puce.statut-preparation { background: var(--violet-teinte); }
.puce.statut-session { background: #d7efdd; color: #1a7f37; }
.puce.statut-pause { background: #fdf3d7; color: #8a6d00; }
.puce.statut-terminee, .puce.statut-cloture, .puce.statut-archive { background: var(--violet-teinte); color: var(--texte-secondaire); }

.colonnes-exercice { align-items: start; }
.panneau-section { margin-bottom: 24px; }
.ajout-aligne { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px; }
.ajout-aligne label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 140px; }
.ajout-aligne button { flex: 0 0 auto; }
.fieldset-mode { border: 1px solid var(--bordure); border-radius: 8px; padding: 10px 14px; }
.fieldset-mode legend { padding: 0 6px; font-weight: 600; }
.ligne-revoquee { opacity: 0.55; }
.pastille-ok { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #1a7f37; }
.ligne-affectation td { background: var(--violet-teinte); }
.groupe-affectation { display: inline-flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-right: 20px; }

/* --- Pilotage ------------------------------------------------------------------ */

.grille-pilotage { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .grille-pilotage { grid-template-columns: 1fr; } }
.horloge-tplus { font-variant-numeric: tabular-nums; font-size: 1.25rem; }
.liste-pilotage { display: flex; flex-direction: column; gap: 8px; }
.etape-pilotage { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--bordure); border-radius: 8px; background: var(--fond); cursor: pointer; }
.etape-pilotage.selectionnee { outline: 2px solid var(--violet-action); }
.etape-pilotage-statut { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--texte-secondaire); }
.etat-declenchee > .etape-pilotage-statut { background: #1a7f37; }
.etat-planifiee > .etape-pilotage-statut, .etat-attente_reference > .etape-pilotage-statut { background: #2f6fde; }
.etat-attente_validation > .etape-pilotage-statut, .etat-echue > .etape-pilotage-statut { background: #c47c00; }
.etat-sautee > .etape-pilotage-statut, .etat-non_retenue > .etape-pilotage-statut { background: var(--bordure); }
.etat-sautee, .etat-non_retenue { opacity: 0.6; }
.etape-pilotage-corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.etape-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.etape-pilotage-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.puce-retard { background: #fde3d7; color: #a33b00; }
.puce-ouverte { background: #dceafc; color: #1d4f9c; }
.puce-validee { background: #d7efdd; color: #1a7f37; }
.lateral-pilotage .panneau-section { border: 1px solid var(--bordure); border-radius: 8px; padding: 12px 16px; }
.actions-detail { flex-wrap: wrap; }
.liste-presence { display: flex; flex-wrap: wrap; gap: 6px; }
.presence { padding: 2px 10px; border-radius: 999px; background: var(--violet-teinte); color: var(--texte-secondaire); font-size: 0.85rem; }
.presence.en-ligne { background: #d7efdd; color: #1a7f37; }
.chronologie { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
  max-height: 260px; overflow-y: auto; font-size: 0.9rem; }

/* --- Résultats agrégés ----------------------------------------------------------- */

.titre-resultats { margin: 12px 0 8px; }
.barre-resultat { display: grid; grid-template-columns: minmax(70px, 1fr) 2fr auto; gap: 8px; align-items: center; margin: 4px 0; }
.barre-piste { background: var(--violet-teinte); border-radius: 999px; height: 12px; overflow: hidden; }
.barre-remplie { display: block; height: 100%; background: var(--violet-action); border-radius: 999px; }
.bonne-reponse .barre-libelle { font-weight: 700; }
.bonne-reponse .barre-remplie { background: #1a7f37; }
.nuage-mots { line-height: 2; }
.nuage-mots span { margin-right: 10px; }
.liste-textes { margin: 0; padding-left: 20px; }
.liste-classement, .liste-classement-resultats { margin: 8px 0; padding-left: 24px; }
.liste-classement li { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--bordure); border-radius: 6px; margin-bottom: 4px; background: var(--fond); }
.ligne-echelle { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.notes-echelle { display: inline-flex; gap: 10px; }
.notes-echelle label { display: inline-flex; gap: 3px; align-items: center; }

/* --- Participant ------------------------------------------------------------------ */

.page-participant { max-width: 680px; margin: 0 auto; }
.fil-participant { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.element-fil { border: 1px solid var(--bordure); border-radius: 10px; background: var(--fond); overflow: hidden; }
.element-fil.non-lu { border-left: 4px solid var(--violet-action); }
.notif-bouton { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  text-align: left; cursor: pointer; font: inherit; color: inherit; }
.corps-element { padding: 4px 16px 14px; border-top: 1px solid var(--bordure); }
.pieces-fil { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.element-question { padding: 12px 16px; }
.entete-question { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.entete-question .puce { margin-left: auto; white-space: nowrap; }
.form-question { display: flex; flex-direction: column; gap: 8px; }
.form-question button[type="submit"] { align-self: flex-start; }
.resultats-question { border-top: 1px solid var(--bordure); margin-top: 10px; padding-top: 4px; }
.voile-alerte { position: fixed; inset: 0; background: rgba(20, 20, 30, 0.75); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.carte-alerte { background: var(--fond); border-radius: 12px; max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.indicateur-connexion { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: #a33b00; color: #fff; padding: 8px 16px; border-radius: 999px; display: flex;
  gap: 8px; align-items: center; z-index: 70; font-size: 0.9rem; }

/* --- Écran projeté ----------------------------------------------------------------- */

body.mode-ecran .bandeau, body.mode-ecran .bande-etat { display: none; }
body.mode-ecran .contenu { max-width: none; padding: 0; }
.page-ecran { min-height: 100vh; display: flex; flex-direction: column; background: #fff; color: var(--texte, #1d1a26); }
.ecran-entete { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px;
  font-size: 1.5rem; font-weight: 600; background: var(--violet-fonce, #3d2873); color: #fff; }
.ecran-tplus { font-variant-numeric: tabular-nums; }
.ecran-contenu { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 32px; gap: 16px; text-align: center; }
.ecran-horloge { font-size: clamp(4rem, 16vw, 11rem); font-variant-numeric: tabular-nums;
  font-weight: 700; letter-spacing: 0.04em; margin: 0; }
.ecran-message { font-size: clamp(1.6rem, 5vw, 3rem); margin: 0; }
.ecran-sous-titre { font-size: clamp(1.1rem, 3vw, 1.8rem); opacity: 0.8; margin: 0; }
.ecran-inject, .ecran-question { max-width: 1100px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--bordure); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(29, 26, 38, .08); padding: 32px 40px;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--texte); }
.ecran-inject h2, .ecran-question h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 18px;
  color: var(--texte); }
.ecran-options .case { font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin: 16px 0; color: var(--texte); }
.ecran-options input { width: 26px; height: 26px; }
.ecran-question .barre-resultat { font-size: clamp(1.2rem, 2vw, 1.6rem); }
.carte-qr { align-items: center; text-align: center; }
.carte-qr img { image-rendering: pixelated; width: min(70vw, 320px); }

/* --- Éditeur de questions : champs riches et options séparées ------------------- */

.champ-riche { border: 1px solid var(--bordure-champ); border-radius: var(--rayon-bouton);
  padding: 8px 10px; min-height: 2.4em; background: var(--fond); }
.champ-riche:focus-visible { outline: 2px solid var(--violet-action); }
.barre-inline { display: inline-flex; gap: 2px; margin-bottom: 4px; }
.barre-inline button { min-width: 32px; min-height: 28px; border: 1px solid var(--bordure);
  background: var(--fond); border-radius: 6px; cursor: pointer; font-size: 13px; }
.barre-inline button:hover { background: var(--violet-teinte); }
.liste-options { display: flex; flex-direction: column; gap: 6px; }
.ligne-option { display: flex; gap: 6px; align-items: flex-start; }
.ligne-option .option-riche { flex: 1 1 auto; border: 1px solid var(--bordure-champ);
  border-radius: var(--rayon-bouton); padding: 6px 10px; min-height: 1.8em; background: var(--fond); }
.ligne-option .actions-option { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.champ-texte .liste-options + button { align-self: flex-start; margin-top: 6px; }
textarea { resize: vertical; }

/* --- Tableaux de crise (participant et animation) -------------------------------- */

.onglets-participant { margin: 12px 0; display: inline-flex; }
.onglets-participant button { padding: 8px 14px; }
.filtres-tableau { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.filtres-tableau select { max-width: 160px; }
.liste-cartes { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.carte-tableau { border: 1px solid var(--bordure); border-radius: 10px; background: var(--fond);
  padding: 10px 14px; }
.carte-tableau header { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.carte-tableau .titre-carte { font-weight: 600; flex: 1 1 auto; }
.carte-nouvelle { border-left: 4px solid var(--violet-action); }
.carte-annulee .titre-carte, .carte-annulee > p, .ligne-annulee td { text-decoration: line-through; opacity: 0.6; }
.carte-retard { border-color: #b4231f; background: #fdecea; }
.puce.gravite-3 { background: #fde3d7; color: #a33b00; }
.puce.gravite-4 { background: #fdd8d6; color: #b4231f; }
.statut-tableau { background: var(--violet-teinte); }
.form-tableau { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--bordure);
  border-radius: 10px; padding: 12px 14px; margin-top: 10px; background: var(--fond-ligne-active); }
.zone-edition { margin-top: 8px; }
.zone-conflit { color: #a33b00; }

/* --- Fiche de mission ---------------------------------------------------------------- */

.carte-fiche { max-width: 760px; }
.fiche-mission { background: var(--fond); }
.bandeau-exercice { text-align: center; font-weight: 800; letter-spacing: 0.3em;
  border: 2px solid #b4231f; color: #b4231f; padding: 4px; margin: 6px 0; }
.fiche-entete { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px;
  border-bottom: 2px solid var(--texte); padding-bottom: 6px; margin-bottom: 10px; }
.bloc-fiche { border: 1px solid var(--bordure); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px;
  break-inside: avoid; }
.bloc-fiche h3 { margin: 0 0 6px; }
.fiche-pied { margin-top: 14px; }
.zone-visa { display: inline-block; border: 1px solid var(--texte); padding: 18px 10px 4px; min-width: 240px; }
.fiche-qr { text-align: right; }
.ecran-tableau { max-width: 1200px; width: 100%; background: #fff; border: 1px solid var(--bordure);
  border-radius: 16px; padding: 24px 32px; color: var(--texte); }
.tableau-ecran { font-size: 1.4rem; color: inherit; }
.tableau-ecran td { border-bottom: 1px solid var(--bordure); padding: 8px 12px; }

/* --- Mur, veille, applications, prévol, modération des textes --------------------- */

.grille-applications { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 14px; margin: 16px 0; }
.application { display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.application-icone { position: relative; width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; }
.badge-nonlus { position: absolute; top: -6px; right: -6px; background: #b4231f; color: #fff;
  border-radius: 999px; min-width: 20px; height: 20px; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.carte-conversation { text-align: left; width: 100%; cursor: pointer; font: inherit; color: inherit;
  display: flex; flex-direction: column; gap: 2px; }
.fil-veille { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.publication-veille { border: 1px solid var(--bordure); border-radius: 10px; padding: 10px 14px;
  background: var(--fond); }
.publication-veille img, .publication-veille video { max-width: 100%; border-radius: 8px; margin-top: 6px; }
.commentaires-veille { border-top: 1px solid var(--bordure); margin-top: 6px; padding-top: 4px; }
#bandeau-nouvelles { position: sticky; top: 60px; z-index: 5; margin: 8px 0; }
.sous-question { border: 1px dashed var(--bordure); border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.etat-prevol-conforme { background: #d7efdd; color: #1a7f37; }
.etat-prevol-attention { background: #fde3d7; color: #a33b00; }
.etat-prevol-non_verifie { background: var(--violet-teinte); }
.ligne-ancienne td { background: #fdf3d7; }
.textes-moderation p { margin: 4px 0; }
.texte-masque { opacity: 0.5; text-decoration: line-through; }
.chronologie-pleine { max-height: none; }
.rapport-retex textarea { width: 100%; }
body.impression-rapport > :not(.contenu) { display: none !important; }

/* --- Navigation de l'exercice par onglets (US-EXE-16) ------------------------------ */

.onglets-exercice { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--bordure);
  margin: 0 0 16px; }
.onglets-exercice a { padding: 8px 14px; color: var(--texte); text-decoration: none;
  border-radius: 6px 6px 0 0; font-weight: 600; font-size: 15px; }
.onglets-exercice a:hover { background: var(--violet-teinte); }
.onglets-exercice a.onglet-actif { background: var(--violet-action); color: #fff; }
.entete-exercice .lien-ecran { display: inline-flex; align-items: center; gap: 4px;
  margin-right: 10px; font-size: 14px; }
.entete-exercice .lien-ecran a { display: inline-flex; align-items: center; gap: 4px; }

/* Icônes d'action compactes, libellé au survol (US-EXE-12) */
.bouton-icone { border: 1px solid var(--bordure); background: #fff; border-radius: 8px;
  min-height: 0; padding: 0; width: 34px; height: 30px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; color: var(--texte); vertical-align: middle; flex: none; }
.bouton-icone svg { display: block; }
.bouton-icone:hover { background: var(--violet-teinte); }
.bouton-icone.danger { color: var(--rouge, #a3001b); }
.colonne-icones { white-space: nowrap; }

/* Icône d'information des réglages (US-EXE-02) */
.aide-info { display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--violet-action);
  color: var(--violet-action); font-size: 12px; font-weight: 700; font-style: normal;
  cursor: help; vertical-align: middle; margin-left: 4px; flex: none; }
.ligne-reglage { display: flex; align-items: center; gap: 4px; margin: 6px 0; }

/* Un champ par ligne dans les réglages, groupes de même nature admis */
.form-reglages > input, .form-reglages > select, .form-reglages > textarea { max-width: 480px; }
.fieldset-domaines .ajout-aligne { margin-top: 8px; }

/* Fenêtre modale générique */
.carte-modale { max-width: 560px; width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px); overflow-y: auto; text-align: left; cursor: default; }
.entete-modale { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px; }
.entete-modale h3 { margin: 0; }

/* Infobulle du lien participant (US-EXE-12) */
.infobulle-lien { display: flex; gap: 6px; align-items: center; }
.infobulle-lien input { flex: 1; min-width: 0; font-size: 13px; }
.ligne-infobulle td { background: var(--violet-teinte); }

/* Veille par fil (US-VEI-01) */
.bloc-fil { border: 1px solid var(--bordure); border-radius: 8px; padding: 8px 10px; margin: 6px 0; }
.bloc-fil.fil-inactif { opacity: .65; }
.reglages-fil { margin-top: 6px; }

/* Bruit de veille (US-VEI-02) */
.liste-bruit { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow-y: auto; }
.ligne-bruit { display: flex; gap: 8px; align-items: center; text-align: left; border: 1px solid var(--bordure);
  background: #fff; color: var(--texte); border-radius: 8px; padding: 6px 10px; cursor: pointer;
  font: inherit; font-weight: 400; min-height: 0; }
.ligne-bruit:hover { background: var(--violet-teinte); }
.ligne-bruit .texte-bruit { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pilotage : colonne toujours visible, dépliage des étapes (US-LIV-02) */
.grille-pilotage { align-items: start; }
.lateral-pilotage { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow-y: auto; }
.depli-etape { border: 1px solid var(--bordure); border-top: 0; border-radius: 0 0 10px 10px;
  padding: 10px 14px; margin: -6px 0 8px; background: var(--violet-teinte); font-size: 15px; }
.depli-etape .contenu-inject { background: #fff; border-radius: 8px; padding: 8px 12px; margin: 6px 0; }
.options-depli { margin: 4px 0; padding-left: 20px; }
.options-depli .bonne-reponse { font-weight: 700; color: var(--vert, #1b7a47); }
.cible-override { margin: 6px 0; }
.contenu-projete { margin: 0 0 6px; }

/* Modèles de mail (US-ADM-13) */
.apercu-mail { background: var(--violet-teinte); border-radius: 8px; padding: 10px;
  white-space: pre-wrap; font-family: inherit; }

/* --- Participant : fil à gauche, détail au centre (US-PAR-03, maquette) ------------- */

.page-participant-large { max-width: none; }
.bande-participant { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  background: var(--violet-teinte); border-bottom: 1px solid var(--bordure);
  padding: 6px 16px; font-size: 15px; margin: 0 -16px 10px; }
.bande-participant .bande-droite { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.bande-statut { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--violet-fonce, #3d2873); }
.pastille-statut { width: 10px; height: 10px; border-radius: 50%; background: var(--bordure); }
.pastille-statut.statut-session { background: var(--vert, #1b7a47); }
.pastille-statut.statut-pause { background: #f2b84b; }

.layout-participant { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 0;
  border: 1px solid var(--bordure); border-radius: 12px; overflow: hidden; min-height: 60vh; }
.colonne-fil { border-right: 1px solid var(--bordure); display: flex; flex-direction: column;
  max-height: calc(100vh - 170px); overflow-y: auto; }
.centre-participant { padding: 16px 20px; min-width: 0; overflow-y: auto; max-height: calc(100vh - 170px); }

.espaces-participant, .filtres-fil { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 4px; }
.espaces-participant button, .filtres-fil button { border: 1px solid var(--bordure); background: #fff;
  color: var(--texte); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 14px;
  cursor: pointer; min-height: 30px; }
.espaces-participant button[aria-pressed="true"], .filtres-fil button[aria-pressed="true"] {
  background: var(--violet-action); color: #fff; border-color: var(--violet-action); font-weight: 600; }

.liste-fil { display: flex; flex-direction: column; }
.ligne-fil { display: flex; gap: 10px; align-items: flex-start; text-align: left; border: 0;
  border-top: 1px solid var(--bordure); background: #fff; color: var(--texte); padding: 10px 12px;
  cursor: pointer; font: inherit; font-weight: 400; border-radius: 0; min-height: 0; align-self: stretch; }
.ligne-fil:hover { background: var(--violet-teinte); }
.ligne-fil.ligne-active { background: var(--violet-teinte); box-shadow: inset 4px 0 0 var(--violet-action); }
.ligne-fil.non-lu .titre-ligne-fil { font-weight: 700; }
.corps-ligne-fil { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.meta-ligne-fil { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--texte-secondaire); }
.titre-ligne-fil { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-nouveau { font-size: 12px; font-weight: 700; color: var(--violet-action); }
.badge-repondre { display: inline-block; background: var(--violet-action); color: #fff; font-size: 12px;
  font-weight: 700; padding: 1px 8px; border-radius: 6px; }

.retour-fil { display: none; margin-bottom: 8px; }
.detail-element { border: 0; padding: 0; }
.carte-qr-profil { text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.carte-qr-profil img { width: 220px; height: 220px; image-rendering: pixelated; }
.carte-qr-profil .infobulle-lien { width: 100%; }

.toast-participant { position: fixed; top: 70px; right: 16px; z-index: 60; display: flex; flex-direction: column;
  gap: 2px; text-align: left; background: var(--violet-fonce, #3d2873); color: #fff; border: 0; border-radius: 12px;
  padding: 10px 16px; font: inherit; cursor: pointer; box-shadow: 0 10px 28px rgba(29, 26, 38, .3); max-width: 340px; }

@media (max-width: 899px) {
  .layout-participant { grid-template-columns: 1fr; border: 0; }
  .colonne-fil { border-right: 0; max-height: none; }
  .centre-participant { max-height: none; display: none; padding: 8px 4px; }
  .layout-participant.detail-ouvert .colonne-fil { display: none; }
  .layout-participant.detail-ouvert .centre-participant { display: block; }
  .retour-fil { display: inline-block; }
}

/* --- Éditeur de question : tableau d'options, barre de mise en forme (US-SCN-05) ---- */

.barre-inline { display: inline-flex; gap: 2px; margin-bottom: 2px; }
.barre-inline button { border: 1px solid var(--bordure); background: #fff; color: var(--texte);
  border-radius: 6px; min-width: 30px; min-height: 28px; height: 28px; font-size: 13px; font-weight: 400;
  cursor: pointer; padding: 0 7px; }
.barre-inline button:hover { background: #fff; border-color: var(--violet-action); }
.champ-riche, .option-riche { border: 1px solid var(--bordure); border-radius: 8px; padding: 8px 10px;
  min-height: 38px; background: #fff; }
.champ-riche:focus, .option-riche:focus { outline: 2px solid var(--violet-action); outline-offset: -1px; }
.ligne-option { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; }
.ligne-option .option-riche { flex: 1; min-width: 0; }
.actions-option { display: inline-flex; gap: 2px; align-items: center; padding-top: 6px; }
.marqueur-bonne { display: inline-flex; align-items: center; margin-right: 4px; }
.etiquette-bonne { float: right; font-weight: 400; }

/* Groupes de réglages intitulés (retour 2026-10-25 soir) */
.fieldset-groupe { border: 1px solid var(--bordure); border-radius: 10px; padding: 10px 14px; margin: 10px 0; max-width: 640px; }
.fieldset-groupe legend { font-weight: 600; padding: 0 6px; }
.fieldset-groupe input[type="number"], .fieldset-groupe select { max-width: 200px; }
.champs-format label { display: block; max-width: 420px; margin: 6px 0; }

/* Les liens-boutons pleins (Exporter le plan B…) ressemblent aux boutons */
a.bouton-plein { display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--cible-tactile-min); padding: 8px 20px; border-radius: var(--rayon-bouton);
  background: var(--violet-action); color: #fff; font-weight: 600; text-decoration: none; }
a.bouton-plein.btn-petit { min-height: 34px; padding: 4px 14px; font-size: 14px; }

/* --- Visite guidée (US-PAR-15) et test de notifications (US-LIV-15) ---------------- */

.voile-visite { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.halo-visite { position: fixed; border: 3px solid var(--violet-action); border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(29, 26, 38, .45); transition: all .25s ease; }
.carte-visite { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #fff; border-radius: 14px; box-shadow: 0 14px 40px rgba(29, 26, 38, .35);
  padding: 16px 20px; max-width: 460px; width: calc(100vw - 32px); pointer-events: auto; }
.carte-visite h3 { margin: 0 0 6px; }
.carte-visite .actions { margin-top: 10px; align-items: center; }
/* Une alerte (.voile-alerte, z-index supérieur) passe toujours devant la visite. */
.voile-alerte { z-index: 90; }

.bandeau-notif-test { width: 100%; display: flex; align-items: center; gap: 10px;
  background: #fff8e1; border: 1px solid #e5c76b; border-radius: 10px; padding: 8px 12px; margin-top: 6px; }