/* assets/css/product.css
 * Pages produit — refonte DARK PREMIUM inspirée du quiet luxury Apple.
 * Fond noir profond, glows colorés issus de la couleur packaging du produit,
 * grain texture subtil, packshots imposants, accents typographiques précis.
 */

/* === GLOBAL : noir partout sur les pages produit ===================== */

body[class*="theme-"] {
  background: var(--c-black);
  color: var(--c-off-white);
}

/* Grain texture en data URI, appliqué via ::after sur les sections dark */
.grain-bg {
  position: relative;
}
.grain-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 5;
}

/* === ACTE 1 : HERO DARK PREMIUM ======================================= */

.p-hero {
  background: var(--c-black);
  color: var(--c-off-white);
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: calc(var(--header-h) + var(--sp-4));
  padding-bottom: var(--sp-5);
  position: relative;
  overflow: hidden;
}

/* GLOW radial couleur produit derrière le packshot — la signature dark premium */
.p-hero::before {
  content: '';
  position: absolute;
  top: 50%; right: -10%;
  width: 80vw; height: 120vh;
  max-width: 1200px;
  background: radial-gradient(ellipse at center, var(--c-theme) 0%, transparent 55%);
  transform: translateY(-50%);
  filter: blur(60px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

body.theme-w2 .p-hero::before {
  background: radial-gradient(ellipse at center, var(--c-w2-accent) 0%, transparent 55%);
  opacity: 0.18;
}

/* Grain overlay */
.p-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.05;
  pointer-events: none;
  z-index: 4;
}

.p-hero__inner {
  display: grid;
  grid-template-columns: 0.55fr 1.45fr;
  gap: var(--sp-5);
  align-items: center;
  position: relative;
  z-index: 2;
}

.p-hero__name {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
}

.p-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-theme-light);
  margin-bottom: var(--sp-3);
}
body.theme-w2 .p-hero__eyebrow { color: var(--c-w2-accent); }
.p-hero__eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: currentColor;
  display: inline-block;
}

.p-hero__logo {
  width: 84px;
  margin-bottom: var(--sp-3);
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.p-hero__name {
  margin: 0 0 var(--sp-2);
  color: var(--c-off-white);
  line-height: 0.9;
}
body.theme-w2 .p-hero__name { color: var(--c-w2-accent); }

.p-hero__sub {
  color: rgba(255,255,255,0.65);
  font-size: var(--fs-h3);
  font-weight: var(--fw-light);
  line-height: 1.2;
  margin-bottom: var(--sp-4);
  max-width: 30ch;
}

.p-hero__callout-block {
  margin-block: var(--sp-4) var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--c-theme-light);
}
body.theme-w2 .p-hero__callout-block { border-color: var(--c-w2-accent); }

.p-hero__callout {
  display: block;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: var(--fw-black);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--c-theme-light);
}
body.theme-w2 .p-hero__callout { color: var(--c-w2-accent); }

.p-hero__callout-sub {
  color: rgba(255,255,255,0.55);
  font-size: var(--fs-body);
  line-height: 1.35;
  margin-top: var(--sp-1);
  max-width: 32ch;
}

.p-hero__cta { margin-top: var(--sp-5); }

.p-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Glow secondaire concentré sur le packshot */
.p-hero__visual::before {
  content: '';
  position: absolute;
  width: 80%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--c-theme-light) 0%, transparent 70%);
  filter: blur(40px);
  opacity: 0.4;
  z-index: 0;
}
body.theme-w2 .p-hero__visual::before {
  background: radial-gradient(circle, var(--c-w2-accent) 0%, transparent 70%);
  opacity: 0.18;
}

.p-hero__visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  max-height: 85vh;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.18))
          drop-shadow(0 2px 6px rgba(0,0,0,0.12));
  animation: floatY 6s ease-in-out infinite;
}

/* Packshots verticaux (micros main S2/S3) : hauteur ajustée pour parité visuelle
   avec les serre-tête horizontaux sans débordement */
body.theme-s2 .p-hero__visual img,
body.theme-s3 .p-hero__visual img {
  width: 100%;
  height: 88vh;
  max-height: 88vh;
  max-width: 780px;
  margin-block: 0;
  object-fit: contain;
}

/* S2 Stage : packshot vertical à la source, rotation fixe de 45° + scale 1.15
   pour compenser la perte visuelle due à la rotation. Float subtil hérité
   tout en préservant la rotation. */
