/* ============================================================
   BEOSIGNER — page-specific styles
   (boutique · fiche produit · application · partenaires)
   Built on the tokens in styles.css.
   ============================================================ */

/* Shared page header band (below fixed nav) */
.page-head { padding: 150px 0 0; position: relative; }
.breadcrumb { display: flex; gap: 10px; align-items: center; font-size: 12px; letter-spacing: .06em; color: var(--warm-mut); text-transform: uppercase; margin-bottom: 26px; }
.breadcrumb a { color: var(--warm-mut); transition: color .3s; }
.breadcrumb a:hover { color: var(--gold-400); }
.breadcrumb .sep { color: var(--warm-faint); }

.page-title { font-size: clamp(38px, 6vw, 76px); }
.page-intro { margin-top: 22px; max-width: 60ch; }

/* ============================================================
   BOUTIQUE
   ============================================================ */
.shop-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,72px); align-items: end; padding-bottom: 18px; }
.shop-hero .shop-hero-visual { position: relative; aspect-ratio: 16/11; border-radius: 8px; overflow: hidden; border: 1px solid var(--gold-line); }

/* Filter / sort bar */
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px 0; margin-top: 40px; border-top: 1px solid rgba(201,169,97,.14); border-bottom: 1px solid rgba(201,169,97,.14); position: sticky; top: 76px; z-index: 50;
  background: rgba(13,17,23,.86); backdrop-filter: blur(14px); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { font-size: 13px; letter-spacing: .02em; padding: 9px 18px; border-radius: 40px; border: 1px solid var(--gold-line); color: var(--warm-200); cursor: pointer; transition: all .3s var(--ease); white-space: nowrap; background: transparent; }
.chip:hover { border-color: var(--gold-500); color: var(--gold-300); }
.chip.active { background: var(--gold-500); color: var(--night-900); border-color: var(--gold-500); font-weight: 500; }
.shop-count { font-size: 13px; color: var(--warm-mut); }
.shop-count b { color: var(--gold-400); font-weight: 500; }

.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.shop-grid .product.wide { grid-column: span 3; }

/* Bundle band */
.bundle-band { position: relative; border: 1px solid var(--gold-line); border-radius: 12px; overflow: hidden; margin-top: 60px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.bundle-band .bb-visual { position: relative; min-height: 360px; }
.bundle-band .bb-body { padding: clamp(34px,4vw,60px); display: flex; flex-direction: column; justify-content: center; }
.bundle-band .bb-list { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 28px; }
.bundle-band .bb-list span { font-size: 14px; color: var(--warm-200); display: flex; align-items: center; gap: 10px; }
.bundle-band .bb-list span::before { content: "✓"; color: var(--gold-500); font-size: 12px; }
.bundle-price { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.bundle-price .now { font-family: var(--serif); font-size: 40px; color: var(--gold-400); }
.bundle-price .was { font-size: 17px; color: var(--warm-faint); text-decoration: line-through; }
.bundle-price .save { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-300); border: 1px solid var(--gold-line); padding: 4px 10px; border-radius: 3px; }

/* ============================================================
   FICHE PRODUIT
   ============================================================ */
.pdp { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px,4vw,68px); align-items: start; padding-top: 130px; }
.pdp-gallery { position: sticky; top: 110px; }
.pdp-main { position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; border: 1px solid var(--gold-line); }
.pdp-main .pbadge { position: absolute; top: 18px; left: 18px; z-index: 3; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 12px; }
.pdp-thumb { aspect-ratio: 1/1; border-radius: 6px; overflow: hidden; border: 1px solid rgba(201,169,97,.16); cursor: pointer; transition: border-color .3s; position: relative; }
.pdp-thumb:hover, .pdp-thumb.active { border-color: var(--gold-500); }

.pdp-info .stars { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--warm-mut); margin-bottom: 16px; }
.pdp-info .stars .s { color: var(--gold-400); letter-spacing: 2px; }
.pdp-title { font-family: var(--serif); font-size: clamp(34px,4.5vw,56px); color: var(--warm-100); line-height: 1.04; }
.pdp-sub { font-size: 17px; color: var(--warm-mut); margin: 16px 0 24px; max-width: 50ch; }
.pdp-price { display: flex; align-items: baseline; gap: 14px; margin-bottom: 28px; }
.pdp-price .now { font-family: var(--serif); font-size: 38px; color: var(--gold-400); }
.pdp-price .tax { font-size: 13px; color: var(--warm-faint); }

.pdp-divider { height: 1px; background: rgba(201,169,97,.14); margin: 28px 0; }

/* variant selector */
.variant-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--warm-mut); margin-bottom: 12px; display: flex; justify-content: space-between; }
.variant-label b { color: var(--gold-300); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 14px; }
.variants { display: flex; gap: 10px; flex-wrap: wrap; }
.variant { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--gold-line); border-radius: 5px; cursor: pointer; transition: all .3s; min-width: 88px; background: transparent; }
.variant:hover { border-color: var(--gold-400); }
.variant.active { border-color: var(--gold-500); background: rgba(201,169,97,.08); }
.variant .vt { font-size: 14px; color: var(--warm-100); }
.variant .vp { font-size: 12px; color: var(--warm-mut); }

