/* =========================================================================
 * premium.css — refonte du 02/09/2026
 *
 * Chargée en dernier, après `overrides.css`. Tout ce qui est une décision de
 * design nouvelle vit ici : **retirer ce seul fichier rend le site à son état
 * d'avant la refonte.** Les quatre CSS copiés du site d'origine ne sont pas
 * touchés, et aucune couleur ni aucune police ne change — c'est la consigne.
 *
 * Direction : retenue d'apothicaire. Fond crème, filets d'un pixel plutôt
 * qu'ombres, type aligné à gauche, respirations inégales, la photographie qui
 * porte le propos. L'or reste un accent sous les 10 % de la surface : le
 * défaut du site d'origine était de l'étaler en fond de section.
 *
 * @package aurea-lab
 * ====================================================================== */

:root {
	/* Neutres teintés vers l'or plutôt que gris purs : ils appartiennent alors
	   à la même famille que l'accent, au lieu de flotter à côté. */
	--pm-rule: #E8E2D5;
	--pm-rule-soft: #F1ECE2;
	--pm-ink-soft: #5A5348;

	/* Sortie exponentielle. Jamais de rebond : le rebond est enjoué, et ce
	   studio ne l'est pas. */
	--pm-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--pm-slow: 720ms;

	/* Respirations inégales : c'est l'irrégularité qui donne le rythme. */
	--pm-gap-s: clamp(2.5rem, 5vw, 4rem);
	--pm-gap-m: clamp(4rem, 8vw, 7rem);
	--pm-gap-l: clamp(6rem, 12vw, 11rem);
}

/* -------------------------------------------------------------------------
 * 1. Bandeau
 *
 * Le voile noir uniforme à 50 % écrasait la photographie — on ne voyait plus
 * le travail, qui est pourtant le seul argument du métier. Remplacé par un
 * dégradé qui n'assombrit que là où le texte se pose.
 * ---------------------------------------------------------------------- */

.home .hero-overlay,
.page-template .hero-overlay {
	background: linear-gradient(
		to bottom,
		rgba(20, 17, 12, 0.55) 0%,
		rgba(20, 17, 12, 0.28) 32%,
		rgba(20, 17, 12, 0.62) 100%
	);
}

/*
 * Le bandeau passe à gauche.
 *
 * C'est le geste qui change le plus la perception : une pile centrée — titre,
 * sous-titre, boutons — est la composition par défaut de tous les sites, et c'est
 * elle qui donnait l'impression de n'avoir rien changé. Aligné à gauche, avec une
 * marge basse plutôt qu'un centrage vertical, le bandeau devient une affiche.
 */
.home .hero-content {
	max-width: 72rem;
	width: 100%;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	text-align: left;
	align-items: flex-start;
}

.home .hero-content > *,
.home .hero-content :is(h1, p, .pm-hero-meta, .hero-buttons) {
	/*
	 * Le second sélecteur a été ajouté le 05/09/2026, quand les heroes sont passés en
	 * conteneurs Elementor : le titre et le sous-titre sortent désormais d'un widget,
	 * et ne sont plus des **enfants directs** de `.hero-content`. Le premier sélecteur
	 * est conservé tel quel — il continue de viser ce qu'il visait.
	 */
	margin-inline: 0;
}

/* -------------------------------------------------------------------------
 * Les heroes en conteneurs : leurs styles en ligne, transcrits ici.
 *
 * Les gabarits PHP portaient cette mise en page dans un attribut `style`. Un conteneur
 * Elementor ne peut pas en porter — Elementor refuse `style` dans ses attributs
 * personnalisés — et sans elle le bandeau perdait sa hauteur d'écran et son centrage.
 *
 * Rien n'est décidé ici : ce sont **exactement** les déclarations que les gabarits
 * écrivaient en ligne, déplacées sans être modifiées. `.hero-section` et `.hero-content`
 * les déclaraient déjà de leur côté — d'où le style en ligne redondant de l'accueil et
 * de Réservation, et d'où le fait que leurs valeurs coïncident ici au caractère près.
 *
 * C'est ce déplacement qui rend le titre et le sous-titre des quatre heroes à diaporama
 * éditables dans Elementor, au lieu d'être passés en attributs de shortcode.
 * ------------------------------------------------------------------------- */

.aurea-slider,
.gallery-hero {
	position: relative;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.aurea-slider-content {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
	text-align: center;
}

/*
 * Le bandeau de la Galerie, et pourquoi il passe par un identifiant.
 *
 * Son bloc de texte n'a jamais porté de classe : il était mis en page par son seul
 * `style` en ligne. Or `.pm-hero-page .gallery-hero > div:last-child` — écrite le 02/09
 * pour lui donner la même mesure qu'aux trois autres bandeaux, 72 rem — le vise aussi,
 * et pèse 0,3,1. Le `style` en ligne la battait ; une classe ne le ferait pas.
 *
 * Lui donner `.aurea-slider-content` a été essayé et rejeté : cela réveillait
 * `.pm-hero-page .aurea-slider-content`, en `!important`, et changeait à la fois la
 * mesure et la taille du sous-titre.
 *
 * L'identifiant restitue donc exactement ce que le `style` en ligne imposait, ni plus ni
 * moins. Rien n'est décidé ici — et l'intention de 72 rem reste inappliquée sur cette
 * page, exactement comme avant la bascule.
 */
#aurea-galerie-bandeau {
	max-width: 1200px;
	padding-inline: 1.5rem;
	z-index: 10;
}

@media (min-width: 60rem) {
	.home .hero-section {
		display: flex;
		align-items: flex-end;
	}

	.home .hero-content {
		padding-bottom: clamp(4rem, 9vh, 7rem);
	}
}

