/**
 * Cyril-Elec — styles des sections ACF Flexible Content (page d'accueil).
 *
 * Un bloc par layout (T6-T15 en ajoutent un par tâche), commenté, dans
 * l'ordre d'implémentation — pas forcément l'ordre d'affichage réel sur la
 * page (cf. docs/reference/content/sections.md pour l'ordre final). Tokens
 * uniquement (var(--color-*), var(--fs-*)…), définis dans assets/css/main.css
 * (:root) — aucune couleur ni taille en dur ici.
 *
 * Convention de nommage (BEM) reprise pour chaque nouveau layout :
 * - Racine   : <section class="section section--{layout}"> (`.section`
 *   = rythme vertical commun, défini dans main.css ; `.section--{layout}`
 *   = habillage propre à ce layout, défini ici).
 * - Éléments : `.{layout-court}__truc` (ex. `.hero__title`, `.hero__media`).
 *
 * @package cyril-elec
 */

/* === HERO === */

.section--hero {
	background-color: var(--color-white);
}

.hero__container {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

.hero__title {
	margin-bottom: 0.5em;
}

.hero__subtitle {
	max-width: 40em;
	font-size: 1.125rem;
	color: var(--color-navy);
}

.hero__bullets {
	display: grid;
	gap: 0.6rem;
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
}

.hero__bullets li {
	position: relative;
	padding-left: 1.5em;
}

.hero__bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.6em;
	height: 0.6em;
	background-color: var(--color-primary);
	border-radius: 50%;
}

.hero__cta {
	margin-top: 0.5rem;
}

.hero__image {
	width: 100%;
	border-radius: var(--radius);
}

/* Empile le visuel au-dessus du texte sous le breakpoint custom Avada (895px,
   déjà repris pour le burger du header, cf. main.css .site-header__toggle). */
@media (max-width: 894px) {
	.hero__container {
		grid-template-columns: 1fr;
	}

	.hero__media {
		order: -1;
	}
}

/* === NOS BORNES === */

.section--nos-bornes {
	/* color2 Avada : fond de sections alternés (cf. docs/reference/tokens/tokens.md) */
	background-color: var(--color-grey-50);
	text-align: center;
}

.nos-bornes__container {
	display: grid;
	gap: 1.5rem;
	justify-items: center;
}

.nos-bornes__title {
	margin-bottom: 0;
}

.nos-bornes__intro {
	max-width: 55em;
	font-size: 1.0625rem;
}

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

.nos-bornes__media {
	width: 100%;
	max-width: 900px;
}

.nos-bornes__image {
	width: 100%;
	border-radius: var(--radius);
}

/* === NIVEAUX DE QUALIFICATION === */

.section--niveaux-qualification {
	background-color: var(--color-white);
}

.niveaux__container {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.5rem);
}

.niveaux__title {
	margin: 0;
	text-align: center;
}

.niveaux__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(1rem, 3vw, 1.5rem);
}

/* Carte cyan iso du live (colonnes --awb-bg-color:var(--awb-color5), cf.
   docs/reference/tokens/tokens.md) : icône/texte clairs sur fond de marque,
   même traitement visuel que .avantages__item plus bas. */
.niveaux__item {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	padding: clamp(1.5rem, 3vw, 2rem) 1.25rem;
	background-color: var(--color-primary);
	border-radius: var(--radius);
	text-align: center;
	/* `position` + `z-index` : la carte agrandie au survol doit passer au-dessus
	   de ses voisines, sinon leurs bords la rognent. L'ombre est reprise plus
	   bas dans le bloc de la section sombre (cf. « Sections sombres »). */
	position: relative;
	z-index: 0;
	transition: transform var(--transition), box-shadow var(--transition);
}

.niveaux__code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 0.25rem;
	background-color: var(--color-white);
	color: var(--color-primary);
	font-size: 1.25rem;
	font-weight: 700;
	border-radius: 50%;
}

.niveaux__item-title {
	margin: 0;
	color: var(--color-white);
	font-size: 1.0625rem;
}

.niveaux__item-text {
	margin: 0;
	color: var(--color-white);
	font-size: 0.9375rem;
}

/* === PRISE RENFORCÉE OU BORNE DE RECHARGE (choix_borne) === */

/* Iso du live : fond de ligne Fusion (data-bg = tech-why-bg2-1.png) posé en
   background-image CSS, avec un fond clair de repli tant que l'image ne
   couvre pas toute la section (cf. .nos-bornes, même color2 alterné). */
.section--choix-borne {
	background-color: var(--color-grey-50);
}

/* Bandeau bleu marine pleine largeur avec le titre en blanc et un bord bas en
   diagonale (iso live). Le titre vit DANS cette barre, pas dans le contenu. */
.choix-borne__banner {
	background-color: var(--color-navy);
	padding: clamp(1.5rem, 4vw, 2.75rem) 1rem clamp(2.25rem, 5vw, 3.5rem);
	/* Diagonale : le bord bas descend de la gauche vers la droite. */
	clip-path: polygon(0 0, 100% 0, 100% 55%, 0 100%);
}

.choix-borne__title {
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	color: var(--color-white);
}

/* Zone de contenu sous la barre : fond clair + éventuelle image de ligne Fusion
   (data-bg = tech-why-bg2-1.png sur le live) en fond. */
.choix-borne__body {
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.choix-borne__blocs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
}

.choix-borne__bloc-title {
	margin-bottom: 0.5em;
}

.choix-borne__bloc-text p {
	margin: 0 0 1em;
}

.choix-borne__bloc-text p:last-child {
	margin-bottom: 0;
}

/* Bloc avec image (ex. "La Prise Renforcée" / Green'Up) : texte à gauche,
   image à droite, iso live. Mirror du breakpoint custom Avada 894px utilisé
   par .carte-borne__container. */
