/* ============================================================================
   ANaTT — Couche « premium »
   ----------------------------------------------------------------------------
   Ce fichier COMPLÈTE style.css (l'ADN du template : Montserrat, vert #198754,
   dégradé pastel .style_gradient, coins arrondis, badges bg-opacity-10).
   Il n'écrase aucune classe existante : toutes les nouvelles classes sont
   préfixées « a_ » pour rester identifiables.

   Inspiration de mise en page : hiérarchie très lisible, chiffres clés mis en
   avant, cartes à profondeur discrète, respiration généreuse entre sections.
   ========================================================================== */

:root {
	--a-vert: #198754;
	--a-vert-fonce: #0C623B;
	--a-jaune: #FEC929;
	--a-rouge: #ED242C;
	--a-encre: #101913;
	--a-ligne: rgba(16, 25, 19, .10);
	--a-ombre-1: 0 1px 2px rgba(16, 25, 19, .04), 0 8px 24px rgba(16, 25, 19, .06);
	--a-ombre-2: 0 2px 4px rgba(16, 25, 19, .05), 0 16px 40px rgba(16, 25, 19, .10);
	--a-rayon: 1.25rem;
	/* Hauteur de la navbar fixe : sert de repère à tous les éléments collants.
	   Valeur de repli, remplacée à l'exécution par la hauteur mesurée
	   (voir suivreHauteurNavbar() dans anatt-premium.js). */
	--a-navbar: 74px;
}
/* Repli sans JavaScript : la navbar mobile empile logo, bouton et burger */
@media (max-width: 991.98px) {
	:root { --a-navbar: 118px; }
}

/* ── Rythme des sections ─────────────────────────────────────────────────── */
.a_section { padding-block: 3.5rem; }
@media (min-width: 992px) { .a_section { padding-block: 5rem; } }

.a_section_titre { max-width: 46rem; }

/* ── Surfaces ────────────────────────────────────────────────────────────── */
.a_surface {
	background: #fff;
	border: 1px solid var(--a-ligne);
	border-radius: var(--a-rayon);
	box-shadow: var(--a-ombre-1);
}

