/* ═══════════════════════════════════════════════════════════════════════════
   SOMA — LES FICHES DE QUALIFICATION (TICKET-FICHES-QUALIFICATION, LOT 1)
   ───────────────────────────────────────────────────────────────────────────
   Mockup-loi : mockups/fiche-qualification-implantation-2026-08-25.html —
   les valeurs sont RELEVÉES dessus (grille 22px/1fr, gap 10, padding 10/18,
   tags 9px/900/uppercase), pas réinterprétées. La coquille, le bloc titre,
   le pied et les boutons viennent du composant partagé .smail
   (css/soma-compositeur-mail.css) — ce fichier n'habille QUE le contenu.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le panneau est un .smail un peu plus large (mockup : min(620px, 92%)). */
.sfq-panneau { width: 620px; }

/* Le corps défile — la coquille .smail borne la hauteur à l'écran. */
.sfq-corps { flex: 1; overflow-y: auto; }

/* L'enjeu de la fiche — la ligne sous le titre, celle qui dit à quoi on joue. */
.sfq-enjeu { padding: 10px 18px; font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--border); }

/* ── UNE QUESTION — numéro vert, question en gras, le piège dessous ──────── */
.sfq-q { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border); }
.sfq-q:last-child { border-bottom: 0; }
.sfq-n { font-weight: 900; color: var(--green-dark); font-variant-numeric: tabular-nums; padding-top: 1px; font-size: 12.5px; }
.sfq-bd { min-width: 0; }
.sfq-bd > b { font-size: 12.5px; display: block; color: var(--text); }
.sfq-rel { color: var(--text2); font-size: 11.5px; margin-top: 3px; }
.sfq-rel b { display: inline; font-weight: 700; }

/* Le piège (rouge) ou l'épingle (vert) — une pilule + la phrase qui explique. */
.sfq-pg { display: flex; gap: 6px; margin-top: 4px; font-size: 11px; align-items: baseline; }
.sfq-pg > span:last-child { color: var(--muted); min-width: 0; }
.sfq-tag {
  flex: none; font-size: 9px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .05em; border-radius: 100px; padding: 1px 7px;
}
.sfq-tag--p { background: var(--red-soft, rgba(163, 58, 42, .08)); color: var(--red); }
.sfq-tag--e { background: var(--green-soft, rgba(47, 191, 122, .12)); color: var(--green-dark); }

/* ── LOT 4 — la ligne de réponse libre sous chaque question ──────────────── */
.sfq-rep { margin-top: 6px; }
.sfq-rep input {
  width: 100%; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-family: inherit; font-size: 12px;
  background: var(--card); color: var(--text);
}
.sfq-rep input:focus { outline: none; border-color: var(--green-border, rgba(47, 191, 122, .38)); }
.sfq-rep input::placeholder { color: var(--muted2, rgba(122, 148, 128, .5)); font-style: normal; }

/* 25/08 nuit (CT Tâches) : .sfq-gestes (la rangée de pilules sur la ligne de
   tâche) est morte — retirée de soma-ligne-tache.js, « usine à gaz ». Le
   bouton .sfq-lien lui-même reste (encore utilisé dans la carte d'appel
   préparée, commercial-appel-prepare.js). */
a.sfq-lien { text-decoration: none; display: inline-flex; align-items: center; }

/* ── LE BOUTON « LES QUESTIONS » (mockup .lien) ──────────────────────────── */
.sfq-lien {
  border: 1px solid var(--green-border, rgba(47, 191, 122, .38)); color: var(--green-dark);
  border-radius: 100px; padding: 3px 11px; background: var(--card);
  font-family: inherit; font-weight: 700; font-size: 11px; cursor: pointer; white-space: nowrap;
}
.sfq-lien:hover { background: var(--green-soft, rgba(47, 191, 122, .12)); }

/* La rangée du bouton dans la carte d'appel — discrète, sous la barre de mode. */
.cap-fiche { display: flex; justify-content: flex-end; padding: 8px 0 0; }

/* ── IMPRIMABLE — seul le panneau sort, en pleine page ───────────────────── */
@media print {
  body.sfq-print > *:not(.smail-ov) { display: none !important; }
  body.sfq-print #sfq-ov { position: static; padding: 0; background: none; backdrop-filter: none; }
  body.sfq-print .sfq-panneau { width: 100%; max-height: none; border: 0; box-shadow: none; }
  body.sfq-print .sfq-corps { overflow: visible; }
  body.sfq-print .smail-pied, body.sfq-print .smail-x { display: none !important; }
}

/* ── PHASE 2 — LES ÉTATS de la fiche (bloc 14-15) ───────────────────────── */
.sfq-q--grisee .sfq-bd > b, .sfq-q--grisee .sfq-pg { color: var(--muted); }
.sfq-q--grisee .sfq-pg .sfq-tag { opacity: .55; }
.sfq-su { margin-top: 5px; font-size: 12px; color: var(--text2); }
.sfq-quand { color: var(--muted); font-size: 11px; }
.sfq-ambre { margin-top: 5px; font-size: 11.5px; color: var(--yellow); }
.sfq-tag--a { background: var(--yellow-soft, rgba(201, 120, 0, .11)); color: var(--yellow); }

/* Bloc (21) ORDRE B — les questions DANS la modale d'appel (mêmes classes
   d'état que le panneau ; l'encart borne sa hauteur, le numéro reste roi). */
.sfq-appel { margin-top: 10px; max-height: 240px; overflow-y: auto; border: 1px solid rgba(13, 27, 15, .08); border-radius: 12px; padding: 8px 10px; text-align: left; }
.sfq-appel-t { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; color: var(--text2); margin-bottom: 6px; }
.sfq-appel-t span { font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--muted); }
.sfq-appel .sfq-q { padding: 5px 0; }
.sfq-appel-n { font-size: 10.5px; color: var(--muted); font-style: italic; margin-top: 6px; }

/* Retour Maxime 25/08 — noter PENDANT l'appel : le champ sous chaque question
   de la modale, et « et le reste » en pied. L'encart grandit en conséquence. */
.sfq-appel { max-height: 340px; }
.sfq-appel .sfq-rep input { width: 100%; font-size: 12px; padding: 5px 8px; border: 1px solid rgba(13, 27, 15, .14); border-radius: 8px; margin-top: 4px; }
.sfq-appel .sfq-rep input:focus { outline: none; border-color: var(--green); }
.com-call-reste-wrap { display: block; margin-top: 8px; text-align: left; }