/*
Theme Name:   Ecopub
Theme URI:    https://www.ecopub.fr
Description:  Thème enfant Kadence pour Ecopub — enseignes, signalétique, adhésifs, covering véhicules et PLV à Montpellier. Catalogue WooCommerce en mode devis.
Author:       Ecopub
Version:      0.3.0
Template:     kadence
Text Domain:  ecopub
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==================================================================
   1. Jetons de design
   Source : RELANCE-WP-ECOPUB/05-design/DIRECTION-DESIGN.md
   Fond blanc · design aéré · noir/blanc/orange · AUCUN BLEU
   Boutons à angles adoucis, inspirés des courbes du logo Ecopub.
   ================================================================== */

/* ------------------------------------------------------------------
   Palette Kadence reecrite aux couleurs Ecopub.

   Le modele de demarrage importe a ecrit une palette BLEUE (#2B6CB0) dans
   les neuf emplacements de Kadence. DIRECTION-DESIGN.md l'interdit
   explicitement : « Aucun bleu comme accent ».

   On redefinit ici les variables que Kadence emet, plutot que de reecrire
   son option en base : effet immediat, aucun PHP, rien a casser. Le
   `!important` est necessaire car Kadence imprime les siennes en ligne
   dans le <head>.
   ------------------------------------------------------------------ */

html:root {
	--global-palette1: #EF7D00 !important;  /* etait #2B6CB0, bleu */
	--global-palette2: #D26D00 !important;
	--global-palette3: #15110D !important;
	--global-palette4: #15110D !important;
	--global-palette5: #3A3630 !important;
	--global-palette6: #6E6A65 !important;
	--global-palette7: #E7E3DD !important;
	--global-palette8: #F6F4F1 !important;
	--global-palette9: #FFFFFF !important;

	--global-palette-btn-bg: #EF7D00 !important;
	--global-palette-btn-bg-hover: #D26D00 !important;
	--global-palette-btn: #FFFFFF !important;
	--global-palette-btn-hover: #FFFFFF !important;
}

:root {
	--ep-primary: #EF7D00;
	--ep-primary-hover: #D26D00;
	--ep-primary-soft: #FDEBD6;
	--ep-dark: #15110D;
	--ep-muted: #F6F4F1;
	--ep-muted-foreground: #6E6A65;
	--ep-border: #E7E3DD;
	--ep-white: #FFFFFF;

	/* Typographie reprise du modele de demarrage : pile systeme.
	   Aucun fichier de police a telecharger, aucun appel a Google Fonts,
	   donc aucun probleme RGPD et le rendu le plus rapide possible.
	   Remplace Poppins/Inter prevus au plan — decision d'Octavian. */
	--ep-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	--ep-font-body: var(--ep-font-heading);

	--ep-radius-pill: 999px;
	--ep-radius-button: 8px;
	--ep-button-height: 50px;

	/* Gouttière de lecture, partagée par le contenu et les bandeaux
	   pleine largeur. Une seule source, sinon les colonnes se décalent. */
	--ep-gouttiere: clamp(1.15rem, 4vw, 2rem);
	/* Largeur de la colonne de mise en page : celle de l'en-tête et des
	   sections éditoriales (92rem moins 2 × 5rem de marge). Les gabarits
	   de page s'y alignent pour que le logo, les titres et les photos
	   tombent sur la même verticale. */
	--ep-shell: 82rem;
	--ep-radius-card: 14px;

	--ep-shadow-card: 0 1px 2px rgba(21, 17, 13, .04), 0 8px 24px rgba(21, 17, 13, .06);
	--ep-shadow-card-hover: 0 2px 4px rgba(21, 17, 13, .06), 0 16px 40px rgba(21, 17, 13, .10);

	--ep-ease: cubic-bezier(.2, .7, .3, 1);

	--ep-space-xs: .5rem;
	--ep-space-s: 1rem;
	--ep-space-m: 2rem;
	--ep-space-l: 3.5rem;
	--ep-space-xl: 6rem;
}

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

body {
	font-family: var(--ep-font-body);
	color: var(--ep-dark);
	background-color: var(--ep-white);
	/* 17px / 1.6 — valeurs du modele de demarrage */
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title {
	font-family: var(--ep-font-heading);
	color: var(--ep-dark);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.015em;
}

/* Echelle typographique mesuree sur le modele de demarrage :
   corps 17px, interligne 1.6, h1 59.5px/700, h2 28px/700.
   On reprend ces valeurs, en fluide pour le mobile. */
h1 { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.7rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 1.75rem); }
h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.35rem); }

/* Longueur de ligne confortable. Appliquée aussi aux listes : sinon un
   paragraphe s'arrête à 68 caractères et la liste qui le suit court sur
   toute la largeur, ce qui casse la colonne de lecture. */
p, .entry-content > ul, .entry-content > ol { max-width: 68ch; }

a {
	color: var(--ep-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: color .18s var(--ep-ease);
}

a:hover { color: var(--ep-dark); }

/* Section sur fond neutre */
.ep-section--muted {
	background-color: var(--ep-muted);
	padding-block: var(--ep-space-xl);
}

/* Sur-titre orange au-dessus des H2 */
.ep-eyebrow {
	display: inline-block;
	font-family: var(--ep-font-heading);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ep-primary);
	margin-bottom: var(--ep-space-xs);
}

/* ==================================================================
   3. Boutons — système d'actions cohérent, sans effet e-commerce
   ================================================================== */

.ast-button,
.button,
input[type="submit"],
.wp-block-button__link,
.kb-button,
.ep-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	box-sizing: border-box;
	min-height: var(--ep-button-height);
	max-width: 100%;
	font-family: var(--ep-font-heading);
	font-weight: 750;
	font-size: .94rem;
	line-height: 1.2;
	letter-spacing: .005em;
	border: 1px solid var(--ep-primary);
	border-radius: var(--ep-radius-button);
	background-color: var(--ep-primary);
	color: var(--ep-white);
	padding: .8rem 1.35rem;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s var(--ep-ease),
	            border-color .18s var(--ep-ease),
	            color .18s var(--ep-ease),
	            transform .18s var(--ep-ease);
}

.ast-button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.kb-button:hover,
.ep-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--ep-primary-hover);
	border-color: var(--ep-primary-hover);
	color: var(--ep-white);
	transform: translateY(-1px);
}

/* Une seule marque directionnelle pour les vraies actions. Elle reste
   décorative et se déplace légèrement au survol, sans bruit visuel. */
a.ep-btn::after,
button.ep-btn::after,
.wp-block-button__link::after {
	content: "↗";
	display: inline-block;
	font-size: .92em;
	line-height: 1;
	transition: transform .18s var(--ep-ease);
}

button.ep-btn::after { content: "→"; }

.ep-hero__actions,
.ep-home-actions,
.ep-editorial-actions,
.ep-form-submit {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .75rem;
}

.entry-content .wp-block-buttons > .wp-block-button { margin: 0; }

a.ep-btn:hover::after,
button.ep-btn:hover::after,
.wp-block-button__link:hover::after { transform: translate(2px, -2px); }

button.ep-btn:hover::after { transform: translateX(2px); }

:where(.ep-btn, .wp-block-button__link, input[type="submit"], .woocommerce a.button):focus-visible {
	outline: 3px solid rgba(239, 125, 0, .3);
	outline-offset: 3px;
	border-radius: var(--ep-radius-button);
}

/* Un bouton ne s'étire jamais sur toute la largeur : dans un bloc centré,
   Kadence lui donne width:100% et il devient une barre orange de 1200 px. */
.entry-content .wp-block-button__link,
.entry-content .ep-btn,
.ep-cta .ep-btn,
p > .ep-btn {
	width: auto;
	max-width: max-content;
}

.entry-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	justify-content: flex-start;
}

.ep-cta p:last-child,
.ep-cta .wp-block-buttons,
.ep-cta-band .wp-block-buttons,
.ep-home-cta .wp-block-buttons,
.ep-editorial-cta .wp-block-buttons,
.ep-portfolio-cta .wp-block-buttons { justify-content: center; }

/* Bouton secondaire — contour seul */
.ep-btn--ghost {
	background-color: transparent;
	border-color: var(--ep-dark);
	color: var(--ep-dark);
}

.ep-btn--ghost:hover {
	background-color: var(--ep-dark);
	border-color: var(--ep-dark);
	color: var(--ep-white);
}

/* ==================================================================
   3bis. Habillage du parent Kadence
   Kadence dessine son propre chrome — en-tête, navigation, pied de page —
   à partir de SES options. On l'habille ici en CSS plutôt qu'en filtrant
   ses tableaux d'options : un filtre mal formé provoque une erreur fatale,
   une règle CSS ne casse rien. Décision du 17/08/2026, après incident.
   ================================================================== */

/* Plus aucun bleu : règle explicite de DIRECTION-DESIGN.md */
.site a:not(.wp-block-button__link):not(.ep-btn):not(.ep-zone):not(.ep-service):not(.ep-card--lien):not(.ep-tuile__lien) {
	color: var(--ep-primary);
}

.site a:not(.wp-block-button__link):not(.ep-btn):hover {
	color: var(--ep-dark);
}

/* En-tête : fond blanc, filet discret, pas d'ombre */
#main-header,
.site-header-wrap,
.site-header-row-container-inner {
	background: var(--ep-white);
	box-shadow: none;
}

#main-header { border-bottom: 1px solid var(--ep-border); }

/* Navigation principale

   Kadence colore tous les liens d'en-tête avec la couleur 1 de sa palette,
   qui est désormais notre orange. Résultat : un menu entièrement orange,
   illisible et sans hiérarchie. Ses règles sont injectées en CSS global
   inline, plus spécifiques que les nôtres — d'où les !important ci-dessous,
   volontairement limités aux seules couleurs de navigation. */
.header-navigation .header-menu-container > ul > li > a,
.header-navigation .header-menu-container > ul > li > a .nav-drop-title-wrap {
	font-family: var(--ep-font-heading);
	font-weight: 500;
	color: var(--ep-dark) !important;
}

.header-navigation .header-menu-container > ul > li > a:hover,
.header-navigation .header-menu-container > ul > li > a:hover .nav-drop-title-wrap,
.header-navigation .header-menu-container > ul > li.current-menu-item > a,
.header-navigation .header-menu-container > ul > li.current-menu-ancestor > a {
	color: var(--ep-primary) !important;
}

/* Déroulants simples — Secteurs, Zones, Guides.

   Kadence dessine ses déroulants avec la couleur de fond de sa palette,
   qui est notre noir (#15110D). En passant le texte en sombre pour
   corriger le « tout orange », on obtenait du sombre sur sombre : les
   sept entrées de Secteurs étaient invisibles, seule celle survolée
   apparaissait. Le fond doit être posé explicitement, pas hérité. */
.header-navigation .header-menu-container ul.sub-menu {
	background-color: var(--ep-white) !important;
}

.header-navigation .header-menu-container ul.sub-menu > li,
.header-navigation .header-menu-container ul.sub-menu > li > a {
	background-color: transparent !important;
	color: var(--ep-dark) !important;
}

/* Même taille de texte que le panneau Prestations, pour que les deux
   familles de déroulants se ressemblent. */
.header-navigation .header-menu-container > ul > li:not(.ep-mega) > ul.sub-menu > li > a {
	font-size: .9375rem;
	padding: .6rem 1.1rem !important;
	min-height: 40px;
	display: flex;
	align-items: center;
}

.header-navigation .header-menu-container ul.sub-menu > li > a:hover,
.header-navigation .header-menu-container ul.sub-menu > li > a:focus {
	color: var(--ep-primary) !important;
	background-color: var(--ep-primary-soft) !important;
}

/* Les séparateurs internes de Kadence sont supprimés pour un menu épuré */
.header-navigation .header-menu-container ul.sub-menu > li {
	border: 0 !important;
	border-color: transparent !important;
}

/* Le trait actif sous l'entrée de menu, en orange */
.header-navigation ul li.current-menu-item > a::after,
.header-navigation ul li > a:hover::after {
	background-color: var(--ep-primary);
}

/* --- Gabarit commun des entrées de menu ---------------------------
   Mesuré le 20/08/2026 : les entrées faisaient 48 px de haut et le CTA
   71 px, avec des rembourrages tous différents. Un seul gabarit ici,
   pour que la barre se lise comme une ligne et non comme un assemblage.
   44 px : la cible tactile minimale du WCAG 2.5.5. */
.header-navigation .header-menu-container > ul > li > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 .85rem !important;
	font-size: 1rem;
	line-height: 1.2;
	white-space: nowrap;
}

/* Entre 1025 px — seuil où Kadence rend la barre de bureau — et environ
   1200 px, neuf entrées plus un bouton ne tiennent pas sur une ligne :
   « Contact » passait à la ligne. On resserre plutôt que de laisser
   l'en-tête se dédoubler. */
/* Dix entrées ne tiennent pas sur une ligne, même à 1 920 px : la barre
   en réclame 972 et la colonne de navigation de Kadence est plus étroite
   que la fenêtre. Plutôt que de rapetisser le texte jusqu'à l'illisible,
   on retire « Accueil » de la barre de bureau : le logo mène déjà à
   l'accueil, c'est l'usage. L'entrée reste dans le tiroir mobile, où la
   place ne manque pas et où le logo est moins évident.
   Vérifié à 1 025, 1 100, 1 300, 1 500, 1 600 et 1 920 px : une ligne. */
@media (min-width: 1025px) {
	.header-navigation .header-menu-container > ul > li.ep-nav-accueil {
		display: none;
	}
}

@media (min-width: 1025px) and (max-width: 1500px) {
	/* Mesuré à 1060 px : la barre réclamait 744 px pour 723 disponibles.
	   Vingt et un pixels manquaient, d'où le retour à la ligne. */
	.header-navigation .header-menu-container > ul > li > a {
		padding: 0 .38rem !important;
		font-size: .9rem;
	}
	.header-navigation .header-menu-container > ul > li.ep-nav-cta > a {
		padding: 0 .9rem !important;
		margin-left: .35rem;
	}
}

/* Juste au-dessus du seuil, l'espace est encore plus compté. */
@media (min-width: 1025px) and (max-width: 1090px) {
	.header-navigation .header-menu-container > ul > li > a {
		padding: 0 .25rem !important;
		font-size: .85rem;
	}
	.header-navigation .header-menu-container > ul > li.ep-nav-cta > a {
		padding: 0 .8rem !important;
	}
}

/* --- Le CTA -------------------------------------------------------
   Il portait aussi la classe `ep-btn`, qui déclenche la règle générique
   des boutons (§3). Le li ET le lien recevaient donc fond et rembourrage :
   une pastille de 134 x 71 px, deux fois plus haute que ses voisines.
   La classe a été retirée du menu ; le style vit uniquement ici, et sur
   le lien — jamais sur le li. */
.header-navigation .header-menu-container > ul > li.ep-nav-cta > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	background: var(--ep-primary);
	color: var(--ep-white) !important;
	border-radius: var(--ep-radius-button);
	padding: 0 1.35rem !important;
	margin-left: .75rem;
	font-weight: 600;
	transition: background-color .18s var(--ep-ease);
}

.header-navigation .header-menu-container > ul > li.ep-nav-cta > a:hover {
	background: var(--ep-primary-hover);
	color: var(--ep-white) !important;
}

/* Le li reste une simple case du menu : ni fond, ni rembourrage. */
.header-navigation .header-menu-container > ul > li.ep-nav-cta {
	background: none;
	padding: 0;
	border: 0;
}

/* Le soulignement actif n'a pas de sens sur un bouton plein */
.header-navigation li.ep-nav-cta > a::after { display: none !important; }

/* ------------------------------------------------------------------
   Mega-menu « Prestations »

   Kadence Pro fournit un mega-menu ; nous sommes sur le thème libre.
   Plutôt que d'ajouter du JavaScript, on reprend le sous-menu que
   WordPress génère déjà (7 familles, 27 sous-services) et on le met
   en grille. Le mécanisme d'ouverture au survol reste celui de
   Kadence : on ne touche qu'à la mise en page interne.

   Portée : desktop uniquement. Sous 1025 px, le tiroir mobile doit
   garder son accordéon natif, sinon les 27 entrées s'affichent
   toutes en même temps.
   ------------------------------------------------------------------ */
@media (min-width: 1025px) {

	/* Le li porte déjà position:relative chez Kadence : le panneau
	   s'ancre dessus. On le cale à gauche et on borne sa largeur pour
	   qu'il ne sorte jamais de la fenêtre. */
	/* Centré sous « Prestations » plutôt qu'aligné à gauche : avec 64 rem
	   de large et l'entrée placée au tiers de la barre, un alignement à
	   gauche faisait sortir le panneau de la fenêtre à droite. */
	.header-navigation li.ep-mega > ul.sub-menu {
		left: 50%;
		transform: translateX(-50%);
		width: min(64rem, calc(100vw - 4rem));
		max-width: none;
		/* Kadence masque ses déroulants par display:none. En posant
		   display:grid ici sans condition, le panneau restait ouvert en
		   permanence : on rétablit l'état fermé et on ne passe en grille
		   qu'au survol ou au focus clavier. */
		display: none;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.75rem 2rem;
		padding: 2rem;
		background: var(--ep-white, #fff);
		border: 1px solid var(--ep-border);
		border-radius: 12px;
		box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .28);
	}

	.header-navigation li.ep-mega:hover > ul.sub-menu,
	.header-navigation li.ep-mega:focus-within > ul.sub-menu,
	.header-navigation li.ep-mega.menu-item--toggled-on > ul.sub-menu {
		display: grid;
	}

	/* Chaque famille devient une colonne, plus un sous-menu déroulant */
	.header-navigation li.ep-mega > ul.sub-menu > li {
		position: static;
		width: auto;
		border: 0;
	}

	.header-navigation li.ep-mega > ul.sub-menu > li > a {
		display: block;
		padding: 0 0 .5rem;
		font-size: .8125rem;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--ep-dark);
		border-bottom: 2px solid var(--ep-primary);
		margin-bottom: .6rem;
	}

	.header-navigation li.ep-mega > ul.sub-menu > li > a:hover {
		color: var(--ep-primary);
		background: transparent;
	}

	/* Le 3e niveau n'est plus un déroulant : il fait partie du panneau */
	.header-navigation li.ep-mega ul.sub-menu ul.sub-menu {
		position: static;
		display: block;
		width: auto;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		box-shadow: none;
		border: 0;
		background: transparent;
		padding: 0;
		margin: 0;
	}

	.header-navigation .header-menu-container li.ep-mega ul.sub-menu ul.sub-menu > li > a {
		padding: .3rem 0;
		font-size: .9375rem;
		font-weight: 400;
		color: var(--ep-muted-foreground) !important;
		text-transform: none;
		letter-spacing: 0;
		border: 0;
	}

	.header-navigation .header-menu-container li.ep-mega ul.sub-menu ul.sub-menu > li > a:hover {
		color: var(--ep-primary) !important;
		background: transparent;
	}

	/* Les chevrons du 3e niveau n'ont plus de sens : rien ne se déplie */
	.header-navigation li.ep-mega ul.sub-menu > li > a .dropdown-nav-toggle,
	.header-navigation li.ep-mega ul.sub-menu > li > a > svg { display: none; }

	/* Easypanneau : gamme distincte, on la détache visuellement */
	.header-navigation .header-menu-container li.ep-mega > ul.sub-menu > li.ep-mega-star > a {
		color: var(--ep-primary) !important;
	}

	.header-navigation li.ep-mega > ul.sub-menu > li.ep-mega-star > a::before {
		content: "\2605\00a0";
	}

	/* Les autres déroulants restent simples et épurés, sans bordure grise */
	.header-navigation .header-menu-container > ul > li:not(.ep-mega) > ul.sub-menu {
		border: 0 !important;
		border-radius: var(--ep-radius-card, 2px);
		padding-block: .5rem;
		box-shadow: 0 16px 40px -8px rgba(23, 22, 19, 0.12);
	}
}

