/**
 * ATZER CHARGE — feuille de style principale.
 *
 * Sommaire
 *  1. Jetons de design
 *  2. Polices
 *  3. Réinitialisation et base
 *  4. Typographie
 *  5. Mise en page
 *  6. Boutons
 *  7. Cartes
 *  8. Titres de section
 *  9. En-tête et navigation
 * 10. Navigation mobile
 * 11. Fil d'Ariane
 * 12. Pied de page
 * 13. Utilitaires
 * 14. Accessibilité
 */

/* ==========================================================================
   1. Jetons de design
   ========================================================================== */

:root {
	/* Palette de marque — ne pas introduire d'autres couleurs. */
	--atzer-navy: #021024;
	--atzer-deep-blue: #01234f;
	--atzer-electric-blue: #00bfff;
	--atzer-cyan: #00c8ff;
	--atzer-energy-green: #8bcf20;
	--atzer-fresh-green: #a4d65e;
	--atzer-white: #ffffff;
	--atzer-light-eco: #f3f8f5;

	--atzer-gradient: linear-gradient(90deg, #00bfff 0%, #8bcf20 100%);

	/* Dégradé de fond de marque : le navy s'ouvre vers le cyan puis le vert.
	   C'est lui qui donne la lecture « énergie propre » plutôt qu'un aplat
	   sombre. Utilisé sur le héros, le bandeau de confiance et les blocs
	   d'appel à l'action.

	   Les teintes s'arrêtent volontairement à un vert soutenu (#2b7a45) et non
	   au vert vif de la palette : au-delà, le texte blanc passerait sous le
	   ratio de contraste 4.5:1. Le vert vif reste présent, mais en halo et en
	   accents, jamais sous du texte. */
	--atzer-gradient-bg: linear-gradient(
		115deg,
		#021024 0%,
		#01234f 32%,
		#05506f 60%,
		#1f6b52 82%,
		#2b7a45 100%
	);

	/* Version horizontale, pour les bandeaux de faible hauteur. */
	--atzer-gradient-band: linear-gradient(
		90deg,
		#01234f 0%,
		#04618a 38%,
		#217a5c 72%,
		#35793a 100%
	);

	/* Neutres dérivés du navy : cohérents avec la marque, jamais gris pur. */
	--atzer-ink: #0b1b2e;
	--atzer-slate-900: #16283d;
	--atzer-slate-700: #3d5165;
	--atzer-slate-500: #667c92;
	--atzer-slate-300: #b9c6d3;
	--atzer-slate-100: #e3eaf1;
	--atzer-slate-50: #f5f8fb;

	/* Rôles sémantiques : les composants utilisent ceux-ci, pas la palette brute. */
	--color-bg: var(--atzer-white);
	--color-bg-alt: var(--atzer-slate-50);
	--color-bg-eco: var(--atzer-light-eco);
	--color-bg-dark: var(--atzer-navy);
	--color-bg-dark-alt: var(--atzer-deep-blue);
	--color-text: var(--atzer-ink);
	--color-text-muted: var(--atzer-slate-700);
	--color-text-on-dark: var(--atzer-white);
	--color-text-on-dark-muted: #a8c0d6;
	--color-border: var(--atzer-slate-100);
	--color-border-strong: var(--atzer-slate-300);
	--color-border-dark: rgba(255, 255, 255, 0.14);
	--color-accent: var(--atzer-electric-blue);
	/* Version foncée du bleu électrique, réservée au texte et aux liens :
	   le #00BFFF de la palette ne donne que 2.1:1 sur blanc, illisible.
	   Celle-ci atteint 5.4:1 sur blanc et 5.1:1 sur le gris clair. */
	--color-accent-strong: #07729b;
	--color-eco: var(--atzer-energy-green);

	--color-error: #c02b2b;
	--color-error-bg: #fdf2f2;
	--color-success: #1d7a4c;
	--color-success-bg: #eff8f3;

	/* Typographie */
	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--text-xs: 0.8125rem;
	--text-sm: 0.9063rem;
	--text-base: 1rem;
	--text-lg: 1.0938rem;
	--text-xl: clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem);
	--text-2xl: clamp(1.375rem, 0.7vw + 1.2rem, 1.625rem);
	--text-3xl: clamp(1.625rem, 1.3vw + 1.35rem, 2.125rem);
	--text-4xl: clamp(2rem, 2.2vw + 1.5rem, 2.875rem);
	--text-5xl: clamp(2.375rem, 3.4vw + 1.6rem, 3.75rem);

	--leading-tight: 1.14;
	--leading-snug: 1.28;
	--leading-normal: 1.65;

	--tracking-tight: -0.022em;
	--tracking-wide: 0.08em;

	/* Espacement — échelle unique réutilisée partout. */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 2.5rem;
	--space-8: 3rem;
	--space-9: 4rem;
	--space-10: 5rem;
	--space-11: 6.5rem;

	/* Rythme vertical des sections, resserré sur mobile. */
	--section-y: clamp(3.5rem, 6vw, 6.5rem);
	--section-y-lg: clamp(4.5rem, 8vw, 8.5rem);

	/* Espace entre un titre de section et le contenu qui suit. */
	--head-gap: var(--space-7);

	/* Rayons — volontairement discrets : registre technique, pas ludique. */
	--radius-sm: 3px;
	--radius: 6px;
	--radius-lg: 10px;

	/* Ombres — portées douces, jamais colorées de façon voyante. */
	--shadow-sm: 0 1px 2px rgba(2, 16, 36, 0.06);
	--shadow: 0 2px 8px rgba(2, 16, 36, 0.07), 0 1px 2px rgba(2, 16, 36, 0.05);
	--shadow-lg: 0 12px 32px rgba(2, 16, 36, 0.1), 0 2px 8px rgba(2, 16, 36, 0.05);

	/* Largeurs */
	--container: 1200px;
	--container-narrow: 820px;
	--gutter: clamp(1.125rem, 4vw, 2.5rem);

	--header-height: 76px;

	--transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   2. Polices
   ========================================================================== */

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
		U+20AC, U+2122, U+2212, U+FEFF;
}

