/* =====================================================================
   Magasin XM : jetons, coquille .xm-root, dialogues, zone d'annonce et
   panier hérité #floating-cart (lot L03).
   ---------------------------------------------------------------------
   - Jetons recopiés de xtr-ui.css (l'accueil n'a pas body.xu) : crème,
     encre #2E1A47, mauve #6D28D9 (doux #F4EEFA), rouge d'action #E11D48
     réservé à l'achat, lignes #E7DECF. Polices Inter / Montserrat
     (assets/css/xtr-fonts.css, chargée par la page).
   - Préfixe xm- uniquement : JAMAIS les anciennes classes du magasin
     (.location-item, .ad-popup, .btn-order, .cart-count, .map-control-btn,
     .floating-cart...) que brand-creme.css repeint en !important.
   - Les modules ont leur propre feuille : xm-map-list.css, xm-bar.css,
     xm-packs.css, xm-steps.css.
   - Jetons déclarés sur .xm-root, .xm-dialog et .xm-status--global
     SEULEMENT : la bulle d'annonce d'un magasin hérite de .xm-root. Pour
     changer --xm-bar-h (xm-bar.css), le redéfinir sur .xm-root (et sur
     .xm-status--global si aucun magasin n'est monté).
   ===================================================================== */

.xm-root,
.xm-dialog,
.xm-status--global {
  --xm-cream: #FAF7F2;
  --xm-surface: #FFFCF8;
  --xm-white: #FFFFFF;
  --xm-line: #E7DECF;
  --xm-line-strong: #D9CDB9;
  --xm-ink: #2E1A47;
  --xm-muted: #5b4d6e;
  --xm-mauve: #6D28D9;
  --xm-mauve-bright: #7C3AED;
  --xm-mauve-soft: #F4EEFA;
  --xm-red: #E11D48;
  --xm-red-dark: #BE123C;
  --xm-green: #166534;
  --xm-green-soft: #ECF7EF;
  --xm-radius: 12px;
  --xm-radius-lg: 16px;
  --xm-shadow: 0 1px 2px rgba(46, 26, 71, .06), 0 4px 12px rgba(46, 26, 71, .06);
  --xm-shadow-lg: 0 2px 4px rgba(46, 26, 71, .06), 0 16px 40px rgba(46, 26, 71, .12);
  --xm-focus: 0 0 0 3px #FFFCF8, 0 0 0 5px #6D28D9;
  --xm-font: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --xm-font-title: 'Montserrat', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --xm-header-h: 72px;   /* hauteur de l'en-tête .xh */
  --xm-bar-h: 72px;      /* barre récapitulative (xm-bar.css peut la redéfinir) */
  --xm-z-bar: 4000;      /* < en-tête (5000) ; dialogues en couche supérieure (<dialog>) */
}

