/**
 * Espace publicitaire — L'Africaine Elementor Addons.
 *
 * Deux principes :
 *   • La place est réservée AVANT le chargement du visuel (--laf-ad-ratio) :
 *     l'arrivée de la publicité ne décale jamais le contenu éditorial.
 *   • Sur mobile, une bannière large est illisible. Si l'annonceur a fourni un
 *     visuel mobile, on bascule sur son ratio (--laf-ad-ratio-m) ; sinon le
 *     visuel principal reprend simplement sa proportion d'origine plutôt que
 *     d'être recadré.
 *
 * Les couleurs et la largeur maximale sont pilotées par les contrôles Elementor
 * du widget ; ce fichier ne fixe que la structure et des valeurs de repli.
 */

.laf-ad {
	display: block;
	width: 100%;
	margin-inline: auto;
}

/* ------------------------------ Mention ------------------------------ */

.laf-ad__label {
	display: block;
	/* #5B6152 et non le gris-vert clair de la charte : à 10 px, la mention doit
	   passer le contraste AA (6,1:1 sur blanc) — c'est elle qui distingue la
	   publicité du contenu éditorial. */
	color: #5B6152;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-align: right;
	margin-bottom: 6px;
}

/* ------------------------------ Visuel ------------------------------ */

.laf-ad__link {
	display: block;
	overflow: hidden;
	text-decoration: none;
	border: 1px solid #E7E3D8;
	transition: opacity 0.25s ease;
}

.laf-ad__link:not(.laf-ad__link--static):hover,
.laf-ad__link:not(.laf-ad__link--static):focus-visible {
	opacity: 0.88;
}

.laf-ad__media {
	display: block;
	width: 100%;
	aspect-ratio: var(--laf-ad-ratio, 3.88);
	background-color: #FBF9F4;
}

.laf-ad__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ------------------------- Encart « espace disponible » ------------------------- */

/* La hauteur suit le contenu, avec un plancher pour que l'encart ne se réduise
   pas à un filet sur les formats très allongés (leaderboard 728 × 90). */
.laf-ad__free {
	display: flex;
	min-height: 152px;
	border: 1px dashed #C9A961;
	background-color: #FBF9F4;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

a.laf-ad__free:hover,
a.laf-ad__free:focus-visible {
	background-color: #F5F1E6;
}

.laf-ad__free-inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 22px 20px;
	text-align: center;
}

.laf-ad__free-eyebrow {
	/* Bronze foncé du kit : l'or clair du liseré ne tiendrait pas le contraste
	   sur le fond crème. */
	color: #6D5E00;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.laf-ad__free-title {
	color: #384A30;
	font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
	font-size: 24px;
	line-height: 1.2;
}

.laf-ad__free-text {
	max-width: 46ch;
	color: #6B6F62;
	font-size: 14px;
	line-height: 1.5;
}

.laf-ad__free-cta {
	margin-top: 4px;
	padding: 9px 20px;
	background-color: #384A30;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	transition: background-color 0.25s ease;
}

a.laf-ad__free:hover .laf-ad__free-cta,
a.laf-ad__free:focus-visible .laf-ad__free-cta {
	background-color: #B02926;
}

/* ------------------------- Repère dans l'éditeur ------------------------- */

.laf-ad--empty {
	padding: 20px;
	border: 1px dashed #C9A961;
	background-color: #FBF9F4;
	color: #6B6F62;
	font-size: 13px;
	text-align: center;
}

.laf-ad--empty p {
	margin: 0;
}

/* ------------------------------ Mobile ------------------------------ */

@media (max-width: 767px) {

	/* Une seule règle : --laf-ad-ratio-m vaut le format du visuel mobile s'il
	   existe, sinon celui du visuel principal (qui se réduit alors à sa
	   proportion d'origine, sans recadrage). */
	.laf-ad__media {
		aspect-ratio: var(--laf-ad-ratio-m, 3.2);
	}

	.laf-ad__free {
		min-height: 0;
	}

	.laf-ad__free-inner {
		padding: 20px 16px;
	}

	.laf-ad__free-title {
		font-size: 20px;
	}
}