/* Styles de base - thématique chalet moderne */
:root{
	--primary:#203550;
	--accent:#e63946;
	--light:#ffffff;
	--bg-light:#f8f9fa;
	--text:#1a1a1a;
	--text-light:#555555;
	--border:#e0e0e0;
	--shadow:0 4px 12px rgba(32, 53, 80, 0.15);
	--shadow-lg:0 8px 24px rgba(32, 53, 80, 0.2);
}

* {
	box-sizing: border-box;
}

body{
	font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
	margin:0;
	background:var(--bg-light);
	color:var(--text);
	line-height: 1.6;
	position: relative;
}

body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('/ImageBoisson/background.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	filter: blur(8px);
	opacity: 0.20;
	z-index: -1;
	pointer-events: none;
}

.container{max-width:1200px;margin:0 auto;padding:20px}

.site-header{
	background: linear-gradient(135deg, var(--primary) 0%, #1a2941 100%);
	color: var(--light);
	padding: 20px 0;
	box-shadow: var(--shadow);
	border-bottom: 3px solid var(--accent);
}

.site-header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.brand{
	margin:0;
	font-family: 'Georgia', 'Times New Roman', serif;
	font-size:32px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: linear-gradient(135deg, var(--light) 0%, #f0f0f0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.main-nav{
	display: flex;
	gap: 20px;
	align-items: center;
}

.main-nav a{
	color: var(--light);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95em;
	padding: 8px 12px;
	border-radius: 4px;
	transition: all 0.3s ease;
	position: relative;
}

.main-nav a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background: var(--accent);
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

.main-nav a:hover {
	background: rgba(230, 57, 70, 0.1);
}

.main-nav a:hover::after {
	width: 80%;
}

.hero{
	background: linear-gradient(135deg, rgba(32, 53, 80, 0.05) 0%, rgba(230, 57, 70, 0.03) 100%);
	padding: 40px;
	border-radius: 12px;
	margin: 30px 0;
	border-left: 4px solid var(--accent);
	box-shadow: var(--shadow);
}

.hero h2{
	margin: 0 0 16px;
	color: var(--primary);
	font-size: 2em;
	font-weight: 700;
}

.hero p {
	font-size: 1.05em;
	color: var(--text-light);
	margin: 0 0 20px;
}

.btn{
	display: inline-block;
	margin-top: 10px;
	padding: 12px 24px;
	background: linear-gradient(135deg, var(--accent) 0%, #d62a32 100%);
	color: var(--light);
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 8px rgba(230, 57, 70, 0.3);
}

.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(230, 57, 70, 0.4);
}

.btn:active {
	transform: translateY(0);
}

.btn-instagram {
	background: linear-gradient(135deg, var(--accent) 0%, #d62a32 100%);
	box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
	font-size: 1.1em;
	padding: 14px 32px;
}

.btn-instagram:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(230, 57, 70, 0.5);
}

.card{
	background: var(--light);
	padding: 24px;
	border-radius: 10px;
	margin: 20px 0;
	box-shadow: var(--shadow);
	border-top: 3px solid var(--primary);
	transition: all 0.3s ease;
}

.card:hover {
	box-shadow: var(--shadow-lg);
}

.card h3 {
	color: var(--primary);
	font-size: 1.3em;
	margin-top: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.gallery .images{display:flex;gap:16px;flex-wrap:wrap}

.gallery figure{width:48%;margin:0}
.gallery img{
	width:100%;
	height:auto;
	max-height:420px;
	border-radius: 8px;
	box-shadow: var(--shadow);
	transition: all 0.3s ease;
	object-fit: cover;
	display:block;
}

.gallery figcaption{
	margin-top:8px;
	font-size:0.92em;
	color:var(--text-light);
	text-align:center;
}

.gallery img:hover {
	transform: scale(1.02);
	box-shadow: var(--shadow-lg);
}

/* Gallery styles */
.gallery{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:16px;padding:0}
.gallery-item{margin:0;overflow:hidden;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:transform 0.3s ease, box-shadow 0.3s ease;aspect-ratio:4/3;position:relative}
.gallery-item:hover{transform:translateY(-4px);box-shadow:0 4px 16px rgba(0,0,0,0.15)}
.gallery-item img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* overlay with title/author on hover */
.gallery-item .overlay{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:linear-gradient(180deg, transparent, rgba(0,0,0,0.55));color:#fff;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:0.9em;opacity:0;transition:opacity 0.18s ease}
.gallery-item:hover .overlay{opacity:1}
.gallery-item .meta{display:flex;flex-direction:column}
.gallery-item .meta .title{font-weight:600}
.gallery-item .meta .sub{font-size:0.85em;opacity:0.9}
.gallery-item .zoom{background:rgba(255,255,255,0.08);border-radius:6px;padding:6px 8px}

/* uploader / preview styling */
.uploader{background:#fff;padding:12px;border-radius:8px;box-shadow:var(--shadow);border:1px solid var(--border)}
.uploader input[type="file"]{display:block}
.uploader-actions{margin-top:8px}
.gallery-status{margin-top:8px;color:var(--text)}
.gallery-preview{display:flex;flex-wrap:wrap;margin-top:8px;gap:8px}
.gallery-preview img.thumb{width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid var(--border);box-shadow:0 2px 6px rgba(0,0,0,0.06)}


.gallery-full{grid-template-columns:repeat(auto-fit, minmax(250px, 1fr))}

@media(max-width:900px){
	.gallery{grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:12px}
	.gallery-full{grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))}
}

/* Gallery: stacked presentation (one image per row) */
.gallery-large{
	grid-template-columns: 1fr !important;
	gap:20px;
	align-items: stretch;
}
.gallery-large .gallery-item{
	aspect-ratio:16/9;
	width:100%;
	min-height:360px;
}
.gallery-large .gallery-item img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center center;
}

@media(max-width:900px){
	.gallery-large .gallery-item{min-height:320px;aspect-ratio:16/9}
}

@media(max-width:600px){
	.gallery-large .gallery-item{min-height:300px;aspect-ratio:16/9}
}

@media(max-width:600px){
	.gallery{grid-template-columns:repeat(2, 1fr);gap:10px}
}

.lightbox{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.95);align-items:center;justify-content:center;padding:20px}
.lightbox.active{display:flex}
.lightbox-image{max-width:90%;max-height:85vh;object-fit:contain;border-radius:8px}
.lightbox-close{position:absolute;top:20px;right:30px;color:#fff;font-size:40px;cursor:pointer;transition:color 0.3s}
.lightbox-close:hover{color:#ccc}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.2);color:#fff;border:none;font-size:32px;padding:12px 18px;cursor:pointer;border-radius:4px;transition:background 0.3s}
.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,0.4)}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}

