/*
 * Styles complémentaires du thème Électricité du Lion.
 *
 * Uniquement ce que theme.json ne sait pas exprimer.
 * Couleurs, polices, tailles et espacements viennent de theme.json.
 * Direction artistique : docs/DIRECTION-ARTISTIQUE.md.
 */

/* ---------------------------------------------------------------------
 * Mise en page générale
 * ------------------------------------------------------------------ */

/* En-tête, contenu principal et pied de page se touchent :
   chaque zone gère ses propres marges intérieures. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--fond);
}

/* ---------------------------------------------------------------------
 * Accessibilité
 * ------------------------------------------------------------------ */

/* Focus clavier visible et contrasté, en couleur d'accent. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------
 * Pictogrammes
 * ------------------------------------------------------------------ */

/* Famille de pictogrammes du thème (assets/pictos) : grille 24 × 24, trait
   1,5, extrémités arrondies. Chaque fichier n'est déclaré qu'ici ; les
   éléments choisissent leur pictogramme par la variable --edl-picto et
   l'affichent en masque CSS (couleur et opacité au choix, décoratif). */
:root {
	--edl-picto-ampoule: url("../pictos/ampoule.svg");
	--edl-picto-batterie: url("../pictos/batterie.svg");
	--edl-picto-borne: url("../pictos/borne.svg");
	--edl-picto-bouclier: url("../pictos/bouclier.svg");
	--edl-picto-bulle: url("../pictos/bulle.svg");
	--edl-picto-certificat: url("../pictos/certificat.svg");
	--edl-picto-circuit: url("../pictos/circuit.svg");
	--edl-picto-depannage: url("../pictos/depannage.svg");
	--edl-picto-document: url("../pictos/document.svg");
	--edl-picto-equerre: url("../pictos/equerre.svg");
	--edl-picto-horloge: url("../pictos/horloge.svg");
	--edl-picto-jauge: url("../pictos/jauge.svg");
	--edl-picto-maison-circuit: url("../pictos/maison-circuit.svg");
	--edl-picto-noeud: url("../pictos/noeud.svg");
	--edl-picto-pin: url("../pictos/pin.svg");
	--edl-picto-prise: url("../pictos/prise.svg");
	--edl-picto-tableau: url("../pictos/tableau.svg");
	--edl-picto-videophonie: url("../pictos/videophonie.svg");
	--edl-picto-voiture: url("../pictos/voiture.svg");
	--edl-picto-voitures: url("../pictos/voitures.svg");
}

/* ---------------------------------------------------------------------
 * Titres
 * ------------------------------------------------------------------ */

/* Titre de page (H1, hors hero de l'accueil) : ivoire, petit trait cuivre
   dessous. Le hero garde le traitement le plus fort (section « Hero »). */
:where(main) h1:not(.edl-hero h1) {
	letter-spacing: -0.02em;
}

:where(main) h1:not(.edl-hero h1)::after {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin-top: 0.3em;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--cuivre-clair), var(--wp--preset--color--cuivre));
}

/* Titre de section (H2) : trait cuivre plus court qui s'estompe. Pas dans
   les cartes, les listes d'articles et les questions fréquentes, ni sur les
   titres réduits (pages légales), ni après un surtitre (qui a déjà son trait). */
:where(main) h2.wp-block-heading:not(.has-grand-font-size, .has-moyen-font-size, .edl-surtitre + h2, :is(.edl-carte, .wp-block-post-template, .wp-block-details) h2)::after {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2px;
	margin-top: 0.35em;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--cuivre), transparent);
}

:where(main) :is(h1, h2).has-text-align-center::after {
	margin-inline: auto;
}

/* ---------------------------------------------------------------------
 * Boutons
 * ------------------------------------------------------------------ */

.wp-element-button,
.wp-block-button__link {
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		color 0.18s ease;
}

/* Bouton principal (accent) : léger halo lumineux au survol uniquement. */
:root .wp-element-button:hover {
	box-shadow:
		0 0 0 3px rgb(174 230 255 / 0.18),
		0 0 24px rgb(174 230 255 / 0.35);
}

/* Bouton secondaire (style « Contour ») : plus discret. */
:root .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--bleu-clair);
	color: var(--wp--preset--color--texte);
}

/* Survol du bouton secondaire : touche chaude (contour cuivre, halo léger). */
:root .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--cuivre-clair);
	color: var(--wp--preset--color--texte);
	box-shadow: 0 0 18px rgb(226 138 59 / 0.2);
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}
}

/* Icône de téléphone devant le libellé d'un bouton (couleur du texte). */
.edl-icone-telephone > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}

.edl-icone-telephone > .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h3.5l1.5 4.5-2.25 1.5a11 11 0 0 0 5.25 5.25L14.5 12l4.5 1.5V17a2 2 0 0 1-2 2A15 15 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h3.5l1.5 4.5-2.25 1.5a11 11 0 0 0 5.25 5.25L14.5 12l4.5 1.5V17a2 2 0 0 1-2 2A15 15 0 0 1 3 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Numéro de téléphone présenté comme un lien (en-tête) : sans cadre,
   icône en cuivre clair, cuivre clair au survol. */
:root .edl-bouton-telephone > .wp-block-button__link {
	padding: 0.5em 0.25em;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--texte);
	font-weight: 700;
	white-space: nowrap;
}

:root .edl-bouton-telephone > .wp-block-button__link::before {
	background-color: var(--wp--preset--color--cuivre-clair);
}

:root .edl-bouton-telephone > .wp-block-button__link:hover {
	color: var(--wp--preset--color--cuivre-clair);
	box-shadow: none;
}

/* Liens du texte : soulignement cuivre, discret et chaleureux. */
a:where(:not(.wp-element-button)) {
	text-decoration-color: var(--wp--preset--color--cuivre);
	text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------------
 * Champs de formulaire
 * ------------------------------------------------------------------ */

/* Champs sombres, bordure bleue (contraste d'au moins 3:1 avec le fond). */
:where(
	input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]),
	select,
	textarea
),
:root .wp-block-search__input {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--texte);
	border: 1px solid var(--wp--preset--color--bleu);
	border-radius: 6px;
}

