/*
Theme Name: Isle de coeur
Theme URI: https://www.isledecoeur.fr/
Author: Nils Aellen
Description: Thème bloc pour la maison de vacances L'Isle de coeur, sans Elementor. Couleurs de Provence, police Fraunces embarquée, carrousel et animations d'apparition maison, aucune dépendance externe hors balise Google (production).
Version: 1.1.17
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: MIT
Text Domain: isledecoeur
*/

/* Ce que theme.json ne sait pas exprimer. Les couleurs passent toujours par
   les variables du preset : la palette de l'éditeur de site reste la source. */

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--isledecoeur-header-h); /* ancres sous l'en-tête collant */
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

:where(a, button, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 3px;
}

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

/* Collant sur l'enveloppe que WordPress met autour de la partie « En-tête »
   (<header class="wp-block-template-part">) : elle a la hauteur de l'en-tête, et un
   élément sticky ne colle qu'à l'intérieur de son parent. Sur .site-header, il ne
   collait donc jamais. */
.wp-site-blocks > .wp-block-template-part:has(> .site-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}
body.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .site-header) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Les blocs en attente d'animation « glisse depuis la gauche/droite » dépassent de
   3rem sur les côtés : sans ça, défilement horizontal sur mobile. clip (et non
   hidden) ne crée pas de zone de défilement, l'en-tête reste collant. */
.wp-site-blocks { overflow-x: clip; }

.site-header {
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}

/* Recette (body.is-staging, voir functions.php) : bande hachurée « chantier » en haut de
   l'en-tête. En position absolue : la ligne logo-menu, que navigation.js mesure pour
   replier le menu, ne change pas. */
.is-staging .site-header { position: relative; }
.is-staging .site-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 6px;
	background: repeating-linear-gradient(-45deg,
		var(--wp--preset--color--accent) 0 8px,
		var(--wp--preset--color--base) 8px 16px);
	pointer-events: none;
}

/* « Réserver » ne se coupe jamais : sur une ligne, et c'est le menu qui cède la
   place, pas lui (il passait sur deux ou trois lignes, rogné, entre 600 et 1000 px). */
.site-header .wp-block-buttons { flex-shrink: 0; }
.site-header .wp-block-button__link { white-space: nowrap; }

@media (max-width: 600px) {
	/* La barre d'admin n'est pas fixe sur mobile : l'en-tête colle tout en haut */
	body.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .site-header) { top: 0; }
	.site-header .wp-block-button__link {
		padding: 0.5em 0.95em !important;
		font-size: 0.8125rem !important;
	}
	/* « Réserver » et le bouton menu plus serrés : tout tient dès 320 px */
	.site-header .wp-block-group:has(> .wp-block-buttons) { gap: 1rem; }
}

/* ---------- Sélecteur de langue (bloc Polylang, rendu dans functions.php) ---------- */

/* Replié : le drapeau de la langue courante et un chevron, la place d'une icône.
   Déplié : la liste des langues sous le drapeau, alignée à droite. */
.site-header .lang-switcher {
	position: relative;
	flex-shrink: 0;
	font-size: var(--wp--preset--font-size--small);
}
.site-header .lang-switcher summary {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.45rem;
	border-radius: 6px;
	cursor: pointer;
	list-style: none;
}
.site-header .lang-switcher summary::-webkit-details-marker { display: none; }
.site-header .lang-switcher summary:hover,
.site-header .lang-switcher[open] summary {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
}
/* Chevron */
.site-header .lang-switcher summary::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	margin-top: -0.2em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s;
	opacity: 0.6;
}
.site-header .lang-switcher[open] summary::after { transform: rotate(225deg); margin-top: 0.2em; }
.site-header .lang-switcher__flag {
	display: block;
	width: 20px;
	height: 14px;
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
}
.site-header .lang-switcher ul {
	position: absolute;
	top: calc(100% + 0.35rem);
	right: 0;
	z-index: 60;
	min-width: 9.5rem;
	margin: 0;
	padding: 0.3rem;
	list-style: none;
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	border-radius: 8px;
	box-shadow: var(--wp--preset--shadow--soft);
}
.site-header .lang-switcher a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.6rem;
	border-radius: 6px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.site-header .lang-switcher a:hover,
