/**
 * Ritmo — feuille de style principale.
 *
 * Reprend le design existant (couleurs, typographies, composants) en corrigeant
 * la mise en page responsive. Points structurants :
 *
 * - `--header-h` est l'unique source de vérité pour la hauteur de l'en-tête.
 *   Le décalage du corps et le `scroll-padding-top` des ancres en dérivent, si
 *   bien qu'ils ne peuvent plus diverger (l'ancien code figeait 80px alors que
 *   l'en-tête en mesurait 142).
 * - Le menu mobile est un panneau plein écran indépendant, pas la liste du menu
 *   de bureau repositionnée.
 */

/* ==========================================================================
   1. Variables
   ========================================================================== */

:root {
	--vert-fonce: #172a0a;
	--vert-clair: #ccdec2;
	--vert-hover: #2d4a15;
	--blanc: #ffffff;
	--gris-clair: #f8f9fa;
	--gris-moyen: #e9ecef;
	--noir: #111111;
	--footer-bg: #0d1806;

	--font-corps: 'Arimo', system-ui, -apple-system, sans-serif;
	--font-titre: 'Roboto Condensed', system-ui, sans-serif;
	--font-display: 'Abril Fatface', Georgia, serif;

	/* Hauteur de l'en-tête : tout le reste s'y accroche. */
	--header-h: 92px;
	--logo-h: 76px;

	--container: 1200px;
	--radius: 16px;
	--transition: 0.3s ease;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	/* Une ancre ne se glisse plus sous l'en-tête fixe. */
	scroll-padding-top: var(--header-h);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding-top: var(--header-h);
	font-family: var(--font-corps);
	font-size: 16px;
	line-height: 1.6;
	color: var(--blanc);
	background-color: var(--vert-fonce);
	overflow-x: hidden;
}

/* Verrouille le défilement de la page quand le menu mobile est ouvert. */
body.menu-open {
	overflow: hidden;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

/* Retour à la ligne forcé seulement en dessous de 640px — voir la media query mobile. */
.break-mobile {
	display: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	line-height: 1.2;
}

h2 {
	font-family: var(--font-titre);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

h3 {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: 1px;
}

p {
	margin: 0 0 1em;
}

button {
	font-family: inherit;
	cursor: pointer;
}

:focus-visible {
	outline: 3px solid var(--vert-clair);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 2000;
	padding: 12px 20px;
	background: var(--vert-clair);
	color: var(--vert-fonce);
	font-weight: 700;
}

.skip-link:focus {
	left: 0;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 20px;
}

.container--narrow {
	max-width: 820px;
}

/* ==========================================================================
   3. En-tête
   ========================================================================== */

.topbar {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 1000;
	/* Bordure comprise dans --header-h : sinon l'en-tête mesure 2px de plus que
	   le décalage du corps, et l'écart réapparaît. */
	height: var(--header-h);
	background: rgba(23, 42, 10, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 2px solid var(--vert-clair);
	transition: background var(--transition);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: var(--container);
	height: 100%;
	margin: 0 auto;
	padding: 0 20px;
}

.topbar__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.topbar__logo img {
	/*
	 * Le logo dicte la hauteur de la barre : il était à 100px, ce qui poussait
	 * l'en-tête à 142px pour un décalage de corps de 80px seulement.
	 */
	height: var(--logo-h);
	width: auto;
	max-width: 150px;
	object-fit: contain;
	transition: height var(--transition);
}

.topbar__logo-text {
	font-family: var(--font-display);
	font-size: 22px;
	color: var(--blanc);
}

.topbar__menu {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.2vw, 34px);
}

.topbar__menu a {
	position: relative;
	display: block;
	padding-bottom: 4px;
	font-family: var(--font-titre);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--blanc);
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	white-space: nowrap;
	transition: color var(--transition);
}

.topbar__menu a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: var(--vert-clair);
	transition: width var(--transition);
}

.topbar__menu a:hover,
.topbar__menu a.is-active {
	color: var(--vert-clair);
}

.topbar__menu a:hover::after,
.topbar__menu a.is-active::after {
	width: 100%;
}

.topbar__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.topbar__phone {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--blanc);
	white-space: nowrap;
	transition: color var(--transition);
}

.topbar__phone:hover {
	color: var(--vert-clair);
}

.btn-devis {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 30px;
	background-color: var(--vert-clair);
	color: var(--vert-fonce);
	font-family: var(--font-titre);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color var(--transition), transform var(--transition);
}

.btn-devis:hover {
	background-color: var(--blanc);
	transform: translateY(-2px);
}

/* --- Appel direct (à côté du burger, mobile uniquement) ------------------ */

.topbar__call {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	/* Collé au burger, sans fond ni pastille : seul l'icône, comme le reste du header. */
	margin-left: auto;
	background: none;
	color: var(--blanc);
	font-size: 19px;
	transition: color var(--transition);
}

.topbar__call:hover {
	color: var(--vert-clair);
}

/* --- Bouton burger ------------------------------------------------------ */

