/* ==========================================================================
   Couche « spectacle » — le théâtre vénitien du site, posée par-dessus
   style.css + refresh.css. Tout est décoratif : retirer vivant.css + vivant.js
   rend un site sobre et intact. Zéro requête externe.
   ========================================================================== */

/* ---------- Le rideau de velours (une fois par session) ---------- */
#vv-rideau{position:fixed;inset:0;z-index:220;display:flex;pointer-events:none}
#vv-rideau .pan{
  flex:1;background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 26px,transparent 26px 52px),
    linear-gradient(90deg,var(--velours),var(--carmin) 55%,var(--velours));
  box-shadow:inset 0 0 90px rgba(0,0,0,.5);
  position:relative;
}
#vv-rideau .pan::after{
  content:"";position:absolute;left:0;right:0;bottom:-14px;height:16px;
  background:radial-gradient(circle at 8px -2px,var(--laiton) 0 7px,transparent 8px);
  background-size:20px 16px;background-repeat:repeat-x;opacity:.9;
}
#vv-rideau.leve .pan:first-child{animation:vv-rideau-g .95s cubic-bezier(.6,.05,.35,1) forwards}
#vv-rideau.leve .pan:last-child{animation:vv-rideau-d .95s cubic-bezier(.6,.05,.35,1) forwards}
@keyframes vv-rideau-g{to{transform:translateX(-102%)}}
@keyframes vv-rideau-d{to{transform:translateX(102%)}}

/* ---------- La cuillère de progression ---------- */
#vv-prog{position:fixed;top:0;left:0;height:4px;width:0;z-index:130;
  background:linear-gradient(90deg,var(--laiton),var(--laiton-clair));
  box-shadow:0 0 12px rgba(201,162,39,.5)}
#vv-spoon{position:fixed;top:-7px;left:0;z-index:131;width:26px;height:26px;
  transform:translateX(-13px) rotate(96deg);transition:none;pointer-events:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}

/* ---------- Apparitions au défilement ---------- */
@media (prefers-reduced-motion:no-preference){
  .vv-r{opacity:0;transform:translateY(30px);transition:opacity .7s var(--transition),transform .7s var(--transition);transition-delay:calc(var(--vd,0)*70ms)}
  .vv-r.vv-in{opacity:1;transform:none}
  /* titres : chaque mot se lève de sous sa ligne */
  .vv-mots{overflow:hidden}
  .vv-mot{display:inline-block;transform:translateY(1.15em) rotate(3deg);opacity:0;
    transition:transform .7s var(--transition),opacity .5s;transition-delay:calc(var(--vm)*60ms)}
  .vv-in .vv-mot,.vv-mots.vv-in .vv-mot{transform:none;opacity:1}
}

/* ---------- Le lustre de Murano ---------- */
.vv-lustre{display:block;width:min(150px,34vw);margin:0 auto;overflow:visible;
  transform-origin:50% 0;animation:vv-balance 5.6s ease-in-out infinite}
@keyframes vv-balance{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
.vv-lustre .flamme{animation:vv-flamme 1.6s ease-in-out infinite alternate;transform-origin:50% 100%}
.vv-lustre .flamme:nth-of-type(2){animation-delay:.4s}
.vv-lustre .flamme:nth-of-type(3){animation-delay:.9s}
@keyframes vv-flamme{from{transform:scaleY(1)}to{transform:scaleY(1.25) scaleX(.92)}}

/* ---------- Marie, partout dans la maison ---------- */
.vv-marie{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;
  filter:drop-shadow(0 10px 22px rgba(22,19,15,.22))}
.vv-marie .msc{width:100%;height:auto;display:block;overflow:visible}
.vv-marie-hero{position:absolute;z-index:6;left:clamp(6px,2.5vw,36px);bottom:-10px;
  width:clamp(120px,15vw,185px);animation:vv-pousse .8s var(--transition) both;animation-delay:.9s}
@keyframes vv-pousse{from{transform:translateY(60%) rotate(-4deg);opacity:0}
  60%{transform:translateY(-4%)}to{transform:none;opacity:1}}
.vv-bulle{position:absolute;left:78%;top:4%;background:#fff;color:var(--encre);
  font-size:.82rem;font-weight:600;padding:7px 12px;border-radius:14px 14px 14px 3px;
  box-shadow:var(--ombre-1);white-space:nowrap;opacity:0;transform:translateY(8px) scale(.9);
  transition:.35s var(--transition);pointer-events:none}
.vv-marie.cause .vv-bulle{opacity:1;transform:none}
/* cœurs / confettis éphémères */
.vv-eclat{position:absolute;left:50%;top:20%;font-size:1.1rem;pointer-events:none;
  animation:vv-vole 1.15s ease-out forwards}
@keyframes vv-vole{from{opacity:1;transform:translate(0,0) scale(.6) rotate(0)}
  to{opacity:0;transform:translate(var(--vx,0),-110px) scale(1.25) rotate(var(--vr,20deg))}}

/* ---------- La carte : Marie choisit ---------- */
#vv-des{position:fixed;right:14px;bottom:calc(var(--h-barre) + 14px);z-index:95;
  display:flex;align-items:center;gap:10px;border:none;cursor:pointer;
  background:var(--velours);color:var(--creme);font:600 .92rem var(--sans);
  padding:12px 18px;border-radius:999px;box-shadow:var(--ombre-2);
  transition:transform .3s var(--transition)}