.choix-borne__bloc--has-image {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.choix-borne__bloc-text-col {
	text-align: left;
}

.choix-borne__bloc-image {
	width: 100%;
	border-radius: var(--radius);
}

@media (max-width: 894px) {
	.choix-borne__bloc--has-image {
		grid-template-columns: 1fr;
	}
}

/* === CARTE BORNE (carte_borne, réutilisé x3) === */

.section--carte-borne {
	background-color: var(--color-grey-50);
}

.carte-borne__container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

/* `inversion` (ACF true_false) : bascule l'ordre visuel image/texte, alternance
   relevée sur le live (non-communicante image-texte, communicante texte-image,
   superchargeur image-texte). */
.section--carte-borne-inverse .carte-borne__container {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.section--carte-borne-inverse .carte-borne__media {
	order: 2;
}

.carte-borne__image {
	width: 100%;
	border-radius: var(--radius);
}

/* === COMPARATEUR AVANT / APRÈS (carte borne, ex. coloris noir↔blanc) ===
   L'image de base (coloris principal) est en dessous, entièrement visible.
   L'image du dessus (2e coloris) recouvre exactement la même boîte et n'est
   révélée qu'à gauche de la poignée via clip-path — aucune déformation, les
   deux photos gardent leurs proportions. Position pilotée par --compare-pos
   (0–100 %), mise à jour par le champ range (souris/tactile/clavier) et
   assets/js/compare.js. */

/* Typage de --compare-pos pour pouvoir l'animer en douceur (mouvement d'amorce
   au chargement). Sans support @property (vieux Safari), l'animation devient un
   simple saut — dégradation gracieuse, le reste fonctionne. */
@property --compare-pos {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 50%;
}

.compare {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	-webkit-user-select: none;
	user-select: none;
}

/* Mouvement d'amorce : au chargement, la poignée fait un léger va-et-vient pour
   signaler qu'on peut glisser. JS retire .is-hinting à la 1re interaction. */
.compare.is-hinting {
	animation: cyril-compare-hint 2.4s ease-in-out 0.6s 1;
}

@keyframes cyril-compare-hint {
	0% {
		--compare-pos: 50%;
	}
	22% {
		--compare-pos: 66%;
	}
	58% {
		--compare-pos: 36%;
	}
	100% {
		--compare-pos: 50%;
	}
}

/* Label « Glisser » : visible au repos, s'efface dès la 1re interaction. */
.compare__hint {
	position: absolute;
	left: 50%;
	bottom: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transform: translateX(-50%);
	padding: 5px 12px;
	border-radius: 999px;
	background-color: rgba(15, 39, 51, 0.74);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.compare.is-interacted .compare__hint {
	opacity: 0;
	transform: translateX(-50%) translateY(6px);
}

@media (prefers-reduced-motion: reduce) {
	.compare.is-hinting {
		animation: none;
	}
}

.compare__img {
	border-radius: 0; /* les coins arrondis sont portés par .compare (overflow hidden). */
}

.compare__img--base {
	position: relative;
	display: block;
	z-index: 1;
}

.compare__img--top {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 2;
	/* Ne montre que la portion gauche (0 → --compare-pos). */
	clip-path: inset(0 calc(100% - var(--compare-pos, 50%)) 0 0);
}

.compare__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--compare-pos, 50%);
	z-index: 3;
	width: 2px;
	transform: translateX(-50%);
	background-color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
	pointer-events: none;
}

.compare__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	/* Cyan de marque. Passée en orange le 7 août 2026 puis remise en bleu le
	   jour même, à la demande du client. Token `--color-primary`, donc
	   modifiable depuis « Couleurs du site ». */
	background-color: var(--color-primary, #0ab3d1);
	color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

/* Champ range invisible qui couvre toute la zone : gère le glissé (souris +
   tactile) et l'accessibilité clavier (flèches).

   `touch-action: pan-y` et SURTOUT PAS `none` (valeur d'origine, corrigée le
   7 août 2026) : ce champ recouvre tout le comparateur, qui occupe presque
   tout l'écran d'un téléphone. Avec `none`, le navigateur ne traitait plus
   AUCUN geste tactile sur cette zone — un balayage vertical ne faisait donc
   plus défiler la page, et le visiteur restait bloqué sur le bloc, incapable
   d'aller plus loin (constaté sur iPhone, Safari comme Chrome).

   `pan-y` rend le défilement vertical au navigateur tout en laissant le
   glissé horizontal au curseur : le geste utile de chacun est préservé, et
   c'est le navigateur qui arbitre selon la direction du doigt. */
.compare__range {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: ew-resize;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	touch-action: pan-y;
}

.compare:focus-within .compare__handle {
	outline: 3px solid var(--color-primary, #0ab3d1);
	outline-offset: 3px;
}

.carte-borne__title {
	margin-bottom: 0.5em;
}

.carte-borne__descriptif p {
	margin: 0 0 1em;
}

.carte-borne__points {
	display: grid;
	gap: 0.6rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.carte-borne__points li {
	position: relative;
	padding-left: 1.5em;
}

.carte-borne__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.6em;
	height: 0.6em;
	background-color: var(--color-primary);
	border-radius: 50%;
}

/* Empile le visuel et le texte en une colonne sous le breakpoint custom Avada
   (895px). En mobile on veut TOUJOURS le TEXTE d'abord puis la photo en dessous,
   pour toutes les cartes borne (l'ordre `inversion` alterne image/texte, mais
   seulement en desktop). */
@media (max-width: 894px) {
	.carte-borne__container,
	.section--carte-borne-inverse .carte-borne__container {
		grid-template-columns: 1fr;
	}

	.carte-borne__media,
	.section--carte-borne-inverse .carte-borne__media {
		order: 2;
	}
}

/* === AVANTAGES (4 colonnes) === */

.section--avantages {
	background-color: var(--color-white);
}

/* Bandeau bleu marine pleine largeur en tête de section, bord bas en
   diagonale (iso technique .choix-borne__banner) : marine pleine hauteur à
   gauche, qui remonte en diagonale vers la droite. Purement décoratif
   (aria-hidden), les cartes s'enchaînent dessous en flux normal. */
.avantages__band {
	width: 100%;
	height: clamp(90px, 12vw, 160px);
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
	background-color: var(--color-navy);
	clip-path: polygon(0 0, 100% 0, 100% 45%, 0 100%);
}

.avantages__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(1rem, 3vw, 1.5rem);
}

/* Même traitement visuel que .niveaux__item (carte cyan iso live, colonnes
   --awb-bg-color:var(--awb-color5)). */
.avantages__item {
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	padding: clamp(1.5rem, 3vw, 2rem) 1.25rem;
	background-color: var(--color-primary);
	border-radius: var(--radius);
	text-align: center;
}

/* Icône blanche en cercle (iso live) au-dessus du titre. */
.avantages__icon {
	width: clamp(52px, 7vw, 68px);
	height: clamp(52px, 7vw, 68px);
	margin: 0 auto 1rem;
	display: grid;
	place-items: center;
	background: var(--color-white);
	border-radius: 50%;
	color: var(--color-primary);
}

.avantages__icon svg {
	width: 52%;
	height: 52%;
}

.avantages__item-title {
	margin: 0;
	color: var(--color-white);
}

.avantages__item-text {
	margin: 0;
	color: var(--color-white);
	font-size: 0.9375rem;
}

/* === CTA RACCOURCI (réutilisé x3) === */

.section--cta-raccourci {
	background-color: var(--color-navy);
	color: var(--color-white);
	text-align: center;
}

.cta-raccourci__container {
	display: grid;
	justify-items: center;
	gap: 1.25rem;
}

.cta-raccourci__text {
	margin: 0;
	max-width: 45em;
	font-size: 1.125rem;
	color: var(--color-white);
}

/* Instance sans contenu visible (ex. "Installation raccourci") : ancre seule,
   aucune hauteur/fond ajoutés — iso du live (cf. cta_raccourci.php). */
.cta-raccourci__anchor-only {
	height: 0;
}

/* === PROCESSUS D'INSTALLATION === */

/* Iso du live : fond bleu tech (data-bg = abstract-blue-fractal-wave…jpg sur
   fond color5) approximé ici par un dégradé à base de tokens (pas d'image de
   fond dans le schéma ACF de ce layout, cf. rapport de tâche). */
/* Fond animé "aurore" façon Freshmile : de grandes nappes de couleur (teal /
   bleu / indigo) dérivent et se recomposent lentement sur une base sombre.
   CSS pur, décoratif, deux couches (::before + ::after) aux timings décalés
   pour l'effet de morphing. Contenu au-dessus (z-index), pause si
   prefers-reduced-motion. */
.section--processus-installation {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Base sombre teal → navy → indigo (dégradé fixe sous les nappes animées). */
	background-color: var(--section-dark-bg);
	background-image: linear-gradient(135deg, var(--section-dark-1) 0%, var(--section-dark-2) 55%, var(--section-dark-3) 100%);
	color: var(--color-white);
}

.section--processus-installation::before,
.section--processus-installation::after {
	content: "";
	position: absolute;
	inset: -25%;
	z-index: 0;
	pointer-events: none;
	will-change: transform;
}

.section--processus-installation::before {
	background:
		radial-gradient(38% 46% at 18% 28%, var(--aurora-1), transparent 72%),
		radial-gradient(42% 52% at 82% 78%, var(--aurora-2), transparent 72%);
	animation: cyril-proc-aurora-a 5s ease-in-out infinite alternate;
}

.section--processus-installation::after {
	background:
		radial-gradient(44% 50% at 72% 18%, var(--aurora-3), transparent 72%),
		radial-gradient(40% 50% at 28% 82%, var(--aurora-4), transparent 72%);
	animation: cyril-proc-aurora-b 7s ease-in-out infinite alternate;
}

@keyframes cyril-proc-aurora-a {
	from {
		transform: translate3d(-9%, -7%, 0) scale(1) rotate(0deg);
	}
	to {
		transform: translate3d(11%, 9%, 0) scale(1.25) rotate(14deg);
	}
}

@keyframes cyril-proc-aurora-b {
	from {
		transform: translate3d(10%, 7%, 0) scale(1.2) rotate(0deg);
	}
	to {
		transform: translate3d(-11%, -9%, 0) scale(1) rotate(-16deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.section--processus-installation::before,
	.section--processus-installation::after {
		animation: none;
	}
}

.processus__container {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 1.5rem;
	text-align: center;
}

.processus__title {
	margin: 0;
	color: var(--color-white);
}

.processus__intro {
	max-width: 50em;
	color: var(--color-white);
}

.processus__intro p {
	margin: 0 0 0.75em;
}

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

.processus__etapes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: clamp(1.5rem, 4vw, 2.5rem);
	width: 100%;
	margin-top: 1rem;
}

.processus__etape {
	display: grid;
	justify-items: center;
	gap: 0.4rem;
}

.processus__etape-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	background-color: var(--color-white);
	color: var(--color-navy);
	font-weight: 700;
	border-radius: 50%;
}

.processus__etape-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	background-color: var(--color-primary);
	color: var(--color-white);
	border-radius: 50%;
	margin-bottom: 0.4rem;
}

.processus__etape-icon svg {
	width: 2.25rem;
	height: 2.25rem;
}

.processus__etape-title {
	margin: 0;
	color: var(--color-white);
}

.processus__etape-text {
	margin: 0;
	color: var(--color-white);
	font-size: 0.9375rem;
}

/* === PRIMES ET FISCALITÉ === */

.section--primes-fiscalite {
	background-color: var(--color-white);
}

.primes-fiscalite__container {
	position: relative;
	z-index: 1;
	max-width: 68em;
	margin-inline: auto;
}

.primes-fiscalite__title {
	margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
}

.primes-fiscalite__grid {
	display: grid;
	gap: clamp(1.25rem, 3vw, 1.75rem);
}

@media (min-width: 900px) {
	.primes-fiscalite__grid {
		grid-template-columns: 1.15fr 0.85fr;
		align-items: start;
	}
}

/* Cartes lisibles : texte aligné à gauche, interligne aéré, accent latéral. */
.primes-fiscalite__card {
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	background-color: var(--color-white);
	border: 1px solid var(--color-grey-200);
	border-radius: var(--radius);
	box-shadow: 0 6px 22px rgba(0, 62, 112, 0.06);
	text-align: left;
}

.primes-fiscalite__card--credit {
	border-left: 4px solid var(--color-primary);
}

.primes-fiscalite__card-title {
	margin: 0 0 1.25rem;
	color: var(--color-primary);
	font-size: 1.2rem;
	line-height: 1.35;
}

.primes-fiscalite__text p {
	margin: 0 0 1em;
	line-height: 1.7;
	color: var(--color-navy);
}

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

.primes-fiscalite__text strong {
	color: var(--color-primary);
}

.primes-fiscalite__text a,
.primes-fiscalite__text h4 {
	display: inline-block;
	margin-top: 0.75em;
	color: var(--color-navy);
	font-weight: 700;
}

/* Panneau Advenir mis en valeur : fond clair, accent vert Advenir, logo en tête. */
.primes-fiscalite__advenir {
	background-color: rgba(10, 179, 209, 0.06);
	border: 1px solid rgba(10, 179, 209, 0.25);
	border-left: 4px solid #8ec63f; /* vert Advenir */
}

.primes-fiscalite__advenir-logo {
	margin-bottom: 1.25rem;
}

.primes-fiscalite__advenir-logo img {
	width: auto;
	max-width: 220px;
	height: auto;
}

.primes-fiscalite__advenir-titre {
	margin: 0 0 0.85rem;
	color: var(--color-navy);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.35;
}

.primes-fiscalite__advenir-texte p {
	margin: 0 0 1em;
	line-height: 1.7;
	color: var(--color-navy);
}

.primes-fiscalite__advenir-texte p:last-child {
	margin-bottom: 0;
}

/* === TABLEAU PRIME ADVENIR === */

.section--tableau-advenir {
	background-color: var(--color-primary);
	color: var(--color-white);
	text-align: center;
}

.tableau-advenir__title,
.tableau-advenir__subtitle {
	color: var(--color-white);
}

.tableau-advenir__subtitle {
	max-width: 45em;
	margin-inline: auto;
	font-size: 1.0625rem;
}

.tableau-advenir__scroll {
	margin-top: 1.75rem;
	overflow-x: auto;
	/* Laisse respirer l'ombre portée de la carte (sinon rognée par overflow). */
	padding-block: 8px;
}

.tableau-advenir__table {
	width: 100%;
	max-width: 900px;
	margin-inline: auto;
	background-color: var(--color-white);
	border-collapse: collapse;
	border-radius: 14px;
	overflow: hidden;
	text-align: left;
	box-shadow: 0 22px 45px -26px var(--overlay-dark);
}

/* En-tête : dégradé de marque (navy -> header), suit les couleurs d'admin. */
.tableau-advenir__table thead th {
	padding: 1.05rem 1.25rem;
	background-image: linear-gradient(135deg, var(--color-navy), var(--color-header));
	color: var(--color-white);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tableau-advenir__table td {
	padding: 0.95rem 1.25rem;
	color: var(--color-navy);
	border-bottom: 1px solid var(--color-grey-200);
	vertical-align: middle;
}

.tableau-advenir__table tbody tr {
	transition: background-color var(--transition);
}

/* Zébrage + survol : teintes dérivées du cyan de marque via color-mix (donc
   synchronisées avec l'écran « Couleurs du site »). Repli sur un gris neutre
   pour les navigateurs sans color-mix. */
.tableau-advenir__table tbody tr:nth-child(even) {
	background-color: var(--color-grey-50);
	background-color: color-mix(in srgb, var(--color-primary) 6%, var(--color-white));
}

.tableau-advenir__table tbody tr:hover {
	background-color: var(--color-grey-200);
	background-color: color-mix(in srgb, var(--color-primary) 14%, var(--color-white));
}

.tableau-advenir__table tbody tr:last-child td {
	border-bottom: 0;
}

.tableau-advenir__type {
	font-weight: 600;
}

.tableau-advenir__cell-montant {
	white-space: nowrap;
}

/* Montant en pastille ambre (accent de marque) pour le faire ressortir. */
.tableau-advenir__montant {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	font-weight: 700;
	color: var(--color-accent-strong);
	background-color: var(--color-grey-50);
	background-color: color-mix(in srgb, var(--color-accent) 15%, var(--color-white));
}

/* === COMPTEURS (cercles %) === */

.section--compteurs {
	position: relative;
	background-color: var(--color-navy);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: var(--color-white);
}

.section--compteurs::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--overlay-dark);
}

