/* Accueil en blocs natifs. Valeurs relevees sur le rendu Elementor de la
   production, pas deduites du kit : le kit annonce Questrial, le rendu
   reel emploie Lato. */

.mv-page {
  --mv-or: #D9B24B;
  --mv-or-clair: #D1B35B;
  --mv-teal: #259C99;
  /* Le teal de marque ne donne que 3,24 de contraste sur fond blanc : sous
     le seuil de 4,5 exige pour du texte de 13px. Cette declinaison plus
     sombre monte a 5,3 sans changer la teinte percue. */
  --mv-teal-texte: #1a7573;
  --mv-slate: #303642;
  --mv-encre: #101828;
  --mv-texte: #333333;
  --mv-gris: #667085;
  --mv-conteneur: 1280px;
  /* 5px : consigne du cahier des charges. La production Elementor emploie
     20px sur les boutons, c'est le 1er ecart assume avec le clone. */
  --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: 18px;
  line-height: 27px;
  color: var(--mv-texte);
}

.mv-page :is(h1, h2, h3) {
  font-family: var(--mv-titre);
  font-weight: 900;
  color: #000;
  margin: 0;
}

/* ⛔ REGLE STRUCTURANTE : aucune bande entre les sections.
   WordPress emet `:root :where(.is-layout-flow) > * { margin-block-start:
   <blockGap> }`, ce qui insere 24px de fond de page entre CHAQUE section de
   premier niveau. C'est la cause des bandes blanches en haut et en bas.
   Le combinateur enfant double classe vaut (0,2,0) et passe devant.
   Vaut pour toutes les sections presentes et a venir. */
.mv-page > .wp-block-group,
.mv-page > * {
  margin-block: 0;
}

.mv-enveloppe {
  max-width: var(--mv-conteneur);
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
}

/* ---------- Heros immersif ----------
   Esprit du hero valide sur la fiche evenement de la Loco, transpose sans
   copie : image plein cadre, voile a DEUX couches (horizontale cote texte,
   verticale qui ancre le bas), contenu au bas a gauche, et un panneau de
   verre a droite qui porte la NAVIGATION du carrousel (titres + progression
   du defilement automatique). Verre a bordure NEUTRE : jamais de bordure
   coloree (feedback client Loco « cliche IA »). */

.mv-hero {
  position: relative;
  overflow: hidden;
  background: #0d1219;
}

/* Les vues du heros se succedent en FONDU, non en defilement lateral :
   toutes occupent la meme cellule de grille et seule l opacite change.
   La grille donne au heros la hauteur de la vue la plus haute. */
.mv-hero__piste {
  display: grid;
  grid-template-areas: "vue";
}

/* Le coeur pose `:root :where(.is-layout-flow) > * { margin-block-start:
   <blockGap> }` sur toutes les vues sauf la premiere : superposees, la
   ligne prendrait 24px de trop. Le combinateur enfant vaut (0,2,0). */
.mv-hero__piste > .wp-block-cover { margin-block: 0; }

.mv-hero .wp-block-cover.mv-hero__slide {
  grid-area: vue;
  width: 100%;
  min-height: clamp(620px, 82vh, 850px);
  padding: 0;
  display: flex;
  align-items: flex-end;
}

/* Sans JavaScript, la premiere vue reste entierement lisible et les autres
   ne s empilent pas dessus. */
.mv-hero:not(.mv-hero--fondu) .wp-block-cover.mv-hero__slide:not(:first-child) {
  opacity: 0;
  visibility: hidden;
}

/* Des que le script prend la main, l opacite seule fait la transition.
   `visibility` bascule a la FIN du fondu sortant, sinon la vue quittee
   resterait cliquable et lisible par les lecteurs d ecran pendant tout
   le fondu. Quatre classes pour passer devant la regle de base. */
.mv-hero.mv-hero--fondu .wp-block-cover.mv-hero__slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 900ms;
  will-change: opacity;
}

.mv-hero.mv-hero--fondu .wp-block-cover.mv-hero__slide.est-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  .mv-hero.mv-hero--fondu .wp-block-cover.mv-hero__slide,
  .mv-hero.mv-hero--fondu .wp-block-cover.mv-hero__slide.est-active {
    transition: none;
  }
}

/* Le voile : les covers sont a dimRatio 0, ce ::after fait tout le travail.
   Couche 1 horizontale dense cote texte, couche 2 verticale qui assoit le
   bas (recette re-mesuree au canvas, pire pixel sous la boite du titre). */
/* z-index 0 et non 1 : le core pose z-index:1 sur l'inner via un selecteur
   :not(:has(...)) a tres haute specificite, impossible a battre proprement.
   A 0, le voile passe sur l'image (ordre de peinture du pseudo) et sous
   l'inner sans aucune bataille de cascade. */
.mv-hero .wp-block-cover.mv-hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(13, 18, 25, 0.9) 0%, rgba(13, 18, 25, 0.68) 34%, rgba(13, 18, 25, 0.34) 60%, rgba(13, 18, 25, 0.1) 100%),
    linear-gradient(180deg, rgba(13, 18, 25, 0.4) 0%, rgba(13, 18, 25, 0.16) 28%, rgba(13, 18, 25, 0.52) 62%, rgba(13, 18, 25, 0.9) 100%);
}

.mv-hero .wp-block-cover.mv-hero__slide .wp-block-cover__inner-container {
  max-width: 1280px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: 140px 92px;
  box-sizing: border-box;
}

/* Source du panneau de navigation, jamais affichee telle quelle. */
.mv-hero__etiquette { display: none; }

.mv-hero__contenu { max-width: 46em; }
.mv-hero__contenu > * { margin-block: 0; }
@media (min-width: 1100px) {
  /* Reserve la zone du panneau de verre. */
  .mv-hero__contenu { max-width: 54%; }
}

.mv-hero__surtitre {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mv-corps);
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Blanc et non teal-vif : sur photo variable, mesure au canvas, le teal
     tombait a 1. La signature couleur reste dans le filet. */
  color: #eef2f6;
  margin: 0;
}
.mv-hero__surtitre::before {
  content: "";
  width: 32px;
  height: 2px;
  flex: none;
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
}

.mv-hero__titre {
  font-family: var(--mv-titre);
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 20px 0 0;
  max-width: 15em;
}

.mv-hero__texte {
  font-family: var(--mv-corps);
  font-size: 17.5px;
  line-height: 27px;
  font-weight: 400;
  color: #dbe2ea;
  margin: 20px 0 0;
  max-width: 42em;
}

.mv-hero .wp-block-buttons { margin-block-start: 30px; }

/* Dans le heros, le bouton or passe a l'encre comme la tete et le pied qui
   l'encadrent : 9,09 de contraste la ou le blanc herite donne 2,02. */
.mv-hero .mv-btn-or .wp-block-button__link { color: #10151c; font-weight: 700; }
.mv-hero .mv-btn-or .wp-block-button__link:hover { background: #e3c060; border-color: #e3c060; color: #10151c; }
.mv-hero .mv-btn-tel .wp-block-button__link { border-color: rgba(255, 255, 255, 0.32); }
.mv-hero .mv-btn-tel .wp-block-button__link:hover { border-color: rgba(255, 255, 255, 0.55); }

/* Boutons du heros */
.mv-hero .wp-block-buttons { gap: 12px; }

.mv-page .wp-block-button__link {
  border-radius: var(--mv-rayon);
  /* 48px de plancher : mesure a 390px, les boutons sortaient a 42px, sous
     le seuil de confort tactile. Le remplissage seul ne suffit pas. */
  min-height: 48px;
  box-sizing: border-box;
  padding: 12px 24px;
  font-family: var(--mv-corps);
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

.mv-btn-tel .wp-block-button__link {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid #e5e7eb;
  color: #fff;
  font-size: 15px;
}
.mv-btn-tel .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.18);
}

.mv-btn-or .wp-block-button__link {
  background: var(--mv-or);
  border: 1px solid var(--mv-or);
  color: #fff;
  font-size: 16px;
}
.mv-btn-or .wp-block-button__link:hover {
  background: #c79f3c;
  border-color: #c79f3c;
}

/* Le panneau de verre : navigation par titres, construite par carrousel.js.
   Verre = base sombre (elle garantit la lisibilite) + reflet diagonal +
   flou d'arriere-plan + bordure NEUTRE. La profondeur vient du reflet
   interne et de l'ombre portee, pas d'un contour. */
.mv-hero__nav {
  position: absolute;
  z-index: 3;
  right: max(20px, calc((100% - 1280px) / 2 + 20px));
  bottom: 92px;
  width: 336px;
  padding: 10px;
  background-color: rgba(13, 18, 25, 0.48);
  background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05) 36%, rgba(255, 255, 255, 0) 70%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--mv-rayon);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.mv-hero .mv-hero__onglet {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 14px 14px 18px;
  border: 0;
  background: none;
  border-radius: var(--mv-rayon);
  font-family: var(--mv-corps);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 20px;
  color: #b9c2cc;
  text-align: left;
  cursor: pointer;
  transition: color 220ms ease, background-color 220ms ease;
}
.mv-hero .mv-hero__onglet:hover { color: #ffffff; background: rgba(255, 255, 255, 0.06); }
.mv-hero .mv-hero__onglet:focus-visible { outline: 2px solid var(--mv-teal); outline-offset: -2px; }
.mv-hero .mv-hero__onglet[aria-current="true"] { color: #ffffff; }
.mv-hero__num {
  flex: none;
  font-family: var(--mv-titre);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.48);
  transition: color 220ms ease;
}
.mv-hero .mv-hero__onglet[aria-current="true"] .mv-hero__num { color: var(--mv-or); }
/* Rail et remplissage de progression : le remplissage rejoue son animation
   a chaque bascule d'aria-current (le pseudo-element est recree). */
.mv-hero .mv-hero__onglet::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 9px;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
}
.mv-hero .mv-hero__onglet[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 9px;
  height: 2px;
  z-index: 1;
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
  transform-origin: left center;
  transform: scaleX(0);
  animation: mv-hero-avance var(--mv-delai, 7s) linear forwards;
}
.mv-hero.est-en-pause .mv-hero__onglet[aria-current="true"]::before { animation-play-state: paused; }
@keyframes mv-hero-avance { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .mv-hero .mv-hero__onglet[aria-current="true"]::before { animation: none; transform: scaleX(1); }
}

/* Segments tactiles (mobile et tablette) : rail fin, cible de 44px. */
.mv-hero__segments {
  position: absolute;
  z-index: 3;
  left: 20px;
  right: 20px;
  bottom: 22px;
  display: none;
  gap: 10px;
}
.mv-hero .mv-hero__segment {
  flex: 1 1 auto;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.mv-hero .mv-hero__segment::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}
.mv-hero .mv-hero__segment[aria-current="true"]::before {
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
}
.mv-hero .mv-hero__segment:focus-visible { outline: 2px solid var(--mv-teal); outline-offset: 2px; }

