/**
 * Pearl Theme — styles non exprimables dans theme.json.
 *
 * Règle : si une valeur peut vivre dans theme.json, elle y vit. Ce fichier ne
 * contient que des états d'interaction, du comportement de défilement et des
 * décorations — jamais de couleur ni de taille en dur.
 *
 * Voir docs/adr/0004-interactions-et-animations.md.
 */

/* -------------------------------------------------------------------------
 * 1. Interactions — vocabulaire commun (ADR-0004)
 * ---------------------------------------------------------------------- */

:where(a, button, .wp-block-button__link, summary) {
	transition:
		color var(--wp--custom--duration--fast) var(--wp--custom--ease),
		background-color var(--wp--custom--duration--fast) var(--wp--custom--ease),
		opacity var(--wp--custom--duration--fast) var(--wp--custom--ease);
}

/* Le focus visible n'est jamais supprimé, y compris là où le hover ne fait rien. */
:where(a, button, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Lien texte : le soulignement se redéploie depuis la gauche au survol. */
.pearl-link {
	position: relative;
	display: inline-block;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--link);
	text-decoration: none;
	text-transform: uppercase;
}

/* Trait court, toujours visible sous le libellé, qui s'étend en pleine
   largeur au survol. Aligné à gauche par défaut ; `.pearl-link--centered` le
   recentre pour les libellés centrés. */
.pearl-link::before {
	background-color: currentColor;
	block-size: 1px;
	content: "";
	inline-size: 1.75rem;
	inset-block-end: -0.45em;
	inset-inline-start: 0;
	position: absolute;
	transition: inline-size var(--wp--custom--duration--base) var(--wp--custom--ease);
}

.pearl-link:hover::before,
.pearl-link:focus-visible::before {
	inline-size: 100%;
}

.pearl-link--centered::before,
.pearl-section-header--align-center .pearl-link::before {
	inset-inline-start: 50%;
	transform: translateX(-50%);
}

/* Bouton bordé : le fond se remplit au survol. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
 * 2. Typographie — variantes de casse
 *
 * La casse est un choix de style, jamais de saisie : le client ne doit pas taper
 * un titre en capitales, ce qui dégraderait lecteurs d'écran et SEO.
 * ---------------------------------------------------------------------- */

.pearl-display {
	letter-spacing: var(--wp--custom--tracking--display);
	text-transform: uppercase;
}

.pearl-eyebrow {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	line-height: 1;
}

/* -------------------------------------------------------------------------
 * 3. Défilement — base commune du bloc pearl/collection (ADR-0003)
 *
 * Le comportement mobile est en CSS pur. Le JS ne sert qu'aux flèches desktop
 * et à la barre de progression.
 * ---------------------------------------------------------------------- */

.pearl-scroller {
	-ms-overflow-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.pearl-scroller::-webkit-scrollbar {
	display: none;
}

.pearl-scroller > * {
	scroll-snap-align: start;
}

/* -------------------------------------------------------------------------
 * 3-bis. Sections de page — les deux bascules mobiles relevées en maquette
 *
 * Portées par le thème, pas par les patterns : un pattern est détaché dès qu'il
 * est inséré, et une valeur écrite dans ses attributs deviendrait dix copies
 * impossibles à corriger. Ici, une seule règle vaut pour toutes les pages.
 *
 * Les deux comportements viennent de CONTEXT.md § C-bis, relevés sur la frame
 * 402 px : le header de page est encarté au lieu d'être full-bleed, et l'encart
 * de texte cesse de chevaucher l'image.
 * ---------------------------------------------------------------------- */

/* Deux bandes pleine largeur se touchent. Sans cette règle, l'écart de bloc du
   flux laisse voir le fond de page entre elles : mesuré à 30 px entre deux
   sections crème consécutives, là où la maquette montre une bande continue.
   Le rythme vertical est porté par le padding de chaque section, pas par
   l'espace qui les sépare. */
.wp-site-blocks .alignfull + .alignfull {
	margin-block-start: 0;
}

/* Même raison entre les trois régions de la page : l'écart de bloc de la racine
   posait 32 px de fond de page entre le contenu et le pied de page, visible en
   filet blanc au-dessus du bordeaux. En-tête, contenu et pied de page se
   touchent. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

@media (max-width: 781px) {

	/* Le padding est posé sur la figure, pas sur l'image : la figure garde sa
	   largeur pleine, seule l'image se rétracte — le fond reste continu. */
	.pearl-page-header {
		padding-inline: var(--wp--preset--spacing--30);
	}
}

