/* ---------- Color ------------ */
    :root {
      --bg: #F3F6F5;
      --bg-alt: #E9F0ED;
      --ink: #10241F;
      --primary: #1F5C4F;
      --primary-dark: #163F37;
      --primary-tint: #DCEAE5;
      --accent: #C98A3E;
      --accent-tint: #F3E4CD;
      --muted: #5B6B67;
      --line: #D2DFDA;
      --white: #FFFFFF;
      --radius: 2px;
      --max: 1180px;
      --shadow: 0 12px 32px rgba(16, 36, 31, 0.08);
    }
/* ---------- /Color ------------ */

/* ---------- Section shell ---------- */
    section {
      padding: 96px 0;
    }

    .section-head {
      max-width: 640px;
      margin: 0 auto 56px;
    }

    .section-head.left {
      margin-left: 0;
    }

    .section-head h2 {
      font-size: clamp(1.8rem, 3vw, 2.5rem);
    }
/* ---------- /Section ----------- */

/* ---------- Approche ---------- */
    .approche .wrap {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 70px;
      align-items: start;
    }

    .approche-visual {
      aspect-ratio: 4/5;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, var(--primary-tint), transparent 60%),
        repeating-linear-gradient(to bottom, transparent, transparent 27px, var(--line) 28px);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      padding: 26px;
    }

    .approche-visual .caption {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .72rem;
      color: var(--primary);
      background: var(--white);
      border: 1px solid var(--line);
      padding: .6em 1em;
      border-radius: var(--radius);
    }

    .steps {
      counter-reset: step;
    }

    .step {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 20px;
      padding: 24px 0;
      border-top: 1px solid var(--line);
    }

    .step:last-child {
      border-bottom: 1px solid var(--line);
    }

    .step .n {
      font-family: 'IBM Plex Mono', monospace;
      color: var(--accent);
      font-size: 1rem;
    }

    .step h4 {
      font-size: 1.05rem;
      margin-bottom: .3em;
    }

    .step p {
      margin: 0;
      font-size: .94rem;
    }

    .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 32px;
    }

    .card-body {
      padding: 22px 22px 26px;
      display: flex;
      flex-direction: column;
      gap: .6em;
      flex: 1;
    }

    .hero-cta {
      display: flex;
      gap: 1em;
      flex-wrap: wrap;
    }
/* ---------- Approche ---------- */

/* ---------- Tableau | Service -------- */
    .ledger-card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 34px;
      position: relative;
    }

    .ledger-card .tag {
      font-family: 'IBM Plex Mono', monospace;
      font-size: .68rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .ledger-row {
      display: flex;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px dashed var(--line);
      font-size: .92rem;
    }

    .ledger-row:last-of-type {
      border-bottom: none;
    }

    .ledger-row span:first-child {
      color: var(--muted);
    }

    .ledger-row span:last-child {
      font-family: 'IBM Plex Mono', monospace;
      color: var(--ink);
    }

    .ledger-stamp {
      margin-top: 20px;
      display: inline-flex;
      align-items: center;
      gap: .5em;
      font-family: 'IBM Plex Mono', monospace;
      font-size: .72rem;
      color: var(--primary);
      border: 1px solid var(--primary);
      border-radius: 999px;
      padding: .5em 1em;
    }

    .hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 60px;
      align-items: center;
    }
/* ---------- /Tableau | Service -------- */

/* ---------- Bouton ------------ */
  .btn-primaire {
      background: var(--primary-tint);
      color: #fff;
    }

    .btn-primaire:hover {
      background: var(--accent-tint);
      color: #163F37
    }

    .btn-ghost {
      border-color: var(--ink);
    }

    .btn-ghost:hover {
      background: var(--ink);
      color: #fff;
    }

    .btn-secondaire {
      background: var(--primary-dark);
      color:#fff; 
    }

    .btn-secondaire:hover {
      background: var(--primary-tint);
      color:#10241F;
    }

    .ledger-stamp {
      margin-top: 20px;
      display: inline-flex;
      align-items: center;
      gap: .5em;
      font-family: 'IBM Plex Mono', monospace;
      font-size: .72rem;
      color: var(--primary);
      border: 1px solid var(--primary);
      border-radius: 999px;
      padding: .5em 1em;
    }
/* ---------- /Bouton ----------- */

/* ---------- Responsive ---------- */
    @media (max-width:960px) {
      .nav-links {
        display: none;
      }

      .hero-grid {
        grid-template-columns: 1fr;
      }

      .hero::before {
        display: none;
      }

      .trust .wrap {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 24px;
      }

      .trust-item:nth-child(3) {
        border-left: none;
        padding-left: 0;
      }

      .domaines-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .approche .wrap .resp {
        grid-template-columns: 1fr;
      }

      .publics-grid {
        grid-template-columns: 1fr;
      }

      .actu-grid {
        grid-template-columns: 1fr;
      }

      .contact .wrap {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto;
      }

      * {
        transition: none !important;
      }
    }
/* ---------- Responsive ---------- */