@media (min-width: 1025px) {
  body.theme-s2 .p-hero__visual img {
    height: 88vh;
    max-height: 88vh;
    max-width: 920px;
    transform-origin: center;
    animation: s2-float 6s ease-in-out infinite;
  }
}

@keyframes s2-float {
  0%, 100% { transform: rotate(45deg) scale(0.92) translateY(0); }
  50%      { transform: rotate(45deg) scale(0.92) translateY(-12px); }
}

/* S3 Presenter : même échelle visuelle que le S2 (scale 0.92), sans rotation */
@media (min-width: 1025px) {
  body.theme-s3 .p-hero__visual img {
    transform-origin: center;
    animation: s3-float 6s ease-in-out infinite;
  }
}

@keyframes s3-float {
  0%, 100% { transform: scale(0.92) translateY(0); }
  50%      { transform: scale(0.92) translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-s3 .p-hero__visual img {
    animation: none;
    transform: scale(0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-s2 .p-hero__visual img {
    animation: none;
    transform: rotate(45deg) scale(0.92);
  }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .p-hero__visual img { animation: none; }
}

.p-hero__meta {
  position: absolute;
  bottom: var(--sp-3); left: 0; right: 0;
  z-index: 3;
}
.p-hero__meta .container {
  display: flex; justify-content: space-between;
  font-size: var(--fs-caption);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

@media (max-width: 1024px) {
  .p-hero__inner { grid-template-columns: 1fr; gap: var(--sp-4); }
  .p-hero__visual { order: -1; height: 45vh; }
  .p-hero__visual img { max-height: 45vh; max-width: 100%; }
  .p-hero::before { top: 25%; right: -30%; width: 120vw; }

  /* Override mobile pour S2/S3 (annule height 110vh + margin -5vh desktop) */
  body.theme-s2 .p-hero__visual img,
  body.theme-s3 .p-hero__visual img {
    height: 45vh;
    max-height: 45vh;
    max-width: 100%;
    margin-block: 0;
  }
  body.theme-s2 .p-hero__inner,
  body.theme-s3 .p-hero__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .p-hero__visual { height: 40vh; }
  .p-hero__visual img,
  body.theme-s2 .p-hero__visual img,
  body.theme-s3 .p-hero__visual img {
    max-height: 40vh;
    height: auto;
  }
  .p-hero__name { font-size: clamp(2rem, 9vw, 2.75rem); }
  .p-hero__callout { font-size: clamp(2.25rem, 10vw, 3.5rem); }
}

/* === ACTE 2 : MANIFESTO (sobre, lisible) ============================== */

/* === ACTE 2 : MANIFESTO — Editorial Drama ============================
   Composition asymétrique inspirée d'une double page magazine premium.
   - Code modèle en watermark énorme dans le fond
   - Lead = statement éditorial gauche-aligné, Roboto Black XL
   - Sub-paragraphes = 2 colonnes alignées à droite, body régulier
   - Termes-clés en couleur produit
   - Animations d'entrée subtiles au chargement
*/

.p-manifesto {
  background: var(--c-black);
  color: var(--c-off-white);
  padding-block: clamp(var(--sp-7), 12vw, var(--sp-8));
  text-align: left;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Watermark code modèle (S2., S3., W1., W2.) en background éditorial.
   Texte fourni en HTML pour rester côté contenu plutôt que magique CSS. */
.p-manifesto__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  font-size: clamp(14rem, 38vw, 32rem);
  font-weight: var(--fw-black);
  color: rgba(255, 255, 255, 0.035);
  letter-spacing: -0.06em;
  line-height: 0.85;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  font-family: var(--f-sans);
  opacity: 0;
  animation: manifestoWatermark 1600ms cubic-bezier(0.22, 0.61, 0.36, 1) 150ms forwards;
}

@keyframes manifestoWatermark {
  to { opacity: 1; }
}

.p-manifesto > .container {
  position: relative;
  z-index: 1;
}

/* Barre d'accent couleur produit — version éditoriale, plus longue */
.p-manifesto__quote {
  display: block;
  width: 80px;
  height: 3px;
  background: var(--c-theme-light);
  margin: 0 0 var(--sp-4);
  transform: scaleX(0);
  transform-origin: left center;
  animation: manifestoBar 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 350ms forwards;
}
body.theme-w2 .p-manifesto__quote { background: var(--c-w2-accent); }

@keyframes manifestoBar {
  to { transform: scaleX(1); }
}

/* Lead = STATEMENT éditorial, gauche-aligné, Roboto Black XL */
.p-manifesto > .container > p {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: var(--fw-black);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--c-off-white);
  opacity: 0;
  transform: translateY(20px);
  animation: manifestoLead 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 500ms forwards;
}
.p-manifesto > .container > p::first-line { color: inherit; }

@keyframes manifestoLead {
  to { opacity: 1; transform: translateY(0); }
}

/* Sub-paragraphes : 2 colonnes éditoriales, alignées à droite du contenu */
.p-manifesto__detail {
  max-width: 800px;
  margin: var(--sp-6) 0 0 auto; /* push à droite pour casser la symétrie */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3) var(--sp-5);
  text-align: left;
  opacity: 0;
  transform: translateY(16px);
  animation: manifestoDetail 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 800ms forwards;
}

@keyframes manifestoDetail {
  to { opacity: 1; transform: translateY(0); }
}

.p-manifesto .p-manifesto__detail p {
  max-width: none;
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  font-weight: var(--fw-regular);
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--c-off-white);
  margin: 0;
}
.p-manifesto .p-manifesto__detail p::first-line { color: inherit; }

/* Responsive : sur mobile/tablette, retour à une colonne, lead plus mesuré */
@media (max-width: 900px) {
  .p-manifesto > .container > p { max-width: 100%; }
  .p-manifesto__detail {
    grid-template-columns: 1fr;
    margin-top: var(--sp-5);
    gap: var(--sp-4);
  }
  .p-manifesto__watermark { font-size: clamp(10rem, 50vw, 18rem); }
}

@media (prefers-reduced-motion: reduce) {
  .p-manifesto__watermark,
  .p-manifesto__quote,
  .p-manifesto > .container > p,
  .p-manifesto__detail {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Scroll highlight — chaque mot d'abord en gris-clair (WCAG AA: contraste ≥ 4.5
   sur fond noir), passe en blanc plein quand il atteint la zone "lecture".
   On utilise `color: rgba` au lieu d'`opacity` pour que les <strong> en couleur
   produit puissent rester pleinement lumineux (non multipliés par l'alpha parent). */
[data-scroll-highlight] .word {
  display: inline-block;
  color: rgba(255, 255, 255, 0.55);
  transition: color 220ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: color;
}

/* Les <strong> du manifesto restent en couleur produit pleine, même quand
   les mots autour sont en gris-clair. Ils servent de "phare" de lecture. */
[data-scroll-highlight] strong .word,
[data-scroll-highlight] strong {
  color: var(--c-theme-light) !important;
}
body.theme-w2 [data-scroll-highlight] strong .word,
body.theme-w2 [data-scroll-highlight] strong {
  color: var(--c-w2-accent) !important;
}

/* Mise en valeur des termes-clés du manifesto : couleur produit en place du blanc. */
.p-manifesto p strong,
.p-manifesto__detail p strong {
  font-weight: var(--fw-medium);
  color: var(--c-theme-light);
}
body.theme-w2 .p-manifesto p strong,
body.theme-w2 .p-manifesto__detail p strong {
  color: var(--c-w2-accent);
}

@media (prefers-reduced-motion: reduce) {
  [data-scroll-highlight] .word {
    opacity: 1;
    transition: none;
  }
}

/* === ACTE 3 : USAGE EN SITUATION ====================================== */

.p-usage {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--c-off-white);
}
.p-usage__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.p-usage__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.p-usage__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, var(--c-black) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%),
    radial-gradient(ellipse at 20% 80%, var(--c-theme) 0%, transparent 50%);
  opacity: 0.95;
  mix-blend-mode: normal;
}
body.theme-w2 .p-usage__bg::after {
  background:
    linear-gradient(0deg, var(--c-black) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%);
}
.p-usage > .container {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-7);
}
.p-usage__eyebrow {
  font-size: var(--fs-label);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-theme-light);
  margin-bottom: var(--sp-2);
}
body.theme-w2 .p-usage__eyebrow { color: var(--c-w2-accent); }
.p-usage__caption {
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  font-weight: var(--fw-light);
  max-width: 24ch;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* === ACTE 4 : FOCUS TECH ============================================== */

.p-focus {
  background: var(--c-black);
  color: var(--c-off-white);
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: var(--sp-7);
}

/* Le visual est le centre de gravité du focus : glow + ripples y sont ancrés */
.p-focus__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Glow couleur produit centré sur le packshot (élément du visual) */
.p-focus__visual::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 85%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--c-theme-light) 0%, transparent 65%);
  filter: blur(40px);
  opacity: 0.55;
  z-index: 0;
}
body.theme-w2 .p-focus__visual::before {
  background: radial-gradient(circle, var(--c-w2-accent) 0%, transparent 65%);
  opacity: 0.2;
}

