.elementor-4151 .elementor-element.elementor-element-0e9afc2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-26f647f *//* ====== HEADER (mobile-first) ====== */
.pdp-header{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  padding:12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  background:#fff;
  border-bottom:1px solid rgba(17,24,39,.10);
}

/* Brand */
.pdp-brand{
  font-weight:800;
  letter-spacing:.08em;
  text-decoration:none;
  color:#111827;
  line-height:1;
  font-size:1rem;
  white-space:nowrap;
}

/* Actions */
.pdp-headerActions{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;              /* évite le débordement */
}

/* Les pills dans le header : plus compactes */
.pdp-headerActions .pdp-pill{
  padding:.40rem .60rem;
  font-size:.82rem;
  line-height:1;
  border-radius:999px;
  border:1px solid rgba(246,198,214,.60);
  background: linear-gradient(180deg, #fff1f5, #fff);
  color:#111827;
  text-decoration:none;

  max-width:46vw;           /* empêche de sortir de l’écran */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* État hover/focus (conversion + accessibilité) */
.pdp-headerActions .pdp-pill:hover{
  border-color: rgba(246,198,214,.95);
}
.pdp-headerActions .pdp-pill:focus-visible,
.pdp-brand:focus-visible{
  outline:2px solid rgba(246,198,214,.95);
  outline-offset:2px;
}

/* Très petit écran : on réduit encore les marges */
@media (max-width:360px){
  .pdp-header{padding:10px 10px;}
  .pdp-headerActions .pdp-pill{padding:.38rem .52rem;font-size:.80rem;}
}

/* Desktop : plus d’air, et pills un peu plus grandes */
@media (min-width:900px){
  .pdp-header{padding:14px 16px;}
  .pdp-brand{font-size:1.05rem;}
  .pdp-headerActions .pdp-pill{max-width:none;font-size:.86rem;padding:.44rem .68rem;}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-09c1a06 *//* ====== TOPBAR (contenue, mobile-first) ====== */
.pdp-topbar{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  padding:10px 12px;
  border-bottom:1px solid rgba(17,24,39,.10);

  /* Mobile: 2 colonnes -> aucune sortie écran */
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;

  background:#fff;
}

/* Pills (réassurance) */
.pdp-topbar .pdp-pill{
  box-sizing:border-box;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:.45rem;

  padding:.45rem .6rem;
  border:1px solid rgba(246,198,214,.55);
  border-radius:999px;
  background: linear-gradient(180deg, #fff1f5, #fff);

  font-size:.82rem;
  line-height:1.1;
  color:#111827;

  /* Empêche le débordement si texte trop long */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Très petit écran: 1 colonne (encore plus safe) */
@media (max-width: 360px){
  .pdp-topbar{ grid-template-columns: 1fr; }
}

/* Desktop: on repasse en flex pour un rendu “header” */
@media (min-width: 900px){
  .pdp-topbar{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    padding:10px 16px;
  }
  .pdp-topbar .pdp-pill{
    width:auto;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-33444f8 *//* ============ HERO (TOP) ============ */
.pdp-hero{
  padding: 14px 0 6px;
  background: linear-gradient(180deg, #fff1f5 0%, #ffffff 55%);
}

/* Container safe (évite débordements) */
.pdp-container{
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
}

/* Layout */
.pdp-heroGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

/* Desktop: 2 colonnes + buy box sticky */
@media (min-width: 900px){
  .pdp-heroGrid{
    grid-template-columns: 1.05fr .95fr;
    gap: 18px;
  }
  .pdp-heroGrid > *{ min-width: 0; } /* anti overflow */
  .pdp-heroGrid aside[aria-label="Bloc d’achat"]{
    position: sticky;
    top: 86px; /* ajuste si tu as topbar/header sticky */
  }
}

/* ============ CARD / STACK / ROW (réutilisable) ============ */
.pdp-card{
  background: #fff;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(17,24,39,.06);
}

.pdp-stack{ display: grid; gap: 12px; }

.pdp-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

/* Dividers */
.pdp-divider{
  height: 1px;
  background: rgba(17,24,39,.08);
  width: 100%;
}

/* ============ IMAGE PRINCIPALE ============ */
.pdp-hero [aria-label="Image principale"]{
  padding: 10px;
}

.pdp-hero [aria-label="Image principale"] img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  aspect-ratio: 1 / 1;      /* carré */
  object-fit: cover;
  background: #fff;
}

/* ============ MINIATURES ============ */
.pdp-hero [aria-label="Miniatures"]{
  gap: 8px;
}

.pdp-hero [aria-label="Miniatures"] .pdp-pill{
  flex: 1 1 calc(50% - 8px);   /* 2 par ligne sur mobile */
  justify-content: center;
  text-decoration: none;
  font-size: .84rem;
  padding: .46rem .6rem;
  border: 1px solid rgba(246,198,214,.65);
  background: linear-gradient(180deg, #fff1f5, #fff);
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 520px){
  .pdp-hero [aria-label="Miniatures"] .pdp-pill{
    flex: 0 0 auto;           /* devient “chips” */
    justify-content: flex-start;
  }
}

/* ============ TYPO HERO ============ */
.pdp-h1{
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #111827;
}
@media (min-width: 900px){
  .pdp-h1{ font-size: 1.75rem; }
}

.pdp-kicker{
  margin: 0;
  font-size: .86rem;
  color: rgba(17,24,39,.65);
}

/* Prix */
.pdp-price{
  margin: 0;
  font-weight: 800;
  color: #111827;
  font-size: 1.15rem;
}
@media (min-width: 900px){
  .pdp-price{ font-size: 1.25rem; }
}

/* Label */
.pdp-label{
  font-size: .9rem;
  font-weight: 700;
  color: #111827;
}

/* Select */
.pdp-select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
  font-size: 1rem;
  line-height: 1.1;
  outline: none;
}
.pdp-select:focus{
  border-color: rgba(246,198,214,.95);
  box-shadow: 0 0 0 4px rgba(246,198,214,.22);
}

/* ============ CTA BUTTONS (conversion) ============ */
.pdp-btn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;

  border: 0;
  border-radius: 14px;
  padding: 14px 14px;
  cursor: pointer;

  background: linear-gradient(180deg, #f6c6d6, #f3a9c1);
  color: #111827;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;

  box-shadow: 0 10px 22px rgba(243,169,193,.28);
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.pdp-btn:hover{ filter: brightness(1.02); transform: translateY(-1px); }
.pdp-btn:active{ transform: translateY(0); box-shadow: 0 8px 18px rgba(243,169,193,.22); }
.pdp-btn:focus-visible{
  outline: 2px solid rgba(246,198,214,.95);
  outline-offset: 3px;
}

.pdp-btn--secondary{
  background: #fff;
  border: 1px solid rgba(246,198,214,.85);
  box-shadow: none;
  font-weight: 700;
}

/* 2 CTA secondaires côte à côte sur mobile (sans débordement) */
.pdp-hero .pdp-row > .pdp-btn--secondary{
  width: calc(50% - 5px);
}
@media (max-width: 360px){
  .pdp-hero .pdp-row > .pdp-btn--secondary{ width: 100%; }
}

/* ============ BULLETS (arguments) ============ */
.pdp-bullets{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}
.pdp-bullets li{
  color: rgba(17,24,39,.88);
  line-height: 1.35;
}
.pdp-bullets strong{
  color: #111827;
}

/* ============ RÉASSURANCE LIGNE ============ */
.pdp-hero [aria-label="Réassurance"] .pdp-pill{
  font-size: .84rem;
}

/* ============ FIX CLICK / OVERLAY (scope hero) ============ */
.pdp-hero, .pdp-heroGrid, .pdp-hero .pdp-card{ position: relative; }
.pdp-hero .pdp-btn{ position: relative; z-index: 5; pointer-events: auto; }

/* Elementor overlay qui bloque parfois les clics */
.pdp-hero .elementor-background-overlay{ pointer-events: none !important; }

/* ====== Lightbox vidéo (sans JS, pas plein écran) ====== */
.pdp-lightbox{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 999;
}

.pdp-lightbox:target{ display: block; }

.pdp-lightbox__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(17,24,39,.55);
}

.pdp-lightbox__panel{
  position: relative;
  width: min(420px, calc(100% - 24px));
  margin: 10vh auto 0;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(246,198,214,.65);
  box-shadow: 0 18px 44px rgba(17,24,39,.18);
  padding: 12px;
}

.pdp-lightbox__close{
  position: absolute;
  top: 8px; right: 8px;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  text-decoration: none;
  color: #111827;
  border: 1px solid rgba(17,24,39,.10);
  background: #fff;
}

.pdp-lightbox__video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #000;
  aspect-ratio: 9 / 16; /* vertical */
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d87847d *//* ============ POUR QUI (variante visuelle) ============ */
#pour-qui{
  /* section différente du hero : fond doux + séparation */
  background: linear-gradient(180deg, #ffffff 0%, #fff1f5 100%);
  padding: 22px 0;
}

#pour-qui .pdp-container{
  position: relative;
}

/* Titre + intro */
#pour-qui .pdp-h2{
  font-size: 1.28rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

#pour-qui .pdp-p{
  color: rgba(17,24,39,.78);
  line-height: 1.45;
}

/* Petite barre accent sous le H2 (simple + efficace) */
#pour-qui .pdp-h2::after{
  content:"";
  display:block;
  width: 72px;
  height: 4px;
  border-radius: 999px;
  margin-top: 10px;
  background: linear-gradient(90deg, #f6c6d6, #f3a9c1);
  opacity: .9;
}

/* Cards grid */
#pour-qui .pdp-3col{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Desktop : 3 colonnes + intro plus compacte */
@media (min-width: 980px){
  #pour-qui .pdp-3col{
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

/* Card style (différent des autres sections) */
#pour-qui .pdp-3col .pdp-card{
  position: relative;
  padding: 14px 14px 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(17,24,39,.06);
  overflow: hidden;
}

/* Petit “halo” rose dans le coin (varie l’UX, léger) */
#pour-qui .pdp-3col .pdp-card::after{
  content:"";
  position:absolute;
  width: 140px;
  height: 140px;
  right: -70px;
  top: -70px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(246,198,214,.55), rgba(246,198,214,0) 60%);
  pointer-events:none;
}

/* Icône ronde par carte (sans toucher au HTML) */
#pour-qui .pdp-3col .pdp-card::before{
  content:"";
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background: linear-gradient(180deg, #fff1f5, #ffffff);
  border: 1px solid rgba(246,198,214,.75);
  box-shadow: 0 8px 18px rgba(243,169,193,.18);

  position: absolute;
  left: 14px;
  top: 14px;
}

/* Décale le contenu pour laisser l'icône */
#pour-qui .pdp-3col .pdp-h3,
#pour-qui .pdp-3col .pdp-p{
  padding-left: 56px;
}

/* H3 plus “punchy” */
#pour-qui .pdp-3col .pdp-h3{
  margin: 0 0 6px;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

/* Texte */
#pour-qui .pdp-3col .pdp-p{
  margin: 0;
  font-size: .97rem;
}

/* Icônes différentes selon la carte (1/2/3) */
#pour-qui .pdp-3col .pdp-card:nth-child(1)::before{ content:"🌸"; }
#pour-qui .pdp-3col .pdp-card:nth-child(2)::before{ content:"🤍"; }
#pour-qui .pdp-3col .pdp-card:nth-child(3)::before{ content:"✨"; }

/* Mini accent de bordure (varie sans être lourd) */
#pour-qui .pdp-3col .pdp-card:nth-child(1){ border-color: rgba(246,198,214,.55); }
#pour-qui .pdp-3col .pdp-card:nth-child(2){ border-color: rgba(17,24,39,.10); }
#pour-qui .pdp-3col .pdp-card:nth-child(3){ border-color: rgba(243,169,193,.45); }

/* Mobile : un peu plus d’air */
@media (max-width: 420px){
  #pour-qui{ padding: 20px 0; }
  #pour-qui .pdp-3col .pdp-card{ padding: 13px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5f6b206 *//* ============ BENEFICES (variante visuelle) ============ */
#benefices{
  padding: 22px 0;
  background: #fff; /* contraste avec la section #pour-qui */
}

/* Grille 2 colonnes (mobile-first) */
.pdp-2col{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 900px){
  .pdp-2col{
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* Cards bénéfices : style premium, différent */
#benefices .pdp-2col .pdp-card{
  position: relative;
  padding: 14px 14px 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.10);
  background: linear-gradient(180deg, #ffffff 0%, #fff7fa 100%);
  box-shadow: 0 10px 22px rgba(17,24,39,.06);
  overflow: hidden;
  transform: translateY(0);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

/* Petite bande rose en haut (identité + variété) */
#benefices .pdp-2col .pdp-card::after{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:4px;
  background: linear-gradient(90deg, #f6c6d6, #f3a9c1);
  opacity: .9;
}

/* Icône ronde (sans toucher HTML) */
#benefices .pdp-2col .pdp-card::before{
  content:"";
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: #fff;
  border: 1px solid rgba(246,198,214,.75);
  box-shadow: 0 10px 18px rgba(243,169,193,.16);

  position:absolute;
  right: 14px;
  top: 14px;

  font-size: 1.1rem;
}

/* Icônes par item (1..4) */
#benefices .pdp-2col .pdp-card:nth-child(1)::before{ content:"🧸"; } /* confort */
#benefices .pdp-2col .pdp-card:nth-child(2)::before{ content:"🧷"; } /* stabilité */
#benefices .pdp-2col .pdp-card:nth-child(3)::before{ content:"⚙️"; } /* réglages */
#benefices .pdp-2col .pdp-card:nth-child(4)::before{ content:"🤫"; } /* silencieux */

/* Typo: plus e-commerce (hiérarchie nette) */
#benefices .pdp-h3{
  margin: 0 0 6px;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: #111827;
  padding-right: 62px; /* laisse la place à l’icône */
}

#benefices .pdp-p{
  margin: 0;
  color: rgba(17,24,39,.78);
  line-height: 1.45;
}

