/* ═══════════════════════════════════════════════════════════════════════════
   LES PAGES DE GAMME — leur mise en page propre.
   La CHARTE (les jetons `--ad-u-*` et l'habillage des composants partagés) est
   dans `pages.css`, sous « LES UNIVERS » : elle sert aussi aux deux clubs.
   Ici, seulement ce qu'une page de gamme a et qu'aucune autre n'a — le
   sommaire des relais, la scène d'un soin, son dire et son flacon.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ LA ROUTINE, ÉNONCÉE ═══════════════════════════════════════════════════
   Quatre relais nommés, avant de dérouler les quatre présentations. C'est un
   sommaire, et il se comporte comme tel : on peut cliquer pour sauter au soin.
   ═══════════════════════════════════════════════════════════════════════════ */

.ad-relais {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12px, 1.6vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: relais;
}
.ad-relais > li { counter-increment: relais; }
.ad-relais a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 24px) clamp(14px, 1.8vw, 20px);
	background: var(--ad-u-repos);
	color: inherit;
	text-decoration: none;
	transition: transform var(--ad-duree) var(--ad-courbe),
	            background-color var(--ad-duree) var(--ad-courbe);
}
/* Le numéro du temps, en petit, AVANT le type. Il dit l'ordre — c'est la
   seule information que le sommaire ajoute aux titres qui suivent. */
.ad-relais a::before {
	content: counter(relais);
	font-family: var(--ad-police-titre);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--ad-u-accent);
}
.ad-relais a:hover { transform: translateY(-3px); }
.ad-relais__type {
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--ad-u-douce);
}
.ad-relais__nom {
	font-size: clamp(30px, 3.4vw, 46px);
	color: var(--ad-u-accent);
	/* ⚠️ ICI, AUCUN CHEVAUCHEMENT — ET LA VALEUR EST CALCULÉE, PAS ESSAYÉE.
	   Sur la scène d'un soin, la hampe qui mord sur le type est voulue : les
	   deux mots sont grands et de couleurs différentes. Dans une tuile de
	   sommaire, le type fait 13 px : la hampe le traverse et le rend illisible.
	   Métriques de Hello August (1000 upm) : ascendant réel du « h » +1,09em,
	   ascent déclaré 1,276, descent −0,84 — soit une boîte de contenu de
	   2,116em. À `line-height: L`, la ligne de base tombe à
	   1,276 + (L − 2,116)/2 du haut de la boîte ; la hampe dépasse donc de
	   1,09 − cette valeur. À L = 1,05 il restait 0,35em de débord, ce que la
	   capture montrait. On les rend en marge plutôt qu'en hauteur de ligne :
	   la tuile ne se creuse pas par le bas. */
	line-height: 1.05;
	margin-top: .36em;
}

