/* Refonte 2026 : nouvelle page d'accueil (voir am-refonte.css pour les variables --am-*, am-header.css pour --am-header-*) */

/*
 * Chargée seulement quand page-accueil.php affiche la nouvelle version (amIsNewHome(), functions.php).
 * Sections : 1. hero, 2. logos, 3. notre ADN, 4. chiffres clés, 5. nos métiers, 6. bloc équipe, 7. nos clients ; composant slider partagé (assets/js/am-home.js).
 * Structure : parts/home/sections.php puis une partie par section. Mesures : docs/specs/home-0*.md (maquette 1920 px).
 * Tailles de police : --am-fs-* ou calc(… * var(--am-type-scale)) uniquement (maquette ~17 % trop grande, voulu).
 *
 * Fuites de l'ancien thème neutralisées :
 * - general.css « main > section:not(.no-reveal) { opacity: 0; top: 10vh } » (apparition au défilement pilotée par amagar.js) :
 *   les sections portent .no-reveal (V1 sans animation d'entrée) ;
 * - general.css « img { … } » et reset.css : dimensions et marges des images et listes reposées sous .am-home.
 */

.am-home {
	position: relative;
	background-color: var(--am-color-white);
	color: var(--am-color-ink);
	font-family: var(--am-font-sans);
	text-align: left; /* general.css : body { text-align: center } */
	overflow-x: clip;
}


/*******************
 1. hero
*******************/

/*
 * Maquette : photo 1950 × 1279 posée à y = -141, retournée horizontalement (grande roue à droite), sous un voile 20 % ; bas du voile et début du bandeau logos à y = 1073
 * (55,885vw à 1920). Bloc de texte à x = 147 sur la maquette, ramené dans le tunnel (--am-tunnel-edge) comme le header
 * et la page Équipe (décision du 18/09/2026) ; titre en haut à y = 329, bouton en bas à y = 830 : bloc centré dans la
 * hauteur restante sous le header.
 */
.am-hero {
	--am-hero-pad-x: var(--am-tunnel-edge);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: max(55.885vw, 34rem);
	padding: calc(var(--am-header-h) + var(--am-header-float) + var(--am-space-6)) var(--am-hero-pad-x) var(--am-space-7);
	overflow: hidden;
	background-color: var(--am-color-slate);
	color: var(--am-color-white);
}

.am-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.am-hero__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 75%;
	transform: scaleX(-1); /* retournement appliqué à l'objet dynamique dans le PSD */
}
/*
 * Animations (html.am-anim) : zoom lent de la photo au chargement (1,12 → 1 en 2,4 s, propriété scale, qui s'ajoute au
 * retournement), puis parallaxe à 40 % de la vitesse du défilement (data-am-parallax-speed, am-reveal.js) : la photo
 * descend moins vite que la page ; le vide qu'elle laisse en haut reste toujours au-dessus de l'écran.
 */
@keyframes am-hero-zoom {
	from { scale: 1.12; }
	to { scale: 1; }
}
.am-anim .am-hero__img {
	animation: am-hero-zoom 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* Voile noir 20 % de la maquette (décision client : en CSS, pas incrusté dans la photo) */
.am-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--am-overlay-hero);
}

.am-hero__content {
	/* Apparition (.am-cascade) : plus lente et plus ample que dans le reste de la page, après le chargement */
	--am-reveal-step: 180ms;
	--am-reveal-duration: 1.1s;
	--am-reveal-shift: 3rem;
	--am-reveal-start: 0.2s;
	position: relative;
	z-index: 1;
	max-width: 38rem;
}

/* Titre : 3 lignes en maquette (608 px pour 70 px de corps), largeur en em pour garder les mêmes coupures à toute taille */
.am-hero__title {
	max-width: 8.9em;
	color: var(--am-color-white);
}

/* Introduction : Poppins Regular 22 / 33 px, 575 px de large */
.am-hero__intro {
	max-width: 27em;
	margin: 2.75rem 0 0;
	font-size: calc(1.375rem * var(--am-type-scale));
	line-height: 1.5;
	font-weight: var(--am-fw-regular);
	color: var(--am-color-white);
}

/* Bouton : 208 × 53 px, coins arrondis comme le bouton Contact du header (pas une pilule) */
.am-hero__action {
	margin-top: 2.5rem;
}
.am-hero .am-hero__cta {
	min-width: 13rem;
	padding: 0.875rem 1.9375rem;
	border-radius: 0.625rem;
	line-height: 1.5;
}

	/* Pas de maquette tablette ni mobile : le bloc de texte recouvre la grande roue, voile renforcé côté texte */
	@media screen and (max-width: 1279px) {
		.am-hero__intro { margin-top: var(--am-space-6); }
		.am-hero__action { margin-top: var(--am-space-6); }
		.am-hero__media::after {
			background: linear-gradient(to right, rgba(0,0,0,0.45), rgba(0,0,0,0.2) 70%);
		}
	}
	@media screen and (max-width: 767px) {
		.am-hero {
			justify-content: flex-end;
			min-height: 38rem;
			padding-bottom: var(--am-space-8);
		}
		.am-hero__img {
			object-position: 70% 75%;
		}
		.am-hero__media::after {
			background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0.25) 80%);
		}
		.am-hero__intro { max-width: none; }
	}


/*******************
 2. logos
*******************/

