/*
 * APERS Formation — CSS de thème (sans framework, sans !important).
 * Base : feuille de référence d'Olivier (sources/apers-formation-common.css), adaptée au thème bloc :
 * pas de wrapper, variables dans theme.json (--wp--preset--* / --wp--custom--*), classes af-* posées via
 * « Classes CSS additionnelles » ou par les gabarits / apers-core.
 * Points de rupture : 1024px, 800px (marges, feuillages), 767px (une colonne), 479px.
 */

/* =========================================================================
   1. Base
   ========================================================================= */
@media (max-width: 800px) {
	body {
		--wp--style--root--padding-left: var(--wp--custom--gutter--mobile);
		--wp--style--root--padding-right: var(--wp--custom--gutter--mobile);
	}
}
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(h1, h2, h3, h4) { overflow-wrap: anywhere; }
:where(img, svg) { max-width: 100%; }
:where(a) { text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 4px;
}
.screen-reader-text:not(:focus) {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* =========================================================================
   2. Rythmes, titres de section, eyebrow
   ========================================================================= */
.af-section { padding-block: var(--wp--custom--section-gap); }
.af-section--soft { background-color: var(--wp--preset--color--soft); }
.af-lead { font-size: var(--wp--preset--font-size--lead); line-height: 1.5; }
.af-muted { color: var(--wp--preset--color--muted); }
.af-accent { color: var(--wp--preset--color--teal-action); }
.af-eyebrow {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-end: 1rem;
	color: var(--wp--preset--color--teal-action);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.af-eyebrow::after {
	content: "";
	flex: 0 0 3rem;
	height: 2px;
	background-color: currentColor;
}
.af-section-title::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-block-end: 1rem;
	border-radius: 2px;
	background-color: var(--wp--preset--color--orange);
}
.af-section-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-block-end: 2rem;
}

/* =========================================================================
   3. Grilles
   ========================================================================= */
.af-grid { display: grid; gap: 1.5rem; }
.af-grid > *, .af-split > * { min-width: 0; margin-block: 0; }
.af-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.af-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.af-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.af-split {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	align-items: start;
	gap: clamp(2rem, 4vw, 4rem);
}

/* =========================================================================
   4. En-tête : marque à gauche, menu, bouton, logo rond à droite (débordant)
   ========================================================================= */
.af-header {
	position: relative;
	z-index: 10;
	background-color: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}
.af-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2rem;
	padding-block: 1rem;
}
.af-brand {
	color: var(--wp--preset--color--ink);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}
.af-brand strong { font-weight: 800; }
.af-brand .af-accent { color: var(--wp--preset--color--teal-action); }
.af-brand:hover { color: var(--wp--preset--color--ink); }
.af-header-end { display: flex; align-items: center; gap: 1.5rem; }
.af-header .wp-block-navigation { gap: 0.25rem 1.5rem; font-size: var(--wp--preset--font-size--small); }
.af-header .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.af-header .wp-block-navigation-item__content:hover,
.af-header .wp-block-navigation-item__content[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--orange);
}
.af-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}
.af-logo { display: block; flex-shrink: 0; margin-block-end: -2.5rem; line-height: 0; }
.af-logo picture, .af-footer-logo picture { display: block; }
.af-logo img {
	display: block;
	width: clamp(80px, 8vw, 112px);
	height: auto;
	border-radius: 50%;
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow--card);
}
@media (max-width: 1024px) {
	.af-header-end { gap: 1rem; }
	.af-logo { margin-block-end: 0; }
	.af-logo img { width: 64px; }
}
@media (max-width: 600px) {
	/* Menu burger natif (sous 600px) : on masque le bouton « Nous contacter » de l'en-tête, présent dans le menu ouvert. */
	.af-header .af-header-cta { display: none; }
	.af-brand { font-size: 1.15rem; }
}

