/* Rôle : présentation du questionnaire de matching des pages villes (test sur Bondues, annuaire #36) : bouton du haut de
 * page, fenêtre des questions (feuille en bas d'écran sur téléphone), écran de recherche, bandeau « Recommandé pour vous »
 * sur la carte, confettis. Domaine : annuaire public. Méthode : variables du thème, aucune couleur en dur.
 * Guide : src/templates/README.md. */
:root{--mt-accent:var(--theme-vitrine-accent);--mt-encre:var(--theme-texte-principal);--mt-doux:var(--theme-texte-secondaire);--mt-fond:var(--theme-surface);--mt-teinte:var(--theme-surface-action);--mt-ligne:var(--theme-bordure);--mt-blanc:var(--theme-texte-inverse);--mt-halo:color-mix(in oklab,var(--theme-vitrine-accent) 50%,transparent);--mt-profond:color-mix(in oklab,var(--theme-vitrine-accent) 62%,var(--theme-texte-principal))}

/* ── Bouton du haut de page ── */
.hf-matching{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.hf-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;border:0;border-radius:var(--theme-rayon-pilule);padding:16px 26px;background:linear-gradient(120deg,var(--mt-accent),var(--mt-profond));color:var(--mt-blanc);font:inherit;font-weight:800;font-size:17px;letter-spacing:-.01em;cursor:pointer;box-shadow:0 16px 30px -16px var(--mt-halo);transition:transform .18s,box-shadow .18s}
.hf-cta svg{width:18px;height:18px;transition:transform .18s}
.hf-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in oklab,var(--mt-blanc) 38%,transparent) 50%,transparent 70%);transform:translateX(-120%);animation:mt-reflet 4.5s ease-in-out 1.2s infinite}
.hf-cta:hover{transform:translateY(-2px);box-shadow:0 20px 34px -16px var(--mt-halo)}
.hf-cta:hover svg{transform:translateX(3px)}
.hf-cta:focus-visible{outline:3px solid var(--mt-halo);outline-offset:3px}
.hf-cta-eclat{font-size:18px;line-height:1}
.hf-ou{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:13px;color:var(--mt-doux)}
.hf-ou::before,.hf-ou::after{content:"";flex:1;height:1px;background:var(--mt-ligne)}
@keyframes mt-reflet{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* ── Fenêtre ── */
html.mt-ouverte{overflow:hidden}
.mt{width:min(560px,calc(100vw - 32px));max-height:min(720px,calc(100vh - 48px));padding:0;border:0;border-radius:26px;background:var(--mt-fond);color:var(--mt-encre);box-shadow:0 40px 90px -30px color-mix(in oklab,var(--theme-fond-inverse) 70%,transparent);overflow:auto}
.mt[open]{animation:mt-entree .34s cubic-bezier(.2,.8,.2,1)}
.mt::backdrop{background:color-mix(in oklab,var(--theme-fond-inverse) 55%,transparent);backdrop-filter:blur(4px)}
.mt-tete{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:14px 14px 8px}
.mt-retour,.mt-fermer{width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--mt-encre);font:inherit;font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center}
.mt-retour:hover,.mt-fermer:hover{background:var(--mt-teinte)}
.mt-retour[hidden]{display:grid;visibility:hidden}
.mt-fermer{grid-column:3}
.mt-etape{grid-column:2;margin:0;text-align:center;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mt-doux)}
.mt-etape b{color:var(--mt-accent)}
.mt-progression{height:5px;margin:0 24px;border-radius:5px;background:var(--mt-teinte);overflow:hidden}
.mt-progression span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--mt-accent),var(--mt-profond));transform:scaleX(.2);transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.mt-en-recherche .mt-retour,.mt-en-recherche .mt-etape{visibility:hidden}
.mt-corps{padding:22px 24px 26px}
.mt-q{margin:0;padding:0;border:0;min-width:0;outline:0}
.mt-q:not([hidden]){animation:mt-glisse .38s cubic-bezier(.2,.8,.2,1)}
.mt-titre{display:block;margin:0 0 6px;padding:0;font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--mt-encre)}
.mt-aide{margin:0 0 4px;font-size:14px;color:var(--mt-doux)}
.mt-choix{display:grid;gap:10px;margin-top:18px}
.mt-option{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--mt-ligne);border-radius:18px;background:var(--mt-fond);cursor:pointer;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.mt-option:hover{border-color:var(--mt-accent);transform:translateY(-1px)}
.mt-option input{position:absolute;opacity:0;pointer-events:none}
.mt-option:has(input:checked){border-color:var(--mt-accent);background:var(--mt-teinte);box-shadow:0 0 0 3px var(--mt-halo)}
.mt-option:has(input:focus-visible){box-shadow:0 0 0 3px var(--mt-halo)}
.mt-emoji{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:25px;background:var(--mt-teinte)}
.mt-texte{display:flex;flex-direction:column;gap:2px;font-size:16px}
.mt-texte b{font-weight:700;color:var(--mt-encre)}
.mt-texte span{font-size:13.5px;color:var(--mt-doux)}
.mt-choix-multi{display:flex;flex-wrap:wrap;gap:9px}
.mt-choix-multi .mt-option{padding:10px 15px 10px 11px;border-radius:var(--theme-rayon-pilule);gap:9px}
.mt-choix-multi .mt-texte{font-size:15px}
.mt-coche{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--mt-ligne);display:grid;place-items:center;transition:background .15s,border-color .15s}
.mt-option:has(input:checked) .mt-coche{background:var(--mt-accent);border-color:var(--mt-accent)}
.mt-option:has(input:checked) .mt-coche::after{content:"";width:9px;height:5px;margin-top:-2px;border-left:2px solid var(--mt-blanc);border-bottom:2px solid var(--mt-blanc);transform:rotate(-45deg)}
.mt-continuer{display:block;width:100%;margin-top:20px;padding:16px;border:0;border-radius:16px;background:linear-gradient(120deg,var(--mt-accent),var(--mt-profond));color:var(--mt-blanc);font:inherit;font-weight:800;font-size:16px;cursor:pointer;transition:opacity .15s,transform .15s}
.mt-continuer:disabled{opacity:.4;cursor:default}
.mt-continuer:not(:disabled):hover{transform:translateY(-1px)}

