/* ==========================================================================
   Maison H Luxury · page « Liste de mariage » (/liste-de-mariage/)
   Tout vit sous .mhm : aucun sélecteur global (le thème Astra est partagé).
   Échelle au nombre d'or, base 16 px : .382 · .618 · 1 · 1.618 · 2.618 · 4.236 · 6.854 · 11.09 rem
   Signature : le double filet or des faire-part, taillé en octogone comme le cadre du logo,
   devient le ruban des boîtes cadeaux (étapes, étiquettes, nœud du carton-réponse).
   ========================================================================== */

.mhm {
  /* Couleurs relevées sur maison-h-luxury.fr */
  --mhm-or: #c8a24a;
  --mhm-or-sombre: #8a7350;
  --mhm-or-clair: #d4b87a;
  --mhm-or-texte: #7a6545;        /* or sombre mêlé d'encre : 5,2:1 sur ivoire, AA pour le petit texte */
  --mhm-ivoire: #faf8f4;
  --mhm-carton: #fff8f0;
  --mhm-creme: #f5f0e6;
  --mhm-sable: #e8ddc4;
  --mhm-encre: #1a1814;
  --mhm-encre-douce: #4a4136;     /* 9,4:1 sur ivoire */
  --mhm-gris: #5a5247;            /* 7,2:1 sur ivoire */

  /* Polices : Playfair Display est la seule serif réellement chargée par le site */
  --mhm-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --mhm-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mhm-script: "Monsieur La Doulaise", "Playfair Display", cursive;

  /* Espacements φ */
  --mhm-s1: .382rem;
  --mhm-s2: .618rem;
  --mhm-s3: 1rem;
  --mhm-s4: 1.618rem;
  --mhm-s5: 2.618rem;
  --mhm-s6: 4.236rem;
  --mhm-s7: 6.854rem;
  --mhm-section: clamp(4.236rem, 2.4rem + 5.4cqw, 6.854rem);
  --mhm-marge: clamp(1.25rem, 4.6cqw, 4.236rem);
  --mhm-largeur: 73.75rem;
  /* distance entre le bord du conteneur et le bord de la page (pour faire déborder un ruban) */
  --mhm-bord: max(var(--mhm-marge), (100cqw - var(--mhm-largeur)) / 2);

  /* expo-out : le geste se pose comme une feuille de papier qu'on dépose */
  --mhm-ease: cubic-bezier(.16, 1, .3, 1);

  /* Double filet octogonal, chanfrein 18 px, écart 5 px, dessiné 1:1 (tranche 30 px) */
  --mhm-filet-octo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='61' height='61' viewBox='0 0 61 61' fill='none' stroke='%23c8a24a' stroke-width='1'%3E%3Cpath d='M18.5 .5H42.5L60.5 18.5V42.5L42.5 60.5H18.5L.5 42.5V18.5Z'/%3E%3Cpath d='M20.57 5.5H40.43L55.5 20.57V40.43L40.43 55.5H20.57L5.5 40.43V20.57Z'/%3E%3C/svg%3E");
  /* Grain de papier, très léger */
  --mhm-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .22 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  container-type: inline-size;
  container-name: mhm;
  position: relative;
  overflow-x: clip;
  interpolate-size: allow-keywords;
  background: var(--mhm-ivoire);
  color: var(--mhm-encre);
  font-family: var(--mhm-sans);
  font-size: 1rem;
  line-height: 1.618;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mhm *,
.mhm *::before,
.mhm *::after { box-sizing: border-box; }

.mhm p,
.mhm ul,
.mhm ol,
.mhm li,
.mhm figure { margin: 0; padding: 0; }

.mhm ul,
.mhm ol { list-style: none; }

/* Astra donne une marge basse aux paragraphes et un retrait aux listes. En (0,2,1) on gagne
   quel que soit l'ordre de chargement, sans écraser nos marges hautes posées par classe. */
.mhm.mhm :is(p, ul, ol, figure) { margin-bottom: 0; }
.mhm.mhm :is(ul, ol) { padding-left: 0; }
.mhm .mhm-menu__liste { margin-top: 0; }

.mhm img { display: block; max-width: 100%; height: auto; border: 0; }

.mhm a { color: inherit; }

.mhm :focus-visible {
  outline: 2px solid var(--mhm-or-sombre);
  outline-offset: 3px;
}

/* cible d'ancre focalisée par le script : pas de contour autour d'une section entière */
.mhm [tabindex="-1"]:focus { outline: none; }

/* --------------------------------------------------------------------------
   Briques communes
   -------------------------------------------------------------------------- */

.mhm .mhm-conteneur {
  width: min(100% - 2 * var(--mhm-marge), var(--mhm-largeur));
  margin-inline: auto;
}

.mhm .mhm-section { padding-block: var(--mhm-section); }

/* Surtitre : petites capitales or, espacées (code du site) */
.mhm .mhm-sur__lieu { white-space: nowrap; }

/* le nom de la ville reste d'un seul tenant : l'espacement se resserre sous 470 px pour qu'il tienne à 320 */
.mhm .mhm-hero .mhm-sur { letter-spacing: clamp(.1em, 1.28cqw - 2.66px, .28em); }

.mhm .mhm-sur {
  margin: 0;
  font-family: var(--mhm-sans);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mhm-or-texte);
}

/* Titres : le thème impose h1-h3 en !important, on reprend chaque propriété */
.mhm .mhm-h1,
.mhm .mhm-h2,
.mhm .mhm-h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mhm-serif) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-transform: none !important;
  color: var(--mhm-encre) !important;
  text-wrap: balance;
}