/* « Nous contacter » est un bouton sur grand écran ; l'entrée du menu ne sert que dans le menu mobile ouvert. */
.af-header .af-nav-contact { display: none; }
.af-header .is-menu-open .af-nav-contact { display: flex; }

/* Fil d'Ariane (bloc core/breadcrumbs) */
.af-breadcrumb { padding-block: 1.25rem 0.5rem; color: var(--wp--preset--color--muted); font-size: 0.875rem; }
.af-breadcrumb a { color: var(--wp--preset--color--muted); }
.af-breadcrumb a:hover { color: var(--wp--preset--color--ink); }
.af-breadcrumb [aria-current="page"] { color: var(--wp--preset--color--teal-action); }

/* =========================================================================
   5. Boutons : styles de bloc « Contour » et « Orange », flèche, pleine largeur
   ========================================================================= */
.wp-element-button, .wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; text-align: center; }
.wp-block-button.is-style-contour .wp-block-button__link,
.af-button--outline {
	background-color: transparent;
	color: var(--wp--preset--color--teal-action);
	border-color: var(--wp--preset--color--teal-action);
}
.wp-block-button.is-style-orange .wp-block-button__link,
.af-button--orange {
	background-color: var(--wp--preset--color--orange);
	border-color: var(--wp--preset--color--orange);
	color: var(--wp--custom--on-orange); /* 4,9:1 — le blanc ne passe pas sur cet orange */
}
.wp-block-button.is-style-contour .wp-block-button__link:hover,
.wp-block-button.is-style-orange .wp-block-button__link:hover,
.af-button--outline:hover,
.af-button--orange:hover {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.af-arrow .wp-block-button__link::after,
a.af-arrow::after,
.af-arrow-link::after {
	content: "";
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
	background-color: currentColor;
	mask: url("../icons/arrow-right.svg") center / contain no-repeat;
}
.af-download .wp-block-button__link::after {
	content: "";
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor;
	mask: url("../icons/download.svg") center / contain no-repeat;
}
.af-button--full, .af-button--full .wp-block-button__link { width: 100%; }
.af-arrow-link { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
	.wp-element-button, .wp-block-button__link { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
}

/* =========================================================================
   6. Hero et médias (repli sans photo : fond doux + feuillages)
   ========================================================================= */
.af-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(2rem, 4vw, 4rem);
	padding-block: 1rem var(--wp--custom--section-gap);
}
.af-hero > * { min-width: 0; margin-block: 0; }
.af-hero-copy > * + * { margin-block-start: 1.25rem; }
.af-hero-copy h1 { max-width: 15ch; }
.af-hero--plain { grid-template-columns: minmax(0, 1fr); }
.af-hero--plain h1 { max-width: 24ch; }
.af-hero-media {
	position: relative;
	overflow: hidden;
	min-height: clamp(220px, 28vw, 380px);
	border-radius: clamp(3rem, 8vw, 7rem) 0 0 clamp(3rem, 8vw, 7rem);
	background: var(--wp--preset--color--soft) url("../img/feuillage.svg") right -2rem bottom -2rem / 70% auto no-repeat;
}
.af-hero-media img,
.af-hero-media .wp-block-post-featured-image { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.af-hero-media img { object-fit: cover; object-position: 60% 50%; } /* sujet au centre-droit ; réglable par image (data/visuels.json) */
.af-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- Forme du hero avec image (maquette « Promotion de la bientraitance ») ----------
 * Colonne image collée au bord droit de l'écran (la colonne texte reste dans le conteneur 1280 px), photo masquée par une forme
 * organique (bord gauche courbe : bombé en haut, large courbe en bas ; bords droits nets), feuille orange qui dépasse en haut
 * à gauche (derrière la photo), quart de forme turquoise dans le coin bas droit. Masque SVG en ligne : aucune requête, aucun JS.
 * Le repli sans photo garde la forme (fond doux + feuillages). Le hero simple (af-hero--plain) n'est pas concerné.
 */
.wp-site-blocks { overflow-x: clip; } /* garde-fou : jamais de défilement horizontal (100vw inclut la barre de défilement) */
.af-hero:not(.af-hero--plain) { align-items: stretch; }
.af-hero:not(.af-hero--plain) > .af-hero-media {
	--af-hero-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M25 0H100V100H18C8 100 1 90 1 75L1 45C1 18 10 2 25 0Z'/%3E%3C/svg%3E");
	position: relative;
	isolation: isolate;
	overflow: visible;
	min-height: clamp(260px, 26vw, 400px);
	margin-inline-end: calc(-1 * max(var(--wp--style--root--padding-right, 24px), (100vw - var(--wp--style--global--wide-size, 1280px)) / 2));
	border-radius: 0;
	background: none;
}
.af-hero:not(.af-hero--plain) > .af-hero-media > .wp-block-post-featured-image,
.af-hero:not(.af-hero--plain) > .af-hero-media:not(:has(img)) {
	-webkit-mask: var(--af-hero-shape) 0 0 / 100% 100% no-repeat;
	mask: var(--af-hero-shape) 0 0 / 100% 100% no-repeat;
}
.af-hero:not(.af-hero--plain) > .af-hero-media:not(:has(img)) {
	background: var(--wp--preset--color--soft) url("../img/feuillage.svg") right 8% bottom -2rem / 55% auto no-repeat;
}
/* Feuille orange : derrière la photo, elle déborde de la courbe en haut à gauche. */
.af-hero:not(.af-hero--plain) > .af-hero-media::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -9%;
	left: -2%;
	width: 30%;
	aspect-ratio: 5 / 6;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath fill='%23e46723' d='M100 0C42 2 4 34 0 120C34 82 80 64 100 0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}
/* Quart de forme turquoise : devant, coin bas droit. */
.af-hero:not(.af-hero--plain) > .af-hero-media::after {
	content: "";
	position: absolute;
	z-index: 1;
	right: 0;
	bottom: 0;
	width: clamp(64px, 11%, 140px);
	aspect-ratio: 1 / 0.85;
	border-top-left-radius: 100% 100%;
	background-color: var(--wp--preset--color--teal);
	pointer-events: none;
}
@media (max-width: 767px) {
	.af-hero:not(.af-hero--plain) > .af-hero-media {
		--af-hero-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V100H16C7 100 0 93 0 84Z'/%3E%3C/svg%3E");
		min-height: 0;
		aspect-ratio: 16 / 10;
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 16px)) calc(-1 * var(--wp--style--root--padding-right, 16px));
		border-radius: 0;
	}
	.af-hero:not(.af-hero--plain) > .af-hero-media::before { display: none; } /* plus de place à gauche en pleine largeur */
	.af-hero:not(.af-hero--plain) > .af-hero-media::after { width: 15%; }
}

