/* 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: 12px;
    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: 11px;
    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(44px, 5.8vw, 78px);
    margin-bottom: 32px;
  }
  h1 em {
    font-style: italic;
    color: var(--or-vieilli);
    font-weight: 400;
  }
  h2 {
    font-size: clamp(36px, 4.2vw, 56px);
    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(46px, 5.2vw, 72px);
    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: 12px;
    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: 10px;
  }
  .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: 11px;
    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: 10px;
    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: '—';
    color: var(--or-vieilli);
    font-weight: 500;
    flex-shrink: 0;
    width: 14px;
  }
  .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: 12px;
    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: 10px;
    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: 10px;
    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: 12px;
    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: 11px;
    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: 11.5px;
    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: 12.5px;
    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: 12.5px;
    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: 11px;
    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: 11.5px;
    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: 11px;
    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: 11px;
    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: 11px;
    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: 12px;
    }
  }
  @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(34px, 4.2vw, 54px);
    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: 11.5px;
    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: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--or-vieilli);
  }
  .carte-date {
    font-family: var(--font-ui);
    font-size: 12px;
    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: 12px;
    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; }
  }