/* ═══════════════════════════════════════════════════════════════════════════
   0 — CE QUI DONNE SA TENUE À TOUTE LA PAGE
   Trois mécanismes, et rien de plus. Ils valent pour toutes les rubriques :
   c'est ce qui fait qu'une page se tient au lieu d'empiler des blocs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. La révélation ────────────────────────────────────────────────────────
   Fondu + 12 px de montée, une seule fois, jamais liée au scroll.
   `--d` décale les éléments d'UNE MÊME SÉRIE (une grille, une liste) — jamais
   deux rubriques différentes : un décalage entre sections se lit comme une
   lenteur, pas comme un rythme. */
.rv {
	opacity: 0;
	transform: translate3d(0, 12px, 0);
	transition: opacity 700ms cubic-bezier(.16, 1, .3, 1),
	            transform 700ms cubic-bezier(.16, 1, .3, 1);
	transition-delay: var(--d, 0ms);
}
.rv.is-in { opacity: 1; transform: none; }

/* ── 2. (le filet sous les titres a été retiré le 2026-08-28) ────────────────
   Il vivait ici : un trait de 64 px, sous chaque titre de rubrique, qui
   s'étirait à l'apparition. Retiré à la demande de la maison — répété neuf fois
   par page, il ajoutait une ligne à regarder sous chaque titre au lieu de lui
   donner un début. La classe `.ad-filet` n'est plus produite par
   `arlette_titre_section()`.
   ⚠️ NE PAS CONFONDRE avec le JETON `--ad-filet`, qui reste : c'est la couleur
   des séparations neutres de 1 px (bordures de colonnes, traits de grille), et
   elle est employée partout. */

/* ═══ 0 · LA TRAME ══════════════════════════════════════════════════════════
   Le motif de la marque, composé — voir `arlette_trame()` pour ce qu'il est.
   Ici, seulement comment il se pose. */

.ad-trame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	/* ⚠️ LE CREUX AU CENTRE N'EST PAS UN ORNEMENT, C'EST CE QUI REND LE TEXTE
	   LISIBLE. Sans lui, la trame passe derrière les titres et il faut la
	   descendre à 3 % pour qu'on puisse lire — à 3 % elle n'existe plus. Le
	   dégradé lui laisse les bords et lui retire le milieu : le motif est franc
	   là où il est seul, absent là où l'on lit. */
	/* ⚠️ PLUS DE CREUX AU CENTRE — la mosaïque est PLEINE.
	   Il en fallait un tant que la trame comptait six motifs : à cette densité,
	   il aurait fallu les effacer là où l'on lit. Une mosaïque de vingt-quatre
	   n'a plus ce problème, parce que sa lisibilité ne vient pas de l'endroit où
	   elle s'arrête mais de son OPACITÉ — deux fois plus basse qu'avant. Le
	   creux, lui, découpait un ovale clair au milieu de chaque rubrique : sur un
	   fond couvert, cet ovale se voyait plus que le motif.
	   Mesuré après coup : le texte sur ces fonds garde son contraste (voir le
	   relevé du 2026-08-29). */
}

/* Une couche : elle PAVE la rubrique entière avec la volute, à sa taille et
   sous son angle. `inset: -30%` déborde de tous les côtés pour qu'aucun coin ne
   se découvre après la rotation. */
.ad-trame__c {
	position: absolute;
	inset: -30%;
	background-color: currentColor;
	-webkit-mask-image: var(--ad-volute);
	mask-image: var(--ad-volute);
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	-webkit-mask-position: var(--pos, 0 0);
	mask-position: var(--pos, 0 0);
	-webkit-mask-size: var(--t) var(--t);
	mask-size: var(--t) var(--t);
	transform: rotate(var(--r));
}
/* Trois pas, trois angles, trois décalages. Aucun n'est multiple d'un autre :
   deux couches dont les tailles se divisent se superposent périodiquement et
   fabriquent une trame VISIBLE, qui raye la page au lieu de la couvrir. */
/* ⚠️ GRANDES MAILLES, ET NON PETITES. À 190 / 118 / 267 px, la volute se
   répétait sept ou huit fois en largeur : à cette échelle un motif cesse d'être
   un fond et devient un papier peint — on le compte au lieu de le sentir.
   Agrandi, il en reste trois ou quatre par écran, et la spirale redevient
   lisible comme forme. */
.ad-trame__c--1 { --t: 340px; --r:   0deg; --pos:   0     0; }
.ad-trame__c--2 { --t: 213px; --r:  24deg; --pos:  61px 103px; }
.ad-trame__c--3 { --t: 470px; --r: -17deg; --pos: 229px  47px; }

/* Les teintes du motif de charte, éclaircies pour la prune.
   ⚠️ UN SEUL JEU. Il y en avait deux — un « sombre » pour les fonds clairs, un
   « clair » pour les fonds sombres. Le premier a été retiré avec les trames des
   rubriques claires : sur un fond blanc ou ivoire, le motif ne se fond pas, il
   salit. Voir `arlette_trame()`, qui n'accepte plus de palette du tout.
   Une prune #681A53 posée sur une prune nuit #3A0C2C ne se verrait pas : deux
   valeurs voisines de la même teinte ne font pas un motif, elles font une
   salissure. D'où des teintes franches, très peu opaques. */
