/* ==========================================================================
   Distillerie de Lyon — Fiche produit v2 (maquette Figma), aux couleurs de la bouteille
   Chargé après product.css et wp.css.
   ========================================================================== */

/* ---------- 01 — Achat ---------- */
.fp-buy { padding: clamp(28px, 6vh, 72px) 0 clamp(48px, 8vh, 80px); }
.fp-buy .buy__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: clamp(32px, 4.2vw, 64px); align-items: start; }
.fp-buy .gallery { top: calc(var(--header-h, 98px) + 24px); }

.fp-stage {
  aspect-ratio: 540 / 520; border-radius: 32px; overflow: hidden;
  background: var(--pbg); border: 3px solid var(--navy);
}
.fp-stage .stage__watermark { left: -22%; top: -18%; width: 95%; opacity: .07; }
.fp-stage__ring { position: absolute; left: 50%; top: 50%; width: 76%; aspect-ratio: 1; translate: -50% -50%; color: var(--pring); animation: spin 60s linear infinite; }
.fp-stage__disc { position: absolute; left: 50%; top: 50%; width: 66%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--phalo); }
.fp-stage__monument { position: absolute; left: 50%; top: 50%; width: 58%; translate: -50% -38%; pointer-events: none; }
.fp-stage .stage__bottle { top: 5%; height: 90%; filter: drop-shadow(12px 12px 0 rgba(15, 39, 100, .3)); }
.fp-stk { position: absolute; z-index: 3; pointer-events: none; animation: float 6s ease-in-out infinite; }
.fp-stk--star { width: 9%; aspect-ratio: 1; right: 26%; top: 26%; }

.fp-stage .stage__pastille { z-index: 4; right: 5%; top: 5%; }

.fp-buy .thumbs { gap: clamp(10px, 1vw, 16px); margin-top: 16px; }
.fp-buy .thumb { height: auto; aspect-ratio: 126 / 84; border-radius: 16px; background: var(--pbg); }
.fp-buy .thumb.is-active { border-color: var(--yellow); }

.fp-buy .buy__info { padding-top: 0; }
.fp-buy .crumbs { margin-bottom: clamp(16px, 3vh, 28px); }
.fp-buy .crumbs span:not([aria-current]) { opacity: .5; }
.fp-buy .buy__title { margin-top: 10px; }
.fp-buy .buy__script { color: var(--red); font-size: clamp(24px, min(2.3vw, 4vh), 34px); rotate: -2deg; margin: 4px 0 clamp(14px, 2.4vh, 22px); }
.fp-buy .buy__lead { font-size: clamp(15px, min(1.15vw, 2vh), 17px); line-height: 1.6; color: var(--ink); }
.fp-buy .buy__lead p + p { margin-top: .8em; }
.fp-buy .chips { margin: clamp(16px, 2.6vh, 24px) 0 clamp(16px, 2.6vh, 24px); }
.fp-buy .chips li { background: var(--sand); }

.fp-scale { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.fp-scale__track { position: relative; height: 4px; border-radius: 4px; background: rgba(35, 48, 93, .15); }
.fp-scale__track i { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--navy); translate: -50% -50%; transition: left 1.2s var(--ease); }
.fp-scale.is-in .fp-scale__track i, html:not(.js) .fp-scale__track i { left: var(--pos); }

.fp-buy .buy__sep { margin: clamp(18px, 3vh, 28px) 0 clamp(14px, 2.2vh, 20px); }
.fp-buy .price { margin: 0 0 clamp(14px, 2.2vh, 20px); align-items: baseline; }
.fp-buy .price__value { font-size: clamp(36px, min(3.3vw, 5.8vh), 50px); }
.fp-buy .purchase { flex-wrap: nowrap; gap: 14px; }
.fp-buy .qty { flex: none; }
.fp-add { flex: 1; justify-content: center; }
.fp-buy .purchase .btn.fp-add { padding-top: 16px; padding-bottom: 16px; font-size: 14px; }

.fp-reassure { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 16px 0 0; padding: 0; font-weight: 500; font-size: 14px; }
.fp-reassure li { display: inline-flex; align-items: center; gap: 8px; }
.fp-reassure li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }

/* ---------- 02 — Présentation & profil aromatique ---------- */
.fp-pres { padding: clamp(64px, 11vh, 110px) 0; }
.fp-pres__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.fp-pres__title { margin: 14px 0 clamp(18px, 3vh, 28px); }
.fp-pres__title .line { display: block; }
.fp-pres__text { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; color: var(--ink); max-width: 640px; }
.fp-pres__text p + p { margin-top: 1em; }
.fp-aroma { background: var(--sand); border-radius: 32px; padding: clamp(28px, 2.6vw, 40px); }
.fp-aroma__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.05; margin: 14px 0 clamp(16px, 2.6vh, 24px); }
.fp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fp-bars li { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 16px; font-weight: 600; font-size: 14px; }
.fp-bars__track { height: 10px; border-radius: 10px; background: rgba(35, 48, 93, .1); overflow: hidden; }
.fp-bars__track i { display: block; height: 100%; width: var(--v); border-radius: 10px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); }
.fp-aroma.is-in .fp-bars__track i, html:not(.js) .fp-bars__track i { transform: none; }
.fp-bars li:nth-child(2) i { transition-delay: .1s; } .fp-bars li:nth-child(3) i { transition-delay: .2s; }
.fp-bars li:nth-child(4) i { transition-delay: .3s; } .fp-bars li:nth-child(5) i { transition-delay: .4s; }
.fp-notes { margin: clamp(18px, 3vh, 26px) 0 0; display: grid; gap: 4px; font-size: 13px; }
.fp-notes div { display: flex; gap: 8px; }
.fp-notes dt { font-weight: 700; }
.fp-notes dd { margin: 0; }