@media (max-width: 1099.98px) {
  .mv-hero__nav { display: none; }
  .mv-hero__segments { display: flex; }
  .mv-hero .wp-block-cover.mv-hero__slide .wp-block-cover__inner-container { padding-block: 120px 96px; }
}
@media (max-width: 767px) {
  .mv-hero .wp-block-cover.mv-hero__slide { min-height: clamp(560px, 76vh, 720px); }
  .mv-hero .wp-block-cover.mv-hero__slide .wp-block-cover__inner-container { padding-block: 104px 88px; }
}

/* Pictos des boutons, en masque : le SVG action.svg de la mediatheque est
   dessine en currentColor et sortirait noir en <img>. */
.mv-btn-tel .wp-block-button__link::before,
.mv-btn-or .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--picto) center / contain no-repeat;
  mask: var(--picto) center / contain no-repeat;
}
.mv-btn-tel .wp-block-button__link {
  --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M497 348l-112-48a24 24 0 00-28 7l-50 60A370 370 0 01145 205l60-50a24 24 0 007-28L164 15a24 24 0 00-27-14L33 25A24 24 0 0014 48c0 256 208 464 464 464a24 24 0 0023-19l24-104a24 24 0 00-28-41z'/%3E%3C/svg%3E");
}
.mv-btn-or .wp-block-button__link {
  --picto: url("/wp-content/uploads/2025/09/action.svg");
  width: auto;
}

/* ---------- Section 1 : introduction ----------
   En tete clair et structure, puis une bande sombre pleine largeur pour les
   cinq atouts. Le contraste des deux surfaces cree le rythme vertical.
   Fonds unis, bord a bord : aucune bande parasite. */

.mv-intro { background: #f4f7f7; }

.mv-intro__inner {
  padding-block: 104px 88px;
  padding-inline: 0;
}
@media (max-width: 1320px) { .mv-intro__inner { padding-inline: 20px; } }

/* ⛔ Les enfants d'une grille maison reprennent la main sur les marges.
   WordPress pose `margin-block-start: <blockGap>` sur tous les enfants SAUF
   le premier. Dans une grille, cela decale la 1re colonne de 24px vers le
   haut : c'est le defaut d'alignement releve sur la rangee des atouts. */
.mv-intro__entete > *,
.mv-intro__texte > *,
.mv-intro__chapo > *,
.mv-atouts__grille > *,
.mv-atout > * {
  margin-block: 0;
}

.mv-intro__entete {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  column-gap: 88px;
  align-items: start;
}

.mv-intro__texte .mv-intro__sur {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mv-corps);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Teal assombri : le teal de marque ne donne que 3,24 sur fond clair. */
  color: var(--mv-teal-texte);
  margin: 0 0 26px;
}
.mv-intro__texte .mv-intro__sur::before {
  content: "";
  width: 32px;
  height: 2px;
  flex: none;
  background: var(--mv-teal);
}

.mv-page .mv-intro__texte h1 {
  font-family: var(--mv-titre);
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.125rem);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #10151c;
  margin: 0;
  text-wrap: balance;
}

.mv-intro__chapo { padding-block-start: 8px; }
.mv-intro__chapo p {
  font-family: var(--mv-corps);
  font-size: 18px;
  line-height: 30px;
  color: #454c56;
  margin: 0;
}

/* ---------- Les cinq atouts, sur bande sombre ---------- */

.mv-atouts {
  position: relative;
  background: #131920;
  overflow: hidden;
}
/* Halo tres discret : il donne de la profondeur sans faire decor. */
.mv-atouts::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 70% at 8% 0%, rgba(37, 156, 153, 0.16) 0%, rgba(19, 25, 32, 0) 62%),
    radial-gradient(46% 60% at 96% 100%, rgba(217, 178, 75, 0.09) 0%, rgba(19, 25, 32, 0) 60%);
}

.mv-atouts__inner {
  position: relative;
  padding-block: 76px;
  padding-inline: 0;
}
@media (max-width: 1320px) { .mv-atouts__inner { padding-inline: 20px; } }

.mv-atouts__grille {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.mv-atout {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 24px 32px;
  border-radius: var(--mv-rayon);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition:
    transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 480ms ease,
    border-color 480ms ease;
}

/* Filet d'accent qui se trace en haut de carte. */
.mv-atout::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Voile qui balaie la carte, en diagonale. */
.mv-atout::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 58%);
  transform: translateX(-70%);
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mv-atout:hover,
.mv-atout:focus-within {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.16);
}
.mv-atout:hover::before,
.mv-atout:focus-within::before { transform: scaleX(1); }
.mv-atout:hover::after,
.mv-atout:focus-within::after { transform: translateX(70%); }

.mv-atout__num {
  font-family: var(--mv-corps);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.14em;
  /* #7c8794 ne donnait que 4,44 sur le fond de carte, sous le seuil de 4,5. */
  color: #8994a2;
  margin: 0;
  transition: color 480ms ease;
}
.mv-atout:hover .mv-atout__num { color: var(--mv-or); }

/* ---- Pictogrammes dessines sur mesure ----
   Meme famille : 24x24, trait de 1,6, extremites arrondies, aucun aplat.
   `pathLength="1"` normalise la longueur de CHAQUE trace a 1, ce qui permet
   de les faire s'ecrire au survol sans connaitre leur longueur reelle. */
.mv-atout__ico { display: block; width: 34px; height: 34px; }
.mv-atout__ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mv-atout__ico .mv-trace {
  fill: none;
  stroke: var(--mv-teal-vif, #45c7c3);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke 480ms ease, stroke-dashoffset 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-atout:hover .mv-atout__ico .mv-trace { stroke: var(--mv-or); }
/* Le trace se redessine : on part de 1 (invisible) pour revenir a 0. */
.mv-atout:hover .mv-atout__ico .mv-trace {
  animation: mv-tracer 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-atout:hover .mv-atout__ico .mv-trace:nth-child(2) { animation-delay: 70ms; }
.mv-atout:hover .mv-atout__ico .mv-trace:nth-child(3) { animation-delay: 140ms; }
.mv-atout:hover .mv-atout__ico .mv-trace:nth-child(4) { animation-delay: 210ms; }

@keyframes mv-tracer {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.mv-atout__titre {
  font-family: var(--mv-titre);
  font-size: 19px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 2px 0 0;
}

.mv-atout__desc {
  font-family: var(--mv-corps);
  font-size: 16px;
  line-height: 25px;
  color: #a8b1bd;
  margin: 0;
}

/* Apparition discrete : 14px, pas 26. */
.mv-anim .mv-revele { opacity: 0; transform: translateY(14px); }
.mv-anim .mv-revele.est-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .mv-anim .mv-revele { opacity: 1; transform: none; }
  .mv-atout, .mv-atout::before, .mv-atout::after,
  .mv-atout__num, .mv-atout__ico .mv-trace { transition: none; }
  .mv-atout:hover { transform: none; }
  .mv-atout:hover .mv-atout__ico .mv-trace { animation: none; }
}


@media (max-width: 1100px) {
  .mv-intro__entete { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .mv-intro__chapo { padding-block-start: 0; }
  .mv-atouts__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mv-intro__inner { padding-block: 68px 56px; }
  .mv-atouts__inner { padding-block: 56px; }
  .mv-atouts__grille { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mv-atout { padding: 24px 20px 26px; }
  .mv-intro__chapo p { font-size: 17px; line-height: 28px; }
}

/* ---------- Section 2 : domaines d'expertise ----------
   Surface claire, apres la bande sombre des atouts : l'alternance porte le
   rythme. Colonne de gauche collante, trois domaines en rangees cliquables.
   Un pictogramme PROPRE a chaque domaine, jamais le meme repete. */

.mv-expertise {
  background: #ffffff;
}

.mv-expertise__inner {
  padding-block: 104px;
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  column-gap: 88px;
  align-items: start;
}
@media (max-width: 1320px) { .mv-expertise__inner { padding-inline: 20px; } }

/* Neutralisation des marges du coeur, ecrite en meme temps que le
   conteneur : c'est le reflexe, pas un correctif apres coup. */
.mv-expertise__inner > *,
.mv-expertise__intro > *,
.mv-expertise__liste > *,
.mv-domaine__corps > * {
  margin-block: 0;
}

/* La colonne de gauche accompagne la lecture des trois domaines. 76px
   d'en tete collant + 40px de respiration. */
.mv-expertise__intro {
  position: sticky;
  top: 116px;
}

.mv-expertise__sur {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mv-corps);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mv-teal-texte);
  margin: 0 0 26px;
}
.mv-expertise__sur::before {
  content: "";
  width: 32px;
  height: 2px;
  flex: none;
  background: var(--mv-teal);
}

.mv-page .mv-expertise__intro h2 {
  font-family: var(--mv-titre);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.8125rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #10151c;
  margin: 0 0 20px;
  text-wrap: balance;
}

.mv-expertise__intro p {
  font-family: var(--mv-corps);
  font-size: 18px;
  line-height: 30px;
  color: #454c56;
  margin: 0 0 28px;
}

/* ---- Les trois domaines ---- */

.mv-expertise__liste {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(16, 21, 28, 0.12);
}

/* La rangee entiere est cliquable par le lien etire du titre : cible large,
   aucun JavaScript, nom accessible correct, et les blocs restent editables
   dans Gutenberg (ce qu'un <a> englobant aurait interdit). */
.mv-domaine {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 44px;
  align-items: start;
  column-gap: 22px;
  padding: 34px 20px 34px 18px;
  border-bottom: 1px solid rgba(16, 21, 28, 0.12);
  transition: background-color 420ms ease, padding-inline-start 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-domaine::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--mv-teal), var(--mv-or));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-domaine:hover,
.mv-domaine:focus-within {
  background: #f6f9f9;
  padding-inline-start: 26px;
}
.mv-domaine:hover::before,
.mv-domaine:focus-within::before { transform: scaleY(1); }
.mv-domaine:focus-within { box-shadow: inset 0 0 0 2px rgba(37, 156, 153, 0.45); }

/* Le lien reste le titre : focalisable, nom accessible correct.
   La rangee entiere est rendue cliquable par le script, et non par un lien
   etire : mesure faite, le clic se perdait sur le paragraphe et sur la zone
   vide, les elements de grille honorant z-index meme en position statique.
   Sans JavaScript, le titre reste cliquable : rien n'est perdu. */
.mv-domaine__corps h3 a {
  color: inherit;
  text-decoration: none;
}
.mv-domaine[data-cliquable] { cursor: pointer; }

/* Pictogramme : meme famille que les atouts, 24x24, trait 1,6, arrondi. */
.mv-domaine__ico { display: block; width: 44px; height: 44px; }
.mv-domaine__ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mv-domaine__ico .mv-trace {
  fill: none;
  stroke: var(--mv-teal);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke 420ms ease;
}
.mv-domaine:hover .mv-domaine__ico .mv-trace,
.mv-domaine:focus-within .mv-domaine__ico .mv-trace {
  stroke: var(--mv-or);
  animation: mv-tracer 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-domaine:hover .mv-domaine__ico .mv-trace:nth-child(2) { animation-delay: 70ms; }
.mv-domaine:hover .mv-domaine__ico .mv-trace:nth-child(3) { animation-delay: 140ms; }
.mv-domaine:hover .mv-domaine__ico .mv-trace:nth-child(4) { animation-delay: 210ms; }

.mv-page .mv-domaine__corps h3 {
  font-family: var(--mv-titre);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #10151c;
  margin: 0 0 8px;
  transition: color 420ms ease;
}
.mv-domaine:hover .mv-domaine__corps h3,
.mv-domaine:hover .mv-domaine__corps h3 a { color: var(--mv-teal-texte); }

.mv-domaine__corps p {
  font-family: var(--mv-corps);
  font-size: 17px;
  line-height: 28px;
  color: #545b65;
  margin: 0;
}

/* La fleche accompagne le mouvement de la rangee. */
.mv-domaine__fleche {
  align-self: center;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--mv-rayon);
  border: 1px solid rgba(16, 21, 28, 0.14);
  color: #10151c;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), background-color 420ms ease, border-color 420ms ease, color 420ms ease;
}
/* La fleche reprend le picto d action du heros plutot qu un chevron
   generique. Comme sur les boutons, il est pose en MASQUE : action.svg est
   dessine en currentColor et sortirait noir en <img>, sans suivre le
   changement de couleur au survol. Le SVG en ligne du bloc laisse la
   place, sans etre retire du contenu. */
.mv-domaine__fleche svg { display: none; }

.mv-domaine__fleche::before {
  content: "";
  /* 128 x 86 dans le fichier : la largeur mene, la hauteur suit le ratio */
  width: 22px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("/wp-content/uploads/2025/09/action.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2025/09/action.svg") center / contain no-repeat;
}
.mv-domaine:hover .mv-domaine__fleche,
.mv-domaine:focus-within .mv-domaine__fleche {
  transform: translateX(5px);
  background: var(--mv-teal);
  border-color: var(--mv-teal);
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .mv-domaine, .mv-domaine::before, .mv-domaine__fleche,
  .mv-domaine__ico .mv-trace, .mv-domaine__corps h3 { transition: none; }
  .mv-domaine:hover { padding-inline-start: 18px; }
  .mv-domaine:hover .mv-domaine__fleche { transform: none; }
  .mv-domaine:hover .mv-domaine__ico .mv-trace { animation: none; }
  .mv-expertise__intro { position: static; }
}

@media (max-width: 1100px) {
  .mv-expertise__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 44px;
    padding-block: 76px;
  }
  .mv-expertise__intro { position: static; }
}
@media (max-width: 640px) {
  .mv-expertise__inner { padding-block: 60px; }
  .mv-domaine {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 14px;
    padding: 26px 0 26px 14px;
  }
  .mv-domaine:hover { padding-inline-start: 20px; }
  .mv-domaine__fleche { grid-column: 2; justify-self: start; }
  .mv-page .mv-domaine__corps h3 { font-size: 20px; line-height: 28px; }
}

/* ---------- Section 3 : vos objectifs ----------
   Fond photographique VOILE A 80 % : la matiere donne au verre de quoi se
   lire comme du verre, le voile protege la lecture des 240 mots de la
   grille. Une photo franchement visible derriere du texte courant est ce
   qui fait perdre sa credibilite a une page. */

.wp-block-cover.mv-objectifs {
  padding: 0;
  min-height: 0;
  align-items: stretch;
  justify-content: flex-start;
}
/* Teinte de marque par dessus le voile neutre : sans elle, l'image tire
   vers le gris et la section se detache mal du reste. */
.wp-block-cover.mv-objectifs::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(62% 76% at 6% 0%, rgba(37, 156, 153, 0.20) 0%, rgba(13, 18, 25, 0) 62%),
    radial-gradient(48% 62% at 96% 100%, rgba(217, 178, 75, 0.12) 0%, rgba(13, 18, 25, 0) 60%);
}
.wp-block-cover.mv-objectifs > .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  padding: 0;
}

