/**
 * ILIA CMS — Composants CSS partagés (Design System)
 * Réf. docs/THEME_DESIGN_SYSTEM.md, sections 5, 6, 7.
 *
 * Règle absolue de ce fichier : il ne référence QUE des tokens
 * (tokens.css) — jamais une couleur, un rayon ou une taille en dur.
 * C'est ce qui permet à ce fichier d'être VOLONTAIREMENT IDENTIQUE
 * entre themes/default/ et themes/modern/ : toute différence visuelle
 * vient uniquement des valeurs de tokens, jamais de règles différentes
 * ici. Si vous devez écrire une valeur différente entre les deux
 * thèmes dans ce fichier, c'est le signe qu'il manque un token —
 * ajoutez-le dans tokens.css plutôt que de casser ce contrat.
 *
 * Utilisable par : la coquille du thème (header/footer) ET par
 * n'importe quel fichier de bloc (themes/_blocks/{nom}.php,
 * modules/{module}/blocks/{nom}.php) présent ou futur — c'est
 * l'objectif de durabilité à 2 ans du design system.
 *
 * Responsive First (section 6) et Accessibilité (section 7) sont
 * appliqués directement dans chaque composant ci-dessous, pas ajoutés
 * en fin de fichier.
 *
 * ══════════════════════════════════════════════════════════════════
 * ATTENTION — bug trouvé le 11/07/2026, réel depuis la création de ce
 * fichier (Phase A, 04/07/2026), jamais détecté avant aujourd'hui :
 * un ancien commentaire ici contenait un chemin de fichier écrit avec
 * un astérisque générique suivi d'un point (comme dans "dossier",
 * puis astérisque, puis point, puis "php"). Cette suite de caractères
 * forme malencontreusement la combinaison qui referme un commentaire
 * CSS de façon prématurée — les commentaires CSS ne s'imbriquent
 * JAMAIS. Cela avait silencieusement transformé la règle du bouton
 * ci-dessous en un sélecteur imposant un ancêtre imaginaire, qui ne
 * correspondait à aucun élément réel de la page. D'où des boutons
 * "plats", jamais stylés, malgré une classe CSS pourtant correcte.
 * NE PLUS JAMAIS écrire, dans un commentaire CSS de ce projet, une
 * notation de chemin utilisant un astérisque suivi directement d'un
 * point — préférer une notation avec des accolades comme "{nom}.php"
 * (voir ci-dessus).
 * ══════════════════════════════════════════════════════════════════
 */

/* ── Bouton ───────────────────────────────────────────────────────── */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;              /* taille tactile minimale — Accessibilité */
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn--primary{ background: var(--color-primary); color: #fff }
.btn--primary:hover{ opacity: .88 }
.btn--outline{ background: transparent; border-color: var(--border); color: var(--text) }
.btn--outline:hover{ border-color: var(--color-primary); color: var(--color-primary) }

/* ── Section (espacement interne d'un bloc riche) ────────────────────
   .block gère l'espacement ENTRE blocs (blocks.css) ; .section gère
   l'espacement INTERNE d'un bloc qui en a besoin. */
.section{ padding: var(--space-lg) 0 }
@media (max-width: 600px){ .section{ padding: var(--space-md) 0 } }

.section-eyebrow{
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-xs);
}
.section-title{
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-secondary);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 var(--space-xs);
}
.section-subtitle{
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0;
}
@media (max-width: 600px){
  .section-title{ font-size: var(--text-xl) }
}

/* ── Carte ────────────────────────────────────────────────────────── */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
  min-width: 0;                  /* empêche une carte de forcer l'élargissement d'une grille */
}

/* ── Grille — Responsive First : mobile 1 colonne par défaut ────────
   Un bloc déclare sa cible desktop via --cols-desktop (1 à 4) sur son
   propre wrapper ; .grid gère la progression mobile → tablette →
   desktop de façon identique pour toute famille "Grille". */
.grid{
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), 1fr);
  gap: var(--space-sm);
  width: 100%;
  overflow: hidden;
}
@media (min-width: 600px){
  .grid{ --cols: min(var(--cols-desktop, 2), 2) }
}
@media (min-width: 960px){
  .grid{ --cols: var(--cols-desktop, 3) }
}

/* ── Avatar / étoiles (Témoignages, Équipe — famille Vitrine sociale) */
.avatar{
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-alt);
}
.stars{ color: #F59E0B; font-size: var(--text-sm); letter-spacing: 1px }

/* ── Badge ────────────────────────────────────────────────────────── */
.badge{
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-muted);
}

/* ── Alerte ───────────────────────────────────────────────────────── */
.alert{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  font-size: var(--text-sm);
  color: var(--text);
}
.alert--success{ border-color: var(--success); color: var(--success) }
.alert--error{ border-color: var(--error); color: var(--error) }
.alert--warning{ border-color: var(--warning); color: var(--warning) }

/* ── Tableau ──────────────────────────────────────────────────────── */
.table{ width: 100%; border-collapse: collapse; font-size: var(--text-sm) }
.table td, .table th{
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  color: var(--text);
}
.table tr:last-child td{ border-bottom: none }

/* ── État vide ────────────────────────────────────────────────────── */
.empty-state{ color: var(--text-muted); font-size: var(--text-sm); font-style: italic }

/* ── Pagination ───────────────────────────────────────────────────── */
.pagination{ display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: var(--space-md) }
.pagination a, .pagination span{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: var(--text-sm);
}
.pagination a:hover{ border-color: var(--color-primary); color: var(--color-primary) }
.pagination [aria-current="page"]{
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ── Media (famille Media : vidéo, iframe, carte, PDF, YouTube...) ──
   Le thème fournit uniquement le cadre — jamais le contenu, qui reste
   opaque (contrat identique à l'ADR-0016 pour les blocs). */
.media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
}
.media img, .media iframe, .media video{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* ── Liste (Timeline, étapes, listes en ligne plutôt qu'en grille) ── */
.list > *{ padding: var(--space-sm) 0; border-bottom: 1px solid var(--border) }
.list > *:last-child{ border-bottom: none }

/* ── Formulaire (générique — premier vrai besoin : page Contact) ──── */
.form-field{ margin-bottom: var(--space-sm) }
.form-label{
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: 4px;
}
.form-control{
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-base);
  box-sizing: border-box;
}
textarea.form-control{ min-height: 140px; resize: vertical }
.form-honeypot{ position: absolute; left: -9999px }

/* ── Accessibilité transversale ──────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.btn:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}