/* ==========================================================================
   Couche « goût du jour » 2026 — posée PAR-DESSUS style.css, sans le modifier.
   Inspirations : landing pages open-source récentes (grands titres serrés,
   en-tête verre dépoli, cartes qui respirent, apparitions au défilement).
   Toujours zéro requête externe. Retirer ce fichier = retour à l'ancien look.
   ========================================================================== */

:root{
  --r-lg:22px; --r-md:16px;
  --ombre-1:0 1px 2px rgba(22,19,15,.06),0 8px 24px rgba(22,19,15,.07);
  --ombre-2:0 2px 6px rgba(22,19,15,.08),0 18px 48px rgba(22,19,15,.16);
  --transition:cubic-bezier(.22,.8,.26,.99);
}

/* ---------- Typo : plus grand, plus serré, plus assumé ---------- */
h1{font-size:clamp(2.6rem,7.2vw,4.6rem)!important;letter-spacing:-.022em;line-height:1.04}
h2{font-size:clamp(1.9rem,4.4vw,2.9rem);letter-spacing:-.018em;line-height:1.08}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem)}
h1 em,h2 em{font-style:italic;color:var(--laiton);-webkit-text-stroke:.5px currentColor}

/* ---------- En-tête : verre dépoli collant ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--creme) 72%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid color-mix(in srgb,var(--ligne) 55%,transparent);
}
header .nav a:not(.btn){position:relative;padding-bottom:3px}
header .nav a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--carmin);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--transition);
}
header .nav a:not(.btn):hover::after{transform:scaleX(1)}

/* ---------- Boutons : pilules, flèche au survol ---------- */
.btn{
  border-radius:999px;transition:transform .28s var(--transition),box-shadow .28s var(--transition);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{box-shadow:0 6px 18px color-mix(in srgb,var(--carmin) 32%,transparent)}
.btn-primary:hover{box-shadow:0 12px 30px color-mix(in srgb,var(--carmin) 42%,transparent)}
.btn-primary::after{content:" →";font-weight:400;opacity:0;margin-left:-8px;transition:.28s var(--transition)}
.btn-primary:hover::after{opacity:1;margin-left:2px}

/* ---------- Images & cartes : rayons généreux, survol vivant ---------- */
.bento figure,.hero picture img,figure img{border-radius:var(--r-lg);overflow:hidden}
.bento figure{box-shadow:var(--ombre-1);transition:transform .5s var(--transition),box-shadow .5s var(--transition)}
.bento figure:hover{transform:translateY(-6px) scale(1.012);box-shadow:var(--ombre-2)}
.bento figure img{transition:transform 1.2s var(--transition)}
.bento figure:hover img{transform:scale(1.045)}
.bento figcaption{font-family:var(--serif);font-style:italic;letter-spacing:.01em}

/* ---------- Apparitions au défilement (classe posée par vivant.js) ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--transition),transform .8s var(--transition)}
  .reveal.in{opacity:1;transform:none}
  .reveal:nth-child(2){transition-delay:.08s}
  .reveal:nth-child(3){transition-delay:.16s}
  .reveal:nth-child(4){transition-delay:.24s}
}

/* ---------- Bandeau défilant : plus premium ---------- */
.marquee{border-block:1px solid var(--ligne);background:var(--encre);color:var(--creme)}
.marquee i{color:var(--laiton)}
.marquee .track span{font-family:var(--serif);font-style:italic;letter-spacing:.02em}

/* ---------- Formulaire de réservation ---------- */
.form-card{border-radius:var(--r-lg);box-shadow:var(--ombre-2)}
.creneau{border-radius:999px;transition:transform .22s var(--transition),background .22s,color .22s}
.creneau:hover{transform:translateY(-2px)}
.creneau:has(input:checked){background:var(--carmin);color:#fff;border-color:var(--carmin)}
.creneau:has(input:disabled){text-decoration:line-through}
input,select,textarea{border-radius:12px!important;transition:border-color .2s,box-shadow .2s}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;border-color:var(--carmin)!important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--carmin) 14%,transparent);
}

/* ---------- Sélection & focus ---------- */
::selection{background:var(--laiton-clair);color:var(--encre)}
:focus-visible{outline:2px solid var(--carmin);outline-offset:3px;border-radius:4px}

/* ==========================================================================
   Mini Marie — la maîtresse de maison en bas de page
   ========================================================================== */
