/* =========================================================
   Cave & Cellier — composants d'ossature
   Reprend l'enchaînement de sections d'une home e-commerce
   de ce type : en-tête à logo centré, héros à sélecteur,
   rails produits, grille par pièce, éditorial, FAQ.
   ========================================================= */

/* ---------- En-tête : logo centré, nav en dessous ---------- */

.entete--centre .entete__grille {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  min-height: 88px;
}
.entete--centre .marque {
  grid-column: 2;
  justify-self: center;
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.85rem);
  letter-spacing: .02em;
}
.entete--centre .entete__actions { grid-column: 3; justify-self: end; }

/* Champ de recherche en pilule, calé à gauche */
.recherche {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: .6rem;
  width: min(300px, 100%);
  padding: .62rem 1rem;
  background: color-mix(in srgb, var(--noir) 6%, transparent);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: border-color var(--transition), background-color var(--transition);
}
.recherche:focus-within {
  border-color: color-mix(in srgb, var(--laiton) 55%, transparent);
  background: var(--craie);
}
.recherche input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: 400 .9rem/1 var(--sans);
  color: var(--noir);
}
.recherche input:focus { outline: none; }
.recherche input::placeholder { color: var(--pierre); }
.recherche svg { width: 18px; height: 18px; color: var(--pierre); flex: none; }
@media (max-width: 900px) { .recherche { display: none; } }

/* Rangée de navigation sous le logo */
.nav-principale {
  border-top: 1px solid color-mix(in srgb, var(--noir) 8%, transparent);
}
.nav-principale__liste {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .2rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: .1rem 0;
}
.nav-principale a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .85rem .2rem;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
}
.nav-principale a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .55rem;
  height: 1.5px;
  background: var(--laiton);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition);
}
.nav-principale a:hover::after,
.nav-principale a[aria-current="page"]::after { transform: scaleX(1); }
.nav-principale .chevron { width: 13px; height: 13px; opacity: .55; }
@media (max-width: 760px) { .nav-principale a { font-size: .78rem; letter-spacing: .05em; } }

/* ---------- Héros à sélecteur de contexte ---------- */

.heros-plein {
  position: relative;
  isolation: isolate;
  min-height: clamp(600px, 88dvh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--craie);
  overflow: hidden;
}
/* Décor de fond : pièce sombre éclairée par la cave, pas une photo au hasard */
.heros-plein__decor {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(58% 46% at 70% 40%, rgba(198, 154, 90, .34), transparent 66%),
    radial-gradient(90% 70% at 20% 90%, rgba(58, 53, 49, .9), transparent 70%),
    linear-gradient(165deg, #2a2622 0%, #1d1a17 46%, #131110 100%);
}
.heros-plein::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(19, 17, 16, .92) 0%, rgba(19, 17, 16, .45) 38%, rgba(19, 17, 16, .1) 70%);
}
/* La largeur de lecture se pose sur les enfants : le bloc, lui, reste
   dans l'enveloppe et donc calé à gauche. */
.heros-plein__texte { padding-block: clamp(5rem, 3rem + 7vw, 8.5rem) 2rem; }
.heros-plein__texte h1 { max-width: 15ch; }
.heros-plein__texte .surtitre { max-width: 46ch; }
.heros-plein h1 { color: var(--craie); }
.heros-plein h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--laiton-cl);
  font-variation-settings: "WONK" 1;
}
.heros-plein__texte .plomb { color: var(--parchemin); margin-top: 1.3rem; }

/* Bande de sélection en bas de héros */
.selecteur {
  padding-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}
.selecteur__haut {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.selecteur__titre {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--craie);
  margin: 0;
}
.selecteur__piste {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  padding-bottom: .4rem;
  scrollbar-width: thin;
}
.vignette {
  position: relative;
  flex: 0 0 auto;
  width: 104px;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-s);
  border: 2px solid transparent;
  background: #241f1a;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: border-color var(--transition), transform var(--transition);
}
.vignette svg { width: 100%; height: 100%; display: block; }
.vignette__nom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .3rem .4rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--craie);
  background: linear-gradient(to top, rgba(19,17,16,.88), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.vignette:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--laiton) 60%, transparent); }