.hero-content h1 {
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* Échelle : le titre monte franchement, et le reste descend. Un rapport d'au moins
   1.25 entre degrés — le site d'origine traitait le titre du bandeau et les titres
   de section presque pareil, ce qui écrasait toute hiérarchie. */
.home .hero-content h1 {
	font-size: clamp(2.6rem, 8.5vw, 6.5rem) !important;
	line-height: 0.95;
	max-width: 14ch;
	margin-bottom: 1.5rem;
}

/* Le sous-titre en capitales espacées : il devient une étiquette, et cesse de
   concurrencer le titre. Il passe **au-dessus** du titre par l'ordre visuel, comme
   un surtitre d'affiche. */
/*
 * Second sélecteur ajouté le 05/09/2026 : le sous-titre sort d'un Éditeur de texte depuis
 * que le hero est en conteneurs, et n'est donc plus un enfant **direct** de
 * `.hero-content`. Sans lui, le sous-titre reprenait sa taille de paragraphe et perdait
 * ses petites capitales espacées — 19 px de hauteur en plus sur le bandeau.
 * Un seul `<p>` vit sous `.hero-content` : la descendance ne vise rien de plus.
 */
.home .hero-content > p:first-of-type,
.home .hero-content p:first-of-type {
	order: -1;
	margin-bottom: 1.25rem;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.82;
}

/* La ligne de service remplace le pavé « OUVERT » encadré, qui fragmentait le
   bandeau en trois blocs empilés. */
.pm-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem 1.25rem;
	margin: 0 0 2.25rem;
	padding-top: 1.5rem;
	max-width: 44rem;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.875rem;
	line-height: 1.5;
}

.pm-hero-meta > span {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.pm-hero-meta svg {
	width: 15px;
	height: 15px;
	opacity: 0.65;
	flex: none;
}

/* La disponibilité réelle, lue à l'API. Elle n'apparaît que si le moteur
   répond : une promesse creuse serait pire que le silence. */
.pm-next-slot {
	color: var(--gold-light, #E8D5A3);
	font-weight: 500;
}

.pm-next-slot::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold, #D4AF37);
	margin-right: 0.5rem;
	flex: none;
}

/* Un seul geste. Le WhatsApp descend en lien, il ne concurrence plus le
   rendez-vous — et le bouton « Être informée » a disparu du gabarit : il
   restait de l'époque où le studio n'était pas ouvert. */
.home .hero-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 1.15rem 2rem;
}

.home .hero-buttons .btn-gold {
	padding: 1rem 2.5rem;
	font-size: 1rem;
	letter-spacing: 0.01em;
	box-shadow: none;
	transition: transform 320ms var(--pm-ease), filter 320ms var(--pm-ease);
}

.home .hero-buttons .btn-gold:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
}

.pm-hero-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.9rem;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.28);
	transition: border-color 260ms var(--pm-ease), color 260ms var(--pm-ease);
}

.pm-hero-whatsapp:hover,
.pm-hero-whatsapp:focus-visible {
	color: #fff;
	border-bottom-color: var(--gold, #D4AF37);
}

/* -------------------------------------------------------------------------
 * 2. Rythme général
 *
 * Le site d'origine centrait chaque section sur son axe et leur donnait la
 * même hauteur. La hiérarchie disparaissait : tout avait le même poids.
 * ---------------------------------------------------------------------- */

.home-presentation {
	padding-block: var(--pm-gap-m);
}

.home-presentation .container {
	text-align: left;
	max-width: 68rem;
}

.home-presentation h2 {
	font-size: clamp(2.1rem, 5vw, 3.8rem);
	line-height: 1.05;
	max-width: 16ch;
	margin-bottom: 1.75rem;
	text-wrap: balance;
}

.home-presentation .text-gray {
	max-width: 62ch;
	/* `!important` : le gabarit pose `margin:0 auto` en ligne, qui recentrait le
	   paragraphe sous un titre aligné à gauche. */
	margin: 0 !important;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--pm-ink-soft);
}

