/** Shopify CDN: Minification failed

Line 1700:0 Unexpected "}"

**/
/* ============================================================
   Page produit clonee sur officialquasi.com — feuille commune
   aux sections `qc-*`.

   Une seule feuille pour les 18 sections, contrairement au reste
   du theme qui met un fichier par section : ces sections ne
   servent QUE sur ce template, elles partagent la meme echelle
   d espacement et les memes cartes. Les separer ferait recopier
   les memes 200 lignes dix-huit fois. Chaque section emet le
   meme <link> : le navigateur ne telecharge le fichier qu une
   fois.

   Couleurs : uniquement les tokens de marque Kaela (theme.css),
   toujours ecrits avec un repli — le theme EN LIGNE est un build
   minifie qui n a pas toujours servi --color-brand.
   ============================================================ */

.qc {
  --qc-plum: var(--color-plum, #3d1020);
  --qc-plum-soft: var(--color-plum-soft, rgba(61, 16, 32, 0.72));
  --qc-brand: var(--color-brand, #ee6ea6);
  --qc-pink: var(--color-pink, #cb6387);
  --qc-blush: var(--color-pink-light, #f7e6ec);
  --qc-annc: var(--color-annc-text, #a81050);
  --qc-line: rgba(61, 16, 32, 0.1);
  --qc-card: #ffffff;
  /* 36px (et non 64) : 64 en haut ET en bas faisait ~128px de vide entre
     deux sections `.qc` consecutives. Le mobile est a 34px plus bas. */
  --qc-pad: 28px;

  padding: var(--qc-pad) 20px;
  background: #ffffff;
  color: var(--qc-plum);
  font-family: var(--font-body);

  /* ⛔ Garde-fou : deux rubans sortent de la colonne en `width: 100vw`
     (`.qc-social__rail`, `.qc-reviews__rail`). Or `100vw` compte la
     barre de defilement verticale : mesure le 12/09/2026 sur un
     ecran de 1900 px, le rail faisait 1900 px pour 1885 px utiles,
     donc il debordait de 8 px et la page gagnait une barre de
     defilement HORIZONTALE.

     `clip` et pas `hidden` : `hidden` ferait du .qc un conteneur de
     defilement, ce qui collerait le `position: sticky` de la colonne
     d achat (product-main.css) a la section au lieu de la fenetre.
     `overflow-x: clip` avec un axe Y laisse `visible` est une
     combinaison valide : rien n est rogne verticalement, donc les
     ombres des cartes et la pilule des ingredients (qui remonte de
     -22 px) restent entieres. */
  overflow-x: clip;
}

.qc--blush {
  background: linear-gradient(180deg, #fffdfd 0%, var(--qc-blush) 100%);
}
.qc--soft {
  background: #fdf8fa;
}
.qc--dark {
  background: var(--qc-plum);
  color: #ffffff;
}
.qc--flush {
  padding-left: 0;
  padding-right: 0;
}

.qc__inner {
  max-width: var(--page-width, 1200px);
  margin: 0 auto;
}
.qc__inner--narrow {
  max-width: 860px;
}

/* ---- Titres ---- */
/* L eyebrow porte la petite phrase de mise en bouche, le h2 la
   promesse. Le serif est le meme que before-after et
   product-benefits : la page clonee reste une page Kaela. */
.qc__eyebrow {
  margin: 0 0 10px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qc-pink);
}
.qc--dark .qc__eyebrow {
  color: var(--qc-brand);
}

.qc__heading {
  margin: 0 auto 14px;
  max-width: 20ch;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 4.2vw, 2.6rem);
  line-height: 1.15;
}
.qc__heading--wide {
  max-width: 30ch;
}
.qc__heading em {
  font-style: italic;
  color: var(--qc-annc);
}
.qc--dark .qc__heading em {
  color: var(--qc-brand);
}

.qc__sub {
  margin: 0 auto 34px;
  max-width: 62ch;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--qc-plum-soft);
}
.qc--dark .qc__sub {
  color: rgba(255, 255, 255, 0.78);
}

/* ---- Bouton pilule contour (« voir la liste complete ») ---- */
.qc__pill-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 38px;
  padding: 11px 22px;
  border: 1px solid var(--qc-line);
  border-radius: var(--radius-pill, 40px);
  background: #ffffff;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--qc-plum);
  text-decoration: none;
  cursor: pointer;
}
.qc__pill-link:hover {
  border-color: var(--qc-brand);
  color: var(--qc-annc);
}
/* Sans taille explicite un SVG inline sans width/height se rend en
   300x150 : le picto ecrasait le bouton. Mesure faite dans le rendu
   local le 10/09. */
.qc__pill-link svg {
  width: 14px;
  height: 14px;
  stroke: var(--qc-brand);
  stroke-width: 1.8;
  fill: none;
}
.qc__center {
  display: flex;
  justify-content: center;
}

/* ---- Carte generique ---- */
.qc-card {
  background: var(--qc-card);
  border: 1px solid var(--qc-line);
  border-radius: 16px;
  overflow: hidden;
}

.qc-media {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--qc-blush);
}

/* ============================================================
   0. Ajouts dans la boite d achat (section product-main)

   Ces quatre blocs vivent dans product-main.liquid mais leur CSS
   est ici, pas dans product-main.css : le product-main.css EN
   LIGNE est un build minifie qui diverge de la source, et on ne
   veut pas rouvrir ce fichier-la pour une page d essai. Ils ne
   se rendent que si les reglages correspondants sont remplis,
   donc uniquement sur le template clone — qui charge cette
   feuille par ses sections qc-*.
   ============================================================ */

/* ---- Pastilles sous le titre ---- */
.pm-qcpills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.pm-qcpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: var(--color-pink-light, #f7e6ec);
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-annc-text, #a81050);
}
.pm-qcpill__ico {
  width: 18px;
  height: auto;
  display: block;
}

/* ---- Les six benefices, 3 colonnes ---- */
/* La grille du theme (.pm-benefits-grid) est en 2 colonnes avec la meme
   coche repetee. Celle-ci reprend la mise en page d origine : 3 colonnes,
   un picto different par ligne, pas de pastille de fond. */
.pm-qcbenefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 18px;
  margin: 18px 0 0;
}
.pm-qcbenefit {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.pm-qcbenefit__ico {
  flex: 0 0 24px;
  width: 24px;
  height: auto;
  display: block;
}
.pm-qcbenefit__txt {
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--color-plum, #3d1020);
}

@media (max-width: 989px) {
  .pm-qcbenefits {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 429px) {
  .pm-qcbenefits {
    gap: 12px 12px;
  }
  .pm-qcbenefit__txt {
    font-size: 0.8125rem;
  }
}

/* ---- Accroche ---- */
.pm-qclead__title {
  margin: 0 0 4px;
  font-weight: 700;
}
/* Centree sur telephone (demande du 26/09/2026), a gauche sur ordinateur. */
/* Selecteur a 3 classes : product-main.css pose text-align: left sur
   .product-main-section .pm-custom-text (2 classes). */
@media (max-width: 749px) {
  .product-main-section .pm-custom-text.pm-qclead {
    text-align: center;
  }
}

/* ---- Encadre pointille des cadeaux ---- */
/* Pointille et pas plein : sur l original c est ce qui le
   distingue du selecteur de packs juste en dessous, qui est le
   seul element clicable de la zone. */
.pm-qcgift {
  margin: 18px 0 14px;
  padding: 13px 16px;
  border: 1px dashed var(--color-brand, #ee6ea6);
  border-radius: 10px;
  background: #fffafc;
  text-align: center;
  font-size: 1rem;
  line-height: 1.45;
  /* Semi-gras sur toute la phrase et gras franc sur « cadeaux offerts »,
     comme l original (26/09/2026). */
  font-weight: 500;
  color: var(--color-plum, #3d1020);
}
.pm-qcgift strong {
  font-weight: 800;
}
.pm-qcgift::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--color-brand, #ee6ea6);
  vertical-align: middle;
}

/* ---- Carte caution expert ---- */
/* Elle vit DANS .pm-carousel, apres l image principale. C est ce qui
   l aligne sur cette image : `.pm-carousel` est un bloc avec un
   `padding-left` (96px en desktop) qui reserve la colonne de vignettes,
   et la carte herite de ce retrait a tous les points de rupture. Posee
   a cote du carrousel, elle demarrait sous les vignettes — mesure le
   10/09 : carte a x=113 pour une image a x=209. */
/* ⛔ Le prefixe `.product-main-section .pm-gallery-col` n est pas
   decoratif. product-main.css pose un reset :

     .product-main-section .pm-gallery-col *,
     .product-main-section .pm-gallery-col ::before,
     .product-main-section .pm-gallery-col ::after { padding: 0; margin: 0 }

   Specificite (0,2,0). Une regle a une seule classe (0,1,0) perd : la
   carte gardait son rayon et son ombre (absents du reset) mais se
   retrouvait a padding 0 et margin 0 — mesure le 10/09, citation a
   0px de padding alors que la feuille en demandait 26/28. Toute regle
   qui pose une marge ou un padding DANS la colonne galerie doit donc
   viser au moins (0,3,0). */
.product-main-section .pm-gallery-col .pm-expert {
  margin: 24px 0 0;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  /* Ombre douce plutot qu un filet : c est ce qui detache la carte du
     fond blanc de la page sans dessiner un deuxieme cadre sous l image. */
  box-shadow: 0 8px 26px rgba(61, 16, 32, 0.09);
}
.product-main-section .pm-gallery-col .pm-expert__quote {
  margin: 0;
  padding: 26px 28px;
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--color-plum-soft, rgba(61, 16, 32, 0.72));
}
.product-main-section .pm-gallery-col .pm-expert__who {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  background: var(--color-pink-light, #f7e6ec);
}
.product-main-section .pm-gallery-col .pm-expert__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 48px;
}
.product-main-section .pm-gallery-col .pm-expert__id {
  display: grid;
  gap: 3px;
  font-size: 0.9375rem;
  color: var(--color-plum, #3d1020);
}
.product-main-section .pm-gallery-col .pm-expert__id b {
  font-weight: 700;
}
.product-main-section .pm-gallery-col .pm-expert__role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-plum-soft, rgba(61, 16, 32, 0.72));
}
/* Meme sceau que le badge « Cliente verifiee » des temoignages, mais en bleu :
   le rose signe un avis de cliente, le bleu une caution professionnelle. Deux
   choses differentes ne doivent pas porter la meme couleur. Le trace est rempli
   en currentColor, la teinte se pilote donc ici. */
.product-main-section .pm-gallery-col .pm-expert__role svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: #1d7fd4;
}