/* Feuillages décoratifs (CSS uniquement : ignorés par les lecteurs d'écran) */
.af-leaves { position: relative; isolation: isolate; overflow: hidden; }
.af-leaves::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -3rem;
	bottom: -3rem;
	width: clamp(160px, 22vw, 320px);
	aspect-ratio: 1;
	background: url("../img/feuillage.svg") center / contain no-repeat;
	pointer-events: none;
}
@media (max-width: 800px) { .af-leaves::after { display: none; } }

/* =========================================================================
   7. Cartes, pastilles d'icône, bénéfices
   ========================================================================= */
.af-card {
	padding: clamp(1.25rem, 2.5vw, 2rem);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--radius--card);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow--card);
	overflow-wrap: anywhere;
}
.af-card > :first-child { margin-block-start: 0; }
.af-card--soft { background-color: var(--wp--preset--color--soft); box-shadow: none; }
.af-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--teal-pale);
	color: var(--wp--preset--color--teal-action);
}
.af-icon svg { width: 1.75rem; height: 1.75rem; }
.af-icon--orange { color: var(--wp--preset--color--orange); }
.af-icon--small { width: 2.75rem; height: 2.75rem; }
.af-icon--small svg { width: 1.35rem; height: 1.35rem; }
.af-benefits { padding-block: 1.75rem; background-color: var(--wp--preset--color--soft); }
.af-benefit { display: flex; align-items: center; gap: 1rem; margin: 0; }
.af-benefit p { margin: 0; }