::placeholder {
	color: var(--wp--preset--color--texte-secondaire);
	opacity: 1;
}

/* ---------------------------------------------------------------------
 * En-tête : tablette
 * ------------------------------------------------------------------ */

/* De 600 à 1023px, le menu natif se replie derrière le bouton hamburger,
   placé à droite : logo, numéro et « Demander un devis » restent sur une
   seule ligne. (Le menu natif ne se replie seul que sous 600px.) */
@media (min-width: 600px) and (max-width: 1023px) {
	.edl-entete .wp-block-navigation {
		order: 3;
	}

	.edl-entete .edl-entete-actions {
		margin-left: auto;
	}

	.edl-entete .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.edl-entete .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Menu ouvert (mobile et tablette) : liens alignés à gauche et plus grands
   pour le doigt, sous-pages en couleur secondaire. La liste interne du menu
   porte elle aussi la classe d'alignement à droite : on la surcharge aussi. */
.edl-entete .wp-block-navigation__responsive-container.is-menu-open,
.edl-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation {
	--navigation-layout-justification-setting: flex-start;
}

.edl-entete .wp-block-navigation__responsive-container.is-menu-open {
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.edl-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--moyen);
}

.edl-entete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	color: var(--wp--preset--color--texte-secondaire);
	font-size: var(--wp--preset--font-size--normal);
}

/* ---------------------------------------------------------------------
 * Hero de l'accueil
 * ------------------------------------------------------------------ */

/* Fond bleu-noir avec un halo très léger derrière le titre. */
.edl-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-bottom: 1px solid var(--wp--preset--color--bordure);
	background-image:
		radial-gradient(ellipse 50% 55% at 50% 38%, rgb(78 126 165 / 0.16), transparent 70%),
		linear-gradient(180deg, var(--wp--preset--color--fond), var(--wp--preset--color--fond-secondaire));
}

/* Composition centrée : surtitre, titre, texte et boutons. */
.edl-hero__contenu {
	position: relative;
	z-index: 1;
	text-align: center;
}

.edl-hero .edl-surtitre {
	justify-content: center;
}

.edl-hero .edl-surtitre::after {
	content: "";
	flex: none;
	width: 2rem;
	height: 1px;
	background: linear-gradient(90deg, var(--wp--preset--color--cuivre), transparent);
}

/* Mobile : surtitre sur deux lignes, traits plus courts de part et d'autre. */
@media (max-width: 599px) {
	.edl-hero .edl-surtitre::before,
	.edl-hero .edl-surtitre::after {
		width: 1.25rem;
	}
}

.edl-hero__actions {
	justify-content: center;
}

/* Titre : le nom de l'entreprise domine (balisage ajouté par functions.php),
   souligné d'un fin trait cuivre qui se trace à l'arrivée ; la suite du
   titre, plus petite, passe dessous. Le tout reste en ivoire. */
.edl-hero h1 {
	letter-spacing: -0.02em;
}

.edl-hero .edl-hero__contenu > h1 {
	max-width: min(100%, 60rem);
}

.edl-hero__nom {
	position: relative;
	display: inline-block;
	padding-bottom: 0.2em;
	font-size: clamp(2.5rem, 1.25rem + 5.2vw, 4.75rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.edl-hero__nom::after {
	content: "";
	position: absolute;
	right: 10%;
	bottom: 0;
	left: 10%;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--cuivre) 18%, var(--wp--preset--color--cuivre-clair) 50%, var(--wp--preset--color--cuivre) 82%, transparent);
	box-shadow: 0 0 10px rgb(226 138 59 / 0.25);
	transform-origin: center;
	animation: edl-trait-nom 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}

@keyframes edl-trait-nom {
	from {
		opacity: 0;
		transform: scaleX(0);
	}

	to {
		opacity: 1;
		transform: scaleX(1);
	}
}