/*
 * Maquette : bande blanche de y = 1073 à 1273, logos de y = 1111 à 1227 (116 px), 7 logos espacés de 260 px de centre à centre.
 * Hauteurs irrégulières en maquette, harmonisées : chaque logo fait 60 px de haut (176 px de large au plus) et prend sa
 * largeur propre ; l'espace entre deux logos est constant (--am-logos-gap), y compris à la jointure de la boucle
 * (décision du 18/09/2026, au lieu de cases de même largeur).
 * Décision du 17/09 : logos en niveaux de gris, couleurs d'origine au survol.
 * Durée d'un tour proportionnelle au nombre de logos (--am-logos-count, posé par parts/home/logos.php) : vitesse constante.
 * Légende facultative sous un logo (P9, 22/09) : hors du flux, sous l'image, centrée ; ni la hauteur ni la largeur des
 * éléments ne changent, les autres logos ne bougent pas et la jointure de la boucle reste exacte. Elle peut dépasser
 * l'élément vers le bas : le viewport (overflow: hidden) reçoit une marge intérieure basse de deux lignes de légende,
 * compensée par une marge négative, pour ne pas la rogner sans changer la hauteur de la section.
 */
.am-logos {
	--am-logos-item-w: 11rem;
	--am-logos-item-h: 3.75rem;
	--am-logos-gap: 5.25rem;
	--am-logos-speed: 4s;
	--am-logos-legende-w: calc(var(--am-logos-item-w) + var(--am-logos-gap));
	--am-logos-legende-h: calc(2 * var(--am-fs-caption) * var(--am-lh-caption));
	position: relative;
	padding: 2.375rem 0 2.875rem;
	background-color: var(--am-color-white);
}

.am-logos__viewport {
	overflow: hidden;
	padding-bottom: var(--am-logos-legende-h);
	margin-bottom: calc(-1 * var(--am-logos-legende-h));
}
.am-logos__viewport:focus-visible {
	outline: var(--am-focus-ring);
	outline-offset: calc(-1 * var(--am-focus-offset) - 2px);
}

.am-logos__track {
	display: flex;
	width: max-content;
	animation: am-logos-defile calc(var(--am-logos-count, 10) * var(--am-logos-speed)) linear infinite;
}
.am-logos__viewport:hover .am-logos__track,
.am-logos__viewport:focus-within .am-logos__track {
	animation-play-state: paused;
}

/* Chaque liste porte l'espace qui la sépare de la suivante : -50 % retombe exactement sur le début de la copie */
.am-home .am-logos__list {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--am-logos-gap);
	margin: 0;
	padding: 0 var(--am-logos-gap) 0 0;
	list-style: none;
}
.am-home .am-logos__item {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	height: 7.25rem;
	margin: 0;
	padding: 0;
	background: none;
}
.am-home .am-logos__img {
	display: block;
	width: auto;
	height: var(--am-logos-item-h);
	max-width: var(--am-logos-item-w);
	object-fit: contain;
	filter: grayscale(1);
	transition: filter var(--am-transition);
}
.am-home .am-logos__item:hover .am-logos__img {
	filter: none;
}
.am-home .am-logos__item--legende {
	position: relative;
}
/* Largeur par défaut : un logo et l'espace qui le sépare du suivant (deux lignes au plus) ; une classe am-w-* l'emporte */
.am-home .am-logos__legende {
	position: absolute;
	top: calc(50% + var(--am-logos-item-h) / 2 + var(--am-space-1));
	left: 50%;
	width: max-content;
	max-width: var(--am-logos-legende-w);
	transform: translateX(-50%);
	font-size: var(--am-fs-caption);
	line-height: var(--am-lh-caption);
	color: var(--am-color-slate);
	text-align: center;
}

@keyframes am-logos-defile {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

	@media screen and (max-width: 767px) {
		.am-logos {
			--am-logos-item-w: 8rem;
			--am-logos-item-h: 3.25rem;
			--am-logos-gap: 2.5rem;
			padding: var(--am-space-6) 0;
		}
		.am-home .am-logos__item { height: 4.5rem; }
	}

	/* Animations limitées : bandeau figé sur une ligne, parcourable au doigt, à la souris ou au clavier (flèches), sans répétition ni copie */
	@media (prefers-reduced-motion: reduce) {
		.am-logos__viewport {
			overflow-x: auto;
			overscroll-behavior-x: contain;
		}
		.am-logos__track {
			animation: none;
		}
		.am-home .am-logos__list {
			padding-left: var(--am-space-page);
			padding-right: var(--am-space-page);
		}
		.am-home .am-logos__list[aria-hidden="true"],
		.am-home .am-logos__item[aria-hidden="true"] {
			display: none;
		}
		.am-home .am-logos__img { transition: none; }
	}



/*******************
 composant slider
*******************/

/*
 * Balisage et comportement : amSliderArrows() (functions.php) et assets/js/am-home.js. Flèches de refonte/BAT/BAT/SLIDER.svg.
 * Sans JS, les flèches restent en hidden et tous les éléments sont affichés.
 */
.am-slider__nav {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.625rem;
}
.am-slider__arrow {
	display: block;
	width: 2.125rem;
	height: 2.125rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--am-color-ink);
	line-height: 0;
	cursor: pointer;
	transition: color var(--am-transition), opacity var(--am-transition);
}
.am-slider__arrow[hidden] {
	display: none;
}
.am-slider__arrow:hover:not(:disabled) {
	color: var(--am-color-pink);
}
.am-slider__arrow:focus-visible {
	outline: var(--am-focus-ring);
	outline-offset: var(--am-focus-offset);
}
.am-slider__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}
.am-slider__icon {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible; /* le cercle touche les bords du viewBox : sans ça, son anticrénelage était rogné */
	fill: currentColor;
}
.am-home .am-slider__item[hidden] {
	display: none;
}
/* Glissement à la souris (mode scroll, [data-am-slider-drag], am-home.js) : main ouverte sur la rangée, fermée pendant le
   glissement ; pas d'accroche aux éléments ni de sélection de texte le temps du geste (l'accroche est rejouée au relâchement) */
	@media (hover: hover) and (pointer: fine) {
		.am-slider.is-draggable .am-slider__viewport {
			cursor: grab;
		}
	}
