/*-----------------------------
		REFONTE 2026 (préfixe am-)
-----------------------------*/

/*
 * Styles de la refonte (home, équipe, header, footer), créés À CÔTÉ des styles
 * actuels (amagar.css et inc/*) : aucune règle ici ne vise un élément nu ni une
 * classe existante. Toutes les variables sont en --am-*, toutes les classes en .am-*.
 * Source des valeurs : docs/maquette/jetons.md (maquette 1920 px, base 16 px).
 * Polices : Poppins, DM Serif Display et DM Serif Text, hébergées sur le site (assets/css/am-fonts.css, handle am-fonts) ;
 * Poppins en 400, 500 et 700 seulement : --am-fw-semibold (600) s'affiche en Medium (500).
 *
 * Points de rupture (P7, aucune maquette mobile ni tablette : responsive conçu à partir du desktop).
 * Une seule échelle pour toutes les feuilles am-*, en max-width (desktop d'abord) ; la maquette (≥ 1280 px) n'est
 * modifiée par aucune media query. Les media queries ne lisent pas les variables CSS : valeurs à reprendre telles quelles.
 * - 1599 px : grand écran réduit (colonnes du footer resserrées) ;
 * - 1279 px : fin du desktop maquetté, les sections de l'accueil passent en disposition tablette, marges de page 40 px ;
 * - 1199 px : header en burger, menu en panneau latéral sur voile (docs/specs/header.md §8) ;
 * - 1023 px : tablette portrait, empilements (bloc équipe, Excellence, footer), fiches membres sur 2 colonnes ;
 * - 767 px  : mobile, menu plein écran, marges de page 24 px, une carte par écran dans les sliders ;
 * - 639 px  : grilles sur une colonne (fiches membres, footer) ;
 * - 479 px  : petits mobiles, logo et header réduits.
 * Exception : 750 / 751 px dans am-pages.css, calé sur l'ancienne feuille inc/page-metier.css (encart .resume des pages mission).
 * Côté JS : am-header.js reprend le seuil de 1200 px (bascule du burger).
 */