.mhm .mhm-h2 {
  max-width: 18em;
  font-size: clamp(2rem, 1.45rem + 2.1cqw, 2.618rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.012em !important;
}

.mhm .mhm-texte {
  max-width: 34rem;
  color: var(--mhm-encre-douce);
  text-wrap: pretty;
}

/* Lien éditorial : filet or qui s'épaissit au survol */
.mhm .mhm-lien {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mhm-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mhm-encre);
  text-decoration: underline;
  text-decoration-color: var(--mhm-or);
  text-decoration-thickness: 1px;
  text-underline-offset: .6em;
  transition: text-decoration-color .382s, text-underline-offset .382s var(--mhm-ease);
}

.mhm .mhm-lien:hover {
  text-decoration-color: var(--mhm-encre);
  text-underline-offset: .45em;
}

/* Bouton : encre pleine, double filet or qui apparaît au survol */
.mhm .mhm-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .618em;
  min-height: 54px;
  margin: 0;
  padding: 0 var(--mhm-s5);
  border: 0;
  border-radius: 0;
  background: var(--mhm-encre);
  color: var(--mhm-carton);
  font-family: var(--mhm-sans);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 4px var(--mhm-encre), inset 0 0 0 5px transparent;
  transition: box-shadow .618s var(--mhm-ease), background-color .382s;
}

.mhm .mhm-bouton:hover {
  background: #2a2620;
  color: var(--mhm-carton);
  box-shadow: inset 0 0 0 4px #2a2620, inset 0 0 0 5px var(--mhm-or);
}

.mhm .mhm-bouton:focus-visible { outline-color: var(--mhm-or); }

/* Cadre octogonal à double filet (absolu, décoratif) */
.mhm .mhm-cadre {
  position: absolute;
  inset: var(--mhm-s2);
  border: 30px solid transparent;
  border-image: var(--mhm-filet-octo) 30 stretch;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   I. Hero : le faire-part
   -------------------------------------------------------------------------- */

.mhm .mhm-hero {
  display: flex;
  flex-direction: column;
  background: var(--mhm-ivoire);
}

.mhm .mhm-hero__carton {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--mhm-s5) calc(var(--mhm-marge) + var(--mhm-s3)) var(--mhm-s6);
  background-color: var(--mhm-ivoire);
  background-image: var(--mhm-grain);
}

.mhm .mhm-hero__carton .mhm-cadre { inset: var(--mhm-s2) var(--mhm-s2) var(--mhm-s3); }

.mhm .mhm-hero__texte {
  position: relative;
  width: 100%;
  max-width: 44rem;
}

.mhm .mhm-hero__filet {
  display: block;
  width: var(--mhm-s6);
  height: 1px;
  margin-bottom: var(--mhm-s4);
  background: var(--mhm-or);
  transform-origin: left center;
}

.mhm .mhm-h1 {
  margin-top: var(--mhm-s4) !important;
  line-height: .9 !important;
  letter-spacing: -.02em !important;
  font-size: 1rem !important;
  font-feature-settings: "kern", "liga", "dlig";
}

.mhm .mhm-h1__l1 {
  display: block;
  font-size: clamp(1.618rem, 1.1rem + 2.2cqw, 2.618rem);
  letter-spacing: -.005em;
  line-height: 1.1;
}

.mhm .mhm-h1__l2 {
  display: block;
  margin-top: -.06em;
  margin-left: -.04em;
  font-style: italic;
  font-size: clamp(3.4rem, 1rem + 16cqw, 7rem);
  letter-spacing: -.035em;
  line-height: .98;
  color: var(--mhm-encre);
}

.mhm .mhm-chapo {
  max-width: 30rem;
  margin-top: var(--mhm-s4);
  font-size: clamp(1.0625rem, .95rem + .5cqw, 1.272rem);
  line-height: 1.55;
  color: var(--mhm-encre-douce);
  text-wrap: pretty;
}

.mhm .mhm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mhm-s3) var(--mhm-s5);
  margin-top: var(--mhm-s5);
}

.mhm .mhm-hero__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #cdb48a;
}

.mhm .mhm-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

/* --------------------------------------------------------------------------
   Définition (pour Google et les moteurs de réponse)
   -------------------------------------------------------------------------- */

.mhm .mhm-definition {
  padding: var(--mhm-section) 0 0;
}

.mhm .mhm-definition__texte {
  max-width: 46rem;
  margin-inline: auto;
  font-family: var(--mhm-serif);
  font-size: clamp(1.25rem, 1rem + 1.1cqw, 1.618rem);
  line-height: 1.5;
  color: var(--mhm-encre);
  text-align: center;
  text-wrap: pretty;
}

.mhm .mhm-definition__texte dfn {
  font-style: italic;
  color: var(--mhm-encre);
}


/* --------------------------------------------------------------------------
   Comment ça marche : quatre étapes enfilées sur un ruban
   -------------------------------------------------------------------------- */

.mhm .mhm-etapes__liste {
  --mhm-num: 4.236rem;
  position: relative;
  display: grid;
  gap: var(--mhm-s5);
  max-width: 44rem;
  margin-top: var(--mhm-s5);
}

/* Le ruban : deux filets écartés de 5 px. ::before = trace sable, ::after = or qui se dessine */
.mhm .mhm-etapes__liste::before,
.mhm .mhm-etapes__liste::after {
  content: "";
  position: absolute;
  top: 1.3rem;
  bottom: 0;
  left: calc(var(--mhm-num) / 2 - 3.5px);
  width: 7px;
  border-inline: 1px solid var(--mhm-sable);
}

.mhm .mhm-etapes__liste::after {
  border-color: var(--mhm-or);
  transform-origin: top center;
  transform: scaleY(var(--mhm-p, 1));
}

.mhm .mhm-etape {
  position: relative;
  display: grid;
  align-content: start;
  grid-template-columns: var(--mhm-num) 1fr;
  gap: var(--mhm-s4);
  align-items: start;
}

.mhm .mhm-etape__num {
  position: relative;
  z-index: 1;
  display: block;
  padding-block: .2em .3em;
  background: var(--mhm-ivoire);
  font-family: var(--mhm-serif);
  font-style: italic;
  font-size: 2.618rem;
  line-height: 1;
  color: var(--mhm-or-sombre);
  text-align: center;
  transition: opacity .618s;
}

