/* ===========================================================
   L'intérieur des trois logiciels. Tout est cadré sous #scene
   pour ne jamais déborder sur l'accueil sombre.
   Chaque produit apporte sa propre palette.
   =========================================================== */

#scene {
  --paper: #E8EAE6; --card: #FBFBF9; --card-2: #F1F3EF;
  --ink: #14181A; --ink-2: #3D454A; --muted: #6E7873;
  --rule: #CFD4CE; --rule-soft: #DFE3DD;
  --steel: #24506E; --steel-soft: #DCE6ED;
  --signal: #B33F1C; --signal-soft: #F6E2DA;
  --vert: #2E6B4F; --vert-soft: #DCEBE2;
  --shadow: 0 1px 2px rgba(20,24,26,.05), 0 10px 26px -18px rgba(20,24,26,.35);
  --m: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  background: var(--paper);
  color: var(--ink);
  min-height: 100%;
  display: block;
}

#scene[data-p="echu"] { --signal: #8C5514; --signal-soft: #F4E8D3; }

#scene[data-p="creneau"] {
  --paper: #EFE9DA; --card: #FAF6EC; --card-2: #F3EDDF;
  --ink: #13110D; --ink-2: #3B372E; --muted: #756F60;
  --rule: #D8D0BC; --rule-soft: #E4DDCB;
  --steel: #34505E; --steel-soft: #DEE6EA;
  --signal: #A9682E; --signal-soft: #F0E2CE;
  --vert: #4A6B3F; --vert-soft: #E1E8D5;
}

#scene .enveloppe {
  max-width: 1060px; margin: 0 auto;
  padding: 26px 22px 90px;
  display: flex; flex-direction: column; gap: 28px;
}

/* ---- barre du logiciel ---- */
#scene .titre-appli {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-bottom: 15px; border-bottom: 1px solid var(--rule);
}
#scene .titre-appli h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
#scene .titre-appli .quoi { font-family: var(--m); font-size: 12px; color: var(--muted); margin-left: 10px; }

#scene .horloge {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 8px 10px 8px 14px; box-shadow: var(--shadow);
}
#scene .horloge .j { font-family: var(--m); font-size: 13px; font-variant-numeric: tabular-nums; }
#scene .horloge.simule { border-color: var(--signal); background: var(--signal-soft); }
#scene .horloge.simule .j { color: var(--signal); font-weight: 600; }

/* ---- boutons et champs ---- */
#scene button, #scene .btn {
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
  padding: 7px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; transition: background .12s ease, border-color .12s ease;
}
#scene button:hover { background: var(--signal-soft); border-color: var(--signal); }
#scene button:focus-visible, #scene input:focus-visible, #scene textarea:focus-visible {
  outline: 2px solid var(--signal); outline-offset: 2px;
}
#scene button.primaire { background: var(--signal); border-color: var(--signal); color: #FFF7F1; font-weight: 650; }
#scene button.primaire:hover { filter: brightness(1.08); }
#scene button.fantome { background: transparent; border-color: transparent; color: var(--muted); }
#scene button.fantome:hover { background: var(--card-2); border-color: var(--rule); color: var(--ink); }
#scene button.mini { font-size: 12px; padding: 4px 9px; border-radius: 5px; }
#scene button.pont { background: var(--signal); border-color: var(--signal); color: #FFF7F1; font-weight: 650; }

#scene input, #scene textarea {
  font-family: inherit; font-size: 14px; color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; width: 100%; min-width: 0;
}
#scene textarea { line-height: 1.55; resize: vertical; }
#scene label.f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#scene label.f > span {
  font-family: var(--m); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

/* ---- sections ---- */
#scene .bloc { display: flex; flex-direction: column; gap: 15px; }
#scene .tete-bloc {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft);
}
#scene .tete-bloc h3 {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel);
}
#scene .tete-bloc .aparte { font-family: var(--m); font-size: 11.5px; color: var(--muted); }

#scene .compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; }
#scene .kpi {
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow);
}
#scene .kpi .n {
  font-family: var(--m); font-size: 27px; font-weight: 500; line-height: 1.1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
#scene .kpi.chaud .n { color: var(--signal); }
#scene .kpi.bon .n { color: var(--vert); }
#scene .kpi .k {
  font-family: var(--m); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

#scene .pastille {
  font-family: var(--m); font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 20px;
  background: var(--card-2); color: var(--muted); border: 1px solid var(--rule-soft); white-space: nowrap;
}
#scene .pastille.acier  { background: var(--steel-soft);  color: var(--steel);  border-color: transparent; }
#scene .pastille.signal { background: var(--signal-soft); color: var(--signal); border-color: transparent; }
#scene .pastille.vert   { background: var(--vert-soft);   color: var(--vert);   border-color: transparent; }

#scene .vide {
  padding: 26px 20px; text-align: center; color: var(--muted); font-size: 14px;
  border: 1px dashed var(--rule); border-radius: 8px;
}

