/* ============================================================
   Z DERMA — finitions « premium » (audit anti-slop, 2026-09-30)

   Chaque bloc est rattaché à un groupe activable dans
   Apparence → Finitions premium. Groupe désactivé = sa classe
   `zd-p-…` disparaît de <body> = ces règles ne s'appliquent plus.
   Référence : DESIGN.md (échelles de rayons, tailles, couleurs).
   ============================================================ */

:root{
  --zd-r-s:10px;   /* vignettes, champs, petites pastilles */
  --zd-r-m:16px;   /* cartes */
  --zd-r-l:24px;   /* grands panneaux */
}

/* ============================================================
   1. TYPOGRAPHIE  (body.zd-p-type)
   Italique fin réservé au titre principal (h1) de chaque page ;
   les titres de section gardent la couleur mais passent en romain.
   Approche resserrée à -0,02 em (lisibilité), tailles de titre plus sages.
   ============================================================ */
.zd-p-type .zd-h-hero__title{ font-size:clamp(54px,6.6vw,96px); letter-spacing:-.035em; line-height:.94; }
.zd-p-type .zd-h-title,
.zd-p-type .zd-title,
.zd-p-type .zd-st-hero__title,
.zd-p-type .zd-ct-hero__title,
.zd-p-type .zd-st-quote p,
.zd-p-type .zd-st-figures__title,
.zd-p-type .zd-st-cta h2,
.zd-p-type .zd-ct-faq__title,
.zd-p-type .zd-thanks__title,
.zd-p-type .zd-auth__panel h1{ letter-spacing:-.022em; }
.zd-p-type .zd-h-title{ font-size:clamp(36px,4.4vw,64px); }
.zd-p-type .zd-st-hero__title,
.zd-p-type .zd-ct-hero__title{ font-size:clamp(46px,5.4vw,80px); }

/* Titres de section (h2) : l'emphase devient romaine et plus légère, pas italique */
.zd-p-type h2 em,
.zd-p-type h2 .zd-em,
.zd-p-type .zd-h-insta__handle{ font-style:normal; font-weight:400; }
.zd-p-type .zd-h-insta__handle{ letter-spacing:-.02em; }
.zd-p-type .zd-st-quote p{ font-style:normal; font-weight:300; font-size:clamp(40px,4.4vw,64px); }
.zd-p-type .zd-st-quote em{ font-weight:400; }

/* Textes courants : 15 px minimum pour les descriptions (13–14 px auparavant) */
.zd-p-type .zd-pc__desc,
.zd-p-type .zd-h-card p,
.zd-p-type .zd-h-head__aside,
.zd-p-type .zd-rel__meta,
.zd-p-type .zd-h-duo__text,
.zd-p-type .zd-h-promise__col p{ font-size:15px; line-height:1.6; }
.zd-p-type .zd-single__short,
.zd-p-type .zd-h-box__copy > p,
.zd-p-type .zd-h-quiz__copy > p{ font-size:16.5px; line-height:1.7; }

/* ============================================================
   2. ÉTIQUETTES AU-DESSUS DES TITRES  (body.zd-p-labels)
   ============================================================ */
.zd-p-labels .zd-h-hero__copy > .zd-h-eyebrow,
.zd-p-labels .zd-h-box__copy > .zd-h-eyebrow,
.zd-p-labels .zd-h-quiz__copy > .zd-h-eyebrow,
.zd-p-labels .zd-h-routine .zd-h-head .zd-h-eyebrow,
.zd-p-labels .zd-h-promise__head > .zd-h-eyebrow,
.zd-p-labels .zd-h-insta .zd-h-head .zd-h-eyebrow,
.zd-p-labels .zd-h-bundle > .zd-h-step,
.zd-p-labels .zd-single__badges,
.zd-p-labels .zd-st-hero__text > .zd-eyebrow,
.zd-p-labels .zd-ct-faq__head > .zd-eyebrow,
.zd-p-labels .zd-auth__eyebrow,
.zd-p-labels .zd-single__bundle .zd-eyebrow{ display:none; }