/* =========================================================================
   8. Cartes formation (bloc apers/formation-carte) et recherche
   ========================================================================= */
.af-course-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
	padding: clamp(1.25rem, 2vw, 1.5rem);
}
.af-course-card__head { display: flex; align-items: flex-start; gap: 1rem; }
.af-course-card__title { margin: 0; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; }
.af-course-card__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.af-course-card__title a:hover { text-decoration: underline; }
.af-course-card .af-arrow-link { margin-block-start: auto; }
.af-course-card .af-arrow-link, .af-course-card--featured .af-arrow-link { color: var(--wp--preset--color--teal-action); }

/* Cartes entièrement cliquables : le lien (titre de la formation, « Découvrir » d'un public) est étiré sur toute la carte.
 * Contour de focus sur la carte, au clavier seulement (:focus-visible ; :focus-within réagirait aussi au clic souris),
 * jamais autour de chaque ligne du titre. */
.af-course-card, .af-course-card--featured, .af-public-card { position: relative; }
.af-card-link::before,
.af-public-card .af-arrow-link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.af-card-link:focus-visible,
.af-public-card .af-arrow-link:focus-visible { outline: none; }
.af-course-card:has(.af-card-link:focus-visible),
.af-course-card--featured:has(.af-card-link:focus-visible),
.af-public-card:has(.af-arrow-link:focus-visible) {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 4px;
}
.af-course-card:hover .af-card-link,
.af-course-card--featured:hover .af-card-link,
.af-public-card:hover .af-arrow-link { text-decoration: underline; }
.af-meta { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; list-style: none; font-size: var(--wp--preset--font-size--small); }
.af-meta li { display: flex; align-items: flex-start; gap: 0.5rem; }
.af-meta svg { width: 1.15rem; height: 1.15rem; margin-block-start: 0.2em; color: var(--wp--preset--color--teal-action); flex-shrink: 0; }
.af-course-grid { gap: 1.5rem; }
.af-course-grid > li { margin: 0; }
.af-course-grid .is-hidden-by-search { display: none; }

.af-course-card--featured { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); padding: 0; gap: 0; overflow: hidden; }
.af-course-card--featured .af-hero-media { border-radius: 0; min-height: 240px; height: 100%; }
.af-course-body { padding: clamp(1.25rem, 3vw, 2.5rem); min-width: 0; display: flex; flex-direction: column; gap: 1rem; }