.burger {
	display: none;
	position: relative; /* Contexte des barres en `absolute` à l'état croix. */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	flex-shrink: 0;
}

.burger__bar {
	position: absolute;
	left: 10px;
	width: 24px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--blanc);
	transition: transform var(--transition), opacity var(--transition), top var(--transition);
}

.burger__bar:nth-child(1) {
	top: 14px;
}

.burger__bar:nth-child(2) {
	top: 21px;
}

.burger__bar:nth-child(3) {
	top: 28px;
}

/* ==========================================================================
   4. Menu mobile — panneau plein écran
   ========================================================================== */

.mobile-menu {
	position: fixed;
	inset: 0; /* Couvre l'écran entier, en-tête compris. */
	z-index: 1100;
	display: flex;
	flex-direction: column;
	background-color: var(--vert-fonce);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
	padding: 0 20px;
	border-bottom: 1px solid rgba(204, 222, 194, 0.2);
	flex-shrink: 0;
}

.mobile-menu__logo img {
	height: var(--logo-h);
	width: auto;
	max-width: 130px;
	object-fit: contain;
}

.mobile-menu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--blanc);
	font-size: 22px;
	transition: background var(--transition);
}

.mobile-menu__close:hover {
	background: rgba(255, 255, 255, 0.18);
}

.mobile-menu__nav {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	padding: 30px 20px;
}

.mobile-menu__nav ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(18px, 5vh, 40px);
	width: 100%;
}

.mobile-menu__nav a {
	display: block;
	font-family: var(--font-titre);
	font-size: clamp(22px, 6vw, 30px);
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	color: var(--blanc);
	transition: color var(--transition);
}

.mobile-menu__nav a:hover,
.mobile-menu__nav a.is-active {
	color: var(--vert-clair);
}

.mobile-menu__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(204, 222, 194, 0.2);
	flex-shrink: 0;
}

.mobile-menu__phone {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 700;
	color: var(--vert-clair);
}

.mobile-menu__actions .btn-devis {
	padding: 14px 32px;
	font-size: 15px;
}

/* ==========================================================================
   5. Sections — ossature commune
   ========================================================================== */

.section {
	padding: clamp(56px, 8vw, 100px) 0;
}

.section--light {
	background-color: var(--blanc);
	color: var(--noir);
}

.section--dark {
	background-color: var(--vert-fonce);
	color: var(--blanc);
}

/*
 * Révélation au défilement : l'état masqué n'est appliqué que si le JS a pris
 * la main (classe posée par ritmo.js). Sans JavaScript, tout reste visible —
 * l'ancienne version laissait la page entièrement vide dans ce cas.
 */
.has-reveal .section:not(.is-visible) {
	opacity: 0;
	transform: translateY(30px);
}

.section {
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.section__subtitle {
	margin-bottom: 15px;
	font-family: var(--font-titre);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	color: var(--vert-clair);
}

.section__subtitle--dark {
	color: var(--vert-fonce);
}

.section__title {
	margin-bottom: 15px;
	font-size: clamp(28px, 4.4vw, 42px);
	text-align: center;
	color: var(--vert-fonce);
}

.section__title--light {
	color: var(--vert-clair);
}

.section--dark .section__title {
	color: var(--blanc);
}

.section__text {
	max-width: 700px;
	margin: 0 auto clamp(36px, 5vw, 60px);
	font-size: 17px;
	text-align: center;
	color: var(--gris-moyen);
}

.section__text--dark {
	color: #666;
}

/* --- Boutons génériques ------------------------------------------------- */

.btn {
	display: inline-block;
	padding: 15px 34px;
	border: 2px solid transparent;
	border-radius: 30px;
	font-family: var(--font-titre);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	text-align: center;
	transition: all var(--transition);
}

.btn--primary {
	background-color: var(--vert-clair);
	color: var(--vert-fonce);
}

.btn--primary:hover {
	background-color: var(--blanc);
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.btn--outline {
	background-color: transparent;
	color: var(--blanc);
	border-color: var(--blanc);
}

.btn--outline:hover {
	background-color: var(--blanc);
	color: var(--vert-fonce);
	transform: translateY(-3px);
}

.btn--dark {
	background-color: var(--vert-fonce);
	color: var(--blanc);
	border-color: var(--vert-clair);
}

.btn--dark:hover {
	background-color: var(--vert-clair);
	color: var(--vert-fonce);
	transform: translateY(-2px);
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * La vidéo passe SOUS l'en-tête plutôt que de s'arrêter pile à son bord :
	 * plus besoin de faire correspondre au pixel près la hauteur de l'en-tête
	 * et le décalage du corps de page — une source d'écarts visuels selon les
	 * navigateurs (chargement de la vidéo, arrondis de sous-pixels…). La vidéo
	 * remonte donc à `margin-top` négatif jusqu'au sommet de l'écran, l'en-tête
	 * (translucide, `position:fixed`) flotte par-dessus, et seul le contenu
	 * texte est repoussé sous l'en-tête via `padding-top`.
	 */
	margin-top: calc(-1 * var(--header-h));
	min-height: 100vh;
	min-height: 100svh;
	padding: calc(var(--header-h) + 60px) 0 60px;
	overflow: hidden;
	text-align: center;
}

.hero__media,
.hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(23, 42, 10, 0.35), rgba(23, 42, 10, 0.55));
}

