/*
Theme Name: Maïs Up
Theme URI: https://mayssa.cm
Author: Mayssa, Maïs Up
Description: Thème WordPress sur mesure pour le site Maïs Up. Une seule page, crème, jaune et rose, avec des animations qui rappellent Instagram. Thème de blocs : tout se modifie dans l'éditeur WordPress, sans aucun plugin.
Version: 5.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mais-up
*/

/* ==========================================================================
   Couleurs, polices et tailles : Apparence > Éditeur > Styles.
   Ce fichier ne contient que ce que l'éditeur ne sait pas faire seul.
   ========================================================================== */

:root{
  --mu-cream:var(--wp--preset--color--cream);
  --mu-yellow:var(--wp--preset--color--yellow);
  --mu-yellow-deep:var(--wp--preset--color--yellow-deep);
  --mu-pink:var(--wp--preset--color--pink);
  --mu-pink-dark:var(--wp--preset--color--pink-dark);
  --mu-pink-pale:var(--wp--preset--color--pink-pale);
  --mu-ink:var(--wp--preset--color--ink);
  --mu-soft:var(--wp--preset--color--ink-soft);
  --mu-white:var(--wp--preset--color--white);
  --mu-display:var(--wp--preset--font-family--display);
  --mu-line:rgba(28,23,18,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
/* Empêche le petit "rebond élastique" horizontal que les téléphones
   (surtout iPhone) déclenchent au moindre geste de swipe légèrement
   diagonal, même quand la page n'a officiellement aucun débordement
   horizontal réel — c'est ce rebond qui donnait l'impression que la
   page "glissait vers la droite". */
html,body{overscroll-behavior-x:none}
/* Empêche le navigateur de "corriger" la position de scroll tout seul
   quand une image plus haut dans la page finit de charger et décale le
   contenu — ça peut fausser le calcul de progression de la section
   "Comment on s'y prend" pendant qu'on scrolle. */
html,body{overflow-anchor:none}
/* Pas de overflow-x:hidden ici : posé sur le corps de la page entière,
   il force le navigateur (règle CSS peu connue) à traiter aussi l'axe
   vertical comme "auto", ce qui cassait le saut vers une ancre (#offres,
   etc.) au chargement de la page. Le débordement horizontal est déjà
   contenu section par section via ".mu-section:not(.mu-etapes)". */
body{-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* --------------------------------------------------------------------------
   1. Apparition au défilement
   Ces règles ne s'appliquent que si le JavaScript a démarré (.mu-js).
   Sans JavaScript, rien n'est caché : le site reste entièrement lisible.
   -------------------------------------------------------------------------- */
.mu-js .mu-reveal,
.mu-js .mu-reveal-left,
.mu-js .mu-reveal-right,
.mu-js .mu-reveal-scale{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .85s cubic-bezier(.22,1,.36,1) var(--mu-delay,0s),
             transform .85s cubic-bezier(.22,1,.36,1) var(--mu-delay,0s);
  will-change:opacity,transform;
}
/* Arrivée par le côté, comme sur les sites que tu aimes */
.mu-js .mu-reveal-left {transform:translateX(-70px)}
.mu-js .mu-reveal-right{transform:translateX(70px)}
.mu-js .mu-reveal-scale{transform:scale(.9) translateY(30px)}

.mu-js .mu-reveal.is-revealed,
.mu-js .mu-reveal-left.is-revealed,
.mu-js .mu-reveal-right.is-revealed,
.mu-js .mu-reveal-scale.is-revealed{opacity:1;transform:none}

/* Décalage en cascade dans une même rangée */
.mu-js .mu-stagger > *:nth-child(1){--mu-delay:0s}
.mu-js .mu-stagger > *:nth-child(2){--mu-delay:.13s}
.mu-js .mu-stagger > *:nth-child(3){--mu-delay:.26s}
.mu-js .mu-stagger > *:nth-child(4){--mu-delay:.39s}

.mu-js .mu-instant,
.mu-js .mu-instant .mu-word{transition:none!important}

/* Titres qui se révèlent mot par mot */
.mu-js .word-reveal .mu-word{
  display:inline-block;
  opacity:0;
  transform:translateY(.5em) rotate(-3deg);
  transition:opacity .6s cubic-bezier(.22,1,.36,1),
             transform .6s cubic-bezier(.34,1.56,.64,1);
  transition-delay:calc(var(--mu-i,0) * 80ms);
}
.mu-js .word-reveal.is-revealed .mu-word{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   2. Le petit signe qui ponctue les titres
   Ce n'est pas un emoji mais un caractère typographique : il prend la
   couleur de la marque et s'affiche exactement pareil sur tous les
   appareils, alors qu'un emoji couleur change d'un téléphone à l'autre.
   -------------------------------------------------------------------------- */
/* Une petite fleur, pour le côté girly de Mayssa. Utilisée avec parcimonie. */
.mu-fleur{
  display:inline-block;
  font-size:.8em;vertical-align:baseline;
  margin-left:.4em;color:var(--mu-pink);
}

/* Dans la conversation, les emojis sont voulus : c'est un vrai message.
   On force la police emoji d'Apple pour qu'ils aient l'allure iPhone. */
.mu-bulle{
  font-family:var(--wp--preset--font-family--body),
              "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

/* --------------------------------------------------------------------------
   3. En-tête : un menu en pastille qui flotte par-dessus la page
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:14px 20px;background:transparent;pointer-events:none;
}
/* Le flou est posé sur un ::before plutôt que directement sur cet
   élément : un backdrop-filter ancre les enfants "position:fixed" au
   lieu de l'écran entier (une subtilité CSS peu connue). Le menu
   plein écran de WordPress sur téléphone est *dans* ce bloc et se
   retrouvait donc coincé à l'intérieur de la petite pastille au lieu
   de couvrir l'écran. */
.site-header__inner{
  position:relative;pointer-events:auto;
  max-width:1140px;margin:0 auto;
  display:flex;align-items:center;gap:20px;
  padding:10px 12px 10px 22px;
  border:1px solid var(--mu-line);
  border-radius:999px;
  box-shadow:0 8px 30px rgba(28,23,18,.07);
}
.site-header__inner::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,253,244,.85);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border-radius:999px;
}
.site-header .wp-block-site-title{
  font-family:var(--mu-display);
  font-weight:400;font-size:1.05rem;letter-spacing:-.05em;
  margin-right:auto;line-height:1;
}
.site-header .wp-block-site-title a{color:var(--mu-ink);text-decoration:none}
.site-header .wp-block-site-title a:hover{color:var(--mu-pink)}
.site-header .wp-block-navigation{font-size:.96rem;font-weight:500}
.site-header .wp-block-navigation a{
  color:var(--mu-ink);text-decoration:none;padding:6px 4px;
  transition:color .18s ease;
}
.site-header .wp-block-navigation a:hover{color:var(--mu-pink)}
.site-header .header-cta .wp-block-button__link{padding:11px 22px;font-size:.94rem}

@media (max-width:781px){
  .site-header__inner{padding:8px 10px 8px 18px;gap:10px}
  .site-header .header-cta{display:none}
}

/* Le menu plein écran sur téléphone : le réglage "justifyContent:right"
   sert à coller le menu à droite du logo sur ordinateur, mais WordPress
   réutilise la même variable CSS pour aligner les liens une fois le menu
   ouvert en plein écran — ça les poussait tout à droite, avec un grand
   vide à gauche. WordPress lit cette valeur via une variable CSS
   (--navigation-layout-justification-setting) avec une spécificité plus
   forte que si on essayait de réécrire align-items directement : on
   recentre donc en changeant la variable elle-même. */
.wp-block-navigation__responsive-container.is-menu-open{
  --navigation-layout-justification-setting:center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  text-align:center;
}

/* Les pages simples (mentions légales, confidentialité...) n'ont pas
   de héros pour pousser le contenu sous le menu flottant : on ajoute
   la place nécessaire ici. */
.page-main{
  max-width:760px;margin-inline:auto;padding:clamp(6rem,14vw,9rem) 24px 4rem;
}
.page-main h1{margin:0 0 1.5rem}
.page-main p,.page-main li{color:var(--mu-soft);line-height:1.65}
.page-main h3{margin:2rem 0 .75rem;font-size:1.3rem}

/* --------------------------------------------------------------------------
   4. Réglages généraux des sections
   -------------------------------------------------------------------------- */
.site-main{display:block}
.mu-section{position:relative;padding-block:var(--wp--preset--spacing--60)}
/* Les éléments "mu-reveal-left/right" démarrent décalés hors écran (transform)
   avant d'être révélés au scroll ; ce décalage élargit la largeur scrollable
   de toute la page tant qu'on n'a pas défilé jusqu'à eux. On le contient
   section par section plutôt que sur html/body (ce qui casserait le
   position:sticky de la section épinglée, exclue ici).
   Important : on utilise "clip" et non "hidden" — avec "hidden",
   déclarer overflow-y:visible à côté ne suffit pas à éviter une règle
   CSS peu connue (le navigateur convertit quand même l'axe vertical en
   "auto" dès que l'un des deux axes n'est pas "visible", même si on l'a
   écrit explicitement). Chaque section devenait alors son propre petit
   conteneur de défilement (sans rien à faire défiler en pratique), ce qui
   empêchait tout saut vers une ancre (#offres, #a-propos...) de fonctionner
   depuis les pages mentions légales / confidentialité. "clip" produit le
   même résultat visuel sans jamais créer ce conteneur de défilement. */
.mu-section:not(.mu-etapes){overflow-x:clip}
.mu-section > .mu-inner{max-width:1140px;margin-inline:auto;padding-inline:24px}

.mu-head{text-align:center;max-width:700px;margin:0 auto clamp(3rem,6vw,4.5rem)}
.mu-head h2{margin:0;text-wrap:balance}
.mu-head .mu-lead{margin:22px auto 0;text-align:center}

.mu-band-yellow{background:var(--mu-yellow)}
.mu-band-white{background:var(--mu-white)}

.mu-offers > *,
.mu-about > *,
.mu-bulles > *,
.mu-avis > *,
.mu-preuve > *{margin-block:0}

.mu-eyebrow{
  display:inline-flex;align-items:center;
  font-size:.78rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--mu-ink);
  padding:9px 18px;
  border:1.5px solid rgba(28,23,18,.10);
  border-radius:999px;
  background:var(--mu-yellow);
  margin:0 0 26px;
}

.mu-mark{
  background:linear-gradient(transparent 58%, var(--mu-yellow-deep) 58%);
  padding:0 .12em;
}

.mu-lead{
  font-size:clamp(1.1rem,2.1vw,1.3rem);
  line-height:1.62;color:var(--mu-soft);max-width:620px;
}

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */
.wp-block-button__link{
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  box-shadow:0 6px 18px rgba(255,5,132,.22);
}
.wp-block-button__link:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,5,132,.3)}

