/* =========================================================================
   APFI Conseil — Header + Hero
   Design tokens + styles. Écrit pour surcharger proprement Astra plutôt
   que de s'appuyer sur ses classes (le header/hero sont entièrement
   bespoke, cf. header.php).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
	/* Couleurs de marque */
	--apfi-blue: #0B409A;
	--apfi-blue-dark: #082C6B;
	--apfi-blue-tint-05: rgba(11, 64, 154, 0.05);
	--apfi-blue-tint-10: rgba(11, 64, 154, 0.1);
	--apfi-navy-text: #101F33;
	--apfi-bg: #FBF9F7;
	--apfi-bg-tint: #F3F6FB;
	--apfi-white: #FFFFFF;
	--apfi-border: rgba(16, 31, 51, 0.1);
	/* Rouge institutionnel — utilisé uniquement pour le petit liseré
	   tricolore de signature (section 12, CTA final), jamais ailleurs. */
	--apfi-red: #C41E3A;

	/* Typographie — la police custom vient en premier, avec un repli
	   système propre tant que les fichiers de police ne sont pas ajoutés
	   (voir apfi-fonts.css). */
	--apfi-font-heading: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--apfi-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Rythme / rayons */
	--apfi-radius-sm: 6px;
	--apfi-radius-md: 10px;
	--apfi-container-width: 1280px;
	--apfi-container-padding: clamp(20px, 4vw, 48px);

	/* Header */
	--apfi-header-height: 84px;
}

/* -------------------------------------------------------------------------
   2. Reset léger (scopé aux éléments que l'on construit)
   ------------------------------------------------------------------------- */
.apfi-header,
.apfi-hero,
.apfi-footer {
	box-sizing: border-box;
}
.apfi-header *,
.apfi-hero *,
.apfi-footer * {
	box-sizing: inherit;
}

.apfi-body {
	background: var(--apfi-bg);
	color: var(--apfi-navy-text);
	font-family: var(--apfi-font-body);
	font-weight: 400;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden; /* garde-fou : la page ne doit jamais défiler horizontalement */
}

.apfi-container {
	max-width: var(--apfi-container-width);
	margin-inline: auto;
	padding-inline: var(--apfi-container-padding);
}

.apfi-skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--apfi-blue);
	color: #fff;
	padding: 12px 20px;
	z-index: 1000;
	border-radius: 0 0 var(--apfi-radius-sm) 0;
}
.apfi-skip-link.screen-reader-text:focus {
	left: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.apfi-icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.15em;
}

/* -------------------------------------------------------------------------
   3. Boutons
   ------------------------------------------------------------------------- */
.apfi-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	padding: 14px 22px;
	border-radius: var(--apfi-radius-sm);
	border: 1.5px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
}
.apfi-btn .apfi-icon {
	font-size: 1.05em;
	flex-shrink: 0;
}
.apfi-btn:hover {
	transform: translateY(-1px);
}

.apfi-btn--primary {
	background: var(--apfi-blue);
	color: #fff;
}
.apfi-btn--primary:hover {
	background: var(--apfi-blue-dark);
	color: #fff;
}

.apfi-btn--outline {
	background: transparent;
	color: var(--apfi-blue);
	border-color: var(--apfi-border);
}
.apfi-btn--outline:hover {
	border-color: var(--apfi-blue);
	background: var(--apfi-blue-tint-05);
}

.apfi-btn--sm {
	padding: 11px 18px;
	font-size: 0.9rem;
}

/* Variantes inversées — pour un bouton posé sur un fond bleu plein
   (section 12, CTA final) : le bleu normal de .apfi-btn--primary y serait
   illisible. Réutilisent la structure de base .apfi-btn (dimensions,
   rayons, typographie, transition, hover translateY) sans la redéfinir. */
.apfi-btn--primary-inverse {
	background: var(--apfi-white);
	color: var(--apfi-blue);
}
.apfi-btn--primary-inverse:hover {
	background: var(--apfi-bg);
	color: var(--apfi-blue-dark);
}

.apfi-btn--outline-inverse {
	background: transparent;
	color: var(--apfi-white);
	border-color: rgba(255, 255, 255, 0.55);
}
.apfi-btn--outline-inverse:hover {
	border-color: var(--apfi-white);
	background: rgba(255, 255, 255, 0.12);
}

/* -------------------------------------------------------------------------
   4. Header
   ------------------------------------------------------------------------- */
.apfi-header {
	background: var(--apfi-bg);
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid transparent;
}

.apfi-header__inner {
	min-height: var(--apfi-header-height);
	display: flex;
	align-items: center;
	gap: 32px;
}

/* Logo */
.apfi-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--apfi-navy-text);
	margin-right: auto;
	flex-shrink: 0;
}
/* Logo officiel APFI (fichier fourni, jamais recréé/modifié). Le fichier
   source contient son propre espace de respiration autour du pictogramme
   et du texte : on ajuste uniquement la hauteur d'affichage (mise en page),
   sans jamais recadrer ni retoucher l'image elle-même. */
.apfi-logo__image,
.apfi-logo img {
	max-height: 72px;
	width: auto;
	display: block;
}

/* Navigation */
.apfi-nav__list {
	list-style: none;
	display: flex;
	align-items: center;
	/* 24px (au lieu de 30px jusqu'au 17/09/2026) : le Header desktop est
	   contraint par la largeur utile du conteneur, plafonnée à 1184px
	   (1280px - 2 x 48px de padding) quelle que soit la taille de l'écran.
	   Les 6 gaps de la navigation en consommaient 180px, ce qui ne laissait
	   pas la place aux 7 libellés sur une seule ligne : certains passaient
	   sur deux lignes, y compris en 1920px, et le rythme horizontal en était
	   rompu. Valeur à réévaluer visuellement, non figée. */
	gap: 24px;
	margin: 0;
	padding: 0;
}
.apfi-nav__list > .menu-item > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: var(--apfi-navy-text);
	font-weight: 500;
	font-size: 0.95rem;
	padding: 8px 2px;
	position: relative;
}
.apfi-nav__list > .menu-item > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--apfi-blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.15s ease;
}
.apfi-nav__list > .menu-item:hover > a::after,
.apfi-nav__list > .menu-item.current-menu-item > a::after {
	transform: scaleX(1);
}

.apfi-nav__list .menu-item-has-children > a::after {
	content: none; /* on retire le soulignement animé sur l'item parent, la puce chevron suffit */
}
.apfi-nav__list .menu-item-has-children > a {
	position: relative;
	padding-right: 16px;
}
.apfi-nav__list .menu-item-has-children > a::before {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	opacity: 0.6;
}

/* Sous-menu "Nos solutions" (desktop : au survol) */
.apfi-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 10px;
	position: absolute;
	top: calc(100% + 10px);
	background: #fff;
	border: 1px solid var(--apfi-border);
	border-radius: var(--apfi-radius-md);
	box-shadow: 0 16px 40px rgba(16, 31, 51, 0.12);
	min-width: 240px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.apfi-nav__list .menu-item-has-children {
	position: relative;
}
.apfi-nav__list .menu-item-has-children:hover > .sub-menu,
.apfi-nav__list .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.apfi-nav__list .sub-menu .menu-item a {
	display: block;
	padding: 10px 12px;
	border-radius: var(--apfi-radius-sm);
	text-decoration: none;
	color: var(--apfi-navy-text);
	font-size: 0.92rem;
	font-weight: 500;
}
.apfi-nav__list .sub-menu .menu-item a:hover {
	background: var(--apfi-blue-tint-05);
	color: var(--apfi-blue);
}

/* Actions header (CTA + bouton menu mobile) */
.apfi-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.apfi-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--apfi-border);
	border-radius: var(--apfi-radius-sm);
	background: #fff;
	color: var(--apfi-navy-text);
	cursor: pointer;
	padding: 0;
}
.apfi-menu-toggle .apfi-icon {
	width: 20px;
	height: 20px;
}
.apfi-menu-toggle__icon-close {
	display: none;
}
.apfi-header--nav-open .apfi-menu-toggle__icon-open {
	display: none;
}
.apfi-header--nav-open .apfi-menu-toggle__icon-close {
	display: inline-block;
}

/* -------------------------------------------------------------------------
   5. Hero
   ------------------------------------------------------------------------- */
.apfi-hero {
	background: var(--apfi-bg);
	overflow: hidden;
	position: relative;
	isolation: isolate; /* crée un contexte d'empilement propre : nécessaire dès
		768px, où la photo passe en fond plein cadre (position:absolute) et le
		texte doit rester dessus (voir la règle desktop plus bas) — sans effet
		en mobile où rien n'est positionné en absolu ici. */
}

/* Grid à 3 enfants directs (content-top / media / expertises) plutôt que
   les expertises imbriquées dans le contenu : ça permet de réordonner le
   bloc photo indépendamment en mobile (texte → CTA → photo → expertises)
   via `order`, tout en recomposant un 2-colonnes classique dès 768px via
   un placement explicite (voir plus bas). */
.apfi-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	gap: 32px;
	padding-block: 40px;
}

.apfi-hero__content-top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	order: 1;
}

.apfi-hero__media {
	order: 2;
}

.apfi-hero__expertises {
	order: 3;
}

.apfi-hero__label {
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--apfi-blue);
	margin: 0 0 18px;
}

.apfi-hero__title {
	font-family: var(--apfi-font-heading);
	font-weight: 700;
	font-size: clamp(1.9rem, 3.4vw, 2.75rem);
	line-height: 1.16;
	letter-spacing: -0.01em;
	margin: 0 0 22px;
	color: var(--apfi-navy-text);
}
.apfi-hero__title-line {
	display: block;
}
.apfi-hero__title-line--highlight {
	color: var(--apfi-blue);
}

.apfi-hero__divider {
	display: block;
	width: 64px;
	height: 3px;
	background: var(--apfi-blue);
	border-radius: 2px;
	margin-bottom: 22px;
}

.apfi-hero__paragraph {
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(16, 31, 51, 0.78);
	max-width: 46ch;
	margin: 0 0 30px;
}

.apfi-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 44px;
}

.apfi-hero__expertises {
	list-style: none;
	margin: 0;
	padding-top: 24px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 28px;
	border-top: 1px solid var(--apfi-border);
	width: 100%;
}
.apfi-hero__expertise {
	display: flex;
	align-items: center;
	gap: 12px;
}
.apfi-hero__expertise-icon {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	color: var(--apfi-blue);
}
.apfi-hero__expertise span:not(.apfi-icon) {
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.3;
}

/* Média (photo)
   En mobile (base ci-dessous), la photo reste un bloc à part dans le flux
   normal, entre les CTA et les expertises. À partir de 768px, ce même
   élément devient le fond plein cadre du Hero (position:absolute, voir la
   règle desktop plus bas) : le texte passe au premier plan et s'appuie sur
   le fondu déjà intégré à l'image pour rester lisible, sans dégradé CSS
   additionnel.

   CADRAGE MOBILE — TEMPS 19B (17/09/2026).
   Auparavant, le bloc était calé sur le ratio réel de la photo desktop
   (`aspect-ratio: 1717 / 916`), donc très horizontal : sur un écran de
   390px il ne mesurait que 350 x 187px, et comme le ratio du bloc était
   celui de l'image, `cover` ne recadrait rien — la photo s'affichait en
   entier, fondu compris. Or ce fondu clair occupe environ 40% de la largeur
   réelle de l'image : il ne restait qu'environ 210 x 187px de photographie,
   d'où un effet de vignette horizontale. Le fondu est indispensable en
   desktop, où le texte est posé PAR-DESSUS la photo ; en mobile, où le
   texte est AU-DESSUS et non par-dessus, il ne sert plus à rien et ne fait
   que consommer de la surface.
   Deux corrections indissociables : un ratio portrait 4/5 (350 x 437px sur
   un écran de 390px) donne la présence, et `object-position: 75%` donne le
   sujet — `cover` ne retenant plus que ~42% de la largeur de l'image, un
   point focal centré mordrait encore sur le fondu, alors que 75% cale la
   fenêtre visible entièrement dans la zone photographique.
   Rayon de bordure enfin appliqué aux quatre angles (il n'était arrondi
   qu'à droite, vestige de l'ancienne maquette où la photo occupait une
   colonne de droite), pour que l'image forme un bloc cohérent.
   Ces trois déclarations ne concernent QUE le mobile : le bloc desktop
   ci-dessous les écrase intégralement (`aspect-ratio: auto`,
   `border-radius: 0`, `object-position: 62% center`). Valeurs 4/5 et 75%
   non figées, à réévaluer après contrôle visuel sur téléphone réel. */
.apfi-hero__media {
	position: relative;
	aspect-ratio: 4 / 5;
	width: 100%;
	overflow: hidden;
	border-radius: var(--apfi-radius-md);
}
.apfi-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 75% center;
	display: block;
}
.apfi-hero__media-note {
	position: absolute;
	left: 12px;
	bottom: 12px;
	background: rgba(16, 31, 51, 0.72);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 500;
	padding: 5px 10px;
	border-radius: 999px;
	line-height: 1.3;
}
.apfi-hero__media-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	background: linear-gradient(135deg, var(--apfi-blue-tint-10), var(--apfi-bg-tint));
	border: 1.5px dashed var(--apfi-border);
	color: rgba(16, 31, 51, 0.55);
	font-size: 0.9rem;
	font-weight: 500;
}
.apfi-hero__media-placeholder small {
	display: block;
	margin-top: 8px;
	font-weight: 400;
	font-size: 0.78rem;
	color: rgba(16, 31, 51, 0.45);
}

/* -------------------------------------------------------------------------
   6. Bandeau secteurs ("Nous accompagnons", section 3)
   Rendu volontairement très léger et institutionnel : pas de cartes, pas de
   bordure dure — juste un fond légèrement teinté (même token que le footer
   provisoire) et de fins séparateurs verticaux entre les secteurs, réservés
   aux largeurs où tout tient sur une seule ligne (voir le bloc responsive) :
   sur une liste qui s'enroule sur plusieurs lignes, un séparateur en début
   de ligne n'aurait pas de sens visuellement, d'où sa suppression en
   dessous de ce seuil plutôt qu'un simple habillage cosmétique.
   ------------------------------------------------------------------------- */
.apfi-secteurs {
	background: var(--apfi-bg-tint);
}

.apfi-secteurs__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding-block: 22px;
}

.apfi-secteurs__label {
	margin: 0;
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--apfi-navy-text);
	white-space: nowrap;
}

.apfi-secteurs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
}

.apfi-secteurs__item {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.apfi-secteurs__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--apfi-blue);
}

.apfi-secteurs__item span {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--apfi-navy-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* -------------------------------------------------------------------------
   7. Section "Comment pouvons-nous vous accompagner ?" (section 4)
   VALIDÉE ET FIGÉE (05/09/2026) — ne plus modifier sans demande explicite.
   Volontairement à l'opposé du bandeau secteurs : très photographique,
   pas de carte blanche/bordure/icône (direction "SaaS" explicitement
   écartée par le client). Chaque tuile = une photo pleine tuile + voile
   sombre en dégradé (lisibilité, intensité volontairement modérée — voir
   .apfi-besoins__veil) + titre posé directement sur l'image, avec une
   marge basse/gauche généreuse pour que le texte ne semble pas collé aux
   bords (voir .apfi-besoins__content). La grille (.apfi-besoins__grid-wrap)
   peut s'élargir légèrement au-delà du conteneur standard sur très grand
   écran pour tenir sur une seule ligne (cf. bloc responsive) — le bloc de
   titre, lui, reste toujours aligné sur .apfi-container.
   ------------------------------------------------------------------------- */
.apfi-besoins {
	padding-block: clamp(56px, 7vw, 96px);
	background: var(--apfi-white);
}

.apfi-besoins__head {
	margin-bottom: clamp(28px, 4vw, 44px);
}

.apfi-besoins__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-besoins__title {
	margin: 0 0 12px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
	max-width: 640px;
}

.apfi-besoins__intro {
	margin: 0;
	max-width: 560px;
	font-size: 1rem;
	color: rgba(16, 31, 51, 0.72);
}

.apfi-besoins__grid-wrap {
	max-width: var(--apfi-container-width);
	margin-inline: auto;
	padding-inline: var(--apfi-container-padding);
}

.apfi-besoins__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.apfi-besoins__cell {
	min-width: 0;
}

.apfi-besoins__tuile {
	position: relative;
	display: block;
	isolation: isolate;
	aspect-ratio: 16 / 10;
	border-radius: var(--apfi-radius-md);
	overflow: hidden;
	background: var(--apfi-bg-tint); /* visible tant que l'image ne s'est pas chargée */
	text-decoration: none;
}

a.apfi-besoins__tuile {
	transition: box-shadow 0.2s ease;
}

a.apfi-besoins__tuile:hover .apfi-besoins__image,
a.apfi-besoins__tuile:focus-visible .apfi-besoins__image {
	transform: scale(1.035);
}

a.apfi-besoins__tuile:focus-visible {
	outline: 2px solid var(--apfi-white);
	outline-offset: -4px;
	box-shadow: 0 0 0 4px var(--apfi-blue);
}

.apfi-besoins__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.apfi-besoins__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Intensité modérée, volontairement : ce voile ne doit qu'assurer la
	   lisibilité du titre posé dessus, pas assombrir la photo elle-même —
	   à revoir une fois les vraies photographies intégrées (validation du
	   05/09/2026), mais ce niveau reste le bon point de départ. */
	background: linear-gradient(to top, rgba(9, 17, 31, 0.58) 0%, rgba(9, 17, 31, 0.2) 38%, rgba(9, 17, 31, 0) 62%);
}

.apfi-besoins__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
	/* Marge basse/gauche volontairement plus généreuse (validation du
	   05/09/2026) pour que le titre "respire" et ne semble pas collé aux
	   bords de la tuile ; ce déséquilibre (vs. haut/droite, où seule la
	   flèche est posée) remonte aussi visuellement le bloc de titre. */
	padding: 18px 18px 24px 22px;
}

.apfi-besoins__tuile-title {
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--apfi-white);
}

.apfi-besoins__arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(2px);
	color: var(--apfi-white);
}

.apfi-besoins__arrow svg {
	width: 16px;
	height: 16px;
}

/* CTA unique sous la grille des 6 tuiles — Home uniquement, voir
   template-parts/besoins.php. Réutilise le bouton partagé .apfi-btn /
   .apfi-btn--outline sans le modifier : seuls le centrage et la respiration
   au-dessus sont propres à cette section. */
.apfi-besoins__actions {
	display: flex;
	justify-content: center;
	margin-top: clamp(28px, 4vw, 44px);
}

/* Même précaution que .apfi-nr-liens__actions .apfi-btn : le composant
   partagé .apfi-btn impose `white-space: nowrap` (figé) — neutralisé
   uniquement dans ce contexte, pour garantir l'absence de débordement
   horizontal à 320px. La classe .apfi-btn elle-même n'est pas modifiée. */
.apfi-besoins__actions .apfi-btn {
	white-space: normal;
	text-align: center;
}

/* -------------------------------------------------------------------------
   8. Section "Nos expertises" (section 5)
   VALIDÉE ET FIGÉE (05/09/2026) — ne plus modifier sans demande explicite.
   Contrairement à la section 4 (tuiles photographiques, pour des
   *situations* client), il s'agit ici de décrire des compétences/services :
   un traitement icône + titre + description reste adapté, mais délibérément
   sobre — pas de bordure dure, pas d'ombre portée, juste l'icône (reprise du
   même set que le Hero/bandeau secteurs), le texte et de l'espace. Fond
   légèrement teinté pour alterner avec le blanc de la section 4 qui précède
   (cf. principe d'alternance de fonds du site). Contenu des 4 expertises
   lu depuis le CPT `prestation` (source unique, voir inc/cpt-prestation.php
   et apfi_get_prestations() dans inc/helpers.php) — seuls le surtitre, le
   titre et l'introduction de la section restent des champs de la page
   d'accueil (inc/acf-fields-expertises.php).
   ------------------------------------------------------------------------- */
.apfi-expertises {
	padding-block: clamp(56px, 7vw, 96px);
	background: var(--apfi-bg-tint);
}

.apfi-expertises__head {
	margin-bottom: clamp(28px, 4vw, 44px);
}

.apfi-expertises__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-expertises__title {
	margin: 0 0 12px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
	max-width: 640px;
}

.apfi-expertises__intro {
	margin: 0;
	max-width: 560px;
	font-size: 1rem;
	color: rgba(16, 31, 51, 0.72);
}

.apfi-expertises__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.apfi-expertises__item {
	min-width: 0;
}

.apfi-expertises__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--apfi-blue-tint-10);
	color: var(--apfi-blue);
	padding: 13px;
	box-sizing: border-box;
}

.apfi-expertises__item-title {
	margin: 0 0 8px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--apfi-navy-text);
}

.apfi-expertises__item-desc {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(16, 31, 51, 0.72);
}

.apfi-expertises__item-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--apfi-blue);
	text-decoration: none;
}

.apfi-expertises__item-link .apfi-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

.apfi-expertises__item-link:hover .apfi-icon,
.apfi-expertises__item-link:focus-visible .apfi-icon {
	transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   9. Section "Notre méthode" (section 6)
   VALIDÉE ET FIGÉE (05/09/2026) — ne plus modifier sans demande explicite.
   Contrairement aux sections 4/5 (grille de tuiles/icônes), il s'agit ici
   d'une timeline verticale de 7 étapes à côté d'une grande photo —
   traitement volontairement sobre : aucune carte, aucune bordure forte,
   aucune ombre marquée (demande explicite), juste une fine ligne verticale
   reliant des pastilles numérotées bleues. Fond blanc pour alterner avec le
   fond légèrement teinté de la section 5 qui précède (principe
   d'alternance de fonds). Contenu (photo + 7 étapes) géré par un répéteur
   ACF de page d'accueil — pas de CPT dédié, ce contenu n'étant pas
   réutilisé ailleurs sur le site (voir inc/acf-fields-methode.php).
   Photo : sticky testé et écarté (neutralisé par le garde-fou global
   `.apfi-body { overflow-x: hidden; }`, figé depuis le Header/Hero — voir
   le bloc 1024px ci-dessous) au profit d'une photo statique. Ratio
   ajusté le 05/09/2026 pour rester panoramique en tablette/mobile (ne pas
   allonger la page avant la timeline) et vertical en desktop uniquement.
   ------------------------------------------------------------------------- */
.apfi-methode {
	padding-block: clamp(56px, 7vw, 96px);
	background: var(--apfi-white);
}

.apfi-methode__head {
	margin-bottom: clamp(28px, 4vw, 44px);
}

.apfi-methode__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-methode__title {
	margin: 0 0 12px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
	max-width: 640px;
}

.apfi-methode__intro {
	margin: 0;
	max-width: 560px;
	font-size: 1rem;
	color: rgba(16, 31, 51, 0.72);
}

/* Mobile/tablette (base) : photo en haut, timeline empilée en dessous —
   voir le bloc responsive dédié pour le passage réel en 2 colonnes. */
.apfi-methode__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: start;
}

.apfi-methode__media {
	margin: 0;
	border-radius: var(--apfi-radius-md);
	overflow: hidden;
	background: var(--apfi-bg-tint);
	/* Mobile : photo panoramique (16/10) pour ne pas allonger la page avant
	   la timeline — ajustement du 05/09/2026, voir les seuils responsive
	   dédiés plus bas pour la tablette (16/9) et le desktop (grande photo
	   verticale, inchangée). */
	aspect-ratio: 16 / 10;
}

.apfi-methode__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Timeline : une fine ligne verticale continue (positionnée derrière les
   pastilles, qui la recouvrent naturellement grâce à leur fond opaque —
   pas besoin de z-index) reliant le centre de la première pastille au
   centre de la dernière. */
.apfi-methode__timeline {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.apfi-methode__timeline::before {
	content: '';
	position: absolute;
	top: 16px;
	bottom: 16px;
	left: 15px;
	width: 1px;
	background: var(--apfi-border);
}

.apfi-methode__step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.apfi-methode__step:not(:last-child) {
	padding-bottom: 24px;
}

.apfi-methode__step-marker {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--apfi-blue);
	color: var(--apfi-white);
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 0.9rem;
}

.apfi-methode__step-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 5px;
	min-width: 0;
}