/* qty + buy */
.buy-row { display: flex; gap: 14px; margin: 28px 0 18px; align-items: stretch; }
.qty { display: flex; align-items: center; border: 1px solid var(--gold-line); border-radius: 3px; overflow: hidden; }
.qty button { width: 46px; font-size: 18px; color: var(--warm-100); transition: background .25s, color .25s; }
.qty button:hover { background: var(--gold-500); color: var(--night-900); }
.qty input { width: 48px; text-align: center; background: transparent; border: none; color: var(--warm-100); font-family: inherit; font-size: 16px; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-row .btn-gold { flex: 1; justify-content: center; font-size: 15px; }
.pdp-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 26px; }
.pdp-perks .pp { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--warm-200); }
.pdp-perks .pp .ppi { flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid var(--gold-line); border-radius: 50%; display: grid; place-items: center; color: var(--gold-400); }

/* specs accordion (reuse faq look but tighter) */
.specs { margin-top: 18px; }
.spec-item { border-bottom: 1px solid rgba(201,169,97,.14); }
.spec-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 16px; color: var(--warm-100); font-weight: 400; }
.spec-q:hover { color: var(--gold-400); }
.spec-a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.spec-a .inner { padding: 0 0 20px; font-size: 14px; color: var(--warm-mut); max-width: 60ch; }
.spec-a .inner table { width: 100%; border-collapse: collapse; }
.spec-a .inner td { padding: 7px 0; border-bottom: 1px solid rgba(201,169,97,.08); font-size: 13px; }
.spec-a .inner td:first-child { color: var(--warm-mut); width: 45%; }
.spec-a .inner td:last-child { color: var(--warm-100); }

/* cross-sell: complete the setup */
.crosssell { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 50px; }
.xs-card { border: 1px solid rgba(201,169,97,.14); border-radius: 8px; overflow: hidden; display: flex; gap: 0; flex-direction: column; transition: border-color .4s; }
.xs-card:hover { border-color: var(--gold-500); }
.xs-card .xs-img { aspect-ratio: 16/10; position: relative; }
.xs-card .xs-body { padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xs-card .xt { font-size: 15px; color: var(--warm-100); }
.xs-card .xp { font-size: 13px; color: var(--gold-400); margin-top: 3px; }
.xs-add { font-size: 12px; padding: 8px 14px; border: 1px solid var(--gold-line); border-radius: 2px; color: var(--warm-100); white-space: nowrap; transition: all .3s; }
.xs-add:hover { background: var(--gold-500); color: var(--night-900); border-color: var(--gold-500); }

/* ============================================================
   APPLICATION
   ============================================================ */
.app-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: center; padding-top: 140px; }
.app-hero-visual { position: relative; aspect-ratio: 4/5; border-radius: 10px; overflow: hidden; border: 1px solid var(--gold-line); }
.app-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-400); border: 1px solid var(--gold-line); padding: 8px 16px; border-radius: 40px; margin-bottom: 24px; }
.app-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 56px; }
.benefit { padding: 30px; border: 1px solid rgba(201,169,97,.12); border-radius: 8px; background: var(--night-700); transition: border-color .4s, transform .4s var(--ease); }
.benefit:hover { border-color: var(--gold-line); transform: translateY(-4px); }
.benefit .bi { width: 46px; height: 46px; border: 1px solid var(--gold-line); border-radius: 50%; display: grid; place-items: center; color: var(--gold-400); margin-bottom: 20px; }
.benefit h4 { font-family: var(--serif); font-size: 22px; color: var(--warm-100); margin-bottom: 10px; }
.benefit p { font-size: 14px; color: var(--warm-mut); }

.app-quote { text-align: center; max-width: 880px; margin: 0 auto; }
.app-quote blockquote { font-family: var(--serif); font-size: clamp(26px,3.4vw,42px); line-height: 1.25; color: var(--warm-100); font-style: italic; }
.app-quote .who { margin-top: 26px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-400); }
.app-quote .quote-note { margin-top: 14px; font-size: 12px; color: var(--warm-faint); font-style: normal; }

.app-routine { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: center; }
.routine-visual { position: relative; aspect-ratio: 5/4; border-radius: 10px; overflow: hidden; border: 1px solid var(--gold-line); }

/* recommended products row */
.reco { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 50px; }

/* ============================================================
   PARTENAIRES
   ============================================================ */
.partner-hero { position: relative; min-height: 88vh; display: flex; align-items: center; overflow: hidden; border-radius: 0; }
.partner-hero .img { position: absolute; inset: 0; z-index: 0; }
.partner-hero .veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(13,17,23,.96) 28%, rgba(13,17,23,.55) 70%, rgba(13,17,23,.35)); }
.partner-hero-body { position: relative; z-index: 2; max-width: 660px; margin-left: 0; margin-right: auto; padding-top: 90px; }
.partner-hero h1 { font-size: clamp(40px,6vw,82px); margin: 24px 0; }

.opp-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: 56px; }
.opp-stat { padding: 32px; border: 1px solid rgba(201,169,97,.14); border-radius: 8px; background: var(--night-700); }
.opp-stat .n { font-family: var(--serif); font-size: 50px; color: var(--gold-400); line-height: 1; }
.opp-stat .l { font-size: 13px; color: var(--warm-mut); margin-top: 12px; }

.profiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 56px; }
.profile { position: relative; border: 1px solid rgba(201,169,97,.14); border-radius: 8px; overflow: hidden; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; transition: border-color .4s, transform .5s var(--ease); }
.profile .img { position: absolute; inset: 0; z-index: 0; transition: transform 1s var(--ease); }
.profile .grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 30%, rgba(13,17,23,.94)); }
.profile:hover { border-color: var(--gold-500); transform: translateY(-5px); }
.profile:hover .img { transform: scale(1.06); }
.profile .pb { position: relative; z-index: 2; }
.profile h4 { font-family: var(--serif); font-size: 24px; color: var(--warm-100); margin-bottom: 8px; }
.profile p { font-size: 14px; color: var(--warm-mut); }

