/* Layout (charte « Seuil », §4) : conteneur, sections, piles, grilles, bandeau d'annonce, en-tête, navigation,
   menu mobile, fil d'Ariane, pied. Les espaces entre éléments frères viennent toujours du parent. */

/* ---------- Conteneur et sections ---------- */
.conteneur {
  width: 100%;
  max-width: calc(var(--conteneur-max) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.conteneur--etroit {
  max-width: calc(52rem + 2 * var(--gouttiere));
}

.section {
  padding-block: var(--section);
}
.section--serree {
  padding-block: var(--section-serree);
}
/* Deux sections de même ton qui se suivent : la seconde n'a pas de padding haut. Sans classe de ton, une section est plâtre. */
.section:is(.ton-platre, :not([class*="ton-"])) + .section:is(.ton-platre, :not([class*="ton-"])),
.section.ton-blanc + .section.ton-blanc,
.section.ton-lin + .section.ton-lin,
.section.ton-sapin + .section.ton-sapin {
  padding-top: 0;
}

/* Un en-tête de section est suivi de --e-7 (--e-8 au-delà de 1024 px) avant le contenu */
.entete-section + * {
  margin-block-start: var(--apres-entete);
}

/* ---------- Piles verticales : le parent pose l'écart ---------- */
.pile,
.pile--serree,
.pile--large {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--e-5);
}
.pile--serree {
  gap: var(--e-3);
}
.pile--large {
  gap: var(--e-7);
}
.rangee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
}

/* ---------- Grilles ---------- */
.grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7) var(--gap-grille);
}
@media (min-width: 48rem) {
  .grille--2,
  .grille--3,
  .grille--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Exactement trois éléments : trois colonnes dès la tablette (pas de troisième carte seule) */
  .grille--3:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Exactement cinq éléments : deux puis trois (sur six colonnes), plutôt que 3 + 2 ou 2 + 2 + 1 */
  .grille--3:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .grille--3:has(> :nth-child(5):last-child) > * {
    grid-column: span 2;
  }
  .grille--3:has(> :nth-child(5):last-child) > :nth-child(-n + 2) {
    grid-column: span 3;
  }
}
@media (min-width: 64rem) {
  .grille--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grille--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Pas de carte orpheline : une grille de trois qui porte exactement quatre éléments passe à quatre colonnes */
  .grille--3:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Cartes produit : 2 colonnes en mobile, 3 en tablette, 4 au bureau ; rangées espacées de --e-7 */
.grille--produits {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--e-4);
  row-gap: var(--e-7);
}
@media (min-width: 48rem) {
  .grille--produits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap-grille);
  }
}
@media (min-width: 64rem) {
  .grille--produits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Trois cartes seulement : trois colonnes plutôt qu'un quart de rangée vide */
  .grille--produits:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Rail : défilement horizontal aimanté en mobile, grille de quatre au bureau */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(13rem, 72%);
  gap: var(--gap-grille);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--e-2);
}
.rail::-webkit-scrollbar {
  display: none;
}
.rail__item {
  scroll-snap-align: start;
  min-width: 0;
}
/* Sous 64rem, le rail déborde jusqu'au bord de l'écran : la carte suivante dépasse, on voit qu'il défile */
@media (max-width: 63.99rem) {
  .rail {
    margin-inline: calc(-1 * var(--gouttiere));
    padding-inline: var(--gouttiere);
    scroll-padding-inline: var(--gouttiere);
  }
}
@media (min-width: 48rem) {
  .rail {
    grid-auto-columns: minmax(15rem, 40%);
  }
}
@media (min-width: 64rem) {
  .rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }
}

/* ---------- Bandeau d'annonce (fin, sapin) ---------- */
.annonce {
  font-size: var(--fs-petit);
  line-height: 1.45;
}
.annonce__in {
  padding-block: var(--e-2);
  text-align: center;
}
.annonce p {
  color: var(--texte-2);
}
.annonce a {
  color: var(--texte);
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- En-tête collant ---------- */
.entete-sentinelle {
  position: absolute;
  top: calc(var(--hauteur-entete) + var(--e-7));
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.entete {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background: var(--platre);
  color: var(--encre);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duree-etat) var(--courbe);
}
.entete.is-compact {
  border-bottom-color: var(--filet);
}
.entete__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--hauteur-entete);
}
.entete__menu {
  justify-self: start;
  margin-inline-start: calc(-1 * var(--e-3));
}
.entete__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--hauteur-compacte);
  text-decoration: none;
}
.entete__logo img {
  width: auto;
  height: 1.5rem;
}
.entete__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-1);
  margin-inline-end: calc(-1 * var(--e-3));
}

.bouton-icone {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--hauteur-compacte);
  height: var(--hauteur-compacte);
  padding: 0;
  border: 0;
  border-radius: var(--r-pilule);
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--duree-retour) var(--courbe);
}
.bouton-icone:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.entete__compteur {
  position: absolute;
  top: var(--e-1);
  right: 0;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: var(--e-1);
  display: grid;
  place-items: center;
  border-radius: var(--r-pilule);
  background: var(--sapin);
  color: var(--platre);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.entete__compteur.is-rebond {
  animation: rebond var(--duree-etat) var(--courbe);
}
@keyframes rebond {
  50% { transform: scale(1.25); }
}

/* Navigation de bureau (à partir de 1024 px) */
.nav {
  display: none;
}
@media (min-width: 64rem) {
  .entete__in {
    grid-template-columns: auto 1fr auto;
    gap: var(--e-6);
  }
  .entete__menu {
    display: none;
  }
  .nav {
    display: block;
  }
}
.nav__liste {
  display: flex;
  align-items: center;
  gap: var(--e-1);
}
.nav__item {
  position: relative;
}
.nav__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--hauteur-compacte);
  padding-inline: var(--e-3);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav__lien:hover,