.apfi-methode__step-title {
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--apfi-navy-text);
}

.apfi-methode__step-desc {
	font-size: 0.92rem;
	line-height: 1.5;
	color: rgba(16, 31, 51, 0.72);
}

/* -------------------------------------------------------------------------
   10. Section "Pourquoi APFI" (section 7)
   VALIDÉE ET FIGÉE (05/09/2026) — ne plus modifier sans demande explicite.
   Traitement volontairement différent
   de la section 5 (icônes en cercle teinté, titre + description) et de la
   section 6 (pastilles numérotées + timeline) : ici, une simple checklist
   compacte — icône + intitulé sur une ligne, sans cercle ni description,
   aucune carte, aucune bordure, aucune ombre, aucun tableau comparatif.
   Fond bleu très clair pour poursuivre l'alternance des fonds (blanc en
   section 6 → bleu clair ici, comme la section 5). Contenu (texte de
   positionnement + 6 bénéfices) géré par un répéteur ACF de page d'accueil
   — pas de CPT dédié, ce contenu n'étant pas réutilisé ailleurs sur le
   site (voir inc/acf-fields-pourquoi.php).
   ------------------------------------------------------------------------- */
.apfi-pourquoi {
	padding-block: clamp(56px, 7vw, 96px);
	background: var(--apfi-bg-tint);
}

/* Mobile/tablette (base) : texte de positionnement, puis checklist en
   dessous — voir le bloc responsive dédié plus bas pour le passage réel en
   2 colonnes desktop. */
.apfi-pourquoi__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: start;
}

.apfi-pourquoi__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-pourquoi__title {
	margin: 0 0 12px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
}

.apfi-pourquoi__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.72);
}

.apfi-pourquoi__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.apfi-pourquoi__item {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.apfi-pourquoi__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--apfi-blue);
}

.apfi-pourquoi__label {
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.98rem;
	line-height: 1.35;
	color: var(--apfi-navy-text);
}

/* -------------------------------------------------------------------------
   11. Section "Nos réalisations" (section 8)
   VALIDÉE ET FIGÉE (05/09/2026) — ne plus modifier sans demande explicite.
   Traitement "portfolio" volontairement différent des sections précédentes :
   photo en haut (paysage, coins arrondis), légende en dessous, sans voile
   ni texte superposé sur la photo, aucune carte/bordure/ombre — contenu
   vient du CPT `realisation` (voir inc/cpt-realisation.php et
   apfi_get_realisations() dans inc/helpers.php). Légende, dans l'ordre :
   1) type de référence (pastille discrète "Mission réalisée par APFI", ou
   nettement plus visible — fond + bordure teintés — pour "Expérience
   professionnelle antérieure à la création d'APFI", afin qu'aucune des deux
   ne puisse être confondue avec l'autre) ; 2) nom de la référence +
   localisation ; 3) type d'établissement ; 4) mission (intitulé court) ;
   5) description courte (extrait natif du CPT). 3 références client
   actuellement en avant : Les Galeries Gaîté (expérience professionnelle
   antérieure du dirigeant, Paris 14e), SIRR (mission APFI, Paris 8e),
   Hôtel Sofiane (mission APFI, Paris 20e). Photos volontairement neutres
   (placeholders génériques) en attendant que le client fournisse et valide
   de vraies photos — ne jamais aller chercher de photo officielle de ces
   établissements sans son accord explicite.
   ------------------------------------------------------------------------- */
.apfi-realisations {
	padding-block: clamp(56px, 7vw, 96px);
	background: var(--apfi-bg);
}

.apfi-realisations__head {
	margin-bottom: clamp(28px, 4vw, 44px);
	max-width: 640px;
}

.apfi-realisations__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-realisations__title {
	margin: 0;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
}

.apfi-realisations__intro {
	margin: 12px 0 0;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.72);
}

.apfi-realisations__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
}

.apfi-realisations__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.apfi-realisations__media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--apfi-radius-md);
	overflow: hidden;
	background: var(--apfi-bg-tint);
}

.apfi-realisations__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Type de référence — discret par défaut ("Mission réalisée par APFI"),
   mais nettement plus visible (fond + bordure teintés) pour une expérience
   professionnelle antérieure à la création d'APFI : cette distinction ne
   doit jamais pouvoir passer inaperçue, voir template-parts/realisations.php. */
.apfi-realisations__type {
	margin: 16px 0 0;
	display: inline-block;
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-realisations__type--anterieure {
	padding: 5px 10px;
	border-radius: var(--apfi-radius-sm);
	background: rgba(180, 108, 12, 0.1);
	border: 1px solid rgba(180, 108, 12, 0.35);
	color: #8A5209;
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.82rem;
}

.apfi-realisations__item-title {
	margin: 10px 0 0;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--apfi-navy-text);
}

.apfi-realisations__localisation {
	font-family: var(--apfi-font-body);
	font-weight: 400;
	color: rgba(16, 31, 51, 0.6);
}

.apfi-realisations__etablissement {
	margin: 4px 0 0;
	font-size: 0.9rem;
	line-height: 1.4;
	color: rgba(16, 31, 51, 0.6);
}

.apfi-realisations__mission {
	margin: 8px 0 0;
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--apfi-navy-text);
}

.apfi-realisations__item-desc {
	margin: 6px 0 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(16, 31, 51, 0.72);
}

/* -------------------------------------------------------------------------
   12. Section "Ils nous font confiance" (section 9)
   VALIDÉE ET FIGÉE (05/09/2026) — ne plus modifier sans demande explicite.
   Traitement volontairement à l'opposé d'un site d'avis : citation
   éditoriale unique et forte, centrée, beaucoup d'espace — aucune étoile,
   aucune note chiffrée, aucun badge, aucun carrousel, aucune carte, aucune
   ombre marquée. Fond bleu très clair pour marquer une pause éditoriale
   après le fond blanc cassé de la section 8. Contenu vient du CPT
   `temoignage` (voir inc/cpt-temoignage.php et apfi_get_temoignages() dans
   inc/helpers.php) ; un seul témoignage affiché pour l'instant (Jesus
   Ortiz, JO.Construction), mais la structure (figure/blockquote/
   figcaption) fonctionne sans changement si plusieurs témoignages sont
   affichés plus tard.
   IMPORTANT : ce témoignage reste une proposition éditoriale non encore
   validée par Jesus Ortiz — voir claude/architecture-technique.md,
   section "Étape 8", pour l'action obligatoire avant mise en production.
   Ce point de vigilance couvre désormais aussi sa photo (voir ci-dessous).

   MICRO-ÉVOLUTION — portrait rond : VALIDÉE ET FIGÉE (05/09/2026) — ne
   plus modifier sans demande explicite. Ajout du portrait rond de Jesus
   Ortiz (.apfi-temoignages__portrait), seule exception jamais apportée au
   gel de cette section. Diamètre porté de 48px à 64px (mobile/tablette) et
   72px (desktop, ≥1024px), `object-fit: cover`, aucune ombre, aucun cadre,
   aucune carte. Rendu conditionnel inchangé : sans image, la section
   s'affiche exactement comme avant, sans espace vide. La vraie photo sera
   intégrée depuis WordPress uniquement après l'accord explicite de Jesus
   Ortiz — voir claude/architecture-technique.md, section "Étape 8".
   ------------------------------------------------------------------------- */
.apfi-temoignages {
	padding-block: clamp(64px, 9vw, 112px);
	background: var(--apfi-bg-tint);
}

.apfi-temoignages__wrap {
	max-width: 480px;
	margin-inline: auto;
	text-align: center;
}

.apfi-temoignages__eyebrow {
	margin: 0 0 28px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-temoignages__quote {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.apfi-temoignages__mark {
	width: 32px;
	height: 32px;
	margin-bottom: 18px;
	color: var(--apfi-blue);
	opacity: 0.4;
}

.apfi-temoignages__text {
	margin: 0;
	padding: 0;
	border: none;
}

.apfi-temoignages__text p {
	margin: 0;
	font-family: var(--apfi-font-heading);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.5;
	color: var(--apfi-navy-text);
}

.apfi-temoignages__author {
	margin-top: 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.apfi-temoignages__author::before {
	content: "";
	width: 32px;
	height: 2px;
	background: var(--apfi-blue);
}

.apfi-temoignages__portrait {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	/* Volontairement discret : aucune ombre, aucun cadre épais, aucune carte
	   — juste un portrait rond sobre, sous la citation et au-dessus de
	   l'identité. Taille portée à 72px en desktop (voir @media 1024px). */
}

.apfi-temoignages__identity {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.apfi-temoignages__name {
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--apfi-navy-text);
}

.apfi-temoignages__role {
	font-family: var(--apfi-font-body);
	font-weight: 500;
	font-size: 0.85rem;
	color: rgba(16, 31, 51, 0.6);
}

/* -------------------------------------------------------------------------
   13. Section "FAQ" (section 10)
   VALIDÉE ET FIGÉE (05/09/2026) — ne plus modifier sans demande explicite.
   Questions et réponses = contenu définitif transmis par le client, voir
   template-parts/faq.php.
   Accordéon sobre en HTML natif (`<details>`/`<summary>`, voir
   template-parts/faq.php) : aucune carte, aucune ombre — les questions
   sont simplement séparées par un fin trait, comme au-dessus du footer.
   Fond blanc pour re-alterner après le bleu très clair de la section 9.
   ------------------------------------------------------------------------- */
.apfi-faq {
	padding-block: clamp(56px, 7vw, 96px);
	background: var(--apfi-white);
}

.apfi-faq__head {
	margin-bottom: clamp(28px, 4vw, 40px);
}

.apfi-faq__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-faq__title {
	margin: 0;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
}

.apfi-faq__list {
	max-width: 760px;
}

.apfi-faq__item {
	border-bottom: 1px solid var(--apfi-border);
}

.apfi-faq__item:first-child {
	border-top: 1px solid var(--apfi-border);
}

/* Neutralise le triangle natif de <summary> pour repartir d'un rendu
   propre et cohérent entre navigateurs, remplacé par l'icône +/- dédiée. */
.apfi-faq__question {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 18px;
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--apfi-navy-text);
}

.apfi-faq__question::-webkit-details-marker {
	display: none;
}

.apfi-faq__toggle {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--apfi-blue);
}

.apfi-faq__toggle .apfi-faq__icon-v {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.2s ease;
}

.apfi-faq__item[open] .apfi-faq__icon-v {
	transform: rotate(90deg);
}

.apfi-faq__answer {
	padding: 0 0 20px;
}

.apfi-faq__answer p {
	margin: 0;
	max-width: 640px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.72);
}

/* -------------------------------------------------------------------------
   14. Section "Numérique responsable" (section 11)
   VALIDÉE ET FIGÉE (05/09/2026) — ne plus modifier sans demande explicite.
   Traitement délibérément à part des autres sections de contenu : un
   bandeau de réassurance compact plutôt qu'une grande section, pour ne
   jamais donner l'impression qu'APFI est une société informatique. Fond
   blanc (beaucoup de blanc, hauteur contenue), séparé de la section 10 par
   un simple trait fin plutôt qu'un bloc de couleur — cohérent avec le
   traitement "bandeau" plutôt que "section" demandé par le client. Aucune
   carte, aucune ombre, aucun logo de logiciel : uniquement 3 petites
   icônes linéaires bleues (voir inc/acf-fields-numerique.php).
   IMPORTANT : pas de liseré bleu-blanc-rouge ici — demande explicite du
   client, ce liseré sera traité plus tard comme un élément de signature
   institutionnelle au niveau du CTA final / footer.
   ------------------------------------------------------------------------- */
.apfi-numerique {
	padding-block: clamp(40px, 5vw, 64px);
	background: var(--apfi-white);
	border-top: 1px solid var(--apfi-border);
}

/* Mobile/tablette (base) : texte de positionnement, puis marqueurs en
   dessous — voir le bloc responsive dédié plus bas pour le passage réel en
   bandeau horizontal desktop. */
.apfi-numerique__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: start;
}

.apfi-numerique__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-numerique__title {
	margin: 0 0 10px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.35rem, 2.4vw, 1.7rem);
	line-height: 1.25;
	color: var(--apfi-navy-text);
}

.apfi-numerique__text {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.72);
}

.apfi-numerique__markers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.apfi-numerique__marker {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.apfi-numerique__marker-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--apfi-blue);
}

.apfi-numerique__marker-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.apfi-numerique__marker-title {
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.35;
	color: var(--apfi-navy-text);
}

.apfi-numerique__marker-sub {
	font-size: 0.82rem;
	line-height: 1.4;
	color: rgba(16, 31, 51, 0.62);
}

/* -------------------------------------------------------------------------
   15. Section "CTA final" (section 12)
   VALIDÉE ET FIGÉE (05/09/2026) — ne plus modifier sans demande explicite.
   Rupture visuelle volontaire par rapport aux sections précédentes : fond
   bleu APFI plein, composition centrée et compacte (pas pleine hauteur),
   aucune photo/carte/ombre décorative. Les boutons utilisent les variantes
   inversées .apfi-btn--primary-inverse / .apfi-btn--outline-inverse (voir
   section 3 ci-dessus) puisque les boutons standards seraient illisibles
   sur ce fond bleu.
   Liseré bleu-blanc-rouge : signature institutionnelle discrète (~90px de
   large, 3px de haut, 3 segments égaux) positionnée en bas de la section,
   juste avant le footer — pas une bande décorative pleine largeur.
   Dimensions ajustées et validées le 05/09/2026 (90×3px, contre 96×4px
   dans la première proposition). Le segment "bleu" utilise un bleu
   légèrement plus clair que le fond de la section pour rester visible.
   ------------------------------------------------------------------------- */
.apfi-cta-final {
	background: var(--apfi-blue);
	padding-block: clamp(56px, 8vw, 88px);
	text-align: center;
}

.apfi-cta-final__layout {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.apfi-cta-final__eyebrow {
	margin: 0 0 14px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.apfi-cta-final__title {
	margin: 0 0 16px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	line-height: 1.25;
	color: var(--apfi-white);
}

.apfi-cta-final__text {
	margin: 0 0 32px;
	max-width: 520px;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
}

.apfi-cta-final__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	width: 100%;
	max-width: 360px;
}

.apfi-cta-final__actions .apfi-btn {
	justify-content: center;
}

.apfi-cta-final__tricolore {
	display: flex;
	width: 90px;
	height: 3px;
	margin-top: 40px;
	border-radius: 1.5px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.apfi-cta-final__tricolore-segment {
	flex: 1 1 0;
}

.apfi-cta-final__tricolore-segment--bleu {
	background: #3D6FD1;
}

.apfi-cta-final__tricolore-segment--blanc {
	background: var(--apfi-white);
}

.apfi-cta-final__tricolore-segment--rouge {
	background: var(--apfi-red);
}

/* -------------------------------------------------------------------------
   16. Section "Footer" (section 13)
   VALIDÉE ET FIGÉE (05/09/2026) — ne plus modifier sans demande explicite.
   Fond bleu marine profond (`--apfi-navy-text`), volontairement distinct
   du bleu plein du CTA final (`--apfi-blue`, section 12) qui le précède
   immédiatement — la rupture de couleur suffit à délimiter les deux
   sections, aucune bordure ajoutée entre elles. Traitement sobre : aucune
   carte, aucune ombre, pas de séparateur vertical entre les 4 zones
   (marque, navigation, prestations, secteurs) — seul un trait horizontal
   très discret sépare le contenu principal de la barre légale du bas.
   Le liseré bleu-blanc-rouge n'est PAS répété ici (voir section 15
   ci-dessus, section 12) — une seule signature institutionnelle sur toute
   la page.
   Deux micro-ajustements validés le 05/09/2026, avant le gel définitif :
   logo footer et sa zone claire réduits (40px -> 34px / 32px -> 26px de
   hauteur, padding 10px 16px -> 8px 14px) pour rester discret sur desktop
   et tablette ; espacement mobile entre les 4 zones resserré (36px ->
   26px, sans effet au-delà de 768px). Aucun autre élément modifié.
   ------------------------------------------------------------------------- */
.apfi-footer {
	background: var(--apfi-navy-text);
	color: rgba(255, 255, 255, 0.7);
}

.apfi-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	/* Resserré (36px -> 26px) le 05/09/2026 pour un footer mobile plus
	   compact entre les 4 zones (marque / navigation / prestations /
	   secteurs) — sans effet au-delà de 768px, où row-gap est explicitement
	   redéfini ci-dessous (768px et 1024px). */
	gap: 26px;
	padding-block: clamp(40px, 6vw, 64px) 32px;
}

.apfi-footer__col-title {
	margin: 0 0 16px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--apfi-white);
}

/* Zone "marque" : logo, baseline, coordonnées, LinkedIn optionnel. */
.apfi-footer__logo {
	display: inline-flex;
	margin-bottom: 16px;
}

.apfi-footer__logo-image {
	display: block;
	/* Réduit de 40px à 34px le 05/09/2026 pour rester discret/institutionnel
	   (micro-ajustement demandé, logo lui-même inchangé). */
	height: 34px;
	width: auto;
}

/* Petite zone claire derrière le logo officiel (jamais de filtre CSS sur
   le fichier lui-même) — disparaît automatiquement dès qu'une variante
   dédiée au footer est envoyée depuis Réglages APFI (voir footer.php). */
.apfi-footer__logo--plate .apfi-footer__logo-plate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--apfi-white);
	/* Zone claire resserrée en même temps que le logo (05/09/2026). */
	padding: 8px 14px;
	border-radius: var(--apfi-radius-sm);
}
.apfi-footer__logo--plate .apfi-footer__logo-plate .apfi-footer__logo-image {
	height: 26px;
}

.apfi-footer__baseline {
	margin: 0 0 20px;
	max-width: 280px;
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.apfi-footer__coordonnees {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 0.9rem;
}
.apfi-footer__coordonnees a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}
.apfi-footer__coordonnees a:hover {
	color: var(--apfi-white);
	text-decoration: underline;
}

.apfi-footer__social {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--apfi-white);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.apfi-footer__social:hover {
	border-color: var(--apfi-white);
}

/* Navigation + listes (prestations, secteurs) : même traitement visuel
   sobre, seule la navigation est cliquable. */
.apfi-footer__nav-list,
.apfi-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 0.9rem;
}
.apfi-footer__nav-list a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}
.apfi-footer__nav-list a:hover {
	color: var(--apfi-white);
	text-decoration: underline;
}
.apfi-footer__list li {
	color: rgba(255, 255, 255, 0.7);
}

/* Secteurs : présentation compacte sur 2 colonnes (8 secteurs), pour ne
   jamais allonger inutilement le footer — y compris en mobile. */
.apfi-footer__list--grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 16px;
}

/* Barre légale du bas : seul élément séparé par un trait horizontal
   discret, comme demandé. */
.apfi-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-block: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.55);
}

.apfi-footer__copyright {
	margin: 0;
}

.apfi-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}
.apfi-footer__legal a {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
}
.apfi-footer__legal a:hover {
	color: var(--apfi-white);
	text-decoration: underline;
}
/* Mentions légales / Politique de confidentialité / CGV : tant qu'aucune
   page réelle n'existe, affiché en texte simple non cliquable plutôt
   qu'un lien mort (voir footer.php) — structure identique, prête à
   devenir un lien dès que la page correspondante est créée. */
.apfi-footer__legal-pending {
	color: rgba(255, 255, 255, 0.35);
	cursor: default;
}

/* =========================================================================
   17. Responsive
   Seuils volontairement choisis pour cette livraison — à ajuster ensemble
   lors de la validation :
   - 1200px : bascule de la navigation en menu mobile (seuil porté de 1000px
     à 1200px le 17/09/2026, TEMPS 18B). Mesure à l'appui : la navigation
     desktop réclame au minimum ~1010px de largeur utile, alors qu'un
     viewport de 1024px n'en offre que 942px — d'où le débordement
     horizontal de 68px constaté le 15/09/2026. Le Header desktop ne
     commence donc qu'à partir de 1200px, où la place est réellement
     disponible.
   - 768px : bascule de mise en page du Hero (2 colonnes -> empilé) ET
     bascule de la photo Hero (desktop/tablette -> mobile), pour rester
     cohérent avec le seuil où l'image mobile dédiée prend le relais.
   - Bandeau secteurs : seuils propres, voir le bloc dédié plus bas.
   ========================================================================= */

/* --- Navigation : menu mobile jusqu'à 1199px inclus --- */
@media (max-width: 1199px) {
	.apfi-nav {
		position: fixed;
		inset: var(--apfi-header-height) 0 0 0;
		background: var(--apfi-bg);
		padding: 24px var(--apfi-container-padding) 40px;
		overflow-y: auto;
		transform: translateY(-8px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	}
	.apfi-header--nav-open .apfi-nav {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}

	.apfi-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}
	.apfi-nav__list > .menu-item > a {
		padding: 14px 4px;
		font-size: 1.05rem;
		border-bottom: 1px solid var(--apfi-border);
	}
	.apfi-nav__list > .menu-item > a::after {
		content: none;
	}

	.apfi-nav__list .sub-menu {
		position: static;
		box-shadow: none;
		border: none;
		background: var(--apfi-bg-tint);
		min-width: 0;
		margin: 4px 0 8px;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
	}
	.apfi-submenu-open > .sub-menu {
		display: block;
	}
	.apfi-nav__list .menu-item-has-children > a::before {
		right: 4px;
		transition: transform 0.15s ease;
	}
	.apfi-submenu-open > a::before {
		transform: translateY(-30%) rotate(-135deg);
	}

	.apfi-menu-toggle {
		display: inline-flex;
	}

	/* Le CTA principal du header reste visible en permanence même en mobile ;
	   il précède le bouton hamburger dans le DOM. */
}

/* Sur très petits écrans, logo (avec baseline) + CTA texte + hamburger ne
   tiennent pas côte à côte sur une seule ligne sans déborder : on
   simplifie le logo et on resserre le bouton CTA plutôt que de risquer un
   débordement horizontal de toute la page. */
@media (max-width: 480px) {
	.apfi-logo__image,
	.apfi-logo img {
		max-height: 52px;
	}
	.apfi-header__inner {
		gap: 10px;
	}
	.apfi-header__actions {
		gap: 8px;
	}
	.apfi-btn--sm {
		padding: 9px 12px;
		font-size: 0.82rem;
		gap: 6px;
	}
	.apfi-btn--sm .apfi-icon {
		display: none;
	}
	.apfi-menu-toggle {
		width: 40px;
		height: 40px;
	}
}

/* En dessous de 360px (ex. iPhone SE 1re génération, 320px), même la
   version resserrée du CTA texte ne tient plus à côté du logo et du
   hamburger : le bouton devient icône seule (le libellé reste lu par les
   lecteurs d'écran) plutôt que de laisser la page déborder horizontalement. */