/* Ripples concentriques centrés sur le packshot */
.p-focus__ripples {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-focus__ripples::before,
.p-focus__ripples::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  border: 1px solid var(--c-theme-light);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: ripple-out 4s ease-out infinite;
}
body.theme-w2 .p-focus__ripples::before,
body.theme-w2 .p-focus__ripples::after {
  border-color: var(--c-w2-accent);
}
.p-focus__ripples::after { animation-delay: 2s; }

@keyframes ripple-out {
  0%   { width: 200px; height: 200px; opacity: 0.5; }
  100% { width: 900px; height: 900px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .p-focus__ripples::before, .p-focus__ripples::after { animation: none; opacity: 0; }
}

.p-focus__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-5);
  align-items: center;
}

.p-focus__eyebrow {
  font-size: var(--fs-label);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-theme-light);
  margin-bottom: var(--sp-2);
}
body.theme-w2 .p-focus__eyebrow { color: var(--c-w2-accent); }

.p-focus__title {
  margin-bottom: var(--sp-5);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

.p-focus__visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  max-height: 92vh;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.18));
}

/* W2 : image usage en situation, plus immersive */
body.theme-w2 .p-focus__visual img {
  width: 105%;
  max-width: 1300px;
  margin-left: -3%;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.22));
}

.p-focus__hotspots {
  display: grid;
  gap: var(--sp-2);
}