.am-slider__viewport.is-dragging {
	scroll-snap-type: none;
	user-select: none;
	-webkit-user-select: none;
	cursor: grabbing;
}
.am-slider__viewport.is-dragging * {
	cursor: grabbing;
}


/*******************
 3. notre ADN
*******************/

/*
 * Maquette : bande #8F4584 de y = 1276 à 1909 ; étiquette (haut des capitales) à y = 1341, titre de 1421 à 1554 centré sur 630 px,
 * piliers à y = 1624 dans --am-container-narrow (3 colonnes de ~410 px, gouttière ~72 px), textes jusqu'à y = 1789.
 * La photo des chiffres clés recouvre les 65 derniers px de la bande (voir 4.).
 * Grille auto-fit : 1 à N piliers, les colonnes se répartissent seules.
 */
.am-adn {
	padding: 3.5rem 0 7.25rem;
	background-color: var(--am-color-purple);
	color: var(--am-color-white);
	text-align: center;
}
.am-adn .am-adn__eyebrow {
	color: var(--am-color-white);
}
.am-adn__title {
	/* 16em : le titre EN « Supporting the ongoing evolution » (15,6em) tient sur une ligne dès 768 px ; le FR, coupé par <br>, reste sur ses deux lignes */
	max-width: 16em;
	margin: 2.625rem auto 0;
	color: var(--am-color-white);
}
.am-home .am-adn__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--am-space-8) var(--am-space-gap-lg);
	margin: 4.25rem 0 0;
	padding: 0 0 0 0.75rem;
	list-style: none;
	text-align: left;
}
.am-home .am-adn__item {
	position: relative;
	margin: 0;
	padding: 0 0 0 1.8125rem;
	background: none;
}
/* Puce : triangle rose 15 × 18 px, décoratif. Avec JS (html.am-anim), éteinte par défaut, allumée l'une après l'autre au
   défilement et laissée allumée jusqu'au rechargement (.is-active, am-home.js) ; sans JS ou en mouvement réduit (pas de
   html.am-anim), toutes visibles d'emblée. */
.am-adn__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: calc(var(--am-fs-card-title) * var(--am-lh-card-title) / 2 - 0.5625rem);
	width: 0.9375rem;
	height: 1.125rem;
	background-color: var(--am-color-pink);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.am-anim .am-adn__item::before {
	opacity: 0;
	transform: translateX(-0.5rem) scale(0.4);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.am-anim .am-adn__item.is-active::before {
	opacity: 1;
	transform: none;
}
.am-adn__item-title {
	margin: 0;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-card-title);
	line-height: var(--am-lh-card-title);
	font-weight: var(--am-fw-semibold);
	color: var(--am-color-white);
}
.am-adn__item-text {
	max-width: 25rem;
	margin: 1.25rem 0 0;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-body);
	line-height: var(--am-lh-body);
	font-weight: var(--am-fw-regular);
	color: var(--am-color-white);
}

	@media screen and (max-width: 1279px) {
		.am-adn { padding-top: var(--am-space-11); }
		.am-home .am-adn__list { padding-left: 0; }
	}
	@media screen and (max-width: 767px) {
		.am-adn { padding: var(--am-space-9) 0 var(--am-space-12); }
		.am-adn__title { margin-top: var(--am-space-5); }
		.am-home .am-adn__list { margin-top: var(--am-space-8); gap: var(--am-space-7); }
		.am-adn__item-text { margin-top: var(--am-space-3); }
	}


/*******************
 4. chiffres clés
*******************/

/*
 * Maquette : photo visible de x = 39 à 1872 et de y = 1844 à 2724 (1834 × 880, coins arrondis ~30 px), qui chevauche
 * de 65 px le bas de la bande ADN. Carte blanche 520 × 575 à x = 1217, y = 2011 (coins ~50 px), soit 136 px du bord droit
 * de la photo et 167 px sous son haut. Titre à 58 px du bord gauche de la carte ; chiffres DM Serif Text italique 80 px,
 * libellés Poppins 24 px ; bouton 224 × 46 qui dépasse de 19 px sous la carte.
 * Photo et carte partagent la même cellule de grille : si la carte s'allonge (sans JS, 8 chiffres), la photo suit.
 */
.am-chiffres {
	--am-chiffres-pad-x: 2.6875rem;
	position: relative;
	padding: 0 var(--am-chiffres-pad-x);
}
.am-adn + .am-chiffres {
	margin-top: -4.0625rem;
}
.am-chiffres__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0 auto;
}
.am-chiffres__media,
.am-chiffres__card {
	grid-area: 1 / 1;
}
/* width: 100 % : sans largeur fixée, quand la carte est plus haute que la photo (min-height), le ratio élargissait la photo
   au-delà de la fenêtre (1280 à 1600 px : bord droit et coins arrondis coupés) ; la photo s'allonge, elle ne s'élargit plus */
.am-chiffres__media {
	position: relative;
	width: 100%;
	min-height: 100%;
	aspect-ratio: 1834 / 880;
	overflow: hidden;
	border-radius: 1.875rem;
	background-color: var(--am-color-slate);
}
.am-home .am-chiffres__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
}
/* Parallaxe (.am-parallax) : la photo déborde de l'amplitude en haut et en bas */
.am-chiffres__media {
	--am-parallax-range: 100;
}
.am-anim.am-anim .am-chiffres__img {
	top: calc(var(--am-parallax-range) * -1px);
	height: calc(100% + var(--am-parallax-range) * 2px);
}

/*
 * Largeur : 520 px dès 1600 px de fenêtre (28 % de la photo à 1920, comme la maquette) ; en dessous, la photo rétrécit
 * et une carte fixe en prenait 44 % à 1280 : la carte passe de façon linéaire de 520 px (1600) à 400 px (1280), soit
 * environ un tiers de la photo sur tout l'intervalle. Marges latérales dans la même proportion (58 et 48 px à 520 px).
 */
