/* Fontem · Direction Toupie v2 · fontem.be */

/* ─── Reset ─────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ─── Design Tokens · Toupie v2 · source: design.md §1.1 ── */
    :root {
      /* COLORS · PRIMARY */
      --color-orange-fontem: #FF4800;
      --color-noir-fontem:   #100501;
      --color-sable:         #F2E7DD;
      --color-ivoire:        #FEF9F5;

      /* COLORS · ORANGE RAMP */
      --color-orange-50:  #FEEDE4;
      --color-orange-100: #FEDDCE;
      --color-orange-300: #FEA987;
      --color-orange-500: #FF4800;
      --color-orange-600: #E24000;
      --color-orange-700: #C13700;

      /* COLORS · NOIR WARM GRAY */
      --color-noir-50:  #F4EFEB;
      --color-noir-100: #E6E1DD;
      --color-noir-300: #B7B0AC;
      --color-noir-500: #7B736F;
      --color-noir-700: #443B37;
      --color-noir-900: #100501;

      /* COLORS · SURFACES */
      --color-sable-raised:  #F6ECE4;
      --color-ivoire-sunken: #FAF3ED;

      /* SEMANTIC TOKENS */
      --bg-page:           var(--color-ivoire);
      --bg-surface:        var(--color-sable);
      --bg-surface-raised: var(--color-sable-raised);
      --bg-surface-sunken: var(--color-ivoire-sunken);
      --bg-inverse:        var(--color-noir-900);
      --bg-accent:         var(--color-orange-500);

      --text-headline:  var(--color-noir-900);
      --text-body:      var(--color-noir-700);
      --text-muted:     var(--color-noir-500);
      --text-disabled:  var(--color-noir-300);
      --text-on-orange: var(--color-ivoire);
      --text-on-noir:   var(--color-sable);
      --text-accent:    var(--color-orange-500);

      --border-subtle:  var(--color-noir-100);
      --border-default: var(--color-noir-300);
      --border-strong:  var(--color-noir-700);
      --focus-ring:     var(--color-orange-700);

      /* TYPOGRAPHY */
      --font-serif:  'Source Serif 4', Georgia, serif;
      --font-accent: 'Fuzzy Bubbles', 'Comic Sans MS', cursive;
      --font-sans:   'Inter', system-ui, -apple-system, sans-serif;

      --fs-display: 80px;  --lh-display: 88px;  --fw-display: 300;
      --fs-h1:      56px;  --lh-h1:      64px;
      --fs-h2:      40px;  --lh-h2:      48px;
      --fs-h3:      28px;  --lh-h3:      36px;
      --fs-body-lg: 18px;  --lh-body-lg: 28px;
      --fs-body:    14px;  --lh-body:    22px;
      --fs-caption: 12px;  --lh-caption: 18px;
      --fs-label:   11px;  --lh-label:   16px;  --fw-label: 500;
      --ls-label:   1.5px;
      --fs-accent-lg: 56px;  --fs-accent-sm: 32px;

      /* SPACING */
      --space-1:  4px;   --space-2:  8px;   --space-3:  12px;
      --space-4:  16px;  --space-5:  24px;  --space-6:  32px;
      --space-7:  48px;  --space-8:  64px;  --space-9:  96px;
      --space-10: 128px;

      /* RADIUS */
      --radius-sm:   8px;
      --radius-md:   14px;
      --radius-lg:   18px;
      --radius-xl:   24px;
      --radius-pill: 9999px;

      /* ELEVATION */
      --shadow-sm: 0 1px 2px rgba(16, 5, 1, 0.06);
      --shadow-md: 0 4px 12px rgba(16, 5, 1, 0.08);
      --shadow-lg: 0 12px 32px rgba(16, 5, 1, 0.12);

      /* MOTION */
      --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
      --duration-fast: 150ms;
      --duration-base: 240ms;
      --duration-slow: 480ms;

      /* LAYOUT */
      --container-max:    1280px;
      --gutter:           24px;
      --section-pad-y:    96px;
      --section-pad-y-sm: 56px;
    }

    /* ─── Base · design.md §1.3 ──────────────────────────────── */
    html { font-family: var(--font-sans); color: var(--text-body); background: var(--bg-page); scroll-behavior: smooth; }
    body { font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
    h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--text-headline); font-weight: 400; }
    ::selection { background: var(--color-orange-500); color: var(--color-ivoire); }

    /* ─── NAV · design.md §6.7 ──────────────────────────────── */
    nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-5) var(--space-7);
      border-bottom: 1px solid var(--border-subtle);
      position: sticky;
      top: 0;
      background: var(--bg-page);
      z-index: 100;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 1.05rem;
      letter-spacing: -0.04em;
      color: var(--text-headline);
      text-decoration: none;
    }
    .logo-symbol { display: block; width: auto; height: 22px; flex-shrink: 0; }

    .nav-links { display: flex; gap: var(--space-6); list-style: none; }
    .nav-links a {
      font-family: var(--font-serif);
      font-size: var(--fs-body-lg);
      color: var(--text-body);
      text-decoration: none;
      transition: color var(--duration-fast) var(--ease-out-expo);
    }
    .nav-links a:hover { color: var(--text-headline); }
    .nav-links a[aria-current="page"] { color: var(--text-accent); }

    /* ─── Buttons · design.md §6.1–6.3 ──────────────────────── */
    .btn {
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 16px;
      line-height: 1;
      padding: 14px 24px;
      border-radius: var(--radius-pill);
      border: none;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      transition: background var(--duration-base) var(--ease-out-expo),
                  transform  var(--duration-fast) var(--ease-out-expo);
    }
    .btn-schedule {
      background: var(--bg-accent);
      color: var(--text-on-orange);
      font-family: var(--font-sans);
      font-size: var(--fs-body);
      font-weight: 600;
      padding: 10px 22px;
      border-radius: var(--radius-pill);
      border: none;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      transition: background var(--duration-base) var(--ease-out-expo);
    }
    .btn-schedule:hover { background: var(--color-orange-600); }

    /* ─── HERO · design.md §6.5 ─────────────────────────────── */
    .hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      padding: var(--space-9) var(--space-7) var(--space-8);
      gap: var(--space-7);
      position: relative;
      min-height: 420px;
      background: var(--bg-page);
    }
    .deco-illustration {
      position: absolute;
      top: 30px;
      right: -20px;
      width: 320px;
      opacity: 0.12;
      pointer-events: none;
    }
    .hero-headline { z-index: 1; }
    .hero-headline .line-serif {
      font-family: var(--font-serif);
      font-size: clamp(52px, 6.5vw, var(--fs-display));
      font-weight: var(--fw-display);
      line-height: 1.05;
      letter-spacing: -0.02em;
      display: block;
      color: var(--text-headline);
    }
    .hero-headline .line-accent {
      font-family: var(--font-accent);
      font-size: clamp(52px, 6.5vw, var(--fs-display));
      font-weight: 400;
      line-height: 1.05;
      color: var(--text-accent);
      display: block;
    }
    .hero-body { z-index: 1; }
    .hero-body p {
      font-family: var(--font-sans);
      font-size: var(--fs-body-lg);
      line-height: var(--lh-body-lg);
      color: var(--text-body);
      max-width: 42ch;
      margin-bottom: var(--space-6);
    }
    .cta-group { display: flex; gap: var(--space-3); flex-wrap: wrap; }

    /* Legacy button aliases */
    .btn-primary {
      background: var(--color-noir-900);
      color: var(--text-on-noir);
      font-family: var(--font-sans);
      font-size: var(--fs-body);
      font-weight: 600;
      padding: 12px 26px;
      border-radius: var(--radius-pill);
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: background var(--duration-base) var(--ease-out-expo);
    }
    .btn-primary:hover { background: var(--color-noir-700); }

    .btn-outline {
      background: transparent;
      color: var(--text-headline);
      font-family: var(--font-sans);
      font-size: var(--fs-body);
      font-weight: 500;
      padding: 11px 26px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border-default);
      cursor: pointer;
      text-decoration: none;
      transition: background var(--duration-base) var(--ease-out-expo),
                  color var(--duration-base) var(--ease-out-expo),
                  border-color var(--duration-base) var(--ease-out-expo);
    }
    .btn-outline:hover {
      background: var(--color-noir-900);
      color: var(--text-on-noir);
      border-color: var(--color-noir-900);
    }

    /* ─── PHOTO STRIP ────────────────────────────────────────── */
    .photo-strip {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      height: 480px;
      overflow: hidden;
    }

    .photo-item {
      position: relative;
      overflow: hidden;
    }

    /*
     * Remplacer les valeurs background-color/background-image ci-dessous
     * par vos vraies photos :
     *   background-image: url('images/photo-ciel.jpg');
     *   background-size: cover;
     *   background-position: center;
     */

    /* Photo gauche — Stéphane, ciel, pellicule argentique Portra 400 */
    .photo-left {
      background-image: url('img/stephane_ciel.png');
      background-size: cover;
      background-position: 60% 55%;
    }

    /* Photo centre — scène labo + halftone overlay */
    .photo-center {
      background-image: url('img/strip-medical.jpg');
      background-size: cover;
      background-position: center;
    }
    .photo-center::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, var(--color-noir-900) 1px, transparent 1px);
      background-size: 4px 4px;
      mix-blend-mode: multiply;
      opacity: 0.45;
    }

    /* Photo droite — macro labo, duotone sombre (luminosity blend) */
    .photo-right {
      background-image: url('img/strip-lab.jpg');
      background-size: cover;
      background-position: center;
      background-color: var(--color-noir-900);
      background-blend-mode: luminosity;
    }
    .photo-right::after {
      content: '';
      position: absolute;
      inset: 0;
      background-color: var(--color-orange-700);
      mix-blend-mode: multiply;
      opacity: 0.35;
    }

    /* ─── C'EST QUOI ────────────────────────────────────────── */
    .cest-quoi {
      background: var(--bg-inverse);
      padding: var(--space-9) var(--space-7);
    }
    .cq-header {
      max-width: 680px;
      margin-bottom: var(--space-8);
    }
    .cq-label {
      font-family: var(--font-sans);
      font-size: var(--fs-label);
      font-weight: var(--fw-label);
      letter-spacing: var(--ls-label);
      text-transform: uppercase;
      color: var(--color-noir-500);
      display: block;
      margin-bottom: var(--space-5);
    }
    .cq-headline {
      font-family: var(--font-serif);
      font-size: clamp(44px, 5.5vw, 72px);
      font-weight: 300;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--text-on-noir);
      display: block;
    }
    .cq-headline-accent {
      font-family: var(--font-accent);
      font-size: clamp(44px, 5.5vw, 72px);
      color: var(--color-orange-500);
      display: block;
      margin-top: var(--space-2);
    }
    .cq-intro {
      font-family: var(--font-sans);
      font-size: var(--fs-body-lg);
      line-height: var(--lh-body-lg);
      color: var(--text-on-noir);
      opacity: 0.72;
      max-width: 560px;
      margin-top: var(--space-6);
    }
    .cq-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: rgba(242,231,221,.1);
      border: 1px solid rgba(242,231,221,.1);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .cq-card {
      background: color-mix(in srgb, var(--color-noir-900) 96%, var(--color-sable));
      padding: var(--space-7) var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }
    .cq-card-marker {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--color-orange-500);
    }
    .cq-card-title {
      font-family: var(--font-serif);
      font-size: var(--fs-h3);
      font-weight: 400;
      line-height: var(--lh-h3);
      color: var(--text-on-noir);
    }
    .cq-card-body {
      font-family: var(--font-sans);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      color: var(--text-on-noir);
      opacity: 0.62;
    }

    /* ─── PROCESSUS ─────────────────────────────────────────── */
    .processus {
      background: var(--bg-page);
      padding: var(--space-9) var(--space-7);
    }
    .processus-header {
      max-width: 560px;
      margin-bottom: var(--space-9);
    }
    .processus-header .label {
      font-family: var(--font-sans);
      font-size: var(--fs-label);
      font-weight: var(--fw-label);
      letter-spacing: var(--ls-label);
      text-transform: uppercase;
      color: var(--text-muted);
      display: block;
      margin-bottom: var(--space-4);
    }
    .processus-header h2 {
      font-family: var(--font-serif);
      font-weight: 300;
      font-size: clamp(28px, 3vw, var(--fs-h2));
      line-height: var(--lh-h2);
      letter-spacing: -0.02em;
      color: var(--text-headline);
    }
    .processus-header h2 em {
      font-style: italic;
      color: var(--text-accent);
    }
    .processus-steps {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2);
      max-width: 900px;
    }
    .step {
      position: relative;
      background: var(--bg-surface);
      border-radius: var(--radius-lg);
      padding: var(--space-7) var(--space-7);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }
    .step-meta {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-4);
    }
    .step-num {
      font-family: var(--font-accent);
      font-size: var(--fs-accent-sm);
      color: var(--text-accent);
      line-height: 1;
    }
    .step-duration {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      white-space: nowrap;
    }
    .step-title {
      font-family: var(--font-serif);
      font-size: var(--fs-h3);
      font-weight: 400;
      line-height: var(--lh-h3);
      color: var(--text-headline);
    }
    .step-body {
      font-family: var(--font-sans);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      color: var(--text-body);
    }
    .step-tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-2);
      margin-top: auto;
      padding-top: var(--space-3);
    }
    .step-tag {
      font-family: var(--font-sans);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--text-muted);
      background: var(--bg-surface);
      border-radius: var(--radius-pill);
      padding: 3px 10px;
    }

    /* ─── APPROCHE ──────────────────────────────────────────── */
    .approche { padding: var(--space-9) var(--space-7); background: var(--bg-page); }
    .approche-intro { max-width: 560px; margin-bottom: var(--space-8); }
    .approche-intro .label {
      font-family: var(--font-sans);
      font-size: var(--fs-label);
      font-weight: var(--fw-label);
      letter-spacing: var(--ls-label);
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: var(--space-3);
      display: block;
    }
    .approche-intro h2 {
      font-family: var(--font-serif);
      font-weight: 300;
      font-size: clamp(28px, 3vw, var(--fs-h2));
      line-height: var(--lh-h2);
      letter-spacing: -0.02em;
      color: var(--text-headline);
    }
    .piliers {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .pilier {
      background: var(--bg-page);
      padding: var(--space-7) var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }
    .pilier-num {
      font-family: var(--font-accent);
      font-size: var(--fs-accent-sm);
      color: var(--text-accent);
      line-height: 1;
    }
    .pilier-title {
      font-family: var(--font-serif);
      font-weight: 400;
      font-size: var(--fs-h3);
      line-height: var(--lh-h3);
      color: var(--text-headline);
    }
    .pilier-body {
      font-family: var(--font-sans);
      font-size: var(--fs-body-lg);
      line-height: var(--lh-body-lg);
      color: var(--text-body);
    }

    /* ─── SECTEURS ──────────────────────────────────────────── */
    .secteurs {
      background: var(--bg-surface);
      padding: var(--space-8) var(--space-7);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
    }
    .secteur {
      padding: var(--space-7) var(--space-7);
      border-right: 1px solid var(--border-subtle);
    }
    .secteur:last-child { border-right: none; }
    .secteur-icon {
      display: block;
      margin-bottom: var(--space-5);
      color: var(--text-accent);
      opacity: 0.9;
    }
    .secteur-title {
      font-family: var(--font-serif);
      font-weight: 300;
      font-size: var(--fs-h3);
      line-height: var(--lh-h3);
      color: var(--text-headline);
      letter-spacing: -0.02em;
      margin-bottom: var(--space-3);
    }
    .secteur-title em {
      font-family: var(--font-accent);
      font-style: normal;
      color: var(--text-accent);
    }
    .secteur-body {
      font-family: var(--font-sans);
      font-size: var(--fs-body-lg);
      line-height: var(--lh-body-lg);
      color: var(--text-body);
    }

    /* ─── PORTFOLIO ─────────────────────────────────────────── */
    .portfolio { background: var(--bg-surface); padding: var(--space-9) var(--space-7); }
    .portfolio-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-7); }
    .portfolio-title {
      font-family: var(--font-serif);
      font-weight: 300;
      font-size: clamp(36px, 4vw, var(--fs-h1));
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--text-headline);
    }
    .portfolio-title em { font-family: var(--font-accent); font-style: normal; color: var(--text-accent); }
    .portfolio-count {
      font-family: var(--font-sans);
      font-size: var(--fs-label);
      font-weight: var(--fw-label);
      color: var(--text-muted);
      letter-spacing: var(--ls-label);
      text-transform: uppercase;
      padding-bottom: var(--space-2);
    }
    .cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

    /* Card · design.md §6.4 */
    .card {
      background: var(--bg-page);
      border-radius: var(--radius-md);
      padding: var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      box-shadow: var(--shadow-sm);
      transition: transform var(--duration-base) var(--ease-out-expo),
                  box-shadow var(--duration-base) var(--ease-out-expo);
      cursor: default;
    }
    .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .card-top { display: flex; align-items: center; justify-content: space-between; }

    /* Badge · design.md §6.9 */
    .card-tag {
      font-family: var(--font-sans);
      font-size: var(--fs-caption);
      font-weight: 500;
      letter-spacing: var(--ls-label);
      text-transform: uppercase;
      color: var(--color-orange-700);
      background: var(--color-orange-50);
      padding: 4px 10px;
      border-radius: var(--radius-pill);
    }
    .card-year { font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--text-disabled); }
    .card-name {
      font-family: var(--font-serif);
      font-weight: 400;
      font-size: var(--fs-h3);
      line-height: var(--lh-h3);
      letter-spacing: -0.01em;
      color: var(--text-headline);
    }
    .card-tagline {
      font-family: var(--font-sans);
      font-size: var(--fs-body-lg);
      line-height: var(--lh-body-lg);
      color: var(--text-body);
      flex: 1;
    }
    .card-link {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-family: var(--font-sans);
      font-size: var(--fs-body);
      font-weight: 600;
      color: var(--text-muted);
      text-decoration: none;
      transition: color var(--duration-fast) var(--ease-out-expo);
      margin-top: var(--space-1);
    }
    .card-link:hover { color: var(--text-headline); }
    .card-link::after { content: '→'; }

    /* Variante inverse — card sombre §3.3 Noir + Sable */
    .card--inverse { background: var(--bg-inverse); }
    .card-tag--inverse { color: var(--text-on-noir); background: rgba(242,231,221,.1); opacity: 0.6; }
    .card-year--inverse { color: var(--text-on-noir); opacity: 0.35; }
    .card-name--inverse { color: var(--text-on-noir); }
    .card-tagline--inverse { color: var(--text-on-noir); opacity: 0.6; }
    .card-link--inverse { color: var(--text-accent); opacity: 1; }
    .card-link--inverse:hover { color: var(--color-orange-300); }

    /* ─── ÉQUIPE ────────────────────────────────────────────── */
    .equipe {
      padding: var(--space-9) var(--space-7);
      background: var(--color-orange-500);
      overflow: hidden;
    }
    .equipe-header { margin-bottom: var(--space-8); }
    .equipe-header .label {
      font-family: var(--font-sans);
      font-size: var(--fs-label);
      font-weight: var(--fw-label);
      letter-spacing: var(--ls-label);
      text-transform: uppercase;
      color: rgba(254,249,245,.6);
      display: block;
      margin-bottom: var(--space-3);
    }
    .equipe-header h2 {
      font-family: var(--font-serif);
      font-weight: 300;
      font-size: clamp(28px, 3vw, var(--fs-h2));
      letter-spacing: -0.02em;
      line-height: var(--lh-h2);
      color: var(--text-on-orange);
    }
    .founders { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); align-items: start; }
    .founder:nth-child(2) { margin-top: var(--space-8); }
    .founder:nth-child(3) { margin-top: var(--space-10); }
    .founder-photo {
      width: 100%;
      aspect-ratio: 3 / 4;
      border-radius: var(--radius-md);
      background: var(--color-orange-600);
      margin-bottom: var(--space-5);
      overflow: hidden;
      position: relative;
    }
    .founder-photo::before {
      content: attr(data-initials);
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-serif);
      font-size: 3rem;
      font-weight: 300;
      color: rgba(16,5,1,.2);
    }
    .founder-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      filter: grayscale(100%) contrast(1.05);
    }
    .founder-name {
      font-family: var(--font-serif);
      font-weight: 400;
      font-size: var(--fs-h3);
      line-height: var(--lh-h3);
      color: var(--text-on-orange);
      margin-bottom: var(--space-1);
    }
    .founder-role {
      font-family: var(--font-sans);
      font-size: var(--fs-label);
      font-weight: var(--fw-label);
      letter-spacing: var(--ls-label);
      text-transform: uppercase;
      color: rgba(254,249,245,.65);
      margin-bottom: var(--space-3);
    }
    .founder-bio {
      font-family: var(--font-sans);
      font-size: var(--fs-body-lg);
      line-height: var(--lh-body-lg);
      color: rgba(254,249,245,.8);
    }

    /* ─── ANCRAGE ───────────────────────────────────────────── */
    .ancrage {
      padding: var(--space-9) var(--space-7);
      background: var(--bg-page);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-9);
      align-items: center;
    }
    .ancrage-text .label {
      font-family: var(--font-sans);
      font-size: var(--fs-label);
      font-weight: var(--fw-label);
      letter-spacing: var(--ls-label);
      text-transform: uppercase;
      color: var(--text-muted);
      display: block;
      margin-bottom: var(--space-3);
    }
    .ancrage-text h2 {
      font-family: var(--font-serif);
      font-weight: 300;
      font-size: clamp(28px, 3vw, var(--fs-h2));
      line-height: var(--lh-h2);
      letter-spacing: -0.02em;
      margin-bottom: var(--space-5);
      color: var(--text-headline);
    }
    .ancrage-text h2 em { font-family: var(--font-accent); font-style: normal; color: var(--text-accent); }
    .ancrage-text p {
      font-family: var(--font-sans);
      font-size: var(--fs-body-lg);
      line-height: var(--lh-body-lg);
      color: var(--text-body);
      max-width: 40ch;
    }
    .themes { display: flex; flex-direction: column; margin-top: var(--space-7); }
    .theme-item {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      padding: var(--space-4) 0;
      border-top: 1px solid var(--border-subtle);
    }
    .theme-item:last-child { border-bottom: 1px solid var(--border-subtle); }
    .theme-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-accent); flex-shrink: 0; }
    .theme-label { font-family: var(--font-sans); font-size: var(--fs-body-lg); font-weight: 500; color: var(--text-headline); }
    .theme-sub { margin-left: auto; font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--text-muted); }
    .ancrage-visual { position: relative; display: flex; align-items: center; justify-content: center; }
    .ancrage-map { width: 100%; max-width: 420px; }
    /* map-pulse : pas d'animation infinie (design.md §8.3) */
    .map-pulse { }

    /* ─── CONTACT ───────────────────────────────────────────── */
    .contact {
      background: var(--bg-accent);
      padding: var(--space-9) var(--space-7);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-7);
    }
    .contact-intro {
      max-width: 600px;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }
    .contact h2 {
      font-family: var(--font-serif);
      font-weight: 300;
      font-size: clamp(32px, 4vw, var(--fs-h1));
      letter-spacing: -0.02em;
      line-height: 1.1;
      color: var(--text-on-orange);
      margin-bottom: var(--space-2);
    }
    .contact h2 em { font-family: var(--font-accent); font-style: normal; color: var(--color-noir-900); }
    .contact-intro > p {
      font-family: var(--font-sans);
      font-size: var(--fs-body-lg);
      line-height: var(--lh-body-lg);
      color: var(--text-on-orange);
      opacity: 0.9;
    }
    .contact-prep {
      list-style: none;
      padding: 0;
      margin: var(--space-3) 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }
    .contact-prep li {
      font-family: var(--font-sans);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      color: var(--text-on-orange);
      padding-left: 24px;
      position: relative;
    }
    .contact-prep li::before {
      content: '→';
      position: absolute;
      left: 0;
      top: 0;
      color: var(--color-noir-900);
      font-weight: 700;
    }
    .contact-prep li strong {
      color: var(--text-on-orange);
      font-weight: 600;
    }
    .contact-promise {
      font-family: var(--font-sans);
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      color: var(--text-on-orange);
      opacity: 0.85;
      margin-top: var(--space-2);
    }
    .contact-promise strong {
      color: var(--color-noir-900);
      font-weight: 700;
    }

    /* Carte formulaire Tally */
    .contact-form-card {
      width: 100%;
      max-width: 600px;
      background: var(--bg-page);
      border-radius: var(--radius-lg);
      padding: var(--space-6);
      box-shadow: var(--shadow-lg);
    }
    .contact-form-card iframe {
      display: block;
      border: 0;
      width: 100%;
      min-height: 380px;
    }

    .contact-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

    /* Boutons sur fond orange — secondary (noir) + ghost ivoire */
    .btn-white {
      background: var(--color-noir-900);
      color: var(--text-on-noir);
      font-family: var(--font-sans);
      font-size: var(--fs-body);
      font-weight: 600;
      padding: 12px 28px;
      border-radius: var(--radius-pill);
      border: none;
      text-decoration: none;
      transition: background var(--duration-base) var(--ease-out-expo);
    }
    .btn-white:hover { background: var(--color-noir-700); }

    .btn-ghost-white {
      background: transparent;
      color: var(--text-on-orange);
      font-family: var(--font-sans);
      font-size: var(--fs-body);
      font-weight: 500;
      padding: 11px 28px;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(254,249,245,.45);
      text-decoration: none;
      transition: border-color var(--duration-base) var(--ease-out-expo),
                  background var(--duration-base) var(--ease-out-expo);
    }
    .btn-ghost-white:hover { border-color: var(--color-ivoire); background: rgba(254,249,245,.12); }

    .contact-footer {
      margin-top: var(--space-4);
      font-family: var(--font-sans);
      font-size: var(--fs-caption);
      color: var(--text-on-orange);
      opacity: 0.6;
    }
    .contact-footer a {
      color: var(--text-on-orange);
      text-decoration: none;
      opacity: 0.85;
      transition: opacity var(--duration-fast) var(--ease-out-expo);
    }
    .contact-footer a:hover { opacity: 1; }

    /* ─── RESPONSIVE · design.md §7.5 ──────────────────────── */
    @media (max-width: 1024px) {
      .cards-grid  { grid-template-columns: repeat(2, 1fr); }
      .piliers     { grid-template-columns: 1fr; }
      .secteurs    { grid-template-columns: 1fr; }
      .secteur     { border-right: none; border-bottom: 1px solid rgba(242,231,221,.1); }
      .ancrage     { grid-template-columns: 1fr; gap: var(--space-7); }
    }
    @media (max-width: 768px) {
      nav     { padding: var(--space-4) var(--gutter); }
      .nav-links { display: none; }
      .hero   { grid-template-columns: 1fr; padding: var(--section-pad-y-sm) var(--gutter) var(--space-7); gap: var(--space-6); }
      .deco-illustration { width: 180px; opacity: 0.08; }
      .photo-strip { height: 280px; }
      .approche, .portfolio, .equipe, .ancrage, .contact { padding: var(--section-pad-y-sm) var(--gutter); }
      .secteurs   { padding: var(--section-pad-y-sm) var(--gutter); }
      .portfolio-header { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
      .cards-grid { grid-template-columns: 1fr; }
      .founders   { grid-template-columns: 1fr; }
      .founder:nth-child(2), .founder:nth-child(3) { margin-top: 0; }
    }

/* ─── LANG SWITCH ─────────────────────────────────────────── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: var(--space-5);
  color: var(--text-muted);
}
.lang-switch a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  transition: color var(--duration-fast) ease;
}
.lang-switch a:hover { color: var(--text-headline); }
.lang-switch a.is-active {
  color: var(--text-headline);
  background: var(--bg-surface);
}
.lang-switch .lang-sep {
  opacity: 0.3;
  font-weight: 400;
}
@media (max-width: 720px) {
  .lang-switch { font-size: 11px; margin-right: var(--space-3); }
}