.hero__content {
	position: relative;
	z-index: 2;
	max-width: 800px;
	padding: 0 20px;
}

.hero__title {
	margin-bottom: 20px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(34px, 7vw, 56px);
	color: var(--blanc);
	text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.hero__subtitle {
	margin-bottom: 40px;
	font-family: var(--font-titre);
	font-size: clamp(16px, 2.4vw, 20px);
	color: var(--blanc);
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}

/* ==========================================================================
   7. À propos
   ========================================================================== */

.apropos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(30px, 5vw, 60px);
	align-items: start;
}

.apropos__media {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.apropos__media img {
	width: 100%;
	height: clamp(320px, 45vw, 500px);
	object-fit: cover;
	object-position: center 30%;
}

.apropos__text h3 {
	margin-bottom: 20px;
	font-size: clamp(24px, 3.2vw, 32px);
	color: var(--vert-fonce);
}

.apropos__text p {
	margin-bottom: 20px;
	font-size: 16px;
	color: #444;
}

.apropos__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}

.badge {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border-radius: 30px;
	background-color: var(--gris-clair);
	font-family: var(--font-titre);
	font-weight: 700;
	font-size: 14px;
	color: var(--vert-fonce);
}

.badge i {
	font-size: 18px;
}

/* ==========================================================================
   8. Sliders (services et avis)
   ========================================================================== */

.slider {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.slider__track {
	display: flex;
	flex: 1;
	min-width: 0;
	gap: 30px;
	padding: 4px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.slider__track::-webkit-scrollbar {
	display: none;
}

.slider__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	flex-shrink: 0;
	border: 2px solid var(--blanc);
	border-radius: 50%;
	background: none;
	color: var(--blanc);
	font-size: 16px;
	transition: all var(--transition);
}

.slider__arrow:hover:not([disabled]) {
	background-color: var(--blanc);
	color: var(--vert-fonce);
}

.slider__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.slider--light .slider__arrow {
	border-color: var(--vert-fonce);
	color: var(--vert-fonce);
}

.slider--light .slider__arrow:hover:not([disabled]) {
	background-color: var(--vert-fonce);
	color: var(--blanc);
}

/* --- Carte service ------------------------------------------------------ */

.service-card {
	flex: 0 0 calc((100% - 60px) / 3);
	scroll-snap-align: start;
	padding: 30px;
	border: 3px solid transparent;
	border-radius: var(--radius);
	background-color: var(--blanc);
	transition: border-color var(--transition);
}

.service-card:hover {
	border-color: var(--vert-clair);
}

.service-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
}

.service-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	padding: 14px;
	border-radius: 14px;
	background-color: #cfe8c9;
}

.service-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.service-card__number {
	font-family: var(--font-titre);
	font-size: 42px;
	font-weight: 700;
	color: var(--vert-fonce);
}

.service-card h3 {
	margin-bottom: 12px;
	font-family: var(--font-titre);
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var(--vert-fonce);
}

.service-card p {
	margin: 0;
	font-size: 15px;
	color: var(--vert-fonce);
}

/* --- Carte témoignage --------------------------------------------------- */

.temoignage-card {
	flex: 0 0 calc((100% - 60px) / 3);
	scroll-snap-align: start;
	padding: 32px;
	border: 3px solid transparent;
	border-radius: var(--radius);
	background-color: var(--gris-clair);
	transition: border-color var(--transition);
}

.temoignage-card:hover {
	border-color: var(--vert-clair);
}

.temoignage-card__stars {
	margin-bottom: 15px;
	font-size: 20px;
	color: #f5b301;
}

.temoignage-card blockquote {
	margin: 0 0 20px;
}

.temoignage-card blockquote p {
	margin: 0;
	font-size: 15px;
	font-style: italic;
	color: #444;
}

.temoignage-card__author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.temoignage-card__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--vert-fonce);
	color: var(--vert-clair);
	font-weight: 700;
}

.temoignage-card__author strong {
	display: block;
	font-size: 15px;
	color: var(--vert-fonce);
}

.temoignage-card__city {
	font-size: 13px;
	color: #888;
}

/* ==========================================================================
   8 bis. Outils
   ========================================================================== */

.outils__title {
	margin-bottom: 18px;
	font-size: clamp(24px, 3.4vw, 34px);
	text-align: center;
	color: var(--blanc);
}

.outils__text {
	margin: 0 auto 30px;
	max-width: 600px;
	font-size: 16px;
	text-align: center;
	color: var(--gris-moyen);
}

/* Bulles identiques à .zone-tag (voir section Zones) : mêmes classes réutilisées telles quelles. */
.outils__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.outils__cta {
	text-align: center;
}