.ad-trame { color: #fff; }
/* ⚠️ .035, ET C'EST UN PLAFOND. Le motif a été jugé trop présent à .055, et il
   l'était : sur la prune, trois couches à .055 s'additionnent là où elles se
   croisent et le fond se met à bouger sous le texte. Un fond de marque se
   remarque quand on le cherche, pas quand on lit. */
.ad-trame .ad-trame__c { opacity: .035; }
.ad-trame__s--rose     { color: #FF7FBB; }
.ad-trame__s--rosepale { color: #F1E3EB; }
.ad-trame__s--prune    { color: #C98BB4; }


/* ═══ 1 · LES MOTS QUI MONTENT ══════════════════════════════════════════════
   Chaque mot est enfermé dans une fenêtre à hauteur de ligne et monte depuis
   sous son bord. C'est la SEULE animation de texte du site : répétée, elle
   devient une signature ; variée, elle devient du bruit. */

.ad-mot {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	/* ⚠️ LES JAMBAGES. `overflow: hidden` sur une boîte à hauteur de ligne
	   tranche le bas des g, j, p, q, y — « L'art des cheveux » perdait la queue
	   de son y et personne ne voyait POURQUOI le mot semblait faux. On descend
	   donc la fenêtre de 0,18em et on remonte d'autant : la coupe tombe sous
	   les jambages, la ligne de base ne bouge pas. */
	padding-bottom: .18em;
	margin-bottom: -.18em;
}
/* ⚠️ LA MANUSCRITE DESCEND BEAUCOUP PLUS BAS QUE 0,18em. Les jambages de
   Hello August plongent sous la ligne de base d'un tiers de sa taille, et ses
   hampes montent au-dessus de la hauteur de capitale : la fenêtre à hauteur de
   ligne lui coupe donc le HAUT autant que le bas. On l'ouvre des deux côtés.
   La valeur n'est pas choisie à l'œil : elle vient du dessin de la police —
   descendant −0,33em, ascendant +0,15em au-delà de la boîte de ligne. */
.ad-mot--manuscrit {
	/* ⚠️ LA COMPENSATION N'EST PAS TOTALE, ET C'EST LE CORRECTIF. Ailleurs dans
	   le thème, `padding-bottom` et `margin-bottom` s'annulent : la fenêtre
	   s'ouvre sous les jambages sans que la mise en page bouge. À 1,8em, le
	   jambage du « q » de « unique » descendait ainsi DANS le chapeau de la
	   page — dessiné hors de sa boîte, il ne poussait rien. On lui rend donc
	   0,22em de place réelle : la seule part de la compensation qu'il faut
	   abandonner pour que la ligne suivante le voie. */
	padding-bottom: .36em;
	margin-bottom: -.14em;
	padding-top: .18em;
	margin-top: -.18em;
	/* ⚠️ ET LA FENÊTRE COUPE AUSSI SUR LES CÔTÉS. L'attaque du « u » de
	   « unique » entrait dans la marge gauche et s'y faisait trancher — un
	   défaut qu'on prend pour un défaut de dessin de la police. */
	padding-inline: .08em;
	margin-inline: -.08em;
	/* ⚠️ À TAILLE ÉGALE, UNE MANUSCRITE PARAÎT DEUX FOIS PLUS PETITE. Mesuré :
	   « Soyez » en Comfortaa 76 px et « unique » en Hello August 76 px ne font
	   pas le même poids à l'écran — la hauteur d'œil de la seconde vaut à peine
	   la moitié. Sans ce facteur, le mot d'accent devient un mot en retrait,
	   c'est-à-dire l'inverse de ce qu'on lui demande. 1,8 est le rapport des
	   pages d'origine (95 px de Comfortaa contre 180 px de manuscrite). */
	font-size: 1.8em;
	/* La ligne se resserre d'autant : sans quoi le mot d'accent creuse un vide
	   entre le titre et le chapeau. */
	line-height: .74;
}

/* Un GROUPE manuscrit — un nom de gamme, une raison sociale. Voir
   `arlette_mots()` pour ce que 1,8 lui faisait : « Djiguen Karaw » remplissait
   l'écran d'ouverture à lui seul. 1,25 le laisse dominer le titre sans le
   remplacer. */
.ad-mot--manuscrit-long {
	font-size: 1.25em;
	line-height: .88;
}

/* ⚠️ LE MOT ANIMÉ NE CUMULE PAS LES DEUX FACTEURS. `.ad-mot--manuscrit` porte
   déjà 1,8em sur la FENÊTRE — c'est elle qui doit grandir, sinon le glyphe
   dépasse de son cadre d'animation. Sans cette remise à `inherit`, le mot
   recevait 1,8 × 1,5 = 2,7em et « unique » débordait de l'écran. */
.ad-mot__i.ad-manuscrit { font-size: inherit; }

.ad-mot__i {
	display: inline-block;
	transform: translate3d(0, 110%, 0);
	transition: transform 1s cubic-bezier(.16, 1, .3, 1);
	transition-delay: var(--d, 0ms);
}
.is-in .ad-mot__i,
.ad-volet.is-actif .ad-mot__i { transform: none; }

/* Sans JavaScript, `is-in` n'est jamais posé : le titre resterait sous son
   bord, invisible, sur une page par ailleurs complète. La règle ci-dessous
   n'existe QUE pour ce cas — `no-js` est retiré par le premier script exécuté. */
.no-js .ad-mot__i { transform: none; }


/* ── 3. La volute ────────────────────────────────────────────────────────────
   Le monogramme de la maison. Il existe déjà, détouré, dans la médiathèque
   (`Meches-Website.png`, 1888 px, fond transparent) : c'est la spirale du logo,
   celle qu'on retrouve sur chaque flacon et sur les visuels de campagne.

   ⚠️ EMPLOYÉ EN MASQUE, PAS EN IMAGE. `mask-image` ne garde que la FORME : la
   couleur vient alors du fond de l'élément, donc des jetons du site. La même
   volute peut ainsi être prune sur ivoire, ivoire sur prune, ou rose pâle, sans
   un seul fichier de plus — et sans jamais risquer la teinte approximative d'un
   PNG recoloré à la main.

   Redessiner la spirale en SVG aurait été plus léger encore, mais c'est le
   logo : une reproduction « à peu près » d'une identité n'est pas une économie.

   Décoratif : `aria-hidden` côté balisage, et jamais porteur d'information. */
.ad-volute {
	position: absolute;
	pointer-events: none;
	background-color: currentColor;
	opacity: .1;
	-webkit-mask-image: var(--ad-volute);
	mask-image: var(--ad-volute);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

/* ⚠️ UNE VOLUTE QUI SORT DU CADRE DOIT S'Y ÉTEINDRE.
   Coupée net par l'`overflow` de sa rubrique, la spirale ne se lit plus comme
   un motif : il n'en reste qu'un arc à bord franc, qu'on prend pour un défaut
   d'affichage. On croise donc DEUX masques — la forme, et un dégradé qui
   l'efface vers le bord par lequel elle sort. Le motif s'estompe au lieu de
   buter.
   `mask-composite: intersect` est le standard ; `-webkit-mask-composite:
   source-in` sert les moteurs WebKit plus anciens. Si aucun des deux n'est
   compris, seul le premier masque s'applique : on retombe sur la volute pleine,
   pâle — dégradé, pas panne. */
.ad-volute--fondue {
	-webkit-mask-image: var(--ad-volute), var(--ad-fondu);
	mask-image: var(--ad-volute), var(--ad-fondu);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	-webkit-mask-size: contain, 100% 100%;
	mask-size: contain, 100% 100%;
	-webkit-mask-repeat: no-repeat, no-repeat;
	mask-repeat: no-repeat, no-repeat;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LES PAGES ÉCRITES À LA MAIN
   Accueil, La Marque, Instituts, Sky Club, Kids Club, Gammes, Contact, blog.

   Une douzaine de motifs, et rien de plus : un intertitre, une image cadrée,
   un duo texte/image, une grille de cartes, une frise, une liste de noms, un
   pli, un bloc de coordonnées, un formulaire. Les huit pages en sont faites.

   ⚠️ AUCUNE bande verticale d'accent en bord gauche, AUCUN surtitre capitalisé
   au-dessus d'un titre (CLAUDE.md § 9). Un bloc se distingue par sa place et
   par son fond.
   ═══════════════════════════════════════════════════════════════════════════ */

.ad-page {
	display: flow-root;
	/* La dernière rubrique ne TOUCHE plus le pied (audit 2026-10-01 : l'équipe
	   de « La marque » et le journal de l'accueil y étaient collés, 0 px). */
	padding-bottom: clamp(56px, 8vw, 96px);
}
/* …sauf quand la page finit sur une bande pleine largeur : elle porte sa
   propre réserve, et un blanc s'intercalerait entre elle et le pied. */
.ad-page:has(> .ad-bande-pleine:last-child),
.ad-page:has(> :last-child > .ad-bande-pleine:last-child) { padding-bottom: 0; }

/* Le rythme vertical du site. Une seule mesure, déclinée : c'est elle qui fait
   que les pages se ressemblent sans qu'on ait à y penser page par page. */
.ad-bloc { margin-top: clamp(64px, 10vh, 128px); }
.ad-bloc--serre { margin-top: clamp(40px, 6vh, 72px); }

/* Un bloc à fond, en pleine largeur, qui rompt la colonne. Il déborde de son
   conteneur par la marge négative plutôt que par une sortie du flux : le pied
   de page suit, et rien ne se recouvre. */
.ad-bande {
	margin-inline: calc(var(--ad-marge) * -1);
	padding: clamp(56px, 9vh, 104px) var(--ad-marge);
	background: var(--ad-ivoire);
}
.ad-bande--prune { background: var(--ad-prune); color: #fff; }
.ad-bande--prune h2, .ad-bande--prune h3 { color: #fff; }
.ad-bande--prune p { color: var(--ad-lu-sombre); }

/* ── L'intertitre ─── DÉPLACÉ dans `style.css` le 2026-08-31. ──────────────
   ⚠️ IL ÉTAIT ICI, ET LA FICHE PRODUIT NE CHARGE PAS CETTE FEUILLE. Le titre à
   calque « Histoire produit » de la fiche rendait donc deux mots CÔTE À CÔTE au
   lieu de superposés : sans `.ad-tete__calque { position: absolute }`, le
   `<span>` du fond reste dans le flux. Rien n'était cassé dans la brique — la
   règle n'arrivait simplement pas jusqu'à la page.
   C'est la cinquième fois sur ce projet qu'une règle se trouve dans une feuille
   que la page concernée ne charge pas. L'intertitre est employé par les neuf
   pages ET par la boutique : il appartient donc à `style.css`, que tout le site
   charge. ────────────────────────────────────────────────────────────────── */

/* ── L'image cadrée ──────────────────────────────────────────────────────── */
.ad-vue { margin: 0; overflow: hidden; background: var(--ad-ivoire); }
.ad-vue img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-vue--paysage  { aspect-ratio: 3 / 2; }
.ad-vue--portrait { aspect-ratio: 3 / 4; }
.ad-vue--carre    { aspect-ratio: 1 / 1; }
.ad-vue--haute    { aspect-ratio: 2 / 3; }

/* ── Le duo : deux colonnes qui se replient ──────────────────────────────── */
.ad-duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}
.ad-duo--haut { align-items: start; }
.ad-duo--cartes { align-items: stretch; }
.ad-duo__texte > :first-child { margin-top: 0; }
.ad-duo__texte p {
	line-height: 1.75;
	color: var(--ad-encre-douce);
	margin: 0 0 1.1em;
}

/* ── La carte d'un club ──────────────────────────────────────────────────── */
.ad-carte-club { display: flex; flex-direction: column; background: var(--ad-blanc); }
.ad-carte-club .ad-vue { aspect-ratio: 4 / 3; }
.ad-carte-club__corps {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: clamp(22px, 3vw, 34px) 0 0;
}
.ad-carte-club__corps h2 {
	font-family: var(--ad-police-titre);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 600;
	color: var(--ad-accent);
	margin: 0;
}
.ad-carte-club__corps p { margin: 0; line-height: 1.7; color: var(--ad-encre-douce); }
.ad-carte-club__corps .ad-bouton { margin-top: 6px; }

/* Chaque carte porte l'accent de SON univers, sans que la page entière change
   de couleur : le jeton est redéfini sur la carte, pas sur le `<body>`. */
.ad-carte-club.ad-u-sky  { --ad-accent: #2F7FA6; }
.ad-carte-club.ad-u-kids { --ad-accent: #7A54A0; }

/* ── La grille des gammes ────────────────────────────────────────────────── */
.ad-gammes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: clamp(20px, 3vw, 36px);
}
/* ⚠️ DEUX COLONNES SUR TÉLÉPHONE, PAS UNE. En une seule, les quatre gammes
   occupaient 1 300 px de haut à elles seules et la page d'accueil atteignait
   11 158 px : le visiteur devait faire défiler quatre écrans pleins pour passer
   une rubrique. Deux vignettes côte à côte se lisent d'un coup d'œil — c'est
   d'ailleurs ce que font toutes les boutiques sur mobile. */
@media (max-width: 560px) {
	.ad-gammes { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.ad-gamme__corps h2, .ad-gamme__corps h3 { font-size: 15px; }
	.ad-gamme__nombre { font-size: 11px; }
}
.ad-gamme { position: relative; display: flex; flex-direction: column; }
.ad-gamme .ad-vue { background: var(--ad-ivoire); }
.ad-gamme .ad-vue img { transition: transform .6s var(--ad-courbe); }
.ad-gamme:hover .ad-vue img { transform: scale(1.04); }

/* Toute la carte est cliquable, mais UN SEUL lien porte l'adresse : le lien
   couvre la carte en absolu. Deux liens vers la même cible dans une même carte
   obligeraient un lecteur d'écran à annoncer deux fois la même chose. */
.ad-gamme__lien { position: absolute; inset: 0; z-index: 2; }
.ad-gamme__lien:focus-visible { outline: 2px solid var(--ad-accent); outline-offset: 3px; }

.ad-gamme__corps { padding-top: 16px; }
.ad-gamme__corps h2 {
	font-family: var(--ad-police-titre);
	font-size: clamp(17px, 1.9vw, 21px);
	font-weight: 600;
	color: var(--ad-encre);
	margin: 0;
}
.ad-gamme:hover .ad-gamme__corps h2 { color: var(--ad-accent); }
.ad-gamme__nombre {
	margin: 5px 0 0;
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--ad-encre-douce);
}
.ad-gamme__texte { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--ad-encre-douce); }

/* ── Les lieux (Contact) ─────────────────────────────────────────────────── */
.ad-lieux {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(24px, 3.5vw, 44px);
}
.ad-lieu {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: clamp(22px, 3vw, 32px);
	background: var(--ad-ivoire);
}
.ad-lieu h2 {
	font-family: var(--ad-police-titre);
	font-size: clamp(19px, 2.2vw, 24px);
	font-weight: 600;
	color: var(--ad-accent);
	margin: 0;
}
.ad-lieu.ad-u-sky  { --ad-accent: #2F7FA6; }
.ad-lieu.ad-u-kids { --ad-accent: #7A54A0; }

.ad-lieu__liste {
	margin: 0;
	display: grid;
	grid-template-columns: 18px 1fr;   /* la largeur d'une icône, pas d'un mot */
	gap: 10px 12px;
	align-items: center;
}
.ad-lieu__liste dt { display: flex; color: var(--ad-encre-douce); }
.ad-lieu__liste dt svg { width: 16px; height: 16px; stroke-width: 1.6; }
.ad-lieu__liste dd { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ad-encre); }
.ad-lieu__externe { font-size: 13px; color: var(--ad-accent); }

/* ── La façade de carte ──────────────────────────────────────────────────── */
.ad-carte { width: 100%; aspect-ratio: 16 / 8; background: var(--ad-blanc); border: 1px solid var(--ad-filet); }
.ad-carte iframe { display: block; width: 100%; height: 100%; border: 0; }
.ad-carte__ouvrir {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	height: 100%;
	padding: 16px;
	background: none;
	border: 0;
	font: inherit;
	font-size: 13px;
	letter-spacing: .06em;
	color: var(--ad-accent);
	cursor: pointer;
	transition: background .3s var(--ad-courbe);
}
.ad-carte__ouvrir:hover { background: var(--ad-prune-voile); }
.ad-carte__note { font-size: 11px; letter-spacing: .04em; color: var(--ad-encre-douce); }

/* ── Le pli (FAQ) ────────────────────────────────────────────────────────── */
.ad-faq { max-width: 780px; border-top: 1px solid var(--ad-filet); }
.ad-pli { border-bottom: 1px solid var(--ad-filet); }
.ad-pli summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 2px;
	font-family: var(--ad-police-titre);
	font-size: clamp(15px, 1.7vw, 18px);
	font-weight: 600;
	color: var(--ad-encre);
	cursor: pointer;
	list-style: none;
	transition: color .3s var(--ad-courbe);
}
.ad-pli summary::-webkit-details-marker { display: none; }
/* Le signe suit l'état du `<details>` : pas une ligne de JavaScript. */
.ad-pli summary::after {
	content: "";
	flex: none;
	width: 11px; height: 11px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .3s var(--ad-courbe);
}
.ad-pli[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.ad-pli summary:hover { color: var(--ad-accent); }
.ad-pli__corps { padding: 0 2px 22px; }
.ad-pli__corps p { margin: 0; line-height: 1.75; color: var(--ad-encre-douce); }

/* ── La galerie ──────────────────────────────────────────────────────────── */
/* ⚠️ COLONNES FIXES, PAS `auto-fit`. Avec `auto-fit minmax(220px, 1fr)` la
   grille prenait quatre colonnes ; la première image en occupait deux, les deux
   suivantes complétaient la ligne, et la QUATRIÈME se retrouvait seule sur une
   ligne à elle, minuscule à gauche d'un grand vide. Une galerie de quatre vues
   veut un nombre de colonnes décidé, pas déduit de la largeur disponible. */
.ad-galerie {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 1.6vw, 20px);
}
/* La première ouvre sur toute la largeur : elle situe le lieu, les autres le
   détaillent. */
.ad-galerie__grande { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
@media (max-width: 860px) { .ad-galerie { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
	.ad-galerie { grid-template-columns: 1fr; }
	.ad-galerie__grande { aspect-ratio: 3 / 2; }
}

/* ── Les tarifs ──────────────────────────────────────────────────────────── */
.ad-tarifs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: clamp(18px, 2.5vw, 32px);
	max-width: 760px;
}
.ad-tarif { padding: clamp(22px, 3vw, 30px); background: var(--ad-ivoire); }
.ad-tarif h3 {
	margin: 0;
	font-family: var(--ad-police-titre);
	font-size: clamp(17px, 1.9vw, 20px);
	font-weight: 600;
	color: var(--ad-encre);
}
.ad-tarif__prix {
	margin: 12px 0 0;
	font-family: var(--ad-police-titre);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 600;
	color: var(--ad-accent);
	line-height: 1.1;
}
.ad-tarif__unite {
	display: block;
	font-family: var(--ad-police);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .08em;
	color: var(--ad-encre-douce);
	margin-top: 4px;
}
.ad-tarif__abo { margin: 14px 0 0; font-size: 14px; color: var(--ad-encre-douce); }
.ad-tarif__abo strong { color: var(--ad-encre); font-weight: 600; }

.ad-reseaux-ligne { display: flex; gap: 20px; margin: 20px 0 0; font-size: 14px; }

/* ── Le formulaire de rendez-vous ────────────────────────────────────────── */
.ad-rdv { background: var(--ad-blanc); padding: clamp(24px, 3.5vw, 38px); }
.ad-rdv__titre {
	margin: 0 0 20px;
	font-family: var(--ad-police-titre);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 600;
	color: var(--ad-encre);
}
.ad-rdv__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
@media (max-width: 560px) { .ad-rdv__form { grid-template-columns: 1fr; } }

.ad-champ { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ad-champ--large { grid-column: 1 / -1; }
.ad-champ--action { margin-top: 6px; align-items: flex-start; }
.ad-champ--action .ad-bouton { width: auto; }
.ad-champ label { font-size: 14px; color: var(--ad-encre-douce); }
.ad-champ__note { font-style: italic; letter-spacing: 0; opacity: .8; }
.ad-champ input,
.ad-champ select,
.ad-champ textarea {
	width: 100%;
	min-height: 48px;
	padding: 11px 13px;
	font: inherit;
	font-size: 16px;   /* 16 px : en dessous, iOS zoome sur le champ au toucher */
	color: var(--ad-encre);
	background: var(--ad-ivoire);
	/* Le contour à 12 % ne se voyait pas sur l'ivoire : on ne savait pas où
	   écrire (audit 2026-10-01). */
	border: 1px solid rgba(46, 31, 42, .32);
	border-radius: 0;
	transition: border-color .3s var(--ad-courbe);
}
.ad-champ input:focus,
.ad-champ select:focus,
.ad-champ textarea:focus { outline: none; border-color: var(--ad-accent); }
.ad-champ textarea { resize: vertical; min-height: 84px; }

/* Le piège à robots : hors de l'écran, jamais `display: none` — certains
   remplisseurs automatiques ignorent ce qui est masqué de cette façon, et le
   piège ne prendrait plus rien. */
.ad-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ad-message { margin: 0 0 18px; padding: 12px 15px; font-size: 14px; line-height: 1.6; }
.ad-message--ok { background: rgba(47, 127, 76, .1); color: #1F5C33; }
.ad-message--erreur { background: rgba(176, 42, 42, .09); color: #8E2020; }

/* ── Un sous-titre au fil du texte ───────────────────────────────────────── */
.ad-sous-titre {
	margin: 0 0 .7em;
	font-family: var(--ad-police-titre);
	font-size: clamp(22px, 2.8vw, 30px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--ad-encre);
}

/* ── La liste des prestations ─── déplacée : voir « LES PRESTATIONS D'UN
   INSTITUT », plus bas dans cette feuille. ─────────────────────────────────── */

/* Les légendes de galerie : posées SOUS la vue, jamais en surimpression — un
   texte blanc sur une photo dont on ne choisit pas le fond est un pari. */
.ad-galerie--legendee figure { display: flex; flex-direction: column; }
.ad-galerie--legendee figcaption {
	padding: 10px 2px 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ad-encre-douce);
}
/* Le cadrage porte alors sur l'image, pas sur la figure entière. */
.ad-galerie--legendee figure.ad-vue { aspect-ratio: auto; }
.ad-galerie--legendee figure.ad-vue img { aspect-ratio: 1 / 1; }
.ad-galerie--legendee figure.ad-galerie__grande img { aspect-ratio: 16 / 7; }

/* ── Le trio d'ouverture ─────────────────────────────────────────────────── */
.ad-trio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 1.6vw, 22px);
}
@media (max-width: 700px) {
	.ad-trio { grid-template-columns: repeat(2, 1fr); }
	.ad-trio > :last-child { display: none; }   /* deux, plutôt qu'un orphelin */
}

/* ── La frise ────────────────────────────────────────────────────────────── */
.ad-jalons {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: clamp(26px, 3.5vw, 46px);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.ad-jalon { display: flex; flex-direction: column; }
.ad-jalon__corps { padding-top: 18px; }
/* L'année d'abord, en grand : c'est elle qui ordonne la lecture. Elle n'est pas
   un surtitre — c'est la donnée du jalon, pas une étiquette de section. */
.ad-jalon__an {
	margin: 0;
	font-family: var(--ad-police-titre);
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 600;
	line-height: 1;
	color: var(--ad-accent);
}
.ad-jalon h3 {
	margin: 10px 0 8px;
	font-family: var(--ad-police-titre);
	font-size: clamp(16px, 1.8vw, 19px);
	font-weight: 600;
	color: var(--ad-encre);
}
.ad-jalon p:not(.ad-jalon__an) { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ad-encre-douce); }

/* ── La grille des noms ──────────────────────────────────────────────────── */
.ad-noms {
	display: grid;
	/* TROIS colonnes, pas `auto-fit` (audit 2026-10-01) : neuf personnes sur
	   quatre colonnes laissaient une tuile seule et trois cases grises vides
	   (~/regles/01 : jamais une tuile seule sur sa ligne). */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--ad-filet);
	border: 1px solid var(--ad-filet);
}
.ad-noms li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 22px;
	background: var(--ad-blanc);
}
.ad-noms__nom {
	font-family: var(--ad-police-titre);
	font-size: 16px;
	font-weight: 600;
	color: var(--ad-encre);
}
.ad-noms__role { font-size: 13px; color: var(--ad-encre-douce); }
@media (max-width: 760px) {
	.ad-noms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ad-noms li { padding: 16px; }
	.ad-noms__nom { font-size: 15px; }
	/* Nombre impair : la dernière prend la rangée entière. */
	.ad-noms li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── L'article ───────────────────────────────────────────────────────────── */
.ad-article__date { margin: 0 0 1.8em; font-size: 13px; letter-spacing: .05em; color: var(--ad-encre-douce); }
.ad-article__vue { margin: 0 0 2em; }

/* ── Les voisins d'un article ────────────────────────────────────────────── */
.ad-voisins {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 1px;
	max-width: 760px;
	margin: clamp(48px, 7vh, 80px) auto 0;
	background: var(--ad-filet);
	border: 1px solid var(--ad-filet);
}
.ad-voisin { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; background: var(--ad-blanc); }
.ad-voisin--suivant { text-align: right; }
.ad-voisin__sens { font-size: 11px; letter-spacing: .1em; color: var(--ad-encre-douce); }
.ad-voisin__nom { font-family: var(--ad-police-titre); font-size: 15px; font-weight: 600; color: var(--ad-encre); }
.ad-voisin:hover .ad-voisin__nom { color: var(--ad-accent); }

/* Ce qui suivait ici — l'ouverture, les promesses, la routine, la campagne, le
   rail, les chiffres — est parti dans `assets/css/accueil.css`. Ces règles ne
   servaient QUE sur l'accueil, et cette feuille est chargée par neuf pages.
   Voir `functions.php` : `accueil.css` n'est appelée que par `is_front_page()`. */

/* ═══════════════════════════════════════════════════════════════════════════
   L'OUVERTURE D'UNE PAGE
   Une seule entrée en matière pour les neuf pages. Voir `arlette_ouverture()`
   pour ce qu'elle remplace — un titre noir sur fond blanc, huit fois.
   ═══════════════════════════════════════════════════════════════════════════ */

.ad-ouvre {
	position: relative;
	margin-inline: calc(50% - 50vw);
	/* La réserve du haut compte l'en-tête FIXE et la bande d'annonce : sans
	   elle, le titre passe dessous. Mesuré sur l'accueil : à la hauteur exacte
	   de l'en-tête, le titre tombait 1 px trop haut — il faut l'en-tête PLUS de
	   l'air. */
	padding-block: calc(var(--ad-entete-h) + var(--ad-annonce-h) + clamp(48px, 9vh, 104px)) clamp(52px, 9vh, 108px);
	overflow: hidden;
	background: var(--ad-prune-nuit);
	color: #fff;
	isolation: isolate;
}
/* Le même dégradé que l'ouverture de l'accueil : un aplat uni derrière un
   titre le fait flotter ; une variation de valeur lui donne un sol. */
.ad-ouvre::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 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%);
}

/* La variante à photo. Le voile n'assombrit pas pour faire joli : il garantit
   le contraste du titre quelle que soit la photo — un intérieur de salon très
   éclairé passerait autrement à 2:1 sur du blanc. */
.ad-ouvre__fond {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
}
/* ⚠️ LE VOILE EST ÉPAIS, ET C'EST MESURÉ. À .88/.62/.38, le chapeau posé sur
   l'intérieur du Sky Club — bois clair, murs crème, spots — tombait sous le
   seuil de lisibilité dans sa moitié droite. Un voile ne se règle pas à l'œil
   sur UNE photo : il doit tenir sur la plus claire de toutes. */
.ad-ouvre--photo::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(100deg, rgba(28, 6, 21, .94) 0%, rgba(28, 6, 21, .82) 46%, rgba(28, 6, 21, .58) 100%),
		linear-gradient(to top, rgba(28, 6, 21, .5), transparent 55%);
}
.ad-ouvre--photo { min-height: min(52vh, 460px); display: flex; align-items: flex-end; }

.ad-ouvre__mot { position: relative; z-index: 1; }
.ad-ouvre h1 {
	margin: 0;
	max-width: 15.5ch;
	font-family: var(--ad-police-titre);
	/* 300, comme l'accueil : Comfortaa en gras est une police de jeu ; la même
	   en maigre, très grande, chasse serrée, devient une police d'affichage. */
	font-weight: 300;
	font-size: clamp(36px, 5.4vw, 76px);
	/* 1,08 et non ,98 (audit 2026-10-01) : sur trois lignes à 390 px, les
	   capitales accentuées touchaient la ligne du dessus. */
	line-height: 1.08;
	letter-spacing: -.035em;
	color: #fff;
}
/* ⚠️ ET LE CHAPEAU S'ÉCARTE. 0,22em rendus par le mot ne suffisent pas quand
   la manuscrite est le DERNIER mot du titre : sa queue arrive au niveau de la
   première ligne du paragraphe. `:has()` cible exactement ce cas et ne touche
   aucune autre page. */
.ad-ouvre h1:has(.ad-mot--manuscrit) + p { margin-top: 2.1em; }

.ad-ouvre p {
	margin: 1.4em 0 0;
	max-width: 52ch;
	font-size: clamp(15px, 1.4vw, 17.5px);
	line-height: 1.75;
	color: var(--ad-lu-sombre);
}

/* ⚠️ LA PREMIÈRE RUBRIQUE QUI SUIT NE COLLE PAS À L'OUVERTURE. `.ad-bloc` pose
   sa marge haute, mais une page qui commence par `.ad-ouvre` a son premier
   contenu dans un `.ad-largeur` sans marge — il se retrouvait à 0 px du bas de
   la bande. */
.ad-ouvre + * { margin-top: clamp(48px, 8vh, 92px); }

/* Sans JavaScript, les mots du titre doivent rester visibles. `no-js` est
   retiré en tête de `<head>` (voir `header.php`). */
@media (prefers-reduced-motion: reduce) {
	.ad-mot__i { transform: none !important; transition: none !important; }
}

/* ⚠️ UNE PAGE QUI OUVRE SUR UNE BANDE N'A PAS DE RÉSERVE EN HAUT. `.ad-reserve`
   pose la marge qui dégage l'en-tête fixe — indispensable quand la page
   commence par du texte, en trop quand elle commence par `.ad-ouvre`, qui porte
   déjà cette réserve à l'intérieur de son fond. Sans cette règle, une bande
   blanche de 180 px s'intercale entre l'en-tête et l'ouverture. */
.ad-reserve:has(> .ad-ouvre:first-child),
.ad-page:has(> .ad-ouvre:first-child) { padding-top: 0; margin-top: 0; }
.ad-ouvre:first-child { margin-top: 0; }

/* ═══ 5 · LES GAMMES — DES TUILES, PLUS DES FICHES ══════════════════════════
   AVANT : une image carrée, un titre dessous, et « 16 produits ». Trois choses
   qui ne vont pas ensemble. « 16 produits » est du langage d'inventaire : on
   compte des références en réserve, on ne présente pas une gamme de soins. Et
   une image posée au-dessus d'un titre, dans un cadre à bord blanc, c'est une
   fiche de catalogue — la forme dit « choisissez », pas « regardez ».

   MAINTENANT : l'image OCCUPE la tuile, le nom se tient dedans, et un voile
   monte du bas pour qu'il reste lisible sur n'importe quelle photo. C'est le
   motif employé par Noura pour ses espaces et par toutes les maisons de la
   place. La hiérarchie s'inverse : l'image porte, le mot accompagne. */
.ad-tuiles {
	display: grid;
	/* ⚠️ DEUX COLONNES, DEUX RANGÉES — demandé le 2026-08-29. En quatre
	   colonnes, chaque gamme recevait 290 px de large : la photo d'un flacon y
	   devenait une vignette, et la phrase qui dit à qui la gamme s'adresse
	   tenait sur quatre lignes. Sur deux colonnes elles ont 610 px, et le
	   rapport du cadre change avec : 3/4 aurait donné 800 px de haut. */
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(12px, 1.5vw, 22px);
}
.ad-tuile {
	position: relative;
	display: block;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	background: var(--ad-prune-nuit);
	color: #fff;
	isolation: isolate;
}
.ad-tuile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.001);   /* jamais 1 : un scale exactement à 1 saute au survol sur WebKit */
	transition: transform 1.1s var(--ad-courbe);
}
.ad-tuile:hover img, .ad-tuile:focus-visible img { transform: scale(1.07); }

/* Le voile. Il n'est pas là pour assombrir : il est là pour que le texte tienne
   son contraste quelle que soit la photo dessous — une gamme est photographiée
   sur fond rose clair, une autre sur fond noir. */
.ad-tuile::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Plus dense et plus haut (audit 2026-10-01) : le texte blanc tombait sur
	   les flacons BLANCS de Kids Karaw et de Skin Care et s'y perdait. */
	background: linear-gradient(to top, rgba(28, 6, 21, .92) 0%, rgba(28, 6, 21, .7) 30%, rgba(28, 6, 21, .25) 58%, transparent 78%);
	transition: opacity .5s var(--ad-courbe);
}
.ad-tuile__mot {
	position: absolute;
	z-index: 1;
	inset-inline: 0;
	bottom: 0;
	padding: clamp(18px, 2vw, 28px);
}
/* `h2` aussi : la page « Nos gammes » emploie la tuile avec un `h2` (c'est
   son titre de second rang), et elle tombait en Montserrat (audit 2026-10-01). */
.ad-tuile__mot h2,
.ad-tuile__mot h3 {
	margin: 0;
	font-family: var(--ad-police-titre);
	font-size: clamp(20px, 2.4vw, 30px);
	font-weight: 400;
	letter-spacing: -.01em;
	color: #fff;
}
/* « Découvrir » n'apparaît qu'au survol sur grand écran, et reste TOUJOURS
   présent au doigt : un écran tactile n'a pas de survol, et l'affordance y
   disparaîtrait purement et simplement. */
.ad-tuile__suite {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
}
@media (hover: hover) {
	.ad-tuile__suite {
		opacity: 0;
		transform: translate3d(0, 6px, 0);
		transition: opacity .4s var(--ad-courbe), transform .4s var(--ad-courbe);
	}
	.ad-tuile:hover .ad-tuile__suite,
	.ad-tuile:focus-visible .ad-tuile__suite { opacity: 1; transform: none; }
}
@media (max-width: 560px) { .ad-tuiles { grid-template-columns: 1fr; } .ad-tuile { aspect-ratio: 4 / 3; } }



/* ═══ 11 · LES INSTITUTS ════════════════════════════════════════════════════
   DEUX TUILES NE SUFFISAIENT PAS. Les instituts étaient rendus comme les
   gammes — une image, un nom, deux lignes — au milieu d'une page où tout le
   reste se vend en ligne. Ce sont pourtant les deux seuls endroits PHYSIQUES de
   la maison, et la seule chose qu'un concurrent en ligne ne peut pas copier.
   Ils ont maintenant une rubrique à eux, sur son propre fond : ce qu'on y fait,
   où c'est, et le numéro qu'on appelle — chacun a le sien. */

.ad-instituts { background: var(--ad-ivoire); }
.ad-instituts__grille {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(18px, 2.5vw, 36px);
}
.ad-institut {
	display: flex;
	flex-direction: column;
	background: var(--ad-blanc);
	border: 1px solid var(--ad-filet);
}
.ad-institut__vue {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--ad-prune-nuit);
}
.ad-institut__vue img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ad-courbe);
}
.ad-institut:hover .ad-institut__vue img { transform: scale(1.05); }