@media (max-width: 860px) {
	.ad-relais { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ UN SOIN — DEUX TEMPS ══════════════════════════════════════════════════ */

.ad-soin { margin-top: clamp(72px, 11vh, 140px); }

/* ⚠️ DEUX ESPACES S'ADDITIONNAIENT ENTRE LE SOMMAIRE ET LA PREMIÈRE SCÈNE :
   la réserve basse de `.ad-reserve` (jusqu'à 96 px) et la marge haute de
   `.ad-soin` (jusqu'à 140 px), soit 236 px de vide. Sur la gamme sombre, où
   rien ne vient rompre l'aplat, cela se lisait comme une page qui s'arrête.
   La réserve n'a pas d'objet ici — c'est la scène pleine largeur qui suit, et
   elle porte son propre espace. */
[data-ad-charte] > .ad-reserve { padding-bottom: 0; }

/* PREMIER TEMPS — la scène : le portrait de l'égérie, pleine largeur, et le
   nom du soin posé dessus.
   ⚠️ `margin-inline: calc(50% - 50vw)` et non `width: 100vw` : la seconde
   forme déborde de la barre de défilement et fait glisser la page de
   quinze pixels sur les navigateurs qui la réservent. Le thème emploie la
   première partout ailleurs (voir `.ad-ouvre`). */
.ad-soin__scene {
	position: relative;
	margin-inline: calc(50% - 50vw);
	min-height: min(58vh, 520px);
	display: flex;
	align-items: flex-end;
	padding-block: clamp(48px, 8vh, 96px);
	overflow: hidden;
	background: var(--ad-u-scene);
	color: #fff;
	isolation: isolate;
}
.ad-soin__fond {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center 22%;
}
/* ⚠️ LE VOILE TIENT SUR LA PHOTO LA PLUS CLAIRE, pas sur la moyenne. Les
   portraits d'égérie sont des prises de vue en studio, sur fond blanc ou rose
   pâle pour la moitié d'entre eux : un titre blanc y disparaît. Le dégradé est
   donc dense à gauche, où le titre se pose, et s'ouvre à droite, où la photo
   doit rester lisible. Même dispositif que `.ad-ouvre--photo`, mêmes valeurs :
   deux voiles voisins mais différents se remarqueraient d'une rubrique à
   l'autre. */
.ad-soin__scene::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(100deg,
			rgba(var(--ad-u-voile), var(--ad-u-opaque, .92)) 0%,
			rgba(var(--ad-u-voile), calc(var(--ad-u-opaque, .92) - .18)) 44%,
			rgba(var(--ad-u-voile), calc(var(--ad-u-opaque, .92) - .58)) 100%),
		linear-gradient(to top, rgba(var(--ad-u-voile), .55), transparent 58%);
}
.ad-soin__nom { position: relative; z-index: 1; }
.ad-soin__nom .ad-soin-titre__type { color: rgba(255, 255, 255, .8); }
.ad-soin__nom .ad-soin-titre__nom { color: var(--ad-u-signe); }

/* Le portrait se cadre sur le visage, pas sur le centre géométrique : la
   plupart de ces prises de vue sont verticales et le sujet est en haut. */
.ad-soin--inverse .ad-soin__fond { background-position: center 18%; }
/* Un soin sur deux, la scène s'éclaire depuis l'autre bord : sans cela quatre
   bandes successives ont exactement la même ombre au même endroit. */
.ad-soin--inverse .ad-soin__scene::after {
	background:
		linear-gradient(260deg,
			rgba(var(--ad-u-voile), var(--ad-u-opaque, .92)) 0%,
			rgba(var(--ad-u-voile), calc(var(--ad-u-opaque, .92) - .18)) 44%,
			rgba(var(--ad-u-voile), calc(var(--ad-u-opaque, .92) - .58)) 100%),
		linear-gradient(to top, rgba(var(--ad-u-voile), .55), transparent 58%);
}
.ad-soin--inverse .ad-soin__nom { text-align: right; }

/* SECOND TEMPS — ce que le soin dit de lui-même, face à son flacon. */
.ad-soin__dire {
	margin-top: clamp(40px, 6vh, 76px);
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(32px, 5vw, 76px);
	align-items: center;
}
/* L'inversion se fait par l'ORDRE, pas par un second jeu de colonnes : le
   balisage garde le texte avant l'image, ce qui est l'ordre de lecture voulu
   sur mobile et pour un lecteur d'écran. */
.ad-soin--inverse .ad-soin__texte  { order: 2; }
.ad-soin--inverse .ad-soin__flacon { order: 1; }

.ad-soin__accroche {
	margin: 0 0 .7em;
	max-width: 22ch;
	font-family: var(--ad-police-titre);
	font-weight: 300;
	font-size: clamp(24px, 3.1vw, 40px);
	line-height: 1.12;
	letter-spacing: -.02em;
	color: var(--ad-u-encre);
}
.ad-soin__texte p {
	margin: 0;
	max-width: 58ch;
	font-size: clamp(15px, 1.35vw, 17px);
	line-height: 1.78;
	color: var(--ad-u-douce);
}

.ad-soin__acheter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	margin: clamp(26px, 3.4vh, 38px) 0 0;
}
.ad-soin__prix {
	font-family: var(--ad-police-titre);
	font-weight: 600;
	font-size: 17px;
	color: var(--ad-u-encre);
}
/* ⚠️ WooCommerce enveloppe le prix dans ses propres balises (`.woocommerce-Price-amount`,
   `del`, `ins`) : sans cette remise à plat, un prix soldé arrive souligné et
   dans la police du catalogue au milieu d'une phrase de gamme. */