.af-search { margin-block: 2rem; }
.af-search label { display: block; margin-block-end: 0.5rem; font-weight: 700; color: var(--wp--preset--color--ink); }
.af-search__field { position: relative; }
.af-search__field svg { position: absolute; inset-block-start: 50%; inset-inline-start: 1rem; width: 1.35rem; height: 1.35rem; transform: translateY(-50%); color: var(--wp--preset--color--teal-action); pointer-events: none; }
.af-search input {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 0.85rem 1rem 0.85rem 3rem;
	border: 1px solid var(--wp--preset--color--field-border);
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font: inherit;
}
.af-search input::placeholder { color: var(--wp--preset--color--muted); opacity: 1; }
.af-search__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.af-search__row .af-search__field { flex: 1 1 16rem; }
.af-search--form button { min-height: 52px; }
.af-search__status { margin-block: 0.5rem 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

/* =========================================================================
   9. Fiche formation
   ========================================================================= */
.af-infos { background-color: var(--wp--preset--color--soft); }
.af-infos__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	padding: 1.5rem 0;
	list-style: none;
}
.af-infos__list li { display: flex; align-items: center; gap: 1rem; padding-inline: 1.25rem; font-weight: 600; color: var(--wp--preset--color--ink); }
.af-infos__list li + li { border-inline-start: 1px solid var(--wp--preset--color--border-subtle); }
.af-course-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	align-items: start;
	gap: clamp(2rem, 4vw, 4rem);
}
.af-course-layout > * { min-width: 0; }
.af-course-main > section + section { margin-block-start: 2.5rem; }
.af-course-main h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
@media (min-width: 1025px) and (min-height: 900px) {
	.af-course-sidebar--sticky { position: sticky; top: 1.5rem; }
}
.af-course-sidebar h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.af-facts { margin: 1.5rem 0; }
.af-facts > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 1rem;
	padding-block: 0.8rem;
	border-bottom: 1px solid var(--wp--preset--color--border-subtle);
}
.af-facts dt { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--wp--preset--color--ink); }
.af-facts dt svg { width: 1.25rem; height: 1.25rem; color: var(--wp--preset--color--teal-action); flex-shrink: 0; }
.af-facts dd { margin: 0; overflow-wrap: anywhere; }
.af-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.af-course-sidebar .af-actions { flex-direction: column; align-items: stretch; }
.af-course-sidebar .af-actions .wp-element-button { width: 100%; }
.af-contact-line { display: flex; gap: 0.75rem; align-items: flex-start; margin-block-start: 1.5rem; padding-block-start: 1rem; border-top: 1px solid var(--wp--preset--color--border-subtle); font-size: var(--wp--preset--font-size--small); }
.af-contact-line svg { width: 1.35rem; height: 1.35rem; color: var(--wp--preset--color--teal-action); flex-shrink: 0; }
.af-method { display: flex; gap: 1.25rem; align-items: flex-start; }
.af-method h2 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.af-method p { margin: 0; }
.af-prestations ul { padding-inline-start: 1.2rem; margin-block: 0.75rem; }
.af-prestations li::marker { color: var(--wp--preset--color--orange); }
.af-prestations h2 { font-size: 1.25rem; }
.af-method > p:first-child, .af-accessibility__inner > p:first-child { margin: 0; flex-shrink: 0; }
.af-contact-inline { display: flex; align-items: center; gap: 0.5rem; }
.af-contact-inline svg { width: 1.25rem; height: 1.25rem; color: var(--wp--preset--color--teal-action); }

/* Listes : puces orange (prose) et coches orange (af-checklist) */
.af-prose ul { padding-inline-start: 1.3rem; }
.af-prose li + li { margin-block-start: 0.45rem; }
.af-prose li::marker { color: var(--wp--preset--color--orange); }
.af-checklist { padding-inline-start: 0; list-style: none; }
.af-checklist li { position: relative; padding-inline-start: 2.25rem; }
.af-checklist li + li { margin-block-start: 0.75rem; }
.af-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.1em;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--wp--preset--color--orange);
	mask: url("../icons/circle-check.svg") center / contain no-repeat;
}
.wp-block-list.is-style-checklist { list-style: none; padding-left: 0; }

/* Bandeau accessibilité */
.af-accessibility { background-color: var(--wp--preset--color--soft); }
.af-accessibility__inner { display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: flex-start; }
.af-accessibility__inner .af-icon { width: 4.5rem; height: 4.5rem; background-color: var(--wp--preset--color--white); }
.af-accessibility__inner .af-icon svg { width: 2.25rem; height: 2.25rem; }
.af-accessibility p { margin-block: 0.4rem; }
.af-accessibility__body { max-width: 72ch; } /* laisse le coin droit aux feuillages, sans chevaucher le texte */

/* =========================================================================
   10. Équipe
   ========================================================================= */