@media (max-width: 749px) {
  .product-main-section .pm-gallery-col .pm-expert {
    margin-top: 18px;
  }
  .product-main-section .pm-gallery-col .pm-expert__quote {
    padding: 20px 18px;
    line-height: 1.65;
  }
  .product-main-section .pm-gallery-col .pm-expert__who {
    padding: 14px 18px;
    gap: 12px;
  }
  .product-main-section .pm-gallery-col .pm-expert__photo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }
}

/* ============================================================
   1. Preuve sociale — « Des milliers de femmes »
   ============================================================ */
.qc-social__rail {
  /* Le .qc__inner plafonne a ~773 px : a cette largeur les captures
     tombent a 180 px et le texte des commentaires devient illisible.
     On sort donc le rail de la colonne pour retrouver les ~300 px de
     la landing page, ou ces memes captures se lisent. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: clamp(16px, 4vw, 60px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 24vw, 320px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.qc-social__rail::-webkit-scrollbar {
  display: none;
}
.qc-social__shot {
  /* <figure> porte la marge par defaut du navigateur (1em 40px) : elle
     mangeait 80 px sur chaque colonne, d ou des captures a 160 px au
     lieu de 240. */
  margin: 0;
  scroll-snap-align: center;
}
.qc-social__shot img {
  /* Pas de cadre ni d arrondi : ce sont des captures d ecran, un
     encadrement les fait lire comme des vignettes de galerie. */
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   2. Problemes — « Il est temps de… »
   ============================================================ */
.qc-problems__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.qc-problems__item {
  text-align: center;
}
.qc-problems__item img {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
}
.qc-problems__label {
  margin: 14px 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

/* ============================================================
   3. Benefices — « un seul masque… »
   ============================================================ */
.qc-benefits__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.qc-benefits__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.qc-benefits__li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1.0625rem;
  line-height: 1.45;
}
.qc-check {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--qc-brand);
  display: grid;
  place-items: center;
}
.qc-check svg {
  width: 12px;
  height: 12px;
  stroke: #ffffff;
  stroke-width: 3;
  fill: none;
}

/* ============================================================
   4. Les cinq raisons
   ============================================================ */
.qc-reasons__count {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 12vw, 6.5rem);
  line-height: 1;
  color: var(--qc-brand);
}
/* Colonne unique et bornee : sans `max-width` les lignes feraient toute
   la largeur de la section et deviendraient illisibles sur grand ecran. */
.qc-reasons__list {
  margin: 34px auto 0;
  padding: 0;
  max-width: 760px;
  list-style: none;
  display: grid;
  gap: 18px;
}
/* Picto a gauche, texte a droite, numero en filigrane a droite.
   `align-items: start` colle le picto en haut de la carte plutot que de
   le centrer sur un texte de trois lignes. */
.qc-reasons__item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 22px;
  align-items: start;
  position: relative;
  padding: 26px 30px;
  border: 1px solid var(--qc-line);
  border-radius: 18px;
  background: #ffffff;
}
/* Boite fixe + `contain` : les cinq pictos n ont pas le meme ratio
   (100x92, 81x108, 115x115...), sans cela ils ne s alignent pas. */
.qc-reasons__ico {
  width: 70px;
  height: 70px;
  object-fit: contain;
  object-position: center;
  display: block;
}
.qc-reasons__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Reserve la place du numero pour que le texte ne passe pas dessous. */
  padding-right: 34px;
}
.qc-reasons__num {
  position: absolute;
  right: 24px;
  bottom: 18px;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--qc-blush);
  pointer-events: none;
}
.qc-reasons__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--qc-brand);
}
.qc-reasons__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--qc-plum-soft);
}

/* ============================================================
   5. Compteurs
   ============================================================ */
.qc-counters__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: center;
  align-items: start;
}
.qc-counters__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.05;
  color: var(--qc-annc);
}
.qc-counters__label {
  margin: 6px 0 0;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qc-plum-soft);
}

/* ============================================================
   6. Clinique — trois pourcentages
   ============================================================ */
.qc-clinic__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.qc-clinic__cell {
  padding: 26px 20px;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--qc-line);
  border-radius: 16px;
}
.qc-clinic__pct {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  line-height: 1;
  color: var(--qc-brand);
}
.qc-clinic__text {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--qc-plum-soft);
}
.qc-clinic__note {
  margin: 24px auto 0;
  max-width: 70ch;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--qc-plum-soft);
}

/* ============================================================
   7. Bandeau de badges
   ============================================================ */
.qc-badges {
  padding: 22px 20px;
  background: var(--qc-blush);
}
.qc-badges__list {
  max-width: var(--page-width, 1200px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 28px;
}
.qc-badges__li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qc-annc);
}
.qc-badges__li svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}
/* Les pictos `qc-clean-*` sont dessines, pas des traits de 15 px :
   a la taille de la coche ils devenaient illisibles (le microscope
   et le flacon barre surtout). 26 px, la hauteur de deux lignes de
   texte du badge. */
.qc-badges__ico {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}
/* En desktop le rail ne fait rien : la liste garde sa mise en page
   centree et la copie du ruban est retiree du flux. Tout le
   defilement vit dans la requete mobile en bas de fichier. */
.qc-badges__rail > .qc-badges__list + .qc-badges__list {
  display: none;
}

/* ============================================================
   8. Ingredients — les trois cartes
   ============================================================ */
.qc-ing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.qc-ing__card {
  position: relative;
  padding-bottom: 26px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(61, 16, 32, 0.07);
  text-align: center;
}
.qc-ing__media {
  aspect-ratio: 1 / 1;
  border-radius: 18px 18px 0 0;
}
/* La pilule chevauche le bas du visuel, comme sur l original. */
.qc-ing__pill {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: -22px auto 0;
  padding: 10px 20px;
  background: #ffffff;
  border-radius: var(--radius-pill, 40px);
  box-shadow: 0 4px 14px rgba(61, 16, 32, 0.12);
  font-size: 1rem;
  font-weight: 700;
}
.qc-ing__text {
  margin: 16px auto 14px;
  max-width: 34ch;
  padding: 0 20px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--qc-plum-soft);
}
.qc-ing__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  color: var(--qc-annc);
}
.qc-ing__tag svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
}

/* ============================================================
   9. Trois avis
   ============================================================ */