/* ==========================================================================
   9. Projets
   ========================================================================== */

.projets-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
}

.projet-card {
	position: relative;
	height: 320px;
	border-radius: 12px;
	overflow: hidden;
}

.projet-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.projet-card:hover img {
	transform: scale(1.08);
}

.projet-card__overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 40px 20px 20px;
	background: linear-gradient(180deg, transparent, rgba(23, 42, 10, 0.95));
	color: var(--blanc);
}

.projet-card__overlay h3 {
	margin-bottom: 4px;
	font-family: var(--font-titre);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
}

.projet-card__overlay span {
	font-size: 13px;
	color: var(--vert-clair);
}

.projets-more {
	margin-top: 40px;
	text-align: center;
}

/* ==========================================================================
   10. Zones
   ========================================================================== */

.zones {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(30px, 5vw, 60px);
	align-items: center;
}

.zones__map {
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius);
	background-color: rgba(255, 255, 255, 0.05);
}

.zones__map img {
	width: 100%;
	height: clamp(260px, 32vw, 400px);
	object-fit: contain;
	border-radius: 12px;
}

.zones__list h3 {
	margin-bottom: 20px;
	font-size: clamp(22px, 3.2vw, 32px);
	color: var(--vert-clair);
}

.zones__list p {
	margin-bottom: 25px;
	color: var(--gris-moyen);
}

.zones__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.zone-tag {
	padding: 9px 18px;
	border: 1px solid var(--vert-clair);
	border-radius: 30px;
	background-color: rgba(255, 255, 255, 0.08);
	font-family: var(--font-titre);
	font-size: 14px;
	font-weight: 700;
	color: var(--vert-clair);
}

/* ==========================================================================
   11. Formulaire de devis
   ========================================================================== */

.devis {
	max-width: 650px;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 50px);
	border-radius: var(--radius);
	background-color: var(--blanc);
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
}

.devis__steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-bottom: 36px;
}

.devis__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--gris-moyen);
	color: #888;
	font-family: var(--font-titre);
	font-weight: 700;
	transition: all var(--transition);
}

.devis__dot.is-active {
	background-color: var(--vert-fonce);
	color: var(--vert-clair);
}

.devis__line {
	width: 60px;
	height: 2px;
	background-color: var(--gris-moyen);
}

/*
 * Titres d'étape : la pagination de Gravity Forms est désactivée côté formulaire
 * (pagination_type: none) — ces titres et les pastilles ci-dessus sont les seuls
 * repères d'étape, tenus à jour par ritmo.js sur l'évènement `gform_page_loaded`.
 */
.devis__step-title {
	display: none;
	margin-bottom: 25px;
	font-family: var(--font-titre);
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 700;
	letter-spacing: 0;
	text-align: center;
	color: var(--vert-fonce);
}

.devis__step-title.is-active {
	display: block;
	animation: ritmo-fade 0.4s ease;
}

@keyframes ritmo-fade {
	from {
		opacity: 0;
		transform: translateX(15px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Après envoi, Gravity Forms remplace le formulaire par son message de confirmation : les repères d'étape n'ont plus lieu d'être. */
.devis.is-done .devis__steps,
.devis.is-done .devis__step-title {
	display: none;
}

/*
 * --- Gravity Forms (thème « legacy », voir inc/gravityforms.php) --------
 * La feuille de style et le thème visuel du plugin sont désactivés : tout
 * l'habillage ci-dessous cible son balisage brut (.gfield, .ginput_container…).
 */

.gform_page_fields,
.gform-body {
	display: block;
}

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

.gfield {
	flex: 0 0 100%;
	margin-bottom: 20px;
}

/* Prénom / Nom : deux champs déclarés en cssClass="ritmo-col-6" côté formulaire. */
.gfield.ritmo-col-6 {
	flex: 0 0 calc(50% - 10px);
}

.gfield_label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-titre);
	font-weight: 700;
	font-size: 14px;
	color: var(--vert-fonce);
}

/* Le texte « (Nécessaire) » reste lu par les lecteurs d'écran ; à l'écran, un simple astérisque suffit. */
.gfield_required_text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.gfield_required::before {
	content: '*';
	margin-left: 4px;
	color: #c0392b;
}

.gfield input[type='text'],
.gfield input[type='email'],
.gfield input[type='tel'],
.gfield select,
.gfield textarea {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid var(--gris-moyen);
	border-radius: 8px;
	font-family: var(--font-corps);
	/* 16px minimum : en dessous, iOS zoome automatiquement à la saisie. */
	font-size: 16px;
	color: var(--noir);
	background-color: var(--blanc);
	transition: border-color var(--transition);
}

.gfield select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23172a0a'%3E%3Cpath d='M8 11.5 2.5 6l1.4-1.4L8 8.7l4.1-4.1L13.5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 14px;
}

.gfield textarea {
	height: 110px;
	resize: vertical;
}

.gfield input:focus,
.gfield select:focus,
.gfield textarea:focus {
	outline: none;
	border-color: var(--vert-fonce);
}