.af-profile { display: flex; flex-direction: column; gap: 1rem; }
.af-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	overflow: hidden;
	border-radius: 50%;
	background-color: var(--wp--preset--color--teal-pale);
	color: var(--wp--preset--color--teal-action);
	font-size: 1.5rem;
	font-weight: 700;
}
.af-avatar img { width: 100%; height: 100%; object-fit: cover; }
.af-profile-role { color: var(--wp--preset--color--teal-action); font-weight: 700; }
.af-profile h3 { margin-block: 0; }
.af-profile h4 { margin-block: 0.5rem 0.25rem; }

/* =========================================================================
   11. Appel à l'action, pied de page
   ========================================================================= */
.af-cta { background-color: var(--wp--preset--color--soft); }
.af-cta-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2rem; }
.af-footer {
	border-top: 1px solid var(--wp--preset--color--border-subtle);
	background-color: var(--wp--preset--color--ivory);
	font-size: var(--wp--preset--font-size--small);
}
.af-footer-grid { display: grid; grid-template-columns: 1.1fr 1.2fr 1fr 0.9fr; gap: 2rem; padding-block: 2.5rem; }
.af-footer-grid > * { min-width: 0; margin: 0; }
.af-footer-grid > * + * { padding-inline-start: 2rem; border-inline-start: 1px solid var(--wp--preset--color--border-subtle); }
.af-footer h2 { margin: 0 0 0.75rem; font-size: 1.125rem; }
.af-footer h2::after { content: ""; display: block; width: 2rem; height: 2px; margin-block-start: 0.5rem; background-color: var(--wp--preset--color--orange); }
.af-footer ul { margin: 0; padding: 0; list-style: none; }
.af-footer li + li { margin-block-start: 0.4rem; }
.af-footer address { font-style: normal; }
.af-footer a { overflow-wrap: anywhere; }
.af-footer .af-meta { font-size: inherit; }
.af-footer .wp-block-navigation { gap: 0.4rem; font-size: inherit; }
.af-footer .wp-block-navigation-item__content { color: var(--wp--preset--color--teal-action); text-decoration: underline; }
.af-footer .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--ink); }
.af-footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.af-footer-brand img { width: 88px; height: auto; }
.af-footer-brand > p:first-child { margin: 0; }
.af-footer-brand p { margin: 0; color: var(--wp--preset--color--teal-action); font-weight: 600; }

/* =========================================================================
   11 bis. Pages (BRIEF-03) : sections, accueil, qui sommes-nous, équipe, contact
   ========================================================================= */
.af-section-inner > :first-child { margin-block-start: 0; }
.af-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.af-hero-copy .af-actions { margin-block-start: 1.75rem; }
.af-hero-copy .af-actions + p { margin-block-start: 1rem; }
.af-quote { font-style: italic; color: var(--wp--preset--color--teal-action); }
.af-hero--plain { display: block; padding-block-start: 1rem; }
.af-hero--plain > * { max-width: 72ch; }
.af-hero--plain > * + * { margin-block-start: 1.25rem; }

/* Feuillages plus discrets dans les cartes et bandeaux : jamais sous le texte ni sous un bouton */
.af-card.af-leaves::after { width: 130px; right: -2.5rem; bottom: -2.5rem; opacity: 0.55; }
.af-profile.af-leaves::after { width: clamp(150px, 16vw, 220px); opacity: 0.8; } /* carte sans parcours : place libre */
.af-cta.af-leaves::after { width: clamp(120px, 14vw, 190px); right: -3.5rem; bottom: -4.5rem; }
@media (min-width: 801px) { .af-cta .af-cta-inner { padding-inline-end: clamp(3rem, 8vw, 7rem); } }

/* Bandeau de bénéfices (accueil) */
.af-benefits .af-grid { padding-block: 0.25rem; }
.af-benefit > p:first-child { margin: 0; flex-shrink: 0; }
.af-benefit-text { font-weight: 600; color: var(--wp--preset--color--ink); }

