/* ============================================================================
   COUCHE DE MARQUE · pâte à dents chiens et chats
   Sections de la marque (chargée après pd-base.css). Couleurs relevées sur l'emballage.
   Marine #1B2A52 · Menthe pâle #C4E4E2 · Menthe moyenne #AAC5C0
   Sarcelle #64B4B8 · Vert #2E7D72 · Blanc #FFFFFF
   Typo : Nunito (auto-hébergée), 900/800 titres, 400/600 texte.
   1rem = 10px (html à 62,5 %). Espacements sur une échelle de 4 px.
   ========================================================================== */

:root {
  --pd-marine: #1B2A52;
  --pd-marine-rgb: 27, 42, 82;
  --pd-menthe: #C4E4E2;
  --pd-menthe-2: #AAC5C0;
  --pd-menthe-clair: #EAF5F4;
  --pd-sarcelle: #64B4B8;
  --pd-vert: #2E7D72;
  --pd-vert-fonce: #1F5C53;
  --pd-blanc: #FFFFFF;
  --pd-or: #F2B233;
  --pd-texte: #1B2A52;
  --pd-texte-doux: rgba(27, 42, 82, 0.76);
  --pd-ligne: rgba(27, 42, 82, 0.12);
  --pd-ligne-2: rgba(27, 42, 82, 0.2);
  --pd-ombre: 0 1px 2px rgba(27, 42, 82, 0.06), 0 14px 34px -16px rgba(27, 42, 82, 0.28);
  --pd-ombre-forte: 0 2px 6px rgba(27, 42, 82, 0.08), 0 28px 60px -24px rgba(27, 42, 82, 0.4);
  --pd-rayon: 1.6rem;
  --pd-rayon-lg: 2.4rem;
  --pd-rayon-xl: 3.2rem;
  --pd-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --font-body-family: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading-family: var(--font-body-family);
}

/* ---------------------------------------------------------------------------
   1. Fondations
   ------------------------------------------------------------------------ */
html, body { overflow-x: clip; }
body {
  font-family: var(--font-body-family);
  color: var(--pd-texte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
  line-height: 1.55;
}
::selection { background: var(--pd-menthe); color: var(--pd-marine); }
h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-heading-family);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: inherit;
}
strong, b { font-weight: 800; }
a { color: inherit; }
*:focus-visible { outline: 3px solid var(--pd-marine); outline-offset: 3px; border-radius: 0.6rem; box-shadow: none; }
.pd-fond--marine *:focus-visible, .pd-fond--vert *:focus-visible { outline-color: var(--pd-menthe); }

.pd-section { padding-top: var(--pd-pad-haut, 64px); padding-bottom: var(--pd-pad-bas, 64px); }
@media screen and (max-width: 749px) {
  .pd-section { padding-top: calc(var(--pd-pad-haut, 64px) * 0.72); padding-bottom: calc(var(--pd-pad-bas, 64px) * 0.72); }
}
.pd-centre { text-align: center; margin-top: 3.6rem; }

/* Fonds */
.pd-fond--blanc { background: var(--pd-blanc); color: var(--pd-texte); }
.pd-fond--menthe-clair { background: var(--pd-menthe-clair); color: var(--pd-texte); }
.pd-fond--menthe { background: var(--pd-menthe); color: var(--pd-texte); }
.pd-fond--marine { background: var(--pd-marine); color: var(--pd-blanc); }
.pd-fond--vert { background: var(--pd-vert); color: var(--pd-blanc); }

/* ---------------------------------------------------------------------------
   2. Typographie
   ------------------------------------------------------------------------ */