@media (max-width: 359px) {
	:root {
		--apfi-container-padding: 14px;
	}
	.apfi-btn--sm span {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
	}
	.apfi-btn--sm {
		padding: 10px;
	}
	.apfi-btn--sm .apfi-icon {
		display: inline-block; /* on réaffiche l'icône, seule visible dans ce mode compact */
	}
}

/* --- Hero : photo plein cadre en fond à partir de 768px ---
   Sur validation du 05/09/2026 : la photo ne doit plus être un bloc à part
   dans une colonne de droite, mais le fond visuel complet du Hero (bord à
   bord, pleine hauteur, sans marge ni coin arrondi), avec le texte, les CTA
   et les expertises posés dessus. On sort donc `.apfi-hero__media` du flux
   de la grille (position:absolute, cadré sur `.apfi-hero` lui-même — pas sur
   `.apfi-hero__inner`, qui reste contraint par `.apfi-container` — ce qui
   lui permet d'atteindre les deux bords sans hériter du padding/max-width
   du conteneur), et on repasse `.apfi-hero__inner` en simple colonne
   (content-top puis expertises empilés), au premier plan (z-index) au-dessus
   de la photo. */
@media (min-width: 768px) {
	.apfi-hero {
		min-height: clamp(560px, 44vw, 720px);
		display: flex;
		align-items: center;
	}

	.apfi-hero__media {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		border-radius: 0;
		z-index: 0;
	}
	.apfi-hero__image {
		/* À cette largeur (desktop large), le Hero est proportionnellement
		   plus large que haut par rapport au ratio réel de la photo
		   (1717:916) : `cover` cale alors l'image sur la largeur du Hero et
		   ne recadre que verticalement — la photo s'affiche donc sur toute
		   sa largeur, `object-position` n'a quasiment aucun effet ici. Le
		   recadrage horizontal problématique n'apparaît qu'en tablette,
		   traité séparément plus bas. */
		object-position: 62% center;
	}
	.apfi-hero__media-note {
		left: auto;
		right: 16px;
		bottom: 16px;
	}

	.apfi-hero__inner {
		/* Reste position:static à dessein : .apfi-hero__media est un enfant de
		   ce conteneur (nécessaire au réordonnancement mobile via `order`,
		   voir plus haut), donc si .apfi-hero__inner devenait lui-même un
		   contexte de positionnement, il "capturerait" le fond absolu à sa
		   propre largeur (celle, contrainte, de .apfi-container) au lieu de
		   .apfi-hero pleine largeur. Le passage au premier plan se fait donc
		   directement sur content-top/expertises ci-dessous. */
		display: block;
		padding-block: 56px;
	}
	.apfi-hero__content-top {
		order: initial;
		position: relative;
		z-index: 1;
		max-width: 580px;
	}
	.apfi-hero__expertises {
		order: initial;
		position: relative;
		z-index: 1;
		max-width: 580px;
	}
	.apfi-hero__ctas {
		flex-wrap: nowrap;
	}
}

/* --- Hero : correctif spécifique tablette (768–899px) ---
   À cette largeur, la mise en page est plus haute que large par rapport au
   ratio réel de la photo (916/1717) : `cover` recadre alors horizontalement
   pour remplir toute la hauteur, ce qui pousse l'image entière — et donc
   son fondu clair, mesuré à ~40% de sa largeur réelle — vers la droite du
   cadre visible. Avec le point focal et la largeur de colonne pensés pour
   le desktop (aucun recadrage horizontal là-bas, voir plus haut), le texte
   déborderait ici sur la partie nette/claire de la photo et deviendrait
   illisible. On resserre donc la colonne et on recentre le point focal
   vers la gauche uniquement dans cette plage. */
@media (min-width: 768px) and (max-width: 899px) {
	.apfi-hero__image {
		/* Ajustements du 05/09/2026, affinés par petites étapes une fois le
		   texte repositionné à gauche (voir .apfi-hero__inner plus bas) :
		   un point focal ramené tout à gauche (0%) protégeait totalement le
		   texte mais ne laissait plus voir que le mur en claire-voie bois,
		   sans profondeur ni mobilier — 35% restitue la perspective du hall
		   (suspensions, mobilier, luminosité) tout en gardant le texte et
		   les CTA sur la zone claire de la photo. */
		object-position: 35% center;
	}
	.apfi-hero__content-top,
	.apfi-hero__expertises {
		max-width: min(520px, 58vw);
	}

	/* Repositionnement horizontal du 05/09/2026 : le contenu (surtitre, H1,
	   trait, paragraphe, CTA, expertises — tous alignés sur ce même conteneur)
	   est ramené sur une marge gauche dédiée, plus resserrée que le padding
	   partagé par le header/footer (`--apfi-container-padding`), pour libérer
	   davantage la partie droite de la photo et se rapprocher de la
	   composition desktop. Uniquement `padding-left` : le padding droit du
	   conteneur (non déterminant ici, la colonne de contenu est de toute
	   façon plafonnée par `max-width` ci-dessus) reste inchangé. N'affecte
	   que .apfi-hero__inner, donc sans effet sur le header/footer. */
	.apfi-hero__inner {
		/* .apfi-hero__inner reste de largeur "contenu" (elle épouse la largeur
		   de son propre contenu, plafonné par max-width plus haut) : en tant
		   qu'enfant du conteneur flex .apfi-hero, elle serait donc centrée
		   par les marges automatiques héritées de .apfi-container — exactement
		   ce qui produit l'alignement (approuvé) du desktop, mais qui, ici,
		   annulerait le décalage vers la gauche voulu par le padding
		   ci-dessus. On neutralise donc uniquement la marge gauche pour cette
		   plage : la marge droite reste automatique et absorbe tout l'espace
		   libéré à droite, sans toucher au mécanisme utilisé en desktop. */
		padding-left: clamp(42px, 5.8vw, 56px);
		margin-left: 0;
	}
}

/* Les CTA restent côte à côte dès qu'il y a assez de largeur, y compris en
   mise en page mobile empilée (au-dessus de 600px de large). En dessous,
   ils repassent en pile verticale (comportement de secours, voir la règle
   de base `flex-wrap: wrap`). */
@media (min-width: 600px) {
	.apfi-hero__ctas {
		flex-wrap: nowrap;
	}
}

/* La ligne des 4 expertises passe à 4 colonnes seulement à partir de
   900px : en dessous (tablette portrait), 2 colonnes évitent que les
   libellés ("Coordination SSI", "Formation incendie & SST"…) ne se
   chevauchent avec les icônes voisines. */
@media (min-width: 900px) {
	.apfi-hero__expertises {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --- Header : espacements desktop plus généreux --- */
/* --- Header desktop : à partir de 1200px (voir TEMPS 18B, 17/09/2026) ---
   Trois objectifs, aucun changement de design : (1) aucun libellé ne doit
   passer sur deux lignes, (2) les écarts visuels entre libellés doivent être
   strictement identiques, (3) la navigation doit être réellement centrée
   entre le logo et le CTA, et non plaquée à droite.
   Logo, couleurs, typographie, hauteur du Header, aspect du CTA et
   soulignement de la page active restent inchangés. */
@media (min-width: 1200px) {
	/* 32px (au lieu de 44px) : libère 24px des deux gaps extérieurs, au
	   bénéfice de la navigation. Valeur à réévaluer visuellement. */
	.apfi-header__inner {
		gap: 32px;
	}

	/* Le `margin-right: auto` du logo (conservé en mobile, où il repousse le
	   CTA et le hamburger vers la droite) absorbait à lui seul TOUT l'espace
	   libre de la ligne : la navigation se retrouvait collée au CTA. On le
	   neutralise en desktop et on confie l'espace libre à la navigation
	   elle-même, qui le répartit à parts égales de chaque côté. */
	.apfi-logo {
		margin-right: 0;
	}
	.apfi-nav {
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
	}

	/* Rythme horizontal : les libellés ne doivent jamais s'enrouler, sans
	   quoi les boîtes changent de largeur et de hauteur et l'alignement
	   vertical (align-items: center) casse la régularité perçue. Aucune
	   largeur n'est imposée aux items : seuls les écarts sont réguliers. */
	.apfi-nav__list > .menu-item {
		flex-shrink: 0;
	}
	.apfi-nav__list > .menu-item > a {
		white-space: nowrap;
	}
}

/* --- Bandeau secteurs ---
   Mobile (base ci-dessus) : liste en grille 2 colonnes, sans séparateurs.
   Dès 768px (tablette) : la liste passe en ligne flexible qui s'enroule
   naturellement sur 2 lignes si besoin, label et liste côte à côte.
   Dès 1280px (desktop, largeur du conteneur) : suffisamment de place pour
   tenir sur une seule ligne — on fige le "nowrap" et on ajoute les fins
   séparateurs verticaux entre secteurs (et entre le label et la liste),
   qui n'auraient pas de sens sur une liste qui s'enroule. */
@media (min-width: 768px) {
	.apfi-secteurs__inner {
		/* `nowrap` ici, volontairement : le libellé et la liste doivent
		   rester sur la même ligne de départ (libellé à gauche), et c'est la
		   liste elle-même qui s'enroule en interne sur 2 lignes si besoin
		   (voir .apfi-secteurs__list ci-dessous) — un `wrap` sur ce
		   conteneur ferait passer la liste ENTIÈRE à la ligne sous le
		   libellé dès qu'elle ne tient plus sur la première, plutôt que de
		   la laisser s'enrouler à côté de lui. */
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		column-gap: 20px;
		row-gap: 12px;
	}
	.apfi-secteurs__label {
		padding-top: 2px;
	}
	.apfi-secteurs__list {
		display: flex;
		flex-wrap: wrap;
		width: auto;
		flex: 1 1 0%;
		min-width: 0;
		column-gap: 16px;
		row-gap: 12px;
	}
}

/* Seuil propre au bandeau (indépendant des seuils Header/Hero) : mesuré
   empiriquement comme la largeur minimale à laquelle le label + les 8
   secteurs, avec cet espacement resserré, tiennent sur une seule ligne
   sans déborder du conteneur (1280px) ni de la page à ses abords. */
@media (min-width: 1280px) {
	.apfi-secteurs__inner {
		flex-wrap: nowrap;
	}
	.apfi-secteurs__list {
		flex-wrap: nowrap;
		padding-left: 16px;
		border-left: 1px solid var(--apfi-border);
	}
	.apfi-secteurs__item:not(:first-child) {
		padding-left: 16px;
		border-left: 1px solid var(--apfi-border);
	}
	.apfi-secteurs__item span {
		white-space: nowrap;
	}
}

/* --- Section "Comment pouvons-nous vous accompagner ?" ---
   Seuils mesurés empiriquement (captures Playwright à intervalles réguliers
   entre 375px et 1920px), en privilégiant le rendu le plus équilibré plutôt
   qu'une grille strictement 3×2/2×3 forcée à tout prix (demande explicite) :
   - mobile (base ci-dessus) : 1 colonne, tuiles "horizontales" (16/10) pour
     limiter la hauteur totale de défilement sur 6 tuiles empilées.
   - 768px : 2 colonnes, tuiles plus verticales (4/5) — la largeur de
     colonne devient suffisante pour un format portrait sans titres trop
     comprimés.
   - 1024px : 3 colonnes (3×2), toujours en 4/5.
   - 1280px : les 6 tuiles tiennent sur une seule ligne (souhait explicite
     "desktop large"). À cette largeur précise, le conteneur standard
     (1184px de contenu utile) ne laisse que ~180px par tuile : on resserre
     légèrement le texte/la puce flèche pour cette seule plage plutôt que
     d'élargir la grille, ce qui déborderait le conteneur avant 1280px.
   - 1440px et au-delà : assez de marge extérieure pour élargir UNIQUEMENT
     la grille (pas le bloc surtitre/titre/intro, qui reste sur
     .apfi-container) au-delà de 1280px, ce qui redonne de l'air à chaque
     tuile sans casser l'alignement du titre de section. */
@media (min-width: 768px) {
	.apfi-besoins__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
	.apfi-besoins__tuile {
		aspect-ratio: 4 / 5;
	}
}

@media (min-width: 1024px) {
	.apfi-besoins__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.apfi-besoins__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 14px;
	}
	.apfi-besoins__tuile {
		aspect-ratio: 3 / 4;
	}
	.apfi-besoins__content {
		/* Même logique qu'en base (marge basse/gauche renforcée), resserrée
		   pour rester proportionnée aux tuiles plus étroites à cette largeur. */
		padding: 14px 14px 18px 16px;
	}
	.apfi-besoins__tuile-title {
		font-size: 0.86rem;
		line-height: 1.25;
	}
	.apfi-besoins__arrow {
		width: 28px;
		height: 28px;
	}
	.apfi-besoins__arrow svg {
		width: 14px;
		height: 14px;
	}
}

@media (min-width: 1440px) {
	.apfi-besoins__grid-wrap {
		max-width: 1400px;
	}
}

@media (min-width: 1680px) {
	.apfi-besoins__grid-wrap {
		max-width: 1560px;
	}
}

/* --- Section "Nos expertises" ---
   Seuils mesurés empiriquement (captures Playwright de 375px à 1920px),
   comme pour la section 4 : 4 éléments assez courts (icône + titre + 2-3
   lignes de description) se prêtent bien à une seule ligne dès le desktop,
   sans qu'il soit nécessaire de forcer un 2×2. */
@media (min-width: 640px) {
	.apfi-expertises__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
		row-gap: 40px;
	}
}

@media (min-width: 1024px) {
	.apfi-expertises__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 28px;
	}
}

/* --- Section "Notre méthode" ---
   Seuils mesurés empiriquement (captures Playwright de 375px à 1920px) :
   la mise en page à 2 colonnes (photo + timeline) a besoin d'assez de
   largeur pour que chaque colonne respire sans comprimer le texte des
   étapes ni réduire la photo à une vignette — en dessous, la photo garde
   la priorité visuelle en pleine largeur, timeline empilée en dessous. */

/* Tablette : photo plus panoramique (16/9) qu'en mobile — ajustement du
   05/09/2026, même seuil que les autres sections (768px) pour rester
   cohérent. Ne touche qu'au ratio de la photo ; la timeline reste inchangée
   à cette largeur (toujours empilée sous la photo, cf. bloc 1024px+
   ci-dessous pour le passage réel en 2 colonnes). */
@media (min-width: 768px) {
	.apfi-methode__media {
		aspect-ratio: 16 / 9;
	}
}

@media (min-width: 1024px) {
	.apfi-methode__layout {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		/* Sticky testé empiriquement (scroll Playwright, mesure de la position
		   de la photo à chaque pas de défilement) : ne s'accroche jamais — le
		   garde-fou global `.apfi-body { overflow-x: hidden; }` (Header/Hero,
		   figé) fait calculer `overflow-y` à `auto` sur le <body>, ce qui
		   neutralise `position: sticky` pour tous ses descendants (comportement
		   CSS standard, pas un bug de cette section). Corriger la section 6
		   nécessiterait donc de modifier une règle globale déjà validée — exclu.
		   Conformément à la consigne ("si le sticky nuit à l'expérience,
		   préfère une photo fixe classique"), on garde une photo statique,
		   mais étirée en pleine hauteur de la ligne de grille (`stretch`) pour
		   rester "grande photo premium" plutôt qu'une vignette courte avec du
		   vide en dessous. */
		align-items: stretch;
		gap: 64px;
	}

	.apfi-methode__media {
		aspect-ratio: auto;
	}

	.apfi-methode__step-marker {
		width: 40px;
		height: 40px;
		font-size: 1rem;
	}

	.apfi-methode__timeline::before {
		top: 20px;
		bottom: 20px;
		left: 19px;
	}

	.apfi-methode__step-body {
		padding-top: 8px;
	}

	.apfi-methode__step-title {
		font-size: 1.15rem;
	}

	.apfi-methode__step:not(:last-child) {
		padding-bottom: 32px;
	}
}

/* --- Section "Pourquoi APFI" ---
   Seuils mesurés empiriquement (captures Playwright de 320px à 1920px) :
   la checklist (intitulés courts) passe en 2 colonnes dès qu'elle a assez
   de largeur pour rester lisible sans casser un intitulé sur 3 lignes —
   bien avant le seuil de bascule du bloc entier en 2 colonnes (texte de
   positionnement + checklist), qui a besoin de nettement plus de place,
   même seuil que la section 6 pour rester cohérent avec le reste du site. */
@media (min-width: 600px) {
	.apfi-pourquoi__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 28px;
	}
}

@media (min-width: 1024px) {
	.apfi-pourquoi__layout {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 56px;
	}

	.apfi-pourquoi__text {
		max-width: 420px;
	}
}

/* --- Section "Nos réalisations" (section 8) ---
   Seuils mesurés empiriquement (captures Playwright de 320px à 1920px) :
   2 colonnes dès que chaque carte a assez de largeur pour que la photo
   4/3 ne devienne pas trop étroite (texte qui se resserre), 3 colonnes à
   partir du seuil desktop habituel du site. */
@media (min-width: 640px) {
	.apfi-realisations__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 28px;
	}
}

@media (min-width: 1024px) {
	.apfi-realisations__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px 32px;
	}
}

/* --- Section "Ils nous font confiance" (section 9) — portrait rond de
   Jesus Ortiz VALIDÉ ET FIGÉ (voir section 12 ci-dessus) ---
   Seuils mesurés empiriquement (captures Playwright de 320px à 1920px) :
   la composition s'élargit progressivement (mobile étroit → tablette →
   grande largeur desktop) pour rester un "témoignage éditorial" plutôt
   qu'un bloc de texte comprimé, sans jamais aller jusqu'à occuper toute la
   largeur du conteneur (une citation trop large devient difficile à lire). */
@media (min-width: 768px) {
	.apfi-temoignages__wrap {
		max-width: 640px;
	}

	.apfi-temoignages__text p {
		font-size: 1.45rem;
	}
}

@media (min-width: 1024px) {
	.apfi-temoignages__wrap {
		max-width: 820px;
	}

	.apfi-temoignages__mark {
		width: 40px;
		height: 40px;
		margin-bottom: 24px;
	}

	.apfi-temoignages__text p {
		font-size: 1.75rem;
	}

	.apfi-temoignages__author {
		margin-top: 36px;
	}

	.apfi-temoignages__portrait {
		width: 72px;
		height: 72px;
	}
}

/* --- Section "FAQ" (section 10) ---
   Seuils mesurés empiriquement (captures Playwright de 320px à 1920px) :
   la liste reste en une seule colonne à tous les gabarits (un accordéon
   n'a pas besoin de grille), seuls la taille de texte et l'espacement
   augmentent légèrement à partir du desktop. */
@media (min-width: 1024px) {
	.apfi-faq__question {
		padding-block: 22px;
		font-size: 1.05rem;
	}

	.apfi-faq__answer {
		padding-bottom: 24px;
	}
}

/* --- Section "Numérique responsable" (section 11) ---
   Même seuil desktop que le reste du site (1024px), pour rester cohérent :
   en dessous, le bandeau reste empilé (texte puis marqueurs) — voir la
   section 14 ci-dessus pour l'état mobile/tablette de base. */
@media (min-width: 1024px) {
	.apfi-numerique__layout {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 56px;
		align-items: center;
	}

	.apfi-numerique__text {
		max-width: 420px;
	}

	.apfi-numerique__markers {
		gap: 22px;
	}
}

/* --- Section "CTA final" (section 12) — VALIDÉE ET FIGÉE ---
   Seuil propre à cette section (640px, en dessous du seuil desktop
   habituel de 1024px) : dès qu'il y a assez de largeur pour deux boutons
   côte à côte sans les comprimer, on passe en ligne — y compris en
   tablette portrait, comme demandé. En dessous, les boutons restent
   empilés et occupent une largeur confortable sans forcer 100% de
   l'écran (voir .apfi-cta-final__actions ci-dessus, section 15). */
@media (min-width: 640px) {
	.apfi-cta-final__actions {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: auto;
		max-width: none;
	}
}

/* --- Section "Footer" (section 13) — VALIDÉE ET FIGÉE ---
   Seuils mesurés empiriquement (captures Playwright de 320px à 1920px) :
   - Mobile (< 768px, base ci-dessus) : les 4 zones sont empilées dans
     l'ordre demandé (marque → navigation → prestations → secteurs), la
     barre légale est empilée (copyright puis liens), les secteurs restent
     en 2 colonnes internes pour ne pas allonger inutilement le footer.
   - 768px (tablette) : organisation 2×2, la plus propre à cette largeur
     pour 4 zones de longueur inégale.
   - 1024px (desktop) : les 4 zones tiennent sur une seule ligne (zone
     "marque" plus large que les 3 autres), la barre légale bascule en
     ligne (copyright à gauche, liens légaux à droite). */
@media (min-width: 768px) {
	.apfi-footer__grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 40px;
		row-gap: 36px;
	}
}

@media (min-width: 1024px) {
	.apfi-footer__grid {
		grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
		gap: 48px;
	}

	.apfi-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* =========================================================================
   Composant "Packs commerciaux" (4 Packs APFI)
   VALIDÉE ET FIGÉE (06/09/2026) — ne plus modifier sans demande explicite.
   Voir template-parts/packs.php et inc/cpt-pack.php. Composant réutilisable
   validé définitivement par le client, pas encore inclus dans front-page.php
   ni dans aucune page : ne fait PAS partie des 13 sections figées de la
   page d'accueil ci-dessus (composant distinct, intégration prévue lors de
   la conception de la page "Nos solutions" / "Nos Packs").

   Direction graphique demandée par le client : transposer la logique des
   flyers Packs existants en composants web sobres — identité par icône
   (pas de photo), pas d'effet SaaS, pas de grosses ombres, pas de cartes
   lourdes. Traitement retenu : une bordure fine (--apfi-border) plutôt
   qu'une ombre, un fond blanc légèrement différencié du fond de page
   (--apfi-bg), une icône ronde dans le même style que les sections 5 et 7
   (.apfi-expertises__icon / .apfi-pourquoi__icon).

   Responsive — seuils mesurés empiriquement (captures Playwright de 375px
   à 1920px) : le contenu de chaque carte (tagline + pitch + aperçu des
   prestations incluses + bénéfices + CTA) est nettement plus dense que les
   tuiles/icônes des sections 4/5/7. Un essai en 4 colonnes sur une seule
   ligne dès le desktop (comme les sections 4 et 5) a été explicitement
   testé et écarté : à largeur de conteneur égale (1280px), les 4 cartes
   deviennent trop étroites pour rester lisibles avec ce niveau de contenu.
   La grille reste donc en 2×2 de la tablette jusqu'au grand desktop, ce qui
   correspond aussi à la demande explicite du client pour le palier
   tablette — seul le mobile passe en colonne unique.
   ========================================================================= */
.apfi-packs {
	padding-block: clamp(40px, 5vw, 64px);
}

.apfi-packs__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.apfi-pack-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	padding: clamp(24px, 3vw, 32px);
	background: var(--apfi-white);
	border: 1px solid var(--apfi-border);
	border-radius: var(--apfi-radius-md);
}

.apfi-pack-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.apfi-pack-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--apfi-blue-tint-10);
	color: var(--apfi-blue);
	padding: 13px;
	box-sizing: border-box;
}

.apfi-pack-card__icon .apfi-icon {
	width: 100%;
	height: 100%;
}

.apfi-pack-card__badge {
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--apfi-blue);
	background: var(--apfi-blue-tint-05);
	padding: 6px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

.apfi-pack-card__name {
	margin: 0 0 6px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--apfi-navy-text);
}