/* Hover discret (desktop), sans lourdeur */
@media (hover:hover){
  #benefices .pdp-2col .pdp-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(17,24,39,.08);
    border-color: rgba(246,198,214,.60);
  }
}

/* Très petit écran : évite toute gêne */
@media (max-width: 360px){
  #benefices .pdp-2col .pdp-card{ padding: 13px; }
  #benefices .pdp-2col .pdp-card::before{ right: 12px; top: 12px; width: 44px; height: 44px; }
  #benefices .pdp-h3{ padding-right: 58px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3dec3d3 *//* ============ HOW (timeline / steps) ============ */
#how{
  padding: 24px 0;
  background: linear-gradient(180deg, #fff 0%, #fff1f5 60%, #fff 100%);
}

/* Titre un peu plus “guide” */
#how .pdp-h2{
  font-size: 1.28rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Steps grid : on garde pdp-3col mais on change l’apparence */
#how .pdp-3col{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 6px;
}

/* Desktop : 3 colonnes */
@media (min-width: 980px){
  #how .pdp-3col{
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

/* Step cards : style “timeline” */
#how .pdp-3col .pdp-card{
  position: relative;
  padding: 14px 14px 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(17,24,39,.06);
  overflow: hidden;
}

/* Barre verticale “timeline” (mobile) */
#how .pdp-3col .pdp-card::after{
  content:"";
  position:absolute;
  left: 22px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, rgba(246,198,214,.0), rgba(246,198,214,.8), rgba(246,198,214,.0));
  opacity: .9;
}

