/* ==========================================================================
   Magic Humans · couche vivante (css/vivant.css)

   Couleurs vives, dégradés, ambiance qui change de teinte d'une phase de la
   page à l'autre, cartes arrondies et animations. Ce fichier se charge APRÈS
   css/style.css, qui garde la base (polices, tailles, mises en page).

   js/vivant.js pose :
   - data-apparition="…" sur les blocs, puis la classe .mh-vu quand ils entrent
     à l'écran (une chorégraphie différente par section) ;
   - html[data-phase="…"] selon la section au centre de l'écran (la couleur
     d'ambiance glisse alors vers celle de la phase) ;
   - les variables liées au défilement (--mh-defile, --mh-frise, --mh-px).

   Sans JavaScript, tout reste visible et l'ambiance garde sa teinte d'accueil.
   Avec « réduire les animations » (prefers-reduced-motion), rien ne bouge.
   Couleurs : celles du logo (souci, corail) et des outils (framboise, violet,
   lagon, ciel). Textes en couleur : variantes « fonce », contraste AA vérifié.
   ========================================================================== */


/* 1. Jetons ---------------------------------------------------------------- */


:root {
  --ink-soft: #5e5144;

  --mh-souci: #f9b54c;     --mh-souci-doux: #fff1d6;     --mh-souci-fonce: #8f5500;
  --mh-corail: #f2545b;    --mh-corail-doux: #ffe6e2;    --mh-corail-fonce: #c7323a;
  --mh-framboise: #d6336c; --mh-framboise-doux: #fce7ef; --mh-framboise-fonce: #b4235a;
  --mh-violet: #8a5cd1;    --mh-violet-doux: #f1eafb;    --mh-violet-fonce: #6a44b0;
  --mh-lagon: #14a99a;     --mh-lagon-doux: #e2f6f2;     --mh-lagon-fonce: #0c7066;
  --mh-ciel: #2e9be0;      --mh-ciel-doux: #e6f3fc;      --mh-ciel-fonce: #1c6fa8;
  --mh-peche: #ffb38a;     --mh-peche-doux: #ffede2;

  --mh-grad-cta: linear-gradient(115deg, #c4501f 0%, #c7323a 50%, #b4235a 100%);
  --mh-grad-soleil: linear-gradient(115deg, #f9b54c 0%, #f2545b 55%, #d6336c 100%);
  --mh-grad-texte: linear-gradient(100deg, #c4501f 0%, #d6336c 48%, #8a5cd1 100%);
  --mh-grad-lagon: linear-gradient(120deg, #14a99a 0%, #2e9be0 100%);

  --mh-ease: cubic-bezier(.16, 1, .3, 1);
  --mh-ressort: cubic-bezier(.34, 1.56, .64, 1);
  --mh-doux: cubic-bezier(.65, 0, .35, 1);

  --mh-r-s: 14px;
  --mh-r-m: 22px;
  --mh-r-l: 30px;

  --mh-ombre: 0 1px 2px rgba(58, 47, 36, .05), 0 14px 34px -18px rgba(58, 47, 36, .28);
  --mh-ombre-forte: 0 2px 6px rgba(58, 47, 36, .06), 0 30px 60px -28px rgba(58, 47, 36, .38);
  --mh-verre: rgba(255, 255, 255, .78);

  /* Pictogrammes en masque : ils prennent la couleur du texte ou du fond. */
  --mh-ico-etoile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 5.6 6.4 11.4 12 12-5.6.6-11.4 6.4-12 12-.6-5.6-6.4-11.4-12-12C5.6 11.4 11.4 5.6 12 0z'/%3E%3C/svg%3E");
  --mh-ico-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mh-ico-croix: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --mh-ico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --mh-ico-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mh-ico-trait: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cpath d='M4 17C46 6 104 3 196 10' fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  --mh-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .18 0 0 0 0 .14 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* 2. Ambiance : chaque section a ses halos de lumière, de la couleur de sa phase -------
   Ils sont peints avec la page (aucun calque fixe à recomposer à chaque image) : la couleur change
   au fil du défilement, sans rien coûter. Les halos débordent en haut et en bas pour se fondre
   dans la section voisine, jamais sur les côtés. */

body { background-color: #fbf7f0; }
html::before {
  /* Grain très fin, une seule fois pour toute la page : matière de papier, pas de bandes dans les dégradés. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--mh-grain);
}
html { position: relative; }

.hero          { --fa: #ffd27a; --fb: #ffa294; --fc: #f6a9cb; }
.problem       { --fa: #d8d2ee; --fb: #c8d8ec; --fc: #e9e1f3; }
.solution      { --fa: #9fe3d5; --fb: #a6d6f5; --fc: #c9efd8; }
.video-feature { --fa: #ffc6a3; --fb: #ffafb2; --fc: #ffe0c2; }
.proof         { --fa: #b4daf7; --fb: #d2c4f3; --fc: #bce8ef; }
.solution-method { --fa: #d5c1f6; --fb: #f5b6d2; --fc: #b4e4dc; }
.steps         { --fa: #d3c0f5; --fb: #ffcb9c; --fc: #f7b3c8; }
.offer         { --fa: #ffd985; --fb: #ffbe9c; --fc: #ffedb8; }
#entrepreneurs-repreneurs { --fa: #a6d6f5; --fb: #9fe3d5; --fc: #ffdda3; }
.authority     { --fa: #ffb4a3; --fb: #ffd49c; --fc: #f7c0d6; }
.testimonials  { --fa: #f7bfd5; --fb: #a6e3d6; --fc: #ffd985; }
.google-cta    { --fa: #ffd985; --fb: #f7c0d6; --fc: #ffe3b0; }
.quiz-cta      { --fa: #ffd27a; --fb: #f6a9cb; --fc: #d5c1f6; }
.audience      { --fa: #9fe3d5; --fb: #ffd27a; --fc: #c9efd8; }
.faq           { --fa: #d7caf5; --fb: #bcddf6; --fc: #f1cee2; }
.mh-suite      { --fa: #ffd27a; --fb: #d7caf5; --fc: #ffe0c2; }

.problem,
.solution,
.video-feature,
.proof,
.steps,
.offer,
.authority,
.testimonials,
.google-cta,
.quiz-cta,
.audience,
.faq,
.mh-suite {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
.problem::before,
.solution::before,
.video-feature::before,
.proof::before,
.steps::before,
.offer::before,
.authority::before,
.testimonials::before,
.google-cta::before,
.quiz-cta::before,
.audience::before,
.faq::before,
.mh-suite::before,
.problem::after,
.solution::after,
.video-feature::after,
.proof::after,
.steps::after,
.offer::after,
.authority::after,
.testimonials::after,
.google-cta::after,
.quiz-cta::after,
.audience::after,
.faq::after,
.mh-suite::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(980px, 105vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}
.problem::before,
.solution::before,
.video-feature::before,
.proof::before,
.steps::before,
.offer::before,
.authority::before,
.testimonials::before,
.google-cta::before,
.quiz-cta::before,
.audience::before,
.faq::before,
.mh-suite::before {
  left: max(-490px, -52vw);
  top: -12%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--fa) 86%, transparent), color-mix(in srgb, var(--fa) 30%, transparent) 55%, transparent);
}
.problem::after,
.solution::after,
.video-feature::after,
.proof::after,
.steps::after,
.offer::after,
.authority::after,
.testimonials::after,
.google-cta::after,
.quiz-cta::after,
.audience::after,
.faq::after,
.mh-suite::after {
  right: max(-490px, -52vw);
  bottom: -14%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--fb) 82%, transparent), color-mix(in srgb, var(--fc) 30%, transparent) 55%, transparent);
}
/* Sections très hautes : un troisième halo au milieu, pour que la couleur ne s'éteigne pas. */
.solution > .wrap::before,
.offer > .wrap::before,
.testimonials > .wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: max(-460px, -50vw);
  top: 38%;
  width: min(900px, 100vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--fc) 80%, transparent), transparent);
  pointer-events: none;
}
.solution > .wrap,
.offer > .wrap,
.testimonials > .wrap { position: relative; }

/* 3. Base ------------------------------------------------------------------ */

::selection { background: #ffd27a; color: var(--ink); }

[id] { scroll-margin-top: 104px; }
@media (max-width: 1200px) { [id] { scroll-margin-top: 84px; } }

:focus-visible {
  outline: 3px solid var(--mh-violet);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Les sections laissent passer l'ambiance : plus de grands aplats beiges. */
.solution,
.video-feature,
.offer,
.google-cta,
.quiz-cta { background: transparent; }


/* Mots mis en valeur dans les titres : dégradé de couleur. */
h1 em,
h2 em,
h3 em,
.hero-reframe em {
  font-style: inherit;
  background: var(--mh-grad-texte);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .04em;
}

/* Petit trait de pinceau sous les titres de section, tracé à l'apparition. */
.problem h2,
.solution > .wrap > h2,
.video-feature h2,
.proof h2,
.steps h2,
.offer h2,
.testimonials h2,
.google-cta h2,
.faq h2,
.audience h2 {
  position: relative;
  text-wrap: balance;
}
.solution > .wrap > h2::after,
.video-feature h2::after,
.proof h2::after,
.steps h2::after,
.offer h2::after,
.testimonials h2::after,
.faq h2::after,
.audience h2::after {
  content: "";
  display: block;
  width: 132px;
  height: 16px;
  margin: 14px auto 0;
  background: var(--mh-trait, var(--mh-grad-soleil));
  -webkit-mask: var(--mh-ico-trait) center / contain no-repeat;
  mask: var(--mh-ico-trait) center / contain no-repeat;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--mh-ease) .35s;
}
.mh-js .solution > .wrap > h2[data-apparition]:not(.mh-vu)::after,
.mh-js .video-feature h2[data-apparition]:not(.mh-vu)::after,
.mh-js .proof h2[data-apparition]:not(.mh-vu)::after,
.mh-js .steps h2[data-apparition]:not(.mh-vu)::after,
.mh-js .offer h2[data-apparition]:not(.mh-vu)::after,
.mh-js .testimonials h2[data-apparition]:not(.mh-vu)::after,
.mh-js .faq h2[data-apparition]:not(.mh-vu)::after,
.mh-js .audience h2[data-apparition]:not(.mh-vu)::after { clip-path: inset(0 100% 0 0); }

.video-feature { --mh-trait: linear-gradient(90deg, #ff9f8e, #f2545b); }
.proof { --mh-trait: var(--mh-grad-lagon); }
.steps { --mh-trait: linear-gradient(90deg, #8a5cd1, #d6336c, #f9b54c); }
.offer { --mh-trait: linear-gradient(90deg, #f9b54c, #f2545b); }
.testimonials { --mh-trait: linear-gradient(90deg, #d6336c, #14a99a, #f9b54c); }
.faq { --mh-trait: linear-gradient(90deg, #8a5cd1, #2e9be0); }

.script { color: var(--mh-corail-fonce); }


/* 4. Navigation ------------------------------------------------------------ */

nav {
  background: rgba(251, 247, 240, .84);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(58, 47, 36, .07);
  transition: box-shadow .5s var(--mh-ease), background-color .5s var(--mh-ease);
  view-transition-name: mh-nav;
}
.mh-defile nav {
  background: rgba(255, 252, 247, .9);
  box-shadow: 0 10px 30px -18px rgba(58, 47, 36, .35);
}
/* Barre de lecture : la page se remplit de couleur à mesure qu'on descend. */
nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, #f9b54c, #f2545b 30%, #d6336c 55%, #8a5cd1 78%, #14a99a);
  transform-origin: 0 50%;
  transform: scaleX(var(--mh-defile, 0));
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  nav::after {
    transform: scaleX(0);
    animation: mh-lecture linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes mh-lecture { to { transform: scaleX(1); } }

/* Logo : il ne doit plus jamais être écrasé à zéro (bug d'avant sur ordinateur). */
.logo { flex-shrink: 0; display: block; line-height: 0; }
.logo img { max-width: none; transition: transform .5s var(--mh-ressort); }
.logo:hover img { transform: rotate(-2deg) scale(1.03); }

@media (min-width: 1201px) {
  nav .wrap { max-width: 1340px; height: 92px; gap: 22px; }
  .logo img { height: 66px; }
  .nav-right { gap: 20px; }
  .nav-menu { gap: 18px; }
  .nav-link { font-size: 15px; }
  nav .btn { padding: 11px 18px; font-size: 13px; letter-spacing: .01em; text-transform: none; font-weight: 500; }
}
@media (min-width: 1201px) and (max-width: 1299px) {
  .logo img { height: 52px; }
  .nav-menu { gap: 14px; }
  .nav-link { font-size: 14.5px; }
  nav .btn { padding: 10px 14px; font-size: 12.5px; }
}

.nav-link {
  position: relative;
  transition: color .3s;
}
.nav-menu .nav-link:not(.nav-link--quiz)::after,
.nav-menu-extra .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--mh-grad-soleil);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s var(--mh-ease);
}
.nav-link:hover::after,
.nav-link.mh-actif::after { transform: scaleX(1); }
.nav-link.mh-actif { color: var(--ink); }

.nav-link.nav-link--quiz {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--mh-grad-cta);
  background-size: 160% 100%;
  box-shadow: 0 8px 18px -10px rgba(199, 50, 58, .7);
  transition: background-position .6s var(--mh-ease), transform .35s var(--mh-ressort), box-shadow .35s;
}
.nav-link.nav-link--quiz::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--mh-ico-etoile) center / contain no-repeat;
  mask: var(--mh-ico-etoile) center / contain no-repeat;
  animation: mh-scintille-doux 2.8s ease-in-out infinite;
}
.nav-link.nav-link--quiz:hover {
  background: var(--mh-grad-cta);
  background-size: 160% 100%;
  background-position: 100% 0;
  transform: translateY(-1px);
}

.lang-toggle { border-radius: 999px; border-color: rgba(58, 47, 36, .12); background: rgba(255, 255, 255, .6); }
.lang-toggle button { border-radius: 999px; transition: background-color .3s, color .3s; }
.lang-toggle button.active { background: var(--ink); }

nav .btn-line {
  border: 2px solid transparent;
  background: linear-gradient(#fffaf4, #fffaf4) padding-box, var(--mh-grad-cta) border-box;
  color: var(--ink);
}
nav .btn-line:hover {
  background: var(--mh-grad-cta) padding-box, var(--mh-grad-cta) border-box;
  color: #fff;
}

.nav-toggle { border-radius: 12px; background: rgba(255, 255, 255, .7); }

/* Menu mobile : il s'ouvre en glissant, les liens arrivent l'un après l'autre. */
@media (max-width: 1200px) {
  .nav-right.open { animation: mh-menu .45s var(--mh-ease) both; }
  .nav-right.open .nav-link,
  .nav-right.open .lang-toggle,
  .nav-right.open > .btn { animation: mh-menu-lien .5s var(--mh-ease) backwards; }
  .nav-right.open .nav-menu .nav-link:nth-child(2) { animation-delay: .04s; }
  .nav-right.open .nav-menu .nav-link:nth-child(3) { animation-delay: .08s; }
  .nav-right.open .nav-menu .nav-link:nth-child(4) { animation-delay: .12s; }
  .nav-right.open .nav-menu .nav-link:nth-child(5) { animation-delay: .16s; }
  .nav-right.open .nav-menu-extra .nav-link { animation-delay: .2s; }
  .nav-right.open .lang-toggle { animation-delay: .26s; }
  .nav-right.open > .btn { animation-delay: .3s; }
  nav .btn { border-radius: 999px; }
}
@keyframes mh-menu { from { opacity: 0; translate: 0 -10px; } }
@keyframes mh-menu-lien { from { opacity: 0; translate: -14px 0; } }


/* 5. Boutons --------------------------------------------------------------- */

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;
  letter-spacing: .05em;
  transition: transform .4s var(--mh-ressort), box-shadow .4s var(--mh-ease), background-position .7s var(--mh-ease), color .3s, background-color .3s;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .9s var(--mh-ease);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.97); }

.btn-orange,
.btn-orange:hover {
  background: var(--mh-grad-cta);
  background-size: 170% 100%;
  color: #fff;
}
.btn-orange {
  box-shadow: 0 12px 26px -12px rgba(199, 50, 58, .65), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-orange:hover {
  background-position: 100% 0;
  transform: translateY(-3px);
  box-shadow: 0 20px 36px -14px rgba(180, 35, 90, .6), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.btn-line { border-radius: 999px; }
.btn-line:hover { transform: translateY(-2px); }

/* Lien vers le quiz : pilule claire bordée de soleil, la flèche avance au survol. */
.hero-quiz-link {
  border: 1.5px solid transparent;
  background: linear-gradient(#fffaf3, #fffaf3) padding-box, var(--mh-grad-soleil) border-box;
  color: var(--mh-corail-fonce);
  box-shadow: 0 10px 24px -16px rgba(242, 84, 91, .7);
  transition: transform .4s var(--mh-ressort), box-shadow .4s, background .4s, color .3s;
}
.hero-quiz-link:hover {
  background: linear-gradient(#fff1d6, #ffe6e2) padding-box, var(--mh-grad-soleil) border-box;
  color: var(--mh-framboise-fonce);
  border-color: transparent;
  transform: translateY(-2px);
}
.offer .hero-quiz-link { background: linear-gradient(#fffaf3, #fffaf3) padding-box, var(--mh-grad-soleil) border-box; }


/* 6. Héros ----------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-top: 72px;
  padding-bottom: 70px;
}
@media (max-width: 480px) { .hero { padding-top: 48px; } }
/* Deux halos de soleil qui respirent derrière le titre. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.hero::before {
  width: 640px;
  height: 640px;
  left: -220px;
  top: -200px;
  background: radial-gradient(circle, rgba(249, 181, 76, .5), rgba(249, 181, 76, 0) 66%);
  animation: mh-halo 14s var(--mh-doux) infinite alternate;
}
.hero::after {
  width: 560px;
  height: 560px;
  right: -200px;
  top: 120px;
  background: radial-gradient(circle, rgba(214, 51, 108, .32), rgba(214, 51, 108, 0) 66%);
  animation: mh-halo 17s var(--mh-doux) -6s infinite alternate-reverse;
}
@keyframes mh-halo {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(60px, 40px, 0) scale(1.15); }
}

.hero .script { position: relative; animation: mh-descend .9s var(--mh-ease) .05s backwards; }
.hero .script::after {
  content: "";
  display: block;
  width: min(240px, 70%);
  height: 14px;
  margin: 2px auto 0;
  background: var(--mh-grad-soleil);
  -webkit-mask: var(--mh-ico-trait) center / contain no-repeat;
  mask: var(--mh-ico-trait) center / contain no-repeat;
  animation: mh-trace 1.2s var(--mh-ease) .5s backwards;
}
@keyframes mh-trace { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mh-descend { from { opacity: 0; translate: 0 -16px; } }

.hero h1 { text-wrap: balance; }
.hero h1:not(.hero-losange) { animation: mh-ligne 1s var(--mh-ease) .18s backwards; }
.hero-losange__line { animation: mh-ligne 1s var(--mh-ease) backwards; }
.hero-losange__line:nth-child(1) { animation-delay: .16s; }
.hero-losange__line:nth-child(2) { animation-delay: .28s; }
.hero-losange__line:nth-child(3) { animation-delay: .40s; }
.hero-losange__line:nth-child(4) { animation-delay: .52s; }
.hero-losange__line:nth-child(5) { animation-delay: .64s; }
@keyframes mh-ligne { from { opacity: 0; translate: 0 .55em; filter: blur(10px); } }

/* Le losange tient sur la largeur : il passe à la ligne avant de déborder. */
.hero h1.hero-losange { font-size: clamp(30px, 3.55vw, 50px); max-width: none; }
@media (max-width: 1340px) {
  .hero-losange__line { white-space: normal; text-wrap: balance; }
}
@media (max-width: 480px) {
  .hero h1.hero-losange { font-size: 25px; }
  /* Pages d'atterrissage : même ordre que l'accueil sur téléphone (accroche, titre, bouton, puis le texte). */
  .hero h1:not(.hero-losange) { order: 2; }
  .hero .wrap > .hero-reframe { margin-top: 56px; }
  .hero .wrap > p:not([class]) { order: 6; }
  .hero .wrap > .lede { margin-top: 30px; }
}

.hero-reframe { animation: mh-monte .9s var(--mh-ease) .78s backwards; text-wrap: balance; line-height: 1.32; }
.hero-reframe em { animation: mh-chatoie 7s linear infinite; }
@keyframes mh-chatoie { to { background-position: -200% 0; } }
.hero p.lede { animation: mh-monte .9s var(--mh-ease) .92s backwards; text-wrap: pretty; }
.hero p.lede + p:not(.cta-microline) { animation: mh-monte .9s var(--mh-ease) 1s backwards; }
.hero .wrap > .btn { animation: mh-rebond .9s linear 1.06s backwards; }
.hero .cta-microline { animation: mh-monte .8s var(--mh-ease) 1.18s backwards; }
.hero .hero-quiz-link { animation: mh-monte .8s var(--mh-ease) 1.28s backwards; }

/* Photo de Pierre : arche, anneau de couleur, halo, et petites étiquettes qui flottent. */
.hero-photo {
  position: relative;
  isolation: isolate;
  max-width: 460px;
  margin: 70px auto 0;
  padding: 0;
  border: 3px solid var(--mh-corail);
  border-radius: 999px 999px 44px 44px;
  box-shadow: 0 18px 40px -22px rgba(58, 47, 36, .35);
  animation: mh-photo 1.3s var(--mh-ease) .42s backwards;
}
.hero-photo img {
  border-radius: 999px 999px 41px 41px;
  background: var(--sand);
}
@keyframes mh-photo { from { opacity: 0; translate: 0 44px; scale: .94; filter: blur(8px); } }
@keyframes mh-respire { from { transform: scale(.94); opacity: .75; } to { transform: scale(1.06); opacity: 1; } }

@keyframes mh-flotte {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-12px) rotate(1.5deg); }
}
@media (max-width: 560px) {
  .hero-photo { margin-top: 44px; }
}

/* Ordinateur : le titre en losange garde toute la largeur, puis texte et photo côte à côte. */
/* Ordinateur : le titre en losange, la phrase qui recadre et le bouton tiennent dans le premier écran ;
   en dessous, le texte et la photo de Pierre se font face. */
@media (min-width: 1000px) {
  .hero:has(.hero-photo) { padding-top: 46px; }
  .hero .wrap:has(> .hero-photo) {
    max-width: 1160px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto auto 1fr auto auto 1fr;
    column-gap: 80px;
    grid-template-areas:
      "script  script"
      "titre   titre"
      "recadre recadre"
      "bouton  bouton"
      "micro   micro"
      "quiz    quiz"
      "haut    photo"
      "lede    photo"
      "signe   photo"
      "bas     photo";
  }
  .hero .wrap:has(> .hero-photo) > .script { grid-area: script; margin-bottom: 4px; }
  .hero .wrap:has(> .hero-photo) > h1 { grid-area: titre; margin-bottom: 16px; line-height: 1.17; }
  .hero .wrap:has(> .hero-photo) > .hero-reframe { grid-area: recadre; margin-bottom: 24px; line-height: 1.3; }
  .hero .wrap:has(> .hero-photo) > .btn { grid-area: bouton; justify-self: center; }
  .hero .wrap:has(> .hero-photo) > .cta-microline { grid-area: micro; }
  .hero .wrap:has(> .hero-photo) > .hero-quiz-link { grid-area: quiz; justify-self: center; }
  .hero .wrap:has(> .hero-photo) > .lede {
    grid-area: lede;
    align-self: end;
    text-align: left;
    margin: 0;
    max-width: 30ch;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(24px, 2.3vw, 29px);
    line-height: 1.42;
    color: var(--ink);
  }
  .hero .wrap:has(> .hero-photo) > .lede::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin-top: 26px;
    border-radius: 3px;
    background: var(--mh-grad-soleil);
  }
  .hero .wrap:has(> .hero-photo) > .hero-photo { grid-area: photo; margin: 84px 0 0; width: 100%; max-width: 430px; justify-self: center; }
}


/* 7. Bandeaux qui défilent ------------------------------------------------- */

.mh-bandeaux {
  position: relative;
  height: 110px;
  margin: 10px 0 0;
  overflow: clip;
  pointer-events: none;
}
.mh-bandeau {
  position: absolute;
  left: -6%;
  right: -6%;
  top: 50%;
  padding: 15px 0;
  overflow: hidden;
  box-shadow: 0 20px 40px -24px rgba(58, 47, 36, .45);
}
.mh-bandeau--a {
  transform: translateY(-50%);
  background: var(--mh-grad-cta);
  color: #fff8ee;
}
.mh-bandeau__piste {
  display: flex;
  width: max-content;
  animation: mh-defile 46s linear infinite;
}
.mh-bandeau__mot {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  margin-right: 26px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2;
  white-space: nowrap;
}
.mh-bandeau__mot::after {
  content: "";
  width: .62em;
  height: .62em;
  background: #ffd27a;
  -webkit-mask: var(--mh-ico-etoile) center / contain no-repeat;
  mask: var(--mh-ico-etoile) center / contain no-repeat;
}
.mh-bandeau--citations .mh-bandeau__mot { font-size: clamp(20px, 2.4vw, 26px); }
.mh-bandeau__mot small {
  font-family: Jost, sans-serif;
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
  margin-left: -12px;
}
@keyframes mh-defile { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 640px) {
  .mh-bandeaux { height: 84px; }
  .mh-bandeau { padding: 11px 0; }
}
.mh-bandeaux--seul { height: 120px; }
.mh-bandeaux--seul .mh-bandeau { transform: translateY(-50%); }


/* 8. Sections -------------------------------------------------------------- */

/* 8.1 Le constat : la brume se lève, l'illustration reprend ses couleurs. */
.problem { padding: 110px 0 120px; }
/* Grande citation : la phrase seule, en grand, sur un fond doux. */
.problem.mh-constat { padding: 90px 0 30px; --fa: #ffe0d6; --fb: #fff1d6; --fc: #fde7ef; }
.mh-constat-suite { padding: 60px 0 120px; }
.mh-constat-suite .wrap { max-width: 760px; }
.problem p.mh-grande-citation {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 110px) clamp(24px, 7vw, 90px);
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.28;
  color: var(--ink);
  text-wrap: balance;
  border-radius: var(--mh-r-l);
  background: #fff3ec;
  box-shadow: 0 18px 40px -26px rgba(58, 47, 36, .3);
}
.problem p.mh-grande-citation::before,
.problem p.mh-grande-citation::after {
  position: absolute;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(110px, 16vw, 200px);
  line-height: 1;
  color: var(--mh-corail);
  opacity: .22;
  pointer-events: none;
}
.problem p.mh-grande-citation::before { content: "\201C"; left: clamp(10px, 3vw, 36px); top: 0; }
.problem p.mh-grande-citation::after { content: "\201D"; right: clamp(10px, 3vw, 36px); bottom: clamp(-60px, -6vw, -30px); }

.problem p { text-wrap: pretty; }

.avatar-grid { gap: 14px; margin: 6px 0 22px; }
a.avatar-item {
  --c: var(--mh-souci); --c-doux: var(--mh-souci-doux); --c-fonce: var(--mh-souci-fonce);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 18px 46px 18px 18px;
  border-radius: var(--mh-r-m);
  background: var(--mh-verre);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--mh-ombre);
  transition: transform .45s var(--mh-ressort), box-shadow .45s var(--mh-ease), background-color .3s;
}
a.avatar-item:nth-child(2) { --c: var(--mh-violet); --c-doux: var(--mh-violet-doux); --c-fonce: var(--mh-violet-fonce); }
a.avatar-item:nth-child(3) { --c: var(--mh-lagon); --c-doux: var(--mh-lagon-doux); --c-fonce: var(--mh-lagon-fonce); }
a.avatar-item:hover {
  background-color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--c) 70%, transparent), var(--mh-ombre);
}
a.avatar-item:hover b { color: var(--c-fonce); }
a.avatar-item::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  background: var(--c-fonce);
  -webkit-mask: var(--mh-ico-fleche) center / contain no-repeat;
  mask: var(--mh-ico-fleche) center / contain no-repeat;
  opacity: .45;
  transition: transform .45s var(--mh-ressort), opacity .3s;
}
a.avatar-item:hover::after { opacity: 1; transform: translateX(5px); }
.avatar-ico {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--c-doux);
  color: var(--c-fonce);
  transition: transform .5s var(--mh-ressort);
}
.avatar-ico svg { width: 24px; height: 24px; }
a.avatar-item:hover .avatar-ico { transform: rotate(-8deg) scale(1.08); }

/* Liens « Selon votre cas » : des pastilles plutôt que du petit texte souligné. */
.mh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 24px;
  padding: 0;
  list-style: none;
}
.mh-chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(58, 47, 36, .1);
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink);
  transition: transform .4s var(--mh-ressort), background-color .3s, border-color .3s, box-shadow .3s;
}
.mh-chips a::after {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: var(--mh-corail-fonce);
  -webkit-mask: var(--mh-ico-fleche) center / contain no-repeat;
  mask: var(--mh-ico-fleche) center / contain no-repeat;
  transition: transform .4s var(--mh-ressort);
}
.mh-chips a:hover {
  background: #fff;
  border-color: rgba(242, 84, 91, .45);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -16px rgba(242, 84, 91, .8);
}
.mh-chips a:hover::after { transform: translateX(4px); }
.mh-chips--centre { justify-content: center; margin: 0 auto 50px; max-width: 760px; }

/* Grande citation : guillemet en dégradé, carte en verre. */
.mh-citation {
  position: relative;
  margin-top: 30px !important;
  padding: 26px 28px 24px 74px;
  border-radius: var(--mh-r-m);
  background: linear-gradient(120deg, rgba(255, 241, 214, .9), rgba(252, 231, 239, .9));
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 21px !important;
  line-height: 1.45;
  color: var(--mh-framboise-fonce) !important;
  box-shadow: var(--mh-ombre);
}
.mh-citation::before {
  content: "\201C";
  position: absolute;
  left: 20px;
  top: 4px;
  font-size: 84px;
  line-height: 1;
  background: var(--mh-grad-soleil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Liste des risques (Reprise) : croix dans des pastilles corail. */
.risk-list li { padding: 14px 18px 14px 50px; margin-bottom: 12px; border-radius: var(--mh-r-s); background: var(--mh-verre); box-shadow: var(--mh-ombre); }
.risk-list li::before {
  content: "";
  left: 16px;
  top: 15px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  opacity: 1;
  background: var(--mh-corail-doux);
  box-shadow: inset 0 0 0 20px var(--mh-corail-doux);
}
.risk-list li::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 19px;
  width: 14px;
  height: 14px;
  background: var(--mh-corail-fonce);
  -webkit-mask: var(--mh-ico-croix) center / contain no-repeat;
  mask: var(--mh-ico-croix) center / contain no-repeat;
}

/* 8.2 La méthode : Ikigaï en couleurs, comparaison en duel. */
.solution { padding: 120px 0; }
.solution h2 { max-width: 18ch; text-wrap: balance; }
.solution > .wrap > p { text-wrap: pretty; }

.ikigai-diagram { max-width: 560px; margin: 10px auto 70px; }
.ikigai-bouton {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 50%;
}
.ikigai-svg { width: 100%; height: auto; overflow: visible; }
.ikigai-cercle {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .4s;
}
.ikigai-cercle--aimer   { fill: #f9b54c; }
.ikigai-cercle--doue    { fill: #4cc38a; }
.ikigai-cercle--besoin  { fill: #f2545b; }
.ikigai-cercle--paye    { fill: #3aa7e8; }
.ikigai-svg .ikigai-groupe { mix-blend-mode: multiply; opacity: .9; transform-box: fill-box; transform-origin: center; }
.ikigai-svg text {
  font-family: Jost, sans-serif;
  fill: var(--ink);
  font-size: 17px;
  font-weight: 400;
}
.ikigai-svg .ikigai-grand {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 30px;
}
.ikigai-svg .ikigai-zone {
  font-family: Jost, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  fill: #fff;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: rgba(58, 47, 36, .28);
  stroke-width: 3px;
}
.ikigai-centre circle { fill: #fffaf3; }
.ikigai-centre text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 30px;
  fill: var(--mh-framboise-fonce);
}
.ikigai-centre { transform-box: fill-box; transform-origin: center; }
.ikigai-halo { fill: url(#ikigai-halo); transform-box: fill-box; transform-origin: center; animation: mh-respire 4s var(--mh-doux) infinite alternate; }
.ikigai-bouton:hover .ikigai-cercle { opacity: .92; }
/* Apparition : les quatre cercles arrivent de loin et se rejoignent au centre. */
.mh-js .ikigai-diagram:not(.mh-vu) .ikigai-groupe,
.mh-js .ikigai-diagram:not(.mh-vu) .ikigai-centre,
.mh-js .ikigai-diagram:not(.mh-vu) .ikigai-zones,
.mh-js .ikigai-diagram:not(.mh-vu) .ikigai-libelles { opacity: 0; }
.ikigai-diagram.mh-vu .ikigai-groupe { animation: mh-ikigai-arrive 1.3s var(--mh-ease) backwards; }
.ikigai-diagram.mh-vu .ikigai-groupe--aimer  { --dx: 0px;    --dy: -120px; animation-delay: .05s; }
.ikigai-diagram.mh-vu .ikigai-groupe--doue   { --dx: -120px; --dy: 0px;    animation-delay: .2s; }
.ikigai-diagram.mh-vu .ikigai-groupe--besoin { --dx: 120px;  --dy: 0px;    animation-delay: .35s; }
.ikigai-diagram.mh-vu .ikigai-groupe--paye   { --dx: 0px;    --dy: 120px;  animation-delay: .5s; }
.ikigai-diagram.mh-vu .ikigai-zones { animation: mh-apparait .8s var(--mh-ease) 1.15s backwards; }
.ikigai-diagram.mh-vu .ikigai-libelles { animation: mh-apparait .8s var(--mh-ease) .9s backwards; }
.ikigai-diagram.mh-vu .ikigai-centre { animation: mh-rebond .9s linear 1.35s backwards; }
@keyframes mh-ikigai-arrive { from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.7); } }
@keyframes mh-apparait { from { opacity: 0; } }
/* Ensuite, les cercles respirent doucement. */
.ikigai-diagram.mh-vu .ikigai-cercle { animation: mh-ikigai-respire 9s var(--mh-doux) 2s infinite alternate; }
.ikigai-diagram.mh-vu .ikigai-cercle--doue { animation-delay: 3s; }
.ikigai-diagram.mh-vu .ikigai-cercle--besoin { animation-delay: 4s; }
.ikigai-diagram.mh-vu .ikigai-cercle--paye { animation-delay: 5s; }
@keyframes mh-ikigai-respire { to { transform: scale(1.04); } }
.ikigai-diagram .zoom-hint { margin-top: 18px; }
@media (max-width: 560px) {
  .ikigai-svg text { font-size: 22px; }
  .ikigai-svg .ikigai-grand { font-size: 36px; }
  .ikigai-svg .ikigai-zone { font-size: 16px; letter-spacing: .08em; }
  .ikigai-centre text { font-size: 34px; }
}
.mh-js .ikigai-diagram:not(.mh-vu) .zoom-hint { opacity: 0; }
.ikigai-diagram.mh-vu .zoom-hint { animation: mh-apparait .8s var(--mh-ease) 1.8s backwards; }

.solution-subhead { text-wrap: balance; }
.solution > .wrap > p.mh-accroche {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 21px;
  line-height: 1.45;
  color: var(--mh-framboise-fonce);
  max-width: 52ch;
  margin: 0 auto 26px;
  text-wrap: balance;
}

.comparison-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 66px 1fr;
  gap: 16px;
  align-items: stretch;
  border: 0;
  margin: 50px 0 70px;
  perspective: 1400px;
}
.comparison-col {
  position: relative;
  border-radius: var(--mh-r-l);
  padding: 38px 34px;
}
.comparison-col.classic {
  background: rgba(255, 255, 255, .45);
  border: 1.5px dashed rgba(58, 47, 36, .2);
}
.comparison-col.classic h4 { color: var(--ink-soft); }
.comparison-col.mh {
  isolation: isolate;
  background: #fff;
  border: 3px solid #6cc9b5;
  box-shadow: var(--mh-ombre-forte);
}
.comparison-col.mh::before { content: none; }
.comparison-col.mh h4 {
  font-size: 24px;
  background: var(--mh-grad-texte);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.comparison-col { text-align: center; }
.comparison-col ul { text-align: left; }
.comparison-ico {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #e3e3e3;
  color: #2f3438;
}
.comparison-col.mh .comparison-ico { background: #ffe3e3; color: #e8394a; }
.comparison-ico svg { width: 52px; height: 52px; }
.comparison-col li { font-size: 15.5px; padding-left: 36px; margin-bottom: 15px; }
.comparison-col.classic li::before {
  content: "";
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(58, 47, 36, .08);
  opacity: 1;
}
.comparison-col.classic li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--ink-soft);
  opacity: .6;
  -webkit-mask: var(--mh-ico-croix) center / contain no-repeat;
  mask: var(--mh-ico-croix) center / contain no-repeat;
}
.comparison-col.mh li { color: var(--ink); }
.comparison-col.mh li::before {
  content: "";
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mh-lagon);
}
.comparison-col.mh li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 14px;
  height: 14px;
  background: #fff;
  -webkit-mask: var(--mh-ico-coche) center / contain no-repeat;
  mask: var(--mh-ico-coche) center / contain no-repeat;
}
.comparison-col.mh.mh-vu li { animation: mh-coche .7s var(--mh-ressort) backwards; }
.comparison-col.mh.mh-vu li:nth-child(1) { animation-delay: .45s; }
.comparison-col.mh.mh-vu li:nth-child(2) { animation-delay: .6s; }
.comparison-col.mh.mh-vu li:nth-child(3) { animation-delay: .75s; }
.comparison-col.mh.mh-vu li:nth-child(4) { animation-delay: .9s; }
@keyframes mh-coche { from { opacity: 0; translate: 16px 0; } }
.mh-vs {
  width: 66px;
  height: 66px;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mh-grad-cta);
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .85), 0 18px 34px -12px rgba(180, 35, 90, .65);
}
.mh-js .comparison-grid:not(.mh-vu) .mh-vs { opacity: 0; }
@media (max-width: 860px) {
  .comparison-grid { grid-template-columns: 1fr; gap: 14px; }
  .comparison-col { padding: 30px 24px; }
}
.comparison-grid.mh-vu .mh-vs { animation: mh-rebond .9s linear .35s backwards; }

/* 8.3 Vidéo : cadre arrondi et halo coloré. */
.video-feature { padding: 110px 0; }
.video-embed {
  border-radius: var(--mh-r-l);
  border: 3px solid var(--mh-corail);
  box-shadow: 0 18px 40px -22px rgba(58, 47, 36, .35);
}

/* 8.4 Preuves : trois cartes de couleur, frise Avant → Après, chiffre clé. */
.proof { padding: 110px 0; }
.proof-grid {
  gap: 28px;
  background: none;
  border: 0;
  perspective: 1400px;
}
.proof-card {
  --c: var(--mh-lagon); --c-doux: var(--mh-lagon-doux); --c-fonce: var(--mh-lagon-fonce);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--mh-r-l);
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--mh-ombre);
  padding: 34px 28px 28px;
  transform: perspective(900px) rotateX(var(--mh-rx, 0deg)) rotateY(var(--mh-ry, 0deg)) translateY(var(--mh-lift, 0px));
  transition: transform .5s var(--mh-ease), box-shadow .5s var(--mh-ease);
}
.proof-card:nth-child(3n+2) { --c: var(--mh-ciel); --c-doux: var(--mh-ciel-doux); --c-fonce: var(--mh-ciel-fonce); }
.proof-card:nth-child(3n+3) { --c: var(--mh-framboise); --c-doux: var(--mh-framboise-doux); --c-fonce: var(--mh-framboise-fonce); }
.proof-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, #f9b54c));
}
.proof-card:hover { --mh-lift: -6px; box-shadow: 0 34px 60px -34px color-mix(in srgb, var(--c) 80%, transparent), var(--mh-ombre); }
.proof-card .mini-avatar {
  width: 64px;
  height: 64px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c);
  margin-bottom: 18px;
}
.proof-card h3 { font-size: 26px; }
.proof-role { color: var(--c-fonce); font-weight: 500; }
.proof-step {
  position: relative;
  padding-left: 28px;
  margin-bottom: 16px;
}
.proof-step::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--c) 45%, #fff);
}
.proof-step:not(.proof-step--after)::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 22px;
  bottom: -14px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--c-doux), var(--c));
  transform-origin: top;
}
.proof-card.mh-vu .proof-step:not(.proof-step--after)::after { animation: mh-pousse .8s var(--mh-ease) backwards; }
.proof-card.mh-vu .proof-step:nth-of-type(2)::after { animation-delay: .35s; }
@keyframes mh-pousse { from { transform: scaleY(0); } }
.proof-label { color: var(--c-fonce); }
.proof-step--after {
  padding: 14px 16px 14px 46px;
  border-radius: var(--mh-r-s);
  background: var(--c-doux);
}
.proof-step--after::before {
  left: 14px;
  top: 16px;
  width: 22px;
  height: 22px;
  background: var(--c);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent);
}
.proof-step--after .proof-label { color: var(--c-fonce); }
.proof-step--after p { color: var(--ink); font-weight: 400; }
.proof-step--after > .proof-label::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 21px;
  width: 12px;
  height: 12px;
  background: #fff;
  -webkit-mask: var(--mh-ico-coche) center / contain no-repeat;
  mask: var(--mh-ico-coche) center / contain no-repeat;
}
.proof-quote { color: var(--c-fonce); border-top-color: color-mix(in srgb, var(--c) 30%, transparent); }
/* Carte de preuve faite d'une seule citation : elle ne s'étire pas, la citation passe au premier plan. */
.proof-card:not(:has(.proof-step)) { align-self: start; }
.proof-card:not(:has(.proof-step)) .proof-quote {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}
.proof-kpi {
  position: absolute;
  top: 26px;
  right: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  line-height: 1.1;
}
.proof-kpi b {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 34px;
  background: linear-gradient(110deg, var(--c-fonce), var(--c));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.proof-kpi > span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-fonce);
  max-width: 13ch;
}

