/*
 * PATTERNS — un bloc de règles par pattern (/patterns/*.php dans le thème).
 * Chaque section est ciblée par sa classe additionnelle (.eb-hero, .eb-lavage…).
 */

/* Pastille générique (style Alethia) */
.eb-pill {
	display: inline-flex; align-items: center; gap: 0.6rem;
	padding: 0.6rem 1rem 0.6rem 0.75rem;
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--anthracite);
	border-radius: var(--wp--custom--radius--medium);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	white-space: nowrap;
}
.eb-pill__dot {
	width: 14px; height: 14px; flex: none;
	background: var(--eb-accent);
	clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
.eb-footnote { font-size: var(--wp--preset--font-size--x-small); color: var(--eb-muted); }

/* ===========================================================================
 * HERO — core/cover avec vidéo de fond
 * ======================================================================== */
.eb-hero {
	min-height: 100svh;
	align-items: flex-end;
	padding: calc(var(--eb-header-h) + var(--wp--preset--spacing--60)) 0 var(--wp--preset--spacing--70);
	background-color: var(--wp--preset--color--anthracite);
	color: var(--eb-ink-on-dark);
	overflow: hidden;
}
/* Voile : lisibilité du texte en bas à gauche, la vidéo reste visible en haut à droite */
.eb-hero .wp-block-cover__background {
	opacity: 1;
	background:
		linear-gradient(0deg, rgba(50, 50, 50, 0.92) 0%, rgba(50, 50, 50, 0.55) 38%, rgba(50, 50, 50, 0.1) 70%),
		linear-gradient(90deg, rgba(50, 50, 50, 0.55) 0%, rgba(50, 50, 50, 0) 60%);
}
.eb-hero__content { --wp--style--block-gap: var(--wp--preset--spacing--40); width: 100%; }
.eb-origin {
	display: inline-flex; align-items: center; gap: 0.7rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: color-mix(in srgb, var(--eb-ink-on-dark) 80%, transparent);
}
.eb-origin::before {
	content: ""; flex: none; width: 18px; height: 12px; border-radius: 1px;
	background: linear-gradient(90deg, #2B4FA8 33.3%, #F3F3F1 33.3% 66.6%, #D8343F 66.6%);
}
.eb-hero__content .eb-hero__title { margin-top: var(--wp--preset--spacing--30); }
.eb-hero__title {
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.98;
	letter-spacing: -0.02em;
	max-width: 12ch;
}
.eb-hero__lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	color: var(--eb-ink-on-dark);
	max-width: 32ch;
}
.eb-hero .wp-block-buttons { margin-top: var(--wp--preset--spacing--50) !important; }

/* Emplacement provisoire tant qu'aucune vidéo n'est renseignée */
.eb-hero__placeholder { display: none; }
.eb-hero.is-placeholder .wp-block-cover__video-background { display: none; }
.eb-hero.is-placeholder .eb-hero__placeholder {
	display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 0.5rem;
	position: absolute; inset: 0; z-index: 0;
	padding: calc(var(--eb-header-h) + 2rem) var(--wp--style--root--padding-right) 0;
	text-align: right;
	background:
		radial-gradient(80% 70% at 75% 35%, rgba(255, 255, 255, 0.08), transparent 70%),
		url("../textures/beton-sombre.jpg") 0 0 / 512px;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--x-small);
	color: rgba(255, 255, 255, 0.85);
}
.eb-hero__placeholder p:first-child { font-size: var(--wp--preset--font-size--small); font-weight: 500; color: #fff; }
.eb-hero__placeholder p { max-width: 34ch; }
.eb-hero__placeholder-sub { opacity: 0.75; }
@media (max-width: 781px) { .eb-hero.is-placeholder .eb-hero__placeholder { justify-content: flex-start; } }

/* Bouton pause (critère d'accessibilité : une animation de plus de 5 s doit pouvoir être arrêtée) */
.eb-hero__toggle {
	position: absolute; z-index: 2;
	right: var(--wp--style--root--padding-right); bottom: var(--wp--preset--spacing--50);
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(50, 50, 50, 0.35);
	color: #fff; cursor: pointer; display: grid; place-items: center;
}
.eb-hero__toggle[hidden] { display: none; }
.eb-hero__toggle:hover { border-color: #fff; }
.eb-hero__toggle-pause { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.eb-hero__toggle[aria-pressed="true"] .eb-hero__toggle-pause {
	width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent currentColor; margin-left: 4px;
}

/* ===========================================================================
 * CHIFFRES CLÉS (bande claire sous le hero)
 * ======================================================================== */
.eb-stats-band { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); }
/* Chiffres clés */
.eb-stats {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
	width: 100%;
}
.eb-stat { position: relative; padding: 1.4rem 0 0 1.4rem; --wp--style--block-gap: 0; }
.eb-stat::before {
	content: ""; position: absolute; top: 0; left: 0; width: 22px; height: 21.5px;
	background: var(--eb-accent);
	-webkit-mask: var(--eb-crochet-mask) center / contain no-repeat; mask: var(--eb-crochet-mask) center / contain no-repeat;
}
.eb-stats { display: grid; }
.eb-stat__num {
	font-family: var(--wp--preset--font-family--goldman);
	padding-bottom: 0.08em; /* évite de rogner le remplissage béton sous la ligne de base */
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.eb-stat__label { margin-top: 0.6rem; font-size: var(--wp--preset--font-size--small); color: var(--eb-muted); max-width: 26ch; }
.eb-stat sup a { color: var(--eb-accent); text-decoration: none; margin-left: 2px; }
@media (max-width: 860px) { .eb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===========================================================================
 * TOUR DE LA MACHINE (intro ; le bloc a son propre CSS)
 * ======================================================================== */
.eb-hero__title, .eb-section-title, .wp-block-eb-data-card { word-break: normal; overflow-wrap: normal; }
.eb-tour-section { padding-top: var(--wp--preset--spacing--70); }
.eb-tour-intro { --wp--style--block-gap: var(--wp--preset--spacing--30); margin-bottom: var(--wp--preset--spacing--50); }

/* ===========================================================================
 * AUTO-LAVAGE
 * ======================================================================== */
.eb-lavage__cols { gap: var(--wp--preset--spacing--70); }
.eb-lavage__text { --wp--style--block-gap: var(--wp--preset--spacing--40); }
.eb-lavage .eb-section-title { max-width: 15ch; }
.eb-benefits { --wp--style--block-gap: 0; }
.eb-benefit {
	grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) 0;
	border-top: 1px solid var(--eb-line);
}
.eb-benefit h3 { font-family: var(--wp--preset--font-family--montserrat); font-weight: 600; font-size: var(--wp--preset--font-size--medium); letter-spacing: 0; line-height: 1.4; }
.eb-benefit p { color: var(--eb-muted); }
@media (max-width: 600px) { .eb-benefit { grid-template-columns: 1fr; gap: 0.3rem; } }

.eb-lavage__visual { position: relative; isolation: isolate; }
.eb-lavage__chart-card { position: relative; }
.eb-lavage__chart-card::after {
	content: ""; position: absolute; z-index: 1; width: 46px; height: 45px; left: -20px; top: -20px;
	background: var(--eb-accent);
	-webkit-mask: var(--eb-crochet-mask) center / contain no-repeat; mask: var(--eb-crochet-mask) center / contain no-repeat;
}
.eb-lavage .eb-footnote { margin-top: var(--wp--preset--spacing--30); }

/* ===========================================================================
 * GAMME
 * ======================================================================== */
.eb-gamme__head { display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; margin-bottom: var(--wp--preset--spacing--60) !important; gap: var(--wp--preset--spacing--40); }
@media (max-width: 781px) { .eb-gamme__head { grid-template-columns: 1fr; } }
.eb-gamme__head .eb-lede { max-width: 38ch; }
.eb-gamme__compare { margin-top: var(--wp--preset--spacing--50) !important; }

/* ===========================================================================
 * OPTIONS — cartes (une active à la fois), d'après la référence fournie
 * ======================================================================== */
.eb-options__head {
	display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end;
	gap: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--60) !important;
}
.eb-options__head .eb-lede { max-width: 34ch; }
@media (max-width: 781px) { .eb-options__head { grid-template-columns: 1fr; } }

/* ===========================================================================
 * PRATIQUE (contenu porté par le bloc eb/audience-tabs)
 * ======================================================================== */
.eb-pratique__head { margin-bottom: var(--wp--preset--spacing--50) !important; }
.eb-pratique__head .eb-section-title { max-width: 22ch; }
.eb-pratique__note { margin-top: var(--wp--preset--spacing--40) !important; }

/* ===========================================================================
 * EASY VRAC
 * ======================================================================== */
.eb-vrac__cols { gap: var(--wp--preset--spacing--60); }
.eb-vrac__text { --wp--style--block-gap: var(--wp--preset--spacing--40); }
.eb-vrac .eb-section-title { max-width: 16ch; }
.eb-vrac__points li { padding: 0.8rem 0; align-items: center; }
.eb-vrac__points li:first-child { border-top: 0; }
.eb-vrac .wp-block-buttons { margin-top: var(--wp--preset--spacing--50) !important; }
.eb-vrac__visuel {
	position: relative; margin: 0;
	aspect-ratio: 5 / 4;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--graphite) url("../textures/beton-sombre.jpg") 0 0 / 512px;
	display: grid; place-items: center;
	container-type: inline-size;
}
.eb-vrac__mot {
	font-family: var(--wp--preset--font-family--goldman); font-weight: 700;
	font-size: 30cqw; line-height: 0.8; letter-spacing: -0.02em;
	padding: 0 0.04em;
}
.eb-vrac__visuel { overflow: hidden; }
.eb-vrac__visuel img { border-radius: inherit; }
.eb-vrac__visuel figcaption {
	position: absolute; left: 1rem; bottom: 1rem;
	font-size: var(--wp--preset--font-size--x-small); font-weight: 600;
	background: rgba(255, 255, 255, 0.12); color: var(--eb-ink-on-dark);
	padding: 0.3rem 0.6rem; border-radius: var(--wp--custom--radius--small);
}

/* ===========================================================================
 * ÉTAPES DU PROJET
 * ======================================================================== */
.eb-etapes__title { margin-bottom: var(--wp--preset--spacing--60) !important; max-width: 20ch; }
.eb-etapes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30); }
.eb-etape {
	gap: var(--wp--preset--spacing--40); align-items: flex-start !important;
	background: var(--wp--preset--color--beton-clair);
	border-radius: var(--wp--custom--radius--large);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}
