/* POURQUOI « lvv-mbud » ET NON « lvv-mb ».
   La feuille du site, elle, utilise DEJA .lvv-mb depuis longtemps : ce sont les
   plaques « Miss Bud » posees dans les contenus (lvv.css, « body .lvv-mb {
   padding:40px 0 34px } », enfants .lvv-mbc, .lvv-sur, .lvv-chapo, .lvv-orn).
   Le module avait pris le meme nom, et les deux se contaminaient dans les deux
   sens : sa regle « .lvv-mb { position:fixed; bottom:-8px; z-index:999999 } »
   arrachait les plaques du site pour les coller en bas a droite par-dessus
   tout — mesure en production le 16/09, une plaque de 261 x 347 px deplacee en
   (999, 266) — et, en retour, le padding du site s appliquait a la racine du
   module. Un prefixe ne se choisit pas parce qu il est libre dans SON fichier :
   il se verifie dans la feuille du site. */
/**
 * MISS BUD CONSEILLERE — l habillage
 *
 * TOUT est prefixe par .lvv-mbud : rien de ce fichier ne peut peindre une autre
 * partie du site, et rien du site ne vise ces classes-la.
 *
 * TROIS CHOIX QUI ONT UNE RAISON
 *
 * 1. z-index 999999 — au-dessus de tout, sur decision de Florent le 2026-09-16.
 *    Le plus haut du site est 9999 (mesure du jour : bandeau cookies et porte
 *    d age). Elle passe donc devant le bandeau, le mega-menu, les carrousels,
 *    et tout ce qui viendrait plus tard sous cette barre.
 *
 *    CE QUI RESTE EN PLACE, ET QUI N EST PAS LA MEME CHOSE : la garde du
 *    script. Le z-index decide qui est devant quand DEUX choses s affichent ;
 *    la garde decide si elle s affiche. Tant que la porte d age est ouverte ou
 *    que le bandeau cookies couvre le bas, elle ne se pose pas du tout — on
 *    n interrompt pas une verification d age, meme en etant devant. Les deux
 *    reglages sont independants, et retirer l un ne retire pas l autre.
 *
 * 2. Chaque bouton redeclare sa police, ses marges et son fond. Le theme habille
 *    les boutons de la page ; nos elements ne doivent rien lui emprunter, sinon
 *    le panneau change d allure d une page a l autre.
 *
 * 3. Les couleurs de la maison sont ecrites en clair, avec la variable en
 *    premier choix. Les variables du site (--lvv-titre, --lvv-encre) existent,
 *    mais elles vivent dans une feuille qui a deja ete avalee une fois par un
 *    commentaire mal ferme : un repli en dur evite qu un panneau devienne
 *    illisible le jour ou ca se reproduit.
 */

.lvv-mbud {
    position: fixed;
    right: 20px;
    /* Huit pixels SOUS le bord, pour qu elle soit dans la page et non posee
       dessus. Mesure avant de choisir : a la taille servie, la semelle droite
       s arrete deja a 228 px sur 237 et seule la gauche descend plus bas —
       ces huit pixels ne rognent donc qu elle, et rien d autre. */
    bottom: -8px;
    /* Au-dessus de tout : 999999 contre 9999 pour le plus haut du site. La marge
       est volontaire — elle laisse la place a quelque chose qui devrait un jour
       passer devant elle, sans toucher a cette ligne. */
    z-index: 999999;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 14px;
    font-family: var(--lvv-texte, "Source Sans Pro", "Helvetica Neue", Arial, sans-serif);
    font-size: 15px;
    line-height: 1.45;
    color: #33413A;
    pointer-events: none;   /* seuls ses enfants attrapent le clic */
}

.lvv-mbud > * { pointer-events: auto; }

/* ── ELLE, au bord bas de l ecran ──────────────────────────────────────────
   Pas de pastille, pas de cadre, pas de rond : le personnage lui-meme, pose
   sur le bord inferieur, decoupe sur le fond. Demande de Florent le 2026-09-16.

   Trois details qui font la difference entre « une image posee la » et « elle
   sort de l ecran » :

   1. L image est ROGNEE AU CONTENU (aucune marge transparente sous les bottes),
      sinon elle flotte au-dessus du bord au lieu d y etre posee.
   2. L ombre est un drop-shadow, pas un box-shadow : elle epouse la silhouette
      au lieu de dessiner un rectangle autour.
   3. Elle ARRIVE EN MARCHANT par le bord droit — voir plus bas. C est ce
      mouvement qui donne l impression qu elle entre, plutot que d avoir
      toujours ete la.
   ───────────────────────────────────────────────────────────────────────── */

.lvv-mbud .lvv-mbud-perso {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* Invisible tant que l arrivee n est pas lancee — et non pas decalee par un
       transform, sinon elle resterait hors champ pour qui a coupe les
       animations. Ici, sans animation, elle est simplement la. */
    opacity: 0;
}

.lvv-mbud.lvv-mbud-entree .lvv-mbud-perso {
    opacity: 1;
}

