/* ==========================================================================
   HOLDERBAUM — feuille de style centrale
   Préfixe : hb-   |   Compatible Divi 5   |   Aucune animation sur le site public.
   Sommaire :
   01. Police          02. Variables       03. Base / neutralisation Divi
   04. Sections & rangées                  05. Typographie
   06. Boutons          07. Photos          08. Avant / Après
   09. Cartes           10. Étapes          11. Repères
   12. Zones            13. Contact & formulaire
   14. Bandeau          15. Appel final     16. Header
   17. Footer           18. Responsive
   ========================================================================== */

/* 01. POLICE ------------------------------------------------------------ */
@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* 02. VARIABLES --------------------------------------------------------- */
:root {
	/* Couleurs */
	--hb-ink: #17202a;          /* texte principal, fonds sombres */
	--hb-ink-soft: #4a5560;     /* texte secondaire */
	--hb-accent: #b4542d;       /* terre cuite */
	--hb-accent-dark: #8f3f1f;
	--hb-bg: #ffffff;
	--hb-bg-alt: #f5f1ea;       /* ton enduit à la chaux */
	--hb-line: #e2dbd0;
	--hb-on-dark: #ffffff;
	--hb-on-dark-soft: #c3c9cf;

	/* Typographie */
	--hb-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--hb-fs-body: 1.0625rem;                         /* 17px */
	--hb-fs-small: .875rem;
	--hb-fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
	--hb-fs-h2: clamp(1.875rem, 1.4rem + 2vw, 3rem);
	--hb-fs-display: clamp(2.375rem, 1.6rem + 3.6vw, 4.5rem);
	--hb-lh: 1.65;

	/* Espacements */
	--hb-s-1: .5rem;
	--hb-s-2: 1rem;
	--hb-s-3: 1.5rem;
	--hb-s-4: 2.5rem;
	--hb-s-5: 4rem;
	--hb-section-y: clamp(4rem, 3rem + 5vw, 7.5rem);

	/* Gabarit */
	--hb-max: 1240px;
	--hb-gutter: 20px;

	/* Rayons */
	--hb-r: 14px;
	--hb-r-lg: 22px;
	--hb-r-pill: 999px;
}

/* 03. BASE / NEUTRALISATION DIVI ---------------------------------------- */
body,
body #page-container {
	font-family: var(--hb-font);
	font-size: var(--hb-fs-body);
	line-height: var(--hb-lh);
	color: var(--hb-ink-soft);
	background: var(--hb-bg);
}

body h1, body h2, body h3, body h4 {
	font-family: var(--hb-font);
	color: var(--hb-ink);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.02em;
	padding-bottom: 0;
}

body a { color: var(--hb-accent); }

/* Aucune animation sur le site public (classe hb-front absente dans le Visual Builder) */
.hb-front *, .hb-front *::before, .hb-front *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

/* 04. SECTIONS & RANGÉES ------------------------------------------------ */
body .et_pb_section.hb-section {
	padding: var(--hb-section-y) 0;
	background-color: var(--hb-bg);
}
body .et_pb_section.hb-section--alt  { background-color: var(--hb-bg-alt); }
body .et_pb_section.hb-section--dark { background-color: var(--hb-ink); color: var(--hb-on-dark-soft); }
body .et_pb_section.hb-section--tight { padding: var(--hb-s-4) 0; }

body .hb-section .et_pb_row {
	width: calc(100% - (var(--hb-gutter) * 2));
	max-width: var(--hb-max);
	padding: 0;
}
body .hb-section .et_pb_row + .et_pb_row { margin-top: var(--hb-s-4); }

body .hb-section .et_pb_column > .et_pb_module:not(:last-child) { margin-bottom: var(--hb-s-3); }
body .hb-section .et_pb_module { margin-bottom: 0; }

/* Colonnes : largeurs, alignements et retours à la ligne réglés dans Divi 5 (flexType, columnGap, alignItems). */

