/* =====================================================================
   AYN Animated Cards — v1.0.0
   9 animations GPU (transform / opacity / clip-path uniquement).
   Aucune dépendance. Pas de jQuery.
   ===================================================================== */

.ayn-card {
	/* Design tokens — surchargés par les contrôles Elementor et les presets */
	--ayn-radius: 20px;
	--ayn-duration: 0.55s;
	--ayn-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ayn-ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
	--ayn-hover-scale: 1;

	position: relative;
	display: block;
	width: 100%;
	min-height: 420px;
	border-radius: var(--ayn-radius);
	border: var(--ayn-card-border, none);
	background: var(--ayn-card-bg, #0f172a);
	isolation: isolate;
	overflow: hidden;
	outline: none;
	cursor: default;
	transition:
		transform var(--ayn-duration) var(--ayn-ease),
		box-shadow var(--ayn-duration) var(--ayn-ease);
	-webkit-tap-highlight-color: transparent;
}

/* Ombres par défaut en :where() — spécificité 0, le contrôle Elementor
   « Box Shadow / Hover Shadow » et les presets gardent la priorité. */
:where(.ayn-card) {
	box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.35);
}

.ayn-card:is(:hover, .ayn-card--active, :focus-within) {
	transform: scale(var(--ayn-hover-scale));
}

:where(.ayn-card:is(:hover, .ayn-card--active, :focus-within)) {
	box-shadow: 0 24px 48px -20px rgba(15, 23, 42, 0.45);
}

.ayn-card:focus-visible {
	outline: 3px solid var(--ayn-ring, #1e3a8a);
	outline-offset: 3px;
}

.ayn-card__inner {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: inherit;
	border-radius: inherit;
}

.ayn-card__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	border-radius: inherit;
	overflow: hidden;
}

/* ------------------------- RATIO D'IMAGE ---------------------------
   --ayn-media-ratio est défini par le contrôle Elementor « Image Ratio ».
   Layout cover : le ratio pilote la carte entière.
   Layout top   : le ratio pilote uniquement le bloc image.
   ------------------------------------------------------------------- */

.ayn-layout--cover .ayn-card,
.ayn-card.ayn-layout--cover {
	aspect-ratio: var(--ayn-media-ratio, auto);
}

/* Quand un ratio est défini en inline (var posée sur l'élément),
   il prime sur Min Height : la carte adopte exactement ce ratio. */
.ayn-card.ayn-layout--cover[style*="--ayn-media-ratio"],
[style*="--ayn-media-ratio"].ayn-layout--cover .ayn-card {
	min-height: 0;
}

/* ------------------------------ FRONT ------------------------------ */

.ayn-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	overflow: hidden;
}

.ayn-card__img {
	/* Position absolue + !important : indispensable pour remplir la carte
	   même quand le thème WordPress impose `img { height: auto !important }`
	   (règle responsive très répandue qui, sinon, laisse un bandeau en bas). */
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	transition:
		transform var(--ayn-duration) var(--ayn-ease),
		filter 0.5s var(--ayn-ease);
	will-change: transform;
}

.ayn-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(2, 6, 23, 0) 32%, rgba(2, 6, 23, 0.55) 64%, rgba(2, 6, 23, 0.88) 100%);
	pointer-events: none;
}

/* Layout « Image en haut » : l'image devient un bloc ratio, le contenu passe dessous */

.ayn-layout--top .ayn-card__front,
.ayn-card.ayn-layout--top .ayn-card__front {
	position: relative;
	inset: auto;
	min-height: inherit;
}

.ayn-layout--top .ayn-card__media,
.ayn-card.ayn-layout--top .ayn-card__media {
	position: relative;
	inset: auto;
	flex: none;
	width: 100%;
	aspect-ratio: var(--ayn-media-ratio, 16 / 9);
	border-radius: 0;
}

.ayn-layout--top .ayn-card__front-content,
.ayn-card.ayn-layout--top .ayn-card__front-content {
	margin-top: 0;
	flex: 1;
}

/* Titre en overlay sur l'image (layout top) */