/* ---- les messages prêts à partir ---- */
#scene .message {
  background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--signal);
  border-radius: 8px; box-shadow: var(--shadow); overflow: hidden;
}
#scene .message + .message { margin-top: 14px; }
#scene .message.neuf { animation: pousse .45s cubic-bezier(.2,.8,.3,1) both; }
@keyframes pousse {
  from { opacity: 0; transform: translateY(-9px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
#scene .message .tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--rule-soft); background: var(--card-2);
}
#scene .message .tete .qui { font-weight: 700; font-size: 15px; }
#scene .message .tete .ou { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
#scene .message .corps { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
#scene .message textarea { min-height: 178px; font-size: 14px; }
#scene .message .pied { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 18px 16px; }
#scene .message .pied .droite { margin-left: auto; display: flex; gap: 8px; }

#scene .deux { display: grid; grid-template-columns: 1.35fr 1fr; border-bottom: 1px solid var(--rule-soft); }
#scene .voie { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#scene .voie + .voie { border-left: 1px solid var(--rule-soft); background: var(--card-2); }
#scene .voie .canal {
  font-family: var(--m); font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--steel);
}
#scene .voie textarea.sms { min-height: 92px; }
#scene .compte-sms {
  font-family: var(--m); font-size: 10.5px; color: var(--muted); letter-spacing: .04em;
  display: flex; justify-content: space-between;
}

/* ---- listes ---- */
#scene .lignes {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 6px 18px 10px; box-shadow: var(--shadow);
}
#scene .ligne {
  display: grid; gap: 0 14px; align-items: center;
  padding: 12px 4px; border-top: 1px solid var(--rule-soft);
  grid-template-columns: 1fr 118px 116px 168px auto;
}
#scene[data-p="creneau"] .ligne { grid-template-columns: 136px 1fr 118px 148px auto; }
#scene .ligne:first-child { border-top: 0; }
#scene .ligne .nom { font-weight: 650; font-size: 14.5px; }
#scene .ligne .sous { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
#scene .ligne .quand { font-family: var(--m); font-size: 13px; font-variant-numeric: tabular-nums; }
#scene .ligne .quand .rel { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
#scene .ligne .montant { font-family: var(--m); font-variant-numeric: tabular-nums; font-size: 14px; text-align: right; }
#scene .ligne .suite { font-size: 13px; color: var(--ink-2); }
#scene .ligne .suite.chaud { color: var(--signal); font-weight: 650; }
#scene .ligne .actes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
#scene .ligne.clos { opacity: .5; }
#scene .jalons { display: flex; gap: 4px; margin-top: 4px; }
#scene .jalon {
  font-family: var(--m); font-size: 9.5px; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 3px; border: 1px solid var(--rule);
  color: var(--muted); background: transparent;
}
#scene .jalon.fait { background: var(--vert-soft); color: var(--vert); border-color: transparent; }
#scene .jalon.du   { background: var(--signal); color: #FFF8EE; border-color: transparent; font-weight: 700; }

/* ---- ajout ---- */
#scene .ajout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: 12px; align-items: end;
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 16px 18px; box-shadow: var(--shadow);
}
#scene .ajout .go { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }

/* ---- identité partagée ---- */
#scene .identite {
  background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--steel);
  border-radius: 8px; padding: 16px 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 14px;
}
#scene .identite .rappel { font-size: 13.5px; color: var(--ink-2); }
#scene .identite .rappel b { color: var(--ink); }
#scene .grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 13px; }

/* ---- licences ---- */
#scene .licences { display: flex; gap: 10px; flex-wrap: wrap; }
#scene .lic {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 10px 14px; cursor: pointer; user-select: none;
}
#scene .lic input { width: auto; margin: 0; accent-color: var(--signal); }
#scene .lic .t { font-size: 14px; font-weight: 650; }
#scene .lic .s { font-family: var(--m); font-size: 10.5px; color: var(--muted); }
#scene .lic.on { border-color: var(--signal); background: var(--signal-soft); }

#scene .pied-page {
  border-top: 1px solid var(--rule-soft); padding-top: 16px;
  font-family: var(--m); font-size: 11.5px; line-height: 1.7; color: var(--muted);
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
}

@media (max-width: 860px) {
  #scene .deux { grid-template-columns: 1fr; }
  #scene .voie + .voie { border-left: 0; border-top: 1px solid var(--rule-soft); }
  #scene .ligne, #scene[data-p="creneau"] .ligne { grid-template-columns: 1fr; gap: 6px; }
  #scene .ligne .montant { text-align: left; }
  #scene .ligne .actes { justify-content: flex-start; }
}

/* ===================== Dossier ===================== */

#scene[data-p="dossier"] { --signal: #3E6E86; --signal-soft: #DDE8EE; }

#scene .essais {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;
}
#scene .essai {
  background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--signal);
  border-radius: 8px; padding: 16px 18px 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 10px;
}
#scene .essai h4 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
#scene .essai p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); flex: 1; }
#scene .essai .go { display: flex; gap: 8px; flex-wrap: wrap; }
#scene .essai .adr {
  font-family: var(--m); font-size: 13px; font-weight: 600; color: var(--signal);
  background: var(--signal-soft); border-radius: 6px; padding: 8px 10px; word-break: break-all;
}

#scene .depot {
  border: 2px dashed var(--rule); border-radius: 8px; padding: 18px;
  text-align: center; font-size: 13.5px; color: var(--muted); cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