/* ── Écran de recherche ── */
.mt-recherche{text-align:center;padding:10px 0 6px}
.mt-orbite{position:relative;height:130px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.mt-visage{position:relative;z-index:1;width:64px;height:64px;margin:0 -10px;border-radius:50%;border:3px solid var(--mt-fond);background:var(--mt-teinte) center/cover no-repeat;box-shadow:0 10px 24px -12px var(--mt-halo);animation:mt-flotte 2.4s ease-in-out infinite}
.mt-visage:nth-child(2){animation-delay:.3s;transform:scale(1.12);z-index:2}
.mt-visage:nth-child(3){animation-delay:.6s}
.mt-onde{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:2px solid var(--mt-halo);animation:mt-onde 1.8s ease-out infinite}
.mt-onde+.mt-onde{animation-delay:.9s}
.mt-criteres{list-style:none;margin:18px auto 0;padding:0;display:inline-grid;gap:10px;text-align:left}
.mt-criteres li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--mt-encre);opacity:0;animation:mt-coche-ligne .4s ease forwards}
.mt-criteres li::before{content:"✓";width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--theme-fond-succes);color:var(--mt-blanc)}
.mt-criteres li:nth-child(1){animation-delay:.35s}
.mt-criteres li:nth-child(2){animation-delay:.8s}
.mt-criteres li:nth-child(3){animation-delay:1.25s}

/* ── Carte recommandée ── */
/* Bandeau et carte forment un seul bloc : même halo, animé ensemble, coupé à la jointure (le halo de la carte débordait du
   bandeau, Alexandre, 10/11/2026). */
.pcard.mt-recommandee{border-color:var(--mt-accent);border-top-left-radius:0;border-top-right-radius:0;box-shadow:0 0 0 3px var(--mt-halo),0 24px 50px -28px var(--mt-halo);clip-path:inset(0 -12px -90px -12px);animation:mt-brille 1.4s ease-in-out 2}
.mt-reco{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;margin-bottom:-20px;padding:13px 18px;border-radius:20px 20px 0 0;scroll-margin-top:96px;box-shadow:0 0 0 3px var(--mt-halo);clip-path:inset(-12px -12px 0 -12px);animation:mt-brille-bandeau 1.4s ease-in-out 2;background:linear-gradient(120deg,var(--mt-accent),var(--mt-profond));color:var(--mt-blanc);outline:0}
.mt-reco-titre{margin:0;font-weight:800;font-size:15.5px}
.mt-reco-texte{grid-column:1;margin:0;font-size:13.5px;line-height:1.4;opacity:.92}
.mt-reco-refaire{grid-column:2;grid-row:1/3;border:1.5px solid color-mix(in oklab,var(--mt-blanc) 55%,transparent);border-radius:var(--theme-rayon-pilule);background:none;color:var(--mt-blanc);font:inherit;font-weight:700;font-size:13px;padding:8px 13px;cursor:pointer;white-space:nowrap}
.mt-reco-refaire:hover{background:color-mix(in oklab,var(--mt-blanc) 16%,transparent)}
.mt-confettis{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2147483000}

@keyframes mt-entree{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes mt-glisse{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes mt-flotte{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes mt-onde{from{transform:scale(.7);opacity:.9}to{transform:scale(1.9);opacity:0}}
@keyframes mt-coche-ligne{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mt-brille{0%,100%{box-shadow:0 0 0 3px var(--mt-halo),0 24px 50px -28px var(--mt-halo)}50%{box-shadow:0 0 0 8px var(--mt-halo),0 24px 50px -20px var(--mt-halo)}}
@keyframes mt-brille-bandeau{0%,100%{box-shadow:0 0 0 3px var(--mt-halo)}50%{box-shadow:0 0 0 8px var(--mt-halo)}}

/* ── Téléphone : feuille en bas d'écran, bouton pleine largeur ── */
@media (max-width:760px){
  .hf-matching{gap:8px;margin-bottom:14px}
  .hf-cta{width:100%;justify-content:center;padding:15px 20px;font-size:16.5px}
  .hf-ou{margin-bottom:10px;font-size:12.5px}
  .mt{width:100%;max-width:100%;max-height:92vh;margin:auto 0 0;border-radius:26px 26px 0 0}
  .mt[open]{animation:mt-monte .36s cubic-bezier(.2,.8,.2,1)}
  .mt-corps{padding:16px 18px calc(22px + env(safe-area-inset-bottom))}
  .mt-titre{font-size:21px}
  .mt-option{padding:12px 14px}
  .mt-emoji{width:44px;height:44px;font-size:23px}
  .mt-reco{grid-template-columns:1fr}
  .mt-reco-refaire{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
}
@keyframes mt-monte{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .hf-cta::after,.mt[open],.mt-q:not([hidden]),.mt-visage,.mt-onde,.pcard.mt-recommandee,.mt-reco{animation:none}
  .mt-criteres li{animation:none;opacity:1}
}