@media(max-width:600px){
	.lightbox{padding:10px}
	.lightbox-image{max-width:95%;max-height:80vh}
	.lightbox-prev,.lightbox-next{font-size:24px;padding:8px 12px}
	.lightbox-close{font-size:32px;right:15px;top:10px}
}


.about ul{
	padding-left: 24px;
	line-height: 1.8;
}

.about ul li {
	margin: 10px 0;
	color: var(--text-light);
}

.site-footer{
	background: var(--primary);
	padding: 24px;
	margin-top: 40px;
	text-align: center;
	color: var(--light);
	border-top: 3px solid var(--accent);
}

.site-footer a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
	transition: all 0.3s ease;
}

.site-footer a:hover {
	text-decoration: underline;
}

.contact p{margin:0}
/* Responsive tweaks for tablet and mobile */
@media(max-width:900px){
	.container{padding:16px}
	.brand{font-size:26px}
	.main-nav{
		gap: 12px;
		flex-wrap: wrap;
	}
	.main-nav a{
		font-size: 0.9em;
		padding: 6px 10px;
	}
	.hero{
		padding:28px;
		font-size: 0.95em;
	}
	.hero h2 {
		font-size: 1.6em;
	}
	.gallery .images{flex-direction:column}
	.gallery img{width:100%}
	.menu-list.two-col{columns:1;-webkit-columns:1}
}

@media(max-width:600px){
	.site-header .container {
		/* Keep header elements on one line on small screens so the
		   burger stays to the right of the title instead of below it */
		flex-direction: row;
		gap: 12px;
		align-items: center;
	}
	.brand{font-size:22px}
	/* push the burger to the far right when visible */
	.nav-toggle{margin-left:auto}
	.hero{
		padding:20px;
		border-radius: 8px;
	}
	.hero h2 {
		font-size: 1.4em;
	}
	.btn{padding:10px 18px}
	.card {
		padding: 16px;
	}
	.menu-list li{flex-direction:column;align-items:flex-start}
	.menu-list li .desc{margin:6px 0}
	.menu-list.two-col{columns:1}
	/* Admin: stack inputs */
	.admin .menu-item{flex-direction:column;align-items:stretch}
	.admin .menu-item input, .admin .menu-item .item-file{width:100%;margin:6px 0}
	.admin .section-block{padding:8px}
	.admin .news-block textarea{height:100px}
}

