/* ============================================================
   Z DERMA — Page d'accueil
   ============================================================ */

/* ---------- Utilitaires partagés ---------- */
.zd-link-arrow{
	font-family:var(--zd-font-body);
	font-weight:600;
	font-size:15px;
	color:var(--zd-black);
	border-bottom:2px solid var(--zd-orange);
	padding-bottom:2px;
	display:inline-block;
	transition:color var(--zd-transition);
}
.zd-link-arrow:hover{ color:var(--zd-orange-text); }
.zd-link-arrow--onDark{ color:#fff; }
.zd-link-arrow--onDark:hover{ color:var(--zd-orange-light); }
.zd-title--onDark{ color:#fff; }
.zd-title--onDark em{ color:var(--zd-orange-light); }
.zd-eyebrow--dark{ color:#4a2a10; }
.zd-eyebrow--dark::before{ background:#4a2a10; }
.zd-pill{
	display:inline-block;
	background:var(--zd-orange); color:#fff;
	font-family:var(--zd-font-cond); font-weight:700;
	font-size:11px; letter-spacing:.14em;
	padding:4px 10px; border-radius:999px;
}
.zd-price--onDark{ color:#fff; }

/* ============================================================
   1. HERO
   ============================================================ */
.zd-hero{ padding-block:clamp(30px,4vw,64px) clamp(20px,2vw,30px); overflow:hidden; }
.zd-hero__in{
	display:grid;
	grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
	gap:clamp(24px,4vw,64px);
	align-items:center;
}
.zd-hero__title{
	font-size:clamp(46px,7.4vw,104px);
	line-height:.94;
	margin-bottom:22px;
}
.zd-hero__title em{ font-style:italic; font-weight:300; color:var(--zd-orange); }
.zd-hero__copy .zd-lead{ margin-bottom:30px; }
.zd-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px; }
.zd-hero__trust{
	display:flex; flex-wrap:wrap; gap:10px 26px;
	font-size:14px; color:var(--zd-grey);
}
.zd-hero__trust li{ display:flex; align-items:center; gap:8px; }
.zd-hero__trust li::before{
	content:""; width:15px; height:15px; flex:none; border-radius:50%;
	background:var(--zd-green-pale);
	border:2px solid var(--zd-green);
}

/* Visuel : grand disque orange */
.zd-hero__art{ position:relative; }
.zd-hero__disc{
	position:relative;
	background:radial-gradient(circle at 50% 45%, var(--zd-orange-light), var(--zd-orange) 68%);
	border-radius:50%;
	aspect-ratio:1/1;
	display:grid; place-items:center;
	overflow:hidden;
}
.zd-hero__pack{ width:72%; height:72%; object-fit:contain; }
.zd-hero__c{
	position:absolute;
	font-family:var(--zd-font-display);
	font-weight:800;
	font-size:min(46vw,560px);
	line-height:1;
	color:rgba(255,255,255,.18);
	user-select:none;
}
.zd-hero__hint{
	position:absolute; left:50%; transform:translateX(-50%);
	bottom:-6px;
	font-family:var(--zd-font-cond); font-weight:600;
	font-size:13px; letter-spacing:.1em; text-transform:uppercase;
	color:var(--zd-grey); white-space:nowrap;
}

/* Pastille produit (hotspot) */
.zd-hotspot{
	position:absolute; right:0; bottom:12%;
	margin:0; width:min(280px,58%);
	background:#fff;
	border-radius:var(--zd-radius);
	box-shadow:0 18px 44px rgba(17,17,17,.18);
	padding:16px 18px;
}
.zd-hotspot figcaption{ display:grid; gap:6px; }
.zd-hotspot__eyebrow{
	font-family:var(--zd-font-cond); font-weight:700;
	font-size:10.5px; letter-spacing:.16em; color:var(--zd-orange-text);
}
.zd-hotspot strong{ font-family:var(--zd-font-display); font-size:17px; }
.zd-hotspot__meta{ font-size:12.5px; color:var(--zd-grey); }
.zd-hotspot .zd-btn{ margin-top:6px; }

/* ============================================================
   2. BANDEAU DÉFILANT
   ============================================================ */
.zd-marquee .zd-marquee__group span{ color:var(--zd-black); }
.zd-marquee .zd-marquee__group i{ color:var(--zd-black); }

/* ============================================================
   3. À L'UNITÉ
   ============================================================ */
.zd-unit__head{
	display:grid; grid-template-columns:1fr 1fr;
	gap:clamp(20px,3vw,60px); align-items:end;
	margin-bottom:clamp(30px,4vw,56px);
}
.zd-unit__head .zd-lead{ margin-bottom:14px; }

.zd-grid-soins{
	display:grid;
	/* Maquette : 3 colonnes — la carte orange occupe la 1re sur 2 rangées,
	   puis 01 Mousse / 03 Anti-Âge en haut, 04 Crème / Coffret en bas. */
	grid-template-columns:1.08fr 1fr 1fr;
	gap:clamp(14px,1.6vw,22px);
}
.zd-soin{
	position:relative;
	border:1.5px solid var(--zd-line);
	border-radius:var(--zd-radius-lg);
	padding:20px;
	display:flex; flex-direction:column;
	background:#fff;
}
.zd-soin__step{
	font-family:var(--zd-font-cond); font-weight:700;
	font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
	color:var(--zd-orange-text); margin-bottom:8px;
}
.zd-soin__num{
	position:absolute; top:14px; right:18px;
	font-family:var(--zd-font-display); font-weight:700;
	font-size:34px; line-height:1; color:var(--zd-line);
}
.zd-soin__media,.zd-soin__disc{
	background:var(--zd-peach);
	border-radius:var(--zd-radius);
	aspect-ratio:1/1;
	display:grid; place-items:center;
	overflow:hidden; margin-bottom:16px;
}
.zd-soin__media img,.zd-soin__disc img{ width:74%; height:74%; object-fit:contain; }
.zd-soin h3{ font-size:19px; font-weight:600; letter-spacing:0; margin-bottom:8px; }
.zd-soin p{ font-size:14px; color:var(--zd-grey); flex:1 1 auto; margin-bottom:16px; }
.zd-soin__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }

/* Carte mise en avant (orange) */
.zd-soin--feature{
	background:var(--zd-orange);
	border-color:var(--zd-orange);
	color:#fff;
	grid-row:span 2;
}
.zd-soin--feature .zd-soin__step{ color:rgba(255,255,255,.85); }
.zd-soin--feature h3{ font-size:24px; }
.zd-soin--feature p{ color:rgba(255,255,255,.9); }
.zd-soin--feature .zd-soin__disc{ background:transparent; margin-block:14px; }
.zd-soin--feature .zd-soin__disc img{ width:88%; height:88%; }
.zd-soin--feature .zd-price{ color:#fff; }
.zd-soin--feature .zd-pill{ position:absolute; top:18px; right:18px; }

/* Carte coffret (noire) */
.zd-soin--bundle{
	background:var(--zd-black);
	border-color:var(--zd-black);
	color:#fff;
}
.zd-soin--bundle .zd-soin__step{ color:var(--zd-orange-light); }
.zd-soin--bundle p{ color:rgba(255,255,255,.82); }
.zd-soin--bundle .zd-soin__media{ background:#1c1c1c; }
.zd-soin--bundle .zd-price{ color:#fff; }
.zd-soin__gift{
	margin-top:12px;
	font-family:var(--zd-font-cond); font-weight:700;
	font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
	color:var(--zd-green-light);
}

/* ============================================================
   4. BANDE NOIRE COFFRET
   ============================================================ */
.zd-bundle-band{
	background:var(--zd-black);
	color:#fff;
	padding-block:clamp(48px,6vw,96px);
	overflow:hidden;
}
.zd-bundle-band__in{
	display:grid;
	grid-template-columns:1fr 1.15fr;
	gap:clamp(26px,4vw,70px);
	align-items:center;
}
.zd-bundle-band__disc{
	background:var(--zd-orange);
	border-radius:50%;
	aspect-ratio:1/1;
	display:grid; place-items:center;
	max-width:430px;
}
.zd-bundle-band__disc img{ width:62%; height:62%; object-fit:contain; }

/* Cube cadeau blanc brandé (maquette) */
.zd-giftbox{
	position:relative;
	width:58%; aspect-ratio:1/1;
}
.zd-giftbox__lid{
	position:absolute; left:-6%; right:-6%; top:0; height:22%;
	background:#fff; border-radius:7px;
	box-shadow:0 6px 18px rgba(17,17,17,.18);
}
.zd-giftbox__body{
	position:absolute; left:0; right:0; top:20%; bottom:0;
	background:#fff; border-radius:6px;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	gap:5px; padding:10% 8% 8%;
	box-shadow:0 14px 30px rgba(17,17,17,.22);
}
.zd-giftbox__logo{ width:74%!important; height:auto!important; object-fit:contain; }
.zd-giftbox__label{
	font-family:var(--zd-font-display); font-style:italic;
	font-size:clamp(11px,1.3vw,17px); color:var(--zd-orange-text);
	white-space:nowrap;
}
.zd-bundle-band__copy p{ color:rgba(255,255,255,.8); margin-bottom:22px; }
.zd-bundle-band__list{ display:grid; gap:10px; margin-bottom:26px; }
.zd-bundle-band__list li{
	position:relative; padding-left:26px;
	font-size:15px; color:rgba(255,255,255,.92);
}
.zd-bundle-band__list li::before{
	content:""; position:absolute; left:0; top:.5em;
	width:13px; height:13px; border-radius:50%;
	background:var(--zd-green-light);
}
.zd-bundle-band__gift{ color:var(--zd-green-light)!important; font-weight:600; }
.zd-bundle-band__gift::before{ background:var(--zd-orange)!important; }
.zd-bundle-band__buy{
	display:flex; align-items:center; gap:18px; flex-wrap:wrap;
	padding-top:22px; border-top:1px solid rgba(255,255,255,.16);
}
.zd-bundle-band__value{
	font-family:var(--zd-font-cond); font-weight:600;
	font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
	color:rgba(255,255,255,.6);
}

/* ============================================================
   5. DIAGNOSTIC EXPRESS (vert)
   ============================================================ */
.zd-quiz{ background:var(--zd-green); color:#fff; }
.zd-quiz__in{
	display:grid; grid-template-columns:1fr 1.05fr;
	gap:clamp(26px,4vw,64px);
	align-items:center;
}
.zd-quiz__copy .zd-eyebrow{ color:var(--zd-green-light); }
.zd-quiz__copy .zd-eyebrow::before{ background:var(--zd-green-light); }
.zd-quiz__copy p{ color:rgba(255,255,255,.85); margin-bottom:22px; }
.zd-quiz__opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.zd-chip{
	width:100%; text-align:left;
	background:rgba(255,255,255,.1);
	border:1.5px solid rgba(255,255,255,.28);
	border-radius:var(--zd-radius);
	padding:13px 16px;
	color:#fff;
	display:grid; gap:3px;
	transition:background var(--zd-transition), border-color var(--zd-transition);
}
.zd-chip:hover{ background:rgba(255,255,255,.18); }
.zd-chip.is-active{ background:#fff; border-color:#fff; color:var(--zd-black); }
.zd-chip strong{ font-family:var(--zd-font-display); font-size:17px; }
.zd-chip span{ font-size:12.5px; opacity:.85; }

.zd-quiz__card{
	background:#fff; color:var(--zd-black);
	border-radius:var(--zd-radius-lg);
	padding:clamp(18px,2.2vw,28px);
}
.zd-quiz__label{
	font-family:var(--zd-font-cond); font-weight:700;
	font-size:12px; letter-spacing:.16em; text-transform:uppercase;
	color:var(--zd-green);
	display:block; text-align:right; margin-bottom:14px;
}
.zd-quiz__label em{ font-style:italic; color:var(--zd-orange); }
.zd-quiz__pair{
	display:grid; grid-template-columns:1fr auto 1fr;
	gap:12px; align-items:center;
}
.zd-quiz__pair figure{ margin:0; }
.zd-quiz__media{
	border-radius:var(--zd-radius);
	aspect-ratio:1/1;
	display:grid; place-items:center;
	overflow:hidden; margin-bottom:8px;
}
.zd-quiz__pair figure:first-child .zd-quiz__media{ background:var(--zd-orange); }
.zd-quiz__pair figure:last-child .zd-quiz__media{ background:var(--zd-peach); }
.zd-quiz__media img{ width:72%; height:72%; object-fit:contain; }
.zd-quiz__pair figcaption{ display:grid; gap:2px; }
.zd-quiz__pair strong{ font-family:var(--zd-font-display); font-size:14.5px; }
.zd-quiz__plus{
	font-family:var(--zd-font-display); font-size:24px; color:var(--zd-line);
}
.zd-quiz__desc{ font-size:14px; color:var(--zd-grey); margin:16px 0; }
.zd-quiz__buy{
	display:flex; align-items:center; justify-content:space-between;
	gap:14px; flex-wrap:wrap;
	padding-top:16px; border-top:1px solid var(--zd-line);
}
.zd-quiz__buy .zd-price--onDark{ color:var(--zd-black); }
.zd-quiz__buy .zd-price em{ font-size:13px; font-style:normal; color:var(--zd-grey); }
.zd-quiz__note{
	margin-top:12px; font-size:12.5px; color:var(--zd-grey);
}

/* ============================================================
   6. ROUTINE EN 4 GESTES
   ============================================================ */
.zd-routine__head{
	display:grid; grid-template-columns:1.2fr 1fr;
	gap:clamp(18px,3vw,50px); align-items:end;
	margin-bottom:clamp(28px,4vw,52px);
}
/* ---------- Diagramme « soleil » (maquette) ---------- */
.zd-routine__steps{
	display:grid; grid-template-columns:repeat(4,1fr);
	gap:clamp(10px,1.4vw,20px);
	position:relative;
	margin-bottom:clamp(30px,3.6vw,52px);
	padding-block:34px;
}
/* Arc en pointillés qui relie les 4 gestes. */
.zd-routine__steps::before{
	content:""; position:absolute; left:8%; right:8%; top:50%;
	border-top:2px dashed var(--zd-line); z-index:0;
}
.zd-routine__step{ position:relative; z-index:1; }
/* Zigzag : les étapes paires remontent, les impaires descendent. */
.zd-routine__step:nth-child(odd){ transform:translateY(26px); }
.zd-routine__step:nth-child(even){ transform:translateY(-26px); }
.zd-routine__step button{
	width:100%; background:none; border:0; padding:0;
	display:grid; justify-items:center; gap:8px; text-align:center;
}
.zd-routine__dot{
	width:62px; height:62px; border-radius:50%;
	display:grid; place-items:center;
	background:#fff; border:2px solid var(--zd-line);
	font-family:var(--zd-font-cond); font-weight:700; font-size:17px;
	color:var(--zd-grey);
	position:relative;
	transition:all var(--zd-transition);
}
/* Le geste actif devient un soleil : disque orange + rayons. */
.zd-routine__step.is-active .zd-routine__dot{
	background:var(--zd-orange); border-color:var(--zd-orange); color:#fff;
	box-shadow:
		0 0 0 9px rgba(255,107,26,.16),
		0 0 0 20px rgba(255,107,26,.08),
		0 10px 26px rgba(255,107,26,.36);
}
.zd-routine__step.is-active .zd-routine__dot::before{
	content:""; position:absolute; inset:-16px; border-radius:50%;
	background:repeating-conic-gradient(
		var(--zd-orange) 0deg 3deg, transparent 3deg 18deg);
	mask:radial-gradient(circle, transparent 54%, #000 56%);
	-webkit-mask:radial-gradient(circle, transparent 54%, #000 56%);
	opacity:.55;
	z-index:-1;
}
.zd-routine__name{ font-family:var(--zd-font-display); font-weight:600; font-size:15.5px; }
.zd-routine__verb{
	font-family:var(--zd-font-cond); font-weight:600;
	font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
	color:var(--zd-orange-text);
}
.zd-routine__detail{
	background:var(--zd-peach);
	border-radius:var(--zd-radius-lg);
	padding:clamp(20px,2.4vw,34px);
	display:grid; grid-template-columns:1.4fr .6fr;
	gap:24px; align-items:center;
}
.zd-routine__badge{
	font-family:var(--zd-font-cond); font-weight:700;
	font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
	color:var(--zd-orange-text);
	display:inline-block; margin-bottom:10px;
}
.zd-routine__detail-in h3{ font-size:clamp(22px,2.4vw,31px); margin-bottom:10px; }
.zd-routine__detail-in p{ color:var(--zd-grey); }
.zd-routine__media{ display:grid; place-items:center; }
/* Les détourages fournis sont de petite résolution (ex. sérum 120×355) :
   on borne pour ne pas les agrandir et rester net. À revoir avec des HD. */
.zd-routine__media img{ max-height:300px; width:auto; max-width:100%; object-fit:contain; }
.zd-routine__tip{ text-align:center; margin-top:20px; font-size:13.5px; color:var(--zd-grey); }

/* ============================================================
   7. PROMESSE (orange)
   ============================================================ */
.zd-promise{
	background:var(--zd-orange);
	color:var(--zd-black);
	padding-block:clamp(48px,6vw,96px);
}
.zd-promise .zd-title em{ color:#4a2a10; }
.zd-promise__grid{
	display:grid; grid-template-columns:1fr auto 1fr;
	gap:clamp(20px,3vw,54px);
	align-items:center;
	margin-top:clamp(28px,4vw,52px);
}
.zd-promise__col{ display:grid; gap:26px; }
.zd-promise__col li span,.zd-promise__grid li span{
	display:block;
	font-family:var(--zd-font-cond); font-weight:700;
	font-size:13px; letter-spacing:.16em;
	color:#4a2a10; margin-bottom:5px;
}
.zd-promise__col li strong{
	font-family:var(--zd-font-display); font-weight:600;
	font-size:clamp(18px,1.8vw,23px);
	display:block; margin-bottom:6px;
}
.zd-promise__col li p{ font-size:14.5px; color:rgba(17,17,17,.72); }
.zd-promise__disc{
	background:var(--zd-green-deep);
	border-radius:50%;
	aspect-ratio:1/1; width:min(330px,72vw);
	display:grid; place-items:center;
	position:relative;
}
.zd-promise__disc::after{
	content:""; position:absolute; inset:-14px;
	border-radius:50%; border:2px dashed rgba(17,17,17,.35);
}
.zd-promise__disc img{ width:64%; height:64%; object-fit:contain; }

/* ============================================================
   8. INSTAGRAM
   ============================================================ */
.zd-insta__head{
	display:flex; align-items:flex-end; justify-content:space-between;
	gap:20px; flex-wrap:wrap; margin-bottom:clamp(22px,3vw,38px);
}
.zd-insta__grid{
	display:grid; grid-template-columns:repeat(5,1fr);
	gap:clamp(10px,1.2vw,18px);
}
.zd-insta__post{
	margin:0; aspect-ratio:1/1; border-radius:var(--zd-radius);
	overflow:hidden; display:grid; place-items:center;
	background:var(--zd-grey-soft);
}
.zd-insta__post img{ width:100%; height:100%; object-fit:cover; }
.zd-insta__post--orange{ background:var(--zd-orange); }
.zd-insta__post--orange img{ width:70%; height:70%; object-fit:contain; }
.zd-insta__post--peach{ background:var(--zd-peach); }
.zd-insta__post--peach img{ width:70%; height:70%; object-fit:contain; }
.zd-insta__post--green{ background:var(--zd-green); }
.zd-insta__post--green img{ width:70%; height:70%; object-fit:contain; }
.zd-insta__post--dark{
	background:var(--zd-black); color:#fff;
	grid-auto-flow:row; align-content:center; gap:6px; text-align:center; padding:14px;
}
.zd-insta__post--dark span{
	font-family:var(--zd-font-cond); font-weight:700;
	font-size:10.5px; letter-spacing:.16em; color:var(--zd-orange-light);
}
.zd-insta__post--dark strong{ font-family:var(--zd-font-display); font-size:clamp(15px,1.5vw,21px); }

/* ============================================================
   9. NEWSLETTER
   ============================================================ */
.zd-news{ background:var(--zd-green-pale); padding-block:clamp(40px,5vw,80px); }
.zd-news__in{
	display:grid; grid-template-columns:1fr 1.1fr;
	gap:clamp(22px,3.4vw,60px);
	align-items:center;
}
.zd-news__form{ display:grid; gap:12px; }
.zd-news__icon{
	width:56px; height:56px; border-radius:50%;
	background:var(--zd-orange); color:#fff;
	display:grid; place-items:center;
}
.zd-news__form p{ font-size:14.5px; color:var(--zd-grey); }
.zd-news__fields{ display:flex; gap:10px; flex-wrap:wrap; }
.zd-news__fields input[type=email]{
	flex:1 1 240px;
	padding:14px 20px;
	border:2px solid var(--zd-black);
	border-radius:999px;
	background:#fff;
	font-family:var(--zd-font-body); font-size:15px;
}
.zd-news__legal{ font-size:12.5px; color:var(--zd-grey); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
	.zd-grid-soins{ grid-template-columns:repeat(2,1fr); }
	.zd-soin--feature{ grid-row:auto; }
}@media (max-width:980px){
	.zd-hero__in,
	.zd-unit__head,
	.zd-routine__head,
	.zd-bundle-band__in,
	.zd-quiz__in,
	.zd-news__in{ grid-template-columns:1fr; }
	.zd-routine__detail{ grid-template-columns:1fr; }
	.zd-routine__media{ order:-1; }
	.zd-promise__grid{ grid-template-columns:1fr; }
	.zd-promise__disc{ margin-inline:auto; }
	.zd-insta__grid{ grid-template-columns:repeat(3,1fr); }
	.zd-hotspot{ position:static; width:100%; margin-top:18px; }
	.zd-hero__hint{ display:none; }
	.zd-bundle-band__disc{ max-width:320px; margin-inline:auto; }
}
@media (max-width:640px){
	.zd-grid-soins{ grid-template-columns:1fr; }
	.zd-quiz__opts{ grid-template-columns:1fr; }
	.zd-quiz__pair{ grid-template-columns:1fr; }
	.zd-quiz__plus{ display:none; }
	.zd-routine__steps{ grid-template-columns:repeat(2,1fr); gap:20px; }
	.zd-routine__steps::before{ display:none; }
	.zd-routine__step:nth-child(odd),
	.zd-routine__step:nth-child(even){ transform:none; }
	.zd-routine__steps{ padding-block:10px; }
	.zd-insta__grid{ grid-template-columns:repeat(2,1fr); }
	.zd-hero__cta .zd-btn{ flex:1 1 100%; }
}