:root{
  --brun:         #3E2A20;
  --fond:         #FBF3E6;
  --card:         #FFFFFF;
  --caramel:      #C97B45;
  --caramel-dark: #A15E2F;
  --or:           #D9A441;
  --text-soft:    #6B5A4E;
  --line:         rgba(62,42,32,0.12);
  --font-display: 'Cormorant Garamond', serif;
--font-body:    'Mulish', sans-serif;
--font-script:  'Caveat', cursive;
  --radius: 6px;
  --container: 1180px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{ margin:0; background: var(--fond); color: var(--brun); font-family: var(--font-body); line-height: 1.65; }
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 32px; }


.price-grid.single{ grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }


.eyebrow{ font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--caramel-dark); font-weight: 600; margin: 0 0 12px; }
.eyebrow.center{ text-align:center; }
.page-hero .eyebrow.center{ font-family: var(--font-display); font-size: 38px; font-weight: 400; letter-spacing:0.01em; text-transform:none; color: var(--caramel-dark); }
.section-title{ font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 8px; }
.section-title.center{ text-align:center; }
.section-intro{ max-width: 560px; color: var(--text-soft); }
.section-intro.center{ margin: 0 auto 40px; text-align:center; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid transparent; cursor:pointer; }
.btn-primary{ background: var(--caramel-dark); color: #fff; }
.btn-primary:hover{ background: var(--brun); }
.btn-ghost{ background: transparent; border-color: var(--brun); color: var(--brun); }
.btn-on-photo-solid{ background: var(--or); color: var(--brun); }
.btn-on-photo-outline{ background: rgba(0,0,0,0.2); border-color:#fff; color:#fff; backdrop-filter: blur(2px); }

.site-header{ position: sticky; top:0; z-index: 50; background: var(--brun); transition: transform 0.35s ease; }
.site-header.header-hidden{ transform: translateY(-100%); }
.header-inner{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; padding: 10px 32px; gap: 16px; }
.brand{ grid-column: 2; text-align:center; font-family: var(--font-script); font-weight: 600; font-size: 30px; color: #fff; }
.brand small{ display:block; font-size: 9px; letter-spacing: 0.2em; color: rgba(255,255,255,0.65); margin-top: 3px; }
.main-nav{ grid-column: 1/-1; order:3; display:flex; justify-content:center; gap: 34px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; padding: 8px 32px 12px; text-transform: uppercase; }
.main-nav a{ color: rgba(255,255,255,0.75); padding: 4px 0; border-bottom: 2px solid transparent; }
.main-nav a.active, .main-nav a:hover{ color: var(--or); border-bottom-color: var(--or); }
.header-icons{ grid-column:1; display:flex; align-items:center; }
.header-cta{ grid-column:3; display:flex; justify-content:flex-end; }
.header-cta .btn{ border-color: rgba(255,255,255,0.5); color:#fff; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:4px; cursor:pointer; }
.nav-toggle span{ width:20px; height:1.5px; background:#fff; display:block; }

.hero-full{ position: relative; height: 82vh; min-height: 520px; display:flex; align-items:flex-end; overflow:hidden; }
.hero-media{ position:absolute; inset:0; background:linear-gradient(135deg,#E9C9A0,#C97B45); overflow:hidden; }
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.hero-content{ position:relative; z-index:2; width:100%; padding:0 32px 50px; text-align:center; color:#fff; }
.hero-eyebrow{ font-size:12px; letter-spacing:0.24em; text-transform:uppercase; margin-bottom:22px; }
.hero-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.section{ padding: 90px 0; }
.section-alt{ background: var(--card); }
.section-header-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
.link-underline{ font-size:12px; letter-spacing:0.06em; text-transform:uppercase; border-bottom:1px solid var(--caramel); color:var(--caramel-dark); padding-bottom:2px; }

.page-hero{ padding: 56px 0 8px; text-align:center; }
.page-hero + .section{ padding-top: 20px; }

.category-block{ margin-bottom: 56px; }
.category-block h2{ font-family: var(--font-display); font-size: 26px; font-weight:400; color: var(--caramel-dark); margin: 0 0 24px; text-align:center; }
.price-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.price-card{ background: var(--card); padding: 28px 30px; }
.price-card h3{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brun);
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--caramel);
}
.price-card ul li{ display:flex; align-items:baseline; gap:8px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.price-card ul li:last-child{ border-bottom:none; }
.price-card .dots{ flex:1; border-bottom:1px dotted var(--line); transform:translateY(-4px); }
.price-card .price{ font-family: var(--font-display); font-weight:700; font-size: 16px; color: var(--caramel-dark); white-space:nowrap; }
.price-card .note{ font-size:12.5px; color:var(--text-soft); font-style:italic; margin-top:10px; }

.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gallery-row{ margin-bottom: 44px; }
.gallery-row-title{ font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--caramel-dark); margin: 0 0 18px; text-align: center; }
.gallery-item{ aspect-ratio: 1; position: relative; }
.gallery-caption{ position:absolute; bottom:0; left:0; right:0; background: rgba(0,0,0,0.55); color:#fff; font-size: 12px; padding: 8px 10px; text-align:center; }
.gallery-grid.teaser{ grid-template-columns: repeat(4, 1fr); }
.gallery-item{ aspect-ratio: 3/4; display:flex; align-items:center; justify-content:center; color: rgba(201,123,69,0.6); font-size:12px; background:#F3E2C9; border:none; border-radius: var(--radius); overflow:hidden; transition: transform .35s ease; }
.gallery-item:hover{ transform: translateY(-6px) scale(1.02); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; }

.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.address-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; margin-bottom:20px; }
.address-card h3{ font-family: var(--font-display); font-size:20px; margin:0 0 10px; color:var(--caramel-dark); }
.address-card p{ margin:4px 0; font-size:14.5px; }
.address-card a.btn{ margin-top:14px; }
.social-row{ display:flex; gap:20px; margin-top:20px; font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
.social-row a{ border-bottom:1px solid var(--brun); padding-bottom:2px; }
.social-row--icons{ gap: 32px; }
.social-row--icons a{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  border-bottom:none; color: var(--brun);
}
.social-row--icons a:hover{ color: var(--caramel-dark); }
.social-row--icons span{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; }
.map-embed{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; min-height:220px; margin-bottom:16px; }
.map-embed iframe{ display:block; }

.site-footer{ background: var(--brun); color: rgba(255,255,255,0.7); padding: 50px 0 26px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap:36px; margin-bottom:36px; }
.footer-brand{ font-family: var(--font-display); font-size:22px; color:#fff; margin-bottom:12px; }
.footer-col h4{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin:0 0 14px; }
.footer-col a, .footer-col span{ display:block; font-size:14px; margin-bottom:9px; color: rgba(255,255,255,0.7); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.15); padding-top:20px; font-size:12px; text-align:center; color:rgba(255,255,255,0.5); }

@media (max-width: 880px){
  .price-grid, .contact-grid{ grid-template-columns:1fr; }
  .gallery-grid, .gallery-grid.teaser{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; text-align:center; }
  .header-inner{ grid-template-columns:44px 1fr 44px; }
  .header-icons{ grid-column:1; } .header-cta{ grid-column:3; } .brand{ grid-column:2; }
  .main-nav{ position:absolute; left:0; right:0; top:100%; background:var(--brun); flex-direction:column; align-items:center; padding:20px 24px; display:none; }
  .main-nav.open{ display:flex; }
  .header-cta .btn{ display:none; }
  .nav-toggle{ display:flex; }
}


.menu-section{ padding-top: 12px; }
 
/* --- Onglets de catégories --- */
.menu-tabs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px 28px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.menu-tabs::-webkit-scrollbar{ display:none; }
 
.menu-tab{
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.menu-tab:hover{ border-color: var(--caramel); color: var(--brun); }
.menu-tab.active{
  background: var(--brun);
  border-color: var(--brun);
  color: #fff;
}
 
/* --- Panneaux --- */
.menu-panel{ display:none; }
.menu-panel.active{ display:block; animation: menuFade .3s ease; }
 
@media (prefers-reduced-motion: reduce){
  .menu-panel.active{ animation: none; }
}
 
@keyframes menuFade{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}
 
.menu-panel .category-block{ margin-bottom: 0; }
 
/* --- Lignes regroupées (plusieurs produits, même prix) --- */
.price-card--grouped ul li{ align-items:flex-start; }
.price-card--grouped .items{
  flex: 1;
  line-height: 1.5;
}
.price-card--grouped .dots{ display:none; }
.price-card--grouped .price{ flex: 0 0 auto; padding-left: 10px; }
 
/* --- Carte "parfum au choix, prix unique" (trompe-l'œil) --- */
.price-card--flavors .flavor-price-row{
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.price-card--flavors .flavor-price-row .price{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--caramel-dark);
}
.price-card--flavors .flavor-price-row .price small{
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-soft);
  margin-left: 4px;
}
.flavor-tags{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}
.flavor-tags span{
  font-size: 12.5px;
  color: var(--brun);
  background: var(--fond);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
}
.flavor-group-label{
  display:block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.flavor-divider{
  height: 1px;
  background: var(--line);
  margin: 16px 0;
}
 
@media (max-width: 880px){
  .menu-tabs{ padding-bottom: 22px; margin-bottom: 4px; }
  .menu-tab{ font-size: 12.5px; padding: 9px 15px; }
  .price-card--grouped .items{ font-size: 13.5px; }
}