/* ====================================================
   PLANTIDICO — page-accueil.css (Lot 4 Étape C)
   Layout d'assemblage pour la page d'accueil. Pas de
   re-définition de composants existants : tous les
   composants ont leurs styles dans components.css.
   Ce fichier contient uniquement les containers de
   sections, le rythme inter-sections et le bloc final
   "À propos en bref" (composition CSS pure, unique à
   la home, pas catalogué — règle D7).
   ==================================================== */

body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  line-height: var(--leading-body-m);
}


/* ====================================================
   ACCUEIL — wrapper + container commun
   Mêmes tokens que .archive__container pour cohérence
   inter-templates Plantidico.
   ==================================================== */
.accueil {
  background: var(--linen);
}
.accueil__container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
@media (max-width: 768px) {
  .accueil__container {
    padding-inline: var(--container-padding-mobile);
  }
}


/* ====================================================
   SECTIONS — rythme inter-blocs cohérent
   Padding-block 88px desktop / 64px mobile.
   Hero accueil gère son propre padding (64+48 desktop).
   ==================================================== */
.accueil__section {
  padding-block: var(--space-44);
}
@media (max-width: 768px) {
  .accueil__section {
    padding-block: var(--space-32);
  }
}

.accueil__section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-24);
  max-width: 720px;
}
.accueil__section-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-16);
}


/* ====================================================
   BLOC "À PROPOS EN BREF" — composition unique home
   Pattern non catalogué : la page /a-propos/ aura sa
   propre structure (Lot 6). Layout centré 2 cols
   desktop (texte 1.2fr + CTA 1fr) ou 1 col mobile.
   Fond linen-warm pour différencier visuellement le
   bloc final, padding-block généreux.
   ==================================================== */
.about-brief {
  background: var(--linen-warm);
  padding-block: var(--space-48);
  border-top: 1px solid var(--line-strong);
}
.about-brief__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-32);
  align-items: center;
}
.about-brief__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.about-brief__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--terra-deep);
  font-weight: var(--weight-mono);
  line-height: 1;
}
.about-brief__eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--terra);
  border-radius: var(--radius-circle);
  flex-shrink: 0;
}
.about-brief__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-display-bold);
  color: var(--olive-deep);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  margin: 0;
  text-wrap: balance;
}
.about-brief__text {
  font-family: var(--font-body);
  font-size: var(--text-body-l);
  color: var(--ink-soft);
  line-height: var(--leading-body-l);
  margin: 0;
  max-width: 60ch;
}
.about-brief__cta {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 768px) {
  .about-brief {
    padding-block: var(--space-32);
  }
  .about-brief__inner {
    grid-template-columns: 1fr;
    padding-inline: var(--container-padding-mobile);
    gap: var(--space-16);
  }
  .about-brief__cta {
    justify-content: flex-start;
  }
}