/* Badge numéro */
#how .pdp-3col .pdp-card::before{
  content:"01";
  position:absolute;
  left: 10px;
  top: 12px;

  width: 48px;
  height: 48px;
  border-radius: 16px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight: 900;
  letter-spacing: .06em;
  font-size: .95rem;

  background: linear-gradient(180deg, #fff1f5, #fff);
  border: 1px solid rgba(246,198,214,.75);
  box-shadow: 0 10px 18px rgba(243,169,193,.14);
  color: #111827;
}

/* numéros 02 / 03 */
#how .pdp-3col .pdp-card:nth-child(2)::before{ content:"02"; }
#how .pdp-3col .pdp-card:nth-child(3)::before{ content:"03"; }

/* Décale le contenu pour laisser place au badge */
#how .pdp-3col .pdp-h3,
#how .pdp-3col .pdp-p,
#how .pdp-3col .pdp-kicker{
  padding-left: 62px;
}

/* Typo (scannable) */
#how .pdp-h3{
  margin: 0 0 6px;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: #111827;
}
#how .pdp-p{
  margin: 0;
  color: rgba(17,24,39,.78);
  line-height: 1.45;
}
#how .pdp-kicker{
  color: rgba(17,24,39,.62);
}

/* Sur desktop : on enlève la barre timeline pour plus clean */
@media (min-width: 980px){
  #how .pdp-3col .pdp-card::after{ display:none; }
  #how .pdp-3col .pdp-h3,
  #how .pdp-3col .pdp-p,
  #how .pdp-3col .pdp-kicker{
    padding-left: 0;
  }
  #how .pdp-3col .pdp-card::before{
    left: 14px;
    top: 14px;
  }
  /* Sur desktop on garde le badge mais on ne décale pas tout : */
  #how .pdp-3col .pdp-h3{ padding-left: 62px; }
  #how .pdp-3col .pdp-p,
  #how .pdp-3col .pdp-kicker{ padding-left: 62px; }
}