/* ── ELLE ARRIVE EN MARCHANT ──────────────────────────────────────────────
   Demande de Florent le 2026-09-16. Elle entre par le bord droit et avance
   jusqu a sa place, au rythme de cinq pas.

   POURQUOI PAS DE VRAI CYCLE DE JAMBES : elles se croisent sur le dessin, et
   celle de derriere est en partie cachee par celle de devant. Les decouper
   demanderait de redessiner ce qui manque — de la retouche, plus de la
   decoupe. Le dessin est deja EN POSE DE MARCHE : il suffit de le faire
   avancer et rebondir pour que l oeil lise la marche. C est la vieille
   technique du personnage qui marche sans bouger les jambes, et elle tient.

   Ce qui la rend credible, en revanche, c est le BRAS qui balance en cadence —
   et ca, c est le decoupage qui l a permis.
   ───────────────────────────────────────────────────────────────────────── */

/* La traversee est une simple translation : le rebond du pas est porte par le
   corps lui-meme, en accord avec les jambes. Deux rebonds superposes — un ici,
   un la — donnaient une demarche de canard.

   SA DUREE ET SA COURBE NE SONT PAS CHOISIES, elles sont deduites de la foulee.
   Un pas deplace le pied de L*(sin(13,9+13) - sin(13,9-13)) = 31 px a l ecran ;
   il en faut donc SIX pour couvrir les 190 px, soit trois cycles. Et la courbe
   est LINEAIRE : les jambes tournent a vitesse constante, donc le corps doit
   avancer a vitesse constante. Le pas a ete accelere le 16/09 a la demande de
   Florent : le cycle ET la traversee ont ete raccourcis dans le MEME rapport
   (0,94 -> 0,80 s et 2,82 -> 2,40 s), sinon la foulee ne couvre plus la
   distance et les pieds se remettent a patiner. L ancien cubic-bezier freinait a l arrivee
   pendant que les jambes, elles, continuaient au meme rythme — les pieds
   patinaient sur les derniers centimetres. */
@keyframes lvv-mbud-arrive {
      0% { transform: translateX(190px); }
    100% { transform: translateX(0);     }
}

.lvv-mbud.lvv-mbud-marche .lvv-mbud-perso {
    animation: lvv-mbud-arrive 2.4s linear both;
}

/* ── LE CYCLE DE MARCHE ────────────────────────────────────────────────────
   Les deux jambes tournent autour de la MEME hanche, en opposition de phase :
   quand l une part devant, l autre part derriere. Un cycle complet vaut deux
   pas, d ou la cadence a 0,88 s pour 0,44 s de pas.

   Le dessin de depart a deja une jambe devant et une derriere : le cycle part
   donc de cette pose et y revient, sans a-coup au premier et au dernier pas.

   CE QUE LA MESURE A CORRIGE, ET CE QU ELLE A REFUSE
   Les angles du dessin ont ete releves : la jambe gauche descend a -18,9 deg de
   la verticale, la droite a +13,9. Le cycle ne les rend donc PAS symetriques —
   l ecart des pieds passe de 6,8 a 58,8 deg d un pas a l autre, et elle boite.

   On a essaye de les recentrer sur une meme verticale, seule facon geometrique
   d obtenir deux pas egaux avec une hanche unique. La planche des poses l a
   refuse : recentrees, les deux bottes se chevauchent presque en permanence, la
   silhouette devient illisible et la pose de repos, elle aussi, s abime. Ce
   personnage a des jambes en V et une seule hanche ; il ne peut pas marcher
   symetriquement, et on a prefere une silhouette lisible a une physique juste.

   Ce qui a ete corrige, en revanche, se mesure : le rebond du corps allait dans
   le mauvais sens une fois sur deux (voir plus bas), et la traversee freinait
   pendant que les jambes gardaient leur rythme.
   ───────────────────────────────────────────────────────────────────────── */

@keyframes lvv-mbud-jambe-avant {
      0% { transform: rotate(0deg);   }
     25% { transform: rotate(13deg);  }
     50% { transform: rotate(0deg);   }
     75% { transform: rotate(-13deg); }
    100% { transform: rotate(0deg);   }
}

@keyframes lvv-mbud-jambe-arriere {
      0% { transform: rotate(0deg);   }
     25% { transform: rotate(-13deg); }
     50% { transform: rotate(0deg);   }
     75% { transform: rotate(13deg);  }
    100% { transform: rotate(0deg);   }
}

.lvv-mbud.lvv-mbud-marche .lvv-mbud-img-jambe-g {
    animation: lvv-mbud-jambe-arriere .8s linear 3;
}

.lvv-mbud.lvv-mbud-marche .lvv-mbud-img-jambe-d {
    animation: lvv-mbud-jambe-avant .8s linear 3;
}

/* LE REBOND — il allait a l envers, et c est la mesure qui l a montre.

   Le corps est haut quand les jambes sont JOINTES (la hanche est alors a
   L*cos(0) = toute la longueur de jambe au-dessus du pied) et bas quand elles
   sont ECARTEES (L*cos(angle), donc moins). L ancien reglage montait aux deux
   quarts de cycle, a la double frequence — juste une fois sur deux, faux
   l autre. Avec ce dessin, les jambes sont jointes au quart du cycle et
   ecartees aux trois quarts : le rebond suit donc la MEME frequence qu elles.

   Son amplitude non plus n est pas choisie : la geometrie en demanderait 8 a
   10 px, ce qui ferait plonger le personnage. On garde 6 px d un bout a
   l autre, la fourchette basse, pour que le pas se sente sans sautiller. */
