/* Strict palette enforcement + video placeholder */

/* Video placeholder */
.video-placeholder {
  background: linear-gradient(135deg, #D7EDB0 0%, #EAF5D4 100%);
  border: 2px dashed #9ECA4F;
  box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.video-placeholder-inner {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 24px;
}
.video-play-btn {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: #9ECA4F;
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px -8px rgba(123, 167, 59, 0.6);
}
.video-placeholder-title {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: 1.05rem; color: #2C3236;
}
.video-placeholder-meta { font-size: 0.88rem; color: #4A4A4A; max-width: 320px; }
.video-placeholder-id {
  font-family: 'Poppins', sans-serif; font-weight: 800;
  font-size: 0.78rem; color: #7BA73B;
  background: white; padding: 4px 12px; border-radius: 999px;
}

/* H3 strictly dark green */
h3 { color: #7BA73B !important; }

/* Body text strictly main */
body { color: #2C3236; }

/* Secondary button strictly blue */
.btn-secondary { border-color: #5A9BD5; color: #5A9BD5; background: transparent; }
.btn-secondary:hover { background: #5A9BD5; color: white; border-color: #5A9BD5; }

/* Primary green strict */
.btn-primary { background: #9ECA4F; color: white; }
.btn-primary:hover { background: #7BA73B; color: white; }

/* Hover green-dark */
.nav-links a:hover, .nav-item > a:hover { color: #7BA73B; }
.nav-links a.current { color: #7BA73B; }
.nav-links a.current::after { background: #9ECA4F; }

/* Testimonials & callouts: storytelling bg */
#temoignages { background: #D7EDB0; }
.section-soft, .page-hero.green { background: #D7EDB0; }
.contact-hero { background: #D7EDB0; }

/* Neutral alternating */
.section-neutral { background: #F5F5F5; }

/* Ensure storytelling-clair is replaced with neutral or storytelling */
.page-hero { background:
  radial-gradient(55% 55% at 90% 10%, rgba(158, 202, 79, 0.10), transparent 60%),
  white; }
.faq-cat.active { background: #D7EDB0; border-color: #9ECA4F; }
.faq-item.open { border-color: #9ECA4F; }
.faq-item.open .faq-q .chev { background: #9ECA4F; }
.faq-q .chev { background: #D7EDB0; color: #7BA73B; }

/* CTA band: keep green gradient */
.cta-band { background: linear-gradient(135deg, #9ECA4F 0%, #7BA73B 100%); }

/* Stat numbers */
.stat .num { color: #9ECA4F; }

/* Estimation result */
.estim-result { background: #D7EDB0; }
.estim-result .lbl, .estim-result .val { color: #2C3236; }

/* Hero badge num */
.hero-badge .num { color: #7BA73B; }

/* Icon wraps */
.value-card .icon-wrap, .contact-coords .ico, .faq-cat .ic { background: #D7EDB0; color: #7BA73B; }

/* Footer green accent */
.brand-name span { color: #7BA73B; }
.footer-brand .brand-name span { color: #9ECA4F; }

/* Section dark stays dark for stats */
.section-dark { background: #2C3236; }

/* Tag pills */
.tag-pill { background: #D7EDB0; color: #2C3236; }

/* Listing dept badge */
.listing-loc .dept { background: #D7EDB0; color: #7BA73B; }
.listing-badge { background: white; color: #7BA73B; }
.listing-badge.exclu { background: #2C3236; color: white; }

/* Quote */
.quote { border-left-color: #9ECA4F; color: #2C3236; }

/* Service card buy */
.service-card.buy { background: #D7EDB0; }
.service-card.sell .tag, .service-card.buy .tag { color: #7BA73B; }

/* Mega-menu link hover */
.mega-link:hover { background: #D7EDB0; }

/* Form focus */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: #9ECA4F;
  box-shadow: 0 0 0 3px rgba(158, 202, 79, 0.2);
}

/* Inline links inside body content (article/main paragraphs) get the secondary blue.
   Exclude buttons via :not([class*="btn"]) — otherwise this rule (specificity 0,0,1,2)
   overrides .btn-primary (0,0,1,0) and paints CTA text blue on green buttons inside <p>. */
main p a:not([class*="btn"]),
main li a:not([class*="btn"]),
.footer-slogan a { color: #5A9BD5; }
main p a:not([class*="btn"]):hover,
main li a:not([class*="btn"]):hover { color: #3A7AB5; }

/* Eyebrow stays dark green */
.eyebrow { color: #7BA73B; }

/* ==========================================================================
   ANIMATIONS & MICRO-INTERACTIONS — Acheter Officine
   Couleurs et structure inchangées : on n'ajoute que du mouvement.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SCROLL FADE-UP — Intersection Observer (cf. useReveal dans shared.jsx)
   Chaque section (hors hero) et chaque .reveal apparaît avec opacity 0→1
   et translateY 30px→0. Le stagger 0.1s est appliqué via JS (transitionDelay).
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   2. HERO SPLIT REVEAL — H1 mot par mot (cf. useHeroSplitReveal)
   Chaque mot du H1 est encapsulé dans .hero-word et animé séquentiellement
   (durée 0.8s, délai inline de 0.15s × index appliqué par JS).
   -------------------------------------------------------------------------- */
.hero h1 .hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  animation: heroWordReveal 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  will-change: opacity, transform;
}
@keyframes heroWordReveal {
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   3. HEADER STICKY — passage en mode "scrolled" après 80px
   Fond blanc plein + box-shadow douce, transition smooth 0.3s.
   -------------------------------------------------------------------------- */
.site-header {
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.site-header.scrolled {
  background: #FFFFFF;
  box-shadow: 0 4px 20px -8px rgba(15, 23, 42, 0.10), 0 1px 0 rgba(15, 23, 42, 0.02);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   4. BOUTONS — micro-interaction hover (scale 1.03 + ombre plus prononcée)
   Surcharge le translateY(-1px) initial pour un effet plus moderne.
   -------------------------------------------------------------------------- */
.btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-dark:hover,
.btn-ghost:hover {
  transform: scale(1.03);
}
.btn-primary:hover {
  box-shadow: 0 14px 28px -8px rgba(123, 167, 59, 0.65);
}
.btn-secondary:hover {
  box-shadow: 0 14px 28px -8px rgba(90, 155, 213, 0.55);
}
.btn-dark:hover {
  box-shadow: 0 14px 28px -8px rgba(44, 50, 54, 0.45);
}
.btn-ghost:hover {
  box-shadow: 0 10px 22px -10px rgba(15, 23, 42, 0.18);
}
/* Float CTA (téléphone flottant) : même langage visuel */
.float-cta { transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.float-cta:hover {
  transform: scale(1.03);
  box-shadow: 0 18px 34px -10px rgba(123, 167, 59, 0.65), 0 4px 10px rgba(0,0,0,0.08);
}

/* --------------------------------------------------------------------------
   5. PAGE TRANSITIONS — fade out 0.3s au clic, fade in 0.3s à l'arrivée
   Le fade-in est déclenché par CSS dès le chargement (pas de page blanche
   si JS lent). Le fade-out est appliqué par usePageTransitions() au clic.
   -------------------------------------------------------------------------- */
/* Body fade animation removed — Motion One now handles page-transition fades. */
body.page-fade-out {
  animation: pageFadeOut 0.3s ease forwards;
}
@keyframes pageFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* --------------------------------------------------------------------------
   6. VIMEO IFRAME — wrapper responsive 16:9
   Remplace le placeholder dès qu'un id Vimeo est fourni à <VimeoEmbed/>.
   -------------------------------------------------------------------------- */
.video-vimeo {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* ratio 16:9 */
  border-radius: 14px;
  overflow: hidden;
  background: #2C3236;
  box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.18);
}
.video-vimeo iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   7. PARTICLES BACKGROUND — canvas dans le hero (cf. useHeroParticles)
   50 particules vertes connectées en arrière-plan. Le canvas est en
   pointer-events:none ; particles.js détecte le curseur via 'window'.
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
#particles-js {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#particles-js canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}
/* Le contenu du hero passe au-dessus des particules */
.hero > .container { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   8. HERO TEXT SCRAMBLE — caractères qui shufflent avant de se figer
   Chaque caractère du H1 devient un <span class="scramble-char">. On affiche
   les chars aléatoires en monospace pour éviter les sauts de largeur, puis
   on revient à la police d'origine une fois figé.
   -------------------------------------------------------------------------- */
.hero h1 .scramble-char {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--vert-fonce, #7BA73B);
  transition: color 0.25s ease;
}
.hero h1 .scramble-char.settled {
  font-family: inherit;
  color: inherit;
}

/* --------------------------------------------------------------------------
   9. SERVICE CARDS — 3D FLIP au hover
   Recto : icône + titre. Verso : tag + titre + descriptif + CTA.
   La face avant est en position absolute par-dessus la face arrière ;
   c'est cette dernière qui détermine la hauteur de la card.
   -------------------------------------------------------------------------- */
.flip-card { perspective: 1400px; position: relative; }
.flip-card .flip-inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.flip-card:hover .flip-inner,
.flip-card:focus-within .flip-inner { transform: rotateY(180deg); }

.flip-card .flip-face {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card .flip-back {
  position: relative;
  z-index: 1;
  transform: rotateY(180deg);
}
.flip-card .flip-front {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 32px;
}
.flip-card .flip-front .tag { margin: 0; }
.flip-card .flip-front h3 { margin: 0; }
.flip-card .flip-icon {
  width: 96px; height: 96px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: #D7EDB0;
  color: #7BA73B;
}
.flip-card .flip-hint {
  margin-top: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7BA73B;
  opacity: 0.7;
}
/* La face avant hérite du même fond que la card pour rester homogène */
.flip-card.sell .flip-front { background: white; border-radius: inherit; }
.flip-card.buy .flip-front  { background: #D7EDB0; border-radius: inherit; }

/* Sur appareils sans hover (mobile/tablette), on désactive le flip
   et on affiche directement le verso (contenu complet). */
@media (hover: none) {
  .flip-card .flip-inner { transform: none !important; }
  .flip-card .flip-front { display: none; }
  .flip-card .flip-back { transform: none; }
}

/* --------------------------------------------------------------------------
   10. TILT 3D — rotation des cards qui suit le curseur (cf. useTilt)
   Les angles --tilt-rx / --tilt-ry sont mis à jour en JS via mousemove.
   Pas de tilt sur appareils tactiles (no hover).
   -------------------------------------------------------------------------- */
.card, .service-card {
  --tilt-rx: 0deg;
  --tilt-ry: 0deg;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.25s ease, border-color 0.25s ease;
}
.card.is-tilting, .service-card.is-tilting {
  transform: perspective(900px) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry)) translateZ(0);
}
@media (hover: none) {
  .card.is-tilting, .service-card.is-tilting { transform: none; }
}

/* --------------------------------------------------------------------------
   11. ACCESSIBILITÉ — respect de prefers-reduced-motion
   Les utilisateurs qui ont activé la réduction d'animations voient
   le contenu directement, sans transitions.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero h1 .hero-word { opacity: 1 !important; transform: none !important; animation: none !important; }
  body { opacity: 1 !important; animation: none !important; }
  .btn:hover, .float-cta:hover { transform: none !important; }
  .flip-card .flip-inner { transition: none !important; }
  .card.is-tilting, .service-card.is-tilting { transform: none !important; }
  #particles-js { display: none; }
}

/* --------------------------------------------------------------------------
   12. FRANCE 3D — conteneur du canvas Three.js dans le hero
   Canvas natif 500×500, redimensionné au besoin par CSS tout en gardant
   l'aspect 1:1. Fond transparent. Curseur "grab" pour signaler le drag.
   -------------------------------------------------------------------------- */
.hero .france-3d {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.hero .france-3d:active { cursor: grabbing; }
.hero .france-3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: transparent;
}

/* ─────────────────────────────────────────────────────────
   Global layout fixes — section-head centering + spacing
   Loaded after styles.css so cascades over the base rules.
   ───────────────────────────────────────────────────────── */

/* 1) Section-head centered by default (was left-aligned in styles.css) */
.section-head {
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}
.section-head .eyebrow,
.section-head h2,
.section-head h3,
.section-head p {
  text-align: center;
}
/* Opt-out variant for 2-col layouts where the head sits in column 1 */
.section-head.left {
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.section-head.left .eyebrow,
.section-head.left h2,
.section-head.left h3,
.section-head.left p {
  text-align: left;
}

/* 2) Standard vertical spacing on sections (was 96px in styles.css) */
section { padding: 52px 0; }
section.section-tight { padding: 32px 0; }
@media (max-width: 768px) {
  section { padding: 40px 0; }
  section.section-tight { padding: 24px 0; }
}

/* 3) Page hero — keep sticky-header offset on top, reduce bottom */
.page-hero { padding-top: 96px; padding-bottom: 48px; }
@media (max-width: 768px) { .page-hero { padding-top: 80px; padding-bottom: 36px; } }

/* Opt-in centered hero (single-column intro pages: estimation, blog, FAQ, etc.) */
.page-hero.center { text-align: center; }
.page-hero.center .breadcrumbs { justify-content: center; }
.page-hero.center .eyebrow,
.page-hero.center h1,
.page-hero.center .lede,
.page-hero.center .seo-subtitle { margin-left: auto; margin-right: auto; }
.page-hero.center h1,
.page-hero.center .lede { max-width: 760px; }

/* ─────────────────────────────────────────────────────────
   Blog category palette (5 distinct colors)
   ───────────────────────────────────────────────────────── */
:root {
  --cat-vendre: #9ECA4F;       /* vert marque */
  --cat-acheter: #5A9BD5;      /* bleu marque */
  --cat-marche: #2C3236;       /* anthracite */
  --cat-financement: #1E4D8C;  /* bleu profond institutionnel */
  --cat-dromcom: #0F8B7A;      /* vert-teal tropical */
  --cat-parcours: #8B5A9B;     /* violet doux, signature récits */
}

/* Reusable category badge — same style on blog cards & article heroes */
.cat-badge {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 4px;
  text-decoration: none;
}
.cat-badge.cat-vendre      { background: var(--cat-vendre); }
.cat-badge.cat-acheter     { background: var(--cat-acheter); }
.cat-badge.cat-marche      { background: var(--cat-marche); }
.cat-badge.cat-financement { background: var(--cat-financement); }
.cat-badge.cat-dromcom     { background: var(--cat-dromcom); }
.cat-badge.cat-parcours    { background: var(--cat-parcours); }

/* ─────────────────────────────────────────────────────────
   Contextual FAQ link block on blog articles
   ───────────────────────────────────────────────────────── */
.faq-link-block {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #F5F5F5;
  border-left: 4px solid #9ECA4F;
  border-radius: 8px;
  padding: 24px 28px;
  margin: 48px auto;
  max-width: 760px;
}
.faq-link-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #D7EDB0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #7BA73B;
}
.faq-link-icon svg,
.faq-link-icon i { width: 24px; height: 24px; }
.faq-link-eyebrow {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #7BA73B;
  margin: 0 0 6px;
}
.faq-link-content h3 {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #2C3236;
  margin: 0 0 12px;
  line-height: 1.4;
}
.faq-link-cta {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #9ECA4F;
  text-decoration: none;
}
.faq-link-cta:hover { color: #7BA73B; text-decoration: underline; }
@media (max-width: 600px) {
  .faq-link-block { flex-direction: column; padding: 20px; }
}

/* ─────────────────────────────────────────────────────────
   Tiered honoraires section (vendre.html #honoraires)
   ───────────────────────────────────────────────────────── */
.section-honoraires { background: #F5F5F5; }

.honoraires-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 880px;
  margin: 0 auto 48px;
}
.honoraires-card {
  background: #fff;
  border: 2px solid #E5E5E5;
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
}
.honoraires-card.honoraires-featured {
  background: #D7EDB0;
  border: 2px solid #9ECA4F;
}
.honoraires-recommended {
  position: absolute;
  top: 0;
  right: 24px;
  transform: translateY(-50%);
  background: #9ECA4F;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 999px;
}
.honoraires-badge {
  display: inline-block;
  background: #F5F5F5;
  color: #4A4A4A;
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
  align-self: center;
}
.honoraires-badge-green {
  background: rgba(158, 202, 79, 0.25);
  color: #7BA73B;
}
.honoraires-number {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 72px;
  line-height: 1;
  color: #2C3236;
  margin: 0;
}
.honoraires-number-green { color: #7BA73B; }
.honoraires-subtitle {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: #4A4A4A;
  margin-top: 4px;
}
.honoraires-divider {
  width: 48px;
  height: 2px;
  background: #E5E5E5;
  margin: 20px auto;
}
.honoraires-featured .honoraires-divider {
  background: rgba(123, 167, 59, 0.3);
}
.honoraires-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #2C3236;
  margin: 0;
}
.honoraires-arguments {
  background: #2C3236;
  border-radius: 20px;
  padding: 48px 40px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.honoraires-arguments h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: #fff;
  margin: 0 0 32px;
}
.arguments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 36px;
  text-align: left;
}
.argument-item {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 24px;
}
.argument-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(158, 202, 79, 0.2);
  color: #9ECA4F;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.argument-icon i,
.argument-icon svg { width: 22px; height: 22px; }
.argument-item h4 {
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}
.argument-item p {
  font-family: 'Open Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
.honoraires-cta { text-align: center; }
@media (max-width: 768px) {
  .honoraires-grid { grid-template-columns: 1fr; }
  .arguments-grid { grid-template-columns: 1fr; gap: 16px; }
  .honoraires-number { font-size: 56px; }
  .honoraires-arguments { padding: 32px 24px; }
}

/* ─────────────────────────────────────────────────────────
   Mini honoraires reminder (estimation page)
   ───────────────────────────────────────────────────────── */
.honoraires-mini {
  background: #F5F5F5;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 32px auto;
  max-width: 720px;
  text-align: center;
}
.honoraires-mini-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2C3236;
  margin: 0 0 12px;
}
.honoraires-mini-badges {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.hm-badge {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 999px;
}
.hm-badge-standard {
  background: #fff;
  border: 1px solid #E5E5E5;
  color: #4A4A4A;
}
.hm-badge-featured {
  background: #9ECA4F;
  color: #fff;
}
.honoraires-mini-note {
  font-family: 'Open Sans', sans-serif;
  font-size: 12.5px;
  color: #6A6A6A;
  margin: 0;
}
.honoraires-mini-note a {
  color: #7BA73B;
  font-weight: 600;
  text-decoration: none;
}
.honoraires-mini-note a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────
   Mandat-exclusif section (confidentialite page)
   ───────────────────────────────────────────────────────── */
.section-mandat-exclusif { background: #fff; }
.mandat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto 36px;
}
.mandat-item {
  background: #F5F5F5;
  border-radius: 12px;
  padding: 28px 24px;
  text-align: left;
}
.mandat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #D7EDB0;
  color: #7BA73B;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.mandat-icon i,
.mandat-icon svg { width: 24px; height: 24px; }
.mandat-item h4 {
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #2C3236;
  margin: 0 0 10px;
}
.mandat-item p {
  font-family: 'Open Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4A4A4A;
  margin: 0;
}
.mandat-cta { text-align: center; }
@media (max-width: 768px) {
  .mandat-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────
   Legal pages (mentions-legales, politique-de-confidentialite,
   politique-de-cookies, cgu)
   ───────────────────────────────────────────────────────── */
.page-legal { padding: 80px 0 96px; background: #fff; }
.page-legal .container { max-width: 820px; }
.page-legal h1 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 38px; color: #2C3236; margin: 16px 0 24px; line-height: 1.2; }
.page-legal .lead { font-family: 'Open Sans', sans-serif; font-size: 17px; line-height: 1.6; color: #4A4A4A; margin: 0 0 40px; padding-bottom: 24px; border-bottom: 1px solid #E5E5E5; }
.page-legal h2 { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 22px; color: #2C3236; margin: 40px 0 14px; }
.page-legal h3 { font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: 700; color: #2C3236; margin: 28px 0 12px; }
.page-legal p { font-family: 'Open Sans', sans-serif; font-size: 15.5px; line-height: 1.7; color: #2C3236; margin: 0 0 14px; }
.page-legal a { color: #7BA73B; font-weight: 600; }
.page-legal a:hover { color: #7BA73B; text-decoration: underline; }
.legal-list { list-style: none; padding: 0; margin: 0 0 18px; }
.legal-list li { font-family: 'Open Sans', sans-serif; font-size: 15.5px; line-height: 1.7; color: #2C3236; padding: 6px 0 6px 22px; position: relative; }
.legal-list li::before { content: "•"; position: absolute; left: 4px; color: #9ECA4F; font-weight: 700; }
.legal-list li strong { color: #2C3236; }
.legal-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-family: 'Open Sans', sans-serif; font-size: 14.5px; }
.legal-table th, .legal-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #E5E5E5; color: #2C3236; }
.legal-table th { background: #F5F5F5; font-weight: 700; }
@media (max-width: 768px) {
  .page-legal { padding: 56px 0 72px; }
  .page-legal h1 { font-size: 30px; }
  .page-legal h2 { font-size: 20px; }
  .legal-table { font-size: 13px; }
  .legal-table th, .legal-table td { padding: 10px 8px; }
}

/* ─────────────────────────────────────────────────────────
   CNIL-compliant cookie banner & settings modal
   ───────────────────────────────────────────────────────── */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 4px solid #9ECA4F; box-shadow: 0 -8px 32px rgba(0,0,0,0.12); padding: 20px 24px; z-index: 9998; font-family: 'Open Sans', sans-serif; animation: cookieSlideUp 0.4s ease-out; }
@keyframes cookieSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cookie-banner-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.cookie-banner-text strong { display: block; font-size: 16px; color: #2C3236; margin-bottom: 6px; }
.cookie-banner-text p { font-size: 14px; color: #4A4A4A; margin: 0; line-height: 1.5; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn { font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 8px; border: 2px solid; cursor: pointer; transition: all 0.2s; min-height: 44px; }
.cookie-btn-refuse { background: #fff; color: #2C3236; border-color: #2C3236; }
.cookie-btn-refuse:hover { background: #F5F5F5; }
.cookie-btn-customize { background: #fff; color: #5A9BD5; border-color: #5A9BD5; }
.cookie-btn-customize:hover { background: #5A9BD5; color: #fff; }
.cookie-btn-accept { background: #9ECA4F; color: #fff; border-color: #9ECA4F; }
.cookie-btn-accept:hover { background: #7BA73B; border-color: #7BA73B; }
.cookie-banner-legal { grid-column: 1 / -1; margin: 8px 0 0; font-size: 12px; color: #6A6A6A; }
.cookie-banner-legal a { color: #7BA73B; }
@media (max-width: 768px) {
  .cookie-banner-inner { grid-template-columns: 1fr; gap: 16px; }
  .cookie-banner-actions { flex-wrap: wrap; }
  .cookie-btn { flex: 1; min-width: 100px; }
}

.cookie-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cookie-modal { background: #fff; border-radius: 16px; padding: 32px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; font-family: 'Open Sans', sans-serif; }
.cookie-modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 28px; cursor: pointer; color: #4A4A4A; width: 32px; height: 32px; line-height: 1; }
.cookie-modal h2 { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 800; color: #2C3236; margin: 0 0 12px; }
.cookie-modal > p { font-size: 14px; color: #4A4A4A; margin: 0 0 24px; }
.cookie-category { border: 1px solid #E5E5E5; border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.cookie-category-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cookie-category-header strong { font-size: 15px; color: #2C3236; }
.cookie-category p { font-size: 13.5px; color: #4A4A4A; margin: 0; line-height: 1.5; }
.cookie-toggle-locked { font-size: 12px; color: #7BA73B; background: #D7EDB0; padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.cookie-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.cookie-toggle input { opacity: 0; width: 0; height: 0; }
.cookie-toggle-slider { position: absolute; inset: 0; background: #E5E5E5; border-radius: 999px; transition: 0.2s; cursor: pointer; }
.cookie-toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: 0.2s; }
.cookie-toggle input:checked + .cookie-toggle-slider { background: #9ECA4F; }
.cookie-toggle input:checked + .cookie-toggle-slider::before { transform: translateX(20px); }
.cookie-modal-actions { display: flex; gap: 12px; margin-top: 24px; }
.cookie-modal-actions .cookie-btn { flex: 1; }

/* Footer social icons — enforce consistent size for Lucide + inline SVG mix */
.footer-socials a i,
.footer-socials a svg { width: 20px; height: 20px; }
.footer-socials a { transition: background .15s ease, transform .15s ease; }
.footer-socials a:hover { transform: translateY(-2px); }


/* ─────────────────────────────────────────────────────────
   Blog category filter — sticky compact dropdown
   ───────────────────────────────────────────────────────── */
.blog-filter-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #E5E5E5;
  padding: 12px 0;
  margin-bottom: 32px;
}
.blog-filter-bar .container { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-label { font-family: 'Open Sans', sans-serif; font-size: 13px; color: #6A6A6A; font-weight: 500; }
.filter-select-wrapper { position: relative; display: inline-block; }
.filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  padding: 8px 32px 8px 14px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2C3236;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-select:hover { border-color: #7BA73B; }
.filter-select:focus { outline: none; border-color: #7BA73B; box-shadow: 0 0 0 3px rgba(123, 167, 59, 0.15); }
.filter-chevron { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: #6A6A6A; pointer-events: none; }
.filter-count { font-family: 'Open Sans', sans-serif; font-size: 13px; color: #6A6A6A; margin-left: auto; }
@media (max-width: 600px) {
  .filter-label { display: none; }
  .filter-count { font-size: 12px; }
}

/* Blog: link from satellite article back to its pillar guide */
.article-pillar-link {
  margin-top: 32px;
  padding: 16px 20px;
  background: #F5F5F5;
  border-left: 3px solid #9ECA4F;
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #2C3236;
}
.article-pillar-link a {
  color: #7BA73B;
  font-weight: 600;
  text-decoration: none;
}
.article-pillar-link a:hover {
  text-decoration: underline;
}

/* Blog: cross-category related-links block (distinct from .article-pillar-link) */
.article-related-links {
  margin-top: 32px;
  padding: 16px 20px;
  background: #F5F5F5;
  border-left: 3px solid #5A9BD5;
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #2C3236;
}
.article-related-links strong {
  display: block;
  margin-bottom: 8px;
  color: #2C3236;
}
.article-related-links ul {
  margin: 0;
  padding-left: 20px;
}
.article-related-links li {
  margin-bottom: 4px;
}
.article-related-links a {
  color: #5A9BD5;
  font-weight: 600;
  text-decoration: none;
}
.article-related-links a:hover {
  text-decoration: underline;
}

/* Service page: related-articles section linking to blog */
.page-related-articles {
  max-width: 1100px;
  margin: 64px auto 32px;
  padding: 32px;
  background: #F5F5F5;
  border-radius: 12px;
}
.page-related-articles h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: #2C3236;
  margin: 0 0 24px 0;
}
.page-related-articles ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.page-related-articles li {
  margin: 0;
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  border-left: 3px solid #9ECA4F;
  transition: border-color 0.2s;
}
.page-related-articles li:hover {
  border-left-color: #7BA73B;
}
.page-related-articles a {
  color: #2C3236;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  display: block;
}
.page-related-articles a:hover {
  color: #7BA73B;
}
@media (max-width: 600px) {
  .page-related-articles {
    padding: 24px 16px;
    margin: 32px auto;
  }
  .page-related-articles h2 {
    font-size: 22px;
  }
}

/* SEO step 5: classes for new geo + landing pages (estimer-mon-officine, acheter-officine-nouvelle-aquitaine, cession-pharmacie-drom-com) */
.page-subtitle {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #4A4A4A;
  max-width: 720px;
  margin: 16px 0 0;
}
.content-section {
  padding: 44px 0;
}
.content-section h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: #2C3236;
  margin: 0 0 18px;
  line-height: 1.3;
}
.content-section p {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #2C3236;
  margin: 0 0 16px;
  max-width: 760px;
}
.content-section a {
  color: #5A9BD5;
  text-decoration: none;
}
.content-section a:hover {
  color: #3A7AB5;
  text-decoration: underline;
}
.check-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
  max-width: 760px;
}
.check-list li {
  position: relative;
  padding: 8px 0 8px 32px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #2C3236;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #9ECA4F;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.cta-section {
  padding: 56px 0;
}
.cta-section h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: #2C3236;
  margin: 0 0 14px;
}
.cta-section p {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #2C3236;
  margin: 0 auto 24px;
  max-width: 640px;
}
.btn-large {
  padding: 16px 32px;
  font-size: 16px;
  border-radius: 999px;
}
.grid-3cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.territory-card {
  background: linear-gradient(135deg, #ffffff 0%, #F5F5F5 100%);
  padding: 32px 24px;
  border-radius: 16px;
  border: 1px solid rgba(158, 202, 79, 0.15);
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.territory-card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #2C3236;
  margin: 0 0 12px;
  line-height: 1.25;
}
.territory-card p {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  color: #2C3236;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 600px) {
  .content-section { padding: 32px 0; }
  .content-section h2, .cta-section h2 { font-size: 22px; }
  .grid-3cols { grid-template-columns: 1fr; }
}

/* SEO step 5 — UX refonte: colored heroes + portrait + stats + process steps + testimonial + signed CTAs */
.hero-colored {
  background-color: #D7EDB0;
  padding: 80px 0 64px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 28px;
}
.hero-content h1 {
  margin: 16px 0 24px;
  font-size: 56px;
  line-height: 1.05;
  color: #2C3236;
}
.hero-lead {
  font-size: 18px;
  line-height: 1.55;
  color: #2C3236;
  margin-bottom: 16px;
}
.hero-tagline {
  font-size: 16px;
  color: #7BA73B;
  font-weight: 600;
  font-style: italic;
  margin: 0 0 32px;
}
.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
}
.hero-portrait {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(44, 50, 54, 0.18);
  border: 8px solid #fff;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: portraitFadeIn 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
  position: relative;
  z-index: 1;
}
.hero-portrait-caption {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #2C3236;
  text-align: center;
  line-height: 1.4;
  min-height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-portrait-caption strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
  color: #7BA73B;
}
.bc-tags {
  margin-left: 12px;
  font-size: 13px;
  color: #7BA73B;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.bc-tags span {
  margin: 0 4px;
}
.trust-grid,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.trust-stat,
.stat-card {
  text-align: center;
  padding: 32px 24px;
  background: #fff;
  border-radius: 12px;
  border-top: 4px solid #9ECA4F;
}
.trust-number,
.stat-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 44px;
  color: #7BA73B;
  line-height: 1;
  margin-bottom: 12px;
}
.trust-label,
.stat-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #2C3236;
  line-height: 1.4;
}
.stats-eyebrow {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #7BA73B;
  margin-bottom: 12px;
}
.section-process {
  background-color: #F5F5F5;
}
.process-steps {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  gap: 24px;
  max-width: 720px;
}
.process-steps li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.step-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #9ECA4F;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 22px;
}
.process-steps li strong {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
  color: #2C3236;
}
.process-steps li p {
  margin: 0;
  font-size: 15px;
  color: #2C3236;
  line-height: 1.5;
}
.section-testimonial {
  background: #F5F5F5;
}
.testimonial-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px;
  background: #fff;
  border-radius: 16px;
  border-left: 4px solid #9ECA4F;
}
.testimonial-card blockquote {
  margin: 0 0 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  line-height: 1.4;
  color: #2C3236;
  font-style: italic;
}
.testimonial-card cite {
  font-style: normal;
  font-size: 14px;
  color: #7BA73B;
  font-weight: 700;
}
.cta-lead {
  font-size: 17px;
  color: #2C3236;
  margin: 16px auto 32px;
  max-width: 600px;
}
.cta-signature {
  margin-top: 24px;
  font-size: 14px;
  color: #7BA73B;
  font-weight: 600;
  font-style: italic;
}
.btn-secondary {
  background: transparent;
  border: 2px solid #5A9BD5;
  color: #5A9BD5;
  padding: 14px 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-secondary:hover {
  background: #5A9BD5;
  color: #fff;
}
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
@media (max-width: 600px) {
  .hero-colored { padding: 56px 0 40px; }
  .hero-content h1 { font-size: 36px; }
  .bc-tags { display: block; margin: 8px 0 0 0; }
  .testimonial-card { padding: 24px; }
  .testimonial-card blockquote { font-size: 18px; }
}

/* Mega-menu fix: widen panel + ensure entries don't wrap onto 3 lines */
.mega { min-width: 600px; padding: 24px 28px; }
.mega-grid { grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.mega-link { padding: 10px 14px; }
.mega-link .ttl { font-size: 15px; line-height: 1.25; white-space: normal; }
.mega-link .sub { font-size: 13px; line-height: 1.35; white-space: normal; }
@media (max-width: 960px) {
  .mega { min-width: 480px; padding: 20px; }
  .mega-grid { gap: 4px 12px; }
}

/* Territory-card region icons (geo pages: Nouvelle-Aquitaine + DROM-COM) */
.territory-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 18px 50px rgba(44, 50, 54, 0.12),
    0 0 0 1px rgba(158, 202, 79, 0.25);
  border-color: rgba(158, 202, 79, 0.5);
}
.territory-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.territory-icon i,
.territory-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}
.territory-icon-green {
  background: rgba(158, 202, 79, 0.15);
  color: #7BA73B;
}
.territory-icon-green-dark {
  background: rgba(123, 167, 59, 0.18);
  color: #5d8a26;
}
.territory-icon-blue {
  background: rgba(90, 155, 213, 0.15);
  color: #5A9BD5;
}

/* Effect 3 + 4 — premium hover + organic photo halo (geo/landing pages only) */
.hero-visual::before {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(158, 202, 79, 0.35) 0%,
    rgba(215, 237, 176, 0.25) 30%,
    transparent 70%
  );
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  filter: blur(20px);
  pointer-events: none;
}
@media (max-width: 600px) {
  .hero-visual::before { width: 280px; height: 280px; }
}
.hero-portrait-caption {
  position: relative;
  z-index: 1;
}
.hero-portrait:hover {
  transform: scale(1.02);
}
@keyframes portraitFadeIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.territory-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(158, 202, 79, 0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.territory-card:hover::before { opacity: 1; }
.territory-icon {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.territory-card:hover .territory-icon {
  transform: scale(1.08) rotate(-3deg);
}
.stat-card, .trust-stat {
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card:hover, .trust-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(44, 50, 54, 0.08);
}
@media (prefers-reduced-motion: reduce) {
  .hero-portrait { animation: none; }
  .territory-card, .territory-card::before, .territory-icon,
  .stat-card, .trust-stat, .hero-portrait { transition: none; }
  .territory-card:hover, .stat-card:hover, .trust-stat:hover,
  .hero-portrait:hover, .territory-card:hover .territory-icon { transform: none; }
}

/* page-effects propagation — site-wide hover transitions + counter CSS support */
.territory-card,
.stat-card,
.trust-stat,
.blog-card,
.annonce-card,
.valeur-card,
.service-card,
.article-card,
.region-card {
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-card:hover,
.annonce-card:hover,
.valeur-card:hover,
.service-card:hover,
.article-card:hover,
.region-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(44, 50, 54, 0.08);
}
.stat-num, .trust-number {
  display: inline-block;
  transform-origin: center center;
  will-change: transform, color;
}
@media (prefers-reduced-motion: reduce) {
  .blog-card, .annonce-card, .valeur-card, .service-card, .article-card, .region-card { transition: none; }
  .blog-card:hover, .annonce-card:hover, .valeur-card:hover,
  .service-card:hover, .article-card:hover, .region-card:hover { transform: none; }
  .stat-num, .trust-number { will-change: auto; }
}

/* Homepage step-6 sections: regions / estimer-highlight / pillar articles */
.section-regions { background: #F5F5F5; }
.section-articles { background: #fff; }
.section-estimer-highlight { background: #D7EDB0; }

.section-eyebrow {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #7BA73B;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.section-intro {
  max-width: 720px;
  font-size: 17px;
  color: #2C3236;
  margin-bottom: 40px;
  line-height: 1.6;
}

.regions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.region-card {
  background: linear-gradient(135deg, #ffffff 0%, #F5F5F5 100%);
  padding: 32px 28px;
  border-radius: 16px;
  text-decoration: none;
  color: #2C3236;
  border: 1px solid rgba(158, 202, 79, 0.15);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.region-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(158, 202, 79, 0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.region-card:hover::before { opacity: 1; }
.region-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(158, 202, 79, 0.15);
  color: #7BA73B;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.region-card-icon i,
.region-card-icon svg { width: 28px; height: 28px; stroke-width: 2; }
.region-card-eyebrow {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #7BA73B;
  margin-bottom: 8px;
}
.region-card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: #2C3236;
  margin: 0 0 12px;
}
.region-card p {
  flex-grow: 1;
  font-size: 15px;
  color: #2C3236;
  line-height: 1.5;
  margin: 0 0 16px;
}
.region-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7BA73B;
  font-weight: 700;
  font-size: 15px;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.article-card {
  background: #F5F5F5;
  padding: 32px 28px;
  border-radius: 16px;
  text-decoration: none;
  color: #2C3236;
  border-left: 4px solid #9ECA4F;
  display: flex;
  flex-direction: column;
}
.article-card-eyebrow {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #7BA73B;
  margin-bottom: 8px;
}
.article-card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #2C3236;
  margin: 0 0 12px;
  line-height: 1.2;
}
.article-card p {
  flex-grow: 1;
  font-size: 15px;
  color: #2C3236;
  line-height: 1.5;
  margin: 0 0 16px;
}
.article-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7BA73B;
  font-weight: 700;
  font-size: 15px;
}
.articles-cta {
  text-align: center;
  margin-top: 40px;
}

.estimer-highlight {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.estimer-highlight h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #2C3236;
  margin: 0 0 20px;
  line-height: 1.15;
}
.estimer-highlight p {
  font-size: 18px;
  color: #2C3236;
  margin: 0 auto 32px;
  max-width: 640px;
  line-height: 1.55;
}
@media (max-width: 600px) {
  .estimer-highlight h2 { font-size: 28px; }
}

/* Contact page — Pipedrive scheduler block (replaces Calendly placeholder) */
.section-scheduler { background: #D7EDB0; }
.scheduler-eyebrow {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #7BA73B;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.section-scheduler h2 {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #2C3236;
  margin: 0 0 16px;
  line-height: 1.15;
}
.scheduler-intro {
  text-align: center;
  font-size: 17px;
  color: #2C3236;
  margin: 0 auto 40px;
  max-width: 600px;
  line-height: 1.55;
}
.scheduler-card {
  background: #fff;
  max-width: 600px;
  margin: 0 auto;
  padding: 48px 40px;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(44, 50, 54, 0.08);
  text-align: center;
}
.scheduler-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: rgba(158, 202, 79, 0.15);
  color: #7BA73B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.scheduler-icon i,
.scheduler-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 2;
}
.scheduler-card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: #2C3236;
  margin: 0 0 12px;
}
.scheduler-card p {
  font-size: 16px;
  color: #2C3236;
  line-height: 1.5;
  margin: 0 0 24px;
}
.scheduler-card .scheduler-note {
  font-size: 13px;
  color: #7BA73B;
  margin: 16px 0 0;
  font-style: italic;
}
@media (max-width: 600px) {
  .section-scheduler h2 { font-size: 28px; }
  .scheduler-card { padding: 32px 24px; }
}

/* Fix 6 — h4→h3 semantic demotion: mirror parent-scoped h4 styles onto h3 */
/* Mirrors the size/font of the existing parent-scoped h4 rules onto h3 inside the same containers, so the demoted headings keep their previous visual size. Color stays inherited from the existing h3 rule (palette green). */
.timeline-step h3,
.value-card h3,
.argument-item h3,
.mandat-item h3,
.faq-cat h3,
.parcours-step h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: 6px;
}
.process-step h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.35;
  margin-bottom: 10px;
}


/* Blog filter — button row (replaces dropdown), category color tokens, mobile horizontal scroll */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 auto 32px;
  padding: 0 16px;
  justify-content: center;
}
.blog-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--filter-color, #5A9BD5);
  background: #fff;
  color: var(--filter-color, #5A9BD5);
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.blog-filter-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.blog-filter-btn:focus-visible {
  outline: 2px solid var(--filter-color, #5A9BD5);
  outline-offset: 2px;
}
.blog-filter-btn.is-active {
  background: var(--filter-color, #5A9BD5);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.blog-filter-btn .filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: rgba(0,0,0,0.06);
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.blog-filter-btn.is-active .filter-count-badge {
  background: rgba(255,255,255,0.25);
}

/* Category color tokens (use palette greens + blue + neutral) */
.blog-filter-btn[data-filter="all"] {
  --filter-color: #5A6066;
  background: #fff;
  color: #2C3236;
  border-color: #D5D7DA;
}
.blog-filter-btn[data-filter="all"]:hover {
  background: #F7F8F9;
  border-color: #A5A8AB;
  color: #2C3236;
}
.blog-filter-btn[data-filter="all"].is-active {
  background: #F0F2F4;
  color: #2C3236;
  border-color: #5A6066;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.blog-filter-btn[data-filter="all"].is-active .filter-count-badge {
  background: rgba(44, 50, 54, 0.1);
  color: #2C3236;
}
.blog-filter-btn.cat-vendre                { --filter-color: #9ECA4F; }
.blog-filter-btn.cat-acheter               { --filter-color: #5A9BD5; }
.blog-filter-btn.cat-parcours              { --filter-color: #7BA73B; }
.blog-filter-btn.cat-marche                { --filter-color: #2C3236; }
.blog-filter-btn.cat-financement           { --filter-color: #7BA73B; }
.blog-filter-btn.cat-dromcom               { --filter-color: #5A9BD5; }

/* Make sure the section wrapping the grid never gets faded (override .reveal in case)
   — works without !important because class chain is more specific. */
section.no-reveal { opacity: 1; transform: none; transition: none; }

@media (max-width: 720px) {
  .blog-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;
    padding: 4px 16px 12px;
    margin-bottom: 24px;
    -webkit-overflow-scrolling: touch;
  }
  .blog-filter-btn {
    scroll-snap-align: start;
    flex: 0 0 auto;
  }
}

/* Pill filter buttons — remove count badges (deprioritized per product decision)
   and restore the category label on mobile (overrides the legacy '.filter-label {
   display: none }' rule at line 918 which was meant for the old dropdown UI).
   Specificity 0,0,2,0 (.blog-filter-btn .filter-label) beats 0,0,1,0. */
.blog-filter-btn .filter-count-badge { display: none; }
.blog-filter-btn .filter-label { display: inline-block; }


/* Blog grid: enforce nominal state — defense against any fade-up animation that might target .blog-card (iPad Safari gray-veil fix) */
.blog-grid .blog-card,
.blog-section .blog-card {
  opacity: 1;
  transform: none;
  transition: none;
  filter: none;
  animation: none;
  visibility: visible;
}
.blog-grid .blog-card:hover {
  transform: translateY(-2px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}


/* ═══ Premium background system: soft gradients + luminous halos ═══ */

/* Particles container on .page-hero / .apropos-hero (mounted by app.js) */
.page-hero, .apropos-hero { position: relative; overflow: hidden; }
.page-hero > .container, .page-hero h1, .page-hero p, .page-hero .breadcrumbs,
.apropos-hero > .container { position: relative; z-index: 1; }
#particles-js { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
@media (max-width: 720px) { #particles-js { display: none; } }

/* Soft green gradient with two halos (top-left green, bottom-right blue) */

/* Lighter cream variant for intro sections */

/* Center-halo for CTA/highlight sections */


/* Voile lisibilité sous les textes des heroes avec particles */
.page-hero .container,
.apropos-hero .container {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  padding: 32px 40px;
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 8px 24px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 2;
}
@supports not (backdrop-filter: blur(8px)) {
  .page-hero .container,
  .apropos-hero .container {
    background: rgba(255, 255, 255, 0.85);
  }
}
@media (max-width: 720px) {
  .page-hero .container,
  .apropos-hero .container {
    padding: 24px 20px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 1);
    box-shadow: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   ESTIMER-MON-OFFICINE.HTML — Premium redesign (scoped: .esti-*)
   Palette: #9ECA4F #7BA73B #5A9BD5 #D7EDB0 #F5F5F5 #2C3236 #4A4A4A
   Type: Poppins ExtraBold (titres) + Open Sans (corps)
   ════════════════════════════════════════════════════════════════ */

/* — Shared eyebrow pill (used across sections) — */
.eyebrow-pill {
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7BA73B;
  background: rgba(123, 167, 59, 0.06);
  border: 1px solid rgba(123, 167, 59, 0.3);
  padding: 6px 14px;
  border-radius: 999px;
}
.esti-eyebrow-on-light { background: #FFFFFF; }

/* — Shared section head — */
.esti-section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.esti-section-head h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  color: #2C3236;
  margin: 18px 0 14px;
  letter-spacing: -0.005em;
}
.esti-section-head p {
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #4A4A4A;
  margin: 0;
}

/* ═══ SECTION 1 — Hero ═══ */
.esti-hero {
  background: #FFFFFF;
  padding: clamp(32px, 5vw, 60px) 0 clamp(32px, 4vw, 48px);
  position: relative;
  overflow: hidden;
}
.esti-hero-halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.esti-hero-halo-tl {
  top: -180px;
  left: -160px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(158, 202, 79, 0.12) 0%, rgba(158, 202, 79, 0) 70%);
}
.esti-hero-halo-br {
  bottom: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(90, 155, 213, 0.08) 0%, rgba(90, 155, 213, 0) 70%);
}
.esti-hero > .container { position: relative; z-index: 1; }
.esti-breadcrumbs { margin-bottom: 28px; }

.esti-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  min-height: 0;
}
.esti-hero-text { max-width: 580px; }

.esti-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #7BA73B;
  background: rgba(123, 167, 59, 0.06);
  border: 1px solid rgba(123, 167, 59, 0.3);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.esti-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9ECA4F;
  animation: estiDotBlink 1.8s ease-in-out infinite;
}
@keyframes estiDotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

.esti-hero-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #2C3236;
  margin: 0 0 20px;
}
.esti-hero-lead {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: #4A4A4A;
  margin: 0 0 32px;
  max-width: 540px;
}

.esti-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.esti-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 30px;
  border-radius: 12px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}
.esti-btn i, .esti-btn svg { width: 18px; height: 18px; stroke-width: 2; }
.esti-btn-primary { background: #9ECA4F; color: #FFFFFF; }
.esti-btn-primary:hover { background: #7BA73B; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(123, 167, 59, 0.30); }
.esti-btn-primary:focus-visible { outline: 2px solid #5A9BD5; outline-offset: 3px; }
.esti-btn-ghost { background: transparent; color: #2C3236; border-color: #2C3236; }
.esti-btn-ghost:hover { background: #2C3236; color: #FFFFFF; }
.esti-btn-ghost:focus-visible { outline: 2px solid #5A9BD5; outline-offset: 3px; }

.esti-trust-row {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
}
.esti-trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #4A4A4A;
}
.esti-trust-row li i, .esti-trust-row li svg { width: 16px; height: 16px; stroke-width: 2; color: #7BA73B; }

/* Preview card glass-morphism */
.esti-preview-card {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(158, 202, 79, 0.2);
  border-radius: 28px;
  padding: 36px;
  box-shadow: 0 24px 60px rgba(44, 50, 54, 0.08);
  position: relative;
  max-width: 440px;
  justify-self: end;
  width: 100%;
}
@supports not (backdrop-filter: blur(20px)) {
  .esti-preview-card { background: rgba(255, 255, 255, 0.97); }
}
.esti-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.esti-preview-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #7BA73B;
}
.esti-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9ECA4F;
  box-shadow: 0 0 0 0 rgba(158, 202, 79, 0.6);
  animation: estiPulse 1.8s ease-out infinite;
}
@keyframes estiPulse {
  0%   { box-shadow: 0 0 0 0 rgba(158, 202, 79, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(158, 202, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(158, 202, 79, 0); }
}
.esti-preview-eye { color: #7BA73B; display: inline-flex; }
.esti-preview-eye i, .esti-preview-eye svg { width: 18px; height: 18px; }

.esti-preview-meta { margin-bottom: 22px; }
.esti-preview-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #2C3236;
  margin: 0 0 4px;
}
.esti-preview-kpi {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #4A4A4A;
  margin: 0;
}

.esti-preview-value { margin-bottom: 18px; }
.esti-preview-label {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: #4A4A4A;
  margin-bottom: 6px;
}
.esti-preview-number {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  color: #2C3236;
  letter-spacing: -0.02em;
}
.esti-preview-range {
  display: block;
  margin-top: 6px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #7BA73B;
  font-weight: 600;
}

.esti-preview-bar {
  position: relative;
  height: 12px;
  background: #F5F5F5;
  border-radius: 999px;
  margin: 18px 0 24px;
}
.esti-bar-track {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 0;
  bottom: 0;
  background: rgba(158, 202, 79, 0.25);
  border-radius: 999px;
}
.esti-bar-marker {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7BA73B;
  transform: translate(-50%, -50%);
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(44, 50, 54, 0.18);
}
.esti-bar-low  { left: 18%; }
.esti-bar-mid  { left: 50%; background: #9ECA4F; width: 18px; height: 18px; }
.esti-bar-high { left: 82%; }

.esti-preview-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.esti-chip {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #2C3236;
  background: #F5F5F5;
  padding: 6px 12px;
  border-radius: 999px;
}

/* ═══ SECTION 2 — 5 leviers ═══ */
.esti-leviers {
  background: #FFFFFF;
  padding: 100px 0;
}
.esti-leviers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
}
.esti-levier-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E5EBE0;
  border-radius: 24px;
  padding: 32px 28px;
  min-height: 260px;
  box-shadow: 0 4px 20px rgba(44, 50, 54, 0.04);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}
.esti-levier-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(158, 202, 79, 0.15);
  border-color: #9ECA4F;
}
.esti-levier-num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 88px;
  line-height: 1;
  color: rgba(158, 202, 79, 0.12);
  pointer-events: none;
}
.esti-levier-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(158, 202, 79, 0.12);
  color: #7BA73B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.esti-levier-icon i, .esti-levier-icon svg { width: 24px; height: 24px; stroke-width: 2; }
.esti-levier-card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.3;
  color: #2C3236;
  margin: 0 0 10px;
  position: relative;
  z-index: 1;
}
.esti-levier-card p {
  font-family: 'Open Sans', sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: #4A4A4A;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ═══ SECTION 3 — Process ═══ */
.esti-process {
  background: #F5F5F5;
  padding: 100px 0;
}
.esti-timeline {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1180px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  position: relative;
}
.esti-step {
  position: relative;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 32px 24px 28px;
  box-shadow: 0 4px 20px rgba(44, 50, 54, 0.04);
  text-align: center;
}
.esti-step::after {
  content: '';
  position: absolute;
  top: 56px;
  right: -24px;
  width: 24px;
  height: 2px;
  background-image: linear-gradient(to right, rgba(158, 202, 79, 0.4) 50%, transparent 50%);
  background-size: 8px 2px;
  background-repeat: repeat-x;
}
.esti-step:last-child::after { display: none; }
.esti-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #9ECA4F;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 24px;
  margin-bottom: 18px;
}
.esti-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(158, 202, 79, 0.12);
  color: #7BA73B;
  margin-bottom: 14px;
}
.esti-step-icon i, .esti-step-icon svg { width: 20px; height: 20px; stroke-width: 2; }
.esti-step h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: #2C3236;
  margin: 0 0 10px;
}
.esti-step p {
  font-family: 'Open Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: #4A4A4A;
  margin: 0;
}

/* ═══ SECTION 4 — Confidentialité ═══ */
.esti-confid {
  background: #D7EDB0;
  padding: 100px 0;
}
.esti-confid-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
}
.esti-confid-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.esti-confid-visual svg {
  filter: drop-shadow(0 16px 32px rgba(44, 50, 54, 0.12));
}
.esti-confid-text h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  color: #2C3236;
  margin: 16px 0 18px;
}
.esti-confid-text p {
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #2C3236;
  margin: 0 0 24px;
}
.esti-confid-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.esti-confid-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Open Sans', sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  color: #2C3236;
}
.esti-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #7BA73B;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.esti-check i, .esti-check svg { width: 14px; height: 14px; stroke-width: 3; }

/* ═══ SECTION 5 — David Rybak ═══ */
.esti-david {
  background: #FFFFFF;
  padding: 100px 0;
}
.esti-david-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
}
.esti-david-photo-wrap {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto;
}
.esti-david-halo {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(158, 202, 79, 0.20) 0%, rgba(158, 202, 79, 0) 70%);
  z-index: 0;
}
.esti-david-photo {
  position: relative;
  z-index: 1;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 6px solid #FFFFFF;
  box-shadow: 0 24px 60px rgba(44, 50, 54, 0.12);
}
.esti-david-text h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  color: #2C3236;
  margin: 16px 0 6px;
}
.esti-david-role {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #7BA73B;
  margin: 0 0 16px;
}
.esti-david-bio {
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #4A4A4A;
  margin: 0 0 28px;
  max-width: 580px;
}
.esti-david-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.esti-stat {
  background: #F5F5F5;
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
}
.esti-stat-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  color: #7BA73B;
}
.esti-stat-suffix {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: #7BA73B;
  margin-left: 2px;
}
.esti-stat-label {
  display: block;
  margin-top: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #4A4A4A;
}

/* ═══ SECTION 6 — FAQ ═══ */
.esti-faq {
  background: #F5F5F5;
  padding: 100px 0;
}
.esti-faq-list {
  max-width: 820px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(44, 50, 54, 0.04);
  overflow: hidden;
}
.esti-faq-item { border-top: 1px solid #E5EBE0; }
.esti-faq-item:first-child { border-top: none; }
.esti-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #2C3236;
  transition: background 0.2s ease;
}
.esti-faq-item summary:hover { background: #F8FAF5; }
.esti-faq-item summary::-webkit-details-marker { display: none; }
.esti-faq-item summary i, .esti-faq-item summary svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  color: #7BA73B;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.esti-faq-item[open] summary i, .esti-faq-item[open] summary svg { transform: rotate(180deg); }
.esti-faq-item summary:focus-visible { outline: 2px solid #5A9BD5; outline-offset: -2px; }
.esti-faq-body {
  padding: 0 28px 24px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #4A4A4A;
}
.esti-faq-body p { margin: 0; }

/* ═══ SECTION 7 — CTA final dark anthracite ═══ */
.esti-cta-final {
  background: #2C3236;
  padding: 100px 0;
  text-align: center;
}
.esti-cta-eyebrow {
  display: inline-block;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9ECA4F;
  margin-bottom: 18px;
}
.esti-cta-final h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.1;
  color: #FFFFFF;
  margin: 0 auto 18px;
  max-width: 820px;
  letter-spacing: -0.005em;
}
.esti-cta-lead {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: #B5B8BA;
  margin: 0 auto 36px;
  max-width: 580px;
}
.esti-btn-cta-dark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #FFFFFF;
  background: #9ECA4F;
  padding: 18px 40px;
  border-radius: 14px;
  text-decoration: none;
  border: none;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.esti-btn-cta-dark:hover { background: #7BA73B; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(158, 202, 79, 0.40); }
.esti-btn-cta-dark:focus-visible { outline: 2px solid #5A9BD5; outline-offset: 3px; }
.esti-btn-cta-dark i, .esti-btn-cta-dark svg { width: 20px; height: 20px; stroke-width: 2; }

.esti-cta-trust {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
}
.esti-cta-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}
.esti-cta-trust li i, .esti-cta-trust li svg { width: 16px; height: 16px; stroke-width: 2; color: #9ECA4F; }
.esti-cta-footer {
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #B5B8BA;
  max-width: 480px;
}
.esti-cta-footer a { color: #9ECA4F; text-decoration: none; font-weight: 600; }
.esti-cta-footer a:hover { color: #FFFFFF; }

/* ═══ Responsive ═══ */
@media (max-width: 1024px) {
  .esti-hero-grid { grid-template-columns: 1fr; gap: 48px; min-height: auto; align-items: start; }
  .esti-preview-card { justify-self: center; max-width: 480px; }
  .esti-leviers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esti-leviers-grid > .esti-levier-card:nth-child(5) { grid-column: 1 / -1; max-width: 540px; justify-self: center; width: 100%; }
  .esti-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .esti-step::after { display: none; }
  .esti-david-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .esti-hero-title { font-size: clamp(30px, 7vw, 40px); }
  .esti-leviers, .esti-process, .esti-confid, .esti-david, .esti-faq, .esti-cta-final { padding: 60px 0; }
  .esti-confid-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .esti-confid-visual { margin-bottom: 0; }
  .esti-confid-list li { text-align: left; }
  .esti-david-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .esti-david-bio { margin-left: auto; margin-right: auto; }
  .esti-preview-card { padding: 28px; }
  .esti-preview-number { font-size: 42px; }
}
@media (max-width: 540px) {
  .esti-leviers-grid { grid-template-columns: 1fr; }
  .esti-leviers-grid > .esti-levier-card:nth-child(5) { max-width: none; }
  .esti-timeline { grid-template-columns: 1fr; gap: 16px; }
  .esti-david-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .esti-stat { padding: 16px 12px; }
  .esti-stat-num { font-size: 28px; }
  .esti-faq-item summary { padding: 20px 22px; font-size: 16px; }
  .esti-faq-body { padding: 0 22px 22px; }
  .esti-cta-final h2 { font-size: clamp(26px, 7vw, 36px); }
  .esti-btn-cta-dark { padding: 16px 28px; font-size: 16px; }
  .esti-btn { padding: 14px 22px; font-size: 15px; }
  .esti-trust-row { gap: 12px 18px; }
}

/* ════════════════════════════════════════════════════════════════
   SITEWIDE HARMONIZATION
   1. Nav typography — Open Sans 600 (blog.html reference)
   2. Particles canvases — positioning + stacking
   3. Voile backdrop-blur — readable text over particles
   ════════════════════════════════════════════════════════════════ */

/* — 1. Nav typography unified site-wide — */
.site-header .nav-links a,
.site-header .nav-links button.nav-trigger,
.site-header .nav-item > a {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: #2C3236;
}
.site-header .nav-links a:hover,
.site-header .nav-links button.nav-trigger:hover,
.site-header .nav-item > a:hover { color: #7BA73B; }
.site-header .nav-links a.current,
.site-header .nav-links a[aria-current="page"] { color: #7BA73B; }
.site-header .nav-links a.nav-cta {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #FFFFFF;
}
.site-header .nav-links a.nav-cta:hover { color: #FFFFFF; }
@media (max-width: 768px) {
  .site-header .nav-links a,
  .site-header .nav-item > a { font-size: 16px; }
}

/* — 2. Particles canvas positioning (homepage + heroes + sections) — */
.hero, .page-hero, .apropos-hero, .esti-hero, section.has-particles {
  position: relative;
  overflow: hidden;
}
#particles-js,
.particles-bg-section,
[id^="particles-"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 1) 8%,
    rgba(0, 0, 0, 1) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 1) 8%,
    rgba(0, 0, 0, 1) 92%,
    transparent 100%
  );
}
.hero > *:not(#particles-js):not(.particles-bg-section),
.page-hero > *:not(#particles-js):not(.particles-bg-section),
.apropos-hero > *:not(#particles-js):not(.particles-bg-section),
.esti-hero > *:not(#particles-js):not(.particles-bg-section),
section.has-particles > *:not(#particles-js):not(.particles-bg-section) {
  position: relative;
  z-index: 1;
}
#particles-js canvas,
.particles-bg-section canvas,
canvas.particles-js-canvas-el {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero #particles-js,
.hero .particles-bg-section { pointer-events: auto; }

/* — 3. Voile backdrop-blur uniforme derrière TOUS les wrappers texte
       des sections particules — lisibilité garantie site-wide — */
.page-hero > .container,
.apropos-hero > .container,
section.has-particles:not(.particles-bare) > .container,
section.has-particles:not(.particles-bare) > .wrapper,
section.has-particles:not(.particles-bare) > .section-inner,
section.has-particles:not(.particles-bare) > .content-area {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  padding: 36px 44px;
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 14px 36px rgba(44, 50, 54, 0.06);
}
@supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .page-hero > .container,
  .apropos-hero > .container,
  section.has-particles:not(.particles-bare) > .container,
  section.has-particles:not(.particles-bare) > .wrapper,
  section.has-particles:not(.particles-bare) > .section-inner,
  section.has-particles:not(.particles-bare) > .content-area {
    background: rgba(255, 255, 255, 0.92);
  }
}
@media (max-width: 720px) {
  .page-hero > .container,
  .apropos-hero > .container,
  section.has-particles:not(.particles-bare) > .container,
  section.has-particles:not(.particles-bare) > .wrapper,
  section.has-particles:not(.particles-bare) > .section-inner,
  section.has-particles:not(.particles-bare) > .content-area {
    padding: 28px 22px;
    border-radius: 20px;
  }
}

/* Heroes on storytelling-green background: keep voile transparent (no white on green) */
.page-hero.hero-colored > .container,
.page-hero.green > .container {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The esti-hero uses its own glass-morphism system — voile not applied */
.esti-hero > .container {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 1;
}

/* — Opt-out modifier: sections that have cards / iframes shouldn't get
   the full-container voile (cards or iframe would lose their identity).
   Voile is then applied on inner targets (see below). — */
section.has-particles.particles-bare > .container {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-top: 64px;
  padding-bottom: 64px;
  padding-left: clamp(20px, 5vw, 60px);
  padding-right: clamp(20px, 5vw, 60px);
  border-radius: 0;
  box-shadow: none;
}

/* Floating-card effect on annonces grid — cards lift over particles */
section.has-particles .listings-grid > .listing-card {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  backdrop-filter: blur(8px) saturate(115%);
  border: 1px solid rgba(158, 202, 79, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 12px 32px rgba(44, 50, 54, 0.08),
    0 4px 12px rgba(158, 202, 79, 0.06);
  position: relative;
  z-index: 1;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
section.has-particles .listings-grid > .listing-card:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 20px 48px rgba(44, 50, 54, 0.10),
    0 8px 20px rgba(158, 202, 79, 0.12);
  border-color: rgba(158, 202, 79, 0.30);
}
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  section.has-particles .listings-grid > .listing-card {
    background: rgba(255, 255, 255, 0.98);
  }
}

/* Acheter "Première installation" : voile uniquement sur le texte,
   pas sur l'iframe Vimeo (qui doit rester intacte) */
section.has-particles .video-split > .video-caption,
section.has-particles .video-split > .reveal:has(.video-caption) {
  position: relative;
  z-index: 2;
}
section.has-particles .video-split .video-caption {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  padding: 28px 32px;
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 14px 36px rgba(44, 50, 54, 0.06);
}
@supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  section.has-particles .video-split .video-caption {
    background: rgba(255, 255, 255, 0.92);
  }
}

/* A-propos "Nos valeurs" : voile uniquement sur le section-head
   (eyebrow + H2), pas sur la grille de cards Éthique/Performance/Confiance */
section.apropos-valeurs.has-particles .section-head {
  display: inline-block;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  padding: 24px 36px;
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 14px 36px rgba(44, 50, 54, 0.06);
  position: relative;
  z-index: 2;
  margin-left: auto;
  margin-right: auto;
}
@supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  section.apropos-valeurs.has-particles .section-head {
    background: rgba(255, 255, 255, 0.92);
  }
}
section.apropos-valeurs.has-particles .container {
  text-align: center;
}
section.apropos-valeurs.has-particles .valeurs-grid {
  text-align: left;
  margin-top: 32px;
}

/* ════════════════════════════════════════════════════════════════
   BANKS MARQUEE — acheter.html "Financement" section
   Premium horizontal scroll (Stripe / Linear / Notion style)
   ════════════════════════════════════════════════════════════════ */
.banks-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 1) 8%,
    rgba(0, 0, 0, 1) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 1) 8%,
    rgba(0, 0, 0, 1) 92%,
    transparent 100%
  );
}
.banks-marquee-track {
  display: flex;
  align-items: center;
  gap: 32px;
  width: max-content;
  animation: banks-scroll 18s linear infinite;
}
@keyframes banks-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.bank-pill {
  flex-shrink: 0;
  padding: 14px 26px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #2C3236;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid rgba(158, 202, 79, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 14px rgba(44, 50, 54, 0.06);
}
.banks-marquee:hover .banks-marquee-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .banks-marquee-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .banks-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
@media (max-width: 720px) {
  .bank-pill { padding: 12px 22px; font-size: 15px; }
  .banks-marquee-track { gap: 24px; animation-duration: 16s; }
}

/* ════════════════════════════════════════════════════════════════
   ESTI-SIM — Simulateur d'estimation (Interfimo 2025 + CGP 2024)
   Scoped: .esti-sim-* — palette stricte, no !important
   ════════════════════════════════════════════════════════════════ */
.esti-sim-section { background: #FFFFFF; }
.esti-sim {
  max-width: 820px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  border: 1px solid rgba(158, 202, 79, 0.2);
  border-radius: 28px;
  padding: 36px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 16px 40px rgba(44, 50, 54, 0.06);
}
.esti-sim-step { margin-bottom: 28px; }
.esti-sim-step:last-of-type { margin-bottom: 0; }
.esti-sim-step-label {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7BA73B;
  margin: 0 0 14px;
}

/* Toggle CA / Marge */
.esti-sim-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 4px;
  border: 1px solid rgba(158, 202, 79, 0.25);
  box-shadow: 0 2px 8px rgba(44, 50, 54, 0.04);
  flex-wrap: wrap;
  gap: 4px;
}
.esti-sim-tab {
  padding: 10px 22px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #2C3236;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.esti-sim-tab.is-active {
  background: #9ECA4F;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(158, 202, 79, 0.3);
}
.esti-sim-tab:focus-visible { outline: 2px solid #5A9BD5; outline-offset: 3px; }

/* Slider + champ chiffré */
.esti-sim-input-label {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #4A4A4A;
  margin-bottom: 10px;
}
.esti-sim-input-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.esti-sim-input-row input[type="range"] {
  flex: 1;
  height: 6px;
  background: #E5EBE0;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.esti-sim-input-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: #FFFFFF;
  border: 3px solid #9ECA4F;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(44, 50, 54, 0.12);
}
.esti-sim-input-row input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: #FFFFFF;
  border: 3px solid #9ECA4F;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(44, 50, 54, 0.12);
}
.esti-sim-input-row input[type="text"] {
  width: 180px;
  padding: 10px 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #2C3236;
  background: #FFFFFF;
  border: 2px solid #E5EBE0;
  border-radius: 12px;
  text-align: center;
  transition: border-color 0.25s ease;
}
.esti-sim-input-row input[type="text"]:focus {
  border-color: #9ECA4F;
  outline: none;
}
.esti-sim-input-hint {
  margin-top: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: #6C757D;
}

/* Type d'officine */
.esti-sim-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.esti-sim-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #2C3236;
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.2s ease, background 0.25s ease;
  min-height: 88px;
}
.esti-sim-type-btn:hover {
  border-color: rgba(158, 202, 79, 0.4);
}
.esti-sim-type-btn.is-active {
  border-color: #9ECA4F;
  background: rgba(158, 202, 79, 0.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(158, 202, 79, 0.15);
}
.esti-sim-type-btn:focus-visible { outline: 2px solid #5A9BD5; outline-offset: 3px; }
.esti-sim-type-emoji { font-size: 24px; }

/* Résultat */
.esti-sim-result {
  margin-top: 12px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(158, 202, 79, 0.25);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 16px 40px rgba(44, 50, 54, 0.06);
  text-align: center;
}
.esti-sim-result-headline {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7BA73B;
  margin-bottom: 12px;
}
.esti-sim-result-range {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  color: #2C3236;
  margin-bottom: 8px;
  line-height: 1.1;
}
.esti-sim-range-dash {
  color: #9ECA4F;
  margin: 0 12px;
}
.esti-sim-result-realistic {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #4A4A4A;
  margin: 0 0 24px;
}
.esti-sim-result-realistic strong { color: #7BA73B; }

/* Toggle détail */
.esti-sim-toggle-detail {
  background: transparent;
  border: 1px solid rgba(158, 202, 79, 0.3);
  border-radius: 999px;
  padding: 10px 22px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #7BA73B;
  cursor: pointer;
  margin-bottom: 24px;
  transition: background 0.25s ease;
}
.esti-sim-toggle-detail:hover { background: rgba(158, 202, 79, 0.06); }
.esti-sim-toggle-detail::after { content: " ↓"; }
.esti-sim-toggle-detail[aria-expanded="true"]::after { content: " ↑"; }
.esti-sim-toggle-detail:focus-visible { outline: 2px solid #5A9BD5; outline-offset: 3px; }

.esti-sim-detail {
  text-align: left;
  margin: 0 0 24px;
  padding: 20px;
  background: rgba(245, 245, 245, 0.6);
  border-radius: 16px;
}
.esti-sim-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #4A4A4A;
}
.esti-sim-detail-row:last-of-type { border-bottom: none; }
.esti-sim-detail-row strong { color: #2C3236; font-weight: 700; }
.esti-sim-source {
  margin: 16px 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #6C757D;
  font-style: italic;
  line-height: 1.55;
}
.esti-sim-detail-row.esti-sim-detail-pond {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 2px solid rgba(158, 202, 79, 0.3);
}
.esti-sim-detail-row.esti-sim-detail-pond strong { color: #7BA73B; }

/* Apport personnel block */
.esti-sim-apport {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 24px;
  padding: 16px 20px;
  background: rgba(158, 202, 79, 0.08);
  border: 1px solid rgba(158, 202, 79, 0.25);
  border-radius: 14px;
  text-align: left;
}
.esti-sim-apport-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.esti-sim-apport-text { font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 1.5; color: #2C3236; }
.esti-sim-apport-text strong { display: block; font-family: 'Poppins', sans-serif; font-size: 16px; color: #2C3236; margin-bottom: 4px; }
.esti-sim-apport-text strong span[data-apport-amount] { color: #7BA73B; font-weight: 700; }
.esti-sim-apport-sub { color: #4A4A4A; font-size: 13px; }

/* ════════════════════════════════════════════════════════════════
   ESTI-RETRAITEMENTS — Section pédagogique 8 cards + citation
   Scoped: .esti-retraitement-* — palette stricte
   ════════════════════════════════════════════════════════════════ */
.esti-retraitements { background: #FFFFFF; }
.esti-retraitements .container { max-width: 1200px; }

.esti-retraitements-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 40px;
}
@media (max-width: 1024px) {
  .esti-retraitements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .esti-retraitements-grid { grid-template-columns: 1fr; gap: 14px; }
}

.esti-retraitement-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(158, 202, 79, 0.18);
  border-radius: 18px;
  padding: 24px 22px;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.esti-retraitement-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(44, 50, 54, 0.08);
  border-color: rgba(158, 202, 79, 0.35);
}
.esti-retraitement-num {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #9ECA4F;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.esti-retraitement-card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: #2C3236;
  margin: 0 0 10px;
}
.esti-retraitement-card p {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #4A4A4A;
  margin: 0;
}

.esti-retraitements-cta {
  max-width: 720px;
  margin: 0 auto;
}
.esti-retraitements-quote {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(18px, 2vw, 22px);
  font-style: italic;
  line-height: 1.4;
  color: #2C3236;
  background: rgba(158, 202, 79, 0.08);
  border-left: 3px solid #9ECA4F;
  padding: 24px 32px;
  border-radius: 0 16px 16px 0;
  margin: 0;
}
.esti-retraitements-author {
  display: block;
  margin-top: 12px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  color: #7BA73B;
}

/* CTA David */
.esti-sim-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: #9ECA4F;
  color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 14px rgba(158, 202, 79, 0.35);
  transition: background 0.25s ease, transform 0.25s ease;
}
.esti-sim-cta:hover { background: #7BA73B; transform: translateY(-2px); }
.esti-sim-cta:focus-visible { outline: 2px solid #5A9BD5; outline-offset: 3px; }
.esti-sim-cta i, .esti-sim-cta svg { width: 18px; height: 18px; stroke-width: 2; }
.esti-sim-disclaimer {
  margin: 16px auto 0;
  max-width: 520px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #6C757D;
  font-style: italic;
  line-height: 1.55;
}

/* Mobile nav + progression */
.esti-sim-mobile-progress { display: none; }
.esti-sim-mobile-nav { display: none; }

@media (max-width: 720px) {
  .esti-sim { padding: 24px; }
  .esti-sim-type-grid { grid-template-columns: repeat(2, 1fr); }
  .esti-sim-input-row { flex-wrap: wrap; }
  .esti-sim-input-row input[type="text"] { width: 100%; text-align: left; }
  .esti-sim-tab { padding: 10px 16px; font-size: 13px; flex: 1; text-align: center; }
  .esti-sim-toggle { width: 100%; }

  /* Step-by-step mode */
  .esti-sim-mobile-step:not(.is-active) { display: none; }
  .esti-sim-mobile-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
  }
  .esti-sim-mobile-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E0E0E0;
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .esti-sim-mobile-progress-dot.is-active {
    background: #9ECA4F;
    transform: scale(1.2);
  }
  .esti-sim-mobile-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
  }
  .esti-sim-mobile-back,
  .esti-sim-mobile-next {
    padding: 12px 22px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
    min-height: 44px;
  }
  .esti-sim-mobile-back {
    background: transparent;
    border: 1px solid #E5EBE0;
    color: #6C757D;
  }
  .esti-sim-mobile-back:not([disabled]):hover { background: #F5F5F5; color: #2C3236; }
  .esti-sim-mobile-back[disabled] { opacity: 0.4; cursor: not-allowed; }
  .esti-sim-mobile-next {
    background: #9ECA4F;
    color: #FFFFFF;
    border: 1px solid #9ECA4F;
    margin-left: auto;
  }
  .esti-sim-mobile-next:hover { background: #7BA73B; border-color: #7BA73B; }
  .esti-sim-mobile-next[hidden] { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE NAV FIX — hamburger visibility on Android Chrome + small screens
   Was broken: nav-cta stayed visible on mobile, pushing hamburger off-screen
   and forcing the brand name to wrap onto 2 lines.
   ════════════════════════════════════════════════════════════════ */
/* ROOT CAUSE FIX — styles.css declares `.nav-mobile-toggle { display: none }`
   AFTER its own `@media (max-width: 960px) { display: inline-flex }` rule,
   so source-order + equal-specificity made the toggle hidden on ALL viewports.
   Re-declaring the cascade here (styles-overrides.css loads AFTER styles.css)
   restores correct behavior: hidden on desktop, visible on ≤960px. */
.nav-mobile-toggle {
  display: none;
  z-index: 60;
  position: relative;
  color: #2C3236;
  flex-shrink: 0;
}
@media (max-width: 960px) {
  .nav-mobile-toggle { display: inline-flex; }
}
.nav-mobile-toggle:focus-visible {
  outline: 2px solid #5A9BD5;
  outline-offset: 2px;
}

/* Guarantee brand never wraps onto two lines on mobile */
.brand { flex-shrink: 1; min-width: 0; }
.brand-name { white-space: nowrap; }

/* On phone-sized viewports (≤640px), hide the header CTA so the hamburger
   has room. The Prendre RDV button is still available inside the drawer. */
@media (max-width: 640px) {
  .nav-links a.nav-cta { display: none; }
  .brand-name { font-size: 0.98rem; }
  .site-header .container { padding-left: 14px; padding-right: 14px; }
}

/* Enhanced mobile drawer: sticky-friendly, safe-area, smoother slide */
.mobile-drawer {
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer nav a.drawer-highlight {
  background: #9ECA4F;
  color: #FFFFFF;
  text-align: center;
  margin-top: 16px;
  border-radius: 12px;
  border-bottom: none;
  padding: 14px 18px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.mobile-drawer nav a.drawer-highlight:hover,
.mobile-drawer nav a.drawer-highlight:active {
  background: #7BA73B;
  transform: translateY(-1px);
}
.mobile-drawer nav a.drawer-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  margin-top: 10px;
  color: #5A9BD5;
  border: 1.5px solid rgba(90, 155, 213, 0.35);
  border-radius: 12px;
  border-bottom: 1.5px solid rgba(90, 155, 213, 0.35);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.mobile-drawer nav a.drawer-phone:hover,
.mobile-drawer nav a.drawer-phone:active {
  background: #5A9BD5;
  color: #FFFFFF;
}

/* Lock body scroll when drawer is open (added by JS) */
body.mobile-nav-open { overflow: hidden; }

/* Semi-transparent backdrop when drawer is open (JS toggles class) */
.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(44, 50, 54, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 90;
}
.mobile-drawer-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.mobile-drawer { z-index: 100; }

/* ════════════════════════════════════════════════════════════════
   HOMEPAGE FIX — horizontal overflow + hero visual + mobile perf
   Fixes: page shifts left on Android because Three.js canvas overflows
   its container + no global overflow-x safety net.
   ════════════════════════════════════════════════════════════════ */

/* Universal horizontal-overflow safety net (all pages).
   Body remains scrollable vertically; only horizontal is blocked. */
html { overflow-x: hidden; }
body {
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}

/* Guarantee every visual element respects the viewport width */
img, iframe, video, canvas, svg {
  max-width: 100%;
  height: auto;
}
canvas.no-max-width, svg.no-max-width { max-width: none; }

/* Three.js France 3D canvas — constrain to its wrapper */
#france-3d-mount { max-width: 100%; overflow: hidden; }
#france-3d-mount canvas { max-width: 100%; }

/* Hero visual — kept on desktop (≥769px) with full 3D map.
   Removed entirely on mobile (≤768px) per product decision: on phone-sized
   screens the map wastes viewport, pushes real content below the fold, and
   causes CPU/GPU load with limited value. Hero on mobile becomes text-only. */
@media (max-width: 900px) {
  .hero-visual { overflow: hidden; max-width: 100%; }
  .france-3d-wrap { max-width: min(320px, 92vw); }
}
@media (max-width: 768px) {
  .hero-visual,
  .france-3d-wrap,
  #france-3d-mount { display: none; }
  /* Recenter hero-content when the visual column is gone */
  .hero-grid { grid-template-columns: 1fr; }
  .hero-content { text-align: center; margin: 0 auto; max-width: 640px; }
  .hero-content .hero-ctas { justify-content: center; }
}

/* H1 hero — allow soft-break for very long words like ÉTHIQUE on narrow screens */
.hero h1, .hero-content h1, .page-hero h1 {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: manual;
}
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(26px, 7vw, 34px); line-height: 1.15; }
}

/* Prevent long-word overflow anywhere */
h1, h2, h3, p, li { overflow-wrap: break-word; }

/* Mobile perf: disable expensive backdrop-filter on containers with particles */
@media (max-width: 640px) {
  .page-hero > .container,
  .apropos-hero > .container,
  section.has-particles:not(.particles-bare) > .container,
  section.has-particles:not(.particles-bare) > .wrapper,
  section.has-particles:not(.particles-bare) > .section-inner,
  section.has-particles:not(.particles-bare) > .content-area {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.94);
  }
}

/* Font-display: swap fallback for Google Fonts already loaded via @import
   (Google Fonts CSS already sets this by default when using css2 URL,
    kept here as a documented reminder — no rule needed) */

/* ════════════════════════════════════════════════════════════════
   BACK-TO-TOP floating button — sitewide (all 59 pages)
   Appears after 600px scroll, smooth scroll to top on click.
   Positioned bottom-LEFT to avoid overlap with .float-cta (RDV button
   at bottom:24px right:24px / bottom:12px right:12px mobile).
   Cookie banner (z-index 9998) still passes above (this button z-index 900).
   ════════════════════════════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  bottom: 24px;
  left: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #9ECA4F;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(158, 202, 79, 0.35);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.25s ease;
  z-index: 900;
  padding: 0;
  font-family: inherit;
}
.back-to-top svg { display: block; }
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: #7BA73B;
  transform: translateY(-2px);
}
.back-to-top:focus-visible {
  outline: 2px solid #5A9BD5;
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .back-to-top {
    bottom: 20px;
    left: 16px;
    width: 44px;
    height: 44px;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE VERTICAL COMPACTION SITEWIDE
   Screenshots showed excessive whitespace between sections on ≤768px
   (heros, marquee, Investisseurs, CTAs). This block loads LAST in the
   overrides file so it wins over previously declared paddings without
   the need for hard overrides. Desktop ≥769px untouched (all rules inside @media).
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Base section — was 52px 0 (styles-overrides.css:443). Now 36px 0 (~70%). */
  section { padding: 36px 0; }
  section.section-tight { padding: 24px 0; }

  /* Section head — reduce vertical breathing between eyebrow/H2/lead and content */
  .section-head { margin-bottom: 28px; }

  /* Page hero (vendre, acheter, geo, blog etc.) — was 80/36. Compact 60/24. */
  .page-hero { padding-top: 60px; padding-bottom: 24px; }

  /* Hero colored (a-propos, some landing heroes) — was 56/40. Compact 40/28. */
  .hero-colored { padding: 40px 0 28px; }

  /* Legal-style pages — was 56/72. Compact 40/48. */
  .page-legal { padding: 40px 0 48px; }

  /* CTA bands (final Prendre RDV strips) — tighten to 32px 0 */
  section.cta-band-section,
  section[class*="cta-band"] { padding: 32px 0; }

  /* Banks marquee section — the container around the scrolling logos was oversized */
  .banks-marquee { margin-top: 20px; }

  /* Investisseurs section (acheter.html) — inline padding: 56px → 32px */
  #investisseurs > .container > div[style*="padding:56px"],
  #investisseurs > .container > div { padding: 32px 24px; }

  /* Grid gaps sitewide — 24-32px → 16-20px */
  .hero-grid,
  .video-split,
  .value-grid,
  .services-grid,
  .stats-grid,
  .contact-grid,
  .footer-grid,
  .fin-grid,
  .parcours-grid,
  .parcours-cards { gap: 20px; }

  /* Related articles / editor-related-links — tighten */
  .page-related-articles { padding: 24px 0; }
  .article-related-links { margin-top: 24px; }
}

@media (max-width: 480px) {
  section { padding: 28px 0; }
  section.section-tight { padding: 20px 0; }
  .section-head { margin-bottom: 22px; }
  .page-hero { padding-top: 48px; padding-bottom: 20px; }
  .hero-colored { padding: 32px 0 22px; }
  .page-legal { padding: 32px 0 40px; }
  section.cta-band-section,
  section[class*="cta-band"] { padding: 24px 0; }
  #investisseurs > .container > div { padding: 24px 18px; }
  .hero-grid, .video-split, .value-grid, .services-grid,
  .stats-grid, .contact-grid, .footer-grid, .fin-grid,
  .parcours-grid, .parcours-cards { gap: 16px; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE HERO TOP-GAP FIX
   estimer-mon-officine.html had .esti-hero padding-top 80px at ≤768px
   (biggest offender) leaving a huge blank between sticky header and title.
   Other pages had 60px padding-top on .page-hero (previous commit) — also
   too much. Tighten hero top-padding site-wide, keeping desktop untouched.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .page-hero { padding-top: 20px; padding-bottom: 24px; }
  .contact-hero { padding-top: 20px; padding-bottom: 24px; }
  .geo-hero { padding-top: 20px; padding-bottom: 28px; }
}
@media (max-width: 480px) {
  .page-hero { padding-top: 20px; padding-bottom: 20px; }
  .contact-hero { padding-top: 20px; padding-bottom: 20px; }
  .geo-hero { padding-top: 20px; padding-bottom: 24px; }
}

/* Accessibility: skip-link — visually hidden until keyboard focus */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: #2C3236;
  color: #FFFFFF;
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 10000;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 8px;
  outline: 3px solid #9ECA4F;
}

/* ════════════════════════════════════════════════════════════════
   PRIMO-ACCÉDANT PAGE — polish (scoped .primo-* classes)
   ════════════════════════════════════════════════════════════════ */
.primo-quote {
  max-width: 780px;
  margin: 32px auto 0;
  padding: 22px 26px;
  background: rgba(158, 202, 79, 0.08);
  border-left: 3px solid #9ECA4F;
  border-radius: 0 12px 12px 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #2C3236;
  font-style: italic;
}
.primo-quote strong { font-style: normal; color: #7BA73B; display: block; font-size: 0.85rem; letter-spacing: 0.5px; margin-top: 10px; text-transform: uppercase; font-weight: 700; }

.primo-errors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
.primo-error-card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 22px 20px;
  border-top: 3px solid #9ECA4F;
  box-shadow: 0 4px 14px rgba(44, 50, 54, 0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.primo-error-num {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: #9ECA4F;
  line-height: 1;
}
.primo-error-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #2C3236;
  margin: 0;
}
@media (max-width: 900px) {
  .primo-errors-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 600px) {
  .primo-errors-grid { grid-template-columns: 1fr; }
}

.primo-mid-cta {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 36px;
  background: #D7EDB0;
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.primo-mid-cta-text { flex: 1; min-width: 260px; }
.primo-mid-cta-text h3 { font-family: 'Poppins', sans-serif; font-size: 1.35rem; color: #2C3236; margin: 0 0 6px; }
.primo-mid-cta-text p { font-family: 'Open Sans', sans-serif; font-size: 0.98rem; color: #2C3236; margin: 0; opacity: 0.85; }
.primo-mid-cta-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .primo-mid-cta { padding: 24px 20px; }
  .primo-mid-cta-buttons { width: 100%; }
  .primo-mid-cta-buttons .btn { flex: 1; text-align: center; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════
   ESTIMER HERO — hard reset of any residual vertical gap
   Full stack audit (2026-08): the visual "trou" reported was caused by
   the combination of:
   (1) base .esti-hero padding 120px 0 90px = 210px vertical space
       on desktop and cascade fallback on tablet
   (2) .esti-hero-grid min-height:520px + align-items:center = up to
       260px of empty space above content when column collapses
   (3) decorative halos .esti-hero-halo-tl at top:-180px left:-160px
       with 500px×500px pale green gradient = visual "empty" perception
       (halos are position:absolute so they don't push flow, but a large
       pale green blob in the top-left corner reads as empty green space
       to the eye — user perceives it as an unfilled gap)
   Fixes: (a) base padding reduced 60/48, (b) min-height:0 + align-items:
   start on the grid (safer default than 520px+center), (c) halos hidden
   on mobile ≤768px (kept on desktop where they add elegance next to the
   preview card).
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .esti-hero-halo,
  .esti-hero-halo-tl,
  .esti-hero-halo-br { display: none; }
  .esti-hero-grid { min-height: 0; align-items: start; }
  .esti-breadcrumbs { margin-bottom: 16px; }
}

/* Breadcrumbs standalone wrap on estimer-mon-officine.html
   (extracted from .esti-hero when simulator was moved to first section).
   Padding-top 12px = respiration minimale sous le header sticky, sans trou. */
.esti-breadcrumbs-wrap {
  background: #FFFFFF;
  padding: 12px 0 0;
}
.esti-breadcrumbs-wrap .esti-breadcrumbs { margin-bottom: 0; }

/* .esti-sim-section est désormais la 1ère section sous <main> (précédée
   uniquement du breadcrumbs-wrap) — plus besoin du padding-top hérité de
   'section { padding: 52px 0 }' (styles-overrides.css:443) qui servait à
   séparer des sections intercalées. Le padding-bottom (52px hérité) reste
   intact pour la séparation avec .esti-hero en-dessous. */
.esti-sim-section { padding-top: 0; }

/* Kill particles background on .esti-hero — the section is no longer first
   (task 2 moved simulator to position 1), and its decorative canvas was
   creating a visible green empty zone below the shorter text column when
   grid was 2-col with taller preview card, or between text/preview rows
   in 1-col mode. Particles preserved on .page-hero and .apropos-hero
   (all other pages). app.js still injects the div — CSS just hides it. */
.esti-hero > #particles-hero-0,
.esti-hero > [id^="particles-hero-"],
.esti-hero > .particles-bg-section { display: none; }