/* ============ Vidéo : carte “media” différente ============ */
#how [aria-label="Vidéo prise en main"]{
  border-radius: 20px;
  border: 1px solid rgba(17,24,39,.10);
  background: linear-gradient(180deg, #ffffff 0%, #fff7fa 100%);
  box-shadow: 0 14px 30px rgba(17,24,39,.07);
  padding: 14px;
}

/* ============ Vidéo verticale (fix iPhone inclus) ============ */
#how .pdp-video-vertical{
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;

  aspect-ratio: 9 / 16;      /* ✅ stable iPhone */
  border-radius: 16px;
  overflow: hidden;

  border: 1px solid rgba(246,198,214,.55);
  background: transparent;    /* ✅ évite la “grosse barre noire” hors player */
  line-height: 0;             /* ✅ supprime les gaps */
}

/* Ton wrapper interne (celui avec padding-top) : on le neutralise proprement */
#how .pdp-video-vertical > div{
  position: absolute !important;
  inset: 0 !important;
  padding-top: 0 !important;  /* ✅ enlève la zone en trop sur iOS */
  height: 100% !important;
}

/* Iframe : remplit 100% du conteneur */
#how .pdp-video-vertical iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  background: #000;           /* noir UNIQUEMENT dans l’iframe si ça charge */
}

