/* ============================================================
   Base — reset, typographie de base, layout général.
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--blanc-casse);
  color: var(--graphite);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a  { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* --- Layout général : nav latérale + contenu --- */
.app  { display: flex; min-height: 100vh; }
.main { flex: 1; padding: 32px 40px; max-width: 920px; margin-inline: auto; }

/* --- En-tête de page --- */
.eyebrow { font-size: 12px; color: var(--gris-texte); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
h1 { font-family: var(--font-serif); font-size: 28px; font-weight: 400; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 10px; }
.intro { font-size: 15px; color: var(--gris-fonce); max-width: 480px; margin-bottom: 28px; }
.intro b { color: var(--graphite); font-weight: 500; }

/* --- Libellé de section + espacement inter-sections --- */
.label   { font-size: 12px; color: var(--gris-texte); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 12px; }
.section { margin-top: 28px; }

/* --- Carte générique --- */
.card { background: var(--blanc); border: var(--border); border-radius: var(--radius-lg); }

/* --- Lien « voir tout » --- */
.see-all { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--gris-fonce); border-bottom: 0.5px solid var(--gris-clair); padding-bottom: 2px; }
.see-all:hover { color: var(--graphite); }

/* --- Accessibilité : contenu réservé aux lecteurs d'écran --- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Responsive (desktop d'abord ; usage gérant majoritairement bureau) --- */
@media (max-width: 860px) {
  .app  { flex-direction: column; }
  .main { padding: 24px 20px; max-width: none; }
}