/* ==========================================================================
   Afoodi — pages d'index de rubrique (/guides, /glossaire)
   Une grille de cartes, rien de plus : ces pages sont un carrefour, pas une
   destination. Leur rôle est d'envoyer vite vers la bonne fiche.
   ========================================================================== */

.has-gsap [data-reveal] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .has-gsap [data-reveal] { opacity: 1 !important; transform: none !important; }
}

.top {
  background:
    radial-gradient(1100px 620px at 50% -8%, oklch(0.33 0.05 163 / .85), transparent 60%),
    linear-gradient(175deg, var(--green-dark), var(--green-ink) 70%);
}
.hero { padding: clamp(44px, 6vw, 84px) 0 clamp(44px, 5.5vw, 80px); max-width: 900px; }
.hero h1 {
  font-size: clamp(38px, 5.6vw, 78px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .98;
  margin-top: 18px;
  text-wrap: balance;
}
.hero__lead {
  font-size: clamp(16.5px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--cream-dim);
  margin-top: clamp(20px, 2.4vw, 30px);
  max-width: 62ch;
  text-wrap: pretty;
}

.light { background: var(--cream); color: var(--green-ink); position: relative; z-index: 2; }
.liste {
  border-radius: 34px 34px 0 0;
  margin-top: -22px;
  padding: clamp(48px, 6vw, 90px) 0 clamp(56px, 7vw, 104px);
}

.fiches {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.fiche a {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 12px;
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--cream-pure);
  border: 1px solid var(--ink-line);
  border-radius: 20px;
  color: var(--green-ink);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.fiche a:hover {
  border-color: var(--orange);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px oklch(0.30 0.045 165 / .5);
  color: var(--green-ink);
}
.fiche__t { font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }
.fiche__d { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); flex: 1; text-wrap: pretty; }
.fiche__go { font-size: 13px; font-weight: 800; color: var(--orange); }

/* Douzième case de la grille. Les onze fiches laissent un creux au bout de la
   dernière rangée — sur trois colonnes comme sur deux : une photo d'ambiance
   le comble et aère une liste qui n'est sinon qu'une suite de cartes de texte.
   Sur une colonne, elle devient une bande à part entière, d'où l'aspect-ratio
   qui prend le relais quand la rangée n'a plus de hauteur à imposer. */
.fiche--photo {
  display: grid;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--ink-line);
  border-radius: 20px;
  overflow: hidden;
}
.fiche--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 980px) { .fiches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fiches { grid-template-columns: 1fr; } }