/* La rubrique « Types de documents » (modules/service_client/types_documents/) : la liste, la fiche d'un
   type, ses onglets et ses gestes. Les jetons sont ceux de Vision (assets/style.css) ; les tables sont
   celles de la rubrique « Familles » (.scl-fd-t) ; aucun texte n'a de largeur bornée. */

/* La ligne du haut : qui écrit ici. Elle ne change pas après un geste. */
.scl-td-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-td-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-td-note.ok { background:var(--lo-w); border-color:#A8DCD3; color:var(--lo); }
.scl-td-note.non { background:var(--hi-w); border-color:#F2C2C2; color:var(--hi); }
.scl-td-refus { width:100%; margin:0; font-size:12.5px; color:var(--hi); }
.scl-td-attente { margin-bottom:12px; }
.scl-td-detail { margin:2px 0; display:flex; flex-direction:column; gap:2px; font-size:12.5px; }
.scl-td-detail > div { display:grid; grid-template-columns:170px minmax(0, 1fr); gap:8px; }
.scl-td-detail dt { color:var(--muted); font-weight:600; }
.scl-td-detail dd { margin:0; color:var(--ink-soft); }

/* La liste : les filtres, une ligne grise pour un type que l'équipe ne traite pas */
/* Les filtres et les onglets passent à la ligne : sur un téléphone, celui qui est choisi reste en vue. */
.scl-td-filtres { margin:6px 0 10px; flex-wrap:wrap; overflow-x:visible; }
.scl-td .ec-table tr.scl-td-cache { display:none; }
.scl-td .ec-table tr.scl-td-gris td { color:var(--muted); }
.scl-td .ec-table tr.scl-td-gris td b { font-weight:600; color:var(--muted); }
.scl-td-eqs { display:inline-flex; flex-wrap:wrap; gap:4px; }
.scl-td-eq { 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-td-oui, .scl-td-non { display:inline-block; font-size:11.5px; font-weight:600; border-radius:999px; padding:1px 9px; white-space:nowrap; }
.scl-td-oui { background:var(--lo-w); color:var(--lo); }
.scl-td-non { background:var(--surface-2); color:var(--muted); }

/* Les vues de colonnes de la table des données : une classe sur la table, rien n'est redessiné */
.scl-td-vues { margin:0 0 8px; }
.scl-td-vue-def .scl-td-c-forme, .scl-td-vue-def .scl-td-c-qui,
.scl-td-vue-forme .scl-td-c-def, .scl-td-vue-forme .scl-td-c-qui,
.scl-td-vue-qui .scl-td-c-def, .scl-td-vue-qui .scl-td-c-forme { display:none; }
/* Toutes les colonnes : la table défile dans sa carte plutôt que d'écraser ses textes. */
.scl-td-vue-tout { overflow-x:auto; }
.scl-td-vue-tout .scl-fd-t { min-width:1180px; }

/* La fiche */
.scl-td-onglets { margin:6px 0 10px; flex-wrap:wrap; overflow-x:visible; }
.scl-td-sections { display:flow-root; }
.scl-td .card h2 { justify-content:flex-start; flex-wrap:wrap; gap:4px 8px; }
.scl-td .card h2 .cpt { margin-left:0; font-weight:500; font-size:13px; color:var(--muted); }
.scl-td details:not([open]) > summary::before { content:"+ "; }
.scl-td details[open] > summary::before { content:"− "; }
.scl-td-traite { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:0 0 10px; font-size:13px; color:var(--ink-soft); }
.scl-td-bascule { display:inline; margin:0; }
.scl-td-traite .scl-td-note { flex:1 1 100%; margin:0; }
.scl-td-aide { color:var(--muted); font-size:12.5px; margin:0 0 10px; }
.scl-td-h3 { font-size:13.5px; font-weight:600; margin:14px 0 6px; color:var(--ink); }
.scl-td-tab { margin:0 0 8px; }
.scl-td-manque { color:var(--hi); font-weight:600; }
.scl-td-nt { color:var(--muted); font-style:italic; }
.scl-td-dit { margin:0 0 8px; font-size:13px; color:var(--ink-soft); }
.scl-td-alerte { color:var(--hi); }
.scl-td-ouvrir { font-size:12.5px; font-weight:500; }
.scl-td-piece { margin-bottom:12px; }
.scl-td-voir > summary { cursor:pointer; font-size:12.5px; color:var(--ink-soft); }
.scl-td-page { position:relative; max-width:620px; margin:8px auto 0; }
.scl-td-page img { display:block; width:100%; height:auto; background:#fff; box-shadow:0 1px 5px rgba(20,38,59,.2); }

/* Les gestes : un intitulé qui s'ouvre sur son formulaire (rg-geste), un texte sur toute la largeur */
.scl-td .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-td .rg-geste label.rg-large { flex:1 1 100%; }
.scl-td-services { flex:1 1 100%; border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:4px 12px; }
.scl-td-services legend { font-size:12px; color:var(--muted); padding:0; margin:0 0 4px; }
.scl-td-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-td-effet:empty { display:none; }
.scl-td-effet p { margin:0 0 4px; }
.scl-td-effet ul { margin:0 0 6px; padding-left:18px; }
.scl-td-ou { font-weight:600; }

@media (max-width:700px){
  .scl-td-detail > div { grid-template-columns:minmax(0, 1fr); gap:0; }
  /* Au téléphone, une ligne est une carte : toutes ses cases s'empilent, rien ne défile en largeur. */
  .scl-td-vue-tout .scl-fd-t { min-width:0; }
}