/* ═══════════════════════════════════════════════════════════════════════════
   L'ACCUEIL

   POURQUOI UNE FEUILLE À PART
   L'accueil est la seule page du site qui porte un carrousel plein écran, une
   trame de motifs, des titres animés mot à mot et un rail à flèches. Ces
   mécanismes pèsent, et huit pages sur neuf n'en ont aucun usage : les laisser
   dans `pages.css` les faisait charger partout. Cette feuille n'est appelée que
   par `is_front_page()`.

   CE QUI A CHANGÉ, ET POURQUOI
   La version précédente était PROPRE et VIDE. Un titre à gauche, une image à
   droite, puis huit rangées de cartes bordées sur fond blanc. Aucune image ne
   touchait le bord de l'écran, aucun aplat sombre ne portait la marque, le
   motif de la maison n'apparaissait qu'en filigrane à 7 % dans un coin, et la
   vidéo de campagne s'affichait avec les contrôles NATIFS du navigateur — une
   barre grise de lecteur multimédia au milieu d'une page de cosmétique.

   Les trois maisons qu'on prend pour repère (Noura, ONAS, KAM) font toutes la
   même chose et le site ne la faisait nulle part : ELLES OUVRENT SUR UNE IMAGE
   QUI OCCUPE L'ÉCRAN ENTIER. Le reste — le rythme des fonds, le filet sous les
   titres — était déjà juste ; c'est l'ouverture qui manquait, et avec elle
   toute idée de tenue.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 0 · (la trame et les mots animés vivent dans `pages.css`) ══════════════
   Ils ont été déplacés le 2026-08-29 : les huit autres pages reçoivent la même
   ouverture que l'accueil, avec le même motif et le même titre animé. Une
   mécanique employée par neuf pages appartient à la feuille que les neuf
   chargent — c'est la leçon des cartes produit, qui étaient dans `boutique.css`
   que l'accueil ne charge pas. */

/* ═══ 2 · L'OUVERTURE — LE CARROUSEL PLEIN ÉCRAN ════════════════════════════ */

.ad-ouverture {
	position: relative;
	margin-inline: calc(50% - 50vw);
	/* `svh` et non `vh` : sur un téléphone, `100vh` compte la barre d'adresse
	   qui va disparaître — le bas du volet passe alors sous l'écran au premier
	   chargement, et le bouton d'appel à l'action avec lui. */
	height: 100svh;
	min-height: 620px;
	max-height: 1000px;
	overflow: hidden;
	background: var(--ad-prune-nuit);
	color: #fff;
	isolation: isolate;
}

/* Le fond : une prune nuit qui s'éclaircit vers la droite, là où se tient
   l'égérie. Un aplat uni derrière un sujet détouré le fait flotter ; une
   variation de valeur lui donne un sol. */
.ad-ouverture::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 90% at 78% 60%, rgba(104, 26, 83, .85), transparent 62%),
		linear-gradient(160deg, #3A0C2C 0%, #4A1039 46%, #2C0721 100%);
	z-index: 0;
}

.ad-ouverture .ad-trame { z-index: 1; }

.ad-volet {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.1s var(--ad-courbe), visibility 0s linear 1.1s;
}
.ad-volet.is-actif {
	opacity: 1;
	visibility: visible;
	transition: opacity 1.1s var(--ad-courbe), visibility 0s;
}

.ad-volet__grille {
	position: relative;
	display: grid;
	/* 1.12 / .88 : la colonne du texte passe de 578 à ~615 px. L'égérie perd
	   37 px de large et ne s'en aperçoit pas — elle est détourée et centrée. */
	grid-template-columns: 1.12fr .88fr;
	align-items: end;
	gap: clamp(20px, 3vw, 48px);
	height: 100%;
}

/* Le mot. Il se tient au tiers haut, pas au milieu : centré verticalement il
   se retrouve sur le visage de l'égérie. */
.ad-volet__mot {
	align-self: center;
	/* ⚠️ LA HAUTEUR DE L'EN-TÊTE NE SUFFIT PAS : IL FAUT L'EN-TÊTE **PLUS** DE
	   L'AIR. Écrit sans la marge finale, le calcul rendait 62 px sur téléphone
	   pour un en-tête haut de 63 : mesuré à la sonde, le haut du titre tombait
	   à 1 px AU-DESSUS du bas de la barre — il passait dessous. Sur grand écran
	   le défaut ne se voyait pas, parce que le bloc y est centré verticalement
	   et que la réserve ne sert alors à rien. Un décalage qui ne se manifeste
	   qu'à une seule largeur ne se voit pas en regardant : il se mesure. */
	padding-block: calc(var(--ad-entete-h) + var(--ad-annonce-h) + clamp(18px, 4vh, 44px)) clamp(60px, 12vh, 130px);
	/* ⚠️ AUCUN `max-width` EN `ch` SUR CE BLOC. Première version : `20ch` — et
	   la colonne est tombée à 212 px. L'unité `ch` se calcule sur la taille de
	   police de L'ÉLÉMENT QUI LA PORTE, pas de son plus gros enfant : ici 16 px
	   hérités du corps de texte, soit 10,6 px par `ch`. Le titre, lui, fait
	   95 px — il s'est brisé en quatre lignes dans une colonne large comme un
	   bouton, et le bouton lui-même passait sur deux lignes.
	   La mesure de lecture se pose sur le TEXTE, jamais sur son conteneur. */
	max-width: min(46vw, 620px);
}
.ad-volet__mot h1,
.ad-volet__mot h2 {
	margin: 0;
	font-family: var(--ad-police-titre);
	/* ⚠️ 300, PAS 600. C'est le seul changement de la refonte qui se voit sans
	   qu'on sache le nommer. Comfortaa en gras est une police de jeu ; la même
	   police en maigre, très grande, chasse serrée, devient une police
	   d'affichage. On n'a pas changé l'identité de la marque : on a cessé de
	   l'écrire en gras. */
	font-weight: 300;
	/* ⚠️ LA CAUSE DES TROIS LIGNES, MESURÉE MOT À MOT. Ce n'est ni le nombre de
	   caractères ni le `max-width` du titre (calculé à 783 px, il ne contraint
	   rien) : c'est la COLONNE DE LA GRILLE, large de 578 px. Les rectangles des
	   mots donnaient « quatre » = 291 px et « temps » = 271 px, soit 584 px avec
	   l'espace — SIX PIXELS de trop. Deux corrections successives fondées sur le
	   compte de caractères n'y ont donc rien changé, et ne pouvaient rien y
	   changer.
	   On rend ces six pixels des deux côtés : le corps descend un peu, et la
	   colonne s'élargit un peu. */
	font-size: clamp(44px, 5.9vw, 92px);
	line-height: 1.04;   /* ,95 : les accents de la 2ᵉ ligne touchaient la 1ʳᵉ */
	letter-spacing: -.035em;
	color: #fff;
	/* ⚠️ MESURÉ : à `13ch`, « quatre gestes » — treize caractères — passait à la
	   ligne et le titre faisait TROIS lignes. L'unité `ch` vaut la largeur du
	   chiffre zéro, et les lettres de Comfortaa sont plus larges que lui : un
	   titre de treize caractères ne tient pas dans treize `ch`. La marge est
	   prise sur la mesure, pas sur le compte de caractères.
	   La contrainte de DEUX lignes est tenue à deux endroits — ici, et dans la
	   longueur des titres eux-mêmes (voir `$ad_volets`). Ni l'un ni l'autre ne
	   suffit seul. */
	max-width: 15.5ch;
}
.ad-volet__mot p {
	margin: 1.5em 0 0;
	max-width: 34ch;
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.75;
	color: var(--ad-lu-sombre);
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity .9s var(--ad-courbe) .35s, transform .9s var(--ad-courbe) .35s;
}
.ad-volet__mot p.ad-volet__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 2.2em;
	/* ⚠️ IL FAUT ANNULER LE `max-width` DU PARAGRAPHE. Les boutons vivent dans un
	   `<p>`, donc `.ad-volet__mot p { max-width: 34ch }` s'appliquait à eux
	   aussi : 383 px pour deux boutons qui en mesurent 265 et 168 — le second
	   passait à la ligne. La mesure de lecture vaut pour du texte, pas pour une
	   rangée de boutons. Mesuré à la sonde : conteneur 383 px, boutons à
	   y=598 et y=659 — puis ENCORE empilés après avoir écrit `max-width: none`
	   sur `.ad-volet__actions` : à (0,1,0) cette règle perd contre
	   `.ad-volet__mot p`, qui vaut (0,2,0). Ce n'était pas la valeur qui était
	   fausse, c'était le sélecteur. D'où `p.ad-volet__actions`. */
	max-width: none;
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity .9s var(--ad-courbe) .5s, transform .9s var(--ad-courbe) .5s;
}
.ad-volet.is-actif .ad-volet__mot p,
.ad-volet.is-actif .ad-volet__actions { opacity: 1; transform: none; }