.am-chiffres__card {
	--am-chiffres-card-w: clamp(25rem, 37.5vw - 5rem, 32.5rem);
	position: relative;
	z-index: 1;
	align-self: start;
	justify-self: end;
	width: var(--am-chiffres-card-w);
	/* Bord droit sur celui du tunnel (maquette : 136 px du bord de la photo) ; % = largeur de la photo (page - 2 × pad-x) */
	margin: 8.7vw max(calc(var(--am-space-page) - var(--am-chiffres-pad-x)), calc((100% - var(--am-container-narrow)) / 2)) 3.5rem 0;
	padding: 2.125rem calc(var(--am-chiffres-card-w) * 48 / 520) 0 calc(var(--am-chiffres-card-w) * 58 / 520);
	border-radius: 3.125rem;
	background-color: var(--am-color-white);
	color: var(--am-color-ink);
	text-align: left;
}
.am-chiffres--sans-photo .am-chiffres__card {
	justify-self: center;
	margin: var(--am-space-8) 0;
}

/*
 * Slider vertical en boucle (data-am-slider-mode="vertical" + data-am-slider-loop, am-home.js) : 3 chiffres visibles,
 * un pas d'un chiffre toutes les 4,5 s, le premier revient après le dernier, sans flèches (décisions du 18/09/2026 ;
 * maquette : pages de 3 et flèches à droite du titre). Le JS fixe la hauteur du viewport et fait glisser la piste ;
 * sans JS, tous les chiffres restent affichés.
 */
.am-chiffres__slider.is-ready .am-chiffres__viewport {
	overflow: hidden;
}
.am-chiffres__slider .am-chiffres__list {
	transition: transform 0.63s cubic-bezier(0.6, 0, 0.2, 1);
}
/* Chiffres hors de la fenêtre (.is-out, am-home.js) : effacés, pour qu'aucun haut de chiffre ne dépasse sous le dernier
   quand les libellés passent sur plusieurs lignes (mobile) ; fondu pendant le glissement. Restent lus par les lecteurs d'écran. */
.am-chiffres__slider.is-ready .am-chiffres__item {
	transition: opacity 0.45s ease;
}
.am-chiffres__slider.is-ready .am-chiffres__item.is-out {
	opacity: 0;
}
	@media (prefers-reduced-motion: reduce) {
		.am-chiffres__slider .am-chiffres__list,
		.am-chiffres__slider.is-ready .am-chiffres__item { transition: none; }
	}
.am-chiffres__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--am-space-4);
}
/*
 * Boutons pause / lecture et « chiffre suivant » (WCAG 2.2.2, parts/home/chiffres.php) : à droite du titre, là où la maquette
 * plaçait des flèches, au style des flèches de slider (.am-slider__arrow : cercle fin encre, rose au survol, anneau au focus).
 */
.am-chiffres__controls {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.625rem;
	margin-block: -0.5rem; /* boutons de 34 px plus hauts que le titre en mobile : la tête de carte garde sa hauteur */
}
.am-chiffres__control .am-slider__icon {
	fill: none; /* icônes au trait (stroke), et non pleines comme celles de SLIDER.svg */
}
.am-chiffres__control .am-chiffres__icon-play,
.am-chiffres__control.is-paused .am-chiffres__icon-pause {
	display: none;
}
.am-chiffres__control.is-paused .am-chiffres__icon-play {
	display: inline;
}
/* « Chiffres » Poppins SemiBold 37 px, « clés » DM Serif Display italique 42 px */
.am-chiffres__title {
	--am-title-serif: var(--am-font-serif-display);
	color: var(--am-color-ink);
	letter-spacing: -0.04em;
}
.am-chiffres__title em,
.am-chiffres__title i {
	font-size: 1.125em;
	letter-spacing: 0;
}

.am-chiffres__viewport {
	margin-top: 1.75rem;
}
/* Colonne à espacement par gap : les éléments masqués des autres pages ne laissent pas d'espace */
.am-home .am-chiffres__list {
	display: flex;
	flex-direction: column;
	gap: 2.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.am-home .am-chiffres__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	background: none;
}
.am-chiffres__number {
	font-family: var(--am-font-serif-text);
	font-style: italic;
	font-weight: var(--am-fw-regular);
	font-size: var(--am-fs-chiffre);
	line-height: 1;
	letter-spacing: 0;
}
.am-chiffres__label {
	margin-top: 0.5rem;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-body-lg);
	line-height: 1.3;
	font-weight: var(--am-fw-regular);
}

.am-chiffres__action {
	margin: 2.5rem 0 -1.1875rem;
}
.am-chiffres .am-chiffres__cta {
	min-width: 14rem;
	padding: 0.5625rem 1.9375rem;
	border-radius: 0.625rem;
	font-size: calc(1.375rem * var(--am-type-scale));
	line-height: 1.5;
}

	/* Pas de maquette tablette ni mobile : photo pleine largeur, carte posée à cheval sur son bas */
	@media screen and (max-width: 1279px) {
		.am-chiffres { --am-chiffres-pad-x: var(--am-space-page); }
		.am-adn + .am-chiffres { margin-top: calc(-1 * var(--am-space-10)); }
		.am-chiffres__media,
		.am-chiffres__card { grid-area: auto; }
		.am-chiffres__media { min-height: 0; aspect-ratio: 16 / 9; }
		.am-chiffres__card {
			--am-chiffres-card-w: 32.5rem; /* marges latérales de 520 px : tablette inchangée */
			justify-self: center;
			width: min(32.5rem, 100% - 2 * var(--am-space-6));
			margin: calc(-1 * var(--am-space-13)) 0 var(--am-space-8);
			box-shadow: 0 0.5rem 2rem color-mix(in srgb, var(--am-color-ink) 10%, transparent); /* carte blanche sur fond blanc sous la photo */
		}
	}
	@media screen and (max-width: 767px) {
		/* Parallaxe réduite : 100 px de débord sur un cadre de 250 px de haut grossissaient trop la photo */
		.am-chiffres__media { aspect-ratio: 4 / 3; border-radius: var(--am-radius-card); --am-parallax-range: 40; }
		.am-chiffres__card {
			width: calc(100% - 2 * var(--am-space-4));
			margin-top: calc(-1 * var(--am-space-10));
			padding: var(--am-space-6) var(--am-space-5) 0;
			border-radius: var(--am-radius-card);
		}
	}
	/*
	 * Téléphone : le bouton (largeur mini 14rem), aligné à gauche comme le texte, occupait presque toute la largeur utile
	 * et laissait un vide à droite seulement (23 px à 375, débord de la zone de texte à 320) : il est centré dans la carte,
	 * sa largeur mini plafonnée à celle de la carte. Flex : un bouton plus large que la zone de texte déborde des deux côtés.
	 */
	@media screen and (max-width: 479px) {
		.am-chiffres__action { display: flex; justify-content: center; }
		.am-chiffres .am-chiffres__cta { min-width: min(14rem, 100%); }
	}



