/* ==========================================================================
   menu-mobile.css — le menu sur téléphone (≤ 760 px)
   Plus de « ticket de caisse » : MENU ouvre un panneau plein écran posé sur un voile noir
   (la page derrière s'assombrit et se floute légèrement), les sections en grand, numérotées,
   les sous-pages en accordéon. Ordinateur : rien ne change (le ticket reste).
   Chargé après style.css / ui-framer.css ; sélecteurs préfixés « html body » pour passer devant.
   ========================================================================== */
@media (max-width: 760px) {
  html.menu143-ouvert, html.menu143-ouvert body { overflow: hidden !important; }

  html body .ticket.est-visible { mix-blend-mode: normal !important; z-index: 2147483600 !important; }

  /* le voile : la page derrière baisse en opacité */
  html body .ticket .ticket__voile {
    position: fixed; inset: 0; z-index: 0;
    background: rgba(3, 3, 3, .64);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity .45s cubic-bezier(.22, .61, .36, 1);
  }
  html body .ticket.est-ouvert .ticket__voile { opacity: 1; pointer-events: auto; }

  /* MENU / CLOSE reste au-dessus, en clair */
  html body .ticket .ticket__ouvrir { position: relative; z-index: 2; display: block; padding: 4px 0; }
  html body .ticket.est-ouvert .ticket__ouvrir { color: #ededea !important; }

  /* le panneau */
  html body .ticket .ticket__papier {
    position: fixed; top: 0; left: 0; right: 0; bottom: auto; z-index: 1;
    width: auto; max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: calc(var(--marge, 16px) + 70px) 7vw 48px;
    background: none; color: #ededea; --gris: rgba(237, 237, 234, .5);
    -webkit-mask: none; mask: none; transform: none; clip-path: none;
    visibility: hidden; pointer-events: none;
    transition: visibility 0s linear .5s;
  }
  html body .ticket.est-ouvert .ticket__papier { visibility: visible; pointer-events: auto; transition: none; }
  html body .ticket .ticket__papier::before {
    content: "143LOVE — INDEX"; position: absolute; top: calc(var(--marge, 16px) + 38px); left: 7vw;
    font-size: 10px; letter-spacing: .14em; color: rgba(237, 237, 234, .45);
    opacity: 0; transition: opacity .4s ease .1s;
  }
  html body .ticket.est-ouvert .ticket__papier::before { opacity: 1; }
  html body .ticket .ticket__entete { display: none; }

  /* les sections : grandes, numérotées, séparées par un filet ; elles arrivent une à une */
  html body .ticket .ticket__liste { counter-reset: m; border-bottom: 1px solid rgba(237, 237, 234, .16); }
  html body .ticket .ticket__liste > .ligne {
    counter-increment: m; border-top: 1px solid rgba(237, 237, 234, .16);
    opacity: 0; transform: translateY(14px);
    transition: opacity .3s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
  }
  html body .ticket.est-ouvert .ticket__liste > .ligne { opacity: 1; transform: none; }
  html body .ticket.est-ouvert .ticket__liste > .ligne:nth-child(1) { transition-delay: .06s; }
  html body .ticket.est-ouvert .ticket__liste > .ligne:nth-child(2) { transition-delay: .1s; }
  html body .ticket.est-ouvert .ticket__liste > .ligne:nth-child(3) { transition-delay: .14s; }
  html body .ticket.est-ouvert .ticket__liste > .ligne:nth-child(4) { transition-delay: .18s; }
  html body .ticket.est-ouvert .ticket__liste > .ligne:nth-child(5) { transition-delay: .22s; }
  html body .ticket.est-ouvert .ticket__liste > .ligne:nth-child(6) { transition-delay: .26s; }

  html body .ticket .ligne__titre {
    display: flex; align-items: baseline; gap: 16px; width: 100%;
    padding: 17px 0; font-size: 19px; line-height: 1.1; letter-spacing: .05em; white-space: nowrap;
  }
  html body .ticket .ligne__titre::before {
    content: counter(m, decimal-leading-zero); flex: none; min-width: 2.2ch;
    font-size: 10px; letter-spacing: .1em; color: var(--gris);
  }
  html body .ticket button.ligne__titre::after {
    content: "+"; margin-left: auto; font-size: 18px; line-height: 1; color: var(--gris);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1);
  }
  html body .ticket .est-ouverte > button.ligne__titre::after { transform: rotate(45deg); }
  html body .ticket .ligne__points, html body .ticket .ligne__total { display: none; }

  /* sous-pages : accordéon */
  html body .ticket .ligne__sous {
    display: block; max-height: 0; overflow: hidden;
    padding-left: calc(2.2ch + 16px);
    transition: max-height .45s cubic-bezier(.22, .61, .36, 1);
  }
  html body .ticket .ligne__sous.est-imprime { max-height: 260px; }
  html body .ticket .ligne__sous a { display: block; padding: 0 0 15px; font-size: 13px; letter-spacing: .08em; color: var(--gris); white-space: nowrap; }
  html body .ticket .ligne__sous li:last-child a { padding-bottom: 20px; }
  html body .ticket .ligne__sous a:active { color: #ededea; }
  html body .ticket .ligne__sous a[aria-disabled="true"] { opacity: .4; }
  html body .ticket .sous__qte, html body .ticket .sous__points, html body .ticket .sous__prix { display: none; }
}
@media (max-width: 760px) {
  /* le lecteur s'efface pendant que le menu est ouvert (il ne se superpose pas à l'en-tête du panneau) */
  html body .lecteur { transition: opacity .35s ease; }
  html.menu143-ouvert body .lecteur { opacity: 0; pointer-events: none; }
}

/* menu du bas de page (téléphone) : même style que le menu du haut (sections numérotées, filets fins), en plus compact :
   deux colonnes, sous-pages en accordéon sous la section ; il apparaît ligne à ligne quand on arrive en bas de page */
@media (max-width: 760px) {
  html body .fin .fin__menu {
    display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 0;
    counter-reset: f; white-space: normal; text-align: left; color: #ededea; pointer-events: auto;
  }
  html body .fin .fin__menu > i { display: none !important; }
  html body .fin .fin__item {
    counter-increment: f; position: relative; border-top: 1px solid rgba(237, 237, 234, .16);
    opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
  }
  html body .fin .fin__menu.est-visible .fin__item { opacity: 1; transform: none; }
  html body .fin .fin__menu.est-visible .fin__item:nth-of-type(2) { transition-delay: .06s; }
  html body .fin .fin__menu.est-visible .fin__item:nth-of-type(3) { transition-delay: .12s; }
  html body .fin .fin__menu.est-visible .fin__item:nth-of-type(4) { transition-delay: .18s; }
  html body .fin .fin__menu.est-visible .fin__item:nth-of-type(5) { transition-delay: .24s; }
  html body .fin .fin__menu.est-visible .fin__item:nth-of-type(6) { transition-delay: .3s; }
  html body .fin .fin__titre {
    display: flex; align-items: baseline; gap: 9px; width: 100%; padding: 12px 0;
    font-size: 12px; line-height: 1.15; letter-spacing: .06em; color: #ededea !important; text-align: left; white-space: nowrap;
  }
  html body .fin .fin__titre::before { content: counter(f, decimal-leading-zero); flex: none; font-size: 8.5px; letter-spacing: .1em; color: rgba(237, 237, 234, .45); }
  html body .fin .fin__item button.fin__titre::after {
    content: "+"; margin: 0 0 0 auto; font-size: 13px; line-height: 1; color: rgba(237, 237, 234, .5);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  }
  html body .fin .fin__item.est-ouverte button.fin__titre::after { transform: rotate(45deg); }
  html body .fin .fin__sous {
    position: static !important; display: none !important; min-width: 0; margin: -4px 0 0; padding: 0 0 10px calc(2ch + 9px);
  }
  html body .fin .fin__item.est-ouverte .fin__sous { display: block !important; }
  html body .fin .fin__sous li { min-height: 0; }
  html body .fin .fin__sous a { display: block; padding: 4px 0; font-size: 10.5px; line-height: 1.3; letter-spacing: .06em; color: rgba(237, 237, 234, .55); white-space: normal; }
  html body .fin .fin__sous a[aria-disabled="true"] { opacity: .45; }
  html body .fin .sous__qte, html body .fin .sous__points, html body .fin .sous__prix { display: none; }
  /* pages reprises de Framer : le menu se pose au bas du bandeau de fin, sur fond noir, et monte au-dessus si besoin */
  html body .mg-fin .fin {
    top: auto !important; bottom: 0; left: 0 !important; width: 100% !important; transform: none !important;
    padding: 26px 6vw 22px !important; background: linear-gradient(to bottom, rgba(5, 5, 5, 0), rgba(5, 5, 5, .5) 30px) !important;
  }
}