/* ==========================================================================
   AURA — couche d'animation et correctifs transverses.
   ========================================================================== */

/* --- Débordement des décors ------------------------------------------------
   Les blobs de la maquette débordent volontairement de leurs sections. Si une
   section porte `overflow: hidden`, ils sont tranchés net à la frontière et on
   voit la coupure d'une section à l'autre. On laisse donc les sections ouvertes
   et on borne le débordement horizontal au niveau de la page.

   `overflow-x: clip` et non `hidden` : `hidden` créerait un conteneur de
   défilement qui casserait le `position: sticky` de l'en-tête.
   -------------------------------------------------------------------------- */
html,
body {
	overflow-x: clip;
}

body:not(.fl-builder-edit) section:not(#hero),
body:not(.fl-builder-edit) footer#site-footer {
	overflow: visible;
}

/* --- En-tête collant ------------------------------------------------------
   Beaver Themer enveloppe la mise en page d'en-tête dans son propre
   <header class="fl-builder-content" data-type="header">. Poser position:sticky
   sur notre élément interne ne colle à rien : le conteneur ne fait que la
   hauteur de l'en-tête. C'est donc le conteneur Themer qui doit coller.
   -------------------------------------------------------------------------- */
/* Il colle à `-hauteur du bandeau d'urgence` : le bandeau sort de l'écran avec
   la page et seule la barre de navigation reste. La hauteur de l'en-tête ne
   change jamais, donc rien ne saute sous lui. `--aura-alert-h` est mesurée par
   le script (le bandeau passe sur deux lignes en mobile). */
header.fl-builder-content[data-type="header"] {
	position: sticky;
	top: calc(var(--aura-alert-h, 33px) * -1);
	z-index: 200;
}

.admin-bar header.fl-builder-content[data-type="header"] {
	top: calc(32px - var(--aura-alert-h, 33px));
}

@media screen and (max-width: 782px) {
	.admin-bar header.fl-builder-content[data-type="header"] {
		top: calc(46px - var(--aura-alert-h, 33px));
	}
}

/* --- Pictos flottants en mobile --------------------------------------------
   Sur ordinateur, les pictos sont placés en % d'une boîte de décor calée sur
   le canevas 1440 de la maquette. Sous 992 px le contenu passe en colonne et
   devient bien plus haut que cette boîte : les pictos, réduits à ~18 px, se
   tassaient en haut de la section, sur la photo et le titre.

   En mobile, la couche avant (celle des pictos) couvre donc la section
   entière et les pictos se rangent dans les marges latérales de 40 px, là où
   ils ne peuvent toucher aucun texte. Leur inclinaison (`transform`) et leur
   flottement (`rotate` / `translate`) sont conservés. Une règle commune à
   tous les modules plutôt que quatorze copies. */