/* ==========================================================================
   3. Réinitialisation et base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

svg {
	flex-shrink: 0;
}

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

a:hover {
	color: var(--atzer-deep-blue);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

figure,
blockquote {
	margin: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: var(--space-7) 0;
}

::selection {
	background-color: var(--atzer-electric-blue);
	color: var(--atzer-navy);
}

/* ==========================================================================
   4. Typographie
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: var(--color-text);
	font-weight: 700;
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	text-wrap: balance;
}

h1 {
	font-size: var(--text-5xl);
}

h2 {
	font-size: var(--text-4xl);
}

h3 {
	font-size: var(--text-2xl);
	line-height: var(--leading-snug);
}

h4 {
	font-size: var(--text-xl);
	line-height: var(--leading-snug);
}

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

p + p {
	margin-top: var(--space-4);
}

strong {
	font-weight: 650;
}

small {
	font-size: var(--text-sm);
}

/* ==========================================================================
   5. Mise en page
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.section {
	padding-block: var(--section-y);
}

.section--lg {
	padding-block: var(--section-y-lg);
}

.section--alt {
	background-color: var(--color-bg-alt);
}

.section--eco {
	background-color: var(--color-bg-eco);
}

.section--dark {
	background: var(--atzer-gradient-bg);
	color: var(--color-text-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
	color: var(--color-text-on-dark);
}

.grid {
	display: grid;
	gap: var(--space-5);
}

.grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.stack > * + * {
	margin-top: var(--space-4);
}

.main-content {
	display: block;
}

/* ==========================================================================
   6. Boutons
   ========================================================================== */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 50px;
	padding: 0.8rem 1.7rem;
	border: 1px solid transparent;
	border-radius: 100px; /* Pilule : registre plus contemporain que l'angle arrondi. */
	font-size: var(--text-sm);
	font-weight: 620;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: background-color var(--transition), border-color var(--transition),
		color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn:hover {
	transform: translateY(-2px);
}

.btn:active {
	transform: translateY(0);
}