.mm-bulle{
  position:fixed;right:18px;bottom:calc(var(--h-barre,78px) + 14px);z-index:90;
  width:64px;height:64px;border-radius:50%;border:2px solid var(--laiton);
  background:var(--creme);box-shadow:var(--ombre-2);cursor:pointer;padding:0;
  transition:transform .3s var(--transition);
}
@media(min-width:901px){.mm-bulle{bottom:22px}}
.mm-bulle:hover{transform:scale(1.08) rotate(-3deg)}
.mm-bulle svg{width:100%;height:100%;display:block;border-radius:50%}
.mm-coucou{
  position:fixed;right:92px;bottom:calc(var(--h-barre,78px) + 26px);z-index:90;
  background:var(--encre);color:var(--creme);font-size:.86rem;line-height:1.4;
  padding:10px 14px;border-radius:14px 14px 4px 14px;max-width:230px;
  box-shadow:var(--ombre-2);animation:mm-pop .5s var(--transition) both;
}
@media(min-width:901px){.mm-coucou{bottom:36px}}
@keyframes mm-pop{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}

.mm-fenetre{
  position:fixed;right:16px;bottom:calc(var(--h-barre,78px) + 14px);z-index:95;
  width:min(380px,calc(100vw - 32px));max-height:min(560px,78vh);
  display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  background:var(--creme);box-shadow:0 24px 80px rgba(22,19,15,.35);
  border:1px solid var(--ligne);
  animation:mm-pop .35s var(--transition) both;
}
@media(min-width:901px){.mm-fenetre{bottom:22px}}
.mm-tete{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--carmin);color:#fff}
.mm-tete .mm-avatar{width:44px;height:44px;border-radius:50%;border:2px solid var(--laiton-clair);background:var(--creme);flex:0 0 auto;overflow:hidden}
.mm-tete b{font-family:var(--serif);font-size:1.06rem;letter-spacing:.01em}
.mm-tete small{display:block;opacity:.85;font-size:.74rem}
.mm-fermer{margin-left:auto;background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;opacity:.85;padding:4px 8px}
.mm-fermer:hover{opacity:1}
.mm-corps{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:
  linear-gradient(color-mix(in srgb,var(--creme-2) 60%,transparent),transparent 120px)}