.eb-etape__num {
	flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--eb-accent); color: #000; /* chiffre en noir : meilleure lisibilité sur l'orange */
	font-family: var(--wp--preset--font-family--goldman); font-weight: 700; font-size: 1.1rem;
}
.eb-etape h3 { font-family: var(--wp--preset--font-family--montserrat); font-size: var(--wp--preset--font-size--large); font-weight: 600; letter-spacing: 0; margin-bottom: 0.35rem; }
.eb-etape p { color: var(--eb-muted); }
.eb-etape > .wp-block-group { --wp--style--block-gap: 0.4rem; flex: 1; }

.eb-etapes__note { margin-top: var(--wp--preset--spacing--40) !important; color: var(--eb-muted); }
@media (max-width: 720px) { .eb-etapes__grid { display: grid; grid-template-columns: 1fr; } }

/* ===========================================================================
 * MADE IN FRANCE (collage)
 * ======================================================================== */
.eb-mif__collage {
	display: grid !important;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: 78px;
	gap: var(--wp--preset--spacing--30);
}
.eb-ph {
	margin: 0; position: relative; overflow: hidden;
	border-radius: var(--wp--custom--radius--large);
	/* Emplacement photo provisoire : aplat graphite (la matière est réservée aux vrais usages de texture) */
	background: var(--wp--preset--color--graphite);
	display: flex; align-items: flex-end;
}
.eb-ph img, .eb-vrac__visuel img, .eb-mif__matiere img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eb-mif__matiere { position: relative; }
.eb-ph figcaption {
	padding: 0.9rem 1rem;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--x-small);
	color: #fff;
}
.eb-mif__collage .wp-block-eb-data-card { align-self: start; }
.eb-mif__t1 { grid-column: 1 / 4; grid-row: 1 / 4; }
.eb-mif__t2 { grid-column: 5 / 8; grid-row: 1 / 2; }
.eb-mif__t3 { grid-column: 10 / 13; grid-row: 1 / 4; }
.eb-mif__t4 { grid-column: 11 / 13; grid-row: 4 / 6; }
.eb-mif__center { grid-column: 4 / 10; grid-row: 2 / 7; align-self: center; text-align: center; padding: 0 var(--wp--preset--spacing--40); --wp--style--block-gap: var(--wp--preset--spacing--30); }
.eb-mif__center .eb-section-title, .eb-mif__center .eb-lede { margin-left: auto; margin-right: auto; }
.eb-mif__center .eb-section-title.eb-bracketed { max-width: none; padding: 0.3em 0.9em; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.7rem); }
.eb-mif__t5 { grid-column: 1 / 4; grid-row: 5 / 8; }
.eb-mif__t6 { grid-column: 10 / 13; grid-row: 6 / 8; }
.eb-mif__t7 { grid-column: 6 / 10; grid-row: 7 / 9; }
/* Tuile « matière » : la photo du mur béton (joints de banche), en image et non en fond */
.eb-mif__matiere { margin: 0; overflow: hidden; border-radius: var(--wp--custom--radius--large); }
.eb-mif__matiere img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.25) brightness(0.92); }
.eb-frenchfab {
	display: inline-flex; align-items: center; gap: 0.6rem;
	font-weight: 600; font-size: var(--wp--preset--font-size--small);
	padding: 0.45rem 0.9rem; border-radius: 999px;
	background: var(--wp--preset--color--blanc);
}
.eb-frenchfab::before {
	content: ""; width: 18px; height: 12px; border-radius: 1px;
	background: linear-gradient(90deg, #2B4FA8 33.3%, #F3F3F1 33.3% 66.6%, #D8343F 66.6%);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
@media (max-width: 960px) {
	.eb-mif__collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
	.eb-mif__collage > * { grid-column: auto !important; grid-row: auto !important; }
	.eb-mif__center { grid-column: 1 / -1 !important; order: -1; padding: 0 0 var(--wp--preset--spacing--40); }
	.eb-ph { min-height: 200px; }
}

/* ===========================================================================
 * INSTALLATIONS
 * ======================================================================== */
.eb-install .wp-block-columns { gap: var(--wp--preset--spacing--60); }
.eb-install__text { --wp--style--block-gap: var(--wp--preset--spacing--40); }
.eb-install__list {
	list-style: none; margin: var(--wp--preset--spacing--30) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--40);
}
.eb-install__list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--eb-line); }
.eb-install__list li span:last-child { white-space: nowrap; color: var(--eb-muted); font-family: var(--wp--preset--font-family--montserrat); font-size: var(--wp--preset--font-size--x-small); align-self: center; }
.eb-install__list li.is-siege span:first-child::after { content: " (atelier)"; color: var(--eb-accent); font-weight: 500; }
.eb-install .wp-block-buttons { margin-top: var(--wp--preset--spacing--40); }
@media (max-width: 480px) { .eb-install__list { grid-template-columns: 1fr; } }

