/* =========================================================
   DESIGN SYSTEM — base.css
   Styles de base pour les éléments HTML natifs, scopés à
   .ds-root pour ne pas contaminer les pages legacy.
   ========================================================= */

.ds-root {
  background-color: var(--ds-color-bg-page);
  margin: 0;
}

/* #1731 — Une page DS posée dans le cadre blanc d'Inspinia : sans ce modificateur, le gris de
   `.ds-root` forme un bloc collé aux bords, avec le titre de la page dessus. */
.ds-root.ds-root--transparent { background-color: transparent; }

/* 🔴 `hidden` doit gagner sur les `display:` des composants (#1191).
   Sans cette règle, tout élément que le DS met en `display: flex` ou `grid` —
   `ds-alert`, `ds-card__header`, `ds-status`, la plupart des barres d'actions —
   RESTE VISIBLE alors que l'attribut `hidden` est bien posé. Constaté sur la page
   de détail d'une promotion : l'avertissement « cette promotion n'a pas de cohorte
   Kairos » s'affichait sur des promotions qui en avaient une, ce qui est exactement
   le contraire de ce que l'écran devait dire.
   Le piège est muet : `element.hidden === true` en JS, l'élément à l'écran. */
.ds-root [hidden] {
  display: none !important;
}

/* Styles de titres limités à h1/h2 — h3-h6 sont laissés à la spécificité
   des composants (ex: .ds-card__title) pour éviter qu'un sélecteur générique
   ne surcharge un composant typé h3. Si un page-header narratif a besoin
   de h3-h6 stylés, il définira lui-même ses tailles. */
.ds-root h1,
.ds-root h2 {
  margin: 0 0 var(--ds-space-3) 0;
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-height-tight);
  color: var(--ds-color-text);
}

.ds-root h1 { font-size: var(--ds-font-size-2xl); }
.ds-root h2 { font-size: var(--ds-font-size-xl); }

.ds-root p {
  margin: 0 0 var(--ds-space-3) 0;
}

/* #1470 — un lien habillé en bouton (`<a class="ds-btn …">`, usage documenté dans button.css)
   garde la couleur de SON bouton : sans l'exclusion, cette règle — plus spécifique que
   `.ds-btn--primary` — écrivait le libellé en bleu sur le fond vert du bouton. */
.ds-root a:not(.ds-btn) {
  color: var(--ds-color-link);
  text-decoration: none;
  transition: color var(--ds-transition-fast);
}

.ds-root a:not(.ds-btn):hover,
.ds-root a:not(.ds-btn):focus {
  color: var(--ds-color-link-hover);
  text-decoration: underline;
}

.ds-root code,
.ds-root pre {
  font-family: var(--ds-font-mono);
  font-size: 0.9em;
}

.ds-root code {
  padding: 0.1em 0.35em;
  background: var(--ds-color-gray-100);
  border-radius: var(--ds-radius-sm);
}

.ds-root pre {
  padding: var(--ds-space-3);
  background: var(--ds-color-gray-50);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  overflow-x: auto;
}

.ds-root hr {
  border: 0;
  border-top: 1px solid var(--ds-color-border);
  margin: var(--ds-space-6) 0;
}

/* ---------- Helpers utilitaires limités ----------
   Volontairement minimalistes — on ne refait pas Tailwind.
   ------------------------------------------------- */
.ds-text-muted    { color: var(--ds-color-text-muted); }
.ds-text-subtle   { color: var(--ds-color-text-subtle); }
.ds-text-success  { color: var(--ds-color-success-strong); }
.ds-text-warning  { color: var(--ds-color-warning-strong); }
.ds-text-danger   { color: var(--ds-color-danger-strong); }
.ds-text-info     { color: var(--ds-color-info-strong); }
.ds-text-bold     { font-weight: var(--ds-font-weight-semibold); }
.ds-text-center   { text-align: center; }
.ds-text-right    { text-align: right; }
.ds-text-uppercase { text-transform: uppercase; letter-spacing: 0.04em; }

.ds-mt-0 { margin-top: 0; }
.ds-mt-2 { margin-top: var(--ds-space-2); }
.ds-mt-4 { margin-top: var(--ds-space-4); }
.ds-mt-6 { margin-top: var(--ds-space-6); }

.ds-mb-0 { margin-bottom: 0; }
.ds-mb-2 { margin-bottom: var(--ds-space-2); }
.ds-mb-4 { margin-bottom: var(--ds-space-4); }
.ds-mb-6 { margin-bottom: var(--ds-space-6); }

.ds-stack { display: flex; flex-direction: column; gap: var(--ds-space-4); }
.ds-row   { display: flex; flex-direction: row; gap: var(--ds-space-3); align-items: center; flex-wrap: wrap; }
.ds-row-end { justify-content: flex-end; }
/* #1867 — des cartes de page sur deux colonnes (remplace `row` + `col-md-6`) : chaque enfant est une
   colonne de cartes ; une seule colonne dès que la place manque pour deux de 420 px. */
.ds-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 0 var(--ds-space-4);
  align-items: start;
}
.ds-colonnes > * { min-width: 0; }
/* #1868 — un texte suivi (historique des versions) : ses intertitres h3 / h4 et ses listes à l'échelle du
   design system. La base ne stylant que h1 / h2, ils prenaient jusque-là les tailles de Bootstrap. */
.ds-texte { line-height: var(--ds-line-height-normal); }
.ds-texte h3 {
  margin: var(--ds-space-6) 0 var(--ds-space-2);
  font-size: var(--ds-font-size-lg);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-height-tight);
  color: var(--ds-color-text);
}
.ds-texte h4 {
  margin: var(--ds-space-4) 0 var(--ds-space-2);
  font-size: var(--ds-font-size-md);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-height-tight);
  color: var(--ds-color-text-muted);
}
.ds-texte > :first-child { margin-top: 0; }
.ds-texte ul { margin: 0 0 var(--ds-space-3); padding-left: var(--ds-space-5); }
.ds-texte li + li { margin-top: var(--ds-space-1); }
/* #1867 — l'image déposée (signature, badge), dans un cadre neutre. */
.ds-apercu-image {
  display: inline-block;
  padding: var(--ds-space-3);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-bg-muted);
}
.ds-apercu-image > img { display: block; max-width: 100%; max-height: 150px; }
/* #1718 — texte lu par les lecteurs d'écran, invisible à l'écran (en-tête d'une colonne d'icônes…). */
.ds-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Container responsive simple */
.ds-container {
  width: 100%;
  max-width: var(--ds-content-max-width);
  margin: 0 auto;
  padding: 0 var(--ds-space-4);
}

/* -------------------------------------------------
   Grille de filtres responsive (listes / recherches)
   Remplace les `col-md-*` BS3 pour les bandeaux de filtres.
   Promu depuis le PoC postes/index lors de #590.
   ------------------------------------------------- */
.ds-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--ds-space-3);
  margin-bottom: var(--ds-space-3);
}
.ds-filter-grid .ds-field { margin-bottom: 0; }

/* Barre d'actions dans l'en-tête d'une carte (`.ds-card__header`). */
.ds-card__toolbar {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
}