/* ============================================================
   sig2-detail.css — SIG 2 LOT 5 · L'ÉCRAN DÉTAIL EN HUIT BLOCS
   Copie conforme de cerveau/sig2/mockup-paquet2-ecran-detail.html (validé),
   valeurs du mockup converties en jetons (tokens.css). Préfixe s2d-, aucune
   couleur en dur, aucun dégradé, Lato/Lora uniquement (les « caps » du mockup
   en Lato 700 espacé — charte : aucune police hors Lato/Lora).
   ============================================================ */

@keyframes s2d-ray {
  0% { transform: scale(0.85); opacity: 0.55; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ── Caps : Lato 700, majuscules espacées (la police d'affichage du mockup n'est pas dans la charte) ── */
.s2d-titre-etape, .s2d-p-head, .s2d-autres summary, .s2d-quand, .s2d-chap-head .s2d-kicker {
  font-family: var(--font);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

/* ═══ BLOC A — LE CHEMIN EN GRAND ═══ */
.s2d-chemin { display: flex; align-items: flex-start; margin: 4px 0 14px; }
.s2d-step { flex: 1; text-align: center; position: relative; min-width: 0; padding: 0 4px; }
.s2d-rond {
  width: 30px; height: 30px; border-radius: var(--radius-full); margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 2px solid var(--gris-pastille); color: var(--white);
  position: relative; z-index: 2;
}
.s2d-trait { position: absolute; top: 15px; left: calc(50% + 17px); right: calc(-50% + 17px); height: 2px; background: var(--trait-chemin); z-index: 1; }
.s2d-step:last-child .s2d-trait { display: none; }
.s2d-trait.plein { background: var(--green); }
.s2d-rond.fait { background: var(--green); border-color: var(--green); }
/* une pastille qui porte un document se touche : elle ouvre le document reçu (certificat signé, scan, original) dans l'aperçu */
.s2d-rond.a-document { cursor: pointer; }
.s2d-rond.a-document:hover { box-shadow: 0 0 0 4px var(--green-clair); }
.s2d-rond.a-document:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 191, 122, .35); }
.s2d-rond.encours { width: 40px; height: 40px; margin-top: -5px; margin-bottom: 3px; border-color: var(--red); color: var(--red); }
.s2d-rond.encours .s2d-coeur { width: 16px; height: 16px; border-radius: var(--radius-full); background: currentColor; display: block; }
.s2d-rond.encours::after { content: ''; position: absolute; inset: -6px; border-radius: var(--radius-full); border: 2.5px solid currentColor; opacity: 0.4; animation: s2d-ray 1.8s ease-out infinite; }
.s2d-rond.encours.est-rouge { border-color: var(--red); color: var(--red); }
.s2d-rond.encours.est-bleu { border-color: var(--blue); color: var(--blue); }
.s2d-rond.encours.est-jaune { border-color: var(--jaune); color: var(--jaune-halo); }
.s2d-rond.encours.est-orange { border-color: var(--orange); color: var(--orange); }
.s2d-rond.encours.est-gris { border-color: var(--gris-pastille); color: var(--muted); }
.s2d-rond.encours.est-gris::after { animation: none; display: none; }
.s2d-rond.encours.est-vert { border-color: var(--green); color: var(--green); }
.s2d-rond.encours.est-vert::after { display: none; }
.s2d-titre-etape { font-size: 9px; letter-spacing: 0.09em; color: var(--muted); line-height: 1.3; }
.s2d-qui { font-weight: var(--weight-bold); font-size: var(--text-sm); margin-top: 2px; }
.s2d-etat-mots { font-size: var(--text-xs); color: var(--text2); }
.s2d-etat-mots.rouge { color: var(--red); font-weight: var(--weight-bold); }
.s2d-etat-mots.vert { color: var(--green-dark); font-weight: var(--weight-bold); }
@media (prefers-reduced-motion: reduce) { .s2d-rond.encours::after, .s2d-chap-head.ko .s2d-cdot::after { animation: none; } }

/* ═══ BLOC B — LE BANDEAU D'ÉTAT ═══ */
.s2d-bandeau { background: var(--red-bg); border-left: 4px solid var(--red); border-radius: 0 10px 10px 0; padding: 12px 15px; margin-bottom: 20px; }
.s2d-bandeau > b { color: var(--red); font-size: 13.5px; }
.s2d-bandeau .s2d-det { font-size: var(--text-sm); color: var(--text2); margin-top: 2px; }
.s2d-bandeau .s2d-det b { color: var(--text); }
.s2d-bandeau .s2d-det .s2d-rouge { color: var(--red); }
.s2d-bandeau .s2d-det .s2d-ocre { color: var(--ocre); }
.s2d-bandeau.est-bleu { background: var(--blue-bg); border-left-color: var(--blue); }
.s2d-bandeau.est-bleu > b { color: var(--navy); }
.s2d-bandeau.est-jaune { background: var(--yellow-bg); border-left-color: var(--jaune); }
.s2d-bandeau.est-jaune > b { color: var(--text); }
.s2d-bandeau.est-orange { background: var(--yellow-bg); border-left-color: var(--orange); }
.s2d-bandeau.est-orange > b { color: var(--orange); }
.s2d-bandeau.est-vert { background: var(--green-clair); border-left-color: var(--green); }
.s2d-bandeau.est-vert > b { color: var(--green-dark); }
.s2d-bandeau.est-gris { background: var(--fond-doux); border-left-color: var(--gris-pastille); }
.s2d-bandeau.est-gris > b { color: var(--text); }

/* ═══ BLOC C — LE RÉCIT : DEUX CHAPITRES ═══ */
.s2d-chapitre { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 12px; background: var(--card); }
.s2d-chap-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; user-select: none; }
.s2d-chap-head:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.s2d-chap-head .s2d-cdot { width: 13px; height: 13px; border-radius: var(--radius-full); flex: none; background: var(--gris-pastille); }
.s2d-chap-head.ok { background: var(--green-clair); }
.s2d-chap-head.ok .s2d-cdot { background: var(--green); }
.s2d-chap-head.ko { background: var(--red-bg); }
.s2d-chap-head.ko .s2d-cdot { background: var(--red); position: relative; color: var(--red); }
.s2d-chap-head.ko .s2d-cdot::after { content: ''; position: absolute; inset: -5px; border-radius: var(--radius-full); border: 2px solid currentColor; opacity: 0.45; animation: s2d-ray 1.8s ease-out infinite; }
.s2d-chap-head.att { background: var(--fond-doux); }
.s2d-chap-head b { font-size: var(--text-base); }
.s2d-chap-head .s2d-verdict { margin-left: auto; font-size: 11.5px; font-weight: var(--weight-bold); white-space: nowrap; color: var(--text2); }
.s2d-chap-head.ok .s2d-verdict { color: var(--green-dark); }
.s2d-chap-head.ko .s2d-verdict { color: var(--red); }
.s2d-entrees { border-top: 1px solid var(--border); padding: 4px 14px 8px; }
.s2d-chapitre.est-replie .s2d-entrees { display: none; }