#scene .depot.survol { border-color: var(--signal); background: var(--signal-soft); color: var(--signal); }
#scene .depot b { color: var(--ink); }
#scene .jointes { display: flex; gap: 8px; flex-wrap: wrap; }
#scene .jointe {
  display: flex; align-items: center; gap: 8px;
  background: var(--card-2); border: 1px solid var(--rule); border-radius: 6px; padding: 5px 9px;
  font-size: 12.5px;
}
#scene .jointe img { width: 26px; height: 26px; object-fit: cover; border-radius: 3px; }
#scene .jointe button { padding: 1px 6px; font-size: 11px; }

#scene .courriel {
  background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--rule);
  border-radius: 8px; box-shadow: var(--shadow); overflow: hidden;
}
#scene .courriel + .courriel { margin-top: 12px; }
#scene .courriel.neuf { animation: pousse .45s cubic-bezier(.2,.8,.3,1) both; }
#scene .courriel[data-d="complet"]   { border-left-color: var(--vert); }
#scene .courriel[data-d="incomplet"] { border-left-color: var(--signal); }
#scene .courriel[data-d="attente"]   { border-left-color: var(--muted); }
#scene .courriel .haut {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px; background: var(--card-2); border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
}
#scene .courriel .de { font-weight: 650; font-size: 14.5px; }
#scene .courriel .ob { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
#scene .courriel .det { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
#scene .courriel .texte {
  font-size: 13.5px; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap;
  background: var(--card-2); border-radius: 6px; padding: 12px 14px; max-height: 190px; overflow: auto;
}
#scene .vignettes { display: flex; gap: 10px; flex-wrap: wrap; }
#scene .vignette {
  width: 132px; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: var(--card-2);
}
#scene .vignette img { width: 100%; height: 84px; object-fit: cover; display: block; }
#scene .vignette .n {
  font-family: var(--m); font-size: 9.5px; padding: 5px 7px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#scene .vignette .t {
  font-size: 11px; font-weight: 650; padding: 0 7px 6px; color: var(--vert);
}
#scene .vignette .t.ko { color: var(--signal); }

#scene .lecture {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
}
#scene .lu {
  background: var(--card-2); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 11px 13px;
}
#scene .lu .k {
  font-family: var(--m); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3px;
}
#scene .lu .v { font-size: 14px; font-weight: 600; }

#scene .verdict {
  border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 7px;
}
#scene .verdict.ok { background: var(--vert-soft); }
#scene .verdict.ko { background: var(--signal-soft); }
#scene .verdict .t { font-size: 15px; font-weight: 700; }
#scene .verdict.ok .t { color: var(--vert); }
#scene .verdict.ko .t { color: var(--signal); }
#scene .verdict ul { margin: 4px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--ink-2); }

#scene .reponse-mail {
  border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
}
#scene .reponse-mail .o {
  padding: 10px 14px; background: var(--card-2); border-bottom: 1px solid var(--rule-soft);
  font-size: 13.5px; font-weight: 650;
}
#scene .reponse-mail .c {
  padding: 14px; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; color: var(--ink-2);
}

#scene .patiente {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  font-family: var(--m); font-size: 12px; letter-spacing: .04em; color: var(--signal);
}
#scene .patiente .r {
  width: 10px; height: 10px; border-radius: 50%; background: var(--signal);
  animation: bat 1.1s ease-in-out infinite;
}
@keyframes bat { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } }

#scene .catalogue { display: flex; flex-direction: column; }
#scene .form {
  display: grid; grid-template-columns: 1fr 150px 1fr; gap: 0 16px;
  padding: 12px 4px; border-top: 1px solid var(--rule-soft); align-items: baseline;
}
#scene .form:first-child { border-top: 0; }
#scene .form .n { font-weight: 650; font-size: 14px; }
#scene .form .d { font-family: var(--m); font-size: 11.5px; color: var(--muted); }
#scene .form .r { font-size: 13px; color: var(--ink-2); }

@media (max-width: 860px) {
  #scene .form { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- les trois situations, chacune avec ce qu'elle démontre ---- */
#scene .choix { display: flex; flex-direction: column; gap: 8px; }
#scene .choix button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; white-space: normal; padding: 10px 13px; width: 100%;
}
#scene .choix button b { font-size: 14px; font-weight: 650; }
#scene .choix button span { font-size: 12px; line-height: 1.4; opacity: .78; font-weight: 400; }
#scene .choix button.primaire span { color: #FFF7F1; opacity: .88; }

/* ---- ce qui se passe, pendant que ça se passe ---- */
#scene .etapes {
  display: flex; flex-direction: column; gap: 9px;
  padding: 15px 18px; background: var(--card-2); border-bottom: 1px solid var(--rule-soft);
}
#scene .et {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--muted);
}
#scene .et .p {
  width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: var(--rule); color: var(--card); font-family: var(--m); font-size: 10px;
  font-weight: 700; display: grid; place-items: center;
}
#scene .et.faite { color: var(--ink-2); }
#scene .et.faite .p { background: var(--vert); color: #fff; }
#scene .et.encours { color: var(--signal); font-weight: 600; }
#scene .et.encours .p { background: var(--signal); }
#scene .et .r {
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  animation: bat 1.05s ease-in-out infinite;
}
#scene .et .chrono {
  margin-left: auto; font-family: var(--m); font-size: 11.5px;
  font-variant-numeric: tabular-nums; color: var(--signal);
}