.section--compteurs .container {
	position: relative;
}

.compteurs__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: clamp(1.5rem, 4vw, 2.5rem);
	justify-items: center;
	text-align: center;
}

/* Rend la variable --pct animable (sinon une transition CSS ne peut pas
   l'interpoler). Navigateurs sans @property : le remplissage sautera à sa
   valeur finale au scroll au lieu de s'animer — dégradation acceptable. */
@property --pct {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

.compteurs__circle {
	--pct: 0;
	--compteurs-fill: #22c55e; /* anneau vert (demande client, au lieu du cyan) */
	display: grid;
	place-items: center;
	width: 160px;
	height: 160px;
	margin-bottom: 0.75rem;
	background: conic-gradient(var(--compteurs-fill) calc(var(--pct) * 1%), rgba(255, 255, 255, 0.18) 0);
	border-radius: 50%;
	transition: --pct 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Au passage dans le viewport (classe posée par assets/js/compteurs.js), chaque
   cercle se remplit jusqu'à sa cible --pct-target (posée en inline par le PHP). */
.compteurs__items.is-visible .compteurs__circle {
	--pct: var(--pct-target, 0);
}

@media (prefers-reduced-motion: reduce) {
	.compteurs__circle {
		--pct: var(--pct-target, 0);
		transition: none;
	}
}

.compteurs__circle-value {
	display: grid;
	place-items: center;
	width: 128px;
	height: 128px;
	background-color: var(--color-navy);
	color: var(--color-white);
	font-size: 1.375rem;
	font-weight: 700;
	border-radius: 50%;
}

.compteurs__label {
	margin: 0;
	color: var(--color-white);
	letter-spacing: 0.02em;
}

/* === PROPRIÉTAIRE DE BORNE (FRESHMILE) === */

.section--freshmile {
	background-color: var(--color-grey-50);
}

/* Variante avec image de fond (champ ACF "Image de fond"). */
.section--freshmile--has-bg {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--color-white);
}

.section--freshmile--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to bottom, rgba(2, 20, 33, 0.55) 0%, rgba(2, 20, 33, 0.38) 45%, rgba(2, 20, 33, 0.3) 100% );
	pointer-events: none;
}

.section--freshmile--has-bg > .freshmile__container {
	position: relative;
	z-index: 1;
}

.section--freshmile--has-bg .freshmile__title,
.section--freshmile--has-bg .freshmile__intro,
.section--freshmile--has-bg .freshmile__outro {
	color: var(--color-white);
}

/* Cartes en verre dépoli (glassmorphism) sur la photo de fond : translucide,
   texte blanc, flou d'arrière-plan. Plus premium que le carton blanc plein. */
