/* ============================================================
   FFI V6 — PREMIUM DESIGN SYSTEM
   Foncière Financière Immobilière
   GSAP + Lenis + SplitType powered
   ============================================================ */

/* --- CSS RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body { font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-weight: 400; color: var(--text-primary); background: var(--bg-cream); line-height: 1.7; text-rendering: optimizeLegibility; font-feature-settings: "tnum" 1, "kern" 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* --- CUSTOM PROPERTIES --- */
:root {
  --primary-dark: #182C45;   /* prélevé au pixel sur le logo FFI */
  --primary-navy: #142539;   /* variante plus profonde du bleu du logo */
  --primary-medium: #16273A;
  --primary-steel: #2A4a6B;
  --accent-gold: #8A6724;
  --accent-gold-light: #A8842F;
  --accent-gold-bright: #D9B461;
  --accent-champagne: #E4D9BE;
  --accent-brass: #b08d57;
  --bg-cream: #F6F3EC;
  --bg-warm: #EFEAE0;
  --bg-white: #ffffff;
  --text-primary: #182C45;
  --text-secondary: #454E58;
  --text-muted: #626A75;
  --text-light: #b0b0b8;
  --text-on-dark: #f0ede8;
  --border-light: #DED7C9;
  --border-medium: #C4BBA8;
  --success: #6E7681;   /* neutralisé : hors charte */
  --warning: #A8842F;   /* laiton */
  --error: #7C4A2D;     /* terre, pas rouge Bootstrap */

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.5rem;
  --fs-4xl: clamp(2rem, 4vw, 3rem);
  --fs-5xl: 3.5rem;
  --fs-5xl: clamp(2.5rem, 4vw + 1rem, 4.5rem);
  --fs-6xl: 4.5rem;
  --fs-6xl: clamp(3rem, 7vw, 6rem);

  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 1.75rem; --sp-8: 2rem;
  --sp-9: 2.25rem; --sp-10: 2.5rem; --sp-14: 3.5rem;
  --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem;

  --shadow-xs: 0 1px 2px rgba(24,44,69,0.04);
  --shadow-sm: 0 2px 8px rgba(24,44,69,0.06);
  --shadow-md: 0 4px 16px rgba(24,44,69,0.08);
  --shadow-lg: 0 8px 32px rgba(24,44,69,0.10);
  --shadow-xl: 0 16px 48px rgba(24,44,69,0.12);
  --shadow-gold: 0 4px 24px rgba(138,112,53,0.15);
  --shadow-gold-lg: 0 8px 40px rgba(138,112,53,0.20);

  --gradient-hero: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-navy) 40%, var(--primary-medium) 100%);
  --gradient-hero-overlay: linear-gradient(180deg, rgba(24,44,69,0.65) 0%, rgba(13,31,60,0.82) 50%, rgba(24,44,69,0.95) 100%);
  --gradient-gold: linear-gradient(135deg, #A8842F 0%, #8A6724 100%);
  --gradient-gold-subtle: linear-gradient(135deg, rgba(138,112,53,0.06) 0%, rgba(200,164,92,0.03) 100%);
  --gradient-navy: linear-gradient(180deg, var(--primary-navy) 0%, var(--primary-dark) 100%);
  --gradient-section: linear-gradient(180deg, var(--bg-cream) 0%, var(--bg-warm) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);

  --radius-sm: 0px; --radius-md: 2px; --radius-lg: 2px;
  --radius-xl: 2px; --radius-2xl: 3px; --radius-full: 2px;
  --radius-pill: 9999px; /* réservé aux vraies pastilles rondes */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --container-max: 1280px;
  --container-narrow: 960px;
  --container-wide: 1440px;
  --nav-height: 80px;
}

/* --- FILM GRAIN OVERLAY --- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}


/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-primary);
  letter-spacing: -0.015em;
}
h1, h2 { font-feature-settings: "liga" 1, "kern" 1, "onum" 1; }
h1 { font-size: var(--fs-5xl); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-4xl); font-weight: 500; }
h3 { font-size: var(--fs-2xl); font-weight: 500; }
h4 { font-size: var(--fs-xl); font-weight: 600; }
h5 { font-size: var(--fs-lg); font-weight: 500; }

p { margin-bottom: var(--sp-4); color: var(--text-secondary); }
.lead { font-size: var(--fs-lg); line-height: 1.8; color: var(--text-secondary); font-weight: 300; }
.caption {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 500;
  display: inline-block;
}
.overline {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--accent-gold-bright);
}
.text-gold { color: var(--accent-gold-bright); }
.text-gradient {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Split text lines — GSAP reveals these */
.line-mask { overflow: hidden; display: block; }
.line-mask .line-inner {
  display: block;
  transform: translateY(110%);
  will-change: transform;
}

/* --- LAYOUT --- */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--sp-8); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.section { padding: var(--sp-24) 0; position: relative; overflow: hidden; }
.section--sm { padding: var(--sp-16) 0; }
.section--lg { padding: var(--sp-32) 0; }
.section--dark { background: var(--gradient-hero); color: var(--text-on-dark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--bg-cream); }
.section--dark p { color: rgba(240,237,232,0.7); }
.section--warm { background: var(--gradient-section); }
.section--white { background: var(--bg-white); }

/* Section divider line */
.section--dark::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 80px;
  background: linear-gradient(180deg, rgba(200,164,92,0.5) 0%, transparent 100%);
}

.section-header { text-align: center; max-width: 720px; margin: 0 auto var(--sp-16); }
.section-header .caption { margin-bottom: var(--sp-4); }
.section-header h2 { margin-bottom: var(--sp-6); }
.section-header p { color: var(--text-secondary); font-size: var(--fs-md); }
.section--dark .section-header p { color: rgba(240,237,232,0.65); }

.grid { display: grid; gap: var(--sp-8); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* grille centrée : utile quand le nombre de cartes est inférieur au nombre de colonnes */
.grid--centered { justify-content: center; max-width: 900px; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) { .grid--centered { max-width: 100%; } }

.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--col { flex-direction: column; }
.flex--wrap { flex-wrap: wrap; }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

/* --- DIVIDERS --- */
.divider { width: 60px; height: 2px; background: var(--gradient-gold); margin: var(--sp-6) 0; }
.divider--center { margin: var(--sp-6) auto; }
.divider--lg { width: 100px; height: 3px; }

/* --- NAVIGATION --- */
.nav {
  /* Collante et DANS le flux : le bandeau réglementaire la pousse naturellement
     vers le bas, il ne peut plus la recouvrir — y compris sans JavaScript. */
  position: sticky; top: 0; z-index: 1000;
  height: var(--nav-height);
  display: flex; align-items: center;
  transition: box-shadow .4s ease, height .35s var(--ease-out);
  background: var(--primary-dark);
  border-bottom: 1px solid rgba(217,180,97,.22);
}
.nav.scrolled { box-shadow: 0 12px 32px -16px rgba(0,0,0,.55); }
.nav .container { display: flex; align-items: center; justify-content: space-between; max-width: var(--container-wide); }
.nav-logo { display: flex; align-items: center; gap: var(--sp-3); z-index: 1001; }
.nav-logo img { height: 52px; width: auto; display: block; }
.nav-logo-txt {
  display: flex; flex-direction: column; justify-content: center;
  gap: .18em; line-height: 1;
}
.nav-logo-txt strong {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.5rem; font-weight: 700; letter-spacing: .18em;
  color: var(--bg-cream);
}
/* Le nom complet reste au hero et au pied de page : dans la nav il
   entrait en collision avec le premier lien à toutes les largeurs. */
.nav-links { display: flex; align-items: center; gap: var(--sp-1); }
.nav-links a {
  display: inline-flex; align-items: center;
  padding: var(--sp-2) var(--sp-4);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.75rem; font-weight: 400;
  color: rgba(240,237,232,0.65);
  border-radius: var(--radius-sm);
  transition: color 0.3s ease, background 0.3s ease;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: 2px; left: 50%; right: 50%;
  height: 1px; background: var(--accent-gold-bright);
  transition: left 0.4s var(--ease-out), right 0.4s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.active::after { left: var(--sp-4); right: var(--sp-4); }
.nav-links a:hover, .nav-links a.active { color: var(--bg-cream); }
.nav-links a.active { font-weight: 500; }

.nav-cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  background: var(--gradient-gold);
  color: var(--bg-cream) !important;
  font-weight: 500; font-size: var(--fs-sm);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-gold);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold-lg); }
.nav-cta svg { width: 16px; height: 16px; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--sp-2); z-index: 1001; }
.nav-toggle span { width: 24px; height: 2px; background: var(--bg-cream); border-radius: 2px; transition: all 0.4s var(--ease-out); transform-origin: center; }
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- HERO --- */
.hero {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center;
  background: var(--primary-dark); overflow: hidden;
}
.hero--sm { min-height: 70vh; }
.hero--md { min-height: 80vh; }

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; opacity: 0.3;
  will-change: transform;
}
.hero-bg::after { content: ''; position: absolute; inset: 0; background: var(--gradient-hero-overlay); }

/* Diagonal gold line accent */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,164,92,0.3) 20%, rgba(200,164,92,0.5) 50%, rgba(200,164,92,0.3) 80%, transparent 100%);
}

.hero-content {
  position: relative; z-index: 1;
  padding-top: calc(var(--nav-height) + var(--sp-20));
  padding-bottom: var(--sp-20);
}
.hero-content .caption { color: var(--accent-gold-bright); margin-bottom: var(--sp-6); }
.hero-content h1 { color: var(--bg-cream); margin-bottom: var(--sp-8); max-width: 850px; }
.hero-content .lead { color: rgba(240,237,232,0.7); max-width: 600px; margin-bottom: var(--sp-10); font-weight: 300; }

/* Hero KPIs */
.hero-kpis {
  display: flex; gap: var(--sp-16);
  margin-top: var(--sp-16);
  padding-top: var(--sp-12);
  border-top: 1px solid rgba(200,164,92,0.15);
}
.hero-kpi { text-align: left; }
.hero-kpi-value {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--fs-4xl); font-weight: 600;
  color: var(--accent-gold-bright); line-height: 1;
  margin-bottom: var(--sp-2);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}
.hero-kpi-label { font-size: var(--fs-xs); color: rgba(240,237,232,0.45); font-weight: 300; letter-spacing: 0.03em; }

/* --- BUTTONS — arête laiton, angles droits, pas de dégradé --- */
.btn {
  display: inline-flex; align-items: stretch;
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.75rem; font-weight: 600;
  border-radius: 2px;
  cursor: pointer; white-space: nowrap;
  letter-spacing: 0.09em; text-transform: uppercase;
  position: relative; isolation: isolate;
  padding: 0;
  transition: color .35s var(--ease-out), background-color .35s var(--ease-out),
              border-color .35s var(--ease-out);
}
/* le libellé et la flèche sont séparés par un filet — pas de flèche collée au texte */
.btn > .btn-label { padding: 0 var(--sp-8); display: flex; align-items: center; min-height: 3rem; }
.btn > .btn-tip {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; align-self: stretch;
  position: relative; opacity: 1;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.btn > .btn-tip::before {
  content: ''; position: absolute; left: 0; top: 28%; bottom: 28%; width: 1px;
  background: currentColor; opacity: .3;
  transition: top .35s var(--ease-out), bottom .35s var(--ease-out), opacity .35s;
}
.btn:hover > .btn-tip::before { top: 18%; bottom: 18%; opacity: .5; }
.btn > .btn-tip i, .btn > .btn-tip svg { font-size: 1rem; width: 17px; height: 17px; }
.btn:hover > .btn-tip svg { transform: translateX(3px); }
.btn > .btn-tip svg { transition: transform .35s var(--ease-out); }
/* rétro-compatible : boutons sans .btn-label */
.btn:not(:has(.btn-label)) { padding: 0 var(--sp-8); gap: var(--sp-3); align-items: center; min-height: 3rem; }

/* PRIMAIRE — encre, arête laiton à gauche qui envahit le bouton au survol */
.btn--primary {
  background: var(--primary-dark); color: var(--bg-cream);
  border: 1px solid var(--primary-dark);
  box-shadow: none;
  overflow: hidden;
}
.btn--primary::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--accent-gold-light); z-index: -1;
  transition: width .42s var(--ease-out);
}
.btn--primary:hover { color: var(--primary-dark); border-color: var(--accent-gold-light); }
.btn--primary:hover::before { width: 100%; }
.btn--primary:focus-visible { outline: 2px solid var(--accent-gold-bright); outline-offset: 3px; }

