/* ============================================================================
   components.css — Bibliotheque de composants reutilisables (charte v1.19.3)
   ----------------------------------------------------------------------------
   Composants token-ises, declares une seule fois (Factory Method : une
   definition par element recurrent). Demarre la bibliotheque ; s'enrichira au
   fil des phases. Toutes les valeurs viennent de tokens.css.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Interrupteur (toggle) — case a cocher stylisee en bascule 46x26 (handoff §6).
   Reutilisable partout (mapping Sync SQL, visibilites, parametres).
   --------------------------------------------------------------------------- */
/* Selecteur scope a meme specificite qu'app.css (body:not(...):not(...) input...)
   + charge apres app.css => l'emporte. Les dimensions sont en !important car
   app.css force 16x16 !important sur toutes les cases a cocher. */
body:not(.login-page):not(.public-product-page) input.toggle-input,
.toggle-input {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 26px !important;
  min-height: 26px !important;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--toggle-off);
  accent-color: auto;
  position: relative;
  cursor: pointer;
  transition: background var(--t-fast);
}
.toggle-input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: left var(--t-fast);
}
body:not(.login-page):not(.public-product-page) input.toggle-input:checked,
.toggle-input:checked { background: var(--toggle-on); }
.toggle-input:checked::after { left: 23px; }
.toggle-input:disabled { opacity: 0.55; cursor: not-allowed; }
.toggle-input:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Pastille de statut (chip) — fond teinte (~12%) + texte couleur pleine + point
   (handoff §2). Couleur portee par la classe de tonalite (.chip--*).
   --------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: var(--fs-chip);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.chip--ok { color: var(--ok-text); background: color-mix(in srgb, var(--ok-icon) 12%, var(--card)); }
.chip--info { color: var(--info-2); background: color-mix(in srgb, var(--info) 12%, var(--card)); }
.chip--warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--card)); }
.chip--danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--card)); }
.chip--orange { color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, var(--card)); }
.chip--violet { color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, var(--card)); }
.chip--neutral { color: var(--neutral); background: color-mix(in srgb, var(--neutral) 12%, var(--card)); }

/* ---------------------------------------------------------------------------
   Mediatheque (CMS intranet) — grille de vignettes.
   --------------------------------------------------------------------------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.media-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}
.media-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  border-radius: 11px;
  background: var(--field-bg);
  overflow: hidden;
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-file-icon { font-family: var(--font-mono); font-weight: 800; color: var(--danger); font-size: 18px; }
.media-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.media-meta strong { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Editeur enrichi (CMS intranet) — barre d'outils + zone contenteditable.
   Sans dependance : execCommand natif. Le contenu HTML est synchronise dans un
   input cache soumis avec le formulaire.
   --------------------------------------------------------------------------- */
.rt-editor {
  border: 1px solid var(--field-border);
  border-radius: var(--r-field);
  background: var(--field-bg);
  overflow: hidden;
}
.rt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--card);
}
.rt-toolbar button {
  min-width: var(--touch-min);
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.rt-toolbar button:hover { border-color: var(--gold); }
.rt-toolbar button:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }
.rt-area {
  min-height: 180px;
  padding: 12px 14px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text);
  outline: none;
}
.rt-area:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--info) 30%, var(--card)); }
.rt-area h3 { font-size: 17px; font-weight: 800; margin: 0.6em 0 0.3em; color: var(--ink); }
.rt-area ul { margin: 0.4em 0 0.4em 1.2em; }

/* ---------------------------------------------------------------------------
   Mapping Sync SQL — colonnes repliquees vers la base miroir, par table.
   --------------------------------------------------------------------------- */
.sync-mapping .mirror-table-card {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.mirror-table-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.mirror-table-head .mirror-table-name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
.mirror-table-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-dark);
  font-size: 13px;
  background: var(--c, var(--neutral));
  box-shadow: 0 4px 10px -4px var(--c, var(--neutral));
}
.mirror-count { margin-left: auto; }