/* support / tools grid */
.tools { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 50px; }
.tool { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 28px; border: 1px solid rgba(201,169,97,.12); border-radius: 8px; background: var(--night-700); align-items: flex-start; }
.tool .ti2 { width: 48px; height: 48px; border: 1px solid var(--gold-line); border-radius: 12px; display: grid; place-items: center; color: var(--gold-400); }
.tool h4 { font-size: 17px; color: var(--warm-100); margin-bottom: 6px; }
.tool p { font-size: 14px; color: var(--warm-mut); }

/* parcours steps timeline */
.parcours { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: 56px; counter-reset: step; }
.pc-step { position: relative; padding-top: 40px; }
.pc-step::before { counter-increment: step; content: "0" counter(step); position: absolute; top: 0; left: 0; font-family: var(--serif); font-size: 30px; color: var(--gold-500); }
.pc-step::after { content: ""; position: absolute; top: 14px; left: 52px; right: -22px; height: 1px; background: var(--gold-line); }
.parcours .pc-step:last-child::after { display: none; }
.pc-step h4 { font-size: 17px; color: var(--warm-100); margin-bottom: 8px; }
.pc-step p { font-size: 14px; color: var(--warm-mut); }

/* partner final form */
.partner-cta { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); align-items: start; }
.apply-form { background: var(--night-700); border: 1px solid var(--gold-line); border-radius: 10px; padding: 36px; }
.apply-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ============================================================
   Image fill for page containers (.slot-img)
   (the component sets an intrinsic 240×160 — force fill) ============================================================ */
.shop-hero-visual .slot-img, .bb-visual .slot-img, .pdp-main .slot-img,
.pdp-thumb .slot-img, .xs-img .slot-img, .app-hero-visual .slot-img,
.routine-visual .slot-img, .profile .slot-img, .partner-hero > .slot-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
/* decorative overlays must not intercept drag/drop or clicks */
.profile .grad, .partner-hero .veil { pointer-events: none; }

/* ============================================================
   PANIER / CHECKOUT
   ============================================================ */
.cart-layout { display: grid; grid-template-columns: 1.5fr .9fr; gap: clamp(28px,4vw,56px); align-items: start; margin-top: 48px; }
.cart-items { display: flex; flex-direction: column; }
.cart-row { display: grid; grid-template-columns: 88px 1fr auto auto auto; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid rgba(201,169,97,.14); }
.cart-thumb { width: 88px; height: 88px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(201,169,97,.16); position: relative; }
.cart-thumb .slot-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cart-name { font-family: var(--serif); font-size: 20px; color: var(--warm-100); }
.cart-unit { font-size: 13px; color: var(--warm-mut); margin-top: 3px; }
.cart-qty { display: flex; align-items: center; border: 1px solid var(--gold-line); border-radius: 3px; overflow: hidden; }
.cart-qty button { width: 38px; height: 40px; font-size: 17px; color: var(--warm-100); transition: background .25s, color .25s; }
.cart-qty button:hover { background: var(--gold-500); color: var(--night-900); }
.cart-qty span { min-width: 38px; text-align: center; font-size: 15px; color: var(--warm-100); }
.cart-line { font-family: var(--serif); font-size: 21px; color: var(--gold-400); min-width: 90px; text-align: right; }
.cart-remove { width: 36px; height: 36px; border-radius: 50%; color: var(--warm-mut); font-size: 14px; transition: color .25s, background .25s; }
.cart-remove:hover { color: var(--warm-100); background: rgba(201,169,97,.1); }

.cart-summary { position: sticky; top: 110px; border: 1px solid var(--gold-line); border-radius: 10px; padding: 32px; background: var(--night-700); }
.cart-summary h3 { font-family: var(--serif); font-size: 24px; color: var(--warm-100); margin-bottom: 22px; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; font-size: 14px; color: var(--warm-mut); border-bottom: 1px solid rgba(201,169,97,.1); }
.sum-row span:last-child { color: var(--warm-100); font-size: 15px; }
.sum-row.total { border-bottom: none; padding-top: 20px; margin-top: 6px; }
.sum-row.total b { font-family: var(--serif); font-size: 17px; color: var(--warm-100); }
.sum-row.total .v { font-family: var(--serif); font-size: 30px; color: var(--gold-400); }
.free-note { font-size: 12px; color: var(--gold-300); margin: 16px 0 4px; text-align: center; letter-spacing: .02em; }
.cart-summary .btn-gold { width: 100%; justify-content: center; margin-top: 18px; }
.cart-trust { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
.cart-trust span { font-size: 12px; color: var(--warm-mut); display: flex; align-items: center; gap: 9px; }
.cart-trust span::before { content: "✓"; color: var(--gold-500); }

.cart-empty { text-align: center; padding: 60px 0 20px; }
.cart-empty .ce-ic { width: 72px; height: 72px; margin: 0 auto 24px; border: 1px solid var(--gold-line); border-radius: 50%; display: grid; place-items: center; color: var(--gold-400); }
.cart-empty h2 { font-family: var(--serif); font-size: 34px; color: var(--warm-100); margin-bottom: 12px; }
.cart-empty p { color: var(--warm-mut); margin-bottom: 28px; }

/* checkout fields */
.checkout { margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(201,169,97,.14); }
.checkout .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ============================================================
   TECHNOLOGIE / ÉTUDES
   ============================================================ */
.tech-feature { position: relative; aspect-ratio: 21/9; border-radius: 12px; overflow: hidden; border: 1px solid var(--gold-line); margin-top: 48px; }
.tech-feature .img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tech-feature .cap { position: absolute; left: 0; bottom: 0; z-index: 2; padding: clamp(24px,3vw,44px); }
.tech-feature .cap .k { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-400); }
.tech-feature .cap .t { font-family: var(--serif); font-size: clamp(22px,2.6vw,34px); color: var(--warm-100); margin-top: 8px; }
.tech-feature .grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(13,17,23,.9), transparent 55%); pointer-events: none; }

