/*
	Feuille de style du site BIZPI. Identité visuelle de la famille « by BIZPI », reprise
	d'AppsByBIZPI (docs/branding/README.md) : bleu pétrole, laiton pour le décor seulement, encre et
	papier ; Bricolage Grotesque pour les titres, IBM Plex Sans pour le texte, IBM Plex Mono pour les
	surtitres. Aucun style en ligne dans les pages : la politique de sécurité du contenu (CSP) du
	serveur les refuse.
*/

/* Polices (SIL Open Font License 1.1, fonts/OFL-*.txt), servies par le site : sous-ensemble latin,
   aucune requête vers un service de polices */

	@font-face {
		font-family: "Bricolage Grotesque";
		font-style: normal;
		font-weight: 200 800;
		font-display: swap;
		src: url("../fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
	}

	@font-face {
		font-family: "IBM Plex Sans";
		font-style: normal;
		font-weight: 100 700;
		font-display: swap;
		src: url("../fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
	}

	@font-face {
		font-family: "IBM Plex Mono";
		font-style: normal;
		font-weight: 500;
		font-display: swap;
		src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
	}

/* Couleurs et mesures. Contrastes (WCAG) : encre sur papier 14,5:1 ; ardoise sur papier 4,8:1 ;
   pétrole sur blanc 6,8:1 ; blanc sur pétrole 6,8:1. Le laiton ne sert jamais pour du texte. */

	:root {
		color-scheme: light;

		--petrole: #1f5f8b;
		--petrole-fonce: #194c6f;
		--petrole-pale: #e4edf4;
		--laiton: #e2a33b;
		--encre: #16202a;
		--papier: #eef1f4;
		--surface: #ffffff;
		--ardoise: #5d6b78;
		--filet: #d6dde5;
		--bleu-clair: #6fa3dc;
		--gris-clair: #9aa4ae;
		--sur-petrole: #d9e6f0;
		--vert: #1f5c4a;
		--rouge: #a8322f;

		--titres: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
		--texte: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
		--mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

		--largeur: 1160px;
		--marge: clamp(20px, 5vw, 40px);
		--rayon: 20px;
		--entete: 72px;
	}

/* Base */

	*, *::before, *::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		scroll-behavior: smooth;
		scroll-padding-top: calc(var(--entete) + 16px);
	}

	/* Pied de page en bas de l'écran, même sur une page courte (page introuvable) */
	body {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		margin: 0;
		background: var(--papier);
		color: var(--encre);
		font: 400 1.0625rem/1.65 var(--texte);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
	}

	main {
		flex: 1 0 auto;
	}

	img, svg {
		display: block;
		max-width: 100%;
	}

	h1, h2, h3 {
		margin: 0;
		font-family: var(--titres);
		font-weight: 700;
		letter-spacing: -0.02em;
		line-height: 1.1;
		text-wrap: balance;
	}

	p {
		margin: 0 0 1em;
		text-wrap: pretty;
	}

	a {
		color: var(--petrole);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
		transition: color 0.15s;
	}

	a:hover {
		color: var(--petrole-fonce);
		text-decoration-thickness: 2px;
	}

	:focus-visible {
		outline: 3px solid var(--petrole);
		outline-offset: 3px;
		border-radius: 6px;
	}

	::selection {
		background: var(--laiton);
		color: var(--encre);
	}

	.conteneur {
		width: min(var(--largeur), 100% - 2 * var(--marge));
		margin-inline: auto;
	}

	/* Lien d'évitement : visible au clavier seulement */
	.evitement {
		position: absolute;
		top: -100px;
		left: var(--marge);
		z-index: 100;
		padding: 10px 16px;
		border-radius: 10px;
		background: var(--encre);
		color: #fff;
		font-weight: 600;
		text-decoration: none;
	}

	.evitement:focus {
		top: 12px;
		color: #fff;
	}

/* Logo de Bizpi Consulting, aux couleurs de la famille (docs/branding) : encre et pétrole sur fond
   clair, papier et bleu clair sur fond sombre */

	.marque {
		display: inline-flex;
		align-items: center;
	}

	.marque img {
		width: auto;
		height: 52px;
	}

/* Boutons */

	.bouton {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 14px 24px;
		border: 2px solid var(--petrole);
		border-radius: 999px;
		background: var(--petrole);
		color: #fff;
		font: 600 1rem/1.2 var(--texte);
		text-decoration: none;
		cursor: pointer;
		transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
	}

	.bouton:hover {
		border-color: var(--petrole-fonce);
		background: var(--petrole-fonce);
		color: #fff;
		transform: translateY(-1px);
		box-shadow: 0 12px 24px -12px rgba(31, 95, 139, 0.8);
	}

	.bouton svg,
	.lien-externe svg {
		width: 18px;
		height: 18px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2.25;
		stroke-linecap: round;
		stroke-linejoin: round;
		transition: transform 0.15s;
	}

	.bouton:hover svg {
		transform: translateX(3px);
	}

	.bouton.secondaire {
		background: transparent;
		color: var(--petrole);
	}

	.bouton.secondaire:hover {
		border-color: var(--petrole);
		background: var(--surface);
		color: var(--petrole-fonce);
		box-shadow: none;
	}

	.bouton:disabled {
		opacity: 0.6;
		cursor: progress;
		transform: none;
		box-shadow: none;
	}

/* Surtitre : capitales en IBM Plex Mono, précédées de la barre en laiton */

	.surtitre {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0 0 20px;
		color: var(--petrole);
		font-family: var(--mono);
		font-size: 0.8125rem;
		font-weight: 500;
		letter-spacing: 0.12em;
		line-height: 1.4;
		text-transform: uppercase;
	}

	.surtitre::before {
		content: "";
		flex: none;
		width: 28px;
		height: 6px;
		border-radius: 3px;
		background: var(--laiton);
	}

	.chapeau {
		max-width: 34em;
		color: var(--ardoise);
		font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3rem);
		line-height: 1.6;
	}

