/**
 * Sections : styles des sections et composants de contenu (hero, bento, accordéons, cartes, formulaires…).
 * Chargée partout (plus de liste de pages dans enqueue.php). Les règles génériques qui ne s'appliquaient
 * qu'à certaines pages sont limitées à ces pages par :where(body…) (spécificité inchangée).
 */

/* ==========================================================================
 * Accueil et composants partagés (CTA diagnostic, bento chiffres, accordéon, couverture, groupe, carrières, Nos métiers)
 * ========================================================================== */
/*
 * Accessite Child — Page d'accueil.
 * Calé pixel-près sur l'export Figma 1440px (HTML/CSS source de vérité).
 */

/* ============================================================
 * Section 1 — Hero accueil — calé sur la maquette refonte 2026 :
 * image plein écran + overlay noir paramétrable, contenu aligné à
 * gauche (left 156px, top ~105px), titre 72px uppercase 4 lignes.
 * ============================================================ */
.section--home-hero {
	min-height: 711px;
	background: var(--accessite-beige) center center / cover no-repeat;
	color: var(--wp--preset--color--white, #fff);
	padding: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	position: relative;
	isolation: isolate; /* contexte d'empilement local : vidéo < overlay < contenu */
}
/* Fond vidéo (mp4) optionnel — lu en boucle, sans son, derrière l'overlay. */
.home-hero__bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1; /* sous l'overlay et le texte ; contenu par isolation:isolate */
}
.section--home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--accessite-home-hero-overlay, 0.2));
	pointer-events: none;
	z-index: 1;
}
.section--home-hero__inner {
	max-width: var(--accessite-container-max);
	margin: 0 auto;
	/* Padding hero standardisé (top 25 = juste sous le trait du menu, audit utilisateur). */
	padding: 25px var(--accessite-container-pad) 96px 156px;
	width: 100%;
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: flex-start;
}
.home-hero__surtitre {
	color: var(--wp--preset--color--white, #fff);
	font-size: 12px;
	font-weight: var(--accessite-font-weight-bold);
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
	line-height: 1.5;
}
.home-hero__title {
	font-size: 72px;
	line-height: 72px;
	letter-spacing: -0.01em;
	font-weight: var(--accessite-font-weight-medium);
	color: var(--wp--preset--color--white, #fff);
	margin: 0;
	text-transform: uppercase;
	max-width: 856px;
}
.home-hero__title strong {
	font-weight: var(--accessite-font-weight-bold);
	color: var(--wp--preset--color--white, #fff);
}
.home-hero__title strong.is-teal {
	color: var(--accessite-color-primary);
}
.home-hero__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
@media (max-width: 1200px) {
	.section--home-hero__inner { padding: 80px 42px; }
	.home-hero__title { font-size: 56px; line-height: 60px; }
}
@media (max-width: 900px) {
	.section--home-hero { min-height: 0; }
	.section--home-hero__inner { padding: 64px var(--accessite-container-pad); gap: 28px; }
	.home-hero__title { font-size: 40px; line-height: 44px; }
}

/* ============================================================
 * Section 2 — Bandeau clients
 * Sheet modifs L10/L11/L12 : sur-titre à GAUCHE, marges resserrées,
 * trait de séparation IMMÉDIATEMENT SOUS le carrousel (collé aux logos,
 * limité au container — pas full-width écran).
 * AUCUN trait au-dessus du carrousel (retiré via border:0 + suppression
 * de toute règle ::before ou border-top héritée). */
/* Trait sous le slider — 80vw centré (normalisation globale). */

/* Placeholder texte (carrousel fresh install, sans logo CPT en base) :
   badge gris monochrome cohérent avec le mode grayscale des vrais logos. */

/* Mode marquee — sheet modifs L51 (page Nos références) : carrousel défilant
 * infini en CSS pur (2 sets côte-à-côte, translateX sur -50% pour reboucler).
 * En mode marquee, le trait est sur le wrapper (pas sur les tracks qui défilent). */
@keyframes accessite-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-100% - clamp(16px, 3vw, 48px))); }
}

/* ============================================================
 * Section 3 — Chiffres
 * Trait de séparation RÉDUIT (cadré container, plus pleine largeur)
 * entre Chiffres clés et Ce que nous avons fait (études de cas).
 * ============================================================ */

/* Formes décoratives (cercle teal-light + half-pill coral) en haut à droite */

/* Titre 2 lignes (ligne 2 indentée 104px) */

/* Grille : 5 colonnes séparées par border-right */

/* Valeur avec underline teal-light en background */

/* ============================================================
 * Section 4 — Cinq leviers (tabs)
 * Séparateur 80vw entre Leviers et Études (audit utilisateur 2026-05-29) :
 * positionné AU MILIEU de l'espace entre les deux sections — pas collé sous
 * les pills. Pour ça : on retire le padding-bottom de la section et on
 * distribue l'air via margin haut/bas sur le pseudo-element, équilibré.
 * ============================================================ */
.section--home-leviers {
	padding: 120px 0 0;
	background: var(--accessite-beige);
	position: relative;
}

/* ============================================================
 * Section 6 — Profils (5 cards) — calée sur la maquette refonte 2026.
 * Sheet modifs L22 : trait de séparation pleine largeur en dessous.
 * ============================================================ */

/* Décor : stade jaune + disque teal-light en haut à droite */

/* Header */

/* Body : 5 cards */

/* CTA : texte navy + rond teal-light avec flèche */

/* ============================================================
 * Section 7 — Couverture
 * ============================================================ */
/* Bouton "Toutes nos références" sur la même ligne que le titre. */
/* Colonne gauche : légendes en haut, motif décoratif collé en bas. */

/* ============================================================
 * Section 8 · Promeo Groupe (blocs natifs : Couverture, Colonnes, Groupes en grille)
 * 1. Bandeau photo des dirigeants + citation sur voile navy (bloc Couverture).
 *    Réutilisable : classe « cover-citation » sur un bloc Couverture (ex. Le mot du DG, Notre approche) ;
 *    « cover-citation--texte » pour une citation longue en casse normale.
 * 2. Titre + logo à gauche, texte et chiffres clés à droite (bloc Colonnes).
 * 3. Pôles du groupe en cartes (Groupe en grille : passe seul en 2 puis 1 colonne).
 * ============================================================ */