/* measures: what we observe */
.measures { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: center; }
.measure-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.measure-list .ml { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(201,169,97,.12); align-items: flex-start; }
.measure-list .ml:first-child { border-top: 1px solid rgba(201,169,97,.12); }
.measure-list .ml .mi { width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid var(--gold-line); border-radius: 50%; display: grid; place-items: center; color: var(--gold-400); }
.measure-list .ml h4 { font-size: 16px; color: var(--warm-100); font-weight: 500; margin-bottom: 5px; }
.measure-list .ml p { font-size: 14px; color: var(--warm-mut); max-width: 46ch; }
.measure-visual { position: relative; aspect-ratio: 4/5; border-radius: 10px; overflow: hidden; border: 1px solid var(--gold-line); }
.measure-visual .img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* study cards */
.study-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 20px; margin-top: 50px; }
.study-card { border: 1px solid rgba(201,169,97,.14); border-radius: 10px; padding: 32px; background: var(--night-700); display: flex; flex-direction: column; transition: border-color .4s, transform .5s var(--ease); }
.study-card:hover { border-color: var(--gold-500); transform: translateY(-5px); }
.study-card .tag { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-400); margin-bottom: 18px; }
.study-card .metric { font-family: var(--serif); font-size: 46px; color: var(--gold-400); line-height: 1; margin-bottom: 12px; }
.study-card h4 { font-family: var(--serif); font-size: 22px; color: var(--warm-100); margin-bottom: 10px; line-height: 1.15; }
.study-card p { font-size: 14px; color: var(--warm-mut); flex: 1; }
.study-card .go { margin-top: 20px; font-size: 13px; color: var(--gold-400); display: inline-flex; gap: 8px; }

/* ecosystem cards (Freeonic / Luxood) */
.eco-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 50px; }
.eco-card { position: relative; border: 1px solid rgba(201,169,97,.14); border-radius: 10px; overflow: hidden; min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end; padding: 34px; transition: border-color .4s, transform .5s var(--ease); }
.eco-card .img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; transition: transform 1s var(--ease); }
.eco-card .grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,17,23,.2) 0%, rgba(13,17,23,.55) 50%, rgba(13,17,23,.95) 100%); pointer-events: none; }
.eco-card:hover { border-color: var(--gold-500); transform: translateY(-5px); }
.eco-card:hover .img { transform: scale(1.05); }
.eco-card .eb { position: relative; z-index: 2; }
.eco-card .k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-400); }
.eco-card h3 { font-family: var(--serif); font-size: 30px; color: var(--warm-100); margin: 8px 0 8px; }
.eco-card p { font-size: 14px; color: var(--warm-mut); max-width: 44ch; margin-bottom: 16px; }
.eco-card .go { font-size: 13px; color: var(--gold-400); display: inline-flex; gap: 8px; }

@media (max-width: 920px) {
  .measures, .eco-grid { grid-template-columns: 1fr; }
  .study-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BEOKEYS page
   ============================================================ */
.keys-how { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 48px; }
.keys-how .kh { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: flex-start; padding: 24px; border: 1px solid rgba(201,169,97,.12); border-radius: 8px; background: var(--night-700); }
.keys-how .kh .n { font-family: var(--serif); font-size: 26px; color: var(--gold-500); line-height: 1; }
.keys-how .kh h4 { font-size: 15px; color: var(--warm-100); margin-bottom: 5px; }
.keys-how .kh p { font-size: 13px; color: var(--warm-mut); }
.key-glyph { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; border: 1px solid var(--gold-line); border-radius: 50%; display: grid; place-items: center; color: var(--gold-400); background: rgba(13,17,23,.5); backdrop-filter: blur(4px); font-size: 16px; }

/* ============================================================
   QUI SOMMES-NOUS / TEAM
   ============================================================ */
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: center; }
.about-visual { position: relative; aspect-ratio: 4/5; border-radius: 10px; overflow: hidden; border: 1px solid var(--gold-line); }
.about-visual .img { position: absolute; inset: 0; width: 100%; height: 100%; }

.team-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 50px; }
.team-card { display: flex; flex-direction: column; }
.team-portrait { position: relative; aspect-ratio: 3/4; border-radius: 8px; overflow: hidden; border: 1px solid rgba(201,169,97,.16); transition: border-color .4s; }
.team-portrait .slot-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.team-card:hover .team-portrait { border-color: var(--gold-500); }
.team-name { font-family: var(--serif); font-size: 22px; color: var(--warm-100); margin: 16px 0 4px; }
.team-role { font-size: 13px; color: var(--warm-mut); letter-spacing: .01em; }

@media (max-width: 1080px) { .team-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 920px) { .about-story { grid-template-columns: 1fr; } .keys-how { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   ATELIERS / WORKSHOPS
   ============================================================ */
/* ideal-journey funnel */
.funnel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 18px; margin-top: 48px; counter-reset: fstep; }
.funnel .fstep { position: relative; padding: 24px 20px; border: 1px solid rgba(201,169,97,.12); border-radius: 8px; background: var(--night-700); }
.funnel .fstep::before { counter-increment: fstep; content: "0" counter(fstep); font-family: var(--serif); font-size: 22px; color: var(--gold-500); display: block; margin-bottom: 10px; }
.funnel .fstep h4 { font-size: 15px; color: var(--warm-100); margin-bottom: 5px; font-weight: 500; }
.funnel .fstep p { font-size: 13px; color: var(--warm-mut); }
.funnel .fstep.crm { border-color: var(--gold-line); background: linear-gradient(160deg, rgba(201,169,97,.07), var(--night-700)); }
.funnel .fstep .pin { position: absolute; top: 18px; right: 16px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-400); }