/* Ton bouton play overlay : OK, mais il faut que le parent soit relatif (c’est le cas) */
#how .pdp-video-vertical::after{
  content:"▶";
  position:absolute;
  left: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,241,245,.92);
  border: 1px solid rgba(246,198,214,.75);
  box-shadow: 0 10px 18px rgba(243,169,193,.18);
  color:#111827;
  pointer-events:none;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b9e6541 *//* ============ PACKS (perf + look pricing) ============ */
#packs{
  /* PERF: évite de rendre la section tant qu’elle n’est pas visible */
  content-visibility: auto;
  contain-intrinsic-size: 900px; /* réserve de la place -> évite le reflow */
  padding: 22px 0;
  background: #fff;

}

#packs .pdp-h2{
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

#packs .pdp-p{ color: rgba(17,24,39,.78); line-height: 1.45; }
#packs .pdp-kicker{ color: rgba(17,24,39,.62); }

/* Grille packs : on garde .pdp-3col mais on donne un style différent */
#packs .pdp-3col{
  margin-top: 8px;
  gap: 12px;
}

/* Cards pricing (plus légères qu’un gros shadow) */
#packs .pdp-3col .pdp-card{
  position: relative;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.10);
  background: linear-gradient(180deg, #ffffff 0%, #fff7fa 100%);
  /* ombre légère (perf-friendly) */
  box-shadow: 0 8px 18px rgba(17,24,39,.05);
}

/* Petite séparation visuelle différente des sections précédentes */
#packs .pdp-3col .pdp-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(246,198,214,.18);
}

/* Badge “recommandé” bien placé */
#packs .pdp-3col .pdp-card .pdp-pill{
  display:inline-flex;
  margin-bottom: 6px;
}

/* Titres */
#packs .pdp-h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: #111827;
  letter-spacing: -0.01em;
}

/* CTA packs : plein largeur, mais compact */
#packs .pdp-btn--secondary{
  width: 100%;
  justify-content: center;
  border-radius: 14px;
  padding: 12px 12px;
}

/* Style “disabled / bientôt” (évite clic, rend crédible) */
#packs button[data-pack="confort"],
#packs button[data-pack="coaching"]{
  opacity: .65;
  cursor: not-allowed;
  filter: grayscale(.1);
}

/* Carte recommandée : on la fait ressortir sans lourdeur */
#packs .pdp-3col .pdp-card:nth-child(2){
  border-color: rgba(246,198,214,.85);
  background: linear-gradient(180deg, #fff1f5 0%, #ffffff 100%);
}
#packs .pdp-3col .pdp-card:nth-child(2)::before{
  content:"";
  position:absolute;
  left: 0; top: 0;
  width: 100%; height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #f6c6d6, #f3a9c1);
}

/* Perf: évite les transitions inutiles sur mobile */
@media (prefers-reduced-motion: reduce){
  #packs *{ transition: none !important; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-aef13e0 *//* ============ REASSURANCE (checkout-like + perf) ============ */
#reassurance{
  content-visibility: auto;
  contain-intrinsic-size: 700px;
  padding: 22px 0;
  background: linear-gradient(180deg, #fff1f5 0%, #ffffff 70%);
}

/* On réutilise .pdp-2col mais on change l'ambiance dans cette section */
#reassurance .pdp-2col{
  gap: 14px;
}