/*******************
 5. nos métiers
*******************/

/*
 * Maquette : étiquette à y = 2809 (85 px sous la photo des chiffres), titre 2853 → 2987, introduction 3014 → 3076 centrée
 * sur 548 px ; flèches (2 cercles de 30 px) de x = 1730 à 1810 et de y = 3047 à 3077, soit 110 px du bord droit, bas
 * aligné sur l'introduction. Cartes 485 × 571 (coins ~30 px) à partir de x = 39, espacées de 20 px, à y = 3144 : la 4ᵉ
 * est coupée par le bord droit. Cercle blanc 84 px à 57 px du haut, titre à 171 px, points (Poppins Medium 21 px, coche)
 * à 297 px et 44 px du bord gauche, lien souligné à 452 px et 62 px du bord. Décor filaire ~200 px qui déborde en bas à droite.
 * Bas des cartes à y = 3713, photo du bloc équipe à 3810.
 */
.am-metiers {
	--am-metiers-card-w: 25em; /* 400 px (maquette : 485 px, réduit à la demande d'Antoine le 18/09/2026) */
	--am-metiers-card-h: 35.6875rem;
	--am-metiers-gap: 1.25rem;
	/* Rangée élargie (Antoine, 18/09/2026) : 1re carte près du bord de la page, comme la maquette (39 px), et non plus au bord
	   du tunnel ; 40 px dès 768 px (marge de page de la tablette), 24 px en mobile. Défilement jusqu'au bord droit. */
	--am-metiers-edge: min(var(--am-space-page), var(--am-space-7));
	padding: 5rem 0 6rem;
	background-color: var(--am-color-white);
	color: var(--am-color-ink);
}
.am-metiers__intro {
	text-align: center;
}
.am-metiers .am-metiers__eyebrow {
	color: var(--am-color-purple);
}
.am-metiers__title {
	max-width: 12em;
	margin: 1.5rem auto 0;
	color: var(--am-color-ink);
}
/* Largeur portée par .wrapper-1000 (inc/start.css, 1000 px) posée sur l'élément — demande d'Antoine du 18/09 ;
   plus de max-width ici, sinon les deux se disputeraient la largeur. */
.am-metiers__text {
	margin: 1.5rem auto 0;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-body-lg);
	line-height: var(--am-lh-body-lg);
	font-weight: var(--am-fw-regular); /* textes sous les titres en Regular (Antoine, 18/09/2026 ; maquette : Medium) */
}
/* Liste des métiers dans l'introduction ([am_metiers_liste]) : titres des cartes en liens soulignés */
.am-metiers__intro-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--am-transition);
}
.am-metiers__intro-link:hover {
	color: var(--am-color-purple);
	text-decoration: underline;
}
.am-metiers__intro-link:focus-visible {
	outline: var(--am-focus-ring);
	outline-offset: var(--am-focus-offset);
	border-radius: 0.125rem;
}

.am-metiers__slider {
	position: relative;
	margin-top: 4.1875rem;
}
/* Flèches : bord droit du tunnel (maquette : 110 px du bord), bas aligné sur l'introduction (67 px au-dessus des cartes) */
.am-metiers__nav {
	position: absolute;
	right: var(--am-tunnel-edge);
	bottom: calc(100% + 4.1875rem);
	gap: 1.25rem;
}
.am-metiers__nav .am-slider__arrow {
	width: 1.875rem;
	height: 1.875rem;
}

.am-metiers__viewport {
	position: relative;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--am-metiers-edge);
	scrollbar-width: none;
}
.am-metiers__viewport::-webkit-scrollbar {
	display: none;
}
.am-home .am-metiers__list {
	display: flex;
	align-items: stretch;
	gap: var(--am-metiers-gap);
	width: max-content;
	margin: 0;
	padding: 0 var(--am-metiers-edge);
	list-style: none;
}

/* Carte : même hauteur pour toutes (rangée étirée), lien calé en bas */
.am-home .am-metiers__card {
	--am-metiers-card-color: var(--am-color-purple);
	position: relative;
	display: flex;
	flex: 0 0 var(--am-metiers-card-w);
	flex-direction: column;
	align-items: stretch;
	min-height: var(--am-metiers-card-h);
	margin: 0;
	padding: 3.5625rem 2.75rem 5.5rem;
	overflow: hidden;
	border-radius: 1.875rem;
	background-color: var(--am-metiers-card-color);
	color: var(--am-color-white);
	scroll-snap-align: start;
}
/*
 * Survol des cartes (variante « décor » retenue le 18/09/2026, parmi trois essais) : l'icône filaire grossit et tourne,
 * le cercle blanc se gonfle. Aussi au focus clavier du lien de la carte.
 */
	@media (prefers-reduced-motion: no-preference) {
		.am-metiers__decor,
		.am-metiers__icon {
			transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s ease;
		}
	}