/* filter bar (reuses .chip) */
.ws-bar { display: flex; flex-direction: column; gap: 16px; padding: 24px 0; margin-top: 40px; border-top: 1px solid rgba(201,169,97,.14); border-bottom: 1px solid rgba(201,169,97,.14); }
.ws-bar .row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ws-bar .row .lbl { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-500); min-width: 72px; }

/* workshop grid + cards */
.ws-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.ws-card { display: flex; flex-direction: column; border: 1px solid rgba(201,169,97,.14); border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, var(--night-700), var(--night-700)); transition: transform .5s var(--ease), border-color .5s; }
.ws-card:hover { transform: translateY(-5px); border-color: var(--gold-500); }
.ws-img { position: relative; aspect-ratio: 16/10; }
.ws-img .slot-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ws-pills { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 2; display: flex; justify-content: space-between; gap: 8px; }
.fmt-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .04em; padding: 6px 11px; border-radius: 40px; background: rgba(13,17,23,.62); backdrop-filter: blur(6px); border: 1px solid var(--gold-line); color: var(--warm-100); }
.fmt-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500); }
.fmt-pill[data-f="distanciel"] .dot { background: #6ca2c1; }
.fmt-pill[data-f="hybride"] .dot { background: #83b07c; }
.date-pill { font-size: 11px; letter-spacing: .04em; padding: 6px 11px; border-radius: 40px; background: rgba(13,17,23,.62); backdrop-filter: blur(6px); border: 1px solid var(--gold-line); color: var(--gold-300); }
.ws-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.ws-theme { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-500); margin-bottom: 10px; }
.ws-title { font-family: var(--serif); font-size: 23px; color: var(--warm-100); line-height: 1.12; }
.ws-desc { font-size: 13px; color: var(--warm-mut); margin: 10px 0 18px; flex: 1; }
.ws-meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.ws-meta .m { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--warm-200); }
.ws-meta .m svg { color: var(--gold-400); flex: 0 0 16px; }
.ws-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.ws-price { font-family: var(--serif); font-size: 22px; color: var(--gold-400); }
.ws-price.free { font-size: 16px; letter-spacing: .04em; }
.seats { font-size: 12px; color: var(--warm-mut); margin-top: 4px; }
.seats b { color: var(--gold-300); font-weight: 500; }
.seats.low b { color: #d96a26; }
.ws-reg { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding: 12px 18px; border-radius: 2px; background: linear-gradient(100deg, var(--gold-400), var(--gold-500)); color: var(--night-900); transition: all .35s var(--ease); white-space: nowrap; border: 1px solid transparent; }
.ws-reg:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(201,169,97,.45); }
.ws-reg.done { background: transparent; color: var(--gold-300); border-color: var(--gold-line); cursor: default; }
.ws-reg.done:hover { transform: none; box-shadow: none; }

/* registration modal */
.modal-overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px;
  background: rgba(5,7,14,.7); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal { width: min(560px, 100%); max-height: 90vh; overflow-y: auto; background: var(--night-700); border: 1px solid var(--gold-line); border-radius: 12px;
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.8); transform: translateY(16px) scale(.98); transition: transform .4s var(--ease); }
.modal-overlay.open .modal { transform: none; }
.modal-head { position: relative; padding: 28px 30px; border-bottom: 1px solid rgba(201,169,97,.14); }
.modal-head .k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-500); }
.modal-head h3 { font-family: var(--serif); font-size: 26px; color: var(--warm-100); margin-top: 6px; line-height: 1.1; }
.modal-head .sub { font-size: 13px; color: var(--warm-mut); margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.modal-head .sub span { display: inline-flex; align-items: center; gap: 7px; }
.modal-close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%; color: var(--warm-mut); font-size: 18px; transition: color .25s, background .25s; }
.modal-close:hover { color: var(--warm-100); background: rgba(201,169,97,.1); }
.modal-body { padding: 28px 30px 32px; }
.modal-body .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fmt-choice { display: flex; gap: 10px; margin-bottom: 4px; }
.fmt-choice label { flex: 1; }
.fmt-choice input { position: absolute; opacity: 0; pointer-events: none; }
.fmt-choice .opt { display: block; text-align: center; padding: 12px; border: 1px solid var(--gold-line); border-radius: 5px; font-size: 13px; color: var(--warm-200); cursor: pointer; transition: all .3s; }
.fmt-choice input:checked + .opt { border-color: var(--gold-500); background: rgba(201,169,97,.1); color: var(--gold-300); }

/* confirmation step */
.modal-confirm { padding: 40px 30px 36px; text-align: center; display: none; }
.modal.confirmed .modal-body, .modal.confirmed .modal-head .sub { display: none; }
.modal.confirmed .modal-confirm { display: block; }
.modal-confirm .ok { width: 66px; height: 66px; margin: 0 auto 22px; border-radius: 50%; background: var(--gold-500); color: var(--night-900); display: grid; place-items: center; font-size: 28px; }
.modal-confirm h3 { font-family: var(--serif); font-size: 28px; color: var(--warm-100); margin-bottom: 12px; }
.modal-confirm p { font-size: 14px; color: var(--warm-mut); max-width: 40ch; margin: 0 auto 8px; }
.confirm-steps { text-align: left; margin: 24px auto 0; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.confirm-steps .cs { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--warm-200); }
.confirm-steps .cs .csi { flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid var(--gold-line); border-radius: 50%; display: grid; place-items: center; color: var(--gold-400); font-size: 11px; }