.section--freshmile--has-bg .freshmile__bloc {
	color: var(--color-white);
	background-color: rgba(6, 24, 39, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-left: 4px solid var(--color-primary); /* même liseré cyan à gauche que le bloc outro du bas. */
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.freshmile__container {
	display: grid;
	gap: 1.5rem;
	max-width: 60em;
	margin-inline: auto;
	text-align: center;
}

.freshmile__title {
	margin: 0;
}

.freshmile__intro p {
	margin: 0 0 1em;
}

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

.freshmile__media {
	justify-self: center;
	width: 100%;
	max-width: 700px;
}

.freshmile__image {
	width: 100%;
	border-radius: var(--radius);
}

.freshmile__blocs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(1.5rem, 4vw, 2.5rem);
	margin-top: 1rem;
	text-align: left;
}

.freshmile__bloc {
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	background-color: var(--color-white);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	transition: transform var(--transition), box-shadow var(--transition);
}

.freshmile__bloc:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

/* Icône d'en-tête dans une pastille cyan. */
.freshmile__bloc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 1rem;
	color: var(--color-white);
	background: linear-gradient(135deg, var(--color-primary), #0284a3);
	border-radius: 50%;
	box-shadow: 0 6px 16px rgba(10, 179, 209, 0.4);
}

.freshmile__bloc-icon svg {
	width: 1.6rem;
	height: 1.6rem;
}

.freshmile__bloc-title {
	margin-top: 0;
	margin-bottom: 1.1rem;
	text-align: left;
	font-size: 1.15rem;
	line-height: 1.35;
}

.freshmile__bloc-items {
	display: grid;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.freshmile__bloc-items li {
	position: relative;
	padding-left: 2em;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* Puce = coche cyan dans un rond clair. */
.freshmile__bloc-items li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
	background-color: rgba(10, 179, 209, 0.15);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ab3d1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.85em 0.85em;
}

/* Sur fond photo (glass), la pastille des puces s'éclaircit pour le contraste. */
.section--freshmile--has-bg .freshmile__bloc-items li::before {
	background-color: rgba(10, 179, 209, 0.3);
}

.freshmile__outro p {
	margin: 0 0 0.75em;
}

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

/* Sur fond photo : le texte de clôture devient un panneau "verre dépoli"
   assorti aux cartes (translucide, flou, accent cyan), texte aligné et aéré. */
.section--freshmile--has-bg .freshmile__outro {
	max-width: 60em;
	margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
	padding: clamp(1.5rem, 3.5vw, 2.25rem);
	text-align: left;
	background-color: rgba(6, 24, 39, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-left: 4px solid var(--color-primary);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.section--freshmile--has-bg .freshmile__outro p {
	margin: 0 0 1em;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92);
}

.section--freshmile--has-bg .freshmile__outro p:last-child {
	margin-bottom: 0;
}

.section--freshmile--has-bg .freshmile__outro strong {
	color: var(--color-primary);
}

/* === AVIS GOOGLE === */

.section--avis-google {
	background-color: var(--color-white);
	text-align: center;
}

.avis-google__container {
	display: grid;
	justify-items: center;
	gap: 0.75rem;
}

/* Bloc avis élargi au-delà de la largeur standard (1200px) pour laisser
   respirer le widget Trustindex et afficher 4 avis d'un coup. Titre/texte
   restent centrés (justify-items: center + max-width propres). */
.section--avis-google .avis-google__container {
	max-width: min(1520px, 94vw);
}

.avis-google__title {
	margin: 0;
}

.avis-google__text {
	margin: 0;
	max-width: 40em;
}

.avis-google__embed {
	width: 100%;
	margin-top: 1rem;
}

.avis-google__placeholder {
	width: 100%;
	max-width: 40em;
	margin-top: 1rem;
	padding: 1.5rem;
	background-color: var(--color-grey-50);
	color: var(--color-grey-600);
	font-size: 0.9375rem;
	border: 1px dashed var(--color-grey-400);
	border-radius: var(--radius);
}

.avis-google__placeholder p {
	margin: 0;
}

/* === FORMULAIRE DE CONTACT === */

.section--formulaire {
	position: relative;
	background-color: var(--color-navy);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: var(--color-white);
}

.section--formulaire::before {
	content: "";
	position: absolute;
	inset: 0;
	/* Voile navy piloté par --form-overlay (réglable en admin, 0–1 ; défaut 0.45).
	   Léger dégradé : bords un peu plus sombres, centre plus transparent pour
	   laisser respirer les traits lumineux de la texture de fond. */
	background:
		linear-gradient(
			180deg,
			rgba(15, 39, 51, min(1, calc(var(--form-overlay, 0.45) + 0.12))) 0%,
			rgba(15, 39, 51, var(--form-overlay, 0.45)) 45%,
			rgba(15, 39, 51, min(1, calc(var(--form-overlay, 0.45) + 0.16))) 100%
		);
}

.section--formulaire .container {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 1rem;
	text-align: center;
}

.formulaire__title,
.formulaire__text {
	margin: 0;
	color: var(--color-white);
}

.formulaire__placeholder {
	width: 100%;
	max-width: 640px;
	margin-top: 1rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background-color: var(--color-white);
	border-radius: var(--radius);
	text-align: left;
}

/* Vrai formulaire WPForms : large, 2 colonnes, champs sombres, bouton cyan
   pleine largeur. Posé dans un panneau navy semi-opaque + bordure + ombre pour
   le détacher nettement de la photo de fond (sinon les champs translucides se
   fondent dans l'image). La teinte dérive de --color-navy (suit l'admin), avec
   repli.
   PAS de backdrop-filter ici : sur iOS Safari il provoquait un « flou figé »
   (instantané de la photo bloqué à l'écran) après l'envoi du formulaire, quand
   WPForms remplace le formulaire par la confirmation. Le panneau est donc plus
   opaque (88 %) pour rester lisible sans le flou. */
.formulaire__form {
	width: 100%;
	max-width: 1080px;
	margin-top: 1.5rem;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	text-align: left;
	background-color: rgba(4, 26, 43, 0.88); /* repli si color-mix non supporté */
	background-color: color-mix(in srgb, var(--color-navy) 88%, transparent);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.55);
}

.formulaire__placeholder-row {
	height: 2.75rem;
	margin-bottom: 1rem;
	background-color: var(--color-grey-200);
	border-radius: var(--radius);
}

.formulaire__placeholder-row--textarea {
	height: 6rem;
}

.formulaire__placeholder-btn {
	width: 140px;
	height: 2.75rem;
	background-color: var(--color-primary);
	border-radius: var(--radius);
}

.formulaire__placeholder-note {
	margin: 1rem 0 0;
	color: var(--color-grey-600);
	font-size: 0.8125rem;
}

/* --- Rendu WPForms dans la section formulaire (iso live) --- */
.section--formulaire .wpforms-container {
	margin: 0;
	color: var(--color-white);
}

.section--formulaire .wpforms-form .wpforms-field-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 1.75rem;
}

.section--formulaire .wpforms-form .wpforms-field {
	flex: 1 1 100%;
	float: none !important;
	clear: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.section--formulaire .wpforms-form .wpforms-field.wpforms-one-half {
	flex: 1 1 calc(50% - 0.9rem);
}

/* Choix Particulier / Professionnel (radio) sur le fond sombre. */
.section--formulaire .wpforms-field-radio .wpforms-field-label {
	margin-bottom: 0.6rem;
}

.section--formulaire .wpforms-field-radio ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.section--formulaire .wpforms-field-radio li label,
.section--formulaire .wpforms-field-radio .wpforms-field-label-inline {
	color: var(--color-white) !important;
	font-weight: 500 !important;
	cursor: pointer;
}

.section--formulaire .wpforms-field-radio input[type="radio"] {
	accent-color: var(--color-primary);
	width: 1.05rem;
	height: 1.05rem;
	margin-right: 0.4rem;
	vertical-align: middle;
}

/* --- Variante "cartes à icônes" (champ radio Particulier/Professionnel) ---
   Le champ porte la classe cyril-type-demandeur (css ACF). On masque le bouton
   radio natif et on transforme chaque <label> en grande carte cliquable avec
   pictogramme ; l'état sélectionné passe en cyan (input:checked + label). */
.section--formulaire .cyril-type-demandeur ul {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 0.4rem;
}

.section--formulaire .cyril-type-demandeur li {
	flex: 1 1 0 !important;
	min-width: 180px;
	display: block !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.section--formulaire .cyril-type-demandeur input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.section--formulaire .cyril-type-demandeur label {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	min-height: 128px;
	height: 100%;
	padding: 1.4rem 1rem;
	border: 2px solid rgba(255, 255, 255, 0.22);
	border-radius: 14px;
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--color-white) !important;
	font-weight: 600 !important;
	font-size: 1.05rem;
	text-align: center;
	cursor: pointer;
	transition:
		border-color var(--transition),
		background-color var(--transition),
		box-shadow var(--transition),
		color var(--transition);
}

/* Pictogramme au-dessus du libellé (SVG blanc en background). */
.section--formulaire .cyril-type-demandeur label::before {
	content: "";
	width: 2.75rem;
	height: 2.75rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: filter var(--transition);
}

.section--formulaire .cyril-type-demandeur .choice-1 label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E");
}

.section--formulaire .cyril-type-demandeur .choice-2 label::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}

.section--formulaire .cyril-type-demandeur label:hover {
	border-color: rgba(255, 255, 255, 0.5);
	background-color: rgba(255, 255, 255, 0.09);
}

.section--formulaire .cyril-type-demandeur input:checked + label {
	border-color: var(--color-accent);
	background-color: rgba(255, 138, 0, 0.16); /* repli */
	background-color: color-mix(in srgb, var(--color-accent) 16%, transparent);
	box-shadow: 0 0 0 1px var(--color-accent), 0 10px 26px rgba(255, 138, 0, 0.24);
	color: var(--color-accent) !important;
}

.section--formulaire .cyril-type-demandeur input:focus-visible + label {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.section--formulaire .wpforms-field-label,
.section--formulaire .wpforms-field-label-inline,
.section--formulaire .wpforms-field-sublabel {
	display: block;
	margin: 0 0 0.4rem;
	color: var(--color-white) !important;
	font-weight: 600;
	font-size: 0.95rem;
}

.section--formulaire .wpforms-required-label {
	color: #ff6b6b;
}

.section--formulaire .wpforms-field-description {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.8125rem;
}

.section--formulaire .wpforms-form input[type="text"],
.section--formulaire .wpforms-form input[type="email"],
.section--formulaire .wpforms-form input[type="tel"],
.section--formulaire .wpforms-form input[type="url"],
.section--formulaire .wpforms-form input[type="number"],
.section--formulaire .wpforms-form input[type="date"],
.section--formulaire .wpforms-form select,
.section--formulaire .wpforms-form textarea {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	padding: 0.7rem 0.9rem;
	background-color: rgba(255, 255, 255, 0.1) !important;
	border: 1px solid rgba(255, 255, 255, 0.38) !important;
	border-radius: var(--radius);
	color: var(--color-white) !important;
	font-size: 0.95rem;
	line-height: 1.4;
}

.section--formulaire .wpforms-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.section--formulaire .wpforms-form input::placeholder,
.section--formulaire .wpforms-form textarea::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.section--formulaire .wpforms-form input:focus,
.section--formulaire .wpforms-form select:focus,
.section--formulaire .wpforms-form textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	background-color: rgba(255, 255, 255, 0.1);
}

/* Icônes à gauche dans les champs (classe cyril-ico-* posée sur le champ). */
.section--formulaire [class*="cyril-ico-"] input,
.section--formulaire [class*="cyril-ico-"] textarea {
	padding-left: 2.7rem !important;
	background-repeat: no-repeat;
	background-position: 0.85rem center;
	background-size: 1.15rem 1.15rem;
}

.section--formulaire [class*="cyril-ico-"] textarea {
	background-position: 0.85rem 0.8rem;
}

.section--formulaire .cyril-ico-user input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb3c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}

.section--formulaire .cyril-ico-map input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb3c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='9 4 3 6 3 20 9 18 15 20 21 18 21 4 15 6 9 4'/%3E%3Cline x1='9' y1='4' x2='9' y2='18'/%3E%3Cline x1='15' y1='6' x2='15' y2='20'/%3E%3C/svg%3E");
}

.section--formulaire .cyril-ico-phone input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb3c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.section--formulaire .cyril-ico-building input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb3c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='1'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cline x1='8' y1='7' x2='8' y2='7'/%3E%3Cline x1='16' y1='7' x2='16' y2='7'/%3E%3C/svg%3E");
}

