/* La rubrique « Familles » de BC Clients (modules/service_client/familles/) : la liste, la fiche d'une
   famille, ses onglets et ses gestes. Les jetons sont ceux de Vision (assets/style.css) ; les gestes
   reprennent ceux des réglages (rg-geste) ; aucun texte n'a de largeur bornée. */

/* La ligne du haut : qui écrit ici. Elle ne change pas après un geste. */
.scl-fd-etat { min-height:38px; display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:6px 0; margin:0 0 8px; font-size:12.5px; color:var(--muted); }
/* Ce qu'un geste a fait, là où il a été fait (ecran.js, dire). */
.scl-fd-note { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; border-radius:10px; padding:6px 12px; margin:8px 0; font-size:13px; border:1px solid transparent; }
.scl-fd-note.ok { background:var(--lo-w); border-color:#A8DCD3; color:var(--lo); }
.scl-fd-note.non { background:var(--hi-w); border-color:#F2C2C2; color:var(--hi); }
.scl-fd-famille-g .scl-fd-note { flex:1 1 100%; }
.scl-fd-props li.scl-fd-note-li { display:block; padding:4px 0; border-top:1px solid var(--line-soft); }
.scl-fd-refus { width:100%; margin:0; font-size:12.5px; color:var(--hi); }
.scl-fd-attente { margin-bottom:12px; }
/* Ce qui accompagne une proposition (un pourquoi, ce qu'elle remplace) : un libellé, son texte. */
.scl-fd-detail { margin:2px 0; display:flex; flex-direction:column; gap:2px; font-size:12.5px; }
.scl-fd-detail > div { display:grid; grid-template-columns:130px minmax(0, 1fr); gap:8px; }
.scl-fd-detail dt { color:var(--muted); font-weight:600; }
.scl-fd-detail dd { margin:0; color:var(--ink-soft); }
/* Une ligne dont le retrait est proposé : marquée dans la liste, à la place de sa croix. */
.scl-fd-attend { display:inline-block; font-size:11.5px; font-weight:600; border-radius:999px; padding:1px 9px; white-space:nowrap; background:var(--md-w); color:var(--md); cursor:help; }
.scl-fd-lignes li:has(.scl-fd-attend), .scl-fd-t tr:has(.scl-fd-attend) td { background:#FFFBF4; }

/* L'état d'une description */
.scl-fd-etat-d { display:inline-block; font-size:11.5px; font-weight:600; border-radius:999px; padding:1px 9px; white-space:nowrap; background:var(--surface-2); color:var(--ink-soft); }
.scl-fd-etat-d.ok { background:var(--lo-w); color:var(--lo); }
.scl-fd-etat-d.att { background:var(--md-w); color:var(--md); }
.scl-fd-etat-d.ko { background:var(--hi-w); color:var(--hi); }

/* La fiche */
.scl-fd-onglets { margin:6px 0 10px; }
.scl-fd-sections { display:flow-root; }
.scl-fd .card h2 { justify-content:flex-start; }
/* Un intitulé qui s'ouvre dit « + » fermé et « − » ouvert, le sien seulement (pas celui du volet qui l'entoure). */
.scl-fd details:not([open]) > summary::before { content:"+ "; }
.scl-fd details[open] > summary::before { content:"− "; }
.scl-fd-carte h2 .cpt { margin-left:8px; font-weight:500; font-size:13px; color:var(--muted); }
.scl-fd-aide { color:var(--muted); font-size:12.5px; margin:0 0 10px; }
.scl-fd-lignes { list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:6px; }
.scl-fd-lignes li { display:grid; grid-template-columns:30px minmax(0, 1fr) auto; gap:4px 10px; align-items:start; }
.scl-fd-n { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; border-radius:6px; background:var(--ia-w); color:var(--ia); font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; padding:0 4px; }
.scl-fd-mia { display:inline-block; font-size:11px; font-weight:600; border-radius:999px; padding:0 8px; background:var(--ia-w); color:var(--ia); white-space:nowrap; vertical-align:1px; }
.scl-fd-famille-g { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:4px 0 14px; }
.scl-fd-famille-g .rg-geste { margin:0; }
.scl-fd-motifs { margin:0 0 8px; }

/* Les tables de la fiche : une variable par colonne, le texte revient à la ligne */
.scl-fd-tab { overflow-x:auto; margin:0 0 8px; }
/* La charte laisse toute table à sa largeur naturelle (assets/style.css, min-width:max-content) : ici le texte revient à la ligne. */
.scl-fd-t { width:100%; min-width:0; border-collapse:collapse; font-size:13px; }
.scl-fd-t th { white-space:normal; text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:bottom; }
.scl-fd-t td { padding:7px 8px; border-bottom:1px solid var(--line-soft); vertical-align:top; overflow-wrap:break-word; }
.scl-fd-t td.num, .scl-fd-t th.num { text-align:right; width:1%; white-space:nowrap; }
.scl-fd-t td.scl-fd-g, .scl-fd-t th.scl-fd-g { width:1%; white-space:nowrap; }
.scl-fd-t tr.scl-fd-go { cursor:pointer; }
.scl-fd-t tr.scl-fd-go:hover td { background:var(--surface-2); }
.scl-fd-x { display:inline; margin:0; }
.scl-fd-x button { border:0; background:none; color:var(--muted); cursor:pointer; font-size:16px; line-height:1; padding:0 4px; }
.scl-fd-x button:hover { color:var(--hi); }
.scl-fd-h3 { font-size:13.5px; font-weight:600; margin:14px 0 6px; color:var(--ink); }
.scl-fd-mots { display:flex; flex-wrap:wrap; gap:4px; }
.scl-fd-mots mark, mark.scl-fd-phrase { background:#FFF1C2; color:inherit; border-radius:4px; padding:0 3px; }

/* Les gestes : un intitulé qui s'ouvre sur son formulaire (rg-geste), un texte sur toute la largeur */
.scl-fd .rg-geste textarea { font:inherit; font-size:13px; border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:var(--surface); color:var(--ink); width:100%; resize:vertical; }
.scl-fd .rg-geste label.rg-large { flex:1 1 100%; }
.scl-fd-effet { width:100%; margin:0; font-size:12.5px; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line-soft); border-radius:8px; padding:6px 10px; }
.scl-fd-effet:empty { display:none; }

/* Ce que Mia Message propose : replié, discret */
.scl-fd-brouillon { border:1px dashed #C9D5F2; background:#F6F8FE; border-radius:12px; padding:8px 12px; margin:0 0 12px; }
.scl-fd-brouillon > summary { cursor:pointer; color:var(--ia); font-weight:600; font-size:13px; }
.scl-fd-brouillon .scl-fd-aide { margin:8px 0 4px; }
.scl-fd-props { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; }
.scl-fd-props li { display:grid; grid-template-columns:120px minmax(0, 1fr); gap:4px 12px; padding:8px 0; border-top:1px solid var(--line-soft); }
.scl-fd-props li .rg-gestes { grid-column:2; align-items:flex-start; }
.scl-fd-props .rg-geste { margin:0; }
.scl-fd-part { font-size:12px; color:var(--muted); font-weight:600; padding-top:1px; }
.scl-fd-id { white-space:nowrap; }
.scl-fd-deja { margin:8px 0 2px; padding-top:8px; border-top:1px solid var(--line-soft); }

/* Ce qui part à Mia Indexer, et un courrier lu */
.scl-fd-part-a > summary { cursor:pointer; font-size:12.5px; color:var(--ink-soft); }
.scl-fd-pre { white-space:pre-wrap; font:inherit; font-size:12.5px; background:var(--bg); border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px; margin:8px 0 0; overflow-wrap:break-word; }
.scl-fd-courrier { border-left:3px solid var(--line); padding:4px 0 4px 12px; margin:0 0 10px; }
.scl-fd-courrier p { margin:0 0 6px; }
.scl-fd-courrier u.scl-fd-mot { text-decoration:underline; text-decoration-color:var(--ia); text-decoration-thickness:2px; text-underline-offset:3px; }

@media (max-width:700px){
  .scl-fd-lignes li { grid-template-columns:26px minmax(0, 1fr) auto; }
  .scl-fd-detail > div { grid-template-columns:minmax(0, 1fr); gap:0; }
  /* Au téléphone, « retrait proposé » passe sous la phrase, qui garde sa largeur. */
  .scl-fd-lignes li:has(> .scl-fd-attend) { grid-template-columns:26px minmax(0, 1fr); }
  .scl-fd-lignes li > .scl-fd-attend { grid-column:2; justify-self:start; }
  .scl-fd-props li { grid-template-columns:minmax(0, 1fr); }
  .scl-fd-props li .rg-gestes { grid-column:auto; }
  /* Au téléphone, une ligne devient une carte : chaque case avec le nom de sa colonne. */
  .scl-fd-t, .scl-fd-t tbody, .scl-fd-t tr { display:block; width:100%; }
  .scl-fd-t thead { display:none; }
  .scl-fd-t tr { border:1px solid var(--line-soft); border-radius:10px; padding:6px 10px; margin:0 0 8px; }
  .scl-fd-t td { display:grid; grid-template-columns:104px minmax(0, 1fr); gap:8px; border:0; padding:4px 0; font-size:12.5px; white-space:normal; width:auto; text-align:left; }
  .scl-fd-t td.num { text-align:left; width:auto; }
  .scl-fd-t td::before { content:attr(data-nom); color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
  .scl-fd-t td:not([data-nom]), .scl-fd-t td.scl-fd-g { display:block; text-align:right; }
  .scl-fd-t td:not([data-nom])::before, .scl-fd-t td.scl-fd-g::before { content:none; }
}