.zd-p-labels .zd-h-hero__title{ margin-top:0; }
.zd-p-labels .zd-h-box__copy .zd-h-title,
.zd-p-labels .zd-h-quiz__copy .zd-h-title{ margin-top:0; }
.zd-p-labels .zd-h-promise__head .zd-h-title,
.zd-p-labels .zd-h-routine .zd-h-title{ margin-top:0; }
.zd-p-labels .zd-auth__panel h1{ margin-top:0; }

/* L'étape (« Étape 2 · Illuminer ») passe sous le nom du soin : c'est une info, pas un sur-titre */
.zd-p-labels .zd-h-card__body > .zd-h-step{ order:1; margin:-2px 0 8px; }
.zd-p-labels .zd-h-card__body > p{ order:2; }
.zd-p-labels .zd-h-card__body > .zd-h-price{ order:3; }
.zd-p-labels .zd-h-card__body > .zd-h-btn{ order:4; }
.zd-p-labels .zd-h-card .zd-h-name{ margin-top:0; }
.zd-p-labels .zd-pc__body > .zd-pc__cat{ order:1; margin:-2px 0 8px; }
.zd-p-labels .zd-pc__body > .zd-pc__desc{ order:2; }
.zd-p-labels .zd-pc__body > .zd-pc__foot{ order:3; }
.zd-p-labels .zd-rel__body > .zd-rel__step{ order:1; margin-bottom:4px; }
.zd-p-labels .zd-rel__body > .zd-rel__meta{ order:2; }
.zd-p-labels .zd-rel__body > .zd-rel__price{ order:3; }
.zd-p-labels .zd-rel__name{ margin-top:0; }

/* « La promesse » : pas de numéros 01–04 (aucun ordre à suivre), on garde le trait vers le citron */
.zd-p-labels .zd-h-promise__n{ font-size:0; }
@media (max-width:980px){
  .zd-p-labels .zd-h-promise__n{ display:none; }
}

/* ============================================================
   3. ANIMATIONS  (body.zd-p-motion)
   ============================================================ */
/* Pastilles qui pulsent, décors qui tournent, rayons en « soleil » */
.zd-p-motion .zd-h-dot::before{ display:none; animation:none; }
.zd-p-motion .zd-h-seal svg,
.zd-p-motion .zd-h-box__ring,
.zd-p-motion .zd-h-lime .zd-citrus,
.zd-p-motion .zd-h-stamp__ring{ animation:none; }
.zd-p-motion .zd-sun__step.is-active .zd-sun__disc::before{ display:none; }

/* Étape active de la routine : agrandie par transformation, sans décaler la mise en page */
.zd-p-motion .zd-sun__disc{ transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease; }
@media (min-width:641px){
  .zd-p-motion .zd-sun__step.is-active .zd-sun__disc{ width:104px; height:104px; transform:scale(1.14); }
}

/* Coffret : ouverture sans rebond */
.zd-p-motion .zd-gift__lid{ transition-timing-function:cubic-bezier(.2,.7,.2,1); }
.zd-p-motion .zd-h-box__inside{ transition:opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); }

/* Images qui bougent au survol */
.zd-p-motion .zd-h-feature:hover .zd-h-feature__disc img,
.zd-p-motion .zd-h-card:hover .zd-h-card__media img,
.zd-p-motion .zd-h-bundle:hover .zd-h-bundle__img,
.zd-p-motion .zd-pc:hover .zd-pc__media img.zd-pc__img,
.zd-p-motion .zd-h-tile,
.zd-p-motion .zd-h-tile:hover{ transform:none !important; }
.zd-p-motion .zd-h-card:hover,
.zd-p-motion .zd-pc:hover,
.zd-p-motion .zd-rel__card:hover,
.zd-p-motion .zd-acct__card:hover{ transform:none; }

/* Bouton « Commander maintenant » du plugin : secousse en boucle */
.zd-p-motion #utopia-fast-checkout button,
.zd-p-motion #utopia-fast-checkout .button{ animation:none !important; }