/* Virgule entre le nom et la suite : lue, mais pas affichée (passage à la ligne). */
.edl-hero__virgule {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.edl-hero__suite {
	display: block;
	margin-top: 0.55em;
	font-size: var(--wp--preset--font-size--grand);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* Visuel décoratif (assets/images/hero-circuit.svg, inséré par functions.php) :
   centré derrière le titre, son nœud lumineux derrière le nom ; atténué,
   fondu sur les bords, sous le texte. */
.edl-hero__visuel {
	position: absolute;
	z-index: 0;
	top: 34%;
	left: 50%;
	width: max(46rem, 82%);
	max-width: 74rem;
	pointer-events: none;
	opacity: 0.4;
	transform: translate(-50%, -50%);
	-webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent);
	mask-image: radial-gradient(closest-side, #000 45%, transparent);
}

.edl-hero__visuel svg {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 782px) {
	.edl-hero__visuel {
		opacity: 0.55;
	}
}

/* Derrière le nom, le nœud n'est qu'une lueur : anneau et point central
   masqués pour ne jamais se superposer aux lettres. */
.edl-hero .edl-circuit__anneau,
.edl-hero .edl-circuit__coeur {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.edl-hero__nom::after {
		animation: none;
	}
}

.edl-circuit__traces path {
	fill: none;
	stroke: var(--wp--preset--color--bleu);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.6;
	vector-effect: non-scaling-stroke;
}

.edl-circuit__pastilles circle {
	fill: var(--wp--preset--color--fond);
	stroke: var(--wp--preset--color--bleu-clair);
	stroke-width: 1.5;
	opacity: 0.7;
}

.edl-circuit__vias circle {
	fill: var(--wp--preset--color--bleu-clair);
	opacity: 0.6;
}

.edl-circuit__anneau {
	fill: var(--wp--preset--color--fond-secondaire);
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1.5;
	opacity: 0.85;
}

.edl-circuit__coeur,
.edl-electron circle {
	fill: var(--wp--preset--color--accent);
}

/* Une seule touche chaude dans le hero : un électron sur quatre en cuivre. */
.edl-electron--2 circle {
	fill: var(--wp--preset--color--cuivre-clair);
}

.edl-electron__halo {
	opacity: 0.25;
}

/* Électrons : quelques points lumineux qui parcourent lentement les tracés
   jusqu'au nœud, puis restent invisibles un moment (mouvement espacé et calme).
   Seules transform et opacity sont animées (léger pour le processeur). */
.edl-electron {
	opacity: 0;
	animation: 10s linear 0s infinite both;
}

.edl-electron--1 { animation-name: edl-electron-1; }
.edl-electron--2 { animation-name: edl-electron-2; animation-duration: 12s; animation-delay: 3s; }
.edl-electron--3 { animation-name: edl-electron-3; animation-duration: 11s; animation-delay: 6s; }
.edl-electron--4 { animation-name: edl-electron-4; animation-duration: 9s; animation-delay: 1.5s; }

/* Les étapes intermédiaires suivent les angles des tracés du SVG. */
@keyframes edl-electron-1 {
	0% { transform: translate(640px, 196px); opacity: 0; }
	4% { opacity: 1; }
	19.1% { transform: translate(530px, 196px); }
	30% { transform: translate(486px, 240px); }
	50% { opacity: 1; }
	55%, 100% { transform: translate(342px, 240px); opacity: 0; }
}

@keyframes edl-electron-2 {
	0% { transform: translate(420px, 0); opacity: 0; }
	4% { opacity: 1; }
	11.7% { transform: translate(420px, 60px); }
	28.2% { transform: translate(360px, 120px); }
	36% { transform: translate(320px, 120px); }
	50% { opacity: 1; }
	55%, 100% { transform: translate(320px, 218px); opacity: 0; }
}

@keyframes edl-electron-3 {
	0% { transform: translate(470px, 480px); opacity: 0; }
	4% { opacity: 1; }
	9.9% { transform: translate(470px, 420px); }
	23.9% { transform: translate(410px, 360px); }
	38.8% { transform: translate(320px, 360px); }
	50% { opacity: 1; }
	55%, 100% { transform: translate(320px, 262px); opacity: 0; }
}

@keyframes edl-electron-4 {
	0% { transform: translate(230px, 300px); opacity: 0; }
	4% { opacity: 1; }
	15% { transform: translate(230px, 270px); }
	36.1% { transform: translate(260px, 240px); }
	50% { opacity: 1; }
	55%, 100% { transform: translate(298px, 240px); opacity: 0; }
}

/* Halo du nœud : respiration très lente et discrète. */
.edl-circuit__halo {
	animation: edl-respiration 6s ease-in-out infinite;
}

@keyframes edl-respiration {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

/* Mobile : moins d'électrons, le message reste au premier plan. */
@media (max-width: 781px) {
	.edl-electron--3,
	.edl-electron--4 {
		display: none;
	}
}

/* Animations désactivées : version statique (tracés et nœud lumineux seuls). */
@media (prefers-reduced-motion: reduce) {
	.edl-electron {
		display: none;
	}

	.edl-circuit__halo {
		animation: none;
	}
}

/* ---------------------------------------------------------------------
 * Bandeau visuel de l'accueil
 * ------------------------------------------------------------------ */

/* Ruban de photos sous le hero (inc/bandeau-visuel.php ; photos choisies
   dans Apparence › Bandeau visuel). Défilement lent et continu sur toute la
   largeur, fondu sur les bords : la piste contient deux moitiés identiques
   et se décale de la moitié de sa largeur, en un temps calculé pour une
   vitesse constante. Hauteur : 160 px, 136 px sur tablette, 112 px sur
   mobile ; cadre 4:3, ou 3:4 pour les photos verticales (largeurs reprises
   dans l'attribut sizes des images). */
.edl-bandeau.alignfull {
	--edl-bandeau-hauteur: 10rem;
	--edl-bandeau-fondu: min(8%, 6rem);
	--edl-bandeau-marge: max(1rem, (100% - var(--wp--style--global--wide-size)) / 2);
	position: relative;
	margin-block: 0;
	padding-top: var(--wp--preset--spacing--50);
}

@media (max-width: 1023px) {
	.edl-bandeau.alignfull {
		--edl-bandeau-hauteur: 8.5rem;
	}
}

@media (max-width: 599px) {
	.edl-bandeau.alignfull {
		--edl-bandeau-hauteur: 7rem;
	}
}

/* Fenêtre : rogne la piste, sans barre de défilement. La marge verticale
   laisse la place au contour de focus. */
.edl-bandeau__fenetre {
	overflow: hidden;
	overflow: clip;
	padding-block: 0.375rem;
	scroll-padding-inline: var(--edl-bandeau-fondu);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--edl-bandeau-fondu), #000 calc(100% - var(--edl-bandeau-fondu)), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 var(--edl-bandeau-fondu), #000 calc(100% - var(--edl-bandeau-fondu)), transparent);
}

.edl-bandeau__piste {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: edl-bandeau-defilement var(--edl-bandeau-duree, 60s) linear infinite;
}

@keyframes edl-bandeau-defilement {
	to {
		transform: translateX(-50%);
	}
}

/* Photo : cadre aux coins arrondis, bordure fine, recadrage sans déformation.
   L'espace est une marge à droite de chaque photo (et non un gap) : les deux
   moitiés de la piste restent rigoureusement identiques. */
.edl-bandeau__photo {
	flex: none;
	box-sizing: border-box;
	height: var(--edl-bandeau-hauteur);
	aspect-ratio: 4 / 3;
	margin: 0 calc(var(--edl-bandeau-hauteur) * 0.075) 0 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 10px;
	background-color: var(--wp--preset--color--fond-secondaire);
	transition: border-color 0.18s ease;
}

.edl-bandeau__photo--portrait {
	aspect-ratio: 3 / 4;
}

.edl-bandeau__lien {
	display: block;
	height: 100%;
}

.edl-bandeau__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

/* Focus clavier : contour autour du cadre (le cadre rogne celui du lien). */
.edl-bandeau__lien:focus-visible {
	outline-offset: -3px;
}

.edl-bandeau__photo:has(.edl-bandeau__lien:focus-visible) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

@supports selector(:has(*)) {
	.edl-bandeau__lien:focus-visible {
		outline: none;
	}
}

/* Ordinateur : tout le ruban s'arrête au survol ; léger zoom de la photo
   survolée, dont le cadre prend la touche cuivre si elle est cliquable. */
@media (hover: hover) {
	.edl-bandeau__fenetre:hover .edl-bandeau__piste {
		animation-play-state: paused;
	}

	.edl-bandeau__photo:hover img {
		transform: scale(1.05);
	}

	.edl-bandeau__photo:has(> .edl-bandeau__lien):hover {
		border-color: var(--wp--preset--color--cuivre);
	}
}

/* Bouton de pause : une case à cocher (aucun JavaScript), présentée comme un
   petit bouton rond dans le fondu droit du ruban. Cochée : ruban arrêté,
   icône « lecture ». */
.edl-bandeau__pause-case,
.edl-bandeau__pause-texte {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.edl-bandeau__pause {
	position: absolute;
	z-index: 1;
	right: 0.75rem;
	bottom: 0.875rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 50%;
	background-color: rgb(8 13 22 / 0.85);
	color: var(--wp--preset--color--texte-secondaire);
	cursor: pointer;
	transition:
		border-color 0.18s ease,
		color 0.18s ease;
}

.edl-bandeau__pause::before {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}

.edl-bandeau__pause:hover {
	border-color: var(--wp--preset--color--cuivre-clair);
	color: var(--wp--preset--color--texte);
}

.edl-bandeau__pause-case:focus-visible + .edl-bandeau__pause {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.edl-bandeau__pause-case:checked + .edl-bandeau__pause::before {
	background: currentColor;
	clip-path: polygon(15% 0, 100% 50%, 15% 100%);
}

.edl-bandeau__pause-case:checked ~ .edl-bandeau__fenetre .edl-bandeau__piste {
	animation-play-state: paused;
}

@media (forced-colors: active) {
	.edl-bandeau__pause::before {
		forced-color-adjust: none;
	}
}

/* Focus clavier sur une photo cliquable du ruban animé : il s'arrête au début
   de la suite et devient défilable, pour que la photo atteinte soit visible
   (hors des fondus, grâce à scroll-padding). */
@media (prefers-reduced-motion: no-preference) {
	.edl-bandeau:not(.edl-bandeau--fixe):has(.edl-bandeau__lien:focus-visible) .edl-bandeau__piste {
		animation: none;
	}

	.edl-bandeau:not(.edl-bandeau--fixe):has(.edl-bandeau__lien:focus-visible) .edl-bandeau__fenetre {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.edl-bandeau:not(.edl-bandeau--fixe):has(.edl-bandeau__lien:focus-visible) .edl-bandeau__fenetre::-webkit-scrollbar {
		display: none;
	}
}

/* Rangée fixe (moins de 3 photos) : centrée, sans fondu, défilable à la
   main si l'écran est trop étroit. */
.edl-bandeau--fixe .edl-bandeau__fenetre {
	overflow-x: auto;
	padding-inline: var(--edl-bandeau-marge);
	scroll-padding-inline: var(--edl-bandeau-marge);
	-webkit-mask-image: none;
	mask-image: none;
}

.edl-bandeau--fixe .edl-bandeau__piste {
	margin-inline: auto;
	animation: none;
}

.edl-bandeau--fixe .edl-bandeau__photo:last-child {
	margin-right: 0;
}

/* Animations désactivées : galerie fixe, alignée sur le contenu, que l'on
   fait défiler soi-même (une seule fois chaque photo, sans bouton de pause
   ni zoom). */
@media (prefers-reduced-motion: reduce) {
	.edl-bandeau__piste {
		animation: none;
	}

	.edl-bandeau__photo--copie,
	.edl-bandeau__pause-case,
	.edl-bandeau__pause {
		display: none;
	}

	.edl-bandeau__fenetre {
		overflow-x: auto;
		padding-inline: var(--edl-bandeau-marge);
		scroll-padding-inline: var(--edl-bandeau-marge);
		scrollbar-color: var(--wp--preset--color--bordure) transparent;
		scrollbar-width: thin;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.edl-bandeau__photo,
	.edl-bandeau__photo img {
		transition: none;
	}

	.edl-bandeau__photo:hover img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * Sections et cartes
 * ------------------------------------------------------------------ */

/* Surtitre : petite ligne au-dessus d'un titre, précédée d'un trait cuivre.
   Texte en cuivre clair (contraste AA sur tous les fonds sombres). */
.edl-surtitre {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--wp--preset--color--cuivre-clair);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.edl-surtitre::before {
	content: "";
	flex: none;
	width: 2rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--cuivre));
}

.edl-surtitre a {
	color: inherit;
	text-decoration: none;
}

.edl-surtitre a:hover {
	text-decoration: underline;
}

/* Carte : surface légèrement plus claire, bordure fine, profondeur discrète.
   Isolée pour que le filigrane (::after) passe sous le contenu. Sans
   pictogramme attribué, le filigrane reste invisible (masque transparent). */
.edl-carte {
	--edl-picto: linear-gradient(transparent, transparent);
	position: relative;
	isolation: isolate;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 12px;
	background-color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--douce);
	transition:
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

/* Filigrane : grand pictogramme cuivre très atténué dans le coin inférieur
   droit, décoratif (pseudo-élément, ignoré par les lecteurs d'écran),
   légèrement renforcé au survol des cartes cliquables. */
.edl-carte::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: 0.75rem;
	bottom: 0.75rem;
	width: clamp(4.5rem, 32%, 6.5rem);
	aspect-ratio: 1;
	background-color: var(--wp--preset--color--cuivre-clair);
	opacity: 0.11;
	-webkit-mask: var(--edl-picto) center / contain no-repeat;
	mask: var(--edl-picto) center / contain no-repeat;
	pointer-events: none;
	transition: opacity 0.18s ease;
}

.edl-carte--lien:hover::after,
.edl-carte--lien:focus-within::after {
	opacity: 0.17;
}

/* Détail électrique statique : court tracé cuivre en haut de la carte,
   qui s'allonge légèrement au survol. */
.edl-carte--lien::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-bottom: var(--wp--preset--spacing--30);
	border-radius: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--cuivre), transparent);
	transition: width 0.18s ease;
}

.edl-carte--lien:hover::before,
.edl-carte--lien:focus-within::before {
	width: 4rem;
}

/* Carte mise en avant (prestation phare) : tracé plus long et plus lumineux. */
.edl-carte--vedette::before {
	width: 4rem;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--cuivre-clair), transparent);
}