.section--formulaire .cyril-ico-pin input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb3c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.5-7-11a7 7 0 0 1 14 0c0 4.5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

.section--formulaire .cyril-ico-at input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb3c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/svg%3E");
}

.section--formulaire .cyril-ico-calendar input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb3c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3C/svg%3E");
}

.section--formulaire .cyril-ico-chat textarea {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb3c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* Zone d'upload moderne (glisser-déposer) : fond marine + pointillés blancs,
   comme le reste des champs (le CSS WPForms la rend blanche par défaut, d'où
   les !important pour reprendre la main). */
.section--formulaire .wpforms-field-file-upload .dropzone,
.section--formulaire .wpforms-field-file-upload .wpforms-uploader,
.section--formulaire .wpforms-field-file-upload .dropzone-wrapper,
.section--formulaire .wpforms-field-file-upload .dz-default {
	background-color: rgba(255, 255, 255, 0.05) !important;
	border: 2px dashed rgba(255, 255, 255, 0.45) !important;
	border-radius: var(--radius) !important;
	color: rgba(255, 255, 255, 0.85) !important;
	min-height: 9rem;
}

.section--formulaire .wpforms-field-file-upload .dz-message,
.section--formulaire .wpforms-field-file-upload .dz-message *,
.section--formulaire .wpforms-field-file-upload .modern-title,
.section--formulaire .wpforms-field-file-upload .modern-hint,
.section--formulaire .wpforms-field-file-upload .wpforms-uploader-dropzone-message {
	color: rgba(255, 255, 255, 0.85) !important;
}

/* Lien "Choisir des fichiers" dans le message du dropzone. */
.section--formulaire .wpforms-field-file-upload .dz-message a,
.section--formulaire .wpforms-field-file-upload .modern-title a {
	color: var(--color-primary) !important;
	text-decoration: underline;
}

/* Icône éventuelle (nuage/flèche) du dropzone en clair. */
.section--formulaire .wpforms-field-file-upload .dz-message svg,
.section--formulaire .wpforms-field-file-upload .wpforms-uploader svg {
	fill: rgba(255, 255, 255, 0.75) !important;
	stroke: rgba(255, 255, 255, 0.75) !important;
}

/* Aperçu du fichier en cours de téléversement (nom, taille) lisible sur le
   fond sombre. */
.section--formulaire .wpforms-field-file-upload .dz-preview,
.section--formulaire .wpforms-field-file-upload .dz-preview .dz-details,
.section--formulaire .wpforms-field-file-upload .dz-filename span,
.section--formulaire .wpforms-field-file-upload .dz-size span,
.section--formulaire .wpforms-field-file-upload .dz-preview .dz-filename,
.section--formulaire .wpforms-field-file-upload .dz-preview .dz-size {
	color: #fff !important;
}

/* Barre de progression % du téléversement : piste claire + remplissage ambre
   bien visible (le fichier part en tâche de fond dès l'ajout). */
.section--formulaire .wpforms-field-file-upload .dz-progress {
	height: 8px !important;
	background: rgba(255, 255, 255, 0.22) !important;
	border-radius: 999px !important;
	overflow: hidden !important;
	opacity: 1 !important;
}

.section--formulaire .wpforms-field-file-upload .dz-progress .dz-upload {
	background: var(--color-accent) !important;
	border-radius: 999px !important;
}

/* Bouton SOUMETTRE : pleine largeur, cyan. */
.section--formulaire .wpforms-submit-container {
	margin-top: 1.5rem;
}

.section--formulaire button.wpforms-submit {
	display: block;
	width: 100%;
	padding: 1rem 1.5rem;
	background-color: var(--color-accent) !important;
	border: none !important;
	border-radius: var(--radius);
	color: var(--color-white) !important;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(219, 102, 6, 0.3);
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.section--formulaire button.wpforms-submit:hover {
	background-color: var(--color-accent-strong) !important;
	box-shadow: 0 8px 20px rgba(219, 102, 6, 0.36);
}

@media (max-width: 640px) {
	.section--formulaire .wpforms-form .wpforms-field.wpforms-one-half {
		flex-basis: 100%;
	}
}

/* Message de confirmation après envoi : remplace le vert WPForms par un
   panneau cyan/verre assorti à la section sombre. */
.section--formulaire .wpforms-confirmation-container-full {
	margin: 0;
	padding: 1.4rem 1.6rem 1.4rem 1.7rem;
	background-color: rgba(10, 179, 209, 0.1) !important;
	border: 1px solid rgba(10, 179, 209, 0.4) !important;
	border-left: 4px solid var(--color-primary) !important;
	border-radius: var(--radius);
	color: var(--color-white) !important;
	position: relative;
}

.section--formulaire .wpforms-confirmation-container-full::before {
	content: "✓";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-right: 0.6rem;
	vertical-align: middle;
	background-color: var(--color-primary);
	color: var(--color-white);
	border-radius: 50%;
	font-weight: 700;
	font-size: 0.95rem;
}

.section--formulaire .wpforms-confirmation-container-full p {
	display: inline;
	margin: 0;
	color: var(--color-white) !important;
	font-size: 1rem;
	line-height: 1.6;
}

.section--formulaire .wpforms-confirmation-container-full a {
	color: var(--color-primary);
}

/* === RÉSEAUX SOCIAUX === */

.section--reseaux-sociaux {
	background-color: var(--color-white);
	text-align: center;
}

.reseaux-sociaux__container {
	display: grid;
	justify-items: center;
	gap: 0.75rem;
}

.reseaux-sociaux__title {
	margin: 0;
}

.reseaux-sociaux__text {
	margin: 0;
}

.reseaux-sociaux__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.reseaux-sociaux__link {
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	color: var(--color-navy);
	text-decoration: none;
}

.reseaux-sociaux__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	background-color: var(--color-primary);
	color: var(--color-white);
	font-weight: 700;
	border-radius: 50%;
	transition:
		background-color var(--transition),
		transform var(--transition);
}

.reseaux-sociaux__link:hover .reseaux-sociaux__badge,
.reseaux-sociaux__link:focus-visible .reseaux-sociaux__badge {
	background-color: var(--color-orange);
	transform: translateY(-2px);
}

.reseaux-sociaux__label {
	font-size: 0.875rem;
}

/* === CONTACT (COORDONNÉES) === */

.section--contact {
	position: relative;
	background-color: var(--color-navy);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: var(--color-white);
}

.section--contact::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--overlay-dark);
}

.contact__container {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
}

/* Picto en pastille cyan au-dessus de chaque titre (téléphone, email, avis,
   adresse) — cohérent avec le style d'icônes du site (avantages/freshmile). */
.contact__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 0.85rem;
	border-radius: 50%;
	background-color: var(--color-primary);
	color: var(--color-white);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.contact__bloc-title {
	margin: 0 0 0.5em;
	color: var(--color-white);
	font-size: var(--fs-h3);
}

.contact__value {
	margin: 0;
}

.contact__value a {
	color: var(--color-white);
	text-decoration: underline;
}

.contact__value a:hover,
.contact__value a:focus-visible {
	color: var(--color-orange-bright);
}

.contact__horaires {
	grid-column: 1 / -1;
	color: var(--color-white);
	text-align: center;
}

/* === GALERIE PHOTO (T10) === */
/* Grille en colonnes CSS (masonry sans JS, chaque vignette garde son ratio
   d'origine et « s'empile » sans trou — reproduit l'effet Modula de la prod)
   + lightbox plein écran pilotée par assets/js/lightbox.js. */

.galerie__title {
	margin: 0 0 1.5em;
	color: var(--color-navy);
	font-size: var(--fs-h2);
	text-align: center;
}

.galerie__empty {
	text-align: center;
	color: var(--color-grey-600);
}

/* Mosaïque éditoriale : tuiles de tailles variées (certaines 2×2) façon
   magazine sur desktop, grille carrée uniforme et compacte sur mobile.
   Mobile : 2 colonnes carrées, pas de grande tuile (lisible, peu de scroll). */
.galerie__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 46vw;
	gap: clamp(0.4rem, 1.5vw, 0.85rem);
}

@media (min-width: 640px) {
	.galerie__grid {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 14rem;
		grid-auto-flow: dense;
	}

	/* Une grande tuile 2×2 régulièrement pour rythmer la mosaïque. */
	.galerie__item:nth-child(6n + 1) {
		grid-column: span 2;
		grid-row: span 2;
	}
}

@media (min-width: 960px) {
	.galerie__grid {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 13rem;
	}

	.galerie__item:nth-child(6n + 1) {
		grid-column: auto;
		grid-row: auto;
	}

	/* Deux grandes tuiles réparties par cycle de 8 (cf. aperçu mosaïque). */
	.galerie__item:nth-child(8n + 1),
	.galerie__item:nth-child(8n + 6) {
		grid-column: span 2;
		grid-row: span 2;
	}
}

/* Repli : les photos au-delà de la limite sont masquées jusqu'au clic sur
   « Voir toutes les photos » (classe is-collapsed posée par le JS ; sans JS
   tout reste visible). */
.galerie__grid.is-collapsed .galerie__item--extra {
	display: none;
}

.galerie__item {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	cursor: zoom-in;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 62, 112, 0.12);
}

.galerie__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

/* Voile cyan + loupe au survol / focus. */
.galerie__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, rgba(0, 62, 112, 0.05), rgba(10, 179, 209, 0.6));
	opacity: 0;
	transition: opacity 0.35s ease;
}

