/* =========================================================
   Cave & Cellier — sections propres à la page d'accueil

   Cette feuille se charge APRÈS coherence.css et ne redéfinit
   aucun jeton, aucun bouton, aucun en-tête ni pied de page :
   tout cela vient de la chaîne commune, exactement comme sur
   produit.html et collection.html.

   Règles du système reprises telles quelles :
   - une seule police, Manrope, graisses 400 / 500 / 600
   - titres de section 36 → 64 px, graisse 500, interlettre -.055em
   - surtitres 9 px / 600 / .18em en capitales, gris de service
   - rayons : carte 26 px, visuel 24 px, bouton 6 px (--r-s)
   - les seules surfaces sombres sont les visuels, le bandeau et
     le pied de page. Tout le reste est blanc, séparé par --filet.
   ========================================================= */

/* ---------- Rythme vertical ----------
   coherence.css resserre .bloc à 20/16 px, calibré pour l'empilement
   dense d'une fiche produit. Une page d'accueil respire davantage :
   même échelle, plus d'air. */

.bloc--air { padding-block: 92px; }
main > .bloc--air:first-of-type { padding-top: 72px; }
main > .bloc--air:last-of-type { padding-bottom: 92px; }
@media (max-width: 800px) { .bloc--air { padding-block: 62px; } }

/* ---------- Hero ----------
   Même construction que .banniere du catalogue : média en fond,
   voile de lisibilité, contenu calé en bas. Seule la hauteur change. */

.hero-accueil {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 640px;
  overflow: hidden;
  color: var(--craie);
}
.hero-accueil__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/hero-mineral-warm.png") center / cover no-repeat;
}
.hero-accueil__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(18, 16, 14, .82) 0%, rgba(18, 16, 14, .46) 54%, rgba(18, 16, 14, .12) 100%),
    radial-gradient(130% 150% at 86% 6%, rgba(198, 162, 104, .2), transparent 60%);
}
.hero-accueil__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 640px;
  padding-block: 76px;
}
.hero-accueil .bloc__surtitre { color: color-mix(in srgb, var(--laiton) 92%, #fff); }
.hero-accueil h1 {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.055em;
  color: var(--craie);
}
.hero-accueil__lead {
  margin: 1.1rem 0 0;
  max-width: 52ch;
  font-size: .9375rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--craie) 82%, transparent);
}
.hero-accueil__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }
.hero-accueil .bouton--plein { background: var(--craie); color: var(--noir); }
.hero-accueil .bouton--plein:hover { background: #fff; }
.hero-accueil .bouton--contour {
  border-color: color-mix(in srgb, var(--craie) 38%, transparent);
  color: var(--craie);
}
.hero-accueil .bouton--contour:hover {
  border-color: var(--craie);
  background: color-mix(in srgb, var(--craie) 12%, transparent);
}
@media (max-width: 800px) {
  .hero-accueil, .hero-accueil__inner { min-height: 540px; }
  .hero-accueil__inner { padding-block: 52px; }
  .hero-accueil__media { background-position: 68% center; }
}

/* ---------- Bande de réassurance ----------
   .reassurance vient de catalogue.css. On ne fait que l'encadrer. */

.bande-reassurance {
  padding-block: 26px;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}

/* ---------- Deux usages ----------
   Une carte, deux tailles de visuel : même rayon 26/24 que .carte. */

.acc-usages { display: grid; gap: 14px; }
@media (min-width: 900px) { .acc-usages { grid-template-columns: 1.15fr .85fr; } }

.acc-usage {
  position: relative;
  display: block;
  padding: 6px;
  border-radius: 26px;
  text-decoration: none;
  color: inherit;
}
.acc-usage__media {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  border-radius: 24px;
  background: #0c0f0d;
}
.acc-usage__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--transition);
}
.acc-usage:hover .acc-usage__media img { transform: scale(1.035); }
.acc-usage__media:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 12, 10, .88), rgba(10, 12, 10, .12) 58%, transparent 78%);
}
.acc-usage__copie {
  position: absolute;
  z-index: 2;
  left: 30px; right: 30px; bottom: 28px;
  color: var(--craie);
}
.acc-usage__copie .bloc__surtitre { color: color-mix(in srgb, var(--laiton) 92%, #fff); }
.acc-usage__copie h3 {
  margin: 0 0 .5rem;
  font-size: clamp(24px, 1.4rem + 1.1vw, 32px);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--craie);
}
.acc-usage__copie p {
  margin: 0;
  max-width: 44ch;
  font-size: .875rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--craie) 78%, transparent);
}
.acc-usage__fleche {
  position: absolute;
  z-index: 3;
  top: 26px; right: 26px;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--craie);
  color: var(--noir);
  transition: transform var(--transition);
}
.acc-usage__fleche svg { width: 18px; height: 18px; }
.acc-usage:hover .acc-usage__fleche { transform: translate(3px, -3px); }
@media (max-width: 900px) { .acc-usage__media { min-height: 380px; } }