/* Reflet qui traverse le bouton au survol. */
.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		transparent 20%,
		rgba(255, 255, 255, 0.34) 50%,
		transparent 80%
	);
	transform: translateX(-110%);
	transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover::before {
	transform: translateX(110%);
}

.btn__icon {
	transition: transform var(--transition);
}

.btn:hover .btn__icon {
	transform: translateX(4px);
}

.btn--primary {
	background-color: var(--atzer-electric-blue);
	border-color: var(--atzer-electric-blue);
	color: var(--atzer-navy);
}

.btn--primary:hover {
	background-color: #2ccdff;
	border-color: #2ccdff;
	color: var(--atzer-navy);
	box-shadow: 0 6px 20px rgba(0, 191, 255, 0.28);
}

.btn--eco {
	background-color: var(--atzer-energy-green);
	border-color: var(--atzer-energy-green);
	color: #16250a;
}

.btn--eco:hover {
	background-color: var(--atzer-fresh-green);
	border-color: var(--atzer-fresh-green);
	color: #16250a;
}

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

.btn--outline:hover {
	border-color: var(--atzer-deep-blue);
	background-color: var(--atzer-deep-blue);
	color: var(--atzer-white);
}

/* Variante posée sur fond sombre. */
.btn--ghost {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.28);
	color: var(--atzer-white);
}

.btn--ghost:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--atzer-white);
}

.btn--solid-dark {
	background-color: var(--atzer-deep-blue);
	border-color: var(--atzer-deep-blue);
	color: var(--atzer-white);
}

.btn--solid-dark:hover {
	background-color: var(--atzer-navy);
	border-color: var(--atzer-navy);
	color: var(--atzer-white);
}

.btn--lg {
	min-height: 54px;
	padding: 0.9rem 1.9rem;
	font-size: var(--text-base);
}

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

.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* ==========================================================================
   7. Cartes
   ========================================================================== */

.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	transition: border-color var(--transition), box-shadow var(--transition),
		transform var(--transition);
}

.card--link:hover {
	border-color: var(--atzer-electric-blue);
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}

/* Pastille d'icône : dégradé de marque en fond, liseré assorti, et légère
   réaction au survol de la carte. */
.card__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(140deg, rgba(0, 191, 255, 0.18) 0%, rgba(139, 207, 32, 0.14) 100%);
	border: 1px solid rgba(0, 191, 255, 0.28);
	color: var(--atzer-deep-blue);
	transition: transform var(--transition), border-color var(--transition),
		box-shadow var(--transition);
}

.card--link:hover .card__icon {
	transform: translateY(-3px) rotate(-5deg);
	border-color: rgba(139, 207, 32, 0.6);
	box-shadow: 0 8px 20px rgba(0, 191, 255, 0.22);
}

.card__icon--eco {
	background: linear-gradient(140deg, rgba(139, 207, 32, 0.22) 0%, rgba(0, 191, 255, 0.12) 100%);
	border-color: rgba(139, 207, 32, 0.42);
	color: #47690f;
}

.card--link:hover .card__icon--eco {
	border-color: rgba(0, 191, 255, 0.6);
}

.card__title {
	font-size: var(--text-xl);
	font-weight: 650;
}

.card__text {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-2);
	color: var(--atzer-deep-blue);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
}

.card__link:hover {
	color: var(--atzer-electric-blue);
}

.card--dark {
	background-color: rgba(255, 255, 255, 0.04);
	border-color: var(--color-border-dark);
	color: var(--color-text-on-dark);
}

.card--dark .card__text {
	color: var(--color-text-on-dark-muted);
}

.card--dark .card__icon {
	background-color: rgba(0, 191, 255, 0.16);
	color: var(--atzer-electric-blue);
}

/* ==========================================================================
   8. Titres de section
   ========================================================================== */