@media (max-width: 992px) {
	body:not(.fl-builder-edit) [class*="__decor--front"] {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	body:not(.fl-builder-edit) [class*="__decor--front"] [class*="__picto--"] {
		width: 22px;
	}

	/* Certains modules laissent l'image du picto à sa taille native : en
	   mobile elle doit remplir sa boîte de 22 px. */
	body:not(.fl-builder-edit) [class*="__decor--front"] [class*="__picto--"] img {
		width: 100%;
		height: 100%;
	}

	body:not(.fl-builder-edit) [class*="__decor--front"] [class*="__picto--1"] { left: 9px; top: 24%; }
	body:not(.fl-builder-edit) [class*="__decor--front"] [class*="__picto--2"] { left: calc(100% - 31px); top: 9%; }
	body:not(.fl-builder-edit) [class*="__decor--front"] [class*="__picto--3"] { left: calc(100% - 31px); top: 62%; }
	body:not(.fl-builder-edit) [class*="__decor--front"] [class*="__picto--4"] { left: 9px; top: 74%; }
	body:not(.fl-builder-edit) [class*="__decor--front"] [class*="__picto--5"] { left: calc(100% - 31px); top: 38%; }
	body:not(.fl-builder-edit) [class*="__decor--front"] [class*="__picto--6"] { left: 9px; top: 50%; }
}

/* Picto sans place libre hors du texte (voir initPictosLibres) : masqué. */
[class*="picto--"].is-masque {
	visibility: hidden !important;
}

/* --- Aucun soulignement sur les boutons ------------------------------------
   Le thème souligne les liens au survol ; sur une pastille pleine, le trait
   traverse le libellé. Les boutons ne se soulignent jamais, dans aucun état.
   -------------------------------------------------------------------------- */
.aura-header__cta,
.aura-header__panel-cta,
.aura-header__panel-col a,
.aura-header__social,
.hero__pill,
.engagements__cta,
.nos-soins__cta,
.equipe__cta,
.collaboration__cta,
.site-footer__cta,
.aura-sticky-cta,
.liste-soins__link,
.site-footer__menu a,
.site-footer__tel,
.site-footer__mail,
.site-footer__recrut,
.aura-header__item a {
	text-decoration: none;
}

.aura-header__cta:hover,
.hero__pill:hover,
.engagements__cta:hover,
.nos-soins__cta:hover,
.equipe__cta:hover,
.collaboration__cta:hover,
.site-footer__cta:hover,
.aura-sticky-cta:hover,
.liste-soins__link:hover,
.site-footer__menu a:hover,
.aura-header__item a:hover {
	text-decoration: none;
}

/* --- CTA collant --------------------------------------------------------- */
.aura-sticky-cta {
	position: fixed;
	right: clamp(16px, 2.2vw, 32px);
	bottom: clamp(16px, 2.2vw, 32px);
	z-index: 300;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 999px;
	background: var(--ds-color-orange-kids, #ED7461);
	color: var(--ds-color-jaune-ortho, #F5EB73);
	font-family: var(--ds-font-heading, filson-soft, Filson Soft, Nunito, sans-serif);
	font-size: var(--ds-text-lg, 21px);
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: 0 14px 34px rgba(52, 73, 94, .28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px) scale(.9) rotate(-5deg);
	transition:
		opacity 320ms cubic-bezier(.4, 0, .2, 1),
		transform 420ms cubic-bezier(.34, 1.56, .64, 1),
		visibility 0s linear 320ms;
}

.aura-sticky-cta.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1) rotate(-5deg);
	transition-delay: 0s;
}

.aura-sticky-cta.is-visible:hover,
.aura-sticky-cta.is-visible:focus-visible {
	transform: translateY(0) scale(1) rotate(0deg);
}

/* Le thème colore `a:visited`, `a:hover` et `a:focus` en bleu, avec une
   spécificité supérieure à la seule classe : on reprend les couleurs du
   bouton dans chaque état. */
.aura-sticky-cta.aura-sticky-cta:is(:link, :visited, :hover, :focus, :focus-visible, :active) {
	background: var(--ds-color-orange-kids, #ED7461);
	color: var(--ds-color-jaune-ortho, #F5EB73);
	text-decoration: none;
}

.aura-sticky-cta:focus-visible {
	outline: 3px solid var(--ds-color-bleu-fonce, #34495E);
	outline-offset: 3px;
}

.aura-sticky-cta__pulse {
	position: relative;
	width: 10px;
	height: 10px;
	flex: none;
	border-radius: 50%;
	background: currentColor;
}

.aura-sticky-cta__pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: currentColor;
	animation: aura-pulse 2.2s ease-out infinite;
}

@keyframes aura-pulse {
	0%   { transform: scale(1);   opacity: .7; }
	70%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}

/* --- Micro-interactions -------------------------------------------------- */
.piliers__item .piliers__icon {
	transition: transform 420ms cubic-bezier(.34, 1.56, .64, 1);
}

.piliers__item:hover .piliers__icon {
	transform: rotate(0deg) scale(1.12) translateY(-6px);
}

/* --- Lenis --------------------------------------------------------------- */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* --- Pied de page du thème -------------------------------------------------
   Notre section "Site Footer" porte déjà tout le pied de page. La barre
   « © Aura | Powered by Beaver Builder » du thème fait doublon sous la nôtre.
   -------------------------------------------------------------------------- */
body:not(.fl-builder-edit) .fl-page-footer {
	display: none;
}

/* --- Respect des préférences système ------------------------------------- */
@media (prefers-reduced-motion: reduce) {

	.aura-sticky-cta__pulse::after {
		display: none;
	}

	.aura-sticky-cta {
		transition: opacity 200ms linear;
		transform: none;
	}

	.aura-sticky-cta.is-visible,
	.aura-sticky-cta:hover {
		transform: none;
	}
}

/* ==========================================================================
   LA PASTILLE ET LE BOUTON — une seule et même recette.
   ==========================================================================
   Référence Figma : nœud 1:637 pour la pastille de titre, nœud 1:630 pour le
   bouton. Les deux composants sont bâtis à l'identique — fond plein, padding
   12px 14px, rayon 37.762px, Filson Soft Medium, rotation -5deg,
   `text-box-trim` — et ne diffèrent que par la taille de texte et la couleur.
   On écrit donc la forme une fois, et on ne décline que ce qui change.

   AUCUNE LARGEUR NI HAUTEUR IMPOSÉE. Dans Figma le composant CTA vit dans une
   case de 318.197 x 66.393 px, mais cette case est un emplacement de mise en
   page : le bouton lui-même est en dimensionnement automatique et se contente
   de son padding. Poser min-width:318px, comme c'était le cas ici, produisait
   des boutons trop larges et de hauteur fixe. Le bouton fait la taille de son
   libellé, un point c'est tout.

   Le point qui change tout : `text-box-trim`. Le texte est rogné à la hauteur
   de capitale, donc la pastille 40px mesure ~52px de haut et non 72px, et le
   bouton 21px ~39px et non 50px. Sans ce rognage les deux paraissent gras et
   sur-remplis. Repli pour les navigateurs sans `text-box-trim` : on retire le
   demi-interligne en réduisant le padding vertical, ce qui redonne la même
   hauteur totale.

   Les sélecteurs sont volontairement doublés (.x.x) : Beaver Builder préfixe
   le CSS de chaque section par `.fl-node-xxx`, ce qui lui donne une
   spécificité (0,2,0) qu'une classe simple ne peut pas surcharger.
   -------------------------------------------------------------------------- */
.nos-soins__pill.nos-soins__pill,
.tarifs__pill.tarifs__pill,
.equipe__pill.equipe__pill,
.avis__pill.avis__pill,
.collaboration__pill.collaboration__pill,
.clq-pill.clq-pill,
.aura-header__cta.aura-header__cta,
.aura-header__panel-cta.aura-header__panel-cta,
.hero__pill.hero__pill,
.engagements__cta.engagements__cta,
.nos-soins__cta.nos-soins__cta,
.equipe__cta.equipe__cta,
.collaboration__cta.collaboration__cta,
.site-footer__cta.site-footer__cta,
.clq-cta.clq-cta,
.aura-team__cta.aura-team__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	max-width: none;
	padding: 12px 14px;
	border-radius: 37.762px;
	font-family: var(--ds-font-heading);
	font-weight: var(--ds-weight-medium);
	line-height: 1.2;
	color: var(--ds-color-jaune-ortho);
	white-space: nowrap;
	transform: rotate(-5deg);
	text-box-trim: both;
	text-box-edge: cap alphabetic;
}

/* Survol d'un bouton : il se redresse, et c'est tout — ni aimant, ni zoom, ni
   décalage. Les pastilles de titre ne sont pas des boutons : elles restent
   inclinées. Mêmes sélecteurs doublés que la recette, plus la pseudo-classe :
   la règle passe devant le CSS des sections. */
.aura-header__cta.aura-header__cta,
.aura-header__panel-cta.aura-header__panel-cta,
.hero__pill.hero__pill,
.engagements__cta.engagements__cta,
.nos-soins__cta.nos-soins__cta,
.equipe__cta.equipe__cta,
.collaboration__cta.collaboration__cta,
.site-footer__cta.site-footer__cta,
.clq-cta.clq-cta,
.aura-team__cta.aura-team__cta,
.liste-soins__cta.liste-soins__cta,
.soins-blog__lire.soins-blog__lire,
.actus-grille__lire.actus-grille__lire,
.art__carte-lire.art__carte-lire,
.clq-chip.clq-chip,
.contact-form__envoyer.contact-form__envoyer {
	transition:
		transform 300ms cubic-bezier(.4, 0, .2, 1),
		background-color 300ms ease,
		color 300ms ease,
		box-shadow 300ms ease,
		filter 300ms ease;
}

/* Jamais de soulignement sur un bouton, dans aucun état. Le thème souligne
   `a`, `a:visited`, `a:hover` et `a:focus` : il faut couvrir les quatre, un
   bouton déjà visité ou cliqué se soulignait sinon. */
body :is(.aura-header__cta, .aura-header__panel-cta, .hero__pill, .engagements__cta,
	.nos-soins__cta, .equipe__cta, .collaboration__cta, .site-footer__cta, .clq-cta,
	.aura-team__cta, .aura-sticky-cta, .liste-soins__cta, .soins-blog__lire,
	.actus-grille__lire, .art__carte-lire, .clq-chip, .contact-form__envoyer),
body :is(.aura-header__cta, .aura-header__panel-cta, .hero__pill, .engagements__cta,
	.nos-soins__cta, .equipe__cta, .collaboration__cta, .site-footer__cta, .clq-cta,
	.aura-team__cta, .aura-sticky-cta, .liste-soins__cta, .soins-blog__lire,
	.actus-grille__lire, .art__carte-lire, .clq-chip, .contact-form__envoyer):is(:link, :visited, :hover, :focus, :focus-visible, :active),
body :is(.aura-header__cta, .aura-header__panel-cta, .hero__pill, .engagements__cta,
	.nos-soins__cta, .equipe__cta, .collaboration__cta, .site-footer__cta, .clq-cta,
	.aura-team__cta, .aura-sticky-cta, .liste-soins__cta, .soins-blog__lire,
	.actus-grille__lire, .art__carte-lire, .clq-chip, .contact-form__envoyer) * {
	text-decoration: none;
}

.aura-header__cta.aura-header__cta:hover,
.aura-header__cta.aura-header__cta:focus-visible,
.aura-header__panel-cta.aura-header__panel-cta:hover,
.aura-header__panel-cta.aura-header__panel-cta:focus-visible,
.hero__pill.hero__pill:hover,
.hero__pill.hero__pill:focus-visible,
.engagements__cta.engagements__cta:hover,
.engagements__cta.engagements__cta:focus-visible,
.nos-soins__cta.nos-soins__cta:hover,
.nos-soins__cta.nos-soins__cta:focus-visible,
.equipe__cta.equipe__cta:hover,
.equipe__cta.equipe__cta:focus-visible,
.collaboration__cta.collaboration__cta:hover,
.collaboration__cta.collaboration__cta:focus-visible,
.site-footer__cta.site-footer__cta:hover,
.site-footer__cta.site-footer__cta:focus-visible,
.clq-cta.clq-cta:hover,
.clq-cta.clq-cta:focus-visible,
.aura-team__cta.aura-team__cta:hover,
.aura-team__cta.aura-team__cta:focus-visible {
	transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
	.aura-header__cta.aura-header__cta,
	.aura-header__panel-cta.aura-header__panel-cta,
	.hero__pill.hero__pill,
	.engagements__cta.engagements__cta,
	.nos-soins__cta.nos-soins__cta,
	.equipe__cta.equipe__cta,
	.collaboration__cta.collaboration__cta,
	.site-footer__cta.site-footer__cta,
	.clq-cta.clq-cta,
	.aura-team__cta.aura-team__cta,
	.liste-soins__cta.liste-soins__cta,
	.soins-blog__lire.soins-blog__lire,
	.actus-grille__lire.actus-grille__lire,
	.art__carte-lire.art__carte-lire,
	.clq-chip.clq-chip,
	.contact-form__envoyer.contact-form__envoyer {
		transition: none;
	}
}

/* Ce qui distingue une pastille de titre d'un bouton : la taille du texte. */
.nos-soins__pill.nos-soins__pill,
.tarifs__pill.tarifs__pill,
.equipe__pill.equipe__pill,
.avis__pill.avis__pill,
.collaboration__pill.collaboration__pill,
.clq-pill.clq-pill {
	font-size: clamp(26px, 2.778vw, 40px);
}

.aura-header__cta.aura-header__cta,
.aura-header__panel-cta.aura-header__panel-cta,
.hero__pill.hero__pill,
.engagements__cta.engagements__cta,
.nos-soins__cta.nos-soins__cta,
.equipe__cta.equipe__cta,
.collaboration__cta.collaboration__cta,
.site-footer__cta.site-footer__cta,
.clq-cta.clq-cta,
.aura-team__cta.aura-team__cta {
	font-size: var(--ds-text-lg); /* 21px */
}

/* Et la couleur de fond, que la maquette attribue nœud par nœud. */
.nos-soins__pill.nos-soins__pill,
.tarifs__pill.tarifs__pill,
.avis__pill.avis__pill {
	background: var(--ds-color-violet-care);
}

.equipe__pill.equipe__pill,
.collaboration__pill.collaboration__pill {
	background: var(--ds-color-vert-dental);
}

.aura-header__cta.aura-header__cta,
.aura-header__panel-cta.aura-header__panel-cta,
.engagements__cta.engagements__cta,
.nos-soins__cta.nos-soins__cta,
.equipe__cta.equipe__cta,
.collaboration__cta.collaboration__cta,
.site-footer__cta.site-footer__cta,
.clq-cta.clq-cta,
.aura-team__cta.aura-team__cta {
	background: var(--ds-color-orange-kids);
}

/* Les trois déclinaisons de pastille de la page « La clinique ». Celle sur
   fond jaune est la seule du site dont le texte n'est pas jaune : sur ce fond
   il faut du vert, et c'est bien ce que fait la maquette (nœud 1:821). */
.clq-pill--violet.clq-pill--violet {
	background: var(--ds-color-violet-care);
	color: var(--ds-color-jaune-ortho);
}

.clq-pill--vert.clq-pill--vert {
	background: var(--ds-color-vert-dental);
	color: var(--ds-color-jaune-ortho);
}

.clq-pill--jaune.clq-pill--jaune {
	background: var(--ds-color-jaune-ortho);
	color: var(--ds-color-vert-dental);
}

/* La seule exception à l'inclinaison de -5deg : le bouton de la barre de
   navigation. La maquette le pose droit (nœud 1:3524), contrairement à tous
   les autres boutons du site — y compris « Tous nos soins », dans le panneau
   juste en dessous, qui lui est bien incliné. */
.aura-header__cta.aura-header__cta {
	transform: none;
}

@supports not (text-box-trim: both) {
	.nos-soins__pill.nos-soins__pill,
	.tarifs__pill.tarifs__pill,
	.equipe__pill.equipe__pill,
	.avis__pill.avis__pill,
	.collaboration__pill.collaboration__pill {
		padding-block: 2px;
	}

	.clq-pill.clq-pill {
		padding-block: 2px;
	}

	.aura-header__cta.aura-header__cta,
	.aura-header__panel-cta.aura-header__panel-cta,
	.hero__pill.hero__pill,
	.engagements__cta.engagements__cta,
	.nos-soins__cta.nos-soins__cta,
	.equipe__cta.equipe__cta,
	.collaboration__cta.collaboration__cta,
	.site-footer__cta.site-footer__cta,
	.clq-cta.clq-cta {
		padding-block: 6px;
	}
}

/* Le CTA collant reprend la même forme, mais garde sa propre mécanique : il
   est en position fixe et sa transformation est animée à l'entrée et au
   survol, donc elle ne peut pas venir de la règle commune. */
.aura-sticky-cta {
	padding: 12px 14px;
	font-size: var(--ds-text-lg);
	font-weight: var(--ds-weight-medium);
	line-height: 1.2;
	text-box-trim: both;
	text-box-edge: cap alphabetic;
}

/* --- Titres de section ------------------------------------------------------
   Style H2 de la maquette : Filson Soft Medium 45px, interligne 100 %. Le
   `line-height: 1` n'est pas un détail : c'est lui qui colle les lignes du
   titre les unes aux autres, notamment la ligne qui porte une pastille, et
   sans lui le titre part en escalier.

   Une ligne qui contient une pastille garde malgré tout la hauteur de la
   pastille : un élément inline-flex impose sa propre hauteur à la ligne. C'est
   le comportement voulu, la maquette fait pareil.

   Sélecteurs doublés, comme pour les pastilles et les boutons : plusieurs
   sections déclarent encore `line-height: normal` sur leur titre, et Beaver
   Builder préfixe leur CSS par `.fl-node-xxx`. En classe simple cette règle
   perdait, et l'interligne restait celui du navigateur.
   -------------------------------------------------------------------------- */
.engagements__title.engagements__title,
.nos-soins__title.nos-soins__title,
.tarifs__title.tarifs__title,
.equipe__title.equipe__title,
.avis__title.avis__title,
.collaboration__title.collaboration__title {
	font-size: clamp(28px, 3.125vw, 45px);
	line-height: 1;
}

/* --- Débordement des décors, y compris le pied de page ---------------------
   Aucun conteneur de la chaîne ne doit rogner : sinon les halos se coupent net
   à la frontière des sections, et on voit la démarcation.
   -------------------------------------------------------------------------- */
body:not(.fl-builder-edit) .fl-page,
body:not(.fl-builder-edit) .fl-page-content,
body:not(.fl-builder-edit) .fl-builder-content,
body:not(.fl-builder-edit) #site-footer,
body:not(.fl-builder-edit) #site-footer > * {
	overflow: visible;
}

/* --- Voile coloré du hero -------------------------------------------------
   Les quatre halos du hero sont des frères dans .hero__media : leur opacité
   s'applique donc une fois par halo, et non une fois au groupe. À 0.6 chacun,
   la couverture cumulée là où les quatre se recouvrent atteint
   1 − 0.4⁴ ≈ 97 % : la photo disparaissait entièrement derrière le voile.

   À 0.32, deux halos superposés couvrent 1 − 0.68² ≈ 54 % et les quatre
   ≈ 79 %. La photo reste lisible au centre et la couleur garde toute sa force
   dans les angles, là où la maquette la veut dense.
   -------------------------------------------------------------------------- */
#hero .hero__blob.hero__blob {
	opacity: 1;
}

