/*
 * ls-reservation.css — bouton « Réserver » et panneau du widget de réservation Lightspeed.
 * Chargé par footer.php (toutes les pages publiques), avec scripts/ls-reservation.js.
 * Posé le 09.11.2026 par l'Agence Audace directement en production : À REPORTER dans le dépôt git.
 *
 * Pourquoi : la pastille blanche « Book a table » de Lightspeed est un iframe de mylightspeed.app,
 * impossible à styler depuis le site (la cliente la trouvait moche). On la masque tant que le
 * panneau est replié, et un bouton du site, dans la barre fixe « Emporter », l'ouvre.
 * Les classes ls-bouton-maison / ls-ouvert / ls-panneau-ouvert sont posées par le script.
 * !important partout sur l'iframe : le widget écrit ses positions en style en ligne.
 */

/* Pastille repliée masquée, seulement si notre bouton existe (sinon elle reste le seul accès). */
html.ls-bouton-maison #ls-reservation-widget:not(.ls-ouvert) {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Panneau ouvert : au-dessus de la barre « Emporter » (z-index 99999 dans hmm-custom.css)
   et de la fenêtre « Infos » qui s'ouvre au chargement (#main, z-index 999999) — sinon un clic
   sur « Réserver » pendant que cette fenêtre est affichée ouvrait le panneau dessous. */
#ls-reservation-widget.ls-ouvert {
    z-index: 1000000 !important;
}

/* Bouton « Réserver » : dimensions et couleurs reprises de « #order-online .button »
   (hmm-custom.css) — rouge comme Emporter et Livraison, à la demande de la cliente (09.11.2026 ;
   il était d'abord blanc). Un <button> ne reprend pas la police de la page par défaut : on la
   pose explicitement. */
#order-online button.ls-reserver {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    cursor: pointer;
    font-family: Boiling, sans-serif;
    font-weight: 500;
    background-color: #d01d1d;
    color: #fff;
    touch-action: manipulation;
    transition: background-color .2s ease;
}
#order-online button.ls-reserver:hover {
    background-color: #b01818;
}
#order-online button.ls-reserver:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Téléphone (même seuil que la barre du thème) : panneau en plein écran, fond bloqué. */
@media (max-width: 690px) {
    #ls-reservation-widget.ls-ouvert {
        inset: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }
    html.ls-panneau-ouvert,
    html.ls-panneau-ouvert body {
        overflow: hidden !important;
    }
}