/* L'encart remonte sur l'image. La valeur est en `rem` et non en preset : c'est
   un chevauchement optique, pas un rythme vertical du design system.

   Sa largeur est bornée à 58 % de l'image : sur la maquette l'encart couvre un
   peu plus de la moitié de la photo, et laissé libre il s'étalait jusqu'à la
   largeur de texte du groupe, ce qui écrasait le débord.

   La borne est calculée sur `wide-size`, pas exprimée en pourcentage : un
   pourcentage se résout sur le conteneur pleine largeur de la section, pas sur
   l'image « large » qu'il doit recouvrir — mesuré à 789 px au lieu des 696
   attendus. */
.pearl-feature__card {
	margin-block-start: -6rem;
	margin-inline: auto;
	max-inline-size: calc(0.58 * var(--wp--style--global--wide-size, 1200px));
}

@media (max-width: 781px) {

	.pearl-feature__card {
		margin-block-start: 0;
		max-inline-size: none;
	}
}

/* -------------------------------------------------------------------------
 * 3-quinquies. En-tête
 *
 * Trois zones en grille `1fr auto 1fr` et non un `space-between` : le logo est
 * centré sur la page dans les maquettes, pas au milieu de ce qui reste entre le
 * menu et le bouton — mesuré, les deux extrémités n'ont pas la même largeur.
 * ---------------------------------------------------------------------- */

.pearl-header {
	background-color: var(--wp--preset--color--base-alt);
}

/* La largeur du logo est ici et non dans le pattern : le même fichier sert les
   deux contextes, et une largeur inline empêcherait de les distinguer.
   Relevé en maquette : 121 px en en-tête, 180 px en pied de page. */
.pearl-brand img {
	inline-size: 180px;
}

.pearl-header .pearl-brand img {
	inline-size: 121px;
}

.pearl-header__bar {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 1fr auto 1fr;
	/* La moitié du `block-gap` retiré ci-dessous, répartie en haut et en bas
	   plutôt que concentrée en haut : la barre respire sans repousser le logo
	   hors du centrage vertical. */
	padding-block: calc(var(--wp--preset--spacing--40) / 2);
}

/* Le cœur de la grille garde le `margin-block-start` que WordPress pose sur
   les enfants d'un groupe en flux (`is-layout-flow > * + *`) : la classe
   reste sur la balise même une fois le conteneur passé en grille. Sans quoi
   le logo — deuxième colonne — se retrouve poussé vers le bas au lieu d'être
   centré sur la hauteur de la barre. */
.pearl-header__bar > * {
	margin-block-start: 0;
}

.pearl-header__start,
.pearl-header__end {
	align-items: center;
}

.pearl-header__link {
	margin: 0;
}

.pearl-header__link a {
	color: inherit;
	text-decoration: none;
}

.pearl-header__link a:hover,
.pearl-header__link a:focus-visible {
	text-decoration: underline;
}

/* Le sélecteur de langue de Polylang sort en `nav > ul > li` : une liste, ce
   qu'il est. On lui retire les puces et on le pose en ligne, sans rien changer
   à sa structure — c'est elle qui porte `hreflang` et `aria-current`. */
.pearl-header__languages ul,
ul.pearl-header__languages {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pearl-header__languages a {
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--wp--custom--tracking--link);
	text-decoration: none;
}

/* La langue courante reste lisible mais cesse d'inviter au clic : la maquette
   marque « EN • FR » avec une des deux en retrait. */
.pearl-header__languages .current-lang > a {
	opacity: 0.55;
}