/* 8.5 Connaître · Assumer · Incarner : trois cartes, trois couleurs. */
.solution.solution-method { padding-top: 30px; }
.pillars { gap: 26px; perspective: 1200px; }
.pillar {
  --c: var(--mh-lagon); --c-doux: var(--mh-lagon-doux); --c-fonce: var(--mh-lagon-fonce);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--mh-r-l);
  padding: 30px 28px 32px;
  background: linear-gradient(165deg, #fff 0%, var(--c-doux) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--mh-ombre);
  transition: transform .5s var(--mh-ressort), box-shadow .5s;
}
.pillar:nth-child(2) { --c: var(--mh-violet); --c-doux: var(--mh-violet-doux); --c-fonce: var(--mh-violet-fonce); }
.pillar:nth-child(3) { --c: var(--mh-corail); --c-doux: var(--mh-corail-doux); --c-fonce: var(--mh-corail-fonce); }
.pillar::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 190px;
  right: -50px;
  top: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 35%, transparent), transparent 70%);
}
.pillar:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 30px 50px -30px color-mix(in srgb, var(--c) 85%, transparent), var(--mh-ombre); }
.pillar-ico {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 16%, #fff);
  color: var(--c-fonce);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 10%, transparent);
  animation: mh-flotte 7s var(--mh-doux) infinite;
}
.pillar-ico svg { width: 58px; height: 58px; }
.pillar:nth-child(2) .pillar-ico { animation-delay: -2.3s; }
.pillar:nth-child(3) .pillar-ico { animation-delay: -4.6s; }
.pillar .script {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--c-fonce);
}
.pillar h3 { font-size: 28px; color: var(--ink); }
.pillar p { font-size: 15.5px; }
.solution-statement { text-wrap: balance; }
.mh-v1, .mh-v2, .mh-v3 { font-weight: 600; }
.mh-v1 { color: var(--mh-lagon-fonce); }
.mh-v2 { color: var(--mh-violet-fonce); }
.mh-v3 { color: var(--mh-corail-fonce); }
@media (max-width: 860px) {
  .pillar { text-align: left; }
}