.pd-surtitre {
  margin: 0 0 0.8rem;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pd-vert);
}
.pd-fond--marine .pd-surtitre, .pd-fond--vert .pd-surtitre { color: var(--pd-menthe); }
.pd-h1 {
  margin: 0;
  font-size: clamp(3rem, 2.2rem + 2.6vw, 5rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.015em;
}
.pd-h2 {
  margin: 0;
  font-size: clamp(2.6rem, 2rem + 2vw, 4.2rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.pd-h3 { margin: 0; font-size: 1.95rem; font-weight: 800; line-height: 1.25; }
.pd-intro { margin: 1.2rem 0 0; font-size: 1.75rem; line-height: 1.55; color: var(--pd-texte-doux); max-width: 62ch; }
.pd-fond--marine .pd-intro, .pd-fond--vert .pd-intro { color: rgba(255, 255, 255, 0.85); }
.pd-titres { margin-bottom: 3.6rem; }
.pd-titres--centre { text-align: center; max-width: 76rem; margin-left: auto; margin-right: auto; }
.pd-titres--centre .pd-intro { margin-left: auto; margin-right: auto; }
.pd-rte, .pd-rte p { font-size: 1.65rem; line-height: 1.65; }
.pd-rte p { margin: 0 0 1.2rem; }
.pd-rte p:last-child { margin-bottom: 0; }
.pd-lien-fleche {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 800; font-size: 1.6rem; text-decoration: none;
  border-bottom: 2px solid var(--pd-sarcelle); padding-bottom: 0.4rem;
}
.pd-lien-fleche:hover .pd-icone { transform: translateX(3px); }
.pd-lien-fleche .pd-icone { transition: transform 0.2s var(--pd-ease); }
.pd-icone { flex-shrink: 0; display: inline-block; vertical-align: middle; }

/* ---------------------------------------------------------------------------
   3. Boutons
   ------------------------------------------------------------------------ */
.pd-bouton {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem;
  min-height: 5.2rem; padding: 0 2.8rem;
  border: 0; border-radius: 1.4rem;
  font-family: var(--font-body-family); font-size: 1.7rem; font-weight: 800; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: transform 0.15s var(--pd-ease), box-shadow 0.15s var(--pd-ease), background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.pd-bouton--achat { background: var(--pd-vert); color: var(--pd-blanc); box-shadow: 0 4px 0 var(--pd-vert-fonce); }
.pd-bouton--achat:hover { background: #2A7268; transform: translateY(-1px); box-shadow: 0 5px 0 var(--pd-vert-fonce); }
.pd-bouton--achat:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pd-vert-fonce); }
.pd-bouton--secondaire { background: var(--pd-marine); color: var(--pd-blanc); box-shadow: 0 4px 0 #0F1934; }
.pd-bouton--secondaire:hover { transform: translateY(-1px); }
.pd-bouton--secondaire:active { transform: translateY(3px); box-shadow: 0 1px 0 #0F1934; }
.pd-bouton--petit { min-height: 4rem; padding: 0 1.6rem; font-size: 1.4rem; border-radius: 1.1rem; background: var(--pd-marine); color: #fff; }
.pd-bouton--grand { min-height: 6rem; padding: 0 3.2rem; font-size: 1.85rem; }
.pd-bouton[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.pd-bouton__texte { display: inline-flex; align-items: center; gap: 0.8rem; transition: opacity 0.15s; }
.pd-bouton__sep { opacity: 0.7; }
.pd-bouton__charge {
  position: absolute; left: 50%; top: 50%; width: 2.2rem; height: 2.2rem; margin: -1.2rem 0 0 -1.2rem;
  border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%;
  opacity: 0; animation: pd-tourne 0.7s linear infinite;
}
.pd-bouton.est-en-cours .pd-bouton__texte { opacity: 0; }
.pd-bouton.est-en-cours .pd-bouton__charge { opacity: 1; }
@keyframes pd-tourne { to { transform: rotate(360deg); } }
.pd-erreur { margin: 0.8rem 0 0; color: #B42318; font-size: 1.4rem; font-weight: 700; }

/* ---------------------------------------------------------------------------
   4. Bandeau mince
   ------------------------------------------------------------------------ */
.pd-bandeau { font-size: 1.35rem; font-weight: 700; }
.pd-bandeau__inner { position: relative; display: flex; justify-content: center; min-height: 3.6rem; }
.pd-bandeau__liste { position: relative; width: 100%; min-height: 3.6rem; }
.pd-bandeau__message {
  display: flex; align-items: center; justify-content: center; gap: 0.8rem; min-height: 3.6rem; padding: 0.4rem 0; text-align: center; margin: 0;
}
.pd-bandeau__liste .pd-bandeau__message { position: absolute; inset: 0; opacity: 0; transform: translateY(0.6rem); transition: opacity 0.4s, transform 0.4s var(--pd-ease); pointer-events: none; }
.pd-bandeau__liste .pd-bandeau__message.est-actif { opacity: 1; transform: none; pointer-events: auto; }
.pd-bandeau__lien { display: inline-flex; align-items: center; gap: 0.8rem; color: inherit; text-decoration: none; }
.pd-bandeau__lien:hover span { text-decoration: underline; }
.pd-bandeau .pd-icone { color: var(--pd-menthe); }
.pd-fond--menthe.pd-bandeau .pd-icone { color: var(--pd-vert); }
.pd-bandeau__court { display: none; }
@media screen and (max-width: 749px) {
  .pd-bandeau__long { display: none; }
  .pd-bandeau__court { display: inline; }
  .pd-bandeau { font-size: 1.3rem; }
}

/* ---------------------------------------------------------------------------
   5. Page produit : grille, galerie
   ------------------------------------------------------------------------ */
.pd-produit__grille { display: grid; gap: 2.4rem; }
@media screen and (min-width: 990px) {
  .pd-produit__grille { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); gap: 5.6rem; align-items: start; }
  .pd-galerie { position: sticky; top: 2.4rem; }
}
.pd-galerie { min-width: 0; }
.pd-galerie__scene { position: relative; }
.pd-galerie__piste {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: var(--pd-rayon-lg); background: var(--pd-blanc);
  border: 1px solid var(--pd-ligne);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.pd-galerie__piste::-webkit-scrollbar { display: none; }
.pd-galerie__slide {
  flex: 0 0 100%; aspect-ratio: 1 / 1; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--pd-blanc);
}
.pd-galerie__img { width: 100%; height: 100%; object-fit: contain; }
.pd-galerie__video, .pd-galerie__slide video { width: 100%; height: 100%; object-fit: cover; background: var(--pd-marine); }
.pd-galerie__externe, .pd-galerie__externe iframe { width: 100%; height: 100%; border: 0; }
.pd-galerie__slide--vide {
  flex-direction: column; gap: 1.2rem; padding: 3.2rem; text-align: center;
  background: repeating-linear-gradient(135deg, var(--pd-menthe-clair) 0 14px, #F4FAF9 14px 28px);
  color: var(--pd-marine); font-size: 1.5rem;
}
.pd-galerie__slide--vide p { margin: 0; max-width: 32ch; }
.pd-galerie__placeholder { width: 70%; height: auto; fill: var(--pd-menthe-2); }
.pd-galerie__nav {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.4rem;
  background: rgba(255, 255, 255, 0.92); border-radius: 99px; padding: 0.4rem;
  box-shadow: var(--pd-ombre);
}
.pd-galerie__fleche {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--pd-marine); color: #fff;
}
.pd-galerie__fleche--prec .pd-icone { transform: rotate(180deg); }
.pd-galerie__compteur { font-size: 1.3rem; font-weight: 800; padding: 0 0.4rem; min-width: 4.4rem; text-align: center; }
.pd-galerie__vignettes {
  display: flex; gap: 0.8rem; margin-top: 1.2rem; overflow-x: auto; scrollbar-width: none; padding: 0.4rem;
}
.pd-galerie__vignettes::-webkit-scrollbar { display: none; }
.pd-galerie__vignette {
  position: relative; flex: 0 0 6.4rem; height: 6.4rem; padding: 0; border-radius: 1.2rem; overflow: hidden;
  border: 2px solid var(--pd-ligne); background: #fff; cursor: pointer;
}
.pd-galerie__vignette img { width: 100%; height: 100%; object-fit: contain; }
.pd-galerie__vignette.est-actif { border-color: var(--pd-marine); box-shadow: 0 0 0 1px var(--pd-marine); }
.pd-galerie__vignette--vide { font-size: 1.1rem; font-weight: 800; color: var(--pd-marine); background: var(--pd-menthe-clair); }
.pd-galerie__jouer {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(27, 42, 82, 0.45); font-size: 1.6rem;
}

/* ---------------------------------------------------------------------------
   6. Bloc d'achat
   ------------------------------------------------------------------------ */
.pd-achat { min-width: 0; }
.pd-form { display: flex; flex-direction: column; gap: 1.6rem; }
.pd-achat__titre .pd-surtitre { margin-bottom: 0.8rem; }
.pd-achat .pd-h1 { font-size: clamp(2.8rem, 2.2rem + 1.5vw, 4rem); }
.pd-note { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 0.8rem; font-size: 1.4rem; font-weight: 700; text-decoration: none; }
.pd-achat__sous-titre { margin: -0.4rem 0 0; font-size: 1.8rem; font-weight: 600; line-height: 1.45; color: var(--pd-texte-doux); }

.pd-pastilles { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.pd-pastille {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 1.2rem 0.4rem 0.8rem; border-radius: 99px;
  background: var(--pd-menthe-clair); border: 1px solid rgba(46, 125, 114, 0.18);
  font-size: 1.35rem; font-weight: 800;
}
.pd-pastille .pd-icone { color: var(--pd-vert); }

.pd-puces { display: grid; gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.pd-puce { display: flex; gap: 1.2rem; align-items: flex-start; font-size: 1.55rem; line-height: 1.5; }
.pd-puce__check {
  flex: 0 0 2.4rem; height: 2.4rem; margin-top: 0.4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pd-vert); color: #fff;
}
.pd-puce strong { font-weight: 800; }

/* Formats en cartes */
.pd-offres { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.pd-offres__legende { padding: 0; margin-bottom: 0.8rem; font-size: 1.5rem; font-weight: 800; }
.pd-offre {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.2rem;
  padding: 1.6rem 1.6rem; border: 2px solid var(--pd-ligne-2); border-radius: 1.8rem;
  background: var(--pd-blanc); cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s, transform 0.15s var(--pd-ease);
}
.pd-offre:hover { border-color: var(--pd-sarcelle); }
.pd-offre__radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pd-offre:has(.pd-offre__radio:checked) { border-color: var(--pd-marine); background: #F3FAF9; box-shadow: 0 0 0 1px var(--pd-marine), var(--pd-ombre); }
.pd-offre:has(.pd-offre__radio:focus-visible) { outline: 3px solid var(--pd-sarcelle); outline-offset: 3px; }
.pd-offre__rond {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 2px solid var(--pd-ligne-2); background: #fff; transition: all 0.15s;
}
.pd-offre:has(.pd-offre__radio:checked) .pd-offre__rond { border-color: var(--pd-marine); background: var(--pd-marine); box-shadow: inset 0 0 0 0.45rem #fff; }
.pd-offre__infos { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.pd-offre__titre { font-size: 1.8rem; font-weight: 900; line-height: 1.2; }
.pd-offre__detail { font-size: 1.35rem; color: var(--pd-texte-doux); font-weight: 600; }
.pd-offre__epuise { font-size: 1.25rem; font-weight: 800; color: #B42318; }
.pd-offre__prix { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.15; }
.pd-offre__actuel { font-size: 2.1rem; font-weight: 900; }
.pd-offre__barre { font-size: 1.4rem; color: var(--pd-texte-doux); text-decoration-thickness: 2px; }
.pd-offre__eco { margin-top: 0.4rem; font-size: 1.2rem; font-weight: 800; color: var(--pd-vert); white-space: nowrap; }
.pd-offre__badge {
  position: absolute; top: -1.1rem; right: 1.4rem;
  padding: 0.4rem 0.8rem; border-radius: 99px;
  background: var(--pd-marine); color: #fff;
  font-size: 1.1rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.pd-offre:nth-of-type(2) .pd-offre__badge { background: var(--pd-vert); }
.pd-offre--epuise { opacity: 0.55; cursor: not-allowed; }
.pd-achat__mention { display: flex; gap: 0.4rem; align-items: flex-start; margin: 0.8rem 0 0; font-size: 1.3rem; color: var(--pd-texte-doux); }
.pd-achat__mention .pd-icone { color: var(--pd-vert); margin-top: 0.4rem; }

/* Complète ton kit */
.pd-kit {
  position: relative; display: flex; align-items: center; gap: 1.2rem;
  padding: 1.2rem 1.2rem; border: 2px dashed var(--pd-menthe-2); border-radius: var(--pd-rayon);
  background: var(--pd-menthe-clair); cursor: pointer; transition: border-color 0.15s, background-color 0.15s;
}
.pd-kit:hover { border-color: var(--pd-sarcelle); }
.pd-kit__case { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pd-kit__boite {
  flex: 0 0 2.6rem; height: 2.6rem; border-radius: 0.8rem; border: 2px solid var(--pd-marine);
  display: inline-flex; align-items: center; justify-content: center; background: #fff; color: transparent; transition: all 0.15s;
}
.pd-kit:has(.pd-kit__case:checked) { border-style: solid; border-color: var(--pd-vert); background: #F3FAF9; }
.pd-kit:has(.pd-kit__case:checked) .pd-kit__boite { background: var(--pd-vert); border-color: var(--pd-vert); color: #fff; }
.pd-kit:has(.pd-kit__case:focus-visible) { outline: 3px solid var(--pd-sarcelle); outline-offset: 3px; }
.pd-kit__img { flex: 0 0 5.6rem; width: 5.6rem; height: 5.6rem; border-radius: 1.2rem; object-fit: cover; background: #fff; }
.pd-kit__img--icone { display: inline-flex; align-items: center; justify-content: center; color: var(--pd-vert); }
.pd-kit__texte { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.pd-kit__titre { font-size: 1.15rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pd-vert); }
.pd-kit__nom { font-size: 1.5rem; font-weight: 700; }
.pd-kit__aide { font-size: 1.3rem; color: var(--pd-texte-doux); }

.pd-achat__bouton .pd-bouton { width: 100%; min-height: 6rem; font-size: 1.9rem; }
.pd-achat__rapide { margin-top: 0.8rem; }

.pd-garanties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin: 0; padding: 0; list-style: none; }
.pd-garantie {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center;
  font-size: 1.25rem; font-weight: 800; line-height: 1.3;
}
.pd-garantie .pd-icone { color: var(--pd-vert); }
.pd-garanties--compact { margin-top: 1.6rem; }

.pd-livraison {
  display: flex; align-items: flex-start; gap: 1.2rem;
  padding: 1.2rem 1.6rem; border-radius: var(--pd-rayon); background: var(--pd-menthe-clair);
}
.pd-livraison .pd-icone { color: var(--pd-vert); margin-top: 0.4rem; }
.pd-livraison p { margin: 0; font-size: 1.45rem; line-height: 1.45; }
.pd-livraison__dates { display: block; font-weight: 600; color: var(--pd-texte-doux); }
.pd-livraison__dates:empty { display: none; }

.pd-achat__description { border-top: 2px solid var(--pd-ligne); padding-top: 1.2rem; }
.pd-achat__description summary { cursor: pointer; font-weight: 800; font-size: 1.6rem; }
.pd-achat__description .rte { margin-top: 1.2rem; font-size: 1.5rem; }

.pd-note-editeur {
  margin: 0 0 1.6rem; padding: 1.2rem 1.2rem; border-radius: 1.2rem;
  background: #FFF8DB; border: 1px dashed #D9A800; color: #5C4500; font-size: 1.35rem; line-height: 1.45;
}
.pd-etiquette-editeur {
  display: inline-block; padding: 0.4rem 0.8rem; border-radius: 99px; vertical-align: middle;
  background: #FFE9A3; color: #5C4500; font-size: 1.1rem; font-weight: 900; letter-spacing: 0.03em;
}

/* ---------------------------------------------------------------------------
   7. Barre d'achat collante
   ------------------------------------------------------------------------ */
.pd-collante {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 0.8rem 0 calc(0.8rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.97); border-top: 1px solid var(--pd-ligne);
  box-shadow: 0 -12px 30px -18px rgba(27, 42, 82, 0.4);
  transform: translateY(110%); transition: transform 0.28s var(--pd-ease); visibility: hidden;
}
.pd-collante.est-visible { transform: none; visibility: visible; }
.pd-collante__inner { display: flex; align-items: center; gap: 1.2rem; }
.pd-collante__img { width: 4.8rem; height: 4.8rem; border-radius: 1rem; object-fit: contain; background: #fff; border: 1px solid var(--pd-ligne); }
.pd-collante__infos { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pd-collante__titre { font-size: 1.5rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-collante__format { font-size: 1.3rem; color: var(--pd-texte-doux); font-weight: 600; }
.pd-collante__bouton { margin-left: auto; min-height: 4.8rem; padding: 0 2.4rem; font-size: 1.6rem; white-space: nowrap; }
body.pd-collante-active { padding-bottom: 7.6rem; }

/* ---------------------------------------------------------------------------
   8. Comment ça marche
   ------------------------------------------------------------------------ */
.pd-etapes__liste { display: grid; gap: 1.6rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.pd-etape {
  display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); column-gap: 1.6rem; align-items: start;
  padding: 2rem; border-radius: var(--pd-rayon-lg); background: var(--pd-blanc); box-shadow: var(--pd-ombre);
}
.pd-etape .pd-h3, .pd-etape p { grid-column: 2; }
.pd-etape__visuel { grid-row: 1 / span 2; position: relative; width: 7.2rem; height: 7.2rem; }
.pd-etape__icone {
  width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--pd-menthe); color: var(--pd-marine);
}
.pd-etape__icone .pd-icone { width: 3.4rem; height: 3.4rem; }
.pd-etape__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pd-etape__num {
  position: absolute; top: -0.4rem; right: -0.4rem; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pd-vert); color: #fff; font-size: 1.4rem; font-weight: 900; border: 3px solid #fff;
}
.pd-etape p { margin: 0.4rem 0 0; font-size: 1.55rem; line-height: 1.55; color: var(--pd-texte-doux); }
@media screen and (min-width: 750px) {
  .pd-etapes__liste { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 2.4rem; }
  .pd-etape { grid-template-columns: 1fr; text-align: center; padding: 3.2rem 2.8rem; justify-items: center; }
  .pd-etape .pd-h3, .pd-etape p { grid-column: 1; }
  .pd-etape__visuel { grid-row: auto; width: 9.6rem; height: 9.6rem; margin-bottom: 2rem; }
  .pd-etape__icone .pd-icone { width: 4.2rem; height: 4.2rem; }
}
.pd-fond--menthe .pd-etape__icone { background: var(--pd-menthe-clair); }
.pd-fond--marine .pd-etape { color: var(--pd-texte); }

/* ---------------------------------------------------------------------------
   9. Problème et solution
   ------------------------------------------------------------------------ */
.pd-probleme__grille { display: grid; gap: 3.2rem; }
@media screen and (min-width: 990px) {
  .pd-probleme__grille { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 6.4rem; align-items: center; }
}
.pd-probleme__texte .pd-rte { margin-top: 1.6rem; color: var(--pd-texte-doux); }
.pd-fond--marine .pd-probleme__texte .pd-rte { color: rgba(255, 255, 255, 0.86); }
.pd-faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.pd-fait { padding: 2.4rem 2rem; border-radius: var(--pd-rayon-lg); background: var(--pd-menthe-clair); }
.pd-fond--menthe-clair .pd-fait { background: #fff; }
.pd-fond--marine .pd-fait { background: rgba(255, 255, 255, 0.08); color: #fff; }
.pd-fait__chiffre { margin: 0; font-size: clamp(3.2rem, 2.6rem + 1.6vw, 4.6rem); font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: var(--pd-marine); }
.pd-fond--marine .pd-fait__chiffre { color: var(--pd-menthe); }
.pd-fait__texte { margin: 0.8rem 0 0; font-size: 1.45rem; line-height: 1.45; font-weight: 600; }
.pd-fait__source { margin: 0.8rem 0 0; font-size: 1.15rem; opacity: 0.72; }
.pd-fait__source a { text-underline-offset: 2px; }
.pd-solution {
  display: grid; gap: 1.6rem; margin-top: 4.8rem; padding: 2.8rem;
  border-radius: var(--pd-rayon-xl); background: var(--pd-marine); color: #fff;
}
.pd-solution__icone { width: 6rem; height: 6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pd-menthe); color: var(--pd-marine); }
.pd-solution .pd-rte { margin-top: 0.8rem; color: rgba(255, 255, 255, 0.86); }
.pd-solution__bouton { justify-self: start; }
@media screen and (min-width: 990px) {
  .pd-solution { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 3.2rem; padding: 3.6rem 4rem; }
}

/* ---------------------------------------------------------------------------
   10. Comparatif
   ------------------------------------------------------------------------ */
.pd-comparatif__cadre { max-width: 116rem; margin: 0 auto; }
.pd-comparatif__glisse { display: none; align-items: center; gap: 0.4rem; justify-content: flex-end; margin: 0 0 0.8rem; font-size: 1.25rem; font-weight: 800; color: var(--pd-vert); }
.pd-comparatif__defile {
  overflow-x: auto; border-radius: var(--pd-rayon-lg); background: #fff; border: 1px solid var(--pd-ligne); box-shadow: var(--pd-ombre);
  -webkit-overflow-scrolling: touch;
}
.pd-comparatif__table { width: 100%; min-width: 88rem; border-collapse: separate; border-spacing: 0; font-size: 1.4rem; }
.pd-comparatif__table th, .pd-comparatif__table td { padding: 1.6rem 1.2rem; border-bottom: 1px solid var(--pd-ligne); vertical-align: middle; }
.pd-comparatif__table tbody tr:last-child th, .pd-comparatif__table tbody tr:last-child td { border-bottom: 0; }
.pd-comparatif__table thead th { font-size: 1.45rem; font-weight: 900; text-align: center; line-height: 1.25; }
.pd-comparatif__table thead th.pd-comparatif__nous { background: var(--pd-marine); color: #fff; border-radius: 1.6rem 1.6rem 0 0; }
.pd-comparatif__table tbody th {
  position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 800; background: #fff; width: 20%;
  box-shadow: 1px 0 0 var(--pd-ligne);
}
.pd-comparatif__table td.pd-comparatif__nous { background: #F0F8F7; font-weight: 700; }
.pd-cellule { text-align: center; }
.pd-cellule__icone {
  display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; margin-bottom: 0.4rem;
}
.pd-cellule--oui .pd-cellule__icone { background: var(--pd-vert); color: #fff; }
.pd-cellule--partiel .pd-cellule__icone { background: var(--pd-menthe-2); color: var(--pd-marine); }
.pd-cellule--non .pd-cellule__icone { background: #E7EAF1; color: rgba(27, 42, 82, 0.7); }
.pd-cellule__texte { display: block; line-height: 1.35; }
.pd-comparatif__note { margin: 1.6rem 0 0; text-align: center; font-size: 1.35rem; color: var(--pd-texte-doux); }
@media screen and (max-width: 989px) {
  .pd-comparatif__glisse { display: flex; }
  .pd-comparatif__table { min-width: 76rem; font-size: 1.3rem; }
  .pd-comparatif__table tbody th { width: 12rem; min-width: 12rem; }
}

/* ---------------------------------------------------------------------------
   11. Ingrédients
   ------------------------------------------------------------------------ */
.pd-ingredients__grille { display: grid; gap: 3.2rem; }
@media screen and (min-width: 990px) {
  .pd-ingredients__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 6.4rem; align-items: center; }
}
.pd-ingredients__visuel {
  display: flex; align-items: center; justify-content: center; padding: 3.2rem;
  border-radius: var(--pd-rayon-xl); background: var(--pd-menthe); aspect-ratio: 1 / 1; max-height: 56rem;
}
.pd-ingredients__img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--pd-rayon-lg); background: #fff; }
.pd-ingredients__icone { color: var(--pd-marine); }
.pd-ingredients__liste { margin: 0; padding: 0; list-style: none; }
.pd-ingredient { display: flex; gap: 1.2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--pd-ligne); }
.pd-ingredient:first-child { padding-top: 0; }
.pd-ingredient__icone {
  flex: 0 0 4.6rem; height: 4.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--pd-menthe-clair); color: var(--pd-vert);
}
.pd-ingredient__nom { margin: 0; font-size: 1.75rem; font-weight: 800; }
.pd-ingredient__role { margin: 0.4rem 0 0; font-size: 1.5rem; color: var(--pd-texte-doux); }
.pd-ingredient--a-confirmer { opacity: 0.7; }
.pd-ingredients__note { margin: 1.6rem 0 0; font-size: 1.4rem; font-weight: 700; }

/* ---------------------------------------------------------------------------
   12. Mode d'emploi
   ------------------------------------------------------------------------ */
.pd-mode__cartes { display: grid; gap: 1.6rem; }
@media screen and (min-width: 990px) { .pd-mode__cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; } }
.pd-mode__carte { padding: 2.4rem 2.4rem; border-radius: var(--pd-rayon-lg); background: #fff; box-shadow: var(--pd-ombre); }
.pd-mode__carte:nth-child(3) { background: var(--pd-marine); color: #fff; }
.pd-mode__tete { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.6rem; }
.pd-mode__icone { flex: 0 0 5.2rem; height: 5.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pd-menthe); color: var(--pd-marine); }
.pd-mode__corps ol, .pd-mode__corps ul { margin: 0; padding: 0; list-style: none; counter-reset: pd-etape; display: grid; gap: 1.2rem; }
.pd-mode__corps li { position: relative; padding-left: 3.6rem; font-size: 1.5rem; line-height: 1.5; }
.pd-mode__corps ol > li { counter-increment: pd-etape; }
.pd-mode__corps ol > li::before {
  content: counter(pd-etape); position: absolute; left: 0; top: 0.05rem;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--pd-marine); color: #fff; font-size: 1.25rem; font-weight: 900;
}
.pd-mode__corps ul > li::before {
  content: ''; position: absolute; left: 0.4rem; top: 0.45rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--pd-menthe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2A52' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 1rem no-repeat;
}
.pd-mode__carte:nth-child(3) ol > li::before { background: var(--pd-menthe); color: var(--pd-marine); }
.pd-mode__carte:nth-child(3) .pd-mode__icone { background: var(--pd-vert); color: #fff; }
.pd-mode__avertissement {
  display: flex; align-items: flex-start; justify-content: center; gap: 0.8rem; max-width: 72rem;
  margin: 2.8rem auto 0; font-size: 1.4rem; font-weight: 700; text-align: left;
}
.pd-mode__avertissement .pd-icone { color: var(--pd-vert); margin-top: 0.4rem; }

/* ---------------------------------------------------------------------------
   13. Avis et étoiles
   ------------------------------------------------------------------------ */
.pd-etoiles { position: relative; display: inline-block; font-size: 1.7rem; line-height: 1; letter-spacing: 0.08em; }
.pd-etoiles__fond { color: rgba(27, 42, 82, 0.18); }
.pd-etoiles__plein { position: absolute; left: 0; top: 0; width: var(--pd-note, 100%); overflow: hidden; white-space: nowrap; color: var(--pd-or); }
.pd-avis__resume { display: inline-flex; align-items: center; gap: 0.8rem; margin: 1.2rem 0 0; font-size: 1.5rem; }
.pd-avis__grille { display: grid; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
@media screen and (min-width: 750px) { .pd-avis__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (min-width: 990px) { .pd-avis__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; } }
.pd-avis-carte { padding: 2.4rem; border-radius: var(--pd-rayon-lg); background: var(--pd-menthe-clair); display: flex; flex-direction: column; gap: 0.8rem; }
.pd-fond--menthe-clair .pd-avis-carte { background: #fff; }
.pd-avis-carte__haut { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.pd-avis-carte__verifie { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1.2rem; font-weight: 800; color: var(--pd-vert); }
.pd-avis-carte__titre { margin: 0; font-size: 1.7rem; font-weight: 800; }
.pd-avis-carte__texte { margin: 0; font-size: 1.5rem; line-height: 1.55; }
.pd-avis-carte__photo { width: 100%; height: auto; max-height: 26rem; object-fit: cover; border-radius: 1.4rem; }
.pd-avis-carte__auteur { margin: auto 0 0; font-size: 1.35rem; color: var(--pd-texte-doux); }

/* ---------------------------------------------------------------------------
   14. FAQ
   ------------------------------------------------------------------------ */
.pd-faq__grille { display: grid; gap: 2.4rem; }
@media screen and (min-width: 990px) {
  .pd-faq__grille { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 6.4rem; align-items: start; }
  .pd-faq__grille > .pd-titres { position: sticky; top: 3.2rem; }
}
.pd-faq .pd-titres { margin-bottom: 0; }
.pd-faq .pd-lien-fleche { margin-top: 2rem; }
.pd-question { border-bottom: 2px solid var(--pd-ligne); }
.pd-question:first-child { border-top: 2px solid var(--pd-ligne); }
.pd-question__titre {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  padding: 2rem 0; cursor: pointer; list-style: none; font-size: 1.7rem; font-weight: 800; line-height: 1.35;
}
.pd-question__titre::-webkit-details-marker { display: none; }
.pd-question__plus { position: relative; flex: 0 0 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--pd-menthe-clair); transition: background-color 0.2s; }
.pd-question__plus::before, .pd-question__plus::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 1.4rem; height: 2.5px; margin: -1.25px 0 0 -0.8rem;
  background: var(--pd-marine); border-radius: 2px; transition: transform 0.25s var(--pd-ease);
}
.pd-question__plus::after { transform: rotate(90deg); }
.pd-question[open] .pd-question__plus { background: var(--pd-menthe); }
.pd-question[open] .pd-question__plus::after { transform: rotate(0deg); }
.pd-question__reponse { padding: 0 4.4rem 2.4rem 0; font-size: 1.55rem; line-height: 1.65; color: var(--pd-texte-doux); }
.pd-question__reponse p { margin: 0 0 0.8rem; }
.pd-question__reponse p:last-child { margin-bottom: 0; }
.pd-question__reponse a { color: var(--pd-vert); font-weight: 700; }

/* ---------------------------------------------------------------------------
   15. Rappel de l'offre
   ------------------------------------------------------------------------ */
.pd-offre__carte {
  display: grid; gap: 2.4rem; padding: 2rem; border-radius: var(--pd-rayon-xl); background: #fff; box-shadow: var(--pd-ombre-forte);
  max-width: 112rem; margin: 0 auto; color: var(--pd-texte);
}
@media screen and (min-width: 990px) {
  .pd-offre__carte { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 4.8rem; padding: 3.2rem; align-items: center; }
}
.pd-offre__visuel { border-radius: var(--pd-rayon-lg); background: var(--pd-menthe-clair); overflow: hidden; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.pd-offre__img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
@media screen and (max-width: 749px) { .pd-offre__visuel { aspect-ratio: 4 / 3; } }
.pd-offre__achat .pd-intro { margin-bottom: 2.4rem; font-size: 1.6rem; }
.pd-offre__achat .pd-form { gap: 1.6rem; }
.pd-offre__achat .pd-bouton--achat { width: 100%; min-height: 5.8rem; font-size: 1.85rem; }

/* ---------------------------------------------------------------------------
   16. Héros (accueil)
   ------------------------------------------------------------------------ */
.pd-heros { padding: 3.2rem 0 4.4rem; overflow: hidden; }
.pd-heros__grille { display: grid; gap: 3.2rem; align-items: center; }
@media screen and (min-width: 990px) {
  .pd-heros { padding: 6.4rem 0 7.2rem; }
  .pd-heros__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 4.8rem; }
}
.pd-heros__titre { font-size: clamp(3.4rem, 2.3rem + 3.2vw, 6rem); text-wrap: balance; }
.pd-heros__intro { margin: 1.6rem 0 0; font-size: 1.85rem; line-height: 1.5; font-weight: 600; color: var(--pd-texte-doux); max-width: 50ch; }
.pd-heros__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem; margin-top: 2.8rem; }
.pd-heros__confiance { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; margin: 2.8rem 0 0; padding: 0; list-style: none; }
.pd-heros__confiance li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1.4rem; font-weight: 800; }
.pd-heros__confiance .pd-icone { color: var(--pd-vert); }
.pd-heros__visuel { position: relative; display: flex; justify-content: center; }
.pd-heros__rond { position: absolute; border-radius: 50%; pointer-events: none; }
.pd-heros__rond--1 { width: 92%; aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255, 255, 255, 0.5); }
.pd-heros__rond--2 { width: 26%; aspect-ratio: 1; bottom: -4%; right: 2%; background: rgba(100, 180, 184, 0.35); }
.pd-heros__img {
  position: relative; z-index: 1; width: min(100%, 52rem); height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  border-radius: var(--pd-rayon-xl); background: #fff; box-shadow: var(--pd-ombre-forte);
}
.pd-heros__pastille {
  position: absolute; z-index: 2; left: 4%; bottom: 6%;
  display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1.6rem; border-radius: 99px;
  background: var(--pd-marine); color: #fff; font-size: 1.4rem; font-weight: 800; box-shadow: var(--pd-ombre);
}
.pd-heros__pastille .pd-icone { color: var(--pd-menthe); }
@media screen and (max-width: 749px) {
  .pd-heros__img { width: min(100%, 34rem); }
  .pd-heros__actions .pd-bouton { width: 100%; }
}

/* ---------------------------------------------------------------------------
   17. Bénéfices
   ------------------------------------------------------------------------ */
.pd-benefices__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
@media screen and (min-width: 990px) {
  .pd-benefices__grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pd-benefices__grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pd-benefices__grille { gap: 2.4rem; }
}
.pd-benefice { padding: 2.4rem 1.6rem; border-radius: var(--pd-rayon-lg); background: var(--pd-menthe-clair); }
.pd-fond--menthe-clair .pd-benefice, .pd-fond--menthe .pd-benefice { background: #fff; }
.pd-fond--marine .pd-benefice { background: rgba(255, 255, 255, 0.07); }
.pd-benefice__icone { width: 5.2rem; height: 5.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pd-menthe); color: var(--pd-marine); margin-bottom: 1.2rem; }
.pd-benefice .pd-h3 { font-size: 1.75rem; }
.pd-benefice p { margin: 0.4rem 0 0; font-size: 1.45rem; line-height: 1.5; color: var(--pd-texte-doux); }
.pd-fond--marine .pd-benefice p { color: rgba(255, 255, 255, 0.8); }

/* ---------------------------------------------------------------------------
   18. Article (présell)
   ------------------------------------------------------------------------ */
.pd-article__tete { padding: 4rem 0 3.2rem; background: var(--pd-menthe-clair); }
.pd-article__colonne { max-width: 72rem; margin: 0 auto; padding: 0 2rem; }
.pd-article__titre { font-size: clamp(3.2rem, 2.4rem + 2.6vw, 5.2rem); text-wrap: balance; }
.pd-article__chapeau { margin: 1.6rem 0 0; font-size: 2rem; line-height: 1.5; font-weight: 600; color: var(--pd-texte-doux); }
.pd-article__meta { margin: 1.6rem 0 0; font-size: 1.35rem; font-weight: 700; color: var(--pd-texte-doux); }
.pd-article__image-une { max-width: 96rem; margin: 3.2rem auto 0; padding: 0 2rem; }
.pd-article__image-une img { width: 100%; height: auto; border-radius: var(--pd-rayon-lg); }
.pd-article__corps { padding-top: 4rem; padding-bottom: 6.4rem; }
.pd-article__texte, .pd-article__texte p, .pd-article__texte li { font-size: 1.8rem; line-height: 1.72; }
.pd-article__texte p { margin: 0 0 1.6rem; }
.pd-article__texte a { color: var(--pd-vert); font-weight: 700; }
.pd-article__intertitre { margin: 4.4rem 0 1.6rem; font-size: clamp(2.4rem, 2rem + 1.2vw, 3.2rem); }
.pd-article__fait {
  display: flex; gap: 2rem; align-items: center; margin: 2.8rem 0; padding: 2.4rem; border-radius: var(--pd-rayon-lg); background: var(--pd-menthe);
}
.pd-article__fait .pd-fait__chiffre { flex: 0 0 auto; min-width: 10rem; }
.pd-article__citation { margin: 3.2rem 0; padding: 0.4rem 0 0.4rem 2.4rem; border-left: 5px solid var(--pd-sarcelle); }
.pd-article__citation blockquote { margin: 0; font-size: 2.1rem; line-height: 1.45; font-weight: 800; }
.pd-article__citation figcaption { margin-top: 0.8rem; font-size: 1.35rem; color: var(--pd-texte-doux); }
.pd-article__figure { margin: 3.2rem 0; }
.pd-article__figure img { width: 100%; height: auto; border-radius: var(--pd-rayon-lg); }
.pd-article__figure figcaption { margin-top: 0.8rem; font-size: 1.3rem; color: var(--pd-texte-doux); }
.pd-article__produit {
  display: grid; gap: 2rem; margin: 3.6rem 0; padding: 2.4rem; border-radius: var(--pd-rayon-xl);
  background: #fff; border: 2px solid var(--pd-menthe-2); box-shadow: var(--pd-ombre);
}
@media screen and (min-width: 750px) { .pd-article__produit { grid-template-columns: 22rem minmax(0, 1fr); align-items: center; } }
.pd-article__produit-img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: var(--pd-rayon-lg); background: var(--pd-menthe-clair); }
.pd-article__produit .rte p { margin: 0.8rem 0 1.6rem; font-size: 1.55rem; }
.pd-article__produit-mention { margin: 0.8rem 0 0; font-size: 1.3rem; font-weight: 700; color: var(--pd-texte-doux); }
.pd-article__sources { margin-top: 4.8rem; padding-top: 2.4rem; border-top: 2px solid var(--pd-ligne); font-size: 1.35rem; color: var(--pd-texte-doux); }
.pd-article__sources ul { padding-left: 1.6rem; }
.pd-article__sources li { margin-bottom: 0.4rem; word-break: break-word; }
@media screen and (max-width: 749px) {
  .pd-article__fait { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .pd-article__produit .pd-bouton { width: 100%; }
}

/* ---------------------------------------------------------------------------
   19. Cartes d'information
   ------------------------------------------------------------------------ */
.pd-infos__grille { display: grid; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
@media screen and (min-width: 750px) { .pd-infos__grille { grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 2.4rem; } }
.pd-info { padding: 2.4rem 2.4rem; border-radius: var(--pd-rayon-lg); background: #fff; box-shadow: var(--pd-ombre); }
.pd-info__icone { width: 5.2rem; height: 5.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pd-menthe); color: var(--pd-marine); margin-bottom: 1.2rem; }
.pd-info .rte { margin-top: 0.8rem; font-size: 1.5rem; line-height: 1.6; color: var(--pd-texte-doux); }
.pd-info .rte p { margin: 0 0 0.8rem; }

/* ---------------------------------------------------------------------------
   20. Panier tiroir
   ------------------------------------------------------------------------ */
.pd-panier-confiance {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.6rem;
  margin: 0 0 0.8rem; padding: 0.8rem 1.2rem; border-radius: 1.2rem;
  background: var(--pd-menthe-clair); font-size: 1.3rem; font-weight: 800; color: var(--pd-marine);
}
.pd-panier-confiance span { display: inline-flex; align-items: center; gap: 0.4rem; }
.pd-panier-confiance .pd-icone { color: var(--pd-vert); }
.pd-panier-suggestion {
  display: flex; align-items: center; gap: 1.2rem; margin: 0 0 1.2rem; padding: 0.8rem 1.2rem;
  border: 2px dashed var(--pd-menthe-2); border-radius: 1.4rem; background: #fff; text-align: left;
}
.pd-panier-suggestion__img { width: 5.2rem; height: 5.2rem; border-radius: 1rem; object-fit: cover; flex: 0 0 5.2rem; }
.pd-panier-suggestion__img--icone { display: inline-flex; align-items: center; justify-content: center; background: var(--pd-menthe-clair); color: var(--pd-vert); }
.pd-panier-suggestion__texte { min-width: 0; flex: 1; }
.pd-panier-suggestion__texte p { margin: 0; font-size: 1.4rem; line-height: 1.35; }
.pd-panier-suggestion__titre { font-size: 1.15rem !important; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pd-vert); }

/* ---------------------------------------------------------------------------
   21. Pop-up courriel légère
   ------------------------------------------------------------------------ */
.pd-popup {
  position: fixed; z-index: 60; left: 2rem; bottom: 2rem; width: min(38rem, calc(100% - 3.2rem));
  padding: 2.4rem 2.4rem 2rem; border-radius: var(--pd-rayon-lg); background: #fff; color: var(--pd-texte);
  box-shadow: 0 30px 70px -20px rgba(27, 42, 82, 0.45), 0 0 0 1px var(--pd-ligne);
  opacity: 0; transform: translateY(1.6rem); transition: opacity 0.25s, transform 0.3s var(--pd-ease);
}
.pd-popup.est-ouvert { opacity: 1; transform: none; }
.pd-popup[hidden] { display: none; }
.pd-popup__fermer {
  position: absolute; top: 1rem; right: 1rem; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 0; background: var(--pd-menthe-clair); color: var(--pd-marine); cursor: pointer;
}
.pd-popup__icone { width: 4.4rem; height: 4.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pd-menthe); color: var(--pd-marine); margin-bottom: 1.2rem; }
.pd-popup__titre { margin: 0 3.2rem 0.4rem 0; font-size: 1.9rem; font-weight: 900; line-height: 1.25; }
.pd-popup__texte { margin: 0 0 1.2rem; font-size: 1.45rem; line-height: 1.5; color: var(--pd-texte-doux); }
.pd-popup__champ { display: flex; flex-direction: column; gap: 0.8rem; }
.pd-popup__champ input {
  min-height: 5rem; padding: 0 1.2rem; border-radius: 1.2rem; border: 2px solid var(--pd-ligne-2);
  font-family: var(--font-body-family); font-size: 1.6rem; color: var(--pd-texte); background: #fff;
}
.pd-popup__champ input:focus { outline: none; border-color: var(--pd-marine); }
.pd-popup__champ .pd-bouton { width: 100%; }
.pd-popup__petit { margin: 0.8rem 0 0; font-size: 1.2rem; color: var(--pd-texte-doux); }
@media screen and (max-width: 749px) {
  .pd-popup { left: 1.2rem; right: 1.2rem; bottom: calc(1.2rem + env(safe-area-inset-bottom)); width: auto; }
  body.pd-collante-active .pd-popup { bottom: calc(8.4rem + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------------------
   23. Apparition douce (respecte prefers-reduced-motion : classe ajoutée seulement sinon)
   ------------------------------------------------------------------------ */
.pd-anime [data-pd-apparition] {
  opacity: 0; transform: translateY(1.6rem);
  transition: opacity 0.6s ease var(--pd-delai, 0ms), transform 0.7s var(--pd-ease) var(--pd-delai, 0ms);
}
.pd-anime [data-pd-apparition].est-visible { opacity: 1; transform: none; }
.shopify-design-mode [data-pd-apparition] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Texte de page (politiques, à propos) */
.pd-page-contenu__titre { margin-bottom: 2.4rem; }
.pd-page-contenu .rte h2 { font-size: 2.4rem; margin: 3.2rem 0 1.2rem; }
.pd-page-contenu .rte h3 { font-size: 1.9rem; margin: 2.4rem 0 0.8rem; }
.pd-page-contenu .rte li { font-size: 1.65rem; line-height: 1.65; margin-bottom: 0.4rem; }
.pd-kit__nom strong { white-space: nowrap; }
.pd-achat__description summary { list-style: none; display: flex; justify-content: space-between; align-items: center; }
.pd-achat__description summary::-webkit-details-marker { display: none; }
.pd-achat__description summary::after { content: '+'; font-size: 2.2rem; font-weight: 800; line-height: 1; }
.pd-achat__description[open] summary::after { content: '−'; }

/* Illustrations dans les sections */
.pd-popup__illu { display: block; width: 7.2rem; margin-bottom: 1.2rem; }
.pd-heros__illu { position: absolute; z-index: 2; right: -0.8rem; top: 4%; width: 11.2rem; filter: drop-shadow(0 12px 18px rgba(27, 42, 82, 0.18)); }
.pd-anime .pd-heros__illu { animation: pd-flotte 5s ease-in-out infinite; }
@media screen and (max-width: 749px) { .pd-heros__illu { width: 8rem; right: 0; } }
.pd-mode__illu { flex: 0 0 6.4rem; width: 6.4rem; }

/* Formats : la carte choisie réagit */
.pd-anime .pd-offre:has(.pd-offre__radio:checked) { animation: pd-choisi 0.38s var(--pd-ressort, ease); }
@keyframes pd-choisi { 0% { transform: scale(0.98); } 60% { transform: scale(1.012); } 100% { transform: scale(1); } }
.pd-anime .pd-offre:has(.pd-offre__radio:checked) .pd-offre__rond { animation: pd-bump 0.35s var(--pd-ressort, ease); }
.pd-offre:active { transform: scale(0.99); }
.pd-kit:active { transform: scale(0.99); }

/* ---------------------------------------------------------------------------
   24. Bandeau « ton vet t'a posé la question »
   ------------------------------------------------------------------------ */
.pd-declencheur { padding: 0.8rem 0 2.4rem; }
.pd-declencheur__carte {
  display: flex; align-items: center; gap: 1.6rem; padding: 1.6rem 2rem; border-radius: 2rem;
  background: var(--pd-marine); color: #fff; text-decoration: none; transition: transform 0.2s var(--pd-ease), box-shadow 0.2s;
}
.pd-declencheur__carte:hover { transform: translateY(-2px); box-shadow: var(--pd-ombre); }
.pd-declencheur__icone { flex: 0 0 4.8rem; height: 4.8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pd-menthe); color: var(--pd-marine); }
.pd-declencheur__texte { display: flex; flex-direction: column; gap: 0.4rem; font-size: 1.5rem; line-height: 1.4; }
.pd-declencheur__texte strong { font-size: 1.7rem; font-weight: 900; }
.pd-declencheur__texte span { color: rgba(255, 255, 255, 0.82); }
.pd-declencheur__fleche { margin-left: auto; flex: 0 0 4rem; height: 4rem; border-radius: 1.2rem; display: flex; align-items: center; justify-content: center; background: var(--pd-vert); transition: transform 0.2s var(--pd-ease); }
.pd-declencheur__carte:hover .pd-declencheur__fleche { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   25. Ligne du temps « ce qui se passe dans sa bouche »
   ------------------------------------------------------------------------ */
.pd-temps__liste { position: relative; display: grid; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
.pd-temps__liste::before { content: ''; position: absolute; left: 2.4rem; top: 2.4rem; bottom: 2.4rem; width: 3px; border-radius: 3px;
  background: linear-gradient(to bottom, var(--pd-menthe-2), var(--pd-sarcelle), var(--pd-vert), var(--pd-marine)); }
.pd-temps__etape { position: relative; display: grid; grid-template-columns: 4.8rem minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.pd-temps__point { position: relative; z-index: 1; width: 4.8rem; height: 4.8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 4px solid var(--pd-menthe-clair); }
.pd-temps__etape--1 .pd-temps__point { background: #fff; color: var(--pd-vert); }
.pd-temps__etape--2 .pd-temps__point { background: var(--pd-menthe); color: var(--pd-marine); }
.pd-temps__etape--3 .pd-temps__point { background: var(--pd-sarcelle); color: #fff; }
.pd-temps__etape--4 .pd-temps__point { background: var(--pd-marine); color: #fff; }
.pd-temps__carte { padding: 2rem; border-radius: 2rem; background: #fff; box-shadow: var(--pd-ombre); }
.pd-temps__num { font-size: 1.2rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pd-vert); margin-bottom: 0.4rem; }
.pd-temps__texte { margin-top: 0.8rem; font-size: 1.5rem; color: var(--pd-texte-doux); }
.pd-temps__fait { margin-top: 1.2rem; padding: 1.2rem 1.6rem; border-radius: 1.2rem; background: var(--pd-menthe-clair); font-size: 1.4rem; line-height: 1.45; }
.pd-temps__fait strong { font-size: 1.8rem; font-weight: 900; }
.pd-temps__source { display: block; margin-top: 0.4rem; font-size: 1.2rem; opacity: 0.75; }
.pd-temps__message {
  display: flex; align-items: flex-start; gap: 1.2rem; max-width: 76rem; margin: 3.2rem auto 0; padding: 2rem 2.4rem;
  border-radius: 2rem; background: var(--pd-marine); color: #fff;
}
.pd-temps__message .pd-icone { color: var(--pd-menthe); margin-top: 0.2rem; }
.pd-temps__message p { font-size: 1.6rem; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
.pd-temps__message strong { color: #fff; }
@media screen and (min-width: 990px) {
  .pd-temps__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4rem; }
  .pd-temps__liste::before { left: 2.4rem; right: 2.4rem; top: 2.2rem; bottom: auto; width: auto; height: 3px;
    background: linear-gradient(to right, var(--pd-menthe-2), var(--pd-sarcelle), var(--pd-vert), var(--pd-marine)); }
  .pd-temps__etape { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: stretch; }
  .pd-temps__carte { height: 100%; }
}

/* ---------------------------------------------------------------------------
   26. Pour qui c'est fait
   ------------------------------------------------------------------------ */
.pd-profils__grille { display: grid; gap: 1.6rem; margin: 0; padding: 0; list-style: none; }
@media screen and (min-width: 750px) { .pd-profils__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; } }
.pd-profil { display: flex; flex-direction: column; gap: 1.2rem; padding: 2.4rem; border-radius: 2.4rem; background: var(--pd-menthe-clair); border: 2px solid transparent; transition: border-color 0.2s, transform 0.25s var(--pd-ease); }
.pd-profil:hover { border-color: var(--pd-menthe-2); transform: translateY(-3px); }
.pd-profil__tete { display: flex; align-items: center; gap: 1.6rem; }
.pd-profil__illu { flex: 0 0 7.2rem; width: 7.2rem; }
.pd-profil__sous { margin-top: 0.4rem; font-size: 1.35rem; font-weight: 700; color: var(--pd-vert); }
.pd-profil__chiffre { align-self: flex-start; padding: 0.4rem 1.2rem; border-radius: 99px; background: var(--pd-marine); color: #fff; font-size: 1.35rem; font-weight: 900; }
.pd-profil__texte, .pd-profil__texte p { font-size: 1.5rem; line-height: 1.6; }
.pd-profil__source { margin-top: auto; font-size: 1.2rem; opacity: 0.72; }

/* ---------------------------------------------------------------------------
   27. Combien ça coûte d'attendre
   ------------------------------------------------------------------------ */
.pd-cout__duel { position: relative; display: grid; gap: 1.6rem; max-width: 96rem; margin: 0 auto; }
@media screen and (min-width: 750px) { .pd-cout__duel { grid-template-columns: 1fr 1fr; gap: 2.4rem; } }
.pd-cout__colonne { padding: 2.8rem 2.4rem; border-radius: 2.4rem; display: flex; flex-direction: column; gap: 0.8rem; }
.pd-cout__colonne--nous { background: var(--pd-menthe); }
.pd-cout__colonne--vet { background: #fff; border: 2px solid var(--pd-ligne-2); }
.pd-cout__etiquette { font-size: 1.3rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pd-vert); }
.pd-cout__prix { font-size: clamp(4rem, 3rem + 3vw, 6.4rem); font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.pd-cout__colonne--vet .pd-cout__prix { color: var(--pd-texte-doux); }
.pd-cout__detail { font-size: 1.4rem; font-weight: 700; color: var(--pd-texte-doux); }
.pd-cout__liste { display: grid; gap: 0.8rem; margin-top: 0.8rem; font-size: 1.45rem; font-weight: 700; }
.pd-cout__liste li { display: flex; gap: 0.8rem; align-items: flex-start; }
.pd-cout__liste .pd-icone { color: var(--pd-vert); margin-top: 0.2rem; }
.pd-cout__source { margin-top: auto; padding-top: 0.8rem; font-size: 1.2rem; opacity: 0.75; }
.pd-cout__vs {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: 5.6rem; height: 5.6rem; border-radius: 50%; display: none; align-items: center; justify-content: center;
  background: var(--pd-marine); color: #fff; font-weight: 900; font-size: 1.6rem; border: 4px solid #fff;
}
@media screen and (min-width: 750px) { .pd-cout__vs { display: flex; } }
.pd-cout__formule { margin: 3.2rem auto 0; max-width: 64rem; text-align: center; font-size: 2rem; font-weight: 900; line-height: 1.35; }
.pd-cout__note { margin: 1.2rem auto 0; max-width: 64rem; text-align: center; font-size: 1.35rem; color: var(--pd-texte-doux); }

/* ---------------------------------------------------------------------------
   28. Alerte dentifrice humain
   ------------------------------------------------------------------------ */
.pd-alerte {
  display: flex; gap: 2rem; align-items: flex-start; max-width: 96rem; margin: 0 auto; padding: 2.8rem 2.4rem;
  border-radius: 2.4rem; background: #FFF6E5; border: 2px solid #F2C46D;
}
.pd-alerte__icone {
  flex: 0 0 5.6rem; height: 5.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #F2B233; color: var(--pd-marine); font-size: 3.2rem; font-weight: 900;
}
.pd-alerte .pd-surtitre { color: #8A5A00; }
.pd-alerte .pd-h2 { font-size: clamp(2.4rem, 2rem + 1.4vw, 3.4rem); }
.pd-alerte .pd-rte { margin-top: 1.2rem; }
.pd-alerte__source { margin-top: 1.2rem; font-size: 1.2rem; opacity: 0.75; }
.pd-anime .pd-alerte.est-visible .pd-alerte__icone { animation: pd-bump 0.5s var(--pd-ressort) 0.3s; }
@media screen and (max-width: 749px) { .pd-alerte { flex-direction: column; gap: 1.2rem; padding: 2.4rem 2rem; } }

/* ---------------------------------------------------------------------------
   29. Objections
   ------------------------------------------------------------------------ */
.pd-objections__grille { display: grid; gap: 1.6rem; }
@media screen and (min-width: 990px) { .pd-objections__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; } }
.pd-objection { padding: 2.4rem; border-radius: 2.4rem; background: #fff; box-shadow: var(--pd-ombre); }
.pd-objection__q { font-size: 2rem; font-weight: 900; line-height: 1.25; }
.pd-objection__r { margin-top: 1.2rem; }
.pd-objection__r p, .pd-objection__r li { font-size: 1.5rem; line-height: 1.6; color: var(--pd-texte-doux); }
.pd-progression { display: grid; gap: 1.2rem; margin: 3.2rem auto 0; padding: 0; list-style: none; max-width: 96rem; counter-reset: none; }
@media screen and (min-width: 750px) { .pd-progression { grid-template-columns: repeat(3, 1fr); } }
.pd-progression li { position: relative; display: grid; grid-template-columns: 4rem 1fr; column-gap: 1.2rem; align-items: center; padding: 1.6rem; border-radius: 2rem; background: var(--pd-menthe); }
.pd-progression li strong { font-size: 1.7rem; font-weight: 900; grid-column: 2; }
.pd-progression li span:not(.pd-progression__n) { grid-column: 2; font-size: 1.4rem; color: var(--pd-texte-doux); }
.pd-progression__n { grid-row: 1 / span 2; width: 4rem; height: 4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pd-marine); color: #fff; font-weight: 900; }
.pd-objections__garantie { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 2.4rem; font-size: 1.6rem; font-weight: 800; text-align: center; }
.pd-objections__garantie .pd-icone { color: var(--pd-vert); }

/* ---------------------------------------------------------------------------
   30. Mention vétérinaire
   ------------------------------------------------------------------------ */
.pd-mention { padding: 2rem 0 0; }
.pd-mention p { display: flex; align-items: center; justify-content: center; gap: 0.8rem; text-align: center; font-size: 1.3rem; font-weight: 700; color: var(--pd-texte-doux); }

/* ---------------------------------------------------------------------------
   31. Formats : lecture plus claire
   ------------------------------------------------------------------------ */
.pd-offre__aide { display: inline-block; margin-left: 0.4rem; font-size: 1.25rem; font-weight: 700; color: var(--pd-vert); }
.pd-offre__mois { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1.25rem; font-weight: 700; color: var(--pd-texte-doux); }
.pd-offre__mois .pd-icone { color: var(--pd-vert); }
.pd-offre__pct { align-self: flex-end; margin-bottom: 0.4rem; padding: 0.2rem 0.8rem; border-radius: 99px; background: var(--pd-vert); color: #fff; font-size: 1.15rem; font-weight: 900; }
.pd-offres__note { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 1.25rem; font-weight: 800; color: var(--pd-vert); }
.pd-offres__note span { display: inline-flex; align-items: center; gap: 0.4rem; }
.pd-paiements { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.pd-paiements__texte { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1.25rem; font-weight: 700; color: var(--pd-texte-doux); }
.pd-paiements__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
.pd-paiements .pd-paiement, .pd-paiements__liste svg { width: 3.8rem; height: 2.4rem; }
.pd-livraison__envoi { display: block; margin-top: 0.4rem; font-weight: 800; color: var(--pd-vert); }
.pd-collante__garantie { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 1.15rem; font-weight: 700; color: var(--pd-vert); }
.pd-popup__offre { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.8rem; padding: 0.4rem 1.2rem; border-radius: 99px; background: var(--pd-vert); color: #fff; font-size: 1.3rem; font-weight: 900; }
.pd-popup__code { margin-top: 0.8rem; font-size: 1.5rem; }
.pd-popup__code strong { padding: 0.4rem 0.8rem; border-radius: 0.8rem; border: 2px dashed var(--pd-menthe-2); background: var(--pd-menthe-clair); letter-spacing: 0.08em; }
.pd-temps__schema { max-width: 42rem; margin: 2.4rem auto 0; }

/* ---------------------------------------------------------------------------
   32. Ce que tu reçois · Vidéo · Livré au Canada
   ------------------------------------------------------------------------ */
.pd-boite__grille { display: grid; gap: 3.2rem; align-items: center; }
@media screen and (min-width: 990px) { .pd-boite__grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 6.4rem; } }
.pd-boite__visuel { position: relative; aspect-ratio: 1; max-height: 52rem; padding: 3.2rem; border-radius: 3.2rem; background: var(--pd-menthe); display: flex; align-items: center; justify-content: center; }
.pd-boite__img { width: 100%; height: 100%; object-fit: contain; border-radius: 2.4rem; background: #fff; }
.pd-boite__etiquette { position: absolute; left: 2rem; top: 2rem; display: inline-flex; align-items: center; gap: 0.8rem; padding: 0.8rem 1.6rem; border-radius: 99px; background: var(--pd-marine); color: #fff; font-size: 1.3rem; font-weight: 900; }
.pd-boite__liste { display: grid; gap: 1.2rem; }
.pd-boite__item { display: flex; gap: 1.6rem; align-items: flex-start; padding: 1.6rem 2rem; border-radius: 2rem; background: var(--pd-menthe-clair); }
.pd-fond--menthe-clair .pd-boite__item { background: #fff; }
.pd-boite__icone { flex: 0 0 4.8rem; height: 4.8rem; border-radius: 1.6rem; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--pd-vert); box-shadow: var(--pd-ombre); }
.pd-boite__nom { font-size: 1.7rem; font-weight: 900; }
.pd-boite__option { display: inline-block; padding: 0.2rem 0.8rem; border-radius: 99px; background: var(--pd-menthe); font-size: 1.1rem; font-weight: 800; vertical-align: middle; }
.pd-boite__texte { margin-top: 0.4rem; font-size: 1.45rem; color: var(--pd-texte-doux); }

.pd-video__grille { display: grid; gap: 2.4rem; align-items: center; }
@media screen and (min-width: 990px) { .pd-video__grille { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 6.4rem; } }
.pd-video__cadre { position: relative; aspect-ratio: 16 / 10; border-radius: 3.2rem; overflow: hidden; background: var(--pd-marine); box-shadow: var(--pd-ombre); }
.pd-video__media { width: 100%; height: 100%; object-fit: cover; }
.pd-video__jouer { position: absolute; inset: 0; border: 0; background: linear-gradient(to top, rgba(27, 42, 82, 0.55), transparent 55%); display: flex; align-items: center; justify-content: center; color: #fff; }
.pd-video__jouer.est-cache { display: none; }
.pd-video__bouton { width: 8rem; height: 8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--pd-marine); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.4); transition: transform 0.25s var(--pd-ressort); padding-left: 0.4rem; }
.pd-video__jouer:hover .pd-video__bouton { transform: scale(1.08); }
.pd-anime .pd-video__bouton { animation: pd-pouls 2.4s ease-out infinite; }
@keyframes pd-pouls { 0% { box-shadow: 0 0 0 0 rgba(196, 228, 226, 0.7); } 70% { box-shadow: 0 0 0 1.8rem rgba(196, 228, 226, 0); } 100% { box-shadow: 0 0 0 0 rgba(196, 228, 226, 0); } }
.pd-video__duree { position: absolute; left: 2rem; bottom: 2rem; padding: 0.4rem 1.2rem; border-radius: 99px; background: rgba(255, 255, 255, 0.92); color: var(--pd-marine); font-size: 1.3rem; font-weight: 900; }
.pd-video__vide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; padding: 2.4rem; text-align: center; background: linear-gradient(160deg, var(--pd-menthe) 0%, var(--pd-menthe-2) 100%); color: var(--pd-marine); }
.pd-video__illu { width: 22rem; }
.pd-video__vide .pd-video__bouton { position: absolute; }
.pd-video__vide p { position: absolute; left: 2rem; right: 2rem; bottom: 2rem; font-size: 1.3rem; padding: 0.8rem 1.2rem; border-radius: 1.2rem; background: rgba(255, 255, 255, 0.85); }

.pd-canada__carte { position: relative; overflow: hidden; display: grid; gap: 2.4rem; padding: 3.2rem 2.4rem; border-radius: 3.2rem; background: var(--pd-marine); color: #fff; }
@media screen and (min-width: 990px) { .pd-canada__carte { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; padding: 4.8rem; gap: 4.8rem; } }
.pd-canada .pd-surtitre { color: var(--pd-menthe); }
.pd-canada .pd-intro { color: rgba(255, 255, 255, 0.82); }
.pd-canada__trajet { position: relative; z-index: 1; display: grid; gap: 1.2rem; }
@media screen and (min-width: 750px) { .pd-canada__trajet { grid-template-columns: repeat(4, 1fr); } }
.pd-canada__trajet li { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.6rem; border-radius: 2rem; background: rgba(255, 255, 255, 0.08); }
.pd-canada__trajet strong { font-size: 1.6rem; font-weight: 900; }
.pd-canada__trajet span:last-child { font-size: 1.3rem; color: rgba(255, 255, 255, 0.78); }
.pd-canada__pastille { width: 4rem; height: 4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pd-menthe); color: var(--pd-marine); margin-bottom: 0.4rem; }
.pd-canada__pastille--fin { background: var(--pd-vert); color: #fff; }
.pd-canada__feuille { position: absolute; right: -2.4rem; top: -2.4rem; width: 16rem; color: rgba(196, 228, 226, 0.08); }
.pd-texte-image__grille { display: grid; gap: 3.2rem; align-items: center; }
@media screen and (min-width: 990px) {
  .pd-texte-image__grille { grid-template-columns: 1fr 1fr; gap: 6.4rem; }
  .pd-texte-image__grille--inverse .pd-texte-image__visuel { order: 2; }
}
.pd-texte-image__visuel { padding: 3.2rem; border-radius: 3.2rem; background: var(--pd-menthe-clair); }
.pd-fond--menthe-clair .pd-texte-image__visuel { background: #fff; }
.pd-texte-image__visuel img { border-radius: 2.4rem; width: 100%; }
.pd-texte-image__texte { margin: 1.6rem 0 2.4rem; color: var(--pd-texte-doux); }

/* ---------------------------------------------------------------------------
   33. Pop-up cadeau
   ------------------------------------------------------------------------ */
.pd-cadeau { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 2.4rem; }
.pd-cadeau[hidden] { display: none; }
.pd-cadeau__voile { position: absolute; inset: 0; background: rgba(27, 42, 82, 0.5); opacity: 0; transition: opacity 0.3s; }
.pd-cadeau.est-ouvert .pd-cadeau__voile { opacity: 1; }
.pd-cadeau__boite {
  position: relative; width: min(88rem, 100%); max-height: calc(100vh - 4.8rem); max-height: calc(100svh - 4.8rem); overflow: auto;
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); border-radius: 3.2rem; background: #fff; outline: none;
  box-shadow: 0 40px 100px -30px rgba(27, 42, 82, 0.6); opacity: 0; transform: translateY(2.4rem) scale(0.98);
  transition: opacity 0.3s, transform 0.4s var(--pd-ressort);
}
.pd-cadeau.est-ouvert .pd-cadeau__boite { opacity: 1; transform: none; }
.pd-cadeau__fermer {
  position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2; width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center; background: var(--pd-menthe-clair); color: var(--pd-marine);
}
.pd-cadeau__fermer:hover { background: var(--pd-menthe); }
.pd-cadeau__visuel {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; padding: 4rem 2.4rem;
  background: var(--pd-menthe); overflow: hidden;
}
.pd-motif-ok .pd-cadeau__visuel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M90 70s8 8.8 8 14a8 8 0 0 1-16 0c0-5.2 8-14 8-14z' fill='%23ffffff' fill-opacity='.4'/%3E%3Ccircle cx='24' cy='26' r='3' fill='%23ffffff' fill-opacity='.4'/%3E%3C/svg%3E"); }
.pd-cadeau__ruban { position: absolute; top: 2rem; left: -4rem; transform: rotate(-35deg); width: 16rem; padding: 0.4rem 0; text-align: center; background: var(--pd-vert); color: #fff; font-weight: 900; font-size: 1.3rem; letter-spacing: 0.1em; text-transform: uppercase; }
.pd-cadeau__img { width: 100%; max-width: 26rem; border-radius: 2.4rem; background: #fff; }
.pd-cadeau__dessin { width: 100%; max-width: 24rem; }
.pd-anime .pd-cadeau.est-ouvert .pd-cadeau__dessin { animation: pd-flotte 4s ease-in-out infinite; }
.pd-cadeau__nom { text-align: center; font-size: 1.8rem; font-weight: 900; color: var(--pd-marine); }
.pd-cadeau__corps { padding: 4rem 3.2rem 3.2rem; }
.pd-cadeau__form { display: grid; gap: 1.2rem; }
.pd-cadeau__sur { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.pd-cadeau__titre { font-size: clamp(2.4rem, 2rem + 1vw, 3rem); font-weight: 900; line-height: 1.15; padding-right: 4rem; }
.pd-cadeau__texte { font-size: 1.5rem; color: var(--pd-texte-doux); }
.pd-cadeau__deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.pd-cadeau .pd-champ { font-size: 1.3rem; gap: 0.4rem; }
.pd-cadeau .pd-champ input { min-height: 4.8rem; padding: 0.8rem 1.6rem; border-radius: 1.2rem; }
.pd-cadeau__consentements { border: 0; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.pd-case { position: relative; display: grid; grid-template-columns: 2.4rem 1fr; gap: 1.2rem; align-items: start; font-size: 1.25rem; line-height: 1.45; color: var(--pd-texte-doux); cursor: pointer; }
.pd-case input { position: absolute; opacity: 0; width: 2.4rem; height: 2.4rem; margin: 0; cursor: pointer; }
.pd-case__boite { width: 2.4rem; height: 2.4rem; border-radius: 0.8rem; border: 2px solid var(--pd-marine); display: flex; align-items: center; justify-content: center; color: transparent; background: #fff; transition: all 0.15s; }
.pd-case input:checked + .pd-case__boite { background: var(--pd-vert); border-color: var(--pd-vert); color: #fff; }
.pd-case input:focus-visible + .pd-case__boite { outline: 3px solid var(--pd-marine); outline-offset: 2px; }
.pd-cadeau__petit { font-size: 1.15rem; line-height: 1.45; color: var(--pd-texte-doux); }
.pd-cadeau__petit a { color: var(--pd-vert); font-weight: 800; }
.pd-cadeau__envoyer { width: 100%; min-height: 5.6rem; font-size: 1.8rem; margin-top: 0.4rem; }
.pd-cadeau__non { justify-self: center; min-height: 4.4rem; border: 0; background: none; font-size: 1.35rem; font-weight: 700; color: var(--pd-texte-doux); text-decoration: underline; text-underline-offset: 0.3rem; }
.pd-cadeau__merci { display: grid; gap: 1.2rem; justify-items: start; }
.pd-cadeau__coche { width: 6.4rem; height: 6.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pd-vert); color: #fff; }
.pd-anime .pd-cadeau__coche { animation: pd-bump 0.6s var(--pd-ressort); }
.pd-cadeau__etapes { display: grid; gap: 0.8rem; font-size: 1.45rem; font-weight: 700; }
.pd-cadeau__etapes li { display: flex; align-items: center; gap: 1.2rem; }
.pd-cadeau__etapes span { flex: 0 0 3.2rem; height: 3.2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pd-menthe); font-weight: 900; }
.pd-cadeau__cta { width: 100%; }
@media screen and (max-width: 749px) {
  .pd-cadeau { align-items: flex-end; padding: 0; }
  .pd-cadeau__boite { grid-template-columns: 1fr; border-radius: 2.8rem 2.8rem 0 0; max-height: 92vh; max-height: 92svh; transform: translateY(100%); }
  .pd-cadeau.est-ouvert .pd-cadeau__boite { transform: none; }
  .pd-cadeau__visuel { flex-direction: row; justify-content: flex-start; padding: 1.6rem 2rem; gap: 1.6rem; }
  .pd-cadeau__dessin, .pd-cadeau__img { width: 8rem; max-width: 8rem; }
  .pd-cadeau__nom { text-align: left; font-size: 1.6rem; padding-right: 4.8rem; }
  .pd-cadeau__ruban { display: none; }
  .pd-cadeau__corps { padding: 2rem 2rem calc(2rem + env(safe-area-inset-bottom)); }
  .pd-cadeau__titre { padding-right: 0; }
}
.pd-ligne__propriete { margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.8rem; border-radius: 99px; background: var(--pd-menthe); font-size: 1.15rem; font-weight: 800; }