/* SECONDAIRE (sur fond sombre) — filet laiton, remplissage discret */
.btn--secondary {
  background: transparent; color: var(--accent-gold-bright);
  border: 1px solid rgba(217,180,97,.38);
}
.btn--secondary:hover { background: rgba(217,180,97,.10); border-color: var(--accent-gold-bright); color: #fff; }
.btn--secondary:focus-visible { outline: 2px solid var(--accent-gold-bright); outline-offset: 3px; }

/* DARK — inverse du primaire */
.btn--dark { background: var(--primary-navy); color: var(--bg-cream); border: 1px solid var(--primary-navy); }
.btn--dark:hover { background: transparent; color: var(--primary-navy); }

/* OUTLINE (sur fond clair) */
.btn--outline {
  background: transparent; color: var(--primary-dark);
  border: 1px solid var(--border-medium);
}
.btn--outline:hover { border-color: var(--accent-gold); color: var(--accent-gold); background: rgba(138,103,36,.05); }
.btn--outline:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; }

/* Sur fond sombre, le texte de --primary-dark devient illisible : on inverse. */
.section--dark .btn--outline, .hero .btn--outline {
  color: var(--bg-cream);
  border-color: rgba(240,237,232,.35);
}
.section--dark .btn--outline:hover, .hero .btn--outline:hover {
  color: var(--accent-gold-bright);
  border-color: var(--accent-gold-bright);
  background: rgba(217,180,97,.08);
}

.btn--lg { font-size: 0.8125rem; }
.btn--lg > .btn-label { padding: 0 var(--sp-10); min-height: 3.5rem; letter-spacing: .1em; }
.btn--lg:not(:has(.btn-label)) { padding: 0 var(--sp-10); min-height: 3.5rem; }
.btn--lg > .btn-tip { width: 3.5rem; }
.btn--sm { font-size: 0.6875rem; letter-spacing: 0.08em; }
.btn--sm > .btn-label { padding: 0 var(--sp-5); min-height: 2.25rem; }
.btn--sm:not(:has(.btn-label)) { padding: 0 var(--sp-5); min-height: 2.25rem; }
.btn--sm > .btn-tip { width: 2.25rem; }

/* Magnetic button wrapper */
.magnetic { display: inline-flex; }

/* --- CARDS --- */
.card {
  background: var(--bg-white);
  border-radius: var(--radius-xl); padding: var(--sp-10);
  border: 1px solid var(--border-light);
  position: relative; overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.5s ease;
  will-change: transform;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(200,164,92,0.2);
}

/* Card shimmer on hover */
.card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(200,164,92,0.04), transparent 40%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.card:hover::before { opacity: 1; }

.card-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-gold-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-6);
  color: var(--accent-gold);
  transition: transform 0.4s var(--ease-out), background 0.4s ease;
}
.card:hover .card-icon { transform: scale(1.1) rotate(-3deg); background: rgba(200,164,92,0.12); }
.card-icon svg { width: 28px; height: 28px; }

.card h3 { font-size: var(--fs-xl); margin-bottom: var(--sp-4); }
.card h4 { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }
.card p { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 0; }

.card--glass {
  background: var(--gradient-glass);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-on-dark);
}
.card--glass h3, .card--glass h4 { color: var(--bg-cream); }
.card--glass p { color: rgba(240,237,232,0.65); }
.card--glass .card-icon { background: rgba(200,164,92,0.1); }
.card--glass:hover { border-color: rgba(200,164,92,0.25); box-shadow: 0 8px 40px rgba(0,0,0,0.3); }

.card--numbered { padding-left: calc(var(--sp-10) + 50px); }
.card--numbered::after {
  content: attr(data-number);
  position: absolute; left: var(--sp-10); top: var(--sp-8);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--fs-6xl); font-weight: 700;
  color: rgba(200,164,92,0.08); line-height: 1;
  font-feature-settings: "tnum" 1;
}

.card--highlight { border: 2px solid rgba(200,164,92,0.4); }
.card--highlight::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-gold);
}

/* --- IMAGE REVEAL --- */
.img-reveal {
  overflow: hidden; border-radius: var(--radius-lg);
  position: relative;
}
.img-reveal img {
  will-change: transform;
  transition: transform 0.8s var(--ease-out);
}
.img-reveal:hover img { transform: scale(1.05); }

/* Clip-path reveal */
.clip-reveal { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease-out); }
.clip-reveal.revealed { clip-path: inset(0 0 0 0); }

/* --- STATS / KPIs --- */
.stat { text-align: center; padding: var(--sp-8); }
.stat-value {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--fs-4xl); font-weight: 600;
  color: var(--primary-navy); line-height: 1;
  margin-bottom: var(--sp-2);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}
.stat-label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; letter-spacing: 0.04em; }
.section--dark .stat-value { color: var(--accent-gold-bright); }
.section--dark .stat-label { color: rgba(240,237,232,0.5); }

/* --- BADGES --- */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-4);
  font-size: var(--fs-xs); font-weight: 500;
  border-radius: var(--radius-full);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.badge--gold { background: rgba(200,164,92,0.1); color: var(--accent-gold); }
.badge--navy { background: rgba(26,58,92,0.06); color: var(--primary-medium); }
.badge--success { background: rgba(45,122,79,0.06); color: var(--success); }

/* --- PROGRESS BARS --- */
.progress { width: 100%; height: 6px; background: rgba(26,58,92,0.06); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar {
  height: 100%; width: 0;
  background: var(--gradient-gold);
  border-radius: var(--radius-full);
  transition: width 1.8s var(--ease-out);
}

/* --- TABLES --- */
.table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-light); }
table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--primary-navy); color: var(--bg-cream);
  padding: var(--sp-4) var(--sp-6);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; text-align: left;
}
tbody td { padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-light); font-size: var(--fs-sm); color: var(--text-secondary); }
tbody tr { transition: background 0.3s ease; }
tbody tr:hover { background: var(--gradient-gold-subtle); }
tbody tr:last-child td { border-bottom: none; }

/* --- ACCORDION --- */
.accordion-item { border-bottom: 1px solid var(--border-light); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-6) 0;
  font-family: 'Crimson Pro', serif; font-size: var(--fs-xl); font-weight: 500;
  color: var(--text-primary); cursor: pointer; text-align: left;
  transition: color 0.3s ease;
}
.accordion-trigger:hover { color: var(--accent-gold); }
.accordion-trigger svg { width: 20px; height: 20px; color: var(--accent-gold); transition: transform 0.5s var(--ease-out); flex-shrink: 0; }
.accordion-item.open .accordion-trigger svg { transform: rotate(180deg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.6s var(--ease-out); }
.accordion-item.open .accordion-content { max-height: 600px; }
.accordion-content-inner { padding-bottom: var(--sp-8); }

/* --- MARQUEE / TICKER --- */
.marquee {
  overflow: hidden; white-space: nowrap;
  padding: var(--sp-6) 0;
  border-top: 1px solid rgba(200,164,92,0.1);
  border-bottom: 1px solid rgba(200,164,92,0.1);
}
.marquee-inner {
  display: inline-flex; gap: var(--sp-12);
  animation: marquee 30s linear infinite;
}
.marquee-item {
  font-family: 'Crimson Pro', serif;
  font-size: var(--fs-3xl); font-weight: 400;
  color: rgba(200,164,92,0.25);
  letter-spacing: 0.02em;
  font-style: italic;
}
.marquee-item .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: rgba(200,164,92,0.3); margin: 0 var(--sp-6); vertical-align: middle; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --- HORIZONTAL RULE WITH TEXT --- */
.hr-text {
  display: flex; align-items: center; gap: var(--sp-6);
  margin: var(--sp-12) 0;
  color: var(--text-muted); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase;
}
.hr-text::before, .hr-text::after { content: ''; flex: 1; height: 1px; background: var(--border-light); }

/* --- FORMS --- */
.form-group { margin-bottom: var(--sp-6); }
.form-label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); margin-bottom: var(--sp-2); }
.form-input, .form-textarea, .form-select {
  width: 100%; padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-base); color: var(--text-primary);
  background: var(--bg-white);
  border: 1.5px solid var(--border-light); border-radius: var(--radius-md);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  outline: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 4px rgba(200,164,92,0.08);
}
.form-textarea { min-height: 140px; resize: vertical; }

/* --- FOOTER --- */
.footer { background: var(--gradient-navy); color: var(--text-on-dark); padding: var(--sp-20) 0 var(--sp-8); position: relative; }
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,164,92,0.3), transparent);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-12); margin-bottom: var(--sp-16); }
.footer-brand p { color: rgba(240,237,232,0.5); font-size: var(--fs-sm); line-height: 1.8; margin-top: var(--sp-4); }
.footer-col h4 {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif; font-size: var(--fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent-gold-bright); margin-bottom: var(--sp-6);
}
.footer-col a { display: block; font-size: var(--fs-sm); color: rgba(240,237,232,0.5); padding: var(--sp-2) 0; transition: color 0.3s ease, transform 0.3s ease; }
.footer-col a:hover { color: var(--bg-cream); transform: translateX(4px); }
.footer-bottom {
  padding-top: var(--sp-8); border-top: 1px solid rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(240,237,232,0.3);
}
.footer-bottom a { color: rgba(240,237,232,0.3); transition: color 0.3s ease; }
.footer-bottom a:hover { color: var(--accent-gold-bright); }

/* --- GSAP REVEAL CLASSES --- */
/* Initial states — GSAP handles the animation */
/* Le contenu est VISIBLE par défaut. Il n'est masqué que si le JS a
   confirmé pouvoir l'animer — il pose alors .ffi-anim sur <html>.
   Sans JS, JS en erreur, ou CDN injoignable : rien ne disparaît. */
.reveal, .reveal--left, .reveal--right, .reveal--scale, .reveal--fade {
  opacity: 1; transform: none;
}
.ffi-anim .reveal { opacity: 0; transform: translateY(40px); }
.ffi-anim .reveal--left { opacity: 0; transform: translateX(-60px); }
.ffi-anim .reveal--right { opacity: 0; transform: translateX(60px); }
.ffi-anim .reveal--scale { opacity: 0; transform: scale(0.9); }
.ffi-anim .reveal--fade { opacity: 0; }

/* Fallback for no-JS */
.no-js .reveal, .no-js .reveal--left, .no-js .reveal--right, .no-js .reveal--scale, .no-js .reveal--fade {
  opacity: 1; transform: none;
}

/* --- IMAGE TREATMENTS --- */
.img-treatment { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.img-treatment img { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.img-treatment:hover img { transform: scale(1.04); }
.img-treatment::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(24,44,69,0.4) 100%);
  pointer-events: none;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-kpis { gap: var(--sp-8); }
}

@media (max-width: 768px) {
  :root { --nav-height: 72px; }
  .container { padding: 0 var(--sp-5); }
  .section { padding: var(--sp-16) 0; }
  .section--lg { padding: var(--sp-20) 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-8); }

  .nav-links {
    position: fixed; inset: 0;
    background: rgba(24,44,69,0.97);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-4);
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .nav-links.open { opacity: 1; pointer-events: all; }
  .nav-links a { font-size: var(--fs-lg); padding: var(--sp-4) var(--sp-8); }
  .nav-links a::after { display: none; }
  .nav-toggle { display: flex; }

  .hero { min-height: auto; padding: var(--sp-32) 0 var(--sp-16); }
  .hero--sm { min-height: auto; }
  .hero-kpis { flex-direction: column; gap: var(--sp-6); }
  .hero-content { padding-top: calc(var(--nav-height) + var(--sp-10)); }

  .footer-bottom { flex-direction: column; gap: var(--sp-4); text-align: center; }
}