.edl-carte--vedette:hover::before,
.edl-carte--vedette:focus-within::before {
	width: 5.5rem;
}

.edl-carte > :first-child {
	margin-top: 0;
}

.edl-carte--lien :is(h2, h3) a {
	color: var(--wp--preset--color--texte);
	text-decoration: none;
}

/* Toute la carte est cliquable, avec un seul lien (celui du titre). */
.edl-carte--lien :is(h2, h3) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.edl-carte--lien:hover,
.edl-carte--lien:focus-within {
	border-color: var(--wp--preset--color--bleu);
	box-shadow:
		0 0 0 1px rgb(143 178 209 / 0.2),
		0 12px 32px rgb(0 0 0 / 0.35);
	transform: translateY(-2px);
}

.edl-carte--lien:hover :is(h2, h3) a,
.edl-carte--lien:focus-within :is(h2, h3) a {
	color: var(--wp--preset--color--accent);
}

/* Le focus clavier s'affiche autour de la carte entière. */
.edl-carte--lien :is(h2, h3) a:focus-visible {
	outline: none;
}

.edl-carte--lien :is(h2, h3) a:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Engagements (et critères de choix de la recharge) : pictogramme cuivre
   devant chaque titre, aligné sur la première ligne même si le titre passe
   sur deux lignes. Pictogramme choisi selon la position (section
   « Pictogrammes ») ; à défaut, nœud de circuit. */
