/*
Theme Name: AdPremier
Theme URI: https://adpremier.fr
Author: L2C Group
Author URI: https://l2c.tech
Description: Thème enfant de Twenty Twenty-Five pour AdPremier. Base stable : tokens de design (couleurs, typographie, espacements) pilotés par theme.json, sections livrées en compositions Gutenberg natives. Aucune dépendance externe, aucun constructeur de page.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.23.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: adpremier
Tags: block-templates, full-site-editing, custom-colors, custom-menu, editor-style, wide-blocks
*/

/* =========================================================================
   AdPremier — styles de sections
   =========================================================================
   Chaque règle est accrochée à une classe « ap-* » posée sur un bloc Gutenberg
   via le panneau Avancé > Classe(s) CSS additionnelle(s). Le contenu reste donc
   entièrement éditable dans l'éditeur : ce fichier ne fait que l'habiller.
   ====================================================================== */

:root {
	--ap-encre: #0e0a1a;
	--ap-encre-elevee: #14111e;
	--ap-violet-premier: #4a1aa8;
	--ap-ultraviolet: #8161ff;
	--ap-orchidee: #b856e1;
	--ap-pervenche: #cec2ff;
	--ap-lilas: #e0d9ff;
	--ap-brume: #ebe3fc;
	--ap-voile: #c9c2da;
	--ap-ivoire: #f6f5f3;
	--ap-ardoise: #6e6688;
	--ap-liseret: #241b45;
	--ap-max: 1520px;
	--ap-gouttiere: 20px;
	/* Fond « nuit » : aplat encre. Il est appliqué à l'en-tête et au hero, qui
	   doivent se raccorder sans couture — un dégradé vertical se calculerait sur
	   la hauteur de chaque bloc et créerait une ligne de rupture visible. */
	--ap-nuit: #0e0a1a;
}

/* -------------------------------------------------------------------------
   Fondations
   ---------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
}

.ap-sombre {
	background: var(--ap-nuit);
	color: #fff;
}

.ap-sombre :where(h1, h2, h3, h4, p, li) {
	color: inherit;
}

/* Bandeau à fond sombre : petit motif de points, comme sur la maquette. */
.ap-motif {
	position: relative;
	isolation: isolate;
}

.ap-motif::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 26px 26px;
	pointer-events: none;
}

/* Emplacement de visuel non encore fourni : la mise en page reste juste et le
   trou se voit immédiatement dans l'éditeur comme sur le site. */
.ap-emplacement {
	display: grid;
	place-items: center;
	width: 100%;
	border-radius: 24px;
	background: rgba(14, 10, 26, 0.06);
	border: 1px dashed rgba(14, 10, 26, 0.18);
	color: rgba(14, 10, 26, 0.45);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	padding: 12px;
}

.ap-sombre .ap-emplacement,
.ap-hero .ap-emplacement,
.ap-footer .ap-emplacement {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.45);
}

/* Conteneur interne commun aux sections pleine largeur. */
.ap-conteneur {
	width: 100%;
	max-width: var(--ap-max);
	margin-inline: auto;
	padding-inline: var(--ap-gouttiere);
}

/* -------------------------------------------------------------------------
   Étiquette de section (pilule)
   ---------------------------------------------------------------------- */

.ap-etiquette {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0;
	width: fit-content;
}

.ap-etiquette--claire {
	background: var(--ap-brume);
	color: var(--ap-violet-premier);
}

.ap-etiquette--sombre {
	background: var(--ap-violet-premier);
	color: var(--ap-voile);
}

/* -------------------------------------------------------------------------
   Boutons « pilule » avec pastille fléchée
   ---------------------------------------------------------------------- */

.ap-pilule .wp-block-button__link,
a.ap-pilule {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	padding: 5px 5px 5px 30px;
	border-radius: 100px;
	background: var(--ap-ultraviolet);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--ap-duree-survol) var(--ap-courbe);
}

.ap-pilule .wp-block-button__link::after,
a.ap-pilule::after {
	content: "→";
	display: grid;
	place-items: center;
	width: 41px;
	height: 41px;
	border-radius: 60px;
	background: var(--ap-encre);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	transition: background-color var(--ap-duree-survol) var(--ap-courbe);
}

/* Au survol, la pilule et la pastille échangent leurs couleurs : le fond
   passe à l'encre, la pastille à l'ultraviolet. Le texte reste blanc dans les
   deux états, c'est ce qui rend l'inversion lisible. */
.ap-pilule .wp-block-button__link:hover,
.ap-pilule .wp-block-button__link:focus-visible,
a.ap-pilule:hover,
a.ap-pilule:focus-visible {
	background: var(--ap-encre);
}

.ap-pilule .wp-block-button__link:hover::after,
.ap-pilule .wp-block-button__link:focus-visible::after,
a.ap-pilule:hover::after,
a.ap-pilule:focus-visible::after {
	background: var(--ap-ultraviolet);
}

/* Variante pleine (CTA final) : sans pastille. */
.ap-bouton-plein .wp-block-button__link {
	background: #fff;
	color: var(--ap-violet-premier);
	border: 1.5px solid #fff;
	border-radius: 100px;
	padding: 16px 30px;
	font-weight: 700;
	transition: background-color var(--ap-duree-survol) var(--ap-courbe), color var(--ap-duree-survol) var(--ap-courbe);
}

/* Inversion, comme la pilule : le plein devient contour. */
.ap-bouton-plein .wp-block-button__link:hover,
.ap-bouton-plein .wp-block-button__link:focus-visible {
	background: transparent;
	color: #fff;
}

.ap-bouton-ligne .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1.5px solid #fff;
	border-radius: 100px;
	padding: 16px 30px;
	font-weight: 700;
	transition: background-color var(--ap-duree-survol) var(--ap-courbe), color var(--ap-duree-survol) var(--ap-courbe);
}

/* Et le contour devient plein. */
.ap-bouton-ligne .wp-block-button__link:hover,
.ap-bouton-ligne .wp-block-button__link:focus-visible {
	background: #fff;
	color: var(--ap-violet-premier);
}

/* -------------------------------------------------------------------------
   1. Barre utilitaire
   ---------------------------------------------------------------------- */

.ap-barre-utilitaire {
	background: var(--ap-violet-premier);
	font-size: 12px;
	line-height: 1.2;
}

.ap-barre-utilitaire .wp-block-group {
	align-items: center;
}

.ap-barre-utilitaire p {
	margin: 0;
	color: #b9b2cc;
	font-weight: 500;
	font-size: 12px;
}

.ap-barre-utilitaire .ap-espace-client,
.ap-barre-utilitaire .ap-espace-client a {
	color: var(--ap-orchidee);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   2. En-tête / navigation
   ---------------------------------------------------------------------- */

.ap-entete {
	background: var(--ap-nuit);
	position: relative;
	isolation: isolate;
	/* L'en-tête forme son propre contexte d'empilement (pour le motif de
	   points) : sans z-index, le méga-menu resterait prisonnier derrière la
	   section suivante, elle aussi positionnée. */
	z-index: 50;
}

.ap-entete::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 26px 26px;
	pointer-events: none;
}

.ap-entete .ap-logo img {
	width: 161px;
	height: auto;
	max-width: 100%;
	display: block;
}

.ap-menu {
	display: flex;
	align-items: center;
	gap: 30px;
	height: 54px;
	padding: 0 40px;
	border-radius: 60px;
	background: var(--ap-brume);
}

.ap-menu .wp-block-navigation__container {
	gap: 30px;
}

.ap-menu .wp-block-navigation-item__content {
	color: var(--ap-encre);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

.ap-menu .wp-block-navigation-item__content:hover {
	color: var(--ap-violet-premier);
	text-decoration: none;
}

.ap-menu .wp-block-navigation__submenu-container {
	border-radius: 16px;
	border: 0;
	padding: 10px;
	background: var(--ap-brume);
	box-shadow: 0 18px 40px rgba(14, 10, 26, 0.18);
}

/* -------------------------------------------------------------------------
   3. Hero
   ---------------------------------------------------------------------- */

.ap-hero {
	background: var(--ap-nuit);
	color: #fff;
	padding-block: 20px 60px;
	position: relative;
	isolation: isolate;
}

.ap-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 26px 26px;
	pointer-events: none;
}

.ap-hero__titre {
	font-size: clamp(40px, 4.8vw, 72px);
	font-weight: 600;
	line-height: 0.99;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0;
	max-width: 800px;
}

.ap-hero__titre .ap-accent,
.ap-accent {
	color: var(--ap-orchidee);
}

/* Bloc de réassurance : avatars + notes plateformes. */
.ap-reassurance {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

/* Pastilles d'avis. Le disque blanc et son ombre sont posés en CSS : les deux
   premiers logos sont fournis nus par Figma, les deux suivants embarquent déjà
   leur disque et viennent simplement le recouvrir. Diamètre 95 px et
   chevauchement de 18 px, comme la maquette. */
.ap-avatars {
	display: flex;
	align-items: center;
	isolation: isolate;
}

.ap-avatars .wp-block-image {
	position: relative;
	margin: 0 -18px 0 0;
	width: 95px;
	height: 95px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
	display: grid;
	place-items: center;
}

.ap-avatars .wp-block-image:nth-child(4) {
	background: #f2f2f2;
}

/* Dans la maquette, chaque pastille passe devant la suivante. */
.ap-avatars .wp-block-image:nth-child(1) { z-index: 4; }
.ap-avatars .wp-block-image:nth-child(2) { z-index: 3; }
.ap-avatars .wp-block-image:nth-child(3) { z-index: 2; }
.ap-avatars .wp-block-image:nth-child(4) { z-index: 1; }

.ap-avatars .wp-block-image:last-child {
	margin-right: 0;
}

/* Logos nus : posés au centre du disque, chacun à sa taille de maquette. */
.ap-avatars .wp-block-image img {
	max-width: none;
	height: auto;
	margin: 0;
	display: block;
}

.ap-avatars .wp-block-image:nth-child(1) img { width: 44px; }
.ap-avatars .wp-block-image:nth-child(2) img { width: 52px; }

/* Logos qui embarquent leur propre disque : ils occupent toute la pastille. */
.ap-avatars .wp-block-image:nth-child(3) img,
.ap-avatars .wp-block-image:nth-child(4) img {
	width: 95px;
	height: 95px;
	border-radius: 50%;
}

.ap-avatars > *:last-child img {
	margin-right: 0;
}

.ap-notes {
	display: flex;
	align-items: stretch;
	gap: 17px;
}

.ap-note {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding-inline: 8px;
	text-align: center;
}

.ap-note + .ap-note {
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.ap-note__valeur {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	line-height: 0.99;
	letter-spacing: -0.04em;
	color: #fff;
}

.ap-note__valeur small {
	font-size: 20px;
	font-weight: 400;
}

.ap-note__source {
	margin: 0;
	font-size: 16px;
	line-height: 0.99;
	color: var(--ap-voile);
}

.ap-note__etoiles {
	margin: 0;
	font-size: 13px;
	letter-spacing: 2px;
	color: #ffcb45;
	line-height: 1;
}

.ap-mention-top {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--ap-voile);
}

/* Cartes de chiffres du hero. */
.ap-carte-data {
	position: relative;
	border-radius: 24px;
	padding: 24px;
	overflow: hidden;
	min-height: 185px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.ap-carte-data--leads {
	background: var(--ap-ultraviolet);
}

.ap-carte-data--ventes {
	background: var(--ap-orchidee);
	min-height: 266px;
}

.ap-carte-data__intitule {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ap-lilas);
}

.ap-carte-data--ventes .ap-carte-data__intitule {
	color: var(--ap-pervenche);
}

.ap-carte-data__valeur {
	margin: 0;
	font-size: clamp(44px, 5vw, 72px);
	font-weight: 600;
	line-height: 0.99;
	letter-spacing: -0.02em;
	color: #fff;
}

/* Bloc visuel du hero : nuage de bulles à gauche, photo et cartes à droite. */
.ap-hero__visuel {
	display: grid;
	grid-template-columns: minmax(0, 516px) minmax(0, 1fr);
	gap: 30px;
	align-items: end;
}

.ap-hero__bulles img,
.ap-hero__bulles .ap-emplacement {
	width: 100%;
	height: auto;
	display: block;
}

.ap-hero__media {
	position: relative;
}

.ap-hero__media > .wp-block-image,
.ap-hero__media > .ap-emplacement {
	margin: 0;
}

.ap-hero__media > .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 24px;
}

/* Les deux cartes chiffrées sont sorties du flux. Sans cette remise à zéro,
   le blockGap du groupe parent leur applique une marge haute de 30px qui les
   décolle des angles de la photo (la carte « leads » descendait de 30px). */
.ap-hero__media .ap-carte-data {
	margin: 0;
}

.ap-hero__media .ap-carte-data--leads {
	position: absolute;
	top: 0;
	left: 0;
	width: min(327px, 42%);
}

.ap-hero__media .ap-carte-data--ventes {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(292px, 38%);
}

/* Hero en intermédiaire et en mobile : voir « Responsive — deux paliers »,
   en fin de fichier. */

/* -------------------------------------------------------------------------
   4. Bandeau « À propos »
   ---------------------------------------------------------------------- */

.ap-bandeau {
	padding-block: 90px 20px;
}

.ap-bandeau__texte {
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ap-encre);
	margin: 0;
}

