/* ==========================================================================
   TRAME — base
   Reset minimal, typographie, conteneurs, utilitaires.
   Aucune valeur en dur : tout passe par les tokens.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden doit toujours gagner.
   -----------------------------------------------------------------------
   Le navigateur applique « [hidden] { display: none } » dans sa feuille par
   défaut — donc n'importe quelle règle d'auteur qui définit « display » la
   remplace. .trame-card déclarant « display: flex », poser hidden sur une
   carte ne la masquait pas : tous les filtres du site semblaient inertes
   alors que le JavaScript faisait correctement son travail.

   C'est le seul !important du projet, et il est justifié : cette déclaration
   restaure un comportement natif au lieu d'en imposer un nouveau. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--tr-surface-base);
  color: var(--tr-text-muted);
  font-family: var(--tr-font-body);
  font-size: var(--tr-text-base);
  line-height: var(--tr-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--tr-text);
  font-family: var(--tr-font-display);
  font-weight: 700;
  line-height: var(--tr-leading-tight);
  letter-spacing: var(--tr-tracking-tight);
}
h1 { font-size: var(--tr-h1); }
h2 { font-size: var(--tr-h2); }
h3 { font-size: var(--tr-h3); font-weight: 600; }
h4 { font-size: var(--tr-text-lg); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--tr-space-lg); }
p:last-child { margin-bottom: 0; }

a { color: var(--tr-primary); text-decoration: none; transition: color var(--tr-base) var(--tr-ease); }
a:hover { color: var(--tr-primary-hover); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Focus visible — obligatoire pour l'accessibilité clavier */
:focus-visible {
  outline: 2px solid var(--tr-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Lien d'évitement */
.trame-skip {
  position: absolute; left: -9999px;
  padding: var(--tr-space-md) var(--tr-space-lg);
  background: var(--tr-primary); color: #fff;
  border-radius: var(--tr-radius-lg); z-index: var(--tr-z-modal);
}
.trame-skip:focus { left: var(--tr-space-lg); top: var(--tr-space-lg); }

/* ---------- Conteneurs ---------- */
.trame-container {
  width: 100%;
  max-width: var(--tr-container);
  margin-inline: auto;
  padding-inline: var(--tr-gutter);
}
.trame-container--narrow { max-width: var(--tr-container-narrow); }

.trame-section { padding-block: var(--tr-section-y); }
.trame-section--alt { background: var(--tr-surface-section); }

/* ---------- Sur-titre ---------- */
.trame-eyebrow {
  display: flex; align-items: center; gap: var(--tr-space-md);
  margin: 0 0 var(--tr-space-lg);
  font-family: var(--tr-font-mono);
  font-size: var(--tr-text-xs);
  font-weight: 500;
  letter-spacing: var(--tr-tracking-wide);
  text-transform: uppercase;
  color: var(--tr-text-accent);
}
.trame-eyebrow__rule { display: block; width: 28px; height: 1px; background: currentColor; flex: none; }
.trame-eyebrow--center { justify-content: center; }

/* ---------- Utilitaires ---------- */
.trame-lead { font-size: var(--tr-text-lg); }
.trame-muted { color: var(--tr-text-muted); }
.trame-accent { color: var(--tr-text-accent); }
.trame-center { text-align: center; }
.trame-mono {
  font-family: var(--tr-font-mono);
  font-size: var(--tr-text-xs);
  letter-spacing: var(--tr-tracking-wide);
  text-transform: uppercase;
  color: var(--tr-text-muted);
}
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Grilles ---------- */
.trame-grid { display: grid; gap: var(--tr-space-2xl); }
.trame-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.trame-grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.trame-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }