/*
  ============================================================
  9MM — THÈME BLANC (override premium clair)
  ------------------------------------------------------------
  Chargé EN DERNIER sur accueil/body/mind/achat-body/achat-mind.
  Stratégie : on surcharge d'abord les TOKENS :root (≈80% des
  surfaces réagissent), puis on rattrape le codé-en-dur (halos,
  dégradés sombres de polish.css, fonds rgba(0,0,0,…), etc.).

  ⚠️ Sections qui RESTENT SOMBRES (non touchées ici) :
    - .sp  (spirale) : tokens scopés à elle, fond noir voulu.
    - .pv-scroll (vidéo produit) : fond #000 incrusté → on force
      le noir + on rétablit le texte clair localement.
  ============================================================
*/

/* =========================================================
   1) TOKENS — passage en clair
   ========================================================= */
:root {
  --bg: #f4f4f7;             /* fond clair premium (légèrement froid) */
  --surface: #ffffff;        /* sections « alt » → blanc pur */
  --card: #ffffff;           /* cartes → blanc pur (relief par ombre/bord) */
  --border: #e3e3ea;         /* bords clairs */
  --white: #12121a;          /* ⚠️ = ENCRE (texte) : devient sombre */
  --muted: #6b6b7c;          /* gris lisible sur blanc */
  --body: #e11023;           /* rouge un peu plus dense (contraste sur blanc) */
  --mind: #0e9c80;           /* teal assombri (le #36d9bb est illisible sur blanc) */
  --glow-body: rgba(225, 16, 35, 0.16);
  --glow-mind: rgba(14, 156, 128, 0.16);

  /* re-dérivés de polish.css (sheen/halo prévus pour fond noir) */
  --card-sheen: linear-gradient(165deg, rgba(18, 18, 26, 0.015), rgba(18, 18, 26, 0) 58%);
  --border-bright: rgba(18, 18, 26, 0.10);
}

html, body {
  background: var(--bg);
  color: var(--white);
}

/* =========================================================
   2) GRAIN GLOBAL (polish.css body::after) — sur blanc, l'overlay
   noir salit ; on l'atténue fortement (texture quasi nulle).
   ========================================================= */
body::after {
  opacity: 0.025;
  mix-blend-mode: multiply;
}

/* =========================================================
   3) HEADER — clair, flouté au scroll
   ========================================================= */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: rgba(18, 18, 26, 0.08);
}
/* (le fil d'accent ::after de polish.css reste, joli sur blanc) */

/* Logo : les PNG sont clairs (pensés fond noir) → invisibles sur blanc.
   On les inverse pour obtenir un wordmark sombre lisible. */
.site-logo-img {
  filter: invert(1) hue-rotate(180deg) brightness(0.9);
}

/* Nav mobile dépliée : fond clair (était rgba(0,0,0,.96)) */
@media (max-width: 768px) {
  html.has-js .site-nav {
    background: rgba(255, 255, 255, 0.97);
    border-bottom-color: var(--border);
  }
}

/* Bouton « Acheter » MIND : teal foncé → texte blanc (était #06231e) */
.site-buy--mind { color: #fff; }

/* =========================================================
   4) HERO — halos clairs + grille discrète (polish.css mettait
   du blanc translucide invisible sur blanc).
   ========================================================= */
.home-hero {
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(18, 18, 26, 0.04), transparent 60%),
    var(--bg);
}
.home-hero::after {
  background-image:
    linear-gradient(rgba(18, 18, 26, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 18, 26, 0.05) 1px, transparent 1px);
}
/* Taches de couleur du hero (retour Allan : « j'aimais bien ») — remises
   FRANCHES sur blanc : halo rouge (haut-gauche) + teal (bas-droite), bien
   présents mais diffus, comme sur la version sombre. */
.home-hero-glow { opacity: 0.95; filter: blur(85px); }
.home-hero-glow--body {
  background: radial-gradient(circle, rgba(225, 16, 35, 0.38) 0%, rgba(225, 16, 35, 0.12) 40%, transparent 72%);
}
.home-hero-glow--mind {
  background: radial-gradient(circle, rgba(14, 156, 128, 0.42) 0%, rgba(14, 156, 128, 0.12) 40%, transparent 72%);
}
.home-hero-logo { filter: none; }       /* pas de drop-shadow noir lourd */
.home-hero-title { text-shadow: none; } /* le glow blanc devient invisible/inutile */

/* =========================================================
   5) SECTIONS HOME — dégradés sombres de polish.css → clairs
   ========================================================= */