.mv-objectifs__inner {
  padding-block: 104px;
  padding-inline: 0;
}
@media (max-width: 1320px) { .mv-objectifs__inner { padding-inline: 20px; } }

/* Neutralisation des marges du coeur, ecrite avec le conteneur. */
.mv-objectifs__inner > *,
.mv-objectifs__entete > *,
.mv-objectifs__texte > *,
.mv-objectifs__chapo > *,
.mv-objectifs__grille > *,
.mv-objectif > * {
  margin-block: 0;
}

.mv-objectifs__entete {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  column-gap: 88px;
  align-items: start;
}

.mv-objectifs__sur {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mv-corps);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Sur fond sombre on reprend le teal vif : le teal assombri servait a
     tenir le contraste sur fond clair, il est inutile ici. */
  color: #58d3cf;
  margin: 0 0 26px;
}
.mv-objectifs__sur::before {
  content: "";
  width: 32px;
  height: 2px;
  flex: none;
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
}

.mv-page .mv-objectifs__texte h2 {
  font-family: var(--mv-titre);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.8125rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0;
  text-wrap: balance;
}

.mv-objectifs__chapo { padding-block-start: 8px; }
.mv-objectifs__chapo p {
  font-family: var(--mv-corps);
  font-size: 18px;
  line-height: 30px;
  color: #c8d0da;
  margin: 0;
}

/* ---- La grille des six objectifs, en verre ---- */

.mv-objectifs__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  margin-block-start: 56px;
}

.mv-objectif {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px 34px;
  border-radius: var(--mv-rayon);
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 44px -28px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  transition:
    transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 460ms ease,
    border-color 460ms ease,
    box-shadow 460ms ease;
}

/* Filet d'accent en tete de carte. */
.mv-objectif::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 2;
}

/* Voile diagonal qui balaie la carte au survol. */
.mv-objectif::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 58%);
  transform: translateX(-70%);
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mv-objectif:hover,
.mv-objectif:focus-within {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 30px 56px -28px rgba(0, 0, 0, 0.78);
}
.mv-objectif:hover::before,
.mv-objectif:focus-within::before { transform: scaleX(1); }
.mv-objectif:hover::after,
.mv-objectif:focus-within::after { transform: translateX(70%); }