.section-head {
	max-width: 66ch;
	margin-bottom: var(--head-gap);
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.section-head__eyebrow {
	margin-bottom: var(--space-3);
	color: var(--atzer-deep-blue);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.section--dark .section-head__eyebrow {
	color: var(--atzer-electric-blue);
}

.section-head__lead {
	margin-top: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

.section--dark .section-head__lead {
	color: var(--color-text-on-dark-muted);
}

/* Filet dégradé, seul emploi décoratif du dégradé de marque. */
.rule-gradient {
	width: 64px;
	height: 3px;
	border-radius: 2px;
	background: var(--atzer-gradient);
}

/* ==========================================================================
   9. En-tête et navigation
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: linear-gradient(100deg, rgba(2, 16, 36, 0.94) 0%, rgba(1, 35, 79, 0.94) 55%, rgba(4, 92, 118, 0.9) 100%);
	backdrop-filter: saturate(150%) blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: box-shadow var(--transition);
}

/* Filet de marque sous l'en-tête : rappel permanent du dégradé. */
.site-header::after {
	content: "";
	display: block;
	height: 2px;
	background: var(--atzer-gradient);
}

.site-header--scrolled {
	box-shadow: 0 4px 24px rgba(2, 16, 36, 0.3);
}

/* La barre d'administration WordPress est fixe au-dessus de 600 px : l'en-tête
   collant doit se caler dessous, sinon il glisse derrière elle au défilement.
   En dessous de 600 px elle repasse en position absolue et défile avec la
   page : aucun décalage ne doit alors être appliqué, sous peine de laisser un
   vide sous la barre. Ne concerne que les utilisateurs connectés. */

@media screen and (min-width: 601px) and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}

	body.admin-bar .mobile-nav {
		top: calc(var(--header-height) + 46px);
	}
}

@media screen and (min-width: 783px) {
	body.admin-bar .site-header {
		top: 32px;
	}

	body.admin-bar .mobile-nav {
		top: calc(var(--header-height) + 32px);
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	min-height: var(--header-height);
}

/* Logo */
.atzer-logo,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	color: var(--atzer-white);
	flex-shrink: 0;
}

.atzer-logo__mark {
	display: inline-flex;
	width: 38px;
	height: 38px;
	color: var(--atzer-electric-blue);
}

.atzer-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.atzer-logo__name {
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--atzer-white);
}

.atzer-logo__sub {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	color: var(--atzer-electric-blue);
}

.custom-logo {
	max-height: 46px;
	width: auto;
}

/* Navigation principale */
.primary-nav {
	display: none;
}

.primary-nav ul {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	list-style: none;
}

.primary-nav li {
	position: relative;
}

.primary-nav a {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.6rem 0.85rem;
	border-radius: var(--radius);
	color: rgba(255, 255, 255, 0.86);
	font-size: var(--text-sm);
	font-weight: 550;
	text-decoration: none;
	white-space: nowrap;
}

.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a {
	background-color: rgba(255, 255, 255, 0.09);
	color: var(--atzer-white);
}

/* Sous-menus */
.primary-nav .sub-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	display: block;
	min-width: 250px;
	padding: var(--space-2);
	background-color: var(--atzer-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--transition), transform var(--transition),
		visibility var(--transition);
}

.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-nav .sub-menu a {
	color: var(--color-text);
	border-radius: var(--radius-sm);
	font-weight: 500;
	white-space: normal;
}

.primary-nav .sub-menu a:hover {
	background-color: var(--color-bg-alt);
	color: var(--atzer-deep-blue);
}

.primary-nav .menu-item-has-children > a::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: 0.15rem;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.75;
}

/* Actions d'en-tête */
.site-header__actions {
	display: none;
	align-items: center;
	gap: var(--space-3);
}

.header-phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--atzer-white);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.header-phone:hover {
	color: var(--atzer-electric-blue);
}

/* Bouton d'ouverture du menu mobile */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--radius);
	color: var(--atzer-white);
	cursor: pointer;
}

.nav-toggle:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.nav-toggle__close {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
	display: block;
}

/* ==========================================================================
   10. Navigation mobile
   ========================================================================== */

.mobile-nav {
	position: fixed;
	inset: var(--header-height) 0 0 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	padding: var(--space-5) var(--gutter) var(--space-8);
	background-color: var(--atzer-navy);
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--transition), transform var(--transition),
		visibility var(--transition);
}