@media (max-width: 480px) {
  .container { padding: 0 var(--sp-4); }
  .card { padding: var(--sp-6); border-radius: var(--radius-lg); }
  .btn { padding: var(--sp-3) var(--sp-6); }
}

/* --- UTILITIES --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-4 { margin-top: var(--sp-4); }
.mt-8 { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-8 { margin-bottom: var(--sp-8); }
.mb-12 { margin-bottom: var(--sp-12); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(200,164,92,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-gold); }

/* Selection */
::selection { background: rgba(200,164,92,0.2); color: var(--primary-dark); }

/* Page transition */
.page-transition {
  position: fixed; inset: 0; z-index: 9998;
  background: var(--primary-dark);
  transform: scaleY(0); transform-origin: bottom;
}


/* ── Monogrammes de l'équipe : sobre, sans pictogramme décoratif ── */
.card-icon.monogram {
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--primary-navy), #16233d);
  border: 1px solid rgba(200,164,92,0.45);
  box-shadow: 0 2px 10px rgba(24,44,69,0.18);
}
.card-icon.monogram span {
  font-family: 'Crimson Pro', serif; font-size: 1.32rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--accent-gold-bright);
}

/* ═══════════════════════════════════════════
   SIMULATEUR — trois portes d'entrée
   ═══════════════════════════════════════════ */