.mhm .mhm-etape__texte {
  padding-top: .55rem;
  color: var(--mhm-encre-douce);
  text-wrap: pretty;
}

.mhm .mhm-etape__texte strong {
  font-weight: 600;
  color: var(--mhm-encre);
}

/* --------------------------------------------------------------------------
   Ce que la liste vous garantit : étiquettes cadeaux pendues au ruban
   -------------------------------------------------------------------------- */

.mhm .mhm-garanties {
  background: var(--mhm-creme);
}

.mhm .mhm-etiquettes {
  --mhm-ecart: var(--mhm-s4);
  display: grid;
  gap: var(--mhm-ecart);
  margin-top: var(--mhm-s5);
}

/* Mobile : étiquettes couchées, nouées à un ruban vertical à gauche */
.mhm .mhm-etiquette {
  --mhm-fil: 1rem;
  position: relative;
  padding-left: calc(7px + var(--mhm-fil));
}

/* l'ombre vit sur une enveloppe : sur le carton elle serait coupée par le chanfrein */
.mhm .mhm-etiquette__ombre {
  position: relative;
  transform-origin: calc(-3.5px - var(--mhm-fil)) 50%; /* le balancement part du nœud sur le ruban */
  filter: drop-shadow(0 10px 14px rgba(26, 24, 20, .07)) drop-shadow(0 1px 2px rgba(26, 24, 20, .08));
}

.mhm .mhm-etiquette:nth-child(2) { --mhm-fil: 1.618rem; }
.mhm .mhm-etiquette:nth-child(3) { --mhm-fil: .618rem; }
.mhm .mhm-etiquette:nth-child(4) { --mhm-fil: 1.618rem; }

/* segment de ruban propre à chaque étiquette : bout à bout, ils forment un seul ruban */
.mhm .mhm-etiquette::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--mhm-ecart) / -2);
  bottom: calc(var(--mhm-ecart) / -2);
  width: 7px;
  border-inline: 1px solid var(--mhm-or);
}

.mhm .mhm-etiquette:first-child::after { top: calc(-1 * var(--mhm-s5)); }
.mhm .mhm-etiquette:last-child::after { bottom: calc(-1 * var(--mhm-s4)); }

/* le fil, du ruban à l'œillet : il appartient au carton et se balance avec lui */
.mhm .mhm-etiquette__ombre::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: calc(-1 * var(--mhm-fil));
  top: 50%;
  width: calc(var(--mhm-fil) + 26px);
  height: 1px;
  background: var(--mhm-or-sombre);
}

.mhm .mhm-etiquette__carton {
  --mhm-chanfrein: 23px;
  position: relative;
  min-height: 9rem;
  padding: var(--mhm-s4) var(--mhm-s4) var(--mhm-s4) 3.4rem;
  background: var(--mhm-carton);
  clip-path: polygon(var(--mhm-chanfrein) 0, 100% 0, 100% 100%, var(--mhm-chanfrein) 100%, 0 calc(100% - var(--mhm-chanfrein)), 0 var(--mhm-chanfrein));
  -webkit-mask: radial-gradient(circle at 26px 50%, transparent 5px, #000 5.6px);
  mask: radial-gradient(circle at 26px 50%, transparent 5px, #000 5.6px);
  transform-origin: 26px 50%;
  transition: transform .618s var(--mhm-ease);
}

/* le double filet imprimé sur l'étiquette */
.mhm .mhm-etiquette__carton::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 30px solid transparent;
  border-image: var(--mhm-filet-octo) 30 stretch;
  pointer-events: none;
}

.mhm .mhm-oeillet {
  position: absolute;
  left: 26px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 1.5px solid var(--mhm-or);
  border-radius: 50%;
}

.mhm .mhm-etiquette__repere {
  position: relative;
  font-size: 2.058rem !important;
  line-height: 1.05 !important;
  letter-spacing: -.01em !important;
}

.mhm .mhm-etiquette__texte {
  position: relative;
  margin-top: var(--mhm-s2);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--mhm-encre-douce);
  text-wrap: pretty;
}

.mhm .mhm-etiquette:hover .mhm-etiquette__carton { transform: rotate(-1.2deg); }

/* --------------------------------------------------------------------------
   Ce que nos mariés mettent sur leur liste : la carte du menu
   -------------------------------------------------------------------------- */

.mhm .mhm-univers__grille {
  display: grid;
  gap: var(--mhm-s5);
}

.mhm .mhm-univers__photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #cdb48a;
}

.mhm .mhm-univers__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mhm .mhm-univers__carte {
  position: relative;
  z-index: 1;
  margin: calc(-1 * (var(--mhm-s5) + var(--mhm-s6))) var(--mhm-s3) 0;
  filter: drop-shadow(0 18px 28px rgba(26, 24, 20, .1)) drop-shadow(0 2px 4px rgba(26, 24, 20, .06));
}

.mhm .mhm-menu {
  --mhm-chanfrein: 26px;
  position: relative;
  padding: var(--mhm-s6) var(--mhm-s5) var(--mhm-s5);
  background: var(--mhm-carton);
  clip-path: polygon(var(--mhm-chanfrein) 0, calc(100% - var(--mhm-chanfrein)) 0, 100% var(--mhm-chanfrein), 100% calc(100% - var(--mhm-chanfrein)), calc(100% - var(--mhm-chanfrein)) 100%, var(--mhm-chanfrein) 100%, 0 calc(100% - var(--mhm-chanfrein)), 0 var(--mhm-chanfrein));
  text-align: center;
}

.mhm .mhm-menu .mhm-cadre { inset: 13px; }

.mhm .mhm-plat {
  position: relative;
  padding-block: var(--mhm-s4);
}

.mhm .mhm-plat + .mhm-plat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--mhm-s5);
  height: 1px;
  margin-left: calc(var(--mhm-s5) / -2);
  background: var(--mhm-or);
}