/* Les visuels exportés de Figma portent déjà leur silhouette en gradins
   (fond transparent). Les recouper en CSS ajoutait une seconde entaille, au
   mauvais endroit : on les laisse s'afficher tels quels. */
.ap-visuel-decoupe img {
	width: 100%;
	height: auto;
	display: block;
}

/* -------------------------------------------------------------------------
   5. Logos clients
   ---------------------------------------------------------------------- */

/* Bandeau de références : ruban défilant en boucle. La piste est dupliquée à
   l'affichage (voir le script du thème) ; l'animation la décale exactement de
   la largeur d'un jeu de logos, si bien que la répétition est invisible. */
.ap-logos-clients {
	padding-block: 30px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ap-logos-clients .wp-block-image {
	margin: 0;
	flex: 0 0 auto;
	width: 166px;
	display: grid;
	place-items: center;
	height: 94px;
}

/* Les logos clients sont en couleur dans la maquette : pas de niveaux de gris. */
.ap-logos-clients .wp-block-image img {
	max-width: 152px;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* -------------------------------------------------------------------------
   6. Nos expertises
   ---------------------------------------------------------------------- */

.ap-expertises {
	padding-block: 90px;
}

.ap-expertises__titre {
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0;
	max-width: 616px;
}

.ap-carte-stat {
	background: var(--ap-orchidee);
	border-radius: 24px;
	padding: 24px 22px;
	min-height: 208px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	max-width: 224px;
}

.ap-carte-stat__valeur {
	margin: 0;
	font-size: clamp(44px, 5vw, 72px);
	font-weight: 600;
	line-height: 0.99;
	letter-spacing: -0.02em;
	color: #fff;
}

.ap-carte-stat__legende {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ap-lilas);
}

.ap-grille-expertises {
	background: var(--ap-pervenche);
	border-radius: 20px;
	padding: 20px 60px;
}

.ap-grille-expertises .ap-expertise {
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: 90px;
	/* Marge négative compensée par le padding : l'aplat sombre déborde de
	   16px de chaque côté pour respirer, sans décaler le texte au repos. */
	margin: 0 -16px;
	padding: 0 16px;
	border-bottom: 1px solid var(--ap-encre);
	color: var(--ap-encre);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.02em;
	text-decoration: none;
	transition: color var(--ap-duree-survol) var(--ap-courbe), border-color var(--ap-duree-survol) var(--ap-courbe);
}

.ap-grille-expertises .ap-expertise:last-child {
	border-bottom: 0;
}

/* Survol : l'aplat encre est porté par un pseudo-élément afin d'être fondu
   (opacité) sans repeindre la bordure ni faire bouger le libellé. */
.ap-grille-expertises .ap-expertise::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 12px;
	background: var(--ap-encre);
	opacity: 0;
	transition: opacity var(--ap-duree-survol) var(--ap-courbe);
}

.ap-grille-expertises .ap-expertise:hover,
.ap-grille-expertises .ap-expertise:focus-visible {
	color: #fff;
	border-bottom-color: transparent;
	text-decoration: none;
	outline: none;
}

.ap-grille-expertises .ap-expertise:hover::before,
.ap-grille-expertises .ap-expertise:focus-visible::before {
	opacity: 1;
}

.ap-grille-expertises .ap-expertise::after {
	content: "→";
	font-size: 24px;
	line-height: 1;
}

/* -------------------------------------------------------------------------
   7. Méthode Lean Premier
   ---------------------------------------------------------------------- */

.ap-methode {
	padding-block: 90px;
}

.ap-methode__titre {
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-align: center;
	max-width: 660px;
	margin-inline: auto;
}

.ap-methode__item {
	border-bottom: 1px solid var(--ap-pervenche);
	padding-block: 30px;
}

.ap-methode__item > summary {
	display: flex;
	align-items: center;
	gap: 40px;
	cursor: pointer;
	list-style: none;
	padding-inline: 20px;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #1a1917;
}

.ap-methode__item > summary::-webkit-details-marker {
	display: none;
}

.ap-methode__item > summary::after {
	content: "→";
	margin-left: auto;
	font-size: 24px;
	line-height: 1;
	transform: rotate(90deg);
	transition: transform var(--ap-duree-etat) var(--ap-courbe);
}

.ap-methode__item[open] > summary::after {
	transform: rotate(-90deg);
}

.ap-methode__reponse {
	padding: 20px 20px 0 122px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #1a1917;
	max-width: 820px;
}

.ap-methode__reponse p {
	margin: 0;
}

/* -------------------------------------------------------------------------
   8. Témoignage
   ---------------------------------------------------------------------- */

.ap-temoignage {
	padding-block: 100px;
}

.ap-temoignage__etoiles {
	margin: 0;
	font-size: 20px;
	letter-spacing: 6px;
	color: var(--ap-orchidee);
	line-height: 1;
}

.ap-temoignage__citation {
	font-size: clamp(26px, 2.8vw, 40px);
	font-style: italic;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0;
	max-width: 670px;
}

.ap-temoignage__nom {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #fff;
}

.ap-temoignage__role {
	margin: 0;
	font-size: 14px;
	color: var(--ap-voile);
}

/* -------------------------------------------------------------------------
   9. Certifications
   ---------------------------------------------------------------------- */

.ap-certifications {
	background: var(--ap-pervenche);
	padding-block: 90px 60px;
}

.ap-certifications__titre {
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 482px;
}

.ap-certifications__texte {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	max-width: 506px;
}

.ap-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 26px 0;
	padding-block: 30px;
	max-width: 549px;
}

.ap-badges .wp-block-image {
	margin: 0;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
}

/* Chaque badge a sa largeur propre dans la maquette : ce sont ces largeurs
   qui produisent la répartition en 3 puis 4 sur une réserve de 549 px. */
.ap-badges .wp-block-image:nth-child(1),
.ap-badges .wp-block-image:nth-child(2),
.ap-badges .wp-block-image:nth-child(3) { width: 175px; }
.ap-badges .wp-block-image:nth-child(4) { width: 150px; }
.ap-badges .wp-block-image:nth-child(5) { width: 126px; }
.ap-badges .wp-block-image:nth-child(6) { width: 151px; }
.ap-badges .wp-block-image:nth-child(7) { width: 121px; }

.ap-badges .wp-block-image img {
	max-width: 122px;
	max-height: 122px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* -------------------------------------------------------------------------
   10. CTA final
   ---------------------------------------------------------------------- */

/* La bascule de fond se règle par deux variables : la moitié haute prend la
   couleur de la section qui précède, la moitié basse celle du pied de page. */
.ap-cta {
	--ap-cta-haut: var(--ap-pervenche);
	--ap-cta-bas: var(--ap-encre);
	background: linear-gradient(180deg, var(--ap-cta-haut) 0 50%, var(--ap-cta-bas) 50% 100%);
	padding: 30px 100px;
}

/* La carte reprend la silhouette en gradins de la maquette. Elle est composée
   de deux rectangles arrondis superposés plutôt que d'un clip-path : les
   arrondis des angles sont ainsi conservés. Leur rencontre forme en revanche
   deux angles rentrants, que les congés ci-dessous viennent adoucir. */
.ap-cta__carte {
	--ap-gradin: 30px;
	--ap-gradin-tuile: calc(var(--ap-gradin) + 1px);
	max-width: 891px;
	margin-inline: auto;
	padding: 90px 60px;
	text-align: center;
	position: relative;
	isolation: isolate;

	/* Les deux congés. Chaque tuile fait un rayon de côté — plus 1 px, qui
	   recouvre les rectangles et évite toute couture — et ne garde que la
	   matière située hors du disque : c'est exactement le quart de lune qui
	   manquait à l'angle rentrant.

	   Un pourcentage de background-position se mesure sur la place libre,
	   c'est-à-dire le conteneur moins la tuile ; la part de tuile ainsi
	   perdue est rendue par le terme en calc() qui suit. */
	background:
		radial-gradient(circle var(--ap-gradin) at 100% 0, transparent calc(100% - 0.75px), var(--ap-violet-premier) 100%)
			calc(91% + 0.91 * var(--ap-gradin-tuile) - 1px)
			calc(17.5% + 0.175 * var(--ap-gradin-tuile) - var(--ap-gradin))
			/ var(--ap-gradin-tuile) var(--ap-gradin-tuile) no-repeat,
		radial-gradient(circle var(--ap-gradin) at 0 100%, transparent calc(100% - 0.75px), var(--ap-violet-premier) 100%)
			calc(11.5% + 0.115 * var(--ap-gradin-tuile) - var(--ap-gradin))
			calc(76.5% + 0.765 * var(--ap-gradin-tuile) - 1px)
			/ var(--ap-gradin-tuile) var(--ap-gradin-tuile) no-repeat;
}

.ap-cta__carte::before,
.ap-cta__carte::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: var(--ap-gradin);
	background: var(--ap-violet-premier);
	pointer-events: none;
}

.ap-cta__carte::before {
	inset: 0 9% 23.5% 0;
}

.ap-cta__carte::after {
	inset: 17.5% 0 0 11.5%;
}

.ap-cta__carte > * {
	position: relative;
}

.ap-cta__titre {
	margin: 0;
	font-size: clamp(36px, 4.4vw, 64px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #fff;
}

.ap-cta__texte {
	margin: 0 auto;
	max-width: 515px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: #e4d9ff;
}

/* -------------------------------------------------------------------------
   11. Pied de page
   ---------------------------------------------------------------------- */

.ap-footer {
	background: var(--ap-encre);
	color: #fff;
	padding: 72px 100px 36px;
	overflow: hidden;
}

/* Le SVG exporté ajoute au-dessus et au-dessous du logotype deux bandes de la
   couleur du pied de page : invisibles, mais encombrantes. On les résorbe par
   une marge négative plutôt qu'en rognant l'image, ce qui mordrait sur les
   lettres. Les marges en pourcentage se calculent sur la largeur, égale ici à
   celle du logo — d'où ces valeurs. */
.ap-footer__logo {
	overflow: hidden;
}

.ap-footer__logo img {
	width: 100%;
	height: auto;
	display: block;
	margin-block: -5.6% -5.8%;
}

.ap-footer__colonne > p:first-child,
.ap-footer__intitule {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ap-ardoise);
}

.ap-footer__liens {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ap-footer__liens li,
.ap-footer__liens a {
	font-size: 14px;
	color: var(--ap-voile);
	text-decoration: none;
}

.ap-footer__liens a:hover {
	color: #fff;
	text-decoration: none;
}

.ap-newsletter {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 6px 0 20px;
	border-radius: 100px;
	background: #1a1430;
	border: 1px solid var(--ap-liseret);
}

.ap-newsletter input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: 0;
	color: #fff;
	font-size: 13px;
}

.ap-newsletter input[type="email"]::placeholder {
	color: var(--ap-ardoise);
}