/* --- Écrans tactiles larges ---------------------------------------
   Tablette en paysage, portable à écran tactile : la navigation de
   bureau s'affiche, mais il n'y a pas de survol. Un doigt qui touche
   « Prestations » suit le lien au lieu d'ouvrir le panneau, et le
   visiteur ne voit jamais les 27 sous-services.

   Kadence fournit un bouton de dépliage à côté de chaque entrée
   parente ; il suffit de le rendre visible et confortable au doigt,
   et de laisser le panneau s'ouvrir au focus. */
@media (min-width: 1025px) and (hover: none) {

	.header-navigation .header-menu-container > ul > li > a .dropdown-nav-toggle,
	.header-navigation .header-menu-container > ul > li > a > svg {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		margin-left: .1rem;
	}

	/* Le panneau reste ouvert tant qu'un élément à l'intérieur a le focus */
	.header-navigation li.ep-mega:focus-within > ul.sub-menu { display: grid; }
	.header-navigation .header-menu-container > ul > li:focus-within > ul.sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

/* ------------------------------------------------------------------
   Menu mobile (tiroir latéral)

   Kadence livre le tiroir sur fond sombre. Notre texte de navigation
   étant #15110D, les entrées devenaient presque invisibles — constaté
   en capture le 19/08/2026. Le reste du site est clair : on aligne le
   tiroir dessus plutôt que d'éclaircir le texte.
   ------------------------------------------------------------------ */
#mobile-drawer .drawer-inner,
#mobile-drawer .drawer-content,
.popup-drawer .drawer-inner {
	background-color: var(--ep-white) !important;
}

#mobile-drawer .drawer-header .drawer-toggle,
#mobile-drawer .drawer-toggle .toggle-close {
	color: var(--ep-dark) !important;
}

.mobile-navigation ul li a { color: var(--ep-dark) !important; }
.mobile-navigation ul li:not(.ep-nav-cta):not(.ep-btn) a:hover,
.mobile-navigation ul li:not(.ep-nav-cta):not(.ep-btn).current-menu-item > a {
	color: var(--ep-primary) !important;
}

.mobile-navigation ul li { border-bottom: 1px solid var(--ep-border); }

/* Les chevrons d'accordéon reprennent la couleur du texte : sur fond
   blanc, le gris clair d'origine ne se voyait plus. */
.mobile-navigation .drawer-nav-drop-wrap,
.mobile-navigation .drawer-nav-drop-wrap svg { color: var(--ep-dark); opacity: 1; }

/* Le bouton de dépliage fait 37 px de large : sous le seuil tactile.
   C'est lui qui porte le gestionnaire de clic, pas le div qui l'entoure —
   utile à savoir pour tout test automatisé du tiroir. */
.mobile-navigation button.drawer-sub-toggle {
	min-width: 44px;
	min-height: 44px;
}

/* Le CTA garde son aspect bouton, texte blanc compris.
   Sans largeur ni rembourrage explicites, le lien héritait d'une boîte
   quasi carrée et le rayon « pill » le transformait en pastille ronde. */
.mobile-navigation li.ep-nav-cta > a,
.mobile-navigation li.ep-btn > a {
	display: block;
	width: auto;
	padding: .85rem 1.75rem;
	background: var(--ep-primary);
	color: var(--ep-white) !important;
	border-radius: var(--ep-radius-button);
	text-align: center;
	font-weight: 600;
	margin: 1.25rem 0;
}

/* Les CTA sont aussi des liens. Ils ne doivent pas hériter du texte orange
   de la navigation au survol, sinon le contraste disparaît sur leur fond. */
.mobile-navigation li.ep-nav-cta > a:hover,
.mobile-navigation li.ep-btn > a:hover {
	background: var(--ep-primary-hover);
	color: var(--ep-white) !important;
}

/* Le li du tiroir est en flex : sans width:100% le bouton se réduit
   à la largeur du mot et le rayon pill en fait une pastille. */
.mobile-navigation li.ep-nav-cta,
.mobile-navigation li.ep-btn { border-bottom: 0; width: 100%; }

/* Un menu se lit, il ne se contemple pas : alignement à gauche, taille
   de texte du corps. Kadence centrait les entrées en 14 px, ce qui
   oblige l'œil à repartir du milieu à chaque ligne. */
/* PIÈGE DE STRUCTURE : pour une entrée qui a des enfants, le lien n'est
   pas un enfant direct du <li>. Kadence l'enveloppe dans un
   `div.drawer-nav-drop-wrap` avec le bouton de dépliage. Un sélecteur
   `.menu > li > a` laisse donc « Prestations » et « Secteurs » centrés
   pendant que « Accueil » et « Contact » s'alignent à gauche. */
.mobile-navigation .menu li > a,
.mobile-navigation .drawer-nav-drop-wrap > a {
	justify-content: flex-start !important;
	text-align: left;
}

.mobile-navigation .menu > li > a,
.mobile-navigation .menu > li > .drawer-nav-drop-wrap > a {
	font-size: 1.0625rem;
	padding-inline: 1.25rem !important;
}

/* Le tiroir mobile porte 45 entrées : on hiérarchise par le retrait
   et la graisse, sinon les trois niveaux se confondent. */
.mobile-navigation ul.sub-menu > li > a,
.mobile-navigation ul.sub-menu > li > .drawer-nav-drop-wrap > a {
	padding-left: 2.25rem !important;
	font-size: 1rem;
}

.mobile-navigation ul.sub-menu ul.sub-menu > li > a,
.mobile-navigation ul.sub-menu ul.sub-menu > li > .drawer-nav-drop-wrap > a {
	padding-left: 3.5rem !important;
	font-size: .9375rem;
	color: var(--ep-muted-foreground) !important;
}
.mobile-navigation .menu-item-has-children > a { font-weight: 600; }

/* ------------------------------------------------------------------
   Photos de réalisations dans le contenu

   Une photo de chantier n'est pas une illustration décorative : c'est
   la preuve du savoir-faire. On lui donne de la place, un cadre net et
   une légende lisible, plutôt qu'une vignette perdue dans le texte.
   ------------------------------------------------------------------ */

.entry-content .ep-photo {
	margin-block: 2.5rem;
	max-width: none;
}

.entry-content .ep-photo img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .45);
}

.entry-content .ep-photo figcaption,
.entry-content .ep-galerie figcaption {
	margin-top: .6rem;
	font-size: .9rem;
	color: var(--ep-muted-foreground);
	text-align: left;
	font-style: normal;
}

.entry-content .ep-galerie {
	margin-block: 2.5rem;
	gap: 1.25rem;
}

.entry-content .ep-galerie img {
	border-radius: 10px;
}

/* Les photos prises en portrait arrivent parfois couchées : le champ
   ecopub_rotation du catalogue signale les cas à corriger à la source,
   on ne redresse pas en CSS — cela fausserait le cadrage. */

@media (max-width: 768px) {
	.entry-content .ep-photo,
	.entry-content .ep-galerie { margin-block: 1.75rem; }
	.entry-content .ep-galerie { gap: .75rem; }
}

/* ------------------------------------------------------------------
   Contenu du pied de page
   Quatre colonnes : présentation, prestations, zones, coordonnées.
   Alimentées par les widgets footer1 à footer4.
   ------------------------------------------------------------------ */

.ep-footer-col { max-width: 22rem; }

.ep-footer-titre {
	font-family: var(--ep-font-heading);
	font-weight: 600;
	font-size: 1rem;
	color: var(--ep-white);
	margin: 0 0 .9rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--ep-primary);
	display: inline-block;
}

.ep-footer-col p {
	color: rgba(255, 255, 255, .72);
	font-size: .95rem;
	line-height: 1.7;
	margin: 0 0 .8rem;
	max-width: none;
}

.ep-footer-liens {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ep-footer-liens li { margin-bottom: .15rem; }

.ep-footer-liens a,
.ep-footer-contact a {
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	font-size: .95rem;
	transition: color .18s var(--ep-ease);
}

.ep-footer-liens a:hover,
.ep-footer-contact a:hover { color: var(--ep-primary); }

/* Cible de pointage — mesuré à 20 px de haut le 20/08/2026, en dessous
   des 24 px du critère WCAG 2.5.8. On élargit la zone cliquable sans
   grossir le texte : le lien devient un bloc, le rembourrage vertical
   fait le reste. Sur les largeurs tactiles, la règle de la section
   responsive porte ce minimum à 44 px. */
.ep-footer-liens a,
.ep-footer-contact a,
.site-footer .wp-block-list a,
.site-footer .menu a {
	display: inline-block;
	min-height: 24px;
	padding-block: .1rem;
}

.ep-footer-col .ep-btn {
	margin-top: .5rem;
	padding: .7rem 1.5rem;
	font-size: .95rem;
}

/* Les colonnes du pied de page respirent */
.site-top-footer-inner-wrap,
.site-middle-footer-inner-wrap {
	gap: 2.5rem;
	padding-block: 3.5rem 2rem;
}

/* Pied de page sur fond noir */
#colophon,
.site-footer-wrap,
.site-bottom-footer-wrap,
.site-middle-footer-wrap {
	background: var(--ep-dark);
	color: rgba(255, 255, 255, .78);
}

#colophon a { color: rgba(255, 255, 255, .82); }
#colophon a:not(.ep-btn):hover { color: var(--ep-primary); }
#colophon a.ep-btn:hover { color: var(--ep-white); }
#colophon h2, #colophon h3, #colophon .widget-title { color: var(--ep-white); }

/* Barre de titre de page : neutralisée si Kadence la rend malgré tout */
.entry-hero-container-inner,
.page-hero-section {
	background: var(--ep-muted);
}

/* Chaque page porte désormais son H1 dans le hero du modèle de démarrage.
   La barre de titre Kadence en ajoute un second, et pousse le hero sous
   la ligne de flottaison. L'audit reproche précisément ce défaut au site
   en production (« 9 pages sur 13 sans H1 valide »). On la retire partout.

   Note : masquer ne suffit pas pour le SEO — un H1 en display:none reste
   lu. La suppression à la source est dans inc/kadence-settings.php, et
   demande le redémarrage du conteneur (OPcache). */
.page .entry-hero-container,
.page .page-hero-section,
.page .entry-hero-container-inner,
.single .entry-hero-container {
	display: none;
}

/* Le conteneur qui portait la barre garde sa marge : le hero descendrait
   d'une centaine de pixels sous l'en-tête, avec une bande blanche au-dessus. */
.page #primary,
.page .content-area,
.page .site-content,
.page .content-container {
	padding-top: 0;
	margin-top: 0;
}

.page .entry-content > .wp-block-kadence-rowlayout:first-child {
	margin-top: 0;
}

/* ------------------------------------------------------------------
   Sections pleine largeur

   Le contenu des pages est « encadré » par défaut dans Kadence : les
   sections rowlayout du modèle se retrouvent dans une colonne étroite,
   avec du blanc autour. Le hero perd tout son effet.

   On fait sortir les rowlayout de premier niveau de leur conteneur.
   `calc(50% - 50vw)` les recentre sur la fenêtre entière.
   ------------------------------------------------------------------ */

/* Pleine largeur SANS débordement horizontal.

   Historique de ce bloc, parce qu'il a cassé deux fois.

   1. `width: 100vw` : `100vw` inclut la barre de défilement. Sur un écran
      qui en affiche une, la section dépassait de 15 à 17 px et provoquait
      un défilement latéral sur tout le site.
   2. `calc(100vw - var(--ep-sb))` : mieux, mais --ep-sb ne peut pas être
      mesurée sans JavaScript. Elle valait donc toujours 0, et le décalage
      revenait — constaté le 20/08/2026 sur /prestations/, section calée à
      -7 px et débordant de 8 px à droite.

   Solution retenue : une requête de conteneur. `main.wrap` fait exactement
   la largeur utile, barre de défilement exclue, et `cqw` s'y réfère.
   Plus de vw, donc plus de scrollbar dans l'équation. */
main.wrap {
	container-type: inline-size;
	container-name: contenu;
}

.entry-content > .wp-block-kadence-rowlayout,
.entry-content > .ep-hero,
.entry-content > .ep-stats,
.entry-content > .wp-block-group.ep-section--dark,
.entry-content > .wp-block-group.ep-section--muted {
	margin-inline: calc(50% - 50cqw);
	width: 100cqw;
	max-width: 100cqw;
}

/* Ancien filet de sécurité, retiré le 20/08/2026.

   `html, body { overflow-x: clip }` masquait le débordement causé par
   `width: 100vw`. Ce débordement n'existe plus : la pleine largeur passe
   par `100cqw`, vérifié à zéro débordement sur 45 combinaisons de page et
   de largeur.

   Or `overflow` autre que `visible` sur `html` casse `position: fixed`
   dans Safari, en particulier sur iOS : l'élément fixe est alors calé sur
   le bloc clippé et non sur la fenêtre. C'est le suspect n° 1 d'un tiroir
   de menu qui « ne s'ouvre pas » sur iPhone — il s'ouvre, mais hors champ.

   On garde uniquement une limite de largeur, qui ne crée aucun contexte
   de clip. */
html, body {
	max-width: 100%;
}

/* Le contenu interne reste centré et lisible */
.entry-content > .wp-block-kadence-rowlayout > .kt-row-column-wrap {
	max-width: var(--global-content-width, 1240px);
	margin-inline: auto;
}

/* Plus de cadre blanc ni d'ombre autour du contenu.

   Attention à la géométrie : sur mobile, Kadence élargit
   `.entry-content-wrap` de deux fois sa gouttière pour compenser son
   propre rembourrage, et le conteneur parent centre l'ensemble. En
   supprimant seulement le rembourrage, la boîte restait plus large que
   son parent — mesuré le 20/08/2026 : 431 px dans un conteneur de
   399 px, donc décalée de 16 px vers la gauche, et le texte coupé au
   bord de l'écran. Il faut remettre la largeur à 100 %, pas seulement
   annuler le rembourrage. */
.content-style-boxed .content-container,
.content-style-boxed .entry-content-wrap,
.content-style-boxed article.entry,
.content-style-boxed .content-bg,
.content-style-unboxed .content-container,
.content-style-unboxed .entry-content-wrap,
.content-style-unboxed article.entry,
.content-style-unboxed .content-bg {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	padding-inline: 0;
	background: transparent;
	box-shadow: none;
}

/* Kadence adauga 32 px deasupra continutului fiecarei pagini. Eroii si
   bandele de titlu au deja propriul ritm vertical, deci acel spatiu devenea
   o fasie alba accidentala intre antet si primul bloc. */
body.page .entry-content-wrap {
	padding-top: 0;
}

/* Sous 720 px, Kadence sort l'article de la gouttière avec
   `.content-style-boxed .content-bg:not(.loop-entry) { margin: -1rem }`,
   pour que la carte blanche touche les bords. Nous n'avons plus de carte
   blanche : ce décalage ne fait que couper le texte. Le sélecteur reprend
   le `:not()` — sans lui, la spécificité est inférieure et la règle perd. */
@media (max-width: 719px) {
	.content-style-boxed .content-bg:not(.loop-entry),
	.content-style-unboxed .content-bg:not(.loop-entry) {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}

/* ------------------------------------------------------------------
   Typographie des titres — corrections mesurées

   Le modèle applique `hyphens: auto` partout et un interlettrage négatif
   même sur les capitales. Sur mobile, le sous-titre du hero donnait
   « ENSEIGNES, SIGNALÉTIQUE… OC-CITANIE », coupé en plein milieu d'un
   nom propre, sur quatre lignes collées (interligne 1,0).

   Trois règles typographiques simples :
   - on ne coupe jamais un titre ;
   - les capitales demandent un interlettrage positif, pas négatif ;
   - un texte en capitales a besoin de plus d'interligne, pas de moins.
   ------------------------------------------------------------------ */
/* Piège de sélecteur : Kadence ne pose pas la classe `kt-adv-heading`
   telle quelle, il y colle l'identifiant unique du bloc —
   `kt-adv-headingepbb3nw`. Un sélecteur `.kt-adv-heading` ne matche donc
   jamais. C'est `.wp-block-kadence-advancedheading` qu'il faut viser. */
h1, h2, h3, h4, h5, h6,
.wp-block-kadence-advancedheading {
	hyphens: none;
	-webkit-hyphens: none;
}

/* Titres en capitales, quel que soit le niveau et l'emplacement */
h1.wp-block-kadence-advancedheading,
h2.wp-block-kadence-advancedheading,
h3.wp-block-kadence-advancedheading,
h4.wp-block-kadence-advancedheading,
h5.wp-block-kadence-advancedheading {
	text-wrap: balance;
}

.kb-row-layout-wrap h4.wp-block-kadence-advancedheading,
.kb-row-layout-wrap h5.wp-block-kadence-advancedheading {
	letter-spacing: .04em !important;
	line-height: 1.5 !important;
}

/* Le sous-titre du hero : lisible avant d'être stylé */
.kb-row-layout-wrap:first-of-type h4.wp-block-kadence-advancedheading {
	font-size: clamp(1rem, .85rem + .5vw, 1.15rem) !important;
	max-width: 48ch;
	margin-inline: auto;
}

/* La gouttière de lecture vit désormais sur le contenu lui-même.
   Les sections pleine largeur s'en échappent par la règle
   `margin-inline: calc(50% - 50vw)` ci-dessus, qui reste juste
   puisqu'elle se calcule depuis un contenu centré. */
.entry-content {
	padding-inline: var(--ep-gouttiere);
}

.entry-content > .wp-block-kadence-rowlayout,
.entry-content > .ep-hero,
.entry-content > .ep-stats,
.entry-content > .wp-block-group.ep-section--dark,
.entry-content > .wp-block-group.ep-section--muted {
	padding-inline: 0;
}

/* ==================================================================
   4. Mise en page — c'est ce qui empêche la page de paraître vide
   ================================================================== */

/* Conteneur : les sections sont pleine largeur, le contenu est centré */
.ep-wrap {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: clamp(1rem, .5rem + 2vw, 2rem);
}

/* Rythme vertical : chaque section respire, sinon tout se tasse en haut */
.ep-section {
	padding-block: clamp(3rem, 1.5rem + 5vw, 6rem);
}

/* Bloc neutre quand la photo n'est pas encore en médiathèque.
   Un aplat de la charte, jamais une image de banque. */
.ep-media-vide {
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--ep-radius-card);
	background:
		repeating-linear-gradient(
			135deg,
			var(--ep-muted) 0 18px,
			#EFEDE8 18px 36px
		);
	border: 1px solid var(--ep-border);
}

.ep-section--muted {
	background-color: var(--ep-muted);
	padding-block: clamp(3rem, 1.5rem + 5vw, 6rem);
}

.ep-section--dark {
	background-color: var(--ep-dark);
	color: var(--ep-white);
	padding-block: clamp(3rem, 1.5rem + 5vw, 6rem);
}

.ep-section--dark h2,
.ep-section--dark h3 { color: var(--ep-white); }

.ep-section--dark p { color: rgba(255, 255, 255, .78); }

/* En-tête de section : sur-titre + titre + accroche */
.ep-head { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.ep-head p { margin-top: .5rem; color: var(--ep-muted-foreground); }

/* ------------------------------------------------------------------
   4.1 Hero — pleine largeur, photo réelle, texte en surimpression
   ------------------------------------------------------------------ */

.ep-hero {
	position: relative;
	min-height: clamp(420px, 52vh, 620px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: var(--ep-dark);
}

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

/* Voile sombre côté gauche : le texte reste lisible sans masquer la photo */
.ep-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg,
		rgba(21, 17, 13, .88) 0%,
		rgba(21, 17, 13, .72) 38%,
		rgba(21, 17, 13, .18) 68%,
		rgba(21, 17, 13, .05) 100%);
}

.ep-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1240px;
	margin-inline: auto;
	padding: clamp(2rem, 1rem + 4vw, 4rem) var(--ep-space-s);
	width: 100%;
}

