/*
 * Habillage des pages générées par IRCF IA (Cible\Gutenberg\Rendu).
 * Chargé sur le site et dans l'éditeur. Les réglages posés sur un bloc
 * (arrondi, ombre, marges) l'emportent : ils sont écrits en ligne.
 */

:root {
	--ircf-ai-ombre-douce: 0 1px 2px color-mix(in srgb, var(--wp--preset--color--contrast, #111) 6%, transparent), 0 8px 24px -8px color-mix(in srgb, var(--wp--preset--color--contrast, #111) 18%, transparent);
	--ircf-ai-ombre-flottante: 0 2px 4px color-mix(in srgb, var(--wp--preset--color--contrast, #111) 6%, transparent), 0 24px 48px -16px color-mix(in srgb, var(--wp--preset--color--contrast, #111) 28%, transparent);
	--ircf-ai-arrondi: 1rem;
}

/* Carte : fond, arrondi, ombre douce ; se soulève au survol. */
.wp-block-group.is-style-ircf-carte {
	background-color: var(--wp--preset--color--base, #fff);
	border-radius: var(--ircf-ai-arrondi);
	box-shadow: var(--ircf-ai-ombre-douce);
	padding: var(--wp--preset--spacing--50, 1.5rem);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-group.is-style-ircf-carte:hover {
	box-shadow: var(--ircf-ai-ombre-flottante);
	transform: translateY(-4px);
}

/* Verre dépoli : pour un groupe posé sur une image ou un fond coloré. */
.wp-block-group.is-style-ircf-verre {
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	background-color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 72%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base, #fff) 45%, transparent);
	border-radius: var(--ircf-ai-arrondi);
	box-shadow: var(--ircf-ai-ombre-douce);
	padding: var(--wp--preset--spacing--50, 1.5rem);
}

/* Image arrondie, ombre douce. */
.wp-block-image.is-style-ircf-douce img {
	border-radius: var(--ircf-ai-arrondi);
	box-shadow: var(--ircf-ai-ombre-flottante);
}

.wp-block-image.is-style-ircf-douce .wp-element-caption {
	opacity: 0.7;
}

/* Boutons des sections générées : un léger relief au survol. */
.ircf-ai-section .wp-block-button__link {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ircf-ai-section .wp-block-button__link:hover {
	box-shadow: var(--ircf-ai-ombre-douce);
	transform: translateY(-2px);
}

/* Apparition au défilement, sans script ; jamais dans l'éditeur, ni pour qui demande moins d'animations. */
@keyframes ircf-ai-apparition {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		:where(body:not(.editor-styles-wrapper)) .ircf-ai-section > * {
			animation: ircf-ai-apparition linear both;
			animation-range: entry 0% entry 40%;
			animation-timeline: view();
		}
	}
}