.mirror-col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mirror-col {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 11px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  min-height: var(--touch-min);
}
/* Ligne activee : teinte verte douce (handoff §4.11). */
.mirror-col:has(.toggle-input:checked),
.mirror-col.is-locked {
  background: color-mix(in srgb, var(--ok-icon) 7%, var(--card));
  border-color: color-mix(in srgb, var(--ok-icon) 25%, var(--card));
}
.mirror-col-name { display: none; } /* nom technique masqué : on ne garde que le libellé (v2.22.0) */
.mirror-col-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  margin-right: auto;
}
.mirror-col .toggle-input,
.mirror-col .mirror-lock { margin-left: 8px; }
.mirror-col.is-sensitive { border-style: dashed; }

@media (max-width: 760px) {
  .mirror-col-grid { grid-template-columns: 1fr; }
}

/* Shell applicatif (app-frame, sidebar, nav, topbar, page-content) :
   desormais dans shell.css. Responsive dans responsive.css. */

/* ===========================================================================
   PRIMITIVES DESIGN SYSTEM — panel, ph, kpi (handoff §2)
   =========================================================================== */

/* Panneau blanc */
.ds-panel {
  background: var(--card);
  border-radius: 18px;
  border: 1px solid rgba(7,27,59,.07);
  box-shadow: var(--sh-panel);
  margin-bottom: 22px;
}

/* En-tête panneau */
.ds-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.ds-panel-head-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}
.ds-badge {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--gold-badge-text);
  background: rgba(217,168,67,.16);
  border: 1px solid rgba(217,168,67,.4);
  border-radius: var(--r-pill);
  padding: 4px 11px;
}

/* En-tête de page (ph) */
.ds-ph {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ds-ph h1 {
  margin: 0 0 4px;
  font-size: var(--fs-h1);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}
.ds-ph p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 620px;
}
.ds-ph-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* KPI card */
.ds-kpi {
  display: flex;
  gap: 14px;
  padding: 16px;
  background: var(--card);
  border-radius: 16px;
  border: 1px solid rgba(7,27,59,.07);
  box-shadow: var(--sh-card);
  align-items: flex-start;
}
.ds-kpi-icon {
  flex: 0 0 46px;
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c, var(--neutral)) 12%, var(--card));
}
.ds-kpi-icon .material-symbols-rounded {
  font-size: 24px;
  color: var(--c, var(--neutral));
}
.ds-kpi-body { min-width: 0; }
.ds-kpi-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--c, var(--ink));
  line-height: 1;
}
.ds-kpi-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-sub);
  margin-top: 4px;
}

/* Boutons design system */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s;
}
.ds-btn:hover { filter: brightness(1.06); }
.ds-btn-gold  { background: var(--gold-grad); color: var(--on-gold); box-shadow: var(--sh-gold); }
.ds-btn-green { background: var(--btn-green-grad); color: var(--on-dark); }
.ds-btn-blue  { background: var(--btn-blue-grad);  color: var(--on-dark); }
.ds-btn-red   { background: var(--btn-red-grad);   color: var(--on-dark); }
.ds-btn-ghost { background: var(--surface-subtle); color: var(--ink); border: 1.5px solid var(--field-border); }
.ds-btn-sm    { height: 38px; font-size: 12.5px; padding: 0 14px; border-radius: 10px; }
.ds-btn-full  { width: 100%; }
.ds-btn .material-symbols-rounded { font-size: 19px; }
.ds-btn-sm .material-symbols-rounded { font-size: 16px; }

/* Champ formulaire design system */
.ds-field { margin-bottom: 14px; }
.ds-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 7px;
}
.ds-field input,
.ds-field select,
.ds-field textarea {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  font-family: var(--font-sans);
  border: 1.5px solid var(--field-border);
  border-radius: 11px;
  background: var(--field-bg);
  color: var(--text);
  outline: none;
  margin: 0;
  transition: border-color .15s;
}
.ds-field textarea { height: auto; padding: 10px 12px; min-height: 90px; resize: vertical; line-height: 1.5; }
.ds-field input:focus,
.ds-field select:focus,
.ds-field textarea:focus { border-color: var(--info); }

/* Alertes design system */
.ds-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 11px;
  padding: 11px 14px;
  margin-bottom: 20px;
  font-size: 13px;
}
.ds-alert .material-symbols-rounded { font-size: 18px; flex-shrink: 0; }
.ds-alert-info    { background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.4); color: var(--warn-dark); }
.ds-alert-success { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.35); color: var(--ok-dark); }
.ds-alert-error   { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.3); color: var(--danger-dark); }

