/*
 * Cleanéo — feuille de style unique du thème.
 *
 * Les valeurs proviennent d'un relevé des styles CALCULÉS de l'ancien site
 * (refonte/releve/css/), pas d'une appréciation à l'œil : conteneur 1200 px,
 * Montserrat, H1 54/54, H2 36/36 vert, corps 18/27, bouton 15/30 rayon 4.
 */

/* ---------------------------------------------------------------- Polices */
/* Montserrat servie en local : l'ancien site chargeait trois familles
   Google Fonts complètes (Montserrat, Ubuntu, Roboto) pour n'en utiliser
   qu'une, plus Font Awesome en trois fichiers. */
/* Montserrat, sous-ensemble LATIN, en police variable : un seul fichier de
   38 Ko couvre toutes les graisses.

   ⚠️ Piège vécu le 21/09/2026 : la feuille de Google déclare six @font-face
   par graisse, un par sous-ensemble, et le PREMIER est `cyrillic-ext`. En
   prendre un au hasard installe une police sans le moindre glyphe latin ; le
   navigateur la charge sans broncher, ne trouve rien, et retombe sur la police
   système. Le fichier répond 200, `document.fonts` le dit « loaded », et tout
   le site est pourtant en Arial. Le contrôle qui tranche est la largeur
   d'encre d'un titre, pas l'état du téléchargement. */
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/montserrat-latin.woff2') format('woff2-variations'),
	     url('../fonts/montserrat-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ----------------------------------------------------------------- Jetons */
:root {
	--vert: #86be21;
	--vert-fonce: #74a51c;
	--navy: #1b242b;
	--texte: #333333;
	--gris: #f9f9f9;
	--blanc: #ffffff;
	--conteneur: 1240px;   /* 1240 - 2x20 de gouttiere = 1200 utiles, comme avant */
	--gouttiere: 20px;
	--rayon: 4px;
	--ombre-carte: 0 4px 18px rgba(0, 0, 0, .08);
	--pile: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

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

body {
	margin: 0;
	font-family: var(--pile);
	font-size: 18px;
	line-height: 1.5;
	color: var(--texte);
	background: var(--blanc);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--vert); }
/* Liseré à deux tons : lisible sur fond clair comme sur un bandeau sombre,
   où un contour navy seul tombait à 1,52:1. */
a:focus-visible, button:focus-visible {
	outline: 3px solid #fff;
	box-shadow: 0 0 0 6px var(--navy);
	outline-offset: 2px;
}

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lien-evitement {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--navy); color: var(--blanc); padding: 12px 20px;
}
.lien-evitement:focus { left: 0; }

.conteneur {
	width: 100%;
	max-width: var(--conteneur);
	margin-inline: auto;
	padding-inline: var(--gouttiere);
}
.conteneur--etroit { max-width: 760px; }

h1, h2, h3, h4 { font-family: var(--pile); font-weight: 700; margin: 0 0 .5em; }

.titre-section {
	font-size: 36px;
	line-height: 1.15;
	color: var(--vert);
	text-align: center;
	margin-bottom: 40px;
}
.titre-section--gauche { text-align: left; }

/* --------------------------------------------------------------- Boutons */
.bouton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 30px;
	background: var(--vert);
	color: var(--blanc);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border-radius: var(--rayon);
	transition: background .2s ease;
}
.bouton:hover, .bouton:focus { background: var(--vert-fonce); color: var(--blanc); }

.bouton__fleche {
	width: 8px; height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/* -------------------------------------------------------------- En-tête */
.entete {
	background: var(--blanc);
	position: relative;
	z-index: 10;
}
.entete__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 144px;
}
.entete__img { width: auto; max-height: 104px; }