.mm-msg{max-width:86%;padding:10px 14px;border-radius:16px;font-size:.95rem;line-height:1.5;animation:mm-pop .3s var(--transition) both}
.mm-msg.eux{align-self:flex-start;background:#fff;border:1px solid var(--ligne);border-bottom-left-radius:5px}
.mm-msg.moi{align-self:flex-end;background:var(--carmin);color:#fff;border-bottom-right-radius:5px}
.mm-msg a{text-decoration:underline;text-underline-offset:2px;font-weight:600}
.mm-msg .mm-heures{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mm-msg .mm-heures button{
  border:1px solid var(--carmin);background:#fff;color:var(--carmin);border-radius:999px;
  padding:5px 12px;font-size:.86rem;cursor:pointer;transition:.2s;
}
.mm-msg .mm-heures button:hover{background:var(--carmin);color:#fff}
.mm-ecrit{display:inline-flex;gap:4px;padding:12px 16px}
.mm-ecrit i{width:7px;height:7px;border-radius:50%;background:var(--gris);animation:mm-p 1.1s infinite}
.mm-ecrit i:nth-child(2){animation-delay:.18s}.mm-ecrit i:nth-child(3){animation-delay:.36s}
@keyframes mm-p{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.mm-chips{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 10px}
.mm-chips button{
  border:1px solid var(--ligne);background:#fff;border-radius:999px;padding:7px 13px;
  font-size:.84rem;color:var(--charbon);cursor:pointer;transition:.2s;
}
.mm-chips button:hover{border-color:var(--carmin);color:var(--carmin);transform:translateY(-1px)}
.mm-saisie{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--ligne);background:#fff}
.mm-saisie input{flex:1;border:1px solid var(--ligne);padding:11px 14px;font-size:.95rem;font-family:inherit}
.mm-saisie button{border:0;background:var(--carmin);color:#fff;border-radius:999px;width:44px;height:44px;font-size:1.1rem;cursor:pointer;flex:0 0 auto}
.mm-saisie button:hover{background:var(--carmin-clair)}
@media (prefers-reduced-motion:reduce){.mm-fenetre,.mm-coucou,.mm-msg{animation:none}}

/* ==========================================================================
   Le parcours de réservation mené par Marie — une question à la fois
   ========================================================================== */
.rf{max-width:640px;margin:0 auto}
.rf-fil{display:flex;flex-direction:column;gap:12px;min-height:120px}
.rf-b{display:flex;gap:12px;align-items:flex-end;animation:mm-pop .32s var(--transition) both}
.rf-b .av{width:46px;height:46px;border-radius:50%;flex:0 0 auto;border:2px solid var(--laiton);background:var(--creme);overflow:hidden}
.rf-b .di{background:#fff;border:1px solid var(--ligne);border-radius:18px 18px 18px 5px;
  padding:14px 18px;font-size:1.05rem;line-height:1.45;box-shadow:var(--ombre-1)}
.rf-b .di b{font-family:var(--serif)}
.rf-b.moi{justify-content:flex-end}
.rf-b.moi .di{background:var(--carmin);color:#fff;border:0;border-radius:18px 18px 5px 18px;cursor:pointer;transition:.2s}
.rf-b.moi .di:hover{background:var(--carmin-clair)}
.rf-b.moi .di small{opacity:.75;font-size:.72rem;display:block;margin-top:1px}
.rf-choix{display:flex;flex-wrap:wrap;gap:9px;padding:6px 0 0 58px;animation:mm-pop .3s .12s var(--transition) both}
.rf-choix button,.rf-choix a{
  border:1.5px solid var(--carmin);background:#fff;color:var(--carmin);
  border-radius:999px;padding:12px 20px;font-size:1.02rem;font-weight:600;font-family:inherit;
  cursor:pointer;transition:transform .18s var(--transition),background .18s,color .18s;
}
.rf-choix button:hover,.rf-choix a:hover{background:var(--carmin);color:#fff;transform:translateY(-2px)}
.rf-choix button.sec{border-color:var(--ligne);color:var(--gris);font-weight:500}
.rf-choix button.sec:hover{background:var(--creme-2);color:var(--charbon);border-color:var(--ligne)}
.rf-choix .rf-saisie{display:flex;gap:8px;width:100%}
.rf-choix .rf-saisie input{flex:1;border:1.5px solid var(--ligne);border-radius:14px;padding:13px 16px;font-size:1.05rem;font-family:inherit}
.rf-choix .rf-saisie button{border-radius:14px}
.rf-choix label.rf-case{display:flex;gap:10px;align-items:center;border:1.5px solid var(--ligne);border-radius:14px;padding:12px 16px;cursor:pointer;font-size:.98rem;width:100%}
.rf-choix label.rf-case:has(input:checked){border-color:var(--vert-gf);background:var(--vert-gf-clair)}
.rf-ok{border:1px solid #C4DED0;background:var(--vert-gf-clair);border-radius:var(--r-lg);padding:22px 24px;animation:mm-pop .4s var(--transition) both}
.rf-ok b{font-family:var(--serif);font-size:1.2rem}
@media(max-width:560px){.rf-choix{padding-left:0}}

/* ==========================================================================
   Parcours v2 — « Le carnet de Marie »
   ========================================================================== */
.rf{max-width:680px}
.rf-carnet{
  background:linear-gradient(180deg,#FFFDF9,#FBF7EF);
  border:1px solid var(--ligne);border-radius:26px;box-shadow:var(--ombre-2);
  overflow:hidden;
}
.rf-entete{
  display:flex;align-items:center;gap:14px;padding:18px 22px 16px;
  background:linear-gradient(135deg,var(--carmin),var(--velours));color:#fff;position:relative;
}
.rf-entete .av{width:52px;height:52px;border-radius:50%;border:2px solid var(--laiton-clair);background:var(--creme);overflow:hidden;flex:0 0 auto}
.rf-entete b{font-family:var(--serif);font-size:1.14rem;display:block}
.rf-entete small{opacity:.85;font-size:.76rem;display:flex;align-items:center;gap:6px}
.rf-entete small::before{content:"";width:7px;height:7px;border-radius:50%;background:#7BE3A0;box-shadow:0 0 0 3px rgba(123,227,160,.25)}
.rf-etape{margin-left:auto;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.8;font-weight:700}
.rf-barre{height:4px;background:rgba(255,255,255,.18)}
.rf-barre i{display:block;height:100%;background:var(--laiton-clair);width:0;transition:width .5s var(--transition);border-radius:0 99px 99px 0}
.rf-int{padding:22px 20px 20px}
@media(min-width:560px){.rf-int{padding:26px 28px 26px}}
.rf-fil{min-height:90px}
.rf-b .di{font-size:1.03rem}
.rf-b.moi .di{box-shadow:0 6px 18px color-mix(in srgb,var(--carmin) 26%,transparent)}
.rf-choix{padding-top:14px}
.rf-choix button,.rf-choix a{box-shadow:0 2px 0 color-mix(in srgb,var(--carmin) 22%,transparent)}
.rf-choix button:active{transform:translateY(1px) scale(.98)}
.rf-choix button .ss{display:block;font-size:.72rem;font-weight:500;opacity:.75;margin-top:1px}
.rf-choix button.gros{font-size:1.08rem;padding:14px 24px}

/* Le ticket final */
/* Le ticket est injecté dans #rf-choix, un conteneur flex en ligne prévu pour
   aligner des boutons de réponse. Son enfant s'y dimensionnait donc au contenu :
   sur un écran de 375 px le ticket tombait à 251 px, et les quatre colonnes
   s'écrasaient. Quand il y a un ticket, ce conteneur redevient un bloc. */
.rf-choix:has(.rf-ticket){display:block;width:100%}
.rf-choix > div:has(.rf-ticket){width:100%}

.rf-ticket{
  position:relative;background:#fff;border-radius:18px;padding:24px 26px 22px;margin-top:4px;
  border:1px solid var(--ligne);overflow:hidden;
  animation:mm-pop .5s var(--transition) both;
}
/* La perforation est une VRAIE bordure entre les deux moitiés, et les encoches
   se calent dessus. Avant, le pointillé était posé à 58 % de la hauteur du
   ticket : dès que le contenu changeait de taille il tombait n'importe où —
   en l'occurrence en travers des intitulés de colonnes. */
.rf-ticket .rt-haut{text-align:center;padding-bottom:22px}
.rf-ticket .rt-resto{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.rf-ticket .rt-date{font-family:var(--serif);font-size:clamp(1.4rem,4vw,1.9rem);margin:8px 0 2px;text-wrap:balance}
.rf-ticket .rt-h{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--carmin)}
.rf-ticket .rt-bas{
  position:relative;border-top:2px dashed var(--ligne);padding-top:22px;font-size:.92rem;
  /* auto-fit plutôt qu'un flex à quatre parts égales : sous 480 px les colonnes
     passent à deux, au lieu d'écraser « Au nom de » sur trois lignes. */
  display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:16px 18px;
}
.rf-ticket .rt-bas::before,
.rf-ticket .rt-bas::after{
  content:"";position:absolute;top:-12px;width:20px;height:20px;border-radius:50%;
  background:var(--creme-2);
}
.rf-ticket .rt-bas::before{left:-36px}
.rf-ticket .rt-bas::after{right:-36px}
.rf-ticket .rt-bas b{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);font-weight:700;margin-bottom:3px}
/* Le sceau était en absolu dans le coin : il passait par-dessus « Le Bistro
   Vénitien · Chez Marie » et en mangeait la fin. Il est maintenant dans le flux,
   centré au-dessus du nom — il ne peut plus recouvrir quoi que ce soit. */
.rf-ticket .rt-sceau{
  width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
  background:var(--vert-gf-clair);border:2px solid var(--vert-gf);color:var(--vert-gf);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  animation:rf-sceau .6s .3s var(--transition) both;
}
@keyframes rf-sceau{from{opacity:0;transform:scale(1.7)}to{opacity:1;transform:scale(1)}}
.rf-apres{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;justify-content:center}

/* Confettis discrets à la confirmation */
.rf-conf{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.rf-conf i{
  position:absolute;top:-10px;width:7px;height:11px;border-radius:2px;
  animation:rf-chute 1.6s var(--transition) forwards;
}
@keyframes rf-chute{
  from{transform:translateY(0) rotate(0)}
  to{transform:translateY(340px) rotate(540deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){.rf-conf{display:none}.rf-ticket,.rf-ticket .rt-sceau{animation:none}}

/* ==========================================================================
   La mascotte Marie — poses, respiration, clignements, nonchalance
   ========================================================================== */
.rf3-marie{width:min(230px,52vw);margin:0 auto;position:relative}
@media(min-width:760px){.rf3-marie{width:240px;margin:0}}
.msc{width:100%;height:auto;display:block;overflow:visible}
/* fill-box seulement là où une animation CSS pivote/écaille l'élément :
   sur un élément à transform d'attribut, fill-box fausse le centre de rotation */
.msc [data-variant],.msc [data-part],.msc .mv4-bras,.msc .mv4-prop path,.msc #mv4-perso{transform-box:fill-box}

/* Respiration + nonchalance : tout le corps ondule à peine, la tête penche */
#m-tout{animation:msc-respire 3.8s ease-in-out infinite;transform-origin:50% 90%}
@keyframes msc-respire{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-.5deg)}}
#m-tete{transform-origin:50% 88%;transition:transform .45s var(--transition);transform:rotate(-3deg)}

/* Paupières : mi-closes au repos (le regard nonchalant), clignement complet périodique */
#m-paupG,#m-paupD{transform-origin:50% 0;transform:scaleY(.42);animation:msc-cligne 4.6s infinite}
@keyframes msc-cligne{0%,90%,100%{transform:scaleY(.42)}93%,96%{transform:scaleY(1.02)}}

/* La cuillère : moulinet paresseux permanent */
#m-brasD{transform-origin:24% 18%;transition:transform .5s var(--transition)}
#m-cuillere{transform-origin:60% 78%;animation:msc-mouline 5.2s ease-in-out infinite}
@keyframes msc-mouline{0%,100%{transform:rotate(0)}30%{transform:rotate(6deg)}65%{transform:rotate(-5deg)}}
#m-brasG,#m-hanche,#m-carnet{transition:opacity .35s,transform .5s var(--transition)}
#m-bouches path,#m-bouches ellipse{transition:opacity .25s}
#m-sourG,#m-sourD{transition:transform .35s var(--transition);transform-origin:center}
#m-pupG,#m-pupD{transition:transform .35s}
#m-coeurs,#m-etoiles,#m-zzz{transition:opacity .4s;transform-origin:center}

/* ---------- Les poses ---------- */
/* pense : cuillère levée vers la joue, regard en l'air, bouche mmh */
[data-pose="pense"] #m-brasD{transform:rotate(-52deg) translate(6px,-2px)}
[data-pose="pense"] #m-tete{transform:rotate(3deg)}
[data-pose="pense"] #m-pupG,[data-pose="pense"] #m-pupD{transform:translate(1px,-2.4px)}
[data-pose="pense"] #m-b-sourire{opacity:0}
[data-pose="pense"] #m-b-mmh{opacity:1}
[data-pose="pense"] #m-sourG{transform:translateY(-1.6px) rotate(-6deg)}

/* montre : cuillère pointée vers les choix */
[data-pose="montre"] #m-brasD{transform:rotate(-84deg)}
[data-pose="montre"] #m-tete{transform:rotate(-1.5deg)}
[data-pose="montre"] #m-b-sourire{opacity:1}

/* curieuse : sourcils hauts, grands yeux, tête droite */
[data-pose="curieuse"] #m-paupG,[data-pose="curieuse"] #m-paupD{transform:scaleY(.08);animation:none}
[data-pose="curieuse"] #m-sourG{transform:translateY(-2.6px)}
[data-pose="curieuse"] #m-sourD{transform:translateY(-2.6px)}
[data-pose="curieuse"] #m-tete{transform:rotate(0)}
[data-pose="curieuse"] #m-b-oh{opacity:1}
[data-pose="curieuse"] #m-b-sourire{opacity:0}

/* ecrit : le carnet sort, la cuillère se cale contre l'épaule */
[data-pose="ecrit"] #m-hanche{opacity:0}
[data-pose="ecrit"] #m-carnet{opacity:1}
[data-pose="ecrit"] #m-brasD{transform:rotate(4deg)}
[data-pose="ecrit"] #m-tete{transform:rotate(4.5deg)}
[data-pose="ecrit"] #m-pupG,[data-pose="ecrit"] #m-pupD{transform:translate(-1.6px,2.2px)}

/* gout : la cuillère à la bouche (le détail cuisine) */
[data-pose="gout"] #m-brasD{transform:rotate(-118deg) translate(4px,-10px)}
[data-pose="gout"] #m-b-oh{opacity:1}
[data-pose="gout"] #m-b-sourire{opacity:0}
[data-pose="gout"] #m-paupG,[data-pose="gout"] #m-paupD{transform:scaleY(.75)}

/* amoureux / fete : les réactions */
[data-pose="amoureux"] #m-coeurs{opacity:1;animation:msc-flotte 1.6s ease-in-out infinite}
[data-pose="amoureux"] #m-b-sourire{opacity:1}
[data-pose="fete"] #m-etoiles{opacity:1;animation:msc-flotte 1.2s ease-in-out infinite}
[data-pose="fete"] #m-brasD{transform:rotate(-150deg) translate(2px,-14px)}
[data-pose="fete"] #m-b-grand{opacity:1}
[data-pose="fete"] #m-b-sourire{opacity:0}
[data-pose="fete"] #m-paupG,[data-pose="fete"] #m-paupD{transform:scaleY(.08);animation:none}
[data-pose="fete"] #m-tete{transform:rotate(-5deg)}
@keyframes msc-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* petit sursaut à chaque réponse */
.rf3-marie.pop #m-tout{animation:msc-pop .5s var(--transition),msc-respire 3.8s .5s ease-in-out infinite}
@keyframes msc-pop{0%{transform:scale(1)}35%{transform:scale(1.05) rotate(1deg)}70%{transform:scale(.985)}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  #m-tout,#m-cuillere,#m-paupG,#m-paupD,#m-coeurs,#m-etoiles{animation:none!important}
}

/* ---------- La scène : Marie + sa réplique, façon Duolingo ---------- */
.rf3-scene{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 18px 24px}
@media(min-width:760px){.rf3-scene{flex-direction:row;align-items:flex-end;gap:26px;padding:30px 30px 28px}}
.rf3-parle{flex:1;width:100%;min-height:190px;display:flex;flex-direction:column;gap:16px}
.rf3-bulle{
  position:relative;background:#fff;border:1.5px solid var(--ligne);border-radius:20px;
  padding:18px 22px;font-size:clamp(1.08rem,2.4vw,1.3rem);line-height:1.45;
  font-family:var(--serif);box-shadow:var(--ombre-1);
}
.rf3-bulle b{color:var(--carmin)}
.rf3-bulle::before{
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:16px;height:16px;background:#fff;border-left:1.5px solid var(--ligne);border-top:1.5px solid var(--ligne);
}
@media(min-width:760px){
  .rf3-bulle::before{top:auto;bottom:26px;left:-9px;transform:rotate(-45deg)}
}
.rf3-bulle.change{animation:rf3-swap .34s var(--transition)}
@keyframes rf3-swap{0%{opacity:0;transform:translateY(7px) scale(.985)}100%{opacity:1;transform:none}}
/* Le rappel des réponses déjà données — « 2 pers. », « jeu 10 ».
   Il était posé ENTRE la question et les vraies réponses, avec exactement la
   forme de pastille des boutons de réponse : l'œil y lisait une seconde
   question à laquelle il fallait répondre. Signalé le 09/09/2026.
   Deux corrections : il passe AU-DESSUS de la question (`order:-1`), là où se
   lit un fil déjà parcouru, et il cesse de ressembler à un bouton. Il reste
   cliquable pour revenir en arrière — c'est à ça qu'il sert. */
.rf3-reponses{display:flex;flex-wrap:wrap;gap:12px;order:-1;min-height:0}
.rf3-reponses:empty{display:none}
.rf3-reponses button{
  border:0;background:none;border-radius:0;padding:0;
  font-size:.8rem;color:var(--gris,#6E655B);cursor:pointer;font-family:inherit;transition:.2s;
  text-decoration:underline;text-decoration-color:var(--ligne);text-underline-offset:3px;
}
.rf3-reponses button::after{content:" ✎";opacity:.45;font-size:.75em}
.rf3-reponses button:hover{color:var(--carmin);text-decoration-color:var(--carmin)}
.rf3 .rf-choix{padding:0}

/* ==========================================================================
   Mascotte v2 (chibi) — géométrie et animations recalées. Écrase le bloc v1.
   ========================================================================== */
.rf3-marie{width:min(210px,48vw)}
@media(min-width:760px){.rf3-marie{width:225px}}

/* entrée en scène : elle tombe et rebondit, une seule fois */
#m-tout{animation:msc-entree .85s var(--transition) both,msc-respire 4s .9s ease-in-out infinite;transform-origin:50% 96%}
@keyframes msc-entree{
  0%{opacity:0;transform:translateY(-46px) scale(.9)}
  55%{opacity:1;transform:translateY(4px) scale(1.04,.94)}
  75%{transform:translateY(-6px) scale(.98,1.03)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes msc-respire{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-5px) rotate(.7deg)}}
#m-ombre{animation:msc-ombre 4s .9s ease-in-out infinite;transform-origin:center}
@keyframes msc-ombre{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.94)}}

/* tête : penchée nonchalante, origine au cou */
#m-tete{transform-origin:50% 86%;transition:transform .5s cubic-bezier(.34,1.45,.64,1);transform:rotate(-3.5deg)}

/* mèche libre : mouvement secondaire permanent */
#m-meche{transform-origin:20% 90%;animation:msc-meche 3.2s ease-in-out infinite}
@keyframes msc-meche{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}

/* paupières mi-closes, clignement */
#m-paupG,#m-paupD{transform-origin:50% 0;transform:scaleY(.45);animation:msc-cligne 4.4s infinite}
@keyframes msc-cligne{0%,90%,100%{transform:scaleY(.45)}93%,96%{transform:scaleY(1.05)}}

/* bras-cuillère : origine à l'épaule, transitions à ressort */
#m-brasD{transform-origin:50% 92%;transition:transform .55s cubic-bezier(.34,1.45,.64,1)}
#m-cuillere-bois{transform-origin:50% 97%;animation:msc-mouline 5.6s ease-in-out infinite}
@keyframes msc-mouline{0%,100%{transform:rotate(0)}30%{transform:rotate(7deg)}65%{transform:rotate(-6deg)}}
#m-brasG,#m-hanche,#m-carnet{transition:opacity .35s,transform .55s cubic-bezier(.34,1.45,.64,1)}

/* la bouche parle quand la bulle change */
#m-bouches{transform-origin:50% 60%}
.rf3-marie.parle #m-bouches{animation:msc-parle .55s ease-in-out 2}
@keyframes msc-parle{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}

/* ---------- poses, recalées sur la nouvelle anatomie ---------- */
[data-pose="pense"] #m-brasD{transform:rotate(-38deg)}
[data-pose="pense"] #m-tete{transform:rotate(3.5deg)}
[data-pose="pense"] #m-pupG,[data-pose="pense"] #m-pupD{transform:translate(1.5px,-3px)}
[data-pose="pense"] #m-b-sourire{opacity:0}
[data-pose="pense"] #m-b-mmh{opacity:1}
[data-pose="pense"] #m-sourG{transform:translateY(-2px) rotate(-7deg)}

[data-pose="montre"] #m-brasD{transform:rotate(-74deg)}
[data-pose="montre"] #m-tete{transform:rotate(-1.5deg)}
[data-pose="montre"] #m-b-sourire{opacity:1}

[data-pose="curieuse"] #m-paupG,[data-pose="curieuse"] #m-paupD{transform:scaleY(.06);animation:none}
[data-pose="curieuse"] #m-sourG,[data-pose="curieuse"] #m-sourD{transform:translateY(-3.5px)}
[data-pose="curieuse"] #m-tete{transform:rotate(0)}
[data-pose="curieuse"] #m-b-oh{opacity:1}
[data-pose="curieuse"] #m-b-sourire{opacity:0}

[data-pose="ecrit"] #m-hanche{opacity:0}
[data-pose="ecrit"] #m-carnet{opacity:1}
[data-pose="ecrit"] #m-brasD{transform:rotate(6deg)}
[data-pose="ecrit"] #m-tete{transform:rotate(5deg)}
[data-pose="ecrit"] #m-pupG,[data-pose="ecrit"] #m-pupD{transform:translate(-2px,3px)}

[data-pose="gout"] #m-brasD{transform:rotate(-112deg) translate(2px,-6px)}
[data-pose="gout"] #m-b-oh{opacity:1}
[data-pose="gout"] #m-b-sourire{opacity:0}
[data-pose="gout"] #m-paupG,[data-pose="gout"] #m-paupD{transform:scaleY(.8)}

[data-pose="amoureux"] #m-coeurs{opacity:1;animation:msc-flotte 1.6s ease-in-out infinite}
[data-pose="amoureux"] #m-paupG,[data-pose="amoureux"] #m-paupD{transform:scaleY(.62)}
[data-pose="fete"] #m-etoiles{opacity:1;animation:msc-flotte 1.2s ease-in-out infinite}
[data-pose="fete"] #m-brasD{transform:rotate(-150deg) translate(0,-10px)}
[data-pose="fete"] #m-b-grand{opacity:1}
[data-pose="fete"] #m-b-sourire{opacity:0}
[data-pose="fete"] #m-paupG,[data-pose="fete"] #m-paupD{transform:scaleY(.06);animation:none}
[data-pose="fete"] #m-tete{transform:rotate(-6deg)}

/* sursaut : vrai squash & stretch */
.rf3-marie.pop #m-tout{animation:msc-pop .55s cubic-bezier(.34,1.45,.64,1),msc-respire 4s .55s ease-in-out infinite}
@keyframes msc-pop{
  0%{transform:scale(1)}
  30%{transform:scale(1.07,.92)}
  60%{transform:scale(.96,1.05)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  #m-tout,#m-meche,#m-ombre,#m-cuillere-bois{animation:none!important}
}

/* ==========================================================================
   Mascotte v3 — Open Peeps (dessin professionnel, CC0). Écrase v1 et v2.
   Un buste par pose, un visage par émotion : le CSS ne fait qu'aiguiller.
   ========================================================================== */
.rf3-marie{width:min(240px,52vw)}
@media(min-width:760px){.rf3-marie{width:260px}}

/* aiguillage des bustes et visages */
.pp-bust,.pp-face{opacity:0;transition:opacity .28s var(--transition)}
[data-pose="idle"]     .pp-bust[data-b="idle"],
[data-pose="amoureux"] .pp-bust[data-b="idle"],
[data-pose="pense"]    .pp-bust[data-b="pense"],
[data-pose="montre"]   .pp-bust[data-b="montre"],
[data-pose="fete"]     .pp-bust[data-b="montre"],
[data-pose="curieuse"] .pp-bust[data-b="curieuse"],
[data-pose="ecrit"]    .pp-bust[data-b="ecrit"],
[data-pose="gout"]     .pp-bust[data-b="gout"]{opacity:1}
[data-pose="idle"]     .pp-face[data-f="calm"],
[data-pose="pense"]    .pp-face[data-f="cute"],
[data-pose="montre"]   .pp-face[data-f="smile"],
[data-pose="curieuse"] .pp-face[data-f="awe"],
[data-pose="ecrit"]    .pp-face[data-f="solemn"],
[data-pose="gout"]     .pp-face[data-f="eating"],
[data-pose="amoureux"] .pp-face[data-f="love"],
[data-pose="fete"]     .pp-face[data-f="lol"]{opacity:1}

/* respiration douce + tête qui penche, nonchalance de base */
#m-tout{animation:pp-entree .8s var(--transition) both,pp-respire 4.2s .85s ease-in-out infinite;transform-origin:50% 96%}
@keyframes pp-entree{0%{opacity:0;transform:translateY(-40px)}60%{opacity:1;transform:translateY(6px)}100%{transform:translateY(0)}}
@keyframes pp-respire{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-7px) rotate(.5deg)}}
#pp-tete{transform-origin:430px 560px;transition:transform .5s cubic-bezier(.34,1.45,.64,1);transform:rotate(-2deg)}
[data-pose="pense"] #pp-tete{transform:rotate(3deg)}
[data-pose="ecrit"] #pp-tete{transform:rotate(4deg)}
[data-pose="fete"] #pp-tete{transform:rotate(-4deg)}
[data-pose="curieuse"] #pp-tete{transform:rotate(0)}

/* la cuillère suit la pose : posée à l'épaule au repos, levée quand elle goûte */
#pp-cuillere{transition:transform .55s cubic-bezier(.34,1.45,.64,1),opacity .3s;transform:translate(600px,700px) rotate(14deg)}
[data-pose="pense"]    #pp-cuillere{transform:translate(620px,660px) rotate(38deg)}
[data-pose="montre"],[data-pose="fete"]{}
[data-pose="montre"] #pp-cuillere,[data-pose="fete"] #pp-cuillere{transform:translate(214px,650px) rotate(-10deg)}
[data-pose="curieuse"] #pp-cuillere{transform:translate(640px,690px) rotate(30deg)}
[data-pose="ecrit"] #pp-cuillere{opacity:0;transform:translate(600px,760px) rotate(70deg)}
[data-pose="gout"] #pp-cuillere{transform:translate(500px,472px) rotate(-134deg)}
#pp-cuillere > g{animation:pp-mouline 5.6s ease-in-out infinite;transform-origin:0 0}
@keyframes pp-mouline{0%,100%{transform:rotate(0)}30%{transform:rotate(4deg)}65%{transform:rotate(-4deg)}}

/* réactions flottantes */
#m-coeurs,#m-etoiles{transition:opacity .4s}
[data-pose="amoureux"] #m-coeurs{opacity:1;animation:msc-flotte 1.6s ease-in-out infinite}
[data-pose="fete"] #m-etoiles{opacity:1;animation:msc-flotte 1.2s ease-in-out infinite}

/* sursaut de réponse : squash & stretch conservé */
.rf3-marie.pop #m-tout{animation:msc-pop .55s cubic-bezier(.34,1.45,.64,1),pp-respire 4.2s .55s ease-in-out infinite}

/* la « bouche qui parle » v2 ne s'applique plus (visages dessinés) */
.rf3-marie.parle #m-bouches{animation:none}
@media (prefers-reduced-motion:reduce){#m-tout,#pp-cuillere>g{animation:none!important}}

/* ==========================================================================
   La marque : le logo de la maison, puis le nom
   ==========================================================================
   .brand était une colonne (deux lignes de texte). Le logo arrive à gauche,
   donc la marque devient une ligne, et les deux lignes de texte se regroupent
   dans .b-mots — sans quoi le logo se serait empilé au-dessus du nom.
   ========================================================================== */
.brand{flex-direction:row;align-items:center;gap:11px}
.brand .b-marque{
  width:44px;height:44px;flex:0 0 auto;display:block;border-radius:50%;
  transition:transform .35s var(--transition);
}
.brand:hover .b-marque{transform:rotate(-6deg) scale(1.06)}
.brand .b-mots{display:flex;flex-direction:column;line-height:1}

/* Sous 420 px la barre est déjà serrée entre le nom et le bouton de
   réservation : le logo rétrécit plutôt que de pousser le bouton dehors. */
@media(max-width:420px){
  .brand{gap:8px}
  .brand .b-marque{width:36px;height:36px}
}