#vv-des:hover{transform:translateY(-3px) rotate(-1deg)}
#vv-des .de{display:inline-block;font-size:1.15rem;animation:vv-de 2.8s ease-in-out infinite}
@keyframes vv-de{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-24deg)}95%{transform:rotate(18deg)}}
@media(min-width:900px){#vv-des{bottom:26px;right:26px}}
#vv-choix{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:18px;
  background:rgba(22,19,15,.55);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .3s}
#vv-choix.la{opacity:1;pointer-events:auto}
#vv-choix .carte-choix{background:var(--creme);border-radius:var(--r-lg);max-width:430px;width:100%;
  padding:26px 26px 24px;text-align:center;box-shadow:var(--ombre-2);
  transform:translateY(26px) scale(.94);transition:.38s var(--transition);position:relative}
#vv-choix.la .carte-choix{transform:none}
#vv-choix .vv-marie{width:150px;margin:-86px auto 4px}
#vv-choix h3{font-size:1.5rem;margin:10px 0 2px}
#vv-choix .vp{color:var(--carmin);font-weight:700;font-size:1.1rem}
#vv-choix .vd{color:var(--gris);font-size:.92rem;margin:8px 0 0;font-style:italic}
#vv-choix .vv-actions{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
#vv-choix .fermer{position:absolute;top:10px;right:14px;border:none;background:none;
  font-size:1.5rem;color:var(--gris);cursor:pointer;line-height:1}

/* ---------- Les horaires : ce soir, c'est ouvert ? ---------- */
.horaires li.vv-today{position:relative;color:var(--laiton-clair)}
.horaires li.vv-today::before{content:"";position:absolute;left:-16px;top:50%;width:8px;height:8px;
  border-radius:50%;background:var(--laiton-clair);transform:translateY(-50%);
  animation:vv-pouls 1.6s ease-in-out infinite}
@keyframes vv-pouls{0%,100%{box-shadow:0 0 0 0 rgba(228,197,92,.55)}60%{box-shadow:0 0 0 9px rgba(228,197,92,0)}}
.vv-cesoir{display:inline-block;margin-left:10px;font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--encre);
  background:var(--laiton-clair);border-radius:999px;padding:2px 9px;vertical-align:2px}

/* ---------- L'entracte final : « À ce soir ? » ---------- */
.vv-fin{background:var(--velours);color:var(--creme);text-align:center;overflow:hidden;position:relative;
  padding:calc(var(--rythme)*.8) 0 calc(var(--rythme)*.7)}
.vv-fin::before{content:"";position:absolute;inset:0;background:var(--grain);opacity:.5;pointer-events:none}
.vv-fin .vv-marie{width:min(190px,44vw);margin:0 auto 6px}
.vv-fin h2{color:var(--creme);font-size:clamp(2.2rem,6vw,3.6rem)}
.vv-fin h2 em{color:var(--laiton-clair);font-style:italic}
.vv-fin p{color:rgba(250,246,239,.75);margin:12px auto 26px;max-width:480px;padding:0 var(--pad)}
.vv-fin .btn-light{background:var(--creme);color:var(--encre)}

/* ---------- Détails vivants ---------- */
.avis{transition:transform .45s var(--transition),box-shadow .45s var(--transition)}
.avis:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--ombre-2)}
.avis .stars{background:linear-gradient(90deg,var(--laiton),var(--laiton-clair),var(--laiton));
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:vv-orpaille 3.2s linear infinite}
@keyframes vv-orpaille{to{background-position:200% 0}}
.vv-chip{display:inline-flex;align-items:baseline;gap:8px;margin-top:20px;
  font-family:var(--serif);color:var(--carmin);font-size:1.05rem}
.vv-chip b{font-size:2.1rem;line-height:1;font-variant-numeric:tabular-nums}
.vv-gf-marie{width:min(190px,52vw);margin:-6px auto 8px}
.gf-card .vv-gf-titre{font-family:var(--serif);font-size:1.35rem;line-height:1.3;margin:0}
.gf-card .vv-gf-note{color:rgba(255,255,255,.78);font-size:.92rem;margin:10px 0 0}

/* le bandeau défilant réagit au doigt */
.marquee:hover .track{animation-play-state:paused}

/* ---------- Transitions de page plus théâtrales ---------- */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vv-sort .34s ease both}
  ::view-transition-new(root){animation:vv-entre-page .5s var(--transition) both}
  @keyframes vv-sort{to{opacity:0;transform:translateY(-14px)}}
  @keyframes vv-entre-page{from{opacity:0;transform:translateY(18px)}}
}

/* ---------- Sobriété quand demandée ---------- */
@media (prefers-reduced-motion:reduce){
  #vv-rideau,#vv-spoon{display:none}
  .vv-lustre,.vv-lustre .flamme,.avis .stars,#vv-des .de{animation:none}
  .vv-marie-hero{animation:none}
}