/* Table shell design system */
.ds-table-head {
  display: grid;
  padding: 13px 20px;
  background: var(--table-head-grad);
  border-bottom: 1px solid rgba(7,27,59,.08);
}
.ds-table-head-cell {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--table-head-label);
  text-transform: uppercase;
}
.ds-table-row {
  display: grid;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(7,27,59,.05);
  transition: background .1s;
}
.ds-table-row:last-child { border-bottom: 0; }
.ds-table-row:hover { background: rgba(7,27,59,.02); }

/* Responsive taille du titre de page — reste ici, lie au composant ds-ph */
@media (max-width: 980px) {
  .ds-ph h1 { font-size: var(--fs-h1-m); }
}

/* ===========================================================================
   TABLEAUX PAGES — .pg-table  (shared across list/quality/manufacturing/logi)
   =========================================================================== */
.pg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pg-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.pg-table thead tr { background: var(--table-head-grad); }
.pg-table th {
  padding: 12px 16px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--table-head-label);
  border-bottom: 1px solid rgba(7,27,59,.08);
  text-align: left;
  white-space: nowrap;
}
.pg-table td {
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--text);
  border-bottom: 1px solid rgba(7,27,59,.04);
  vertical-align: middle;
}
.pg-table tbody tr:last-child td { border-bottom: 0; }
.pg-table tbody tr:hover td { background: rgba(7,27,59,.02); }

/* Cellule numéro série (lien bleu) */
.pg-serial-link {
  font-size: 15px;
  font-weight: 800;
  color: var(--info);
  text-decoration: none;
}
.pg-serial-link:hover { text-decoration: underline; }

/* ===========================================================================
   BARRE DE FILTRES — .pg-toolbar
   =========================================================================== */
.pg-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.pg-toolbar-field { display: flex; flex-direction: column; gap: 6px; min-width: 180px; flex: 1; max-width: 260px; }
.pg-toolbar-field label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .04em;
}
.pg-toolbar-field input,
.pg-toolbar-field select {
  height: 40px;
  padding: 0 11px;
  font-size: 13.5px;
  font-family: var(--font-sans);
  border: 1.5px solid var(--field-border);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--text);
  outline: none;
}
.pg-toolbar-field input:focus,
.pg-toolbar-field select:focus { border-color: var(--info); }
.pg-toolbar-actions { display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; }
.pg-results-badge {
  font-size: 12px; font-weight: 800;
  color: var(--gold-badge-text);
  background: rgba(217,168,67,.16);
  border: 1px solid rgba(217,168,67,.4);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  align-self: flex-end;
  white-space: nowrap;
}

/* Alerte success dans panel */
.pg-alert-ok {
  margin: 14px 20px;
  padding: 11px 14px;
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.35);
  border-radius: 11px;
  font-size: 13px;
  color: var(--ok-dark);
  display: flex; align-items: center; gap: 8px;
}
.pg-alert-ok .material-symbols-rounded { font-size: 17px; }

/* ===========================================================================
   PAGINATION — .pg-pager
   =========================================================================== */
.pg-pager {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}
.pg-pager-info {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
}

/* ===========================================================================
   SECTION BATCH (manufacturing / logistique)
   =========================================================================== */
.pg-batch {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(7,27,59,.02);
}
.pg-batch-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 14px;
}
.pg-batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.pg-batch-grid > * > label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.pg-batch-grid input,
.pg-batch-grid select {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  font-size: 13.5px;
  font-family: var(--font-sans);
  border: 1.5px solid var(--field-border);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--text);
  outline: none;
}
.pg-batch-grid input:focus,
.pg-batch-grid select:focus { border-color: var(--info); }

/* Checkbox row dans tableaux */
.pg-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-height: 40px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.pg-check-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--info); flex-shrink: 0; }

/* Actions bar en pied de section */
.pg-actions-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

/* Inputs inline dans tableau (manufacturing/logistique) */
.pg-table input[type="text"],
.pg-table input[type="date"],
.pg-table select {
  height: 36px;
  padding: 0 10px;
  font-size: 13px;
  font-family: var(--font-sans);
  border: 1.5px solid var(--field-border);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--text);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

