/* Gigi — PWA client. Mobile-first, sans framework, orienté UX. */

:root {
  /* Tokens de la marque (audit m16) : les MÊMES valeurs terracotta que
     gestion.css et coach.css — une seule palette, plus de dérive. */
  --encre: #2B2422;
  --encre-2: #6E5F58;
  --fond: #FBF7F3;      /* sable */
  --accent: #B95C3C;    /* argile */
  --accent-fonce: #8A4A38;
  --ok: #4E9A6B;
  --alerte: #C7503F;
  --muet: #8a7f7a;
  --carte: #ffffff;
  --bord: #ead9d1;
  --rayon: 14px;
  --ombre: 0 1px 2px rgba(43, 36, 34, .05), 0 4px 14px rgba(43, 36, 34, .06);
  --tabbar-h: calc(3.6rem + env(safe-area-inset-bottom, 0px));
}

/* Transitions de page natives (progressive enhancement) */
@view-transition { navigation: auto; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; } /* garde-fou : jamais d'image qui déborde la mise en page */
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--encre);
  -webkit-tap-highlight-color: transparent;
}
main {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 1rem calc(var(--tabbar-h) + 1rem);
}
h1 { font-size: 1.5rem; letter-spacing: -.02em; margin: .8rem 0 .4rem; }
a { color: var(--accent); }

/* ---- Barre du haut ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--encre); color: #fff;
  padding: .65rem 1rem;
  padding-top: calc(.65rem + env(safe-area-inset-top, 0px));
  position: sticky; top: 0; z-index: 20;
}
.topbar .marque {
  color: #fff; font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.01em; text-decoration: none;
}
.topbar nav { display: flex; align-items: center; gap: 1rem; }
.topbar nav a { display: none; color: #fff; text-decoration: none; font-size: .9rem; opacity: .85; }
.topbar nav a:hover { opacity: 1; }
.topbar form { display: inline; }
button.lien {
  background: none; border: none; color: rgba(255, 255, 255, .65);
  font-size: .9rem; cursor: pointer; padding: .2rem 0;
}
/* C13 : le hover générique des boutons (fond argile) n'a rien à faire sur
   ce lien de la barre sombre — c'était le « halo rond orange ». Le focus
   clavier reste visible, en clair sur fond sombre, épousant le bouton. */
button.lien:hover { color: #fff; background: none; }
button.lien:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 3px;
  border-radius: 6px;
}