/* ==========================================================================
   ACTE II — « La Scène » : le site sans photos devient un théâtre vénitien.
   Les images reviendront plus tard dans les cadres dorés ci-dessous.
   ========================================================================== */

/* ---------- Le hero-scène : velours, plis de rideau, projecteur ---------- */
.hero-scene{align-items:center;background:
  radial-gradient(ellipse 58% 54% at 70% 68%,rgba(228,197,92,.17),transparent 68%),
  repeating-linear-gradient(90deg,rgba(0,0,0,.20) 0 30px,transparent 30px 62px),
  linear-gradient(180deg,#511014,var(--velours) 52%,#35090C)}
.hero-scene::after{
  background:
    radial-gradient(circle at 11px -2px,var(--laiton) 0 7px,transparent 8px) left bottom/24px 17px repeat-x,
    var(--grain);
  mix-blend-mode:normal;opacity:.92}
.hero-scene .wrap{padding-top:96px;padding-bottom:clamp(60px,8vw,110px)}
.hero-scene h1{max-width:13ch;font-size:clamp(2.9rem,8.4vw,5.6rem)!important}
.hero-scene .vv-marie-hero{
  left:auto;right:clamp(2px,5vw,80px);bottom:0;
  width:clamp(160px,24vw,300px);
  filter:drop-shadow(0 20px 34px rgba(0,0,0,.5))}
.hero-scene .vv-marie-hero .vv-bulle{left:auto;right:82%;border-radius:14px 14px 3px 14px}
@media(max-width:760px){
  .hero-scene .wrap{padding-top:52px;padding-bottom:158px}
  .hero-scene h1{font-size:clamp(2.35rem,10.5vw,3.1rem)!important}
  .hero-scene .lead{font-size:.99rem;margin:16px 0 24px}
  .hero-scene .meta{gap:12px;margin-top:20px;padding-top:18px;font-size:.82rem}
  .hero-scene .vv-marie-hero{width:172px;right:8px}
}

/* ---------- Les cadres dorés vides (photos en préparation) ---------- */
.vv-cadre{position:relative;height:100%;min-height:130px;display:grid;place-items:center;
  border-radius:var(--r-md);overflow:hidden;
  background:
    radial-gradient(circle at 50% 28%,rgba(228,197,92,.10),transparent 62%),
    linear-gradient(160deg,#2E2420,#241B18 55%,#2B211E);
  border:2px solid color-mix(in srgb,var(--laiton) 72%,transparent);
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.28),inset 0 0 48px rgba(0,0,0,.5)}
.vv-cadre::before{content:"";position:absolute;inset:9px;pointer-events:none;
  border:1px solid rgba(201,162,39,.4);border-radius:calc(var(--r-md) - 6px)}
.vv-cadre::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.055) 50%,transparent 60%) 130% 0/240% 100% no-repeat;
  animation:vv-reflet 5.2s ease-in-out infinite}
@keyframes vv-reflet{to{background-position:-130% 0}}
.vc-in{color:rgba(250,246,239,.44);font-family:var(--serif);font-style:italic;
  text-align:center;font-size:.92rem;letter-spacing:.05em;line-height:2;padding:14px}
.bento .vv-cadre{border-radius:var(--r-lg)}
figure .vv-cadre{width:100%}

/* ---------- Les intertitres gagnent leurs filets dorés ---------- */
.eyebrow{display:flex;align-items:center;gap:14px}
.center .eyebrow,.sec-head.center .eyebrow{justify-content:center}
.hero .eyebrow{justify-content:flex-start}
.eyebrow::before,.eyebrow::after{content:"";height:1px;flex:0 0 34px;
  background:linear-gradient(90deg,transparent,var(--laiton))}
.eyebrow::after{background:linear-gradient(90deg,var(--laiton),transparent)}

