:root {
  --cream: #F5F0E6;
  --cream-dark: #EDE5D4;
  --dark: #1A2414;
  --green: #2C4A28;
  --green-mid: #3D6638;
  --green-light: #557A50;
  --gold: #B8922A;
  --gold-light: #D4AE5A;
  --gold-pale: #F0E4C4;
  --white: #FFFDF8;
  --text: #2A3420;
  --text-light: rgba(42,52,32,0.55);
  --border: rgba(44,74,40,0.18);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background: var(--cream);
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232c4a28' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  font-family:'Raleway',sans-serif;
  color:var(--text);
}

/* ── BANNER ── */
.banner {
  width:100%; height:340px;
  background: var(--green);
}
.banner-title {
  background: var(--green);
  background-image: linear-gradient(135deg, #1A2C16 0%, #2C4A28 100%);
  text-align:center;
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(1rem, 2.5vw, 1.6rem);
  color:var(--gold-light);
  padding:0.9rem 2rem;
  letter-spacing:0.06em;
  border-bottom:2px solid var(--gold);
  text-shadow:0 1px 6px rgba(0,0,0,0.3);
}

/* ── HEADER ── */
header {
  background: var(--green);
  background-image: linear-gradient(135deg, #1A2C16 0%, #2C4A28 50%, #243D20 100%);
  padding: 0 3rem;
  display:flex; align-items:center; justify-content:space-between;
  height: 72px; position:sticky; top:0; z-index:200;
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 4px 20px rgba(26,36,20,0.35);
}
.logo {
  cursor:pointer; display:flex; align-items:center; gap:0.6rem;
}
.logo img { height:48px; width:auto; object-fit:contain; }
.logo span { font-size:0.65rem; color:rgba(255,255,255,0.6); font-family:'Raleway',sans-serif; font-weight:400; letter-spacing:0.18em; text-transform:uppercase; margin-left:0.3rem; }
nav a {
  color:rgba(212,174,90,0.7); text-decoration:none; margin-left:2rem;
  font-size:0.75rem; font-weight:600; letter-spacing:0.15em; text-transform:uppercase;
  transition:color 0.2s;
}
nav a:hover { color:var(--gold-light); }

/* ── PAGES ── */
.page { display:none; }
.page.active { display:block; }

/* ── BOX IMAGES ── */
.card-cover img { width:100%; height:100%; object-fit:contain; object-position:center; transition: transform 0.4s ease; background:var(--cream-dark); }
.game-card:hover .card-cover img { transform: scale(1.07); }
.card-cover:hover { opacity:0.92; }
.card-cover:hover::after { content:'👁 Voir la fiche'; position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.55); color:#fff; font-size:0.7rem; text-align:center; padding:0.4rem; font-family:'Raleway',sans-serif; letter-spacing:0.05em; }
.detail-cover img { width:100%; height:100%; object-fit:cover; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,0.3); }
.card-cover.img-cover { padding:0; overflow:hidden; height:auto; aspect-ratio:1/1; }
.img-fallback { font-size:3rem; }

/* ══ HERO ══ */
.hero {
  background: var(--green);
  background-image: linear-gradient(160deg, #111C0E 0%, #1E3419 40%, #2C4A28 100%);
  padding: 4.5rem 3rem 3.5rem;
  display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:center;
  position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent);
}
.hero h1 {
  font-family:'Cinzel Decorative',serif;
  font-size: clamp(1.6rem,3.5vw,2.8rem);
  color: var(--cream); line-height:1.2; font-weight:700;
  position:relative;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.hero h1 em { color:var(--gold-light); font-style:normal; display:block; font-size:0.75em; margin-top:0.2rem; }
.hero p { color:rgba(245,240,230,0.5); font-size:0.92rem; line-height:1.8; margin-top:1.1rem; max-width:460px; font-weight:300; }
.stats { display:flex; gap:2.5rem; margin-top:2rem; }
.stat-num { font-family:'Cinzel',serif; font-size:2rem; color:var(--gold-light); font-weight:700; line-height:1; }
.stat-label { font-size:0.65rem; color:rgba(245,240,230,0.35); text-transform:uppercase; letter-spacing:0.12em; margin-top:0.2rem; }
.hero-deco { font-size:6rem; opacity:0.06; position:relative; }

/* ── DIVIDER ── */
.divider-ornament {
  text-align:center; padding:0.5rem 0; background:var(--cream-dark);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  color:var(--gold); font-size:0.9rem; letter-spacing:0.5em; opacity:0.6;
}

/* ── FILTER BAR ── */
.filter-bar {
  background: var(--cream-dark);
  background-image: linear-gradient(to bottom, #EDE5D4, #E5DCCB);
  padding:0.85rem 3rem;
  display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap;
  border-bottom:2px solid var(--border);
  position:sticky; top:72px; z-index:99;
  box-shadow:0 2px 8px rgba(44,74,40,0.08);
}
.filter-row {
  display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; width:100%;
}
.filter-row + .filter-row {
  padding-top:0.55rem;
  border-top:1px solid var(--border);
  margin-top:0.2rem;
}
.filter-label { font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.15em; color:var(--green-light); margin-right:0.3rem; }
.filter-btn {
  padding:0.3rem 1rem; border-radius:2px;
  border:1px solid rgba(44,74,40,0.25);
  background:transparent; font-family:'Raleway',sans-serif;
  font-size:0.73rem; font-weight:500; cursor:pointer;
  transition:all 0.2s; color:var(--text);
  letter-spacing:0.05em;
}
.filter-btn.active { background:var(--green); border-color:var(--green); color:var(--gold-light); font-weight:600; }
.filter-btn:hover:not(.active) { background:rgba(44,74,40,0.08); border-color:var(--green-light); color:var(--green); }
.search-wrap { margin-left:auto; }
.search-wrap input {
  padding:0.35rem 1rem; border-radius:2px;
  border:1px solid rgba(44,74,40,0.25);
  background:var(--white); font-family:'Raleway',sans-serif;
  font-size:0.75rem; width:180px; outline:none; transition:border-color 0.2s;
  color:var(--text);
}
.search-wrap input:focus { border-color:var(--green-light); }

/* ── SECTION ── */
.section { padding:2.5rem 3rem; }
.section-header { display:flex; align-items:center; gap:1.2rem; margin-bottom:2rem; }
.section-title {
  font-family:'Cinzel',serif; font-size:1.2rem;
  color:var(--green); white-space:nowrap; font-weight:600;
}
.section-title::before { content:'— '; color:var(--gold); }
.section-count {
  font-size:0.7rem; color:var(--gold); font-weight:600;
  background:var(--gold-pale); border:1px solid rgba(184,146,42,0.3);
  padding:0.2rem 0.7rem; border-radius:2px; letter-spacing:0.05em;
}
.section-line { flex:1; height:1px; background:linear-gradient(90deg, var(--border), transparent); }

/* ── GAME CARDS ── */
.game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1.2rem; }
.game-card {
  background:var(--white);
  border-radius:3px; overflow:hidden;
  box-shadow:0 2px 8px rgba(44,74,40,0.08), 0 0 0 1px rgba(44,74,40,0.07);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
  cursor:pointer;
}
.game-card:hover { transform:translateY(-6px); box-shadow:0 16px 35px rgba(44,74,40,0.16), 0 0 0 1px rgba(44,74,40,0.1); }
.game-card.hidden { display:none; }
.card-cover { height:140px; display:flex; align-items:center; justify-content:center; font-size:3rem; position:relative; overflow:hidden; }
.card-badge {
  position:absolute; top:8px; right:8px;
  background:var(--green); color:var(--gold-light);
  font-size:0.55rem; font-weight:600; text-transform:uppercase; letter-spacing:0.1em;
  padding:0.2rem 0.55rem; border-radius:1px;
}
.card-year {
  position:absolute; bottom:8px; left:8px;
  background:rgba(0,0,0,0.45); color:rgba(255,255,255,0.85);
  font-size:0.58rem; padding:0.12rem 0.45rem; border-radius:2px;
  font-family:'Raleway',sans-serif; font-weight:500;
}
.card-body { padding:1rem 1.1rem; border-top:2px solid var(--gold-pale); }
.card-title {
  font-family:'Cinzel',serif; font-size:0.85rem;
  font-weight:600; margin-bottom:0.5rem; line-height:1.3;
  color:var(--green);
}
.card-meta { display:flex; gap:0.7rem; flex-wrap:wrap; margin-bottom:0.6rem; }
.meta-item { font-size:0.7rem; color:var(--text-light); }
.card-desc {
  font-size:0.75rem; line-height:1.55; color:var(--text-light);
  margin-bottom:0.7rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:0.6rem; border-top:1px solid var(--border);
}
.difficulty { font-size:0.62rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; padding:0.16rem 0.5rem; border-radius:2px; }
.diff-easy { background:#DFF0D8; color:#2D6A2D; }
.diff-medium { background:#FCF3D0; color:#7A6010; }
.diff-hard { background:#F2DEDE; color:#8B2020; }
.diff-expert { background:#E8DFF0; color:#4A2870; }
.view-btn {
  display:inline-flex; align-items:center; gap:0.35rem;
  font-size:0.65rem; font-weight:700; cursor:pointer;
  font-family:'Raleway',sans-serif; letter-spacing:0.1em; text-transform:uppercase;
  border:none; border-radius:2px;
  background:linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
  color:var(--gold-light);
  padding:0.42rem 0.9rem;
  box-shadow:0 2px 6px rgba(26,36,20,0.25);
  transition:all 0.2s;
}
.view-btn:hover {
  background:linear-gradient(135deg, var(--green-mid) 0%, var(--green-light) 100%);
  color:var(--cream);
  box-shadow:0 4px 12px rgba(26,36,20,0.35);
  transform:translateY(-1px);
}
.pdf-btn {
  display:inline-flex; align-items:center; gap:0.28rem;
  font-size:0.62rem; font-weight:600; cursor:pointer;
  border:none; border-radius:2px;
  background:rgba(184,146,42,0.1);
  box-shadow: inset 0 0 0 1px rgba(184,146,42,0.35);
  font-family:'Raleway',sans-serif;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold); padding:0.22rem 0.6rem;
  text-decoration:none; transition:all 0.2s;
}
.pdf-btn:hover { 
  background:rgba(184,146,42,0.2);
  box-shadow: inset 0 0 0 1px rgba(184,146,42,0.7);
  color:var(--gold);
  transform:translateY(-1px);
}
.pdf-btn-detail {
  display:inline-flex; align-items:center; gap:0.6rem;
  font-size:0.72rem; font-weight:600; cursor:pointer;
  border:none; border-radius:2px;
  background:linear-gradient(135deg, rgba(184,146,42,0.18) 0%, rgba(212,174,90,0.10) 100%);
  font-family:'Raleway',sans-serif;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gold-light); padding:0.65rem 1.3rem;
  text-decoration:none; transition:all 0.25s;
  margin-top:1.2rem;
  position:relative; overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(212,174,90,0.3), 0 2px 12px rgba(0,0,0,0.2);
}
.pdf-btn-detail::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(212,174,90,0.15), rgba(212,174,90,0.05));
  opacity:0; transition:opacity 0.25s;
}
.pdf-btn-detail:hover { 
  color:var(--cream);
  box-shadow: inset 0 0 0 1px rgba(212,174,90,0.7), 0 4px 20px rgba(0,0,0,0.3);
  transform:translateY(-1px);
}
.pdf-btn-detail:hover::before { opacity:1; }
.pdf-btn-detail svg { flex-shrink:0; opacity:0.85; transition:opacity 0.2s; }
.pdf-btn-detail:hover svg { opacity:1; }
.no-results { text-align:center; padding:3rem; color:var(--text-light); display:none; font-style:italic; }
.no-results.visible { display:block; }

/* ══ GAME DETAIL PAGE ══ */
.detail-page { display:none; }
.detail-page.active { display:block; }

.detail-hero {
  background: var(--green);
  background-image: linear-gradient(160deg, #111C0E 0%, #1E3419 40%, #2C4A28 100%);
  padding: 2.5rem 3rem;
  display:grid; grid-template-columns:auto 1fr; gap:2.5rem; align-items:start;
  border-bottom:3px solid var(--gold);
}
.detail-cover {
  width:150px; height:195px; border-radius:4px; display:flex; align-items:center;
  justify-content:center; font-size:5rem; flex-shrink:0;
  box-shadow:0 12px 32px rgba(0,0,0,0.4);
}
.detail-cat { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.15em; color:var(--gold-light); font-weight:600; margin-bottom:0.5rem; }
.detail-title { font-family:'Cinzel Decorative',serif; font-size:clamp(1.3rem,2.5vw,2rem); color:var(--cream); font-weight:700; line-height:1.2; margin-bottom:1rem; text-shadow:0 2px 12px rgba(0,0,0,0.4); }
.detail-chips { display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.chip { background:rgba(255,255,255,0.06); border:1px solid rgba(212,174,90,0.25); color:rgba(245,240,230,0.7); font-size:0.76rem; padding:0.3rem 0.8rem; border-radius:2px; }
.chip strong { color:var(--gold-light); }
.detail-desc-hero { color:rgba(245,240,230,0.55); font-size:0.9rem; line-height:1.75; max-width:540px; font-weight:300; }
.back-btn {
  display:inline-flex; align-items:center; gap:0.4rem; color:rgba(212,174,90,0.5);
  font-size:0.72rem; cursor:pointer; border:none; background:none; font-family:'Raleway',sans-serif;
  margin-bottom:1.5rem; transition:color 0.2s; padding:0; letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
}
.back-btn:hover { color:var(--gold-light); }

.detail-body { padding:2.5rem 3rem; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.detail-section {
  background:var(--white); border-radius:3px; padding:1.6rem;
  box-shadow:0 2px 8px rgba(44,74,40,0.07);
  border:1px solid var(--border);
  border-top:3px solid var(--gold-pale);
}
.detail-section.full { grid-column:1/-1; }
.detail-section h3 {
  font-family:'Cinzel',serif; font-size:0.95rem;
  margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem;
  color:var(--green); font-weight:600;
  padding-bottom:0.6rem; border-bottom:1px solid var(--border);
  letter-spacing:0.05em;
}
.detail-section p { font-size:0.84rem; line-height:1.78; color:var(--text-light); }
.rules-list { list-style:none; counter-reset:step; }
.rules-list li { counter-increment:step; display:flex; gap:0.8rem; align-items:flex-start; margin-bottom:0.7rem; font-size:0.83rem; line-height:1.65; color:var(--text-light); }
.rules-list li::before { content:counter(step); background:var(--green); color:var(--gold-light); width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.68rem; font-weight:700; flex-shrink:0; margin-top:2px; }
.similar-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:0.8rem; }
.similar-card { background:var(--cream); border-radius:3px; padding:0.8rem; cursor:pointer; transition:transform 0.18s,border-color 0.18s; text-align:center; border:1px solid var(--border); }
.similar-card:hover { transform:translateY(-3px); border-color:var(--gold); }
.similar-emoji { font-size:2rem; margin-bottom:0.4rem; }
.similar-name { font-size:0.76rem; font-weight:500; color:var(--text); line-height:1.3; }
.video-wrap { background:#0A1208; border-radius:3px; overflow:hidden; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; border:1px solid var(--border); }
.video-placeholder { text-align:center; color:rgba(212,174,90,0.6); }
.video-placeholder .play-btn { font-size:3.5rem; display:block; margin-bottom:0.5rem; }
.video-placeholder p { font-size:0.82rem; color:rgba(245,240,230,0.4); }
.video-placeholder a { color:var(--gold-light); text-decoration:none; }
.video-placeholder a:hover { text-decoration:underline; }
.rating-stars { color:var(--gold); font-size:1.3rem; letter-spacing:0.1em; }

/* ── PAGE ACCUEIL ── */
.accueil-page { max-width:720px; margin:0 auto; padding:2.5rem 1.5rem 3rem; }
.accueil-intro {
  text-align:center; padding:2.5rem 1rem 2.5rem;
  border-bottom:1px solid var(--border); margin-bottom:2.5rem;
}
.accueil-intro .big-emoji { font-size:3rem; display:block; margin-bottom:1rem; }
.accueil-intro h1 {
  font-family:'Cinzel Decorative',serif;
  font-size:clamp(1.2rem,3.5vw,1.9rem);
  color:var(--green); line-height:1.3; margin-bottom:1.2rem;
}
.accueil-intro .lead {
  font-size:1.05rem; line-height:1.9; color:var(--text-light);
  font-style:italic; max-width:560px; margin:0 auto;
}
.accueil-block {
  background:var(--white); border-radius:6px; padding:2rem 2rem 1.8rem;
  border:1px solid var(--border); border-left:4px solid var(--gold);
  margin-bottom:1.5rem;
  box-shadow:0 2px 10px rgba(44,74,40,0.07);
}
.accueil-block h2 {
  font-family:'Cinzel',serif; font-size:1.05rem; color:var(--green);
  margin-bottom:1.2rem; display:flex; align-items:center; gap:0.6rem;
  letter-spacing:0.03em;
}
.accueil-block p {
  font-size:0.92rem; line-height:1.95; color:var(--text-light); margin-bottom:1rem;
}
.accueil-block p:last-child { margin-bottom:0; }
.accueil-list {
  list-style:none; padding:0; margin:1rem 0 0;
}
.accueil-list li {
  font-size:0.92rem; line-height:1.75; color:var(--text-light);
  padding:0.45rem 0 0.45rem 1.6rem; position:relative;
  border-bottom:1px dashed rgba(44,74,40,0.1);
}
.accueil-list li:last-child { border-bottom:none; }
.accueil-list li::before { content:'✦'; color:var(--gold); position:absolute; left:0; font-size:0.65rem; top:0.55rem; }
.accueil-steps {
  counter-reset:step; list-style:none; padding:0; margin:0.5rem 0 1rem;
}
.accueil-steps li {
  counter-increment:step; font-size:0.92rem; line-height:1.75;
  color:var(--text-light); padding:0.6rem 0 0.6rem 3rem; position:relative;
  border-bottom:1px dashed rgba(44,74,40,0.1);
}
.accueil-steps li:last-child { border-bottom:none; }
.accueil-steps li::before {
  content:counter(step); position:absolute; left:0; top:0.5rem;
  background:var(--green); color:var(--gold-light);
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.72rem; font-weight:700; font-family:'Cinzel',serif;
}
.accueil-dates { border-left-color:var(--green); }
.dates-list { list-style:none; padding:0; margin:0; }
.dates-list li { padding:0.6rem 0; border-bottom:1px dashed rgba(44,74,40,0.12); }
.dates-list li:last-child { border-bottom:none; }
.date-label {
  font-family:'Cinzel',serif; font-size:1rem; color:var(--gold);
  font-weight:600; letter-spacing:0.05em;
  text-decoration:none; transition:color 0.2s;
}
.date-label:hover { color:var(--gold-light); text-decoration:underline; }
.accueil-cta {
  text-align:center; margin-top:2.5rem; padding:2.2rem 2rem;
  background: linear-gradient(135deg, #1A2C16, #2C4A28);
  border-radius:6px; border:1px solid rgba(212,174,90,0.2);
}
.accueil-cta p {
  font-family:'Cinzel Decorative',serif; font-size:clamp(0.85rem,2.5vw,1.1rem);
  color:var(--gold-light); line-height:1.7; margin-bottom:1.5rem;
}
.accueil-cta .cta-btn { margin:0 0.4rem 0.5rem; }
/* ── BOISSONS SUB-TABS ── */
.boissons-tabs {
  display:flex; flex-wrap:wrap; gap:0.4rem;
  padding:1rem 1.5rem 0.8rem; margin-bottom:1.5rem;
  background:#fff; border-radius:6px 6px 0 0;
  box-shadow:0 2px 8px rgba(44,74,40,0.07);
}
.boisson-tab {
  font-family:'Cinzel',serif; font-size:0.68rem; letter-spacing:0.03em;
  padding:0.4rem 0.85rem; border-radius:2px; cursor:pointer;
  border:1px solid var(--border); background:var(--cream);
  color:var(--green); transition:all 0.2s;
}
.boisson-tab:hover { border-color:var(--gold); color:var(--gold); }
.boisson-tab.active { background:var(--green); color:var(--gold-light); border-color:var(--green); }
.boisson-section { display:none; padding:0 1.5rem 2rem; }
.boisson-section.active { display:block; }
.boisson-header {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0.8rem;
  margin-bottom:1rem; padding-bottom:0.6rem;
  border-bottom:1px solid var(--border);
}
.boisson-header h3 {
  font-family:'Cinzel',serif; font-size:0.85rem; color:var(--green); margin:0; flex:1;
}
.boisson-price-tag {
  font-size:0.8rem; font-weight:700; color:var(--gold);
  background:rgba(184,146,42,0.1); padding:0.2rem 0.6rem; border-radius:2px;
  white-space:nowrap;
}
.boisson-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0.5rem;
}
.boisson-item {
  background:var(--white); border:1px solid var(--border);
  border-radius:3px; padding:0.6rem 0.8rem;
  font-size:0.82rem; color:var(--text-light); line-height:1.5;
  display:flex; align-items:center; gap:0.5rem;
}
.boisson-item strong { color:#1A2C16; }
.boisson-item em { color:var(--text-light); font-style:normal; }
.boisson-dot {
  width:12px; height:12px; border-radius:50%; flex-shrink:0;
  border:1px solid rgba(0,0,0,0.1);
}
.boisson-note {
  margin-top:0.8rem; font-size:0.78rem; color:var(--gold);
  font-style:italic; text-align:center;
}
.vins-tarifs {
  display:flex; gap:1rem; margin-top:1rem; flex-wrap:wrap;
}
.tarif-item {
  background:var(--green); color:var(--cream); border-radius:3px;
  padding:0.6rem 1.2rem; text-align:center; flex:1; min-width:80px;
}
.tarif-item span { display:block; font-size:0.7rem; opacity:0.8; margin-bottom:0.2rem; }
.tarif-item strong { font-size:1rem; color:var(--gold-light); }
.static-page { max-width:900px; margin:0 auto; padding:2.5rem 2rem; }
.static-hero {
  text-align:center; padding:3rem 1rem 2rem;
  border-bottom:1px solid var(--border); margin-bottom:2rem;
}
.static-hero h1 {
  font-family:'Cinzel Decorative',serif; font-size:clamp(1.4rem,3vw,2.2rem);
  color:var(--green); margin-bottom:0.8rem;
}
.static-hero p { color:var(--text-light); font-size:0.9rem; font-style:italic; }
.static-body {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.2rem;
}
.static-card {
  background:var(--white); border-radius:3px; padding:1.5rem;
  border:1px solid var(--border); border-top:3px solid var(--gold-pale);
  box-shadow:0 2px 8px rgba(44,74,40,0.06);
}
.static-card.full { grid-column:1/-1; }
.static-card h2 {
  font-family:'Cinzel',serif; font-size:0.95rem; color:var(--green);
  margin-bottom:0.8rem; padding-bottom:0.6rem; border-bottom:1px solid var(--border);
}
.static-card p { font-size:0.85rem; line-height:1.75; color:var(--text-light); }
.contact-link { color:var(--gold); font-weight:600; text-decoration:none; }
.contact-link:hover { color:var(--green); text-decoration:underline; }
.static-cta { grid-column:1/-1; text-align:center; padding:1rem 0; }
.cta-btn {
  display:inline-block; background:var(--green); color:var(--gold-light);
  font-family:'Cinzel',serif; font-size:0.8rem; font-weight:600;
  padding:0.75rem 2rem; border-radius:2px; text-decoration:none;
  letter-spacing:0.08em; transition:background 0.2s;
  border:1px solid var(--gold);
}
.cta-btn:hover { background:var(--green-mid); }
.map-container { grid-column:1/-1; background:var(--white); border-radius:3px; padding:1.5rem; border:1px solid var(--border); border-top:3px solid var(--gold-pale); }
.map-container h2 { font-family:'Cinzel',serif; font-size:0.95rem; color:var(--green); margin-bottom:0.5rem; }

/* ── CARTE TABS ── */
.carte-tabs {
  display:flex; gap:0.5rem; flex-wrap:wrap;
  padding:1rem 0 1.5rem;
  border-bottom:2px solid var(--border);
  margin-bottom:1.5rem;
}
.carte-tab {
  padding:0.5rem 1.3rem; border-radius:2px;
  border:1px solid rgba(44,74,40,0.25);
  background:transparent; font-family:'Cinzel',sans-serif;
  font-size:0.75rem; font-weight:600; cursor:pointer;
  transition:all 0.2s; color:var(--text); letter-spacing:0.05em;
}
.carte-tab.active { background:var(--green); border-color:var(--green); color:var(--gold-light); }
.carte-tab:hover:not(.active) { background:rgba(44,74,40,0.08); border-color:var(--green-light); color:var(--green); }
.carte-section { display:none; }
.carte-section.active { display:block; }

/* Footer */
footer {
  background: var(--green);
  background-image: linear-gradient(135deg, #1A2C16 0%, #2C4A28 100%);
  border-top:3px solid var(--gold);
  padding:1.5rem 3rem;
  display:flex; align-items:center; justify-content:space-between; margin-top:3rem;
}
footer span { font-size:0.72rem; color:rgba(212,174,90,0.45); letter-spacing:0.08em; }
footer span:first-child { color:rgba(212,174,90,0.65); font-weight:500; }

@keyframes fadeUp { from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none} }

/* ── HAMBURGER MENU ── */
.hamburger {
  display:none; align-items:center; cursor:pointer;
  background:none; border:none; padding:0.4rem;
}
.hamburger .menu-label {
  font-size:0.75rem; letter-spacing:0.15em;
  font-family:'Raleway',sans-serif; font-weight:700;
  color:var(--gold); text-decoration:underline;
  text-underline-offset:3px;
}
.mobile-menu {
  display:none; position:fixed; top:72px; left:0; right:0; bottom:0;
  background:var(--green);
  background-image:linear-gradient(160deg,#111C0E 0%,#2C4A28 100%);
  z-index:199; flex-direction:column; padding:2rem 1.5rem; gap:0.3rem;
  overflow-y:auto;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  color:rgba(212,174,90,0.8); text-decoration:none;
  font-family:'Cinzel',serif; font-size:1rem; font-weight:600;
  letter-spacing:0.1em; padding:1rem 0;
  border-bottom:1px solid rgba(212,174,90,0.12);
  transition:color 0.2s;
}
.mobile-menu a:hover { color:var(--gold-light); }
.mobile-menu a:last-child { border-bottom:none; }

@media(max-width:768px){
  header { padding:0 1rem; }
  nav { display:none; }
  .hamburger { display:flex; }
  .hero { grid-template-columns:1fr; padding:2.5rem 1.2rem; }
  .hero-deco { display:none; }
  .filter-bar { padding:0.8rem 1rem; top:72px; flex-wrap:wrap; }
  .search-wrap { margin-left:0; width:100%; }
  .search-wrap input { width:100%; }
  .section { padding:1.5rem 1.2rem; }
  .detail-hero { grid-template-columns:1fr; padding:1.5rem 1.2rem; }
  .detail-cover { width:110px; height:140px; font-size:3.5rem; }
  .detail-body { padding:1rem 1.2rem; grid-template-columns:1fr; }
  .static-page { padding:1.5rem 1rem; }
  .static-body { grid-template-columns:1fr; }
  .boissons-tabs { padding:0.8rem 1rem 0; gap:0.3rem; }
  .boisson-tab { font-size:0.6rem; padding:0.35rem 0.6rem; }
  .boisson-section { padding:0 1rem 2rem; }
  .boisson-grid { grid-template-columns:1fr; }
  .carte-tabs { gap:0.4rem; }
  .carte-tab { font-size:0.7rem; padding:0.45rem 0.8rem; }
  .banner-title { font-size:clamp(0.85rem,4vw,1.2rem); padding:0.75rem 1rem; }
}
/* ── QUIZ ── */
.quiz-page { max-width:680px; margin:0 auto; padding:2.5rem 1.5rem 3rem; }
.quiz-hero { text-align:center; padding:2rem 1rem 2.5rem; border-bottom:1px solid var(--border); margin-bottom:2rem; }
.quiz-hero h1 { font-family:'Cinzel Decorative',serif; font-size:clamp(1.1rem,3vw,1.7rem); color:var(--gold); margin-bottom:0.8rem; }
.quiz-hero p { font-size:0.92rem; color:var(--text-light); line-height:1.8; font-style:italic; }
.quiz-progress { display:flex; gap:0.4rem; justify-content:center; margin-bottom:2rem; }
.quiz-dot { width:10px; height:10px; border-radius:50%; background:var(--border); transition:all 0.3s; }
.quiz-dot.active { background:var(--gold); transform:scale(1.3); }
.quiz-dot.done { background:var(--green); }
.quiz-step { display:none; animation:fadeUp 0.35s both; }
.quiz-step.active { display:block; }
.quiz-question { font-family:'Cinzel',serif; font-size:1.05rem; color:var(--green); margin-bottom:1.5rem; text-align:center; line-height:1.5; }
.quiz-options { display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; }
.quiz-opt { background:var(--white); border:2px solid var(--border); border-radius:8px; padding:1.1rem 1rem; cursor:pointer; text-align:center; transition:all 0.2s; font-family:'Raleway',sans-serif; }
.quiz-opt:hover { border-color:var(--gold); background:rgba(184,146,42,0.06); transform:translateY(-2px); box-shadow:0 4px 12px rgba(44,74,40,0.1); }
.quiz-opt .opt-emoji { font-size:1.8rem; display:block; margin-bottom:0.5rem; }
.quiz-opt .opt-label { font-size:0.82rem; font-weight:600; color:var(--text); letter-spacing:0.04em; display:block; }
.quiz-opt .opt-sub { font-size:0.73rem; color:var(--text-light); display:block; margin-top:0.2rem; }
.quiz-results { display:none; animation:fadeUp 0.4s both; }
.quiz-results.active { display:block; }
.quiz-results-title { font-family:'Cinzel Decorative',serif; text-align:center; color:var(--gold); font-size:1.1rem; margin-bottom:0.5rem; }
.quiz-results-sub { text-align:center; color:var(--text-light); font-size:0.88rem; margin-bottom:1.8rem; font-style:italic; }
.quiz-game-card { display:flex; align-items:center; gap:1.2rem; background:var(--white); border:1px solid var(--border); border-left:4px solid var(--gold); border-radius:6px; padding:1rem 1.2rem; margin-bottom:1rem; cursor:pointer; transition:all 0.2s; box-shadow:0 2px 8px rgba(44,74,40,0.06); }
.quiz-game-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(44,74,40,0.12); border-left-color:var(--green); }
.quiz-game-card:first-of-type { border-left-color:var(--green); border-top:2px solid var(--green); }
.quiz-game-img { width:64px; height:80px; object-fit:cover; border-radius:6px; flex-shrink:0; background:var(--green-dark); }
.quiz-game-emoji { width:64px; height:80px; display:flex; align-items:center; justify-content:center; font-size:2.5rem; flex-shrink:0; background:linear-gradient(135deg,#1A2C16,#2C4A28); border-radius:6px; }
.quiz-game-info { flex:1; }
.quiz-game-name { font-family:'Cinzel',serif; font-size:0.95rem; color:var(--text); font-weight:700; margin-bottom:0.3rem; }
.quiz-game-meta { font-size:0.75rem; color:var(--text-light); margin-bottom:0.4rem; }
.quiz-game-desc { font-size:0.8rem; color:var(--text-light); line-height:1.6; }
.quiz-game-match { font-size:0.72rem; font-weight:700; color:var(--gold); font-family:'Cinzel',serif; }
.quiz-actions { display:flex; gap:1rem; justify-content:center; margin-top:2rem; flex-wrap:wrap; }
.quiz-restart { background:transparent; border:1px solid var(--border); color:var(--text-light); padding:0.6rem 1.4rem; border-radius:4px; cursor:pointer; font-family:'Raleway',sans-serif; font-size:0.8rem; transition:all 0.2s; }
.quiz-restart:hover { border-color:var(--gold); color:var(--gold); }
@media(max-width:520px){ .quiz-options { grid-template-columns:1fr 1fr; gap:0.6rem; } .quiz-opt { padding:0.8rem 0.6rem; } }