.apfi-pack-card__tagline {
	margin: 0 0 10px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--apfi-blue);
}

.apfi-pack-card__pitch {
	margin: 0 0 14px;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(16, 31, 51, 0.72);
}

.apfi-pack-card__public {
	margin: 0 0 18px;
	font-size: 0.85rem;
	line-height: 1.5;
	font-style: italic;
	color: rgba(16, 31, 51, 0.58);
}

.apfi-pack-card__list {
	list-style: none;
	margin: 0 0 18px;
	padding: 14px 0 0;
	border-top: 1px solid var(--apfi-border);
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.apfi-pack-card__list-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--apfi-navy-text);
}

.apfi-pack-card__list-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 0.15em;
	color: var(--apfi-blue);
}

.apfi-pack-card__list-more {
	font-size: 0.85rem;
	color: rgba(16, 31, 51, 0.58);
	padding-left: 24px;
}

.apfi-pack-card__benefices {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.apfi-pack-card__benefice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.78rem;
	color: var(--apfi-navy-text);
	background: var(--apfi-bg-tint);
	padding: 6px 10px;
	border-radius: 999px;
}

.apfi-pack-card__benefice-icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	color: var(--apfi-blue);
}

.apfi-pack-card__footer {
	margin-top: auto;
	padding-top: 4px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.apfi-pack-card__cta {
	width: 100%;
	justify-content: center;
}

/* Pas de lien de détail renseigné (page pas encore créée) : le bouton
   reste visible (même gabarit) mais non cliquable — jamais de lien "#" qui
   ne mène nulle part, même principe que .apfi-besoins__tuile sans lien. */
.apfi-pack-card__cta--disabled {
	cursor: default;
	background: var(--apfi-bg-tint);
	color: rgba(16, 31, 51, 0.45);
}
.apfi-pack-card__cta--disabled:hover {
	background: var(--apfi-bg-tint);
}

.apfi-pack-card__pdf {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--apfi-blue);
	text-decoration: none;
}
.apfi-pack-card__pdf .apfi-icon {
	width: 16px;
	height: 16px;
}
.apfi-pack-card__pdf:hover,
.apfi-pack-card__pdf:focus-visible {
	text-decoration: underline;
}

@media (min-width: 768px) {
	.apfi-packs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 28px;
	}
}

@media (min-width: 1024px) {
	.apfi-packs__grid {
		gap: 32px;
	}
}

/* =========================================================================
   Page "Nos solutions"
   VALIDÉE ET FIGÉE (06/09/2026) — ne plus modifier sans demande explicite.
   Voir page-nos-solutions.php et les template-parts/nos-solutions-*.php.
   Nouvelle page, sans impact sur la page d'accueil (toutes sections figées
   ci-dessus) ni sur le composant Packs (repris strictement tel quel, voir
   "Composant 'Packs commerciaux'" plus haut). Validation finale le
   06/09/2026 après un tour d'ajustements éditoriaux (bloc "comment choisir"
   et CTA final — voir claude/architecture-technique.md, "Étape 14"). Les
   placeholders des tuiles "Quelle est votre situation ?" restent en place
   (passe iconographique dédiée à traiter ultérieurement), sans remettre en
   cause ce figeage structurel.

   Alternance de fonds cohérente avec le reste du site (blanc / blanc cassé
   / bleu très clair) : en-tête (fond de base), besoins (blanc, classes
   .apfi-besoins réutilisées telles quelles), prestations (bleu très clair),
   Packs (blanc), comment choisir (bleu très clair), CTA final (bleu plein,
   classes .apfi-cta-final réutilisées telles quelles).
   ========================================================================= */

/* --- En-tête de page ---
   Ajustement du 06/09/2026 (demande explicite du client) : ajout d'une
   photo, réutilisant l'esprit du Hero de la Home mais en nettement plus
   compact, sans CTA. En mobile (base ci-dessous), la photo reste un bloc à
   part sous le texte, dans le flux normal (même principe que
   .apfi-hero__media en mobile) — jamais de texte posé sur la photo à cette
   largeur. Dès 768px (voir le bloc média plus bas), la photo passe en fond
   plein cadre derrière le texte, qui s'appuie sur le dégradé clair déjà
   intégré à l'image (aucun dégradé CSS ajouté), comme le Hero de la Home. */
.apfi-ns-header {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.apfi-ns-header__content {
	padding-block: clamp(32px, 5vw, 48px) clamp(24px, 3.5vw, 32px);
	position: relative;
	z-index: 1;
}

.apfi-ns-header__media {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.apfi-ns-header__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 78% center;
	display: block;
}

@media (min-width: 768px) {
	.apfi-ns-header--has-media {
		min-height: clamp(320px, 26vw, 420px);
		display: flex;
		align-items: center;
	}
	/* TEMPS 18F (17/09/2026) — alignement sur la grille du site.
	   Auparavant, ce bloc portait `max-width: 460px` et `margin-inline: 0` :
	   il perdait le centrage hérité de .apfi-container et se collait au bord
	   gauche de la section, donc à 48px du bord de l'écran quelle que soit
	   la largeur — alors que tous les autres contenus du site commencent à
	   `(largeur - 1280px) / 2 + 48px`, soit 368px en 1920px. Le conteneur
	   retrouve ici le comportement horizontal standard (largeur du
	   conteneur, `margin-inline: auto`, `padding-inline` inchangé), et la
	   contrainte de largeur est reportée sur les éléments de texte. */
	.apfi-ns-header--has-media .apfi-ns-header__content {
		padding-block: clamp(32px, 5vw, 48px);
		/* Indispensable : la section est en `display: flex` dès 768px, et un
		   flex item se dimensionne sinon sur son contenu (shrink-to-fit) — le
		   bloc resterait large d'environ 460px et se recentrerait au milieu de
		   la section au lieu de reprendre la grille. */
		width: 100%;
	}
	/* La largeur de texte reste rigoureusement celle d'avant : le bloc mesurait
	   460px bordure comprise, dont 2 x `--apfi-container-padding` de padding —
	   la largeur réellement occupée par le texte était donc déjà
	   `460px - 2 x padding`. On la reconduit à l'identique, sans valeur magique. */
	.apfi-ns-header--has-media .apfi-ns-header__content > * {
		max-width: calc(460px - 2 * var(--apfi-container-padding));
	}
	.apfi-ns-header__media {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}
	.apfi-ns-header__image {
		/* Comme pour le Hero de la Home : le dégradé clair est déjà intégré
		   dans la photo côté gauche, on cale simplement le point focal pour
		   garder la partie architecturale (colonnes, verrière, escalier) la
		   plus lisible visible à droite, sans jamais recouvrir le texte. À
		   cette largeur, le conteneur reste proportionnellement plus large
		   que haut par rapport au ratio réel de la photo (1983:793) : `cover`
		   cale sur la largeur du conteneur et rogne surtout verticalement,
		   donc `object-position` n'a ici qu'un effet limité. */
		object-position: 68% center;
	}
}

/* Tablette (768–1023px) : la mise en page devient plus haute et plus
   étroite par rapport au ratio réel de la photo qu'en grand desktop —
   `cover` se met alors à rogner horizontalement (comportement identique à
   celui déjà documenté pour le Hero de la Home). Sans correction, le point
   focal calé pour le desktop pousserait le dégradé clair hors champ et le
   texte se retrouverait sur la partie photographique la plus chargée. On
   resserre donc la colonne de texte et on ramène le point focal vers la
   gauche pour garder à la fois une bonne lisibilité du texte et une partie
   significative de l'architecture visible à droite, sans recadrage
   agressif ni déformation. */
@media (min-width: 768px) and (max-width: 1023px) {
	.apfi-ns-header--has-media .apfi-ns-header__content > * {
		max-width: calc(min(360px, 48vw) - 2 * var(--apfi-container-padding));
	}
	.apfi-ns-header__image {
		object-position: 22% center;
	}
}

.apfi-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 clamp(20px, 3vw, 32px);
	font-size: 0.85rem;
	color: rgba(16, 31, 51, 0.6);
}

.apfi-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.apfi-breadcrumb a:hover,
.apfi-breadcrumb a:focus-visible {
	color: var(--apfi-blue);
}

.apfi-breadcrumb__sep {
	color: rgba(16, 31, 51, 0.35);
}

.apfi-ns-header__eyebrow {
	margin: 0 0 10px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-ns-header__title {
	margin: 0 0 16px;
	font-family: var(--apfi-font-heading);
	font-weight: 700;
	font-size: clamp(2rem, 4.5vw, 2.75rem);
	line-height: 1.15;
	color: var(--apfi-navy-text);
	max-width: 760px;
}

.apfi-ns-header__intro {
	margin: 0;
	max-width: 620px;
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.72);
}

/* --- Section "Nos prestations" (détaillée) --- */
/* Ancre `#prestations` — TEMPS 18H (17/09/2026).
   Le Header est `position: sticky; top: 0` : lors d'une arrivée par l'ancre
   (bouton « Découvrir nos prestations » de la Home), le navigateur cale le
   haut de la section sur le haut du viewport, et le Header vient donc
   recouvrir les 85px suivants (84px de `--apfi-header-height` + 1px de
   bordure). Le `padding-top` de la section valant 48 à 80px selon la
   largeur, il était intégralement mangé, et l'eyebrow « NOS PRESTATIONS »
   se retrouvait collé sous le Header, voire partiellement masqué.
   `scroll-margin-top` ne s'applique QU'À l'arrivée par l'ancre : la mise en
   page normale de la section, en défilement manuel, est strictement
   inchangée. La valeur reprend la hauteur réelle du Header et y ajoute
   24px, de sorte qu'un liseré du fond blanc de la section précédente
   (.apfi-besoins) reste visible entre le Header et le bloc gris-bleuté. */
#prestations {
	scroll-margin-top: calc(var(--apfi-header-height) + 24px);
}

.apfi-ns-prestations {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-bg-tint);
}

.apfi-ns-prestations__head {
	margin-bottom: clamp(28px, 4vw, 44px);
}

.apfi-ns-prestations__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-ns-prestations__title {
	margin: 0 0 12px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
	max-width: 640px;
}

.apfi-ns-prestations__intro {
	margin: 0;
	max-width: 620px;
	font-size: 1rem;
	color: rgba(16, 31, 51, 0.72);
}

.apfi-ns-prestations__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	border-top: 1px solid var(--apfi-border);
}

.apfi-ns-prestations__item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding-block: 28px;
	border-bottom: 1px solid var(--apfi-border);
}

.apfi-ns-prestations__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--apfi-white);
	color: var(--apfi-blue);
	padding: 15px;
	box-sizing: border-box;
}

.apfi-ns-prestations__item-title {
	margin: 0 0 8px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.3;
	color: var(--apfi-navy-text);
}

.apfi-ns-prestations__item-desc {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.72);
	max-width: 60ch;
}

@media (min-width: 1024px) {
	.apfi-ns-prestations__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 48px;
		border-top: none;
	}
	.apfi-ns-prestations__item {
		border-bottom: none;
		border-top: 1px solid var(--apfi-border);
	}
	.apfi-ns-prestations__item:nth-child(-n+2) {
		border-top: none;
	}
}

/* --- Section "Nos Packs" (en-tête propre à la page + composant figé) --- */
.apfi-ns-packs {
	padding-block: clamp(48px, 6vw, 80px) 0;
	background: var(--apfi-white);
}

.apfi-ns-packs__head {
	margin-bottom: clamp(16px, 2.5vw, 24px);
}

.apfi-ns-packs__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-ns-packs__title {
	margin: 0 0 12px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
	max-width: 640px;
}

.apfi-ns-packs__intro {
	margin: 0;
	max-width: 620px;
	font-size: 1rem;
	color: rgba(16, 31, 51, 0.72);
}

/* --- Bloc "Prestation ou Pack, comment choisir ?" --- */
.apfi-ns-choisir {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-bg-tint);
}

.apfi-ns-choisir__title {
	margin: 0 0 clamp(28px, 4vw, 44px);
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.5rem, 2.8vw, 1.9rem);
	line-height: 1.25;
	color: var(--apfi-navy-text);
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
}

.apfi-ns-choisir__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	max-width: 760px;
	margin-inline: auto;
}

.apfi-ns-choisir__option {
	text-align: center;
	padding-top: 28px;
	border-top: 1px solid var(--apfi-border);
}

.apfi-ns-choisir__option:first-child {
	border-top: none;
	padding-top: 0;
}

.apfi-ns-choisir__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--apfi-blue-tint-10);
	color: var(--apfi-blue);
	padding: 13px;
	box-sizing: border-box;
}

.apfi-ns-choisir__option-title {
	margin: 0 0 8px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--apfi-navy-text);
}

.apfi-ns-choisir__option-text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(16, 31, 51, 0.72);
}

@media (min-width: 640px) {
	.apfi-ns-choisir__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 48px;
	}
	.apfi-ns-choisir__option {
		border-top: none;
		padding-top: 0;
		border-left: 1px solid var(--apfi-border);
	}
	.apfi-ns-choisir__option:first-child {
		border-left: none;
	}
}

/* =========================================================================
   Page détaillée d'un Pack (single-pack.php)
   VALIDÉE ET FIGÉE (06/09/2026) — ne plus modifier sans demande explicite.
   Gabarit unique, validé dans son intégralité sur le Pack pilote
   Ouverture & Réception ERP (voir claude/architecture-technique.md,
   "Étape 15"). Sera réutilisé, inchangé, pour les 3 autres Packs au fur
   et à mesure de la validation de leur contenu détaillé. Sans impact sur
   la Home, "Nos solutions", le Footer, ou le composant Packs
   (.apfi-pack-card, plus haut) : toutes les classes ci-dessous sont
   propres à cette page (.apfi-pack-hero, .apfi-pack-section,
   .apfi-pack-prestations, .apfi-pack-etapes, .apfi-pack-livrables,
   .apfi-pack-benefices, .apfi-pack-distinction, .apfi-pack-autres).

   Alternance de fonds cohérente avec le reste du site : Hero (bleu plein),
   prise en charge (bleu très clair), déroulé (blanc), résultats (bleu très
   clair), bénéfices (blanc), distinction (bleu très clair), CTA final
   (bleu plein, classes .apfi-cta-final réutilisées telles quelles), autres
   Packs (bleu très clair).
   ========================================================================= */

/* --- Hero --- */
.apfi-pack-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--apfi-blue);
	color: var(--apfi-white);
}

.apfi-pack-hero__layout {
	position: relative;
	z-index: 1;
	padding-block: clamp(40px, 6vw, 72px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 720px;
}

.apfi-pack-hero__breadcrumb {
	color: rgba(255, 255, 255, 0.7);
}
.apfi-pack-hero__breadcrumb a:hover,
.apfi-pack-hero__breadcrumb a:focus-visible {
	color: var(--apfi-white);
}
.apfi-pack-hero__breadcrumb .apfi-breadcrumb__sep {
	color: rgba(255, 255, 255, 0.4);
}

.apfi-pack-hero__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: var(--apfi-white);
	padding: 16px;
	box-sizing: border-box;
}
.apfi-pack-hero__icon .apfi-icon {
	width: 100%;
	height: 100%;
}

.apfi-pack-hero__badge {
	display: inline-block;
	margin-bottom: 14px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-white);
	background: rgba(255, 255, 255, 0.16);
	padding: 6px 14px;
	border-radius: 999px;
}

.apfi-pack-hero__title {
	margin: 0 0 14px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	line-height: 1.15;
	color: var(--apfi-white);
}

.apfi-pack-hero__tagline {
	margin: 0 0 12px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--apfi-white);
}

.apfi-pack-hero__public {
	margin: 0 0 28px;
	max-width: 60ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

.apfi-pack-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* --- Hero hybride : photo réelle + dégradé (test en cours, 06/09/2026) ---
   Tant qu'aucune photo n'est renseignée pour un Pack (pas de modificateur
   `--has-media`), le Hero reste strictement bleu plein : rien ci-dessous
   ne s'applique et le rendu est identique à l'ancienne version texte-seul.
   Mobile (base ci-dessous) : photo en bloc simple sous le contenu, dans le
   flux normal, sans dégradé — même principe que .apfi-ns-header__media en
   mobile (jamais de texte posé sur la photo à cette largeur). À partir de
   768px (voir les deux blocs media queries plus bas), la photo passe en
   fond plein cadre à droite, avec un dégradé bleu progressif (jamais de
   coupure nette) ; la part de photo visible est réduite sur tablette par
   rapport au desktop (dégradé qui se termine plus tôt). */
.apfi-pack-hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.apfi-pack-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.apfi-pack-hero__media-veil {
	display: none;
}

@media (min-width: 768px) {
	.apfi-pack-hero--has-media .apfi-pack-hero__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		aspect-ratio: auto;
	}
	.apfi-pack-hero--has-media .apfi-pack-hero__image {
		object-position: 78% center;
	}
	.apfi-pack-hero--has-media .apfi-pack-hero__media-veil {
		display: block;
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to right,
			var(--apfi-blue) 0%,
			var(--apfi-blue) 34%,
			rgba(11, 64, 154, 0.92) 44%,
			rgba(11, 64, 154, 0.35) 58%,
			rgba(11, 64, 154, 0) 72%
		);
	}
	.apfi-pack-hero--has-media .apfi-pack-hero__layout {
		max-width: 600px;
	}
}

@media (min-width: 1024px) {
	.apfi-pack-hero--has-media .apfi-pack-hero__media-veil {
		background: linear-gradient(
			to right,
			var(--apfi-blue) 0%,
			var(--apfi-blue) 40%,
			rgba(11, 64, 154, 0.9) 50%,
			rgba(11, 64, 154, 0.3) 66%,
			rgba(11, 64, 154, 0) 82%
		);
	}
	.apfi-pack-hero--has-media .apfi-pack-hero__layout {
		max-width: 660px;
	}
}

/* --- Structure commune des sections de contenu --- */
.apfi-pack-section {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-white);
}

.apfi-pack-section--tint {
	background: var(--apfi-bg-tint);
}

.apfi-pack-section__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-pack-section__title {
	margin: 0 0 clamp(28px, 4vw, 40px);
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
	max-width: 640px;
}

/* --- "Ce qu'APFI prend en charge" --- */
.apfi-pack-prestations__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.apfi-pack-prestations__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px;
	background: var(--apfi-white);
	border-radius: var(--apfi-radius-md);
}

.apfi-pack-prestations__icon {
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 0.2em;
	color: var(--apfi-blue);
}

.apfi-pack-prestations__item-title {
	margin: 0 0 6px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--apfi-navy-text);
}

.apfi-pack-prestations__item-desc {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(16, 31, 51, 0.72);
}

@media (min-width: 768px) {
	.apfi-pack-prestations__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- "Comment se déroule l'accompagnement" ---
   Timeline horizontale sur desktop, verticale sur mobile ; sur tablette,
   adaptée à la largeur réellement disponible (repli sur 2 colonnes) plutôt
   que de forcer l'horizontal sur un nombre d'étapes variable (demande
   explicite du client) — voir les points de rupture ci-dessous, mesurés
   empiriquement comme le reste du site. */
.apfi-pack-etapes__timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.apfi-pack-etapes__step {
	display: flex;
	gap: 16px;
	padding-block: 18px;
	border-top: 1px solid var(--apfi-border);
}
.apfi-pack-etapes__step:last-child {
	border-bottom: 1px solid var(--apfi-border);
}

.apfi-pack-etapes__step-marker {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--apfi-blue);
	color: var(--apfi-white);
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
}

.apfi-pack-etapes__step-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 4px;
}

.apfi-pack-etapes__step-title {
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--apfi-navy-text);
}

.apfi-pack-etapes__step-desc {
	font-size: 0.92rem;
	line-height: 1.5;
	color: rgba(16, 31, 51, 0.72);
	max-width: 42ch;
}

/* Tablette : bascule sur une grille 2 colonnes plutôt qu'une ligne
   horizontale unique, pour rester lisible quel que soit le nombre
   d'étapes du Pack affiché. */
@media (min-width: 640px) and (max-width: 1023px) {
	.apfi-pack-etapes__timeline {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px 32px;
	}
	.apfi-pack-etapes__step {
		border-top: 1px solid var(--apfi-border);
	}
	.apfi-pack-etapes__step:last-child {
		border-bottom: none;
	}
	.apfi-pack-etapes__step:nth-last-child(-n+2):nth-child(odd),
	.apfi-pack-etapes__step:nth-last-child(-n+2):nth-child(even) {
		border-bottom: 1px solid var(--apfi-border);
	}
}

/* Desktop : timeline horizontale, une colonne par étape. */
@media (min-width: 1024px) {
	.apfi-pack-etapes__timeline {
		display: grid;
		grid-template-columns: repeat(var(--apfi-pack-etapes-count, 5), minmax(0, 1fr));
		gap: 0 20px;
	}
	.apfi-pack-etapes__step {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding-block: 0 0;
		border-top: none;
		border-left: 1px solid var(--apfi-border);
		padding-left: 16px;
	}
	.apfi-pack-etapes__step:last-child {
		border-bottom: none;
	}
	.apfi-pack-etapes__step-body {
		padding-top: 0;
	}
	.apfi-pack-etapes__step-desc {
		max-width: none;
	}
}

/* --- "Ce que vous obtenez" --- */
.apfi-pack-livrables__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.apfi-pack-livrables__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: var(--apfi-white);
	border-radius: var(--apfi-radius-sm);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--apfi-navy-text);
}

.apfi-pack-livrables__icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--apfi-blue);
}

@media (min-width: 768px) {
	.apfi-pack-livrables__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- "Les bénéfices pour vous" --- */
.apfi-pack-benefices__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.apfi-pack-benefices__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--apfi-navy-text);
	background: var(--apfi-bg-tint);
	padding: 10px 16px;
	border-radius: 999px;
}

.apfi-pack-benefices__icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--apfi-blue);
}

/* --- "Prestation ou Pack, ce qui change ?" --- */
.apfi-pack-distinction {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	max-width: 760px;
}

.apfi-pack-distinction__icon {
	flex: none;
	width: 40px;
	height: 40px;
	margin-top: 4px;
	color: var(--apfi-blue);
}

.apfi-pack-distinction__title {
	margin: 0 0 8px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.3rem;
	color: var(--apfi-navy-text);
}

.apfi-pack-distinction__text {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.72);
}

/* --- "Découvrir nos autres Packs" --- */
.apfi-pack-autres__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.apfi-pack-autres__card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	background: var(--apfi-white);
	border-radius: var(--apfi-radius-md);
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.apfi-pack-autres__card:hover,
a.apfi-pack-autres__card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(16, 31, 51, 0.08);
}

/* Pack pas encore activé (pack_detail_actif désactivé) : carte non
   cliquable — même principe que .apfi-pack-card__cta--disabled, jamais de
   lien "#" qui ne mène nulle part. */
span.apfi-pack-autres__card--disabled {
	cursor: default;
	opacity: 0.6;
}

.apfi-pack-autres__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--apfi-blue-tint-10);
	color: var(--apfi-blue);
	padding: 11px;
	box-sizing: border-box;
}
.apfi-pack-autres__icon .apfi-icon {
	width: 100%;
	height: 100%;
}

.apfi-pack-autres__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
}

.apfi-pack-autres__name {
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--apfi-navy-text);
}

.apfi-pack-autres__tagline {
	font-size: 0.85rem;
	color: rgba(16, 31, 51, 0.6);
}

.apfi-pack-autres__arrow {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--apfi-blue);
}