@media (min-width: 900px){
  #reassurance .pdp-2col{ gap: 16px; }
}

/* Cartes “réassurance” : plus plates, plus rapides à peindre */
#reassurance .pdp-card{
  position: relative;
  padding: 14px 14px 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 14px rgba(17,24,39,.05);
  overflow: hidden;
}

/* Barre latérale rose (signature visuelle différente) */
#reassurance .pdp-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 6px;
  background: linear-gradient(180deg, #f6c6d6, #f3a9c1);
  opacity: .9;
}

/* Titres + texte */
#reassurance .pdp-h3{
  margin: 0 0 6px;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: #111827;
}

#reassurance .pdp-p{
  margin: 0;
  color: rgba(17,24,39,.78);
  line-height: 1.45;
}

/* Un peu plus d’air sur desktop */
@media (min-width: 900px){
  #reassurance .pdp-card{ padding: 16px; }
}

/* Réduit les animations si besoin */
@media (prefers-reduced-motion: reduce){
  #reassurance *{ transition: none !important; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-48d7977 *//* ============ REVIEWS (perf + confiance) ============ */
#reviewsList{
  /* PERF: évite de rendre toute la liste avant scroll */
  content-visibility: auto;
  contain-intrinsic-size: 1200px;
  display: grid;
  gap: 14px;
}

/* Cartes avis : plus “flat” (moins coûteux) */
#reviewsList .pdp-card{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.10);
  background: #fff;
  box-shadow: 0 8px 18px rgba(17,24,39,.05);
}

/* Head (avatar + meta) */
.pdp-reviewHead{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:0;
}

.pdp-avatar{
  width:56px;
  height:56px;
  border-radius:999px;
  object-fit:cover;
  flex:0 0 56px;
  border: 1px solid rgba(246,198,214,.55);
}

/* Meta text */
.pdp-reviewMeta{ min-width:0; }
.pdp-reviewMeta .pdp-p strong{ font-weight: 800; }

/* Kicker plus discret */
#reviewsList .pdp-kicker{
  color: rgba(17,24,39,.62);
  font-size: .86rem;
}

/* Paragraphes avis : lisibles, compacts */
#reviewsList .pdp-p{
  color: rgba(17,24,39,.80);
  line-height: 1.45;
}

/* Le “headline” (ligne étoiles + phrase) : rend la décision rapide */
#reviewsList .pdp-card > .pdp-p:nth-of-type(1){
  margin-top: 10px !important;
  color: #111827;
  font-weight: 700;
}

/* Le texte long : un peu plus doux */
#reviewsList .pdp-card > .pdp-p:nth-of-type(2){
  margin-top: 6px !important;
  color: rgba(17,24,39,.78);
}

.pdp-reviewTitle{font-weight:800;color:#111827;}


/* Variante visuelle légère par segment (sans surcharger) */
#reviewsList .pdp-card[data-review="menopause"]{
  border-color: rgba(246,198,214,.55);
  background: linear-gradient(180deg, #fff7fa, #fff);
}
#reviewsList .pdp-card[data-review="postpartum"]{
  border-color: rgba(17,24,39,.10);
  background: linear-gradient(180deg, #ffffff, #fff7fa);
}
#reviewsList .pdp-card[data-review="surpoids"]{
  border-color: rgba(243,169,193,.40);
  background: linear-gradient(180deg, #fff1f5, #fff);
}

/* Hover très léger (desktop uniquement) */
@media (hover:hover){
  #reviewsList .pdp-card{
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  }
  #reviewsList .pdp-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(17,24,39,.07);
    border-color: rgba(246,198,214,.75);
  }
}