.ad-soin__prix .woocommerce-Price-amount { color: inherit; }
.ad-soin__prix del { opacity: .5; margin-right: 6px; font-weight: 400; }
.ad-soin__prix ins { text-decoration: none; }
.ad-soin__rupture {
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--ad-u-douce);
}

.ad-soin__flacon { margin: 0; }
/* `overflow: hidden` sur le lien : sans lui, l'agrandissement au survol fait
   dépasser l'image de son cadre. */
.ad-soin__flacon a { display: block; overflow: hidden; }
/* Le flacon pose sur un aplat de la charte, pas sur le fond de la page : une
   photo de produit détourée sur fond blanc, posée sur un fond blanc, n'a plus
   de contour. C'est le défaut le plus courant des pages de catalogue. */
/* ⚠️ `cover` ET NON `contain`, ET AUCUNE RÉSERVE INTÉRIEURE. Première
   version : le flacon posé au centre d'un aplat rose pâle, avec 40 px de
   réserve autour — le dispositif juste pour une image DÉTOURÉE. Or les douze
   photos produit ne le sont pas : celle de Sadiya est une prise de vue sur
   fond ROSE VIF. Le résultat était deux roses voisins qui se cognaient, séparés
   par une bordure de 40 px qui ressemblait à un défaut d'export.
   Le cadre garde son aplat de charte — il se voit sur les photos qui ne
   remplissent pas le format — mais l'image occupe tout ce qu'elle peut. */
.ad-soin__flacon img {
	display: block;
	width: 100%;
	height: auto;
	/* ⚠️ CARRÉ, PARCE QUE LE CATALOGUE EST CARRÉ. Relevé sur les douze soins :
	   toutes les images principales font 1080 × 1080. Un cadre en 4/5 les
	   recadrait donc de 20 % — sur la photo de Diarra, le pot arrivait tronqué
	   en haut et en bas. Le ratio n'est pas un choix de mise en page : c'est
	   celui des images qu'on affiche. Si la maison passe un jour au format
	   vertical, c'est ici qu'il faut revenir. */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--ad-u-repos);
	transition: transform .6s var(--ad-courbe);
}
.ad-soin__flacon a:hover img { transform: scale(1.03); }

@media (max-width: 860px) {
	.ad-soin__dire { grid-template-columns: 1fr; }
	/* Sur une colonne, l'inversion n'a plus de sens : le texte passe toujours
	   en premier. Laisser `order` actif y remonterait l'image au-dessus du
	   titre du soin un bloc sur deux. */
	.ad-soin--inverse .ad-soin__texte,
	.ad-soin--inverse .ad-soin__flacon { order: 0; }
	.ad-soin--inverse .ad-soin__nom { text-align: left; }
	.ad-soin__scene { min-height: min(46vh, 380px); }
}

/* ═══ LE PASSAGE AU RAYON ═══════════════════════════════════════════════════ */

.ad-gamme-rayon .ad-tete { max-width: 46ch; }