.ad-institut__corps {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(24px, 3vw, 38px);
}
/* ⚠️ `h2` ET `h3`. Le nom de l'institut est un `h3` sur l'accueil — où le titre
   de la rubrique est le `h2` — et un `h2` sur la page « Nos instituts », où il
   n'y a pas de rubrique au-dessus. Le sélecteur ne visait que `h3` : sur la
   page dédiée, les deux noms retombaient sur la police du système, en plein
   milieu d'un composant par ailleurs identique. La hiérarchie des titres suit
   le CONTEXTE ; le style doit suivre le rôle. */
.ad-institut__corps h2,
.ad-institut__corps h3 {
	margin: 0;
	font-family: var(--ad-police-titre);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 400;
	letter-spacing: -.015em;
}
.ad-institut__corps h2 a,
.ad-institut__corps h3 a { color: var(--ad-encre); }
.ad-institut__corps h2 a:hover,
.ad-institut__corps h3 a:hover { color: var(--ad-accent); }
.ad-institut__mot {
	margin: 12px 0 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--ad-encre-douce);
}

/* Ce qu'on y fait, en trois lignes. C'est l'information que la page ne donnait
   nulle part : « Sky Club » ne dit pas qu'on y fait aussi les ongles. */
.ad-institut__quoi {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ad-institut__quoi li {
	padding: 6px 12px;
	background: var(--ad-prune-voile);
	color: var(--ad-prune);
	font-size: 12.5px;
}

.ad-institut__bas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	/* `margin-top: auto` colle ce bloc en bas : les deux cartes n'ont pas le
	   même nombre de lignes, et sans cela leurs boutons ne s'alignent pas. */
	margin-top: auto;
	padding-top: clamp(20px, 3vh, 30px);
}
.ad-institut__tel {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ad-encre);
	white-space: nowrap;
}
.ad-institut__tel .ad-icone { width: 16px; height: 16px; color: var(--ad-accent); }
@media (max-width: 820px) { .ad-instituts__grille { grid-template-columns: 1fr; } }