.ep-hero__content { max-width: 34rem; }

.ep-hero h1 {
	color: var(--ep-white);
	margin: .35rem 0 .9rem;
}

.ep-hero p {
	color: rgba(255, 255, 255, .86);
	font-size: 1.1rem;
	margin-bottom: 1.75rem;
}

.ep-hero .ep-eyebrow { color: var(--ep-primary); }

.ep-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.ep-hero .ep-btn--ghost {
	color: var(--ep-white);
	border-color: rgba(255, 255, 255, .55);
}

.ep-hero .ep-btn--ghost:hover {
	background: var(--ep-white);
	border-color: var(--ep-white);
	color: var(--ep-dark);
}

/* ------------------------------------------------------------------
   4.2 Bandeau de chiffres
   ------------------------------------------------------------------ */

.ep-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1px;
	background: var(--ep-border);
	border-block: 1px solid var(--ep-border);
}

.ep-stat {
	background: var(--ep-white);
	padding: 1.5rem 1rem;
	text-align: center;
}

.ep-stat__n {
	font-family: var(--ep-font-heading);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 700;
	line-height: 1;
	color: var(--ep-dark);
}

.ep-stat__l {
	font-size: .88rem;
	color: var(--ep-muted-foreground);
	margin-top: .35rem;
}

/* ------------------------------------------------------------------
   4.3 Grille de prestations — image + titre, pas de mur de texte
   ------------------------------------------------------------------ */

.ep-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.25rem;
}

.ep-service {
	position: relative;
	display: block;
	border-radius: var(--ep-radius-card);
	overflow: hidden;
	text-decoration: none;
	background: var(--ep-dark);
	aspect-ratio: 4 / 5;
	transition: transform .25s var(--ep-ease);
}

.ep-service:hover { transform: translateY(-4px); }

.ep-service img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ep-ease), opacity .25s var(--ep-ease);
	opacity: .82;
}

.ep-service:hover img {
	transform: scale(1.05);
	opacity: .68;
}

.ep-service__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.1rem 1.15rem;
	background: linear-gradient(to top, rgba(21, 17, 13, .92), rgba(21, 17, 13, 0));
	z-index: 2;
}

.ep-service__t {
	font-family: var(--ep-font-heading);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ep-white);
	line-height: 1.25;
}

.ep-service__d {
	font-size: .85rem;
	color: rgba(255, 255, 255, .8);
	margin-top: .2rem;
}

/* Filet orange qui apparaît au survol */
.ep-service::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4px;
	background: var(--ep-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--ep-ease);
	z-index: 3;
}

.ep-service:hover::after { transform: scaleX(1); }

/* ------------------------------------------------------------------
   4.4 Bloc alterné texte / image
   ------------------------------------------------------------------ */

.ep-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
	align-items: center;
}

.ep-split img {
	width: 100%;
	border-radius: var(--ep-radius-card);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ------------------------------------------------------------------
   4.5 Puces de villes
   ------------------------------------------------------------------ */

.ep-zones {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.ep-zone {
	display: inline-block;
	padding: .6rem 1.15rem;
	border: 1px solid var(--ep-border);
	border-radius: var(--ep-radius-pill);
	background: var(--ep-white);
	color: var(--ep-dark);
	font-size: .95rem;
	text-decoration: none;
	transition: border-color .18s var(--ep-ease), color .18s var(--ep-ease);
}

.ep-zone:hover {
	border-color: var(--ep-primary);
	color: var(--ep-primary);
}

/* ------------------------------------------------------------------
   4.6 Étapes numérotées
   ------------------------------------------------------------------ */

.ep-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1.25rem;
	counter-reset: ep-step;
}

.ep-step {
	border-top: 3px solid var(--ep-border);
	padding-top: .85rem;
	counter-increment: ep-step;
}

.ep-step:first-child { border-top-color: var(--ep-primary); }

.ep-step::before {
	content: "0" counter(ep-step);
	display: block;
	font-family: var(--ep-font-heading);
	font-size: .8rem;
	font-weight: 600;
	color: var(--ep-primary);
	margin-bottom: .2rem;
}

.ep-step__t {
	font-weight: 600;
	font-size: .98rem;
	line-height: 1.3;
}

.ep-step__d {
	font-size: .87rem;
	color: var(--ep-muted-foreground);
	margin-top: .25rem;
}

/* ------------------------------------------------------------------
   4.7 Appel à l'action final
   ------------------------------------------------------------------ */

.ep-cta {
	text-align: center;
	max-width: 42rem;
	margin-inline: auto;
}

.ep-cta p { margin-inline: auto; }

/* ==================================================================
   5. Carte réalisation / produit
   ================================================================== */

.ep-card,
.woocommerce ul.products li.product {
	background: var(--ep-white);
	border: 1px solid var(--ep-border);
	border-radius: var(--ep-radius-card);
	overflow: hidden;
	transition: box-shadow .22s var(--ep-ease),
	            transform .22s var(--ep-ease),
	            border-color .22s var(--ep-ease);
}

.ep-card:hover,
.woocommerce ul.products li.product:hover {
	box-shadow: var(--ep-shadow-card-hover);
	border-color: transparent;
	transform: translateY(-3px);
}

.ep-card__media,
.woocommerce ul.products li.product img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	display: block;
	margin: 0;
	border-radius: 0;
}

.ep-card__body { padding: var(--ep-space-s) 1.25rem 1.25rem; }

.ep-card__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--ep-font-heading);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ep-dark);
	margin: 0 0 .35rem;
	padding: 0;
}

.ep-card__meta {
	font-size: .9rem;
	color: var(--ep-muted-foreground);
}

/* Badge — catégorie, matériau, ville */
.ep-badge {
	display: inline-block;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1;
	padding: .4rem .7rem;
	border-radius: var(--ep-radius-pill);
	background: var(--ep-primary-soft);
	color: var(--ep-dark);
}

/* ==================================================================
   5. Grille catalogue
   ================================================================== */

.ep-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ==================================================================
   6. WooCommerce en mode devis
   Prix masqué, panier et paiement désactivés (voir inc/woocommerce-devis.php).
   Ces règles suppriment le résiduel visuel côté front.
   ================================================================== */

.ecopub-devis .price,
.ecopub-devis .woocommerce-Price-amount,
.ecopub-devis .quantity,
.ecopub-devis .cart,
.ecopub-devis .woocommerce-cart-form,
.ecopub-devis .woocommerce-message--cart,
.ecopub-devis .added_to_cart,
.ecopub-devis .wc-block-mini-cart,
.ecopub-devis .woocommerce-product-rating {
	display: none !important;
}

/* CTA devis sur la fiche produit */
.ep-devis-cta {
	margin-block: var(--ep-space-m);
	padding: 1.5rem;
	background: var(--ep-muted);
	border: 1px solid var(--ep-border);
	border-radius: var(--ep-radius-card);
}

.ep-devis-cta__note {
	margin: .75rem 0 0;
	font-size: .9rem;
	color: var(--ep-muted-foreground);
}

/* ==================================================================
   7. Bandeau de références clients
   Logos en niveaux de gris, colorisés au survol : ce sont des preuves,
   pas de la décoration. Rien ne doit concurrencer l'orange Ecopub.
   ================================================================== */

.ep-references .wp-block-gallery.ep-logos {
	gap: 1.5rem 2rem;
	align-items: center;
}

.ep-references .ep-logo img,
.ep-references .wp-block-image img {
	max-height: 46px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .62;
	transition: filter .2s var(--ep-ease), opacity .2s var(--ep-ease);
}

.ep-references .ep-logo:hover img,
.ep-references .wp-block-image:hover img {
	filter: grayscale(0);
	opacity: 1;
}

@media (max-width: 600px) {
	.ep-references .ep-logo img,
	.ep-references .wp-block-image img { max-height: 34px; }
}

/* Page References — vitrine dynamique des marques WooCommerce. */
.page-id-2269 .entry-header { display: none; }

.page-id-2269 .content-area,
.page-id-2269 .site-main,
.page-id-2269 .content-bg,
.page-id-2269 .entry-content-wrap {
	padding-top: 0;
	padding-bottom: 0;
}

.page-id-2269 .entry-content { margin: 0; }

.ep-marques {
	/* Pleine largeur par `cqw`, comme les autres sections : `100vw`
	   comptait la barre de défilement et décalait toute la page. */
	width: 100cqw;
	margin-inline: calc(50% - 50cqw);
	overflow: hidden;
	background: var(--ep-white);
}

.ep-marques__inner {
	width: min(100% - (2 * var(--ep-gouttiere)), var(--ep-shell));
	margin-inline: auto;
}

.ep-marques__hero {
	position: relative;
	isolation: isolate;
	background: var(--ep-dark);
	color: var(--ep-white);
	padding-block: clamp(4.5rem, 9vw, 8.5rem);
}

.ep-marques__hero::after {
	content: '';
	position: absolute;
	z-index: -1;
	right: clamp(-12rem, -8vw, -3rem);
	top: 50%;
	width: clamp(18rem, 38vw, 36rem);
	aspect-ratio: 1;
	border: clamp(3rem, 8vw, 7rem) solid var(--ep-primary);
	border-left-color: transparent;
	border-radius: 50%;
	transform: translateY(-50%) rotate(-20deg);
	opacity: .9;
}

.ep-marques__hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(17rem, .7fr);
	gap: clamp(3rem, 8vw, 8rem);
	align-items: end;
}

.ep-marques__intro { max-width: 760px; }

.ep-marques__eyebrow {
	margin: 0 0 1rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ep-primary);
}

.ep-marques__hero h1 {
	max-width: 12ch;
	margin: 0;
	color: var(--ep-white);
	font-size: clamp(3rem, 6.5vw, 6.4rem);
	line-height: .96;
	letter-spacing: -.055em;
}

.ep-marques__intro > p:not(.ep-marques__eyebrow) {
	max-width: 54ch;
	margin: 1.75rem 0 0;
	color: rgba(255, 255, 255, .72);
	font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.ep-marques__hero-cta { margin-top: 2rem; }

.ep-marques__chiffres {
	position: relative;
	margin: 0;
	padding-left: clamp(1.5rem, 3vw, 3rem);
	border-left: 1px solid rgba(255, 255, 255, .24);
}

.ep-marques__chiffres > div {
	padding-block: 1.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.ep-marques__chiffres > div:last-child { border-bottom: 0; }

.ep-marques__chiffres dt {
	font-size: clamp(2.25rem, 4vw, 4rem);
	font-weight: 750;
	line-height: 1;
	letter-spacing: -.045em;
	color: var(--ep-white);
}

.ep-marques__chiffres dd {
	margin: .45rem 0 0;
	color: rgba(255, 255, 255, .65);
	font-size: .93rem;
}

.ep-marques__mur {
	padding-block: clamp(4.5rem, 8vw, 8rem);
	background: var(--ep-white);
}

.ep-marques__mur-head {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(18rem, .55fr);
	column-gap: clamp(3rem, 10vw, 9rem);
	align-items: end;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.ep-marques__mur-head .ep-marques__eyebrow { grid-column: 1 / -1; }

.ep-marques__mur-head h2 {
	max-width: 18ch;
	margin: 0;
	font-size: clamp(2.15rem, 4vw, 4.2rem);
	line-height: 1.02;
	letter-spacing: -.045em;
}

.ep-marques__mur-head > p:last-child {
	margin: 0;
	color: var(--ep-muted-foreground);
}

.ep-marques__grille {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ep-border);
	border-left: 1px solid var(--ep-border);
}

.ep-marques__item {
	min-width: 0;
	border-right: 1px solid var(--ep-border);
	border-bottom: 1px solid var(--ep-border);
	animation: ep-marque-entree .55s var(--ep-ease) both;
	animation-delay: min(calc(var(--ep-index) * 24ms), 360ms);
}

.ep-marques__item > a,
.ep-marques__item > div {
	display: flex;
	min-height: 168px;
	padding: 1.5rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	color: var(--ep-dark);
	text-align: center;
	text-decoration: none;
	transition: background-color .22s var(--ep-ease), transform .22s var(--ep-ease);
}

.ep-marques__item img {
	display: block;
	width: auto;
	max-width: min(100%, 170px);
	height: 64px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .68;
	transition: filter .24s var(--ep-ease), opacity .24s var(--ep-ease), transform .24s var(--ep-ease);
}

.ep-marques__item span {
	font-size: .75rem;
	font-weight: 650;
	line-height: 1.25;
	color: var(--ep-muted-foreground);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .2s var(--ep-ease), transform .2s var(--ep-ease);
}

.ep-marques__item .ep-marques__wordmark {
	max-width: 15ch;
	font-size: clamp(1rem, 1.5vw, 1.35rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.025em;
}

.ep-marques__item small {
	font-size: .7rem;
	font-weight: 650;
	color: var(--ep-primary);
}

.ep-marques__item:hover > a,
.ep-marques__item:hover > div,
.ep-marques__item:focus-within > a { background: var(--ep-muted); }

.ep-marques__item:hover img,
.ep-marques__item:focus-within img {
	filter: none;
	opacity: 1;
	transform: translateY(-3px);
}

.ep-marques__item:hover span,
.ep-marques__item:focus-within span {
	opacity: 1;
	transform: none;
}

.ep-marques__methode {
	padding-block: clamp(3.5rem, 7vw, 6rem);
	background: var(--ep-muted);
}

.ep-marques__methode-grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(18rem, 1fr);
	gap: clamp(2rem, 8vw, 7rem);
}

.ep-marques__methode h2 {
	max-width: 15ch;
	margin: 0;
	font-size: clamp(2rem, 3.7vw, 3.6rem);
	line-height: 1.04;
	letter-spacing: -.04em;
}

.ep-marques__methode-grid > div:last-child { max-width: 44rem; }
.ep-marques__methode-grid > div:last-child p { margin: 0 0 1.1rem; line-height: 1.72; }
.ep-marques__methode-grid a { color: var(--ep-dark); font-weight: 750; text-underline-offset: .25rem; }
.ep-marques__methode-grid a span { color: var(--ep-primary); }

.ep-marques__final {
	padding-block: clamp(3.5rem, 7vw, 6rem);
	background: var(--ep-primary);
}

.ep-marques__final-grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem 4rem;
	align-items: end;
}

.ep-marques__final .ep-marques__eyebrow {
	grid-column: 1 / -1;
	margin-bottom: -1rem;
	color: var(--ep-dark);
}

.ep-marques__final h2 {
	max-width: 19ch;
	margin: 0;
	font-size: clamp(2rem, 4vw, 4rem);
	line-height: 1.02;
	letter-spacing: -.04em;
}

.ep-marques__final-cta {
	border-color: var(--ep-dark);
	background: var(--ep-dark);
}

.ep-marques__final-cta:hover {
	border-color: var(--ep-white);
	background: var(--ep-white);
	color: var(--ep-dark);
}

@keyframes ep-marque-entree {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 960px) {
	.ep-marques__hero-grid { grid-template-columns: 1fr; }
	.ep-marques__methode-grid { grid-template-columns: 1fr; }
	.ep-marques__chiffres {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		padding: 1.25rem 0 0;
		border-top: 1px solid rgba(255, 255, 255, .24);
		border-left: 0;
	}
	.ep-marques__chiffres > div {
		padding: 1rem 1.25rem;
		border-right: 1px solid rgba(255, 255, 255, .16);
		border-bottom: 0;
	}
	.ep-marques__chiffres > div:first-child { padding-left: 0; }
	.ep-marques__chiffres > div:last-child { border-right: 0; }
	.ep-marques__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
	.ep-marques__hero { padding-block: 4.5rem; }
	.ep-marques__hero::after { opacity: .38; }
	.ep-marques__hero h1 { font-size: clamp(2.8rem, 15vw, 4.6rem); }
	.ep-marques__chiffres { grid-template-columns: 1fr; }
	.ep-marques__chiffres > div,
	.ep-marques__chiffres > div:first-child {
		padding: 1rem 0;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .16);
	}
	.ep-marques__mur-head { grid-template-columns: 1fr; gap: 1.25rem; }
	.ep-marques__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ep-marques__item > a,
	.ep-marques__item > div { min-height: 138px; padding: 1rem; }
	.ep-marques__item img { height: 50px; }
	.ep-marques__item span { opacity: 1; transform: none; }
	.ep-marques__final-grid { grid-template-columns: 1fr; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
	.ep-marques__item { animation: none; }
	.ep-marques__item img,
	.ep-marques__item span,
	.ep-marques__item > a,
	.ep-marques__item > div { transition: none; }
}

/* ==================================================================
   8. Réalisations — fiche, filtres, états vides
   ================================================================== */

/* La carte devient cliquable dans les grilles */
.ep-card--lien {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ep-card--lien .ep-badge { margin-bottom: .5rem; }

/* Filtres d'archive */
.ep-filtres {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--ep-border);
}

.ep-filtre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}

