/* -----------------------------------------------
   TOKENS - Pages produit Oddicy
   Scoped to #oddicy-page to avoid conflicts with
   oddicy-global.css (nav/footer tokens).
----------------------------------------------- */
#oddicy-page {
  --black:        #0a0a0b;
  --deep:         #111115;
  --surface:      #16161c;
  --surface2:     #1e1e26;
  --border:       rgba(255,255,255,0.07);
  --border2:      rgba(255,255,255,0.13);
  --violet:       #7c5cbf;
  --vlight:       #9b7dd4;
  --vdim:         rgba(124,92,191,0.13);
  --vglow:        rgba(124,92,191,0.07);
  --white:        #f4f1ee;
  --muted:        rgba(244, 241, 238, 0.8);
  --muted2:       rgba(244,241,238,0.68);
  --accent:       #8A76F0;
  --green:        rgba(110,220,130,0.9);
  --green-dim:    rgba(80,160,100,0.09);
  --f-serif:  'Cormorant Garamond', Georgia, serif;
  --f-sans:   'DM Sans', system-ui, sans-serif;
  --f-mono:   'DM Mono', 'Courier New', monospace;
  --page-x: 60px;
  --side-w: 380px;
}

#oddicy-page { background:var(--black); color:var(--white); font-family:var(--f-sans); font-weight:300; overflow-x:clip; cursor:none; }

/* CURSOR, defini dans oddicy-global.css, pas ici */