/* ---------- Diagnostic en trois questions ---------- */

.acc-diagnostic { display: grid; gap: clamp(1.6rem, 1rem + 2.6vw, 3.4rem); align-items: center; }
@media (min-width: 1000px) { .acc-diagnostic { grid-template-columns: .82fr 1.18fr; } }

.acc-diagnostic__panneau {
  padding: 34px;
  border: 1px solid var(--filet);
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--ombre-m);
}
.acc-diagnostic__entete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--filet);
}
.acc-diagnostic__entete b { font-size: .9375rem; font-weight: 600; }
.acc-diagnostic__etape { font-size: .8125rem; color: var(--gris-service); font-variant-numeric: tabular-nums; }
.acc-diagnostic__question {
  margin: 24px 0 16px;
  font-size: 1.3125rem;
  font-weight: 500;
  letter-spacing: -.02em;
}
.acc-diagnostic__choix { display: grid; gap: 10px; }
@media (min-width: 560px) { .acc-diagnostic__choix { grid-template-columns: 1fr 1fr; } }

.acc-choix {
  display: grid;
  gap: .25rem;
  padding: 18px;
  border: 1px solid var(--filet);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
}
.acc-choix:hover { border-color: color-mix(in srgb, var(--noir) 30%, transparent); transform: translateY(-2px); }
.acc-choix[aria-pressed="true"] { border-color: var(--noir); background: color-mix(in srgb, var(--noir) 4%, transparent); }
.acc-choix b { font-size: .9375rem; font-weight: 600; }
.acc-choix span { font-size: .8125rem; line-height: 1.5; color: var(--gris-service); }

/* ---------- Comparatif ---------- */

.acc-comparatif { display: grid; gap: 14px; align-items: stretch; }
@media (min-width: 900px) { .acc-comparatif { grid-template-columns: 1fr 1fr; } }

.acc-comparatif__media {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  border-radius: 26px;
  background: #0c0f0d;
}
.acc-comparatif__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acc-comparatif__carte {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(28px, 1.6rem + 2vw, 46px);
  border: 1px solid var(--filet);
  border-radius: 26px;
}
.acc-comparatif__carte p {
  margin: .9rem 0 0;
  max-width: 46ch;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--gris-service);
}
.acc-mesures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acc-mesure { padding: 18px; border: 1px solid var(--filet); border-radius: 14px; }
/* Même traitement que .reassurance__icone : 20 px, laiton foncé, au-dessus
   de l'unité. L'icône est décorative, l'information reste dans le texte. */
.acc-mesure__icone {
  display: block;
  width: 20px;
  height: 20px;
  margin-bottom: 12px;
  color: var(--laiton-fonce);
}
.acc-mesure b { display: block; font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; }
.acc-mesure span { font-size: .8125rem; color: var(--gris-service); }

/* ---------- Livraison ---------- */

.acc-livraison { display: grid; gap: 14px; align-items: stretch; }
@media (min-width: 900px) { .acc-livraison { grid-template-columns: .95fr 1.05fr; } }