/* ═══ LES INFORMATIONS PRATIQUES D'UN INSTITUT ══════════════════════════════
   Où, quel numéro, quand. Trois choses qui décident de la visite, et qui
   étaient dispersées sur trois pages. Voir `arlette_pratique()`. */
.ad-pratique { background: var(--ad-prune-nuit); color: #fff; padding-block: clamp(40px, 6vh, 68px); }
.ad-pratique__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: clamp(24px, 4vw, 56px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ad-pratique__liste li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start; }
.ad-pratique__liste .ad-icone { grid-row: span 2; width: 22px; height: 22px; margin-top: 3px; color: var(--ad-or-clair); }
.ad-pratique__quoi {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ad-lu-sombre);
}
/* Le libellé « Où » est SOUS l'icône et AU-DESSUS de la valeur : ce n'est pas un
   surtitre de section (§ 9), c'est l'étiquette d'un champ — comme sur un
   formulaire, où elle est admise. */
.ad-pratique__valeur { font-family: var(--ad-police-titre); font-size: clamp(16px, 1.7vw, 19px); }
.ad-pratique__valeur a { color: #fff; }
.ad-pratique__valeur a:hover { color: var(--ad-or-clair); }

/* ═══ LES PRESTATIONS D'UN INSTITUT ═════════════════════════════════════════
   ⚠️ ELLES N'ONT PAS DE DESCRIPTION, ET ON N'EN INVENTE PAS. Les onglets du
   site d'origine sont vides et le seul rempli dit « Coming soon » : le marqueur
   « à écrire » reste affiché tant que la maison ne les a pas rédigées. Ce qu'on
   corrige ici est la FORME — cinq cases de tableau, hautes de 60 px, où le nom
   d'une prestation flottait au milieu d'un filet. */
/* ⚠️ CETTE RÈGLE ÉTAIT ÉCRITE DEUX FOIS DANS CETTE FEUILLE, et le second
   exemplaire — celui-ci — annulait un correctif du premier. Il posait
   `minmax(210px, 1fr)` là où l'autre avait `minmax(min(220px, 100%), 1fr)` :
   sans le `min()`, une colonne exige 210 px quoi qu'il arrive, et la grille
   déborde de tout écran plus étroit que 210 px + les gouttières. Le premier
   exemplaire avait donc corrigé le débordement, le second l'avait rétabli en
   silence, et les deux se ressemblaient assez pour qu'on lise l'un en croyant
   avoir lu l'autre. Un seul bloc désormais, avec le `min()`. */
.ad-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--ad-filet);
	border: 1px solid var(--ad-filet);
}
.ad-services li {
	display: flex;
	align-items: center;
	min-height: 104px;
	padding: clamp(18px, 2.2vw, 26px);
	background: var(--ad-blanc);
	font-family: var(--ad-police-titre);
	font-size: clamp(16px, 1.7vw, 19px);
	color: var(--ad-encre);
	transition: background-color .3s var(--ad-courbe);
}
.ad-services li:hover { background: var(--ad-ivoire); }