.pearl-header__languages a:hover,
.pearl-header__languages a:focus-visible {
	text-decoration: underline;
}

/* Bouton Book now fixé en bas d'écran, caché tant qu'on n'est pas sous 782 px :
   posée avant la media query pour que la bascule mobile (plus bas dans ce
   fichier, même spécificité `body .classe`) l'emporte à cascade égale. */
body .pearl-header__book-fixed {
	display: none;
}

/* Sous 782 px, les trois zones ne tiennent plus : mesuré, la colonne centrale
   tombait à 15 px et le logo disparaissait. Les deux liens directs rejoignent le
   menu — ils y sont déjà — et le sceau sort de l'en-tête : il reste en pied de
   page, avec les autres labels. */
@media (max-width: 781px) {

	.pearl-header__link,
	.pearl-header__label {
		display: none;
	}

	.pearl-header .pearl-brand img {
		inline-size: 100px;
	}

	/* Book now sort de l'en-tête : coincée dans une en-tête déjà à l'étroit en
	   mobile, elle rejoint le menu plein écran plutôt que d'y garder sa place.

	   Spécificité `body .pearl-header__book` et non `.pearl-header__book` seul :
	   les styles de layout du cœur WordPress posent `body .is-layout-flex {
	   display: flex }`, plus spécifique qu'une simple classe. */
	body .pearl-header__book {
		display: none;
	}

	/* Reste caché tant que le menu n'est pas ouvert : `is-menu-open` est la
	   classe que `wp-block-library-view.js` pose sur la modale du menu.
	   Z-index au-dessus des 100000 de la modale (mesuré) pour rester cliquable
	   par-dessus elle plutôt que dessous. */
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .pearl-header__book-fixed {
		background-color: var(--wp--preset--color--base);
		border-block-start: 1px solid var(--wp--preset--color--base-alt);
		color: var(--wp--preset--color--contrast);
		display: flex;
		inset-block-end: 0;
		inset-inline: 0;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) calc(var(--wp--preset--spacing--30) + env(safe-area-inset-bottom));
		position: fixed;
		z-index: 100001;
	}

	.pearl-header__book-fixed .wp-block-button {
		inline-size: 100%;
	}

	.pearl-header__book-fixed .wp-block-button__link {
		justify-content: center;
		width: 100%;
	}
}

/* L'en-tête est posé sur le hero, sans bande, quand la page en ouvre un —
   uniquement l'accueil aujourd'hui. La bascule tient à la présence du hero dans
   la page, pas à un réglage par page : une page qui gagnera un hero prendra le
   comportement toute seule.

   `position: absolute` et non `fixed` : la maquette ne montre pas d'en-tête
   collant, et il disparaît dès qu'on quitte la photo. */
.wp-site-blocks {
	position: relative;
}

.wp-site-blocks:has(.pearl-hero) > header {
	inset-block-start: 0;
	inset-inline: 0;
	position: absolute;
	z-index: 10;
}

.wp-site-blocks:has(.pearl-hero) > header .pearl-header {
	background-color: transparent;
	color: var(--wp--preset--color--base);
}

/* Le logo est noir sur fond clair : sur la photo, il passe en blanc. Le sceau
   garde ses propres couleurs partout, il n'est pas concerné. */
.wp-site-blocks:has(.pearl-hero) > header .pearl-brand img {
	filter: brightness(0) invert(1);
}

/* --- En-tête collant --------------------------------------------------- */

/* Hors page à hero, l'en-tête est `sticky` et non `fixed` : il garde sa place
   dans le flux, donc le contenu ne remonte jamais d'un cran au moment où il se
   colle. Sur une page à hero il est déjà hors flux (règle ci-dessus), et c'est
   `is-stuck` qui le passe en `fixed`. */
.wp-site-blocks > header {
	inset-block-start: 0;
	position: sticky;
	z-index: 10;
}

.pearl-header {
	transition:
		background-color var(--wp--custom--duration--base) var(--wp--custom--ease),
		color var(--wp--custom--duration--base) var(--wp--custom--ease);
}