/* L'égérie. Elle est détourée : elle monte du bas du cadre et s'y appuie —
   posée au milieu avec de l'air en dessous, elle lévite. */
.ad-volet__vue {
	position: relative;
	align-self: end;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.ad-volet__vue img {
	display: block;
	width: auto;
	max-width: 100%;
	height: min(88%, 780px);
	object-fit: contain;
	object-position: bottom center;
	transform: scale(1.06) translate3d(0, 2%, 0);
	transition: transform 1.6s var(--ad-courbe);
	/* Une ombre portée très diffuse ancre le sujet détouré sur le fond. Sans
	   elle, le PNG se lit comme un autocollant collé sur un aplat. */
	filter: drop-shadow(0 40px 70px rgba(0, 0, 0, .45));
}
.ad-volet.is-actif .ad-volet__vue img { transform: none; }

/* ── La commande du carrousel ────────────────────────────────────────────── */
.ad-ouverture__commande {
	position: absolute;
	z-index: 4;
	left: var(--ad-gouttiere);
	right: var(--ad-gouttiere);
	bottom: clamp(24px, 4.5vh, 48px);
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 28px);
}
.ad-ouverture__no {
	font-family: var(--ad-police-titre);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .1em;
	color: #fff;
	white-space: nowrap;
}
.ad-ouverture__no span { color: rgba(255, 255, 255, .5); }

.ad-reperes { display: flex; gap: 10px; flex: 1; max-width: 220px; }
.ad-repere {
	position: relative;
	flex: 1;
	height: 2px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, .28);
	cursor: pointer;
	overflow: hidden;
}
/* La barre du volet courant se remplit pendant son temps d'affichage : le
   visiteur voit qu'il reste et combien. Une pastille pleine dit seulement où
   l'on est ; celle-ci dit aussi quand cela changera. */
.ad-repere::after {
	content: '';
	position: absolute;
	inset: 0;
	transform-origin: left;
	transform: scaleX(0);
	background: #fff;
}
.ad-repere.is-actif::after { animation: adRemplir var(--duree, 6500ms) linear forwards; }
.ad-repere.is-actif.is-pause::after { animation-play-state: paused; }
@keyframes adRemplir { to { transform: scaleX(1); } }

.ad-fleches { display: flex; gap: 8px; margin-left: auto; }
.ad-fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .34);
	color: #fff;
	cursor: pointer;
	transition: background-color .3s var(--ad-courbe), border-color .3s var(--ad-courbe);
}
.ad-fleche:hover, .ad-fleche:focus-visible {
	background: rgba(255, 255, 255, .14);
	border-color: #fff;
}
.ad-fleche svg { width: 16px; height: 16px; }
.ad-fleche--prec svg { transform: rotate(180deg); }

/* ── Les volets PHOTO (2026-10-02) ─────────────────────────────────────────
   Trois photos de campagne de groupe, une par public. Elles couvrent la scène :
   le texte se pose EN BAS à gauche, là où sont les corps, pas les visages ; le
   voile est dense en pied et léger en haut — juste assez pour que la
   navigation blanche reste lisible sur le fond rose des enfants. */
.ad-volet--photo .ad-volet__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
	transition: transform 1.6s var(--ad-courbe);
}
.ad-volet--photo.is-actif .ad-volet__photo { transform: none; }
.ad-volet--photo::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(28, 6, 21, .62), transparent 24%),
		linear-gradient(to top, rgba(28, 6, 21, .94) 0%, rgba(28, 6, 21, .62) 34%, transparent 64%),
		linear-gradient(90deg, rgba(28, 6, 21, .6), transparent 52%);
}
.ad-volet--photo .ad-volet__grille { z-index: 2; grid-template-columns: minmax(0, 1fr); }
.ad-volet--photo .ad-volet__mot {
	align-self: end;
	max-width: min(54vw, 660px);
	padding-bottom: clamp(100px, 14vh, 150px);   /* la commande du carrousel est dessous */
}
.ad-volet--photo .ad-volet__mot h1,
.ad-volet--photo .ad-volet__mot h2 { font-size: clamp(40px, 4.8vw, 74px); max-width: none; }
.ad-volet--photo .ad-volet__mot p { color: rgba(255, 255, 255, .86); }