/* Bandeaux défilants : pause au survol, au focus et par bouton */
.zd-ribbons__pause{ display:none; }
.zd-p-motion .zd-ribbons{ pointer-events:auto; }
.zd-p-motion .zd-ribbons:hover .zd-ribbon__track,
.zd-p-motion .zd-ribbons.is-paused .zd-ribbon__track{ animation-play-state:paused; }
.zd-p-motion .zd-ribbons__pause{
  position:absolute; right:max(12px, var(--zd-gutter)); bottom:6px; z-index:4;
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0;
  border:0; border-radius:50%; background:var(--zd-black); color:#fff; cursor:pointer;
}
.zd-p-motion .zd-ribbons__pause:hover{ background:var(--zd-orange); color:var(--zd-black); }
.zd-p-motion .zd-ribbons__pause .is-play{ display:none; }
.zd-p-motion .zd-ribbons.is-paused .zd-ribbons__pause .is-play{ display:block; }
.zd-p-motion .zd-ribbons.is-paused .zd-ribbons__pause .is-pause{ display:none; }

/* ============================================================
   4. CARTES ET BORDURES  (body.zd-p-surfaces)
   Une seule façon de dessiner une carte : fond + filet fin,
   pas de cadre noir épais ni d'ombre orange décalée.
   ============================================================ */
.zd-p-surfaces .zd-h-card,
.zd-p-surfaces .zd-pc,
.zd-p-surfaces .zd-rel__card,
.zd-p-surfaces .zd-xsell__item,
.zd-p-surfaces .zd-acct__card,
.zd-p-surfaces .zd-acct__orders,
.zd-p-surfaces .zd-thanks__card,
.zd-p-surfaces .zd-contents,
.zd-p-surfaces .zd-box__tile,
.zd-p-surfaces .zd-ct-info,
.zd-p-surfaces .zd-ct-insta,
.zd-p-surfaces .zd-h-bundle,
.zd-p-surfaces .zd-h-chip{ border-radius:var(--zd-r-m); }
.zd-p-surfaces .zd-h-feature,
.zd-p-surfaces .zd-gal__main,
.zd-p-surfaces .zd-auth__panel,
.zd-p-surfaces .zd-h-tile{ border-radius:var(--zd-r-l); }
.zd-p-surfaces .zd-h-card__media,
.zd-p-surfaces .zd-h-duo__media,
.zd-p-surfaces .zd-rel__media,
.zd-p-surfaces .zd-xsell__media,
.zd-p-surfaces .zd-box__media,
.zd-p-surfaces .zd-gal__thumb{ border-radius:var(--zd-r-s); }

/* Cartes à cadre noir + ombre orange → fond blanc + filet fin */
.zd-p-surfaces .zd-h-duo,
.zd-p-surfaces .zd-acct__welcome,
.zd-p-surfaces .zd-ct-card,
.zd-p-surfaces .zd-cartpage .zd-cart__side .cart_totals,
.zd-p-surfaces .zd-cart__side .cart_totals{
  border:1px solid var(--zd-line) !important;
  box-shadow:none !important;
  border-radius:var(--zd-r-l) !important;
}
.zd-p-surfaces .zd-h-duo{ border:0 !important; }
.zd-p-surfaces #utopia-fast-checkout{
  border:1px solid #D9D9D9 !important; box-shadow:none !important;
  border-radius:var(--zd-r-m) !important; margin-right:0 !important; overflow:hidden !important;
}
.zd-p-surfaces #utopia-fast-checkout > h3{ border-radius:0 !important; }
.zd-p-surfaces .zd-sun__pop{ box-shadow:0 12px 32px rgba(17,17,17,.12); border:0; }
.zd-p-surfaces .zd-h-hot{ border:0; box-shadow:0 14px 36px rgba(17,17,17,.16); border-radius:var(--zd-r-m); }
.zd-p-surfaces .zd-h-chip.is-active{ box-shadow:none; }
.zd-p-surfaces .zd-h-chip{ border:1px solid rgba(17,17,17,.14); }
.zd-p-surfaces .zd-thanks__overview{ border-width:1px; border-color:var(--zd-line); }