.ayn-card__media-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 20px 24px;
	/* La légende est toujours posée sur la photo : texte clair quel que soit le preset */
	--ayn-front-fg: #fff;
	--ayn-front-fg-muted: rgba(255, 255, 255, 0.85);
	color: var(--ayn-front-fg);
}

.ayn-card__front-content {
	position: relative;
	z-index: 1;
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 28px;
	color: var(--ayn-front-fg, #fff);
	transition:
		opacity 0.35s var(--ayn-ease),
		transform 0.35s var(--ayn-ease);
}

/* En layout cover, le texte est toujours posé sur la photo : il reste clair
   quel que soit le preset (l'overlay garantit le contraste). */
.ayn-layout--cover .ayn-card__front-content,
.ayn-card.ayn-layout--cover .ayn-card__front-content {
	--ayn-front-fg: #fff;
	--ayn-front-fg-muted: rgba(255, 255, 255, 0.82);
}

.ayn-card__title { margin: 0; }
:where(.ayn-card__title) {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ayn-front-fg, #fff);
}

.ayn-card__subtitle { margin: 0; }
:where(.ayn-card__subtitle) {
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--ayn-front-fg-muted, rgba(255, 255, 255, 0.82));
}

.ayn-card__desc { margin: 0; }
:where(.ayn-card__desc) {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--ayn-front-fg-muted, rgba(255, 255, 255, 0.78));
}

/* ------------------------------ BADGE ------------------------------ */