/* ==========================================================================
   ÉTAT INITIAL DES ANIMATIONS D'ENTRÉE.
   ==========================================================================
   Avant, l'entrée était jouée par `gsap.from(..., {immediateRender: false})` :
   l'élément restait **visible** jusqu'au déclenchement du ScrollTrigger, puis
   sautait brutalement à opacity 0 pour remonter. D'où le clignotement.

   L'état masqué est donc posé en CSS, dès le premier rendu. GSAP ne fait plus
   que jouer l'arrivée. La liste ci-dessous reproduit exactement celle de
   initReveals() dans aura-anim.js : les deux doivent rester synchronisées.

   Tout est conditionné à `html.aura-js`, une classe posée en tête de document
   par un script en ligne et retirée si la couche d'animation ne démarre pas.
   Sans JavaScript, ou si GSAP tombe, la page reste intégralement lisible :
   rien ne peut rester masqué pour de bon.

   Seule l'opacité est posée ici. Le décalage vertical vient du `fromTo` de
   GSAP, qui lit et réécrit la transformation existante — indispensable pour
   les boutons, qui portent déjà leur rotation de -5deg.
   -------------------------------------------------------------------------- */
html.aura-js #engagements .engagements__inner > *,
html.aura-js #piliers .piliers__item,
html.aura-js #tarifs .tarifs__inner > *,
html.aura-js #liste-soins .liste-soins__inner > *,
html.aura-js #equipe .equipe__copy > *,
html.aura-js #avis .avis__inner > *,
html.aura-js #collaboration .collaboration__inner > *,
html.aura-js #site-footer .site-footer__inner > *,
html.aura-js .hero__pill,
html.aura-js .aura-header [data-aura-reveal],
html.aura-js .piliers__icon,
html.aura-js .nos-soins__pill,
html.aura-js .tarifs__pill,
html.aura-js .equipe__pill,
html.aura-js .avis__pill,
html.aura-js .collaboration__pill,
html.aura-js .liste-soins__row,
html.aura-js .nos-soins__gallery {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	html.aura-js #engagements .engagements__inner > *,
	html.aura-js #piliers .piliers__item,
	html.aura-js #tarifs .tarifs__inner > *,
	html.aura-js #liste-soins .liste-soins__inner > *,
	html.aura-js #equipe .equipe__copy > *,
	html.aura-js #avis .avis__inner > *,
	html.aura-js #collaboration .collaboration__inner > *,
	html.aura-js #site-footer .site-footer__inner > *,
	html.aura-js .hero__pill,
	html.aura-js .aura-header [data-aura-reveal],
	html.aura-js .piliers__icon,
	html.aura-js .nos-soins__pill,
	html.aura-js .tarifs__pill,
	html.aura-js .equipe__pill,
	html.aura-js .avis__pill,
	html.aura-js .collaboration__pill,
	html.aura-js .liste-soins__row,
	html.aura-js .nos-soins__gallery {
		opacity: 1;
	}
}