/* 8.6 Les étapes : une frise qui se trace au défilement, une couleur par étape. */
.steps { padding: 110px 0; }
.step-list {
  --mh-frise: 0;
  position: relative;
  max-width: 940px;
  border: 0;
}
.step-list::before,
.step-list::after {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 34px;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  border-radius: 4px;
}
.step-list::before { background: rgba(58, 47, 36, .1); }
.step-list::after {
  background: linear-gradient(#8a5cd1, #14a99a 36%, #d6336c 66%, #f9b54c);
  transform-origin: top;
  transform: scaleY(var(--mh-frise));
}
html:not(.mh-js) .step-list::after { transform: none; }
.step {
  --c: var(--mh-violet); --c-doux: var(--mh-violet-doux); --c-fonce: var(--mh-violet-fonce);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 84px 1fr;
  gap: 0;
  padding: 18px 0;
  border: 0;
}
.step:last-child { border: 0; }
.step:nth-child(2) { --c: var(--mh-lagon); --c-doux: var(--mh-lagon-doux); --c-fonce: var(--mh-lagon-fonce); }
.step:nth-child(3) { --c: var(--mh-framboise); --c-doux: var(--mh-framboise-doux); --c-fonce: var(--mh-framboise-fonce); }
.step:nth-child(4) { --c: var(--mh-souci); --c-doux: var(--mh-souci-doux); --c-fonce: var(--mh-souci-fonce); }
.step .n {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: center;
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  margin-top: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, #fff), var(--mh-ombre);
  font-size: 30px;
  line-height: 1;
  color: var(--c-fonce);
  transition: background-color .6s var(--mh-ease), color .6s, box-shadow .6s, transform .6s var(--mh-ressort);
}
.step.mh-atteint .n,
html:not(.mh-js) .step .n {
  background: var(--c);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 25%, transparent), 0 14px 30px -12px var(--c);
}
.step:nth-child(4).mh-atteint .n { color: var(--ink); }
.step.mh-atteint .n::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--c);
  animation: mh-onde 1.6s var(--mh-ease) 1;
  opacity: 0;
}
@keyframes mh-onde { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.step > div:last-child {
  grid-row: 1;
  position: relative;
  padding: 24px 26px 26px;
  border-radius: var(--mh-r-l);
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--mh-ombre);
  transition: box-shadow .5s, transform .5s var(--mh-ressort);
}
.step:nth-child(odd) > div:last-child { grid-column: 3; margin-left: 10px; }
.step:nth-child(even) > div:last-child { grid-column: 1; margin-right: 10px; }
.step > div:last-child:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -28px color-mix(in srgb, var(--c) 85%, transparent), var(--mh-ombre); }
.step-ico {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 14px;
  border-radius: 22px;
  background: var(--c-doux);
  color: var(--c-fonce);
}
.step-ico svg { width: 42px; height: 42px; }
.step h3 { font-size: 24px; color: var(--ink); }
.step p { font-size: 15.5px; }
.step.mh-vu > div:last-child { animation: var(--mh-cote, mh-glisse-d) 1s var(--mh-ease) backwards; }
.step:nth-child(even).mh-vu > div:last-child { --mh-cote: mh-glisse-g; }
.mh-js .step[data-apparition]:not(.mh-vu) > div:last-child { opacity: 0; }
@media (max-width: 760px) {
  .step-list::before,
  .step-list::after { left: 31px; }
  .step { grid-template-columns: 64px 1fr; column-gap: 16px; }
  .step .n { grid-column: 1; margin-top: 14px; width: 56px; height: 56px; font-size: 26px; }
  .step:nth-child(odd) > div:last-child,
  .step:nth-child(even) > div:last-child { grid-column: 2; margin: 0; }
  .step:nth-child(even).mh-vu > div:last-child { --mh-cote: mh-glisse-d; }
}