.ep-filtre__label {
	font-size: .82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ep-muted-foreground);
	min-width: 7rem;
}

.ep-zone.is-active {
	background: var(--ep-primary);
	border-color: var(--ep-primary);
	color: var(--ep-white);
}

/* État vide : une archive sans contenu ne doit pas être une impasse */
.ep-vide {
	text-align: center;
	max-width: 34rem;
	margin-inline: auto;
	padding: var(--ep-space-l) var(--ep-space-s);
	background: var(--ep-muted);
	border-radius: var(--ep-radius-card);
}

.ep-vide p { margin-inline: auto; }

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

/* ==================================================================
   9. FAQ dépliante
   En <details>/<summary> natifs : pas une ligne de JavaScript, accessible
   au clavier par défaut, et le contenu reste dans le DOM — donc lisible
   par Google, ce qui compte pour le rich snippet FAQ.
   ================================================================== */

.ep-faq {
	border-top: 1px solid var(--ep-border);
	max-width: 46rem;
}

.ep-faq__item {
	border-bottom: 1px solid var(--ep-border);
}

.ep-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	font-family: var(--ep-font-heading);
	font-weight: 600;
	font-size: 1.05rem;
	cursor: pointer;
	list-style: none;
	transition: color .18s var(--ep-ease);
}

.ep-faq__q::-webkit-details-marker { display: none; }

.ep-faq__q:hover { color: var(--ep-primary); }

/* Chevron dessiné en CSS, aucune icône à charger */
.ep-faq__q::after {
	content: "";
	flex: 0 0 auto;
	width: .6rem;
	height: .6rem;
	border-right: 2px solid var(--ep-primary);
	border-bottom: 2px solid var(--ep-primary);
	transform: rotate(45deg) translateY(-25%);
	transition: transform .22s var(--ep-ease);
}

.ep-faq__item[open] .ep-faq__q::after {
	transform: rotate(225deg) translateY(-25%);
}

.ep-faq__a {
	padding-bottom: 1.1rem;
	color: var(--ep-muted-foreground);
}

.ep-faq__a > :first-child { margin-top: 0; }
.ep-faq__a > :last-child { margin-bottom: 0; }

/* ==================================================================
   9bis. Coordonnées
   Données relevées sur ecopub.fr le 17/08/2026.
   ================================================================== */

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

.ep-section--muted > .ep-coordonnees {
	padding-inline: clamp(1.5rem, 4vw, 3.5rem);
}

.ep-coord p:not(.ep-eyebrow) {
	margin: 0;
	line-height: 1.7;
}

.ep-coord a {
	color: var(--ep-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--ep-primary);
}

.ep-coord a:hover { color: var(--ep-primary); }

/* ==================================================================
   10. Encart de preuve locale
   Sert à casser un long bloc de texte sur les pages prestation et zone.
   ================================================================== */

.ep-preuve {
	border-left: 4px solid var(--ep-primary);
	border-radius: 0;
	background: var(--ep-primary-soft);
	padding: 1.25rem 1.5rem;
	margin-block: var(--ep-space-m);
}

.ep-preuve__t {
	font-family: var(--ep-font-heading);
	font-weight: 600;
	margin: 0 0 .35rem;
}

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

/* ==================================================================
   11. Accessibilité — cible PageSpeed 95+ sur les 4 axes
   ================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--ep-dark);
	outline-offset: 2px;
	border-radius: 2px;
}

.ep-skip-link {
	position: absolute;
	left: -9999px;
}

.ep-skip-link:focus {
	position: fixed;
	top: var(--ep-space-s);
	left: var(--ep-space-s);
	z-index: 9999;
	padding: var(--ep-space-xs) var(--ep-space-s);
	background: var(--ep-white);
	border: 2px solid var(--ep-dark);
	border-radius: var(--ep-radius-card);
}

/* Évite le décalage de mise en page (CLS) */
img {
	height: auto;
	max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==================================================================
   12. Responsive

   Trois points de rupture seulement : 1024, 768, 480. Au-delà, on
   entretient des cas qui ne se produisent jamais.

   Règle appliquée partout : rien ne dépasse, rien ne se chevauche,
   et toute cible tactile fait au moins 44 px — seuil WCAG 2.5.5.
   ================================================================== */

/* Aucun mot long ne peut élargir son conteneur : e-mails, URL,
   « adhesifs-vitrophanie »… */
body, p, li, h1, h2, h3, h4, td, dd, dt, .ep-card__title, .ep-service__t {
	overflow-wrap: anywhere;
	word-break: normal;
}

/* La césure automatique aide le texte courant à ne pas laisser de trous
   dans une colonne étroite. Elle dessert les titres : « Enseignes pour
   restau-rants et bars » se lit mal et se retient encore moins.
   Cette règle vient après la précédente, sinon elle perdrait — même
   spécificité, c'est la dernière déclarée qui l'emporte. */
p, li, td, dd, dt {
	hyphens: auto;
	/* Sans limite, le navigateur coupe « li-sible » et « fabri-quons » à
	   deux lignes d'intervalle. On exige un mot d'au moins 7 lettres et
	   3 lettres de part et d'autre de la coupure : les césures deviennent
	   rares et toujours lisibles. */
	hyphenate-limit-chars: 7 3 3;
	-webkit-hyphenate-limit-chars: 7 3 3;
}
h1, h2, h3, h4, h5, h6, .ep-card__title, .ep-service__t { hyphens: none; }

img, svg, video, iframe, table { max-width: 100%; }

/* ------------------------------------------------------------------
   ≤ 1024 px — tablette
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {

	.ep-services { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

	.ep-split { gap: 2rem; }

	.ep-steps { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

	.ep-hero { min-height: clamp(360px, 46vh, 480px); }

	/* Les colonnes du pied de page passent à deux */
	.site-top-footer-inner-wrap { gap: 2rem; }
}

/* ------------------------------------------------------------------
   ≤ 768 px — mobile large
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

	body { font-size: 16px; }

	/* Les chiffres passent en 2×2 plutôt qu'une colonne de quatre */
	.ep-stats { grid-template-columns: repeat(2, 1fr); }

	.ep-services { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
	.ep-service { aspect-ratio: 1 / 1; }
	.ep-service__t { font-size: 1rem; }
	.ep-service__d { font-size: .8rem; }

	/* L'image passe sous le texte, jamais à côté en 300 px de large */
	.ep-split { grid-template-columns: 1fr; }
	.ep-split img, .ep-media-vide { aspect-ratio: 16 / 10; }

	.ep-steps { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

	.ep-grid { grid-template-columns: 1fr; }

	/* Fiche réalisation : la fiche technique sous les photos */

	/* Filtres : le libellé au-dessus, sinon il écrase les puces */
	.ep-filtre { flex-direction: column; align-items: flex-start; }
	.ep-filtre__label { min-width: 0; }

	/* Coordonnées et pied de page en une colonne */
	.ep-coordonnees { grid-template-columns: 1fr; gap: 1.5rem; }
	.ep-footer-col { max-width: none; }

	/* Les boutons du hero prennent toute la largeur : plus faciles à viser */
	.ep-hero__actions { flex-direction: column; align-items: stretch; }
	.ep-hero__actions .ep-btn { text-align: center; max-width: none; }

	.ep-hero p { font-size: 1rem; }

	/* Sections : moins de respiration verticale, sinon on scrolle dans le vide */
	.ep-section, .ep-section--muted, .ep-section--dark { padding-block: 2.5rem; }

}

/* ------------------------------------------------------------------
   ≤ 480 px — mobile étroit
   ------------------------------------------------------------------ */
@media (max-width: 480px) {

	.ep-services { grid-template-columns: 1fr; }
	.ep-service { aspect-ratio: 16 / 9; }

	.ep-steps { grid-template-columns: 1fr; }

	.ep-stats { grid-template-columns: 1fr; }
	.ep-stat { padding: 1.1rem 1rem; }

	.ep-wrap { padding-inline: 1rem; }

	/* Les puces de villes restent lisibles et cliquables */
	.ep-zone { font-size: .9rem; padding: .55rem 1rem; }

	.ep-faq__q { font-size: .98rem; }
}

/* ------------------------------------------------------------------
   Cibles tactiles — WCAG 2.5.5

   Conditionné à la LARGEUR, pas seulement au type de pointeur : un
   écran étroit se manipule au pouce même déclaré « fine pointer »,
   et l'émulation mobile des navigateurs ne rapporte pas toujours
   `pointer: coarse`. Mesuré sur le site : 18 liens sous 40 px avec
   la seule règle `hover:none`.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

	.ep-btn,
	.ep-zone,
	.ep-footer-liens a,
	.ep-footer-contact a,
	.ep-coord a,
	.ep-faq__q,
	.header-navigation a,
	.mobile-navigation a,
	.wp-block-button__link,
	.kb-button,
	.kt-svg-icon-list-text a,
	/* boutons hérités du contenu rédigé avant la refonte */
	.eco-wp-button,
	.menu-toggle-open,
	.drawer-toggle {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Les liens d'évitement restent hors flux : leur imposer 44 px
	   créerait un vide en haut de page. */
	.ep-skip-link:not(:focus),
	.skip-link:not(:focus) {
		min-height: 0;
		display: inline;
	}

	.ep-footer-liens li { margin-bottom: 0; }

	/* Les listes du pied de page gardent un espacement lisible malgré
	   la hauteur minimale imposée aux liens. */
	.ep-footer-liens a { padding-block: .2rem; }
}

/* Pas d'effet de survol sur tactile : il reste « collé » après le tap */
@media (hover: none) {
	.ep-card:hover,
	.ep-service:hover,
	.wp-block-kadence-infobox:hover { transform: none; }

	.ep-references .ep-logo img { filter: none; opacity: 1; }
}

/* ------------------------------------------------------------------
   Blocs Kadence du modèle — ajustements mobiles

   Kadence replie correctement ses grilles seul (vérifié à 390 px :
   toutes les colonnes passent à une). On ne corrige donc que la
   respiration et la taille des titres, pas la structure.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {

	.kb-row-layout-wrap { padding-block: 2.5rem !important; }

	/* Le modèle empile trois hauteurs : 40 px sur l'enveloppe, 130/170 px
	   sur la colonne intérieure, et deux hauteurs minimales de 540 et
	   600 px. Mesuré le 20/08/2026 sur un écran de 844 px : le hero
	   faisait 852 px pour 472 px de contenu réel — le visiteur ne voyait
	   rien d'autre que le hero, et devait faire défiler pour découvrir
	   qu'il y avait un site derrière. */
	.kb-row-layout-wrap > .kt-row-column-wrap {
		padding-block: 1rem !important;
		min-height: 0 !important;
	}

	/* Le hero garde une présence, sans occuper l'écran entier :
	   il en laisse un tiers au contenu qui suit. */
	.kb-row-layout-wrap:first-of-type {
		min-height: 0 !important;
	}

	/* NE PAS remettre `display: flex` ici. Testé le 20/08/2026 : la
	   déclaration réinitialise `flex-direction` à `row`, et comme
	   `:first-of-type` attrape aussi les rangées imbriquées, les trois
	   encarts métiers se retrouvaient côte à côte dans 375 px — des
	   colonnes de 120 px de large et 2 700 px de haut. Kadence gère déjà
	   l'empilement mobile ; on ne touche qu'à la hauteur. */
	.entry-content > .kb-row-layout-wrap:first-of-type > .kt-row-column-wrap,
	.ep-accueil > .kb-row-layout-wrap:first-of-type > .kt-row-column-wrap {
		min-height: 62vh !important;
	}

	.kt-inside-inner-col { padding-inline: 1rem; }

	/* Les encarts gardent de l'air entre eux une fois empilés */
	.wp-block-kadence-infobox { margin-bottom: 1rem; }

	/* Le hero du modèle : moins haut, sinon il occupe deux écrans */
	.kb-row-layout-wrap.kt-row-has-bg:first-of-type {
		min-height: 60vh !important;
	}
}


/* ==================================================================
   9. GABARIT DES PAGES DE SERVICE

   Constat du 20/08/2026, capture à l'appui : une page de sous-service
   était un document, pas une page. Titre pleine largeur, texte calé à
   gauche sur 68 caractères avec une colonne vide de 600 px à droite,
   une photo énorme, une liste à puces, puis un bouton seul au milieu
   de rien. Aucun rythme, aucune hiérarchie, aucun repère.

   Le gabarit ci-dessous donne une structure éditoriale en quatre temps :

     1. un bandeau de titre sur fond clair, avec le nom de la famille
        en surtitre — le visiteur sait où il est ;
     2. la photo, remontée sur le bandeau, qui sert de preuve ;
     3. le corps en deux colonnes : lecture à gauche, encart de
        réassurance collant à droite — la colonne vide disparaît ;
     4. une bande d'appel sombre, qui ferme la page.

   Le balisage reste du bloc WordPress standard : le client peut
   continuer à éditer ses textes sans rien casser.
   ================================================================== */

/* --- 1. Bandeau de titre ------------------------------------------ */

.entry-content > .ep-page-header {
	margin-inline: calc(50% - 50cqw);
	width: 100cqw;
	max-width: 100cqw;
	background: var(--ep-muted);
	border-bottom: 1px solid var(--ep-border);
	padding: clamp(2.5rem, 1rem + 5vw, 4.5rem) clamp(1.15rem, 4vw, 2rem)
	         clamp(3.5rem, 2rem + 6vw, 6rem);
	margin-bottom: 0;
}

/* Alignement de la colonne de titre — trois tentatives, une seule bonne.

   1. `margin-inline: auto` sur chaque enfant : chacun se centrait selon
      SA propre largeur maximale, donc le chapeau (46 rem) se décalait de
      80 px par rapport au titre (62 rem).
   2. `display: grid` : la colonne implicite se dimensionne sur le contenu
      maximal du titre — 1 452 px ici — et tout glissait.
   3. Rembourrage calculé, en `cqw` puis en `%` : les deux retombaient sur
      32 px, le thème parent verrouillant le rembourrage de ce bloc.

   Retenu : même largeur de boîte pour les trois enfants, marges
   automatiques, et pour le chapeau un rembourrage à droite qui raccourcit
   la ligne sans réduire la boîte. */
.ep-page-header > *,
.ep-page-header > .ep-eyebrow,
.ep-page-header > h1,
.ep-page-header > .ep-lead {
	max-width: var(--ep-shell) !important;
	margin-inline: auto !important;
}

.ep-page-header .ep-eyebrow {
	display: block;
	margin-bottom: .6rem;
	font-size: .78rem;
	letter-spacing: .14em;
}

/* Ne jamais utiliser le raccourci `margin` sur ces enfants : il remet
   les marges horizontales à zéro et casse le centrage de la colonne. */
.ep-page-header h1 {
	margin-block: 0 1rem;
	text-wrap: balance;
}

.ep-page-header .ep-lead {
	font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
	line-height: 1.6;
	color: var(--ep-muted-foreground);
	max-width: var(--ep-shell);
	padding-right: clamp(0rem, 100% - 44rem, 16rem);
}

/* --- 2. La photo, remontée sur le bandeau -------------------------
   Le chevauchement lie l'image au titre au lieu de les empiler. */

.entry-content > .ep-photo {
	position: relative;
	z-index: 1;
	max-width: var(--ep-shell);
	margin: clamp(-4.5rem, -3vw - 2rem, -2rem) auto clamp(2rem, 4vw, 3rem);
}

.entry-content > .ep-photo img {
	width: 100%;
	aspect-ratio: 16 / 9;
	/* À pleine largeur de colonne, le 16/9 dépasserait l'écran. */
	max-height: min(40rem, 72vh);
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 30px 60px -30px rgba(21, 17, 13, .45);
}

.entry-content > .ep-photo figcaption {
	max-width: var(--ep-shell);
	margin-inline: auto;
}

/* --- 3. Corps en deux colonnes ------------------------------------ */

.ep-page-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 19rem;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
	max-width: var(--ep-shell);
	margin-inline: auto;
	padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem);
}

.ep-page-main > *:first-child { margin-top: 0; }

/* Les titres de section reçoivent un filet, pour qu'on repère les
   paliers de lecture sans avoir à tout lire. */
.ep-page-main h2 {
	margin-top: 2.75rem;
	padding-top: 1.5rem;
	border-top: 2px solid var(--ep-primary);
	display: block;
}

.ep-page-main h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* La colonne s'élargit avec la page ; la ligne de lecture, elle, reste
   bornée pour ne pas dépasser ~70 signes. */
.ep-page-main :where(p, ul, ol, h2, h3) { max-width: 68ch; }

/* Listes : la puce ronde par défaut ne dit rien. Un carré orange
   reprend le vocabulaire des enseignes découpées. */
.ep-page-main ul {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

.ep-page-main ul li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: .7rem;
	line-height: 1.6;
}

.ep-page-main ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .5rem;
	height: .5rem;
	background: var(--ep-primary);
	border-radius: 1px;
}

