/* @itZEN-CONFIG  SECURITY=strict  VERSIONING=2025-10-17-SITE-MOBILE-OVERRIDES-v11.R9.10  LOG=enable
 * @itZEN-FILE    FILE=site-mobile-overrides.css | PATH=/assets/css/site-mobile-overrides.css | STATUS=SITE-MOBILE-ONLY
 * @itZEN-ROLE    Mobile UX: bannière FIXE (zones grid + logo ↑, actions à gauche, horaires à droite)
 *                + rail catégories FIXE + footer FIXE + anti-tronquage renforcé
 */

@media (max-width: 768px) {

  .device-mode-siteweb, .category-view {
    /* Z-index */
    --z-site-header: 110;   /* bannière */
    --z-site-rail:   120;   /* menu catégories */
    --z-site-footer: 140;   /* footer panier */

    /* BANNIÈRE (2 rangées) */
    --site-banner-row: clamp(56px, 9.2vw, 72px);
    --site-banner-total: calc(var(--site-banner-row) * 2 + 26px);

    /* RAIL catégories */
    --site-rail-h:   clamp(105px, 14.5vw, 133px);

    /* FOOTER */
    --site-footer-h: clamp(60px, 12vw, 84px);

    /* Offsets & headroom (comme demandé) */
    --site-content-gap:   38px;
    --site-safe-headroom: 74px;
    --site-offset-top:    calc(env(safe-area-inset-top, 0px) + var(--site-banner-total) + var(--site-rail-h));
    --site-offset-bottom: calc(var(--site-footer-h) + env(safe-area-inset-bottom, 0px) + 10px);

    /* Thème */
    --site-bg:      var(--color-bg, #fff);
    --site-fg:      var(--color-fg, #111);
    --site-muted:   var(--color-muted, #6b7280);
    --site-accent:  var(--color-accent, #0a84ff);
    --chip-bg:      var(--color-chip-bg, rgba(0,0,0,0.06));
    --chip-active:  var(--color-chip-active, rgba(0,0,0,0.12));
    --radius:       var(--radius-md, 10px);
  }

  /* ===== Offsets globaux (anti-tronquage) ===== */
  html {
    height: auto !important;
    scroll-padding-top: calc(var(--site-offset-top) + var(--site-content-gap) + var(--site-safe-headroom)) !important;
  }
  .device-mode-siteweb body,
  .category-view body {
    padding-top:  calc(var(--site-offset-top) + var(--site-content-gap) + var(--site-safe-headroom)) !important;
    padding-bottom: var(--site-offset-bottom) !important;
    margin: 0 !important;
  }
  .device-mode-siteweb #kiosk-layout,
  .device-mode-siteweb .kiosk-content,
  .device-mode-siteweb #kiosk-main,
  .device-mode-siteweb main,
  .category-view #kiosk-layout,
  .category-view .kiosk-content,
  .category-view #kiosk-main,
  .category-view main {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: var(--site-offset-bottom) !important;
    overflow: visible !important;
    position: relative; z-index: 1;
  }
  .device-mode-siteweb .kiosk-content::before,
  .category-view .kiosk-content::before,
  .device-mode-siteweb #kiosk-main::before,
  .category-view #kiosk-main::before {
    content: "";
    display: block;
    height: calc(var(--site-content-gap) + var(--site-safe-headroom));
    width: 100%;
  }
  .device-mode-siteweb #kiosk-main > *:first-child,
  .category-view #kiosk-main > *:first-child { margin-top: 0 !important; }

  /* ===================== BANNIÈRE (FIXE + GRID AREAS) ===================== */
  .device-mode-siteweb #kiosk-topbar,
  .category-view #kiosk-topbar { height: 0 !important; position: relative; z-index: var(--z-site-header); }

  .device-mode-siteweb #restaurant-banner,
  .device-mode-siteweb .restaurant-banner,
  .category-view #restaurant-banner,
  .category-view .restaurant-banner {
    position: fixed !important;
    top: env(safe-area-inset-top, 0px); left: 0; right: 0;
    z-index: var(--z-site-header);
    background: var(--site-bg); color: var(--site-fg);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 14px 16px;

    /* Grille robuste : logo | centre | horaires  (2 rangées) */
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "logo identity horaires"
      "logo actions  horaires";
    column-gap: 12px; row-gap: 10px;
    line-height: 1.12;
    overflow: visible !important;
    backdrop-filter: saturate(1.06);
  }

  /* IMPORTANT: rendre les enfants de .banner-right adressables par la grille */
  .device-mode-siteweb #restaurant-banner *[class*="banner-right"],
  .category-view #restaurant-banner *[class*="banner-right"] {
    display: contents !important;
  }

  /* LOGO (plus grand) */
  .device-mode-siteweb #restaurant-banner .banner-left,
  .category-view #restaurant-banner .banner-left {
    grid-area: logo;
    align-self: center;
  }
  .device-mode-siteweb #restaurant-banner .banner-left img,
  .device-mode-siteweb .restaurant-banner .banner-left img,
  .category-view #restaurant-banner .banner-left img,
  .category-view .restaurant-banner .banner-left img,
  /* secours si le logo n'a pas la classe attendue */
  .device-mode-siteweb #restaurant-banner img[alt*="logo" i],
  .category-view #restaurant-banner img[alt*="logo" i] {
    height: 56px !important;       /* ↑ clairement plus grand */
    max-height: 56px !important;
    width: auto !important;
  }

  /* IDENTITÉ (centre, rangée 1) */
  .device-mode-siteweb #restaurant-banner .banner-resto-single,
  .device-mode-siteweb .restaurant-banner .banner-resto-single,
  .category-view #restaurant-banner .banner-resto-single,
  .category-view .restaurant-banner .banner-resto-single {
    grid-area: identity;
    display: flex; gap: 6px; align-items: center;
    min-width: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: clamp(10px, 1.8vw, 11px);
  }
  .device-mode-siteweb #restaurant-banner .banner-resto-single .muted,
  .category-view #restaurant-banner .banner-resto-single .muted { color: var(--site-muted); }

  /* ACTIONS (GAUCHE, rangée 2) */
  .device-mode-siteweb #restaurant-banner .banner-topline,
  .device-mode-siteweb .restaurant-banner .banner-topline,
  .category-view #restaurant-banner .banner-topline,
  .category-view .restaurant-banner .banner-topline,
  /* secours si le nom diffère un peu */
  .device-mode-siteweb #restaurant-banner *[class*="topline"],
  .category-view #restaurant-banner *[class*="topline"] {
    grid-area: actions;
    justify-self: start; align-self: center;
    display: flex !important; flex-wrap: wrap !important; align-items: center;
    column-gap: 8px; row-gap: 6px;
    max-width: 100% !important; min-width: 0 !important;
  }
  .device-mode-siteweb #restaurant-banner .banner-topline > *,
  .category-view #restaurant-banner .banner-topline > *,
  .device-mode-siteweb #restaurant-banner *[class*="topline"] > *,
  .category-view #restaurant-banner *[class*="topline"] > * {
    flex: 0 0 auto; white-space: nowrap;
    padding: 3px 7px; font-size: clamp(9px, 1.6vw, 10.5px); line-height: 1.05;
    color: var(--site-fg); background: var(--chip-bg); border: 1px solid transparent; border-radius: 999px;
  }

  /* HORAIRES (DROITE, rangée 2) */
  .device-mode-siteweb #restaurant-banner .line-horaire,
  .device-mode-siteweb .restaurant-banner .line-horaire,
  .category-view #restaurant-banner .line-horaire,
  .category-view .restaurant-banner .line-horaire,
  /* secours sur nom de classe approchant */
  .device-mode-siteweb #restaurant-banner *[class*="line-hor"],
  .category-view #restaurant-banner *[class*="line-hor"] {
    grid-area: horaires;
    justify-self: end; align-self: center;
    display: grid !important; grid-auto-flow: row !important; grid-row-gap: 6px !important;
    align-items: center !important; justify-items: end !important;
    max-width: 100% !important; min-width: 0 !important;
    font-size: 9px !important; line-height: 1.08 !important;
  }
  .device-mode-siteweb #restaurant-banner .line-horaire .badge-status-box,
  .category-view #restaurant-banner .line-horaire .badge-status-box,
  .device-mode-siteweb #restaurant-banner *[class*="line-hor"] .badge-status-box,
  .category-view #restaurant-banner *[class*="line-hor"] .badge-status-box {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    min-width: 0 !important; white-space: nowrap !important; font-size: 9px !important;
  }
  .device-mode-siteweb #restaurant-banner .line-horaire .badge-status,
  .category-view #restaurant-banner .line-horaire .badge-status,
  .device-mode-siteweb #restaurant-banner *[class*="line-hor"] .badge-status,
  .category-view #restaurant-banner *[class*="line-hor"] .badge-status {
    padding: 2px 6px !important; font-size: 9px !important; line-height: 1 !important;
    border-radius: 10px !important; margin: 0 !important; white-space: nowrap !important;
  }

  /* ===================== MENU CATÉGORIES (FIXE) ===================== */
  .device-mode-siteweb #kiosk-menu,
  .category-view #kiosk-menu {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + var(--site-banner-total)) !important;
    left: 0; right: 0;
    z-index: var(--z-site-rail) !important;
    background: var(--site-bg) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    height: var(--site-rail-h) !important;
    padding: 10px 16px !important;
    display: block !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }
  .device-mode-siteweb #kiosk-menu ul,
  .device-mode-siteweb #kiosk-menu nav,
  .device-mode-siteweb #kiosk-menu .menu,
  .device-mode-siteweb #kiosk-menu .categories,
  .device-mode-siteweb #kiosk-menu .categories-list,
  .category-view #kiosk-menu ul,
  .category-view #kiosk-menu nav,
  .category-view #kiosk-menu .menu,
  .category-view #kiosk-menu .categories,
  .category-view #kiosk-menu .categories-list {
    display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
    gap: 10px !important; margin: 0 !important; padding: 0 !important;
    overflow-x: auto !important; overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important; list-style: none !important;
    height: 100%;
  }
  .device-mode-siteweb #kiosk-menu li, .category-view #kiosk-menu li { list-style: none !important; flex: 0 0 auto !important; }
  .device-mode-siteweb #kiosk-menu a,
  .device-mode-siteweb #kiosk-menu button,
  .device-mode-siteweb #kiosk-menu li > a,
  .category-view #kiosk-menu a,
  .category-view #kiosk-menu button,
  .category-view #kiosk-menu li > a {
    display: inline-flex !important; align-items: center !important; white-space: nowrap !important;
    padding: 10px 14px !important; font-size: clamp(14px, 2.6vw, 16px) !important; line-height: 1.05 !important;
    background: var(--chip-bg) !important; color: var(--site-fg) !important;
    border-radius: calc(var(--radius) - 0px) !important; border: 1px solid transparent !important;
    text-decoration: none !important;
  }
  .device-mode-siteweb #kiosk-menu a.active,
  .device-mode-siteweb #kiosk-menu a[aria-current="true"],
  .category-view #kiosk-menu a.active,
  .category-view #kiosk-menu a[aria-current="true"] {
    background: var(--chip-active) !important; border-color: rgba(0,0,0,0.06) !important;
  }

  /* ===================== FOOTER PANIER (FIXE) ===================== */
  .device-mode-siteweb #kiosk-footer,
  .category-view #kiosk-footer {
    position: fixed !important; left: 0; right: 0; bottom: 0;
    z-index: var(--z-site-footer) !important;
    height: auto;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    background: var(--site-bg);
    border-top: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 -6px 16px rgba(0,0,0,0.08);
  }

  /* ===================== BURGER OFF ===================== */
  .device-mode-siteweb #mobile-burger-button,
  .device-mode-siteweb .kiosk-burger,
  .device-mode-siteweb [data-kiosk-control="burger"],
  .device-mode-siteweb .site-burger,
  .device-mode-siteweb .nav-toggle,
  .device-mode-siteweb button[aria-label="Menu"],
  .category-view #mobile-burger-button,
  .category-view .kiosk-burger,
  .category-view [data-kiosk-control="burger"],
  .category-view .site-burger,
  .category-view .nav-toggle,
  .category-view button[aria-label="Menu"] { display: none !important; }

  /* Accessibilité */
  .device-mode-siteweb :focus-visible, .category-view :focus-visible {
    outline: 2px solid var(--site-accent); outline-offset: 2px;
  }
}