:root {
	/* Couleurs */
	--am-color-ink: #151D2A;
	--am-color-white: #FFFFFF;
	--am-color-coral: #F35B55;
	--am-color-pink: #E83089;
	--am-color-purple: #8F4584;
	--am-color-mauve: #BA67A2;
	--am-color-teal-light: #179AAE;
	/* Maquette #1A8E8D (texte blanc à 3,96:1), assombri au plus juste pour le texte blanc en AA (4,56:1) : citation et auteur
	   du bandeau Équipe, bouton teal de l'accueil (tâche a11y, P7). */
	--am-color-teal-deep: #188382;
	/* Corail pour du texte sur fond blanc (étiquette « Nos clients », secteurs des cas clients) : #F35B55 n'y fait que 3,26:1,
	   même teinte assombrie à 4,66:1 (AA). Les aplats corail (cartes métiers, bandeau Clients) gardent --am-color-coral. */
	--am-color-coral-text: #D33D3C;
	--am-color-slate: #3E4756;
	--am-color-plum: #763A78;
	--am-color-black: #000000;

	/* Familles */
	--am-font-sans: 'Poppins', sans-serif;
	--am-font-serif-display: 'DM Serif Display', serif;
	--am-font-serif-text: 'DM Serif Text', serif;

	/* Graisses */
	--am-fw-regular: 400;
	--am-fw-medium: 500;
	--am-fw-semibold: 600;
	--am-fw-bold: 700;          /* Poppins Bold, présent en local : seule graisse au-dessus du Medium réellement disponible */

	/* Échelle typographique : la maquette PSD est lue ~17 % trop grande (habitude de la graphiste,
	   constat d'Antoine du 17/09/2026). Toutes les tailles --am-fs-* en dépendent ; ajuster ici seulement. */
	--am-type-scale: 0.83;

	/* Tailles (rôles) */
	/* Titre « Équipe » : 214,5 px mesurés sur l'aplat de la maquette (largeur d'encre du mot, 720 px, calibrée en Poppins
	   SemiBold) et non ~103 px comme l'estimait equipe-01-hero-citation.md — le bloc est rasterisé, l'estimation par
	   comptage de lignes était fausse d'un facteur 2. Valeur de tracé probable côté graphiste : 220 px à 97,5 %. */
	--am-fs-page-title: calc(clamp(3rem, 11.1979vw, 13.4375rem) * var(--am-type-scale));
	--am-fs-chiffre: calc(clamp(2.5rem, 4.1667vw, 5rem) * var(--am-type-scale));
	--am-fs-h1: calc(clamp(2.25rem, 3.6458vw, 4.375rem) * var(--am-type-scale));
	--am-fs-h2: calc(clamp(2rem, 3.125vw, 3.75rem) * var(--am-type-scale));
	--am-fs-h3: calc(clamp(1.5rem, 1.8229vw, 2.1875rem) * var(--am-type-scale));
	--am-fs-subtitle: calc(1.75rem * var(--am-type-scale));
	--am-fs-name: calc(1.875rem * var(--am-type-scale));
	--am-fs-role: calc(1.5rem * var(--am-type-scale));
	--am-fs-card-title: calc(1.5rem * var(--am-type-scale));
	--am-fs-body-lg: calc(1.5rem * var(--am-type-scale));
	--am-fs-body: calc(1.125rem * var(--am-type-scale));
	--am-fs-eyebrow: calc(1.1875rem * var(--am-type-scale));
	--am-fs-button: calc(1.25rem * var(--am-type-scale));
	--am-fs-nav: calc(1.25rem * var(--am-type-scale));
	--am-fs-tag: calc(1.3125rem * var(--am-type-scale));
	/* Légendes (mention sous un logo, nom de ville d'une photo) : P9, 22/09/2026 */
	--am-fs-caption: calc(0.9375rem * var(--am-type-scale));

	/* Interlignages */
	--am-lh-chiffre: 1.1;
	--am-lh-h1: 1.14;
	--am-lh-h2: 1.15;
	--am-lh-h3: 1.15;
	--am-lh-subtitle: 1.2;
	--am-lh-card-title: 1.3;
	--am-lh-body-lg: 1.5;
	--am-lh-body: 1.33;
	--am-lh-caption: 1.3;
	--am-lh-eyebrow: 1.3;
	--am-lh-button: 1.5;
	--am-lh-nav: 1.4;
	--am-lh-tag: 1.16;

	/* Approche de lettres (tracking) */
	--am-tracking-h1: -0.025em;
	--am-tracking-h2: -0.04em;
	--am-tracking-eyebrow: 0.1em;

	/* Espacements */
	--am-space-1: 4px;
	--am-space-2: 8px;
	--am-space-3: 12px;
	--am-space-4: 16px;
	--am-space-5: 24px;
	--am-space-6: 32px;
	--am-space-7: 40px;
	--am-space-8: 48px;
	--am-space-9: 64px;
	--am-space-10: 72px;
	--am-space-11: 80px;
	--am-space-12: 96px;
	--am-space-13: 120px;
	--am-space-gap-sm: 16px;
	--am-space-gap-lg: 72px;
	--am-space-page: 80px;
	--am-space-header-h: 96px;

	/* Conteneurs (zone de contenu, hors marges de page) */
	--am-container-width: 1760px;
	--am-container-narrow: 1420px;
	/* Retrait du tunnel (bord de contenu de .am-container--narrow) dans un bloc pleine largeur : marge de page, ou moitié
	   de l'espace restant au-delà de 1580 px. Le % se résout là où la variable est utilisée (padding, left/right) :
	   à n'employer que dans un bloc aussi large que la page (texte du hero, flèches et bords des sliders, cartes posées sur une photo). */
	--am-tunnel-edge: max(var(--am-space-page), calc((100% - var(--am-container-narrow)) / 2));

	/* Rayons, effets */
	--am-radius-pill: 9999px;
	--am-radius-card: 20px;   /* estimation, à confirmer */
	--am-radius-photo: 44px;  /* estimation, à confirmer */
	--am-overlay-hero: rgba(0,0,0,0.2);
	--am-border-line: 1px solid var(--am-color-slate);
	--am-focus-ring: 2px solid var(--am-color-pink);
	--am-focus-offset: 2px;
	--am-hover-filter: brightness(0.92);
	--am-transition: 0.3s;
}
	/* Marges de page hors maquette (aucune maquette mobile) : proposition à valider. Gouttière mobile : 24 px. */
	@media screen and (max-width: 1279px) {
		:root {
			--am-space-page: 40px;
		}
	}
	@media screen and (max-width: 767px) {
		:root {
			--am-space-page: 24px;
		}
	}