/* ==========================================================================
   UN SEUL FOND POUR TOUTE LA PAGE.
   ==========================================================================
   D'où venaient les démarcations. Chaque section peignait sa propre couleur de
   fond, et l'alternance blanc / cloud d'une section à l'autre traçait une
   ligne horizontale nette à chaque frontière.

   Relevé de la maquette, colonne de gauche et colonne de droite, tous les
   190 px sur les 7589 px de haut : la couleur de base est #F3F0EC — le cloud —
   d'un bout à l'autre. Il n'y a pas un seul pixel de blanc dans le fond. Toute
   la couleur que l'on voit (le vert des soins, le corail et le jaune des avis,
   le violet du pied de page) vient de halos posés PAR-DESSUS ce fond continu.

   On peint donc le cloud une fois, sur la page, et plus aucune section ne
   déclare de fond. Une frontière de section n'a plus rien à trancher : il n'y
   a plus qu'une seule surface. Seul le pied de page garde le sien, qui est un
   vrai aplat coloré et non un halo.
   -------------------------------------------------------------------------- */
body:not(.fl-builder-edit),
body:not(.fl-builder-edit) .fl-page,
body:not(.fl-builder-edit) .fl-page-content {
	background: var(--ds-color-cloud);
}

/* LA bande blanche en haut de page.

   Le CSS de base du design system pose `background: var(--ds-color-white)` sur
   `.fl-ds-page`, et cette classe n'est pas sur les sections : elle est sur les
   DEUX conteneurs de Beaver Themer — celui de la page et celui de l'en-tête.

   Celui de l'en-tête est collant à z-index 200, donc peint APRES le hero. Son
   aplat blanc recouvrait donc les halos qui remontent derrière la barre de
   navigation : l'en-tête était bien transparent, mais son conteneur ne l'était
   pas. D'ou la bande blanche et la ligne nette sous la nav, alors que la
   maquette laisse le degrade passer derriere les liens.

   Les deux conteneurs deviennent transparents : la page laisse voir son cloud,
   l'en-tête laisse voir le decor du hero. L'en-tête ne reprend un fond qu'une
   fois defile, par `is-stuck`. */
body:not(.fl-builder-edit) .fl-builder-content.fl-ds-page,
body:not(.fl-builder-edit) header.fl-builder-content[data-type="header"] {
	background: transparent;
}

/* Et il ne suffit pas d'avoir retiré le fond du CSS de chaque section : le CSS
   de base du design system pose `background: var(--ds-color-white)` sur TOUT
   `.fl-ds-block`. Les sections restaient donc blanches, sur une page cloud, et
   l'en-tête — lui bien en cloud — tranchait en haut de page.

   On rend donc les sections transparentes pour de bon. L'en-tête et le pied de
   page sont exclus : le premier doit rester opaque puisque le contenu défile
   dessous, le second porte son propre aplat coloré. */
body:not(.fl-builder-edit) .fl-builder-content > .fl-ds-block:not(#aura-header):not(#site-footer) {
	background: transparent;
}

/* L'en-tête, lui, est TRANSPARENT en haut de page : il passe par-dessus le
   hero, dont les halos remontent derrière lui. Il ne prend son fond qu'une fois
   la page défilée, quand du contenu commence à passer dessous — c'est la classe
   `is-stuck`, posée par le script dès 8 px de défilement. */
body:not(.fl-builder-edit) #aura-header {
	background: transparent;
}

body:not(.fl-builder-edit) #aura-header.is-stuck {
	background: var(--ds-color-cloud);
}

/* ==========================================================================
   PAGE « LA CLINIQUE ».
   ==========================================================================
   Réglages transverses à la page, écrits ici et non dans le CSS de chaque
   section pour la même raison que sur l'accueil : ce sont des composants
   partagés, ils n'ont qu'une définition.
   -------------------------------------------------------------------------- */

/* Les titres de la page suivent le style H2 de la maquette : Filson Soft
   Medium 45px, interligne 100 %. Sélecteurs doublés — Beaver Builder préfixe
   le CSS de section par `.fl-node-xxx`. */
.clq-ethique__title.clq-ethique__title,
.clq-adapte__title.clq-adapte__title,
.clq-rives__title.clq-rives__title,
.clq-contact__title.clq-contact__title,
.clq-humaniste__title.clq-humaniste__title,
.clq-equipe__title.clq-equipe__title,
.recrut-vision__title.recrut-vision__title,
.recrut-offres__title.recrut-offres__title,
.soins-intro__title.soins-intro__title,
.soins-blog__title.soins-blog__title,
.soin__tr-title.soin__tr-title,
.soin__faq-title.soin__faq-title,
.soin__autres-title.soin__autres-title {
	font-size: clamp(28px, 3.125vw, 45px);
	line-height: 1;
}

/* Une ligne de titre : le texte et la pastille sur la même ligne de base,
   séparés de 8 px — l'écart exact de la maquette. Les titres eux-mêmes
   empilent leurs lignes sans interligne ajouté. */
.clq-ethique__title,
.clq-rives__title,
.clq-humaniste__title,
.clq-equipe__title,
.recrut-vision__title,
.recrut-offres__title,
.soins-intro__title,
.soins-blog__title {
	display: flex;
	flex-direction: column;
}

/* Une ligne de titre à pastille. La pastille, inclinée, déborde de sa ligne :
   un interligne de 1.2 et 6 px entre deux lignes laissent de l'air entre elles,
   là où l'interligne de 100 % des titres les collait. Posé sur la ligne
   elle-même, il l'emporte sur l'interligne hérité du titre. */
.clq-line {
	display: flex;
	align-items: center;
	gap: 6px 8px;
	flex-wrap: wrap;
	line-height: 1.2;
}

.clq-line + .clq-line {
	margin-top: 6px;
}

.clq-equipe__title .clq-line {
	justify-content: center;
}

/* Aucun soulignement sur les liens de la page : ce sont des pastilles et des
   pictogrammes, un trait les traverserait. */
.clq-cta,
.clq-chip,
.clq-carte__link,
.clq-cta:hover,
.clq-chip:hover,
.aura-team__cta,
.aura-team__link,
.aura-team__cta:hover,
.aura-team__link:hover {
	text-decoration: none;
}

/* --- État initial des entrées, page « La clinique » -------------------------
   Même principe que sur l'accueil : l'état masqué est posé en CSS dès le
   premier rendu, GSAP ne joue que l'arrivée. Cette liste doit rester identique
   à celle d'initReveals() dans aura-anim.js.
   -------------------------------------------------------------------------- */
