/*
  AGEF homepage — subscription entry blocks (hero CTA band, "Comment participer",
  "Nos lotissements"). Structure and type scale follow the workflow template's homepage.
  Brand = AGEF green; the green + orange palette update comes later.
*/
.agef-hf { --hf-brand: #2B8E38; --hf-brand-dark: #1E4925; --hf-soft: #eef7ef; font-family: inherit; }
.agef-hf * { box-sizing: border-box; }
.agef-hf .hf-wrap { max-width: 1170px; margin: 0 auto; padding: 0 16px; }

/* 1. CTA band under the hero slider (template: one lead line + 2 buttons + note) */
.hf-cta { background: #fff; padding: 18px 0 20px; text-align: center; }
.hf-lead { color: #111; font-weight: 700; font-size: 24px; line-height: 1.3; margin: 0 0 14px; }
.hf-btns { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.hf-cta .agef-btn { min-width: 260px; }
.hf-note { margin-top: 10px; font-size: 14px; line-height: 1.4; font-weight: 700; color: var(--hf-brand); }
/* Pulsating primary CTA */
.hf-pulse { animation: hfPulse 1.8s ease-in-out infinite; }
.hf-pulse:hover { animation-play-state: paused; }
@keyframes hfPulse {
  0% { box-shadow: 0 0 0 0 rgba(43, 142, 56, .55); transform: scale(1); }
  50% { box-shadow: 0 0 0 14px rgba(43, 142, 56, 0); transform: scale(1.03); }
  100% { box-shadow: 0 0 0 0 rgba(43, 142, 56, 0); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .hf-pulse { animation: none; } }
@media (max-width: 768px) {
  .hf-lead { font-size: 19px; }
  .hf-btns { flex-direction: column; gap: 10px; }
  .hf-cta .agef-btn { width: 100%; max-width: 320px; min-width: 0; }
}

/* AGEF's existing animated tagline section right below: keep it, without the large empty gap */
.elementor-element-72579a5 > .elementor-container { min-height: 0 !important; }
.elementor-element-72579a5 { padding: 18px 0 26px !important; margin: 0 !important; }
.elementor-element-72579a5 .elementor-headline { font-size: 26px !important; margin: 0 !important; }
@media (max-width: 768px) { .elementor-element-72579a5 .elementor-headline { font-size: 20px !important; } }

/* Section titles (template: 30px title, 17px subtitle) */
.hf-title { text-align: center; max-width: 700px; margin: 0 auto 26px; }
.hf-title h2 { font-size: 30px; font-weight: 700; color: #222; margin: 0 0 8px; line-height: 1.25; }
.hf-title p { color: #777; font-size: 16px; margin: 0; line-height: 1.5; }
@media (max-width: 768px) { .hf-title h2 { font-size: 24px; } .hf-title p { font-size: 15px; } }

/* 2. Comment participer — compact numbered list (template) */
.hf-how { background: #fff; padding: 52px 0; }
.hf-steps { list-style: none; max-width: 600px; margin: 0 auto; padding: 0; }
.hf-steps li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid #f1f1f1; font-size: 15px; color: #444; line-height: 1.5; }
.hf-steps li:last-child { border-bottom: none; }
.hf-steps li strong { color: #222; }
.hf-steps .n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--hf-brand); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.hf-center { text-align: center; margin-top: 30px; }

/* 3. Nos lotissements — carousel right under the CTA (scroll-snap; swipe on touch) */
.hf-lots { background: #f8f9fa; padding: 40px 0 44px; }
.hf-carousel { position: relative; }
.hf-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 4px 16px; scrollbar-width: none; }
.hf-track::-webkit-scrollbar { display: none; }
.hf-track .hf-card { flex: 0 0 calc((100% - 40px) / 3); scroll-snap-align: start; }
.hf-arrow { position: absolute; top: 38%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); color: var(--hf-brand); font-size: 15px; cursor: pointer; z-index: 2; }
.hf-arrow:hover { background: var(--hf-brand); color: #fff; }
.hf-prev { left: -14px; } .hf-next { right: -14px; }
.hf-dots { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.hf-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: #cfd8cf; padding: 0; cursor: pointer; }
.hf-dots button.on { background: var(--hf-brand); width: 24px; border-radius: 6px; }
@media (max-width: 991px) { .hf-track .hf-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 600px) { .hf-track .hf-card { flex-basis: 84%; } .hf-arrow { display: none; } .hf-track { gap: 14px; } }
.hf-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, .07); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.hf-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, .12); }
.hf-card img { width: 100% !important; height: 170px !important; max-height: 170px; object-fit: cover; display: block; }
.hf-card .body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.hf-card .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.hf-card h3 { font-size: 17px; font-weight: 700; color: #1f2937; margin: 0; line-height: 1.3; }
.hf-card .badge { flex-shrink: 0; font-size: 11px; font-weight: 700; color: #15803d; background: #dcfce7; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.hf-card .loc { color: #777; font-size: 13px; margin: 0 0 10px; }
.hf-card .loc i { color: var(--hf-brand); margin-right: 6px; }
.hf-card .rows { margin: 0 0 14px; }
.hf-card .row-kv { line-height: 1.4; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed #eee; }
.hf-card .row-kv span:first-child { color: #777; }
.hf-card .row-kv span:last-child:not(.green) { color: #1f2937; font-weight: 600; text-align: right; white-space: nowrap; }
.hf-card .row-kv .green { color: #15803d; }
.hf-card .agef-btn { margin-top: auto; }

/* ---- Stable first paint (no jump on load) ----
   The Smart Slider renders at its image height first, then resizes to its 1920×800 box.
   Reserve that box from the start so nothing below it moves. */
.n2-section-smartslider { aspect-ratio: 1920 / 800; max-width: 100vw; overflow: hidden; contain: size layout; }
/* Reserve the carousel's height until its cards arrive from /api/operations. */
#hfLotsCarousel .hf-track { min-height: 400px; }
/* In-page links (#nos-lotissements, #comment-participer…) clear the sticky menu. */
.agef-hf[id] { scroll-margin-top: 110px; }

/* ---- AGEF orange — secondary accent on the homepage blocks ---- */
.agef-hf { --hf-orange: #ED6825; --hf-orange-dark: #C9531A; }
.hf-note { color: var(--hf-orange); }
.hf-title h2::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; background: var(--hf-orange); margin: 10px auto 0; }
.hf-card .badge { color: var(--hf-orange-dark); background: rgba(237, 104, 37, .10); }
.hf-card .row-kv span.green { color: var(--hf-orange); font-weight: 700; text-align: right; white-space: nowrap; }
.hf-dots button.on { background: var(--hf-orange); }