/* =========================================================
SECTION RÉALISATIONS — STYLE PREMIUM DIVILOGY 2025 (RWD)
========================================================= */

/* LISTE VERTICALE */
.dvlg-realisations-grid {
	display: block;
	container-type: inline-size;
}

/* =========================================================
🃏 CARTES
========================================================= */
.dvlg-real-card {
	position: relative;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 24px;
	padding: 1.75rem;
	background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
	margin: 0 auto 2.25rem;
	/* centrage */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
	transform: translateY(0);
	opacity: 0;
	/* fade-in only, pas de transform */
	animation: dvlgFadeIn 0.7s ease forwards;
	animation-delay: calc(var(--i, 0) * 0.08s);
	/* Largeur par défaut Desktop */
	max-width: 920px;
	width: min(100%, 92vw);
}

.dvlg-real-card:hover,
.dvlg-real-card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
	border-color: rgba(0, 0, 0, 0.1);
	background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%);
}

/* Lueur interne au survol */
.dvlg-real-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 0 0 0 rgba(37, 173, 157, 0.1);
	transition: box-shadow 0.4s ease;
}

.dvlg-real-card:hover::after {
	box-shadow: inset 0 0 0 1.5px rgba(37, 173, 157, 0.15);
}

/* =========================================================
🏷️ BADGE CATÉGORIE
========================================================= */
.dvlg-real-cat {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 0.35rem 0.75rem;
	border-radius: 9999px;
	margin-bottom: 0.75rem;
	background: rgba(0, 0, 0, 0.05);
	color: #111;
	transition: transform 0.3s ease, filter 0.3s ease;
}