.ayn-card__badge {
	position: absolute;
	z-index: 4;
	top: var(--ayn-badge-y, 16px);
	right: var(--ayn-badge-x, 16px);
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--ayn-accent, #b45309);
	color: var(--ayn-badge-fg, #fff);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

.ayn-badge-pos--top-left .ayn-card__badge { right: auto; left: var(--ayn-badge-x, 16px); }
.ayn-badge-pos--bottom-right .ayn-card__badge { top: auto; bottom: var(--ayn-badge-y, 16px); }
.ayn-badge-pos--bottom-left .ayn-card__badge { top: auto; right: auto; bottom: var(--ayn-badge-y, 16px); left: var(--ayn-badge-x, 16px); }

/* ------------------------------ ICON ------------------------------- */

.ayn-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	line-height: 1;
	color: var(--ayn-icon-fg, #fff);
	background: var(--ayn-icon-bg, rgba(255, 255, 255, 0.14));
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-radius: 14px;
	padding: 12px;
}

.ayn-card__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ------------------------------- BACK ------------------------------ */

.ayn-card__back {
	z-index: 2;
	justify-content: center;
	align-items: flex-start;
	gap: 14px;
	padding: 32px;
	background: var(--ayn-back-bg, linear-gradient(160deg, #1e3a8a 0%, #172554 55%, #0f172a 100%));
	color: var(--ayn-back-fg, #fff);
	pointer-events: none;
}

.ayn-card:is(:hover, .ayn-card--active, :focus-within) .ayn-card__back {
	pointer-events: auto;
}

.ayn-card__back-title { margin: 0; }
:where(.ayn-card__back-title) {
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.ayn-card__back-subtitle { margin: 0; }
:where(.ayn-card__back-subtitle) {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--ayn-back-fg-muted, rgba(255, 255, 255, 0.8));
}

.ayn-card__back-desc { margin: 0; }
:where(.ayn-card__back-desc) {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--ayn-back-fg-muted, rgba(255, 255, 255, 0.78));
}

.ayn-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 0.92rem;
}

.ayn-card__list li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ayn-card__list-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ayn-list-chip-bg, rgba(255, 255, 255, 0.12));
	color: var(--ayn-list-icon, #fbbf24);
	font-size: 11px;
}

.ayn-card__list-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ------------------------------- CTA ------------------------------- */

.ayn-card__btn {
	position: relative;
	z-index: 4; /* au-dessus du lien global de la carte */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	min-height: 44px;
	padding: 11px 24px;
	border-radius: 999px;
	background: var(--ayn-accent, #b45309);
	color: var(--ayn-btn-fg, #fff);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform 0.2s var(--ayn-ease),
		background 0.2s ease,
		box-shadow 0.2s ease;
}

.ayn-card__btn:hover,
.ayn-card__btn:focus-visible {
	background: var(--ayn-accent-hover, #92400e);
	box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.35);
	color: var(--ayn-btn-fg, #fff);
}

.ayn-card__btn:active {
	transform: scale(0.97);
}

.ayn-card__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ayn-card__btn-arrow {
	transition: transform 0.2s var(--ayn-ease);
}

.ayn-card__btn:hover .ayn-card__btn-arrow {
	transform: translateX(3px);
}

/* Lien global (Clickable Card) */
.ayn-card__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
}

.ayn-card:has(.ayn-card__link) {
	cursor: pointer;
}

/* =====================================================================
   STAGGER — le contenu de la face arrière entre en cascade
   ===================================================================== */

.ayn-card__back > * {
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 0.4s var(--ayn-ease),
		transform 0.4s var(--ayn-ease);
}

.ayn-card:is(:hover, .ayn-card--active, :focus-within) .ayn-card__back > * {
	opacity: 1;
	transform: translateY(0);
}

.ayn-card:is(:hover, .ayn-card--active, :focus-within) .ayn-card__back > *:nth-child(1) { transition-delay: 0.1s; }
.ayn-card:is(:hover, .ayn-card--active, :focus-within) .ayn-card__back > *:nth-child(2) { transition-delay: 0.16s; }
.ayn-card:is(:hover, .ayn-card--active, :focus-within) .ayn-card__back > *:nth-child(3) { transition-delay: 0.22s; }
.ayn-card:is(:hover, .ayn-card--active, :focus-within) .ayn-card__back > *:nth-child(4) { transition-delay: 0.28s; }
.ayn-card:is(:hover, .ayn-card--active, :focus-within) .ayn-card__back > *:nth-child(5) { transition-delay: 0.34s; }
.ayn-card:is(:hover, .ayn-card--active, :focus-within) .ayn-card__back > *:nth-child(6) { transition-delay: 0.4s; }

/* =====================================================================
   ANIMATIONS V1
   ===================================================================== */

/* 1. SLIDE UP OVERLAY ------------------------------------------------ */

.ayn-anim--slide-up .ayn-card__back {
	transform: translateY(102%);
	transition: transform var(--ayn-duration) var(--ayn-ease);
	will-change: transform;
}

.ayn-anim--slide-up:is(:hover, .ayn-card--active, :focus-within) .ayn-card__back {
	transform: translateY(0);
}

.ayn-anim--slide-up:is(:hover, .ayn-card--active, :focus-within) .ayn-card__img {
	transform: scale(1.06);
}

/* 2. HEADER COLLAPSE ------------------------------------------------- */

.ayn-anim--header-collapse .ayn-card__back {
	top: auto;
	height: 72%;
	border-radius: var(--ayn-radius) var(--ayn-radius) 0 0;
	transform: translateY(103%);
	transition: transform var(--ayn-duration) var(--ayn-ease);
	will-change: transform;
}

.ayn-anim--header-collapse:is(:hover, .ayn-card--active, :focus-within) .ayn-card__back {
	transform: translateY(0);
}

.ayn-anim--header-collapse:is(:hover, .ayn-card--active, :focus-within) .ayn-card__front-content {
	opacity: 0;
	transform: translateY(-16px);
}

.ayn-anim--header-collapse:is(:hover, .ayn-card--active, :focus-within) .ayn-card__img {
	transform: translateY(-10%) scale(1.08);
}

/* 3 & 4. FLIP HORIZONTAL / VERTICAL ---------------------------------- */

.ayn-anim--flip-horizontal,
.ayn-anim--flip-vertical {
	perspective: 1400px;
	background: transparent;
	box-shadow: none;
	overflow: visible; /* indispensable : la rotation 3D dépasse du cadre pendant l'animation */
}

.ayn-anim--flip-horizontal .ayn-card__inner,
.ayn-anim--flip-vertical .ayn-card__inner {
	transform-style: preserve-3d;
	transition: transform 0.7s var(--ayn-ease);
	will-change: transform;
}

.ayn-anim--flip-horizontal .ayn-card__face,
.ayn-anim--flip-vertical .ayn-card__face {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	box-shadow: 0 12px 32px -16px rgba(15, 23, 42, 0.35);
}

.ayn-anim--flip-horizontal .ayn-card__back { transform: rotateY(180deg); }
.ayn-anim--flip-vertical .ayn-card__back { transform: rotateX(-180deg); }

.ayn-anim--flip-horizontal:is(:hover, .ayn-card--active, :focus-within) .ayn-card__inner {
	transform: rotateY(180deg);
}

.ayn-anim--flip-vertical:is(:hover, .ayn-card--active, :focus-within) .ayn-card__inner {
	transform: rotateX(180deg);
}

/* Le contenu des flips reste lisible : la face entière pivote */
.ayn-anim--flip-horizontal .ayn-card__back,
.ayn-anim--flip-vertical .ayn-card__back {
	pointer-events: none;
}

/* 5. REVEAL ROTATION ------------------------------------------------- */

.ayn-anim--reveal-rotation .ayn-card__back {
	opacity: 0;
	transform: rotate(-7deg) scale(1.12);
	transition:
		opacity var(--ayn-duration) var(--ayn-ease),
		transform var(--ayn-duration) var(--ayn-ease);
	will-change: transform, opacity;
}

.ayn-anim--reveal-rotation:is(:hover, .ayn-card--active, :focus-within) .ayn-card__back {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

/* 6. APPLE REVEAL ---------------------------------------------------- */

.ayn-anim--apple-reveal {
	perspective: 1200px;
}

.ayn-anim--apple-reveal .ayn-card__back {
	opacity: 0;
	transform: translateY(28px) rotateX(10deg) scale(0.98);
	transform-origin: 50% 100%;
	transition:
		opacity 0.65s var(--ayn-ease-apple),
		transform 0.65s var(--ayn-ease-apple);
	will-change: transform, opacity;
}

.ayn-anim--apple-reveal:is(:hover, .ayn-card--active, :focus-within) .ayn-card__back {
	opacity: 1;
	transform: translateY(0) rotateX(0deg) scale(1);
}

.ayn-anim--apple-reveal:is(:hover, .ayn-card--active, :focus-within) .ayn-card__front-content {
	opacity: 0;
	transform: translateY(-10px) scale(0.97);
}

.ayn-anim--apple-reveal:is(:hover, .ayn-card--active, :focus-within) .ayn-card__img {
	transform: scale(1.05);
}

/* 7. CORNER OVERLAY -------------------------------------------------- */

.ayn-anim--corner-overlay .ayn-card__back {
	clip-path: circle(0% at calc(100% - 40px) 40px);
	transition: clip-path 0.65s var(--ayn-ease);
	will-change: clip-path;
}

.ayn-anim--corner-overlay:is(:hover, .ayn-card--active, :focus-within) .ayn-card__back {
	clip-path: circle(165% at calc(100% - 40px) 40px);
}

/* 8. SWITCH ROTATION ------------------------------------------------- */

.ayn-anim--switch-rotation .ayn-card__front {
	transition:
		opacity 0.4s var(--ayn-ease),
		transform 0.4s var(--ayn-ease);
	will-change: transform, opacity;
}

.ayn-anim--switch-rotation:is(:hover, .ayn-card--active, :focus-within) .ayn-card__front {
	opacity: 0;
	transform: rotate(5deg) scale(0.92);
}

.ayn-anim--switch-rotation .ayn-card__back {
	opacity: 0;
	transform: rotate(-5deg) scale(0.92);
	transition:
		opacity 0.45s var(--ayn-ease) 0.08s,
		transform 0.45s var(--ayn-ease) 0.08s;
	will-change: transform, opacity;
}

.ayn-anim--switch-rotation:is(:hover, .ayn-card--active, :focus-within) .ayn-card__back {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}

/* 9. FADE ZOOM ------------------------------------------------------- */

.ayn-anim--fade-zoom .ayn-card__back {
	opacity: 0;
	transform: scale(1.07);
	transition:
		opacity var(--ayn-duration) var(--ayn-ease),
		transform var(--ayn-duration) var(--ayn-ease);
	will-change: transform, opacity;
}

.ayn-anim--fade-zoom:is(:hover, .ayn-card--active, :focus-within) .ayn-card__back {
	opacity: 1;
	transform: scale(1);
}

.ayn-anim--fade-zoom:is(:hover, .ayn-card--active, :focus-within) .ayn-card__img {
	transform: scale(1.1);
}

/* =====================================================================
   COMPORTEMENT MOBILE
   ===================================================================== */

/* Disable Animation : la face arrière n'existe plus, carte statique */
.ayn-card--static .ayn-card__back {
	display: none !important;
}

.ayn-card--static,
.ayn-card--static * {
	transition: none !important;
}

/* =====================================================================
   STYLE PRESETS — v1.2
   Les presets définissent uniquement des tokens : tout contrôle Elementor
   explicite (couleur, fond…) garde la priorité.
   La classe est posée sur le wrapper Elementor (héritage) ou sur la carte.
   ===================================================================== */

/* Glassmorphism clair */
.ayn-preset--glass {
	--ayn-card-bg: rgba(255, 255, 255, 0.55);
	--ayn-card-border: 1px solid rgba(255, 255, 255, 0.7);
	--ayn-front-fg: #0f172a;
	--ayn-front-fg-muted: rgba(15, 23, 42, 0.7);
	--ayn-back-bg: rgba(248, 250, 252, 0.92);
	--ayn-back-fg: #0f172a;
	--ayn-back-fg-muted: rgba(15, 23, 42, 0.72);
	--ayn-accent: #4f46e5;
	--ayn-accent-hover: #4338ca;
	--ayn-icon-bg: rgba(79, 70, 229, 0.12);
	--ayn-icon-fg: #4f46e5;
	--ayn-list-chip-bg: rgba(79, 70, 229, 0.1);
	--ayn-list-icon: #4f46e5;
	--ayn-ring: #4f46e5;
}

.ayn-preset--glass .ayn-card,
.ayn-card.ayn-preset--glass {
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

:where(.ayn-preset--glass .ayn-card, .ayn-card.ayn-preset--glass) {
	box-shadow: 0 16px 40px -20px rgba(15, 23, 42, 0.25);
}

.ayn-preset--glass .ayn-card__back,
.ayn-card.ayn-preset--glass .ayn-card__back {
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

/* Minimal blanc */
.ayn-preset--minimal {
	--ayn-card-bg: #ffffff;
	--ayn-card-border: 1px solid #e2e8f0;
	--ayn-front-fg: #0f172a;
	--ayn-front-fg-muted: rgba(15, 23, 42, 0.65);
	--ayn-back-bg: #ffffff;
	--ayn-back-fg: #0f172a;
	--ayn-back-fg-muted: rgba(15, 23, 42, 0.65);
	--ayn-accent: #0f172a;
	--ayn-accent-hover: #1e293b;
	--ayn-icon-bg: #f1f5f9;
	--ayn-icon-fg: #0f172a;
	--ayn-list-chip-bg: #f1f5f9;
	--ayn-list-icon: #0f172a;
	--ayn-ring: #0f172a;
}

:where(.ayn-preset--minimal .ayn-card, .ayn-card.ayn-preset--minimal) {
	box-shadow: 0 8px 24px -16px rgba(15, 23, 42, 0.18);
}

/* Dark luxe or */
.ayn-preset--darkgold {
	--ayn-card-bg: #0c0a09;
	--ayn-back-bg: linear-gradient(160deg, #1c1917 0%, #0c0a09 100%);
	--ayn-back-fg: #fafaf9;
	--ayn-back-fg-muted: rgba(250, 250, 249, 0.7);
	--ayn-accent: #d4af37;
	--ayn-accent-hover: #b8962e;
	--ayn-badge-fg: #1c1917;
	--ayn-btn-fg: #1c1917;
	--ayn-icon-bg: rgba(212, 175, 55, 0.14);
	--ayn-icon-fg: #d4af37;
	--ayn-list-chip-bg: rgba(212, 175, 55, 0.12);
	--ayn-list-icon: #d4af37;
	--ayn-ring: #d4af37;
}

/* Nature / wellness */
.ayn-preset--nature {
	--ayn-card-bg: #052e16;
	--ayn-back-bg: linear-gradient(160deg, #065f46 0%, #022c22 100%);
	--ayn-accent: #f59e0b;
	--ayn-accent-hover: #d97706;
	--ayn-icon-bg: rgba(110, 231, 183, 0.14);
	--ayn-icon-fg: #6ee7b7;
	--ayn-list-chip-bg: rgba(110, 231, 183, 0.12);
	--ayn-list-icon: #6ee7b7;
	--ayn-ring: #10b981;
}

/* Corporate */
.ayn-preset--corporate {
	--ayn-card-bg: #082f49;
	--ayn-back-bg: linear-gradient(160deg, #0c4a6e 0%, #082f49 100%);
	--ayn-accent: #0ea5e9;
	--ayn-accent-hover: #0284c7;
	--ayn-icon-bg: rgba(125, 211, 252, 0.15);
	--ayn-icon-fg: #7dd3fc;
	--ayn-list-chip-bg: rgba(125, 211, 252, 0.12);
	--ayn-list-icon: #7dd3fc;
	--ayn-ring: #0ea5e9;
}

/* =====================================================================
   ANIMATION D'ENTRÉE AU SCROLL — v1.2
   L'état initial caché n'est appliqué que si le JS est chargé (.ayn-js),
   pour ne jamais masquer le contenu sans JavaScript.
   ===================================================================== */

.ayn-card[data-entrance] {
	transition:
		opacity 0.7s var(--ayn-ease),
		transform 0.7s var(--ayn-ease),
		box-shadow var(--ayn-duration) var(--ayn-ease);
}

.ayn-js .ayn-card[data-entrance]:not(.ayn-in-view) {
	transition: none;
}

.ayn-js .ayn-card[data-entrance='fade-up']:not(.ayn-in-view) { opacity: 0; transform: translateY(32px); }
.ayn-js .ayn-card[data-entrance='fade-in']:not(.ayn-in-view) { opacity: 0; }
.ayn-js .ayn-card[data-entrance='zoom-in']:not(.ayn-in-view) { opacity: 0; transform: scale(0.92); }
.ayn-js .ayn-card[data-entrance='slide-left']:not(.ayn-in-view) { opacity: 0; transform: translateX(40px); }
.ayn-js .ayn-card[data-entrance='slide-right']:not(.ayn-in-view) { opacity: 0; transform: translateX(-40px); }

@media (prefers-reduced-motion: reduce) {
	.ayn-js .ayn-card[data-entrance]:not(.ayn-in-view) {
		opacity: 1;
		transform: none;
	}
}

/* =====================================================================
   EFFETS HOVER D'IMAGE — v1.2
   ===================================================================== */

.ayn-imgfx--zoom .ayn-card:is(:hover, .ayn-card--active, :focus-within) .ayn-card__img,
.ayn-card.ayn-imgfx--zoom:is(:hover, .ayn-card--active, :focus-within) .ayn-card__img {
	transform: scale(1.08);
}

.ayn-imgfx--grayscale .ayn-card__img,
.ayn-card.ayn-imgfx--grayscale .ayn-card__img {
	filter: grayscale(1);
}

.ayn-imgfx--grayscale .ayn-card:is(:hover, .ayn-card--active, :focus-within) .ayn-card__img,
.ayn-card.ayn-imgfx--grayscale:is(:hover, .ayn-card--active, :focus-within) .ayn-card__img {
	filter: grayscale(0);
	transform: scale(1.04);
}

.ayn-imgfx--rotate .ayn-card:is(:hover, .ayn-card--active, :focus-within) .ayn-card__img,
.ayn-card.ayn-imgfx--rotate:is(:hover, .ayn-card--active, :focus-within) .ayn-card__img {
	transform: scale(1.07) rotate(2deg);
}

.ayn-imgfx--blur .ayn-card:is(:hover, .ayn-card--active, :focus-within) .ayn-card__img,
.ayn-card.ayn-imgfx--blur:is(:hover, .ayn-card--active, :focus-within) .ayn-card__img {
	filter: blur(5px);
	transform: scale(1.04);
}

/* =====================================================================
   ACCESSIBILITÉ — prefers-reduced-motion
   Le contenu reste accessible, les transitions deviennent instantanées.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ayn-card,
	.ayn-card *,
	.ayn-card__inner {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		animation: none !important;
	}
}