.gfield.gfield_error input,
.gfield.gfield_error select,
.gfield.gfield_error textarea {
	border-color: #c0392b;
}

.gfield.gfield_error .gfield_label {
	color: #c0392b;
}

.validation_message {
	margin-top: 6px;
	font-size: 13px;
	color: #c0392b;
}

.gform_validation_errors {
	margin-bottom: 24px;
	padding: 14px 18px;
	border-radius: 8px;
	background-color: #fdecea;
	color: #8e2019;
	font-size: 14px;
}

.gform_validation_errors h2 {
	margin-bottom: 4px;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
}

.gform_page_footer {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	margin-top: 10px;
}

.gform_page_footer input[type='button'],
.gform_page_footer input[type='submit'] {
	padding: 14px 30px;
	border: 2px solid transparent;
	border-radius: 8px;
	font-family: var(--font-titre);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--transition);
	appearance: none;
	-webkit-appearance: none;
}

/* « Suivant » (page 1) et « Envoyer » (page 2) : même style, poussés à droite
   même seuls dans le pied de page (une seule ligne de bouton n'a pas besoin
   de justify-content:space-between pour se positionner). */
.gform_page_footer input[data-submission-type='next'],
.gform_page_footer input[data-submission-type='submit'] {
	margin-left: auto;
	background-color: var(--vert-fonce);
	color: var(--blanc);
}

.gform_page_footer input[data-submission-type='next']:hover,
.gform_page_footer input[data-submission-type='submit']:hover {
	background-color: var(--vert-hover);
}

.gform_page_footer input[data-submission-type='previous'] {
	background-color: transparent;
	color: var(--vert-fonce);
	border-color: var(--vert-fonce);
}

.gform_page_footer input[data-submission-type='previous']:hover {
	background-color: var(--gris-clair);
}

.gform_button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.gform_confirmation_message {
	padding: 16px 20px;
	border-radius: 8px;
	background-color: #e8f3e2;
	color: #1e4620;
	font-size: 15px;
	text-align: center;
}

.devis__fallback {
	margin-bottom: 20px;
	text-align: center;
	color: #555;
}

.devis__fallback-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

/* --- Visuel de fin de section ------------------------------------------- */

.contact-visual {
	width: 100%;
	max-height: 0;
	margin-top: clamp(40px, 6vw, 80px);
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.9s ease, opacity 0.9s ease;
}

.contact-visual.is-visible {
	max-height: 100vh;
	opacity: 1;
}

.contact-visual img {
	width: 100%;
	height: clamp(260px, 60vh, 640px);
	object-fit: cover;
	object-position: center 30%;
}

/*
 * Le visuel est en pleine largeur, hors de .container, en dernier enfant de
 * la section — mais `.section` ajoute quand même son padding-bottom habituel
 * après lui, ce qui laissait une bande vide de la couleur de fond juste avant
 * le pied de page. Cette bande n'a de sens que si un visuel est configuré :
 * sans lui, la section garde son padding normal.
 */
#contact:has(.contact-visual) {
	padding-bottom: 0;
}

/* ==========================================================================
   12. Pied de page
   ========================================================================== */

.site-footer {
	padding: clamp(48px, 6vw, 70px) 0 30px;
	background-color: var(--footer-bg);
}

.footer-top {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: clamp(30px, 4vw, 50px);
	padding-bottom: 45px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand__logo img {
	height: 130px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
	margin-bottom: 15px;
}

.footer-brand h3 {
	margin-bottom: 8px;
	font-size: 22px;
	color: var(--vert-clair);
}

.footer-brand p {
	max-width: 300px;
	font-size: 14px;
	color: var(--gris-moyen);
}

.footer-col h4 {
	margin-bottom: 20px;
	font-family: var(--font-titre);
	font-size: 17px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--vert-clair);
}

.footer-col ul li {
	margin-bottom: 8px;
}

.footer-col ul li a {
	font-size: 14px;
	color: var(--gris-moyen);
	transition: color var(--transition);
}

.footer-col ul li a:hover {
	color: var(--vert-clair);
}

.contact-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 15px;
	font-size: 14px;
	color: var(--gris-moyen);
}

.contact-item i {
	margin-top: 4px;
	color: var(--vert-clair);
}

.contact-item a:hover {
	color: var(--vert-clair);
}

.footer-socials {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.footer-socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border: 1px solid var(--vert-clair);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--vert-clair);
	transition: all var(--transition);
}

.footer-socials a:hover {
	background-color: var(--vert-clair);
	color: var(--vert-fonce);
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding-top: 25px;
}

.footer-bottom p {
	margin: 0;
	font-size: 13px;
	color: #888;
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
}

.footer-legal a {
	font-size: 13px;
	color: #888;
	transition: color var(--transition);
}

.footer-legal a:hover {
	color: var(--vert-clair);
}

/* ==========================================================================
   13. Pages de contenu simple
   ========================================================================== */

.page-simple {
	padding: clamp(50px, 7vw, 90px) 0;
	background-color: var(--blanc);
	color: var(--noir);
}