.mhm .mhm-plat__titre {
  font-style: italic !important;
  font-size: clamp(1.4rem, 1.2rem + .7cqw, 1.618rem) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

.mhm .mhm-plat__titre a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-color .382s;
}

/* toute la ligne du menu est cliquable */
.mhm .mhm-plat__titre a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.mhm .mhm-plat:hover .mhm-plat__titre a,
.mhm .mhm-plat__titre a:focus-visible { text-decoration-color: var(--mhm-or); }

.mhm .mhm-plat__texte {
  max-width: 27rem;
  margin: var(--mhm-s2) auto 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--mhm-encre-douce);
  text-wrap: pretty;
}

.mhm .mhm-plat__fleche {
  display: inline-block;
  margin-left: .3em;
  font-style: normal;
  color: var(--mhm-or-sombre);
  transition: transform .618s var(--mhm-ease);
}

.mhm .mhm-plat:hover .mhm-plat__fleche { transform: translateX(.382em); }

/* --------------------------------------------------------------------------
   La liste de Léa & Thomas : le pic de la page
   -------------------------------------------------------------------------- */

.mhm .mhm-exemple {
  padding-bottom: var(--mhm-section);
}

.mhm .mhm-exemple__photo {
  position: relative;
  overflow: hidden;
  height: clamp(20rem, 61.8svh, 44rem);
  background: #6f6457;
}

.mhm .mhm-exemple__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 28%;
  transform: translate3d(0, var(--mhm-y, 0px), 0) scale(1.12);
  will-change: transform; /* parallaxe : un seul calque composité, pas de repaint au défilement */
}

.mhm .mhm-exemple__carton {
  position: relative;
  z-index: 1;
  width: min(100%, 52rem);
  margin: calc(-1 * var(--mhm-s6)) auto 0;
  padding: var(--mhm-s5) var(--mhm-s3) 0;
  background: var(--mhm-ivoire);
  text-align: center;
}

.mhm .mhm-exemple__titre {
  max-width: none;
  line-height: 1 !important;
}

.mhm .mhm-exemple__de {
  display: block;
  font-style: italic;
  font-size: clamp(1.272rem, 1rem + 1cqw, 1.618rem);
  color: var(--mhm-or-texte);
}

.mhm .mhm-script {
  display: block;
  padding: .12em .2em .18em;
  font-family: var(--mhm-script);
  font-size: clamp(2.4rem, 12.4cqw, 5.6rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.15;
  white-space: nowrap;
  letter-spacing: 0;
  color: var(--mhm-encre);
}

.mhm .mhm-exemple__texte {
  max-width: 30rem;
  margin: var(--mhm-s3) auto 0;
  color: var(--mhm-encre-douce);
  text-wrap: pretty;
}

.mhm .mhm-pieces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mhm-s3);
  margin-top: var(--mhm-s5);
}

/* Chaque pièce : un marque-place plié, l'image au-dessus du pli */
.mhm .mhm-piece__lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--mhm-carton);
  color: var(--mhm-encre);
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--mhm-sable);
  transition: transform .618s var(--mhm-ease), box-shadow .618s var(--mhm-ease);
}

.mhm .mhm-piece__lien:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--mhm-or-clair), 0 18px 30px -12px rgba(26, 24, 20, .18);
}

.mhm .mhm-piece__image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--mhm-carton);
}

.mhm .mhm-piece__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply; /* les fonds blancs des packshots se fondent dans le carton ivoire */
  transform: scale(var(--mhm-zoom, 1));
  transition: transform 1s var(--mhm-ease);
}

/* packshot à fond gris : il remplit le carré, comme les photos d'ambiance */
.mhm .mhm-piece__image--plein img { object-fit: cover; }
/* verres très pâles, petits dans leur cadre : on les rapproche */
.mhm .mhm-piece__image--proche { --mhm-zoom: 1.28; }

.mhm .mhm-piece__lien:hover .mhm-piece__image img { transform: scale(calc(var(--mhm-zoom, 1) * 1.045)); }

.mhm .mhm-piece__texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .3rem;
  flex: 1;
  padding: var(--mhm-s3) var(--mhm-s3) var(--mhm-s4);
  border-top: 1px solid var(--mhm-sable);
  /* l'ombre du pli d'un carton de table */
  background: linear-gradient(rgba(26, 24, 20, .05), rgba(26, 24, 20, 0) 14px), var(--mhm-carton);
}

.mhm .mhm-piece__marque {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mhm-or-texte);
}

.mhm .mhm-piece__nom {
  font-family: var(--mhm-serif);
  font-size: 1.0625rem;
  line-height: 1.3;
  text-wrap: balance;
}

.mhm .mhm-exemple__suite {
  margin-top: var(--mhm-s5);
  text-align: center;
}

/* --------------------------------------------------------------------------
   La boutique
   -------------------------------------------------------------------------- */

.mhm .mhm-boutique {
  background: var(--mhm-creme);
}

.mhm .mhm-boutique__grille {
  display: grid;
  gap: var(--mhm-s5);
}

.mhm .mhm-boutique__texte .mhm-texte { margin-top: var(--mhm-s4); }

.mhm .mhm-boutique__texte a {
  color: var(--mhm-encre);
  text-decoration: underline;
  text-decoration-color: var(--mhm-or);
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

.mhm .mhm-boutique__texte a:hover { text-decoration-color: var(--mhm-encre); }

.mhm .mhm-boutique__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mhm-s3);
  align-items: start;
}

.mhm .mhm-boutique__photo {
  overflow: hidden;
  aspect-ratio: 1 / 1.618;
  background: #b98676;
}

.mhm .mhm-boutique__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.mhm .mhm-boutique__photo--decale { margin-top: var(--mhm-s6); }

.mhm .mhm-boutique__photo--decale img {
  transform: translate3d(0, var(--mhm-y, 0px), 0) scale(1.1);
}

