/* ============================================================
   MÈT — page de prise de RDV en jouant
   Chargé uniquement sur met.php. Reprend la charte de style.css
   (:root --navy, --gold, --paper…) sans la modifier.
   ============================================================ */

.met{
  --met-fond:#f4f3ef;
  --met-texte-doux:#4a5566;
  --met-or-texte:#8a5d0f;       /* or lisible sur fond clair */
  --met-or-pale:#fbf4e6;
  --met-gris-barre:#dcdad3;
  --met-univers:var(--gold);    /* change avec cuisine / dressing / placard */
  --met-rayon:18px;
  --met-creme:#f7f2ea;          /* fond de la page d'accueil (pas de bleu) */
  --met-encre:#1e1f23;          /* titres et bouton principal */
  --met-texte:#3a3b40;
  --met-or-fonce:#9b6b17;       /* petits textes dorés lisibles sur crème */
  --met-or-titre:#b8842a;
  --met-ease:cubic-bezier(.16,1,.3,1);
  font-family:var(--sans);
  color:var(--navy);
}

/* La bulle d'assistant et la pop-up promo gênent le jeu : masquées ici seulement */
.met-body .chat-launcher,
.met-body .chat-window,
.met-body .promo-popup-overlay{display:none!important}

.met [hidden]{display:none!important}
/* Pendant l'échange, chaque écran s'affiche d'un coup depuis le haut (pas de glissement de page) */
html:has(body.met-en-jeu){scroll-behavior:auto}
.met-visuel-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Boutons ---------- */
.met-btn,.met-btn-contour{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:0 1.6rem;border-radius:999px;
  font:500 1rem var(--sans);cursor:pointer;transition:background .25s,color .25s,transform .2s,opacity .2s;
}
.met-btn{background:var(--navy);color:#fff;border:0}
.met-btn:hover{background:var(--navy-deep);transform:translateY(-1px)}
.met-btn:disabled{opacity:.4;cursor:default;transform:none}
.met-btn-contour{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.met-btn-contour:hover{background:var(--navy);color:#fff}
.met-btn-large{width:100%;min-height:56px;font-size:1.05rem}
.met-lien{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.met-lien-discret{font-size:.85rem;opacity:.75}
.met-btn:focus-visible,.met-btn-contour:focus-visible,.met-lien:focus-visible,.met-micro:focus-visible,.met-micro-geant:focus-visible,.met-jour:focus-visible,.met-heure:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ============================================================
   ACCUEIL — arrivée, vidéo, envies
   ============================================================ */
.met-accueil{background:var(--met-creme);color:var(--met-encre)}

/* Avant l'animation (met-js posé par la page) : les éléments attendent leur entrée.
   Filet de sécurité : ils apparaissent seuls après 3 s si le script ne tourne pas. */
.met-js .met-hero [data-anim]{opacity:0;animation:met-secours .6s ease 3s forwards}
.met-js .met-hero [data-anim].met-vu{opacity:1;animation:none}
.met-cache{opacity:0}
.met-js .met-hero-photo img{opacity:0;animation:met-secours .6s ease 3s forwards}
.met-js .met-hero-photo img.met-vu{opacity:1;animation:none}

/* ---------- Arrivée ---------- */
.met-hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:min(100svh,1000px);padding:clamp(8.5rem,17vh,10.5rem) 0 clamp(3rem,7vh,5rem);background:var(--met-creme)}
.met-hero-photo{position:absolute;top:0;right:0;bottom:0;width:68%;overflow:hidden;will-change:transform}
.met-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;display:block}
.met-hero-photo::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--met-creme) 0%,rgba(247,242,234,.9) 16%,rgba(247,242,234,.38) 40%,rgba(247,242,234,0) 60%),
  linear-gradient(0deg,rgba(247,242,234,.85),rgba(247,242,234,0) 24%)}
.met-hero-inner{position:relative;z-index:1;width:100%;max-width:1320px;margin:0 auto;padding:0 2.2rem;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:2rem;align-items:center}

.met-surtitre{margin:0;font:600 .78rem/1.5 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--met-or-fonce)}
.met-trait{display:block;width:52px;height:2px;margin:.9rem 0 1.5rem;background:var(--gold);transform-origin:left center}
.met-titre{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(2.9rem,6.3vw,6rem);line-height:.98;letter-spacing:-.01em;color:var(--met-encre)}
.met-ligne{display:block}
.met-ligne-or{font-style:italic;font-weight:500;color:var(--met-or-titre)}
.met-hero-lead{margin:1.5rem 0 0;max-width:34rem;font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.55;font-weight:400;color:var(--met-texte)}

.met-depart{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 2rem;margin-top:2.2rem}
.met-cta{position:relative;display:inline-flex;align-items:center;gap:1.1rem;height:74px;padding:0 1.9rem 0 .6rem;border:0;border-radius:999px;cursor:pointer;overflow:hidden;
  background:var(--met-encre);color:#fff;box-shadow:0 0 0 2px var(--gold-soft),0 18px 40px rgba(30,31,35,.26);
  transition:transform .5s var(--met-ease),box-shadow .5s var(--met-ease)}
.met-cta:hover{transform:translateY(-3px);box-shadow:0 0 0 2px var(--gold-soft),0 26px 52px rgba(30,31,35,.32)}
.met-cta:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.met-cta::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.18),rgba(255,255,255,0));transform:skewX(-18deg);
  animation:met-reflet 6s ease-in-out 3.5s infinite}
.met-cta-micro{flex:none;width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--met-encre);display:flex;align-items:center;justify-content:center;animation:met-halo-doux 2.4s ease-in-out infinite}
.met-cta-micro svg{width:26px;height:26px}
.met-cta-txt{font-family:var(--display);font-weight:600;font-size:1.75rem;line-height:1;white-space:nowrap}
.met-cta-fleche{width:24px;height:24px;transition:transform .45s var(--met-ease)}
.met-cta:hover .met-cta-fleche{transform:translateX(5px)}
#metJouerTexte{font-size:1.05rem;color:var(--met-encre)}

.met-puces{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem;margin:1.8rem 0 0;padding:0}
.met-puces li{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem 1.1rem;border:1px solid var(--gold);border-radius:999px;background:rgba(255,255,255,.55);
  font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--met-encre)}
.met-puces svg{width:17px;height:17px;color:var(--met-or-fonce)}
.met-reprise{margin:1.4rem 0 0;color:var(--met-texte)}