.mobile-nav[data-open="true"] {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.mobile-nav ul {
	list-style: none;
}

.mobile-nav > ul > li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.mobile-nav a {
	display: block;
	padding: 0.95rem 0;
	color: var(--atzer-white);
	font-size: var(--text-lg);
	font-weight: 600;
	text-decoration: none;
}

.mobile-nav a:hover {
	color: var(--atzer-electric-blue);
}

.mobile-nav .sub-menu {
	padding-bottom: var(--space-3);
}

.mobile-nav .sub-menu a {
	padding: 0.55rem 0 0.55rem var(--space-4);
	color: var(--color-text-on-dark-muted);
	font-size: var(--text-sm);
	font-weight: 500;
	border-left: 2px solid rgba(255, 255, 255, 0.14);
}

.mobile-nav__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

body.nav-open {
	overflow: hidden;
}

/* ==========================================================================
   11. Fil d'Ariane
   ========================================================================== */

.breadcrumb {
	background-color: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--text-xs);
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	padding-block: var(--space-3);
	list-style: none;
}

.breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.breadcrumb__link {
	color: var(--color-text-muted);
	text-decoration: none;
}

.breadcrumb__link:hover {
	color: var(--atzer-deep-blue);
	text-decoration: underline;
}

.breadcrumb__sep {
	transform: rotate(-90deg);
	color: var(--atzer-slate-300);
}

.breadcrumb__current {
	color: var(--color-text);
	font-weight: 600;
}

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

.site-footer {
	position: relative;
	background: linear-gradient(150deg, #01234f 0%, #021024 55%, #023b52 100%);
	color: var(--color-text-on-dark-muted);
	font-size: var(--text-sm);
}

/* Filet dégradé en haut du pied de page. */
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--atzer-gradient);
}

.site-footer__top {
	display: grid;
	gap: var(--space-7);
	padding-block: var(--space-9) var(--space-8);
	grid-template-columns: 1fr;
}

.site-footer__brand {
	max-width: 34ch;
}

.site-footer__tagline {
	margin-top: var(--space-4);
	color: var(--color-text-on-dark-muted);
}

.site-footer__title {
	margin-bottom: var(--space-4);
	color: var(--atzer-white);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.site-footer ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.site-footer a {
	color: var(--color-text-on-dark-muted);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--atzer-electric-blue);
}

.footer-contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.footer-contact__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}

.footer-contact__item svg {
	margin-top: 3px;
	color: var(--atzer-electric-blue);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: var(--text-xs);
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	flex-direction: row;
}

.footer-social {
	display: flex;
	gap: var(--space-3);
	flex-direction: row;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-border-dark);
	border-radius: var(--radius);
}

.footer-social a:hover {
	border-color: var(--atzer-electric-blue);
	color: var(--atzer-electric-blue);
}

/* Bouton WhatsApp flottant : pastille compacte qui révèle son accroche au
   survol. Sur mobile, l'accroche reste masquée pour ne pas gêner. */
.whatsapp-float {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	height: 56px;
	padding: 0 16px;
	background-color: var(--atzer-energy-green);
	color: #16250a;
	border-radius: 100px;
	box-shadow: var(--shadow-lg);
	text-decoration: none;
	transition: transform var(--transition), background-color var(--transition),
		box-shadow var(--transition);
}

.whatsapp-float::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(139, 207, 32, 0.55);
	animation: whatsapp-halo 2.6s ease-out infinite;
	pointer-events: none;
}

@keyframes whatsapp-halo {
	0%   { box-shadow: 0 0 0 0 rgba(139, 207, 32, 0.5); }
	70%  { box-shadow: 0 0 0 14px rgba(139, 207, 32, 0); }
	100% { box-shadow: 0 0 0 0 rgba(139, 207, 32, 0); }
}

.whatsapp-float__texte {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-size: var(--text-sm);
	font-weight: 650;
	opacity: 0;
	transition: max-width 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
	background-color: var(--atzer-fresh-green);
	color: #16250a;
	transform: translateY(-2px);
}