/* STICKY CTA BAR */
.sticky-bar { position:sticky; top:0; z-index:150; background:rgba(14,14,18,.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border); padding:12px var(--page-x); display:flex; align-items:center; justify-content:space-between; gap:16px; transform:translateY(-110%); opacity:0; transition:transform .35s ease, opacity .35s ease; }
.sticky-bar.visible { transform:translateY(0); opacity:1; }
.sticky-left { display:flex; align-items:center; gap:20px; min-width:0; }
.sticky-title { font-family:var(--f-serif); font-size:18px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-chips { display:flex; gap:8px; flex-wrap:nowrap; }
.sticky-chip { font-size:11px; color:var(--muted); background:var(--surface); border:1px solid var(--border); padding:3px 9px; border-radius:20px; white-space:nowrap; }
.sticky-right { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.sticky-price { font-family:var(--f-serif); font-size:22px; font-weight:300; white-space:nowrap; }
.sticky-price small { font-family:var(--f-sans); font-size:11px; color:var(--muted); }

/* BUTTONS, scopés #oddicy-page pour écraser oddicy-global */
#oddicy-page .btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--f-sans); font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border-radius:2px; cursor:pointer; border:none; transition:background .2s, transform .15s; }
#oddicy-page .btn::after { display:none; }
#oddicy-page .btn-primary { background:var(--violet); color:var(--white); padding:14px 30px; }
#oddicy-page .btn-primary:hover { background:var(--vlight); transform:translateY(-2px); box-shadow:none; }
#oddicy-page .btn-outline { background:transparent; color:var(--muted2); padding:14px 20px; border:1px solid var(--border2); }
#oddicy-page .btn-outline:hover { color:var(--white); border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.04); }
#oddicy-page .btn-sm { padding:9px 20px; font-size:12px; }
#oddicy-page .btn-full { width:100%; justify-content:center; }
/* HERO */
.hero { position:relative; min-height:92vh; display:flex; flex-direction:column; justify-content:flex-end; padding:80px var(--page-x) 80px; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; background-repeat:no-repeat; background-color:#0a0a0b; }
.hero-bg::before { content:''; position:absolute; inset:0; background:linear-gradient(150deg, rgba(12,12,22,.82) 0%, rgba(25,22,46,.7) 35%, rgba(14,13,24,.78) 60%, rgba(9,9,13,.92) 100%); }
.hero-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 58% 64% at 64% 28%, rgba(100,70,180,.22) 0%, transparent 55%),radial-gradient(ellipse 38% 34% at 20% 74%, rgba(70,50,120,.1) 0%, transparent 50%),linear-gradient(to bottom, transparent 30%, rgba(10,10,11,.55) 62%, var(--black) 100%); }
.hero-grid { position:absolute; inset:0; z-index:1; background-image:linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.25) 25%, transparent 80%); }
.hero-body { position:relative; z-index:2; max-width:780px; }
.dossier-tag { display:inline-flex; align-items:center; gap:9px; font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--vlight); border:1px solid rgba(124,92,191,.28); padding:5px 13px; border-radius:1px; margin-bottom:24px; background:var(--vdim); }
.dossier-tag::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--vlight); box-shadow:0 0 8px var(--vlight); animation:blink 2.2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.hero-loc { font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:13px; }
.hero-title { font-family:var(--f-serif); font-size:clamp(52px, 7.5vw, 96px); font-weight:300; line-height:.98; letter-spacing:-.02em; margin-bottom:20px; }
.hero-title em { font-style:italic; color:var(--accent); }
.hero-hook { font-size:17px; line-height:1.72; color:var(--muted2); max-width:500px; margin-bottom:34px; font-weight:300; }
.hero-hook strong { color:var(--white); font-weight:400; }
.hero-pills { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:38px; }
.pill { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted2); background:var(--surface); border:1px solid var(--border2); padding:8px 14px; border-radius:2px; }
.pill strong { color:var(--white); font-weight:500; }
.hero-ctas { display:flex; gap:11px; flex-wrap:wrap; }
#oddicy-page .hero-date { position:absolute; right:var(--page-x); bottom:80px; z-index:2; text-align:center; border:1px solid var(--border2); border-radius:3px; overflow:hidden; background:var(--surface); width:110px; aspect-ratio:1/1; display:flex; flex-direction:column; padding-bottom:0; }
.date-day { font-family:'Barlow Condensed', var(--f-sans); font-size:48px; font-weight:700; line-height:1; padding-top: 14px; }
.date-dow { font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted2); padding:2px 0 0; }
.date-year { background:var(--violet); color:#fff; font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; padding:5px 0; margin-top:auto; flex-shrink:0; }

/* PAGE BODY - 2-col layout */
.page-body { display:grid; grid-template-columns:1fr var(--side-w); }
.main-col { padding:72px var(--page-x); border-right:1px solid var(--border); min-width:0; }
.s-block { margin-bottom:72px; }
.s-label { font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--vlight); margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.s-label::before { content:''; width:16px; height:1px; background:var(--vlight); display:block; flex-shrink:0; }
.s-title { font-family:var(--f-serif); font-size:clamp(28px, 3.5vw, 46px); font-weight:300; line-height:1.1; letter-spacing:-.01em; margin-bottom:20px; }
.s-title em { font-style:italic; color:var(--accent); }
.prose { font-size:15px; line-height:1.88; color:var(--muted2); }
.prose p { margin-bottom:16px; }
.prose p:last-child { margin-bottom:0; }
.prose strong { color:var(--white); font-weight:400; }
.pull-quote { margin:36px 0; padding:26px 30px; border-left:2px solid var(--violet); background:var(--vglow); border-radius:0 3px 3px 0; }
.pull-quote p { font-family:var(--f-serif); font-size:21px; font-weight:300; font-style:italic; line-height:1.6; color:rgba(244,241,238,.88); }
/* Gallery */
.gallery { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3px; border-radius:3px; overflow:hidden; margin-top:8px; }
.g-cell { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.g-cell:first-child { aspect-ratio:16/9; }
.g-cell:not(:first-child) { aspect-ratio:1/1; }
.g-cell-bg { position:absolute; inset:0; transition:transform .4s ease; background-size:cover; background-position:center; background-repeat:no-repeat; }
.g-cell:hover .g-cell-bg { transform:scale(1.05); }
.g-label { position:relative; z-index:1; font-family:var(--f-serif); font-size:13px; font-style:italic; color:rgba(244,241,238,.22); }

/* Specs */
.specs-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:3px; overflow:hidden; margin-top:8px; }
.spec { background:var(--surface); padding:18px 22px; }
.spec-k { font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; display:block; }
.spec-v { font-size:14px; color:var(--white); font-weight:400; }
.spec-s { font-size:12px; color:var(--muted); margin-top:2px; }

/* Value block (experience + inclus) */
.value-block { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:4px; overflow:hidden; margin-top:8px; }
.vb-col { background:var(--surface); }
.vb-head { padding:20px 24px 16px; border-bottom:1px solid var(--border); font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.feature-list { display:flex; flex-direction:column; }
.feat { display:flex; gap:14px; padding:20px 24px; border-bottom:1px solid var(--border); align-items:flex-start; transition:background .2s; }
.feat:last-child { border-bottom:none; }
.feat:hover { background:var(--surface2); }
.feat-icon { width:36px; height:36px; flex-shrink:0; background:var(--vdim); border:1px solid rgba(124,92,191,.2); border-radius:2px; display:flex; align-items:center; justify-content:center; }
.feat-icon img { width:20px; height:20px; object-fit:contain; display:block; filter:brightness(0) invert(1); opacity:.95; }
.feat h4 { font-family:var(--f-serif); font-size:17px; font-weight:400; margin-bottom:3px; }
.feat p { font-size:13px; color:var(--muted); line-height:1.6; }
.inc-list { display:flex; flex-direction:column; }
.inc-item { display:flex; align-items:flex-start; gap:12px; padding:20px 24px; border-bottom:1px solid var(--border); }
.inc-item:last-child { border-bottom:none; }
.inc-check { width:22px; height:22px; flex-shrink:0; margin-top:1px; background:var(--green-dim); border:1px solid rgba(110,220,130,.22); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--green); }
.inc-item h4 { font-family:var(--f-serif); font-size:17px; font-weight:400; margin-bottom:3px; }
.inc-item p { font-size:13px; color:var(--muted); line-height:1.6; }

/* For Who */
.forwho-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
.fw-card { background:var(--surface); border:1px solid var(--border); border-radius:3px; padding:22px; transition:border-color .25s; }
.fw-card:hover { border-color:rgba(124,92,191,.25); }
.fw-icon { display:block; width:28px; height:28px; margin-bottom:10px; flex-shrink:0; }
.fw-icon--accent { background-color:var(--accent); -webkit-mask-image:var(--fw-mask); mask-image:var(--fw-mask); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
.fw-title { font-family:var(--f-serif); font-size:19px; font-weight:400; margin-bottom:6px; }
.fw-body { font-size:13px; color:var(--muted); line-height:1.6; }

/* Timeline */
.timeline { display:flex; flex-direction:column; margin-top:8px; }
.tl { display:grid; grid-template-columns:44px 1fr; position:relative; }
.tl::before { content:''; position:absolute; left:21px; top:32px; bottom:-8px; width:1px; background:var(--border); }
.tl:last-child::before { display:none; }
.tl-dot { width:11px; height:11px; border-radius:50%; background:var(--surface); border:1px solid var(--vlight); box-shadow:0 0 0 4px var(--vglow); flex-shrink:0; margin-top:8px; }
.tl-left { display:flex; justify-content:center; padding-top:4px; }
.tl-body { padding:2px 0 30px 16px; }
.tl-body h4 { font-family:var(--f-serif); font-size:20px; font-weight:400; margin-bottom:5px; }
.tl-body p { font-size:13px; color:var(--muted); line-height:1.65; }
/* Reviews */
.reviews-row { display:flex; gap:14px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; margin-top:8px; }
.reviews-row::-webkit-scrollbar { display:none; }
.rv-card { flex-shrink:0; width:268px; background:var(--surface); border:1px solid var(--border); border-radius:3px; padding:22px; transition:border-color .25s; }
.rv-card:hover { border-color:rgba(124,92,191,.28); }
.rv-stars { display:flex; gap:2px; margin-bottom:12px; }
.star { color:var(--vlight); font-size:12px; }
.rv-text { font-family:var(--f-serif); font-size:16px; font-weight:300; font-style:italic; line-height:1.6; color:rgba(244,241,238,.82); margin-bottom:16px; }
.rv-foot { font-size:11px; color:var(--muted); padding-top:12px; border-top:1px solid var(--border); }
.rv-name { color:var(--white); font-weight:500; font-size:12px; margin-bottom:2px; }

/* FAQ */
.faq { display:flex; flex-direction:column; margin-top:8px; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item:first-child { border-top:1px solid var(--border); }
.faq-q { width:100%; text-align:left; background:transparent; border:none; color:var(--white); padding:18px 0; display:flex; align-items:center; justify-content:space-between; font-family:var(--f-serif); font-size:18px; font-weight:400; cursor:pointer; gap:14px; }
.faq-q:hover { color:var(--accent); }
.faq-arr { font-size:13px; color:var(--vlight); transition:transform .25s; flex-shrink:0; }
.faq-item.open .faq-arr { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .32s ease; }
.faq-item.open .faq-a { max-height:280px; }
.faq-a-in { padding:0 0 18px; font-size:14px; line-height:1.78; color:var(--muted2); }

/* SIDEBAR */
.side-col { padding:32px 28px; }
.booking-card { background:var(--surface); border:1px solid var(--border2); border-radius:4px; overflow:hidden; position:sticky; top:80px; z-index:100; max-height:calc(100vh - 96px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
.bc-head { background:var(--surface2); padding:24px 26px; border-bottom:1px solid var(--border); }
.bc-price-row { display:flex; align-items:baseline; gap:7px; margin-bottom:5px; }
.bc-p-main { font-family:var(--f-serif); font-size:44px; font-weight:300; line-height:1; }
.bc-p-sep { font-family:var(--f-serif); font-size:26px; color:var(--muted); }
.bc-p-max { font-family:var(--f-serif); font-size:26px; font-weight:300; color:var(--muted); }
.bc-p-unit { font-size:12px; color:var(--muted); }
.bc-offer { display:inline-flex; align-items:center; gap:6px; margin-top:10px; background:var(--green-dim); border:1px solid rgba(110,220,130,.2); color:var(--green); font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:1px; }
.bc-body { padding:22px 26px; }
.urgency { background:rgba(255,140,40,.07); border:1px solid rgba(255,140,40,.15); border-radius:2px; padding:9px 12px; margin-bottom:18px; display:flex; align-items:center; gap:7px; font-size:12px; color:rgba(255,185,80,.9); }
.bc-label { font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; display:block; }
.time-slots { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.slot { padding:7px 12px; border:1px solid var(--border2); border-radius:2px; font-family:var(--f-mono); font-size:12px; color:var(--muted2); cursor:pointer; transition:all .18s; user-select:none; }
.slot:hover { border-color:var(--vlight); color:var(--white); }
.slot.active { border-color:var(--vlight); background:var(--vdim); color:var(--white); }
.slot.few { border-color:rgba(255,160,50,.32); color:rgba(255,190,90,.85); }
.slot.sold { opacity:.28; pointer-events:none; text-decoration:line-through; }
.qty-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.qty-ctrl { display:flex; align-items:center; gap:10px; }
.qty-btn { width:30px; height:30px; border:1px solid var(--border2); border-radius:2px; background:transparent; color:var(--white); font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .18s; font-family:var(--f-mono); line-height:1; }
.qty-btn:hover { border-color:var(--vlight); background:var(--vdim); }
.qty-n { font-family:var(--f-serif); font-size:28px; font-weight:300; min-width:24px; text-align:center; }
.bc-total { padding:14px 0 16px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.bc-total-label { font-size:13px; color:var(--muted); }
.bc-total-price { font-family:var(--f-serif); font-size:30px; font-weight:300; }
.bc-actions { display:flex; flex-direction:column; gap:8px; }
.bc-feedback { margin-top:10px; padding:9px 12px; border-radius:2px; font-size:12px; text-align:center; }
.bc-feedback.success { background:rgba(110,220,130,.1); border:1px solid rgba(110,220,130,.2); color:var(--green); }
.bc-feedback.error { background:rgba(255,100,100,.08); border:1px solid rgba(255,100,100,.18); color:rgba(255,140,140,.9); }
.btn.loading { opacity:.6; pointer-events:none; }
.reassure { margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.re-item { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); }
.re-icon { font-size:12px; flex-shrink:0; }
/* Map widget */
.map-widget { margin-top:14px; background:var(--surface); border:1px solid var(--border); border-radius:3px; padding:18px; }
.map-label { font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; display:block; }
.map-addr { font-size:14px; color:var(--white); margin-bottom:3px; }
.map-sub { font-size:12px; color:var(--muted); margin-bottom:12px; }
.map-placeholder { width:100%; aspect-ratio:16/9; background:var(--surface2); border:1px solid var(--border); border-radius:2px; overflow:hidden; position:relative; }
.map-placeholder iframe { filter:invert(90%) hue-rotate(200deg) saturate(.45) brightness(.75) contrast(1.1); }
.map-link { display:block; text-align:center; margin-top:9px; font-size:12px; color:var(--vlight); text-decoration:none; }
.map-link:hover { color:var(--accent); }
.share-row { margin-top:10px; background:var(--surface); border:1px solid var(--border); border-radius:3px; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.share-btns { display:flex; gap:7px; }
.share-btn { background:var(--surface2); border:1px solid var(--border); color:var(--muted2); padding:6px 10px; border-radius:2px; font-size:11px; cursor:pointer; font-family:var(--f-sans); transition:color .2s; }
.share-btn:hover { color:var(--white); }

/* OTHER EVENTS */
.others { background:var(--deep); border-top:1px solid var(--border); padding:72px var(--page-x); }
.others-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:3px; overflow:hidden; margin-top:40px; }
.oc { background:var(--surface); text-decoration:none; color:inherit; position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:320px; }
.oc:hover { background:var(--surface2); }
.oc[style*="--oc-bg"] { background:var(--surface); }
.oc[style*="--oc-bg"]:hover { background:var(--surface); }
.oc-bg { position:absolute; inset:0; z-index:0; background-image:var(--oc-bg); background-size:cover; background-position:center; transition:transform .45s var(--ease-expo, ease); }
.oc-bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(22,22,28,.35) 0%, rgba(22,22,28,.72) 45%, rgba(22,22,28,.94) 100%); }
.oc:hover .oc-bg { transform:scale(1.04); }
.oc-content { position:relative; z-index:1; padding:28px; display:flex; flex-direction:column; flex:1; }
.oc::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--violet); transform:scaleX(0); transform-origin:left; transition:transform .28s; z-index:2; }
.oc:hover::after { transform:scaleX(1); }
.oc-tag { font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--vlight); margin-bottom:9px; }
.oc-city { font-size:11px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; margin-bottom:5px; }
.oc-title { font-family:var(--f-serif); font-size:22px; font-weight:400; margin-bottom:10px; margin-top:150px; }
.oc-meta { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; font-size:12px; color:var(--muted); padding-top:14px; margin-top:auto; border-top:1px solid var(--border); flex-wrap:wrap; }
.oc-meta-date { flex:1; min-width:0; }
.oc-meta-price { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end; gap:6px 10px; text-align:right; }
.oc-price-old { text-decoration:line-through; opacity:.55; font-size:11px; }
.oc-price-now { color:var(--white); font-weight:500; font-size:13px; }
.oc-discount { font-family:var(--f-mono); font-size:10px; letter-spacing:.08em; color:var(--coral, #EE7071); }
.oc-btn { display:inline-flex; align-self:flex-start; margin-top:16px; padding:8px 14px; font-family:var(--f-sans); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--border2); border-radius:2px; color:var(--muted2); transition:color .2s, border-color .2s, background .2s; }
.oc:hover .oc-btn { color:var(--white); border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.04); }

/* MOBILE BOOKING BAR */
.mob-booking-bar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:200; background:rgba(14,14,18,.98); backdrop-filter:blur(14px); border-top:1px solid var(--border2); padding:14px 20px; align-items:center; justify-content:space-between; gap:12px; }
.mob-price { font-family:var(--f-serif); font-size:26px; font-weight:300; }
.mob-price small { font-family:var(--f-sans); font-size:11px; color:var(--muted); }
.mob-price-sub { font-size:11px; color:var(--muted); margin-top:1px; }

/* Booking drawer (mobile) */
.booking-drawer { position:fixed; inset:0; z-index:9000; display:flex; flex-direction:column; justify-content:flex-end; visibility:hidden; pointer-events:none; }
.drawer-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); opacity:0; transition:opacity .3s; }
.drawer-sheet { position:relative; z-index:1; background:var(--deep); border-top:1px solid var(--border2); border-radius:12px 12px 0 0; padding:24px 24px 32px; max-height:90vh; overflow-y:auto; transform:translateY(100%); transition:transform .35s ease; }
.drawer-handle { width:36px; height:4px; background:var(--border2); border-radius:2px; margin:0 auto 20px; }
.drawer-close { position:absolute; top:14px; right:14px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--muted2); background:var(--surface); border:1px solid var(--border2); border-radius:50%; transition:color .2s, border-color .2s; z-index:2; cursor:pointer; line-height:1; padding:0; }
.drawer-close:hover { color:var(--white); border-color:rgba(255,255,255,.28); }
.booking-drawer.open { visibility:visible; pointer-events:all; }
.booking-drawer.open .drawer-backdrop { opacity:1; }
.booking-drawer.open .drawer-sheet { transform:translateY(0); }