/* Encadré « sombre » pour les blocs d'appel à l'action à fort contraste */
.a_surface_encre {
	background: radial-gradient(120% 140% at 0% 0%, #17402C 0%, var(--a-encre) 60%);
	color: #fff;
	border-radius: var(--a-rayon);
}
.a_surface_encre h1, .a_surface_encre h2, .a_surface_encre h3,
.a_surface_encre h4, .a_surface_encre h5, .a_surface_encre h6 { color: #fff; }
.a_surface_encre p { color: rgba(255, 255, 255, .78); }

/* ── Effet de survol des cartes cliquables ───────────────────────────────── */
.a_lift { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.a_lift:hover { transform: translateY(-3px); box-shadow: var(--a-ombre-2); }
@media (prefers-reduced-motion: reduce) {
	.a_lift, .a_lift:hover { transition: none; transform: none; }
}

/* ── Vignette carrée des cartes de liste (compteur de jours, PDF…) ───────── */
.a_vignette {
	width: 100px;
	height: 100px;
	flex-shrink: 0;
	border-radius: .75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.1;
}
@media (max-width: 575.98px) {
	/* Sur mobile la vignette devient une barre horizontale compacte */
	.a_vignette {
		width: 100%;
		height: auto;
		flex-direction: row;
		gap: .5rem;
		padding: .5rem .75rem;
	}
	.a_vignette h2, .a_vignette h3 { font-size: 1.35rem; }
}

/* ── Barre de filtres collante ───────────────────────────────────────────── */
/* Le template fixe `top: 50px` en style inline, ce qui convient à la navbar
   de bureau mais fait passer la barre sous la navbar mobile, plus haute.
   Cette règle recale la barre sur la hauteur réelle de la navbar. */
.style_barre_filtres {
	top: var(--a-navbar) !important;
}

/* Dégagement sous la navbar fixe, pour les pages dont le premier bloc n'est
   pas un héro pleine largeur. Le `pt-4` de la barre de filtres s'ajoute à
   cette valeur : on le retranche pour retrouver l'espacement du template. */
.a_sous_navbar {
	padding-top: max(0px, calc(var(--a-navbar) - 1rem)) !important;
}

/* Variante pour les pages dont le premier élément est du contenu et non une
   barre collante (l'annuaire) : le dégagement doit être complet. */
.a_sous_navbar_plein {
	padding-top: calc(var(--a-navbar) + .75rem) !important;
}

/* ── Pilules de filtre ───────────────────────────────────────────────────── */
.a_chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .85rem;
	border-radius: .6rem;
	border: 1px solid var(--a-ligne);
	background: #fff;
	color: var(--a-encre);
	font-size: .8rem;
	white-space: nowrap;
	text-decoration: none;
	transition: background .16s, color .16s, border-color .16s;
}
.a_chip:hover { background: #F3F5F4; color: var(--a-encre); }
.a_chip.active { background: var(--a-encre); border-color: var(--a-encre); color: #fff; }
.a_chip .a_chip_n { opacity: .6; font-size: .72rem; }
.a_chip.active .a_chip_n { opacity: .75; }

/* ── Chiffres clés ───────────────────────────────────────────────────────── */
.a_stat {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: 1.25rem 1.35rem;
	border-radius: 1rem;
	border: 1px solid var(--a-ligne);
	background: #fff;
	height: 100%;
}
.a_stat_valeur {
	font-family: Montserrat-Bold, sans-serif;
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
	line-height: 1;
	color: var(--a-vert-fonce);
	margin: 0;
}
.a_stat_label { font-size: .8rem; color: #6c757d; margin: 0; }

/* ── Fil d'Ariane ────────────────────────────────────────────────────────── */
.a_fil { font-size: .78rem; }
.a_fil a { color: inherit; text-decoration: none; opacity: .75; }
.a_fil a:hover { opacity: 1; text-decoration: underline; }
.a_fil .a_fil_sep { opacity: .45; margin-inline: .45rem; }

/* ── En-tête de page de détail ───────────────────────────────────────────── */
.a_hero {
	position: relative;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
/* Voile dégradé : lisibilité du texte quelle que soit la photo */
.a_hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 27, 19, .45) 0%, rgba(12, 27, 19, .82) 68%, rgba(12, 27, 19, .95) 100%);
}
.a_hero_vert::after {
	background: linear-gradient(180deg, rgba(38, 202, 125, .82) 0%, rgba(12, 98, 59, .94) 75%);
}
/* Le contenu du héro passe sous la navbar fixe : on garantit le dégagement.
   Les 3rem retranchés tiennent compte du `py-5` déjà porté par le bloc
   interne, sans doubler l'espacement sur grand écran. */
.a_hero_contenu {
	position: relative;
	z-index: 2;
	padding-top: max(0px, calc(var(--a-navbar) - 3rem));
}
.a_hero_titre {
	font-family: Montserrat-Bold, sans-serif;
	color: #fff;
	line-height: 1.08;
	font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem);
	margin: 0;
	text-wrap: balance;
}

/* Bande tricolore (drapeau du Bénin) en bas du héro */
.a_bande_tricolore { display: flex; height: 4px; }
.a_bande_tricolore span { flex: 1; }
.a_bande_tricolore span:nth-child(1) { background: var(--a-vert-fonce); }
.a_bande_tricolore span:nth-child(2) { background: var(--a-jaune); }
.a_bande_tricolore span:nth-child(3) { background: var(--a-rouge); }

/* ── Carte « méta » de détail qui chevauche le héro ──────────────────────── */
.a_carte_flottante { margin-top: -3.5rem; position: relative; z-index: 3; }
@media (max-width: 767.98px) { .a_carte_flottante { margin-top: -2rem; } }

/* ── Typographie du contenu riche (saisi dans le back-office) ────────────── */
.a_prose { font-size: 1.02rem; line-height: 1.75; color: #232B26; }
.a_prose > *:first-child { margin-top: 0; }
.a_prose > *:last-child { margin-bottom: 0; }
.a_prose p { margin-bottom: 1.15rem; line-height: 1.75; }
/* Les contenus du back-office emploient indifféremment h2…h5 : tous sont
   traités comme des titres de section, avec une taille homogène. */
.a_prose h2, .a_prose h3, .a_prose h4, .a_prose h5, .a_prose h6 {
	margin-top: 2.4rem;
	margin-bottom: .85rem;
	scroll-margin-top: calc(var(--a-navbar) + 1.5rem);
}
.a_prose h2 { font-size: 1.45rem; }
.a_prose h3 { font-size: 1.25rem; }
.a_prose h4 { font-size: 1.12rem; }
.a_prose h5 { font-size: 1.12rem; }
.a_prose h6 { font-size: 1rem; }
/* Filet vert court au-dessus des titres de section (classe posée par
   anatt-premium.js sur le niveau de titre le plus haut de l'article). */
.a_prose h2::before,
.a_prose .a_titre_section::before {
	content: '';
	display: block;
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: var(--a-vert);
	margin-bottom: .7rem;
}
.a_prose ul, .a_prose ol { margin-bottom: 1.15rem; padding-left: 1.15rem; }
.a_prose li { margin-bottom: .45rem; }
.a_prose ul { list-style: none; padding-left: 0; }
.a_prose ul > li {
	position: relative;
	padding-left: 1.5rem;
}
.a_prose ul > li::before {
	content: '';
	position: absolute;
	left: .25rem;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--a-vert);
}
.a_prose ol { padding-left: 1.25rem; }
.a_prose ol > li::marker { color: var(--a-vert); font-family: Montserrat-SemiBold, sans-serif; }
.a_prose a { color: var(--a-vert-fonce); text-underline-offset: .18em; }
.a_prose blockquote {
	margin: 1.6rem 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--a-vert);
	background: rgba(25, 135, 84, .05);
	border-radius: 0 .75rem .75rem 0;
	font-style: italic;
}
.a_prose blockquote p:last-child { margin-bottom: 0; }
.a_prose img { max-width: 100%; height: auto; border-radius: 1rem; margin-block: 1rem; }
.a_prose hr { margin-block: 2rem; opacity: .12; }
/* Les tableaux ne doivent jamais provoquer de défilement horizontal de page */
.a_prose .a_table_scroll, .a_prose table { display: block; max-width: 100%; overflow-x: auto; }
.a_prose table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.a_prose th, .a_prose td { border: 1px solid var(--a-ligne); padding: .55rem .75rem; text-align: left; }
.a_prose th { background: #F7F9F8; font-family: Montserrat-SemiBold, sans-serif; }

/* ── Sommaire latéral ────────────────────────────────────────────────────── */
.a_sommaire { position: sticky; top: calc(var(--a-navbar) + 1.25rem); }
/* Cible uniquement les liens que le JS injecte dans #a-sommaire : une règle
   sur `.a_sommaire a` déborderait sur les boutons des blocs voisins et leur
   imposerait sa couleur grise et sa bordure. */
#a-sommaire a {
	display: block;
	padding: .35rem 0 .35rem .8rem;
	border-left: 2px solid var(--a-ligne);
	color: #6c757d;
	font-size: .82rem;
	text-decoration: none;
	line-height: 1.35;
	transition: color .16s, border-color .16s;
}
#a-sommaire a:hover { color: var(--a-encre); }
#a-sommaire a.active {
	color: var(--a-vert-fonce);
	border-left-color: var(--a-vert);
	font-family: Montserrat-SemiBold, sans-serif;
}
#a-sommaire a.a_niveau_3 { padding-left: 1.5rem; }