.sim {
  max-width: 1080px; margin: 0 auto;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  padding: var(--sp-10);
  box-shadow: none;
}
.sim-inputs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6); margin-bottom: var(--sp-10);
}
.sim-field label {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text-muted); margin-bottom: var(--sp-2);
}
.sim-amount-wrap { position: relative; }
.sim-amount-wrap .sim-euro {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--accent-gold); font-weight: 600; pointer-events: none;
}
.sim-field input[type="number"], .sim-field select {
  width: 100%; padding: 13px 34px 13px 14px;
  border: 1px solid rgba(24,44,69,0.16); border-radius: 8px;
  font-family: inherit; font-size: 1rem; color: var(--primary-navy, #0A1628);
  background: #fff; transition: border-color .18s ease, box-shadow .18s ease;
}
.sim-field select { padding-right: 14px; }
.sim-field input[type="number"]:focus, .sim-field select:focus,
.sim-field input[type="range"]:focus-visible {
  outline: none; border-color: var(--accent-gold, #8A7035);
  box-shadow: 0 0 0 3px rgba(200,164,92,0.16);
}
.sim-field input[type="range"] {
  width: 100%; margin: 14px 0 6px; accent-color: var(--accent-gold, #8A7035);
}
.sim-hint {
  display: block; font-size: var(--fs-xs); color: var(--text-muted);
}

/* cartes des portes */
.sim-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.sim-door {
  border: 1px solid var(--border-light); border-radius: 2px;
  padding: var(--sp-6); background: var(--bg-white);
  display: flex; flex-direction: column;
}
.sim-door--off { opacity: .55; }
.sim-door-head { margin-bottom: var(--sp-4); }
.sim-door-head h3 { font-size: 1.12rem; margin: 0 0 2px; }
.sim-door-sub { font-size: var(--fs-xs); color: var(--text-muted); }
.sim-door-rate {
  padding: var(--sp-4) 0; margin-bottom: var(--sp-4);
  border-top: 1px solid rgba(200,164,92,0.28);
  border-bottom: 1px solid rgba(200,164,92,0.28); text-align: center;
}
.sim-door-rate-val {
  display: block; font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.6rem; font-weight: 700; color: var(--accent-gold, #8A7035); line-height: 1.1;
}
.sim-door-rate-lab { font-size: var(--fs-xs); color: var(--text-muted); }
.sim-door-rate-lab em { font-style: normal; opacity: .8; }
.sim-door-rows { margin: 0; }
.sim-door-rows > div {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed rgba(24,44,69,0.09);
}
.sim-door-rows > div:last-child { border-bottom: none; }
.sim-door-rows dt { font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }
.sim-door-rows dd { margin: 0; font-size: var(--fs-sm); text-align: right; color: var(--primary-navy, #0A1628); }
.sim-door-rows .sim-strong { font-weight: 700; color: var(--accent-gold, #8A7035); }
.sim-flag {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent-gold, #8A7035); background: rgba(200,164,92,0.14);
  padding: 1px 6px; border-radius: 3px;
}
.sim-door-warn, .sim-door-note {
  margin: var(--sp-3) 0 0; font-size: var(--fs-xs);
  color: var(--text-muted);
}
.sim-door-warn { color: #a6504f; font-weight: 600; }

/* panachage */
.sim-blend { margin-top: var(--sp-10); }
.sim-blend-title { font-size: 1.2rem; margin-bottom: 6px; }
.sim-blend-lead { color: var(--text-muted); margin-bottom: var(--sp-5); }
.sim-table-wrap { overflow-x: auto; }
.sim-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.sim-table th, .sim-table td {
  padding: 11px 12px; border-bottom: 1px solid rgba(24,44,69,0.09); text-align: left;
}
.sim-table thead th {
  background: var(--primary-navy, #0A1628); color: #fff;
  font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
.sim-table thead th:first-child { border-radius: 6px 0 0 0; }
.sim-table thead th:last-child { border-radius: 0 6px 0 0; }
.sim-table tfoot td { background: rgba(200,164,92,0.10); border-bottom: none; }
.sim-num { text-align: right !important; font-variant-numeric: tabular-nums; }

.sim-legal {
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid var(--border-light);
  font-size: var(--fs-xs); line-height: 1.65; color: var(--text-muted);
}
.sim-cta {
  margin-top: var(--sp-6); padding: var(--sp-6);
  background: var(--primary-dark);
  border-radius: 2px; display: flex; align-items: center; gap: var(--sp-6);
  flex-wrap: wrap; justify-content: space-between;
}
.sim-cta h3 { color: #fff; font-size: 1.15rem; margin: 0 0 6px; }
.sim-cta p { color: rgba(240,237,232,.72); margin: 0; max-width: 560px; font-size: var(--fs-sm); }

@media (max-width: 900px) {
  .sim { padding: var(--sp-6); }
  .sim-inputs, .sim-doors { grid-template-columns: 1fr; }
  .sim-cta { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   V9 — DIRECTION « CABINET FONCIER »
   Angles droits · l'or est un trait · rythme du plan
   Cette couche affine les composants V6/V8 sans les dupliquer.
   ============================================================ */

/* --- 1. TYPO : chiffres tabulaires partout où il y a des nombres --- */
.hero-kpi-value, .stat-value, .sim-num, .sim-door-rate-val,
td, th, .badge, .kpi-tbl td, .kpi-tbl th, time, .metric {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
h1, h2, h3 { text-wrap: balance; }
p, .lead { text-wrap: pretty; }
.lead { font-weight: 400; color: var(--text-secondary); }

/* Overline : filet laiton au lieu de l'espacement seul */
.overline, .caption {
  color: var(--accent-gold); font-weight: 600;
  font-size: 0.6875rem; letter-spacing: 0.14em;
  position: relative; padding-left: 2.25rem;
}
.overline::before, .caption::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 1.5rem; height: 1px; background: var(--accent-gold-light);
}
.section--dark .overline, .section--dark .caption,
.hero .overline, .hero .caption, .footer .overline, .footer .caption { color: var(--accent-gold-bright); }
.section--dark .overline::before, .section--dark .caption::before,
.hero .caption::before, .hero .overline::before { background: var(--accent-gold-bright); }
.section-header .overline, .section-header .caption,
.text-center .overline, .text-center .caption { padding-left: 0; padding-bottom: .9rem; }
.section-header .overline::before, .section-header .caption::before,
.text-center .overline::before, .text-center .caption::before {
  top: auto; bottom: 0; left: 50%; transform: translateX(-50%); width: 2.25rem;
}

/* --- 2. MOTIF CADASTRE : quadrillage pâle sur les sections claires --- */
.section--warm::before, .section--white.section--plan::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(19,25,32,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(19,25,32,.028) 1px, transparent 1px);
  background-size: 104px 104px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 78%);
}
.section--warm > .container, .section--plan > .container { position: relative; z-index: 1; }

/* Filet de cote : trait horizontal + ticks, en tête de section sombre */
.section--dark::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(217,180,97,.28);
}

/* --- 3. CARTES : angles droits, filet laiton au survol, tick d'angle --- */
.card {
  border-radius: 2px;
  box-shadow: none;
  border-color: var(--border-light);
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.card::after {
  content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--accent-gold-light);
  transition: width .5s var(--ease-out);
  z-index: 2;
}
.card:hover { transform: translateY(-3px); border-color: var(--border-medium); box-shadow: 0 12px 34px rgba(24,44,69,.07); }
.card:hover::after { width: 100%; }
.card::before { display: none; } /* plus de halo radial qui suit la souris */

/* tick d'angle bas-droit — détail de plan */
.card--tick { }
.card--tick > .tick {
  position: absolute; right: 0; bottom: 0; width: 14px; height: 14px;
  border-right: 1px solid var(--accent-gold-light);
  border-bottom: 1px solid var(--accent-gold-light);
  opacity: .5;
}

.card-icon {
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--accent-gold);
  width: 52px; height: 52px;
}
.card:hover .card-icon { transform: none; background: rgba(138,103,36,.06); border-color: var(--accent-gold-light); }
.card--glass .card-icon { border-color: rgba(217,180,97,.28); color: var(--accent-gold-bright); background: transparent; }
.card--glass { border-radius: 2px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Repère de lot au lieu du gros chiffre fantôme */
.card--numbered { padding-left: var(--sp-10); padding-top: calc(var(--sp-10) + 1.4rem); }
.card--numbered::after {
  content: 'LOT ' attr(data-number);
  left: var(--sp-10); top: var(--sp-8); right: auto; bottom: auto;
  width: auto; height: auto;
  font-family: 'Archivo', sans-serif; font-size: .625rem; font-weight: 700;
  letter-spacing: .16em; color: var(--accent-gold);
  background: none; opacity: 1; line-height: 1;
  border-bottom: 1px solid var(--accent-gold-light); padding-bottom: 4px;
  transition: none;
}
.card--numbered:hover::after { width: auto; }
.card--highlight { border: 1px solid var(--accent-gold-light); }
.card--highlight::after { width: 100%; }

/* --- 4. BADGES : rectangle avec arête laiton --- */
.badge {
  border-radius: 0; padding: .34rem .8rem .34rem .7rem;
  border: none; box-shadow: inset 2px 0 0 currentColor;
  font-weight: 600; letter-spacing: .1em; line-height: 1.45;
}
.badge--gold { background: rgba(138,103,36,.08); color: var(--accent-gold); }
.badge--navy { background: rgba(22,39,58,.06); color: var(--primary-medium); }
.badge--success { background: rgba(45,122,79,.08); color: var(--success); }

/* --- 5. JAUGES ET FILETS --- */
.progress, .progress-bar { border-radius: 0; }
.progress { height: 4px; background: rgba(19,25,32,.08); }
.progress-bar { background: var(--accent-gold-light); }
.divider { background: var(--accent-gold-light); height: 1px; width: 48px; }
.divider--lg { width: 80px; height: 2px; }

/* --- 6. TABLEAUX : en-tête encre, filet laiton, lignes fines --- */
.table-wrapper, .sim-table-wrap { border-radius: 2px; }
thead th {
  background: var(--primary-dark); color: #fff;
  border-bottom: 2px solid var(--accent-gold-light);
  font-size: .6875rem; letter-spacing: .11em;
}
tbody tr:hover { background: rgba(138,103,36,.045); }
tbody td { border-bottom: 1px solid var(--border-light); }

/* --- 7. FORMULAIRES --- */
.form-input, .form-textarea, .form-select, .sim-field input, .sim-field select {
  border-radius: 2px !important;
  border: 1px solid var(--border-medium) !important;
  background: var(--bg-white) !important;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.form-input:focus, .form-textarea:focus, .form-select:focus,
.sim-field input:focus, .sim-field select:focus {
  outline: none;
  border-color: var(--accent-gold-light) !important;
  box-shadow: inset 0 -2px 0 var(--accent-gold-light);
}
.form-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--text-muted); }

/* --- 8. NAVIGATION ET FOOTER --- */
.nav-cta { border-radius: 2px !important; }
.nav-links a::after { border-radius: 0; }
.footer { background: var(--primary-dark); }
.footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-gold-light) 38%, transparent 38%);
}

/* --- 9. KPI HERO : colonnes séparées par un filet, pas des blocs flottants --- */
.hero-kpis { border-top: 1px solid rgba(217,180,97,.22); padding-top: var(--sp-8); }
.hero-kpi { position: relative; padding-left: var(--sp-6); }
.hero-kpi + .hero-kpi::before {
  content: ''; position: absolute; left: 0; top: .2rem; bottom: .2rem; width: 1px;
  background: rgba(240,237,232,.13);
}
.hero-kpi-value { color: var(--accent-gold-bright); }
.hero-kpi-label { color: rgba(240,237,232,.55); }

/* --- 10. SIMULATEUR : aligné sur la charte --- */
.sim, .sim-door, .sim-blend, .sim-cta, .sim-legal { border-radius: 2px !important; }
.sim-door { border: 1px solid var(--border-light); background: var(--bg-white); position: relative; }
.sim-door::before {
  content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%;
  background: var(--accent-gold-light);
}
.sim-door-rate-val { color: var(--accent-gold); }
.sim-cta { background: var(--primary-dark); }

/* --- 11. ACCESSIBILITÉ --- */
a:focus-visible, button:focus-visible, summary:focus-visible,
.accordion-trigger:focus-visible {
  outline: 2px solid var(--accent-gold); outline-offset: 3px; border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal--left, .reveal--right, .reveal--scale, .reveal--fade { opacity: 1 !important; transform: none !important; }
}

/* --- 12. RESPONSIVE des ajouts --- */
@media (max-width: 860px) {
  .hero-kpi { padding-left: 0; }
  .hero-kpi + .hero-kpi::before { display: none; }
  .section--warm::before, .section--plan::before { background-size: 68px 68px; opacity: .6; }
}
@media (max-width: 640px) {
  .btn > .btn-tip { width: 2.6rem; }
  .btn--lg > .btn-label { padding: 0 var(--sp-6); }
}

/* ============================================================
   V9 — CONFORMITÉ AMF
   L'avertissement réglementaire est traité comme une annotation
   de document, pas comme une verrue : filet laiton, petites
   capitales, gouttière large. Il fait partie de la charte.
   ============================================================ */

/* --- Bandeau réglementaire haut de page --- */
.reg-bar {
  background: var(--primary-dark);
  color: rgba(240,237,232,.72);
  border-bottom: 1px solid rgba(217,180,97,.22);
  font-size: .75rem; line-height: 1.55;
  position: relative; z-index: 1200;
}
.reg-bar-inner {
  max-width: var(--container-max); margin: 0 auto;
  padding: .55rem var(--sp-8);
  display: flex; align-items: baseline; gap: var(--sp-4);
}
.reg-bar-tag {
  flex: none; font-size: .625rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-gold-bright);
  border-right: 1px solid rgba(217,180,97,.3);
  padding-right: var(--sp-4);
}
.reg-bar p { margin: 0; color: inherit; font-size: inherit; }
.reg-bar a { color: var(--accent-gold-bright); border-bottom: 1px solid rgba(217,180,97,.4); }
.reg-bar a:hover { border-bottom-color: var(--accent-gold-bright); }
.reg-bar-close {
  flex: none; margin-left: auto; color: rgba(240,237,232,.5);
  font-size: 1rem; line-height: 1; padding: 0 .25rem; align-self: center;
}
.reg-bar-close:hover { color: var(--accent-gold-bright); }
/* position:sticky est cassée par overflow-x:hidden sur un ancêtre ; clip ne l'est pas. */
body { overflow-x: clip; }
/* La nav occupe sa place dans le flux : le hero commence dessous.
   Son padding-top n'a donc plus à compenser une nav flottante. */
.hero-content, .hero-grid { padding-top: var(--sp-16); }

/* --- Encart d'avertissement contextuel --- */
.avert {
  border-left: 2px solid var(--accent-gold-light);
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-6);
  margin: var(--sp-8) 0 0;
  font-size: .8125rem; line-height: 1.65;
  color: var(--text-muted);
  max-width: 68ch;
}
.avert-tag {
  display: block; font-size: .625rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent-gold); margin-bottom: .4rem;
}
.avert p { margin: 0 0 .5rem; color: inherit; font-size: inherit; line-height: inherit; }
.avert p:last-child { margin-bottom: 0; }
.avert strong { color: var(--text-secondary); font-weight: 600; }
.section--dark .avert, .footer .avert { border-left-color: rgba(217,180,97,.5); color: rgba(240,237,232,.6); }
.section--dark .avert-tag, .footer .avert-tag { color: var(--accent-gold-bright); }
.section--dark .avert strong, .footer .avert strong { color: rgba(240,237,232,.85); }
.avert--center { margin-left: auto; margin-right: auto; }

/* --- Bloc conformité complet, avant le footer --- */
.conformite { background: var(--bg-warm); border-top: 1px solid var(--border-light); padding: var(--sp-16) 0; }
.conformite-grid {
  display: grid; grid-template-columns: minmax(200px, 260px) 1fr;
  gap: var(--sp-12); align-items: start;
  max-width: var(--container-narrow); margin: 0 auto;
}
.conformite-title {
  font-family: 'Crimson Pro', Georgia, serif; font-size: var(--fs-xl);
  font-weight: 500; line-height: 1.25; color: var(--text-primary);
  padding-top: .15rem;
}
.conformite-title::after {
  content: ''; display: block; width: 40px; height: 1px;
  background: var(--accent-gold-light); margin-top: var(--sp-4);
}
.conformite-body { font-size: .8125rem; line-height: 1.75; color: var(--text-secondary); }
.conformite-body p { margin: 0 0 var(--sp-4); color: inherit; font-size: inherit; }
.conformite-body p:last-child { margin-bottom: 0; }
.conformite-body strong { color: var(--text-primary); font-weight: 600; }
.conformite-body ul { margin: 0 0 var(--sp-4); padding: 0; }
.conformite-body li {
  position: relative; padding-left: var(--sp-6); margin-bottom: .3rem;
}
.conformite-body li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 10px; height: 1px; background: var(--accent-gold-light);
}
.conformite-ref {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--border-light);
  font-size: .6875rem; letter-spacing: .04em; color: var(--text-muted);
}

@media (max-width: 760px) {
  .conformite-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .reg-bar-inner { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: .5rem var(--sp-5); }
  .reg-bar-tag { border-right: none; padding-right: 0; }
  .reg-bar { font-size: .6875rem; }
}

/* --- V9 · correctifs de contraste sur fond sombre --- */
/* Sur fond encre, le primaire s'inverse : aplat laiton, texte encre.
   Sans dégradé, sans ombre — il reste dans la charte. */
.section--dark .btn--primary, .hero .btn--primary,
.footer .btn--primary, .sim-cta .btn--primary, .cta-dark .btn--primary {
  background: var(--accent-gold-light);
  border-color: var(--accent-gold-light);
  color: var(--primary-dark);
}
.section--dark .btn--primary::before, .hero .btn--primary::before,
.footer .btn--primary::before, .sim-cta .btn--primary::before, .cta-dark .btn--primary::before {
  background: var(--bg-cream); width: 0;
}
.section--dark .btn--primary:hover, .hero .btn--primary:hover,
.footer .btn--primary:hover, .sim-cta .btn--primary:hover, .cta-dark .btn--primary:hover {
  color: var(--primary-dark); border-color: var(--bg-cream);
}
.section--dark .btn--primary:hover::before, .hero .btn--primary:hover::before,
.footer .btn--primary:hover::before, .sim-cta .btn--primary:hover::before,
.cta-dark .btn--primary:hover::before { width: 100%; }

/* Badge : le filet fait corps avec le fond */


/* ============================================================
   V9 — SCHÉMAS SVG (registre « plan / structure juridique »)
   ============================================================ */
.ffi-schema { width: 100%; height: auto; display: block; font-family: 'Archivo', sans-serif; }
.ffi-schema text { fill: var(--text-secondary); }

.ffi-schema .s-col text { font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; fill: var(--accent-gold); }
.ffi-schema .s-rule path { stroke: var(--accent-gold-light); stroke-width: 1; opacity: .55; }

.ffi-schema rect { fill: var(--bg-white); stroke: var(--border-medium); stroke-width: 1; }
.ffi-schema .s-door .s-edge { stroke: var(--accent-gold-light); stroke-width: 3; }
.ffi-schema .s-name { font-size: 15px; font-weight: 600; fill: var(--text-primary); }
.ffi-schema .s-sub  { font-size: 12px; fill: var(--text-muted); }
.ffi-schema .s-fig  { font-size: 22px; font-weight: 700; fill: var(--accent-gold);
  font-variant-numeric: tabular-nums; }
.ffi-schema .s-unit { font-size: 11px; fill: var(--text-muted); letter-spacing: .04em; }

.ffi-schema .s-hub rect { fill: var(--primary-dark); stroke: var(--primary-dark); }
.ffi-schema .s-hub text { text-anchor: middle; }
.ffi-schema .s-hub-name { font-family: 'Crimson Pro', Georgia, serif; font-size: 30px;
  font-weight: 500; fill: #fff; letter-spacing: .06em; }
.ffi-schema .s-hub-sub  { font-size: 12px; fill: var(--accent-gold-bright); letter-spacing: .05em; }
.ffi-schema .s-hub-rule { stroke: rgba(217,180,97,.35); stroke-width: 1; }
.ffi-schema .s-hub-meta { font-size: 11px; fill: rgba(240,237,232,.62); }

.ffi-schema .s-asset rect { fill: var(--bg-warm); stroke: var(--border-medium); }

.ffi-schema .s-link path { fill: none; stroke: var(--primary-steel); stroke-width: 1.3; }
.ffi-schema .s-link .s-dash { stroke-dasharray: 5 4; }
.ffi-schema .s-own path { stroke: var(--accent-gold-light); }
.ffi-schema .s-lab { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 600; fill: var(--text-muted); }
.ffi-schema .s-brace path { fill: none; stroke: var(--border-medium); stroke-width: 1; }

/* conteneur du schéma */
.schema-wrap {
  border: 1px solid var(--border-light); background: var(--bg-white);
  padding: var(--sp-10) var(--sp-8) var(--sp-8);
  position: relative;
}
.schema-wrap::before {
  content: ''; position: absolute; left: 0; top: 0; width: 64px; height: 2px;
  background: var(--accent-gold-light);
}
.schema-cap {
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--border-light);
  font-size: .78rem; color: var(--text-muted); line-height: 1.6;
}
.schema-cap b { color: var(--text-secondary); font-weight: 600; }
@media (max-width: 700px) {
  .schema-wrap { padding: var(--sp-6) var(--sp-4) var(--sp-5); overflow-x: auto; }
  .schema-wrap .ffi-schema { min-width: 640px; }
}

/* ============================================================
   V9 — RYTHME VERTICAL
   Les sections ne doivent pas toutes avoir la même densité.
   On alterne : respiration large sur les sections de récit,
   compression sur les sections de données.
   ============================================================ */
.section { padding: var(--sp-24) 0; }
.section--lg { padding: var(--sp-32) 0 var(--sp-24); }
.section--sm { padding: var(--sp-16) 0 var(--sp-12); }
.section--dark { padding: var(--sp-32) 0; }
.section--plan { padding: var(--sp-20) 0 var(--sp-24); }
/* deux sections claires qui se suivent : on supprime la double gouttière */
.section--white + .section--white { padding-top: 0; }
.section--warm + .section--warm { padding-top: var(--sp-12); }

/* En-tête de section : le filet or au lieu du centrage systématique */
.section-header { margin-bottom: var(--sp-14); }
.section-header h2 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.section-header .lead { max-width: 62ch; margin-left: auto; margin-right: auto; }
.section--dark .section-header h2 { color: var(--bg-cream); }
.section--dark .section-header .lead { color: rgba(240,237,232,.68); }

/* Filet de repère en haut des sections claires — le « trait de coupe » */
.section--white > .container::before, .section--plan > .container::before {
  content: ''; display: block; width: 100%; height: 1px;
  background: var(--border-light); margin-bottom: var(--sp-16);
}
.section--white + .section--white > .container::before { display: none; }

/* Hero : plus de tenue, moins de centrage mou */
.hero-content { max-width: 62ch; }
.hero h1 { margin: var(--sp-5) 0 var(--sp-4); }
.hero .lead { max-width: 56ch; }
.hero .flex { margin-top: var(--sp-10); }
.hero-kpis { margin-top: var(--sp-16); }

/* ============================================================
   V9b — CORRECTIFS ISSUS DE LA REVUE DE DIRECTION ARTISTIQUE
   ============================================================ */

/* --- 1. Casser la monotonie des en-têtes de section ---------------
   Trois compositions au lieu d'une seule centrée. */
.section-header { max-width: 860px; }
.section-header h2 { max-width: 26ch; }

/* Variante « fer à gauche + filet de cote » — pour les sections de récit */
.section-header--left {
  text-align: left; max-width: none; margin-left: 0; margin-right: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--sp-10) var(--sp-16); align-items: end;
  padding-bottom: var(--sp-8); border-bottom: 1px solid var(--border-light);
}
.section-header--left h2 { max-width: 16ch; margin: 0; }
.section-header--left .overline { padding-left: 2.25rem; padding-bottom: 0; grid-column: 1; }
.section-header--left .overline::before { top: 50%; bottom: auto; left: 0; transform: none; width: 1.5rem; }
.section-header--left .divider { display: none; }
.section-header--left .lead {
  margin: 0; max-width: 46ch; grid-column: 2; grid-row: 2;
  padding-left: var(--sp-8); border-left: 1px solid var(--accent-gold-light);
}
.section-header--left h2 { grid-column: 1; grid-row: 2; }

/* Variante « compacte » — pour les sections de données */
.section-header--tight { margin-bottom: var(--sp-10); }
.section-header--tight h2 { font-size: var(--fs-3xl); }
.section-header--tight .lead { font-size: var(--fs-base); }

@media (max-width: 860px) {
  .section-header--left { grid-template-columns: 1fr; gap: var(--sp-5); }
  .section-header--left h2, .section-header--left .lead,
  .section-header--left .overline { grid-column: 1; grid-row: auto; }
  .section-header--left .lead { padding-left: var(--sp-5); }
}

/* --- 2. Titres : plus d'orphelins ------------------------------- */
h1, h2, h3, .section-header h2 { text-wrap: balance; }
h1 { hyphens: none; }

/* --- 3. Listes : un vrai marqueur, pas des lignes nues ---------- */
.card ul li, .section ul li, .accordion-content ul li, .prose ul li {
  position: relative; padding-left: 1.35rem; margin-bottom: .38rem;
}
.card ul li::before, .section ul li::before,
.accordion-content ul li::before, .prose ul li::before {
  content: ''; position: absolute; left: 0; top: .68em;
  width: .5rem; height: 1px; background: var(--accent-gold-light);
}
.nav-links li::before, .footer li::before, .sim li::before,
.conformite-body li::before, .breadcrumb li::before { content: none; }
.nav-links li, .footer li, .breadcrumb li { padding-left: 0; }
.section--dark ul li::before, .card--glass ul li::before { background: var(--accent-gold-bright); }

/* --- 4. Icônes de carte : plus de rotation ---------------------- */
.card:hover .card-icon { transform: none !important; }

/* --- 5. Grilles à 5 éléments : la 5e occupe le reste ------------ */
.grid--fill > *:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.grid--fill > *:last-child:nth-child(2n+1) { grid-column: 1 / -1; }

/* --- 6. Simulateur : reste dans la charte ---------------------- */
.sim-door-rate { border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.sim input[type=range] { accent-color: var(--accent-gold); }

/* --- Comparatif de taux (investir) — échelle honnête, libellés lisibles --- */
.cmp { border-left: 2px solid var(--accent-gold-light); }
.cmp-scale { font-size: .75rem; color: rgba(240,237,232,.55); margin: var(--sp-3) 0 0; }
.cmp-row { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--sp-4); margin-bottom: .45rem; }
.cmp-lab { font-size: .8125rem; }
.cmp-val { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-u { font-style: normal; font-size: .6875rem; font-weight: 400; opacity: .62; letter-spacing: .04em; }
.cmp-track { height: 6px; background: rgba(240,237,232,.09); }
.cmp-bar { height: 100%; width: 0; transition: width 1.6s var(--ease-out); }
.cmp-note { margin: var(--sp-8) 0 0; padding-top: var(--sp-5);
  border-top: 1px solid rgba(240,237,232,.14);
  font-size: .78rem; line-height: 1.65; color: rgba(240,237,232,.66); }
.cmp-note strong { color: var(--accent-gold-bright); font-weight: 600; }

/* ============================================================
   V9c — BLOCS DU ONE PAGE TEASER
   ============================================================ */

/* --- Hero : le titre porte le positionnement, l'italique le contraste --- */
.hero h1 em { font-style: italic; color: var(--accent-gold-bright); font-weight: 400; }
.hero-kpi-value { font-size: 1.6rem;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem); white-space: nowrap; }
.hero-kpi-sep { color: rgba(217,180,97,.55); font-weight: 400; margin: 0 .1em; }
.hero-kpi-u { font-size: .58em; font-weight: 500; letter-spacing: .04em;
  color: rgba(240,237,232,.62); margin-left: .18em; }
.hero-kpi-label { line-height: 1.45; }
.hero-kpi-label sup { font-size: .7em; }

/* --- Le Constat : deux colonnes qui s'opposent, séparées par un axe --- */
.constat {
  display: grid; grid-template-columns: 1fr 1px 1fr;
  gap: 0 var(--sp-12); align-items: start;
}
.constat-vs { background: rgba(217,180,97,.28); align-self: stretch; }
.constat-side { padding: var(--sp-2) 0; }
.constat-tag {
  display: block; font-size: .625rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; margin-bottom: var(--sp-5);
  color: rgba(240,237,232,.45);
}
.constat-side--us .constat-tag { color: var(--accent-gold-bright); }
.constat-line {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.5rem;
  font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.3;
  margin-bottom: var(--sp-6); text-wrap: balance;
}
.constat-side--them .constat-line { color: rgba(240,237,232,.52); }
.constat-side--them .constat-line strong { color: rgba(240,237,232,.75); font-weight: 500; }
.constat-side--us .constat-line { color: var(--bg-cream); }
.constat-side--us .constat-line strong { color: var(--accent-gold-bright); font-weight: 500; }
.constat-list { margin: 0; padding: 0; }
.constat-list li {
  position: relative; padding-left: 1.35rem; margin-bottom: .55rem;
  font-size: .875rem; line-height: 1.55; color: rgba(240,237,232,.55);
}
.constat-list li::before {
  content: ''; position: absolute; left: 0; top: .68em;
  width: .5rem; height: 1px; background: rgba(240,237,232,.28);
}
.constat-side--us .constat-list li { color: rgba(240,237,232,.78); }
.constat-side--us .constat-list li::before { background: var(--accent-gold-light); }
@media (max-width: 800px) {
  .constat { grid-template-columns: 1fr; gap: var(--sp-10); }
  .constat-vs { height: 1px; width: 100%; }
}

/* --- Tableau des avantages du cash --- */
.adv-tbl tbody th {
  text-align: left; font-family: 'Archivo', sans-serif; font-size: .875rem;
  font-weight: 600; color: var(--text-primary);
  padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-light);
  width: 34%; vertical-align: top; background: transparent;
  text-transform: none; letter-spacing: 0;
}
.adv-tbl tbody tr.adv-hi th, .adv-tbl tbody tr.adv-hi td {
  background: rgba(138,103,36,.07); color: var(--text-primary); font-weight: 600;
}
.adv-tbl tbody tr.adv-hi th { box-shadow: inset 3px 0 0 var(--accent-gold-light); }
@media (max-width: 640px) {
  .adv-tbl tbody th, .adv-tbl tbody td { display: block; width: auto; }
  .adv-tbl tbody th { border-bottom: none; padding-bottom: 0; }
}