.ap-newsletter button,
.ap-newsletter .wp-block-button__link {
	flex: 0 0 auto;
	background: #6a28f0;
	color: #fff;
	border: 0;
	border-radius: 100px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.ap-reseaux {
	display: flex;
	align-items: center;
	gap: 20px;
}

.ap-reseaux .wp-block-image {
	margin: 0;
}

.ap-reseaux img {
	width: 32px;
	height: 32px;
	display: block;
}

.ap-ecosysteme {
	border-top: 1px solid var(--ap-liseret);
	padding-top: 60px;
}

.ap-ecosysteme .ap-filiales .wp-block-image {
	margin: 0;
	display: grid;
	place-items: center;
	height: 120px;
}

.ap-ecosysteme .ap-filiales img {
	max-width: 132px;
	max-height: 73px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.ap-mentions {
	border-top: 1px solid var(--ap-liseret);
	padding-block: 26px;
	font-size: 13px;
	color: var(--ap-ardoise);
}

.ap-mentions p {
	margin: 0;
	font-size: 13px;
	color: var(--ap-ardoise);
}

/* =========================================================================
   Compléments : classes utilisées par les compositions
   ====================================================================== */

/* Accessibilité : libellé réservé aux lecteurs d'écran. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Étiquette centrée (section Méthode). Une boîte inline-flex ne se centre pas
   par marges automatiques : on la passe en flex pour que « auto » opère. */
.ap-etiquette--centree {
	display: flex;
	margin-inline: auto;
}

/* Piste du ruban. Sa largeur suit son contenu ; la durée et la distance sont
   posées par le script en fonction de la largeur réelle d'un jeu de logos,
   pour que la vitesse reste constante quel que soit le nombre de logos. */
.ap-bande-logos {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 32px;
	width: max-content;
	max-width: none;
	animation: ap-defilement var(--ap-defilement-duree, 48s) linear infinite;
	will-change: transform;
}

/* Le ruban s'arrête au survol : on peut lire un logo au passage. */
.ap-logos-clients:hover .ap-bande-logos,
.ap-logos-clients:focus-within .ap-bande-logos {
	animation-play-state: paused;
}

@keyframes ap-defilement {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(calc(-1 * var(--ap-defilement-distance, 50%)), 0, 0); }
}

/* Sans le script, ou si l'on préfère les animations réduites : les logos
   reprennent une disposition fixe et centrée, sans rien perdre. */
.ap-bande-logos:not([data-ap-ruban]) {
	animation: none;
	flex-wrap: wrap;
	width: auto;
	justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
	.ap-bande-logos {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
	}
}

/* Section expertises : visuel + carte chiffrée. */
.ap-bloc-stat {
	align-items: stretch;
}

.ap-bloc-stat__visuel {
	flex: 1 1 320px;
	min-width: 0;
}

.ap-bloc-stat__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ap-expertise-ligne {
	margin: 0;
}

.ap-expertise-ligne .ap-expertise {
	color: var(--ap-encre);
}

/* Accordéon de la méthode : numérotation automatique. */
.ap-methode__liste {
	counter-reset: ap-etape;
}

.ap-methode__item {
	background: transparent;
	padding-block: 30px;
}

.ap-methode__item > summary {
	counter-increment: ap-etape;
	font-weight: 500;
}

.ap-methode__item > summary::before {
	content: counter(ap-etape, decimal-leading-zero);
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background: var(--ap-lilas);
	color: var(--ap-violet-premier);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.02em;
}

/* Pied de page : colonnes et écosystème. */
.ap-footer__colonnes {
	gap: 40px;
}

.ap-footer__accroche {
	margin: 0;
	font-size: 14px;
	line-height: 1.48;
	color: var(--ap-voile);
}

.ap-footer__villes {
	margin: 0;
	font-size: 13px;
	color: #8e86a6;
}

.ap-ecosysteme__entete {
	justify-content: center;
}

.ap-ecosysteme__mention {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
}

.ap-ecosysteme__logo img {
	width: 90px;
	height: auto;
	display: block;
}

.ap-filiales {
	width: 100%;
}

.ap-footer .ap-emplacement {
	min-height: 60px;
}

/* -------------------------------------------------------------------------
   Adaptatif
   ---------------------------------------------------------------------- */

@media (max-width: 1279px) {
	.ap-grille-expertises {
		padding-inline: 30px;
	}
}

@media (max-width: 781px) {
	.ap-methode__item > summary {
		gap: 20px;
		font-size: 20px;
		padding-inline: 0;
	}

	.ap-methode__item > summary::before {
		width: 46px;
		height: 46px;
		font-size: 18px;
	}

	.ap-methode__reponse {
		padding-left: 66px;
	}

	.ap-grille-expertises .ap-expertise {
		height: 72px;
		font-size: 20px;
	}

	.ap-cta__carte {
		--ap-gradin: 24px;
		padding: 50px 24px;
		border-radius: 24px;
	}

	.ap-notes {
		flex-wrap: wrap;
		justify-content: center;
	}

	.ap-avatars .wp-block-image {
		width: 64px;
		height: 64px;
		margin-right: -12px;
	}

	.ap-avatars .wp-block-image img {
		width: 31px;
	}

	.ap-avatars .wp-block-image:nth-child(3) img,
	.ap-avatars .wp-block-image:nth-child(4) img {
		width: 64px;
		height: 64px;
	}

	.ap-carte-stat {
		max-width: none;
	}

	.ap-badges .wp-block-image {
		width: 46%;
	}

	.ap-ecosysteme .ap-filiales .wp-block-image {
		height: 84px;
	}
}

/* -------------------------------------------------------------------------
   Raccord des sections
   ----------------------------------------------------------------------
   WordPress insère un écart (blockGap) entre les blocs de premier niveau.
   Chaque section gère déjà ses propres marges internes : on supprime cet
   écart pour que les aplats de couleur se touchent, comme sur la maquette. */

.wp-site-blocks > * + *,
.wp-site-blocks > main.wp-block-group > * + *,
.wp-site-blocks main .wp-block-post-content > * + * {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
   Reprises de fidélité — comparaison maquette / rendu
   ---------------------------------------------------------------------- */

/* Entrées de menu qui ouvrent un sous-menu. Le chevron est dessiné en CSS :
   le caractère flèche bascule sur la police emoji et ressort en couleur. */
.ap-menu .ap-menu-drop .wp-block-navigation-item__content::after {
	content: "";
	display: inline-block;
	margin-left: 7px;
	vertical-align: middle;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

/* Pictogrammes des cartes chiffrées. */
.ap-carte-data .ap-carte-data__picto {
	position: absolute;
	top: 18px;
	right: 18px;
	margin: 0;
	pointer-events: none;
}

.ap-carte-data .ap-carte-data__picto img {
	width: 47px;
	height: 47px;
	display: block;
}

.ap-carte-stat .ap-carte-stat__picto {
	margin: 0;
}

.ap-carte-stat .ap-carte-stat__picto img {
	width: 45px;
	height: 45px;
	display: block;
}

/* Carte « Volume de leads » : le chiffre et l'histogramme partagent la
   dernière ligne, comme sur la maquette. */
.ap-carte-data.ap-carte-data--leads {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: end;
	column-gap: 20px;
	row-gap: 12px;
}

.ap-carte-data--leads .ap-carte-data__intitule {
	grid-column: 1 / -1;
	padding-right: 52px;
}

.ap-carte-barres {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 11px;
}

.ap-carte-barres span {
	display: block;
	width: 28px;
	border-radius: 5px;
	background: var(--ap-lilas);
}

.ap-carte-barres span:nth-child(1) { height: 29px; }
.ap-carte-barres span:nth-child(2) { height: 43px; }
.ap-carte-barres span:nth-child(3) { height: 59px; }
.ap-carte-barres span:nth-child(4) { height: 80px; background: #fff; }

/* Carte « Ventes générées » : jauge en bas. */
.ap-carte-jauge {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ap-carte-jauge span {
	display: block;
	height: 16px;
	border-radius: 40px;
}

.ap-carte-jauge span:nth-child(1) { flex: 1 1 auto; background: var(--ap-ivoire); }
.ap-carte-jauge span:nth-child(2) { flex: 0 0 52px; background: var(--ap-lilas); }


/* -------------------------------------------------------------------------
   Rythme vertical dans les colonnes
   ----------------------------------------------------------------------
   Les règles de section ci-dessus remettent les marges des textes à zéro, ce
   qui écrasait aussi l'espacement vertical posé par l'éditeur entre les blocs
   d'une colonne. On le rétablit ici, aux valeurs de la maquette. */

.ap-bandeau .wp-block-column > * + *,
.ap-certifications .wp-block-column > * + *,
.ap-expertises .wp-block-column > * + *:not(.ap-expertise-ligne) {
	margin-block-start: 40px;
}

.ap-temoignage .wp-block-column > * + * {
	margin-block-start: 28px;
}

.ap-cta__carte > * + * {
	margin-block-start: 24px;
}

/* -------------------------------------------------------------------------
   12. Page « L'agence »
   ----------------------------------------------------------------------
   Sections propres à la maquette « A propos - v1 ». Les briques déjà posées
   pour l'accueil (étiquettes, boutons pilule, visuels découpés, carte CTA,
   mur de badges) sont réutilisées telles quelles.
   ---------------------------------------------------------------------- */

/* Titre de section courant : 40px medium, encre. */
.ap-section__titre {
	margin: 0;
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ap-encre);
}

.ap-texte-courant p {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--ap-encre);
}

/* --- Hero ---------------------------------------------------------------- */

.ap-hero-agence__entete {
	align-items: flex-end;
}

.ap-hero-agence__titre {
	flex: 1 1 560px;
	max-width: 764px;
	margin: 0;
	font-size: clamp(34px, 3.6vw, 54px);
	font-weight: 600;
	line-height: 0.99;
	letter-spacing: -0.02em;
	color: #fff;
}

.ap-hero-agence__intro {
	flex: 1 1 320px;
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--ap-voile);
}

.ap-hero-agence__visuel .wp-block-image,
.ap-hero-agence__visuel .ap-emplacement {
	margin: 0;
}

.ap-hero-agence__visuel img {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Notre histoire ------------------------------------------------------ */

.ap-histoire,
.ap-valeurs,
.ap-methode-bandeau {
	padding-block: 90px;
}

/* --- Chiffres clés ------------------------------------------------------- */

/* La section sombre réserve en bas la hauteur dont la carte « certifications »
   a besoin pour chevaucher la bascule vers le fond ivoire (cf. maquette). */
.ap-chiffres {
	padding-block: 90px 310px;
}

.ap-chiffres__titre {
	margin: 0;
	max-width: 753px;
	margin-inline: auto;
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
}

.ap-chiffres__chapeau {
	margin: 0 auto;
	max-width: 753px;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--ap-voile);
}

.ap-chiffre {
	height: 90px;
	border-bottom: 1px solid var(--ap-pervenche);
	gap: 20px;
}

.ap-chiffre__valeur {
	margin: 0;
	font-size: clamp(28px, 2.4vw, 36px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
	white-space: nowrap;
}

.ap-chiffre__legende {
	margin: 0;
	width: 200px;
	flex: 0 0 auto;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
}

/* --- Carte « Nos certifications » ---------------------------------------- */

/* Elle remonte dans la section sombre d'exactement la réserve ménagée plus
   haut, moins le décalage de la maquette : la carte est donc à cheval sur la
   bascule encre / ivoire. */
.ap-certifs-zone {
	margin-top: -310px;
	padding-top: 90px;
	padding-inline: 20px;
}

/* Même silhouette en gradins que la carte CTA : deux rectangles arrondis
   superposés, ce qui préserve les arrondis d'angle (un clip-path les couperait). */
.ap-carte-certifs {
	--ap-gradin: 30px;
	--ap-gradin-tuile: calc(var(--ap-gradin) + 1px);
	position: relative;
	isolation: isolate;
	max-width: 1195px;
	margin-inline: auto;
	min-height: 364px;
	padding: 78px 64px 40px;
	align-items: center;

	/* Congés des deux angles rentrants — même recette que la carte CTA,
	   commentée en détail à la section 10. */
	background:
		radial-gradient(circle var(--ap-gradin) at 100% 0, transparent calc(100% - 0.75px), var(--ap-pervenche) 100%)
			calc(91.3% + 0.913 * var(--ap-gradin-tuile) - 1px)
			calc(19.2% + 0.192 * var(--ap-gradin-tuile) - var(--ap-gradin))
			/ var(--ap-gradin-tuile) var(--ap-gradin-tuile) no-repeat,
		radial-gradient(circle var(--ap-gradin) at 0 100%, transparent calc(100% - 0.75px), var(--ap-pervenche) 100%)
			calc(6.4% + 0.064 * var(--ap-gradin-tuile) - var(--ap-gradin))
			calc(85.8% + 0.858 * var(--ap-gradin-tuile) - 1px)
			/ var(--ap-gradin-tuile) var(--ap-gradin-tuile) no-repeat;
}

.ap-carte-certifs::before,
.ap-carte-certifs::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: var(--ap-gradin);
	background: var(--ap-pervenche);
	pointer-events: none;
}

.ap-carte-certifs::before {
	inset: 0 8.7% 14.2% 0;
}

.ap-carte-certifs::after {
	inset: 19.2% 0 0 6.4%;
}

.ap-carte-certifs__texte {
	flex: 1 1 440px;
	max-width: 508px;
}

.ap-carte-certifs__titre {
	margin: 0;
	font-size: clamp(26px, 2.5vw, 36px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ap-encre);
}

.ap-etiquette.ap-distinction__rang {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 5px;
	padding: 7px 14px;
}

.ap-distinction__rang p {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: inherit;
}

.ap-distinction__picto {
	margin: 0;
	flex: 0 0 auto;
}

.ap-distinction__picto img {
	width: 20px;
	height: 20px;
	display: block;
}

.ap-distinction__texte {
	margin: 0;
	flex: 1 1 260px;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--ap-encre);
}

.ap-badges--carte {
	flex: 1 1 380px;
	max-width: 430px;
	gap: 26px 0;
}

/* --- Nos valeurs --------------------------------------------------------- */

.ap-valeurs__chapeau {
	margin: 0;
	max-width: 482px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #1a1917;
}

.ap-valeur {
	background: var(--ap-brume);
	border-radius: 20px;
	padding: 30px;
}

.ap-valeur__picto {
	margin: 0;
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background: var(--ap-pervenche);
	display: grid;
	place-items: center;
}

.ap-valeur__picto img {
	width: 24px;
	height: 24px;
	display: block;
}

.ap-valeur__titre {
	margin: 0;
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #1a1917;
}

.ap-valeur__texte {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #1a1917;
}

/* --- Notre équipe -------------------------------------------------------- */

.ap-equipe {
	padding-block: 90px;
}

.ap-equipe__titre {
	flex: 1 1 420px;
	max-width: 482px;
}

.ap-equipe__chapeau {
	flex: 1 1 380px;
	max-width: 506px;
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--ap-encre);
}

.ap-onglets {
	background: var(--ap-brume);
	border-radius: 50px;
	padding: 6px;
	gap: 6px;
}

.ap-onglet {
	margin: 0;
}

.ap-onglet a {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ap-violet-premier);
	background: transparent;
	transition: background-color var(--ap-duree-survol) var(--ap-courbe), color var(--ap-duree-survol) var(--ap-courbe);
}

.ap-onglet a:hover,
.ap-onglet a:focus-visible {
	background: var(--ap-pervenche);
	text-decoration: none;
}

.ap-onglet a[aria-current="true"] {
	background: var(--ap-orchidee);
	color: #fff;
}

.ap-onglet a[aria-disabled="true"] {
	opacity: 0.35;
	pointer-events: none;
}

.ap-defilement-boutons {
	display: flex;
	align-items: center;
	gap: 20px;
}

.ap-defilement-bouton {
	width: 40px;
	height: 40px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	position: relative;
	color: var(--ap-orchidee);
	transition: background-color var(--ap-duree-survol) var(--ap-courbe);
}