/* ═══ BLOCS D/E — LES ENTRÉES RACONTÉES, LES SIGNAUX QUALIFIÉS ═══ */
.s2d-entree { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); align-items: baseline; }
.s2d-entree:last-child { border-bottom: none; }
.s2d-quand { font-size: 9.5px; letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; width: 44px; flex: none; text-align: right; }
.s2d-quoi { font-size: 12.5px; min-width: 0; }
.s2d-quoi small { display: block; color: var(--text2); font-size: 11.5px; margin-top: 1px; }
.s2d-quoi .s2d-doute { color: var(--ocre); }
.s2d-citation { display: block; font-family: var(--font-serif); font-style: italic; color: var(--text2); background: var(--fond-doux); border-left: 2.4px solid var(--border); padding: 6px 10px; margin-top: 5px; border-radius: 0 8px 8px 0; font-size: var(--text-sm); }
.s2d-lirem { color: var(--green-dark); font-weight: var(--weight-bold); text-decoration: underline; font-size: var(--text-xs); white-space: nowrap; margin-left: auto; cursor: pointer; }
.s2d-lirem:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.s2d-e-ok { color: var(--green-dark); font-weight: var(--weight-bold); }
.s2d-e-ko { color: var(--red); font-weight: var(--weight-bold); }
.s2d-e-bleu { color: var(--navy); font-weight: var(--weight-bold); }