/* --- Les 9 forces structurelles : un bordereau, pas des cartes --- */
.forces-head {
  display: grid; grid-template-columns: 3.25rem minmax(0,1fr) minmax(0,1.15fr);
  gap: var(--sp-6); padding: 0 0 var(--sp-3);
  border-bottom: 1px solid var(--accent-gold-light);
  font-size: .625rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent-gold);
}
.forces-head span:first-child { grid-column: 2; }
.forces { margin: 0; padding: 0; counter-reset: none; }
.force {
  display: grid; grid-template-columns: 3.25rem minmax(0,1fr) minmax(0,1.15fr);
  gap: var(--sp-6); align-items: baseline;
  padding: var(--sp-5) 0; margin: 0;
  border-bottom: 1px solid var(--border-light);
  transition: background .3s ease;
}
.force::before { content: none; }
.force:hover { background: rgba(138,103,36,.045); }
.force-n {
  font-size: .75rem; font-weight: 700; color: var(--accent-gold);
  font-variant-numeric: tabular-nums; letter-spacing: .06em; padding-top: .15em;
}
.force-body { display: contents; }
.force h3 {
  font-family: 'Archivo', sans-serif; font-size: .9375rem; font-weight: 600;
  color: var(--text-primary); margin: 0; line-height: 1.4; text-wrap: balance;
}
.force p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--text-secondary); }
.force:last-child { border-bottom: 1px solid var(--accent-gold-light); }
@media (max-width: 780px) {
  .forces-head { display: none; }
  .force { grid-template-columns: 2.5rem 1fr; gap: var(--sp-4) var(--sp-4); }
  .force-body { display: contents; }
  .force h3 { grid-column: 2; }
  .force p { grid-column: 2; margin-top: .35rem; }
}

/* --- L'horizon : la phrase du teaser, traitée comme une note d'acte --- */
.horizon {
  margin-top: var(--sp-8); padding: var(--sp-6) var(--sp-8);
  background: var(--bg-warm); border-left: 2px solid var(--accent-gold-light);
}
.horizon-tag {
  display: block; font-size: .625rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent-gold); margin-bottom: .5rem;
}
.horizon p { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--text-secondary); }
.horizon strong { color: var(--text-primary); font-weight: 600; }
.horizon em {
  font-style: normal; font-weight: 600; color: var(--accent-gold);
  border-bottom: 1px solid var(--accent-gold-light); padding-bottom: 1px;
}

/* ============================================================
   V9d — PAGE CGP : deux parcours, référencement collectifs
   ============================================================ */