/* ---- à quoi ça sert, dit franchement ---- */
#scene .gain { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#scene .gain > div {
  border-radius: 8px; padding: 13px 15px; font-size: 13px; line-height: 1.55;
}
#scene .gain b {
  display: block; font-family: var(--m); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 5px;
}
#scene .gain em { font-style: normal; font-weight: 650; }
#scene .gain .a { background: var(--card-2); color: var(--muted); border: 1px solid var(--rule-soft); }
#scene .gain .a b { color: var(--ink-2); }
#scene .gain .a em { color: var(--ink-2); }
#scene .gain .b { background: var(--vert-soft); color: var(--ink-2); }
#scene .gain .b b { color: var(--vert); }

@media (max-width: 720px) { #scene .gain { grid-template-columns: 1fr; } }

/* ---- l'adresse à l'écoute, en haut ---- */
#scene .adresse-live {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--m); font-size: 12px; color: var(--muted);
  background: var(--card); border: 1px solid var(--rule); border-radius: 20px; padding: 7px 14px;
}
#scene .adresse-live .pt {
  width: 8px; height: 8px; border-radius: 50%; background: var(--vert);
  animation: bat 2.2s ease-in-out infinite;
}

/* ---- le mode d'emploi, repliable ---- */
#scene details.essayer > summary {
  cursor: pointer; list-style: none;
  font-family: var(--m); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel); font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft);
}
#scene details.essayer > summary::-webkit-details-marker { display: none; }
#scene details.essayer > summary::before { content: "▸ "; }
#scene details.essayer[open] > summary::before { content: "▾ "; }
#scene details.essayer .essais { margin-top: 16px; }

/* ---- la barre d'outils ---- */
#scene .outils {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 13px 15px; box-shadow: var(--shadow);
}
#scene .filtres { display: flex; gap: 7px; flex-wrap: wrap; }
#scene .fchip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; padding: 6px 11px; border-radius: 20px;
}
#scene .fchip .c {
  font-family: var(--m); font-size: 10.5px; font-weight: 700;
  background: var(--card-2); color: var(--muted); border-radius: 12px; padding: 1px 6px;
}
#scene .fchip.actif { background: var(--signal); border-color: var(--signal); color: #FFF7F1; font-weight: 650; }
#scene .fchip.actif .c { background: rgba(255,255,255,.24); color: #FFF7F1; }
#scene .recherches {
  display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1fr) auto;
  gap: 12px; align-items: end;
}
#scene .recherches select {
  font-family: inherit; font-size: 14px; color: var(--ink); background: var(--card);
  border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; width: 100%;
}

/* ---- les actions du secrétariat ---- */
#scene .actions-dossier {
  display: flex; gap: 7px; flex-wrap: wrap;
  padding: 11px 18px; background: var(--card-2); border-bottom: 1px solid var(--rule-soft);
}
#scene .courriel .etiquettes { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

/* ---- les deux tableaux de synthèse ---- */
#scene .deux-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
#scene .barre {
  display: grid; grid-template-columns: 1fr 120px 34px; gap: 12px; align-items: center;
  padding: 9px 4px; border-top: 1px solid var(--rule-soft); font-size: 13.5px;
}
#scene .barre:first-child { border-top: 0; }
#scene .barre .lb { color: var(--ink-2); }
#scene .barre .bg { height: 8px; background: var(--card-2); border-radius: 4px; overflow: hidden; }
#scene .barre .rm { display: block; height: 100%; background: var(--signal); border-radius: 4px; }
#scene .barre .nb {
  font-family: var(--m); font-variant-numeric: tabular-nums; text-align: right; font-weight: 600;
}
#scene .parform {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  padding: 10px 4px; border-top: 1px solid var(--rule-soft);
}
#scene .parform:first-child { border-top: 0; }
#scene .parform .nm { font-size: 13.5px; font-weight: 650; }
#scene .parform .ch { grid-column: 1; font-family: var(--m); font-size: 11.5px; color: var(--muted); }
#scene .parform .ch b { color: var(--ink-2); }
#scene .parform button { grid-row: 1 / 3; grid-column: 2; }

@media (max-width: 900px) {
  #scene .deux-cols { grid-template-columns: 1fr; }
  #scene .recherches { grid-template-columns: 1fr; }
}

