/* ============================================================
   BOS MODERN LAYER — SérénLab — 16/07/2026
   Couche ADDITIVE de modernisation (hero vivant, boutons premium,
   cartes produit profondes, reveal au scroll). Ne remplace aucune
   regle de base : uniquement des enrichissements visuels.
   Adaptee de la couche Curiosa (16/07/2026) a la palette SérénLab
   (--bleu / --bleu-clair / --beige, hero CLAIR -> pas d'etoiles,
   juste un halo doux). Classes reelles : .hero-visual (pas
   .hero-img-wrap), .btn--primary (BEM double-tiret, pas .btn-primary).
   Respecte prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. HERO VIVANT ---------- */
/* Halo lumineux anime derriere le visuel phare */
.hero-visual { position: relative; }
.hero-visual::before {
  content: '';
  position: absolute; inset: -20%;
  background: radial-gradient(circle at 50% 45%,
     rgba(107,163,190,.40) 0%,
     rgba(74,134,168,.20) 34%,
     transparent 68%);
  filter: blur(8px);
  z-index: 0;
  animation: bosGlow 6s ease-in-out infinite;
  pointer-events: none;
}
.hero-visual img { position: relative; z-index: 1; animation: bosFloat 7s ease-in-out infinite; will-change: transform; }

@keyframes bosGlow {
  0%,100% { opacity: .6;  transform: scale(1); }
  50%     { opacity: .95; transform: scale(1.06); }
}
@keyframes bosFloat {
  0%,100% { transform: translateY(0)     rotate(-.6deg); }
  50%     { transform: translateY(-12px) rotate(.6deg); }
}

/* Pas de champ d'etoiles : hero SérénLab est CLAIR (bg-light -> beige-pale),
   des points blancs y seraient invisibles/deplaces. Le halo ci-dessus suffit. */
.hero-grid { position: relative; z-index: 2; }

/* Titre : reflet anime sur le mot cle en italique (couleurs bleu SérénLab).
   L'em porte un style inline color:var(--bleu) dans le HTML — on le
   surcouche avec -webkit-text-fill-color (prioritaire au rendu WebKit/Blink)
   sans toucher au HTML/texte de vente. */
.hero-title em {
  background: linear-gradient(100deg, #3a6d8a 0%, #6ba3be 26%, #a8d4e8 50%, #6ba3be 74%, #3a6d8a 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bosShine 6.5s linear infinite;
}
@keyframes bosShine { to { background-position: 220% center; } }

/* ---------- 2. BOUTONS PREMIUM ---------- */
.btn--primary {
  position: relative; overflow: hidden;
  box-shadow: 0 6px 18px rgba(74,134,168,.26);
}
.btn--primary::after {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
  pointer-events: none;
}
.btn--primary:hover::after { left: 135%; }

/* ---------- 3. CARTES PRODUIT PREMIUM ---------- */
/* .product-card:hover existe deja en base (translateY(-4px)+shadow2) :
   on l'intensifie legerement pour l'effet "profond" sans le dupliquer. */
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(42,52,64,.18), 0 4px 14px rgba(74,134,168,.22);
}
.product-card__img { position: relative; }
.product-card__img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,9,3,.22), transparent 55%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.product-card:hover .product-card__img::after { opacity: 1; }

/* ---------- 4. REVEAL AU SCROLL ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }

/* ---------- 5bis. BARRE D'ACHAT STICKY MOBILE (fiches produit) ----------
   Construite dynamiquement par bos-reveal.js a partir du bouton
   .add-to-cart-btn (SérénLab n'a pas de [data-add-cart]) de la page.
   Remplace bos-sticky-cta.js (retire des fiches produit pour eviter 2
   barres empilees) avec un rendu premium aux couleurs de la marque. */
.bos-sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(8px);
  box-shadow: 0 -4px 20px rgba(42,52,64,.12);
  transform: translateY(110%);
  transition: transform .3s ease;
}
.bos-sticky-atc.is-visible { transform: translateY(0); }
.bos-sticky-atc__meta { min-width: 0; }
.bos-sticky-atc__price { color: var(--bleu); font-weight: 800; font-size: 1.12rem; line-height: 1.1; white-space: nowrap; }
.bos-sticky-atc__name {
  color: var(--text-med); font-size: .72rem; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 38vw;
}
.bos-sticky-atc__btn {
  flex: 1; border: none; cursor: pointer;
  background: var(--bleu); color: #fff;
  font-weight: 700; font-size: .95rem; font-family: inherit;
  padding: .8rem 1rem; border-radius: var(--r);
  box-shadow: 0 6px 18px rgba(74,134,168,.32);
  white-space: nowrap;
}
.bos-sticky-atc__btn:active { transform: scale(.98); }
body.bos-atc-open { padding-bottom: 76px; }
@media (min-width: 768px) {
  .bos-sticky-atc { display: none; }
  body.bos-atc-open { padding-bottom: 0; }
}

/* ---------- 5ter. HEADER AUTO-MASQUANT AU SCROLL (16/07, demande Fred) ----------
   Le menu disparait en descendant (plus de place pour le contenu) et
   reapparait des qu'on remonte — ordi ET mobile. */
.header, header.site-header {
  transition: transform .28s ease;
}
.header.bos-nav-hidden, header.bos-nav-hidden {
  transform: translateY(-110%);
}

/* ---------- 5. ACCESSIBILITE : respect du mouvement reduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-visual img,
  .hero-visual::before,
  .hero-title em,
  .btn--primary::after { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Pastille retractation au-dessus de la barre sticky ATC (conflit visuel attrape 16/07) */
body.bos-atc-open #bos-retract-link{ bottom: 88px; }

/* Typo descriptions — 17/07
   Rend le paragraphe d'intro de fiche produit (.product-subtitle)
   visuellement distinct du reste de la page : encart doux en Nunito
   (police arrondie, ame "douceur / sommeil") sur fond bleu tres pale.
   N'affecte QUE .product-subtitle — aucun texte modifie, uniquement
   du CSS additif. Regle chargee apres styles.css (meme specificite,
   ordre de source) => surcouche bien la regle de base ligne 407. */
.product-subtitle {
  font-family: 'Nunito', var(--f-body), sans-serif;
  font-weight: 400;
  font-size: 1.03rem;
  line-height: 1.7;
  color: var(--text-dark);
  background: #EEF6FB;
  border-left: 3px solid var(--bleu-clair);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.4rem;
}
.product-subtitle::first-line {
  font-weight: 600;
}