/* burger menu styles */
.nav-toggle{
	display:none;
	background:transparent;
	border:none;
	color: var(--light);
	font-size:24px;
	padding:8px 10px;
	border-radius:6px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.nav-toggle:hover {
	background: rgba(230, 57, 70, 0.2);
}

.main-nav{display:flex;gap:20px;align-items:center}

@media(max-width:900px){
	.nav-toggle{display:inline-block}
	.main-nav{
		display:none;
		position:absolute;
		top:70px;
		right:20px;
		background: var(--light);
		padding:16px;
		border-radius:8px;
		box-shadow: var(--shadow-lg);
		flex-direction:column;
		min-width:200px;
		z-index: 100;
	}
	body.nav-open .main-nav{display:flex}
	.main-nav a{
		color: var(--primary);
		margin:8px 0;
		padding: 10px 12px;
		background: rgba(32, 53, 80, 0.05);
		border-radius: 6px;
		border: none;
	}
	.main-nav a::after {
		display: none;
	}
	.main-nav a:hover {
		background: rgba(32, 53, 80, 0.1);
	}
}

/* Menu-specific styles */
.menu-page .menu-section h3{
	color: var(--primary);
	margin-bottom:12px;
	text-transform: uppercase;
	border-bottom: 2px solid var(--accent);
	padding-bottom: 8px;
}

.menu-list{
	list-style:none;
	padding:0;
	margin:0;
}

.menu-list li{
	display:flex;
	justify-content:space-between;
	padding:14px 0;
	border-bottom:1px solid var(--border);
	align-items:flex-start;
	transition: all 0.2s ease;
}

.menu-list li:hover {
	background: rgba(32, 53, 80, 0.02);
	padding-left: 8px;
}

.menu-list li:last-child {
	border-bottom: none;
}

.menu-list li .desc{
	margin:6px 0 0;
	color: var(--text-light);
	font-size:0.95em;
	font-style: italic;
}

.menu-list.two-col{columns:2;-webkit-columns:2;column-gap:24px}

/* Logos de marques pour boissons */
.drink-img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	margin-right: 10px;
	vertical-align: middle;
	border-radius: 4px;
}

.drink-item {
	display: flex;
	align-items: center;
}

.price{
	font-weight:700;
	color: var(--accent);
	white-space: nowrap;
	margin-left: 16px;
	font-size: 1.05em;
}

.muted{
	color: var(--text-light);
	font-size:0.9em;
	font-style: italic;
}

.big{
	font-size:1.4em;
	color: var(--primary);
}

.menu-header .lead{
	margin:12px 0 0;
	color: var(--text-light);
}

.menu-page .contact{text-align:left}

/* Admin / news specific */
article.card{
	padding:14px;
	margin:12px 0;
	border-left: 4px solid var(--accent);
}

article.card h4 {
	color: var(--primary);
	margin: 0 0 8px;
}

article.card small {
	color: var(--text-light);
	font-size: 0.9em;
}

/* Admin styles */
.admin .section-block{
	padding:12px;
	margin:12px 0;
	border:1px solid var(--border);
	border-radius: 8px;
	background: linear-gradient(135deg, rgba(32, 53, 80, 0.02) 0%, rgba(230, 57, 70, 0.02) 100%);
}

.admin .menu-item{
	display:flex;
	gap:8px;
	align-items:center;
	margin-top:10px;
}

.admin .menu-item input{
	padding:8px;
	border: 1px solid var(--border);
	border-radius: 4px;
	font-size: 0.95em;
}

.admin .news-block{
	margin:10px 0;
	padding:10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: rgba(32, 53, 80, 0.02);
}

.btn{cursor:pointer}

/* Additional button styles for admin pages */
.btn[style*="background:var(--text-light)"] {
	background: #666 !important;
	box-shadow: 0 4px 8px rgba(102, 102, 102, 0.3);
}

.btn[style*="background:var(--text-light)"]:hover {
	box-shadow: 0 6px 16px rgba(102, 102, 102, 0.4);
}

.btn[style*="background:#dc2626"] {
	background: #dc2626 !important;
	box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.btn[style*="background:#dc2626"]:hover {
	box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4);
}