/* Desktop: 2 colonnes pour “preuve sociale” massive sans scroller trop */
@media (min-width: 900px){
  #reviewsList{
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a61416e *//* ============ FAQ (pratique + perf) ============ */
#faq{
  content-visibility: auto;
  contain-intrinsic-size: 1200px;
  padding: 22px 0;
  background: linear-gradient(180deg, #ffffff 0%, #fff1f5 100%);
}

#faq .pdp-h2{
  font-size: 1.28rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Chaque item */
.pdp-faq{
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 14px rgba(17,24,39,.05);
  overflow: hidden;
}

/* Espacement entre items (via stack) */
#faq .pdp-stack{ gap: 12px; }

/* Summary = bouton principal */
.pdp-faq > summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 14px;
  font-weight: 800;
  color: #111827;
  line-height: 1.25;

  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* Cache le marker natif */
.pdp-faq > summary::-webkit-details-marker{ display:none; }

/* Flèche (léger, sans svg) */
.pdp-faq > summary::after{
  content:"+";
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;

  border: 1px solid rgba(246,198,214,.75);
  background: linear-gradient(180deg, #fff1f5, #fff);
  box-shadow: 0 10px 18px rgba(243,169,193,.14);
  color: #111827;
  font-weight: 900;
  line-height: 1;
}

/* Contenu */
.pdp-faq > .pdp-p{
  padding: 0 14px 14px 14px;
  margin: 0;
  color: rgba(17,24,39,.78);
  line-height: 1.45;
}

/* État ouvert */
.pdp-faq[open]{
  border-color: rgba(246,198,214,.85);
  background: linear-gradient(180deg, #fff7fa 0%, #ffffff 100%);
}
.pdp-faq[open] > summary::after{
  content:"–";
  background: #fff;
}

/* Focus accessibilité */
.pdp-faq > summary:focus-visible{
  outline: 2px solid rgba(246,198,214,.95);
  outline-offset: 3px;
  border-radius: 14px;
}

/* Hover (desktop seulement) */
@media (hover:hover){
  .pdp-faq > summary:hover{
    background: rgba(255,241,245,.55);
  }
}

/* Desktop : 2 colonnes pour condenser la FAQ (sans lourdeur) */
@media (min-width: 980px){
  #faq .pdp-container{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items:start;
  }

  /* Titre et espacement en colonne pleine */
  #faq .pdp-container > .pdp-h2{
    grid-column: 1 / -1;
  }

  /* Stack garde le flow, mais on laisse les details suivre */
  #faq .pdp-container.pdp-stack{ gap: 14px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-5be99bc *//* ============ COMPARE 3 COLONNES (mobile-first) ============ */
#compare{
  content-visibility:auto;
  contain-intrinsic-size: 900px;
}

#compare .pdp-tableWrap{
  overflow: hidden;           /* on veut éviter le scroll horizontal */
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.10);
  background: #fff;
}

.pdp-compare--3{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;        /* clé : colonnes stables et contenues */
}

/* Largeurs adaptées mobile */
.pdp-compare--3 th,
.pdp-compare--3 td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(17,24,39,.08);
  vertical-align: top;
  text-align: left;
  font-size: .88rem;          /* plus compact */
  line-height: 1.25;
  word-break: break-word;     /* anti débordement */
}

.pdp-compare--3 thead th{
  font-weight: 900;
  color: #111827;
  background: linear-gradient(180deg, #fff1f5, #fff);
}

/* Colonne "Critère" plus large */
.pdp-compare--3 thead th:first-child{ width: 52%; }
.pdp-compare--3 thead th:nth-child(2){ width: 24%; }
.pdp-compare--3 thead th:nth-child(3){ width: 24%; }

.pdp-compare--3 th[scope="row"]{
  font-weight: 800;
  color: rgba(17,24,39,.85);
}

/* Zébrage léger (lisibilité sans coût) */
.pdp-compare--3 tbody tr:nth-child(even){
  background: rgba(255,241,245,.35);
}

.pdp-compare--3 tbody tr:last-child th,
.pdp-compare--3 tbody tr:last-child td{
  border-bottom: 0;
}

/* Desktop : un peu plus grand */
@media (min-width: 900px){
  .pdp-compare--3 th,
  .pdp-compare--3 td{
    font-size: .95rem;
    padding: 12px 12px;
  }
  .pdp-compare--3 thead th:first-child{ width: 56%; }
  .pdp-compare--3 thead th:nth-child(2),
  .pdp-compare--3 thead th:nth-child(3){ width: 22%; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a772af6 *//* ============ CTA FINAL (conversion + perf) ============ */
#cta-final{
  content-visibility: auto;
  contain-intrinsic-size: 520px;

  padding: 26px 0 18px;
  background: linear-gradient(180deg, #fff 0%, #fff1f5 100%);
}

/* Carte finale : plus “panneau” que “card” */
#cta-final .pdp-card{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(246,198,214,.65);
  background: linear-gradient(180deg, #fff7fa 0%, #ffffff 85%);
  box-shadow: 0 10px 22px rgba(17,24,39,.06);
  overflow: hidden;
  position: relative;
}

/* Accent très léger (sans image, perf-friendly) */
#cta-final .pdp-card::before{
  content:"";
  position:absolute;
  inset:-40px -60px auto auto;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(246,198,214,.55), rgba(246,198,214,0) 60%);
  pointer-events:none;
}

/* Titre : court, punchy */
#cta-final .pdp-h2{
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #111827;
}