.vignette[aria-pressed="true"] { border-color: var(--craie); }
.vignette[aria-pressed="true"] .vignette__nom,
.vignette:hover .vignette__nom { opacity: 1; }

/* ---------- Rail produits ---------- */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 1.1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x proximity;
}
.rail > * { scroll-snap-align: start; }
@media (min-width: 1100px) { .rail { grid-auto-columns: minmax(0, 1fr); overflow: visible; } }

.produit {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: var(--r-m);
  overflow: hidden;
  background: transparent;
}
.produit__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-m);
  overflow: hidden;
  background: linear-gradient(160deg, #322c26 0%, #1e1a17 100%);
}
.produit__media svg { width: 100%; height: 100%; }
.produit__etiquette {
  position: absolute;
  top: .7rem; left: .7rem;
  padding: .22rem .55rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--noir);
  background: var(--laiton-cl);
  border-radius: var(--r-xs);
}
.produit__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: .9rem;
}
.produit__nom {
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 .25rem;
}
.produit__spec {
  font-size: .84rem;
  color: var(--pierre);
  margin: 0 0 .7rem;
  font-variant-numeric: tabular-nums;
}
/* Le prix est épinglé en bas : la ligne reste droite quels que soient les noms */
.produit__pied {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.produit__prix { font-weight: 600; font-variant-numeric: tabular-nums; }
.produit__mensualite { font-size: .8rem; color: var(--pierre); }
.produit:hover .produit__media { box-shadow: var(--ombre-l); }
.produit:hover .produit__nom { color: var(--laiton-fonce); }
.produit__media, .produit__nom { transition: box-shadow var(--transition), color var(--transition); }

/* ---------- Aide au choix, trois étapes ---------- */

.etapes {
  display: grid;
  gap: 1.2rem;
  counter-reset: etape;
}
@media (min-width: 780px) { .etapes { grid-template-columns: repeat(3, 1fr); } }
.etape {
  padding: 1.6rem 1.5rem 1.7rem;
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--parchemin) 60%, transparent);
  border-top: 2px solid var(--laiton);
}
.etape::before {
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--laiton);
  margin-bottom: .6rem;
}
.etape h3 { margin-bottom: .4rem; }
.etape p { font-size: .92rem; color: var(--ardoise); }

/* ---------- Grille par pièce ---------- */

.pieces {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .pieces { grid-template-columns: repeat(4, 1fr); } }
.piece {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 210px;
  padding: 1.2rem;
  border-radius: var(--r-m);
  text-decoration: none;
  overflow: hidden;
  background: linear-gradient(165deg, #37312b, #1f1b18);
  color: var(--craie);
  transition: transform var(--transition);
}
.piece:hover { transform: translateY(-3px); }
.piece:hover .piece__lueur { opacity: .9; }
.piece__lueur {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 60% 25%, rgba(198,154,90,.32), transparent 65%);
  opacity: .55;
  transition: opacity var(--transition);
}
.piece__nom {
  position: relative;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
}

/* ---------- Bande avis ---------- */

.avis {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .avis { grid-template-columns: repeat(3, 1fr); } }
.avis__carte {
  padding: 1.6rem;
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--parchemin) 55%, transparent);
}
.avis__note { display: flex; gap: .15rem; margin-bottom: .8rem; color: var(--laiton); }
.avis__note svg { width: 15px; height: 15px; }
.avis__texte { font-size: .95rem; color: var(--ardoise); }
.avis__auteur { margin-top: 1rem; font-size: .84rem; color: var(--pierre); }

/* ---------- FAQ ---------- */

.faq { max-width: 74ch; }
.faq details {
  border-bottom: 1px solid color-mix(in srgb, var(--noir) 12%, transparent);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--laiton);
  border-bottom: 1.5px solid var(--laiton);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq details > p {
  padding-bottom: 1.3rem;
  font-size: .95rem;
  color: var(--ardoise);
  max-width: 62ch;
}