@media (min-width: 768px) {
	.apfi-pack-autres__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.apfi-pack-autres__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =========================================================================
   Page "Secteurs d'activité" (page-secteurs-activite.php)
   VALIDÉE ET FIGÉE (07/09/2026) — ne plus modifier sans demande explicite.
   Développement du 07/09/2026, sur la base de la maquette fonctionnelle et
   des contenus éditoriaux validés. Sans impact sur la Home, "Nos
   solutions", les pages Pack, le Header ou le Footer : toutes les classes
   ci-dessous sont propres à cette page (.apfi-secteurs-hero,
   .apfi-secteurs-panorama, .apfi-secteurs-enjeux, .apfi-secteurs-methode,
   .apfi-secteurs-ns, .apfi-secteurs-multi). Le CTA final réutilise
   .apfi-cta-final tel quel (voir plus haut, section CTA final).

   Alternance de fonds : Hero (bleu plein), Panorama (blanc), Enjeux (bleu
   très clair), Méthode (blanc), Passerelle Nos solutions (bleu très
   clair), Multi-établissements (blanc), CTA final (bleu plein).

   Validation finale après plusieurs tours d'ajustements visuels post-
   développement (07/09/2026) : centrage Flexbox de la dernière ligne
   incomplète du panorama, CTA secondaire compact du bloc multi-
   établissements, respiration verticale grille -> bande ERP, et surtout
   un bug de hauteur Flexbox corrigé sur .apfi-secteurs-panorama__cell /
   __tuile (percentage-height ne se résolvant pas contre la hauteur
   étirée du parent flex, faisant déborder visuellement les tuiles de
   leur ligne) — voir les commentaires détaillés sur ces deux classes
   ci-dessous, et claude/architecture-technique.md pour l'historique
   complet des échanges de validation.
   ========================================================================= */

/* --- Hero --- */
.apfi-secteurs-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--apfi-blue);
	color: var(--apfi-white);
}

.apfi-secteurs-hero__layout {
	position: relative;
	z-index: 1;
	padding-block: clamp(40px, 6vw, 72px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 720px;
}

.apfi-secteurs-hero__breadcrumb {
	color: rgba(255, 255, 255, 0.7);
}
.apfi-secteurs-hero__breadcrumb a:hover,
.apfi-secteurs-hero__breadcrumb a:focus-visible {
	color: var(--apfi-white);
}
.apfi-secteurs-hero__breadcrumb .apfi-breadcrumb__sep {
	color: rgba(255, 255, 255, 0.4);
}

.apfi-secteurs-hero__eyebrow {
	margin: 18px 0 14px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.apfi-secteurs-hero__title {
	margin: 0 0 14px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	line-height: 1.15;
	color: var(--apfi-white);
}

.apfi-secteurs-hero__intro {
	margin: 0;
	max-width: 60ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

/* Media : même principe que .apfi-pack-hero__media (voir plus haut) —
   mobile : bloc simple sous le contenu, jamais de texte posé dessus. À
   partir de 768px : fond plein cadre à droite avec dégradé bleu progressif,
   texte toujours entièrement dans la zone bleue. Tant qu'aucune photo n'est
   renseignée, le Hero reste strictement bleu plein (pas de classe
   `--has-media`, rien ci-dessous ne s'applique). */
.apfi-secteurs-hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.apfi-secteurs-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.apfi-secteurs-hero__media-veil {
	display: none;
}

@media (min-width: 768px) {
	.apfi-secteurs-hero--has-media .apfi-secteurs-hero__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		aspect-ratio: auto;
	}
	.apfi-secteurs-hero--has-media .apfi-secteurs-hero__image {
		object-position: 78% center;
	}
	.apfi-secteurs-hero--has-media .apfi-secteurs-hero__media-veil {
		display: block;
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to right,
			var(--apfi-blue) 0%,
			var(--apfi-blue) 34%,
			rgba(11, 64, 154, 0.92) 44%,
			rgba(11, 64, 154, 0.35) 58%,
			rgba(11, 64, 154, 0) 72%
		);
	}
	.apfi-secteurs-hero--has-media .apfi-secteurs-hero__layout {
		max-width: 600px;
	}
}

@media (min-width: 1024px) {
	.apfi-secteurs-hero--has-media .apfi-secteurs-hero__media-veil {
		background: linear-gradient(
			to right,
			var(--apfi-blue) 0%,
			var(--apfi-blue) 40%,
			rgba(11, 64, 154, 0.9) 50%,
			rgba(11, 64, 154, 0.3) 66%,
			rgba(11, 64, 154, 0) 82%
		);
	}
	.apfi-secteurs-hero--has-media .apfi-secteurs-hero__layout {
		max-width: 660px;
	}
}

/* --- Panorama des secteurs --- */
.apfi-secteurs-panorama {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-white);
}

.apfi-secteurs-panorama__head {
	margin-bottom: clamp(24px, 4vw, 36px);
	max-width: 640px;
}

.apfi-secteurs-panorama__title {
	margin: 0 0 8px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
}

.apfi-secteurs-panorama__intro {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.7);
}

/* Grille du panorama : Flexbox (et non CSS Grid) délibérément, pour pouvoir
   centrer la dernière ligne incomplète (7 environnements) sans changer ni
   les breakpoints, ni le nombre de colonnes, ni les dimensions des tuiles
   (ajustement validé le 07/09/2026). Le nombre de colonnes par palier est
   piloté uniquement par flex-basis sur .apfi-secteurs-panorama__cell ;
   justify-content: center regroupe visuellement les éléments isolés d'une
   ligne incomplète au centre plutôt qu'à gauche. */
.apfi-secteurs-panorama__grid {
	list-style: none;
	/* Cette marge basse est la respiration entre la grille des 7 cartes et
	   la bande "ERP & établissements spécifiques" qui suit immédiatement
	   dans le flux normal du document (jamais de chevauchement : aucun
	   positionnement négatif/absolu ici). Volontairement distincte du gap
	   inter-lignes de la grille (14/16px) pour que l'ERP se lise comme une
	   section à part et non comme une 3e ligne de tuiles (ajustement
	   validé le 07/09/2026 : ~16-20px mobile / ~24px tablette / ~24-32px
	   desktop, voir les paliers ci-dessous). */
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.apfi-secteurs-panorama__cell {
	/* Cause réelle du chevauchement constaté (corrigé le 07/09/2026) : ce
	   <li> restait en display:list-item par défaut, une hauteur "auto".
	   .apfi-secteurs-panorama__tuile (le <a>, qui porte le fond gris et les
	   coins arrondis) avait "height: 100%" — mais un pourcentage ne peut se
	   résoudre que contre une hauteur DÉFINIE du parent, et ce <li> n'en
	   avait pas dans ce contexte : le navigateur retombait sur la hauteur
	   de contenu naturelle de la tuile (~151px), plus grande que la ligne
	   réellement réservée par le Flexbox parent (~105px). Résultat : le
	   rectangle gris visible débordait sous sa propre cellule, dans
	   l'espace de la ligne suivante puis de la bande ERP, alors que la
	   cellule elle-même (invisible, sans fond) mesurait la bonne hauteur.
	   Fix : ce <li> devient lui-même un conteneur flex (une seule tuile
	   dedans) afin que .tuile se limite via l'étirement flex natif
	   (default align-items: stretch + flex: 1 ci-dessous), sans jamais
	   dépendre d'un pourcentage de hauteur. */
	display: flex;
	min-width: 0;
	/* Mobile : 2 colonnes (identique à l'ancien grid-template-columns). */
	flex: 0 0 calc((100% - 14px) / 2);
	max-width: calc((100% - 14px) / 2);
}

.apfi-secteurs-panorama__tuile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* Remplace l'ancien "height: 100%" (percentage-height flexbug, voir
	   commentaire sur .apfi-secteurs-panorama__cell) : la tuile est
	   désormais l'unique enfant flex de la cellule et se contente de
	   remplir tout l'espace disponible, largeur et hauteur, via flex: 1 —
	   garanti par les règles natives du Flexbox, jamais par un %. */
	flex: 1;
	padding: 22px 14px;
	text-align: center;
	text-decoration: none;
	color: var(--apfi-navy-text);
	background: var(--apfi-bg-tint);
	border: 1px solid transparent;
	border-radius: var(--apfi-radius-md);
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.apfi-secteurs-panorama__tuile:hover {
	border-color: var(--apfi-blue);
	background: var(--apfi-blue-tint-05);
}

.apfi-secteurs-panorama__tuile:focus-visible {
	outline: 2px solid var(--apfi-blue);
	outline-offset: 2px;
}

.apfi-secteurs-panorama__icon {
	width: 30px;
	height: 30px;
	color: var(--apfi-blue);
}

.apfi-secteurs-panorama__label {
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.3;
}

/* Entrée transversale "ERP & établissements spécifiques" : bande pleine
   largeur sous la grille des 7 environnements, traitement visuel différent
   (fond teinté distinct + accent de bordure) mais sobre — jamais une
   simple 8e tuile du même gabarit que les autres (validé le 07/09/2026). */
.apfi-secteurs-panorama__erp {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	text-decoration: none;
	color: var(--apfi-navy-text);
	background: var(--apfi-blue-tint-10);
	border-left: 3px solid var(--apfi-blue);
	border-radius: var(--apfi-radius-md);
	transition: background-color 0.15s ease;
}

.apfi-secteurs-panorama__erp:hover {
	background: rgba(11, 64, 154, 0.14);
}

.apfi-secteurs-panorama__erp:focus-visible {
	outline: 2px solid var(--apfi-blue);
	outline-offset: 2px;
}

.apfi-secteurs-panorama__erp-icon {
	flex: none;
	width: 26px;
	height: 26px;
	color: var(--apfi-blue);
}

.apfi-secteurs-panorama__erp-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.apfi-secteurs-panorama__erp-title {
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.96rem;
	color: var(--apfi-navy-text);
}

.apfi-secteurs-panorama__erp-text {
	font-size: 0.85rem;
	color: rgba(16, 31, 51, 0.62);
}

.apfi-secteurs-panorama__erp-arrow {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--apfi-blue);
}

@media (min-width: 768px) {
	.apfi-secteurs-panorama__grid {
		gap: 16px;
		margin-bottom: 24px;
	}
	.apfi-secteurs-panorama__cell {
		/* Tablette : 3 colonnes ; le dernier élément isolé (7 = 3+3+1) se
		   centre automatiquement grâce à justify-content: center sur le
		   conteneur. */
		flex-basis: calc((100% - 32px) / 3);
		max-width: calc((100% - 32px) / 3);
	}
}

@media (min-width: 1024px) {
	.apfi-secteurs-panorama__grid {
		margin-bottom: 32px;
	}
	.apfi-secteurs-panorama__cell {
		/* Desktop : 4 colonnes ; la 2nde ligne (3 éléments) se centre
		   automatiquement grâce à justify-content: center sur le conteneur. */
		flex-basis: calc((100% - 48px) / 4);
		max-width: calc((100% - 48px) / 4);
	}
}

@media (max-width: 480px) {
	/* En dessous de 480px, le titre + description de l'entrée ERP passent
	   sous l'icône plutôt qu'à côté, pour ne jamais comprimer le texte au
	   point de le rendre illisible sur les très petits écrans. */
	.apfi-secteurs-panorama__erp {
		flex-wrap: wrap;
	}
	.apfi-secteurs-panorama__erp-arrow {
		display: none;
	}
}

/* --- "Des enjeux spécifiques à chaque environnement" (accordéon) ---
   Même mécanique que .apfi-faq (voir plus haut) : <details>/<summary>
   natifs, pastille +/- animée en CSS pur, aucune dépendance JS pour
   fonctionner. Fond bleu très clair pour re-alterner après le blanc du
   panorama. */
.apfi-secteurs-enjeux {
	padding-block: clamp(56px, 7vw, 96px);
	background: var(--apfi-bg-tint);
}

.apfi-secteurs-enjeux__head {
	margin-bottom: clamp(28px, 4vw, 40px);
}

.apfi-secteurs-enjeux__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-secteurs-enjeux__title {
	margin: 0;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
}

.apfi-secteurs-enjeux__list {
	max-width: 800px;
}

.apfi-secteurs-enjeux__item {
	border-bottom: 1px solid var(--apfi-border);
	background: var(--apfi-white);
	border-radius: var(--apfi-radius-sm);
	margin-bottom: 8px;
	padding-inline: 18px;
}

.apfi-secteurs-enjeux__item:last-child {
	margin-bottom: 0;
}

.apfi-secteurs-enjeux__question {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 18px;
}

.apfi-secteurs-enjeux__question::-webkit-details-marker {
	display: none;
}

.apfi-secteurs-enjeux__question-main {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex-wrap: wrap;
}

.apfi-secteurs-enjeux__icon {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--apfi-blue);
}

.apfi-secteurs-enjeux__name {
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--apfi-navy-text);
}

/* Étiquette "Entrée transversale" : jamais la seule couleur pour signaler
   la nature différente de l'entrée ERP (validé le 07/09/2026). */
.apfi-secteurs-enjeux__badge {
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--apfi-blue);
	background: var(--apfi-blue-tint-10);
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.apfi-secteurs-enjeux__toggle {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--apfi-blue);
}

.apfi-secteurs-enjeux__toggle .apfi-faq__icon-v {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.2s ease;
}

.apfi-secteurs-enjeux__item[open] .apfi-faq__icon-v {
	transform: rotate(90deg);
}

.apfi-secteurs-enjeux__answer {
	padding: 0 0 22px;
}

.apfi-secteurs-enjeux__intro {
	margin: 0 0 14px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.75);
}

.apfi-secteurs-enjeux__points {
	margin: 0 0 16px;
	padding-left: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.apfi-secteurs-enjeux__points li {
	font-size: 0.92rem;
	line-height: 1.55;
	color: rgba(16, 31, 51, 0.75);
}

/* Paragraphe "Accompagnement APFI" légèrement mis en valeur (validé le
   07/09/2026), pour clore chaque entrée sur le même type de message. */
.apfi-secteurs-enjeux__accompagnement {
	margin: 0;
	padding: 12px 16px;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--apfi-navy-text);
	background: var(--apfi-blue-tint-05);
	border-left: 3px solid var(--apfi-blue);
	border-radius: 0 var(--apfi-radius-sm) var(--apfi-radius-sm) 0;
}

@media (min-width: 1024px) {
	.apfi-secteurs-enjeux__question {
		padding-block: 20px;
	}
	.apfi-secteurs-enjeux__name {
		font-size: 1.05rem;
	}
}

/* --- "Une même exigence, un accompagnement adapté à votre environnement" --- */
.apfi-secteurs-methode {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-white);
}

.apfi-secteurs-methode__inner {
	max-width: 760px;
	text-align: center;
	margin-inline: auto;
}

.apfi-secteurs-methode__title {
	margin: 0 0 16px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	line-height: 1.25;
	color: var(--apfi-navy-text);
}

.apfi-secteurs-methode__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(16, 31, 51, 0.72);
}

/* --- "Vos enjeux, nos solutions" (passerelle courte) --- */
.apfi-secteurs-ns {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-bg-tint);
}

.apfi-secteurs-ns__inner {
	max-width: 640px;
	text-align: center;
	margin-inline: auto;
}

.apfi-secteurs-ns__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-secteurs-ns__title {
	margin: 0 0 12px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	line-height: 1.25;
	color: var(--apfi-navy-text);
}

.apfi-secteurs-ns__text {
	margin: 0 0 22px;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.72);
}

.apfi-secteurs-ns__marqueurs {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.apfi-secteurs-ns__marqueurs li {
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.82rem;
	color: var(--apfi-blue);
	background: var(--apfi-white);
	border: 1px solid var(--apfi-border);
	padding: 8px 16px;
	border-radius: 999px;
}

/* --- "Vous gérez plusieurs établissements ?" --- */
.apfi-secteurs-multi {
	padding-block: clamp(40px, 5vw, 64px);
	background: var(--apfi-white);
}

.apfi-secteurs-multi__card {
	display: flex;
	flex-direction: column;
	/* `align-items` volontairement en valeur par défaut (stretch), pas
	   `flex-start` : dans un conteneur flex en colonne, `flex-start` sur
	   l'axe transversal dimensionne chaque enfant à sa largeur de contenu
	   préférée (max-content) plutôt qu'à la largeur disponible, ce qui
	   provoquait un débordement horizontal sur mobile avec le paragraphe
	   texte (corrigé le 07/09/2026, vérifié par script Playwright de
	   320 à 1920px). `stretch` garde le même rendu visuel (le texte reste
	   aligné à gauche) tout en laissant le texte se réenrouler dans la
	   largeur réellement disponible. */
	gap: 16px;
	max-width: 820px;
	margin-inline: auto;
	padding: 28px clamp(20px, 4vw, 36px);
	background: var(--apfi-bg-tint);
	border-left: 3px solid var(--apfi-blue);
	border-radius: 0 var(--apfi-radius-md) var(--apfi-radius-md) 0;
}

.apfi-secteurs-multi__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 50%;
	background: var(--apfi-blue-tint-10);
	color: var(--apfi-blue);
	padding: 12px;
	box-sizing: border-box;
}
.apfi-secteurs-multi__icon .apfi-icon {
	width: 100%;
	height: 100%;
}

.apfi-secteurs-multi__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0; /* garde-fou anti-débordement si le texte contient un mot très long */
	flex: 1 1 0%;
}

.apfi-secteurs-multi__title {
	margin: 0;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	line-height: 1.3;
	color: var(--apfi-navy-text);
}

.apfi-secteurs-multi__text {
	margin: 0 0 4px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.75);
	max-width: 60ch;
}

/* .apfi-btn (composant partagé, figé) impose `white-space: nowrap` — voulu
   partout ailleurs sur le site (CTA courts), mais le libellé de ce CTA
   précis ("Découvrir le Pack Sécurité Collective") est plus long et
   provoquait un débordement horizontal sur mobile (corrigé le 07/09/2026,
   vérifié par script Playwright de 320 à 1920px). Neutralisé UNIQUEMENT
   dans ce contexte précis, via un sélecteur plus spécifique — la classe
   .apfi-btn elle-même, partagée et déjà figée, n'est pas modifiée.
   `align-self: flex-start` (ajusté le 07/09/2026, retour client) : sans
   cela, .apfi-secteurs-multi__body (flex en colonne) étire le bouton sur
   toute sa largeur disponible, ce qui le fait ressembler à une grande
   ligne encadrée plutôt qu'au bouton secondaire déjà utilisé ailleurs sur
   le site (même classes .apfi-btn.apfi-btn--outline que le CTA secondaire
   du Hero de la Home, voir template-parts/hero.php) — ce correctif ramène
   le bouton à sa largeur de contenu naturelle, identique à cet usage déjà
   existant. */
.apfi-secteurs-multi__body .apfi-btn {
	align-self: flex-start;
	white-space: normal;
	text-align: left;
}

@media (min-width: 768px) {
	.apfi-secteurs-multi__card {
		flex-direction: row;
		align-items: center;
	}
}

/* =========================================================================
   Page "Nos réalisations" (étape 20, 07/09/2026)
   VALIDÉE ET FIGÉE (07/09/2026) — ne plus modifier sans demande explicite.

   Toutes les classes ci-dessous (`.apfi-nr-*`) sont propres à cette page,
   scopées et nouvelles : aucune classe partagée déjà figée (.apfi-secteurs-*,
   .apfi-pack-card, .apfi-cta-final…) n'est modifiée. Le CTA final réutilise
   .apfi-cta-final tel quel (voir plus haut, section CTA final). Alternance
   des fonds : Hero (bleu) → intro (blanc) → réalisations (teinté) →
   problématiques (blanc) → passerelle (teinté) → CTA final (bleu).
   ========================================================================= */

/* --- Hero --- */
.apfi-nr-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--apfi-blue);
	color: var(--apfi-white);
}

.apfi-nr-hero__layout {
	position: relative;
	z-index: 1;
	padding-block: clamp(40px, 6vw, 72px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 720px;
}

.apfi-nr-hero__breadcrumb {
	color: rgba(255, 255, 255, 0.7);
}
.apfi-nr-hero__breadcrumb a:hover,
.apfi-nr-hero__breadcrumb a:focus-visible {
	color: var(--apfi-white);
}
.apfi-nr-hero__breadcrumb .apfi-breadcrumb__sep {
	color: rgba(255, 255, 255, 0.4);
}

.apfi-nr-hero__eyebrow {
	margin: 18px 0 14px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.apfi-nr-hero__title {
	margin: 0 0 14px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	line-height: 1.15;
	color: var(--apfi-white);
}

.apfi-nr-hero__intro {
	margin: 0;
	max-width: 60ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

/* Media : même principe que .apfi-secteurs-hero__media — mobile : bloc
   simple sous le texte ; à partir de 768px : fond plein cadre à droite avec
   dégradé bleu progressif. Tant qu'aucune photo n'est renseignée, le Hero
   reste strictement bleu plein (pas de classe --has-media). */
.apfi-nr-hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.apfi-nr-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.apfi-nr-hero__media-veil {
	display: none;
}

@media (min-width: 768px) {
	.apfi-nr-hero--has-media .apfi-nr-hero__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		aspect-ratio: auto;
	}
	.apfi-nr-hero--has-media .apfi-nr-hero__image {
		object-position: 78% center;
	}
	.apfi-nr-hero--has-media .apfi-nr-hero__media-veil {
		display: block;
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to right,
			var(--apfi-blue) 0%,
			var(--apfi-blue) 34%,
			rgba(11, 64, 154, 0.92) 44%,
			rgba(11, 64, 154, 0.35) 58%,
			rgba(11, 64, 154, 0) 72%
		);
	}
	.apfi-nr-hero--has-media .apfi-nr-hero__layout {
		max-width: 600px;
	}
}

@media (min-width: 1024px) {
	.apfi-nr-hero--has-media .apfi-nr-hero__media-veil {
		background: linear-gradient(
			to right,
			var(--apfi-blue) 0%,
			var(--apfi-blue) 40%,
			rgba(11, 64, 154, 0.9) 50%,
			rgba(11, 64, 154, 0.3) 66%,
			rgba(11, 64, 154, 0) 82%
		);
	}
	.apfi-nr-hero--has-media .apfi-nr-hero__layout {
		max-width: 660px;
	}
}

/* --- Introduction (bloc 2) --- */
.apfi-nr-intro {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-white);
}

.apfi-nr-intro__inner {
	max-width: 720px;
	text-align: center;
	margin-inline: auto;
}

.apfi-nr-intro__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-nr-intro__title {
	margin: 0 0 14px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.25;
	color: var(--apfi-navy-text);
}

.apfi-nr-intro__text {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.65;
	color: rgba(16, 31, 51, 0.72);
}

/* --- Les 3 réalisations (bloc 3) ---
   Grandes cartes éditoriales empilées (pas de grille de vignettes, demande
   explicite du client) : une carte par réalisation, chacune clairement
   distincte grâce à un numéro et une bordure gauche accentuée. Composition
   texte seul pour l'instant (aucune image affichée, voir
   template-parts/realisations-liste.php) — reste élégante sans photo,
   architecture prête pour une future variante avec media (non activée). */
.apfi-nr-liste {
	padding-block: clamp(56px, 7vw, 96px);
	background: var(--apfi-bg-tint);
}

.apfi-nr-liste__head {
	margin-bottom: clamp(28px, 4vw, 44px);
	max-width: 640px;
}

.apfi-nr-liste__title {
	margin: 0;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
}

.apfi-nr-liste__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 4vw, 40px);
}