@media (max-width: 900px) {
	/* ⚠️ HAUTEUR FIXE (audit 2026-10-01). Seul le volet actif était dans le
	   flux (`display: none` sur les autres) : le carrousel mesurait 1 012, 938
	   ou 833 px selon le volet, et toute la page sautait de 74 à 179 px toutes
	   les 6,5 s. Les volets sont maintenant EMPILÉS dans la même cellule de
	   grille : la scène prend la hauteur du plus grand, et ne bouge plus. */
	.ad-ouverture { display: grid; height: auto; min-height: 0; max-height: none; }
	.ad-volet { position: relative; inset: auto; grid-area: 1 / 1; }
	.ad-ouverture__commande { grid-area: 2 / 1; }
	/* ⚠️ SUR TÉLÉPHONE, LE CARROUSEL DEVIENT UNE PILE. Trois volets superposés
	   en absolu réclament une hauteur fixe ; sur un écran étroit, le texte du
	   volet le plus long débordait sous l'image du volet actif. Empilés, ils se
	   lisent l'un après l'autre — et la commande n'a plus lieu d'être. */

	.ad-volet__grille { grid-template-columns: 1fr; align-items: stretch; }
	.ad-volet__mot { max-width: none; padding-bottom: clamp(28px, 5vh, 48px); }
	.ad-volet__vue { height: auto; }
	.ad-volet__vue img { height: auto; max-height: 56vh; }
	.ad-ouverture__commande { position: relative; left: auto; right: auto; bottom: auto; padding: 0 var(--ad-marge) clamp(24px, 4vh, 40px); }
	.ad-fleches { display: none; }

	/* Volets photo : le texte d'abord, la photo ENTIÈRE dessous, calée en bas
	   de la scène — les volets sont empilés dans une même cellule, la photo
	   ne saute donc pas d'un volet à l'autre. Sur 390 px, couvrir l'écran
	   rognerait les deux personnes du bord. */
	.ad-volet--photo { display: flex; flex-direction: column; }
	.ad-volet--photo::after { content: none; }
	.ad-volet--photo .ad-volet__photo {
		position: static;
		order: 2;
		margin-top: auto;
		height: auto;
		aspect-ratio: 16 / 9;
		transform: none;
	}
	.ad-volet--photo .ad-volet__grille { height: auto; }
	.ad-volet--photo .ad-volet__mot { max-width: none; padding-bottom: clamp(24px, 4vh, 36px); }
	.ad-volet--photo .ad-volet__mot h1,
	.ad-volet--photo .ad-volet__mot h2 { font-size: clamp(36px, 10vw, 48px); }
}

/* ── L'en-tête au-dessus du carrousel ────────────────────────────────────── */
/* Sur l'accueil seulement, tant qu'on n'a pas défilé : l'en-tête n'a plus de
   fond. Une barre ivoire posée sur un carrousel plein écran le décapite — elle
   annonce que l'image commence 108 px plus bas, alors que tout l'effet tient à
   ce qu'elle commence en haut. Dès le premier défilement (`ad-defile`, déjà
   posé par `cadre.js`), la barre reprend son fond : rien de nouveau à
   synchroniser. */
