/* ============================================================
   SUMO ; styles partagés des pages produit + hub + bandeau
   Kit du Finisher + code promo.
   ------------------------------------------------------------
   Prolonge style.css et carte-relief.css (barre .rnav, pied
   .rfooter, révélations [data-r]). Préfixes : p… pour les pages
   produit, kband… pour le bandeau Édition Finisher de l'accueil,
   promo… pour le champ code promo des tunnels d'achat.
============================================================ */

/* ------------------------------------------------------------
   BARRE ; variante avec lien retour
------------------------------------------------------------ */
.rnav__back {
  margin-left: auto;
  font-size: .84rem; font-weight: 500; color: var(--ink-60);
  transition: color .3s var(--ease);
}
.rnav__back:hover { color: var(--ink); }
.rnav__back + .rnav__cta { margin-left: 18px; }

/* ------------------------------------------------------------
   EN-TÊTE DE PAGE PRODUIT
------------------------------------------------------------ */
.ppage { padding-top: 64px; }
.phead {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(60px, 11vh, 130px) var(--gut) clamp(30px, 5vh, 60px);
  text-align: center;
}
.phead .eyebrow { margin-bottom: 24px; }
.phead .display { margin-inline: auto; }
.phead__lead {
  max-width: 50ch; margin: 30px auto 0;
  font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.65; color: var(--ink-60);
}

/* ------------------------------------------------------------
   APPEL À L'ACTION DE FIN DE PAGE PRODUIT
------------------------------------------------------------ */
.pcta {
  background: var(--noir); color: var(--bg);
  padding: var(--sp) var(--gut); text-align: center;
}
.pcta .display { margin-inline: auto; color: var(--bg); }
.pcta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 40px; }
.pcta__actions .btn--ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.pcta__actions .btn--ghost:hover { border-color: #fff; }
.pcta__note {
  margin-top: 26px; font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
}

/* ============================================================
   HUB PRODUITS ; les trois familles
============================================================ */
.phub { background: var(--bg); padding: clamp(40px, 7vh, 90px) var(--gut) var(--sp); }
.phub__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px);
}
.pitem {
  position: relative; display: flex; flex-direction: column;
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--line); background: var(--paper);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.pitem:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.pitem__media {
  aspect-ratio: 4 / 3; background: #EFEDE9; overflow: hidden;
}
.pitem__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pitem__body { padding: 28px clamp(20px, 2.4vw, 30px) 30px; display: flex; flex-direction: column; flex: 1; }
.pitem__tag {
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-40); margin-bottom: 12px;
}
.pitem h2 { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 10px; }
.pitem p { font-size: .95rem; line-height: 1.6; color: var(--ink-60); flex: 1; }
.pitem__price { margin-top: 18px; font-size: .9rem; font-weight: 700; color: var(--ink); }
.pitem__price small { font-weight: 500; color: var(--ink-40); }
.pitem__go {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 20px;
  font-size: .88rem; font-weight: 600; color: var(--ink);
}
.pitem__go svg { transition: transform .35s var(--ease); }
.pitem:hover .pitem__go svg { transform: translateX(5px); }
/* toute la carte est cliquable, sans imbriquer de liens */
.pitem__link { position: absolute; inset: 0; z-index: 2; }

/* La carte du Kit du Finisher se distingue : fond sombre, liseré
   doré ; son visuel (dessin noir) repose sur un plateau clair. */
