/* =========================================================================
 * tokens-mst.css — Tokens de Groupe B du site (Master v0, préfixe "mst")
 * =========================================================================
 *
 * PÉRIMÈTRE : uniquement ce qu'Elementor NE règle PAS nativement.
 *   - Groupe A (couleurs, polices, largeur de contenu) → kit Elementor, PAS ici.
 *   - Groupe B (espacement, rayon, ombres, bordures, 6 encarts) → ici.
 *
 * DEUX ÉTAGES (cf tokens-catalogue.md) :
 *   1. Bloc :root = valeurs de la peau au repos (l'identité chiffrée du site).
 *   2. Feuille de peau = mappe les classes préfixées "mst-…" vers ces variables ;
 *      les classes se posent automatiquement (mobilier du socle) ou une fois à la
 *      main sur un élément de gabarit Elementor (Avancé → Classes CSS).
 *
 * SOURCE DE VÉRITÉ DES VALEURS D'ENCART = /srv/<site>/CLAUDE.md (tableau Encarts).
 * Ici = matérialisation pour le MOBILIER du thème. Les ARTICLES reçoivent une
 * copie inline (jamais ces classes) : le corps d'article ne dépend d'aucune peau.
 *
 * MASTER NEUTRE : les valeurs ci-dessous sont des PLACEHOLDERS neutres. Chaque
 * nouveau site les remplace par les valeurs de sa charte (générées depuis son
 * CLAUDE.md à l'étape 5 du pipeline). Deux sites divergent réellement (valeurs
 * ET préfixe de classe) → anti-footprint C12.
 * ========================================================================= */

:root {
  /* --- Espacement / rythme --- */
  --mst-space-section: 3rem;        /* rythme vertical entre sections */
  --mst-space-block: 1.25rem;       /* entre blocs / paragraphes */
  --mst-space-inline: 1rem;         /* gaps horizontaux */
  --mst-space-card-padding: 1.25rem;/* intérieur des cartes */

  /* --- Formes : rayons --- */
  --mst-radius-card: 6px;
  --mst-radius-button: 6px;
  --mst-radius-image: 6px;
  --mst-radius-encart: 6px;

  /* --- Formes : ombres / relief --- */
  --mst-shadow-card: 0 1px 4px rgba(0, 0, 0, .08);
  --mst-shadow-hover: 0 4px 14px rgba(0, 0, 0, .12);
  --mst-shadow-header: 0 1px 3px rgba(0, 0, 0, .06);

  /* --- Bordures --- */
  --mst-border-divider: 1px solid rgba(0, 0, 0, .10);
  --mst-border-encart-width: 4px;   /* épaisseur barre gauche des encarts */

  /* --- Encarts : 6 types canoniques (placeholders neutres du master) ---
   * Convention : bg = color-mix(in srgb, <border> 12%, white).
   * Remplacés par site depuis le CLAUDE.md (couleurs de la charte). */
  --mst-encart-essentiel-border: #37474f;
  --mst-encart-essentiel-bg: color-mix(in srgb, var(--mst-encart-essentiel-border) 12%, white);

  --mst-encart-disclaimer-border: #f9a825;   /* jaune ambré commun (règle globale) */
  --mst-encart-disclaimer-bg: #fff8e1;        /* fond ambré commun */

  --mst-encart-info-border: #546e7a;
  --mst-encart-info-bg: color-mix(in srgb, var(--mst-encart-info-border) 12%, white);

  --mst-encart-conseil-border: #2e7d5b;
  --mst-encart-conseil-bg: color-mix(in srgb, var(--mst-encart-conseil-border) 12%, white);

  --mst-encart-alerte-border: #c62828;
  --mst-encart-alerte-bg: color-mix(in srgb, var(--mst-encart-alerte-border) 12%, white);

  --mst-encart-citation-border: #6a5568;
  --mst-encart-citation-bg: color-mix(in srgb, var(--mst-encart-citation-border) 12%, white);
}