/* ── Barre de progression de lecture ─────────────────────────────────────── */
.a_progression {
	position: fixed;
	top: var(--a-navbar);
	left: 0;
	height: 3px;
	width: 0;
	background: linear-gradient(90deg, var(--a-vert) 0%, var(--a-jaune) 100%);
	z-index: 1030;
	transition: width .1s linear;
}

/* ── Frise d'étapes (procédures des modules) ─────────────────────────────── */
.a_etapes { list-style: none; margin: 0; padding: 0; position: relative; }
.a_etapes > li { position: relative; padding-left: 3.25rem; padding-bottom: 2rem; }
.a_etapes > li:last-child { padding-bottom: 0; }
/* Trait vertical reliant les pastilles */
.a_etapes > li::before {
	content: '';
	position: absolute;
	left: 1.1rem;
	top: 2.25rem;
	bottom: 0;
	width: 2px;
	background: var(--a-ligne);
}
.a_etapes > li:last-child::before { display: none; }
.a_etape_num {
	position: absolute;
	left: 0;
	top: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: .7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(25, 135, 84, .10);
	color: var(--a-vert-fonce);
	font-family: Montserrat-Bold, sans-serif;
	font-size: .85rem;
}

/* ── Apparition douce au défilement ──────────────────────────────────────── */
/* L'état masqué n'est appliqué QUE si le JS a pu poser la classe `a_js` sur
   <html> : sans JavaScript (ou si le script échoue), le contenu reste visible.
   Un contenu invisible par défaut serait un contenu perdu. */
