/* Le rayon des ressources : page catalogue autonome. Les couvertures des
   documents sont de tailles heterogenes (carrees et paysage) : elles sont
   toutes presentees dans un meme cadre 4/5 en `cover`, sur une plaque
   sombre, pour que la grille tienne. Deux classes minimum sur tout
   selecteur a/button : la page 13 reste Elementor en base, son kit est
   enfile. */

.mv-rs {
  --mv-or: #D9B24B;
  --mv-teal: #259C99;
  --mv-teal-texte: #1a7573;
  --mv-teal-vif: #58d3cf;
  --mv-encre: #10151c;
  --mv-rayon: 5px;
  --mv-titre: Lato, ui-sans-serif, system-ui, sans-serif;
  --mv-corps: Nunito, ui-sans-serif, system-ui, sans-serif;

  font-family: var(--mv-corps);
  font-size: 17.5px;
  line-height: 28px;
  color: #333333;
  background: #ffffff;
}
.mv-rs * { box-sizing: border-box; }
.mv-rs :where(p, ul, ol, li, h1, h2, h3, figure) { margin: 0; padding: 0; }
.mv-rs :where(ul, ol) { list-style: none; }

.mv-rs__enveloppe {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 20px;
}

.mv-rs .mv-rs__surtitre {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mv-teal-vif);
}
.mv-rs .mv-rs__surtitre::before {
  content: "";
  width: 32px;
  height: 2px;
  flex: none;
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
}
.mv-rs .mv-rs__surtitre--sombre { color: var(--mv-teal-texte); }