/* Cartes publics, indicateurs, chiffre-clé, « Notre force » */
.af-public-card { display: flex; flex-direction: column; gap: 0.75rem; }
.af-public-card > p:first-child, .af-indicator > p:first-child, .af-feature > p:first-child { margin: 0; }
.af-public-card h3 { margin: 0; font-size: 1.15rem; }
.af-public-card .af-arrow-link { margin-block-start: auto; }
.af-indicator { display: flex; align-items: center; gap: 1.25rem; font-size: var(--wp--preset--font-size--lead); font-weight: 600; color: var(--wp--preset--color--ink); }
.af-indicator p { margin: 0; }
.af-indicator p strong { display: block; }
.af-indicators__source { margin-block: 1rem 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.af-keyfigure { margin: 1rem 0 0.5rem; color: var(--wp--preset--color--ink); font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; }
.af-keyfigure::after { content: ""; display: block; width: 2.5rem; height: 3px; margin-block-start: 1rem; background-color: var(--wp--preset--color--teal); }
.af-keyfigure-text { font-size: var(--wp--preset--font-size--lead); line-height: 1.45; }
.af-feature { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.af-feature-text { margin: 0; }
.af-column-rule { padding-inline-start: clamp(1.5rem, 3vw, 3rem); border-inline-start: 1px solid var(--wp--preset--color--border-subtle); }

/* Équipe */
.af-hero--team { position: relative; padding-block-end: var(--wp--custom--section-gap); }
.af-hero--team::after { width: clamp(220px, 30vw, 420px); right: 0; bottom: 0; }
.af-profile > p:first-child { margin: 0; }
.af-profile h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-block: 0.5rem 0; }
.af-profile .af-profile-role { margin-block-start: 0.25rem; }
.af-profile h3 { margin-block: 0.75rem 0; font-size: 1rem; color: var(--wp--preset--color--ink); }
.af-profile h3 + p, .af-profile p + p { margin-block-start: 0.35rem; }

/* Appel à l'action */
.af-cta-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem 2rem; }
.af-cta-inner > p:first-child { margin: 0; }
.af-cta-text { flex: 1 1 28rem; }
.af-cta-text > :first-child { margin-block-start: 0; }
.af-cta-text > :last-child { margin-block-end: 0; }

/* Contact : formulaire Fluent Forms aux couleurs du thème.
 * Ses variables reprennent la palette ; nos règles sont préfixées par .fluentform (spécificité supérieure à ses styles). */
.af-contact-form .fluentform {
	--fluentform-primary: var(--wp--preset--color--teal-action);
	--fluentform-secondary: var(--wp--preset--color--ink);
	--fluentform-border-color: var(--wp--preset--color--field-border);
	--fluentform-border-radius: var(--wp--custom--radius--button);
	--fluentform-input-select-height: 48px;
	font-family: inherit;
}
.af-contact-form .fluentform .ff-el-group { margin-block-end: 1.25rem; }
.af-contact-form .fluentform .ff-el-input--label label { color: var(--wp--preset--color--ink); font-weight: 700; }
.af-contact-form .fluentform .ff-el-form-control {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--field-border);
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font: inherit;
}
.af-contact-form .fluentform textarea.ff-el-form-control { min-height: 9rem; }
.af-contact-form .fluentform .ff-el-form-control:focus { border-color: var(--wp--preset--color--teal-action); box-shadow: none; }
.af-contact-form .fluentform .ff-el-form-control:focus-visible { outline: 3px solid var(--wp--preset--color--ink); outline-offset: 2px; }
.af-contact-form .fluentform .ff-el-form-check { margin-block: 0.35rem; }
.af-contact-form .fluentform .ff-el-form-check label,
.af-contact-form .fluentform .ff-el-tc label { display: inline-flex; gap: 0.6rem; align-items: flex-start; min-height: 44px; }
.af-contact-form .fluentform input[type="radio"],
.af-contact-form .fluentform input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-block-start: 0.25rem; accent-color: var(--wp--preset--color--teal-action); }
.af-contact-form .fluentform .ff-btn-submit {
	min-height: 48px;
	padding: 0.8rem 1.35rem;
	border: 2px solid var(--wp--preset--color--teal-action);
	border-radius: var(--wp--custom--radius--button);
	background-color: var(--wp--preset--color--teal-action);
	color: var(--wp--preset--color--white);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.af-contact-form .fluentform .ff-btn-submit:hover,
.af-contact-form .fluentform .ff-btn-submit:focus-visible { background-color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--white); opacity: 1; }
.af-contact-inline { align-items: flex-start; }
.af-contact-inline svg { margin-block-start: 0.2em; flex-shrink: 0; }
.af-contact-card p { margin-block: 0.75rem; }
.af-contact-inline span { display: block; }