@media (max-width: 1080px) { .funnel { grid-template-columns: repeat(2, 1fr); } .ws-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .funnel { grid-template-columns: 1fr; } .ws-grid { grid-template-columns: 1fr; } .modal-body .field-row { grid-template-columns: 1fr; } }

/* ============================================================
   APRÈS-ATELIER — dispositif de sortie (kiosk / QR)
   ============================================================ */
.kiosk-header { position: fixed; inset: 0 0 auto 0; z-index: 100; background: rgba(13,17,23,.86); backdrop-filter: blur(16px); border-bottom: 1px solid var(--gold-line); }
.kiosk-header .in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.kiosk-header .lbl { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--warm-mut); }

.flow-wrap { min-height: 100vh; display: grid; place-items: center; padding: 110px 20px 60px; position: relative; }
.flow-ambient { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(201,169,97,.08), transparent 55%), var(--night-900); }
.flow-card { position: relative; z-index: 1; width: min(720px, 100%); border: 1px solid var(--gold-line); border-radius: 16px; background: linear-gradient(180deg, var(--night-700), var(--night-700)); padding: clamp(28px, 4vw, 52px); box-shadow: 0 50px 90px -40px rgba(0,0,0,.7); }

/* progress */
.flow-prog { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.flow-prog .p { flex: 1; height: 3px; border-radius: 3px; background: rgba(201,169,97,.16); overflow: hidden; position: relative; }
.flow-prog .p.done { background: var(--gold-500); }
.flow-prog .p.active::after { content: ""; position: absolute; inset: 0; width: 55%; background: var(--gold-500); }

.flow-step { display: none; }
.flow-step.active { display: block; }
.flow-step .k { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-500); }
.flow-step h2 { font-family: var(--serif); font-size: clamp(28px, 4vw, 42px); color: var(--warm-100); margin: 12px 0 8px; line-height: 1.08; }
.flow-step .desc { font-size: 15px; color: var(--warm-mut); margin-bottom: 28px; max-width: 52ch; }

/* rating stars */
.rating { display: flex; gap: 10px; margin-bottom: 28px; }
.rating button { font-size: 38px; line-height: 1; color: rgba(201,169,97,.28); transition: color .2s, transform .2s; }
.rating button:hover, .rating button.on { color: var(--gold-400); }
.rating button:hover { transform: scale(1.12); }

/* quick chips (what they liked) */
.qchips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.qchip { font-size: 13px; padding: 9px 16px; border-radius: 40px; border: 1px solid var(--gold-line); color: var(--warm-200); cursor: pointer; transition: all .25s; background: transparent; }
.qchip:hover { border-color: var(--gold-400); }
.qchip.on { background: rgba(201,169,97,.12); border-color: var(--gold-500); color: var(--gold-300); }

.flow-field { margin-bottom: 18px; }
.flow-field label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--warm-mut); margin-bottom: 8px; }
.flow-field input, .flow-field textarea { width: 100%; background: var(--night-600); border: 1px solid rgba(201,169,97,.16); border-radius: 4px; padding: 13px 14px; color: var(--warm-100); font-family: inherit; font-size: 14px; transition: border-color .3s; }
.flow-field textarea { resize: vertical; min-height: 70px; }
.flow-field input:focus, .flow-field textarea:focus { outline: none; border-color: var(--gold-500); }

/* choice cards */
.choice-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.choice { text-align: left; border: 1px solid var(--gold-line); border-radius: 10px; padding: 26px 22px; background: var(--night-700); cursor: pointer; transition: transform .4s var(--ease), border-color .4s, background .4s; display: flex; flex-direction: column; }
.choice:hover { transform: translateY(-5px); border-color: var(--gold-500); background: rgba(201,169,97,.05); }
.choice .ci { width: 46px; height: 46px; border: 1px solid var(--gold-line); border-radius: 50%; display: grid; place-items: center; color: var(--gold-400); margin-bottom: 18px; }
.choice h4 { font-family: var(--serif); font-size: 21px; color: var(--warm-100); margin-bottom: 8px; }
.choice p { font-size: 13px; color: var(--warm-mut); flex: 1; }
.choice .tagline { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-500); margin-top: 16px; }

/* offer (achat) */
.offer-box { border: 1px dashed var(--gold-line); border-radius: 10px; padding: 26px; text-align: center; margin: 8px 0 22px; background: rgba(201,169,97,.04); }
.offer-box .code { font-family: var(--serif); font-size: 32px; color: var(--gold-400); letter-spacing: .08em; }
.offer-box .small { font-size: 13px; color: var(--warm-mut); margin-top: 8px; }

/* calendar (rdv) */
.cal-days, .cal-slots { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.cal-day, .cal-slot { border: 1px solid var(--gold-line); border-radius: 6px; padding: 12px 16px; cursor: pointer; transition: all .25s; background: transparent; text-align: center; }
.cal-day { display: flex; flex-direction: column; gap: 3px; min-width: 70px; }
.cal-day .dow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--warm-mut); }
.cal-day .dn { font-family: var(--serif); font-size: 22px; color: var(--warm-100); }
.cal-day:hover, .cal-slot:hover { border-color: var(--gold-400); }
.cal-day.on, .cal-slot.on { background: rgba(201,169,97,.12); border-color: var(--gold-500); }
.cal-day.on .dn { color: var(--gold-300); }
.cal-slot { font-size: 14px; color: var(--warm-200); }
.cal-slot.on { color: var(--gold-300); }