.page-simple--center {
	text-align: center;
}

.page-simple__cover {
	margin: 0 0 34px;
	border-radius: var(--radius);
	overflow: hidden;
}

.page-simple__cover img {
	width: 100%;
	height: clamp(220px, 36vw, 420px);
	object-fit: cover;
}

.page-simple__header h1 {
	margin-bottom: 10px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(28px, 5vw, 44px);
	color: var(--vert-fonce);
}

.page-simple__meta {
	font-size: 14px;
	color: #888;
}

.page-simple__content {
	margin-top: 30px;
}

.page-simple__content h2,
.page-simple__content h3 {
	margin: 32px 0 14px;
	color: var(--vert-fonce);
}

.page-simple__content a {
	color: var(--vert-hover);
	text-decoration: underline;
}

.page-simple__content ul,
.page-simple__content ol {
	margin: 0 0 1em 1.4em;
	list-style: revert;
}

.page-simple__actions {
	margin-top: 30px;
}

.post-list__item {
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--gris-moyen);
}

.post-list__item h2 {
	font-size: 22px;
	color: var(--vert-fonce);
}

.post-list__meta {
	margin: 6px 0;
	font-size: 13px;
	color: #888;
}

/* ==========================================================================
   13 bis. Pages de listing et de détail (projets, articles)
   ========================================================================== */

/* --- Bandeau d'en-tête --------------------------------------------------- */

.banner {
	padding: clamp(40px, 6vw, 70px) 0 clamp(36px, 5vw, 56px);
	background-color: var(--vert-fonce);
	text-align: center;
}

.banner__title {
	margin-bottom: 15px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(28px, 5vw, 46px);
	color: var(--blanc);
}

.banner .section__text {
	margin-bottom: 0;
}

.breadcrumb {
	margin-bottom: 22px;
}

.breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	color: var(--gris-moyen);
}

.breadcrumb li + li::before {
	content: '›';
	margin-right: 8px;
	color: var(--vert-clair);
}

.breadcrumb a {
	color: var(--vert-clair);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- Filtres de taxonomie ------------------------------------------------ */

.filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: clamp(28px, 4vw, 44px);
}

.filter {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid var(--vert-fonce);
	border-radius: 30px;
	font-family: var(--font-titre);
	font-size: 14px;
	font-weight: 700;
	color: var(--vert-fonce);
	transition: all var(--transition);
}

.filter:hover,
.filter.is-active {
	background-color: var(--vert-fonce);
	color: var(--vert-clair);
}

/*
 * Variante mobile en liste déroulante. Elle n'apparaît que si JavaScript est
 * disponible (classe `js` sur <html>) puisque c'est lui qui déclenche la
 * navigation : sans lui, les pastilles restent en place et restent cliquables.
 */
.filters-select {
	display: none;
	max-width: 420px;
	margin: 0 auto clamp(28px, 4vw, 44px);
}

.filters-select label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-titre);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--vert-fonce);
}

.filters-select select {
	width: 100%;
	padding: 14px 44px 14px 18px;
	border: 2px solid var(--vert-fonce);
	border-radius: 30px;
	background-color: var(--blanc);
	color: var(--vert-fonce);
	font-family: var(--font-corps);
	/* 16px minimum : en dessous, iOS zoome à l'ouverture du sélecteur. */
	font-size: 16px;
	font-weight: 700;
	appearance: none;
	-webkit-appearance: none;
	/* Chevron dessiné en SVG inline : pas de requête supplémentaire. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23172a0a'%3E%3Cpath d='M8 11.5 2.5 6l1.4-1.4L8 8.7l4.1-4.1L13.5 6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 14px;
}

.filters-select select:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(23, 42, 10, 0.15);
}

/* --- Vignette projet cliquable ------------------------------------------ */

.projet-card__link {
	display: block;
	width: 100%;
	height: 100%;
}

.projet-card__link:focus-visible {
	outline-offset: -4px;
}

/* --- Grille d'articles --------------------------------------------------- */

.posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--gris-moyen);
	border-radius: var(--radius);
	background-color: var(--blanc);
	transition: border-color var(--transition), transform var(--transition);
}

.post-card:hover {
	border-color: var(--vert-clair);
	transform: translateY(-4px);
}

.post-card__media {
	display: block;
	height: 200px;
	overflow: hidden;
	background-color: var(--gris-clair);
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.post-card:hover .post-card__media img {
	transform: scale(1.06);
}

.post-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 34px;
	color: var(--vert-clair);
	background-color: var(--vert-fonce);
}

.post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 24px;
}

.post-card__meta {
	margin: 0 0 10px;
	font-family: var(--font-titre);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #888;
}

.post-card__title {
	margin-bottom: 12px;
	font-size: 20px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--vert-fonce);
}

.post-card__title a:hover {
	color: var(--vert-hover);
	text-decoration: underline;
}

.post-card__excerpt {
	flex: 1;
	font-size: 15px;
	color: #555;
}