.am-metiers__card:hover .am-metiers__decor,
.am-metiers__card:focus-within .am-metiers__decor {
	opacity: 0.8;
	transform: rotate(-15deg) scale(1.3);
}
.am-metiers__card:hover .am-metiers__icon,
.am-metiers__card:focus-within .am-metiers__icon {
	transform: scale(1.12);
}

.am-home .am-metiers__card--coral { --am-metiers-card-color: var(--am-color-coral); }
.am-home .am-metiers__card--mauve { --am-metiers-card-color: var(--am-color-mauve); }
.am-home .am-metiers__card--teal-light { --am-metiers-card-color: var(--am-color-teal-light); }
.am-home .am-metiers__card--teal { --am-metiers-card-color: var(--am-color-teal-deep); } /* #188382 : texte blanc à 4,56:1 (AA) */

/* Décor : icône filaire ~200 px, 50 % d'opacité, qui déborde du coin bas droit */
.am-metiers__decor {
	position: absolute;
	right: -2rem;
	bottom: -3.5rem;
	width: 12.5rem;
	height: 12.5rem;
	opacity: 0.5;
	pointer-events: none;
}
.am-home .am-metiers__decor-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

.am-metiers__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 5.25rem;
	height: 5.25rem;
	border-radius: 50%;
	background-color: var(--am-color-white);
}
.am-home .am-metiers__icon-img {
	display: block;
	width: 2.875rem;
	height: 2.875rem;
	max-width: none;
	object-fit: contain;
}

/* Titre : « Coaching » Poppins SemiBold 32 px, segment italique DM Serif Display 35 px, interligne 40 px */
.am-metiers__card-title {
	--am-title-serif: var(--am-font-serif-display);
	position: relative;
	margin: 1.875rem 0 0;
	color: var(--am-color-white);
	text-align: center;
	line-height: 1.14;
}
.am-metiers__card-title em,
.am-metiers__card-title i {
	font-size: 1.1em;
}

.am-home .am-metiers__points {
	position: relative;
	max-width: 21rem;
	margin: 2.25rem 0 2rem;
	padding: 0;
	list-style: none;
}
.am-home .am-metiers__point {
	position: relative;
	margin: 0;
	padding: 0 0 0 1.8125rem;
	background: none;
	font-family: var(--am-font-sans);
	font-size: calc(1.3125rem * var(--am-type-scale));
	line-height: 1.15;
	font-weight: var(--am-fw-medium);
	color: var(--am-color-white);
}
.am-home .am-metiers__point + .am-metiers__point {
	margin-top: 1rem;
}
/* Coche 15 × 10 px */
.am-metiers__point::before {
	content: '';
	position: absolute;
	left: 0.0625rem;
	top: 0.3125em;
	width: 0.8125rem;
	height: 0.4375rem;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}

.am-metiers__link {
	position: static; /* le ::after se cale sur la carte : zone cliquable sur toute la carte */
	align-self: flex-start;
	margin: auto 0 0 1.125rem;
	font-family: var(--am-font-sans);
	font-size: calc(1.375rem * var(--am-type-scale));
	line-height: 1.5;
	font-weight: var(--am-fw-regular);
	color: var(--am-color-white);
	/* Pas souligné au repos ; au survol et au focus, le trait se trace de gauche à droite (décision du 18/09/2026) */
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 calc(100% - 0.05em);
	background-size: 0 1px;
	transition: background-size 0.35s ease-out;
}
/* Zone de clic étendue à toute la carte (décision du 18/09/2026) ; le soulignement se trace au survol de la carte */
.am-metiers__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}
.am-metiers__card:hover .am-metiers__link,
.am-metiers__link:hover,
.am-metiers__link:focus {
	color: var(--am-color-white);
	text-decoration: none;
	background-size: 100% 1px;
}
	@media (prefers-reduced-motion: reduce) {
		.am-metiers__link { transition: none; }
	}
.am-metiers__link:focus-visible {
	outline: 2px solid var(--am-color-white);
	outline-offset: 0.25rem;
	border-radius: 0.125rem;
}

/*
 * Défilement lié au scroll (am-home.js, dès 768 px, hors mouvement réduit, si la rangée tient dans l'écran) : la section
 * reste collée pendant que le défilement vertical fait avancer les cartes. Le JS fixe la hauteur du bloc porteur
 * (hauteur naturelle + distance horizontale à parcourir) et --am-metiers-pin-top (sous le header, bloc centré dans la
 * hauteur restante), puis pose .is-pinned-all (introduction et rangée collées) ou .is-pinned-row (rangée seule, flèches
 * comprises, quand l'introduction ne tient pas avec elle). Sans accroche : la position suit le défilement au pixel.
 */
.am-metiers.is-pinned-all .am-metiers__stage,
.am-metiers.is-pinned-row .am-metiers__slider {
	position: sticky;
	top: var(--am-metiers-pin-top, 0px);
}
.am-metiers.is-pinned-all .am-metiers__viewport,
.am-metiers.is-pinned-row .am-metiers__viewport {
	scroll-snap-type: none;
}

	@media screen and (max-width: 1279px) {
		.am-metiers {
			--am-metiers-card-w: 22rem;
			--am-metiers-card-h: 0px;
			padding: var(--am-space-12) 0 var(--am-space-12);
		}
		.am-metiers__slider { margin-top: var(--am-space-8); }
		.am-metiers__nav {
			position: static;
			justify-content: flex-end;
			margin: 0 var(--am-space-page) var(--am-space-5);
		}
		.am-home .am-metiers__card { padding: var(--am-space-8) var(--am-space-6) var(--am-space-12); }
	}
	@media screen and (max-width: 767px) {
		.am-metiers { --am-metiers-card-w: min(20rem, calc(100vw - 2 * var(--am-space-page) - 2rem)); }
	}
	/* Petits mobiles : une carte presque pleine largeur (le bord de la suivante reste visible), marges intérieures réduites */
	@media screen and (max-width: 479px) {
		.am-metiers { --am-metiers-card-w: calc(100vw - 2 * var(--am-space-page) - 1.5rem); }
		.am-home .am-metiers__card { padding: var(--am-space-7) var(--am-space-5) var(--am-space-12); }
	}


