/* ==========================================================================
   Marie vivante — l'illustration de la maison, animée.

   Parti pris : on n'invente aucune articulation. Le dessin est coupé en deux
   calques, la tête et le corps, et tout le reste est du souffle : une
   respiration, un balancement, un clignement. Les amplitudes sont
   volontairement basses (rotation ≤ 1,5°, translation ≤ 4 px) — au-delà, un
   dessin à plat se met à onduler comme du caoutchouc.

   Rien ici n'est indispensable : sans ce fichier, l'illustration reste
   affichée, simplement immobile.
   ========================================================================== */

.mv {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
  --mv-cou: 43.7%;        /* la charnière du cou, donnée par preparer.py */
  --mv-peau: #DEC18A;     /* sa carnation, prélevée sur la paupière */
  --mv-souffle: 5.2s;
  --mv-balance: 7.4s;
}

/* Le corps porte la taille : c'est lui qui donne ses dimensions au bloc.

   Les sélecteurs sont volontairement appuyés (.mv img.mv-corps). Dans le
   hero, style.css pose « .hero img{position:absolute;inset:0;height:100%} »
   pour la photo de fond, et « filter:brightness(.52) » pour l'assombrir :
   sans cette reprise, Marie y était écrasée à zéro de haut et à moitié
   éteinte. On annule donc explicitement tout ce que cette règle impose. */
.mv img.mv-corps,
.mv img.mv-tete {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: fill;
  filter: none;
  border-radius: 0;
  user-select: none;
  -webkit-user-drag: none;
}
.mv img.mv-corps { position: relative; inset: auto; }
.mv img.mv-tete {
  position: absolute;
  inset: 0;
  transform-origin: 50% var(--mv-cou);
}

/* ---------- le souffle ---------- */
@keyframes mv-souffle {
  0%, 100% { transform: translateY(0)      scaleY(1); }
  50%      { transform: translateY(-1.5px) scaleY(1.006); }
}
@keyframes mv-balance {
  0%, 100% { transform: rotate(-0.9deg) translateY(0); }
  50%      { transform: rotate(0.9deg)  translateY(-2px); }
}

.mv-corps { animation: mv-souffle var(--mv-souffle) ease-in-out infinite; transform-origin: 50% 100%; }
.mv-tete  { animation: mv-balance var(--mv-balance) ease-in-out infinite; }

/* ---------- le clignement ----------
   Deux paupières couleur peau, posées aux coordonnées relevées sur le dessin.
   Elles se ferment du haut vers le bas, 110 ms, c'est tout. */