@keyframes lvv-mbud-rebond {
      0% { transform: translateY(0);    }
     25% { transform: translateY(-3px); }
     50% { transform: translateY(0);    }
     75% { transform: translateY(3px);  }
    100% { transform: translateY(0);    }
}

.lvv-mbud.lvv-mbud-marche .lvv-mbud-img-corps,
.lvv-mbud.lvv-mbud-marche .lvv-mbud-yeux,
.lvv-mbud.lvv-mbud-marche .lvv-mbud-img-bras {
    animation: lvv-mbud-rebond .8s ease-in-out 3;
}

/* Le bras balance par-dessus le rebond : c est la meme image, donc les deux
   animations ne peuvent pas cohabiter. Celle du balancement l emporte, et le
   rebond du bras est porte par la silhouette entiere. */
@keyframes lvv-mbud-balance {
      0% { transform: rotate(0deg) translateY(0);     }
     25% { transform: rotate(-9deg) translateY(-3px); }
     50% { transform: rotate(0deg) translateY(0);     }
     75% { transform: rotate(9deg) translateY(3px);   }
    100% { transform: rotate(0deg) translateY(0);     }
}

.lvv-mbud.lvv-mbud-marche .lvv-mbud-img-bras {
    animation: lvv-mbud-balance .8s ease-in-out 3;
}

.lvv-mbud .lvv-mbud-silhouette {
    position: relative;
    display: block;
    /* L ombre est portee ICI, une seule fois : sur chaque morceau, le bras
       projetterait la sienne sur le corps et la jointure se verrait. */
    filter: drop-shadow(0 6px 14px rgba(26, 33, 32, .30));
    transform-origin: 50% 100%;
    transition: transform .25s ease;
}

.lvv-mbud .lvv-mbud-img-corps {
    display: block;
    width: 168px;
    height: auto;
}

/* L ORDRE D EMPILEMENT, ECRIT NOIR SUR BLANC — il ne suit PAS l ordre du DOM.
   Le corps est le seul morceau dans le flux ; les autres sont positionnes, et
   un element positionne se peint au-dessus d un element en flux, meme s il le
   precede. Les jambes passaient donc devant le corps alors que le commentaire
   affirmait le contraire. Ca ne se voyait pas — la decoupe leur ayant retire
   tout le vert clair, leur partie haute est vide la ou le corps est dessine —
   mais une rotation plus ample l aurait montre. Chaque couche porte desormais
   son rang. */
.lvv-mbud .lvv-mbud-img-jambe { z-index: 0; }
.lvv-mbud .lvv-mbud-img-corps { position: relative; z-index: 1; }
.lvv-mbud .lvv-mbud-yeux      { z-index: 2; }
.lvv-mbud .lvv-mbud-img-bras  { z-index: 3; }

/* LES MORCEAUX POSES SUR LE CORPS. Tous au meme cadrage que lui, donc un
   simple inset:0 les met en place. Chacun pivote autour de son articulation,
   et chaque articulation se trouve dans la partie que le corps a gardee : c est
   ce qui masque les jointures quand ca tourne.

   Les pourcentages sont mesures sur le dessin d origine et imprimes par
   decouper-le-personnage.py — ils ne se devinent pas. */

.lvv-mbud .lvv-mbud-img-bras,
.lvv-mbud .lvv-mbud-img-jambe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.lvv-mbud .lvv-mbud-img-bras {
    transform-origin: 37.88% 49.64%;   /* l epaule */
}

.lvv-mbud .lvv-mbud-img-jambe {
    transform-origin: 62.63% 67.56%;   /* la hanche, commune aux deux */
}

/* ── LE THEME HALLOWEEN ────────────────────────────────────────────────────
   La sorciere est un AUTRE DESSIN, pas le meme avec un chapeau : mesure faite,
   alignee sur les bottes du personnage de base, sa main reste 14 px plus bas.
   Ses reperes ont donc ete remesures sur elle, et ses pivots ne sont pas ceux
   de la base — celui des jambes surtout, 51 % contre 63 %.

   Sa largeur non plus : le bord du chapeau porte son cadrage a 392 x 400 la ou
   la base fait 284 x 400. Servie a 168 px comme elle, la sorciere serait plus
   PETITE d un tiers. On sert donc 232 px, qui redonnent exactement les memes
   237 px de haut — c est la hauteur qui doit coincider, jamais la largeur. */
.lvv-mbud.lvv-mbud-halloween .lvv-mbud-img-corps {
    width: 232px;
}

.lvv-mbud.lvv-mbud-halloween.lvv-mbud-ouvert .lvv-mbud-perso .lvv-mbud-img-corps {
    width: 166px;
}

.lvv-mbud.lvv-mbud-halloween .lvv-mbud-img-bras {
    transform-origin: 37.91% 49.67%;   /* l epaule */
}