/* Complément éditorial SEO : contenu décisionnel, lisible et extractible. */
.ep-seo-complement {
	max-width: var(--ep-shell);
	margin-inline: auto;
	padding-block: clamp(2rem, 4vw, 3.5rem) clamp(4rem, 7vw, 6rem);
	border-top: 1px solid var(--ep-border);
}

.ep-seo-complement > h2 {
	max-width: 18ch;
	margin: .7rem 0 1.4rem;
	font-size: clamp(2rem, 4vw, 3.6rem);
	line-height: 1;
	letter-spacing: -.045em;
}

.ep-seo-complement__lead {
	max-width: 52rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	color: var(--ep-muted-foreground);
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.7;
}

.ep-seo-complement__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 4.5rem);
	padding-block: 2rem;
	border-block: 1px solid var(--ep-border);
}

.ep-seo-complement h3 { margin: 0 0 1rem; font-size: 1.35rem; }
.ep-seo-complement__grid p { max-width: 68ch; margin: 0; color: var(--ep-muted-foreground); line-height: 1.7; }
.ep-seo-complement__grid ul { margin: 0; padding: 0; list-style: none; }
.ep-seo-complement__grid li { position: relative; margin-bottom: .8rem; padding-left: 1.35rem; line-height: 1.55; }
.ep-seo-complement__grid li::before { content: ""; position: absolute; top: .62em; left: 0; width: .45rem; height: .45rem; background: var(--ep-primary); }
.ep-seo-complement__faq { padding-top: 2rem; }
.ep-seo-complement__faq details { border-top: 1px solid var(--ep-border); }
.ep-seo-complement__faq details:last-child { border-bottom: 1px solid var(--ep-border); }
.ep-seo-complement__faq summary { padding: 1rem 2rem 1rem 0; cursor: pointer; font-weight: 750; }
.ep-seo-complement__faq details p { max-width: 68ch; margin: 0; padding: 0 0 1.25rem; color: var(--ep-muted-foreground); line-height: 1.65; }
.ep-seo-complement__related { margin: 2rem 0 0; }
.ep-seo-complement__related a { color: var(--ep-dark); font-weight: 750; text-decoration-color: var(--ep-primary); text-underline-offset: .25rem; }
.ep-seo-complement__related a span { color: var(--ep-primary); }

.woocommerce.single-product div.product .woocommerce-tabs .panel > .ep-seo-complement {
	grid-column: 1 / -1;
	width: 100%;
	max-width: none;
	margin-top: clamp(2rem, 5vw, 4rem);
	padding-inline: 0;
}

@media (max-width: 700px) {
	.ep-seo-complement__grid { grid-template-columns: 1fr; }
}

/* --- 4. L'encart latéral ------------------------------------------
   Il porte les trois arguments qui reviennent dans chaque devis, et
   le bouton. Collant : il reste visible pendant toute la lecture. */

.ep-page-aside {
	position: sticky;
	top: 6rem;
	/* Colonne étroite : la césure automatique y produisait
	   « publici-taire », « Montpel-lier », « sous-trai-tance ». */
	hyphens: none;
	background: var(--ep-white);
	border: 1px solid var(--ep-border);
	border-radius: 14px;
	padding: 1.6rem 1.5rem;
	box-shadow: 0 18px 40px -32px rgba(21, 17, 13, .5);
}

.ep-page-aside .ep-aside-titre {
	margin: 0 0 1.1rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ep-primary);
}

.ep-page-aside ul {
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
}

.ep-page-aside li {
	padding: .7rem 0;
	border-bottom: 1px solid var(--ep-border);
	font-size: .95rem;
	line-height: 1.45;
}

.ep-page-aside li:last-child { border-bottom: 0; }

.ep-page-aside li strong {
	display: block;
	font-size: 1.35rem;
	line-height: 1.1;
	color: var(--ep-dark);
	margin-bottom: .15rem;
}

.ep-page-aside .wp-block-buttons,
.ep-page-aside .wp-block-button { width: 100%; }

.ep-page-aside .wp-block-button__link {
	display: block;
	width: 100%;
	max-width: none;
	text-align: center;
	padding: .85rem 1rem;
}

.ep-page-aside .ep-aside-tel {
	display: block;
	margin-top: .9rem;
	text-align: center;
	font-size: .9rem;
	color: var(--ep-muted-foreground);
	text-decoration: none;
}

.ep-page-aside .ep-aside-tel strong {
	display: inline;
	font-size: 1rem;
	color: var(--ep-dark);
}

/* --- 5. Bande d'appel finale -------------------------------------- */

.entry-content > .ep-cta-band {
	margin-inline: calc(50% - 50cqw);
	width: 100cqw;
	max-width: 100cqw;
	background: var(--ep-dark);
	color: var(--ep-white);
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.15rem, 4vw, 2rem);
	text-align: center;
}

/* Même piège que dans le bandeau de titre : sans largeur commune ni
   `!important`, le titre et le paragraphe se centrent chacun selon leur
   propre mesure et la bande paraît décalée vers la gauche. */
.ep-cta-band > * {
	max-width: 40rem !important;
	margin-inline: auto !important;
}

.ep-cta-band h2 {
	color: var(--ep-white);
	margin: 0 0 .75rem;
	border: 0;
	padding: 0;
}

.ep-cta-band p {
	color: rgba(255, 255, 255, .72);
	margin: 0 0 1.6rem;
	max-width: 34rem;
}

.ep-cta-band .wp-block-buttons { justify-content: center; }

/* La bande d'appel ferme la page : elle doit toucher le pied de page,
   pas flotter au-dessus d'une bande blanche.
   Mesuré : 32 px de rembourrage sur `.entry-content-wrap` et 80 px de
   marge sur `.content-area`, soit 112 px de blanc entre la bande sombre
   et le pied de page sombre. */
.entry-content > .ep-cta-band:last-child { margin-bottom: 0; }

body:has(.ep-cta-band) .entry-content-wrap { padding-bottom: 0; }
body:has(.ep-cta-band) .content-area { margin-bottom: 0; }

/* --- Responsive --------------------------------------------------- */

@media (max-width: 900px) {
	.ep-page-body {
		grid-template-columns: minmax(0, 1fr);
	}

	/* L'encart n'a plus rien à quoi se coller : il redevient un bloc
	   normal, placé après le texte, juste avant l'appel final. */
	.ep-page-aside {
		position: static;
		margin-top: 2.5rem;
	}
}

@media (max-width: 600px) {
	.entry-content > .ep-photo {
		margin-top: -1.75rem;
		border-radius: 0;
	}

	.entry-content > .ep-photo img {
		aspect-ratio: 4 / 3;
		border-radius: 10px;
	}

	.ep-page-main h2 { margin-top: 2rem; padding-top: 1.1rem; }
}


/* ==================================================================
   10. CATALOGUE WOOCOMMERCE — MODE DEVIS

   Constat du 20/08/2026 : les 25 produits existaient, publiés, et
   n'étaient accessibles depuis aucune page du site. Le menu reconstruit
   ne portait pas d'entrée « Catalogue », et la boutique s'ouvrait sur
   deux titres « Catalogue » superposés — celui de Kadence et celui du
   hero du modèle resté dans le contenu de la page.

   Le mode devis fonctionne : aucun prix, aucun panier, aucun bouton
   d'achat. Mais rien ne remplaçait le bouton retiré : la fiche produit
   était un cul-de-sac. L'appel au devis est désormais posé dans la
   description de chaque produit, donc en base — il ne dépend pas du PHP.
   ================================================================== */

/* --- Le bandeau de titre de la boutique et des catégories ---------- */

.woocommerce .entry-hero,
.post-type-archive-product .entry-hero,
.tax-product_cat .entry-hero {
	background: var(--ep-muted);
	border-bottom: 1px solid var(--ep-border);
	padding-block: clamp(2.5rem, 1rem + 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
}

/* Le titre était centré pendant que tout le reste de la page était calé
   à gauche : quatre bords gauches différents sur un même écran — 816
   pour le titre, 308 pour l'en-tête, 340 pour le chapeau, 111 pour le
   compteur. C'est ce décalage qui donne l'impression que les éléments
   flottent. Une seule colonne, un seul bord. */
.woocommerce .entry-hero .hero-container {
	max-width: var(--global-content-width, 1240px);
	margin-inline: auto;
	padding-inline: var(--ep-gouttiere);
	box-sizing: border-box;
}

/* Le `header.entry-header` centre son titre : c'est lui qui plaçait le
   H1 à 816 px pendant que le reste de la page commençait à 340.
   Il réservait aussi 200 px de hauteur pour un titre de 66 px, d'où un
   bandeau de 329 px presque vide. */
.woocommerce .entry-hero .entry-header {
	display: block;
	text-align: left;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
	min-height: 0 !important;
	padding-block: 0 !important;
}

.woocommerce .entry-hero,
.woocommerce .entry-hero .entry-hero-container-inner {
	min-height: 0 !important;
}

.woocommerce .entry-hero .entry-title,
.woocommerce .entry-hero h1 {
	margin-inline: 0 !important;
	text-align: left;
	max-width: none;
}

.woocommerce .entry-hero .entry-hero-container-inner,
.woocommerce .entry-hero .hero-section-overlay { background: none; }

/* --- Le chapeau et la barre de tri --------------------------------
   Sur la boutique, le contenu de la page n'est pas dans `.entry-content` :
   il sort dans `.page-description`, sans gouttière ni largeur maximale.
   Le texte partait donc du bord de l'écran pendant que la grille était
   centrée 300 px plus loin. */

.post-type-archive-product .content-area { margin-top: 0; }

.woocommerce .woocommerce-products-header,
.woocommerce .woocommerce-notices-wrapper,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce nav.woocommerce-pagination {
	max-width: var(--global-content-width, 1240px) !important;
	margin-inline: auto !important;
	padding-inline: var(--ep-gouttiere);
	box-sizing: border-box;
}

.woocommerce .woocommerce-products-header {
	padding-top: clamp(1.75rem, 4vw, 3rem);
	padding-bottom: 0;
}

/* La barre compteur + tri + bascule de vue est en réalité une rangée
   flex de Kadence, `.kadence-shop-top-row`, en pleine largeur. Régler
   les enfants un par un ne servait à rien — c'est la rangée qu'il faut
   ramener dans la colonne. */
.woocommerce .kadence-shop-top-row {
	max-width: var(--global-content-width, 1240px);
	margin-inline: auto;
	padding-inline: var(--ep-gouttiere);
	box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-block: 0 2.5rem;
	padding-block: 1.15rem;
	border-bottom: 1px solid var(--ep-border);
}

.woocommerce .kadence-shop-top-item.kadence-woo-results-count { flex: 1 1 auto; }

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	float: none;
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
}

.woocommerce .woocommerce-result-count {
	font-size: .9rem;
	color: var(--ep-muted-foreground);
}

.woocommerce .woocommerce-ordering select {
	max-width: 16rem;
	border: 1px solid var(--ep-border);
	border-radius: 8px;
	padding: .5rem 2rem .5rem .8rem;
	background-color: var(--ep-white);
	font-size: .9rem;
}

@media (max-width: 600px) {
	.woocommerce .kadence-shop-top-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: .85rem;
		margin-bottom: 1.5rem;
		padding-block: 1rem 1.25rem;
	}

	.woocommerce .kadence-shop-top-item.kadence-woo-ordering,
	.woocommerce .woocommerce-ordering {
		width: 100%;
		margin: 0 !important;
		text-align: left;
	}

	.woocommerce .woocommerce-ordering select {
		width: 100%;
		max-width: none;
		min-height: 48px;
		padding-inline: .9rem 2.25rem;
	}
}

/* --- La grille de produits ----------------------------------------
   Elle sortait en pleine largeur, premier et dernier produit collés
   aux bords de l'écran. */

.woocommerce ul.products {
	max-width: var(--global-content-width, 1240px);
	margin-inline: auto;
	padding-inline: var(--ep-gouttiere);
	gap: clamp(1.5rem, 3vw, 2.5rem) !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* --- La carte produit ---------------------------------------------
   Sans prix ni bouton, une carte doit au moins se lire comme une carte :
   un cadre, une image cadrée, un titre qui se voit. */

.woocommerce ul.products li.product {
	border: 0;
	border-radius: 0;
	overflow: visible;
	background: transparent;
	display: flex;
	flex-direction: column;
	transition: transform .24s var(--ep-ease);
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-3px);
}

.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin: 0;
	border-radius: 10px;
	background: var(--ep-muted);
	transition: transform .55s var(--ep-ease), filter .3s var(--ep-ease);
}

.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	overflow: hidden;
}

.woocommerce ul.products li.product .product-details {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.woocommerce ul.products li.product .product-action-wrap {
	margin-top: auto;
}

.woocommerce ul.products li.product .product-action-wrap .ep-btn {
	width: 100%;
	max-width: none;
}
.woocommerce ul.products li.product:hover img { transform: scale(1.018); filter: saturate(1.04); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 1rem 0 .35rem;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	font-weight: 700;
	line-height: 1.35;
	color: var(--ep-dark);
	margin: 0;
}

.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	color: var(--ep-primary);
}

.ep-product-hint {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding-bottom: .8rem;
	color: var(--ep-muted-foreground);
	font-size: .82rem;
	font-weight: 650;
}

.ep-product-hint span { transition: transform .2s var(--ep-ease); }
.woocommerce ul.products li.product:hover .ep-product-hint span { transform: translate(2px, -2px); }

@media (max-width: 900px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 600px) {
	.woocommerce ul.products { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Le prix n'existe pas en mode devis : on masque aussi les résidus
   d'affichage (étoiles, mentions de stock) plutôt que de laisser des
   blocs vides dans la carte. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating,
.woocommerce div.product .price { display: none !important; }

/* --- L'appel au devis dans la fiche produit ------------------------ */

.ep-devis-produit {
	margin-top: 2rem;
	padding: 1.5rem 1.6rem;
	background: var(--ep-muted);
	border: 1px solid var(--ep-border);
	border-radius: 14px;
}

.ep-devis-produit p { margin: 0 0 1rem; max-width: 42rem; }

.ep-devis-produit .wp-block-buttons { justify-content: flex-start; }

.ep-devis-produit .ep-devis-tel {
	display: inline-block;
	margin-left: 1rem;
	color: var(--ep-muted-foreground);
	text-decoration: none;
}

.ep-devis-produit .ep-devis-tel strong { color: var(--ep-dark); }

@media (max-width: 600px) {
	.ep-devis-produit .ep-devis-tel { display: block; margin: .9rem 0 0; }
}


/* ------------------------------------------------------------------
   Barre de filtres du catalogue

	Neuf categories, avec le nombre de produits de chacune. Les liens
	conservent le catalogue comme surface principale et ajoutent un
	parametre partageable ; la requete WooCommerce filtre ensuite la grille.
   ------------------------------------------------------------------ */

.ep-filtres {
	margin-block: 1.5rem 0;
}

.ep-filtres--catalogue {
	padding-block: clamp(1.4rem, 3vw, 2rem);
	border-top: 1px solid var(--ep-border);
	border-bottom: 1px solid var(--ep-border);
}

.ep-filtres-entete {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 1.35rem;
}

.ep-filtres-entete h2 {
	margin: .3rem 0 0;
	font-size: clamp(1.55rem, 2.5vw, 2.15rem);
	line-height: 1.08;
	letter-spacing: -.025em;
}

.ep-filtres-titre {
	margin: 0;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ep-primary);
}

.ep-filtres ul {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
}

.ep-filtres li { margin: 0; }

.ep-filtres li::before { content: none; }

.ep-filtre {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 40px;
	padding: 0 .95rem;
	border: 1px solid var(--ep-border);
	border-radius: 10px;
	background: var(--ep-white);
	color: var(--ep-dark);
	font-size: .9375rem;
	line-height: 1;
	text-decoration: none;
	transition: border-color .18s var(--ep-ease),
	            background-color .18s var(--ep-ease),
	            color .18s var(--ep-ease);
}

.ep-filtre:hover {
	border-color: var(--ep-primary);
	color: var(--ep-primary);
}

.ep-filtre-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding-inline: .3rem;
	border-radius: var(--ep-radius-pill);
	background: var(--ep-muted);
	color: var(--ep-muted-foreground);
	font-size: .78rem;
	font-weight: 600;
}

.ep-filtre.est-actif {
	background: var(--ep-primary);
	border-color: var(--ep-primary);
	color: var(--ep-white);
}

.ep-filtre.est-actif .ep-filtre-n {
	background: rgba(255, 255, 255, .22);
	color: var(--ep-white);
}

/* Les liens globaux du theme ont une specificite elevee : le catalogue
   explicite ici ses trois etats pour garder un contraste fiable. */
.site .ep-filtres--catalogue a.ep-filtre {
	color: var(--ep-dark) !important;
}

.site .ep-filtres--catalogue a.ep-filtre:hover {
	border-color: var(--ep-primary);
	background: var(--ep-primary-soft);
	color: var(--ep-primary);
}

.site .ep-filtres--catalogue a.ep-filtre.est-actif,
.site .ep-filtres--catalogue a.ep-filtre.est-actif:hover {
	border-color: var(--ep-primary);
	background: var(--ep-primary);
	color: var(--ep-white) !important;
	box-shadow: 0 5px 14px rgba(239, 125, 0, .18);
}

.site .ep-filtres--catalogue a.ep-filtre:focus-visible {
	outline: 3px solid rgba(239, 125, 0, .3);
	outline-offset: 3px;
}

.ep-filtres-selection {
	display: grid;
	grid-template-columns: auto auto;
	align-items: baseline;
	gap: .1rem .65rem;
	margin: 0;
	text-align: right;
}