.a_js .a_reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.a_js .a_reveal.a_visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.a_js .a_reveal { opacity: 1; transform: none; transition: none; }
}
/* À l'impression, tout doit apparaître */
@media print {
	.a_js .a_reveal { opacity: 1 !important; transform: none !important; }
	.a_progression, .a_sommaire { display: none !important; }
}

/* ── Ruban d'état (ouvert / clôturé) en coin de carte ────────────────────── */
.a_etat {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .72rem;
	padding: .2rem .6rem;
	border-radius: 999px;
	font-family: Montserrat-SemiBold, sans-serif;
}
.a_etat::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
/* Pulsation discrète sur les états « ouverts » */
.a_etat_actif::before { animation: a_pulse 2s ease-in-out infinite; }
@keyframes a_pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .a_etat_actif::before { animation: none; } }

/* ── Aperçu PDF intégré ──────────────────────────────────────────────────── */
.a_pdf_cadre {
	width: 100%;
	height: 70vh;
	min-height: 420px;
	border: 0;
	border-radius: 1rem;
	background: #F7F9F8;
}
@media (max-width: 767.98px) { .a_pdf_cadre { height: 55vh; min-height: 320px; } }

/* ── Grille de modules ───────────────────────────────────────────────────── */
.a_module_media {
	position: relative;
	min-height: 220px;
	background-size: cover;
	background-position: center;
	border-radius: 1rem;
	overflow: hidden;
}
.a_module_media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 27, 19, .05) 0%, rgba(12, 27, 19, .72) 100%);
}
.a_module_media > * { position: relative; z-index: 2; }

/* Pastille sigle de plateforme (SIMVeB, SIGPCB, SYGFR…) */
.a_sigle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .3rem .7rem;
	border-radius: .55rem;
	background: rgba(255, 255, 255, .16);
	backdrop-filter: blur(6px);
	color: #fff;
	font-family: Montserrat-Bold, sans-serif;
	font-size: .78rem;
	letter-spacing: .04em;
}

/* ── Éditeur de contenu du back-office ───────────────────────────────────── */
/* La zone d'édition porte .a_prose : le rédacteur compose directement dans la
   typographie des pages de détail, sans surprise à la publication. */
.style_editeur:focus-within { border-color: var(--a-vert) !important; }
.style_editeur_zone {
	outline: 0;
	overflow-y: auto;
	max-height: 60vh;
	font-size: .95rem;
}
/* Repère visuel quand l'éditeur est vide */
.style_editeur_zone:empty::before,
.style_editeur_zone p:only-child:empty::before {
	content: attr(data-invite);
	color: #adb5bd;
}
/* Aperçu du filet vert que le site pose sur les titres de section */
.style_editeur_zone h5::before {
	content: '';
	display: block;
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: var(--a-vert);
	margin-bottom: .7rem;
}
.style_editeur_barre .btn { line-height: 1; }
.style_editeur_barre .btn:hover { background: #fff; }

/* ── Utilitaires ─────────────────────────────────────────────────────────── */
.a_ligne_2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a_ligne_3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.a_equilibre { text-wrap: balance; }

/* Aucun contenu ne doit déborder horizontalement, sur aucun écran */
html, body { overflow-x: hidden; }

/* ── Pied de page sombre ─────────────────────────────────────────────────────
   Le champ newsletter est en .bg-transparent sur fond .bg-dark : sans cette
   règle, Bootstrap y écrit le texte saisi en gris anthracite, illisible.
   Seule la couleur est reprise du conteneur — la maquette n'est pas touchée. */
footer.bg-dark #newsletter {
	color: inherit;
	border-color: rgba(255, 255, 255, .25);
}
footer.bg-dark #newsletter::placeholder { color: rgba(255, 255, 255, .55); }
footer.bg-dark #newsletter:focus {
	background-color: transparent;
	color: inherit;
	border-color: rgba(255, 255, 255, .5);
	box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .1);
}