/* resources */
.res-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.res-opt { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--gold-line); border-radius: 8px; cursor: pointer; transition: all .25s; }
.res-opt:hover { border-color: var(--gold-400); }
.res-opt.on { background: rgba(201,169,97,.08); border-color: var(--gold-500); }
.res-opt .box { width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid var(--gold-line); border-radius: 5px; display: grid; place-items: center; color: var(--night-900); background: transparent; transition: background .25s; font-size: 13px; }
.res-opt.on .box { background: var(--gold-500); }
.res-opt .rt { font-size: 14px; color: var(--warm-100); }
.res-opt .rd { font-size: 12px; color: var(--warm-mut); }

/* flow actions */
.flow-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.flow-back { font-size: 13px; color: var(--warm-mut); background: none; cursor: pointer; transition: color .25s; }
.flow-back:hover { color: var(--gold-400); }

/* confirm */
.flow-confirm { text-align: center; }
.flow-confirm .ok { width: 70px; height: 70px; margin: 0 auto 24px; border-radius: 50%; background: var(--gold-500); color: var(--night-900); display: grid; place-items: center; font-size: 30px; }
.flow-confirm h2 { font-family: var(--serif); font-size: clamp(28px,4vw,40px); color: var(--warm-100); margin-bottom: 12px; }
.flow-confirm p { font-size: 15px; color: var(--warm-mut); max-width: 44ch; margin: 0 auto 10px; }
.crm-tag { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 12px; letter-spacing: .04em; color: var(--gold-300); border: 1px solid var(--gold-line); border-radius: 40px; padding: 9px 16px; }
.crm-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); }

@media (max-width: 600px) {
  .choice-cards { grid-template-columns: 1fr; }
  .rating button { font-size: 32px; }
}

/* product card .slot-imgs must fill their square */
.pimg .slot-img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ============================================================
   EXCLUSIVITÉ — bannière nouveauté (Metabolic Code)
   ============================================================ */