.site-header .lang-switcher a:focus-visible {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
}
.site-header .lang-switcher a[aria-current] { font-weight: 600; }
.site-header .lang-switcher a[aria-current]::after {
	content: "✓";
	margin-left: auto;
	color: var(--wp--preset--color--accent);
}
.site-header .lang-switcher .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Menu mobile (plein écran) ---------- */

/* Menu plein écran dès que le menu ne tient plus sur une ligne. WordPress ne le propose
   que sous 600 px ; au-dessus, les entrées passaient sur deux lignes, puis « Réserver »
   était écrasé. La largeur du menu dépend de la langue (/fr/, /en/, /de/) et de la
   police : navigation.js la mesure et pose .is-nav-collapsed sur l'en-tête (et
   .nav-js sur <html>) ; le mode mobile du bloc Navigation est alors prolongé en
   annulant ses deux règles « min-width: 600px ». Avant le script (ou sans JS), seuil
   fixe de 1024 px. */
.site-header.is-nav-collapsed .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
.site-header.is-nav-collapsed .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
/* Pas de flou avec le menu plein écran : backdrop-filter fait de l'en-tête le repère
   des éléments position: fixed qu'il contient, et le menu s'ouvrait alors coincé dans
   les 80 px de l'en-tête. Fond opaque à la place. */
.site-header.is-nav-collapsed {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: var(--wp--preset--color--base);
}
/* Bouton menu tout à droite, après « Réserver » et les langues */
.site-header.is-nav-collapsed .wp-block-navigation { order: 2; }

@media (min-width: 600px) and (max-width: 1023px) {
	html:not(.nav-js) .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	html:not(.nav-js) .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 1023px) {
	html:not(.nav-js) .site-header {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: var(--wp--preset--color--base);
	}
	html:not(.nav-js) .site-header .wp-block-navigation { order: 2; }
}

/* Mesure (navigation.js) : tout sur une ligne, rien ne rétrécit ; l'en-tête déborde
   alors si le menu ne tient pas. Posé et retiré dans la même tâche, jamais affiché. */
.site-header.is-nav-measuring .wp-block-group,
.site-header.is-nav-measuring .wp-block-navigation,
.site-header.is-nav-measuring .wp-block-navigation__container { flex-wrap: nowrap !important; }
.site-header.is-nav-measuring .wp-block-group > *,
.site-header.is-nav-measuring .wp-block-navigation__container > * { flex-shrink: 0 !important; }
.site-header.is-nav-measuring .wp-block-navigation-item__content { white-space: nowrap; }

/* !important : WordPress impose un fond blanc au panneau ouvert, avec sa feuille
   chargée après celle du thème */
.site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	padding: 0.5rem var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
/* Le logo en haut du panneau, à la même place que dans l'en-tête */
.site-header .is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: "";
	display: block;
	height: var(--isledecoeur-logo-h);
	aspect-ratio: 1826 / 977;
	margin-bottom: var(--wp--preset--spacing--30);
	background: url(assets/logo.svg) left center / contain no-repeat;
}
/* La croix, alignée sur le milieu du logo */
.site-header .is-menu-open .wp-block-navigation__responsive-container-close {
	top: calc(var(--isledecoeur-logo-h) / 2 - 12px);
	right: 0;
}
.site-header .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	padding-top: 0 !important;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}
.site-header .is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
	align-items: stretch !important;
}
.site-header .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}
.site-header .is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.85rem 0 !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
}
.site-header .is-menu-open .wp-block-navigation-item__content::after { content: none; }
.site-header .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}
/* Sous-menus éventuels : dépliés, en retrait, plus petits */
.site-header .is-menu-open .wp-block-navigation__submenu-container {
	padding: 0 0 0.5rem 1rem !important;
	border: 0 !important;
}
.site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}
.site-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: inherit;
	font-size: 1.05rem;
	padding: 0.45rem 0 !important;
}