/* --- Aiguillage conseiller / tête de réseau --- */
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.route {
  display: block; padding: var(--sp-8) var(--sp-8) var(--sp-6);
  border: 1px solid var(--border-light); background: var(--bg-white);
  position: relative; transition: border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.route::before {
  content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%;
  background: var(--accent-gold-light); transition: width .4s var(--ease-out);
}
.route:hover { border-color: var(--border-medium); transform: translateY(-3px); }
.route:hover::before { width: 5px; }
.route-tag {
  display: block; font-size: .625rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent-gold); margin-bottom: var(--sp-4);
}
.route h2 {
  font-size: var(--fs-lg); line-height: 1.32; margin-bottom: var(--sp-4);
  max-width: 22ch; text-wrap: balance;
}
.route p { font-size: .875rem; line-height: 1.6; color: var(--text-secondary); margin-bottom: var(--sp-5); }
.route-go {
  font-size: .6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent-gold); border-bottom: 1px solid var(--accent-gold-light); padding-bottom: 2px;
}
.route--alt { background: var(--bg-warm); }
@media (max-width: 780px) { .routes { grid-template-columns: 1fr; } }

/* --- Déroulé d'un référencement --- */
.ref-steps {
  margin-top: var(--sp-12); padding-top: var(--sp-10);
  border-top: 1px solid rgba(217,180,97,.22);
}
.ref-title {
  font-size: var(--fs-lg); color: var(--bg-cream); margin-bottom: var(--sp-8);
}
.ref-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); margin: 0; padding: 0; }
.ref-list li { display: block; padding-left: 0; margin: 0; }
.ref-list li::before { content: none; }
.ref-n {
  display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  color: var(--accent-gold-bright); padding-bottom: .55rem; margin-bottom: .8rem;
  border-bottom: 1px solid rgba(217,180,97,.3);
}
.ref-list strong {
  display: block; font-family: 'Archivo', sans-serif; font-size: .9375rem;
  font-weight: 600; color: var(--bg-cream); margin-bottom: .4rem; line-height: 1.35;
}
.ref-list p { margin: 0; font-size: .8125rem; line-height: 1.6; color: rgba(240,237,232,.62); }
@media (max-width: 900px) { .ref-list { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
@media (max-width: 560px) { .ref-list { grid-template-columns: 1fr; } }

/* ============================================================
   V10 — HERO ÉDITORIAL PLEIN CADRE
   Le contenu occupe la largeur. Le côté droit porte de la
   substance (fiche opérations), pas de la photo vide.
   ============================================================ */

.hero--split { min-height: 100vh; display: block; padding: 0; }
.hero--split .hero-bg img { opacity: .38; object-position: center 58%; }
.hero--split .hero-bg::after {
  background:
    linear-gradient(100deg, rgba(24,44,69,.94) 0%, rgba(24,44,69,.80) 42%, rgba(24,44,69,.52) 72%, rgba(24,44,69,.72) 100%),
    linear-gradient(180deg, rgba(24,44,69,.72) 0%, transparent 26%, transparent 58%, rgba(24,44,69,.88) 100%);
}

.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-16);
  /* la fiche « En cours » a été retirée : le hero tient sur une colonne */
  align-items: end;
  padding-top: calc(var(--nav-height) + var(--sp-20));
  padding-bottom: var(--sp-16);
  min-height: calc(100vh - 150px);
}

.hero-main .overline {
  color: var(--accent-gold-bright); margin-bottom: var(--sp-8);
  display: inline-block;
}
.hero-main h1 {
  color: #fff;
  font-size: 4rem;
  font-size: clamp(2.6rem, 5.6vw, 5.4rem);
  line-height: 1.02; letter-spacing: -.028em;
  font-weight: 400; max-width: 15ch;
  margin: 0 0 var(--sp-8); text-wrap: balance;
}
.hero-main h1 em { font-style: italic; color: var(--accent-gold-bright); font-weight: 400; }
.hero-lead {
  font-family: 'Archivo', sans-serif;
  font-size: 1.1875rem;
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem); line-height: 1.55;
  color: rgba(240,237,232,.82); font-weight: 400;
  max-width: 46ch; margin: 0 0 var(--sp-10);
}
.hero-lead strong { color: #fff; font-weight: 600; }
.hero-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* --- Fiche opérations, côté droit --- */
.hero-fiche {
  background: rgba(24,44,69,.62);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(217,180,97,.26);
  border-left: 2px solid var(--accent-gold-light);
  padding: var(--sp-6) var(--sp-7) var(--sp-6);
}
.fiche-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(217,180,97,.22);
}
.fiche-tag {
  font-size: .625rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-gold-bright);
}
.fiche-date { font-size: .625rem; letter-spacing: .1em; color: rgba(240,237,232,.42); text-transform: uppercase; }
.fiche-list { margin: 0; padding: 0; }
.fiche-list li { padding: 0 0 var(--sp-5); margin: 0 0 var(--sp-5); border-bottom: 1px solid rgba(240,237,232,.10); }
.fiche-list li::before { content: none; }
.fiche-list li:last-child { border-bottom: none; padding-bottom: var(--sp-2); margin-bottom: var(--sp-4); }
.fiche-n {
  display: block; font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.2rem; font-weight: 500; color: #fff; line-height: 1.2;
}
.fiche-loc {
  display: block; font-size: .6875rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-gold-bright); margin: .35rem 0 .5rem;
}
.fiche-k { display: block; font-size: .8125rem; line-height: 1.5; color: rgba(240,237,232,.66); }
.fiche-link {
  display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-gold-bright);
  border-bottom: 1px solid rgba(217,180,97,.45); padding-bottom: 2px;
}
.fiche-link:hover { border-bottom-color: var(--accent-gold-bright); }

/* --- Rail de chiffres, pleine largeur en bas du hero --- */
.hero-rail {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(217,180,97,.24);
  background: rgba(24,44,69,.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hero-rail-in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-top: var(--sp-8); padding-bottom: var(--sp-8);
}
.hero-rail .hero-kpi { padding: 0 var(--sp-8); position: relative; }
.hero-rail .hero-kpi:first-child { padding-left: 0; }
.hero-rail .hero-kpi + .hero-kpi::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: rgba(240,237,232,.14);
}
.hero-rail .hero-kpi-value {
  font-size: 1.5rem;
  font-size: clamp(1.25rem, 1.9vw, 1.8rem); margin-bottom: .55rem;
  color: var(--accent-gold-bright); white-space: nowrap;
}
.hero-rail .hero-kpi-label {
  font-size: .75rem; line-height: 1.45; color: rgba(240,237,232,.6); letter-spacing: 0;
}
.hero--split::after { display: none; }

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-10); align-items: start; min-height: 0; }
  .hero-fiche { max-width: 520px; }
  .hero-rail-in { grid-template-columns: 1fr 1fr; gap: var(--sp-6) 0; }
  .hero-rail .hero-kpi:nth-child(3) { padding-left: 0; }
  .hero-rail .hero-kpi:nth-child(3)::before { display: none; }
}
@media (max-width: 620px) {
  .hero-rail-in { grid-template-columns: 1fr; }
  .hero-rail .hero-kpi { padding-left: 0; }
  .hero-rail .hero-kpi + .hero-kpi::before { display: none; }
  .hero-actions .btn { width: 100%; }
}

/* --- V10b · logo : présence à l'échelle de la marque --- */
:root { --nav-height: 104px; }
.nav-logo { gap: var(--sp-4); }
.nav-logo img { height: 72px; width: auto; display: block; }
.nav-logo span { font-size: 1.35rem; letter-spacing: .16em; }
.nav.scrolled .nav-logo img { height: 58px; transition: height .35s var(--ease-out); }
.nav-logo img { transition: height .35s var(--ease-out); }
.footer-brand img { height: 68px; width: auto; }
@media (max-width: 860px) {
  :root { --nav-height: 76px; }
  .nav-logo img { height: 56px; }
  .nav-logo span { font-size: 1.1rem; }
}

/* ============================================================
   V11 — CORRECTIFS DE RENDU (contrôle visuel 1600 px)
   ============================================================ */

/* --- 1. Grilles : plus jamais de colonne écrasée -------------
   repeat(N, 1fr) force N colonnes même quand la place manque.
   auto-fit + minmax laisse la grille se replier proprement. */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid--5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.grid > * { min-width: 0; }              /* empêche le débordement du contenu */
.card h3, .card h4 { overflow-wrap: break-word; hyphens: none; }

/* --- 2. Icônes de carte : lisibles sur fond sombre ---------- */
.section--dark .card-icon, .card--glass .card-icon,
.section--dark .card-icon i, .card--glass .card-icon i {
  color: var(--accent-gold-bright);
}
.section--dark .card-icon { border-color: rgba(217,180,97,.34); background: rgba(217,180,97,.06); }

/* --- 3. Titres de carte sur fond clair : jamais en champagne */
.card:not(.card--glass) h3, .card:not(.card--glass) h4,
.section--white .card h3, .section--plan .card h3 { color: var(--text-primary); }

/* --- 4. Badges : contraste réel ----------------------------- */
.badge { color: var(--accent-gold); }
.section--dark .badge, .card--glass .badge {
  background: rgba(217,180,97,.14); color: var(--accent-gold-bright);
}

/* --- 5. Repères LOT : au-dessus du contenu, sans chevauchement */
.card--numbered { padding-top: calc(var(--sp-8) + 1.6rem); }
.card--numbered::after { top: var(--sp-6); }

/* --- 6. Formulaires : hauteur de champ et bouton corrects --- */
.form-input, .form-select, .form-textarea {
  min-height: 3rem; padding: .8rem 1rem; line-height: 1.4; width: 100%;
}
.form-select { appearance: none; padding-right: 2.5rem; }
form .btn { min-height: 3.25rem; }
form input[type="hidden"] { display: none !important; }

/* --- 7. Pied de page : liens lisibles ----------------------- */
.footer-bottom, .footer-bottom a { color: rgba(240,237,232,.66); }
.footer-bottom a:hover { color: var(--accent-gold-bright); }
.footer::before { background: var(--accent-gold-light); }

/* --- 8. Chiffres : un seul format sur tout le site ---------- */
.stat-value, .hero-kpi-value, .sim-num, td, th { font-variant-numeric: tabular-nums lining-nums; }

/* --- V11b · grilles en flex : comportement identique partout ---
   CSS Grid avec auto-fit/minmax n'est pas supporté par tous les
   moteurs de rendu ; flex-wrap donne le même résultat sans risque. */
.grid--2, .grid--3, .grid--4, .grid--5 {
  display: flex; flex-wrap: wrap; align-items: stretch;
  grid-template-columns: none;
}
.grid--2 > * { flex: 1 1 22rem; min-width: 0; }
.grid--3 > * { flex: 1 1 18rem; min-width: 0; }
.grid--4 > * { flex: 1 1 14rem; min-width: 0; }
.grid--5 > * { flex: 1 1 12rem; min-width: 0; }
.grid--centered { justify-content: center; }
/* une carte seule sur sa rangée ne doit pas s'étirer sur toute la largeur */
.grid--3 > *, .grid--4 > *, .grid--5 > * { max-width: 100%; }

/* --- V11c · simulateur : deux champs au lieu de trois (profil retiré) --- */
.sim-inputs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }


/* ===========================================================
   V10 · COMPOSITION
   Olivier : « le texte n'est pas justifié ». En français, justifier une
   colonne étroite sans césure crée des rivières ; avec césure agressive,
   ça hache les mots. On justifie donc UNIQUEMENT la prose assez large,
   et la césure ne s'applique jamais aux liens ni aux colonnes courtes.
   =========================================================== */

/* Prose courante : justifiée seulement si la colonne porte assez de signes.
   50ch est le seuil en dessous duquel la justification devient illisible. */
.section p:not(.caption):not(.lead):not(.sim-hint):not([style*="text-align"]),
.accordion-content-inner p,
.conformite-body p {
  text-align: justify;
  text-align-last: left;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 4 3;   /* mot ≥ 7 signes, 4 avant, 3 après */
}

/* Sous 50ch on repasse au fer à gauche : une ligne justifiée courte est laide. */
@container (max-width: 50ch) {
  .section p, .accordion-content-inner p, .conformite-body p { text-align: left; }
}
@media (max-width: 860px) {
  .section p, .accordion-content-inner p, .conformite-body p {
    text-align: left; hyphens: manual;
  }
}