.pitem--kit { background: var(--noir); border-color: rgba(200,154,75,.45); }
.pitem--kit .pitem__media {
  display: grid; place-items: center; padding: 6% 5%;
  background: radial-gradient(120% 95% at 50% 15%, #FFFFFF 0%, #F1F0EC 58%, #E2E0DA 100%);
}
.pitem--kit .pitem__media img { width: 100%; height: auto; object-fit: contain; }
.pitem--kit h2, .pitem--kit .pitem__go, .pitem--kit .pitem__price { color: #fff; }
.pitem--kit p { color: rgba(255,255,255,.55); }
.pitem--kit .pitem__tag { color: var(--accent); }
.pitem--kit .pitem__price small { color: rgba(255,255,255,.4); }

/* ============================================================
   ACCUEIL ; section « LES PRODUITS »
============================================================ */
.products { background: var(--bg); padding: var(--sp) var(--gut); }
.products__head { max-width: var(--maxw); margin: 0 auto clamp(34px, 5vh, 56px); text-align: center; }
.products__head .eyebrow { margin-bottom: 22px; }
.products__head .display { margin-inline: auto; }
.products__lead {
  max-width: 62ch; margin: 26px auto 0;
  font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.65; color: var(--ink-60);
}
.products__grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px);
}
.pcol { display: flex; flex-direction: column; }
/* Deux séries de photos : une grande + deux vignettes dessous. */
.pcol__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pcol__shot {
  border-radius: 16px; overflow: hidden; background: #EFEDE9;
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
}
.pcol__shot--main { grid-column: 1 / -1; aspect-ratio: 16 / 11; }
.pcol__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcol__body { padding-top: 24px; text-align: center; }
.pcol__body h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 10px; }
.pcol__body p { font-size: .96rem; line-height: 1.6; color: var(--ink-60); max-width: 42ch; margin-inline: auto; }
.pcol__body .btn { margin-top: 22px; }

/* ============================================================
   BANDEAU KIT DU FINISHER (Édition Finisher) — accueil
   Effet de surprise : le voile doré balaie la pièce et la
   dévoile, pendant que le titre monte. Déclenché une seule fois
   à l'entrée dans l'écran (classe .is-on posée par le JS).
============================================================ */
.kband {
  position: relative; overflow: hidden;
  background: #08080A; color: #fff;
  padding: clamp(70px, 11vh, 130px) var(--gut);
}
/* grain + halo : donne de la matière au noir */
.kband__glow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(120vw, 1400px); aspect-ratio: 2 / 1; pointer-events: none;
  background: radial-gradient(ellipse, rgba(200,154,75,.16) 0%, rgba(200,154,75,.05) 45%, transparent 72%);
  opacity: 0; transition: opacity 1.4s var(--ease) .3s;
}
.kband.is-on .kband__glow { opacity: 1; }

.kband__inner {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.kband__tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 100px;
  border: 1px solid rgba(200,154,75,.5);
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  color: var(--accent);
  opacity: 0; transform: translateY(10px);
  transition: opacity .7s var(--ease) .25s, transform .7s var(--ease) .25s;
}
.kband.is-on .kband__tag { opacity: 1; transform: none; }
.kband__tag i {
  width: 7px; height: 7px; background: var(--accent); clip-path: var(--oct);
  animation: kbPulse 2.4s ease-in-out infinite;
}
@keyframes kbPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }

.kband__title {
  margin-top: 26px;
  font-size: clamp(2.1rem, 5.6vw, 4.6rem); font-weight: 800;
  line-height: .98; letter-spacing: -0.04em;
}
.kband__title .line > span {
  display: block; transform: translateY(105%);
  transition: transform 1.05s var(--ease) .35s;
}
.kband.is-on .kband__title .line:nth-child(2) > span { transition-delay: .45s; }
.kband.is-on .kband__title .line > span { transform: none; }
.kband__title em { font-style: normal; color: var(--accent); }

.kband__lead {
  margin-top: 26px; max-width: 42ch;
  font-size: clamp(.98rem, 1.3vw, 1.14rem); line-height: 1.65; color: rgba(255,255,255,.58);
  opacity: 0; transition: opacity .9s var(--ease) .7s;
}
.kband.is-on .kband__lead { opacity: 1; }

.kband__meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px;
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.42);
  opacity: 0; transition: opacity .9s var(--ease) .85s;
}
.kband.is-on .kband__meta { opacity: 1; }
.kband__meta b { color: var(--accent); font-weight: 700; }

.kband__actions { margin-top: 36px; opacity: 0; transform: translateY(12px);
  transition: opacity .8s var(--ease) 1s, transform .8s var(--ease) 1s; }
