:root{
	--red:#e4332e;
	--red-dark:#c82823;
	--black:#131313;
	--gray:#f4f4f4;
	--text:#222;
	--font-head:"Anton", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	--font-body:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--text)}
img{max-width:100%;height:auto;display:block}
video{width:100%;height:auto;display:block;border-radius:16px}

.container{width:min(1120px, 92%);margin-inline:auto}

/* Header */
.site-header{position:sticky;top:0;z-index:1001;background:#fff;border-bottom:1px solid #eee}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand .logo{height:48px;width:auto;border-radius:8px}
.main-nav{display:flex;gap:16px;flex-wrap:wrap}
.main-nav a{font:600 14px/1 var(--font-body);text-transform:uppercase;letter-spacing:.03em;color:#333;text-decoration:none;padding:8px 10px;border-radius:8px}
.main-nav a:hover{background:var(--gray)}
/* Bouton croix (fermeture menu) */
.nav-close{display:none;position:absolute;top:22px;right:22px;width:38px;height:38px;border-radius:50%;border:1px solid #ddd;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.12);cursor:pointer}
.nav-close::before,.nav-close::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2px;background:#111;border-radius:2px;transform-origin:center}
.nav-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.nav-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* Scrim (overlay pour fermer) */
.scrim{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s ease}
.scrim.show{opacity:1;pointer-events:auto}
/* Burger */
.burger{display:none;position:relative;width:42px;height:38px;border:0;background:transparent;padding:0;cursor:pointer}
.burger span{position:absolute;left:8px;right:8px;height:3px;background:#111;border-radius:3px;transition:transform .25s ease, top .25s ease, opacity .25s}
.burger span:nth-child(1){top:11px}
.burger span:nth-child(2){top:18px}
.burger span:nth-child(3){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){top:18px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:18px;transform:rotate(-45deg)}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero-video{height:52vh;object-fit:cover;filter:contrast(1.05) saturate(1.05)}
.hero-overlay{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35))}
.hero-title{font:700 clamp(28px,5vw,56px)/1 var(--font-head);letter-spacing:.04em;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.45)}

/* Sections */
.section{padding:40px 0}
.section-title{font:700 clamp(26px,4vw,40px)/1 var(--font-head);letter-spacing:.06em;color:var(--red);margin:0 0 20px;display:inline-block}
.section-title span{color:transparent;-webkit-text-stroke:2px var(--red);text-stroke:2px var(--red)}

/* Cards */
.cards.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards.grid.small{grid-template-columns:repeat(2,1fr)}
.cards.grid.small .card img{height:clamp(220px, 32vw, 300px);object-fit:contain;display:block;margin:8px auto 0;background:#f3f3f3;border-radius:12px}
.card.list h3{font-size:18px;margin:10px 16px 12px}
#drinks-desserts .card.list h3{display:none}
.cards.grid.small .card h3{margin-top:10px}
.card{background:#fff;border:1px solid #eee;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.05);display:flex;flex-direction:column}
.card img{height:clamp(220px, 32vw, 300px);width:auto;object-fit:contain;display:block;margin:8px auto 0;background:#f3f3f3;border-radius:12px}
.card h3{font:700 20px/1.15 var(--font-head);letter-spacing:.04em;margin:14px 16px 8px;color:#111}
.card .prices{display:flex;gap:10px;align-items:center;margin:0 16px 16px}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 16px 14px}
.badge{padding:6px 10px;border-radius:999px;border:1px solid #e6e6e6;background:#fafafa;color:#333;font:600 12px/1 var(--font-body)}
.pill{background:#000;color:#fff;padding:8px 10px;border-radius:12px;font:700 13px/1 var(--font-body)}
.pill strong{font-weight:700}
.pill.alt{background:#fff;color:#000;border:2px solid #000}
.card.no-image{padding:16px}
.card.no-image .card-body{padding:4px 0}

/* Media-only blocks */
.section-media .media-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.media-only{position:relative}
.media-caption{display:none}
.badge-price{display:none}
/* Taille spécifique HOBY KIDS (vidéo plus compacte) */
#kids .media-only video{width:min(560px, 80%);margin:0 auto;border-radius:16px}

/* Hours */
.section-hours .hours{border:1px dashed var(--red);border-radius:16px;padding:18px;background:#fff}
.hours-row{display:flex;justify-content:space-between;padding:10px 6px;border-bottom:1px dotted #f0a29f}
.hours-row:last-child{border-bottom:none}
.hours-row span{font:700 16px/1 var(--font-head);color:#000}
.hours-row strong{font:700 15px/1 var(--font-body)}

/* Logos sociaux + Uber Eats sous horaires */
.social-logos{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.social-logos .social-link{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;border:1px solid #e6e6e6;background:#fff;color:#111;text-decoration:none;font:600 14px/1 var(--font-body);box-shadow:0 6px 16px rgba(0,0,0,.06);transition:transform .15s ease}
.social-logos .social-link:hover{border-color:#d0d0d0;transform:translateY(-1px)}
.social-logos .social-icon{width:20px;height:20px;display:inline-block}

/* Footer */
.site-footer{background:#111;color:#fff;padding:26px 0;margin-top:20px}
.footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.footer-brand .logo.small{height:40px}
.contact a{color:#fff;text-decoration:none}
.contact .socials a{color:#fff;opacity:.9}
.contact .socials a:hover{opacity:1;text-decoration:underline}

/* Bouton d'appel flottant */
.fab-call{position:fixed;right:18px;bottom:20px;z-index:1100;width:54px;height:54px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;text-decoration:none;box-shadow:0 10px 28px rgba(0,0,0,.25);animation:pulse 2.2s infinite}
.fab-call .phone-icon{width:24px;height:24px;display:block}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(228,51,46,0.4)}70%{box-shadow:0 0 0 18px rgba(228,51,46,0)}100%{box-shadow:0 0 0 0 rgba(228,51,46,0)}}
@media (max-width: 768px){.fab-call{right:14px;bottom:16px;width:52px;height:52px}}

/* Mobile carousel (CSS scroll-snap; JS ajoute drag) */
@media (max-width: 768px){
	/* Nav mobile */
	.burger{display:block}
	.main-nav{position:fixed;inset:0 0 0 auto;width:min(320px, 80%);background:#fff;border-left:1px solid #eee;display:flex;flex-direction:column;gap:0;padding:80px 22px 22px;transform:translateX(100%);transition:transform .3s ease;box-shadow:-10px 0 30px rgba(0,0,0,.15);z-index:1000}
	.main-nav a{padding:14px 8px;border-radius:8px;font-size:16px}
	.main-nav.open{transform:translateX(0)}
	body.nav-open{overflow:hidden}
	.nav-close{display:block}
	/* Carousel mobile */
	.cards.grid{display:block}
	.carousel{position:relative}
	.carousel .track-viewport{overflow:hidden}
	.carousel .track{display:flex;gap:14px;transition:transform .35s ease}
	.carousel .card{flex:0 0 82%;}
	/* Dots de pagination */
	.carousel .dots{display:flex;justify-content:center;gap:8px;margin:10px 0 2px}
	.carousel .dot{width:8px;height:8px;border-radius:50%;background:#d8d8d8;border:1px solid #cfcfcf;transition:transform .2s ease, background .2s ease;cursor:pointer}
	.carousel .dot.active{background:var(--red);transform:scale(1.18)}
	.section-media .media-grid{grid-template-columns:1fr}
	/* Harmonisation des hauteurs des images en mobile (même que burgers) */
	.card img{height:clamp(220px, 60vw, 300px)}
	.cards.grid.small .card img{height:clamp(220px, 60vw, 300px)}
}