/* Refonte 2026 : hero des pages non refondues (voir am-refonte.css pour les variables --am-*, am-header.css pour --am-header-*) */

/*
 * Chargée sur tout le site (functions.php). Balisage : parts/pages/hero.php, appelé par page-blog.php, page-contact.php,
 * page-expertise.php, page-metier.php, page-references.php, page-mission.php et page-reference.php.
 * Modèle : bandeau teal de la nouvelle page Équipe (parts/team/hero.php, section 1 de am-equipe.css) : section pleine
 * largeur à fond de couleur, contenu dans le tunnel .am-container--narrow, titre de page mixte, citation en DM Serif Display
 * romain et auteur, voile d'entrée .am-veil-reveal de la couleur du bandeau. Seule la couleur change d'une page à l'autre :
 * celle de l'ancien hero de la page (inc/page-*.css), ramenée au jeton --am-color-* le plus proche quand l'écart est
 * d'une unité (#189AAE → teal-light, #BB67A3 → mauve, #F35B54 → coral), gardée telle quelle sinon (--orange2).
 * Tailles de police : --am-fs-* ou calc(… * var(--am-type-scale)) uniquement.
 *
 * 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) : le bandeau porte .no-reveal ;
 * - inc/header.css « header { position: fixed } » : le bandeau est un <section>, pas un <header> ;
 * - big-intro.css « body.ready .big-intro::before » (voile blanc) et inc/page-*.css « .page-template-xxx .big-intro »
 *   (hauteurs, couleurs, largeurs) : le bandeau ne porte plus .big-intro ni .small-intro, rien ne s'y applique ;
 * - general.css « body { text-align: center } » et reset.css « body { line-height: 1 } » : reposés sur .am-page-hero ;
 * - la section suivante peut remonter sur le bas du bandeau (image de .clients-sectors-intro sur Clients, encart .resume
 *   sur les missions) : isolation: isolate garde le voile d'entrée (z-index 2) dans le bandeau, sous ces éléments.
 */


/*******************
 bandeau
*******************/

/*
 * Même logique verticale que .am-team-hero : haut du texte sous le header flottant (hauteur + décalage + 32 px), ou à
 * 14,74 vw sur grand écran ; bas à 9,69 vw (64 px au minimum). Pas de hauteur minimale proportionnelle (49,375 vw sur la
 * page Équipe) : ces bandeaux n'ont souvent qu'un titre, la hauteur suit le contenu.
 * Header transparent (défaut de tout le site depuis le 18/09/2026, amHeaderStyle()) : le header flotte au-dessus du
 * bandeau, la valeur ci-dessus s'applique telle quelle et le texte se cale comme sur le bandeau de la page Équipe.
 * Header plein (pages réglées explicitement sur « Plein ») : la page Équipe décale tout <main> (.am-header-offset) ;
 * ici le bandeau démarre sous le header fixe et ajoute sa hauteur au padding, ce qui place le texte au même endroit
 * sans toucher à <main>.
 */
.am-page-hero {
	--am-page-hero-color: var(--am-color-purple);
	--am-page-hero-top: max(calc(var(--am-header-h) + var(--am-header-float) + var(--am-space-6)), 14.74vw);
	position: relative;
	isolation: isolate;
	padding: var(--am-page-hero-top) 0 max(var(--am-space-9), 9.6875vw);
	background-color: var(--am-page-hero-color);
	color: var(--am-color-white);
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-body);
	line-height: var(--am-lh-body);
	text-align: left;
	--am-veil-color: var(--am-page-hero-color); /* voile d'entrée de la couleur du bandeau : seul le texte se dévoile */
}
.am-header-plein .am-page-hero {
	padding-top: calc(var(--am-header-h) + var(--am-page-hero-top));
}

/*
 * Couleurs des anciens heros (inc/page-*.css, page-mission.php).
 * Contrastes du texte blanc (tâche a11y, P7) : violet 6,26:1 ; mauve 3,78:1, teal clair 3,35:1 et corail 3,26:1, suffisants
 * pour le grand texte seulement (≥ 24 px) : titre, citation (corps mini porté à 24 px) et phrase d'appel de Clients
 * (portée à 24 px) le sont à toutes les largeurs. Orange --orange2 #F79702 : 2,24:1, insuffisant même en grand texte ;
 * assombri à #D07F05 (3,13:1, même teinte), le bandeau Expériences n'ayant qu'un titre.
 */