/* Pictogramme : meme famille, un dessin par objectif. */
.mv-objectif__ico { position: relative; display: block; width: 40px; height: 40px; }
.mv-objectif__ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mv-objectif__ico .mv-trace {
  fill: none;
  stroke: #58d3cf;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke 460ms ease;
}
.mv-objectif:hover .mv-objectif__ico .mv-trace,
.mv-objectif:focus-within .mv-objectif__ico .mv-trace {
  stroke: var(--mv-or);
  animation: mv-tracer 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-objectif:hover .mv-objectif__ico .mv-trace:nth-child(2) { animation-delay: 70ms; }
.mv-objectif:hover .mv-objectif__ico .mv-trace:nth-child(3) { animation-delay: 140ms; }
.mv-objectif:hover .mv-objectif__ico .mv-trace:nth-child(4) { animation-delay: 210ms; }

.mv-page .mv-objectif h3 {
  position: relative;
  font-family: var(--mv-titre);
  font-size: 20px;
  line-height: 27px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #ffffff;
  margin: 2px 0 0;
}

.mv-objectif p {
  position: relative;
  font-family: var(--mv-corps);
  font-size: 16px;
  line-height: 26px;
  color: #c2cad4;
  margin: 0;
}

/* Appel a l'action de fin de section. */
.mv-objectifs__pied {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-block-start: 48px;
  padding-block-start: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.mv-objectifs__relance {
  font-family: var(--mv-titre);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #ffffff;
  margin: 0;
  margin-inline-end: auto;
}

@media (prefers-reduced-motion: reduce) {
  .mv-objectif, .mv-objectif::before, .mv-objectif::after,
  .mv-objectif__ico .mv-trace { transition: none; }
  .mv-objectif:hover { transform: none; }
  .mv-objectif:hover .mv-objectif__ico .mv-trace { animation: none; }
}

@media (max-width: 1100px) {
  .mv-objectifs__entete { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .mv-objectifs__chapo { padding-block-start: 0; }
  .mv-objectifs__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv-objectifs__inner { padding-block: 76px; }
}
@media (max-width: 640px) {
  .mv-objectifs__inner { padding-block: 60px; }
  .mv-objectifs__grille { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-block-start: 40px; }
  .mv-objectif { padding: 26px 22px 28px; }
  .mv-objectifs__chapo p { font-size: 17px; line-height: 28px; }
  .mv-objectifs__relance { font-size: 20px; line-height: 28px; }
}

/* ---------- Section 4 : nos offres d'accompagnement ----------
   Surface claire apres la photo voilee des objectifs : l'alternance porte
   le rythme. Deux panneaux Mensuel et Annuel derriere un commutateur en
   pilule ; sans JavaScript le commutateur reste cache et les deux panneaux
   s'affichent l'un sous l'autre avec leur legende : aucun contenu invisible.
   La carte centrale, seule offre a prix affiche, passe en bande sombre :
   c'est la hierarchie, pas de la decoration. */

.mv-offres { background: #f4f7f7; }

.mv-offres__inner {
  padding-block: 104px;
  padding-inline: 0;
}
@media (max-width: 1320px) { .mv-offres__inner { padding-inline: 20px; } }

/* Neutralisation des marges du coeur, ecrite avec les conteneurs. */
.mv-offres__inner > *,
.mv-offres__entete > *,
.mv-offres__texte > *,
.mv-offres__chapo > *,
.mv-offres__commande > *,
.mv-offres__panneau > *,
.mv-offres__grille > *,
.mv-offre > *,
.mv-offre__prix > * {
  margin-block: 0;
}

.mv-offres__entete {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  column-gap: 88px;
  align-items: start;
}

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

.mv-page .mv-offres__texte h2 {
  font-family: var(--mv-titre);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.8125rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #10151c;
  margin: 0;
  text-wrap: balance;
}

.mv-offres__chapo { padding-block-start: 8px; }
.mv-offres__chapo p {
  font-family: var(--mv-corps);
  font-size: 18px;
  line-height: 30px;
  color: #454c56;
  margin: 0;
}

/* ---- Le commutateur Mensuel / Annuel ----
   Cache tant que le script n'est pas monte : sans onglets, il ne commande
   rien et mentirait. */

.mv-offres__commande { display: none; }
html.mv-onglets .mv-offres__commande {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-block-start: 44px;
}

.mv-offres__nav {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  background: #ffffff;
  border: 1px solid rgba(16, 21, 28, 0.12);
  border-radius: var(--mv-rayon);
  box-shadow: 0 10px 24px -20px rgba(16, 21, 28, 0.4);
}

.mv-offres__nav .mv-offres__onglet {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 0 30px;
  border: 0;
  background: transparent;
  border-radius: calc(var(--mv-rayon) - 2px);
  font-family: var(--mv-corps);
  font-size: 15px;
  font-weight: 700;
  color: #454c56;
  cursor: pointer;
  transition: color 260ms ease;
}
.mv-offres__nav .mv-offres__onglet[aria-selected="true"] {
  color: #ffffff;
  background: #10151c;
}
.mv-offres__nav .mv-offres__onglet:focus-visible {
  outline: 2px solid var(--mv-teal);
  outline-offset: 2px;
}

/* Indicateur coulissant quand :has est disponible ; a defaut, le fond du
   bouton selectionne ci-dessus assure l'etat visible. */
@supports selector(:has(*)) {
  .mv-offres__nav .mv-offres__onglet[aria-selected="true"] { background: transparent; }
  .mv-offres__nav::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: calc(var(--mv-rayon) - 2px);
    background: #10151c;
    transition: transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .mv-offres__nav:has(.mv-offres__onglet:last-child[aria-selected="true"])::before {
    transform: translateX(100%);
  }
}

.mv-offres__note {
  font-family: var(--mv-corps);
  font-size: 15px;
  line-height: 22px;
  color: #545b65;
  margin: 0;
}
.mv-offres__note strong {
  font-weight: 700;
  color: var(--mv-teal-texte);
}

/* ---- Les panneaux ---- */

.mv-offres__panneau { margin-block-start: 56px; }
html.mv-onglets .mv-offres__panneau { margin-block-start: 36px; }
html.mv-onglets .mv-offres__panneau[hidden] { display: none; }

/* Legende de secours sans JavaScript ; le commutateur la remplace. */
.mv-offres__legende {
  font-family: var(--mv-corps);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #667085;
  margin: 0 0 22px;
}
html.mv-onglets .mv-offres__legende { display: none; }

.mv-offres__panneau.est-entrant { animation: mv-panneau-entree 420ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes mv-panneau-entree {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.mv-offres__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* ---- Les cartes d'offre ---- */

.mv-offre {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 30px;
  border-radius: var(--mv-rayon);
  background: #ffffff;
  border: 1px solid rgba(16, 21, 28, 0.08);
  box-shadow: 0 18px 40px -30px rgba(16, 21, 28, 0.28);
  overflow: hidden;
  transition:
    transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 460ms ease,
    box-shadow 460ms ease;
}

/* Filet d'accent qui se trace en tete de carte : meme geste que partout. */
.mv-offre::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 2;
}

.mv-offre:hover,
.mv-offre:focus-within {
  transform: translateY(-6px);
  border-color: rgba(16, 21, 28, 0.14);
  box-shadow: 0 30px 54px -30px rgba(16, 21, 28, 0.35);
}
.mv-offre:hover::before,
.mv-offre:focus-within::before { transform: scaleX(1); }

/* La carte sombre : halo discret comme la bande des atouts, et un voile
   diagonal au survol, invisible sur les cartes blanches donc reserve ici. */
.mv-offre--sombre {
  background:
    radial-gradient(58% 70% at 10% 0%, rgba(37, 156, 153, 0.16) 0%, rgba(19, 25, 32, 0) 62%),
    radial-gradient(46% 60% at 96% 100%, rgba(217, 178, 75, 0.10) 0%, rgba(19, 25, 32, 0) 60%),
    #131920;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 48px -30px rgba(16, 21, 28, 0.55);
}
.mv-offre--sombre:hover,
.mv-offre--sombre:focus-within { border-color: rgba(255, 255, 255, 0.16); }

.mv-offre--sombre::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 58%);
  transform: translateX(-70%);
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-offre--sombre:hover::after,
.mv-offre--sombre:focus-within::after { transform: translateX(70%); }

/* Pictogramme : meme famille, un dessin par offre. */
.mv-offre__ico { display: block; width: 40px; height: 40px; margin-block-end: 18px; }
.mv-offre__ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mv-offre__ico .mv-trace {
  fill: none;
  stroke: var(--mv-teal);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke 460ms ease;
}
.mv-offre--sombre .mv-offre__ico .mv-trace { stroke: #58d3cf; }
.mv-offre:hover .mv-offre__ico .mv-trace,
.mv-offre:focus-within .mv-offre__ico .mv-trace {
  stroke: var(--mv-or);
  animation: mv-tracer 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-offre:hover .mv-offre__ico .mv-trace:nth-child(2) { animation-delay: 70ms; }
.mv-offre:hover .mv-offre__ico .mv-trace:nth-child(3) { animation-delay: 140ms; }
.mv-offre:hover .mv-offre__ico .mv-trace:nth-child(4) { animation-delay: 210ms; }

.mv-page .mv-offre h3 {
  font-family: var(--mv-titre);
  font-size: 22px;
  line-height: 30px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #10151c;
  margin: 0 0 8px;
}
.mv-page .mv-offre--sombre h3 { color: #ffffff; }

.mv-offre__desc {
  font-family: var(--mv-corps);
  font-size: 16px;
  line-height: 26px;
  color: #545b65;
  margin: 0;
}
.mv-offre--sombre .mv-offre__desc { color: #a8b1bd; }

/* Pastille d'economie des formules annuelles, hors du flux pour que les
   trois cartes gardent des zones de prix alignees. */
.mv-offre__eco {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  font-family: var(--mv-corps);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  color: #7a5c14;
  background: rgba(217, 178, 75, 0.16);
  border: 1px solid rgba(217, 178, 75, 0.38);
  border-radius: var(--mv-rayon);
  padding: 7px 11px;
  margin: 0;
}
.mv-offre--sombre .mv-offre__eco {
  color: #ecd9a8;
  background: rgba(217, 178, 75, 0.14);
  border-color: rgba(217, 178, 75, 0.32);
}

/* ---- La zone de prix ----
   Hauteur plancher commune : les listes demarrent a la meme ligne sur les
   trois cartes, que l'offre affiche un montant ou un devis. */
.mv-offre__prix {
  margin-block-start: 24px;
  padding-block-start: 22px;
  border-top: 1px solid rgba(16, 21, 28, 0.1);
  min-height: 112px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.mv-offre--sombre .mv-offre__prix { border-top-color: rgba(255, 255, 255, 0.12); }

/* Cartes a devis : le libelle se cale au milieu du bloc de prix, ENTRE les
   deux filets. Le bloc percu fait 112px de zone + 24px de marge avant la
   liste : les 24px de remplissage haut compensent, sans quoi le texte
   flotte 12px trop haut. Ferre a gauche comme le reste de la carte.
   Sans :has, l'etat anterieur (texte en haut) reste correct. */
.mv-offre__prix:has(.mv-offre__montant--devis) {
  padding-block-start: 24px;
  justify-content: center;
}

.mv-offre__prix-intro {
  font-family: var(--mv-corps);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #667085;
  margin: 0 0 8px;
}
.mv-offre--sombre .mv-offre__prix-intro { color: #8994a2; }

.mv-offre__montant {
  font-family: var(--mv-titre);
  font-size: 34px;
  line-height: 40px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #10151c;
  margin: 0;
}
.mv-offre--sombre .mv-offre__montant { color: #ffffff; }

.mv-offre__montant--devis {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.01em;
}

.mv-offre__periode {
  font-family: var(--mv-corps);
  font-size: 15px;
  line-height: 22px;
  color: #667085;
  margin: 4px 0 0;
}
.mv-offre--sombre .mv-offre__periode { color: #8994a2; }

/* ---- La liste des prestations ---- */

.mv-offre__liste {
  list-style: none;
  margin: 24px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(16, 21, 28, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mv-offre--sombre .mv-offre__liste { border-top-color: rgba(255, 255, 255, 0.12); }

.mv-offre__liste li {
  position: relative;
  padding-inline-start: 30px;
  font-family: var(--mv-corps);
  font-size: 16px;
  line-height: 25px;
  color: #545b65;
  margin: 0;
}
.mv-offre--sombre .mv-offre__liste li { color: #c2cad4; }

.mv-offre__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 17px;
  height: 17px;
  background: var(--mv-teal-texte);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 12.8l4.6 4.6L19.4 7.2' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 12.8l4.6 4.6L19.4 7.2' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mv-offre--sombre .mv-offre__liste li::before { background: #58d3cf; }

/* ---- Le bouton, cale en pied de carte ---- */

.mv-offre .wp-block-buttons {
  margin-block-start: auto;
  padding-block-start: 28px;
}
.mv-offre .wp-block-button { width: 100%; }
.mv-offre .wp-block-button__link {
  width: 100%;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .mv-offre, .mv-offre::before, .mv-offre--sombre::after,
  .mv-offre__ico .mv-trace, .mv-offres__onglet, .mv-offres__nav::before { transition: none; }
  .mv-offre:hover { transform: none; }
  .mv-offre:hover .mv-offre__ico .mv-trace { animation: none; }
  .mv-offres__panneau.est-entrant { animation: none; }
}

@media (max-width: 1100px) {
  .mv-offres__inner { padding-block: 76px; }
  .mv-offres__entete { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .mv-offres__chapo { padding-block-start: 0; }
  html.mv-onglets .mv-offres__commande { margin-block-start: 36px; }
  .mv-offres__grille { grid-template-columns: minmax(0, 1fr); }
  .mv-offre__prix { min-height: 0; }
}
@media (max-width: 640px) {
  .mv-offres__inner { padding-block: 60px; }
  .mv-offres__panneau { margin-block-start: 44px; }
  html.mv-onglets .mv-offres__panneau { margin-block-start: 28px; }
  .mv-offres__commande { align-items: stretch; }
  html.mv-onglets .mv-offres__commande { margin-block-start: 30px; }
  .mv-offres__nav { width: 100%; }
  .mv-offres__nav .mv-offres__onglet { padding: 0 12px; }
  .mv-offres__grille { gap: 14px; }
  .mv-offre { padding: 26px 22px 24px; }
  .mv-offre__montant { font-size: 30px; line-height: 36px; }
  .mv-offres__chapo p { font-size: 17px; line-height: 28px; }
  .mv-offre__eco { top: 16px; right: 16px; }
}

/* ---------- Section 5 : la methode S.C.A.L.E ----------
   Bande sombre signature. A gauche, l'acronyme empile en tres grand,
   dessine en contour ; la lettre s'allume en or quand son etape entre
   dans la bande de lecture, et un rail degrade teal vers or se remplit
   au fil du defilement : l'echelle au sens propre. Les lettres sont
   decoratives (aria-hidden), le contenu reel vit dans les rangees ;
   sans JavaScript, contours statiques, rien n'est perdu. */

.mv-methode {
  position: relative;
  background: #131920;
  overflow: hidden;
}
/* Halo en miroir de la bande des atouts : teal en haut droit, or en bas
   gauche, pour que les deux bandes sombres ne se confondent pas. */
.mv-methode::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 70% at 92% 0%, rgba(37, 156, 153, 0.15) 0%, rgba(19, 25, 32, 0) 62%),
    radial-gradient(46% 60% at 4% 100%, rgba(217, 178, 75, 0.09) 0%, rgba(19, 25, 32, 0) 60%);
}

.mv-methode__inner {
  position: relative;
  padding-block: 104px;
  padding-inline: 0;
}
@media (max-width: 1320px) { .mv-methode__inner { padding-inline: 20px; } }

/* Neutralisation des marges du coeur, ecrite avec les conteneurs. */
.mv-methode__inner > *,
.mv-methode__entete > *,
.mv-methode__texte > *,
.mv-methode__chapo > *,
.mv-methode__corps > *,
.mv-methode__deroule > *,
.mv-methode__intro > *,
.mv-methode__etapes > *,
.mv-etape > * {
  margin-block: 0;
}

.mv-methode__entete {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  column-gap: 88px;
  align-items: start;
}

.mv-methode__sur {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mv-corps);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #58d3cf;
  margin: 0 0 26px;
}
.mv-methode__sur::before {
  content: "";
  width: 32px;
  height: 2px;
  flex: none;
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
}

.mv-page .mv-methode__texte h2 {
  font-family: var(--mv-titre);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.8125rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0;
  text-wrap: balance;
}
/* Le seul accent de couleur du titre : le sigle. */
.mv-methode__sigle { color: var(--mv-or); font-weight: 900; }

.mv-methode__chapo { padding-block-start: 8px; }
.mv-methode__chapo p {
  font-family: var(--mv-corps);
  font-size: 18px;
  line-height: 30px;
  color: #c8d0da;
  margin: 0;
}
.mv-methode__chapo strong { font-weight: 700; color: #e8edf3; }

/* ---- Le corps : pile de lettres collante + deroule des etapes ---- */

.mv-methode__corps {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  column-gap: 88px;
  align-items: start;
  margin-block-start: 64px;
}

.mv-methode__pile {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  user-select: none;
}
.mv-methode__pile span {
  font-family: var(--mv-titre);
  font-size: clamp(64px, 5rem + 1vw, 96px);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.38);
  transition: color 420ms ease, -webkit-text-stroke-color 420ms ease;
}
.mv-methode__pile span.est-active {
  color: var(--mv-or);
  -webkit-text-stroke-color: transparent;
}

.mv-methode__intro { max-width: 640px; margin-block-end: 40px; }
.mv-page .mv-methode__intro h3 {
  font-family: var(--mv-titre);
  font-size: 21px;
  line-height: 29px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #ffffff;
  margin: 0 0 12px;
}
.mv-methode__intro p {
  font-family: var(--mv-corps);
  font-size: 17px;
  line-height: 28px;
  color: #c2cad4;
  margin: 0;
}
.mv-methode__intro strong { font-weight: 700; color: #e8edf3; }

/* ---- Les cinq etapes, sur un rail qui se remplit ---- */

.mv-methode__etapes {
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.mv-methode__etapes::before {
  content: "";
  position: absolute;
  left: -1.5px;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, var(--mv-teal), var(--mv-or));
  transform: scaleY(var(--mv-rail, 0));
  transform-origin: top;
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mv-etape {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  column-gap: 28px;
  align-items: start;
  padding: 26px 0 26px 36px;
}
.mv-etape + .mv-etape { border-top: 1px solid rgba(255, 255, 255, 0.10); }

/* La lettre par rangee ne sert que lorsque la pile est masquee. */
.mv-etape__lettre { display: none; }

.mv-page .mv-etape__mot {
  font-family: var(--mv-titre);
  font-size: 21px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #ffffff;
  margin: 0;
}
/* La rime typographique : l'initiale du mot repond a la lettre allumee. */
.mv-etape__initiale { color: var(--mv-or); }

.mv-etape__desc {
  font-family: var(--mv-corps);
  font-size: 16px;
  line-height: 26px;
  color: #c2cad4;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mv-methode__pile span { transition: none; }
  .mv-methode__etapes::before { transition: none; }
}

@media (max-width: 1100px) {
  .mv-methode__inner { padding-block: 76px; }
  .mv-methode__entete { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .mv-methode__chapo { padding-block-start: 0; }
  .mv-methode__corps { grid-template-columns: minmax(0, 1fr); margin-block-start: 48px; }
  /* La pile geante cede la place a la lettre portee par chaque rangee. */
  .mv-methode__pile { display: none; }
  .mv-etape {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 6px;
    padding: 22px 0 22px 28px;
  }
  .mv-etape__lettre {
    display: block;
    grid-row: 1 / 3;
    font-family: var(--mv-titre);
    font-size: 32px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--mv-or);
    padding-block-start: 2px;
  }
  .mv-etape__mot, .mv-etape__desc { grid-column: 2; }
}
@media (max-width: 640px) {
  .mv-methode__inner { padding-block: 60px; }
  .mv-methode__corps { margin-block-start: 40px; }
  .mv-methode__chapo p { font-size: 17px; line-height: 28px; }
  .mv-etape { padding: 20px 0 20px 22px; }
}

/* ---------- Section 6 : quelques cas clients (v2 bento immersif) ----------
   Boucle de requete native inchangee ; le gabarit passe en tuiles
   immersives facon produit tech : image pleine tuile sous un voile
   degrade, pastille de verre pour la categorie, grille bento ou la
   premiere etude occupe deux rangees. Le motif se repete par nth-child :
   il tiendra tout seul quand la boucle grandira. Pas de chiffres en
   avant : les resultats des etudes sont qualitatifs, rien n'est invente. */

.mv-cas-clients { background: #ffffff; }

.mv-cas-clients__inner {
  padding-block: 104px;
  padding-inline: 0;
}
@media (max-width: 1320px) { .mv-cas-clients__inner { padding-inline: 20px; } }

/* Neutralisation des marges du coeur, ecrite avec les conteneurs. */
.mv-cas-clients__inner > *,
.mv-cas-clients__entete > *,
.mv-cas-clients__texte > *,
.mv-cas-clients__lien > *,
.mv-cas .mv-cas__grille > *,
.mv-tuile-cas > *,
.mv-tuile-cas__corps > *,
.mv-tuile-cas__bas > * {
  margin-block: 0;
}

.mv-cas-clients__entete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 48px;
  align-items: end;
}

.mv-cas-clients__sur {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mv-corps);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mv-teal-texte);
  margin: 0 0 26px;
}
.mv-cas-clients__sur::before {
  content: "";
  width: 32px;
  height: 2px;
  flex: none;
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
}

.mv-page .mv-cas-clients__texte h2 {
  font-family: var(--mv-titre);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.8125rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #10151c;
  margin: 0;
  text-wrap: balance;
}

.mv-cas-clients__lien { padding-block-end: 6px; }
.mv-cas-clients__tous { margin: 0; }
.mv-cas-clients .mv-cas-clients__tous a {
  /* cible tactile de 44px sans changer le rendu : remplissage compense */
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  font-family: var(--mv-corps);
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var(--mv-teal-texte);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 260ms ease;
}
.mv-cas-clients .mv-cas-clients__tous a:hover { color: #c79f3c; }

/* ---- La grille bento ----
   La premiere tuile de chaque groupe de trois occupe deux rangees ;
   grid-auto-flow dense comble sans trou quand la boucle s'allonge. */

.mv-cas .mv-cas__grille {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-auto-rows: 300px;
  grid-auto-flow: dense;
  gap: 20px;
}
.mv-cas .mv-cas__grille > li { min-width: 0; display: flex; }
.mv-cas .mv-cas__grille > li:nth-child(3n + 1) { grid-row: span 2; }

/* Cascade sans data-rang : le gabarit de boucle est identique pour chaque
   carte, le decalage vient donc des positions. */
.mv-cas .mv-cas__grille > li:nth-child(2) .mv-revele { transition-delay: 80ms; }
.mv-cas .mv-cas__grille > li:nth-child(3) .mv-revele { transition-delay: 160ms; }

/* ---- La tuile immersive ---- */

.mv-tuile-cas {
  position: relative;
  display: flex;
  width: 100%;
  border-radius: var(--mv-rayon);
  background: #131920;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 24px 48px -30px rgba(16, 21, 28, 0.5);
  transition:
    transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 460ms ease;
}
.mv-tuile-cas:hover,
.mv-tuile-cas:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 34px 60px -30px rgba(16, 21, 28, 0.6);
}

/* Filet signature au sommet. */
.mv-tuile-cas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 3;
}
.mv-tuile-cas:hover::before,
.mv-tuile-cas:focus-within::before { transform: scaleX(1); }

/* Renfort de lisibilite pendant le zoom de l'image. */
.mv-tuile-cas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 18, 25, 0) 30%, rgba(13, 18, 25, 0.42) 100%);
  opacity: 0;
  transition: opacity 460ms ease;
}
.mv-tuile-cas:hover::after,
.mv-tuile-cas:focus-within::after { opacity: 1; }

/* L'image occupe toute la tuile ; le voile assure la lecture. */
.mv-tuile-cas__image {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.mv-tuile-cas__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-tuile-cas:hover .mv-tuile-cas__image img,
.mv-tuile-cas:focus-within .mv-tuile-cas__image img { transform: scale(1.05); }
.mv-tuile-cas__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 12% 0%, rgba(37, 156, 153, 0.16) 0%, rgba(13, 18, 25, 0) 58%),
    linear-gradient(180deg, rgba(13, 18, 25, 0.16) 0%, rgba(13, 18, 25, 0.52) 48%, rgba(13, 18, 25, 0.92) 100%);
}

.mv-tuile-cas__corps {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  padding: 22px 26px 24px;
  gap: 18px;
}

/* Pastille de verre : lisible sur toute photo, claire ou sombre. */
.mv-tuile-cas__type { margin: 0; align-self: flex-start; }
.mv-tuile-cas .mv-tuile-cas__type,
.mv-tuile-cas .mv-tuile-cas__type a {
  font-family: var(--mv-corps);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
}
.mv-tuile-cas .mv-tuile-cas__type {
  display: inline-flex;
  padding: 9px 13px;
  border-radius: var(--mv-rayon);
  background: rgba(13, 18, 25, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
/* cible tactile etendue, remplissage compense */
.mv-tuile-cas .mv-tuile-cas__type a { display: inline-block; padding-block: 17px; margin-block: -17px; }
.mv-tuile-cas .mv-tuile-cas__type a:hover { text-decoration: underline; text-underline-offset: 3px; }

.mv-tuile-cas__bas { display: flex; flex-direction: column; gap: 10px; }

.mv-page .mv-tuile-cas__titre {
  font-family: var(--mv-titre);
  font-size: 20px;
  line-height: 27px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #ffffff;
  margin: 0;
}
.mv-page .mv-tuile-cas__titre a { color: inherit; text-decoration: none; }

/* La grande tuile parle plus fort. */
.mv-cas .mv-cas__grille > li:nth-child(3n + 1) .mv-tuile-cas__titre {
  font-size: clamp(22px, 1.1rem + 0.9vw, 28px);
  line-height: 1.22;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.mv-tuile-cas__extrait { margin: 0; }
.mv-tuile-cas__extrait p {
  font-family: var(--mv-corps);
  font-size: 15.5px;
  line-height: 25px;
  color: #dde3eb;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mv-cas .mv-cas__grille > li:nth-child(3n + 1) .mv-tuile-cas__extrait p { -webkit-line-clamp: 3; }

.mv-tuile-cas__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mv-corps);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  color: var(--mv-or);
}
.mv-tuile-cas__action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-tuile-cas:hover .mv-tuile-cas__action svg { transform: translateX(4px); }

/* ---- Charger plus : n'apparait que s'il existe une page suivante ---- */

.mv-cas .mv-cas__pagination {
  margin-block-start: 44px;
  display: flex;
  justify-content: center;
}
.mv-cas .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 30px;
  border: 1px solid rgba(16, 21, 28, 0.18);
  border-radius: var(--mv-rayon);
  background: transparent;
  font-family: var(--mv-corps);
  font-size: 16px;
  font-weight: 700;
  color: #10151c;
  text-decoration: none;
  transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease;
}
.mv-cas .wp-block-query-pagination-next:hover {
  background: #10151c;
  border-color: #10151c;
  color: #ffffff;
}
.mv-cas .wp-block-query-pagination-next[aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mv-tuile-cas, .mv-tuile-cas::before, .mv-tuile-cas::after,
  .mv-tuile-cas__image img, .mv-tuile-cas__action svg { transition: none; }
  .mv-tuile-cas:hover { transform: none; }
  .mv-tuile-cas:hover .mv-tuile-cas__image img { transform: none; }
}

@media (max-width: 1100px) {
  .mv-cas-clients__inner { padding-block: 76px; }
  .mv-cas .mv-cas__grille {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 340px;
    margin-block-start: 44px;
  }
  .mv-cas .mv-cas__grille > li:nth-child(3n + 1) { grid-row: auto; }
}
@media (max-width: 640px) {
  .mv-cas-clients__inner { padding-block: 60px; }
  .mv-cas-clients__entete { grid-template-columns: minmax(0, 1fr); row-gap: 16px; align-items: start; }
  .mv-cas-clients__lien { padding-block-end: 0; }
  .mv-cas .mv-cas__grille { gap: 14px; grid-auto-rows: 320px; margin-block-start: 36px; }
  .mv-tuile-cas__corps { padding: 18px 20px 20px; }
  .mv-cas .mv-cas__pagination { margin-block-start: 32px; }
}

/* ---------- Section 7 : appel a l'action ----------
   Premiere et unique bande TEAL de la page, reservee a l'action, comme en
   production. Teal profond #1a7573 et non le teal de marque : le blanc y
   tient 5,3 de contraste (3,34 seulement sur #259C99). Les halos sont
   places loin du texte courant pour ne pas eroder le ratio. Bandeau
   asymetrique : texte a gauche, bouton blanc a droite. */

.mv-cta {
  position: relative;
  background: #1a7573;
  overflow: hidden;
}
.mv-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 78% at 90% 8%, rgba(69, 199, 195, 0.20) 0%, rgba(26, 117, 115, 0) 60%),
    radial-gradient(40% 60% at 6% 100%, rgba(217, 178, 75, 0.10) 0%, rgba(26, 117, 115, 0) 58%);
}

.mv-cta__inner {
  position: relative;
  padding-block: 88px;
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 64px;
  align-items: center;
}
@media (max-width: 1320px) { .mv-cta__inner { padding-inline: 20px; } }

/* Neutralisation des marges du coeur, ecrite avec les conteneurs. */
.mv-cta__inner > *,
.mv-cta__texte > *,
.mv-cta__action > * {
  margin-block: 0;
}

.mv-page .mv-cta__texte h2 {
  font-family: var(--mv-titre);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 14px;
  text-wrap: balance;
  max-width: 21em;
}
.mv-cta__texte p {
  font-family: var(--mv-corps);
  font-size: 18px;
  line-height: 29px;
  color: #ffffff;
  margin: 0;
  max-width: 38em;
}

/* Bouton blanc sur la bande teal : encre dessus, picto action en masque. */
.mv-btn-blanc .wp-block-button__link {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #10151c;
  font-size: 16px;
  font-weight: 700;
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 260ms ease, background-color 260ms ease;
}
.mv-btn-blanc .wp-block-button__link::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("/wp-content/uploads/2025/09/action.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2025/09/action.svg") center / contain no-repeat;
}
.mv-btn-blanc .wp-block-button__link:hover {
  background: #f4f7f7;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -18px rgba(13, 18, 25, 0.55);
}

@media (max-width: 1100px) {
  .mv-cta__inner { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding-block: 72px; }
}
@media (max-width: 640px) {
  .mv-cta__inner { padding-block: 60px; }
  .mv-cta__texte p { font-size: 17px; line-height: 28px; }
  .mv-btn-blanc { width: 100%; }
  .mv-btn-blanc .wp-block-button__link { width: 100%; justify-content: center; }
}

/* ---------- Section 8 : la fondatrice ----------
   Portrait detoure pose sur une plaque sombre dont il deborde par le haut :
   la profondeur vient du chevauchement, pas d'un decor. A droite, un
   editorial sobre ferme sur la conviction en exergue. */

.mv-fondatrice { background: #f4f7f7; }

.mv-fondatrice__inner {
  padding-block: 104px;
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  column-gap: 88px;
  align-items: center;
}
@media (max-width: 1320px) { .mv-fondatrice__inner { padding-inline: 20px; } }

/* Neutralisation des marges du coeur, ecrite avec les conteneurs. */
.mv-fondatrice__inner > *,
.mv-fondatrice__portrait > *,
.mv-fondatrice__texte > * {
  margin-block: 0;
}

/* L'espace du debord est reserve par le conteneur : rien ne se rogne. */
.mv-fondatrice__portrait { padding-block-start: 44px; }
.mv-fondatrice__photo {
  position: relative;
  /* flow-root : sans lui, la marge negative de l'image FUSIONNE avec le
     haut de la figure et la plaque monte avec la photo (margin collapse). */
  display: flow-root;
  margin: 0;
  border-radius: var(--mv-rayon);
  background:
    radial-gradient(64% 70% at 12% 0%, rgba(37, 156, 153, 0.20) 0%, rgba(19, 25, 32, 0) 60%),
    radial-gradient(50% 60% at 94% 100%, rgba(217, 178, 75, 0.12) 0%, rgba(19, 25, 32, 0) 58%),
    #131920;
  padding: 0 26px;
}
/* Filet signature au bas de la plaque. */
.mv-fondatrice__photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
  border-radius: 0 0 var(--mv-rayon) var(--mv-rayon);
}
.mv-fondatrice__photo img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -44px;
  filter: drop-shadow(0 22px 30px rgba(13, 18, 25, 0.34));
}

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

.mv-page .mv-fondatrice__texte h2 {
  font-family: var(--mv-titre);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.8125rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #10151c;
  margin: 0 0 8px;
}

.mv-fondatrice__role {
  font-family: var(--mv-corps);
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: var(--mv-teal-texte);
  margin: 0 0 24px;
}

.mv-fondatrice__texte > p {
  font-family: var(--mv-corps);
  font-size: 17px;
  line-height: 29px;
  color: #454c56;
}
.mv-fondatrice__texte > p + p { margin-block-start: 14px; }

/* La conviction, en exergue : filet degrade et voix pleine. */
.mv-fondatrice__texte > .mv-fondatrice__exergue {
  margin-block-start: 26px;
  padding: 4px 0 4px 22px;
  border-left: 3px solid;
  border-image: linear-gradient(180deg, var(--mv-teal), var(--mv-or)) 1;
  font-family: var(--mv-titre);
  font-size: 19px;
  line-height: 30px;
  color: #10151c;
}
.mv-fondatrice__exergue strong { font-weight: 700; }

@media (max-width: 1100px) {
  .mv-fondatrice__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
    padding-block: 76px;
  }
  .mv-fondatrice__portrait { max-width: 400px; }
}
@media (max-width: 640px) {
  .mv-fondatrice__inner { padding-block: 60px; row-gap: 40px; }
  .mv-fondatrice__photo { padding: 0 18px; }
  .mv-fondatrice__texte > p { font-size: 16.5px; line-height: 28px; }
  .mv-fondatrice__texte > .mv-fondatrice__exergue { font-size: 18px; line-height: 28px; }
}

/* ---------- Section 9 : faisons le point (prise de rendez-vous) ----------
   Bande sombre : la production la fait teal, mais notre bande teal d'appel
   a l'action vit deux sections plus haut, le doublon est evite. Le
   calendrier est un visuel cliquable vers la prise de rendez-vous. */

.mv-rdv {
  position: relative;
  background: #131920;
  overflow: hidden;
}
.mv-rdv::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(56% 72% at 6% 0%, rgba(37, 156, 153, 0.15) 0%, rgba(19, 25, 32, 0) 60%),
    radial-gradient(44% 60% at 96% 100%, rgba(217, 178, 75, 0.09) 0%, rgba(19, 25, 32, 0) 58%);
}

.mv-rdv__inner {
  position: relative;
  padding-block: 96px;
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  column-gap: 88px;
  align-items: center;
}
@media (max-width: 1320px) { .mv-rdv__inner { padding-inline: 20px; } }

/* Neutralisation des marges du coeur, ecrite avec les conteneurs. */
.mv-rdv__inner > *,
.mv-rdv__texte > *,
.mv-rdv__visuel > * {
  margin-block: 0;
}

.mv-rdv__sur {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mv-corps);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #58d3cf;
  margin: 0 0 26px;
}
.mv-rdv__sur::before {
  content: "";
  width: 32px;
  height: 2px;
  flex: none;
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
}

.mv-page .mv-rdv__texte h2 {
  font-family: var(--mv-titre);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.8125rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 16px;
  text-wrap: balance;
}
.mv-rdv__texte > p:not(.mv-rdv__sur) {
  font-family: var(--mv-corps);
  font-size: 17px;
  line-height: 29px;
  color: #c2cad4;
  margin: 0 0 28px;
  max-width: 34em;
}

/* Le calendrier, presente comme une fenetre cliquable. */
.mv-rdv__calendrier {
  margin: 0;
  border-radius: var(--mv-rayon);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 56px -30px rgba(0, 0, 0, 0.7);
  transition: transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 460ms ease;
}
.mv-rdv__calendrier a { display: block; }
.mv-rdv__calendrier img { display: block; width: 100%; height: auto; }
.mv-rdv__visuel:hover .mv-rdv__calendrier,
.mv-rdv__visuel:focus-within .mv-rdv__calendrier {
  transform: translateY(-6px);
  box-shadow: 0 40px 66px -30px rgba(0, 0, 0, 0.78);
}

@media (max-width: 1100px) {
  .mv-rdv__inner { grid-template-columns: minmax(0, 1fr); row-gap: 44px; padding-block: 76px; }
  .mv-rdv__visuel { max-width: 520px; }
}
@media (max-width: 640px) {
  .mv-rdv__inner { padding-block: 60px; row-gap: 36px; }
  .mv-rdv__texte > p:not(.mv-rdv__sur) { font-size: 16.5px; line-height: 28px; }
}

/* ---------- Section 10 : avis Google ----------
   Le widget Trustindex garde ses styles propres ; la section lui donne un
   en-tete maison et de l'air. */

.mv-avis { background: #f4f7f7; }

.mv-avis__inner {
  padding-block: 104px;
  padding-inline: 0;
}
@media (max-width: 1320px) { .mv-avis__inner { padding-inline: 20px; } }

/* Neutralisation des marges du coeur, ecrite avec les conteneurs. */
.mv-avis__inner > *,
.mv-avis__texte > * {
  margin-block: 0;
}

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

.mv-page .mv-avis__texte h2 {
  font-family: var(--mv-titre);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.8125rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #10151c;
  margin: 0;
  text-wrap: balance;
  max-width: 18em;
}

.mv-avis__widget { margin-block-start: 44px; }

@media (max-width: 1100px) {
  .mv-avis__inner { padding-block: 76px; }
  .mv-avis__widget { margin-block-start: 36px; }
}
@media (max-width: 640px) {
  .mv-avis__inner { padding-block: 60px; }
  .mv-avis__widget { margin-block-start: 30px; }
}

/* ---------- Section 11 : nos conseils ----------
   Boucle d'articles en carrousel par DEFILEMENT NATIF : la piste est un
   simple conteneur a scroll-snap, les fleches ne font que la faire glisser
   d'une vue. Sans script : molette, doigt et clavier defilent deja, les
   fleches restent cachees. */

.mv-conseils { background: #ffffff; }

.mv-conseils__inner {
  padding-block: 104px;
  padding-inline: 0;
}
@media (max-width: 1320px) { .mv-conseils__inner { padding-inline: 20px; } }

/* Neutralisation des marges du coeur, ecrite avec les conteneurs. */
.mv-conseils__inner > *,
.mv-conseils__entete > *,
.mv-conseils__texte > *,
.mv-conseils__lien > *,
.mv-conseils__piste > *,
.mv-carte-article > *,
.mv-carte-article__corps > *,
.mv-conseils__cmdes > * {
  margin-block: 0;
}

.mv-conseils__entete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 48px;
  align-items: end;
}

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

.mv-page .mv-conseils__texte h2 {
  font-family: var(--mv-titre);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.8125rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #10151c;
  margin: 0;
  text-wrap: balance;
}

.mv-conseils__lien { padding-block-end: 6px; }
.mv-conseils__tous { margin: 0; }
.mv-conseils .mv-conseils__tous a {
  /* cible tactile de 44px sans changer le rendu : remplissage compense */
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  font-family: var(--mv-corps);
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: var(--mv-teal-texte);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 260ms ease;
}
.mv-conseils .mv-conseils__tous a:hover { color: #c79f3c; }

/* ---- La piste ---- */

.mv-conseils__boucle { margin-block-start: 48px; }

.mv-conseils .mv-conseils__piste {
  list-style: none;
  margin: 0;
  padding: 8px 0 12px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.mv-conseils .mv-conseils__piste::-webkit-scrollbar { display: none; }
.mv-conseils .mv-conseils__piste > li {
  min-width: 0;
  flex: 0 0 calc((100% - 40px) / 3);
  display: flex;
  scroll-snap-align: start;
}

.mv-conseils .mv-conseils__piste > li:nth-child(2) .mv-revele { transition-delay: 80ms; }
.mv-conseils .mv-conseils__piste > li:nth-child(3) .mv-revele { transition-delay: 160ms; }

/* ---- La carte d'article ---- */

.mv-carte-article {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--mv-rayon);
  background: #ffffff;
  border: 1px solid rgba(16, 21, 28, 0.08);
  box-shadow: 0 18px 40px -30px rgba(16, 21, 28, 0.28);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 460ms ease,
    box-shadow 460ms ease;
}
.mv-carte-article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 2;
}
.mv-carte-article:hover,
.mv-carte-article:focus-within {
  transform: translateY(-6px);
  border-color: rgba(16, 21, 28, 0.14);
  box-shadow: 0 30px 54px -30px rgba(16, 21, 28, 0.35);
}
.mv-carte-article:hover::before,
.mv-carte-article:focus-within::before { transform: scaleX(1); }

.mv-carte-article__image { margin: 0; overflow: hidden; }
.mv-carte-article__image img {
  display: block;
  width: 100%;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-carte-article:hover .mv-carte-article__image img,
.mv-carte-article:focus-within .mv-carte-article__image img { transform: scale(1.04); }

.mv-carte-article__corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 24px 24px;
}

.mv-carte-article__cats { margin: 0 0 10px; }
.mv-carte-article .mv-carte-article__cats,
.mv-carte-article .mv-carte-article__cats a {
  font-family: var(--mv-corps);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mv-teal-texte);
  text-decoration: none;
}
.mv-carte-article .mv-carte-article__cats a { display: inline-block; padding-block: 16px; margin-block: -16px; }
.mv-carte-article .mv-carte-article__cats a:hover { text-decoration: underline; text-underline-offset: 3px; }

.mv-page .mv-carte-article__titre {
  font-family: var(--mv-titre);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #10151c;
  margin: 0 0 10px;
  transition: color 420ms ease;
}
.mv-page .mv-carte-article__titre a { color: inherit; text-decoration: none; }
.mv-carte-article:hover .mv-carte-article__titre,
.mv-carte-article:hover .mv-carte-article__titre a { color: var(--mv-teal-texte); }

.mv-carte-article__extrait { margin: 0 0 16px; }
.mv-carte-article__extrait p {
  font-family: var(--mv-corps);
  font-size: 15.5px;
  line-height: 25px;
  color: #545b65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mv-carte-article__action {
  margin-block-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mv-corps);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  color: var(--mv-teal-texte);
  transition: color 420ms ease;
}
.mv-carte-article__action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-carte-article:hover .mv-carte-article__action { color: #c79f3c; }
.mv-carte-article:hover .mv-carte-article__action svg { transform: translateX(4px); }

/* ---- Les fleches, cachees tant que le script n'est pas monte ---- */

.mv-conseils__cmdes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-block-start: 20px;
}
.mv-conseils .mv-conseils__cmd {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(16, 21, 28, 0.16);
  border-radius: var(--mv-rayon);
  background: transparent;
  color: #10151c;
  cursor: pointer;
  transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease, opacity 260ms ease;
}
.mv-conseils .mv-conseils__cmd svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mv-conseils .mv-conseils__cmd:hover { background: #10151c; border-color: #10151c; color: #ffffff; }
.mv-conseils .mv-conseils__cmd[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .mv-carte-article, .mv-carte-article::before,
  .mv-carte-article__image img, .mv-carte-article__action svg, .mv-conseils .mv-conseils__cmd { transition: none; }
  .mv-carte-article:hover { transform: none; }
  .mv-carte-article:hover .mv-carte-article__image img { transform: none; }
}

@media (max-width: 1100px) {
  .mv-conseils__inner { padding-block: 76px; }
  .mv-conseils .mv-conseils__piste > li { flex-basis: calc((100% - 20px) / 2); }
  .mv-conseils__boucle { margin-block-start: 40px; }
}
@media (max-width: 640px) {
  .mv-conseils__inner { padding-block: 60px; }
  .mv-conseils__entete { grid-template-columns: minmax(0, 1fr); row-gap: 16px; align-items: start; }
  .mv-conseils__lien { padding-block-end: 0; }
  .mv-conseils .mv-conseils__piste { gap: 14px; }
  .mv-conseils .mv-conseils__piste > li { flex-basis: 86%; }
  .mv-conseils__boucle { margin-block-start: 32px; }
}

/* ---------- Section 12 : la FAQ ----------
   Accordeon en amelioration progressive : sans script, toutes les reponses
   sont visibles ; le script pose des boutons ARIA et replie tout sauf la
   premiere question. Le Charger plus reprend la mecanique des cas clients :
   7 questions, 5 affichees, le bouton apparait de lui-meme. */

.mv-faq { background: #f4f7f7; }

.mv-faq__inner {
  padding-block: 104px;
  padding-inline: 0;
}
@media (max-width: 1320px) { .mv-faq__inner { padding-inline: 20px; } }

/* Neutralisation des marges du coeur, ecrite avec les conteneurs. */
.mv-faq__inner > *,
.mv-faq__texte > *,
.mv-faq .mv-faq__liste > *,
.mv-faq-item > * {
  margin-block: 0;
}

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

.mv-page .mv-faq__texte h2 {
  font-family: var(--mv-titre);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.8125rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: #10151c;
  margin: 0;
  text-wrap: balance;
}

.mv-faq__boucle { margin-block-start: 44px; }

.mv-faq .mv-faq__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mv-faq .mv-faq__liste > li { min-width: 0; }

.mv-faq-item {
  background: #ffffff;
  border: 1px solid rgba(16, 21, 28, 0.08);
  border-radius: var(--mv-rayon);
  box-shadow: 0 14px 34px -28px rgba(16, 21, 28, 0.3);
  overflow: hidden;
}

/* Etat SANS script : question et reponse visibles, remplissages portes
   par les elements eux-memes. */
.mv-page .mv-faq-item__question {
  font-family: var(--mv-titre);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #10151c;
  margin: 0;
  padding: 20px 24px 0;
}
.mv-faq-item__reponse { padding: 10px 24px 22px; }

/* Etat MONTE : le bouton porte les remplissages et le chevron. */
html.mv-accordeon-actif .mv-page .mv-faq-item__question { padding: 0; }
.mv-faq-item .mv-faq-item__bouton {
  display: block;
  width: 100%;
  padding: 20px 58px 20px 24px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  position: relative;
  transition: color 260ms ease;
}
.mv-faq-item .mv-faq-item__bouton:hover { color: var(--mv-teal-texte); }
.mv-faq-item .mv-faq-item__bouton:focus-visible { outline: 2px solid var(--mv-teal); outline-offset: -2px; }
.mv-faq-item .mv-faq-item__bouton::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--mv-teal-texte);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mv-faq-item .mv-faq-item__bouton[aria-expanded="true"]::after { transform: rotate(180deg); }

/* Le texte des reponses reste une colonne lisible, ferree a gauche. */
.mv-faq-item__reponse { max-width: 78ch; }
.mv-faq-item__reponse p,
.mv-faq-item__reponse li {
  font-family: var(--mv-corps);
  font-size: 16.5px;
  line-height: 27px;
  color: #454c56;
}
.mv-faq-item__reponse p { margin: 0; }
.mv-faq-item__reponse p + p { margin-block-start: 12px; }
.mv-faq-item__reponse ul,
.mv-faq-item__reponse ol { margin: 12px 0 0; padding-inline-start: 22px; }
.mv-faq-item__reponse li { margin: 0; }
.mv-faq-item__reponse li + li { margin-block-start: 8px; }
.mv-faq-item__reponse strong { font-weight: 700; color: #10151c; }
.mv-faq-item__reponse a { color: var(--mv-teal-texte); }

/* ---- Charger plus, meme geste que les cas clients ---- */

.mv-faq .mv-faq__pagination {
  margin-block-start: 32px;
  display: flex;
  justify-content: center;
}
.mv-faq .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 30px;
  border: 1px solid rgba(16, 21, 28, 0.18);
  border-radius: var(--mv-rayon);
  background: transparent;
  font-family: var(--mv-corps);
  font-size: 16px;
  font-weight: 700;
  color: #10151c;
  text-decoration: none;
  transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease;
}
.mv-faq .wp-block-query-pagination-next:hover {
  background: #10151c;
  border-color: #10151c;
  color: #ffffff;
}
.mv-faq .wp-block-query-pagination-next[aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mv-faq-item__bouton, .mv-faq-item .mv-faq-item__bouton::after { transition: none; }
}

@media (max-width: 1100px) {
  .mv-faq__inner { padding-block: 76px; }
  .mv-faq__boucle { margin-block-start: 36px; }
}
@media (max-width: 640px) {
  .mv-faq__inner { padding-block: 60px; }
  .mv-faq__boucle { margin-block-start: 30px; }
  .mv-faq-item .mv-faq-item__bouton { padding: 18px 52px 18px 20px; }
  .mv-page .mv-faq-item__question { font-size: 17px; line-height: 25px; }
  html.mv-accordeon-actif .mv-page .mv-faq-item__question { font-size: 17px; }
  .mv-faq-item__reponse { padding: 8px 20px 20px; }
}

/* ---- La pastille de la formule mise en avant ---- */

/* ⛔ Posee dans le flux, elle poussait tout le contenu de sa carte vers le
   bas : le titre du milieu ne s alignait plus sur celui de ses voisines.
   Elle sort donc du flux, en haut a droite, la ou le pictogramme (a
   gauche) ne peut pas la rencontrer. */
.mv-offre .mv-offre__pastille {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  padding: 7px 14px;
  border-radius: var(--mv-rayon);
  background: var(--mv-or);
  font-family: var(--mv-titre, 'Lato', system-ui, sans-serif);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Encre sur or : 8,42. Le blanc n y tiendrait que 2,10. */
  color: var(--mv-encre, #10151c);
  white-space: nowrap;
}

/* La carte annuelle porte deja sa mention d economie en haut a droite : la
   pastille prend sa place, la mention repasse dessous. */
.mv-offre .mv-offre__pastille ~ .mv-offre__eco {
  margin-block-start: 34px;
}

@media (max-width: 640px) {
  /* En colonne etroite, la pastille reprend le flux : en absolu elle
     recouvrirait le pictogramme, la carte n etant plus assez large. */
  .mv-offre .mv-offre__pastille {
    position: static;
    align-self: flex-start;
    margin-block-end: 14px;
    white-space: normal;
  }

  .mv-offre .mv-offre__pastille ~ .mv-offre__eco {
    margin-block-start: 0;
  }
}

/* ---- Le portrait de la fondatrice, sans plaque ---- */

/* ⛔ La plaque sombre posee derriere le portrait revelait les contours de
   detourage du PNG : sur un fond clair, la meme decoupe ne se voit plus.
   Le fond de section suffit, un motif dore prend le relais de la plaque,
   et la photo descend jusqu a la section suivante au lieu de flotter dans
   un cadre. */
.mv-fondatrice .mv-fondatrice__inner {
  align-items: end;
  /* Plus de marge basse SUR LA GRILLE : c est ainsi que la photo atteint le
     bord de la section. La colonne de texte, elle, reprend son air plus bas
     par un retrait qui lui est propre. */
  padding-block: 104px 0;
}

/* ⛔ Sans ce retrait, le dernier paragraphe venait toucher la section
   suivante. La colonne de texte le porte seule : sur la grille, il ferait
   redescendre la photo et lui ferait perdre son debord. Comme les colonnes
   sont alignees par le bas, la photo suit et reste au ras du bord. */
.mv-fondatrice .mv-fondatrice__texte {
  /* Mesure : le pied de la colonne depasse de 14px sous la section, autant
     de pris sur l air reel. Le plancher du clamp en tient compte. */
  padding-block-end: clamp(86px, 6.2vw, 118px);
}

.mv-fondatrice .mv-fondatrice__portrait {
  position: relative;
  padding-block-start: 0;
  /* Le motif deborde a gauche : rien ne doit le rogner. */
  overflow: visible;
}

/* Le motif est celui de la PRODUCTION, releve sur m-oove.fr plutot que
   redessine a l estime : un seul et meme trace de marque, pose deux fois a
   des echelles differentes. Couleur mesuree : #D9B24B, le petit arc a 0,9
   d opacite. Les proportions sont exprimees en pourcentage de la LARGEUR de
   la colonne portrait, exactement comme la production les rend.

   ⛔ Aucune hauteur en pourcentage : sur un conteneur dont la hauteur vient
   du contenu, elle ne se resout pas toujours. On passe par aspect-ratio,
   qui ne depend que de la largeur. preserveAspectRatio='none' reproduit
   l ecrasement vertical du modele. */
.mv-fondatrice .mv-fondatrice__portrait::before,
.mv-fondatrice .mv-fondatrice__portrait::after {
  content: "";
  position: absolute;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* Le grand arc, qui deborde largement a gauche de la photo. */
.mv-fondatrice .mv-fondatrice__portrait::before {
  left: -26.9%;
  top: -3%;
  width: 98.6%;
  aspect-ratio: 505 / 512;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20505%20587%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20clip-rule%3D%27evenodd%27%20d%3D%27M176.466%20534.192C113.516%20510.512%2064.3162%20452.782%2036.0962%20393.572C-25.0038%20259.712%209.93621%20111.522%20104.956%204.21236C105.376%203.74236%20110.796%20-2.23763%20107.316%200.912371C-8.12378%20106.462%20-31.3838%20292.092%2042.1662%20426.822C112.116%20548.052%20253.136%20617.072%20389.996%20572.722C432.036%20558.082%20480.616%20529.822%20502.656%20489.122C513.636%20467.462%20478.976%20496.422%20475.506%20498.832C374.506%20568.052%20246.856%20562.922%20152.936%20482.752C103.956%20439.382%2073.0862%20382.742%2060.0862%20319.002C59.8762%20317.972%2055.9762%20294.162%2056.5162%20305.962C60.6162%20392.712%20113.156%20467.612%20177.916%20521.312C181.916%20524.632%20204.136%20541.262%20184.866%20536.832C182.006%20536.092%20179.226%20535.192%20176.456%20534.202L176.466%20534.192Z%27%20fill%3D%27%23D9B24B%27%2F%3E%3C%2Fsvg%3E");
}

/* Le second, plus petit, au-dessus de l epaule droite. */
.mv-fondatrice .mv-fondatrice__portrait::after {
  left: 19.7%;
  top: -1.9%;
  width: 41.1%;
  aspect-ratio: 211 / 235;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20505%20587%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20clip-rule%3D%27evenodd%27%20d%3D%27M176.466%20534.192C113.516%20510.512%2064.3162%20452.782%2036.0962%20393.572C-25.0038%20259.712%209.93621%20111.522%20104.956%204.21236C105.376%203.74236%20110.796%20-2.23763%20107.316%200.912371C-8.12378%20106.462%20-31.3838%20292.092%2042.1662%20426.822C112.116%20548.052%20253.136%20617.072%20389.996%20572.722C432.036%20558.082%20480.616%20529.822%20502.656%20489.122C513.636%20467.462%20478.976%20496.422%20475.506%20498.832C374.506%20568.052%20246.856%20562.922%20152.936%20482.752C103.956%20439.382%2073.0862%20382.742%2060.0862%20319.002C59.8762%20317.972%2055.9762%20294.162%2056.5162%20305.962C60.6162%20392.712%20113.156%20467.612%20177.916%20521.312C181.916%20524.632%20204.136%20541.262%20184.866%20536.832C182.006%20536.092%20179.226%20535.192%20176.456%20534.202L176.466%20534.192Z%27%20fill%3D%27%23D9B24B%27%2F%3E%3C%2Fsvg%3E");
  opacity: 0.9;
}

.mv-fondatrice .mv-fondatrice__photo {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  /* La plaque et ses deux lueurs disparaissent. */
  background: none;
}

/* Le filet de bas de plaque n a plus de plaque a fermer. */
.mv-fondatrice .mv-fondatrice__photo::after {
  content: none;
}

.mv-fondatrice .mv-fondatrice__photo img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0;
  /* ⛔ L ombre portee suivait la SILHOUETTE : sur fond clair, elle
     redessinait justement le contour que l on cherche a effacer. */
  filter: none;
}

@media (max-width: 900px) {
  /* En colonne, la photo garde son debord vers la section suivante mais le
     motif se retire : il n a plus la place de se lire. */
  .mv-fondatrice .mv-fondatrice__portrait::before,
  .mv-fondatrice .mv-fondatrice__portrait::after {
    display: none;
  }
}

/* ---- Le filigrane de la section verte ---- */

/* Le motif de marque, celui pose derriere la fondatrice, revient ici en
   filigrane sur le flanc droit. ⛔ ::before porte deja les deux lueurs de
   la section : le filigrane vit donc dans ::after, libre, verifie avant
   d ecrire. La section est en overflow:hidden, le motif y est donc coupe
   net par le bord, ce qui est l effet recherche.

   Blanc a 9% sur le teal : assez pour se lire en lumiere rasante, trop peu
   pour concurrencer le titre ou le bouton, qui restent opaques par-dessus.
   Aucun texte ne passe dessus a gauche, ou vit la titraille. */
.mv-cta::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  /* ⛔ A 540px de large, le motif faisait 628px de haut pour une section de
     333px : on n en voyait que deux arcs coupes, sans reconnaitre la forme.
     Reduit a 300px, il fait 349px de haut et tient presque entier dans la
     bande, ce qui le rend enfin lisible comme motif. */
  right: 4%;
  width: min(26%, 300px);
  aspect-ratio: 505 / 587;
  transform: translateY(-50%);
  background: var(--mv-motif) no-repeat center / contain;
  /* 9% ne se lisait pas du tout sur le teal : mesure a la capture, il
     faut le relever pour que la courbe apparaisse sans concurrencer le
     titre. Plus petit, le trace pese moins : 0,18 le remet a niveau. */
  opacity: 0.26;
  pointer-events: none;
}

/* Le contenu passe devant le filigrane. */
.mv-cta__inner {
  z-index: 1;
}

@media (max-width: 900px) {
  /* En colonne, le contenu occupe toute la largeur : le filigrane passerait
     sous le texte. On le renvoie en haut a droite, plus petit et plus discret. */
  .mv-cta::after {
    top: 0;
    right: -18%;
    width: 72%;
    transform: none;
    opacity: 0.07;
  }
}

/* ---- Filigrane de marque ---- */

/* Les bandes sombres de l accueil. Le heros en est exclu : il porte deja
   une video et son propre voile.

   ⛔ Le motif est borne par `top` et `bottom`, jamais par une hauteur en
   pourcentage : sur un pseudo-element, une hauteur en % ne se resout pas
   toujours, alors que les decalages, eux, se resolvent toujours. Le trace
   reste ainsi dans sa section quelle que soit sa hauteur, sans qu on ait a
   toucher a l overflow des sections existantes.

   ⛔ Toujours ::after : ::before porte deja les lueurs de ces sections. */
.mv-atouts::after,
.mv-methode::after,
.mv-rdv::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 6%;
  bottom: 6%;
  right: 4%;
  width: min(26%, 300px);
  background: var(--mv-motif) no-repeat right center / contain;
  opacity: 0.26;
  pointer-events: none;
}

@media (max-width: 900px) {
  .mv-atouts::after,
.mv-methode::after,
.mv-rdv::after {
    right: -8%;
    width: 46%;
    opacity: 0.14;
  }
}