/* Police titres pinceau "VTC Scream It Loud" (Vigilante Typeface Corp, Distro-Ware = libre
   commercial, redistribution web OK, cf fonts/VTC-LICENSE.txt). Accents remappes sur lettre
   de base (police US 1999 sans accents) -> titres coherents. Utilisee UNIQUEMENT par les restos
   dont theme.fonts.display = "VTC Scream It Loud" (ex: Pouletos). */
@font-face{
  font-family:"VTC Scream It Loud";
  src:url('../fonts/vtc-scream-sliced-italic-fr.ttf') format("truetype");
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}

/* ============================================================================
   DINEORA — ameliorations reservation / pickers / boutons (reutilisable)
   3 niveaux de portee :
     html.pdi-enh        -> UNIVERSEL, tous les restos (correctif flash, flatpickr,
                            demande 1 ligne, polices, statut visible, boutons +grands)
     html.pdi-resa-panel -> formulaire "panneau" (champs dans les slots d'une image).
                            Active pour Pouletos (URL) ou via config media.reservationPanelBg.
                            L'image vient de --pdi-resa-panel-bg (defaut = board Pouletos).
     html.resto-pouletos -> reglages SPECIFIQUES a Pouletos (decalages de boutons)
   ============================================================================ */

/* ============== UNIVERSEL (html.pdi-enh) ============== */

/* "Demande speciale" sur une seule ligne (pas de retour a la ligne en paragraphe) */
html.pdi-enh .pdi-reservation-form .pdi-field textarea{ white-space:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important; resize:none !important; }

/* Polices du site appliquees au formulaire */
html.pdi-enh .pdi-reservation-form .pdi-field > span{ font-family:var(--t-font-nav,var(--t-font-display,inherit)) !important; }
html.pdi-enh .pdi-reservation-form .pdi-field input,
html.pdi-enh .pdi-reservation-form .pdi-field textarea{ font-family:var(--t-font-body,inherit) !important; }