html.aura-js #clq-hero .clq-hero__row > *,
html.aura-js #clq-hero .clq-hero__intro,
html.aura-js #clq-ethique .clq-ethique__copy > *,
html.aura-js #clq-ethique .clq-ethique__media,
html.aura-js #clq-adapte .clq-adapte__title,
html.aura-js #clq-adapte .clq-adapte__row > *,
html.aura-js #clq-rives .clq-rives__title,
html.aura-js #clq-rives .clq-rives__row > *,
html.aura-js #clq-contact .clq-contact__title,
html.aura-js #clq-contact .clq-chip,
html.aura-js #clq-humaniste .clq-humaniste__row > *,
html.aura-js #clq-cartes .clq-carte-item,
html.aura-js #clq-equipe .clq-equipe__stage > * {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	html.aura-js #clq-hero .clq-hero__row > *,
	html.aura-js #clq-hero .clq-hero__intro,
	html.aura-js #clq-ethique .clq-ethique__copy > *,
	html.aura-js #clq-ethique .clq-ethique__media,
	html.aura-js #clq-adapte .clq-adapte__title,
	html.aura-js #clq-adapte .clq-adapte__row > *,
	html.aura-js #clq-rives .clq-rives__title,
	html.aura-js #clq-rives .clq-rives__row > *,
	html.aura-js #clq-contact .clq-contact__title,
	html.aura-js #clq-contact .clq-chip,
	html.aura-js #clq-cartes .clq-carte-item,
	html.aura-js #clq-humaniste .clq-humaniste__row > *,
	html.aura-js #clq-equipe .clq-equipe__stage > * {
		opacity: 1;
	}
}

/* ==========================================================================
   LE DÉCOR NE TIENT JAMAIS EN PLACE.
   ==========================================================================
   Tous les pictogrammes qui flottent — brosses, tubes, silhouettes — et tous
   les grands halos de fond reçoivent un mouvement perpétuel. C'est ce qui
   sépare une maquette imprimée d'une page vivante.

   Le mouvement passe par les propriétés INDÉPENDANTES `translate` et `rotate`,
   jamais par `transform`. C'est essentiel : chaque pictogramme porte déjà sa
   propre inclinaison dans `transform`, et l'animer là l'écraserait. Les
   propriétés indépendantes se composent avec elle au lieu de la remplacer.

   Chaque élément reçoit une durée et un retard différents. Un décor qui
   respire à l'unisson ne se lit pas comme du mouvement mais comme un défaut :
   c'est le décalage qui donne l'impression de flottement.
   -------------------------------------------------------------------------- */

@keyframes aura-float {
	0%, 100% { translate: 0 0;      rotate: 0deg; }
	33%      { translate: 3px -9px; rotate: 2.2deg; }
	66%      { translate: -2px 5px; rotate: -1.6deg; }
}

@keyframes aura-drift {
	0%, 100% { translate: 0 0;         scale: 1; }
	50%      { translate: -18px 14px;  scale: 1.03; }
}

.engagements__deco,
.clq-hero__picto,
.clq-adapte__picto,
.team-hero__picto,
.recrut-hero__picto,
.soins-hero__picto,
.soin__picto,
.trt__picto,
.trt__rai-picto,
.aura-header__deco,
.clq-chip__icon,
.aura-team__picto,
.aura-membre__picto {
	animation: aura-float 6.5s ease-in-out infinite;
	will-change: translate, rotate;
}

/* Désynchronisation : trois cadences, trois départs. */
.engagements__deco:nth-child(2),
.clq-hero__picto--2,
.clq-adapte__picto--2,
.team-hero__picto--2,
.recrut-hero__picto--2,
.soins-hero__picto--2,
.soin__picto--2,
.trt__picto--2,
.trt__rai-picto--2,
.aura-header__deco--tube,
.clq-chip--tel .clq-chip__icon,
.aura-team__picto--2,
.aura-membre__picto--2,
.aura-membre__picto--5 {
	animation-duration: 8.2s;
	animation-delay: -2.4s;
}

.engagements__deco:nth-child(3),
.clq-hero__picto--3,
.team-hero__picto--3,
.recrut-hero__picto--3,
.soins-hero__picto--3,
.soin__picto--3,
.trt__picto--3,
.trt__rai-picto--3,
.clq-chip--mail .clq-chip__icon,
.aura-team__picto--3,
.aura-membre__picto--3 {
	animation-duration: 7.3s;
	animation-delay: -4.1s;
}

.clq-chip--rdv .clq-chip__icon {
	animation-duration: 9s;
	animation-delay: -1.2s;
}

/* --- Les pictogrammes réagissent au survol ---------------------------------
   Ils sont décoratifs, donc leur calque porte `pointer-events: none` — sans quoi
   il couvrirait toute la section et avalerait les clics. On rend donc la souris
   sensible sur le PICTOGRAMME lui-même, dont la boîte fait deux ou trois pour
   cent de la page : il devient survolable sans que le reste du calque le
   redevienne.

   L'effet passe par `scale`, et par `scale` seul. `translate` et `rotate` sont
   déjà pris par l'animation de flottement, qui les rejoue en boucle : y toucher
   ici, c'est se faire écraser au prochain pas de l'animation. `scale` est la
   troisième propriété indépendante, libre sur les pictogrammes — les halos, eux,
   l'utilisent pour leur dérive, et ne sont pas concernés.

   Le flottement se met en pause pendant le survol : sans cela le pictogramme
   continuerait de dériver sous le curseur et l'agrandissement se lirait mal.
   -------------------------------------------------------------------------- */
.engagements__deco,
.clq-hero__picto,
.clq-adapte__picto,
.team-hero__picto,
.recrut-hero__picto,
.soins-hero__picto,
.soin__picto,
.trt__picto,
.trt__rai-picto,
.aura-team__picto,
.aura-membre__picto {
	pointer-events: auto;
	transition: scale 340ms cubic-bezier(.34, 1.56, .64, 1),
	            filter 340ms ease;
}

.engagements__deco:hover,
.clq-hero__picto:hover,
.clq-adapte__picto:hover,
.team-hero__picto:hover,
.recrut-hero__picto:hover,
.soins-hero__picto:hover,
.soin__picto:hover,
.trt__picto:hover,
.trt__rai-picto:hover,
.aura-team__picto:hover,
.aura-membre__picto:hover {
	scale: 1.28;
	filter: drop-shadow(0 10px 18px rgba(52, 73, 94, .22));
	animation-play-state: paused;
}

/* Le survol reste utile en mouvement réduit — c'est le visiteur qui le
   déclenche — mais il arrive sans ressort ni élan. */
@media (prefers-reduced-motion: reduce) {
	.engagements__deco,
	.clq-hero__picto,
	.clq-adapte__picto,
	.team-hero__picto,
	.recrut-hero__picto,
	.soins-hero__picto,
	.soin__picto,
	.trt__picto,
	.trt__rai-picto,
	.aura-team__picto,
	.aura-membre__picto {
		transition: none;
	}

	.engagements__deco:hover,
	.clq-hero__picto:hover,
	.clq-adapte__picto:hover,
	.team-hero__picto:hover,
	.recrut-hero__picto:hover,
	.soins-hero__picto:hover,
	.soin__picto:hover,
	.trt__picto:hover,
	.trt__rai-picto:hover,
	.aura-team__picto:hover,
	.aura-membre__picto:hover {
		scale: 1.12;
	}
}

/* Les grands halos dérivent, très lentement. L'amplitude est plus large mais
   la durée trois fois plus longue : on ne doit pas voir le mouvement, on doit
   sentir que le fond n'est pas figé. */
.hero__blob,
.nos-soins__halo,
.equipe__halo,
.clq-hero__halo,
.clq-rives__halo,
.clq-humaniste__halo,
.team-hero__halo,
.recrut-hero__halo,
.recrut-vision__halo,
.soins-hero__halo,
.soins-rdv__halo,
.soins-blog__halo,
.soin__halo,
.soin__tr-halo,
.trt__halo,
.trt__rai-halo,
.trt__eta-halo,
.trt__tarifs-halo,
.clq-ethique__halo,
.team-ensemble__halo,
.aura-header__blob,
.aura-membre__halo {
	animation: aura-drift 22s ease-in-out infinite;
	will-change: translate, scale;
}

.hero__blob--violet,
.clq-hero__halo--2,
.clq-humaniste__halo--2,
.team-hero__halo--2,
.recrut-hero__halo--2,
.soins-hero__halo--2,
.soin__halo--2,
.trt__halo--2,
.clq-rives__halo--b,
.aura-header__blob--2 { animation-duration: 27s; animation-delay: -6s; }