/* ---- Onglets bas d'écran (app-like, mobile) ---- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--bord);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .55rem 0 .5rem; text-decoration: none;
  color: var(--muet); font-size: .72rem; font-weight: 500;
  transition: color .15s ease;
}
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a.actif { color: var(--accent); }

/* ---- Messages flash (toasts) ---- */
.messages {
  list-style: none; margin: 0 auto; padding: .6rem 1rem 0;
  max-width: 640px;
}
.messages li {
  padding: .7rem .95rem; font-size: .92rem;
  border-radius: var(--rayon); box-shadow: var(--ombre);
  margin-bottom: .4rem;
  transition: opacity .5s ease, transform .5s ease;
}
.messages li.off { opacity: 0; transform: translateY(-6px); }
.messages .success { background: #e6f2e9; color: var(--ok); }
.messages .warning { background: #fdf3e0; color: #925e12; }
.messages .error { background: #fbe7e4; color: var(--alerte); }

/* ---- Titres de section ---- */
h2 {
  font-size: .85rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--encre-2);
  margin: 1.3rem 0 .55rem;
}

/* ---- Vue hebdomadaire en colonnes ---- */
.nav-semaine {
  display: flex; align-items: center; justify-content: space-between;
  margin: .8rem 0 .6rem; font-variant-numeric: tabular-nums;
}
.nav-semaine .fleche {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 99px;
  background: var(--carte); border: 1px solid var(--bord);
  color: var(--encre); text-decoration: none; font-size: 1.1rem;
  box-shadow: var(--ombre); transition: transform .1s ease;
}
.nav-semaine .fleche:active { transform: scale(.92); }
.nav-semaine .fleche.off { opacity: .3; box-shadow: none; }
.semaine {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%;
  gap: .7rem; overflow-x: auto; padding-bottom: .6rem;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.colonne { scroll-snap-align: start; min-width: 0; }
.colonne h2 {
  margin: 0 0 .5rem; padding: .3rem .55rem;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 8px; text-align: center;
}
.colonne.auj h2 { background: var(--encre); border-color: var(--encre); color: #fff; }
.colonne.passe { opacity: .5; }
.colonne .vide { text-align: center; margin: .8rem 0; }
/* Cartes compactes empilées dans les colonnes */
.colonne .seance {
  flex-direction: column; align-items: stretch; gap: .5rem;
  padding: .7rem .8rem;
}
.colonne .seance .action { text-align: left; }
.colonne .seance .action form { margin-top: .35rem; }
.colonne .seance button { width: 100%; }

/* Petite séparation matin / après-midi (13 h) dans les colonnes */
.separation-pm {
  display: flex; align-items: center; gap: .6rem;
  margin: .9rem 0 .6rem;
  color: var(--muet); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .09em;
}
.separation-pm::before,
.separation-pm::after { content: ""; flex: 1; border-top: 1px solid var(--bord); }

/* ---- Cartes séance ---- */
.seance {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: .85rem 1rem;
  margin-bottom: .6rem; box-shadow: var(--ombre);
  transition: transform .15s ease, box-shadow .15s ease;
}
@media (hover: hover) {
  .seance:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(32,38,46,.06), 0 8px 22px rgba(32,38,46,.09); }
}
.seance .infos strong { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.seance .infos small { display: block; color: var(--muet); margin-top: .2rem; line-height: 1.35; }
.seance .action { text-align: right; flex-shrink: 0; }
.seance .action form { margin-top: .35rem; }
.etat-ferme { opacity: .55; }
.etat-invite { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--ombre); }

/* Familles de cours : teintes légères dans la palette (Lagree rosé,
   Pilates Reformer ambre doux). Le liseré gauche porte la distinction,
   le fond reste assez clair pour les badges et le texte. */
.famille-lagree { background: #f9ece7; border-left: 4px solid var(--accent); }
.famille-reformer { background: #f8f1e2; border-left: 4px solid #c99a4b; }
/* C11 : HIIT Reformer — même famille de tons que Pilates Reformer (ambre)
   mais nettement plus soutenue (bronze), distinguable au premier regard. */
.famille-hiit { background: #f3ecda; border-left: 4px solid #8C6A1F; }
.famille-autre { border-left: 4px solid var(--muet); }
.detail.famille-lagree, .detail.famille-reformer,
.detail.famille-hiit { background: none; border-left: none; }

.legende {
  display: flex; gap: 1rem; margin: -.2rem 0 .6rem;
  font-size: .8rem; color: var(--muet);
}
.legende span { display: inline-flex; align-items: center; gap: .35rem; }
.pastille-legende {
  width: 10px; height: 10px; border-radius: 99px; display: inline-block;
}
.pastille-legende.lagree { background: var(--accent); }
.pastille-legende.reformer { background: #c99a4b; }
.pastille-legende.hiit { background: #8C6A1F; }
.pastille-legende.autre { background: var(--muet); }
.ok { color: var(--ok); font-weight: 600; font-size: .9rem; }
.muet { color: var(--muet); font-size: .88rem; }

/* Badge de disponibilité */
.badge {
  display: inline-block; margin-top: .3rem;
  font-size: .72rem; font-weight: 600;
  padding: .12rem .5rem; border-radius: 99px;
}
.badge.dispo { background: #e6f2e9; color: var(--ok); }
.badge.tendu { background: #fdf3e0; color: #925e12; }
.badge.plein { background: #f1eeeb; color: var(--muet); }

/* ---- Boutons ---- */
button {
  background: var(--accent); color: #fff; border: none; border-radius: 99px;
  padding: .6rem 1.1rem; font-size: .92rem; font-weight: 600; cursor: pointer;
  min-height: 2.5rem;
  transition: background .15s ease, transform .1s ease;
}
button:hover { background: var(--accent-fonce); }
button:active { transform: scale(.96); }
button.secondaire {
  background: none; border: 1.5px solid var(--bord); color: var(--encre-2);
}
button.secondaire:hover { background: #f1eeeb; border-color: var(--muet); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---- Avatar coach + fenêtre de détail ---- */
.avatar {
  width: 22px; height: 22px; border-radius: 99px; object-fit: cover;
  flex-shrink: 0; vertical-align: middle;
}
.avatar.initiales {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--encre); color: #fff; font-size: .6rem; font-weight: 700;
}
.coach-ligne { display: flex; align-items: center; gap: .4rem; margin-top: .25rem; }
.coach-ligne small { color: var(--muet); }
.seance[data-seance] { cursor: pointer; }

.dialog-detail {
  border: none; border-radius: var(--rayon); box-shadow: 0 10px 40px rgba(32,38,46,.25);
  padding: 1.2rem; width: min(480px, 92vw); max-height: 86vh;
}
.dialog-detail::backdrop { background: rgba(32, 38, 46, .45); }
.dialog-detail .fermer { position: absolute; top: .5rem; right: .5rem; }
.dialog-detail .fermer button {
  background: none; border: none; color: var(--muet); font-size: 1.3rem; min-height: 0;
}
.detail header h2 { font-size: 1.2rem; margin: 0 0 .2rem; }
.detail .badge { margin-right: .3rem; }
.badge.niveau { background: #ece9f4; color: #57508a; }
.detail-coach {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--fond); border-radius: 10px; padding: .7rem .8rem; margin: .8rem 0;
}
.detail-coach .avatar { width: 40px; height: 40px; }
.detail-coach .avatar.initiales { font-size: .85rem; }
.detail-coach .bio { margin: .2rem 0 0; font-size: .88rem; }
.detail-modalites h3 { font-size: .9rem; margin: .8rem 0 .3rem; }
.detail-modalites ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; color: var(--encre-2, #4a5361); }
.detail-modalites li { margin-bottom: .25rem; }
.detail-action { margin-top: 1rem; display: flex; justify-content: flex-end; gap: .6rem; align-items: center; }

/* ---- Popup de résultat d'action (réservation, annulation…) ---- */
.popup {
  border: none; border-radius: var(--rayon);
  box-shadow: 0 10px 40px rgba(32, 38, 46, .25);
  padding: 1.2rem 1.4rem; width: min(360px, 88vw); text-align: center;
}
.popup::backdrop { background: rgba(32, 38, 46, .35); }
.popup p { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.45; }
.popup.ok { border-top: 4px solid var(--ok); }
.popup.refus { border-top: 4px solid #a13c2c; }

/* ---- Fenêtre de confirmation (confirmation.js, remplace confirm()) ---- */
.confirmation {
  border: none; border-radius: var(--rayon);
  box-shadow: 0 10px 40px rgba(32, 38, 46, .25);
  padding: 1.3rem 1.4rem; width: min(400px, 90vw);
  border-top: 4px solid var(--accent);
}
.confirmation.danger { border-top-color: var(--alerte); }
.confirmation::backdrop { background: rgba(32, 38, 46, .35); }
.confirmation h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.confirmation p { margin: 0 0 1.1rem; font-size: .95rem; line-height: 1.5; color: var(--encre-2); }
.confirmation-actions { display: flex; gap: .6rem; }
.confirmation-actions button { flex: 1; }
.confirmation button.danger { background: var(--alerte); }
.confirmation button.danger:hover { background: #a13c2c; }

/* ---- Compte ---- */
.solde { font-size: 1.05rem; color: var(--encre-2); }
.solde strong { color: var(--encre); font-size: 1.25rem; }
.historique { width: 100%; border-collapse: collapse; font-size: .9rem; }
.historique td { padding: .55rem .3rem; border-bottom: 1px solid var(--bord); }
.delta { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.delta.neg { color: var(--alerte); }
.delta.pos { color: var(--ok); }

/* ---- Mes rappels (préférences de notification) ---- */
.rappels {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 1rem; box-shadow: var(--ombre);
}
.rappels > label {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .45rem 0; font-size: .95rem;
}
.rappels input[type="checkbox"] { margin-top: .12rem; }
.rappels input[type="tel"],
.rappels input[type="email"] {
  display: block; width: 100%; margin-top: .3rem; padding: .7rem .8rem;
  font-size: 1rem; border: 1.5px solid var(--bord); border-radius: 10px;
}
.rappels input[type="tel"]:focus,
.rappels input[type="email"]:focus { border-color: var(--accent); outline: none; }
.rappels button { margin-top: .6rem; }
.rappels small { color: var(--muet); }

/* ---- Formulaires (connexion / inscription) ---- */
form p label { display: block; font-size: .9rem; color: var(--encre-2); margin-bottom: .25rem; }
form p input {
  width: 100%; padding: .7rem .8rem; font-size: 1rem;
  border: 1.5px solid var(--bord); border-radius: 10px;
  background: var(--carte);
  transition: border-color .15s ease;
}
form p input:focus { border-color: var(--accent); outline: none; }

/* ---- Desktop : liens en haut, pas d'onglets, semaine complète ---- */
@media (min-width: 720px) {
  .tabbar { display: none; }
  .topbar nav a { display: inline; }
  main { padding-bottom: 2rem; }
  main:has(.semaine) { max-width: 1200px; }
  .semaine {
    grid-auto-flow: row; grid-template-columns: repeat(7, 1fr);
    overflow-x: visible; scroll-snap-type: none;
  }
}

/* ---- Accessibilité : réduire les animations ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- Sauna (flux linéaire, grandes cibles) ---- */
.jours-sauna { display: flex; gap: .45rem; margin: .8rem 0; overflow-x: auto; padding-bottom: .3rem; }
.jour-pastille {
  display: flex; flex-direction: column; align-items: center; min-width: 3.2rem;
  padding: .45rem .3rem; border-radius: 12px; text-decoration: none;
  background: var(--carte); border: 1.5px solid var(--bord); color: var(--encre);
}
.jour-pastille small { color: var(--muet); text-transform: capitalize; }
.jour-pastille strong { font-size: 1.15rem; }
.jour-pastille.actif { background: var(--encre); border-color: var(--encre); }
.jour-pastille.actif small, .jour-pastille.actif strong { color: #fff; }
.horaires-sauna { font-size: 1rem; }
.departs { display: grid; gap: .5rem; }
.departs form { margin: 0; }
button.depart, .depart {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: var(--carte); color: var(--encre); border: 1.5px solid var(--bord);
  border-radius: var(--rayon); padding: .95rem 1.1rem; font-size: 1.05rem;
  box-shadow: var(--ombre);
}
button.depart .heures { font-weight: 700; }
button.depart .places { color: var(--ok); font-weight: 600; }
button.depart:hover { background: #fdf6f2; border-color: var(--accent); }
button.depart:disabled { opacity: .55; }
.depart.complet { opacity: .5; }
.depart.complet .places { color: var(--muet); font-weight: 600; }

/* Filtre Matin / Après-midi / Soir du sauna */
.moments { display: flex; gap: .45rem; margin: 0 0 .8rem; }
/* Sous-onglets du compte (PAR-001 C9) : de l'air entre la salutation et
   les pastilles, et entre les pastilles et le contenu. */
.moments.sous-onglets { margin: 1.1rem 0 1.2rem; }
.moment-pastille {
  flex: 1; text-align: center; padding: .55rem .4rem;
  border-radius: 99px; text-decoration: none; font-weight: 600; font-size: .95rem;
  background: var(--carte); border: 1.5px solid var(--bord); color: var(--encre);
}
.moment-pastille.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
button.depart .duree { color: var(--muet); font-weight: 400; }

/* Modale de réservation sauna */
.action-sauna { flex-direction: column; align-items: stretch; gap: .6rem; }
.action-sauna button { width: 100%; font-size: 1rem; padding: .75rem; }
.action-sauna .case { font-size: .92rem; }
/* Wellness public : lien du tunnel visiteur, plein format dans la fenêtre. */
.action-sauna a.bouton-reserver {
  text-align: center; font-size: 1rem; padding: .75rem;
}

/* Lien Gestion (équipe du studio uniquement) */
.topbar nav a.lien-gestion {
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 99px;
  padding: .25rem .7rem; opacity: 1;
}

/* ---- Boutique & tunnel de commande ---- */
.produit {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: .9rem 1rem; margin-bottom: .6rem;
  box-shadow: var(--ombre);
}
.produit .infos small { display: block; color: var(--muet); margin-top: .25rem; line-height: 1.4; }
.produit-achat { text-align: right; flex-shrink: 0; }
.produit-achat .prix { display: block; font-weight: 700; font-size: 1.05rem; margin-bottom: .35rem; }
.barre-panier {
  position: fixed; left: .8rem; right: .8rem; bottom: calc(var(--tabbar-h) + .6rem);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--encre); color: #fff; text-decoration: none;
  border-radius: 99px; padding: .8rem 1.2rem; z-index: 15;
  box-shadow: 0 8px 30px rgba(32, 38, 46, .35);
}
/* Panier vide : le display:flex ci-dessus écrase le [hidden] de la feuille
   navigateur (règle UA, jamais prioritaire) — sans ceci, une barre
   « 0 produit » flotte en permanence et recouvre la dernière offre. */
.barre-panier[hidden] { display: none; }
/* PAR-001 C1 : panneau d'achat en contexte du planning — bottom sheet en
   mobile, panneau latéral droit en desktop (D2 : ouvert au clic Réserver). */
.panneau-reservation {
  position: fixed; margin: 0; border: none; padding: 1rem 1rem 1.4rem;
  left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: none;
  max-height: 78vh; overflow-y: auto;
  background: var(--fond); border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(32, 38, 46, .25);
}
.panneau-reservation::backdrop { background: rgba(32, 38, 46, .45); }
.panneau-reservation h2 { margin: .2rem 0 .8rem; }
.panneau-reservation .seance .action form { display: inline; }
.panneau-reservation .valider-panneau {
  display: block; text-align: center; font-size: 1rem; padding: .8rem;
  margin-top: .8rem;
}
@media (min-width: 720px) {
  .panneau-reservation {
    left: auto; right: 0; top: 0; bottom: 0; height: 100vh; max-height: none;
    width: 24rem; border-radius: 18px 0 0 18px;
    box-shadow: -12px 0 40px rgba(32, 38, 46, .25);
  }
}

/* PAR-001 C11 : quand la barre panier flotte, le contenu se termine
   au-dessus d'elle — la dernière offre reste entièrement visible et
   cliquable (safe area iOS via --tabbar-h ; sans :has, comportement
   antérieur). L'id dans :has() donne la priorité sur les deux règles
   main génériques, mobile et desktop. */
main:has(#barre-panier:not([hidden])) {
  padding-bottom: calc(var(--tabbar-h) + 5.6rem);
}
.recap-panier { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: .4rem 1rem; }
.ligne-panier {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem 0; border-bottom: 1px solid var(--bord);
}
.ligne-panier .infos { flex: 1; min-width: 0; }
.ligne-panier .infos small { display: block; }
.quantite { display: flex; align-items: center; gap: .5rem; }
.quantite button { min-height: 0; width: 2rem; height: 2rem; padding: 0; }
.prix-ligne { min-width: 3.5rem; text-align: right; }
.total-panier { text-align: right; font-size: 1.05rem; padding: .6rem 0; margin: 0; }
.tunnel { display: grid; gap: .8rem; margin-top: 1rem; }
.tunnel label { font-weight: 600; display: grid; gap: .3rem; }
.tunnel input {
  padding: .75rem .8rem; font-size: 1.05rem;
  border: 1.5px solid var(--bord); border-radius: 10px; background: var(--carte);
}
.tunnel input:focus { border-color: var(--accent); outline: none; }
.tunnel .valider { width: 100%; font-size: 1.05rem; padding: .85rem; }
.erreur-tunnel { background: #fbe7e4; color: var(--alerte); border-radius: 10px; padding: .6rem .8rem; }
/* Inscription (PAR-001 C8) : erreurs en alerte rattachées au champ, critères
   de mot de passe compacts validés en direct, cases à cocher alignées. */
.erreur-champ {
  background: #fbe7e4; color: var(--alerte); border-radius: 10px;
  padding: .5rem .8rem; margin: .35rem 0 0; font-size: .92rem; font-weight: 400;
}
.erreur-champ::before { content: "⚠ "; }
.criteres-mdp {
  list-style: none; padding: 0; margin: .2rem 0 .3rem;
  display: flex; flex-wrap: wrap; gap: .25rem .9rem;
  font-size: .85rem; color: var(--muet); font-weight: 400;
}
.criteres-mdp li::before { content: "○ "; }
.criteres-mdp li.ok { color: var(--ok); }
/* ---- Fenêtre de confirmation : source de crédit (cours, sauna, massage) ---- */
.choix-source { display: grid; gap: .5rem; margin: .6rem 0; text-align: left; }
.choix-source .choix-source-titre { margin: 0; font-weight: 700; font-size: .95rem; }
.choix-source .source-option {
  display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
  border: 1.5px solid var(--bord); border-radius: 10px; padding: .6rem .8rem;
}
.choix-source .source-option:has(input:checked) {
  border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset;
}
.choix-source .source-option input { margin-top: .2rem; accent-color: var(--accent); }
.choix-source .source-option span { display: grid; gap: .1rem; }
.choix-source .source-option small,
.choix-source .source-unique small { color: var(--muet); }
.choix-source .source-unique { margin: 0; display: grid; gap: .1rem; }
.choix-source .phrase-restant { margin: 0; font-size: .9rem; }
.criteres-mdp li.ok::before { content: "✓ "; }
.aide-champ { margin: .2rem 0 .4rem; }
.tunnel label.consentement {
  /* flex-start : sur deux lignes (CGU, décharge), la case reste alignée
     sur la première ligne au lieu de flotter au milieu. */
  display: flex; align-items: flex-start; gap: .55rem; font-weight: 400;
  line-height: 1.4;
}
.tunnel label.consentement input[type="checkbox"] {
  width: 1.3rem; height: 1.3rem; min-height: 0;
  flex: none; margin: .1rem 0 0; padding: 0; border: none;
}
.encart-seance { border-left: 4px solid var(--accent); }
a.bouton-reserver {
  display: inline-block; background: var(--accent); color: #fff;
  border-radius: 99px; padding: .6rem 1.1rem; font-size: .92rem;
  font-weight: 600; text-decoration: none;
}

/* Boutique : intro de catégorie, prix abonnement */
.intro-categorie { font-size: .95rem; color: var(--encre-2); margin: .2rem 0 1rem; }
/* PAR-001 C3 : sous-sections Sauna / Massages de la catégorie Wellness. */
.sous-titre-categorie { margin: 1.2rem 0 .5rem; font-size: 1.05rem; }
.produit-achat .prix small { color: var(--muet); font-weight: 400; font-size: .78rem; }

/* Parcours guidé « Vous souhaitez… » : grands choix tactiles avec pictogramme. */
.parcours { display: grid; gap: .6rem; margin-bottom: 1rem; }
.choix-parcours {
  display: flex; align-items: center; gap: .85rem;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: .95rem 1rem;
  box-shadow: var(--ombre); text-decoration: none; color: var(--encre);
}
.choix-parcours:active { transform: scale(.985); }
.choix-parcours .picto {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: #f3e9e2; color: var(--accent);
}
.choix-parcours .picto svg { width: 24px; height: 24px; }
.choix-parcours .libelle { flex: 1; min-width: 0; }
.choix-parcours .libelle strong { display: block; font-size: 1.02rem; }
.choix-parcours .libelle small { color: var(--muet); line-height: 1.35; }
.choix-parcours .chevron { color: var(--muet); font-size: 1.4rem; }
.retour-parcours {
  display: inline-block; margin: .2rem 0 .4rem;
  text-decoration: none; font-weight: 600; font-size: .92rem;
}

/* Fenêtre de détail d'un produit : accès pictogrammés. */
.detail-offre .prix-detail { margin: .1rem 0 0; font-weight: 700; font-size: 1.05rem; }
.detail-offre .prix-detail small { color: var(--muet); font-weight: 400; font-size: .78rem; }
.detail-offre .description-offre { margin: .8rem 0 0; line-height: 1.5; }
.detail-offre h3 {
  font-size: .8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--encre-2); margin: 1rem 0 .4rem;
}
.acces-offre { list-style: none; margin: 0; padding: 0; }
.acces-offre li {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem 0; border-bottom: 1px solid var(--bord); font-size: .92rem;
}
.acces-offre li:last-child { border-bottom: none; }
.acces-offre .picto {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: #f3e9e2; color: var(--accent);
}
.acces-offre .picto svg { width: 19px; height: 19px; }
.detail-offre .detail-action .form-ajout { width: 100%; }
.detail-offre .detail-action button.ajouter { width: 100%; font-size: 1rem; padding: .75rem; }

/* Carte produit en colonne, cliquable (détail), bouton d'ajout discret. */
.produit {
  --produit-ton: var(--accent);
  --produit-fond: #f3e9e2;
  position: relative; overflow: hidden;
  flex-direction: column; align-items: stretch; gap: .7rem;
  padding: 1rem; border-color: var(--bord);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.produit::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--produit-ton);
}
.produit[data-offre] { cursor: pointer; }
.produit[data-offre]:hover {
  transform: translateY(-2px); border-color: var(--produit-ton);
  box-shadow: 0 3px 8px rgba(43, 36, 34, .07), 0 12px 26px rgba(43, 36, 34, .1);
}
.produit[data-offre]:focus-visible {
  outline: 3px solid var(--produit-ton); outline-offset: 3px;
}
.produit--carte_sauna { --produit-ton: #3f776d; --produit-fond: #e7f1ee; }
.produit--carte_sauna_privatif { --produit-ton: #466a72; --produit-fond: #e7eff1; }
.produit--carte_prestation { --produit-ton: #9b607a; --produit-fond: #f5e9ef; }
.produit--abonnement { --produit-ton: #9a762d; --produit-fond: #f6efdc; }
.produit--pack { --produit-ton: #765f92; --produit-fond: #eee9f5; }
.produit--decouverte { --produit-ton: #765f92; --produit-fond: #eee9f5; }
.presentation-produit { display: flex; align-items: flex-start; gap: .8rem; }
.icone-produit-boutique {
  display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 14px; background: var(--produit-fond); color: var(--produit-ton);
}
.icone-produit-boutique svg { width: 23px; height: 23px; }
.presentation-produit .infos { flex: 1; min-width: 0; }
.presentation-produit .infos > strong {
  display: block; font-size: 1.03rem; line-height: 1.25; overflow-wrap: anywhere;
}
.type-produit-boutique {
  display: block; margin-bottom: .18rem; color: var(--produit-ton);
  font-size: .67rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.produit .lien-details { color: var(--accent); font-weight: 600; margin-top: .35rem; }
.rangee-achat {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--bord); padding-top: .7rem;
}
.rangee-achat .prix {
  font-weight: 700; font-size: 1.12rem; font-variant-numeric: tabular-nums;
}
.rangee-achat .prix small { color: var(--muet); font-weight: 400; font-size: .78rem; }
button.ajouter { min-height: 0; padding: .45rem 1.1rem; font-size: .88rem; }

/* ---- Planning mobile : un jour à la fois, choisi par pastilles ---- */
.jours-planning { margin-top: 0; }
.jours-planning .jour-pastille { border: none; cursor: pointer; position: relative; }
.jours-planning .jour-pastille.passe { opacity: .45; }
.point-cours {
  width: 5px; height: 5px; border-radius: 99px; background: var(--accent);
  margin-top: .15rem;
}
.jour-pastille.actif .point-cours { background: #fff; }
@media (max-width: 719px) {
  /* La tabbar porte déjà toute la navigation sur mobile : supprimer le
     doublon du haut libère de la hauteur utile sur chaque écran client. */
  .topbar { display: none; }
  .semaine {
    display: block; overflow-x: visible; scroll-snap-type: none;
    grid-auto-flow: initial; grid-auto-columns: initial;
  }
  .colonne { display: none; }
  .colonne.visible { display: block; }
  .colonne h2 { display: none; }        /* la pastille active porte déjà le jour */
  .colonne.passe { opacity: 1; }        /* le grisé vit sur la pastille */
}
@media (min-width: 720px) {
  .jours-planning { display: none; }    /* desktop : les 7 colonnes suffisent */
  .colonne { display: block !important; }
}

/* Filtres du planning client */
.filtres-planning { display: flex; gap: .5rem; margin: .6rem 0 .2rem; }
.filtres-planning select {
  flex: 1; min-width: 0; padding: .55rem .6rem; font-size: .92rem;
  border: 1.5px solid var(--bord); border-radius: 10px;
  background: var(--carte); font-family: inherit; color: var(--encre);
}

/* ---- Dashboard membre (spec dashboards B) ---- */
.phrase-jour {
  font-style: italic; color: var(--muet); text-align: center;
  margin: .6rem 0 1rem; font-size: 1.02rem;
}
.compteurs-membre { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: .6rem; }
.compteur-membre {
  flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: .15rem;
  background: var(--carte); border: 1.5px solid var(--bord);
  border-radius: 14px; padding: .9rem .8rem; text-align: center;
}
.compteur-membre strong { font-size: 1.6rem; line-height: 1.1; }
.compteur-membre small { color: var(--muet); }
.badge-jalon { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 1rem; }
.encart-club {
  display: flex; flex-direction: column; gap: .25rem;
  background: var(--carte); border: 1.5px solid var(--bord);
  border-left: 4px solid var(--accent); border-radius: 12px;
  padding: .8rem .9rem; margin-bottom: .8rem;
}
.encart-club p { margin: 0; }
.celebration {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center;
  background: rgba(43, 36, 34, .45); padding: 1.2rem;
}
.celebration-carte {
  background: var(--carte); border-radius: 18px; padding: 1.6rem 1.4rem;
  max-width: 420px; text-align: center; display: flex;
  flex-direction: column; gap: .7rem; box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.celebration-carte strong { font-size: 1.35rem; }
.celebration-carte button {
  align-self: center; border: none; border-radius: 10px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 600;
  padding: .6rem 1.4rem;
}

/* ---- MFA — double authentification (docs/specs_mfa.md) ---- */
.mfa-carte {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 1.2rem; margin: 1rem 0;
}
.mfa-carte h1 { margin-top: 0; }
.mfa-carte h2 { margin-top: 0; font-size: 1.1rem; }
.mfa-carte form { margin: .5rem 0; }
.saisie-code {
  display: block; width: 100%; font-size: 1.5rem; letter-spacing: .3em;
  text-align: center; padding: .6rem; margin: .6rem 0 1rem;
  border: 1px solid var(--bord); border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.erreur-mfa { background: #fbe7e4; color: var(--alerte); padding: .6rem .8rem; border-radius: 10px; }
.grace-mfa { background: #fdf3e0; color: #925e12; padding: .6rem .8rem; border-radius: 10px; }
.case-confiance { display: flex; gap: .55rem; align-items: center; margin: 0 0 1rem; font-size: .95rem; }
.actions-mfa { display: flex; flex-direction: column; gap: .8rem; align-items: stretch; margin-top: 1rem; }
.bouton-mfa {
  display: block; text-align: center; background: var(--accent); color: #fff;
  text-decoration: none; padding: .8rem; border-radius: 12px; font-weight: 600;
}
.bouton-mfa:hover { background: var(--accent-fonce); }
.plus-tard { text-align: center; color: var(--muet); }
.etapes-mfa { padding-left: 1.2rem; }
.etapes-mfa li { margin: .4rem 0; }
.qr-mfa { display: flex; justify-content: center; margin: 1rem 0; }
.qr-mfa svg {
  width: 220px; height: 220px; background: #fff; padding: 10px;
  border: 1px solid var(--bord); border-radius: 10px;
}
.secret-mfa { margin: .6rem 0 1rem; }
.secret-mfa code {
  display: block; margin-top: .5rem; word-break: break-all;
  background: var(--fond); padding: .5rem .7rem; border-radius: 8px;
}
.grille-codes {
  list-style: none; padding: 0; margin: 1rem 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem;
}
.grille-codes code {
  display: block; text-align: center; padding: .55rem; font-size: 1.05rem;
  background: var(--fond); border: 1px dashed var(--bord); border-radius: 8px;
}
.etat-mfa { font-weight: 700; }
.etat-mfa.ok { color: var(--ok); }
.etat-mfa.off { color: var(--muet); }
.ligne-appareil {
  display: flex; justify-content: space-between; align-items: center;
  gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--bord);
}
.ligne-appareil small { display: block; }
.journal-mfa { list-style: none; padding: 0; margin: 0; }
.journal-mfa li { padding: .35rem 0; border-top: 1px solid var(--bord); font-size: .95rem; }
.journal-mfa li small { display: block; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media print {
  /* Impression des codes de secours : la feuille ne porte que les codes. */
  .sans-impression, .topbar, .tabbar, .messages { display: none !important; }
}

/* --- Bons cadeaux (spec wellness §4 bis) ------------------------------- */
.lien-bon-cadeau { margin-top: 1.2rem; text-align: center; }
.lien-bon-cadeau a { color: var(--accent); font-weight: 600; text-decoration: none; }
.lien-bon-cadeau a:hover { text-decoration: underline; }

.cadeau-tunnel {
  margin: .8rem 0 1rem; border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: .8rem 1rem; background: var(--carte);
}
.cadeau-tunnel .case-cadeau { font-weight: 600; }
/* Les champs n'apparaissent que si la case est cochée (repli sans :has :
   champs visibles — ils restent ignorés tant que la case est décochée). */
.cadeau-tunnel .champs-cadeau { display: grid; gap: .6rem; margin-top: .8rem; }
@supports selector(:has(input)) {
  .cadeau-tunnel:not(:has(.case-cadeau input:checked)) .champs-cadeau { display: none; }
}

/* Bon imprimable : une carte sobre, centrée, pleine page à l'impression. */
.bon-imprimable {
  max-width: 480px; margin: 1rem auto; padding: 1.6rem;
  border: 2px dashed var(--accent); border-radius: 18px;
  background: var(--carte); text-align: center;
}
.bon-imprimable .studio-nom {
  text-transform: uppercase; letter-spacing: .12em; font-size: .8rem;
  color: var(--accent); margin: 0;
}
.bon-imprimable h1 { margin: .2rem 0 1rem; }
.bon-imprimable .bon-offre { font-size: 1.25rem; font-weight: 700; margin: .3rem 0; }
.bon-imprimable .bon-message { font-style: italic; margin: .8rem 0; }
.bon-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.5rem; letter-spacing: .18em; font-weight: 700;
  background: var(--fond); border-radius: 12px; padding: .7rem .5rem;
  margin: 1rem 0; user-select: all;
}
@media print {
  .no-print { display: none !important; }
  .bon-imprimable { border-color: #000; margin: 0 auto; }
}

/* Lien habillé en bouton principal (ex. renvoi boutique du parcours
   massage) : même dessin que `button`, pour un <a>. */
a.bouton-lien {
  display: inline-block; background: var(--accent); color: #fff;
  border-radius: 99px; padding: .6rem 1.1rem; font-size: .92rem;
  font-weight: 600; text-decoration: none;
  transition: background .15s ease, transform .1s ease;
}
a.bouton-lien:hover { background: var(--accent-fonce); }
a.bouton-lien:active { transform: scale(.96); }

/* ---- Documents juridiques (passe 2, C1) ---- */
.pied-juridique {
  display: flex; justify-content: center; gap: .6rem;
  padding: 1.2rem 1rem calc(4.6rem + env(safe-area-inset-bottom));
  font-size: .78rem; color: var(--muet);
}
.pied-juridique a { color: var(--muet); text-decoration: underline; }
.document-juridique { max-width: 42rem; margin: 0 auto; }
.texte-juridique p { margin: .8rem 0; line-height: 1.55; }
.tunnel label.consentement a { color: inherit; text-decoration: underline; }

/* ---- Panier mixte (passe 2, C2) : deux règlements annoncés en orange ---- */
.avertissement-mixte {
  background: #fdf0e3; color: #9a5b1f; border: 1px solid #f0cf9f;
  border-radius: 12px; padding: .75rem 1rem; font-size: .92rem;
}

/* C3 : abonnement visible mais non achetable (membre déjà abonné) */
.abo-non-achetable { max-width: 16rem; text-align: right; }
.detail-action .abo-non-achetable { display: block; text-align: center; margin: 0 auto; }

/* ---- C5 : pictogrammes des moyens de paiement au checkout ---- */
.choix-paiement { display: flex; flex-direction: column; gap: .6rem; }
.choix-paiement .valider { position: relative; padding-left: 3.4rem; text-align: left; }
.choix-paiement .valider small { display: block; font-weight: 400; opacity: .85; }
.picto-moyen {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 1.7rem; height: 1.7rem;
}
.picto-moyen svg { width: 100%; height: 100%; }

/* ---- C8 : réservations wellness dans « mes réservations » ---- */
:root { --wellness: #4E8F8A; }  /* eucalyptus, complément de la terracotta */
.seance.resa-wellness { border-left: 4px solid var(--wellness); }
.badge-wellness {
  display: inline-block; background: #e6f0ef; color: #35635f;
  border-radius: 99px; padding: .1rem .55rem; font-size: .68rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  vertical-align: middle; margin-left: .3rem;
}

/* ---- C7 : abonnement et cartes lisibles sur Mon espace ---- */
.carte-compte {
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: .9rem 1.1rem; margin-bottom: .7rem;
  box-shadow: var(--ombre);
}
.carte-abonnement { border-left: 4px solid var(--accent); }
.carte-compte-tete {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .8rem; margin-bottom: .5rem;
}
.montant-abo { font-weight: 700; color: var(--accent-fonce); white-space: nowrap; }
.carte-compte-chiffres { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.chiffre-bloc strong { font-size: 1.9rem; line-height: 1.1; display: block; }
.chiffre-bloc .sur-total { font-size: 1rem; color: var(--muet); font-weight: 600; }
.chiffre-bloc small { color: var(--muet); }
.carte-compte-pied { margin: .5rem 0 0; font-size: .85rem; }
.cartes-compte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: .7rem; }
.cartes-compte .carte-compte { margin-bottom: 0; }

/* ---- C12 : grille d'espacement du compte + historique repliable ---- */
.page-compte { --espace-bloc: 1.6rem; }
.page-compte h2 { margin: var(--espace-bloc) 0 .7rem; }
.page-compte .sous-onglets { margin-bottom: var(--espace-bloc); }
.page-compte .phrase-jour,
.page-compte .encart-club,
.page-compte .celebration-carte { margin-bottom: var(--espace-bloc); }
.page-compte .solde { margin: var(--espace-bloc) 0; }
.page-compte .seance { margin-bottom: .75rem; }
.deconnexion-mobile { display: none; }
@media (max-width: 719px) {
  .deconnexion-mobile {
    display: block;
    margin: 2rem 0 .5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bord);
  }
  .deconnexion-bouton {
    width: 100%;
    background: var(--carte);
    border: 1.5px solid var(--bord);
    border-radius: 12px;
    color: var(--encre-2);
  }
  .deconnexion-bouton:hover {
    background: #f1eeeb;
    color: var(--encre);
  }
}
@media (min-width: 640px) {
  .page-compte { --espace-bloc: 2.1rem; }  /* desktop : encore plus d'air */
}
.historique-repliable { margin: var(--espace-bloc, 1.6rem) 0; }
.historique-repliable summary {
  list-style: none; cursor: pointer; display: inline-block;
  background: var(--carte); border: 1px solid var(--bord);
  border-radius: 99px; padding: .55rem 1.1rem;
  font-size: .92rem; font-weight: 600; color: var(--encre-2);
  transition: border-color .15s ease;
}
.historique-repliable summary::-webkit-details-marker { display: none; }
.historique-repliable summary:hover { border-color: var(--accent); }
.historique-repliable[open] summary { margin-bottom: .8rem; }
.historique-repliable[open] summary::after { content: " — replier"; font-weight: 400; }

/* ---- Cases à cocher : un seul dessin partout (fin du rendu navigateur
   brut) — la couleur et la taille de base valent pour toutes les cases ;
   les contextes plus précis (consentement du tunnel…) gardent la main. ---- */
input[type="checkbox"] {
  accent-color: var(--accent);
  width: 1.15rem; height: 1.15rem; flex: none; margin: 0;
  min-height: 0; padding: 0; border: none;
}
/* Étiquette + case génériques (sauna privatif, MFA…) : mêmes proportions
   que les consentements du tunnel. */
label.case, .case-confiance {
  display: flex; align-items: flex-start; gap: .55rem; line-height: 1.4;
}
label.case input[type="checkbox"],
.case-confiance input[type="checkbox"] { margin-top: .12rem; }

/* ---- Cloche de notifications in-app (docs/specs_notifications_inapp.md) ---- */
.topbar .cloche { position: relative; margin-left: auto; margin-right: .6rem; flex: none; }
.cloche summary {
  list-style: none; cursor: pointer; position: relative;
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; color: #fff;
}
.cloche summary::-webkit-details-marker { display: none; }
.cloche summary:hover { background: rgba(255, 255, 255, .12); }
.cloche summary svg { width: 23px; height: 23px; }
.cloche-badge {
  position: absolute; top: 0; right: -3px;
  background: var(--alerte, #C7503F); color: #fff; border-radius: 999px;
  font-size: .66rem; font-weight: 700; min-width: 16px; height: 16px;
  line-height: 16px; text-align: center; padding: 0 4px;
}
.cloche-badge[hidden] { display: none; } /* une règle display écraserait hidden */
.cloche-panneau {
  position: absolute; right: 0; top: calc(100% + .55rem); z-index: 60;
  width: min(370px, 94vw); max-height: 70vh; overflow-y: auto;
  background: var(--carte, #fff); border: 1px solid var(--bord);
  border-radius: var(--rayon, 12px); box-shadow: var(--ombre);
  padding: .5rem; color: var(--encre);
}
.cloche-liste { display: grid; gap: .15rem; }
.notif button {
  display: flex; gap: .6rem; width: 100%; text-align: left; align-items: flex-start;
  background: none; border: 0; padding: .55rem .6rem; border-radius: 10px;
  cursor: pointer; font: inherit; color: inherit; min-height: 0;
}
.notif button:hover { background: var(--fond, #f6f1ec); }
.notif.non-lue button { background: var(--rose, #EBD3CC); }
.notif.non-lue strong::after { content: " •"; color: var(--accent); }
.notif-icone { font-size: 1.05rem; line-height: 1.3; }
.notif-texte { display: grid; gap: .1rem; min-width: 0; }
.notif-texte strong { font-size: .92rem; }
.notif-corps {
  font-size: .85rem; color: var(--muet);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif-texte small { font-size: .76rem; color: var(--muet); }
.notif-vide { padding: .8rem; text-align: center; }
.cloche-actions {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: .45rem .3rem 0; border-top: 1px solid var(--bord); margin-top: .3rem;
}
.page-notifications { display: grid; gap: .25rem; }
.page-notifications .notif button { border: 1px solid var(--bord); background: var(--carte, #fff); }
.page-notifications .pagination { display: flex; gap: .8rem; align-items: center; margin-top: .6rem; }
@media (max-width: 719px) {
  /* Mobile : panneau plein écran sous la barre (spec §2). */
  .cloche-panneau {
    position: fixed; left: 0; right: 0;
    top: calc(56px + env(safe-area-inset-top, 0px)); width: auto;
    max-height: calc(100vh - 56px); border-radius: 0;
  }
}