/* ---------- Le public : les avis en loge de velours ---------- */
.avis-zone{background:linear-gradient(180deg,#3E0C10,var(--velours))}
.avis-zone .sec-head h2{color:var(--creme)}
.avis-zone .eyebrow{color:var(--laiton-clair)}
.avis-zone .wrap>p{color:rgba(250,246,239,.55)!important}
.avis{border:none;border-radius:var(--r-md);box-shadow:var(--ombre-2);position:relative}
.avis::before{content:"❝";position:absolute;top:-26px;left:16px;font-size:3.4rem;
  color:var(--laiton);font-family:var(--serif);text-shadow:0 2px 8px rgba(0,0,0,.4)}
.avis:nth-child(odd){--vrot:-1.2deg}
.avis:nth-child(even){--vrot:1deg}
.avis.vv-in{transform:rotate(var(--vrot,0deg))}
.avis:hover{transform:rotate(0deg) translateY(-6px)}
.note-globale{color:var(--creme)}
.note-globale b{color:var(--laiton-clair)}

@media (prefers-reduced-motion:reduce){
  .vv-cadre::after{animation:none}
}

/* la légende du bento garde son étage sous le texte du cadre */
.bento .vc-in{padding-bottom:48px}

/* ==========================================================================
   ACTE III — « La grande maison » : éditorial magazine, collage, matière.
   Inspiration : les meilleures tables (typographie géante, tampons, papier).
   ========================================================================== */

/* ---------- Typographie éditoriale : on ose ---------- */
main h2{font-size:clamp(2.5rem,5.8vw,4.1rem);letter-spacing:-.02em}
.sec-head p{font-size:1.12rem}
.wrap.narrow p.mute{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.2vw,1.45rem)!important;line-height:1.75;color:var(--charbon)!important}

/* ---------- Le hero, matière et lumière ---------- */
.hero-scene{background:
  radial-gradient(ellipse 62% 56% at 68% 70%,rgba(228,197,92,.14),transparent 70%),
  radial-gradient(ellipse 130% 90% at 50% 108%,rgba(0,0,0,.42),transparent 60%),
  repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 30px,transparent 30px 62px),
  linear-gradient(175deg,#5A1318,#471014 40%,var(--velours) 62%,#310A0D)}
.hero-scene h1{font-size:clamp(3.1rem,9vw,6.2rem)!important}
.hero-scene h1 em{position:relative;display:inline-block}
.vv-swash{position:absolute;left:-2%;right:-2%;bottom:-.14em;width:104%;height:.42em;overflow:visible}
.vv-swash path{stroke:var(--laiton-clair);stroke-width:5;fill:none;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;opacity:.85}
.vv-in .vv-swash path{animation:vv-trace 1s .9s var(--transition) forwards}
@keyframes vv-trace{to{stroke-dashoffset:0}}

/* les lumières de Murano flottent dans le velours */
.vv-bokeh{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.vv-bokeh i{position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(244,215,124,.5),rgba(244,215,124,.06) 60%,transparent 70%);
  filter:blur(2px);animation:vv-lueur var(--bd,9s) ease-in-out var(--bde,0s) infinite}
@keyframes vv-lueur{0%,100%{transform:translateY(0) scale(1);opacity:var(--bo,.3)}
  50%{transform:translateY(-26px) scale(1.12);opacity:calc(var(--bo,.3)*1.5)}}

/* le tampon qui tourne */
.vv-stamp{position:absolute;z-index:5;top:clamp(86px,12vh,140px);right:clamp(14px,5vw,70px);
  width:clamp(92px,12vw,130px);opacity:.9;animation:vv-tourne 22s linear infinite}
@keyframes vv-tourne{to{transform:rotate(360deg)}}
@media(max-width:760px){.vv-stamp{top:62px;width:78px;opacity:.42}}

/* ---------- Numéros d'acte en filigrane géant ---------- */
main section{position:relative}
/* `right:-.04em` faisait dépasser le filigrane de ~11 px à 272 px de corps :
   toute la page d'accueil défilait horizontalement de 10 px. Mesuré le 30/08,
   et vérifié indépendant du titre du hero. `right:0` : rien ne se voit. */
.vv-acte{position:absolute;top:-.06em;right:0;z-index:0;pointer-events:none;
  font-family:var(--serif);font-size:clamp(9rem,24vw,17rem);line-height:1;font-style:italic;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--laiton) 55%,transparent);
  opacity:.5}
.gf .vv-acte{-webkit-text-stroke-color:rgba(255,255,255,.3)}
main section>.wrap{position:relative;z-index:1}

/* ---------- Le bandeau défilant devient une enseigne ---------- */
.marquee{border-block:1px solid color-mix(in srgb,var(--laiton) 45%,transparent);padding:16px 0}
.marquee .track{font-size:clamp(1.02rem,2.4vw,1.4rem);font-weight:500;letter-spacing:.14em}
.marquee .track span{font-family:var(--serif);font-style:italic}

/* ---------- Les polaroids de la table (photos à venir) ---------- */
.vv-pola{background:#FFFDF6;padding:10px 10px 46px;border-radius:4px;
  box-shadow:0 3px 8px rgba(22,19,15,.10),0 16px 34px rgba(22,19,15,.13);
  transform:rotate(var(--tilt,0deg));transition:transform .5s var(--transition),box-shadow .5s var(--transition)}
.vv-pola:hover{transform:rotate(0) translateY(-8px) scale(1.02);box-shadow:var(--ombre-2);z-index:3}
.vv-pola::after{content:"";position:absolute;top:-12px;left:50%;width:86px;height:26px;
  transform:translateX(-50%) rotate(var(--tape,-2deg));
  background:color-mix(in srgb,var(--laiton-clair) 55%,transparent);
  border-left:1px dashed rgba(255,255,255,.5);border-right:1px dashed rgba(255,255,255,.5)}
.vv-pola:nth-child(5n+1){--tilt:-1.8deg;--tape:2deg}
.vv-pola:nth-child(5n+2){--tilt:1.4deg;--tape:-3deg}
.vv-pola:nth-child(5n+3){--tilt:-1.1deg;--tape:1deg}
.vv-pola:nth-child(5n+4){--tilt:2deg;--tape:-1.5deg}
.vv-pola:nth-child(5n+5){--tilt:-2.3deg;--tape:2.5deg}
.vv-pola .vv-cadre{border:none;border-radius:2px;box-shadow:inset 0 0 0 1px var(--ligne);
  background:
    radial-gradient(circle at 50% 42%,rgba(201,162,39,.12),transparent 58%),
    linear-gradient(160deg,var(--creme-2),var(--sable))}