.home-beyond {
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(14, 156, 128, 0.05), transparent 60%),
    var(--bg);
}
.home-proof { background: linear-gradient(180deg, #ffffff, var(--bg)); }
.home-faq   { background: linear-gradient(180deg, var(--bg), #ffffff); }
.home-final { background: radial-gradient(80% 90% at 50% 0%, #ffffff, var(--surface) 70%); }

/* « Beyond Energy » en gras : le dégradé de marque reste lisible (accents assombris) */

/* =========================================================
   6) CARTES — surface claire, bord et ombre légère (polish.css
   posait sheen blanc + ombres noires profondes faits pour le noir).
   ========================================================= */
.home-proof-item,
.home-vs-card,
.home-want-row,
.home-faq-item,
.pp-benefit,
.pp-compo-row {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(18, 18, 26, 0.04);
}

/* hover : ombre douce au lieu de l'ombre quasi-noire */
.home-proof-item:hover,
.pp-benefit:hover {
  border-color: rgba(18, 18, 26, 0.18);
  box-shadow: 0 18px 40px -26px rgba(18, 18, 26, 0.28);
}
.home-proof-item:hover { box-shadow: 0 14px 34px -24px rgba(18, 18, 26, 0.25); }

/* hovers à bord sombre codés en dur (#2a2a3a) → bord clair lisible */
.home-proof-item:hover,
.home-faq-item[open],
.home-benefit:hover { border-color: #cfcfd9; }

/* Pastilles d'icônes : dégradé clair (était blanc translucide sur noir) */
.home-proof-icon {
  background: linear-gradient(160deg, rgba(18, 18, 26, 0.05), rgba(18, 18, 26, 0.01));
  border-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(18, 18, 26, 0.04);
}

/* FAQ ouverte : la question prend l'encre sombre (était #fff) */
.home-faq-item[open] .home-faq-q { color: var(--white); }
.home-faq-item[open] .home-faq-sign::before { background: var(--white); }

/* =========================================================
   7) BOUTONS
   ========================================================= */
/* bouton primaire « blanc » → devient une encre sombre lisible */
.home-btn--primary {
  background: linear-gradient(180deg, #1a1a24, #0f0f17);
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 10px 26px -14px rgba(18, 18, 26, 0.5);
}
.home-btn--primary:hover { box-shadow: 0 16px 34px -12px rgba(18, 18, 26, 0.4); }

/* bouton ghost du hero : contour sombre sur fond clair */
.home-btn--ghost {
  color: var(--white);
  border-color: rgba(18, 18, 26, 0.30);
}
.home-btn--ghost:hover {
  border-color: var(--white);
  background: rgba(18, 18, 26, 0.05);
}

/* boutons gamme : au survol le texte doit rester blanc sur fond plein accent */
.home-btn--body:hover { color: #fff; }
.home-btn--mind:hover { color: #fff; }

/* =========================================================
   8) NEWSLETTER + champ
   ========================================================= */
.home-news {
  background: linear-gradient(165deg, rgba(18, 18, 26, 0.02), rgba(18, 18, 26, 0)), #ffffff;
  border-color: var(--border);
}
.home-news-input {
  background: #ffffff;
  border-color: var(--border);
  color: var(--white);
}

/* =========================================================
   9) FOOTER — clair (polish.css mettait un dégradé noir)
   ========================================================= */
.site-footer {
  background: linear-gradient(180deg, #ffffff, var(--surface));
  border-top: 1px solid var(--border);
}

/* =========================================================
   10) PAGES PRODUIT (.pp) — fond clair + accents
   ========================================================= */
.pp { background: var(--bg); color: var(--white); }

/* accents-soft re-dérivés (assombris) pour rester visibles sur blanc */
.pp--body { --accent-soft: rgba(225, 16, 35, 0.08); --accent-line: rgba(225, 16, 35, 0.30); }
.pp--mind { --accent-soft: rgba(14, 156, 128, 0.08); --accent-line: rgba(14, 156, 128, 0.30); }

/* chips produit : fond clair teinté accent */
.pp-chips li {
  background: var(--accent-soft);
  color: var(--white);
  box-shadow: none;
}

/* CTA accent : le texte #000 reste OK sur rouge, mais sur teal foncé il faut #fff */
.pp-cta, .buy-add { color: #fff; }

/* bloc CTA central : halo accent clair (était sur fond noir) */
.pp-buy {
  background:
    radial-gradient(circle at 50% 0%, var(--accent-soft) 0%, transparent 60%),
    var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* =========================================================
   11) SECTION VIDÉO PRODUIT (.pv-scroll) — FOND BLANC
   Vidéos régénérées sur fond blanc (Higgsfield + crush ffmpeg
   → #fff pur), donc la section passe en blanc et le texte
   redevient lisible sur clair : encre sombre + halo blanc pour
   le détacher des ingrédients colorés de l'explosion.
   ========================================================= */
.pv-scroll { background: #ffffff; }

/* La vidéo a un fond blanc OPAQUE : un drop-shadow dessinerait l'ombre
   du rectangle (= cadre visible sur blanc). On le retire — l'ombre et le
   reflet de la canette sont déjà incrustés dans la vidéo. */
.pv-scroll-video { filter: none; }

/* Légendes : encre sombre (titres + descriptions) ; les eyebrows/hook
   gardent leur couleur d'accent (rouge/teal), bien visible sur blanc. */
.pv-scroll-cap .t,
.pv-cap-title { color: var(--white); }

/* Halo BLANC (au lieu du halo noir de product-video.css) pour détacher
   le texte des baies / feuilles / éclaboussures qui passent derrière. */
.pv-scroll-cap .k,
.pv-scroll-cap .t,
.pv-cap-k,
.pv-cap-hook,
.pv-cap-title {
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.95), 0 2px 12px rgba(255, 255, 255, 0.9);
}

.pv-back { color: rgba(18, 18, 26, 0.7); text-shadow: 0 1px 8px rgba(255, 255, 255, 0.9); }
.pv-back:hover { color: var(--white); }

/* =========================================================
   12) ACHAT
   ========================================================= */
.buy-can { filter: drop-shadow(0 22px 36px rgba(18, 18, 26, 0.22)); }
.pp-can  { filter: drop-shadow(0 22px 36px rgba(18, 18, 26, 0.22)); }

/* =========================================================
   13) CONTRASTE INTER-SECTIONS (retour Allan : « trop blanc partout »)
   On crée un VRAI rythme : base grise + sections blanc/gris franches,
   ANCRE SOMBRE sur le CTA final, cartes qui ressortent, touches teintées.
   ========================================================= */

/* Base page plus franchement grise → le blanc des sections ressort */
:root { --bg: #e9ebf1; }

/* ---- Rythme des sections HOME : blanc ⇄ gris ⇄ ancre sombre ---- */
.home-hero  { background:
    radial-gradient(64% 52% at 10% 6%, rgba(225,16,35,0.10), transparent 56%),
    radial-gradient(60% 55% at 92% 96%, rgba(14,156,128,0.10), transparent 56%),
    #f3f4f8; }                                            /* hero : taches d'accent rouge/teal (retour Allan) */
.home-beyond { background: #ffffff; }                      /* blanc franc */
.home-proof  { background: #e4e7ef; }                      /* gris net : cartes blanches qui ressortent */
.home-diff   { background: #ffffff; }
.home-faq    { background: #e4e7ef; }
.home-final  { background: radial-gradient(95% 110% at 50% 0%, #181822 0%, #0d0d15 72%); }  /* ANCRE SOMBRE */

/* Filet de séparation net entre sections claires */
.home-beyond, .home-proof, .home-diff, .home-faq { border-top: 1px solid rgba(18,18,26,0.07); }

/* ---- Cartes : élévation plus marquée pour ressortir ---- */
.home-proof-item, .home-vs-card, .home-faq-item, .pp-benefit, .home-news {
  box-shadow: 0 8px 26px -14px rgba(18,18,26,0.18), 0 1px 2px rgba(18,18,26,0.05);
}
/* Cartes BODY / MIND : teinte d'accent (différenciation premium) */
.home-vs-card--body { background: linear-gradient(180deg, rgba(225,16,35,0.06), #ffffff 60%); }
.home-vs-card--mind { background: linear-gradient(180deg, rgba(14,156,128,0.06), #ffffff 60%); }

/* ---- ANCRE SOMBRE : CTA final → on rétablit le texte clair ---- */
.home-final .home-section-title,
.home-final .home-final-sub,
.home-final .home-news-title { color: #ffffff; }
.home-final .home-final-sub { color: rgba(255,255,255,0.78); }
.home-final .home-news-text { color: rgba(255,255,255,0.66); }
.home-final .home-news {
  background: linear-gradient(165deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-color: rgba(255,255,255,0.14);
}
.home-final .home-news-input {
  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); color: #fff;
}
.home-final .home-news-input::placeholder { color: rgba(255,255,255,0.5); }
/* le bouton « Je m'inscris » (primaire = encre sombre) deviendrait invisible sur sombre
   → dégradé de marque, premium */
.home-final .home-btn--primary {
  background: linear-gradient(90deg, var(--body), var(--mind));
  color: #fff;
}
.home-final-glow { opacity: 0.55; }

/* ---- PAGES PRODUIT : alternance claire des sections ---- */
.pp { background: #e9ebf1; }
.pp-section { background: #ffffff; }
.pp-section--alt { background: #e4e7ef; }