/* En-tête */

	.entete {
		position: sticky;
		top: 0;
		z-index: 50;
		border-bottom: 1px solid rgba(22, 32, 42, 0.08);
		background: rgba(238, 241, 244, 0.86);
		-webkit-backdrop-filter: saturate(160%) blur(14px);
		backdrop-filter: saturate(160%) blur(14px);
	}

	.entete .conteneur {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 32px;
		min-height: var(--entete);
	}

	.navigation ul {
		display: flex;
		align-items: center;
		gap: 4px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.navigation a {
		display: block;
		padding: 8px 14px;
		border-radius: 999px;
		color: var(--encre);
		font-size: 0.9375rem;
		font-weight: 500;
		text-decoration: none;
		white-space: nowrap;
	}

	.navigation a:hover {
		background: rgba(31, 95, 139, 0.08);
		color: var(--petrole);
	}

	.navigation .bouton {
		margin-left: 8px;
		padding: 9px 18px;
		color: #fff;
	}

	.navigation .bouton:hover {
		background: var(--petrole-fonce);
		color: #fff;
	}

/* Accueil */

	.accueil {
		position: relative;
		overflow: hidden;
		padding: clamp(56px, 9vw, 112px) 0 clamp(72px, 10vw, 128px);
	}

	/* Quadrillage de plan, estompé vers les bords */
	.accueil::before,
	.contact::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(rgba(31, 95, 139, 0.07) 1px, transparent 1px),
			linear-gradient(90deg, rgba(31, 95, 139, 0.07) 1px, transparent 1px);
		background-position: center top;
		background-size: 32px 32px;
		-webkit-mask-image: radial-gradient(ellipse 75% 85% at 72% 45%, #000 25%, transparent 75%);
		mask-image: radial-gradient(ellipse 75% 85% at 72% 45%, #000 25%, transparent 75%);
		pointer-events: none;
	}

	.accueil .conteneur {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: clamp(40px, 6vw, 80px);
		align-items: center;
	}

	.accueil h1 {
		font-size: clamp(2.6rem, 1.3rem + 4.4vw, 4.5rem);
		font-weight: 800;
		letter-spacing: -0.035em;
		line-height: 1;
	}

	.accueil h1 em {
		color: var(--petrole);
		font-style: normal;
	}

	.accueil .chapeau {
		margin: 28px 0 36px;
	}

	.actions {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Schéma : l'ERP au centre, relié à ses systèmes satellites */
	.schema {
		justify-self: center;
		width: 100%;
		max-width: 520px;
		overflow: visible;
	}

	.schema .lien {
		fill: none;
		stroke: var(--petrole);
		stroke-width: 4;
		stroke-linecap: round;
		stroke-linejoin: round;
		opacity: 0.3;
	}

	/* Flux en laiton vers l'ERP */
	.schema .flux {
		fill: none;
		stroke: var(--laiton);
		stroke-width: 8;
		stroke-linecap: round;
		stroke-dasharray: 0 24;
		animation: flux 1.8s linear infinite;
	}

	.schema .flux:nth-of-type(2n) {
		animation-delay: -0.9s;
	}

	.schema .satellite {
		filter: drop-shadow(0 10px 18px rgba(22, 32, 42, 0.1));
	}

	.schema .satellite rect {
		fill: var(--surface);
		stroke: var(--filet);
		stroke-width: 1.5;
	}

	.schema text {
		text-anchor: middle;
	}

	.schema .satellite .nom {
		fill: var(--encre);
		font: 600 16px var(--texte);
	}

	.schema .socle .nom {
		font: 500 14px var(--mono);
		letter-spacing: 0.08em;
	}

	.schema .satellite .role {
		fill: var(--ardoise);
		font: 400 13px var(--texte);
	}

	.schema .centre {
		filter: drop-shadow(0 18px 28px rgba(31, 95, 139, 0.35));
	}

	.schema .centre rect {
		fill: var(--petrole);
	}

	.schema .centre .nom {
		fill: #fff;
		font: 800 44px var(--titres);
		letter-spacing: -0.02em;
	}

	.schema .centre .role {
		fill: var(--sur-petrole);
		font: 500 11.5px var(--mono);
		letter-spacing: 0.12em;
	}

	.schema .centre .barre {
		fill: none;
		stroke: var(--laiton);
		stroke-width: 6;
		stroke-linecap: round;
	}

	@keyframes flux {
		to {
			stroke-dashoffset: -24;
		}
	}

	@keyframes monte {
		from {
			opacity: 0;
			transform: translateY(14px);
		}
	}

	@media (prefers-reduced-motion: no-preference) {

		.accueil .texte > * {
			animation: monte 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
		}

		.accueil .texte > :nth-child(2) {
			animation-delay: 0.06s;
		}

		.accueil .texte > :nth-child(3) {
			animation-delay: 0.12s;
		}

		.accueil .texte > :nth-child(4) {
			animation-delay: 0.18s;
		}

		.accueil .schema {
			animation: monte 0.9s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
		}

	}

	@media (prefers-reduced-motion: reduce) {

		html {
			scroll-behavior: auto;
		}

		.schema .flux {
			animation: none;
		}

	}

/* Sections */

	.section {
		position: relative;
		padding: clamp(72px, 10vw, 128px) 0;
	}

	.section.blanche {
		background: var(--surface);
	}

	.section h2:not(.surtitre) {
		font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3rem);
	}

/* L'équipe */

	/* Photo à gauche sur deux rangées ; titre puis texte à droite. Sur mobile : titre, photo, texte */
	.equipe .conteneur {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-rows: auto 1fr;
		gap: 0 clamp(48px, 7vw, 104px);
		align-items: start;
	}

	.equipe .colonne-portrait {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.equipe .titre,
	.equipe .texte {
		grid-column: 2;
	}

	.portrait {
		position: relative;
		margin: 0 24px 24px 0;
	}

	/* Tuile pétrole décalée derrière la photo, barre en laiton */
	.portrait::before {
		content: "";
		position: absolute;
		inset: 24px -24px -24px 24px;
		border-radius: 28px;
		background: var(--petrole);
	}

	.portrait::after {
		content: "";
		position: absolute;
		bottom: -24px;
		left: 56px;
		width: 72px;
		height: 10px;
		border-radius: 5px;
		background: var(--laiton);
		transform: translateY(50%);
	}

	.portrait img {
		position: relative;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 5;
		border-radius: 28px;
		object-fit: cover;
		box-shadow: 0 24px 48px -24px rgba(22, 32, 42, 0.45);
	}

	.reperes {
		margin: 64px 0 0;
		border-top: 1px solid var(--filet);
	}

	.reperes div {
		display: grid;
		grid-template-columns: 7em minmax(0, 1fr);
		gap: 16px;
		padding: 14px 0;
		border-bottom: 1px solid var(--filet);
	}

	.reperes dt {
		color: var(--ardoise);
		font: 500 0.75rem/1.9 var(--mono);
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.reperes dd {
		margin: 0;
		font-weight: 600;
	}

	.fonction {
		margin: 12px 0 32px;
		color: var(--petrole);
		font-size: 1.125rem;
		font-weight: 600;
	}

	.equipe .texte p {
		max-width: 38em;
	}

/* Notre expertise */

	.expertise .intro {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 24px clamp(40px, 6vw, 96px);
		align-items: end;
	}

	.accroche {
		margin: 0;
		font-family: var(--titres);
		font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.45rem);
		font-weight: 600;
		letter-spacing: -0.02em;
		line-height: 1.18;
		text-wrap: balance;
	}

	.expertise .complement {
		margin: 0;
		color: var(--ardoise);
		font-size: 1.125rem;
	}

	.annonce-etapes {
		max-width: 46em;
		margin: clamp(48px, 6vw, 72px) 0 40px;
		padding-top: 32px;
		border-top: 1px solid var(--filet);
	}

	.etapes {
		position: relative;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 24px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Fil qui relie les étapes, d'une tuile à l'autre */
	.etapes::before {
		content: "";
		position: absolute;
		top: 34px;
		right: calc((100% - 4 * 24px) / 5 - 36px);
		left: 36px;
		height: 4px;
		border-radius: 2px;
		background: repeating-linear-gradient(90deg, var(--petrole) 0 10px, transparent 10px 18px);
		opacity: 0.3;
	}

	.etape .icone {
		position: relative;
		display: grid;
		place-items: center;
		width: 72px;
		height: 72px;
		margin-bottom: 22px;
		border: 1px solid var(--filet);
		border-radius: 18px;
		background: var(--surface);
		color: var(--petrole);
		box-shadow: 0 12px 24px -16px rgba(22, 32, 42, 0.35);
		transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
	}

	.etape:hover .icone {
		border-color: var(--petrole);
		background: var(--petrole);
		color: var(--papier);
		transform: translateY(-3px);
	}

	.icone svg {
		width: 40px;
		height: 40px;
		fill: none;
		stroke: currentColor;
		stroke-width: 3.5;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.icone svg .laiton {
		stroke: var(--laiton);
	}

	.etape .numero {
		display: block;
		margin-bottom: 8px;
		color: var(--petrole);
		font: 500 0.8125rem/1 var(--mono);
		letter-spacing: 0.12em;
	}

	.etape h3 {
		margin-bottom: 8px;
		font-size: 1.1875rem;
		line-height: 1.2;
	}

	.etape p {
		margin: 0;
		color: var(--ardoise);
		font-size: 0.975rem;
		line-height: 1.55;
	}

	/* Gestion de projet : en appui de toutes les étapes, d'où la barre en laiton sur toute la largeur */
	.transverse {
		position: relative;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 24px;
		align-items: center;
		margin-top: 56px;
		padding: 28px 32px;
		border: 1px solid var(--filet);
		border-radius: var(--rayon);
		background: var(--surface);
	}

	.transverse::before {
		content: "";
		position: absolute;
		top: -5px;
		right: 32px;
		left: 32px;
		height: 10px;
		border-radius: 5px;
		background: var(--laiton);
	}

	.transverse .icone {
		margin: 0;
		background: var(--papier);
		box-shadow: none;
	}

	.transverse h3 {
		font-size: 1.375rem;
	}

	/* Sur fond blanc : bandeau et tuiles sur papier */
	.blanche .transverse {
		border-color: transparent;
		background: var(--papier);
	}

	.blanche .transverse .icone {
		background: var(--surface);
	}

	/* Notre approche : trois principes, chacun sous une barre en laiton */
	.approche {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px clamp(24px, 4vw, 56px);
		margin: clamp(48px, 6vw, 64px) 0 0;
		padding: 0;
		list-style: none;
	}

	.approche li {
		position: relative;
		padding-top: 22px;
		border-top: 1px solid var(--filet);
	}

	.approche li::before {
		content: "";
		position: absolute;
		top: -3px;
		left: 0;
		width: 40px;
		height: 6px;
		border-radius: 3px;
		background: var(--laiton);
	}

	.approche h3 {
		margin-bottom: 8px;
		font-size: 1.25rem;
	}

	.approche p {
		margin: 0;
		color: var(--ardoise);
	}

/* Tête de section : surtitre, titre et chapeau */

	.tete-section {
		max-width: 46em;
		margin-bottom: clamp(40px, 5vw, 56px);
	}

	.tete-section .chapeau {
		margin: 20px 0 0;
	}

/* Cartes : domaines et missions */

	.grille-domaines,
	.grille-missions {
		display: grid;
		gap: 20px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.grille-domaines {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.grille-missions {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.carte {
		display: flex;
		flex-direction: column;
		padding: 28px 24px;
		border: 1px solid var(--filet);
		border-radius: var(--rayon);
		background: var(--surface);
		transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
	}

	.carte:hover {
		border-color: rgba(31, 95, 139, 0.45);
		box-shadow: 0 18px 36px -24px rgba(22, 32, 42, 0.45);
		transform: translateY(-3px);
	}

	.carte h3 {
		margin: 0 0 10px;
		font-size: 1.1875rem;
		line-height: 1.2;
	}

	.carte p,
	.carte ul {
		color: var(--ardoise);
		font-size: 0.975rem;
		line-height: 1.55;
	}

	.carte .icone {
		display: grid;
		place-items: center;
		width: 56px;
		height: 56px;
		margin-bottom: 20px;
		border-radius: 14px;
		background: var(--papier);
		color: var(--petrole);
		transition: background-color 0.2s, color 0.2s;
	}

	.carte:hover .icone {
		background: var(--petrole);
		color: var(--papier);
	}

	.carte .icone svg {
		width: 32px;
		height: 32px;
	}

	.grille-domaines p {
		flex: 1;
		margin: 0 0 16px;
	}

	/* Modules SAP du domaine */
	.etiquettes {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.etiquettes li {
		padding: 5px 8px;
		border-radius: 6px;
		background: var(--petrole-pale);
		color: var(--petrole-fonce);
		font: 500 0.75rem/1 var(--mono);
		letter-spacing: 0.06em;
	}

	.carte .secteur {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 14px;
		color: var(--petrole);
		font: 500 0.75rem/1.4 var(--mono);
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.carte .secteur::before {
		content: "";
		flex: none;
		width: 20px;
		height: 5px;
		border-radius: 3px;
		background: var(--laiton);
	}

	.grille-missions .carte ul {
		margin: 0;
		padding-left: 1.1em;
	}

	.grille-missions .carte li + li {
		margin-top: 6px;
	}

	.grille-missions .carte li::marker {
		color: var(--laiton);
	}

	.aussi {
		max-width: 52em;
		margin: 32px 0 0;
		color: var(--ardoise);
	}

/* Contact */

	.contact {
		overflow: hidden;
		background: var(--petrole);
		color: #fff;
	}

	.contact::before {
		background-image:
			linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
			linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
		-webkit-mask-image: radial-gradient(ellipse 70% 90% at 20% 30%, #000 20%, transparent 70%);
		mask-image: radial-gradient(ellipse 70% 90% at 20% 30%, #000 20%, transparent 70%);
	}

	.contact .conteneur {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(40px, 6vw, 96px);
		align-items: start;
	}

	.contact .surtitre {
		color: var(--sur-petrole);
	}

	.contact h2 {
		color: #fff;
	}

	.contact .chapeau {
		margin: 24px 0 0;
		color: var(--sur-petrole);
	}

	.contact :focus-visible {
		outline-color: #fff;
	}

	.reseaux {
		margin-top: 48px;
		padding-top: 28px;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}

	.reseaux h3 {
		margin-bottom: 16px;
		color: var(--sur-petrole);
		font: 500 0.8125rem/1.4 var(--mono);
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.lien-externe {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 12px 20px;
		border: 1.5px solid rgba(255, 255, 255, 0.5);
		border-radius: 999px;
		color: #fff;
		font-weight: 600;
		text-decoration: none;
		transition: background-color 0.15s, color 0.15s, border-color 0.15s;
	}

	.lien-externe:hover {
		border-color: #fff;
		background: #fff;
		color: var(--petrole);
	}

	.formulaire {
		padding: clamp(24px, 4vw, 40px);
		border-radius: 24px;
		background: var(--surface);
		color: var(--encre);
		box-shadow: 0 40px 80px -32px rgba(8, 24, 38, 0.6);
	}

	.formulaire :focus-visible {
		outline-color: var(--petrole);
	}

	.champ + .champ {
		margin-top: 18px;
	}

	.champ label {
		display: block;
		margin-bottom: 6px;
		font-size: 0.9375rem;
		font-weight: 600;
	}

	.champ input,
	.champ textarea {
		display: block;
		width: 100%;
		padding: 13px 16px;
		border: 1.5px solid var(--filet);
		border-radius: 12px;
		background: var(--papier);
		color: var(--encre);
		font: inherit;
		transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
	}

	.champ textarea {
		min-height: 10em;
		resize: vertical;
	}

	.champ input:hover,
	.champ textarea:hover {
		border-color: #b8c3ce;
	}

	.champ input:focus,
	.champ textarea:focus {
		outline: none;
		border-color: var(--petrole);
		background: var(--surface);
		box-shadow: 0 0 0 4px rgba(31, 95, 139, 0.16);
	}

	.champ input:user-invalid,
	.champ textarea:user-invalid {
		border-color: var(--rouge);
	}

	.envoi {
		margin-top: 24px;
	}

	.envoi .bouton {
		width: 100%;
	}

	.mention-donnees {
		margin: 16px 0 0;
		color: var(--ardoise);
		font-size: 0.875rem;
	}

	/* Champ piège : hors de l'écran et du parcours au clavier, laissé vide par les visiteurs */
	.piege {
		position: absolute;
		left: -10000px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	/* État de l'envoi, écrit par assets/js/contact.js */
	.custom-form-alert {
		display: none;
		align-items: flex-start;
		gap: 12px;
		margin-top: 20px;
		padding: 14px 16px;
		border-radius: 14px;
		font-size: 0.9375rem;
		font-weight: 500;
		line-height: 1.5;
	}

	.custom-form-alert.show {
		display: flex;
		animation: monte 0.3s ease-out both;
	}

	.custom-form-alert.pending {
		background: var(--petrole-pale);
		color: var(--petrole-fonce);
	}

	.custom-form-alert.success {
		background: #e3efe9;
		color: var(--vert);
	}

	.custom-form-alert.error {
		background: #f7e6e5;
		color: var(--rouge);
	}

	.custom-form-alert-icon {
		display: grid;
		flex: none;
		place-items: center;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		color: #fff;
		font-size: 0.75rem;
		line-height: 1;
	}

	.success .custom-form-alert-icon {
		background: var(--vert);
	}

	.error .custom-form-alert-icon {
		background: var(--rouge);
	}

	.spinner {
		width: 20px;
		height: 20px;
		border: 2.5px solid rgba(31, 95, 139, 0.25);
		border-top-color: var(--petrole);
		border-radius: 50%;
		animation: tourne 0.8s linear infinite;
	}

	@keyframes tourne {
		to {
			transform: rotate(360deg);
		}
	}

/* Pied de page */

	.pied {
		background: var(--encre);
		color: var(--gris-clair);
		font-size: 0.9375rem;
	}

	.pied .conteneur {
		padding: 56px 0 40px;
	}

	.pied-haut {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: 32px;
		padding-bottom: 32px;
		border-bottom: 1px solid rgba(238, 241, 244, 0.12);
	}

	.pied .marque img {
		height: 56px;
	}

	.devise {
		margin: 16px 0 0;
		font: 500 0.75rem/1.5 var(--mono);
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	.pied nav ul {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 28px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pied a {
		color: var(--papier);
		text-decoration: none;
	}

	.pied a:hover {
		color: var(--bleu-clair);
		text-decoration: underline;
	}

	.pied :focus-visible {
		outline-color: var(--bleu-clair);
	}

	.pied-bas {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 12px 32px;
		padding-top: 24px;
	}

	.pied-bas p {
		margin: 0;
	}

/* Pages de texte : mentions légales, page introuvable */

	.page {
		padding: clamp(48px, 8vw, 96px) 0 clamp(72px, 10vw, 120px);
	}

	.page .conteneur {
		width: min(820px, 100% - 2 * var(--marge));
	}

	.page h1 {
		margin-bottom: 40px;
		font-size: clamp(2.4rem, 1.6rem + 2.8vw, 3.5rem);
		font-weight: 800;
		letter-spacing: -0.03em;
	}

	.document {
		padding: clamp(24px, 5vw, 56px);
		border: 1px solid var(--filet);
		border-radius: 24px;
		background: var(--surface);
	}

	.document h2 {
		margin: 44px 0 12px;
		font-size: 1.375rem;
	}

	.document h2:first-child {
		margin-top: 0;
	}

	.document p:last-child {
		margin-bottom: 0;
	}

	.introuvable {
		text-align: center;
	}

	.introuvable .code {
		margin: 0 0 8px;
		color: var(--petrole);
		font: 800 clamp(5.5rem, 3rem + 11vw, 10rem)/1 var(--titres);
		letter-spacing: -0.05em;
	}

	.introuvable .code::after {
		content: "";
		display: block;
		width: 96px;
		height: 12px;
		margin: 20px auto 0;
		border-radius: 6px;
		background: var(--laiton);
	}

	.introuvable h1 {
		margin-bottom: 16px;
	}

	.introuvable p {
		max-width: 32em;
		margin-inline: auto;
		color: var(--ardoise);
	}

	.introuvable .bouton {
		margin-top: 16px;
	}

/* Tablette et mobile */

	@media (max-width: 960px) {

		.accueil .conteneur,
		.equipe .conteneur,
		.expertise .intro,
		.contact .conteneur {
			grid-template-columns: minmax(0, 1fr);
		}

		.schema {
			max-width: 480px;
		}

		.grille-domaines,
		.grille-missions {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.equipe .conteneur {
			grid-template-rows: none;
		}

		.equipe .colonne-portrait,
		.equipe .titre,
		.equipe .texte {
			grid-column: auto;
			grid-row: auto;
		}

		.equipe .colonne-portrait {
			margin: 8px 0 48px;
		}

		.colonne-portrait {
			display: grid;
			grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
			gap: 40px;
			align-items: end;
		}

		.reperes {
			margin: 0;
		}

		/* Étapes à la verticale, le fil passe par les tuiles */
		.etapes {
			grid-template-columns: minmax(0, 1fr);
			gap: 0;
		}

		.etapes::before {
			top: 36px;
			bottom: 36px;
			left: 34px;
			width: 4px;
			height: auto;
			background: repeating-linear-gradient(180deg, var(--petrole) 0 10px, transparent 10px 18px);
		}

		.etape {
			display: grid;
			grid-template-columns: 72px minmax(0, 1fr);
			column-gap: 24px;
			padding-bottom: 32px;
		}

		.etape:last-child {
			padding-bottom: 0;
		}

		.etape .icone {
			grid-row: span 3;
			margin: 0;
		}

		.etape .numero {
			margin-top: 6px;
		}

	}

	@media (max-width: 720px) {

		html {
			scroll-padding-top: 16px;
		}

		.entete {
			position: static;
		}

		.entete .conteneur {
			padding: 14px 0 10px;
		}

		.navigation {
			width: 100%;
		}

		/* Cinq liens sur une ou deux lignes, alignés sur le logo */
		.navigation ul {
			flex-wrap: wrap;
			gap: 0 8px;
			margin-left: -8px;
		}

		.navigation a {
			padding: 6px 8px;
		}

		.navigation .bouton {
			margin-left: 0;
			padding: 6px 8px;
			border: 0;
			background: none;
			color: var(--petrole);
			font-weight: 600;
			box-shadow: none;
			transform: none;
		}

		.navigation .bouton:hover {
			background: rgba(31, 95, 139, 0.08);
			color: var(--petrole);
		}

		.colonne-portrait {
			grid-template-columns: minmax(0, 1fr);
		}

		.portrait {
			max-width: 360px;
		}

		.reperes {
			margin-top: 24px;
		}

		.transverse {
			grid-template-columns: minmax(0, 1fr);
			padding: 28px 24px 24px;
		}

		.approche {
			grid-template-columns: minmax(0, 1fr);
		}

		.pied-bas {
			flex-direction: column;
		}

	}

	@media (max-width: 560px) {

		/* Schéma illisible à cette largeur : les domaines sont détaillés plus bas */
		.schema {
			display: none;
		}

		.grille-domaines,
		.grille-missions {
			grid-template-columns: minmax(0, 1fr);
		}

		.actions li {
			flex: 1 1 100%;
		}

		.actions .bouton {
			width: 100%;
		}

	}