.ep-filtres-selection span {
	grid-column: 1 / -1;
	color: var(--ep-primary);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.ep-filtres-selection strong { color: var(--ep-dark); font-size: .95rem; }
.ep-filtres-selection small { color: var(--ep-muted-foreground); font-size: .8rem; }

.ep-filtres-mobile { display: none; }

@media (max-width: 600px) {
	.ep-filtres--catalogue {
		margin-top: 1.15rem;
		padding-block: 1.2rem 1.35rem;
	}

	.ep-filtres-entete { margin-bottom: .95rem; }
	.ep-filtres-entete h2 { font-size: 1.45rem; }
	.ep-filtres-selection,
	.ep-filtres--catalogue > ul { display: none; }

	.ep-filtres-mobile {
		display: block;
		margin: 0;
	}

	.ep-filtres-mobile label {
		display: block;
		margin-bottom: .45rem;
		color: var(--ep-muted-foreground);
		font-size: .75rem;
		font-weight: 700;
		letter-spacing: .04em;
	}

	.ep-filtres-mobile__controle {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		min-height: 50px;
	}

	.ep-filtres-mobile select,
	.ep-filtres-mobile button {
		min-height: 50px;
		border: 1px solid var(--ep-border);
		font: inherit;
	}

	.ep-filtres-mobile select {
		min-width: 0;
		width: 100%;
		padding: 0 2.25rem 0 .9rem;
		border-radius: 10px 0 0 10px;
		background-color: var(--ep-white);
		color: var(--ep-dark);
		font-size: .9rem;
		font-weight: 650;
	}

	.ep-filtres-mobile button {
		padding-inline: 1rem;
		border-color: var(--ep-primary);
		border-radius: 0 10px 10px 0;
		background: var(--ep-primary);
		color: var(--ep-white);
		font-size: .82rem;
		font-weight: 750;
		cursor: pointer;
	}

	.ep-filtres-mobile select:focus-visible,
	.ep-filtres-mobile button:focus-visible {
		position: relative;
		z-index: 1;
		outline: 3px solid rgba(239, 125, 0, .28);
		outline-offset: 2px;
	}
}

/* La description de catégorie ne sert qu'à porter la barre : on retire
   la marge que Kadence lui donne. */
.woocommerce .term-description { margin: 0; }

/* ==================================================================
   11. FICHE PRODUIT — COMPOSITION EDITORIALE
   Image et information forment un seul hero. La description devient
   une vraie section, sans onglet decoratif ni contenu colle aux bords.
   ================================================================== */

.single-product .content-area {
	margin-top: 0;
	margin-bottom: 0;
}

.single-product .site-main { max-width: none; }

.single-product .product-title.product-above {
	max-width: 1320px;
	margin-inline: auto;
	padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem) 1.25rem;
	box-sizing: border-box;
}

.single-product .kadence-breadcrumbs {
	font-size: .84rem;
	color: var(--ep-muted-foreground);
}

.single-product .kadence-breadcrumbs a {
	color: var(--ep-muted-foreground) !important;
	text-decoration: none;
}

.single-product .kadence-breadcrumbs a:hover { color: var(--ep-primary) !important; }

.woocommerce.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(25rem, .92fr);
	align-items: stretch;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 3rem);
	box-sizing: border-box;
}

.woocommerce.single-product div.product div.images,
.woocommerce.single-product div.product div.summary {
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
}

.woocommerce.single-product div.product div.images {
	position: relative;
	height: auto;
	background: transparent;
	overflow: visible;
}

.woocommerce.single-product div.product div.images > .woocommerce-product-gallery__wrapper,
.woocommerce.single-product div.product div.images .flex-viewport {
	height: auto;
	aspect-ratio: 4 / 3;
	background: var(--ep-dark);
	overflow: hidden;
}

.woocommerce.single-product div.product div.images .flex-viewport .woocommerce-product-gallery__wrapper,
.woocommerce.single-product div.product div.images .woocommerce-product-gallery__image,
.woocommerce.single-product div.product div.images .woocommerce-product-gallery__image > a {
	display: block;
	height: 100%;
}

.woocommerce.single-product div.product div.images .woocommerce-product-gallery__image > a > img {
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	object-fit: contain;
	transition: transform .7s var(--ep-ease), filter .4s var(--ep-ease);
}

.woocommerce.single-product div.product div.images:hover .woocommerce-product-gallery__image > a > img {
	transform: none;
	filter: saturate(1.04);
}

/* Galerie produit : toutes les vues restent entieres, y compris les portraits,
   dans des vignettes carrees qui acceptent aussi les formats horizontaux. */
.woocommerce.single-product div.product div.images ol.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: .65rem;
	margin: .75rem 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce.single-product div.product div.images ol.flex-control-thumbs li {
	float: none;
	width: auto;
	margin: 0;
	overflow: hidden;
	background: var(--ep-muted);
	border: 2px solid transparent;
	border-radius: 6px;
}

.woocommerce.single-product div.product div.images ol.flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--ep-muted);
	opacity: .62;
	cursor: pointer;
	transition: opacity .18s var(--ep-ease), transform .18s var(--ep-ease);
}

.woocommerce.single-product div.product div.images ol.flex-control-thumbs img:hover,
.woocommerce.single-product div.product div.images ol.flex-control-thumbs img.flex-active {
	opacity: 1;
	transform: none;
}

/* L'image technique ajoutee par le zoom WooCommerce ne doit pas heriter
   du recadrage du visuel principal : sinon elle forme une bande blanche. */
.woocommerce.single-product div.product div.images img.zoomImg {
	width: auto;
	height: auto;
	min-height: 0;
	max-width: none;
	object-fit: initial;
	transition: none;
	transform: none;
}

.woocommerce.single-product div.product div.summary {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: clamp(2.25rem, 4vw, 4.5rem);
	background: var(--ep-muted);
}

.woocommerce.single-product .ep-product-kicker {
	margin: 0 0 1rem;
	color: var(--ep-primary);
	font-size: .7rem;
	font-weight: 850;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.woocommerce.single-product div.product .product_title {
	max-width: 13ch;
	margin: 0 0 1.15rem;
	font-size: clamp(2.7rem, 4.35vw, 4.6rem);
	line-height: .96;
	letter-spacing: -.055em;
}

.woocommerce.single-product div.product .woocommerce-product-details__short-description,
.woocommerce.single-product .ep-product-overview {
	max-width: 38rem;
	margin-bottom: 0;
	font-size: clamp(1.05rem, 1.45vw, 1.2rem);
	line-height: 1.6;
	color: #4d4944;
}

.woocommerce.single-product div.product .woocommerce-product-details__short-description p,
.woocommerce.single-product .ep-product-overview > p:first-child {
	margin: 0;
}

.woocommerce.single-product .ep-product-overview h3 {
	margin: 1.35rem 0 .65rem;
	font-size: .76rem;
	font-weight: 850;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.woocommerce.single-product .ep-product-overview ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .45rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce.single-product .ep-product-overview li {
	position: relative;
	padding-left: .9rem;
	font-size: .84rem;
	line-height: 1.45;
}

.woocommerce.single-product .ep-product-overview li::before {
	content: '';
	position: absolute;
	top: .56em;
	left: 0;
	width: .35rem;
	height: .35rem;
	background: var(--ep-primary);
}

.woocommerce.single-product .ep-product-context {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ep-border);
}

.woocommerce.single-product .ep-product-context__title {
	margin: 0 0 .75rem;
	color: var(--ep-muted-foreground);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.woocommerce.single-product .ep-product-context dl {
	display: grid;
	grid-template-columns: minmax(6rem, .36fr) minmax(0, 1fr);
	gap: .5rem 1rem;
	margin: 0;
	font-size: .9rem;
}

.woocommerce.single-product .ep-product-context dt {
	color: var(--ep-muted-foreground);
	font-weight: 500;
}

.woocommerce.single-product .ep-product-context dd { margin: 0; }

.woocommerce.single-product .ep-product-context a {
	color: var(--ep-dark);
	font-weight: 700;
	text-decoration-line: underline;
	text-decoration-color: rgba(239, 125, 0, .45);
	text-decoration-thickness: 1px;
	text-underline-offset: .24em;
}

.woocommerce.single-product .ep-product-context a span {
	display: inline-block;
	margin-left: .18rem;
	font-size: .8em;
	transition: transform .18s var(--ep-ease);
}

.woocommerce.single-product .ep-product-context a:hover { color: var(--ep-primary-dark); }

.woocommerce.single-product .ep-product-context a:hover span { transform: translate(2px, -2px); }

.woocommerce.single-product .ep-devis-cta {
	margin-top: 1.65rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.woocommerce.single-product .ep-devis-cta__note {
	max-width: 34rem;
	margin: 1rem 0 0;
	font-size: .9rem;
	line-height: 1.55;
	color: var(--ep-muted-foreground);
}

.woocommerce.single-product div.product .product_meta {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ep-border);
	font-size: .86rem;
	color: var(--ep-muted-foreground);
}

.woocommerce.single-product div.product .product_meta a {
	font-weight: 650;
	text-decoration: none;
}

.woocommerce.single-product div.product .woocommerce-tabs {
	grid-column: 1 / -1;
	width: 100vw;
	margin: clamp(4rem, 8vw, 8rem) 0 0 calc(50% - 50vw);
	padding: 0;
	background: var(--ep-muted);
}

.woocommerce.single-product div.product .woocommerce-tabs ul.tabs {
	display: none;
}

.woocommerce.single-product div.product .woocommerce-tabs .panel {
	display: grid !important;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: 1rem clamp(3rem, 9vw, 9rem);
	max-width: 1220px;
	margin: 0 auto !important;
	padding: clamp(4.5rem, 9vw, 8rem) clamp(1.25rem, 4vw, 3rem) !important;
	box-sizing: border-box;
}

.woocommerce.single-product div.product .woocommerce-tabs .panel > h2 {
	grid-column: 1;
	margin: 0 0 1rem;
	font-size: clamp(2.6rem, 5vw, 5rem);
	line-height: .96;
	letter-spacing: -.05em;
}

.woocommerce.single-product div.product .woocommerce-tabs .panel > p:first-of-type {
	grid-column: 1;
	margin: 0;
	font-size: 1.12rem;
	color: var(--ep-muted-foreground);
}

.woocommerce.single-product div.product .woocommerce-tabs .panel > h3 {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	margin: 0 0 .75rem;
	font-size: 1.2rem;
}

.woocommerce.single-product div.product .woocommerce-tabs .panel > ul {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce.single-product div.product .woocommerce-tabs .panel > ul li {
	position: relative;
	padding: .65rem 0 .65rem 1.5rem;
	border-bottom: 1px solid var(--ep-border);
}

.woocommerce.single-product div.product .woocommerce-tabs .panel > ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.25rem;
	width: .48rem;
	height: .48rem;
	background: var(--ep-primary);
}

/* Video facultative, configuree par URL YouTube dans la fiche produit. */
.woocommerce.single-product .ep-product-video {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(16rem, .65fr) minmax(0, 1.35fr);
	gap: clamp(2.5rem, 7vw, 7rem);
	align-items: center;
	width: 100%;
	max-width: 1220px;
	margin: 0 auto;
	padding: clamp(4.5rem, 9vw, 8rem) clamp(1.25rem, 4vw, 3rem);
	box-sizing: border-box;
}

.woocommerce.single-product .ep-product-video__copy h2 {
	margin: .6rem 0 1rem;
	font-size: clamp(2.4rem, 4.5vw, 4.8rem);
	line-height: .96;
	letter-spacing: -.05em;
}

.woocommerce.single-product .ep-product-video__copy > p:not(.ep-eyebrow) {
	margin: 0 0 1.5rem;
	color: var(--ep-muted-foreground);
}

.woocommerce.single-product .ep-product-video__copy a {
	color: var(--ep-dark) !important;
	font-weight: 750;
	text-decoration-color: var(--ep-primary);
}

.woocommerce.single-product .ep-product-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ep-dark);
}

.woocommerce.single-product .ep-product-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.woocommerce.single-product .ep-devis-produit {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem 3rem;
	margin-top: clamp(3rem, 7vw, 6rem);
	padding: clamp(2rem, 4vw, 3.5rem);
	background: var(--ep-primary);
	border: 0;
	border-radius: 0;
}

.woocommerce.single-product .ep-devis-produit p {
	grid-column: 1;
	margin: 0;
	font-size: 1.03rem;
	color: var(--ep-dark);
}

.woocommerce.single-product .ep-devis-produit .wp-block-buttons {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0;
}

.woocommerce.single-product .ep-devis-produit .ep-btn,
.woocommerce.single-product .ep-devis-produit .wp-block-button__link {
	background: var(--ep-dark);
	border-color: var(--ep-dark);
	color: var(--ep-white) !important;
}

.woocommerce.single-product .ep-devis-produit .ep-btn:hover,
.woocommerce.single-product .ep-devis-produit .wp-block-button__link:hover {
	background: var(--ep-white);
	border-color: var(--ep-white);
	color: var(--ep-dark) !important;
}

.woocommerce.single-product .ep-devis-produit .ep-devis-tel {
	grid-column: 1;
	margin: .35rem 0 0;
	color: rgba(21, 17, 13, .75) !important;
}

.woocommerce.single-product .ep-devis-produit .ep-devis-tel strong {
	color: var(--ep-dark) !important;
}

.woocommerce.single-product div.product .woocommerce-product-gallery__trigger {
	top: 1.25rem;
	right: 1.25rem;
	border: 0;
	box-shadow: none;
}

@media (max-width: 900px) {
	.woocommerce.single-product div.product {
		grid-template-columns: 1fr;
	}

	.woocommerce.single-product div.product div.images > .woocommerce-product-gallery__wrapper,
	.woocommerce.single-product div.product div.images .flex-viewport { height: auto; aspect-ratio: 4 / 3; }
	.woocommerce.single-product div.product div.images .woocommerce-product-gallery__image > a { height: 100%; }
	.woocommerce.single-product div.product div.images .woocommerce-product-gallery__image > a > img { min-height: 0; aspect-ratio: auto; }
	.woocommerce.single-product div.product div.summary { padding: 3rem 1.5rem; }
	.woocommerce.single-product div.product .product_title { font-size: clamp(2.75rem, 12vw, 4.75rem); }

	.woocommerce.single-product div.product .woocommerce-tabs {
		grid-column: 1;
		margin-top: 4rem;
	}

	.woocommerce.single-product div.product .woocommerce-tabs .panel {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.woocommerce.single-product div.product .woocommerce-tabs .panel > h2,
	.woocommerce.single-product div.product .woocommerce-tabs .panel > p:first-of-type,
	.woocommerce.single-product div.product .woocommerce-tabs .panel > h3,
	.woocommerce.single-product div.product .woocommerce-tabs .panel > ul,
	.woocommerce.single-product .ep-devis-produit {
		grid-column: 1;
		grid-row: auto;
	}

	.woocommerce.single-product div.product .woocommerce-tabs .panel > h3 { margin-top: 2rem; }
	.woocommerce.single-product .ep-devis-produit { grid-template-columns: 1fr; }
	.woocommerce.single-product .ep-devis-produit .wp-block-buttons,
	.woocommerce.single-product .ep-devis-produit .ep-devis-tel { grid-column: 1; grid-row: auto; }
	.woocommerce.single-product .ep-devis-produit .wp-block-buttons { margin-top: 1rem; }
	.woocommerce.single-product .ep-product-video { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.single-product .product-title.product-above { padding-top: 1.5rem; }
	.woocommerce.single-product div.product { padding-inline: 0; }
	.woocommerce.single-product div.product div.images { margin-inline: 1rem; }
	.woocommerce.single-product div.product div.images ol.flex-control-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
	.woocommerce.single-product div.product div.summary { margin-top: 0; }
	.woocommerce.single-product .ep-product-context dl { grid-template-columns: 1fr; gap: .15rem; }
	.woocommerce.single-product .ep-product-context dd { margin-bottom: .55rem; }
	.woocommerce.single-product .ep-product-overview ul { grid-template-columns: 1fr; }
	.woocommerce.single-product .ep-devis-cta .ep-btn { width: 100%; max-width: none; text-align: center; }
	.woocommerce.single-product .ep-devis-produit .wp-block-button,
	.woocommerce.single-product .ep-devis-produit .wp-block-button__link { width: 100%; max-width: none; text-align: center; }
}

/* ==================================================================
   12. Direction 2026 — accueil, marque et conversion
   Une composition photographique, sans grille de cartes generiques.
   ================================================================== */

/* La version de logo fournie est blanche et orange : l'en-tete sombre
   est son environnement naturel et garantit un contraste durable. */
#main-header,
.site-header-wrap,
.site-header-row-container-inner {
	background: var(--ep-dark);
}

#main-header { border-bottom: 1px solid rgba(255, 255, 255, .12); }

.site-branding .custom-logo,
.site-header-item .custom-logo {
	width: auto;
	height: clamp(52px, 5vw, 68px);
	max-height: 68px;
	object-fit: contain;
}

.header-navigation .header-menu-container > ul > li > a,
.header-navigation .header-menu-container > ul > li > a .nav-drop-title-wrap {
	color: var(--ep-white) !important;
}

.menu-toggle-open,
.menu-toggle-open:hover,
.menu-toggle-open:focus {
	color: var(--ep-white) !important;
}

.ep-accueil {
	background: var(--ep-white);
	overflow: clip;
}

.ep-accueil p { max-width: none; }

.ep-home-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(760px, calc(100svh - 82px));
	padding: clamp(5rem, 13vh, 9rem) clamp(1.25rem, 7vw, 7rem) clamp(3rem, 7vw, 5.5rem);
	isolation: isolate;
	background: var(--ep-dark);
	color: var(--ep-white);
}

.ep-home-hero__media,
.ep-home-hero__shade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ep-home-hero__media {
	z-index: -3;
	object-fit: cover;
	object-position: center 48%;
	animation: ep-hero-presence 14s var(--ep-ease) both;
}

.ep-home-hero__shade {
	z-index: -2;
	background:
		linear-gradient(90deg, rgba(21, 17, 13, .9) 0%, rgba(21, 17, 13, .62) 40%, rgba(21, 17, 13, .12) 76%),
		linear-gradient(0deg, rgba(21, 17, 13, .55), transparent 45%);
}

.ep-home-hero__content {
	max-width: 56rem;
	animation: ep-rise .75s .08s var(--ep-ease) both;
}

.ep-home-kicker {
	margin: 0 0 1.2rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--ep-primary);
}

.ep-home-hero h1 {
	max-width: 12ch;
	margin: 0;
	font-size: clamp(3.25rem, 8vw, 7.8rem);
	font-weight: 700;
	line-height: .88;
	letter-spacing: -.065em;
	color: var(--ep-white);
}

.ep-home-hero__lead {
	max-width: 42rem !important;
	margin: clamp(1.6rem, 3vw, 2.5rem) 0 0;
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, .82);
}

.ep-home-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.4rem 2rem;
	margin-top: 2.2rem;
}

.ep-home-link {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	padding: .45rem 0;
	border-bottom: 1px solid currentColor;
	font-weight: 650;
	color: var(--ep-white) !important;
	text-decoration: none;
	transition: gap .2s var(--ep-ease), color .2s var(--ep-ease);
}