.hero__blob--jaune,
.clq-hero__halo--3,
.clq-humaniste__halo--3,
.team-hero__halo--3,
.recrut-hero__halo--3,
.soins-hero__halo--3,
.soin__halo--3,
.trt__halo--3,
.aura-header__blob--3 { animation-duration: 19s; animation-delay: -11s; }

.hero__blob--orange,
.clq-hero__halo--4,
.team-hero__halo--4,
.recrut-hero__halo--4,
.soins-hero__halo--4,
.soin__halo--4,
.trt__halo--4,
.aura-header__blob--4 { animation-duration: 31s; animation-delay: -3s; }

/* Un décor qui bouge sans fin est exactement ce que le mouvement réduit
   demande de supprimer. */
@media (prefers-reduced-motion: reduce) {
	.engagements__deco,
	.clq-hero__picto,
	.clq-adapte__picto,
	.team-hero__picto,
	.recrut-hero__picto,
	.soins-hero__picto,
	.soin__picto,
	.trt__picto,
	.trt__rai-picto,
	.aura-header__deco,
	.clq-chip__icon,
	.aura-team__picto,
	.aura-membre__picto,
	.aura-membre__halo,
	.hero__blob,
	.nos-soins__halo,
	.equipe__halo,
	.clq-hero__halo,
	.clq-rives__halo,
	.clq-humaniste__halo,
	.team-hero__halo,
	.recrut-hero__halo,
	.recrut-vision__halo,
	.soins-hero__halo,
	.soins-rdv__halo,
	.soins-blog__halo,
	.soin__halo,
	.soin__tr-halo,
	.trt__halo,
	.trt__rai-halo,
	.trt__eta-halo,
	.trt__tarifs-halo,
	.clq-ethique__halo,
	.team-ensemble__halo,
	.aura-header__blob {
		animation: none;
	}
}

/* --- État initial des entrées, page « L'équipe » --------------------------
   Même principe que sur les autres pages : masqué en CSS dès le premier rendu,
   GSAP ne joue que l'arrivée. Liste jumelle de celle d'initReveals().
   -------------------------------------------------------------------------- */
html.aura-js #team-hero .team-hero__crumbs,
html.aura-js #team-hero .team-hero__row > *,
html.aura-js #team-hero .team-hero__intro,
html.aura-js #team-ensemble .team-ensemble__copy > *,
html.aura-js #team-ensemble .team-ensemble__media,
html.aura-js #team-titre .team-titre__title,
html.aura-js .aura-team__item {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	html.aura-js #team-hero .team-hero__crumbs,
	html.aura-js #team-hero .team-hero__row > *,
	html.aura-js #team-hero .team-hero__intro,
	html.aura-js #team-ensemble .team-ensemble__copy > *,
	html.aura-js #team-ensemble .team-ensemble__media,
	html.aura-js #team-titre .team-titre__title,
	html.aura-js .aura-team__item {
		opacity: 1;
	}
}


/* --- État initial des entrées, page « Recrutement » -----------------------
   Liste jumelle de celle d'initReveals(). Masqué en CSS dès le premier rendu :
   GSAP ne joue que l'arrivée, jamais la disparition.
   -------------------------------------------------------------------------- */
html.aura-js #recrut-hero .recrut-hero__crumbs,
html.aura-js #recrut-hero .recrut-hero__row > *,
html.aura-js #recrut-hero .recrut-hero__intro,
html.aura-js #recrut-vision .recrut-vision__copy > *,
html.aura-js #recrut-vision .recrut-vision__media,
html.aura-js #recrut-offres .recrut-offres__title,
html.aura-js #recrut-offres .recrut-offres__col > * {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	html.aura-js #recrut-hero .recrut-hero__crumbs,
	html.aura-js #recrut-hero .recrut-hero__row > *,
	html.aura-js #recrut-hero .recrut-hero__intro,
	html.aura-js #recrut-vision .recrut-vision__copy > *,
	html.aura-js #recrut-vision .recrut-vision__media,
	html.aura-js #recrut-offres .recrut-offres__title,
	html.aura-js #recrut-offres .recrut-offres__col > * {
		opacity: 1;
	}
}

/* --- Page « FAQ » : décor et entrées ----------------------------------------
   Mêmes recettes que les autres hero ; les taches de fond de la liste dérivent
   comme les halos. Liste des entrées jumelle de celle d'initReveals().
   -------------------------------------------------------------------------- */
.faq-hero__picto {
	animation: aura-float 6.5s ease-in-out infinite;
	will-change: translate, rotate;
	pointer-events: auto;
	transition: scale 340ms cubic-bezier(.34, 1.56, .64, 1),
	            filter 340ms ease;
}

.faq-hero__picto--2 { animation-duration: 8.2s; animation-delay: -2.4s; }
.faq-hero__picto--3 { animation-duration: 7.3s; animation-delay: -4.1s; }

.faq-hero__picto:hover {
	scale: 1.28;
	filter: drop-shadow(0 10px 18px rgba(52, 73, 94, .22));
	animation-play-state: paused;
}

.faq-hero__halo,
.faq-liste__fond {
	animation: aura-drift 22s ease-in-out infinite;
	will-change: translate, scale;
}

.faq-hero__halo--2,
.faq-liste__fond:nth-child(3n+2) { animation-duration: 27s; animation-delay: -6s; }
.faq-hero__halo--3,
.faq-liste__fond:nth-child(3n) { animation-duration: 19s; animation-delay: -11s; }
.faq-hero__halo--4 { animation-duration: 31s; animation-delay: -3s; }

html.aura-js #faq-hero .faq-hero__row > *,
html.aura-js #faq-liste .faq-liste__intro,
html.aura-js #faq-liste .faq-liste__title,
html.aura-js #faq-liste .faq-liste__item {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.faq-hero__picto,
	.faq-hero__halo,
	.faq-liste__fond {
		animation: none;
		transition: none;
	}

	.faq-hero__picto:hover {
		scale: 1.12;
	}

	html.aura-js #faq-hero .faq-hero__row > *,
	html.aura-js #faq-liste .faq-liste__intro,
	html.aura-js #faq-liste .faq-liste__title,
	html.aura-js #faq-liste .faq-liste__item {
		opacity: 1;
	}
}

/* --- Page d'un article : décor et entrées ---------------------------------
   Mêmes recettes que les autres hero. Liste des entrées jumelle de celle
   d'initReveals(). L'encart est masqué, pas son parent collant : le masquer
   lui ferait perdre `position: sticky` le temps de l'animation.
   -------------------------------------------------------------------------- */
.art__picto {
	animation: aura-float 6.5s ease-in-out infinite;
	will-change: translate, rotate;
	pointer-events: auto;
	transition: scale 340ms cubic-bezier(.34, 1.56, .64, 1),
	            filter 340ms ease;
}

.art__picto--2 { animation-duration: 8.2s; animation-delay: -2.4s; }
.art__picto--3 { animation-duration: 7.3s; animation-delay: -4.1s; }

.art__picto:hover {
	scale: 1.28;
	filter: drop-shadow(0 10px 18px rgba(52, 73, 94, .22));
	animation-play-state: paused;
}

.art__halo {
	animation: aura-drift 22s ease-in-out infinite;
	will-change: translate, scale;
}

.art__halo--2 { animation-duration: 27s; animation-delay: -6s; }
.art__halo--3 { animation-duration: 19s; animation-delay: -11s; }
.art__halo--4 { animation-duration: 31s; animation-delay: -3s; }

html.aura-js #art-hero .art__hero-row > *,
html.aura-js #art-contenu .art__prose,
html.aura-js #art-contenu .art__encart,
html.aura-js #art-autres .art__autres-entete > *,
html.aura-js #art-autres .art__carte {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.art__picto,
	.art__halo {
		animation: none;
		transition: none;
	}

	.art__picto:hover {
		scale: 1.12;
	}

	html.aura-js #art-hero .art__hero-row > *,
	html.aura-js #art-contenu .art__prose,
	html.aura-js #art-contenu .art__encart,
	html.aura-js #art-autres .art__autres-entete > *,
	html.aura-js #art-autres .art__carte {
		opacity: 1;
	}
}