.whatsapp-float:hover .whatsapp-float__texte,
.whatsapp-float:focus-visible .whatsapp-float__texte {
	max-width: 15rem;
	opacity: 1;
}

/* Pas de révélation au survol sur écran tactile : la pastille reste ronde. */
@media (hover: none) {
	.whatsapp-float {
		padding: 0;
		width: 56px;
		justify-content: center;
	}

	.whatsapp-float__texte {
		display: none;
	}
}

/* ==========================================================================
   13. Utilitaires
   ========================================================================== */

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

.text-muted {
	color: var(--color-text-muted);
}

.text-accent {
	color: var(--atzer-electric-blue);
}

.text-eco {
	color: var(--atzer-energy-green);
}

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }

.list-check {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.list-check li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}

.list-check svg {
	margin-top: 4px;
	color: var(--atzer-energy-green);
}

/* ==========================================================================
   13 bis. Apparition au défilement
   ========================================================================== */

/* Deux règles de sûreté cumulées :
   1. l'état masqué n'est appliqué QUE si JavaScript est actif (classe « js »
      posée par un script en ligne dans l'en-tête) ;
   2. l'animation ne s'active qu'à partir de 900 px de large. Sur mobile —
      d'où vient l'essentiel du trafic — le contenu est TOUJOURS visible,
      sans dépendre d'un observateur d'intersection. Une animation ne doit
      jamais pouvoir masquer du contenu sur le support principal. */

@media (min-width: 900px) {

.js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}

.js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Décalage en cascade pour les grilles de cartes. */
.js [data-reveal] .grid > *,
.js [data-reveal] .segments__list > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.js [data-reveal].is-visible .grid > *,
.js [data-reveal].is-visible .segments__list > * {
	opacity: 1;
	transform: none;
}

.js [data-reveal].is-visible .grid > *:nth-child(1),
.js [data-reveal].is-visible .segments__list > *:nth-child(1) { transition-delay: 40ms; }
.js [data-reveal].is-visible .grid > *:nth-child(2),
.js [data-reveal].is-visible .segments__list > *:nth-child(2) { transition-delay: 90ms; }
.js [data-reveal].is-visible .grid > *:nth-child(3),
.js [data-reveal].is-visible .segments__list > *:nth-child(3) { transition-delay: 140ms; }
.js [data-reveal].is-visible .grid > *:nth-child(4),
.js [data-reveal].is-visible .segments__list > *:nth-child(4) { transition-delay: 190ms; }
.js [data-reveal].is-visible .grid > *:nth-child(5),
.js [data-reveal].is-visible .segments__list > *:nth-child(5) { transition-delay: 240ms; }
.js [data-reveal].is-visible .grid > *:nth-child(n + 6),
.js [data-reveal].is-visible .segments__list > *:nth-child(n + 6) { transition-delay: 290ms; }

} /* fin @media (min-width: 900px) — animation d'apparition */

/* ==========================================================================
   14. Accessibilité
   ========================================================================== */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: var(--space-3) var(--space-5);
	background-color: var(--atzer-white);
	color: var(--atzer-navy);
	font-weight: 600;
}

.skip-link:focus {
	left: var(--space-4);
	top: var(--space-4);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 3px solid var(--atzer-electric-blue);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.site-header :focus-visible,
.site-footer :focus-visible,
.mobile-nav :focus-visible {
	outline-color: var(--atzer-electric-blue);
}

@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;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   15. Pages intérieures
   ========================================================================== */

.page-hero {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
	background-color: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
}

.page-hero__meta {
	margin-bottom: var(--space-3);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: 600;
}

.page-hero__title {
	font-size: var(--text-4xl);
	max-width: 24ch;
}

.page-hero__lead {
	max-width: 62ch;
	margin-top: var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--text-lg);
}

.page-hero__search {
	margin-top: var(--space-5);
	max-width: 480px;
}

.page-figure {
	margin-top: calc(-1 * var(--space-4));
	transform: translateY(var(--space-6));
}

.page-figure img {
	width: 100%;
	border-radius: var(--radius-lg);
}