.vv-pola .vv-cadre::before{border:1px dashed color-mix(in srgb,var(--gris) 38%,transparent);inset:10px}
.vv-pola .vv-cadre::after{content:none}
.vv-pola .vc-in{color:var(--gris);padding-bottom:14px}
.vv-pola figcaption{position:absolute;left:0;right:0;bottom:12px;padding:0 12px;
  background:none;color:var(--encre);font-family:var(--serif);font-style:italic;
  font-size:.98rem;text-align:center}
.bento .vv-pola{isolation:auto}
.bento .vv-pola::before{content:none}

/* ---------- Les grandes lignes de la carte ---------- */
.vv-signatures{margin-top:64px;border-bottom:1px solid var(--ligne)}
.vv-sig{display:flex;align-items:baseline;gap:16px;padding:22px 6px;border-top:1px solid var(--ligne);
  font-family:var(--serif);font-size:clamp(1.45rem,4vw,2.5rem);letter-spacing:-.015em;
  position:relative;transition:transform .4s var(--transition);cursor:default}
.vv-sig i{flex:1;border-bottom:2px dotted color-mix(in srgb,var(--gris) 45%,transparent);
  transform:translateY(-.32em)}
.vv-sig .px{color:var(--carmin);font-size:.72em;font-weight:600;white-space:nowrap}
.vv-sig small{position:absolute;left:6px;bottom:4px;font-family:var(--sans);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gris);opacity:0;transition:.35s}
.vv-sig:hover{transform:translateX(12px)}
.vv-sig:hover small{opacity:1}
.vv-sig:hover .nom-sig{color:var(--carmin)}
.nom-sig{transition:color .3s}

/* ---------- La loge du public, papier et or ---------- */
.avis{border-radius:4px}
.avis::after{content:"";position:absolute;top:-12px;left:50%;width:76px;height:24px;
  transform:translateX(-50%) rotate(var(--tape,-2deg));
  background:color-mix(in srgb,var(--laiton-clair) 5A%,transparent);
  background:color-mix(in srgb,var(--laiton-clair) 55%,transparent)}
.avis:nth-child(2)::after{--tape:2.4deg}
.avis:nth-child(3)::after{--tape:-1.4deg}
.avis p{font-size:1.2rem}

/* ---------- Le curseur d'or (grand écran) ---------- */
#vv-cur{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;
  background:var(--laiton);opacity:0;pointer-events:none;z-index:500;
  transition:opacity .25s,width .25s,height .25s,margin .25s}
body.vv-souris #vv-cur{opacity:.75}
#vv-cur.gros{width:34px;height:34px;margin:-11px 0 0 -11px;opacity:.28}

@media (prefers-reduced-motion:reduce){
  .vv-stamp,.vv-bokeh i{animation:none}
  #vv-cur{display:none}
}

/* ---------- La carte du QR : même théâtre, format menu ---------- */
.carte-hero{min-height:min(48vh,440px)}
.carte-hero .wrap{padding-top:60px;padding-bottom:104px}
.carte-hero h1{font-size:clamp(2.6rem,7vw,4.6rem)!important}
.carte-hero .lead{max-width:44ch}
@media(max-width:760px){.carte-hero .wrap{padding-top:44px;padding-bottom:150px}}
.menu-sec h2{font-size:clamp(2rem,4.8vw,3rem)}
.plat{transition:transform .35s var(--transition)}
.plat:hover{transform:translateX(10px)}
.plat .nom{font-family:var(--serif);font-size:clamp(1.06rem,2.4vw,1.3rem);transition:color .3s}
.plat:hover .nom{color:var(--carmin)}
.plat .prix{color:var(--carmin);font-weight:700}
.plat .desc{font-style:italic}
.carte-nav a{transition:color .25s,border-color .25s}
.carte-nav a:hover{color:var(--carmin)}

/* ==========================================================================
   ACTE IV — « L'affiche » : hero papier lumineux, le rideau devient un
   lambrequin en haut de scène. Typographie encre XXL, stickers, Marie en grand.
   ========================================================================== */
.hero-scene{
  align-items:center;color:var(--encre);
  background:
    radial-gradient(ellipse 46% 42% at 76% 74%,rgba(228,197,92,.34),transparent 70%),
    radial-gradient(ellipse 90% 70% at 18% 18%,rgba(201,162,39,.10),transparent 60%),
    linear-gradient(180deg,var(--creme),var(--creme-2))}
.hero-scene::after{
  background:var(--grain);opacity:.5;mix-blend-mode:normal}
/* le lambrequin : la bande de rideau qui pend en haut */
.hero-scene::before{
  content:"";position:absolute;left:0;right:0;top:0;height:76px;z-index:4;pointer-events:none;
  background:
    radial-gradient(circle at 30px 0,transparent 0 26px,var(--laiton) 27px 30px,transparent 31px) left 14px/60px 76px repeat-x,
    radial-gradient(ellipse 30px 42px at 30px 0,var(--carmin) 0 70%,var(--velours) 71% 100%,transparent 101%) left 0/60px 60px repeat-x,
    linear-gradient(180deg,var(--velours),var(--carmin) 55%,transparent 56%)}