.ap-defilement-bouton:hover:not(:disabled) {
	background: var(--ap-brume);
}

.ap-defilement-bouton:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Chevron dessiné en CSS : la flèche de la maquette est rendue en police
   emoji par les navigateurs, ce qui la colorait en orange. */
.ap-defilement-bouton::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 11px;
	height: 11px;
	border-top: 2.5px solid currentColor;
	border-right: 2.5px solid currentColor;
}

.ap-defilement-bouton--prec::before {
	transform: translateX(2px) rotate(-135deg);
}

.ap-defilement-bouton--suiv::before {
	transform: translateX(-2px) rotate(45deg);
}

/* Piste de cartes : défilement horizontal, avec alignement par carte. */
.ap-equipe__piste {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 4px;
	align-items: stretch;
}

.ap-equipe__piste::-webkit-scrollbar {
	display: none;
}

.ap-membre {
	flex: 0 0 260px;
	width: 260px;
	scroll-snap-align: start;
	background: var(--ap-brume);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.ap-membre[hidden] {
	display: none;
}

.ap-membre__portrait {
	display: grid;
	place-items: center;
	padding-block: 30px;
}

.ap-membre__portrait .wp-block-image,
.ap-membre__portrait .ap-emplacement {
	margin: 0;
	width: 131px;
}

.ap-membre__portrait img {
	width: 131px;
	height: 131px;
	display: block;
	border-radius: 50%;
	object-fit: cover;
}

.ap-membre__infos {
	margin-top: auto;
	border-top: 1px solid var(--ap-pervenche);
	padding: 20px 15px;
	align-items: flex-end;
}

.ap-membre__identite {
	min-width: 0;
}

.ap-membre__nom {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #1a1917;
}

.ap-membre__role {
	margin: 0;
	font-size: 14px;
	line-height: 1.2;
	color: var(--ap-violet-premier);
}

.ap-membre__reseau {
	margin: 0;
	flex: 0 0 auto;
}

.ap-membre__reseau img {
	width: 32px;
	height: 32px;
	display: block;
}

/* --- Témoignage ---------------------------------------------------------- */

.ap-avis {
	padding-block: 100px;
}

.ap-avis__titre {
	margin: 0;
	max-width: 670px;
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
}

.ap-citation {
	background: var(--ap-pervenche);
	border-radius: 20px;
	padding: 40px 30px;
}

.ap-citation__marque {
	margin: 0;
}

.ap-citation__marque img {
	width: 45px;
	height: auto;
	display: block;
}

.ap-citation__texte {
	margin: 0;
	padding: 0 0 30px 60px;
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: var(--ap-encre);
}

.ap-citation__portrait {
	margin: 0;
	flex: 0 0 auto;
}

.ap-citation__portrait img {
	width: 55px;
	height: 55px;
	display: block;
	border-radius: 50%;
	object-fit: cover;
}

.ap-citation__nom {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #1a1917;
}

.ap-citation__role {
	margin: 0;
	font-size: 14px;
	line-height: 1.2;
	color: var(--ap-violet-premier);
}

/* --- CTA « On recrute » -------------------------------------------------- */

/* Même carte que l'accueil, mais posée sur la bascule ivoire / encre. */
.ap-cta--ivoire {
	--ap-cta-haut: var(--ap-ivoire);
}

/* Sur les pages Expertise, la section qui précède est blanche : la moitié
   haute l'est aussi, pour que la rupture ne se voie pas. */
.ap-cta--blanc {
	--ap-cta-haut: #fff;
}

/* --- Adaptation aux petits écrans ---------------------------------------- */

@media (max-width: 1200px) {
	/* La carte redevient un rectangle simple : plus de gradins, donc plus de
	   congés à rattraper. */
	.ap-carte-certifs {
		padding: 60px 40px 40px;
		background: none;
	}

	.ap-carte-certifs::before,
	.ap-carte-certifs::after {
		inset: 0;
	}
}

@media (max-width: 900px) {
	.ap-histoire,
	.ap-valeurs,
	.ap-methode-bandeau,
	.ap-equipe {
		padding-block: 60px;
	}

	.ap-chiffres {
		padding-block: 60px 240px;
	}

	.ap-certifs-zone {
		margin-top: -240px;
		padding-top: 60px;
	}

	.ap-avis {
		padding-block: 60px;
	}

	.ap-chiffre {
		height: auto;
		padding-block: 16px;
	}

	/* La valeur et sa légende ne tiennent plus côte à côte : on autorise le
	   retour à la ligne (le bloc est réglé en « nowrap » côté éditeur). */
	.ap-chiffre.is-nowrap {
		flex-wrap: wrap;
	}

	.ap-chiffre__legende {
		width: auto;
		flex: 1 1 180px;
	}

	.ap-citation__texte {
		padding-left: 0;
	}

	.ap-valeur {
		padding: 24px;
	}
}

@media (max-width: 782px) {
	/* Les 80px de retrait latéral sont posés en ligne par le bloc : sur mobile
	   ils ne laissent que 215px de contenu. Le !important est ici le seul moyen
	   de passer devant un style en ligne. */
	.ap-avis,
	.ap-temoignage {
		padding-inline: 20px !important;
	}
}

@media (max-width: 600px) {
	.ap-equipe__barre .ap-defilement-boutons {
		display: none;
	}

	.ap-onglets {
		width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap;
		scrollbar-width: none;
	}

	.ap-onglets::-webkit-scrollbar {
		display: none;
	}

	.ap-onglet a {
		white-space: nowrap;
	}
}

/* --- Rythme vertical et réglages de la page « L'agence » ------------------ */

/* Même piège que sur l'accueil : les règles ci-dessus remettent à zéro les
   marges des titres et des paragraphes, ce qui écrase aussi l'espacement posé
   par l'éditeur — la règle de WordPress est en :where(), de spécificité nulle.
   On rétablit ici les valeurs de la maquette. */

.ap-hero-agence > .wp-block-group > * + * {
	margin-block-start: 32px;
}

.ap-chiffres > * + *,
.ap-histoire .wp-block-column > * + *,
.ap-methode-bandeau .wp-block-column > * + *,
.ap-carte-certifs__texte > * + * {
	margin-block-start: 40px;
}

.ap-valeurs .wp-block-column > * + * {
	margin-block-start: 30px;
}

.ap-avis .wp-block-column > * + * {
	margin-block-start: 60px;
}

.ap-avis .wp-block-column:first-child > .wp-block-group > * + * {
	margin-block-start: 28px;
}

.ap-texte-courant > p + p {
	margin-block-start: 20px;
}

.ap-valeur > * + *,
.ap-citation > * + * {
	margin-block-start: 10px;
}

.ap-membre__identite > * + *,
.ap-citation__auteur .wp-block-group > * + * {
	margin-block-start: 5px;
}

/* WordPress impose « margin-left/right: auto !important » aux enfants d'une
   section « constrained » : sans !important de notre côté, l'étiquette, dont la
   boîte est en fit-content, serait centrée. On la ramène au bord gauche. */
.is-layout-constrained > .ap-etiquette:not(.ap-etiquette--centree) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1520px)) / 2)) !important;
	margin-right: auto !important;
}

/* Mur de badges de la carte : largeurs de la maquette, trois par rangée. */
@media (min-width: 783px) {
	.ap-badges--carte .wp-block-image:nth-child(1) { width: 115px; }
	.ap-badges--carte .wp-block-image:nth-child(2) { width: 119px; }
	.ap-badges--carte .wp-block-image:nth-child(3) { width: 135px; }
	.ap-badges--carte .wp-block-image:nth-child(4) { width: 102px; }
	.ap-badges--carte .wp-block-image:nth-child(5) { width: 96px; }
	.ap-badges--carte .wp-block-image:nth-child(6) { width: 90px; }
	.ap-badges--carte .wp-block-image:nth-child(7) { width: 94px; }
}

/* -------------------------------------------------------------------------
   13. Méga-menu « Nos expertises »
   ----------------------------------------------------------------------
   Panneau d'après la maquette « Drop-expertises 1.2 ». Il vit dans l'en-tête,
   sorti du flux : sur grand écran il se pose sous la barre de navigation, sur
   mobile le script le déplace dans le menu plein écran de WordPress et il
   reprend un affichage en liste.
   ---------------------------------------------------------------------- */

.ap-megamenu {
	position: absolute;
	top: calc(100% - 12px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 60;
	width: min(1020px, calc(100% - 40px));
	margin: 0;
	padding: 30px;
	border: 1px solid var(--ap-pervenche);
	border-radius: 30px;
	background: var(--ap-brume);
	box-shadow: 0 24px 48px rgba(14, 10, 26, 0.18);
	/* Fondu rapide : le panneau reste dans le DOM pour rester accessible au
	   clavier, mais il ne capte plus la souris tant qu'il est invisible. */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--ap-duree-survol) var(--ap-courbe), visibility 0s linear var(--ap-duree-survol);
}

.ap-megamenu--ouvert {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--ap-duree-survol) var(--ap-courbe), visibility 0s;
}

/* Pont invisible entre l'entrée de menu et le panneau : la souris peut
   descendre sans traverser de zone morte. Inerte tant que le panneau est
   fermé, puisqu'il ne capte alors pas la souris. */
.ap-megamenu::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -26px;
	height: 26px;
}

/* Sans JavaScript, le panneau se révèle au survol de l'en-tête plutôt que de
   rester inaccessible. */
