/* Polices */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap");

/* Thème La Formule */
:root{
  --brand:#E10600;        /* rouge */
  --ink:#111111;          /* noir */
  --paper:#ffffff;        /* blanc */
  --muted:#475569;        /* slate-600 */
  --ring:rgba(225,6,0,.25);
  --radius-xxl:1.5rem;
  --shadow:0 6px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
}

/* Bouton principal */
.btn-brand {
  background: linear-gradient(135deg, var(--brand), #b20400);
  color: #fff;
  font-weight: 700;
  border-radius: 0.75rem; /* arrondi propre */
  box-shadow: 0 6px 16px rgba(177, 0, 0, 0.25);
  transition: transform .15s ease, filter .2s ease;
}
.btn-brand:hover {
  filter: brightness(1.06);
}
.btn-brand:active {
  transform: scale(.97);
}

/* Helpers pour Tailwind CDN (sans config) */
.bg-brand{ background:var(--brand)!important; }
.text-brand{ color:var(--brand)!important; }
.ring-brand:focus{ outline: none; box-shadow:0 0 0 4px var(--ring); }

/* Typo app */
.section-title{
  font-family:"Montserrat",system-ui,Arial,sans-serif;
  font-weight:800;
  color:var(--ink);
}
.section-kicker{
  font-family:"Montserrat",system-ui,Arial,sans-serif;
  font-weight:700;
  color:var(--brand);
  letter-spacing:.02em;
}

/* Prix & badge menu */
.price-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:9999px;
  background:var(--brand);   /* rouge prix */
  color:#ffffff;
  font-weight:700;
  font-size:.9rem;
}

/* +2,00€ en menu (noir sur fond blanc, texte rouge) */
.badge-menu{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:0.4rem;
  padding:3px 8px;
  border-radius:9999px;
  font-size:0.75rem;
  font-weight:700;
  background:#000000;
  color:var(--brand);
  text-transform:uppercase;
  letter-spacing:.03em;
  white-space:nowrap;
}

/* Cartes / relief */
.elev{ box-shadow:var(--shadow); }
.card .card-title{
  font-family:"Montserrat",system-ui,Arial,sans-serif;
  font-weight:700;
}
.card .price{
  font-weight:700;
  color:var(--ink);
}

/* Bouton bois existant (on garde le nom) */
.btn-wood{
  background:linear-gradient(135deg,#6b4e2e,#9b6b3b);
  color:#fff;
  font-weight:700;
}
.btn-wood:hover{ filter:brightness(1.05); }


/* Hamburger petit effet */
.hamburger-3d{ transition: transform .15s ease; }
.hamburger-3d:active{ transform: translateZ(0) scale(.96); }

/* Tabs header */
.category-tabs .tab-btn{
  border:1px solid #e5e7eb;
  color:#0f172a;
  background:#fff;
}
.category-tabs .tab-btn[aria-selected="true"]{
  border-color:var(--brand);
  color:var(--ink);
  background:rgba(225,6,0,.06);
}

/* Panneaux d’onglet */
.tab-panel{ display:none; }
.tab-panel[data-active="true"]{ display:block; }

/* Slider générique (avant passage en grille) */
.slider{ position:relative; }
.slider .track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: minmax(220px, 1fr);
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:4px;
}
.slider .track > [data-item]{ scroll-snap-align:start; }
.slider .arrow{
  position:absolute; top:50%; translate:0 -50%;
  width:36px; height:36px; border-radius:9999px;
  border:1px solid #e5e7eb; background:#fff;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--shadow);
}
.slider .arrow.left{ left:-10px; }
.slider .arrow.right{ right:-10px; }
.slider .arrow:active{ transform:scale(.96); }

/* Images produits */
.food-img{
  width:100%; height:250px; object-fit:cover; border-radius:18px;
  background:#f8fafc;
}

/* === Agrandissement des cartes sur mobile === */
@media (max-width: 768px) {
  .card {
    transform: scale(1.08);
    margin: 0.6rem 0;
  }
  .card img {
    height: auto;
    max-height: 260px;
    object-fit: cover;
  }
}

/* Scrollbar masquée utilitaire existant */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* Barre de recherche focus */
#smart-search input, #q{
  font-family:"Roboto",system-ui,Arial,sans-serif;
}
#q:focus{ box-shadow:0 0 0 4px var(--ring); }

/* Avis étoiles, garder look propre */
#reviews-track figure blockquote{ line-height:1.6; }

/* Footer petites améliorations lisibilité */
footer p, footer li, nav, .text-slate-600{
  font-family:"Roboto",system-ui,Arial,sans-serif;
}

/* Hero overlay (déjà en HTML). Rien à changer. */

/* Accessibilité focus visible */
:where(a,button)[tabindex]:focus-visible,
:where(a,button):focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}



