/* ============================================================
   CHAMPAGNE JEAN JOSSELIN — champagnes.css
   ============================================================ */

/* ── HERO ── */
.champ-hero{position:relative;overflow:hidden;padding:calc(var(--nav-height) + 72px) var(--gutter) 64px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.96) 100%),url('../img/illustrations/alliance-illus.webp') center 40%/cover no-repeat}
.champ-hero::after{display:none}
.champ-hero__inner{position:relative;z-index:1;text-align:center;padding:0 var(--gutter)}
.champ-hero__eye{display:block;font-family:var(--font-sans);font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.champ-hero h1{font-family:var(--font-serif);font-size:clamp(44px,6vw,80px);font-weight:300;color:var(--dark);line-height:1.05}
.champ-hero__sub{display:block;font-family:var(--font-serif);font-style:italic;font-size:clamp(15px,1.8vw,20px);color:var(--mid);margin:20px auto 0;max-width:560px;line-height:1.6;letter-spacing:.03em}
.champ-hero .hero__scroll{display:none}

/* ── SUBNAV ── */
.champ-subnav{position:sticky;top:var(--nav-height);z-index:90;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #f0ece4}
.champ-subnav__inner{display:flex;justify-content:center;gap:0;max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter)}
.champ-subnav__btn{font-family:var(--font-sans);font-size:10px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);padding:18px 30px;border:none;background:none;cursor:pointer;position:relative;transition:color .25s ease}
.champ-subnav__btn::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--gold);opacity:0;transition:opacity .25s ease}
.champ-subnav__btn:hover{color:var(--dark)}
.champ-subnav__btn.active{color:var(--gold)}
.champ-subnav__btn.active::after{opacity:1}
.champ-subnav__btn:focus-visible{outline:1px solid rgba(155,134,52,.45);outline-offset:-6px}