.qc-reviews__score {
  /* Bandeau de note : etoiles, note, mention sur une seule ligne.
     Volontairement aux couleurs de la marque et sans logo tiers — la
     note vient des metafields du produit, pas d une plateforme d avis. */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 30px;
}
.qc-reviews__score b {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
}
.qc-reviews__mention {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.qc-reviews__count {
  /* Sur la meme ligne que la note, a la place ou le badge d une
     plateforme se mettrait. Passe dessous quand la ligne deborde. */
  font-size: 0.95rem;
  opacity: .65;
  padding-left: 14px;
  border-left: 1px solid var(--qc-line);
}
.qc-reviews__score .qc-stars svg {
  width: 30px;
  height: 30px;
}
.qc-reviews__score--tp {
  /* Le TrustBox se dimensionne seul dans son iframe : on ne lui
     impose qu une largeur de lecture et le centrage. */
  display: block;
  max-width: 420px;
  margin-inline: auto;
}
@media (max-width: 600px) {
  .qc-reviews__score {
    gap: 4px 10px;
  }
  .qc-reviews__score b {
    font-size: 1.7rem;
  }
  .qc-reviews__mention {
    font-size: 1.3rem;
  }
  .qc-reviews__score .qc-stars svg {
    width: 24px;
    height: 24px;
  }
  .qc-reviews__count {
    flex-basis: 100%;
    text-align: center;
    padding-left: 0;
    border-left: 0;
  }
}
.qc-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--qc-brand);
}
.qc-stars svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.qc-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.qc-reviews__card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--qc-line);
  border-radius: 16px;
  overflow: hidden;
}
.qc-reviews__media {
  aspect-ratio: 4 / 5;
}
.qc-reviews__body {
  padding: 20px 22px 24px;
}
.qc-reviews__title {
  margin: 10px 0 8px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.qc-reviews__quote {
  margin: 0 0 14px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--qc-plum-soft);
}
.qc-reviews__author {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--qc-plum-soft);
}
.qc-reviews__author b {
  display: block;
  color: var(--qc-plum);
}
.qc-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--qc-annc);
}
/* Le picto est le badge de certification (`qc-icon` name: 'badge'),
   le meme que la section testimonials. Il arrive plein, d ou le
   `fill` et le `stroke: none` : la coche en trait qui etait ici
   avant demandait l inverse. Vert #04DA8D, la teinte relevee dans
   qc-review-stars.svg, pour s accorder au bandeau de note. */
.qc-verified svg {
  /* ⛔ Ne pas colorer avec `fill` ici : le path du badge porte
     `fill="currentColor"` en attribut, ce qui bat l heritage du fill
     pose sur le <svg> — le picto ressortait au rose du texte. C est
     `color` qu il faut poser, le path le lit par currentColor.
     Mesure dans le rendu local le 12/09. */
  width: 15px;
  height: 15px;
  color: #04da8d;
  fill: currentColor;
  stroke: none;
  flex-shrink: 0;
}

/* ============================================================
   10. Comment ca marche — trois paliers de temps
   ============================================================ */
.qc-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.qc-steps__cell {
  text-align: center;
}
.qc-steps__time {
  display: inline-block;
  margin: 0 0 12px;
  padding: 7px 16px;
  background: var(--qc-blush);
  border-radius: var(--radius-pill, 40px);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qc-annc);
}
.qc-steps__title {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.qc-steps__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--qc-plum-soft);
}

/* ============================================================
   11. Bandeau promo
   ============================================================ */
.qc-promo {
  padding: 18px 20px;
  background: var(--qc-brand);
  color: #ffffff;
  text-align: center;
}
.qc-promo__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
}
.qc-promo__eyebrow,
.qc-promo__end {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.qc-promo__offer {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  line-height: 1;
}

/* ============================================================
   12. Superiorite — visuel + puces
   ============================================================ */
.qc-outperform__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.qc-outperform__media {
  border-radius: 18px;
}
.qc-outperform__list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.qc-outperform__li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
}
.qc-outperform__li span[aria-hidden] {
  color: var(--qc-brand);
}

/* ============================================================
   13. Garantie
   ============================================================ */
.qc-guarantee__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.qc-guarantee__body p {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--qc-plum-soft);
}
.qc-guarantee__reassure {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.qc-guarantee__reassure li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.qc-guarantee__reassure svg {
  width: 15px;
  height: 15px;
  stroke: var(--qc-brand);
  stroke-width: 2.2;
  fill: none;
}

/* ============================================================
   14. Tableau comparatif
   ============================================================ */
.qc-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.qc-compare__scroll {
  overflow-x: auto;
}
.qc-compare th,
.qc-compare td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--qc-line);
  text-align: left;
  vertical-align: middle;
}
.qc-compare thead th {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qc-plum-soft);
  text-align: center;
}
.qc-compare thead th.qc-compare__us {
  color: var(--qc-annc);
  background: var(--qc-blush);
  border-radius: 14px 14px 0 0;
}
.qc-compare td.qc-compare__us {
  background: var(--qc-blush);
  text-align: center;
}
.qc-compare tbody tr:last-child td.qc-compare__us {
  border-radius: 0 0 14px 14px;
}
.qc-compare td.qc-compare__them {
  text-align: center;
}
.qc-compare__feature b {
  display: block;
  font-size: 1rem;
}
.qc-compare__feature span {
  font-size: 0.875rem;
  color: var(--qc-plum-soft);
}
.qc-compare__yes {
  color: var(--qc-brand);
  font-size: 1.25rem;
}
.qc-compare__no {
  color: rgba(61, 16, 32, 0.28);
  font-size: 1.25rem;
}

/* ============================================================
   15. Huit temoignages
   ============================================================ */
.qc-emotion__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.qc-emotion__rail::-webkit-scrollbar {
  display: none;
}
.qc-emotion__card {
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--qc-line);
  border-radius: 16px;
  overflow: hidden;
}
.qc-emotion__media {
  aspect-ratio: 1 / 1;
}
.qc-emotion__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.qc-emotion__quote {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.qc-emotion__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qc-emotion__tag {
  padding: 5px 11px;
  background: var(--qc-blush);
  border-radius: var(--radius-pill, 40px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--qc-annc);
}
.qc-emotion__author {
  margin: auto 0 0;
  font-size: 0.8125rem;
  color: var(--qc-plum-soft);
}

/* Les puces des rails viennent de mobile-carousel.js (classes
   .mcar-dots / .mcar-dot, stylees dans mobile-fixes.css) : rien a
   redefinir ici, sinon deux systemes de puces cohabiteraient. */

/* ============================================================
   16. FAQ
   ============================================================ */
.qc-faq__list {
  max-width: 820px;
  margin: 0 auto;
}
.qc-faq__item {
  border-bottom: 1px solid var(--qc-line);
}
.qc-faq__q {
  /* <summary> : le triangle natif se retire par `list-style` sur
     Firefox et par ::-webkit-details-marker sur WebKit. Il faut
     les deux. */
  list-style: none;
  width: 100%;
  padding: 20px 44px 20px 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--qc-plum);
  cursor: pointer;
  position: relative;
}
.qc-faq__q::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--qc-brand);
  border-bottom: 2px solid var(--qc-brand);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.qc-faq__item[open] .qc-faq__q::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}
.qc-faq__q::-webkit-details-marker {
  display: none;
}
.qc-faq__a {
  padding: 0 0 22px;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--qc-plum-soft);
}

/* ============================================================
   Mobile — 375 px de reference, comme le reste du theme
   ============================================================ */
@media (max-width: 900px) {
  .qc-benefits__grid,
  .qc-outperform__grid,
  .qc-guarantee__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .qc-reasons__item {
    grid-template-columns: 58px 1fr;
    gap: 18px;
    padding: 22px 24px;
  }
  .qc-reasons__ico {
    width: 58px;
    height: 58px;
  }
}