/* ---------- Le téléphone ---------- */
.met-hero-visuel{position:relative;display:flex;justify-content:flex-start;align-items:center;min-height:620px;padding-left:9%}
.met-tel{--tel:clamp(250px,22vw,330px);position:relative;width:var(--tel);font-size:calc(var(--tel) / 20)}
.met-tel-flotte{animation:met-flotte 6s ease-in-out 2s infinite}
.met-tel-coque{height:40.5em;padding:.7em;border-radius:3.3em;background:#0e0f12;transform:rotate(8deg);
  box-shadow:0 3em 5em rgba(30,31,35,.34),inset 0 0 0 .12em #2a2c31}
.met-tel-ecran{position:relative;height:100%;border-radius:2.65em;overflow:hidden;background:#fbf8f2}
.met-tel-ile{position:absolute;z-index:3;top:.6em;left:50%;width:5.6em;height:1.6em;margin-left:-2.8em;border-radius:1em;background:#0e0f12}
.met-ecran{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:3.1em 1.2em 1.6em;
  opacity:0;transform:translateY(1.2em);transition:opacity .8s var(--met-ease),transform .8s var(--met-ease)}
.met-ecran.est-actif{opacity:1;transform:none}
.met-ecran.sort{opacity:0;transform:translateY(-1.2em)}
.met-ecran-logo{height:2.3em;width:auto;display:block}
.met-ecran-perso{margin-top:.7em;width:15.6em;height:15em;border-radius:1em 1em 2.2em 2.2em;overflow:hidden;display:flex;justify-content:center;align-items:flex-end;
  background:radial-gradient(circle at 50% 36%,#ffffff 0%,#f6ead3 55%,#ecd6ae 100%)}
.met-ecran-perso .met-duo{width:10.6em;margin:0 1.4em -.3em 0}
/* Dans le téléphone, Mèt dit bonjour : la bouche bouge par rafales */
.met-ecran-perso .met-bouche{animation:met-parle-rafale 3.2s ease-in-out infinite}
.met-ecran-titre{margin:.9em 0 0;font-family:var(--display);font-weight:600;font-size:1.75em;line-height:1.05;text-align:center;color:var(--met-encre)}
.met-ecran-sous{margin:.35em .4em 0;font-family:var(--display);font-style:italic;font-weight:500;font-size:1.15em;line-height:1.25;text-align:center;color:var(--met-texte)}
.met-ecran-voix{margin-top:auto;display:flex;align-items:center;gap:.8em}
.met-ecran-micro{width:4em;height:4em;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;animation:met-halo-doux 2.4s ease-in-out infinite}
.met-ecran-micro svg{width:1.8em;height:1.8em}
.met-onde{display:flex;align-items:center;gap:.22em;height:2.4em}
.met-onde i{display:block;width:.18em;border-radius:.1em;background:var(--gold);animation:met-onde 1.1s ease-in-out infinite}
.met-onde i:nth-child(1){height:.7em}
.met-onde i:nth-child(2){height:1.3em;animation-delay:.15s}
.met-onde i:nth-child(3){height:2em;animation-delay:.3s}
.met-onde i:nth-child(4){height:1.1em;animation-delay:.45s}
.met-onde i:nth-child(5){height:.6em;animation-delay:.6s}
.met-onde-inverse{flex-direction:row-reverse}

.met-ecran-ok{margin-top:2.4em;width:4.6em;height:4.6em;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 .5em rgba(211,154,44,.18)}
.met-ecran-ok svg{width:2.2em;height:2.2em}
.met-ecran-ok path{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .7s var(--met-ease) .35s}
.met-ecran.est-actif .met-ecran-ok path{stroke-dashoffset:0}
.met-ecran[data-ecran="rdv"] .met-ecran-titre{margin-top:.7em;font-size:2.1em}
.met-ecran-carte{margin-top:1.2em;width:15.6em;box-sizing:border-box;padding:1.1em 1em;display:flex;flex-direction:column;align-items:center;gap:.25em;
  background:#fff;border:1px solid #ecdcbc;border-radius:1em;box-shadow:0 .8em 1.8em rgba(30,31,35,.1);
  opacity:0;transform:translateY(1.4em);transition:opacity .8s var(--met-ease) .25s,transform .8s var(--met-ease) .25s}
.met-ecran.est-actif .met-ecran-carte{opacity:1;transform:none}
.met-ecran-jour{font:600 .8em var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--met-or-fonce)}
.met-ecran-heure{font-family:var(--display);font-weight:600;font-size:2.7em;line-height:1;color:var(--met-encre)}
.met-ecran-filet{width:2em;height:2px;margin:.35em 0;background:var(--gold)}
.met-ecran-lieu{font:500 1em var(--sans);color:var(--met-encre)}
.met-ecran-projet{font:400 .9em var(--sans);color:#6d6f76}

.met-vitre{position:absolute;right:0;top:20%;width:11.5rem;padding:1.2rem 1.3rem;border-radius:16px;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 40px rgba(30,31,35,.16)}
.met-vitre p{margin:0;font-family:var(--display);font-style:italic;font-weight:500;font-size:1.5rem;line-height:1.2;color:var(--met-encre)}
.met-vitre span{display:block;width:36px;height:2px;margin-top:.8rem;background:var(--gold)}

/* ---------- Mèt (le petit personnage) : respire et fait coucou ---------- */
/* ---------- Le porteur (le bonhomme) et Mèt dans sa main ---------- */
.met-duo{position:relative;aspect-ratio:600/846;transform-origin:50% 100%;animation:met-respire 3.6s ease-in-out infinite}
.met-duo > img{position:absolute;inset:0;width:100%;height:100%;display:block}
.met-bonhomme-bras{transform-origin:18.46% 66.23%;animation:met-coucou 7s ease-in-out 1.4s infinite}
/* Il cligne des yeux : mi-clos → fermé → mi-clos, toutes les 4 s environ (deux rythmes pour ne pas faire mécanique) */
.met-paupieres{opacity:0;animation-timing-function:step-end;animation-iteration-count:infinite}
.met-paupieres-mi{animation-name:met-cligne-mi;animation-duration:4.3s}
.met-paupieres-clos{animation-name:met-cligne-clos;animation-duration:4.3s}
.met-ecran-perso .met-paupieres{animation-delay:-1.7s}
.met-dans-main{position:absolute;left:39.4%;top:60.1%;width:79.2%;transform-origin:32% 88%;animation:met-balance 2.8s ease-in-out infinite}
.met-svg{width:100%;height:auto;display:block;overflow:visible}

/* Mèt, le mètre-ruban */
.met-ruban-bande{fill:#e8c07a;stroke:var(--navy);stroke-width:3}
.met-ruban-graduations{stroke:var(--navy);stroke-width:2}
.met-ruban-bout{fill:var(--navy)}
.met-ruban{transform-origin:196px 175px;transform:scaleX(var(--met-ruban,.35));transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.met-boitier{fill:var(--gold);stroke:var(--navy);stroke-width:5}
.met-visage{fill:#f6e3bd}
.met-vis{fill:var(--navy)}
.met-joue{fill:#e9a878;opacity:.7}
.met-oeil-rieur{stroke:var(--navy);stroke-width:6;fill:none;stroke-linecap:round;opacity:0}
.met-oeil-rond{fill:var(--navy);transform-box:fill-box;transform-origin:center;animation:met-cligne 4.5s infinite}
.met-sourcil{stroke:var(--navy);stroke-width:5;stroke-linecap:round;opacity:0}
.met-bouche{fill:var(--navy);transform-box:fill-box;transform-origin:center}
.met-bouche-plate{stroke:var(--navy);stroke-width:6;stroke-linecap:round;opacity:0}
.met-crayon{fill:var(--navy);stroke:var(--navy);stroke-width:3}
.met-crayon-mine{fill:#f6e3bd;stroke:var(--navy);stroke-width:3;stroke-linejoin:round}
.met-corps{transform-origin:110px 200px;transition:transform .5s var(--met-ease)}

/* ---------- La vidéo ---------- */
.met-film{background:var(--paper);padding:clamp(4.5rem,10vw,8rem) 0}
.met-film-inner{max-width:1180px;margin:0 auto;padding:0 2.2rem;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.met-film-cadre{position:relative;justify-self:center;width:min(100%,360px);aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#111;
  box-shadow:0 30px 60px rgba(30,31,35,.22),0 0 0 1px rgba(211,154,44,.4)}
.met-film-cadre video{width:100%;height:100%;object-fit:cover;display:block}
.met-son{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:rgba(30,31,35,.72);color:#fff;display:flex;align-items:center;justify-content:center}
.met-son svg{width:22px;height:22px}
.met-son .met-son-on{display:none}
.met-son[aria-pressed="true"] .met-son-on{display:inline}
.met-son[aria-pressed="true"] .met-son-off{display:none}
.met-film-texte h2,.met-envies-tete h2{margin:1rem 0 1.2rem;font-family:var(--display);font-weight:500;font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:1.05;color:var(--met-encre)}
.met-film-texte h2 em,.met-envies-tete h2 em{font-style:italic;color:var(--met-or-titre)}
.met-film-texte p:not(.met-surtitre){margin:0;max-width:30rem;font-size:1.1rem;line-height:1.65;font-weight:400;color:var(--met-texte)}
.met-lien-fleche{margin-top:2rem;display:inline-flex;align-items:center;gap:.7rem;padding:0 0 .4rem;background:none;border:0;border-bottom:1px solid var(--gold);cursor:pointer;
  font:500 .82rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--met-encre)}
.met-lien-fleche::after{content:"→";color:var(--gold);transition:transform .45s var(--met-ease)}
.met-lien-fleche:hover::after{transform:translateX(5px)}

/* ---------- Les envies ---------- */
.met-envies{background:var(--met-creme);padding:clamp(4.5rem,10vw,8rem) 0}
.met-envies-inner{max-width:1320px;margin:0 auto;padding:0 2.2rem}
.met-envies-tete{text-align:center;margin-bottom:3rem}
.met-envies-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem}
.met-envie{display:flex;flex-direction:column;padding:0;border:0;border-radius:18px;overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:inherit;background:#fff;
  box-shadow:0 14px 34px rgba(30,31,35,.08);transition:transform .6s var(--met-ease),box-shadow .6s var(--met-ease)}
.met-envie:hover{transform:translateY(-6px);box-shadow:0 26px 52px rgba(30,31,35,.14)}
.met-envie:focus-visible,.met-lien-fleche:focus-visible,.met-son:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.met-envie-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#ece6db}
.met-envie-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--met-ease)}
.met-envie:hover .met-envie-img img{transform:scale(1.06)}
.met-envie-bas{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 1.5rem}
.met-envie-bas strong{font-family:var(--display);font-weight:600;font-size:1.7rem;color:var(--met-encre)}
.met-envie-bas span{font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--met-or-fonce);white-space:nowrap}
.met-envie-bas span::after{content:" →"}

/* ============================================================
   LE JEU
   ============================================================ */
.met-jeu{background:var(--met-fond);padding:calc(var(--met-entete,6.5rem) + 5.4rem) 1.2rem 4rem;min-height:100vh}
.met-carte{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:1.4rem}

/* Progression */
/* « Retour » et la progression restent collés sous l'en-tête du site, même quand on fait défiler l'écran */
.met-tete{display:flex;flex-direction:column;gap:.6rem;position:fixed;top:var(--met-entete,5.8rem);left:0;right:0;z-index:20;
  padding:.55rem 1.2rem .6rem;background:var(--met-fond)}
.met-tete > *{width:100%;max-width:560px;margin-left:auto;margin-right:auto}
.met-tete-ligne{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;color:var(--met-texte-doux)}
.met-points{color:var(--met-or-texte);font-weight:600;font-variant-numeric:tabular-nums}
/* Service en ligne, pas un jeu : points et badges restent côté Brasa, invisibles pour le client */
.met-points,.met-badges{display:none!important}
.met-barre{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.met-barre span{height:6px;border-radius:3px;background:var(--met-gris-barre);transition:background .5s}
.met-barre span.fait{background:var(--met-univers)}
.met-barre span.encours{background:linear-gradient(90deg,var(--met-univers) 50%,var(--met-gris-barre) 50%);background-size:200% 100%;animation:met-charge 1.6s ease-in-out infinite alternate}
.met-badges{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.met-badges li{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:999px;background:var(--met-or-pale);border:1px solid var(--gold);font-size:.78rem;font-weight:500;color:var(--met-or-texte)}
.met-badges li svg{width:14px;height:14px}

/* Mèt */
.met-scene{display:flex;flex-direction:column;align-items:center;gap:1rem}
.met-perso{position:relative;width:min(300px,70%);transform-origin:50% 100%;transition:transform .6s var(--met-ease)}
.met-perso .met-duo{width:100%}
.met-perso-ombre{position:absolute;left:14%;right:10%;bottom:-3%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(30,31,35,.22),rgba(30,31,35,0))}

/* Expressions : parle, ecoute, doute, joie, attente */
/* C'est Mèt (le mètre-ruban) qui parle et réagit ; son porteur respire, fait coucou et saute de joie */
.met-perso[data-expr="parle"] .met-bouche{animation:met-parle .28s ease-in-out infinite alternate}
.met-perso[data-expr="ecoute"] .met-corps{transform:rotate(-6deg)}
.met-perso[data-expr="ecoute"] .met-bouche{transform:scale(.7,.45)}
.met-perso[data-expr="doute"] .met-corps{transform:rotate(5deg)}
.met-perso[data-expr="doute"] .met-sourcil{opacity:1}
.met-perso[data-expr="doute"] .met-bouche{opacity:0}
.met-perso[data-expr="doute"] .met-bouche-plate{opacity:1}
.met-perso[data-expr="joie"] .met-oeil-rieur{opacity:1}
.met-perso[data-expr="joie"] .met-oeil-rond{opacity:0}
.met-perso[data-expr="joie"] .met-duo{animation:met-saut .55s ease-out 2}
.met-perso[data-expr="joie"] .met-bonhomme-bras{animation:met-coucou-vite 1.3s ease-in-out 1}
.met-perso[data-expr="attente"] .met-corps{animation:met-reflechit 1.2s ease-in-out infinite}
.met-perso[data-expr="attente"] .met-bouche{transform:scale(.55,.35)}

/* Réponses toutes prêtes : un toucher suffit */
.met-choix{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin-top:-.2rem}
.met-choix-btn{min-height:46px;padding:0 1.25rem;border-radius:999px;border:1.5px solid var(--gold);background:#fff;cursor:pointer;
  font:500 1rem var(--sans);color:var(--met-encre);box-shadow:0 6px 16px rgba(30,31,35,.06);
  transition:background .25s,color .25s,transform .2s;animation:met-choix-entre .45s var(--met-ease) both}
.met-choix-btn:nth-child(2){animation-delay:.05s}.met-choix-btn:nth-child(3){animation-delay:.1s}.met-choix-btn:nth-child(4){animation-delay:.15s}
.met-choix-btn:hover{background:var(--gold);color:#fff;transform:translateY(-1px)}
.met-choix-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.met-choix.beaucoup{gap:.42rem}
.met-choix.beaucoup .met-choix-btn{min-height:42px;padding:0 .9rem;font-size:.94rem;animation-delay:0s}
@keyframes met-choix-entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Bulles */
.met-bulle{
  position:relative;align-self:stretch;margin:0;padding:1.1rem 1.3rem;
  background:#fff;border-radius:var(--met-rayon);
  font-family:var(--display);font-weight:600;font-size:clamp(1.45rem,4.2vw,1.9rem);line-height:1.18;color:var(--navy);
  box-shadow:0 10px 28px rgba(31,43,61,.07);min-height:3.2em;
}
.met-bulle::before{content:"";position:absolute;top:-9px;left:50%;width:18px;height:18px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:3px}
.met-client{align-self:flex-end;max-width:85%;margin:0;padding:.85rem 1.1rem;background:var(--navy);color:#fff;border-radius:18px 18px 4px 18px;font-size:1rem;line-height:1.45}
.met-client.provisoire{opacity:.7;font-style:italic}

/* Envoi automatique, avec « Corriger » */
.met-envoi{display:flex;align-items:center;gap:1rem;justify-content:flex-end;font-size:.9rem;color:var(--met-texte-doux)}
.met-envoi-barre{flex:1;max-width:220px;height:4px;border-radius:2px;background:var(--met-gris-barre);overflow:hidden}
.met-envoi-barre span{display:block;height:100%;width:100%;background:var(--met-univers);transform-origin:left}
.met-envoi-barre span.go{animation:met-decompte var(--met-delai,1.4s) linear forwards}

/* Mèt en direct : texte qui s'écrit au rythme de la voix, commandes discrètes */
.met-direct .met-bulle{color:var(--met-encre)}
.met-bulle.met-ecrit-en-cours::after{content:"";display:inline-block;width:2px;height:.95em;margin-left:3px;vertical-align:-.1em;background:var(--gold);animation:met-curseur .8s steps(1) infinite}
@keyframes met-curseur{50%{opacity:0}}
.met-direct .met-client{background:var(--met-encre);animation:met-choix-entre .3s var(--met-ease) both}
.met-direct .met-btn{background:var(--met-encre)}
.met-direct .met-commandes{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.55rem}
.met-direct .met-etat{flex-basis:100%;font-size:.88rem}
.met-direct .met-micro{width:48px;height:48px;background:var(--met-encre);box-shadow:0 0 0 4px rgba(211,154,44,.18)}
.met-direct .met-micro svg{width:22px;height:22px}
.met-direct .met-micro.ecoute{background:var(--gold);color:var(--met-encre)}
.met-direct .met-actions{align-items:center}
.met-direct .met-ecrit{flex-basis:100%}

/* ============================================================
   ÉCRANS AVEC PHOTOS : la photo en haut, la question de Mèt, les réponses
   (tuiles, cartes, vignettes, couleurs, largeur, résumé)
   ============================================================ */
.met-tete-ligne{align-items:center;min-height:44px}
.met-retour{flex:none;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;margin-right:auto;padding:0 1.1rem 0 .85rem;border-radius:999px;
  border:1.5px solid var(--met-encre);background:#fff;cursor:pointer;font:500 .98rem var(--sans);color:var(--met-encre);transition:background .25s,color .25s}
.met-retour::before{content:"‹";font-size:1.35rem;line-height:1;margin-top:-.15em}
.met-retour:hover{background:var(--met-encre);color:#fff}
.met-retour:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Mèt en petit, à côté de sa question */
.met-parole{align-self:stretch;display:flex;align-items:flex-start;gap:.75rem}
.met-parole .met-bulle{flex:1 1 auto;min-width:0}
.met-mini{display:none;flex:none;width:44px;height:44px;margin-top:.1rem}
.met-mini svg{width:100%;height:100%;display:block;overflow:visible}
.met-mini-boitier{fill:var(--gold);stroke:var(--met-encre);stroke-width:2}
.met-mini-visage{fill:#f6e3bd}
.met-mini-yeux{fill:none;stroke:var(--met-encre);stroke-width:2;stroke-linecap:round}
.met-mini-bouche{fill:var(--met-encre);transform-box:fill-box;transform-origin:center;transform:scale(1,.55)}
.met-mini[data-expr="parle"] .met-mini-bouche{animation:met-parle .28s ease-in-out infinite alternate}
.met-mini[data-expr="joie"] svg{animation:met-saut .55s ease-out 1}
.met-mini[data-expr="doute"] svg{transform:rotate(6deg)}

/* Le grand personnage laisse la place aux photos */
.met-perso{max-height:460px;transition:transform .6s var(--met-ease),max-height .5s var(--met-ease),opacity .3s ease,margin .5s var(--met-ease)}
.met-photos .met-perso{max-height:0;margin-bottom:-1rem;opacity:0;overflow:hidden;pointer-events:none}
.met-photos .met-mini{display:block;animation:met-choix-entre .45s var(--met-ease) both}
.met-photos .met-bulle{min-height:0;padding:.15rem 0 0;background:none;box-shadow:none;border-radius:0;font-size:clamp(1.45rem,5.2vw,1.8rem);line-height:1.12}
.met-photos .met-bulle::before{display:none}

/* La photo du choix en cours : deux images superposées, l'une remplace l'autre en fondu */
.met-visuel{position:relative;align-self:stretch;margin:0;aspect-ratio:3/2;border-radius:var(--met-rayon);overflow:hidden;background:#e9e2d4}
.met-visuel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.met-visuel-img:not([src]){visibility:hidden}
.met-visuel-img.dessus{z-index:1;animation:met-fondu .5s ease both}
.met-visuel-encart{position:absolute;z-index:2;right:.7rem;bottom:.7rem;width:30%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;border:2px solid #fff;box-shadow:0 8px 20px rgba(30,31,35,.25)}
.met-visuel-nom{position:absolute;z-index:2;left:.7rem;bottom:.7rem;max-width:calc(100% - 1.4rem);padding:.4rem .85rem;border-radius:999px;background:rgba(255,255,255,.93);font:500 .88rem/1.3 var(--sans);color:var(--met-encre)}
.met-visuel.avec-encart .met-visuel-nom{max-width:60%}
/* Deux vues (placard fermé, placard ouvert) : toucher la photo passe de l'une à l'autre */
.met-visuel.deux-vues{cursor:pointer}
.met-visuel.deux-vues .met-visuel-encart:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.met-options{align-self:stretch;display:flex;flex-direction:column;gap:.9rem;animation:met-choix-entre .45s var(--met-ease) both}
.met-note{margin:0;text-align:center;font-size:.88rem;line-height:1.4;color:var(--met-texte-doux)}
.met-option-lien{align-self:center;min-height:44px;padding:0 .5rem;font-size:.98rem;color:var(--met-encre)}

/* Tuiles : quatre photos, deux par ligne */
.met-tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.met-tuile,.met-fiche{border:1.5px solid transparent;background:#fff;cursor:pointer;text-align:left;font:inherit;color:var(--met-encre);
  box-shadow:0 6px 16px rgba(30,31,35,.07);transition:transform .3s var(--met-ease),border-color .25s,box-shadow .3s}
.met-tuile:hover,.met-fiche:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 12px 26px rgba(30,31,35,.11)}
.met-tuile{display:flex;flex-direction:column;padding:0;border-radius:16px;overflow:hidden}
.met-tuile-img{display:block;aspect-ratio:4/3;overflow:hidden;background:#e9e2d4}
.met-tuile-img img,.met-fiche-img img,.met-vignette img{width:100%;height:100%;object-fit:cover;display:block}
.met-tuile strong{padding:.65rem .8rem 0;font-family:var(--display);font-weight:600;font-size:1.4rem;line-height:1.1}
.met-tuile small{padding:.2rem .8rem .75rem;font-size:.85rem;line-height:1.3;color:var(--met-texte-doux)}

/* Cartes : une réponse par ligne, la photo à gauche */
.met-fiches{display:flex;flex-direction:column;gap:.65rem}
.met-fiche{display:flex;align-items:center;gap:.9rem;min-height:88px;padding:.5rem .9rem .5rem .5rem;border-radius:16px}
.met-fiche.sans-photo{padding-left:1.1rem}
.met-fiche-img{flex:none;width:112px;aspect-ratio:3/2;border-radius:11px;overflow:hidden;background:#e9e2d4}
.met-fiche-txt{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.met-fiche strong{font-family:var(--display);font-weight:600;font-size:1.35rem;line-height:1.1}
.met-fiche small{font-size:.88rem;line-height:1.3;color:var(--met-texte-doux)}

/* Vignettes : on touche, la grande photo change */
.met-vignettes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.met-vignette{padding:0;font:500 .7rem/1.2 var(--sans);color:var(--met-encre);aspect-ratio:3/2;border:2px solid transparent;border-radius:12px;overflow:hidden;background:#e9e2d4;cursor:pointer;transition:border-color .25s,box-shadow .25s,transform .25s var(--met-ease)}
.met-vignette:hover{transform:translateY(-1px)}
.met-vignette[aria-checked="true"]{border-color:var(--met-encre);box-shadow:0 0 0 2px var(--gold)}

/* Pastilles de couleur (deux couleurs : moitié-moitié) */
.met-pastilles{display:grid;grid-template-columns:repeat(8,48px);justify-content:center;gap:.7rem}
.met-pastille{width:48px;height:48px;padding:0;border-radius:50%;border:3px solid #fff;cursor:pointer;
  background:linear-gradient(135deg,var(--met-c1,#ccc) 50%,var(--met-c2,var(--met-c1,#ccc)) 50%);
  box-shadow:0 0 0 1px var(--met-gris-barre),0 4px 10px rgba(30,31,35,.1);transition:box-shadow .25s,transform .25s var(--met-ease)}
.met-pastille:hover{transform:translateY(-1px)}
.met-pastille[aria-checked="true"]{box-shadow:0 0 0 2px var(--met-encre),0 0 0 5px var(--gold)}

/* La largeur : le mur se remplit de caissons */
.met-mur{display:flex;align-items:stretch;gap:3px;height:150px;padding:12px 12px 0;border-radius:var(--met-rayon) var(--met-rayon) 0 0;background:#fff;border-bottom:5px solid var(--met-gris-barre)}
.met-caisson{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.35rem;
  border:2px solid var(--met-encre);border-bottom-width:3px;border-radius:4px 4px 0 0;background:var(--met-or-pale);
  font:500 .76rem/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--met-encre);transition:flex-grow .45s var(--met-ease),background .3s}
.met-caisson::before{content:"";position:absolute;left:0;right:0;top:26%;height:2px;background:var(--met-encre);opacity:.55}
.met-caisson::after{content:"";position:absolute;left:12%;right:12%;top:36%;height:2px;border-radius:1px;background:var(--gold)}
.met-mur.sans-fond .met-caisson{background:transparent}
.met-caisson-angle{background:repeating-linear-gradient(135deg,var(--met-or-pale) 0 6px,#f0e2c4 6px 12px)}
.met-mur.sans-fond .met-caisson-angle{background:repeating-linear-gradient(135deg,transparent 0 6px,#f0e2c4 6px 12px)}
.met-caisson-angle::after{display:none}
/* L'écran des mesures, dans l'ordre : un titre numéroté par partie (1 les mesures, 2 les caissons, 3 les portes, 4 les finitions) */
.met-ordre{display:flex;align-items:center;gap:.65rem;margin:.7rem 0 -.2rem;font:600 1.05rem/1.2 var(--sans);color:var(--met-encre)}
.met-ordre:first-child{margin-top:0}
.met-ordre-num{flex:none;width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--met-or-pale);border:1.5px solid var(--gold);color:var(--met-or-fonce);font:600 1rem/1 var(--sans)}
/* Le nombre de caissons : − 3 +, avec « conseillé » sous le chiffre quand c'est le conseil de Mèt */
.met-nb-caissons{flex:none;min-width:4.4rem;display:inline-flex;flex-direction:column;align-items:center;gap:.05rem}
.met-nb-caissons strong{font-family:var(--display);font-weight:600;font-size:1.75rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--met-encre)}
.met-nb-caissons small{visibility:hidden;font:500 .62rem/1.1 var(--sans);color:var(--met-or-fonce)}
.met-nb-caissons small.visible{visibility:visible}
/* Le croquis repris aux écrans suivants (budget, résumé) : en grand, sans réglage ; la photo choisie en petit dessous */
.met-croquis{display:flex;flex-direction:column;gap:.9rem}
.met-croquis .met-vue-titre{margin-bottom:-.45rem}
.met-exemples{display:flex;flex-wrap:wrap;gap:.6rem}
.met-exemple{flex:1 1 230px;min-width:0;margin:0;display:flex;align-items:center;gap:.7rem;padding:.45rem .8rem .45rem .45rem;border-radius:16px;background:#fff}
.met-exemple img{flex:none;width:76px;height:52px;border-radius:10px;object-fit:cover;background:#e9e2d4}
.met-exemple figcaption{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.met-exemple small{font:600 .68rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--met-texte-doux)}
.met-exemple strong{font:500 .92rem/1.25 var(--sans);color:var(--met-encre)}
/* Le croquis en deux vues : de face (les colonnes se cliquent), de dessus (le plan à l'échelle) */
.met-vue-titre{margin:0 0 -.45rem;font:600 .72rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--met-texte-doux)}
button.met-caisson{appearance:none;-webkit-appearance:none;margin:0;padding:0 0 .35rem;background:var(--met-or-pale);cursor:pointer}
.met-mur.sans-fond button.met-caisson{background:transparent}
button.met-caisson-angle{background:repeating-linear-gradient(135deg,var(--met-or-pale) 0 6px,#f0e2c4 6px 12px)}
.met-mur.sans-fond button.met-caisson-angle{background:repeating-linear-gradient(135deg,transparent 0 6px,#f0e2c4 6px 12px)}
button.met-caisson.retiree{background:transparent}
button.met-caisson:disabled{cursor:default}
button.met-caisson:focus-visible{outline:3px solid var(--gold);outline-offset:2px;z-index:1}
.met-caisson.choisie{border-color:var(--met-or-fonce);box-shadow:0 0 0 2px var(--gold);z-index:1}
.met-caisson.retiree{background:transparent;border-style:dashed;color:var(--met-texte-doux);opacity:.6}
.met-caisson.retiree::before,.met-caisson.retiree::after{display:none}
.met-caisson-num{position:absolute;top:5px;left:50%;transform:translateX(-50%);width:19px;height:19px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--met-encre);background:#fff;font:600 .68rem/16px var(--sans);text-align:center;color:var(--met-encre)}
.met-caisson-tiroirs{position:absolute;left:10%;right:10%;bottom:1.55rem;height:34%;box-sizing:border-box;border:1.5px solid var(--met-encre);border-radius:2px;
  background:linear-gradient(var(--met-encre),var(--met-encre)) 0 25%/100% 1.5px no-repeat,linear-gradient(var(--met-encre),var(--met-encre)) 0 50%/100% 1.5px no-repeat,#fff}   /* deux petits tiroirs, un grand dessous */
.met-mur.serre .met-caisson-num{top:4px;width:15px;height:15px;border-width:1.2px;font-size:.6rem;line-height:12.5px}
.met-mur.serre .met-caisson-tiroirs{bottom:.5rem}
.met-dessus{padding:.6rem .5rem;border-radius:var(--met-rayon);background:#fff}
.met-dessus svg{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}
.met-d-col{fill:var(--met-or-pale);stroke:var(--met-encre);stroke-width:1.4;cursor:pointer;pointer-events:all}
.met-d-col.tiroirs{fill:#f0e2c4}
.met-d-col.retiree{fill:none;stroke-dasharray:4 3;opacity:.55}
.met-d-col.actif{stroke:var(--met-or-fonce);stroke-width:2.6}
.met-d-tiroir{fill:none;stroke:var(--met-encre);stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.met-d-colnum{font:600 10px var(--sans);fill:var(--met-encre);pointer-events:none}
.met-d-rail{fill:none;stroke:var(--met-gris-barre);stroke-width:1}
.met-d-porte{fill:none;stroke:var(--met-encre);stroke-width:3;stroke-linecap:round}
.met-d-trait{fill:none;stroke:var(--met-texte-doux);stroke-width:1}
.met-d-cote{font:500 11px var(--sans);fill:var(--met-encre);font-variant-numeric:tabular-nums}
.met-d-pastille{fill:var(--met-encre)}
.met-d-pastille.actif{fill:var(--met-or-fonce)}
.met-d-pastille-num{font:600 9px var(--sans);fill:#fff}
.met-mur-options{font-weight:500;color:var(--met-encre)}
/* Portes coulissantes : le nombre se choisit sous le croquis, le conseillé porte son étiquette */
.met-portes{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.55rem .6rem .55rem 1rem;border-radius:var(--met-rayon);background:#fff}
.met-portes-titre{font:500 .95rem/1.3 var(--sans);color:var(--met-encre)}
.met-portes-choix{display:flex;gap:.45rem}
.met-porte-choix{appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;width:64px;min-height:50px;padding:.2rem 0;border-radius:14px;border:1.5px solid var(--met-gris-barre);background:#fff;color:var(--met-encre);cursor:pointer;transition:border-color .2s,background .2s}
.met-porte-choix strong{font:600 1.15rem/1 var(--sans);font-variant-numeric:tabular-nums}
.met-porte-choix small{visibility:hidden;font:500 .62rem/1.1 var(--sans);color:var(--met-or-fonce)}
.met-porte-choix.conseille small{visibility:visible}
.met-porte-choix[aria-pressed="true"]{border-color:var(--met-encre);background:var(--met-encre);color:#fff}
.met-porte-choix[aria-pressed="true"] small{color:#fff}
.met-porte-choix:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* Le profil des portes : trois pastilles (blanc, noir, gris) ; sur le plan, un petit profil au bout de chaque vantail */
.met-profil-choix{gap:.25rem}
.met-profil-choix small{visibility:visible;font-size:.7rem;color:var(--met-encre)}
.met-profil-pastille{width:20px;height:20px;border-radius:50%;background:var(--met-c1,#ccc);box-shadow:0 0 0 1.5px var(--met-gris-barre)}
.met-profil-choix[aria-pressed="true"]{background:#fff;color:var(--met-encre);box-shadow:inset 0 0 0 1px var(--met-encre)}
.met-profil-choix[aria-pressed="true"] small{color:var(--met-encre);font-weight:600}
/* L'écran « Racontez-moi votre idée » (sur mesure) : de haut en bas, la question, la vidéo, la case où écrire, le micro, le lien du showroom */
.met-clip{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:var(--met-rayon);overflow:hidden;background:#e9e2d4;cursor:pointer}
.met-clip img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--met-ease)}
.met-clip:hover img{transform:scale(1.03)}
.met-clip:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.met-clip-jouer{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;box-shadow:0 0 0 7px rgba(255,255,255,.4),0 14px 34px rgba(20,20,22,.35);
  background:var(--met-encre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M5.5 3.6v8.8L12.4 8z'/%3E%3C/svg%3E") center/34px no-repeat}
.met-clip-mot{position:absolute;top:.8rem;right:.8rem;padding:.3rem .7rem;border-radius:999px;background:rgba(255,255,255,.94);font:600 .78rem/1.2 var(--sans);color:var(--met-encre)}
#metJeu[data-etape="idee"] .met-ecrit{order:1}
#metJeu[data-etape="idee"] .met-micro{order:2}
#metJeu[data-etape="idee"] .met-etat{order:3;min-height:0}
#metJeu[data-etape="idee"] .met-actions{order:4}
#metJeu[data-etape="idee"] #metEcrire{display:none}
.met-lien-bas{order:9;flex-basis:100%;text-align:center;margin-top:.2rem}
/* La vidéo des portes coulissantes : le bouton sous le croquis, la fenêtre au milieu de l'écran */
.met-video-btn{align-self:center;display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-weight:500;color:var(--met-encre)}
.met-video-jouer{flex:none;width:30px;height:30px;border-radius:50%;background:var(--met-encre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M5.5 3.6v8.8L12.4 8z'/%3E%3C/svg%3E") center/16px no-repeat}
.met-fenetre-carte.met-cine{width:min(820px,100%);gap:.8rem}
.met-cine-video{display:block;width:100%;aspect-ratio:16/9;max-height:66vh;border-radius:18px;background:var(--met-encre);object-fit:contain}
.met-d-vantail{fill:none;stroke:var(--met-encre);stroke-width:1.6;stroke-linecap:round}
.met-d-profil{stroke:var(--met-encre);stroke-width:1}
.met-colonne{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.met-colonne-titre{margin:0;font:600 .95rem/1.3 var(--sans);color:var(--met-encre);font-variant-numeric:tabular-nums}
.met-bascule:disabled{opacity:.45;cursor:default}
.met-mur-infos{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:-.3rem}
.met-mur-textes{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.met-mur-legende,.met-mur-gabarit{margin:0;text-align:center;font-size:.9rem;line-height:1.4;font-variant-numeric:tabular-nums;color:var(--met-texte-doux)}
.met-mur-gabarit{font-weight:500;color:var(--met-encre)}
.met-plan + .met-mur-textes .met-mur-legende,.met-plan + .met-mur-textes .met-mur-gabarit{text-align:left}
/* Le plan vu de dessus (dressing en L ou en U) : le mur en cours de réglage s'allume */
.met-plan{flex:none;width:104px}
.met-plan svg,.met-aide-dessin svg{display:block;width:100%;height:auto}
.met-d-mur{fill:none;stroke:var(--met-encre);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.met-d-sol{fill:none;stroke:var(--met-gris-barre);stroke-width:3;stroke-linecap:round}
.met-d-bande{fill:var(--met-or-pale);stroke:var(--met-encre);stroke-width:1.5;transition:fill .3s}
.met-d-bande.actif{fill:var(--gold)}
.met-d-angle{fill:#f0e2c4;stroke:var(--met-encre);stroke-width:1.5}
.met-d-num{font:600 14px var(--sans);fill:var(--met-encre)}
.met-d-fleche{fill:none;stroke:var(--met-or-fonce);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:7 5}
.met-d-texte{font:500 12px var(--sans);fill:var(--met-encre)}
/* Sous le chiffre : les bornes, puis le conseil « Comment bien mesurer ? » */
.met-mesure-aide{display:flex;flex-direction:column;align-items:center;gap:.35rem;margin-top:-.25rem}
.met-aide-btn{min-height:44px;padding:0 .5rem;font-size:.95rem;font-weight:500;color:var(--met-or-fonce)}
.met-aide-mesure{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:.9rem 1rem 1rem;text-align:center;border-radius:var(--met-rayon);background:#fff;animation:met-choix-entre .35s var(--met-ease) both}
.met-aide-dessin{flex:none;width:min(230px,100%)}
.met-aide-mesure p{margin:0;font-size:.92rem;line-height:1.45;color:var(--met-encre)}
.met-pas{display:flex;align-items:center;justify-content:center;gap:1rem}
.met-pas-btn{flex:none;width:56px;height:56px;padding:0;border-radius:50%;border:1.5px solid var(--met-encre);background:#fff;cursor:pointer;
  font:400 1.9rem/1 var(--sans);color:var(--met-encre);transition:background .25s,color .25s}
.met-pas-btn:hover{background:var(--met-encre);color:#fff}
.met-pas-btn:disabled{opacity:.3;cursor:default;background:#fff;color:var(--met-encre)}
.met-pas-champ{display:inline-flex;align-items:baseline;justify-content:center;gap:.3rem;min-width:8.5rem;cursor:text;
  font-family:var(--display);font-weight:600;font-size:2.7rem;line-height:1;color:var(--met-encre)}
.met-pas-valeur{width:2.25em;padding:.05em 0 .08em;border:0;border-bottom:2px dashed var(--gold);border-radius:0;background:transparent;text-align:center;
  font:inherit;font-variant-numeric:tabular-nums;color:inherit;-moz-appearance:textfield;appearance:textfield}
.met-pas-valeur:focus{outline:none;border-bottom-style:solid;background:#fff;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--gold);border-radius:4px}
.met-mur.serre{gap:2px;padding:10px 8px 0}
.met-mur.serre .met-caisson{font-size:0;border-width:1.5px;border-bottom-width:3px}
.met-murs{display:flex;flex-direction:column;gap:.5rem}
.met-pas-mur{justify-content:flex-end;gap:.5rem;padding:.3rem .35rem .3rem .7rem;border-radius:999px;background:#fff}
.met-pas-nom{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:.55rem;font:500 .98rem/1.2 var(--sans);color:var(--met-encre)}
.met-pas-num{flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--met-encre);color:#fff;font:600 .8rem/1 var(--sans)}
.met-pas-mur .met-pas-btn{width:44px;height:44px;font-size:1.55rem}
.met-pas-mur .met-pas-nom{font-size:.92rem}
.met-pas-mur .met-pas-champ{min-width:5.6rem;font-size:1.75rem}
.met-pas-plafond{margin-top:.3rem}
.met-pas-plafond .met-pas-valeur::placeholder{color:var(--met-texte-doux);opacity:.6}
.met-plafond-note{margin-top:-.05rem}
.met-bascules{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem}
.met-bascule{display:inline-flex;align-items:center;gap:.6rem;min-height:46px;padding:0 1.15rem 0 .9rem;border-radius:999px;border:1.5px solid var(--met-gris-barre);background:#fff;cursor:pointer;
  font:500 .98rem var(--sans);color:var(--met-encre);transition:border-color .25s}
.met-bascule::before{content:"";flex:none;width:20px;height:20px;box-sizing:border-box;border-radius:6px;border:1.5px solid var(--met-encre);background:#fff center/13px no-repeat}
.met-bascule[aria-pressed="true"]{border-color:var(--met-encre)}
.met-bascule[aria-pressed="true"]::before{background-color:var(--met-encre);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E")}

/* Le résumé : les choix, puis la fourchette de prix */
.met-resume{margin:0;padding:.2rem 1.1rem;display:flex;flex-direction:column;background:#fff;border-radius:var(--met-rayon)}
.met-resume div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--met-gris-barre)}
.met-resume div:last-child{border-bottom:0}
.met-resume dt{flex:none;font-size:.9rem;color:var(--met-texte-doux)}
.met-resume dd{margin:0;text-align:right;font-weight:500;line-height:1.35;color:var(--met-encre)}
/* Portes et intérieur sur le même écran : deux rangées de pastilles, chacune avec son titre et le nom choisi */
.met-rang{display:flex;flex-direction:column;gap:.5rem}
.met-rang-titre{margin:0;display:flex;align-items:baseline;gap:.55rem;font-size:.92rem;line-height:1.3;color:var(--met-texte-doux)}
.met-rang-titre strong{flex:none;font:600 .78rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--met-encre)}
.met-rang-titre span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.met-rang .met-pastilles{justify-content:start}
.met-visuel.avec-encart .met-visuel-encart[role="button"]{cursor:pointer}
/* Les communes : un onglet par région, puis les communes de la région sur deux colonnes, la distance à droite */
.met-onglets{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.3rem;padding:.3rem;border-radius:999px;background:#fff}
.met-onglet{min-height:44px;padding:0 .4rem;border:0;border-radius:999px;background:transparent;cursor:pointer;font:500 1rem var(--sans);color:var(--met-encre);transition:background .25s,color .25s}
.met-onglet[aria-selected="true"]{background:var(--met-encre);color:#fff}
.met-communes{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;animation:met-choix-entre .3s var(--met-ease) both}
.met-commune{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:54px;padding:.45rem .85rem;border:1.5px solid transparent;border-radius:14px;background:#fff;cursor:pointer;
  text-align:left;font:inherit;color:var(--met-encre);box-shadow:0 4px 12px rgba(30,31,35,.05);transition:border-color .25s,transform .2s var(--met-ease)}
.met-commune:hover{border-color:var(--gold);transform:translateY(-1px)}
.met-commune strong{font:500 1rem/1.2 var(--sans);min-width:0}
.met-commune span{flex:none;font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--met-texte-doux)}
.met-commune.choisi{border-color:var(--gold);background:var(--met-or-pale)}
.met-onglet:focus-visible,.met-commune:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* Les atouts du projet, écrits sous les réponses, et le lien vers la gamme de coloris */
.met-atouts{list-style:none;margin:.2rem 0 0;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.5rem;border-radius:var(--met-rayon);background:var(--met-or-pale)}
.met-atouts li{position:relative;padding-left:1.6rem;font:500 .95rem/1.35 var(--sans);color:var(--met-encre)}
.met-atouts li::before{content:"";position:absolute;left:.15rem;top:.28em;width:.42rem;height:.75rem;border:solid var(--met-or-fonce);border-width:0 2px 2px 0;transform:rotate(45deg)}
.met-coloris-btn{align-self:center;min-height:44px}
.met-coloris{width:min(560px,100%);gap:.8rem}
.met-coloris-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem .5rem;max-height:46vh;overflow:auto;padding:.3rem .1rem}
.met-coloris-un{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center}
.met-coloris-rond{width:54px;height:54px;border-radius:50%;border:3px solid #fff;background:var(--met-c1,#ccc) center/cover no-repeat;box-shadow:0 0 0 1px var(--met-gris-barre),0 4px 10px rgba(30,31,35,.1)}
.met-coloris-un strong{font:500 .8rem/1.25 var(--sans);color:var(--met-encre)}
.met-coloris-un small{font-size:.7rem;line-height:1.2;color:var(--met-texte-doux)}
.met-coloris .met-onglets{background:#fff}

/* Le ruban des coloris (cuisine, écran de l'îlot) : toute la gamme d'un coup d'œil, par famille.
   Les pastilles sont pâles, puis s'allument quand Mèt annonce les coloris. Un toucher ouvre la fenêtre avec les noms. */
.met-gamme{display:flex;flex-direction:column;gap:.45rem;width:100%;padding:.75rem .9rem;border:1px solid var(--met-gris-barre);border-radius:var(--met-rayon);background:#fff;text-align:left;font:inherit;color:var(--met-encre);cursor:pointer}
.met-gamme:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.met-gamme-tete{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.met-gamme-titre{font:600 .92rem/1.3 var(--sans)}
.met-gamme-lien{flex:0 0 auto;font-size:.78rem;text-decoration:underline;text-underline-offset:3px;color:var(--met-texte-doux)}
.met-gamme-rang{display:grid;grid-template-columns:3.9rem minmax(0,1fr);align-items:center;gap:.4rem}
.met-gamme-rang small{font-size:.74rem;line-height:1.2;color:var(--met-texte-doux)}
.met-gamme-points{display:flex;flex-wrap:wrap;gap:4px;transition:opacity .7s var(--met-ease),filter .7s var(--met-ease)}
.met-gamme-point{width:17px;height:17px;border-radius:50%;background:var(--met-c1,#ccc) center/cover no-repeat;box-shadow:0 0 0 1px var(--met-gris-barre)}
.met-gamme.attente .met-gamme-points{opacity:.3;filter:grayscale(.7)}
.met-deux{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:.7rem;width:100%;flex:0 0 auto}
.met-deux .met-btn-large{height:56px;padding-left:.6rem;padding-right:.6rem}
@media (prefers-reduced-motion:reduce){.met-gamme-points{transition:none}}
/* La fenêtre du rendez-vous : l'écran se fige, le bouton est au milieu */
html.met-fige{overflow:hidden}
.met-fenetre{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:1.2rem;
  background:rgba(30,31,35,.58);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:met-fondu .35s ease both}
.met-fenetre-carte{width:min(460px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:1rem;padding:1.5rem 1.4rem 1.2rem;
  border-radius:22px;background:var(--met-fond,#f4f2ee);box-shadow:0 30px 70px rgba(0,0,0,.35);animation:met-choix-entre .4s var(--met-ease) both}
.met-fenetre-tete{display:flex;align-items:flex-start;gap:.8rem}
.met-fenetre-tete .met-mini{display:block;flex:none}
.met-fenetre-texte{margin:0;font:600 1.3rem/1.25 var(--display);color:var(--met-encre)}
.met-fenetre-prix{margin:0;text-align:center;font:600 1.6rem/1.1 var(--display);font-variant-numeric:tabular-nums;color:var(--met-encre)}
.met-fenetre-aide{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.9rem 1rem;border-radius:var(--met-rayon);background:#fff;text-align:center;animation:met-choix-entre .4s var(--met-ease) both}
.met-fenetre-aide[hidden]{display:none}
.met-fenetre-aide p{margin:0;font:600 1.1rem/1.3 var(--display);color:var(--met-encre)}
.met-fenetre-tel{display:inline-flex;align-items:center;min-height:44px;padding:0 1.2rem;border-radius:999px;border:1.5px solid var(--met-encre);font:500 1rem var(--sans);color:var(--met-encre);text-decoration:none}
.met-fenetre-tel:hover{background:var(--met-encre);color:#fff}
.met-fenetre-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.4rem}
.met-fenetre-liens .met-lien{min-height:44px}
.met-fenetre-tel:focus-visible,.met-veille-retour:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* L'écran éteint : noir, un point rouge qui clignote, l'au revoir de Mèt */
.met-veille{position:fixed;inset:0;z-index:9100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;padding:2rem;
  background:#08080a;text-align:center;animation:met-fondu .9s ease both}
.met-veille-point{width:14px;height:14px;border-radius:50%;background:#e02626;box-shadow:0 0 14px 3px rgba(224,38,38,.55);animation:met-veille 1.6s ease-in-out infinite}
.met-veille-texte{margin:0;max-width:22rem;font:500 1.25rem/1.4 var(--display);color:#d8d6d0}
.met-veille-retour{margin-top:.6rem;min-height:44px;padding:0 1.1rem;border:0;background:transparent;cursor:pointer;font:400 .92rem var(--sans);color:#8d8b86;text-decoration:underline;text-underline-offset:3px}
.met-veille-retour:hover{color:#fff}
@keyframes met-veille{0%,100%{opacity:1}50%{opacity:.12}}
/* Le budget idéal : cinq tranches, une par ligne */
.met-budgets{gap:.5rem}
.met-budget{min-height:54px;justify-content:center;padding:.4rem 1rem}
.met-budget strong{font-size:1.2rem;font-variant-numeric:tabular-nums}
.met-budget.choisi{border-color:var(--gold);background:var(--met-or-pale)}
.met-gammes{color:var(--met-encre)}
/* Le bouton du rendez-vous : un halo qui respire et un reflet qui passe, dès que Mèt dit de le toucher */
.met-btn-brille{position:relative;overflow:hidden;scroll-margin-bottom:1.2rem;box-shadow:0 0 0 2px var(--gold);animation:met-appel 2.2s ease-in-out infinite}
.met-btn-brille::after{content:"";position:absolute;top:0;bottom:0;left:0;width:36%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-140%) skewX(-18deg);animation:met-reflet 2.8s ease-in-out infinite}
@keyframes met-appel{0%,100%{box-shadow:0 0 0 2px var(--gold),0 0 0 0 rgba(211,154,44,.5);transform:scale(1)}55%{box-shadow:0 0 0 2px var(--gold),0 0 0 13px rgba(211,154,44,0);transform:scale(1.018)}}
@keyframes met-reflet{0%,50%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(340%) skewX(-18deg)}}
.met-prix{margin:0;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.25rem;text-align:center;border-radius:var(--met-rayon);background:var(--met-or-pale);border:1px solid var(--gold)}
.met-prix strong{font-family:var(--display);font-weight:600;font-size:2rem;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--met-encre)}
.met-prix span{font-size:.88rem;line-height:1.4;color:var(--met-texte-doux)}

.met-tuile:focus-visible,.met-fiche:focus-visible,.met-vignette:focus-visible,.met-pastille:focus-visible,.met-pas-btn:focus-visible,.met-bascule:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Commandes */
.met-commandes{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.met-micro{
  width:88px;height:88px;border-radius:50%;border:0;cursor:pointer;
  background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 8px rgba(211,154,44,.16),0 0 0 18px rgba(211,154,44,.07);transition:background .25s,transform .2s;
}
.met-micro svg{width:34px;height:34px}
.met-micro:disabled{opacity:.35;cursor:default;box-shadow:none}
.met-micro.ecoute{background:var(--gold);color:var(--navy-deep);animation:met-halo 1.4s ease-in-out infinite}
.met-etat{margin:0;font-size:.95rem;color:var(--met-texte-doux);min-height:1.4em;text-align:center}
.met-actions{display:flex;gap:.6rem}
.met-actions .met-btn-contour{min-height:40px;padding:0 1.1rem;font-size:.9rem}
.met-ecrit{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.5rem;width:100%}
.met-ecrit .met-btn{flex:0 0 auto;width:auto}
.met-ecrit input{flex:1 1 auto;width:auto;min-width:0;min-height:48px;padding:0 1rem;border:1px solid var(--line);border-radius:999px;background:#fff;font:1rem var(--sans);color:var(--navy)}
.met-ecrit input:focus,.met-champ input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(211,154,44,.2)}

/* Créneau */
.met-creneau,.met-coord{display:flex;flex-direction:column;gap:.9rem;padding:1.3rem;background:#fff;border-radius:var(--met-rayon)}
.met-sous-titre{margin:0;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--met-texte-doux)}
.met-jours{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.3rem;scroll-snap-type:x mandatory}
.met-jour{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:.1rem;min-width:66px;padding:.6rem .4rem;border:1px solid var(--line);border-radius:14px;background:var(--met-fond);cursor:pointer;font:inherit;color:var(--navy)}
.met-jour small{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--met-texte-doux)}
.met-jour strong{font-size:1.35rem;font-weight:600;line-height:1.1}
.met-jour[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.met-jour[aria-pressed="true"] small{color:var(--gold-soft)}
.met-heures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.met-heure{min-height:46px;border:1px solid var(--line);border-radius:12px;background:var(--met-fond);font:500 1rem var(--sans);color:var(--navy);cursor:pointer;font-variant-numeric:tabular-nums}
.met-heure[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
.met-aide{grid-column:1/-1;margin:0;font-size:.9rem;color:var(--met-texte-doux)}

/* Coordonnées */
.met-champ{display:flex;flex-direction:column;gap:.35rem}
.met-champ label{font-size:.85rem;font-weight:500;color:var(--met-texte-doux)}
.met-champ input{min-height:50px;padding:0 1rem;border:1px solid var(--line);border-radius:12px;background:var(--met-fond);font:1rem var(--sans);color:var(--navy)}
.met-erreur{margin:0;color:#b3261e;font-size:.92rem}

/* Fin */
.met-fin{display:flex;flex-direction:column;gap:1rem}
.met-fin-sur{margin:0;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--met-or-texte)}
.met-fin h2{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,6vw,2.4rem);line-height:1.08;color:var(--navy)}
.met-fin-ou{margin:0;color:var(--met-texte-doux)}
.met-fin-suite{margin:0;padding:.8rem 1rem;border-left:3px solid var(--gold);background:#fff;border-radius:0 var(--met-rayon) var(--met-rayon) 0;font-weight:600;color:var(--met-encre);line-height:1.45}
.met-bloc{display:flex;flex-direction:column;gap:.6rem;padding:1.2rem;background:#fff;border-radius:var(--met-rayon)}
.met-bloc p{margin:0;line-height:1.55}
.met-bloc-titre{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--met-univers)}
.met-liste{margin:0;padding-left:1.3rem;display:flex;flex-direction:column;gap:.45rem;line-height:1.45}
.met-liste li::marker{color:var(--met-univers);font-weight:600}
.met-fin-actions{display:flex;flex-direction:column;gap:.6rem}
/* Retour vers la page de l'univers : une ligne discrète sous le remerciement.
   Sur un petit écran, elle reste en vue en bas tant qu'on n'est pas descendu jusqu'à elle. */
.met-fin-retour{position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:0 1rem;margin:-.4rem 0 0;padding:.35rem 0 calc(.35rem + env(safe-area-inset-bottom,0px));font-size:.85rem;line-height:1.4;color:var(--met-texte-doux);background:var(--met-fond)}
.met-fin-retour b{font-weight:600;font-variant-numeric:tabular-nums}
.met-fin-retour .met-lien{min-height:2.75rem;display:inline-flex;align-items:center}
.met-fin-retour span .met-lien{display:inline;min-height:0}
.met-fin-retour.est-fixe{position:static}
/* style.css coupe ce qui dépasse en largeur avec « overflow-x:hidden » sur body : cela empêche une ligne de rester collée en bas. « clip » coupe pareil, sans cet effet. */
@supports (overflow:clip){.met-body{overflow-x:clip}}

/* Pause */
.met-pause-zone{margin:0;text-align:center;color:var(--met-texte-doux)}
.met-pause{padding:1.3rem;background:#fff;border-radius:var(--met-rayon);text-align:center;display:flex;flex-direction:column;gap:1rem;align-items:center}
.met-pause p{margin:0;line-height:1.55}

/* Annonce niveau / badge */
.met-toast{
  position:fixed;left:50%;bottom:24px;z-index:3500;transform:translate(-50%,0);
  display:flex;align-items:center;gap:.8rem;max-width:min(92vw,420px);padding:.9rem 1.2rem;
  background:var(--met-or-pale);border:1px solid var(--gold);border-radius:16px;
  box-shadow:0 14px 34px rgba(31,43,61,.18);color:var(--navy);animation:met-toast .45s cubic-bezier(.2,.8,.2,1)
}
.met-toast svg{flex:0 0 auto;width:28px;height:28px;color:var(--met-or-texte)}
.met-toast strong{display:block;font-weight:600}
.met-toast span{font-size:.88rem;color:var(--met-texte-doux)}

/* Confettis de fin (or et navy) */
.met-confetti{position:fixed;inset:0;pointer-events:none;z-index:3400;overflow:hidden}
.met-confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:met-tombe linear forwards}

.met-noscript{max-width:560px;margin:8rem auto 4rem;padding:0 1.2rem}

/* ---------- Animations ---------- */
@keyframes met-halo{0%,100%{box-shadow:0 0 0 10px rgba(211,154,44,.22),0 0 0 22px rgba(211,154,44,.09)}50%{box-shadow:0 0 0 14px rgba(211,154,44,.28),0 0 0 30px rgba(211,154,44,.06)}}
@keyframes met-parle{from{transform:scaleY(.35)}to{transform:scaleY(1.25)}}
@keyframes met-cligne{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes met-saut{0%{transform:translateY(0)}40%{transform:translateY(-18px) rotate(-3deg)}100%{transform:translateY(0)}}
@keyframes met-reflechit{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes met-charge{from{background-position:100% 0}to{background-position:40% 0}}
@keyframes met-decompte{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes met-toast{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes met-tombe{to{transform:translateY(105vh) rotate(540deg)}}
@keyframes met-secours{to{opacity:1}}
@keyframes met-fondu{from{opacity:0}to{opacity:1}}
@keyframes met-cligne-mi{0%{opacity:0}88%{opacity:1}89.4%{opacity:0}91.7%{opacity:1}93.1%{opacity:0}100%{opacity:0}}
@keyframes met-cligne-clos{0%{opacity:0}89.4%{opacity:1}91.7%{opacity:0}100%{opacity:0}}
@keyframes met-reflet{0%{left:-40%}16%,100%{left:130%}}
@keyframes met-halo-doux{0%,100%{box-shadow:0 0 0 6px rgba(211,154,44,.2),0 0 0 13px rgba(211,154,44,.07)}50%{box-shadow:0 0 0 10px rgba(211,154,44,.24),0 0 0 20px rgba(211,154,44,.04)}}
@keyframes met-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes met-onde{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes met-respire{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.2%) scale(1.006)}}
@keyframes met-coucou{0%,26%,100%{transform:rotate(0)}4%{transform:rotate(-12deg)}8.5%{transform:rotate(3deg)}13%{transform:rotate(-12deg)}17.5%{transform:rotate(3deg)}22%{transform:rotate(-7deg)}}
@keyframes met-coucou-vite{0%,100%{transform:rotate(0)}20%{transform:rotate(-13deg)}40%{transform:rotate(3deg)}60%{transform:rotate(-13deg)}80%{transform:rotate(3deg)}}
@keyframes met-balance{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}
@keyframes met-parle-rafale{0%,44%,100%{transform:scale(1,.55)}6%,18%,30%{transform:scale(1,1.2)}12%,24%,36%{transform:scale(1,.4)}}

@media (prefers-reduced-motion:reduce){
  .met *,.met *::before,.met *::after{animation:none!important;transition:none!important}
}

/* ---------- Mobile ---------- */
@media (max-width:980px){
  .met-hero{display:block;min-height:0;padding:8rem 0 0}
  .met-hero-inner{grid-template-columns:1fr;gap:.5rem;padding:0 1.25rem}
  .met-hero-photo{top:auto;left:0;width:100%;height:52%}
  .met-hero-photo::after{background:linear-gradient(180deg,var(--met-creme) 0%,rgba(247,242,234,.7) 20%,rgba(247,242,234,.05) 58%,rgba(247,242,234,.55) 100%)}
  .met-hero-visuel{min-height:0;padding:2.5rem 0 3.5rem;justify-content:center}
  .met-tel{--tel:min(60vw,270px)}
  .met-vitre{display:none}
  .met-film-inner{grid-template-columns:1fr;text-align:center}
  .met-film-cadre{width:min(100%,300px)}
  .met-film-texte p:not(.met-surtitre){margin:0 auto}
  .met-envies-grille{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .met-envie-img{aspect-ratio:16/10}
}
@media (max-width:560px){
  .met-jeu{padding:calc(var(--met-entete,5.6rem) + 5.2rem) 1rem 3rem}
  .met-carte{gap:1.1rem}
  .met-perso{width:min(180px,48%)}
  .met-tete{padding-left:1rem;padding-right:1rem}
  .met-pastilles{grid-template-columns:repeat(4,48px);gap:.7rem 1.1rem}
  .met-rang .met-pastilles{grid-template-columns:repeat(8,minmax(0,1fr));gap:.4rem}
  .met-coloris-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
  .met-rang .met-pastille{width:100%;height:auto;aspect-ratio:1;border-width:2px}
  .met-rang .met-pastille[aria-checked="true"]{box-shadow:0 0 0 2px var(--met-encre),0 0 0 4px var(--gold)}
  .met-fiche-img{width:96px}
  .met-tuile strong{font-size:1.25rem}
  .met-mur{height:130px}
  .met-depart{flex-direction:column;align-items:stretch;gap:.9rem}
  .met-cta{height:64px;justify-content:flex-start}
  .met-cta-micro{width:48px;height:48px}
  .met-cta-txt{flex:1;font-size:1.5rem}
  #metJouerTexte{align-self:center}
  .met-puces{justify-content:center;gap:.45rem}
  .met-puces li{padding:.5rem .75rem;font-size:.66rem;letter-spacing:.1em}
  .met-puces svg{width:14px;height:14px}
  .met-film-inner,.met-envies-inner{padding:0 1.25rem}
}