.nav__liste {
	display: flex;
	align-items: center;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav__liste a {
	font-size: 18px;
	color: var(--navy);
	text-decoration: none;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}
.nav__liste a:hover { color: var(--vert); }
.nav__liste .current-menu-item > a,
.nav__liste .current_page_item > a {
	color: var(--vert);
	border-bottom-color: var(--vert);
}

.entete__burger {
	display: none;
	width: 44px; height: 44px;
	background: none; border: 0; cursor: pointer;
	position: relative;
}
.entete__burger-barre,
.entete__burger-barre::before,
.entete__burger-barre::after {
	position: absolute; left: 10px; width: 24px; height: 2px;
	background: var(--navy); content: ''; transition: transform .2s ease, opacity .2s ease;
}
.entete__burger-barre { top: 21px; }
.entete__burger-barre::before { top: -7px; left: 0; }
.entete__burger-barre::after { top: 7px; left: 0; }
.entete__burger[aria-expanded="true"] .entete__burger-barre { background: transparent; }
.entete__burger[aria-expanded="true"] .entete__burger-barre::before { transform: translateY(7px) rotate(45deg); }
.entete__burger[aria-expanded="true"] .entete__burger-barre::after { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------------- Hero */
.hero {
	position: relative;
	background-size: cover;
	background-position: center;
	color: var(--blanc);
	padding-block: 120px;
}
.hero::before {
	content: '';
	position: absolute; inset: 0;
	background: rgba(27, 36, 43, .62);   /* 4,50:1 pour le chapo a 18 px */
}
.hero__inner { position: relative; }
.hero__inner > * { max-width: 720px; }
.hero__titre { font-size: 54px; line-height: 1; color: var(--blanc); margin-bottom: 20px; }
.hero__chapo { font-size: 18px; line-height: 1.5; margin-bottom: 28px; }
.hero__chapo p { margin: 0 0 12px; }

/* --------------------------------------------------------------- Atouts */
.atouts { padding-block: 50px; }
.atouts__liste {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin: 0; padding: 0; list-style: none;
	text-align: center;
}
.atouts__icone { width: 80px; height: auto; margin: 0 auto 20px; }
.atouts__texte { font-size: 18px; line-height: 1.2; color: var(--navy); margin: 0; }

/* ----------------------------------------------------------- Bloc texte */
.bloc-texte { padding-block: 30px 50px; }
.bloc-texte--fond { background: var(--gris); }
.bloc-texte__corps { max-width: 900px; }
.bloc-texte__corps p { margin: 0 0 18px; }

/* --------------------------------------------------------- Prestations */
.prestations { background: var(--gris); padding-block: 50px 100px; }
.prestations__chapo { text-align: center; max-width: 900px; margin: 0 auto 40px; }
.prestations__grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
	margin: 0; padding: 0; list-style: none;
}
.carte {
	background: var(--blanc);
	border-radius: var(--rayon);
	box-shadow: var(--ombre-carte);
	padding: 30px 22px;
	text-align: center;
}
.carte__icone { width: 56px; height: auto; margin: 0 auto 18px; }
.carte__titre { font-size: 18px; line-height: 1.2; color: var(--vert); margin-bottom: 12px; }
.carte__texte { font-size: 15px; line-height: 1.5; }
.carte__texte p { margin: 0; }
.carte__texte p + p { margin-top: 12px; }

/* ------------------------------------------------------ Blocs alternés */
.alternes { padding-block: 50px; }
.alterne {
	display: grid;
	grid-template-columns: 45fr 55fr;
	gap: 80px;
	align-items: center;
	margin-bottom: 90px;
}
.alterne:last-child { margin-bottom: 0; }
.alterne--texte-gauche .alterne__media { order: 2; }
.alterne--encadre {
	background: var(--blanc);
	box-shadow: var(--ombre-carte);
	border-radius: var(--rayon);
	padding: 72px;
}
.alterne__img { border-radius: var(--rayon); width: 100%; }
.alterne__titre { font-size: 36px; line-height: 1.15; color: var(--vert); }
.alterne__texte { margin-bottom: 26px; }
.alterne__texte p { margin: 0 0 14px; }

/* --------------------------------------------------------------- Logos */
.logos { padding-block: 50px; }

/* La bande reste dans le conteneur, elle ne va pas d'un bord à l'autre de
   l'écran. Le `mask-image` estompe ses deux extrémités : sans lui, un logo
   apparaît et disparaît coupé net au ras du cadre. */
.logos__bande {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* La piste porte les logos DEUX FOIS : translatée de la moitié de sa largeur,
   elle revient exactement à son point de départ, donc la boucle ne saute pas. */
.logos__piste {
	display: flex;
	align-items: center;
	gap: 46px;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: logos-defile 38s linear infinite;
}
.logos:hover .logos__piste,
.logos:focus-within .logos__piste,
.logos--pause .logos__piste { animation-play-state: paused; }

/* Un mouvement automatique de plus de cinq secondes doit pouvoir être arrêté
   autrement qu'à la souris : au clavier et au doigt (WCAG 2.2.2). */
.logos__tete { display: flex; align-items: center; justify-content: center; gap: 14px; }
.logos__pause {
	flex: none;
	width: 34px; height: 34px;
	border: 1px solid #cfd4d8;
	border-radius: 50%;
	background: var(--blanc);
	color: var(--navy);
	cursor: pointer;
	line-height: 1;
	font-size: 13px;
}
.logos__pause:hover { border-color: var(--vert); color: var(--vert); }

.logos__item { flex: none; display: flex; align-items: center; }
/* Les fichiers de logo sont des CARRÉS de 500 px où le logo occupe à peine la
   moitié de la hauteur, le reste étant du blanc. Une boîte calée sur la
   hauteur voulue les rendrait deux fois trop petits : on l'agrandit pour
   compenser cette marge interne au fichier. */
.logos__img {
	width: 200px;
	height: 140px;
	object-fit: contain;
}

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

/* ------------------------------------------------------------- Secteur */
.secteur { padding-block: 30px 60px; }

/* Carte du secteur : la France au centre, l'Île-de-France en encart à gauche,
   le Grand Est à droite, reliés à leur zone par deux traits. Les boîtes sont
   placées en % par le gabarit (inc/blocs/carte-secteur.php) ; sous 760 px elles
   s'empilent et les traits disparaissent. */
.carte-secteur {
	--cs-vert-pale: #dcecbf;
	--cs-bord: #e4ebd8;
	--cs-trait: #cbd9b4;
	position: relative;
	padding: 26px;
	background: linear-gradient(160deg, #f8fbf2 0%, #eff5e3 100%);
	border: 1px solid var(--cs-bord);
	border-radius: 24px;
}
.carte-secteur__scene { position: relative; width: 100%; }
.carte-secteur__liens { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.carte-secteur__liens line { stroke: var(--vert); stroke-width: 1.4; stroke-dasharray: 5 5; opacity: .7; }
.carte-secteur__liens rect { fill: none; stroke: var(--vert); stroke-width: 1.6; stroke-dasharray: 5 5; }
.carte-secteur__france, .carte-secteur__encart { position: absolute; }
.carte-secteur__france svg, .carte-secteur__zoom svg { display: block; width: 100%; height: 100%; overflow: visible; }
.carte-secteur__region { fill: #fff; stroke: var(--cs-trait); stroke-width: 2; stroke-linejoin: round; }
.carte-secteur__region--ge, .carte-secteur__region--antenne { fill: var(--cs-vert-pale); stroke: var(--vert); stroke-width: 2.5; }
.carte-secteur__repere { fill: var(--navy); stroke: #fff; stroke-width: 3; }
.carte-secteur__repere--siege { fill: var(--vert); }

.carte-secteur__encart {
	padding: 1%;   /* 1 % de la largeur de la scène : le gabarit compte la même marge */
	background: #fff;
	border: 1px solid var(--cs-bord);
	border-radius: 18px;
	box-shadow: 0 10px 24px -14px rgba(30, 37, 46, .18);
}
.carte-secteur__encart-titre {
	position: absolute; top: 10px; left: 12px; z-index: 3; margin: 0;
	font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #568727;
}
.carte-secteur__zoom { position: relative; width: 100%; }
.carte-secteur__dept { fill: #fff; stroke: var(--cs-trait); stroke-width: 1.4; stroke-linejoin: round; transition: fill .25s; }
.carte-secteur__dept:hover { fill: #eff6e2; }
/* Tout le Grand Est est couvert : chaque département en vert pâle, le siège plus soutenu. */
.carte-secteur__encart--ge .carte-secteur__dept, .carte-secteur__encart--ge .carte-secteur__dept:hover { fill: var(--cs-vert-pale); stroke: #b5cf8a; }
.carte-secteur__encart--ge .carte-secteur__dept--siege, .carte-secteur__encart--ge .carte-secteur__dept--siege:hover { fill: #c4df94; stroke: var(--vert); stroke-width: 2; }
.carte-secteur__dept--couvert, .carte-secteur__dept--couvert:hover { fill: var(--cs-vert-pale); stroke: var(--vert); stroke-width: 2; }
.carte-secteur__encart--idf .carte-secteur__zoom svg { background: none; }

.carte-secteur__ville { position: absolute; transform: translate(-50%, -5px); }   /* le point (10 px) pile sur la ville */
/* Le halo tombe pile sur la ville, l'étiquette se range dessous. */
.carte-secteur__etiquette { position: absolute; transform: translate(-50%, -7px); }
.carte-secteur__ville { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.carte-secteur__ville--dessus { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 5px)); }
.carte-secteur__ville--gauche { flex-direction: row-reverse; align-items: center; transform: translate(calc(-100% + 5px), -50%); }
.carte-secteur__point {
	width: 10px; height: 10px; border-radius: 50%; flex: none;
	background: var(--navy); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(30, 37, 46, .35);
}
.carte-secteur__nom {
	background: #fff; border: 1px solid var(--cs-bord); border-radius: 999px; white-space: nowrap;
	padding: 2px 9px; font-size: 11px; font-weight: 600; color: var(--navy); line-height: 1.4;
}
.carte-secteur__etiquette { z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; width: max-content; }
.carte-secteur__halo {
	position: relative; width: 14px; height: 14px; border-radius: 50%;
	background: var(--vert); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(86, 135, 39, .5);
}
.carte-secteur__halo::after {
	content: ''; position: absolute; inset: -5px; border-radius: 50%;
	border: 2px solid var(--vert); animation: cs-pouls 2.6s ease-out infinite;
}
@keyframes cs-pouls { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.carte-secteur__carte {
	display: flex; align-items: center; gap: 8px; white-space: nowrap;
	background: #fff; border: 1px solid var(--cs-bord); border-radius: 12px;
	padding: 5px 12px 5px 7px; box-shadow: 0 10px 24px -12px rgba(30, 37, 46, .2);
}
.carte-secteur__carte img { width: 30px; height: 29px; object-fit: contain; }
.carte-secteur__lieu { display: block; font-weight: 800; font-size: 13px; color: var(--navy); line-height: 1.15; }
.carte-secteur__role {
	display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: #568727; line-height: 1.15;
}

/* Encart Grand Est : Bar-le-Duc, Épinal et Strasbourg entourent Nancy par le
   bas, l'étiquette du siège passe donc au-dessus, compactée. */
.carte-secteur__encart--ge .carte-secteur__etiquette { gap: 3px; flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 7px)); }
.carte-secteur__encart--ge .carte-secteur__carte { padding: 3px 9px 3px 5px; gap: 6px; border-radius: 10px; }
.carte-secteur__encart--ge .carte-secteur__carte img { width: 22px; height: 21px; }
.carte-secteur__encart--ge .carte-secteur__lieu { font-size: 12px; }
.carte-secteur__encart--ge .carte-secteur__role { font-size: 8.5px; }

.carte-secteur__legende {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
	margin: 20px 0 0; padding: 18px 0 0; list-style: none;
	border-top: 1px solid var(--cs-bord); font-size: 13.5px; font-weight: 600; color: #46505c;
}
.carte-secteur__legende li { display: inline-flex; align-items: center; gap: 9px; }
.carte-secteur__cle { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.carte-secteur__cle--siege { background: var(--vert); }
.carte-secteur__cle--antenne { background: var(--vert); box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--vert); width: 9px; height: 9px; }
.carte-secteur__cle--zone { border-radius: 3px; background: var(--cs-vert-pale); border: 1.5px solid var(--vert); }
.carte-secteur__cle--ville { background: var(--navy); }

/* Sous 1180 px les étiquettes, de taille fixe, se chevauchent dans des encarts
   réduits (mesuré à 1024 et 900 px) : on empile. */
@media (max-width: 1180px) {
	.carte-secteur__scene { aspect-ratio: auto !important; display: flex; flex-direction: column; gap: 14px; }
	.carte-secteur__liens { display: none; }
	.carte-secteur__france, .carte-secteur__encart { position: relative; left: auto !important; top: auto !important; width: 100% !important; }
	.carte-secteur__france { width: min(72%, 420px) !important; margin: 0 auto; }
	.carte-secteur__encart { max-width: 640px; margin-inline: auto; }
	.carte-secteur__encart { padding: 30px 8px 8px; }
	.carte-secteur__encart--ge { order: 2; }
	.carte-secteur__encart--idf { order: 3; }
	.carte-secteur__nom { font-size: 10px; padding: 2px 7px; }
	.carte-secteur__legende { gap: 10px 18px; font-size: 12px; }
}
@media (max-width: 760px) { .carte-secteur { padding: 14px; } }
@media (max-width: 480px) {
	.carte-secteur__nom { font-size: 9px; padding: 1px 5px; }
	.carte-secteur__point { width: 8px; height: 8px; border-width: 1.5px; }
	.carte-secteur__halo { width: 11px; height: 11px; border-width: 2px; }
	.carte-secteur__encart--ge .carte-secteur__etiquette { gap: 2px; transform: translate(-50%, calc(-100% + 5.5px)); }
	.carte-secteur__encart--ge .carte-secteur__carte { padding: 2px 7px 2px 4px; gap: 4px; }
	.carte-secteur__encart--ge .carte-secteur__carte img { width: 16px; height: 15px; }
	.carte-secteur__encart--ge .carte-secteur__lieu { font-size: 10.5px; }
	.carte-secteur__encart--ge .carte-secteur__role { font-size: 7.5px; }
	/* Chaque pixel de largeur compte pour séparer Metz du siège. */
	.carte-secteur { padding: 10px; }
	.carte-secteur__encart { padding: 28px 3px 4px; }
}
@media (prefers-reduced-motion: reduce) { .carte-secteur__halo::after { animation: none; } }

/* -------------------------------------------------------------- Équipe */
.equipe { padding-block: 50px; }
.equipe__liste {
	/* Flex et non grille : une ligne incomplète (4e membre) se centre au
	   lieu de rester collée à gauche. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 50px;
	margin: 0; padding: 0; list-style: none;
	text-align: center;
}
.equipe__liste .membre { flex: 0 1 calc((100% - 100px) / 3); }
.membre__photo { width: 180px; margin: 0 auto 24px; }
.membre__img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; }
.membre__identite { font-size: 18px; color: var(--vert); font-style: italic; }
.membre__texte p { margin: 0 0 12px; }

/* Postes : mêmes cartes que les membres, une icône à la place du portrait. */
.postes { padding-block: 50px; background: var(--gris); }
.postes .membre__img { border-radius: 0; object-fit: contain; }
.postes .membre__photo svg { display: block; width: 180px; height: 180px; }

/* ------------------------------------------------------------- Contact */
.contact { padding-block: 50px; }
.contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.contact__plan iframe { width: 100%; min-height: 420px; border: 0; border-radius: var(--rayon); }

/* -------------------------------------------------------- Page simple */
.page-simple { padding-block: 50px; }
.page-simple__titre { font-size: 54px; line-height: 1.05; color: var(--navy); }
.page-simple__corps p { margin: 0 0 16px; }

/* ----------------------------------------------------------- Pied de page */
.pied { background: var(--blanc); padding-block: 50px 0; border-top: 1px solid #ececec; }
.pied__inner {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px;
	align-items: start;
}
.pied__img { max-width: min(350px, 100%); }
.pied__titre { font-size: 18px; font-weight: 700; color: var(--navy); margin-bottom: 18px; }
.pied__liste { list-style: none; margin: 0; padding: 0; }
.pied__liste li { margin-bottom: 10px; }
.pied__liste a { color: var(--texte); text-decoration: none; }
.pied__liste a:hover { color: var(--vert); }
.pied__coord { list-style: none; margin: 0; padding: 0; }
.pied__coord-item { margin-bottom: 12px; padding-left: 26px; position: relative; }
.pied__coord-item a { color: var(--texte); text-decoration: none; }
.pied__coord-item::before {
	content: ''; position: absolute; left: 0; top: 4px;
	width: 16px; height: 16px; background: var(--vert);
	-webkit-mask-size: contain; mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* Pastilles du pied : le masque n'avait pas d'image, donc un carré vert plein
   s'affichait à la place de l'icône. Une règle par type, SVG en data-URI. */
.pied__coord-item--tel::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M164.9%2024.6c-7.7-18.6-28-28.5-47.4-23.2l-88%2024C12.1%2030.2%200%2046%200%2064C0%20311.4%20200.6%20512%20448%20512c18%200%2033.8-12.1%2038.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3%2011.6L304.7%20368C234.3%20334.7%20177.3%20277.7%20144%20207.3L193.3%20167c13.7-11.2%2018.4-30%2011.6-46.3l-40-96z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M164.9%2024.6c-7.7-18.6-28-28.5-47.4-23.2l-88%2024C12.1%2030.2%200%2046%200%2064C0%20311.4%20200.6%20512%20448%20512c18%200%2033.8-12.1%2038.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3%2011.6L304.7%20368C234.3%20334.7%20177.3%20277.7%20144%20207.3L193.3%20167c13.7-11.2%2018.4-30%2011.6-46.3l-40-96z%22%2F%3E%3C%2Fsvg%3E");
}
.pied__coord-item--adresse::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M575.8%20255.5c0%2018-15%2032.1-32%2032.1l-32%200%20.7%20160.2c0%202.7-.2%205.4-.5%208.1l0%2016.2c0%2022.1-17.9%2040-40%2040l-16%200c-1.1%200-2.2%200-3.3-.1c-1.4%20.1-2.8%20.1-4.2%20.1L416%20512l-24%200c-22.1%200-40-17.9-40-40l0-24%200-64c0-17.7-14.3-32-32-32l-64%200c-17.7%200-32%2014.3-32%2032l0%2064%200%2024c0%2022.1-17.9%2040-40%2040l-24%200-31.9%200c-1.5%200-3-.1-4.5-.2c-1.2%20.1-2.4%20.2-3.6%20.2l-16%200c-22.1%200-40-17.9-40-40l0-112c0-.9%200-1.9%20.1-2.8l0-69.7-32%200c-18%200-32-14-32-32.1c0-9%203-17%2010-24L266.4%208c7-7%2015-8%2022-8s15%202%2021%207L564.8%20231.5c8%207%2012%2015%2011%2024z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20d%3D%22M575.8%20255.5c0%2018-15%2032.1-32%2032.1l-32%200%20.7%20160.2c0%202.7-.2%205.4-.5%208.1l0%2016.2c0%2022.1-17.9%2040-40%2040l-16%200c-1.1%200-2.2%200-3.3-.1c-1.4%20.1-2.8%20.1-4.2%20.1L416%20512l-24%200c-22.1%200-40-17.9-40-40l0-24%200-64c0-17.7-14.3-32-32-32l-64%200c-17.7%200-32%2014.3-32%2032l0%2064%200%2024c0%2022.1-17.9%2040-40%2040l-24%200-31.9%200c-1.5%200-3-.1-4.5-.2c-1.2%20.1-2.4%20.2-3.6%20.2l-16%200c-22.1%200-40-17.9-40-40l0-112c0-.9%200-1.9%20.1-2.8l0-69.7-32%200c-18%200-32-14-32-32.1c0-9%203-17%2010-24L266.4%208c7-7%2015-8%2022-8s15%202%2021%207L564.8%20231.5c8%207%2012%2015%2011%2024z%22%2F%3E%3C%2Fsvg%3E");
}
.pied__coord-item--linkedin::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M416%2032H31.9C14.3%2032%200%2046.5%200%2064.3v383.4C0%20465.5%2014.3%20480%2031.9%20480H416c17.6%200%2032-14.5%2032-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4%20416H69V202.2h66.5V416zm-33.2-243c-21.3%200-38.5-17.3-38.5-38.5S80.9%2096%20102.2%2096c21.2%200%2038.5%2017.3%2038.5%2038.5%200%2021.3-17.2%2038.5-38.5%2038.5zm282.1%20243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6%200-39.9%2027-39.9%2054.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8%2030.6-34.5%2062.9-34.5%2067.2%200%2079.7%2044.3%2079.7%20101.9V416z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M416%2032H31.9C14.3%2032%200%2046.5%200%2064.3v383.4C0%20465.5%2014.3%20480%2031.9%20480H416c17.6%200%2032-14.5%2032-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4%20416H69V202.2h66.5V416zm-33.2-243c-21.3%200-38.5-17.3-38.5-38.5S80.9%2096%20102.2%2096c21.2%200%2038.5%2017.3%2038.5%2038.5%200%2021.3-17.2%2038.5-38.5%2038.5zm282.1%20243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6%200-39.9%2027-39.9%2054.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8%2030.6-34.5%2062.9-34.5%2067.2%200%2079.7%2044.3%2079.7%20101.9V416z%22%2F%3E%3C%2Fsvg%3E");
}

.pied__bas { background: var(--vert); color: var(--blanc); margin-top: 40px; }
.pied__bas-inner {
	display: flex; justify-content: space-between; gap: 20px;
	padding-block: 14px; font-size: 15px;
}
.pied__bas-inner p { margin: 0; }
.pied__bas-inner a {
	color: var(--blanc);
	text-decoration: none;
	/* 24 px de haut minimum : deux liens côte à côte, sans marge pour les sauver. */
	display: inline-block;
	padding-block: 4px;
}

/* --------------------------------------------------------- Adaptatif */
/* Menu de 5 entrées depuis l'ajout de « Nos réalisations » (12/10/2026) :
   entre 861 et 1279 px il passait sur deux lignes (mesuré à 1024 et 1180 px
   par responsive.py le 26/10). On resserre au lieu de replier. */
@media (min-width: 861px) and (max-width: 1279px) {
	.entete__inner { gap: 18px; }
	.entete__img { max-height: 80px; }
	.nav__liste { gap: 18px; }
	.nav__liste a { font-size: 16px; white-space: nowrap; }
}

@media (max-width: 1024px) {
	.prestations__grille { grid-template-columns: repeat(2, 1fr); }
	.hero__titre { font-size: 42px; }
	.alterne { gap: 36px; }
}

@media (max-width: 860px) {
	/* En-tête sous 860 px : logo à gauche, burger à droite, le bouton d'appel
	   et le menu sur leurs propres rangées.

	   ⚠️ Mesuré à 390 px avant correction : le bouton d'appel (211 px) finissait
	   à x=370 et le burger commençait à x=326, ils se CHEVAUCHAIENT de 44 px.
	   Un `margin-left: auto` sur le burger ne suffit pas quand la rangée est
	   déjà trop étroite : il faut sortir le bouton de cette rangée. */
	.entete__inner {
		flex-wrap: wrap;
		min-height: 0;
		padding-block: 14px;
		gap: 12px 14px;
	}
	.entete__logo { flex: 1 1 auto; }
	.entete__img { max-height: 64px; }
	.entete__burger { display: block; order: 2; flex: none; margin-left: auto; }
	.nav { order: 4; flex: 1 0 100%; }

	/* Sur téléphone, le numéro quitte l'en-tête pour une barre fixe en bas :
	   appeler est le geste le plus utile de ce site, il reste donc sous le
	   pouce quelle que soit la position dans la page, et l'en-tête retrouve
	   la place qui lui manquait. */
	.entete__cta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		background: var(--blanc);
		padding: 10px 16px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -2px 14px rgba(0, 0, 0, .14);
	}
	.entete__cta .bouton {
		display: flex;
		width: 100%;
		/* Sur tablette, un bouton de 736 px de large ne ressemble plus à un
		   bouton : on le borne et on le centre. */
		max-width: 420px;
		margin-inline: auto;
		justify-content: center;
		padding-block: 14px;
	}
	/* La barre ne doit pas recouvrir la fin de la page. */
	body { padding-bottom: 84px; }
	.nav {
		order: 4; flex-basis: 100%; display: none;
	}
	.nav.est-ouvert { display: block; }
	.nav__liste { flex-direction: column; align-items: flex-start; gap: 0; padding-block: 12px; }
	.nav__liste li { width: 100%; border-top: 1px solid #ececec; }
	.nav__liste a { display: block; padding: 14px 0; }

	.equipe__liste .membre { flex-basis: 100%; }
	.postes .membre__photo,
	.postes .membre__photo svg { width: 140px; height: 140px; }
	.atouts__liste,
	.contact__inner,
	.pied__inner { grid-template-columns: 1fr; }

	.alterne { grid-template-columns: 1fr; }
	.alterne--texte-gauche .alterne__media { order: 0; }
	.alterne--encadre { padding: 28px; }

	.hero { padding-block: 70px; }
	.hero__titre { font-size: 34px; }
	.titre-section, .alterne__titre { font-size: 28px; }

	.pied__bas-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 560px) {
	.prestations__grille { grid-template-columns: 1fr; }
	.equipe__liste { gap: 36px; }

	.entete__img { max-height: 56px; }
	.hero__titre { font-size: 28px; }
	.titre-section, .alterne__titre { font-size: 24px; }
}

/* Une animation d'apparition ne doit jamais empêcher de lire la page. */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }

	/* Exception nécessaire : à 0,01 ms, le défilement des logos ne s'arrête
	   pas, il saute à sa position finale et la bande sort de l'écran. On le
	   supprime, et la bande se parcourt alors à la main. */
	.logos__piste {
		animation: none !important;
	}
	.logos__bande {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* ------------------------------------------------------------- Formulaire */
.contact__inner { align-items: start; }
.contact__intro { margin-bottom: 30px; max-width: 760px; }
.contact__intro p { margin: 0; }

.formulaire__grille {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 24px;
}
.formulaire__champ { margin: 0 0 20px; }
.formulaire__champ label,
.formulaire__consentement label {
	display: block;
	margin-bottom: 7px;
	font-size: 16px;
	font-weight: 600;
	color: var(--navy);
}

/* Le sélecteur est porté par le CONTENEUR (0-2-0) et non par la seule classe
   du champ (0-1-0) : le style hérité cible `input[type=text]` (0-1-1), qui
   gagnerait sinon, et les champs ressortiraient gris. */
.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="tel"],
.formulaire textarea {
	width: 100%;
	padding: 13px 15px;
	font-family: var(--pile);
	font-size: 16px;
	color: var(--texte);
	background: var(--blanc);
	border: 1px solid #cfd4d8;
	border-radius: var(--rayon);
	transition: border-color .15s ease;
}
.formulaire input:focus,
.formulaire textarea:focus {
	border-color: var(--vert);
	outline: 2px solid rgba(134, 190, 33, .35);
	outline-offset: 1px;
}
.formulaire textarea { resize: vertical; min-height: 150px; }

/* Honeypot : hors écran, hors parcours clavier, jamais affiché. */
.formulaire__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}

.formulaire__consentement {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 6px 0 18px;
}
.formulaire__consentement input { margin-top: 3px; flex: 0 0 auto; }
.formulaire__consentement label { font-weight: 400; font-size: 15px; margin: 0; }

.formulaire__altcha { margin-bottom: 18px; max-width: 320px; }
.formulaire__altcha .altcha-checkbox-wrap label { font-size: .8em; }

.formulaire__mention {
	font-size: 14px;
	line-height: 1.45;
	color: #5d666d;
	margin: 0 0 20px;
}
.formulaire__mention a { color: var(--vert); }

.formulaire__alerte {
	padding: 14px 18px;
	margin-bottom: 22px;
	border-left: 4px solid #cc3366;
	background: #fdf0f4;
	color: #8c1f42;
	border-radius: var(--rayon);
}
.formulaire__envoi { margin: 0; }

/* Coordonnées et plan */
.coordonnees { list-style: none; margin: 0 0 28px; padding: 0; }
.coordonnees__item { margin-bottom: 20px; }
.coordonnees__titre {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
	color: var(--navy);
}
.coordonnees__valeur { margin: 0; }
.coordonnees__valeur a { color: var(--texte); text-decoration: none; }
.coordonnees__valeur a:hover { color: var(--vert); }

@media (max-width: 860px) {
	.formulaire__grille { grid-template-columns: 1fr; }
}

/* Variante claire du bandeau : la page de contact n'a pas d'image de fond,
   son titre et son chapo sont centrés sur fond blanc. */
.hero--clair { background: var(--blanc); color: var(--texte); padding-block: 60px 20px; text-align: center; }
.hero--clair::before { content: none; }
.hero--clair .hero__inner { max-width: 820px; margin-inline: auto; }
.hero--clair .hero__titre { color: var(--navy); }
.hero--clair .hero__chapo { color: var(--texte); }

/* Coordonnées à gauche, formulaire à droite, comme sur le site actuel. */
.contact__inner { grid-template-columns: 340px 1fr; gap: 60px; }
@media (max-width: 860px) {
	.contact__inner { grid-template-columns: 1fr; gap: 30px; }
}

/* ------------------------------------------------------ Nos réalisations */
/* Un chantier : le texte, puis ses photos en grille. Les photos des clients
   sont surtout prises en portrait au téléphone : vignettes en 3/4, recadrées,
   l'image entière s'ouvre dans la visionneuse. */
.chantiers { padding-block: 60px; }
.chantier { padding-block: 50px; border-top: 1px solid #e6e6e6; }
.chantier:first-child { padding-top: 0; border-top: 0; }
.chantier__corps { max-width: 860px; margin-bottom: 28px; }
.chantier__titre { font-size: 36px; line-height: 1.15; color: var(--vert); margin: 0 0 10px; }
.chantier__sous-titre { font-weight: 700; color: var(--navy); margin: 0 0 16px; }
.chantier__texte p { margin: 0 0 14px; }
.chantier__galeries--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.chantier__etat {
	display: inline-block;
	margin: 0 0 12px;
	padding: 4px 12px;
	border-radius: var(--rayon);
	background: var(--navy);
	color: var(--blanc);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.chantier__photos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--colonnes, 4), 1fr);
	gap: 16px;
}
.chantier__lien { display: block; border-radius: var(--rayon); overflow: hidden; }
.chantier__lien:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.chantier__img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform .3s ease;
}
.chantier__lien:hover .chantier__img { transform: scale(1.04); }

.visionneuse {
	max-width: min(92vw, 1100px);
	max-height: 92vh;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}
.visionneuse::backdrop { background: rgba(27, 36, 43, .88); }
.visionneuse__img { max-width: 100%; max-height: 92vh; width: auto; margin: 0 auto; border-radius: var(--rayon); }
.visionneuse__fermer {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--blanc);
	color: var(--navy);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

@media (max-width: 860px) {
	.chantier__titre { font-size: 28px; }
	.chantier__galeries--duo { grid-template-columns: 1fr; gap: 24px; }
	.chantier__photos { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.visionneuse__fermer { top: 8px; right: 8px; }
}
@media (max-width: 560px) {
	.chantier__titre { font-size: 24px; }
}