.acc-livraison__media {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  border-radius: 26px;
  background: #0c0f0d;
}
.acc-livraison__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acc-livraison__copie {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 1.6rem + 2vw, 46px);
  border: 1px solid var(--filet);
  border-radius: 26px;
}
.acc-livraison__copie > p {
  margin: .9rem 0 0;
  max-width: 48ch;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--gris-service);
}
.acc-etapes { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.acc-etapes li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 1rem;
  padding-block: 16px;
  border-top: 1px solid var(--filet);
}
.acc-etapes li:last-child { border-bottom: 1px solid var(--filet); }
.acc-etapes .acc-etapes__num {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--laiton-fonce);
  font-variant-numeric: tabular-nums;
}
.acc-etapes b { display: block; font-size: .9375rem; font-weight: 600; }
.acc-etapes small { font-size: .8125rem; line-height: 1.5; color: var(--gris-service); }

/* ---------- Guides ---------- */

.acc-guides { display: grid; gap: 14px; }
@media (min-width: 760px)  { .acc-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .acc-guides { grid-template-columns: 1.3fr .85fr .85fr; } }

.acc-guide { display: block; padding: 6px; border-radius: 26px; text-decoration: none; color: inherit; }
.acc-guide__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  background: #0c0f0d;
}
.acc-guide:first-child .acc-guide__media { aspect-ratio: 16 / 13; }
.acc-guide__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--transition);
}
.acc-guide:hover .acc-guide__media img { transform: scale(1.035); }
.acc-guide__corps { padding: 18px 6px 6px; }
.acc-guide__corps h3 {
  margin: .45rem 0 .4rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.015em;
}
.acc-guide__corps p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--gris-service); }
.acc-guide:first-child .acc-guide__corps h3 { font-size: 1.375rem; letter-spacing: -.025em; }

/* ---------- Bande conseil ---------- */

.acc-conseil {
  display: grid;
  gap: clamp(1.6rem, 1rem + 2.4vw, 3rem);
  align-items: center;
  padding: clamp(34px, 1.8rem + 2.6vw, 58px);
  border-radius: 26px;
  background: var(--craie);
}
@media (min-width: 900px) { .acc-conseil { grid-template-columns: 1.05fr .95fr; } }
.acc-conseil p { margin: .9rem 0 0; max-width: 46ch; font-size: .9375rem; line-height: 1.7; color: var(--gris-service); }
.acc-conseil__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.acc-conseil__media {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  border-radius: 20px;
  background: #0c0f0d;
}
.acc-conseil__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Mention de prototype ----------
   Reprend le gabarit du surtitre pour ne pas introduire un 4e style. */

.acc-mention {
  display: block;
  margin-top: .7rem;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--laiton-fonce);
}

/* ---------- Diagnostic : avancement, retour, résultat ----------
   Le panneau affichait « 01 / 03 » sans jamais avancer. Il porte désormais
   une jauge de trois segments, un retour, et une conclusion qui mène à la
   collection correspondante. */

.acc-diagnostic__jauge {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.acc-diagnostic__jauge li {
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--noir) 11%, transparent);
  transition: background-color var(--transition);
}
.acc-diagnostic__jauge li.est-faite { background: var(--laiton); }
.acc-diagnostic__jauge li.est-active { background: var(--noir); }

.acc-diagnostic__retour {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: 500 .8125rem/1 var(--sans);
  color: var(--gris-service);
  transition: color var(--transition);
}
.acc-diagnostic__retour[hidden] { display: none; }
.acc-diagnostic__retour:hover { color: var(--noir); }
/* La flèche du système pointe à droite : on la retourne pour un retour. */
.acc-diagnostic__retour svg { width: 15px; height: 15px; transform: scaleX(-1); }

/* Pendant la conclusion, le questionnaire s'efface : deux états ne doivent pas
   cohabiter dans le même panneau. */
.acc-diagnostic__panneau.est-conclu .acc-diagnostic__entete,
.acc-diagnostic__panneau.est-conclu .acc-diagnostic__question,
.acc-diagnostic__panneau.est-conclu .acc-diagnostic__choix,
.acc-diagnostic__panneau.est-conclu .acc-diagnostic__retour { display: none; }

.acc-diagnostic__resultat[hidden] { display: none; }
.acc-diagnostic__resultat h3 {
  margin: .5rem 0 .6rem;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.03em;
}
.acc-diagnostic__resultat p:not(.bloc__surtitre) {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--gris-service);
}
.acc-diagnostic__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.acc-diagnostic__actions .bouton { font-size: .875rem; padding: .8rem 1.3rem; }