/* ====================================================================== */
/* Modernisation du 2026-10-02                                            */
/* Mêmes couleurs (vert HK, orange, crème), mêmes polices, mêmes textes   */
/* et mêmes photos. Ce qui change : bannière claire avec un aplat vert    */
/* décalé derrière la photo, moins de sections sombres (déroulé et météo  */
/* passent en vert pâle), décor discret de ronds et de trames de points,  */
/* titres plus grands, zoom au survol des photos, FAQ avec photos,        */
/* formulaire posé sur une photo de chantier voilée de vert.              */
/* Retour à l'avant : ne plus charger cette feuille (functions.php).      */
/* ====================================================================== */

:root {
	--hk-vert-pale: #E3EFE6;
	--hk-sapin: #1C4030;
	--hk-anneau-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='95' fill='none' stroke='%23E2650F' stroke-opacity='.6' stroke-width='3.4' stroke-dasharray='.1 10' stroke-linecap='round'/%3E%3C/svg%3E");
	--hk-anneau-vert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='95' fill='none' stroke='%2335C67F' stroke-opacity='.75' stroke-width='3.4' stroke-dasharray='.1 10' stroke-linecap='round'/%3E%3C/svg%3E");
	--hk-points-encre: radial-gradient(circle, rgba(15, 35, 24, .2) 1.8px, transparent 2.4px) 0 0 / 18px 18px;
	--hk-points-orange: radial-gradient(circle, rgba(226, 101, 15, .5) 2px, transparent 2.6px) 0 0 / 16px 16px;
}

/* ---------- Fonds de section : pleine largeur, teintes qui se voient ---- */
.hk-sec--vert { background: var(--hk-vert-pale); }
.hk-sec--cream { background: var(--hk-cream); }
.hk-sec--sand { background: var(--hk-cream); }

/* ---------- Titres de section plus grands, une seule taille ------------ */
.hk-h2 { font-size: clamp(38px, 4.3vw, 64px); line-height: 1.05; }

/* ---------- En-tête : même crème que la bannière ----------------------- */
.hk-header { background: var(--hk-cream); }

/* ---------- Bannière : grande photo de chantier pleine largeur ---------- */
/* La photo occupe la droite de l'écran jusqu'au bord, le texte reste à
   gauche sur un voile crème qui se fond dans la photo. Tampon « devis
   gratuit » posé dans le ciel, repères dans une barre blanche qui chevauche
   le bas de la photo. Le texte n'a pas changé. */
