/*
  ============================================================
  9MM — PAGES PRODUIT (BODY / MIND)
  ------------------------------------------------------------
  Styles partagés par body.html et mind.html. La couleur d'accent
  est pilotée par une variable locale --accent, posée par la
  classe de gamme (.pp--body / .pp--mind) → un seul CSS, deux pages.

  Réutilise site.css (tokens, header, footer) + home.css (.home-container,
  .home-section-title, .home-btn). Mobile-first. Classes préfixées "pp-".
  ============================================================
*/

.pp { background: var(--bg); color: var(--white); }

/* Couleur d'accent par gamme (réutilise la photo détourée de la spirale) */
.pp--body {
  --accent: var(--body);
  --accent-glow: var(--glow-body);
  --accent-soft: rgba(255, 23, 23, 0.14);
  --accent-line: rgba(255, 23, 23, 0.35);
}
.pp--mind {
  --accent: var(--mind);
  --accent-glow: var(--glow-mind);
  --accent-soft: rgba(54, 217, 187, 0.12);
  --accent-line: rgba(54, 217, 187, 0.35);
}

/* Lien retour discret en haut de la page produit */
.pp-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.pp-back:hover { color: var(--white); }


/* =========================================================
   HERO PRODUIT
   ========================================================= */
.pp-hero {
  position: relative;
  padding: 32px 0 72px;
  overflow: hidden;
}

/* halo d'accent derrière la canette */
.pp-hero-glow {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  max-width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 68%);
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.pp-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}

/* Visuel : la vraie canette détourée */
.pp-hero-media {
  display: grid;
  place-items: center;
  order: -1;                      /* image au-dessus du texte en mobile */
}
.pp-can {
  height: clamp(300px, 50vh, 520px);
  width: auto;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.7));
  user-select: none;
  -webkit-user-drag: none;
}

.pp-kicker {
  display: inline-block;
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 7px 16px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
}
.pp-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--white);
}
.pp-hook {
  margin: 0 0 18px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent);
}
.pp-lead {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 460px;
}

/* Rangée de chips de faits clés */
.pp-chips {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pp-chips li {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--white);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 7px 14px;
}

/* Boutons d'appel */
.pp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.pp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 30px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #000;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.pp-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px var(--accent-glow); }
.pp-cta:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.pp-cta-note {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}


/* =========================================================
   SECTIONS DE CONTENU
   ========================================================= */
.pp-section { padding: 76px 0; }
.pp-section--alt { background: var(--surface); }

.pp-section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  line-height: 1.15;
  margin: 0 0 28px;
  color: var(--white);
}

/* ---- Bénéfices (3 cartes) ---- */
.pp-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.pp-benefit {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 22px;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.pp-benefit:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.pp-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: 14px;
  border-radius: 11px;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  font-size: 1.1rem;
  color: var(--white);
}
.pp-benefit h3 { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--white); }
.pp-benefit p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }

/* ---- Composition / transparence (lignes clé:valeur) ---- */
.pp-compo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 760px;
}
.pp-compo-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 16px 20px;
}
.pp-compo-key { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.pp-compo-val { color: var(--white); font-size: 1rem; line-height: 1.5; }
.pp-compo-note { margin: 18px 0 0; font-size: 0.85rem; color: var(--muted); }

/* ---- Usage (moments) ---- */
.pp-usage {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 760px;
}
.pp-usage li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}
.pp-usage li strong { color: var(--white); font-weight: 600; }
.pp-usage-bullet {
  flex: 0 0 auto;
  margin-top: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ---- Cross-sell vers l'autre gamme ---- */
.pp-cross {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 28px;
}
.pp-cross h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--white); }
.pp-cross p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 520px; }


/* =========================================================
   RESPONSIVE — DESKTOP
   ========================================================= */
@media (min-width: 769px) {
  .pp-hero { padding: 48px 0 96px; }
  .pp-hero-inner { grid-template-columns: 1fr 1fr; gap: 48px; }
  .pp-hero-media { order: 0; }              /* image à gauche en desktop */
  /* Glow d'accent déplacé vers le texte (desktop) : la couleur se diffuse vers la
     droite (sous le titre) et ne forme plus un halo isolé qui "coupe" le noir près
     de la canette. En mobile il reste centré derrière la canette (règle de base). */
  .pp-hero-glow { top: 46%; left: 62%; width: 64vw; max-width: 760px; height: 600px; opacity: 0.42; }
  .pp-section { padding: 100px 0; }
  .pp-benefits { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .pp-cross { flex-direction: row; align-items: center; justify-content: space-between; gap: 28px; padding: 36px 40px; }
}

@media (min-width: 600px) {
  .pp-compo-row { grid-template-columns: 200px 1fr; align-items: baseline; gap: 18px; }
}


/* =========================================================
   ACCESSIBILITÉ — réduction des animations
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .pp-benefit, .pp-benefit:hover, .pp-cta, .pp-cta:hover { transition: none; transform: none; }
}