.ep-home-link:hover { gap: 1rem; color: var(--ep-primary) !important; }
.ep-home-link--dark { color: var(--ep-dark) !important; }

.ep-home-hero__caption {
	position: absolute;
	right: clamp(1.25rem, 4vw, 4rem);
	bottom: clamp(1.25rem, 3vw, 2.25rem);
	margin: 0;
	font-size: .72rem;
	font-weight: 650;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
	writing-mode: vertical-rl;
}

.ep-home-proof {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 92rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 5rem);
	border-bottom: 1px solid var(--ep-border);
}

.ep-home-proof p {
	display: grid;
	gap: .25rem;
	margin: 0;
	padding-inline: clamp(1rem, 4vw, 4rem);
	border-right: 1px solid var(--ep-border);
}

.ep-home-proof p:first-child { padding-left: 0; }
.ep-home-proof p:last-child { padding-right: 0; border-right: 0; }
.ep-home-proof strong { font-size: clamp(1.45rem, 2.2vw, 2.25rem); line-height: 1.1; }
.ep-home-proof span { color: var(--ep-muted-foreground); font-size: .94rem; }

.ep-home-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(16rem, .55fr);
	gap: 3rem 8vw;
	align-items: end;
	max-width: 92rem;
	margin: 0 auto;
	padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 5vw, 5rem);
}

.ep-home-intro .ep-home-kicker { grid-column: 1 / -1; margin-bottom: -1rem; }
.ep-home-intro h2 {
	max-width: 17ch;
	margin: 0;
	font-size: clamp(2.4rem, 5vw, 5.6rem);
	line-height: .98;
	letter-spacing: -.05em;
}
.ep-home-intro > p:last-child { margin: 0; color: var(--ep-muted-foreground); }

.ep-home-services {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: var(--ep-dark);
}

.ep-home-service {
	position: relative;
	display: grid;
	align-items: end;
	min-height: clamp(28rem, 52vw, 44rem);
	overflow: hidden;
	color: var(--ep-white) !important;
	text-decoration: none;
}

.ep-home-service::before,
.ep-home-service::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.ep-home-service::after {
	background: linear-gradient(0deg, rgba(21, 17, 13, .88), transparent 58%);
}

.ep-home-service::before {
	background: linear-gradient(0deg, rgba(21, 17, 13, .94), rgba(21, 17, 13, .02) 68%);
	opacity: 0;
	transition: opacity .45s var(--ep-ease);
}

.ep-home-service img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.78) contrast(1.03);
	transform: scale(1);
	transition: transform .7s var(--ep-ease), filter .5s var(--ep-ease);
}

.ep-home-service:hover img { transform: scale(1.035); filter: saturate(1) contrast(1.02); }
.ep-home-service:hover::before { opacity: 1; }

.ep-home-service__index,
.ep-home-service__body { position: relative; z-index: 2; }
.ep-home-service__index { position: absolute; top: 2rem; left: 2rem; font-size: .75rem; letter-spacing: .14em; }
.ep-home-service__body { display: grid; gap: .35rem; padding: clamp(1.5rem, 4vw, 3.5rem); }
.ep-home-service__body strong { font-size: clamp(2rem, 4vw, 4rem); line-height: 1; letter-spacing: -.04em; }
.ep-home-service__body small { color: rgba(255, 255, 255, .72); font-size: 1rem; }

.ep-home-workshop {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(22rem, .85fr);
	min-height: 46rem;
	background: var(--ep-primary);
}

.ep-home-workshop__media { min-height: 32rem; overflow: hidden; }
.ep-home-workshop__media img { width: 100%; height: 100%; object-fit: cover; }
.ep-home-workshop__copy { align-self: center; padding: clamp(3rem, 7vw, 7rem); }
.ep-home-workshop__copy .ep-home-kicker { color: var(--ep-dark); opacity: .72; }
.ep-home-workshop__copy h2 { max-width: 10ch; margin: 0; font-size: clamp(2.6rem, 5vw, 5.5rem); line-height: .95; letter-spacing: -.055em; }
.ep-home-workshop__copy > p:not(.ep-home-kicker) { margin: 2rem 0; max-width: 38rem; }
.ep-home-workshop ol { list-style: none; margin: 2.5rem 0; padding: 0; border-top: 1px solid rgba(21, 17, 13, .35); }
.ep-home-workshop li { display: flex; align-items: center; gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid rgba(21, 17, 13, .35); }
.ep-home-workshop li span { font-size: .72rem; letter-spacing: .12em; }

.ep-home-projects { max-width: 100rem; margin: 0 auto; padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 5vw, 5rem); }
.ep-home-section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.ep-home-section-head h2 { margin: 0; font-size: clamp(2.5rem, 5vw, 5.5rem); letter-spacing: -.055em; }
.ep-home-project-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.25rem; }
.ep-home-project-grid a { position: relative; min-height: 24rem; overflow: hidden; color: var(--ep-white) !important; text-decoration: none; }
.ep-home-project-grid a:first-child { grid-row: span 2; }
.ep-home-project-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--ep-ease); }
.ep-home-project-grid a:hover img { transform: scale(1.03); }
.ep-home-project-grid span { position: absolute; left: 1.5rem; bottom: 1.5rem; padding: .45rem .8rem; background: var(--ep-dark); font-weight: 650; }

.ep-home-cta {
	display: grid;
	justify-items: center;
	padding: clamp(5rem, 11vw, 10rem) 1.25rem;
	background: var(--ep-dark);
	color: var(--ep-white);
	text-align: center;
}
.ep-home-cta h2 { margin: 0; max-width: 18ch; font-size: clamp(2.8rem, 6vw, 6.4rem); line-height: .92; letter-spacing: -.06em; color: var(--ep-white); }
.ep-home-cta > p:not(.ep-home-kicker) { margin: 2rem 0; color: rgba(255, 255, 255, .7); }
.ep-btn--light { background: var(--ep-white); border-color: var(--ep-white); color: var(--ep-dark) !important; }
.ep-btn--light:hover { background: var(--ep-primary); border-color: var(--ep-primary); color: var(--ep-white) !important; }

/* Devis : parcours editorial continu, guide a gauche et formulaire a droite. */
.ep-devis-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(20rem, .75fr);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: var(--ep-surface, #f4f0e9);
}
.ep-devis-hero__copy { padding: clamp(4.5rem, 8vw, 8rem) clamp(1.25rem, 6vw, 6rem); }
.ep-devis-hero h1 { max-width: 10ch; margin: .75rem 0 1.5rem; font-size: clamp(3.8rem, 7vw, 7.2rem); line-height: .88; letter-spacing: -.065em; }
.ep-devis-hero .ep-lead { max-width: 40rem; margin: 0; font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
.ep-devis-hero__promise { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(3rem, 6vw, 6rem); background: var(--ep-primary); color: var(--ep-dark); }
.ep-devis-hero__promise > span { margin-bottom: auto; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.ep-devis-hero__promise strong { max-width: 19ch; font-size: clamp(1.8rem, 3vw, 3.2rem); line-height: 1.02; letter-spacing: -.04em; }
.ep-devis-hero__promise p { max-width: 30rem; margin: 1.25rem 0 0; }
.ep-devis-page { width: 100% !important; max-width: 100% !important; padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 5vw, 5rem) !important; }
.ep-devis-page > #formulaire { grid-column: 1 / -1; width: 100%; max-width: 88rem !important; margin-inline: auto !important; scroll-margin-top: 7rem; }
.ep-devis-layout { display: grid; grid-template-columns: minmax(16rem, .62fr) minmax(0, 1.38fr); gap: clamp(3rem, 8vw, 8rem); max-width: 88rem; margin: 0 auto; }
.ep-devis-guide { align-self: start; position: sticky; top: 7rem; }
.ep-devis-guide h2 { max-width: 12ch; margin: .75rem 0 2.5rem; font-size: clamp(2rem, 3vw, 3.25rem); line-height: 1; letter-spacing: -.045em; }
.ep-devis-guide ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ep-border); }
.ep-devis-guide li { padding: 1.25rem 0; border-bottom: 1px solid var(--ep-border); }
.ep-devis-guide li strong { display: block; font-size: 1.04rem; }
.ep-devis-guide li p { margin: .25rem 0 0; color: var(--ep-muted-foreground); font-size: .9rem; line-height: 1.5; }
.ep-devis-guide__contact { display: grid; gap: .25rem; margin-top: 2rem; }
.ep-devis-guide__contact p { margin: 0 0 .35rem; color: var(--ep-muted-foreground); font-size: .85rem; }
.ep-devis-guide__contact a { width: fit-content; color: var(--ep-dark); font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.ep-devis-form-wrap { min-width: 0; margin: 0; }
.ep-devis-form { display: grid; gap: 0; }
.ep-form-section { min-width: 0; margin: 0; padding: 0 0 3.25rem; border: 0; }
.ep-form-section + .ep-form-section { padding-top: 3.25rem; border-top: 1px solid var(--ep-border); }
/* Legende flottante : sinon le navigateur la place au-dessus du padding et sur la bordure du fieldset. */
.ep-form-section legend { display: grid; float: left; grid-template-columns: 2.4rem 1fr; column-gap: 1rem; width: 100%; margin: 0 0 2rem; padding: 0; }
.ep-form-section legend ~ * { clear: both; }
.ep-form-section legend > span { grid-row: 1 / span 2; padding-top: .3rem; color: var(--ep-accent-text); font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.ep-form-section legend strong { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; letter-spacing: -.025em; }
.ep-form-section legend small { margin-top: .3rem; color: var(--ep-muted-foreground); font-size: .9rem; font-weight: 400; }
.ep-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; }
.ep-devis-form label { display: grid; gap: .45rem; color: var(--ep-dark); font-weight: 650; }
.ep-required { color: var(--ep-accent-text); }
/* Un seul modele de champ : texte, liste, zone de texte et fichier partagent bordure, hauteur et etats. */
.ep-devis-form { --ep-field-border: color-mix(in srgb, var(--ep-muted-foreground) 70%, #fff); --ep-field-height: 3.25rem; }
.ep-devis-form input:not([type="checkbox"]),
.ep-devis-form select,
.ep-devis-form textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--ep-field-height);
	margin: 0;
	padding: .75rem 1rem;
	border: 1px solid var(--ep-field-border) !important;
	border-radius: var(--ep-radius-field, 8px) !important;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	transition: border-color .16s var(--ep-ease, ease-out);
}
.ep-devis-form input::placeholder,
.ep-devis-form textarea::placeholder { color: var(--ep-muted-foreground); font-weight: 400; opacity: 1; }
.ep-devis-form select {
	padding-right: 2.75rem;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23171613' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E") !important;
	background-position: right 1rem center !important;
	background-repeat: no-repeat !important;
	background-size: 1rem !important;
	cursor: pointer;
}
.ep-devis-form select:has(option[value=""]:checked) { color: var(--ep-muted-foreground) !important; }
.ep-devis-form select option { color: var(--ep-dark); }
.ep-devis-form textarea { min-height: 11rem; resize: vertical; }
.ep-devis-form button[aria-busy="true"] { opacity: .65; cursor: progress; }
.ep-devis-form input:not([type="checkbox"]):hover,
.ep-devis-form select:hover,
.ep-devis-form textarea:hover { border-color: var(--ep-muted-foreground) !important; }
.ep-devis-form input:not([type="checkbox"]):focus,
.ep-devis-form select:focus,
.ep-devis-form textarea:focus { border-color: var(--ep-accent-text) !important; outline: 2px solid var(--ep-accent-text) !important; outline-offset: -1px; }
.ep-devis-form input:user-invalid,
.ep-devis-form select:user-invalid,
.ep-devis-form textarea:user-invalid { border-color: #a12c22 !important; }
.ep-devis-form input:-webkit-autofill { box-shadow: inset 0 0 0 100px var(--ep-primary-soft) !important; -webkit-text-fill-color: var(--ep-dark); }
.ep-form-grid + label { margin-top: 1.35rem; }
.ep-contact-form .ep-form-section > label + label { margin-top: 1.35rem; }
.ep-contact-form-section { margin-top: clamp(3rem, 7vw, 6rem) !important; padding-top: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--ep-border); scroll-margin-top: 7rem; }
.ep-contact-form-section > h2 { margin: .65rem 0 clamp(2rem, 4vw, 3.5rem); font-size: clamp(2rem, 4vw, 3.8rem); line-height: .98; letter-spacing: -.045em; }
.ep-file-field { margin-bottom: 1.5rem; }
.ep-file-field .ep-field-hint { order: 1; }
.ep-devis-form .ep-file-field input { padding: .375rem 1rem .375rem .375rem; background: var(--ep-surface-raised, #fff) !important; color: var(--ep-muted-foreground) !important; cursor: pointer; }
.ep-file-field input::file-selector-button { min-height: 2.375rem; margin-right: .85rem; padding: 0 1rem; border: 1px solid var(--ep-border); border-radius: 6px; background: var(--ep-muted, #f5f6f7); color: var(--ep-dark); font: inherit; font-weight: 650; cursor: pointer; transition: border-color .16s var(--ep-ease, ease-out); }
.ep-file-field input:hover::file-selector-button { border-color: var(--ep-muted-foreground); }
.ep-consent { grid-template-columns: auto 1fr; align-items: start; column-gap: .75rem; padding: 1.1rem 0; border-top: 1px solid var(--ep-border); font-size: .9rem; font-weight: 400 !important; }
.ep-consent input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; border: 1px solid var(--ep-field-border); border-radius: 4px; background: var(--ep-surface-raised, #fff) center / 100% no-repeat; appearance: none; cursor: pointer; transition: border-color .16s var(--ep-ease, ease-out); }
.ep-consent input:hover { border-color: var(--ep-muted-foreground); }
.ep-consent input:checked { border-color: var(--ep-primary); background-color: var(--ep-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23171613' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E"); }
.ep-consent input:user-invalid { border-color: #a12c22; }
.ep-field-hint, .ep-form-required { color: var(--ep-muted-foreground); font-size: .82rem; font-weight: 400; }
.ep-form-submit { display: flex; align-items: center; gap: 1.25rem; margin-top: 1rem; }
.ep-form-submit .ep-form-required { margin: 0; }
.ep-form-product, .ep-form-notice { padding: 1rem 1.2rem; border: 1px solid color-mix(in srgb, var(--ep-primary) 45%, #fff); border-radius: var(--ep-radius-field, 8px); background: var(--ep-primary-soft); }
.ep-form-notice { margin-bottom: 2.5rem; }
.ep-form-product { margin: 1.35rem 0; }
.ep-form-product { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.ep-form-notice p { margin: .25rem 0 0; }
.ep-form-notice a { color: inherit; font-weight: 700; }
.ep-form-notice--error { border-color: #a12c22; background: #fff0ee; }
.ep-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; }
.ep-devis-reassurance { width: 100vw; max-width: none !important; margin-left: calc(50% - 50vw) !important; padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 6vw, 6rem) !important; background: var(--ep-dark); color: var(--ep-white); text-align: center; }
.ep-devis-reassurance p { margin: 0 0 1rem; color: var(--ep-primary); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ep-devis-reassurance h2 { margin: 0; color: var(--ep-white); font-size: clamp(2rem, 4.2vw, 4.8rem); line-height: 1.05; letter-spacing: -.045em; }
.ep-devis-reassurance h2 a { color: var(--ep-white); text-decoration-thickness: 2px; text-underline-offset: .14em; }
.ep-devis-reassurance h2 span { color: rgba(255,255,255,.36); font-size: .45em; font-weight: 400; letter-spacing: 0; }

/* Consentement cookies — refus et acceptation ont exactement le meme poids. */
.ep-cookie-banner { position: fixed; z-index: 99990; right: 1.25rem; bottom: 1.25rem; left: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; max-width: 76rem; margin: 0 auto; padding: 1.5rem; border: 1px solid rgba(255,255,255,.16); background: #17130f; color: var(--ep-white); box-shadow: 0 22px 60px rgba(0,0,0,.3); animation: ep-cookie-enter .35s var(--ep-ease) both; }
.ep-cookie-banner[hidden], .ep-cookie-panel[hidden], .ep-cookie-backdrop[hidden], .ep-cookie-manage[hidden] { display: none !important; }
.ep-cookie-banner h2 { margin: .25rem 0 .55rem; color: var(--ep-white); font-size: clamp(1.25rem, 2vw, 1.65rem); letter-spacing: -.025em; }
.ep-cookie-banner p { max-width: 48rem; margin: 0; color: rgba(255,255,255,.72); font-size: .9rem; line-height: 1.55; }
.ep-cookie-banner a { display: inline-block; margin-top: .55rem; color: var(--ep-white); font-size: .82rem; }
.ep-cookie-kicker { color: var(--ep-primary) !important; font-size: .68rem !important; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.ep-cookie-banner__actions { display: grid; grid-template-columns: repeat(2, minmax(8.5rem, 1fr)); gap: .6rem; }
.ep-cookie-choice, .ep-cookie-customize, .ep-cookie-close, .ep-cookie-manage { font: inherit; cursor: pointer; transform: none; }
.ep-cookie-choice { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .7rem 1rem; border: 1px solid var(--ep-white); border-radius: 6px; background: transparent; color: var(--ep-white); font-weight: 750; }
.ep-cookie-choice:hover, .ep-cookie-choice:focus-visible { background: var(--ep-white); color: var(--ep-dark); }
.ep-cookie-customize { display: inline-flex; align-items: center; justify-content: center; grid-column: 1 / -1; min-height: 40px; padding: .45rem; border: 0; border-radius: 4px; background: transparent; color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: .2em; }
.ep-cookie-backdrop { position: fixed; z-index: 99991; inset: 0; background: rgba(21,17,13,.58); backdrop-filter: blur(4px); }
.ep-cookie-panel { position: fixed; z-index: 99992; top: 50%; left: 50%; width: min(42rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); overflow: auto; transform: translate(-50%, -50%); padding: clamp(1.4rem, 4vw, 2.5rem); background: var(--ep-white); color: var(--ep-dark); box-shadow: 0 28px 80px rgba(0,0,0,.3); }
.ep-cookie-panel__head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding-bottom: 1.5rem; }
.ep-cookie-panel h2 { margin: .3rem 0 0; font-size: clamp(1.65rem, 3vw, 2.45rem); letter-spacing: -.04em; }
.ep-cookie-close { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--ep-border); border-radius: 6px; background: transparent; color: var(--ep-dark); font-size: 1.7rem; line-height: 1; }
.ep-cookie-category { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.25rem 0; border-top: 1px solid var(--ep-border); font-weight: 400; }
.ep-cookie-category strong { display: block; margin-bottom: .25rem; font-size: 1.05rem; }
.ep-cookie-category p { margin: 0; color: var(--ep-muted-foreground); font-size: .87rem; line-height: 1.5; }
.ep-cookie-category input { width: 1.35rem; height: 1.35rem; accent-color: var(--ep-primary); }
.ep-cookie-status { color: var(--ep-muted-foreground); font-size: .76rem; font-weight: 700; }
.ep-cookie-panel__note { margin: 1rem 0 0; padding: .8rem 1rem; background: var(--ep-primary-soft); font-size: .82rem; }
.ep-cookie-panel__actions { display: flex; justify-content: flex-end; margin-top: 1.5rem; }
.ep-cookie-panel__actions .ep-cookie-choice { border-color: var(--ep-dark); background: var(--ep-dark); }
.ep-cookie-manage { position: fixed; z-index: 99980; right: 1rem; bottom: 1rem; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: .55rem .8rem; border: 1px solid var(--ep-border); border-radius: 6px; background: var(--ep-white); color: var(--ep-dark); font-size: .75rem; font-weight: 700; box-shadow: 0 8px 25px rgba(0,0,0,.12); }
.ep-cookie-choice:hover, .ep-cookie-customize:hover, .ep-cookie-close:hover, .ep-cookie-manage:hover { transform: none; }
.ep-cookie-open { overflow: hidden; }
@keyframes ep-cookie-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* Pages editoriales — composition atelier, commune aux services et guides. */
.ep-editorial-hero {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(28rem, 1.1fr);
	width: 100vw;
	min-height: 42rem;
	margin-left: calc(50% - 50vw);
	background: var(--ep-surface, #f4f0e9);
}

.ep-editorial-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 6vw, 6rem);
}

.ep-editorial-hero h1 {
	max-width: 10ch;
	margin: .8rem 0 1.6rem;
	font-size: clamp(3.4rem, 6.5vw, 7rem);
	line-height: .9;
	letter-spacing: -.065em;
}

.ep-editorial-hero__lead {
	max-width: 42rem;
	margin: 0;
	color: var(--ep-muted-foreground);
	font-size: clamp(1.1rem, 1.5vw, 1.35rem);
	line-height: 1.55;
}

.ep-editorial-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem; margin-top: 2.2rem; }
.ep-editorial-text-link { color: var(--ep-dark) !important; font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.ep-editorial-text-link span { display: inline-block; transition: transform .25s var(--ep-ease); }
.ep-editorial-text-link:hover span { transform: translate(3px, -3px); }
.ep-editorial-hero__visual { min-height: 34rem; margin: 0; overflow: hidden; background: #d8d2c9; }
.ep-editorial-hero__visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.04); transition: transform .8s var(--ep-ease), filter .45s var(--ep-ease); }
.ep-editorial-hero:hover .ep-editorial-hero__visual img { transform: scale(1.018); filter: saturate(1) contrast(1.02); }

.ep-editorial-proof {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 0 clamp(1.25rem, 5vw, 5rem);
	background: var(--ep-primary);
	color: var(--ep-dark);
}
.ep-editorial-proof p { display: flex; align-items: center; gap: 1rem; margin: 0; padding: 1.4rem clamp(0rem, 3vw, 2.5rem); border-right: 1px solid rgba(21,17,13,.28); font-weight: 750; }
.ep-editorial-proof p:first-child { padding-left: 0; }
.ep-editorial-proof p:last-child { border-right: 0; }
.ep-editorial-proof span { font-size: .7rem; letter-spacing: .14em; opacity: .62; }

.ep-editorial-section { max-width: 92rem; margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 5vw, 5rem); }
.ep-editorial-intro { display: grid; grid-template-columns: minmax(0, .9fr) minmax(22rem, 1.1fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.ep-editorial-intro h2 + .wp-block-image { margin-top: 1.5rem; }
.ep-editorial-intro h2,
.ep-editorial-solutions > header h2 { margin: .7rem 0 0; font-size: clamp(2.5rem, 4.7vw, 5rem); line-height: .98; letter-spacing: -.052em; }
.ep-editorial-prose { padding-top: .3rem; }
.ep-editorial-prose p { margin: 0 0 1.4rem; color: var(--ep-muted-foreground); font-size: clamp(1.08rem, 1.4vw, 1.28rem); line-height: 1.7; }

.ep-editorial-solutions { padding-top: 1rem; }
.ep-editorial-solutions > header { display: grid; grid-template-columns: .65fr 1.35fr; gap: 3rem; align-items: end; margin-bottom: 3.5rem; }
.ep-editorial-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ep-border); }
.ep-editorial-list li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); padding: 2rem 0; border-bottom: 1px solid var(--ep-border); }
.ep-editorial-list li > span { padding-top: .4rem; color: var(--ep-primary); font-size: .75rem; font-weight: 800; letter-spacing: .13em; }
.ep-editorial-list li > p:empty { display: none; }
.ep-editorial-list li > div { grid-column: 2; }
.ep-editorial-list h3 { margin: 0 0 .45rem; font-size: clamp(1.45rem, 2vw, 2rem); }
.ep-editorial-list p { max-width: 52rem; margin: 0; color: var(--ep-muted-foreground); }

.ep-editorial-process {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem);
	background: var(--ep-dark);
	color: var(--ep-white);
}
.ep-editorial-process__heading { display: grid; grid-template-columns: .65fr 1.35fr; gap: 3rem; max-width: 84rem; margin: 0 auto 4rem; }
.ep-editorial-process .ep-eyebrow { color: var(--ep-primary); }
.ep-editorial-process h2 { max-width: 17ch; margin: 0; color: var(--ep-white); font-size: clamp(2.5rem, 4.5vw, 4.8rem); line-height: .98; letter-spacing: -.05em; }
.ep-editorial-process__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 84rem; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.22); }
.ep-editorial-process article { padding: 2rem clamp(1rem, 3vw, 2.5rem) 0 0; }
.ep-editorial-process article + article { padding-left: clamp(1rem, 3vw, 2.5rem); border-left: 1px solid rgba(255,255,255,.22); }
.ep-editorial-process article span { color: var(--ep-primary); font-size: .72rem; letter-spacing: .14em; }
.ep-editorial-process h3 { margin: 2rem 0 .8rem; color: var(--ep-white); font-size: 1.45rem; }
.ep-editorial-process article p { margin: 0; color: rgba(255,255,255,.67); line-height: 1.65; }

.ep-editorial-cta { max-width: 84rem; margin: 0 auto; padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 5vw, 5rem); text-align: center; }
.ep-editorial-cta h2 { max-width: 19ch; margin: .8rem auto 1.4rem; font-size: clamp(2.6rem, 5vw, 5.5rem); line-height: .95; letter-spacing: -.055em; }
.ep-editorial-cta > p:not(.ep-eyebrow) { max-width: 45rem; margin: 0 auto 2rem; color: var(--ep-muted-foreground); font-size: 1.1rem; }
.ep-editorial-cta .ep-btn { display: inline-flex; }

/* Prestations — pont visuel et semantique vers les produits du catalogue. */
.ep-prestation-catalogue {
	max-width: 92rem;
	margin: 0 auto;
	padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 5vw, 5rem);
}
.ep-prestation-catalogue__head {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(22rem, 1.1fr);
	gap: clamp(2rem, 8vw, 8rem);
	align-items: end;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.ep-prestation-catalogue__head h2 {
	max-width: 13ch;
	margin: .7rem 0 0;
	font-size: clamp(2.7rem, 5vw, 5.4rem);
	line-height: .94;
	letter-spacing: -.055em;
}
.ep-prestation-catalogue__head > div:last-child > p {
	margin: 0 0 1.5rem;
	color: var(--ep-muted-foreground);
	font-size: clamp(1.05rem, 1.35vw, 1.25rem);
	line-height: 1.65;
}
.ep-prestation-products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2vw, 2rem);
}
.ep-prestation-products--count-1 { grid-template-columns: minmax(0, 48rem); }
.ep-prestation-product { min-width: 0; background: var(--ep-surface, #f4f0e9); }
.ep-prestation-product__image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #d8d2c9; }
.ep-prestation-product__image:empty::after { content: ''; display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #ded8cf, #f4f0e9); }
.ep-prestation-product__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ep-ease), filter .35s var(--ep-ease); }
.ep-prestation-product:hover .ep-prestation-product__image img { transform: scale(1.025); filter: saturate(1.08); }
.ep-prestation-product__copy { padding: 1.5rem 1.5rem 1.75rem; }
.ep-prestation-product__type { margin: 0 0 .8rem !important; color: var(--ep-primary) !important; font-size: .67rem !important; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.ep-prestation-product h3 { margin: 0 0 .7rem; font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.08; letter-spacing: -.025em; }
.site .ep-prestation-product h3 a { color: var(--ep-dark) !important; text-decoration: none; }
.ep-prestation-product__copy > p:not(.ep-prestation-product__type) { margin: 0 0 1.2rem; color: var(--ep-muted-foreground); font-size: .92rem; line-height: 1.55; }
.ep-prestation-product__link { display: inline-flex; gap: .4rem; color: var(--ep-dark) !important; font-size: .88rem; font-weight: 800; text-decoration: none; border-bottom: 1px solid currentColor; }
.ep-prestation-product__link span { transition: transform .2s var(--ep-ease); }
.ep-prestation-product__link:hover span { transform: translate(2px, -2px); }

/* Secteurs — mêmes cartes que les prestations, avec une respiration adaptée
   aux pages éditoriales existantes. */
.ep-secteur-catalogue { border-top: 1px solid var(--ep-border); }
.ep-secteur-catalogue + .ep-cta-band { margin-top: 0; }

.ep-prestation-guide {
	display: grid;
	grid-template-columns: minmax(16rem, .7fr) minmax(0, 1.3fr);
	gap: clamp(3rem, 8vw, 8rem);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 6vw, 6rem);
	background: var(--ep-primary);
	color: var(--ep-dark);
}
.ep-prestation-guide__title h2 { max-width: 10ch; margin: .7rem 0 0; font-size: clamp(2.7rem, 4.5vw, 4.8rem); line-height: .95; letter-spacing: -.05em; }
.ep-prestation-guide ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(21,17,13,.35); }
.ep-prestation-guide li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.2rem; padding: 1.65rem 0; border-bottom: 1px solid rgba(21,17,13,.35); }
.ep-prestation-guide li > span { padding-top: .3rem; font-size: .68rem; font-weight: 850; letter-spacing: .13em; opacity: .58; }
.ep-prestation-guide h3 { margin: 0 0 .35rem; font-size: clamp(1.35rem, 2vw, 1.8rem); }
.ep-prestation-guide li p { max-width: 47rem; margin: 0; line-height: 1.58; }

