/* ============================================================================
 * MYCELL — centre de suivi : dossiers, journal, signalement
 *                                                     build mycell-2026-10-04-2
 * ========================================================================== */

/* ─── Signaler un problème ─── */
.sv-signaler { display: grid; gap: 14px; }
.sv-cmd { display: flex; gap: 10px; align-items: center; background: var(--carte2); border-radius: var(--r-s); padding: 10px 12px; margin: 0; font-size: 14px; }
.sv-cmd svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--bleu); }
.sv-motifs { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.sv-motifs legend { font-weight: 700; margin-bottom: 6px; }
.sv-motifs label { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--ligne); border-radius: var(--r-s); cursor: pointer; }
.sv-motifs label:has(input:checked) { border-color: var(--bleu); background: var(--carte2); font-weight: 700; }
.sv-motifs input { width: 18px; height: 18px; accent-color: var(--bleu); }

/* ─── Listes ─── */
.sv-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sv-liste li { animation: monte-doux .4s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.sv-carte { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--ligne); background: var(--carte); color: inherit; text-decoration: none; }
.sv-carte.en-cours { border-left: 4px solid var(--or-t, #B45309); }
.sv-carte:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
.sv-carte-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sv-carte-tete b { font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.sv-motif { font-weight: 700; }
.sv-dernier { font-size: 14px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-carte small { color: var(--ink2); font-size: 12px; }
.sv-alerte { display: flex; gap: 8px; align-items: center; font-weight: 700; color: var(--or-t, #B45309); margin: 0 0 10px; }
.sv-alerte svg { width: 18px; height: 18px; }

/* ─── Un dossier ─── */
.sv-retour { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 4px; }
.sv-retour svg { width: 18px; height: 18px; }
.sv-dossier { display: grid; gap: 14px; }
.sv-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sv-entete h1 { margin: 0; font-size: 22px; font-variant-numeric: tabular-nums; }
.sv-entete p { margin: 2px 0 0; color: var(--ink2); }
.sv-commande { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; background: var(--carte2); border-radius: var(--r-s); padding: 12px 14px; }
.sv-commande > div { display: grid; gap: 2px; min-width: 0; }
.sv-commande b { overflow-wrap: anywhere; }
.sv-lignes { grid-column: 1 / -1; margin: 0; font-size: 13.5px; color: var(--ink2); }
.sv-attente { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 700; }
.sv-attente svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--bleu); }
.sv-titre-journal { font-size: 16px; margin: 6px 0 0; }
.sv-titre-journal small { font-weight: 400; color: var(--ink2); font-size: 13px; }

/* Journal : fil chronologique */
.sv-journal { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--ligne); display: grid; gap: 10px; }
.sv-ev { position: relative; background: var(--carte); border: 1px solid var(--ligne); border-radius: var(--r-s); padding: 10px 12px; }
.sv-ev::before { content: ''; position: absolute; left: -21px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink2); border: 2px solid var(--fond, #fff); }
.sv-ev.client::before { background: var(--bleu); }
.sv-ev.entreprise::before { background: var(--or-t, #B45309); }
.sv-ev.mycell::before { background: var(--ok-t, #15803D); }
.sv-ev.moi { background: var(--carte2); }
.sv-ev.evt { background: none; border-style: dashed; }
.sv-ev.evt p { color: var(--ink2); font-style: italic; }
.sv-ev.interne { border-color: var(--or-t, #B45309); }
.sv-ev p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.sv-quand { font-size: 12px; color: var(--ink2); font-weight: 700; }

.sv-repondre { display: grid; gap: 8px; }
.sv-repondre textarea { width: 100%; min-height: 88px; resize: vertical; }
.sv-repondre .bt { justify-self: end; }
.sv-actions { flex-wrap: wrap; }

@media (max-width: 520px) {
  .sv-commande { grid-template-columns: 1fr 1fr; }
  .sv-entete h1 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .sv-liste li { animation: none; } }