/* Jamais de césure ni de justification ici */
a, .btn, .caption, .nav-links a, .hero-kpi-label, .sim-hint,
h1, h2, h3, h4, h5, h6, .lead, .reg-bar, .reg-bar p {
  hyphens: manual;
  -webkit-hyphens: manual;
}
.reg-bar p, .lead, .section-header p { text-align: left; }
h1, h2, h3, .lead, .section-header p { text-wrap: balance; }
p { text-wrap: pretty; }


/* V10 · nav sur aplat : on remonte le contraste des liens */
.nav-links a { color: rgba(240,237,232,.82); }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--accent-gold-bright); }
.nav-links a.actif, .nav-links a[aria-current="page"] { color: var(--bg-cream); }
.nav-logo { padding: var(--sp-2) 0; }

/* ===========================================================
   V11 · REPRISE DE DIRECTION ARTISTIQUE
   Retour au brief « cabinet foncier » : angles droits, aplats,
   l'or en trait. Ce bloc annule les effets de librairie qui
   faisaient basculer le site du côté « template généré ».
   =========================================================== */

/* 1. Le grain de film salissait toutes les photos et tous les aplats. */
body::after { content: none !important; display: none !important; }

/* 2. Les cartes ne lévitent plus, ne brillent plus, n'ont plus de rayon.
      Un bordereau : un filet en haut, rien d'autre. */
.card {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--border-medium) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: var(--sp-7) 0 var(--sp-8) !important;
}
.card:hover { transform: none !important; box-shadow: none !important; }
.card::before { content: none !important; }
.card--numbered { position: relative; padding-left: var(--sp-16) !important; }
.card--numbered::after {
  content: attr(data-number);
  position: absolute; left: 0; top: var(--sp-7);
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 1.5rem; font-weight: 600; line-height: 1;
  color: var(--accent-gold); font-variant-numeric: tabular-nums;
}
.card h3, .card h4 { margin-top: 0; }

/* 3. Les carrés-icônes clip-art : supprimés. L'aplat doré aussi. */
.card-icon { display: none !important; }