/* ---- reçu / manquant, côte à côte ---- */
#scene .bilan { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#scene .bilan .col { border-radius: 8px; padding: 13px 15px; }
#scene .bilan .tt {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--m); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 8px;
}
#scene .bilan .tt .n {
  font-size: 10.5px; font-weight: 800; border-radius: 10px; padding: 1px 7px;
}
#scene .bilan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
#scene .bilan li { font-size: 13.5px; line-height: 1.4; padding-left: 22px; position: relative; }
#scene .bilan li::before {
  position: absolute; left: 0; top: -1px; font-size: 13px; font-weight: 800;
}
#scene .bilan .rien { font-size: 13px; font-style: italic; opacity: .75; }
#scene .bilan .recue { background: var(--vert-soft); color: var(--ink-2); }
#scene .bilan .recue .tt { color: var(--vert); }
#scene .bilan .recue .tt .n { background: var(--vert); color: #fff; }
#scene .bilan .recue li::before { content: "✓"; color: var(--vert); }
#scene .bilan .manque { background: var(--signal-soft); color: var(--ink-2); }
#scene .bilan .manque .tt { color: var(--signal); }
#scene .bilan .manque .tt .n { background: var(--signal); color: #fff; }
#scene .bilan .manque li::before { content: "✗"; color: var(--signal); }
#scene .bilan .manque .rien { color: var(--vert); font-style: normal; font-weight: 600; }

/* ---- le sélecteur de mode ---- */
#scene .modes { display: flex; flex-direction: column; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft); }
#scene .modes .lbl {
  font-family: var(--m); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
#scene .mbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
#scene .mbtn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; white-space: normal; padding: 10px 13px;
}
#scene .mbtn b { font-size: 14px; font-weight: 700; }
#scene .mbtn span { font-size: 11.5px; line-height: 1.35; opacity: .75; font-weight: 400; }
#scene .mbtn.actif { background: var(--signal); border-color: var(--signal); color: #FFF7F1; }
#scene .mbtn.actif span { color: #FFF7F1; opacity: .9; }
#scene .mdetail {
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
  background: var(--card-2); border-radius: 6px; padding: 11px 13px;
}

/* ---- les relances en attente ---- */
#scene .rappels { display: flex; flex-direction: column; }
#scene .rappel-l {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 12px 15px; border-top: 1px solid var(--rule-soft);
  background: var(--card); border-left: 4px solid var(--signal);
}
#scene .rappel-l:first-child { border-top: 0; border-radius: 8px 8px 0 0; }
#scene .rappel-l:last-child { border-radius: 0 0 8px 8px; }
#scene .rappel-l b { display: block; font-size: 14px; }
#scene .rappel-l span { font-size: 12.5px; color: var(--muted); }

#scene .coin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (max-width: 720px) { #scene .bilan { grid-template-columns: 1fr; } }

/* ---- faire arriver un dossier ---- */
#scene .essayer-c {
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 16px 18px 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 13px;
}
#scene .tete-essai { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#scene .tete-essai .tt { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
#scene .tete-essai .ss { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
#scene .choix.trois { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; }

/* ---- le guide ---- */
#scene .guide {
  position: relative;
  display: flex; align-items: flex-start; gap: 13px; flex-wrap: wrap;
  border-radius: 8px; padding: 15px 44px 15px 17px; margin-bottom: 14px;
  animation: pousse .4s cubic-bezier(.2,.8,.3,1) both;
}
#scene .guide.en-cours { background: var(--signal-soft); border-left: 4px solid var(--signal); }
#scene .guide.fini { background: var(--vert-soft); border-left: 4px solid var(--vert); }
#scene .guide .ic {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; color: #fff;
}
#scene .guide.en-cours .ic { background: var(--signal); animation: bat 1.5s ease-in-out infinite; }
#scene .guide.fini .ic { background: var(--vert); }
#scene .guide .tx { flex: 1; min-width: 220px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
#scene .guide .tx b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 2px; }
#scene .guide .suite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; padding-left: 43px; }
#scene .guide .suite span {
  font-family: var(--m); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
#scene .fermer-guide {
  position: absolute; top: 10px; right: 10px; border: 0; background: transparent;
  font-size: 18px; line-height: 1; color: var(--muted); padding: 2px 7px;
}

/* ---- la bascule d'aperçu, bien en évidence ---- */
#scene .outils-droite { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#scene .bascule-vue {
  font-size: 13.5px; font-weight: 650; padding: 9px 15px; border-radius: 8px;
  background: var(--signal); border-color: var(--signal); color: #FFF7F1;
  box-shadow: 0 8px 20px -10px var(--signal);
}
#scene .bascule-vue:hover { filter: brightness(1.08); background: var(--signal); border-color: var(--signal); }
#scene .bascule-vue.actif { background: var(--card); color: var(--ink); border-color: var(--rule); box-shadow: none; }
#scene .bascule-vue .ico { font-size: 15px; }