:is(.edl-engagement, .edl-critere) {
	--edl-picto: var(--edl-picto-noeud);
}

:is(.edl-engagement, .edl-critere) h3 {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

:is(.edl-engagement, .edl-critere) h3::before {
	content: "";
	flex: none;
	width: 1.4rem;
	height: 1.4rem;
	margin-top: 0.02em;
	background-color: var(--wp--preset--color--cuivre-clair);
	-webkit-mask: var(--edl-picto) center / contain no-repeat;
	mask: var(--edl-picto) center / contain no-repeat;
}

/* Étapes numérotées (numéros décoratifs, générés en CSS). */
.edl-etapes {
	counter-reset: edl-etape;
}

.edl-etape {
	counter-increment: edl-etape;
}

.edl-etape::before {
	content: counter(edl-etape, decimal-leading-zero);
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--bleu);
	border-radius: 50%;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Questions fréquentes (bloc Détails natif). */
.edl-faq .wp-block-details {
	padding: var(--wp--preset--spacing--30) 0;
	border-bottom: 1px solid var(--wp--preset--color--bordure);
}

.edl-faq .wp-block-details summary {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	color: var(--wp--preset--color--texte);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.edl-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.edl-faq .wp-block-details summary::after {
	content: "+";
	flex: none;
	color: var(--wp--preset--color--cuivre-clair);
	font-weight: 400;
}

.edl-faq .wp-block-details[open] summary::after {
	content: "−";
}

/* Bandeau d'appel : halo très léger et chaleureux dans un angle. */
.edl-appel {
	background-image:
		radial-gradient(ellipse 45% 110% at 100% 0%, rgb(201 106 43 / 0.16), transparent 70%),
		radial-gradient(ellipse 70% 120% at 85% 100%, rgb(78 126 165 / 0.14), transparent 70%);
}

.edl-appel__texte > * {
	margin: 0;
}

/* Mobile : boutons d'action en pleine largeur, empilés. */
@media (max-width: 599px) {
	.edl-appel__actions {
		width: 100%;
	}

	.edl-hero__actions > .wp-block-button,
	.edl-appel__actions > .wp-block-button {
		flex: 1 1 100%;
	}

	.edl-hero__actions .wp-block-button__link,
	.edl-appel__actions .wp-block-button__link {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.edl-carte,
	.edl-carte::after,
	.edl-carte--lien::before {
		transition: none;
	}

	.edl-carte--lien:hover,
	.edl-carte--lien:focus-within {
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * Blog
 * ------------------------------------------------------------------ */

/* Carte d'article : image en pleine largeur en haut de la carte,
   pas de tracé décoratif (la catégorie en cuivre clair joue ce rôle).
   Cartes d'une même rangée de même hauteur, date calée en bas. */
.edl-carte-article::before {
	content: none;
}

.wp-block-post-template > li:has(> .edl-carte-article),
.wp-block-term-template > li:has(> .edl-carte-theme) {
	display: flex;
}

/* Carte de thème (bloc natif Terms Query) : nom du thème et description,
   tracé cuivre en haut, toute la carte mène à l'archive de la catégorie. */
.edl-carte-theme {
	display: flex;
	flex: 1;
	flex-direction: column;
}

/* L'espacement entre le nom et la description vient de la mise en page
   de la carte (blockGap) ; on retire seulement les marges internes. */
.edl-carte-theme .wp-block-term-name,
.edl-carte-theme .wp-block-term-description p {
	margin: 0;
}

.edl-carte-theme .wp-block-term-description {
	margin-bottom: 0;
}

/* Thème sans article : carte toujours visible mais non cliquable,
   aucune réaction au survol, « Bientôt » discret en bas de la carte. */
.edl-carte-theme:has(.edl-theme-vide) {
	cursor: default;
}

.edl-carte-theme:has(.edl-theme-vide):hover,
.edl-carte-theme:has(.edl-theme-vide):focus-within {
	border-color: var(--wp--preset--color--bordure);
	box-shadow: var(--wp--preset--shadow--douce);
	transform: none;
}

.edl-carte-theme:has(.edl-theme-vide):hover::before {
	width: 2.5rem;
}

.edl-carte-theme__bientot {
	order: 1;
	margin: auto 0 0;
	padding-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--texte-secondaire);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.edl-carte-article {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.edl-carte-article .edl-carte-article__date {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--20);
}

.edl-carte-article .wp-block-post-featured-image {
	margin: calc(-1 * var(--wp--preset--spacing--40)) calc(-1 * var(--wp--preset--spacing--40)) var(--wp--preset--spacing--30);
	overflow: hidden;
	border-radius: 11px 11px 0 0;
}

.edl-carte-article .wp-block-post-title,
.edl-carte-article .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Catégorie : petit libellé en cuivre clair, cliquable au-dessus du lien de la carte. */
.edl-carte-article__categorie {
	position: relative;
	z-index: 1;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.edl-carte-article__categorie a,
.wp-block-post-terms.edl-surtitre a {
	color: var(--wp--preset--color--cuivre-clair);
	text-decoration: none;
}

.edl-carte-article__categorie a:hover {
	text-decoration: underline;
}

.edl-carte-article__date {
	color: var(--wp--preset--color--texte-secondaire);
	font-size: var(--wp--preset--font-size--petit);
}

/* Pagination : numéros sobres, page courante en accent. */
.edl-liste-articles .wp-block-query-pagination {
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--50);
}

.edl-liste-articles .wp-block-query-pagination a,
.edl-liste-articles .wp-block-query-pagination .current {
	padding: 0.4em 0.8em;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 6px;
	text-decoration: none;
}

.edl-liste-articles .wp-block-query-pagination .current {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* Article : ligne « Par … · Publié le … · Mis à jour le … ». */
.edl-meta p {
	margin: 0;
}

/* « Mis à jour le » n'apparaît que si WordPress fournit une date de
   modification postérieure à la publication (sinon le bloc date est vide). */
.edl-meta__mise-a-jour:not(:has(time)) {
	display: none;
}

.edl-retour {
	margin-bottom: var(--wp--preset--spacing--50);
}

/* ---------------------------------------------------------------------
 * Réalisations
 * ------------------------------------------------------------------ */

/* Cartes : mêmes bases que les cartes d'articles (hauteur égale, pas de
   tracé décoratif), avec une vignette au lieu de la grande photo (ci-dessous).
   Ligne d'informations masquée si vide. */
.edl-carte-realisation__infos:not(:has(*)) {
	display: none;
}

/* Commune : petit libellé précédé d'un repère de lieu en cuivre,
   cliquable au-dessus du lien de la carte. */
.edl-carte-realisation__commune {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	color: var(--wp--preset--color--texte-secondaire);
	font-size: var(--wp--preset--font-size--petit);
}

.edl-carte-realisation__commune::before {
	content: "";
	flex: none;
	width: 0.95em;
	height: 0.95em;
	background-color: var(--wp--preset--color--cuivre-clair);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.1 7-11.5A7 7 0 0 0 5 9.5C5 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.1 7-11.5A7 7 0 0 0 5 9.5C5 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.edl-carte-realisation__commune a,
.edl-meta-realisation a {
	color: inherit;
	text-decoration: none;
}

.edl-carte-realisation__commune a:hover,
.edl-meta-realisation a:hover {
	color: var(--wp--preset--color--cuivre-clair);
	text-decoration: underline;
}

/* Vignette : l'image mise en avant, petite photo 4:3 recadrée dans le coin
   supérieur droit de la carte. Type, commune et titre restent à sa gauche
   sans jamais passer dessous ; l'extrait reprend toute la largeur sous la
   vignette. Largeur : 120 px au plus (100 px sur mobile), un peu moins dans
   les cartes étroites ; WordPress sert une taille adaptée (functions.php).
   Sans image mise en avant, la carte garde sa présentation habituelle. */
.edl-carte-realisation:has(> .wp-block-post-featured-image) {
	--edl-vignette: clamp(5.5rem, 36%, 7.5rem);
	display: flow-root;
}

.edl-carte-realisation > .wp-block-post-featured-image {
	box-sizing: border-box;
	float: right;
	width: var(--edl-vignette);
	aspect-ratio: 4 / 3;
	margin: 0 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 8px;
	background-color: var(--wp--preset--color--fond);
	transition: border-color 0.18s ease;
}

.edl-carte-realisation > .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

/* Le premier élément à gauche de la vignette s'aligne sur son bord supérieur. */
.edl-carte-realisation > .wp-block-post-featured-image + * {
	margin-top: 0;
}

/* Le titre forme un bloc : il se resserre à gauche de la vignette sur toute
   sa hauteur au lieu de s'enrouler dessous. */
.edl-carte-realisation > .wp-block-post-featured-image ~ .wp-block-post-title {
	display: flow-root;
}

.edl-carte-realisation > .wp-block-post-featured-image ~ .wp-block-post-excerpt {
	clear: right;
}

/* Survol : léger zoom dans le cadre, qui prend la touche cuivre. */
.edl-carte-realisation.edl-carte--lien:hover > .wp-block-post-featured-image,
.edl-carte-realisation.edl-carte--lien:focus-within > .wp-block-post-featured-image {
	border-color: var(--wp--preset--color--cuivre);
}

.edl-carte-realisation.edl-carte--lien:hover > .wp-block-post-featured-image img,
.edl-carte-realisation.edl-carte--lien:focus-within > .wp-block-post-featured-image img {
	transform: scale(1.06);
}

@media (max-width: 599px) {
	.edl-carte-realisation:has(> .wp-block-post-featured-image) {
		--edl-vignette: clamp(5.5rem, 36%, 6.25rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.edl-carte-realisation > .wp-block-post-featured-image,
	.edl-carte-realisation > .wp-block-post-featured-image img {
		transition: none;
	}

	.edl-carte-realisation.edl-carte--lien:hover > .wp-block-post-featured-image img,
	.edl-carte-realisation.edl-carte--lien:focus-within > .wp-block-post-featured-image img {
		transform: none;
	}
}

/* Fiche : « Prestation : … · Commune : … » sous le titre. */
.edl-meta-realisation .wp-block-post-terms {
	margin: 0;
}

.edl-meta-realisation .wp-block-post-terms a {
	color: var(--wp--preset--color--texte);
	font-weight: 600;
}

/* Photo principale des articles et galerie des fiches : coins arrondis,
   aucune déformation, aucun effet. La fiche d'une réalisation n'affiche pas
   son image mise en avant (vignette des cartes, image de partage) : ses
   photos sont celles de son contenu. */
.wp-block-post-featured-image.alignwide img {
	border-radius: 12px;
}

.edl-contenu-realisation .wp-block-gallery .wp-block-image img {
	border-radius: 8px;
}

.edl-contenu-realisation .wp-block-gallery .wp-block-image figcaption {
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------
 * Recharge de véhicules électriques
 * ------------------------------------------------------------------ */

/* Prise renforcée et borne : deux cartes identiques, aucune mise en avant. */
.edl-solution-recharge__puissance {
	font-size: var(--wp--preset--font-size--petit);
}

.edl-solution-recharge__titre {
	color: var(--wp--preset--color--cuivre-clair);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.edl-solution-recharge .edl-solution-recharge__titre {
	margin-bottom: 0;
}

.edl-solution-recharge .edl-solution-recharge__liste {
	margin-top: 0.5rem;
	padding-left: 1.25rem;
}

.edl-solution-recharge__liste li + li {
	margin-top: 0.35em;
}

.edl-solution-recharge__liste li::marker {
	color: var(--wp--preset--color--cuivre-clair);
}

/* Repère pratique sous les critères : filet cuivre décoratif. */
.edl-recharge-repere {
	max-width: var(--wp--style--global--content-size);
	padding-left: 1rem;
	border-left: 2px solid var(--wp--preset--color--cuivre);
}

/* ---------------------------------------------------------------------
 * Page À propos
 * ------------------------------------------------------------------ */

/* Photo de présentation : coins arrondis, bordure fine, sans effet. */
.edl-photo-portrait {
	margin: 0;
}

.edl-photo-portrait img {
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 12px;
}

/* Tant que la photo n'est pas ajoutée (bloc Image vide, non affiché),
   sa colonne disparaît et le texte est centré à la largeur de lecture,
   aligné sur le titre. (Un :has() ne peut pas en contenir un autre.) */
.edl-apropos-qui:not(:has(.edl-apropos-qui__photo img)) > .edl-apropos-qui__photo {
	display: none;
}

@media (min-width: 782px) {
	.edl-apropos-qui:not(:has(.edl-apropos-qui__photo img)) {
		justify-content: center;
	}

	.edl-apropos-qui:not(:has(.edl-apropos-qui__photo img)) > .edl-apropos-qui__texte {
		flex-basis: var(--wp--style--global--content-size) !important;
		flex-grow: 0;
	}
}

/* ---------------------------------------------------------------------
 * Pictogrammes des cartes et des listes
 * ------------------------------------------------------------------ */

/* Prestations : selon la page vers laquelle mène la carte (accueil et page
   Prestations). Les cartes de réalisation, qui ont leur photo, n'en ont pas. */
.edl-carte:not(.edl-carte-article):has(a[href$="/recharge-vehicule-electrique/"]) {
	--edl-picto: var(--edl-picto-borne);
}

.edl-carte:not(.edl-carte-article):has(a[href$="/prestations/videophonie/"]) {
	--edl-picto: var(--edl-picto-videophonie);
}

.edl-carte:not(.edl-carte-article):has(a[href$="/prestations/depannage-electrique/"]) {
	--edl-picto: var(--edl-picto-depannage);
}

.edl-carte:not(.edl-carte-article):has(a[href$="/prestations/renovation-electrique/"]) {
	--edl-picto: var(--edl-picto-maison-circuit);
}

.edl-carte:not(.edl-carte-article):has(a[href$="/prestations/installation-electrique/"]) {
	--edl-picto: var(--edl-picto-prise);
}

.edl-carte:not(.edl-carte-article):has(a[href$="/prestations/mise-en-securite-electrique/"]) {
	--edl-picto: var(--edl-picto-bouclier);
}

/* Thèmes du blog : selon la catégorie (classe ajoutée par functions.php,
   présente aussi sur les cartes « Bientôt », sans lien). */
.edl-carte-theme:has(.edl-theme--recharge-mobilite-electrique) {
	--edl-picto: var(--edl-picto-voiture);
}

.edl-carte-theme:has(.edl-theme--videophonie-interphonie) {
	--edl-picto: var(--edl-picto-videophonie);
}

.edl-carte-theme:has(.edl-theme--securite-conformite) {
	--edl-picto: var(--edl-picto-bouclier);
}

.edl-carte-theme:has(.edl-theme--renovation-installation) {
	--edl-picto: var(--edl-picto-maison-circuit);
}

.edl-carte-theme:has(.edl-theme--depannage-entretien) {
	--edl-picto: var(--edl-picto-depannage);
}

.edl-carte-theme:has(.edl-theme--conseils-economies-energie) {
	--edl-picto: var(--edl-picto-ampoule);
}

/* Thème sans article : filigrane conservé, plus effacé, comme la carte,
   et sans renforcement au survol (carte non cliquable). */
.edl-carte-theme:has(.edl-theme-vide)::after,
.edl-carte-theme:has(.edl-theme-vide):is(:hover, :focus-within)::after {
	opacity: 0.08;
}

/* Recharge : les deux solutions, dans l'ordre de la composition. */
.edl-solution-recharge:nth-child(1) {
	--edl-picto: var(--edl-picto-prise);
}

.edl-solution-recharge:nth-child(2) {
	--edl-picto: var(--edl-picto-borne);
}

/* Zone d'intervention. */
.edl-zone {
	--edl-picto: var(--edl-picto-pin);
}

/* À propos : qualifications et compétences (une classe par carte, pour
   qu'une carte supprimée ne décale pas les pictogrammes des autres). */
.edl-qualification--pro {
	--edl-picto: var(--edl-picto-certificat);
}

.edl-qualification--irve {
	--edl-picto: var(--edl-picto-borne);
}

.edl-qualification--experience {
	--edl-picto: var(--edl-picto-circuit);
}

.edl-qualification--assurances {
	--edl-picto: var(--edl-picto-bouclier);
}

/* Engagements, dans l'ordre de la composition : sécurité, travail soigné,
   conseil adapté, clarté. */
.edl-engagement:nth-child(1) {
	--edl-picto: var(--edl-picto-bouclier);
}

.edl-engagement:nth-child(2) {
	--edl-picto: var(--edl-picto-equerre);
}

.edl-engagement:nth-child(3) {
	--edl-picto: var(--edl-picto-bulle);
}

.edl-engagement:nth-child(4) {
	--edl-picto: var(--edl-picto-document);
}

/* Critères de choix de la recharge, dans l'ordre de la composition :
   kilométrage, énergie, temps, véhicule, installation, nombre de véhicules. */
.edl-critere:nth-child(1) {
	--edl-picto: var(--edl-picto-jauge);
}

.edl-critere:nth-child(2) {
	--edl-picto: var(--edl-picto-batterie);
}

.edl-critere:nth-child(3) {
	--edl-picto: var(--edl-picto-horloge);
}

.edl-critere:nth-child(4) {
	--edl-picto: var(--edl-picto-voiture);
}

.edl-critere:nth-child(5) {
	--edl-picto: var(--edl-picto-tableau);
}

.edl-critere:nth-child(6) {
	--edl-picto: var(--edl-picto-voitures);
}

/* ---------------------------------------------------------------------
 * Contact et formulaire de demande de devis
 * ------------------------------------------------------------------ */

/* Horaires : une ligne par plage, comme saisies dans Réglages › Coordonnées. */
.edl-horaires {
	white-space: pre-line;
}

/* Information non renseignée (ou plugin inactif) : titre et texte masqués. */
.edl-contact__bloc:has(> p:empty) {
	display: none;
}

/* Formulaire (fourni par EDL Core, qui en assure la mise en page) :
   couleurs de la direction artistique. Erreurs en corail clair
   (7,69:1 sur les cartes), distinct du cuivre décoratif. */
.edl-demande {
	--edl-couleur-erreur: #ff9e8f;
	color-scheme: dark;
}

.edl-champ__requis,
.edl-champ__aide,
.edl-formulaire__note {
	color: var(--wp--preset--color--texte-secondaire);
}

/* Champs plus sombres que la carte qui les contient. */
.edl-champ :where(input, select, textarea) {
	background-color: var(--wp--preset--color--fond);
	transition: border-color 0.18s ease;
}

.edl-champ :where(input, select, textarea):hover {
	border-color: var(--wp--preset--color--bleu-clair);
}

.edl-champ :where(input, select, textarea):focus-visible {
	border-color: var(--wp--preset--color--accent);
	outline-offset: 1px;
}

/* Remplissage automatique du navigateur : garder le fond sombre. */
.edl-champ input:-webkit-autofill {
	-webkit-text-fill-color: var(--wp--preset--color--texte);
	box-shadow: 0 0 0 100px var(--wp--preset--color--fond) inset;
	caret-color: var(--wp--preset--color--texte);
}

.edl-formulaire__erreurs {
	background-color: rgb(255 158 143 / 0.08);
}

/* Confirmation : cadre d'accent, petit tracé cuivre comme les cartes. */
.edl-demande--envoyee {
	border-color: var(--wp--preset--color--accent);
	background-color: rgb(174 230 255 / 0.06);
}

.edl-demande--envoyee::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-bottom: 1rem;
	border-radius: 2px;
	background-color: var(--wp--preset--color--cuivre);
}

.edl-demande__titre {
	font-size: var(--wp--preset--font-size--moyen);
}

/* EDL Core inactif : message de repli à la place du formulaire. */
.edl-formulaire-indisponible {
	color: var(--wp--preset--color--texte-secondaire);
}

@media (prefers-reduced-motion: reduce) {
	.edl-champ :where(input, select, textarea) {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * Pied de page
 * ------------------------------------------------------------------ */

.edl-pied-titre {
	margin: 0;
	font-weight: 600;
}

/* Bouton présenté comme un simple lien (numéro de téléphone). */
:root .edl-bouton-lien > .wp-block-button__link {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--wp--preset--color--bleu-clair);
	font-size: var(--wp--preset--font-size--moyen);
	text-decoration: underline;
}

:root .edl-bouton-lien > .wp-block-button__link:hover {
	color: var(--wp--preset--color--accent);
	box-shadow: none;
}

/* Information non renseignée (ou plugin inactif) : bloc masqué. */
.edl-adresse:empty {
	display: none;
}

.edl-liens-legaux {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

/* ---------------------------------------------------------------------
 * Barre d'appel mobile
 * ------------------------------------------------------------------ */

/* Sous 600px (seuil du menu natif), les boutons de l'en-tête laissent
   la place à une barre fixée en bas d'écran : « Appeler » et
   « Demander un devis », de même hauteur même si un libellé passe
   sur deux lignes. */
.edl-barre-appel {
	display: none;
}

@media (max-width: 599px) {
	/* Sélecteur renforcé : la mise en page flex de WordPress
	   (body .is-layout-flex) l'emporterait sinon. */
	:root .wp-block-buttons.edl-entete-actions {
		display: none;
	}

	/* Logo plus compact sur mobile (80px sur ordinateur, réglé dans le bloc). */
	.edl-marque .wp-block-site-logo img {
		width: 56px;
		height: auto;
	}

	.edl-barre-appel {
		display: block;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 50;
		padding: 0.625rem clamp(1rem, 4vw, 2rem) calc(0.625rem + env(safe-area-inset-bottom));
		border-top: 1px solid var(--wp--preset--color--bordure);
		box-shadow: 0 -8px 24px rgb(0 0 0 / 0.35);
	}

	.edl-barre-appel .wp-block-buttons {
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0.5rem;
	}

	.edl-barre-appel .wp-block-button {
		display: flex;
		flex: 1 1 0;
	}

	.edl-barre-appel .wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding-inline: 0.5em;
	}

	/* Réserve la hauteur de la barre pour ne jamais masquer le bas de page. */
	.wp-site-blocks {
		padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
	}
}