/*******************
 conteneurs
*******************/

.am-container {
	width: 100%;
	max-width: calc(var(--am-container-width) + (2 * var(--am-space-page)));
	padding-left: var(--am-space-page);
	padding-right: var(--am-space-page);
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
.am-container--narrow {
	max-width: calc(var(--am-container-narrow) + (2 * var(--am-space-page)));
}
.am-container--full {
	max-width: 100%;
}


/*******************
 typographies
*******************/

/* Segment serif italique, utilisable seul (span) ou dans un titre mixte */
.am-serif {
	font-family: var(--am-font-serif-display);
	font-style: italic;
	font-weight: var(--am-fw-regular);
}
.am-serif--text {
	font-family: var(--am-font-serif-text);
}

.am-eyebrow {
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-eyebrow);
	line-height: var(--am-lh-eyebrow);
	font-weight: var(--am-fw-regular);
	letter-spacing: var(--am-tracking-eyebrow);
	text-transform: uppercase;
	margin: 0;
}

.am-text {
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-body);
	line-height: var(--am-lh-body);
	font-weight: var(--am-fw-regular);
}
.am-text--lg {
	font-size: var(--am-fs-body-lg);
	line-height: var(--am-lh-body-lg);
	font-weight: var(--am-fw-medium);
}

.am-tag {
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-tag);
	line-height: var(--am-lh-tag);
	font-weight: var(--am-fw-semibold);
}

.am-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: var(--am-lh-chiffre);
}


/*******************
 titres
*******************/

/*
 * Titre mixte : le texte est en Poppins, le segment <em> (ou <i>, ou .am-serif)
 * passe en serif italique. La famille serif dépend du rôle (--am-title-serif).
 * Défaut : H2.
 */
.am-title {
	--am-title-serif: var(--am-font-serif-display);
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-h2);
	line-height: var(--am-lh-h2);
	font-weight: var(--am-fw-medium);
	letter-spacing: var(--am-tracking-h2);
	font-style: normal;
	margin: 0;
}
.am-title em,
.am-title i,
.am-title .am-serif {
	font-family: var(--am-title-serif);
	font-style: italic;
	font-weight: var(--am-fw-regular);
}
.am-title .am-serif--text {
	font-family: var(--am-font-serif-text);
}

.am-title--page {
	--am-title-serif: var(--am-font-serif-text);
	font-size: var(--am-fs-page-title);
	line-height: 1.05;
	font-weight: var(--am-fw-semibold);
	letter-spacing: 0;
}
.am-title--h1 {
	--am-title-serif: var(--am-font-serif-text);
	font-size: var(--am-fs-h1);
	line-height: var(--am-lh-h1);
	font-weight: var(--am-fw-semibold);
	letter-spacing: var(--am-tracking-h1);
}
.am-title--h2 {
	--am-title-serif: var(--am-font-serif-display);
	font-size: var(--am-fs-h2);
	line-height: var(--am-lh-h2);
	font-weight: var(--am-fw-medium);
	letter-spacing: var(--am-tracking-h2);
}
.am-title--h3 {
	--am-title-serif: var(--am-font-serif-display);
	font-size: var(--am-fs-h3);
	line-height: var(--am-lh-h3);
	font-weight: var(--am-fw-semibold);
	letter-spacing: 0;
}
.am-title--subtitle {
	--am-title-serif: var(--am-font-serif-text);
	font-size: var(--am-fs-subtitle);
	line-height: var(--am-lh-subtitle);
	font-weight: var(--am-fw-semibold);
	letter-spacing: 0;
}
.am-title--card {
	font-size: var(--am-fs-card-title);
	line-height: var(--am-lh-card-title);
	font-weight: var(--am-fw-semibold);
	letter-spacing: 0;
}
/* Variante de famille serif, quel que soit le rôle */
.am-title--serif-text { --am-title-serif: var(--am-font-serif-text); }
.am-title--serif-display { --am-title-serif: var(--am-font-serif-display); }