/* ---- le damier ---- */
#scene .grille-visuelle {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 14px;
}
#scene .cv-carte {
  background: var(--card); border: 1px solid var(--rule); border-radius: 9px;
  padding: 14px 15px 15px; box-shadow: var(--shadow); cursor: pointer;
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .14s ease, box-shadow .14s ease;
}
#scene .cv-carte:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 18px 34px -18px rgba(0,0,0,.5); }
#scene .cv-tete { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
#scene .cv-nom { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
#scene .cv-form { font-size: 12px; color: var(--muted); line-height: 1.4; min-height: 32px; }
#scene .cv-vg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
#scene .cv-vg .vg {
  border: 1px solid var(--rule-soft); border-radius: 6px; overflow: hidden; background: var(--card-2);
}
#scene .cv-vg .vg.ko { border-color: var(--signal); }
#scene .cv-vg .vg img { width: 100%; height: 56px; object-fit: cover; display: block; }
#scene .cv-vg .vg .sans { height: 56px; display: grid; place-items: center; color: var(--muted); }
#scene .cv-vg .vg span {
  display: block; font-family: var(--m); font-size: 8.5px; padding: 4px 5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#scene .cv-vg .aucune {
  grid-column: 1 / -1; font-size: 12px; color: var(--muted); font-style: italic;
  border: 1px dashed var(--rule); border-radius: 6px; padding: 16px 8px; text-align: center;
}
#scene .cv-bas {
  display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--m); font-size: 11px;
  border-top: 1px solid var(--rule-soft); padding-top: 9px;
}
#scene .cv-bas .ok { color: var(--vert); font-weight: 700; }
#scene .cv-bas .ko { color: var(--signal); font-weight: 700; }
#scene .cv-bas .att { color: var(--muted); }

/* Les blocs sont en display:flex, ce qui l'emporte sur la feuille du navigateur :
   sans cette règle, l'attribut hidden ne masquerait rien du tout. */
#scene [hidden] { display: none !important; }

/* ---- ajuster le ton ---- */
#scene .ia-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px 18px; background: var(--card-2); border-top: 1px solid var(--rule-soft);
}
#scene .ia-lbl {
  font-family: var(--m); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--steel);
}
#scene .ia-note {
  font-family: var(--m); font-size: 10.5px; color: var(--muted); margin-left: auto;
}
#scene textarea.reecrit {
  animation: flash-reecrit 1.4s ease-out;
}
@keyframes flash-reecrit {
  0% { background: var(--vert-soft); border-color: var(--vert); }
  100% { background: var(--card); border-color: var(--rule); }
}

/* ===================== Refonte ===================== */

#scene[data-p="refonte"] { --signal: #6B4E9E; --signal-soft: #E7E1F2; }

#scene .manifeste {
  background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--signal);
  border-radius: 8px; padding: 22px 24px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px;
}
#scene .manifeste .gros {
  font-size: clamp(18px, 2.3vw, 23px); font-weight: 600; line-height: 1.4;
  letter-spacing: -.02em; text-wrap: balance;
}
#scene .manifeste .gros b { color: var(--signal); font-weight: 700; }
#scene .manifeste p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 74ch; }
#scene .manifeste .limite {
  font-size: 16px; color: var(--ink); background: var(--signal-soft);
  border-radius: 7px; padding: 12px 15px; align-self: flex-start;
}
#scene .manifeste .limite b { color: var(--signal); }

#scene .chantiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
#scene .ch {
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 16px 18px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 11px;
}
#scene .ch h4 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
#scene .ch .av, #scene .ch .ap { font-size: 13.5px; line-height: 1.5; }
#scene .ch .av { color: var(--muted); }
#scene .ch .ap { color: var(--ink-2); }
#scene .ch span {
  display: block; font-family: var(--m); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: 3px;
}
#scene .ch .av span { color: var(--rule); }
#scene .ch .ap { border-left: 2px solid var(--signal); padding-left: 11px; }
#scene .ch .ap span { color: var(--signal); }

#scene .parcours { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
#scene .pa {
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 16px 18px 18px; box-shadow: var(--shadow);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
}
#scene .pa .n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--signal); color: #fff; font-family: var(--m); font-size: 11px; font-weight: 800;
  margin-bottom: 9px;
}
#scene .pa b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 4px; }
#scene .pa em { font-style: normal; color: var(--signal); font-weight: 600; }

#scene .crm-bloc {
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 18px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
}
#scene .crm-bloc p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 76ch; }
#scene .crm-bloc b { color: var(--ink); }

#scene .contact-int {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--signal-soft); border: 1px solid transparent; border-radius: 10px; padding: 22px 24px;
}
#scene .contact-int .tx { flex: 1; min-width: 250px; display: flex; flex-direction: column; gap: 7px; }
#scene .contact-int h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
#scene .contact-int p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
#scene .contact-int .pt { font-weight: 600; color: var(--ink); }
#scene .contact-int .mail {
  font-family: var(--m); font-size: 14.5px; font-weight: 650; color: #fff;
  background: var(--signal); border-radius: 9px; padding: 15px 22px;
  text-decoration: none; white-space: nowrap;
}
#scene .contact-int .mail:hover { filter: brightness(1.12); }

/* ---- « chez vous, ce sera branché » ---- */
#scene .bch-intro {
  margin: 0 0 13px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
}
#scene .bch-intro b { color: var(--ink); font-weight: 650; }
#scene .bch-g {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1px;
  background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: 8px; overflow: hidden;
}
#scene .bch { background: var(--card); padding: 14px 15px; display: flex; flex-direction: column; gap: 5px; }
#scene .bch-t {
  font-family: var(--m); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--signal);
}
#scene .bch-e { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
#scene .bch-r { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
#scene .bch-fin {
  margin-top: 12px; padding: 11px 14px; border-radius: 7px;
  background: var(--card-2); border: 1px solid var(--rule-soft);
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
}
#scene .bch-fin b { color: var(--ink); font-weight: 650; }