/* ===========================================================================
 * CTA
 * ======================================================================== */
.eb-cta { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); position: relative; overflow: hidden; isolation: isolate; }
.eb-cta__title { font-size: var(--wp--preset--font-size--xx-large); }
.eb-cta__text { font-size: var(--wp--preset--font-size--large); max-width: 44ch; margin-top: var(--wp--preset--spacing--30) !important; }
.eb-cta__link { font-weight: 600; text-underline-offset: 4px; }
.eb-cta__actions .wp-block-buttons { justify-content: flex-end; }
@media (min-width: 782px) { .eb-cta__actions { padding-right: clamp(150px, 17vw, 260px); } }
.eb-btn-icon { width: 16px; height: 16px; margin-right: 0.55rem; fill: currentColor; }
@media (max-width: 781px) { .eb-cta__actions .wp-block-buttons { justify-content: flex-start; } }

/* Made in France : explosion au scroll (classe ajoutée par js/blocks/eb-explode.js) */
.eb-collage.has-explode { height: 250svh; }
.eb-collage.has-explode .eb-mif__pin {
	position: sticky; top: var(--eb-header-h);
	height: calc(100svh - var(--eb-header-h));
	display: flex; align-items: center;
}
.eb-collage.has-explode .eb-mif__collage { width: 100%; grid-auto-rows: minmax(0, calc((100svh - var(--eb-header-h) - 9 * var(--wp--preset--spacing--30)) / 8)); }
.eb-collage.has-explode .eb-mif__collage > :not(.eb-mif__center) { position: relative; z-index: 2; will-change: transform; box-shadow: 0 18px 40px rgba(50, 50, 50, 0.18); }
.eb-collage.has-explode .eb-mif__center { position: relative; z-index: 1; }