/* Statut reservation = encart visible au centre (sinon "rien n'arrive" au clic) */
html.pdi-enh .pdi-reservation-form{ position:relative; }
html.pdi-enh .pdi-reservation-status:not(:empty){ position:fixed !important; top:auto !important; bottom:24px !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; width:min(92vw,520px) !important; z-index:2147483647 !important; pointer-events:none !important; background:rgba(18,12,6,.98) !important; color:#fff6df !important; padding:18px 22px !important; border-radius:12px !important; border:1px solid rgba(219,169,79,.55) !important; font-size:16px !important; font-weight:600 !important; box-shadow:0 14px 50px rgba(0,0,0,.6) !important; text-align:center !important; font-family:var(--t-font-body,inherit) !important; }
html.pdi-enh .pdi-reservation-status .pdi-reservation-actions a{ pointer-events:auto !important; display:inline-block; margin:8px 6px 0; padding:9px 18px; background:var(--pdi-accent,#c75e16); color:var(--pdi-cream,#fff6df); border-radius:4px; text-decoration:none; font-weight:700; }

/* Boutons d'action (menu / commander / reserver) plus grands (x1.625) */
html.pdi-enh .pdi-menu-action,
html.pdi-enh .pdi-menu-action-order,
html.pdi-enh .pdi-menu-action-reserve,
html.pdi-enh .pdi-commander-cta,
html.pdi-enh .pdi-details-commander-cta,
html.pdi-enh .pdi-order-cta,
html.pdi-enh .pdi-resa-cta,
html.pdi-enh .pdi-desktop-menu-cta{ transform:scale(1.625) !important; transform-origin:center !important; }
/* Bouton MENU du menu-prix : garde son centrage (translateX -50%) + agrandi, sur TOUS les sites (live + futurs) */
html.pdi-enh .pdi-menu-commander-cta{ transform:translateX(-50%) scale(1.625) !important; transform-origin:center !important; }

/* ── ESPACEMENT/POSITION des boutons image (fix 08/07, tous sites présents et futurs) ──
   Le scale() ne change PAS la taille layout : les PNG scalés se chevauchaient.
   1) Rangée MENU/RÉSERVATION (section carte) : les 2 boutons se chevauchaient de ~56px
      (gap 14px calculé pré-transform). Gap élargi pour ~26px d'air VISUEL post-scale,
      et boutons légèrement agrandis (1.625 → 1.75) pour mieux occuper la colonne. */
html.pdi-enh .pdi-menu-cta-row,
html.pdi-enh #menu-details .pdi-menu-cta-row,
html.pdi-enh #menu-details.pdi-menu-scroll-section .pdi-menu-cta-row{ gap: clamp(100px, 8.5vw, 120px) !important; }
html.pdi-enh .pdi-menu-cta-row .pdi-details-commander-cta,
html.pdi-enh .pdi-menu-cta-row .pdi-menu-action,
html.pdi-enh .pdi-menu-cta-row .pdi-menu-action-order,
html.pdi-enh .pdi-menu-cta-row .pdi-menu-action-reserve{ transform: scale(1.75) !important; transform-origin:center !important; }
/*  2) Bouton de la carte « L'esprit maison » (.pdi-resa-cta) : origin center le faisait
      déborder de ~87px À GAUCHE du bloc texte et chevaucher le paragraphe de ~13px.
      Ancré en haut-gauche → aligné avec le texte, tout le débord part vers le bas/droite
      où il y a de l'espace. */
html.pdi-enh .pdi-resa-cta{ transform-origin: left top !important; margin-top: 30px !important; }

/* ── HOVER des boutons MENU/RÉSERVATION (fix 09/07, tous sites) : SUPPRIME l'effet
   « réduction » (des :hover posaient transform:none/scale(1.012) !important → le bouton
   retombait de ×1.75/1.625 à ×1 au survol) et applique l'effet CHROMA du template
   (brightness + drop-shadow doré + léger lift), taille CONSERVÉE. ── */
html.pdi-enh .pdi-menu-cta-row .pdi-details-commander-cta:hover,
html.pdi-enh #menu-details.pdi-menu-scroll-section .pdi-menu-cta-row .pdi-menu-action:hover,
html.pdi-enh #menu-details.pdi-menu-scroll-section .pdi-menu-cta-row .pdi-menu-action-order:hover,
html.pdi-enh #menu-details.pdi-menu-scroll-section .pdi-menu-cta-row .pdi-menu-action-reserve:hover{
  transform: scale(1.75) translateY(-2px) !important;
  filter: invert(1) hue-rotate(180deg) !important;
}
/* MENU de la carte « L'esprit maison » (garde l'ancrage left top) */
html.pdi-enh .pdi-resa-cta:hover{
  transform: scale(1.625) translateY(-2px) !important;
  filter: invert(1) hue-rotate(180deg) !important;
}
/* MENU de la nav desktop : remplace l'ancien invert/hue-rotate par le chroma */
html.pdi-enh:not(.resto-pouletos) .pdi-desktop-menu-cta:hover{
  transform: scale(1.625) translateY(-1px) !important;
  filter: invert(1) hue-rotate(180deg) !important;
}
html.resto-pouletos .pdi-desktop-menu-cta:hover{
  transform: translateX(-30px) scale(1.625) translateY(-1px) !important;
  filter: invert(1) hue-rotate(180deg) !important;
}
html.pdi-enh .pdi-desktop-menu-cta:hover img{ filter: none !important; transform: none !important; }
/* MENU du menu-prix : le hover chroma existait mais avec scale(1.012) → shrink. Taille gardée. */
html.pdi-enh .pdi-menu-commander-cta:hover{
  transform: translateX(-50%) scale(1.625) translateY(-2px) !important;
  filter: invert(1) hue-rotate(180deg) !important;
}
/* transition douce commune */
html.pdi-enh .pdi-menu-cta-row .pdi-details-commander-cta,
html.pdi-enh .pdi-menu-cta-row .pdi-menu-action,
html.pdi-enh .pdi-menu-cta-row .pdi-menu-action-order,
html.pdi-enh .pdi-menu-cta-row .pdi-menu-action-reserve,
html.pdi-enh .pdi-resa-cta,
html.pdi-enh .pdi-desktop-menu-cta,
html.pdi-enh .pdi-menu-commander-cta{
  transition: transform .22s ease, filter .22s ease !important;
}

/* ── MOBILE (fix 09/07) : les scales desktop débordaient du viewport.
   Mesuré sur 390px : row MENU/RÉSERVATION scale 1.75 → -26px à gauche/+12px à droite ;
   menu-commander gardait le translateX(-50%) desktop alors qu'il est en FLUX en mobile
   → décalé de -72px hors écran. Scales réduits + centrage layout, hovers alignés. ── */
@media (max-width: 991px){
  html.pdi-enh .pdi-menu-cta-row,
  html.pdi-enh #menu-details .pdi-menu-cta-row,
  html.pdi-enh #menu-details.pdi-menu-scroll-section .pdi-menu-cta-row{ gap: 56px !important; }
  html.pdi-enh .pdi-menu-cta-row .pdi-details-commander-cta,
  html.pdi-enh .pdi-menu-cta-row .pdi-menu-action,
  html.pdi-enh .pdi-menu-cta-row .pdi-menu-action-order,
  html.pdi-enh .pdi-menu-cta-row .pdi-menu-action-reserve{ transform: scale(1.4) !important; }
  html.pdi-enh .pdi-menu-cta-row .pdi-details-commander-cta:hover,
  html.pdi-enh #menu-details.pdi-menu-scroll-section .pdi-menu-cta-row .pdi-menu-action:hover,
  html.pdi-enh #menu-details.pdi-menu-scroll-section .pdi-menu-cta-row .pdi-menu-action-order:hover,
  html.pdi-enh #menu-details.pdi-menu-scroll-section .pdi-menu-cta-row .pdi-menu-action-reserve:hover{
    transform: scale(1.4) translateY(-2px) !important;
  }
  html.pdi-enh .pdi-menu-commander-cta{
    transform: scale(1.15) !important; transform-origin: center !important;
    display: block !important; margin-inline: auto !important; left: auto !important;
  }
  html.pdi-enh .pdi-menu-commander-cta:hover{
    transform: scale(1.15) translateY(-2px) !important;
  }
}

/* Flatpickr (date/heure) themé sur la palette du resto + police du site */
html.pdi-enh .flatpickr-calendar{ font-family:var(--t-font-body,system-ui,sans-serif) !important; background:var(--pdi-panel,#1b1510) !important; border:1px solid var(--pdi-line,rgba(219,169,79,.55)) !important; box-shadow:0 14px 46px rgba(0,0,0,.55) !important; border-radius:12px !important; }
html.pdi-enh .flatpickr-calendar.arrowTop:before,html.pdi-enh .flatpickr-calendar.arrowTop:after{ border-bottom-color:var(--pdi-panel,#1b1510) !important; }
html.pdi-enh .flatpickr-calendar.arrowBottom:before,html.pdi-enh .flatpickr-calendar.arrowBottom:after{ border-top-color:var(--pdi-panel,#1b1510) !important; }
html.pdi-enh .flatpickr-months,html.pdi-enh .flatpickr-month,html.pdi-enh .flatpickr-weekdays,html.pdi-enh span.flatpickr-weekday,html.pdi-enh .flatpickr-time{ background:var(--pdi-panel,#1b1510) !important; }
html.pdi-enh .flatpickr-current-month,html.pdi-enh .flatpickr-current-month input.cur-year,html.pdi-enh .flatpickr-monthDropdown-months{ color:var(--pdi-cream,#f3e6c7) !important; font-family:var(--t-font-body,inherit) !important; }
html.pdi-enh span.flatpickr-weekday{ color:var(--pdi-gold,#d4a054) !important; }
html.pdi-enh .flatpickr-months .flatpickr-prev-month svg,html.pdi-enh .flatpickr-months .flatpickr-next-month svg{ fill:var(--pdi-gold,#d4a054) !important; }
html.pdi-enh .flatpickr-months .flatpickr-prev-month:hover svg,html.pdi-enh .flatpickr-months .flatpickr-next-month:hover svg{ fill:var(--pdi-accent,#d4652a) !important; }
html.pdi-enh .flatpickr-day{ color:var(--pdi-cream,#f3e6c7) !important; }
html.pdi-enh .flatpickr-day:hover,html.pdi-enh .flatpickr-day:focus{ background:rgba(255,255,255,.08) !important; border-color:transparent !important; }
html.pdi-enh .flatpickr-day.today{ border-color:var(--pdi-gold,#d4a054) !important; }
html.pdi-enh .flatpickr-day.selected,html.pdi-enh .flatpickr-day.selected:hover{ background:var(--pdi-accent,#d4652a) !important; border-color:var(--pdi-accent,#d4652a) !important; color:#fff !important; }
html.pdi-enh .flatpickr-day.flatpickr-disabled,html.pdi-enh .flatpickr-day.prevMonthDay,html.pdi-enh .flatpickr-day.nextMonthDay{ color:rgba(243,230,199,.35) !important; }
html.pdi-enh .flatpickr-time input,html.pdi-enh .flatpickr-time .flatpickr-am-pm{ color:var(--pdi-cream,#f3e6c7) !important; font-family:var(--t-font-body,inherit) !important; }
html.pdi-enh .flatpickr-time input:hover,html.pdi-enh .flatpickr-time input:focus,html.pdi-enh .flatpickr-time .flatpickr-am-pm:hover{ background:rgba(255,255,255,.08) !important; }
html.pdi-enh .numInputWrapper span.arrowUp:after{ border-bottom-color:var(--pdi-gold,#d4a054) !important; }
html.pdi-enh .numInputWrapper span.arrowDown:after{ border-top-color:var(--pdi-gold,#d4a054) !important; }


/* ============== FORMULAIRE "PANNEAU" (html.pdi-resa-panel) ============== */
/* Le board vient de --pdi-resa-panel-bg (defaut = board Pouletos). Les slots sont
   calibres sur un board au gabarit standard (1024x1536, 1 slot large + 3x2). */
html.pdi-resa-panel .pdi-reservation-form{
  position:relative !important; isolation:isolate;
  display:block !important; width:100% !important; max-width:480px !important; margin:0 auto !important;
  aspect-ratio:1024/1536 !important;
  padding:0 !important; border:0 !important; border-radius:0 !important; overflow:visible !important;
  background:var(--pdi-resa-panel-bg, url('https://dineora.b-cdn.net/template-assets/ChatGPT%20Image%2030%20juin%202026%2C%2015_03_10-Photoroom.png')) center/100% 100% no-repeat !important;
  box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
html.pdi-resa-panel .pdi-reservation-form::before,
html.pdi-resa-panel .pdi-reservation-form::after{display:none !important;}
html.pdi-resa-panel .pdi-reservation-form .pdi-field{position:absolute !important; display:block !important; gap:0 !important; margin:0 !important; z-index:2;}
html.pdi-resa-panel .pdi-reservation-form .pdi-field > span{
  display:block !important; position:absolute !important; left:3% !important; bottom:101% !important;
  margin:0 0 4px 0 !important; color:#4a3216 !important; font-weight:700 !important;
  font-size:clamp(9px,0.95vw,12px) !important; letter-spacing:.12em !important; text-transform:uppercase !important;
  text-shadow:0 1px 0 rgba(255,255,255,.35) !important; white-space:nowrap !important; z-index:3;
}
html.pdi-resa-panel .pdi-reservation-form .pdi-field input,
html.pdi-resa-panel .pdi-reservation-form .pdi-field textarea{
  box-sizing:border-box !important;
  width:100% !important; height:100% !important; min-height:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
  padding:0 7% !important; margin:0 !important; color:#3c2c18 !important; font-weight:700 !important;
  font-size:clamp(11px,1.05vw,15px) !important; text-align:left !important; -webkit-appearance:none; appearance:none;
}
html.pdi-resa-panel .pdi-reservation-form .pdi-field textarea{ line-height:1.4 !important; align-content:center !important; }
html.pdi-resa-panel .pdi-reservation-form .pdi-field input::placeholder,
html.pdi-resa-panel .pdi-reservation-form .pdi-field textarea::placeholder{color:rgba(90,68,40,.6) !important;}
html.pdi-resa-panel .pdi-reservation-form .pdi-field-full{left:14.5%; top:22%;   width:64.6%; height:7.4%;}
html.pdi-resa-panel .pdi-reservation-form label.pdi-field:nth-of-type(2){left:14.5%; top:36.8%; width:29.7%; height:7.4%;}
html.pdi-resa-panel .pdi-reservation-form label.pdi-field:nth-of-type(3){left:47.5%; top:36.8%; width:31.8%; height:7.4%;}
html.pdi-resa-panel .pdi-reservation-form label.pdi-field:nth-of-type(4){left:14.5%; top:50.5%; width:29.7%; height:7.4%;}
html.pdi-resa-panel .pdi-reservation-form label.pdi-field:nth-of-type(5){left:47.5%; top:50.5%; width:31.8%; height:7.4%;}
html.pdi-resa-panel .pdi-reservation-form label.pdi-field:nth-of-type(6){left:14.5%; top:64.9%; width:29.7%; height:7.6%;}
html.pdi-resa-panel .pdi-reservation-form label.pdi-field:nth-of-type(7){left:47.5%; top:64.9%; width:31.1%; height:7.6%;}
html.pdi-resa-panel .pdi-reservation-form .pdi-reservation-submit{position:absolute !important; left:50% !important; top:83% !important; transform:translateX(-50%) !important; width:54% !important; margin:0 !important;}
/* Robustesse clics : champs + bouton toujours cliquables, au-dessus du board */
html.pdi-resa-panel .pdi-reservation-form .pdi-field{ pointer-events:auto !important; z-index:5 !important; }
html.pdi-resa-panel .pdi-reservation-form .pdi-field input,
html.pdi-resa-panel .pdi-reservation-form .pdi-field textarea,
html.pdi-resa-panel .pdi-reservation-form .pdi-field select{ pointer-events:auto !important; cursor:pointer; }
html.pdi-resa-panel .pdi-reservation-form .pdi-reservation-submit{ pointer-events:auto !important; z-index:10 !important; cursor:pointer; overflow:visible !important; visibility:visible !important; opacity:1 !important; }
/* Zone cliquable etendue de 50px vers le bas (le bouton a une hauteur fixe, on etend via ::after transparent, sans deformer le visuel) */
html.pdi-resa-panel .pdi-reservation-form .pdi-reservation-submit::after{ content:'' !important; position:absolute !important; left:0 !important; right:0 !important; top:30px !important; bottom:-50px !important; z-index:1 !important; }
html.pdi-resa-panel .flatpickr-calendar{ z-index:100000 !important; }
/* Taille du panneau : desktop 933px (=1120px @80% zoom = 1400px CSS h), mobile 129vw + centrage/decalage */
@media (min-width:768px){
  html.pdi-resa-panel .pdi-reservation-form{ max-width:933px !important; }
  html.pdi-resa-panel .pdi-reservation-form .pdi-reservation-submit{ width:70% !important; transform:translate(-50%,-50px) !important; z-index:6 !important; pointer-events:auto !important; }
}
@media (max-width:767px){
  html.pdi-resa-panel .pdi-reservation-form{ width:129vw !important; max-width:129vw !important; margin-left:calc(50% - 64.5vw + 15px) !important; margin-right:calc(50% - 64.5vw - 15px) !important; }
  html.pdi-resa-panel .pdi-reservation-content{ overflow-x:clip !important; }
  html.pdi-resa-panel .pdi-reservation-form .pdi-reservation-submit{ transform:translate(-50%,-35px) !important; z-index:6 !important; pointer-events:auto !important; }
}
@media (min-width:992px){ html.pdi-resa-panel .pdi-reservation-layout{ grid-template-columns:minmax(0,1fr) minmax(360px,720px) !important; gap:clamp(32px,4vw,72px) !important; } }
/* Le formulaire 933px depasse sa colonne (720) SANS retrecir la colonne texte : on le laisse deborder centre sur sa colonne */
@media (min-width:992px){ html.pdi-resa-panel .pdi-reservation-form{ width:933px !important; max-width:933px !important; margin-left:calc(50% - 466.5px) !important; margin-right:calc(50% - 466.5px) !important; } html.pdi-resa-panel .pdi-reservation-content{ overflow:visible !important; } }
/* PAS de pin/sticky : le formulaire fait ~1080px (plus haut que l'ecran). Epingle (sticky top:0),
   son bas — donc la moitie basse du bouton — restait SOUS le pli, d'ou "seule une petite bande du
   bouton est cliquable". En scroll normal, l'utilisateur peut amener le bouton entier a l'ecran. */
@media (min-width:992px){ html.pdi-enh .pdi-reservation-video-section .pdi-reservation-content{ position:static !important; top:auto !important; } }
/* CAUSE RACINE du "seule une petite zone du bouton reagit (survol + clic)" :
   la carte flottante decorative .pdi-resa-card (texte + image composite, animation-kit.js)
   reste a opacity:0 hors de sa plage de scroll MAIS sa boite recouvre le bouton/champs, et
   opacity:0 ne coupe PAS les pointer-events -> elle captait survol + clics a la place du bouton.
   Elle est 100% decorative -> transparente aux evenements. Corrige aussi desktop ET mobile. */
html.pdi-enh .pdi-resa-card, html.pdi-enh .pdi-resa-card *{ pointer-events:none !important; }
/* …MAIS le contenu GAUCHE de la carte (titre "L'esprit maison", texte, bouton MENU) doit rester
   interactif : le pointer-events:none global rendait le CTA MENU incliquable et les textes
   insélectionnables (bug signalé 08/07). .pdi-resa-left ne recouvre PAS le formulaire réservation
   (vérifié : boîtes disjointes), donc on réactive les événements dessus sans ressusciter le bug
   du bouton submit. L'image composite décorative reste transparente aux événements. */
html.pdi-enh .pdi-resa-left, html.pdi-enh .pdi-resa-left *{ pointer-events:auto !important; }
html.pdi-enh .pdi-resa-composite{ pointer-events:none !important; }
/* Ma couche de clic dediee n'est plus necessaire et bloquait le survol du bouton -> desactivee. */
html.pdi-enh .pdi-resa-hitlayer{ display:none !important; }


/* ============== SPECIFIQUE POULETOS (html.resto-pouletos) ============== */
/* Decalages de boutons cales sur la mise en page de Pouletos */
html.resto-pouletos .pdi-desktop-menu-cta{ transform:translateX(-30px) scale(1.625) !important; transform-origin:center !important; }
/* (bouton MENU menu-prix : desormais CENTRE universellement via html.pdi-enh plus haut — plus de decalage specifique Pouletos) */

/* ── LABELS du formulaire reservation ("NOM COMPLET", "TELEPHONE", "EMAIL", "DATE"…) =
   les "titres des rubriques" du user (09/07 ; mal compris en 1re passe comme les
   categories du menu commande, corrige). Contour BLANC = lisibilite du label brun sur
   les zones sombres du board (redrooster/pouletos…) ET clair ; + monte 3px / decale 7px
   a DROITE en DESKTOP uniquement. Le label est display:block absolute → transform OK. ── */
html.pdi-resa-panel .pdi-reservation-form .pdi-field > span{
  text-shadow:
    -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,
    0 0 2px #fff, 0 2px 6px rgba(0,0,0,.5) !important;
}
/* Decalages demandes (10/07) — DESKTOP + MOBILE :
   labels rubriques +60px droite ; label NOM COMPLET (champ large) +200px ;
   texte des reponses (saisie + placeholder) +50px via padding (la zone de clic
   reste calee sur la case peinte, seul le texte se decale). */
html.pdi-resa-panel .pdi-reservation-form .pdi-field > span{
  transform: translate(60px, -3px) !important;
}
html.pdi-resa-panel .pdi-reservation-form .pdi-field-full > span{
  transform: translate(200px, -3px) !important;
}
/* Reponses CENTREES dans les cases (10/07 : "elles se mettent au milieu directement") */
html.pdi-resa-panel .pdi-reservation-form .pdi-field input,
html.pdi-resa-panel .pdi-reservation-form .pdi-field textarea{
  padding: 0 4% !important;
  text-align: center !important;
}

/* ── BANDE RÉSERVÉE pour le CTA MENU de la section menu (identity.menuCtaBelowStage) ──
   L'overlay absolu couvrait le contenu cuit de l'artwork quand celui-ci n'a pas de slot
   vide (redrooster : l'adresse du bandeau livraison). Le JS déplace le bouton dans une
   bande de flux à lui, insérée après la scène menu : superposition impossible, sur
   n'importe quel artwork. Largeur = taille visuelle d'avant (clamp × 1.625), les
   transforms scale/translate des règles historiques sont neutralisés ici. */
html.pdi-menucta-strip .pdi-menu-cta-strip{
  display:flex; justify-content:center; align-items:center;
  padding: clamp(18px, 2.6vw, 40px) 0;
  position:relative; z-index:5;
}
html.pdi-menucta-strip .pdi-menu-cta-strip .pdi-menu-commander-cta{
  position:static !important;
  transform:none !important;
  left:auto !important; bottom:auto !important;
  width: min(clamp(390px, 29vw, 549px), 88vw) !important;
  min-height: clamp(114px, 8.5vw, 161px) !important;
}
html.pdi-menucta-strip .pdi-menu-cta-strip .pdi-menu-commander-cta:hover{
  transform: translateY(-2px) scale(1.02) !important;
}


/* ── CTA MENU "drop-in" (identity.menuCtaDropIn) : le bouton arrive RELEVÉ de 150px,
   puis TOMBE graduellement (1.3s) 60px PLUS BAS que sa position d'origine quand le
   bandeau livraison entre dans l'écran (classe .pdi-cta-landed posée au scroll).
   Une fois posé il déborde sur la section suivante → la scène menu passe AU-DESSUS
   (z-index + overflow visible) pour que le bouton recouvre l'image d'après.
   Mobile : MÊME mécanisme en overlay absolu (la rangée en flux dédiée est supprimée). */
/* AUCUN crop : toute la chaîne d'ancêtres du bouton laisse déborder (le clip venait de
   .menu-sticky-section/.pin-spacer en overflow:hidden, pas seulement de la stage), et la
   pile passe AU-DESSUS de la section suivante. */
html.pdi-cta-dropin .menu-library-stage,
html.pdi-cta-dropin .pin-spacer,
html.pdi-cta-dropin .menu-sticky-section{ overflow: visible !important; }
/* z-index 25 : DOIT être au-dessus de la section RÉSERVATION (z20, montée pour que SON
   bouton flotte sur le footer) — sinon la section résa recouvrait le bouton MENU qui
   descend dedans (bug "bouton clippé"). */
html.pdi-cta-dropin .menu-library-stage{ position: relative; z-index: 25 !important; }
html.pdi-cta-dropin .pin-spacer{ position: relative; z-index: 25 !important; }
html.pdi-cta-dropin .menu-sticky-section{ position: relative; z-index: 25 !important; }
html.pdi-cta-dropin .pdi-menu-commander-cta{ z-index: 30 !important; }
/* la transition ne s'active qu'APRÈS le premier paint (classe pdi-cta-anim posée par le
   moteur ~120ms après l'init) : sans ça, la première application du transform anime
   depuis la position pré-init → glissade en DIAGONALE au chargement */
html.pdi-cta-dropin .menu-sticky-section .pdi-menu-commander-cta,
html.pdi-cta-dropin .pdi-menu-commander-cta{ transition: none !important; }
html.pdi-cta-dropin.pdi-cta-anim .menu-sticky-section .pdi-menu-commander-cta,
html.pdi-cta-dropin.pdi-cta-anim .pdi-menu-commander-cta{
  transition: transform 1.3s cubic-bezier(.22, .9, .32, 1.04) !important;
}
@media (min-width: 992px){
  html.pdi-cta-dropin .pdi-menu-commander-cta{
    transform: translateX(-50%) translateY(-150px) scale(1.625) !important;
  }
  html.pdi-cta-dropin .pdi-menu-commander-cta:not(.pdi-cta-landed):hover{
    transform: translateX(-50%) translateY(-150px) scale(1.625) !important;
    filter: invert(1) hue-rotate(180deg) !important;
  }
  html.pdi-cta-dropin .pdi-menu-commander-cta.pdi-cta-landed{
    transform: translateX(-50%) translateY(60px) scale(1.625) !important;
  }
  html.pdi-cta-dropin .pdi-menu-commander-cta.pdi-cta-landed:hover{
    transform: translateX(-50%) translateY(58px) scale(1.625) !important;
    filter: invert(1) hue-rotate(180deg) !important;
  }
}
@media (max-width: 991px){
  /* overlay absolu centré (remplace la rangée en flux "bande dédiée"), même chute que
     desktop. Ancrage REMONTÉ (bottom 80px) : posé, le bouton chevauche le CONTENU du
     bandeau livraison comme en desktop — plus jamais parqué dans le seam noir.
     Sélecteur à 3 classes + html : DOIT battre la règle mobile-fallback de
     pdi-restored.css (.menu-sticky-section[data-menu-takeover-ready] .cta, spéc. 0,3,0)
     qui remettait le bouton en flux (position:relative + transform:none = la bande). */
  html.pdi-cta-dropin .menu-sticky-section .pdi-menu-commander-cta,
  html.pdi-cta-dropin .pdi-menu-commander-cta{
    position: absolute !important;
    left: 50% !important; right: auto !important;
    bottom: 80px !important; top: auto !important;
    margin: 0 !important; display: block !important;
    transform: translateX(-50%) translateY(-150px) scale(1.15) !important;
  }
  html.pdi-cta-dropin .menu-sticky-section .pdi-menu-commander-cta.pdi-cta-landed,
  html.pdi-cta-dropin .pdi-menu-commander-cta.pdi-cta-landed{
    transform: translateX(-50%) translateY(60px) scale(1.15) !important;
  }
  html.pdi-cta-dropin .menu-sticky-section .pdi-menu-commander-cta:hover{
    transform: translateX(-50%) translateY(-150px) scale(1.15) !important;
  }
  html.pdi-cta-dropin .menu-sticky-section .pdi-menu-commander-cta.pdi-cta-landed:hover{
    transform: translateX(-50%) translateY(60px) scale(1.15) !important;
  }
}

/* ── pdi-pick : popup de CHOIX (heure / couverts / téléphone) — même thème que le
   flatpickr du champ date : panneau sombre palette resto, accents or, polices du site. */
.pdi-pick-wrap{ position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.pdi-pick-pop{ background:var(--pdi-panel,#1b1510); border:1px solid var(--pdi-line,rgba(219,169,79,.55)); border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.6); padding:18px; width:min(88vw,320px); max-height:78vh; overflow:hidden; display:flex; flex-direction:column; font-family:var(--t-font-body,system-ui,sans-serif); }
.pdi-pick-title{ color:var(--pdi-gold,#d4a054); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:14px; text-align:center; margin-bottom:6px; font-family:var(--t-font-nav,var(--t-font-display,inherit)); }
/* choix (heure/couverts) = LISTE VERTICALE scrollable, une option par ligne
   (la grille compacte "tout tassé dans un carré" a été refusée par l'user) */
.pdi-pick-grid{ display:grid; grid-template-columns:1fr; gap:6px; margin-top:10px; max-height:52vh; overflow-y:auto; padding-right:4px; overscroll-behavior:contain; }
/* le pavé téléphone (préfixes + touches) reste une grille : c'est un clavier */
.pdi-pick-cols3{ grid-template-columns:repeat(3,1fr); max-height:none; overflow:visible; padding-right:0; }
.pdi-pick-chip{ background:rgba(255,246,223,.06); border:1px solid rgba(219,169,79,.35); color:var(--pdi-cream,#fff6df); border-radius:9px; padding:12px 10px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s ease,border-color .15s ease; }
.pdi-pick-grid::-webkit-scrollbar{ width:8px; }
.pdi-pick-grid::-webkit-scrollbar-thumb{ background:rgba(219,169,79,.4); border-radius:4px; }
.pdi-pick-chip:hover{ background:rgba(219,169,79,.22); border-color:var(--pdi-gold,#d4a054); }
.pdi-pick-disp{ color:var(--pdi-cream,#fff6df); background:rgba(255,246,223,.08); border:1px solid rgba(219,169,79,.3); border-radius:9px; min-height:40px; display:flex; align-items:center; justify-content:center; font-size:17px; letter-spacing:.06em; padding:6px 10px; margin-top:6px; }
html.pdi-enh .pdi-reservation-form input[readonly]{ cursor:pointer; }

/* ── intl-tel-input (champ téléphone) thémé sombre sur la palette du resto ── */
html.pdi-enh .pdi-reservation-form .iti{ width:100%; display:block; }
/* mode panneau : le slot = label.pdi-field en absolu, l'input le remplissait à 100% —
   le wrapper .iti inséré par la lib doit remplir le slot À LA PLACE, sinon le drapeau
   et l'input se replient hors du slot (bug "rien n'a changé") */
html.pdi-resa-panel .pdi-reservation-form .pdi-field .iti{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important; display:block !important;
}
html.pdi-resa-panel .pdi-reservation-form .pdi-field .iti input{
  padding-left:56px !important;   /* place pour le drapeau + flèche */
}
html.pdi-resa-panel .pdi-reservation-form .pdi-field .iti .iti__flag-container{ z-index:3; }
.iti__country-list{ background:var(--pdi-panel,#1b1510) !important; border:1px solid rgba(219,169,79,.45) !important; color:var(--pdi-cream,#fff6df) !important; box-shadow:0 14px 46px rgba(0,0,0,.6) !important; border-radius:10px !important; max-height:46vh !important; }
.iti__country{ padding:9px 10px !important; }
.iti__country:hover,.iti__country.iti__highlight{ background:rgba(219,169,79,.18) !important; }
.iti__country-name{ color:var(--pdi-cream,#fff6df) !important; }
.iti__dial-code{ color:rgba(219,169,79,.9) !important; }
.iti__divider{ border-bottom:1px solid rgba(219,169,79,.3) !important; }
.iti--separate-dial-code .iti__selected-flag{ background:rgba(20,12,8,.55) !important; border-radius:8px 0 0 8px !important; }
.iti__selected-dial-code{ color:var(--pdi-cream,#fff6df) !important; font-weight:700; }
.iti__arrow{ border-top-color:var(--pdi-gold,#d4a054) !important; }
.iti__arrow--up{ border-bottom-color:var(--pdi-gold,#d4a054) !important; }

/* ── dropdown pays : SOLIDE et propre ──
   1) le champ en interaction passe AU-DESSUS de tout le formulaire (bouton RÉSERVATION
      compris) → un clic en bas de liste touche LA LISTE, plus jamais le champ derrière
   2) largeur divisée par deux, scrollbar masquée, hover doré avec micro-décalage */
html.pdi-enh .pdi-reservation-form .pdi-field:focus-within{ z-index: 400 !important; }
.iti__country-list{
  z-index: 500 !important;
  width: min(520px, 88vw) !important;
  max-height: 42vh !important;
  border-radius: 12px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.iti__country-list::-webkit-scrollbar{ display: none !important; width: 0 !important; }
.iti__country{ white-space: normal !important; transition: background .15s ease, transform .12s ease; }
.iti__country:hover{ background: rgba(219,169,79,.3) !important; transform: translateX(5px); }

/* ── drapeau + indicatif SANS boîte : aucune surface autour du pays, juste une ombre
   portée sur le drapeau ; seule une fine bordure entoure les CHIFFRES de l'indicatif ── */
html.pdi-resa-panel .pdi-field .iti .iti__flag-container{
  top:0 !important; bottom:0 !important; padding:0 !important;
  display:flex !important; align-items:center !important;
}
/* drapeau + indicatif MASQUÉS tant que le champ n'a pas été cliqué (JS ajoute
   .pdi-iti-revealed au 1er focus/clic ; ils restent ensuite) */
.iti .iti__flag-container{ opacity:0 !important; pointer-events:none !important; transition:opacity .18s ease; }
.iti.pdi-iti-revealed .iti__flag-container{ opacity:1 !important; pointer-events:auto !important; }
html.pdi-resa-panel .pdi-field .iti .iti__selected-flag,
.iti--separate-dial-code .iti__selected-flag{
  height:auto !important; width:auto !important;
  padding:0 4px 0 8px !important; margin:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.iti__selected-flag .iti__flag{ filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
/* indicatif : PAS de boîte — contour de lettres (liseré clair autour des glyphes),
   lisible sur n'importe quel fond même si la couleur du texte ne contraste pas */
.iti--separate-dial-code .iti__selected-dial-code{
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  margin-left:6px !important;
  box-shadow:none !important;
  background:transparent !important;
  text-shadow:
    -1px -1px 0 rgba(255,248,230,.95), 1px -1px 0 rgba(255,248,230,.95),
    -1px  1px 0 rgba(255,248,230,.95), 1px  1px 0 rgba(255,248,230,.95),
     0 2px 4px rgba(0,0,0,.35) !important;
}
/* sur le parchemin du formulaire panneau, l'indicatif passe à l'encre sombre */
html.pdi-resa-panel .pdi-field .iti .iti__selected-dial-code{ color:#3c2c18 !important; font-weight:800 !important; }
html.pdi-resa-panel .pdi-field .iti .iti__arrow{ border-top-color:#3c2c18 !important; }
html.pdi-resa-panel .pdi-field .iti .iti__arrow--up{ border-bottom-color:#3c2c18 !important; }

/* ── bouton RÉSERVATION agrandi ×1.39 pour matcher la taille VISUELLE du bouton MENU :
   son image est un canvas 3:1 paddé (contenu = 74.4% de la largeur) → à boîte égale il
   paraissait ~26% plus petit. Facteur identique desktop et mobile (géométries convergentes). */
/* sélecteur avec #reservation : typography.css pose un transform !important à (1,2,1)
   (ID) qui écrasait le scale — celui-ci fait (1,3,1) et gagne partout */
html.pdi-enh #reservation .pdi-reservation-form .pdi-reservation-submit,
html.pdi-enh .pdi-reservation-form .pdi-reservation-submit{
  transform: translateX(-50%) scale(1.39) !important;
  transform-origin: center bottom !important;
}
html.pdi-enh #reservation .pdi-reservation-form .pdi-reservation-submit:hover,
html.pdi-enh .pdi-reservation-form .pdi-reservation-submit:hover{
  transform: translateX(-50%) scale(1.39) translateY(-2px) !important;
  filter: invert(1) hue-rotate(180deg) !important;
}
/* desktop : bouton RÉSERVATION descendu de 100px (demande user). Il déborde sous la
   section → celle-ci laisse FLOTTER (overflow visible) et passe au-dessus du footer. */
@media (min-width: 992px){
  html.pdi-enh #reservation .pdi-reservation-form .pdi-reservation-submit,
  html.pdi-enh .pdi-reservation-form .pdi-reservation-submit{
    /* demande user 28/07 : taille -15% (1.39x0.85=1.18) + 20px plus bas (100->120) */
    transform: translateX(-50%) translateY(120px) scale(1.18) !important;
    z-index: 40 !important;
  }
  html.pdi-enh #reservation .pdi-reservation-form .pdi-reservation-submit:hover,
  html.pdi-enh .pdi-reservation-form .pdi-reservation-submit:hover{
    transform: translateX(-50%) translateY(118px) scale(1.18) !important;
    filter: invert(1) hue-rotate(180deg) !important;
  }
  /* #reservation dans le sélecteur : bat le typography.css #reservation{overflow:hidden}
     (ID, spéc 1,2,1) qui reclippait le bouton descendu */
  html.pdi-enh #reservation.section_testimonials.pdi-reservation-video-section{
    overflow: visible !important;
    z-index: 20 !important;
  }
}