body.ad-accueil:not(.ad-defile) .ad-annonce { background: transparent; }
body.ad-accueil:not(.ad-defile) .ad-entete {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-bottom-color: rgba(255, 255, 255, .16);
}
body.ad-accueil:not(.ad-defile) .ad-entete .ad-nav__liste > li > a,
body.ad-accueil:not(.ad-defile) .ad-entete .ad-action { color: #fff; }
body.ad-accueil:not(.ad-defile) .ad-entete .ad-burger__trait { background: #fff; }

/* Le logo noir et rose est illisible sur la prune nuit ; la version blanche
   existe en médiathèque et le thème la connaît déjà (`arlette_logo_clair`).
   Les DEUX sont dans le balisage de l'accueil, et le CSS choisit — bascule
   instantanée au défilement, sans requête ni script. */
.ad-entete__logo--clair { display: none; }
body.ad-accueil:not(.ad-defile) .ad-entete__logo--clair { display: block; }
body.ad-accueil:not(.ad-defile) .ad-entete__logo--sombre { display: none; }


/* ═══ 3 · LA BANDE PLEINE ═══════════════════════════════════════════════════
   Une rubrique qui va au bord de l'écran. `100vw` et non `100%` : le parent est
   la colonne de lecture, et une bande qui s'arrête à ses bords n'est pas une
   bande. `calc(50% - 50vw)` la recentre sur la fenêtre.
   ⚠️ Jamais de `translateX` ni de `width: 100vw` seul sur un élément non
   centré : l'un comme l'autre élargit la zone défilable et fabrique un
   débordement latéral.
   ⚠️ ET ELLE NE POSE AUCUNE RÉSERVE LATÉRALE : c'est `.ad-largeur`, à
   l'intérieur, qui la donne. Sinon son contenu commence 48 px à gauche du
   reste de la page — un décalage qu'on ne voit pas sur une capture isolée. */
.ad-bande-pleine {
	position: relative;
	margin-inline: calc(50% - 50vw);
	padding-block: clamp(64px, 10vh, 120px);
	overflow: hidden;
}


/* ═══ 4 · LES PROMESSES ═════════════════════════════════════════════════════
   Quatre faits, sous l'ouverture. Ils ne sont pas décoratifs : ils répondent
   aux quatre questions qu'un visiteur se pose avant d'acheter un cosmétique
   qu'il ne connaît pas — d'où ça vient, ce qu'il y a dedans, à qui demander,
   pour qui c'est. */
.ad-promesses { border-bottom: 1px solid var(--ad-filet); background: var(--ad-blanc); }
.ad-promesses__liste {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ad-promesses__liste li {
	padding: clamp(24px, 3vw, 38px) clamp(16px, 2vw, 30px);
	/* Filet vertical de séparation entre colonnes : neutre, 1 px, jamais coloré
	   et jamais en bord gauche d'un BLOC (CLAUDE.md § 9). Séparer deux colonnes
	   n'est pas accentuer un bloc. */
	border-left: 1px solid var(--ad-filet);
}
.ad-promesses__liste li:first-child { border-left: 0; padding-left: 0; }
.ad-promesses__nom {
	display: block;
	margin-bottom: 8px;
	font-family: var(--ad-police-titre);
	font-size: clamp(14px, 1.4vw, 16px);
	font-weight: 500;
	color: var(--ad-encre);
}
.ad-promesses__mot { display: block; font-size: 13px; line-height: 1.65; color: var(--ad-encre-douce); }
@media (max-width: 900px) {
	.ad-promesses__liste { grid-template-columns: repeat(2, 1fr); }
	.ad-promesses__liste li:nth-child(3) { border-left: 0; padding-left: 0; }
	.ad-promesses__liste li:nth-child(n+3) { border-top: 1px solid var(--ad-filet); }
}
@media (max-width: 520px) {
	.ad-promesses__liste { grid-template-columns: 1fr; }
	.ad-promesses__liste li { border-left: 0; padding-left: 0; }
	.ad-promesses__liste li + li { border-top: 1px solid var(--ad-filet); }
}


/* ═══ 5 · (les tuiles vivent dans `pages.css`) ══════════════════════════════
   Déplacées le 2026-08-29 : la page « Nos gammes » montre les mêmes tuiles que
   l'accueil, et elle ne charge pas cette feuille. Troisième fois que ce défaut
   se produit — les cartes produit étaient dans `boutique.css`, la trame dans
   `accueil.css`. Une règle employée par deux pages appartient à la feuille que
   les deux chargent. */

/* ═══ 6 · LA ROUTINE ════════════════════════════════════════════════════════ */
/* ⚠️ LA ROUTINE PASSE AU BLANC, LES INSTITUTS GARDENT L'IVOIRE. Les deux
   étaient sur ivoire et se suivaient : deux bandes pleine largeur du même fond
   qui se touchent ne font plus deux rubriques, elles font une seule rubrique
   très longue — c'est le défaut signalé sur les chiffres et les instituts, et
   il valait aussi ici. L'alternance des fonds EST la séparation ; elle ne
   fonctionne que si les fonds alternent vraiment. */
.ad-routine { background: var(--ad-blanc); }
.ad-etapes {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--ad-filet);
	border: 1px solid var(--ad-filet);
}
.ad-etape { padding: clamp(26px, 3vw, 40px); background: var(--ad-blanc); }
/* ⚠️ PLUS DE CHIFFRE GÉANT EN FILIGRANE. Il était posé en fond de carte, à 7 %
   d'opacité et jusqu'à 120 px de haut, pour « donner l'ordre sans le dire ». Il
   ne le donnait pas : à cette pâleur et à cette taille, on lit une tache
   derrière le texte, pas une numérotation — et il a fallu deux mesures rien que
   pour l'empêcher de dépasser sous la carte.
   Le chiffre revient DANS le titre, à la taille du titre, devant le mot, comme
   dans une recette. Il informe au lieu de décorer, et plus rien ne passe
   derrière le texte. */
.ad-etape__no {
	margin-right: .5em;
	color: var(--ad-accent);
	font-variant-numeric: tabular-nums;
}
.ad-etape h3 {
	margin: 0 0 10px;
	font-family: var(--ad-police-titre);
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 400;
	color: var(--ad-encre);
}
.ad-etape p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ad-encre-douce); }
.ad-routine__suite { margin: clamp(32px, 5vh, 52px) 0 0; text-align: center; }
@media (max-width: 900px) { .ad-etapes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ad-etapes { grid-template-columns: 1fr; } }


/* ═══ 7 · LA CAMPAGNE ═══════════════════════════════════════════════════════
   ⚠️ LA VIDÉO NE S'AFFICHE PLUS AVEC LES CONTRÔLES NATIFS. Avant, la page
   posait un `<video controls>` : le navigateur dessinait sa propre barre grise
   — bouton de lecture carré, minuteur « 0:00 », icône plein écran — au milieu
   d'une page de cosmétique. C'est le seul endroit du site où l'interface d'un
   logiciel se voyait.
   Maintenant : une affiche, un bouton dessiné, et la vidéo n'est CHARGÉE qu'au
   clic. Elle pèse 20 Mo ; ne pas la charger d'avance est aussi le premier poste
   d'économie de la page. */
.ad-campagne {
	background: var(--ad-prune);
	color: #fff;
	padding-block: clamp(60px, 9vh, 110px);
}
.ad-campagne__grille {
	position: relative;
	z-index: 2;
	display: grid;
	/* ⚠️ LE TEXTE PREND LA PLUS GRANDE PART, ET C'EST L'INVERSE D'AVANT. Le film
	   est VERTICAL (480 × 854) : dans une colonne large, il n'occuperait sa
	   largeur qu'en devenant plus haut que la fenêtre. C'est la colonne étroite
	   qui lui convient — et le texte hérite de la large, ce dont il n'avait
	   jamais assez. */
	grid-template-columns: 1.25fr .75fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}
.ad-campagne__mot h2 {
	margin: 0;
	font-family: var(--ad-police-titre);
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -.03em;
	color: #fff;
}
.ad-campagne__mot p { margin: 1.2em 0 0; line-height: 1.75; color: var(--ad-lu-sombre); }
.ad-campagne__mot .ad-bouton { margin-top: 1.6em; }

/* ⚠️ 9/16, ET NON 16/9. Le film a TOUJOURS été vertical — 480 × 854, vérifié à
   `ffprobe`. Il était présenté dans un cadre 16/9 en `object-fit: cover` :
   autrement dit on en rognait les deux tiers pour le faire entrer dans un
   format qui n'est pas le sien, et il n'en restait qu'une bande au milieu du
   visage. Le cadre suit la vidéo, jamais l'inverse. */