/* ── CATEGORY TITLE ── */
.champ-cat{text-align:center;padding:72px var(--gutter) 56px;border-top:1px solid #e8e4dc}
.champ-cat__label{display:block;font-family:var(--font-sans);font-size:9px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.champ-cat h2{font-family:var(--font-serif);font-size:clamp(26px,3.5vw,42px);font-weight:300;letter-spacing:.04em;color:var(--dark)}
.champ-cat p{max-width:540px;margin:14px auto 0;font-family:var(--font-sans);font-size:12px;color:var(--grey);line-height:1.85}

/* ── CARD ── */
.champ-card{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,6vw,96px);max-width:1100px;margin:0 auto 56px;padding:0 var(--gutter)}
.champ-card--rev{direction:rtl}.champ-card--rev>*{direction:ltr}

#cuvees-trad .section-scroll-separator,
#cuvees-excep .section-scroll-separator{padding:16px 0}

#cuvees-trad .section-scroll-separator__line,
#cuvees-excep .section-scroll-separator__line{height:28px}

.champ-card__visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:480px;overflow:visible}
.champ-card__illus{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18;border-radius:3px;mix-blend-mode:multiply}
.champ-card--aux-origines .champ-card__illus{background-size:138% auto;background-position:center center;opacity:.21}
.champ-card__illus-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none}
.champ-card__illus-img--audace-rose{
  inset:0;
  margin:auto;
  width:150%;
  height:auto;
  max-width:150%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;
  opacity:.26;
  z-index:0
}
.champ-card__bottle{position:relative;z-index:1;height:clamp(260px,28vw,400px);width:auto;object-fit:contain;filter:drop-shadow(0 24px 52px rgba(0,0,0,.14));transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.champ-card:hover .champ-card__bottle{transform:translateY(-10px) scale(1.06)}

.champ-card__num{display:block;font-family:var(--font-sans);font-size:10px;letter-spacing:.32em;color:var(--gold);margin-bottom:18px}
.champ-card__name{font-family:var(--font-serif);font-size:clamp(28px,3.3vw,46px);font-weight:300;letter-spacing:.04em;margin-bottom:8px;line-height:1.1;color:var(--dark)}
.champ-card__type{display:block;font-family:var(--font-sans);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.champ-card__desc{font-family:var(--font-serif);font-size:15px;line-height:1.88;color:var(--mid);margin-bottom:28px;font-style:italic}
.champ-card__meta{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;margin-bottom:22px}
.champ-card__meta-item label{display:block;font-family:var(--font-sans);font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);margin-bottom:5px}
.champ-card__meta-item p{font-family:var(--font-sans);font-size:11px;line-height:1.7;color:var(--dark)}
.champ-card__awards{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px;padding-top:24px;border-top:1px solid #e8e4dc}
.champ-card__award-badge{display:block;margin:0;padding:0;border:none;background:none}
.champ-card__award{height:56px;width:auto;max-width:none;max-height:none;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(20%) contrast(1.04) saturate(.94);transition:filter .3s ease,transform .3s ease,opacity .3s ease;opacity:.9}
.champ-card__award:hover{filter:grayscale(0%) contrast(1.06) saturate(1);transform:scale(1.08);opacity:1}

/* ── EXCEPTION SECTION ── */
.champ-excep{background:var(--bg-alt);padding:0 0 80px}
.champ-excep .champ-cat{border-top:none;padding-top:80px}

/* ── CTA ── */
.champ-cta{text-align:center;padding:80px var(--gutter)}

/* ── DOUBLE PANEL — Symbolique & histoire ── */
.champ-card__panels{display:grid;align-items:start}
.champ-card__panel{grid-area:1/1;position:relative;transition:opacity .4s ease,transform .4s ease}
.champ-card__panel.panel-b{opacity:0;transform:translateY(8px);pointer-events:none}
.champ-card__info.show-detail .panel-a{opacity:0;transform:translateY(-8px);pointer-events:none}
.champ-card__info.show-detail .panel-b{opacity:1;transform:translateY(0);pointer-events:auto}

.champ-card__toggle{display:inline-block;background:none;border:none;cursor:pointer;font-family:var(--font-sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding:0;margin-top:22px;transition:opacity .25s ease}
.champ-card__toggle:hover{opacity:.6}

.champ-card__detail-block{margin-bottom:22px}
.champ-card__detail-block:last-of-type{margin-bottom:0}
.champ-card__detail-block label{display:block;font-family:var(--font-sans);font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);margin-bottom:7px}
.champ-card__detail-block p{font-family:var(--font-sans);font-size:12px;line-height:1.85;color:var(--mid)}
.champ-card__detail-hero{margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid #e8e4dc}
.champ-card__detail-hero--drawer{margin-bottom:30px}
.champ-card__detail-kicker{display:block;font-family:var(--font-sans);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.champ-card__detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.champ-card__detail-tags span{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border:1px solid #e8e4dc;background:#fff;font-family:var(--font-sans);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dark)}
.champ-card__detail-intro{font-family:var(--font-serif);font-size:16px;line-height:1.8;color:var(--mid);font-style:italic}
.champ-card__specs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.champ-card__spec{padding:12px 14px;border:1px solid #e8e4dc;background:#fcfbf8}
.champ-card__spec span{display:block;font-family:var(--font-sans);font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.champ-card__spec p{margin:0;font-family:var(--font-sans);font-size:11px;line-height:1.75;color:var(--dark)}
.champ-card__rewards{margin:0;padding:0;list-style:none}
.champ-card__rewards li{position:relative;padding-left:18px;font-family:var(--font-sans);font-size:12px;line-height:1.85;color:var(--mid);margin-bottom:8px}
.champ-card__rewards li:last-child{margin-bottom:0}
.champ-card__rewards li::before{content:'';position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--gold)}

.has-champ-drawer{overflow:hidden}
.champ-drawer{position:fixed;inset:0;z-index:1200;pointer-events:none}
.champ-drawer__overlay{position:absolute;inset:0;background:rgba(26,26,26,.28);opacity:0;transition:opacity .35s ease}
.champ-drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(620px,92vw);background:#fff;box-shadow:-24px 0 70px rgba(26,26,26,.14);transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;outline:none}
.champ-drawer__scroll{overflow:auto;padding:40px 34px 36px}
.champ-drawer__close{position:absolute;top:18px;right:18px;width:42px;height:42px;border:none;background:none;color:var(--dark);font-family:var(--font-sans);font-size:28px;line-height:1;cursor:pointer}
.champ-drawer__eyebrow{display:block;font-family:var(--font-sans);font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.champ-drawer__title{font-family:var(--font-serif);font-size:clamp(34px,4vw,48px);font-weight:300;letter-spacing:.03em;line-height:1.05;color:var(--dark);margin-bottom:10px;padding-right:54px}
.champ-drawer__subtitle{font-family:var(--font-sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);margin-bottom:28px}
.champ-drawer.is-open{pointer-events:auto}
.champ-drawer.is-open .champ-drawer__overlay{opacity:1}
.champ-drawer.is-open .champ-drawer__panel{transform:translateX(0)}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .champ-card{gap:clamp(32px,4vw,56px)}
}
@media(max-width:768px){
  .champ-hero{padding:calc(var(--nav-height) + 56px) var(--gutter) 52px}
  .champ-subnav__btn{padding:16px 14px;font-size:9px;letter-spacing:.18em}
  .champ-card{grid-template-columns:1fr;gap:32px;margin-bottom:40px}
  .champ-card--rev{direction:ltr}
  .champ-card__visual{min-height:300px}
  .champ-card__illus-img--audace-rose{width:132%;max-width:132%;max-height:94%}
  .champ-hero__inner,
  .champ-cat,
  .champ-card__info,
  .champ-card__panel,
  .champ-card__meta-item,
  .champ-card__detail-block,
  .champ-card__detail-hero,
  .champ-cta,
  .champ-drawer__scroll{text-align:center}
  .champ-card__meta{grid-template-columns:1fr;justify-items:center}
  .champ-card__awards,
  .champ-card__detail-tags{justify-content:center}
  .champ-card__specs{justify-items:center}
  .champ-card__spec{text-align:center}
  .champ-card__rewards li{padding-left:0;text-align:center}
  .champ-card__rewards li::before{display:none}
  .champ-cat{padding:56px var(--gutter) 40px}
  #cuvees-trad .section-scroll-separator,
  #cuvees-excep .section-scroll-separator{padding:12px 0}
  #cuvees-trad .section-scroll-separator__line,
  #cuvees-excep .section-scroll-separator__line{height:24px}
  .champ-card__specs{grid-template-columns:1fr}
  .champ-drawer{display:flex;align-items:flex-end}
  .champ-drawer__panel{position:relative;top:auto;right:auto;bottom:0;width:100%;height:min(82vh,760px);max-height:82vh;border-top-left-radius:18px;border-top-right-radius:18px;transform:translateY(100%);box-shadow:0 -18px 50px rgba(26,26,26,.16)}
  .champ-drawer.is-open .champ-drawer__panel{transform:translateY(0)}
  .champ-drawer__scroll{padding:34px 22px 26px}
  .champ-drawer__title{font-size:34px}
  .champ-drawer__subtitle{font-size:10px;line-height:1.6}
}