.am-page-hero--purple { --am-page-hero-color: var(--am-color-purple); }         /* --purple #8F4584 : Missions, pages mission */
.am-page-hero--mauve { --am-page-hero-color: var(--am-color-mauve); }           /* --mauve #BB67A3 : Méthodes */
.am-page-hero--coral { --am-page-hero-color: var(--am-color-coral); }           /* --orange #F35B54 : Clients, cas clients */
.am-page-hero--teal-light { --am-page-hero-color: var(--am-color-teal-light); } /* --blue #189AAE : Contact */
.am-page-hero--orange2 { --am-page-hero-color: #D07F05; }                       /* --orange2 #F79702 assombri, sans jeton : Expériences (voir ci-dessous) */

/*
 * Bandeau des articles (inc/page-blog.css « .single .small-intro { background: var(--orange2) } »), assombri à la même
 * teinte que le bandeau Expériences ci-dessus : depuis le passage de tout le site en header transparent (18/09/2026),
 * le header blanc se pose dessus, et #F79702 sous le voile du header ne donnait que 4,28:1 pour le logo et le menu.
 * C'était le seul gabarit du site sous le seuil de 4,5:1. Même spécificité que la règle d'origine, feuille chargée après.
 */
.single .small-intro {
	background: #D07F05;
}

/*
 * Graisse 700 demandée par Antoine le 18/09 : --am-fw-semibold (600) n'existe pas dans les Poppins locales
 * (400, 500, 700 seulement, voir am-refonte.css) et retombait sur le Medium 500, trop léger sur ces bandeaux.
 * Le segment serif italique du titre mixte garde sa graisse normale (.am-title em, am-refonte.css).
 */
.am-page-hero__title {
	color: var(--am-color-white);
	font-weight: var(--am-fw-bold);
}


/*******************
 fil d'Ariane (pages mission)
*******************/

.am-page-hero__breadcrumb {
	margin: 0 0 var(--am-space-6);
}
.am-page-hero__breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}
.am-page-hero__breadcrumb li + li::before {
	content: '\2022'; /* puce, comme l'ancien « &bull; » */
	margin: 0 0.5em;
}
.am-page-hero__breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.am-page-hero__breadcrumb a:hover {
	text-decoration: underline;
}
.am-page-hero__breadcrumb [aria-current] {
	font-weight: var(--am-fw-semibold);
}


/*******************
 accroche et texte (pages mission)
*******************/

/* Accroche : même serif romaine que la citation, un cran plus petite, le titre étant en taille H1 sur ces pages */
.am-page-hero__lead {
	max-width: 24em;
	margin: var(--am-space-6) 0 0;
	font-family: var(--am-font-serif-display);
	font-size: var(--am-fs-h3);
	font-style: normal;
	font-weight: var(--am-fw-regular);
	line-height: 1.3;
	letter-spacing: 0;
}
.am-page-hero__text {
	max-width: 32em;
	margin-top: var(--am-space-6);
	font-size: var(--am-fs-body-lg);
	line-height: var(--am-lh-body-lg);
}
.am-page-hero__text > * {
	margin: 0;
}
.am-page-hero__text > * + * {
	margin-top: 1em;
}
.am-page-hero__text a {
	color: inherit;
	text-decoration: underline;
}

.am-page-hero a:focus-visible {
	outline: 2px solid var(--am-color-white); /* l'anneau rose de --am-focus-ring se perd sur les fonds corail et violet */
	outline-offset: var(--am-focus-offset);
}


/*******************
 citation
*******************/

