/* Accueil (gabarit « Seuil », docs/DESIGN.md §7) : héros et nuancier, deux gammes, sélection, coffret (sapin),
   pourquoi le SPC, calculateur, conseils, FAQ. Espaces : jetons seulement, posés par les parents. */

/* ---------- Héros ---------- */
.section.accueil-hero {
  padding-top: var(--e-6);
}
.accueil-hero__in {
  display: flex;
  flex-direction: column;
  gap: var(--e-8);
}
.accueil-hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
}
.accueil-hero__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
}
.accueil-hero__chapo {
  max-width: 40ch;
  color: var(--texte-2);
  font-size: var(--fs-chapo);
  line-height: 1.55;
}
.accueil-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  width: 100%;
  padding-top: var(--e-2);
}
.hero__preuve {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.hero__preuve-forte {
  color: var(--texte);
  font-weight: 600;
}
@media (min-width: 30rem) {
  .accueil-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
  }
}
@media (min-width: 64rem) {
  .section.accueil-hero {
    padding-top: var(--e-8);
  }
  .accueil-hero__grille {
    grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
    align-items: center;
    gap: var(--e-8);
  }
  .accueil-hero .titre-affiche {
    font-size: min(var(--fs-affiche), 4vw);
  }
}

/* Une seule séquence d'entrée sur tout le site : le titre, puis la photo (600 ms) */
@media (prefers-reduced-motion: no-preference) {
  .accueil-hero .hero__titre,
  .accueil-hero .nuancier__scene {
    animation: accueil-entree var(--duree-entree) var(--courbe) both;
  }
  .accueil-hero .nuancier__scene {
    animation-delay: 120ms;
  }
}
@keyframes accueil-entree {
  from {
    opacity: 0;
    transform: translateY(var(--e-3));
  }
}

/* ---------- Nuancier : la rangée des décors pilote la grande photo ---------- */
.nuancier {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.nuancier__scene {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--lin);
  overflow: hidden;
}
.nuancier__vue {
  position: absolute;
  inset: 0;
  transition: opacity var(--duree-etat) var(--courbe);
}
.nuancier__vue picture,
.nuancier__vue img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nuancier__vue.is-entrante {
  z-index: 1;
  opacity: 0;
}
.nuancier__vue.is-entrante.is-active {
  opacity: 1;
}
.nuancier__bas {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.nuancier__liste {
  display: flex;
  gap: var(--e-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: var(--e-2);
  margin-inline: calc(-1 * var(--e-2));
}
.nuancier__liste::-webkit-scrollbar {
  display: none;
}
.nuancier__liste > li {
  position: relative;
  flex: none;
  scroll-snap-align: start;
}
.nuancier__choix .matiere__carre {
  width: var(--e-8);
}
.nuancier__choix .matiere__nom {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nuancier__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-4);
}
.nuancier__nom {
  font-family: var(--police-titre);
  font-size: var(--fs-carte);
  line-height: 1.3;
}
.nuancier__variante {
  color: var(--texte-2);
}
.nuancier__prix {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.nuancier__lien {
  min-height: auto;
}
@media (min-width: 64rem) {
  .nuancier__lien {
    margin-inline-start: auto;
  }
}
@media (min-width: 80rem) {
  .nuancier__choix .matiere__carre {
    width: calc(var(--e-9) * 0.75);
  }
}

/* ---------- Sélection : quatre cartes, donc deux colonnes en tablette plutôt que trois et une orpheline ---------- */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .accueil-selection .grille--produits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Deux gammes, et la gamme à venir ---------- */
.accueil-gammes__corps {
  display: flex;
  flex-direction: column;
  gap: var(--e-8);
}
.accueil-gammes__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7) var(--gap-grille);
}
@media (min-width: 48rem) {
  .accueil-gammes__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.accueil-bientot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
}
.accueil-bientot__texte {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.accueil-bientot__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
}
.accueil-bientot__titre a {
  text-decoration: none;
}
.accueil-bientot__titre a:hover {
  text-decoration: underline;
}
.accueil-bientot__accroche {
  max-width: 52ch;
  color: var(--texte-2);
}
@media (min-width: 64rem) {
  .accueil-bientot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--e-8);
  }
}

/* ---------- Coffret d'échantillons (sapin) ---------- */
.accueil-coffret__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
}
.accueil-coffret__media {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.accueil-coffret__media picture,
.accueil-coffret__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--sapin-profond);
}
.accueil-coffret__legende {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.accueil-coffret__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
}
.accueil-coffret__chapo {
  max-width: 44ch;
  color: var(--texte-2);
  font-size: var(--fs-chapo);
  line-height: 1.55;
}
.accueil-coffret__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-3);
}
.accueil-coffret__montant {
  font-family: var(--police-titre);
  font-size: var(--fs-h1);
  line-height: 1;
}
.accueil-coffret__mention,
.accueil-coffret__bon {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.accueil-coffret__bon {
  max-width: 48ch;
}
.accueil-coffret__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-5);
  padding-top: var(--e-2);
}
@media (min-width: 64rem) {
  .accueil-coffret__grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--e-9);
  }
}

/* ---------- Pourquoi le SPC ---------- */
.accueil-pourquoi__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
}
.accueil-pourquoi__liste {
  display: flex;
  flex-direction: column;
}
.accueil-pourquoi__item {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-block: var(--e-5);
  border-top: 1px solid var(--trait);
}
.accueil-pourquoi__item:last-child {
  border-bottom: 1px solid var(--trait);
}
.accueil-pourquoi__argument {
  max-width: 52ch;
  color: var(--texte-2);
}
.accueil-pourquoi__media picture,
.accueil-pourquoi__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--lin);
}
@media (min-width: 64rem) {
  .accueil-pourquoi__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--e-9);
  }
}

/* ---------- Calculateur ---------- */
.accueil-calcul__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
}
.accueil-calcul__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
}
@media (min-width: 64rem) {
  .accueil-calcul__grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: var(--e-9);
  }
}

/* ---------- FAQ courte ---------- */
.accueil-faq__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 64rem) {
  .accueil-faq__grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: var(--e-9);
  }
  .accueil-faq__grille > .faq {
    margin-block-start: 0;
  }
}