/* ==========================================================================
   KPIZZ - correctif responsive (villedoux.php)  -  v3

   INSTALLATION : charger ce fichier EN DERNIER dans le <head>, après tous les
   <style> et .css existants :
       <link rel="stylesheet" href="/css/kpizz-responsive-fix.css?v=1">

   Pourquoi "#carte#carte" et !important partout : le site empile des dizaines de
   patchs (style.css, lagord.css, ~70 blocs <style> inline, classes html
   kpizz-v509-touch-menu, kpizz-villedoux-popup-fix...) dont certains ont une
   spécificité énorme. Ce fichier gagne sur tous sans les toucher.
   Le desktop (> 980px) n'est PAS modifié pour le header.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1) HEADER (tablette + téléphone uniquement)
   ------------------------------------------------------------------------- */
@media (max-width: 980px) {
  :root { --kpizz-header-h: 80px; --kpizz-page-pad: 12px; }

  html body header {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: var(--kpizz-header-h) !important;
    min-height: 0 !important;
    padding: 0 clamp(12px, 4vw, 42px) !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  html body header .logo,
  html body header .brand-lockup { flex: 0 0 auto !important; min-width: 0 !important; }
  html body header .logo img,
  html body header .brand-lockup img { width: 40px !important; height: 40px !important; }
  html body header .brand-word { font-size: clamp(22px, 3vw, 28px) !important; line-height: 1 !important; }
  html body header nav {
    margin: 0 !important; padding: 0 !important; max-width: none !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    gap: clamp(8px, 1.6vw, 22px) !important;
    flex-wrap: nowrap !important;
  }
  html body header nav > a {
    font-size: clamp(13px, 1.5vw, 16px) !important;
    white-space: nowrap !important;
    padding: 4px 0 !important;
  }
}

/* Téléphone : logo en haut, menu en dessous sur toute la largeur */
@media (max-width: 480px) {
  :root { --kpizz-header-h: 92px; --kpizz-page-pad: 8px; }
  html body header {
    flex-wrap: wrap !important;
    align-content: center !important;
    justify-content: flex-start !important;
    gap: 4px 0 !important;
    padding: 6px 12px !important;
  }
  html body header .logo,
  html body header .brand-lockup { flex: 0 0 100% !important; }
  html body header .logo img,
  html body header .brand-lockup img { width: 34px !important; height: 34px !important; }
  html body header .brand-word { font-size: 22px !important; }
  html body header nav {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }
  html body header nav > a { font-size: clamp(12.5px, 3.7vw, 15px) !important; }
}
@media (max-width: 360px) {
  html body header nav { gap: 4px !important; }
  html body header nav > a { font-size: 11px !important; }
}

/* -------------------------------------------------------------------------
   1b) HERO / FICHE PDV - téléphone
   Le contenu doit rester strictement dans la largeur du viewport.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  html, html body, html body .lagord-page,
  html body .container,
  html body .container.hero-stack,
  html body .hero-photo,
  html body .hero-card,
  html body .hero-main,
  html body .hero-copy,
  html body .hero-title-row,
  html body .quick-points {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body .container.hero-stack {
    width: calc(100% - 12px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body .hero-photo {
    width: 100% !important;
    overflow: hidden !important;
  }

  html body .hero-photo > img {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: clamp(190px, 58vw, 240px) !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
  }

  html body .hero-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 14px !important;
  }

  html body .hero-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  html body .hero-copy {
    min-width: 0 !important;
    width: 100% !important;
  }

  html body .hero-title-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    gap: 8px !important;
  }

  html body .hero-title-row h1,
  html body .hero-copy h1,
  html body .hero-title-row h1 span {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  html body .hero-title-row h1,
  html body .hero-copy h1 {
    width: 100% !important;
    font-size: clamp(1.9rem, 9vw, 2.45rem) !important;
    line-height: 1.02 !important;
  }

  html body .hero-address {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  html body .quick-points {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    overflow: visible !important;
  }

  html body .quick-points > a,
  html body .quick-points > span {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
  }
}

/* -------------------------------------------------------------------------
   2) CARTE - grille des pizzas (carrousel horizontal, cartes lisibles)
        < 720px   : 1 carte + aperçu de la suivante
        720-999   : cartes de 350px (on glisse)
        1000-1199 : 2 cartes visibles
        >= 1200   : 3 cartes visibles
      La carte garde TOUJOURS la proportion de la carte d'origine (photo 38 %,
      texte 62 %) : textes, prix et boutons se calent sur la largeur de la carte
      (unités cqw), avec un plancher pour rester lisibles sur téléphone.
   ------------------------------------------------------------------------- */
html body #carte#carte .pizza-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 6px 4px 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

html body #carte#carte .pizza-card {
  flex: 0 0 max(284px, min(93%, 420px)) !important;
  width: max(284px, min(93%, 420px)) !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 38.4% minmax(0, 1fr) !important;   /* proportion de la carte d'origine : photo 168 / 438 */
  gap: 6px !important;
  padding: 10px !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  container-type: inline-size !important;   /* tout l'intérieur se cale sur la largeur de la carte (cqw) */
}
@media (min-width: 720px) and (max-width: 999px) {
  html body #carte#carte .pizza-card { flex-basis: 350px !important; width: 350px !important; }
}
@media (min-width: 1000px) {
  html body #carte#carte .pizza-card {
    flex-basis: calc((100% - 12px) / 2) !important;
    width: calc((100% - 12px) / 2) !important;
  }
}
@media (min-width: 1200px) {
  html body #carte#carte .pizza-card {
    flex-basis: calc((100% - 24px) / 3) !important;
    width: calc((100% - 24px) / 3) !important;
  }
}