.hero-scene .wrap{color:var(--encre);padding-top:150px}
.hero-scene h1{color:var(--encre);max-width:12ch}
.hero-scene h1 em{color:var(--carmin)}
.hero-scene .lead{color:var(--charbon);opacity:.85}
.hero-scene .eyebrow{color:var(--carmin)}
.hero-scene .meta{border-top:none;gap:14px;color:var(--charbon)}
.hero-scene .meta b{color:var(--encre)}
.hero-scene .meta>span{
  background:#FFFDF6;border:1.5px solid var(--encre);border-radius:12px;
  padding:9px 15px;box-shadow:0 3px 0 var(--encre);font-size:.86rem;
  transform:rotate(var(--st,-1.6deg))}
.hero-scene .meta>span:nth-child(2){--st:1.3deg}
.hero-scene .meta>span:nth-child(3){--st:-1deg}
.hero-scene .meta>span:nth-child(4){--st:1.8deg}
.hero-scene .btn-light{background:transparent;color:var(--encre);border:1.5px solid var(--encre)}
.hero-scene .vv-bokeh{display:none}
.vv-stamp{top:auto;bottom:clamp(18px,5vh,54px);right:auto;left:clamp(10px,4vw,60px);opacity:1}
@media(max-width:760px){.vv-stamp{width:74px;opacity:.85;bottom:12px;left:10px}}
.vv-swash path{stroke:var(--laiton)}
.hero-scene .vv-marie-hero{
  width:clamp(180px,26vw,320px);right:clamp(0px,4vw,70px);
  filter:drop-shadow(0 16px 26px rgba(94,18,22,.25))}
@media(max-width:760px){
  .hero-scene .wrap{padding-top:118px;padding-bottom:168px}
  .hero-scene .vv-marie-hero{width:180px;right:4px}
}
/* les heroes intérieurs (carte, le lieu) : plus courts, même affiche */
.carte-hero .wrap{padding-top:118px}

