/*
Theme Name: MDCAA
Theme URI: https://www.mdcaa06.fr
Author: AFG Autisme - APREH
Description: Thème accessible pour la MDCAA (Mission Départementale Communication Alternative et Améliorée des Alpes-Maritimes). Conçu pour une navigation fluide par les personnes en situation de handicap (contraste, typographie lisible, repères clairs).
Version: 2.6.3
License: GPL-2.0-or-later
Text Domain: afg-caa-theme
*/

/* =====================================================
   Variables de couleurs (identité AFG CAA)
   ===================================================== */
:root {
	--afg-bleu: #1f6f92;
	--afg-bleu-fonce: #123f56;
	--afg-bleu-clair: #3a9bbd;
	--afg-jaune: #f4c95d;
	--afg-jaune-fonce: #e3b241;
	--afg-corail: #e8836b;
	--afg-texte: #22323c;
	--afg-fond: #ffffff;
	--afg-fond-doux: #f3f8fb;
	--afg-bordure: #dbe8ef;
	--afg-rayon: 16px;
	--afg-rayon-lg: 24px;
	/* Rythme d'espacement homogène (finition premium) */
	--afg-espace-section: clamp(3.5rem, 6vw, 6rem);
	--afg-espace-bloc: clamp(2rem, 4vw, 3.25rem);
	/* Largeur de lecture confortable */
	--afg-mesure: 65ch;
	/* Ombres douces cohérentes */
	--afg-ombre-douce: 0 6px 24px rgba(18, 63, 86, 0.08);
	--afg-ombre-carte: 0 14px 40px rgba(18, 63, 86, 0.14);
}

/* =====================================================
   Base lisible
   ===================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: #2c3138;
	background: var(--afg-fond);
}

h1, h2, h3 { color: var(--afg-bleu-fonce); line-height: 1.25; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.7rem; }

a { color: var(--afg-bleu); }
a:hover, a:focus { color: var(--afg-bleu-clair); }

img { max-width: 100%; height: auto; }

/* Focus visible renforcé (essentiel pour l'accessibilité clavier) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--afg-jaune);
	outline-offset: 2px;
}

/* Lien d'évitement vers le contenu (lecteurs d'écran / clavier) */
.afg-skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	z-index: 100000;
	padding: 0.8rem 1.2rem;
	background: var(--afg-bleu-fonce);
	color: #fff;
	border-radius: 0 0 8px 0;
}
.afg-skip-link:focus {
	left: 0;
}

/* =====================================================
   Mise en page
   ===================================================== */
/* Les animations d'apparition décalent latéralement certains blocs
   (.mdcaa-slide-gauche / .mdcaa-slide-droite) avant qu'ils ne deviennent
   visibles. Ce décalage temporaire élargissait la page et repoussait les
   boutons flottants (ancrés à right:0) hors de l'écran sur mobile.
   « clip » rogne ce dépassement sans créer de zone de défilement, et
   n'affecte ni l'en-tête collant ni les boutons flottants, qui sont en
   dehors de <main>. */
#afg-main {
	overflow-x: clip;
}

.afg-contenu {
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	padding: var(--afg-espace-section) 2rem;
}
@media (max-width: 640px) {
	.afg-contenu { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* En-tête */
.afg-entete {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(31,111,146,0.12);
    box-shadow: 0 2px 16px rgba(18,63,86,0.08);
    transition: box-shadow 0.3s ease, background 0.3s ease;
}
.afg-entete.scrolled {
    box-shadow: 0 4px 24px rgba(18,63,86,0.15);
    background: rgba(255,255,255,1);
}
.afg-entete-inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0.7rem 2rem;
}
.afg-logo {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
}
.afg-logo-mark {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.afg-logo:hover .afg-logo-mark,
.afg-logo:focus-visible .afg-logo-mark {
	transform: rotate(-8deg) scale(1.08);
}
.afg-logo-texte {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.afg-logo-nom {
	font-size: 1.35rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: 0.01em;
}
.afg-logo-nom strong { color: var(--afg-jaune); font-weight: 800; }
.afg-logo-sous {
	font-size: 0.68rem;
	color: #cfe3f0;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Navigation principale — desktop. Le menu compte une douzaine d'entrées :
   il tient sur une ligne sur les grands écrans et passe sur une deuxième
   ligne, aligné à droite, plutôt que de déborder sur le logo. */
.afg-nav { flex: 1 1 auto; display: flex; justify-content: flex-end; min-width: 0; }
.afg-nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	row-gap: 0.15rem;
	column-gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}
.afg-nav a {
	display: block;
	padding: 0.45rem 0.5rem;
	color: var(--afg-bleu-fonce);
	text-decoration: none;
	border-radius: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}
.afg-nav a:hover,
.afg-nav a:focus,
.afg-nav a.active,
.afg-nav .current-menu-item > a {
	background: rgba(31,111,146,0.10);
	color: var(--afg-bleu);
}

/* =====================================================
   Sous-menus déroulants
   ===================================================== */
.afg-nav .menu-item-has-children { position: relative; }

/* Petit chevron (bouton injecté par le JS) à droite de l'entrée parente */
.afg-nav .menu-item-has-children > a { padding-right: 1.75rem; }
.afg-sous-toggle {
	position: absolute;
	right: 0.1rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 6px;
	color: var(--afg-bleu-fonce);
	cursor: pointer;
	transition: background 0.2s ease;
}
.afg-sous-toggle:hover,
.afg-sous-toggle:focus-visible { background: rgba(31,111,146,0.12); }
.afg-sous-toggle svg { width: 12px; height: 12px; transition: transform 0.25s ease; }
.afg-nav .menu-item-has-children.afg-sous--ouvert > .afg-sous-toggle svg { transform: rotate(180deg); }

/* Le sous-menu est masqué par défaut ; visible quand ouvert (base mobile) */
.afg-nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
}
.afg-nav .menu-item-has-children.afg-sous--ouvert > .sub-menu { display: block; }

/* Ordinateur : vrai menu déroulant en survol / focus */
@media (min-width: 901px) {
	.afg-nav .sub-menu {
		display: block;
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		min-width: 230px;
		padding: 0.4rem;
		background: #fff;
		border: 1px solid rgba(31,111,146,0.12);
		border-radius: 14px;
		box-shadow: 0 14px 34px rgba(18,63,86,0.18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
		z-index: 300;
	}
	/* petite zone tampon pour ne pas perdre le survol entre l'entrée et le menu */
	.afg-nav .menu-item-has-children > .sub-menu::before {
		content: "";
		position: absolute;
		top: -10px;
		left: 0;
		right: 0;
		height: 10px;
	}
	.afg-nav .menu-item-has-children:hover > .sub-menu,
	.afg-nav .menu-item-has-children:focus-within > .sub-menu,
	.afg-nav .menu-item-has-children.afg-sous--ouvert > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	.afg-nav .menu-item-has-children:hover > .afg-sous-toggle svg,
	.afg-nav .menu-item-has-children:focus-within > .afg-sous-toggle svg { transform: rotate(180deg); }
	.afg-nav .sub-menu li { width: 100%; }
	.afg-nav .sub-menu a {
		display: block;
		width: 100%;
		padding: 0.55rem 0.75rem;
		border-radius: 8px;
		font-size: 0.85rem;
		white-space: nowrap;
	}
	.afg-nav .sub-menu a:hover,
	.afg-nav .sub-menu a:focus {
		background: rgba(31,111,146,0.10);
		color: var(--afg-bleu);
	}
}

/* Bouton hamburger — masqué sur desktop */
.afg-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	background: none;
	border: 1px solid rgba(31,111,146,0.25);
	border-radius: 8px;
	cursor: pointer;
	padding: 9px 10px;
	flex-shrink: 0;
}
.afg-nav-toggle-barre {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--afg-bleu-fonce);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.afg-nav-toggle[aria-expanded="true"] .afg-nav-toggle-barre:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.afg-nav-toggle[aria-expanded="true"] .afg-nav-toggle-barre:nth-child(2) {
	opacity: 0;
}
.afg-nav-toggle[aria-expanded="true"] .afg-nav-toggle-barre:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Bandeau d'accueil */
.afg-hero {
	position: relative;
	overflow: visible;
	min-height: 95vh;
	display: flex;
	align-items: center;
	background-color: var(--afg-bleu-fonce);
	background-image:
	    linear-gradient(135deg, rgba(13,51,71,0.82) 0%, rgba(31,111,146,0.72) 100%),
	    url('assets/hero-mdcaa.png');
	background-size: cover;
	background-position: center;
	color: #fff;
	text-align: center;
	padding: 3.5rem 1.2rem;
}
.afg-hero-contenu {
	max-width: 760px;
}
.afg-hero h1 {
    color: #fff;
    margin-top: 0;
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
}
/* Le surtitre est aussi un <p> : on l'exclut, sinon cette règle plus
   spécifique écrase sa taille et ses marges (surtitre 1.2rem sur l'accueil
   contre 0.85rem sur les pages internes). */
.afg-hero p:not(.afg-hero-surtitre) { font-size: 1.2rem; max-width: 700px; margin: 1rem auto; }
.afg-bouton {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.95rem 2rem;
	background: var(--afg-jaune);
	color: var(--afg-bleu-fonce);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	border-radius: 50px;
}
.afg-bouton:hover, .afg-bouton:focus { background: var(--afg-jaune-fonce); color: var(--afg-bleu-fonce); }

/* Articles / pages */
.mdcaa-article-prose { max-width: 780px; margin: 0 auto; }
.afg-lien-retour {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--afg-bleu);
	font-weight: 700;
	text-decoration: none;
	font-size: 0.95rem;
}
.afg-lien-retour:hover, .afg-lien-retour:focus { text-decoration: underline; }

/* Pied de page — voir « FOOTER PREMIUM » en fin de fichier (grille 3 colonnes).
   L'ancienne version centrée a été retirée pour éviter tout conflit de mise en page. */

/* =====================================================
   Hero en deux colonnes (texte + illustration)
   ===================================================== */
.afg-hero-inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: 2rem;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1.2rem;
	text-align: left;
}
/* Même motif de surtitre que .mdcaa-page-surtitre sur les pages internes. */
.afg-hero-surtitre {
	margin: 0 0 0.9rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--afg-jaune);
	text-transform: uppercase;
	font-size: 0.85rem;
	text-shadow: 0 1px 6px rgba(10, 35, 70, 0.55);
}
.afg-hero-sous { margin: 1rem 0 0; }
.afg-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 1.5rem;
}
.afg-hero-svg {
	width: 100%;
	height: auto;
	max-width: 460px;
	filter: drop-shadow(0 10px 24px rgba(0,0,0,0.25));
}
.afg-bouton-ligne {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
}
.afg-bouton-ligne:hover, .afg-bouton-ligne:focus {
	background: #fff;
	color: var(--afg-bleu-fonce);
}
/* Variante pour usage sur fond clair (sinon bouton blanc invisible) */
.afg-bouton-ligne--clair {
	color: var(--afg-bleu-fonce);
	border-color: var(--afg-bleu-fonce);
}
.afg-bouton-ligne--clair:hover, .afg-bouton-ligne--clair:focus {
	background: var(--afg-bleu-fonce);
	color: #fff;
}

/* =====================================================
   Sections
   ===================================================== */
.afg-bande { background: var(--afg-fond-doux); }
.afg-section-tete { text-align: center; margin-bottom: 2rem; }
.afg-section-tete h2 {
	margin: 0 0 0.6rem;
	font-size: clamp(2rem, 4vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.12;
}
.afg-section-intro {
	max-width: 640px;
	margin: 0.75rem auto 3.5rem;
	font-size: 1.15rem;
	color: #6b7280;
	text-align: center;
	line-height: 1.75;
}
.afg-centre { text-align: center; margin-top: 2rem; }

/* Duo (Alternative / Améliorée) */
.afg-duo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-top: 1.5rem;
}
.afg-duo-carte {
	padding: 1.8rem;
	border-radius: var(--afg-rayon);
	background: var(--afg-fond-doux);
	border: 1px solid var(--afg-bordure);
}
.afg-duo-carte h3 { margin: 0.6rem 2rem 0.4rem 0; }

/* Grilles de cartes */
.afg-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.4rem;
	margin: 1.2rem 0 2rem;
}
.afg-groupe-titre {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 2rem 0 0.5rem;
	font-size: 1.35rem;
}