/* Empêche tout overlay fermé de bloquer les clics */
#drawer:not(.open),
.overlay:not(.open),
.backdrop:not(.open),
.nav-overlay:not(.open){
  pointer-events: none;
  visibility: hidden;
}

/* Drawer menu (hamburger) */
#drawer{
  visibility:hidden;
  pointer-events:none;
  transition:transform .25s ease,visibility 0s .25s;
}
#drawer.open{
  visibility:visible;
  pointer-events:auto;
  transition:transform .25s ease,visibility 0s;
}
body.navlock{overflow:hidden}

/* Z-index sûrs pour éviter un overlay qui bloque les clics */
#drawer{z-index:12000}
.site-header,header,#header{position:relative;z-index:11000}

/* Cache les flèches < 768px */
@media (max-width: 768px){
  .slider .arrow{ display:none !important; }
}

/* ==== MODE GRILLE (plus de scroll) ==== */

/* 1) Neutraliser tout scroll horizontal + snapping */
.slider,
.slider .track,
.slider [data-track]{
  overflow-x: visible !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: auto !important;
}

/* 2) Forcer une grille au lieu du carrousel flex */
.slider .track,
.slider [data-track]{
  display: grid !important;
  grid-auto-flow: row !important;
  width: 100% !important;
  white-space: normal !important;
  gap: 1.5rem !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* 4 par ligne */
}

/* 3) Les cartes ne doivent plus forcer une largeur fixe */
.slider .track > *,
.slider [data-track] > *{
  flex: none !important;
  width: auto !important;
}

/* 4) Cacher les flèches définitivement */
.slider .arrow{
  display: none !important;
}

/* 5) Responsive : tablette = 2, mobile = 1 */
@media (max-width: 1024px){
  .slider .track,
  .slider [data-track]{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 768px){
  .slider .track,
  .slider [data-track]{
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .slider .track > .card,
  .slider [data-track] > .card{
    transform: scale(1.04);
  }
}

/* Bouton "retour aux onglets" affiché comme une carte, mobile only */
@media (max-width: 768px){
  .grid-return {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f6f6f6;
    border: 1px dashed #d9d9d9;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  .grid-return:active { transform: scale(.98); }
}

/* ===========================
   HAMBURGER / DRAWER – FINAL
   Thème : noir / blanc / rouge
   =========================== */

/* Panneau latéral */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: 84%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  background: #000;               /* fond noir */
  color: #fff;                    /* texte blanc par défaut */
  transform: translateX(100%);
  transition: transform .3s ease;
  box-shadow: -8px 0 24px rgba(0,0,0,.18);
  z-index: 9998;
  pointer-events: none;
}

.drawer.open {
  transform: translateX(0);
  pointer-events: auto;
}

/* Zone scrollable (iPhone, Android, petits écrans) */
.drawer-content {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Séparations entre sections */
.drawer-content section + section {
  border-top: 1px solid #b91c1c;    /* rouge */
  padding-top: 12px;
  margin-top: 12px;
}

/* Titres de section */
.drawer-title,
.drawer-content p.font-semibold,
.drawer-content p.text-slate-500 {
  color: #f97373 !important;        /* rouge clair */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
}

/* Navigation interne (Menu / Avis / Carte) */
.drawer-nav {
  padding-top: 8px;
  display: grid;
  gap: 16px;
}

.drawer-section {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

/* Liens du menu : fond clair + texte NOIR */
.drawer-link {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
  background: #f6f7f9;              /* fond clair */
  color: #000 !important;           /* texte noir */
  border: 1px solid #b91c1c;        /* contour rouge */
}

.drawer-link + .drawer-link {
  margin-top: 6px;
}

.drawer-link:active {
  transform: translateY(1px);
}

/* Séparation rouge entre les items du menu */
.drawer-section li + li {
  border-top: 1px solid #b91c1c;
  padding-top: 6px;
  margin-top: 6px;
}

/* ===========================
   Téléphone (en clair → noir)
   =========================== */
.drawer-content a[href^="tel"] {
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #b91c1c !important;
  font-weight: 700;
}

/* ===========================
   Boutons Plateformes
   =========================== */
.btn-plat {
  display: block;
  text-align: center;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 700;
  background: #000;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  border: 1px solid #b91c1c;
}

.btn-plat.outline {
  background: transparent;
  color: #fff;
  border: 2px solid #b91c1c;
}

/* ===========================
   Réseaux Sociaux
   =========================== */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  text-decoration: none;
  border: 1px solid #b91c1c;
}

/* Facebook – Logo officiel */
.social-link--facebook {
  background: #1877f2;             /* bleu officiel Facebook */
  border-color: #b91c1c;           /* contour rouge */
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}