.exclu { position: relative; border: 1px solid var(--gold-line); border-radius: 14px; overflow: hidden;
  display: grid; grid-template-columns: 1.05fr 1.1fr; gap: clamp(24px,3.5vw,56px); align-items: center;
  background: radial-gradient(120% 120% at 80% 0%, rgba(131,176,124,.14), transparent 55%), linear-gradient(150deg, #22314F, #17203A 65%); }
.exclu-visual { position: relative; aspect-ratio: 1/1; }
.exclu-visual .slot-img, .exclu-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exclu-body { padding: clamp(28px,3.5vw,52px) clamp(24px,3vw,40px) clamp(28px,3.5vw,52px) 0; }
.exclu-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: #0D1117; background: linear-gradient(100deg, var(--gold-400), var(--gold-300)); padding: 7px 14px; border-radius: 40px; }
.exclu-badge .pulse { width: 7px; height: 7px; border-radius: 50%; background: #0D1117; animation: bp 2.2s ease-in-out infinite; }
@keyframes bp { 0%,100%{ opacity:.35; transform: scale(1);} 50%{ opacity:1; transform: scale(1.5);} }
.exclu-eyebrow { display: block; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #83b07c; margin: 22px 0 12px; }
.exclu h2 { font-family: var(--serif); font-size: clamp(30px,4vw,50px); color: var(--warm-100); line-height: 1.04; }
.exclu h2 em { font-style: normal; color: #83b07c; }
.exclu .sub { font-size: 16px; color: var(--warm-200); margin: 14px 0 18px; max-width: 46ch; }
.exclu-bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-bottom: 26px; }
.exclu-bullets li { list-style: none; font-size: 13px; color: var(--warm-mut); display: flex; gap: 9px; align-items: flex-start; }
.exclu-bullets li::before { content: "✦"; color: #83b07c; font-size: 11px; margin-top: 2px; }
.exclu-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.exclu-cta .px { font-family: var(--serif); font-size: 24px; color: var(--gold-400); margin-right: 4px; }
.pbadge.new { background: linear-gradient(100deg, var(--gold-400), var(--gold-300)); color: #0D1117; border: 0; font-weight: 600; }

@media (max-width: 860px){ .exclu { grid-template-columns: 1fr; } .exclu-body { padding: 0 clamp(20px,5vw,32px) clamp(28px,6vw,40px); } .exclu-bullets { grid-template-columns: 1fr; } }

/* ============================================================
   ABONNEMENT Beosigner+ (récurrent)
   ============================================================ */
.sub-offer {
  position: relative; border: 1px solid var(--gold-500); border-radius: 12px; overflow: hidden;
  background: radial-gradient(130% 130% at 85% 0%, rgba(201,169,97,.10), transparent 55%), rgba(201,169,97,.045);
  margin: 4px 0 22px; transition: border-color .3s, background .3s; cursor: pointer;
}
.sub-offer.off { border-color: rgba(201,169,97,.18); background: rgba(255,255,255,.015); }
.sub-offer-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; }
.sub-check {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--gold-500);
  display: grid; place-items: center; margin-top: 2px; transition: background .3s, border-color .3s;
  background: var(--gold-500); color: #0D1117;
}
.sub-offer.off .sub-check { background: transparent; border-color: var(--warm-faint); color: transparent; }
.sub-check svg { width: 15px; height: 15px; }
.sub-head-txt { flex: 1; }
.sub-title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sub-title-row .st { font-size: 16px; font-weight: 500; color: var(--warm-100); }
.sub-title-row .sub-reco { flex: 0 0 auto; align-self: center; width: max-content; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #0D1117;
  background: linear-gradient(100deg, var(--gold-400), var(--gold-300)); padding: 3px 9px; border-radius: 40px; }
.sub-price-tag { margin-left: auto; text-align: right; white-space: nowrap; }
.sub-price-tag .pm { font-family: var(--serif); font-size: 22px; color: var(--gold-400); }
.sub-price-tag .pm small { font-family: var(--sans); font-size: 12px; color: var(--warm-mut); }
.sub-sub { font-size: 13px; color: var(--warm-mut); margin-top: 5px; }
.sub-perks { display: flex; flex-wrap: wrap; gap: 7px 16px; padding: 0 20px 18px 58px; }
.sub-perks span { font-size: 12.5px; color: var(--warm-200); display: inline-flex; align-items: center; gap: 7px; }
.sub-perks span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-500); flex: 0 0 5px; }
.sub-note { font-size: 11px; color: var(--warm-faint); padding: 0 20px 16px 58px; }

.cart-row-sub { background: linear-gradient(100deg, rgba(201,169,97,.05), transparent); }
.rec-tag { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-300); border: 1px solid var(--gold-line); padding: 2px 8px; border-radius: 40px; margin-left: 8px; vertical-align: middle; }
.sum-row.sum-monthly .v { font-family: var(--serif); font-size: 18px; color: var(--gold-400); }
.sum-row.sum-discount { color: var(--gold-300); }
.sum-row.sum-discount .v { color: var(--gold-400); }
.field label .opt { color: var(--warm-faint); font-size: 11px; letter-spacing: 0; text-transform: none; }
.partner-row { display: flex; gap: 8px; }
.partner-row input { flex: 1; }
.partner-verify { flex: 0 0 auto; padding: 0 16px; border: 1px solid var(--gold-line); border-radius: 3px; color: var(--warm-100); font-size: 13px; font-family: inherit; transition: all .3s; background: transparent; }
.partner-verify:hover { background: var(--gold-500); color: var(--night-900); border-color: var(--gold-500); }
.partner-status { font-size: 12px; margin-top: 8px; min-height: 16px; display: flex; align-items: center; gap: 7px; }
.partner-status.ok { color: var(--gold-300); }
.partner-status.bad { color: var(--error-400); }
.partner-status.pending { color: var(--warm-mut); }
.partner-status .pt-ic { width: 15px; height: 15px; display: inline-grid; place-items: center; }

.sub-suggest { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px;
  padding: 16px 20px; border: 1px solid var(--gold-line); border-radius: 10px;
  background: radial-gradient(120% 120% at 90% 0%, rgba(201,169,97,.08), transparent 55%), rgba(255,255,255,.015); }
.sub-suggest .ss-tx { flex: 1; min-width: 200px; font-size: 14px; color: var(--warm-200); }
.sub-suggest .ss-tx b { color: var(--warm-100); font-weight: 500; }
.sub-suggest .ss-tx .m { color: var(--gold-400); }
.sub-suggest .ss-add { font-size: 13px; padding: 10px 16px; border: 1px solid var(--gold-line); border-radius: 3px; color: var(--warm-100); white-space: nowrap; transition: all .3s; background: transparent; }
.sub-suggest .ss-add:hover { background: var(--gold-500); color: var(--night-900); border-color: var(--gold-500); }

.membership { position: relative; border: 1px solid var(--gold-line); border-radius: 14px; overflow: hidden;
  background: linear-gradient(155deg, #22314F, #17203A 65%); padding: clamp(34px,4.5vw,64px); }
.membership .glow { position: absolute; right: -8%; top: -30%; width: 50%; height: 160%; background: radial-gradient(circle, var(--gold-glow), transparent 62%); pointer-events: none; }
.membership-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px,4vw,56px); align-items: center; }
.mb-price { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 22px; }
.mb-price .v { font-family: var(--serif); font-size: 48px; color: var(--gold-400); line-height: 1; }
.mb-price .u { font-size: 14px; color: var(--warm-mut); }
.mb-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.mb-feat { display: flex; gap: 12px; align-items: flex-start; }
.mb-feat .fi { flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid var(--gold-line); border-radius: 9px; display: grid; place-items: center; color: var(--gold-400); }
.mb-feat .ft { font-size: 14px; color: var(--warm-100); }
.mb-feat .fd { font-size: 12px; color: var(--warm-mut); margin-top: 2px; }

@media (max-width: 860px){ .membership-grid { grid-template-columns: 1fr; } .mb-feats { grid-template-columns: 1fr; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .shop-grid, .crosssell, .app-benefits, .reco, .profiles { grid-template-columns: 1fr 1fr; }
  .opp-stats, .parcours { grid-template-columns: 1fr 1fr; }
  .parcours .pc-step::after { display: none; }
}
@media (max-width: 920px) {
  .shop-hero, .bundle-band, .pdp, .app-hero, .app-routine, .partner-cta { grid-template-columns: 1fr; }
  .pdp-gallery { position: static; }
  .tools { grid-template-columns: 1fr; }
  .shop-bar { top: 0; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}
@media (max-width: 600px) {
  .shop-grid, .crosssell, .app-benefits, .reco, .profiles, .opp-stats, .parcours { grid-template-columns: 1fr; }
  .pdp-perks, .apply-form .field-row, .checkout .field-row { grid-template-columns: 1fr; }
  .cart-row { grid-template-columns: 64px 1fr auto; grid-template-areas: "thumb meta remove" "thumb qty line"; gap: 10px 14px; }
  .cart-thumb { width: 64px; height: 64px; grid-area: thumb; }
  .cart-meta { grid-area: meta; } .cart-qty { grid-area: qty; } .cart-line { grid-area: line; } .cart-remove { grid-area: remove; justify-self: end; }
}