/* =====================================================================
   AYN Animated Cards — v1.3.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-duration-user / --ayn-ease-user : posés par les contrôles
	   « Animation Duration / Easing » ; sinon chaque animation garde
	   sa valeur native optimisée. */
	--ayn-radius: 20px;
	--ayn-duration: var(--ayn-duration-user, 0.55s);
	--ayn-ease: var(--ayn-ease-user, cubic-bezier(0.22, 1, 0.36, 1));
	--ayn-ease-apple: var(--ayn-ease-user, 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:not(.ayn-trigger--click), .ayn-card--active, :focus-within) {
	transform: scale(var(--ayn-hover-scale));
}

:where(.ayn-card:is(:hover:not(.ayn-trigger--click), .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;
}

/* Carte unique placée dans un Grid / Container Elementor : le toggle
   « Equal Height in Elementor Grid » pose la classe sur le wrapper du widget.
   Toute la chaîne de boîtes prend la hauteur de la cellule de grille étirée. */
.ayn-fill-grid--yes,
.ayn-fill-grid--yes > .elementor-widget-container,
.ayn-fill-grid--yes > .elementor-widget-container > .ayn-card {
	height: 100%;
}

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

/* ------------------------- CARD RATIO ------------------------------
   Le contrôle « Card Ratio » applique `aspect-ratio` directement sur
   `.ayn-card` (tous les layouts) et neutralise Min Height. Aucune règle
   dédiée ici : c'est une propriété de la carte, plus du bloc image.
   ------------------------------------------------------------------- */

/* ------------------------------ 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__video {
	/* Même comportement que .ayn-card__img : remplit la carte, posée sur l'image
	   (qui sert de poster/fallback), sous l'overlay et le contenu. */
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
	border: 0;
	pointer-events: none;
}

.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 remplit le haut de la carte, le contenu
   se place dessous à sa hauteur naturelle. C'est la CARTE (Card Ratio ou Min
   Height) qui définit la hauteur ; l'image occupe l'espace au-dessus du texte. */

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

.ayn-layout--top .ayn-card__media,
.ayn-card.ayn-layout--top .ayn-card__media {
	position: relative;
	inset: auto;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	border-radius: 0;
}

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

/* ------------------- LAYOUT « Sans image » (icône + texte) — v1.3 ----------
   Carte de service / feature statique : aucun média, le contenu s'affiche en
   flux normal sur le fond de carte (pas d'overlay sur photo). La couleur du
   texte suit le preset (--ayn-front-fg), donc reste lisible clair/sombre.
   --------------------------------------------------------------------------- */

.ayn-layout--none .ayn-card__media,
.ayn-card.ayn-layout--none .ayn-card__media {
	display: none;
}

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

.ayn-layout--none .ayn-card__front-content,
.ayn-card.ayn-layout--none .ayn-card__front-content {
	margin-top: 0;
	justify-content: flex-start;
	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;
}

/* Position du badge principal — le badge secondaire a ses propres classes ayn-badge2-pos-- */
.ayn-badge-pos--top-left .ayn-card__badge:not(.ayn-card__badge--secondary) { right: auto; left: var(--ayn-badge-x, 16px); }
.ayn-badge-pos--bottom-right .ayn-card__badge:not(.ayn-card__badge--secondary) { top: auto; bottom: var(--ayn-badge-y, 16px); }
.ayn-badge-pos--bottom-left .ayn-card__badge:not(.ayn-card__badge--secondary) { 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:not(.ayn-trigger--click), .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:not(.ayn-trigger--click), .ayn-card--active, :focus-within) .ayn-card__back > * {
	opacity: 1;
	transform: translateY(0);
}

.ayn-card:is(:hover:not(.ayn-trigger--click), .ayn-card--active, :focus-within) .ayn-card__back > *:nth-child(1) { transition-delay: 0.1s; }
.ayn-card:is(:hover:not(.ayn-trigger--click), .ayn-card--active, :focus-within) .ayn-card__back > *:nth-child(2) { transition-delay: 0.16s; }
.ayn-card:is(:hover:not(.ayn-trigger--click), .ayn-card--active, :focus-within) .ayn-card__back > *:nth-child(3) { transition-delay: 0.22s; }
.ayn-card:is(:hover:not(.ayn-trigger--click), .ayn-card--active, :focus-within) .ayn-card__back > *:nth-child(4) { transition-delay: 0.28s; }
.ayn-card:is(:hover:not(.ayn-trigger--click), .ayn-card--active, :focus-within) .ayn-card__back > *:nth-child(5) { transition-delay: 0.34s; }
.ayn-card:is(:hover:not(.ayn-trigger--click), .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:not(.ayn-trigger--click), .ayn-card--active, :focus-within) .ayn-card__back {
	transform: translateY(0);
}