.post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-family: var(--font-titre);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--vert-fonce);
}

/* --- Fiche projet -------------------------------------------------------- */

.projet-single__cover {
	margin: 0 0 clamp(30px, 4vw, 50px);
	border-radius: var(--radius);
	overflow: hidden;
}

.projet-single__cover img {
	width: 100%;
	height: clamp(240px, 42vw, 520px);
	object-fit: cover;
}

.projet-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(30px, 4vw, 55px);
	align-items: start;
}

.projet-single__content {
	color: #444;
}

.projet-single__content h2,
.projet-single__content h3 {
	margin: 30px 0 14px;
	color: var(--vert-fonce);
}

.projet-single__gallery-title {
	font-family: var(--font-titre);
	font-size: 22px;
	text-transform: uppercase;
}

.projet-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 18px;
}

.projet-gallery img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: 10px;
	transition: transform var(--transition);
}

.projet-gallery a:hover img {
	transform: scale(1.04);
}

.projet-single__meta {
	position: sticky;
	top: calc(var(--header-h) + 20px);
	padding: 28px;
	border-radius: var(--radius);
	background-color: var(--gris-clair);
}

.projet-single__meta h2 {
	margin-bottom: 18px;
	font-size: 18px;
	color: var(--vert-fonce);
}

.projet-single__meta dl {
	margin: 0 0 24px;
}

.projet-single__meta dt {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-family: var(--font-titre);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: #777;
}

.projet-single__meta dt i {
	color: var(--vert-fonce);
}

.projet-single__meta dd {
	margin: 4px 0 0;
	font-size: 16px;
	color: var(--vert-fonce);
}

.projet-single__meta dd a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.projet-single__meta .btn {
	width: 100%;
}

.projet-single__related {
	margin-top: clamp(50px, 7vw, 85px);
	padding-top: clamp(36px, 5vw, 55px);
	border-top: 1px solid var(--gris-moyen);
}

.projet-single__related .section__title {
	margin-bottom: 34px;
	font-size: clamp(22px, 3vw, 30px);
}

/* --- Article ------------------------------------------------------------- */

.post-single__cover {
	margin: 0 0 34px;
	border-radius: var(--radius);
	overflow: hidden;
}

.post-single__cover img {
	width: 100%;
	height: clamp(220px, 36vw, 420px);
	object-fit: cover;
}

.post-single__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 34px;
}

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid var(--gris-moyen);
	font-family: var(--font-titre);
	font-weight: 700;
	font-size: 14px;
}

.post-nav a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--vert-fonce);
}

.post-nav a:hover {
	color: var(--vert-hover);
	text-decoration: underline;
}

.post-nav__next {
	margin-left: auto;
	text-align: right;
}

/* --- Éléments partagés --------------------------------------------------- */

.back-link {
	margin-top: 40px;
	text-align: center;
}

.back-link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-titre);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--vert-fonce);
}

.back-link a:hover {
	color: var(--vert-hover);
	text-decoration: underline;
}

.empty-state {
	padding: 50px 0;
	text-align: center;
	color: #777;
}

.pagination {
	margin-top: clamp(36px, 5vw, 56px);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--vert-fonce);
	border-radius: 30px;
	font-family: var(--font-titre);
	font-weight: 700;
	font-size: 14px;
	color: var(--vert-fonce);
	transition: all var(--transition);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background-color: var(--vert-fonce);
	color: var(--vert-clair);
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

.projets-more {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 40px;
}

/* --- Bandeau d'appel à l'action ------------------------------------------ */

.cta-devis {
	padding: clamp(50px, 7vw, 80px) 0;
	background-color: var(--vert-fonce);
	text-align: center;
}

.cta-devis .section__text {
	margin-bottom: 32px;
}

.cta-devis__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.cta-devis__actions .btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */

/* --- Tablette large ----------------------------------------------------- */
@media (max-width: 1100px) {
	.topbar__phone span {
		display: none; /* L'icône suffit : le libellé écrasait le menu. */
	}
}

