/* MOOV Vitrine — les deux fiches de démonstration.
   `.pdp-brut` : le gabarit pauvre, sans mise en forme au-delà du strict minimum.
   `.story`    : tout ce qui vient sous le bloc d'achat de la fiche développée. */

/* ==========================================================================
   1 · Bandeau de bascule entre les deux versions
   ========================================================================== */

.pdp-switch{display:flex;flex-wrap:wrap;gap:var(--mv-space-4);align-items:center;
  justify-content:space-between;margin-bottom:var(--mv-space-8);
  padding:var(--mv-space-4) var(--mv-space-5);
  background:var(--mv-neutral-100);color:var(--mv-text);
  border:1px solid var(--mv-border-soft)}
.pdp-switch__now{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mv-space-3);
  margin:0;font-size:var(--mv-text-sm)}
.pdp-switch__tag{display:inline-block;padding:.2rem .6rem;
  background:var(--mv-accent);color:var(--mv-text-on-accent);
  font-size:var(--mv-text-xs);letter-spacing:var(--mv-tracking-eyebrow);text-transform:uppercase}
.pdp-switch .btn{background:var(--mv-text);color:var(--mv-paper);border-color:var(--mv-text)}
.pdp-switch .btn:hover{background:transparent;color:var(--mv-text)}

/* ==========================================================================
   2 · Fiche « standard » — pauvre par construction
   ========================================================================== */

.pdp-brut{display:grid;gap:var(--mv-space-8);margin-bottom:var(--mv-space-16);
  grid-template-columns:1fr;max-width:760px}
@media (min-width:760px){.pdp-brut{grid-template-columns:260px 1fr}}
.pdp-brut__img img{width:100%;height:auto;display:block}
.pdp-brut h1{font-family:var(--mv-font-sans);font-size:var(--mv-text-xl);
  font-weight:var(--mv-weight-semibold);line-height:1.3;margin:0 0 var(--mv-space-3)}
.pdp-brut h2{font-family:var(--mv-font-sans);font-size:var(--mv-text-base);
  font-weight:var(--mv-weight-semibold);margin:var(--mv-space-6) 0 var(--mv-space-2)}
.pdp-brut__price{font-size:var(--mv-text-lg);margin-bottom:var(--mv-space-4)}
.pdp-brut__price del{color:var(--mv-text-subtle);margin-right:.4rem}
.pdp-brut__desc{font-size:var(--mv-text-sm);line-height:1.55;color:var(--mv-neutral-700)}
.pdp-brut .quantity{margin-right:var(--mv-space-2)}
.pdp-brut form.cart{display:flex;flex-wrap:wrap;gap:var(--mv-space-2);align-items:center}
.pdp-brut .single_add_to_cart_button{min-height:38px;padding-inline:var(--mv-space-5)}

/* ==========================================================================
   3 · Fiche développée — sections sous le bloc d'achat
   ========================================================================== */

.story{margin:var(--mv-space-20) 0 var(--mv-space-16)}
.story h2{font-size:var(--mv-text-3xl);line-height:var(--mv-leading-snug);
  margin:0 0 var(--mv-space-8);max-width:22ch}
.story h3{font-size:var(--mv-text-lg);font-weight:var(--mv-weight-medium);margin:0 0 var(--mv-space-2)}
.story p{margin:0 0 var(--mv-space-4);max-width:60ch;line-height:var(--mv-leading-body)}
.story .eyebrow{margin-bottom:var(--mv-space-3)}

.story__block{padding-block:var(--mv-space-16);border-top:1px solid var(--mv-border-soft)}
.story__block--tint{background:var(--mv-bg-alt);
  box-shadow:0 0 0 100vmax var(--mv-bg-alt);clip-path:inset(0 -100vmax);
  border-top:0}

/* Preuve chiffrée ------------------------------------------------------- */
.story__proof{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--mv-border-soft);border:1px solid var(--mv-border-soft)}
@media (min-width:720px){.story__proof{grid-template-columns:repeat(4,1fr)}}
.story__proof div{background:var(--mv-surface);padding:var(--mv-space-6) var(--mv-space-5);text-align:center}
/* Le chiffre et son unite restent sur une ligne, et les tuiles sans unite
   gardent la meme hauteur de chiffre : sinon les libelles se decalent. */
.story__proof b{display:flex;align-items:baseline;justify-content:center;gap:.12em;
  min-height:1em;white-space:nowrap;
  font-family:var(--mv-font-display);font-size:clamp(1.75rem,3.4vw,var(--mv-text-4xl));
  font-weight:var(--mv-weight-regular);line-height:1;font-variant-numeric:tabular-nums}
.story__proof small{font-family:var(--mv-font-sans);font-size:var(--mv-text-base);
  line-height:1;color:var(--mv-text-muted)}
.story__proof span{display:block;margin-top:var(--mv-space-2);
  font-size:var(--mv-text-xs);letter-spacing:var(--mv-tracking-eyebrow);
  text-transform:uppercase;color:var(--mv-text-muted)}

/* Colonnes -------------------------------------------------------------- */
.story__cols{display:grid;gap:var(--mv-space-8)}
@media (min-width:820px){.story__cols{grid-template-columns:repeat(3,1fr);gap:var(--mv-space-10)}}
.story__cols p{margin:0;font-size:var(--mv-text-sm);color:var(--mv-text-muted)}
.story__cols--rule article{padding-top:var(--mv-space-4);border-top:1px solid var(--mv-border)}
.story__num{display:block;margin-bottom:var(--mv-space-3);
  font-size:var(--mv-text-xs);letter-spacing:var(--mv-tracking-eyebrow);color:var(--mv-text-subtle)}
