/**
 * Encart du mois — masanté.re
 *
 * Deux formats partagent cette feuille :
 * - le bandeau de la page d'accueil (élément Avada « Encart du mois ») ;
 * - l'encart de la colonne latérale des articles, écrit en HTML dans
 *   l'option ACF « code_encart_pub ».
 *
 * Feuille autonome : le Tailwind du thème (dist/css/main.css) n'est pas
 * recompilable sur le serveur. Les sélecteurs à deux classes passent devant
 * les règles génériques du thème sur les titres, paragraphes et liens.
 *
 * Couleurs, rayons et typographies repris de la charte masanté.
 */

.masante-encart-mois {
	--mem-vert: #c2e30d;
	--mem-corail: #ff635c;
	--mem-blanc: #ffffff;
	--mem-anthracite: #282d28;
	--mem-gris: #f5f5f5;
	--mem-font-display: "Comfortaa Bold", "Comfortaa", "Trebuchet MS", sans-serif;
	--mem-font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;

	box-sizing: border-box;
	font-family: var(--mem-font-body);
	color: var(--mem-anthracite);
}

.masante-encart-mois *,
.masante-encart-mois *::before,
.masante-encart-mois *::after {
	box-sizing: border-box;
}

/* --- Bouton (pilule corail, inversion au survol) ---------------------- */

.masante-encart-mois .masante-encart-mois__cta {
	display: inline-block;
	padding: 14px 36px;
	border: 2px solid var(--mem-corail);
	border-radius: 999px;
	background: var(--mem-corail);
	color: var(--mem-blanc);
	font: 500 19px/1.2 var(--mem-font-body);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}

.masante-encart-mois .masante-encart-mois__cta:hover,
.masante-encart-mois .masante-encart-mois__cta:focus-visible {
	background: var(--mem-blanc);
	color: var(--mem-corail);
	text-decoration: none;
}

.masante-encart-mois .masante-encart-mois__cta:focus-visible {
	outline: 3px solid var(--mem-anthracite);
	outline-offset: 3px;
}

/* --- Bandeau de la page d'accueil ------------------------------------- */

.masante-encart-mois--bandeau {
	position: relative;
	overflow: hidden;
	min-height: 320px;
	border-radius: 2em;
	background: var(--mem-gris);
}