/* ===========================================================================
 * Thème WordPress : les groupes natifs en mise en page « flux » ajoutent une marge
 * haute à chaque enfant ; dans les grilles et rangées du thème, on la neutralise.
 * ======================================================================== */
:is(.eb-stats, .eb-etapes__grid, .eb-install__list, .eb-mif__collage, .eb-audience-tabs, .eb-tabs__panel,
	.eb-card__value, .eb-card__legend, .eb-borne__etapes, .eb-footer__grid, .eb-gamme__head, .eb-options__head,
	.eb-benefits, .eb-benefit, .eb-etape) > * { margin-block-start: 0 !important; }
.eb-benefit { display: grid !important; }

/* Liste des installations (groupes natifs : une rangée = ville + département) */
.eb-install__list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--30) !important; }
.eb-install__row { display: flex !important; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--eb-line); }
.eb-install__row p { margin: 0; }
.eb-install__row p:last-child { white-space: nowrap; color: var(--eb-muted); font-size: var(--wp--preset--font-size--x-small); align-self: center; }
.eb-install__row.is-siege p:first-child { color: var(--eb-accent); }
@media (max-width: 480px) { .eb-install__list { grid-template-columns: 1fr; } }

/* Pied de page : adresse */
.eb-footer__adresse { color: var(--eb-muted); line-height: 1.7; margin-top: var(--wp--preset--spacing--40) !important; }