.wp-block-button.is-ghost .wp-block-button__link{
  background:transparent;color:var(--mu-ink);
  border:1.5px solid var(--mu-line);box-shadow:none;
}
.wp-block-button.is-ghost .wp-block-button__link:hover{
  background:var(--mu-white);border-color:var(--mu-ink);color:var(--mu-ink);
  box-shadow:0 8px 20px rgba(28,23,18,.08);
}

/* --------------------------------------------------------------------------
   6. Section 1 : l'accroche
   -------------------------------------------------------------------------- */
.mu-hero{
  padding-block:clamp(7rem,14vw,11rem) clamp(5rem,10vw,8rem);
  text-align:center;
  background-image:
    radial-gradient(62% 58% at 6% -4%,  rgba(255,238,140,.62), rgba(255,247,189,0) 68%),
    radial-gradient(55% 52% at 98% 104%, rgba(255,5,132,.13),  rgba(255,5,132,0)  68%);
  background-repeat:no-repeat;
}
.mu-hero > .mu-inner{position:relative;z-index:1}
.mu-hero h1{margin:0 auto;max-width:20ch;text-wrap:balance}
.mu-hero .mu-lead{margin:30px auto 0;text-align:center}
.mu-hero .wp-block-buttons{justify-content:center;margin-top:40px;gap:14px}
.mu-hero-note{
  margin-top:26px;font-size:.92rem;color:var(--mu-soft);
  max-width:34ch;margin-inline:auto;text-wrap:balance;
}

/* La mascotte posée à côté des boutons */
.mu-hero__mascotte{
  position:absolute;right:8px;bottom:-26px;
  width:min(17vw,175px);margin:0;
  z-index:2;pointer-events:none;
  animation:mu-flotte 5s ease-in-out infinite;
}
.mu-hero__mascotte img{width:100%;display:block}
@keyframes mu-flotte{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-12px) rotate(2deg)}
}
@media (max-width:900px){
  /* Sur petit écran elle passerait par-dessus les boutons :
     on la descend sous le texte et on la rétrécit. */
  .mu-hero{padding-bottom:clamp(7rem,22vw,9rem)}
  .mu-hero__mascotte{width:96px;right:10px;bottom:-56px}
}
@media (max-width:480px){
  .mu-hero__mascotte{width:82px;right:6px;bottom:-48px}
  /* La mascotte est sous le texte, mais sur les écrans très étroits la
     dernière ligne (centrée) peut passer juste derrière elle : on
     laisse un peu de marge à droite pour que ça ne se touche jamais. */
  .mu-hero-note{padding-right:74px;max-width:none}
}