.mv-rs__h2 {
  font-family: var(--mv-titre);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--mv-encre);
  margin-block-start: 18px;
  max-width: 18em;
}
.mv-rs__h2--clair { color: #ffffff; }
.mv-rs__texte-clair { margin-block-start: 18px; font-size: 17.5px; line-height: 29px; color: #c2cad4; max-width: 40em; }

.mv-rs .mv-rs__btn-or,
.mv-rs .mv-rs__btn-verre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 26px;
  border-radius: var(--mv-rayon);
  font-family: var(--mv-corps);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 250ms ease, border-color 250ms ease, transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-rs .mv-rs__btn-or { background: var(--mv-or); border: 1px solid var(--mv-or); color: #10151c; }
.mv-rs .mv-rs__btn-or svg { width: 16px; height: 16px; transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.mv-rs .mv-rs__btn-or:hover { background: #e3c060; border-color: #e3c060; transform: translateY(-2px); }
.mv-rs .mv-rs__btn-or:hover svg { transform: translateX(4px); }
.mv-rs .mv-rs__btn-verre { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.3); color: #ffffff; }
.mv-rs .mv-rs__btn-verre:hover { background: rgba(255, 255, 255, 0.16); }
.mv-rs .mv-rs__btn-or:focus-visible,
.mv-rs .mv-rs__btn-verre:focus-visible { outline: 2px solid var(--mv-teal); outline-offset: 3px; }

/* ---- Le hero, avec la pile de couvertures ---- */

.mv-rs__hero { position: relative; background: #10151c; overflow: hidden; }
.mv-rs__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(54% 76% at 8% 0%, rgba(37, 156, 153, 0.18) 0%, rgba(16, 21, 28, 0) 62%),
    radial-gradient(44% 62% at 94% 100%, rgba(217, 178, 75, 0.12) 0%, rgba(16, 21, 28, 0) 58%);
}
.mv-rs__aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(36% 44% at 78% 22%, rgba(88, 211, 207, 0.14) 0%, rgba(16, 21, 28, 0) 68%);
}
.mv-rs__hero-int {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
  padding-block: 96px 104px;
}
.mv-rs__titre {
  font-family: var(--mv-titre);
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-block-start: 20px;
  max-width: 15em;
}
.mv-rs__chapo { margin-block-start: 20px; font-size: 18px; line-height: 29px; color: #c2cad4; max-width: 34em; }
.mv-rs__reassurance { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-block-start: 32px; }
.mv-rs__reassurance li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; color: #dbe2ea; }
.mv-rs__reassurance svg { width: 18px; height: 18px; color: var(--mv-teal-vif); flex: none; }

/* Trois couvertures en eventail. Purement decoratif (aria-hidden). */
.mv-rs__pile { position: relative; height: 420px; }
.mv-rs__pile-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  border-radius: var(--mv-rayon);
  overflow: hidden;
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, 0.85);
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-rs__pile-item img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mv-rs__pile-item--0 { transform: translate(-78%, -52%) rotate(-9deg); z-index: 1; }
.mv-rs__pile-item--1 { transform: translate(-50%, -50%) rotate(-1deg); z-index: 3; }
.mv-rs__pile-item--2 { transform: translate(-22%, -48%) rotate(8deg); z-index: 2; }
.mv-rs__pile:hover .mv-rs__pile-item--0 { transform: translate(-86%, -54%) rotate(-12deg); }
.mv-rs__pile:hover .mv-rs__pile-item--2 { transform: translate(-14%, -46%) rotate(11deg); }

/* ---- Le rayon ---- */

.mv-rs__rayon { background: #f4f7f7; padding-block: 88px 96px; scroll-margin-top: 90px; }
.mv-rs__message {
  margin-block-end: 28px;
  padding: 16px 20px;
  border-radius: var(--mv-rayon);
  font-size: 16px;
  line-height: 25px;
}
.mv-rs__message--ok { background: rgba(37, 156, 153, 0.1); border: 1px solid rgba(37, 156, 153, 0.4); color: #145f5d; }
.mv-rs__message--erreur { background: rgba(200, 74, 40, 0.08); border: 1px solid rgba(200, 74, 40, 0.4); color: #99381c; }
.mv-rs__entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
  margin-block-end: 36px;
}
.mv-rs__cmds { display: flex; gap: 10px; }
/* display auteur + attribut hidden : la regle explicite est obligatoire. */
.mv-rs__cmds[hidden] { display: none; }
.mv-rs .mv-rs__cmd {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #d8dee4;
  border-radius: var(--mv-rayon);
  background: #ffffff;
  color: var(--mv-encre);
  cursor: pointer;
  padding: 0;
  transition: border-color 240ms ease, color 240ms ease, opacity 240ms ease;
}
.mv-rs .mv-rs__cmd svg { width: 18px; height: 18px; }
.mv-rs .mv-rs__cmd:hover { border-color: var(--mv-or); color: var(--mv-or); }
.mv-rs .mv-rs__cmd[aria-disabled="true"] { opacity: 0.35; }
.mv-rs .mv-rs__cmd:focus-visible { outline: 2px solid var(--mv-teal); outline-offset: 2px; }

/* Deux produits par vue, le reste au defilement (demande client : la
   grille de 4 cartes verticales etait trop massive). Cartes HORIZONTALES :
   couverture a gauche, argumentaire a droite. */
.mv-rs__grille {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 4px;
  margin-inline: -4px;
  padding-inline: 4px;
}
.mv-rs__grille::-webkit-scrollbar { display: none; }
.mv-rs__produit {
  flex: 0 0 calc((100% - 24px) / 2);
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  background: #ffffff;
  border-radius: var(--mv-rayon);
  overflow: hidden;
  box-shadow: 0 12px 34px -22px rgba(16, 21, 28, 0.3);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 320ms ease;
}
.mv-rs__produit:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(16, 21, 28, 0.32); }

/* La couverture remplit sa colonne : centree dans un cadre fixe, elle
   laissait un grand vide noir quand la carte voisine etait plus haute. */
.mv-rs__couverture {
  position: relative;
  background: #131920;
  overflow: hidden;
}
.mv-rs__couverture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-rs__produit:hover .mv-rs__couverture img { transform: scale(1.04); }
/* Voile bas : le badge et le bord gardent leur lisibilite quelle que soit
   la couverture. */
.mv-rs__couverture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 18, 25, 0.34) 0%, rgba(13, 18, 25, 0) 34%, rgba(13, 18, 25, 0) 70%, rgba(13, 18, 25, 0.4) 100%);
}
/* Fond OPAQUE : le badge se pose sur des couvertures claires, un fond
   translucide rendait le libelle illisible (mesure sur la capture). */
.mv-rs__prix {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 7px 13px;
  border-radius: var(--mv-rayon);
  background: #0d1219;
  border: 1px solid rgba(88, 211, 207, 0.55);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9fe8e5;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.6);
}
.mv-rs__prix--payant { background: var(--mv-or); border-color: var(--mv-or); color: #10151c; }

.mv-rs__produit-corps { display: flex; flex-direction: column; padding: 24px 26px 26px; }
.mv-rs__pour {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mv-teal-texte);
}
.mv-rs__produit-titre {
  margin-block-start: 10px;
  font-family: var(--mv-titre);
  font-size: 19px;
  line-height: 25px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--mv-encre);
}
.mv-rs__accroche { margin-block-start: 12px; font-size: 15px; line-height: 24px; color: #545b65; }
.mv-rs__contenu { margin-block-start: 16px; padding-block-start: 14px; border-top: 1px solid #e7ecef; display: flex; flex-direction: column; gap: 8px; }
.mv-rs__contenu li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 22px; color: var(--mv-encre); }
.mv-rs__contenu li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
}
.mv-rs__produit-pied { margin-block-start: auto; padding-block-start: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mv-rs .mv-rs__commander {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--mv-or);
  border-radius: var(--mv-rayon);
  background: var(--mv-or);
  font-family: var(--mv-corps);
  font-size: 15.5px;
  font-weight: 700;
  color: #10151c;
  cursor: pointer;
  transition: background-color 250ms ease, border-color 250ms ease, transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-rs .mv-rs__commander svg { width: 16px; height: 16px; transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.mv-rs .mv-rs__commander:hover { background: #e3c060; border-color: #e3c060; transform: translateY(-2px); }
.mv-rs .mv-rs__commander:hover svg { transform: translateX(3px); }
.mv-rs .mv-rs__commander:focus-visible { outline: 2px solid var(--mv-teal); outline-offset: 2px; }
.mv-rs .mv-rs__detail {
  display: inline-block;
  min-height: 44px;
  padding-block: 11px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--mv-teal-texte);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 250ms ease, border-color 250ms ease;
}
.mv-rs .mv-rs__detail:hover { color: var(--mv-or); border-color: var(--mv-or); }
.mv-rs .mv-rs__detail:focus-visible { outline: 2px solid var(--mv-teal); outline-offset: 2px; }

/* ---- La vedette ---- */

.mv-rs__vedette { position: relative; background: #131920; overflow: hidden; }
.mv-rs__vedette::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 70% at 10% 0%, rgba(37, 156, 153, 0.16) 0%, rgba(19, 25, 32, 0) 60%),
    radial-gradient(44% 60% at 92% 100%, rgba(217, 178, 75, 0.12) 0%, rgba(19, 25, 32, 0) 58%);
}
.mv-rs__vedette-int {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px;
  align-items: center;
  padding-block: 88px;
}
.mv-rs__vedette-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 30px; }
.mv-rs__vedette-visuel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--mv-rayon);
  box-shadow: 0 34px 70px -30px rgba(0, 0, 0, 0.8);
}