/* Contenu rédigé dans l'éditeur. */
.prose {
	max-width: 72ch;
	font-size: var(--text-lg);
	color: var(--color-text-muted);
}

.prose > * + * {
	margin-top: var(--space-5);
}

.prose h2 {
	margin-top: var(--space-8);
	font-size: var(--text-3xl);
	color: var(--color-text);
}

.prose h3 {
	margin-top: var(--space-7);
	font-size: var(--text-2xl);
	color: var(--color-text);
}

.prose h4 {
	margin-top: var(--space-6);
	color: var(--color-text);
}

.prose ul,
.prose ol {
	padding-left: 1.35rem;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.prose li::marker {
	color: var(--atzer-electric-blue);
}

.prose img {
	border-radius: var(--radius);
}

.prose blockquote {
	padding: var(--space-5) var(--space-6);
	border-left: 3px solid var(--atzer-electric-blue);
	background-color: var(--color-bg-alt);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: var(--text-xl);
	color: var(--color-text);
}

.prose a {
	font-weight: 550;
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-base);
}

.prose th,
.prose td {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	text-align: left;
}

.prose th {
	background-color: var(--color-bg-alt);
	color: var(--color-text);
	font-weight: 650;
}

/* ==========================================================================
   16. Cartes de listing
   ========================================================================== */

.projet-card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color var(--transition), box-shadow var(--transition),
		transform var(--transition);
}

.projet-card:hover {
	border-color: var(--atzer-electric-blue);
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
}

.projet-card__media {
	display: block;
	aspect-ratio: 3 / 2;
	background-color: var(--atzer-navy);
	overflow: hidden;
}

.projet-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

.projet-card:hover .projet-card__img {
	transform: scale(1.03);
}

.projet-card__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: rgba(0, 191, 255, 0.5);
}

.projet-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex: 1;
	padding: var(--space-6);
}

.projet-card__type {
	color: var(--atzer-deep-blue);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.projet-card__title {
	font-size: var(--text-xl);
	font-weight: 650;
}

.projet-card__title a {
	color: inherit;
	text-decoration: none;
}

.projet-card__title a:hover {
	color: var(--atzer-deep-blue);
}

.projet-card__text {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
}

.projet-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	margin-top: auto;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	list-style: none;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.projet-card__meta li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.projet-card__meta svg {
	color: var(--atzer-electric-blue);
}

/* Détail d'une réalisation */
.projet-layout {
	display: grid;
	gap: var(--space-8);
}

.projet-specs {
	align-self: start;
	padding: var(--space-6);
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--atzer-electric-blue);
	border-radius: var(--radius-lg);
}

.projet-specs__title {
	margin-bottom: var(--space-4);
	font-size: var(--text-lg);
}

.projet-specs__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: 0;
}

.projet-specs__row dt {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.projet-specs__row dd {
	margin: 2px 0 0;
	font-size: var(--text-base);
	font-weight: 600;
}

/* ==========================================================================
   17. Pagination, états vides, navigation d'articles
   ========================================================================== */

.pagination {
	margin-top: var(--space-8);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding-inline: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
}

.pagination .page-numbers:hover {
	border-color: var(--atzer-electric-blue);
	color: var(--atzer-deep-blue);
}

.pagination .page-numbers.current {
	background-color: var(--atzer-navy);
	border-color: var(--atzer-navy);
	color: var(--atzer-white);
}

.empty-state {
	padding: var(--space-9) var(--space-5);
	background-color: var(--color-bg-alt);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-lg);
	text-align: center;
	color: var(--color-text-muted);
}

.post-nav {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.post-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--color-text);
}

.post-nav__link:hover {
	border-color: var(--atzer-electric-blue);
}

.post-nav__link--next {
	text-align: right;
}