.p-focus__hotspot {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-3) var(--sp-3);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 2px solid var(--c-theme-light);
  border-radius: var(--radius-md);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s ease, border-color 0.3s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.theme-w2 .p-focus__hotspot { border-left-color: var(--c-w2-accent); }
.p-focus__hotspot:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  border-left-color: var(--c-theme-light);
}

.p-focus__hotspot.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.p-focus__hotspot .icon-wrap {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-theme-light);
}
body.theme-w2 .p-focus__hotspot .icon-wrap { color: var(--c-w2-accent); }
.p-focus__hotspot .icon-wrap .icon {
  width: 26px; height: 26px;
}

.p-focus__hotspot h3 {
  font-size: clamp(1.125rem, 1.5vw, 1.4rem);
  margin: 0 0 6px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--c-theme-light);
}
body.theme-w2 .p-focus__hotspot h3 { color: var(--c-w2-accent); }

.p-focus__hotspot p {
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  color: rgba(255,255,255,0.78);
  margin: 0;
  line-height: 1.45;
}

@media (max-width: 1024px) {
  .p-focus__inner { grid-template-columns: 1fr; }
  .p-focus__visual { order: -1; max-width: 380px; margin-inline: auto; }
}

/* === ACTE 4.5 : DÉTAILS ÉDITORIAUX (paragraphes complets fiches) ====== */

.p-details {
  background: var(--c-black);
  color: var(--c-off-white);
  padding-block: var(--sp-8);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.p-details::before {
  content: '';
  position: absolute;
  bottom: -20%; right: -10%;
  width: 60vw; height: 80vh;
  background: radial-gradient(circle, var(--c-theme) 0%, transparent 60%);
  filter: blur(120px);
  opacity: 0.25;
  z-index: 0;
  pointer-events: none;
}
body.theme-w2 .p-details::before {
  background: radial-gradient(circle, var(--c-w2-accent) 0%, transparent 60%);
  opacity: 0.08;
}

.p-details > .container { position: relative; z-index: 1; }

.p-details__intro {
  text-align: center;
  margin-bottom: var(--sp-6);
}
.p-details__intro-eyebrow {
  font-size: var(--fs-label);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-theme-light);
  margin-bottom: var(--sp-2);
}
body.theme-w2 .p-details__intro-eyebrow { color: var(--c-w2-accent); }
.p-details__intro-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: var(--fw-light);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-inline: auto;
}

.p-details__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: stretch;
}

.p-details__block {
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s, background 0.3s;
}

.p-details__block::before {
  content: '';
  position: absolute;
  top: -20%; right: -20%;
  width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--c-theme) 0%, transparent 65%);
  filter: blur(60px);
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
body.theme-w2 .p-details__block::before {
  background: radial-gradient(circle, var(--c-w2-accent) 0%, transparent 65%);
  opacity: 0.15;
}

.p-details__block:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
}
.p-details__block:hover::before { opacity: 0.55; }
body.theme-w2 .p-details__block:hover::before { opacity: 0.25; }