.ap-entete:not([data-ap-mega]) .ap-megamenu:hover,
.ap-entete:not([data-ap-mega]) .ap-megamenu:focus-within {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.ap-megamenu__grille {
	margin: 0;
	gap: 12px;
}

.ap-mega-item {
	position: relative;
	align-items: flex-start;
	margin: 0;
}

.ap-mega-item > * {
	position: relative;
	z-index: 1;
}

/* Le fond de survol déborde de la ligne par un pseudo-élément : jouer sur les
   marges de la ligne écraserait l'espacement posé par l'éditeur. */
.ap-mega-item::before {
	content: "";
	position: absolute;
	inset: -6px -10px;
	border-radius: 12px;
	background: transparent;
	transition: background-color var(--ap-duree-survol) var(--ap-courbe);
}

.ap-mega-item:hover::before,
.ap-mega-item:focus-within::before {
	background: rgba(255, 255, 255, 0.6);
}

/* Toute la ligne est cliquable, sans imbriquer le texte dans le lien : le
   pseudo-élément du lien de titre recouvre la ligne entière. */
.ap-mega-item__titre a::after {
	content: "";
	position: absolute;
	inset: -6px -10px;
	border-radius: 12px;
}

/* Rythme de la maquette : 12px entre les lignes d'une colonne, et entre le
   libellé et sa description. Les règles ci-dessus remettent les marges à zéro,
   ce qui écrase aussi l'espacement posé par l'éditeur. */
.ap-megamenu .wp-block-column > * + *,
.ap-megamenu .ap-mega-item__corps > * + * {
	margin-block-start: 12px;
}

.ap-mega-item__picto {
	margin: 0;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 5px;
	/* Aplat propre au pictogramme, un ton au-dessus de l'encre du thème. */
	background: #1a1430;
	border: 1px solid var(--ap-liseret);
	display: grid;
	place-items: center;
}

.ap-mega-item__picto img {
	width: 24px;
	height: 24px;
	display: block;
}

.ap-mega-item__corps {
	min-width: 0;
	padding-top: 8px;
}

.ap-mega-item__titre {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.05em;
	color: var(--ap-encre);
}

.ap-mega-item__titre a {
	color: inherit;
	text-decoration: none;
	transition: color var(--ap-duree-survol) var(--ap-courbe);
}

.ap-mega-item:hover .ap-mega-item__titre a,
.ap-mega-item__titre a:focus-visible {
	color: var(--ap-violet-premier);
	text-decoration: none;
}

.ap-mega-item__desc {
	margin: 0;
	max-width: 260px;
	font-size: 14px;
	line-height: 1.48;
	color: var(--ap-ardoise);
}

/* Chevron de l'entrée qui ouvre le panneau : il pivote quand il est ouvert. */
.ap-menu .ap-menu-drop .wp-block-navigation-item__content::after {
	transition: transform var(--ap-duree-survol) var(--ap-courbe);
}

.ap-menu .ap-menu-drop[data-ap-mega-ouvert] .wp-block-navigation-item__content::after {
	transform: rotate(180deg);
}

/* --- Dans le menu plein écran (mobile) ----------------------------------- */

/* Le script déplace le panneau sous l'entrée « Nos expertises » : il reprend
   alors sa place dans le flux, en liste sur une colonne. */
.ap-megamenu--mobile {
	position: static;
	transform: none;
	width: 100%;
	max-width: none;
	margin-top: 12px;
	padding: 20px;
	border-radius: 20px;
	box-shadow: none;
	display: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: none;
}

.ap-megamenu--mobile.ap-megamenu--ouvert {
	display: block;
}

.ap-megamenu--mobile .ap-megamenu__grille {
	flex-wrap: wrap;
	gap: 20px;
}

.ap-megamenu--mobile .wp-block-column {
	flex-basis: 100% !important;
}

.ap-megamenu--mobile .ap-mega-item__desc {
	max-width: none;
}

/* L'entrée de menu accueille le panneau : elle passe en colonne le temps du
   menu plein écran. */
.ap-menu-drop--avec-panneau {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.ap-megamenu,
	.ap-megamenu--ouvert,
	.ap-mega-item,
	.ap-mega-item__titre a,
	.ap-menu .ap-menu-drop .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   14. Pages Expertise
   ----------------------------------------------------------------------
   Sections du gabarit « Expertise », d'après la maquette « SEA - v1 ». Elles
   sont écrites sans rien de propre au SEA : la même feuille habille SEO, GEO
   ou Social Ads dès qu'une nouvelle composition est enregistrée.
   ---------------------------------------------------------------------- */

/* --- Hero ---------------------------------------------------------------- */

.ap-exp-hero__titre {
	margin: 0;
	font-size: clamp(34px, 3.6vw, 54px);
	font-weight: 600;
	line-height: 1.07;
	letter-spacing: -0.02em;
	color: #fff;
}

/* Les deux colonnes du hero sont deux piles indépendantes, comme sur la
   maquette : à gauche le discours puis les chiffres, à droite la photo puis le
   bandeau d'avis. Ce dernier se cale en bas, à hauteur du bloc de statistiques,
   au lieu d'attendre que la photo ait fini — ce qui laissait un grand vide
   sous les boutons. */
.ap-exp-hero .wp-block-column.ap-exp-hero__colonne > * + * {
	margin-block-start: 53px;
}

.ap-exp-hero__texte > * + * {
	margin-block-start: 32px;
}

.ap-exp-hero .wp-block-column.ap-exp-hero__visuel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 60px;
}

.ap-exp-hero .wp-block-column.ap-exp-hero__visuel > * + * {
	margin-block-start: 0;
}

/* La photo garde sa taille d'export et se cale à droite de sa colonne, comme
   sur la maquette. Étirée à la largeur de la colonne, elle perdait en netteté
   et allongeait le hero de près de 300 px, ce qui repoussait d'autant le bloc
   de statistiques. Elle se réduit en revanche si la colonne devient plus
   étroite qu'elle. */
.ap-exp-hero__visuel .wp-block-image {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto 0;
}

.ap-exp-hero__visuel img {
	width: auto;
	max-width: 100%;
	height: auto;
	display: block;
}

/* Bouton pilule clair, deuxième appel à l'action du hero. */
.ap-pilule--claire .wp-block-button__link {
	background: var(--ap-brume);
	color: var(--ap-encre);
}

.ap-pilule--claire .wp-block-button__link:hover,
.ap-pilule--claire .wp-block-button__link:focus-visible {
	background: var(--ap-encre);
	color: var(--ap-brume);
}

/* --- Bloc statistiques --------------------------------------------------- */

/* Silhouette de la maquette : un corps central, une languette à gauche et une
   seconde à droite, décalée vers le bas. Trois rectangles arrondis se
   recouvrent, et les trois angles rentrants de leur rencontre sont adoucis
   par des congés peints en fond — recette détaillée à la section 10. */
.ap-stats {
	--ap-gradin: 20px;
	--ap-gradin-tuile: calc(var(--ap-gradin) + 1px);
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 22px;
	height: 422px;
	padding: 30px 60px 40px;

	background:
		/* angle rentrant en haut de la languette gauche */
		radial-gradient(circle var(--ap-gradin) at 0 0, transparent calc(100% - 0.75px), var(--ap-orchidee) 100%)
			calc(10.1% + 0.101 * var(--ap-gradin-tuile) - var(--ap-gradin))
			calc(17.1% + 0.171 * var(--ap-gradin-tuile) - var(--ap-gradin))
			/ var(--ap-gradin-tuile) var(--ap-gradin-tuile) no-repeat,
		/* angle rentrant en bas de la languette gauche */
		radial-gradient(circle var(--ap-gradin) at 0 100%, transparent calc(100% - 0.75px), var(--ap-orchidee) 100%)
			calc(10.1% + 0.101 * var(--ap-gradin-tuile) - var(--ap-gradin))
			calc(80.3% + 0.803 * var(--ap-gradin-tuile) - 1px)
			/ var(--ap-gradin-tuile) var(--ap-gradin-tuile) no-repeat,
		/* angle rentrant en haut de la languette droite */
		radial-gradient(circle var(--ap-gradin) at 100% 0, transparent calc(100% - 0.75px), var(--ap-orchidee) 100%)
			calc(92.5% + 0.925 * var(--ap-gradin-tuile) - 1px)
			calc(36.5% + 0.365 * var(--ap-gradin-tuile) - var(--ap-gradin))
			/ var(--ap-gradin-tuile) var(--ap-gradin-tuile) no-repeat;
}

.ap-stats::before,
.ap-stats::after,
.ap-stats__fond {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: var(--ap-gradin);
	background: var(--ap-orchidee);
	pointer-events: none;
}

/* Le corps, en retrait des deux côtés. */
.ap-stats::before {
	inset: 0 7.5% 0 10.1%;
}

/* La languette de gauche. */
.ap-stats::after {
	inset: 17.1% 7.5% 19.7% 0;
}

/* Celle de droite, qui descend jusqu'au bas du bloc. */
.ap-stats__fond {
	inset: 36.5% 0 0 10.1%;
}

.ap-stat {
	position: relative;
	flex: 0 0 100px;
	max-width: 100px;
	height: var(--ap-stat-hauteur, 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.ap-stat__intitule {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
}

.ap-stat__barre {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-height: 60px;
	border-radius: 8px;
	background: var(--ap-violet-premier);
}

/* Double chevron dessiné en CSS : le caractère flèche bascule sur la police
   emoji et ressort en couleur. */
.ap-stat__barre::before,
.ap-stat__barre::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 11px;
	height: 11px;
	border-top: 2.5px solid var(--ap-orchidee);
	border-right: 2.5px solid var(--ap-orchidee);
	transform: translateX(-50%) rotate(-45deg);
}

.ap-stat__barre::before {
	bottom: 64px;
}

.ap-stat__barre::after {
	bottom: 55px;
}

.ap-stat__valeur {
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
}

/* --- Carte de réassurance ------------------------------------------------ */

.ap-reassure {
	background: var(--ap-violet-premier);
	border-radius: 20px;
	padding: 30px 60px;
}

.ap-note-plateforme {
	align-items: center;
}

.ap-note-plateforme__logo {
	margin: 0;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	display: grid;
	place-items: center;
}

.ap-note-plateforme__logo img {
	width: 22px;
	height: 22px;
	display: block;
	object-fit: contain;
}

.ap-note-plateforme__note {
	margin: 0;
	font-size: 16px;
	line-height: 1.2;
	color: var(--ap-voile);
	white-space: nowrap;
}

.ap-note-plateforme__note strong {
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: #fff;
}

.ap-reassure__texte {
	margin: 0;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: #fff;
}

/* --- Leviers ------------------------------------------------------------- */

.ap-leviers,
.ap-pole,
.ap-cas-clients,
.ap-exp-equipe,
.ap-blog,
.ap-faq,
.ap-exp-methode,
.ap-exp-formations {
	padding-block: 90px;
}

.ap-leviers__titre,
.ap-pole__titre {
	margin: 0 auto;
	max-width: 660px;
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
}

.ap-leviers__chapeau,
.ap-pole__chapeau {
	margin: 0 auto;
	max-width: 880px;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: #fff;
}

.ap-grille-leviers {
	align-items: stretch;
}

.ap-levier {
	flex: 1 1 calc(25% - 12px);
	max-width: calc(25% - 11.25px);
	background: var(--ap-pervenche);
	border-radius: 10px;
	padding: 30px;
}

.ap-levier--accent {
	background: var(--ap-orchidee);
}

.ap-levier__picto {
	margin: 0;
	width: 32px;
	height: 32px;
	border-radius: 5px;
	background: #1a1430;
	border: 1px solid var(--ap-liseret);
	display: grid;
	place-items: center;
}

.ap-levier__picto img {
	width: 20px;
	height: 20px;
	display: block;
}

.ap-levier__titre {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--ap-encre);
}

.ap-levier__valeur {
	margin: 0;
	font-size: clamp(28px, 2.4vw, 36px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.02em;
	color: #fff;
}

.ap-levier__texte {
	margin: 0;
	font-size: 16px;
	line-height: 1.48;
	color: var(--ap-encre);
}

.ap-levier--accent .ap-levier__texte {
	color: #fff;
}

.ap-boutons-centres {
	justify-content: center;
	width: 100%;
}

/* --- Méthode ------------------------------------------------------------- */

.ap-exp-methode__titre,
.ap-blog__titre,
.ap-faq__titre {
	margin: 0 auto;
	max-width: 660px;
	font-size: clamp(28px, 2.8vw, 40px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--ap-encre);
}

.ap-exp-methode__liste {
	counter-reset: ap-etape-exp;
}

.ap-etape {
	background: transparent;
	border-bottom: 1px solid var(--ap-pervenche);
	padding-block: 30px;
}

.ap-etape > summary {
	counter-increment: ap-etape-exp;
	display: flex;
	align-items: center;
	gap: 40px;
	padding-inline: 20px;
	list-style: none;
	cursor: pointer;
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #1a1917;
}

.ap-etape > summary::-webkit-details-marker {
	display: none;
}

.ap-etape > summary::before {
	content: counter(ap-etape-exp, decimal-leading-zero);
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background: var(--ap-pervenche);
	color: var(--ap-violet-premier);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.02em;
}

/* Chevron de fin de ligne, dessiné en CSS. */
.ap-etape > summary::after {
	content: "";
	flex: 0 0 auto;
	margin-left: auto;
	width: 11px;
	height: 11px;
	border-right: 2.5px solid #1a1917;
	border-bottom: 2.5px solid #1a1917;
	transform: rotate(45deg);
	transition: transform var(--ap-duree-etat) var(--ap-courbe);
}

.ap-etape[open] > summary::after {
	transform: rotate(-135deg);
}

.ap-etape__corps {
	padding: 20px 20px 0 122px;
}

.ap-etape__point {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #1a1917;
}

.ap-etape__point::before {
	content: "➔";
	margin-right: 10px;
	color: var(--ap-violet-premier);
}

.ap-etiquette.ap-etape__objectif {
	display: inline-flex;
	gap: 5px;
	margin-top: 8px;
}

.ap-etape__objectif p {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: inherit;
}

.ap-etape__picto {
	margin: 0;
	flex: 0 0 auto;
}

.ap-etape__picto img {
	width: 20px;
	height: 20px;
	display: block;
}

/* --- Pôle Performance & Conseil ------------------------------------------ */

.ap-pole {
	background: var(--ap-encre);
}

.ap-roles {
	align-items: flex-start;
}

/* Silhouette en gradins : deux rectangles arrondis se recouvrent et laissent
   une entaille sur la droite, où se loge le portrait. La premiere carte porte
   l'entaille en haut (le portrait deborde vers le haut), la seconde en bas. */
.ap-role {
	--ap-gradin: 20px;
	--ap-gradin-tuile: calc(var(--ap-gradin) + 1px);
	position: relative;
	isolation: isolate;
	background: transparent;
	border-radius: 0;
	overflow: visible;
	padding: 0;
}

.ap-role::before,
.ap-role::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: var(--ap-gradin);
	background: var(--ap-brume);
	pointer-events: none;
}

.ap-role__visuel {
	position: absolute;
	right: 0;
	margin: 0;
}

.ap-role__visuel img {
	width: 100%;
	height: 260px;
	display: block;
	object-fit: cover;
	border-radius: 20px;
}

.ap-role:nth-child(odd) {
	flex: 0 1 654px;
	max-width: 654px;
	min-height: 364px;
	padding: 54px 0 34px;

	/* L'entaille est en haut à droite : un seul angle rentrant à adoucir. */
	background:
		radial-gradient(circle var(--ap-gradin) at 100% 0, transparent calc(100% - 0.75px), var(--ap-brume) 100%)
			calc(67.1% + 0.671 * var(--ap-gradin-tuile) - 1px)
			calc(270px - var(--ap-gradin))
			/ var(--ap-gradin-tuile) var(--ap-gradin-tuile) no-repeat;
}

.ap-role:nth-child(odd)::before {
	inset: 54px 32.9% 0 0;
}

.ap-role:nth-child(odd)::after {
	inset: 270px 19.7% 0 0;
}

.ap-role:nth-child(odd) .ap-role__visuel {
	top: 0;
	width: 31.3%;
}

.ap-role:nth-child(odd) .ap-role__corps {
	padding: 43px 40% 0 38px;
}

.ap-role:nth-child(even) {
	flex: 0 1 561px;
	max-width: 561px;
	min-height: 429px;
	padding: 54px 0 100px;

	/* Ici l'entaille est en bas à droite. */
	background:
		radial-gradient(circle var(--ap-gradin) at 100% 100%, transparent calc(100% - 0.75px), var(--ap-brume) 100%)
			left calc(61.7% + 0.617 * var(--ap-gradin-tuile) - 1px)
			bottom calc(270px - var(--ap-gradin))
			/ var(--ap-gradin-tuile) var(--ap-gradin-tuile) no-repeat;
}

.ap-role:nth-child(even)::before {
	inset: 54px 38.3% 65px 0;
}

.ap-role:nth-child(even)::after {
	inset: 54px 14.1% 270px 0;
}

.ap-role:nth-child(even) .ap-role__visuel {
	bottom: 0;
	width: 36.5%;
}

.ap-role:nth-child(even) .ap-role__corps {
	padding: 35px 45% 0 38px;
}

.ap-role__nom {
	margin: 0;
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--ap-encre);
}