/* ---- Gabarit ---- */
.xm-root {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 32px;
  font-family: var(--xm-font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--xm-ink);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.xm-root *,
.xm-root *::before,
.xm-root *::after,
.xm-dialog *,
.xm-dialog *::before,
.xm-dialog *::after { box-sizing: border-box; }
.xm-root [hidden],
.xm-dialog [hidden] { display: none !important; }
.xm-root h2,
.xm-root h3,
.xm-dialog h2 {
  font-family: var(--xm-font-title);
  color: var(--xm-ink);
  line-height: 1.25;
  margin: 0;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.xm-root p { margin: 0; }
.xm-root a { color: var(--xm-mauve); }
.xm-root[data-xm-mode="modal"] { max-width: none; padding: 16px; gap: 16px; }
.xm-slot:empty { display: none; }
.xm-root [data-xm-slot] { scroll-margin-top: calc(var(--xm-header-h) + 24px); }
.xm-root [data-xm-slot]:focus { outline: none; }
.xm-root [data-xm-slot]:focus-visible { outline: none; box-shadow: var(--xm-focus); border-radius: var(--xm-radius); }

/* Liste + carte côte à côte au bureau (carte collante : aucun overflow:hidden sur les parents). */
.xm-browse {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
}
.xm-browse > [data-xm-slot="map"] { position: sticky; top: calc(var(--xm-header-h) + 88px); }

/* ---- Accessibilité ---- */
.xm-sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.xm-root :focus-visible,
.xm-dialog :focus-visible { outline: none; box-shadow: var(--xm-focus); }

/* ---- Boutons ---- */
.xm-root .xm-btn,
.xm-dialog .xm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  font-family: var(--xm-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.xm-root .xm-btn:active,
.xm-dialog .xm-btn:active { transform: scale(.98); }
.xm-root .xm-btn[disabled],
.xm-dialog .xm-btn[disabled] { cursor: not-allowed; opacity: .55; transform: none; }
.xm-btn.xm-btn--primary { background: var(--xm-red); border-color: var(--xm-red); color: #fff; }
.xm-btn.xm-btn--primary:hover:not([disabled]) { background: var(--xm-red-dark); border-color: var(--xm-red-dark); color: #fff; }
.xm-btn.xm-btn--danger { background: var(--xm-ink); border-color: var(--xm-ink); color: #fff; }
.xm-btn.xm-btn--danger:hover:not([disabled]) { background: #1d0f2f; border-color: #1d0f2f; color: #fff; }
.xm-btn.xm-btn--ghost { background: transparent; border-color: var(--xm-line-strong); color: var(--xm-ink); }
.xm-btn.xm-btn--ghost:hover:not([disabled]) { background: var(--xm-white); border-color: var(--xm-ink); }
.xm-btn.xm-btn--soft { background: var(--xm-mauve-soft); border-color: var(--xm-mauve-soft); color: var(--xm-mauve); }
.xm-btn.xm-btn--soft:hover:not([disabled]) { border-color: var(--xm-mauve); }

/* ---- Lien téléphone ---- */
.xm-root a.xm-tel,
.xm-dialog a.xm-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--xm-mauve);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.xm-root a.xm-tel:hover,
.xm-dialog a.xm-tel:hover { color: var(--xm-ink); }

/* ---- Entrée à deux voies ---- */
.xm-entry { display: flex; flex-direction: column; gap: 16px; }
.xm-root .xm-entry__title { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; }
.xm-entry__ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.xm-root button.xm-way {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  min-height: 96px;
  padding: 20px 22px;
  margin: 0;
  background: var(--xm-surface);
  border: 1.5px solid var(--xm-line);
  border-radius: var(--xm-radius-lg);
  box-shadow: var(--xm-shadow);
  font-family: var(--xm-font);
  color: var(--xm-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.xm-root button.xm-way:hover { border-color: var(--xm-mauve); background: var(--xm-white); }
.xm-root[data-xm-way="packs"] .xm-way--packs,
.xm-root[data-xm-way="places"] .xm-way--places { border-color: var(--xm-mauve); box-shadow: 0 0 0 1px var(--xm-mauve), var(--xm-shadow); }
.xm-way__head { display: inline-flex; align-items: baseline; gap: 8px; }
.xm-way__label { font-family: var(--xm-font-title); font-size: 19px; font-weight: 800; line-height: 1.25; }
.xm-way__arrow { font-family: var(--xm-font-title); font-size: 19px; font-weight: 800; line-height: 1; color: var(--xm-mauve); }
.xm-way__hint { font-size: 15px; color: var(--xm-muted); line-height: 1.45; }
.xm-entry__talk { font-size: 15px; color: var(--xm-muted); }
.xm-entry__talkq { color: var(--xm-muted); }

/* ---- Annonces ----
   .xm-live (role=status) : zone vivante masquée visuellement par .xm-sr-only,
   JAMAIS visibility:hidden ni display:none (toujours dans l'arbre d'accessibilité).
   .xm-status : bulle purement visuelle (aria-hidden), au-dessus de la barre. */
.xm-live { pointer-events: none; }
.xm-status {
  position: fixed;
  left: 50%;
  bottom: calc(var(--xm-bar-h) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: calc(var(--xm-z-bar) + 10);
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  padding: 10px 16px;
  border-radius: var(--xm-radius);
  background: var(--xm-ink);
  color: #fff;
  font-family: var(--xm-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  box-shadow: var(--xm-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .2s, transform .2s, visibility 0s linear .2s;
  pointer-events: none;
}
.xm-status.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .2s, transform .2s, visibility 0s;
}

/* ---- Dialogues (<dialog> natif : couche supérieure, focus et Échap natifs) ---- */
dialog.xm-dialog {
  width: calc(100% - 32px);
  max-width: 520px;
  max-height: calc(100vh - 32px);
  padding: 0;
  margin: auto;
  border: 0;
  background: transparent;
  color: var(--xm-ink);
  font-family: var(--xm-font);
  overflow: visible;
}
dialog.xm-dialog::backdrop { background: rgba(20, 8, 40, .55); }
/* Bulle d'un dialogue (couche supérieure) : en haut, loin des boutons et de la feuille du bas. */
.xm-dialog .xm-status,
.xm-status--foreign { top: calc(16px + env(safe-area-inset-top, 0px)); bottom: auto; transform: translate(-50%, -8px); }
.xm-dialog .xm-status.is-visible,
.xm-status--foreign.is-visible { transform: translate(-50%, 0); }
dialog.xm-dialog.xm-dialog--fallback {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
  background: rgba(20, 8, 40, .55);
}
.xm-dialog__box {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 28px 24px 22px;
  background: var(--xm-surface);
  border: 1px solid var(--xm-line);
  border-radius: var(--xm-radius-lg);
  box-shadow: var(--xm-shadow-lg);
}
.xm-dialog .xm-dialog__title { margin: 0 44px 12px 0; font-size: 22px; font-weight: 800; }
.xm-dialog__body { display: flex; flex-direction: column; gap: 8px; }
.xm-dialog__body p { margin: 0; color: var(--xm-muted); font-size: 16px; line-height: 1.55; }
.xm-dialog__body p.xm-dialog__facts {
  padding: 12px 14px;
  border-radius: var(--xm-radius);
  background: var(--xm-mauve-soft);
  color: var(--xm-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.xm-dialog__phone { margin: 12px 0 0; }
.xm-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.xm-dialog button.xm-dialog__x {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--xm-muted);
  cursor: pointer;
}
.xm-dialog button.xm-dialog__x:hover { background: var(--xm-mauve-soft); color: var(--xm-ink); }

/* ---- Panier hérité #floating-cart (déplacé dans l'en-tête par xtr-header.js) ----
   Spécificité d'ID + !important : seule façon de battre brand-creme.css. Son menu
   déroulant reste dans le DOM (contrat de updateCartUI) mais n'est jamais affiché :
   le tiroir « Ma sélection » (xm-bar.js) le remplace.
   Le style bureau vise SEULEMENT le panier adopté par l'en-tête (.xh-actions,
   xtr-header.js adoptCart) : ailleurs (embed, iframe de /shop/cart à 960 px), le
   masquage existant « #floating-cart { display:none !important } » reste maître. */
html.xm-on #floating-cart .cart-dropdown { display: none !important; }
@media (min-width: 900px) {
  html.xm-on .xh-actions #floating-cart {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border: 1.5px solid #2E1A47 !important;
    border-radius: 10px !important;
    background: #FFFCF8 !important;
    color: #2E1A47 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transform: none !important;
    animation: none !important;
  }
  html.xm-on .xh-actions #floating-cart:hover { background: #F4EEFA !important; border-color: #6D28D9 !important; }
  html.xm-on .xh-actions #floating-cart:focus-visible { outline: none !important; box-shadow: 0 0 0 3px #FFFCF8, 0 0 0 5px #6D28D9 !important; }
  html.xm-on .xh-actions #floating-cart #cart-badge {
    position: static !important;
    min-width: 22px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: #6D28D9 !important;
    color: #fff !important;
    font: 700 12px/22px 'Inter', -apple-system, 'Segoe UI', sans-serif !important;
    text-align: center !important;
    box-shadow: none !important;
  }
}
/* Téléphone : la barre du bas remplace le panier rond. */
@media (max-width: 899px) {
  html.xm-on #floating-cart { display: none !important; }
}

/* ---- Téléphone ---- */
@media (max-width: 899px) {
  .xm-root {
    padding: 16px 16px calc(var(--xm-bar-h) + 24px + env(safe-area-inset-bottom, 0px));
    gap: 20px;
  }
  .xm-browse { display: flex; flex-direction: column; gap: 20px; }
  .xm-browse > [data-xm-slot="map"] { position: static; }
  .xm-entry__ways { grid-template-columns: 1fr; gap: 12px; }
  .xm-root button.xm-way { min-height: 76px; padding: 16px 18px; }
}
@media (max-width: 599px) {
  dialog.xm-dialog { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92vh; }
  .xm-dialog__box {
    max-width: none;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    padding: 24px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .xm-dialog__actions { flex-direction: column-reverse; align-items: stretch; }
  .xm-dialog__actions .xm-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .xm-root *, .xm-dialog *, .xm-status, .xm-status--global { transition: none !important; animation: none !important; }
}