/* =========================================================================
 * FEUILLE DE PEAU — classes préfixées "mst-" → variables ci-dessus.
 * Posées sur le mobilier du thème/socle et, une fois, sur les éléments de
 * gabarit Elementor qui doivent suivre la charte de Groupe B.
 * ========================================================================= */

/* Cartes (grilles, articles liés, mobilier)
 * - overflow:hidden → l'image vient à fleur des bords, coins arrondis respectés.
 * - flex colonne + height:100% → dans une grille, toutes les cartes ont la même
 *   hauteur (hauts ET bas alignés).
 * - la carte n'a PAS de padding : l'image touche les bords ; c'est le corps de
 *   carte (mst-card__body) qui porte la marge interne du texte (l'ombre impose
 *   que le texte ne soit pas collé aux bords). */
.mst-card {
  border-radius: var(--mst-radius-card);
  box-shadow: var(--mst-shadow-card);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow .2s ease;
}
.mst-card:hover { box-shadow: var(--mst-shadow-hover); }
/* Enfants de carte sans marge de flux (image à fleur, pas d'espace parasite). */
.mst-card > * { margin: 0; }
/* Corps de carte : marge interne du texte + occupe la hauteur restante. */
.mst-card__body {
  padding: var(--mst-space-card-padding);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1 1 auto;
}
/* Méta (date, auteur) poussée en bas → les bas de cartes s'alignent. */
.mst-card__meta { margin-top: auto; }

/* Bloc « À la une » (B6, grande une) : grande une CENTRÉE, cadrée à une largeur
 * modérée, image au-dessus + titre centré dessous, espacement resserré. On
 * neutralise la disposition côte-à-côte du socle (spécificité renforcée pour
 * battre le <style> inline du shortcode). */
.mst-une__heading { text-align: center; }
.mst-une--hero { max-width: 640px; margin-inline: auto; }
.mst-une--hero .mst-une__item { text-align: center; }
@media (min-width: 768px) {
  .mst-une__items.mst-une--hero .mst-une__item {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.75rem;
  }
}

/* Sections : rythme vertical */
.mst-section { padding-block: var(--mst-space-section); }

/* Boutons (mobilier non Elementor) */
.mst-button { border-radius: var(--mst-radius-button); }

/* Images de mobilier */
.mst-image { border-radius: var(--mst-radius-image); }

/* Filets de séparation */
.mst-divider { border: 0; border-top: var(--mst-border-divider); }

/* En-tête collant (si le gabarit header le pose) */
.mst-header--sticky { box-shadow: var(--mst-shadow-header); }

/* --- Encarts (mobilier uniquement ; les articles reçoivent une copie inline) --- */
.mst-encart {
  border-radius: var(--mst-radius-encart);
  padding: var(--mst-space-block) var(--mst-space-inline);
  margin: var(--mst-space-block) 0;
}
.mst-encart-essentiel  { background: var(--mst-encart-essentiel-bg);  border-left: var(--mst-border-encart-width) solid var(--mst-encart-essentiel-border); }
.mst-encart-disclaimer { background: var(--mst-encart-disclaimer-bg); border-left: var(--mst-border-encart-width) solid var(--mst-encart-disclaimer-border); }
.mst-encart-info       { background: var(--mst-encart-info-bg);       border-left: var(--mst-border-encart-width) solid var(--mst-encart-info-border); }
.mst-encart-conseil    { background: var(--mst-encart-conseil-bg);    border-left: var(--mst-border-encart-width) solid var(--mst-encart-conseil-border); }
.mst-encart-alerte     { background: var(--mst-encart-alerte-bg);     border-left: var(--mst-border-encart-width) solid var(--mst-encart-alerte-border); }
.mst-encart-citation   { background: var(--mst-encart-citation-bg);   border-left: var(--mst-border-encart-width) solid var(--mst-encart-citation-border); font-style: italic; }