/* ---- la chaîne en quatre temps ---- */
#scene .chaine-c {
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 15px 18px 18px; box-shadow: var(--shadow);
}
#scene .chaine-t {
  font-family: var(--m); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
#scene .chaine {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
#scene .tps {
  position: relative; padding: 14px 14px 15px 14px; border-radius: 8px;
  border: 1px solid var(--rule-soft); background: var(--card-2);
  display: flex; flex-direction: column; gap: 6px;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* le trait qui relie les quatre temps */
#scene .tps + .tps::before {
  content: ""; position: absolute; left: -11px; top: 34px;
  width: 12px; height: 1px; background: var(--rule);
}
#scene .tps .rond {
  width: 25px; height: 25px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--m); font-size: 12px; font-weight: 600;
  background: var(--card); color: var(--muted); border: 1px solid var(--rule);
}
#scene .tps .ico { width: 26px; height: 26px; color: var(--muted); margin-top: 2px; }
#scene .tps .ico svg { width: 100%; height: 100%; display: block; }
#scene .tps .tt { font-size: 14px; font-weight: 650; color: var(--ink); line-height: 1.3; }
#scene .tps .dd { font-size: 12.5px; line-height: 1.5; color: var(--muted); }

#scene .tps.fait { background: var(--vert-soft); border-color: transparent; }
#scene .tps.fait .rond { background: var(--vert); color: #fff; border-color: transparent; }
#scene .tps.fait .ico { color: var(--vert); }

#scene .tps.actif {
  background: var(--card); border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-soft);
}
#scene .tps.actif .rond { background: var(--signal); color: #fff; border-color: transparent; }
#scene .tps.actif .ico { color: var(--signal); }
#scene .tps.actif .dd { color: var(--ink-2); }

/* le même numéro, repiqué sur le bloc auquel il correspond */
#scene .num-tps {
  display: inline-grid; place-items: center; width: 19px; height: 19px;
  border-radius: 50%; margin-right: 8px; vertical-align: 1px;
  font-family: var(--m); font-size: 10.5px; font-weight: 600;
  background: var(--signal-soft); color: var(--signal);
}

@media (max-width: 900px) {
  #scene .chaine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #scene .tps + .tps::before { display: none; }
}
@media (max-width: 520px) {
  #scene .chaine { grid-template-columns: 1fr; }
}

/* ---- fiche dossier repliée sur téléphone ---- */
#scene details.pli { display: flex; flex-direction: column; gap: 16px; }
#scene details.pli > summary { display: none; }
#scene .pli-c { display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 640px) {
  #scene details.pli {
    gap: 0; border: 1px solid var(--rule-soft); border-radius: 8px;
    background: var(--card-2); overflow: hidden;
  }
  #scene details.pli.tenue { border-color: var(--signal); background: var(--signal-soft); }
  #scene details.pli > summary {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; cursor: pointer; list-style: none;
    font-size: 13.5px; font-weight: 650; color: var(--ink); line-height: 1.35;
  }
  #scene details.pli > summary::-webkit-details-marker { display: none; }
  #scene details.pli > summary::after {
    content: "▾"; margin-left: auto; flex: none;
    font-size: 11px; color: var(--muted); transition: transform .18s ease;
  }
  #scene details.pli[open] > summary::after { transform: rotate(180deg); }
  #scene details.pli[open] { background: var(--card); }
  #scene details.pli[open].tenue { background: var(--card); }
  #scene details.pli > summary .cpt {
    font-family: var(--m); font-size: 10.5px; font-weight: 600;
    background: var(--card); color: var(--muted);
    border: 1px solid var(--rule); border-radius: 20px; padding: 1px 7px;
  }
  #scene .pli-c { padding: 0 14px 14px; gap: 12px; }
  #scene .courriel .det { gap: 12px; }
  /* la réponse reste ouverte — c'est la preuve — mais elle défile sur place
     au lieu de manger deux écrans. */
  #scene .reponse-mail .c { max-height: 230px; overflow: auto; }
  #scene .courriel .texte { max-height: 150px; }
}

/* ---- les boutons d'action, avec leur conséquence écrite ---- */
#scene .message .pied {
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  padding: 14px 18px 16px;
}
#scene .acte-bloc { display: flex; flex-direction: column; gap: 7px; }
#scene .acte-lbl {
  font-family: var(--m); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
#scene .acte-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
#scene .acte-g.un { grid-template-columns: minmax(0, 1fr); }
#scene .acte {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  /* la règle générale des boutons impose align-items:center et nowrap :
     sans ces deux remises à zéro, la phrase d'explication sort de la carte. */
  align-items: flex-start; white-space: normal;
  padding: 11px 14px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--card);
  font-family: inherit; color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
#scene .acte b { display: block; width: 100%; font-size: 13.5px; font-weight: 650; }
#scene .acte span {
  display: block; width: 100%;
  font-size: 12px; line-height: 1.45; color: var(--muted); font-weight: 400;
}
#scene .acte:hover { border-color: var(--signal); background: var(--card-2); }
#scene .acte.primaire { background: var(--signal); border-color: var(--signal); color: #fff; }
#scene .acte.primaire span { color: rgba(255, 255, 255, .86); }
#scene .acte.primaire:hover { background: var(--signal); filter: brightness(1.08); }