/* ============================================================
   RESPONSIVE - TABLET (max 1100px)
   ============================================================ */
@media (max-width:1100px) {
  #oddicy-page { --page-x:40px; --side-w:320px; }
  .hero-title { font-size:clamp(44px, 7vw, 72px); }
  .hero-hook { font-size:16px; }
  .pull-quote p { font-size:19px; }
}

/* ============================================================
   RESPONSIVE - MOBILE (max 768px)
   ============================================================ */
@media (max-width:768px) {
  #oddicy-page { --page-x:20px; }

  /* Sticky bar */
  .sticky-bar { padding:10px 20px; }
  .sticky-title { font-size:15px; }
  .sticky-chips { display:none; }
  .sticky-price { font-size:18px; }

  /* Hero */
  .hero { padding:60px 20px 60px; min-height:80vh; }
  .hero-hook { font-size:15px; max-width:100%; }
  #oddicy-page .hero-date { display:none; }
  .hero-pills { gap:7px; }
  .pill { font-size:12px; padding:7px 12px; }
  .dossier-tag { font-size:9px; padding:4px 10px; margin-bottom:16px; }
  .hero-loc { font-size:10px; margin-bottom:10px; }
  .hero-ctas { gap:8px; }

  /* Buttons, reset oddicy-global overrides for product page */
  #oddicy-page .btn { font-family:var(--f-sans); font-size:13px; font-weight:500; letter-spacing:.08em; border-radius:2px; }
  #oddicy-page .btn-primary { padding:14px 24px; background:var(--violet); color:var(--white); }
  #oddicy-page .btn-outline { padding:14px 20px; background:transparent; color:var(--muted2); border:1px solid var(--border2); }
  #oddicy-page .btn-full { width:100%; justify-content:center; }
  #oddicy-page .btn-sm { padding:9px 16px; font-size:12px; }

  /* Page body, single column */
  .page-body { grid-template-columns:1fr; padding-bottom:80px; }
  .main-col { padding:48px 20px; border-right:none; border-bottom:1px solid var(--border); }
  .side-col { display:none; }

  /* Mobile booking bar */
  .mob-booking-bar { display:flex; }

  /* Gallery */
  .gallery { grid-template-columns:1fr 1fr; }
  .g-cell:first-child { grid-column:span 2; aspect-ratio:16/7; }
  .g-cell:not(:first-child) { aspect-ratio:4/3; }

  /* Value block */
  .value-block { grid-template-columns:1fr; }
  .vb-col:first-child { border-bottom:1px solid var(--border); }

  /* Specs */
  .specs-grid { grid-template-columns:1fr; }

  /* For Who */
  .forwho-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .fw-card { padding:18px; }
  .fw-title { font-size:17px; }
  .fw-body { font-size:12px; }

  /* FAQ */
  .faq-q { font-size:16px; padding:16px 0; }

  /* Reviews */
  .rv-card { width:240px; padding:18px; }
  .rv-text { font-size:15px; }

  /* Others */
  .others { padding:48px 20px calc(48px + 80px); }
  .others-grid { grid-template-columns:1fr; }
  .oc { min-height:260px; }
  .oc-title { margin-top:88px; font-size:20px; }
  .oc-content { padding:20px; }

  /* Drawer */
  .drawer-sheet .time-slots { gap:8px; }
  .drawer-sheet .slot { padding:8px 14px; }
  .drawer-sheet .bc-actions { gap:8px; }

  /* Pull quote */
  .pull-quote { padding:20px 22px; }
  .pull-quote p { font-size:18px; }
}