.ap-role__sous {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ap-ardoise);
}

.ap-role__texte {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #1a1917;
}

/* --- Cas clients --------------------------------------------------------- */

.ap-cas-clients__entete {
	width: 100%;
}

.ap-cas {
	margin: 0;
	border-top: 1px solid var(--ap-ardoise);
	padding-top: 60px;
}

.ap-cas__nom {
	margin: 0;
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--ap-encre);
}

.ap-etiquette.ap-cas__secteur {
	letter-spacing: 0.08em;
}

.ap-cas__periode {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ap-ardoise);
}

.ap-cas__defi {
	margin: 0;
	max-width: 340px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #1a1917;
}

.ap-cas-carte {
	position: relative;
	max-width: 501px;
	border-radius: 20px;
	padding: 30px;
	background: var(--ap-violet-premier);
	overflow: hidden;
}

.ap-cas-carte__picto {
	position: absolute;
	top: 12px;
	right: 20px;
	margin: 0;
	width: 74px;
	opacity: 0.55;
}

.ap-cas-carte__picto img {
	width: 74px;
	height: auto;
	display: block;
}

.ap-cas-carte__mesure {
	margin: 0;
	position: relative;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ap-lilas);
}

/* Graphe à barres horizontales : une barre par année, largeur en pourcentage
   du record, l'année à gauche et la valeur à droite. */
.ap-cas-graphe--barres {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 40px;
	/* La piste s’arrête avant le bord : la valeur se pose à droite de la barre. */
	padding-right: 31%;
}

.ap-cas-barre {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: var(--ap-barre, 100%);
	min-width: 120px;
	height: 63px;
	border-radius: 5px;
	padding-inline: 12px;
}

.ap-cas-barre--clair {
	background: #fff;
}

.ap-cas-barre--lilas {
	background: var(--ap-lilas);
}

.ap-cas-barre__annee {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ap-violet-premier);
}

.ap-cas-barre__valeur {
	position: absolute;
	left: calc(100% + 14px);
	font-size: clamp(22px, 2vw, 32px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
	white-space: nowrap;
}

.ap-cas-barre--lilas .ap-cas-barre__valeur {
	font-size: clamp(18px, 1.6vw, 24px);
	font-weight: 600;
}

/* Graphe à colonnes : la valeur en grand, la progression en colonnes. */
.ap-cas-graphe--colonnes {
	position: relative;
	padding-top: 40px;
}

.ap-cas-graphe__valeur {
	margin: 0;
	font-size: clamp(48px, 5vw, 72px);
	font-weight: 600;
	line-height: 0.99;
	letter-spacing: -0.02em;
	color: #fff;
}

.ap-cas-graphe__variation {
	margin: 6px 0 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ap-lilas);
}

.ap-cas-colonnes {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	gap: 21px;
	height: 130px;
}

.ap-cas-colonne {
	display: block;
	width: 53px;
	height: var(--ap-colonne, 100%);
	border-radius: 5px;
	background: var(--ap-lilas);
}

.ap-cas-colonne--pleine {
	background: #fff;
}

.ap-cas__visuel {
	position: relative;
}

.ap-cas__photo {
	margin: 0;
}

.ap-cas__photo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 20px;
	object-fit: cover;
}

.ap-cas__logo {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #fff;
	border-radius: 10px;
	padding: 10px;
	display: grid;
	place-items: center;
}

.ap-cas__logo .wp-block-image,
.ap-cas__logo .ap-emplacement {
	margin: 0;
}

.ap-cas__logo img {
	max-width: 110px;
	max-height: 74px;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}

/* --- Équipe -------------------------------------------------------------- */

.ap-exp-equipe {
	background: #fff;
}

.ap-exp-equipe__titre {
	max-width: 640px;
}

/* Le bandeau des experts défile comme le ruban de références : la piste est
   dupliquée par le script du thème, et l'animation la décale exactement de la
   largeur d'un jeu de cartes. Le cadre découpe et estompe les deux bords. */
.ap-exp-equipe__ruban {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.ap-exp-equipe__piste[data-ap-ruban] {
	overflow: visible;
	width: max-content;
	max-width: none;
	scroll-snap-type: none;
	animation: ap-defilement var(--ap-defilement-duree, 48s) linear infinite;
	will-change: transform;
}

/* Le ruban s'arrête au survol : on peut lire un nom au passage. */
.ap-exp-equipe__ruban:hover .ap-exp-equipe__piste[data-ap-ruban],
.ap-exp-equipe__ruban:focus-within .ap-exp-equipe__piste[data-ap-ruban] {
	animation-play-state: paused;
}

/* --- Témoignage ---------------------------------------------------------- */

.ap-exp-avis {
	padding-block: 100px;
}

/* --- Certifications posées à plat ---------------------------------------- */

.ap-certifs-zone--plate {
	margin-top: 0;
	padding: 60px 20px;
	background: var(--ap-ivoire);
}

/* --- Blog ---------------------------------------------------------------- */

.ap-articles {
	align-items: stretch;
}

.ap-article {
	position: relative;
	flex: 1 1 340px;
	max-width: 380px;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.ap-article__visuel {
	margin: 0;
}

.ap-article__visuel img {
	width: 100%;
	height: 210px;
	display: block;
	object-fit: cover;
}

.ap-article__corps {
	padding: 24px;
}

.ap-article__categorie {
	margin: 0;
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 100px;
	background: var(--ap-lilas);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ap-violet-premier);
	width: fit-content;
}

.ap-article__titre {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ap-encre);
}

.ap-article__titre a {
	color: inherit;
	text-decoration: none;
}

/* Toute la carte est cliquable depuis le lien du titre. */
.ap-article__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ap-article:hover .ap-article__titre a {
	color: var(--ap-violet-premier);
	text-decoration: none;
}

.ap-article__lire {
	margin: 0;
	margin-top: auto;
	font-size: 14px;
	font-weight: 700;
	color: var(--ap-violet-premier);
}

/* --- FAQ ----------------------------------------------------------------- */

.ap-faq__panneau {
	max-width: 1200px;
	margin-inline: auto;
	width: 100%;
	background: #fff;
	border-radius: 24px;
	overflow: hidden;
}

.ap-question {
	background: transparent;
	padding: 30px 40px;
}

.ap-question + .ap-question {
	border-top: 1px solid var(--ap-voile);
}

.ap-question[open] {
	background: #fff;
}

.ap-question:not([open]) {
	background: var(--ap-brume);
}

.ap-question > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	list-style: none;
	cursor: pointer;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ap-violet-premier);
}

.ap-question > summary::-webkit-details-marker {
	display: none;
}

.ap-question > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	border-right: 2.5px solid var(--ap-violet-premier);
	border-bottom: 2.5px solid var(--ap-violet-premier);
	transform: rotate(45deg);
	transition: transform var(--ap-duree-etat) var(--ap-courbe);
}

.ap-question[open] > summary::after {
	transform: rotate(-135deg);
}

.ap-question__reponse {
	margin: 18px 0 0;
	max-width: 980px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--ap-ardoise);
}

/* --- Formations ---------------------------------------------------------- */

.ap-exp-formations {
	background: #fff;
}

.ap-exp-formations__texte {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--ap-encre);
}

/* --- CTA large ----------------------------------------------------------- */

.ap-cta--large .ap-cta__carte {
	max-width: 1098px;
}

/* --- Rythme vertical ----------------------------------------------------- */

/* Les règles ci-dessus remettent les marges à zéro : on rétablit l'espacement
   de la maquette, en préfixant par le conteneur pour passer devant. */
.ap-exp-hero .wp-block-column > * + * {
	margin-block-start: 32px;
}

.ap-leviers > * + *,
.ap-pole > * + *,
.ap-exp-methode > * + *,
.ap-blog > * + *,
.ap-faq > * + * {
	margin-block-start: 40px;
}

.ap-cas-clients > * + *,
.ap-exp-equipe > * + * {
	margin-block-start: 40px;
}

.ap-cas .wp-block-column > * + * {
	margin-block-start: 48px;
}

.ap-exp-formations .wp-block-column > * + * {
	margin-block-start: 40px;
}

.ap-leviers .ap-levier__corps > * + *,
.ap-cas-clients .ap-cas__entete > * + * {
	margin-block-start: 12px;
}

.ap-reassure > * + * {
	margin-block-start: 40px;
}

.ap-cas-carte > * + * {
	margin-block-start: 20px;
}

.ap-role__corps > * + * {
	margin-block-start: 16px;
}

.ap-role__titre > * + * {
	margin-block-start: 4px;
}

.ap-article__corps > * + * {
	margin-block-start: 14px;
}

.ap-exp-methode .ap-etape__corps > * + * {
	margin-block-start: 12px;
}

/* --- Adaptation aux petits écrans ---------------------------------------- */

@media (max-width: 1200px) {
	.ap-levier {
		flex-basis: calc(50% - 8px);
		max-width: calc(50% - 7.5px);
	}
}

@media (max-width: 900px) {
	.ap-leviers,
	.ap-pole,
	.ap-cas-clients,
	.ap-exp-equipe,
	.ap-blog,
	.ap-faq,
	.ap-exp-methode,
	.ap-exp-formations {
		padding-block: 60px;
	}

	.ap-exp-avis {
		padding-block: 60px;
	}

	.ap-stats {
		height: 340px;
		padding-inline: 30px;
	}

	.ap-etape > summary {
		gap: 20px;
		padding-inline: 0;
	}

	.ap-etape > summary::before {
		width: 46px;
		height: 46px;
		font-size: 18px;
	}

	.ap-etape__corps {
		padding-left: 66px;
	}

	/* En dessous de 900px, la carte redevient un bloc simple : portrait en tete,
	   fond plein, plus d'entaille. */
	.ap-role:nth-child(odd),
	.ap-role:nth-child(even) {
		flex: 1 1 100%;
		max-width: 520px;
		min-height: 0;
		padding: 0 0 30px;
		background: var(--ap-brume);
		border-radius: 20px;
		overflow: hidden;
	}

	.ap-role::before,
	.ap-role::after {
		display: none;
	}

	.ap-role:nth-child(odd) .ap-role__visuel,
	.ap-role:nth-child(even) .ap-role__visuel {
		position: static;
		width: 100%;
		max-width: none;
	}

	.ap-role__visuel img {
		height: 200px;
		border-radius: 0;
	}

	.ap-role:nth-child(odd) .ap-role__corps,
	.ap-role:nth-child(even) .ap-role__corps {
		padding: 24px 24px 0;
	}

	.ap-cas-carte {
		padding: 24px;
	}

	.ap-cas-colonnes {
		position: static;
		margin-top: 20px;
		height: 90px;
	}

	.ap-question {
		padding: 24px;
	}

	.ap-reassure {
		padding: 24px;
	}
}

@media (max-width: 600px) {
	.ap-levier {
		flex-basis: 100%;
		max-width: none;
	}

	.ap-stat {
		flex: 0 0 72px;
	}

	.ap-cas-barre__valeur {
		position: static;
		left: auto;
	}
}

/* -------------------------------------------------------------------------
   15. Archive des expertises
   ----------------------------------------------------------------------
   Page de liste provisoire : la maquette n'en prévoit pas encore. Elle reste
   volontairement sobre et réutilise l'habillage sombre des autres sections.
   ---------------------------------------------------------------------- */

.ap-archive-expertises {
	padding-block: 90px;
}

.ap-archive-expertises__titre {
	margin: 0 auto;
	max-width: 760px;
	font-size: clamp(32px, 3.2vw, 48px);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #fff;
}

.ap-archive-cartes {
	gap: 24px;
}

.ap-archive-carte {
	position: relative;
	background: var(--ap-brume);
	border-radius: 20px;
	padding: 30px;
}

.ap-archive-carte__titre {
	margin: 0;
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--ap-encre);
}

.ap-archive-carte__titre a {
	color: inherit;
	text-decoration: none;
}

/* Toute la carte est cliquable depuis le lien du titre. */
.ap-archive-carte__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ap-archive-carte:hover .ap-archive-carte__titre a {
	color: var(--ap-violet-premier);
}

.ap-archive-carte__texte {
	margin: 0;
	font-size: 16px;
	line-height: 1.45;
	color: var(--ap-ardoise);
}

.ap-archive-expertises > * + * {
	margin-block-start: 40px;
}

.ap-archive-carte > * + * {
	margin-block-start: 12px;
}

@media (max-width: 900px) {
	.ap-archive-expertises {
		padding-block: 60px;
	}
}

/* --- Animations d'entrée -------------------------------------------------- */

/* La classe « ap-anime » est posée sur la page avant le premier rendu, par
   trois lignes dans l'en-tête : l'état de départ est donc là d'emblée, et
   aucune barre n'est vue descendre avant de monter. Sans JavaScript, la
   classe n'existe pas et rien de tout ceci ne s'applique. */
.ap-stat {
	transition: height var(--ap-duree-donnees) var(--ap-courbe);
}

.ap-anime .ap-stat {
	height: 120px;
}

.ap-anime .ap-stat__valeur {
	opacity: 0;
}

.ap-anime .ap-stat--montee {
	height: var(--ap-stat-hauteur, 100%);
}

.ap-anime .ap-stat--montee .ap-stat__valeur {
	opacity: 1;
	transition: opacity var(--ap-duree-etat) var(--ap-courbe);
}