.post-nav__label {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.post-nav__title {
	font-weight: 620;
}

/* ==========================================================================
   18. Recherche et page 404
   ========================================================================== */

.search-form {
	display: flex;
	gap: var(--space-2);
}

.search-form__input {
	flex: 1;
}

.search-form__submit {
	flex-shrink: 0;
	padding-inline: var(--space-5);
}

.error-404__code {
	display: block;
	font-size: clamp(4.5rem, 14vw, 8rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--tracking-tight);
	background: var(--atzer-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.error-404__title {
	margin-top: var(--space-4);
	font-size: var(--text-3xl);
}

.error-404__text {
	max-width: 52ch;
	margin: var(--space-4) auto 0;
	color: var(--color-text-muted);
}

.error-404__actions {
	justify-content: center;
	margin-top: var(--space-7);
}

.error-404__search {
	max-width: 460px;
	margin: var(--space-8) auto 0;
}

/* ==========================================================================
   19. Bande d'appel à l'action
   ========================================================================== */

.bande-cta__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	align-items: flex-start;
}

.bande-cta__title {
	font-size: var(--text-3xl);
	max-width: 20ch;
}

.bande-cta__text {
	margin-top: var(--space-3);
	max-width: 56ch;
	color: var(--color-text-on-dark-muted);
}

/* ==========================================================================
   19 bis. Emplacements photo
   ==========================================================================
   Tant qu'aucune photo n'est fournie, un cadre neutre occupe la place. Il
   indique explicitement ce qui est attendu plutôt que d'afficher une image
   de banque sans rapport avec les installations réelles. */

.media-slot {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: var(--slot-ratio, 4 / 3);
	background-color: var(--color-bg-alt);
}

.media-slot__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.media-slot__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	width: 100%;
	height: 100%;
	padding: var(--space-5);
	text-align: center;
	background:
		linear-gradient(140deg, rgba(0, 191, 255, 0.07) 0%, rgba(139, 207, 32, 0.06) 100%),
		var(--color-bg-alt);
	border: 1px dashed var(--color-border-strong);
	border-radius: 14px;
	color: var(--atzer-slate-500);
}

.media-slot__icon {
	display: inline-flex;
	color: var(--atzer-deep-blue);
	opacity: 0.55;
}

.media-slot__label {
	font-size: var(--text-xs);
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ==========================================================================
   20. Affinage mobile
   ==========================================================================
   Le mobile n'est pas une version compressée du bureau : les boutons
   passent pleine largeur, les zones tactiles sont garanties à 48 px, et
   le bouton WhatsApp flottant ne recouvre jamais le contenu du pied de
   page. */

@media (max-width: 559px) {
	/* Un bouton par ligne : plus lisible et plus facile à viser au pouce
	   que deux boutons serrés côte à côte. */
	.btn-group .btn {
		width: 100%;
	}

	.btn {
		padding-inline: 1.1rem;
	}

	/* Titres : on réduit le plancher pour éviter les coupures de mots
	   sur les écrans de 320 px. */
	h1 {
		font-size: clamp(2rem, 8vw, 2.5rem);
	}

	.page-hero__title {
		font-size: clamp(1.75rem, 7vw, 2.25rem);
	}

	.card,
	.process__step {
		padding: var(--space-5);
	}

	.process__step {
		gap: var(--space-4);
	}

	/* Le pied de page laisse la place au bouton WhatsApp flottant. */
	.site-footer__bottom {
		padding-bottom: calc(var(--space-5) + 66px);
	}

	.breadcrumb__list {
		font-size: 0.75rem;
	}
}

/* Zones tactiles : minimum recommandé de 48 px sur les liens de
   navigation et du pied de page, sans modifier le rendu bureau. */
@media (hover: none) and (pointer: coarse) {
	.site-footer ul a,
	.site-footer__legal a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.mobile-nav a {
		min-height: 48px;
	}
}

/* ==========================================================================
   Points de rupture
   ========================================================================== */

@media (min-width: 600px) {
	.post-nav {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 860px) {
	.projet-layout {
		grid-template-columns: 1.7fr 1fr;
		gap: var(--space-9);
	}

	.bande-cta__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-8);
	}
}

@media (min-width: 600px) {
	.site-footer__top {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.primary-nav {
		display: block;
	}

	.site-header__actions {
		display: flex;
	}

	.nav-toggle,
	.mobile-nav {
		display: none;
	}

	.site-footer__top {
		grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
	}
}