/* V2.1 (19 septembre 2026) : seuls les très grands titres sont réduits d'environ 7 %.
     Le corps de texte n'est pas réduit : il est porté à 17 px et plus en fin de fichier.
     Aucune taille sous 13 px. Les composants V2 et V2.1 se trouvent en fin de fichier. */

  /* Fraunces : fonte variable : une seule requête couvre toutes les graisses */
  @font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/fraunces-normal.woff2') format('woff2-variations');
  }
  @font-face {
    font-family: 'Fraunces';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/fraunces-italic.woff2') format('woff2-variations');
  }

  /* Source Serif 4 : corps de texte */
  @font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/source-serif-400.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Source Serif 4';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/source-serif-400-italic.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Source Serif 4';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/source-serif-600.woff2') format('woff2');
  }

  /* Inter : étiquettes, menus, boutons */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter-400.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/inter-500.woff2') format('woff2');
  }

  :root {
    --bleu-nuit: #0B1F3A;
    --or-vieilli: #B8924A;
    --or-profond: #7A5C26;  /* fusionné avec --or-lisible */
    --creme-papier: #FAF7F2;
    --creme-chaude: #F4EFE6;
    --ardoise: #2C3E55;

    --font-display: 'Fraunces', Cambria, Georgia, serif;
    --font-narrative: 'Source Serif 4', Cambria, Georgia, serif;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --nav-height: 78px;
    --container-max: 1240px;
    --container-pad: 60px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-ui);
    font-weight: 400;
    color: var(--ardoise);
    background: var(--creme-papier);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ============================================================
     HEADER : sticky en web, neutralisé en print pour éviter la
     superposition de contenu sous le header lors du rendu PDF.
     ============================================================ */
  .nav-wrapper {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(11, 31, 58, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(184, 146, 74, 0.18);
  }
  .nav {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
  }
  .nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--creme-papier);
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.02em;
  }
  .nav-brand .v-symbol {
    width: 46px; height: 58px;
    flex-shrink: 0;
  }
  .nav-brand em {
    font-style: italic;
    color: var(--or-vieilli);
    font-weight: 400;
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
  }
  .nav-links a {
    color: var(--creme-papier);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--or-vieilli); }
  .nav-cta {
    background: var(--or-vieilli);
    color: var(--bleu-nuit);
    padding: 12px 22px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s;
    border: 1px solid var(--or-vieilli);
  }
  .nav-cta:hover { background: var(--or-profond); border-color: var(--or-profond); }

  /* ============================================================
     SPACER UNIVERSEL après le header fixed.
     Évite que la première section glisse sous le header.
     ============================================================ */
  .nav-spacer { height: var(--nav-height); }

  /* ============================================================
     SECTIONS : alternance bleu nuit / crème
     ============================================================ */
  section {
    padding: 100px 0;
    position: relative;
  }
  .container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
  }
  .section-bleu { background: var(--bleu-nuit); color: var(--creme-papier); }
  .section-creme { background: var(--creme-papier); color: var(--ardoise); }
  .section-creme-chaude { background: var(--creme-chaude); color: var(--ardoise); }

  /* ============================================================
     TYPOGRAPHIE : eyebrows, titres, italiques or, paragraphes
     ============================================================ */
  .eyebrow {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--or-vieilli);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .eyebrow::before {
    content: '';
    display: inline-block;
    width: 44px;
    height: 1px;
    background: var(--or-vieilli);
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.005em;
  }
  h1 {
    font-size: clamp(41px, 5.39vw, 72.5px);
    margin-bottom: 32px;
  }
  h1 em {
    font-style: italic;
    color: var(--or-vieilli);
    font-weight: 400;
  }
  h2 {
    font-size: clamp(33.5px, 3.91vw, 52px);
    margin-bottom: 28px;
  }
  h2 em {
    font-style: italic;
    color: var(--or-vieilli);
    font-weight: 400;
  }
  h3 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 16px;
  }
  h3 em {
    font-style: italic;
    color: var(--or-vieilli);
    font-weight: 400;
  }

  .lead {
    font-family: var(--font-narrative);
    font-size: 22px;
    line-height: 1.55;
    font-style: italic;
    color: var(--or-vieilli);
    margin-bottom: 32px;
  }
  .section-bleu .lead { color: var(--or-vieilli); }

  p { font-size: 17px; line-height: 1.7; margin-bottom: 18px; }
  p em { color: var(--or-vieilli); font-style: italic; }
  .section-bleu p em, .section-bleu h2 em { color: var(--or-vieilli); }

  /* ============================================================
     HERO : proposition de valeur V4 en thèse centrale
     ============================================================ */
  .hero {
    background: var(--bleu-nuit);
    color: var(--creme-papier);
    padding: 90px 0 110px 0;
    position: relative;
    overflow: hidden;
  }
  .hero::after {
    content: '';
    position: absolute;
    right: -200px;
    bottom: -200px;
    width: 700px;
    height: 700px;
    border: 1px solid rgba(184, 146, 74, 0.10);
    border-radius: 50%;
    pointer-events: none;
  }
  .hero::before {
    content: '';
    position: absolute;
    right: -100px;
    bottom: -100px;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(184, 146, 74, 0.06);
    border-radius: 50%;
    pointer-events: none;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .hero-title {
    font-size: clamp(43px, 4.84vw, 67px);
    line-height: 1.08;
    margin-bottom: 24px;
  }
  .hero-title em { font-style: italic; color: var(--or-vieilli); font-weight: 400; }

  /* La proposition de valeur V4 : en thèse, immédiatement sous le H1 */
  .value-prop {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--or-vieilli);
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.45;
    margin: 28px 0 36px 0;
    letter-spacing: 0.002em;
  }

  .hero-subtitle {
    font-family: var(--font-narrative);
    font-size: 20px;
    font-style: italic;
    line-height: 1.55;
    color: rgba(250, 247, 242, 0.88);
    margin-bottom: 44px;
    max-width: 580px;
  }

  .hero-ctas {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
  }
  .btn-primary, .btn-secondary {
    padding: 18px 30px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s;
    display: inline-block;
    cursor: pointer;
    border: 1px solid;
  }
  .btn-primary {
    background: var(--or-vieilli);
    color: var(--bleu-nuit);
    border-color: var(--or-vieilli);
  }
  .btn-primary:hover {
    background: var(--or-profond);
    border-color: var(--or-profond);
    color: var(--creme-papier);
  }
  .btn-secondary {
    background: transparent;
    color: var(--creme-papier);
    border-color: rgba(250, 247, 242, 0.45);
  }
  .btn-secondary:hover {
    border-color: var(--or-vieilli);
    color: var(--or-vieilli);
  }

  /* Encadré-pivot à droite du hero */
  .hero-callout {
    background: rgba(244, 239, 230, 0.04);
    border-left: 2px solid var(--or-vieilli);
    padding: 38px 36px;
    backdrop-filter: blur(2px);
  }
  .hero-callout .eyebrow {
    margin-bottom: 18px;
    font-size: 13px;
  }
  .hero-callout .callout-statement {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 400;
    color: var(--creme-papier);
    line-height: 1.3;
    margin-bottom: 24px;
    letter-spacing: -0.005em;
  }
  .hero-callout .callout-statement em {
    font-style: italic;
    color: var(--or-vieilli);
  }
  .hero-callout .callout-close {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 21px;
    line-height: 1.45;
    color: var(--creme-papier);
    border-top: 1px solid rgba(184, 146, 74, 0.35);
    padding-top: 22px;
    margin-bottom: 0;
  }
  .hero-callout .callout-close em {
    color: var(--or-vieilli);
    font-style: italic;
  }
  .hero-callout p {
    font-family: var(--font-narrative);
    font-style: italic;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(250, 247, 242, 0.92);
    margin-bottom: 22px;
  }
  .hero-callout .source-note {
    font-family: var(--font-ui);
    font-size: 13px;
    font-style: normal;
    color: rgba(250, 247, 242, 0.55);
    line-height: 1.5;
    border-top: 1px solid rgba(184, 146, 74, 0.25);
    padding-top: 16px;
    margin-bottom: 0;
  }

  /* ============================================================
     SECTION PIERRE-YVES : récit composite
     ============================================================ */
  .pierre-yves-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 70px;
    align-items: start;
  }
  .py-narrative h2 { margin-bottom: 24px; }
  .py-narrative .anonymat-note {
    font-family: var(--font-ui);
    font-style: italic;
    font-size: 13px;
    color: rgba(44, 62, 85, 0.65);
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(184, 146, 74, 0.25);
    line-height: 1.55;
  }
  .py-narrative p {
    font-family: var(--font-narrative);
    font-size: 19px;
    line-height: 1.65;
  }
  .py-narrative p em {
    color: var(--or-profond);
    font-style: italic;
  }
  .py-quote {
    background: var(--bleu-nuit);
    color: var(--creme-papier);
    padding: 32px 36px;
    margin: 32px 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    line-height: 1.45;
    border-left: 3px solid var(--or-vieilli);
  }
  .py-quote em {
    color: var(--or-vieilli);
    font-style: italic;
  }
  .py-conclusion {
    font-family: var(--font-display);
    font-size: 22px;
    font-style: italic;
    color: var(--or-profond);
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(184, 146, 74, 0.35);
  }

  .py-bilan {
    background: var(--creme-papier);
    border-left: 3px solid var(--or-vieilli);
    padding: 36px 32px;
    position: sticky;
    top: calc(var(--nav-height) + 30px);
  }
  .py-bilan .eyebrow {
    font-size: 13px;
    margin-bottom: 16px;
  }
  .py-bilan h3 {
    font-size: 30px;
    margin-bottom: 28px;
    font-family: var(--font-display);
  }
  .py-bilan h3 em { color: var(--or-vieilli); font-style: italic; }
  .py-bilan ul {
    list-style: none;
    padding: 0;
  }
  .py-bilan li {
    padding: 14px 0;
    border-bottom: 1px solid rgba(184, 146, 74, 0.18);
    display: flex;
    align-items: flex-start;
    gap: 14px;
  }
  .py-bilan li:last-child { border-bottom: none; }
  .py-bilan li::before {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 1px;
    margin-top: 0.8em;
    background: var(--or-vieilli);
  }
  .py-bilan li strong {
    font-weight: 500;
    color: var(--ardoise);
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-ui);
    font-size: 15px;
  }
  .py-bilan li span {
    font-family: var(--font-narrative);
    font-size: 16px;
    font-style: italic;
    color: rgba(44, 62, 85, 0.78);
    line-height: 1.5;
  }
  .py-bilan-note {
    font-family: var(--font-ui);
    font-style: italic;
    font-size: 13px;
    color: rgba(44, 62, 85, 0.6);
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(184, 146, 74, 0.18);
    line-height: 1.55;
  }

  /* ============================================================
     SECTION PROBLÈME FISCAL : couches superposées
     ============================================================ */
  .probleme-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: start;
  }
  .probleme-text .drop-cap::first-letter {
    font-family: var(--font-display);
    font-size: 64px;
    float: left;
    line-height: 0.85;
    padding: 8px 12px 0 0;
    color: var(--or-vieilli);
    font-style: italic;
    font-weight: 400;
  }
  .taux-box {
    background: var(--creme-papier);
    border-top: 2px solid var(--or-vieilli);
    padding: 36px 32px;
  }
  .taux-box .eyebrow { margin-bottom: 10px; }
  .taux-box h3 {
    font-size: 26px;
    margin-bottom: 12px;
    font-family: var(--font-display);
  }
  .taux-box h3 em { color: var(--or-vieilli); font-style: italic; }
  .taux-box .lead {
    font-size: 16px;
    margin-bottom: 28px;
  }
  .taux-list { list-style: none; padding: 0; }
  .taux-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid rgba(184, 146, 74, 0.20);
    gap: 20px;
  }
  .taux-list li:last-child { border-bottom: none; }
  .taux-label {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--ardoise);
    line-height: 1.4;
    flex: 1;
  }
  .taux-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-style: italic;
    color: var(--or-vieilli);
    font-weight: 400;
    white-space: nowrap;
  }

  /* ============================================================
     SECTION 3 STRATÉGIES
     ============================================================ */
  .strategies-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
  }
  .strategie-card {
    padding-top: 30px;
    background: var(--creme-papier);
    border-top: 2px solid var(--or-vieilli);
    padding: 36px 30px;
    transition: transform 0.3s;
  }
  .strategie-card:hover {
    transform: translateY(-4px);
  }
  .strategie-card .eyebrow {
    font-size: 13px;
    margin-bottom: 16px;
  }
  .strategie-card h3 {
    font-size: 26px;
    margin-bottom: 18px;
    font-family: var(--font-display);
  }
  .strategie-card h3 em { color: var(--or-vieilli); font-style: italic; }
  .strategie-card p {
    font-size: 16.5px;
    line-height: 1.68;
    color: var(--ardoise);
    margin-bottom: 0;
  }
  .strategies-note {
    margin-top: 60px;
    padding: 30px 36px;
    background: var(--creme-chaude);
    border-left: 3px solid var(--or-vieilli);
  }
  .strategies-note-texte {
    font-family: var(--font-narrative);
    font-size: 18px;
    line-height: 1.68;
    color: var(--ardoise);
    margin-bottom: 0;
  }
  .strategies-passerelle {
    display: inline-block;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(184, 146, 74, 0.40);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--or-lisible);
    text-decoration: none;
    transition: color 300ms ease;
  }
  .strategies-passerelle::after {
    content: ' \2192';
    display: inline-block;
    transition: transform 320ms var(--ease-sortie);
  }
  .strategies-passerelle:hover { color: var(--bleu-nuit); }
  .strategies-passerelle:hover::after { transform: translateX(4px); }
  .strategies-note em { color: var(--or-lisible); font-style: italic; }

  /* ============================================================
     SECTION COMBIEN CONSERVEZ-VOUS
     ============================================================ */
  .conservation-bloc { margin-top: 44px; }
  /* Cette section porte moins de contenu que les autres :
     une marge pleine y creusait du vide. */
  .section-bleu:has(.conservation-bloc) { padding: 78px 0; }
  .conservation-text em { color: var(--or-vieilli); font-style: italic; }
  .equation {
    background: rgba(244, 239, 230, 0.04);
    border-left: 2px solid var(--or-vieilli);
    padding: 30px 40px;
  }
  .equation-liste {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* Lu par les lecteurs d'écran, invisible à l'œil : sans ça,
     les opérateurs se lisent comme des tirets isolés. */
  .equation-lecture {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .equation-line {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 22px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(184, 146, 74, 0.22);
    align-items: center;
  }
  .equation-line:last-child { border-bottom: none; }
  .equation-line.total {
    border-top: 1px solid var(--or-vieilli);
    border-bottom: none;
    margin-top: 6px;
    padding-top: 18px;
  }
  .equation-op {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--or-vieilli);
    font-style: italic;
    font-weight: 400;
  }
  .equation-line.total .equation-op { font-weight: 500; }
  .equation-label {
    font-family: var(--font-ui);
    font-size: 16.5px;
    color: rgba(250, 247, 242, 0.92);
    letter-spacing: 0.01em;
  }
  .equation-line.total .equation-label {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 17px;
    color: var(--or-vieilli);
  }

  /* ============================================================
     SECTION ORCHESTRATION : méthode 5 phases
     ============================================================ */
  .methode-intro {
    max-width: 800px;
    margin-bottom: 60px;
  }
  .methode-intro p em { color: var(--or-profond); font-style: italic; }
  .methode-signature {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--or-profond);
    margin: 4px 0 30px 0;
    padding-left: 22px;
    border-left: 2px solid var(--or-vieilli);
  }
  .methode-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .methode-card {
    background: var(--creme-papier);
    padding: 30px 32px;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: start;
    border-top: 1px solid rgba(184, 146, 74, 0.35);
  }
  .methode-num {
    font-family: var(--font-display);
    font-size: 26px;
    font-style: italic;
    color: var(--or-vieilli);
    font-weight: 400;
    line-height: 1;
  }
  .methode-card h3 {
    font-size: 19px;
    font-weight: 500;
    margin-bottom: 10px;
    font-family: var(--font-display);
    color: var(--bleu-nuit);
  }
  .methode-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ardoise);
    margin-bottom: 0;
  }

  /* ============================================================
     SECTION POUR QUI : segment + ce que nous ne sommes pas
     ============================================================ */
  .pour-qui-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 50px;
  }
  .pour-qui-col h3 {
    font-size: 28px;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(184, 146, 74, 0.35);
    font-family: var(--font-display);
  }
  .pour-qui-col h3 em { color: var(--or-vieilli); font-style: italic; }
  .pour-qui-list { list-style: none; padding: 0; }
  .pour-qui-list li {
    padding: 14px 0;
    padding-left: 26px;
    position: relative;
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ardoise);
  }
  .pour-qui-list li::before {
    content: '+';
    position: absolute;
    left: 0;
    top: 14px;
    color: var(--or-vieilli);
    font-weight: 500;
    font-family: var(--font-display);
    font-size: 18px;
  }
  .pour-qui-list.exclusions li::before {
    content: '−';
  }

  /* ============================================================
     SECTION CTA FINAL : discussion exploratoire
     ============================================================ */
  .cta-final {
    background: var(--bleu-nuit);
    color: var(--creme-papier);
    padding: 110px 0 100px 0;
    text-align: center;
  }
  .cta-final .eyebrow {
    justify-content: center;
    margin-bottom: 24px;
  }
  .cta-final h2 {
    margin-bottom: 24px;
  }
  .cta-final .lead {
    max-width: 720px;
    margin: 0 auto 44px auto;
    text-align: center;
    color: rgba(250, 247, 242, 0.9);
  }
  .cta-final em { color: var(--or-vieilli); font-style: italic; }
  .cta-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 60px auto 50px auto;
  }
  .cta-trio-item {
    text-align: left;
    padding: 26px 30px;
    background: rgba(244, 239, 230, 0.04);
    border-left: 2px solid var(--or-vieilli);
  }
  .cta-trio-item .eyebrow {
    justify-content: flex-start;
    font-size: 13px;
    margin-bottom: 14px;
  }
  .cta-trio-item p {
    font-family: var(--font-narrative);
    font-size: 15px;
    font-style: italic;
    line-height: 1.55;
    color: rgba(250, 247, 242, 0.88);
    margin-bottom: 0;
  }
  .cta-button-wrapper { text-align: center; margin-top: 16px; }

  /* ============================================================
     FORMULAIRE DE CONTACT
     ============================================================ */
  .cta-form {
    max-width: 640px;
    margin: 48px auto 0;
    text-align: left;
  }
  .cta-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .cta-form .form-field { margin-bottom: 18px; }
  .cta-form label {
    display: block;
    font-family: var(--font-ui);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(250, 247, 242, 0.7);
    margin-bottom: 8px;
  }
  .cta-form label .optionnel {
    text-transform: none;
    letter-spacing: 0.02em;
    color: rgba(250, 247, 242, 0.45);
  }
  .cta-form input,
  .cta-form textarea {
    width: 100%;
    background: rgba(244, 239, 230, 0.05);
    border: 1px solid rgba(184, 146, 74, 0.35);
    color: var(--creme-papier);
    font-family: var(--font-narrative);
    font-size: 16px;
    padding: 13px 15px;
    border-radius: 0;
    transition: border-color 0.25s ease, background 0.25s ease;
  }
  .cta-form input:focus,
  .cta-form textarea:focus {
    outline: none;
    border-color: var(--or-vieilli);
    background: rgba(244, 239, 230, 0.09);
  }
  .cta-form textarea { min-height: 130px; resize: vertical; }
  .cta-form .form-actions { text-align: center; margin-top: 28px; }
  .cta-form .btn-primary { border: none; cursor: pointer; }
  .cta-alt {
    font-family: var(--font-narrative);
    font-style: italic;
    font-size: 15px;
    color: rgba(250, 247, 242, 0.7);
    text-align: center;
    margin-top: 26px;
  }
  .cta-alt a { color: var(--or-vieilli); text-decoration: none; }
  .cta-alt a:hover { text-decoration: underline; }
  @media (max-width: 980px) {
    .cta-form .form-row { grid-template-columns: 1fr; gap: 0; }
  }

  .cta-tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 26px;
    color: var(--or-vieilli);
    margin-top: 80px;
    line-height: 1.4;
  }

  /* ============================================================
     FOOTER
     ============================================================ */
  footer {
    background: var(--bleu-nuit);
    color: rgba(250, 247, 242, 0.75);
    padding: 70px 0 40px 0;
    border-top: 1px solid rgba(184, 146, 74, 0.20);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
  }
  .footer-brand-block .nav-brand {
    margin-bottom: 18px;
  }
  .footer-brand-block p {
    font-family: var(--font-narrative);
    font-size: 15px;
    font-style: italic;
    line-height: 1.6;
    color: rgba(250, 247, 242, 0.78);
    margin-bottom: 0;
  }
  .footer-col h4 {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--or-vieilli);
    margin-bottom: 22px;
  }
  .footer-col ul { list-style: none; padding: 0; }
  .footer-col li {
    margin-bottom: 12px;
    font-size: 14px;
  }
  .footer-col a {
    color: rgba(250, 247, 242, 0.80);
    text-decoration: none;
    transition: color 0.2s;
  }
  .footer-col a:hover { color: var(--or-vieilli); }
  .footer-mentions {
    border-top: 1px solid rgba(184, 146, 74, 0.15);
    padding-top: 28px;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(250, 247, 242, 0.55);
  }
  .footer-mentions strong { color: rgba(250, 247, 242, 0.75); font-weight: 500; }
  .footer-politique {
    border-top: 1px solid rgba(184, 146, 74, 0.15);
    margin-top: 28px;
    padding-top: 28px;
    color: rgba(250, 247, 242, 0.62);
    font-size: 13px;
    line-height: 1.75;
    max-width: 980px;
  }
  .footer-politique h4 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: rgba(250, 247, 242, 0.85);
    letter-spacing: 0.02em;
    margin-bottom: 14px;
  }
  .footer-politique h5 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--or-vieilli);
    margin: 18px 0 6px;
  }
  .footer-politique p { margin-bottom: 10px; }
  .footer-politique a { color: var(--or-vieilli); text-decoration: none; }
  .footer-politique a:hover { text-decoration: underline; }


  /* Colonne vertébrale or : pied de page de section */
  .colonne-vertebrale {
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 17px;
    color: var(--or-vieilli);
    margin-top: 60px;
    padding-top: 36px;
    border-top: 1px solid rgba(184, 146, 74, 0.25);
    letter-spacing: 0.01em;
  }
  .section-bleu .colonne-vertebrale { color: var(--or-vieilli); }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 980px) {
    :root { --container-pad: 32px; }
    .nav-links { display: none; }
    .hero-grid,
    .pierre-yves-grid,
    .strategies-grid,
    .pour-qui-grid,
    .footer-grid,
    .probleme-grid,
    .methode-grid,
    .cta-trio { grid-template-columns: 1fr; gap: 40px; }
    section { padding: 70px 0; }
    .py-bilan { position: static; }
  }

  /* ============================================================
     PRINT / PDF : c'est ICI que se règle le bug de superposition.
     Le header en position:fixed cause la superposition à chaque
     saut de page. On le neutralise complètement pour le rendu PDF
     et on supprime le spacer qui n'est plus nécessaire.
     ============================================================ */
  @media print {
    :root {
      --container-pad: 28px;
      --container-max: 100%;
    }
    @page {
      size: A4;
      margin: 14mm 12mm;
    }

    /* Header complètement reflowé en print : statique, non-fixed,
       n'apparaît qu'en première page comme une signature de tête */
    .nav-wrapper {
      position: static !important;
      background: var(--bleu-nuit) !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border-bottom: 1px solid var(--or-vieilli);
      page-break-inside: avoid;
    }
    .nav { padding: 16px 28px; height: auto; }
    .nav-cta {
      background: var(--or-vieilli) !important;
      color: var(--bleu-nuit) !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    /* Le spacer n'a plus d'utilité en print */
    .nav-spacer { display: none !important; }

    /* Forcer les couleurs de fond à s'imprimer */
    body, .section-bleu, .section-creme, .section-creme-chaude,
    .hero, .cta-final, .py-quote, .cta-trio-item,
    .strategie-card, .taux-box, .py-bilan, .methode-card, .equation,
    .hero-callout, footer {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }

    section, .hero, .cta-final, footer {
      padding: 50px 0;
      page-break-inside: avoid;
    }
    h1, h2, h3 { page-break-after: avoid; }
    .py-quote, .equation, .hero-callout {
      page-break-inside: avoid;
    }

    .nav-brand,
    .nav-cta { color: var(--creme-papier); }
    .nav-brand .v-symbol { fill: var(--or-vieilli); }

    /* Hover désactivés en print */
    .strategie-card:hover { transform: none; }

    body { font-size: 13px; }
    h1 { font-size: 38px; }
    h2 { font-size: 32px; }
    h3 { font-size: 20px; }
    .hero-title { font-size: 38px; }
    .value-prop { font-size: 19px; }
    .hero-callout .callout-statement { font-size: 25px; }
    .methode-signature { font-size: 21px; }
  }

  /* ============================================================
     LE MOMENT : hiérarchie marketing
     ------------------------------------------------------------
     Trois niveaux de lecture, du plus fort au plus faible :
     la thèse, la frise, le bloc de conversion. Avant, les trois
     étaient traités pareil et le visiteur ne savait pas où
     regarder : ni quoi faire une fois convaincu.
     ============================================================ */

  #moment { position: relative; overflow: hidden; }
  #moment > .container { position: relative; z-index: 2; }


  /* --- 1. La thèse --- */
  .moment-these {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.5vw, 34px);
    font-weight: 400;
    line-height: 1.38;
    color: var(--creme-papier);
    max-width: 940px;
    margin: 4px 0 0 0;
    padding-left: 26px;
    border-left: 2px solid var(--or-vieilli);
    letter-spacing: -0.004em;
  }
  .moment-these em {
    font-style: italic;
    color: var(--or-vieilli);
  }

  /* --- 3. Le bloc de conversion --- */
  .moment-bilan {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
    margin-top: 60px;
    padding: 34px 38px;
    background: rgba(244, 239, 230, 0.05);
    border-left: 2px solid var(--or-vieilli);
    backdrop-filter: blur(2px);
  }
  .moment-rassurance {
    font-family: var(--font-display);
    font-size: clamp(19px, 1.7vw, 24px);
    font-weight: 400;
    line-height: 1.42;
    color: var(--creme-papier);
    margin: 0 0 26px 0;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(184, 146, 74, 0.28);
    letter-spacing: -0.003em;
  }
  .moment-rassurance em { font-style: italic; color: var(--or-vieilli); }
  .moment-bilan .eyebrow { margin-bottom: 14px; }
  .moment-bilan-texte p {
    font-family: var(--font-narrative);
    font-size: 16.5px;
    line-height: 1.68;
    color: rgba(250, 247, 242, 0.92);
    margin-bottom: 0;
    max-width: 720px;
  }
  .moment-bilan-action { white-space: nowrap; }

  @media (max-width: 900px) {
    .moment-bilan {
      grid-template-columns: 1fr;
      gap: 26px;
      padding: 28px 24px;
    }
    .moment-bilan-action { white-space: normal; }
    .moment-these { padding-left: 20px; }
  }


  /* ============================================================
     LE MOMENT : frise chronologique
     ------------------------------------------------------------
     Le filet or traverse les quatre étapes et s'estompe vers la
     droite : la ligne elle-même raconte le rétrécissement de la
     marge de manœuvre.
     ============================================================ */

  .moment-frise {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 66px;
    list-style: none;
    padding: 0;
  }
  .moment-frise::before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      var(--or-vieilli) 0%,
      var(--or-vieilli) 62%,
      rgba(184, 146, 74, 0.22) 100%);
  }
  .moment-etape {
    position: relative;
    padding: 34px 38px 0 0;
  }
  .moment-etape::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--or-vieilli);
    background: var(--bleu-nuit);
  }
  .moment-etape.etape-etroite::before {
    border-color: rgba(184, 146, 74, 0.45);
  }
  .moment-horizon {
    display: block;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--or-vieilli);
    margin-bottom: 14px;
    line-height: 1.5;
  }
  .moment-etape h3 {
    font-size: 21px;
    margin-bottom: 12px;
    color: var(--creme-papier);
  }
  .moment-etape h3 em { font-style: italic; color: var(--or-vieilli); }
  .moment-etape p {
    font-family: var(--font-narrative);
    font-size: 16.5px;
    line-height: 1.65;
    color: rgba(250, 247, 242, 0.90);
    margin-bottom: 0;
  }
  .moment-etape.etape-etroite p { color: rgba(250, 247, 242, 0.78); }

  .moment-note {
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.65;
    color: rgba(250, 247, 242, 0.66);
    max-width: 860px;
    margin: 52px 0 0 0;
    padding-top: 26px;
    border-top: 1px solid rgba(184, 146, 74, 0.25);
  }

  @media (max-width: 1100px) {
    .moment-frise { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
    .moment-frise::before { display: none; }
    .moment-etape { padding-right: 30px; }
  }
  @media (max-width: 700px) {
    .moment-frise { grid-template-columns: 1fr; row-gap: 38px; }
    .moment-etape { padding-right: 0; }
  }


  /* ============================================================
     LE PROBLÈME : passerelle et sources
     ============================================================ */

  /* --- « Ces taux, appliqués à votre portefeuille » --- */
  .taux-application {
    display: block;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(184, 146, 74, 0.35);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--or-lisible);
    text-decoration: none;
    transition: color 300ms ease;
  }
  .taux-application::after {
    content: ' \2192';
    display: inline-block;
    transition: transform 320ms var(--ease-sortie);
  }
  .taux-application:hover { color: var(--bleu-nuit); }
  .taux-application:hover::after { transform: translateX(4px); }

  .taux-verification {
    font-family: var(--font-ui);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: rgba(44, 62, 85, 0.62);
    margin: 14px 0 0 0;
  }
  .taux-verification time { font-style: normal; }

  /* --- Sources : un signal de crédibilité, pas une note perdue --- */
  .sources {
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.7;
    color: rgba(44, 62, 85, 0.78);
    margin-top: 52px;
    padding-top: 22px;
    border-top: 1px solid rgba(184, 146, 74, 0.28);
    max-width: 1000px;
  }
  .sources-titre {
    display: block;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--or-lisible);
    margin-bottom: 8px;
  }


  /* --- Honoraires : sixième cellule, mais pas une sixième étape.
         Balise <aside>, donc annoncée comme contenu complémentaire.
         Le contraste doit être franc, sinon on dirait une case
         d'étape mal alignée. --- */
  .methode-honoraires {
    padding: 30px 34px;
    background: var(--bleu-nuit);
    border-left: 3px solid var(--or-vieilli);
    height: 100%;
  }
  .methode-honoraires .eyebrow { margin-bottom: 12px; }
  .methode-honoraires p {
    font-family: var(--font-narrative);
    font-size: 17px;
    line-height: 1.68;
    color: rgba(250, 247, 242, 0.93);
    margin-bottom: 0;
  }
  .methode-honoraires em { font-style: italic; color: var(--or-vieilli); }
  .methode-honoraires .eyebrow { color: var(--or-vieilli); }

  /* Les cartes s'étirent à la hauteur de leur rangée : sans ça,
     une case courte à côté d'une longue crée un décrochage. */
  .methode-grid { align-items: stretch; }
  .methode-card { height: 100%; }

  /* --- Aperçu du cas, renvoyant vers la page dédiée --- */
  .cas-apercu {
    margin-top: 40px;
    padding: 32px 36px;
    background: var(--creme-chaude);
    border-left: 2px solid var(--or-vieilli);
    max-width: 920px;
  }
  .cas-apercu-texte {
    font-family: var(--font-narrative);
    font-size: 18px;
    line-height: 1.7;
    color: var(--ardoise);
    margin-bottom: 0;
  }
  .cas-apercu-lien {
    display: inline-block;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(184, 146, 74, 0.40);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--or-lisible);
    text-decoration: none;
    transition: color 300ms ease;
  }
  .cas-apercu-lien::after {
    content: ' \2192';
    display: inline-block;
    transition: transform 320ms var(--ease-sortie);
  }
  .cas-apercu-lien:hover { color: var(--bleu-nuit); }
  .cas-apercu-lien:hover::after { transform: translateX(4px); }
  .cas-apercu-note {
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.65;
    color: rgba(44, 62, 85, 0.70);
    margin-top: 26px;
    max-width: 780px;
  }

  /* ============================================================
     BANDEAU DE QUALIFICATION
     ------------------------------------------------------------
     Compact par choix : trois critères, une sortie honnête pour
     ceux que ça ne concerne pas. Le visiteur doit pouvoir se
     reconnaître sans lire un paragraphe.
     ============================================================ */

  .qualification {
    background: var(--creme-papier);
    color: var(--ardoise);
    padding: 64px 0 58px 0;
    border-bottom: 1px solid rgba(184, 146, 74, 0.22);
  }
  .qualification .eyebrow { margin-bottom: 20px; }

  /* Le titre pose la question ; les trois colonnes la complètent. */
  .qualif-titre {
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1.22;
    margin-bottom: 42px;
    color: var(--ardoise);
  }
  .qualif-titre em { font-style: italic; color: var(--or-lisible); }

  #qualification { position: relative; overflow: hidden; }
  #qualification > .container { position: relative; z-index: 2; }

  .qualif-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .qualif-item {
    padding: 0 32px;
    border-left: 1px solid rgba(184, 146, 74, 0.28);
  }
  .qualif-item:first-child { padding-left: 0; border-left: none; }
  .qualif-item:last-child { padding-right: 0; }

  .qualif-marque {
    display: block;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--or-lisible);
    margin-bottom: 12px;
  }
  .qualif-item p {
    font-family: var(--font-narrative);
    font-size: 19px;
    line-height: 1.55;
    margin-bottom: 0;
    color: var(--ardoise);
  }
  .qualif-item p em {
    font-style: italic;
    color: var(--or-lisible);
  }

  /* --- La position, dans un encadré --- */
  .qualif-encadre {
    margin: 48px 0 0 0;
    padding: 28px 32px;
    background: rgba(11, 31, 58, 0.035);
    border-left: 2px solid var(--or-vieilli);
    max-width: 640px;
  }
  .qualif-encadre-texte {
    font-family: var(--font-display);
    font-size: clamp(19px, 1.6vw, 23px);
    font-weight: 400;
    line-height: 1.44;
    color: var(--ardoise);
    margin-bottom: 0;
    letter-spacing: -0.003em;
  }
  .qualif-encadre-texte em {
    font-style: italic;
    color: var(--or-lisible);
  }


  /* ============================================================
     TRAME CADASTRALE : hero
     ------------------------------------------------------------
     Lots longs et étroits perpendiculaires au fleuve : le
     découpage seigneurial du Régime français, encore lisible
     aujourd'hui dans les terres de Verchères. Dessinée en SVG,
     donc 5 ko, nette à toutes les résolutions, aucune licence
     d'image à gérer. Remplace les cercles décoratifs.
     ============================================================ */

  .hero::before, .hero::after { display: none; }



  /* ============================================================
     MOTION : révélations
     ------------------------------------------------------------
     Signature : le filet or. Il se trace dans chaque .eyebrow,
     il barre le haut de la page en jauge de progression, il
     souligne les liens. Le trait est l'élément que la page fait
     bouger : le reste se contente de monter et d'apparaître.

     Sécurité : tout est conditionné à .js-motion, posée par le
     script sur <html>. Sans JavaScript, sans IntersectionObserver,
     à l'impression, ou si la réduction d'animations est activée,
     la page reste entièrement visible. Les robots d'indexation
     voient toujours le contenu complet.
     ============================================================ */

  :root {
    --ease-sortie: cubic-bezier(0.16, 0.84, 0.44, 1);
    --duree-reveal: 820ms;
    --duree-trait: 900ms;
  }

  /* --- Révélation de base --- */
  .js-motion .reveal {
    opacity: 0;
    transform: translateY(38px);
    transition:
      opacity var(--duree-reveal) var(--ease-sortie),
      transform var(--duree-reveal) var(--ease-sortie);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js-motion .reveal.est-visible {
    opacity: 1;
    transform: none;
  }

  /* --- Signature : le filet or se trace --- */
  .js-motion .reveal .eyebrow::before,
  .js-motion .eyebrow.reveal::before {
    width: 0;
    transition: width var(--duree-trait) var(--ease-sortie);
    transition-delay: calc(var(--reveal-delay, 0ms) + 260ms);
  }
  .js-motion .reveal.est-visible .eyebrow::before,
  .js-motion .eyebrow.reveal.est-visible::before {
    width: 44px;
  }

  /* --- Jauge de progression de lecture --- */
  .progression {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 1100;
    pointer-events: none;
    background: transparent;
  }
  .progression span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--or-profond), var(--or-vieilli));
    transform-origin: left center;
  }

  /* --- Hero : cercles or, expansion lente à l'ouverture --- */
  .js-motion .hero::before,
  .js-motion .hero::after {
    opacity: 0;
    transform: scale(0.90);
    transition:
      opacity 1800ms var(--ease-sortie),
      transform 2200ms var(--ease-sortie);
    transition-delay: 400ms;
  }
  .js-motion .hero.hero-ouvert::before,
  .js-motion .hero.hero-ouvert::after {
    opacity: 1;
    transform: scale(1);
  }
  .js-motion .hero.hero-ouvert::after { transition-delay: 650ms; }

  /* --- Encadré du hero : le filet vertical or se déploie --- */
  .js-motion .hero-callout {
    border-left-color: transparent;
    transition:
      opacity var(--duree-reveal) var(--ease-sortie),
      transform var(--duree-reveal) var(--ease-sortie),
      border-left-color 900ms ease;
    transition-delay:
      var(--reveal-delay, 0ms),
      var(--reveal-delay, 0ms),
      calc(var(--reveal-delay, 0ms) + 320ms);
  }
  .js-motion .hero-callout.est-visible { border-left-color: var(--or-vieilli); }

  /* --- Header : ancrage et resserrement au défilement --- */
  .nav-wrapper {
    transition:
      background 420ms ease,
      border-bottom-color 420ms ease,
      box-shadow 420ms ease;
  }
  .nav {
    transition: height 420ms var(--ease-sortie);
  }
  .nav-brand .v-symbol {
    transition: width 420ms var(--ease-sortie), height 420ms var(--ease-sortie);
  }
  .nav-wrapper.nav-ancree {
    background: rgba(11, 31, 58, 0.985);
    border-bottom-color: rgba(184, 146, 74, 0.42);
    box-shadow: 0 2px 30px rgba(11, 31, 58, 0.34);
  }
  .nav-wrapper.nav-ancree .nav { height: 62px; }
  .nav-wrapper.nav-ancree .nav-brand .v-symbol { width: 36px; height: 46px; }

  /* --- Liens du header : filet or qui se déploie --- */
  .nav-links a {
    position: relative;
    padding-bottom: 5px;
  }
  .nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--or-vieilli);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 380ms var(--ease-sortie);
  }
  .nav-links a:hover::after,
  .nav-links a:focus-visible::after { transform: scaleX(1); }

  /* --- Cartes : élévation et bordure or au survol --- */
  .strategie-card,
  .methode-card {
    transition:
      transform 420ms var(--ease-sortie),
      border-color 420ms ease,
      background 420ms ease,
      box-shadow 420ms ease;
  }
  .strategie-card:hover,
  .methode-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(11, 31, 58, 0.12);
  }
  .methode-card .methode-num { transition: color 420ms ease, opacity 420ms ease; }
  .methode-card:hover .methode-num { opacity: 1; color: var(--or-vieilli); }

  /* --- Chiffres animés : compteurs des taux --- */
  .js-motion .taux-value.compteur { font-variant-numeric: tabular-nums; }

  /* --- Lignes de listes --- */
  .py-bilan li,
  .taux-list li,
  .pour-qui-list li,
  .equation-line {
    transition: border-color 420ms ease;
  }

  /* --- Accessibilité clavier --- */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--or-vieilli);
    outline-offset: 3px;
  }

  /* --- Ancres : compenser le header fixe --- */
  section[id] { scroll-margin-top: calc(var(--nav-height) + 14px); }

  /* --- Respect de la préférence système --- */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js-motion .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .js-motion .reveal .eyebrow::before,
    .js-motion .eyebrow.reveal::before {
      width: 44px;
      transition: none;
    }
    .js-motion .hero::before,
    .js-motion .hero::after {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .js-motion .hero-callout { border-left-color: var(--or-vieilli); }
    .nav, .nav-brand .v-symbol { transition: none; }
    .progression { display: none; }
    .strategie-card:hover,
    .methode-card:hover { transform: none; }
  }

  /* --- Impression --- */
  @media print {
    .progression { display: none !important; }
    .reveal {
      opacity: 1 !important;
      transform: none !important;
    }
    .eyebrow::before { width: 44px !important; }
    .hero::before,
    .hero::after { opacity: 1 !important; transform: none !important; }
    .hero-callout { border-left-color: #B8924A !important; }
  }

  /* ============================================================
     TRAME CADASTRALE : règle unique
     ------------------------------------------------------------
     Le motif appartient au fond bleu nuit : chaque section sombre
     le porte. Seule exception assumée : le bandeau de qualification,
     en crème, prolonge la trame du hero à travers la coupure de
     couleur (même tracé, teinte inversée). Ne pas « corriger ».

     Sens : incliné vers la droite dans la première moitié du
     parcours, en miroir dans la seconde. La page se replie.
     ============================================================ */

  .a-trame { position: relative; overflow: hidden; }
  .a-trame > .container { position: relative; z-index: 2; }

  .trame-cadastre {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }
  .js-motion .trame-cadastre {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1900ms var(--ease-sortie),
                transform 2300ms var(--ease-sortie);
  }
  .js-motion .a-trame.trame-visible .trame-cadastre {
    opacity: 1;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .js-motion .trame-cadastre { opacity: 1; transform: none; transition: none; }
  }
  @media print { .trame-cadastre { display: none; } }


  /* ============================================================
     RESSOURCES : lot 2, 14 septembre 2026
     ------------------------------------------------------------
     Tout ce qui suit est AJOUTÉ en fin de feuille. Aucune règle
     antérieure n'est modifiée : la feuille est partagée par toutes
     les pages, une règle retouchée se répercuterait partout.
     ============================================================ */

  /* --- Règles jusqu'ici dupliquées dans le <style> de chaque page,
         reprises ici pour que les pages Ressources s'en passent.
         Valeurs identiques à celles des pages existantes : aucun
         effet sur elles (elles gardent leur propre copie). --- */
  :root { --or-lisible: #7A5C26; }
  .nav-links a.nav-cta { color: var(--bleu-nuit); }
  .nav-links a.nav-cta:hover { color: var(--creme-papier); }
  .nav-links a.nav-cta::after { display: none; }
  .footer-bottom a {
    color: var(--or-vieilli);
    text-decoration: none;
    border-bottom: 1px solid rgba(184, 146, 74, 0.40);
    transition: border-color 280ms ease;
  }
  .footer-bottom a:hover { border-bottom-color: var(--or-vieilli); }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 26px;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(250, 247, 242, 0.62);
  }

  /* ============================================================
     MENU MOBILE : bouton hamburger
     ------------------------------------------------------------
     Sous 980 px, .nav-links était en display:none : seul le logo
     restait cliquable. Le bouton déplie la liste existante.
     Point de rupture porté à 1240 px, la largeur du conteneur : au-delà,
     la nav a une largeur fixe et les six items tiennent sur une ligne ;
     en dessous, ils ne tiennent plus (719 px de libellés pour 654 px
     disponibles à 1024) : et à cinq items la nav passait déjà sur deux
     lignes sous 1200.
     Sans JavaScript, la classe js-menu n'est jamais posée sur
     <html> : la liste reste dépliée et les liens atteignables.
     ============================================================ */

  /* Six items sur une ligne au-dessus de 1200 px : l'espacement
     passe de 36 à 28 px (899 px requis sinon, pour 885 disponibles). */
  .nav-links { gap: 28px; }

  .nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }
  .nav-toggle span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--or-vieilli);
    transition: transform 320ms var(--ease-sortie), opacity 220ms ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  @media (max-width: 1240px) {
    .nav-toggle { display: flex; }
    .nav-links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 10px 0 18px 0;
      background: rgba(11, 31, 58, 0.985);
      border-bottom: 1px solid rgba(184, 146, 74, 0.42);
      box-shadow: 0 18px 44px rgba(11, 31, 58, 0.34);
      max-height: calc(100vh - 100%);
      overflow-y: auto;
    }
    /* Sans JavaScript : pas de bouton inerte, en-tête remis dans le flux,
       liste dépliée sous la marque au lieu de recouvrir le contenu. */
    html:not(.js-menu) .nav-toggle { display: none; }
    html:not(.js-menu) .nav-wrapper { position: static; }
    html:not(.js-menu) .nav-spacer { display: none; }
    html:not(.js-menu) .nav { height: auto; flex-wrap: wrap; }
    html:not(.js-menu) .nav-links { display: flex; position: static; flex: 1 1 100%; }
    .js-menu .nav-links.est-ouvert { display: flex; }
    .nav-links li a {
      display: block;
      padding: 13px var(--container-pad);
      font-size: 16px;
    }
    .nav-links li a::after { display: none; }
    .nav-links li a.nav-cta {
      display: inline-block;
      margin: 12px var(--container-pad) 0 var(--container-pad);
      padding: 12px 22px;
      font-size: 13px;
    }
  }
  @media print { .nav-toggle { display: none !important; } }

  /* ============================================================
     RESSOURCES : en-tête commun (index et article)
     ============================================================ */
  .ressource-entete {
    background: var(--bleu-nuit);
    color: var(--creme-papier);
    padding: 96px 0 84px 0;
  }
  .ressource-entete .container { max-width: calc(720px + 2 * var(--container-pad)); }
  .article-titre {
    font-size: clamp(31.5px, 3.91vw, 50px);
    line-height: 1.1;
    margin-bottom: 24px;
  }
  .article-sous-titre {
    font-family: var(--font-narrative);
    font-style: italic;
    font-size: 20px;
    line-height: 1.62;
    color: rgba(250, 247, 242, 0.9);
    margin-bottom: 0;
  }
  .article-date {
    display: block;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid rgba(184, 146, 74, 0.35);
    font-family: var(--font-ui);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(250, 247, 242, 0.62);
  }

  /* ============================================================
     ARTICLE : corps de lecture
     ------------------------------------------------------------
     Colonne centrée à 720 px. Source Serif 4 à 17,5 px, interligne
     1,72 : les valeurs des paragraphes de l'accueil.
     ============================================================ */
  .article-section { padding: 64px 0; }
  .article-corps { max-width: 720px; margin: 0 auto; }
  .article-corps p {
    font-family: var(--font-narrative);
    font-size: 17.5px;
    line-height: 1.72;
    color: var(--ardoise);
    margin-bottom: 22px;
  }
  .article-corps > :last-child { margin-bottom: 0; }
  .article-corps h2 {
    font-size: clamp(28px, 2.7vw, 38px);
    line-height: 1.18;
    margin: 54px 0 22px 0;
  }
  .article-corps h2:first-child { margin-top: 0; }
  .article-corps h2 em { font-style: italic; color: var(--or-lisible); }
  .article-corps p em { font-style: italic; color: var(--or-lisible); }
  .article-corps strong { font-weight: 600; color: var(--bleu-nuit); }
  .article-corps a {
    color: var(--or-lisible);
    text-decoration: none;
    border-bottom: 1px solid rgba(184, 146, 74, 0.45);
    transition: color 280ms ease, border-color 280ms ease;
  }
  .article-corps a:hover { color: var(--bleu-nuit); border-bottom-color: var(--or-vieilli); }

  /* Items détachés : le traitement de .qualif-item : filet or vertical
     à gauche, terme en gras, aucune puce. */
  .palier-liste {
    list-style: none;
    margin: 30px 0 34px 0;
    padding: 0;
  }
  .palier-item {
    padding: 2px 0 2px 24px;
    border-left: 1px solid rgba(184, 146, 74, 0.28);
    margin-bottom: 22px;
  }
  .palier-item:last-child { margin-bottom: 0; }
  .palier-item p { margin-bottom: 0; }

  /* Fermeture bleu nuit : dernier paragraphe, bouton or, avertissement */
  .article-fin {
    background: var(--bleu-nuit);
    color: var(--creme-papier);
    padding: 90px 0 70px 0;
  }
  .article-fin .container { max-width: calc(720px + 2 * var(--container-pad)); }
  .article-fin p {
    font-family: var(--font-narrative);
    font-size: 17.5px;
    line-height: 1.72;
    color: rgba(250, 247, 242, 0.92);
    margin-bottom: 0;
  }
  .article-fin p a {
    color: var(--or-vieilli);
    text-decoration: none;
    border-bottom: 1px solid rgba(184, 146, 74, 0.45);
    transition: border-color 280ms ease;
  }
  .article-fin p a:hover { border-bottom-color: var(--or-vieilli); }
  .article-fin .btn-primary { display: inline-block; margin-top: 34px; }
  .article-fin .footer-mentions { margin-top: 56px; }

  /* ============================================================
     RESSOURCES : grille de cartes, une carte par article
     ------------------------------------------------------------
     Fond bleu nuit, rayon 12 px. L'en-tête de carte porte la trame
     cadastrale en guise d'image : le site n'utilise aucune photo.
     ============================================================ */
  .ressources-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 30px;
  }
  .carte-ressource {
    display: flex;
    flex-direction: column;
    background: var(--bleu-nuit);
    color: var(--creme-papier);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 420ms var(--ease-sortie), box-shadow 420ms ease;
  }
  .carte-ressource:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(11, 31, 58, 0.12);
  }
  .carte-trame {
    height: 150px;
    border-bottom: 1px solid rgba(184, 146, 74, 0.28);
  }
  /* La trame est dessinée pour 1600 px de large ; réduite à la largeur
     d'une carte, ses traits de 0,8 à 1,7 px disparaîtraient. */
  .carte-trame .trame-cadastre line { vector-effect: non-scaling-stroke; }
  .carte-corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px 30px 28px 30px;
  }
  .carte-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 16px;
    row-gap: 6px;
    margin-bottom: 16px;
  }
  .carte-categorie {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--or-vieilli);
  }
  .carte-date {
    font-family: var(--font-ui);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: rgba(250, 247, 242, 0.62);
    white-space: nowrap;
  }
  .carte-ressource h2 {
    font-size: 25px;
    line-height: 1.22;
    margin-bottom: 14px;
    color: var(--creme-papier);
  }
  .carte-extrait {
    font-family: var(--font-narrative);
    font-size: 15.5px;
    line-height: 1.62;
    color: rgba(250, 247, 242, 0.85);
    margin-bottom: 24px;
  }
  .carte-pied {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid rgba(184, 146, 74, 0.25);
    font-family: var(--font-ui);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: rgba(250, 247, 242, 0.62);
  }
  .carte-fleche {
    color: var(--or-vieilli);
    font-size: 18px;
    line-height: 1;
    transition: transform 320ms var(--ease-sortie);
  }
  .carte-ressource:hover .carte-fleche { transform: translateX(4px); }

  @media (max-width: 980px) {
    .ressource-entete { padding: 64px 0 56px 0; }
    .article-section { padding: 52px 0; }
    .article-corps h2 { margin-top: 44px; }
    .article-fin { padding: 64px 0 48px 0; }
    .carte-corps { padding: 22px 24px 24px 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-toggle span { transition: none; }
    .carte-ressource:hover { transform: none; }
    .carte-ressource:hover .carte-fleche { transform: none; }
  }


  /* ============================================================
     V2 : COMPOSANTS AJOUTÉS LE 19 SEPTEMBRE 2026
     ------------------------------------------------------------
     Tout ce qui suit est nouveau. Retirer ce bloc ne casse aucune
     page de la V1. Palette, polices et filets : ceux du site.
     ============================================================ */
  :root { --or-lisible: #7A5C26; }

  /* Un peu plus d'air sous les grands titres, maintenant plus petits */
  h2 { margin-bottom: 30px; }

  /* Ancres héritées de la V1 (#probleme, #strategies) : invisibles */
  .ancre-heritee { display: block; height: 0; overflow: hidden; }
  section[id], .ancre-heritee, [id="effet-cumule"], [id="sortie-progressive"], [id="histoire"] {
    scroll-margin-top: calc(var(--nav-height) + 12px);
  }

  /* Doré lisible sur fonds clairs, pour les pages dont le <style> ne le prévoit pas */
  .section-creme .strategie-card .eyebrow,
  .section-creme-chaude .strategie-card .eyebrow,
  .section-creme .strategies-note .eyebrow,
  .section-creme-chaude .strategies-note .eyebrow { color: var(--or-lisible); }
  .strategies-note .eyebrow { margin-bottom: 14px; }
  .strategies-note + .strategies-note { margin-top: 24px; }
  .section-creme-chaude .strategies-note { background: var(--creme-papier); }

  /* --- Quatre familles de leviers --- */
  .familles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 56px;
  }
  .familles-grid .strategie-card { padding: 32px 26px; }
  .familles-grid .strategie-card h3 { font-size: 22px; }
  .familles-grid .strategie-card p { font-size: 15px; line-height: 1.66; }
  @media (max-width: 1180px) { .familles-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 700px)  { .familles-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; } }

  /* Cartes sur fond crème : on inverse le fond pour garder le relief */
  .section-creme .strategie-card { background: var(--creme-chaude); }

  /* --- Sortie progressive et règle d'engagement --- */
  .voie-progressive {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 30px;
    margin-top: 30px;
    align-items: stretch;
  }
  .voie-progressive .methode-honoraires { height: auto; }
  .voie-engagement {
    padding: 30px 34px;
    background: var(--creme-chaude);
    border-left: 3px solid var(--or-vieilli);
  }
  .voie-engagement .eyebrow { color: var(--or-lisible); margin-bottom: 12px; }
  .voie-engagement p {
    font-family: var(--font-narrative);
    font-size: 16px;
    line-height: 1.68;
    margin-bottom: 0;
  }
  @media (max-width: 980px) { .voie-progressive { grid-template-columns: 1fr; } }

  /* --- Parcours : cas, simulateur, discussion --- */
  .parcours {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 44px;
    padding: 0;
  }
  .parcours-etape {
    padding: 28px 28px 30px 28px;
    border-top: 2px solid var(--or-vieilli);
    background: var(--creme-chaude);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .parcours-num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 24px;
    line-height: 1;
    color: var(--or-lisible);
    margin-bottom: 14px;
  }
  .parcours-etape h3 { font-size: 21px; margin-bottom: 10px; color: var(--bleu-nuit); }
  .parcours-etape p { font-size: 15px; line-height: 1.64; margin-bottom: 0; }
  .parcours-etape .cas-apercu-lien { margin-top: auto; padding-top: 18px; border-top: none; }
  .parcours-bouton { margin-top: auto; }
  .parcours-etape p + .parcours-bouton { margin-top: 20px; }
  @media (max-width: 980px) { .parcours { grid-template-columns: 1fr; gap: 20px; } }

  /* --- Professionnels --- */
  .pour-qui-col > p {
    font-family: var(--font-narrative);
    font-size: 16px;
    line-height: 1.7;
  }
  .pro-invitation { margin-top: 22px; }
  .cadre-note {
    margin-top: 24px;
    font-family: var(--font-ui) !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: rgba(44, 62, 85, 0.78);
  }

  /* --- Toutes catégories d'actifs --- */
  .actifs-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    margin-top: 40px;
    padding: 0;
  }
  .actifs-grid .qualif-item { padding: 0 20px; border-left: 1px solid rgba(184, 146, 74, 0.28); }
  .actifs-grid .qualif-item p { margin-bottom: 0; }
  .actifs-grid .qualif-marque { color: var(--or-lisible); }
  @media (max-width: 1180px) { .actifs-grid { grid-template-columns: repeat(3, 1fr); row-gap: 30px; } }
  @media (max-width: 700px)  { .actifs-grid { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } }

  /* --- Respect des locataires : bande sobre --- */
  .bande-locataires { padding: 84px 0; }
  .bande-locataires .lead { color: rgba(250, 247, 242, 0.92); margin-bottom: 0; }
  @media (max-width: 980px) { .bande-locataires { padding: 60px 0; } }

  /* --- Verchère : histoire du nom et du symbole (discret) --- */
  .histoire-nom {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 50px;
    margin-top: 56px;
    padding-top: 34px;
    border-top: 1px solid rgba(184, 146, 74, 0.35);
  }
  .histoire-nom .eyebrow { color: var(--or-lisible); margin-bottom: 12px; }
  .histoire-nom p {
    font-family: var(--font-narrative);
    font-size: 15px;
    line-height: 1.7;
    color: rgba(44, 62, 85, 0.86);
    margin-bottom: 0;
  }
  .histoire-symbole { display: flex; gap: 22px; align-items: flex-start; }
  .histoire-logo { width: 46px; height: auto; flex-shrink: 0; }
  @media (max-width: 980px) { .histoire-nom { grid-template-columns: 1fr; gap: 30px; margin-top: 44px; } }

  /* --- Formulaire : menu déroulant « à titre de » --- */
  .cta-form select {
    width: 100%;
    background-color: rgba(244, 239, 230, 0.05);
    border: 1px solid rgba(184, 146, 74, 0.35);
    color: var(--creme-papier);
    font-family: var(--font-narrative);
    font-size: 15px;
    padding: 13px 40px 13px 15px;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B8924A' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px 8px;
    transition: border-color 0.25s ease, background-color 0.25s ease;
  }
  .cta-form select:focus {
    outline: none;
    border-color: var(--or-vieilli);
    background-color: rgba(244, 239, 230, 0.09);
  }
  .cta-form select option { color: #0B1F3A; background: #FAF7F2; }

  /* --- Cas de figure : manchette et tableaux --- */
  .cas-chiffres h3.cas-soustitre { font-size: 26px; margin: 56px 0 16px 0; color: var(--bleu-nuit); }
  .cas-chiffres h3.cas-soustitre em { color: var(--or-lisible); }
  .cas-chiffres .container > p { font-family: var(--font-narrative); max-width: 900px; }
  .manchette {
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr;
    gap: 0;
    margin-top: 44px;
    background: var(--bleu-nuit);
    color: var(--creme-papier);
  }
  .manchette-bloc { padding: 30px 32px; border-left: 1px solid rgba(184, 146, 74, 0.30); display: flex; flex-direction: column; }
  .manchette-bloc:first-child { border-left: none; }
  .manchette-etiquette {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--or-vieilli);
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .manchette-valeur {
    font-family: var(--font-display);
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1.1;
    white-space: nowrap;
    margin-top: auto;
  }
  .manchette-ecart { background: rgba(184, 146, 74, 0.12); }
  .manchette-ecart .manchette-valeur { color: var(--or-vieilli); margin-top: 0; }
  .manchette-note {
    font-family: var(--font-narrative);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(250, 247, 242, 0.88);
    margin-top: 12px;
  }
  @media (max-width: 980px) {
    .manchette { grid-template-columns: 1fr; }
    .manchette-bloc { border-left: none; border-top: 1px solid rgba(184, 146, 74, 0.30); padding: 24px 24px; }
    .manchette-bloc:first-child { border-top: none; }
  }

  .tableau-defilant { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 22px; max-width: 100%; }
  .tableau-v2 {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    background: var(--creme-papier);
  }
  .tableau-v2 th, .tableau-v2 td {
    padding: 13px 18px;
    border-bottom: 1px solid rgba(184, 146, 74, 0.25);
    text-align: left;
    vertical-align: top;
  }
  .tableau-v2 thead th {
    background: var(--bleu-nuit);
    color: var(--creme-papier);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.06em;
  }
  .tableau-v2 tbody th { font-weight: 400; color: var(--ardoise); }
  .tableau-v2 td, .tableau-v2 thead th:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .tableau-v2 .ligne-base th, .tableau-v2 .ligne-base td { background: var(--creme-chaude); font-weight: 500; color: var(--bleu-nuit); }
  .tableau-note {
    font-family: var(--font-ui) !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: rgba(44, 62, 85, 0.80);
    margin-top: 14px;
    max-width: 900px;
  }
  .cas-chiffres .strategies-note { margin-top: 56px; }
  @media (max-width: 700px) {
    .tableau-v2 { font-size: 13px; }
    .tableau-v2 th, .tableau-v2 td { padding: 10px 8px; }
    .tableau-v2 thead th { white-space: normal !important; letter-spacing: 0; font-size: 13px; }
    .tableau-v2 tbody th { min-width: 118px; }
  }

  /* --- Publications : cartes « à paraître » --- */
  .a-paraitre-titre { margin-top: 64px; color: var(--or-lisible); }
  .carte-a-paraitre {
    background: var(--creme-chaude);
    color: var(--ardoise);
    border-top: 2px solid var(--or-vieilli);
    border-radius: 0 0 12px 12px;
  }
  .carte-a-paraitre:hover { transform: none; box-shadow: none; }
  .carte-a-paraitre h2 { color: var(--bleu-nuit); font-size: 22px; }
  .carte-a-paraitre .carte-categorie { color: var(--or-lisible); }
  .carte-a-paraitre .carte-extrait { color: rgba(44, 62, 85, 0.88); }
  .carte-a-paraitre .carte-pied {
    color: var(--or-lisible);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
  }
  .article-maj {
    font-family: var(--font-ui);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: rgba(250, 247, 242, 0.62);
    margin: 10px 0 0 0;
  }

  @media print {
    .tableau-defilant { overflow: visible; }
    .manchette { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  }

  /* --- Navigation V2 : huit entrées sur une seule ligne --- */
  .nav-links a { white-space: nowrap; }
  @media (min-width: 1401px) { .nav-links { gap: 24px; margin-left: 32px; } }

  /* Correctif hérité : sur mobile, le troisième critère perdait son filet */
  @media (max-width: 700px) {
    .qualif-grid .qualif-item:nth-child(3) { padding-left: 22px; border-left: 1px solid rgba(184, 146, 74, 0.28); }
  }

  /* Cas de figure : chapeau lisible sur fond clair */
  .cas-chiffres .lead { font-style: normal; color: var(--or-lisible); }


  /* ============================================================
     V2.1 : SIMPLICITÉ D'ABORD (19 septembre 2026)
     ------------------------------------------------------------
     Corps de texte à 17 px et plus, mentions à 13 px et plus,
     beaucoup d'air, sections dépliables (details et summary).
     ============================================================ */

  /* --- Corps de texte : jamais sous 17 px --- */
  p, li { font-size: 18px; line-height: 1.7; }
  .lead { font-size: 21px; line-height: 1.6; font-style: normal; }
  .section-creme .lead, .section-creme-chaude .lead { color: var(--or-lisible); }
  .hero-subtitle { font-size: 21px !important; line-height: 1.62 !important; max-width: 620px; }
  .hero-callout p { font-size: 18px !important; }
  .strategie-card p, .familles-grid .strategie-card p { font-size: 17px; line-height: 1.68; }
  .methode-card p { font-size: 17px; line-height: 1.66; }
  .methode-card h3 { font-size: 21px; }
  .pour-qui-list li { font-size: 17px; line-height: 1.55; }
  .pour-qui-col > p { font-size: 18px; }
  .moment-etape p { font-size: 17px; line-height: 1.66; }
  .qualif-item p { font-size: 19px; line-height: 1.55; }
  .strategies-note-texte, .cas-apercu-texte { font-size: 19px; line-height: 1.7; }
  .voie-engagement p, .parcours-etape p, .histoire-nom p { font-size: 17px; }
  .cta-trio-item p { font-size: 17px; }
  .equation-label { font-size: 17px; }
  .taux-label { font-size: 15px; }
  .footer-col li, .footer-col a { font-size: 15px; }
  .footer-brand-block p { font-size: 16px; }
  .carte-extrait { font-size: 17px; }
  .article-corps p, .article-corps li, .politique-page p { font-size: 18px; }
  .nav-links a { font-size: 15px; }
  .btn-primary, .btn-secondary { font-size: 14px; letter-spacing: 0.12em; padding: 18px 30px; }
  .cta-form label { font-size: 14px; }
  .cta-form input, .cta-form textarea, .cta-form select { font-size: 18px; padding: 15px 16px; }

  /* --- Mentions et étiquettes : jamais sous 13 px --- */
  .eyebrow { font-size: 13px; letter-spacing: 0.2em; }
  .strategie-card .eyebrow { font-size: 13px; }
  .cas-apercu-note, .tableau-note, .cadre-note, .detail-mention, .sources, .footer-mentions,
  .py-bilan-note, .anonymat-note, .taux-verification, .form-note, .cta-form .form-note { font-size: 14px !important; line-height: 1.65 !important; }
  .qualif-marque, .moment-horizon, .manchette-etiquette, .carte-categorie, .carte-date, .carte-pied,
  .carte-a-paraitre .carte-pied, .sources-titre, .footer-col h4, .footer-bottom, .article-maj,
  .cta-form label .optionnel, .tableau-v2 thead th { font-size: 13px !important; }
  .strategies-passerelle, .cas-apercu-lien, .taux-application { font-size: 15px; }

  /* --- De l'air --- */
  section { padding: 110px 0; }
  .hero { padding: 100px 0 120px 0; }
  .hero-title { max-width: 640px; }
  h2 { margin-bottom: 34px; }
  .qualification { padding: 90px 0; }
  @media (max-width: 980px) {
    section { padding: 76px 0; }
    .hero { padding: 64px 0 80px 0; }
    .qualification { padding: 64px 0; }
    p, li { font-size: 17.5px; }
    .lead, .hero-subtitle { font-size: 19.5px !important; }
  }

  /* --- Navigation : cinq entrées --- */
  @media (min-width: 1241px) { .nav-links { gap: 34px; margin-left: 32px; } }

  /* --- Quatre blocs simples --- */
  .blocs-simples {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px 72px;
    margin-top: 56px;
    max-width: 1040px;
  }
  .bloc-simple { border-top: 2px solid var(--or-vieilli); padding-top: 26px; }
  .bloc-simple h3 { font-size: 28px; line-height: 1.2; color: var(--bleu-nuit); margin-bottom: 14px; font-weight: 400; }
  .bloc-simple p { font-family: var(--font-narrative); font-size: 19px; line-height: 1.68; margin-bottom: 0; }
  @media (max-width: 800px) { .blocs-simples { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; } .bloc-simple h3 { font-size: 25px; } }

  .phrase-forte {
    font-family: var(--font-display);
    font-size: 25px !important;
    line-height: 1.45 !important;
    color: var(--bleu-nuit);
    max-width: 860px;
    margin: 60px 0 0 0;
    padding-left: 26px;
    border-left: 2px solid var(--or-vieilli);
  }
  .phrase-forte em { color: var(--or-lisible); }
  @media (max-width: 800px) { .phrase-forte { font-size: 22px !important; margin-top: 44px; } }

  /* --- Deux gestes : évaluer, ou parler --- */
  .deux-gestes { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 44px; max-width: 1040px; }
  .geste { background: var(--creme-papier); border-top: 2px solid var(--or-vieilli); padding: 34px 34px 38px 34px; display: flex; flex-direction: column; align-items: flex-start; }
  .geste h3 { font-size: 26px; color: var(--bleu-nuit); margin-bottom: 12px; font-weight: 400; }
  .geste p { font-family: var(--font-narrative); margin-bottom: 26px; }
  .geste a { margin-top: auto; }
  .btn-sur-clair { color: var(--bleu-nuit) !important; border-color: var(--bleu-nuit) !important; }
  .btn-sur-clair:hover { background: var(--bleu-nuit) !important; color: var(--creme-papier) !important; }
  @media (max-width: 800px) { .deux-gestes { grid-template-columns: 1fr; } .geste { padding: 28px 24px 30px 24px; } }
  .section-creme-chaude .cas-apercu { background: var(--creme-papier); }

  /* --- Professionnels : liste simple --- */
  .pros-liste { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 40px 0 34px 0; padding: 0; max-width: 900px; }
  .pros-liste li { font-family: var(--font-ui); font-size: 17px; padding: 10px 20px; border: 1px solid rgba(184, 146, 74, 0.55); color: var(--bleu-nuit); background: var(--creme-papier); }
  .pro-invitation { font-family: var(--font-narrative); max-width: 760px; margin-bottom: 30px; }

  .cta-telephone { font-family: var(--font-display); font-size: 26px !important; text-align: center; margin: 0 0 44px 0; color: var(--creme-papier); }
  .cta-telephone a { color: var(--or-vieilli); text-decoration: none; border-bottom: 1px solid rgba(184, 146, 74, 0.5); white-space: nowrap; }

  /* --- Sections dépliables --- */
  .detail { border-top: 1px solid rgba(184, 146, 74, 0.45); margin-top: 0; }
  .detail:first-of-type { margin-top: 56px; }
  .detail:last-of-type { border-bottom: 1px solid rgba(184, 146, 74, 0.45); }
  .detail > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 6px;
    min-height: 56px;
    font-family: var(--font-display);
    font-size: 23px;
    line-height: 1.3;
    color: var(--bleu-nuit);
    transition: color 250ms ease;
  }
  .detail > summary::-webkit-details-marker { display: none; }
  .detail > summary::after {
    content: '';
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-right: 2px solid var(--or-lisible);
    border-bottom: 2px solid var(--or-lisible);
    transform: rotate(45deg) translateY(-4px);
    transition: transform 300ms ease;
  }
  .detail[open] > summary::after { transform: rotate(-135deg) translateY(-4px); }
  .detail > summary:hover { color: var(--or-lisible); }
  .detail > summary:focus-visible { outline: 3px solid var(--or-vieilli); outline-offset: 4px; }
  .detail-corps { padding: 10px 6px 56px 6px; }
  .detail-corps > p { font-family: var(--font-narrative); max-width: 900px; }
  .detail-intro { font-size: 19px !important; }
  .detail-corps .familles-grid, .detail-corps .strategies-grid, .detail-corps .methode-grid,
  .detail-corps .pour-qui-grid, .detail-corps .probleme-grid, .detail-corps .actifs-grid { margin-top: 34px; }
  .detail-corps .actifs-grid { margin-bottom: 34px; }
  .detail-soustitre { font-size: 26px; margin: 56px 0 18px 0; color: var(--bleu-nuit); }
  .detail-soustitre em { color: var(--or-lisible); }
  .detail-sombre { background: var(--bleu-nuit); color: var(--creme-papier); padding: 40px 40px 44px 40px; margin: 30px 0 34px 0; }
  .detail-sombre .moment-frise { margin-top: 0; }
  .detail-sombre em { color: var(--or-vieilli) !important; }
  .detail-mention { font-family: var(--font-ui) !important; color: rgba(44, 62, 85, 0.82); max-width: 900px; }
  .section-creme .detail-corps .strategie-card { background: var(--creme-chaude); }
  .section-creme .detail-corps .methode-card { background: var(--creme-chaude); }
  .section-creme .detail-corps .taux-box { background: var(--creme-chaude); }
  .section-creme .detail-corps .strategies-note { background: var(--creme-chaude); }
  @media (max-width: 800px) {
    .detail > summary { font-size: 20px; padding: 22px 2px; }
    .detail-sombre { padding: 28px 22px 30px 22px; margin-left: -8px; margin-right: -8px; }
    .detail-corps { padding: 6px 2px 44px 2px; }
  }
  @media (prefers-reduced-motion: reduce) { .detail > summary::after { transition: none; } }

  /* --- Histoire du nom --- */
  .histoire-devise { font-family: var(--font-display) !important; font-style: italic; font-size: 19px !important; color: var(--or-lisible) !important; margin-top: 16px !important; }

  /* --- Cas de figure : version courte --- */
  .cas-page h1 { max-width: 900px; }
  .cas-court { max-width: 860px; margin-top: 34px; }
  .cas-court p { font-family: var(--font-narrative); font-size: 20px; line-height: 1.7; }
  .cas-decision { font-size: clamp(28px, 3vw, 38px); margin: 64px 0 22px 0; }
  .cas-court + .detail { margin-top: 64px; }
  .manchette-valeur { font-size: clamp(28px, 2.79vw, 39px); }
  .manchette-note { font-size: 16px; }
  .manchette-stress { margin-top: 18px; grid-template-columns: 2fr 1.3fr; background: var(--ardoise); }
  .cas-chiffres .manchette-stress { grid-template-columns: 1fr 1fr 1.3fr; margin-top: 26px; }
  .manchette-texte { font-family: var(--font-narrative); font-size: 20px; line-height: 1.55; margin-top: auto; }
  .manchette-stress .manchette-ecart { background: rgba(11, 31, 58, 0.55); }
  @media (max-width: 980px) { .manchette-stress, .cas-chiffres .manchette-stress { grid-template-columns: 1fr; } }
  .cas-chiffres h3.cas-soustitre { font-size: 27px; }
  .tableau-v2 { font-size: 16px; }
  .tableau-v2 td br + * { }
  @media (max-width: 700px) {
    .tableau-v2 { font-size: 14px; }
    .tableau-v2 thead th { font-size: 13px !important; }
  }
  .cas-page .detail-corps .pierre-yves-grid { margin-top: 20px; }
  .detail > summary .ancre-heritee { position: absolute; width: 0; }
  .detail > summary .detail-titre { flex: 1; }
  .tableau-v2 thead th { white-space: normal !important; vertical-align: bottom; }
  @media (min-width: 701px) { .tableau-v2 tbody th { min-width: 230px; } }


  /* ============================================================
     PASSE 3 (20 septembre 2026) : relecture indépendante
     ============================================================ */

  /* --- Or lisible (#7A5C26) pour tout TEXTE doré posé sur crème (contraste d'au moins 4,5:1).
         L'or vieilli (#B8924A) reste pour les filets et pour le texte sur bleu nuit. --- */
  .section-creme em, .section-creme-chaude em, .qualification em, .cas-page em, .article-section em,
  .politique-section em, .politique-page em,
  .section-creme h1 em, .section-creme h2 em, .section-creme h3 em,
  .section-creme-chaude h1 em, .section-creme-chaude h2 em, .section-creme-chaude h3 em,
  .section-creme .eyebrow, .section-creme-chaude .eyebrow, .qualification .eyebrow, .qualification .qualif-marque,
  .section-creme .lead, .section-creme-chaude .lead,
  .section-creme .colonne-vertebrale, .section-creme-chaude .colonne-vertebrale, .colonne-vertebrale,
  .section-creme .methode-num, .section-creme-chaude .methode-num,
  .section-creme .taux-value, .section-creme-chaude .taux-value,
  .section-creme .py-conclusion, .section-creme .methode-signature, .section-creme-chaude .methode-signature,
  .section-creme .pour-qui-list li::before, .section-creme-chaude .pour-qui-list li::before,
  .article-corps h2 em, .article-corps a, .politique-page a {
    color: var(--or-lisible);
  }
  .section-bleu .colonne-vertebrale { color: var(--or-vieilli); }
  /* Blocs bleu nuit nichés dans une section claire : on revient à l'or vieilli */
  .methode-honoraires .eyebrow, .methode-honoraires em,
  .detail-sombre .eyebrow, .detail-sombre em, .detail-sombre .moment-horizon, .detail-sombre h3 em,
  .manchette em, .manchette .manchette-etiquette, .manchette-ecart .manchette-valeur,
  .py-quote em, .carte-ressource:not(.carte-a-paraitre) em,
  .carte-ressource:not(.carte-a-paraitre) .carte-categorie { color: var(--or-vieilli) !important; }

  /* Gris de mention : assez foncés pour 4,5:1 sur crème */
  .cas-apercu-note, .tableau-note, .cadre-note, .detail-mention, .py-bilan-note, .anonymat-note,
  .py-narrative .anonymat-note, .sources, .taux-verification, .histoire-nom p { color: #4A586B !important; }

  /* --- Tableau des taux : note sur le remboursement --- */
  .taux-note { font-family: var(--font-ui); font-size: 14px !important; line-height: 1.6 !important; color: #4A586B; margin: 18px 0 0 0; }

  /* --- Menu mobile : panneau opaque --- */
  @media (max-width: 1240px) {
    .nav-links, .js-menu .nav-links.est-ouvert { background: #0B1F3A !important; opacity: 1 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .nav-wrapper { z-index: 1000; }
  }

  /* --- Pied de page : trois lignes empilées sur téléphone --- */
  @media (max-width: 480px) {
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
    .footer-bottom span { display: block; line-height: 1.9; }
  }

  /* --- Tableaux larges : indice de défilement (posé par script quand le tableau dépasse) --- */
  .tableau-defilant.defile::before {
    content: 'Faites glisser le tableau pour voir la suite.';
    display: block;
    font-family: var(--font-ui);
    font-size: 14px;
    color: #4A586B;
    margin-bottom: 8px;
  }
  .tableau-defilant.defile { box-shadow: inset -14px 0 12px -12px rgba(11, 31, 58, 0.35); }
  .tableau-defilant:focus-visible { outline: 3px solid var(--or-vieilli); outline-offset: 3px; }

  /* --- Professionnels : liste simple, sans faux boutons --- */
  .pros-ligne { font-family: var(--font-ui); font-size: 18px !important; line-height: 2 !important; color: var(--bleu-nuit); max-width: 900px; margin: 36px 0 30px 0; }

  /* --- Formulaire : messages --- */
  .form-alerte, .form-resume-note {
    font-family: var(--font-ui);
    font-size: 17px !important;
    line-height: 1.6 !important;
    padding: 18px 22px;
    margin: 0 0 28px 0;
    border-left: 3px solid var(--or-vieilli);
    background: rgba(244, 239, 230, 0.08);
    color: var(--creme-papier);
  }
  .form-alerte { border-left-color: #E0A96D; color: #F6D9B8; }
  .form-alerte[hidden], .form-resume-note[hidden] { display: none; }

  /* --- Publications : article en vedette sur toute la largeur, coins uniformes --- */
  .carte-ressource, .carte-a-paraitre { border-radius: 0; }
  .publications-titre { color: var(--or-lisible); }
  .carte-vedette { grid-column: 1 / -1; flex-direction: row; }
  .carte-vedette .carte-trame { width: 36%; height: auto; min-height: 300px; border-bottom: none; border-right: 1px solid rgba(184, 146, 74, 0.28); }
  .carte-vedette .carte-corps { padding: 40px 48px 38px 48px; }
  .carte-vedette h2 { font-size: 32px; line-height: 1.2; }
  .carte-vedette .carte-extrait { font-size: 19px; max-width: 640px; }
  .publications-fin { margin-top: 64px; max-width: 900px; }
  @media (max-width: 800px) {
    .carte-vedette { flex-direction: column; }
    .carte-vedette .carte-trame { width: 100%; min-height: 0; height: 130px; border-right: none; border-bottom: 1px solid rgba(184, 146, 74, 0.28); }
    .carte-vedette .carte-corps { padding: 26px 24px 28px 24px; }
    .carte-vedette h2 { font-size: 25px; }
  }
  .cta-form label .optionnel { color: rgba(250, 247, 242, 0.72); }
  .manchette-stress, .cas-chiffres .manchette-stress { background: var(--bleu-nuit); border-left: 4px solid var(--or-vieilli); }
  .manchette-stress .manchette-ecart { background: rgba(184, 146, 74, 0.12); }
  .manchette-valeur { white-space: normal; }
  @media (max-width: 980px) { .manchette-valeur { font-size: 30px; } }

  /* --- Passe 4 : dernière ligne du pied de page, empilée proprement sur téléphone --- */
  .fb-droite { white-space: nowrap; }
  @media (max-width: 600px) {
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; letter-spacing: 0.08em; }
    .footer-bottom > span, .fb-droite { display: flex; flex-direction: column; gap: 8px; white-space: normal; }
    .footer-bottom .fb-sep { display: none !important; }
    .fb-droits, .footer-bottom a { white-space: nowrap; }
  }


  /* ============================================================
     V2.2 : REGISTRE V3 (20 septembre 2026)
     ============================================================ */

  /* --- Bandeau de méthode : trois temps, visibles --- */
  .bandeau-methode { background: var(--creme-chaude); padding: 46px 0; border-bottom: 1px solid rgba(184, 146, 74, 0.35); }
  .trois-temps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; counter-reset: temps; }
  .trois-temps li {
    counter-increment: temps;
    font-family: var(--font-display);
    font-size: 25px;
    line-height: 1.3;
    color: var(--bleu-nuit);
    padding: 4px 32px;
    border-left: 1px solid rgba(184, 146, 74, 0.45);
  }
  .trois-temps li:first-child { padding-left: 0; border-left: none; }
  .trois-temps li::before {
    content: counter(temps, upper-roman);
    display: block;
    font-family: var(--font-ui);
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--or-lisible);
    margin-bottom: 10px;
  }
  @media (max-width: 800px) {
    .bandeau-methode { padding: 34px 0; }
    .trois-temps { grid-template-columns: 1fr; gap: 22px; }
    .trois-temps li { padding: 0 0 0 20px; border-left: 2px solid rgba(184, 146, 74, 0.6); font-size: 22px; }
    .trois-temps li:first-child { padding-left: 20px; border-left: 2px solid rgba(184, 146, 74, 0.6); }
  }

  /* --- Trois blocs de synthèse --- */
  .trois-blocs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 56px; }
  .trois-blocs .bloc-simple h3 { font-size: 26px; }
  .trois-blocs .bloc-simple p { font-size: 18px; }
  @media (max-width: 980px) { .trois-blocs { grid-template-columns: 1fr; gap: 38px; margin-top: 40px; } }

  /* --- Encadré du premier écran : sans surtitre --- */
  .hero-callout .callout-statement { margin-top: 0; }
  .hero-callout p:last-child { margin-bottom: 0; }

  /* --- Mention de l'exemple : sobre, lisible, jamais un bandeau d'alerte --- */
  .mention-exemple {
    font-family: var(--font-ui);
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    color: #4A586B;
    max-width: 760px;
    margin: 0 0 10px 0;
  }
  .mention-suite { font-family: var(--font-narrative); max-width: 760px; margin-bottom: 0; }
  .cas-page .mention-exemple { margin-top: 6px; }

  /* --- Professionnels --- */
  .pro-principe {
    font-family: var(--font-display);
    font-size: 23px !important;
    line-height: 1.5 !important;
    color: var(--bleu-nuit);
    max-width: 860px;
    padding-left: 26px;
    border-left: 2px solid var(--or-vieilli);
    margin: 10px 0 0 0;
  }
  #professionnels .pour-qui-grid { margin-top: 56px; }
  #professionnels .pros-ligne { margin-top: 50px; }
  #professionnels .pro-invitation a { color: var(--or-lisible); }
  #quand-ne-pas-preparer { margin-top: 40px; }
  .section-creme-chaude .methode-card { background: var(--creme-papier); }
  .cas-court .cas-decision:first-child { margin-top: 56px; }

  /* --- V2.4 : liens contextuels dans le corps, aux couleurs du site --- */
  .bloc-simple a, .methode-card a, .detail-corps p a, .pro-invitation a, .cas-apercu a:not(.cas-apercu-lien),
  .strategies-note-texte a, .article-corps a, .politique-page a {
    color: var(--or-lisible);
    text-decoration: none;
    border-bottom: 1px solid rgba(122, 92, 38, 0.45);
    transition: border-color 250ms ease;
  }
  .bloc-simple a:hover, .methode-card a:hover, .detail-corps p a:hover, .pro-invitation a:hover,
  .strategies-note-texte a:hover, .article-corps a:hover, .politique-page a:hover { border-bottom-color: var(--or-lisible); }
  .detail-sombre a, .section-bleu p a { color: var(--or-vieilli); border-bottom-color: rgba(184, 146, 74, 0.5); }

  /* --- V2.5 : bande des catégories d'immeubles (E2) --- */
  .bande-actifs { padding: 90px 0; }
  .bande-actifs .lead { color: rgba(250, 247, 242, 0.92); }
  .actifs-bande { margin-top: 44px; }
  .actifs-bande .qualif-item { border-left-color: rgba(184, 146, 74, 0.45); }
  .actifs-bande .qualif-marque { color: var(--or-vieilli); }
  .actifs-bande .qualif-item p { color: rgba(250, 247, 242, 0.92); }
  .actifs-portee { color: rgba(250, 247, 242, 0.78) !important; margin-top: 36px; max-width: 900px; }
  @media (max-width: 980px) { .bande-actifs { padding: 64px 0; } }

  /* --- V2.5 : phrase de cadre qui remplace la tuile de perte (E3) --- */
  .phrase-cadre {
    font-family: var(--font-narrative);
    font-size: 19px !important;
    line-height: 1.7 !important;
    color: var(--ardoise);
    max-width: 820px;
    margin: 30px 0 0 0;
    padding-left: 24px;
    border-left: 2px solid var(--or-vieilli);
  }
  .cas-page .phrase-cadre { margin: 34px 0 0 0; }

  /* --- V2.5 : trois situations types (E4) --- */
  .situations-titre { font-size: clamp(26px, 2.7vw, 34px); margin: 72px 0 0 0; color: var(--bleu-nuit); }
  .situations-titre em { color: var(--or-lisible); }
  .situations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 34px; }
  .situation { background: var(--creme-papier); border-top: 2px solid var(--or-vieilli); padding: 30px 28px 32px 28px; }
  .situation .eyebrow { color: var(--or-lisible); margin-bottom: 16px; }
  .situation p { font-family: var(--font-narrative); font-size: 17px; line-height: 1.66; }
  .situation p:last-child { margin-bottom: 0; }
  .situations-mention {
    font-family: var(--font-ui) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: #4A586B;
    max-width: 860px;
    margin-top: 26px;
  }
  @media (max-width: 980px) { .situations { grid-template-columns: 1fr; gap: 20px; } .situations-titre { margin-top: 56px; } }