/* Liste bénéfices : compacte, lisible */
#cta-final ul{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

#cta-final li{
  color: rgba(17,24,39,.82);
  line-height: 1.35;
}

/* CTA : gros, clair, full width */
#cta-final #addToCartBtnBottom{
  width: 100%;
  justify-content: center;
  padding: 14px 14px;
  border-radius: 14px;

  background: linear-gradient(180deg, #f6c6d6, #f3a9c1);
  color: #111827;
  font-weight: 900;
  text-decoration: none;

  box-shadow: 0 12px 22px rgba(243,169,193,.26);
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

#cta-final #addToCartBtnBottom:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}
#cta-final #addToCartBtnBottom:active{
  transform: translateY(0);
  box-shadow: 0 10px 18px rgba(243,169,193,.22);
}

#cta-final #addToCartBtnBottom:focus-visible{
  outline: 2px solid rgba(246,198,214,.95);
  outline-offset: 3px;
}

/* Kicker rassurance */
#cta-final .pdp-kicker{
  color: rgba(17,24,39,.62);
  margin: 0;
}

/* Desktop : plus d’air et centre légèrement */
@media (min-width: 900px){
  #cta-final{ padding: 32px 0 26px; }
  #cta-final .pdp-card{ padding: 18px; }
  #cta-final .pdp-h2{ font-size: 1.55rem; }
}

/* Motion safe */
@media (prefers-reduced-motion: reduce){
  #cta-final #addToCartBtnBottom{ transition: none; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0a610d2 *//* ============ FOOTER (mobile-first, léger) ============ */
.pdp-footer{
  border-top: 1px solid rgba(17,24,39,.10);
  background: linear-gradient(180deg, #fff 0%, #fff1f5 100%);
  padding: 18px 0 24px;
}

/* Liens : en grille sur mobile pour ne jamais dépasser */
.pdp-footer .pdp-row{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colonnes mobile */
  gap: 10px;
  align-items: stretch;
}

/* Chaque pill devient pleine largeur dans sa cellule */
.pdp-footer .pdp-row .pdp-pill{
  width: 100%;
  justify-content: center;
  text-decoration: none;

  border: 1px solid rgba(246,198,214,.65);
  background: linear-gradient(180deg, #fff7fa, #fff);
  color: #111827;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Micro-interactions très légères (desktop only) */
@media (hover:hover){
  .pdp-footer .pdp-row .pdp-pill:hover{
    border-color: rgba(246,198,214,.95);
    filter: brightness(1.01);
  }
  .pdp-footer .pdp-row .pdp-pill:focus-visible{
    outline: 2px solid rgba(246,198,214,.95);
    outline-offset: 2px;
  }
}

/* Mentions */
.pdp-footer .pdp-kicker{
  margin: 12px 0 0;
  color: rgba(17,24,39,.62);
  font-size: .86rem;
  line-height: 1.35;
  text-align: center;
}

/* Très petit écran : 1 colonne (encore plus safe) */
@media (max-width: 360px){
  .pdp-footer .pdp-row{
    grid-template-columns: 1fr;
  }
}

/* Desktop : liens en ligne, plus “footer classique” */
@media (min-width: 900px){
  .pdp-footer{
    padding: 20px 0 26px;
  }
  .pdp-footer .pdp-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  .pdp-footer .pdp-row .pdp-pill{
    width: auto;
    justify-content: flex-start;
  }
}/* End custom CSS */
/* Start custom CSS *//* ====== BASE (1 seule fois) ====== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.4}
img{max-width:100%;display:block}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pdp-container{max-width:1100px;margin:0 auto;padding:16px}
.pdp-card{border:1px solid #eee;border-radius:16px;padding:14px}
.pdp-stack{display:grid;gap:10px}
.pdp-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pdp-divider{height:1px;background:#eee;margin:10px 0}
.pdp-kicker{font-size:13px;color:#666;margin:0}
.pdp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border:1px solid #111;border-radius:12px;background:#111;color:#fff;text-decoration:none;cursor:pointer}
.pdp-btn--secondary{background:#fff;color:#111}
.pdp-pill{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border:1px solid #ddd;border-radius:999px;font-size:13px}/* End custom CSS */