/* ---- le mode d'emploi, au-dessus de la pile ---- */
#scene .emploi {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 14px; padding: 12px 15px; border-radius: 8px;
  background: var(--steel-soft); border-left: 3px solid var(--steel);
}
#scene .emploi .e-t {
  flex: none; font-family: var(--m); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--steel); font-weight: 700;
}
#scene .emploi .e-x { flex: 1; min-width: 220px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
#scene .emploi .e-x b { color: var(--ink); font-weight: 650; }

@media (max-width: 640px) {
  #scene .acte-g { grid-template-columns: minmax(0, 1fr); }
}

/* ===================== Aiguillage ===================== */
#scene[data-p="aiguillage"] { --signal: #2E6B4F; --signal-soft: #DCEBE2; }

#scene .k-min {
  font-family: var(--m); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
}
#scene .pj {
  display: inline-block; font-family: var(--m); font-size: 11.5px;
  background: var(--card-2); border: 1px solid var(--rule); border-radius: 5px;
  padding: 4px 9px; color: var(--ink-2);
}
#scene .verdict .alertes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
#scene .verdict .alertes li {
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
  padding-left: 13px; border-left: 2px solid var(--signal);
}
#scene .verdict .alertes b { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink); }
#scene .verdict .pourquoi { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }
#scene .verse-ok {
  padding: 11px 14px; border-radius: 7px; background: var(--vert-soft);
  font-size: 13.5px; font-weight: 600; color: var(--vert);
}

#scene .fiche-cl {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 12px; align-items: center; padding: 12px 0;
  border-top: 1px solid var(--rule-soft);
}
#scene .fiche-cl:first-child { border-top: 0; }
#scene .fiche-cl .nom { font-weight: 650; font-size: 14px; }
#scene .voies-f { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

#scene .voie-l {
  display: grid; grid-template-columns: minmax(0, 1fr) 24px 110px minmax(0, 1.3fr);
  gap: 10px; align-items: center; padding: 11px 0;
  border-top: 1px solid var(--rule-soft); font-size: 13.5px;
}
#scene .voie-l:first-child { border-top: 0; }
#scene .vl-quoi { font-weight: 600; color: var(--ink); }
#scene .vl-fleche { color: var(--muted); text-align: center; }
#scene .vl-vers {
  font-family: var(--m); font-size: 12px; font-weight: 600;
  background: var(--vert-soft); color: var(--vert);
  border-radius: 5px; padding: 4px 9px; text-align: center;
}
#scene .vl-vers.h { background: var(--signal-soft); color: var(--signal); }
#scene .vl-quoi2 { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

#scene .regle-l {
  display: flex; gap: 11px; align-items: flex-start; padding: 10px 0;
  border-top: 1px solid var(--rule-soft);
}
#scene .regle-l:first-child { border-top: 0; }
#scene .rl-p {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--signal-soft); color: var(--signal);
}
#scene .regle-l .nom { font-size: 13.5px; font-weight: 600; }
#scene .regle-l .sous { font-size: 12.5px; color: var(--muted); margin-top: 1px; }

@media (max-width: 760px) {
  #scene .fiche-cl { grid-template-columns: 1fr; gap: 6px; }
  #scene .voies-f { justify-content: flex-start; }
  #scene .voie-l { grid-template-columns: 1fr; gap: 5px; }
  #scene .vl-fleche { display: none; }
  #scene .vl-vers { justify-self: start; }
}

/* ---- envoi automatique : les boutons qui attendent d'être branchés ---- */
#scene .acte.grise {
  background: var(--card-2); border-style: dashed; border-color: var(--rule);
  color: var(--muted); position: relative;
}
#scene .acte.grise b { color: var(--muted); }
#scene .acte.grise b::after {
  content: "verrouillé"; margin-left: 8px; vertical-align: 1px;
  font-family: var(--m); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--rule-soft); color: var(--muted); border-radius: 4px; padding: 2px 6px;
}
#scene .acte.grise:hover {
  border-style: solid; border-color: var(--steel);
  background: var(--steel-soft); color: var(--ink-2);
}
#scene .acte.grise:hover b { color: var(--ink); }

#scene .brancher-info {
  margin-top: 9px; padding: 14px 16px; border-radius: 8px;
  background: var(--steel-soft); border-left: 3px solid var(--steel);
  animation: pousse .3s cubic-bezier(.2,.8,.3,1) both;
}
#scene .brancher-info .bi-t {
  font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 5px;
}
#scene .brancher-info .bi-x { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
#scene .brancher-info .bi-x b { color: var(--ink); font-weight: 650; }
#scene .brancher-info .bi-c {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule-soft);
  font-size: 13px; color: var(--ink-2);
}
#scene .brancher-info a { color: var(--steel); font-weight: 650; }

#scene .copies { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#scene .copie-note { font-family: var(--m); font-size: 10.5px; color: var(--muted); }
#scene .sms-note { font-size: 12px; line-height: 1.45; color: var(--muted); }