/* ═══ LES MOTIFS, ET LES DEUX SEULES PAGES QUI EN PORTENT ═══════════════════
   ⚠️ LE PAPILLON ET LA FLEUR NE SONT PAS DES ORNEMENTS GÉNÉRIQUES. La
   médiathèque les range avec le Kids Club (`Papillon-Kids.png`,
   `Fleur-Kids.png`) et le site ne les emploie que là : sur la gamme enfant et
   dans l'institut enfant. Les poser ailleurs — sur la gamme femme, sur le Sky
   Club — leur ôterait ce qu'ils disent, à savoir « ici, c'est pour les
   enfants ».

   ⚠️ ET ILS SONT DISCRETS SANS ÊTRE INVISIBLES. La leçon de la trame vaut ici
   (voir `arlette_trame()`) : un motif à 3 % ne se vérifie pas, il se croit. Ces
   deux-là sont posés à 0,16 et 0,12 d'opacité, GRANDS, et hors de la colonne de
   texte — assez pour se sentir, jamais sur un mot. */
[data-ad-charte="kids"] .ad-soin__dire {
	position: relative;
	isolation: isolate;
}
[data-ad-charte="kids"] .ad-soin__dire::before {
	content: '';
	position: absolute;
	z-index: -1;
	width: clamp(150px, 20vw, 260px);
	aspect-ratio: 1;
	top: -6%;
	right: -2%;
	background: var(--ad-motif-1, none) no-repeat center / contain;
	/* Le contour blanc du motif se fond dans l'ivoire : seule la forme rose
	   reste, et il en faut un peu plus qu'avec un motif pleine teinte. */
	opacity: .3;
	pointer-events: none;
}
/* Un soin sur deux, l'autre motif, de l'autre côté, et plus bas : deux motifs
   au même endroit à quatre reprises se comptent au lieu de se sentir. */
[data-ad-charte="kids"] .ad-soin--inverse .ad-soin__dire::before {
	right: auto;
	left: -3%;
	top: auto;
	bottom: -8%;
	background-image: var(--ad-motif-2, none);
	opacity: .24;
	transform: scaleX(-1);
}
@media (max-width: 860px) {
	/* Sur une colonne, la place manque : un motif de 260 px passe SOUS le
	   texte, où il le salit au lieu de l'accompagner. */
	[data-ad-charte="kids"] .ad-soin__dire::before { display: none; }
}

/* ═══ CE QUE LA CHARTE SOMBRE DEMANDE AUX COMPOSANTS DE CETTE PAGE ══════════
   La charte elle-même est dans `pages.css` (« LES UNIVERS ») ; ce qui suit
   habille les deux composants propres à une page de gamme.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-ad-charte="nuit"] .ad-soin__accroche { color: var(--ad-u-encre); }

/* Le sommaire des relais, sur fond sombre, prend un contour : sans lui, quatre
   tuiles #1F1917 sur un fond #14100F ne se distinguent plus qu'à la loupe. */
[data-ad-charte="nuit"] .ad-relais a { border: 1px solid var(--ad-u-filet); }

/* ═══ AUDIT UX DU 2026-10-01 ═════════════════════════════════════════════════
   Le prix AVANT l'action, l'action détachée du texte, le flacon en tête sur
   téléphone. Le bouton touchait le paragraphe : `.ad-soin__texte p { margin: 0 }`
   (0,1,1) écrasait la marge du `p.ad-soin__acheter` (0,1,0). Le bloc d'achat
   est désormais un `div`, et sa marge tient. */
.ad-soin__acheter { gap: 12px 20px; margin-top: clamp(26px, 3.4vh, 36px); }
.ad-soin__texte .ad-soin__prix { flex-basis: 100%; margin: 0; font-size: 22px; font-variant-numeric: tabular-nums; }
.ad-soin__fiche { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ad-u-douce); }
.ad-soin__acheter .added_to_cart { display: none; }   /* le panneau « Ajouté » le remplace */
.ad-routine-gamme__tout { margin: clamp(22px, 3vh, 32px) 0 0; }

@media (max-width: 860px) {
	/* Le flacon d'abord : on voit ce qu'on achète avant de lire son récit. */
	.ad-soin__flacon { order: -1 !important; max-width: 340px; }
	.ad-soin__dire { gap: 22px; margin-top: 28px; }
	.ad-soin__scene { min-height: min(34vh, 280px); }
}