/* photo (demi-pizza) : même proportion que la carte d'origine, alignée à gauche */
html body #carte#carte .pizza-card > img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 2.05 !important;
  object-fit: contain !important;
  object-position: left center !important;
  align-self: center !important;
  margin: 0 !important;
  transform: none !important;
}

/* colonne texte : titre + description en haut, tailles/prix + bouton en bas */
html body #carte#carte .pizza-card .pizza-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 4px 0 0 !important;
}
html body #carte#carte .pizza-card .pizza-info h4 {
  font-size: max(16px, 3.65cqw) !important;
  line-height: 1.2 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
}
html body #carte#carte .pizza-card .pizza-info p {
  font-size: max(12.5px, 2.9cqw) !important;
  line-height: 1.35 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  overflow-wrap: anywhere;
}

/* Nutri | taille | prix : ne dépasse jamais de la carte */
html body #carte#carte .pizza-card .pizza-price {
  display: grid !important;
  grid-template-columns: auto auto auto !important;
  justify-content: center !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 6px 8px !important;
  margin: auto 0 8cqw !important;
  min-height: 0 !important;
  height: auto !important;
}
html body #carte#carte .pizza-card .pizza-price .kpizz-pizza-nutri-inline {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: auto !important;
  min-width: 30px !important;
  height: auto !important;
  justify-self: start !important;
}
html body #carte#carte .pizza-card .pizza-price .size-badge {
  grid-column: 2 !important;
  width: auto !important;
  min-width: max(56px, 16cqw) !important;
  max-width: 100% !important;
  height: max(34px, 9.5cqw) !important;
  padding: 0 8px !important;
  justify-self: start !important;
  font-size: max(12.5px, 2.75cqw) !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
html body #carte#carte .pizza-card .pizza-price .price-value {
  grid-column: 3 !important;
  width: auto !important;
  height: auto !important;
  justify-self: end !important;
  text-align: right !important;
  font-size: max(14px, 3cqw) !important;
  white-space: nowrap !important;
}
html body #carte#carte .pizza-card .kpizz-nutri-chip {
  width: max(30px, 7.1cqw) !important;
  height: max(30px, 7.1cqw) !important;
  font-size: max(15px, 3.3cqw) !important;
}
@container (max-width: 270px) {
  html body #carte#carte .pizza-card .pizza-price { margin: auto 0 !important; }
}

html body #carte#carte .pizza-card .kpizz-pizza-nutri-label { font-size: max(9px, 2.1cqw) !important; }

/* bouton allergènes */
html body #carte#carte .pizza-card .kpizz-allergen-btn {
  width: 100% !important;
  font-size: max(13px, 2.4cqw) !important;
  min-height: max(38px, 9cqw) !important;
  height: auto !important;
  margin: 4px 0 0 !important;
  box-sizing: border-box !important;
}

/* -------------------------------------------------------------------------
   3) Paddings du bloc menu réduits sur petits écrans (plus de place utile)
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  html body #carte#carte.full-menu { padding-left: 8px !important; padding-right: 8px !important; }
  html body #carte#carte .menu-category { margin-left: 0 !important; margin-right: 0 !important; padding: 14px 8px !important; }
}

/* -------------------------------------------------------------------------
   4) Blocs d'info du menu (Suppléments, Produits surgelés, Les plus KPIZZ...)
      autant de colonnes que la place le permet (3 desktop / 2 tablette / 1 mobile)
   ------------------------------------------------------------------------- */
html body #carte#carte .kpizz-menu-info-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  gap: 14px !important;
}
html body #carte#carte .kpizz-menu-info-card {
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
   5) Bloc Horaires / Photos boutique : empilé sur téléphone
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  html body #contact#contact.dual-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html body #contact#contact.dual-grid > * { min-height: 0 !important; height: auto !important; align-self: start !important; }
}

/* Boissons / glaces : 2 colonnes lisibles sur téléphone (au lieu de 3 trop étroites) */
@media (max-width: 480px) {
  html body #carte#carte .menu-block.product-block { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* -------------------------------------------------------------------------
   6) Sécurité : jamais de scroll horizontal de la page
   ------------------------------------------------------------------------- */
html body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html body { overflow-x: clip; } }

/* V658 : verrou du document racine sur téléphone/tablette.
   Ne touche pas aux carrousels internes (.pizza-grid), qui gardent overflow-x:auto. */
@media (max-width: 1100px) {
  html {
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    overscroll-behavior-x:none !important;
  }
  body {
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    overscroll-behavior-x:none !important;
  }
  @supports (overflow: clip) {
    html, body { overflow-x:clip !important; }
  }
}
html body img, html body video, html body iframe { max-width: 100%; }

/* KPIZZ — défilement fluide des pizzas (carrousel .pizza-grid) */

/* 1. Carrousel préparé par le navigateur (rendu anticipé, inertie tactile) */
html body #carte .menu-category .pizza-grid {
  will-change: scroll-position !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
}

/* 2. Ombre des cartes plus légère (le .pizza-card répété sert à battre les anciens !important) */
html body #carte .menu-category .pizza-grid > .pizza-card.pizza-card.pizza-card.pizza-card.pizza-card.pizza-card.pizza-card.pizza-card.pizza-card.pizza-card.pizza-card.pizza-card {
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22), 0 2px 5px rgba(0, 0, 0, .12) !important;
  backface-visibility: hidden;
}

/* 3. En-tête : suppression du flou d'arrière-plan (fond déjà à 97 % opaque) */
html body header {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
