/*
 * Cassajou Piscine 1.13 — titres « eau ».
 * Deux traitements des grands titres, au choix dans Réglages Cassajou
 * (classe eau-mixte, eau-ligne ou eau-reflets sur <html>) :
 *
 * - Ligne d'eau : chaque ligne du titre est à moitié immergée. L'encre
 *   au-dessus, le bleu piscine en dessous, une houle lente entre les deux.
 * - Reflets : le titre entier est bleu piscine, traversé par le réseau de
 *   lumière qui danse au fond d'un bassin (caustiques).
 * - Mixte : reflets sur fond clair, ligne d'eau sur les bandeaux sombres.
 *
 * Géométrie (Inter Tight : ascendante .97em, descendante .24em, jambage .22em).
 * Le motif mesure une ligne de haut (1lh) et se répète d'une ligne à l'autre.
 * Il démarre juste sous les jambages (p, g, virgule) de la ligne précédente,
 * d'où le décalage vertical --eau-y = 0.6em - 0.5lh ; la surface passe alors
 * au milieu des minuscules, vers 54 % du motif.
 *
 * Sans background-clip:text ou sans unité lh, les titres restent tels quels.
 */

@supports ((-webkit-background-clip: text) or (background-clip: text)) and (height: 1lh) {
	:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(.home-hero-title, h1.font-display.text-foreground, h2.font-display.text-foreground:is(.text-3xl, .text-4xl), .home-avis-highlight__copy h2, section.bg-primary h2.font-display) {
		--eau-y: calc(0.6em - 0.5lh);
		background-repeat: repeat;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	/* ---- Ligne d'eau ------------------------------------------------- */

	/* Calque du dessus : reflet clair sous la surface (vague courte).
	   Calque du dessous : encre, surface ondulée, bleu de plus en plus profond. */
	.eau-ligne :is(.home-hero-title, h1.font-display.text-foreground, h2.font-display.text-foreground:is(.text-3xl, .text-4xl), .home-avis-highlight__copy h2) {
		background-image:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='r' gradientUnits='userSpaceOnUse' x1='0' y1='48' x2='0' y2='72'%3E%3Cstop offset='0' stop-color='%23c4f1f7' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23c4f1f7' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 55C12.5 49 37.5 49 50 55S87.5 61 100 55V72H0Z' fill='url(%23r)'/%3E%3C/svg%3E"),
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='e' gradientUnits='userSpaceOnUse' x1='0' y1='48' x2='0' y2='100'%3E%3Cstop offset='0' stop-color='%2300a0c6'/%3E%3Cstop offset='.5' stop-color='%23007fb6'/%3E%3Cstop offset='1' stop-color='%23005fa3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='%23051423'/%3E%3Cpath d='M0 54C12.5 46 37.5 46 50 54S87.5 62 100 54V100H0Z' fill='url(%23e)'/%3E%3C/svg%3E");
		background-size: 2.2em 1lh, 3.4em 1lh;
		background-position: 0 var(--eau-y), 0 var(--eau-y);
		animation: eau-houle 21s linear infinite;
	}

	/* Bandeaux sombres : l'encre devient écume, l'eau devient lagon. */
	:is(.eau-mixte, .eau-ligne) section.bg-primary h2.font-display {
		background-image:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='r' gradientUnits='userSpaceOnUse' x1='0' y1='48' x2='0' y2='72'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 55C12.5 49 37.5 49 50 55S87.5 61 100 55V72H0Z' fill='url(%23r)'/%3E%3C/svg%3E"),
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='e' gradientUnits='userSpaceOnUse' x1='0' y1='48' x2='0' y2='100'%3E%3Cstop offset='0' stop-color='%2384e3ef'/%3E%3Cstop offset='1' stop-color='%233db6cf'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100' height='100' fill='%23f8fbfb'/%3E%3Cpath d='M0 54C12.5 46 37.5 46 50 54S87.5 62 100 54V100H0Z' fill='url(%23e)'/%3E%3C/svg%3E");
		background-size: 2.2em 1lh, 3.4em 1lh;
		background-position: 0 var(--eau-y), 0 var(--eau-y);
		animation: eau-houle 21s linear infinite;
	}

	/* ---- Reflets ----------------------------------------------------- */

	/* Deux réseaux de lumière (bruit « turbulence » dont on ne garde que les
	   creux), de tailles et de sens différents, sur un dégradé par ligne.
	   Sur fond clair, les reflets restent bleu clair et discrets : même là où
	   deux reflets se croisent, la lettre garde au moins 2,7:1 de contraste
	   (3,2:1 sur un reflet seul, 5,5:1 hors reflet). */
	:is(.eau-mixte, .eau-reflets) :is(.home-hero-title, h1.font-display.text-foreground, h2.font-display.text-foreground:is(.text-3xl, .text-4xl), .home-avis-highlight__copy h2) {
		background-image:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.016' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .8 0 0 0 0 .92 -22 0 0 0 .45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.022' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .8 0 0 0 0 .92 -26 0 0 0 .25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
			linear-gradient(180deg, #006ca6 15%, #004c8c 85%);
		background-size: 7em 7em, 10em 10em, 100% 1lh;
		background-position: 0 0, 0 0, 0 var(--eau-y);
		animation: eau-caustiques 28s linear infinite;
	}

	/* Bandeaux sombres : lettres presque blanches teintées lagon vers le bas,
	   reflets blancs légers (ils ne font qu'éclaircir, la lecture ne baisse pas). */
	.eau-reflets section.bg-primary h2.font-display {
		background-image:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.016' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -22 0 0 0 .5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.022' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -26 0 0 0 .3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
			linear-gradient(180deg, #e3f6f9 15%, #a3dfe8 85%);
		background-size: 7em 7em, 10em 10em, 100% 1lh;
		background-position: 0 0, 0 0, 0 var(--eau-y);
		animation: eau-caustiques 28s linear infinite;
	}

	/* Texte sélectionné : on rend sa couleur au texte, sinon il disparaît. */
	:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(.home-hero-title, h1.font-display.text-foreground, h2.font-display.text-foreground, .home-avis-highlight__copy h2) ::selection,
	:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(.home-hero-title, h1.font-display.text-foreground, h2.font-display.text-foreground, .home-avis-highlight__copy h2)::selection {
		-webkit-text-fill-color: var(--color-foreground);
	}

	:is(.eau-mixte, .eau-ligne, .eau-reflets) section.bg-primary h2.font-display ::selection,
	:is(.eau-mixte, .eau-ligne, .eau-reflets) section.bg-primary h2.font-display::selection {
		-webkit-text-fill-color: var(--color-primary);
	}
}

/* ---- Logo : une pièce tombe dans l'eau --------------------------------
   theme.js pose .is-plouf sur le logo (première page de la visite, puis
   survol). On ne voit pas la pièce tomber, seulement l'impact : le point
   central jaillit en s'écrasant, les trois cercles renaissent du centre
   l'un après l'autre et deux rides bleu piscine filent au-delà.
   État final = logo au repos. */
.logo-plouf {
	overflow: visible;
}

.logo-ride {
	stroke: #0091c4;
	opacity: 0;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) .logo-plouf.is-plouf :is(.logo-piece, .logo-onde, .logo-ride) {
	transform-box: fill-box;
	transform-origin: center;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) .logo-plouf.is-plouf .logo-piece {
	animation: logo-impact 520ms ease-out both;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) .logo-plouf.is-plouf .logo-onde {
	animation: logo-onde 760ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) .logo-plouf.is-plouf .logo-onde--1 {
	animation-delay: 60ms;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) .logo-plouf.is-plouf .logo-onde--2 {
	animation-delay: 150ms;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) .logo-plouf.is-plouf .logo-onde--3 {
	animation-delay: 240ms;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) .logo-plouf.is-plouf .logo-ride {
	vector-effect: non-scaling-stroke;
	/* forwards et non both : invisible pendant son délai. */
	animation: logo-ride 1100ms 80ms ease-out forwards;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) .logo-plouf.is-plouf .logo-ride--2 {
	--ride-echelle: 3.1;
	--ride-opacite: 0.45;
	animation-delay: 380ms;
}

/* Le point naît de rien, s'écrase à plat comme une goutte qui touche l'eau,
   rebondit un peu puis reprend sa forme. */
@keyframes logo-impact {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	35% {
		transform: scale(1.7, 0.5);
		opacity: 1;
	}
	65% {
		transform: scale(0.85, 1.15);
	}
	100% {
		transform: none;
	}
}

@keyframes logo-onde {
	0% {
		transform: scale(0);
	}
	65% {
		transform: scale(1.08);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes logo-ride {
	0% {
		transform: scale(1);
		opacity: var(--ride-opacite, 0.7);
	}
	100% {
		transform: scale(var(--ride-echelle, 3.7));
		opacity: 0;
	}
}

/* ---- Logo et menu en bleu ------------------------------------------------
   Pictogramme bleu piscine, nom bleu foncé (la ville reste grise), dans
   l'en-tête comme dans le pied de page (avec le pictogramme du téléphone).
   Menu : la rubrique en cours (page, archive, ou fiche rattachée via
   cassajou_menu_rubrique_courante) et le survol passent en bleu piscine. */
:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(.logo-plouf, .logo-pied > svg, .pied-tel > svg) {
	color: #0072ab;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) :is([data-logo-plouf], .logo-pied) .font-display {
	color: #005a96;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(header nav, #menu-mobile) li > a:hover,
:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(header nav, #menu-mobile) li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor) > a {
	color: #0072ab;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(header nav, #menu-mobile) li:is(.current-menu-item, .current-menu-parent, .current-menu-ancestor) > a {
	font-weight: 600;
}

/* ---- Titres secondaires : bleu foncé ------------------------------------
   Titres de cartes (h3), petits h2 et intertitres des textes (6,9:1 sur le
   fond). Le survol des cartes passe au bleu piscine. */
:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(h3.font-display.text-foreground, h2.font-display.text-foreground.text-2xl, .prose-cassajou :is(h2, h3, h4)) {
	color: #005a96;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) .group:hover :is(h3.font-display.text-foreground, h2.font-display.text-foreground.text-2xl) {
	color: #0091c4;
}

/* ---- Boutons : pilules bleu piscine -------------------------------------
   Quatre familles, repérées par leurs classes Tailwind :
   - plein (bg-primary)        : bleu piscine ;
   - clair sur fond sombre     : blanc ;
   - contour sur fond clair    : contour bleu, texte bleu foncé ;
   - contour sur fond sombre   : contour blanc.
   Survol discret : le bouton se soulève d'un pixel, la teinte se creuse un
   peu et, sur les boutons pleins, un reflet de lumière traverse une seule
   fois, comme le soleil sur l'eau. La flèche avance.
   Ces règles ne sont pas dans une couche : elles passent devant les
   utilitaires Tailwind (hover:bg-…) quelle que soit leur spécificité. */
:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(a.bg-primary.text-primary-foreground, button.bg-primary.text-primary-foreground, a.bg-white.text-primary, a.inline-flex.border.border-border, a.inline-flex.border-white\/40, .home-avis-highlight__link) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-radius: 999px;
	font-weight: 600;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(a.bg-primary.text-primary-foreground, button.bg-primary.text-primary-foreground, a.bg-white.text-primary, a.inline-flex.border.border-border, a.inline-flex.border-white\/40, .home-avis-highlight__link):hover {
	transform: translateY(-1px);
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(a.bg-primary.text-primary-foreground, button.bg-primary.text-primary-foreground, a.bg-white.text-primary, a.inline-flex.border.border-border, a.inline-flex.border-white\/40, .home-avis-highlight__link):active {
	transform: translateY(0) scale(0.98);
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(a.bg-primary.text-primary-foreground, button.bg-primary.text-primary-foreground, a.bg-white.text-primary, a.inline-flex.border.border-border, a.inline-flex.border-white\/40, .home-avis-highlight__link):focus-visible {
	outline: 2px solid #0091c4;
	outline-offset: 3px;
}

/* Reflet : une bande de lumière oblique, hors du bouton au repos,
   qui le traverse au survol (pas de retour quand la souris repart). */
:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(a.bg-primary.text-primary-foreground, button.bg-primary.text-primary-foreground, a.bg-white.text-primary)::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	z-index: -1;
	width: 45%;
	background: linear-gradient(100deg, transparent 0%, var(--btn-reflet, rgba(255, 255, 255, 0.22)) 50%, transparent 100%);
	transform: translateX(-120%) skewX(-18deg);
	pointer-events: none;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(a.bg-primary.text-primary-foreground, button.bg-primary.text-primary-foreground, a.bg-white.text-primary):is(:hover, :focus-visible)::before {
	transform: translateX(260%) skewX(-18deg);
	transition: transform 0.7s cubic-bezier(0.3, 0.6, 0.2, 1);
}

/* La flèche avance au survol (icône placée après le libellé). */
:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(a.bg-primary, button.bg-primary, a.bg-white, a.inline-flex.border, .home-avis-highlight__link) svg:last-child:not(:first-child) {
	transition: transform 0.3s ease;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(a.bg-primary, button.bg-primary, a.bg-white, a.inline-flex.border, .home-avis-highlight__link):hover svg:last-child:not(:first-child) {
	transform: translateX(3px);
}

/* Plein : bleu piscine (blanc dessus 5,3:1), un ton plus profond au survol. */
:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(a.bg-primary.text-primary-foreground, button.bg-primary.text-primary-foreground) {
	background-color: #0072ab;
	color: #fff;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(a.bg-primary.text-primary-foreground, button.bg-primary.text-primary-foreground):hover {
	background-color: #00659a;
	color: #fff;
	box-shadow: 0 0.6rem 1.2rem -0.7rem rgba(0, 101, 154, 0.6);
}

/* Clair sur fond sombre : reflet lagon. */
:is(.eau-mixte, .eau-ligne, .eau-reflets) a.bg-white.text-primary {
	--btn-reflet: rgba(132, 227, 239, 0.45);
	background-color: #fff;
	color: var(--color-primary);
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) a.bg-white.text-primary:hover {
	background-color: #f1fafc;
	color: var(--color-primary);
}

/* Contour sur fond clair : texte bleu foncé ; au survol, contour plein et voile bleu léger. */
:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(a.inline-flex.border.border-border, .home-avis-highlight__link) {
	border: 1.5px solid color-mix(in srgb, #0072ab 45%, transparent);
	color: #005a96;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(a.inline-flex.border.border-border, .home-avis-highlight__link):is(:hover, :focus-visible) {
	border-color: #0072ab;
	background-color: rgba(0, 114, 171, 0.07);
	color: #005a96;
}

/* Contour sur fond sombre : au survol, contour blanc plein et voile clair. */
:is(.eau-mixte, .eau-ligne, .eau-reflets) a.inline-flex.border-white\/40:is(:hover, :focus-visible) {
	border-color: #fff;
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--color-primary-foreground);
}

/* Libellés en capitales serrées (accueil, en-tête) : casse normale, plus lisible. */
:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(a.bg-primary, a.inline-flex.border).uppercase {
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 0.9375rem;
}

:is(.eau-mixte, .eau-ligne, .eau-reflets) #site-header a.bg-primary.uppercase {
	font-size: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
	:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(a.bg-primary, button.bg-primary, a.bg-white)::before {
		display: none;
	}

	:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(a.bg-primary, button.bg-primary, a.bg-white, a.inline-flex.border, .home-avis-highlight__link):hover {
		transform: none;
	}
}

/* Les trajets valent un nombre entier de motifs : la boucle ne saute pas.
   Reflet (2,2em) et houle (3,4em) vont en sens contraires. */
@keyframes eau-houle {
	to {
		background-position: 13.2em var(--eau-y), -6.8em var(--eau-y);
	}
}

@keyframes eau-caustiques {
	to {
		background-position: 7em 7em, -10em 10em, 0 var(--eau-y);
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(.home-hero-title, h1.font-display, h2.font-display, .home-avis-highlight__copy h2) {
		animation: none !important;
	}
}

@media (forced-colors: active), print {
	:is(.eau-mixte, .eau-ligne, .eau-reflets) :is(.home-hero-title, h1.font-display, h2.font-display, .home-avis-highlight__copy h2) {
		background: none !important;
		-webkit-text-fill-color: currentColor !important;
		animation: none !important;
	}
}