/* Badges colorés statut qualité */
.pg-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 800;
}
.pg-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pg-chip-warn  { color: var(--warn);    background: rgba(189,125,31,.1); border: 1px solid rgba(189,125,31,.3); }
.pg-chip-ok    { color: var(--ok-text); background: rgba(11,122,70,.1); border: 1px solid rgba(11,122,70,.3); }
.pg-chip-blue  { color: var(--info);    background: rgba(37,99,235,.1); border: 1px solid rgba(37,99,235,.25); }
.pg-chip-gray  { color: var(--neutral); background: rgba(91,107,122,.1); border: 1px solid rgba(91,107,122,.25); }
.pg-chip-red   { color: var(--danger);  background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.28); }
/* Gravité "critique" (journal des bugs) : plus appuyé que .pg-chip-red pour se distinguer visuellement de "error". */
.pg-chip-critical { color: #fff; background: var(--danger); border: 1px solid var(--danger); }

@media (max-width: 760px) {
  .pg-toolbar { gap: 8px; }
  .pg-toolbar-field { min-width: 100%; max-width: 100%; }
  .pg-toolbar-actions { width: 100%; }
}

/* Resets specifiques aux composants (les resets globaux sont dans reset.css) */

/* Dans ds-field, le label garde son margin (reset.css met .app-frame label a 0) */
.ds-field label          { margin-bottom: 7px; }
.pg-toolbar-field label  { margin-bottom: 0; }

/* ===========================================================================
   TITLE SECTION — séparateur visuel entre blocs d'un formulaire / panneau
   =========================================================================== */
.ds-section-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 16px;
  margin-top: 4px;
}

/* ===========================================================================
   TOGGLE ROW — label-conteneur pour input.toggle-input + texte
   =========================================================================== */
.ds-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-height: var(--touch-min);
}
.ds-toggle-row span {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* ===========================================================================
   KPI GRID — grille responsive pour les cartes KPI (dashboard, etc.)
   =========================================================================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

/* ===========================================================================
   ÉTAT VIDE — affiché quand un panel n'a pas de résultats
   =========================================================================== */
.pg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 52px 20px;
  text-align: center;
  color: var(--text-muted);
}
.pg-empty .material-symbols-rounded {
  font-size: 44px;
  color: var(--border-strong);
}
.pg-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.pg-empty-sub {
  font-size: 13px;
  margin: 0;
  max-width: 380px;
}

/* ===========================================================================
   PAGINATION PAGES — chiffres cliquables + ellipsis
   =========================================================================== */
.pg-pager-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border: 1.5px solid var(--field-border);
  background: var(--field-bg);
  transition: border-color .15s;
}
.pg-pager-page:hover { border-color: var(--gold); }
.pg-pager-page--active {
  background: var(--navy-800);
  color: var(--on-dark);
  border-color: var(--navy-800);
}
.pg-pager-ellipsis {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0 4px;
}

/* =========================================================================
   PAGINATION DISABLED — bouton désactivé (pas de page précédente/suivante)
   ========================================================================= */
.pg-disabled {
  opacity: .4;
  pointer-events: none;
}

/* =========================================================================
   AIDE CHAMPS — texte d'aide sous les champs de formulaire
   ========================================================================= */
.ds-field-help {
  font-size: 12px;
  color: var(--text-muted);
  margin: 5px 0 0;
}

/* =========================================================================
   TEXTE MUTED SMALL — label/aide avec taille 13px muted
   ========================================================================= */
