@charset "utf-8";
/* CSS Document */
/* styles.css */
:root {
  --bg: #cc9933 ;
  --text: #f2f2f2;
  --muted: #294b2b;
  --primary: #e5552e;    /* accent flamme */
  --accent: #ffc857;     /* doré artisan */
  --card: #191a1d;
  --card-fire: 135deg, #ff4500, #ffa500;
  --border: #2a2c31;
  --maxw: 1100px;
  --radius: 12px;
  --shadow: 0 10px 25px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: system-ui, "Inter", sans-serif; }

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none;}
a:hover { }

.site-header {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  padding: 5px; position: sticky; top: 0; background: rgba(15,15,17,0.9); backdrop-filter: blur(6px); z-index: 10;
		width: 100%; height: 200px;
}
.sup { z-index: 9999;}
.logo {justify-self: start; flex-shrink: 0;}
.logo img {width: clamp(100px, 8.5vw, 350px); height:auto; flex-shrink: 0;}

.site-title { font-size: clamp(1.8rem, 6vw,4.5rem); text-align: center; font-family: 'birds', sans-serif; padding-right: 35px;}
.menu{
  display: flex; align-items: center;
  padding: 25px; position: sticky; top: 200px; background: rgba(15,15,17,0.9); backdrop-filter: blur(6px); z-index: 10;
		width: 100%; justify-content: flex-end;}
.marque { font-size:60px; font-family: 'coffee', sans-serif; color: #CC9933; -webkit-text-stroke: 0.4px black;}
.marque_gras { font-size:60px; font-family: 'coffee_gras', sans-serif; color: #CC9933; -webkit-text-stroke: 0.6px black;}

.nav { display: flex; gap: 20px; justify-self: end; margin-left: auto; }
.nav a { color: var(--text); border-radius: 8px; font-size: 18px; font-weight:bold; color: #ffffff;}
.nav a.active, .nav a:hover { background: var(--card) ; background-color: #cc9933; font-size: 18px; font-weight:bold; color: #294b2b;}

main { max-width: var(--maxw); margin: 0 auto; padding: 20px; }

.hero {
 ; gap: 24px; align-items: center; padding: 0px 0;
}
.hero-content h1 { font-size: 2.4rem; }
.hero-content p { color: var(--muted);  font-size: 1.3rem; }
.hero-actions { display: flex; gap: 12px; }

.text-acc {display: flex; gap: 18px; margin-top: 24px;}
.text-acc bloc {max-width: 50%; height: auto;}

.btn { display: inline-block; padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--card); box-shadow: var(--shadow); }
.btn.primary { background: linear-gradient(135deg, var(--primary), #ff7a3f); border-color: transparent; }
.btn:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.features { display: flex; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
.features article { background: var(--card-fire); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.card-body { padding: 14px 16px; }
.specs {display: flex; list-style: none; padding: 0; margin: 12px 0 0;  gap: 18px;}
.specs li { margin-bottom: 6px; color: var(--muted); }
.specs bloc {width: 40%; height: auto;}

.contact .field { margin-bottom: 14px; }
.contact label { display: block; margin-bottom: 6px; font-weight: 600; }
.contact input, .contact textarea {
  width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: #121316; color: var(--text);
}
.error { display: none; color: #ffadad; font-size: 0.85rem; margin-top: 6px; }
.form-status { margin-top: 10px; color: var(--accent); }

.site-footer { border-top: 1px solid var(--border); margin-top: 32px; padding: 18px; text-align: center; color: var(--muted); }
.site-footer .rs {display: flex;gap:16px; justify-content: center}
.site-footer .rs img {width: auto; height: auto;}

.cta-banner { margin-top: 32px; background: linear-gradient(135deg, rgba(229,85,46,0.15), rgba(255,200,87,0.15)); border: 1px solid var(--border); border-radius: var(--radius); padding-right:10px; padding-left: 10px; display: flex; align-items: center; justify-content: space-between; }

@media (max-width: 500px) {
	.grid { display: grid;  gap: 18px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)) ;}
	.features { display: grid;  gap: 18px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)) ;}
  .nav a { font-size: clamp(10px, 3vw, 14px); }
@font-face{ font-family: 'birds'; src: url('https://brasseriedulavezon.com/newsite/font/BIRDS OF PARADISE.TTF') format('truetype');}
@font-face{ font-family: 'coffee'; src: url('https://brasseriedulavezon.com/newsite/font/KENYAN COFFEE.TTF') format('truetype');}
@font-face{ font-family: 'coffee_gras'; src: url('https://brasseriedulavezon.com/newsite/font/KENYAN COFFEE gras.TTF') format('truetype');}
}
@media (max-width: 350px) {
  .hero { grid-template-columns:1fr; }
  .nav { display: none; }
  .nav a { font-size: clamp(10px, 3vw, 14px); }
		.site-header {grid-template-columns: auto 1fr auto; grid-template-areas: "logo title toggle" "nav nav nav"}
		.logo {grid-area: logo; }
	.grid { display: grid;  gap: 18px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)) ;}
	.hero-features { display: grid;  gap: 18px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)) ;}
@font-face{ font-family: 'birds'; src: url('https://brasseriedulavezon.com/newsite/font/BIRDS OF PARADISE.TTF') format('truetype');}
@font-face{ font-family: 'coffee'; src: url('https://brasseriedulavezon.com/newsite/font/KENYAN COFFEE.TTF') format('truetype');}
@font-face{ font-family: 'coffee_gras'; src: url('https://brasseriedulavezon.com/newsite/font/KENYAN COFFEE gras.TTF') format('truetype');}
}
@font-face{ font-family: 'birds'; src: url('https://brasseriedulavezon.com/newsite/font/BIRDS OF PARADISE.TTF') format('truetype');}
@font-face{ font-family: 'coffee'; src: url('https://brasseriedulavezon.com/newsite/font/KENYAN COFFEE.TTF') format('truetype');}
@font-face{ font-family: 'coffee_gras'; src: url('https://brasseriedulavezon.com/newsite/font/KENYAN COFFEE gras.TTF') format('truetype');}