/* --- Vidéo du hero -------------------------------------------------------- */

/* La silhouette en gradins, relevée au pixel près sur le visuel exporté puis
   redessinée en SVG : deux rectangles de 566 × 469 qui se recouvrent, tous
   les angles au rayon 20, y compris les deux congés rentrants. Elle vit dans
   une adresse « data », donc aucun fichier à téléverser et aucune requête de
   plus. Le visuel du hero ne peut pas servir de masque : son export WebP a
   perdu sa transparence. */
.ap-exp-hero__cadre {
	--ap-silhouette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 566 469' preserveAspectRatio='none'%3E%3Cpath d='M 81 0 H 546 A 20 20 0 0 1 566 20 V 398 A 20 20 0 0 1 546 418 H 441 A 20 20 0 0 0 421 438 V 449 A 20 20 0 0 1 401 469 H 20 A 20 20 0 0 1 0 449 V 122 A 20 20 0 0 1 20 102 H 41 A 20 20 0 0 0 61 82 V 20 A 20 20 0 0 1 81 0 Z' fill='%23000'/%3E%3C/svg%3E");
	display: none;
	position: relative;
	width: 100%;
	max-width: var(--ap-video-large, 566px);
	aspect-ratio: var(--ap-video-ratio, 566 / 469);
	margin-inline: auto 0;
	overflow: hidden;
	-webkit-mask-image: var(--ap-video-masque, var(--ap-silhouette));
	mask-image: var(--ap-video-masque, var(--ap-silhouette));
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Une vidéo 16/9 dans un cadre presque carré perd de la largeur : « cadrage »
   choisit la partie gardée, « zoom » permet de se rapprocher du sujet. Le
   débord est rogné par le cadre. */
.ap-exp-hero__video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: var(--ap-video-cadrage, 50% 50%);
	transform: scale(var(--ap-video-zoom, 1));
	transform-origin: var(--ap-video-cadrage, 50% 50%);
}

@media (min-width: 782px) {
	.ap-exp-hero__cadre.ap-video-prete {
		display: block;
	}

	.ap-exp-hero__visuel--video .wp-block-image {
		display: none;
	}
}

/* ==========================================================================
   Focus : pas de cadre au clic
   Twenty Twenty-Five pose un contour de 2 px sur tout élément qui prend le
   focus, y compris à la souris. On ne le garde que pour la navigation au
   clavier (:focus-visible), indispensable pour savoir où l'on se trouve.
   ========================================================================== */
.wp-site-blocks :focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   Hero de « L'agence » : la vidéo de l'équipe
   Même principe que le hero des expertises. La silhouette est relevée au
   pixel sur ap-agence-hero.webp (1520 × 593, sans transparence) puis
   redessinée en SVG : une encoche de 105 × 106 en haut à droite, une de
   104 × 166 en bas à gauche, tous les angles au rayon 20, congés compris.
   Le cadre garde le ratio de la photo : la silhouette s'étire donc sans
   jamais se déformer, à toutes les largeurs.
   ========================================================================== */
.ap-agence-hero__cadre {
	--ap-silhouette-agence: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201520%20593'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M%2020%200%20H%201395%20A%2020%2020%200%200%201%201415%2020%20V%2086%20A%2020%2020%200%200%200%201435%20106%20H%201500%20A%2020%2020%200%200%201%201520%20126%20V%20573%20A%2020%2020%200%200%201%201500%20593%20H%20124%20A%2020%2020%200%200%201%20104%20573%20V%20447%20A%2020%2020%200%200%200%2084%20427%20H%2020%20A%2020%2020%200%200%201%200%20407%20V%2020%20A%2020%2020%200%200%201%2020%200%20Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E");
	display: none;
	position: relative;
	width: 100%;
	aspect-ratio: 1520 / 593;
	overflow: hidden;
	-webkit-mask-image: var(--ap-silhouette-agence);
	mask-image: var(--ap-silhouette-agence);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Une vidéo 16/9 dans un cadre aussi large perd du haut et du bas :
   « cadrage » choisit la partie gardée, « zoom » resserre. Même origine pour
   les deux, sinon le zoom recentre l'image et annule le cadrage. */
.ap-agence-hero__video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: var(--ap-video-cadrage, 50% 50%);
	transform: scale(var(--ap-video-zoom, 1));
	transform-origin: var(--ap-video-cadrage, 50% 50%);
}

@media (min-width: 782px) {
	.ap-agence-hero__cadre.ap-video-prete {
		display: block;
	}

	.ap-hero-agence__visuel--video .wp-block-image {
		display: none;
	}
}

/* ==========================================================================
   Accordéons : ouverture et fermeture animées
   Le script (inc/animations.php) anime la hauteur des bandes <details> et
   fait apparaître leur contenu en fondu. Pendant une fermeture, la bande reste
   ouverte jusqu'à la fin du mouvement : « ap-se-ferme » remet tout de suite
   la flèche et le fond dans leur état fermé. Sans script, ou en « animations
   réduites », l'ouverture reste instantanée.
   ========================================================================== */
.wp-block-details.ap-anime {
	overflow: hidden;
}

.ap-methode__item > summary::after,
.ap-etape > summary::after,
.ap-question > summary::after {
	transition: transform var(--ap-duree-etat) var(--ap-courbe);
}

.ap-question {
	transition: background-color var(--ap-duree-etat) var(--ap-courbe);
}

.ap-methode__item.ap-se-ferme[open] > summary::after {
	transform: rotate(90deg);
}

.ap-etape.ap-se-ferme[open] > summary::after,
.ap-question.ap-se-ferme[open] > summary::after {
	transform: rotate(45deg);
}

.ap-question.ap-se-ferme[open] {
	background: var(--ap-brume);
}

@media (prefers-reduced-motion: reduce) {
	.ap-methode__item > summary::after,
	.ap-etape > summary::after,
	.ap-question > summary::after,
	.ap-question {
		transition: none;
	}
}

/* ==========================================================================
   Méthode Lean Premier (accueil) : écart titre / texte, et un visuel par bande
   ========================================================================== */

/* L'écart entre le titre d'une bande et son texte : 20 px, comme la maquette.
   La marge de 30 px venait du blockGap de WordPress, en plus des 20 px de
   retrait haut du texte. */
.ap-methode__item > .ap-methode__reponse {
	margin-block-start: 0;
}

/* Les visuels sont empilés dans la colonne : seul le visuel actif est dans le
   flux et donne sa hauteur, les autres sont posés par-dessus, invisibles. Le
   passage de l'un à l'autre est un fondu enchaîné. Aucune bande ouverte : la
   photo d'origine, celle du contenu de la page, revient. */
.ap-methode__corps .ap-visuel-decoupe {
	position: relative;
}

.ap-methode__corps .ap-visuel-decoupe > .wp-block-image {
	transition: opacity var(--ap-duree-ouverture) var(--ap-courbe);
}

.ap-methode__corps .ap-visuel-decoupe.a-variante > .wp-block-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ap-duree-ouverture) var(--ap-courbe), visibility 0s linear var(--ap-duree-ouverture);
}

.ap-methode__visuel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	container-type: inline-size;
	transition: opacity var(--ap-duree-ouverture) var(--ap-courbe), visibility 0s linear var(--ap-duree-ouverture);
}

.ap-methode__visuel.est-actif {
	position: relative;
	opacity: 1;
	visibility: visible;
	transition: opacity var(--ap-duree-ouverture) var(--ap-courbe);
}

.ap-methode__photo {
	display: block;
	width: 100%;
	height: auto;
}

/* La pastille chiffrée, logée dans l'encoche de la photo. Mesures relevées sur
   la maquette (visuel de 424,8 px de large), exprimées en largeur du visuel
   (cqw) pour suivre la photo quand la colonne rétrécit. */
.ap-methode__pastille {
	position: absolute;
	width: 55.02cqw;
	height: 29.72cqw;
	margin: 0;
	border-radius: 20px;
	background: var(--ap-orchidee);
	color: #fff;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.ap-methode__pastille--ultraviolet {
	background: var(--ap-ultraviolet);
}

.ap-methode__pastille--violet-premier {
	background: var(--ap-violet-premier);
}

.ap-methode__pastille--haut-droite {
	top: 0;
	right: 0;
	width: 57.5cqw;
	height: 26.96cqw;
}

.ap-methode__pastille--haut-gauche {
	top: 0;
	left: 0;
	width: 51.2cqw;
}

.ap-methode__pastille--bas-gauche {
	bottom: 0;
	left: 0;
}

.ap-methode__pastille--bas-droite {
	right: 0;
	bottom: 0;
}

.ap-methode__chiffre {
	position: absolute;
	top: 6.83cqw;
	left: 4.71cqw;
	font-size: 11.3cqw;
	line-height: 0.99;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}

.ap-methode__legende {
	position: absolute;
	top: 18.6cqw;
	left: 4.71cqw;
	font-size: 4.24cqw;
	line-height: 1.1;
	color: var(--ap-lilas);
	white-space: nowrap;
}

.ap-methode__pastille--haut-droite .ap-methode__chiffre {
	top: 6.15cqw;
	left: 47.64%;
	transform: translateX(-50%);
}

.ap-methode__pastille--haut-droite .ap-methode__legende {
	top: 17.42cqw;
	left: 5.25cqw;
}

@media (prefers-reduced-motion: reduce) {
	.ap-methode__corps .ap-visuel-decoupe > .wp-block-image,
	.ap-methode__visuel,
	.ap-methode__visuel.est-actif {
		transition: none;
	}
}

/* ==========================================================================
   Cartes chiffrées du hero de l'accueil : compteurs et barres
   Le script (adpremier_cartes_data_js, inc/animations.php) fait monter x1 → x4
   avec les barres, et +0M → +273M avec la jauge qui pousse vers la droite.
   Avant qu'il ne démarre, l'état de départ est posé ici pour que la valeur
   finale ne s'affiche pas un instant. Filet de sécurité : sans script, tout
   revient à l'état final au bout de 3 s. Sans « ap-anime » (animations
   réduites), rien ne bouge.
   ========================================================================== */
.ap-carte-barres span {
	transform-origin: 50% 100%;
}

.ap-carte-jauge span {
	transform-origin: 0 50%;
}

.ap-anime .ap-hero__media .ap-carte-data:not(.est-jouee) .ap-carte-data__valeur {
	visibility: hidden;
	animation: ap-cartes-secours 0s linear 3s forwards;
}

.ap-anime .ap-hero__media .ap-carte-data:not(.est-jouee) .ap-carte-barres span {
	transform: scaleY(0);
	animation: ap-cartes-secours 0s linear 3s forwards;
}

.ap-anime .ap-hero__media .ap-carte-data:not(.est-jouee) .ap-carte-jauge span {
	transform: scaleX(0);
	animation: ap-cartes-secours 0s linear 3s forwards;
}

@keyframes ap-cartes-secours {
	to {
		visibility: visible;
		transform: none;
	}
}

/* ==========================================================================
   Hero de l'accueil : la vidéo à la place de la photo
   Même principe que les heros vidéo des expertises et de L'agence. La
   silhouette est relevée au pixel sur ap-hero-visuel.png (1885 × 1185, sans
   transparence) : une encoche de 713 × 429 en haut à gauche pour la carte
   des leads, une de 643 × 593 en bas à droite pour celle des ventes, tous les
   angles au rayon 40 (≈ 20 px à l'écran), congés compris. Les cartes restent
   posées par-dessus, dans les encoches.
   ========================================================================== */
.ap-accueil-hero__cadre {
	--ap-silhouette-accueil: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201885%201185'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M%20753%200%20H%201845%20A%2040%2040%200%200%201%201885%2040%20V%20552%20A%2040%2040%200%200%201%201845%20592%20H%201282%20A%2040%2040%200%200%200%201242%20632%20V%201145%20A%2040%2040%200%200%201%201202%201185%20H%2040%20A%2040%2040%200%200%201%200%201145%20V%20469%20A%2040%2040%200%200%201%2040%20429%20H%20673%20A%2040%2040%200%200%200%20713%20389%20V%2040%20A%2040%2040%200%200%201%20753%200%20Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E");
	display: none;
	position: relative;
	width: 100%;
	aspect-ratio: 1885 / 1185;
	overflow: hidden;
	-webkit-mask-image: var(--ap-silhouette-accueil);
	mask-image: var(--ap-silhouette-accueil);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.ap-accueil-hero__video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: var(--ap-video-cadrage, 50% 50%);
	transform: scale(var(--ap-video-zoom, 1));
	transform-origin: var(--ap-video-cadrage, 50% 50%);
}

@media (min-width: 782px) {
	.ap-accueil-hero__cadre.ap-video-prete {
		display: block;
	}

	.ap-hero__media--video > .wp-block-image {
		display: none;
	}
}

/* Le calque vidéo suit la photo dans un groupe « flow » : WordPress lui pose
   le blockGap (30 px) comme à tout second enfant. La photo étant masquée, il
   doit occuper exactement sa place. */
.ap-hero__media > .ap-accueil-hero__cadre,
.ap-hero-agence__visuel > .ap-agence-hero__cadre {
	margin-block: 0;
}