.kband.is-on .kband__actions { opacity: 1; transform: none; }

/* --- La pièce et son voile doré --- */
.kband__stage { position: relative; display: flex; justify-content: center; }
.kband__frame {
  position: relative; width: min(100%, 460px);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 60px 130px -40px rgba(0,0,0,.9);
  /* la pièce est masquée, puis dévoilée du bas vers le haut */
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.5s var(--ease-inout) .2s;
}
.kband.is-on .kband__frame { clip-path: inset(0 0 0 0); }
.kband__frame img { width: 100%; height: auto; display: block; }
/* le kit est noir : il est présenté sur un plateau clair */
.kband__frame--studio {
  width: min(100%, 600px); border-radius: 22px;
  padding: clamp(20px, 3vw, 38px) clamp(12px, 2vw, 24px);
  background: radial-gradient(120% 95% at 50% 12%, #FFFFFF 0%, #F1F0EC 58%, #E2E0DA 100%);
}

/* le trait d'or qui balaie la pièce pendant le dévoilement */
.kband__sweep {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  border-radius: 12px;
}
.kband__sweep::after {
  content: ""; position: absolute; inset: -20% -50%;
  background: linear-gradient(105deg, transparent 38%, rgba(255,226,168,.55) 50%, transparent 62%);
  transform: translateX(-120%);
}
.kband.is-on .kband__sweep::after { animation: kbSweep 1.7s var(--ease-inout) .45s 1; }
@keyframes kbSweep { to { transform: translateX(120%); } }

@media (max-width: 1024px) {
  .kband__inner { grid-template-columns: 1fr; }
  .kband__stage { order: -1; }
  .kband__frame { width: min(74%, 330px); }
  .kband__frame--studio { width: min(100%, 520px); }
  .phub__grid { grid-template-columns: 1fr; max-width: 520px; }
  .products__grid { grid-template-columns: 1fr; max-width: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  .kband__frame { clip-path: none; transition: none; }
  .kband__sweep { display: none; }
  .kband__tag, .kband__lead, .kband__meta, .kband__actions { opacity: 1; transform: none; }
  .kband__title .line > span { transform: none; }
  .kband__glow { opacity: 1; }
  .kband__tag i { animation: none; }
}

/* ============================================================
   MENU DÉROULANT ; « Produits » et « Commander »
   ------------------------------------------------------------
   Ouverture au clic (et au survol sur ordinateur). Le panneau
   reste dans la DA : papier, filet fin, angles doux, ombre
   basse. Chaque entrée porte son nom + une ligne d'explication,
   pour qu'on choisisse sans avoir à deviner.
============================================================ */
.navdrop { position: relative; }

.navdrop__btn {
  display: inline-flex; align-items: center; gap: 7px;
  appearance: none; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: .9rem; font-weight: 500;
  color: var(--ink-60); padding: 0;
  transition: color .3s var(--ease);
}
.navdrop__btn:hover, .navdrop.is-open .navdrop__btn { color: var(--ink); }
.navdrop__chev {
  width: 10px; height: 10px; flex: none;
  transition: transform .35s var(--ease);
}
.navdrop.is-open .navdrop__chev { transform: rotate(180deg); }

/* Variante bouton doré (Commander) : on garde le gabarit .btn */
.navdrop--cta .navdrop__btn {
  --pad-y: 11px; --pad-x: 22px; font-size: .85rem;
  color: #1a1305;
}
.navdrop--cta .navdrop__btn:hover { color: #1a1305; }

.navdrop__menu {
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 900;
  min-width: 268px; padding: 8px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 30px 70px -30px rgba(17,17,17,.35);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.navdrop__menu--right { left: auto; right: 0; }
.navdrop.is-open .navdrop__menu { opacity: 1; visibility: visible; transform: none; }

.navdrop__item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 14px; border-radius: 12px;
  transition: background .25s var(--ease);
}
.navdrop__item:hover { background: rgba(17,17,17,.045); }
.navdrop__item.is-current { background: rgba(200,154,75,.12); }
.navdrop__name { font-size: .92rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.navdrop__desc { font-size: .76rem; line-height: 1.4; color: var(--ink-40); }

/* L'entrée Kit du Finisher se signale par une pastille dorée. */
.navdrop__item--kit .navdrop__name { display: flex; align-items: center; gap: 8px; }
.navdrop__item--kit .navdrop__name::after {
  content: ""; width: 7px; height: 7px; background: var(--accent); clip-path: var(--oct);
}

/* Barre des pages produit : le déroulant pousse le CTA à droite. */
.rnav .navdrop { margin-left: auto; }
.rnav .navdrop + .navdrop { margin-left: 18px; }
.rnav .navdrop__menu { top: calc(100% + 10px); }

@media (hover: hover) and (pointer: fine) {
  .navdrop:hover .navdrop__menu { opacity: 1; visibility: visible; transform: none; }
  .navdrop:hover .navdrop__chev { transform: rotate(180deg); }
}

@media (max-width: 1024px) {
  /* Sous 1024px la barre passe en burger : le déroulant du menu
     principal disparaît avec elle, mais le CTA Commander reste. */
  .nav__links .navdrop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .navdrop__menu, .navdrop__chev, .navdrop__item { transition: none; }
}

/* ============================================================
   BARRE DES PAGES PRODUIT ; même gabarit que l'accueil
   ------------------------------------------------------------
   Les liens de section pointent vers l'accueil, pour qu'on
   puisse repartir n'importe où depuis n'importe quelle fiche.
   Sous 1024px, les déroulants restent visibles (contrairement
   à l'accueil qui bascule sur son dock) : sans eux, une page
   produit deviendrait un cul-de-sac sur mobile.
============================================================ */
.rnav .nav__links { display: flex; gap: 30px; align-items: center; }
.rnav .nav__links a {
  position: relative; font-size: .9rem; font-weight: 500; color: var(--ink-60);
  transition: color .3s var(--ease);
}
.rnav .nav__links a:hover { color: var(--ink); }
.rnav .nav__right { display: flex; align-items: center; gap: 18px; margin-left: auto; }

@media (max-width: 1024px) {
  .rnav .nav__links a { display: none; }        /* les sections d'accueil */
  .rnav .nav__links .navdrop { display: flex; } /* mais on garde Produits */
  .rnav .rnav__label { display: none; }
  .rnav .nav__links { gap: 0; }
}
@media (max-width: 560px) {
  .rnav__inner { gap: 10px; }
  .rnav .navdrop__menu { min-width: 232px; }
}
/* Dans la barre produit, le déroulant vit maintenant dans .nav__links :
   il ne doit plus se pousser tout seul à droite. */
.rnav .nav__links .navdrop { margin-left: 0; }
.rnav .nav__links .navdrop + .navdrop { margin-left: 0; }

/* ============================================================
   CODE PROMO ; composant partagé des trois tunnels d'achat
   (porte-médailles, carte en relief, Kit du Finisher).
   Toujours posé sur un fond sombre, comme les autres champs.
   Logique : promo.js ; liste des codes : côté serveur.
============================================================ */
.promo { display: flex; flex-direction: column; gap: 9px; }
.promo__label {
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.promo__row { display: flex; gap: 10px; }
.promo__input {
  flex: 1; min-width: 0;
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16); border-radius: 14px;
  padding: 14px 18px;
  font-family: var(--font); font-size: 1rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: #fff;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.promo__input::placeholder { color: rgba(255,255,255,.28); font-weight: 400; letter-spacing: 0; text-transform: none; }
.promo__input:hover { border-color: rgba(255,255,255,.30); }
.promo__input:focus {
  outline: none; border-color: var(--accent);
  background: rgba(255,255,255,.09); box-shadow: 0 0 0 3px rgba(200,154,75,.18);
}
.promo.is-set .promo__input { border-color: rgba(200,154,75,.55); background: rgba(200,154,75,.08); }
.promo__btn {
  flex: none; appearance: none; -webkit-appearance: none; cursor: pointer;
  padding: 0 22px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22); background: transparent;
  font-family: var(--font); font-size: .9rem; font-weight: 600; color: #fff;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.promo__btn:hover { border-color: #fff; }
.promo__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(200,154,75,.3); }
.promo__btn:disabled { opacity: .5; cursor: progress; }
.promo__msg { font-size: .82rem; line-height: 1.45; color: rgba(255,255,255,.5); }
.promo__msg:empty { display: none; }
.promo[data-state="ok"] .promo__msg { color: var(--accent); font-weight: 600; }
.promo[data-state="error"] .promo__msg { color: #e08a7d; }

/* Ligne « remise » des récapitulatifs (porte-médailles, carte) */
.checkout-sum__row.is-promo, .rbuy__row.is-promo { color: var(--accent); }

/* ============================================================
   v12 ; HUB DE LA GAMME — 4 pièces + édition limitée en tête
============================================================ */
.phub__grid--4 { grid-template-columns: repeat(4, 1fr); }
.pitem__media--studio { display: grid; place-items: center; background: radial-gradient(120% 95% at 50% 15%, #FFFFFF, #ECEAE5 60%, #DEDBD3); }
.pitem__media--studio img { object-fit: contain; }
/* photo verticale montrée en entier, sur le gris du studio photo */
.pitem__media--fit, .pitem--kit .pitem__media--fit { padding: 0; display: block; background: linear-gradient(#c9c4c0, #d3cecb 50%, #ebe6e3); }
.pitem__media--fit img, .pitem--kit .pitem__media--fit img { width: 100%; height: 100%; object-fit: contain; }

.phub__edition {
  max-width: var(--maxw); margin: 0 auto clamp(18px, 2.4vw, 30px);
  display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: clamp(18px, 3vw, 40px);
  padding: clamp(18px, 2.4vw, 28px); border-radius: 26px;
  background: radial-gradient(60% 120% at 10% 50%, rgba(207,242,74,.12), transparent 70%), #0B0C0E;
  border: 1px solid rgba(207,242,74,.3); color: #fff;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.phub__edition:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.phub__edition.is-closed { display: none; }
.phub__edition-media img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 22px rgba(207,242,74,.3)); }
.phub__edition-copy { display: flex; flex-direction: column; gap: 8px; }
.phub__edition-tag {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 100px;
  font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #1d2600; background: var(--lume, #CFF24A);
}
.phub__edition-tag i { width: 7px; height: 7px; clip-path: var(--oct); background: #1d2600; }
.phub__edition b { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; }
.phub__edition-copy > span:not(.phub__edition-tag):not(.phub__edition-go):not(.phub__edition-price) { font-size: .95rem; line-height: 1.55; color: rgba(255,255,255,.62); max-width: 60ch; }
.phub__edition-go { font-size: .9rem; font-weight: 700; color: var(--lume, #CFF24A); }
/* Fiche KACHI, carte « Édition limitée » : la pièce détourée, de jour puis de nuit */
.vcard__slide--day { background: radial-gradient(100% 90% at 50% 20%, #FFFFFF, #E5E1D8); }
.vcard__slide--night { background: radial-gradient(70% 60% at 50% 50%, rgba(207,242,74,.12), transparent 65%), #08090A; }
.vcard__slide--day img, .vcard__slide--night img { object-fit: contain; padding: 9%; }
.vcard__slide--night img { filter: drop-shadow(0 0 22px rgba(207,242,74,.3)); }

.phub__edition-copy > .phub__edition-price {
  margin: 4px 0 2px; color: #fff;
  --sp-size: 1.7rem; --sp-strike: var(--lume); --sp-new: var(--lume); --sp-tag: rgba(255,255,255,.7);
}

@media (max-width: 1100px) { .phub__grid--4 { grid-template-columns: 1fr 1fr; max-width: none; } }
@media (max-width: 640px)  {
  .phub__grid--4 { grid-template-columns: 1fr; }
  .phub__edition { grid-template-columns: 1fr; }
  .phub__edition-media { max-width: 200px; }
}