.apfi-nr-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: var(--apfi-white);
	border: 1px solid var(--apfi-border);
	border-left: 3px solid var(--apfi-blue);
	border-radius: 0 var(--apfi-radius-md) var(--apfi-radius-md) 0;
	padding: clamp(28px, 4vw, 44px);
}

/* Couche photographique décorative (14/09/2026) — n'apparaît que sur les
   cartes explicitement autorisées côté template (liste blanche, voir
   template-parts/realisations-liste.php). Aucune règle existante n'est
   modifiée : une carte sans cette classe reste strictement identique.
   Principe : photo atténuée sur la droite, effacée progressivement vers la
   gauche par un masque (le blanc de la carte reprend la main sans rupture,
   sans voile superposé). Masquée sous 768px — priorité absolue à la
   lisibilité du texte sur une carte déjà dense. */
.apfi-nr-card--has-media {
	overflow: hidden;
}

.apfi-nr-card__media {
	display: none;
}

.apfi-nr-card--has-media > .apfi-nr-card__index,
.apfi-nr-card--has-media > .apfi-nr-card__body {
	position: relative;
	z-index: 1;
}

@media (min-width: 768px) {
	.apfi-nr-card--has-media .apfi-nr-card__media {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 34%;
		opacity: 0.35;
		pointer-events: none;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 38%, rgba(0, 0, 0, 0.7) 72%, #000 100%);
		mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.25) 38%, rgba(0, 0, 0, 0.7) 72%, #000 100%);
	}

	.apfi-nr-card__media-image {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center right;
	}
}

@media (min-width: 1024px) {
	.apfi-nr-card--has-media .apfi-nr-card__media {
		width: 38%;
		opacity: 0.50;
	}
}

.apfi-nr-card__index {
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	color: rgba(11, 64, 154, 0.45);
}

.apfi-nr-card__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Discret par défaut (aucune des 3 réalisations actuelles n'est concernée),
   mais nettement visible si un cas "expérience antérieure" est ajouté plus
   tard — même traitement que .apfi-realisations__type--anterieure (Home,
   figée), jamais laisser croire qu'une expérience antérieure est une
   mission APFI. */
.apfi-nr-card__type-ref {
	align-self: flex-start;
	margin: 0 0 12px;
	padding: 5px 10px;
	border-radius: var(--apfi-radius-sm);
	background: rgba(180, 108, 12, 0.1);
	border: 1px solid rgba(180, 108, 12, 0.35);
	color: #8A5209;
	font-size: 0.82rem;
	line-height: 1.3;
}

.apfi-nr-card__badges {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.apfi-nr-card__badge {
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--apfi-blue);
	background: var(--apfi-blue-tint-05);
	padding: 6px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

.apfi-nr-card__title {
	margin: 0 0 10px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	line-height: 1.28;
	color: var(--apfi-navy-text);
}

.apfi-nr-card__nom {
	margin: 0 0 4px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.98rem;
	color: var(--apfi-blue);
}

.apfi-nr-card__localisation {
	font-weight: 400;
	color: rgba(16, 31, 51, 0.55);
}

.apfi-nr-card__etablissement {
	margin: 0 0 14px;
	font-size: 0.9rem;
	line-height: 1.4;
	color: rgba(16, 31, 51, 0.6);
}

.apfi-nr-card__resume {
	margin: 0 0 18px;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(16, 31, 51, 0.78);
	max-width: 68ch;
}

.apfi-nr-card__prestations-label {
	margin: 0 0 10px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--apfi-navy-text);
}

.apfi-nr-card__prestations {
	list-style: none;
	margin: 0 0 22px;
	padding: 14px 0 0;
	border-top: 1px solid var(--apfi-border);
	display: grid;
	grid-template-columns: 1fr;
	gap: 9px;
}

.apfi-nr-card__prestations li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--apfi-navy-text);
}

.apfi-nr-card__prestations-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 0.2em;
	color: var(--apfi-blue);
}

.apfi-nr-card__footer {
	margin-top: auto;
}

/* Comportement confirmé par le client le 07/09/2026 : en production, le
   template (template-parts/realisations-liste.php) n'affiche AUCUN CTA tant
   qu'aucune fiche détaillée n'est active pour une réalisation (jamais de
   bouton désactivé ni de lien "#") — cette classe n'est donc plus appelée
   que par la prévisualisation statique (preview/nos-realisations.html, hors
   WordPress), pour matérialiser visuellement le futur emplacement du CTA. */
.apfi-nr-card__cta--disabled {
	cursor: default;
	background: transparent;
	color: rgba(16, 31, 51, 0.4);
	border-color: var(--apfi-border);
}
.apfi-nr-card__cta--disabled:hover {
	transform: none;
	background: transparent;
	color: rgba(16, 31, 51, 0.4);
}

@media (min-width: 768px) {
	.apfi-nr-card {
		flex-direction: row;
		gap: 28px;
	}
	.apfi-nr-card__index {
		font-size: 1.1rem;
		flex-shrink: 0;
	}
	.apfi-nr-card__prestations {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 20px;
	}
}

/* --- "Une problématique n'entre pas toujours dans une case" (bloc 4) --- */
.apfi-nr-problematiques {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-white);
}

.apfi-nr-problematiques__inner {
	max-width: 760px;
	text-align: center;
	margin-inline: auto;
}

.apfi-nr-problematiques__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-nr-problematiques__title {
	margin: 0 0 16px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	line-height: 1.25;
	color: var(--apfi-navy-text);
}

.apfi-nr-problematiques__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(16, 31, 51, 0.72);
}

/* --- "Pour aller plus loin" (bloc 5) --- */
.apfi-nr-liens {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-bg-tint);
}

.apfi-nr-liens__inner {
	max-width: 640px;
	text-align: center;
	margin-inline: auto;
}

.apfi-nr-liens__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-nr-liens__title {
	margin: 0 0 12px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	line-height: 1.25;
	color: var(--apfi-navy-text);
}

.apfi-nr-liens__text {
	margin: 0 0 26px;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.72);
}

.apfi-nr-liens__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

/* .apfi-btn (composant partagé, figé) impose `white-space: nowrap` — voulu
   ailleurs sur le site (CTA courts), mais le libellé "Découvrir nos secteurs
   d'activité" est plus long et provoque un débordement horizontal à 320px
   (détecté par le script Playwright de vérification, 320 à 1920px).
   Neutralisé UNIQUEMENT dans ce contexte précis, via un sélecteur plus
   spécifique — la classe .apfi-btn elle-même, partagée et déjà figée, n'est
   pas modifiée. Même principe déjà appliqué à
   .apfi-secteurs-multi__body .apfi-btn (voir plus haut). */
.apfi-nr-liens__actions .apfi-btn {
	white-space: normal;
	text-align: center;
}

@media (min-width: 640px) {
	.apfi-nr-liens__actions {
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
	}
}

/* --- "Pour aller plus loin" — composition éditoriale asymétrique
   (TEMPS 14C, 15/09/2026 — maquette 14A, alignement B validé au TEMPS 14B).
   Objectif : casser l'enchaînement de trois bandeaux centrés en fin de page
   (voir template-parts/realisations-liens.php). Tout est scopé sur le
   modificateur `.apfi-nr-liens--split` et sur le nouveau composant
   `.apfi-nr-lien*` : aucune règle ci-dessus n'est réécrite, la typographie
   du surtitre, du titre et du texte reste celle déjà figée, et les règles
   `.apfi-nr-liens__actions` (désormais inutilisées sur cette page) sont
   volontairement conservées telles quelles — nettoyage hors périmètre. --- */
.apfi-nr-liens--split .apfi-nr-liens__inner {
	max-width: var(--apfi-container-width);
	text-align: left;
	margin-inline: auto;
}

.apfi-nr-liens--split .apfi-nr-liens__text {
	margin-bottom: 0;
	max-width: 46ch;
}

.apfi-nr-liens__links {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: clamp(28px, 4vw, 36px);
}

/* Passerelle : ni bouton, ni carte commerciale — un bloc éditorial sobre,
   blanc sur le fond teinté de la section, bordure fine du design system,
   aucune ombre, aucun dégradé, aucune couleur supplémentaire. Poids visuel
   volontairement inférieur à celui du CTA final bleu qui suit. */
.apfi-nr-lien {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 20px;
	padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 30px);
	background: var(--apfi-white);
	border: 1px solid var(--apfi-border);
	border-radius: var(--apfi-radius-md);
	color: var(--apfi-navy-text);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.apfi-nr-lien__kicker {
	grid-column: 1;
	grid-row: 1;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-nr-lien__label {
	grid-column: 1;
	grid-row: 2;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.3;
}

.apfi-nr-lien__arrow {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	width: 22px;
	height: 22px;
	flex: none;
	color: rgba(16, 31, 51, 0.35);
	transition: transform 0.2s ease, color 0.2s ease;
}

.apfi-nr-lien:hover,
.apfi-nr-lien:focus-visible {
	border-color: rgba(11, 64, 154, 0.35);
	background: var(--apfi-white);
}

.apfi-nr-lien:hover .apfi-nr-lien__arrow,
.apfi-nr-lien:focus-visible .apfi-nr-lien__arrow {
	transform: translateX(4px);
	color: var(--apfi-blue);
}

.apfi-nr-lien:focus-visible {
	outline: 2px solid var(--apfi-blue);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.apfi-nr-lien,
	.apfi-nr-lien__arrow {
		transition: none;
	}
	.apfi-nr-lien:hover .apfi-nr-lien__arrow,
	.apfi-nr-lien:focus-visible .apfi-nr-lien__arrow {
		transform: none;
	}
}

/* Deux colonnes seulement à partir de 1024px : en dessous, la colonne de
   texte deviendrait trop étroite (vérifié à 768 et 820px). `align-self` sur
   la seule colonne éditoriale — surtout pas `align-items: center` sur la
   grille, qui déplacerait aussi la colonne de droite. */
@media (min-width: 1024px) {
	.apfi-nr-liens--split .apfi-nr-liens__inner {
		display: grid;
		grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
		gap: clamp(40px, 5vw, 80px);
		align-items: start;
	}
	.apfi-nr-liens--split .apfi-nr-liens__intro {
		align-self: center;
	}
	.apfi-nr-liens--split .apfi-nr-liens__links {
		margin-top: 0;
	}
}

/* =========================================================================
   Fiche individuelle de réalisation (étape 21, 07/09/2026)
   VALIDÉE ET FIGÉE (07/09/2026) — ne plus modifier sans demande explicite.

   Toutes les classes ci-dessous (`.apfi-rd-*`, "réalisation détail") sont
   propres à ce gabarit, scopées et nouvelles : aucune classe partagée déjà
   figée (.apfi-nr-*, .apfi-pack-*, .apfi-methode__*, .apfi-cta-final…) n'est
   modifiée. Le CTA final réutilise .apfi-cta-final tel quel (voir plus
   haut). Le Hero réutilise le même principe visuel que .apfi-pack-hero__*
   / .apfi-nr-hero__* (bleu APFI, media optionnel + dégradé), sous ses
   propres classes. La chronologie "Notre intervention" reprend le langage
   visuel de
   .apfi-methode__timeline (Home, figée) sous ses propres classes.
   Alternance des fonds : Hero (bleu) → contexte (blanc) → mission (teinté)
   → intervention (blanc) → livrables (teinté) → résultat (blanc, carte
   teintée) → CTA final (bleu) → autres réalisations (blanc).

   AMENDEMENT ADDITIF DU 07/09/2026 (Hôtel Sofiane, étape 22) — VALIDÉ ET
   FIGÉ (07/09/2026) : ajout du seul bloc `.apfi-rd-resultat__*` (nouvelles
   classes, en fin de section ci-dessous) — aucune classe existante
   modifiée, aucun effet sur le rendu déjà figé de SIRR.
   ========================================================================= */

/* --- Hero (bloc 1) --- */
.apfi-rd-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--apfi-blue);
	color: var(--apfi-white);
}

.apfi-rd-hero__layout {
	position: relative;
	z-index: 1;
	padding-block: clamp(40px, 6vw, 72px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 720px;
}

.apfi-rd-hero__breadcrumb {
	color: rgba(255, 255, 255, 0.7);
}
.apfi-rd-hero__breadcrumb a:hover,
.apfi-rd-hero__breadcrumb a:focus-visible {
	color: var(--apfi-white);
}
.apfi-rd-hero__breadcrumb .apfi-breadcrumb__sep {
	color: rgba(255, 255, 255, 0.4);
}

.apfi-rd-hero__badges {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.apfi-rd-hero__badge {
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--apfi-white);
	background: rgba(255, 255, 255, 0.16);
	padding: 6px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

.apfi-rd-hero__title {
	margin: 16px 0 10px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	line-height: 1.15;
	color: var(--apfi-white);
}

.apfi-rd-hero__identification {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
}

.apfi-rd-hero__localisation {
	font-weight: 400;
	color: rgba(255, 255, 255, 0.72);
}

.apfi-rd-hero__actions {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Media : même principe que .apfi-pack-hero__media/.apfi-nr-hero__media —
   ici, l'image mise à la une NATIVE du CPT `realisation` (aucun nouveau
   champ image, voir template-parts/realisation-detail-hero.php). Tant
   qu'aucune image mise à la une n'est définie, le Hero reste strictement
   bleu plein (pas de classe --has-media). */
.apfi-rd-hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.apfi-rd-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.apfi-rd-hero__media-veil {
	display: none;
}

@media (min-width: 768px) {
	.apfi-rd-hero--has-media .apfi-rd-hero__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		aspect-ratio: auto;
	}
	.apfi-rd-hero--has-media .apfi-rd-hero__image {
		object-position: 78% center;
	}
	.apfi-rd-hero--has-media .apfi-rd-hero__media-veil {
		display: block;
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to right,
			var(--apfi-blue) 0%,
			var(--apfi-blue) 34%,
			rgba(11, 64, 154, 0.92) 44%,
			rgba(11, 64, 154, 0.35) 58%,
			rgba(11, 64, 154, 0) 72%
		);
	}
	.apfi-rd-hero--has-media .apfi-rd-hero__layout {
		max-width: 600px;
	}
}

@media (min-width: 1024px) {
	.apfi-rd-hero--has-media .apfi-rd-hero__media-veil {
		background: linear-gradient(
			to right,
			var(--apfi-blue) 0%,
			var(--apfi-blue) 40%,
			rgba(11, 64, 154, 0.9) 50%,
			rgba(11, 64, 154, 0.3) 66%,
			rgba(11, 64, 154, 0) 82%
		);
	}
	.apfi-rd-hero--has-media .apfi-rd-hero__layout {
		max-width: 660px;
	}
}

/* --- Le contexte (bloc 2) / La mission confiée à APFI (bloc 3) ---
   Deux blocs texte sobres, structurellement identiques (eyebrow + texte),
   uniquement distingués par leur fond (alternance) — chacun ne s'affiche
   que si son champ ACF est renseigné (voir les template-parts respectifs). */
.apfi-rd-contexte,
.apfi-rd-mission {
	padding-block: clamp(44px, 6vw, 72px);
}

.apfi-rd-contexte {
	background: var(--apfi-white);
}

.apfi-rd-mission {
	background: var(--apfi-bg-tint);
}

.apfi-rd-contexte__inner,
.apfi-rd-mission__inner {
	max-width: 760px;
}

.apfi-rd-contexte__eyebrow,
.apfi-rd-mission__eyebrow {
	margin: 0 0 10px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-rd-contexte__text,
.apfi-rd-mission__text {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--apfi-navy-text);
}

/* --- Notre intervention (bloc 4) : chronologie sobre ---
   Langage visuel inspiré de .apfi-methode__timeline (Home, figée) mais sous
   des classes entièrement propres à cette fiche — jamais de deuxième liste
   graphiquement démonstrative, juste une chronologie numérotée, sobre et
   institutionnelle (demande explicite du client). */
.apfi-rd-intervention {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-white);
}

.apfi-rd-intervention__inner {
	max-width: 760px;
}

.apfi-rd-intervention__eyebrow {
	margin: 0 0 10px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-rd-intervention__title {
	margin: 0 0 32px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	line-height: 1.25;
	color: var(--apfi-navy-text);
}

.apfi-rd-intervention__timeline {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.apfi-rd-intervention__timeline::before {
	content: '';
	position: absolute;
	top: 16px;
	bottom: 16px;
	left: 15px;
	width: 1px;
	background: var(--apfi-border);
}

.apfi-rd-intervention__step {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
}

.apfi-rd-intervention__step:not(:last-child) {
	padding-bottom: 22px;
}

.apfi-rd-intervention__step-marker {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--apfi-blue);
	color: var(--apfi-white);
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 0.9rem;
}

.apfi-rd-intervention__step-text {
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--apfi-navy-text);
}

/* --- Livrables (bloc 5, conditionnel) --- */
.apfi-rd-livrables {
	padding-block: clamp(44px, 6vw, 72px);
	background: var(--apfi-bg-tint);
}

.apfi-rd-livrables__inner {
	max-width: 760px;
}

.apfi-rd-livrables__eyebrow {
	margin: 0 0 10px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-rd-livrables__title {
	margin: 0 0 24px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	line-height: 1.25;
	color: var(--apfi-navy-text);
}

.apfi-rd-livrables__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.apfi-rd-livrables__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--apfi-navy-text);
}

.apfi-rd-livrables__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	color: var(--apfi-blue);
	margin-top: 1px;
}

/* --- Le résultat (bloc conditionnel, entre Livrables et le CTA final) ---
   Ajouté le 07/09/2026 (deuxième fiche détaillée, Hôtel Sofiane) — classes
   entièrement nouvelles et scopées, aucune classe existante du gabarit
   modifiée. Traitement volontairement plus marqué que Contexte/Mission/
   Livrables (fond légèrement teinté, accent bleu APFI en filet, titre plus
   affirmé) sur demande explicite du client : ce bloc porte la valeur
   commerciale du cas client. Reste sobre et institutionnel — aucun effet
   marketing, aucune iconographie nouvelle. N'est jamais rendu pour SIRR
   (`realisation_resultat` vide), donc sans aucun effet sur son rendu. */
.apfi-rd-resultat {
	padding-block: clamp(56px, 7vw, 96px);
	background: var(--apfi-white);
}

.apfi-rd-resultat__inner {
	max-width: 760px;
	background: var(--apfi-blue-tint-05);
	border-left: 4px solid var(--apfi-blue);
	border-radius: 16px;
	padding: clamp(28px, 4vw, 44px) clamp(24px, 5vw, 48px);
}

.apfi-rd-resultat__eyebrow {
	margin: 0 0 12px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-rd-resultat__title {
	margin: 0 0 16px;
	font-family: var(--apfi-font-heading);
	font-weight: 700;
	font-size: clamp(1.6rem, 3.4vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-blue-dark);
}

.apfi-rd-resultat__text p {
	margin: 0 0 14px;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--apfi-navy-text);
}

.apfi-rd-resultat__text p:last-child {
	margin-bottom: 0;
}

/* --- Découvrir d'autres réalisations (bloc 7) ---
   Même principe que .apfi-pack-autres__* (voir plus haut) : carte
   cliquable dès que `lien_detail` existe, sinon <span> non cliquable, sans
   jamais de lien "#". */
.apfi-rd-autres {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-white);
}

.apfi-rd-autres__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-rd-autres__title {
	margin: 0 0 32px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	line-height: 1.25;
	color: var(--apfi-navy-text);
	max-width: 620px;
}

.apfi-rd-autres__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.apfi-rd-autres__card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 22px;
	border: 1px solid var(--apfi-border);
	border-radius: 14px;
	background: var(--apfi-white);
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.apfi-rd-autres__card:hover,
a.apfi-rd-autres__card:focus-visible {
	border-color: var(--apfi-blue);
	box-shadow: 0 10px 24px rgba(11, 64, 154, 0.1);
	transform: translateY(-2px);
}

span.apfi-rd-autres__card--disabled {
	opacity: 0.6;
	cursor: default;
}

.apfi-rd-autres__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.apfi-rd-autres__name {
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.02rem;
	color: var(--apfi-navy-text);
}

.apfi-rd-autres__meta {
	font-size: 0.88rem;
	color: rgba(16, 31, 51, 0.65);
}

.apfi-rd-autres__arrow {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--apfi-blue);
	margin-left: auto;
}

@media (min-width: 720px) {
	.apfi-rd-autres__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =========================================================================
   Page "À propos" (page-apropos.php, étape 24)
   VALIDÉE ET FIGÉE (07/09/2026) — ne plus modifier sans demande explicite.
   Nouvelle page, sans impact sur la Home,
   "Nos solutions", "Secteurs d'activité", les pages Pack, les fiches de
   réalisation, le Header ou le Footer : toutes les classes ci-dessous sont
   propres à cette page (.apfi-apropos-hero, .apfi-apropos-cabinet,
   .apfi-apropos-experience, .apfi-apropos-approche,
   .apfi-apropos-organisation, .apfi-apropos-pole). Le CTA final réutilise
   .apfi-cta-final tel quel (voir plus haut).

   Alternance de fonds : Hero (bleu plein), APFI Conseil (blanc), Expérience
   et expertise (bleu très clair), Notre approche (blanc), Organisation —
   deux pôles (bleu très clair), CTA final (bleu plein) — même logique
   d'alternance que "Secteurs d'activité" (voir plus haut).
   ========================================================================= */

/* --- Bloc 1 : Hero (« Hero hybride », même principe que les autres pages
   internes — voir .apfi-secteurs-hero plus haut) --- */
.apfi-apropos-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--apfi-blue);
	color: var(--apfi-white);
}

.apfi-apropos-hero__layout {
	position: relative;
	z-index: 1;
	padding-block: clamp(40px, 6vw, 72px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 720px;
}

.apfi-apropos-hero__breadcrumb {
	color: rgba(255, 255, 255, 0.7);
}
.apfi-apropos-hero__breadcrumb a:hover,
.apfi-apropos-hero__breadcrumb a:focus-visible {
	color: var(--apfi-white);
}
.apfi-apropos-hero__breadcrumb .apfi-breadcrumb__sep {
	color: rgba(255, 255, 255, 0.4);
}

.apfi-apropos-hero__eyebrow {
	margin: 18px 0 14px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.apfi-apropos-hero__title {
	margin: 0 0 14px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	line-height: 1.15;
	color: var(--apfi-white);
}

.apfi-apropos-hero__intro {
	margin: 0;
	max-width: 60ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

/* Media : même principe que .apfi-secteurs-hero__media — mobile : bloc
   simple sous le contenu, jamais de texte posé dessus ; desktop/tablette :
   fond plein cadre avec dégradé bleu progressif. Tant qu'aucune photo n'est
   renseignée, le Hero reste strictement bleu plein. */
.apfi-apropos-hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.apfi-apropos-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.apfi-apropos-hero__media-veil {
	display: none;
}

@media (min-width: 768px) {
	.apfi-apropos-hero--has-media .apfi-apropos-hero__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		aspect-ratio: auto;
	}
	.apfi-apropos-hero--has-media .apfi-apropos-hero__image {
		object-position: 78% center;
	}
	.apfi-apropos-hero--has-media .apfi-apropos-hero__media-veil {
		display: block;
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to right,
			var(--apfi-blue) 0%,
			var(--apfi-blue) 34%,
			rgba(11, 64, 154, 0.92) 44%,
			rgba(11, 64, 154, 0.35) 58%,
			rgba(11, 64, 154, 0) 72%
		);
	}
	.apfi-apropos-hero--has-media .apfi-apropos-hero__layout {
		max-width: 600px;
	}
}

@media (min-width: 1024px) {
	.apfi-apropos-hero--has-media .apfi-apropos-hero__media-veil {
		background: linear-gradient(
			to right,
			var(--apfi-blue) 0%,
			var(--apfi-blue) 40%,
			rgba(11, 64, 154, 0.9) 50%,
			rgba(11, 64, 154, 0.3) 66%,
			rgba(11, 64, 154, 0) 82%
		);
	}
	.apfi-apropos-hero--has-media .apfi-apropos-hero__layout {
		max-width: 660px;
	}
}

/* --- Bloc 2 : "APFI Conseil" — simple bloc de texte centré --- */
.apfi-apropos-cabinet {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-white);
}