.afg-carte-picto,
.afg-carte-principe,
.afg-carte-benefice {
	padding: 1.6rem;
	border-radius: var(--afg-rayon);
	background: #fff;
	border: 1px solid var(--afg-bordure);
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.afg-carte-picto h4,
.afg-carte-principe h4,
.afg-carte-benefice h4 {
	margin: 0.6rem 2rem 0.5rem 0;
	font-size: 1.15rem;
	color: var(--afg-bleu-fonce);
}
.afg-carte-picto p,
.afg-carte-principe p,
.afg-carte-benefice p { margin: 0; color: #3a4b58; }

/* Pictogrammes */
/* Taille par défaut de toutes les icônes SVG du thème (remplacent les anciens emojis). */
.afg-theme-svg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.afg-picto { font-size: 1.5rem; display: inline-flex; color: var(--afg-bleu); vertical-align: -6px; }
.afg-picto .afg-theme-svg { width: 1.4rem; height: 1.4rem; }
.afg-picto-rond {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--afg-fond-doux);
	color: var(--afg-bleu);
	border: 2px solid var(--afg-bordure);
}
.afg-picto-rond .afg-theme-svg { width: 1.7rem; height: 1.7rem; }

/* Liste "pour qui" en pastilles */
.afg-liste-pastilles {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.8rem;
	padding: 0;
	margin: 0;
}
.afg-liste-pastilles li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.2rem;
	background: #fff;
	border: 1px solid var(--afg-bordure);
	border-radius: 999px;
	font-weight: 600;
}
.afg-liste-pastilles span { display: inline-flex; color: var(--afg-bleu); }
.afg-liste-pastilles span .afg-theme-svg { width: 1.3rem; height: 1.3rem; }

/* Appel à l'action final */
.afg-cta {
	background: linear-gradient(135deg, var(--afg-bleu-fonce) 0%, var(--afg-bleu) 100%);
	color: #fff;
	padding: 1rem 0 3rem;
}
.afg-cta h2 { color: #fff; }

/* =====================================================
   Ajustements pour le mode contraste élevé
   ===================================================== */
html.afg-contraste .afg-bande,
html.afg-contraste .afg-cta,
html.afg-contraste .afg-hero,
html.afg-contraste .afg-duo-carte,
html.afg-contraste .afg-carte-picto,
html.afg-contraste .afg-carte-principe,
html.afg-contraste .afg-carte-benefice,
html.afg-contraste .afg-liste-pastilles li,
html.afg-contraste .afg-picto-rond {
	background: #000 !important;
	color: #ff0 !important;
	border-color: #ff0 !important;
}
html.afg-contraste .afg-carte-picto h4,
html.afg-contraste .afg-carte-principe h4,
html.afg-contraste .afg-carte-benefice h4,
html.afg-contraste .afg-duo-carte h3,
html.afg-contraste .afg-section-intro,
html.afg-contraste .afg-carte-picto p,
html.afg-contraste .afg-carte-principe p,
html.afg-contraste .afg-carte-benefice p { color: #ff0 !important; }

/* Responsive */
@media (max-width: 860px) {
	.afg-hero-inner { grid-template-columns: 1fr; text-align: center; }
	.afg-hero-actions { justify-content: center; }
	.afg-hero-visuel { order: -1; }
	.afg-hero-svg { margin: 0 auto; max-width: 360px; }
}
@media (max-width: 720px) {
	h1 { font-size: 1.8rem; }
}

/* Menu hamburger : actif en-dessous de 900px */
@media (max-width: 900px) {
	.afg-entete-inner { padding: 0.6rem 1.2rem; }
	.afg-nav-toggle { display: flex; }

	/* Le nav se cache par défaut et apparaît au clic */
	.afg-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid rgba(31,111,146,0.12);
		box-shadow: 0 8px 24px rgba(18,63,86,0.12);
		z-index: 200;
		justify-content: flex-start;
	}
	.afg-nav.afg-nav--ouvert { display: block; }
	.afg-nav ul {
		flex-direction: column;
		flex-wrap: nowrap;
		padding: 0.5rem 0;
	}
	.afg-nav a {
		padding: 0.75rem 1.5rem;
		font-size: 0.95rem;
		border-radius: 0;
		border-bottom: 1px solid rgba(31,111,146,0.06);
	}
	.afg-nav ul li:last-child a { border-bottom: none; }

	/* Sous-menus en accordéon sur mobile */
	.afg-nav .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.afg-nav .menu-item-has-children > a { flex: 1 1 auto; padding-right: 1.5rem; }
	.afg-sous-toggle {
		position: static;
		transform: none;
		width: 44px;
		height: 44px;
		margin-right: 0.6rem;
		flex: 0 0 auto;
	}
	.afg-nav .menu-item-has-children.afg-sous--ouvert > .afg-sous-toggle svg { transform: rotate(180deg); }
	.afg-nav .sub-menu {
		flex: 1 1 100%;
		background: rgba(31,111,146,0.05);
	}
	.afg-nav .sub-menu a {
		padding-left: 2.75rem;
		font-size: 0.9rem;
		border-bottom: 1px solid rgba(31,111,146,0.05);
	}
}

/* =====================================================
   Animations d'apparition au défilement
   ===================================================== */
.afg-reveal {
	opacity: 0;
	transform: translateY(38px) scale(0.97);
	transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
	transition-delay: var(--afg-delay, 0ms);
	will-change: opacity, transform;
}
.afg-reveal.afg-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.afg-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.afg-logo-mark, .afg-caa-toggle { transition: none !important; animation: none !important; }
}

/* =====================================================
   Animations au survol des cartes
   ===================================================== */
.afg-carte-picto,
.afg-carte-principe,
.afg-carte-benefice,
.afg-duo-carte,
.afg-contact-carte {
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.afg-carte-picto:hover,
.afg-carte-principe:hover,
.afg-carte-benefice:hover,
.afg-duo-carte:hover,
.afg-contact-carte:hover,
.afg-carte-picto:focus-within,
.afg-carte-principe:focus-within,
.afg-carte-benefice:focus-within {
	transform: translateY(-11px) scale(1.015);
	box-shadow: 0 22px 44px rgba(18, 63, 86, 0.24);
	border-color: var(--afg-bleu-clair);
}
.afg-picto-rond { transition: transform 0.3s ease-out, background 0.25s ease; transform-origin: center center; will-change: transform; }
.afg-carte-picto:hover .afg-picto-rond,
.afg-duo-carte:hover .afg-picto-rond {
	/* Agrandissement doux et centré, sans rotation ni rebond : l'icône reste
	   bien dans son rond à toutes les largeurs. */
	transform: scale(1.1);
	background: var(--afg-jaune);
	border-color: var(--afg-jaune);
}
.afg-carte-principe .afg-picto,
.afg-carte-benefice .afg-picto { display: inline-block; transform-origin: center center; transition: transform 0.3s ease-out; }
.afg-carte-principe:hover .afg-picto,
.afg-carte-benefice:hover h4 .afg-picto {
	/* Effet discret et centré : léger zoom, pas de rotation, courbe douce.
	   Le picto ne déborde plus de la carte. */
	transform: scale(1.12);
}

.afg-liste-pastilles li { transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; }
.afg-liste-pastilles li:hover {
	transform: translateY(-5px) scale(1.07);
	background: var(--afg-bleu);
	color: #fff;
	box-shadow: 0 10px 20px rgba(18,63,86,0.2);
}

/* Boutons : rebond marqué au survol, retour au clic */
.afg-bouton { transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.afg-bouton:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(244,201,93,0.45); }
.afg-bouton:active { transform: translateY(0) scale(0.98); }

/* Crédit auteur dans le pied de page */
.afg-credit { margin-top: 1.2rem; font-size: 0.85rem; color: #a9c6d8; }
.afg-credit a { color: var(--afg-jaune); font-weight: 700; text-decoration: none; }
.afg-credit a:hover, .afg-credit a:focus { text-decoration: underline; }

/* =====================================================
   Boutons "Lire ce texte" (lecture vocale par encadré)
   ===================================================== */
.afg-bloc-lisible { position: relative; }

/* Bouton lecture vocale — icône SVG dessinée (plus d'emoji), style discret et premium */
.afg-lire-bloc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    background: rgba(31,111,146,0.14);
    color: var(--afg-bleu);
    border: 1px solid rgba(31,111,146,0.32);
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
    margin-top: 0.5rem;
    vertical-align: middle;
}
.afg-lire-icone { width: 15px; height: 15px; }
.afg-lire-bloc:hover,
.afg-lire-bloc:focus-visible {
    opacity: 1;
    background: var(--afg-bleu);
    color: #fff;
    border-color: var(--afg-bleu);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31,111,146,0.28);
}
.afg-lire-bloc:focus-visible { outline: 2px solid var(--afg-jaune); outline-offset: 2px; }
.afg-lire-bloc.afg-lit {
    background: #e0554e;
    color: #fff;
    border-color: #e0554e;
    opacity: 1;
}
.afg-lire-bloc.afg-lit .afg-lire-onde { animation: afg-onde-pulse 1s ease-in-out infinite; }
.afg-lire-bloc.afg-lit .afg-lire-onde-2 { animation-delay: 0.15s; }
.afg-lire-bloc[data-inline] {
    position: static;
    width: auto;
    height: auto;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    margin-bottom: 1rem;
    opacity: 1;
    font-weight: 600;
    font-size: 0.85rem;
}
.afg-lire-bloc[data-inline] .afg-lire-icone { width: 14px; height: 14px; }

/* Boutons accolés à des titres : plus petits et plus discrets pour ne pas concurrencer le texte */
.mdcaa-contenu-prose h2 .afg-lire-bloc,
.mdcaa-contenu-prose h3 .afg-lire-bloc,
.afg-titre-section .afg-lire-bloc {
    width: 26px;
    height: 26px;
    margin: 0 0 0 0.65rem;
    opacity: 0.9;
}
.mdcaa-contenu-prose h2 .afg-lire-icone,
.mdcaa-contenu-prose h3 .afg-lire-icone { width: 13px; height: 13px; }
.afg-bloc-en-lecture {
    outline: 3px solid var(--afg-jaune);
    outline-offset: 6px;
    border-radius: var(--afg-rayon);
}

/* Dans les étapes — bouton EN DESSOUS du texte, pas à côté */
.mdcaa-etape-contenu {
    position: relative;
    padding: 2rem 2rem 1.5rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.mdcaa-etape-contenu .afg-lire-bloc {
    position: static !important;
    transform: none;
    display: block;
    margin-top: 0.8rem;
}

/* Dans les stats — bouton EN DESSOUS du chiffre, couleurs inversées (fond sombre) */
.mdcaa-stat {
    position: relative;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mdcaa-stat .afg-lire-bloc {
    position: static !important;
    transform: none;
    margin-top: 0.75rem;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.35);
}
.mdcaa-stat .afg-lire-bloc:hover,
.mdcaa-stat .afg-lire-bloc:focus-visible {
    background: rgba(255,255,255,0.28);
    color: #fff;
    border-color: rgba(255,255,255,0.6);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* Dans les piliers — bouton en bas de la carte */
.mdcaa-pilier {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.mdcaa-pilier .afg-lire-bloc {
    position: static !important;
    transform: none;
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Dans la prose des pages internes — bouton inline après le paragraphe */
.mdcaa-contenu-prose .afg-lire-bloc {
    position: static !important;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0.5rem;
    margin-bottom: 0.1rem;
}

/* Dans les cartes (duo, picto, principe, bénéfice, contact, mission) —
   bouton en coin haut-droit, jamais collé au texte du titre ou du paragraphe */
.afg-duo-carte .afg-lire-bloc,
.afg-carte-picto .afg-lire-bloc,
.afg-carte-principe .afg-lire-bloc,
.afg-carte-benefice .afg-lire-bloc,
.afg-contact-carte .afg-lire-bloc,
.mdcaa-mission-carte .afg-lire-bloc {
    position: absolute !important;
    top: 1.1rem;
    right: 1.1rem;
    margin: 0;
}
.afg-duo-carte,
.afg-carte-picto,
.afg-carte-principe,
.afg-carte-benefice,
.afg-contact-carte,
.mdcaa-mission-carte { position: relative; }

@keyframes afg-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(224,85,78,0.55); }
	70%  { box-shadow: 0 0 0 12px rgba(224,85,78,0); }
	100% { box-shadow: 0 0 0 0 rgba(224,85,78,0); }
}
.afg-lire-bloc.afg-lit { animation: afg-pulse 1.2s infinite; }

@keyframes afg-onde-pulse {
	0%, 100% { opacity: 0.5; }
	50%      { opacity: 1; }
}

/* =====================================================
   Page Contact
   ===================================================== */
.afg-contact-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.4rem;
	margin: 1.5rem 0 2.5rem;
}
.afg-contact-carte {
	display: block;
	padding: 1.6rem;
	border-radius: var(--afg-rayon);
	background: #fff;
	border: 1px solid var(--afg-bordure);
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	text-decoration: none;
	color: var(--afg-texte);
}
.afg-contact-carte .afg-picto-rond { margin-bottom: 0.6rem; }
.afg-contact-carte h3 { margin: 0.2rem 2rem 0.3rem 0; font-size: 1.15rem; }
.afg-contact-carte p { margin: 0; color: #3a4b58; }

.afg-motifs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
	margin: 1rem 0 2.5rem;
	list-style: none;
	padding: 0;
}
.afg-motif {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 1rem 1.2rem;
	background: var(--afg-fond-doux);
	border-radius: var(--afg-rayon);
	border: 1px solid var(--afg-bordure);
}
.afg-motif span { font-size: 1.5rem; line-height: 1; }

.afg-form {
	max-width: 640px;
	background: var(--afg-fond-doux);
	border: 1px solid var(--afg-bordure);
	border-radius: var(--afg-rayon);
	padding: 1.8rem;
}
.afg-form-champ { margin-bottom: 1.1rem; }
.afg-form label { display: block; font-weight: 700; margin-bottom: 0.4rem; color: var(--afg-bleu-fonce); }
.afg-form input,
.afg-form select,
.afg-form textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 2px solid var(--afg-bordure);
	border-radius: 10px;
	font-size: 1rem;
	font-family: inherit;
	background: #fff;
}
.afg-form input:focus,
.afg-form select:focus,
.afg-form textarea:focus {
	outline: none;
	border-color: var(--afg-bleu-clair);
	box-shadow: 0 0 0 3px rgba(12,122,181,0.18);
}
.afg-form textarea { min-height: 140px; resize: vertical; }
.afg-form button { border: none; cursor: pointer; }