.ayn-anim--slide-up:is(:hover:not(.ayn-trigger--click), .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:not(.ayn-trigger--click), .ayn-card--active, :focus-within) .ayn-card__back {
	transform: translateY(0);
}

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

.ayn-anim--header-collapse:is(:hover:not(.ayn-trigger--click), .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 var(--ayn-duration-user, 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:not(.ayn-trigger--click), .ayn-card--active, :focus-within) .ayn-card__inner {
	transform: rotateY(180deg);
}

.ayn-anim--flip-vertical:is(:hover:not(.ayn-trigger--click), .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:not(.ayn-trigger--click), .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 var(--ayn-duration-user, 0.65s) var(--ayn-ease-apple),
		transform var(--ayn-duration-user, 0.65s) var(--ayn-ease-apple);
	will-change: transform, opacity;
}

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

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

.ayn-anim--apple-reveal:is(:hover:not(.ayn-trigger--click), .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 var(--ayn-duration-user, 0.65s) var(--ayn-ease);
	will-change: clip-path;
}

.ayn-anim--corner-overlay:is(:hover:not(.ayn-trigger--click), .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 var(--ayn-duration-user, 0.4s) var(--ayn-ease),
		transform var(--ayn-duration-user, 0.4s) var(--ayn-ease);
	will-change: transform, opacity;
}

.ayn-anim--switch-rotation:is(:hover:not(.ayn-trigger--click), .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 var(--ayn-duration-user, 0.45s) var(--ayn-ease) 0.08s,
		transform var(--ayn-duration-user, 0.45s) var(--ayn-ease) 0.08s;
	will-change: transform, opacity;
}

.ayn-anim--switch-rotation:is(:hover:not(.ayn-trigger--click), .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:not(.ayn-trigger--click), .ayn-card--active, :focus-within) .ayn-card__back {
	opacity: 1;
	transform: scale(1);
}

.ayn-anim--fade-zoom:is(:hover:not(.ayn-trigger--click), .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;
}

/* ------- Presets métier — v2.1 (tokens uniquement, comme les autres) ------- */

/* Immobilier / Conciergerie — ardoise + champagne */
.ayn-preset--realestate {
	--ayn-card-bg: #1e293b;
	--ayn-back-bg: linear-gradient(160deg, #334155 0%, #1e293b 100%);
	--ayn-back-fg: #f8fafc;
	--ayn-back-fg-muted: rgba(248, 250, 252, 0.72);
	--ayn-accent: #c2924e;
	--ayn-accent-hover: #a97b3b;
	--ayn-badge-fg: #1e293b;
	--ayn-btn-fg: #1e293b;
	--ayn-icon-bg: rgba(194, 146, 78, 0.14);
	--ayn-icon-fg: #d9b678;
	--ayn-list-chip-bg: rgba(194, 146, 78, 0.12);
	--ayn-list-icon: #d9b678;
	--ayn-ring: #c2924e;
}

/* Santé / Médical — teal apaisant */
.ayn-preset--health {
	--ayn-card-bg: #0e7490;
	--ayn-back-bg: linear-gradient(160deg, #0891b2 0%, #155e75 100%);
	--ayn-back-fg: #f0fdfa;
	--ayn-back-fg-muted: rgba(240, 253, 250, 0.75);
	--ayn-accent: #5eead4;
	--ayn-accent-hover: #2dd4bf;
	--ayn-badge-fg: #134e4a;
	--ayn-btn-fg: #134e4a;
	--ayn-icon-bg: rgba(94, 234, 212, 0.18);
	--ayn-icon-fg: #99f6e4;
	--ayn-list-chip-bg: rgba(94, 234, 212, 0.15);
	--ayn-list-icon: #99f6e4;
	--ayn-ring: #14b8a6;
}

/* Restaurant / Food — espresso + orange */
.ayn-preset--restaurant {
	--ayn-card-bg: #292524;
	--ayn-back-bg: linear-gradient(160deg, #44403c 0%, #1c1917 100%);
	--ayn-back-fg: #fafaf9;
	--ayn-back-fg-muted: rgba(250, 250, 249, 0.72);
	--ayn-accent: #ea580c;
	--ayn-accent-hover: #c2410c;
	--ayn-icon-bg: rgba(234, 88, 12, 0.16);
	--ayn-icon-fg: #fb923c;
	--ayn-list-chip-bg: rgba(234, 88, 12, 0.14);
	--ayn-list-icon: #fb923c;
	--ayn-ring: #ea580c;
}

/* Artisan / BTP — ardoise industrielle + jaune sécurité */
.ayn-preset--artisan {
	--ayn-card-bg: #27272a;
	--ayn-back-bg: linear-gradient(160deg, #3f3f46 0%, #18181b 100%);
	--ayn-back-fg: #fafafa;
	--ayn-back-fg-muted: rgba(250, 250, 250, 0.72);
	--ayn-accent: #facc15;
	--ayn-accent-hover: #eab308;
	--ayn-badge-fg: #18181b;
	--ayn-btn-fg: #18181b;
	--ayn-icon-bg: rgba(250, 204, 21, 0.16);
	--ayn-icon-fg: #fde047;
	--ayn-list-chip-bg: rgba(250, 204, 21, 0.14);
	--ayn-list-icon: #fde047;
	--ayn-ring: #facc15;
}

/* =====================================================================
   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:not(.ayn-trigger--click), .ayn-card--active, :focus-within) .ayn-card__img,
.ayn-card.ayn-imgfx--zoom:is(:hover:not(.ayn-trigger--click), .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:not(.ayn-trigger--click), .ayn-card--active, :focus-within) .ayn-card__img,
.ayn-card.ayn-imgfx--grayscale:is(:hover:not(.ayn-trigger--click), .ayn-card--active, :focus-within) .ayn-card__img {
	filter: grayscale(0);
	transform: scale(1.04);
}

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

.ayn-imgfx--blur .ayn-card:is(:hover:not(.ayn-trigger--click), .ayn-card--active, :focus-within) .ayn-card__img,
.ayn-card.ayn-imgfx--blur:is(:hover:not(.ayn-trigger--click), .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;
	}
}

/* =====================================================================
   TOGGLE / INDICATEUR DE RÉVÉLATION — v1.3
   Vrai <button> : porte aria-expanded (ARIA valide), focusable clavier,
   cible tactile 44×44. Devient « × » (rotation 45°) quand la carte est ouverte.
   ===================================================================== */

.ayn-card__toggle {
	position: absolute;
	z-index: 5; /* au-dessus du lien global (.ayn-card__link, z-index 3) */
	right: 14px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--ayn-hint-bg, rgba(255, 255, 255, 0.18));
	color: var(--ayn-hint-fg, #fff);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
	transition:
		transform 0.3s var(--ayn-ease),
		background 0.2s ease,
		opacity 0.25s ease;
}

.ayn-card__toggle:hover {
	background: var(--ayn-hint-bg-hover, rgba(255, 255, 255, 0.32));
}

.ayn-card__toggle:focus-visible {
	outline: 2px solid var(--ayn-hint-fg, #fff);
	outline-offset: 2px;
	opacity: 1 !important;
	clip-path: none !important;
	pointer-events: auto !important;
}

.ayn-card__toggle[aria-expanded='true'] {
	transform: rotate(45deg);
}

/* Mode « tactile uniquement » (défaut) : masqué visuellement sur desktop,
   mais reste focusable au clavier (commande accessible). */
@media (hover: hover) and (pointer: fine) {
	.ayn-hint--touch .ayn-card__toggle:not(:focus-visible) {
		opacity: 0;
		clip-path: inset(50%);
		pointer-events: none;
	}
}

/* Mode « masqué » : jamais visible, reste accessible au clavier. */
.ayn-hint--none .ayn-card__toggle:not(:focus-visible) {
	opacity: 0;
	clip-path: inset(50%);
	pointer-events: none;
}

/* Carte statique (Disable Animation sur mobile) : pas de face arrière utile. */
.ayn-card--static .ayn-card__toggle {
	display: none;
}

/* =====================================================================
   TILT 3D — v1.3
   Vars pilotées par le JS (pointermove). Jamais actif sur tactile
   ni sous prefers-reduced-motion (garde JS).
   ===================================================================== */

.ayn-card[data-tilt] {
	transform: perspective(900px) rotateX(var(--ayn-tilt-x, 0deg)) rotateY(var(--ayn-tilt-y, 0deg)) scale(var(--ayn-hover-scale, 1));
	transition:
		transform 0.18s ease-out,
		opacity 0.7s var(--ayn-ease),
		box-shadow var(--ayn-duration) var(--ayn-ease);
	will-change: transform;
}

/* =====================================================================
   BADGES — v1.3 : rotation, formes, badge secondaire
   ===================================================================== */

.ayn-card__badge {
	transform: rotate(var(--ayn-badge-rotate, 0deg));
}

/* Forme « carré arrondi » — :where() : le contrôle Border Radius garde la priorité */
:where(.ayn-badge-shape--square .ayn-card__badge) {
	border-radius: 8px;
}

/* Forme « ruban diagonal » (badge principal, positions hautes) */
.ayn-badge-shape--ribbon .ayn-card__badge:not(.ayn-card__badge--secondary) {
	top: 26px;
	right: -42px;
	left: auto;
	bottom: auto;
	width: 170px;
	justify-content: center;
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
	transform: rotate(45deg);
}

.ayn-badge-shape--ribbon.ayn-badge-pos--top-left .ayn-card__badge:not(.ayn-card__badge--secondary),
.ayn-badge-shape--ribbon .ayn-badge-pos--top-left.ayn-card .ayn-card__badge:not(.ayn-card__badge--secondary) {
	right: auto;
	left: -42px;
	transform: rotate(-45deg);
}

/* Badge secondaire : position indépendante (défaut top-left), pas de rotation */
.ayn-card__badge--secondary {
	top: var(--ayn-badge-y, 16px);
	right: auto;
	bottom: auto;
	left: var(--ayn-badge-x, 16px);
	transform: none;
}

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

/* =====================================================================
   CTA FACE AVANT — v1.3
   ===================================================================== */

.ayn-card__btn--front {
	margin-top: 12px;
}

/* =====================================================================
   AYN CARDS GRID — v2.0 (grille + carousel, zéro dépendance)
   Le widget grille réutilise toutes les classes .ayn-card ; on ne style
   ici que le conteneur (disposition, carousel, flèches, points).
   ===================================================================== */

.ayn-cards-grid-wrap {
	position: relative;
}

.ayn-cards-grid {
	--ayn-grid-cols: 3;
	--ayn-carousel-view: 3;
	--ayn-gap: 28px;
	display: grid;
	grid-template-columns: repeat(var(--ayn-grid-cols), minmax(0, 1fr));
	gap: var(--ayn-gap);
	align-items: flex-start; /* hauteur naturelle par défaut */
}

/* Hauteur égale (switcher ON, classe sur le wrapper Elementor) */
.ayn-eq--yes .ayn-cards-grid {
	align-items: stretch;
	grid-auto-rows: 1fr;
}
.ayn-eq--yes .ayn-cards-grid > .ayn-card {
	height: 100%;
	align-self: stretch;
}

/* --------------------------- CAROUSEL ------------------------------ */

.ayn-grid-mode--carousel .ayn-cards-grid {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 4px;
}

.ayn-grid-mode--carousel .ayn-cards-grid::-webkit-scrollbar {
	display: none;
}

.ayn-grid-mode--carousel .ayn-cards-grid .ayn-card {
	flex: 0 0 calc((100% - (var(--ayn-carousel-view) - 1) * var(--ayn-gap)) / var(--ayn-carousel-view));
	scroll-snap-align: start;
}

/* Flèches */
.ayn-cards-grid__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--ayn-grid-arrow-bg, #ffffff);
	color: var(--ayn-grid-arrow-fg, #0f172a);
	box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.35);
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ayn-cards-grid__arrow--prev { left: 4px; }
.ayn-cards-grid__arrow--next { right: 4px; }
.ayn-cards-grid__arrow:hover { transform: translateY(-50%) scale(1.06); }
.ayn-cards-grid__arrow:disabled { opacity: 0; pointer-events: none; }
.ayn-cards-grid__arrow:focus-visible { outline: 2px solid var(--ayn-ring, #1e3a8a); outline-offset: 2px; }

/* Points de pagination */
.ayn-cards-grid__dots {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.ayn-cards-grid__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--ayn-grid-dot, rgba(15, 23, 42, 0.25));
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.ayn-cards-grid__dot:hover { background: var(--ayn-grid-dot-hover, rgba(15, 23, 42, 0.45)); }
.ayn-cards-grid__dot[aria-current="true"] { background: var(--ayn-grid-dot-active, #1e3a8a); transform: scale(1.25); }
.ayn-cards-grid__dot:focus-visible { outline: 2px solid var(--ayn-ring, #1e3a8a); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.ayn-grid-mode--carousel .ayn-cards-grid { scroll-behavior: auto; }
}