/* ═══ 12 · LES CHIFFRES, DANS L'HISTOIRE ════════════════════════════════════
   ⚠️ ILS N'ONT PLUS DE BANDE À EUX. Ils en occupaient une, pleine largeur et
   prune, collée à celle des instituts — deux aplats sombres qui se touchaient,
   et quatre nombres qui ne disaient rien que le texte voisin ne disait déjà.
   Mis SOUS le récit de la fondatrice, ils cessent d'être une rubrique et
   redeviennent ce qu'ils sont : la preuve de ce qu'on vient de lire. */
.ad-chiffres__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: clamp(18px, 2.5vw, 32px);
	margin: clamp(28px, 4vh, 44px) 0 0;
	padding: clamp(24px, 3vh, 32px) 0 0;
	border-top: 1px solid var(--ad-filet);
	list-style: none;
}
.ad-chiffres__nombre {
	display: block;
	font-family: var(--ad-police-titre);
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--ad-prune);
	/* ⚠️ `tabular-nums` : sans lui, le compteur qui monte de 0 à 26 CHANGE DE
	   LARGEUR à chaque image — la colonne tremble pendant toute l'animation. */
	font-variant-numeric: tabular-nums;
}
.ad-chiffres__mot {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ad-encre-douce);
}



/* La bande de chiffres de « La marque ». Sur l'accueil ils sont SOUS le récit,
   dans la colonne de texte ; ici ils ont leur bande, parce que la page entière
   parle de la maison et que rien d'autre ne la coupe. */