/* Reprise de .am-team-hero__quote (mesures de la maquette Équipe) : DM Serif Display romain, interligne 1,4 */
.am-page-hero__quote {
	max-width: 18em;
	margin: 3.875rem 0 0;
	font-family: var(--am-font-serif-display);
	font-size: calc(clamp(1.8125rem, 2.8594vw, 3.4375rem) * var(--am-type-scale)); /* mini 24 px (grand texte WCAG) au lieu de 23,2 px */
	font-style: normal;
	font-weight: var(--am-fw-regular);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--am-color-white);
}
.am-page-hero__quote p {
	margin: 0;
}
.am-page-hero__quote cite {
	display: block;
	margin-top: 1.1875rem;
	font-family: var(--am-font-sans);
	font-size: calc(1.25rem * var(--am-type-scale));
	font-style: normal;
	font-weight: var(--am-fw-regular);
	line-height: var(--am-lh-body);
	color: var(--am-color-white);
}


/*******************
 appel et flèche de défilement (Clients)
*******************/

/*
 * Ancien hero : phrase puis flèche ronde tournée vers le bas (.btn-am-icon, 36 px). Même rôle ici avec l'icône ronde des
 * sliders de la refonte (amSliderArrowIcon(), functions.php), tournée d'un quart de tour ; la classe .scroll garde le
 * défilement animé d'amagar.js vers l'ancre.
 */
.am-page-hero__action {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--am-space-5);
	margin-top: var(--am-space-10);
}
.am-page-hero__action-text {
	max-width: 32em;
	margin: 0;
	font-size: calc(1.8125rem * var(--am-type-scale)); /* 24 px : grand texte WCAG, blanc sur corail à 3,26:1 (19,9 px auparavant) */
	line-height: var(--am-lh-body-lg);
}
.am-page-hero__scroll {
	display: block;
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	color: var(--am-color-white);
}
.am-page-hero__scroll svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
	transform: rotate(90deg);
	transition: transform var(--am-transition) ease-out;
}
.am-page-hero__scroll:hover svg {
	transform: translateY(0.25rem) rotate(90deg);
}
	@media (prefers-reduced-motion: reduce) {
		.am-page-hero__scroll svg { transition: none; }
	}


/*******************
 colonne réservée (pages mission)
*******************/

/*
 * page-mission.php : l'encart .resume (photo puis résumé) remonte de 15 em + une gouttière sur le bas du bandeau, à droite.
 * Comme l'ancienne .mission-intro .inner (max-width: 50 %), le texte s'arrête à la moitié du tunnel ; en dessous de
 * 751 px l'encart passe sous le texte (margin-top positive) et la colonne est libérée.
 */
	@media screen and (min-width: 751px) {
		.am-page-hero--aside .am-page-hero__inner > * {
			max-width: 50%;
		}
	}


/*******************
 tablette et mobile
*******************/

/* Pas de maquette : reprise des propositions du bandeau Équipe (am-equipe.css) */
	@media screen and (max-width: 1023px) {
		.am-page-hero__quote { margin-top: var(--am-space-8); }
		.am-page-hero__quote cite { margin-top: var(--am-space-6); }
		.am-page-hero__action { margin-top: var(--am-space-8); }
	}
	@media screen and (max-width: 767px) {
		.am-page-hero { padding-bottom: var(--am-space-8); }
		.am-page-hero__quote { max-width: none; }
	}


/*******************
 débordement de l'ancien contenu (Missions)
*******************/

/*
 * Seule règle de ce fichier hors du bandeau, ajoutée en P7 (contrôle du débordement horizontal) : sur /metier/, deux
 * éléments de l'ancien thème dépassaient du bord droit et faisaient défiler toute la page à l'horizontale (20 à 60 px
 * selon la largeur ; la prod a le même défaut) :
 * - « .steps-layout { width: calc(100% + 20px); margin: 10px -10px } » : rangée des missions, 10 px de chaque côté ;
 * - « .metier-keypoints::before { right: -2vw } » : icône filaire décorative, 2 vw au-delà du bord.
 * Les deux ont disparu le 21/09/2026 : la rangée des missions ne déborde plus (valeurs revues par Antoine dans
 * inc/page-metier.css et inc/page-metier-2.css) et la section des points clés a été retirée de la page. La règle est
 * gardée en garde-fou, l'ancien thème posant des débordements de ce genre un peu partout.
 * overflow-x: clip, et non hidden : pas de zone de défilement créée, rien n'est rogné en hauteur.
 */
.page-template-page-metier main {
	overflow-x: clip;
}