/* Pas de cartes dans les cartes */
.zd-p-surfaces #utopia-fast-checkout .order-summary{
  background:transparent !important; border-radius:0 !important;
  padding:14px 0 0 !important; border-top:1px solid var(--zd-line) !important;
}
.zd-p-surfaces #order_review #payment ul.payment_methods li{
  border:0 !important; background:none !important; border-radius:0 !important; padding:4px 0 10px !important;
}

/* Notices : teinte douce, sans barre latérale (ce ne sont pas des alertes) */
.zd-p-surfaces .woocommerce-message,
.zd-p-surfaces .woocommerce-info,
.zd-p-surfaces .woocommerce-notices-wrapper .woocommerce-message,
.zd-p-surfaces .woocommerce-notices-wrapper .woocommerce-info{
  border:0 !important; border-left:0 !important; outline:0 !important; box-shadow:none !important;
  border-radius:12px !important;
}
.zd-p-surfaces .woocommerce-message::before,
.zd-p-surfaces .woocommerce-info::before{ display:none !important; }
.zd-p-surfaces .woocommerce-form-coupon-toggle .woocommerce-info{ padding:12px 18px !important; }

/* ============================================================
   5. ILLUSTRATIONS  (body.zd-p-illustrations)
   ============================================================ */
/* Dessins faits main du héros (feuilles, gouttes, trait sous le titre) */
.zd-p-illustrations .zd-h-art__leaf,
.zd-p-illustrations .zd-h-art__drop,
.zd-p-illustrations .zd-h-hero__swoosh{ display:none; }
.zd-p-illustrations .zd-h-hero__title{ margin-bottom:22px; }

/* Coffret : la vraie photo du coffret au lieu de la boîte dessinée */
.zd-p-illustrations .zd-gift,
.zd-p-illustrations .zd-h-box__open,
.zd-p-illustrations .zd-h-box__ring{ display:none; }
.zd-p-illustrations .zd-h-box__inside{
  opacity:1; transform:none; transition:none;
  left:17%; top:14%; width:66%;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.35));
}
.zd-p-illustrations .zd-h-box__art{ gap:0; }

