/* Reset & Base */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root{
	--yellow: #F4CE14;
	--olive: #495E57;
	--offwhite: #EDEFEE;
	--price-orange: #EE9972;
	--active-blue: #2C7BE5;
	--text-color: #333;
	--max-width: 1100px;

	/* Tokens supplémentaires pour la section contact / formulaires */
	--text-gray: #6b6b6b;
	--primary-color: var(--olive);
	--accent: var(--olive);
	--text-light: #222;
	--gradient-1: linear-gradient(90deg,#6366f1,#8b5cf6);
}

html,body{
	font-family: 'Open Sans', 'Roboto', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	color: var(--text-color);
	background: var(--offwhite);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

/* Typography */
h1,h2,h3{ line-height:1.1; }
h1{ font-size:2.8rem; color:var(--yellow); }
h2{ font-size:2rem; color:var(--yellow); }
h3{ font-size:1.25rem; color:var(--olive); }
p{ font-size:1rem; color:#222; }

/* Layout helpers */
.container{ width:90%; max-width:var(--max-width); margin:0 auto; }

/* Header */
header{
	background: #fff;
	padding: 18px 0;
	border-bottom: 1px solid #e6e6e6;
}
.logo-link{ display:inline-block; border-radius:12px; }

.logo{ height:72px; 
    max-height:72px; 
    width:auto; 
    display:block; 
    background:rgba(255,255,255,0.96); 
    padding:6px 10px; border-radius:10px; 
    box-shadow:0 8px 28px rgba(0,0,0,.12); 
    transition:transform .18s ease, box-shadow .18s ease; }

.logo-link:hover .logo, .logo-link:focus .logo{ transform:translateY(-4px); 
    box-shadow:0 16px 36px rgba(0,0,0,.16); }

.header-inner{ display:flex; 
    align-items:center; justify-content:space-between; gap:20px; }

/* Navigation */
.nav-links{ list-style:none; display:flex; gap:18px; align-items:center; }
.nav-links li a{
	color: #6b6b6b; 
    text-decoration:none; 
    padding:6px 8px; border-radius:6px; 
    transition:all .18s ease;
}

.nav-links li a:hover{ background: #f1f1f1; color:var(--olive); transform:translateY(-1px); }
.nav-links li a.active{ color:var(--active-blue); font-weight:600; }

/* Nav toggle for mobile */
.nav-toggle{ display:none; 
    background:none; 
    border:0; cursor:pointer; width:40px; height:40px; }
.nav-toggle span{ display:block; 
    width:24px; 
    height:2px; background:#333; margin:5px 0; transition:transform .2s ease; }

/* Hero - Home */
.hero-two-columns, .hero-two-comlumns{ background:var(--olive); color:var(--offwhite); padding:60px 0; }
.hero-inner{ display:grid; 
    grid-template-columns:1fr 1fr; 
    align-items:center; gap:30px; width:90%; max-width:var(--max-width); margin:0 auto; }

.hero-left h2, .left-column h2{ font-size:2.6rem; color:var(--yellow); margin-bottom:8px; }

.color-title-shop{ color:var(--yellow); }
.hero-left h3, .left-column h3{ color:var(--offwhite); font-weight:600; margin-bottom:12px; }
.hero-left p, .left-column p{ color:var(--offwhite); max-width:520px; margin-bottom:18px; }
.hero-right img, .right-column img{ width:100%; 
    max-width:520px; 
    display:block; 
    border-radius:8px; transform:translateY(6%); box-shadow:0 12px 30px rgba(0,0,0,.12); }

.btn-shop-now, .btn-menu, .btn-achat{ display:inline-block; 
    background:var(--yellow); 
    color:#000; 
    padding:10px 18px; 
    border-radius:8px; 
    border:0; 
    text-decoration:none; 
    font-weight:700; transition:transform .12s ease, box-shadow .12s ease; cursor:pointer; }
.btn-shop-now:hover, .btn-menu:hover, .btn-achat:hover{ transform:translateY(-3px); 
    box-shadow:0 8px 20px rgba(0,0,0,.12); }

/* Specials */
.specials{ background:var(--offwhite); padding:36px 0; }
.specials-header{ width:90%; 
    max-width:var(--max-width); 
    margin:0 auto 20px; display:flex; align-items:center; justify-content:space-between; }
.specials-grid{ width:90%; 
    max-width:var(--max-width); 
    margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{ background:#fff; 
    border-radius:10px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.06); text-align:left; }
.card img{ width:100%; display:block; height:220px; object-fit:cover; }
.card h3{ padding:12px 14px 6px; font-size:1.1rem; }
.card p{ padding:0 14px 14px; color:var(--price-orange); font-weight:700; }

/* Reservations Page */
.reservations-hero{ background:var(--olive); color:var(--offwhite); padding:36px 0; text-align:center; }
.reservation-form{ width:90%; 
    max-width:820px; 
    margin:20px auto; 
    background:#fff; 
    padding:20px; border-radius:10px; box-shadow:0 8px 24px rgba(44, 22, 22, 0.06); }
.reservation-form .seating-options{ display:flex; gap:12px; margin-bottom:14px; }
.seating-options input[type="checkbox"]{ display:none; }
 .seating-options label{ display:inline-flex; 
    align-items:center; 
    gap:8px; 
    padding:6px; 
    border-radius:8px; background:#f7f7f7; cursor:pointer; border:1px solid transparent; }
 .seating-options label span{ display:inline-block; padding:8px 12px; border-radius:6px; }
 .seating-options input[type="checkbox"]:checked + span{ background:var(--yellow); 
    color:#9e1212; font-weight:700; box-shadow:0 6px 16px rgba(102, 44, 44, 0.356); }
 .seating-options input[type="checkbox"]:focus + span{ outline:2px solid rgba(62, 138, 111, 0.514); }
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
select, input[type="date"], input[type="time"]{ width:100%; 
    padding:10px 12px; border-radius:8px; border:1px solid #ddd; background:#fff; }
select{ appearance:none; 
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path fill='%23666' d='M7 9L0 0h14z'/></svg>"); 
    background-repeat:no-repeat; 
    background-position:calc(100% - 12px) center; background-size:14px 9px; }

/* Gallery */
.gallery{ display:flex; gap:12px; width:90%; max-width:var(--max-width); margin:20px auto; }
.gallery img{ width:100%; height:160px; object-fit:cover; border-radius:8px; }
.gallery-button{ text-align:center; margin:18px 0 48px; }

/* Product / Auth */
.product-card{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.product-card .price{ color:var(--price-orange); font-weight:800; padding:0 14px 8px; }
.auth-form input{ width:100%; padding:10px 12px; 
    border-radius:8px; border:1px solid #ddd; margin-top:6px; }
.auth-form h3{ margin-bottom:8px; }

/* Utilities */
.text-center{ text-align:center; }

/* Utilities - spacing */
.section-pad{ padding:36px 0; }
.mt-sm{ margin-top:18px; }
.footer-pad{ padding:24px 0; }
.center-form{ max-width:420px; margin:0 auto; }
.mt-8{ margin-top:8px; }

/* Centrage du conteneur de contact */
.contact-container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.contact-container p {
    color: var(--text-gray);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

/* Grille pour les liens de contact */
.contact-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

/* Lien de contact individuel */
.contact-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--yellow);
    border-radius: 15px;
    min-width: 140px;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.06);
    color: #000;
    text-decoration: none;
}

.contact-link:hover {
    background: #FFF96D;
    transform: translateY(-5px);
    border-color: var(--primary-color);
}

/* Icône de contact */
.contact-icon {
    font-size: 2rem;
    color: var(--accent);
}

/* Styles du formulaire de contact */
.contact-form {
    max-width: 500px;
    margin: 0 auto 3rem auto;
    background: white;
    padding: 2rem;       
    border-radius: 15px;
    border: 1px solid rgba(129, 115, 52, 0.12);
}

.form-group {
    margin-bottom: 1.5rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 1rem;
    background: rgba(217, 231, 13, 0.12);
    border: 1px solid rgba(168, 89, 23, 0.12);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.08);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--text-gray);
}

.submit-btn {
    width: 100%;
    padding: 1rem;
    background: var(--gradient-1);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.12);
}

/* Responsive */
@media (max-width: 1024px){
    .specials-grid{ grid-template-columns:repeat(2,1fr); }
    .gallery{ flex-direction:column; }
    .gallery img{ height:200px; }
}

@media (max-width: 768px){
	.hero-inner{ grid-template-columns:1fr; text-align:center; }
	.hero-right img{ transform:none; margin:20px auto 0; }
	.specials-grid{ grid-template-columns:1fr; }
	.form-grid{ grid-template-columns:1fr; }
	.nav-links{ display:none; flex-direction:column; background:#fff; 
        position:absolute; right:18px; top:66px; 
        padding:12px; box-shadow:0 6px 20px rgba(0,0,0,.08); border-radius:8px; }
	.nav-links.nav-open{ display:flex; }
	.nav-toggle{ display:block; }
	.logo{ height:56px; }

	/* Contact responsiveness */
	.contact-links{ gap:12px; flex-direction:column; align-items:center; }
	.contact-link{ width:100%; max-width:420px; min-width:unset; }
	.contact-form{ width:90%; padding:1.5rem; box-sizing:border-box; }
}


@media (max-width:480px){
	h1{ font-size:2rem; }
	.specials-grid{ grid-template-columns:1fr; }
	.gallery{ flex-direction:column; }
	.logo{ height:40px; }
}

/* Small JS state helpers */
.nav-open{ display:flex !important; }