/* --------------------------------------------------------------------------
   Questions fréquentes
   -------------------------------------------------------------------------- */

.mhm .mhm-faq__grille {
  display: grid;
  gap: var(--mhm-s5);
}

.mhm .mhm-faq__photo { display: none; }

.mhm .mhm-question {
  border-top: 1px solid var(--mhm-sable);
}

.mhm .mhm-question:last-child { border-bottom: 1px solid var(--mhm-sable); }

.mhm .mhm-question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mhm-s4);
  min-height: 44px;
  padding: var(--mhm-s4) 0;
  font-family: var(--mhm-serif);
  font-size: clamp(1.125rem, 1rem + .5cqw, 1.272rem);
  line-height: 1.35;
  color: var(--mhm-encre);
  list-style: none;
  cursor: pointer;
}

.mhm .mhm-question summary::-webkit-details-marker { display: none; }

.mhm .mhm-plus {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}

.mhm .mhm-plus::before,
.mhm .mhm-plus::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--mhm-or-sombre);
  transition: transform .618s var(--mhm-ease);
}

.mhm .mhm-plus::after { transform: rotate(90deg); }
.mhm .mhm-question[open] .mhm-plus::after { transform: rotate(0deg); }
.mhm .mhm-question summary:hover .mhm-plus::before { transform: scaleX(1.236); }

.mhm .mhm-reponse {
  max-width: 38rem;
  padding: 0 var(--mhm-s5) var(--mhm-s4) 0;
  color: var(--mhm-encre-douce);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Carton-réponse : le formulaire, noué d'un ruban
   -------------------------------------------------------------------------- */

.mhm .mhm-final {
  position: relative;
  padding: 0 var(--mhm-marge) var(--mhm-section);
  background-color: var(--mhm-encre);
  background-image: radial-gradient(ellipse 60% 50% at 50% 38%, rgba(200, 162, 74, .1), rgba(200, 162, 74, 0) 70%);
}

.mhm .mhm-final__ruban {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: -48px;
  pointer-events: none;
}

.mhm .mhm-final__fil {
  display: block;
  width: 7px;
  height: var(--mhm-s6);
  border-inline: 1px solid var(--mhm-or);
  transform-origin: top center;
}

.mhm .mhm-noeud {
  display: block;
  width: 240px;
  height: 132px;
  margin-top: -67px;
  overflow: visible;
  fill: none;
  stroke: var(--mhm-or);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mhm .mhm-noeud path { vector-effect: non-scaling-stroke; }
.mhm .mhm-noeud .mhm-noeud__pli { stroke: var(--mhm-or-sombre); }

.mhm .mhm-inscription {
  --mhm-chanfrein: 26px;
  position: relative;
  z-index: 1;
  width: min(100%, 36rem);
  margin: 0 auto;
  padding: 5.6rem clamp(1.75rem, 6cqw, var(--mhm-s5)) var(--mhm-s5);
  background-color: var(--mhm-carton);
  background-image: var(--mhm-grain);
  clip-path: polygon(var(--mhm-chanfrein) 0, calc(100% - var(--mhm-chanfrein)) 0, 100% var(--mhm-chanfrein), 100% calc(100% - var(--mhm-chanfrein)), calc(100% - var(--mhm-chanfrein)) 100%, var(--mhm-chanfrein) 100%, 0 calc(100% - var(--mhm-chanfrein)), 0 var(--mhm-chanfrein));
  color: var(--mhm-encre);
  text-align: center;
  scroll-margin-top: 10.5rem; /* le nœud reste visible au-dessus du carton après le saut d'ancre */
}

.mhm .mhm-inscription::before {
  content: "";
  position: absolute;
  inset: 13px;
  border: 30px solid transparent;
  border-image: var(--mhm-filet-octo) 30 stretch;
  pointer-events: none;
}

.mhm .mhm-inscription > * { position: relative; }

.mhm .mhm-inscription .mhm-inscription__sur {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--mhm-or-texte);
}

.mhm .mhm-inscription .mhm-inscription__titre {
  margin: var(--mhm-s3) auto 0 !important;
  padding: 0 !important;
  max-width: 14em;
  font-family: var(--mhm-serif) !important;
  font-size: clamp(1.9rem, 1.4rem + 2cqw, 2.618rem) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.12 !important;
  letter-spacing: -.012em !important;
  text-transform: none !important;
  color: var(--mhm-encre) !important;
  text-wrap: balance;
}

.mhm .mhm-inscription .mhm-inscription__texte {
  max-width: 26rem;
  margin: var(--mhm-s3) auto 0;
  color: var(--mhm-encre-douce);
  text-wrap: pretty;
}

.mhm .mhm-inscription .mhm-form {
  display: grid;
  gap: var(--mhm-s3);
  margin: var(--mhm-s5) 0 0;
  text-align: left;
}

.mhm .mhm-inscription .mhm-champ {
  display: grid;
  gap: var(--mhm-s2);
  margin: 0;
}

.mhm .mhm-inscription .mhm-champ > span {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mhm-or-texte);
}

.mhm .mhm-inscription .mhm-champ input[type="email"] {
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 var(--mhm-s3);
  border: 1px solid var(--mhm-or-sombre);
  border-radius: 0;
  background: #fff;
  color: var(--mhm-encre);
  font-family: var(--mhm-sans);
  font-size: 1rem; /* 16 px : iOS ne zoome pas sur le champ */
  line-height: 1.2;
  box-shadow: none;
  transition: border-color .382s, box-shadow .382s;
}

.mhm .mhm-inscription .mhm-champ input[type="email"]::placeholder { color: #8d8478; opacity: 1; }

.mhm .mhm-inscription .mhm-champ input[type="email"]:focus {
  border-color: var(--mhm-encre);
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 162, 74, .45);
}

.mhm .mhm-inscription .mhm-champ input[type="email"]:focus-visible {
  outline: 2px solid var(--mhm-encre);
  outline-offset: 2px;
}