/*******************
 boutons
*******************/

/* Pilule simple (bouton Contact du header, CTA hero, etc.) : fond coloré, texte blanc, sans icône */
.am-btn {
	display: inline-block;
	font-family: var(--am-font-sans);
	font-size: var(--am-fs-button);
	line-height: var(--am-lh-button);
	font-weight: var(--am-fw-regular);
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	padding: 0.5em 1.75em;
	border: 0;
	border-radius: var(--am-radius-pill);
	background-color: var(--am-color-pink);
	color: var(--am-color-white);
	cursor: pointer;
	transition: filter var(--am-transition), background-color var(--am-transition), color var(--am-transition);
}
.am-btn:focus-visible {
	outline: var(--am-focus-ring);
	outline-offset: var(--am-focus-offset);
}
/* --am-btn-bg / --am-btn-fg : couleurs de la variante, reprises par les animations de survol (voir « animations ») */
.am-btn--pink { --am-btn-bg: var(--am-color-pink); --am-btn-fg: var(--am-color-white); }
.am-btn--coral { --am-btn-bg: var(--am-color-coral); --am-btn-fg: var(--am-color-white); }
.am-btn--teal { --am-btn-bg: var(--am-color-teal-deep); --am-btn-fg: var(--am-color-white); }
.am-btn--ink { --am-btn-bg: var(--am-color-ink); --am-btn-fg: var(--am-color-white); }
.am-btn--white { --am-btn-bg: var(--am-color-white); --am-btn-fg: var(--am-color-ink); }
.am-btn--pink,
.am-btn--coral,
.am-btn--teal,
.am-btn--ink,
.am-btn--white {
	background-color: var(--am-btn-bg);
	color: var(--am-btn-fg);
}

.am-btn--block {
	display: block;
	width: 100%;
}

/*******************
 animations
*******************/

/*
 * .am-veil-reveal : voile d'entrée de la prod (big-intro.css : « transition: 2s 0.5s ease-out », left de 0 à 100 %),
 * à poser sur la section d'en-tête d'une page. Un voile blanc couvre toute la section au chargement et se retire de
 * gauche à droite ; CSS seul, sans JS. Exemple : parts/team/hero.php.
 * La section devient position: relative et son ::before est pris : ne pas l'utiliser sur un bloc qui a déjà un ::before.
 * Le voile (z-index 2) passe au-dessus des enfants sans z-index ; le header fixe (z-index 1000) reste au-dessus.
 * Réglages par section : --am-veil-color, --am-veil-duration, --am-veil-delay.
 */
@keyframes am-veil-out {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}
.am-veil-reveal {
	position: relative;
}
	@media (prefers-reduced-motion: no-preference) {
		.am-veil-reveal::before {
			content: '';
			z-index: 2;
			position: absolute;
			inset: 0;
			background-color: var(--am-veil-color, var(--am-color-white));
			transform-origin: 100% 50%; /* le bord gauche du voile part vers la droite */
			transform: scaleX(0);
			animation: am-veil-out var(--am-veil-duration, 2s) var(--am-veil-delay, 0.5s) ease-out both;
			pointer-events: none;
		}
	}