.ad-film {
	position: relative;
	overflow: hidden;
	max-width: 340px;
	margin-inline: auto;
	background: rgba(0, 0, 0, .3);
}
.ad-film__affiche { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.ad-film video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #000; }
.ad-film__lire {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0;
	background: rgba(28, 6, 21, .22);
	border: 0;
	color: #fff;
	cursor: pointer;
	transition: background-color .4s var(--ad-courbe);
}
.ad-film__lire:hover, .ad-film__lire:focus-visible { background: rgba(28, 6, 21, .06); }
.ad-film__rond {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(62px, 7vw, 88px);
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: transform .5s var(--ad-courbe), background-color .4s var(--ad-courbe);
}
.ad-film__lire:hover .ad-film__rond { transform: scale(1.08); background: rgba(255, 255, 255, .2); }
.ad-film__rond svg { width: 20px; height: 20px; margin-left: 3px; }   /* un triangle centré paraît décalé à gauche */

/* `.ad-bouton--clair` : déplacé dans `style.css` le 2026-10-02 (La Marque l'emploie). */
@media (max-width: 860px) { .ad-campagne__grille { grid-template-columns: 1fr; } }


/* ═══ 8 · LE RAIL DE PRODUITS, ET SES FLÈCHES ═══════════════════════════════
   Le rail défilait déjà au doigt et à la molette. Il lui manquait ce qui rend
   un carrousel LISIBLE sur un écran de bureau : de quoi voir qu'il y a une
   suite. Un rang de produits qui déborde sans flèche ni jauge se lit comme une
   grille tronquée, pas comme une piste.

   ⚠️ LES FLÈCHES DÉPLACENT LE DÉFILEMENT NATIF (`scrollBy`), elles ne
   translatent rien. Un carrousel qui pilote un `transform` doit ensuite
   réimplémenter le doigt, la molette, le clavier, la butée et le retour arrière
   — et il les implémente moins bien que le navigateur. */
.ad-rail-bloc { overflow: hidden; }
.ad-rail {
	/* Le rail file jusqu'au bord droit de l'écran sans que le DOCUMENT déborde :
	   c'est le rail qui défile, pas la page.
	   ⚠️ LA RÉSERVE EST SUR LA PISTE, PAS SUR LE CONTENEUR. En `padding-left` du
	   conteneur de défilement, elle était annulée : la sonde rendait
	   `paddingLeft: 100px` ET `scrollLeft: 100`. Chrome aligne le premier
	   élément `scroll-snap-align: start` sur le début de la zone de défilement
	   en ignorant le padding — le rail démarrait donc déjà décalé, ce que rien
	   ne distingue à l'écran d'un padding qui n'aurait pas pris. */
	margin-right: calc(50% - 50vw);
	scroll-padding-left: var(--ad-gouttiere);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.ad-rail::-webkit-scrollbar { display: none; }
.ad-rail__piste {
	display: flex;
	gap: clamp(16px, 2vw, 26px);
	margin: 0;
	padding: 4px var(--ad-gouttiere) 24px;
	list-style: none;
}
.ad-rail__item { flex: 0 0 clamp(200px, 23vw, 280px); scroll-snap-align: start; }

/* La jauge : la part visible du rail, à sa vraie proportion. Elle dit combien
   il reste, ce qu'une paire de flèches seule ne dit pas. */
.ad-jauge {
	position: relative;
	height: 2px;
	margin-top: 8px;
	background: var(--ad-filet);
	overflow: hidden;
}
.ad-jauge__part {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: var(--part, 30%);
	transform: translateX(var(--pos, 0%));
	background: var(--ad-accent);
	transition: transform .18s linear;
}
.ad-rail-commande { display: flex; align-items: center; gap: 10px; }
.ad-rail-commande .ad-fleche { border-color: var(--ad-filet); color: var(--ad-encre); width: 42px; height: 42px; }
.ad-rail-commande .ad-fleche:hover,
.ad-rail-commande .ad-fleche:focus-visible { background: var(--ad-accent); border-color: var(--ad-accent); color: #fff; }
/* Une flèche qui ne mène nulle part doit se voir éteinte, pas disparaître : un
   bouton qui s'efface déplace ses voisins et fait sauter la ligne. */
.ad-rail-commande .ad-fleche[disabled] { opacity: .3; cursor: default; }
@media (max-width: 700px) { .ad-rail-commande, .ad-jauge { display: none; } }


/* ═══ 9 · LE TITRE ET SON LIEN, SUR UNE MÊME LIGNE ══════════════════════════ */
.ad-tete-ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ad-tete-ligne .ad-tete { margin-bottom: clamp(20px, 3vh, 32px); }
.ad-tete-ligne__lien {
	padding-top: .55em;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ad-accent);
	white-space: nowrap;
}
.ad-tete-ligne__droite { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); padding-top: .2em; }


/* ═══ 10 · LA MARQUE — UN PORTRAIT QUI TIENT LA MOITIÉ DE LA PAGE ═══════════
   Le portrait d'Arlette Debo était une image de 400 px dans une colonne, à
   côté de deux paragraphes. La fondatrice EST la marque : elle mérite un aplat.
   Ici la moitié gauche est un champ prune traversé par la trame, la moitié
   droite le texte — et le portrait détouré chevauche les deux. */
.ad-marque { position: relative; overflow: hidden; background: var(--ad-ivoire); padding: 0; }
.ad-marque__grille { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.ad-marque__vue {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	/* ⚠️ UNE HAUTEUR BORNÉE, ET C'EST L'IMAGE QUI S'Y AJUSTE. Le portrait est un
	   PNG vertical : laissé libre de remplir la colonne, il tirait le bloc
	   entier vers le bas — la rubrique faisait près de 900 px de haut pour deux
	   paragraphes. Ce n'est pas l'image qui décide de la hauteur d'une
	   rubrique, c'est son contenu. */
	min-height: clamp(360px, 46vh, 520px);
	max-height: 620px;
	background: var(--ad-prune);
	overflow: hidden;
}
.ad-marque__vue img {
	position: relative;
	z-index: 1;
	display: block;
	width: auto;
	max-width: 88%;
	height: 100%;
	object-fit: contain;
	object-position: bottom center;
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .35));
}
.ad-marque__mot {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(44px, 7vw, 96px) clamp(28px, 5vw, 84px);
}
.ad-marque__mot h2 {
	margin: 0;
	font-family: var(--ad-police-titre);
	font-size: clamp(30px, 3.6vw, 48px);
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -.03em;
	color: var(--ad-encre);
}
.ad-marque__mot p { margin: 1.3em 0 0; max-width: 46ch; line-height: 1.8; color: var(--ad-encre-douce); }
.ad-marque__mot .ad-bouton { margin-top: 2em; align-self: flex-start; }
@media (max-width: 860px) {
	.ad-marque__grille { grid-template-columns: 1fr; }
	.ad-marque__vue { min-height: 380px; }
}


/* ═══ 11 · (le composant institut vit dans `pages.css`) ═════════════════════
   Déplacé le 2026-08-29 : la page « Nos instituts » emploie le même, et elle ne
   charge pas cette feuille. */

/* ═══ 12 · (les chiffres vivent dans `pages.css`) ═══════════════════════════
   Déplacés le 2026-08-29 : la page « La marque » les affiche aussi. Quatrième
   fois que ce déplacement s'impose — la règle est désormais écrite en tête des
   trois feuilles. */

