/*
 * Mise en page propre à la vitrine (le design system ne fournit ni hero, ni grille de cartes,
 * ni conteneur de page). Tokens --cf-* uniquement : aucune couleur, police ni rayon en dur.
 * Chargé après design-system/css/codeflow.css. Pas de préfixe cf- (réservé au design system).
 */

:root {
  --site-max-width: calc(var(--cf-space-16) * 16);
  --site-gutter: clamp(var(--cf-space-4), 5vw, var(--cf-space-8));
}

html { scroll-behavior: smooth; }

/* Site public : texte courant à 16 px (le design system vise des interfaces à 14 px). */
body { font-size: var(--cf-font-size-lg); }

/* Conteneur centré */
.site-header,
.site-section,
.site-footer {
  max-width: var(--site-max-width);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

/* En-tête */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cf-space-4);
  padding-block: var(--cf-space-4);
}
.site-brand { display: flex; }
.site-brand img { height: var(--cf-space-10); width: auto; }
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cf-space-2);
}

/* Sections */
.site-section {
  padding-block: var(--cf-space-12);
  border-top: 1px solid var(--cf-border);
}
.site-section > h2 {
  margin-bottom: var(--cf-space-6);
  font-size: var(--cf-font-size-2xl);
}
.site-lead {
  max-width: 65ch;
  font-size: var(--cf-font-size-xl);
}
h2 + .site-lead {
  margin-top: calc(var(--cf-space-3) * -1);
  margin-bottom: var(--cf-space-6);
  font-size: var(--cf-font-size-lg);
}
.site-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cf-space-3);
}

/* Hero (la première section n'a pas de filet : elle suit l'en-tête) */
.site-hero {
  padding-block: var(--cf-space-16);
  border-top: 0;
}
.site-hero h1 {
  margin-bottom: var(--cf-space-5);
  font-size: clamp(var(--cf-font-size-2xl), 5vw, var(--cf-font-size-3xl));
  line-height: var(--cf-font-line-height-tight);
}
.site-hero .site-lead { margin-bottom: var(--cf-space-8); }

/* Grille de cartes */
.site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--cf-space-16) * 4)), 1fr));
  gap: var(--cf-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Contact */
.site-contact { text-align: center; }
.site-contact h2 { margin-bottom: var(--cf-space-3); }
.site-contact .site-actions {
  justify-content: center;
  margin-top: var(--cf-space-6);
}
.site-meta {
  margin-top: var(--cf-space-8);
  font-size: var(--cf-font-size-sm);
}

/* Pied de page */
.site-footer {
  padding-block: var(--cf-space-6);
  border-top: 1px solid var(--cf-border);
  text-align: center;
  font-size: var(--cf-font-size-sm);
}