html.afg-contraste .afg-contact-carte,
html.afg-contraste .afg-motif,
html.afg-contraste .afg-form,
html.afg-contraste .afg-form input,
html.afg-contraste .afg-form select,
html.afg-contraste .afg-form textarea {
	background: #000 !important;
	color: #ff0 !important;
	border-color: #ff0 !important;
}

/* =====================================================
   Grilles équilibrées (évite le « 3 + 1 » disgracieux)
   ===================================================== */
.afg-grille--3 { grid-template-columns: repeat(3, 1fr); }
.afg-grille--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) {
	.afg-grille--3,
	.afg-grille--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.afg-grille--3,
	.afg-grille--4 { grid-template-columns: 1fr; }
}

/* =====================================================
   Hero animé et vivant
   ===================================================== */
.afg-hero-inner { position: relative; z-index: 1; }

/* Formes floues qui flottent en fond */
.afg-hero::before,
.afg-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
	animation: afg-blob 16s ease-in-out infinite;
}
.afg-hero::before { width: 340px; height: 340px; top: -90px; left: -70px; }
.afg-hero::after { width: 280px; height: 280px; bottom: -110px; right: -50px; animation-delay: -8s; }
@keyframes afg-blob {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(34px, 26px) scale(1.18); }
}

/* Le visuel flotte doucement */
.afg-hero-svg { animation: afg-float 4.5s ease-in-out infinite; }
@keyframes afg-float {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-18px) rotate(-1.2deg); }
}

/* Éléments internes du dessin */
.afg-h-coeur {
	transform-box: fill-box;
	transform-origin: center;
	animation: afg-beat 1.8s ease-in-out infinite;
}
@keyframes afg-beat {
	0%, 100% { transform: scale(1); }
	15%      { transform: scale(1.22); }
	30%      { transform: scale(1); }
}
.afg-h-dot {
	transform-box: fill-box;
	transform-origin: center;
	animation: afg-dot 2.4s ease-in-out infinite;
}
@keyframes afg-dot {
	0%, 100% { transform: scale(0.7); opacity: 0.5; }
	50%      { transform: scale(1.1); opacity: 1; }
}
.afg-h-smiley {
	transform-box: fill-box;
	transform-origin: center;
	animation: afg-bob 4s ease-in-out infinite;
}
@keyframes afg-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-5px); }
}

/* Entrée en douceur du texte du hero au chargement */
.afg-hero-texte > * {
	opacity: 0;
	animation: afg-hero-in 0.7s ease forwards;
}
.afg-hero-surtitre { animation-delay: 0.05s; }
.afg-hero-texte h1 { animation-delay: 0.18s; }
.afg-hero-sous { animation-delay: 0.32s; }
.afg-hero-actions { animation-delay: 0.46s; }
@keyframes afg-hero-in {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.afg-hero::before, .afg-hero::after,
	.afg-hero-svg, .afg-h-coeur, .afg-h-dot, .afg-h-smiley { animation: none; }
	.afg-hero-texte > * { opacity: 1; animation: none; }
}

/* =====================================================
   Section Contact : mise en page en deux colonnes
   ===================================================== */