/* ---- Les trois temps ---- */

.mv-rs__methode { background: #ffffff; padding-block: 88px 96px; }
.mv-rs__etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.mv-rs__etape { padding-block-start: 24px; border-top: 2px solid #e7ecef; transition: border-color 320ms ease; }
.mv-rs__etape:hover { border-color: var(--mv-or); }
.mv-rs__etape-num { font-family: var(--mv-titre); font-size: 14px; font-weight: 900; letter-spacing: 0.1em; color: var(--mv-teal-texte); }
.mv-rs__etape-titre { margin-block-start: 10px; font-family: var(--mv-titre); font-size: 20px; font-weight: 900; letter-spacing: -0.02em; color: var(--mv-encre); }
.mv-rs__etape-texte { margin-block-start: 10px; font-size: 15.5px; line-height: 25px; color: #545b65; }

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

.mv-rs__faq { background: #f4f7f7; padding-block: 88px 96px; }
.mv-rs__faq-int { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.mv-rs__questions { display: flex; flex-direction: column; gap: 12px; }
.mv-rs .mv-faq-item { border-radius: var(--mv-rayon); background: #ffffff; box-shadow: 0 10px 26px -20px rgba(16, 21, 28, 0.28); overflow: hidden; }
.mv-rs .mv-faq-item__question { margin: 0; }
.mv-rs .mv-faq-item__question,
.mv-rs .mv-faq-item .mv-faq-item__bouton {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 18px 22px;
  border: 0;
  background: none;
  font-family: var(--mv-titre);
  font-size: 17px;
  line-height: 25px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mv-encre);
  text-align: left;
  cursor: pointer;
}
.mv-rs .mv-faq-item .mv-faq-item__bouton::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--mv-teal-texte);
  border-bottom: 2px solid var(--mv-teal-texte);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-rs .mv-faq-item .mv-faq-item__bouton[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.mv-rs .mv-faq-item .mv-faq-item__bouton:focus-visible { outline: 2px solid var(--mv-teal); outline-offset: -3px; }
.mv-rs .mv-faq-item__reponse { padding: 0 22px 22px; }
.mv-rs .mv-faq-item__reponse p { font-size: 16px; line-height: 27px; color: #545b65; max-width: 46em; }

/* ---- Le tunnel ---- */

.mv-rs__voile[hidden], .mv-rs__tunnel[hidden] { display: none; }
.mv-rs__voile {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(9, 13, 19, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.mv-rs__tunnel {
  position: fixed;
  z-index: 150;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(94vw, 520px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 32px 30px 30px;
  border-radius: var(--mv-rayon);
  background: #ffffff;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6);
}
html.mv-rs-ouvert, html.mv-rs-ouvert body { overflow: hidden; }
.mv-rs .mv-rs__fermer {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #d8dee4;
  border-radius: var(--mv-rayon);
  background: #ffffff;
  color: var(--mv-encre);
  cursor: pointer;
  padding: 0;
  transition: border-color 240ms ease, color 240ms ease;
}
.mv-rs .mv-rs__fermer svg { width: 18px; height: 18px; }
.mv-rs .mv-rs__fermer:hover { border-color: var(--mv-or); color: var(--mv-or); }
.mv-rs .mv-rs__fermer:focus-visible { outline: 2px solid var(--mv-teal); outline-offset: 2px; }
.mv-rs__tunnel-etiquette {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--mv-rayon);
  background: rgba(37, 156, 153, 0.12);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mv-teal-texte);
}
.mv-rs__tunnel-etiquette.est-payant { background: var(--mv-or); color: #10151c; }
.mv-rs__tunnel-titre {
  margin-block-start: 14px;
  font-family: var(--mv-titre);
  font-size: 25px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--mv-encre);
}
.mv-rs__tunnel-doc { margin-block-start: 8px; font-size: 15px; line-height: 24px; color: #545b65; }
.mv-rs__form { margin-block-start: 22px; }
.mv-rs__miel { position: absolute; left: -9999px; top: auto; }
.mv-rs__champ { display: flex; flex-direction: column; gap: 7px; margin-block-end: 14px; }
.mv-rs__champ label { font-size: 14px; font-weight: 700; color: var(--mv-encre); }
.mv-rs__champ label span { color: var(--mv-teal-texte); }
.mv-rs__champ input {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #d8dee4;
  border-radius: var(--mv-rayon);
  background: #ffffff;
  font-family: var(--mv-corps);
  font-size: 15.5px;
  color: var(--mv-encre);
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.mv-rs__champ input:focus { outline: none; border-color: var(--mv-teal); box-shadow: 0 0 0 3px rgba(37, 156, 153, 0.16); }
.mv-rs__consentement {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-block-start: 4px;
  padding-block: 6px;
  font-size: 13.5px;
  line-height: 21px;
  color: #545b65;
  cursor: pointer;
}
.mv-rs__consentement input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--mv-teal); cursor: pointer; }
.mv-rs__consentement a { color: var(--mv-teal-texte); text-decoration: underline; text-underline-offset: 3px; }
.mv-rs .mv-rs__envoyer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  margin-block-start: 18px;
  padding: 13px 24px;
  border: 1px solid var(--mv-or);
  border-radius: var(--mv-rayon);
  background: var(--mv-or);
  font-family: var(--mv-corps);
  font-size: 16px;
  font-weight: 700;
  color: #10151c;
  cursor: pointer;
  transition: background-color 250ms ease, border-color 250ms ease;
}
.mv-rs .mv-rs__envoyer:hover { background: #e3c060; border-color: #e3c060; }
.mv-rs .mv-rs__envoyer:focus-visible { outline: 2px solid var(--mv-teal); outline-offset: 2px; }
.mv-rs__tunnel-note { margin-block-start: 12px; font-size: 13px; line-height: 20px; color: #667085; text-align: center; }

/* ---- Revelations ---- */

.mv-anim .mv-rs .mv-revele {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-anim .mv-rs .mv-revele.est-visible { opacity: 1; transform: none; }

/* ---- Reactivite ---- */

@media (prefers-reduced-motion: reduce) {
  .mv-rs__produit, .mv-rs__couverture img, .mv-rs__pile-item, .mv-rs__etape,
  .mv-rs .mv-rs__commander, .mv-rs .mv-rs__btn-or, .mv-rs .mv-rs__detail { transition: none; }
  .mv-rs__produit:hover, .mv-rs .mv-rs__commander:hover, .mv-rs .mv-rs__btn-or:hover { transform: none; }
  .mv-rs__produit:hover .mv-rs__couverture img { transform: none; }
  .mv-rs__pile:hover .mv-rs__pile-item--0, .mv-rs__pile:hover .mv-rs__pile-item--2 { transform: translate(-78%, -52%) rotate(-9deg); }
  .mv-rs__pile:hover .mv-rs__pile-item--2 { transform: translate(-22%, -48%) rotate(8deg); }
}

@media (max-width: 1199.98px) {
  .mv-rs__produit { grid-template-columns: 180px minmax(0, 1fr); }
}
@media (max-width: 1023.98px) {
  .mv-rs__hero-int, .mv-rs__vedette-int, .mv-rs__faq-int { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .mv-rs__hero-int { padding-block: 72px 80px; }
  .mv-rs__pile { height: 340px; }
  .mv-rs__pile-item { width: 200px; }
  .mv-rs__etapes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .mv-rs__rayon, .mv-rs__methode, .mv-rs__faq { padding-block: 64px 72px; }
  .mv-rs__vedette-int { padding-block: 64px; }
  /* Un seul produit par vue, en colonne. */
  .mv-rs__produit { flex-basis: 100%; grid-template-columns: minmax(0, 1fr); }
  .mv-rs__couverture img { aspect-ratio: 16 / 10; height: auto; }
  .mv-rs__pile { height: 300px; }
  .mv-rs__pile-item { width: 168px; }
  .mv-rs .mv-rs__btn-or, .mv-rs .mv-rs__btn-verre { width: 100%; }
  .mv-rs__tunnel { padding: 28px 20px 24px; }
}

/* ===================================================== Fiche ressource
   La fiche reprend le systeme du rayon. Son formulaire est en ligne et
   sans JavaScript : le tunnel modale du rayon suppose un script charge. */

.mv-rs__fiche-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(56px, 7vw, 96px);
}

.mv-rs__fiche-fil { font-size: 14px; }

.mv-rs .mv-rs__fiche-retour {
  color: var(--mv-teal-vif);
  text-decoration: none;
  border-bottom: 1px solid rgba(88, 211, 207, 0.4);
  padding-block: 11px;
}

.mv-rs .mv-rs__fiche-retour:hover { color: #ffffff; border-bottom-color: #ffffff; }

.mv-rs__fiche-titre { max-width: 17em; }

.mv-rs__fiche-reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 26px;
}

.mv-rs__fiche-repere {
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--mv-rayon);
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  font-weight: 700;
  color: #dbe2ea;
}

.mv-rs__fiche-repere--payant { border-color: var(--mv-or); color: var(--mv-or); }

.mv-rs__fiche-actions { margin-block-start: 30px; }

.mv-rs .mv-rs__fiche-cta {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 13px 26px;
  border: 1px solid var(--mv-or);
  border-radius: var(--mv-rayon);
  background: var(--mv-or);
  font-family: var(--mv-corps);
  font-size: 16px;
  font-weight: 800;
  color: var(--mv-encre);
  text-decoration: none;
}

.mv-rs .mv-rs__fiche-cta:hover { background: #e3c060; border-color: #e3c060; }
.mv-rs .mv-rs__fiche-cta:focus-visible { outline: 2px solid var(--mv-teal-vif); outline-offset: 3px; }

/* La couverture est presentee dans un cadre commun : les visuels vont du
   carre au paysage, et une hauteur libre disloquerait l en tete. */
.mv-rs__fiche-visuel {
  aspect-ratio: 4 / 5;
  border-radius: var(--mv-rayon);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.mv-rs__fiche-image { width: 100%; height: 100%; object-fit: cover; display: block; }

.mv-rs__fiche-section { padding-block: clamp(48px, 6vw, 84px); background: #ffffff; }
.mv-rs__fiche-section--clair { background: #f4f7f7; }

.mv-rs__fiche-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

.mv-rs__fiche-h2 { margin-block-start: 0; }

.mv-rs__fiche-liste { display: grid; gap: 12px; margin-block-start: 22px; }

.mv-rs__fiche-ligne {
  position: relative;
  padding-left: 26px;
  font-size: 16.5px;
  line-height: 27px;
}

.mv-rs__fiche-ligne::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 14px;
  height: 2px;
  background: var(--mv-teal);
}

.mv-rs__fiche-prose { margin-block-start: 22px; }
.mv-rs__fiche-prose p { margin-block-end: 14px; }
.mv-rs__fiche-prose p:last-child { margin-block-end: 0; }

.mv-rs__fiche-note { margin-block-start: 20px; font-size: 16px; line-height: 27px; max-width: 34em; }

.mv-rs__fiche-form {
  padding: clamp(22px, 2.6vw, 32px);
  background: #ffffff;
  border: 1px solid #e2e8ec;
  border-radius: var(--mv-rayon);
  box-shadow: 0 18px 44px rgba(16, 21, 28, 0.07);
}

.mv-rs__fiche-autres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-block-start: 30px;
}

.mv-rs__fiche-autre {
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid #e2e8ec;
  border-radius: var(--mv-rayon);
  background: #ffffff;
}

.mv-rs__fiche-autre-titre {
  font-family: var(--mv-titre);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.mv-rs .mv-rs__fiche-autre-titre a {
  color: var(--mv-encre);
  text-decoration: none;
}

.mv-rs .mv-rs__fiche-autre-titre a:hover { color: var(--mv-teal-texte); text-decoration: underline; text-underline-offset: 3px; }

.mv-rs__fiche-autre-texte { margin-block-start: 10px; font-size: 15.5px; line-height: 25px; color: #545b65; }

@media (max-width: 899px) {
  .mv-rs__fiche-hero,
  .mv-rs__fiche-duo { grid-template-columns: minmax(0, 1fr); }
  .mv-rs__fiche-visuel { max-width: 320px; }
}