/* Features Grid */
.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.feature-item {
	background: linear-gradient(135deg, rgba(32, 53, 80, 0.05) 0%, rgba(230, 57, 70, 0.03) 100%);
	padding: 20px;
	border-radius: 8px;
	border-left: 4px solid var(--accent);
	transition: all 0.3s ease;
}

.feature-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 12px rgba(230, 57, 70, 0.2);
	background: linear-gradient(135deg, rgba(32, 53, 80, 0.08) 0%, rgba(230, 57, 70, 0.05) 100%);
}

.feature-item h4 {
	color: var(--primary);
	margin: 0 0 10px;
	font-size: 1.1em;
}

.feature-item p {
	color: var(--text-light);
	margin: 0;
	line-height: 1.6;
}

/* Specialties Section */
.specialties-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	margin-top: 20px;
}

.specialty-item {
	background: var(--light);
	padding: 18px;
	border-radius: 8px;
	border: 2px solid var(--border);
	border-top: 3px solid var(--accent);
	transition: all 0.3s ease;
}

.specialty-item:hover {
	border-top-color: var(--primary);
	box-shadow: 0 4px 12px rgba(32, 53, 80, 0.15);
}

.specialty-item strong {
	color: var(--primary);
	font-size: 1.05em;
	display: block;
	margin-bottom: 8px;
}

.specialty-item p {
	color: var(--text-light);
	margin: 0;
	font-size: 0.95em;
	line-height: 1.6;
}

/* Testimonials Grid */
.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.testimonial {
	background: linear-gradient(135deg, var(--light) 0%, rgba(255, 255, 255, 0.95) 100%);
	padding: 20px;
	border-radius: 8px;
	border-left: 4px solid var(--primary);
	box-shadow: 0 2px 8px rgba(32, 53, 80, 0.1);
	transition: all 0.3s ease;
}

.testimonial:hover {
	box-shadow: 0 4px 16px rgba(32, 53, 80, 0.15);
	transform: translateY(-2px);
	border-left-color: var(--accent);
}

.testimonial p {
	color: var(--text);
	font-style: italic;
	margin: 0 0 12px;
	line-height: 1.7;
}

.testimonial strong {
	color: var(--accent);
	font-weight: 700;
	display: block;
	margin-top: 12px;
}

/* Responsive for smaller screens */
@media(max-width:768px) {
	.features-grid {
		grid-template-columns: 1fr;
	}
	
	.specialties-list {
		grid-template-columns: 1fr;
	}
	
	.testimonials-grid {
		grid-template-columns: 1fr;
	}
}

/* Minimal / Home page overrides: remove boxed look on homepage */
.home {
    text-align: left;
}
.home section,
.home h2,
.home h3,
.home p {
    text-align: left;
}
.home .card {
    background: transparent;
    padding: 8px 0;
    border: none;
    box-shadow: none;
}
.home .hero.card {
    padding: 14px 0;
    border-left: none;
}
.home .hero {
    text-align: left;
}
.home .feature-item,
.home .specialty-item,
.home .testimonial {
    background: transparent;
    border-left: none;
    border: none;
    box-shadow: none;
    padding: 6px 0;
    text-align: left;
.home .feature-item h4,
.home .specialty-item strong {
	color: var(--primary);
}}
.home .features-grid, .home .specialties-list, .home .testimonials-grid {
	gap: 12px;
}
.home .images img { box-shadow: none; border-radius:6px; }

/* Minimal carousel styles for home page */
.carousel{position:relative;display:block;overflow:hidden;border-radius:8px;margin-top:12px}
.carousel .slides{position:relative;aspect-ratio:16/9;min-height:200px;background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent)}
.carousel .slide{display:none;position:absolute;inset:0;padding:0}
.carousel .slide.active{display:block;position:relative}
.carousel .slide img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.carousel .carousel-prev,.carousel .carousel-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.45);color:#fff;border:none;padding:10px 14px;border-radius:6px;cursor:pointer;font-size:20px}
.carousel .carousel-prev{left:12px}
.carousel .carousel-next{right:12px}
.carousel .indicators{display:flex;gap:8px;justify-content:center;margin-top:8px;padding:8px}
.carousel .indicator{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,0.2);border:none;cursor:pointer}
.carousel .indicator.active{background:var(--accent)}

@media(max-width:900px){
	.carousel .slides{height:260px}
}

@media(max-width:600px){
	.carousel .slides{height:200px}
	.carousel .carousel-prev,.carousel .carousel-next{padding:8px;font-size:18px}
}

/* Table utility (used by menu_table.html) */
.small{
	font-size:0.95em;
	color: var(--text-light);
}