.afg-contact-layout {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 2.5rem;
	align-items: start;
}
.afg-contact-infos { display: flex; flex-direction: column; gap: 1rem; }
.afg-contact-ligne {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.2rem;
	background: #fff;
	border: 1px solid var(--afg-bordure);
	border-radius: var(--afg-rayon);
	text-decoration: none;
	color: var(--afg-texte);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.afg-contact-ligne:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(31, 111, 146, 0.14);
	border-color: var(--afg-bleu-clair);
}
.afg-contact-ligne .afg-picto-rond { width: 48px; height: 48px; flex: 0 0 auto; }
.afg-contact-ligne .afg-picto-rond .afg-theme-svg { width: 1.3rem; height: 1.3rem; }
.afg-contact-ligne strong { display: block; color: var(--afg-bleu-fonce); }
.afg-contact-ligne span.afg-c-detail { color: #3a4b58; font-size: 0.95rem; }

.afg-form-titre { margin: 0 0 1.2rem; }
.afg-form-rangee {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.afg-form-statut { margin-top: 1rem; font-weight: 600; }
.afg-form-statut.afg-ok { color: #1f7a52; }
.afg-form-statut.afg-err { color: #b3261e; }
.afg-hp { position: absolute !important; left: -9999px !important; }

@media (max-width: 860px) {
	.afg-contact-layout { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 600px) {
	.afg-form-rangee { grid-template-columns: 1fr; }
}

html.afg-contraste .afg-contact-ligne {
	background: #000 !important;
	color: #ff0 !important;
	border-color: #ff0 !important;
}

/* ===== MDCAA — Logo combiné dans le header (icône + texte MDCAA06) ===== */
.mdcaa-logo-lien {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	transition: opacity 0.2s ease;
}
.mdcaa-logo-lien:hover { opacity: 0.85; }
.mdcaa-logo-combine { height: 48px; width: auto; display: block; }
@media (max-width: 640px) {
	.mdcaa-logo-combine { height: 38px; }
}

/* ===== MDCAA — Mention "Une voix pour tous" (kicker) =====
   Bloc de pleine largeur CENTRÉ AU-DESSUS du titre. On force display:flex
   (et non inline-flex) : sans cela, le kicker et le <h2> — tous deux de type
   « inline » — se retrouvaient sur la même ligne, donc le surtitre s'affichait
   à côté du titre au lieu d'être au-dessus. */
.mdcaa-mention-voix {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.45rem;
	width: 100%;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #f4c95d;
	margin: 0 0 0.75rem;
}
.mdcaa-mention-voix .afg-theme-svg { width: 0.9rem; height: 0.9rem; }

/* ===== MDCAA — Grille 5 piliers ===== */
.afg-grille--5 {
	grid-template-columns: repeat(5, 1fr);
	gap: 1.2rem;
}
/* Palier intermédiaire à 3 colonnes (3+2) avant de passer à 2,
   pour éviter un saut brutal de 5 à 2 colonnes sur tablette. */
@media (max-width: 900px) {
	.afg-grille--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.afg-grille--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
	.afg-grille--5 { grid-template-columns: 1fr; }
}
/* Sur mobile (2 colonnes), le 5ᵉ pilier (seul sur sa ligne) s'étire sur
   toute la largeur plutôt que de rester collé à gauche. */
@media (max-width: 640px) and (min-width: 501px) {
	.afg-grille--5 > :last-child { grid-column: 1 / -1; }
}

.mdcaa-pilier {
	background: #ffffff;
	border-radius: 20px;
	padding: 3rem 2.5rem 3.5rem;
	text-align: center;
	box-shadow: 0 4px 24px rgba(0,0,0,0.07);
	border-top: 3px solid #3a9bbd;
	transition: transform 0.3s, box-shadow 0.3s;
}
.mdcaa-pilier:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 36px rgba(0,0,0,0.13);
}
.mdcaa-pilier-num {
	display: block;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: #3a9bbd;
	margin-bottom: 0.5rem;
}
.mdcaa-pilier-icone { display: block; margin-bottom: 0.5rem; color: var(--afg-bleu); transition: color 0.3s ease; }
.mdcaa-pilier-icone .afg-theme-svg { width: 2rem; height: 2rem; }
/* Icône jaune au survol (ou focus clavier) de la carte du pilier */
.mdcaa-pilier:hover .mdcaa-pilier-icone,
.mdcaa-pilier:focus-within .mdcaa-pilier-icone { color: var(--afg-jaune); }
.mdcaa-pilier h3 { font-size: 0.95rem; font-weight: 700; color: #123f56; margin: 0 0 0.5rem; }
.mdcaa-pilier p { font-size: 0.85rem; color: #4b5563; margin: 0; line-height: 1.5; }

/* ===== MDCAA — Qui sommes-nous ===== */
.mdcaa-missions-grille { margin-top: var(--afg-espace-bloc); }

.mdcaa-mission-carte {
	background: #fff;
	border-radius: 18px;
	padding: 2.5rem 2rem;
	text-align: center;
	border: 1px solid rgba(18,63,86,0.06);
	/* Le liseré bleu est fait en box-shadow (et non border-bottom) pour
	   épouser parfaitement l'arrondi des coins, sans effet de cran. */
	box-shadow: 0 6px 24px rgba(18,63,86,0.06), inset 0 -3px 0 0 var(--afg-bleu);
}
.mdcaa-mission-carte:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(18,63,86,0.12), inset 0 -3px 0 0 var(--afg-bleu);
}
.mdcaa-mission-icone { display: block; margin-bottom: 0.7rem; color: var(--afg-bleu); }
.mdcaa-mission-icone .afg-theme-svg { width: 2.2rem; height: 2.2rem; }
.mdcaa-mission-carte h3 { font-size: 1rem; font-weight: 700; color: #123f56; margin: 0 0 0.6rem; }
.mdcaa-mission-carte p { font-size: 0.9rem; color: #374151; margin: 0; line-height: 1.6; }

.mdcaa-porteurs {
	margin-top: 2.5rem;
	text-align: center;
	padding: 1.5rem;
	background: linear-gradient(135deg, #f0f7fa, #e8f4f8);
	border-radius: 16px;
}
.mdcaa-porteurs-intro { font-size: 0.9rem; color: #6b7280; margin-bottom: 0.8rem; }
.mdcaa-porteurs-logos { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.mdcaa-porteur-lien { text-decoration: none; }
.mdcaa-porteur-nom {
	font-size: 1.1rem;
	font-weight: 700;
	color: #1f6f92;
	padding: 0.4rem 1rem;
	border: 2px solid #3a9bbd;
	border-radius: 8px;
	display: inline-block;
	transition: background 0.2s, color 0.2s;
}
.mdcaa-porteur-nom:hover { background: #1f6f92; color: #fff; }
.mdcaa-porteurs-et { font-size: 1.2rem; color: #6b7280; font-weight: 300; }
.mdcaa-contact-ligne { font-size: 0.95rem; color: #374151; }
.mdcaa-contact-ligne .afg-theme-svg { width: 1rem; height: 1rem; vertical-align: -2px; color: var(--afg-bleu); margin-right: 0.15rem; }
.mdcaa-contact-ligne a { color: #1f6f92; font-weight: 600; text-decoration: none; }
.mdcaa-contact-ligne a:hover { text-decoration: underline; }
.mdcaa-financeur {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 auto 1rem;
	padding: 0.55rem 1rem;
	background: rgba(31,111,146,0.06);
	border: 1px solid rgba(31,111,146,0.15);
	border-radius: 999px;
	font-size: 0.85rem;
	color: #123f56;
	font-weight: 600;
	max-width: 100%;
}
.mdcaa-financeur .afg-theme-svg { width: 1.05rem; height: 1.05rem; color: var(--afg-bleu); flex-shrink: 0; }

/* ===== ANIMATIONS D'ENTRÉE AU SCROLL ===== */
.mdcaa-pilier,
.mdcaa-mission-carte,
.afg-duo-carte,
.afg-carte-picto,
.afg-carte-principe,
.afg-carte-benefice {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34,1.36,0.64,1);
}
.mdcaa-pilier.visible,
.mdcaa-mission-carte.visible,
.afg-duo-carte.visible,
.afg-carte-picto.visible,
.afg-carte-principe.visible,
.afg-carte-benefice.visible {
    opacity: 1;
    transform: none;
}

/* Délais en cascade pour les grilles */
.mdcaa-pilier:nth-child(1), .mdcaa-mission-carte:nth-child(1),
.afg-duo-carte:nth-child(1), .afg-carte-picto:nth-child(1),
.afg-carte-principe:nth-child(1), .afg-carte-benefice:nth-child(1) { transition-delay: 0s; }
.mdcaa-pilier:nth-child(2), .mdcaa-mission-carte:nth-child(2),
.afg-duo-carte:nth-child(2), .afg-carte-picto:nth-child(2),
.afg-carte-principe:nth-child(2), .afg-carte-benefice:nth-child(2) { transition-delay: 0.08s; }
.mdcaa-pilier:nth-child(3), .mdcaa-mission-carte:nth-child(3),
.afg-duo-carte:nth-child(3), .afg-carte-picto:nth-child(3),
.afg-carte-principe:nth-child(3), .afg-carte-benefice:nth-child(3) { transition-delay: 0.16s; }
.mdcaa-pilier:nth-child(4), .mdcaa-mission-carte:nth-child(4),
.afg-carte-picto:nth-child(4), .afg-carte-principe:nth-child(4),
.afg-carte-benefice:nth-child(4) { transition-delay: 0.24s; }
.mdcaa-pilier:nth-child(5), .afg-carte-picto:nth-child(5) { transition-delay: 0.32s; }
.mdcaa-pilier:nth-child(6), .afg-carte-picto:nth-child(6) { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
    .mdcaa-pilier, .mdcaa-mission-carte,
    .afg-duo-carte, .afg-carte-picto,
    .afg-carte-principe, .afg-carte-benefice {
        opacity: 1; transform: none; transition: none;
    }
    /* Les pictos internes ne doivent pas bouger non plus au survol. */
    .afg-picto-rond,
    .afg-carte-principe .afg-picto,
    .afg-carte-benefice .afg-picto,
    .afg-carte-picto:hover .afg-picto-rond,
    .afg-duo-carte:hover .afg-picto-rond,
    .afg-carte-principe:hover .afg-picto,
    .afg-carte-benefice:hover h4 .afg-picto {
        transform: none !important;
        transition: none !important;
    }
}

/* ===== HERO — animation d'entrée ===== */
.afg-hero-surtitre {
    animation: mdcaa-glisse-haut 0.7s cubic-bezier(0.34,1.36,0.64,1) both;
    animation-delay: 0.1s;
}
.afg-hero h1 {
    animation: mdcaa-glisse-haut 0.7s cubic-bezier(0.34,1.36,0.64,1) both;
    animation-delay: 0.22s;
}
.afg-hero-sous {
    animation: mdcaa-glisse-haut 0.7s cubic-bezier(0.34,1.36,0.64,1) both;
    animation-delay: 0.34s;
}
.afg-hero-actions {
    animation: mdcaa-glisse-haut 0.7s cubic-bezier(0.34,1.36,0.64,1) both;
    animation-delay: 0.46s;
}
@keyframes mdcaa-glisse-haut {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .afg-hero-surtitre, .afg-hero h1, .afg-hero-sous, .afg-hero-actions {
        animation: none;
    }
}

/* ===== PILIERS — icône animée au survol ===== */
.mdcaa-pilier-icone {
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), color 0.2s ease;
    display: block;
    margin-bottom: 0.5rem;
    color: var(--afg-bleu);
}
.mdcaa-pilier:hover .mdcaa-pilier-icone {
    transform: scale(1.35) rotate(-8deg);
    color: var(--afg-jaune);
}

/* Numéro de pilier avec animation de couleur */
.mdcaa-pilier-num {
    transition: color 0.2s ease;
}
.mdcaa-pilier:hover .mdcaa-pilier-num {
    color: #f4c95d;
}

/* ===== SECTION PILIERS — fond dégradé animé ===== */
.mdcaa-piliers {
    /* Couleur de repli indispensable : le texte de la section est blanc. Sans
       elle, si la photo d'arrière-plan ne se charge pas (réseau, blocage), on
       obtient du blanc sur blanc. */
    background-color: var(--afg-bleu-fonce);
    /* Fond dégradé de marque 100 % auto-hébergé (aucun appel externe / RGPD).
       Le dégradé animé remplace l'ancienne photo Unsplash. */
    background-image: linear-gradient(
        135deg,
        var(--afg-bleu-fonce) 0%,
        var(--afg-bleu) 50%,
        var(--afg-bleu-fonce) 100%
    );
    background-size: 200% 200%;
    background-position: center;
    animation: mdcaa-fond-anime 8s ease infinite;
    color: #ffffff;
}
/* L'effet "fixed" est mal supporté sur mobile (notamment iOS Safari) : on repasse
   en attachment normal pour garantir un fond sombre toujours bien affiché. */
@media (max-width: 860px) {
    .mdcaa-piliers { background-attachment: scroll; }
}
.mdcaa-piliers .afg-section-tete h2,
.mdcaa-piliers .afg-section-intro { color: #ffffff; }
.mdcaa-mention-voix { color: #f4c95d !important; }

@keyframes mdcaa-fond-anime {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.mdcaa-pilier {
    background: rgba(255,255,255,0.12);
    border-top-color: #f4c95d;
    color: #ffffff;
    backdrop-filter: blur(4px);
}
.mdcaa-pilier h3 { color: #ffffff; }
.mdcaa-pilier p { color: rgba(255,255,255,0.85); }
/* Numéro et icône : les teintes bleues par défaut sont illisibles sur le fond
   sombre de la section. */
.mdcaa-piliers .mdcaa-pilier-num { color: var(--afg-jaune); }
.mdcaa-piliers .mdcaa-pilier-icone { color: #d3e7f2; }
.mdcaa-piliers .afg-lire-bloc {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-color: rgba(255,255,255,0.35);
}
.mdcaa-piliers .afg-lire-bloc:hover,
.mdcaa-piliers .afg-lire-bloc:focus-visible {
    background: rgba(255,255,255,0.28);
    color: #fff;
    border-color: rgba(255,255,255,0.6);
}

/* ===== TITRES DE SECTION — ligne décorative ===== */
.afg-section-tete h2 {
    position: relative;
    display: inline-block;
}
.afg-section-tete h2::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3a9bbd, #f4c95d);
    border-radius: 3px;
    transition: transform 0.5s cubic-bezier(0.34,1.36,0.64,1);
}
.afg-section-tete.visible h2::after,
.afg-section-tete h2::after {
    transform: translateX(-50%) scaleX(1);
    transition-delay: 0.3s;
}

/* ===== BANNIÈRE COOKIES RGPD ===== */
.mdcaa-cookies {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999997;
    background: #0d3347;
    color: #ffffff;
    padding: 1rem 1.5rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.34,1.2,0.64,1);
}
.mdcaa-cookies--visible {
    transform: translateY(0);
}
.mdcaa-cookies-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: space-between;
}
.mdcaa-cookies-texte { margin: 0; font-size: 0.9rem; line-height: 1.5; flex: 1; min-width: 220px; }
.mdcaa-cookies-icone { display: inline-flex; vertical-align: -3px; margin-right: 0.3rem; color: var(--afg-jaune); }
.mdcaa-cookies-icone .afg-theme-svg { width: 1.05rem; height: 1.05rem; }
.mdcaa-cookies-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.mdcaa-cookies-btn {
    padding: 0.55rem 1.2rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.mdcaa-cookies-btn:hover { transform: scale(1.04); }
.mdcaa-cookies-texte a {
	color: #f4c95d;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mdcaa-cookies-texte a:hover { color: #fff; }

/* =====================================================
   Pages légales (mentions + confidentialité)
   ===================================================== */
.mdcaa-legal {
	max-width: 820px;
	margin: 0 auto;
}
.mdcaa-legal h2 {
	color: #1f6f92;
	border-bottom: 3px solid #f4c95d;
	padding-bottom: 0.4rem;
	margin-top: 2.4rem;
}
.mdcaa-legal h3 {
	color: #123f56;
	margin-top: 1.6rem;
}
.mdcaa-legal-liste {
	list-style: none;
	padding: 0;
	margin: 1rem 0 1.5rem;
	background: #f3f8fb;
	border: 1px solid #dbe8ef;
	border-radius: 16px;
	padding: 1.2rem 1.4rem;
}
.mdcaa-legal-liste li {
	margin: 0 0 0.65rem;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid #dbe8ef;
}
.mdcaa-legal-liste li:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
.mdcaa-legal-manquant {
	color: #8a6d3b;
	font-style: italic;
	background: rgba(244, 201, 93, 0.25);
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
}

/* ===== STATS CHIFFRES CLÉS ===== */
.mdcaa-stats { background: linear-gradient(135deg, #0d3347, #1f6f92); color: #fff; padding: var(--afg-espace-section) 0; }
.mdcaa-stats .afg-contenu { max-width: 1400px; }
.mdcaa-stats-grille {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 1rem 0;
}
@media (min-width: 1000px) { .mdcaa-stats-grille { gap: 3rem; } }
@media (max-width: 600px) { .mdcaa-stats-grille { grid-template-columns: repeat(2, 1fr); } }
.mdcaa-stat { text-align: center; padding: 3rem 2rem 2.5rem; }
.mdcaa-stat-chiffre {
    display: block;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 900;
    color: #f4c95d;
    line-height: 1;
    margin-bottom: 0.5rem;
    animation: mdcaa-chiffre-pulse 3s ease-in-out infinite;
}
.mdcaa-stat:nth-child(2) .mdcaa-stat-chiffre { animation-delay: 0.4s; }
.mdcaa-stat:nth-child(3) .mdcaa-stat-chiffre { animation-delay: 0.8s; }
.mdcaa-stat:nth-child(4) .mdcaa-stat-chiffre { animation-delay: 1.2s; }
@keyframes mdcaa-chiffre-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.06); }
}
.mdcaa-stat-label { font-size: 0.88rem; opacity: 0.9; line-height: 1.4; }

/* ===== ANIMATION SLOGAN PAR MOTS ===== */
@keyframes mdcaa-mot-apparait {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}
.mdcaa-mot {
    display: inline-block;
    opacity: 0;
    animation: mdcaa-mot-apparait 0.6s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
    .mdcaa-mot { opacity: 1; animation: none; }
}

/* ===== CITATION ===== */
.mdcaa-citation { background: #f0f7fa; position: relative; }
.mdcaa-blockquote {
    max-width: 700px;
    margin: 0 auto;
    padding: 3.5rem 4rem;
    border-left: 4px solid #3a9bbd;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(18,63,86,0.10);
}
.mdcaa-blockquote p {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-style: italic;
    color: #1f6f92;
    font-weight: 600;
    margin: 0 0 0.8rem;
    line-height: 1.8;
}
.mdcaa-blockquote footer { font-size: 0.85rem; color: #6b7280; }

/* ===== ÉTAPES "COMMENT ÇA FONCTIONNE" ===== */
.mdcaa-etapes {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 2rem;
    position: relative;
}
.mdcaa-etapes::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #3a9bbd, #6b4fa0);
}
@media (max-width: 600px) { .mdcaa-etapes::before { left: 20px; } }
.mdcaa-etape {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.2rem 1.2rem 1.2rem 0;
    margin-bottom: 2rem;
    position: relative;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34,1.36,0.64,1);
}
.mdcaa-etape.visible { opacity: 1; transform: none; }
.mdcaa-etape:nth-child(1) { transition-delay: 0s; }
.mdcaa-etape:nth-child(2) { transition-delay: 0.12s; }
.mdcaa-etape:nth-child(3) { transition-delay: 0.24s; }
.mdcaa-etape:nth-child(4) { transition-delay: 0.36s; }
.mdcaa-etape-num {
    flex-shrink: 0;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3a9bbd, #1f6f92);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(18,63,86,0.25);
    position: relative;
    z-index: 1;
}
@media (max-width: 600px) { .mdcaa-etape-num { width: 42px; height: 42px; font-size: 1.1rem; } }
.mdcaa-etape-contenu h3 { font-size: 1.05rem; font-weight: 700; color: #123f56; margin: 0.2rem 0 0.4rem; }
.mdcaa-etape-contenu p { font-size: 0.92rem; color: #374151; margin: 0; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
    .mdcaa-stat-chiffre { animation: none; }
    .mdcaa-etape { opacity: 1; transform: none; transition: none; }
}

/* ===== HEADER BLANC — navigation ===== */
/* La navigation est définie une seule fois plus haut (voir « .afg-nav a »).
   Header blanc → texte bleu foncé, survol/actif sur fond bleu très léger. */

/* ===== TÂCHE 3C — Qui sommes-nous : image d'ambiance ===== */
.mdcaa-qs-image { margin: 1.5rem 0 2rem; border-radius: 20px; overflow: hidden; max-height: 320px; }
.mdcaa-qs-img { width: 100%; height: 320px; object-fit: cover; display: block;
    transition: transform 0.6s ease; }
.mdcaa-qs-image:hover .mdcaa-qs-img { transform: scale(1.03); }

/* ===== TÂCHE 3D — Comment ça fonctionne : image illustrative ===== */
.mdcaa-comment-image { margin: 1.5rem 0; border-radius: 20px; overflow: hidden; max-height: 260px; }
.mdcaa-comment-img { width: 100%; height: 260px; object-fit: cover; display: block;
    transition: transform 0.6s ease; }
.mdcaa-comment-image:hover .mdcaa-comment-img { transform: scale(1.03); }

/* ===== SECTION DONS ===== */
.mdcaa-dons { background: linear-gradient(135deg, #123f56 0%, #1f6f92 100%); color: #fff; padding: 4rem 1rem; }
.mdcaa-dons-icone { display: block; margin-bottom: 0.8rem; color: var(--afg-jaune); animation: mdcaa-chiffre-pulse 2s ease-in-out infinite; }
.mdcaa-dons-icone .afg-theme-svg { width: 3rem; height: 3rem; }
.mdcaa-dons h2 { color: #fff; margin: 0 0 0.8rem; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.mdcaa-dons-texte { font-size: 1.05rem; opacity: 0.9; max-width: 600px; margin: 0 auto 2rem; line-height: 1.6; }
.mdcaa-dons-actions { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.mdcaa-dons-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: #f4c95d !important;
    color: #0d3347 !important;
    font-size: 1.1rem;
    padding: 0.9rem 2.5rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 18px rgba(244,201,93,0.4);
}
.mdcaa-dons-btn .afg-theme-svg { width: 1.1rem; height: 1.1rem; }
.afg-btn .afg-theme-svg { width: 1.05rem; height: 1.05rem; }
.mdcaa-dons-btn:hover { transform: scale(1.05); box-shadow: 0 6px 24px rgba(244,201,93,0.6); }
.mdcaa-dons-note { font-size: 0.82rem; opacity: 0.7; margin: 0; font-style: italic; }

/* ===== ÉQUIPE — ROUE / ORGANIGRAMME ANIMÉ AU SCROLL ===== */
.mdcaa-equipe {
    padding: var(--afg-espace-section) 1rem;
    max-width: 1280px;
    container-type: inline-size;
    container-name: equipe;
}

/* --- Carte membre (apparence commune roue + grille) ---
   Les portraits sont des PNG DÉTOURÉS (fond transparent) : on ne met donc
   NI cadre plein, NI rectangle blanc, NI box-shadow rectangulaire. Le sujet
   « flotte » avec une ombre portée drop-shadow() qui épouse son contour,
   comme les autres illustrations détourées du site (voir .mdcaa-media-transparent).
   Tailles ~1,5× par rapport à la première version, pour mieux lire les visages. */
.mdcaa-roue-carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.35rem;
    background: transparent;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.mdcaa-membre-avatar {
    /* Zone d'accueil du portrait détouré : légère pastille de couleur de
       charte derrière le sujet pour l'ancrer dans la roue, sans le rogner. */
    width: 177px;
    height: 198px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    max-width: 100%;
}
.mdcaa-membre-avatar::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 144px;
    height: 144px;
    border-radius: 50%;
    background: var(--afg-fond-doux);
    background: color-mix(in srgb, var(--halo, var(--afg-bleu)) 16%, var(--afg-fond-doux));
    z-index: 0;
}
.mdcaa-membre-photo {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    /* Ombre portée qui suit le canal alpha (pas de rectangle). */
    filter: drop-shadow(0 12px 18px rgba(18,63,86,0.22));
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.mdcaa-roue-carte:hover .mdcaa-membre-photo,
.mdcaa-roue-carte:focus-within .mdcaa-membre-photo { transform: translateY(-4px) scale(1.04); }
.mdcaa-membre-info { text-align: center; max-width: 100%; }
.mdcaa-membre-prenom {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--afg-bleu-fonce);
    margin: 0.25rem 0 0.12rem;
    line-height: 1.25;
    overflow-wrap: break-word;
}
.mdcaa-membre-role {
    font-size: 0.88rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.35;
}
.mdcaa-equipe-note { font-size: 0.78rem; color: #6b7280; margin-top: 1rem; font-style: italic; }

/* --- Disposition par défaut = GRILLE (fallback sans JS, mobile, mouvement réduit) --- */
.mdcaa-roue { position: relative; }
.mdcaa-roue-plateau {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 1.6rem 1rem;
    max-width: 1080px;
    margin: 1.5rem auto 0;
}
.mdcaa-roue-moyeu { display: none; } /* moyeu central : uniquement en mode roue */

/* --- Mode ROUE (activé par le JS : html.js, desktop, mouvement autorisé) --- */
.mdcaa-roue--active {
    --roue-carte: 220px;
    /* Marge verticale un peu plus grande : les cartes (photo + nom + poste)
       sont plus hautes que larges, il faut de la place en haut et en bas. */
    --roue-marge: 72px;
    --roue-rayon: clamp(240px, 30vw, 375px);
    width: calc(2 * var(--roue-rayon) + var(--roue-carte) + var(--roue-marge));
    height: calc(2 * var(--roue-rayon) + var(--roue-carte) + var(--roue-marge));
    max-width: 100%;
    margin: 2rem auto 0;
}
@supports (width: 1cqi) {
    .mdcaa-roue--active {
        --roue-rayon: min(375px, max(240px, calc((100cqi - var(--roue-carte) - var(--roue-marge)) / 2)));
    }
}
.mdcaa-roue--active .mdcaa-roue-plateau {
    display: block;
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    transform: rotate(var(--roue-angle, 0deg));
    will-change: transform;
}
.mdcaa-roue--active .mdcaa-roue-membre {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--roue-carte);
    transform:
        translate(-50%, -50%)
        rotate(var(--i-angle, 0deg))
        translateY(calc(-1 * var(--roue-rayon)))
        rotate(calc(-1 * var(--i-angle, 0deg)));
}
/* Contre-rotation : les cartes restent toujours à l'endroit et lisibles. */
.mdcaa-roue--active .mdcaa-roue-carte {
    transform: rotate(calc(-1 * var(--roue-angle, 0deg)));
}
/* Moyeu central : logo combiné (image 3:1), sans cadre ni pastille.
   Largeur explicite pour éviter que le flex + height:100% n’écrase l’image à 0. */
.mdcaa-roue--active .mdcaa-roue-moyeu {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(280px, calc(var(--roue-rayon) * 0.72));
    height: auto;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    z-index: 2;
    box-sizing: border-box;
    pointer-events: none;
}
.mdcaa-roue--active .mdcaa-roue-moyeu .mdcaa-roue-moyeu-logo {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: contain;
    object-position: center;
}
.mdcaa-roue-moyeu-txt { display: none; }

/* Commandes du carrousel : masquées par défaut (desktop / sans JS / roue active). */
.mdcaa-roue-commandes { display: none; }
.mdcaa-roue-btn {
    position: absolute;
    top: 7.5rem;
    z-index: 4;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 2px solid var(--afg-fond);
    border-radius: 50%;
    background: var(--afg-bleu-fonce);
    color: var(--afg-fond);
    box-shadow: 0 6px 18px rgba(18, 63, 86, 0.35);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.mdcaa-roue-btn--prev { left: 0.15rem; }
.mdcaa-roue-btn--next { right: 0.15rem; }
.mdcaa-roue-btn .afg-theme-svg {
    width: 1.45rem;
    height: 1.45rem;
    display: block;
}
.mdcaa-roue-btn:hover,
.mdcaa-roue-btn:focus-visible {
    background: var(--afg-bleu);
    transform: scale(1.06);
}
.mdcaa-roue-btn:focus-visible {
    outline: 3px solid var(--afg-jaune);
    outline-offset: 3px;
}
.mdcaa-roue-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.15rem;
    margin: 0.35rem 0 0;
    padding: 0 0.5rem;
}
.mdcaa-roue-point {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.mdcaa-roue-point::after {
    content: "";
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: var(--afg-bordure);
    box-shadow: inset 0 0 0 1px rgba(18, 63, 86, 0.12);
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.mdcaa-roue-point[aria-current="true"]::after {
    background: var(--afg-bleu);
    transform: scale(1.35);
    box-shadow: none;
}
.mdcaa-roue-point:focus-visible {
    outline: 3px solid var(--afg-jaune);
    outline-offset: 0;
    border-radius: 50%;
}

/* Grille mobile / tablette : fallback sans JS (et mouvement réduit sur grand écran). */
@media (max-width: 879px) {
    .mdcaa-roue-plateau {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 0.8rem;
        max-width: 520px;
        width: 100%;
        margin-inline: auto;
    }
    .mdcaa-membre-avatar {
        width: min(168px, 100%);
        height: 188px;
    }
    .mdcaa-membre-avatar::before {
        width: 128px;
        height: 128px;
    }
    .mdcaa-membre-prenom { font-size: 1rem; }
    .mdcaa-membre-role { font-size: 0.82rem; }
}
@media (max-width: 420px) {
    .mdcaa-roue-plateau {
        gap: 1.2rem 0.55rem;
        max-width: 100%;
    }
    .mdcaa-membre-avatar {
        width: min(160px, 100%);
        height: 180px;
    }
    .mdcaa-membre-avatar::before {
        width: 120px;
        height: 120px;
    }
    .mdcaa-membre-prenom { font-size: 0.95rem; }
    .mdcaa-membre-role { font-size: 0.78rem; }
}

/* --- Carrousel mobile (html.js, écran trop étroit pour la roue) ---
   Une slide = un membre, grande photo, swipe natif + scroll-snap.
   Le track défile ; la page ne déborde pas. */
@media (max-width: 879px) {
    html.js .mdcaa-roue:not(.mdcaa-roue--active) {
        width: 100%;
        max-width: 100%;
        margin: 1.25rem auto 0;
        overflow-x: clip;
        overflow-y: visible;
    }
    html.js .mdcaa-roue:not(.mdcaa-roue--active) .mdcaa-roue-plateau {
        display: flex;
        flex-flow: row nowrap;
        gap: 0;
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0.35rem 0 0.5rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        min-width: 0;
    }
    html.js .mdcaa-roue:not(.mdcaa-roue--active) .mdcaa-roue-plateau::-webkit-scrollbar {
        display: none;
    }
    html.js .mdcaa-roue:not(.mdcaa-roue--active) .mdcaa-roue-membre {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
    html.js .mdcaa-roue:not(.mdcaa-roue--active) .mdcaa-roue-carte {
        padding: 0.5rem 3.1rem 0.15rem;
        gap: 0.8rem;
    }
    html.js .mdcaa-roue:not(.mdcaa-roue--active) .mdcaa-membre-avatar {
        width: min(280px, 70vw);
        height: min(318px, 80vw);
    }
    html.js .mdcaa-roue:not(.mdcaa-roue--active) .mdcaa-membre-avatar::before {
        width: min(220px, 56vw);
        height: min(220px, 56vw);
        bottom: 12px;
    }
    html.js .mdcaa-roue:not(.mdcaa-roue--active) .mdcaa-membre-prenom {
        font-size: clamp(1.12rem, 4.6vw, 1.35rem);
    }
    html.js .mdcaa-roue:not(.mdcaa-roue--active) .mdcaa-membre-role {
        font-size: clamp(0.92rem, 3.6vw, 1.05rem);
        color: var(--afg-bleu);
    }
    html.js .mdcaa-roue:not(.mdcaa-roue--active) .mdcaa-roue-commandes {
        display: block;
    }
    /* Flèches recentrées verticalement sur la photo (l'avatar fait ~80vw de
       haut en mode carrousel : on vise son milieu). */
    html.js .mdcaa-roue:not(.mdcaa-roue--active) .mdcaa-roue-btn {
        top: min(9rem, 40vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mdcaa-roue-carte { transition: none; }
    .mdcaa-roue-btn,
    .mdcaa-roue-point::after { transition: none; }
    html.js .mdcaa-roue:not(.mdcaa-roue--active) .mdcaa-roue-plateau {
        scroll-behavior: auto;
    }
}

/* ===== HERO SOUS-PAGES — remplacé par le bloc MISSION 1 ci-dessous ===== */
/* Contenu des sous-pages (conservé pour compatibilité) */
.afg-page-contenu {
    max-width: 820px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    line-height: 1.8;
    font-size: 1.05rem;
    color: #1f2937;
}
.afg-page-contenu h2 { color: #1f6f92; margin-top: 2.5rem; }
.afg-page-contenu h3 { color: #123f56; margin-top: 1.8rem; }
.afg-page-contenu img { border-radius: 12px; max-width: 100%; margin: 1.5rem 0; }
.afg-page-contenu ul, .afg-page-contenu ol { padding-left: 1.5rem; }
.afg-page-contenu li { margin-bottom: 0.5rem; }

/* =====================================================
   Page Carte des Partenaires
   ===================================================== */
.afg-section { padding: var(--afg-espace-section) 0; }
.mdcaa-carte-section { padding-top: 3rem; }
.afg-section--clair { background: #f6f9fc; }
#mdcaa-carte {
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    margin: 2rem 0;
}
.afg-section > .afg-contenu > p:first-of-type {
    font-size: 1.15rem;
    color: #6b7280;
    max-width: 640px;
    margin: 0 auto 4rem;
    text-align: center;
    line-height: 1.75;
}
.afg-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 2rem;
    background: var(--afg-bleu);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    letter-spacing: 0.01em;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.afg-btn:hover { background: var(--afg-bleu-clair); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,111,146,0.35); }
.afg-titre-section {
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 800;
    color: var(--afg-bleu-fonce);
    margin-bottom: 0.75rem;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.mdcaa-consentement-box {
    max-width: 680px;
    margin: 0 auto;
    background: linear-gradient(135deg, #eef4fb 0%, #f0f9ff 100%);
    border: 1px solid #cce0f5;
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(18,63,86,0.08);
}
.mdcaa-consentement-box h2 {
    font-size: 1.6rem;
    margin: 0 0 1rem;
    color: var(--afg-bleu);
}
.mdcaa-consentement-box p { color: #374151; margin-bottom: 1.2rem; }

.mdcaa-carte-legende { color: #6b7280; font-size: 0.95rem; margin-bottom: 1rem; }

.mdcaa-annuaire-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.mdcaa-filtre {
    padding: 0.5rem 1.2rem;
    border: 2px solid #e0e7ef;
    border-radius: 50px;
    background: #fff;
    color: var(--afg-bleu-fonce);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}
.mdcaa-filtre:hover {
    background: var(--afg-bleu);
    color: #fff;
    border-color: var(--afg-bleu);
}
.mdcaa-filtre.actif {
    background: var(--afg-bleu);
    color: #fff;
    border-color: var(--afg-bleu);
}

.mdcaa-annuaire-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.mdcaa-annuaire-carte {
    background: #fff;
    border: 1px solid rgba(18,63,86,0.06);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 6px 24px rgba(18,63,86,0.06);
    position: relative;
    padding-top: 3rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mdcaa-annuaire-carte:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(18,63,86,0.12);
}
.mdcaa-annuaire-carte h3 { font-size: 1rem; font-weight: 700; color: var(--afg-bleu-fonce); margin: 0 0 0.4rem; }
.mdcaa-annuaire-carte p { font-size: 0.88rem; color: #6b7280; margin: 0.2rem 0; }
.mdcaa-annuaire-carte a { color: var(--afg-bleu); font-size: 0.88rem; }
.mdcaa-type-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--afg-fond-doux);
    color: var(--afg-bleu);
    margin-bottom: 0.6rem;
}
@media (max-width: 600px) {
    .mdcaa-annuaire-grille { grid-template-columns: 1fr; }
}
.mdcaa-mention-legale {
    margin-top: 2rem;
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
    border-top: 1px solid #e8edf2;
    padding-top: 1.5rem;
}

/* =====================================================
   Responsive premium — espacement mobile
   ===================================================== */
@media (max-width: 720px) {
    .mdcaa-blockquote { padding: 2rem 1.5rem; }
    .mdcaa-etape-contenu { padding: 1.4rem 3.5rem 1.4rem 1.2rem; }
}

/* =====================================================
   PAGES INTERNES — Hero pleine largeur, fond dégradé de marque
   (100 % auto-hébergé, aucune photo externe / RGPD)
   ===================================================== */
.mdcaa-page-hero {
    /* Dégradé bleu de la charte + deux halos discrets (blanc + jaune) pour un
       rendu premium sans dépendance externe. Le texte du bandeau reste blanc,
       le contraste est garanti sur ce fond sombre. */
    background-color: var(--afg-bleu-fonce);
    background-image:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.10) 0, rgba(255, 255, 255, 0) 42%),
        radial-gradient(circle at 84% 12%, rgba(244, 201, 93, 0.16) 0, rgba(244, 201, 93, 0) 40%),
        linear-gradient(135deg, var(--afg-bleu-fonce) 0%, var(--afg-bleu) 62%, var(--afg-bleu-clair) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 8rem 0 6rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* Même motif de surtitre que le hero d'accueil et la page contact
   (.afg-hero-surtitre) : petites capitales jaunes au-dessus du titre,
   sans pastille. L'ombre portée garantit la lisibilité sur la photo. */
.mdcaa-page-surtitre {
    display: block;
    background: none;
    border: 0;
    padding: 0;
    color: var(--afg-jaune);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 0.9rem;
    text-shadow: 0 1px 6px rgba(10, 35, 70, 0.55);
}
/* Sous 380px, l'interlettrage large ferait passer le surtitre sur deux
   lignes : on le resserre juste ce qu'il faut. */
@media (max-width: 380px) {
    .afg-hero-surtitre,
    .mdcaa-page-surtitre {
        letter-spacing: 0.07em;
        font-size: 0.8rem;
    }
}
.mdcaa-page-titre {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin-bottom: 1.2rem;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}
.mdcaa-page-intro {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: rgba(255,255,255,0.88);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.75;
}

/* ===== PAGES INTERNES — Layout avec illustration ===== */
.mdcaa-page-corps {
    padding: var(--afg-espace-section) 0;
}
.mdcaa-page-layout-illus {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 5rem;
    align-items: start;
}
@media (max-width: 900px) {
    .mdcaa-page-layout-illus {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .mdcaa-page-illus { order: -1; }
}
.mdcaa-page-illus {
    position: sticky;
    top: 120px;
}
.mdcaa-page-illus-img {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.16);
    display: block;
}
.mdcaa-page-illus-badge {
    background: var(--afg-bleu);
    color: #fff;
    text-align: center;
    padding: 0.8rem 1.2rem;
    border-radius: 0 0 16px 16px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ===== CTA bas de page ===== */
.mdcaa-page-cta {
    padding: 5rem 0;
}

/* ===== PROSE — contenu des pages internes ===== */
.mdcaa-contenu-prose {
    max-width: 780px;
}
.mdcaa-page-layout-illus .mdcaa-contenu-prose {
    max-width: none;
}
.mdcaa-contenu-prose h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    color: var(--afg-bleu);
    margin-top: 3.5rem;
    margin-bottom: 0.8rem;
    letter-spacing: -0.02em;
    padding-top: 1rem;
    border-top: 2px solid #f0f4f8;
}
.mdcaa-contenu-prose h2:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}
.mdcaa-contenu-prose h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #222;
    margin-top: 2.2rem;
    margin-bottom: 0.6rem;
}
.mdcaa-contenu-prose p {
    font-size: 1.075rem;
    line-height: 1.85;
    color: #3a3a3a;
    margin-bottom: 1.3rem;
}
.mdcaa-contenu-prose ul,
.mdcaa-contenu-prose ol {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}
.mdcaa-contenu-prose li {
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 0.5rem;
    color: #3a3a3a;
}
.mdcaa-contenu-prose li::marker {
    color: var(--afg-bleu);
}
.mdcaa-contenu-prose strong {
    color: #1a1a1a;
    font-weight: 700;
}
.mdcaa-contenu-prose a {
    color: var(--afg-bleu);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mdcaa-contenu-prose blockquote {
    border-left: 4px solid var(--afg-jaune);
    padding: 1.2rem 1.8rem;
    background: #f8f9fa;
    border-radius: 0 16px 16px 0;
    font-style: italic;
    margin: 2.5rem 0;
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444;
}

/* =====================================================
   Page "Idées reçues" — grille de cartes (au lieu d'une
   simple suite de titres/paragraphes façon traitement de texte)
   ===================================================== */
.mdcaa-idees-intro {
    text-align: center;
    margin: 0 auto 3rem;
}
.mdcaa-idees-intro p { font-size: 1.15rem; color: #4b5563; }
.mdcaa-idees-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}
@media (max-width: 780px) {
    .mdcaa-idees-grille { grid-template-columns: 1fr; }
}
.mdcaa-idee-carte {
    position: relative;
    background: #fff;
    border-radius: var(--afg-rayon);
    padding: 2rem 2rem 1.6rem;
    border: 1px solid var(--afg-bordure);
    box-shadow: 0 4px 20px rgba(18,63,86,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mdcaa-idee-carte:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(18,63,86,0.13);
}
.mdcaa-idee-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(232,131,107,0.12);
    /* Le corail de la charte est trop clair pour du texte : version foncée
       réservée aux petits libellés, sur fond clair. */
    color: #a33f26;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.mdcaa-idee-badge .afg-theme-svg { width: 0.95rem; height: 0.95rem; }
.mdcaa-idee-question {
    font-size: 1.2rem;
    font-weight: 700;
    font-style: italic;
    color: var(--afg-bleu-fonce);
    margin: 0 0 0.8rem;
    padding-right: 2.5rem; /* laisse la place au bouton de lecture, en haut à droite */
    line-height: 1.4;
}
.mdcaa-idee-reponse p {
    font-size: 1rem;
    line-height: 1.7;
    color: #3a4b58;
    margin: 0;
}
.mdcaa-idee-reponse strong { color: var(--afg-bleu); }
/* Bouton de lecture vocale : coin haut-droit de la carte, jamais collé au texte */
.mdcaa-idee-carte .afg-lire-bloc {
    position: absolute !important;
    top: 1.4rem;
    right: 1.4rem;
    margin: 0;
}

/* =====================================================
   MISSION 2 — Section Contact (page d'accueil)
   ===================================================== */
.mdcaa-contact-grille {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 4rem;
    align-items: start;
    margin-top: 3.5rem;
}
@media (max-width: 860px) {
    .mdcaa-contact-grille { grid-template-columns: 1fr; gap: 2.5rem; }
}
.mdcaa-contact-raisons h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
    color: #333;
}
.mdcaa-raisons-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.mdcaa-raison-carte {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.2rem 0.8rem;
    border: 2px solid rgba(18,63,86,0.08);
    border-radius: 18px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
    background: #fff;
    box-shadow: 0 6px 24px rgba(18,63,86,0.06);
    font-size: 0.9rem;
    font-weight: 500;
}
.mdcaa-raison-carte input { display: none; }
.mdcaa-raison-carte:hover { border-color: var(--afg-bleu); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(18,63,86,0.12); }
.mdcaa-raison-carte:has(input:checked) {
    border-color: var(--afg-bleu);
    background: #eef4fb;
}
.mdcaa-raison-icone { display: inline-flex; color: var(--afg-bleu); }
.mdcaa-raison-icone .afg-theme-svg { width: 1.5rem; height: 1.5rem; }

/* Formulaire de contact */
.mdcaa-form { display: flex; flex-direction: column; gap: 1.2rem; }
.mdcaa-form-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 540px) { .mdcaa-form-ligne { grid-template-columns: 1fr; } }
.mdcaa-form-champ { display: flex; flex-direction: column; gap: 0.4rem; }
.mdcaa-form-champ label { font-size: 0.9rem; font-weight: 600; color: #444; }
.mdcaa-form-champ input,
.mdcaa-form-champ textarea {
    padding: 0.85rem 1.1rem;
    border: 2px solid #e0e7ef;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
    resize: vertical;
}
.mdcaa-form-champ input:focus,
.mdcaa-form-champ textarea:focus {
    outline: none;
    border-color: var(--afg-bleu);
    box-shadow: 0 0 0 4px rgba(30,90,150,0.1);
}

/* Infos de contact (bas de section) */
.mdcaa-contact-infos {
    display: flex;
    gap: 2.5rem;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid #e8edf2;
    flex-wrap: wrap;
}
.mdcaa-contact-info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.mdcaa-contact-info-icone { display: inline-flex; color: var(--afg-bleu); }
.mdcaa-contact-info-icone .afg-theme-svg { width: 1.4rem; height: 1.4rem; }
.mdcaa-contact-info-item strong {
    display: block;
    font-weight: 700;
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.mdcaa-contact-info-item a,
.mdcaa-contact-info-item span { font-size: 1rem; color: var(--afg-bleu); }

/* =====================================================
   MISSION 3 — Animations d'entrée au scroll
   ===================================================== */

/* Slide depuis la gauche */
.mdcaa-slide-gauche {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.mdcaa-slide-gauche.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide depuis la droite */
.mdcaa-slide-droite {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.mdcaa-slide-droite.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Délais en cascade pour les grilles */
.mdcaa-pilier:nth-child(1), .mdcaa-raison-carte:nth-child(1) { transition-delay: 0.05s; }
.mdcaa-pilier:nth-child(2), .mdcaa-raison-carte:nth-child(2) { transition-delay: 0.1s; }
.mdcaa-pilier:nth-child(3), .mdcaa-raison-carte:nth-child(3) { transition-delay: 0.15s; }
.mdcaa-pilier:nth-child(4), .mdcaa-raison-carte:nth-child(4) { transition-delay: 0.2s; }
.mdcaa-pilier:nth-child(5), .mdcaa-raison-carte:nth-child(5) { transition-delay: 0.25s; }
.mdcaa-raison-carte:nth-child(6)                              { transition-delay: 0.3s; }

/* Séparateur de section "vague" */
.mdcaa-vague-bas {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  z-index: 2;
}
.mdcaa-vague-bas svg {
  display: block;
  width: 100%;
  height: 60px;
}

/* =====================================================
   MISSION 4 — Image "Qui sommes-nous"
   ===================================================== */
.mdcaa-quisommesnous-image { margin-top: 2rem; }
@media (max-width: 860px) {
  .mdcaa-quisommesnous-image { display: none; }
}

/* =====================================================
   MISSION 4 — Section Dons (layout 2 colonnes)
   ===================================================== */
.mdcaa-dons .afg-contenu {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
  text-align: left;
}
.mdcaa-dons-contenu { display: flex; flex-direction: column; align-items: flex-start; }
.mdcaa-dons-contenu .mdcaa-dons-texte { margin: 0 0 2rem; max-width: 100%; }
.mdcaa-dons-contenu .mdcaa-dons-actions { align-items: flex-start; }
@media (max-width: 860px) {
  .mdcaa-dons .afg-contenu {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .mdcaa-dons-contenu { align-items: center; }
  .mdcaa-dons-contenu .mdcaa-dons-actions { align-items: center; }
  .mdcaa-dons-image { order: -1; }
}

/* ===== FOOTER PREMIUM ===== */
.afg-pied {
  background: #0a1f3d;
  color: rgba(255,255,255,0.8);
  padding: 0;
}
.mdcaa-pied-grille {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 2rem 4rem;
}
@media (max-width: 900px) {
  .mdcaa-pied-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .mdcaa-pied-grille { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem; }
}
.mdcaa-pied-logo {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 0.8rem;
}
.mdcaa-pied-col p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  margin-bottom: 0.5rem;
}
.mdcaa-pied-col strong {
  display: block;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.mdcaa-pied-liens {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mdcaa-pied-liens li { margin-bottom: 0.5rem; }
.mdcaa-pied-liens a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s;
}
.mdcaa-pied-liens a:hover { color: #fff; }
.mdcaa-pied-col a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
}
.mdcaa-pied-col a:hover { color: #fff; }
.mdcaa-pied-bas {
  border-top: 1px solid rgba(255,255,255,0.08);
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mdcaa-pied-bas p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.72);
  margin: 0;
}
.mdcaa-pied-bas .afg-credit a { color: rgba(255,255,255,0.72); }

/* =====================================================
   SECTION « LA MDCAA06 ET VOUS » — Onglets et parcours
   ===================================================== */
.mdcaa-et-vous-onglets {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.mdcaa-onglet {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    border: 2px solid var(--afg-bordure);
    border-radius: var(--afg-rayon);
    background: #fff;
    color: var(--afg-bleu-fonce);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.mdcaa-onglet--actif,
.mdcaa-onglet:hover {
    border-color: var(--afg-bleu);
    background: var(--afg-bleu);
    color: #fff;
}
.mdcaa-parcours-intro {
    background: var(--afg-fond-doux);
    border-left: 4px solid var(--afg-bleu);
    border-radius: 0 var(--afg-rayon) var(--afg-rayon) 0;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    color: var(--afg-texte);
}
.mdcaa-etapes-parcours {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.mdcaa-etape-parcours {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: #fff;
    border-radius: var(--afg-rayon);
    border: 1px solid var(--afg-bordure);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}
.mdcaa-etape-parcours:hover { box-shadow: 0 6px 24px rgba(18,63,86,0.10); }
.mdcaa-etape-parcours-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 2.4rem;
    background: var(--afg-bleu);
    color: #fff;
    border-radius: 50%;
    font-weight: 900;
    font-size: 1rem;
    flex-shrink: 0;
}
.mdcaa-etape-parcours-corps h4 {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--afg-bleu-fonce);
}
.mdcaa-etape-parcours-corps p {
    margin: 0;
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.55;
}

/* Encadré droit légal */
.mdcaa-encadre-droit {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: linear-gradient(135deg, var(--afg-bleu-fonce) 0%, var(--afg-bleu) 100%);
    border-radius: var(--afg-rayon);
    padding: 1.5rem 2rem;
    color: #fff;
}
.mdcaa-encadre-droit-icone { font-size: 2rem; flex-shrink: 0; color: var(--afg-jaune); }
.mdcaa-encadre-droit strong { display: block; font-size: 1.05rem; font-weight: 800; margin-bottom: 0.4rem; color: var(--afg-jaune); }
.mdcaa-encadre-droit p { margin: 0; font-size: 0.9rem; opacity: 0.92; line-height: 1.55; }

@media (max-width: 640px) {
    .mdcaa-etape-parcours { flex-direction: column; }
    .mdcaa-encadre-droit { flex-direction: column; }
}

/* =====================================================
   Ajouts MDCAA (mise à jour 2.3.0)
   ===================================================== */

/* Variante « contour » du bouton principal .afg-btn */
.afg-btn--ligne {
    background: transparent;
    color: var(--afg-bleu);
    border: 2px solid var(--afg-bleu);
}
.afg-btn--ligne:hover {
    background: var(--afg-bleu);
    color: #fff;
}
.afg-btn--ligne .afg-theme-svg { color: currentColor; }

/* Qui sommes-nous : boutons vers les partenaires porteurs */
.mdcaa-porteurs-boutons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin: 0.4rem 0 1.2rem;
}

/* Bloc « Qu'est-ce que communiquer ? » dans la définition */
.mdcaa-communiquer {
    margin: 3rem auto 0;
    padding: 1.75rem 2rem;
    background: var(--afg-fond-doux);
    border-radius: var(--afg-rayon);
    border-left: 5px solid var(--afg-jaune);
}
.mdcaa-communiquer h3 {
    margin-top: 0;
    color: var(--afg-bleu-fonce);
}

/* Illustrations transparentes en showcase (définition, moyens, partenaire).
   Les PNG sont détourés : on ne met JAMAIS de cadre plein ni de box-shadow
   rectangulaire derrière — on utilise drop-shadow() qui épouse le sujet. */
.mdcaa-illustration {
    position: relative;
    margin: var(--afg-espace-bloc) auto;
    text-align: center;
    max-width: 720px;
}
/* Halo doux de la charte DERRIÈRE le sujet (jamais un cadre) */
.mdcaa-illustration::before {
    content: "";
    position: absolute;
    inset: 8% 12%;
    z-index: 0;
    background: radial-gradient(closest-side, rgba(58,155,189,0.16), rgba(58,155,189,0) 72%);
    filter: blur(6px);
    pointer-events: none;
}
.mdcaa-illustration img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 18px 30px rgba(18, 63, 86, 0.20));
}
/* Variantes de largeur pour certaines illustrations pleines de l'accueil */
.mdcaa-illustration--partenaire { max-width: 640px; }

/* Frise « La MDCAA06 et vous » — bandeau large transparent, sur fond clair */
.mdcaa-parcours-frise {
    margin: 0 auto var(--afg-espace-bloc);
    max-width: 1100px;
}
.mdcaa-parcours-frise img {
    display: block;
    width: 100%;
    height: auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 16px 34px rgba(18, 63, 86, 0.16));
}

/* Zone média douce pour les cartes-principes : l'image transparente s'y pose
   EN GRAND et sans rognage (object-fit: contain). C'est la zone (et non
   l'image) qui porte un léger dégradé de la charte. */
.mdcaa-carte-media {
    margin: -1.6rem -1.6rem 1.2rem;
    padding: 1.4rem 1.4rem 0;
    min-height: 168px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(160deg, rgba(58,155,189,0.14), rgba(244,201,93,0.10));
    border-radius: var(--afg-rayon) var(--afg-rayon) 0 0;
    overflow: visible;
}
.afg-carte-principe-illus,
.mdcaa-principe-carte .mdcaa-principe-illus {
    display: block;
    width: auto;
    max-width: 82%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
    background: transparent;
    border-radius: 0;
    filter: drop-shadow(0 10px 16px rgba(18, 63, 86, 0.20));
}

/* Cartes-principes page interne : zone média un peu plus haute + marges alignées
   sur le padding de la carte (2.25rem). */
.mdcaa-principe-carte--illus .mdcaa-carte-media {
    margin: -2.25rem -2.25rem 1.5rem;
    padding: 1.6rem 1.6rem 0;
    min-height: 184px;
    border-radius: 22px 22px 0 0;
}
.mdcaa-principe-carte .mdcaa-principe-num { z-index: 2; }
@media (max-width: 640px) {
    .mdcaa-carte-media { min-height: 150px; }
    .afg-carte-principe-illus,
    .mdcaa-principe-carte .mdcaa-principe-illus { max-height: 140px; }
}

/* Mascotte dans « La MDCAA06 et vous » */
.mdcaa-et-vous-tete { position: relative; }
.mdcaa-mascotte {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    margin: 0 auto 1rem;
    filter: drop-shadow(0 8px 18px rgba(18, 63, 86, 0.18));
}
@media (min-width: 900px) {
    .mdcaa-mascotte {
        position: absolute;
        top: -1rem;
        right: 0;
        max-width: 170px;
        margin: 0;
    }
}

/* Section « Soutenir la MDCAA » (référencement partenaire) */
.mdcaa-soutenir-carte {
    max-width: 760px;
    margin: 2rem auto 0;
    padding: 2.25rem 2.5rem;
    background: linear-gradient(135deg, #f0f7fa, #e8f4f8);
    border-radius: var(--afg-rayon);
    text-align: center;
}
.mdcaa-soutenir-icone {
    display: inline-flex;
    color: var(--afg-bleu);
    margin-bottom: 0.5rem;
}
.mdcaa-soutenir-icone .afg-theme-svg { width: 2.4rem; height: 2.4rem; }
.mdcaa-soutenir-carte > p {
    font-size: 1.075rem;
    color: #374151;
    line-height: 1.7;
    margin: 0 auto 1.25rem;
    max-width: 620px;
}
.mdcaa-soutenir-consentement {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    justify-content: center;
    text-align: left;
    max-width: 560px;
    margin: 0 auto 1.75rem;
    padding: 0.85rem 1.1rem;
    background: #fff;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #4b5563;
    font-style: italic;
}
.mdcaa-soutenir-consentement .afg-theme-svg {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
    color: var(--afg-bleu);
    margin-top: 0.15rem;
}
.mdcaa-soutenir-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
}
@media (max-width: 640px) {
    .mdcaa-soutenir-carte { padding: 1.75rem 1.25rem; }
    .mdcaa-soutenir-actions .afg-btn { width: 100%; justify-content: center; }
}

/* =====================================================
   PAGES INTERNES — Refonte moderne (blocs, cartes,
   pictogrammes SVG). Espacements généreux, largeur de
   lecture maîtrisée. Les animations d'apparition sont
   gérées via .afg-reveal (ajoutée par theme.js), donc
   sans JavaScript le contenu reste entièrement visible.
   ===================================================== */

/* ---- Chapô : introduction + illustration de la charte ---- */
.mdcaa-chapo-illus {
    display: grid;
    grid-template-columns: 1.25fr 0.85fr;
    gap: 3.5rem;
    align-items: center;
    margin-bottom: 4.5rem;
}
@media (max-width: 860px) {
    .mdcaa-chapo-illus { grid-template-columns: 1fr; gap: 2rem; }
    .mdcaa-chapo-figure { order: -1; }
}
.mdcaa-chapo-figure { margin: 0; }
.mdcaa-chapo-figure img,
.mdcaa-illus-solo img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 16px 32px rgba(18, 63, 86, 0.18));
}
.mdcaa-illus-solo {
    margin: 0 auto 3rem;
    max-width: 440px;
}

/* ---- Chapô texte (lead) ---- */
.mdcaa-page-chapo {
    max-width: 760px;
}
.mdcaa-page-chapo p:first-child {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--afg-bleu-fonce);
}
.mdcaa-illus-solo + .mdcaa-page-chapo {
    margin: 0 auto 3rem;
    text-align: center;
}

/* ---- Sections en blocs ---- */
.mdcaa-page-sections {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 920px;
    margin: 0 auto;
}
.mdcaa-bloc {
    background: #fff;
    border: 1px solid var(--afg-bordure);
    border-radius: 22px;
    padding: 2.5rem 2.75rem;
    box-shadow: 0 6px 26px rgba(18, 63, 86, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mdcaa-bloc:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(18, 63, 86, 0.12);
}
@media (max-width: 640px) {
    .mdcaa-bloc { padding: 1.75rem 1.4rem; }
    .mdcaa-page-sections { gap: 1.75rem; }
}
.mdcaa-bloc-entete {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1.4rem;
}
.mdcaa-bloc-picto {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 18px;
}
.mdcaa-bloc-picto .afg-theme-svg { width: 30px; height: 30px; }
.mdcaa-bloc-titre {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--afg-bleu-fonce);
    line-height: 1.25;
}
/* Le corps est de la prose, mais on retire la largeur bridée et les
   marges de titre superflues à l'intérieur d'un bloc. */
.mdcaa-bloc-corps.mdcaa-contenu-prose {
    max-width: none;
}
.mdcaa-bloc-corps.mdcaa-contenu-prose > p:first-child { margin-top: 0; }
.mdcaa-bloc-corps.mdcaa-contenu-prose > p:last-child { margin-bottom: 0; }
.mdcaa-bloc-corps.mdcaa-contenu-prose h3:first-child { margin-top: 0; }

/* Bouton de lecture vocale accolé au titre de bloc (discret, aligné) */
.mdcaa-bloc-titre .afg-lire-bloc {
    width: 26px;
    height: 26px;
    margin: 0 0 0 0.65rem;
    vertical-align: middle;
    opacity: 0.9;
}
.mdcaa-bloc-titre .afg-lire-icone { width: 13px; height: 13px; }

/* ---- Listes transformées en « grille d'atouts » ---- */
.mdcaa-bloc-corps .mdcaa-liste-atouts {
    list-style: none;
    padding: 0;
    margin: 1.6rem 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9rem;
}
@media (max-width: 620px) {
    .mdcaa-bloc-corps .mdcaa-liste-atouts { grid-template-columns: 1fr; }
}
.mdcaa-bloc-corps .mdcaa-liste-atouts li {
    position: relative;
    margin: 0;
    padding: 0.95rem 1.1rem 0.95rem 3rem;
    background: var(--afg-fond-doux);
    border: 1px solid var(--afg-bordure);
    border-radius: 14px;
    font-size: 1.02rem;
    line-height: 1.6;
    color: #3a4b58;
}
.mdcaa-bloc-corps .mdcaa-liste-atouts li::marker { content: ""; }
.mdcaa-bloc-corps .mdcaa-liste-atouts li::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 0.95rem;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--afg-bleu) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l4 4 10-10"/></svg>') center / 0.8rem 0.8rem no-repeat;
}
.mdcaa-bloc-corps .mdcaa-liste-atouts li strong { color: var(--afg-bleu); }

/* ---- Grille des « grands principes » ---- */
.mdcaa-principes-grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    max-width: 960px;
    margin: 0 auto;
}
@media (max-width: 780px) {
    .mdcaa-principes-grille { grid-template-columns: 1fr; }
}
.mdcaa-principe-carte {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--afg-bordure);
    border-radius: 22px;
    padding: 2.25rem 2.25rem 3.4rem;
    box-shadow: 0 6px 26px rgba(18, 63, 86, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mdcaa-principe-carte:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(18, 63, 86, 0.13);
}
.mdcaa-principe-num {
    position: absolute;
    top: 0.4rem;
    right: 1.3rem;
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1;
    color: rgba(31, 111, 146, 0.09);
    letter-spacing: -0.04em;
    pointer-events: none;
}
.mdcaa-principe-picto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    margin-bottom: 1.1rem;
}
.mdcaa-principe-picto .afg-theme-svg { width: 30px; height: 30px; }
.mdcaa-principe-titre {
    margin: 0 0 0.7rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--afg-bleu-fonce);
    line-height: 1.3;
}
.mdcaa-principe-corps p {
    margin: 0;
    font-size: 1.03rem;
    line-height: 1.75;
    color: #3a4b58;
}
.mdcaa-principe-corps strong { color: var(--afg-bleu); }
/* Bouton de lecture : en bas de carte, jamais collé au texte */
.mdcaa-principe-carte .afg-lire-bloc {
    position: absolute !important;
    right: 1.2rem;
    bottom: 1rem;
    margin: 0;
}

/* ---- Accents de couleurs (charte) pour les médaillons picto ---- */
.mdcaa-accent--bleu .mdcaa-bloc-picto,
.mdcaa-accent--bleu .mdcaa-principe-picto {
    background: rgba(31, 111, 146, 0.12);
    color: var(--afg-bleu);
}
.mdcaa-accent--corail .mdcaa-bloc-picto,
.mdcaa-accent--corail .mdcaa-principe-picto {
    background: rgba(232, 131, 107, 0.16);
    color: #c65137;
}
.mdcaa-accent--jaune .mdcaa-bloc-picto,
.mdcaa-accent--jaune .mdcaa-principe-picto {
    background: rgba(244, 201, 93, 0.24);
    color: #8a6a10;
}

/* ---- Idées reçues : sous-titre « La réalité » ---- */
.mdcaa-idee-realite {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.7rem;
    color: #2a7f62;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.mdcaa-idee-realite .afg-theme-svg {
    width: 1.05rem;
    height: 1.05rem;
    color: #2a7f62;
}

/* ---- Mode contraste élevé : garder cartes et blocs lisibles ---- */
html.afg-contraste .mdcaa-bloc,
html.afg-contraste .mdcaa-principe-carte,
html.afg-contraste .mdcaa-bloc-corps .mdcaa-liste-atouts li {
    background: #000000 !important;
    border: 2px solid #ffff00 !important;
}
html.afg-contraste .mdcaa-bloc-picto,
html.afg-contraste .mdcaa-principe-picto {
    background: #000000 !important;
    color: #ffff00 !important;
    border: 1px solid #ffff00;
}

/* ---- Respect de prefers-reduced-motion : pas d'effet de survol animé ---- */
@media (prefers-reduced-motion: reduce) {
    .mdcaa-bloc,
    .mdcaa-principe-carte {
        transition: none;
    }
    .mdcaa-bloc:hover,
    .mdcaa-principe-carte:hover {
        transform: none;
    }
}

/* =====================================================
   PREMIUM v2.5 — Illustrations transparentes intégrées
   naturellement + finition (espacement, hiérarchie,
   cohérence). Réutilise strictement les variables --afg-*.
   ===================================================== */

/* ---- Image détourée : traitement de base réutilisable ----
   Jamais de cadre plein ni d'object-fit:cover. Le sujet flotte, avec une
   ombre portée qui suit son contour (drop-shadow épouse le canal alpha). */
.mdcaa-media-transparent {
    display: block;
    width: 100%;
    height: auto;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 20px 34px rgba(18, 63, 86, 0.20));
}

/* ---- Duo éditorial : texte d'un côté, illustration de l'autre ----
   Alterne gauche/droite d'une section à l'autre via les modificateurs.
   Beaucoup d'air, alignement vertical centré. */
.mdcaa-duo-edito {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
}
/* Illustration à GAUCHE (par défaut le média suit le texte dans le flux ;
   ce modificateur force le média en 1re colonne). */
.mdcaa-duo-edito--media-gauche .mdcaa-duo-figure { order: -1; }

/* Figure illustration : le sujet peut déborder légèrement de sa colonne
   pour un rendu vivant, profitant du fond transparent. */
.mdcaa-duo-figure {
    position: relative;
    margin: 0;
}
.mdcaa-duo-figure::before {
    content: "";
    position: absolute;
    inset: 6% 8%;
    z-index: 0;
    background: radial-gradient(closest-side, rgba(58,155,189,0.15), rgba(58,155,189,0) 70%);
    filter: blur(8px);
    pointer-events: none;
}
.mdcaa-duo-figure .mdcaa-media-transparent {
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin: 0 auto;
}
.mdcaa-duo-texte { min-width: 0; }

/* En-tête de section aligné à gauche (dans un duo éditorial) */
.afg-section-tete--gauche {
    text-align: left;
    margin-bottom: 1.25rem;
}
.afg-section-tete--gauche h2 { display: inline-block; }
.afg-section-tete--gauche h2::after {
    left: 0;
    transform: translateX(0) scaleX(1);
    transform-origin: left center;
}
.afg-section-tete--gauche .afg-section-intro {
    max-width: var(--afg-mesure);
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

/* Liste « pour qui » en colonne (dans le duo éditorial) */
.afg-liste-pastilles--colonne {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.7rem;
}
.afg-liste-pastilles--colonne li { justify-content: flex-start; }

/* Sur mobile, les duos repassent en une colonne, illustration au-dessus */
@media (max-width: 860px) {
    .mdcaa-duo-edito {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .mdcaa-duo-edito .mdcaa-duo-figure { order: -1; }
    .mdcaa-duo-figure .mdcaa-media-transparent { max-width: 380px; }
    .afg-section-tete--gauche { text-align: center; }
    .afg-section-tete--gauche h2::after { left: 50%; transform: translateX(-50%) scaleX(1); }
    .afg-section-tete--gauche .afg-section-intro { margin-left: auto; margin-right: auto; text-align: center; }
    .afg-liste-pastilles--colonne { align-items: center; }
}

/* Duo « Comment ça fonctionne » : la frise d'étapes garde son fil vertical,
   l'illustration se cale à droite. */
.mdcaa-comment-duo { margin-top: var(--afg-espace-bloc); }
.mdcaa-comment-duo .mdcaa-etapes { margin-top: 0; }

/* ---- Hiérarchie typographique & largeur de lecture ---- */
.mdcaa-contenu-prose { max-width: var(--afg-mesure); }
.mdcaa-contenu-prose p { line-height: 1.75; }

/* ---- Cohérence des boutons (rayon, transition, survol) ---- */
.afg-bouton,
.afg-btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.afg-bouton:hover,
.afg-bouton:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(244, 201, 93, 0.38);
}

/* ---- Cartes-principes avec illustration : hauteurs homogènes ----
   La grille étire les cartes pour éviter les hauteurs inégales. */
.afg-carte-principe--illus {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.afg-grille > .afg-carte-principe--illus { align-self: stretch; }

/* =====================================================
   ACCESSIBILITÉ — scroll-reveal
   ===================================================== */

/* Repli SANS JavaScript : les éléments animés à l'apparition sont masqués
   par défaut (opacity:0) en attendant la classe .visible ajoutée par JS.
   Sans JS, on les force visibles pour ne jamais cacher de contenu.
   (La classe .js est posée par un script inline très tôt dans le <head>.) */
html:not(.js) .mdcaa-slide-gauche,
html:not(.js) .mdcaa-slide-droite,
html:not(.js) .mdcaa-pilier,
html:not(.js) .mdcaa-mission-carte,
html:not(.js) .afg-duo-carte,
html:not(.js) .afg-carte-picto,
html:not(.js) .afg-carte-principe,
html:not(.js) .afg-carte-benefice,
html:not(.js) .afg-section-tete,
html:not(.js) .mdcaa-etape,
html:not(.js) .mdcaa-raison-carte,
html:not(.js) .mdcaa-contact-info-item,
html:not(.js) .mdcaa-form {
    opacity: 1 !important;
    transform: none !important;
}

/* Respect de prefers-reduced-motion pour TOUT le scroll-reveal, y compris
   les glissements latéraux (non couverts plus haut). */
@media (prefers-reduced-motion: reduce) {
    .mdcaa-slide-gauche,
    .mdcaa-slide-droite {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}