/* SES DEUX JAMBES ONT CHACUNE LEUR PIVOT, et ce n est pas un raffinement :
   ses tiges se CROISENT en X sous le corps — l inverse du personnage de base,
   ou elles divergent depuis un point commun. Une hanche unique les ferait
   decrocher au raccord. Chaque pivot est pose sur SA tige, a la ligne de coupe
   (y=910 sur le dessin, juste sous le croisement, qui reste au corps et masque
   la jointure). */
.lvv-mbud.lvv-mbud-halloween .lvv-mbud-img-jambe-g {
    transform-origin: 48.53% 74.01%;
}

.lvv-mbud.lvv-mbud-halloween .lvv-mbud-img-jambe-d {
    transform-origin: 53.66% 74.01%;
}

/* ── SA MARCHE A ELLE ──────────────────────────────────────────────────────
   Rien ici n est copie du personnage de base : ses jambes sont plus COURTES
   (102 px contre 127 dans un cadrage de meme hauteur), donc sa foulee est plus
   petite, et son chapeau la rend plus LARGE, donc elle doit partir de plus
   loin pour etre hors champ.

   Deux defauts mesures sur le reglage herite :
   - a 13 deg sa foulee ne faisait que 24,6 px a l ecran ; six pas ne couvraient
     que 148 px sur 190, et les pieds patinaient de 23 %.
   - large de 232 px, elle n etait PAS hors champ au depart avec 190 px de
     translation : 62 px d elle restaient visibles avant qu elle ne se mette en
     marche.

   D ou ce reglage, qui se deduit et ne se choisit pas : il lui faut au moins
   252 px (232 de large + les 20 du bord) pour partir de dehors, on prend 260 ;
   a 17 deg sa foulee vaut 32,0 px, donc 260/32 = 8,1 — HUIT pas, soit quatre
   cycles. La cadence, elle, ne bouge pas : 0,8 s par cycle, comme elle. */
@keyframes lvv-mbud-arrive-h {
      0% { transform: translateX(260px); }
    100% { transform: translateX(0);     }
}

.lvv-mbud.lvv-mbud-halloween.lvv-mbud-marche .lvv-mbud-perso {
    animation: lvv-mbud-arrive-h 3.2s linear both;
}

@keyframes lvv-mbud-jambe-avant-h {
      0% { transform: rotate(0deg);   }
     25% { transform: rotate(17deg);  }
     50% { transform: rotate(0deg);   }
     75% { transform: rotate(-17deg); }
    100% { transform: rotate(0deg);   }
}

@keyframes lvv-mbud-jambe-arriere-h {
      0% { transform: rotate(0deg);   }
     25% { transform: rotate(-17deg); }
     50% { transform: rotate(0deg);   }
     75% { transform: rotate(17deg);  }
    100% { transform: rotate(0deg);   }
}

.lvv-mbud.lvv-mbud-halloween.lvv-mbud-marche .lvv-mbud-img-jambe-g {
    animation: lvv-mbud-jambe-arriere-h .8s linear 4;
}

.lvv-mbud.lvv-mbud-halloween.lvv-mbud-marche .lvv-mbud-img-jambe-d {
    animation: lvv-mbud-jambe-avant-h .8s linear 4;
}

.lvv-mbud.lvv-mbud-halloween.lvv-mbud-marche .lvv-mbud-img-corps,
.lvv-mbud.lvv-mbud-halloween.lvv-mbud-marche .lvv-mbud-yeux {
    animation: lvv-mbud-rebond .8s ease-in-out 4;
}

.lvv-mbud.lvv-mbud-halloween.lvv-mbud-marche .lvv-mbud-img-bras {
    animation: lvv-mbud-balance .8s ease-in-out 4;
}

.lvv-mbud.lvv-mbud-halloween .lvv-mbud-img-yeux {
    transform-origin: 50% 43.65%;      /* le bas des yeux */
}

/* ── LE CLIGNEMENT ─────────────────────────────────────────────────────────
   AUCUNE PAUPIERE N A ETE DESSINEE. Le contour de l oeil, sa pupille et ses
   cils forment une seule tache d un seul tenant : on l a decoupee entiere, et
   le clignement est un ECRASEMENT vertical de cette piece, pivot au bas de
   l oeil. Les cils s ecrasent avec, ce qui est justement ce qu ils font en se
   fermant, et le corps porte dessous un trou rebouche au vert du visage —
   invisible tant que l oeil est ouvert, puisqu il le recouvre exactement.

   Les DEUX yeux tiennent dans une seule piece et un seul pivot : leurs bas sont
   a la meme hauteur (246 et 249 sur 600 dans le dessin), et un ecrasement
   vertical ne deplace rien horizontalement.

   La cadence est volontairement IRREGULIERE. Un clignement toutes les deux
   secondes, pile, se remarque et devient un tic ; ici le cycle dure huit
   secondes et en contient quatre — un seul, puis deux coup sur coup, puis un —
   ce qui suffit a ce qu on n en attende jamais le suivant.

   L enveloppe .lvv-mbud-yeux existe pour une seule raison : deux animations ne
   peuvent pas se partager une meme propriete transform. Elle porte le rebond
   de la marche, l image porte le clignement. */