/* --- Page « Conseils & actualités » : décor et entrées ---------------------
   Mêmes recettes que les autres hero. Liste des entrées jumelle de celle
   d'initReveals().
   -------------------------------------------------------------------------- */
.actus-hero__picto {
	animation: aura-float 6.5s ease-in-out infinite;
	will-change: translate, rotate;
	pointer-events: auto;
	transition: scale 340ms cubic-bezier(.34, 1.56, .64, 1),
	            filter 340ms ease;
}

.actus-hero__picto--2 { animation-duration: 8.2s; animation-delay: -2.4s; }
.actus-hero__picto--3 { animation-duration: 7.3s; animation-delay: -4.1s; }

.actus-hero__picto:hover {
	scale: 1.28;
	filter: drop-shadow(0 10px 18px rgba(52, 73, 94, .22));
	animation-play-state: paused;
}

.actus-hero__halo {
	animation: aura-drift 22s ease-in-out infinite;
	will-change: translate, scale;
}

.actus-hero__halo--2 { animation-duration: 27s; animation-delay: -6s; }
.actus-hero__halo--3 { animation-duration: 19s; animation-delay: -11s; }
.actus-hero__halo--4 { animation-duration: 31s; animation-delay: -3s; }

html.aura-js #actus-hero .actus-hero__row > *,
html.aura-js #actus-hero .actus-hero__intro,
html.aura-js #actus-derniere .actus-derniere__title,
html.aura-js #actus-derniere .actus-derniere__article > *,
html.aura-js #actus-grille .actus-grille__title,
html.aura-js #actus-grille .actus-grille__carte {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.actus-hero__picto,
	.actus-hero__halo {
		animation: none;
		transition: none;
	}

	.actus-hero__picto:hover {
		scale: 1.12;
	}

	html.aura-js #actus-hero .actus-hero__row > *,
	html.aura-js #actus-hero .actus-hero__intro,
	html.aura-js #actus-derniere .actus-derniere__title,
	html.aura-js #actus-derniere .actus-derniere__article > *,
	html.aura-js #actus-grille .actus-grille__title,
	html.aura-js #actus-grille .actus-grille__carte {
		opacity: 1;
	}
}

/* --- Page « Tarifs » : décor et entrées -----------------------------------
   Mêmes recettes que les autres hero — flottement et survol des pictogrammes,
   dérive des halos — regroupées ici plutôt que dispersées dans les listes
   ci-dessus. Liste des entrées jumelle de celle d'initReveals().
   -------------------------------------------------------------------------- */
.tarifs-hero__picto {
	animation: aura-float 6.5s ease-in-out infinite;
	will-change: translate, rotate;
	pointer-events: auto;
	transition: scale 340ms cubic-bezier(.34, 1.56, .64, 1),
	            filter 340ms ease;
}

.tarifs-hero__picto--2 { animation-duration: 8.2s; animation-delay: -2.4s; }
.tarifs-hero__picto--3 { animation-duration: 7.3s; animation-delay: -4.1s; }

.tarifs-hero__picto:hover {
	scale: 1.28;
	filter: drop-shadow(0 10px 18px rgba(52, 73, 94, .22));
	animation-play-state: paused;
}

.tarifs-hero__halo {
	animation: aura-drift 22s ease-in-out infinite;
	will-change: translate, scale;
}

.tarifs-hero__halo--2 { animation-duration: 27s; animation-delay: -6s; }
.tarifs-hero__halo--3 { animation-duration: 19s; animation-delay: -11s; }
.tarifs-hero__halo--4 { animation-duration: 31s; animation-delay: -3s; }

html.aura-js #tarifs-hero .tarifs-hero__row > *,
html.aura-js #tarifs-hero .tarifs-hero__note,
html.aura-js #tarifs-offres .tarifs-offres__title,
html.aura-js #tarifs-offres .tarifs-offres__offre > *,
html.aura-js #tarifs-liste .tarifs-liste__entete > *,
html.aura-js #tarifs-liste .tarifs-liste__item {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tarifs-hero__picto,
	.tarifs-hero__halo {
		animation: none;
		transition: none;
	}

	.tarifs-hero__picto:hover {
		scale: 1.12;
	}

	html.aura-js #tarifs-hero .tarifs-hero__row > *,
	html.aura-js #tarifs-hero .tarifs-hero__note,
	html.aura-js #tarifs-offres .tarifs-offres__title,
	html.aura-js #tarifs-offres .tarifs-offres__offre > *,
	html.aura-js #tarifs-liste .tarifs-liste__entete > *,
	html.aura-js #tarifs-liste .tarifs-liste__item {
		opacity: 1;
	}
}

/* --- État initial des entrées, page « Nos soins » -------------------------
   Liste jumelle de celle d'initReveals().
   -------------------------------------------------------------------------- */
html.aura-js #soins-hero .soins-hero__row > *,
html.aura-js #soins-hero .soins-hero__quote,
html.aura-js #soins-intro .soins-intro__stage > *,
html.aura-js #soins-liste .soins-liste__item,
html.aura-js #soins-rdv .soins-rdv__stage > *,
html.aura-js #soins-atouts .soins-atouts__item,
html.aura-js #soins-blog .soins-blog__copy > *,
html.aura-js #soins-blog .soins-blog__carte {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	html.aura-js #soins-hero .soins-hero__row > *,
	html.aura-js #soins-hero .soins-hero__quote,
	html.aura-js #soins-intro .soins-intro__stage > *,
	html.aura-js #soins-liste .soins-liste__item,
	html.aura-js #soins-rdv .soins-rdv__stage > *,
	html.aura-js #soins-atouts .soins-atouts__item,
	html.aura-js #soins-blog .soins-blog__copy > *,
	html.aura-js #soins-blog .soins-blog__carte {
		opacity: 1;
	}
}

/* --- État initial des entrées, page d'un soin -----------------------------
   Liste jumelle de celle d'initReveals().
   -------------------------------------------------------------------------- */
html.aura-js #soin-hero .soin__hero-row > *,
html.aura-js #soin-traitements .soin__stage > *,
html.aura-js #soin-traitements .soin__tr-item,
html.aura-js #soin-faq .soin__faq-title,
html.aura-js #soin-faq .soin__faq-item,
html.aura-js #soin-autres .soin__autres-title,
html.aura-js #soin-autres .soin__autre {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	html.aura-js #soin-hero .soin__hero-row > *,
	html.aura-js #soin-traitements .soin__stage > *,
	html.aura-js #soin-traitements .soin__tr-item,
	html.aura-js #soin-faq .soin__faq-title,
	html.aura-js #soin-faq .soin__faq-item,
	html.aura-js #soin-autres .soin__autres-title,
	html.aura-js #soin-autres .soin__autre {
		opacity: 1;
	}
}

/* --- État initial des entrées, page d'un traitement ------------------------
   Liste jumelle de celle d'initReveals().
   -------------------------------------------------------------------------- */
html.aura-js #trt-hero .trt__hero-row > *,
html.aura-js #trt-raisons .trt__rai-title,
html.aura-js #trt-raisons .trt__raisons-liste li,
html.aura-js #trt-raisons .trt__citation,
html.aura-js #trt-etapes .trt__eta-title,
html.aura-js #trt-etapes .trt__etape,
html.aura-js #trt-douceur .trt__douceur-stage > *,
html.aura-js #trt-tarifs .trt__tarifs-stage > *,
html.aura-js #trt-faq .trt__faq-title,
html.aura-js #trt-faq .trt__faq-entete > *,
html.aura-js #trt-faq .trt__faq-item,
html.aura-js #trt-fin .trt__fin-stage > * {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	html.aura-js #trt-hero .trt__hero-row > *,
	html.aura-js #trt-raisons .trt__rai-title,
	html.aura-js #trt-raisons .trt__raisons-liste li,
	html.aura-js #trt-raisons .trt__citation,
	html.aura-js #trt-etapes .trt__eta-title,
	html.aura-js #trt-etapes .trt__etape,
	html.aura-js #trt-douceur .trt__douceur-stage > *,
	html.aura-js #trt-tarifs .trt__tarifs-stage > *,
	html.aura-js #trt-faq .trt__faq-title,
	html.aura-js #trt-faq .trt__faq-entete > *,
	html.aura-js #trt-faq .trt__faq-item,
	html.aura-js #trt-fin .trt__fin-stage > * {
		opacity: 1;
	}
}