/* ═══ BLOC F/G — LES PANNEAUX (paiement, actions) ═══ */
.s2d-panneau { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); overflow: hidden; margin-bottom: 20px; }
.s2d-p-head { padding: 10px 15px; border-bottom: 1px solid var(--border); font-size: 10px; letter-spacing: 0.16em; background: var(--fond-doux); color: var(--muted); }
.s2d-p-body { padding: 13px 15px; }
.s2d-panneau.paiement { border: 2px solid var(--green); box-shadow: var(--sh-green); }
.s2d-panneau.paiement .s2d-p-head { background: var(--green-clair); color: var(--green-dark); }
.s2d-pai-ligne { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--border); gap: 10px; }
.s2d-pai-ligne .l { font-size: var(--text-sm); color: var(--text2); }
.s2d-pai-ligne .v { font-weight: var(--weight-black); font-size: 14.5px; text-align: right; }
.s2d-pai-ligne .v.rouge { color: var(--red); }
.s2d-pai-ligne .v.ocre { color: var(--ocre); }
.s2d-pai-ligne .v.attente { color: var(--muted); font-weight: var(--weight-regular); font-size: var(--text-sm); font-style: italic; font-family: var(--font-serif); }
.s2d-pai-champ { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.s2d-pai-champ .f-label { margin: 0; font-size: var(--text-xs); color: var(--muted); }
.s2d-pai-champ .f-input { width: auto; height: 34px; padding: 0 8px; font-size: var(--text-sm); }

.s2d-btn {
  display: block; width: 100%; text-align: center; border-radius: var(--radius-sm); padding: 10px 13px;
  font: inherit; font-weight: var(--weight-bold); font-size: 12.5px; border: 1px solid var(--border);
  background: var(--card); color: var(--text); margin-top: 8px; cursor: pointer; text-decoration: none;
}
.s2d-btn:hover { box-shadow: var(--shadow-xs); border-color: var(--green); }
.s2d-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.s2d-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.s2d-btn.vert { background: var(--green); border-color: var(--green); color: var(--white); }
.s2d-btn.vert:hover { background: var(--green-hover); }
.s2d-btn.urgent { background: var(--red); border-color: var(--red); color: var(--white); }
.s2d-btn.urgent:hover { background: var(--red-hover); }
.s2d-btn.bleu { background: var(--blue); border-color: var(--blue); color: var(--white); }
.s2d-p-body > .s2d-btn:first-child { margin-top: 0; }
.s2d-act-explique { font-size: var(--text-xs); color: var(--text2); margin: 5px 0 2px; }
.s2d-p-body .det-note { margin-top: 0; }

.s2d-autres { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 9px; }
.s2d-autres summary { font-size: 9.5px; letter-spacing: 0.14em; color: var(--muted); cursor: pointer; list-style: none; }
.s2d-autres summary::-webkit-details-marker { display: none; }
.s2d-autres summary::before { content: '\25B8\00A0'; }
.s2d-autres[open] summary::before { content: '\25BE\00A0'; }
.s2d-aa { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px dashed var(--border); padding: 7px 0 2px; font: inherit; color: var(--text); cursor: pointer; }
.s2d-aa:last-child { border-bottom: none; }
.s2d-aa:hover b { color: var(--green-dark); }
.s2d-aa:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.s2d-aa b { font-size: var(--text-sm); display: block; }
.s2d-aa small { color: var(--muted); font-size: var(--text-xs); display: block; }

/* ═══ Contacts du chantier : une ligne par contact, le numéro compose ═══ */
.s2d-contact { font-size: var(--text-sm); color: var(--text2); padding: 6px 0; border-bottom: 1px dashed var(--border); }
.s2d-contact:last-child { border-bottom: none; }
.s2d-contact b { color: var(--text); }
.s2d-contact a { color: var(--green-dark); font-weight: var(--weight-bold); text-decoration: none; white-space: nowrap; }
.s2d-contact a:hover { text-decoration: underline; }
.s2d-contact small { display: block; color: var(--muted); font-size: var(--text-xs); }
.s2d-contact-sans { color: var(--muted); font-size: var(--text-xs); }

/* ═══ Les petites modales (confirmation, SMS montré avant envoi) ═══ */
.s2d-confirm-texte { font-size: var(--text-base); color: var(--text2); line-height: var(--leading-relaxed); }
/* LOT 8 · BLOC C — le SMS se lit AVANT de partir : une carte, un en-tête, la bulle. */
.s2d-sms-apercu { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); padding: 0; overflow: hidden; margin-top: 8px; }
.s2d-sms-apercu .sh { padding: 7px 13px; background: var(--fond-doux); border-bottom: 1px solid var(--border); font-weight: var(--weight-bold); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.s2d-sms-bulle { margin: 12px 13px; background: var(--green-clair); border-radius: 12px 12px 12px 3px; padding: 10px 13px; font-size: 12.5px; color: var(--text); line-height: var(--leading-relaxed); white-space: pre-wrap; }
.s2d-sms-bulle-edit { margin: 12px 13px; width: calc(100% - 26px); min-height: 110px; font: inherit; font-size: 12.5px; }
.s2d-cta-danger { background: var(--red); }
.s2d-cta-danger:hover { background: var(--red-hover); }

/* ═══ Mobile : le chemin reste en ligne, les pastilles rétrécissent ═══ */
@media (max-width: 640px) {
  .s2d-step { padding: 0 2px; }
  .s2d-rond { width: 24px; height: 24px; }
  .s2d-rond.encours { width: 32px; height: 32px; margin-top: -4px; }
  .s2d-trait { top: 12px; left: calc(50% + 14px); right: calc(-50% + 14px); }
  .s2d-titre-etape { font-size: 8px; letter-spacing: 0.06em; }
  .s2d-qui { font-size: var(--text-xs); }
  .s2d-chap-head .s2d-verdict { white-space: normal; text-align: right; }
  .s2d-quand { width: 36px; }
}

/* ── « Ce que fera le robot » (LOT 3, la page de règles) — une ligne par geste : date · quoi · à qui ── */
.regles-robot .regles-sous { font-size: var(--text-sm); color: var(--muted); margin: -4px 0 10px; }
.regles-robot .regle { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.regles-robot .regle:last-child { border-bottom: none; }
.regles-robot .regle-quand { font-family: var(--font); font-weight: var(--weight-bold); font-size: 10px; letter-spacing: 0.05em; color: var(--muted); white-space: nowrap; width: 74px; flex: none; text-align: right; }
.regles-robot .regle-quand.est-fait { color: var(--green-dark); }
.regles-robot .regle-quand.est-vide { color: var(--muted2); }
.regles-robot .regle-quoi { min-width: 0; }
.regles-robot .regle-quoi small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; }
.regles-robot .regle.est-fait .regle-quoi { color: var(--text2); }
.regles-robot .regle.est-impossible .regle-quoi { color: var(--ocre); font-weight: var(--weight-bold); }
.regles-robot .regle.est-jamais .regle-quoi { color: var(--muted); }


/* ── LOT 8 · l'appel et l'assistant (paquet 4, blocs A, B, C, E) ── */
.s2d-f-lab { font-weight: var(--weight-bold); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin: 12px 0 4px; }
.s2d-p-body > .s2d-f-lab:first-child, .modal .s2d-f-lab:first-child { margin-top: 0; }
.s2d-ctc { display: flex; align-items: center; gap: 10px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 9px; margin-bottom: 7px; font-size: 12.5px; background: var(--card); }
.s2d-ctc .role { font-weight: var(--weight-bold); font-size: 9px; letter-spacing: 0.08em; color: var(--green-dark); width: 36px; flex: none; }
.s2d-ctc b { font-weight: var(--weight-bold); }
.s2d-ctc small { color: var(--muted); font-size: var(--text-xs); display: block; }
.s2d-ctc .tel { margin-left: auto; font-size: 11.5px; color: var(--text2); white-space: nowrap; font-weight: var(--weight-bold); }
.s2d-ctc.horsphase { opacity: 0.45; background: var(--fond-doux); }
.s2d-btn-aide { font-size: 11.5px; color: var(--text2); margin: -3px 0 10px; padding: 0 2px; }
.s2d-btn small { display: block; font-weight: var(--weight-regular); font-size: var(--text-xs); opacity: 0.85; margin-top: 2px; }
.s2d-aide-verte { display: block; background: var(--green-clair); border-left: 2.4px solid var(--green); border-radius: 0 8px 8px 0; padding: 7px 11px; margin-top: 6px; font-size: var(--text-sm); color: var(--green-dark); }
.s2d-aide-verte b { font-weight: var(--weight-bold); }
.s2d-consequence { background: var(--blue-bg); border-left: 2.4px solid var(--blue); border-radius: 0 8px 8px 0; padding: 8px 11px; margin-top: 8px; font-size: var(--text-sm); color: var(--navy); line-height: var(--leading-relaxed); }
.s2d-consequence b { font-weight: var(--weight-bold); }
.s2d-consequence .s2d-conseq-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.s2d-alerte { background: var(--red-bg); border-left: 2.4px solid var(--red); border-radius: 0 8px 8px 0; padding: 8px 11px; margin-top: 8px; font-size: var(--text-sm); color: var(--red-hover); }
.s2d-alerte b { font-weight: var(--weight-bold); }
.s2d-dictee { border: 1px solid var(--border); border-radius: 10px; background: var(--fond-doux); padding: 12px 14px; font-family: var(--font-serif); font-style: italic; color: var(--text2); font-size: var(--text-base); border-left: 2.4px solid var(--green); margin-bottom: 8px; }
.s2d-compris { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-top: 9px; background: var(--card); }
.s2d-compris .ct { font-weight: var(--weight-bold); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 8px; }
.s2d-kv { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.s2d-kv:last-of-type { border-bottom: none; }
.s2d-kv .k { color: var(--muted); width: 130px; flex: none; }
.s2d-kv .v { font-weight: var(--weight-bold); }
.s2d-kv .f-input { height: 34px; padding: 0 8px; font-size: var(--text-sm); }
.s2d-autres-contacts { margin: 4px 0 8px; }
.s2d-autres-contacts summary { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.s2d-assist { border: 2px solid var(--green); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--sh-green); margin-bottom: 20px; background: var(--card); }
.s2d-assist .a-head { padding: 10px 15px; background: var(--green-clair); color: var(--green-dark); font-weight: var(--weight-bold); font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; border-bottom: 1px solid var(--border); }
.s2d-assist .a-body { padding: 14px 15px; }
.s2d-assist .a-contexte { font-size: 12.5px; color: var(--text2); margin-bottom: 8px; }
.s2d-assist .a-contexte b { color: var(--text); }
.s2d-assist .a-premail { font-size: 12.5px; color: var(--text2); }