/* =========================================================
   Cave & Cellier — sections basses de la fiche produit
   Relevé sur le clone Casemira (viewport 1440) :
   - en-tête de section : surtitre 13/500 capitales + titre 42/500
   - associés : grille 4 × 320, gouttière 20 (≠ celle du catalogue)
   - transformation : comparateur avant/après pleine largeur h597,
     pastilles « Avant » / « Après » 12/600 r40, poignée ronde 50px
   - communauté : rail horizontal gap 12 + flèches rondes 40px
   - en détail : onglets, intitulé 19/600 actif, panneau h416
   - FAQ : accordéon, question 17/600 sur 830px, réponse 15
   ========================================================= */

/* ---------- En-tête de section commun ---------- */

.bloc { padding-block: clamp(2.6rem, 1.8rem + 2.6vw, 4.2rem); }
.bloc--serre { padding-top: 0; }

.bloc__tete { margin-bottom: clamp(1.4rem, 1rem + 1.4vw, 2rem); }
.bloc__surtitre {
  margin: 0 0 .5rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris-service);
}
.bloc__titre {
  margin: 0;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.625rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.bloc__soustitre { margin: .6rem 0 0; font-size: .9375rem; color: var(--gris-service); max-width: 58ch; }

/* ---------- Produits associés : grille plus large que le catalogue ---------- */

.associes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (min-width: 700px)  { .associes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .associes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Comparateur avant / après ---------- */

.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 1408 / 597;
  min-height: 300px;
  overflow: hidden;
  border-radius: 12px;
  isolation: isolate;
  touch-action: none;
}
.compare__volet { position: absolute; inset: 0; display: grid; place-items: center; }
.compare__volet--avant { background: linear-gradient(150deg, #3b342c 0%, #241f1a 100%); }
/* Le volet « après » est rogné par une variable pilotée au pointeur */
.compare__volet--apres {
  background: linear-gradient(150deg, #1f2c26 0%, #14201b 100%);
  clip-path: inset(0 0 0 var(--coupe, 50%));
}
.compare__volet svg { width: 15%; height: 62%; opacity: .9; }
.compare__volet--apres svg { width: 17%; }
.compare__etiquette {
  position: absolute;
  top: 16px;
  padding: 4px 12px;
  border-radius: 40px;
  background: color-mix(in srgb, #14110f 62%, transparent);
  backdrop-filter: blur(6px);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--craie);
}
.compare__volet--avant .compare__etiquette { left: 16px; }
.compare__volet--apres .compare__etiquette { right: 16px; }
/* Trait de séparation et poignée alignés sur la même variable */
.compare__trait {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--coupe, 50%);
  width: 2px;
  margin-left: -1px;
  background: color-mix(in srgb, var(--craie) 88%, transparent);
  pointer-events: none;
}
.compare__poignee {
  position: absolute;
  top: 50%;
  left: var(--coupe, 50%);
  width: 50px; height: 50px;
  margin: -25px 0 0 -25px;
  border: 0;
  border-radius: 50%;
  background: var(--craie);
  color: var(--noir);
  display: grid;
  place-items: center;
  cursor: ew-resize;
  box-shadow: var(--ombre-m);
}
.compare__poignee svg { width: 20px; height: 20px; }
.compare__poignee:focus-visible { outline: 2px solid var(--laiton); outline-offset: 3px; }
.compare__legende { margin-top: .8rem; font-size: .8125rem; color: var(--gris-service); }

/* ---------- Communauté : rail horizontal et flèches rondes ---------- */

.comm__rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .3rem;
}
.comm__rail::-webkit-scrollbar { display: none; }
.comm__vue {
  position: relative;
  flex: none;
  width: 260px;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, #322c26, #1e1a17);
  display: grid;
  place-items: center;
  scroll-snap-align: start;
  text-decoration: none;
}
.comm__vue:nth-child(even) { background: linear-gradient(160deg, #2b2620, #191512); }
.comm__vue svg { width: 42%; height: 62%; }
.comm__tag {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--craie) 93%, transparent);
  color: var(--noir);
  font-size: .75rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity var(--transition), transform var(--transition);
}
.comm__vue:hover .comm__tag, .comm__vue:focus-visible .comm__tag { opacity: 1; transform: none; }
.comm__tag strong { display: block; font-weight: 600; }
.comm__tag span { color: var(--gris-service); }

.comm__nav { display: flex; gap: 7.5px; margin-top: 1.1rem; }
.comm__nav button {
  width: 40px; height: 40px;
  border: 1px solid var(--filet);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font: 700 1.25rem/1 var(--sans);
  color: var(--noir);
  transition: border-color var(--transition), background-color var(--transition);
}
.comm__nav button:hover { border-color: var(--noir); background: color-mix(in srgb, var(--noir) 5%, transparent); }

/* ---------- Onglets « la cave en détail » ---------- */

.onglets-detail { display: flex; gap: 16px; border-bottom: 1px solid var(--filet); }
.onglet-detail {
  padding: 0 0 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  cursor: pointer;
  font: 500 1.1875rem/1.3 var(--sans);
  color: var(--gris-service);
  transition: color var(--transition), border-color var(--transition);
}
.onglet-detail[aria-selected="true"] { font-weight: 600; color: var(--noir); border-bottom-color: var(--noir); }

.panneau-detail { padding-top: clamp(1.4rem, 1rem + 1.4vw, 2rem); }
.panneau-detail[hidden] { display: none; }
.panneau-detail__grille {
  display: grid;
  gap: clamp(1.4rem, 1rem + 2vw, 2.6rem);
  align-items: center;
}
@media (min-width: 900px) { .panneau-detail__grille { grid-template-columns: .9fr 1.1fr; } }
.panneau-detail__media {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, #322c26, #1e1a17);
  display: grid;
  place-items: center;
}
.panneau-detail__media svg { width: 26%; height: 68%; }
.panneau-detail h3 { font-size: 1.35rem; margin: 0 0 .7rem; }
.panneau-detail p { font-size: .9375rem; line-height: 1.65; color: var(--ardoise); max-width: 56ch; }
.panneau-detail ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.panneau-detail li {
  display: grid; grid-template-columns: 18px 1fr; gap: .6rem;
  font-size: .9375rem; color: var(--ardoise);
}
.panneau-detail li svg { width: 16px; height: 16px; color: var(--laiton-fonce); margin-top: .2rem; }

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

.faq { max-width: 830px; }
.faq details { border-bottom: 1px solid var(--filet); }
/* Grille et non flex : le texte nu du summary formait un élément flex
   anonyme insécable qui débordait de 4px. */
.faq summary {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.2rem;
  padding: 1.05rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 15px; height: 15px; flex: none; opacity: .5; transition: transform var(--transition); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq__corps { padding-bottom: 1.1rem; font-size: .9375rem; line-height: 1.65; color: var(--ardoise); }
.faq__corps p { margin: 0 0 .7rem; }
.faq__corps p:last-child { margin-bottom: 0; }
.faq__corps strong { font-weight: 700; }