/* 1. Bandeau citation */
:is(.promeo-cover, .cover-citation):not(#_) { border-radius: 24px; overflow: hidden; margin: 0; }
:is(.promeo-cover, .cover-citation) .wp-block-cover__inner-container:not(#_) { width: 100%; max-width: 820px; margin: 0; }
:is(.promeo-cover, .cover-citation) .wp-block-cover__inner-container > * { margin: 0; }
:is(.promeo-cover, .cover-citation) :is(.promeo-cover__mark, .cover-citation__mark) { color: var(--wp--preset--color--teal, #38B6AB); font-size: 96px; font-weight: var(--accessite-font-weight-bold); line-height: .6; height: 40px; }
:is(.promeo-cover__quote, .cover-citation__quote) {
	color: var(--wp--preset--color--white, #fff);
	font-size: clamp(24px, 2.6vw, 38px);
	font-weight: var(--accessite-font-weight-medium);
	line-height: 1.2;
	text-transform: uppercase;
}
:is(.promeo-cover, .cover-citation) :is(.promeo-cover__author, .cover-citation__author) { margin-top: 20px; color: rgba(255, 255, 255, .85); font-size: 15px; }
:is(.promeo-cover__author, .cover-citation__author) a { color: var(--wp--preset--color--teal-light, #8ACBC1); }

/* Citation longue (Le mot du DG) : titre de section dans le bandeau, citation en casse normale. */
.cover-citation .cover-citation__title:not(#_) { margin: 0 0 20px; color: var(--wp--preset--color--white, #fff); font-weight: var(--accessite-font-weight-medium); text-transform: uppercase; }
.cover-citation .cover-citation__title strong { font-weight: var(--accessite-font-weight-bold); }
.cover-citation .cover-citation__title strong.is-teal { color: var(--accessite-color-primary); }
.cover-citation--texte .cover-citation__quote { font-size: clamp(20px, 1.9vw, 28px); font-style: italic; line-height: 1.4; text-transform: none; }
@media (max-width: 700px) {
	.cover-citation--texte .cover-citation__quote { font-size: 18px; }
	.cover-citation.cover-citation--texte:not(#_) { min-height: 660px; }
}

/* 2. Titre / texte / chiffres */
.promeo-intro:not(#_) { gap: 64px; margin: 56px 0 0; align-items: flex-start; }
.promeo-intro .accessite-section-overtitle {
	margin: 0 0 20px;
	color: color-mix(in srgb, var(--wp--preset--color--navy, #1A2A4B) 65%, transparent);
	font-weight: var(--accessite-font-weight-bold);
	text-transform: uppercase;
}
.promeo-intro .accessite-section-title { margin: 0; color: var(--accessite-navy); font-weight: var(--accessite-font-weight-medium); text-transform: uppercase; }
.promeo-intro .accessite-section-title strong { font-weight: var(--accessite-font-weight-bold); color: var(--accessite-navy); }
.promeo-intro .accessite-section-title strong.is-teal { color: var(--accessite-color-primary); }
.promeo-intro__logo:not(#_) { margin: 28px 0 0; }
.promeo-intro__logo img { mix-blend-mode: multiply; }
.promeo-intro__text { margin: 0; color: var(--accessite-navy); font-size: 20px; font-weight: var(--accessite-font-weight-semibold); line-height: 1.5; }
.promeo-stats:not(#_) { gap: 0; margin: 32px 0 0; border-top: 1px solid var(--wp--preset--color--gray, #CBCBCB); }
.promeo-stat { margin: 0; padding: 20px 16px 0 0; display: flex; flex-direction: column; gap: 6px; }
.promeo-stat strong { color: var(--accessite-navy); white-space: nowrap; font-size: 36px; font-weight: var(--accessite-font-weight-bold); line-height: 1; }
.promeo-stat span { color: var(--accessite-gray-700); font-size: 13px; line-height: 1.35; }

/* 3. Pôles */
.promeo-poles:not(#_) { margin: 56px 0 0; }
.promeo-pole:not(#_) { margin: 0; padding: 28px 26px; border-radius: 20px; display: flex; flex-direction: column; gap: 10px; }
.promeo-pole > *:not(#_) { margin: 0; }
.promeo-pole__dot:not(#_) { width: 18px; height: 18px; min-height: 18px; padding: 0; border-radius: 50%; margin-bottom: 8px; }
.promeo-pole h3 { color: var(--accessite-navy); font-size: 18px; line-height: 1.25; text-transform: none; }
.promeo-pole__desc { color: var(--accessite-gray-700); font-size: 15px; line-height: 1.55; }
.promeo-pole__ca {
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--white, #fff);
	color: var(--accessite-navy);
	font-size: 13px;
	font-weight: var(--accessite-font-weight-bold);
}
.promeo-cta:not(#_) { margin: 40px 0 0; }

@media (max-width: 1100px) {
	.promeo-intro:not(#_) { gap: 32px; }
}
@media (max-width: 781px) {
	:is(.promeo-cover, .cover-citation):not(#_) { min-height: 460px; border-radius: 18px; }
	.promeo-intro:not(#_) { margin-top: 40px; }
	.promeo-intro__text { font-size: 18px; }
	.promeo-stat strong { font-size: 28px; }
	.promeo-poles:not(#_) { margin-top: 40px; }
	.promeo-pole { padding: 22px 20px; border-radius: 16px; }
}
@media (max-width: 700px) {
	/* Bandeau photo bord à bord : les gouttières mobiles (58px) le rendaient trop étroit. */
	:is(.promeo-cover, .cover-citation):not(#_) {
		margin-left: calc(-1 * var(--accessite-gutter-left));
		margin-right: calc(-1 * var(--accessite-gutter-right));
		min-height: 540px;
		padding: 28px 24px;
		border-radius: 0;
	}
	:is(.promeo-cover, .cover-citation) .wp-block-cover__image-background:not(#_) { object-position: 50% 15%; }
	:is(.promeo-cover, .cover-citation) :is(.promeo-cover__mark, .cover-citation__mark) { font-size: 72px; height: 30px; }
	:is(.promeo-cover__quote, .cover-citation__quote) { font-size: 21px; }
	.promeo-stats:not(#_) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.promeo-stat { padding-bottom: 16px; }
}

/* ============================================================
 * Section 9 — CTA Diagnostic
 * ============================================================ */
.section--home-cta-diag {
	min-height: 700px; padding: 0;
	background: var(--accessite-navy) center center / cover no-repeat;
	color: var(--wp--preset--color--white, #fff);
	display: flex; align-items: center;
	position: relative; overflow: hidden;
}
.section--home-cta-diag__overlay {
	position: absolute; inset: 0;
	background: var(--accessite-navy);
}
.section--home-cta-diag .section__inner {
	max-width: 1100px; text-align: center;
	padding: 80px var(--accessite-container-pad);
}
.section--home-cta-diag .accessite-section-overtitle {
	color: var(--accessite-pink); letter-spacing: 0.1em;
	margin: 0 auto 24px;
}
.section--home-cta-diag .accessite-section-title {
	color: var(--wp--preset--color--white, #fff);
	margin: 0 auto 24px; max-width: 900px;
}
.section--home-cta-diag .accessite-section-title strong { color: var(--accessite-color-primary); }
.section--home-cta-diag .accessite-section-paragraph {
	color: color-mix(in srgb, var(--wp--preset--color--white, rgb(255,255,255)) 85%, transparent); margin: 0 auto 40px; max-width: 600px;
}
.section--home-cta-diag .section__buttons {
	display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}

/* ============================================================
 * Section 11 — Carrières "Rejoignez les experts du retail de demain."
 * Calé maquette refonte 2026 (Maquette/Section carrieres.png). Remplace
 * le bloc Contact sur la home (audit utilisateur 2026-05-28).
 * Split content gauche / image droite ; 5 cards numérotées en pied.
 * ============================================================ */
.section--home-carrieres {
	background: var(--accessite-beige);
	padding: 80px 0;
	position: relative;
}
/* Pas de séparateur sous Carrières (audit utilisateur 2026-05-29) — la
 * section CTA suivante a son propre fond, le trait faisait double-emploi. */
.carrieres__inner {
	max-width: var(--accessite-container-max);
	margin: 0 auto;
	padding: 0 var(--accessite-container-pad);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 540px;
	gap: 48px;
	align-items: stretch;
	box-sizing: border-box;
}
.carrieres__left {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}
.carrieres__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.carrieres__title {
	line-height: 1.05;
	letter-spacing: -0.01em;
	font-weight: var(--accessite-font-weight-medium);
	color: var(--accessite-navy);
	margin: 0;
	text-transform: none;
	max-width: 600px;
}
.carrieres__title strong {
	font-weight: var(--accessite-font-weight-bold);
	color: var(--accessite-navy);
}
.carrieres__title strong.is-teal {
	color: var(--accessite-color-primary);
}
.carrieres__paragraph {
	font-size: 16px;
	line-height: 1.6;
	color: var(--accessite-navy);
	font-weight: var(--accessite-font-weight-medium);
	margin: 0;
	max-width: 600px;
}
/* Audit utilisateur 2026-05-29 : cards simplifiées — uniquement le titre
 * de la valeur, sans badge numéroté ni descriptif. Reste sur fond blanc, en
 * ligne sur desktop, avec une respiration verticale équilibrée. */
/* Section « Nos valeurs » (accueil) — figé sur demande utilisateur. NE PLUS MODIFIER. */
.carrieres__values {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	gap: 20px;
}
.carrieres-card {
	flex: 1 1 0;
	min-width: 0;
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 10%, transparent);
	border-radius: 8px;
	/* Padding vertical équilibré pour que le titre soit centré
	 * visuellement sans laisser un grand vide en bas. */
	padding: 28px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.carrieres-card:hover {
	border-color: var(--accessite-teal);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--dark, rgb(8,8,7)) 6%, transparent);
	transform: translateY(-2px);
}
.carrieres-card__title {
	margin: 0;
	color: var(--accessite-navy);
	font-size: 18px;
	font-weight: var(--accessite-font-weight-bold);
	line-height: 22px;
	letter-spacing: -0.005em;
	text-align: center;
}
.carrieres__right {
	position: relative;
	width: 100%;
	min-height: 480px;
	overflow: hidden;
	background: var(--accessite-gray);
}
.carrieres__image {
	width: 100%;
	height: 100%;
	display: block;
}
@media (max-width: 1100px) {
	.carrieres__inner { grid-template-columns: 1fr; }
	.carrieres__right { min-height: 360px; }
	.carrieres__values { flex-wrap: wrap; }
	.carrieres-card { flex: 1 1 calc(50% - 10px); }
}
@media (max-width: 700px) {
	.carrieres-card { flex: 1 1 100%; }
}

/* ============================================================
 * Section 10 — Contact (DÉSACTIVÉE — remplacée par Carrières ci-dessus).
 * CSS conservé pour rétrocompatibilité si on devait réactiver via Customizer.
 * ============================================================ */

/* Colonne gauche : intro en haut, adresses en bas */

/* Adresses : 2 lignes séparées par border-top, padding 20px / 42px */

/* Colonne droite : 2 cards empilées 50/50 séparées par border-top */

/* ============================================================
 * Section partagée — Témoignages (CPT temoignage)
 * Calée sur la maquette PDF Vos besoins : header split (titre + paragraphe
 * latéral), 3 cards horizontales sans fond, picto guillemets « teal.
 * Sheet modifs L39-40 (refonte Vos besoins).
 * ============================================================ */

/* ============================================================
 * RESPONSIVE — audit utilisateur (mobile/tablet)
 * Cible : home accueil.
 * ============================================================ */

/* --- Leviers (tabs) : nav 5 colonnes → wrap, content overlay → stack --- */
@media (max-width: 1100px) {
	.section--home-leviers .section__header--split { flex-direction: column; gap: 20px; }
	/* Contenu : sort de l'absolute, stack PROPREMENT sous l'image (pas de
	   chevauchement — le bord teal/navy de la card sur l'image rendait le
	   titre illisible). */
	/* Pills compactes : auto-fit avec min réduit + padding/typo plus serrés. */
}

/* --- Couverture nationale : labels lisibles sur petits écrans --- */
@media (max-width: 700px) {
	.couverture-figma > *:not(#_) { padding-bottom: 48px; gap: 40px; }
	.couverture-figma__head:not(#_) { flex-direction: column; align-items: flex-start; gap: 20px; }
	.couverture-figma__head > * { width: 100%; }
	.couverture-figma__title:not(#_){ line-height: 1.1; }
	.couverture-figma__legend:not(#_) { padding: 0 20px; gap: 0; }
	/* Items de légende : pastille 40, label 16, padding réduit. */
	.couverture-figma__legend > * > *:not(#_) {
		gap: 12px;
		padding-top: 14px;
		padding-bottom: 14px;
	}
	.couverture-figma__legend > * > * > :first-child:not(#_) {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		padding: 4px;
	}
	.couverture-figma__legend > * > * > :first-child > *:not(#_) {
		width: 32px;
		height: 32px;
	}
	.couverture-figma__legend > * > * > :last-child:not(#_){
		font-size: 16px;
		line-height: 1.3;
		text-align: left;
	}
	.couverture-figma__map:not(#_) { min-height: 280px; }
}

/* --- CTA Diagnostic "Prêt à activer les leviers" : refonte responsive --- */
@media (max-width: 900px) {
	.section--home-cta-diag { min-height: 0; }
	.section--home-cta-diag .section__inner {
		padding: 64px 24px;
		max-width: 100%;
	}
	.section--home-cta-diag .accessite-section-title {
		line-height: 1.1;
		max-width: 100%;
	}
	.section--home-cta-diag .accessite-section-paragraph {
		font-size: 15px;
		max-width: 100%;
	}
	/* Doc mobile R7 : CTA final — bouton(s) centré(s) et largeur auto (plus pleine largeur). */
	.section--home-cta-diag .section__buttons { flex-direction: column; align-items: center; gap: 12px; }
	.section--home-cta-diag .section__buttons .btn { width: auto; max-width: 100%; box-sizing: border-box; text-align: center; }
}
@media (max-width: 600px) {
	.section--home-cta-diag .section__inner { padding: 48px 20px; }
}

/* ============================================================
 * MOBILE — alignement maquette Figma "Maquette mobile" (page 514:2326).
 * Audit utilisateur 2026-05-29 : DESKTOP FIGÉ. Toutes les règles vivent
 * dans des media queries et n'impactent que les écrans ≤ 700px.
 * Tailles, paddings et hiérarchies typographiques calés au pixel sur le
 * HTML d'export Figma (largeur cible 375px).
 * ============================================================ */

/* --- HERO accueil mobile : pleine largeur, padding 20px, titre 42.8px --- */
@media (max-width: 700px) {
	.section--home-hero { min-height: 715px; }
	.section--home-hero__inner {
		padding: 39.4px 20px 40px;
		gap: 14.7px;
		max-width: 100%;
	}
	.home-hero__surtitre {
		font-size: 12.1px;
		line-height: 18.82px;
		letter-spacing: 1.46px;
	}
	.home-hero__title {
		font-size: 42.8px;
		line-height: 41.9px;
		letter-spacing: 0;
		max-width: 100%;
	}
	.home-hero__actions { width: 100%; }
	.home-hero__actions .btn,
	.home-hero__actions .btn--primary {
		width: 100%;
		min-height: 44px;
		padding: 13.69px 25.78px;
		font-size: 16.1px;
		line-height: 1;
		border-radius: var(--accessite-radius-pill);
		justify-content: center;
		text-align: center;
	}
}

/* --- CLIENTS STRIP mobile : overtitle simple en haut, logos masqués
 * (ou placeholder discret) — l'overtitle apparaît au-dessus du carrousel. */

/* --- CHIFFRES mobile : titre 34.4px + 5 stats en colonne (border-top
 * gris transparent), valeur 30.6px avec highlight teal-light en bas du chiffre. */

/* --- LEVIERS (tabs) mobile : titre 34.4px, 1 card visible large + pills
 * scrollables horizontalement sous l'image. */
@media (max-width: 700px) {
	.section--home-leviers { padding: 25px 0; }
	.section--home-leviers .section__inner { padding: 0 20px; }
	.section--home-leviers .accessite-section-title {
		line-height: 35px;
	}
	/* Pills nav : scroll horizontal au lieu de wrap */
}

/* --- PROFILS (votre profil, notre réponse) mobile : 5 cards en colonne,
 * icône 46x46 navy, titre 19.5px, séparateurs entre lignes. */

/* --- COUVERTURE nationale mobile : 3 puces colorées + image. */
@media (max-width: 700px) {
	.couverture-figma__head { padding: 0 20px; gap: 24px; }
	.couverture-figma__title:not(#_){ line-height: 35px; }
	.couverture-figma__legend {
		padding: 0 20px;
		gap: 0;
	}
	.couverture-figma__map { min-height: 284px; }
}

/* --- CARRIÈRES / Nos valeurs mobile : 5 pills en mosaïque
 * (2 + 2 + 1 décalés), fond blanc, shadow douce. */
@media (max-width: 700px) {
	.section--home-carrieres { padding: 56px 0; }
	.carrieres__inner:not(#_) {
		grid-template-columns: 1fr;
		padding: 0 20px;
		gap: 32px;
	}
	.carrieres__title:not(#_){ line-height: 35px; }
	.carrieres__paragraph { font-size: 18.3px; line-height: 28.37px; color: var(--accessite-gray-700); }
	.carrieres__values:not(#_) {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		row-gap: 16px;
		margin-top: 24px;
	}
	.carrieres-card:not(#_) {
		flex: 0 0 auto;
		width: auto;
		min-height: 60.41px;
		padding: 17.21px 25.78px;
		background: var(--wp--preset--color--white, #fff);
		border: 0;
		border-radius: 14px;
		box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 6%, transparent);
	}
	.carrieres-card__title:not(#_){ font-size: 16.1px; line-height: 24.97px; font-weight: 700; }
	.carrieres__right { min-height: 268px; }
}

/* ==========================================================================
 * PAGES PROFIL — section « Accessite en quelques chiffres » (MOBILE uniquement)
 * --------------------------------------------------------------------------
 * Section partagée (.section--home-chiffres). On corrige UNIQUEMENT sur les
 * pages profil en mobile (body.page-template-page-profil + ≤700px) → desktop et
 * autres pages (Accueil, Vos besoins) STRICTEMENT inchangés.
 *
 * D'après la maquette mobile profil (node 610:8390) :
 *  1. Titre aligné à gauche, sans indentation de 2e ligne.
 *  2. Formes décoratives (déjà dans le markup, réutilisées) recalées en
 *     haut-droite au format mobile (~88px vs 160px desktop) → autour du haut du
 *     titre, derrière le texte (z-index:0, opacité 0.3) donc sans gêner la
 *     lecture. En mobile elles gardaient la position/taille desktop → mal calées.
 *  3. Espace avant « Études de cas » réduit : le séparateur ::after avait
 *     margin-top:80px (→ 32px) + padding-bas de section réduit (56 → 40).
 * ========================================================================== */

/* ============================================================
 * Accueil : « Accessite en quelques chiffres », mise en page bento.
 * Blocs natifs : section > titre + grille de 5 cartes (groupe : chiffre + libellé).
 * Couleurs = réglages de couleur des blocs (palette, modifiables dans l'éditeur / Styles).
 * Desktop : 3 colonnes, 1re carte sur 2 colonnes. Mobile : 1 colonne.
 * ============================================================ */
.section--chiffres-bento {
	padding: 120px 0;
}
.chiffres-bento__inner {
	max-width: var(--accessite-container-max);
	margin: 0 auto;
	padding: 0 var(--accessite-container-pad);
}
.chiffres-bento__title {
	margin: 0 0 56px;
}
.chiffres-bento__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.chiffres-bento__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	min-height: 340px;
	padding: 48px 44px 52px;
	border-radius: 28px;
}
.chiffres-bento__card--wide {
	grid-column: span 2;
}
.chiffres-bento__number {
	margin: 0;
	font-family: var(--accessite-font-family);
	font-weight: var(--accessite-font-weight-bold);
	font-size: 76px;
	line-height: 0.95;
	letter-spacing: -0.04em;
}
.chiffres-bento__card--wide .chiffres-bento__number {
	font-size: 150px;
	line-height: 0.9;
	letter-spacing: -0.05em;
}
.chiffres-bento__label {
	margin: 0;
	font-size: 20px;
	line-height: 1.6;
	opacity: 0.82;
}
.chiffres-bento__card--wide .chiffres-bento__label {
	opacity: 1;
}

@media (max-width: 1100px) {
	.section--chiffres-bento { padding: 88px 0; }
	.chiffres-bento__card { min-height: 280px; padding: 36px 32px 40px; }
	.chiffres-bento__number { font-size: 56px; }
	.chiffres-bento__card--wide .chiffres-bento__number { font-size: 110px; }
	.chiffres-bento__label { font-size: 17px; }
}
@media (max-width: 700px) {
	.section--chiffres-bento { padding: 56px 0; }
	.chiffres-bento__inner { padding: 0 20px; }
	.chiffres-bento__title { margin-bottom: 32px; }
	.chiffres-bento__grid { grid-template-columns: 1fr; gap: 12px; }
	.chiffres-bento__card--wide { grid-column: auto; }
	.chiffres-bento__card { min-height: 0; gap: 40px; padding: 28px 24px 30px; border-radius: 22px; }
	.chiffres-bento__number { font-size: 52px; }
	.chiffres-bento__card--wide .chiffres-bento__number { font-size: 80px; }
	.chiffres-bento__label { font-size: 16px; }
}
/* Titre de la section bento : taille adaptée, pas de coupure au milieu des mots. */
.accessite-section-title.chiffres-bento__title { overflow-wrap: normal; word-break: normal; hyphens: none; }
@media (max-width: 1100px) {
	.accessite-section-title.chiffres-bento__title { font-size: 52px; line-height: 1.05; }
}
@media (max-width: 700px) {
	.accessite-section-title.chiffres-bento__title { font-size: 36px; line-height: 1.08; }
}

/* ============================================================
 * Accueil : « Cinq leviers », accordéon en blocs natifs.
 * Section > en-tête + groupe .leviers-accordeon > 5 blocs Couverture (image de fond + voile,
 * modifiables dans l'éditeur) > bloc Détails (ouverture native, sans JS) > titre, textes, bouton.
 * ============================================================ */
.leviers-accordeon {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 56px;
}
.wp-block-cover.leviers-accordeon__item:not(#_) {
	min-height: 0;
	padding: 0;
	border-radius: 24px;
	overflow: hidden;
	align-items: stretch;
}
.leviers-accordeon__item .wp-block-cover__inner-container {
	width: 100%;
	max-width: none;
	color: var(--wp--preset--color--white, #fff);
}
.leviers-accordeon__details > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 30px 36px;
	font-size: 26px;
	font-weight: var(--accessite-font-weight-bold);
	line-height: 1.2;
	color: var(--wp--preset--color--white, #fff);
}
.leviers-accordeon__details > summary::-webkit-details-marker { display: none; }
.leviers-accordeon__details > summary::after {
	content: "+";
	flex: 0 0 42px;
	height: 42px;
	margin-left: auto;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--white, #fff);
	color: var(--accessite-navy);
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	transition: transform .2s ease;
}
.leviers-accordeon__details[open] > summary::after { transform: rotate(45deg); }
.leviers-accordeon__details > summary:focus-visible { outline: 2px solid var(--accessite-teal); outline-offset: -4px; }
.leviers-accordeon__num {
	color: var(--accessite-teal);
	font-size: 16px;
	letter-spacing: .08em;
}
/* Contenu ouvert : colonne de texte lisible sur l'image. */
.leviers-accordeon__details > :not(summary) {
	max-width: 760px;
	margin-left: 36px;
	margin-right: 36px;
}
.leviers-accordeon__details > :last-child { margin-bottom: 40px; }
.leviers-accordeon__title {
	margin-top: 8px;
	margin-bottom: 16px;
	font-size: 34px;
	line-height: 1.1;
	text-transform: none;
	color: var(--wp--preset--color--white, #fff);
}
.leviers-accordeon__details p {
	margin-bottom: 12px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--white, #fff);
}
.leviers-accordeon__buttons { margin-top: 24px; }

@media (max-width: 700px) {
	.leviers-accordeon { margin-top: 32px; gap: 10px; }
	.wp-block-cover.leviers-accordeon__item { border-radius: 18px; }
	.leviers-accordeon__details > summary { padding: 20px 20px; font-size: 20px; gap: 14px; }
	.leviers-accordeon__details > summary::after { flex-basis: 34px; height: 34px; font-size: 22px; }
	.leviers-accordeon__details > :not(summary) { margin-left: 20px; margin-right: 20px; }
	.leviers-accordeon__details > :last-child { margin-bottom: 28px; }
	.leviers-accordeon__title { font-size: 24px; }
	.leviers-accordeon__details p { font-size: 15px; }
}

/* ============================================================
 * Nos métiers : ADN (4 cartes) + sommaire et fiches métiers (blocs natifs).
 * Hero = celui de Notre approche, chiffres = bento de l'accueil, CTA = CTA diagnostic.
 * Gouttières et rythme vertical : voir mise-en-page.css.
 * ============================================================ */

/* En-tête de section : titre à gauche, chapô à droite. */
.metiers__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	flex-wrap: wrap;
}
.metiers__head > .wp-block-group { display: flex; flex-direction: column; gap: 16px; }
.metiers__lead {
	margin: 0;
	max-width: 440px;
	font-size: 18px;
	line-height: 1.6;
	text-align: right;
}

/* ADN : 4 cartes. */
.metiers-adn__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 48px;
}
.metiers-adn__card {
	border-radius: 24px;
	padding: 32px 28px;
}
.metiers-adn__card > * { margin: 0; }
.metiers-adn__dot:not(#_) {
	padding: 0;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	min-height: 44px;
	border-radius: 50%;
	margin: 0 0 26px;
}
.metiers-adn__card h3 {
	margin: 0 0 12px;
	font-size: 22px;
	line-height: 1.15;
	text-transform: none;
}
.metiers-adn__card p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--gray-700, #6E6B69);
}

/* Métiers : sommaire (boutons d'ancre) + 9 fiches (Groupe > Colonnes, détail complet dans un bloc Détails). */
.metiers-sommaire:not(#_) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 36px; }
.metiers-sommaire .wp-block-button__link:not(#_) {
	min-height: 0;
	padding: 8px 16px;
	border: 2px solid var(--wp--preset--color--navy, #1A2A4B);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--navy, #1A2A4B);
	font-size: 13px;
	font-weight: var(--accessite-font-weight-bold);
	line-height: 1.3;
	text-decoration: none;
}
.metiers-sommaire .wp-block-button__link:hover,
.metiers-sommaire .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--navy, #1A2A4B);
	color: var(--wp--preset--color--white, #fff);
}
.metiers-fiches { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
.metiers-fiches > *:not(#_) { margin: 0; }
.metiers-fiche { border-radius: 24px; padding: 36px 40px; scroll-margin-top: 120px; }
.metiers-fiche > .wp-block-columns { gap: 48px; margin: 0; }
.metiers-fiche .wp-block-column > * { margin-top: 0; }
.metiers-fiche__num {
	margin: 0 0 16px;
	font-size: 64px;
	font-weight: var(--accessite-font-weight-bold);
	letter-spacing: -.04em;
	line-height: 1;
}
.metiers-fiche h3 { margin: 0 0 14px; font-size: 30px; line-height: 1.1; text-transform: none; }
.metiers-fiche__key:not(#_){
	display: inline-block;
	margin: 0;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: var(--accessite-font-weight-bold);
	background: color-mix(in srgb, var(--wp--preset--color--teal, #38B6AB) 25%, transparent);
}
.metiers-fiche__accroche { margin: 0; font-size: 17px; line-height: 1.6; }
.metiers-fiche ul {
	margin: 12px 0 0;
	padding-left: 18px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--gray-700, #6E6B69);
}
.metiers-fiche__detail { margin-top: 16px; }
.metiers-fiche__detail > summary {
	display: inline-block;
	cursor: pointer;
	list-style: none;
	font-size: 14px;
	font-weight: var(--accessite-font-weight-bold);
	border-bottom: 2px solid var(--wp--preset--color--teal, #38B6AB);
}
.metiers-fiche__detail > summary::-webkit-details-marker { display: none; }
.metiers-fiche__detail > summary::after { content: " +"; }
.metiers-fiche__detail[open] > summary::after { content: " ×"; }
.metiers-fiche__detail > :not(summary) { font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--gray-700, #6E6B69); }
.metiers-fiche__detail > p { margin: 0 0 8px; }
.metiers-fiche__detail > p:first-of-type { margin-top: 14px; }
.metiers-fiche__detail h4 {
	margin: 18px 0 6px;
	font-size: 16px;
	line-height: 1.3;
	text-transform: none;
	color: var(--wp--preset--color--navy, #1A2A4B);
}

@media (max-width: 1100px) {
	.metiers-adn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.metiers-fiche > .wp-block-columns { gap: 16px; }
}
@media (max-width: 700px) {
	.metiers__lead { text-align: left; font-size: 16px; }
	.metiers-adn__grid { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
	.metiers-sommaire:not(#_) { display: none; }
	.metiers-fiches { margin-top: 28px; gap: 12px; }
	.metiers-fiche { padding: 24px 22px; border-radius: 18px; }
	.metiers-fiche__num { font-size: 44px; margin-bottom: 12px; }
	.metiers-fiche h3 { font-size: 23px; }
}

/* Numéro d'accordéon : ne se coupe jamais. */
.leviers-accordeon__num { flex: 0 0 auto; white-space: nowrap; }

/* ==========================================================================
 * SINGLE ÉTUDE — chiffres clés : trait sous le DERNIER chiffre (MOBILE ≤700px)
 * --------------------------------------------------------------------------
 * Demande client : en mobile, le trait sous le dernier chiffre paraît en 100%.
 * À réduire pour qu'il soit cohérent avec les autres traits + centré, selon la
 * maquette mobile (toutes les « Line 1 » : largeur 329 / 375, centrées, inset).
 *
 * Contexte technique : en ≤700px, la rangée de chiffres passe en COLONNE et le
 * conteneur `.etude-detail-stats` a un `padding: 0 20px` ; les traits entre les
 * chiffres sont des `border-top` portés par les items → naturellement inset de
 * 20px et centrés. Le trait du BAS (border-top de `.etude-detail-defi` côté
 * desktop) ne convient pas en mobile : `.etude-detail-defi` y est forcé en
 * `position: static` (reset mobile), donc le ::before 80vw du fix desktop est
 * mal ancré → on le neutralise, et on dessine le trait du bas comme un
 * `border-bottom` du dernier item, avec le MÊME inset (20px) et la MÊME couleur
 * que les traits inter-chiffres. Résultat : un seul trait propre, centré, à la
 * même largeur que les autres. Desktop strictement inchangé (tout est en ≤700px).
 * ========================================================================== */

/* ==========================================================================
 * SINGLE ÉTUDE — trait SOUS « Le défi » (= border-top de « L'intervention »)
 * --------------------------------------------------------------------------
 * Demande client : réduire ce trait (encore en pleine largeur) sur les 3 pages
 * de cas — qui partagent toutes ce template. Même traitement que le trait du
 * dessus (chiffres → défi) : 80vw centré en desktop, inset 20px centré en
 * mobile, pour rester cohérent.
 *
 * La section « L'intervention » porte maintenant la classe `.etude-detail-interv`
 * (ajoutée au markup, comme `.etude-detail-defi` / `.etude-detail-demo`). On
 * retire son `border-top` inline pleine largeur et on le redessine en ::before
 * centré, ancré via position:relative.
 *
 * Mobile : le reset (`.etude-detail section { position:static !important }`)
 * forcerait static → on ré-affirme position:relative avec une spécificité
 * supérieure (`.etude-detail section.etude-detail-interv`), et on passe la
 * largeur du trait en `calc(100% - 40px)` (inset 20px, identique au trait des
 * chiffres en mobile). Ne touche que cette section ; demo/intervention bottom
 * et autres traits inchangés.
 * ========================================================================== */

/* ==========================================================================
 * Bandeau logos « Ils nous ont fait confiance »
 * ========================================================================== */
/*
 * Accessite Child — Page Vos besoins.
 * Calé 1:1 sur l'export Figma (refonte mai 2026).
 *
 * Réutilise les styles communs de accueil.css pour : etudes-grid,
 * chiffres-grid, cta-diagnostic, contact-block.
 */

/* ============================================================
 * Hero Vos besoins — split texte gauche / 2 images droite
 * ============================================================ */

/* Séparateurs entre sections — sheet modifs L127/L129/L130/L133/L136 :
 * Les traits étaient appliqués via border-top sur la section SUIVANTE,
 * ce qui créait notamment un trait au-dessus de la liste des enjeux.
 * On les retire ; les sections concernées posent désormais leur propre
 * trait BAS via ::after cadré au container (plus discret = "réduit"). */
/* Trait BAS du hero retiré (demande utilisateur : il était collé à l'image).
 * Les sections enjeux/approche gardent le leur. */

/* ============================================================
 * Section Vos enjeux — 6 cards en grid 3×2 avec séparateurs
 * ============================================================ */
/* Décor : motif partagé accessite_decor('trio') — paysage 433×251, haut droite. */

/* ============================================================
 * Section Notre approche intégrée — header + 2 cols × 3 axes
 * ============================================================ */
/* Décor : motif partagé accessite_decor('trio') — paysage 433×251, centré haut. */

/* ============================================================
 * Slider de logos (galerie clients) — au-dessus des études de cas
 * Carrousel CSS auto-défilant : la piste contient 2 jeux de logos,
 * l'animation translate de -50% pour une boucle continue.
 * ============================================================ */
.section--besoins-logos {
	/* Demande client : trop d'espace SOUS le carrousel avant « Études de cas »
	 * (la section études n'a pas de padding-top → tout le vide vient d'ici).
	 * On réduit le padding-bas (64 → 24) en gardant le haut + le trait + une
	 * respiration. Classe exclusive aux carrousels de Vos besoins / Nos références. */
	padding: 64px 0 24px;
	background: var(--accessite-beige);
	position: relative;
}
/* Trait de séparation cadré container (pas pleine largeur écran) sous le slider. */
.besoins-logos__surtitre {
	color: color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 65%, transparent);
	margin: 0 0 32px;
}
.logos-slider {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-slider__track {
	display: flex;
	align-items: center;
	gap: 72px;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: accessite-logos-scroll 30s linear infinite;
}
.logos-slider:hover .logos-slider__track,
.logos-slider:focus-within .logos-slider__track {
	animation-play-state: paused;
}
.logos-slider__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
}
.logos-slider__item img {
	height: 100%;
	width: auto;
	max-height: 56px;
	object-fit: contain;
	display: block;
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.logos-slider__item:hover img {
	filter: grayscale(0);
	opacity: 1;
}
@keyframes accessite-logos-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.logos-slider__track { animation: none; flex-wrap: wrap; justify-content: center; gap: 40px; }
}
@media (max-width: 900px) {
	.section--besoins-logos { padding: 48px 0 20px; } /* idem mobile : bas réduit */
	.logos-slider__track { gap: 48px; }
}

/* ============================================================
 * MOBILE — alignement maquette Figma page "Vos besoins / Profils".
 * Audit utilisateur 2026-05-29 : DESKTOP FIGÉ. Règles ≤ 700px uniquement.
 * Les sections profils / études / CTA-diag réutilisent les templates de
 * l'accueil → déjà couvertes par accueil.css. On ne styles ici que le
 * hero "Vos besoins" (spécifique à cette page).
 * ============================================================ */

/* ============================================================
 * MOBILE — sections "Enjeux" + "Approche intégrée" utilisées par les
 * pages Profils (page-profil.php réutilise ces template-parts).
 * DESKTOP FIGÉ — règles ≤ 700px uniquement, alignement maquette mobile.
 * ============================================================ */

/* --- Section "Vos enjeux / Ce qui vous empêche de dormir tranquille" :
 * header + 6 cards en colonne avec border-top entre chaque, titre 17.1px
 * navy bold + texte 16.1px gris. --- */

/* --- Section "Notre approche intégrée / Un seul opérateur, tous les
 * leviers" : header + 6 axes en colonne avec border-top entre chaque,
 * titre 17.1px navy + texte 16.1px gris. --- */

/* ==========================================================================
 * Notre approche (hero partagé avec Nos métiers, méthode, équipe)
 * ========================================================================== */
/*
 * Accessite Child — Page Notre approche.
 * Calé pixel-près sur l'export Figma 1440px (refonte 2026).
 */

/* ============================================================
 * Hero Notre approche — split texte gauche / 2 images droite
 * ============================================================ */
.section--approche-hero {
	background: var(--accessite-beige);
	padding: 0;
	overflow: hidden;
	/* Sheet modifs L31 : image juste sous le trait du menu — marge haut MINIMALE. */
	min-height: 520px;
	position: relative;
}
.approche-hero__inner {
	max-width: var(--accessite-container-max);
	margin: 0 auto;
	/* Padding hero standardisé (top 25 = juste sous le trait du menu, audit utilisateur). */
	padding: 25px var(--accessite-container-pad) 96px 156px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 540px;
	gap: 64px;
	align-items: center;
	min-height: 520px;
}
.approche-hero__content {
	display: flex; flex-direction: column;
	gap: 40px;
}
.approche-hero__title {
	font-size: 72px;
	line-height: 72px;
	letter-spacing: -0.01em;
	font-weight: var(--accessite-font-weight-medium);
	color: var(--accessite-navy);
	margin: 0;
	text-transform: uppercase;
	max-width: 856px;
}
.approche-hero__title strong {
	font-weight: var(--accessite-font-weight-bold);
	color: var(--accessite-navy);
}
.approche-hero__title strong.is-teal { color: var(--accessite-color-primary); }
.approche-hero__paragraph {
	font-size: 16px;
	line-height: 23px;
	color: var(--accessite-navy);
	font-weight: var(--accessite-font-weight-medium);
	margin: 0;
	max-width: 541px;
}
.approche-hero__actions {
	display: flex; gap: 16px; flex-wrap: wrap;
}
.approche-hero__media {
	position: relative;
	width: 100%;
	height: 631px;
}
.approche-hero__media-a {
	position: absolute;
	top: 89px; left: 0;
	width: 147px; height: 453px;
	background: var(--accessite-color-primary);
	overflow: hidden;
}
.approche-hero__media-a img {
	width: 100%; height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
	opacity: 0.6;
}
.approche-hero__media-b {
	position: absolute;
	top: 0; right: 0;
	width: 323px; height: 631px;
	background: #D9D9D9;
	overflow: hidden;
}
.approche-hero__media-b img {
	width: 100%; height: 100%;
	object-fit: cover;
}
@media (max-width: 1100px) {
	.approche-hero__inner {
		grid-template-columns: 1fr;
		padding: 96px var(--accessite-container-pad);
	}
	.approche-hero__media { height: 400px; }
	.approche-hero__title { font-size: 48px; line-height: 1.05; }
}

/* Séparateurs horizontaux entre sections (80vw centré).
 * Note 1 : pas de trait sous .section--approche-equipe (dernière section avant
 * CTA/contact, audit utilisateur).
 * Note 2 : pas de trait sous .section--approche-methode (audit utilisateur
 * 2026-05-29) — le bloc citation à outline navy en fin de section sert déjà
 * de fermeture visuelle, le trait faisait double-emploi. */

/* ============================================================
 * RÈGLE GLOBALE PAGE NOTRE APPROCHE (audit utilisateur 2026-05-29) :
 * TOUS les traits horizontaux de la page doivent faire 80vw centré
 * (identique à --accessite-separator-width). On override les border-top
 * internes des composants (cadences, valeurs, méthode-figma) en les
 * remplaçant par des pseudo-éléments 80vw — les borders sont rattachées
 * à la largeur du conteneur (1440 max), ce qui crée des incohérences
 * visuelles avec les séparateurs de section.
 * ============================================================ */
/* Trait au-dessus de la grille des cadences */
/* Traits internes au tableau Méthode ACCESS (6 rangs A/C/C/E/S/S) :
 * override des border-top inline + pseudo-element 80vw centré sur viewport. */
.approche-methode-figma .methode-figma__row:not(#_) {
	border-top: 0;
	position: relative;
}

/* ============================================================
 * Section Méthode ACCESS — page Notre approche
 * ============================================================ */
.section--approche-methode {
	padding: 120px 0;
	background: var(--accessite-beige);
}
.approche-methode__sub {
	font-size: 16px;
	line-height: 23px;
	color: var(--accessite-navy);
	font-weight: var(--accessite-font-weight-medium);
	max-width: 331px;
	text-align: right;
	margin: 0;
	align-self: end;
}

/* Corps "Méthode ACCESS" : reproduction fidèle de l'export Figma, stylé en
 * INLINE dans template-parts/notre-approche/methode.php. Les règles ci-dessous
 * ne sont que des garde-fous responsive (overrides !important sur les largeurs
 * fixes), strictement nécessaires pour éviter le débordement horizontal sous
 * 1440px. Le rendu desktop ≥ 1440px reste identique au pixel près. */
@media (max-width: 1440px) {
	.approche-methode-figma > :first-child:not(#_) { width: 100%; max-width: 1355px; }
}
@media (max-width: 900px) {
	.approche-methode-figma:not(#_) { padding: 24px; }
	.approche-methode-figma .methode-figma__row:not(#_) { flex-wrap: wrap; }
	.approche-methode-figma .methode-figma__row > :last-child:not(#_) { flex-wrap: wrap; }
	.approche-methode-figma .methode-figma__word:not(#_) { width: auto; }
}

/* ============================================================
 * Section Cadre de pilotage — 5 cadences en ligne
 * ============================================================ */
/* 5 cadences en LIGNE sur desktop (audit utilisateur 2026-05-29) — séparées
 * par des bordures verticales. Bascule en colonne sous 900px.
 * Le trait au-dessus est tracé par .approche-cadences::before (80vw
 * centré, cohérent avec les séparateurs de section). Pas de border-bottom :
 * le séparateur de section .section--approche-pilotage::after ferme la zone. */
/* Sous 900px (tablette/mobile) : on repasse en colonne pour préserver la
 * lisibilité — bordures verticales → bordures horizontales. */

/* ============================================================
 * Section Valeurs — 3 cards avec icônes
 * ============================================================ */
/* Traits au-dessus/au-dessous = .section--approche-valeurs::before /::after
 * (80vw centré sur viewport). Plus de border-top/bottom sur le UL : la grille
 * était bornée au container 1440 max et créait des traits plus courts que les
 * séparateurs de section voisins. */

/* ============================================================
 * Section Équipe — direction (5 portraits)
 * ============================================================ */
.section--approche-equipe {
	padding: 80px 0 120px;
	background: var(--accessite-beige);
}
.approche-equipe__header {
	margin-bottom: 80px;
}
.approche-equipe__intro {
	position: relative;
	width: 554px;
	min-height: 103px;
	display: flex; align-items: center;
	justify-content: flex-end;
	margin-left: auto;
}
.approche-equipe__deco {
	position: absolute;
	top: -16px; right: 0;
	display: flex;
	opacity: 0.3;
	z-index: 0;
}
.approche-equipe__deco svg {
	display: block;
	width: 103px;
	height: 103px;
}
.approche-equipe__paragraph {
	position: relative;
	z-index: 1;
	font-size: 16px;
	line-height: 23px;
	color: var(--accessite-navy);
	font-weight: var(--accessite-font-weight-medium);
	max-width: 331px;
	text-align: right;
	margin: 0;
}
.equipe-grid {
	list-style: none; margin: 0 auto; padding: 0;
	display: grid;
	/* Le nombre de colonnes suit le nombre de membres saisis dans le Customizer :
	 * --equipe-count est posé en inline par template-parts/notre-approche/equipe.php.
	 * Contrainte maquette (Sheet modifs L37) : l'équipe doit tenir sur UNE seule
	 * ligne horizontale sur écran type MacBook — d'où une colonne par membre
	 * plutôt qu'un auto-fit qui provoquerait un retour à la ligne.
	 * Repli à 6 si la variable est absente (ancien markup en cache). */
	grid-template-columns: repeat(var(--equipe-count, 6), 1fr);
	gap: 32px;
	max-width: var(--accessite-container-max);
}
.equipe-card {
	display: flex; flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
.equipe-card__photo {
	width: 99px; height: 99px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--accessite-gray);
	border: 1px solid var(--accessite-color-primary);
	flex-shrink: 0;
}
.equipe-card__photo img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.equipe-card__name {
	font-size: 16px;
	color: var(--accessite-navy);
	font-weight: var(--accessite-font-weight-bold);
	line-height: 23px;
	margin: 0;
	text-transform: none;
}
.equipe-card__role {
	font-size: 12px;
	color: var(--accessite-color-primary);
	font-weight: var(--accessite-font-weight-semibold);
	line-height: 1.4;
	display: block;
	max-width: 180px;
}
/* Lien LinkedIn — affiché sous le nom/role si une URL est saisie via Customizer.
 * Taille SVG : 16px (audit utilisateur 2026-05-29) → plus discret et cohérent
 * avec le role 12px qui le surplombe. */
.equipe-card__linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: var(--accessite-navy);
	margin-top: 4px;
	transition: color 0.2s ease, transform 0.2s ease;
}
.equipe-card__linkedin:hover {
	color: var(--accessite-color-primary);
	transform: translateY(-1px);
}
.equipe-card__linkedin svg {
	display: block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}
/* Resserre gap + photos sous 1100px pour CONSERVER les 6 colonnes sur les
 * MacBooks (1280/1440 logiques, parfois 1100-1200 en fenêtré). Avant, la grille
 * tombait à 3 colonnes × 2 lignes dès 1100px — pas désiré sur laptop. */
@media (max-width: 1300px) {
	.equipe-grid { gap: 24px; }
}
@media (max-width: 1100px) {
	.equipe-grid { gap: 16px; }
	.equipe-card__photo { width: 84px; height: 84px; }
	.equipe-card__name { font-size: 14px; line-height: 19px; }
	.equipe-card__role { font-size: 11px; line-height: 1.4; max-width: 100%; }
}
@media (max-width: 900px) {
	/* En dessous de 900px (tablette), bascule à 3 colonnes × 2 lignes — on
	 * retrouve les tailles "desktop" car chaque card a alors plus d'espace. */
	.equipe-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
	.equipe-card__photo { width: 99px; height: 99px; }
	.equipe-card__name { font-size: 16px; line-height: 23px; }
	.equipe-card__role { font-size: 12px; max-width: 180px; }
}
@media (max-width: 700px) {
	.equipe-grid { grid-template-columns: repeat(2, 1fr); }
	.approche-equipe__intro { width: 100%; }
	.approche-equipe__paragraph { max-width: 100%; text-align: left; }
}

/* ============================================================
 * RESPONSIVE — passe complémentaire (audit utilisateur)
 * Aligne les sub-paragraphes droits sur left/100% quand le header
 * passe en colonne (≤900px), serre les paddings et tailles sous 700px.
 * ============================================================ */
@media (max-width: 900px) {
	/* Sub-paragraphes calés à droite (max-width 331) : une fois le header
	   .section__header--split passé en 1 colonne, l'alignement droit devient
	   illisible — bascule en left + pleine largeur. */
	.approche-methode__sub,
.approche-equipe__paragraph {
		text-align: left;
		max-width: 100%;
		align-self: start;
	}
	/* Méthode : libellés un peu plus compacts dans le bloc Figma wrapé. */
	.approche-methode-figma .methode-figma__word:not(#_){
		font-size: 20px;
		line-height: 1.2;
	}
	.approche-methode-figma .methode-figma__row > :first-child:not(#_) {
		font-size: 48px;
		width: 40px;
	}
}

@media (max-width: 700px) {
	/* Hero : titre + padding plus compacts. */
	.approche-hero__inner { padding: 64px 20px; gap: 32px; }
	.approche-hero__title { font-size: 36px; line-height: 1.05; }
	.approche-hero__media { height: 280px; }
	.approche-hero__media-a { width: 100px; height: 200px; top: 40px; }
	.approche-hero__media-b { width: 210px; height: 280px; }

	/* Méthode : padding global + letter + tailles internes. */
	.approche-methode-figma:not(#_) { padding: 24px 16px; gap: 24px; }
	.approche-methode-figma .methode-figma__row:not(#_) {
		padding: 16px 0;
		gap: 12px;
	}
	.approche-methode-figma .methode-figma__row > :first-child:not(#_) {
		font-size: 40px;
		width: 36px;
	}
	.approche-methode-figma .methode-figma__row > :last-child:not(#_) { flex-direction: column; align-items: flex-start; gap: 4px; }
	.approche-methode-figma .methode-figma__word:not(#_){ font-size: 16px; }
	.approche-methode-figma .methode-figma__row p:not(#_),
	.approche-methode-figma .methode-figma__row > :last-child > :last-child:not(#_){
		font-size: 14px;
		line-height: 1.4;
	}

	/* Cadre de pilotage : titres + paddings serrés. */

	/* Valeurs : padding réduit. */

	/* Équipe : header allégé. */
	.section--approche-equipe { padding: 56px 0 80px; }
	.approche-equipe__header { margin-bottom: 40px; }
}

/* ============================================================
 * MOBILE — alignement maquette Figma "Notre approche" (page mobile).
 * Audit utilisateur 2026-05-29 : DESKTOP FIGÉ. Toutes les règles vivent
 * dans des media queries et n'impactent que les écrans ≤ 700px.
 * Override des règles précédentes pour matcher au pixel le rendu maquette
 * (largeur cible 375px).
 * ============================================================ */

/* --- HERO Notre approche mobile : surtitre + titre 42.8px + paragraphe
 * + CTA pill teal pleine largeur, images côte à côte en bas. --- */
@media (max-width: 700px) {
	.section--approche-hero {
		min-height: 0;
		padding: 56px 0;
		background: var(--accessite-beige);
	}
	.approche-hero__inner {
		padding: 0 20px;
		grid-template-columns: 1fr;
		gap: 50px;
		min-height: 0;
	}
	.approche-hero__content { gap: 18.9px; }
	.approche-hero__title:not(#_){
		font-size: 34px;
		line-height: 1.05;
		font-weight: 400;
		letter-spacing: 0;
	}
	.approche-hero__title strong,
	.approche-hero__title strong.is-teal { font-weight: 700; }
	.approche-hero__paragraph {
		font-size: 18.3px;
		line-height: 28.37px;
		color: var(--accessite-gray-700);
		max-width: 100%;
	}
	.approche-hero__actions { width: 100%; flex-direction: column; gap: 12px; }
	.approche-hero__actions .btn,
	.approche-hero__actions .btn--primary {
		width: 100%;
		min-height: 44px;
		padding: 13.69px 25.78px;
		font-size: 16.1px;
		line-height: 1;
		border-radius: var(--accessite-radius-pill);
		justify-content: center;
		text-align: center;
	}
	/* Images : empilées sous le contenu, hauteurs maquette. */
	/* Audit 2026-06-03 : les 2 images du hero TOUJOURS sur une seule ligne (row),
	 * côte à côte. Accent (petite) fixe à gauche, image principale flexible à
	 * droite (flex 1 1 0 / max-width) pour ne jamais déborder, même sur 320px. */
	.approche-hero__media {
		position: static;
		width: 100%;
		max-width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 12px;
	}
	.approche-hero__media-a {
		position: static;
		flex: 0 0 auto;
		width: 98.5px;
		height: 172.3px;
		top: auto;
		left: auto;
	}
	.approche-hero__media-b {
		position: static;
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		max-width: 216.4px;
		height: 240px;
		top: auto;
		right: auto;
	}
	/* Espace entre les images du hero et le trait de séparation (audit
	 * utilisateur 2026-06-03 : sur mobile le trait était collé à l'image). */
}

/* --- MÉTHODE ACCESS mobile : titre 34.4px (pas 42.8px du hero),
 * 6 lignes A/C/C/E/S/S avec lettre teal 41.6px alignée baseline
 * avec le mot navy 19.5px uppercase. Description 15.8-16.1px. --- */
@media (max-width: 700px) {
	.section--approche-methode {
		padding: 56px 0;
	}
	.section--approche-methode .section__inner { padding: 0 20px; }
	.section--approche-methode .section__header:not(#_),
.section--approche-methode .section__header--split:not(#_) {
		grid-template-columns: 1fr;
		flex-direction: column;
		gap: 19px;
		padding: 0;
	}
	.section--approche-methode .accessite-section-overtitle {
		line-height: 18.82px;
		letter-spacing: 1.7px;
	}
	.section--approche-methode .accessite-section-title:not(#_){
		line-height: 1.1;
		font-weight: 400;
	}
	.section--approche-methode .accessite-section-title strong,
	.section--approche-methode .accessite-section-title strong.is-teal { font-weight: 700; }
	.approche-methode__sub {
		font-size: 18.3px;
		line-height: 28.37px;
		color: var(--accessite-gray-700);
		text-align: left;
		max-width: 100%;
		align-self: start;
		font-weight: 500;
	}
	/* Les 6 lignes (.methode-figma__row) sont stylées en inline dans le PHP
	 * — on override avec !important pour repasser en layout natif mobile. */
	.approche-methode-figma:not(#_) {
		padding: 32px 20px 0;
		gap: 0;
	}
	.approche-methode-figma > :first-child:not(#_) {
		width: 100%;
		max-width: 100%;
	}
	.approche-methode-figma .methode-figma__row:not(#_) {
		padding: 24px 0;
		gap: 6px;
		/* border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 14%, transparent) !important; */
		/* Audit 2026-06-03 : chaque élément ACCESS sur UNE ligne — la lettre teal
		 * collée à la suite du mot (ex. « A »+« NALYSER »), description en dessous.
		 * (était flex-direction:column, qui isolait la lettre sur sa propre ligne). */
		flex-direction: row;
		align-items: baseline;
		display: flex;
		position: relative;
		z-index: 1;
	}
	/* Ligne 1 (lettre + mot) en baseline */
	.approche-methode-figma .methode-figma__row > :first-child:not(#_) {
		display: inline-flex;
		align-items: baseline;
		gap: 1px;
		width: auto;
		font-size: 41.6px;
		line-height: 33.28px;
		font-weight: 700;
		color: var(--accessite-color-primary);
		text-align: left;
	}
	.approche-methode-figma .methode-figma__row > :last-child:not(#_) {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0;
	}
	.approche-methode-figma .methode-figma__word:not(#_) {
		font-size: 19.5px;
		line-height: 17.53px;
		font-weight: 700;
		color: var(--accessite-navy);
		text-transform: uppercase;
		letter-spacing: 0.39px;
		width: auto;
		flex: 0 0 auto;
	}
	.approche-methode-figma .methode-figma__row > :last-child > :last-child:not(#_) {
		flex: 1 1 100%;
		font-size: 16.1px;
		line-height: 24.97px;
		color: var(--accessite-gray-700);
		font-weight: 500;
		margin-top: 18px;
	}
	/* Citation Méthode (audit 2026-06-03 : pleine largeur + contenu centré). */
	/* Formes géométriques décoratives (présentes en desktop) : sur mobile elles
	 * étaient hors-écran (left:575px inline) — on les repositionne visibles en
	 * haut à droite du bloc, réduites, derrière le texte (z-index:0 < lignes). */
}

/* --- CADRE DE PILOTAGE (Gouvernance) mobile : header + 5 fréquences
 * en colonne avec border-top, titre 17.1px navy bold + desc 15.2px. --- */

/* --- VALEURS (blocs d'expertise) mobile : 3 blocs en colonne avec
 * border-top, icône 42×42 navy, titre 19.3-19.5px navy + desc 16.1px. --- */

/* --- ÉQUIPE (Direction) mobile : 1 colonne (membres empilés),
 * photo ronde 96px outline teal-light, nom 17.1px navy, rôle 14.4px teal,
 * badge LinkedIn carré 30×30 navy avec "in" blanc. --- */
@media (max-width: 700px) {
	.section--approche-equipe { padding: 0 20px 56px; }
	.section--approche-equipe .section__inner { padding: 0; }
	.section--approche-equipe .section__header:not(#_),
.section--approche-equipe .approche-equipe__header:not(#_) {
		grid-template-columns: 1fr;
		flex-direction: column;
		gap: 19.09px;
		margin-bottom: 40px;
		padding-top: 50px;
	}
	.section--approche-equipe .accessite-section-overtitle {
		letter-spacing: 1.7px;
	}
	.section--approche-equipe .accessite-section-title:not(#_){
		line-height: 1.1;
		font-weight: 400;
	}
	.approche-equipe__paragraph {
		font-size: 18.3px;
		line-height: 28.37px;
		color: var(--accessite-gray-700);
		text-align: left;
		max-width: 100%;
		font-weight: 500;
	}
	.approche-equipe__intro {
		position: relative;
		width: 100%;
	}
	.approche-equipe__deco { display: none; }
	/* Grille 1 colonne — chaque membre prend toute la largeur */
	.equipe-grid:not(#_) {
		grid-template-columns: 1fr;
		gap: 32px;
		max-width: 100%;
	}
	.equipe-card { gap: 11.3px; }
	.equipe-card__photo:not(#_) {
		width: 96px;
		height: 96px;
		border-radius: 48px;
		border-width: 2px;
		border-color: var(--accessite-teal-light);
	}
	.equipe-card__name:not(#_){
		font-size: 17.1px;
		line-height: 19.7px;
		color: var(--accessite-navy);
		font-weight: 700;
	}
	.equipe-card__role:not(#_){
		font-size: 14.4px;
		line-height: 18.72px;
		color: var(--accessite-color-primary);
		font-weight: 600;
		max-width: 100%;
	}
	/* Badge LinkedIn : remplace l'icône SVG par un carré navy avec "in" blanc
	 * (calé maquette mobile). On masque le SVG via font-size:0 / svg display:none
	 * et on ajoute "in" via ::before. */
	.equipe-card__linkedin {
		width: 30px;
		height: 30px;
		margin-top: 4px;
		background: var(--accessite-navy);
		border-radius: 6px;
		color: var(--wp--preset--color--white, #fff);
		justify-content: center;
		align-items: center;
		font-family: var(--accessite-font-family);
		font-size: 13.6px;
		font-weight: 700;
		line-height: 21px;
		text-decoration: none;
		position: relative;
	}
	.equipe-card__linkedin svg { display: none; }
	.equipe-card__linkedin::before {
		content: "in";
		color: var(--wp--preset--color--white, #fff);
	}
}

/* ==========================================================================
 * SECTION « L'ÉQUIPE » (Notre approche) — icônes LinkedIn alignées (DESKTOP)
 * --------------------------------------------------------------------------
 * Demande client : aligner toutes les icônes LinkedIn sur la même ligne
 * horizontale. Cause du décalage : l'icône suit le flux normal sous le nom +
 * le rôle (`margin-top: 4px`) ; quand un nom ou un rôle passe sur 2 lignes, son
 * icône descend d'autant → décalage vertical d'un membre à l'autre.
 *
 * Correctif : les cards sont déjà à hauteur égale (grid `align-items: stretch`),
 * il suffit de pousser chaque icône en BAS de sa carte. `margin-top: auto`
 * absorbe l'espace libre au-dessus → toutes les icônes se posent sur la même
 * ligne de base, quelle que soit la hauteur du texte. Aucune photo / nom / rôle
 * / lien n'est déplacé ; seule l'icône s'aligne. Le gap flex de 12px reste le
 * minimum garanti entre le rôle et l'icône.
 *
 * Périmètre strict :
 *  - `min-width: 901px` → DESKTOP uniquement. En ≤900px (tablette 3 col puis
 *    mobile 1 col / badge « in »), ce bloc ne s'applique pas → mobile inchangé.
 *  - Scopé à `.section--approche-equipe` (classes `.equipe-*` déjà propres à
 *    cette seule section) → aucune autre section / page touchée.
 * ========================================================================== */
@media (min-width: 901px) {
	.section--approche-equipe .equipe-card__linkedin {
		margin-top: auto;
	}
}

/* ==========================================================================
 * Nos références
 * ========================================================================== */
/*
 * Accessite Child — Page Nos références.
 * Calé 1:1 sur l'export Figma (refonte mai 2026).
 *
 * Réutilise les styles communs de accueil.css pour : clients-strip,
 * etudes-grid, cta-diagnostic, contact-block.
 */

/* ============================================================
 * Hero Nos références — split texte gauche / 2 images droite
 * ============================================================ */
.section--references-hero {
	background: var(--accessite-beige);
	padding: 0;
	overflow: hidden;
	/* Sheet modifs L43 : réduire la marge en haut du hero (711 → 600). */
	min-height: 600px;
	position: relative;
}
.references-hero__inner {
	max-width: var(--accessite-container-max);
	margin: 0 auto;
	/* Padding hero standardisé (top 25 = juste sous le trait du menu, audit utilisateur). */
	padding: 25px var(--accessite-container-pad) 96px 156px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 540px;
	gap: 64px;
	align-items: center;
	min-height: 600px;
}
.references-hero__content {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.references-hero__title {
	/* Font-size réduite (72 → 60) pour que la ligne "ILS NOUS ONT FAIT CONFIANCE."
	 * tienne sur UNE seule ligne dans la colonne grid (~638px). À 72px elle
	 * faisait ~742px → wrap devant "CONFIANCE." (3 lignes au lieu de 2). */
	font-size: 60px;
	line-height: 64px;
	letter-spacing: -0.01em;
	font-weight: var(--accessite-font-weight-medium);
	color: var(--accessite-navy);
	margin: 0;
	text-transform: uppercase;
	max-width: 856px;
}
.references-hero__title strong {
	font-weight: var(--accessite-font-weight-bold);
	color: var(--accessite-navy);
}
.references-hero__title strong.is-teal {
	color: var(--accessite-color-primary);
}
/* Décalage de la 2e ligne ("CONFIANCE.") — calé maquette Figma refonte 2026.
 * Ligne 3 ("NOS RÉFÉRENCES.") reste alignée à gauche, donc PAS de class is-indent. */
.references-hero__title .is-indent {
	display: inline-block;
	padding-left: 200px;
}
/* Alignement à droite pour "CONFIANCE." (fin de la 1ère ligne du titre). */
.references-hero__title .is-right {
	display: block;
	text-align: right;
}
.references-hero__paragraph {
	font-size: 16px;
	line-height: 23px;
	color: var(--accessite-navy);
	font-weight: var(--accessite-font-weight-medium);
	margin: 0;
	max-width: 541px;
}
.references-hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.references-hero__media {
	position: relative;
	width: 100%;
	height: 631px;
}
.references-hero__media-a {
	position: absolute;
	top: 89px;
	left: 0;
	width: 147px;
	height: 453px;
	background: var(--accessite-color-primary);
	overflow: hidden;
}
.references-hero__media-a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
	opacity: 0.6;
}
.references-hero__media-b {
	position: absolute;
	top: 0;
	right: 0;
	width: 323px;
	height: 631px;
	background: #D9D9D9;
	overflow: hidden;
}
.references-hero__media-b img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 1100px) {
	.references-hero__inner {
		grid-template-columns: 1fr;
		padding: 96px var(--accessite-container-pad);
	}
	.references-hero__media { height: 400px; }
	.references-hero__title { font-size: 48px; line-height: 1.05; }
	/* Décalage réduit en proportion du titre plus petit. */
	.references-hero__title .is-indent { padding-left: 120px; }
}
@media (max-width: 700px) {
	/* Mobile : on annule le décalage qui casse la mise en page sur un titre étroit. */
	.references-hero__title .is-indent { padding-left: 0; }
}

/* Séparateurs entre sections — sheet modifs L45/L52 : "réduire" = trait
 * cadré container (1440 - 2×42) plutôt que pleine largeur, plus discret.
 * On retire le border-top full-width générique sur la section suivante et on
 * le remplace par un ::after sur la section antérieure (cf. .section--references-hero::after).
 * Les traits "container" sont posés via section__inner border-bottom là où
 * applicable (sheet L52 pour clients-strip déjà géré dans accueil.css). */

/* ============================================================
 * Section Couverture nationale — légende gauche / map droite
 * ============================================================ */

/* Légende gauche : 715px largeur */

/* Map droite : prend tout l'espace restant */

/* 2 formes décoratives arrondies (teal opacité 0.25 + corail) en bas à gauche,
 * sous la légende — calé sur la maquette (refonte 2026). */

/* ============================================================
 * MOBILE — alignement maquette Figma page "Nos références".
 * Audit utilisateur 2026-05-29 : DESKTOP FIGÉ. Règles ≤ 700px uniquement.
 * Le hero est spécifique à cette page (titre "Ils nous ont fait confiance.
 * Nos références."). Les autres sections (couverture, logos, études, CTA)
 * réutilisent des templates partagés → déjà couvertes par accueil.css /
 * main.css.
 * ============================================================ */

@media (max-width: 700px) {
	/* HERO mobile : surtitre 12.1px + titre 34px (limite "titres trop gros") +
	 * paragraphe 18.3px + CTA pill teal pleine largeur + images A & B empilées. */
	.section--references-hero {
		min-height: 0;
		padding: 56px 0;
	}
	/* Demande utilisateur : trait bas du hero retiré en MOBILE (collé à l'image).
	 * Desktop : il reste (règle de base non touchée). */
	.references-hero__inner {
		padding: 0 20px;
		grid-template-columns: 1fr;
		gap: 50px;
		min-height: 0;
	}
	.references-hero__content { gap: 18.8px; }
	.section--references-hero .accessite-section-overtitle {
		font-size: 12.1px;
		line-height: 18.82px;
		letter-spacing: 1.7px;
		color: var(--accessite-gray-700);
	}
	.references-hero__title:not(#_){
		font-size: 34px;
		line-height: 1.05;
		letter-spacing: 0;
		font-weight: 400;
	}
	.references-hero__title strong,
	.references-hero__title strong.is-teal { font-weight: 700; }
	/* On annule les indents desktop qui décalent le titre — sur mobile, aligné gauche. */
	.references-hero__title .is-indent:not(#_) { padding-left: 0; }
	.references-hero__title .is-right:not(#_) { text-align: left; display: inline; }
	.references-hero__paragraph {
		font-size: 18.3px;
		line-height: 28.37px;
		color: var(--accessite-gray-700);
		max-width: 100%;
	}
	.references-hero__actions { width: 100%; flex-direction: column; gap: 12px; }
	.references-hero__actions .btn,
	.references-hero__actions .btn--primary {
		width: 100%;
		min-height: 44px;
		padding: 13.69px 25.78px;
		font-size: 16.1px;
		line-height: 1;
		border-radius: var(--accessite-radius-pill);
		justify-content: center;
		text-align: center;
	}
	/* Images : sortent de l'absolute desktop, empilées sous le contenu. */
	/* Audit 2026-06-03 : les 2 images du hero TOUJOURS sur une seule ligne (row). */
	.references-hero__media {
		position: static;
		width: 100%;
		max-width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 12px;
	}
	.references-hero__media-a {
		position: static;
		flex: 0 0 auto;
		width: 98.5px;
		height: 172.3px;
		top: auto;
		left: auto;
	}
	.references-hero__media-b {
		position: static;
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		max-width: 216.4px;
		height: 240px;
		top: auto;
		right: auto;
	}
}

/* ==========================================================================
 * Contact
 * ========================================================================== */
/*
 * Accessite Child — Page Contact.
 * Calé 1:1 sur l'export Figma (refonte mai 2026).
 *
 * Le formulaire est rendu par Gravity Forms (gravity_form() dans
 * template-parts/contact/form.php). Les styles override les classes GF
 * standards (.gform_wrapper, .gfield, etc.) pour matcher la maquette.
 */

/* ============================================================
 * Hero Contact — split texte gauche / 2 images droite
 * ============================================================ */
.section--contact-hero {
	background: var(--accessite-beige);
	padding: 0;
	overflow: hidden;
	min-height: 711px;
	position: relative;
}
.contact-hero__inner {
	max-width: var(--accessite-container-max);
	margin: 0 auto;
	/* Padding hero standardisé (top 25 = juste sous le trait du menu, audit utilisateur). */
	padding: 25px var(--accessite-container-pad) 96px 156px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 540px;
	gap: 64px;
	align-items: flex-start;
	min-height: 600px;
}
.contact-hero__content {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.contact-hero__title {
	font-size: 72px;
	line-height: 72px;
	letter-spacing: -0.01em;
	font-weight: var(--accessite-font-weight-medium);
	color: var(--accessite-navy);
	margin: 0;
	text-transform: uppercase;
	max-width: 856px;
}
.contact-hero__title strong {
	font-weight: var(--accessite-font-weight-bold);
	color: var(--accessite-navy);
}
.contact-hero__title strong.is-teal {
	color: var(--accessite-color-primary);
}
.contact-hero__paragraph {
	font-size: 16px;
	line-height: 1.6;
	color: var(--accessite-navy);
	font-weight: var(--accessite-font-weight-medium);
	margin: 0;
	max-width: 541px;
}
.contact-hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.contact-hero__media {
	position: relative;
	width: 100%;
	height: 631px;
}
.contact-hero__media-a {
	position: absolute;
	top: 89px;
	left: 0;
	width: 147px;
	height: 453px;
	background: var(--accessite-color-primary);
	overflow: hidden;
}
.contact-hero__media-a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
	opacity: 0.6;
}
.contact-hero__media-b {
	position: absolute;
	top: 0;
	right: 0;
	width: 323px;
	height: 631px;
	background: #D9D9D9;
	overflow: hidden;
}
.contact-hero__media-b img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 1100px) {
	.contact-hero__inner {
		grid-template-columns: 1fr;
		padding: 96px var(--accessite-container-pad);
	}
	.contact-hero__media { height: 400px; }
	.contact-hero__title { font-size: 48px; line-height: 1.05; }
}

/* Séparateur entre sections — 80vw centré uniquement sous le hero.
 * Pas de trait sous le formulaire (audit utilisateur : redondant avec la
 * section CTA/contact suivante). */
.section--contact-hero {
	position: relative;
}

/* ============================================================
 * Section Formulaire — Gravity Forms styling
 * ============================================================ */
.section--contact-form {
	background: var(--accessite-beige);
	padding: 80px 0 80px;
}
.section--contact-form .section__inner {
	max-width: 1027px;
	margin: 0 auto;
	padding: 0 42px;
}
.section--contact-form .accessite-section-overtitle {
	margin: 0 0 28px;
	color: color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 65%, transparent);
	font-weight: var(--accessite-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0;
}

/* === Override Gravity Forms classes === */
.section--contact-form .gform_wrapper {
	max-width: 100%;
}
.section--contact-form .gform_wrapper form,
.section--contact-form .gform_wrapper .gform_body,
.section--contact-form .gform_wrapper .gform_fields {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.section--contact-form .gform_wrapper .gform_fields {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Champ générique */
.section--contact-form .gform_wrapper .gfield {
	margin: 0;
	padding: 0;
}
.section--contact-form .gform_wrapper .gfield_label {
	display: none; /* Les libellés sont en placeholder dans la maquette */
}
.section--contact-form .gform_wrapper input[type="text"],
.section--contact-form .gform_wrapper input[type="email"],
.section--contact-form .gform_wrapper input[type="tel"],
.section--contact-form .gform_wrapper input[type="url"],
.section--contact-form .gform_wrapper select,
.section--contact-form .gform_wrapper textarea {
	width: 100%;
	height: 51px;
	padding: 14px 20px;
	border-radius: 8px;
	border: 1px solid var(--accessite-gray);
	background: transparent;
	color: var(--accessite-navy-deep);
	font-family: var(--accessite-font-family);
	font-size: 14px;
	font-weight: var(--accessite-font-weight-regular);
	line-height: 1.5;
	box-sizing: border-box;
	transition: border-color .2s, box-shadow .2s;
}
.section--contact-form .gform_wrapper textarea {
	height: 234px;
	resize: vertical;
	padding: 17px 20px;
}
.section--contact-form .gform_wrapper input::placeholder,
.section--contact-form .gform_wrapper textarea::placeholder {
	color: var(--accessite-navy-deep);
	opacity: 1;
}
.section--contact-form .gform_wrapper input:focus,
.section--contact-form .gform_wrapper select:focus,
.section--contact-form .gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--accessite-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--teal, rgb(56,182,171)) 15%, transparent);
}

/* Layout : Prénom + Nom sur la même ligne */
.section--contact-form .gform_wrapper .gfield--width-half,
.section--contact-form .gform_wrapper .gf_left_half,
.section--contact-form .gform_wrapper .gf_right_half {
	width: calc(50% - 13.5px);
	display: inline-block;
}
.section--contact-form .gform_wrapper .gfield--width-half {
	width: calc(50% - 13.5px);
}
.section--contact-form .gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 27px;
	row-gap: 20px;
}
.section--contact-form .gform_wrapper .gfield {
	grid-column: 1 / -1;
}
.section--contact-form .gform_wrapper .gfield--width-half {
	grid-column: span 1;
	width: 100%;
}

/* Checkbox consentement */
.section--contact-form .gform_wrapper .ginput_container_consent,
.section--contact-form .gform_wrapper .gfield_consent_label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.section--contact-form .gform_wrapper .ginput_container_consent input[type="checkbox"] {
	width: 13px;
	height: 13px;
	margin-top: 3px;
	accent-color: var(--accessite-color-primary);
}
.section--contact-form .gform_wrapper .ginput_container_consent label,
.section--contact-form .gform_wrapper .gfield_consent_label {
	color: var(--accessite-navy-deep);
	font-size: 12px;
	font-weight: var(--accessite-font-weight-medium);
	line-height: 18px;
	font-family: var(--accessite-font-family);
}

/* Bouton submit */
.section--contact-form .gform_wrapper .gform_footer {
	margin: 8px 0 0;
	padding: 0;
}
.section--contact-form .gform_wrapper .gform_button,
.section--contact-form .gform_wrapper input[type="submit"],
.section--contact-form .gform_wrapper button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 140px;
	height: 53px;
	padding: 16px 32px;
	background: var(--accessite-color-primary);
	color: var(--wp--preset--color--white, #fff);
	font-family: var(--accessite-font-family);
	font-size: 14px;
	font-weight: var(--accessite-font-weight-medium);
	line-height: 21px;
	border: 0;
	border-radius: 24.5px;
	cursor: pointer;
	transition: background .2s, transform .2s;
}
.section--contact-form .gform_wrapper .gform_button:hover,
.section--contact-form .gform_wrapper input[type="submit"]:hover,
.section--contact-form .gform_wrapper button[type="submit"]:hover {
	background: var(--accessite-color-primary-hover);
	transform: translateY(-1px);
}

/* Champs requis : marqueur discret */
.section--contact-form .gform_wrapper .gfield_required {
	color: var(--accessite-color-secondary);
	margin-left: 4px;
}

/* Validation errors */
.section--contact-form .gform_wrapper .gfield_error input,
.section--contact-form .gform_wrapper .gfield_error select,
.section--contact-form .gform_wrapper .gfield_error textarea {
	border-color: var(--accessite-color-secondary);
}
.section--contact-form .gform_wrapper .validation_message {
	color: var(--accessite-color-secondary);
	font-size: 12px;
	margin-top: 6px;
}
.section--contact-form .gform_wrapper .validation_error {
	color: var(--accessite-color-secondary);
	background: color-mix(in srgb, var(--wp--preset--color--coral, rgb(240,132,122)) 10%, transparent);
	border: 1px solid var(--accessite-color-secondary);
	padding: 12px 20px;
	border-radius: 8px;
	margin-bottom: 20px;
}
.section--contact-form .gform_confirmation_message {
	background: color-mix(in srgb, var(--wp--preset--color--teal, rgb(56,182,171)) 10%, transparent);
	border: 1px solid var(--accessite-color-primary);
	color: var(--accessite-navy);
	padding: 20px 24px;
	border-radius: 8px;
	font-size: 14px;
}

/* Fallback message si Gravity Forms pas configuré */
.section--contact-form .description {
	padding: 24px;
	background: rgba(255, 205, 28, 0.15);
	border: 1px dashed var(--accessite-yellow);
	border-radius: 8px;
	color: var(--accessite-navy);
	font-size: 14px;
}

@media (max-width: 700px) {
	.section--contact-form .gform_wrapper .gform_fields { grid-template-columns: 1fr; }
	.section--contact-form .gform_wrapper .gfield--width-half { grid-column: 1 / -1; }
}

/* ============================================================
 * Formulaire HTML natif (fallback si Gravity Forms absent)
 * Calé 1:1 sur la maquette : champs 51px / radius 8 / outline gris,
 * row Prénom+Nom 50/50 gap 27px, textarea 234px, consent + submit.
 * ============================================================ */

/* ============================================================
 * MOBILE — alignement maquette Figma page "Contact".
 * Audit utilisateur 2026-05-29 : DESKTOP FIGÉ. Règles ≤ 700px uniquement.
 * ============================================================ */

/* --- HERO Contact mobile : surtitre + titre 34px + paragraphe + CTA "Nous
 * écrire" pill teal + images A & B empilées. --- */
@media (max-width: 700px) {
	.section--contact-hero { min-height: 0; padding: 56px 0; }
	/* Demande utilisateur : trait sous les images du hero retiré en MOBILE. */
	.contact-hero__inner {
		padding: 0 20px;
		grid-template-columns: 1fr;
		gap: 50px;
		min-height: 0;
	}
	.contact-hero__content { gap: 18.9px; }
	.section--contact-hero .accessite-section-overtitle {
		font-size: 12.1px;
		line-height: 18.82px;
		letter-spacing: 1.7px;
		color: var(--accessite-gray-700);
	}
	.contact-hero__title:not(#_){
		font-size: 34px;
		line-height: 1.05;
		letter-spacing: 0;
		font-weight: 400;
	}
	.contact-hero__title strong,
	.contact-hero__title strong.is-teal { font-weight: 700; }
	.contact-hero__paragraph {
		font-size: 18.3px;
		line-height: 28.37px;
		color: var(--accessite-gray-700);
		max-width: 100%;
	}
	.contact-hero__actions { width: 100%; flex-direction: column; gap: 12px; }
	.contact-hero__actions .btn,
	.contact-hero__actions .btn--primary {
		width: 100%;
		min-height: 44px;
		padding: 13.69px 25.78px;
		font-size: 16.1px;
		line-height: 1;
		border-radius: var(--accessite-radius-pill);
		justify-content: center;
		text-align: center;
	}
	/* Images sortent de l'absolute desktop, empilées sous le contenu. */
	/* Audit 2026-06-03 : les 2 images du hero TOUJOURS sur une seule ligne (row). */
	.contact-hero__media {
		position: static;
		width: 100%;
		max-width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 12px;
	}
	.contact-hero__media-a {
		position: static;
		flex: 0 0 auto;
		width: 98.5px;
		height: 172.3px;
		top: auto;
		left: auto;
	}
	.contact-hero__media-b {
		position: static;
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		max-width: 216.4px;
		height: 240px;
		top: auto;
		right: auto;
	}
}

/* --- SECTION FORMULAIRE mobile : surtitre + mention RGPD + champs pleine
 * largeur (radius 12px, fond blanc 45%, border navy 14%), textarea ≥220px,
 * checkbox alignée avec son texte, bouton "Prendre contact" pleine largeur.
 * Gravity Forms (.gform_wrapper) ET formulaire custom (.accessite-contact-form)
 * sont supportés. --- */
@media (max-width: 700px) {
	.section--contact-form { padding: 32px 0 56px; }
	.section--contact-form .section__inner {
		padding: 0 20px;
		max-width: 100%;
	}
	.section--contact-form .accessite-section-overtitle {
		line-height: 18.82px;
		letter-spacing: 1.7px;
		margin-bottom: 20px;
	}
	/* Mention "* indique les champs nécessaires" */
	.section--contact-form .gform_required_legend {
		font-size: 16.1px;
		line-height: 24.97px;
		color: var(--accessite-gray-700);
		margin-bottom: 20px;
	}

	/* === Gravity Forms (si plugin actif) === */
	.section--contact-form .gform_wrapper .gform_fields:not(#_) {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.section--contact-form .gform_wrapper .gfield:not(#_) {
		grid-column: 1 / -1;
	}
	.section--contact-form .gform_wrapper .gfield_label {
		font-size: 14.7px;
		line-height: 23.56px;
		color: var(--accessite-gray-700);
		font-weight: 500;
		margin-bottom: 8px;
	}
	.section--contact-form .gform_wrapper input[type="text"],
	.section--contact-form .gform_wrapper input[type="email"],
	.section--contact-form .gform_wrapper input[type="tel"],
	.section--contact-form .gform_wrapper input[type="url"],
	.section--contact-form .gform_wrapper select,
	.section--contact-form .gform_wrapper textarea {
		width: 100%;
		min-height: 54px;
		padding: 14px 16px;
		font-size: 16px;
		line-height: 1.4;
		background: color-mix(in srgb, var(--wp--preset--color--white, rgb(255,255,255)) 45%, transparent);
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 14%, transparent);
		border-radius: 12px;
		box-sizing: border-box;
	}
	/* Demande utilisateur : champ email à la MÊME largeur que les autres champs.
	 * Gravity Forms lui met la classe `.medium` qui le rétrécit → on force 100%
	 * (comme les inputs texte/nom qui n'ont pas de classe de taille). */
	.section--contact-form .gform_wrapper textarea {
		min-height: 220px;
		resize: vertical;
	}
	/* Checkbox RGPD : carré 24×24 aligné en haut, texte à côté, gap 16px */
	.section--contact-form .gform_wrapper .gfield--type-consent .ginput_container,
	.section--contact-form .gform_wrapper .ginput_container_consent,
	.section--contact-form .gform_wrapper .ginput_container_checkbox {
		display: flex;
		align-items: flex-start;
		gap: 16px;
	}
	.section--contact-form .gform_wrapper input[type="checkbox"] {
		width: 24px;
		height: 24px;
		min-width: 24px;
		margin: 2px 0 0;
		border-radius: 2.5px;
		border: 1px solid #767676;
		background: var(--wp--preset--color--white, #fff);
		flex-shrink: 0;
		cursor: pointer;
	}
	.section--contact-form .gform_wrapper .gfield_consent_label,
	.section--contact-form .gform_wrapper .ginput_container_consent label,
	.section--contact-form .gform_wrapper .ginput_container_checkbox label {
		font-size: 14.7px;
		line-height: 22px;
		color: var(--accessite-gray-700);
		font-weight: 500;
		max-width: calc(100% - 40px);
	}
	/* Bouton submit "Prendre contact" pleine largeur pill teal */
	.section--contact-form .gform_wrapper .gform_button,
	.section--contact-form .gform_wrapper button[type="submit"],
	.section--contact-form .gform_footer input[type="submit"] {
		width: 100%;
		min-height: 44px;
		padding: 13.69px 25.78px;
		font-size: 16.1px;
		font-weight: 700;
		line-height: 1;
		background: var(--accessite-color-primary);
		color: var(--wp--preset--color--white, #fff);
		border: 0;
		border-radius: var(--accessite-radius-pill);
		cursor: pointer;
		text-align: center;
	}

	/* === Formulaire custom (fallback non-Gravity) === */
}

/* ==========================================================================
 * Actualités (ressources)
 * ========================================================================== */
/*
 * Accessite Child — Page Ressources.
 * Calé pixel-près sur la maquette refonte 2026.
 *
 * Sommaire :
 *   1. Hero "Actualités & Insights" (split + 2 visuels)
 *   2. Bloc Blog "Accessite en actualités" (header + grid + pagination)
 *   3. Bloc Livre blanc (header + image + card beige superposée)
 *   4. Bloc Podcast "Vision Retail" (header + 3 rows épisodes + CTA)
 *   5. Newsletter — extrait dans components/newsletter.css (bloc partagé)
 *   6. Responsive 1200 / 900
 */

/* ============================================================
 * 1. Hero ressources — split texte / 2 visuels
 * ============================================================ */
.section--ressources-hero {
	background: var(--accessite-beige);
	padding: 0;
	/* Sheet modifs L66/L79 : trait sep réduit = cadré container plutôt que full-width.
	   Border-bottom retiré ; ::after limité au container 1440 - 2×42. */
	overflow: hidden;
	position: relative;
}

.ressources-hero {
	position: relative;
	max-width: var(--accessite-container-max);
	margin: 0 auto;
}

.ressources-hero__inner {
	position: relative;
	display: flex;
	gap: 64px;
	align-items: center;
	/* Padding hero standardisé (top 25 = juste sous le trait du menu, audit utilisateur). */
	padding: 25px var(--accessite-container-pad) 96px 156px;
	min-height: 600px;
	box-sizing: border-box;
}

.ressources-hero__content {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 600px;
}

.ressources-hero__overtitle {
	color: color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 65%, transparent);
	margin: 0;
}

.ressources-hero__title {
	font-size: 72px;
	line-height: 72px;
	font-weight: 500;
	margin: 0;
	color: var(--accessite-navy);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}
.ressources-hero__title strong { font-weight: 700; }
.ressources-hero__title .is-teal { color: var(--accessite-teal); font-weight: 700; }

.ressources-hero__paragraph {
	margin: 0;
	color: var(--accessite-navy);
	font-size: 16px;
	line-height: 23px;
	max-width: 541px;
}

.ressources-hero__buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.ressources-hero__media {
	position: relative;
	flex: 0 0 auto;
	width: 500px;
	height: 631px;
}

.ressources-hero__media-main,
.ressources-hero__media-accent {
	position: absolute;
	overflow: hidden;
	border-radius: var(--accessite-radius-sm);
	background: var(--accessite-gray);
}

.ressources-hero__media-main {
	right: 0;
	top: 40px;
	width: 323px;
	height: 591px;
}

.ressources-hero__media-accent {
	left: 0;
	top: 129px;
	width: 147px;
	height: 453px;
	background-color: var(--accessite-teal);
	opacity: 0.6;
	mix-blend-mode: multiply;
}

.ressources-hero__media-main img,
.ressources-hero__media-accent img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============================================================
 * 2. Bloc Blog — "Accessite en actualités"
 * Header titre 2 lignes + 2 carrés décor à droite.
 * Grid de cards article (image 200 + body 24/15).
 * ============================================================ */
.section--ressources-blog {
	background: var(--accessite-beige);
	padding: 120px 0 100px;
}

.section--ressources-blog .section__inner,
.ressources-blog__head,
.ressources-blog__grid,
.ressources-blog__pagination,
.ressources-blog__empty {
	max-width: var(--accessite-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--accessite-container-pad);
	padding-right: var(--accessite-container-pad);
	box-sizing: border-box;
}

.ressources-blog__head {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 64px;
	margin-bottom: 64px;
}

.ressources-blog__head-text {
	max-width: 700px;
}

.ressources-blog__surtitre {
	color: color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 65%, transparent);
	margin: 0 0 16px;
}

.ressources-blog__title {
	line-height: 1.04;
	font-weight: 500;
	color: var(--accessite-navy);
	text-transform: uppercase;
	letter-spacing: -0.015em;
	margin: 0;
}
.ressources-blog__title strong { font-weight: 700; }
.ressources-blog__title .is-teal { color: var(--accessite-teal); font-weight: 700; }
.ressources-blog__title .is-indent { display: inline-block; padding-left: 90px; }

.ressources-blog__decor {
	position: relative;
	flex: 0 0 auto;
	width: 268px;   /* motif partagé accessite_decor('duo') — AR 268×134 */
	height: 134px;
	opacity: 0.3;
}

.ressources-blog__grid {
	list-style: none;
	margin: 0 auto;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: var(--accessite-container-pad);
	padding-right: var(--accessite-container-pad);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 24px;
}

.ressources-blog__item { margin: 0; }

/* Carte article */
.card-article {
	display: block;
	background: var(--wp--preset--color--white, #fff);
	border-radius: var(--accessite-radius-md);
	overflow: hidden;
	box-shadow: var(--accessite-shadow-soft);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	height: 100%;
}
.card-article:hover {
	transform: translateY(-4px);
	box-shadow: var(--accessite-shadow-card);
}

.card-article__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.card-article__media {
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	background: var(--accessite-gray);
}
.card-article__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.card-article__img--placeholder {
	background: linear-gradient(135deg, var(--accessite-teal) 0%, var(--accessite-navy) 100%);
}

.card-article__body {
	padding: 24px 24px 15px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.card-article__date {
	font-size: 12px;
	font-weight: 600;
	color: color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 65%, transparent);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.card-article__title {
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--accessite-navy);
	margin: 0;
}

.card-article__excerpt {
	font-size: 14px;
	line-height: 1.55;
	color: var(--accessite-gray-700);
	margin: 0;
	flex: 1;
}

.card-article__more {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: var(--accessite-teal);
	letter-spacing: 0.04em;
	margin-top: 4px;
	transition: color 0.2s ease;
}
.card-article:hover .card-article__more {
	color: var(--accessite-teal-deep);
}

.ressources-blog__empty {
	text-align: center;
	color: var(--accessite-gray-700);
	font-size: 15px;
	padding-top: 32px;
	padding-bottom: 32px;
}

/* Pagination — trait de séparation sous la pagination.
 * Doc R66/R184 : réduit à la largeur standard du site (80vw centré) au lieu de
 * toute la largeur du conteneur. ::after en ligne pleine (flex-basis 100%)
 * plafonnée à --accessite-separator-width. Desktop + mobile. */
.ressources-blog__pagination {
	margin-top: 64px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.ressources-blog__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border-radius: 8px;
	background: transparent;
	color: var(--accessite-navy);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ressources-blog__pagination .page-numbers:hover {
	background: var(--wp--preset--color--white, #fff);
	border-color: var(--accessite-navy);
}
.ressources-blog__pagination .page-numbers.current {
	background: var(--accessite-navy);
	color: var(--wp--preset--color--white, #fff);
}
.ressources-blog__pagination .page-numbers.dots {
	background: transparent;
	border: 0;
}

/* ============================================================
 * 3. Bloc Livre blanc
 * Header titre 2 lignes + grande image + card beige superposée
 * en bas-droite (titre + citation gauche teal + paragraphe + CTA)
 * ============================================================ */
.section--ressources-livre {
	background: var(--accessite-beige);
	padding: 120px 0;
	position: relative;
}
/* Trait de séparation contenu dans la largeur du container (réduit
 * vs pleine largeur viewport — audit utilisateur). */

.section--ressources-livre .ressources-livre__head,
.section--ressources-livre .ressources-livre__visual {
	max-width: var(--accessite-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--accessite-container-pad);
	padding-right: var(--accessite-container-pad);
	box-sizing: border-box;
}

.ressources-livre__head {
	margin-bottom: 64px;
}

.ressources-livre__head .accessite-section-overtitle {
	color: color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 65%, transparent);
	margin: 0 0 16px;
}

.ressources-livre__title {
	line-height: 1.04;
	font-weight: 500;
	color: var(--accessite-navy);
	text-transform: uppercase;
	letter-spacing: -0.015em;
	margin: 0;
	max-width: 1100px;
}
/* Mix exact de la maquette Figma fournie : 700 navy / 500 teal / 600 teal.
 * Note : on doit explicitement remettre `color: navy` sur le <strong> sans
 * is-teal, car le sélecteur global `.accessite-section-title strong` (main.css)
 * forcerait le teal — ce qui rendrait "LE CENTRE COMMERCIAL EN 2030" en teal
 * alors que la maquette demande var(--wp--preset--color--navy, #1A2A4B) navy. */
.ressources-livre__title strong { font-weight: 700; color: var(--accessite-navy); }
.ressources-livre__title .is-teal { color: var(--accessite-teal); font-weight: 500; }
.ressources-livre__title strong.is-teal { color: var(--accessite-teal); font-weight: 600; }
.ressources-livre__title .is-indent { display: inline-block; padding-left: 90px; }

.ressources-livre__visual {
	position: relative;
	box-sizing: border-box;
}

.ressources-livre__img {
	display: block;
	width: 100%;
	height: 560px;
	object-fit: cover;
	border-radius: 0;
	background: var(--accessite-gray);
}

.ressources-livre__card {
	position: absolute;
	right: calc(var(--accessite-container-pad) + 40px);
	bottom: -60px;
	width: 460px;
	max-width: calc(100% - 80px);
	background: var(--accessite-beige-soft);
	padding: 40px 36px 36px;
	border-radius: 0;
	box-shadow: var(--accessite-shadow-card);
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
}

.ressources-livre__card-title {
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--accessite-navy);
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
}

.ressources-livre__card-quote {
	margin: 0;
	padding: 4px 0 4px 16px;
	border-left: 4px solid var(--accessite-teal);
	color: var(--accessite-navy);
	font-size: 14px;
	font-style: italic;
	line-height: 1.55;
}
.ressources-livre__card-quote p { margin: 0; }

.ressources-livre__card-text {
	color: var(--accessite-gray-700);
	font-size: 14px;
	line-height: 1.6;
}
.ressources-livre__card-text p { margin: 0 0 8px; }
.ressources-livre__card-text p:last-child { margin-bottom: 0; }

.ressources-livre__card-btn {
	align-self: flex-start;
	margin-top: 4px;
}

/* ============================================================
 * 4. Bloc Podcast — "Vision Retail"
 * Header split (titre gauche / paragraphe droit).
 * 3 rows pleine largeur : thumb 80 + meta + titre + player + CTA.
 * ============================================================ */
.section--ressources-podcast {
	background: var(--accessite-beige);
	padding: 180px 0 120px;
	position: relative;
}
/* Motif décoratif (capsule + cercle + "D") — calé sur la largeur de contenu,
   placé derrière le texte et les cartes. */
.ressources-podcast__decor {
	position: absolute;
	top: 75px;
	left: 45%;
	transform: translateX(-50%);
	width: var(--accessite-container-max);
	max-width: 100%;
	height: 0;
	z-index: 0;
	pointer-events: none;
}

.section--ressources-podcast .ressources-podcast__head,
.section--ressources-podcast .ressources-podcast__list,
.section--ressources-podcast .ressources-podcast__cta {
	max-width: var(--accessite-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--accessite-container-pad);
	padding-right: var(--accessite-container-pad);
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.ressources-podcast__head {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 64px;
	align-items: end;
	margin-bottom: 64px;
}

.ressources-podcast__head-text .accessite-section-overtitle {
	color: color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 65%, transparent);
	margin: 0 0 16px;
}

.ressources-podcast__title {
	line-height: 1.04;
	font-weight: 500;
	color: var(--accessite-navy);
	text-transform: uppercase;
	letter-spacing: -0.015em;
	margin: 0;
}
.ressources-podcast__title strong { font-weight: 700; }
.ressources-podcast__title .is-teal { color: var(--accessite-teal); font-weight: 700; }

.ressources-podcast__paragraph {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--accessite-gray-700);
	max-width: 420px;
	justify-self: end;
}

.ressources-podcast__list {
	list-style: none;
	margin: 0 auto;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: var(--accessite-container-pad);
	padding-right: var(--accessite-container-pad);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Row d'épisode */
.podcast-row {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 24px;
	background: var(--wp--preset--color--white, #fff);
	border-radius: var(--accessite-radius-md);
	padding: 20px 24px;
	box-shadow: var(--accessite-shadow-soft);
	align-items: center;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
/* Embed Spotify présent : la vignette est masquée, le corps prend toute la largeur. */
.podcast-row--no-thumb { grid-template-columns: 1fr; }
.podcast-row:hover {
	transform: translateY(-2px);
	box-shadow: var(--accessite-shadow-card);
}

.podcast-row__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.podcast-row__meta {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 65%, transparent);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.podcast-row__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--accessite-navy);
	line-height: 1.3;
}
.podcast-row__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.podcast-row__title a:hover { color: var(--accessite-teal); }

.podcast-row__embed {
	margin-top: 8px;
	width: 100%;
}
.podcast-row__embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

.ressources-podcast__cta {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

/* Le bloc Newsletter (5e section de la page Ressources) a été extrait
 * dans components/newsletter.css car partagé avec d'autres pages
 * (Livre blanc, Podcast). Voir template-parts/global/newsletter.php. */

/* ============================================================
 * 6. Responsive
 * ============================================================ */
@media (max-width: 1200px) {
	.ressources-hero__inner { padding: 100px 64px; gap: 40px; }
	.ressources-hero__title { font-size: 56px; line-height: 60px; }
	.ressources-hero__media { width: 380px; height: 520px; }
	.ressources-hero__media-main { width: 260px; height: 480px; top: 30px; }
	.ressources-hero__media-accent { width: 120px; height: 370px; top: 105px; }

	.ressources-livre__img { height: 460px; }
	.ressources-livre__card { right: 24px; bottom: -40px; width: 420px; }

}

@media (max-width: 900px) {
	.ressources-hero__inner {
		padding: 64px var(--accessite-container-pad);
		flex-direction: column;
		min-height: 0;
		gap: 32px;
		align-items: flex-start;
	}
	.ressources-hero__content { max-width: 100%; gap: 24px; }
	.ressources-hero__title { font-size: 40px; line-height: 44px; }
	.ressources-hero__media {
		width: 100%;
		max-width: 420px;
		height: 480px;
		margin: 0 auto;
	}

	.section--ressources-blog,
	.section--ressources-livre,
	.section--ressources-podcast {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.ressources-blog__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		margin-bottom: 40px;
	}
	.ressources-blog__title .is-indent,
	.ressources-livre__title .is-indent {
		padding-left: 32px;
	}
	.ressources-blog__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.ressources-livre__img { height: 360px; }
	.ressources-livre__card {
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		max-width: 100%;
		margin-top: -32px;
		margin-left: auto;
		margin-right: auto;
	}

	.ressources-podcast__head {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-bottom: 40px;
	}
	.ressources-podcast__paragraph { justify-self: start; max-width: 100%; }

	.podcast-row {
		grid-template-columns: 60px 1fr;
		gap: 16px;
		padding: 16px;
	}
	.podcast-row__title { font-size: 16px; }

}

/* ============================================================
 * MOBILE — alignement maquette Figma page "Actualités" / "Ressources".
 * Audit utilisateur 2026-05-29 : DESKTOP FIGÉ. Règles ≤ 700px uniquement.
 * Les deux pages partagent le même template-parts (ressources/hero,
 * ressources/blog, ressources/livre, ressources/podcast). Ce bloc couvre
 * donc les 2 pages d'un coup.
 * ============================================================ */

/* --- HERO "Actualités & insights" mobile : surtitre + titre 34px (limite
 * "titres trop gros") + paragraphe + 3 boutons empilés pleine largeur
 * (1 teal + 2 outlined) + images A & B sous le contenu. --- */
@media (max-width: 700px) {
	.ressources-hero { padding: 56px 0; min-height: 0; }
	.ressources-hero__inner {
		padding: 0 20px;
		grid-template-columns: 1fr;
		gap: 50px;
		min-height: 0;
	}
	.ressources-hero__content { gap: 18.9px; }
	.ressources-hero__overtitle {
		font-size: 12.1px;
		line-height: 18.82px;
		letter-spacing: 1.7px;
		color: var(--accessite-gray-700);
	}
	.ressources-hero__title:not(#_){
		font-size: 34px;
		line-height: 1.05;
		letter-spacing: 0;
		font-weight: 400;
	}
	.ressources-hero__title strong,
	.ressources-hero__title strong.is-teal,
	.ressources-hero__title .is-teal { font-weight: 700; }
	.ressources-hero__paragraph {
		font-size: 18.3px;
		line-height: 28.37px;
		color: var(--accessite-gray-700);
		max-width: 100%;
	}
	/* Les 3 boutons empilés pleine largeur (1 primaire teal + 2 outline navy) */
	.ressources-hero__buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		width: 100%;
	}
	.ressources-hero__buttons .btn {
		width: 100%;
		min-height: 44px;
		padding: 13.69px 25.78px;
		font-size: 16.1px;
		line-height: 1;
		border-radius: var(--accessite-radius-pill);
		justify-content: center;
		text-align: center;
	}
	/* Images : sortent de l'absolute desktop, empilées sous le contenu. */
	/* Audit 2026-06-03 : les 2 images du hero TOUJOURS sur une seule ligne (row). */
	.ressources-hero__media {
		position: static;
		width: 100%;
		max-width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 12px;
	}
	.ressources-hero__media-main,
	.ressources-hero__media-accent {
		position: static;
		top: auto;
		left: auto;
		right: auto;
	}
	.ressources-hero__media-accent {
		flex: 0 0 auto;
		width: 98.5px;
		height: 172.3px;
	}
	.ressources-hero__media-main {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		max-width: 216.4px;
		height: 240px;
	}
}

/* --- SECTION BLOG mobile : titre 34px, 6 cards verticales pleine largeur,
 * border-radius 20px, image 208px en haut, contenu 17.6px padding. --- */
@media (max-width: 700px) {
	.ressources-blog__head { padding: 0 20px; }
	.ressources-blog__title:not(#_){
		line-height: 1.05;
		font-weight: 400;
	}
	.ressources-blog__title .is-indent:not(#_) {
		display: inline;
		padding-left: 0;
	}
	.ressources-blog__grid:not(#_) {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 0 20px;
	}
	/* Cards article : la structure interne (.blog-card ou similaire) est déjà
	 * stylée — on s'assure juste que la carte prend toute la largeur. */
	.ressources-blog__item { margin: 0; width: 100%; }

	/* Pagination centrée, items 44×44px, fond navy pour la page courante. */
	.ressources-blog__pagination {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		padding: 0 20px;
	}
	.ressources-blog__pagination .page-numbers {
		min-width: 44px;
		min-height: 44px;
		padding: 9px 14px;
		font-size: 16.1px;
		line-height: 24.97px;
		border-radius: 10px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* --- SECTION LIVRE BLANC mobile : titre 34px multiligne, visuel en haut,
 * card en-dessous avec accroche italique + paragraphes + bouton télécharger
 * pleine largeur. --- */
@media (max-width: 700px) {
	.ressources-livre__head { padding: 0 20px; }
	.ressources-livre__head .accessite-section-overtitle {
		letter-spacing: 1.7px;
	}
	.ressources-livre__title:not(#_){
		line-height: 1.05;
	}
	.ressources-livre__title .is-indent:not(#_) {
		display: inline;
		padding-left: 0;
	}
	.ressources-livre__visual {
		width: 100%;
		padding: 0 20px;
	}
	.ressources-livre__img {
		width: 100%;
		max-width: 100%;
		height: 210px;
		object-fit: cover;
	}
	.ressources-livre__card {
		width: auto;
		margin: 0 20px;
		padding: 24px;
		gap: 16px;
	}
	.ressources-livre__card-title {
		font-size: 22.6px;
		line-height: 35px;
	}
	.ressources-livre__card .btn,
.ressources-livre__card a.btn {
		width: 100%;
		min-height: 44px;
		padding: 13.69px 25.78px;
		font-size: 16.1px;
		border-radius: var(--accessite-radius-pill);
		justify-content: center;
		text-align: center;
	}
}

/* --- SECTION PODCAST mobile : header + cartes épisode empilées, lecteur
 * navy avec thumbnail + titre + Save + barre + bouton play. --- */
@media (max-width: 700px) {
	.ressources-podcast__head { padding: 0 20px; }
	.ressources-podcast__title:not(#_){
		line-height: 1.05;
	}
	.ressources-podcast__paragraph {
		font-size: 18.3px;
		line-height: 28.37px;
		color: var(--accessite-gray-700);
		max-width: 100%;
	}
	.podcast-row:not(#_),
.ressources-podcast__list > *:not(#_) {
		grid-template-columns: 1fr;
		gap: 11px;
		padding: 19px 20px 20px;
		background: var(--wp--preset--color--white, #fff);
		outline: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 14%, transparent);
		outline-offset: -1px;
	}
	.podcast-row__meta,
	.podcast-row__title {
		text-align: left;
	}
	.podcast-row__meta {
		font-size: 12.5px;
		line-height: 19.34px;
		letter-spacing: 1px;
		color: var(--accessite-gray-700);
		font-weight: 700;
		text-transform: uppercase;
	}
	.podcast-row__title {
		font-size: 19.5px;
		line-height: 23.38px;
		font-weight: 700;
		color: var(--accessite-navy);
	}
	/* CTA "Voir tous les épisodes" en fin de section, pleine largeur. */
	.ressources-podcast__cta {
		width: 100%;
		min-height: 44px;
		padding: 13.69px 25.78px;
		font-size: 16.1px;
		border-radius: var(--accessite-radius-pill);
		justify-content: center;
		text-align: center;
	}
}

/* ==========================================================================
 * PAGE ACTUALITÉS — cards blog agrandies (DESKTOP UNIQUEMENT)
 * --------------------------------------------------------------------------
 * Demande client : sur la SEULE page « Actualités », agrandir les cards de la
 * section blog pour que les images soient plus grandes et plus visibles.
 *
 * Périmètre strict :
 *  - Scopé au <body> de la page Actualités (`page-template-page-actualites`
 *    posée par WP + `page-slug-actualites` posée par accessite_body_class_page_slug).
 *    → la page Ressources, qui partage le même template-part `ressources/blog.php`
 *      et les mêmes classes `.card-article`, n'est PAS impactée.
 *  - `min-width: 901px` : la grille est en 3 colonnes au-dessus de 900px ; en
 *    dessous (tablette/mobile, grille 1 colonne) ce bloc ne s'applique pas
 *    → mobile strictement inchangé (média reste à 200px).
 *  - On agrandit la hauteur du média (200px → 280px) : l'image, en object-fit:
 *    cover et issue de la taille `accessite-card` 720×480 (3:2), se rapproche
 *    de son ratio natif → plus haute et plus lisible. La card grandit d'autant
 *    (les 3 colonnes restent alignées, height:100% conserve l'égalité de hauteur).
 * ========================================================================== */
@media (min-width: 901px) {
	body.page-template-page-actualites .card-article__media,
	body.page-slug-actualites .card-article__media {
		height: 280px;
	}
}

/* ==========================================================================
 * PAGE ACTUALITÉS — section « Livre blanc » : texte et image même largeur (MOBILE)
 * --------------------------------------------------------------------------
 * Demande client : en mobile, le bloc texte (carte) et l'image du livre blanc
 * doivent avoir la même largeur (déséquilibre actuel).
 *
 * Cause : `.ressources-livre__visual` a `padding: 0 20px` ; l'image est en
 * `width: 100%` (donc inset 20px), mais la carte a EN PLUS `margin: 0 20px`
 * (inset 40px) → la carte est 40px plus étroite que l'image. On retire la marge
 * horizontale de la carte : elle remplit alors la même boîte de contenu que
 * l'image → largeurs égales et bords alignés. L'image conserve object-fit:cover
 * (non déformée) et reste responsive dans son conteneur.
 *
 * Périmètre : `@media max-width:700px` (mobile only → desktop inchangé) + scopé
 * au <body> de la page Actualités → la page Ressources (même template-part) n'est
 * pas touchée.
 * ========================================================================== */
@media (max-width: 700px) {
	body.page-template-page-actualites .ressources-livre__card,
	body.page-slug-actualites .ressources-livre__card {
		margin-left: 0;
		margin-right: 0;
	}
}

/* ==========================================================================
 * PAGE ACTUALITÉS — section « Podcast » : blocs plus confortables (MOBILE)
 * --------------------------------------------------------------------------
 * Demande client : en mobile, les blocs podcast paraissent « coupés » / pas
 * assez confortables. Les épisodes sont des embeds Spotify rendus en mode
 * COMPACT (iframe height="152"), trop courts/serrés (la maquette mobile prévoit
 * une zone lecteur ~340px). On donne au lecteur une hauteur plus confortable et
 * un peu plus d'air interne, et on s'assure qu'aucun conteneur ne rogne.
 *
 * Périmètre : `@media max-width:700px` (mobile only → desktop strictement
 * inchangé, l'embed y reste à 152) + scopé au <body> de la page Actualités
 * (la page Ressources, même template-part, n'est pas touchée). Contenu inchangé
 * (mêmes épisodes / titres / dates / durées / liens) : seul l'affichage change.
 * ========================================================================== */
@media (max-width: 700px) {
	body.page-template-page-actualites .section--ressources-podcast .podcast-row__embed iframe,
	body.page-slug-actualites .section--ressources-podcast .podcast-row__embed iframe {
		height: 232px; /* lecteur Spotify confortable (vs 152 compact, trop serré) */
	}
	body.page-template-page-actualites .section--ressources-podcast .podcast-row,
	body.page-slug-actualites .section--ressources-podcast .podcast-row {
		padding: 20px;        /* un peu plus d'air (vs 19px 20px 20px) */
		gap: 14px;            /* vs 11px */
		overflow: visible;    /* garde-fou : rien n'est rogné */
	}
	body.page-template-page-actualites .section--ressources-podcast .podcast-row__body,
	body.page-slug-actualites .section--ressources-podcast .podcast-row__body {
		gap: 10px;            /* espacement interne meta / titre / lecteur */
	}
}

/* ==========================================================================
 * Article (single)
 * ========================================================================== */
/*
 * Accessite Child — Single Article de blog.
 * Calé sur Article-Mobile-375.html (Figma, refonte 2026).
 *
 * Layout 1 colonne sans sidebar. Largeur de lecture confortable
 * (~740px desktop). Compatible Gutenberg : tous les blocs sont stylés
 * dans .accessite-article__body (paragraphes, titres, listes, citations,
 * images, boutons, tableaux).
 *
 * SCOPING STRICT : toutes les règles sont préfixées .accessite-article
 * pour ne pas impacter le reste du site.
 */

/* ============================================================
 * 1. CONTAINER + HEADER ARTICLE
 * ============================================================ */
.accessite-article {
	background: var(--accessite-beige);
	padding: 64px 0 80px;
}
.accessite-article__inner {
	max-width: 740px;
	margin: 0 auto;
	padding: 0 var(--accessite-container-pad);
	box-sizing: border-box;
}
/* Doc R63/R73 : fil d'Ariane retour aux actualités (desktop + mobile). */
.accessite-article__breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	color: var(--accessite-navy);
	font-size: 14px;
	font-weight: var(--accessite-font-weight-medium);
	text-decoration: none;
}
.accessite-article__breadcrumb:hover { color: var(--accessite-color-primary); }
.accessite-article__breadcrumb-arrow { font-size: 16px; line-height: 1; }
.accessite-article__header {
	margin: 0 0 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.accessite-article__title {
	margin: 0;
	color: var(--accessite-navy);
	font-family: var(--accessite-font-family);
	font-size: 44px;
	font-weight: var(--accessite-font-weight-bold);
	line-height: 1.15;
	letter-spacing: -0.005em;
	text-transform: none;
}
.accessite-article__meta {
	margin: 0;
	color: var(--accessite-gray-700);
	font-size: 13px;
	font-weight: var(--accessite-font-weight-medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}
.accessite-article__meta > * { display: inline-flex; align-items: center; }
.accessite-article__meta > * + *::before {
	content: "·";
	margin-right: 16px;
	color: color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 30%, transparent);
}

/* ============================================================
 * 2. IMAGE MISE EN AVANT
 * ============================================================ */
.accessite-article__featured {
	margin: 0 0 40px;
	background: var(--accessite-gray);
	overflow: hidden;
}
.accessite-article__featured img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: cover;
}

/* ============================================================
 * 3. CORPS DE L'ARTICLE — Gutenberg-compatible
 *    Tous les blocs WP sont stylés ici sans toucher au CSS global.
 * ============================================================ */
.accessite-article__body {
	color: var(--accessite-navy);
	font-family: var(--accessite-font-family);
	font-size: 17px;
	font-weight: var(--accessite-font-weight-regular);
	line-height: 1.65;
}
.accessite-article__body > * { margin: 0 0 24px; }
.accessite-article__body > *:last-child { margin-bottom: 0; }

/* — Titres */
.accessite-article__body h2,
.accessite-article__body .wp-block-heading.h2,
.accessite-article__body h2.wp-block-heading {
	margin: 48px 0 20px;
	font-size: 28px;
	font-weight: var(--accessite-font-weight-bold);
	line-height: 1.25;
	color: var(--accessite-navy);
	letter-spacing: -0.005em;
}
.accessite-article__body h3,
.accessite-article__body h3.wp-block-heading {
	margin: 36px 0 16px;
	font-size: 22px;
	font-weight: var(--accessite-font-weight-bold);
	line-height: 1.3;
	color: var(--accessite-navy);
}
.accessite-article__body h4,
.accessite-article__body h4.wp-block-heading {
	margin: 28px 0 12px;
	font-size: 18px;
	font-weight: var(--accessite-font-weight-bold);
	line-height: 1.35;
	color: var(--accessite-navy);
}
.accessite-article__body h2:first-child,
.accessite-article__body h3:first-child { margin-top: 0; }

/* — Paragraphes */
.accessite-article__body p { margin: 0 0 20px; }
.accessite-article__body p:last-child { margin-bottom: 0; }
.accessite-article__body strong,
.accessite-article__body b { font-weight: var(--accessite-font-weight-bold); color: var(--accessite-navy); }
.accessite-article__body em,
.accessite-article__body i { font-style: italic; }

/* — Liens */
.accessite-article__body a:not(.wp-block-button__link) {
	color: var(--accessite-color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.2s ease;
}
.accessite-article__body a:not(.wp-block-button__link):hover {
	color: var(--accessite-color-primary-hover);
}

/* — Listes */
.accessite-article__body ul,
.accessite-article__body ol {
	margin: 0 0 24px;
	padding-left: 24px;
}
.accessite-article__body ul li,
.accessite-article__body ol li {
	margin: 0 0 10px;
	line-height: 1.6;
}
.accessite-article__body ul li::marker { color: var(--accessite-color-primary); }
.accessite-article__body ol li::marker { color: var(--accessite-color-primary); font-weight: 700; }

/* — Citations */
.accessite-article__body blockquote,
.accessite-article__body .wp-block-quote {
	margin: 32px 0;
	padding: 24px 28px;
	background: var(--accessite-beige-soft);
	border-left: 3px solid var(--accessite-color-primary);
	font-size: 18px;
	font-style: italic;
	color: var(--accessite-navy);
	line-height: 1.55;
}
.accessite-article__body blockquote p,
.accessite-article__body .wp-block-quote p {
	margin: 0 0 12px;
}
.accessite-article__body blockquote p:last-child,
.accessite-article__body .wp-block-quote p:last-child { margin-bottom: 0; }
.accessite-article__body blockquote cite,
.accessite-article__body .wp-block-quote cite {
	display: block;
	margin-top: 16px;
	font-size: 14px;
	font-style: normal;
	font-weight: var(--accessite-font-weight-bold);
	color: var(--accessite-color-primary);
	letter-spacing: 0.02em;
}
/* Variante encadré témoignage du HTML maquette (.testi avec mark teal/coral) */

/* — Images dans le contenu */
.accessite-article__body .wp-block-image,
.accessite-article__body figure {
	margin: 32px 0;
}
.accessite-article__body .wp-block-image img,
.accessite-article__body figure img {
	max-width: 100%;
	height: auto;
	display: block;
}
.accessite-article__body figcaption,
.accessite-article__body .wp-block-image figcaption {
	margin-top: 10px;
	font-size: 13px;
	color: var(--accessite-gray-700);
	font-style: italic;
	text-align: left;
}
.accessite-article__body .wp-block-image.alignleft { float: left; margin: 8px 24px 8px 0; max-width: 50%; }
.accessite-article__body .wp-block-image.alignright { float: right; margin: 8px 0 8px 24px; max-width: 50%; }
.accessite-article__body .wp-block-image.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }

/* — Boutons Gutenberg */
.accessite-article__body .wp-block-buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 32px 0;
}
.accessite-article__body .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 13px 26px;
	background: var(--accessite-color-primary);
	color: var(--wp--preset--color--white, #fff);
	font-size: 16px;
	font-weight: var(--accessite-font-weight-bold);
	line-height: 1;
	border-radius: var(--accessite-radius-pill);
	text-decoration: none;
	transition: background 0.2s ease;
}
.accessite-article__body .wp-block-button__link:hover { background: var(--accessite-color-primary-hover); }
.accessite-article__body .is-style-outline .wp-block-button__link,
.accessite-article__body .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--accessite-navy);
	border: 1px solid var(--accessite-navy);
}

/* — Tables Gutenberg */
.accessite-article__body .wp-block-table,
.accessite-article__body table {
	width: 100%;
	margin: 24px 0;
	border-collapse: collapse;
	font-size: 15px;
}
.accessite-article__body .wp-block-table th,
.accessite-article__body table th {
	background: var(--accessite-navy);
	color: var(--wp--preset--color--white, #fff);
	padding: 12px 14px;
	text-align: left;
	font-weight: var(--accessite-font-weight-bold);
}
.accessite-article__body .wp-block-table td,
.accessite-article__body table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--accessite-gray);
}

/* — Séparateur Gutenberg */
.accessite-article__body .wp-block-separator,
.accessite-article__body hr {
	margin: 40px 0;
	border: 0;
	height: 1px;
	background: var(--accessite-gray);
}

/* — Code inline + bloc */
.accessite-article__body code {
	padding: 2px 6px;
	background: color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 6%, transparent);
	border-radius: 4px;
	font-size: 0.9em;
}
.accessite-article__body pre {
	padding: 16px;
	background: var(--accessite-navy);
	color: var(--wp--preset--color--white, #fff);
	border-radius: 8px;
	overflow-x: auto;
	font-size: 14px;
	line-height: 1.5;
}
.accessite-article__body pre code { background: transparent; padding: 0; color: inherit; }

/* — Embeds (vidéos / iframes) */
.accessite-article__body .wp-block-embed,
.accessite-article__body iframe {
	max-width: 100%;
	margin: 24px 0;
}

/* ============================================================
 * 4. NAVIGATION ARTICLE (Previous / Next)
 * ============================================================ */
.accessite-article__nav {
	margin-top: 56px;
	padding-top: 32px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.accessite-article__nav-link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 24px;
	background: var(--wp--preset--color--white, #fff);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--navy, rgb(26,42,75)) 10%, transparent);
	border-radius: 12px;
	text-decoration: none;
	color: var(--accessite-navy);
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.accessite-article__nav-link:hover {
	border-color: var(--accessite-color-primary);
	transform: translateY(-2px);
}
.accessite-article__nav-link--next { text-align: right; }
.accessite-article__nav-label {
	font-size: 12px;
	font-weight: var(--accessite-font-weight-bold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accessite-color-primary);
}
.accessite-article__nav-title {
	font-size: 15px;
	font-weight: var(--accessite-font-weight-bold);
	line-height: 1.35;
	color: var(--accessite-navy);
}

/* ============================================================
 * 5. MOBILE — alignement maquette Article-Mobile-375.html
 *    DESKTOP FIGÉ. Règles ≤ 700px uniquement.
 * ============================================================ */
@media (max-width: 1100px) {
	.accessite-article__title { font-size: 36px; }
}

@media (max-width: 700px) {
	.accessite-article { padding: 40px 0 56px; }
	.accessite-article__inner { padding: 0 20px; max-width: 100%; }
	.accessite-article__header { margin-bottom: 24px; gap: 16px; }
	.accessite-article__title {
		font-size: 28px;
		line-height: 1.15;
	}
	.accessite-article__meta {
		font-size: 12px;
		gap: 12px;
	}
	.accessite-article__meta > * + *::before { margin-right: 12px; }

	.accessite-article__featured { margin: 0 0 28px; }
	.accessite-article__featured img { max-height: 280px; }

	.accessite-article__body { font-size: 16px; line-height: 1.6; }
	.accessite-article__body > * { margin: 0 0 20px; }
	.accessite-article__body h2 { margin: 36px 0 16px; font-size: 22px; }
	.accessite-article__body h3 { margin: 28px 0 12px; font-size: 19px; }
	.accessite-article__body h4 { margin: 24px 0 10px; font-size: 17px; }

	.accessite-article__body blockquote,
.accessite-article__body .wp-block-quote {
		margin: 24px 0;
		padding: 20px;
		font-size: 16px;
	}

	.accessite-article__body .wp-block-image,
	.accessite-article__body figure { margin: 24px 0; }
	.accessite-article__body .wp-block-image.alignleft,
	.accessite-article__body .wp-block-image.alignright {
		float: none;
		margin: 24px 0;
		max-width: 100%;
	}

	.accessite-article__body .wp-block-buttons { flex-direction: column; align-items: stretch; gap: 12px; }
	.accessite-article__body .wp-block-button__link { width: 100%; text-align: center; }

	.accessite-article__body .wp-block-table { font-size: 14px; }
	.accessite-article__body .wp-block-table th,
	.accessite-article__body .wp-block-table td { padding: 8px 10px; }

	/* Navigation article : empilée sur mobile */
	.accessite-article__nav {
		margin-top: 40px;
		padding-top: 24px;
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.accessite-article__nav-link { padding: 16px 18px; }
	.accessite-article__nav-link--next { text-align: left; }
	.accessite-article__nav-title { font-size: 14px; }
}

/* ==========================================================================
 * Newsletter
 * ========================================================================== */
/*
 * Accessite Child — Bloc Newsletter (template-parts/global/newsletter.php).
 * Calé pixel-près sur la maquette Figma (refonte 2026).
 *
 * Bandeau navy partagé entre les pages.
 * 2 colonnes 485px : intro (sur-titre + titre 64px 300/700 teal + para)
 *                  / form (input + submit + RGPD + legal).
 *
 * Specs Figma :
 *   - Container : bg var(--wp--preset--color--navy, #1A2A4B) / padding-top 60 / padding-left 48 / padding-right 42
 *   - Intro 485px / Form 485px / gap 289px (788-485-14 = 289)
 *   - Sur-titre NEWSLETTER : var(--wp--preset--color--fond, #FFFFFF) / 12px / 700 / line-height 18 / uppercase
 *   - Titre : 64px / line-height 72 / weight 300 (RECEVOIR) + 700 teal (NOTRE...)
 *   - Paragraphe : white / 14px / Inter / 400 / line-height 20
 *   - Input email : 485x53 / outline 1px white outline-offset -1px / radius 24.5
 *                   placeholder white 14px Inter 400
 *   - Submit : 485x53 / teal var(--wp--preset--color--teal, #38B6AB) / radius 24.5 / white 14px Inter 500 lh 21 / centré
 *   - RGPD : checkbox 13x13 / border 1px white / texte white 12px Inter 500 lh 18
 *   - Legal : var(--wp--preset--color--gray, #CBCBCB) / 11px Inter / 400 / line-height 16.5
 */

/* ---- Intro (colonne gauche) ---- */
/* Sheet modifs L75 : titre sur 2 lignes (pas 3) — "NOTRE NEWSLETTER" ne doit
   jamais se couper, on force white-space: nowrap pour le garder sur 1 ligne. */

/* ---- Form (colonne droite) ---- */

/* Sheet modifs L76 : champ email — fond bleu (navy hérité de la section),
   AUCUN effet hover/focus/active (suppression du fond blanc et du change de
   bordure), border-radius pill conservé (24.5px). */
/* Pas de hover/focus/active — neutralisation totale des effets utilisateur. */

/* Gravity Forms harmonisation (au cas où) — mêmes neutralisations qu'au-dessus. */

/* ============================================================
 * Responsive
 * ============================================================ */

/* ==========================================================================
 * Notre approche : méthode ACCESS, lettre, mot et description alignés sur la même ligne de base (bas du texte).
 * L'alignement « par le bas » de l'éditeur aligne les boîtes, pas le texte : on aligne ici sur la dernière ligne de base.
 * ========================================================================== */
/* Bloc aligné à gauche sur le titre de section : le conteneur avait une largeur fixe de 1355px centrée (débordait à gauche). */
.approche-methode-figma:not(#_) { align-items: stretch; }
.approche-methode-figma > :first-child:not(#_) { width: 100%; max-width: 100%; }
.approche-methode-figma .methode-figma__row:not(#_) { padding-left: 0; padding-right: 0; }
.approche-methode-figma .methode-figma__row:not(#_) { align-items: last baseline; }
.approche-methode-figma .methode-figma__row > :first-child:not(#_){ line-height: 1; }
.approche-methode-figma .methode-figma__row > :last-child:not(#_) { align-items: last baseline; }
/* Retour à la ligne ajouté en tête de description pour caler le texte à la main : inutile désormais. */
.approche-methode-figma .methode-figma__row p > br:first-child { display: none; }
@media (max-width: 700px) {
	/* Mobile : la description passe sous le mot, la lettre s'aligne sur le mot. */
	.approche-methode-figma .methode-figma__row:not(#_) { align-items: first baseline; }
}