.dvlg-real-cat.cat-site-internet {
	background: linear-gradient(90deg, #25ad9d, #3ad1a9);
	color: #fff;
}

.dvlg-real-cat.cat-automatisation {
	background: linear-gradient(90deg, #174465, #1f5c88);
	color: #fff;
}

.dvlg-real-cat.cat-branding {
	background: linear-gradient(90deg, #ff7e5f, #feb47b);
	color: #fff;
}

.dvlg-real-cat.cat-seo {
	background: linear-gradient(90deg, #4f46e5, #6366f1);
	color: #fff;
}

.dvlg-real-cat:hover {
	filter: brightness(1.1);
	transform: scale(1.05);
}

/* =========================================================
🧱 TITRE + CLIENT
========================================================= */
.dvlg-real-title {
	margin: 0 0 0.5rem;
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	line-height: 1.25;
	font-weight: 800;
	color: #111;
}

.dvlg-real-title a {
	text-decoration: none;
	color: inherit;
	transition: color 0.3s ease;
}

.dvlg-real-title a:hover {
	color: #25ad9d;
}

.dvlg-real-title .dvlg-real-title-sep {
	opacity: 0.4;
	padding: 0 0.35rem;
}

/* =========================================================
📝 DESCRIPTION
========================================================= */
.dvlg-real-desc {
	margin: 0.25rem 0 1.25rem;
	color: #444;
	font-size: 0.95rem;
	line-height: 1.55;
	opacity: 0.9;
}

/* =========================================================
🖼️ IMAGE
========================================================= */
.dvlg-real-figure {
	margin: 0 0 1.25rem;
	border-radius: 16px;
	overflow: hidden;
	position: relative;
}

.dvlg-real-thumb {
	width: 100%;
	height: auto;
	border-radius: 16px;
	aspect-ratio: 16/9;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), filter 0.5s ease;
	will-change: transform, filter;
}

.dvlg-real-card:hover .dvlg-real-thumb {
	transform: scale(1.04);
	filter: brightness(1.03) contrast(1.02);
}

.dvlg-real-figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	transition: background 0.4s ease;
	pointer-events: none;
}

.dvlg-real-card:hover .dvlg-real-figure::after {
	background: rgba(0, 0, 0, 0.05);
}

/* =========================================================
📊 KPIs
========================================================= */
.dvlg-real-kpis {
	display: flex;
	gap: 1.75rem;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-top: 1.25rem;
	width: 100%;
	/* occupe toute la largeur de la carte */
}

.dvlg-kpi {
	text-align: center;
	position: relative;
	padding: 0 0.75rem;
	min-width: 120px;
}

.dvlg-kpi::after {
	content: "";
	position: absolute;
	right: -0.875rem;
	top: 20%;
	bottom: 20%;
	width: 1px;
	background: rgba(0, 0, 0, 0.06);
}

.dvlg-kpi:last-child::after {
	display: none;
}

.dvlg-kpi__value {
	display: block;
	font-weight: 700;
	font-size: 1.25rem;
	color: #111;
	line-height: 1.2;
}

.dvlg-kpi__label {
	display: block;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #555;
	opacity: 0.85;
	margin-top: 0.25rem;
}

/* =========================================================
📱 RESPONSIVE — TABLETTE
========================================================= */
@media (max-width: 1024px) {
	.dvlg-real-card {
		max-width: 780px;
		/* pas plein écran */
		width: min(92vw, 780px);
		padding: 1.5rem;
	}

	.dvlg-real-title {
		font-size: clamp(1.1rem, 2.2vw, 1.35rem);
		/* h3 un peu plus grand */
		line-height: 1.25;
	}
}

/* =========================================================
📱 RESPONSIVE — MOBILE
========================================================= */
@media (max-width: 768px) {
	.dvlg-real-card {
		max-width: 640px;
		/* évite 100% de l’écran */
		width: min(92vw, 640px);
		padding: 1.25rem;
		border-radius: 20px;
	}

	/* Titre plus lisible sur mobile */
	.dvlg-real-title {
		font-size: clamp(1.15rem, 5.2vw, 1.45rem);
		line-height: 1.25;
	}

	/* KPIs vraiment centrées quand elles se mettent l'une sous l'autre */
	.dvlg-real-kpis {
		flex-direction: column;
		align-items: center;
		/* centre la colonne sur toute la largeur */
		justify-content: center;
		gap: 0.75rem;
		width: 100%;
	}

	.dvlg-kpi {
		padding: 0;
		/* supprime le léger décalage gauche */
		min-width: 0;
		width: 100%;
		/* chaque KPI prend la largeur dispo */
		max-width: 420px;
		/* mais reste contenue pour l’esthétique */
		margin-inline: auto;
		/* et bien centrée */
	}

	.dvlg-kpi::after {
		display: none;
	}

	/* pas de séparateur en colonne */
}

/* =========================================================
🎞️ ANIMATION À L’APPARITION (fade-only)
========================================================= */
@keyframes dvlgFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dvlg-real-card {
		animation: none;
		opacity: 1;
	}
}

/* ============================
Fond "Framer-like" premium
pour la section Réalisations
============================ */

.dvlg-realisations-section {
	/* Palette (tweakable) */
	--dvlg-teal: #25AD9D;
	--dvlg-mint: #3AD1A9;
	--dvlg-blue: #174465;

	position: relative;
	isolation: isolate;
	/* sépare le stacking de la section */
	border-radius: 32px;
	/* cohérence globale Divilogy */
	overflow: clip;
	/* évite tout débordement */
	background:
		/* Aura elliptique en haut (mint) */
		radial-gradient(60% 40% at 50% 8%,
			color-mix(in oklab, var(--dvlg-mint) 14%, transparent), transparent 70%),

		/* Capsule arrondie gauche → donne la matière sans bande droite */
		radial-gradient(40% 80% at 0% 45%,
			color-mix(in oklab, var(--dvlg-blue) 10%, transparent), transparent 70%),

		/* Capsule arrondie droite */
		radial-gradient(42% 82% at 100% 55%,
			color-mix(in oklab, var(--dvlg-teal) 12%, transparent), transparent 72%),

		/* Spotlight doux au centre (teal) */
		radial-gradient(55% 40% at 50% 28%,
			color-mix(in oklab, var(--dvlg-teal) 10%, transparent), transparent 68%),

		/* Base très claire avec une légère profondeur */
		linear-gradient(180deg, #fff 0%, #f7f9fb 100%);
}

/* Titre géant en arrière-plan — tu le conserves.
On le rend un poil plus "gravé" pour matcher le style luxe. */
.dvlg-realisations-section::before {
	content: "RÉALISATIONS";
	position: absolute;
	inset: 0 auto auto 50%;
	transform: translateX(-50%);
	top: clamp(24px, 6vw, 72px);
	/* s’adapte à la page */
	font-size: clamp(3rem, 9vw, 9rem);
	/* responsive élégant */
	font-weight: 800;
	letter-spacing: .02em;
	color: rgba(0, 0, 0, .035);
	/* velours */
	pointer-events: none;
	z-index: 0;
	/* reste derrière les cartes */
	line-height: .9;
	/* léger dégradé interne pour éviter l’effet “plat” */
	background: radial-gradient(120% 140% at 50% 35%,
			rgba(255, 255, 255, .6), transparent 60%);
	-webkit-background-clip: text;
	background-clip: text;
	filter: blur(.3px);
	/* adoucit les arêtes sans ternir */
}

@media (min-width: 1600px) {
	.dvlg-realisations-section::before {
		font-size: clamp(7rem, 16vw, 16rem);
	}
}

/* Couche de "velours" circulaire : adoucit les bords sans ligne droite */
.dvlg-realisations-section::after {
	content: "";
	position: absolute;
	inset: -8% -6% -8% -6%;
	z-index: -1;
	/* sous le contenu, au-dessus du bg */
	pointer-events: none;
	background:
		/* Vignette circulaire ultra soft (pas un cadre droit) */
		radial-gradient(120% 90% at 50% 50%,
			transparent 60%, rgba(0, 0, 0, 0.06) 100%);
	opacity: .06;
	/* ajuste entre .04 et .10 selon goût */
	mix-blend-mode: multiply;
	/* grain luxueux sans bruit visible */
}

/* Intensité et échelle adaptées aux vues étroites */
@media (max-width: 900px) {
	.dvlg-realisations-section::before {
		display: none;
	}
}