/* 8.7 Offres : cartes de couleur, prix en dégradé, la Reprise a un anneau qui tourne. */
.offer { padding: 110px 0; }
.offer > .wrap > p { text-wrap: pretty; }
.offer .wrap p.offer-intro {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  box-shadow: var(--mh-ombre);
  color: var(--mh-corail-fonce);
  font-weight: 600;
}
.tier-grid {
  gap: 28px;
  background: none;
  border: 0;
  margin-bottom: 54px;
  perspective: 1400px;
}
.tier {
  --c: var(--mh-souci); --c-doux: var(--mh-souci-doux); --c-fonce: var(--mh-souci-fonce);
  position: relative;
  isolation: isolate;
  border-radius: var(--mh-r-l);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--mh-ombre-forte);
  padding: 34px 30px 30px;
  transform: perspective(900px) rotateX(var(--mh-rx, 0deg)) rotateY(var(--mh-ry, 0deg)) translateY(var(--mh-lift, 0px));
  transition: transform .5s var(--mh-ease), box-shadow .5s var(--mh-ease);
}
.tier-grid .tier:nth-child(2) { --c: var(--mh-lagon); --c-doux: var(--mh-lagon-doux); --c-fonce: var(--mh-lagon-fonce); }
#entrepreneurs-repreneurs .tier:nth-child(1) { --c: var(--mh-ciel); --c-doux: var(--mh-ciel-doux); --c-fonce: var(--mh-ciel-fonce); }
.tier--premium,
#entrepreneurs-repreneurs .tier--premium { --c: var(--mh-framboise); --c-doux: var(--mh-framboise-doux); --c-fonce: var(--mh-framboise-fonce); box-shadow: var(--mh-ombre-forte); }
.tier::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: 150px;
  border-radius: var(--mh-r-l) var(--mh-r-l) 0 0;
  background: linear-gradient(180deg, var(--c-doux), rgba(255, 255, 255, 0));
}
.tier:hover { --mh-lift: -6px; box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--c) 85%, transparent), var(--mh-ombre); }
.tier-ico {
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--c);
  color: #fff;
  box-shadow: 0 12px 24px -12px var(--c);
  transition: transform .6s var(--mh-ressort);
}
.tier:nth-child(1) .tier-ico { color: var(--ink); }
.tier-ico svg { width: 28px; height: 28px; }
.tier:hover .tier-ico { transform: rotate(-10deg) scale(1.08); }
.tier .tier-name { font-size: 28px; min-height: 0; margin-bottom: 20px; color: var(--ink); }
.tier p { font-size: 15.5px; }
.tier-label { color: var(--c-fonce); }
.tier-row--result {
  padding: 14px 16px;
  border-radius: var(--mh-r-s);
  background: var(--c-doux);
}
.tier-row--result .tier-label { color: var(--c-fonce); }
.tier .tier-price {
  font-size: 15px;
  color: var(--ink);
  border-top-color: color-mix(in srgb, var(--c) 30%, transparent);
}
.tier .tier-price::first-line {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0;
}
.tier-guarantee { color: var(--c-fonce); }
.tier-list li::before {
  content: "";
  top: 4px;
  width: 15px;
  height: 15px;
  background: var(--c-fonce, var(--mh-corail-fonce));
  -webkit-mask: var(--mh-ico-coche) center / contain no-repeat;
  mask: var(--mh-ico-coche) center / contain no-repeat;
}
.tier-link { color: var(--c-fonce); font-weight: 500; }
.mini-proof-badge { background: var(--c-doux); color: var(--c-fonce); }
/* Anneau de lumière autour de l'offre premium. */
.tier--premium { border: 3px solid var(--mh-framboise); }
.tier-grid--single { max-width: 520px; }