.nav__lien[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}
.nav__lien[aria-current] {
  text-decoration-thickness: 2px;
}
.nav__panneau {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  width: 19rem;
  padding: var(--e-5);
  border-radius: var(--r-champ);
  background: var(--blanc);
  box-shadow: var(--ombre-flottante);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-1 * var(--e-1)));
  transition: opacity var(--duree-etat) var(--courbe), transform var(--duree-etat) var(--courbe), visibility 0s linear var(--duree-etat);
}
.nav__item--panneau:hover .nav__panneau,
.nav__item--panneau:focus-within .nav__panneau {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.nav__panneau-titre {
  color: var(--gris-pierre);
  font-size: var(--fs-petit);
  line-height: 1.5;
}
.nav__collections {
  display: flex;
  flex-direction: column;
}
.nav__collections a {
  display: block;
  padding-block: var(--e-2);
  text-decoration: none;
}
.nav__collections a:hover,
.nav__collections a[aria-current] {
  text-decoration: underline;
}
.nav__tout {
  font-size: var(--fs-petit);
}

/* ---------- Menu mobile (<dialog>) ---------- */
.menu-mobile {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(24rem, calc(100vw - var(--e-8)));
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--blanc);
  color: var(--encre);
  box-shadow: var(--ombre-flottante);
  transform: translateX(-100%);
  transition: transform var(--duree-etat) var(--courbe), overlay var(--duree-etat) allow-discrete, display var(--duree-etat) allow-discrete;
}
.menu-mobile[open] {
  transform: none;
}
@starting-style {
  .menu-mobile[open] {
    transform: translateX(-100%);
  }
}
.menu-mobile::backdrop {
  background: rgb(29 36 33 / 0.4);
}
.menu-mobile__panneau {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
  min-height: 100%;
  padding: var(--e-3) var(--e-5) var(--e-7);
  overflow-y: auto;
}
.menu-mobile__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-inline-end: calc(-1 * var(--e-3));
}
.menu-mobile__nav {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
}
.menu-mobile__gammes {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}
.menu-mobile__gamme {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.menu-mobile__lien {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  font-family: var(--police-titre);
  font-size: var(--fs-h3);
  line-height: 1.2;
  text-decoration: none;
}
.menu-mobile__collections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-4);
}
.menu-mobile__collections a,
.menu-mobile__services a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hauteur-compacte);
  color: var(--gris-pierre);
  text-decoration: none;
}
.menu-mobile__services {
  display: flex;
  flex-direction: column;
  padding-top: var(--e-5);
  border-top: 1px solid var(--filet);
}
.menu-mobile__services a {
  color: var(--encre);
  font-weight: 500;
}
.menu-mobile__contact {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: auto;
  font-size: var(--fs-petit);
}
.menu-mobile__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--hauteur-compacte);
  text-decoration: none;
}

/* ---------- Fil d'Ariane (sous l'en-tête) ---------- */
.fil-conteneur {
  padding-block: var(--e-4);
}

/* ---------- Pied (sapin profond) ---------- */
.pied {
  --fond: var(--sapin-profond);
  --surface: var(--sapin);
  padding-block: var(--section-serree) var(--e-6);
}
.pied__in {
  display: flex;
  flex-direction: column;
  gap: var(--e-8);
}
.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
}
@media (min-width: 64rem) {
  .pied__haut {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--e-9);
    align-items: start;
  }
}
.pied__marque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
}
.pied__marque img {
  width: auto;
  height: 1.875rem;
}
.pied__promesse {
  max-width: 30ch;
  font-family: var(--police-titre);
  font-size: var(--fs-h3);
  line-height: 1.25;
}
.pied__contact {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  color: var(--texte-2);
}
.pied__contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--hauteur-compacte);
  color: var(--texte);
  text-decoration: none;
}
.pied__contact a:hover {
  text-decoration: underline;
}
.pied__nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7) var(--gap-grille);
  padding-top: var(--e-7);
  border-top: 1px solid var(--trait);
}
@media (min-width: 48rem) {
  .pied__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.pied__colonne {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.pied__titre {
  font-family: var(--police-texte);
  font-size: var(--fs-petit);
  font-weight: 600;
  line-height: 1.4;
  color: var(--texte-2);
}
.pied__liste {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.pied__liste a {
  display: inline-block;
  padding-block: var(--e-1);
  text-decoration: none;
}
.pied__liste a:hover {
  text-decoration: underline;
}
.pied__collections {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-3);
  padding-bottom: var(--e-2);
  font-size: var(--fs-petit);
}
.pied__collections a {
  color: var(--texte-2);
}
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3) var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid var(--trait);
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.pied__paiement {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}