/* Police du site : Pathway Extreme (choisie le 2026-10-28 parmi cinq propositions,
   P4), servie par le thème, licence OFL. Une seule famille, titres et texte. */
@font-face { font-family: 'Pathway Extreme'; src: url(polices/pathway-extreme-wght.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* HK Service – mise en page (d'après « HK Service Lyon v3 »).
   Largeurs de la checklist : --hk-shell pour l'en-tête et les bandeaux pleine
   largeur (gouttière comprise), --hk-content pour les sections qui ont déjà
   leur propre padding. Les deux restent liées : shell = content + 2 × 40 px,
   sinon l'en-tête se décale du texte. */
:root {
	--hk-ink: #0F2318;
	--hk-muted: #5B6B60;
	--hk-orange: #E2650F;
	--hk-rust: #B8500B;
	--hk-yellow: #35C67F;
	--hk-line: #E2DED4;
	--hk-cream: #F6F2E9;
	--hk-border: #DDD7C9;
	--hk-placeholder: #CFC9BB;
	--hk-content: 1560px;
	--hk-shell: 1640px;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; font-family: 'Pathway Extreme', system-ui, sans-serif; color: var(--hk-ink); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4 { margin: 0; font-family: 'Pathway Extreme', sans-serif; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.hk-site ul, .hk-site ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--hk-rust); text-decoration: none; }
a:hover { color: var(--hk-ink); }
input, textarea, select, button { font-family: 'Pathway Extreme', system-ui, sans-serif; }
img { max-width: 100%; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 90px; }
:focus-visible { outline: 3px solid var(--hk-yellow); outline-offset: 2px; }

/* Structure */
.hk-wrap { max-width: var(--hk-content); margin: 0 auto; }
.hk-inner { max-width: var(--hk-shell); margin: 0 auto; padding: 0 40px; }
.hk-sec { padding: 96px 40px; }
.hk-sec--flush { padding: 96px 0; }
.hk-sec--white { background: #FFFFFF; }
.hk-sec--cream { background: linear-gradient(180deg, #F6F2E9 0%, #EFEAE1 100%); }
.hk-sec--dark { background: linear-gradient(180deg, #15301F 0%, #181513 100%); color: #FFFFFF; }
.hk-split { max-width: var(--hk-content); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 56px; align-items: stretch; }
.hk-split > *, .hk-hero__grid > *, .hk-contact-grid > * { min-width: 0; }
.hk-stripe { height: 16px; background-image: repeating-linear-gradient(135deg, #0F2318 0 18px, #35C67F 18px 36px); }

/* Typo */
.hk-eyebrow { font-family: 'Pathway Extreme', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--hk-rust); }
.hk-sec--dark .hk-eyebrow { color: var(--hk-orange); }
.hk-h2 { margin-top: 26px; font-size: clamp(34px, 3.8vw, 52px); line-height: 1.06; }
.hk-sec--dark .hk-h2 { color: #FFFFFF; }
.hk-lead { margin-top: 22px; font-size: 19px; line-height: 1.75; color: var(--hk-muted); }
.hk-sec--dark .hk-lead { color: #C9D5CD; }
.hk-kicker { font-family: 'Pathway Extreme', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hk-rust); }
.hk-body { font-size: 18px; line-height: 1.75; color: var(--hk-muted); }
.hk-strong-line { font-size: 19px; font-weight: 700; color: var(--hk-ink); }

/* Photos : vraies balises <img> dans un cadre, pour MP Images et MP Visuels */
.hk-photos { align-self: stretch; display: flex; flex-direction: column; gap: 16px; min-height: 520px; }
.hk-photo { position: relative; flex: 1; min-height: 240px; border-radius: 14px; overflow: hidden; background: var(--hk-placeholder); }
.hk-photo img, .hk-service__img img, .hk-hero__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Boutons */
.hk-btn { display: inline-flex; align-items: center; gap: 10px; padding: 19px 30px; font-size: 18px; font-weight: 700; line-height: 1.2; border-radius: 10px; border: 0; cursor: pointer; white-space: nowrap; }
.hk-btn--orange { background: var(--hk-orange); color: #FFFFFF; }
.hk-btn--orange:hover { background: var(--hk-rust); color: #FFFFFF; }
.hk-btn--light { background: #FFFFFF; border: 1px solid var(--hk-line); color: var(--hk-ink); padding: 18px 28px; }
.hk-btn--light:hover { border-color: var(--hk-ink); color: var(--hk-ink); }
.hk-btn--dark { background: var(--hk-ink); color: #FFFFFF; padding: 16px 24px; font-size: 17px; }
.hk-btn--dark:hover { background: #000000; color: #FFFFFF; }

/* Listes à puces carrées */
.hk-bullets { display: grid; gap: 14px; margin-top: 18px; }
.hk-bullets li { display: flex; gap: 14px; font-size: 18px; line-height: 1.6; color: #2B3A31; }
.hk-bullets li::before { content: ""; flex: 0 0 auto; width: 12px; height: 12px; background: var(--hk-orange); margin-top: 8px; }
.hk-card-cream { background: var(--hk-cream); border: 1px solid var(--hk-border); border-radius: 14px; }

/* En-tête : aligné sur le texte des sections, se compacte au défilement */
.hk-header { position: sticky; top: 0; z-index: 40; background: #FBF8F1; border-bottom: 1px solid transparent; }
.hk-header.is-scrolled { background: #FFFFFF; border-bottom-color: var(--hk-line); }
.hk-header__in { max-width: var(--hk-shell); margin: 0 auto; padding: 8px 40px; display: flex; align-items: center; gap: 28px; }
.hk-header.is-compact .hk-header__in { padding-top: 5px; padding-bottom: 5px; }
.hk-logo img { height: 54px; width: auto; display: block; }
.hk-header.is-compact .hk-logo img { height: 44px; }
.hk-nav .hk-btn--dark { padding: 12px 20px; font-size: 16px; }

/* Titre de la bannière en trois lignes */
.hk-h1__pre { display: block; margin-bottom: 10px; }

/* Prestations : quatre cartes sur deux colonnes */
.hk-services__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hk-services__grid--4 .hk-service__img { height: 300px; }
.hk-services__grid--4 .hk-service h3 { font-size: 28px; line-height: 1.15; }

/* Pourquoi nous choisir : cartes titrées */
.hk-reason h3 { margin-top: 20px; font-size: 22px; line-height: 1.3; letter-spacing: -.01em; }
.hk-reason h3 + p { margin-top: 10px; }
.hk-reason p a { color: var(--hk-rust); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
	.hk-services__grid--4 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.hk-header .hk-logo img { height: 44px; }
	.hk-header.is-compact .hk-logo img { height: 38px; }
	.hk-services__grid--4 .hk-service__img { height: 220px; }
	.hk-services__grid--4 .hk-service h3 { font-size: 23px; }
}
.hk-logo__text { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--hk-ink); }
.hk-logo__text--light { color: #FFFFFF; }
.hk-nav { display: flex; gap: 26px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.hk-nav__link { position: relative; color: var(--hk-ink); font-size: 16px; font-weight: 600; }
.hk-nav__link:hover { color: var(--hk-rust); }
.hk-burger { display: none; }
.hk-nav__mobile { display: none; }

/* Au défilement, l'en-tête passe en noir (essai du 2026-09-13). */
.hk-header.is-scrolled { background: #0A1810; border-bottom-color: #0A1810; }
.hk-header.is-scrolled .hk-logo img { filter: brightness(0) invert(1); }
.hk-header.is-scrolled .hk-logo__text { color: #FFFFFF; }
.hk-header.is-scrolled .hk-nav__link { color: #FFFFFF; }
.hk-header.is-scrolled .hk-nav__link:hover { color: var(--hk-yellow); }
.hk-header.is-scrolled .hk-btn--dark { background: var(--hk-orange); }
.hk-header.is-scrolled .hk-btn--dark:hover { background: var(--hk-rust); }
.hk-header.is-scrolled .hk-burger { background: #1A3A27; border-color: #265034; }
.hk-header.is-scrolled .hk-burger span { background: #FFFFFF; }
.hk-header.is-scrolled .hk-nav { background: #0A1810; border-color: #1E4029; }
.hk-header.is-scrolled .hk-nav .hk-nav__link { border-bottom-color: #1E4029; }

/* Hero */
.hk-hero { background: linear-gradient(180deg, #FBF8F1 0%, #EFEAE1 100%); padding: 44px 40px 0; }
.hk-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; align-items: stretch; }
.hk-h1 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.25; font-weight: 600; color: var(--hk-muted); }
.hk-h1__big { display: block; font-size: clamp(64px, 7.6vw, 124px); line-height: .94; font-weight: 800; letter-spacing: -.04em; color: var(--hk-ink); }
.hk-h1__sub { display: inline-block; margin-top: 14px; }
.hk-mark { position: relative; display: inline-block; color: var(--hk-ink); }
.hk-mark::before { content: ""; position: absolute; left: -2px; right: -2px; bottom: .08em; height: .42em; background: var(--hk-yellow); z-index: 0; }
.hk-mark span { position: relative; z-index: 1; }
.hk-hero__text { margin-top: 26px; font-size: 18px; line-height: 1.7; color: var(--hk-muted); max-width: 620px; }
.hk-hero__text strong { color: var(--hk-ink); }
.hk-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.hk-hero__media { position: relative; border-radius: 14px; overflow: hidden; min-height: 420px; background: var(--hk-placeholder); }
.hk-tag { position: absolute; top: 18px; left: 18px; background: var(--hk-orange); color: #FFFFFF; padding: 8px 14px; border-radius: 6px; font-family: 'Pathway Extreme', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hk-badge { position: absolute; right: 18px; bottom: 18px; background: var(--hk-ink); border-radius: 10px; padding: 18px 22px; }
.hk-badge strong { display: block; font-size: 24px; font-weight: 800; color: #FFFFFF; }
.hk-badge span { display: block; margin-top: 4px; font-size: 14px; color: #C9D5CD; }
.hk-stats { max-width: var(--hk-content); margin: 56px auto 0; border-top: 1px solid var(--hk-line); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.hk-stat { padding: 26px 24px; text-align: center; border-right: 1px solid var(--hk-line); }
.hk-stat:last-child { border-right: 0; }
.hk-stat__v { font-size: 30px; font-weight: 800; color: var(--hk-ink); }
.hk-stat__l { margin-top: 6px; font-size: 15px; color: #7B8B80; }

/* 01 Pourquoi */
.hk-reasons { display: grid; gap: 18px; margin-top: 32px; }
.hk-reason { padding: 30px; }
.hk-reason__icon { width: 58px; height: 58px; border-radius: 12px; background: #FBE9DA; display: flex; align-items: center; justify-content: center; }
.hk-reason p { margin-top: 20px; font-size: 18px; line-height: 1.75; color: var(--hk-muted); }
.hk-reason strong { color: var(--hk-ink); }

/* 02 Services */
.hk-services__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 56px; margin-top: 30px; align-items: start; }
.hk-services__head .hk-h2, .hk-services__head .hk-lead { margin-top: 0; }
.hk-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 28px; margin-top: 44px; }
.hk-service { background: #FFFFFF; border: 1px solid var(--hk-border); border-radius: 14px; overflow: hidden; }
.hk-service--dark { background: var(--hk-ink); border-color: var(--hk-ink); color: #FFFFFF; }
.hk-service__img { position: relative; height: 360px; overflow: hidden; background: var(--hk-placeholder); }
.hk-service__body { padding: 40px; }
.hk-service h3 { font-size: 32px; }
.hk-service--dark h3 { color: #FFFFFF; }
.hk-rule { width: 56px; height: 4px; background: var(--hk-orange); margin-top: 16px; }
.hk-service--dark .hk-rule { background: var(--hk-yellow); }
.hk-service__text { margin-top: 20px; font-size: 18px; line-height: 1.75; color: var(--hk-muted); }
.hk-service--dark .hk-service__text { color: #C9D5CD; }
.hk-service .hk-kicker { margin-top: 28px; }
.hk-service--dark .hk-kicker { color: var(--hk-yellow); }
.hk-service--dark .hk-bullets li { color: #DDE5DF; }

/* 03 Méthode */
.hk-steps { margin-top: 32px; display: grid; gap: 14px; }
.hk-step { display: flex; gap: 20px; align-items: flex-start; background: #1A3A27; border-radius: 12px; padding: 24px 26px; }
.hk-step__n { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; background: var(--hk-orange); color: #FFFFFF; font-family: 'Pathway Extreme', sans-serif; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.hk-step__t { font-size: 18px; line-height: 1.6; color: #DDE5DF; }
.hk-note-dark { margin-top: 24px; background: #1A3A27; border-radius: 12px; padding: 28px 30px; font-size: 18px; line-height: 1.75; color: #D8E0DA; }

/* 04 Fondateur */
.hk-quote { margin: 26px 0 0; background: var(--hk-cream); border: 1px solid var(--hk-border); border-radius: 12px; padding: 32px; font-size: 20px; line-height: 1.7; color: #2B3A31; }
.hk-founder .hk-bullets li { line-height: 1.65; }

/* 05 Chantiers */
.hk-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.hk-shot { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--hk-placeholder); cursor: zoom-in; }
.hk-shot img { display: block; width: 100%; height: 340px; object-fit: cover; }
.hk-shot__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 18px 16px; background: linear-gradient(180deg, rgba(10, 24, 16, 0) 0%, rgba(10, 24, 16, .85) 62%); color: #FFFFFF; font-size: 14px; line-height: 1.4; text-align: left; display: block; }
.hk-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(10, 24, 16, .95); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px; cursor: zoom-out; }
.hk-lightbox img { display: block; max-width: min(1200px, 92vw); max-height: 76vh; border-radius: 12px; object-fit: contain; }
.hk-lightbox p { font-size: 17px; color: #D8E0DA; text-align: center; max-width: 760px; }
.hk-lightbox__close { position: absolute; top: 28px; right: 32px; width: 48px; height: 48px; border: 0; border-radius: 10px; background: var(--hk-orange); color: #FFFFFF; font-size: 24px; font-weight: 700; cursor: pointer; }

/* 06 Tarifs */
.hk-prices { margin-top: 28px; display: grid; }
.hk-prices li { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid #265034; }
.hk-prices li::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--hk-orange); display: block; }
.hk-prices li > span { font-size: 18px; line-height: 1.6; color: #D8E0DA; }
.hk-prices strong { font-family: 'Pathway Extreme', sans-serif; font-size: 21px; font-weight: 700; color: #FFFFFF; white-space: nowrap; }
.hk-note-outline { margin-top: 24px; border: 1px solid #265034; border-radius: 12px; padding: 28px; font-size: 18px; line-height: 1.75; color: #D8E0DA; }
.hk-note-outline strong { color: var(--hk-yellow); }
.hk-price-cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.hk-price-cta span { font-size: 18px; color: #C9D5CD; }
.hk-price-cta span a { color: #FFFFFF; font-weight: 700; }

/* 07 Zone : la carte à gauche, les tarifs juste avant ayant leur visuel à droite */
.hk-split > .hk-map { order: -1; }
.hk-zone-cards { display: grid; gap: 16px; margin-top: 18px; }
.hk-zone-card { padding: 28px; font-size: 17px; line-height: 1.6; color: #2B3A31; }
.hk-zone-card__t { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-family: 'Pathway Extreme', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hk-ink); }
.hk-map { background: #FFFFFF; border: 1px solid var(--hk-border); border-radius: 14px; padding: 20px; }
/* Plus de SVG dessiné à la main ici : la carte est un conteneur Leaflet.
   L'ancienne règle « .hk-map svg {height:auto} » écrasait le SVG des tracés
   de Leaflet et le réduisait à zéro. */
.hk-legend { margin-top: 18px; display: flex; gap: 14px 22px; flex-wrap: wrap; align-items: center; }
.hk-legend > span { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--hk-muted); }
.hk-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--hk-orange); display: block; }
.hk-swatch { flex: 0 0 auto; width: 18px; height: 14px; border-radius: 4px; display: block; border: 2px solid var(--hk-orange); background: rgba(226, 101, 15, .18); }
.hk-swatch--ain { border-color: #157A45; background: rgba(53, 198, 127, .24); }
.hk-swatch--isere { border-color: var(--hk-rust); background: rgba(184, 80, 11, .1); }

/* 08 FAQ : hauteur animable par grid-template-rows */
.hk-faq-wrap { max-width: 1180px; margin: 0 auto; }
.hk-faq { margin-top: 40px; display: grid; gap: 12px; }
.hk-faq__item { background: #FFFFFF; border: 1px solid var(--hk-border); border-radius: 12px; overflow: hidden; }
.hk-faq__h { font-size: inherit; letter-spacing: 0; }
.hk-faq__q { width: 100%; background: none; border: 0; padding: 26px 30px; display: flex; gap: 22px; align-items: flex-start; justify-content: space-between; cursor: pointer; text-align: left; color: var(--hk-ink); }
.hk-faq__label { font-size: 22px; font-weight: 700; color: var(--hk-ink); line-height: 1.35; }
.hk-faq__sign { flex: 0 0 auto; width: 36px; height: 36px; background: var(--hk-orange); color: #FFFFFF; font-size: 22px; font-weight: 700; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.hk-faq__a { display: grid; grid-template-rows: 0fr; }
.hk-faq__item.is-open .hk-faq__a { grid-template-rows: 1fr; }
.hk-faq__in { min-height: 0; overflow: hidden; }
.hk-faq__txt { padding: 0 30px 28px; display: grid; gap: 14px; }
.hk-faq__txt p { font-size: 18px; line-height: 1.75; color: var(--hk-muted); }

/* 09 Contact */
.hk-contact-grid { max-width: var(--hk-content); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 48px; align-items: start; }
.hk-phone-card { margin-top: 34px; background: var(--hk-orange); border-radius: 14px; padding: 34px; }
.hk-phone-card__label { font-family: 'Pathway Extreme', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #FDE3CC; }
.hk-phone-card a { display: block; margin-top: 10px; font-size: 42px; font-weight: 800; color: #FFFFFF; line-height: 1; }
.hk-phone-card p { margin-top: 12px; font-size: 18px; font-weight: 600; color: #FFFFFF; }
.hk-info { margin-top: 16px; display: grid; gap: 14px; }
.hk-info__item { background: #1A3A27; border-radius: 12px; padding: 24px 26px; }
.hk-info__label { font-family: 'Pathway Extreme', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hk-yellow); }
.hk-info__item a { display: block; margin-top: 8px; font-size: 20px; font-weight: 700; color: #FFFFFF; word-break: break-word; }
.hk-info__item p { margin-top: 8px; font-size: 19px; line-height: 1.5; color: #FFFFFF; }
.hk-mono { font-family: 'Pathway Extreme', sans-serif; }
.hk-form-card { background: #FFFFFF; color: var(--hk-ink); border-radius: 14px; padding: clamp(24px, 3vw, 40px); }
.hk-form-card h3 { font-size: 28px; }
.hk-form { display: grid; gap: 18px; margin-top: 26px; }
.hk-field { display: grid; gap: 8px; }
.hk-field > span { font-size: 15px; font-weight: 600; color: var(--hk-muted); }
.hk-field input, .hk-field textarea { width: 100%; border: 1px solid #CFC9BB; background: #F6F4EF; color: var(--hk-ink); padding: 15px 16px; font-size: 17px; border-radius: 10px; }
.hk-field textarea { resize: vertical; }
.hk-field input:focus, .hk-field textarea:focus { outline: 2px solid var(--hk-orange); outline-offset: 0; border-color: var(--hk-orange); }
.hk-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hk-form .hk-btn { justify-self: start; }
.hk-form__legal { font-size: 14px; line-height: 1.5; color: #7B8B80; }
.hk-alert { margin-top: 24px; background: var(--hk-cream); border-radius: 12px; padding: 26px; }
.hk-alert--error { background: #FBE9DA; }
.hk-alert strong { display: block; font-size: 20px; font-weight: 700; color: var(--hk-ink); }
.hk-alert p { margin-top: 8px; font-size: 17px; line-height: 1.65; color: var(--hk-muted); }
.hk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pied de page */
.hk-footer { background: #0A1810; color: #8FA295; padding: 56px 40px 36px; }
.hk-footer__grid { max-width: var(--hk-content); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px; align-items: start; }
.hk-footer__logo { height: 62px; width: auto; display: block; filter: brightness(0) invert(1); }
.hk-footer__intro { margin-top: 16px; font-size: 15px; line-height: 1.65; max-width: 300px; }
.hk-footer__title { font-family: 'Pathway Extreme', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hk-orange); }
.hk-footer__list { margin-top: 14px; display: grid; gap: 9px; font-size: 15px; }
.hk-footer__list a { color: #FFFFFF; }
.hk-footer__list a:hover { color: var(--hk-yellow); }
.hk-footer__strong { font-weight: 700; }
.hk-footer__bottom { max-width: var(--hk-content); margin: 40px auto 0; padding-top: 22px; border-top: 1px solid #1E4029; font-size: 14px; display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; }

/* Pages génériques */
.hk-page { max-width: 860px; margin: 0 auto; padding: 72px 20px; }
.hk-page__title { font-size: clamp(34px, 4vw, 48px); line-height: 1.1; }
.hk-page__content { margin-top: 28px; font-size: 18px; line-height: 1.75; color: var(--hk-muted); }
.hk-page__content > * + * { margin-top: 1em; }

/* ---------------------------------------------------------------------- */
/* Responsive : toujours en dernier dans la feuille                        */
/* ---------------------------------------------------------------------- */

/* Menu mobile. Sept liens plus le téléphone ne tiennent plus sur une ligne
   sous 1080 px : le bouton prend le relais avant le seuil de 901 px. */
@media (max-width: 1080px) {
	.hk-header__in { gap: 12px; }
	.hk-burger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: 0 0 auto; width: 52px; height: 52px; margin-left: auto; padding: 0; border: 1px solid var(--hk-line); border-radius: 10px; background: #FFFFFF; cursor: pointer; }
	.hk-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--hk-ink); transition: transform .3s ease, opacity .2s ease; }
	.hk-header.menu-ouvert .hk-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.hk-header.menu-ouvert .hk-burger span:nth-child(2) { opacity: 0; }
	.hk-header.menu-ouvert .hk-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.hk-header .hk-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; margin: 0; padding: 6px 20px 22px; background: #FFFFFF; border-top: 1px solid var(--hk-line); border-bottom: 1px solid var(--hk-line); max-height: calc(100vh - 100%); overflow-y: auto; }
	.hk-header .hk-nav.is-open { display: flex; }
	.hk-header .hk-nav .hk-nav__link { display: flex; align-items: center; min-height: 52px; font-size: 18px; border-bottom: 1px solid var(--hk-line); }
	.hk-header .hk-nav .hk-btn { justify-content: center; min-height: 52px; margin-top: 12px; }
	.hk-header .hk-nav .hk-nav__mobile { display: inline-flex; }
}

/* Mobile et tablette : une seule colonne, le visuel toujours au-dessus du texte. */
@media (max-width: 900px) {
	.hk-split, .hk-hero__grid { grid-template-columns: 1fr; }
	.hk-split > .hk-photos,
	.hk-split > .hk-map,
	.hk-hero__grid > .hk-hero__media { order: -1; }

	/* Pastilles posées sur la photo de la bannière : plus discrètes. */
	.hk-tag { top: 12px; left: 12px; padding: 6px 10px; font-size: 10px; letter-spacing: .1em; }
	.hk-badge { right: 12px; bottom: 12px; padding: 10px 14px; border-radius: 8px; }
	.hk-badge strong { font-size: 16px; }
	.hk-badge span { margin-top: 2px; font-size: 12px; }
}

@media (max-width: 782px) {
	.hk-stats { grid-template-columns: 1fr 1fr; }
	.hk-stat { border-right: 0; border-bottom: 1px solid var(--hk-line); }
	.hk-stat:nth-child(odd) { border-right: 1px solid var(--hk-line); }
	.hk-stat:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 700px) {
	.hk-sec { padding: 64px 20px; }
	.hk-sec--flush { padding: 64px 0; }
	.hk-inner { padding: 0 20px; }
	.hk-hero { padding: 28px 20px 0; }
	.hk-header__in { padding: 10px 20px; }
	.hk-logo img { height: 48px; }
	.hk-header.is-compact .hk-logo img { height: 40px; }
	.hk-btn--dark { padding: 12px 16px; font-size: 15px; }
	.hk-h1 { font-size: 22px; }
	.hk-h1__big { font-size: 50px; }
	.hk-hero__media { min-height: 300px; }
	.hk-stat { padding: 20px 12px; }
	.hk-stat__v { font-size: 24px; }
	.hk-split { gap: 40px; }
	.hk-photos { min-height: 0; }
	.hk-photo { min-height: 220px; }
	.hk-service__img { height: 240px; }
	.hk-service__body { padding: 28px 24px; }
	.hk-service h3 { font-size: 26px; }
	.hk-shot img { height: 260px; }
	.hk-prices strong { white-space: normal; }
	.hk-faq__q { padding: 20px; }
	.hk-faq__label { font-size: 19px; }
	.hk-faq__txt { padding: 0 20px 22px; }
	.hk-phone-card { padding: 26px; }
	.hk-phone-card a { font-size: 34px; }
	.hk-lightbox { padding: 20px; }
	.hk-lightbox__close { top: 16px; right: 16px; }
	.hk-footer { padding: 48px 20px 32px; }
}

@media (max-width: 560px) {
	.hk-form__row { grid-template-columns: 1fr; }
	.hk-badge span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------- */
/* Ajustements du 2026-09-13, placés en dernier pour l'emporter            */
/* ---------------------------------------------------------------------- */

/* En-tête : même hauteur et même logo avant et après le défilement,
   seule la couleur de fond change. */
.hk-header.is-compact .hk-header__in { padding-top: 8px; padding-bottom: 8px; }
.hk-header.is-compact .hk-logo img { height: 54px; }

/* Prestations : deux colonnes (la règle générale de la grille arrive plus bas
   dans la feuille, d'où la double classe). */
.hk-services__grid.hk-services__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Bannière : plus d'air sous l'en-tête. */
.hk-hero { padding-top: 72px; }

@media (max-width: 900px) {
	.hk-services__grid.hk-services__grid--4 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.hk-header__in,
	.hk-header.is-compact .hk-header__in { padding-top: 10px; padding-bottom: 10px; }
	.hk-header .hk-logo img,
	.hk-header.is-compact .hk-logo img { height: 44px; }
	.hk-hero { padding-top: 40px; }
}

/* Titre de la bannière : « Votre entreprise de démolition à Lyon » tient dans
   la grande ligne, d'où une taille plus contenue que sur la maquette. */
.hk-h1 .hk-h1__big { font-size: clamp(48px, 5.2vw, 88px); line-height: .98; }
@media (max-width: 700px) {
	.hk-h1 .hk-h1__big { font-size: 40px; line-height: 1; }
}

/* Listes : la remise à zéro « .hk-site ul, .hk-site ol » l'emportait sur leur
   marge haute, d'où un sur-titre collé à la liste. */
.hk-site .hk-bullets { margin-top: 18px; }
.hk-site .hk-steps { margin-top: 32px; }
.hk-site .hk-prices { margin-top: 28px; }

/* Damier après retrait de « Pourquoi nous choisir » : bannière à droite,
   déroulé à gauche, fondateur à droite, tarifs à gauche, carte à droite.
   Sur mobile, le visuel reste toujours au-dessus du texte. */
#methode .hk-split > .hk-photos,
#tarifs .hk-split > .hk-photos { order: -1; }
@media (min-width: 901px) {
	.hk-founder .hk-split > .hk-photos,
	#zone .hk-split > .hk-map { order: 2; }
}

/* En-tête au défilement : blanc avec un filet fin (le noir puis le sable ont
   été écartés). Logo en couleur, liens foncés, seul le fond et le filet changent. */
.hk-header.is-scrolled { background: #FFFFFF; border-bottom-color: var(--hk-line); }
.hk-header.is-scrolled .hk-logo img { filter: none; }
.hk-header.is-scrolled .hk-logo__text { color: var(--hk-ink); }
.hk-header.is-scrolled .hk-nav__link { color: var(--hk-ink); }
.hk-header.is-scrolled .hk-nav__link:hover { color: var(--hk-rust); }
.hk-header.is-scrolled .hk-btn--dark { background: var(--hk-ink); }
.hk-header.is-scrolled .hk-btn--dark:hover { background: #000000; }
.hk-header.is-scrolled .hk-burger { background: #FFFFFF; border-color: var(--hk-line); }
.hk-header.is-scrolled .hk-burger span { background: var(--hk-ink); }
.hk-header.is-scrolled .hk-nav { background: #FFFFFF; border-color: var(--hk-line); }
.hk-header.is-scrolled .hk-nav .hk-nav__link { border-bottom-color: var(--hk-line); }

/* Visionneuse des réalisations : flèches, compteur, miniatures au survol. */
.hk-lightbox { padding: 40px 100px 150px; }
.hk-lightbox img { max-width: min(1200px, calc(100vw - 220px)); max-height: calc(100vh - 290px); cursor: pointer; }
.hk-lightbox__nav { position: absolute; top: calc(50% - 60px); width: 56px; height: 56px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgba(10, 24, 16, .55); color: #FFFFFF; cursor: pointer; transition: background-color .3s ease, border-color .3s ease; }
.hk-lightbox__nav:hover, .hk-lightbox__nav:focus-visible { background: var(--hk-orange); border-color: var(--hk-orange); }
.hk-lightbox__nav--prev { left: 24px; }
.hk-lightbox__nav--next { right: 24px; }
.hk-lightbox__count { position: absolute; top: 40px; left: 32px; font-family: 'Pathway Extreme', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; color: #D8E0DA; }
.hk-lightbox__thumbs { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; justify-content: center; gap: 10px; padding: 4px 20px; overflow-x: auto; scrollbar-width: none; cursor: default; }
.hk-lightbox__thumbs::-webkit-scrollbar { display: none; }
.hk-lightbox__thumb { flex: 0 0 auto; width: 96px; height: 68px; padding: 0; border: 2px solid transparent; border-radius: 8px; background: #1A3A27 center / cover no-repeat; opacity: .5; cursor: pointer; transition: opacity .3s ease, border-color .3s ease; }
.hk-lightbox__thumb:hover, .hk-lightbox__thumb:focus-visible { opacity: .9; }
.hk-lightbox__thumb.is-active { opacity: 1; border-color: var(--hk-orange); }
@keyframes hk-changement { from { opacity: .2; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
	html .hk-lightbox:not([hidden]) img.is-changing { animation: hk-changement .45s ease both; }
}
@media (max-width: 1100px) {
	.hk-lightbox__thumbs { justify-content: flex-start; }
}
@media (max-width: 700px) {
	.hk-lightbox { padding: 64px 16px 110px; }
	.hk-lightbox img { max-width: calc(100vw - 32px); max-height: calc(100vh - 250px); }
	.hk-lightbox__nav { top: calc(50% - 50px); width: 42px; height: 42px; }
	.hk-lightbox__nav--prev { left: 8px; }
	.hk-lightbox__nav--next { right: 8px; }
	.hk-lightbox__count { top: 30px; left: 16px; }
	.hk-lightbox__thumbs { bottom: 16px; }
	.hk-lightbox__thumb { width: 72px; height: 52px; }
}

/* Pages légales : titres, listes à puces et liens lisibles. */
.hk-page__content h2 { margin-top: 2.2em; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; color: var(--hk-ink); }
.hk-site .hk-page__content ul { margin-top: 1em; padding-left: 1.3em; list-style: disc; }
.hk-page__content li + li { margin-top: .4em; }
.hk-page__content a { color: var(--hk-rust); text-decoration: underline; text-underline-offset: 3px; }
.hk-form__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Mot du fondateur : une seule grande photo mise en avant, plus haute sur mobile. */
@media (max-width: 700px) {
	.hk-founder .hk-photo { min-height: 360px; }
}

/* Bandeau d'informations au-dessus de l'en-tête : nom et ville, adresse,
   téléphone, dans cet ordre et rien d'autre. Aligné sur l'en-tête. */
.hk-bandeau { background: var(--hk-ink); color: #D8D1C8; font-size: 14px; line-height: 1.4; }
.hk-bandeau__in { max-width: var(--hk-shell); margin: 0 auto; padding: 9px 40px; display: flex; align-items: center; gap: 10px 28px; flex-wrap: wrap; }
.hk-bandeau__nom { color: #FFFFFF; font-weight: 700; }
.hk-bandeau__tel { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: #FFFFFF; font-weight: 700; white-space: nowrap; }
.hk-bandeau__tel:hover { color: var(--hk-yellow); }
.hk-swatch--france { border-color: var(--hk-ink); background: rgba(15, 35, 24, .08); }
@media (max-width: 700px) {
	.hk-bandeau__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 8px 20px; font-size: 13px; }
	.hk-bandeau__nom { grid-column: 1; grid-row: 1; }
	.hk-bandeau__tel { grid-column: 2; grid-row: 1; margin-left: 0; }
	.hk-bandeau__adresse { grid-column: 1 / -1; grid-row: 2; }
}

/* ====================================================================== */
/* Rapprochement du design SAD Débarras (2026-09-23)                      */
/* Repris tel quel de sad-alsace-debarras.fr : bannière noire avec le      */
/* visuel cerné de jaune, coup de surligneur dessiné sous les mots-clés    */
/* des titres, teinte taupe dans l'alternance des sections, cartes de      */
/* prix, étapes reliées en pointillé, cartes arrondies à 18 px.           */
/* Aucun texte n'est modifié : tout se joue en CSS et en balises.          */
/* ====================================================================== */

:root {
	--hk-sand: #E2DED4;
	--hk-nuit: #0A1810;
	/* Le trait de surligneur de SAD, redessiné au jaune HK. */
	--hk-trait: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cpath d='M3 16C72 4 206 1 297 10 206 10 74 13 5 25Z' fill='%2335C67F'/%3E%3C/svg%3E");
}

/* ---------- Surligneur dessiné, à la place de l'aplat rectangulaire ---- */
.hk-mark { display: inline; color: inherit; padding: 0 .04em .16em; background: var(--hk-trait) no-repeat 0 100%; background-size: 100% .32em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hk-mark::before { display: none; }
.hk-mark > span { position: static; }
.hk-h2 .hk-mark { background-size: 100% .28em; }

/* ---------- Sur-titres : le filet court de SAD avant le texte ---------- */
.hk-eyebrow { display: flex; align-items: center; gap: 12px; }
.hk-eyebrow::before { content: ""; flex: 0 0 auto; width: 34px; height: 2px; background: currentColor; }

/* ---------- Respiration des sections, comme sur SAD ------------------- */
.hk-sec { padding: clamp(72px, 6.4vw, 120px) 40px; }
.hk-sec--flush { padding: clamp(72px, 6.4vw, 120px) 0; }
.hk-sec--sand { background: var(--hk-sand); }
.hk-sec--sand .hk-lead, .hk-sec--sand .hk-body { color: #5B6B60; }

/* ---------- Bannière noire ------------------------------------------- */
.hk-hero { position: relative; background: linear-gradient(180deg, #0F2318 0%, var(--hk-nuit) 100%); color: #FFFFFF; padding-bottom: 0; overflow: hidden; }
.hk-hero::before { content: ""; position: absolute; top: -220px; right: -160px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 101, 15, .22) 0%, rgba(226, 101, 15, 0) 68%); pointer-events: none; }
.hk-hero > * { position: relative; }
.hk-hero .hk-eyebrow { color: var(--hk-yellow); }
.hk-hero .hk-eyebrow::before { background: var(--hk-orange); }
.hk-hero .hk-h1 { color: #C9D5CD; }
.hk-hero .hk-h1__big { color: #FFFFFF; }
.hk-hero .hk-mark { color: #FFFFFF; }
.hk-hero__text { color: #C9D5CD; }
.hk-hero__text strong { color: #FFFFFF; }

/* Le visuel cerné de jaune, signature de la bannière SAD. */
.hk-hero__media { border-radius: 18px; outline: 3px solid var(--hk-yellow); outline-offset: 12px; background: #292524; }

/* Deuxième bouton de la bannière : contour clair sur le noir. */
.hk-hero .hk-btn--light { background: transparent; border-color: #57534E; color: #FFFFFF; }
.hk-hero .hk-btn--light:hover { background: transparent; border-color: #FFFFFF; color: #FFFFFF; }
.hk-hero .hk-btn--orange:hover { background: #FFFFFF; color: var(--hk-ink); }

/* Le bandeau de chiffres reste dans la bannière, donc sur le noir. */
.hk-stats { margin-top: 64px; border-top-color: #20452C; }
.hk-stat { border-right-color: #20452C; }
.hk-stat__v { color: #FFFFFF; }
.hk-stat__l { color: #8FA295; }

/* ---------- Cartes : arrondi commun de 18 px et léger relief ---------- */
.hk-photo, .hk-service, .hk-shot, .hk-quote, .hk-card-cream, .hk-map, .hk-form-card, .hk-phone-card { border-radius: 18px; }
.hk-service { transition: transform .5s var(--hk-ease, cubic-bezier(.22, 1, .36, 1)), border-color .3s ease; }
.hk-service:hover { transform: translateY(-5px); }
.hk-service:not(.hk-service--dark):hover { border-color: #CFC9BB; }
.hk-zone-card { transition: border-color .3s ease, transform .4s ease; }
.hk-zone-card:hover { border-color: var(--hk-orange); transform: translateY(-3px); }
.hk-btn { transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; }
.hk-btn--orange:hover { transform: translateY(-2px); }

/* ---------- Déroulé du chantier : étapes reliées en pointillé --------- */
.hk-steps { position: relative; gap: 0; }
.hk-step { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 20px; align-items: start; background: none; border-radius: 0; padding: 0 0 28px; }
.hk-step:last-child { padding-bottom: 0; }
.hk-step::before { content: ""; position: absolute; left: 28px; top: 62px; bottom: 6px; border-left: 3px dashed rgba(226, 101, 15, .55); }
.hk-step:last-child::before { display: none; }
.hk-step__n { width: 58px; height: 58px; border-radius: 50%; background: var(--hk-yellow); color: var(--hk-ink); font-size: 19px; }
.hk-step__t { align-self: center; font-size: 18px; line-height: 1.6; color: #DDE5DF; }
.hk-note-dark { border-radius: 18px; }

/* ---------- Tarifs : la grille devient des cartes, comme les formules -- */
.hk-prices { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.hk-prices li { display: block; padding: 24px 26px; background: #163322; border: 1px solid #265034; border-bottom: 1px solid #265034; border-radius: 18px; transition: border-color .3s ease, transform .4s ease; }
.hk-prices li:hover { border-color: var(--hk-orange); transform: translateY(-3px); }
.hk-prices li::before { width: 34px; height: 3px; border-radius: 0; margin-bottom: 16px; }
.hk-prices li > span { display: block; font-size: 17px; color: #C9D5CD; }
.hk-prices strong { display: block; margin-top: 12px; font-size: 28px; line-height: 1.1; color: var(--hk-yellow); }
.hk-note-outline { border-radius: 18px; }

/* ---------- Réalisations : légende qui monte au survol ---------------- */
.hk-shot__cap { transition: transform .5s ease, opacity .4s ease; }
.hk-shot:hover .hk-shot__cap, .hk-shot:focus-visible .hk-shot__cap { transform: translateY(-4px); }

/* ---------- FAQ : cartes blanches sur le taupe, accent à l'ouverture --- */
.hk-faq__item { border-radius: 18px; transition: border-color .3s ease; }
.hk-faq__item:hover { border-color: #CFC9BB; }
.hk-faq__item.is-open { border-color: var(--hk-orange); }

/* ---------- Contact : la carte téléphone gagne un dégradé ------------- */
.hk-phone-card { background: linear-gradient(135deg, var(--hk-orange) 0%, var(--hk-rust) 100%); }
.hk-info__item { border-radius: 18px; }

/* ---------- Responsive du bloc, donc en dernier ----------------------- */
@media (max-width: 900px) {
	.hk-hero__media { outline-offset: 8px; }
}
@media (max-width: 700px) {
	.hk-sec { padding: 64px 20px; }
	.hk-sec--flush { padding: 64px 0; }
	.hk-hero::before { display: none; }
	.hk-hero__media { outline-width: 2px; outline-offset: 6px; }
	.hk-stats { margin-top: 44px; }
	.hk-step { grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding-bottom: 24px; }
	.hk-step::before { left: 23px; top: 52px; }
	.hk-step__n { width: 48px; height: 48px; font-size: 16px; }
	.hk-step__t { font-size: 17px; }
	.hk-prices strong { font-size: 25px; }
	.hk-eyebrow::before { width: 24px; }
}

/* ====================================================================== */
/* Reprise du 2026-09-23 (2) : prestations allégées, réalisations en       */
/* mosaïque sans légende, grille de tarifs en trois colonnes.             */
/* ====================================================================== */

/* ---------- 01 Prestations : moins dense, plus contrasté -------------- */
/* Le damier noir/blanc et les sur-titres en capitales rendaient le bloc
   illisible. Toutes les cartes passent en clair, le texte gagne en
   contraste et les puces respirent. */
.hk-service { background: #FFFFFF; border-color: var(--hk-border); color: var(--hk-ink); }
.hk-service h3 { font-size: 27px; line-height: 1.2; color: var(--hk-ink); }
.hk-service__body { padding: 34px 36px 36px; }
.hk-service__text { margin-top: 16px; font-size: 17px; line-height: 1.7; color: #3C4A41; }
.hk-service .hk-rule { width: 44px; height: 3px; background: var(--hk-orange); }
.hk-service .hk-bullets { margin-top: 22px; gap: 12px; }
.hk-service .hk-bullets li { font-size: 16.5px; line-height: 1.55; color: #265034; gap: 12px; }
.hk-service .hk-bullets li::before { width: 8px; height: 8px; border-radius: 2px; margin-top: 9px; }

/* ---------- 04 Réalisations : mosaïque, rien que les photos ----------- */
/* Les légendes posées sur les images ont été retirées : elles restent dans
   l'alt et dans l'aria-label du bouton, et s'affichent dans la visionneuse. */
.hk-gallery--mosaique { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 18vw, 290px); gap: 14px; }
.hk-gallery--mosaique .hk-shot { height: 100%; border-radius: 16px; background: #15301F; }
.hk-gallery--mosaique .hk-shot img { width: 100%; height: 100%; object-fit: cover; }
.hk-gallery--mosaique .hk-shot::after { content: ""; position: absolute; inset: 0; background: rgba(10, 24, 16, 0); transition: background .4s ease; pointer-events: none; }
.hk-gallery--mosaique .hk-shot:hover::after, .hk-gallery--mosaique .hk-shot:focus-visible::after { background: rgba(10, 24, 16, .22); }
.hk-gallery--mosaique .hk-shot:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.hk-gallery--mosaique .hk-shot:nth-child(7) { grid-column: span 2; grid-row: span 2; }

#chantiers.hk-sec--dark { background: linear-gradient(180deg, #0F2318 0%, var(--hk-nuit) 100%); }

/* ---------- 05 Tarifs : trois colonnes, lisibles d'un coup d'œil ------ */
.hk-grille-tarifs { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.hk-tarif { position: relative; display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--hk-border); border-radius: 18px; overflow: hidden; transition: transform .4s ease, border-color .3s ease; }
.hk-tarif:hover { transform: translateY(-4px); border-color: var(--hk-orange); }
.hk-tarif--vedette { border: 2px solid var(--hk-orange); }
/* Bandeau plein à l'intérieur de la carte : il suit l'arrondi, contrairement
   à un liseré posé sur le bord. */
.hk-tarif__tete { margin: 0; padding: 13px 18px; background: var(--hk-ink); color: #FFFFFF; font-family: 'Pathway Extreme', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: center; }
.hk-tarif--vedette .hk-tarif__tete { background: var(--hk-orange); }
.hk-tarif__corps { flex: 1; display: flex; flex-direction: column; padding: 30px 28px 32px; }
.hk-tarif__nom { font-size: 25px; line-height: 1.15; text-align: center; color: var(--hk-ink); }
.hk-tarif__prix { margin-top: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--hk-border); font-family: 'Pathway Extreme', sans-serif; font-size: clamp(23px, 1.9vw, 30px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-align: center; color: var(--hk-ink); }
.hk-tarif__prix small { display: block; margin-bottom: 12px; font-family: 'Pathway Extreme', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hk-muted); }
.hk-tarif__prix span { color: var(--hk-orange); }
.hk-tarif__liste { margin-top: 24px; display: grid; gap: 13px; }
.hk-tarif__liste li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; color: #3C4A41; }
.hk-tarif__liste li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2650F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.hk-tarifs__pied { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; background: #FFFFFF; border: 1px solid var(--hk-border); border-radius: 18px; padding: 26px 30px; }
.hk-tarifs__pied p { margin: 0; font-size: 17px; line-height: 1.6; color: #3C4A41; max-width: 52ch; }
.hk-tarifs__pied strong { color: var(--hk-ink); }
.hk-tarifs__pied .hk-price-cta { margin-top: 0; }
.hk-tarifs__pied .hk-price-cta span { font-size: 16px; color: var(--hk-muted); }
.hk-tarifs__pied .hk-price-cta span a { color: var(--hk-ink); }

@media (max-width: 1100px) {
	.hk-gallery--mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 22vw, 240px); }

	.hk-grille-tarifs { grid-template-columns: 1fr; gap: 20px; }
	.hk-tarif__prix { white-space: normal; }
}
@media (max-width: 700px) {
	.hk-service__body { padding: 26px 22px 28px; }
	.hk-service h3 { font-size: 23px; }
	.hk-gallery--mosaique { grid-template-columns: 1fr; grid-auto-rows: 230px; gap: 12px; }
	.hk-gallery--mosaique .hk-shot:nth-child(1),
	.hk-gallery--mosaique .hk-shot:nth-child(7) { grid-column: span 1; grid-row: span 1; }
	.hk-tarif__corps { padding: 26px 22px 28px; }
	.hk-tarifs__pied { padding: 22px; }
}
/* ---------- Carte de prestation : pastille + mots courts sur 2 colonnes --- */
.hk-service__img { border-radius: 0; }
.hk-service__badge { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 13px; border-radius: 999px; background: #FFFFFF; color: var(--hk-ink); font-family: 'Pathway Extreme', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hk-service__badge::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--hk-orange); }

.hk-points { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.hk-points li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--hk-border); font-size: 16.5px; font-weight: 700; line-height: 1.3; color: var(--hk-ink); }
.hk-points li::before { content: ""; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--hk-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px 13px no-repeat; }
.hk-points li:nth-last-child(-n+2) { border-bottom: 0; }


@media (max-width: 1250px) {
	.hk-points { grid-template-columns: 1fr; }
	.hk-points li:nth-last-child(-n+2) { border-bottom: 1px solid var(--hk-border); }
	.hk-points li:last-child { border-bottom: 0; }
}
@media (max-width: 700px) {
	.hk-service__badge { left: 12px; bottom: 12px; padding: 7px 13px 7px 11px; font-size: 11px; }
	.hk-points li { font-size: 15.5px; padding: 11px 0; }
}

/* Les listes des cartes collaient à leur titre : « .hk-site ul, .hk-site ol »
   remet toutes les marges à zéro et l'emporte, à deux classes contre une, sur
   le margin-top de .hk-points et de .hk-tarif__liste. Même piège que pour
   .hk-bullets et .hk-steps plus haut dans la feuille. */
.hk-site .hk-points { margin-top: 30px; }
.hk-site .hk-tarif__liste { margin-top: 24px; }
.hk-service h3 { line-height: 1.25; }

/* ---------- 07 Zone : les villes en pastilles ------------------------- */
/* Trois paragraphes de communes, ça faisait un pavé. Même information, en
   pastilles : le bloc se parcourt du regard et aucun nom n'est perdu. */
.hk-zone-card { padding: 24px 26px 26px; }
.hk-site .hk-villes { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.hk-villes li { padding: 6px 13px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--hk-border); font-size: 14px; font-weight: 600; line-height: 1.3; color: #3C4A41; }
.hk-zone-card__txt { margin-top: 12px; font-size: 16px; line-height: 1.55; color: #3C4A41; }
.hk-zone-card__txt a { font-weight: 700; }

/* ---------- Bannière : l'accroche passe en puces cochées -------------- */
/* Le paragraphe de présentation faisait quatre lignes pleines, illisible en
   haut de page. Même contenu, en points, avec la pastille des prestations. */
.hk-site .hk-hero__liste { margin-top: 22px; display: grid; gap: 14px; max-width: 620px; }
.hk-hero__liste li { display: flex; align-items: flex-start; gap: 13px; font-size: 17px; line-height: 1.55; color: #C9D5CD; }
.hk-hero__liste li strong { color: #FFFFFF; }
.hk-hero__liste li::before { content: ""; flex: 0 0 auto; margin-top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--hk-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 13px 13px no-repeat; }
.hk-hero__text { margin-top: 24px; }

/* ---------- Réglages liés au changement de polices (2026-09-23) -------
   Bricolage Grotesque porte plus large et plus haut qu'Outfit : les très gros
   titres sont ramenés d'un cran et l'interlettrage des étiquettes en Spline
   Sans Mono est resserré, sinon les bandeaux des cartes de prix débordent. */
.hk-h1 .hk-h1__big { font-size: clamp(44px, 4.8vw, 80px); letter-spacing: -.035em; }
.hk-h2 { letter-spacing: -.025em; }
.hk-eyebrow { font-size: 13px; letter-spacing: .16em; }
.hk-tarif__tete { font-size: 11px; letter-spacing: .1em; }
.hk-service__badge { font-size: 11px; letter-spacing: .1em; }
.hk-zone-card__t { font-size: 12px; letter-spacing: .12em; }
.hk-kicker { font-size: 12px; letter-spacing: .12em; }
.hk-footer__title { font-size: 11px; letter-spacing: .12em; }
@media (max-width: 700px) {
	.hk-h1 .hk-h1__big { font-size: 36px; }
	.hk-hero__liste li { font-size: 16px; }
}

/* ---------- 07 Zone : texte réduit et carte Leaflet ------------------- */
/* Quatre cartes de villes empilées, c'était illisible. Il reste trois
   étiquettes de département, une ligne de communes et la carte. */
.hk-zone-texte { align-self: center; }
.hk-site .hk-depts { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.hk-depts li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; background: var(--hk-cream); border: 1px solid var(--hk-border); font-family: 'Pathway Extreme', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hk-ink); }
.hk-communes { margin-top: 22px; max-width: 62ch; font-size: 15.5px; line-height: 2; color: var(--hk-muted); }
.hk-zone-france { margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--hk-ink); font-weight: 600; }
.hk-zone-france a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* La carte occupe toute la hauteur de la colonne, comme les photos ailleurs. */
.hk-map { padding: 12px; }
.hk-carte { height: 100%; min-height: 520px; border-radius: 12px; overflow: hidden; background: var(--hk-cream); z-index: 0; }
.hk-carte .leaflet-container { font-family: 'Pathway Extreme', system-ui, sans-serif; background: var(--hk-cream); }
.hk-carte .leaflet-control-attribution { font-size: 10.5px; background: rgba(255, 255, 255, .85); }
.hk-carte .leaflet-bar a { color: var(--hk-ink); }
.hk-carte__lyon { display: flex; align-items: center; justify-content: center; }
.hk-carte__lyon span { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: var(--hk-ink); color: #FFFFFF; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.hk-carte__ville i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--hk-orange); border: 2px solid #FFFFFF; }
.hk-carte .leaflet-tooltip { font-family: 'Pathway Extreme', system-ui, sans-serif; font-size: 13px; font-weight: 700; color: var(--hk-ink); border: 1px solid var(--hk-border); border-radius: 8px; }

@media (max-width: 900px) {
	.hk-carte { min-height: 380px; }
}
@media (max-width: 700px) {
	.hk-map { padding: 8px; }
	.hk-carte { min-height: 320px; }
	.hk-communes { font-size: 15px; line-height: 1.9; }
}
/* Fond OpenStreetMap désaturé : la carte reste lisible sans jurer avec la
   palette. Le filtre ne porte que sur les tuiles, pas sur les tracés. */
.hk-carte .leaflet-tile-pane { filter: grayscale(.62) saturate(.8) brightness(1.04); }
.hk-carte .leaflet-attribution-flag { display: none !important; }

/* ---------- Mots en gras : lisibles dans chaque contexte --------------- */
/* Le corps de texte est en vert-gris ; le gras revient à l'encre pour
   ressortir vraiment, et au blanc sur les fonds sombres. */
.hk-lead strong, .hk-body strong, .hk-communes strong, .hk-tarif__liste strong,
.hk-faq__txt strong, .hk-quote strong, .hk-service__text strong, .hk-zone-france strong { color: var(--hk-ink); font-weight: 700; }
.hk-sec--dark .hk-lead strong, .hk-sec--dark .hk-body strong, .hk-sec--dark .hk-faq__txt strong,
.hk-step__t strong, .hk-note-dark strong { color: #FFFFFF; font-weight: 700; }

/* ---------- Puces : la pastille sort du flux ------------------------- */
/* En display:flex, un <strong> et le texte qui le suit deviennent deux
   éléments de la ligne, séparés par le gap : on voyait un grand blanc après
   chaque mot en gras. La pastille passe donc en position absolue et le texte
   redevient une ligne normale. */
.hk-hero__liste li,
.hk-bullets li { display: block; position: relative; gap: 0; }
.hk-hero__liste li { padding-left: 35px; }
.hk-bullets li { padding-left: 26px; }
.hk-hero__liste li::before,
.hk-bullets li::before { position: absolute; left: 0; margin-top: 0; }
.hk-hero__liste li::before { top: 3px; }
.hk-bullets li::before { top: 9px; }

/* ---------- Pied de page : plan d'accès, badge carbone, mentions ------ */
.hk-footer__carte { margin: 44px -40px 0; line-height: 0; }
.hk-footer__carte iframe { display: block; width: 100%; height: 320px; border: 0; filter: grayscale(.55) saturate(.8) brightness(1.02); }
.hk-carbone { display: inline-flex; flex-direction: column; gap: 2px; max-width: 330px; margin-top: 26px; padding: 14px 18px; border: 1px solid #1E4029; border-radius: 14px; color: #8FA295; }
.hk-carbone:hover { border-color: var(--hk-orange); color: #8FA295; }
.hk-carbone__g { font-family: 'Pathway Extreme', sans-serif; font-size: 20px; font-weight: 700; color: var(--hk-yellow); }
.hk-carbone__txt { font-size: 13px; line-height: 1.45; }
.hk-carbone__txt strong { color: #FFFFFF; }
.hk-carbone__marque { font-family: 'Pathway Extreme', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7B8B80; margin-top: 4px; }
.hk-footer__liens { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.hk-footer__liens a { color: #C9D5CD; }
.hk-footer__liens a:hover { color: var(--hk-yellow); }
@media (max-width: 700px) {
	.hk-footer__carte { margin: 34px -20px 0; }
	.hk-footer__carte iframe { height: 240px; }
}
/* Lien vers une source officielle dans une carte de prix. */
.hk-tarif__liste a { color: var(--hk-rust); text-decoration: underline; text-underline-offset: 3px; }
.hk-tarif__liste a:hover { color: var(--hk-ink); }

/* ====================================================================== */
/* Pages simples : mentions légales, politique de confidentialité         */
/* Bannière sombre, sommaire qui suit le défilement, corps de texte mis   */
/* en forme, encart de contact en fin de page.                            */
/* ====================================================================== */

.hk-page { max-width: none; margin: 0; padding: 0; }

.hk-page__banniere { padding: clamp(48px, 5vw, 86px) 40px clamp(40px, 4.2vw, 68px); background: linear-gradient(180deg, #153021 0%, var(--hk-nuit) 100%); }
.hk-fil { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: 'Pathway Extreme', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hk-fil a { color: var(--hk-yellow); }
.hk-fil a:hover { color: #FFFFFF; }
.hk-fil span { color: #7B8B80; }
.hk-fil__ici { color: #C9D5CD; }
.hk-page__titre { margin-top: 22px; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.04; letter-spacing: -.03em; color: #FFFFFF; }
.hk-page__maj { margin-top: 16px; font-family: 'Pathway Extreme', sans-serif; font-size: 13px; color: #8FA295; }

/* Sommaire à gauche, texte à droite. Le sommaire reste visible au défilement. */
.hk-page__grille { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.hk-somm { position: sticky; top: 104px; }
.hk-somm__titre { font-family: 'Pathway Extreme', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hk-rust); }
.hk-site .hk-somm__liste { margin-top: 16px; display: grid; gap: 2px; border-left: 2px solid var(--hk-border); }
.hk-somm__liste a { display: block; padding: 8px 0 8px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 15px; line-height: 1.4; color: var(--hk-muted); }
.hk-somm__liste a:hover { border-left-color: var(--hk-orange); color: var(--hk-ink); }

/* Corps de texte : même échelle de titre que le reste du site. */
.hk-page__content { max-width: 68ch; margin-top: 0; font-size: 17.5px; line-height: 1.8; color: #3C4A41; }
.hk-page__content > *:first-child { margin-top: 0; font-size: 19px; line-height: 1.7; color: var(--hk-ink); }
.hk-page__content h2 { margin-top: 1.9em; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.02em; color: var(--hk-ink); scroll-margin-top: 104px; }
.hk-page__content h2 + p, .hk-page__content h2 + ul { margin-top: .8em; }
.hk-page__content strong { color: var(--hk-ink); }
.hk-site .hk-page__content ul { margin-top: 1.1em; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.hk-page__content li { position: relative; padding-left: 26px; }
.hk-page__content li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: var(--hk-orange); }
.hk-page__content li + li { margin-top: 0; }

/* Encart de fin : une question, un téléphone, une adresse. */
.hk-page__aide { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 56px; align-items: center; }
.hk-page__aide .hk-h2 { margin-top: 18px; }
.hk-page__aide .hk-lead { margin-top: 14px; }
.hk-page__aide-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hk-page__aide .hk-btn--light { background: #FFFFFF; }

@media (max-width: 1000px) {
	.hk-page__grille { grid-template-columns: 1fr; }
	.hk-somm { position: static; padding-bottom: 8px; }
	.hk-page__content { max-width: none; }
	.hk-page__aide { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.hk-page__banniere { padding-left: 20px; padding-right: 20px; }
	.hk-page__content { font-size: 17px; }
	.hk-page__content > *:first-child { font-size: 18px; }
}

/* ---------- Boutons : ne jamais déborder de l'écran ------------------- */
/* .hk-btn porte white-space:nowrap : un libellé long, « Obtenir un prix pour
   mon projet », sortait du téléphone. Sous 700 px le texte revient à la ligne
   et le bouton ne dépasse plus la largeur disponible. */
.hk-btn { max-width: 100%; }
@media (max-width: 700px) {
	.hk-btn { white-space: normal; text-align: center; justify-content: center; padding: 16px 22px; font-size: 17px; }
	.hk-cta-row .hk-btn, .hk-price-cta .hk-btn, .hk-tarifs__pied .hk-btn, .hk-page__aide-actions .hk-btn { width: 100%; }
	.hk-cta-row, .hk-price-cta, .hk-page__aide-actions { width: 100%; }
}


/* ---------- Fonds sombres éclaircis d'un cran ------------------------- */
/* Le vert forêt de JPC tirait vers le noir et écrasait la page. Toutes les
   sections sombres montent ensemble, pour que la bannière ne se retrouve pas
   plus claire que les sections qui la suivent. */
:root { --hk-nuit: #12291C; }
.hk-hero { background: linear-gradient(180deg, #1C4030 0%, #143020 100%); }
.hk-sec--dark { background: linear-gradient(180deg, #1A3B2A 0%, #14301F 100%); }
#chantiers.hk-sec--dark { background: linear-gradient(180deg, #17351F 0%, #112619 100%); }
.hk-page__banniere { background: linear-gradient(180deg, #1C4030 0%, #143020 100%); }
.hk-footer { background: #112619; }
.hk-bandeau { background: #143020; }
/* Les blocs posés sur ces fonds suivent, sinon ils disparaissent. */
.hk-note-dark, .hk-info__item { background: #22503A; }
.hk-stats { border-top-color: #2C5A42; }
.hk-stat { border-right-color: #2C5A42; }
.hk-carbone { border-color: #2C5A42; }
.hk-footer__bottom { border-top-color: #2C5A42; }
.hk-prices li { background: #1B4029; border-color: #2C5A42; }
.hk-note-outline { border-color: #2C5A42; }
.hk-shot { background: #17351F; }
.hk-hero__media { background: #22503A; }

/* ---------- Mot du fondateur : les trois repères du chantier ---------- */
/* Trois cartes identiques et un sur-titre en capitales espacées, c'était
   plat. Chacune reçoit son pictogramme dans une pastille sombre, et le
   sur-titre devient un vrai titre. */
.hk-valeurs { margin-top: 22px; display: grid; gap: 12px; }
.hk-valeur { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: start; background: var(--hk-cream); border: 1px solid var(--hk-border); border-radius: 18px; padding: 22px 24px; transition: border-color .3s ease; }
.hk-valeur:hover { border-color: var(--hk-orange); }
.hk-valeur__ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--hk-ink); color: var(--hk-yellow); }
.hk-valeur__ico svg { width: 26px; height: 26px; }
.hk-valeur__t { font-size: 20px; line-height: 1.2; color: var(--hk-ink); }
.hk-valeur__corps p { margin-top: 8px; font-size: 16.5px; line-height: 1.65; color: #3C4A41; }
.hk-valeur strong { color: var(--hk-ink); }
.hk-valeur a { color: var(--hk-rust); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
	.hk-valeur { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px; }
	.hk-valeur__ico { width: 44px; height: 44px; border-radius: 12px; }
	.hk-valeur__ico svg { width: 22px; height: 22px; }
	.hk-valeur__t { font-size: 18px; }
}

/* ---------- FAQ : les énumérations sortent en liste ------------------- */
/* Une suite de durées ou de pièces alignée dans un paragraphe ne se lit pas.
   L'intitulé en gras est suivi d'un point, jamais de deux-points. */
.hk-site .hk-faq__liste { margin-top: 4px; display: grid; gap: 10px; }
.hk-faq__liste li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.6; color: var(--hk-muted); }
.hk-faq__liste li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 2px; background: var(--hk-orange); }
.hk-faq__liste strong { color: var(--hk-ink); }