/* ---------- Les soirées : la maison s'anime ---------- */
.soirees{background:var(--creme-2)}
.soirees .avis h3{font-family:var(--serif);font-size:1.25rem}
.soirees .avis{background:#fff}

/* ==========================================================================
   SOBRIÉTÉ — dernière couche, elle a le dernier mot.
   Le décor reste (lambrequin, cadres, velours, stickers) ; ce qui bouge en
   permanence s'arrête. Une belle table ne clignote pas.
   ========================================================================== */

/* — plus de rideau au chargement, plus de cuillère qui tourne — */
#vv-rideau,#vv-spoon,#vv-cur{display:none!important}
#vv-prog{height:2px;box-shadow:none;background:var(--laiton)}

/* — apparitions : une remontée courte, sans cascade et SANS fondu.
   Le texte n'est jamais transparent : si une transition est gelée (onglet en
   arrière-plan, script en échec), le contenu reste lisible quoi qu'il arrive. — */
.reveal,.vv-r{opacity:1!important;transform:translateY(10px);
  transition:transform .45s var(--transition)!important;transition-delay:0s!important}
.reveal.in,.vv-r.vv-in{transform:none}
/* Les titres arrivent d'un bloc, plus mot à mot. On neutralise l'effet
   au niveau des mots seulement : jamais d'opacity:0 sur le titre lui-même,
   pour qu'aucun texte ne puisse rester invisible si une classe manque. */
.vv-mot{transform:none!important;opacity:1!important;transition:none!important}
.vv-mots{overflow:visible}

/* — le décor se tient tranquille — */
.vv-lustre,.vv-lustre .flamme,.vv-stamp,.vv-bokeh i,
.avis .stars,#vv-des .de,.vv-cadre::after,
.mv4-c1,.mv4-c2,.mv4-c3,.mv4-e1,.mv4-e2,.mv4-e3,.mv4-crayon,
.vv-marie-hero,#m-tout,.rf3-marie.pop #m-tout{animation:none!important}
.avis .stars{color:var(--laiton);-webkit-text-fill-color:var(--laiton)}
.vv-bokeh{opacity:.5}

/* — survols : un mouvement, pas trois — */
.avis:hover,.bento figure:hover,.vv-pola:hover{transform:translateY(-4px)}
.avis.vv-in{transform:none}
.bento figure:hover img{transform:none}
.vv-sig:hover{transform:translateX(6px)}
.btn:hover{transform:translateY(-1px)}
#vv-des:hover{transform:translateY(-2px)}

/* — le bandeau défile deux fois moins vite — */
.marquee .track{animation-duration:64s}

/* ==========================================================================
   MANGER OU BOIRE — le choix d'entrée de la carte (29/08)
   ==========================================================================
   Posé en fin de vivant.css, donc après le bloc SOBRIÉTÉ : ces règles doivent
   gagner. Aucune animation permanente ici — on reste dans la ligne calme.
   ========================================================================== */
.cc-choix{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:6px 0 30px}
.cc-carte{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;padding:30px 22px 26px;border-radius:18px;text-decoration:none;
  background:var(--creme-2);border:1px solid var(--ligne);
  transition:border-color .18s,transform .18s,box-shadow .18s}
.cc-carte:hover,.cc-carte:focus-visible{border-color:var(--carmin);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(142,28,34,.12)}
.cc-ico{font-size:2rem;line-height:1}
.cc-carte b{font:600 clamp(1.3rem,3.4vw,1.75rem)/1.15 var(--serif);color:var(--carmin)}
.cc-carte i{font-style:normal;font-size:.86rem;color:var(--gris);line-height:1.45;max-width:24ch}

/* La bascule : deux onglets, collants sous l'en-tête. */
.cc-bascule{position:sticky;top:var(--h-entete);z-index:20;background:var(--creme);
  border-bottom:1px solid var(--ligne);padding:10px 0}
.cc-bascule .wrap{display:flex;gap:8px;justify-content:center}
.cc-bascule button{flex:0 1 190px;padding:11px 18px;border-radius:999px;cursor:pointer;
  font:600 .95rem var(--sans);color:var(--charbon);background:transparent;
  border:1px solid var(--ligne);transition:background .15s,color .15s,border-color .15s}
.cc-bascule button[aria-pressed="true"]{background:var(--carmin);border-color:var(--carmin);color:#fff}
.cc-bascule button:hover:not([aria-pressed="true"]){border-color:var(--carmin);color:var(--carmin)}

/* La nav des sections ne montre que celles de la famille active. */
html[data-famille="manger"] .carte-nav li[data-fam="boire"],
html[data-famille="boire"] .carte-nav li[data-fam="manger"]{display:none}

/* Sans JavaScript, la carte entière s'affiche : le choix disparaît, rien ne
   se cache. C'est le repli qu'on veut, jamais une page vide. */
.carte-nav[hidden],.cc-bascule[hidden],.cc-choix[hidden]{display:none}

@media (max-width:560px){
  .cc-choix{grid-template-columns:1fr;gap:12px}
  .cc-carte{flex-direction:row;justify-content:flex-start;text-align:left;padding:18px 20px;gap:14px}
  .cc-carte .cc-ico{font-size:1.7rem}
  .cc-carte i{display:none}
  .cc-bascule button{flex:1}
}

/* La carte est une carte, pas une page d'accueil : après un scan de QR à
   table, le client doit voir le choix « manger / boire » sans faire défiler.
   On raccourcit donc son hero — surtout sur téléphone, où il mangeait tout
   le premier écran et repoussait le choix hors de vue. */
.carte-hero .wrap{padding-top:46px!important;padding-bottom:40px!important}
.carte-hero h1{font-size:clamp(2.1rem,6vw,3.4rem)!important}
.carte-hero .lead{margin:12px 0 0;font-size:.95rem}
@media (max-width:720px){
  .carte-hero .wrap{padding-top:26px!important;padding-bottom:26px!important}
  .carte-hero h1{font-size:clamp(1.9rem,8vw,2.4rem)!important}
  .carte-hero .lead{font-size:.9rem}
  .carte-hero .vv-marie-hero{display:none}   /* Marie repousse le choix sur mobile */
}

/* Le hero de la carte, raccourci, laissait le pan carmin passer SOUS le texte :
   « Service du soir » devenait rouge sombre sur carmin, illisible. Sur la carte
   on revient donc à un fond papier franc — c'est une carte de restaurant, la
   lisibilité prime sur l'effet de scène. */
.carte-hero.hero-scene{background:linear-gradient(180deg,var(--creme),var(--creme-2))!important}
.carte-hero.hero-scene::after{display:none!important}
.carte-hero .eyebrow{color:var(--carmin)!important}
.carte-hero h1,.carte-hero .lead{color:var(--encre)!important}
.carte-hero h1 em{color:var(--carmin)!important}

/* La bulle de Marie recouvrait les deux cartes du choix. Tant qu'on est sur
   l'écran de choix, on la range : elle revient dès qu'une famille est ouverte. */
html:not([data-famille]) .mm-bulle,
html:not([data-famille]) .mm-coucou{display:none!important}

/* Le pan carmin (.vv-panneau) est le fond de Marie dans le hero. Sur téléphone
   où Marie est masquée sur la carte, il ne restait qu'un aplat rouge par-dessus
   le titre. On le retire avec elle. */
@media (max-width:720px){ .carte-hero .vv-panneau{display:none!important} }

/* Sur l'écran de choix, rien ne doit recouvrir les deux cartes : ni la pastille
   du chat, ni la roulette « Marie choisit ». Elles reviennent dès qu'une
   famille est ouverte. */
html:not([data-famille]) #vv-des{display:none!important}

/* Sur la carte, on laisse le client choisir : ni la pastille du chat, ni la
   roulette « Marie choisit ». Quelqu'un attablé qui scanne le QR veut lire le
   menu, pas qu'on décide à sa place. Marie reste sur les autres pages. */
body[data-page="carte"] .mm-bulle,
body[data-page="carte"] .mm-coucou,
body[data-page="carte"] #vv-des,
body[data-page="carte"] .vv-des-panneau{display:none!important}

/* ==========================================================================
   LA CARTE — reprise du 29/08 (fin de journée)
   ==========================================================================
   Trois demandes, dans l'ordre : Marie revient dans le hero, les boutons du
   bas disparaissent (les gens qui scannent le QR sont DÉJÀ au restaurant, on
   ne leur propose pas de réserver ni d'appeler), et l'écran de choix cède la
   place à deux onglets.
   ========================================================================== */

/* 1 — Marie revient, y compris sur téléphone. */
@media (max-width:720px){
  .carte-hero .vv-marie-hero{display:block!important;width:150px;right:2px;bottom:-6px}
  .carte-hero .vv-panneau{display:block!important}
  /* le texte se resserre pour ne pas passer sous elle */
  .carte-hero .wrap{max-width:64%}
  .carte-hero .lead{display:none}          /* pas la place, et le titre suffit */
}

/* 2 — Pas de barre d'action en bas : le client est à table. */
body[data-page="carte"] .ctabar{display:none!important}
body[data-page="carte"]{padding-bottom:0!important}

/* 3 — Les onglets, promus en barre principale. Toujours visibles, collants
   sous l'en-tête, et assez larges pour un pouce. */
.cc-bascule{position:sticky;top:var(--h-entete);z-index:20;
  background:var(--creme);border-bottom:1px solid var(--ligne);padding:12px 0 11px}
.cc-bascule .wrap{display:flex;gap:10px;justify-content:center;max-width:520px}
.cc-bascule button{flex:1;padding:13px 10px;border-radius:999px;cursor:pointer;
  font:600 1rem var(--serif);letter-spacing:.01em;color:var(--charbon);
  background:transparent;border:1.5px solid var(--ligne);
  transition:background .16s,color .16s,border-color .16s}
.cc-bascule button[aria-pressed="true"]{background:var(--carmin);border-color:var(--carmin);color:#fff}
.cc-bascule button:hover:not([aria-pressed="true"]){border-color:var(--carmin);color:var(--carmin)}
@media (max-width:560px){
  .cc-bascule{padding:10px 0 9px}
  .cc-bascule button{font-size:.95rem;padding:12px 8px}
}

/* Sur téléphone, le pan carmin remonte sous tout le texte du hero : l'exergue
   carmin devenait invisible et « du soir » disparaissait. On éclaircit le texte
   plutôt que de retirer le pan — Marie a besoin de son fond. */
@media (max-width:720px){
  .carte-hero .eyebrow{color:var(--laiton-clair)!important}
  .carte-hero .eyebrow::before,.carte-hero .eyebrow::after{background:var(--laiton)!important;opacity:.7}
  .carte-hero h1{color:var(--creme)!important}
  .carte-hero h1 em{color:var(--laiton-clair)!important}
  .carte-hero .vv-tampon{opacity:.35}
}

/* ==========================================================================
   Deux défauts constatés sur téléphone le 29/08 au soir
   ========================================================================== */

/* 1 — LES PASTILLES QUI RESTENT ROUGES.
   `.carte-nav a:hover` passe en carmin plein. Sur un écran tactile, l'état
   survolé RESTE COLLÉ après la tape : la pastille garde son fond rouge et son
   texte blanc devient illisible sur le défilement. On réserve donc le survol
   aux appareils qui ont un vrai pointeur, et on donne au tactile un retour
   franc mais bref (`:active`). La pastille de la section en cours, elle, est
   marquée par un simple contour — jamais un aplat. */
.carte-nav a:hover{background:var(--creme-2);border-color:var(--ligne);color:var(--charbon)}
@media (hover:hover) and (pointer:fine){
  .carte-nav a:hover{background:var(--carmin);border-color:var(--carmin);color:#fff}
}
.carte-nav a:active{background:var(--sable);border-color:var(--carmin)}

/* 2 — LE DÉFILEMENT PAS FLUIDE.
   Un accrochage doux évite de s'arrêter au milieu d'une pastille, et le
   rebond ne remonte plus jusqu'à la page derrière. */
.carte-nav ul{
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  scroll-padding-left:var(--pad);
}
.carte-nav li{scroll-snap-align:start}

/* 3 — LES CHEVAUCHEMENTS DU HERO.
   Mesuré : la bulle de Marie recouvrait l'exergue, et le texte débordait de
   74 px sur elle. Le texte se cale à gauche sur une colonne étroite, Marie
   se resserre à droite, et la bulle disparaît — sur une carte, elle n'apporte
   rien et c'est elle qui gênait le plus. */
@media (max-width:720px){
  .carte-hero .wrap{max-width:none;padding-right:47%}
  .carte-hero .vv-bulle{display:none!important}
  .carte-hero .vv-marie-hero{width:132px;right:-6px;bottom:-4px}
  .carte-hero .eyebrow{font-size:.66rem;letter-spacing:.12em;line-height:1.5}
  .carte-hero h1{font-size:clamp(1.75rem,7.4vw,2.2rem)!important;line-height:1.05}
}

/* Les filets décoratifs de l'exergue flottent au milieu d'un bloc de quatre
   lignes sur téléphone : ils n'encadrent plus rien. On les retire là. */
@media (max-width:720px){
  .carte-hero .eyebrow::before,.carte-hero .eyebrow::after{display:none!important}
}