.site-header .wp-block-navigation-item__content { padding-block: 0.35em; position: relative; }
.site-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 200ms ease;
}
.site-header .wp-block-navigation-item__content:hover::after,
.site-header .current-menu-item > .wp-block-navigation-item__content::after,
.site-header .current-menu-ancestor > .wp-block-navigation-item__content::after { transform: scaleX(1); }

/* Sous-menus (liens vers d'autres pages groupés sous une entrée) : une carte comme
   le reste du site, dans le menu en ligne ; le menu plein écran les affiche dépliés,
   sans carte. */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	min-width: 14rem !important;
	padding: 0.4rem !important;
	border: 0 !important;
	border-radius: 12px;
	background: var(--wp--preset--color--white) !important;
	box-shadow: var(--wp--preset--shadow--soft);
}
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55em 0.8em !important;
	border-radius: 8px;
}
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface);
}
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { content: none; }
.site-header .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* Logo (assets/logo.svg, vectorisé depuis brand/logo-isle-de-coeur-nb.jpg) à la place
   du nom du site. Le texte du bloc Titre du site reste dans la page, masqué, pour les
   lecteurs d'écran et les moteurs de recherche ; le changer dans WordPress ne change
   donc pas l'image. */
.site-header .wp-block-site-title a {
	display: block;
	height: var(--isledecoeur-logo-h);
	aspect-ratio: 1826 / 977;
	background: url(assets/logo.svg) left center / contain no-repeat;
	color: transparent;
	white-space: nowrap;
	overflow: hidden;
	text-indent: 110%;
}

/* Hauteur du logo (≈ 94 px : texte du logo à la même taille qu'avant les vagues) et
   de l'en-tête qui en découle : logo + marges de parts/header.html (0,5rem × 2) +
   bordure. La bannière de une s'en sert pour tenir pile dans l'écran. */
:root {
	--isledecoeur-logo-h: 5.9rem;
	--isledecoeur-header-h: calc(var(--isledecoeur-logo-h) + 1rem + 1px);
}
@media (max-width: 600px) {
	:root { --isledecoeur-logo-h: 4.3rem; }
}
@media (max-width: 359px) {
	:root { --isledecoeur-logo-h: 3.8rem; } /* 320 px : logo, « Réserver » et menu sur une ligne */
}

/* Sections pleine largeur empilées : pas de liseré de fond entre elles */
.wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }

/* ---------- Bannière de une (Cover) ---------- */

.hero-kicker {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Bannière avec flèche : exactement la hauteur d'écran restante sous l'en-tête collant
   (et sous la barre d'admin quand on est connecté), pour que la flèche reste visible
   en bas de l'écran quelle que soit la taille du logo. Prime sur la hauteur minimale
   réglée dans le bloc (88vh). */
.wp-block-cover:has(.hero-scroll) {
	min-height: calc(100vh - var(--isledecoeur-header-h) - var(--wp-admin--admin-bar--height, 0px)) !important;
	min-height: calc(100svh - var(--isledecoeur-header-h) - var(--wp-admin--admin-bar--height, 0px)) !important;
}

/* « Arrière-plan fixe » (parallaxe) : pas sur les écrans tactiles. En fixed, l'image
   est dimensionnée sur l'écran, pas sur le bloc ; sur mobile, la barre d'adresse se
   replie au premier défilement, la hauteur d'écran change et l'image se recadrait d'un
   coup (zoom soudain). WordPress ne le retire que sur iOS (-webkit-touch-callout). */
@media (hover: none) and (pointer: coarse) {
	.wp-block-cover.has-parallax .wp-block-cover__image-background,
	.wp-block-cover-image.has-parallax .wp-block-cover__image-background {
		background-attachment: scroll;
	}
}

/* La flèche se cale en bas de la couverture, pas du bloc de texte : le conteneur
   intérieur (position: relative dans le cœur) cesse d'être son repère, et ses autres
   enfants passent eux-mêmes au-dessus du voile sombre. */
.wp-block-cover:has(.hero-scroll) > .wp-block-cover__inner-container { position: static; }
.wp-block-cover:has(.hero-scroll) > .wp-block-cover__inner-container > * { position: relative; z-index: 1; }

.wp-block-cover .wp-block-cover__inner-container > .hero-scroll {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: 1.5rem;
	translate: -50% 0;
	margin: 0;
	opacity: 0.85;
	animation: hero-bob 2.4s ease-in-out infinite;
}
.wp-block-cover .hero-scroll a { color: inherit; text-decoration: none; font-size: 1.6rem; }

@keyframes hero-bob {
	50% { translate: -50% 6px; }
}

/* ---------- Styles de bloc maison ---------- */

/* Liste « Coches » */
ul.is-style-checklist { list-style: none; padding-left: 0; }
ul.is-style-checklist li {
	position: relative;
	padding-left: 1.9em;
	margin-block: 0.45em;
}
ul.is-style-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.25em;
	height: 1.25em;
	border-radius: 50%;
	background: var(--wp--preset--color--olive)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3.2 3L15 7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
		center / 80% no-repeat;
}

/* Séparateur « Court » : un trait terre cuite centré */
/* Aligné à gauche dans un flux normal (colonne, groupe) ; « aligncenter » pour le centrer. */
.wp-block-separator.is-style-short {
	width: 4rem;
	border: 0;
	border-top: 3px solid var(--wp--preset--color--accent) !important;
	opacity: 1;
	margin-left: 0;
}
.wp-block-separator.is-style-short.aligncenter { margin-inline: auto; }

/* Média et texte : photos au même format quelle que soit leur orientation (sauf si
   l'option « Remplir » du bloc est cochée), arrondies comme les blocs Image. */
.wp-block-media-text:not(.is-image-fill-element) > .wp-block-media-text__media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
}