/* champ piège anti-robot : hors écran, jamais display:none */
.mhm .mhm-inscription .mhm-piege {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.mhm .mhm-inscription .mhm-form .mhm-bouton {
  width: 100%;
  padding: .75rem var(--mhm-s3);
}

/* sous 480 px : le libellé du bouton tient sur une ligne dès 360 px */
@container mhm (max-width: 479px) {
  .mhm .mhm-inscription .mhm-form .mhm-bouton {
    padding-inline: var(--mhm-s2);
    font-size: .72rem;
    letter-spacing: .06em;
  }
}

.mhm .mhm-inscription .mhm-inscription__mention {
  max-width: 28rem;
  margin: var(--mhm-s4) auto 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--mhm-gris);
  text-wrap: pretty;
}

.mhm .mhm-inscription .mhm-inscription__mention + .mhm-inscription__mention { margin-top: var(--mhm-s2); }

.mhm .mhm-inscription .mhm-inscription__mention a {
  display: inline-block;
  padding-block: .75rem !important; /* cible tactile ≥ 44 px sans décaler la ligne */
  margin-block: -.75rem;
  color: var(--mhm-encre);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--mhm-or);
  text-underline-offset: .25em;
}

.mhm .mhm-inscription--connectee { padding-bottom: var(--mhm-s6); }

.mhm .mhm-inscription .mhm-inscription__liens { margin: var(--mhm-s5) 0 0; }

/* --------------------------------------------------------------------------
   Liens face au thème enfant : « .entry-content a:not(...):not(.button) » (0,3,1)
   impose couleur encre, soulignement animé en background-image et padding-bottom.
   Sans ces !important, le texte du bouton passe en encre sur fond encre.
   -------------------------------------------------------------------------- */

.mhm a.mhm-bouton,
.mhm a.mhm-lien,
.mhm .mhm-plat__titre a,
.mhm a.mhm-piece__lien,
.mhm .mhm-boutique__texte a,
.mhm .mhm-inscription__mention a {
  background-image: none !important;
}

.mhm a.mhm-bouton,
.mhm a.mhm-bouton:hover,
.mhm a.mhm-bouton:focus-visible {
  color: var(--mhm-carton) !important;
  text-decoration: none !important;
}

.mhm a.mhm-bouton { padding-bottom: 0 !important; }

.mhm a.mhm-lien,
.mhm a.mhm-lien:hover {
  padding-bottom: 0 !important;
  color: var(--mhm-encre) !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
}

.mhm a.mhm-lien { text-decoration-color: var(--mhm-or) !important; }
.mhm a.mhm-lien:hover { text-decoration-color: var(--mhm-encre) !important; }

.mhm .mhm-plat__titre a,
.mhm .mhm-plat__titre a:hover {
  padding-bottom: 0 !important;
  color: var(--mhm-encre) !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: transparent !important;
}

.mhm .mhm-plat:hover .mhm-plat__titre a,
.mhm .mhm-plat__titre a:focus-visible { text-decoration-color: var(--mhm-or) !important; }

.mhm a.mhm-piece__lien,
.mhm a.mhm-piece__lien:hover {
  padding-bottom: 0 !important;
  color: var(--mhm-encre) !important;
  text-decoration: none !important;
}

.mhm .mhm-boutique__texte a,
.mhm .mhm-boutique__texte a:hover,
.mhm .mhm-inscription__mention a,
.mhm .mhm-inscription__mention a:hover {
  color: var(--mhm-encre) !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: var(--mhm-or) !important;
}

.mhm .mhm-boutique__texte a:hover,
.mhm .mhm-inscription__mention a:hover { text-decoration-color: var(--mhm-encre) !important; }