/* Le filet remplace le trait centré : il ancre le titre au lieu de flotter. */
.home-presentation .divider {
	width: 3.5rem;
	height: 1px;
	margin: 2.5rem 0 0;
	background: var(--gold-dark, #B8962A);
}

/* -------------------------------------------------------------------------
 * 3. Prestations
 *
 * Quatre cartes identiques, image + titre + pastille de prix, répétées : le
 * motif le plus banal du web. On garde le balisage — il est partagé avec la
 * page Prestations — et on change la composition : le premier élément prend
 * deux fois la place, les autres suivent.
 * ---------------------------------------------------------------------- */

.prestations-section {
	padding-block: var(--pm-gap-m) var(--pm-gap-l);
}

.prestations-title {
	text-align: left;
	max-width: 72rem;
	margin: 0 auto 0.75rem;
	padding-inline: clamp(1rem, 5vw, 3rem);
	font-size: clamp(2.1rem, 5vw, 3.8rem);
	line-height: 1.05;
}

/* Une ligne de service sous le titre : elle dit ce que la grille ne dit pas. */
.pm-prestations-note {
	max-width: 72rem;
	margin: 0 auto var(--pm-gap-s);
	padding-inline: clamp(1rem, 5vw, 3rem);
	color: var(--pm-ink-soft);
	font-size: 0.95rem;
}

.pm-prestations-note a {
	color: var(--gold-dark, #B8962A);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

.prestations-grid {
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 3rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

/*
 * Format portrait plutôt que paysage. Un premier essai donnait deux fois plus de
 * place au premier élément ; la ligne se cassait dès qu'une carte passait à la
 * ligne suivante, et le résultat était bancal. La verticale suffit à changer le
 * registre : c'est le format d'une carte de tarifs, pas d'une vignette de blog.
 */
@media (min-width: 60rem) {
	.prestations-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Les CSS copiés bornent la largeur de la carte : dans une grille, elle
   flottait à gauche de sa colonne au lieu de l'occuper. */
.prestation-card {
	width: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	/* La carte d'origine avait un rembourrage qui rétrécissait l'image de 32 px. */
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

/* `height: 180px` est posé par les CSS copiés et bat `aspect-ratio` : l'image
   restait en paysage écrasé quel que soit le format demandé. */
.prestation-image-wrapper {
	width: 100%;
	height: auto;
}

.prestation-image-wrapper {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 2px;
	background: var(--pm-rule-soft);
}

.prestation-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--pm-slow) var(--pm-ease);
}

.prestation-card:hover .prestation-image {
	transform: scale(1.04);
}

/* Le dégradé ne couvre que le bas : le travail reste visible. */
.prestation-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 17, 12, 0.72) 0%, rgba(20, 17, 12, 0.12) 45%, transparent 70%);
}

.prestation-image-text {
	position: absolute;
	left: 1.15rem;
	right: 1.15rem;
	bottom: 1rem;
	z-index: 2;
}

.prestation-image-title {
	font-family: var(--font-space-grotesk), system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: #fff;
	margin: 0;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

@media (min-width: 60rem) {
	.prestations-grid > .prestation-card:first-child .prestation-image-title {
		font-size: 1.35rem;
	}
}

/* « Prestation sur-mesure » sous chacune des quatre : du remplissage
   d'agence, répété quatre fois, qui n'apprend rien à personne. */
.prestations-grid .prestation-image-subtitle {
	display: none;
}

/*
 * Le prix perd sa pastille d'or plaquée, mais **reste positionné en absolu**.
 * Le passer dans le flux l'a fait disparaître : il est enfant du conteneur
 * d'image, qui porte `overflow: hidden`. Défaut trouvé à la première capture —
 * or le prix est la deuxième chose que la lectrice cherche.
 *
 * Il s'aligne désormais à droite, sur la même ligne de base que le nom, en
 * chiffres tabulaires : la composition d'une carte de tarifs.
 */
.prestation-price-on-image {
	top: 0.9rem;
	right: 1rem;
	bottom: auto;
	padding: 0.28rem 0.6rem;
	background: rgba(20, 17, 12, 0.55);
	backdrop-filter: none;
	border-radius: 2px;
	background: none;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	font-family: var(--font-space-grotesk), system-ui, sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	text-shadow: none;
}

.prestation-card:hover .prestation-price-on-image {
	transform: none;
}

/* Le nom reprend toute la largeur : le prix est monté en haut de l'image, ils
   ne se disputent plus la même ligne de base. */
.prestation-image-text {
	padding-right: 0;
}

.prestations-signature {
	max-width: 72rem;
	margin: var(--pm-gap-s) auto 0;
	padding-inline: clamp(1rem, 5vw, 3rem);
	text-align: left;
	font-size: 1rem;
}

/* -------------------------------------------------------------------------
 * 4. Le métier — bande d'assurance
 *
 * L'hygiène est la première objection de ce métier, davantage encore pour le
 * piercing et le tatouage. Le site n'en disait rien hors d'une incise dans un
 * paragraphe. Trois affirmations, sans icônes rondes ni cartes.
 * ---------------------------------------------------------------------- */

.pm-metier {
	padding-block: var(--pm-gap-m);
	background: var(--white, #fff);
	border-top: 1px solid var(--pm-rule);
	border-bottom: 1px solid var(--pm-rule);
}

.pm-metier-inner {
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 3rem);
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.pm-metier-item h3 {
	font-family: var(--font-space-grotesk), system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-dark, #B8962A);
	margin: 0 0 0.9rem;
}

.pm-metier-item p {
	margin: 0;
	max-width: 34ch;
	color: var(--pm-ink-soft);
	font-size: 1rem;
	line-height: 1.7;
}

/* -------------------------------------------------------------------------
 * 5. L'invitation
 *
 * Remplace la section à fond de feuille d'or et sa carte blanche arrondie.
 * Une texture de dorure en fond de page, c'est de la bijouterie fantaisie :
 * elle promet le luxe au lieu de le montrer. Ici, anthracite, une phrase, un
 * bouton, et beaucoup de vide.
 * ---------------------------------------------------------------------- */

/*
 * `!important` et `background-image: none` séparément : le visuel de dorure est
 * posé par `overrides.css` **et** par `components.css`, et la section porte en
 * plus un dégradé. Une seule déclaration raccourcie ne suffisait pas.
 */
.ouverture-section {
	background: var(--dark, #2C2C2C) !important;
	background-image: none !important;
	padding-block: var(--pm-gap-m);
}

.ouverture-section::before,
.ouverture-section::after {
	display: none !important;
}

.ouverture-section .container {
	max-width: 72rem;
	padding-inline: clamp(1rem, 5vw, 3rem);
}

.ouverture-card {
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	max-width: none;
	text-align: left;
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: end;
	grid-template-columns: 1fr;
}

/*
 * Placement explicite. En laissant le flux automatique, l'icône décorative — que
 * son `style` en ligne empêchait de masquer — occupait la première cellule et
 * poussait le titre à droite, la description à gauche. Composition inversée,
 * involontaire, et illisible.
 */
@media (min-width: 56rem) {
	.ouverture-card {
		grid-template-columns: 1.35fr 1fr;
	}

	.ouverture-title {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
	}

	.ouverture-description {
		grid-column: 2;
		grid-row: 1;
		align-self: end;
	}

	.ouverture-btn {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
	}
}

.ouverture-title {
	color: #fff;
	font-size: clamp(2rem, 5vw, 3.6rem);
	line-height: 1.08;
	margin: 0;
	max-width: 16ch;
	text-wrap: balance;
}

.ouverture-description {
	color: rgba(255, 255, 255, 0.72);
	font-size: 1.0625rem;
	/* Texte clair sur fond sombre : il faut respirer davantage, sinon il se lit
	   plus maigre qu'il n'est. */
	line-height: 1.8;
	max-width: 42ch;
	margin: 0 0 1.75rem;
}

.ouverture-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--gold, #D4AF37);
	color: var(--dark, #2C2C2C);
	padding: 1rem 2.25rem;
	border-radius: 9999px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 320ms var(--pm-ease), filter 320ms var(--pm-ease);
}

.ouverture-btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
}

/* Les trois points et le soleil décoratifs n'ont plus de rôle : ils meublaient
   le haut d'une carte qui n'existe plus. */
/*
 * `.ouverture-card:hover` portait une ombre dorée de 50 px (`components.css:584`) :
 * sur un fond crème et une carte blanche elle passait ; sur l'anthracite elle
 * dessine un halo sale au bas de la bande. La carte n'existe plus en tant que
 * carte — elle ne doit plus réagir du tout.
 */
.ouverture-card,
.ouverture-card:hover {
	box-shadow: none !important;
	transform: none !important;
	transition: none !important;
	border: none !important;
}

.ouverture-decoration,
.ouverture-card .text-gold {
	/* `!important` : ces éléments portent un `style` en ligne, qui bat une règle
	   de feuille sans lui. */
	display: none !important;

	/*
	 * Sélecteur relâché de `>` en descendance le 04/09/2026, à la bascule de l'accueil
	 * sous Elementor : l'icône vit dans un widget HTML, donc deux `<div>` d'enveloppe la
	 * séparent désormais de `.ouverture-card`. La règle aurait décroché **et la
	 * décoration serait réapparue** — un masquage qui décroche ne se voit pas dans le
	 * code, il se voit dans la page. Un seul `.text-gold` existe sur l'accueil : la
	 * descendance ne vise rien de plus que ce que `>` visait.
	 */
}

/* -------------------------------------------------------------------------
 * 6. Venir au studio
 *
 * L'adresse et les horaires n'existaient que dans le pied de page. C'est la
 * deuxième chose qu'on cherche après les photos.
 * ---------------------------------------------------------------------- */

.pm-venir {
	padding-block: var(--pm-gap-m);
}

.pm-venir-inner {
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 3rem);
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.pm-venir dt {
	font-family: var(--font-space-grotesk), system-ui, sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-dark, #B8962A);
	margin-bottom: 0.7rem;
}

.pm-venir dd {
	margin: 0;
	color: var(--dark, #2C2C2C);
	font-size: 1rem;
	line-height: 1.65;
}

.pm-venir dd a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--pm-rule);
	padding-bottom: 1px;
	transition: border-color 260ms var(--pm-ease);
}

.pm-venir dd a:hover {
	border-bottom-color: var(--gold-dark, #B8962A);
}

/* -------------------------------------------------------------------------
 * 7. Apparitions au défilement
 *
 * Une seule idée : le contenu monte de quelques pixels en se révélant. Pas de
 * cascade sur chaque élément — l'orchestration vaut mieux que l'agitation.
 * Sans JavaScript, `[data-reveal]` n'est jamais activé et rien n'est masqué.
 * ---------------------------------------------------------------------- */

.js-reveal [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--pm-slow) var(--pm-ease), transform var(--pm-slow) var(--pm-ease);
}

.js-reveal [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal [data-reveal],
	.js-reveal [data-reveal].is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.prestation-card:hover .prestation-image {
		transform: none;
	}
}


/* -------------------------------------------------------------------------
 * 8. Les trois métiers, à égalité
 *
 * Le site les annonçait tous les trois et ne montrait que des cils. Trois
 * colonnes de même largeur, même format d'image, même longueur de texte : c'est
 * la composition elle-même qui dit qu'ils comptent autant.
 *
 * Les visuels du tatouage et du piercing sont des photographies de banque, en
 * attendant celles du studio. Elles montrent le geste et le métier, jamais un
 * résultat qu'on attribuerait à AUREA Lab — et une mention le dit au visiteur.
 * ---------------------------------------------------------------------- */

.pm-metiers {
	padding-block: var(--pm-gap-l);
	background: var(--off-white, #FDFBF7);
	border-top: 1px solid var(--pm-rule);
}

.pm-metiers-inner {
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 3rem);
}

/*
 * Sélecteur relâché de `>` en descendance, même raison : le titre sort d'un Éditeur de
 * texte, donc d'un widget. `.pm-metiers-inner` ne contient aucun autre `<h2>` — les
 * cartes portent des `<h3>` — la portée est inchangée.
 */
.pm-metiers-inner h2 {
	font-size: clamp(2.1rem, 5vw, 3.8rem);
	line-height: 1.05;
	margin: 0 0 1.25rem;
	max-width: 16ch;
	text-wrap: balance;
}

.pm-metiers-chapo {
	max-width: 58ch;
	margin: 0 0 var(--pm-gap-s);
	color: var(--pm-ink-soft);
	font-size: 1.05rem;
	line-height: 1.7;
}

.pm-metiers-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: clamp(1.75rem, 4vw, 3rem);
	align-items: start;
}

.pm-metier-carte {
	display: flex;
	flex-direction: column;
}

.pm-metier-visuel {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 2px;
	margin-bottom: 1.25rem;
	background: var(--pm-rule-soft);
}

.pm-metier-visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--pm-slow) var(--pm-ease);
}