/* Formation mise en avant, Qualiopi */
.af-course-card__title--large { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.af-course-card--featured .af-course-body > p:first-child { margin: 0; }
.af-qualiopi { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.af-qualiopi p { margin: 0; font-weight: 600; color: var(--wp--preset--color--ink); }
.af-qualiopi__logo img { width: 180px; height: auto; }
.af-qualiopi__details { font-weight: 400; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.af-qualiopi--pied { display: block; margin-block-start: 1rem; }
.af-footer > .af-footer-legal { max-width: var(--wp--style--global--wide-size); } /* même largeur que la grille du pied */
.af-footer-legal { margin-block: 2rem 0; padding-block: 1.25rem 1.5rem; border-block-start: 1px solid var(--wp--preset--color--border-subtle); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.af-footer-legal a { color: inherit; }
.af-qualiopi--pied .af-qualiopi__logo img { width: 120px; }
.af-qualiopi--pied p { font-size: var(--wp--preset--font-size--small); font-weight: 400; margin-block-start: 0.5rem; }

/* =========================================================================
   12. Responsive : grilles empilées dans l'ordre du DOM
   ========================================================================= */
@media (max-width: 1024px) {
	.af-grid--3, .af-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.af-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.af-course-layout { grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 1.5rem; }
	.af-infos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
	.af-infos__list li:nth-child(3) { border-inline-start: 0; }
	.af-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.af-footer-grid > :nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
}
@media (max-width: 767px) {
	.af-hero,
	.af-split,
	.af-grid--2,
	.af-grid--3,
	.af-grid--4,
	.af-grid--5,
	.af-course-layout,
	.af-course-card--featured,
	.af-footer-grid { grid-template-columns: minmax(0, 1fr); }
	.af-hero { gap: 1.5rem; }
	.af-hero-media { border-radius: 2rem; }
	.af-infos__list { grid-template-columns: minmax(0, 1fr); }
	.af-infos__list li { border-inline-start: 0; padding-inline: 0; }
	.af-infos__list li + li { border-inline-start: 0; }
	.af-footer-grid > * + * { padding-inline-start: 0; border-inline-start: 0; }
	.af-section-head { align-items: flex-start; }
	.af-accessibility__inner { flex-direction: column; }
	.af-method { flex-direction: column; gap: 0.75rem; }
	.af-column-rule { padding-inline-start: 0; border-inline-start: 0; }
	.af-feature { flex-direction: row; text-align: start; padding-block: 1rem; }
	.af-public-card { flex-direction: row; flex-wrap: wrap; align-items: center; }
	.af-public-card .af-arrow-link { margin-block-start: 0; }
	.af-hero-media { min-height: 0; aspect-ratio: 16 / 10; } /* mobile : format photo, pas de bandeau trop panoramique */
}
@media (max-width: 479px) {
	.af-actions { align-items: stretch; flex-direction: column; }
	.af-actions .wp-element-button { width: 100%; }
	.af-facts > div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}