.galerie__overlay svg {
	width: 2rem;
	height: 2rem;
	color: var(--color-white);
	transform: scale(0.8);
	transition: transform 0.35s ease;
}

.galerie__item:hover .galerie__img,
.galerie__item:focus-visible .galerie__img {
	transform: scale(1.08);
}

.galerie__item:hover .galerie__overlay,
.galerie__item:focus-visible .galerie__overlay {
	opacity: 1;
}

.galerie__item:hover .galerie__overlay svg,
.galerie__item:focus-visible .galerie__overlay svg {
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.galerie__img,
	.galerie__item:hover .galerie__img,
	.galerie__item:focus-visible .galerie__img {
		transition: none;
		transform: none;
	}
}

.galerie__more-wrap {
	margin-top: clamp(1rem, 3vw, 1.5rem);
	text-align: center;
}

.galerie__more {
	display: inline-block;
}

.galerie__item:hover .galerie__img,
.galerie__item:focus-visible .galerie__img {
	transform: scale(1.04);
}

/* Lightbox plein écran (masquée par défaut via l'attribut [hidden], basculée
   par assets/js/lightbox.js). */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 5vw, 3rem);
	background-color: rgba(0, 0, 0, 0.9);
}

.lightbox[hidden] {
	display: none;
}

.lightbox__image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--radius);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.14);
	color: var(--color-white);
	line-height: 1;
	transition: background-color var(--transition);
}

.lightbox__close:hover,
.lightbox__close:focus-visible,
.lightbox__prev:hover,
.lightbox__prev:focus-visible,
.lightbox__next:hover,
.lightbox__next:focus-visible {
	background-color: var(--color-primary);
}

.lightbox__close {
	top: clamp(0.75rem, 3vw, 1.5rem);
	right: clamp(0.75rem, 3vw, 1.5rem);
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.5rem;
}

.lightbox__prev,
.lightbox__next {
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	font-size: 2rem;
}

.lightbox__prev {
	left: clamp(0.5rem, 3vw, 1.5rem);
}

.lightbox__next {
	right: clamp(0.5rem, 3vw, 1.5rem);
}

/* Empêche le défilement du corps de page quand la lightbox est ouverte
   (classe posée/retirée par assets/js/lightbox.js). */
body.has-lightbox-open {
	overflow: hidden;
}

/* === SLIDER PLEIN ÉCRAN (T16) === */
/* Slides empilées en position absolue (chacune inset:0), une seule visible à
   la fois via `.is-active` (opacity, transition douce) — bascule pilotée par
   assets/js/slider.js. `.slider__media` s'applique aussi bien à une <img>
   qu'à une <video> (object-fit: cover) : les deux remplissent le cadre en
   plein écran de façon responsive. Overlay (titre/sous-titre/CTA) et
   navigation (flèches + dots) superposés au-dessus via z-index. */

.section--slider {
	position: relative;
	/* Plein écran = viewport MOINS la barre sticky (--app-header-h mesurée en
	   JS, cf. main.js ; repli 100px si le JS ne s'est pas exécuté). */
	height: calc(100vh - var(--app-header-h, 100px)); /* repli navigateurs sans svh */
	height: calc(100svh - var(--app-header-h, 100px));
	min-height: 420px;
	overflow: hidden;
	padding-block: 0; /* écrase le rythme vertical commun (.section, main.css) : rendu plein cadre */
	background-color: var(--color-navy); /* évite un flash blanc avant chargement du média + fond des barres en portrait */
}

/* Modificateur `hauteur = demi` (ACF field_sld_hauteur) — même technique de
   repli vh -> svh que le bloc plein écran ci-dessus. */
.section--slider-demi {
	height: 60vh;
	height: 60svh;
	min-height: 320px;
}

.slider__slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.slider__slide.is-active {
	z-index: 1;
	opacity: 1;
}

.slider__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.slider__empty {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 2rem;
	color: var(--color-white);
	text-align: center;
}

.slider__overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	padding: clamp(1.5rem, 5vw, 3rem);
	text-align: center;
	color: var(--color-white);
	background: linear-gradient(var(--overlay-navy), var(--overlay-navy));
}