/*******************
 6. bloc équipe
*******************/

/*
 * Maquette : photo pleine largeur de y = 3810 à 4622 (1920 × 812) ; carte 464 px à x = 1258 (198 px du bord droit),
 * partie blanche de y = 4359 au bas de la photo, bandeau-bouton teal de 72 px sous la photo (jusqu'à 4695), coins ~30 px.
 * Titre Poppins SemiBold + DM Serif Text italique 28 / 33 px à 47 px du bord et 45 px du haut ; texte 22 / 28 px
 * sur 360 px ; libellé du bouton 22 px, aligné sur le texte.
 * La section réserve sous la photo la hauteur du bandeau : la carte est posée sur le bas de la section.
 */
.am-equipe {
	--am-equipe-band-h: 4.5rem;
	--am-equipe-pad-x: 2.9375rem;
	position: relative;
	padding-bottom: var(--am-equipe-band-h);
	background-color: var(--am-color-white);
	color: var(--am-color-ink);
}
.am-equipe--sans-bouton {
	--am-equipe-band-h: 0px;
}
.am-equipe__media {
	position: relative;
	aspect-ratio: 1920 / 812;
	overflow: hidden;
	background-color: var(--am-color-slate);
}
.am-home .am-equipe__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 40%;
}
/* Parallaxe (.am-parallax, amplitude 130 px) : avec les animations, le cadrage de la maquette (ci-dessous) laisse la
   place à une photo en cover qui déborde de l'amplitude en haut et en bas ; à 1920 px, le cadre fait 1072 px de haut
   pour 1920 de large et la photo y tient comme dans la maquette (cadrée à droite : x = -130 sur 133 px de débord). */
.am-equipe__media {
	--am-parallax-range: 130;
}
.am-anim .am-equipe__media .am-equipe__img.am-equipe__img {
	top: calc(var(--am-parallax-range) * -1px);
	left: 0;
	width: 100%;
	height: calc(100% + var(--am-parallax-range) * 2px);
	aspect-ratio: auto;
	object-fit: cover;
	object-position: 98% 50%;
}
/* Cadrage de la maquette : photo 2054 × 1112 posée à x = -130 et y = -121 dans le bandeau de 1920 × 812 */
	@media screen and (min-width: 1024px) {
		.am-home .am-equipe__img {
			left: -6.771%;
			top: -14.901%;
			width: 106.979%;
			height: auto;
			aspect-ratio: 1704 / 923;
		}
	}

.am-equipe__card {
	position: absolute;
	right: var(--am-tunnel-edge); /* bord droit du tunnel (maquette : 198 px du bord) */
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 29rem;
	overflow: hidden;
	border-radius: 1.875rem;
	background-color: var(--am-color-white);
	text-align: left;
}
.am-equipe--sans-photo .am-equipe__card {
	position: relative;
	right: auto;
	margin: 0 auto;
}
.am-equipe__body {
	padding: 2.5rem var(--am-equipe-pad-x) 3rem;
}
/* Titre à la taille H2, comme « Transformer les enjeux en résultats » (Antoine, 18/09/2026 ; maquette : 28 / 33 px) :
   « de nos différences » tient sur une ligne jusqu'à 1920 px (370 px de large pour le texte de la carte). */
.am-equipe__title {
	--am-title-serif: var(--am-font-serif-text);
	color: var(--am-color-ink);
}
.am-equipe__text {
	max-width: 22.5rem;
	margin: var(--am-space-5) 0 0; /* 24 px (20 px avant le passage du titre en H2, 18/09/2026) */
	font-family: var(--am-font-sans);
	font-size: calc(1.375rem * var(--am-type-scale));
	line-height: 1.27;
	font-weight: var(--am-fw-regular);
	color: var(--am-color-ink);
	hyphens: auto;
}
/* Bandeau-bouton pleine largeur, collé en bas de la carte */
.am-equipe .am-equipe__cta {
	display: flex;
	align-items: center;
	height: var(--am-equipe-band-h);
	padding: 0 var(--am-equipe-pad-x);
	border-radius: 0;
	font-size: calc(1.375rem * var(--am-type-scale));
	text-align: left;
}
.am-equipe .am-equipe__cta:focus-visible {
	outline-offset: -0.375rem;
	outline-color: var(--am-color-white);
}

	/* Pas de maquette tablette ni mobile : carte sous la photo, à cheval sur son bas */
	@media screen and (max-width: 1023px) {
		.am-equipe { padding-bottom: 0; }
		.am-equipe__media { aspect-ratio: 16 / 9; }
		.am-equipe__card {
			position: relative;
			right: auto;
			width: min(29rem, calc(100% - 2 * var(--am-space-page)));
			margin: calc(-1 * var(--am-space-12)) auto 0;
			box-shadow: 0 0.5rem 2rem color-mix(in srgb, var(--am-color-ink) 10%, transparent);
		}
	}
	@media screen and (max-width: 767px) {
		.am-equipe { --am-equipe-pad-x: var(--am-space-5); }
		.am-equipe__media { aspect-ratio: 4 / 3; --am-parallax-range: 50; } /* parallaxe réduite, comme la photo des chiffres clés */
		.am-equipe__body { padding: var(--am-space-6) var(--am-equipe-pad-x) var(--am-space-7); }
	}