/* 4. L'or redevient un trait. Plus de dégradé, plus de halo. */
.btn--primary {
  background: var(--accent-gold-light) !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 1px solid var(--accent-gold-trait, #A8842F) !important;
  border-radius: 0 !important;
}
.btn { border-radius: 0 !important; }
.section--warm, .section--white { background-image: none !important; }
.section--warm { background: #EFEAE0 !important; }
.section--dark { background: var(--primary-dark) !important; background-image: none !important; }

/* 5. La dernière carte d'une série ne s'étire plus sur toute la largeur. */
.grid--fill > *:last-child:nth-child(3n+1),
.grid--fill > *:last-child:nth-child(2n+1) { grid-column: auto !important; }

/* 6. Le titre du hero était plafonné à 62ch calculés sur 1rem :
      un H1 de 72px tombait en 7 lignes dans 500px. */
.hero-content { max-width: 58rem !important; }
.hero-content h1 { max-width: 18ch; }
.hero-content .lead { max-width: 46ch; }

/* 7. Le textarea était écrasé à 3rem par une règle postérieure. */
.form-textarea { min-height: 170px !important; resize: vertical; }

/* 8. Une seule gouttière : l'axe de gauche cesse de sauter d'une section à l'autre. */
.container, .container--narrow, .container--wide { max-width: 1280px !important; }
.mentions .container--narrow { max-width: 860px !important; }

/* 9. Pastilles dorées pleines : l'or redevient un carré à l'arête,
      et le pictogramme cède la place au numéro de couche. */
[style*="border-radius:50%"][style*="gradient-gold"],
[style*="border-radius: 50%"][style*="gradient-gold"] {
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 1px solid var(--accent-gold-trait, #A8842F) !important;
  width: 56px !important; height: 56px !important;
}
[style*="border-radius:50%"][style*="gradient-gold"] i,
[style*="border-radius: 50%"][style*="gradient-gold"] i,
[style*="border-radius:50%"][style*="gradient-gold"] svg,
[style*="border-radius: 50%"][style*="gradient-gold"] svg {
  color: var(--accent-gold) !important;
  stroke: var(--accent-gold) !important;
  font-size: 1.35rem !important;
  width: 22px !important; height: 22px !important;
}

/* 10. Plus aucun halo doré nulle part. */
[style*="shadow-gold"], [style*="box-shadow:var(--shadow-gold)"] { box-shadow: none !important; }

/* 11. Fiche « métriques clés » : bordereau à filets.
       L'ancienne grille inline se dépliait en une rangée et hachait
       les libellés un mot par ligne. */
.fiche-metriques { border-top: 1px solid var(--accent-gold-trait, #A8842F); padding-top: var(--sp-6); margin-bottom: var(--sp-8); }
.fiche-metriques h4 { font-size: var(--fs-sm); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--sp-5); }
.fiche-metriques dl { display: flex; flex-wrap: wrap; margin: 0; gap: 0; }
.fiche-metriques dl > div { flex: 1 1 44%; min-width: 11rem; padding: var(--sp-4) var(--sp-6) var(--sp-4) 0; border-bottom: 1px solid var(--border-light); }
.fiche-metriques dt { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .35rem; }
.fiche-metriques dd { margin: 0; font-family: 'Crimson Pro', Georgia, serif; font-size: 1.75rem; font-weight: 600; line-height: 1; color: var(--primary-navy); font-variant-numeric: tabular-nums; }
.fiche-metriques dd.or { color: var(--accent-gold); }
.fiche-note { margin: var(--sp-5) 0 0 !important; font-size: var(--fs-sm); color: var(--text-secondary); text-align: left !important; }

/* 12. Marque complète au pied de page : monogramme + nom + signature,
       la baseline en texte plutôt qu'incrustée dans une image. */
.marque { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.marque img { height: 92px; width: auto; display: block; flex: none; }
.marque-txt { display: flex; flex-direction: column; gap: .3rem; line-height: 1.15; }
.marque-txt strong {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 2rem; font-weight: 700; letter-spacing: .2em; color: var(--bg-cream);
}
.marque-txt span {
  font-size: .75rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(240,237,232,.75);
}
.marque-txt em {
  font-family: 'Crimson Pro', Georgia, serif;
  font-style: italic; font-size: 1rem; font-weight: 400;
  color: var(--accent-gold-bright); margin-top: .25rem;
}
@media (max-width: 640px) {
  .marque { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .marque img { height: 76px; }
  .marque-txt strong { font-size: 1.6rem; }
}

/* 13. Nav : monogramme nettement plus grand, comme demandé. */
:root { --nav-height: 116px; }
.nav-logo img { height: 84px !important; }
.nav.scrolled .nav-logo img { height: 66px !important; }
.nav-logo-txt strong { font-size: 1.7rem; }
@media (max-width: 1280px) { :root { --nav-height: 96px; } .nav-logo img { height: 68px !important; } }
@media (max-width: 860px)  { :root { --nav-height: 80px; } .nav-logo img { height: 56px !important; } }

/* 14. Débordements : aucun mot ne sort de son bloc. */
h1, h2, h3, h4, p, li, dd, dt, .btn-label, .card, .fiche-metriques dd {
  overflow-wrap: break-word; word-break: normal; min-width: 0;
}
.grid > *, .card, .fiche-metriques dl > div { min-width: 0; }

/* 15. Le monogramme dessine déjà « FFI » : le mot à côté faisait doublon
       et chevauchait le premier lien. Le monogramme seul, plus grand. */
.nav-logo-txt { display: none !important; }
.nav-logo { gap: 0 !important; margin-right: var(--sp-8); }
.nav-links { gap: var(--sp-6); }
@media (max-width: 1400px) { .nav-links { gap: var(--sp-4); } .nav-links a { font-size: .78rem; } }

/* 16. Neuf entrées + le bouton faisaient déborder la barre : le logo
       était comprimé à zéro. On le fige, et le menu s'adapte. */
.nav .container { gap: var(--sp-6); }
.nav-logo { flex: 0 0 auto !important; margin-right: 0 !important; }
.nav-links { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
.nav-cta { flex: 0 0 auto; }
@media (min-width: 1101px) {
  .nav-links { gap: clamp(.9rem, 1.5vw, 2rem); }
  .nav-links a { font-size: clamp(.68rem, .8vw, .8rem); white-space: nowrap; }
}

/* 17. Neuf entrées, un bouton et un logo : la barre était à 5 px près.
       On élargit le conteneur de la nav et on calibre le logo pour
       qu'il reste grand sans jamais chevaucher le premier lien. */
.nav .container { max-width: 1520px !important; padding-left: var(--sp-8); padding-right: var(--sp-8); }
:root { --nav-height: 104px; }
.nav-logo img { height: 72px !important; }
.nav.scrolled .nav-logo img { height: 58px !important; }
.nav-links { flex-wrap: nowrap; }
.nav-links a { letter-spacing: .1em; }
@media (max-width: 1500px) { .nav-logo img { height: 62px !important; } :root { --nav-height: 92px; } }
@media (max-width: 1200px) { .nav-links a { font-size: .7rem; letter-spacing: .06em; } }

/* 18. La barre passe en grille à trois colonnes : logo | liens | bouton.
       Une colonne de grille ne peut pas déborder sur sa voisine, ce que
       le flex autorisait — d'où le logo recouvert par le premier lien. */
.nav .container {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-8);
}
.nav-links {
  display: flex; flex-wrap: nowrap; justify-content: flex-end;
  min-width: 0; overflow: hidden;
}

/* ===========================================================
   V12 · NAVIGATION À SOUS-MENUS
   Neuf entrées de premier niveau débordaient et rognaient
   « Accueil ». Quatre entrées, trois sous-menus déroulants.
   =========================================================== */
.nav .container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  max-width: 1440px !important;
}
.nav-links { overflow: visible !important; flex: 0 1 auto; }

/* --- le logo : monogramme + nom + signature --- */
.nav-logo { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-4) !important; }
.nav-logo img { height: 64px !important; width: auto; display: block; }
.nav.scrolled .nav-logo img { height: 52px !important; }
.nav-logo-txt { display: flex !important; flex-direction: column; gap: .18rem; line-height: 1.05; }
.nav-logo-txt strong {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.45rem; font-weight: 700; letter-spacing: .2em; color: var(--bg-cream);
}
.nav-logo-txt em {
  font-family: 'Crimson Pro', Georgia, serif; font-style: italic;
  font-size: .78rem; color: var(--accent-gold-bright); white-space: nowrap;
}
@media (max-width: 1180px) { .nav-logo-txt em { display: none; } }

/* --- groupes déroulants --- */
.nav-links { display: flex; align-items: center; gap: var(--sp-7); }
.nav-groupe { position: relative; }
.nav-groupe-tete {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: .8rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(240,237,232,.82);
  transition: color .25s ease;
}
.nav-groupe-tete:hover, .nav-groupe:focus-within .nav-groupe-tete { color: var(--accent-gold-bright); }
.nav-groupe.actif .nav-groupe-tete { color: var(--bg-cream); }
.nav-chevron { width: 10px; height: 6px; transition: transform .25s ease; }
.nav-groupe:hover .nav-chevron, .nav-groupe:focus-within .nav-chevron { transform: rotate(180deg); }

.nav-sous {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  margin-top: var(--sp-4);
  min-width: 22rem; padding: var(--sp-3);
  background: var(--primary-dark);
  border: 1px solid rgba(217,180,97,.28);
  box-shadow: 0 24px 56px -20px rgba(0,0,0,.7);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 1100;
}
/* zone tampon : le curseur peut traverser l'espace tête ↔ panneau */
.nav-groupe::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: var(--sp-5); }
.nav-groupe:hover .nav-sous, .nav-groupe:focus-within .nav-sous,
.nav-groupe-tete[aria-expanded="true"] + .nav-sous {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-sous a {
  display: block; padding: var(--sp-4) var(--sp-5);
  border-left: 2px solid transparent;
  text-transform: none; letter-spacing: 0;
  transition: background .2s ease, border-color .2s ease;
}
.nav-sous a:hover, .nav-sous a:focus-visible, .nav-sous a.actif {
  background: rgba(217,180,97,.07); border-left-color: var(--accent-gold);
}
.nav-sous strong {
  display: block; font-size: .875rem; font-weight: 600;
  color: var(--bg-cream); margin-bottom: .2rem;
}
.nav-sous span { display: block; font-size: .75rem; line-height: 1.5; color: rgba(240,237,232,.58); }
.nav-links a.actif { color: var(--bg-cream); }

/* (sous-menus mobiles : voir le bloc V15 en fin de fichier) */

/* ===========================================================
   V13 · LOGO COMPLET EN TÊTE
   Le lockup d'origine est carré : à 64 px de haut, son lettrage
   devient illisible. On le déplie horizontalement — monogramme,
   puis les trois lignes en texte, à taille lisible.
   Le bleu du site est désormais celui du logo : #182C45.
   =========================================================== */
.nav-logo-txt { gap: .22rem !important; }
.nav-logo-txt strong { font-size: 1.5rem; letter-spacing: .22em; line-height: 1; }
.nav-logo-nom {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: .66rem; font-weight: 600; letter-spacing: .175em;
  text-transform: uppercase; color: rgba(240,237,232,.78);
  white-space: nowrap; line-height: 1;
}
.nav-logo-txt em {
  font-size: .8rem; line-height: 1;
  color: var(--accent-gold-bright); white-space: nowrap;
}
.nav-logo img { height: 70px !important; }
.nav.scrolled .nav-logo img { height: 56px !important; }
:root { --nav-height: 112px; }
.nav.scrolled { --nav-height: 92px; }

/* pas de filet : il se lisait comme un soulignement de « FONCIÈRE ». */
.nav-logo-nom { padding-bottom: .14rem; }

@media (max-width: 1240px) { .nav-logo-nom, .nav-logo-txt em { display: none; } }
@media (max-width: 1024px) { .nav-logo img { height: 56px !important; } :root { --nav-height: 84px; } }

/* ===========================================================
   V14 · LIVRAISON — HERO
   La nav est dans le flux : le hero n'a plus à réserver sa
   hauteur, ni à pousser son contenu tout en bas d'un viewport.
   Hauteur juste, contenu centré, respiration mesurée.
   =========================================================== */
.hero { min-height: 0 !important; }
.hero-grid, .hero-content {
  min-height: 0 !important;
  align-items: center !important;
  padding-top: clamp(3rem, 6vw, 5.5rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5.5rem) !important;
}
.hero--sm .hero-content { padding-top: clamp(3.5rem, 7vw, 6rem) !important; padding-bottom: clamp(3.5rem, 7vw, 6rem) !important; }

/* ===========================================================
   V15 · LIVRAISON — RESPONSIVE
   =========================================================== */

/* --- tablette 769–1024 : la barre reste horizontale, les sous-menus
       restent déroulants, on gagne de la place sur le logo et les libellés --- */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-logo-nom, .nav-logo-txt em { display: none; }
  .nav-logo img { height: 52px !important; }
  :root { --nav-height: 80px; }
  .nav-links { gap: var(--sp-4); }
  .nav-groupe-tete, .nav-links > a { font-size: .72rem; letter-spacing: .08em; }
  .nav-cta { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .nav-sous { min-width: 18rem; }
}

/* --- mobile ≤ 768 : menu plein écran, groupes dépliés, défilable --- */
@media (max-width: 768px) {
  .nav-links {
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: calc(var(--nav-height) + var(--sp-6)) var(--sp-6) var(--sp-10) !important;
    gap: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links > a, .nav-groupe-tete {
    display: block; width: 100%; text-align: left;
    font-size: 1.05rem !important; letter-spacing: .1em;
    padding: var(--sp-4) 0 !important;
    border-bottom: 1px solid rgba(217,180,97,.18);
    color: var(--bg-cream);
  }
  .nav-groupe { width: 100%; }
  .nav-groupe-tete { pointer-events: none; }        /* simple intitulé de section */
  .nav-chevron { display: none; }
  .nav-groupe::after { content: none; }
  .nav-sous {
    position: static; transform: none; opacity: 1; visibility: visible;
    pointer-events: auto; min-width: 0; margin: 0; padding: 0 0 var(--sp-3) var(--sp-4);
    background: none; border: 0; box-shadow: none;
  }
  .nav-sous a {
    padding: var(--sp-3) 0 var(--sp-3) var(--sp-4) !important;
    font-size: 1rem !important;
    border-left: 2px solid rgba(217,180,97,.25); border-bottom: 0;
  }
  .nav-sous a strong { font-size: 1rem; }
  .nav-sous a span { font-size: .78rem; }
  .nav-links .nav-cta {
    margin-top: var(--sp-8); text-align: center;
    justify-content: center; border-bottom: 0;
  }
  /* le hero n'a plus de nav flottante à compenser */
  .hero { padding: 0 !important; }
  .hero-content, .hero-grid { padding-top: var(--sp-12) !important; padding-bottom: var(--sp-12) !important; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.75rem); }
  /* logo : monogramme + sigle seulement */
  .nav-logo-nom, .nav-logo-txt em { display: none; }
  .nav-logo-txt strong { font-size: 1.2rem; }
  .nav-logo img { height: 48px !important; }
  :root { --nav-height: 72px; }
  /* tableaux, schéma et fiches ne débordent jamais de l'écran */
  .table-wrapper, .schema-wrap, .sim-table-wrap { overflow-x: auto; }
  img, svg { max-width: 100%; height: auto; }
  .fiche-metriques dl > div { flex-basis: 100%; }
  .hero-kpis { flex-direction: column; }
}
@media (max-width: 480px) {
  .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .btn--lg { width: 100%; justify-content: center; }
  .flex--wrap > .btn { width: 100%; }
}

/* ===========================================================
   V16 · LIVRAISON — MOBILE (correctifs bloquants)
   =========================================================== */
@media (max-width: 768px) {
  /* 1. Le bandeau réglementaire : en colonne, le texte reprend toute la largeur.
        En ligne, le paragraphe était écrasé à un caractère par ligne. */
  .reg-bar-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "tag close" "txt txt";
    gap: .25rem var(--sp-4);
    padding: .6rem var(--sp-5);
    align-items: center;
  }
  .reg-bar-tag { grid-area: tag; border-right: 0; padding-right: 0; }
  .reg-bar p   { grid-area: txt; min-width: 0; font-size: .6875rem; line-height: 1.5; }
  .reg-bar-close { grid-area: close; margin-left: 0; }

  /* 2. Le menu plein écran : caché tant qu'il n'est pas ouvert, sans dépendre
        d'opacity seule ni du raccourci inset. */
  .nav-links {
    position: fixed !important;
    top: 0; right: 0; bottom: 0; left: 0;
    display: flex !important; flex-direction: column !important;
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity .3s ease, visibility .3s;
    z-index: 1050;
  }
  .nav-links.open { visibility: visible; opacity: 1; pointer-events: auto; }
  .nav-toggle { display: flex !important; margin-left: auto; z-index: 1100; }
  .nav .container { gap: var(--sp-4); }
  /* rien ne déborde à droite */
  html, body { overflow-x: clip; max-width: 100vw; }
  .container { max-width: 100%; }
}

/* ===========================================================
   V17 · RECETTE FINALE — corrections bloquantes
   =========================================================== */
/* 3-4. Toute grille inline restante se replie sur mobile, quoi qu'il arrive */
@media (max-width: 768px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .grid, .grid--2, .grid--3, .grid--4 { display: flex !important; flex-direction: column !important; }
  .grid > * { flex-basis: auto !important; width: 100% !important; min-width: 0; }
}
/* 5. Les boutons ne tronquent plus leur libellé : retour à la ligne autorisé sur mobile */
@media (max-width: 768px) {
  .btn, .btn-label { white-space: normal !important; text-align: center; }
  .btn { line-height: 1.3; padding-top: .9rem !important; padding-bottom: .9rem !important; height: auto !important; }
  .btn-tip { flex: none; }
}
/* 6. Justification : fer à gauche sur mobile et dans toute colonne étroite, avec une
      spécificité qui l'emporte sur la règle de justification */
@media (max-width: 860px) {
  .section p, .section p:not(.caption), .accordion-content-inner p, .conformite-body p,
  .card p, .nav-sous p { text-align: left !important; hyphens: manual !important; }
}
.card p, .grid--3 p, .grid--4 p, .fiche-metriques p, .sim-door p, .hero p { text-align: left !important; }
/* 7. En-têtes de section « scindés » : le trait et le paragraphe se calent sur le titre */
.section-header--left { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-6) var(--sp-16); align-items: start; }
.section-header--left .caption, .section-header--left .overline { grid-column: 1; margin: 0 0 var(--sp-2); }
.section-header--left h2 { grid-column: 1; margin: 0; }
.section-header--left .divider { grid-column: 1; margin: var(--sp-5) 0 0; width: 3rem; }
.section-header--left p, .section-header--left .lead { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; }
@media (max-width: 860px) {
  .section-header--left { display: block; }
  .section-header--left .divider { margin-bottom: var(--sp-5); }
}
/* 12. Tableau « avantage / impact » : lignes empilées sur mobile */
@media (max-width: 768px) {
  .table-wrapper table, .table-wrapper tbody, .table-wrapper tr, .table-wrapper td { display: block; width: 100%; }
  .table-wrapper thead { display: none; }
  .table-wrapper tr { border-bottom: 1px solid var(--border-light); padding: var(--sp-3) 0; }
  .table-wrapper td { padding: .25rem 0 !important; border: 0 !important; }
  .table-wrapper td:first-child { font-weight: 600; color: var(--text-primary); }
}
/* 18. Menu mobile ouvert : le bandeau réglementaire passe dessous */
@media (max-width: 768px) {
  body:has(.nav-links.open) .reg-bar { visibility: hidden; }
  .nav-links.open { padding-top: calc(var(--nav-height) + var(--sp-8)) !important; }
}
/* 25. Le select ressemble à un champ texte : on lui rend son chevron */
.form-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A6724' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px;
  padding-right: 2.5rem;
}
/* 9. Le schéma de structure sur mobile : défilable horizontalement, avec une indication */
@media (max-width: 768px) {
  .schema-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; padding-bottom: var(--sp-6); }
  .schema-wrap svg { min-width: 900px; width: 900px; height: auto; }
  .schema-wrap::after {
    content: "← Faites glisser pour voir le schéma en entier →";
    display: block; text-align: center; font-size: .75rem; color: var(--text-muted);
    margin-top: var(--sp-3); letter-spacing: .04em;
  }
}
/* 10. Contis : 4 indicateurs → 2×2, plus d'orphelin */
.grid--3.indicateurs-contis { grid-template-columns: repeat(2,1fr) !important; }
/* 13. EQOS Forecast de Le Teich : valeurs lisibles, mini-cartes distinctes du fond */
.section--dark [style*="var(--success)"], .section--dark .valeur-forecast { color: var(--accent-gold-bright) !important; }
/* 14. Un « sur demande » en corps de gros chiffre se casse : on le réduit */
.stat-value:not([data-count]), .hero-kpi-value:not([data-count]) { font-size: 1.25rem !important; line-height: 1.3; }

/* ===== V18 — finitions livraison ===== */
@media (max-width: 860px) {
  .section-header--left .lead, .section-header--left p { padding-left: 0 !important; border-left: 0 !important; max-width: none; }
}
.sim-door-rows > div dd, .sim-strong { white-space: nowrap; }
.sim-door-rows > div { gap: var(--sp-3); }
@media (max-width: 480px) {
  .sim-door-rows > div { flex-wrap: wrap; }
  .sim-door-rows > div dt { flex: 1 1 100%; }
  .sim-door-rows > div dd { flex: 1 1 100%; text-align: left; }
}