.slider__title {
	margin: 0;
	max-width: 46rem;
	color: var(--color-white);
	font-size: clamp(1.75rem, 5vw, var(--fs-h1));
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.slider__subtitle {
	margin: 0;
	max-width: 38rem;
	font-size: clamp(1rem, 2.2vw, 1.2rem);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.slider__cta {
	margin-top: 0.25rem;
}

.slider__nav {
	position: absolute;
	top: 50%;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(2.5rem, 5vw, 3.25rem);
	height: clamp(2.5rem, 5vw, 3.25rem);
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.16);
	color: var(--color-white);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1;
}

.slider__nav:hover,
.slider__nav:focus-visible {
	background-color: var(--color-primary);
}

.slider__nav--prev {
	left: clamp(0.75rem, 3vw, 2rem);
}

.slider__nav--next {
	right: clamp(0.75rem, 3vw, 2rem);
}

.slider__dots {
	position: absolute;
	bottom: clamp(1rem, 4vw, 2rem);
	left: 50%;
	z-index: 4;
	display: flex;
	gap: 0.6rem;
	transform: translateX(-50%);
}

.slider__dot {
	width: 0.65rem;
	height: 0.65rem;
	padding: 0;
	border: 2px solid var(--color-white);
	border-radius: 50%;
	background-color: transparent;
}

.slider__dot.is-active,
.slider__dot:hover,
.slider__dot:focus-visible {
	background-color: var(--color-white);
}

/* Respect de prefers-reduced-motion : coupe uniquement le fondu enchaîné des
   slides (la règle globale équivalente dans main.css coupe déjà toutes les
   transitions, ce bloc documente explicitement le cas slider comme demandé). */
@media (prefers-reduced-motion: reduce) {
	.slider__slide {
		transition: none;
	}
}

/* === BATTERIES + MARQUEE === */

/* Palette des 5 segments de batterie (spectre fixe rouge → vert, PAS des
   couleurs de marque) : valeurs littérales volontairement locales à ce bloc,
   déclarées en variables CSS scoped à .section--batteries plutôt qu'au :root
   (main.css) pour ne pas polluer les tokens globaux. Le corps métallique et
   le fond des segments vides réutilisent les tokens gris/blanc existants,
   aucune nouvelle couleur globale ajoutée. */
.section--batteries {
	/* Spectre des segments allumés (rouge -> vert), conservé. */
	--battery-red: #e53935;
	--battery-orange: #fb8c00;
	--battery-yellow: #fdd835;
	--battery-light-green: #7cb342;
	--battery-green: #2e9e5b;
	/* Style néon (demande client) : corps sombre translucide, contour cyan
	   lumineux, segments vides à peine visibles, allumés qui « glow ». */
	--battery-empty: rgba(150, 210, 235, 0.05);
	--battery-outline: rgba(96, 205, 245, 0.55);
	--battery-glow: rgba(10, 179, 209, 0.55);

	position: relative;
	color: var(--color-white);
	/* Fond « spatial » sombre + halo cyan central derrière les batteries. */
	background-color: #06121f;
	background-image:
		radial-gradient(58% 42% at 50% 40%, rgba(10, 179, 209, 0.16), transparent 70%),
		linear-gradient(180deg, #071726 0%, #050d18 55%, #030812 100%);
}

.batteries__title {
	margin: 0 0 2rem;
	text-align: center;
}

.batteries__empty {
	color: var(--color-grey-600);
	text-align: center;
}

/* --- Marquee logos marques (boucle continue, CSS pur) --- */

.marquee {
	overflow: hidden;
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: clamp(2.5rem, 6vw, 4.5rem);
	animation: cyril-elec-marquee 24s linear infinite;
}

/* Pause au survol (souris) et au focus clavier (logos rendus focusables par
   leur <img> si un lien les entoure un jour) : :focus-within en confort
   supplémentaire, sans dépendance JS. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
	animation-play-state: paused;
}

.marquee__item {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* Pastille blanche : sur la section néon sombre, elle garde les logos en
	   couleur ET lisibles (ex. Smappee vert, invisible autrement). Le fond blanc
	   déjà présent d'ABB se fond dedans. */
	height: clamp(54px, 9vw, 68px);
	padding: 0.5rem 1.15rem;
	background-color: var(--color-white);
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.marquee__logo {
	max-width: clamp(90px, 20vw, 140px);
	max-height: 100%;
	width: auto;
	object-fit: contain;
	/* Logos de marques affichés directement en couleur (choix client, dès le
	   repos — pas de filtre monochrome). */
}

@keyframes cyril-elec-marquee {
	from {
		transform: translateX(0);
	}

	to {
		/* Piste = liste dupliquée x2 (cf. template) : -50% = exactement une
		   largeur de liste complète, donc boucle sans coupure visible. */
		transform: translateX(-50%);
	}
}

/* --- Grille des 6 batteries --- */

.batteries__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: end;
	gap: clamp(1rem, 3vw, 1.75rem);
}

.battery {
	display: grid;
	justify-items: center;
	gap: 0.75rem;
}

.battery__body {
	position: relative;
	/* display:flex + enfant étiré (align/justify stretch par défaut) : évite le
	   `height:100%`/`width:100%` sur un parent en aspect-ratio, qui déborde sur
	   Safari (bug de résolution des % de hauteur d'un parent aspect-ratio). */
	display: flex;
	width: 100%;
	max-width: 82px;
	aspect-ratio: 1 / 2.1;
	padding: 10% 10% 12%;
	border-radius: 14px;
	background-color: rgba(8, 24, 38, 0.5);
	border: 2px solid var(--battery-outline);
	box-shadow:
		0 0 14px var(--battery-glow),
		inset 0 0 12px rgba(10, 179, 209, 0.14);
}

.battery__nub {
	position: absolute;
	top: -9px;
	left: 50%;
	width: 36%;
	height: 9px;
	border-radius: 4px 4px 0 0;
	transform: translateX(-50%);
	background-color: rgba(8, 24, 38, 0.7);
	border: 2px solid var(--battery-outline);
	border-bottom: 0;
	box-shadow: 0 0 8px var(--battery-glow);
}

.battery__segments {
	position: relative;
	z-index: 1;
	flex: 1 1 auto; /* remplit la largeur du corps (axe principal du flex). */
	align-self: stretch; /* remplit la hauteur du corps (axe transversal). */
	min-width: 0;
	display: flex;
	flex-direction: column-reverse; /* 1er enfant DOM (rouge) = bas, cf. template + batteries.js. */
	gap: 8%;
	padding: 8%;
	border-radius: 8px;
	background-color: rgba(3, 12, 22, 0.55);
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
	/* Confine le halo coloré (box-shadow des segments allumés / de charge) à
	   l'intérieur du cadre : sans ça, le segment rouge du bas déborde sous le
	   corps de la batterie. L'ergot (.battery__nub) est un frère du body, hors
	   de ce conteneur, donc il n'est pas rogné. */
	overflow: hidden;
	/* iOS Safari : `overflow:hidden` + `border-radius` NE rogne PAS les enfants
	   qui portent un `transform` (les .battery__segment sont en scaleY) ni leur
	   `box-shadow` (le halo) → sur Safari les segments/halos débordaient du cadre
	   alors que Chrome les rognait bien. Forcer une couche de composition
	   (translateZ) rétablit le rognage sur Safari, sans changer le rendu ailleurs. */
	-webkit-transform: translateZ(0);
	        transform: translateZ(0);
}

.battery__segment {
	flex: 1 1 0;
	border-radius: 3px;
	background-color: var(--battery-empty);
	border: 1px solid rgba(120, 205, 240, 0.16);
	opacity: 1;
	transform: scaleY(0.86);
	transform-origin: bottom center;
	transition:
		background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.4s ease;
}

/* Couleur fixe par position (pas par batterie) : le 1er segment (bas) est
   toujours rouge, le 5e (haut) toujours vert — une batterie pleine affiche
   ainsi un dégradé rouge→orange→jaune→vert clair→vert du bas vers le haut,
   cohérent avec la progression demandée sur les 6 niveaux (20% = rouge seul,
   100% = les 5 couleurs empilées, "la batterie pleine utilise les verts"). */
.battery__segment:nth-child(1) {
	--segment-color: var(--battery-red);
}

.battery__segment:nth-child(2) {
	--segment-color: var(--battery-orange);
}

.battery__segment:nth-child(3) {
	--segment-color: var(--battery-yellow);
}

.battery__segment:nth-child(4) {
	--segment-color: var(--battery-light-green);
}

.battery__segment:nth-child(5) {
	--segment-color: var(--battery-green);
}

.battery__segment.is-lit {
	opacity: 1;
	transform: scaleY(1);
	background-color: var(--segment-color);
	border-color: var(--segment-color);
	box-shadow:
		0 0 12px 1px var(--segment-color),
		inset 0 0 6px rgba(255, 255, 255, 0.28);
}

/* Glow "en charge" temporaire sur le segment allumé le plus haut (retiré par
   batteries.js dès que le suivant s'allume, ou après un temps de pose sur le
   dernier segment). */
.battery__segment.is-charging {
	animation: cyril-elec-battery-pulse 0.7s ease-in-out infinite;
}

@keyframes cyril-elec-battery-pulse {
	0%,
	100% {
		box-shadow: 0 0 6px 0 var(--segment-color);
	}

	50% {
		box-shadow: 0 0 14px 4px var(--segment-color);
	}
}

.battery__percent {
	margin: 0;
	color: var(--color-primary);
	font-size: clamp(1rem, 2.4vw, 1.375rem);
	font-weight: 700;
	text-align: center;
	text-shadow: 0 0 8px rgba(10, 179, 209, 0.5);
}

/* --- Responsive : wrap 3×2 (tablette) puis 2×3 (mobile), jamais de
   débordement horizontal de page (minmax(0, 1fr) + max-width sur la
   batterie elle-même, pas de largeur fixe qui pourrait déborder). --- */

@media (max-width: 900px) {
	.batteries__grid {
		/* 5 batteries : 2 CENTRÉES en haut, 3 en dessous. Grille de 6 colonnes,
		   chaque batterie occupe 2 colonnes, avec placement explicite (ligne +
		   colonnes) pour obtenir 2 (cols 2-3 / 4-5) puis 3 (1-2 / 3-4 / 5-6). */
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 1.75rem 0.5rem;
	}

	/* Pas de justify-self ici : la batterie s'étire dans sa cellule (2 colonnes)
	   et son `justify-items: center` interne centre le corps de 64px. Mettre
	   justify-self:center rendrait .battery shrink-to-fit et casserait le
	   width:100% du corps (batteries écrasées). */

	.batteries__grid .battery:nth-child(1) {
		grid-row: 1;
		grid-column: 2 / span 2;
	}

	.batteries__grid .battery:nth-child(2) {
		grid-row: 1;
		grid-column: 4 / span 2;
	}

	.batteries__grid .battery:nth-child(3) {
		grid-row: 2;
		grid-column: 1 / span 2;
	}

	.batteries__grid .battery:nth-child(4) {
		grid-row: 2;
		grid-column: 3 / span 2;
	}

	.batteries__grid .battery:nth-child(5) {
		grid-row: 2;
		grid-column: 5 / span 2;
	}

	.battery__body {
		max-width: 64px;
	}
}

@media (max-width: 520px) {
	.batteries__grid {
		gap: 1.25rem 0.5rem;
	}

	.battery__body {
		max-width: 48px;
	}

	.battery__percent {
		font-size: 0.85rem;
	}
}

/* Respect de prefers-reduced-motion : le marquee redevient une rangée
   statique à une seule occurrence (la 2e passe, dupliquée pour la boucle
   CSS, cf. template, est masquée — sinon deux rangées de logos identiques
   resteraient affichées bout à bout) ; les batteries gardent l'état final
   déjà rendu par PHP (cf. template-parts/sections/batteries.php et
   assets/js/batteries.js, qui ne touche à rien dans ce cas). La coupure des
   transitions/animations elles-mêmes est déjà globale (main.css) — répétée
   ici explicitement, même convention que le bloc SLIDER ci-dessus. */
@media (prefers-reduced-motion: reduce) {
	.marquee__track {
		animation: none;
	}

	.marquee__item[aria-hidden="true"] {
		display: none;
	}

	.marquee {
		overflow-x: auto;
	}

	.battery__segment {
		transition: none;
	}

	.battery__segment.is-charging {
		animation: none;
	}
}

/* === BLOC TEXTE (générique, réutilisable) === */

.section--bloc-texte {
	background-color: var(--color-white);
	text-align: center;
}

.bloc-texte__container {
	max-width: 820px;
	margin-inline: auto;
}

.bloc-texte__titre {
	margin-bottom: 0.75em;
	color: var(--color-navy);
	font-weight: 700;
	font-size: var(--fs-h2);
	text-wrap: balance; /* répartit les lignes plus harmonieusement (navigateurs récents). */
}

/* Séquence de qualifications insécable (« Q1 – Q2 – Q3 » ne se coupe jamais),
   injectée par template-parts/sections/bloc_texte.php. */
.bloc-texte__nowrap {
	white-space: nowrap;
}

.bloc-texte__accroche {
	margin: 0 0 1.25em;
	color: var(--color-primary);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.bloc-texte__contenu {
	color: var(--color-navy);
}

.bloc-texte__contenu p {
	margin: 0 0 1em;
	line-height: 1.7;
}

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

/* === RÉVÉLATION AU SCROLL ===
   Système générique de "slide-in" au scroll, iso animation Avada d'origine
   (Fusion Builder `animation_type="slide"`, `animation_direction="left"/
   "right"/"down"`) — appliqué aux images latérales des sections (cf.
   assets/js/reveal.js pour la logique IntersectionObserver). Attribut
   `data-reveal="left|right|up"` sur l'élément à révéler ; `.is-revealed`
   ajouté par le JS quand l'élément entre dans le viewport. Réutilisable sur
   n'importe quel gabarit/section. */
[data-reveal] {
	opacity: 0;
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.8, 0.24, 1);
	will-change: opacity, transform;
}

[data-reveal="left"] {
	transform: translateX(-48px);
}

[data-reveal="right"] {
	transform: translateX(48px);
}

[data-reveal="up"] {
	transform: translateY(40px);
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   REHAUSSE VISUELLE (demande client « site un peu trop fade » — trop de cyan)
   1) Filet d'accent ambre sous les titres de section (diffuse l'accent chaud
      partout, en finesse). 2) Deux sections basculées en fond sombre pour
      rythmer les longues plages claires (contraste chaud/froid renforcé).
   ========================================================================== */