/* ═══ 12 bis · LES PACKS ════════════════════════════════════════════════════
   La façon la plus simple de commencer une routine — et la maison en vendait
   deux sans jamais les montrer ailleurs que dans le catalogue. */
.ad-packs { background: var(--ad-blanc); }
.ad-packs__grille {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(18px, 2.5vw, 34px);
}
.ad-pack {
	display: grid;
	grid-template-columns: minmax(140px, .8fr) 1.2fr;
	background: var(--ad-prune);
	color: #fff;
	overflow: hidden;
}
.ad-pack__vue { display: block; overflow: hidden; background: var(--ad-prune-nuit); }
.ad-pack__vue img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ad-courbe); }
.ad-pack:hover .ad-pack__vue img { transform: scale(1.05); }

.ad-pack__corps {
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 2.6vw, 34px);
}
.ad-pack__corps h3 {
	margin: 0;
	font-family: var(--ad-police-titre);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 400;
	letter-spacing: -.015em;
}
.ad-pack__corps h3 a { color: #fff; }
.ad-pack__corps h3 a:hover { color: var(--ad-or-clair); }

/* Ce que le pack réunit, nommé. « Pack Pousse » ne dit rien ; « Elixir Asma,
   Spray Salma » dit ce qu'on achète. */
.ad-pack__contenu {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	line-height: 1.9;
}
.ad-pack__contenu a { color: var(--ad-lu-sombre); }
.ad-pack__contenu a:hover { color: #fff; }
.ad-pack__contenu li { position: relative; padding-left: 16px; }
/* Une puce de 3 px, neutre. Ce n'est pas un accent en bord de bloc (§ 9) : elle
   marque un ÉLÉMENT DE LISTE, ce que fait une puce depuis toujours. */
.ad-pack__contenu li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .85em;
	width: 4px;
	height: 1px;
	background: var(--ad-or-clair);
}
.ad-pack__mot {
	margin: 14px 0 0;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--ad-lu-sombre);
}
.ad-pack__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin-top: auto;
	padding-top: clamp(18px, 2.5vh, 26px);
}
.ad-pack__prix { font-family: var(--ad-police-titre); font-size: 20px; font-weight: 400; }
.ad-pack__prix del { opacity: .5; margin-right: 6px; font-size: 15px; }
.ad-pack__prix ins { text-decoration: none; }
@media (max-width: 980px) { .ad-packs__grille { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ad-pack { grid-template-columns: 1fr; } .ad-pack__vue { aspect-ratio: 16 / 10; } }



/* ═══ 13 · MOUVEMENT RÉDUIT ═════════════════════════════════════════════════
   ⚠️ « Réduit » ne veut pas dire « supprimé » : tout doit rester VISIBLE et
   utilisable. On coupe les déplacements et les fondus, jamais le contenu — et
   le carrousel cesse de tourner tout seul, ce qui est précisément la demande
   d'un visiteur qui règle cette préférence. */
@media (prefers-reduced-motion: reduce) {
	.ad-mot__i,
	.ad-volet__mot p,
	.ad-volet__actions,
	.ad-volet__vue img { transform: none !important; opacity: 1 !important; transition: none !important; }
	.ad-volet { transition: none; }
	.ad-repere.is-actif::after { animation: none; transform: scaleX(1); }
	.ad-tuile img { transition: none; }
	.ad-rail { scroll-behavior: auto; }
}


/* ═══ 14 · DÉTAILS ══════════════════════════════════════════════════════════ */

/* `.ad-bouton--ligne-clair` : déplacé dans `style.css` le 2026-10-02. */

/* ⚠️ LA PREMIÈRE RUBRIQUE NE PREND PAS LE RYTHME VERTICAL. `.ad-bloc` pose une
   marge haute de 64 à 128 px : appliquée à l'ouverture, elle décollerait le
   carrousel du haut de la fenêtre — un plein écran qui commence à 128 px n'est
   plus un plein écran. */
.ad-page--accueil > .ad-ouverture { margin-top: 0; }

/* Le carrousel est le premier élément de la page : rien ne doit s'intercaler
   entre lui et le haut de la fenêtre. */
.ad-page--accueil { display: flow-root; }


/* ═══ 15 · LE RYTHME VERTICAL ═══════════════════════════════════════════════
   ⚠️ DEUX BANDES PLEINE LARGEUR QUI SE SUIVENT SE COLLENT. C'est le défaut
   signalé sur les chiffres et les instituts : `.ad-bloc` porte la marge haute
   du rythme de la page, `.ad-bande-pleine` n'en a pas — elle vit de son propre
   `padding-block`. Tant qu'une bande colorée suit une rubrique sur fond clair,
   le changement de fond FAIT la séparation et tout va bien. Dès que deux bandes
   se touchent, il n'y a plus rien entre elles.

   La règle : une bande qui suit une rubrique ordinaire touche (le fond
   sépare) ; deux bandes qui se suivent reçoivent un filet neutre, parce que
   deux aplats voisins ne se séparent pas d'eux-mêmes. Un filet de 1 px n'est
   pas un accent : c'est une séparation, et le § 9 les autorise. */
.ad-bande-pleine + .ad-bande-pleine { border-top: 1px solid var(--ad-filet); }
/* Sur deux fonds sombres consécutifs, l'encre à 12 % ne se voit pas. */
.ad-campagne + .ad-bande-pleine,
.ad-packs + .ad-campagne { border-top-color: var(--ad-filet-clair); }

/* Une rubrique ordinaire qui SUIT une bande pleine largeur a déjà l'air de la
   toucher : la bande finit sur son propre `padding`, et la marge de `.ad-bloc`
   s'y ajoute sans qu'on la voie. On la réduit — sinon l'écart entre deux
   rubriques est deux fois celui d'ailleurs dans la page. */
.ad-bande-pleine + .ad-bloc { margin-top: clamp(48px, 7vh, 88px); }

/* Le journal de l'accueil : TROIS colonnes, pas `auto-fill`.
   ⚠️ `.ad-liste` emploie `repeat(auto-fill, minmax(212px, 1fr))` — juste sur
   une archive, où le nombre d'articles varie. Sur l'accueil il y en a
   exactement trois : `auto-fill` en calculait QUATRE et laissait la dernière
   colonne vide, soit un quart de la rangée en blanc à droite des cartes. */
.ad-page--accueil .ad-liste { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .ad-page--accueil .ad-liste { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ad-page--accueil .ad-liste { grid-template-columns: 1fr; } }

/* Le prix total du pack, et ce qu'il recouvre. `ad-pack__note` dit « les 2
   soins » : sans elle, un total de 15 000 F à côté de deux produits à 5 000 et
   10 000 se lit comme un troisième prix. */
.ad-pack__prix { display: flex; flex-direction: column; line-height: 1.25; }
.ad-pack__note {
	font-family: var(--ad-police);
	font-size: 11.5px;
	letter-spacing: .04em;
	color: var(--ad-lu-sombre);
}
/* Le prix de chaque produit du pack, aligné à droite de son nom : c'est la
   preuve que le total est un total, et pas un prix décidé. */
.ad-pack__contenu li { display: flex; align-items: baseline; gap: 10px; }
.ad-pack__part { margin-left: auto; font-size: 12.5px; color: var(--ad-lu-sombre); white-space: nowrap; }

/* ⚠️ LES CARTES D'ARTICLE DOIVENT AVOIR LA MÊME HAUTEUR. `.ad-liste` porte
   `align-items: start` — juste pour des cartes produit, dont le texte fait une
   ou deux lignes et qui n'ont pas de fond. Une carte d'article a un FOND et une
   bordure : trois blocs de hauteurs différentes côte à côte se lisent comme un
   défaut d'alignement, et les mentions de date ne tombent plus sur la même
   ligne. `stretch` les met à la hauteur de la plus grande, et le
   `margin-top: auto` de la date fait le reste. */
/* (l'alignement des cartes d'article vit dans `pages.css` : la page « News »
   emploie la même liste et ne charge pas cette feuille) */


/* ═══ AUDIT UX DU 2026-10-01 ═════════════════════════════════════════════════ */

/* Les repères du carrousel : 2 px de haut, on ne pouvait pas les toucher. Le
   trait reste de 2 px ; la ZONE de toucher en fait 44. */
.ad-repere { height: 44px; background: none; overflow: visible; }
.ad-repere::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 21px;
	height: 2px;
	background: rgba(255, 255, 255, .28);
}
.ad-repere::after { inset: 21px 0 auto; height: 2px; }

/* Le bouton qui suit le rail des plus choisis. */
.ad-rail-suite { margin: 22px 0 0; text-align: center; }
@media (max-width: 560px) {
	/* Deux cartes et le bord de la troisième : le rail se lit comme une suite. */
	.ad-rail__item { flex-basis: 44vw; }
	.ad-rail__piste { gap: 12px; }
}

/* Les promesses : deux colonnes sur téléphone (elles en prenaient une, 441 px). */
@media (max-width: 520px) {
	.ad-promesses__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
	.ad-promesses__liste li { padding: 16px 0; border-left: 0; }
	.ad-promesses__liste li + li { border-top: 0; }
	.ad-promesses__liste li:nth-child(n+3) { border-top: 1px solid var(--ad-filet); }
	.ad-promesses__nom { margin-bottom: 4px; font-size: 14.5px; }
	.ad-promesses__mot { font-size: 13px; line-height: 1.5; }
}

/* La maison : la gamme en photo pleine colonne, plus un portrait détouré. */
.ad-marque--maison .ad-marque__vue { align-items: stretch; background: #F4EEF1; }
.ad-marque--maison .ad-marque__vue img {
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: none;
}
@media (max-width: 860px) { .ad-marque--maison .ad-marque__vue { min-height: 0; aspect-ratio: 1 / 1; max-height: 420px; } }
.ad-pack__note { font-size: 13px; }
.ad-pack__part { font-size: 13px; }

/* Deux bandes BLANCHES qui se suivent (les packs, puis la routine) cumulaient
   leurs réserves : 168 px de blanc coupés d'un filet, contre 84 ailleurs
   (audit 2026-10-01). La seconde ne reprend pas de réserve haute. */
.ad-packs + .ad-routine { padding-top: 0; border-top: 0; }


/* ═══ 15 · LE GUIDE DES SOINS (2026-10-02) ════════════════════════════════════
   « Quatre gammes, un même soin » : un onglet par étape, et pour chaque étape
   le soin de chaque gamme, côte à côte. Voir `inc/guide.php`.
   ⚠️ LA GAMME SE LIT SOUS LE NOM DU SOIN, jamais au-dessus : c'est la place
   qui fait l'eyebrow, pas la casse (~/regles/03). */
.ad-guide [data-charte-guide="prune"] { --ad-g: #681A53; }
.ad-guide [data-charte-guide="kids"]  { --ad-g: #8A65AB; }
.ad-guide [data-charte-guide="nuit"]  { --ad-g: #2B2329; }
.ad-guide [data-charte-guide="peau"]  { --ad-g: #C98A3D; }
.ad-guide__pastille {
	display: inline-block;
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ad-g, var(--ad-prune));
}

.ad-guide__onglets {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.no-js .ad-guide__onglets { display: none; }
.ad-guide__onglet {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: 2px 10px;
	min-height: 64px;
	padding: 14px 18px;
	border: 1px solid var(--ad-filet);
	background: var(--ad-blanc);
	color: var(--ad-encre);
	text-align: left;
	cursor: pointer;
	transition: border-color .3s var(--ad-courbe), background-color .3s var(--ad-courbe);
}
.ad-guide__onglet:hover { border-color: var(--ad-encre-douce); }
.ad-guide__onglet.is-actif { border-color: var(--ad-prune); background: var(--ad-prune); color: #fff; }
.ad-guide__no { grid-row: 1 / 3; font-family: var(--ad-police-titre); font-size: 14px; color: var(--ad-prune); font-variant-numeric: tabular-nums; }
.ad-guide__onglet.is-actif .ad-guide__no { color: var(--ad-or-clair); }
.ad-guide__verbe { font-family: var(--ad-police-titre); font-size: 18px; line-height: 1.2; }
.ad-guide__quoi { font-size: 13px; color: var(--ad-encre-douce); }
.ad-guide__onglet.is-actif .ad-guide__quoi { color: var(--ad-lu-sombre); }

.ad-guide__panneau { margin-top: clamp(28px, 4vh, 40px); }
.ad-guide__panneau:focus-visible { outline: 2px solid var(--ad-prune); outline-offset: 6px; }
.no-js .ad-guide__panneau + .ad-guide__panneau { margin-top: clamp(48px, 7vh, 72px); }

.ad-guide__intro {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: 16px clamp(28px, 4vw, 56px);
	align-items: start;
	margin-bottom: clamp(24px, 3.5vh, 36px);
}
.ad-guide__intro h3 {
	margin: 0;
	font-family: var(--ad-police-titre);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--ad-encre);
}
.ad-guide__intro h3 span { display: block; margin-top: 4px; font-size: .6em; color: var(--ad-encre-douce); }
.ad-guide__intro > p { grid-column: 1; margin: 0; font-size: 15px; line-height: 1.7; color: var(--ad-encre-douce); }
.ad-guide__intro .ad-guide__diff {
	grid-column: 2;
	grid-row: 1 / 3;
	margin: 0;
	padding: 18px 22px;
	background: var(--ad-ivoire);
	font-size: 15px;
	line-height: 1.7;
	color: var(--ad-encre);
}
.ad-guide__diff span,
.ad-guide__compo span,
.ad-guide__choisir span {
	display: block;
	margin-bottom: 3px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ad-prune);
}

.ad-guide__cartes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 26px);
}
.ad-guide__carte {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ad-blanc);
	border: 1px solid var(--ad-filet);
}
.ad-guide__vue { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ad-ivoire); }
.ad-guide__vue img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ad-courbe); }
.ad-guide__carte:hover .ad-guide__vue img { transform: scale(1.04); }
.ad-guide__corps { display: flex; flex-direction: column; flex: 1; padding: clamp(18px, 2vw, 24px); }
.ad-guide__corps h4 { margin: 0; font-family: var(--ad-police-titre); font-size: 19px; font-weight: 600; line-height: 1.3; }
/* La cible au doigt fait 44 px ; la mise en page ne bouge pas (marge négative). */
.ad-guide__corps h4 a { display: inline-block; padding-block: 11px; margin-block: -11px; color: var(--ad-encre); }
.ad-guide__corps h4 a:hover { color: var(--ad-prune); }
.ad-guide__gamme { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 13px; color: var(--ad-encre-douce); }
.ad-guide__fait { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--ad-encre); }
.ad-guide__compo,
.ad-guide__choisir { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--ad-encre-douce); }
.ad-guide__bas { margin-top: auto; padding-top: 18px; }
.ad-guide__prix { display: block; font-size: 15px; font-weight: 600; color: var(--ad-encre); font-variant-numeric: tabular-nums; }