@media (max-width: 749px) {
  .qc {
    /* 22px : 34 en haut ET en bas faisait 68px entre deux sections sur une
       colonne de 375px, avant meme les line-height des titres. */
    --qc-pad: 22px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .qc__sub {
    margin-bottom: 22px;
  }
  .qc-steps__grid,
  .qc-clinic__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* Ingredients et avis ne s empilent pas : ils passent en
     carrousel (blocs `[data-mcar]` plus bas). Le
     `grid-template-columns: 1fr` d origine est retire pour eux :
     il se battait avec le `display: flex` du rail. */
  .qc-ing__grid,
  .qc-reviews__grid {
    gap: 16px;
  }
  .qc-counters__grid {
    gap: 12px;
  }
  .qc-counters__num {
    font-size: 1.75rem;
    min-height: 2.1em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .qc-counters__label {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }
  .qc-reasons__list {
    gap: 14px;
  }
  .qc-reasons__item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 18px;
  }
  .qc-reasons__ico {
    width: 52px;
    height: 52px;
  }
  .qc-reasons__body {
    padding-right: 0;
  }
  .qc-reasons__num {
    top: 18px;
    right: 18px;
    bottom: auto;
    font-size: 1.75rem;
  }
  .qc-reasons__title {
    font-size: 1rem;
    /* Laisse passer le numero, desormais en haut a droite. */
    padding-right: 34px;
  }
  .qc-guarantee__reassure {
    gap: 8px 16px;
  }
  .qc-compare th,
  .qc-compare td {
    padding: 12px 10px;
  }
  .qc-compare__feature b {
    font-size: 0.9375rem;
  }
}


/* ============================================================
   Accordeon d informations produit (qc-product-tabs).
   Il vit DANS la colonne de droite de product-main, pas dans une
   section pleine largeur : d ou des selecteurs sans prefixe de
   page, et un `list-style:none` obligatoire sur le <summary>
   (Firefox) en plus du ::-webkit-details-marker.
   ============================================================ */
.qc-tabs {
  /* `.pm-info` est un flex colonne en `align-items: flex-start` : sans
     `align-self: stretch` l accordeon se dimensionne sur son contenu, donc
     232 px replie et 580 px des qu un volet s ouvre — il « grandissait au
     depliage ». Mesure du 11/09. */
  align-self: stretch;
  width: 100%;
  margin: 26px 0 0;
  border-top: 1px solid rgba(61, 16, 32, 0.1);
}
.qc-tabs__item {
  border-bottom: 1px solid rgba(61, 16, 32, 0.1);
}
.qc-tabs__head {
  list-style: none;
  position: relative;
  padding: 17px 40px 17px 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-plum, #3d1020);
  cursor: pointer;
}
.qc-tabs__head::-webkit-details-marker {
  display: none;
}
/* Le + devient un - a l ouverture : deux traits, le vertical disparait. */
.qc-tabs__head::before,
.qc-tabs__head::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  background: var(--color-brand, #ee6ea6);
  transition: opacity 0.18s ease;
}
.qc-tabs__head::before {
  width: 13px;
  height: 2px;
  margin-top: -1px;
}
.qc-tabs__head::after {
  width: 2px;
  height: 13px;
  margin-top: -6.5px;
  right: 11.5px;
}
.qc-tabs__item[open] .qc-tabs__head::after {
  opacity: 0;
}
.qc-tabs__body {
  padding: 0 0 20px;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-plum-soft, rgba(61, 16, 32, 0.72));
}
.qc-tabs__body p {
  margin: 0 0 12px;
}
.qc-tabs__body p:last-child {
  margin-bottom: 0;
}
.qc-tabs__body strong {
  color: var(--color-plum, #3d1020);
  font-weight: 600;
}


/* ---- Titres de volets en capitales de mots ---- */
/* L original ecrit « Détails Du Produit » et non « DÉTAILS DU PRODUIT » :
   c est un `capitalize` herite de la version anglaise, ou chaque mot porte
   une majuscule. On le reproduit tel quel. `text-transform` n agit que sur
   l affichage, le texte source reste en minuscules. */
.qc-tabs__head {
  text-transform: capitalize;
  letter-spacing: 0.01em;
  font-size: 1rem;
}

/* ---- Actifs mis en avant, dans le volet ingredients ---- */
.qc-act {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 20px;
}
.qc-act__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  align-items: start;
}
.qc-act__ico {
  width: 34px;
  height: auto;
  display: block;
  margin-top: 2px;
}
.qc-act__nom {
  display: block;
  margin: 0 0 4px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-transform: capitalize;
  color: var(--color-annc-text, #a81050);
}
.qc-act__txt {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-plum-soft, rgba(61, 16, 32, 0.72));
}
/* Variantes de la meme liste dans les autres volets. L original reprend
   exactement cette grille : icone a gauche, intitule en capitales rose,
   corps en dessous. Seule la largeur de l icone change (82px pour les
   illustrations d etapes, 19x20 pour l etincelle des caracteristiques) et
   l intitule y est en capitales et non en capitales de mots.
   Largeur ET hauteur sont ecrites : sans elles la place n est reservee
   qu au chargement de l image, et le volet saute a l ouverture. */
.qc-act--etape {
  gap: 30px;
}
.qc-act--etape .qc-act__item {
  grid-template-columns: 82px 1fr;
  gap: 8px;
}
.qc-act--etape .qc-act__ico {
  width: 82px;
  height: 90px;
  margin-top: 0;
}
.qc-act--detail {
  gap: 18px;
}
.qc-act--detail .qc-act__item {
  grid-template-columns: 19px 1fr;
  gap: 8px;
}
.qc-act--detail .qc-act__ico {
  width: 19px;
  height: 20px;
  margin-top: 1px;
}
.qc-act--etape .qc-act__nom,
.qc-act--detail .qc-act__nom {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 7px;
}
/* Le deux-points des caracteristiques est ecrit ici et non dans le reglage :
   un intitule finissant par « : » se collerait au separateur « :: » et
   donnerait « ::: », que le split coupe au mauvais endroit. Espace
   insecable devant, comme le veut la typographie francaise. */
.qc-act--detail .qc-act__nom::after {
  content: ' :';
}

@media (max-width: 749px) {
  .qc-act--etape .qc-act__item {
    grid-template-columns: 72px 1fr;
    gap: 13px;
  }
  .qc-act--etape .qc-act__ico {
    width: 72px;
    height: 79px;
  }
  .qc-act--etape {
    gap: 20px;
  }
}

.qc-tabs__inci {
  margin: 24px 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-plum, #3d1020);
}
.qc-tabs__inci + p {
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* Resultats clientes : un pourcentage en gros a gauche, la phrase a droite.
   Meme grille que le bloc clinique, mais en liste verticale dans l onglet. */
.qc-res {
  margin: 18px 0 0;
  display: grid;
  gap: 18px;
}
.qc-res__ligne {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr;
  align-items: center;
  gap: 16px;
}
.qc-res__pct {
  font-family: var(--font-display, Georgia, "Times New Roman", serif);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1;
  color: var(--color-annc-text, #a81050);
  white-space: nowrap;
}
.qc-res__txt {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-plum-soft, rgba(61, 16, 32, 0.72));
}
.qc-res__txt strong {
  color: var(--color-plum, #3d1020);
}


/* Controles du carrousel de preuve sociale (fleches + puces),
   calques sur ceux de la landing page. */
.qc-social__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}
.qc-social__arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--qc-rose-soft, #f6d4e2);
  color: var(--qc-rose, #ee6ea6);
  transition: filter .15s ease;
}
.qc-social__arrow:hover { filter: brightness(.94); }
.qc-social__dots { display: flex; align-items: center; gap: 9px; }
.qc-social__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: background .15s ease;
}
.qc-social__dot.is-active { background: var(--qc-rose, #ee6ea6); }
.qc-social__rail.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}
.qc-social__rail { cursor: grab; }
.qc-social__rail img { user-select: none; -webkit-user-drag: none; }
@media (max-width: 749px) {
  .qc-social__nav { gap: 10px; margin-top: 20px; }
  .qc-social__dot { width: 8px; height: 8px; gap: 7px; }
}


/* Les trois visuels « il est temps de » : en rail sur mobile plutot
   qu empiles. Trois macros de 340 px de haut l une sous l autre font
   defiler la page sur plus d un ecran et demi avant d arriver au
   produit ; cote a cote, la section tient en un coup d oeil.
   La vignette suivante depasse volontairement : c est ce debord qui
   signale qu on peut faire defiler. */
@media (max-width: 749px) {
  .qc-problems__grid[data-mcar] {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding-inline: 2px;
  }
  .qc-problems__grid[data-mcar] > .qc-problems__item {
    flex: 0 0 76%;
    max-width: 320px;
  }
  .qc-problems__label {
    margin-top: 10px;
    font-size: 1rem;
  }

  /* Les trois cartes d ingredients, meme principe : un visuel carre
     plus un paragraphe font 480 px de haut chacun, donc pres de
     deux ecrans empiles pour trois actifs qui se lisent en
     comparaison. 86 % et non 76 % : la pilule du nom (« collagene
     de faible poids moleculaire ») tient sur deux lignes en
     dessous, et plus etroit elle passait a trois. */
  .qc-ing__grid[data-mcar] {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding-inline: 2px;
    /* La pilule du nom chevauche le haut de la carte (-22 px) et
       les cartes portent une ombre : sans marge la remontee se
       faisait rogner par le conteneur qui defile. */
    padding-top: 4px;
  }
  .qc-ing__grid[data-mcar] > .qc-ing__card {
    flex: 0 0 86%;
    max-width: 340px;
  }

  /* Les trois avis, meme traitement. Les cartes sont etirees a la
     meme hauteur (`align-items: stretch` par defaut du flex) : sans
     ca, un avis court laissait un vide sous sa carte alors que la
     voisine depassait. */
  .qc-reviews__grid[data-mcar] {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding-inline: 2px;
  }
  .qc-reviews__grid[data-mcar] > .qc-reviews__card {
    flex: 0 0 86%;
    max-width: 340px;
  }
}


/* Rail de photos de clientes : ruban plein ecran qui defile en continu,
   entre le bandeau de note et les avis.

   Pleine largeur : le .qc__inner plafonne a ~773 px, or le ruban doit
   filer d un bord a l autre de l ecran, vignettes coupees aux deux
   extremites — c est ce debord qui fait lire le defilement.

   Meme principe que press-marquee : deux groupes identiques et une
   translation de -50 %, donc aucune rupture au bouclage. */
.qc-reviews__rail {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  margin-bottom: 34px;
}
.qc-reviews__ruban {
  display: flex;
  width: max-content;
  animation: qcr-defile var(--qcr-duree, 36s) linear infinite;
}
/* Pas de pause au survol du rail de photos (demande du 13/09/2026) : le ruban tourne en continu. */
.qc-reviews__groupe {
  display: flex;
  gap: 12px;
  padding-right: 12px;
}
.qc-reviews__shot {
  flex: 0 0 auto;
  width: 132px;
  margin: 0;
}
.qc-reviews__shot img {
  display: block;
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid var(--qc-brand);
}
@keyframes qcr-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}
@media (max-width: 749px) {
  .qc-reviews__rail { margin-bottom: 26px; }
  .qc-reviews__groupe { gap: 9px; padding-right: 9px; }
  .qc-reviews__shot,
  .qc-reviews__shot img { width: 108px; }
  .qc-reviews__shot img { height: 108px; }
}
/* Mouvement reduit : on coupe l animation et on rend le ruban defilable
   a la main, sinon la section devient inutilisable. */