/* --- État initial des entrées, fiche de membre ----------------------------
   Liste jumelle de celle d'initReveals(). Voir le bloc « État initial des
   animations d'entrée » plus haut pour le pourquoi.
   -------------------------------------------------------------------------- */
html.aura-js .aura-membre__crumbs,
html.aura-js .aura-membre__intro > *,
html.aura-js .aura-membre__quote,
html.aura-js .aura-membre__bio-stage > *,
html.aura-js .aura-membre__horaires-titre,
html.aura-js .aura-membre__horaires-row > *,
html.aura-js .aura-membre__rdv > *,
html.aura-js .aura-membre__soins-liste li,
html.aura-js .aura-membre__horaires-liste li,
html.aura-js .aura-membre__drapeau {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	html.aura-js .aura-membre__crumbs,
	html.aura-js .aura-membre__intro > *,
	html.aura-js .aura-membre__quote,
	html.aura-js .aura-membre__bio-stage > *,
	html.aura-js .aura-membre__horaires-titre,
	html.aura-js .aura-membre__horaires-row > *,
	html.aura-js .aura-membre__rdv > *,
	html.aura-js .aura-membre__soins-liste li,
	html.aura-js .aura-membre__horaires-liste li,
	html.aura-js .aura-membre__drapeau {
		opacity: 1;
	}
}

/* ==========================================================================
   LE CANEVAS BORNÉ.
   ==========================================================================
   Les calques de décor sont calés sur le canevas de 1440 px de la maquette et
   dimensionnés en proportion de l'écran. Le contenu qu'ils entourent, lui, est
   en pixels fixes : une photo de 440 px reste à 440 px.

   Au-delà de 1440 px les deux s'écartent. À 2000 px, un calque de décor mesure
   39 % de plus qu'à 1440 alors que le contenu n'a pas bougé : les pictogrammes
   descendent et finissent par se poser SUR le texte — c'est ce qui faisait
   passer une brosse à dents au milieu de la citation de la fiche de membre.

   D'où ce canevas borné. En dessous de 1440 il vaut la largeur de l'écran et le
   décor rétrécit comme avant ; au-delà il reste bloqué, et le décor cesse de
   grandir. Les deux restent alignés.
   -------------------------------------------------------------------------- */
:root {
	--aura-cv: min(100vw, 1440px);
}

/* ==========================================================================
   LE PIED DE PAGE PASSE DESSOUS, PAS DESSUS.
   ==========================================================================
   Le pied de page remonte de 340 px par une marge négative, pour que sa couleur
   arrive progressivement sur la page au lieu de commencer par une ligne nette.
   Mais il vient en dernier dans le document : par défaut il se peint donc
   PAR-DESSUS la section qui le précède, et recouvrait le bouton « Prendre RDV
   en ligne » d'un voile vert.

   On inverse l'ordre : chaque section de premier niveau passe devant, le pied
   de page reste derrière. Il garde un z-index de 0 et non -1 — à -1 il
   passerait sous le fond cloud de la page et disparaîtrait tout à fait.
   -------------------------------------------------------------------------- */
body:not(.fl-builder-edit) .fl-builder-content > .fl-module:not(#site-footer) {
	position: relative;
	z-index: 1;
}

/* --- Un décor ne couvre pas le contenu de la section précédente -------------
   Les fonds et les halos débordent volontairement de leur section : c'est ce
   qui évite les démarcations. Mais toutes les sections sont au même z-index, et
   une section peint donc par-dessus celle qui la précède dans le document. Le
   débordement VERS LE HAUT d'une section passait ainsi sur le contenu de sa
   voisine du dessus.

   Deux endroits en souffraient sur l'accueil :

     — le fond de « Nos soins » monte de 280 px et voilait le bouton
       « Découvrir nos engagements » ;
     — le halo corail de « Notre équipe » monte de près de 600 px et voilait la
       liste des soins.

   On remonte donc d'un cran la section qui PRÉCÈDE, et non celle qui déborde :
   le débordement reste entier — la couleur doit continuer d'arriver avant la
   frontière — mais il passe désormais derrière le texte et les boutons. Aucune
   des deux sections remontées n'a de décor qui sorte de ses limites, elles ne
   peuvent donc rien couvrir en retour.

   Le sélecteur reprend celui de la règle générale et lui ajoute l'identifiant :
   `body:not(...) #engagements` seul est MOINS spécifique qu'elle, et la
   spécificité l'emporte sur l'ordre — la valeur n'était donc jamais appliquée.
   -------------------------------------------------------------------------- */
body:not(.fl-builder-edit) .fl-builder-content > .fl-module:not(#site-footer)#engagements,
body:not(.fl-builder-edit) .fl-builder-content > .fl-module:not(#site-footer)#liste-soins {
	z-index: 2;
}

/* Hero de la FAQ : ses pictogrammes débordent sur l'introduction de la liste
   qui suit. À z-index égal, la liste — plus bas dans le code — les recouvrirait.
   Le hero passe donc au-dessus ; ses halos, eux, ne débordent que dans la marge
   haute de la liste, où il n'y a pas de texte. */
body:not(.fl-builder-edit) .fl-builder-content > .fl-module:not(#site-footer)#faq-hero {
	z-index: 3;
}

/* Page Contact : le hero passe au-dessus des coordonnées pour que ses
   pictogrammes ne soient pas recouverts ; la carte passe au-dessus du
   formulaire, dont les taches de fond remontent sous elle comme dans la
   maquette. */
body:not(.fl-builder-edit) .fl-builder-content > .fl-module:not(#site-footer)#contact-hero,
body:not(.fl-builder-edit) .fl-builder-content > .fl-module:not(#site-footer)#contact-carte {
	z-index: 3;
}

/* --- Page « Contact » : décor et entrées ------------------------------------
   Mêmes recettes que les autres pages. Liste des entrées jumelle de celle
   d'initReveals().
   -------------------------------------------------------------------------- */
.contact-hero__picto,
.contact-coord__picto {
	animation: aura-float 6.5s ease-in-out infinite;
	will-change: translate, rotate;
	pointer-events: auto;
	transition: scale 340ms cubic-bezier(.34, 1.56, .64, 1),
	            filter 340ms ease;
}

.contact-hero__picto--2,
.contact-coord__picto--2 { animation-duration: 8.2s; animation-delay: -2.4s; }
.contact-hero__picto--3,
.contact-coord__picto--3 { animation-duration: 7.3s; animation-delay: -4.1s; }

.contact-hero__picto:hover,
.contact-coord__picto:hover {
	scale: 1.28;
	filter: drop-shadow(0 10px 18px rgba(52, 73, 94, .22));
	animation-play-state: paused;
}

.contact-hero__halo,
.contact-form__fond {
	animation: aura-drift 22s ease-in-out infinite;
	will-change: translate, scale;
}

.contact-hero__halo--2,
.contact-form__fond--2 { animation-duration: 27s; animation-delay: -6s; }
.contact-hero__halo--3 { animation-duration: 19s; animation-delay: -11s; }
.contact-hero__halo--4 { animation-duration: 31s; animation-delay: -3s; }

html.aura-js #contact-hero .contact-hero__grid > *,
html.aura-js #contact-coord .contact-coord__title,
html.aura-js #contact-coord .contact-coord__bloc,
html.aura-js #contact-form .contact-form__title,
html.aura-js #contact-form .contact-form__form {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.contact-hero__picto,
	.contact-coord__picto,
	.contact-hero__halo,
	.contact-form__fond {
		animation: none;
		transition: none;
	}

	.contact-hero__picto:hover,
	.contact-coord__picto:hover {
		scale: 1.12;
	}

	html.aura-js #contact-hero .contact-hero__grid > *,
	html.aura-js #contact-coord .contact-coord__title,
	html.aura-js #contact-coord .contact-coord__bloc,
	html.aura-js #contact-form .contact-form__title,
	html.aura-js #contact-form .contact-form__form {
		opacity: 1;
	}
}