/* Fond blanc une fois collé, quelle que soit la page : c'est le seul état où
   l'en-tête passe devant du contenu quelconque, et la transparence n'y est plus
   lisible. Le filet est en crème plutôt qu'une ombre : pas d'opacité en dur,
   et la maquette ne montre aucune ombre portée. */
.wp-site-blocks > header.is-stuck .pearl-header {
	background-color: var(--wp--preset--color--base);
	border-block-end: 1px solid var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--contrast);
}

.wp-site-blocks:has(.pearl-hero) > header.is-stuck {
	position: fixed;
}

/* Sur le hero, le logo était inversé en blanc : collé sur fond blanc, il
   reprend son encre d'origine. Le sceau garde ses propres couleurs. */
.wp-site-blocks:has(.pearl-hero) > header.is-stuck .pearl-brand img {
	filter: none;
}

/* L'en-tête entre par le haut plutôt que d'apparaître : à ce moment du
   défilement il vient de quitter l'écran, et une apparition sèche se lit comme
   un défaut d'affichage. */
.wp-site-blocks:has(.pearl-hero) > header.is-stuck {
	animation: pearl-header-drop var(--wp--custom--duration--base) var(--wp--custom--ease);
}

@keyframes pearl-header-drop {

	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.wp-site-blocks:has(.pearl-hero) > header.is-stuck {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * 3-ter. Pied de page
 *
 * Les intitulés de colonne ne réutilisent pas le preset `eyebrow` : celui-ci
 * vaut 1,25 rem, taille du surtitre qui coiffe un titre de section. En pied de
 * page, la maquette montre un intitulé nettement plus petit que le corps.
 * ---------------------------------------------------------------------- */

.pearl-footer__heading {
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	opacity: 0.7;
	text-transform: uppercase;
}

/* La bande « Our group » suit la casse normale de la maquette — pas de
   majuscules, contrairement aux intitulés de colonne (OUR HOTEL, MORE…). */
.pearl-footer__group .pearl-footer__heading {
	text-transform: none;
}

/* Les colonnes de liens sont des listes pour des raisons sémantiques — c'est
   bien une liste de liens — mais rien dans la maquette n'affiche de puce. */
.pearl-footer__links {
	list-style: none;
	padding-inline-start: 0;
}

/* Les liens reprennent la couleur du texte. La couleur de lien du thème est
   pensée pour un fond clair : sur le bordeaux du pied de page, elle tombait à un
   contraste illisible. */
.pearl-footer a {
	color: inherit;
	text-decoration: none;
}

.pearl-footer a:hover,
.pearl-footer a:focus-visible {
	text-decoration: underline;
}

/* Les logos de marque sont livrés en SVG noir, faits pour un fond clair. Plutôt
   qu'une seconde version blanche de chaque fichier — donc un fichier de plus à
   remplacer le jour où un logo change — on les retourne.

   `brightness(0)` d'abord : cela aplatit toute couleur résiduelle en noir avant
   l'inversion, sans quoi un tracé gris ressortirait coloré.

   Rééchantillonné le 14 août 2026 sur `Pages/Homepage.png` : la bande « Our
   group » est aussi sombre (`contrast`, #161111) que le reste du pied de page,
   pas crème comme le laissait croire `Composants/Footer.png` — ses logos sont
   donc retournés eux aussi. */
.pearl-footer .pearl-brand img,
.pearl-footer__group img {
	filter: brightness(0) invert(1);
}

/* Les filets du pied de page : du blanc à 30 %, sur toute la hauteur du pied
   de page — échantillonné `#674C4C` sur la bande d'inscription en maquette,
   soit exactement `base` à 0,3 sur `#270C0D`. La bande « Our group » suit la
   même règle depuis qu'elle est reconnue sombre (`contrast`) et non crème —
   voir le commentaire de `.pearl-footer__group img` ci-dessus.

   La couleur est nommée et non `currentColor` : theme.json pose déjà `rose` sur
   `core/separator`, donc `currentColor` y valait rose partout — mesuré à
   `rgb(78, 50, 51)` sur le bordeaux au lieu du gris rosé attendu. */
.pearl-footer .wp-block-separator {
	border: 0;
	border-block-start: 1px solid var(--wp--preset--color--base);
	margin-block: var(--wp--preset--spacing--30);
	opacity: 0.3;
}

/* Le bouton d'inscription porte une flèche, comme en maquette : elle porte la
   moitié de sa largeur (169 px relevés contre 126 px pour le seul libellé).

   Dessinée et non écrite en caractère : `⟶` n'existe pas dans Krub et serait
   remplacé par une police de repli, à une autre graisse. Deux pseudo-éléments,
   donc — le fût puis la pointe, remise en fin de ligne par `order`. Purement
   décorative : rien n'est ajouté à ce que lit un lecteur d'écran. */
.pearl-button--arrow .wp-block-button__link {
	align-items: center;
	display: inline-flex;
	gap: 0.375rem;
}

.pearl-button--arrow .wp-block-button__link::after {
	background-color: currentColor;
	block-size: 1px;
	content: "";
	inline-size: 1.75rem;
	margin-inline-start: 0.375rem;
}

.pearl-button--arrow .wp-block-button__link::before {
	block-size: 0.4rem;
	border-block-start: 1px solid currentColor;
	border-inline-end: 1px solid currentColor;
	content: "";
	inline-size: 0.4rem;
	margin-inline-start: -0.45rem;
	order: 1;
	transform: rotate(45deg);
}

/* -------------------------------------------------------------------------
 * 3-quater. Hero de la page d'accueil
 *
 * L'invite de défilement est posée sur une photo : sa couleur ne peut pas être
 * celle des liens du thème, pensée pour un fond clair. Elle hérite donc du blanc
 * du bloc de couverture — exactement le même raisonnement qu'en pied de page.
 *
 * Le voile du bloc `core/cover` est réglé à 40 % : assez pour que ce texte tienne
 * le contraste sur n'importe quelle photo, trop peu pour éteindre l'image.
 * ---------------------------------------------------------------------- */

.pearl-hero__cue {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--link);
	text-transform: uppercase;
}

.pearl-hero__cue a {
	color: inherit;
	display: inline-block;
	text-decoration: none;
}

.pearl-hero__cue a::after {
	background-color: currentColor;
	content: "";
	display: block;
	block-size: 2.5rem;
	inline-size: 1px;
	margin-block-start: 0.75rem;
	margin-inline: auto;
}

/* Fond vidéo YouTube du hero : le bloc `pearl/hero-video` (lien modifiable
 * depuis la barre latérale de l'éditeur) rend une iframe, posée en frère du
 * `core/cover` qui porte le voile et le texte — `core/cover` ne sait poser en
 * fond qu'un fichier auto-hébergé, jamais un lien YouTube. `.pearl-hero-wrap`
 * fournit le contexte de positionnement partagé par les deux : la vidéo s'y
 * étale en absolu, la couverture y reste en flux normal et se peint donc
 * par-dessus (voile + texte visibles, vidéo en dessous).
 */
.pearl-hero-wrap {
	position: relative;
}

/* Le bloc vidéo est en position absolue, donc sans hauteur dans le flux —
 * mais il compte tout de même comme premier enfant pour l'espacement entre
 * blocs (`block-gap`), posé sur le second enfant en tant que « frère
 * suivant », qui laissait alors un bandeau blanc au-dessus de la vidéo. */
.pearl-hero-wrap > .pearl-hero {
	margin-block-start: 0;
}

/* `object-fit` n'existe pas pour une iframe, d'où le calcul classique en
 * `vw`/`vh` : l'iframe est dimensionnée à un ratio 16/9 assez grand pour
 * toujours déborder du cadre quel que soit celui de l'écran, puis recentrée
 * par translation — l'équivalent d'un `background-size: cover` pour une
 * vidéo qui ne peut pas être un fond CSS.
 */
.pearl-hero__video-wrap {
	background-color: var(--wp--preset--color--contrast, #000);
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
}

.pearl-hero__video {
	block-size: 56.25vw;
	border: 0;
	inline-size: 177.78vh;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	min-block-size: 100%;
	min-inline-size: 100%;
	position: absolute;
	transform: translate(-50%, -50%);
}

/* Image d'attente (facultative, choisie dans l'inspecteur) : posée par-dessus
 * l'iframe le temps que la vidéo se charge — le chargement du document
 * embarqué (page du lecteur YouTube) laisse sinon voir, un instant, sa
 * propre interface. `view.js` ajoute `.is-loaded` à l'iframe une fois la
 * lecture réellement démarrée (événement `PLAYING`), ce qui déclenche le
 * fondu ci-dessous vers la vidéo. */
.pearl-hero__poster {
	block-size: 100%;
	inline-size: 100%;
	inset: 0;
	object-fit: cover;
	opacity: 1;
	position: absolute;
	transition: opacity var(--wp--custom--duration--slow, 600ms) var(--wp--custom--ease, ease);
}

.pearl-hero__video.is-loaded ~ .pearl-hero__poster {
	opacity: 0;
	pointer-events: none;
}

.pearl-hero .wp-block-cover__background {
	z-index: 1;
}

.pearl-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* -------------------------------------------------------------------------
 * 4. Frise Tapa — bordure décorative répétée
 *
 * Trois SVG livrés par le client dans `assets/images/` (fonds fournis le
 * 14 août 2026, `Patterns/`), tracé unique en `#D4CBC9` — une teinte propre à
 * cette frise, distincte du `rose` de theme.json (#A88C8C), donc non
 * exprimable comme préréglage : la couleur reste dans le SVG, pas en CSS.
 *
 * `.pearl-tapa` (horizontale, 1535×11 natif) marque la bordure entre deux
 * sections empilées — c'est la ligne pointillée ondulée qu'on voit en
 * maquette après le carousel de villas et après la galerie. `repeat-x` à
 * hauteur fixe : la largeur de la frise est variable selon le site, jamais
 * le motif. Insérée par le bloc `pearl/divider-tapa`, qui pose lui-même la
 * classe `alignfull` : c'est la mise en page contrainte du groupe parent qui
 * la lit et sort le motif du conteneur — même mécanisme que la galerie
 * (commentaire `pearl_gallery` dans `page-home.php`) — donc pas de pleine
 * largeur écrite ici, ce serait redondant avec ce que WordPress fait déjà.
 *
 * `.pearl-tapa--vertical` (19×588.5 natif) longe le bord gauche de la section
 * « Five stories, one collection » en maquette. Posée en `::before` sur
 * `.pearl-tapa-accent` plutôt qu'un bloc dans le contenu : c'est un filet
 * décoratif, pas une information — `aria-hidden` par nature en restant hors
 * du DOM de contenu. Verticale, elle suit la hauteur de son conteneur plutôt
 * que la largeur de l'écran : pas de pleine largeur ici.
 * ---------------------------------------------------------------------- */

.pearl-tapa {
	background-image: url(../images/tapa-horizontal.svg);
	background-position: center;
	background-repeat: repeat-x;
	background-size: auto 11px;
	block-size: 11px;
}

.pearl-tapa-accent {
	position: relative;
}

.pearl-tapa-accent::before {
	background-image: url(../images/tapa-vertical.svg);
	background-position: top;
	background-repeat: repeat-y;
	background-size: 19px auto;
	content: "";
	inline-size: 19px;
	inset-block: 0;
	inset-inline-start: 0;
	position: absolute;
}

/* -------------------------------------------------------------------------
 * 5. Apparition au scroll — un seul effet, une seule fois par élément
 * ---------------------------------------------------------------------- */

.pearl-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity var(--wp--custom--duration--slow) var(--wp--custom--ease),
		transform var(--wp--custom--duration--slow) var(--wp--custom--ease);
}

.pearl-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------
 * 6. Mouvement réduit — neutralisation complète
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.pearl-reveal {
		opacity: 1;
		transform: none;
	}
}