.p-details__block > * { position: relative; z-index: 1; }

.p-details__icon-wrap {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-theme-light);
  margin-bottom: var(--sp-3);
  position: relative;
}
body.theme-w2 .p-details__icon-wrap { color: var(--c-w2-accent); }

.p-details__icon-wrap::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--c-theme-light);
  opacity: 0.3;
}
body.theme-w2 .p-details__icon-wrap::after { border-color: var(--c-w2-accent); }

.p-details__icon-wrap .icon {
  width: 36px; height: 36px;
}

.p-details__eyebrow {
  font-size: var(--fs-label);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-theme-light);
  margin-bottom: var(--sp-2);
}
body.theme-w2 .p-details__eyebrow { color: var(--c-w2-accent); }

.p-details__title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: var(--fw-medium);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: var(--sp-3);
  max-width: 22ch;
}

.p-details__text {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: rgba(255,255,255,0.55);
  max-width: 56ch;
}

.p-details__text strong {
  color: var(--c-off-white);
  font-weight: var(--fw-medium);
}

.p-details__text + .p-details__text { margin-top: var(--sp-2); }

@media (max-width: 1024px) {
  .p-details__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* === ACTE 5 : SPECS TABLE (dark, aérée) =============================== */

.p-specs {
  background: var(--c-black);
  color: var(--c-off-white);
  padding-block: var(--sp-8);
  position: relative;
}

.p-specs__eyebrow {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-theme-light);
  margin-bottom: var(--sp-2);
  text-align: center;
}
body.theme-w2 .p-specs__eyebrow { color: var(--c-w2-accent); }

.p-specs__title {
  margin-bottom: var(--sp-6);
  text-align: center;
  font-weight: var(--fw-light);
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.02em;
}

.p-specs__table {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 0 var(--sp-5);
}

.p-specs__table dt {
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--fs-caption);
  color: rgba(255,255,255,0.55);
  padding-block: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.p-specs__table dd {
  margin: 0;
  padding-block: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: var(--fs-body);
  color: var(--c-off-white);
}

@media (max-width: 768px) {
  .p-specs__table {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .p-specs__table dt { border-top: 1px solid rgba(255,255,255,0.08); padding-bottom: 0; }
  .p-specs__table dd { border-top: none; padding-top: 4px; padding-bottom: var(--sp-3); }
}

/* === ACTE 6 : ACHAT & RESSOURCES (dark) =============================== */

.p-buy {
  background: var(--c-black);
  color: var(--c-off-white);
  padding-block: var(--sp-7);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.p-buy::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 80vw; height: 60vh;
  background: radial-gradient(ellipse at center top, var(--c-theme) 0%, transparent 60%);
  filter: blur(80px);
  opacity: 0.35;
  z-index: 0;
}
body.theme-w2 .p-buy::before {
  background: radial-gradient(ellipse at center top, var(--c-w2-accent) 0%, transparent 60%);
  opacity: 0.12;
}

.p-buy > .container { position: relative; z-index: 1; }

.p-buy__eyebrow {
  display: inline-block;
  font-size: var(--fs-label);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-theme-light);
  margin-bottom: var(--sp-2);
}
body.theme-w2 .p-buy__eyebrow { color: var(--c-w2-accent); }

.p-buy__price {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: var(--fw-black);
  margin: 0;
  color: var(--c-off-white);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.p-buy__ref {
  color: rgba(255,255,255,0.4);
  font-size: var(--fs-label);
  margin-block: var(--sp-1) var(--sp-4);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.p-buy__included {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: rgba(255,255,255,0.6);
  margin-block: var(--sp-3);
  font-size: var(--fs-body);
}

.p-buy__included .icon {
  width: 24px; height: 24px;
  color: var(--c-theme-light);
}
body.theme-w2 .p-buy__included .icon { color: var(--c-w2-accent); }

.p-buy__ctas {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

/* CTAs sur fond dark : ajustements */
.p-buy .btn--primary {
  background: var(--c-theme);
  color: var(--c-off-white);
  border-color: var(--c-theme);
}
body.theme-w2 .p-buy .btn--primary {
  background: var(--c-w2-accent);
  color: var(--c-black);
  border-color: var(--c-w2-accent);
}
.p-buy .btn--secondary {
  color: var(--c-off-white);
  border-color: rgba(255,255,255,0.3);
}
.p-buy .btn--secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--c-off-white);
  color: var(--c-off-white);
}

/* === NAVIGATION INTER-PRODUITS ======================================== */

.p-nav {
  background: var(--c-neutral-900);
  color: var(--c-off-white);
  padding-block: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.p-nav__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-3);
  align-items: center;
  text-align: center;
}