/* 05. TYPOGRAPHIE ------------------------------------------------------- */
.hb-eyebrow {
	display: inline-block;
	font-size: var(--hb-fs-small);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hb-accent);
	margin-bottom: var(--hb-s-2);
}
.hb-section--dark .hb-eyebrow { color: #e0a183; }

body .hb-section h1.hb-display {
	font-size: var(--hb-fs-display);
	line-height: 1.04;
	letter-spacing: -0.035em;
	margin-bottom: var(--hb-s-3);
}

body .hb-section h2 {
	font-size: var(--hb-fs-h2);
	margin-bottom: var(--hb-s-3);
}
body .hb-section h3 {
	font-size: var(--hb-fs-h3);
	margin-bottom: var(--hb-s-1);
}
body .hb-section--dark h2,
body .hb-section--dark h3 { color: var(--hb-on-dark); }

.hb-lead {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--hb-ink-soft);
	max-width: 38em;
}

body .hb-section p { padding-bottom: 0; }
body .hb-section p + p,
body .hb-section p + .hb-actions,
body .hb-section ul + .hb-actions { margin-top: var(--hb-s-2); }

/* Repère visuel des contenus à fournir (à retirer en production) */
.hb-todo {
	background: #fff3cd;
	color: #6b4e00;
	outline: 1px dashed #c9a227;
	padding: 0 .25em;
}

/* Listes à coche */
body .hb-checklist {
	list-style: none;
	padding: 0;
	margin: var(--hb-s-2) 0 0;
}
body .hb-checklist li {
	position: relative;
	padding: .35em 0 .35em 1.75em;
	border-bottom: 1px solid var(--hb-line);
	color: var(--hb-ink);
	font-weight: 500;
}
body .hb-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .8em;
	width: 1em;
	height: .55em;
	border-left: 2px solid var(--hb-accent);
	border-bottom: 2px solid var(--hb-accent);
	transform: rotate(-45deg);
}