.story__role{font-size:var(--mv-text-xs)!important;letter-spacing:var(--mv-tracking-eyebrow);
  text-transform:uppercase;color:var(--mv-text-brand);margin-bottom:var(--mv-space-3)!important}
.story p.story__note{max-width:none;margin:var(--mv-space-10) 0 0;padding-top:var(--mv-space-4);
  border-top:1px solid var(--mv-border);
  font-size:var(--mv-text-xs);color:var(--mv-text-subtle)}

/* Vidéo ----------------------------------------------------------------- */
.story__video{margin-block:var(--mv-space-16);aspect-ratio:16/9;background:var(--mv-neutral-100)}
.story__video iframe{width:100%;height:100%;border:0;display:block}

/* Deux colonnes image / texte ------------------------------------------- */
.story__split{display:grid;gap:var(--mv-space-8);align-items:center;
  padding-block:var(--mv-space-16);border-top:1px solid var(--mv-border-soft)}
@media (min-width:900px){
  .story__split{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem)}
  .story__split--rev figure{order:2}
}
.story__split figure{margin:0;aspect-ratio:var(--mv-ratio-editorial);
  background:var(--mv-surface-sunk);overflow:hidden}
.story__split figure img{width:100%;height:100%;object-fit:cover;display:block}
.story__split figure.is-packshot{background:var(--mv-bg-alt)}
.story__split figure.is-packshot img{object-fit:contain}

.story__facts{list-style:none;margin:var(--mv-space-8) 0 0;padding:0;display:grid}
.story__facts li{display:flex;justify-content:space-between;gap:var(--mv-space-4);
  padding:var(--mv-space-3) 0;border-bottom:1px solid var(--mv-border-soft)}
.story__facts li:first-child{border-top:1px solid var(--mv-border-soft)}
.story__facts b{font-size:var(--mv-text-xs);letter-spacing:var(--mv-tracking-eyebrow);
  text-transform:uppercase;color:var(--mv-text-muted);font-weight:var(--mv-weight-regular)}
.story__facts span{font-size:var(--mv-text-sm)}

/* Étapes ---------------------------------------------------------------- */
.story__steps{list-style:none;counter-reset:s;margin:0;padding:0}
.story__steps li{counter-increment:s;display:grid;grid-template-columns:2.5rem 1fr;
  column-gap:var(--mv-space-3);padding:var(--mv-space-4) 0;
  border-bottom:1px solid var(--mv-border-soft)}
.story__steps li:first-child{border-top:1px solid var(--mv-border-soft)}
.story__steps li::before{content:counter(s,decimal-leading-zero);grid-row:1 / span 2;
  font-size:var(--mv-text-xs);letter-spacing:var(--mv-tracking-eyebrow);
  color:var(--mv-text-subtle);padding-top:.25rem}
.story__steps b{grid-column:2;font-weight:var(--mv-weight-medium)}
.story__steps span{grid-column:2;font-size:var(--mv-text-sm);color:var(--mv-text-muted)}

/* FAQ ------------------------------------------------------------------- */
.story__faq details{border-bottom:1px solid var(--mv-border-soft)}
.story__faq details:first-child{border-top:1px solid var(--mv-border-soft)}
.story__faq summary{list-style:none;cursor:pointer;padding:var(--mv-space-5) 0;
  display:flex;justify-content:space-between;align-items:center;gap:var(--mv-space-4);
  font-size:var(--mv-text-lg)}
.story__faq summary::-webkit-details-marker{display:none}
.story__faq summary::after{content:"+";font-size:var(--mv-text-xl);color:var(--mv-text-muted);
  transition:transform var(--mv-dur-fast) var(--mv-ease-out)}
.story__faq details[open] summary::after{transform:rotate(45deg)}
.story__faq details p{padding-bottom:var(--mv-space-5);color:var(--mv-text-muted)}

/* Chapô d'un bloc en colonnes */
.story .story__intro{max-width:56ch;margin-top:calc(-1 * var(--mv-space-4));
  margin-bottom:var(--mv-space-8);color:var(--mv-text-muted)}

/* --- Bannière d'ambiance et images des bénéfices ------------------------- */
/* Pleine largeur de la colonne de récit, format cinéma : c'est l'univers
   avant les arguments, pas une vignette de plus. */
.story__ambiance{margin:var(--mv-space-12) 0 0;aspect-ratio:21/9;overflow:hidden;
  background:var(--mv-neutral-100)}
.story__ambiance img{width:100%;height:100%;object-fit:cover}
@media (max-width:720px){.story__ambiance{aspect-ratio:4/3}}

.story__cols article.has-img{display:flex;flex-direction:column}
.story__benefice-img{margin:0 0 var(--mv-space-5);aspect-ratio:4/5;overflow:hidden;
  background:var(--mv-neutral-100)}
.story__benefice-img img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--mv-ease-out)}
.story__cols article.has-img:hover .story__benefice-img img{transform:scale(1.04)}
/* Un seul bénéfice illustré sur trois : sans ça, son texte descendait sous
   l'image pendant que les deux autres restaient en haut. Les textes
   s'alignent en bas, l'image se pose au-dessus du sien. */
.story__cols:has(.has-img){align-items:end}