.lvv-mbud .lvv-mbud-yeux {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.lvv-mbud .lvv-mbud-img-yeux {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 40.86%;      /* le bas des yeux */
    animation: lvv-mbud-cligne 8s linear infinite;
}

@keyframes lvv-mbud-cligne {
      0%, 11.6% { transform: scaleY(1);    }
          12.5% { transform: scaleY(.06);  }
          13.6% { transform: scaleY(1);    }
          46.4% { transform: scaleY(1);    }
          47.3% { transform: scaleY(.06);  }
          48.4% { transform: scaleY(1);    }
          50.0% { transform: scaleY(1);    }
          50.9% { transform: scaleY(.06);  }
          52.0% { transform: scaleY(1);    }
          77.6% { transform: scaleY(1);    }
          78.5% { transform: scaleY(.06);  }
    79.6%, 100% { transform: scaleY(1);    }
}

.lvv-mbud.lvv-mbud-entree .lvv-mbud-perso:hover .lvv-mbud-silhouette,
.lvv-mbud.lvv-mbud-entree .lvv-mbud-perso:focus-visible .lvv-mbud-silhouette {
    /* Elle se penche vers celui qui l approche, comme quelqu un qui tend
       l oreille. L origine est au sol, la encore. */
    transform: translateY(-8px) rotate(-2.5deg);
}

.lvv-mbud .lvv-mbud-perso:focus-visible {
    outline: 2px solid #B08D3F;
    outline-offset: 4px;
}

/* Panneau ouvert : elle recule d un cran pour lui laisser la vedette, et se
   retire tout a fait quand l ecran est trop etroit pour les deux. */
.lvv-mbud.lvv-mbud-ouvert .lvv-mbud-perso .lvv-mbud-img-corps {
    width: 120px;
}

/* ── CE QUI LA REND VIVANTE ────────────────────────────────────────────────
   Une seule image, donc des mouvements d ENSEMBLE : on ne peut pas lever un
   bras tout seul. Ce qui reste possible suffit, a condition d etre dose.

   L ordre a l arrivee : elle monte, PUIS elle salue, PUIS elle respire. Saluer
   pendant qu on monte ne se voit pas, et les trois en meme temps donneraient
   une gigue.

   Le point d origine est en bas au centre pour tous les mouvements : un
   personnage pose au sol pivote depuis ses pieds, jamais depuis son nombril.

   Tout est en transform — jamais une propriete qui force un recalcul de mise
   en page — et tout s arrete sous prefers-reduced-motion.
   ───────────────────────────────────────────────────────────────────────── */

.lvv-mbud .lvv-mbud-danse {
    display: block;
    transform-origin: 50% 100%;
}

/* Le souffle : quatre secondes et demie, une amplitude qu on ne remarque pas
   consciemment. C est le but — elle doit avoir l air vivante, pas agitee. */
@keyframes lvv-mbud-souffle {
      0% { transform: translateY(0)      scaleY(1);     }
     50% { transform: translateY(-3px)   scaleY(1.012); }
    100% { transform: translateY(0)      scaleY(1);     }
}

.lvv-mbud.lvv-mbud-souffle .lvv-mbud-danse {
    animation: lvv-mbud-souffle 4.5s ease-in-out infinite;
}

/* LE SALUT — le vrai, depuis que le personnage est en deux morceaux.
   C est le BRAS qui part, autour de l epaule, trois allers-retours qui
   s amortissent. Avant le decoupage, c etait tout le corps qui se balançait et
   l oeil devait faire la moitie du travail. */
@keyframes lvv-mbud-salue {
      0% { transform: rotate(0deg);   }
     12% { transform: rotate(-17deg); }
     26% { transform: rotate(4deg);   }
     40% { transform: rotate(-15deg); }
     54% { transform: rotate(3deg);   }
     68% { transform: rotate(-11deg); }
     84% { transform: rotate(2deg);   }
    100% { transform: rotate(0deg);   }
}

.lvv-mbud.lvv-mbud-salue .lvv-mbud-img-bras {
    animation: lvv-mbud-salue 1.6s ease-in-out;
}

/* Elle n a qu un bras d avance : quand le corps entier bouge (sursaut,
   hochement), le bras suit sans rien faire de plus. */

/* Le sursaut, quand on la clique : elle se tasse et repart. */
@keyframes lvv-mbud-sursaut {
      0% { transform: scale(1, 1);        }
     30% { transform: scale(1.06, .94);   }
     60% { transform: scale(.97, 1.04);   }
    100% { transform: scale(1, 1);        }
}

.lvv-mbud.lvv-mbud-sursaut .lvv-mbud-danse {
    animation: lvv-mbud-sursaut .42s ease-out;
}

/* Le hochement, quand le conseil est pret : elle attire l oeil vers le panneau
   sans dire un mot de plus. */
@keyframes lvv-mbud-hoche {
      0% { transform: rotate(0deg) translateY(0);     }
     25% { transform: rotate(-4deg) translateY(-5px); }
     55% { transform: rotate(3deg)  translateY(0);    }
     80% { transform: rotate(-2deg) translateY(-2px); }
    100% { transform: rotate(0deg) translateY(0);     }
}

.lvv-mbud.lvv-mbud-hoche .lvv-mbud-danse {
    animation: lvv-mbud-hoche .9s ease-in-out;
}

/* Onglet en arriere-plan : on arrete tout. Une animation qui tourne pour
   personne, c est de la batterie depensee pour rien. */
.lvv-mbud.lvv-mbud-en-pause .lvv-mbud-danse,
.lvv-mbud.lvv-mbud-en-pause .lvv-mbud-perso,
.lvv-mbud.lvv-mbud-en-pause .lvv-mbud-img-corps,
.lvv-mbud.lvv-mbud-en-pause .lvv-mbud-img-jambe,
.lvv-mbud.lvv-mbud-en-pause .lvv-mbud-yeux,
.lvv-mbud.lvv-mbud-en-pause .lvv-mbud-img-yeux,
.lvv-mbud.lvv-mbud-en-pause .lvv-mbud-img-bras {
    animation-play-state: paused;
}

/* Le petit « x » qui la renvoie. Discret au repos — elle n est pas une
   publicite qu il faut fermer — mais toujours atteignable, et franchement
   visible des qu on l approche. Au clavier, il se montre au focus. */

.lvv-mbud .lvv-mbud-chut {
    position: absolute;
    right: 2px;
    bottom: 196px;
    width: 26px;
    height: 26px;
    margin: 0;
    padding: 0;
    background: #FCFBF7;
    border: 1px solid rgba(46, 74, 50, .22);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(26, 33, 32, .18);
    color: #676B68;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease;
}

.lvv-mbud:hover .lvv-mbud-chut,
.lvv-mbud .lvv-mbud-chut:focus-visible {
    opacity: 1;
}

.lvv-mbud .lvv-mbud-chut:hover {
    color: #1A2120;
    border-color: rgba(176, 141, 63, .75);
}

/* ── L accroche, une fois ──────────────────────────────────────────────── */

.lvv-mbud .lvv-mbud-accroche {
    position: absolute;
    right: 150px;
    bottom: 168px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 230px;
    padding: 10px 8px 10px 14px;
    background: #1A2120;
    border: 1px solid rgba(176, 141, 63, .45);
    border-radius: 18px 18px 4px 18px;
    box-shadow: 0 6px 18px rgba(26, 33, 32, .22);
    color: #F4F1E8;
    font-size: 14px;
    cursor: pointer;
}

.lvv-mbud .lvv-mbud-accroche-x {
    margin: 0;
    padding: 0 4px;
    background: none;
    border: 0;
    color: rgba(244, 241, 232, .6);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

/* ── Le panneau ────────────────────────────────────────────────────────── */

.lvv-mbud .lvv-mbud-panneau {
    display: flex;
    flex-direction: column;
    width: 370px;
    max-width: calc(100vw - 32px);
    max-height: min(82vh, 660px);
    margin-bottom: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #FCFBF7;
    border: 1px solid rgba(46, 74, 50, .18);
    border-radius: 6px;
    box-shadow: 0 18px 44px rgba(26, 33, 32, .26);
    overscroll-behavior: contain;
}

.lvv-mbud .lvv-mbud-tete {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    background: #1A2120;
    color: #F4F1E8;
}

.lvv-mbud .lvv-mbud-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.lvv-mbud .lvv-mbud-titre {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.lvv-mbud .lvv-mbud-titre strong {
    font-family: var(--lvv-titre, Marcellus, Georgia, serif);
    font-weight: 400;
    font-size: 17px;
    letter-spacing: .02em;
    color: #F4F1E8;
}

.lvv-mbud .lvv-mbud-titre span {
    font-size: 11.5px;
    letter-spacing: .02em;
    color: rgba(244, 241, 232, .68);
}

.lvv-mbud .lvv-mbud-x {
    flex: 0 0 auto;
    margin: 0;
    padding: 2px 6px;
    background: none;
    border: 0;
    color: rgba(244, 241, 232, .7);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.lvv-mbud .lvv-mbud-x:hover {
    color: #F4F1E8;
}

/* ── Ce qu elle dit ────────────────────────────────────────────────────── */

.lvv-mbud .lvv-mbud-dit {
    margin: 0;
    padding: 14px 16px;
    background: #F4F1E8;
    border-bottom: 1px solid rgba(176, 141, 63, .3);
    font-size: 14.5px;
    line-height: 1.5;
    color: #33413A;
}

.lvv-mbud .lvv-mbud-corps {
    flex: 1 1 auto;
    padding: 14px 16px 6px;
}

.lvv-mbud .lvv-mbud-attente {
    padding: 40px 16px;
    color: #676B68;
    font-size: 14px;
    text-align: center;
}

.lvv-mbud .lvv-mbud-q {
    margin: 0 0 4px;
    padding-bottom: 10px;
    font-family: var(--lvv-titre, Marcellus, Georgia, serif);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--lvv-encre, #1A2120);
    background-image: linear-gradient(#B08D3F, #B08D3F);
    background-repeat: no-repeat;
    background-size: 28px 1px;
    background-position: left bottom;
}

.lvv-mbud .lvv-mbud-q-prev {
    margin-top: 20px;
}

.lvv-mbud .lvv-mbud-qaide,
.lvv-mbud .lvv-mbud-franchise {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #676B68;
}

.lvv-mbud .lvv-mbud-franchise {
    padding: 8px 10px;
    background: #F4F1E8;
    border-left: 2px solid rgba(176, 141, 63, .85);
    color: #33413A;
}

.lvv-mbud .lvv-mbud-texte {
    margin: 10px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
}

/* ── Les choix ─────────────────────────────────────────────────────────── */

.lvv-mbud .lvv-mbud-menu,
.lvv-mbud .lvv-mbud-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.lvv-mbud .lvv-mbud-choix,
.lvv-mbud .lvv-mbud-opt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin: 0;
    padding: 11px 14px;
    background: #FFFFFF;
    border: 1px solid rgba(46, 74, 50, .22);
    border-radius: 3px;
    box-shadow: none;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    color: #33413A;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .18s ease, background-color .18s ease;
}

.lvv-mbud .lvv-mbud-choix:hover,
.lvv-mbud .lvv-mbud-opt:hover,
.lvv-mbud .lvv-mbud-choix:focus-visible,
.lvv-mbud .lvv-mbud-opt:focus-visible {
    background: #F4F1E8;
    border-color: rgba(176, 141, 63, .75);
}

.lvv-mbud .lvv-mbud-opt-on {
    background: #F4F1E8;
    border-color: #2E4A32;
    box-shadow: inset 2px 0 0 #2E4A32;
}

.lvv-mbud .lvv-mbud-choix-t,
.lvv-mbud .lvv-mbud-opt-t {
    font-weight: 600;
    color: var(--lvv-encre, #1A2120);
}

.lvv-mbud .lvv-mbud-choix-a,
.lvv-mbud .lvv-mbud-opt-a {
    font-size: 13px;
    color: #676B68;
}

.lvv-mbud .lvv-mbud-opt-mince .lvv-mbud-opt-t {
    font-weight: 400;
}

/* ── Les encarts : ce qu elle ecarte, ce qu elle signale, la prevention ── */

.lvv-mbud .lvv-mbud-encart {
    margin: 12px 0 0;
    padding: 12px 14px;
    background: #F4F1E8;
    border-left: 3px solid #B08D3F;
    border-radius: 2px;
}

.lvv-mbud .lvv-mbud-encart strong {
    display: block;
    margin-bottom: 5px;
    font-family: var(--lvv-titre, Marcellus, Georgia, serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    color: var(--lvv-encre, #1A2120);
}

.lvv-mbud .lvv-mbud-encart p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #33413A;
}

.lvv-mbud .lvv-mbud-encart a {
    display: inline-block;
    margin-top: 8px;
    color: #2E4A32;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Ce qu elle refuse : la seule couleur forte du panneau, et elle est meritee. */
.lvv-mbud .lvv-mbud-encart-non {
    background: #F7EDE9;
    border-left-color: #A6462E;
}

.lvv-mbud .lvv-mbud-encart-prev {
    background: #FFFFFF;
    border-left-color: rgba(46, 74, 50, .45);
}

/* ── Les produits ──────────────────────────────────────────────────────── */

.lvv-mbud .lvv-mbud-produits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.lvv-mbud .lvv-mbud-produit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    background: #FFFFFF;
    border: 1px solid rgba(46, 74, 50, .16);
    border-radius: 3px;
    color: #33413A;
    text-decoration: none;
    transition: border-color .18s ease;
}

.lvv-mbud .lvv-mbud-produit:hover {
    border-color: rgba(176, 141, 63, .75);
    text-decoration: none;
}

.lvv-mbud .lvv-mbud-produit img,
.lvv-mbud .lvv-mbud-produit-vide {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    object-fit: cover;
    background: #F4F1E8;
    border-radius: 2px;
}

.lvv-mbud .lvv-mbud-produit-txt {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lvv-mbud .lvv-mbud-produit-nom {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--lvv-encre, #1A2120);
}

.lvv-mbud .lvv-mbud-produit-pq {
    font-size: 12.5px;
    color: #676B68;
}

.lvv-mbud .lvv-mbud-produit-prix {
    font-family: var(--lvv-titre, Marcellus, Georgia, serif);
    font-size: 16px;
    color: var(--lvv-encre, #1A2120);
}

.lvv-mbud .lvv-mbud-rayons {
    margin: 12px 0 0;
    font-size: 13.5px;
    color: #676B68;
}

.lvv-mbud .lvv-mbud-rayons a {
    color: #2E4A32;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Les limites, le formulaire, les actions ───────────────────────────── */

.lvv-mbud .lvv-mbud-limites ul {
    margin: 12px 0 0;
    padding-left: 18px;
}

.lvv-mbud .lvv-mbud-limites li {
    margin-bottom: 9px;
    font-size: 14px;
    line-height: 1.5;
}

.lvv-mbud .lvv-mbud-demande {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 12px;
}

.lvv-mbud .lvv-mbud-demande label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #2E4A32;
}

.lvv-mbud .lvv-mbud-demande textarea {
    width: 100%;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid rgba(46, 74, 50, .25);
    border-radius: 3px;
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.4;
    color: #33413A;
    resize: vertical;
}

.lvv-mbud .lvv-mbud-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 16px 0 4px;
}

.lvv-mbud .lvv-mbud-btn {
    margin: 0;
    padding: 11px 18px;
    background: #2E4A32;
    border: 1px solid #2E4A32;
    border-radius: 2px;
    box-shadow: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: none;
    color: #FFFDF7;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.lvv-mbud .lvv-mbud-btn:hover {
    background: #263D29;
}

.lvv-mbud .lvv-mbud-lien,
.lvv-mbud .lvv-mbud-retour,
.lvv-mbud .lvv-mbud-sauter {
    margin: 0;
    padding: 4px 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    color: #676B68;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.lvv-mbud .lvv-mbud-lien:hover,
.lvv-mbud .lvv-mbud-retour:hover,
.lvv-mbud .lvv-mbud-sauter:hover {
    color: var(--lvv-encre, #1A2120);
}

/* Couper court se propose, ne s impose pas : le lien reste discret, a droite
   du bouton « revenir », et ne concurrence pas la question posee. */
.lvv-mbud .lvv-mbud-sauter {
    margin-left: 14px;
    color: #2E4A32;
    font-weight: 600;
}

/* ── Le pied : la prevention, sur chaque ecran ─────────────────────────── */

.lvv-mbud .lvv-mbud-pied {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #F4F1E8;
    border-top: 1px solid rgba(176, 141, 63, .35);
}

.lvv-mbud .lvv-mbud-prev {
    margin-left: auto;
    color: #2E4A32;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ── Ou en est-on ──────────────────────────────────────────────────────── */

.lvv-mbud .lvv-mbud-ou {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}

.lvv-mbud .lvv-mbud-ou-txt {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #676B68;
}

.lvv-mbud .lvv-mbud-ou-piste {
    flex: 1 1 auto;
    height: 2px;
    background: rgba(46, 74, 50, .16);
    border-radius: 2px;
}

.lvv-mbud .lvv-mbud-ou-part {
    display: block;
    height: 2px;
    background: #B08D3F;
    border-radius: 2px;
}

/* ── Celui qu elle designe, et ce qui va avec ──────────────────────────── */

.lvv-mbud .lvv-mbud-produit-choisi {
    position: relative;
    flex-wrap: wrap;
    border-color: #2E4A32;
    box-shadow: inset 3px 0 0 #2E4A32;
}

.lvv-mbud .lvv-mbud-choisi-bandeau {
    flex: 1 0 100%;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #2E4A32;
}

.lvv-mbud .lvv-mbud-avec {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(176, 141, 63, .35);
}

.lvv-mbud .lvv-mbud-avec-dit {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #33413A;
}

/* ── Le telephone ──────────────────────────────────────────────────────── */

/* ── Les ecrans etroits ────────────────────────────────────────────────── */

@media (max-width: 719px) {
    .lvv-mbud {
        right: 10px;
        left: 10px;
        justify-content: flex-end;
    }

    .lvv-mbud .lvv-mbud-img-corps {
        width: 108px;
    }

    /* Pas de survol sur un ecran tactile : le « x » reste visible, sinon il est
       inatteignable. */
    .lvv-mbud .lvv-mbud-chut {
        bottom: 128px;
        opacity: 1;
    }

    /* Panneau ouvert sur petit ecran : elle s efface. Les deux ensemble ne
       tiennent pas, et c est le panneau qu on est venu lire — sa tete reste
       d ailleurs dans l en-tete. */
    .lvv-mbud.lvv-mbud-ouvert .lvv-mbud-perso {
        display: none;
    }

    .lvv-mbud .lvv-mbud-panneau {
        width: 100%;
        max-width: none;
        max-height: 82vh;
        margin-bottom: 12px;
    }

    .lvv-mbud .lvv-mbud-accroche {
        right: 118px;
        bottom: 134px;
        max-width: 190px;
    }
}

/* Quelqu un qui a demande moins d animations n en recoit aucune. */
@media (prefers-reduced-motion: reduce) {
    /* Quelqu un qui a demande moins d animations n en recoit AUCUNE : ni souffle,
       ni salut, ni sursaut, ni clignement. Elle est la, immobile et les yeux
       ouverts, et tout fonctionne pareil. */
    .lvv-mbud .lvv-mbud-danse,
    .lvv-mbud .lvv-mbud-perso,
    .lvv-mbud .lvv-mbud-img-corps,
    .lvv-mbud .lvv-mbud-img-jambe,
    .lvv-mbud .lvv-mbud-yeux,
    .lvv-mbud .lvv-mbud-img-yeux,
    .lvv-mbud .lvv-mbud-img-bras {
        animation: none !important;
    }

    /* Sans animation, elle n arrive pas : elle est deja la. */
    .lvv-mbud .lvv-mbud-perso {
        opacity: 1;
    }

    .lvv-mbud .lvv-mbud-perso,
    .lvv-mbud .lvv-mbud-perso img,
    .lvv-mbud .lvv-mbud-choix,
    .lvv-mbud .lvv-mbud-opt,
    .lvv-mbud .lvv-mbud-produit {
        transition: none;
    }

    .lvv-mbud .lvv-mbud-perso {
        transform: translateY(0);
    }

    .lvv-mbud .lvv-mbud-perso:hover .lvv-mbud-silhouette {
        transform: none;
    }
}