/* 8.8 À propos : photo en arche, anneau, chiffres qui défilent. */
.authority { padding: 110px 0; }
.authority-photo {
  position: relative;
  border-radius: 999px 999px 40px 40px;
  border: 3px solid var(--mh-corail);
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(58, 47, 36, .35);
}
.authority h2 { text-wrap: balance; }
.authority .closing { font-size: 22px; }
.mh-chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0 30px;
}
.mh-chiffre {
  --c: var(--mh-corail); --c-doux: var(--mh-corail-doux); --c-fonce: var(--mh-corail-fonce);
  padding: 16px 18px;
  border-radius: var(--mh-r-m);
  background: linear-gradient(150deg, #fff, var(--c-doux));
  box-shadow: var(--mh-ombre);
}
.mh-chiffre:nth-child(2) { --c: var(--mh-violet); --c-doux: var(--mh-violet-doux); --c-fonce: var(--mh-violet-fonce); }
.mh-chiffre:nth-child(3) { --c: var(--mh-lagon); --c-doux: var(--mh-lagon-doux); --c-fonce: var(--mh-lagon-fonce); }
.mh-chiffre:nth-child(4) { --c: var(--mh-souci); --c-doux: var(--mh-souci-doux); --c-fonce: var(--mh-souci-fonce); }
.mh-chiffre b {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.05;
  color: var(--c-fonce);
  font-variant-numeric: tabular-nums;
}
.mh-chiffre > span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.authority .mh-chiffre > span { font-size: 14px; color: var(--ink-soft); margin-bottom: 0; }

/* 8.9 Logos clients : bord fondu, en couleur au survol, pause au survol. */
.clients {
  position: relative;
  border: 0;
  background: rgba(255, 255, 255, .86);
  padding: 80px 0;
}
.clients::before,
.clients::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 12%;
  pointer-events: none;
}
.clients::before { left: 0; background: linear-gradient(90deg, #fbf7f0, rgba(251, 247, 240, 0)); }
.clients::after { right: 0; background: linear-gradient(270deg, #fbf7f0, rgba(251, 247, 240, 0)); }
.marquee { gap: 64px; animation-duration: 55s; }
.marquee:hover { animation-play-state: paused; }
.marquee img {
  height: 72px;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .5s, opacity .5s, transform .5s var(--mh-ressort);
}
.marquee img:hover { filter: none; opacity: 1; transform: scale(1.08); }

/* 8.10 Témoignages : cartes en couleurs pastel, en mosaïque. */
.testimonials { padding: 110px 0; }
.section-label { margin-bottom: 60px; }
.testimonial-photos {
  display: block;
  max-width: 1040px;
  columns: 2 420px;
  column-gap: 26px;
  margin-bottom: 70px;
}
.testimonial-photo-card {
  --c: var(--mh-framboise); --c-doux: var(--mh-framboise-doux); --c-fonce: var(--mh-framboise-fonce);
  position: relative;
  break-inside: avoid;
  margin: 0 0 26px;
  padding: 26px 26px 24px;
  border-radius: var(--mh-r-l);
  background: linear-gradient(160deg, #fff 30%, var(--c-doux));
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--mh-ombre);
  isolation: isolate;
  transition: transform .5s var(--mh-ressort), box-shadow .5s;
}
.testimonial-photo-card:nth-child(5n+2) { --c: var(--mh-lagon); --c-doux: var(--mh-lagon-doux); --c-fonce: var(--mh-lagon-fonce); }
.testimonial-photo-card:nth-child(5n+3) { --c: var(--mh-souci); --c-doux: var(--mh-souci-doux); --c-fonce: var(--mh-souci-fonce); }
.testimonial-photo-card:nth-child(5n+4) { --c: var(--mh-violet); --c-doux: var(--mh-violet-doux); --c-fonce: var(--mh-violet-fonce); }
.testimonial-photo-card:nth-child(5n+5) { --c: var(--mh-ciel); --c-doux: var(--mh-ciel-doux); --c-fonce: var(--mh-ciel-fonce); }
.testimonial-photo-card:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 30px 50px -30px color-mix(in srgb, var(--c) 85%, transparent), var(--mh-ombre); }
.testimonial-photo-card::after {
  content: "\201C";
  position: absolute;
  right: 22px;
  top: 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 92px;
  line-height: 1;
  color: var(--c);
  opacity: .22;
  z-index: -1;
  pointer-events: none;
}
.testimonial-photo-card .photo {
  width: 70px;
  height: 70px;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px var(--c);
}
.testimonial-photo-card p { font-size: 18px; color: var(--ink); }
.testimonial-photo-card cite { color: var(--c-fonce); font-weight: 600; letter-spacing: .08em; }
.mh-script-sep { display: block; margin: 40px 0 46px; }
.video-grid { gap: 30px; align-items: start; }
@media (min-width: 861px) {
  .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-card:nth-child(2) { grid-column: 1 / -1; order: 2; width: min(100%, 760px); justify-self: center; }
  .video-card .theme { font-size: clamp(19px, 1.9vw, 23px); min-height: 3.9em; display: flex; align-items: flex-end; justify-content: center; }
  .video-card:nth-child(2) .theme { min-height: 0; }
}
.video-card {
  --c: var(--mh-corail);
  padding: 22px 22px 18px;
  border-radius: var(--mh-r-l);
  background: rgba(255, 255, 255, .7);
  box-shadow: var(--mh-ombre);
}
.video-card:nth-child(1) { --c: #b79ce8; }
.video-card:nth-child(2) { --c: #6cc9b5; }
.video-card:nth-child(3) { --c: #e9b44c; }
.video-card:nth-child(4) { --c: #9db88d; }
.video-card video {
  border-radius: var(--mh-r-m);
  border: 3px solid var(--c);
  box-shadow: 0 14px 30px -20px rgba(58, 47, 36, .35);
}
.video-card cite { color: var(--mh-corail-fonce); }
.cite-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.t-grid-small > div {
  padding: 24px;
  border-radius: var(--mh-r-l);
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--mh-ombre);
}
.t-grid-small .mini-avatar { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--mh-souci); }
.success-story {
  position: relative;
  border: 0;
  padding: 40px 36px 34px;
  border-radius: var(--mh-r-l);
  background: linear-gradient(140deg, #fff 0%, #e2f6f2 55%, #e6f3fc 100%);
  box-shadow: var(--mh-ombre-forte);
}
.success-story .result {
  border-radius: 999px;
  background: var(--mh-grad-lagon);
  color: #fff;
  padding: 9px 18px;
  font-weight: 600;
  box-shadow: 0 12px 24px -14px rgba(20, 169, 154, .9);
}
.success-story cite { color: var(--mh-lagon-fonce); font-weight: 600; }
@media (max-width: 860px) {
  .testimonial-photos { columns: 1; }
}
@media (max-width: 560px) {
  .testimonial-photo-card { flex-direction: column; gap: 16px; padding: 24px 22px 22px; }
  .testimonial-photo-card .photo { width: 62px; height: 62px; }
  .testimonial-photo-card p { font-size: 18.5px; }
}

/* 8.11 Avis Google : les visages des personnes qui témoignent. */
.google-cta { padding: 70px 0 90px; }
.google-cta > .wrap {
  width: min(900px, calc(100% - 32px));
  padding: 50px clamp(20px, 5vw, 56px);
  border-radius: 40px;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--mh-ombre-forte);
}
.mh-visages {
  display: flex;
  justify-content: center;
  margin: 0 0 22px;
}
.mh-visages img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  margin-left: -12px;
  box-shadow: 0 0 0 3px #fff, 0 8px 18px -8px rgba(58, 47, 36, .5);
  transition: transform .4s var(--mh-ressort);
}
.mh-visages img:first-child { margin-left: 0; }
.mh-visages img:hover { transform: translateY(-6px) scale(1.08); z-index: 1; }
.google-cta.mh-vu .mh-visages img,
.mh-visages.mh-vu img { animation: mh-rebond .8s linear backwards; }
.mh-visages.mh-vu img:nth-child(2) { animation-delay: .08s; }
.mh-visages.mh-vu img:nth-child(3) { animation-delay: .16s; }
.mh-visages.mh-vu img:nth-child(4) { animation-delay: .24s; }
.mh-visages.mh-vu img:nth-child(5) { animation-delay: .32s; }
.mh-visages.mh-vu img:nth-child(6) { animation-delay: .4s; }

/* 8.12 Quiz : grande carte lumineuse. */
.quiz-cta { padding: 60px 0 90px; }
.quiz-cta > .wrap {
  position: relative;
  isolation: isolate;
  overflow: clip;
  width: min(980px, calc(100% - 32px));
  padding: 64px clamp(22px, 6vw, 64px);
  border-radius: 44px;
  background: linear-gradient(135deg, #fff1d6 0%, #ffe3dd 46%, #f4e4f8 100%);
  box-shadow: var(--mh-ombre-forte), inset 0 0 0 1px rgba(255, 255, 255, .8);
}
.quiz-cta > .wrap::before,
.quiz-cta > .wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.quiz-cta > .wrap::before {
  width: 320px;
  height: 320px;
  left: -110px;
  bottom: -150px;
  background: radial-gradient(circle, rgba(249, 181, 76, .55), transparent 68%);
  animation: mh-halo 12s var(--mh-doux) infinite alternate;
}
.quiz-cta > .wrap::after {
  width: 280px;
  height: 280px;
  right: -90px;
  top: -120px;
  background: radial-gradient(circle, rgba(138, 92, 209, .35), transparent 68%);
  animation: mh-halo 15s var(--mh-doux) -5s infinite alternate-reverse;
}
.quiz-cta h2 { text-wrap: balance; }
.quiz-cta .btn { padding: 18px 40px; font-size: 15px; }

/* 8.13 Questions fréquentes : cartes qui s'ouvrent en douceur. */
.faq { padding: 100px 0 110px; }
.faq-list { display: grid; gap: 14px; }
.faq-item {
  --c: var(--mh-violet); --c-doux: var(--mh-violet-doux); --c-fonce: var(--mh-violet-fonce);
  overflow: hidden;
  border: 0;
  padding: 0;
  border-radius: var(--mh-r-m);
  background: rgba(255, 255, 255, .8);
  box-shadow: var(--mh-ombre);
  transition: box-shadow .4s, background-color .4s;
}
.faq-item:first-child { border: 0; }
.faq-item:nth-child(4n+2) { --c: var(--mh-lagon); --c-doux: var(--mh-lagon-doux); --c-fonce: var(--mh-lagon-fonce); }
.faq-item:nth-child(4n+3) { --c: var(--mh-corail); --c-doux: var(--mh-corail-doux); --c-fonce: var(--mh-corail-fonce); }
.faq-item:nth-child(4n+4) { --c: var(--mh-ciel); --c-doux: var(--mh-ciel-doux); --c-fonce: var(--mh-ciel-fonce); }
.faq-item[open] { background: #fff; box-shadow: 0 24px 46px -30px color-mix(in srgb, var(--c) 80%, transparent), var(--mh-ombre); }
.faq-item summary {
  padding: 22px 24px 22px 26px;
  font-size: 20px;
  border-radius: var(--mh-r-m);
  transition: color .3s;
}
.faq-item summary:hover { color: var(--c-fonce); }
.faq-item summary::after,
.faq-item[open] summary::after {
  content: "";
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--c-doux);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
  transition: transform .5s var(--mh-ressort), background-color .4s;
}
.faq-item summary::before {
  content: "";
  position: absolute;
  right: 33px;
  width: 16px;
  height: 16px;
  background: var(--c-fonce);
  -webkit-mask: var(--mh-ico-plus) center / contain no-repeat;
  mask: var(--mh-ico-plus) center / contain no-repeat;
  transition: transform .5s var(--mh-ressort), background-color .3s;
  z-index: 1;
}
.faq-item summary { position: relative; }
.faq-item[open] summary::before { transform: rotate(135deg); background: #fff; }
.faq-item[open] summary::after { background: var(--c); transform: rotate(135deg); }
.faq-item p { margin: 0; padding: 0 26px 24px; }

/* 8.14 Pour qui, Pour aller plus loin (pages d'atterrissage) */
.audience { padding: 90px 0; }
.mh-suite { padding: 70px 0; text-align: center; }
/* Petites sections : halos plus petits, ancrés vers le bas, qui ne rallongent jamais la page. */
.mh-suite::before,
.mh-suite::after { width: min(640px, 90vw); }
.mh-suite::before { top: auto; bottom: -40px; }
.mh-suite::after { bottom: -40px; }
.mh-suite h2 { font-size: clamp(24px, 3vw, 30px); font-style: italic; margin-bottom: 24px; }
.mh-suite--404 { padding: 0 0 120px; }
.mh-suite .mh-chips { margin-bottom: 0; }

/* 8.15 Dernier appel : une nuit douce, des étoiles, un bouton qui brille. */
.final-cta {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin-top: 40px;
  border-radius: 48px 48px 0 0;
  background: linear-gradient(165deg, #2c1b2e 0%, #3a2a24 52%, #4a2621 100%);
}
.final-cta::before,
.final-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.final-cta::before {
  width: 720px;
  height: 720px;
  left: -260px;
  top: -320px;
  background: radial-gradient(circle, rgba(249, 181, 76, .32), rgba(242, 84, 91, .12) 45%, transparent 70%);
  animation: mh-halo 16s var(--mh-doux) infinite alternate;
}
.final-cta::after {
  width: 680px;
  height: 680px;
  right: -260px;
  bottom: -300px;
  background: radial-gradient(circle, rgba(138, 92, 209, .4), rgba(214, 51, 108, .14) 45%, transparent 70%);
  animation: mh-halo 19s var(--mh-doux) -7s infinite alternate-reverse;
}
.final-cta .script { color: #ffc46b; }
.final-cta h2 em {
  background: linear-gradient(100deg, #ffd27a, #ff9f8e 50%, #f6a9cb);
  -webkit-background-clip: text;
  background-clip: text;
}
.final-cta .btn-line-white {
  border: 0;
  padding: 18px 38px;
  background: var(--mh-grad-soleil);
  background-size: 170% 100%;
  color: #2c1b2e;
  font-weight: 600;
  box-shadow: 0 0 0 6px rgba(249, 181, 76, .14), 0 20px 50px -16px rgba(242, 84, 91, .8);
  animation: mh-lueur 3.2s var(--mh-doux) infinite;
}
.final-cta .btn-line-white:hover {
  background: var(--mh-grad-soleil);
  background-size: 170% 100%;
  background-position: 100% 0;
  transform: translateY(-3px);
  color: #2c1b2e;
}
@keyframes mh-lueur {
  0%, 100% { box-shadow: 0 0 0 6px rgba(249, 181, 76, .14), 0 20px 50px -16px rgba(242, 84, 91, .8); }
  50%      { box-shadow: 0 0 0 12px rgba(249, 181, 76, .06), 0 24px 60px -12px rgba(242, 84, 91, .95); }
}
.final-cta .hero-quiz-link {
  background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(255, 210, 122, .55);
  color: #ffe2cf;
  box-shadow: none;
}
.final-cta .hero-quiz-link:hover {
  background: rgba(255, 255, 255, .14);
  border-color: #ffd27a;
  color: #fff;
}
.mh-mission {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 21px !important;
  line-height: 1.5;
  max-width: 46ch !important;
  margin: 0 auto 40px !important;
  color: #fbeee0 !important;
  text-wrap: pretty;
}

/* 8.16 Pied de page */
footer { position: relative; }
footer a { transition: color .3s; }
footer a:hover { color: var(--mh-corail-fonce) !important; }


/* 9. Étincelles (posées par js/vivant.js dans le héros, le quiz, l'appel final) */

.mh-etincelles {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.mh-etincelle {
  position: absolute;
  width: var(--t, 14px);
  height: var(--t, 14px);
  background: var(--c, #ffd27a);
  -webkit-mask: var(--mh-ico-etoile) center / contain no-repeat;
  mask: var(--mh-ico-etoile) center / contain no-repeat;
  opacity: 0;
  animation: mh-scintille var(--d, 4s) var(--mh-doux) var(--r, 0s) infinite;
  translate: calc(var(--mh-sx, 0) * var(--p, 1) * 1px) calc(var(--mh-sy, 0) * var(--p, 1) * 1px);
  transition: translate .8s var(--mh-ease);
}
@keyframes mh-scintille {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  45%, 55% { opacity: 1; transform: scale(1) rotate(25deg); }
}


/* 10. Navigation par phases (ordinateur) */

.mh-phases {
  position: fixed;
  z-index: 45;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
@media (min-width: 1280px) and (min-height: 660px) {
  .mh-phases { display: block; }
}
.mh-phases ol {
  list-style: none;
  margin: 0;
  padding: 12px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 12px 30px -20px rgba(58, 47, 36, .5);
}
.mh-phases a {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.mh-phases a::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c, var(--mh-corail));
  opacity: .38;
  transition: transform .5s var(--mh-ressort), opacity .3s, box-shadow .4s;
}
.mh-phases a:hover::before { opacity: .8; transform: scale(1.3); }
.mh-phases a[aria-current="true"]::before {
  opacity: 1;
  transform: scale(1.55);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, #f2545b) 25%, transparent);
}
.mh-phases span {
  position: absolute;
  left: 34px;
  top: 50%;
  translate: -8px -50%;
  white-space: nowrap;
  padding: 6px 13px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 24px -14px rgba(58, 47, 36, .55);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s, translate .45s var(--mh-ease);
}
.mh-phases span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--c, var(--mh-corail));
  vertical-align: 1px;
}
.mh-phases a:hover span,
.mh-phases a:focus-visible span,
.mh-phases a.mh-annonce span { opacity: 1; translate: 0 -50%; }
.mh-phases [data-phase-lien="aurore"]  { --c: #f2545b; }
.mh-phases [data-phase-lien="brume"]   { --c: #8b84b8; }
.mh-phases [data-phase-lien="lagon"]   { --c: #14a99a; }
.mh-phases [data-phase-lien="ciel"]    { --c: #2e9be0; }
.mh-phases [data-phase-lien="violet"]  { --c: #8a5cd1; }
.mh-phases [data-phase-lien="aube"]    { --c: #d6336c; }
.mh-phases [data-phase-lien="soleil"]  { --c: #e09b25; }
.mh-phases [data-phase-lien="ocean"]   { --c: #2e9be0; }
.mh-phases [data-phase-lien="corail"]  { --c: #f2545b; }
.mh-phases [data-phase-lien="arc"]     { --c: #d6336c; }
.mh-phases [data-phase-lien="lilas"]   { --c: #8a5cd1; }
.mh-phases [data-phase-lien="nuit"]    { --c: #4a2621; }
.mh-invisible {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* 11. Bouton quiz flottant : il arrive une fois le héros passé. */

.quiz-float {
  background: var(--mh-grad-cta);
  background-size: 100% 180%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .6s var(--mh-ease), opacity .4s, background-position .6s, padding .25s;
  box-shadow: 0 10px 26px -10px rgba(180, 35, 90, .6);
}
.quiz-float::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--mh-ico-etoile) center / contain no-repeat;
  mask: var(--mh-ico-etoile) center / contain no-repeat;
  animation: mh-scintille-doux 2.6s ease-in-out infinite;
}
@keyframes mh-scintille-doux { 50% { transform: scale(.7) rotate(45deg); opacity: .7; } }
.quiz-float:hover { background: var(--mh-grad-cta); background-size: 100% 180%; background-position: 0 100%; }
.mh-quiz-cache .quiz-float {
  opacity: 0;
  pointer-events: none;
  transform: translateX(120%) translateY(-50%) rotate(180deg);
}
@media (max-width: 900px) {
  .quiz-float { background-size: 180% 100%; }
  .mh-quiz-cache .quiz-float { transform: translateY(160%); }
}


/* 12. Apparitions : une chorégraphie par phase -------------------------------
   js/vivant.js choisit le type selon la section (monte, brume, duel, carte…),
   décale les éléments d'un même groupe (--mh-delai), puis ajoute .mh-vu. */

.mh-js [data-apparition]:not(.mh-vu) { opacity: 0; }
[data-apparition].mh-vu {
  animation: var(--mh-anim, mh-monte) var(--mh-duree, .95s) var(--mh-courbe, var(--mh-ease)) var(--mh-delai, 0s) backwards;
}
[data-apparition="monte"]    { --mh-anim: mh-monte; }
[data-apparition="brume"]    { --mh-anim: mh-brume; --mh-duree: 1.4s; }
[data-apparition="glisse-g"] { --mh-anim: mh-glisse-g; }
[data-apparition="glisse-d"] { --mh-anim: mh-glisse-d; }
[data-apparition="rebond"]   { --mh-anim: mh-rebond; --mh-duree: .9s; --mh-courbe: linear; }
[data-apparition="eclosion"] { --mh-anim: mh-eclosion; --mh-duree: 1.2s; }
[data-apparition="duel-g"]   { --mh-anim: mh-duel-g; --mh-duree: 1.1s; }
[data-apparition="duel-d"]   { --mh-anim: mh-duel-d; --mh-duree: 1.1s; }
[data-apparition="zoom"]     { --mh-anim: mh-zoom; --mh-duree: 1.1s; }
[data-apparition="carte"]    { --mh-anim: mh-carte; --mh-duree: 1.1s; transform-origin: 50% 100%; }
[data-apparition="bascule"]  { --mh-anim: mh-bascule; --mh-duree: 1.1s; transform-origin: 50% 0; }
[data-apparition="volet"]    { --mh-anim: mh-volet; --mh-duree: 1.3s; }
[data-apparition="mosaique"] { --mh-anim: mh-mosaique; }
[data-apparition="tiroir"]   { --mh-anim: mh-tiroir; --mh-duree: .8s; }
[data-apparition="eclat"]    { --mh-anim: mh-eclat; --mh-duree: 1s; }
[data-apparition="nuit"]     { --mh-anim: mh-nuit; --mh-duree: 1.2s; }
[data-apparition="declencheur"] { --mh-anim: mh-rien; --mh-duree: .01s; }
.mh-js [data-apparition="declencheur"]:not(.mh-vu) { opacity: 1; }

@keyframes mh-rien { from { opacity: 1; } }
@keyframes mh-monte { from { opacity: 0; translate: 0 34px; } }
@keyframes mh-brume { from { opacity: 0; filter: blur(14px); scale: 1.05; } }
@keyframes mh-glisse-g { from { opacity: 0; translate: -56px 0; } }
@keyframes mh-glisse-d { from { opacity: 0; translate: 56px 0; } }
@keyframes mh-rebond {
  0%   { opacity: 0; scale: .7; }
  50%  { opacity: 1; scale: 1.035; }
  75%  { scale: .995; }
  100% { scale: 1; }
}
@keyframes mh-eclosion { from { opacity: 0; scale: .8; rotate: -10deg; } }
@keyframes mh-duel-g { from { opacity: 0; translate: -80px 0; rotate: -4deg; } }
@keyframes mh-duel-d { from { opacity: 0; translate: 80px 0; rotate: 4deg; } }
@keyframes mh-zoom { from { opacity: 0; scale: .88; } }
@keyframes mh-carte { from { opacity: 0; translate: 0 70px; rotate: x 24deg; } }
@keyframes mh-bascule { from { opacity: 0; translate: 0 40px; rotate: x -30deg; } }
@keyframes mh-volet {
  from { clip-path: inset(0 100% 0 0 round 40px); opacity: 0; }
  20%  { opacity: 1; }
  to   { clip-path: inset(0 0 0 0 round 40px); }
}
@keyframes mh-mosaique { from { opacity: 0; translate: 0 34px; scale: .94; } }
@keyframes mh-tiroir { from { opacity: 0; translate: -34px 0; } }
@keyframes mh-eclat { from { opacity: 0; scale: .9; filter: blur(8px); } }
@keyframes mh-nuit { from { opacity: 0; translate: 0 22px; filter: blur(10px); } }

@keyframes mh-tourne { to { transform: rotate(360deg); } }

/* Profondeur : js/vivant.js donne --mh-px aux illustrations marquées data-parallaxe. */
[data-parallaxe] { translate: 0 calc(var(--mh-px, 0) * 1px); }

/* Ce qui tourne en boucle s'arrête quand on ne le voit pas. */
.mh-js .mh-bandeaux:not(.mh-en-vue) .mh-bandeau__piste,
.mh-js .clients:not(.mh-en-vue) .marquee,
.mh-js .hero:not(.mh-en-vue) .mh-etincelle,
.mh-js .hero:not(.mh-en-vue) .hero-reframe em,
.mh-js .hero:not(.mh-en-vue)::before,
.mh-js .hero:not(.mh-en-vue)::after,
.mh-js .quiz-cta:not(.mh-en-vue) .mh-etincelle,
.mh-js .final-cta:not(.mh-en-vue) .mh-etincelle,
.mh-js .final-cta:not(.mh-en-vue)::before,
.mh-js .final-cta:not(.mh-en-vue)::after,
.mh-js .final-cta:not(.mh-en-vue) .btn-line-white { animation-play-state: paused; }


/* 13. Projecteur au survol (ordinateur) : une lumière suit la souris. */

@media (hover: hover) and (pointer: fine) {
  .mh-projecteur { --mh-mx: 50%; --mh-my: 50%; position: relative; }
  .mh-projecteur::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(380px circle at var(--mh-mx) var(--mh-my), color-mix(in srgb, var(--c, #f9b54c) 18%, transparent), transparent 62%);
    opacity: 0;
    transition: opacity .45s;
    pointer-events: none;
  }
  .mh-projecteur:hover::after { opacity: 1; }
  .mh-projecteur > * { position: relative; z-index: 1; }
  .mh-projecteur > .proof-kpi { position: absolute; }
}


/* 14. Transitions entre les pages du site (navigateurs qui savent le faire) */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mh-vt-sortie .38s var(--mh-doux) both; }
::view-transition-new(root) { animation: mh-vt-entree .6s var(--mh-ease) both; }
@keyframes mh-vt-sortie { to { opacity: 0; transform: translateY(-14px) scale(.985); filter: blur(4px); } }
@keyframes mh-vt-entree { from { opacity: 0; transform: translateY(24px); } }


/* 15. Mouvement réduit, impression, couleurs forcées ------------------------ */

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .mh-js [data-apparition]:not(.mh-vu),
  .mh-js .step[data-apparition]:not(.mh-vu) > div:last-child,
  .mh-js .ikigai-diagram:not(.mh-vu) .ikigai-groupe,
  .mh-js .ikigai-diagram:not(.mh-vu) .ikigai-centre,
  .mh-js .ikigai-diagram:not(.mh-vu) .ikigai-zones,
  .mh-js .ikigai-diagram:not(.mh-vu) .ikigai-libelles,
  .mh-js .comparison-grid:not(.mh-vu) .mh-vs { opacity: 1; }
  .mh-etincelles { display: none; }
  .mh-bandeau__piste { animation: none !important; }
  .marquee { animation: none !important; }
  .step-list::after { transform: none; }
}

@media print {
  body::before,
  .mh-bandeaux,
  .mh-phases,
  .mh-etincelles { display: none !important; }
  [data-apparition],
  .step > div:last-child,
  .ikigai-groupe,
  .ikigai-centre,
  .ikigai-zones,
  .ikigai-libelles { opacity: 1 !important; animation: none !important; filter: none !important; }
  .final-cta { background: var(--ink) !important; }
}

@media (forced-colors: active) {
  h1 em,
  h2 em,
  h3 em,
  .hero-reframe em,
  .comparison-col.mh h4,
  .proof-kpi b {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}


/* Retours à la ligne : titres et boutons équilibrés, paragraphes sans mot orphelin, une phrase par ligne sur mobile. */
h1, h2, h3, h4, summary, .btn, .hero-quiz-link, .tier-link, .mh-chips a, .nav-link, .proof-quote, .script { text-wrap: balance; }
p, li, figcaption, blockquote { text-wrap: pretty; }
.mh-chips a, .btn, .hero-quiz-link { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (min-width: 861px) { br.mh-sent { display: none; } }
@media (max-width: 860px) {
  .hero p.lede { line-height: 1.85; }
}

/* Mobile : tout est centré (titres, paragraphes, cartes), sauf les listes à coches, les frises
   Avant / Après, les cartes à icône à gauche et les questions fréquentes. Sur ordinateur, rien ne change. */
@media (max-width: 860px) {
  .authority .grid,
  .mh-constat-suite .wrap,
  .tier,
  .proof-card,
  .pillar,
  .step > div:last-child,
  .testimonial-photo-card,
  .mh-chiffre,
  .t-grid-small > div,
  .success-story,
  .video-card,
  .offer .wrap,
  .tier-row { text-align: center; }
  .tier-list,
  .tier-list li,
  .proof-step,
  .risk-list,
  a.avatar-item,
  .faq-item,
  .comparison-col ul { text-align: left; }
  .tier-ico,
  .pillar-ico,
  .step-ico,
  .proof-card .mini-avatar,
  .testimonial-photo-card .photo,
  .t-grid-small .mini-avatar { margin-left: auto; margin-right: auto; }
  .testimonial-photo-card { align-items: center; }
  .proof-kpi { position: static; align-items: center; text-align: center; margin: -4px auto 14px; }
  .proof-kpi span { max-width: none; }
  .mh-chips { justify-content: center; }
  .authority .btn { margin-left: auto; margin-right: auto; }
  .mh-chiffres { text-align: center; }
}


/* Idées du texte d'introduction : une idée par ligne, un peu d'air entre les groupes. */
.mh-idee { display: block; }
.mh-idee--tete { margin-top: .8em; }
.mh-idee--suite { margin-top: .2em; }
@media (max-width: 860px) {
  .mh-idee--tete { margin-top: 1.1em; }
  .mh-idee--suite { margin-top: .3em; }
  /* chaque nouvelle phrase d'un paragraphe : une ligne, avec un peu d'air */
  br.mh-sent { display: block; content: ""; margin-top: .8em; }
}


/* 16. Encart « Vous reprenez une entreprise ? » (après le quiz) : sobre, filet fin, corail en accent.
   Fond plein et posé au-dessus des halos de la section voisine : rien de coloré ne passe dedans. */
.mh-repreneurs { position: relative; z-index: 1; padding: 8px 32px 72px; }
.mh-repreneurs__cadre {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 36px 42px;
  background: #fbf9f5;
  border: 1px solid rgba(58, 47, 36, .18);
  border-top: 2px solid var(--mh-corail);
  text-align: center;
}
.mh-repreneurs__titre {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.15;
  max-width: none;
  margin: 0 0 12px;
  color: var(--ink);
}
.mh-repreneurs__texte { margin: 0 auto 22px; max-width: 30em; color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; }
.mh-repreneurs__lien {
  display: inline-block;
  color: var(--mh-corail-fonce);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .02em;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
}
.mh-repreneurs__lien::after { content: " \2192"; }
.mh-repreneurs__lien:hover { color: var(--ink); }
@media (max-width: 600px) {
  .mh-repreneurs { padding: 0 20px 56px; }
  .mh-repreneurs__cadre { padding: 32px 22px 34px; }
}