.pm-metier-carte:hover .pm-metier-visuel img {
	transform: scale(1.04);
}

.pm-metier-nom {
	font-family: var(--font-italiana), serif;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.15;
	margin: 0 0 0.75rem;
	color: var(--dark, #2C2C2C);
}

.pm-metier-dit {
	margin: 0 0 1.25rem;
	color: var(--pm-ink-soft);
	font-size: 0.98rem;
	line-height: 1.7;
	flex: 1;
}

.pm-metier-pied {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding-top: 0.85rem;
	border-top: 1px solid var(--pm-rule);
}

.pm-metier-tarif {
	font-variant-numeric: tabular-nums;
	color: var(--dark, #2C2C2C);
	font-size: 0.92rem;
	font-weight: 500;
}

.pm-metier-lien {
	white-space: nowrap;
	color: var(--gold-dark, #B8962A);
	font-size: 0.9rem;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition: border-color 280ms var(--pm-ease);
}

.pm-metier-lien:hover,
.pm-metier-lien:focus-visible {
	border-bottom-color: var(--gold-dark, #B8962A);
}

/* La mention d'illustration : discrète, mais présente. Faire passer la
   photographie d'un autre pour celle du studio serait une tromperie. */
.pm-metiers-mention {
	margin: var(--pm-gap-s) 0 0;
	color: var(--faint, #8D877C);
	font-size: 0.82rem;
	font-style: italic;
}

/* =========================================================================
 * EXTENSION AUX CINQ AUTRES PAGES — 02/09/2026
 *
 * La même grammaire que l'accueil : bandeau en affiche alignée à gauche,
 * en-tête transparent sur la photographie, échelle typographique franche,
 * filets d'un pixel, et rien de centré par défaut.
 *
 * `.pm-hero-page` est posée sur `<body>` par le script, quand la page porte un
 * bandeau pleine largeur. Une classe plutôt qu'un sélecteur par gabarit : les
 * cinq pages n'ont pas les mêmes noms de section, et une liste de classes se
 * périme au premier gabarit ajouté.
 * ====================================================================== */

/* --- Le bandeau, partout ------------------------------------------------ */

.pm-hero-page .aurea-slider-content,
.pm-hero-page .gallery-hero-content,
.pm-hero-page .contact-hero {
	max-width: 72rem;
	width: 100%;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	text-align: left;
	align-items: flex-start;
}

.pm-hero-page .aurea-slider-content > *,
.pm-hero-page .gallery-hero-content > * {
	margin-inline: 0;
}

.pm-hero-page .aurea-slider-content h1,
.pm-hero-page .gallery-hero-content h1 {
	font-size: clamp(2.4rem, 7vw, 5.2rem) !important;
	line-height: 0.98;
	letter-spacing: -0.02em;
	max-width: 15ch;
	margin-bottom: 1.25rem;
	text-wrap: balance;
}

.pm-hero-page .aurea-slider-content p,
.pm-hero-page .gallery-hero-content p {
	max-width: 48ch;
	margin-inline: 0;
	font-size: 1.05rem;
	line-height: 1.65;
}

/* Le trait décoratif centré devient un filet ancré à gauche. */
.pm-hero-page .prestations-page-divider,
.pm-hero-page .about-hero-divider,
.pm-hero-page .booking-divider,
.pm-hero-page .gallery-divider {
	margin-inline: 0 !important;
	width: 3.5rem !important;
	height: 1px !important;
	background: var(--gold, #D4AF37) !important;
}

.pm-hero-page .hero-overlay,
.pm-hero-page .prestations-page-hero::after,
.pm-hero-page .gallery-hero::after {
	background: linear-gradient(
		to bottom,
		rgba(20, 17, 12, 0.5) 0%,
		rgba(20, 17, 12, 0.25) 34%,
		rgba(20, 17, 12, 0.6) 100%
	) !important;
}

/* --- Titres de section, sur toutes les pages ---------------------------- */

.prestations-page-container > h2,
.about-section h2,
.gallery-page h2,
.contact-page h2 {
	font-size: clamp(1.9rem, 4vw, 3rem);
	line-height: 1.08;
	text-wrap: balance;
}

/* --- Prestations : la liste cesse d'être une suite de rectangles vides --- */

.prestations-page {
	padding-block: var(--pm-gap-m) var(--pm-gap-l);
}

.prestations-page-container {
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 3rem);
}

/*
 * Chaque prestation occupait une bande blanche pleine largeur, avec une petite
 * image à gauche et un immense vide à droite : les descriptions sont **toutes
 * vides en base**, et la carte réservait quand même la place. Une grille de
 * fiches verticales dit la même chose sans le vide.
 */
.prestations-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(1.25rem, 3vw, 2.25rem);
}

.prestation-item {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.prestation-item-image {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	flex: none;
	overflow: hidden;
	border-radius: 2px;
	background: var(--pm-rule-soft);
}

.prestation-item-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--pm-slow) var(--pm-ease);
}

.prestation-item:hover .prestation-item-img {
	transform: scale(1.04);
}

/* La pastille de catégorie perd son emoji et son or plein : une étiquette. */
.prestation-item-image > div {
	top: 0.75rem !important;
	left: 0.75rem !important;
	right: auto !important;
	background: rgba(20, 17, 12, 0.6) !important;
	color: #fff !important;
	border-radius: 2px !important;
	padding: 0.25rem 0.55rem !important;
	font-size: 0.66rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	box-shadow: none !important;
}

.prestation-item-image > div span {
	display: none;
}

.prestation-item-content {
	padding: 0.85rem 0 0;
	background: none;
	flex: none;
}

.prestation-item-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid var(--pm-rule);
}

.prestation-item-title {
	font-family: var(--font-body), sans-serif;
	font-size: 1.02rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	margin: 0;
	color: var(--dark, #2C2C2C);
}

.prestation-item-price {
	margin: 0;
	color: var(--dark, #2C2C2C);
	font-size: 0.92rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Description vide : la masquer plutôt que lui réserver une hauteur. */
.prestation-item-desc {
	margin: 0.7rem 0 0;
	color: var(--pm-ink-soft);
	font-size: 0.95rem;
	line-height: 1.6;
}

.prestation-item-desc:empty {
	display: none;
}

/*
 * La durée : lisible, mais sous le prix dans la hiérarchie.
 *
 * Ajoutée le 03/09/2026, quand chaque prestation a reçu la sienne. Elle se lit après le
 * nom et le prix — c'est l'ordre dans lequel une cliente décide — d'où le petit corps et
 * les chiffres tabulaires, qui alignent les durées d'une fiche à l'autre.
 */
.prestation-item-duree {
	margin: 0.55rem 0 0;
	color: var(--faint, #8D877C);
	font-size: 0.82rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.prestation-item-duree::before {
	content: "";
	display: inline-block;
	width: 1.1rem;
	height: 1px;
	margin-right: 0.5rem;
	vertical-align: 0.25em;
	background: currentColor;
	opacity: 0.5;
}

/* --- Filtres : des libellés, plus des pastilles à emoji ----------------- */

.aurea-filter {
	background: none !important;
	border: none !important;
	border-bottom: 1px solid transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0.35rem 0 !important;
	margin-right: clamp(1.25rem, 3vw, 2.25rem);
	color: var(--pm-ink-soft) !important;
	font-size: 0.95rem;
	font-weight: 400 !important;
	transition: color 260ms var(--pm-ease), border-color 260ms var(--pm-ease);
}

.aurea-filter.is-active {
	color: var(--dark, #2C2C2C) !important;
	border-bottom-color: var(--gold-dark, #B8962A) !important;
}

.aurea-filter:hover {
	color: var(--dark, #2C2C2C) !important;
}

/* L'emoji en tête de filtre : un marqueur décoratif qui n'encode rien. */
.aurea-filter > span:first-child,
.aurea-filter > .aurea-filter-icon {
	display: none !important;
}

/* --- Contact, À propos, Galerie : rien de centré par réflexe ------------ */

.contact-page .container,
.about-section .container,
.gallery-page .container {
	max-width: 72rem;
}

.contact-form-title,
.about-section h2,
.gallery-page h2 {
	text-align: left;
}

/* Les ombres larges des cartes deviennent des filets : sur crème, une ligne
   sépare mieux qu'une ombre, et coûte moins cher visuellement. */
.contact-form-wrapper,
.contact-info-card,
.about-card,
.gallery-item {
	box-shadow: none !important;
	border: 1px solid var(--pm-rule) !important;
	border-radius: 3px !important;
}

.gallery-item {
	border: none !important;
	border-radius: 2px !important;
	overflow: hidden;
}

.gallery-item img {
	transition: transform var(--pm-slow) var(--pm-ease);
}

.gallery-item:hover img {
	transform: scale(1.04);
}


/* --- Rattrapages par page ---------------------------------------------- */

/*
 * Prestations et À propos posent `text-align:center` **en ligne** sur le
 * conteneur du bandeau : sans `!important`, l'alignement à gauche ne prenait pas.
 */
.pm-hero-page .aurea-slider-content {
	text-align: left !important;
	max-width: 72rem !important;
	padding-inline: clamp(1.25rem, 5vw, 3rem) !important;
}

/*
 * Galerie : son bandeau n'a pas de conteneur de contenu nommé, et il est centré
 * par des styles en ligne sur `.gallery-hero` lui-même.
 */
.pm-hero-page .gallery-hero {
	justify-content: flex-start !important;
}

.pm-hero-page .gallery-hero > div:last-child {
	width: 100%;
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	text-align: left !important;
}

.pm-hero-page .gallery-hero h1 {
	font-size: clamp(2.4rem, 7vw, 5.2rem) !important;
	line-height: 0.98;
	letter-spacing: -0.02em;
	max-width: 15ch;
	text-wrap: balance;
}

.pm-hero-page .gallery-hero p {
	max-width: 48ch;
	margin-inline: 0;
}

/*
 * Contact n'a pas de bandeau photographique : c'est un en-tête de texte sur fond
 * crème. Il garde donc l'en-tête blanc, mais prend la même échelle et le même
 * alignement que les autres pages.
 */
.contact-hero {
	text-align: left !important;
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 3rem);
}

.contact-hero h1 {
	font-size: clamp(2.2rem, 5.5vw, 4rem) !important;
	line-height: 1.02;
	letter-spacing: -0.015em;
	max-width: 14ch;
}

.contact-hero p {
	max-width: 52ch;
	margin-inline: 0;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--pm-ink-soft);
}

.contact-hero .contact-divider {
	margin-inline: 0 !important;
	width: 3.5rem !important;
	height: 1px !important;
	background: var(--gold-dark, #B8962A) !important;
}


/*
 * La barre de filtres est centrée par un `style` en ligne, donc décalée par
 * rapport à la grille qu'elle commande. Elle doit partir du même bord.
 *
 * Le sélecteur a été relâché de `>` en descendance le 04/09/2026, à la bascule de la
 * page sous Elementor : la barre sort du shortcode `[aurea_services]`, donc du widget
 * qui le porte, et n'est plus un **enfant direct** de `.prestations-page-container` —
 * trois `<div>` d'enveloppe se sont glissés entre les deux. La règle décrochait en
 * silence et le `style` en ligne reprenait la main : barre recentrée, gouttière rendue,
 * filet du bas disparu. Un seul `<div>` contient directement un `.aurea-filter` : la
 * descendance ne vise donc rien de plus que ce que `>` visait.
 *
 * Même précaution à prendre pour tout sélecteur `>` dont le parent devient un conteneur
 * Elementor et l'enfant sort d'un widget. Voir TODO-LOOP, phase 10.3.
 */
.prestations-page-container div:has(> .aurea-filter) {
	justify-content: flex-start !important;
	gap: 0 !important;
	margin-bottom: var(--pm-gap-s) !important;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--pm-rule);
}


/*
 * Les deux colonnes de Contact étaient étirées à la même hauteur : la carte des
 * coordonnées, deux fois plus courte que le formulaire, se terminait par un demi-
 * écran de vide. Chaque bloc prend la hauteur de son contenu.
 */
.contact-page .container > div:has(> .contact-form-wrapper),
.contact-page .container > div:has(> .contact-info-card) {
	align-items: start;
}

.contact-form-wrapper,
.contact-info-card {
	align-self: start;
}


/* -------------------------------------------------------------------------
 * 9. Le bouton d'or, à plat
 *
 * Les CSS copiés lui donnent un dégradé à cinq arrêts qui imite un reflet
 * métallique. C'est le détail qui fait bijouterie fantaisie : un aplat franc
 * dans la couleur de marque est plus assuré, et lit mieux sur photographie.
 * ---------------------------------------------------------------------- */

.btn-gold,
.ouverture-btn,
.contact-submit-btn,
.booking-submit-btn {
	background: var(--gold, #D4AF37) !important;
	background-size: auto !important;
	color: #241F14 !important;
	font-weight: 600;
}

.btn-gold:hover,
.ouverture-btn:hover,
.contact-submit-btn:hover,
.booking-submit-btn:hover {
	background: var(--gold-light, #E8D5A3) !important;
}

/* -------------------------------------------------------------------------
 * 10. L'en-tête, transparent sur le bandeau
 *
 * Une barre blanche pleine largeur coupait la photographie en deux dès le
 * premier pixel. Sur une page dont le bandeau est l'argument, l'en-tête doit
 * flotter dessus et ne reprendre son fond qu'une fois le défilement commencé.
 *
 * `!important` partout : l'en-tête porte ses styles en ligne (`header.php:45`),
 * qui battent toute règle de feuille sans lui.
 * ---------------------------------------------------------------------- */

:is(.home, .pm-hero-page):not(.pm-scrolled) header {
	background: transparent !important;
	box-shadow: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
}

:is(.home, .pm-hero-page):not(.pm-scrolled) header a,
:is(.home, .pm-hero-page):not(.pm-scrolled) header .nav-link {
	color: #fff !important;
}

/* Le logotype est un aplat noir : on le retourne en blanc plutôt que d'en
   fabriquer une seconde version. */
:is(.home, .pm-hero-page):not(.pm-scrolled) header img {
	filter: brightness(0) invert(1);
}

:is(.home, .pm-hero-page):not(.pm-scrolled) header .mobile-toggle {
	color: #fff !important;
}

:is(.home, .pm-hero-page) header {
	transition: background 420ms var(--pm-ease);
}

/*
 * Le surtitre du bandeau d'accueil n'est pas du texte courant : la largeur de
 * lecture de 48 caractères, ajoutée pour les sous-titres des autres pages, le
 * cassait en deux lignes.
 *
 * Second sélecteur ajouté le 05/09/2026, comme pour la règle jumelle plus haut : le
 * surtitre sort d'un Éditeur de texte depuis que le bandeau est en conteneurs, et n'est
 * plus un enfant direct. Sans lui, les 48 caractères reprenaient la main et le surtitre
 * repassait sur deux lignes — exactement le défaut que cette règle avait fermé.
 */
.home .hero-content > p:first-of-type,
.home .hero-content p:first-of-type {
	max-width: none;
}

/* -------------------------------------------------------------------------
 * 11. Le blog
 *
 * Livré vide et hors menu, il n'avait jamais été repris : bandeau centré,
 * cartes à ombre, contenu sur toute la largeur. Même grammaire que le reste, et
 * une mesure de lecture tenue — c'est la seule page du site qui se lit vraiment
 * en continu.
 * ---------------------------------------------------------------------- */

.blog-hero-content {
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	text-align: left !important;
}

.blog-hero-title {
	font-size: clamp(2.4rem, 7vw, 5.2rem) !important;
	line-height: 0.98;
	letter-spacing: -0.02em;
	max-width: 14ch;
	text-wrap: balance;
}

.blog-hero-divider {
	margin-inline: 0 !important;
	width: 3.5rem !important;
	height: 1px !important;
	background: var(--gold, #D4AF37) !important;
}

.blog-hero-subtitle {
	max-width: 48ch;
	margin-inline: 0 !important;
	font-size: 1.05rem;
	line-height: 1.65;
}

.blog-section {
	padding-block: var(--pm-gap-m) var(--pm-gap-l);
}

.blog-grid,
.aurea-posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: clamp(1.5rem, 3.5vw, 2.75rem);
}

.blog-card,
.aurea-post-card {
	display: flex;
	flex-direction: column;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible;
}

.blog-card-img,
.blog-card-image img,
.aurea-post-card img {
	aspect-ratio: 3 / 2;
	width: 100%;
	object-fit: cover;
	border-radius: 2px;
	transition: transform var(--pm-slow) var(--pm-ease);
}

.blog-card:hover .blog-card-img,
.blog-card:hover .blog-card-image img,
.aurea-post-card:hover img {
	transform: scale(1.03);
}

/* --- L'article --- */

.pm-article {
	padding-block: var(--pm-gap-m) var(--pm-gap-l);
}

.pm-article-entete {
	max-width: 72rem;
	margin: 0 auto var(--pm-gap-s);
	padding-inline: clamp(1rem, 5vw, 3rem);
}

.pm-article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0 0 1.25rem;
	color: var(--faint, #8D877C);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pm-article-titre {
	font-size: clamp(2.1rem, 5.5vw, 4.2rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 20ch;
	text-wrap: balance;
}

.pm-article-visuel {
	max-width: 72rem;
	margin: 0 auto var(--pm-gap-s);
	padding-inline: clamp(1rem, 5vw, 3rem);
}

.pm-article-visuel img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 2px;
}

/*
 * La colonne de lecture est bornée à 68 caractères. Un article qui court sur
 * 1100 px fait perdre la ligne à chaque retour : c'est la première cause
 * d'abandon d'une lecture longue.
 */
.pm-article-corps {
	max-width: 42rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 3rem);
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--pm-ink-soft);
}

.pm-article-corps > * + * {
	margin-top: 1.4em;
}

.pm-article-corps h2 {
	font-family: var(--font-italiana), serif;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	line-height: 1.2;
	color: var(--dark, #2C2C2C);
	margin-top: 2.4em;
}

.pm-article-corps h3 {
	font-family: var(--font-body), sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--dark, #2C2C2C);
	margin-top: 2em;
}

.pm-article-corps a {
	color: var(--gold-dark, #B8962A);
	text-decoration: none;
	border-bottom: 1px solid var(--pm-rule);
	transition: border-color 260ms var(--pm-ease);
}

.pm-article-corps a:hover {
	border-bottom-color: var(--gold-dark, #B8962A);
}

.pm-article-corps img {
	border-radius: 2px;
}

.pm-article-corps blockquote {
	margin-inline: 0;
	padding-left: 1.5rem;
	border-left: 1px solid var(--gold-dark, #B8962A);
	font-family: var(--font-italiana), serif;
	font-size: 1.35rem;
	line-height: 1.45;
	color: var(--dark, #2C2C2C);
}

.pm-article-pied {
	max-width: 42rem;
	margin: var(--pm-gap-m) auto 0;
	padding: 1.5rem clamp(1rem, 5vw, 3rem) 0;
	border-top: 1px solid var(--pm-rule);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.pm-article-pied a {
	color: var(--gold-dark, #B8962A);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 260ms var(--pm-ease);
}

.pm-article-pied a:hover {
	border-bottom-color: var(--gold-dark, #B8962A);
}

/* La navigation entre articles : deux liens, un filet, rien d'autre. */
.pm-article-voisins {
	max-width: 72rem;
	margin: 0 auto var(--pm-gap-l);
	padding-inline: clamp(1rem, 5vw, 3rem);
	display: grid;
	gap: 1px;
	background: var(--pm-rule);
	border-block: 1px solid var(--pm-rule);
}

@media (min-width: 44rem) {
	.pm-article-voisins {
		grid-template-columns: 1fr 1fr;
	}
}

.pm-article-voisins a {
	display: block;
	padding: 1.75rem clamp(1rem, 3vw, 2rem);
	background: var(--off-white, #FDFBF7);
	text-decoration: none;
	transition: background 320ms var(--pm-ease);
}

.pm-article-voisins a:hover {
	background: var(--white, #fff);
}

.pm-article-voisins span {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--gold-dark, #B8962A);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pm-article-voisins strong {
	font-family: var(--font-italiana), serif;
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--dark, #2C2C2C);
}

.pm-article-voisin-suivant {
	text-align: right;
}


/* -------------------------------------------------------------------------
 * 12. La vue du studio, sur À propos
 *
 * La page ne montrait l'endroit nulle part : un bandeau, du texte, des icônes.
 * Or c'est la page où l'on veut voir le studio avant d'y prendre rendez-vous.
 * ---------------------------------------------------------------------- */

.pm-about-visuel {
	padding-block: 0 var(--pm-gap-l);
	background: var(--off-white, #FDFBF7);
}

.pm-about-visuel figure {
	max-width: 72rem;
	margin: 0 auto;
	padding-inline: clamp(1rem, 5vw, 3rem);
}

.pm-about-visuel img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 2px;
}

.pm-about-visuel figcaption {
	margin-top: 0.85rem;
	color: var(--faint, #8D877C);
	font-size: 0.82rem;
	font-style: italic;
}

/* =========================================================================
 * 13. Les pages légales — 03/09/2026
 *
 * Mentions légales et politique de confidentialité. Deux pages qu'on ne lit
 * qu'en cherchant quelque chose de précis : la mise en page ne cherche donc pas
 * à séduire, elle cherche à ce qu'on retrouve vite. Colonne de lecture bornée
 * comme celle des articles, titres franchement hiérarchisés, et le même filet
 * d'un pixel que partout ailleurs.
 * ====================================================================== */

.pm-legal {
	padding: calc(var(--pm-gap-l) * 1.4) 1.5rem var(--pm-gap-l);
	background: var(--off-white, #FDFBF7);
}

.pm-legal-inner {
	/* ~68 caractères : la même mesure que les articles. */
	max-width: 42rem;
	margin: 0 auto;
}

.pm-legal h1 {
	margin: 0;
	font-family: var(--font-italiana), Georgia, serif;
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	line-height: 1.1;
	letter-spacing: 0.01em;
}

.pm-legal-maj {
	margin: 0.6rem 0 0;
	color: var(--faint, #8D877C);
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.pm-legal-chapo {
	margin: var(--pm-gap-m) 0 0;
	padding-top: var(--pm-gap-m);
	border-top: 1px solid var(--pm-rule, rgba(44, 44, 44, 0.14));
	font-size: 1.05rem;
	line-height: 1.65;
}

.pm-legal h2 {
	margin: calc(var(--pm-gap-m) * 1.5) 0 0;
	padding-top: var(--pm-gap-s);
	border-top: 1px solid var(--pm-rule-soft, rgba(44, 44, 44, 0.08));
	font-family: var(--font-italiana), Georgia, serif;
	font-size: 1.55rem;
	line-height: 1.25;
}

.pm-legal h3 {
	margin: var(--pm-gap-m) 0 0;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.pm-legal p,
.pm-legal li {
	color: var(--pm-ink-soft, #4A453D);
	font-size: 0.98rem;
	line-height: 1.7;
}

.pm-legal p {
	margin: 0.7rem 0 0;
}

.pm-legal-liste {
	margin: 0.7rem 0 0;
	padding-left: 1.1rem;
}

.pm-legal-liste li {
	margin-top: 0.45rem;
}

/* Le tableau d'identité : libellé discret, valeur affirmée. */
.pm-legal-dl {
	margin: var(--pm-gap-s) 0 0;
	display: grid;
	grid-template-columns: minmax(9rem, auto) 1fr;
	gap: 0.55rem 1.5rem;
}

.pm-legal-dl dt {
	color: var(--faint, #8D877C);
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	align-self: baseline;
}

.pm-legal-dl dd {
	margin: 0;
	color: var(--pm-ink-soft, #4A453D);
	font-size: 0.98rem;
}

@media (max-width: 34rem) {
	.pm-legal-dl {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}

	.pm-legal-dl dd {
		margin-bottom: 0.7rem;
	}
}

.pm-legal a {
	color: var(--gold-dark, #B8962A);
	text-underline-offset: 0.2em;
}

.pm-legal-retour {
	margin-top: calc(var(--pm-gap-m) * 1.5);
	padding-top: var(--pm-gap-s);
	border-top: 1px solid var(--pm-rule, rgba(44, 44, 44, 0.14));
}

/*
 * L'encart d'avertissement des mentions légales incomplètes.
 * Rendu au seul administrateur connecté : une visiteuse ne doit jamais le voir.
 */
.pm-legal-admin {
	margin: var(--pm-gap-m) 0 0;
	padding: 0.9rem 1.1rem;
	border-left: 3px solid var(--gold, #D4AF37);
	background: rgba(212, 175, 55, 0.07);
	font-size: 0.9rem;
	line-height: 1.6;
}

.pm-legal-admin strong {
	display: block;
	margin-bottom: 0.25rem;
}

/* Les liens légaux, dans la barre du bas : présents sans peser. */
.footer-legal {
	display: inline-block;
	margin-left: 0.5rem;
	opacity: 0.72;
}

.footer-legal a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	padding-bottom: 1px;
	transition: border-color 260ms var(--pm-ease), opacity 260ms var(--pm-ease);
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
	border-bottom-color: var(--gold, #D4AF37);
}

.footer-legal span {
	margin: 0 0.35rem;
	opacity: 0.5;
}

@media (max-width: 30rem) {
	.footer-legal {
		display: block;
		margin: 0.5rem 0 0;
	}
}