* { box-sizing: border-box; }
body {
  margin: 0;
  background: #140b22;
  color: #f4ecdd;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  overflow-x: hidden;
}
h1, h2, h3, .disp {
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: 0.04em;
  margin: 0;
}
a { color: inherit; text-decoration: none; }
a.link-gold { color: #dcb877; }
a.link-gold:hover { color: #efd9a4; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: 2px;
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: #cda45e; color: #140b22; }
.btn-ghost { background: transparent; border-color: rgba(220,184,119,0.55); color: #f4ecdd; }
.eyebrow {
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #dcb877;
}
.placeholder-box {
  border: 1px dashed rgba(244,236,221,0.35);
  background: rgba(244,236,221,0.04);
  color: #cbb9df;
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 14px;
  text-align: center;
}
.card {
  background: #1e1130;
  border: 1px solid rgba(220,184,119,0.16);
}
.divider {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #dcb877, transparent);
}
.navlink { font-family: "Cinzel", serif; font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: #e5dcc9; }
.navlink:hover { color: #dcb877; }
.chip { padding: 8px 16px; border: 1px solid rgba(220,184,119,0.35); font-family: "Cinzel", serif; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #e5dcc9; cursor: pointer; background:none; }
.chip-active { background: #cda45e; color: #140b22; border-color: #cda45e; }
.tab { padding: 14px 22px; font-family: "Cinzel", serif; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #a998bd; border-bottom: 2px solid transparent; cursor: pointer; background: none; border-left: none; border-right: none; border-top: none; }
.tab-active { color: #f4ecdd; border-bottom-color: #cda45e; }
.field {
  border: 1px solid rgba(220,184,119,0.3);
  background: rgba(244,236,221,0.03);
  padding: 14px 16px;
  font-family: 'EB Garamond', serif;
  color: #f4ecdd;
  font-size: 14px;
  width: 100%;
  outline: none;
}
.field::placeholder { color: #8a7aa3; font-style: italic; }
textarea.field { resize: vertical; font-family: 'EB Garamond', serif; }

/* ---------- Boutique / produits ---------- */
.product-card { display:flex; flex-direction:column; position:relative; transition: border-color .2s; }
.product-card:hover { border-color: rgba(220,184,119,0.5); }
.product-img { height:170px; margin:14px 14px 0; border-radius:2px; overflow:hidden; background:#140b22; }
.product-img img { width:100%; height:100%; object-fit:cover; display:block; }
.product-cat-tag { font-family:'Cinzel',serif; font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:#8a7aa3; }
.product-name { font-family:'EB Garamond',serif; font-size:15px; color:#f4ecdd; line-height:1.35; }
.product-price { font-family:'Cinzel',serif; font-size:14px; color:#dcb877; }
.add-check { display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border:1px solid rgba(220,184,119,0.4); font-family:'Cinzel',serif; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:#e5dcc9; cursor:pointer; user-select:none; }
.add-check.checked { background:#cda45e; color:#140b22; border-color:#cda45e; }
.add-check input { display:none; }

/* cart bar */
#cart-bar { position:fixed; left:0; right:0; bottom:0; z-index:150; background:#0e0719; border-top:1px solid rgba(220,184,119,0.35); padding:14px 24px; display:none; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; box-shadow:0 -6px 20px rgba(0,0,0,0.4); }
#cart-bar.visible { display:flex; }
#cart-bar .cart-count { font-family:'Cinzel',serif; font-size:13px; color:#f4ecdd; }
#cart-bar .cart-total { font-family:'Cinzel',serif; font-size:13px; color:#dcb877; }

/* category tabs */
.cat-filter-wrap { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* marquee */
.marquee-outer { overflow:hidden; position:relative; width:100%; }
.marquee-track { display:flex; gap:18px; width:max-content; animation: marquee-scroll 55s linear infinite; }
.marquee-outer:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-card { flex: 0 0 auto; width:220px; background:#1e1130; border:1px solid rgba(220,184,119,0.22); }
.marquee-card .mq-img { height:140px; background:#140b22; overflow:hidden; }
.marquee-card .mq-img img { width:100%; height:100%; object-fit:cover; display:block; }

/* audio toggle */
#audio-toggle { position:fixed; bottom:24px; left:24px; z-index:200; width:50px; height:50px; border-radius:50%; background:#1e1130; border:1px solid rgba(220,184,119,0.4); display:flex; align-items:center; justify-content:center; cursor:pointer; }
#audio-toggle svg { color:#dcb877; }

/* responsive: stack grids progressively — desktop → tablet → mobile */

/* TABLET (≤1024px) */
@media (max-width: 1024px) {
  .grid-6 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .grid-4 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* SMALL TABLET / LARGE PHONE (≤900px) */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-6 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .shop-layout { grid-template-columns: 1fr !important; }
  .two-col { grid-template-columns: 1fr !important; }
  .header-row { justify-content: center !important; }
  .marquee-card { width:170px; }
  h1 { font-size: 34px !important; }
  /* reduce the standard 48px side gutter used throughout the inline styles */
  div[style*="48px"] { padding-left: 26px !important; padding-right: 26px !important; }
}

/* PHONE (≤560px) */
@media (max-width: 560px) {
  h1 { font-size: 27px !important; line-height: 1.25 !important; }
  h2 { font-size: 20px !important; }
  .grid-4 { grid-template-columns: 1fr !important; }
  .grid-6 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  div[style*="48px"] { padding-left: 16px !important; padding-right: 16px !important; }
  .btn { padding: 13px 22px !important; font-size: 11px !important; letter-spacing: 0.1em !important; }
  .navlink { font-size: 10.5px !important; }
  .header-row { padding-top: 12px !important; padding-bottom: 12px !important; gap: 12px !important; }
  .marquee-card { width: 140px; }
  .marquee-card .mq-img { height: 105px; }
  #cart-bar { flex-direction: column; gap: 8px; padding: 12px 16px !important; }
  #audio-toggle { bottom: 16px !important; left: 16px !important; width: 44px !important; height: 44px !important; }
  a[aria-label="Nous contacter sur WhatsApp"] { bottom: 16px !important; right: 16px !important; width: 50px !important; height: 50px !important; }
  .eyebrow { font-size: 10.5px !important; letter-spacing: 0.22em !important; }
}

/* make all images/forms behave on any width */
img { max-width: 100%; height: auto; }
input, textarea, select { max-width: 100%; }

/* ======================================================
   HÉROS ANIMÉ (v5) : défilé en arrière-plan, carte gauche,
   modes promotion / événement
   ====================================================== */
.hero2 { position:relative; overflow:hidden; isolation:isolate; padding:96px 48px 88px; text-align:center;
  background:radial-gradient(circle at 50% 20%, #241536 0%, #140b22 62%); min-height:560px; }
.hero2 .hero-fleur { position:absolute; top:-120px; left:50%; transform:translateX(-50%); opacity:0.16; z-index:-3; }
.hero-fond { position:absolute; inset:0; z-index:-2; opacity:0; transition:opacity 1.2s ease; pointer-events:none; }
.hero-fond.on { opacity:1; }
.hero-fond .hf-flou { position:absolute; inset:-40px; background-size:cover; background-position:center; filter:blur(34px) brightness(.28) saturate(1.1); }
.hero-fond .hf-img { position:absolute; left:50%; top:50%; width:min(62vh,520px); height:min(62vh,520px); object-fit:cover;
  transform:translate(-50%,-50%) scale(1); border-radius:4px; opacity:.32; filter:brightness(.8); box-shadow:0 0 120px rgba(0,0,0,.6); }
.hero-fond.on .hf-img { animation:hero-zoom 7.2s ease-out forwards; }
@keyframes hero-zoom { to { transform:translate(-50%,-50%) scale(1.1); } }
.hero-voile { position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 50%, rgba(20,11,34,.82), rgba(20,11,34,.4) 80%); }
.hero-contenu { position:relative; max-width:760px; margin:0 auto; }

.hero-carte { position:absolute; left:32px; top:50%; width:236px; z-index:5; text-align:left;
  background:rgba(14,7,25,.88); border:1px solid rgba(220,184,119,.4); padding:16px 16px 18px;
  opacity:0; transform:translate(-30px,-50%); transition:opacity .9s ease, transform .9s ease; pointer-events:none; }
.hero-carte.on { opacity:1; transform:translate(0,-50%); pointer-events:auto; }
.hero-carte .hc-vignette { height:130px; margin-bottom:12px; overflow:hidden; background:#140b22; }
.hero-carte .hc-vignette img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-carte h3 { font-family:'Cinzel',serif; font-size:14.5px; line-height:1.35; color:#efd9a4; margin:0 0 8px; letter-spacing:.03em; }
.hero-carte p { font-size:15px; line-height:1.45; color:#ddd0ee; margin:0 0 12px; }
.hc-prix { display:block; font-family:'Cinzel',serif; font-size:16px; color:#f4ecdd; }
.hc-prix s { display:block; font-size:12.5px; opacity:.55; }
.hc-dates { display:block; font-size:14px; color:#dcb877; }
.hero-carte a { display:inline-block; margin-top:12px; font-size:15px; color:#dcb877; border-bottom:1px solid currentColor; }
.hc-compte { display:flex; gap:6px; margin-top:10px; }
.hc-compte div { flex:1; text-align:center; background:rgba(220,184,119,.12); border:1px solid rgba(220,184,119,.35); padding:5px 0; }
.hc-compte b { display:block; font-family:'Cinzel',serif; font-size:15px; color:#f4ecdd; }
.hc-compte small { font-size:10.5px; color:#cbb9df; }

.hero-badge { display:none; position:absolute; right:6%; top:14%; z-index:4; width:150px; height:150px; border-radius:50%;
  background:#b8342f; color:#fff; place-items:center; text-align:center; font-family:'Cinzel',serif; transform:rotate(-10deg);
  box-shadow:0 0 0 7px rgba(184,52,47,.25); }
.hero-badge b { display:block; font-size:44px; line-height:1; }
.hero-badge span { font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.mode-promo .hero-badge { display:grid; }
.hero-bandeau { display:none; width:max-content; max-width:100%; margin:0 auto 26px; padding:8px 18px; background:#b8342f; color:#fff;
  font-family:'Cinzel',serif; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; }
.mode-evenement .hero-bandeau { background:#cda45e; color:#140b22; }
.mode-promo .hero-bandeau, .mode-evenement .hero-bandeau { display:block; }

/* prix promo dans la boutique */
.product-price s { color:#8a7aa3; font-size:12px; margin-right:6px; }
.promo-tag { position:absolute; top:22px; left:22px; z-index:2; background:#b8342f; color:#fff; font-family:'Cinzel',serif; font-size:12px; padding:4px 9px; }
.product-card.surligne { border-color:#dcb877; box-shadow:0 0 0 2px rgba(220,184,119,.5); }

@media (max-width: 1100px) {
  .hero2 { display:flex; flex-direction:column; min-height:0; }
  .hero-contenu { order:1; }
  .hero-carte { order:2; position:relative; left:auto; top:auto; width:min(360px,100%); margin:36px auto 0; transform:translateY(20px); }
  .hero-carte.on { transform:none; }
  .hero-carte .hc-vignette { height:150px; }
  .hero-badge { width:104px; height:104px; top:14px; right:14px; }
  .hero-badge b { font-size:30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fond.on .hf-img { animation:none; }
}
button#audio-toggle { padding:0; color:#dcb877; font:inherit; }
button#audio-toggle.actif { background:#cda45e; color:#140b22; }
@media (max-width: 900px) { .hero2 { padding:64px 22px 56px; } }
button#audio-toggle.actif svg { color:#140b22; }

/* ======================================================
   TÉLÉPHONE & TABLETTE (v5.1)
   ====================================================== */
.menu-btn { display:none; background:none; border:1px solid rgba(220,184,119,.4); color:#dcb877; width:44px; height:44px; border-radius:3px; padding:0; cursor:pointer; align-items:center; justify-content:center; }
@media (max-width: 900px) {
  .header-row { display:grid !important; grid-template-columns:auto 1fr auto; align-items:center; gap:12px !important; padding:12px 16px !important; }
  .header-row > a:first-child { grid-column:1; }
  .menu-btn { display:inline-flex; grid-column:3; grid-row:1; }
  .header-row > div:last-child { grid-column:2; grid-row:1; justify-self:end; gap:16px !important; }
  .nav-liens { display:none !important; grid-column:1 / -1; flex-direction:column; align-items:stretch !important; gap:0 !important; border-top:1px solid rgba(220,184,119,.16); margin-top:4px; }
  .nav-liens.ouvert { display:flex !important; }
  .nav-liens .navlink { display:block; padding:14px 4px; font-size:13px !important; border-bottom:1px solid rgba(220,184,119,.1); }
  .marquee-track { animation-duration:40s; }
}
@media (max-width: 560px) {
  .header-row img { height:44px !important; width:44px !important; }
  .header-row .disp { font-size:15px !important; }
  .header-row > div:last-child svg:not(:first-child) { display:none; }
  /* grilles d'articles : 2 colonnes compactes au lieu d'une seule colonne géante */
  .grid-4 { grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:12px !important; }
  .product-img { height:130px; margin:10px 10px 0; }
  .product-name { font-size:14px; }
  .product-card > div:last-child { padding:10px 10px 12px !important; }
  .add-check { padding:9px 6px; font-size:10px; }
  .hero2 h1 { font-size:26px !important; }
}

/* ======================================================
   FORMULAIRES, AVIS, FAQ (v5.2)
   ====================================================== */
.form-msg { font-size:15px; line-height:1.5; margin:0; }
.form-msg:empty { display:none; }
.form-msg.ok { color:#9fe0b0; }
.form-msg.err { color:#ff9c96; }
button[disabled] { opacity:.6; cursor:wait; }
.avis-grille { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.avis-grille > .avis-carte { flex:0 1 340px; }
.avis-carte { margin:0; background:#1e1130; border:1px solid rgba(220,184,119,.22); padding:24px 22px; text-align:left; display:flex; flex-direction:column; gap:12px; }
.avis-etoiles { color:#dcb877; letter-spacing:3px; font-size:16px; }
.avis-etoiles span { color:#4a3a62; }
.avis-carte blockquote { margin:0; font-style:italic; font-size:16px; line-height:1.6; color:#e5dcc9; }
.avis-carte figcaption { font-family:'Cinzel',serif; font-size:12px; letter-spacing:.06em; color:#dcb877; }
.avis-vide { grid-column:1 / -1; text-align:center; font-style:italic; color:#cbb9df; margin:0; }
.avis-form { max-width:620px; margin:40px auto 0; display:flex; flex-direction:column; gap:14px; text-align:left; }
.avis-form h3 { font-size:18px; color:#f4ecdd; text-align:center; }
.choix-note { display:flex; align-items:center; gap:4px; }
.choix-note span { color:#cbb9df; margin-right:8px; }
.choix-note button { background:none; border:0; padding:2px; font-size:28px; line-height:1; color:#4a3a62; cursor:pointer; }
.choix-note button.on { color:#dcb877; }
.deux-champs { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.faq-liste { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { background:#1e1130; border:1px solid rgba(220,184,119,.2); }
.faq-item summary { cursor:pointer; list-style:none; padding:18px 48px 18px 20px; position:relative; font-family:'Cinzel',serif; font-size:14.5px; letter-spacing:.03em; color:#f4ecdd; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; position:absolute; right:20px; top:50%; transform:translateY(-50%); color:#dcb877; font-size:22px; }
.faq-item[open] summary::after { content:'−'; }
.faq-item p { margin:0; padding:0 20px 20px; font-size:16.5px; line-height:1.65; color:#d6cbe6; }
.icone-lien { display:inline-flex; color:#f4ecdd; }
.icone-lien:hover { color:#dcb877; }
@media (max-width: 900px) { .avis-grille > .avis-carte { flex-basis:100%; } }
@media (max-width: 560px) { .deux-champs { grid-template-columns:1fr; } .newsletter-form { flex-direction:column; gap:10px !important; } }

/* photo de la devanture cliquable vers Google Maps (v5.3) */
.carte-boutique { position:relative; display:block; height:280px; overflow:hidden; border:1px solid rgba(220,184,119,.3); text-decoration:none; }
.carte-boutique img { width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; transition:transform .5s ease; }
.carte-boutique:hover img { transform:scale(1.04); }
.cb-legende { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:8px; padding:14px 16px;
  background:linear-gradient(transparent, rgba(14,7,25,.92)); color:#efd9a4; font-family:'Cinzel',serif; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; }