/* --- Bascule vers le menu mobile ---------------------------------------- */
@media (max-width: 992px) {
	:root {
		--header-h: 80px;
		--logo-h: 64px;
	}

	.topbar {
		background: rgba(23, 42, 10, 0.95);
	}

	.topbar__nav,
	.topbar__actions {
		display: none;
	}

	.topbar__call {
		display: flex;
	}

	.burger {
		display: block;
	}

	/* Croix : les deux barres extrêmes se rejoignent au centre. */
	.burger.is-open .burger__bar:nth-child(1) {
		top: 21px;
		transform: rotate(45deg);
	}

	.burger.is-open .burger__bar:nth-child(2) {
		opacity: 0;
	}

	.burger.is-open .burger__bar:nth-child(3) {
		top: 21px;
		transform: rotate(-45deg);
	}

	.apropos,
	.zones {
		grid-template-columns: 1fr;
	}

	.apropos__media img {
		height: clamp(280px, 55vw, 420px);
	}

	.service-card,
	.temoignage-card {
		flex: 0 0 calc((100% - 30px) / 2);
	}

	.projets-grid,
	.posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* La colonne d'infos passe sous le contenu : plus de sticky à conserver. */
	.projet-single__layout {
		grid-template-columns: 1fr;
	}

	.projet-single__meta {
		position: static;
	}

	.footer-top {
		grid-template-columns: 1fr 1fr;
	}

	/*
	 * Redondante avec le menu mobile (mêmes liens) et deux fois plus haute que
	 * les deux autres colonnes une fois empilée en dessous de 992px : masquée
	 * plutôt qu'affichée en double.
	 */
	.footer-nav {
		display: none;
	}
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 640px) {
	:root {
		--header-h: 72px;
		--logo-h: 56px;
	}

	.section {
		padding: 56px 0;
	}

	.outils__list {
		justify-content: flex-start;
	}

	/*
	 * Retour à la ligne forcé uniquement sur mobile : un <br> stocké dans le
	 * contenu casserait aussi la ligne sur desktop, où la phrase tient déjà
	 * sur une seule ligne. `display:none/block` sur un <br> est respecté par
	 * les navigateurs — c'est le seul élément HTML où ça fonctionne ainsi.
	 */
	.break-mobile {
		display: block;
	}

	/*
	 * Une carte pleine largeur à la fois, jamais rognée. Les flèches occupaient
	 * de la largeur de part et d'autre du rail et coupaient la carte visible ;
	 * en dessous de 640px la navigation se fait au doigt (défilement + accroche
	 * `scroll-snap`), comme sur n'importe quel carrousel mobile.
	 */
	.service-card,
	.temoignage-card {
		flex: 0 0 100%;
	}

	/*
	 * Flèches groupées sous la carte plutôt qu'à côté (largeur mangée par la
	 * carte) ou en surimpression (mordait sur le contenu). Le rail passe en
	 * pleine largeur sur sa propre ligne ; les deux flèches, réordonnées après
	 * lui, se retrouvent naturellement groupées et centrées sur la ligne
	 * suivante grâce au retour à la ligne du conteneur flex.
	 */
	.slider {
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
	}

	.slider__track {
		flex: 0 0 100%;
		order: 1;
	}

	.slider__arrow {
		order: 2;
	}

	.slider__arrow--next {
		order: 3;
	}

	.service-card,
	.temoignage-card {
		padding: 24px;
	}

	.service-card__icon {
		width: 58px;
		height: 58px;
		padding: 11px;
	}

	.service-card__number {
		font-size: 32px;
	}

	/* Sept pastilles occupaient trois lignes : la liste déroulante prend une ligne. */
	.js .filters {
		display: none;
	}

	.js .filters-select {
		display: block;
	}

	.projets-grid,
	.posts-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.projet-card {
		height: 260px;
	}

	.projet-gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	.post-nav {
		flex-direction: column;
		gap: 14px;
	}

	.post-nav__next {
		margin-left: 0;
		text-align: left;
	}

	.projets-more .btn,
	.cta-devis__actions .btn {
		width: 100%;
		max-width: 340px;
	}

	.gfield.ritmo-col-6 {
		flex: 0 0 100%;
	}

	.gform_page_footer {
		flex-direction: column-reverse;
	}

	.gform_page_footer input[type='button'],
	.gform_page_footer input[type='submit'] {
		width: 100%;
		margin-left: 0;
	}

	.hero__buttons .btn {
		width: 100%;
		max-width: 320px;
	}

	.footer-top {
		grid-template-columns: 1fr;
		gap: 32px;
		text-align: center;
	}

	.footer-brand__logo img {
		margin-inline: auto;
		height: 110px;
	}

	.footer-brand p {
		margin-inline: auto;
	}

	.contact-item {
		justify-content: center;
		text-align: left;
	}

	.footer-socials {
		justify-content: center;
	}

	.footer-bottom {
		flex-direction: column;
		text-align: center;
	}

	.footer-legal {
		justify-content: center;
		gap: 18px;
	}
}

/* --- Très petits écrans -------------------------------------------------- */
@media (max-width: 380px) {
	.zone-tag {
		padding: 7px 14px;
		font-size: 13px;
	}

	.badge {
		padding: 10px 16px;
		font-size: 13px;
	}
}

/* --- Paysage court (téléphone couché) ------------------------------------ */
@media (max-height: 480px) and (orientation: landscape) {
	.hero {
		min-height: 460px;
	}

	.mobile-menu__nav ul {
		gap: 14px;
	}

	.mobile-menu__nav a {
		font-size: 20px;
	}
}

/* ==========================================================================
   15. Préférences utilisateur et impression
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.has-reveal .section:not(.is-visible) {
		opacity: 1;
		transform: none;
	}
}

@media print {
	.topbar,
	.mobile-menu,
	.slider__arrow,
	.projets-more,
	.gform_page_footer {
		display: none !important;
	}

	body {
		padding-top: 0;
		color: #000;
		background: #fff;
	}
}