.masante-encart-mois--bandeau .masante-encart-mois__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.masante-encart-mois--bandeau .masante-encart-mois__bloc {
	position: absolute;
	left: 36px;
	bottom: 36px;
	max-width: 60%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.masante-encart-mois--bandeau .masante-encart-mois__titre {
	margin: 0;
	padding: 12px 26px;
	border-radius: 40px;
	background: var(--mem-vert);
	color: var(--mem-blanc);
	font: 900 34px/1.1 var(--mem-font-body);
	letter-spacing: 0;
	text-transform: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.masante-encart-mois--bandeau .masante-encart-mois__texte {
	margin: 0;
	padding: 12px 24px;
	border-radius: 40px;
	background: var(--mem-gris);
	color: var(--mem-anthracite);
	font: 400 18px/1.35 var(--mem-font-body);
}

.masante-encart-mois--bandeau .masante-encart-mois__cta {
	position: absolute;
	right: 36px;
	bottom: 36px;
}

/* Pastille : temps fort du mois */
.masante-encart-mois--bandeau .masante-encart-mois__badge {
	position: absolute;
	top: 28px;
	right: 36px;
	width: 164px;
	height: 164px;
	border-radius: 50%;
	background: var(--mem-corail);
	color: var(--mem-blanc);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	transform: rotate(6deg);
}

.masante-encart-mois__badge-titre {
	font: 700 40px/1 var(--mem-font-display);
}

.masante-encart-mois__badge-texte {
	margin-top: 5px;
	padding: 0 18px;
	font: 500 12px/1.25 var(--mem-font-body);
}

.masante-encart-mois__badge-date {
	margin-top: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--mem-blanc);
	color: var(--mem-corail);
	font: 900 13px/1.2 var(--mem-font-body);
}

@media (max-width: 760px) {
	.masante-encart-mois--bandeau {
		min-height: 440px;
	}

	.masante-encart-mois--bandeau .masante-encart-mois__bloc {
		left: 16px;
		right: 16px;
		bottom: 84px;
		max-width: none;
	}

	.masante-encart-mois--bandeau .masante-encart-mois__titre {
		font-size: 24px;
	}

	.masante-encart-mois--bandeau .masante-encart-mois__texte {
		font-size: 15px;
		border-radius: 24px;
	}

	.masante-encart-mois--bandeau .masante-encart-mois__cta {
		right: 16px;
		bottom: 20px;
	}

	.masante-encart-mois--bandeau .masante-encart-mois__badge {
		top: 14px;
		right: 14px;
		width: 116px;
		height: 116px;
	}

	.masante-encart-mois--bandeau .masante-encart-mois__badge-titre {
		font-size: 28px;
	}

	.masante-encart-mois--bandeau .masante-encart-mois__badge-texte {
		padding: 0 12px;
		font-size: 9px;
	}

	.masante-encart-mois--bandeau .masante-encart-mois__badge-date {
		font-size: 10px;
	}
}

/* --- Neutralisation des règles héritées de l'ancien encart ------------
 * Le conteneur Avada de l'élément global 772 porte l'id « masante-diabete »,
 * que dist/css/main.css habille pour l'ancien encart : h2 et p en !important,
 * liens en bouton blanc, plus « .home #main h2 » en !important. Ces règles à
 * identifiant passent devant les sélecteurs à classes ci-dessus : on les
 * surcharge à identifiant égal, avec une classe de plus.
 */

#masante-diabete .masante-encart-mois--bandeau .masante-encart-mois__titre {
	font-size: 34px !important;
	line-height: 1.1 !important;
}

#masante-diabete .masante-encart-mois--bandeau .masante-encart-mois__texte {
	font-size: 18px !important;
	line-height: 1.35 !important;
}

#masante-diabete .masante-encart-mois .masante-encart-mois__cta {
	margin-top: 0;
	padding: 14px 36px;
	border-color: var(--mem-corail);
	background: var(--mem-corail);
	color: var(--mem-blanc);
	font-size: 19px;
}

#masante-diabete .masante-encart-mois .masante-encart-mois__cta:hover,
#masante-diabete .masante-encart-mois .masante-encart-mois__cta:focus-visible {
	background: var(--mem-blanc);
	color: var(--mem-corail);
}

@media (max-width: 760px) {
	#masante-diabete .masante-encart-mois--bandeau .masante-encart-mois__titre {
		font-size: 24px !important;
	}

	#masante-diabete .masante-encart-mois--bandeau .masante-encart-mois__texte {
		font-size: 15px !important;
	}
}

/* --- Encart de la colonne latérale des articles ----------------------- */

.masante-encart-mois--sidebar {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 26px 30px;
	border-radius: 25px;
	background: var(--mem-gris);
	text-align: center;
}

.masante-encart-mois--sidebar .masante-encart-mois__titre {
	margin: 0;
	color: var(--mem-anthracite);
	font: 700 32px/1.1 var(--mem-font-body);
}

.masante-encart-mois--sidebar .masante-encart-mois__sous-titre {
	margin: 6px 0 12px;
	color: var(--mem-anthracite);
	font: 700 20px/1.2 var(--mem-font-body);
}

.masante-encart-mois--sidebar .masante-encart-mois__texte {
	margin: 0 0 18px;
	color: var(--mem-anthracite);
	font: 400 17px/1.35 var(--mem-font-body);
}

/* #block-pub img impose width:100% : on le conserve et on fixe le ratio. */
#block-pub .masante-encart-mois--sidebar .masante-encart-mois__image,
.masante-encart-mois--sidebar .masante-encart-mois__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 25px;
}

.masante-encart-mois--sidebar .masante-encart-mois__cta {
	margin-top: 22px;
	font-weight: 400;
}