/* --------------------------------------------------------------------------
   7. Section 2 : la conversation en messages privés
   -------------------------------------------------------------------------- */
.mu-dm{
  max-width:560px;margin:0 auto;
  background:var(--mu-white);
  border:1.5px solid var(--mu-line);
  border-radius:26px;overflow:hidden;
  box-shadow:0 22px 50px rgba(28,23,18,.10);
}
.mu-dm__bar{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--mu-line);
  background:var(--mu-white);
  border-radius:26px 26px 0 0;
}
.mu-dm__avatar{margin:0;flex:0 0 44px;line-height:0}
.mu-dm__avatar img{
  width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 2px var(--mu-white), 0 0 0 4px var(--mu-pink);
}
.mu-dm__who > *{margin-block:0}
.mu-dm__name{margin:0;font-weight:700;font-size:1rem;line-height:1.2}
.mu-dm__status{margin:2px 0 0;font-size:.82rem;color:var(--mu-soft);line-height:1.2}

.mu-dm__thread{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:22px 18px 26px;
  background:linear-gradient(180deg, rgba(255,247,189,.30), rgba(255,255,255,0) 40%);
}
.mu-bulle{
  margin:0;max-width:82%;padding:12px 17px;border-radius:20px;
  font-size:1rem;line-height:1.45;
}
.mu-bulle--eux{background:#f2efe9;color:var(--mu-ink);border-bottom-left-radius:6px}
.mu-bulle--moi{
  background:var(--mu-pink);color:var(--mu-white);
  align-self:flex-end;border-bottom-right-radius:6px;font-weight:500;
}

/* Les trois points « en train d'écrire », dessinés en CSS */
.mu-bulle--saisie{
  background:#f2efe9;padding:15px 18px;border-bottom-left-radius:6px;
  min-width:56px;min-height:37px;position:relative;
}
.mu-bulle--saisie::before{
  content:"";display:block;position:absolute;
  top:50%;left:18px;margin-top:-3.5px;
  width:7px;height:7px;border-radius:50%;
  background:var(--mu-soft);
  box-shadow:12px 0 0 var(--mu-soft), 24px 0 0 var(--mu-soft);
  opacity:.45;animation:mu-points 1.3s infinite ease-in-out;
}
@keyframes mu-points{0%,100%{opacity:.3}50%{opacity:.75}}

.mu-js .mu-dm__thread .mu-bulle{opacity:0;transform:translateY(14px) scale(.96)}
.mu-js .mu-dm__thread.is-joue .mu-bulle{
  animation:mu-bulle-entre .45s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:calc(var(--mu-i,0) * 620ms);
}
@keyframes mu-bulle-entre{to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   8. Les titres à deux polices, l'italique posé sur le gras
   -------------------------------------------------------------------------- */
.mu-titre-double{
  display:flex;flex-direction:column;align-items:center;
  margin:0;text-align:center;line-height:.85;
}
.mu-titre-double__gras{
  font-family:var(--mu-display);
  letter-spacing:-.05em;
  color:var(--mu-ink);
}
/* La seconde ligne : une police et une couleur différentes, mais pas
   d'italique ni de chevauchement — pour rester dans sa propre patte
   plutôt que reprendre le procédé d'un confrère qui la suit sur Instagram. */
.mu-titre-double__ital{
  display:block;
  font-family:var(--wp--preset--font-family--display-alt);
  font-style:normal;font-weight:500;
  color:var(--mu-pink);
  letter-spacing:-.02em;
  font-size:.62em;
  margin-top:.02em;
}

/* --------------------------------------------------------------------------
   9. Section 3 : la méthode
   -------------------------------------------------------------------------- */
.mu-etapes{background:var(--mu-cream);padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.mu-etapes__piste{position:relative}
.mu-etapes__scene{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:clamp(26px,4.5vw,46px);
  padding:0 24px;
}

/* Le titre "Comment on s'y prend" : même police partout, seul le
   premier mot change de couleur. */
.mu-titre-mono{margin:0;text-align:center;text-wrap:balance}
.mu-titre-mono__rose{color:var(--mu-pink)}
.mu-etapes__scene .mu-titre-mono{font-size:clamp(2rem,5.6vw,3.2rem)}

/* Les 3 cartes, chacune dans sa couleur, empilées façon pile de photos
   posées de travers (inspiré de la page Laurent Sicre) — même mise en
   page sur ordinateur et téléphone. */
.mu-etapes__liste{
  width:min(640px,100%);margin-inline:auto;
}
.mu-etape{
  border:1.5px solid rgba(28,23,18,.10);
  border-radius:28px;
  padding:clamp(28px,3.6vw,40px) clamp(28px,3.6vw,40px) clamp(28px,3.6vw,40px) clamp(90px,13vw,120px);
  box-shadow:0 20px 44px rgba(28,23,18,.16);
}
.mu-etape:nth-child(1){background:linear-gradient(165deg,#fffdf2,#fff6c9);z-index:1;transform:rotate(-3deg)}
.mu-etape:nth-child(2){background:linear-gradient(165deg,#fff5fb,var(--mu-pink-pale));z-index:2;margin-top:-30px;transform:rotate(2.5deg)}
.mu-etape:nth-child(3){background:linear-gradient(165deg,#fffdf2,var(--mu-yellow-deep));z-index:3;margin-top:-30px;transform:rotate(-2deg)}

/* Le numéro, en gros, posé en filigrane. */
.mu-etape__num{
  position:absolute;left:clamp(18px,3vw,28px);top:50%;
  margin:0;transform:translateY(-50%);
  font-family:var(--mu-display);
  font-size:clamp(2.8rem,6vw,3.8rem);
  letter-spacing:-.05em;line-height:1;
  color:rgba(255,5,132,.18);
}
.mu-etape{position:relative}
.mu-etape h3{margin:0 0 8px;font-size:clamp(1.3rem,2.8vw,1.7rem)}
.mu-etape p{margin:0;color:var(--mu-soft);font-size:1rem;line-height:1.5;max-width:56ch}

/* La pile épinglée au défilement. Le vide qu'on voyait après la 3e carte
   venait de la scène épinglée, qui faisait toute la hauteur de l'écran
   (100vh) alors que les cartes n'en occupent que la moitié : le bas de
   la scène restait vide et défilait avec elle. La scène a maintenant la
   hauteur de son contenu, et la durée du défilement bloqué est un
   simple espace ajouté après elle (::after). */
.mu-js .mu-etapes__piste::after{content:"";display:block;height:75vh}
.mu-js .mu-etapes__scene{position:sticky;top:100px}
.mu-js .mu-etapes__liste{
  position:relative;display:block;
  min-height:clamp(230px,36vh,320px);
}
.mu-js .mu-etape{
  position:absolute;inset:0;margin:0;
  display:flex;flex-direction:column;justify-content:center;
  overflow-y:auto;
  opacity:0;
  transition:opacity .5s cubic-bezier(.22,1,.36,1),
             transform .5s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.mu-js .mu-etape:nth-child(1){z-index:1;transform:translateY(70px)}
.mu-js .mu-etape:nth-child(2){z-index:2;transform:translateY(70px) translate(14px,10px)}
.mu-js .mu-etape:nth-child(3){z-index:3;transform:translateY(70px) translate(-10px,20px)}
.mu-js .mu-etape.is-revealed{opacity:1;pointer-events:auto}
.mu-js .mu-etape:nth-child(1).is-revealed{transform:rotate(-4deg) translate(0,0)}
.mu-js .mu-etape:nth-child(2).is-revealed{transform:rotate(3.5deg) translate(14px,10px)}
.mu-js .mu-etape:nth-child(3).is-revealed{transform:rotate(-3deg) translate(-10px,20px)}
@media (max-width:600px){
  .mu-js .mu-etapes__liste{min-height:clamp(320px,58vh,420px)}
  .mu-js .mu-etape{padding-left:clamp(70px,20vw,90px)}
}

/* --------------------------------------------------------------------------
   9. Section 4 : les trois offres
   -------------------------------------------------------------------------- */
/* Le débordement horizontal des cartes inclinées est déjà contenu par
   la règle générale ".mu-section:not(.mu-etapes)" plus haut — #offres
   en fait partie, pas besoin de la répéter ici. */
.mu-offers{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  max-width:1140px;margin-inline:auto;align-items:stretch;
}
.mu-offer{
  background:var(--mu-white);
  border:1.5px solid var(--mu-line);
  border-radius:26px;padding:34px 30px 30px;
  display:flex;flex-direction:column;
}
.mu-offer__tag{
  display:inline-block;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--mu-soft);margin:0 0 12px;
}
.mu-offer h3{margin:0 0 14px;font-size:clamp(1.6rem,3.4vw,2.1rem)}
.mu-offer__for{font-size:1rem;color:var(--mu-soft);margin:0 0 22px;font-weight:500}
.mu-offer ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:14px}
/* Une puce en flexbox plutôt qu'en pseudo-élément positionné : elle
   reste alignée avec la première ligne même quand le texte fait deux
   lignes (comme "Un plan d'action hyper concret pour tout débloquer"). */
.mu-offer li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:1.02rem;line-height:1.45;
}
.mu-offer li::before{
  content:"";flex:0 0 16px;width:16px;height:16px;margin-top:.28em;
  border-radius:50%;
  background:var(--mu-yellow);box-shadow:inset 0 0 0 2px var(--mu-pink);
}
.mu-offer .wp-block-buttons{margin-top:auto}

/* L'offre phare : un ton plus profond, moins criard que le rose plein. */
.mu-offer.is-featured{
  background:var(--mu-pink-dark);border-color:var(--mu-pink-dark);color:var(--mu-white);
  box-shadow:0 18px 44px rgba(204,0,105,.28);
}
.mu-offer.is-featured h3{color:var(--mu-white)}
.mu-offer.is-featured .mu-offer__tag,
.mu-offer.is-featured .mu-offer__for{color:rgba(255,255,255,.88)}
.mu-offer.is-featured li::before{background:var(--mu-yellow);box-shadow:none}
.mu-offer.is-featured .wp-block-button__link{
  background:var(--mu-white);color:var(--mu-pink-dark);
  box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.mu-offer.is-featured .wp-block-button__link:hover{
  background:var(--mu-yellow);color:var(--mu-ink);
}

/* Les cartes arrivent chacune avec une légère inclinaison différente,
   comme une pile de photos posées sur une table (inspiré de la page
   Laurent Sicre) — puis se redressent un peu au survol. */
.mu-js .mu-offers .mu-offer{transform:translateY(40px) rotate(0deg)}
.mu-js .mu-offers .mu-offer:nth-child(1){transform:translateY(40px) rotate(-3deg)}
.mu-js .mu-offers .mu-offer:nth-child(2){transform:translateY(40px) rotate(2deg)}
.mu-js .mu-offers .mu-offer:nth-child(3){transform:translateY(40px) rotate(-2deg)}
.mu-js .mu-offers .mu-offer:nth-child(1).is-revealed{transform:rotate(-1.6deg)}
.mu-js .mu-offers .mu-offer:nth-child(2).is-revealed{transform:rotate(1.2deg)}
.mu-js .mu-offers .mu-offer:nth-child(3).is-revealed{transform:rotate(-1deg)}
.mu-js .mu-offers .mu-offer.is-revealed:hover{
  transform:rotate(0deg) translateY(-4px);
  transition-duration:.25s;
}

/* --------------------------------------------------------------------------
   10. Section 5 : la preuve et la vidéo
   -------------------------------------------------------------------------- */
.mu-preuve{
  display:grid;gap:clamp(34px,5vw,60px);
  grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
  align-items:center;max-width:1060px;margin-inline:auto;
}
@media (max-width:900px){.mu-preuve{grid-template-columns:1fr}}

.mu-preuve__chiffres{
  display:flex;align-items:baseline;gap:clamp(12px,3vw,26px);
  flex-wrap:wrap;margin-bottom:6px;
}
.mu-preuve__chiffres > *{margin-block:0}
.mu-preuve__num{font-family:var(--mu-display);line-height:1;letter-spacing:-.055em}
.mu-preuve__num.is-before{font-size:clamp(1.7rem,3.6vw,2.4rem);color:var(--mu-soft)}
.mu-preuve__num.is-after{
  font-size:clamp(3rem,8vw,5rem);color:var(--mu-pink);
  font-variant-numeric:tabular-nums;
}
.mu-preuve__fleche{font-size:clamp(1.3rem,2.6vw,1.8rem);color:var(--mu-soft)}
.mu-preuve__label{
  font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mu-soft);margin:0 0 30px;
}
.mu-preuve__citation{
  margin:0;padding:26px 0 0;border:0;border-top:1px solid var(--mu-line);
}
.mu-preuve__citation p{
  margin:0 0 18px;font-size:clamp(1.02rem,2vw,1.18rem);
  line-height:1.55;font-weight:500;
}
.mu-preuve__citation cite{font-style:normal;color:var(--mu-soft);font-size:.95rem}
.mu-preuve__citation cite strong{color:var(--mu-ink)}
@media (max-width:900px){
  .mu-preuve__chiffres,.mu-preuve__label{justify-content:center;text-align:center}
}

/* Avant / après d'un compte client : deux captures Instagram dans un
   cadre de téléphone, avec le chiffre clé sous chacune. */
.mu-avap{margin:0;width:100%;max-width:520px;margin-inline:auto}
.mu-avap__duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,3vw,22px);align-items:stretch}
.mu-avap__col{margin:0;display:flex;flex-direction:column}
.mu-avap__tel{
  border:5px solid var(--mu-ink);border-radius:26px;overflow:hidden;
  background:#111;box-shadow:0 22px 50px rgba(28,23,18,.26);
}
.mu-avap__tel img{display:block;width:100%;height:auto}
.mu-avap__carte{
  flex:1;justify-content:center;margin-top:14px;padding:12px 8px;border-radius:16px;text-align:center;
  background:var(--mu-white);border:1.5px solid var(--mu-line);
  display:flex;flex-direction:column;gap:2px;
}
.mu-avap__col--apres .mu-avap__carte{background:var(--mu-yellow-deep);border-color:transparent}
.mu-avap__etiquette{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mu-pink-dark);
}
.mu-avap__chiffre{
  font-family:var(--mu-display);font-weight:400;line-height:1;
  letter-spacing:-.04em;font-size:clamp(1.9rem,6vw,2.6rem);color:var(--mu-ink);
}
.mu-avap__detail{font-size:.8rem;line-height:1.35;color:var(--mu-soft)}
.mu-avap__legende{margin:18px 0 0;text-align:center;font-size:.9rem;color:var(--mu-soft)}


/* --------------------------------------------------------------------------
   11. Section 6 : les avis clients
   -------------------------------------------------------------------------- */
/* Un carrousel qui défile à l'horizontale, comme sur Instagram :
   on clique une flèche, ou on glisse au doigt/trackpad. Pas de défilement
   automatique déclenché en scrollant la page — seulement à la demande. */
.mu-avis-bloc{
  position:relative;max-width:1000px;margin-inline:auto;
}
.mu-avis{
  display:flex;gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  /* padding-top généreux : un conteneur avec overflow-x:auto rogne
     aussi le débordement vertical, donc le petit cœur qui dépasse en
     haut des cartes a besoin de cette marge pour rester visible. */
  padding:34px 6px 12px;margin:-28px -6px 0;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.mu-avis::-webkit-scrollbar{height:6px}
.mu-avis::-webkit-scrollbar-thumb{background:rgba(28,23,18,.2);border-radius:99px}
.mu-avis__carte{
  position:relative;
  scroll-snap-align:start;
  flex:0 0 clamp(260px,80vw,340px);
  background:var(--mu-white);
  border:1.5px solid var(--mu-line);
  border-radius:22px;padding:26px 24px 22px;
  display:flex;flex-direction:column;
  overflow:visible;
}
/* Un petit sticker sur une carte sur deux, comme sur le reste du site. */
.mu-avis__carte:nth-child(1)::after,
.mu-avis__carte:nth-child(3)::after{
  content:"💛";position:absolute;top:-14px;right:-10px;
  font-size:1.8rem;line-height:1;
  transform:rotate(14deg);
  filter:drop-shadow(0 4px 8px rgba(28,23,18,.2));
  pointer-events:none;
}
.mu-avis__fleche{
  position:absolute;top:50%;translate:0 -50%;z-index:2;
  width:44px;height:44px;border-radius:50%;
  background:var(--mu-white);border:1.5px solid var(--mu-line);
  color:var(--mu-ink);font-size:1.5rem;line-height:1;cursor:pointer;
  box-shadow:0 8px 20px rgba(28,23,18,.12);
  transition:background-color .18s ease, transform .18s ease;
}
.mu-avis__fleche:hover{background:var(--mu-pink);color:var(--mu-white)}
.mu-avis__fleche--gauche{left:-14px}
.mu-avis__fleche--droite{right:-14px}
@media (max-width:640px){
  .mu-avis__fleche{width:36px;height:36px;font-size:1.2rem}
  .mu-avis__fleche--gauche{left:-6px}
  .mu-avis__fleche--droite{right:-6px}
}
.mu-avis__carte::before{
  content:"★★★★★";
  color:var(--mu-pink);font-size:.95rem;letter-spacing:.14em;
  margin-bottom:14px;
}
.mu-avis__texte{
  margin:0 0 20px;font-size:.98rem;line-height:1.55;
}
.mu-avis__qui{
  margin:auto 0 0;font-size:.9rem;color:var(--mu-soft);line-height:1.4;
}
.mu-avis__qui strong{color:var(--mu-ink);font-size:.98rem}
.mu-avis__lien{text-align:center;margin:36px 0 0}
.mu-avis__lien a{font-weight:600}

/* --------------------------------------------------------------------------
   12. Section 7 : à propos
   -------------------------------------------------------------------------- */
.mu-about{
  display:grid;gap:clamp(28px,4vw,52px);
  grid-template-columns:minmax(200px,280px) minmax(0,1fr);
  align-items:center;max-width:1000px;margin-inline:auto;
}
.mu-about__photo{
  margin:0;border-radius:26px;overflow:hidden;
  border:1.5px solid var(--mu-line);background:var(--mu-white);
  width:100%;max-width:280px;
}
.mu-about__photo img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.mu-about h2{margin:0 0 20px;text-align:left}
.mu-about p{margin:0 0 16px;color:var(--mu-soft);font-size:1.05rem}
.mu-about p:last-child{margin-bottom:0}
.mu-about strong{color:var(--mu-ink)}

.mu-intime{
  max-width:1000px;margin:clamp(34px,5vw,52px) auto 0;
  background:var(--mu-yellow);
  border:1.5px solid rgba(255,5,132,.22);
  border-radius:26px;padding:clamp(32px,4.5vw,48px);
  position:relative;overflow:visible;
  box-shadow:0 20px 46px rgba(28,23,18,.10);
}
/* Un gros guillemet en filigrane, pour marquer que c'est une confidence */
/* De petits stickers inclinés, posés sur le coin de l'encadré, comme
   sur les posts Instagram qu'elle aime : plus doux qu'une forme géométrique. */
.mu-intime p.mu-intime__sticker{
  position:absolute;margin:0;font-size:2.6rem;line-height:1;
  pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(28,23,18,.18));
}
.mu-intime p.mu-intime__sticker--1{top:-18px;right:38px;transform:rotate(-16deg)}
.mu-intime p.mu-intime__sticker--2{top:14px;right:-10px;transform:rotate(14deg);font-size:1.8rem}
@media (max-width:600px){
  .mu-intime p.mu-intime__sticker--1{font-size:2rem;right:20px;top:-14px}
  .mu-intime p.mu-intime__sticker--2{font-size:1.4rem;right:-4px;top:8px}
}
/* Les images emoji injectées par WordPress ne doivent pas dépasser
   la taille du texte qui les entoure. */
.mu-intime__sticker img.emoji{width:1em;height:1em;vertical-align:middle}
.mu-intime p{
  position:relative;margin:0 0 16px;color:var(--mu-ink);
  font-size:1.08rem;line-height:1.62;
}
.mu-intime p:last-child{margin-bottom:0}
.mu-intime .mu-fleur{color:var(--mu-pink-dark)}

@media (max-width:860px){
  /* Une seule colonne pleine largeur : avant, cette règle limitait
     TOUT le bloc (photo ET texte) à 200px, ce qui écrasait le texte
     en lignes minuscules de 4-5 mots — largement plus étroit que
     l'encadré HLM juste en dessous.
     Important : ce bloc doit rester placé APRÈS les règles .mu-about__photo,
     .mu-about h2/p et .mu-intime p ci-dessus — à spécificité CSS égale,
     c'est l'ordre dans le fichier qui décide, pas la media query. Un
     ancien classement (media query avant les règles de base) annulait
     silencieusement ce centrage sur tous les téléphones. */
  .mu-about{grid-template-columns:minmax(0,1fr);justify-content:center}
  .mu-about__photo{margin-inline:auto;max-width:200px}
  /* Texte et photo centrés, comme l'encadré HLM juste en dessous
     (centré lui aussi sur ce même écran). */
  .mu-about,.mu-about h2,.mu-about p{text-align:center}
  .mu-intime p{text-align:center}
}

/* On resserre l'écart avant la section suivante : ce bloc doit
   enchaîner directement sur « On en parle », sans grand vide. */
#a-propos{padding-bottom:clamp(2.5rem,5vw,4rem)}

/* --------------------------------------------------------------------------
   13. Section 8 : contact — le texte à côté du calendrier, pas au-dessus
   -------------------------------------------------------------------------- */
.mu-rdv-bloc{
  display:flex;gap:clamp(2rem,5vw,4rem);align-items:center;
  max-width:1140px;margin-inline:auto;
}
.mu-rdv-bloc__texte.mu-head{
  text-align:left;max-width:none;margin:0;flex:0 1 380px;
}
.mu-rdv{
  flex:1 1 500px;min-width:0;
  border:1.5px solid var(--mu-line);
  border-radius:26px;overflow:hidden;background:var(--mu-white);
  box-shadow:0 18px 44px rgba(28,23,18,.08);
}
.mu-rdv iframe{display:block;width:100%;height:740px;border:0}
.mu-contact__mail{
  text-align:left;margin:22px 0 0;color:var(--mu-soft);font-size:.98rem;
}
.mu-contact__mail a{font-weight:700;color:var(--mu-pink-dark)}
@media (max-width:900px){
  .mu-rdv-bloc{flex-direction:column;align-items:stretch}
  .mu-rdv-bloc__texte.mu-head{flex-basis:auto;text-align:center}
  .mu-contact__mail{text-align:center}
}
@media (max-width:781px){.mu-rdv iframe{height:1020px}}

/* --------------------------------------------------------------------------
   14. Pied de page
   -------------------------------------------------------------------------- */
.site-footer{
  background:var(--mu-yellow);color:var(--mu-soft);
  border-top:1.5px solid rgba(28,23,18,.12);
  padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem;
}
.site-footer .mu-inner{max-width:1140px;margin-inline:auto;padding-inline:24px}
.site-footer__haut{
  display:grid;gap:clamp(36px,6vw,70px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:start;
}
@media (max-width:860px){.site-footer__haut{grid-template-columns:1fr}}

.site-footer__titre{
  color:var(--mu-ink);margin:0 0 14px;
  font-size:clamp(1.8rem,4vw,2.6rem);
}
.site-footer__pitch{
  margin:0 0 26px;font-size:1.02rem;line-height:1.6;
  max-width:42ch;color:var(--mu-soft);
}
/* Bouton Instagram dans ses propres couleurs, pas celles d'Instagram */
.site-footer .wp-block-button .wp-block-button__link{
  display:inline-flex;align-items:center;gap:10px;
}
.site-footer .wp-block-button .wp-block-button__link::before{
  content:"";width:19px;height:19px;flex:0 0 19px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='%23fff' stroke='none'/%3E%3C/svg%3E") no-repeat center/contain;
}

.site-footer__liens{
  display:grid;gap:28px;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.site-footer__colonne > *{margin-block:0}
.site-footer__label{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(28,23,18,.45);margin:0 0 14px;
}
.site-footer__liste{
  list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.96rem;
}
.site-footer a{color:var(--mu-soft);text-decoration:none}
/* Le bouton garde le blanc du thème : la règle générale ci-dessus,
   plus précise sur les liens simples, ne doit pas gagner sur lui. */
.site-footer .wp-block-button__link{color:var(--mu-white)}
.site-footer a:hover{color:var(--mu-pink)}
.site-footer__bas{
  margin:clamp(2.5rem,5vw,4rem) 0 0;padding-top:26px;
  border-top:1px solid rgba(28,23,18,.14);
  font-size:.88rem;color:rgba(28,23,18,.5);
  align-items:center;gap:16px;
}
.site-footer__mascotte{margin:0;flex:0 0 auto;width:44px}
.site-footer__mascotte img{display:block;width:100%}
@media (max-width:480px){
  .site-footer__bas{align-items:flex-start}
  .site-footer__mascotte{width:36px}
}

/* --------------------------------------------------------------------------
   15. La mascotte qui t'accompagne
   -------------------------------------------------------------------------- */
.mu-compagnon{
  position:fixed;left:clamp(10px,2.2vw,30px);bottom:clamp(14px,3vw,34px);
  z-index:90;width:clamp(62px,7vw,96px);
  pointer-events:none;
  opacity:0;transform:translateY(24px) scale(.9);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),
             transform .55s cubic-bezier(.34,1.56,.64,1);
}
.mu-compagnon.is-visible{opacity:1;transform:none}
.mu-compagnon img{
  width:100%;display:block;
  filter:drop-shadow(0 10px 16px rgba(28,23,18,.2));
  animation:mu-flotte 5.5s ease-in-out infinite;
}
/* Petit rebond quand elle change de pose en passant d'une section à l'autre */
.mu-compagnon.vient-de-changer img{animation:mu-saut .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes mu-saut{
  0%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-14px) scale(1.06)}
  100%{transform:translateY(0) scale(1)}
}
@media (max-width:781px){
  .mu-compagnon{width:54px}
}

/* --------------------------------------------------------------------------
   16. Le badge de l'offre phare, et la sélection des clients
   -------------------------------------------------------------------------- */
.mu-offer__badge{
  position:absolute;top:-16px;right:-10px;transform:rotate(9deg);
  margin:0;white-space:nowrap;
  background:var(--mu-yellow-deep);color:var(--mu-ink);
  font-size:.72rem;font-weight:700;letter-spacing:.06em;
  padding:7px 16px;border-radius:999px;
  box-shadow:0 6px 16px rgba(28,23,18,.18);
}
@media (max-width:480px){
  .mu-offer__badge{right:8px;font-size:.66rem;padding:6px 13px}
}
.mu-offer.is-featured{position:relative;overflow:visible}

.mu-selection{
  max-width:52ch;margin:26px auto clamp(2.6rem,5vw,3.6rem);
  text-align:center;font-size:.98rem;color:var(--mu-soft);
  background:var(--mu-white);
  border:1.5px dashed rgba(255,5,132,.3);
  border-radius:999px;padding:14px 26px;
}
@media (max-width:600px){.mu-selection{border-radius:20px}}

/* --------------------------------------------------------------------------
   17. Banque de poses pour la mascotte compagne (invisible sur la page,
   lue uniquement par le JavaScript)
   -------------------------------------------------------------------------- */
.mu-poses-compagnon{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;
}

/* --------------------------------------------------------------------------
   18. FAQ façon sticker « Question » d'Instagram
   -------------------------------------------------------------------------- */
.mu-faq{
  display:grid;gap:16px;max-width:720px;margin-inline:auto;
  padding-top:16px;
}
.mu-faq__item{
  background:var(--mu-white);
  border:1.5px solid rgba(28,23,18,.10);
  border-radius:20px;
  padding:6px;
  box-shadow:0 10px 26px rgba(28,23,18,.08);
}
.mu-faq__item summary{
  list-style:none;cursor:pointer;
  padding:16px 20px;border-radius:16px;
  font-weight:700;font-size:1.05rem;color:var(--mu-ink);
  display:flex;flex-direction:column;gap:6px;
  transition:background-color .15s ease;
}
.mu-faq__item summary::-webkit-details-marker{display:none}
.mu-faq__item summary::after{
  content:"+";position:absolute;
}
.mu-faq__item{position:relative}
.mu-faq__item > summary{position:relative;padding-right:46px}
.mu-faq__item > summary::after{
  content:"+";right:20px;top:16px;
  font-family:var(--mu-display);font-size:1.3rem;color:var(--mu-pink);
  transition:transform .25s ease;
}
.mu-faq__item[open] > summary::after{transform:rotate(45deg)}
.mu-faq__item:hover summary{background:var(--mu-yellow)}

/* Deux stickers sur le bord de leur carte, comme ailleurs sur le site. */
.mu-faq__item--coeur::before,
.mu-faq__item--fleur::before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(28,23,18,.2));
}
.mu-faq__item--coeur::before{
  content:"💛";top:-14px;right:-10px;transform:rotate(14deg);font-size:1.7rem;
}
.mu-faq__item--fleur::before{
  content:"🌼";top:-14px;left:-10px;transform:rotate(-12deg);font-size:1.8rem;
}

/* Le petit tampon « Question », comme le sticker Instagram */
.mu-faq__q{
  align-self:flex-start;
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mu-pink-dark);
  background:var(--mu-pink-pale);
  padding:4px 11px;border-radius:999px;
}
.mu-faq__item p{
  margin:0;padding:2px 20px 18px 20px;
  color:var(--mu-soft);font-size:.98rem;line-height:1.6;
}

/* Le lien « pose ta question », dans le même esprit que le sticker */
.mu-faq__autre{
  display:flex;align-items:center;gap:14px;
  max-width:560px;margin:36px auto 0;
  background:var(--mu-white);
  border:1.5px dashed rgba(255,5,132,.35);
  border-radius:999px;
  padding:14px 24px;
  text-decoration:none;color:var(--mu-ink);font-weight:600;
  transition:background-color .18s ease, transform .18s ease;
}
.mu-faq__autre:hover{background:var(--mu-pink-pale);transform:translateY(-2px)}
.mu-faq__autre-icone{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  background:var(--mu-pink);color:var(--mu-white);
  display:grid;place-items:center;font-family:var(--mu-display);font-size:1rem;
}

/* --------------------------------------------------------------------------
   19. « Sur le terrain » : les photos en action, façon scrapbook
   -------------------------------------------------------------------------- */
/* Une petite phrase de contexte, pour ne pas balancer 4 photos
   sans explication. */
.mu-action__intro{
  text-align:center;color:var(--mu-soft);
  max-width:44ch;margin:-16px auto clamp(2rem,4vw,2.8rem);
  font-size:1.02rem;
}

.mu-action{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:18px;max-width:1000px;margin:0 auto clamp(3rem,5vw,4rem);
}
.mu-action__photo{
  position:relative;margin:0;flex:1 1 200px;max-width:240px;
  /* overflow visible : les stickers peuvent déborder du cadre */
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.mu-action__photo:nth-child(odd){transform:rotate(-2.5deg)}
.mu-action__photo:nth-child(even){transform:rotate(2.5deg)}
.mu-action__photo:hover{transform:rotate(0) scale(1.03);z-index:1}
.mu-action__photo img{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  border-radius:20px;border:6px solid var(--mu-white);
  box-shadow:0 16px 34px rgba(28,23,18,.16);
}
/* Le cœur et la fleur, comme sur l'encadré HLM, mais seulement sur
   deux photos parmi les quatre. Image plutôt qu'emoji texte : rendu
   garanti identique partout : des caractères texte (❀ et ♥), pas des
   la fleur et le cœur, en vrais emojis. */
.mu-action__photo--sticker::after,
.mu-action__photo--sticker2::after{
  position:absolute;line-height:1;
  pointer-events:none;
  filter:drop-shadow(0 4px 8px rgba(28,23,18,.2));
}
.mu-action__photo--sticker::after{
  content:"🌼";top:-14px;right:-10px;transform:rotate(12deg);
  font-size:2rem;
}
.mu-action__photo--sticker2::after{
  content:"💛";bottom:-10px;left:-12px;transform:rotate(-14deg);
  font-size:1.7rem;
}

/* Les marques accompagnées, en vrais logos */
.mu-marques__label{
  text-align:center;font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--mu-soft);margin:0 0 26px;
}
/* Les logos défilent tous sur une seule ligne, comme les avis :
   on clique une flèche, ou on glisse au doigt/trackpad. */
.mu-marques-bloc{
  position:relative;max-width:900px;margin:0 auto;
}
.mu-marques{
  display:flex;flex-wrap:nowrap;align-items:center;
  gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 6px 12px;margin:0 -6px;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.mu-marques::-webkit-scrollbar{height:6px}
.mu-marques::-webkit-scrollbar-thumb{background:rgba(28,23,18,.2);border-radius:99px}
/* Chaque logo repose sur son propre fond blanc : certains logos ont un
   fond coloré d'origine (marine, rose...) qui deviendrait illisible en
   niveaux de gris — cette carte neutralise la différence. */
.mu-marques__logo{
  margin:0;background:var(--mu-white);flex:0 0 auto;
  scroll-snap-align:start;
  border:1.5px solid var(--mu-line);
  border-radius:14px;
  padding:16px 26px;
  display:flex;align-items:center;justify-content:center;
  height:92px;
}
.mu-marques__logo a{display:flex;align-items:center;height:100%}
.mu-marques__logo img{
  height:100%;width:auto;max-width:180px;object-fit:contain;
  display:block;
}
.mu-marques__fleche{
  position:absolute;top:50%;margin:0;z-index:2;
  /* transform, jamais margin-top, pour centrer verticalement : les
     styles de bloc de WordPress ajoutent automatiquement une marge
     aux enfants qui ne sont pas les premiers d'un groupe, ce qui
     décale un des deux boutons si on centre avec une marge. */
  transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:var(--mu-white);border:1.5px solid var(--mu-line);
  color:var(--mu-ink);font-size:1.5rem;line-height:42px;cursor:pointer;
  padding:0;text-align:center;
  box-shadow:0 8px 20px rgba(28,23,18,.12);
  transition:background-color .18s ease;
}
.mu-marques__fleche:hover{background:var(--mu-pink);color:var(--mu-white)}
.mu-marques__fleche--gauche{left:-14px}
.mu-marques__fleche--droite{right:-14px}
@media (max-width:600px){
  .mu-marques{gap:12px}
  .mu-marques__logo{height:72px;padding:10px 18px}
  .mu-marques__logo img{max-width:140px}
  .mu-marques__fleche{width:36px;height:36px;font-size:1.2rem;line-height:34px}
  .mu-marques__fleche--gauche{left:-6px}
  .mu-marques__fleche--droite{right:-6px}
}

/* --------------------------------------------------------------------------
   20. Le petit curseur qui tapote, façon sticker Instagram
   -------------------------------------------------------------------------- */
.mu-dm{position:relative;overflow:visible}
.mu-curseur{
  position:absolute;right:-6px;bottom:-14px;
  margin:0;font-size:2.4rem;line-height:1;
  transform-origin:70% 20%;
  animation:mu-tapote 1.8s ease-in-out infinite;
  pointer-events:none;filter:drop-shadow(0 6px 10px rgba(28,23,18,.22));
}
@keyframes mu-tapote{
  0%,100%{transform:translateY(0) rotate(0deg)}
  35%{transform:translateY(-6px) rotate(-8deg)}
  50%{transform:translateY(2px) rotate(0deg)}
}
@media (max-width:600px){
  .mu-curseur{font-size:1.9rem;right:0;bottom:-10px}
}

/* --------------------------------------------------------------------------
   21. La flèche pour remonter en haut de page
   -------------------------------------------------------------------------- */
.mu-remonter{
  position:fixed;right:20px;bottom:24px;z-index:95;
  width:48px;height:48px;border-radius:50%;
  background:var(--mu-pink);color:var(--mu-white);border:0;
  font-size:1.3rem;line-height:1;cursor:pointer;
  box-shadow:0 12px 28px rgba(255,5,132,.32);
  opacity:0;transform:translateY(16px) scale(.9);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, background-color .18s ease;
}
.mu-remonter.is-visible{opacity:1;transform:none;pointer-events:auto}
.mu-remonter:hover{background:var(--mu-pink-dark)}
@media (max-width:600px){
  .mu-remonter{width:42px;height:42px;right:14px;bottom:16px;font-size:1.1rem}
}

/* --------------------------------------------------------------------------
   22. Le sondage interactif, façon sticker Instagram
   -------------------------------------------------------------------------- */
.mu-sondage{
  max-width:560px;margin:40px auto 0;
  text-align:center;
}
.mu-sondage__q{
  margin:0 0 20px;font-weight:700;font-size:1.15rem;color:var(--mu-ink);
}
/* Posé simplement sur le fond de la page, pas dans une carte : les
   options s'enroulent sur plusieurs lignes si besoin, jamais de
   défilement horizontal à gérer. */
.mu-sondage__options{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
}
.mu-sondage__opt{
  font:inherit;font-weight:600;font-size:.96rem;cursor:pointer;
  padding:12px 22px;border-radius:999px;
  background:var(--mu-white);
  border:1.5px solid rgba(28,23,18,.14);
  color:var(--mu-ink);
  box-shadow:0 8px 18px rgba(28,23,18,.08);
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.mu-sondage__opt:hover{transform:translateY(-2px);border-color:var(--mu-pink)}
/* Les options restent cliquables : on peut changer d'avis à tout
   moment, la réponse choisie reste juste mise en avant. */
.mu-sondage.a-repondu .mu-sondage__opt{opacity:.7}
.mu-sondage.a-repondu .mu-sondage__opt.est-choisi{
  opacity:1;background:var(--mu-pink);border-color:var(--mu-pink);color:var(--mu-white);
}
/* Le résultat correspondant à la réponse choisie : pas juste un merci,
   un vrai conseil qui pointe vers l'offre la plus adaptée. */
.mu-sondage__resultat{
  display:none;
  margin:18px auto 0;max-width:420px;
  background:var(--mu-white);
  border:1.5px solid rgba(255,5,132,.2);
  border-radius:18px;padding:18px 22px;
  opacity:0;transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}
.mu-sondage__resultat.est-visible{display:block}
.mu-sondage.a-repondu .mu-sondage__resultat.est-visible{opacity:1;transform:none}
.mu-sondage__resultat p{margin:0 0 10px;font-size:.96rem;color:var(--mu-soft);line-height:1.5}
.mu-sondage__lien{
  display:inline-block;font-weight:700;font-size:.95rem;color:var(--mu-pink-dark);
  text-decoration:none;
}
.mu-sondage__lien:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   23. Ajustements d'espacement entre sections
   -------------------------------------------------------------------------- */
/* La section "Ça donne quoi" démarre trop loin des offres juste
   au-dessus : on réduit son espace du haut. */
#preuve{padding-top:clamp(2rem,4vw,3rem)}

/* --------------------------------------------------------------------------
   25. Ce texte doit tenir sur une seule ligne, comme demandé
   -------------------------------------------------------------------------- */
.mu-lead--une-ligne{max-width:none}
@media (min-width:641px){
  .mu-lead--une-ligne{
    white-space:nowrap;
    font-size:clamp(.92rem,2.1vw,1.3rem);
  }
}

/* --------------------------------------------------------------------------
   27. Les petits symboles (♥ ❀ ✦) à la place des emojis couleur : de
   simples caractères de texte, dans les couleurs du site, qui
   s'affichent à l'identique sur tous les téléphones sans exception.
   -------------------------------------------------------------------------- */
.mu-glyph{display:inline-block}
.mu-glyph--coeur{color:var(--mu-pink)}
.mu-glyph--fleur{color:var(--mu-pink)}
.mu-glyph--etoile{color:var(--mu-yellow-deep)}