/**
 * Section — Bandeau d'appel à l'action.
 *
 * Géométrie relevée sur la maquette (cadre de 1920 px) :
 *   carte    x 182, y 3241, 1529 × 506, brun, coins à 20
 *   cadre    x 200, y 3253, 1493 × 482, filet doré, coins à 20 (retrait 18 / 12)
 *   suptitre x 307, y 3367   titre x 304, y 3416 (64px)   bouton x 304, y 3520
 *
 * La carte remonte sur le fond en dégradé de la section précédente : le
 * z-index la place au-dessus, sans marge négative — la section des onglets se
 * termine exactement là où la carte commence.
 */

.cta {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	/* Carte de 1529 (largeur de la maquette), centrée — alignée avec les onglets.
	   L'ancien retrait de 182 à gauche décalait la carte même une fois le
	   conteneur centré. */
	max-width: calc(1529px + 2 * var(--anidjar-gouttiere));
	margin-inline: auto;
	padding-inline: var(--anidjar-gouttiere);
}

/* Accueil : même colonne que le hero, les services et la section des onglets
   au-dessus (voir la note dans category-tabs.css). */
.home .cta {
	max-width: var(--anidjar-contenu-max);
}

.cta__card {
	box-sizing: border-box;
	width: 100%;
	min-height: 506px;
	padding: 12px 18px;
	border-radius: var(--anidjar-rayon-carte);
	background-color: var(--anidjar-fond-sombre);
	transition: transform var(--anidjar-transition);
}

.cta__frame {
	box-sizing: border-box;
	height: 100%;
	min-height: 482px;

	/* 113 + 144 et non 114 + 145 : le filet doré compte pour 1px en haut comme
	   en bas, et le cadre doit mesurer 482 exactement. */
	padding: 113px 106px 144px;
	border: 1px solid var(--anidjar-or-fonce);
	border-radius: var(--anidjar-rayon-carte);
	transition: border-color var(--anidjar-transition);
}

/* Survol : la carte se soulève et le cadre doré s'illumine. */
@media (hover: hover) {
	.cta__card:hover {
		transform: translateY(-5px);
	}

	.cta__card:hover .cta__frame {
		border-color: var(--anidjar-or);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cta__card,
	.cta__frame {
		transition: none;
	}

	.cta__card:hover {
		transform: none;
	}
}

.cta__eyebrow {
	margin: 0;
	color: var(--anidjar-texte-accent);
	font-size: var(--anidjar-fs-sm);
	line-height: normal;
	letter-spacing: var(--anidjar-interlettre-capitales);
	text-transform: uppercase;
}

.cta__title {
	margin: 26px 0 0;
	color: var(--anidjar-texte-inverse);
	font-size: var(--anidjar-fs-xl);
	line-height: 1.21875;
}

/* Bouton principal + boutons ronds de contact sur une même rangée. */
.cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--anidjar-espace-lg);
	margin-top: 26px;
}

/* Séparateur discret avant les pastilles quand le bouton est présent. */
.cta__contact {
	position: relative;
	padding-left: var(--anidjar-espace-lg);
}

.cta__contact::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 32px;
	transform: translateY(-50%);
	background-color: var(--anidjar-or-fonce);
}

/* Premier enfant (pas de bouton avant) : pas de séparateur. */
.cta__actions > .cta__contact:first-child {
	padding-left: 0;
}

.cta__actions > .cta__contact:first-child::before {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Mobile et tablette
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	.cta {
		padding-inline: var(--anidjar-gouttiere);
	}

	.cta__card {
		min-height: 0;
	}

	.cta__frame {
		min-height: 0;
		padding: var(--anidjar-espace-2xl) var(--anidjar-espace-md);
	}
}