/* ============================================================
   RESPONSIVE - SMALL (max 480px)
   ============================================================ */
@media (max-width:480px) {
  .hero-title { font-size:clamp(40px, 11vw, 58px); }
  .s-title { font-size:clamp(26px, 8vw, 38px); }

  /* Hero CTAs stacked */
  .hero-ctas { flex-direction:column; }
  .hero-ctas .btn { width:100%; justify-content:center; }

  /* Sticky */
  .sticky-right .btn-sm { font-size:11px; padding:8px 16px; }

  /* For Who, single column on very small */
  .forwho-grid { grid-template-columns:1fr; }

  /* Others cards */
  .oc-title { margin-top:60px; font-size:18px; }
  .oc { min-height:220px; }

  /* Booking drawer */
  .drawer-sheet { padding:20px 20px 28px; }
  .bc-p-main { font-size:32px; }
  .bc-p-sep { font-size:20px; }
  .bc-p-max { font-size:20px; }
  .bc-total-price { font-size:24px; }

  /* Mob bar */
  .mob-price { font-size:22px; }
  .mob-booking-bar { padding:12px 16px; }
  #oddicy-page .mob-booking-bar .btn { padding:12px 18px; font-size:12px; }

  /* Timeline */
  .tl-body h4 { font-size:18px; }
  .tl-body p { font-size:12px; }
}