.apfi-apropos-cabinet__layout {
	max-width: 760px;
}

.apfi-apropos-cabinet__title {
	margin: 0 0 16px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
}

.apfi-apropos-cabinet__text {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(16, 31, 51, 0.75);
}

/* --- Bloc 3 : "Expérience et expertise" — fond bleu très clair, texte en
   plusieurs paragraphes (même mécanisme que .apfi-rd-resultat__text, voir
   plus haut, "Fiches de réalisation") --- */
.apfi-apropos-experience {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-bg-tint);
}

.apfi-apropos-experience__layout {
	max-width: 760px;
}

.apfi-apropos-experience__title {
	margin: 0 0 16px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
}

.apfi-apropos-experience__text p {
	margin: 0 0 16px;
	font-size: 1.02rem;
	line-height: 1.65;
	color: rgba(16, 31, 51, 0.75);
}
.apfi-apropos-experience__text p:last-child {
	margin-bottom: 0;
}

/* Photo optionnelle de la section (TEMPS 13B, 15/09/2026) — n'existe dans le
   DOM que si le champ ACF `apropos_experience_image` est renseigné (voir
   template-parts/apropos-experience.php). Sans photo, aucune des règles
   ci-dessous ne s'applique et la section reste strictement dans son état
   figé du 07/09/2026 (colonne unique, `max-width: 760px`).
   En dessous de 1024px : photo simplement placée sous le texte, pleine
   largeur, ratio naturel conservé (aucun recadrage). */
.apfi-apropos-experience__media {
	margin-top: clamp(24px, 4vw, 36px);
}

.apfi-apropos-experience__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--apfi-radius-md);
}

@media (min-width: 1024px) {
	/* Deux colonnes 55/45. Le placement explicite évite d'ajouter un
	   conteneur autour du titre et du texte : le HTML figé de la section
	   n'est donc pas restructuré — titre et texte restent deux frères
	   directs, simplement placés dans la même colonne. */
	.apfi-apropos-experience--has-media .apfi-apropos-experience__layout {
		max-width: var(--apfi-container-width);
		display: grid;
		grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
		grid-template-rows: auto 1fr;
		gap: clamp(28px, 4vw, 56px);
		align-items: start;
	}
	.apfi-apropos-experience--has-media .apfi-apropos-experience__title {
		grid-column: 1;
		grid-row: 1;
	}
	.apfi-apropos-experience--has-media .apfi-apropos-experience__text {
		grid-column: 1;
		grid-row: 2;
	}
	/* TEMPS 13D (15/09/2026) — la colonne texte (titre + deux paragraphes) est
	   plus haute que la photo : `align-items: start` la laissait collée en
	   haut. `align-self` ne concerne QUE cet élément : la photo se centre
	   verticalement dans la zone qu'elle occupe déjà (lignes 1 à 2, soit
	   exactement la hauteur du bloc texte complet). Aucune hauteur imposée,
	   aucun recadrage, aucun changement de largeur ni de ratio ; titre et
	   texte conservent leur alignement haut. */
	.apfi-apropos-experience--has-media .apfi-apropos-experience__media {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin-top: 0;
		align-self: center;
	}
}

/* --- Bloc 4 : "Notre approche" — grille compacte de 4 cartes numérotées,
   volontairement distincte de la timeline "Notre méthode" (Home, étape 5) :
   pas de photo, pas de ligne de connexion, juste un résumé des principes. --- */
.apfi-apropos-approche {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-white);
}

.apfi-apropos-approche__head {
	margin-bottom: clamp(24px, 4vw, 36px);
	max-width: 640px;
}

.apfi-apropos-approche__title {
	margin: 0 0 8px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
}

.apfi-apropos-approche__intro {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.7);
}

.apfi-apropos-approche__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.apfi-apropos-approche__card {
	padding: 24px 22px;
	border-radius: var(--apfi-radius-md);
	background: var(--apfi-bg-tint);
}

.apfi-apropos-approche__numero {
	display: block;
	margin-bottom: 10px;
	font-family: var(--apfi-font-heading);
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--apfi-blue);
}

.apfi-apropos-approche__card-title {
	margin: 0 0 8px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--apfi-navy-text);
}

.apfi-apropos-approche__card-text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(16, 31, 51, 0.7);
}

@media (min-width: 640px) {
	.apfi-apropos-approche__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.apfi-apropos-approche__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --- Bloc 5 : "Deux pôles, une même exigence" — présentation par pôles,
   pas par portraits individuels (voir template-parts/apropos-organisation.php
   pour le détail de l'arbitrage). Les deux cartes .apfi-apropos-pole sont
   symétriques dans leur forme, asymétriques dans leur contenu (l'une porte
   un nom, l'autre non) : aucune des deux ne requiert de nom pour rester
   visuellement complète. --- */
.apfi-apropos-organisation {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-bg-tint);
}

.apfi-apropos-organisation__head {
	margin-bottom: clamp(24px, 4vw, 36px);
	max-width: 640px;
}

.apfi-apropos-organisation__title {
	margin: 0 0 8px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
}

.apfi-apropos-organisation__intro {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.7);
}

.apfi-apropos-organisation__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.apfi-apropos-pole {
	padding: 28px 26px;
	border-radius: var(--apfi-radius-md);
	background: var(--apfi-white);
	border: 1px solid var(--apfi-border);
}

.apfi-apropos-pole__icon {
	width: 34px;
	height: 34px;
	margin-bottom: 14px;
	color: var(--apfi-blue);
}

/* Portrait optionnel (Pôle Formation uniquement) : même taille/traitement
   rond que .apfi-temoignages__portrait (section 9, Home) — réutilise
   d'ailleurs la même taille d'image enregistrée (apfi-temoignage-portrait,
   160×160), aucune nouvelle taille créée. Tant qu'aucune photo n'est
   envoyée, l'icône du pôle (ci-dessus) sert de repli — jamais les deux à la
   fois, jamais d'espace vide. */
.apfi-apropos-pole__portrait {
	display: block;
	width: 56px;
	height: 56px;
	margin-bottom: 14px;
	border-radius: 50%;
	object-fit: cover;
}

.apfi-apropos-pole__titre {
	margin: 0 0 4px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--apfi-navy-text);
}

.apfi-apropos-pole__fonction {
	margin: 0 0 14px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--apfi-blue);
}

.apfi-apropos-pole__texte {
	margin: 0 0 16px;
	font-size: 0.98rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.75);
}

.apfi-apropos-pole__qualifications {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.apfi-apropos-pole__qualifications li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	color: rgba(16, 31, 51, 0.8);
}

.apfi-apropos-pole__qualification-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--apfi-blue);
}

.apfi-apropos-pole__note {
	margin: 12px 0 0;
	font-size: 0.85rem;
	font-style: italic;
	color: rgba(16, 31, 51, 0.6);
}

@media (min-width: 768px) {
	.apfi-apropos-organisation__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =========================================================================
   Page "Actualités" (page-actualites.php, category.php, single.php — étape 25)
   VALIDÉE ET FIGÉE DÉFINITIVEMENT (08/09/2026) — TEMPS 7. Nouvelle rubrique, sans impact sur la
   Home, "Nos solutions", "Secteurs d'activité", "Nos réalisations", "À
   propos", les 4 pages Pack, les 3 fiches de réalisation, le Header ou le
   Footer — classes entièrement nouvelles et scopées, aucune classe existante
   modifiée ci-dessus.
   ========================================================================= */

/* --- Hero de la page "Actualités" ---
   "Hero hybride", copie scopée strictement identique à .apfi-secteurs-hero__*
   (voir plus haut, "Étape 19") — même repli bleu plein tant qu'aucune photo
   n'est renseignée, mêmes seuils responsive. */
.apfi-actu-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--apfi-blue);
	color: var(--apfi-white);
}

.apfi-actu-hero__layout {
	position: relative;
	z-index: 1;
	padding-block: clamp(40px, 6vw, 72px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 720px;
}

.apfi-actu-hero__breadcrumb {
	color: rgba(255, 255, 255, 0.7);
}
.apfi-actu-hero__breadcrumb a:hover,
.apfi-actu-hero__breadcrumb a:focus-visible {
	color: var(--apfi-white);
}
.apfi-actu-hero__breadcrumb .apfi-breadcrumb__sep {
	color: rgba(255, 255, 255, 0.4);
}

.apfi-actu-hero__eyebrow {
	margin: 18px 0 14px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.apfi-actu-hero__title {
	margin: 0 0 14px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	line-height: 1.15;
	color: var(--apfi-white);
}

.apfi-actu-hero__intro {
	margin: 0;
	max-width: 60ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

.apfi-actu-hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.apfi-actu-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.apfi-actu-hero__media-veil {
	display: none;
}

@media (min-width: 768px) {
	.apfi-actu-hero--has-media .apfi-actu-hero__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		aspect-ratio: auto;
	}
	.apfi-actu-hero--has-media .apfi-actu-hero__image {
		object-position: 78% center;
	}
	.apfi-actu-hero--has-media .apfi-actu-hero__media-veil {
		display: block;
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to right,
			var(--apfi-blue) 0%,
			var(--apfi-blue) 34%,
			rgba(11, 64, 154, 0.92) 44%,
			rgba(11, 64, 154, 0.35) 58%,
			rgba(11, 64, 154, 0) 72%
		);
	}
	.apfi-actu-hero--has-media .apfi-actu-hero__layout {
		max-width: 600px;
	}
}

@media (min-width: 1024px) {
	.apfi-actu-hero--has-media .apfi-actu-hero__media-veil {
		background: linear-gradient(
			to right,
			var(--apfi-blue) 0%,
			var(--apfi-blue) 40%,
			rgba(11, 64, 154, 0.9) 50%,
			rgba(11, 64, 154, 0.3) 66%,
			rgba(11, 64, 154, 0) 82%
		);
	}
	.apfi-actu-hero--has-media .apfi-actu-hero__layout {
		max-width: 660px;
	}
}

/* --- Introduction éditoriale (bloc 2) ---
   Même principe que .apfi-apropos-cabinet__* (voir plus haut, "Étape 24") :
   simple bloc de texte, fond blanc, sans carte ni colonne. */
.apfi-actu-intro {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-white);
}

.apfi-actu-intro__layout {
	max-width: 760px;
}

.apfi-actu-intro__title {
	margin: 0 0 16px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
}

.apfi-actu-intro__text {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(16, 31, 51, 0.75);
}

/* --- Liste des articles (bloc 3) — grille de cartes ---
   Réutilisée à l'identique par category.php et par "Articles associés"
   (single.php, voir .apfi-article-associes__grid plus bas). 1 colonne en
   mobile, 2 à partir de 640px, 3 à partir de 1024px — même paliers que
   .apfi-apropos-approche__grid ("Étape 24"). */
.apfi-actu-liste {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-bg-tint);
}

.apfi-actu-liste__head {
	margin-bottom: clamp(24px, 4vw, 36px);
	max-width: 640px;
}

.apfi-actu-liste__title {
	margin: 0;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
}

.apfi-actu-liste__vide {
	margin: 0;
	font-size: 1rem;
	color: rgba(16, 31, 51, 0.65);
}

.apfi-actu-liste__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 640px) {
	.apfi-actu-liste__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.apfi-actu-liste__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px;
	}
}

.apfi-actu-card__cell {
	display: flex;
	min-width: 0;
}

/* Carte sans image : le bloc .apfi-actu-card__media n'est simplement pas
   rendu (voir template-parts/actualites-card.php) — la carte s'ouvre
   directement sur son corps, sans espace vide ni photo de remplacement. */
.apfi-actu-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--apfi-white);
	border: 1px solid var(--apfi-border);
	border-radius: var(--apfi-radius-md);
	overflow: hidden;
}

.apfi-actu-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.apfi-actu-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.apfi-actu-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(20px, 3vw, 26px);
}

.apfi-actu-card__categorie {
	align-self: flex-start;
	margin: 0 0 10px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--apfi-blue);
	text-decoration: none;
}
.apfi-actu-card__categorie:hover,
.apfi-actu-card__categorie:focus-visible {
	text-decoration: underline;
}

.apfi-actu-card__title {
	margin: 0 0 10px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--apfi-navy-text);
}
.apfi-actu-card__title a {
	color: inherit;
	text-decoration: none;
}
.apfi-actu-card__title a:hover,
.apfi-actu-card__title a:focus-visible {
	color: var(--apfi-blue);
}

.apfi-actu-card__excerpt {
	margin: 0 0 18px;
	font-size: 0.94rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.7);
	flex: 1;
}

.apfi-actu-card__footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid var(--apfi-border);
}

.apfi-actu-card__date {
	font-size: 0.82rem;
	color: rgba(16, 31, 51, 0.55);
}

.apfi-actu-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--apfi-blue);
	text-decoration: none;
	white-space: nowrap;
}
.apfi-actu-card__cta .apfi-icon {
	width: 15px;
	height: 15px;
}
.apfi-actu-card__cta:hover,
.apfi-actu-card__cta:focus-visible {
	text-decoration: underline;
}

/* --- Pagination (page "Actualités" et category.php) ---
   Habille la sortie native de paginate_links() (classes .page-numbers déjà
   générées par WordPress core) — aucun script, navigation par vrais liens. */
.apfi-actu-pagination {
	margin-top: clamp(32px, 4vw, 48px);
	display: flex;
	justify-content: center;
}
.apfi-actu-pagination ul.page-numbers {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.apfi-actu-pagination .page-numbers li {
	display: flex;
}
.apfi-actu-pagination .page-numbers a,
.apfi-actu-pagination .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	border-radius: var(--apfi-radius-sm);
	border: 1px solid var(--apfi-border);
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--apfi-navy-text);
	text-decoration: none;
}
.apfi-actu-pagination .page-numbers a:hover,
.apfi-actu-pagination .page-numbers a:focus-visible {
	border-color: var(--apfi-blue);
	color: var(--apfi-blue);
}
.apfi-actu-pagination .page-numbers.current {
	background: var(--apfi-blue);
	border-color: var(--apfi-blue);
	color: var(--apfi-white);
}
.apfi-actu-pagination .page-numbers.dots {
	border-color: transparent;
	color: rgba(16, 31, 51, 0.45);
}

/* --- Catégories (bloc 4) — nav pastille --- */
.apfi-actu-categories {
	padding-block: clamp(32px, 4vw, 48px);
	background: var(--apfi-white);
	border-top: 1px solid var(--apfi-border);
}

.apfi-actu-categories__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 12px;
}

.apfi-actu-categories__label {
	margin: 0;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(16, 31, 51, 0.5);
}

.apfi-actu-categories__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.apfi-actu-categories__pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--apfi-border);
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--apfi-navy-text);
	text-decoration: none;
	white-space: nowrap;
}
.apfi-actu-categories__pill:hover,
.apfi-actu-categories__pill:focus-visible {
	border-color: var(--apfi-blue);
	color: var(--apfi-blue);
	background: var(--apfi-blue-tint-05);
}

/* --- En-tête léger de category.php ---
   Volontairement DIFFÉRENT du Hero hybride bleu plein (voir
   template-parts/actualites-categorie-hero.php pour la justification) :
   bandeau sobre, fond blanc, classes entièrement nouvelles. */
.apfi-actu-cat {
	padding-block: clamp(32px, 5vw, 56px);
	background: var(--apfi-white);
	border-bottom: 1px solid var(--apfi-border);
}

.apfi-actu-cat__breadcrumb {
	margin-bottom: clamp(16px, 2.5vw, 24px);
}

.apfi-actu-cat__title {
	margin: 0;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.6rem, 3.5vw, 2.3rem);
	line-height: 1.2;
	color: var(--apfi-navy-text);
}

.apfi-actu-cat__description {
	margin: 12px 0 0;
	max-width: 70ch;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.7);
}

/* =========================================================================
   Article individuel (single.php — étape 25)
   ========================================================================= */

/* --- Hero de l'article ---
   Même principe "Hero hybride" que .apfi-rd-hero__* (fiches de réalisation,
   "Étape 21"), avec une ligne catégorie + date à la place des badges. */
.apfi-article-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--apfi-blue);
	color: var(--apfi-white);
}

.apfi-article-hero__layout {
	position: relative;
	z-index: 1;
	padding-block: clamp(40px, 6vw, 72px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 720px;
}

.apfi-article-hero__breadcrumb {
	color: rgba(255, 255, 255, 0.7);
}
.apfi-article-hero__breadcrumb a:hover,
.apfi-article-hero__breadcrumb a:focus-visible {
	color: var(--apfi-white);
}
.apfi-article-hero__breadcrumb .apfi-breadcrumb__sep {
	color: rgba(255, 255, 255, 0.4);
}

.apfi-article-hero__meta {
	margin: 18px 0 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	font-family: var(--apfi-font-body);
}

.apfi-article-hero__categorie {
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--apfi-white);
	background: rgba(255, 255, 255, 0.16);
	padding: 6px 12px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
}
.apfi-article-hero__categorie:hover,
.apfi-article-hero__categorie:focus-visible {
	background: rgba(255, 255, 255, 0.28);
}

.apfi-article-hero__date {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.72);
}

.apfi-article-hero__title {
	margin: 0;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	line-height: 1.15;
	color: var(--apfi-white);
}

.apfi-article-hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.apfi-article-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.apfi-article-hero__media-veil {
	display: none;
}

@media (min-width: 768px) {
	.apfi-article-hero--has-media .apfi-article-hero__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		aspect-ratio: auto;
	}
	.apfi-article-hero--has-media .apfi-article-hero__image {
		object-position: 78% center;
	}
	/* TEMPS 12B : dégradé légèrement étendu par rapport aux autres Hero
	   hybrides du site (zone opaque 40% au lieu de 34%). Le H1 d'un article
	   est un titre éditorial long, donc plus haut et plus large qu'un titre
	   de page : il lui faut une zone bleue dense un peu plus généreuse pour
	   rester parfaitement lisible. Scopé à `.apfi-article-hero`, les autres
	   familles de Hero ne sont pas touchées. */
	.apfi-article-hero--has-media .apfi-article-hero__media-veil {
		display: block;
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to right,
			var(--apfi-blue) 0%,
			var(--apfi-blue) 40%,
			rgba(11, 64, 154, 0.92) 50%,
			rgba(11, 64, 154, 0.35) 64%,
			rgba(11, 64, 154, 0) 78%
		);
	}
	/* `.apfi-container` centre son contenu (`margin-inline: auto`) : réduire
	   sa largeur maximale sans neutraliser ce centrage placerait la colonne
	   de texte au milieu du Hero, donc par-dessus la photo. On la ramène
	   explicitement au bord gauche du conteneur du site, exactement aligné
	   sur les autres sections. */
	.apfi-article-hero--has-media .apfi-article-hero__layout {
		/* Borne relative en plus de la borne absolue : garantit que la colonne
		   de texte ne dépasse jamais 52% de la largeur d'écran, donc qu'elle
		   reste toujours dans la zone bleue dense du dégradé, y compris en
		   tablette où une largeur fixe en occuperait près de 80%. */
		max-width: min(600px, 52%);
		margin-inline: max(0px, calc((100% - var(--apfi-container-width)) / 2)) auto;
	}
}

@media (min-width: 1024px) {
	.apfi-article-hero--has-media .apfi-article-hero__media-veil {
		background: linear-gradient(
			to right,
			var(--apfi-blue) 0%,
			var(--apfi-blue) 46%,
			rgba(11, 64, 154, 0.9) 56%,
			rgba(11, 64, 154, 0.3) 72%,
			rgba(11, 64, 154, 0) 88%
		);
	}
	.apfi-article-hero--has-media .apfi-article-hero__layout {
		max-width: min(660px, 52%);
	}
}

/* --- Corps de l'article ---
   Habille le contenu Gutenberg natif (the_content()) : premier composant du
   site à styler du contenu éditorial libre plutôt que des champs ACF
   structurés. */
.apfi-article-corps {
	padding-block: clamp(40px, 6vw, 64px);
	background: var(--apfi-white);
}

.apfi-article-corps__layout {
	display: flex;
	justify-content: center;
}

.apfi-article-corps__content {
	width: 100%;
	max-width: 720px;
	font-family: var(--apfi-font-body);
	font-size: 1.05rem;
	line-height: 1.75;
	color: rgba(16, 31, 51, 0.85);
}

.apfi-article-corps__content > * + * {
	margin-top: 1.3em;
}

.apfi-article-corps__content h2 {
	margin: 1.6em 0 0.6em;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.3;
	color: var(--apfi-navy-text);
}

.apfi-article-corps__content h3 {
	margin: 1.4em 0 0.5em;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1.35;
	color: var(--apfi-navy-text);
}

.apfi-article-corps__content ul,
.apfi-article-corps__content ol {
	padding-left: 1.3em;
}

.apfi-article-corps__content li + li {
	margin-top: 0.5em;
}

.apfi-article-corps__content a {
	color: var(--apfi-blue);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 2px;
}
.apfi-article-corps__content a:hover,
.apfi-article-corps__content a:focus-visible {
	color: var(--apfi-blue-dark);
}

.apfi-article-corps__content blockquote {
	margin: 0;
	padding-left: 1.2em;
	border-left: 3px solid var(--apfi-border);
	font-style: italic;
	color: rgba(16, 31, 51, 0.65);
}

/* Encadré de vigilance (arbitrage E, TEMPS 1) : classe CSS éditoriale
   appliquée manuellement par le rédacteur à un bloc Gutenberg "Groupe" (voir
   template-parts/article-corps.php) — pas de champ ACF. Traitement sobre :
   fond teinté, bordure gauche d'accent, aucune icône. */
.apfi-article-corps__content .apfi-encadre-vigilance {
	padding: 20px 24px;
	background: var(--apfi-bg-tint);
	border-left: 3px solid var(--apfi-blue);
	border-radius: 0 var(--apfi-radius-md) var(--apfi-radius-md) 0;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--apfi-navy-text);
}
.apfi-article-corps__content .apfi-encadre-vigilance > * + * {
	margin-top: 0.8em;
}

/* "Respirations photographiques" (TEMPS 6) : images natives insérées par le
   rédacteur via le bloc Gutenberg « Image » au sein du corps de l'article,
   pour aérer visuellement un texte réglementaire dense. Style générique
   appliqué au bloc image natif (`.wp-block-image`) — aucune dépendance à un
   fichier particulier, aucun champ ACF (conforme au principe d'empreinte
   ACF minimale déjà en vigueur). Rythme vertical volontairement plus large
   que le rythme courant du texte (2.6em contre 1.3em pour `> * + *`) pour
   marquer une vraie pause de lecture. */
.apfi-article-corps__content figure,
.apfi-article-corps__content .wp-block-image {
	margin: 2.6em 0;
}

.apfi-article-corps__content figure img,
.apfi-article-corps__content .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--apfi-radius-md);
}