.ds-muted-sm {
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================================================================
   PANEL BODY / ROW — conteneurs internes standards
   ========================================================================= */
.ds-panel-body { padding: 20px; }
.ds-panel-row  { padding: 16px 20px; }
.ds-panel-row-lg { padding: 18px 20px; }
.ds-stack { display: flex; flex-direction: column; gap: 16px; }
.ds-flex-wrap { display: flex; gap: 8px; flex-wrap: wrap; }

/* =========================================================================
   RÈGLES SHELL — Panneau gauche + onglets (4 pages section Règles)
   ========================================================================= */
.rules-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
/* v2.1.2 : placement EXPLICITE des colonnes. Sans ça, sur la page rendue,
   l'auto-placement de la grille plaçait la liste (.rules-side, 1er enfant DOM)
   dans la colonne large (654px) et compressait l'espace de travail à 264px
   -> layout inutilisable (le vrai « affichage cassé »). On fixe donc :
   liste = colonne 1 (étroite), espace de travail = colonne 2 (large). */
.rules-shell > .rules-side      { grid-column: 1; }
.rules-shell > .rules-workspace { grid-column: 2; }

.rules-side {
  position: sticky;
  top: 86px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
}

.rules-side__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.rules-side__head b { color: var(--ink); font-size: 13.5px; font-weight: 800; }
.rules-side__head span { font-size: 11px; color: var(--text-muted); }

.rules-families { display: flex; flex-direction: column; gap: 2px; }

.rules-family-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 11px;
  color: var(--ink);
  text-decoration: none;
  transition: background .15s;
  font-size: 13px;
  font-weight: 700;
}
.rules-family-item:hover { background: rgba(7,27,59,.05); }
.rules-family-item.active {
  background: rgba(217,168,67,.12);
  outline: 1px solid rgba(217,168,67,.28);
}
.rules-family-mark {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: rgba(232,132,58,.13);
  color: var(--orange, #c86726);
  font-weight: 900; font-size: 12px;
  flex: 0 0 auto;
}
.rules-family-copy { min-width: 0; flex: 1; }
.rules-family-copy b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rules-family-copy span { display: block; color: var(--text-muted); font-size: 11px; margin-top: 1px; font-weight: 600; }

.rules-sub-list { margin: 2px 0 4px 42px; display: flex; flex-direction: column; gap: 1px; }
.rules-sub-item { color: var(--text-muted); font-size: 11.5px; padding: 3px 6px; border-radius: 6px; }

.rules-side__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  font-size: 12.5px;
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 700;
  transition: color .15s;
}
.rules-side__add:hover { color: var(--ink); }

.rules-empty-state { font-size: 13px; color: var(--text-muted); padding: 10px 4px; }
.rules-empty-state a { color: var(--info, #2563eb); font-weight: 700; }

/* Onglets des 4 étapes */
.rules-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.rules-tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
}
.rules-tabs__item:hover { background: rgba(7,27,59,.04); color: var(--ink); }
.rules-tabs__item[aria-current="page"] {
  border-color: rgba(217,168,67,.6);
  background: linear-gradient(180deg, #fffdf8, #fff6df);
  color: var(--ink);
}
.rules-tabs__num {
  display: grid; place-items: center;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: rgba(7,27,59,.07);
  font-size: 10px;
  flex: 0 0 auto;
}
.rules-tabs__item[aria-current="page"] .rules-tabs__num {
  background: var(--gold-grad);
  color: var(--on-gold);
}

/* Badge de portée inline */
.rules-scope-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--card);
}

@media (max-width: 960px) {
  .rules-shell { grid-template-columns: 1fr; }
  .rules-side { position: static; }
}

/* =========================================================================
   STICKY SAVE BAR — barre de sauvegarde fixe (module Règles)
   ========================================================================= */
.rules-sticky-bar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w);
  right: 0;
  z-index: 200;
  background: var(--sidebar);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 28px;
  border-top: 2px solid var(--gold);
  transform: translateY(110%);
  transition: transform .25s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.rules-sticky-bar.is-dirty {
  transform: translateY(0);
  pointer-events: all;
}
.rules-sticky-bar__msg {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin: 0;
}
.rules-sticky-bar__msg strong { color: var(--gold); }

@media (max-width: 960px) {
  .rules-sticky-bar { left: 0; }
}

body:has(.rules-sticky-bar) .pg { padding-bottom: 72px; }

/* ── Utilitaires templates Règles ─────────────────────────────────────── */
.r-hint       { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }
.r-field-help { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }
.r-actions    { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
/* Sous-titre de regroupement à l'intérieur d'un même panneau (v2.1.0 :
   fusion « Informations standard » / « complémentaires » dans une seule liste). */
.r-subtitle   { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); margin: 0 0 6px; }
.r-separator  { height: 1px; background: var(--border-strong); border: 0; margin: 28px 0 18px; }