/* ---------- 03 — Comment on le sert ---------- */
.fp-tips { background: var(--navy); color: var(--paper); padding: clamp(64px, 11vh, 100px) 0; }
.fp-tips .h2 { margin-top: 14px; }
.fp-tips__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); margin-top: clamp(28px, 5vh, 48px); }
.fp-tip { background: var(--paper); color: var(--navy); border-radius: 24px; padding: clamp(22px, 2vw, 30px); box-shadow: 8px 8px 0 var(--yellow); transition: translate .3s var(--ease), box-shadow .3s var(--ease); }
.fp-tip:hover { translate: -3px -3px; box-shadow: 11px 11px 0 var(--yellow); }
.fp-tip__big { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: clamp(32px, 2.9vw, 44px); line-height: 1.1; color: var(--red); }
.fp-tip__big--icon { font-size: clamp(22px, 1.8vw, 28px); color: var(--navy); min-height: 1.6em; }
.fp-tip__big svg { width: 1.3em; height: 1.3em; flex: none; }
.fp-tip__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(17px, 1.3vw, 20px); margin: 10px 0 8px; }
.fp-tip__text { font-size: 14px; line-height: 1.55; color: var(--ink); }

/* ---------- 04 — Savoir-faire & distinctions ---------- */

/* ---------- 05 — Où le trouver ---------- */
.fp-places { background: var(--sand); padding: clamp(64px, 11vh, 100px) 0; }

.fp-places .h2 { margin-top: 14px; }
.fp-places .h2 .line { display: block; }
.fp-places__lead { margin: clamp(14px, 2.4vh, 22px) 0 clamp(20px, 3.4vh, 30px); }

.fp-place {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 16px 22px; border-radius: 18px; background: var(--paper); border: 2.5px solid var(--navy); box-shadow: 5px 5px 0 var(--navy);
}
.fp-place__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.fp-place b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(15px, 1.15vw, 18px); }
.fp-place small { display: block; font-size: 12px; opacity: .7; margin-top: 2px; }
.fp-place__kind { padding: 4px 10px; border-radius: 99px; background: var(--sand); font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- 06 — Son acolyte ---------- */
.fp-buddy { padding: clamp(64px, 11vh, 100px) 0; }
.fp-buddy__card {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 60px);
  padding: clamp(28px, 3.8vw, 56px); border-radius: 32px; background: var(--paper); border: 3px solid var(--navy); box-shadow: 12px 12px 0 var(--red);
}
.fp-buddy__title { margin: 14px 0 clamp(14px, 2.4vh, 20px); }
.fp-buddy__chips { margin: 18px 0 24px; }
.fp-buddy__visual { position: relative; display: block; width: 100%; max-width: 360px; aspect-ratio: 1; justify-self: center; }
.fp-buddy__ring { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--bring); animation: spin 60s linear infinite; }
.fp-buddy__disc { position: absolute; inset: 7%; border-radius: 50%; background: var(--bhalo); transition: scale .6s var(--ease); }
.fp-buddy__bottle { position: absolute; left: 50%; bottom: 4%; height: 104%; width: auto; max-width: none; translate: -50% 0; filter: drop-shadow(10px 10px 0 rgba(15, 39, 100, .28)); transition: translate .6s var(--ease), rotate .6s var(--ease); }
.fp-buddy__visual:hover .fp-buddy__bottle { translate: -50% -8px; rotate: -4deg; }
.fp-buddy__visual:hover .fp-buddy__disc { scale: 1.04; }

.fp-buddy__price { position: absolute; right: -4%; top: 6%; width: clamp(80px, 7vw, 108px); height: clamp(80px, 7vw, 108px); font-size: clamp(15px, 1.3vw, 20px); rotate: 8deg; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .fp-buy .buy__grid,
.fp-pres__grid,
.fp-buddy__card { grid-template-columns: minmax(0, 1fr); }
  .fp-buy .gallery { max-width: 600px; }
  .fp-tips__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 767px) {
  .fp-stage { aspect-ratio: 350 / 400; overflow: hidden; background: var(--pbg); border-radius: 24px; }
  .fp-stage::before { content: none; }
  .fp-stage .stage__slide { border-radius: 0; }
  .fp-stage .stage__bottle { top: 5%; height: 90%; }

  .fp-buy .purchase .btn.fp-add { padding-left: 12px; padding-right: 12px; }

  .fp-place { padding: 14px 16px; gap: 12px; }
  .fp-buddy__card { box-shadow: 8px 8px 0 var(--red); }
}

/* Titres de section sur une ligne (maquette) */
.fp-tips .h2 { font-size: max(28px, min(3.4vw, 6vh)); }
.fp-tips .h2 .line { white-space: normal; }