/* ==========================================================================
   Section « À propos » de l'accueil : la vidéo de l'équipe
   Même vidéo et même principe que le hero de L'agence. La silhouette est
   relevée sur le canal alpha de ap-apropos-visuel.png (1398 × 937, dernière
   rangée vide) : une encoche de 166 × 290 en haut à droite, une de 206 × 243
   en bas à gauche, tous les angles au rayon 40, congés compris. Écart au
   tracé : l'anticrénelage des bords, rien d'autre.
   ========================================================================== */
.ap-apropos__cadre {
	--ap-silhouette-apropos: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201398%20937'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M%2040%200%20H%201192%20A%2040%2040%200%200%201%201232%2040%20V%20250%20A%2040%2040%200%200%200%201272%20290%20H%201358%20A%2040%2040%200%200%201%201398%20330%20V%20896%20A%2040%2040%200%200%201%201358%20936%20H%20246%20A%2040%2040%200%200%201%20206%20896%20V%20733%20A%2040%2040%200%200%200%20166%20693%20H%2040%20A%2040%2040%200%200%201%200%20653%20V%2040%20A%2040%2040%200%200%201%2040%200%20Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E");
	display: none;
	position: relative;
	width: 100%;
	aspect-ratio: 1398 / 937;
	overflow: hidden;
	-webkit-mask-image: var(--ap-silhouette-apropos);
	mask-image: var(--ap-silhouette-apropos);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Second enfant d'une colonne « flow » : pas de blockGap au-dessus. */
.ap-visuel-decoupe > .ap-apropos__cadre {
	margin-block: 0;
}

.ap-apropos__video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: var(--ap-video-cadrage, 50% 50%);
	transform: scale(var(--ap-video-zoom, 1));
	transform-origin: var(--ap-video-cadrage, 50% 50%);
}

@media (min-width: 782px) {
	.ap-apropos__cadre.ap-video-prete {
		display: block;
	}

	.ap-visuel-decoupe.ap-apropos--video > .wp-block-image {
		display: none;
	}
}

/* ==========================================================================
   Mouvement : un seul rythme pour tout le site
   Toutes les transitions du thème et tous ses scripts d'animation lisent ces
   jetons. Changer une valeur ici la change partout.
     survol     — couleurs, fonds, soulignés, méga-menu
     etat       — flèches des bandes, fond des questions, apparition d'une valeur
     ouverture  — ouverture d'une bande, fondu entre deux visuels
     fermeture  — fermeture d'une bande
     donnees    — compteurs, barres, jauges
     decalage   — écart entre deux éléments qui s'animent à la suite
   La courbe est la même partout : rapide au départ, posée à l'arrivée.
   ========================================================================== */
:root {
	--ap-courbe: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ap-duree-survol: 0.2s;
	--ap-duree-etat: 0.36s;
	--ap-duree-ouverture: 0.42s;
	--ap-duree-fermeture: 0.32s;
	--ap-duree-donnees: 1.4s;
	--ap-decalage: 0.14s;
}

/* Animations réduites : tout devient instantané, d'un coup. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--ap-duree-survol: 0.01s;
		--ap-duree-etat: 0.01s;
		--ap-duree-ouverture: 0.01s;
		--ap-duree-fermeture: 0.01s;
		--ap-duree-donnees: 0.01s;
		--ap-decalage: 0s;
	}
}

/* ==========================================================================
   Méthode des expertises : même comportement que la méthode de l'accueil
   Une seule étape ouverte à la fois, un visuel par étape (inc/animations.php,
   réglable dans l'onglet Méthode de chaque expertise), écart titre / texte
   ramené à 20 px. Les règles des visuels et des pastilles (.ap-methode__…)
   sont communes aux deux sections ; seule la colonne change de parent.
   ========================================================================== */
.ap-etape > .ap-etape__corps {
	margin-block-start: 0;
}

.ap-exp-methode__corps .ap-visuel-decoupe {
	position: relative;
}

.ap-exp-methode__corps .ap-visuel-decoupe > .wp-block-image {
	transition: opacity var(--ap-duree-ouverture) var(--ap-courbe);
}

.ap-exp-methode__corps .ap-visuel-decoupe.a-variante > .wp-block-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ap-duree-ouverture) var(--ap-courbe), visibility 0s linear var(--ap-duree-ouverture);
}

/* ==========================================================================
   Responsive — deux paliers (v1.23)
   Ordinateur, 1280 px et plus : la maquette. Aucune règle de ce bloc ne s'y
   applique ; l'empreinte de l'accueil à 1536 px sert de témoin.
   Intermédiaire, 782 → 1279 px : @media (max-width: 1279px).
   Mobile, 360 → 781 px : @media (max-width: 781px). 782 est le seuil où
   WordPress empile déjà les colonnes de blocs.
   Entre deux paliers, tout est fluide : marges et tailles suivent la largeur.
   ========================================================================== */

/* La mention « Google Partner » change de ligne en mobile : deux copies, une
   seule affichée à la fois. */
.ap-barre__gp-mobile {
	display: none;
}

@media (max-width: 1279px) {
	:root {
		--ap-marge-page: 32px;
		--ap-rythme: 64px;
		--ap-gouttiere: var(--ap-marge-page);
	}

	/* Marges de page. Chaque section porte 20 px en style en ligne (posé par
	   l'éditeur) : seul !important passe devant. */
	:where(.wp-site-blocks > header, .wp-site-blocks > footer, .wp-site-blocks > main, main .wp-block-post-content, main > .wp-block-group) > .has-global-padding {
		padding-left: var(--ap-marge-page) !important;
		padding-right: var(--ap-marge-page) !important;
	}

	.ap-cta {
		padding-inline: var(--ap-marge-page);
	}

	/* Rythme vertical des sections. */
	.ap-expertises,
	.ap-methode,
	.ap-temoignage,
	.ap-certifications {
		padding-block: var(--ap-rythme);
	}

	.ap-bandeau {
		padding-block: var(--ap-rythme) 20px;
	}

	/* --- En-tête ------------------------------------------------------------
	   Le menu passe en plein écran dès l'intermédiaire (WordPress ne le fait
	   que sous 600 px). Le méga-menu suit tout seul : son script regarde si le
	   bouton du menu plein écran est affiché. Ordre : logo, bouton, menu. */
	.ap-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.ap-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.ap-entete .ap-menu {
		order: 3;
		height: 48px;
		padding: 0 16px;
		border-radius: 60px;
	}

	.ap-entete .ap-pilule {
		margin-left: auto;
	}

	.ap-entete > .wp-block-group {
		column-gap: 16px;
	}

	/* --- Hero de l'accueil (maquette Figma « Mobile », 942 px) ---------------
	   Titre et bouton à gauche, avis à droite ; la photo en pleine largeur ;
	   dessous, les bulles et les deux cartes empilées à côté. */
	.ap-hero {
		padding-block: 24px var(--ap-rythme);
	}

	.ap-hero > :first-child {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 40px;
		row-gap: 28px;
		align-items: start;
	}

	.ap-hero > :first-child > * {
		margin-block: 0;
	}

	.ap-hero > :first-child > .is-layout-flex {
		display: contents;
	}

	.ap-hero > :first-child > .ap-etiquette {
		grid-column: 1;
		grid-row: 1;
	}

	.ap-hero .ap-hero__titre {
		grid-column: 1;
		grid-row: 2;
		margin: 0;
	}

	.ap-hero > :first-child > .ap-pilule {
		grid-column: 1;
		grid-row: 3;
	}

	.ap-hero .ap-reassurance {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
		margin: 0;
	}

	.ap-hero__visuel {
		display: grid;
		grid-template-columns: minmax(0, 1.57fr) minmax(0, 1fr);
		gap: 24px;
		align-items: stretch;
	}

	.ap-hero__media {
		display: contents;
	}

	.ap-hero__photo,
	.ap-hero__media > .ap-accueil-hero__cadre {
		grid-column: 1 / -1;
		grid-row: 1;
		margin: 0;
	}

	.ap-hero__bulles {
		grid-column: 1;
		grid-row: 2 / span 2;
		margin: 0;
	}

	.ap-hero__media .ap-carte-data--leads,
	.ap-hero__media .ap-carte-data--ventes {
		position: relative;
		inset: auto;
		width: auto;
		min-height: 0;
		margin: 0;
	}

	.ap-hero__media .ap-carte-data--ventes {
		grid-column: 2;
		grid-row: 2;
	}

	.ap-hero__media .ap-carte-data--leads {
		grid-column: 2;
		grid-row: 3;
	}

	/* Hors de ses encoches, la photo devient un rectangle, vidéo comprise. */
	.ap-hero__photo img,
	.ap-hero__media > .ap-accueil-hero__cadre {
		aspect-ratio: 3 / 2;
	}

	.ap-hero__photo img {
		object-fit: cover;
	}

	.ap-hero__media > .ap-accueil-hero__cadre {
		-webkit-mask-image: none;
		mask-image: none;
		border-radius: 24px;
	}

	/* --- Pied de page -------------------------------------------------------
	   Les trois colonnes de liens sur une ligne, la newsletter dessous. */
	.ap-footer {
		padding-top: 64px;
		padding-bottom: 32px;
	}

	.ap-footer__colonnes {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px 32px;
	}

	.ap-footer__colonnes > .ap-footer__colonne:last-child {
		grid-column: 1 / -1;
		max-width: 480px;
	}
}

@media (max-width: 781px) {
	:root {
		/* 22 px à 360, 24 px à 390, 32 px dès 545. */
		--ap-marge-page: clamp(20px, calc(2px + 5.5vw), 32px);
		--ap-rythme: 48px;
	}

	/* --- Barre utilitaire, sur trois lignes ---------------------------------
	   « Agence d'acquisition de L2C Group » / « Google Partner · 04 26 91 18 78 »
	   / « Espace client ». */
	.ap-barre-utilitaire > .wp-block-group {
		flex-direction: column;
		gap: 3px;
		text-align: center;
	}

	.ap-barre-utilitaire > .wp-block-group > .wp-block-group {
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 5px;
		row-gap: 3px;
	}

	.ap-barre-utilitaire .ap-barre__gp-ordi {
		display: none;
	}

	.ap-barre-utilitaire .ap-barre__gp-mobile {
		display: block;
	}

	.ap-barre-utilitaire .ap-espace-client {
		flex-basis: 100%;
	}

	/* --- En-tête : logo et menu sur une ligne, le bouton dessous ------------ */
	.ap-entete {
		padding-top: 14px !important;
		padding-bottom: 16px !important;
	}

	.ap-entete > .wp-block-group {
		row-gap: 14px;
	}

	.ap-entete .ap-logo img {
		width: 140px;
	}

	.ap-entete .ap-menu {
		order: 2;
	}

	.ap-entete .ap-pilule {
		order: 3;
		margin-left: 0;
	}

	/* --- Hero : texte, photo, les deux cartes côte à côte, puis les bulles -- */
	.ap-hero {
		padding-block: 16px var(--ap-rythme);
	}

	.ap-hero > :first-child {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 24px;
	}

	.ap-hero .ap-reassurance {
		grid-column: 1;
		grid-row: 3;
		align-self: start;
	}

	.ap-hero > :first-child > .ap-pilule {
		grid-row: 4;
	}

	.ap-hero__visuel {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.ap-hero__media .ap-carte-data--leads {
		grid-column: 1;
		grid-row: 2;
	}

	.ap-hero__media .ap-carte-data--ventes {
		grid-column: 2;
		grid-row: 2;
	}

	.ap-hero__bulles {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: 12px;
	}

	/* Cartes compactes : 120 px de contenu à 360 px d'écran. */
	.ap-hero__media .ap-carte-data {
		padding: 16px;
		border-radius: 18px;
		gap: 14px;
	}

	.ap-hero__media .ap-carte-data .ap-carte-data__intitule {
		font-size: 14px;
		padding-right: 32px;
	}

	.ap-hero__media .ap-carte-data .ap-carte-data__picto {
		top: 14px;
		right: 14px;
	}

	.ap-hero__media .ap-carte-data .ap-carte-data__picto img {
		width: 26px;
		height: 26px;
	}

	.ap-hero__media .ap-carte-data__valeur {
		font-size: clamp(30px, 9vw, 40px);
	}

	.ap-hero__media .ap-carte-data.ap-carte-data--leads {
		column-gap: 10px;
		row-gap: 14px;
	}

	.ap-hero__media .ap-carte-barres {
		gap: 5px;
	}

	.ap-hero__media .ap-carte-barres span {
		width: 11px;
		border-radius: 3px;
	}

	.ap-hero__media .ap-carte-barres span:nth-child(1) { height: 20px; }
	.ap-hero__media .ap-carte-barres span:nth-child(2) { height: 30px; }
	.ap-hero__media .ap-carte-barres span:nth-child(3) { height: 41px; }
	.ap-hero__media .ap-carte-barres span:nth-child(4) { height: 56px; }

	.ap-hero__media .ap-carte-jauge {
		gap: 6px;
	}

	.ap-hero__media .ap-carte-jauge span {
		height: 10px;
	}

	.ap-hero__media .ap-carte-jauge span:nth-child(2) {
		flex-basis: 30px;
	}

	/* --- Pied de page : liens sur deux colonnes, la newsletter en pleine
	   largeur (son champ serait inutilisable dans une demi-colonne). */
	.ap-footer {
		padding-top: 48px;
		padding-bottom: 24px;
	}

	.ap-footer__colonnes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 20px;
	}

	.ap-footer__colonnes > .ap-footer__colonne:last-child {
		max-width: none;
	}
}