/* 1) Filet d'accent ambre sous les titres de section. */
.slider__title::after,
.nos-bornes__title::after,
.batteries__title::after,
.bloc-texte__titre::after,
.niveaux__title::after,
.choix-borne__title::after,
.carte-borne__title::after,
.processus__title::after,
.galerie__title::after,
.primes-fiscalite__title::after,
.tableau-advenir__title::after,
.freshmile__title::after,
.avis-google__title::after,
.formulaire__title::after,
.reseaux-sociaux__title::after,
.contact__bloc-title::after {
	content: "";
	display: block;
	width: 54px;
	height: 4px;
	margin-top: 0.55rem;
	margin-inline: auto;
	border-radius: 2px;
	background-color: var(--color-accent);
}

/* Titres alignés à gauche (fiches produit) : filet calé à gauche. */
.carte-borne__title::after {
	margin-inline: 0;
}

/* 2) Rythme sombre — deux beats dans les longues plages claires. Même dégradé
   profond que la section processus (cohérence visuelle). */

/* a) Niveaux de qualification (Q1/Q2/Q3) : les cartes cyan « glow » sur le
      fond sombre (fort contraste, effet premium). Porte aussi le même fond
      animé « aurore » que la section processus (::before/::after ci-dessous,
      mêmes keyframes cyril-proc-aurora-a/b). */
.section--niveaux-qualification {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--section-dark-bg);
	background-image: linear-gradient(135deg, var(--section-dark-1) 0%, var(--section-dark-2) 55%, var(--section-dark-3) 100%);
	color: var(--color-white);
}

/* Nappes de couleur animées, identiques à .section--processus-installation.
   Réutilise les keyframes cyril-proc-aurora-a/b déjà définies plus haut. */
.section--niveaux-qualification::before,
.section--niveaux-qualification::after {
	content: "";
	position: absolute;
	inset: -25%;
	z-index: 0;
	pointer-events: none;
	will-change: transform;
}

.section--niveaux-qualification::before {
	background:
		radial-gradient(38% 46% at 18% 28%, var(--aurora-1), transparent 72%),
		radial-gradient(42% 52% at 82% 78%, var(--aurora-2), transparent 72%);
	animation: cyril-proc-aurora-a 5s ease-in-out infinite alternate;
}

.section--niveaux-qualification::after {
	background:
		radial-gradient(44% 50% at 72% 18%, var(--aurora-3), transparent 72%),
		radial-gradient(40% 50% at 28% 82%, var(--aurora-4), transparent 72%);
	animation: cyril-proc-aurora-b 7s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
	.section--niveaux-qualification::before,
	.section--niveaux-qualification::after {
		animation: none;
	}
}

.section--niveaux-qualification .niveaux__title {
	color: var(--color-white);
}

.section--niveaux-qualification .niveaux__item {
	box-shadow:
		0 12px 30px rgba(0, 0, 0, 0.35),
		0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Survol des cartes Q1/Q2/Q3 : léger zoom + décollement. Réservé aux pointeurs
   fins — sur un écran tactile, `:hover` reste « collé » après le tap et la
   carte resterait agrandie jusqu'au toucher suivant. */
@media (hover: hover) and (pointer: fine) {
	.section--niveaux-qualification .niveaux__item:hover {
		transform: translateY(-6px) scale(1.03);
		z-index: 1;
		box-shadow:
			0 22px 45px rgba(0, 0, 0, 0.45),
			0 0 0 1px rgba(255, 255, 255, 0.12);
	}
}

/* Le bloc global de main.css coupe déjà les transitions, mais pas la
   transformation elle-même : sans ça, la carte sauterait d'un coup à sa taille
   agrandie. On ne garde que le renforcement de l'ombre. */
@media (prefers-reduced-motion: reduce) {
	.section--niveaux-qualification .niveaux__item:hover {
		transform: none;
	}
}

/* b) Primes et fiscalité : fond sombre, les cartes blanches ressortent
      nettement (contraste inversé). Le contenu des cartes garde ses couleurs
      propres — aucune retouche interne nécessaire. Porte aussi le même fond
      animé « aurore » que la section processus (::before/::after ci-dessous,
      mêmes keyframes cyril-proc-aurora-a/b). */
.section--primes-fiscalite {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--section-dark-bg);
	background-image: linear-gradient(135deg, var(--section-dark-1) 0%, var(--section-dark-2) 55%, var(--section-dark-3) 100%);
	color: var(--color-white);
}

/* Nappes de couleur animées, identiques à .section--processus-installation
   (teal / bleu / indigo dérivant en boucle). Réutilise les keyframes
   cyril-proc-aurora-a/b déjà définies plus haut. */
.section--primes-fiscalite::before,
.section--primes-fiscalite::after {
	content: "";
	position: absolute;
	inset: -25%;
	z-index: 0;
	pointer-events: none;
	will-change: transform;
}

.section--primes-fiscalite::before {
	background:
		radial-gradient(38% 46% at 18% 28%, var(--aurora-1), transparent 72%),
		radial-gradient(42% 52% at 82% 78%, var(--aurora-2), transparent 72%);
	animation: cyril-proc-aurora-a 5s ease-in-out infinite alternate;
}

.section--primes-fiscalite::after {
	background:
		radial-gradient(44% 50% at 72% 18%, var(--aurora-3), transparent 72%),
		radial-gradient(40% 50% at 28% 82%, var(--aurora-4), transparent 72%);
	animation: cyril-proc-aurora-b 7s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
	.section--primes-fiscalite::before,
	.section--primes-fiscalite::after {
		animation: none;
	}
}

.section--primes-fiscalite .primes-fiscalite__title {
	color: var(--color-white);
}

.section--primes-fiscalite .primes-fiscalite__card {
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
}

/* La carte Advenir a un fond quasi transparent (rgba cyan 6%) pensé pour un
   fond blanc : sur la section désormais sombre, son texte navy devenait
   illisible. On lui redonne un fond clair opaque → rendu identique à « avant »
   (texte navy lisible, liseré vert Advenir conservé). */
.section--primes-fiscalite .primes-fiscalite__advenir {
	background-color: #f4f8fb;
}

/* === BLOG (APERÇU ACCUEIL) ===
   Layout ACF `blog_apercu` : les 3 derniers articles publiés, insérés entre les
   avis clients et le formulaire de contact. Les cartes elles-mêmes sont le
   composant `.blog-card` (assets/css/main.css) : ici uniquement l'habillage de
   section (fond, en-tête, grille, bouton). */

.section--blog-apercu {
	background-color: var(--color-grey-50);
}

.blog-apercu__container {
	display: grid;
	gap: 2rem;
}

.blog-apercu__head {
	display: grid;
	gap: 0.5rem;
	max-width: 46em;
	margin-inline: auto;
	text-align: center;
}

.blog-apercu__title {
	margin: 0;
}

.blog-apercu__subtitle {
	margin: 0;
	color: var(--color-grey-600);
}

/* 3 vignettes max : auto-fit garantit 3 colonnes sur desktop, 2 puis 1 en
   descendant, sans media query dédiée. */
.blog-apercu__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 1.5rem;
	align-items: stretch;
}

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

/* === FAQ — APERÇU ACCUEIL === */
/* Accordéon réutilisé de la page FAQ (.faq-accordion / .faq-item*, stylés dans
   blog.css, chargé aussi sur l'accueil). Ici : l'habillage de la section. */

.section--faq-apercu {
	background-color: var(--color-white);
}

.faq-apercu__container {
	max-width: 820px;
	margin-inline: auto;
}

.faq-apercu__head {
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
}

.faq-apercu__eyebrow {
	margin: 0 0 0.4rem;
	color: var(--color-primary);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.faq-apercu__title {
	margin: 0;
}

.faq-apercu__cta {
	margin-top: clamp(1.5rem, 4vw, 2.25rem);
	text-align: center;
}

/* === FAQ — « Posez-nous votre question » === */

.faq-ask {
	max-width: 640px;
	margin: clamp(2rem, 5vw, 3rem) auto 0;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background-color: var(--color-grey-50);
	border: 1px solid var(--color-grey-200);
	border-radius: 14px;
	text-align: center;
}

.faq-ask__eyebrow {
	margin: 0 0 0.35rem;
	color: var(--color-primary);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.faq-ask__title {
	margin: 0 0 0.35rem;
}

.faq-ask__text {
	margin: 0 0 1.25rem;
	color: var(--color-grey-600);
	font-size: 0.95rem;
}

.faq-ask__field {
	margin-bottom: 0.75rem;
}

.faq-ask__textarea,
.faq-ask__input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--color-grey-200);
	border-radius: var(--radius);
	background-color: var(--color-white);
	color: var(--color-navy);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
}

.faq-ask__textarea {
	min-height: 4.5rem;
	resize: vertical;
}

.faq-ask__textarea:focus,
.faq-ask__input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(10, 179, 209, 0.18);
}

.faq-ask__inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.faq-ask__inline .faq-ask__input {
	flex: 1 1 200px;
}

.faq-ask__submit {
	flex: 0 0 auto;
}

/* Honeypot : hors écran, jamais visible ni atteignable au clavier. */
.faq-ask__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.faq-ask__status {
	margin: 0.9rem 0 0;
	min-height: 1.2em;
	font-size: 0.9rem;
}

.faq-ask__status.is-ok {
	color: #1a7f4e;
}

.faq-ask__status.is-error {
	color: #c0392b;
}