/* Groupe « Carte » */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--white);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--soft);
	height: 100%;
}

/* Image « Arche » : haut arrondi comme une fenêtre provençale */
.wp-block-image.is-style-arch img {
	border-radius: 999px 999px 12px 12px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Icône ronde au-dessus des cartes d'atouts */
.feature-icon {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	font-size: 1.5rem;
	line-height: 1;
	margin: 0;
}

/* ---------- Carrousel (Galerie ou Groupe, style « Carrousel ») ---------- */

.carousel { position: relative; }

.wp-block-gallery.is-style-carousel,
.wp-block-group.is-style-carousel {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 0.75rem;
	/* overflow-y explicite : sinon il vaut auto et le carrousel capte la molette verticale */
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* de la place pour l'ombre des cartes, que overflow rognerait */
	padding-block: 0.5rem 2rem;
	margin-block-end: -1.5rem;
}
.is-style-carousel::-webkit-scrollbar { display: none; }

.is-style-carousel > * {
	flex: 0 0 calc((100% - 2 * 0.75rem) / 3) !important;
	width: auto !important;
	margin: 0 !important;
	scroll-snap-align: start;
}
@media (max-width: 900px) {
	.is-style-carousel > * { flex-basis: calc((100% - 0.75rem) / 2) !important; }
}
@media (max-width: 600px) {
	.is-style-carousel > * { flex-basis: 85% !important; }
}

.wp-block-gallery.is-style-carousel .wp-block-image img {
	width: 100%;
	height: 100% !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.carousel-nav {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--white) 92%, transparent);
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--soft);
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}
.carousel-nav:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--white); }
.carousel-nav svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.carousel-nav--prev { left: 0.75rem; }
.carousel-nav--next { right: 0.75rem; }

/* Cartes (avis) : flèches hors du contenu quand la place le permet */
@media (min-width: 1320px) {
	.carousel:has(> .wp-block-group.is-style-carousel) .carousel-nav--prev { left: -3.75rem; }
	.carousel:has(> .wp-block-group.is-style-carousel) .carousel-nav--next { right: -3.75rem; }
}

/* ---------- Avis ---------- */