.mhm .mhm-boutique__texte a { padding-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   Mises en page larges (requêtes de conteneur : la page peut vivre dans n'importe quel gabarit)
   -------------------------------------------------------------------------- */

@container mhm (min-width: 640px) {
  .mhm .mhm-etiquettes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

  .mhm .mhm-etiquette {
    --mhm-fil: 2.618rem;
    padding-left: 0;
    padding-top: calc(7px + var(--mhm-fil));
  }
  .mhm .mhm-etiquette:nth-child(2) { --mhm-fil: 4.236rem; }
  .mhm .mhm-etiquette:nth-child(3) { --mhm-fil: 1.618rem; }
  .mhm .mhm-etiquette:nth-child(4) { --mhm-fil: 4.236rem; }

  /* ruban horizontal : chaque segment déborde de la moitié de l'écart */
  .mhm .mhm-etiquette::after,
  .mhm .mhm-etiquette:first-child::after,
  .mhm .mhm-etiquette:last-child::after {
    top: 0;
    bottom: auto;
    left: calc(var(--mhm-ecart) / -2);
    right: calc(var(--mhm-ecart) / -2);
    width: auto;
    height: 7px;
    border-inline: 0;
    border-block: 1px solid var(--mhm-or);
  }
  .mhm .mhm-etiquette:nth-child(odd)::after { left: calc(-1 * var(--mhm-bord)); }
  .mhm .mhm-etiquette:nth-child(even)::after { right: calc(-1 * var(--mhm-bord)); }

  .mhm .mhm-etiquette__ombre { transform-origin: 50% calc(-1 * var(--mhm-fil)); }
  .mhm .mhm-etiquette__ombre::before {
    left: 50%;
    top: calc(-1 * var(--mhm-fil));
    width: 1px;
    height: calc(var(--mhm-fil) + 26px);
  }

  .mhm .mhm-etiquette__carton {
    min-height: 18.5rem;
    padding: 3.4rem var(--mhm-s4) var(--mhm-s5);
    text-align: center;
    clip-path: polygon(var(--mhm-chanfrein) 0, calc(100% - var(--mhm-chanfrein)) 0, 100% var(--mhm-chanfrein), 100% 100%, 0 100%, 0 var(--mhm-chanfrein));
    -webkit-mask: radial-gradient(circle at 50% 26px, transparent 5px, #000 5.6px);
    mask: radial-gradient(circle at 50% 26px, transparent 5px, #000 5.6px);
    transform-origin: 50% 26px;
  }

  .mhm .mhm-oeillet { left: 50%; top: 26px; }

  .mhm .mhm-etiquette:hover .mhm-etiquette__carton { transform: rotate(1.2deg); }
}

@container mhm (min-width: 900px) {
  /* Hero : 61,8 % de faire-part, 38,2 % de photographie */
  .mhm .mhm-hero {
    display: grid;
    grid-template-columns: 61.8fr 38.2fr;
    min-height: clamp(38rem, calc(100svh - 90px), 56rem);
  }

  .mhm .mhm-hero__carton {
    padding: var(--mhm-s6) var(--mhm-s6) var(--mhm-s6) max(calc(var(--mhm-marge) + var(--mhm-s4)), calc((100cqw - var(--mhm-largeur)) / 2));
  }

  .mhm .mhm-hero__carton .mhm-cadre { inset: var(--mhm-s4); }

  .mhm .mhm-h1__l2 { font-size: clamp(4.236rem, 12.5cqw, 11.09rem); }

  .mhm .mhm-hero__photo { aspect-ratio: auto; height: 100%; }
  .mhm .mhm-hero__photo img { position: absolute; inset: 0; object-position: 50% 28%; }

  /* Menu : photo collante à gauche, carte qui défile et la chevauche */
  .mhm .mhm-univers__grille {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--mhm-s4);
    row-gap: 0;
  }
  .mhm .mhm-univers__grille > .mhm-h2 { grid-column: 1 / 8; margin-bottom: var(--mhm-s5) !important; }
  .mhm .mhm-univers__photo {
    grid-column: 1 / 8;
    grid-row: 2;
    align-self: start;
    position: sticky;
    top: 7rem;
  }
  .mhm .mhm-univers__carte {
    grid-column: 7 / 13;
    grid-row: 2;
    margin: var(--mhm-s7) 0 0;
  }

  .mhm .mhm-pieces {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mhm-s4);
  }
  .mhm .mhm-piece__nom { font-size: 1.125rem; }
  .mhm .mhm-exemple__carton { margin-top: calc(-1 * var(--mhm-s7)); padding-inline: var(--mhm-s5); }

  .mhm .mhm-boutique__grille {
    grid-template-columns: 38.2fr 61.8fr;
    gap: var(--mhm-s6);
    align-items: center;
  }
  .mhm .mhm-boutique__photos { gap: var(--mhm-s4); }
  .mhm .mhm-boutique__photo--decale { margin-top: var(--mhm-s7); }

  .mhm .mhm-faq__grille {
    grid-template-columns: 38.2fr 61.8fr;
    gap: var(--mhm-s6);
    align-items: start;
  }
  .mhm .mhm-faq__tete { position: sticky; top: 7rem; }
  .mhm .mhm-faq__photo {
    display: block;
    overflow: hidden;
    aspect-ratio: 1.618;
    margin-top: var(--mhm-s5);
    background: #6f6457;
  }
  .mhm .mhm-faq__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2); /* recadre sur les mains et la bague, sous le sourire */
    transform-origin: 50% 100%;
  }

  .mhm .mhm-final__fil { height: var(--mhm-s7); }
}

@container mhm (min-width: 1100px) {
  /* Étapes : le ruban court à l'horizontale, de la première pièce au colis */
  .mhm .mhm-etapes__liste {
    --mhm-num: 4.236rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--mhm-s5);
    max-width: none;
    margin-top: var(--mhm-s6);
  }
  .mhm .mhm-etapes__liste::before,
  .mhm .mhm-etapes__liste::after {
    top: calc(var(--mhm-num) * .62);
    bottom: auto;
    left: 0;
    right: calc(-1 * var(--mhm-bord));
    width: auto;
    height: 7px;
    border-inline: 0;
    border-block: 1px solid var(--mhm-sable);
  }
  .mhm .mhm-etapes__liste::after {
    border-color: var(--mhm-or);
    transform-origin: left center;
    transform: scaleX(var(--mhm-p, 1));
  }
  .mhm .mhm-etape { grid-template-columns: 1fr; gap: var(--mhm-s4); }
  .mhm .mhm-etape__num {
    justify-self: start;
    padding: 0 .382em 0 0;
    font-size: var(--mhm-num);
    text-align: left;
  }
  .mhm .mhm-etape__texte { padding-top: 0; padding-right: var(--mhm-s3); }

  .mhm .mhm-etiquettes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mhm .mhm-etiquette:nth-child(odd)::after { left: calc(var(--mhm-ecart) / -2); }
  .mhm .mhm-etiquette:nth-child(even)::after { right: calc(var(--mhm-ecart) / -2); }
  .mhm .mhm-etiquette:first-child::after { left: calc(-1 * var(--mhm-bord)); }
  .mhm .mhm-etiquette:last-child::after { right: calc(-1 * var(--mhm-bord)); }
  .mhm .mhm-etiquette:nth-child(4) { --mhm-fil: 6.854rem; }
}

/* --------------------------------------------------------------------------
   Mouvement : seulement si la personne ne l'a pas refusé
   -------------------------------------------------------------------------- */

@property --mhm-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 360deg;
}