/*******************
 7. nos clients
*******************/

/*
 * Maquette : étiquette à y = 4727 (32 px sous la carte du bloc équipe), titre 4794 → 4913 dans la colonne gauche
 * (x = 256, 634 px), texte 4806 → 4934 dans la colonne droite (x = 1012, 658 px, Poppins Medium 24 / 36).
 * Flèches de x = 1730 à 1810 et de y = 4968 à 4998, 31 px au-dessus des cartes. Cartes 448 × 664 (coins ~50 px)
 * à partir de x = 28, espacées de ~27 px, à y = 5029. Bouton « Nos autres cas » 230 × 48 centré, 50 px sous les cartes.
 * Recto : photo pleine carte, bandeau blanc 410 × 327 posé à 21 px des bords (coins ~30 px) : secteur à 32 px
 * (Poppins SemiBold 21 px, corail), logo à 97 px, texte à 173 px (Poppins SemiBold 21 / 26), marge gauche 43 px.
 * Verso (carte « citation » de la maquette) : blanc, filet gris ; secteur à 49 px et 65 px du bord, guillemet 46 × 38
 * à 105 px, citation à 190 px (Poppins 21 / 26, 327 px), filet de 336 px à 420 px, nom (SemiBold 22) à 449 px,
 * fonction (18 / 28), logo à 528 px.
 * Retournement : les deux faces partagent une cellule de grille ; le verso passe devant au survol (appareils à survol),
 * au focus clavier du bouton de la carte et quand la carte est fixée retournée (.is-flipped, toucher ou clic).
 * V1 : fondu de 0,2 s, supprimé si l'utilisateur limite les animations. En P6b, un retournement 3D pourra s'appuyer
 * sur .am-cas__faces (perspective) et les deux .am-cas__face (backface-visibility).
 * La carte elle-même (faces, bascule, pastille, morphing et leurs paliers) est dans assets/css/am-cas.css depuis le
 * 22/09/2026 (partagée avec la page Clients) ; restent ici la section, l'intro et la rangée en slider.
 */
.am-cas {
	--am-cas-card-w: 28rem;
	--am-cas-card-h: 41.5rem;
	--am-cas-gap: 1.6875rem;
	--am-cas-edge: var(--am-tunnel-edge); /* 1re carte au bord gauche du tunnel (maquette : 28 px) */
	padding: 1.75rem 0 8.625rem;
	background-color: var(--am-color-white);
	color: var(--am-color-ink);
}
.am-cas__intro {
	display: grid;
	grid-template-columns: minmax(0, 634fr) minmax(0, 658fr);
	column-gap: 7.625rem;
	align-items: start;
	text-align: left;
}
.am-cas .am-cas__eyebrow {
	color: var(--am-color-coral-text); /* corail assombri pour le texte sur blanc (AA), voir am-refonte.css */
}
.am-cas__title {
	max-width: 11em;
	margin: 3rem 0 0;
	color: var(--am-color-ink);
}
.am-cas__text {
	margin: 4.9375rem 0 0;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-body-lg);
	line-height: var(--am-lh-body-lg);
	font-weight: var(--am-fw-regular); /* textes sous les titres en Regular (Antoine, 18/09/2026 ; maquette : Medium) */
}

.am-cas__slider {
	position: relative;
	margin-top: 5.875rem;
}
.am-cas__nav {
	position: absolute;
	right: var(--am-tunnel-edge); /* bord droit du tunnel (maquette : 110 px du bord) */
	bottom: calc(100% + 1.9375rem);
	gap: 1.25rem;
}
.am-cas__nav .am-slider__arrow {
	width: 1.875rem;
	height: 1.875rem;
}
.am-cas__viewport {
	position: relative;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--am-cas-edge);
	scrollbar-width: none;
}
.am-cas__viewport::-webkit-scrollbar {
	display: none;
}
.am-home .am-cas__list {
	display: flex;
	align-items: stretch;
	gap: var(--am-cas-gap);
	width: max-content;
	margin: 0;
	padding: 0 var(--am-cas-edge);
	list-style: none;
}
.am-home .am-cas__item {
	display: flex;
	flex: 0 0 var(--am-cas-card-w);
	margin: 0;
	padding: 0;
	background: none;
	scroll-snap-align: start;
}

.am-cas__action {
	margin-top: 3.125rem;
	text-align: center;
}
.am-cas .am-cas__cta {
	min-width: 14.375rem;
	padding: 0.5rem 1.9375rem;
	border-radius: 0.625rem;
	font-size: calc(1.375rem * var(--am-type-scale));
	line-height: 1.5;
}

	@media screen and (max-width: 1279px) {
		.am-cas {
			--am-cas-card-w: 22rem;
			--am-cas-card-h: 36rem;
			--am-cas-edge: var(--am-space-page);
			padding: var(--am-space-12) 0;
		}
		.am-cas__intro { column-gap: var(--am-space-8); }
		.am-cas__slider { margin-top: var(--am-space-8); }
		.am-cas__nav {
			position: static;
			justify-content: flex-end;
			margin: 0 var(--am-space-page) var(--am-space-5);
		}
	}
	@media screen and (max-width: 767px) {
		.am-cas {
			--am-cas-card-w: min(20rem, calc(100vw - 2 * var(--am-space-page) - 2rem));
			--am-cas-card-h: 30rem;
		}
		.am-cas__intro { grid-template-columns: minmax(0, 1fr); }
		.am-cas__title { margin-top: var(--am-space-5); }
		.am-cas__text { margin-top: var(--am-space-5); }
	}
	@media screen and (max-width: 479px) {
		.am-cas { --am-cas-card-w: calc(100vw - 2 * var(--am-space-page) - 1.5rem); }
	}