/* Instagram : pas de tuile-texte « Votre routine » qui imite une publication, pas de tuiles penchées */
.zd-p-illustrations .zd-h-tile--dark{ display:none !important; }
.zd-p-illustrations .zd-h-tile{ transform:none !important; }
@media (min-width:981px){
  .zd-p-illustrations .zd-h-insta__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* Fiche coffret : le paquet cadeau dessiné */
.zd-p-illustrations .zd-gal__gift{ display:none; }

/* ============================================================
   7. MISE EN PAGE  (body.zd-p-layout)
   ============================================================ */
/* Fiche produit : la galerie accompagne le défilement (fini le grand vide sous l'image) */
@media (min-width:981px){
  .zd-p-layout .zd-single__gallery{ position:sticky; top:104px; align-self:start; }
}
/* Doublons de la fiche : la ligne « 30 ml · 2 % vitamine C… » est déjà dans le texte,
   et les pastilles répètent les mots de la description ; l'encart coffret répète le grand bandeau plus bas. */
.zd-p-layout .zd-single__meta:has(~ .zd-single__short){ display:none; }
.zd-p-layout .zd-single__features,
.zd-p-layout .zd-single__teaser{ display:none; }

/* Longueur de ligne : 60–70 caractères */
.zd-p-layout .zd-faq-item p,
.zd-p-layout .zd-page__body:not(.zd-page__body--woo) p,
.zd-p-layout .zd-page__body:not(.zd-page__body--woo) li,
.zd-p-layout .zd-single__short,
.zd-p-layout .zd-acc__panel p{ max-width:66ch; }
.zd-p-layout .zd-page__body:not(.zd-page__body--woo){ max-width:72ch; }

/* Titres : plus d'espace au-dessus qu'en dessous */
.zd-p-layout .zd-page__body:not(.zd-page__body--woo) h2{ margin:2.2em 0 .5em; }
.zd-p-layout .zd-page__body:not(.zd-page__body--woo) h3{ margin:1.9em 0 .4em; }
.zd-p-layout .zd-h-box__copy .zd-h-title,
.zd-p-layout .zd-h-quiz__copy .zd-h-title{ margin-bottom:16px; }

/* Notre histoire : les chiffres restent, en taille de texte et non plus « métrique géante » */
.zd-p-layout .zd-st-figure{ flex-direction:row; align-items:baseline; gap:14px; }
.zd-p-layout .zd-st-figure__n{ font-size:clamp(34px,3vw,44px); flex:none; min-width:2.2ch; }
.zd-p-layout .zd-st-figures__title{ margin-bottom:36px; }

/* Rythme : plus d'air entre les grandes sections qu'à l'intérieur */
@media (min-width:981px){
  .zd-p-layout .zd-h-unit{ padding-bottom:clamp(96px,8vw,128px); }
  .zd-p-layout .zd-h-insta{ padding-block:clamp(96px,8vw,128px); }
}

/* Retours à la ligne équilibrés : pas de mot seul sur une ligne de titre, pas de veuve en fin de paragraphe */
.zd-p-type h1,.zd-p-type h2,.zd-p-type h3{ text-wrap:balance; }
.zd-p-type p,.zd-p-type li{ text-wrap:pretty; }

/* 6. TEXTES (body.zd-p-copy) — le prix barré est déjà dans la phrase du coffret : une seule mention */
.zd-p-copy .zd-h-box__price del{ display:none; }

/* ============================================================
   8. HÉROS CIEL & ROCHER  (groupe « hero » : le balisage n'existe que s'il est actif)
   Photo : ciel doré + rocher moussu (généré sans produit, 16:9).
   Repères mesurés sur l'image : haut du rocher à 57,5 % de la hauteur,
   plateau de 31 % à 71 % de la largeur ; les flacons se posent à 61 %.
   L'image est calée en bas (object-position 50% 100%) : quand elle est
   ajustée à la largeur, 1 % de sa hauteur = 0,5625vw.
   ============================================================ */
.zd-sky{ position:relative; background:#F3D3B4; }
.zd-sky__stage{
  --zd-imgh:56.25vw;                       /* hauteur de l'image ajustée à la largeur */
  position:relative; overflow:hidden;
  aspect-ratio:16/9; max-height:880px; min-height:560px;
}
.zd-sky__bg,.zd-sky__bg img{ position:absolute; inset:0; width:100%; height:100%; }
.zd-sky__bg img{ object-fit:cover; object-position:50% 100%; }

.zd-sky__title{
  position:absolute; z-index:1; left:0; right:0;
  top:clamp(28px,5.2vw,84px);
  margin:0; padding:0 var(--zd-gutter);
  text-align:center; text-wrap:balance;
  font-size:clamp(64px,10.6vw,172px); line-height:.9; letter-spacing:-.04em;
  color:#1B130B;
}
.zd-sky__title em{ font-style:italic; font-weight:300; color:var(--zd-orange-ink); letter-spacing:-.03em; }

/* Ombre de contact : les flacons « posent » dans la mousse */
.zd-sky__shadow{
  position:absolute; z-index:2; left:50%;
  bottom:calc(var(--zd-imgh) * .375);
  width:calc(var(--zd-imgh) * .50); height:calc(var(--zd-imgh) * .06);
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(22,34,6,.55), rgba(22,34,6,0));
  filter:blur(6px);
}
.zd-sky__product{
  position:absolute; z-index:3; left:50%;
  bottom:calc(var(--zd-imgh) * .388);
  height:calc(var(--zd-imgh) * .47);
  transform:translateX(-50%);
  display:block;
}
.zd-sky__product img{
  height:100%; width:auto; display:block;
  filter:drop-shadow(0 18px 22px rgba(60,30,5,.28)) saturate(1.02);
}

.zd-sky__side{
  position:absolute; z-index:4;
  width:min(300px,22vw);
  color:#2A1C10; font-size:16px; line-height:1.6;
}
.zd-sky__side--left{ left:var(--zd-gutter); bottom:calc(var(--zd-imgh) * .30); margin:0; }
.zd-sky__side--right{ right:var(--zd-gutter); bottom:calc(var(--zd-imgh) * .26); }
.zd-sky__side--right p{ margin:0 0 16px; }
.zd-sky__cta{ display:flex; flex-wrap:wrap; gap:10px; }
.zd-sky__cta .zd-h-btn{ height:50px; padding:0 22px; }
.zd-sky__ghost{ background:rgba(255,255,255,.55); color:var(--zd-black); border:1.5px solid rgba(17,17,17,.7); }
.zd-sky__ghost:hover{ background:#fff; }

.zd-sky__facts{
  position:absolute; z-index:4; left:var(--zd-gutter); bottom:calc(var(--zd-imgh) * .20);
  display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none;
  font-size:14px; font-weight:600; color:#2A1C10;
}
.zd-sky__facts li{ display:inline-flex; align-items:center; gap:9px; }
.zd-sky__facts svg{ flex:none; color:var(--zd-green); }

/* Les rubans chevauchent le bas du rocher */
.zd-sky + .zd-ribbons{ margin-top:-46px; }

/* Grands écrans : l'image est plafonnée en hauteur, les repères restent calés sur sa largeur */
@media (min-width:1600px){
  .zd-sky__title{ top:clamp(40px,3.6vw,72px); }
}

/* Tablette et téléphone : scène plus haute, textes sous l'image */
@media (max-width:980px){
  .zd-sky__stage{ --zd-imgh:100%; aspect-ratio:4/3; max-height:none; min-height:0; }
  .zd-sky__shadow{ bottom:37.5%; width:52%; height:6%; }
  .zd-sky__product{ bottom:38.8%; height:47%; }
  .zd-sky__title{ top:6%; font-size:clamp(56px,11vw,104px); }
  .zd-sky__side,.zd-sky__facts{ position:static; width:auto; }
  .zd-sky__side--left{ padding:26px var(--zd-gutter) 0; font-size:16.5px; }
  .zd-sky__side--right{ padding:10px var(--zd-gutter) 0; }
  .zd-sky__side--right p{ display:none; }
  .zd-sky__facts{ flex-direction:row; flex-wrap:wrap; gap:8px 18px; padding:18px var(--zd-gutter) 70px; font-size:13.5px; }
  .zd-sky{ background:#fff; }
  .zd-sky + .zd-ribbons{ margin-top:-40px; }
}
@media (max-width:640px){
  .zd-sky__stage{ aspect-ratio:4/5; }
  .zd-sky__title{ top:5%; font-size:clamp(50px,15vw,72px); line-height:.92; }
  .zd-sky__product{ height:44%; }
  .zd-sky__shadow{ width:60%; }
  .zd-sky__cta .zd-h-btn{ flex:1 1 140px; height:52px; }
  .zd-sky__facts{ padding-bottom:64px; }
}

/* --- Héros : titre scindé autour des flacons (« Un zeste  [flacons]  d’éclat. ») --- */
.zd-sky__title{
  top:auto; bottom:calc(var(--zd-imgh) * .63);
  display:flex; justify-content:center; align-items:baseline;
  gap:calc(var(--zd-imgh) * .47 * .83 + 2.4vw);   /* largeur des flacons + marge */
  font-size:clamp(52px,7.2vw,124px); line-height:1;
}
.zd-sky__title > span,.zd-sky__title > em{ white-space:nowrap; }
@media (max-width:980px) and (min-width:641px){
  .zd-sky__title{ top:auto; bottom:66%; gap:calc(75vw * .47 * .83 + 2vw); font-size:clamp(40px,6.6vw,64px); }
}
/* Téléphone : titre sur deux lignes au-dessus des flacons, scène plus haute */
@media (max-width:640px){
  .zd-sky__stage{ aspect-ratio:3/5; }
  .zd-sky__title{
    top:4.5%; bottom:auto; display:block; gap:0;
    font-size:clamp(46px,14vw,66px); line-height:.95;
  }
  .zd-sky__title > span,.zd-sky__title > em{ display:block; }
  .zd-sky__product{ height:35%; bottom:38.8%; }
  .zd-sky__shadow{ width:56%; bottom:37.6%; }
}
/* --- Héros : correctifs (repère partagé, trou centré sur les flacons) --- */
.zd-sky{ --zd-imgh:56.25vw; }
.zd-sky__title{
  display:grid; grid-template-columns:1fr calc(var(--zd-imgh) * .47 * .83 + 3vw) 1fr;
  gap:0; align-items:baseline;
}
.zd-sky__title > span{ grid-column:1; justify-self:end; }
.zd-sky__title > em{ grid-column:3; justify-self:start; }
@media (max-width:980px) and (min-width:641px){
  .zd-sky__title{ grid-template-columns:1fr calc(75vw * .47 * .83 + 2.4vw) 1fr; }
}
@media (max-width:640px){
  .zd-sky__title{ display:block; }
}
/* --- Héros : téléphone (titre centré) et bureau (réassurance sous le texte de gauche) --- */
@media (max-width:640px){
  .zd-sky__title{ display:block !important; grid-template-columns:none; text-align:center; }
  .zd-sky__title > span,.zd-sky__title > em{ display:block; justify-self:auto; }
}
@media (min-width:981px){
  .zd-sky__side--left{ bottom:calc(var(--zd-imgh) * .34); }
  .zd-sky__facts{ bottom:calc(var(--zd-imgh) * .19); }
}

/* --- Héros téléphone : tout tient dans le premier écran ---
   Scène = hauteur de l'écran moins l'en-tête (111 px) ; texte, boutons et
   réassurance posés sur le bas du rocher, sur un voile sombre dégradé. */
@media (max-width:640px){
  .zd-sky{ display:grid; grid-template-columns:100%; grid-template-rows:1fr auto auto auto; background:#1a140c; }
  .zd-sky__stage{
    grid-row:1 / -1; grid-column:1;
    aspect-ratio:auto; height:calc(100svh - 111px); min-height:560px; max-height:860px;
  }
  .zd-sky__stage::after{
    content:""; position:absolute; inset:auto 0 0 0; height:46%; z-index:3; pointer-events:none;
    background:linear-gradient(to bottom, rgba(24,17,8,0) 0%, rgba(24,17,8,.55) 38%, rgba(24,17,8,.86) 100%);
  }
  .zd-sky__title{ top:3.5%; }
  .zd-sky__product{ height:33%; bottom:41%; }
  .zd-sky__shadow{ bottom:40%; }
  .zd-sky__side,.zd-sky__facts{ grid-column:1; position:relative; z-index:5; align-self:end; }
  .zd-sky__side--left{ grid-row:2; padding:0 var(--zd-gutter) 14px; color:#fff; font-size:15.5px; line-height:1.5; text-shadow:0 1px 8px rgba(0,0,0,.35); }
  .zd-sky__side--right{ grid-row:3; padding:0 var(--zd-gutter) 14px; }
  .zd-sky__facts{ grid-row:4; padding:0 var(--zd-gutter) 20px; color:#fff; font-size:13px; gap:6px 14px; }
  .zd-sky__facts svg{ color:var(--zd-green-light); }
  .zd-sky__cta .zd-h-btn--dark{ background:var(--zd-orange); color:var(--zd-black); }
  .zd-sky__ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.85); }
  .zd-sky__ghost:hover{ background:#fff; color:var(--zd-black); }
  .zd-sky + .zd-ribbons{ margin-top:0; }
}
/* Petits écrans bas (iPhone SE…) : on resserre */
@media (max-width:640px) and (max-height:700px){
  .zd-sky__title{ font-size:clamp(42px,12.5vw,54px); }
  .zd-sky__product{ height:29%; bottom:44%; }
  .zd-sky__shadow{ bottom:43%; }
  .zd-sky__side--left{ font-size:14.5px; padding-bottom:10px; }
  .zd-sky__cta .zd-h-btn{ height:46px; }
}
@media (max-width:640px){
  .zd-sky__side,.zd-sky__facts{ left:auto !important; right:auto !important; bottom:auto !important; top:auto !important; width:100% !important; }
  .zd-sky__stage::after{
    height:58%;
    background:linear-gradient(to bottom, rgba(24,17,8,0) 0%, rgba(24,17,8,.45) 30%, rgba(24,17,8,.78) 55%, rgba(24,17,8,.9) 100%);
  }
}
@media (max-width:640px){
  .zd-sky__stage{ min-height:520px; }
  .zd-sky__stage::after{
    height:40%;
    background:linear-gradient(to bottom, rgba(24,17,8,0) 0%, rgba(24,17,8,.62) 32%, rgba(24,17,8,.88) 70%, rgba(24,17,8,.92) 100%);
  }
  .zd-sky__product{ bottom:43%; }
  .zd-sky__shadow{ bottom:42%; }
}
@media (max-width:640px) and (max-height:700px){
  .zd-sky__title{ top:2.5%; }
  .zd-sky__product{ height:28%; bottom:46%; }
  .zd-sky__shadow{ bottom:45%; }
  .zd-sky__side--left{ padding-bottom:8px; font-size:14px; }
  .zd-sky__side--right{ padding-bottom:10px; }
  .zd-sky__facts{ padding-bottom:12px; font-size:12.5px; }
}
@media (max-width:640px) and (max-height:700px){
  .zd-sky__product{ height:27%; bottom:42.6%; }
  .zd-sky__shadow{ bottom:41.8%; }
}
@media (max-width:640px) and (max-height:700px){
  .zd-sky__product{ bottom:40.8%; }
  .zd-sky__shadow{ bottom:40%; }
}

/* --- Héros : calque « mousse avant » (même photo, rognée sous la crête du rocher)
   posé DEVANT les flacons : leur base s'enfonce dans l'herbe au lieu de flotter. --- */
.zd-sky__fg{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.zd-sky__fg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 100%; }
.zd-sky__product{ z-index:2; }
.zd-sky__shadow{ z-index:2; }
.zd-sky__product{ bottom:calc(var(--zd-imgh) * .378); }
.zd-sky__shadow{ bottom:calc(var(--zd-imgh) * .372); }
@media (max-width:980px){
  .zd-sky__product{ bottom:37.8%; }
  .zd-sky__shadow{ bottom:37.2%; }
}
@media (max-width:640px){
  .zd-sky__stage::after{ z-index:4; }
  .zd-sky__product{ bottom:38.6%; }
  .zd-sky__shadow{ bottom:38%; }
}
@media (max-width:640px) and (max-height:700px){
  .zd-sky__product{ bottom:38.6%; height:27%; }
  .zd-sky__shadow{ bottom:38%; }
}
/* Profondeur dans la mousse : pied des flacons à ~60 % de l'image (≈ 1,5 % masqué par l'herbe) */
.zd-sky__product{ bottom:calc(var(--zd-imgh) * .397); }
.zd-sky__shadow{ bottom:calc(var(--zd-imgh) * .392); }
@media (max-width:980px){ .zd-sky__product{ bottom:39.7%; } .zd-sky__shadow{ bottom:39.2%; } }
@media (max-width:640px){ .zd-sky__product{ bottom:39.7%; } .zd-sky__shadow{ bottom:39.2%; } }
@media (max-width:640px) and (max-height:700px){ .zd-sky__product{ bottom:39.7%; } .zd-sky__shadow{ bottom:39.2%; } }
.zd-sky__product{ bottom:calc(var(--zd-imgh) * .404); }
.zd-sky__shadow{ bottom:calc(var(--zd-imgh) * .399); }
@media (max-width:980px){ .zd-sky__product{ bottom:40.4% !important; } .zd-sky__shadow{ bottom:39.9% !important; } }