@media (prefers-reduced-motion: no-preference) {
  /* Ouverture, sans JS : le cadre se trace, le filet se tire, les lignes se posent */
  .mhm .mhm-hero__carton .mhm-cadre {
    -webkit-mask: conic-gradient(from -45deg, #000 var(--mhm-angle), transparent 0);
    mask: conic-gradient(from -45deg, #000 var(--mhm-angle), transparent 0);
    animation: mhm-trace 2.618s var(--mhm-ease) .236s both;
  }
  .mhm .mhm-hero__filet { animation: mhm-tirer 1.618s var(--mhm-ease) .382s both; }
  .mhm .mhm-hero .mhm-sur { animation: mhm-poser 1s var(--mhm-ease) .146s both; }
  .mhm .mhm-h1__l1 { animation: mhm-poser 1.618s var(--mhm-ease) both; }
  .mhm .mhm-h1__l2 { animation: mhm-poser 1.618s var(--mhm-ease) .09s both; }
  .mhm .mhm-chapo { animation: mhm-poser 1.618s var(--mhm-ease) .382s both; }
  .mhm .mhm-actions { animation: mhm-poser 1.618s var(--mhm-ease) .5s both; }
  .mhm .mhm-hero__photo img { animation: mhm-zoom 18s cubic-bezier(.2, .6, .2, 1) both; }

  @keyframes mhm-trace { from { --mhm-angle: 0deg; } to { --mhm-angle: 360deg; } }
  @keyframes mhm-tirer { from { transform: scaleX(0); } }
  @keyframes mhm-poser { from { opacity: 0; transform: translate3d(0, .382em, 0); } }
  @keyframes mhm-zoom { from { transform: scale(1.08); } }

  /* Apparitions au défilement (la classe mhm--anim n'existe que si le JS tourne) */
  .mhm.mhm--anim [data-mhm-vu] {
    opacity: 0;
    transform: translate3d(0, 1.618rem, 0);
    transition: opacity 1s var(--mhm-ease), transform 1.618s var(--mhm-ease);
  }
  .mhm.mhm--anim [data-mhm-vu].mhm-vu { opacity: 1; transform: none; }

  /* groupes : les enfants arrivent en cascade, le conteneur ne bouge pas */
  .mhm.mhm--anim .mhm-groupe[data-mhm-vu] { opacity: 1; transform: none; }
  .mhm.mhm--anim .mhm-groupe[data-mhm-vu] > * {
    opacity: 0;
    transform: translate3d(0, 1.618rem, 0);
    transition: opacity 1s var(--mhm-ease), transform 1.618s var(--mhm-ease);
  }
  .mhm.mhm--anim .mhm-groupe.mhm-vu > * { opacity: 1; transform: none; }
  .mhm.mhm--anim .mhm-groupe.mhm-vu > :nth-child(2) { transition-delay: .146s; }
  .mhm.mhm--anim .mhm-groupe.mhm-vu > :nth-child(3) { transition-delay: .236s; }
  .mhm.mhm--anim .mhm-groupe.mhm-vu > :nth-child(4) { transition-delay: .382s; }
  .mhm.mhm--anim .mhm-groupe.mhm-vu > :nth-child(5) { transition-delay: .5s; }
  .mhm.mhm--anim .mhm-groupe.mhm-vu > :nth-child(6) { transition-delay: .618s; }
  .mhm.mhm--anim .mhm-groupe.mhm-vu > :nth-child(7) { transition-delay: .736s; }
  .mhm.mhm--anim .mhm-groupe.mhm-vu > :nth-child(8) { transition-delay: .854s; }

  /* Étiquettes : elles tombent du ruban et se balancent avant de s'immobiliser */
  .mhm.mhm--anim .mhm-etiquettes.mhm-groupe[data-mhm-vu] > * { transform: none; transition: opacity .618s; }
  .mhm.mhm--anim .mhm-etiquettes.mhm-vu .mhm-etiquette__ombre { animation: mhm-balance 2.618s var(--mhm-ease) both; }
  .mhm.mhm--anim .mhm-etiquettes.mhm-vu > :nth-child(2) .mhm-etiquette__ombre { animation-delay: .146s; }
  .mhm.mhm--anim .mhm-etiquettes.mhm-vu > :nth-child(3) .mhm-etiquette__ombre { animation-delay: .236s; }
  .mhm.mhm--anim .mhm-etiquettes.mhm-vu > :nth-child(4) .mhm-etiquette__ombre { animation-delay: .382s; }

  @keyframes mhm-balance {
    0% { transform: rotate(4deg); }
    24% { transform: rotate(-2.4deg); }
    42% { transform: rotate(1.4deg); }
    62% { transform: rotate(-.6deg); }
    100% { transform: rotate(0deg); }
  }

  /* Étapes : chaque chiffre s'éclaire quand le ruban l'atteint */
  .mhm.mhm--anim .mhm-etape__num {
    opacity: clamp(.28, (var(--mhm-p, 1) * 3.4 - var(--mhm-i, 0)) * 2 + .28, 1);
  }
  .mhm .mhm-etape:nth-child(2) { --mhm-i: 1; }
  .mhm .mhm-etape:nth-child(3) { --mhm-i: 2; }
  .mhm .mhm-etape:nth-child(4) { --mhm-i: 3; }

  /* Nœud : le ruban descend, puis la boucle se trace d'un seul trait */
  .mhm.mhm--anim .mhm-final__ruban[data-mhm-vu] { opacity: 1; transform: none; }
  .mhm.mhm--anim .mhm-final__ruban .mhm-final__fil {
    transform: scaleY(0);
    transition: transform 1.618s var(--mhm-ease);
  }
  .mhm.mhm--anim .mhm-final__ruban.mhm-vu .mhm-final__fil { transform: none; }
  .mhm.mhm--anim .mhm-noeud path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.618s var(--mhm-ease) 1s;
  }
  .mhm.mhm--anim .mhm-noeud .mhm-noeud__queue { transition-delay: 1.618s; }
  .mhm.mhm--anim .mhm-final__ruban.mhm-vu .mhm-noeud path { stroke-dashoffset: 0; }

  /* FAQ : ouverture en douceur là où le navigateur sait animer la hauteur */
  .mhm .mhm-question::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .618s var(--mhm-ease), content-visibility .618s allow-discrete;
  }
  .mhm .mhm-question[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mhm *,
  .mhm *::before,
  .mhm *::after {
    animation: none !important;
    transition: none !important;
  }
}