.p-nav a {
  color: var(--c-off-white);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  transition: color var(--t-fast);
  opacity: 0.7;
}

.p-nav a:hover { opacity: 1; color: var(--c-theme-light); }
body.theme-w2 .p-nav a:hover { color: var(--c-w2-accent); }

.p-nav__prev { text-align: left; }
.p-nav__next { text-align: right; }

@media (max-width: 768px) {
  .p-nav__inner { grid-template-columns: 1fr; gap: var(--sp-2); text-align: center; }
  .p-nav__prev, .p-nav__next { text-align: center; }
}

/* === HERO LOAD ANIMATION — Color burst (Option C) =====================
   Au chargement d'une page produit :
   1. Le fond démarre noir
   2. Un blob radial de la couleur produit explose depuis le centre (scale + blur)
   3. Une couche pleine couleur produit fade-in par-dessus pour "fixer" le fond
   4. Eyebrow → logo → name → sub → callout → CTA → packshot → meta arrivent en cascade
*/

.p-hero {
  background: var(--c-black);
  isolation: isolate;
}

.p-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    var(--c-theme) 0%, var(--c-theme) 28%, transparent 65%);
  filter: blur(50px);
  opacity: 0;
  transform: scale(0.35);
  transform-origin: center;
  animation: p-hero-burst 1700ms cubic-bezier(0.22, 0.61, 0.36, 1) 100ms forwards;
  z-index: 0;
  pointer-events: none;
}

.p-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-theme);
  opacity: 0;
  animation: p-hero-settle 900ms ease-out 1300ms forwards;
  z-index: 0;
  pointer-events: none;
}

/* W2 = thème noir + lime, on garde le fond final noir mais le burst est lime */
body.theme-w2 .p-hero::before {
  background: radial-gradient(circle at 50% 50%,
    var(--c-w2-accent) 0%, var(--c-w2-accent) 18%, transparent 55%);
}
body.theme-w2 .p-hero::after {
  background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%);
}

/* Le contenu doit rester au-dessus des deux couches */
.p-hero__inner,
.p-hero__meta {
  position: relative;
  z-index: 2;
}

.p-hero__eyebrow {
  opacity: 0;
  animation: p-hero-fade 700ms ease-out 800ms forwards;
}

.p-hero__logo {
  opacity: 0;
  transform: scale(0.94);
  animation: p-hero-logo 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 950ms forwards;
}

.p-hero__name {
  opacity: 0;
  transform: translateY(22px);
  animation: p-hero-rise 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 1100ms forwards;
}

.p-hero__sub {
  opacity: 0;
  transform: translateY(14px);
  animation: p-hero-rise 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 1300ms forwards;
}

.p-hero__callout-block {
  opacity: 0;
  transform: translateY(14px);
  animation: p-hero-rise 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 1500ms forwards;
}

.p-hero__cta {
  opacity: 0;
  animation: p-hero-fade 700ms ease-out 1700ms forwards;
}

/* Packshot : arrive après le burst, glisse depuis la droite + scale subtil */
.p-hero__visual {
  opacity: 0;
  transform: scale(0.96) translateX(24px);
  animation: p-hero-packshot 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) 1000ms forwards;
}

.p-hero__meta {
  opacity: 0;
  animation: p-hero-fade 700ms ease-out 1900ms forwards;
}

@keyframes p-hero-burst {
  to { opacity: 0.55; transform: scale(2.6); filter: blur(35px); }
}
@keyframes p-hero-settle {
  to { opacity: 1; }
}
@keyframes p-hero-fade {
  to { opacity: 1; }
}
@keyframes p-hero-logo {
  to { opacity: 1; transform: scale(1); }
}
@keyframes p-hero-rise {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes p-hero-packshot {
  to { opacity: 1; transform: scale(1) translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .p-hero { background: var(--c-theme); }
  body.theme-w2 .p-hero { background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%); }
  .p-hero::before,
  .p-hero::after,
  .p-hero__eyebrow,
  .p-hero__logo,
  .p-hero__name,
  .p-hero__sub,
  .p-hero__callout-block,
  .p-hero__cta,
  .p-hero__visual,
  .p-hero__meta {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    filter: none !important;
  }
  .p-hero::before { display: none; }
  .p-hero::after { display: none; }
}