.hk-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--hk-cream); color: var(--hk-ink); padding: clamp(64px, 6.4vw, 112px) 40px 48px; }
.hk-hero::before { display: none; }
.hk-hero .hk-hero__fond { position: absolute; top: 0; right: 0; bottom: 0; left: 38%; z-index: -1; overflow: hidden; background: var(--hk-placeholder); }
.hk-hero__fond picture,
.hk-hero__fond img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hk-hero__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--hk-cream) 0%, rgba(246, 242, 233, .9) 18%, rgba(246, 242, 233, .4) 36%, rgba(246, 242, 233, 0) 56%); }
.hk-hero__texte { max-width: 660px; }
.hk-hero .hk-h1 { color: var(--hk-muted); }
.hk-hero .hk-h1__big,
.hk-hero .hk-mark { color: var(--hk-ink); }
.hk-hero__text { color: var(--hk-muted); }
.hk-hero__text strong,
.hk-hero__liste li strong { color: var(--hk-ink); }
.hk-hero__liste li { color: #3C4A41; }
.hk-hero .hk-btn--light { background: #FFFFFF; border-color: var(--hk-border); color: var(--hk-ink); }
.hk-hero .hk-btn--light:hover { background: #FFFFFF; border-color: var(--hk-ink); color: var(--hk-ink); }
.hk-hero .hk-btn--orange:hover { background: var(--hk-rust); color: #FFFFFF; }

/* Sur-titre en pastille blanche, point orange. */
.hk-hero .hk-hero__signature { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--hk-border); color: var(--hk-ink); font-size: 12px; letter-spacing: .12em; }
.hk-hero .hk-hero__signature::before { width: 9px; height: 9px; border-radius: 50%; background: var(--hk-orange); }


/* Repères : barre blanche, pictogrammes deux tons. */
.hk-hero .hk-stats { max-width: var(--hk-content); margin: clamp(56px, 6vw, 96px) auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #FFFFFF; border: 1px solid var(--hk-border); border-radius: 20px; }
.hk-hero .hk-stat { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 22px 26px; text-align: left; border-right: 1px solid var(--hk-border); border-bottom: 0; }
.hk-hero .hk-stat:last-child { border-right: 0; }
.hk-stat__ico { position: relative; isolation: isolate; flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--hk-sapin); color: #FFFFFF; }
.hk-stat__ico::before { content: ""; position: absolute; right: 8px; bottom: 8px; z-index: -1; width: 22px; height: 22px; border-radius: 50%; background: rgba(53, 198, 127, .55); }
.hk-stat__ico svg { width: 26px; height: 26px; }
.hk-hero .hk-stat__v { font-family: 'Pathway Extreme', sans-serif; font-size: clamp(20px, 1.7vw, 25px); font-weight: 800; line-height: 1.1; color: var(--hk-ink); }
.hk-hero .hk-stat__l { margin-top: 4px; font-size: 14.5px; line-height: 1.35; color: var(--hk-muted); }

/* ---------- Décor de fond : une seule forme discrète, une section sur deux --- */
/* Toujours dans un coin, à moitié coupées par le bord, dans la marge de la
   section ou derrière une photo ou une carte blanche, jamais sous un texte. */
.hk-deco, #meteo { position: relative; isolation: isolate; overflow: hidden; }
.hk-deco::before, .hk-deco::after,
#meteo::before, #meteo::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }

/* 01 Prestations (blanc) : anneau plein vert en bas à gauche, anneau de points orange en haut à droite */
.hk-deco--services::before { left: -150px; bottom: -120px; width: 300px; height: 300px; border-radius: 50%; border: 30px solid rgba(53, 198, 127, .16); }
.hk-deco--services::after { display: none; }

/* 02 Déroulé (vert pâle) : disque blanc en haut à droite, trame de points derrière les photos */
.hk-deco--methode::before { display: none; }
.hk-deco--methode::after { display: none; }

/* 03 Tarifs (crème) : anneau de points vert en haut à droite, disque vert pâle en bas à gauche */
.hk-deco--tarifs::before { display: none; }
.hk-deco--tarifs::after { left: -150px; bottom: -150px; width: 300px; height: 300px; border-radius: 50%; background: rgba(53, 198, 127, .14); }

/* 04 Réalisations (sombre) : un seul anneau vert en haut à droite */
.hk-deco--chantiers::before { display: none; }
.hk-deco--chantiers::after { display: none; }

/* 05 Fondateur (blanc) : disque vert pâle derrière la photo, trame au-dessus */
.hk-deco--fondateur::before { right: -190px; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; background: var(--hk-vert-pale); }
.hk-deco--fondateur::after { display: none; }

/* 06 Météo (vert pâle) : anneau blanc en haut à droite, demi-disque orange en bas à gauche */
#meteo::before { right: -110px; top: -150px; width: 300px; height: 300px; border-radius: 50%; border: 26px solid rgba(255, 255, 255, .8); }
#meteo::after { left: -50px; bottom: -45px; width: 110px; height: 110px; border-radius: 50%; background: var(--hk-orange); opacity: .9; }

/* 07 Zone (blanc) : anneau plein vert en haut à droite, trame en bas à droite */
.hk-deco--zone::before { display: none; }
.hk-deco--zone::after { display: none; }

/* 08 FAQ (crème) : disque vert pâle derrière les photos, anneau de points orange en bas à gauche */
.hk-deco--faq::before { right: -180px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: rgba(53, 198, 127, .14); }
.hk-deco--faq::after { display: none; }

/* ---------- 02 Déroulé du chantier : une photo par étape --------------- */
/* Ordinateur : cinq colonnes, pastilles sur un trait en pointillés au-dessus
   des photos. Sous 1100 px : une colonne, trait vertical dans l'axe des
   pastilles, jusqu'à la pastille suivante. */
.hk-sec--vert .hk-eyebrow { color: var(--hk-rust); }
.hk-sec--vert .hk-h2 { color: var(--hk-ink); }
.hk-sec--vert .hk-lead { color: var(--hk-muted); }
.hk-sec--vert .hk-lead strong { color: var(--hk-ink); }
.hk-sec--vert .hk-note-dark { background: #FFFFFF; color: #3C4A41; }
.hk-sec--vert .hk-note-dark strong { color: var(--hk-ink); }

/* Étapes en cartes blanches : photo avec son étiquette, pastille numérotée à
   cheval sur le bas de la photo, pointillés d'une carte à la suivante. */
.hk-site .hk-etapes { margin-top: 56px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.hk-etape { position: relative; display: flex; flex-direction: column; min-width: 0; background: #FFFFFF; border-radius: 22px; }
.hk-etape__haut { position: relative; }
.hk-etape__haut::after { content: ""; position: absolute; left: 100%; bottom: -2px; width: 22px; border-top: 4px dotted var(--hk-sapin); }
.hk-etape:last-child .hk-etape__haut::after { display: none; }
.hk-etape__photo { position: relative; aspect-ratio: 4 / 3; border-radius: 22px 22px 0 0; overflow: hidden; background: var(--hk-placeholder); }
.hk-etape__photo picture,
.hk-etape__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hk-etape__n { position: absolute; left: 20px; bottom: -27px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; border: 4px solid #FFFFFF; background: var(--hk-sapin); color: #FFFFFF; font-family: 'Pathway Extreme', sans-serif; font-size: 19px; font-weight: 800; }
.hk-etape__corps { flex: 1; padding: 42px 22px 26px; }
.hk-etape__t { font-size: 21px; line-height: 1.15; color: var(--hk-ink); }
.hk-etape__corps p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: #2B3A31; }
.hk-etape__corps strong { color: var(--hk-ink); }
.hk-etapes__note { margin-top: 32px; }

/* ---------- 03 Tarifs : prix de départ, clairs et sans fourchette ------ */
.hk-prix-grille { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.hk-prix { display: flex; flex-direction: column; min-width: 0; background: #FFFFFF; border: 1px solid var(--hk-border); border-radius: 20px; overflow: hidden; transition: transform .4s var(--hk-ease, ease), border-color .3s ease; }
.hk-prix:hover { transform: translateY(-4px); border-color: var(--hk-orange); }
.hk-prix__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--hk-placeholder); }
.hk-prix__img picture,
.hk-prix__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hk-prix__etiquette { position: absolute; left: 16px; bottom: 16px; z-index: 2; padding: 8px 14px; border-radius: 999px; background: #FFFFFF; color: var(--hk-ink); font-family: 'Pathway Extreme', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hk-prix__etiquette--orange { background: var(--hk-orange); color: #FFFFFF; }
.hk-prix__corps { flex: 1; display: flex; flex-direction: column; padding: 28px 30px 30px; }
.hk-prix__nom { font-size: 27px; line-height: 1.15; color: var(--hk-ink); }
.hk-prix__montant { margin-top: 18px; display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; border-radius: 14px; background: var(--hk-vert-pale); }
.hk-prix__montant span { font-family: 'Pathway Extreme', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hk-rust); }
.hk-prix__montant strong { font-family: 'Pathway Extreme', sans-serif; font-size: clamp(38px, 3.2vw, 50px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--hk-ink); }
.hk-prix__pour { margin-top: 22px; font-size: 16px; font-weight: 700; color: var(--hk-ink); }
.hk-site .hk-prix__liste { margin-top: 10px; display: grid; gap: 10px; }
.hk-prix__liste li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; color: #3C4A41; }
.hk-prix__liste li::before,
.hk-prix-compris__liste li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; 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 / 12px 12px no-repeat; }
.hk-prix__note { margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--hk-muted); }
.hk-prix__note a { color: var(--hk-rust); text-decoration: underline; text-underline-offset: 3px; }
.hk-prix__lien { align-self: flex-start; margin-top: auto; padding-top: 24px; font-size: 16.5px; font-weight: 700; color: var(--hk-orange); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.hk-prix__lien::after { content: " \2192"; }
.hk-prix__lien:hover { color: var(--hk-rust); }

/* Bandeau vert sapin : ce que comprend chaque devis. */
.hk-prix-compris { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; padding: 22px 28px; border-radius: 18px; background: var(--hk-sapin); color: #FFFFFF; }
.hk-prix-compris__t { font-family: 'Pathway Extreme', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hk-yellow); }
.hk-site .hk-prix-compris__liste { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.hk-prix-compris__liste li { position: relative; padding-left: 28px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.hk-prix-compris__liste li::before { top: 0; background-color: var(--hk-yellow); }
#tarifs .hk-tarifs__pied { margin-top: 16px; }

/* ---------- 05 Fondateur : citation sans boîte, repères en cartes blanches */
.hk-founder .hk-quote { position: relative; isolation: isolate; margin-top: 34px; padding: 0; background: none; border: 0; border-radius: 0; font-size: clamp(21px, 1.7vw, 25px); line-height: 1.6; color: var(--hk-ink); }
.hk-founder .hk-quote::before { content: none; }
.hk-valeur { background: #FFFFFF; border-color: var(--hk-border); }
.hk-valeur__ico { position: relative; isolation: isolate; background: var(--hk-sapin); color: #FFFFFF; }
.hk-valeur__ico::before { content: ""; position: absolute; right: 9px; bottom: 9px; width: 24px; height: 24px; border-radius: 50%; background: rgba(53, 198, 127, .55); z-index: -1; }

/* ---------- 06 Météo : section claire, les cartes blanches ressortent -- */
#meteo.hk-sec--dark { background: var(--hk-vert-pale); color: var(--hk-ink); }
#meteo.hk-sec--dark .hk-eyebrow { color: var(--hk-rust); }
#meteo.hk-sec--dark .hk-h2 { color: var(--hk-ink); }
#meteo .hk-meteo-source { color: var(--hk-muted); }
#meteo .hk-meteo-source a { color: var(--hk-ink); }

/* ---------- 07 Zone : pastilles de départements en vert pâle ---------- */
.hk-depts li { background: var(--hk-vert-pale); border-color: #CFE3D5; }

/* ---------- 08 FAQ : une photo à gauche, les questions à droite ------- */
.hk-faq-col .hk-faq { margin-top: 40px; }
.hk-faq-photos { min-height: 0; }

/* ---------- 09 Contact : photo de chantier voilée de vert en fond ------ */
.hk-contact--photo { position: relative; isolation: isolate; overflow: hidden; }
.hk-contact__fond { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hk-contact__fond picture,
.hk-contact__fond img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hk-contact__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(17, 38, 25, .95) 0%, rgba(20, 48, 32, .9) 50%, rgba(20, 48, 32, .8) 100%); }
.hk-js .hk-contact__fond .hk-revele { opacity: 1 !important; animation: none !important; }
.hk-contact--photo .hk-info__item { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }


/* Zone sur vert pâle (la météo a été retirée) : pastilles blanches. */
.hk-sec--vert .hk-depts li { background: #FFFFFF; border-color: var(--hk-border); }

/* ---------- 04 Réalisations : avant / après à faire glisser ------------- */
.hk-avap-bloc { margin-top: 36px; }
.hk-avap-intro { font-size: 17px; line-height: 1.6; color: #C9D5CD; }
.hk-avap-intro strong { color: #FFFFFF; }
.hk-avap-grille { margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hk-avap-carte { margin: 0; min-width: 0; }
.hk-avap { --p: 50%; position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: #17351F; cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.hk-avap:focus-visible { outline: 3px solid var(--hk-yellow); outline-offset: 3px; }
.hk-avap__apres,
.hk-avap__avant { position: absolute; inset: 0; }
.hk-avap__avant { z-index: 1; clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.hk-avap picture,
.hk-avap img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.hk-avap__poignee { position: absolute; top: 0; bottom: 0; left: var(--p); z-index: 2; width: 3px; margin-left: -1.5px; background: #FFFFFF; }
.hk-avap__poignee::after { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2318' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 24px 24px no-repeat; }
.hk-avap.is-glisse .hk-avap__poignee::after { background-color: var(--hk-yellow); }
.hk-avap__label { position: absolute; top: 14px; z-index: 3; padding: 6px 11px; border-radius: 999px; background: rgba(15, 35, 24, .78); color: #FFFFFF; font-family: 'Pathway Extreme', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1; text-transform: uppercase; pointer-events: none; }
.hk-avap__label--avant { left: 14px; }
.hk-avap__label--apres { right: 14px; }
.hk-avap-carte figcaption { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; line-height: 1.4; color: #C9D5CD; }
.hk-avap-carte figcaption strong { font-size: 17px; color: #FFFFFF; }
/* Les photos d'un comparateur ne s'animent jamais : l'avant et l'après
   doivent rester superposés. */
.hk-js .hk-avap .hk-revele,
.hk-js .hk-avap-carte.hk-revele { opacity: 1 !important; animation: none !important; }
#chantiers .hk-gallery--mosaique { margin-top: 0; }

/* ---------- Zoom au survol des photos (cadre fixe, image qui avance) --- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.hk-js .hk-zoom .hk-zoom__img,
	.hk-photo img,
	.hk-etape__photo img,
	.hk-prix__img img { transition: transform .6s var(--hk-ease, ease); }
	.hk-js .hk-zoom:hover .hk-zoom__img,
	.hk-js .hk-zoom:focus-visible .hk-zoom__img,
	.hk-photo:hover img,
	.hk-etape:hover .hk-etape__photo img,
	.hk-prix:hover .hk-prix__img img { transform: scale(1.07); }
}

/* ---------- Damier : la carte passe à gauche, la photo de la FAQ aussi -- */
@media (min-width: 901px) {
	#zone .hk-split > .hk-map { order: -1; }
	.hk-faq-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: clamp(40px, 5vw, 80px); }
}


/* ---------------------------------------------------------------------- */
/* Responsive : toujours en dernier                                        */
/* ---------------------------------------------------------------------- */
@media (max-width: 1180px) {
	/* Déroulé : une carte par ligne, photo à gauche, pastille sur la jonction,
	   pointillés d'une carte à la suivante dans l'axe des pastilles. */
	.hk-site .hk-etapes { grid-template-columns: 1fr; gap: 30px; }
	.hk-etape { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
	.hk-etape__haut { height: 100%; }
	.hk-etape__haut::after { display: none; }
	.hk-etape::after { content: ""; position: absolute; left: calc(40% - 2px); top: 100%; height: 30px; border-left: 4px dotted var(--hk-sapin); }
	.hk-etape:last-child::after { display: none; }
	.hk-etape__photo { aspect-ratio: auto; height: 100%; min-height: 220px; border-radius: 22px 0 0 22px; }
	.hk-etape__n { left: auto; right: -27px; bottom: auto; top: 22px; }
	.hk-etape__corps { align-self: center; padding: 28px 28px 28px 50px; }
}

@media (max-width: 1100px) {
	/* Tarifs : une carte par ligne, photo à gauche. */
	.hk-prix-grille { grid-template-columns: 1fr; }
	.hk-avap-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hk-prix { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
	.hk-prix__img { aspect-ratio: auto; min-height: 260px; }
}

@media (max-width: 1000px) {
	/* Repères de la bannière : deux par ligne. */
	.hk-hero .hk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hk-hero .hk-stat { border-right: 0; border-bottom: 1px solid var(--hk-border); }
	.hk-hero .hk-stat:nth-child(odd) { border-right: 1px solid var(--hk-border); }
	.hk-hero .hk-stat:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 900px) {
	/* Bannière : la photo passe au-dessus du texte, pleine largeur. */
	.hk-hero { padding: 0 0 48px; }
	.hk-hero .hk-hero__fond { position: relative; left: auto; height: clamp(300px, 56vw, 460px); }
	.hk-hero__fond::after { background: linear-gradient(180deg, rgba(246, 242, 233, 0) 62%, var(--hk-cream) 100%); }
	.hk-hero > .hk-wrap { margin-top: -18px; padding: 0 40px; }
	.hk-hero__texte { max-width: none; }
	.hk-hero .hk-stats { margin: 40px 40px 0; }
	/* FAQ : une seule photo, au-dessus des questions, en paysage. */
	.hk-faq-photos .hk-photo:nth-child(2) { display: none; }
	.hk-faq-photos .hk-photo { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
}

@media (max-width: 700px) {
	.hk-h2 { font-size: clamp(31px, 8.4vw, 38px); }

	/* Bannière : composition resserrée, le titre arrive dans le premier écran. */
	.hk-hero { padding: 0 0 40px; }
	.hk-hero .hk-hero__fond { left: 0; height: clamp(260px, 72vw, 340px); }
	.hk-hero > .hk-wrap { padding: 0 20px; }
	.hk-hero .hk-stats { margin: 32px 20px 0; }
	.hk-hero .hk-stat { gap: 12px; padding: 16px 14px; }
	.hk-stat__ico { width: 42px; height: 42px; border-radius: 12px; }
	.hk-stat__ico svg { width: 22px; height: 22px; }
	.hk-stat__ico::before { width: 18px; height: 18px; right: 6px; bottom: 6px; }
	.hk-hero .hk-stat__v { font-size: 19px; }
	.hk-hero .hk-stat__l { font-size: 13px; }

	/* Décor réduit et logé dans la marge haute ou basse de la section. */
	.hk-deco--services::before { left: -60px; bottom: -70px; width: 120px; height: 120px; border-width: 16px; }
	.hk-deco--services::after { right: -40px; top: -60px; width: 110px; height: 110px; }
	.hk-deco--methode::before { right: -60px; top: -100px; width: 150px; height: 150px; }
	.hk-deco--methode::after { left: 8px; bottom: 10px; width: 100px; height: 44px; }
	.hk-deco--tarifs::before { right: -36px; top: -60px; width: 110px; height: 110px; }
	.hk-deco--tarifs::after { left: -60px; bottom: -80px; width: 130px; height: 130px; }
	.hk-deco--chantiers::before { right: -70px; top: -80px; width: 140px; height: 140px; border-width: 16px; }
	.hk-deco--fondateur::before { right: -60px; bottom: -80px; width: 130px; height: 130px; }
	.hk-deco--fondateur::after { right: 10px; top: 10px; width: 90px; height: 44px; }
	#meteo::before { right: -50px; top: -80px; width: 130px; height: 130px; border-width: 14px; }
	#meteo::after { left: -36px; bottom: -40px; width: 80px; height: 80px; }
	.hk-deco--zone::before { right: -50px; top: -70px; width: 120px; height: 120px; border-width: 14px; }
	.hk-deco--zone::after { right: 10px; bottom: 8px; width: 90px; height: 44px; }
	.hk-deco--faq::before { right: -60px; top: -90px; width: 140px; height: 140px; }
	.hk-deco--faq::after { left: -50px; bottom: -50px; width: 110px; height: 110px; }


	/* Déroulé : photo au-dessus du texte, pastille à cheval, pointillés
	   d'une carte à la suivante sous la pastille. */
	.hk-site .hk-etapes { margin-top: 40px; gap: 28px; }
	.hk-etape { display: flex; }
	.hk-etape__haut { height: auto; }
	.hk-etape::after { left: 45px; height: 28px; }
	.hk-etape__photo { aspect-ratio: 16 / 10; height: auto; min-height: 0; border-radius: 20px 20px 0 0; }
	.hk-etape__n { left: 20px; right: auto; top: auto; bottom: -25px; width: 50px; height: 50px; font-size: 17px; }
	.hk-etape__corps { align-self: stretch; padding: 38px 20px 24px; }
	.hk-etape__t { font-size: 21px; }

	/* Tarifs : photo au-dessus, prix bien visible. */
	.hk-prix { display: flex; }
	.hk-prix__img { aspect-ratio: 16 / 9; min-height: 0; }
	.hk-prix__corps { padding: 24px 22px 26px; }
	.hk-prix__nom { font-size: 24px; }
	.hk-prix__montant strong { font-size: 40px; }
	.hk-prix-compris { padding: 20px 22px; }
	.hk-site .hk-prix-compris__liste { flex-direction: column; gap: 10px; }

	/* Avant / après : un par ligne, en paysage. */
	.hk-avap-grille { grid-template-columns: 1fr; gap: 26px; }
	.hk-avap { aspect-ratio: 4 / 3; }
}

@media (max-width: 420px) {
	.hk-hero .hk-stat { flex-direction: column; align-items: flex-start; }
}

/* ====================================================================== */
/* Polices d'origine du site (Bricolage Grotesque, Schibsted Grotesk,     */
/* Spline Sans Mono) avec leurs graisses d origine, titres gras compris.  */
/* Aucun trait sous les mots : le mot-clé des titres passe en vert. Fond : */
/* seulement les ronds pâles façon Tigmi. Placé en fin de feuille.        */
/* ====================================================================== */

/* Mot-clé des titres : vert, sans trait ni fond. Vert foncé sur les fonds
   clairs (lisible), vert HK sur les fonds sombres. */
.hk-mark { background: none !important; padding: 0 !important; animation: none !important; color: #24935A !important; }
.hk-mark::before, .hk-mark::after { display: none !important; }
.hk-sec--dark .hk-mark, .hk-page__banniere .hk-mark { color: var(--hk-yellow) !important; }

/* Fond : plus de formes en pseudo-éléments, seulement les ronds pâles à bord
   net, un grand coupé dans un coin et un petit sur le bord opposé. */
.hk-deco::before, .hk-deco::after { display: none !important; }
#services, .hk-founder {
	background-image:
		radial-gradient(circle 260px at right -110px top -130px, var(--hk-vert-pale) 99.4%, transparent 100%),
		radial-gradient(circle 120px at left 6% bottom -70px, #ECE4D6 99%, transparent 100%);
	background-repeat: no-repeat;
}
#tarifs, #faq {
	background-image:
		radial-gradient(circle 300px at left -130px bottom -150px, #E2ECDF 99.4%, transparent 100%),
		radial-gradient(circle 100px at right 7% top -50px, #EAE2D3 99%, transparent 100%);
	background-repeat: no-repeat;
}

/* Réalisations : rien que des avant / après, trois par ligne. */
.hk-avap-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

@media (max-width: 1100px) {
	.hk-avap-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	#services, .hk-founder {
		background-image:
			radial-gradient(circle 150px at right -80px top -90px, var(--hk-vert-pale) 99.2%, transparent 100%),
			radial-gradient(circle 70px at left 6% bottom -44px, #ECE4D6 99%, transparent 100%);
	}
	#tarifs, #faq {
		background-image:
			radial-gradient(circle 170px at left -90px bottom -100px, #E2ECDF 99.2%, transparent 100%),
			radial-gradient(circle 60px at right 7% top -34px, #EAE2D3 99%, transparent 100%);
	}
}
@media (max-width: 700px) {
	.hk-avap-grille { grid-template-columns: 1fr; }
}

/* Sans animations décoratives (2026-10-02) : anim-3.css et anim-3.js ne sont
   plus chargés. Restent l'interface et les survols : ouverture fluide des
   questions, zoom de la photo sous la souris. */
:root { --hk-ease: cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: no-preference) {
	.hk-faq__a { transition: grid-template-rows .35s ease; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.hk-service__img img { transition: transform .6s var(--hk-ease); }
	.hk-service:hover .hk-service__img img { transform: scale(1.07); }
}

/* ---------- Bannière en deux parties (2026-10-02, « j'aime pas l'image en
   fondu ») : texte à gauche sur le crème, photo nette à droite jusqu'au
   bord de l'écran, un seul coin arrondi, aucun voile. ------------------ */
.hk-hero { padding: 0 0 48px; }
.hk-hero__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: clamp(560px, 46vw, 720px); }
.hk-hero__texte { align-self: center; max-width: none; padding: clamp(48px, 5vw, 88px) clamp(32px, 4vw, 72px) clamp(40px, 4vw, 72px) max(40px, calc((100vw - var(--hk-content)) / 2)); }
.hk-hero__texte > * { max-width: 660px; }
.hk-hero .hk-hero__fond { position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 0; height: auto; min-height: 100%; border-radius: 0 0 0 28px; overflow: hidden; }
.hk-hero__fond::after { content: none; display: none; }
.hk-hero .hk-stats { width: calc(100% - 80px); max-width: var(--hk-content); margin: 40px auto 0; }

/* Étiquettes sur les photos : rectangulaires, sans pastille. */
.hk-service__badge, .hk-prix__etiquette, .hk-avap__label { border-radius: 4px; }
.hk-service__badge { padding: 7px 12px; }
.hk-service__badge::before { display: none; }

/* Déroulé : numéros d'étape en orange. */
.hk-etape__n { background: var(--hk-orange); }

/* Réalisations : plus de phrase d'introduction ni de légende. */
.hk-avap-bloc { margin-top: 40px; }
.hk-avap-grille { margin-top: 0; }

@media (max-width: 900px) {
	.hk-hero__grille { grid-template-columns: 1fr; min-height: 0; }
	.hk-hero .hk-hero__fond { order: -1; height: clamp(280px, 60vw, 460px); min-height: 0; border-radius: 0; }
	.hk-hero__texte { padding: 32px 40px 0; }
	.hk-hero__texte > * { max-width: none; }
	.hk-hero .hk-stats { width: calc(100% - 80px); margin-top: 36px; }
}
@media (max-width: 700px) {
	.hk-hero { padding-bottom: 40px; }
	.hk-hero .hk-hero__fond { height: clamp(240px, 66vw, 320px); }
	.hk-hero__texte { padding: 26px 20px 0; }
	.hk-hero .hk-stats { width: calc(100% - 40px); margin-top: 32px; }
}

/* ---------- Bannière : photo encadrée (2026-10-02, « mets pas la photo en
   full hauteur ») : arrondie aux quatre coins, à l'intérieur de la largeur
   du site, centrée en hauteur à côté du texte. ------------------------- */
.hk-hero__grille { max-width: calc(var(--hk-content) + 80px); min-height: 0; margin: 0 auto; padding: clamp(48px, 5vw, 88px) 40px 0; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(36px, 4vw, 72px); align-items: center; }
.hk-hero__texte { padding: 0; }
.hk-hero .hk-hero__fond { height: clamp(400px, 34vw, 540px); min-height: 0; border-radius: 24px; }

@media (max-width: 900px) {
	.hk-hero__grille { grid-template-columns: 1fr; padding: 32px 40px 0; gap: 28px; }
	.hk-hero__texte { padding: 0; }
	.hk-hero .hk-hero__fond { height: clamp(260px, 56vw, 420px); border-radius: 20px; }
}
@media (max-width: 700px) {
	.hk-hero__grille { padding: 20px 20px 0; gap: 24px; }
	.hk-hero .hk-hero__fond { height: clamp(220px, 60vw, 300px); border-radius: 16px; }
}

/* ---------- Bannière : mix de trois photos (2026-10-02, « mets un mix &
   match d'images ») : une grande à gauche, deux petites empilées à droite,
   coins arrondis, aucun décor. Une seule photo sur téléphone. ---------- */
.hk-hero__mix { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; height: clamp(420px, 36vw, 560px); min-width: 0; }
.hk-hero__mix > div { position: relative; overflow: hidden; border-radius: 20px; background: var(--hk-placeholder); }
.hk-hero__mix-a { grid-row: 1 / span 2; }
.hk-hero__mix picture,
.hk-hero__mix img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* Mot du fondateur raccourci : moins d'air entre les blocs. */
.hk-founder .hk-quote { margin-top: 24px; }
.hk-founder .hk-valeurs { margin-top: 26px; }

@media (max-width: 900px) {
	.hk-hero__mix { order: -1; height: clamp(300px, 62vw, 460px); }
}
@media (max-width: 600px) {
	.hk-hero__mix { grid-template-columns: 1fr; grid-template-rows: 1fr; height: clamp(220px, 62vw, 300px); }
	.hk-hero__mix-a { grid-row: auto; border-radius: 16px; }
	.hk-hero__mix-b, .hk-hero__mix-c { display: none; }
}

/* En-tête distinct de la bannière (2026-10-02, « crée une variation entre le
   header et le hero ») : en-tête blanc avec un filet, bannière crème. */
.hk-header, .hk-header.is-scrolled { background: #FFFFFF; border-bottom: 1px solid var(--hk-border); }

/* Téléphone dans l'en-tête sur mobile (2026-10-02) : bouton vert sapin à
   côté du menu, toujours sous le pouce. Masqué sur grand écran, où le
   numéro est déjà dans la navigation. */
.hk-tel-mobile { display: none; }
@media (max-width: 1080px) {
	.hk-tel-mobile { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 52px; margin-left: auto; padding: 0 16px; border-radius: 10px; background: var(--hk-ink); color: #FFFFFF; font-size: 16px; font-weight: 700; white-space: nowrap; }
	.hk-tel-mobile:hover { background: #000000; color: #FFFFFF; }
	.hk-tel-mobile + .hk-burger { margin-left: 0; }
}
@media (max-width: 400px) {
	.hk-tel-mobile { padding: 0 12px; font-size: 15px; }
	.hk-tel-mobile svg { display: none; }
}

/* Prestations : titre seul, centré (2026-10-02). */
#services .hk-eyebrow { justify-content: center; }
#services .hk-services__head { display: block; text-align: center; }
#services .hk-services__head .hk-h2 { max-width: 900px; margin: 0 auto; }

/* Bannière : le mix de photos prend exactement la hauteur du texte (2026-10-02). */
@media (min-width: 901px) {
	.hk-hero__grille { align-items: stretch; }
	.hk-hero__mix { height: auto; min-height: 420px; }
}

/* Titres seuls (textes d'introduction retirés le 2026-10-02) : le titre de
   section n'occupe plus qu'une colonne, le bouton du bas des prix reste seul. */
#methode .hk-services__head, #tarifs .hk-services__head { display: block; }
#tarifs .hk-tarifs__pied { justify-content: center; }

/* Téléphone de l'en-tête mobile : l'icône seule (2026-10-02), le numéro reste
   dans l'aria-label du lien. */
@media (max-width: 1080px) {
	.hk-tel-mobile { justify-content: center; width: 52px; padding: 0; }
	.hk-tel-mobile span { display: none; }
	.hk-tel-mobile svg { display: block !important; width: 22px; height: 22px; }
}

/* Bannière sur téléphone : le mix de trois photos en entier (2026-10-02), une
   grande à gauche et deux petites empilées, comme sur ordinateur. */
@media (max-width: 600px) {
	.hk-hero__mix { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; height: clamp(280px, 86vw, 340px); }
	.hk-hero__mix > div { border-radius: 14px; }
	.hk-hero__mix-a { grid-row: 1 / span 2; }
	.hk-hero__mix-b, .hk-hero__mix-c { display: block; }
}

/* Pied de page : carte avec marges sur les côtés, arrondie, reliée à la fiche
   Google (2026-10-02). */
.hk-footer__carte { max-width: var(--hk-content); margin: 44px auto 0; border-radius: 18px; overflow: hidden; }
.hk-footer__gmb { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 700; color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.hk-footer__gmb:hover { color: var(--hk-yellow); }

/* H1 plus grand (2026-10-02). */
.hk-h1 .hk-h1__big { font-size: clamp(52px, 5.4vw, 94px); }

/* Bannière : un grand rond pâle en haut à droite, coupé par le bord (2026-10-02). */
.hk-hero { background-image: radial-gradient(circle 340px at right -120px top -150px, #E3EFE6 99.4%, transparent 100%); background-repeat: no-repeat; }

@media (max-width: 760px) {
	.hk-hero { background-image: radial-gradient(circle 170px at right -70px top -80px, #E3EFE6 99.2%, transparent 100%); }
}
@media (max-width: 700px) {
	.hk-footer__carte { margin-top: 34px; border-radius: 14px; }
	.hk-h1 .hk-h1__big { font-size: clamp(40px, 11.6vw, 48px); }
}

/* Nouveau logo (boule de démolition, 2026-10-02) : version blanche dans le pied,
   sans filtre, pour garder la boule orange. */
.hk-footer__logo { filter: none; height: 58px; }
@media (max-width: 700px) {
	.hk-header .hk-logo img, .hk-header.is-compact .hk-logo img { height: 40px; }
}

/* Logo affiché plus grand (2026-10-02). */
.hk-logo img, .hk-header.is-compact .hk-logo img { height: 64px; }
.hk-footer__logo { height: 66px; }
@media (max-width: 1080px) {
	.hk-header .hk-logo img, .hk-header.is-compact .hk-logo img { height: 52px; }
}
@media (max-width: 700px) {
	.hk-header .hk-logo img, .hk-header.is-compact .hk-logo img { height: 46px; }
}
@media (max-width: 400px) {
	.hk-header .hk-logo img, .hk-header.is-compact .hk-logo img { height: 42px; }
}

/* Bouton téléphone de l'en-tête plus grand (2026-10-05), sur ordinateur. */
@media (min-width: 1081px) {
	.hk-header .hk-nav .hk-btn--dark { padding: 17px 28px; font-size: 20px; border-radius: 12px; gap: 12px; }
	.hk-header .hk-nav .hk-btn--dark svg { width: 22px; height: 22px; }
}

/* ====================================================================== */
/* Pages de service (2026-10-15) : ouverture de mur porteur, démolition de */
/* maison, curage, désamiantage, location de benne. Bannière sobre, menu   */
/* déroulant des prestations, blocs texte + photo à hauteur égale, étapes  */
/* en accordéons, cartes de prix, avant / après, autres prestations.       */
/* ====================================================================== */

/* ---------- Bannière sobre : fil d'Ariane et titre, centrés ------------ */
.hk-svc-banniere .hk-wrap { text-align: center; }
.hk-svc-banniere .hk-fil { justify-content: center; }
.hk-svc-banniere .hk-page__titre { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* ---------- Menu déroulant « Prestations » ----------------------------- */
/* Une photo par prestation, le nom écrit SUR la photo (2026-10-28 : « mets */
/* le texte dans les images, il faut toujours faire ça dans le menu »).      */
/* Dégradé sombre sous le nom pour qu'il reste lisible. Sur ordinateur,      */
/* panneau blanc pleine largeur collé sous le trait gris de l'en-tête ;      */
/* survol = zoom de la photo et couleur du nom, sans aplat.                  */
.hk-nav__item { position: relative; }
.hk-nav__item > .hk-nav__link::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.hk-site .hk-nav__sous { display: none; margin: 0; padding: 0; list-style: none; }
.hk-nav__sous a { position: relative; display: block; overflow: hidden; }
.hk-nav__photo { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--hk-placeholder); }
.hk-nav__photo picture,
.hk-nav__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hk-nav__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 26, 18, .88) 0%, rgba(10, 26, 18, .5) 36%, rgba(10, 26, 18, 0) 64%); }
.hk-site .hk-nav__nom { position: absolute; z-index: 1; color: #FFFFFF; font-weight: 700; line-height: 1.22; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
@media (min-width: 1081px) {
	.hk-site .hk-nav__item { position: static; padding: 0; margin: 0; }
	/* Bande invisible sous le lien : le survol tient jusqu'au panneau. */
	.hk-nav__item > .hk-nav__link::before { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 32px; }
	.hk-site .hk-nav__sous { position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 50; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; padding: 26px max(40px, calc((100% - var(--hk-content)) / 2)) 32px; background: #FFFFFF; border-bottom: 1px solid var(--hk-border); border-radius: 0 0 22px 22px; }
	.hk-nav__item:hover .hk-nav__sous, .hk-nav__item:focus-within .hk-nav__sous { display: grid; }
	.hk-nav__sous a { border-radius: 14px; }
	.hk-nav__photo { aspect-ratio: 4 / 3.4; border-radius: 14px; }
	.hk-nav__photo img { transition: transform .5s ease; }
	.hk-nav__sous a:hover .hk-nav__photo img { transform: scale(1.05); }
	.hk-site .hk-nav__nom { left: 18px; right: 18px; bottom: 16px; font-size: 18px; }
	.hk-site .hk-nav__sous a:hover .hk-nav__nom, .hk-site .hk-nav__sous a[aria-current] .hk-nav__nom { color: #35C67F; }
}
@media (max-width: 1080px) {
	/* Téléphone et tablette : une bande photo par prestation, le nom dessus. */
	.hk-site .hk-nav__sous { display: grid; gap: 10px; padding: 6px 0 14px; }
	.hk-header .hk-nav .hk-nav__sous a { display: block; min-height: 0; padding: 0; border: 0; border-radius: 12px; }
	.hk-nav__photo { width: auto; aspect-ratio: 16 / 4.6; border-radius: 12px; }
	.hk-nav__photo::after { background: linear-gradient(to right, rgba(10, 26, 18, .86) 0%, rgba(10, 26, 18, .55) 48%, rgba(10, 26, 18, .12) 100%); }
	.hk-site .hk-nav__nom { left: 16px; right: 16px; top: 50%; transform: translateY(-50%); font-size: 17px; }
	.hk-site .hk-nav__sous a[aria-current] .hk-nav__nom { color: #35C67F; }
	.hk-nav__item > .hk-nav__link::after { display: none; }
}

/* ---------- Blocs texte + photo ---------------------------------------- */
.hk-svc-texte .hk-h2, .hk-svc-etapes .hk-h2, .hk-svc-zone .hk-h2, .hk-svc-faq .hk-h2, .hk-svc-avap .hk-h2, .hk-svc-autres .hk-h2, .hk-svc-prix .hk-h2 { margin-top: 22px; }
.hk-svc-colonne { align-self: center; min-width: 0; }
.hk-svc-corps { margin-top: 24px; display: grid; gap: 16px; }
.hk-svc-corps .hk-body { font-size: 17.5px; line-height: 1.75; color: #3C4A41; }
.hk-svc-corps .hk-body a { color: var(--hk-rust); text-decoration: underline; text-underline-offset: 3px; }
.hk-site .hk-svc-corps .hk-bullets { margin-top: 0; }
.hk-site .hk-svc-pastilles { margin-top: 24px; }
.hk-svc-texte .hk-cta-row { margin-top: 28px; }
.hk-svc-texte .hk-photos, .hk-svc-zone .hk-photos, .hk-svc-etapes .hk-photos { min-height: 440px; }
.hk-sec--dark .hk-svc-corps .hk-body { color: #C9D5CD; }
.hk-sec--dark .hk-svc-corps strong, .hk-sec--dark .hk-bullets li strong { color: #FFFFFF; }
.hk-sec--dark .hk-bullets li { color: #DDE5DF; }
.hk-sec--dark .hk-svc-corps .hk-body a { color: var(--hk-yellow); }
.hk-sec--dark .hk-villes li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #FFFFFF; }
.hk-sec--dark .hk-svc-colonne .hk-btn--light { background: transparent; border-color: #57534E; color: #FFFFFF; }
@media (min-width: 901px) {
	.hk-svc-texte--inverse .hk-split > .hk-photos { order: -1; }
}

/* ---------- Prix : cartes à bandeau, note sous la grille --------------- */
.hk-tarif__sous { margin-top: 14px; font-size: 15px; font-weight: 600; line-height: 1.45; text-align: center; color: var(--hk-rust); }
.hk-svc-note { margin-top: 22px; font-size: 16px; line-height: 1.6; text-align: center; color: var(--hk-muted); }
.hk-svc-note a { color: var(--hk-rust); text-decoration: underline; text-underline-offset: 3px; }
.hk-svc-prix .hk-prix-compris { margin-top: 24px; }

/* ---------- Étapes en accordéons : numéro et titre visibles, détail
   déroulé sous la flèche, première étape ouverte ------------------------- */
.hk-site .hk-acc { margin-top: 32px; display: grid; gap: 12px; }
.hk-acc__item details { background: #FFFFFF; border: 1px solid var(--hk-border); border-radius: 18px; overflow: hidden; transition: border-color .3s ease; }
.hk-acc__item details[open] { border-color: var(--hk-orange); }
.hk-acc__q { display: flex; align-items: center; gap: 18px; padding: 20px 24px; cursor: pointer; list-style: none; outline: none !important; border: 0 !important; box-shadow: none !important; }
.hk-acc__q::-webkit-details-marker { display: none; }
.hk-acc__q:focus, .hk-acc__q:focus-visible { outline: none !important; }
.hk-acc__n { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--hk-orange); color: #FFFFFF; font-family: 'Pathway Extreme', sans-serif; font-size: 17px; font-weight: 800; }
.hk-acc__t { flex: 1; min-width: 0; font-family: 'Pathway Extreme', sans-serif; font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--hk-ink); }
.hk-acc__fleche { flex: 0 0 auto; width: 10px; height: 10px; margin: 0 8px 4px 0; border-right: 2.5px solid var(--hk-ink); border-bottom: 2.5px solid var(--hk-ink); transform: rotate(45deg); transition: transform .3s ease; }
details[open] > .hk-acc__q .hk-acc__fleche { transform: translateY(4px) rotate(-135deg); }
.hk-acc__a { padding: 0 24px 24px 88px; display: grid; gap: 12px; }
.hk-acc__a .hk-body { font-size: 17px; line-height: 1.7; color: #3C4A41; }
.hk-sec--vert .hk-acc__item details { border-color: #CFE3D5; }
.hk-sec--vert .hk-acc__item details[open] { border-color: var(--hk-orange); }

/* ---------- Avant / après : autant de colonnes que de paires ----------- */
.hk-avap-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hk-avap-grille--1 { grid-template-columns: minmax(0, 760px); justify-content: center; }
.hk-svc-avap .hk-avap-carte figcaption { justify-content: center; }

/* ---------- Zone : communes en pastilles ------------------------------- */
.hk-svc-zone .hk-villes { margin-top: 18px; }

/* ---------- Autres prestations : cartes cliquables ---------------------- */
.hk-svc-autres__grille { margin-top: 44px; }
.hk-service__img { display: block; }
.hk-service h3 a { color: inherit; }
.hk-service h3 a:hover { color: var(--hk-rust); }
.hk-service .hk-prix__lien { display: inline-block; margin-top: 18px; padding-top: 0; }
.hk-services__grid--4.hk-svc-autres__grille .hk-service__img { height: 260px; }

/* ---------- Accueil : liens des cartes vers les pages de service -------- */
.hk-service__liens { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.hk-service__liens a { padding: 8px 14px; border-radius: 999px; background: var(--hk-vert-pale); color: var(--hk-ink); font-size: 15px; font-weight: 700; transition: background-color .3s ease, color .3s ease; }
.hk-service__liens a::after { content: " \2192"; }
.hk-service__liens a:hover { background: var(--hk-sapin); color: #FFFFFF; }

/* ---------- Pied de page : prestations en liens ------------------------ */
.hk-footer__list a { color: #C9D5CD; }

/* ---------- Ronds pâles sur une section sur deux ----------------------- */
.hk-svc-page .hk-svc-prix, .hk-svc-page .hk-svc-autres {
	background-image:
		radial-gradient(circle 300px at left -130px bottom -150px, #E2ECDF 99.4%, transparent 100%),
		radial-gradient(circle 100px at right 7% top -50px, #EAE2D3 99%, transparent 100%);
	background-repeat: no-repeat;
}

@media (max-width: 760px) {
	.hk-svc-page .hk-svc-prix, .hk-svc-page .hk-svc-autres {
		background-image:
			radial-gradient(circle 170px at left -90px bottom -100px, #E2ECDF 99.2%, transparent 100%),
			radial-gradient(circle 60px at right 7% top -34px, #EAE2D3 99%, transparent 100%);
	}
}
@media (max-width: 700px) {
	.hk-acc__q { padding: 16px 18px; gap: 14px; }
	.hk-acc__n { width: 40px; height: 40px; font-size: 15px; }
	.hk-acc__t { font-size: 18px; }
	.hk-acc__a { padding: 0 18px 20px; }
	.hk-avap-grille--2, .hk-avap-grille--1 { grid-template-columns: 1fr; }
	.hk-svc-texte .hk-photos, .hk-svc-zone .hk-photos, .hk-svc-etapes .hk-photos { min-height: 0; }
}

/* ---------- Bannière photo des pages de service (2026-10-16) ------------ */
/* Photo pleine largeur sous un voile vert sombre uniforme, fil d'Ariane et
   titre centrés par-dessus, rien d'autre. */
.hk-svc-banniere--photo { position: relative; isolation: isolate; display: grid; align-items: center; min-height: clamp(340px, 34vw, 520px); overflow: hidden; }
.hk-svc-banniere__fond { position: absolute; inset: 0; z-index: -1; }
.hk-svc-banniere__fond picture,
.hk-svc-banniere__fond img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hk-svc-banniere__fond::after { content: ""; position: absolute; inset: 0; background: rgba(15, 35, 24, .7); }
.hk-svc-banniere--photo .hk-page__titre { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
@media (max-width: 700px) {
	.hk-svc-banniere--photo { min-height: 260px; }
}

/* ---------- Pages de service, retouches du 2026-10-20 ---------- */

/* La section « Le devis » porte l'id « tarifs », comme celle de l'accueil :
   elle héritait des ronds clairs posés en fond, et sur fond sombre le texte
   blanc devenait illisible. */
.hk-svc-page #tarifs.hk-sec--dark { background: linear-gradient(180deg, #1A3B2A 0%, #14301F 100%); }

/* Avant / après : toujours deux paires côte à côte, en 4/3. Une paire seule
   en 4/5 sur 760 px montait à près de 1 000 px de haut. */
.hk-svc-avap .hk-avap-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); max-width: none; }
.hk-svc-avap .hk-avap-grille--1 { grid-template-columns: minmax(0, 580px); }
.hk-svc-avap .hk-avap { aspect-ratio: 4 / 3; }
@media (max-width: 700px) {
	.hk-svc-avap .hk-avap-grille { grid-template-columns: 1fr; }
}

/* Autres prestations : le texte posé sur la photo, en bas de la carte. */
.hk-svc-autres .hk-service { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(340px, 30vw, 420px); border: 0; background: #14301F; }
.hk-services__grid--4.hk-svc-autres__grille .hk-service__img { position: absolute; inset: 0; z-index: -1; height: auto; }
.hk-svc-autres .hk-service__img::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15, 35, 24, 0) 20%, rgba(15, 35, 24, .55) 50%, rgba(15, 35, 24, .92) 100%); }
.hk-svc-autres .hk-service__body { padding: clamp(24px, 2.6vw, 36px); }
.hk-svc-autres .hk-service h3 a { color: #FFFFFF; }
.hk-svc-autres .hk-service__text { color: #DCE6DF; }
.hk-svc-autres .hk-service .hk-prix__lien { color: var(--hk-yellow); }
/* Sur fond clair, les légendes passent en foncé (elles étaient gris pâle). */
.hk-svc-avap:not(.hk-sec--dark) .hk-avap-carte figcaption { color: var(--hk-ink); }

/* H1 des pages de service et des pages simples à l'échelle de celui de l'accueil (2026-10-20, « augmente la taille des H1 »). */
.hk-page__titre { font-size: clamp(44px, 5.4vw, 92px); line-height: 1; }
.hk-svc-banniere .hk-page__titre { max-width: 1280px; }
@media (max-width: 700px) {
	.hk-page__titre { font-size: clamp(36px, 10.4vw, 46px); }
}

/* ====================================================================== */
/* Page mur porteur refaite (2026-10-23) : « pas très clair », « plus      */
/* synthétique, moins de texte, plus de variation dans les sections ».     */
/* Cas fréquents en liste, trois poutres en cartes, un seul grand prix,    */
/* déroulé en frise, photos sous les avant / après, carte MapLibre.        */
/* ====================================================================== */

.hk-svc-poutres .hk-h2, .hk-svc-frise .hk-h2, .hk-svc-prix-simple .hk-h2 { margin-top: 22px; }

/* ---------- Cas les plus fréquents : titre court et une ligne ---------- */
.hk-site .hk-svc-cas { margin-top: 30px; border-top: 1px solid var(--hk-line); }
.hk-svc-cas li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hk-line); }
.hk-svc-cas__ico { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-top: 1px; border-radius: 50%; background: var(--hk-vert-pale); color: #24935A; }
.hk-svc-cas__txt { min-width: 0; font-size: 17.5px; line-height: 1.55; color: #3C4A41; }
.hk-svc-cas__txt strong { display: block; margin-bottom: 2px; font-family: 'Pathway Extreme', sans-serif; font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--hk-ink); }

/* ---------- Trois poutres : cartes blanches, petite fiche alignée ------ */
.hk-poutres { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.hk-poutre { display: flex; flex-direction: column; min-width: 0; background: #FFFFFF; border: 1px solid var(--hk-border); border-radius: 22px; overflow: hidden; }
.hk-poutre__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hk-placeholder); }
.hk-poutre__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hk-poutre__corps { flex: 1; display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 34px); }
.hk-poutre__accroche { font-family: 'Pathway Extreme', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hk-rust); }
.hk-poutre__nom { margin-top: 10px; font-size: clamp(25px, 2vw, 30px); line-height: 1.1; color: var(--hk-ink); }
.hk-poutre__texte { margin: 14px 0 24px; font-size: 17px; line-height: 1.65; color: #3C4A41; }
.hk-poutre__fiche { margin: auto 0 0; border-top: 1px solid var(--hk-line); }
.hk-poutre__fiche > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hk-line); }
.hk-poutre__fiche > div:last-child { padding-bottom: 0; border-bottom: 0; }
.hk-poutre__fiche dt { padding-top: 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hk-muted); }
.hk-poutre__fiche dd { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--hk-ink); }
.hk-svc-poutres .hk-svc-note { margin-top: 30px; font-size: 17px; }
.hk-svc-poutres .hk-svc-note strong { color: var(--hk-ink); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.hk-poutre__photo img { transition: transform .6s var(--hk-ease, ease); }
	.hk-poutre:hover .hk-poutre__photo img { transform: scale(1.06); }
}

/* ---------- Un seul grand prix, carte blanche centrée ------------------ */
.hk-prix-simple__tete { text-align: center; }
.hk-prix-simple__tete .hk-eyebrow { justify-content: center; }
.hk-prix-simple__tete .hk-h2 { max-width: 1100px; margin-left: auto; margin-right: auto; }
.hk-sec--dark .hk-prix-simple__tete .hk-eyebrow { color: #F08A3E; }
.hk-prix-simple { max-width: 780px; margin: clamp(36px, 4vw, 56px) auto 0; padding: clamp(32px, 4vw, 56px) clamp(22px, 4vw, 64px); border-radius: 28px; background: #FFFFFF; text-align: center; color: var(--hk-ink); }
.hk-prix-simple__avant { font-family: 'Pathway Extreme', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--hk-rust); }
.hk-prix-simple__prix { margin-top: 8px; font-family: 'Pathway Extreme', sans-serif; font-size: clamp(84px, 10vw, 156px); font-weight: 800; line-height: .95; letter-spacing: -.04em; color: var(--hk-ink); }
.hk-prix-simple__sous { margin-top: 12px; font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; color: #3C4A41; }
.hk-site .hk-prix-simple__compris { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hk-line); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; }
.hk-prix-simple__compris li { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; color: var(--hk-ink); }
.hk-prix-simple__compris li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #24935A 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.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
.hk-prix-simple__note { margin-top: 18px; font-size: 16px; line-height: 1.6; color: var(--hk-muted); }
.hk-prix-simple__note strong { color: var(--hk-ink); }
.hk-prix-simple .hk-cta-row { justify-content: center; margin-top: 28px; }
.hk-prix-simple .hk-btn--light { background: #FFFFFF; border-color: var(--hk-border); color: var(--hk-ink); }

/* ---------- Déroulé en frise : cartes blanches reliées en pointillés ---- */
.hk-site .hk-frise { margin-top: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; }
.hk-frise__etape { position: relative; min-width: 0; padding: 28px 24px 30px; border-radius: 22px; background: #FFFFFF; }
.hk-frise__etape::after { content: ""; position: absolute; top: 55px; left: 100%; width: 26px; border-top: 4px dotted var(--hk-sapin); }
.hk-frise__etape:last-child::after { display: none; }
.hk-frise__n { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--hk-sapin); color: #FFFFFF; font-family: 'Pathway Extreme', sans-serif; font-size: 19px; font-weight: 800; }
.hk-frise__etape:nth-child(even) .hk-frise__n { background: var(--hk-orange); }
.hk-frise__t { margin-top: 20px; font-size: clamp(21px, 1.6vw, 24px); line-height: 1.15; color: var(--hk-ink); }
.hk-frise__etape p { margin-top: 10px; font-size: 16.5px; line-height: 1.6; color: #3C4A41; }
.hk-frise__etape p a { color: var(--hk-rust); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Photos de chantier sous les avant / après ------------------ */
.hk-svc-galerie { margin-top: clamp(24px, 3vw, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.hk-svc-galerie__item { margin: 0; min-width: 0; }
.hk-svc-galerie__photo { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--hk-placeholder); }
.hk-svc-galerie__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hk-svc-galerie figcaption { margin-top: 12px; font-size: 16px; line-height: 1.4; text-align: center; color: var(--hk-ink); }
.hk-sec--dark .hk-svc-galerie figcaption { color: #C9D5CD; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.hk-svc-galerie__photo img { transition: transform .6s var(--hk-ease, ease); }
	.hk-svc-galerie__item:hover .hk-svc-galerie__photo img { transform: scale(1.06); }
}

/* ---------- Carte de zone MapLibre (PROCEDURE-CARTES.md) --------------- */
.hk-svc-carte { position: relative; min-height: 520px; border: 1px solid var(--hk-border); border-radius: 18px; overflow: hidden; background: #F7F1E6; }
/* La feuille de MapLibre pose .maplibregl-map en position relative : sans ce sélecteur plus précis, la carte retombait à 0 px de haut. */
.hk-svc-carte .hk-carte-v2 { position: absolute; inset: 0; }
.hk-carte-v2__etiquette { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: default; }
.hk-carte-v2__puce { flex-shrink: 0; width: 12px; height: 12px; border: 2.5px solid #FFFFFF; border-radius: 50%; background: var(--hk-orange); }
.hk-carte-v2__nom { padding: 3px 9px; border: 1px solid #F1C9A6; border-radius: 999px; background: rgba(255, 255, 255, .94); font: 600 12.5px/1.3 'Pathway Extreme', system-ui, sans-serif; color: var(--hk-ink); }
.hk-carte-v2__etiquette--gauche { flex-direction: row-reverse; }
.hk-carte-v2__etiquette--muette .hk-carte-v2__nom { display: none; }
.hk-carte-v2__etiquette--depart { flex-direction: column-reverse; gap: 5px; }
.hk-carte-v2__etiquette--depart .hk-carte-v2__puce { width: 16px; height: 16px; border-width: 3px; background: var(--hk-sapin); }
.hk-carte-v2__etiquette--depart .hk-carte-v2__nom { border-color: var(--hk-sapin); background: var(--hk-sapin); color: #FFFFFF; font-size: 13.5px; font-weight: 700; }
.hk-carte-v2 .maplibregl-ctrl-group { border: 1px solid var(--hk-border); border-radius: 12px; box-shadow: none; }
/* Crédits : seulement « © OpenMapTiles © OpenStreetMap », 9 px gris, sans cadre ni bouton (jamais retirés : ODbL et CC-BY). */
.hk-carte-v2 .maplibregl-ctrl-attrib { padding: 0 6px !important; background: transparent !important; font-size: 9px !important; line-height: 1.4; color: #9A9087; }
.hk-carte-v2 .maplibregl-ctrl-attrib a { color: inherit; text-decoration: none; }
.hk-carte-v2 .maplibregl-ctrl-attrib-button { display: none !important; }
.hk-carte-v2 .maplibregl-ctrl-attrib-inner a[href*="openfreemap"], .hk-carte-v2 .maplibregl-ctrl-attrib-inner a[href*="maplibre"] { display: none; }

/* ---------- FAQ sans photo : une colonne centrée ----------------------- */
.hk-svc-faq--seule .hk-faq-split { grid-template-columns: minmax(0, 1fr) !important; max-width: 1040px; }
.hk-svc-faq--seule .hk-eyebrow { justify-content: center; }
.hk-svc-faq--seule .hk-h2 { text-align: center; }

/* ---------- Ronds pâles : poutres (crème) et frise (vert pâle) --------- */
.hk-svc-page .hk-svc-poutres {
	background-image:
		radial-gradient(circle 300px at right -130px top -150px, #EFE6D5 99.4%, transparent 100%),
		radial-gradient(circle 110px at left 6% bottom -60px, #EDE3D1 99%, transparent 100%);
	background-repeat: no-repeat;
}
.hk-svc-page .hk-svc-frise {
	background-image:
		radial-gradient(circle 300px at left -130px bottom -150px, #D3E7D8 99.4%, transparent 100%),
		radial-gradient(circle 100px at right 7% top -50px, #D8EADD 99%, transparent 100%);
	background-repeat: no-repeat;
}

/* ---------- Responsive de ces blocs : toujours en dernier --------------- */
@media (max-width: 1180px) {
	/* Frise : une étape par ligne, pointillés verticaux d'une carte à l'autre. */
	.hk-site .hk-frise { grid-template-columns: 1fr; gap: 18px; }
	.hk-frise__etape { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: start; padding: 22px 24px; }
	.hk-frise__n { grid-row: 1 / span 2; }
	.hk-frise__t { margin-top: 4px; }
	.hk-frise__etape::after { top: 100%; left: 49px; width: 0; height: 18px; border-top: 0; border-left: 4px dotted var(--hk-sapin); }
}
@media (max-width: 1100px) {
	/* Poutres : une carte par ligne, photo à gauche. */
	.hk-poutres { grid-template-columns: 1fr; }
	.hk-poutre { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
	.hk-poutre__photo { aspect-ratio: auto; height: 100%; min-height: 260px; }
}
@media (max-width: 900px) {
	/* Visuel au-dessus du texte sur téléphone et tablette, carte comprise. */
	.hk-svc-texte .hk-split > .hk-photos, .hk-svc-zone .hk-split > .hk-svc-carte { order: -1; }
	.hk-svc-carte { min-height: 400px; }
}
@media (max-width: 640px) {
	.hk-poutre { display: flex; }
	.hk-poutre__photo { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
	.hk-poutre__fiche > div { grid-template-columns: 88px minmax(0, 1fr); }
	.hk-svc-cas__txt strong { font-size: 19px; }
	.hk-prix-simple { border-radius: 22px; }
	.hk-prix-simple .hk-cta-row { flex-direction: column; align-items: stretch; }
	.hk-frise__etape { column-gap: 16px; padding: 20px 18px; }
	.hk-frise__n { width: 46px; height: 46px; font-size: 17px; }
	.hk-frise__etape::after { left: 39px; }
	.hk-svc-galerie { grid-template-columns: 1fr; }
	.hk-svc-carte { min-height: 340px; }
	.hk-carte-v2__nom { padding: 2px 7px; font-size: 11px; }
	.hk-carte-v2__etiquette--depart .hk-carte-v2__nom { font-size: 12px; }
}
@media (max-width: 760px) {
	.hk-svc-page .hk-svc-poutres {
		background-image:
			radial-gradient(circle 170px at right -90px top -100px, #EFE6D5 99.2%, transparent 100%),
			radial-gradient(circle 60px at left 6% bottom -34px, #EDE3D1 99%, transparent 100%);
	}
	.hk-svc-page .hk-svc-frise {
		background-image:
			radial-gradient(circle 170px at left -90px bottom -100px, #D3E7D8 99.2%, transparent 100%),
			radial-gradient(circle 60px at right 7% top -34px, #D8EADD 99%, transparent 100%);
	}
}

/* ====================================================================== */
/* Les 4 autres pages de service sur le modèle du mur porteur (2026-10-25) */
/* Cartes sans photo et avec prix, frise et liste des cas sur fond sombre. */
/* ====================================================================== */

/* ---------- Prix dans une carte ---------------------------------------- */
.hk-poutre__prix { margin-top: 12px; font-family: 'Pathway Extreme', sans-serif; font-size: clamp(36px, 3.2vw, 48px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--hk-ink); }
.hk-poutre__prix small { display: block; margin-bottom: 6px; font-family: 'Pathway Extreme', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hk-muted); }

/* ---------- Liste des cas sur fond sombre ------------------------------- */
.hk-sec--dark .hk-svc-cas, .hk-sec--dark .hk-svc-cas li { border-color: rgba(255, 255, 255, .14); }
.hk-sec--dark .hk-svc-cas__ico { background: rgba(53, 198, 127, .18); color: var(--hk-yellow); }
.hk-sec--dark .hk-svc-cas__txt { color: #C9D5CD; }
.hk-sec--dark .hk-svc-cas__txt strong { color: #FFFFFF; }

/* ---------- Frise sur fond sombre : pointillés clairs, ronds translucides */
.hk-sec--dark .hk-frise__etape::after { border-color: rgba(255, 255, 255, .55); }
.hk-svc-page .hk-svc-frise.hk-sec--dark {
	background-image:
		radial-gradient(circle 300px at left -130px bottom -150px, rgba(53, 198, 127, .16) 99.4%, transparent 100%),
		radial-gradient(circle 100px at right 7% top -50px, rgba(255, 255, 255, .1) 99%, transparent 100%),
		linear-gradient(180deg, #1A3B2A 0%, #14301F 100%);
}

/* ---------- Responsive de ces blocs : toujours en dernier --------------- */
@media (max-width: 1100px) {
	/* Une carte sans photo reste en colonne (pas de case photo vide à gauche). */
	.hk-poutre--sans-photo { display: flex; }
}
@media (max-width: 760px) {
	.hk-svc-page .hk-svc-frise.hk-sec--dark {
		background-image:
			radial-gradient(circle 170px at left -90px bottom -100px, rgba(53, 198, 127, .16) 99.2%, transparent 100%),
			radial-gradient(circle 60px at right 7% top -34px, rgba(255, 255, 255, .1) 99%, transparent 100%),
			linear-gradient(180deg, #1A3B2A 0%, #14301F 100%);
	}
}

/* ---------- Fiches des cartes : libellés sur une ligne (2026-10-25) ----- */
/* « Ce qui reste », « Ce qui part » passaient sur deux lignes dans 96 px. */
.hk-poutre__fiche > div { grid-template-columns: 116px minmax(0, 1fr); }
@media (max-width: 640px) {
	.hk-poutre__fiche > div { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
	.hk-poutre__fiche dt { font-size: 11.5px; letter-spacing: .05em; }
}

/* ---------- Liste des cas : seul le titre passe en bloc (2026-10-25) ---- */
/* Un mot en gras dans la description (« rachetés ») partait seul à la ligne. */
.hk-svc-cas__txt strong:not(.hk-svc-cas__t) { display: inline; margin: 0; font-family: inherit; font-size: inherit; font-weight: 700; line-height: inherit; letter-spacing: 0; color: var(--hk-ink); }
.hk-sec--dark .hk-svc-cas__txt strong:not(.hk-svc-cas__t) { color: #FFFFFF; }

/* ====================================================================== */
/* Reprise du 2026-10-28 : boutons sous les cartes, photo au-dessus du    */
/* prix, déroulés en photos, FAQ encadrée de photos, pages Réalisations, */
/* Zone d'intervention, Contact, Plan du site et pages par commune.      */
/* ====================================================================== */

/* ---------- Sous-parties d'un bloc de texte : un H3 et ses paragraphes -- */
.hk-svc-sous { margin-top: clamp(28px, 2.8vw, 40px); }
.hk-svc-sous__t { font-size: clamp(23px, 1.9vw, 28px); line-height: 1.15; letter-spacing: -.01em; color: var(--hk-ink); }
.hk-svc-sous .hk-svc-corps { margin-top: 12px; }
.hk-sec--dark .hk-svc-sous__t { color: #FFFFFF; }

/* ---------- « Demander un devis » au bas de chaque carte ---------------- */
.hk-poutre__btn { align-self: stretch; justify-content: center; margin-top: 24px; min-height: 56px; font-size: 18px; }
.hk-poutre__fiche + .hk-poutre__btn { margin-top: 26px; }

/* ---------- Prix seul : photo en haut de la carte blanche --------------- */
.hk-prix-simple--photo { padding: 0; overflow: hidden; }
.hk-prix-simple__photo { position: relative; aspect-ratio: 16 / 7; background: var(--hk-placeholder); }
.hk-prix-simple__photo picture,
.hk-prix-simple__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hk-prix-simple--photo .hk-prix-simple__corps { padding: clamp(30px, 3.6vw, 52px) clamp(22px, 4vw, 64px) clamp(32px, 4vw, 56px); }

/* ---------- Déroulé en cartes à photo sur les pages de service --------- */
.hk-site .hk-etapes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hk-site .hk-etapes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hk-site .hk-etapes--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hk-sec--dark .hk-etape__haut::after,
.hk-sec--dark .hk-etape::after { border-color: rgba(255, 255, 255, .55); }
.hk-svc-frise--photos .hk-etape__t { font-size: 20px; }

/* ---------- Foire aux questions encadrée de photos ---------------------- */
.hk-svc-faq .hk-faq-split { max-width: var(--hk-content); margin: 0 auto; display: grid; gap: clamp(32px, 4vw, 64px); align-items: stretch; }
.hk-svc-faq .hk-faq-split > * { min-width: 0; }
.hk-svc-faq--gauche .hk-faq-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.hk-svc-faq--cadre .hk-faq-split { grid-template-columns: minmax(0, .62fr) minmax(0, 1.5fr) minmax(0, .62fr); }
.hk-faq-cote { display: flex; min-height: 0; }
.hk-faq-cote .hk-photos { flex: 1; min-height: 460px; }
.hk-faq-cote .hk-photo { border-radius: 22px; }
.hk-svc-faq--cadre .hk-faq-col .hk-eyebrow { justify-content: center; }
.hk-svc-faq--cadre .hk-faq-col .hk-h2 { text-align: center; }

/* ---------- Pastilles de communes : celles qui ont leur page ------------ */
.hk-villes li.hk-villes__lien { padding: 0; border: 0; background: none; }
.hk-villes__lien a { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 13px; border-radius: 999px; background: var(--hk-sapin); border: 1px solid var(--hk-sapin); font-size: 14px; font-weight: 700; line-height: 1.3; color: #FFFFFF; transition: background-color .3s ease, border-color .3s ease; }
.hk-villes__lien a:hover { background: var(--hk-rust); border-color: var(--hk-rust); }
.hk-villes__fleche { flex: none; }
.hk-sec--dark .hk-villes li.hk-villes__lien { background: none; }
.hk-sec--dark .hk-villes__lien a { background: var(--hk-yellow); border-color: var(--hk-yellow); color: var(--hk-ink); }

/* ---------- Liens « voir tout » sous un bloc ---------------------------- */
.hk-svc-avap__lien, .hk-svc-zone__lien { margin-top: clamp(26px, 3vw, 40px); text-align: center; }
.hk-svc-zone__lien { text-align: left; margin-top: 22px; }
.hk-svc-avap__lien .hk-prix__lien, .hk-svc-zone__lien .hk-prix__lien { padding-top: 0; }
.hk-sec--dark .hk-svc-avap__lien .hk-prix__lien { color: var(--hk-yellow); }
.hk-zone-lien { margin-top: 26px; }

/* ---------- Tous les prix de départ : lignes sur fond sombre ------------ */
.hk-svc-tarifs__in { max-width: 1120px; }
.hk-site .hk-tarifs-liste { margin-top: clamp(30px, 3.4vw, 46px); border-top: 1px solid rgba(255, 255, 255, .16); }
.hk-tarifs-liste li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 28px; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.hk-tarifs-liste__nom { min-width: 0; font-family: 'Pathway Extreme', sans-serif; font-size: clamp(21px, 1.8vw, 26px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: #FFFFFF; }
.hk-tarifs-liste__nom a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.hk-tarifs-liste__nom a:hover { color: var(--hk-yellow); text-decoration-color: currentColor; }
.hk-tarifs-liste__nom small { display: block; margin-top: 4px; font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: 0; color: #C9D5CD; }
.hk-site .hk-tarifs-liste__nom small { font-family: 'Pathway Extreme', system-ui, sans-serif; }
.hk-tarifs-liste__prix { flex: none; font-family: 'Pathway Extreme', sans-serif; font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--hk-yellow); white-space: nowrap; text-align: right; }
.hk-tarifs-liste__prix small { display: block; margin-bottom: 4px; font-family: 'Pathway Extreme', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #C9D5CD; }
.hk-svc-tarifs__texte { margin-top: 30px; }
.hk-svc-tarifs .hk-cta-row { margin-top: 32px; }
.hk-svc-page .hk-svc-tarifs.hk-sec--dark { background: linear-gradient(180deg, #1A3B2A 0%, #14301F 100%); }

/* ---------- Zone d'intervention : communes par département ------------- */
.hk-zone-depts { margin-top: 28px; display: grid; gap: 26px; }
.hk-zone-dept .hk-svc-sous__t { font-size: clamp(20px, 1.6vw, 23px); }
.hk-zone-dept .hk-villes { margin-top: 12px; }
.hk-zone-page .hk-svc-carte { min-height: 560px; }
.hk-zone-communes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hk-services__grid--4.hk-zone-communes .hk-service { min-height: clamp(300px, 24vw, 360px); }

/* ---------- Autres prestations : les cinq sur une page locale ---------- */
.hk-services__grid.hk-svc-autres__grille--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hk-svc-autres__grille--5 > .hk-service { grid-column: span 2; }
.hk-svc-autres__grille--5 > .hk-service:nth-child(4) { grid-column: 2 / span 2; }
.hk-svc-autres__grille--5 > .hk-service:nth-child(5) { grid-column: 4 / span 2; }
.hk-services__grid.hk-svc-autres__grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Plan du site ----------------------------------------------- */
.hk-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
.hk-plan__groupe { padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--hk-border); border-radius: 22px; background: #FFFFFF; }
.hk-plan__t { font-size: clamp(23px, 1.9vw, 28px); line-height: 1.15; color: var(--hk-ink); }
.hk-plan__t a { color: inherit; }
.hk-plan__t a:hover { color: var(--hk-rust); }
.hk-plan ul { margin-top: 16px; display: grid; gap: 4px; }
.hk-plan li a { display: inline-block; padding: 6px 0; font-size: 17.5px; font-weight: 600; color: #2B3A31; text-decoration: underline; text-decoration-color: var(--hk-border); text-underline-offset: 5px; }
.hk-plan li a:hover { color: var(--hk-rust); text-decoration-color: currentColor; }

/* ---------- Ronds pâles : sections ajoutées ----------------------------- */
.hk-svc-page .hk-svc-prix-simple.hk-sec--cream, .hk-plan-page .hk-sec--white {
	background-image:
		radial-gradient(circle 300px at right -130px top -150px, #EFE6D5 99.4%, transparent 100%),
		radial-gradient(circle 110px at left 6% bottom -60px, #EDE3D1 99%, transparent 100%);
	background-repeat: no-repeat;
}

/* ---------- Responsive de ces blocs : toujours en dernier --------------- */
@media (max-width: 1180px) {
	.hk-svc-faq--cadre .hk-faq-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
	.hk-svc-faq--cadre .hk-faq-cote--b { display: none; }
	.hk-svc-faq--cadre .hk-faq-col .hk-eyebrow { justify-content: flex-start; }
	.hk-svc-faq--cadre .hk-faq-col .hk-h2 { text-align: left; }
	.hk-zone-communes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hk-services__grid.hk-svc-autres__grille--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hk-svc-autres__grille--5 > .hk-service,
	.hk-svc-autres__grille--5 > .hk-service:nth-child(4),
	.hk-svc-autres__grille--5 > .hk-service:nth-child(5) { grid-column: auto; }
	.hk-svc-autres__grille--5 > .hk-service:nth-child(5) { grid-column: 1 / -1; }
	.hk-services__grid.hk-svc-autres__grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hk-svc-autres__grille--3 > .hk-service:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
	.hk-site .hk-etapes--3, .hk-site .hk-etapes--4, .hk-site .hk-etapes--6 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	/* FAQ : la photo d'abord, puis le titre et les questions. */
	.hk-svc-faq--gauche .hk-faq-split, .hk-svc-faq--cadre .hk-faq-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.hk-faq-cote .hk-photos { min-height: 0; }
	.hk-faq-cote .hk-photo { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
	.hk-prix-simple__photo { aspect-ratio: 16 / 9; }
	.hk-zone-page .hk-svc-carte { min-height: 420px; }
	.hk-plan { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.hk-zone-communes,
	.hk-services__grid.hk-svc-autres__grille--5,
	.hk-services__grid.hk-svc-autres__grille--3 { grid-template-columns: 1fr; }
	.hk-svc-autres__grille--5 > .hk-service:nth-child(5),
	.hk-svc-autres__grille--3 > .hk-service:nth-child(3) { grid-column: auto; }
	.hk-tarifs-liste li { flex-wrap: wrap; padding: 18px 0; }
	.hk-tarifs-liste__prix { text-align: left; }
	.hk-tarifs-liste__prix small { display: inline; margin: 0 6px 0 0; }
	.hk-svc-tarifs .hk-cta-row { flex-direction: column; align-items: stretch; }
	.hk-poutre__btn { font-size: 17px; }
	.hk-plan__groupe { border-radius: 18px; }
}

/* Avant / après en nombre impair (2026-10-28) : jamais une carte seule avec un
   vide à côté. Trois paires sur trois colonnes dès 1000 px ; sinon la dernière
   carte se centre sur sa ligne, à la largeur des autres. */
.hk-svc-avap .hk-avap-grille { --hk-avap-gap: clamp(24px, 3vw, 44px); }
@media (min-width: 701px) {
	.hk-svc-avap .hk-avap-grille:not(.hk-avap-grille--1) > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--hk-avap-gap)) / 2); }
}
@media (min-width: 1000px) {
	.hk-svc-avap .hk-avap-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hk-svc-avap .hk-avap-grille--3:not(.hk-avap-grille--1) > :last-child:nth-child(odd) { grid-column: auto; width: auto; justify-self: stretch; }
}

/* Questions fréquentes (2026-10-28) : le texte centré en hauteur sur le « + »,
   il était calé en haut du bouton. */
.hk-faq__q { align-items: center; }

/* Prix en trois colonnes (2026-10-28, « un peu massif ») : une photo de chaque
   côté, le titre et la carte de prix au milieu, comme les questions fréquentes. */
.hk-prix-cadre { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.6fr) minmax(0, .55fr); gap: clamp(24px, 3vw, 48px); align-items: stretch; }
.hk-prix-cadre__photo { position: relative; overflow: hidden; min-height: 420px; border-radius: 22px; background: var(--hk-placeholder); }
.hk-prix-cadre__photo picture,
.hk-prix-cadre__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hk-prix-cadre__centre { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hk-svc-prix-simple--cadre .hk-prix-simple { max-width: none; width: 100%; margin-top: clamp(26px, 3vw, 40px); padding: clamp(26px, 3vw, 40px) clamp(22px, 3vw, 44px); }
.hk-svc-prix-simple--cadre .hk-prix-simple__prix { font-size: clamp(64px, 6.2vw, 100px); }
.hk-prix-simple__compris-t { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hk-line); font-size: 16px; font-weight: 600; color: var(--hk-muted); }
.hk-site .hk-prix-simple__compris-t + .hk-prix-simple__compris { margin-top: 12px; padding-top: 0; border-top: 0; }
@media (max-width: 1180px) {
	.hk-prix-cadre { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
	.hk-prix-cadre__photo--b { display: none; }
}
@media (max-width: 900px) {
	.hk-prix-cadre { grid-template-columns: 1fr; }
	.hk-prix-cadre__photo { min-height: 0; aspect-ratio: 4 / 3; }
}

/* Avant / après côte à côte (2026-10-28) : plus de curseur à faire glisser.
   Une paire par ligne (deux au-delà de trois paires) ; sur téléphone, l'avant
   au-dessus de l'après. */
.hk-ap-liste { display: grid; gap: clamp(30px, 3.4vw, 48px); }
.hk-ap-liste--1 { max-width: 1120px; margin: 0 auto; }
.hk-ap-liste--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hk-ap { margin: 0; min-width: 0; }
.hk-ap__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hk-ap__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 18px; background: var(--hk-placeholder); }
.hk-ap__photo picture,
.hk-ap__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hk-ap__label { position: absolute; top: 14px; left: 14px; padding: 7px 12px; border-radius: 4px; background: rgba(15, 35, 24, .82); color: #FFFFFF; font-family: 'Pathway Extreme', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.hk-ap__label--apres { background: #24935A; }
.hk-ap figcaption { margin-top: 14px; text-align: center; font-size: 17px; line-height: 1.4; color: #C9D5CD; }
.hk-svc-avap:not(.hk-sec--dark) .hk-ap figcaption { color: var(--hk-ink); }
@media (max-width: 1000px) {
	.hk-ap-liste--2 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.hk-ap__photos { grid-template-columns: 1fr; gap: 10px; }
	.hk-ap__photo { border-radius: 16px; }
}

/* Questions de la FAQ : retour à la ligne ordinaire. Le « balance » des titres
   coupait les questions en lignes étroites, avec un grand blanc avant le « + ». */
.hk-faq__h, .hk-faq__label { text-wrap: wrap; }

/* ====================================================================== */
/* Reprise du 2026-10-28 (après-midi)                                       */
/* ====================================================================== */

/* ---------- Bloc prix : une photo à gauche, le prix à droite ----------- */
/* « Une image à gauche et à droite le texte avec à partir de 150 €, c'est  */
/* tout » : plus de carte blanche ni de seconde photo.                      */
.hk-prix-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); align-items: stretch; }
.hk-svc-prix-simple:not(.hk-svc-prix-simple--duo) .hk-prix-duo { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin: 0 auto; }
.hk-prix-duo__photo { position: relative; min-height: 460px; overflow: hidden; border-radius: 24px; background: var(--hk-placeholder); }
.hk-prix-duo__photo picture,
.hk-prix-duo__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hk-prix-duo__texte { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.hk-prix-duo .hk-prix-simple__avant { margin-top: clamp(28px, 3vw, 40px); }
.hk-prix-duo .hk-prix-simple__prix { margin-top: 6px; font-size: clamp(60px, 5.6vw, 88px); line-height: 1; letter-spacing: -.03em; }
.hk-prix-duo .hk-prix-simple__sous { margin-top: 10px; }
.hk-site .hk-prix-duo .hk-prix-simple__compris { justify-content: flex-start; }
.hk-prix-duo .hk-cta-row { margin-top: 30px; }
.hk-sec--dark .hk-prix-duo .hk-prix-simple__prix { color: #FFFFFF; }
.hk-sec--dark .hk-prix-duo .hk-prix-simple__avant { color: #F08A3E; }
.hk-sec--dark .hk-prix-duo .hk-prix-simple__sous { color: #DDE5DF; }
.hk-sec--dark .hk-prix-duo .hk-prix-simple__compris-t { border-top-color: rgba(255, 255, 255, .16); color: #C9D5CD; }
.hk-sec--dark .hk-prix-duo .hk-prix-simple__compris li { color: #FFFFFF; }
.hk-sec--dark .hk-prix-duo .hk-prix-simple__note { color: #C9D5CD; }
.hk-sec--dark .hk-prix-duo .hk-prix-simple__note strong { color: #FFFFFF; }
.hk-sec--dark .hk-prix-duo .hk-btn--light { background: transparent; border-color: #57534E; color: #FFFFFF; }
@media (max-width: 900px) {
	.hk-prix-duo { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.hk-prix-duo__photo { min-height: 0; aspect-ratio: 4 / 3; border-radius: 20px; }
	.hk-prix-duo .hk-prix-simple__avant { margin-top: 26px; }
	.hk-prix-duo .hk-cta-row { flex-direction: column; align-items: stretch; }
}

/* ---------- Réalisations avant / après ---------------------------------- */
/* Troisième présentation (les deux photos côte à côte : « pas terrible ») : */
/* l'après en grand, l'avant en vignette à bord blanc dans le coin, comme   */
/* la version retenue sur OPM Débarras. Trois réalisations par ligne.        */
.hk-real-grille { display: grid; gap: clamp(26px, 3vw, 44px); }
.hk-real-grille--1 { max-width: 760px; margin: 0 auto; }
.hk-real-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hk-real-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hk-real { margin: 0; min-width: 0; }
.hk-real__photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px; background: var(--hk-placeholder); }
.hk-real__photo picture,
.hk-real__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hk-real__avant { position: absolute; top: 14px; left: 14px; z-index: 1; width: 40%; aspect-ratio: 4 / 3; overflow: hidden; border: 4px solid #FFFFFF; border-radius: 14px; background: var(--hk-placeholder); }
.hk-real__etq { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 5px 9px; border-radius: 6px; background: rgba(15, 35, 24, .82); color: #FFFFFF; font-size: 11px; font-weight: 700; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.hk-real__etq--apres { left: auto; right: 14px; bottom: 14px; padding: 7px 12px; background: #24935A; font-size: 12px; }
.hk-real__legende { margin-top: 16px; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--hk-ink); }
.hk-sec--dark .hk-real__legende { color: #FFFFFF; }
@media (hover: hover) {
	.hk-real__photo > img, .hk-real__photo > picture img { transition: transform .6s ease; }
	.hk-real:hover .hk-real__photo > img, .hk-real:hover .hk-real__photo > picture img { transform: scale(1.04); }
}
@media (max-width: 1000px) {
	.hk-real-grille--2, .hk-real-grille--3 { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin: 0 auto; }
}
@media (max-width: 600px) {
	.hk-real__photo { border-radius: 18px; }
	.hk-real__avant { top: 10px; left: 10px; width: 44%; border-width: 3px; border-radius: 12px; }
	.hk-real__etq--apres { right: 10px; bottom: 10px; }
	.hk-real__legende { margin-top: 12px; font-size: 18px; }
}

/* ---------- Titres en Pathway Extreme : un cran plus petits ------------- */
/* « Dans les H2 et les H3, c'est un peu gros. » Même échelle partout.      */
.hk-h2 { font-size: clamp(34px, 3.7vw, 54px); }
.hk-etape__t, .hk-acc__t, .hk-svc-cas__txt strong.hk-svc-cas__t { font-size: 19px; }
.hk-svc-frise--photos .hk-etape__t { font-size: 18.5px; }
.hk-frise__t { font-size: clamp(19px, 1.4vw, 21px); }
.hk-faq__label { font-size: 20px; }
.hk-svc-sous__t { font-size: clamp(21px, 1.6vw, 24px); }
.hk-zone-dept .hk-svc-sous__t { font-size: clamp(19px, 1.4vw, 21px); }
.hk-poutre__nom { font-size: clamp(22px, 1.7vw, 26px); }
.hk-prix__nom { font-size: 24px; }
.hk-tarif__nom { font-size: 22px; }
.hk-site .hk-service h3 { font-size: 24px; }
.hk-valeur__t { font-size: 18px; }
@media (max-width: 700px) {
	.hk-h2 { font-size: clamp(29px, 7.8vw, 34px); }
	.hk-acc__t, .hk-faq__label, .hk-svc-cas__txt strong.hk-svc-cas__t { font-size: 18px; }
	.hk-prix__nom { font-size: 21px; }
	.hk-site .hk-service h3 { font-size: 21px; }
}