/* La Configuration de la solution : l'onglet COLLECTIONS (CDC_APPSTUDIO_MODIF I4, 2026-11-05). Une feuille à part : 48-cms.css
   tient sous 650 lignes (son cliquet ne remonte jamais). Au centre, les éléments en tableau (une ligne se choisit au clic ou au
   clavier) ; à droite, la forme de la collection (ses champs en cartes) ou la fiche d'un élément. Jetons de l'atelier seulement. */
@layer modules{
  .cms-col-tete{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-8); }
  .cms-col-tableau{ overflow:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
  .cms-col-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm, 13px); }
  .cms-col-table th, .cms-col-table td{ padding:var(--sp-6) var(--sp-8); text-align:start; border-bottom:1px solid var(--line); white-space:nowrap; }
  .cms-col-table thead th{ color:var(--mut); font-weight:500; background:var(--bg); }
  .cms-col-table tbody th{ font-weight:600; white-space:normal; }
  .cms-col-table tbody tr{ cursor:pointer; }
  .cms-col-table tbody tr:hover{ background:var(--bg); }
  .cms-col-table tbody tr.on{ background:var(--accent-soft, var(--bg)); box-shadow:inset 3px 0 0 var(--accent); }
  .cms-col-table tbody tr:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
  .cms-col-table tbody tr:last-child > *{ border-bottom:0; }
  .cms-col-etat{ display:inline-block; padding:1px var(--sp-6); border-radius:999px; border:1px solid var(--line); color:var(--mut); font-size:12px; }
  .cms-col-etat.on{ border-color:var(--accent); color:var(--accent); }
  .cms-droite .cms-col-champs{ list-style:none; margin:0 0 var(--sp-6); padding:0; display:flex; flex-direction:column; gap:var(--sp-4); }
  .cms-droite .cms-col-champ{ display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-6); border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
  .cms-droite .cms-col-champ-l{ display:flex; align-items:center; gap:var(--sp-4); min-width:0; }
  .cms-droite .cms-col-champ-l > input[type=text], .cms-droite .cms-col-champ-l > select{ flex:1 1 auto; min-width:0; }
  .cms-droite .cms-col-champ code{ color:var(--mut); font-size:11px; }
  .cms-droite .cms-col-faute{ color:var(--danger, var(--txt)); }
  .cms-droite .cms-col-fiche textarea{ width:100%; }
}
/* I4b, I4c : le filtre et le tri d'une liste composés de leurs parties, les champs d'une vue modèle en jetons, et le dessin d'une
   liste (les cartes des éléments publiés, comme la page publiée les montrera). */
@layer modules{
  .cms-droite .cms-col-compose{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; }
  .cms-droite .cms-col-compose legend{ padding:0; margin-bottom:var(--sp-4); }
  .cms-droite .cms-col-jetons .cms-cible-jeton{ cursor:pointer; }
  .cms-ap-composee .cms-ap-liste{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
  .cms-ap-composee .cms-ap-liste.en-liste{ grid-template-columns:1fr; }
  .cms-ap-composee .cms-ap-carte{ display:flex; flex-direction:column; gap:4px; padding:10px; border:1px solid var(--cms-ap-filet, rgba(127,127,127,.3)); border-radius:8px; min-width:0; }
  .cms-ap-composee .cms-ap-carte small{ opacity:.7; }
  .cms-ap-composee .cms-ap-carte-image{ display:grid; place-items:center; aspect-ratio:3 / 2; border-radius:6px; background:rgba(127,127,127,.12); }
  .cms-ap-composee .cms-ap-carte-image svg{ width:22px; height:22px; opacity:.6; }
  .cms-ap-composee .cms-ap-pagination, .cms-ap-composee .cms-ap-liste-vide{ margin:8px 0 0; opacity:.75; }
}
/* I4d : le dessin de la recherche, un champ et son bouton. */
@layer modules{
  .cms-ap-composee .cms-ap-recherche{ display:flex; gap:8px; align-items:stretch; }
  .cms-ap-composee .cms-ap-recherche-champ{ flex:1 1 auto; display:flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid var(--cms-ap-filet, rgba(127,127,127,.4)); border-radius:6px; opacity:.8; min-width:0; }
  .cms-ap-composee .cms-ap-recherche-champ svg{ width:16px; height:16px; flex:none; }
}