/* 06. BOUTONS ----------------------------------------------------------- */
.hb-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hb-s-2);
	align-items: center;
}
body a.hb-btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .95em 1.6em;
	border-radius: var(--hb-r-pill);
	background: var(--hb-accent);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	border: 2px solid var(--hb-accent);
}
body a.hb-btn:hover,
body a.hb-btn:focus-visible { background: var(--hb-accent-dark); border-color: var(--hb-accent-dark); color: #fff; }

body a.hb-btn--outline {
	background: transparent;
	color: var(--hb-ink);
	border-color: var(--hb-ink);
}
body a.hb-btn--outline:hover,
body a.hb-btn--outline:focus-visible { background: var(--hb-ink); color: #fff; border-color: var(--hb-ink); }

.hb-section--dark a.hb-btn--outline { color: #fff; border-color: #fff; }
.hb-section--dark a.hb-btn--outline:hover { background: #fff; color: var(--hb-ink); }

body a.hb-phone {
	font-weight: 700;
	color: var(--hb-ink);
	text-decoration: none;
	white-space: nowrap;
}
.hb-section--dark a.hb-phone { color: #fff; }

a:focus-visible { outline: 3px solid var(--hb-accent); outline-offset: 3px; }

/* 07. PHOTOS (module Image Divi, classe hb-photo + variante de format) -- */
body .et_pb_image.hb-photo { width: 100%; }
body .hb-photo .et_pb_image_wrap {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;            /* réserve l'espace : pas de décalage */
	overflow: hidden;
	border-radius: var(--hb-r-lg);
	background: var(--hb-bg-alt);
}
body .hb-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body .hb-photo--tall .et_pb_image_wrap   { aspect-ratio: 4 / 5; }
body .hb-photo--wide .et_pb_image_wrap   { aspect-ratio: 16 / 10; }
body .hb-photo--square .et_pb_image_wrap { aspect-ratio: 1 / 1; }

/* 08. AVANT / APRÈS (module Image + hb-ba + hb-ba--avant / hb-ba--apres) */
body .hb-ba .et_pb_image_wrap::after {
	position: absolute;
	left: 14px;
	top: 14px;
	padding: .45em .9em;
	border-radius: var(--hb-r-pill);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
}
body .hb-ba--avant .et_pb_image_wrap::after { content: "Avant"; background: #fff; color: var(--hb-ink); }
body .hb-ba--apres .et_pb_image_wrap::after { content: "Après"; background: var(--hb-accent); color: #fff; }

/* 09. CARTES (module Texte + hb-card) ---------------------------------- */
body .et_pb_text.hb-card {
	height: 100%;
	padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
	border-radius: var(--hb-r-lg);
	background: var(--hb-bg);
	border: 1px solid var(--hb-line);
}
.hb-section--alt .hb-card { border-color: transparent; }
body .et_pb_text.hb-card--feature {
	background: var(--hb-ink);
	border-color: var(--hb-ink);
	color: var(--hb-on-dark-soft);
}
body .hb-card--feature h3 { color: #fff; }
body .hb-card--feature .hb-checklist li { color: #fff; border-color: rgba(255,255,255,.14); }
body .et_pb_text.hb-card--accent {
	background: var(--hb-accent);
	border-color: var(--hb-accent);
	color: #fff;
}
body .hb-card--accent h3,
body .hb-card--accent a.hb-phone { color: #fff; }
body .hb-card--accent a.hb-btn--outline { color: #fff; border-color: #fff; }

.hb-card__num {
	display: block;
	font-size: var(--hb-fs-small);
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--hb-accent);
	margin-bottom: var(--hb-s-3);
}
.hb-card--feature .hb-card__num { color: #e0a183; }
.hb-card--accent .hb-card__num { color: #fff; }

/* Cartes à hauteur égale (classe à poser sur la rangée) */
body .hb-row--cards > .et_pb_column { display: flex; flex-direction: column; }
body .hb-row--cards > .et_pb_column > .et_pb_module { flex: 1 1 auto; }

/* 10. ÉTAPES ------------------------------------------------------------ */
body .et_pb_text.hb-step {
	height: 100%;
	padding-top: var(--hb-s-3);
	border-top: 2px solid var(--hb-ink);
}
.hb-section--dark .hb-step { border-top-color: #fff; }
.hb-step__num {
	display: block;
	font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--hb-accent);
	margin-bottom: var(--hb-s-2);
}

/* 11. REPÈRES (faits vérifiés) ----------------------------------------- */
.hb-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hb-s-1);
	margin-bottom: var(--hb-s-3);
}
.hb-fact {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .5em 1em;
	border-radius: var(--hb-r-pill);
	background: var(--hb-bg-alt);
	color: var(--hb-ink);
	font-size: var(--hb-fs-small);
	font-weight: 600;
}
.hb-fact::before {
	content: "";
	width: .5em;
	height: .5em;
	border-radius: 50%;
	background: var(--hb-accent);
}

.hb-figure {
	display: block;
	font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
	font-weight: 800;
	line-height: .95;
	letter-spacing: -0.05em;
	color: var(--hb-ink);
}
.hb-section--dark .hb-figure,
.hb-card--feature .hb-figure { color: #fff; }

/* 12. ZONES ------------------------------------------------------------- */
body ul.hb-zones {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
}
body .hb-zones li {
	padding: .7em 1.2em;
	border: 1px solid var(--hb-line);
	border-radius: var(--hb-r-pill);
	background: var(--hb-bg);
	color: var(--hb-ink);
	font-weight: 600;
	line-height: 1;
}
.hb-zones__cp { color: var(--hb-ink-soft); font-weight: 500; margin-left: .35em; }

/* 13. CONTACT & FORMULAIRE --------------------------------------------- */
.hb-contact-list { display: grid; gap: var(--hb-s-2); margin-top: var(--hb-s-3); }
.hb-contact-item {
	padding: var(--hb-s-3);
	border-radius: var(--hb-r);
	background: var(--hb-bg);
	border: 1px solid var(--hb-line);
}
.hb-contact-item__label {
	display: block;
	font-size: var(--hb-fs-small);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hb-ink-soft);
	margin-bottom: .25em;
}
.hb-contact-item__value,
body a.hb-contact-item__value {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--hb-ink);
	text-decoration: none;
	word-break: break-word;
}

body .et_pb_contact_form_container.hb-form {
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
	border-radius: var(--hb-r-lg);
	background: var(--hb-bg);
	border: 1px solid var(--hb-line);
}
body .hb-form .et_pb_contact_form_label { display: block; }
body .hb-form .et_pb_contact p input,
body .hb-form .et_pb_contact p textarea {
	padding: 14px 16px;
	border: 1px solid var(--hb-line);
	border-radius: 10px;
	background: #fff;
	color: var(--hb-ink);
	font-family: var(--hb-font);
	font-size: 1rem;
}
body .hb-form .et_pb_contact p input:focus,
body .hb-form .et_pb_contact p textarea:focus { border-color: var(--hb-ink); outline: none; }
body .hb-form .et_pb_contact_submit,
body .hb-form .et_pb_contact_submit:hover {
	padding: .95em 1.8em;
	border: 2px solid var(--hb-accent);
	border-radius: var(--hb-r-pill);
	background: var(--hb-accent);
	color: #fff;
	font-family: var(--hb-font);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}
body .hb-form .et_pb_contact_submit:hover { background: var(--hb-accent-dark); border-color: var(--hb-accent-dark); }
body .hb-form .et_pb_contact_submit::after { display: none; }
.hb-form-note { font-size: var(--hb-fs-small); color: var(--hb-ink-soft); }

/* 14. BANDEAU STATIQUE -------------------------------------------------- */
body .et_pb_section.hb-band { padding: 1.5rem 0; background: var(--hb-accent); }
.hb-band__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #fff;
	font-size: clamp(1rem, .9rem + .6vw, 1.375rem);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.2;
}
.hb-band__list li + li::before { content: "✦"; margin-right: 1.75rem; opacity: .6; }

/* 15. APPEL FINAL ------------------------------------------------------- */
body a.hb-bigphone {
	display: inline-block;
	font-size: clamp(2.25rem, 1.5rem + 4vw, 5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	color: #fff;
	text-decoration: none;
}
body a.hb-bigphone:hover { color: #e0a183; }

/* 16. HEADER (Theme Builder) ------------------------------------------- */
body .et_pb_section.hb-header {
	padding: 14px 0;
	background: var(--hb-bg);
	border-bottom: 1px solid var(--hb-line);
}
body .hb-header .hb-actions { justify-content: flex-end; flex-wrap: nowrap; }
body a.hb-logo {
	display: inline-block;
	color: var(--hb-ink);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-decoration: none;
}
.hb-logo__sub {
	display: block;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hb-accent);
}
.hb-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .25rem 1.75rem;
}
body .hb-nav a {
	color: var(--hb-ink);
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 2.75rem;          /* zone tactile ≥ 44px */
}
body .hb-nav a:hover { color: var(--hb-accent); }

/* 17. FOOTER (Theme Builder) ------------------------------------------- */
body .et_pb_section.hb-footer {
	padding: var(--hb-s-5) 0 var(--hb-s-3);
	background: var(--hb-ink);
	color: var(--hb-on-dark-soft);
	font-size: .9375rem;
}
body .hb-footer a { color: #fff; text-decoration: none; }
body .hb-footer a:hover { color: #e0a183; }
body .hb-footer .hb-logo { color: #fff; }
.hb-footer__title {
	display: block;
	margin-bottom: var(--hb-s-2);
	color: #fff;
	font-size: var(--hb-fs-small);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
body .hb-footer ul { list-style: none; padding: 0; margin: 0; }
body .hb-footer li { padding: .2em 0; }
body .hb-footer .et_pb_row.hb-footer__bottom {
	margin-top: var(--hb-s-4);
	padding-top: var(--hb-s-3);
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: var(--hb-fs-small);
}

/* 18. RESPONSIVE -------------------------------------------------------- */
@media (max-width: 980px) {
	body .hb-section .et_pb_row + .et_pb_row { margin-top: var(--hb-s-3); }
	body .hb-header .hb-header__nav { display: none; }
	.hb-lead { font-size: 1.0625rem; }
}

@media (max-width: 767px) {
	:root { --hb-gutter: 16px; }
	body .hb-photo--tall .et_pb_image_wrap { aspect-ratio: 4 / 3; }
	body .hb-section:not(.hb-header) a.hb-btn { width: 100%; justify-content: center; }
	body .hb-header a.hb-phone { display: none; }
	.hb-band__list li + li::before { margin-right: .75rem; }
	.hb-band__list { gap: .4rem .75rem; }
}

/* Utilitaires ------------------------------------------------------------ */
.hb-right { text-align: right; }
@media (max-width: 767px) { .hb-right { text-align: left; } }