.mv-oeil {
  position: absolute;
  background: var(--mv-peau, #F0C9A4);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  /* la ligne de cils : sans elle, l'œil fermé n'est qu'une tache de peau */
  box-shadow: inset 0 -0.09em 0 rgba(84, 56, 32, .55);
  transform: scaleY(0);
  transform-origin: 50% 0;
  pointer-events: none;
}
.mv.cligne .mv-oeil { animation: mv-cligne .13s ease-in-out; }
@keyframes mv-cligne {
  0%, 100% { transform: scaleY(0); }
  45%, 62% { transform: scaleY(1); }
}

/* ---------- les poses ----------
   Elles ne remplacent pas le souffle, elles s'y ajoutent : c'est la
   différence entre un personnage qui vit et un personnage qui joue.

   D'où la répartition : le souffle et le balancement occupent les deux
   calques, les poses n'agissent que sur la silhouette entière. Sans cette
   séparation, une pose posée sur .mv-tete écrasait le balancement — et
   comme vivant.js pose son data-pose une fois pour toutes à la création,
   la tête restait figée pour de bon après la première seconde.

   Les noms hérités (montre, gout, curieuse, amoureux, fete) viennent de
   l'ancien personnage : vivant.js et resa-flow.js les posent encore. On
   les rabat sur les deux seules poses qui aient un sens pour un dessin
   à plat, plutôt que de les laisser sans effet. */
.mv { transform-origin: 50% 100%; }
[data-pose="parle"] .mv-tete { animation-duration: 3.6s; }

.mv[data-pose="coucou"],   [data-pose="coucou"] .mv,
.mv[data-pose="montre"],   [data-pose="montre"] .mv,
.mv[data-pose="curieuse"], [data-pose="curieuse"] .mv { animation: mv-coucou 1.1s ease-in-out; }

.mv[data-pose="contente"], [data-pose="contente"] .mv,
.mv[data-pose="gout"],     [data-pose="gout"] .mv,
.mv[data-pose="amoureux"], [data-pose="amoureux"] .mv,
.mv[data-pose="fete"],     [data-pose="fete"] .mv { animation: mv-contente 1.3s ease-in-out; }

/* resa-flow.js marque l'entrée d'une étape par .pop sur son conteneur */
.pop .mv { animation: mv-contente 1.2s ease-in-out; }

/* Sur la silhouette entière : de petites amplitudes, sinon un dessin à plat
   se met à onduler comme du caoutchouc. */
@keyframes mv-coucou {
  0%   { transform: rotate(0) translateY(0); }
  30%  { transform: rotate(-1.8deg) translateY(-6px); }
  62%  { transform: rotate(1.4deg) translateY(-2px); }
  100% { transform: rotate(0) translateY(0); }
}
@keyframes mv-contente {
  0%   { transform: rotate(0) scale(1); }
  40%  { transform: rotate(.9deg) scale(1.016); }
  100% { transform: rotate(0) scale(1); }
}

/* ---------- la bulle ---------- */
.mv-bulle {
  position: absolute;
  left: 50%;
  bottom: 84%;
  transform: translate(-50%, 8px);
  min-width: 132px;
  max-width: 240px;
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  background: #FAF6EF;
  color: #2A2521;
  border: 1px solid #E4DACA;
  box-shadow: 0 6px 20px rgba(22, 19, 15, .14);
  font: 400 .86rem/1.4 inherit;
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
  pointer-events: none;
  z-index: 3;
}
.mv.cause .mv-bulle {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mv-bulle::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-right: 1px solid #E4DACA;
  border-bottom: 1px solid #E4DACA;
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
}

/* L'emplacement et la taille restent au conteneur hôte (.vv-marie-hero,
   .vv-gf-marie, .rf3-marie) : c'est lui qui connaît sa page. Marie ne fait
   que remplir la largeur qu'on lui donne. Le petit rond du chat, lui, n'est
   pas animé du tout : c'est marie-pastille.webp, posé par marie.js — à 56 px
   un souffle de 1,5 px ne se verrait pas, et deux calques à charger pour ça
   seraient du poids pour rien. */

/* =========================================================================
   LE HERO — Marie debout sur un panneau carmin
   =========================================================================
   Un buste coupé à la taille qui flotte dans un coin ne tient pas une page
   d'accueil. Debout, en entier, posée sur un aplat sombre, elle la tient.
   Le biseau reprend la diagonale de la planche de l'illustrateur : c'est
   déjà leur signe, autant s'en servir.
   ========================================================================= */
.hero-scene { position: relative; overflow: hidden; isolation: isolate; }
.vv-panneau {
  position: absolute;
  inset: 0 0 0 auto;
  width: clamp(300px, 46%, 700px);
  background: linear-gradient(158deg, #9C2128 0%, #6E1419 55%, #4A0F13 100%);
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}
/* le texte passe devant l'aplat, sans quoi il disparaîtrait dedans */
.hero-scene > .wrap { position: relative; z-index: 2; }
@media (min-width: 761px) {
  .hero-scene > .wrap > :is(h1, .lead, .eyebrow, .ctas) { max-width: min(100%, 54ch); }
  /* Le hero mesurait 1133 px : Marie, posée au sol, tombait sous la ligne de
     flottaison et on ne voyait d'elle que les chaussures. On le ramène à un
     écran — c'est ce qui rend l'accueil frappant, pas la taille du titre. */
  .hero-scene > .wrap {
    padding-top: clamp(46px, 7vh, 92px);
    padding-bottom: clamp(36px, 5vh, 76px);
  }
  .hero-scene .lead { margin-block: 14px 22px; }
  .hero-scene .meta { margin-top: 22px; padding-top: 16px; }
}

/* Elle se tient au sol : c'est la hauteur qui commande, pas la largeur. */
.mv--debout { height: 100%; }
.mv--debout img.mv-corps {
  height: 100%;
  width: auto;
  max-width: none;
  margin-inline: auto;
}
.mv--debout .mv-tete, .mv--debout .mv-oeil { display: none; }

.hero-scene .vv-marie-hero {
  left: auto;
  right: clamp(8px, 7vw, 148px);
  bottom: 0;
  top: auto;
  width: auto;
  height: clamp(400px, 78vh, 760px);
  /* Bornée à la hauteur du hero, pas à celle de l'écran : les heros
     intérieurs (carte, le lieu) sont bien plus courts que l'accueil, et le
     lambrequin lui coupait la tête. 88 %, c'est le lambrequin dégagé. */
  max-height: 88%;
  z-index: 3;
  filter: drop-shadow(0 26px 34px rgba(38, 8, 10, .42));
}
/* La bulle passe au-dessus de son épaule, jamais devant son visage :
   posée à sa hauteur, elle lui masquait la figure. */
.hero-scene .vv-marie-hero .vv-bulle {
  left: auto;
  right: 62%;
  top: -4%;
  max-width: 15rem;
  border-radius: 16px 16px 3px 16px;
}

@media (max-width: 760px) {
  /* En colonne, l'aplat devient un socle : elle se détache dessus au lieu
     de se perdre sur le papier crème. */
  .vv-panneau {
    inset: auto 0 0 0;
    width: 100%;
    height: 300px;
    clip-path: polygon(0 22%, 100% 0, 100% 100%, 0 100%);
  }
  .hero-scene .vv-marie-hero {
    height: 300px;
    right: clamp(2px, 3vw, 18px);
  }
  .hero-scene .vv-marie-hero .vv-bulle { right: 68%; top: 2%; font-size: .82rem; }
}

/* ---------- lui faire sa place dans le hero ----------
   Depuis qu'elle s'y tient en grand, la rangée de pastilles (avis, horaires,
   adresse) passait derrière elle et « 13006 Marseille » disparaissait. On
   réserve sa colonne : la rangée s'arrête avant, et va à la ligne. */
@media (min-width: 761px) {
  .hero-scene .meta { max-width: calc(100% - clamp(200px, 28vw, 360px)); }
}
/* Sur mobile il n'y a pas de colonne à réserver : elle se tient sous le
   texte, et c'est le hero qui s'allonge pour ne pas lui passer dessus.
   150 px de large font 263 px de haut — d'où les 250 px de pied. */
@media (max-width: 760px) {
  .hero-scene .wrap { padding-bottom: 250px; }
  .hero-scene .vv-marie-hero { width: 150px; }
}

/* Deux Marie dans le même coin, c'est une de trop : la pastille du chat et
   son accroche s'effacent tant que la grande est à l'écran, et reviennent
   au défilement. marie.js pose .mm-hero-visible sur la racine. */
.mm-bulle {
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.mm-hero-visible .mm-bulle,
.mm-hero-visible .mm-coucou {
  opacity: 0;
  visibility: hidden;
  transform: scale(.6) translateY(14px);
  pointer-events: none;
}

/* Le petit rond du chat et l'en-tête de la fenêtre attendaient un <svg> :
   l'illustration est une image, il leur faut la même règle. */
.mm-bulle img,
.mm-tete .mm-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

/* Immobile pour qui l'a demandé à son système : la consigne prime toujours. */
@media (prefers-reduced-motion: reduce) {
  .mv-corps, .mv-tete, .mv.cligne .mv-oeil { animation: none !important; }
  .mv-bulle { transition: none; }
}