.ep-prestation-faq {
	display: grid;
	grid-template-columns: minmax(16rem, .7fr) minmax(0, 1.3fr);
	gap: clamp(3rem, 8vw, 8rem);
	max-width: 92rem;
	margin: 0 auto;
	padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 5vw, 5rem);
}
.ep-prestation-faq header h2 { max-width: 12ch; margin: .7rem 0 0; font-size: clamp(2.5rem, 4vw, 4.5rem); line-height: .98; letter-spacing: -.05em; }
.ep-prestation-faq details { border-top: 1px solid var(--ep-border); }
.ep-prestation-faq details:last-child { border-bottom: 1px solid var(--ep-border); }
.ep-prestation-faq summary { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; gap: 1rem; align-items: center; padding: 1.5rem 0; font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 780; cursor: pointer; list-style: none; }
.ep-prestation-faq summary::-webkit-details-marker { display: none; }
.ep-prestation-faq summary span { color: var(--ep-primary); font-size: 1.7rem; font-weight: 400; text-align: center; transition: transform .2s var(--ep-ease); }
.ep-prestation-faq details[open] summary span { transform: rotate(45deg); }
.ep-prestation-faq details p { max-width: 48rem; margin: -.3rem 3rem 1.6rem 0; color: var(--ep-muted-foreground); line-height: 1.65; }

@keyframes ep-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ep-hero-presence { from { transform: scale(1.055); } to { transform: scale(1); } }

@supports (animation-timeline: view()) {
	.ep-reveal { animation: ep-rise linear both; animation-timeline: view(); animation-range: entry 5% cover 30%; }
}

@media (max-width: 900px) {
	.ep-devis-hero { grid-template-columns: 1fr; }
	.ep-devis-hero__promise > span { margin-bottom: 1.25rem; }
	.ep-devis-layout { grid-template-columns: 1fr; gap: 3rem; }
	.ep-devis-guide { position: static; order: 2; }
	.ep-devis-guide h2 { max-width: 18ch; }
	.ep-editorial-hero { grid-template-columns: 1fr; }
	.ep-editorial-hero__visual { min-height: 22rem; order: initial; }
	.ep-editorial-intro { grid-template-columns: 1fr; gap: 2rem; }
	.ep-editorial-solutions > header,
	.ep-editorial-process__heading { grid-template-columns: 1fr; gap: 1rem; }
	.ep-editorial-process__steps { grid-template-columns: 1fr; }
	.ep-editorial-process article { padding: 2rem 0; border-bottom: 1px solid rgba(255,255,255,.22); }
	.ep-editorial-process article + article { padding-left: 0; border-left: 0; }
	.ep-prestation-catalogue__head,
	.ep-prestation-guide,
	.ep-prestation-faq { grid-template-columns: 1fr; gap: 2.5rem; }
	.ep-prestation-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ep-home-hero { min-height: calc(100svh - 74px); padding-bottom: 4rem; }
	.ep-home-hero__shade { background: linear-gradient(90deg, rgba(21,17,13,.88), rgba(21,17,13,.25)), linear-gradient(0deg, rgba(21,17,13,.7), transparent 65%); }
	.ep-home-proof { grid-template-columns: 1fr; gap: 0; }
	.ep-home-proof p { padding: 1.25rem 0; border-right: 0; border-bottom: 1px solid var(--ep-border); }
	.ep-home-proof p:last-child { border-bottom: 0; }
	.ep-home-intro { grid-template-columns: 1fr; }
	.ep-home-intro .ep-home-kicker { margin-bottom: -1rem; }
	.ep-home-services { grid-template-columns: 1fr; }
	.ep-home-service { min-height: 34rem; }
	.ep-home-workshop { grid-template-columns: 1fr; }
	.ep-home-workshop__copy { padding: 4rem 1.25rem; }
	.ep-home-project-grid { grid-template-columns: 1fr; }
	.ep-home-project-grid a:first-child { grid-row: auto; }
	.ep-home-section-head { align-items: start; flex-direction: column; }
}

@media (max-width: 600px) {
	.ep-devis-hero__copy { padding-block: 3.5rem; }
	.ep-devis-hero h1 { font-size: clamp(3.2rem, 16vw, 4.7rem); }
	.ep-devis-hero__promise { padding: 2rem 1.25rem; }
	.ep-devis-page { padding-block: 3.5rem !important; }
	.ep-form-submit { align-items: stretch; flex-direction: column; }
	.ep-devis-reassurance h2 { display: grid; gap: .6rem; }
	.ep-cookie-banner { grid-template-columns: 1fr; gap: 1.2rem; right: .65rem; bottom: .65rem; left: .65rem; padding: 1.2rem; }
	.ep-cookie-banner__actions { grid-template-columns: 1fr 1fr; }
	.ep-cookie-choice { padding-inline: .65rem; font-size: .84rem; }
	.ep-cookie-panel { width: calc(100vw - 1rem); max-height: calc(100svh - 1rem); padding: 1.25rem; }
	.ep-cookie-category { gap: .75rem; }
	.ep-cookie-panel__actions .ep-cookie-choice { width: 100%; }
	.ep-cookie-manage {
		right: .55rem;
		bottom: .55rem;
		padding: .42rem .62rem;
		font-size: 0;
		opacity: .88;
	}
	.ep-cookie-manage::before { content: "Cookies"; font-size: .68rem; }
	.ep-editorial-hero h1 { font-size: clamp(3rem, 15vw, 4.6rem); }
	.ep-editorial-hero__copy { padding-top: 3.5rem; padding-bottom: 3.5rem; }
	.ep-editorial-hero__visual { min-height: 16rem; }
	.ep-editorial-actions { align-items: stretch; flex-direction: column; }
	.ep-editorial-actions .ep-btn { width: 100%; max-width: none; justify-content: center; }
	.ep-editorial-text-link { align-self: flex-start; }
	.ep-editorial-proof { grid-template-columns: 1fr; }
	.ep-editorial-proof p { padding: 1rem 0; border-right: 0; border-bottom: 1px solid rgba(21,17,13,.28); }
	.ep-editorial-proof p:last-child { border-bottom: 0; }
	.ep-editorial-list li { grid-template-columns: 2.5rem minmax(0, 1fr); }
	.ep-prestation-products { grid-template-columns: 1fr; }
	.ep-prestation-guide li { grid-template-columns: 2.4rem minmax(0, 1fr); }
	.site-branding .custom-logo, .site-header-item .custom-logo { height: 50px; }
	.ep-home-hero h1 { font-size: clamp(3.15rem, 17vw, 5rem); }
	.ep-home-hero__caption { display: none; }
	.ep-home-actions { align-items: stretch; flex-direction: column; }
	.ep-home-actions .ep-btn { max-width: none; text-align: center; }
	.ep-home-actions .ep-home-link { align-self: flex-start; }
	.ep-home-service { min-height: 28rem; }
	.ep-home-project-grid a { min-height: 20rem; }
	.ep-form-grid { grid-template-columns: 1fr; }
	.ep-devis-form .ep-btn { width: 100%; max-width: none; }
}

/* ==================================================================
   Portfolio des realisations — galerie editoriale, image d'abord
   ================================================================== */
.ep-realisations-archive {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: clip;
}

@media (prefers-reduced-motion: reduce) {
	.ep-home-hero__media,
	.ep-home-hero__content,
	.ep-reveal { animation: none !important; }
	.ep-home-service img,
	.ep-home-project-grid img,
	.ep-editorial-hero__visual img,
	.ep-portfolio-feature__image,
	.ep-realisations-grid .ep-card--portfolio .ep-card__media { transition: none; }
	.ep-home-service::before { transition: opacity .15s linear; }
	.ep-home-service:hover img { transform: scale(1); filter: saturate(.78) contrast(1.03); }
}