.ad-guide__routines {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: clamp(28px, 4vh, 40px) 0 0;
	padding: 0;
	list-style: none;
}
.ad-guide__routines a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	height: 100%;
	padding: 12px 16px;
	border: 1px solid var(--ad-filet);
	font-size: 14px;
	line-height: 1.4;
	color: var(--ad-encre-douce);
	transition: border-color .3s var(--ad-courbe);
}
.ad-guide__routines a:hover { border-color: var(--ad-g, var(--ad-prune)); }
.ad-guide__routines strong { display: block; font-family: var(--ad-police-titre); font-size: 15px; font-weight: 600; color: var(--ad-encre); }
.ad-guide__routines .ad-icone { width: 16px; height: 16px; margin-left: auto; flex: none; color: var(--ad-g, var(--ad-prune)); }

@media (max-width: 980px) {
	.ad-guide__routines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.ad-guide__onglets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ad-guide__intro { grid-template-columns: minmax(0, 1fr); }
	.ad-guide__intro .ad-guide__diff { grid-column: 1; grid-row: auto; }
	.ad-guide__cartes { grid-template-columns: minmax(0, 1fr); }
	/* Une carte en LIGNE : la photo à gauche, le soin à droite. Trois cartes
	   empilées à image pleine feraient 1 500 px pour une seule étape. */
	.ad-guide__carte { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: start; }
	.ad-guide__vue { aspect-ratio: 1 / 1; margin: 16px 0 0 16px; }
	.ad-guide__corps { padding: 16px; }
	.ad-guide__corps h4 { font-size: 17px; }
	.ad-guide__bas { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.ad-guide__onglet { padding: 12px 14px; }
	.ad-guide__verbe { font-size: 16px; }
	.ad-guide__routines { grid-template-columns: minmax(0, 1fr); }
}


/* ═══ 16 · LA MAISON (refaite le 2026-10-02) ══════════════════════════════════
   Deux photos de campagne en composition, trois points, les chiffres, deux
   chemins vers La Marque. Classes `ad-maison-` : `.ad-marque` reste à l'ancien
   bloc, que plus rien n'emploie sur l'accueil. */
.ad-maison {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(40px, 6vw, 96px);
}
.ad-maison__vues { position: relative; padding: 0 14% 14% 0; }
.ad-maison__grande { aspect-ratio: 4 / 5; }
.ad-maison__grande img { object-position: 50% 30%; }
.ad-maison__petite {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 46%;
	aspect-ratio: 1 / 1;
	border: 8px solid var(--ad-blanc);
	box-shadow: 0 24px 48px rgba(46, 31, 42, .16);
}
.ad-maison__mot h2 {
	margin: 0;
	font-family: var(--ad-police-titre);
	font-weight: 300;
	font-size: clamp(32px, 3.8vw, 54px);
	line-height: 1.3;
	letter-spacing: -.025em;
	color: var(--ad-encre);
}
.ad-maison__mot h2 .ad-manuscrit { color: var(--ad-rose); letter-spacing: 0; }
.ad-maison__chapeau { margin: 1.4em 0 0; max-width: 44ch; font-size: 16px; line-height: 1.75; color: var(--ad-encre-douce); }
.ad-maison__points { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.ad-maison__points li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 1.6; color: var(--ad-encre-douce); }
.ad-maison__points strong { display: block; font-family: var(--ad-police-titre); font-size: 16px; font-weight: 600; color: var(--ad-encre); }
.ad-maison__no { font-family: var(--ad-police-titre); font-size: 14px; line-height: 1.6; color: var(--ad-prune); font-variant-numeric: tabular-nums; }
.ad-maison__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 30px 0 0; }
.ad-maison__lien { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--ad-encre); }
/* La rubrique suivante est la bande prune de la campagne : sans réserve basse,
   le lien « Notre histoire » touchait l'aplat. */
.ad-maison { margin-bottom: clamp(64px, 10vh, 128px); }
/* Quatre chiffres : une rangée de quatre, jamais trois et un seul dessous. */
.ad-maison .ad-maison__chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .ad-maison .ad-maison__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 860px) {
	.ad-maison { grid-template-columns: minmax(0, 1fr); }
	.ad-maison__vues { padding: 0 18% 18% 0; }
	.ad-maison__grande { aspect-ratio: 4 / 3; }
}