.apfi-article-corps__content figcaption {
	margin-top: 10px;
	font-size: 0.85rem;
	line-height: 1.5;
	text-align: center;
	color: rgba(16, 31, 51, 0.55);
}

/* Rupture visuelle en débordement (largeur > colonne de texte), réservée aux
   écrans assez larges pour l'accueillir sans risque de débordement
   horizontal : le calcul de largeur du débordement est relatif à la colonne
   de 720px, pas au viewport, donc à partir de 1024px seulement (marge
   vérifiée : ~111px de chaque côté à 1024px pour un débordement qui n'en
   demande que 80px). En dessous, l'image reste pleine largeur de la colonne
   de texte — aucun changement de la largeur de colonne elle-même (720px,
   inchangée). */
@media (min-width: 1024px) {
	.apfi-article-corps__content figure,
	.apfi-article-corps__content .wp-block-image {
		width: 100%;
		max-width: 880px;
		margin-left: 50%;
		transform: translateX(-50%);
	}
}

/* --- CTA contextuel (optionnel) --- */
/* TEMPS 12B (14/09/2026) : ajout d'une respiration sous le bouton. Il était
   auparavant collé au bloc suivant (articles associés, ou grande section
   bleue finale), sans aucun espace bas. Valeur alignée sur le rythme
   vertical des sections du site (`clamp(48px, 6vw, 80px)`), légèrement
   amplifiée pour marquer la fin du corps éditorial avant la rupture de
   couleur. Scopé à ce seul bloc : ni le bouton, ni ses dimensions, ni son
   alignement, ni la section bleue ne sont modifiés. */
.apfi-article-cta-contextuel {
	display: flex;
	justify-content: center;
	padding-top: clamp(8px, 2vw, 16px);
	padding-bottom: clamp(48px, 7vw, 88px);
}
/* Le libellé du bouton étant du texte éditorial libre (nom du Pack visé),
   sa longueur varie d'un article à l'autre : autorise le retour à la ligne
   et centre le texte plutôt que d'hériter du `white-space: nowrap` global
   de `.apfi-btn`, pour éviter un débordement horizontal sur mobile avec un
   libellé long (constaté TEMPS 5 avec « Découvrir le Pack Ouverture &
   Réception ERP »). N'affecte que ce bouton précis, pas `.apfi-btn` globalement. */
.apfi-article-cta-contextuel__link {
	white-space: normal;
	text-align: center;
	max-width: 100%;
}

/* --- Articles associés ---
   Même principe que .apfi-rd-autres__* (fiches de réalisation), mais réutilise
   la grille de cartes .apfi-actu-liste__grid/.apfi-actu-card (image, catégorie,
   extrait, date, CTA) plutôt que la carte compacte "nom + localisation" des
   réalisations — contenu différent (articles, pas des missions), donc rendu
   différent, même emplacement éditorial ("Aller plus loin"). */
.apfi-article-associes {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-bg-tint);
}

.apfi-article-associes__eyebrow {
	margin: 0 0 8px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--apfi-blue);
}

.apfi-article-associes__title {
	margin: 0 0 28px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	line-height: 1.25;
	color: var(--apfi-navy-text);
	max-width: 620px;
}

/* =========================================================================
   Page "Contact" (page-contact.php, étape 26)
   VALIDÉE ET FIGÉE (08/09/2026) — ne plus modifier sans demande explicite,
   voir claude/maquette-contact-validee.md.
   Nouvelle page, sans impact sur la Home, "Nos solutions", "Secteurs
   d'activité", les pages Pack, les fiches de réalisation, Actualités,
   "À propos", le Header ou le Footer : toutes les classes ci-dessous sont
   propres à cette page (.apfi-contact-hero, .apfi-contact-intro,
   .apfi-contact-formulaire, .apfi-contact-form, .apfi-contact-reassurance).

   Page volontairement courte : 4 blocs seulement, alternance de fonds
   simple — Hero (bleu plein), Prise de contact (blanc), Formulaire (bleu
   très clair), Réassurance (blanc) — même logique d'alternance que les
   autres pages internes.
   ========================================================================= */

/* --- Bloc 1 : Hero — bleu APFI plein, SANS variante photo (à la différence
   de .apfi-apropos-hero / .apfi-secteurs-hero) : architecture validée par
   le client, aucun champ image n'existe pour ce Hero. --- */
.apfi-contact-hero {
	background: var(--apfi-blue);
	color: var(--apfi-white);
}

.apfi-contact-hero__layout {
	padding-block: clamp(40px, 6vw, 72px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 720px;
}

.apfi-contact-hero__breadcrumb {
	color: rgba(255, 255, 255, 0.7);
}
.apfi-contact-hero__breadcrumb a:hover,
.apfi-contact-hero__breadcrumb a:focus-visible {
	color: var(--apfi-white);
}
.apfi-contact-hero__breadcrumb .apfi-breadcrumb__sep {
	color: rgba(255, 255, 255, 0.4);
}

.apfi-contact-hero__eyebrow {
	margin: 18px 0 14px;
	font-family: var(--apfi-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.apfi-contact-hero__title {
	margin: 0 0 14px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	line-height: 1.15;
	color: var(--apfi-white);
}

.apfi-contact-hero__intro {
	margin: 0;
	max-width: 60ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

/* --- Bloc 2 : "Prise de contact" — texte court + coordonnées, deux
   colonnes desktop, empilé mobile. --- */
.apfi-contact-intro {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-white);
}

.apfi-contact-intro__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: start;
}

.apfi-contact-intro__titre {
	margin: 0 0 12px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	line-height: 1.25;
	color: var(--apfi-navy-text);
}

.apfi-contact-intro__texte p {
	margin: 0;
	max-width: 56ch;
	font-size: 1.02rem;
	line-height: 1.6;
	color: rgba(16, 31, 51, 0.75);
}

.apfi-contact-intro__coordonnees {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	background: var(--apfi-bg-tint);
	border-radius: var(--apfi-radius-md);
}

.apfi-contact-intro__coordonnees li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1rem;
	color: var(--apfi-navy-text);
}

.apfi-contact-intro__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--apfi-blue);
}

.apfi-contact-intro__coordonnees a {
	color: var(--apfi-navy-text);
	text-decoration: none;
	font-weight: 600;
}
.apfi-contact-intro__coordonnees a:hover,
.apfi-contact-intro__coordonnees a:focus-visible {
	color: var(--apfi-blue);
	text-decoration: underline;
}

@media (min-width: 900px) {
	.apfi-contact-intro__layout {
		grid-template-columns: 1.3fr 1fr;
		gap: 48px;
	}
}

/* --- Bloc 3 : Formulaire principal — carte blanche sur fond bleu très
   clair, largeur volontairement resserrée (meilleure lisibilité qu'un
   formulaire étiré sur 1280px). --- */
.apfi-contact-formulaire {
	padding-block: clamp(48px, 6vw, 80px);
	background: var(--apfi-bg-tint);
}

.apfi-contact-formulaire__layout {
	max-width: 820px;
	margin-inline: auto;
}

.apfi-contact-form {
	background: var(--apfi-white);
	border: 1px solid var(--apfi-border);
	border-radius: var(--apfi-radius-md);
	padding: clamp(24px, 4vw, 44px);
}

.apfi-contact-form__fieldset {
	border: 0;
	margin: 0 0 32px;
	padding: 0;
}

.apfi-contact-form__legend {
	padding: 0;
	margin: 0 0 20px;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--apfi-navy-text);
}

.apfi-contact-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-bottom: 20px;
}
.apfi-contact-form__row:last-child {
	margin-bottom: 0;
}

.apfi-contact-form__field label,
.apfi-contact-form__radio-legend {
	display: block;
	margin-bottom: 7px;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--apfi-navy-text);
}

/* Astérisque des champs obligatoires : couleur bleue, jamais rouge — le
   rouge institutionnel reste réservé au liseré tricolore (voir tokens en
   tête de fichier). */
.apfi-contact-form__required {
	color: var(--apfi-blue);
}

.apfi-contact-form__field input[type="text"],
.apfi-contact-form__field input[type="email"],
.apfi-contact-form__field input[type="tel"],
.apfi-contact-form__field select,
.apfi-contact-form__field textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 12px 14px;
	font-family: var(--apfi-font-body);
	font-size: 1rem;
	color: var(--apfi-navy-text);
	background: var(--apfi-white);
	border: 1px solid var(--apfi-border);
	border-radius: var(--apfi-radius-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.apfi-contact-form__field input:focus-visible,
.apfi-contact-form__field select:focus-visible,
.apfi-contact-form__field textarea:focus-visible {
	outline: none;
	border-color: var(--apfi-blue);
	box-shadow: 0 0 0 3px var(--apfi-blue-tint-10);
}

.apfi-contact-form__field textarea {
	resize: vertical;
	min-height: 120px;
}

.apfi-contact-form__radio-options {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
}

.apfi-contact-form__radio-options label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 400;
	font-size: 0.98rem;
	color: var(--apfi-navy-text);
	cursor: pointer;
}

.apfi-contact-form__radio-options input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--apfi-blue);
	cursor: pointer;
}

.apfi-contact-form__pieces-jointes {
	margin: -8px 0 24px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: rgba(16, 31, 51, 0.6);
}

.apfi-contact-form__rgpd {
	margin: 0 0 28px;
	font-size: 0.82rem;
	line-height: 1.55;
	color: rgba(16, 31, 51, 0.6);
}
.apfi-contact-form__rgpd a {
	color: var(--apfi-blue);
}
.apfi-contact-form__rgpd-pending {
	color: rgba(16, 31, 51, 0.45);
	cursor: default;
}

.apfi-contact-form__submit {
	width: 100%;
	justify-content: center;
}

@media (min-width: 600px) {
	.apfi-contact-form__row--2col {
		grid-template-columns: 1fr 1fr;
	}
	.apfi-contact-form__submit {
		width: auto;
	}
}

/* --- Formulaire WPForms — harmonisation visuelle (TEMPS 15D, 15/09/2026).

   Ces règles ne s'appliquent QUE lorsque `contact_wpforms_id` est renseigné
   et que WPForms rend réellement le formulaire (voir
   template-parts/contact-formulaire.php). Tant que ce n'est pas le cas,
   aucun élément `.wpforms-*` n'existe dans le DOM : ce bloc est inerte et le
   scaffold ci-dessus reste strictement inchangé.

   Écrites à partir du DOM RÉELLEMENT généré par WPForms Lite 2.0.1.1
   (preview/wpforms-9121-preview.html), jamais à partir de sélecteurs
   supposés. Tout est scopé par `.apfi-contact-formulaire` : aucun autre
   formulaire WPForms du site, présent ou futur, n'est affecté, et aucune
   règle `.apfi-contact-form__*` du scaffold n'est modifiée.

   Le balisage moderne de WPForms (`wpforms-render-modern`) pilote son style
   par variables CSS. Les variables de COULEUR viennent de `:root` : les
   redéfinir dans ce scope suffit. Les variables de TAILLE sont posées par le
   plugin sur `#wpforms-<id>` (spécificité d'ID, imbattable par des classes) :
   plutôt que d'employer `!important`, elles sont redéfinies sur les deux
   enfants directs du conteneur (`.wpforms-field-container` et
   `.wpforms-submit-container`), où la déclaration propre prime sur la valeur
   héritée. Aucun `!important` n'est donc nécessaire, et aucun identifiant de
   formulaire ou de champ n'est utilisé.

   Le champ anti-spam (honeypot) injecté par WPForms n'est jamais ciblé : son
   identifiant et son libellé changent à chaque rendu. Il est sorti du flux
   par le plugin (`position: absolute !important`) et ne consomme donc aucune
   cellule de la grille ci-dessous, qui place en outre chaque champ
   explicitement. --- */

.apfi-contact-formulaire .wpforms-container {
	margin: 0;
	padding: 0;
	--wpforms-container-padding: 0px;
	--wpforms-field-border-color: var(--apfi-border);
	--wpforms-field-border-color-spare: var(--apfi-border);
	--wpforms-field-border-size: 1px;
	--wpforms-field-border-radius: var(--apfi-radius-sm);
	--wpforms-field-background-color: var(--apfi-white);
	--wpforms-field-text-color: var(--apfi-navy-text);
	--wpforms-label-color: var(--apfi-navy-text);
	--wpforms-button-background-color: var(--apfi-blue);
	--wpforms-button-border-color: var(--apfi-blue);
	--wpforms-button-text-color: #fff;
	--wpforms-button-border-radius: var(--apfi-radius-sm);
}

.apfi-contact-formulaire .wpforms-form {
	margin: 0;
}

/* Variables de taille — voir la note ci-dessus : posées sur les enfants du
   conteneur pour contourner proprement la spécificité d'ID du plugin.
   L'espacement vertical entre champs est neutralisé (0) : il est assuré par
   le `gap` de la grille, comme dans le scaffold. */
.apfi-contact-formulaire .wpforms-field-container,
.apfi-contact-formulaire .wpforms-submit-container {
	--wpforms-field-size-input-height: 40px;
	--wpforms-field-size-input-spacing: 0px;
	--wpforms-field-size-font-size: 1rem;
	--wpforms-field-size-line-height: 1.4;
	--wpforms-field-size-padding-h: 14px;
	--wpforms-label-size-font-size: 0.92rem;
	--wpforms-label-size-line-height: 1.35;
	--wpforms-button-size-font-size: 0.95rem;
	--wpforms-button-size-height: 46px;
	--wpforms-button-size-padding-h: 22px;
	--wpforms-button-size-margin-top: 0px;
}

/* Grille : une colonne, puis deux à partir de 600px — même point de bascule
   que `.apfi-contact-form__row--2col`. Placement explicite : tout champ est
   pleine largeur par défaut, seuls les champs porteurs des classes métier
   occupent une demi-colonne. */
.apfi-contact-formulaire .wpforms-field-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field {
	margin: 0;
	padding: 0;
}

/* Les règles ci-dessous portent le scope complet
   `.apfi-contact-formulaire .wpforms-container .wpforms-form` : la feuille du
   plugin cible ses éléments avec une spécificité élevée, et l'ordre de
   chargement des feuilles n'est pas garanti en production. Ce préfixe passe
   systématiquement devant sans recourir à `!important`. */
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field-label {
	display: block;
	float: none;
	margin: 0 0 7px;
	padding: 0;
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.35;
	color: var(--apfi-navy-text);
}

/* Astérisque des champs obligatoires : bleu APFI, jamais rouge — WPForms le
   met en rouge par défaut (voir `.apfi-contact-form__required`). */
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-required-label {
	color: var(--apfi-blue);
	text-decoration: none;
}

.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field input[type="text"],
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field input[type="email"],
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field input[type="tel"],
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field select,
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 12px 14px;
	font-family: var(--apfi-font-body);
	font-size: 1rem;
	color: var(--apfi-navy-text);
	background-color: var(--apfi-white);
	border: 1px solid var(--apfi-border);
	border-radius: var(--apfi-radius-sm);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field input:focus,
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field select:focus,
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field textarea:focus {
	outline: none;
	box-shadow: none;
}

.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field input:focus-visible,
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field select:focus-visible,
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field textarea:focus-visible {
	outline: none;
	border-color: var(--apfi-blue);
	box-shadow: 0 0 0 3px var(--apfi-blue-tint-10);
}

/* Hauteur des champs sur une ligne : 40px, exactement la valeur rendue par le
   scaffold en production (le thème parent impose cette hauteur aux champs de
   formulaire ; le scaffold ne la surcharge pas). */
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field input[type="text"],
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field input[type="email"],
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field input[type="tel"],
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field select {
	height: 40px;
	min-height: 40px;
}

/* TEMPS 15E — texte des listes déroulantes rogné en bas. Cause constatée sur
   le banc de test (DOM réel 9121) : hauteur 40px + padding vertical 12px +
   bordures laissaient une boîte de contenu de 14px seulement, pour une ligne
   de texte de ~19px (interligne calculé 24,8px hérité du corps de page). Un
   <input> laisse déborder son texte sans le couper, un <select> le rogne.
   Correction : padding vertical nul et interligne rendu au navigateur — la
   boîte de contenu passe à 38px, le texte et le chevron se centrent
   naturellement, et la hauteur de 40px (cohérence avec les champs texte
   voisins) est conservée. Aucun overflow masqué, aucun composant JS. */
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field select {
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 34px;
	line-height: normal;
}

/* Le scaffold utilise `rows="5"` + `min-height: 120px`, soit 146px rendus.
   WPForms ne permet pas de fixer `rows` : la hauteur validée est reproduite
   par la hauteur minimale. */
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field-textarea textarea {
	height: auto;
	resize: vertical;
	min-height: 146px;
}

/* Choix unique : WPForms rend un vrai <fieldset><legend> puis une <ul>. La
   sémantique est conservée telle quelle, seule la présentation est alignée
   sur `.apfi-contact-form__radio-options`. */
.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field-radio fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field-radio ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 0;
	padding: 0;
}

.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field-radio li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 0;
}

.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field-radio input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--apfi-blue);
	cursor: pointer;
}

.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field-label-inline {
	display: inline;
	margin: 0;
	padding: 0;
	font-family: var(--apfi-font-body);
	font-weight: 400;
	font-size: 0.98rem;
	line-height: 1.4;
	color: var(--apfi-navy-text);
	cursor: pointer;
}

/* Bouton : reprise stricte de `.apfi-btn.apfi-btn--primary`, y compris la
   pleine largeur en dessous de 600px (`.apfi-contact-form__submit`). */
.apfi-contact-formulaire .wpforms-submit-container {
	margin: 28px 0 0;
	padding: 0;
}

.apfi-contact-formulaire .wpforms-container .wpforms-form button.wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 22px;
	font-family: var(--apfi-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
	background-color: var(--apfi-blue);
	border: 1.5px solid transparent;
	border-radius: var(--apfi-radius-sm);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* TEMPS 15E — flèche des CTA APFI. WPForms ne permet pas d'insérer d'icône
   dans son bouton : elle est ajoutée en pseudo-élément, donc sans toucher au
   libellé configuré dans le formulaire. Elle devient un élément flexible du
   bouton (déjà en `inline-flex` avec `gap: 10px`), hérite de la couleur du
   texte et reste centrée verticalement. Le spinner de WPForms est une image
   placée APRÈS le bouton, en dehors de celui-ci : la flèche ne peut pas le
   perturber. Pendant l'envoi, WPForms désactive le bouton et remplace son
   libellé par « Envoi... » — la flèche est alors retirée, pour ne pas
   afficher « Envoi... → ». */
.apfi-contact-formulaire .wpforms-container .wpforms-form button.wpforms-submit::after {
	content: "→";
	font-size: 1.05em;
	line-height: 1;
	flex-shrink: 0;
}

.apfi-contact-formulaire .wpforms-container .wpforms-form button.wpforms-submit[disabled]::after,
.apfi-contact-formulaire .wpforms-container .wpforms-form button.wpforms-submit.wpforms-disabled::after {
	content: none;
}

.apfi-contact-formulaire .wpforms-container .wpforms-form button.wpforms-submit:hover {
	background-color: var(--apfi-blue-dark);
	color: #fff;
	transform: translateY(-1px);
}

.apfi-contact-formulaire .wpforms-container .wpforms-form button.wpforms-submit:focus-visible {
	outline: 2px solid var(--apfi-blue);
	outline-offset: 3px;
}

/* Intertitres « Vos coordonnées » et « Votre projet ». Les champs Contenu et
   HTML de WPForms étant réservés à Pro, ils sont générés en CSS sur les deux
   champs porteurs des classes repères, sans ajouter de HTML côté WordPress.
   Le titre est en position absolue et la place lui est réservée par un
   `padding-top` appliqué au champ du groupe ET à son frère immédiat (le
   second champ de la même ligne à partir de 600px) : les libellés des deux
   champs d'une même ligne restent ainsi parfaitement alignés.
   Limite assumée : un contenu généré en CSS est décoratif et ne porte pas la
   sémantique d'un <legend>, contrairement au scaffold. Les <label> des champs
   et le <fieldset>/<legend> du choix unique, eux, restent natifs. */
.apfi-contact-formulaire .wpforms-container .wpforms-form .apfi-group-coordonnees,
.apfi-contact-formulaire .wpforms-container .wpforms-form .apfi-group-projet {
	position: relative;
}

.apfi-contact-formulaire .wpforms-container .wpforms-form .apfi-group-coordonnees::before,
.apfi-contact-formulaire .wpforms-container .wpforms-form .apfi-group-projet::before {
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--apfi-font-heading);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.25;
	color: var(--apfi-navy-text);
	white-space: nowrap;
}

.apfi-contact-formulaire .wpforms-container .wpforms-form .apfi-group-coordonnees::before {
	content: "Vos coordonnées";
}

.apfi-contact-formulaire .wpforms-container .wpforms-form .apfi-group-projet::before {
	content: "Votre projet";
	top: 12px;
}

.apfi-contact-formulaire .wpforms-container .wpforms-form .apfi-group-coordonnees {
	padding-top: 40px;
}

.apfi-contact-formulaire .wpforms-container .wpforms-form .apfi-group-projet {
	padding-top: 52px;
}

/* Informations complémentaires rendues par le thème sous le formulaire
   (voir template-parts/contact-formulaire.php) : mêmes styles que dans le
   scaffold, seules les marges sont adaptées à cette position. */
/* TEMPS 15E — respiration légèrement accrue entre l'action principale et les
   informations secondaires, et contraste très légèrement relevé (0,6 → 0,72,
   valeur déjà employée ailleurs dans le thème pour les textes courants). Les
   deux paragraphes restent volontairement secondaires, et le lien vers la
   Politique de confidentialité conserve sa couleur bleue de lien (règle
   `.apfi-contact-form__rgpd a`, inchangée). Ces deux classes n'existent que
   dans la branche WPForms : le scaffold n'est pas concerné. */
.apfi-contact-form__pieces-jointes--after {
	margin: 36px 0 12px;
	color: rgba(16, 31, 51, 0.72);
}

.apfi-contact-form__rgpd--after {
	margin: 0;
	color: rgba(16, 31, 51, 0.72);
}

@media (min-width: 600px) {
	.apfi-contact-formulaire .wpforms-field-container {
		grid-template-columns: 1fr 1fr;
	}
	.apfi-contact-formulaire .wpforms-container .wpforms-form .wpforms-field {
		grid-column: 1 / -1;
	}
	.apfi-contact-formulaire .wpforms-container .wpforms-form .apfi-half-first {
		grid-column: 1 / 2;
	}
	.apfi-contact-formulaire .wpforms-container .wpforms-form .apfi-half:not(.apfi-half-first) {
		grid-column: 2 / 3;
	}
	.apfi-contact-formulaire .wpforms-container .wpforms-form .apfi-group-coordonnees + .wpforms-field {
		padding-top: 40px;
	}
	.apfi-contact-formulaire .wpforms-container .wpforms-form .apfi-group-projet + .wpforms-field {
		padding-top: 52px;
	}
	.apfi-contact-formulaire .wpforms-container .wpforms-form button.wpforms-submit {
		width: auto;
	}
}

/* --- Bloc 4 : Réassurance — texte court, centré, sans promesse de délai
   (demande explicite du client). --- */
.apfi-contact-reassurance {
	padding-block: clamp(40px, 5vw, 64px);
	background: var(--apfi-white);
}

.apfi-contact-reassurance__layout {
	max-width: 620px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.apfi-contact-reassurance__icon {
	width: 32px;
	height: 32px;
	color: var(--apfi-blue);
}

.apfi-contact-reassurance__layout p {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--apfi-navy-text);
}