.review-card { display: flex; flex-direction: column; }
.review-card .review-stars { color: #c98a1b; letter-spacing: 0.12em; margin: 0; }
.review-card blockquote { margin: 0; flex: 1; display: flex; flex-direction: column; }
.review-card blockquote cite { margin-top: auto; padding-top: 0.75rem; } /* signatures alignées en bas des cartes */

/* Dans un carrousel, les cartes prennent la hauteur de la plus haute : le height: 100%
   du style « Carte » (utile en grille) empêcherait cet étirement. */
.is-style-carousel > .is-style-card { height: auto; }

/* Avis longs coupés à 7 lignes ; carousel.js ajoute « Lire la suite » s'il y a
   débordement. Le texte complet reste dans la page (lecteurs d'écran, moteurs). */
.review-card .review-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	line-clamp: 7;
	overflow: hidden;
}
.review-card.is-expanded .review-text {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: none;
}
.review-more {
	align-self: flex-start;
	margin-top: 0.25rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--blue);
	text-decoration: underline;
	cursor: pointer;
}
.review-more:hover { color: var(--wp--preset--color--accent); }

/* ---------- Apparition au défilement ---------- */

.has-reveal :is(.reveal-up, .reveal-left, .reveal-right, .reveal-zoom) {
	opacity: 0;
	transition: opacity 700ms ease, translate 700ms cubic-bezier(.2,.7,.2,1), scale 700ms cubic-bezier(.2,.7,.2,1);
}
.has-reveal .reveal-up { translate: 0 2.5rem; }
.has-reveal .reveal-left { translate: -3rem 0; }
.has-reveal .reveal-right { translate: 3rem 0; }
.has-reveal .reveal-zoom { scale: 0.94; }
.has-reveal :is(.reveal-up, .reveal-left, .reveal-right, .reveal-zoom).is-revealed {
	opacity: 1;
	translate: 0 0;
	scale: 1;
}

/* Colonnes animées : chaque colonne arrive un peu après la précédente */
.has-reveal .wp-block-column:nth-child(2):is(.reveal-up, .reveal-left, .reveal-right, .reveal-zoom) { transition-delay: 120ms; }
.has-reveal .wp-block-column:nth-child(3):is(.reveal-up, .reveal-left, .reveal-right, .reveal-zoom) { transition-delay: 240ms; }
.has-reveal .wp-block-column:nth-child(4):is(.reveal-up, .reveal-left, .reveal-right, .reveal-zoom) { transition-delay: 360ms; }

/* ---------- Calendrier (plugin maison wp-calendar) : aux couleurs du thème ---------- */

.wp-calendar-wrap {
	--wpc-bg: var(--wp--preset--color--white);
	--wpc-fg: var(--wp--preset--color--contrast);
	--wpc-muted: var(--wp--preset--color--muted);
	--wpc-border: var(--wp--preset--color--surface);
	--wpc-available-bg: var(--wp--preset--color--olive);
	--wpc-available-fg: var(--wp--preset--color--white);
	--wpc-booked-bg: #d9cfc1;
	--wpc-booked-fg: #8a7f73;
	--wpc-past-bg: var(--wp--preset--color--base);
	--wpc-past-fg: #c4bab0;
	--wpc-today-outline: var(--wp--preset--color--accent);
	--wpc-radius: 10px;
	font-family: inherit;
}
.wp-calendar-month-title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; }

/* ---------- Formulaires (Contact Form 7…) ---------- */

:where(.wp-site-blocks) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], textarea, select) {
	width: 100%;
	padding: 0.7em 0.9em;
	font: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--white);
	border: 1px solid #d9cfc1;
	border-radius: 8px;
}
:where(.wp-site-blocks) :is(input, textarea, select):focus {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 1px;
	border-color: transparent;
}
:where(.wp-site-blocks) input[type="submit"] {
	padding: 0.8em 1.6em;
	font: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

/* ---------- Pied de page et section sombre ---------- */

.footer-brand {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}
.footer-brand::before {
	content: "";
	flex: none;
	height: 4.8rem;
	aspect-ratio: 1826 / 977;
	background: url(assets/logo-light.svg) left center / contain no-repeat;
}

.has-night-background-color a:where(:not(.wp-element-button)) { color: inherit; }
.has-night-background-color a:where(:not(.wp-element-button)):hover { color: #f0b89c; }

.platform-logos img { max-height: 2.5rem; width: auto; }

.map-embed iframe {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 0;
	border-radius: 14px;
}