.ad-chiffres-bande { background: var(--ad-prune-nuit); color: #fff; padding-block: clamp(48px, 7vh, 84px); }
.ad-chiffres__liste--bande {
	margin: 0;
	padding: 0;
	border-top: 0;
	text-align: center;
}
.ad-chiffres__liste--bande .ad-chiffres__nombre { color: #fff; font-size: clamp(34px, 4.4vw, 56px); }
.ad-chiffres__liste--bande .ad-chiffres__mot { color: var(--ad-lu-sombre); }

/* ⚠️ LES CARTES D'ARTICLE S'ALIGNENT SUR TOUTES LES PAGES, pas seulement
   l'accueil. La règle avait été écrite `.ad-page--accueil .ad-liste` : la page
   « News » emploie la même liste sans cette classe, et ses trois cartes y
   gardaient des hauteurs différentes — trois blocs à fond ivoire côte à côte,
   dont les dates ne tombaient pas sur la même ligne.
   C'est la même faute que les feuilles : une règle écrite pour une page alors
   qu'elle vaut pour un COMPOSANT. */
.ad-liste { align-items: stretch; }
.ad-liste > .rv { display: flex; }
.ad-liste .ad-fiche { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   LES UNIVERS — UNE CHARTE POSÉE SUR LE CORPS D'UNE PAGE
   Cinq jetons, trois jeux de valeurs, et un habillage des composants partagés
   qui supposaient un fond clair. Employé par les trois pages de gamme et par
   les deux pages de club : la mécanique est la même, seules les valeurs
   changent.

   ⚠️ ELLE VIT ICI, DANS `pages.css`, ET NON DANS `gamme.css`. Elle y a été
   écrite d'abord, quand seules les gammes en avaient besoin ; les deux pages de
   club l'auraient alors recopiée — deux jeux de chartes à tenir d'accord, et
   c'est exactement le défaut que la reprise du thème corrigeait sur les trois
   en-têtes Elementor. Une règle employée par deux pages appartient à la feuille
   que les deux chargent.

   ⚠️ `[data-ad-charte]` SUR LE CORPS, JAMAIS SUR `body`. L'en-tête, la
   navigation et le pied restent ceux du site sur les cinq pages — c'est la
   condition pour que cinq chartes ne fassent pas cinq sites. Un jeton posé sur
   `body` serait hérité par l'en-tête fixe et par le pied.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-ad-charte] {
	/* Les valeurs par défaut sont celles de la maison : une gamme qu'on
	   ajouterait sans charte rend une page sobre, pas une page cassée. */
	--ad-u-fond:   var(--ad-ivoire);
	--ad-u-encre:  var(--ad-encre);
	--ad-u-douce:  var(--ad-encre-douce);
	--ad-u-accent: var(--ad-prune);
	--ad-u-scene:  var(--ad-prune-nuit);
	--ad-u-repos:  var(--ad-blanc);   /* le fond sur lequel pose un flacon */
	--ad-u-filet:  var(--ad-filet);
	/* ⚠️ LA COULEUR DU PRÉNOM N'EST PAS UN GOÛT, C'EST CE QUI REND LE
	   CHEVAUCHEMENT LISIBLE. Comparé à la production : là-bas aussi la hampe du
	   « S » de Sadiya traverse le mot « Shampoing », et cela fonctionne — parce
	   que le type est BLANC et le prénom ROSE. Écrits dans la même couleur, les
	   deux mots se confondent en un enchevêtrement de traits ; en deux
	   couleurs, l'œil sépare les deux registres et le chevauchement devient ce
	   qu'il doit être : une signature posée sur une ligne.
	   C'est aussi ce qui dispense d'écarter les deux lignes de 0,42em — l'écart
	   que les métriques de la police réclameraient (ascendant +1,09em) et qui
	   aurait cassé le duo pour réparer un défaut de couleur. */
	--ad-u-signe:  var(--ad-rose);
	/* ⚠️ LE VOILE DE LA SCÈNE SUIT LA CHARTE. Une seule teinte de voile pour
	   les trois gammes donnait un halo prune sur la gamme noire — là où toute
	   la charte refuse la prune — et écrasait la gamme enfant, dont les photos
	   sont les plus claires du site et le propos le plus gai. Trois teintes,
	   même dispositif. */
	--ad-u-voile:  20, 8, 16;

	background: var(--ad-u-fond);
	color: var(--ad-u-encre);
}

/* ── Djiguen Karaw — la gamme mère ────────────────────────────────────────
   La charte de la maison, sans écart : prune, rose pâle, ivoire. C'est la
   gamme dont les couleurs SONT celles du site — l'habiller autrement aurait
   été inventer une identité à celle qui la porte déjà. */
[data-ad-charte="prune"] {
	--ad-u-accent: var(--ad-prune);
	--ad-u-scene:  var(--ad-prune-nuit);
	--ad-u-repos:  #F1E3EB;
	--ad-u-signe:  var(--ad-rose);   /* le rose de la production, à l'identique */
}

/* ── Djantal Ba Faw — la gamme homme ──────────────────────────────────────
   ⚠️ LE CORPS PASSE EN SOMBRE, ET C'EST RELEVÉ, PAS DÉCIDÉ. Sur la page 318,
   dix des seize fonds sont noirs, un onzième est un brun tabac (#3B241C), et
   ni le rose ni la prune n'y paraissent une seule fois. C'est la seule gamme
   du site à refuser la couleur de la maison, et c'est tout l'objet d'une
   gamme masculine : la distinguer. La reprendre en ivoire aurait rendu trois
   pages interchangeables.
   Le gris clair #D3D3D3 est celui que la page emploie pour ses titres
   secondaires ; l'or de la maison sert d'accent, faute de quoi la page
   n'aurait aucune couleur du tout. */
[data-ad-charte="nuit"] {
	--ad-u-fond:   #14100F;
	--ad-u-encre:  #F4F1EE;
	--ad-u-douce:  #B6ADA7;
	--ad-u-accent: var(--ad-or-clair);
	--ad-u-scene:  #000000;
	--ad-u-repos:  #1F1917;
	--ad-u-filet:  rgba(255, 255, 255, .14);
	--ad-u-signe:  var(--ad-or-clair);
	/* Un noir neutre : sur cette gamme, la moindre trace de magenta se voit. */
	--ad-u-voile:  6, 5, 5;
	--ad-u-calque: .18;
}

/* ── Kids Karaw — la gamme enfant ─────────────────────────────────────────
   Bleu ciel, violet et or : les trois couleurs les plus claires du kit, et
   les seules que le site fasse paraître ensemble. Le violet écrit, le bleu et
   la crème posent les blocs. */
[data-ad-charte="kids"] {
	--ad-u-fond:   #FDFBF7;
	--ad-u-accent: #7A54A0;
	--ad-u-scene:  #5B3E7A;
	--ad-u-repos:  #EAF5FC;
	/* L'or est la couleur la plus présente de la page 320 — sept fonds sur
	   dix-sept. Sur les portraits d'enfants, très clairs, il tient là où le
	   bleu ciel de la charte disparaîtrait. */
	--ad-u-signe:  var(--ad-or-clair);
	--ad-u-voile:  46, 20, 62;   /* un violet, plus clair que les deux autres */
	/* ⚠️ ET IL EST PLUS LÉGER. Les portraits d'enfants sont pris sur des fonds
	   rose vif ou blanc, avec des ballons : le voile à .92 les éteignait
	   complètement, sur la seule gamme dont le propos est la joie. À .74, le
	   titre garde 7:1 de contraste — mesuré sur le pixel le plus clair du
	   quart gauche, là où il se pose. */
	--ad-u-opaque: .74;
	/* Et l'ouverture avec : la photo du club est un décor d'enfants, murs
	   crème et fauteuils en forme de cupcakes. Un voile à .94 n'en laissait
	   voir qu'une ombre — sur la page qui doit précisément le montrer. */
	--ad-u-ouvre:  .82;
}


/* ── Le Sky Club — sombre et doré ─────────────────────────────────────────
   ⚠️ RELEVÉ SUR LA PAGE 326, PAS INVENTÉ. Huit fonds noirs, six en or #FFDD6A,
   deux en ivoire #FBF8F5, et pas une seule fois la prune ni le rose de la
   maison. C'est un institut qui se vend sur le luxe, et le luxe se dit en noir
   et or — la charte le disait déjà, c'est la reprise qui l'avait perdue en
   rendant la page en ivoire comme les huit autres.

   ⚠️ L'OR DU SKY N'EST PAS L'OR DU KIT. #FFDD6A contre #FFD37B : cinq points
   de différence, et ils comptent — le premier est plus froid, plus proche du
   laiton. Il est écrit en dur dans les huit blocs de la page d'origine, jamais
   pris au jeton global. On le reprend tel quel plutôt que d'« harmoniser » :
   c'est la couleur de cet institut. */
[data-ad-charte="sky"] {
	--ad-u-fond:   #0E0C0B;
	--ad-u-encre:  #FBF8F5;
	--ad-u-douce:  #B2AAA3;
	--ad-u-accent: #FFDD6A;
	--ad-u-scene:  #000000;
	--ad-u-repos:  #191614;
	--ad-u-filet:  rgba(255, 255, 255, .13);
	--ad-u-signe:  #FFDD6A;
	--ad-u-voile:  6, 5, 5;
	--ad-u-calque: .18;
}

/* ═══ LES FONDS SOMBRES — CE QUE LES COMPOSANTS PARTAGÉS SUPPOSAIENT ════════
   Ces règles ne changent aucune structure : elles remettent en accord les
   composants du thème, écrits pour un fond clair, avec une charte sombre.
   ⚠️ SEULS LES COMPOSANTS PARTAGÉS SONT ICI — l'intertitre et le bouton. Les
   surcharges qui portent sur des classes propres à un TYPE de page (le
   sommaire des relais d'une gamme, l'accroche d'un soin) sont dans la feuille
   de ce type. C'est la quatrième fois sur ce projet qu'une règle se retrouve
   dans une feuille que la page concernée ne charge pas ; la règle est donc
   énoncée ici : une déclaration appartient à la feuille du composant qu'elle
   habille, pas à celle de la charte qui la motive.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ DEUX CHARTES SONT SOMBRES, ET LA LISTE EST ÉCRITE UNE FOIS. « nuit » est
   la gamme Djantal Ba Faw, « sky » l'institut Sky Club. Elles n'ont ni le même
   noir ni le même or, mais elles posent au thème le même problème : ses
   composants sont écrits pour un fond clair. Dupliquer ces sept déclarations
   aurait donné deux listes à corriger ensemble. */
[data-ad-charte="nuit"] .ad-tete h1,
[data-ad-charte="nuit"] .ad-tete h2,
[data-ad-charte="nuit"] .ad-tete h3,
[data-ad-charte="sky"]  .ad-tete h1,
[data-ad-charte="sky"]  .ad-tete h2,
[data-ad-charte="sky"]  .ad-tete h3 { color: var(--ad-u-encre); }
[data-ad-charte="nuit"] .ad-tete__chapeau,
[data-ad-charte="sky"]  .ad-tete__chapeau { color: var(--ad-u-douce); }
[data-ad-charte="nuit"] p,
[data-ad-charte="sky"]  p { color: var(--ad-u-douce); }

/* Le bouton passe en or plein sur encre sombre : un bouton prune sur un fond
   noir tombe à 1,9:1 de contraste — illisible, et c'est une mesure, pas une
   impression. */
[data-ad-charte="nuit"] .ad-bouton,
[data-ad-charte="sky"]  .ad-bouton {
	background: var(--ad-u-accent);
	color: #1A1210;
}
[data-ad-charte="nuit"] .ad-bouton:hover,
[data-ad-charte="sky"]  .ad-bouton:hover { background: #FFE9B8; }

/* ═══════════════════════════════════════════════════════════════════════════
   LES COMPOSANTS DU THÈME SOUS UNE CHARTE SOMBRE
   Tous ces composants posent un fond clair en dur — ivoire pour une vue, blanc
   pour un formulaire ou une case de prestation. C'est le bon défaut : huit
   pages sur onze sont claires. Sous une charte sombre, ils deviennent autant de
   rectangles blancs posés sur du noir.

   ⚠️ CE N'EST PAS UN THÈME SOMBRE. On ne remplace pas le blanc par du noir : on
   remplace le blanc par le jeton `--ad-u-repos` de la charte, qui est un fond
   de repos — plus clair que le fond de page, jamais plus sombre. Un aplat doit
   rester un aplat, sinon la structure de la page disparaît avec ses couleurs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ⚠️ `.ad-bande` MANQUAIT À CETTE LISTE, et c'est le manque qui s'est le plus
   vu : la rubrique de contact garde un fond ivoire, sur lequel le titre — passé
   en blanc par la charte — devenait invisible. Un composant oublié dans une
   surcharge de charte ne rend pas « une couleur en trop » : il rend du texte
   illisible, parce que le TEXTE, lui, a suivi. La leçon vaut pour tout ajout
   futur : quand on habille un fond, on liste tous les fonds. */
[data-ad-charte="nuit"] .ad-bande,
[data-ad-charte="sky"]  .ad-bande,
[data-ad-charte="nuit"] .ad-vue,
[data-ad-charte="sky"]  .ad-vue,
[data-ad-charte="nuit"] .ad-tarif,
[data-ad-charte="sky"]  .ad-tarif,
[data-ad-charte="nuit"] .ad-rdv,
[data-ad-charte="sky"]  .ad-rdv,
[data-ad-charte="nuit"] .ad-services li,
[data-ad-charte="sky"]  .ad-services li { background: var(--ad-u-repos); }

[data-ad-charte="nuit"] .ad-services,
[data-ad-charte="sky"]  .ad-services {
	background: var(--ad-u-filet);
	border-color: var(--ad-u-filet);
}
[data-ad-charte="nuit"] .ad-services li,
[data-ad-charte="sky"]  .ad-services li { color: var(--ad-u-encre); }
[data-ad-charte="nuit"] .ad-services li:hover,
[data-ad-charte="sky"]  .ad-services li:hover { background: #221D1A; }

[data-ad-charte="nuit"] .ad-sous-titre,
[data-ad-charte="sky"]  .ad-sous-titre,
[data-ad-charte="nuit"] .ad-rdv__titre,
[data-ad-charte="sky"]  .ad-rdv__titre { color: var(--ad-u-encre); }

/* ⚠️ LA BANDE ET LE FORMULAIRE PARTAGENT LE FOND DE REPOS : sans contour, le
   second disparaît dans la première et le formulaire n'a plus de bord. Sur fond
   clair, l'écart blanc/ivoire suffisait à les distinguer ; en sombre, il faut le
   dire au trait. */
[data-ad-charte="nuit"] .ad-rdv,
[data-ad-charte="sky"]  .ad-rdv { border: 1px solid var(--ad-u-filet); }

/* Les champs de saisie : un fond blanc dans un formulaire sombre est le seul
   endroit où le blanc peut RESTER — on écrit dedans, et l'encre est noire.
   C'est leur CONTOUR qui doit suivre, faute de quoi il disparaît. */
[data-ad-charte="nuit"] .ad-champ input,
[data-ad-charte="sky"]  .ad-champ input,
[data-ad-charte="nuit"] .ad-champ textarea,
[data-ad-charte="sky"]  .ad-champ textarea { border-color: var(--ad-u-filet); }

[data-ad-charte="nuit"] .ad-galerie--legendee figcaption,
[data-ad-charte="sky"]  .ad-galerie--legendee figcaption { color: var(--ad-u-douce); }

/* La bande pratique est déjà sombre (prune nuit) : sous une charte sombre, elle
   se fondrait dans la page. Elle prend donc le fond de repos et un filet haut,
   ce qui la garde lisible comme bande sans la faire ressortir comme un aplat. */
[data-ad-charte="nuit"] .ad-pratique,
[data-ad-charte="sky"]  .ad-pratique {
	background: var(--ad-u-repos);
	border-top: 1px solid var(--ad-u-filet);
	border-bottom: 1px solid var(--ad-u-filet);
}
[data-ad-charte="sky"] .ad-pratique .ad-icone { color: var(--ad-u-accent); }

/* ⚠️ SUR LA CHARTE `kids`, LA BANDE RESTE SOMBRE MAIS CHANGE DE TEINTE. Elle
   est en prune nuit par défaut — la couleur de la maison, juste sur huit pages.
   Au milieu d'une page violette et bleu ciel, ce prune-là est la seule tache
   d'une autre famille. Elle prend donc le violet de scène de la charte : encore
   une bande sombre, donc encore lisible en blanc, mais de la page. */
[data-ad-charte="kids"] .ad-pratique { background: var(--ad-u-scene); }

/* Le trait sous les liens du corps de texte suit l'accent de la charte. */
[data-ad-charte] .ad-trace { color: var(--ad-u-accent); }

/* ═══ LA VOLUTE DE LA MAISON, DÉCLINÉE PAR INSTITUT ═════════════════════════
   ⚠️ DEUX VOLUTES DORMAIENT DANS LA MÉDIATHÈQUE. `Meche-Doree-Sky-Club.png` et
   `Meche-Purple-Flower-Kids-Club.png` (8032 px chacune) : le monogramme de la
   maison décliné pour chaque institut — en or pour le Sky, en violet pour le
   Kids. Le site d'origine les posait une fois par page, en fond de section ;
   la reprise ne les employait pas du tout.

   ⚠️ ELLE NE SE POSE QUE SUR L'OUVERTURE, ET GRANDE. La leçon de la trame vaut
   ici (voir `arlette_trame()`) : un motif pâle répété devient un papier peint
   qu'on compte au lieu de le sentir. Celle-ci est UNE forme, débordant par le
   bord, à 0,1 d'opacité — assez pour donner de la matière au coin le plus vide
   de la page, jamais assez pour se disputer avec la photo. */
.ad-club .ad-ouvre::before {
	background-image: var(--ad-motif, none);
	background-repeat: no-repeat;
	background-position: right -12% top -22%;
	background-size: min(52vw, 640px) auto;
	opacity: .1;
}
/* ⚠️ Le `::before` de `.ad-ouvre` porte DÉJÀ le dégradé de fond de l'ouverture
   sans photo. Le remplacer par la volute effacerait ce dégradé — mais les deux
   pages de club ouvrent AVEC une photo, et dans ce cas le dégradé est masqué
   par `.ad-ouvre__fond`. La règle ne s'applique donc qu'à un fond qu'on ne
   voyait pas. Si un club perdait sa photo d'ouverture, il faudrait empiler les
   deux images au lieu de substituer. */

/* ═══ L'OUVERTURE SUIT LA CHARTE, ELLE AUSSI ════════════════════════════════
   ⚠️ SON VOILE ÉTAIT EN DUR, ET IL TIRAIT VERS LA PRUNE. `rgba(28, 6, 21, …)`
   est écrit dans `.ad-ouvre--photo::after` — juste pour huit pages sur onze,
   faux pour les trois qui refusent la couleur de la maison. Sur le Sky Club,
   noir et or, l'ouverture rendait un halo violet au-dessus d'une page qui n'en
   contient nulle part ailleurs.
   Les proportions sont celles du voile d'origine (.94 / .82 / .58 en oblique,
   .5 en pied) : c'est la TEINTE qui change, pas la densité — elle avait été
   mesurée sur la photo la plus claire du site. */
[data-ad-charte] .ad-ouvre--photo::after {
	background:
		linear-gradient(100deg,
			rgba(var(--ad-u-voile), var(--ad-u-ouvre, .94)) 0%,
			rgba(var(--ad-u-voile), calc(var(--ad-u-ouvre, .94) - .12)) 46%,
			rgba(var(--ad-u-voile), calc(var(--ad-u-ouvre, .94) - .36)) 100%),
		linear-gradient(to top, rgba(var(--ad-u-voile), calc(var(--ad-u-ouvre, .94) - .44)), transparent 55%);
}

/* ═══ LA COUVERTURE D'UNE GAMME — une photo de campagne (2026-10-02) ═════════
   Les trois photos de groupe de l'accueil couvrent aussi leur page de gamme
   (`arlette_ouverture()`, classe `ad-ouvre--campagne`). Une photo de groupe se
   MONTRE : la bande est plus haute, et le voile ne reste dense que sous le
   titre, à gauche. Mêmes teintes que la charte de la page. */
.ad-ouvre--campagne { min-height: min(72vh, 680px); }
.ad-ouvre--campagne::after,
[data-ad-charte] .ad-ouvre--campagne::after {
	background:
		linear-gradient(100deg,
			rgba(var(--ad-u-voile, 28, 6, 21), .88) 0%,
			rgba(var(--ad-u-voile, 28, 6, 21), .6) 38%,
			rgba(var(--ad-u-voile, 28, 6, 21), .1) 74%),
		linear-gradient(to top, rgba(var(--ad-u-voile, 28, 6, 21), .6), transparent 48%);
}
@media (max-width: 700px) {
	/* Sur téléphone le titre couvre toute la largeur : le voile aussi. */
	.ad-ouvre--campagne::after,
	[data-ad-charte] .ad-ouvre--campagne::after {
		background: linear-gradient(to top, rgba(var(--ad-u-voile, 28, 6, 21), .92) 0%, rgba(var(--ad-u-voile, 28, 6, 21), .62) 55%, rgba(var(--ad-u-voile, 28, 6, 21), .35) 100%);
	}
}

/* ═══ LE PAPILLON ET LA FLEUR, DANS L'INSTITUT DES ENFANTS ══════════════════
   Les deux mêmes motifs que la gamme Kids Karaw (voir `gamme.css`), posés ici
   sur les rubriques plutôt que sur les soins. Le dispositif est identique et
   les mises en garde valent à l'identique : GRANDS, hors de la colonne de
   texte, et alternés — deux motifs au même endroit à chaque rubrique se
   comptent au lieu de se sentir.
   ⚠️ Seule la CHARTE `kids` en reçoit. Sur le Sky Club, un papillon rose serait
   un contresens : c'est la volute dorée qui y tient ce rôle, et elle seule.
   ═══════════════════════════════════════════════════════════════════════════ */

.ad-club[data-ad-charte="kids"] .ad-bloc {
	position: relative;
	isolation: isolate;
}
.ad-club[data-ad-charte="kids"] .ad-bloc::before {
	content: '';
	position: absolute;
	z-index: -1;
	width: clamp(140px, 17vw, 230px);
	aspect-ratio: 1;
	top: -3%;
	right: -1%;
	background: var(--ad-motif-1, none) no-repeat center / contain;
	/* ⚠️ .18 ET NON .28 — mesuré à la capture. À 28 %, le papillon cessait
	   d'être un filigrane pour devenir une illustration : on le regardait au
	   lieu de le sentir, et il pesait autant que le titre voisin. La règle est
	   la même que pour la trame : entre « si pâle qu'il n'existe pas » et « assez
	   présent pour se disputer avec le texte », il n'y a qu'une bande étroite,
	   et elle se trouve à la capture, pas au raisonnement. */
	opacity: .18;
	pointer-events: none;
}
.ad-club[data-ad-charte="kids"] .ad-bloc:nth-of-type(even)::before {
	right: auto;
	left: -2%;
	top: auto;
	bottom: -4%;
	background-image: var(--ad-motif-2, none);
	opacity: .14;
	transform: scaleX(-1);
}
@media (max-width: 860px) {
	/* La place manque : un motif de 230 px passe SOUS le texte, où il le salit
	   au lieu de l'accompagner. */
	.ad-club[data-ad-charte="kids"] .ad-bloc::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNE CARTE DE TARIFS
   Le libellé à gauche, le montant à droite, des points de conduite entre les
   deux. C'est la forme qu'a n'importe quelle carte d'institut, et il n'y a pas
   lieu d'en inventer une autre : on cherche un prix, on suit la ligne.
   ═══════════════════════════════════════════════════════════════════════════ */

.ad-prix { margin: 0; }
/* ⚠️ LES POINTS DE CONDUITE SONT UN PSEUDO-ÉLÉMENT, PAS DU TEXTE ET PAS UN
   FOND. Écrits dans le HTML (« Coupe des pointes......5 000 F »), ils se
   liraient à voix haute et casseraient l'alignement au moindre changement de
   largeur. Première version ici : un dégradé pointillé sur toute la ligne, que
   le fond du `dt` et du `dd` venait masquer là où le texte se trouve. Ce fond
   doit alors être exactement celui du CONTENEUR — et il ne l'était pas dans le
   bloc du forfait, qui pose son propre aplat : les points traversaient les mots,
   et chaque libellé portait un rectangle plus sombre, comme un surlignage raté.
   Le pointillé est donc porté par un `dt::after` qui occupe l'espace restant :
   il ne peut plus, par construction, passer sous un mot, et il ne dépend
   d'aucun fond. */
.ad-prix__ligne {
	display: flex;
	align-items: baseline;
	padding: 5px 0;
}
.ad-prix__ligne dt,
.ad-prix__ligne dd { margin: 0; }
.ad-prix__ligne dt {
	display: flex;
	align-items: baseline;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ad-u-douce, var(--ad-encre-douce));
}
.ad-prix__ligne dt::after {
	content: '';
	flex: 1 1 auto;
	/* `min-width: 0` et non 14px : sur un libellé qui passe à la ligne
	   (« Mèches kinky, box braids, crochet braids »), une largeur minimale
	   laissait un moignon de trois points sur la seconde ligne — pire qu'aucun
	   pointillé, parce qu'on le lit comme une coupure. */
	min-width: 0;
	align-self: baseline;
	height: 1em;
	margin-inline: 8px;
	border-bottom: 1px dotted currentColor;
	opacity: .38;
}
.ad-prix__ligne dd {
	flex: 0 0 auto;
	white-space: nowrap;
	text-align: right;
}
/* Le montant porte la police de titre : dans une liste de quarante lignes, ce
   sont les nombres qu'on balaie, et `tabular-nums` les met en colonne. */
.ad-prix__nb {
	font-family: var(--ad-police-titre);
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ad-u-encre, var(--ad-encre));
}
/* « à partir de » : plus petit, et jamais dans la police de titre — c'est une
   réserve, pas une valeur. Quatorze prestations sur quarante en portent une. */
.ad-prix__des {
	font-size: 11.5px;
	font-style: italic;
	letter-spacing: .02em;
	color: var(--ad-u-douce, var(--ad-encre-douce));
}

/* ── Le forfait, puis la carte ────────────────────────────────────────────── */
.ad-forfait {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: clamp(28px, 4vw, 56px);
	padding: clamp(24px, 3.4vw, 40px);
	background: var(--ad-u-repos, var(--ad-blanc));
}
.ad-forfait h3,
.ad-prix-supplements h3,
.ad-tarifs-sky__titre {
	margin: 0 0 .9em;
	font-family: var(--ad-police-titre);
	font-weight: 300;
	font-size: clamp(19px, 2.1vw, 25px);
	letter-spacing: -.015em;
	color: var(--ad-u-encre, var(--ad-encre));
}
/* La séance complète est LE prix de la page : elle se lit plus grand que ses
   suppléments, sans quoi quarante lignes de carte l'enterrent. */
.ad-forfait__cle .ad-prix__nb { font-size: clamp(20px, 2.2vw, 26px); font-weight: 400; }
.ad-forfait__cle .ad-prix__ligne dt { font-size: 16px; color: var(--ad-u-encre, var(--ad-encre)); }
.ad-forfait__cle .ad-prix__ligne { padding: 9px 0; }

.ad-tarifs-sky__titre { margin-top: clamp(40px, 6vh, 72px); }

.ad-prix-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
	gap: clamp(26px, 3.4vw, 48px) clamp(32px, 4.5vw, 72px);
}
.ad-prix-famille h4 {
	margin: 0 0 .5em;
	padding-bottom: .4em;
	border-bottom: 1px solid var(--ad-u-filet, var(--ad-filet));
	font-family: var(--ad-police-titre);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ad-u-accent, var(--ad-accent));
}

/* ⚠️ LES SUPPLÉMENTS SONT ENCADRÉS, ET C'EST UNE INFORMATION. Sur la carte
   d'origine ils sont dans un cadre, à part des huit familles — parce qu'ils ne
   s'ajoutent pas à une famille mais à N'IMPORTE quelle prestation. Fondus dans
   la grille, ils deviendraient une neuvième famille, ce qu'ils ne sont pas. */
.ad-prix-supplements {
	margin-top: clamp(40px, 6vh, 72px);
	padding: clamp(24px, 3.4vw, 40px);
	border: 1px solid var(--ad-u-accent, var(--ad-accent));
}
.ad-prix-supplements > p {
	margin: -.6em 0 1.4em;
	font-size: 14px;
	color: var(--ad-u-douce, var(--ad-encre-douce));
}
.ad-prix-supplements .ad-prix {
	columns: 2;
	column-gap: clamp(32px, 4.5vw, 72px);
}
.ad-prix-supplements .ad-prix__ligne {
	/* `break-inside` : sans lui, une ligne se coupe entre les deux colonnes et
	   son montant part seul en tête de la seconde. */
	break-inside: avoid;
}
@media (max-width: 640px) {
	.ad-prix-supplements .ad-prix { columns: 1; }
}

/* La page Contact : le formulaire « Écrivez-nous ». */
.ad-contact-ecrire .ad-rdv { max-width: 780px; border: 1px solid var(--ad-filet); }

/* ═══ AUDIT UX DU 2026-10-01 — les petits textes ════════════════════════════
   10 à 12,5 px pour des informations qu'on doit lire (« à partir de » devant
   un tarif, ce que propose un institut, la légende d'un chiffre). Plancher :
   13 px pour une information, 12 px pour une mention (~/regles/02). */
.ad-institut__quoi li { font-size: 13px; }
.ad-chiffres__mot { font-size: 13px; }
.ad-prix__des { font-size: 12.5px; }
.ad-carte__note { font-size: 12.5px; }
.ad-voisin__sens { font-size: 12px; }
.ad-pratique__quoi { font-size: 12px; }


/* ═══ LA CARTE D'UN INSTITUT — horaires et aperçu des prix (2026-10-02) ══════
   Voir `arlette_institut_carte()` (`inc/instituts.php`), commune à l'accueil et
   à « Nos instituts ». Quand et où d'abord, puis ce qu'on y fait, puis combien. */
.ad-institut__pour {
	display: block;
	margin-top: 4px;
	font-family: var(--ad-police);
	font-size: 14px;
	letter-spacing: 0;
	color: var(--ad-encre-douce);
}
.ad-institut__infos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 16px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--ad-filet);
	list-style: none;
	font-size: 14px;
	color: var(--ad-encre);
}
.ad-institut__infos li { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.ad-institut__infos .ad-icone { width: 16px; height: 16px; color: var(--ad-accent); flex: none; }
.ad-institut__infos strong { font-weight: 600; }
.ad-institut__infos a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--ad-encre); font-weight: 500; }
/* Le nom de l'institut est un lien : 44 px au doigt, sans changer la ligne. */
.ad-institut__corps h2 a,
.ad-institut__corps h3 a { display: inline-block; padding-block: 10px; margin-block: -10px; }
.ad-institut__prix { margin: 18px 0 0; }
.ad-institut__prix div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid var(--ad-filet);
}
.ad-institut__prix dt { font-size: 14px; color: var(--ad-encre); }
.ad-institut__prix dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--ad-prune); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ad-institut__bas .ad-bouton { flex: 1 1 auto; }