@media (prefers-reduced-motion: reduce) {
  .qc-reviews__ruban { animation: none; }
  .qc-reviews__rail { overflow-x: auto; }
}
}

/* Green rating tiles in the review summary. */
.qc-reviews__score .qc-stars { gap: 3px; color: #fff; }
.qc-reviews__score .qc-stars svg {
  background: #00b67a;
  fill: #fff;
  padding: 2px;
  box-sizing: border-box;
}

.qc-reviews__logo{display:block;width:156px;height:38px;object-fit:contain;flex-shrink:0}@media(max-width:600px){.qc-reviews__logo{width:125px;height:auto}}

.qc-reviews__stars-image{display:block;width:176px;height:33px;object-fit:contain;flex-shrink:0}@media(max-width:600px){.qc-reviews__stars-image{width:140px;height:auto}}

/* Dans les cartes d avis les etoiles sont plus petites que dans le
   bandeau de note : a 176 px elles passaient devant le titre de
   l avis, qui est la vraie accroche de la carte. Le bandeau du haut
   garde sa taille — c est lui qui doit se voir de loin. */
.qc-reviews__body .qc-reviews__stars-image {
  width: 108px;
  height: auto;
  margin-bottom: 2px;
}
@media (max-width: 600px) {
  .qc-reviews__body .qc-reviews__stars-image {
    width: 96px;
  }
}

/* ============================================================
   Bandeau de badges : ruban defilant sur mobile

   Empiles, les cinq badges prenaient cinq lignes entre les
   compteurs et la section ingredients — un demi-ecran pour des
   mentions qui se lisent d un coup d oeil. En ruban ils tiennent
   sur une ligne et restent tous lus.

   Meme mecanique que press-marquee et le ruban de photos : deux
   groupes identiques bout a bout, translation de -50 %, donc la
   boucle est invisible. Le second groupe est `aria-hidden` cote
   Liquid : un lecteur d ecran ne doit pas entendre la liste deux
   fois.
   ============================================================ */
@media (max-width: 749px) {
  .qc-badges {
    /* Le ruban depasse volontairement des deux bords : c est ce
       debord qui fait lire le mouvement. */
    overflow: hidden;
    padding-inline: 0;
  }
  .qc-badges__rail {
    display: flex;
    width: max-content;
    animation: qcb-defile var(--qcb-duree, 22s) linear infinite;
  }
  .qc-badges__rail > .qc-badges__list + .qc-badges__list {
    display: flex;
  }
  .qc-badges__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: none;
    margin: 0;
    gap: 0 22px;
    padding-right: 22px;
  }
  .qc-badges__li {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* Au doigt pose, le ruban s arrete : sinon on ne peut pas finir
     de lire un badge qui sort de l ecran. */
  /* Plus de pause au survol des badges (13/09/2026) ; seul le doigt qui
     appuie sur le rail le retient encore. */
  .qc-badges:active .qc-badges__rail {
    animation-play-state: paused;
  }
}

@keyframes qcb-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mouvement reduit : plus d animation, le ruban se pousse a la
   main — comme pour le ruban de photos plus haut. */
@media (prefers-reduced-motion: reduce) {
  .qc-badges__rail {
    animation: none;
  }
  .qc-badges {
    overflow-x: auto;
  }
}

/* Formula spotlight: text, portrait and floating ingredient labels. */
.qc-pdrn-feature{overflow:hidden;padding-block:48px;background:#fff}
.qc-pdrn-feature__grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px;max-width:1120px}
.qc-pdrn-feature__copy{text-align:center;position:relative;z-index:1}
.qc-pdrn-feature__spark{display:block;color:#ef87b2;font-size:70px;line-height:1;margin-bottom:42px}
.qc-pdrn-feature__copy h2{font-family:inherit;font-size:30px;font-weight:700;line-height:1.3;color:#51464b;margin:0 auto 30px;max-width:480px}
.qc-pdrn-feature__copy p{font-size:17px;line-height:1.6;color:#71666b;margin:0 auto;max-width:460px}
.qc-pdrn-feature__copy strong{color:#9d2857}
.qc-pdrn-feature__signature{display:block;margin-top:25px;font-size:12px;font-weight:700;letter-spacing:.1em;color:#9d2857}
.qc-pdrn-feature__visual{position:relative;max-width:480px;width:100%;padding:20px 42px 34px;margin:auto;isolation:isolate}
.qc-pdrn-feature__visual:before{content:"";position:absolute;inset:-70px -80px;z-index:-1;background:radial-gradient(ellipse,#edbed1 0%,#f8e9ef 42%,transparent 70%)}
.qc-pdrn-feature__photo{display:block;width:100%;height:480px;object-fit:cover;border-radius:40px;box-shadow:8px 7px 0 #ee6ea6}
.qc-pdrn-feature__pills{list-style:none;margin:0;padding:0}
.qc-pdrn-feature__pill{position:absolute;width:250px;min-height:46px;display:flex;justify-content:center;align-items:center;gap:8px;text-align:center;padding:10px 17px;border:1px solid #de6796;border-radius:40px;background:#fff;color:#866772;font-size:16px;font-weight:650;line-height:1.3}
.qc-pdrn-feature__pill span{color:#ed83ac;flex-shrink:0}
.qc-pdrn-feature__pill--hero{background:#f7c3d9;border-color:#ee6ea6;color:#3d1020;box-shadow:0 7px 22px #ee6ea626}
.qc-pdrn-feature__pill--hero span{color:#fff}
.qc-pdrn-feature__pill:nth-child(1){top:5px;left:-12px}
.qc-pdrn-feature__pill:nth-child(2){top:65px;left:-12px}
.qc-pdrn-feature__pill:nth-child(3){top:140px;left:-12px}
.qc-pdrn-feature__pill:nth-child(4){bottom:132px;right:-12px}
.qc-pdrn-feature__pill:nth-child(5){bottom:72px;right:-12px}
.qc-pdrn-feature__pill:nth-child(6){bottom:12px;right:-12px}
@media(max-width:750px){.qc-pdrn-feature{padding-block:50px}.qc-pdrn-feature__grid{grid-template-columns:1fr;gap:35px}.qc-pdrn-feature__spark{font-size:48px;margin-bottom:20px}.qc-pdrn-feature__copy h2{font-size:25px;margin-bottom:20px}.qc-pdrn-feature__copy p{font-size:15px}.qc-pdrn-feature__visual{max-width:420px;padding:20px 32px 34px}.qc-pdrn-feature__photo{height:440px;border-radius:30px}.qc-pdrn-feature__pill{width:210px;font-size:13px;min-height:43px;padding:10px 12px}.qc-pdrn-feature__pill:nth-child(-n+3){left:0}.qc-pdrn-feature__pill:nth-child(n+4){right:0}}

/* KAELA sparkle pictograms, matching the floating benefit composition. */
.qc-pdrn-feature__spark svg{display:block;width:68px;height:68px;margin-inline:auto}
.qc-pdrn-feature__icon{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center}
.qc-pdrn-feature__icon svg{display:block;width:100%;height:100%}
.qc-pdrn-feature__pill{font-weight:700}
@media(max-width:750px){.qc-pdrn-feature__spark svg{width:52px;height:52px}.qc-pdrn-feature__icon{width:19px;height:19px}}

/* ---- Sous le bouton : en stock, encadre stock, trois garanties ----
   Repris de la page officialquasi.com le 26/09/2026. Icones Phosphor (MIT). */
.pm-qcstock {
  /* .pm-info aligne ses enfants a gauche : sans stretch la ligne se
     reduit a sa largeur et ne peut pas se centrer. */
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 10px;
  font-size: 0.9375rem;
  color: #4a4a4a;
}
.pm-qcstock__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2bb24c;
  box-shadow: 0 0 0 3px rgba(43, 178, 76, 0.22);
}
.pm-qcwarn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--color-plum, #3d1020);
  border-radius: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-plum, #3d1020);
}
.pm-qcwarn p {
  margin: 0;
}
.pm-qcwarn__ico {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}
.pm-qcwarn__dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin: 0 6px;
  border-radius: 50%;
  background: #e0342b;
  vertical-align: -1px;
}
.pm-qctrust {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.pm-qctrust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.3;
  color: #555;
}
.pm-qctrust__item + .pm-qctrust__item {
  border-left: 1px solid #e3e3e3;
}
.pm-qctrust__ico {
  /* Icones de officialquasi.com : largeurs differentes (camion plus large),
     hauteur commune. */
  width: auto;
  height: 26px;
}

/* ---- Barre de compte a rebours au-dessus des packs (26/09/2026) ----
   Modele envoye par Chouaib : barre pleine, libelle en capitales, trois
   cases blanches H / Min / Sec. Couleur prune de la marque. */
.pm-qccount {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 16px 0 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--color-plum, #3d1020);
  color: #fff;
}
.pm-qccount[hidden] {
  display: none;
}
.pm-qccount__label {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.pm-qccount__timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pm-qccount__box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  padding: 4px 6px 3px;
  border-radius: 6px;
  background: #fff;
  color: var(--color-plum, #3d1020);
  line-height: 1;
}
.pm-qccount__box b {
  font-size: 1.125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pm-qccount__box small {
  margin-top: 2px;
  font-size: 0.625rem;
  font-weight: 600;
}
.pm-qccount__sep {
  font-weight: 800;
}

/* ---- Packs compacts, seulement quand la rangee cadeaux est active ----
   La ligne « Livraison offerte » quitte chaque carte : elle est portee par
   la rangee cadeaux juste en dessous. 84 px -> ~62 px par carte. */
.product-main-section .pm-bundle--qc .pm-bundle-bars {
  gap: 8px;
}
.product-main-section .pm-bundle--qc .pm-bundle-bar {
  min-height: 0;
  padding: 8px 12px;
  border-radius: 14px;
}
.product-main-section .pm-bundle--qc .pm-bundle-thumb {
  flex-basis: 44px;
  width: 44px;
  height: 46px;
}
.product-main-section .pm-bundle--qc .pm-bundle-included {
  display: none;
}

/* ---- Rangee « Cadeaux a debloquer » ---- */
.pm-qcgifts {
  /* .pm-info aligne ses enfants a gauche : stretch pour pouvoir centrer. */
  align-self: stretch;
  margin: 14px 0 16px;
}
.product-main-section .pm-qcgifts__title {
  margin: 0 0 12px;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-plum, #3d1020);
}
.pm-qcgifts__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--qc-gifts, 3), minmax(0, 1fr));
  gap: 10px;
}
/* Un seul cadeau : tuile de la largeur d une colonne sur trois, centree,
   comme la premiere tuile du modele. */
.pm-qcgifts__grid[style*="--qc-gifts: 1"] {
  grid-template-columns: minmax(0, 190px);
  justify-content: center;
}
.pm-qcgift-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 96px;
  padding: 20px 8px 12px;
  border: 2px solid var(--color-plum, #3d1020);
  border-radius: 4px;
  background: var(--color-pink-light, #f7e6ec);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--color-plum, #3d1020);
}
.pm-qcgift-tile__badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2px 8px;
  background: #f9c3b3;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: #3d1020;
}
.pm-qcgift-tile__ico img {
  display: block;
  height: 26px;
  width: auto;
}
.pm-qcgift-tile__ico--lock,
.pm-qcgift-tile__txt--lock {
  display: none;
}
.pm-qcgift-tile.is-locked {
  border: 1px solid #d6d2d8;
  background: #fff;
  color: #5d595e;
}
.pm-qcgift-tile.is-locked .pm-qcgift-tile__ico--open,
.pm-qcgift-tile.is-locked .pm-qcgift-tile__txt--open {
  display: none;
}
.pm-qcgift-tile.is-locked .pm-qcgift-tile__ico--lock,
.pm-qcgift-tile.is-locked .pm-qcgift-tile__txt--lock {
  display: block;
}
.pm-qcgift-tile__ico--lock {
  color: #6b6570;
}

/* ---- Meme structure que le modele (26/09/2026) ----
   Compte a rebours sur UNE ligne : libelle a gauche (il peut passer sur
   deux lignes dans sa colonne), chrono a droite, jamais en dessous. */
.pm-qccount {
  flex-wrap: nowrap;
  gap: 12px;
}
.pm-qccount__label {
  flex: 0 1 auto;
  line-height: 1.25;
}
.pm-qccount__timer {
  flex: none;
}
@media (max-width: 749px) {
  .pm-qccount {
    padding: 9px 10px;
  }
  .pm-qccount__label {
    font-size: 0.75rem;
    text-align: left;
  }
  .pm-qccount__box {
    min-width: 32px;
    padding: 3px 4px 2px;
  }
  .pm-qccount__box b {
    font-size: 1rem;
  }
}
/* Tuiles : icone un peu plus grande pour les boites, valeur barree dans
   la pastille. */
.pm-qcgift-tile__ico img {
  height: 32px;
}
.pm-qcgift-tile__badge s {
  margin-left: 3px;
  font-weight: 400;
}
.pm-qcgift-tile {
  min-height: 104px;
  font-size: 0.875rem;
  line-height: 1.25;
}

/* Pastilles « Economisez X € » retirees des cartes de packs (demande de
   Chouaib, 26/09/2026). Masquees et non supprimees : product.js continue de
   les recalculer, et les autres fiches les gardent. */
.product-main-section .pm-bundle--qc .pm-bundle-label {
  display: none;
}

/* ---- Libelle du compte a rebours toujours sur UNE ligne (26/09/2026) ----
   Mesure a 375 px : le libelle demande 271 px a 12 px, il en reste 184 a cote
   du chrono. Donc : sur la meme ligne quand la barre est assez large (colonne
   ordinateur), sinon libelle en pleine largeur et chrono en dessous. La
   bascule depend de la largeur de la BARRE (container query), pas de l ecran :
   la colonne d achat est etroite entre 750 et 990 px. */
.pm-qccount {
  container-type: inline-size;
  flex-wrap: wrap;
}
.pm-qccount__label {
  white-space: nowrap;
  font-size: 0.8125rem;
}
@container (max-width: 470px) {
  .pm-qccount__label {
    flex-basis: 100%;
    text-align: center;
    font-size: clamp(11px, 3.6cqi, 13px);
  }
}

/* ---- Case d abonnement : titre sur UNE ligne (26/09/2026) ----
   Mesure a 375 px : 338 px de titre a 14 px pour 287 px disponibles. La
   police suit la largeur de la case (container query) : ~12 px sur
   telephone, 14 px des que la place le permet. Sous 330 px de case (tres
   petits ecrans), le titre repasse sur deux lignes plutot que de deborder. */
.product-main-section .pm-sub {
  container-type: inline-size;
  gap: 8px;
  padding: 11px 10px;
}
.product-main-section .pm-sub__title {
  font-size: clamp(11px, 3.45cqi, 14px);
}
@container (min-width: 330px) {
  .product-main-section .pm-sub__title {
    white-space: nowrap;
  }
}

/* ---- Logos de paiement juste sous le bouton (26/09/2026) ----
   .pm-info est une colonne flex : on remonte la rangee de logos par
   « order », sans toucher a product-main.liquid, donc sans rien changer
   sur les autres fiches produit. */
.product-main-section .pm-info > .pm-atc-wrapper ~ * {
  order: 2;
}
.product-main-section .pm-info > .pm-trust-row {
  order: 1;
  margin-top: 10px;
}

/* ---- Tout sur une ligne en telephone (26/09/2026) ----
   Mesures a 375 px (345 px utiles) :
   - pastilles : 183 + 8 + 183 = 374 px -> police 11 px, lettres et marges
     resserrees (~322 px) ;
   - titre d accroche : 370 px a 15 px -> police min(15px, 3.65vw), ~13,7 px ;
   - titre de la case abonnement : 338 px a 14 px pour 287 -> ~11,8 px.
   La case abonnement n est PLUS un conteneur (container-type) : la
   containment la reduisait a 0 px de large et cassait son titre sur 5
   lignes (mesure le 26/09/2026). */
.product-main-section .pm-sub {
  container-type: normal;
}
@media (max-width: 749px) {
  .pm-qcpills {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .pm-qcpill {
    padding: 6px 9px;
    font-size: 11px;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .product-main-section .pm-custom-text p.pm-qclead__title {
    font-size: min(15px, 3.65vw);
    white-space: nowrap;
  }
  .product-main-section .pm-sub .pm-sub__title {
    font-size: min(14px, 3.15vw);
    white-space: nowrap;
  }
}
/* Tres petits ecrans : on laisse repasser a la ligne plutot que deborder. */
@media (max-width: 339px) {
  .pm-qcpills {
    flex-wrap: wrap;
  }
  .product-main-section .pm-custom-text p.pm-qclead__title,
  .product-main-section .pm-sub .pm-sub__title {
    white-space: normal;
  }
}

/* ---- Centrage robuste en telephone (26/09/2026) ----
   La taille du titre d accroche suit la largeur du BLOC (unites cqi), pas
   celle de l ecran : en vw il debordait a droite sur certains telephones au
   lieu de rester centre. 370 px a 15 px -> 3,95cqi laisse ~2 % de marge.
   Le bloc et la rangee de pastilles s etirent sur toute la colonne
   (.pm-info aligne ses enfants a gauche) pour pouvoir etre centres. */
.product-main-section .pm-custom-text.pm-qclead {
  align-self: stretch;
  container-type: inline-size;
}
@media (max-width: 749px) {
  .product-main-section .pm-custom-text p.pm-qclead__title {
    font-size: min(15px, 3.95cqi);
  }
  .pm-qcpills {
    align-self: stretch;
    justify-content: center;
  }
}

/* ---- Bloc stock limite + barre + chrono, puis carte garantie ---- */
.pm-qcscar {
  align-self: stretch;
  margin: 16px 0 12px;
  color: var(--color-plum, #3d1020);
}
.pm-qcscar__title {
  font-size: 0.9375rem;
  font-weight: 700;
}
.pm-qcscar__text {
  margin: 2px 0 10px;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.pm-qcscar__bar {
  height: 12px;
  border-radius: 999px;
  background: #ebe6e9;
  overflow: hidden;
}
.pm-qcscar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-pink, #cb6387), var(--color-plum, #3d1020));
}
.pm-qcscar__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-annc-text, #a81050);
}
.pm-qcscar__time {
  font-variant-numeric: tabular-nums;
}
.pm-qcguar {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f4f1f3;
}
.pm-qcguar__ico {
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--color-annc-text, #a81050);
}
.pm-qcguar__title {
  margin: 0 0 3px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-annc-text, #a81050);
}
.pm-qcguar__text {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-plum, #3d1020);
}

/* Ordre sous le bouton : logos de paiement, bloc stock, carte garantie,
   puis le reste. L ancienne carte « Satisfait ou rembourse » est retiree
   de cette page (remplacee par .pm-qcguar). */
.product-main-section .pm-info > .pm-atc-wrapper ~ * {
  order: 5;
}
.product-main-section .pm-info > .pm-trust-row {
  order: 1;
}
.product-main-section .pm-info > .pm-qcscar {
  order: 2;
}
.product-main-section .pm-info > .pm-qcguar {
  order: 3;
}
.product-main-section .pm-info > .pm-guarantee {
  display: none;
}

/* ---- Bloc stock + carte garantie en rose (26/09/2026, demande de Chouaib) ----
   Uniquement les roses de la marque (theme.css) : --color-brand #ee6ea6,
   --color-pink #cb6387, --color-pink-light #f7e6ec. */
.pm-qcscar__bar {
  background: var(--color-pink-light, #f7e6ec);
}
.pm-qcscar__fill {
  background: linear-gradient(90deg, #f6a9c9, var(--color-brand, #ee6ea6) 55%, var(--color-pink, #cb6387));
}
.pm-qcscar__meta {
  color: var(--color-pink, #cb6387);
}
.pm-qcguar {
  background: #fdf0f5;
  border: 1px solid var(--color-pink-light, #f7e6ec);
}
.pm-qcguar__ico {
  color: var(--color-brand, #ee6ea6);
}
.pm-qcguar__title {
  color: var(--color-pink, #cb6387);
}

/* ---- Titre produit centre, sur UNE ligne en telephone (26/09/2026) ----
   Mesure a 375 px : « Masque au collagene PDRN KAELA » fait 476 px a 29 px,
   soit 16,41 px de largeur par px de police, pour 100vw - 30 px utiles
   (.pm-info a 15 px de marge de chaque cote). Diviseur 16,9 = ~3 % de marge.
   Resultat : 17 px a 320, 20 px a 375, 24 px a 430, plafonne a 29 px.
   Les etoiles au-dessus sont centrees avec lui. */
@media (max-width: 749px) {
  .product-main-section .pm-info h1.pm-title {
    font-size: min(29px, calc((100vw - 30px) / 16.9));
    white-space: nowrap;
    text-align: center;
    align-self: stretch;
  }
  .product-main-section .pm-info > .pm-rating {
    align-self: stretch;
    justify-content: center;
  }
}

/* Pastilles aussi sur une ligne a 320 px : 290 px utiles, ~280 px avec
   police 10 px, lettres et marges resserrees (26/09/2026). */
@media (max-width: 339px) {
  .pm-qcpills {
    flex-wrap: nowrap;
    gap: 5px;
  }
  .pm-qcpill {
    padding: 6px 7px;
    font-size: 10px;
    letter-spacing: 0.03em;
    gap: 5px;
  }
  .pm-qcpill__ico {
    width: 15px;
  }
}

/* mobile-fixes.css, charge en fin de page, remet les pastilles a 12 px :
   selecteur renforce pour que les reductions ci-dessus s appliquent. */
@media (max-width: 749px) {
  .product-main-section .pm-qcpills .pm-qcpill {
    font-size: 11px;
  }
}
@media (max-width: 339px) {
  .product-main-section .pm-qcpills .pm-qcpill {
    font-size: 10px;
  }
}

/* ---- Cartes de packs comme le modele (26/09/2026) ----
   Titre et prix bien gras, et la pastille « Economisez » revient, mais a
   partir du pack 2 seulement (le pack 1 n en affiche pas, comme le modele).
   Pastille saumon, la meme que les pastilles « GRATUIT » des cadeaux. */
.product-main-section .pm-bundle--qc .pm-bundle-bar-title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-plum, #3d1020);
}
.product-main-section .pm-bundle--qc .pm-bundle-bar-sub {
  margin-top: 1px;
  font-size: 0.8125rem;
  font-weight: 400;
}
.product-main-section .pm-bundle--qc .pm-bundle-price {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--color-plum, #3d1020);
}
.product-main-section .pm-bundle--qc .pm-bundle-bar .pm-bundle-label {
  display: none;
}
.product-main-section .pm-bundle--qc .pm-bundle-bar:not([data-tier="1"]) .pm-bundle-label {
  display: inline-flex;
  align-self: flex-start;
  margin: 4px 0 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f9c3b3;
  color: var(--color-plum, #3d1020);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---- Ligne d avis descendue de quelques pixels (26/09/2026) ---- */
.product-main-section .pm-info > .pm-rating {
  margin-top: 6px;
}

/* ---- Titre et pastilles calcules sur la largeur REELLE de la colonne ----
   100vw compte la barre de defilement des navigateurs d ordinateur : le
   titre debordait de ~15 px dans le navigateur de l appli (« KAEL… »). La
   colonne .pm-info devient un conteneur en telephone (sa largeur vient de la
   mise en page, pas de son contenu) et les tailles se calculent en cqi. */
@media (max-width: 749px) {
  .product-main-section .pm-info {
    container-type: inline-size;
  }
  .product-main-section .pm-info h1.pm-title {
    font-size: min(29px, calc(100cqi / 16.9));
  }
  .product-main-section .pm-qcpills .pm-qcpill {
    font-size: min(11px, calc((100cqi - 42px) / 26));
  }
}

/* Cartes de packs un peu moins grasses (26/09/2026) : 800 -> 700. */
.product-main-section .pm-bundle--qc .pm-bundle-bar-title,
.product-main-section .pm-bundle--qc .pm-bundle-price {
  font-weight: 700;
}

/* ---- Carte garantie : titre sur UNE ligne, texte sur DEUX max (26/09/2026) ----
   Tailles calculees sur la largeur de la carte (cqi) : corps = 100cqi - 52 px
   (icone 40 + ecart 12). Titre : 20,1 px de large par px de police (+3,5 %
   de marge). Texte : 34 px par px de police, 2 lignes a ~88 % de remplissage. */
.pm-qcguar {
  container-type: inline-size;
}
.pm-qcguar__title {
  white-space: nowrap;
  font-size: min(14px, calc((100cqi - 52px) / 20.8));
}
.pm-qcguar__text {
  font-size: min(13px, calc((100cqi - 52px) * 1.76 / 34));
}

/* ---- Rubans BEST SELLER / MEILLEURE OFFRE comme le modele (26/09/2026) ----
   Languette qui deborde du haut de la carte, et un petit pli plus fonce sous
   son bord droit : le ruban semble passer derriere la carte (effet « 3D »). */
.product-main-section .pm-bundle--qc .pm-bundle-badge {
  top: -11px;
  right: 16px;
  padding: 4px 10px;
  border-radius: 4px 4px 0 4px;
  background: var(--color-pink, #cb6387);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.2;
  box-shadow: 0 2px 4px rgba(61, 16, 32, 0.18);
}
.product-main-section .pm-bundle--qc .pm-bundle-badge::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 7px 0 0;
  border-color: #8e3a5a transparent transparent transparent;
}

/* Texte du bloc stock sur UNE ligne (26/09/2026) : 397 px a 15 px pour 345
   disponibles a 375 px -> 26,5 px par px de police, +3 % de marge. */
.pm-qcscar {
  container-type: inline-size;
}
.pm-qcscar__text {
  white-space: nowrap;
  font-size: min(15px, calc(100cqi / 27.3));
}

/* ---- Tout en rose (26/09/2026, demande de Chouaib) ----
   Le prune fonce (barre du compte a rebours, tuile cadeau ouverte) et le
   saumon (pastilles « Economisez » et « GRATUIT ») passent aux roses de la
   marque. Blanc sur #cb6387 = 3,9:1, lisible en gras capitales. */
.pm-qccount {
  background: var(--color-pink, #cb6387);
}
.pm-qccount__box {
  color: var(--color-pink, #cb6387);
}
.product-main-section .pm-bundle--qc .pm-bundle-bar:not([data-tier="1"]) .pm-bundle-label,
.pm-qcgift-tile__badge {
  background: #fbd0df;
  color: var(--color-plum, #3d1020);
}
.pm-qcgift-tile {
  border-color: var(--color-pink, #cb6387);
}
.pm-qcgift-tile.is-locked {
  border-color: #ecd9e0;
}

/* ---- Case abonnement : titre ET note sur une ligne, calcules sur la
   largeur reelle de la colonne (cqi de .pm-info) — le calcul en vw debordait
   avec une barre de defilement (26/09/2026). Texte disponible = colonne - 50
   px (marges, case a cocher, ecart). Titre : 24,1 px par px de police ;
   note (« Sans engagement, annulable a tout moment. ») : ~21,1 px par px. */
@media (max-width: 749px) {
  .product-main-section .pm-sub .pm-sub__title {
    font-size: min(14px, calc((100cqi - 50px) / 24.9));
  }
  .product-main-section .pm-sub .pm-sub__note {
    white-space: nowrap;
    font-size: min(12px, calc((100cqi - 50px) / 21.7));
  }
}
@media (max-width: 339px) {
  .product-main-section .pm-sub .pm-sub__title,
  .product-main-section .pm-sub .pm-sub__note {
    font-size: 11px;
    white-space: normal;
  }
}

/* Mention en petit sous le texte d une tuile cadeau (validite de la carte
   cadeau, 26/09/2026). */
.pm-qcgift-tile__small {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.25;
  opacity: 0.8;
}
/* Pastille « GRATUIT 29,99 € » : 109 px pour des tuiles de 104 px a 375 px.
   Marges et police resserrees en telephone (26/09/2026). */
@media (max-width: 749px) {
  .pm-qcgift-tile__badge {
    padding: 2px 6px;
    font-size: 11px;
  }
  .pm-qcgift-tile__badge s {
    margin-left: 2px;
  }
}

/* Tuile carte cadeau : l image de la carte (708x464) est plus lisible un peu
   plus grande que les pictos (26/09/2026). */
.pm-qcgift-tile__ico img[src*="carte-cadeau"] {
  height: 42px;
  border-radius: 4px;
}

/* ---- Tuiles cadeaux moins hautes (26/09/2026) : 199 px mesures a 375 px.
   Police 14 -> 12,5 px, marges et ecarts resserres, pictos 32 -> 26 px,
   image de la carte 42 -> 30 px, plus de hauteur minimale. ---- */
.pm-qcgift-tile {
  min-height: 0;
  gap: 5px;
  padding: 16px 6px 9px;
  font-size: 12.5px;
  line-height: 1.25;
}
.pm-qcgift-tile__ico img {
  height: 26px;
}
.pm-qcgift-tile__ico img[src*="carte-cadeau"] {
  height: 30px;
}
.pm-qcgift-tile__small {
  margin-top: 3px;
  font-size: 10px;
}
/* Tres petits ecrans (320 px, tuiles de ~93 px) : pastilles et texte
   resserres pour ne rien faire deborder. */
@media (max-width: 359px) {
  .pm-qcgifts__grid {
    gap: 6px;
  }
  .pm-qcgift-tile {
    padding: 15px 4px 8px;
    font-size: 11.5px;
  }
  .pm-qcgift-tile__badge {
    padding: 2px 4px;
    font-size: 9.5px;
  }
  .pm-qcgift-tile__badge s {
    margin-left: 1px;
  }
}

/* ---- Carte de l expert sous la ligne livraison, en telephone (26/09/2026) ----
   Meme style que dans la colonne photo ; la carte de la colonne photo est
   masquee en telephone, la copie masquee sur ordinateur. */
.product-main-section .pm-info .pm-expert {
  margin: 24px 0 0;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  /* Ombre douce plutot qu un filet : c est ce qui detache la carte du
     fond blanc de la page sans dessiner un deuxieme cadre sous l image. */
  box-shadow: 0 8px 26px rgba(61, 16, 32, 0.09);
}
.product-main-section .pm-info .pm-expert__quote {
  margin: 0;
  padding: 26px 28px;
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--color-plum-soft, rgba(61, 16, 32, 0.72));
}
.product-main-section .pm-info .pm-expert__who {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  background: var(--color-pink-light, #f7e6ec);
}
.product-main-section .pm-info .pm-expert__photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 48px;
}
.product-main-section .pm-info .pm-expert__id {
  display: grid;
  gap: 3px;
  font-size: 0.9375rem;
  color: var(--color-plum, #3d1020);
}
.product-main-section .pm-info .pm-expert__id b {
  font-weight: 700;
}
.product-main-section .pm-info .pm-expert__role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-plum-soft, rgba(61, 16, 32, 0.72));
}
/* Meme sceau que le badge « Cliente verifiee » des temoignages, mais en bleu :
   le rose signe un avis de cliente, le bleu une caution professionnelle. Deux
   choses differentes ne doivent pas porter la meme couleur. Le trace est rempli
   en currentColor, la teinte se pilote donc ici. */
.product-main-section .pm-info .pm-expert__role svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: #1d7fd4;
}

@media (max-width: 749px) {
  .product-main-section .pm-info .pm-expert {
    margin-top: 18px;
  }
  .product-main-section .pm-info .pm-expert__quote {
    padding: 20px 18px;
    line-height: 1.65;
  }
  .product-main-section .pm-info .pm-expert__who {
    padding: 14px 18px;
    gap: 12px;
  }
  .product-main-section .pm-info .pm-expert__photo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }
}

.pm-expert--mobile {
  display: none;
}
@media (max-width: 749px) {
  .product-main-section .pm-gallery-col .pm-expert--galerie {
    display: none;
  }
  .product-main-section .pm-info .pm-expert--mobile {
    display: block;
    align-self: stretch;
    margin: 16px 0 18px;
  }
}