/*
 * Apparition au défilement (assets/js/am-reveal.js) : masquée seulement sous html.am-anim (JS présent, animations
 * acceptées), révélée par .is-visible. Sans JS ou avec « réduire les animations », tout reste affiché, sans transition.
 * - .am-fade-up : l'élément apparaît en fondu en remontant de --am-space-6.
 * - .am-cascade (conteneur observé) + .am-cascade__item (éléments animés, à marquer dans le balisage, à n'importe quelle
 *   profondeur) : même effet, élément après élément. Exemple : colonne de texte de parts/team/excellence.php.
 * - .am-reveal : l'élément est seulement observé ; son effet est écrit par le composant (voile de la photo, am-equipe.css).
 * Réglages : --am-reveal-step (écart entre deux éléments, défaut 120 ms, sur l'élément observé),
 * --am-reveal-duration (défaut 0,8 s), --am-reveal-shift (glissement, défaut --am-space-6), --am-reveal-start
 * (attente avant le premier élément, défaut 0 s).
 */
.am-anim .am-fade-up,
.am-anim .am-cascade .am-cascade__item {
	opacity: 0;
	transform: translateY(var(--am-reveal-shift, var(--am-space-6)));
	transition:
		opacity var(--am-reveal-duration, 0.8s) calc(var(--am-reveal-start, 0s) + var(--am-reveal-delay, 0s)) ease-out,
		transform var(--am-reveal-duration, 0.8s) calc(var(--am-reveal-start, 0s) + var(--am-reveal-delay, 0s)) cubic-bezier(0.2, 0.7, 0.2, 1);
}
.am-anim .am-fade-up.is-visible,
.am-anim .am-cascade.is-visible .am-cascade__item {
	opacity: 1;
	transform: none;
}

@media screen and (max-width: 1023px) {
	.am-anim .am-cas--grille.am-cascade .am-cascade__item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*
 * .am-veil-scroll : voile de couleur retiré quand le bloc entre dans l'écran (photo), observé par assets/js/am-reveal.js.
 * Par défaut le voile se retire de gauche à droite ; .am-veil-scroll--rtl de droite à gauche (photo qui déborde à droite).
 * Le bloc doit être positionné et en overflow: hidden (cas des cadres photo arrondis) ; son ::after est pris.
 * Réglages : --am-veil-color (défaut blanc), --am-veil-duration (défaut 1,5 s).
 */
	@media (prefers-reduced-motion: no-preference) {
		.am-anim .am-veil-scroll::after {
			content: '';
			z-index: 1;
			position: absolute;
			inset: 0;
			background-color: var(--am-veil-color, var(--am-color-white));
			transform-origin: 100% 50%; /* le bord gauche du voile part vers la droite */
			transition: transform var(--am-veil-duration, 1.5s) var(--am-reveal-delay, 0s) ease-out;
			pointer-events: none;
		}
		.am-anim .am-veil-scroll--rtl::after {
			transform-origin: 0 50%; /* le bord droit du voile part vers la gauche */
		}
		.am-anim .am-veil-scroll.is-visible::after {
			transform: scaleX(0);
		}
	}


/*
 * Survol des boutons : une flèche entre à droite du libellé (variante « flèche » retenue par Antoine le 18/09/2026,
 * parmi cinq essais). Le bouton s'élargit de la place de la flèche. Sans animation si le visiteur l'a demandé.
 */
.am-btn::after {
	content: '\2192';
	display: inline-block;
	max-width: 0;
	overflow: hidden;
	vertical-align: top;
	opacity: 0;
	transform: translateX(-0.5em);
}
.am-btn:hover::after {
	max-width: 1.25em;
	margin-left: 0.5em;
	opacity: 1;
	transform: none;
}
	@media (prefers-reduced-motion: no-preference) {
		.am-btn::after {
			transition: max-width 0.3s ease-out, margin 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out;
		}
	}

/*
 * .am-parallax (cadre) + .am-parallax__layer (image) : la couche glisse de --am-parallax-y, calculé au défilement par
 * assets/js/am-reveal.js (html.am-anim seulement). --am-parallax-range : amplitude en px, nombre sans unité (défaut 60).
 * Propriété translate, et non transform : l'image garde ses propres transformations (retournement du hero).
 * Le composant fait déborder la couche de l'amplitude en haut et en bas (voir am-home.css).
 */
.am-anim .am-parallax__layer {
	translate: 0 var(--am-parallax-y, 0px);
	will-change: translate;
}