*, *::before, *::after { box-sizing: border-box; }

    :root {
      /* ---- Cosmic (dark) ---- */
      --space-900: #05060E;
      --space-850: #080A1A;
      --space-800: #0B0D24;
      --space-panel: #11142E;

      /* ---- Brand cobalt (from logo) ---- */
      --brand: #2B43FF;
      --brand-glow: #4D6BFF;
      --brand-deep: #1A2EB8;
      --brand-soft: #8095FF;

      /* ---- Light side ---- */
      --paper: #F4F5FB;
      --paper-2: #ECEEF8;
      --surface: #FFFFFF;
      --ink: #0B0D24;
      --ink-soft: #2A2E45;
      --muted: #565C76;
      --faint: #868CA6;
      --line: rgba(11,13,36,.12);
      --line-strong: rgba(11,13,36,.22);

      /* ---- On dark ---- */
      --star: #F4F6FF;
      --star-dim: #B2BAE4;
      --star-faint: #7D86B6;
      --line-dark: rgba(128,149,255,.16);

      /* ---- Layered, cobalt-tinted shadows ---- */
      --shadow-card: 0 1px 2px rgba(11,13,36,.04), 0 18px 44px -26px rgba(43,67,255,.34);
      --shadow-hover: 0 2px 6px rgba(11,13,36,.06), 0 34px 64px -28px rgba(43,67,255,.50);
      --shadow-glow: 0 0 0 1px rgba(77,107,255,.18), 0 30px 80px -34px rgba(43,67,255,.70);
      --shadow-btn: 0 10px 24px -10px rgba(43,67,255,.65);
      --shadow-btn-hover: 0 16px 34px -12px rgba(43,67,255,.85);

      /* ---- Radius ---- */
      --r-lg: 22px;
      --r-md: 16px;
      --r-sm: 12px;
    }

    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      font-family: 'Space Grotesk', system-ui, sans-serif;
      line-height: 1.7;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      font-optical-sizing: auto;
      background:
        radial-gradient(1100px 620px at 108% -8%, rgba(43,67,255,.07), transparent 60%),
        radial-gradient(880px 520px at -8% 6%, rgba(110,134,255,.06), transparent 55%),
        var(--paper);
      background-attachment: fixed;
    }
    a { color: inherit; text-decoration: none; }
    input, textarea, select, button { font-family: inherit; }
    ::selection { background: var(--brand); color: #fff; }
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: var(--paper-2); }
    ::-webkit-scrollbar-thumb { background: rgba(43,67,255,.35); border-radius: 8px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(43,67,255,.55); }

    *:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 3px;
      border-radius: 6px;
    }

    /* ---- Typographic primitives ---- */
    .display { font-family: 'Fraunces', Georgia, serif; letter-spacing: -0.02em; line-height: 1.04; }
    .eyebrow {
      font: 700 .78rem/1 'Space Mono', monospace;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--brand);
      margin: 0 0 18px;
    }

    /* ---- Reveal (transform + opacity only) ---- */
    [data-reveal] { opacity: 1; }
    @keyframes wcReveal {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: none; }
    }
    @supports (animation-timeline: view()) {
      [data-reveal] {
        animation: wcReveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 52%;
      }
    }

    @keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    @keyframes wcTwinkle { from { opacity: .45; } to { opacity: 1; } }
    @keyframes wcDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-3.2%, 2.4%, 0); } }
    @keyframes wcDrift2 { from { transform: translate3d(0,0,0); } to { transform: translate3d(2.6%, -2%, 0); } }
    @keyframes wcFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
    @keyframes wcNodePulse { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

    /* ---- Header / Nav ---- */
    .header {
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: blur(14px) saturate(1.4);
      -webkit-backdrop-filter: blur(14px) saturate(1.4);
      background: rgba(244,245,251,.78);
      border-bottom: 1px solid var(--line);
    }
    .header-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 15px clamp(20px,5vw,72px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 11px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 4px;
      color: var(--ink);
    }
    .logo-img { display: block; height: 42px; width: auto; }
    .nav-desktop { display: flex; align-items: center; gap: 30px; }
    .nav-link {
      position: relative;
      padding: 6px 2px;
      font: 600 .92rem/1 'Space Grotesk', sans-serif;
      letter-spacing: .005em;
      cursor: pointer;
      white-space: nowrap;
      color: var(--ink-soft);
      background: none; border: none;
      transition: color .2s ease;
    }
    .nav-link::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -3px;
      height: 2px;
      background: var(--brand);
      border-radius: 2px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .25s cubic-bezier(.2,.7,.2,1);
    }
    .nav-link:hover { color: var(--brand); }
    .nav-link:hover::after { transform: scaleX(1); }
    .nav-link.active { color: var(--brand); }
    .nav-link.active::after { transform: scaleX(1); }

    .btn-cta {
      margin-left: 6px;
      padding: 11px 22px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--brand-glow), var(--brand));
      color: #fff;
      font: 600 .9rem 'Space Grotesk', sans-serif;
      cursor: pointer;
      border: none;
      box-shadow: var(--shadow-btn);
      transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
    }
    .btn-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); }
    .btn-cta:active { transform: translateY(0); }

    .btn-menu {
      display: none;
      background: none;
      border: 1px solid var(--line-strong);
      border-radius: 10px;
      padding: 9px 12px;
      cursor: pointer;
      font: 700 1rem 'Space Mono', monospace;
      color: var(--ink);
      transition: border-color .2s ease, color .2s ease;
    }
    .btn-menu:hover { border-color: var(--brand); color: var(--brand); }

    .mobile-menu {
      display: none;
      padding: 6px clamp(20px,5vw,72px) 24px;
      border-top: 1px solid var(--line);
      background: rgba(244,245,251,.98);
    }
    .mobile-menu.open { display: block; }
    .mobile-link {
      display: block;
      width: 100%;
      text-align: left;
      padding: 15px 2px;
      font: 800 1.18rem 'Fraunces', Georgia, serif;
      letter-spacing: -0.02em;
      cursor: pointer;
      border: none;
      border-bottom: 1px solid var(--line);
      background: none;
      color: var(--ink);
      transition: color .2s ease;
    }
    .mobile-link:hover, .mobile-link.active { color: var(--brand); }

    /* ---- Buttons ---- */
    .btn-primary {
      padding: 15px 30px;
      border-radius: 999px;
      border: none;
      background: linear-gradient(180deg, var(--brand-glow), var(--brand));
      color: #fff;
      font: 600 1rem 'Space Grotesk', sans-serif;
      cursor: pointer;
      box-shadow: var(--shadow-btn);
      transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); }
    .btn-primary:active { transform: translateY(0) scale(.99); }

    .btn-secondary {
      padding: 15px 30px;
      border-radius: 999px;
      background: transparent;
      border: 1px solid var(--line-strong);
      color: var(--ink);
      font: 600 1rem 'Space Grotesk', sans-serif;
      cursor: pointer;
      transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .2s ease, background-color .2s ease;
    }
    .btn-secondary:hover { transform: translateY(-2px); border-color: var(--brand); background: rgba(43,67,255,.06); }
    .btn-secondary:active { transform: translateY(0); }

    /* Ghost button on dark backgrounds */
    .btn-ghost {
      padding: 15px 30px;
      border-radius: 999px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(178,186,228,.34);
      color: var(--star);
      font: 600 1rem 'Space Grotesk', sans-serif;
      cursor: pointer;
      transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .2s ease, background-color .2s ease;
    }
    .btn-ghost:hover { transform: translateY(-2px); border-color: var(--brand-soft); background: rgba(77,107,255,.14); }
    .btn-ghost:active { transform: translateY(0); }

    .link-accent {
      font: 600 1rem 'Space Grotesk', sans-serif;
      color: var(--brand);
      cursor: pointer;
      border: none;
      background: none;
      padding: 4px 0 3px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-bottom: 1px solid rgba(43,67,255,.5);
      transition: gap .25s cubic-bezier(.2,.7,.2,1), border-color .2s ease;
    }
    .link-accent:hover { gap: 12px; border-color: var(--brand); }

    /* ---- Pages ---- */
    .page { animation: pageIn .45s cubic-bezier(.2,.7,.2,1) both; }
    .page.hidden { display: none; }

    /* ===========================================================
       COSMIC HERO
       =========================================================== */
    .hero-cosmic {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(900px 520px at 78% 18%, rgba(43,67,255,.32), transparent 62%),
        radial-gradient(700px 480px at 12% 90%, rgba(26,46,184,.30), transparent 60%),
        linear-gradient(180deg, var(--space-900), var(--space-800) 70%, var(--space-850));
      border-bottom: 1px solid var(--line-dark);
    }
    .hero-cosmic__stars, .hero-cosmic__stars--2 {
      position: absolute;
      inset: -25% -12%;
      pointer-events: none;
      background-repeat: no-repeat;
      will-change: transform, opacity;
    }
    .hero-cosmic__stars {
      background-image:
        radial-gradient(1.6px 1.6px at 10% 22%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 24% 62%, #cdd6ff, transparent),
        radial-gradient(1.6px 1.6px at 39% 30%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 54% 72%, #aab4f0, transparent),
        radial-gradient(2px 2px at 64% 26%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 77% 56%, #cdd6ff, transparent),
        radial-gradient(1.6px 1.6px at 87% 36%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 92% 76%, #9fa9e6, transparent),
        radial-gradient(1.2px 1.2px at 16% 82%, #fff, transparent),
        radial-gradient(1.6px 1.6px at 34% 90%, #cdd6ff, transparent),
        radial-gradient(1.2px 1.2px at 49% 14%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 71% 92%, #aab4f0, transparent),
        radial-gradient(1.6px 1.6px at 5% 50%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 60% 46%, #cdd6ff, transparent);
      opacity: .92;
      animation: wcTwinkle 6s ease-in-out infinite alternate, wcDrift 70s linear infinite;
    }
    .hero-cosmic__stars--2 {
      background-image:
        radial-gradient(1px 1px at 18% 35%, #fff, transparent),
        radial-gradient(1px 1px at 30% 12%, #b9c2f5, transparent),
        radial-gradient(1px 1px at 45% 48%, #fff, transparent),
        radial-gradient(1px 1px at 58% 20%, #9fa9e6, transparent),
        radial-gradient(1px 1px at 69% 66%, #fff, transparent),
        radial-gradient(1px 1px at 82% 14%, #cdd6ff, transparent),
        radial-gradient(1px 1px at 95% 50%, #fff, transparent),
        radial-gradient(1px 1px at 8% 70%, #b9c2f5, transparent),
        radial-gradient(1px 1px at 40% 78%, #fff, transparent),
        radial-gradient(1px 1px at 88% 88%, #9fa9e6, transparent);
      opacity: .6;
      animation: wcTwinkle 8s ease-in-out infinite alternate-reverse, wcDrift2 95s linear infinite;
    }
    .hero-cosmic__constellation {
      position: absolute;
      top: clamp(30px, 7vw, 120px);
      right: clamp(-40px, 2vw, 40px);
      width: clamp(340px, 56vw, 720px);
      height: auto;
      pointer-events: none;
      opacity: .92;
      animation: wcFloat 9s ease-in-out infinite;
    }
    .c-node { animation: wcNodePulse 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
    .c-node--1 { animation-delay: 0s; }
    .c-node--2 { animation-delay: .9s; }
    .c-node--3 { animation-delay: 1.8s; }
    .c-node--4 { animation-delay: 2.7s; }
    .c-node--5 { animation-delay: 3.6s; }
    /* Proximity glow: app.js sets --glow (0 → 1) as the pointer nears each star */
    .c-node > circle { transform-box: fill-box; transform-origin: center; transition: transform .35s ease-out; }
    .c-node > circle:nth-child(1) { transform: scale(calc(1 + var(--glow, 0) * 1.1)); }
    .c-node > circle:nth-child(2) { transform: scale(calc(1 + var(--glow, 0) * 1.7)); }
    .c-node > circle:nth-child(3) { transform: scale(calc(1 + var(--glow, 0) * .5)); }

    .hero {
      position: relative;
      z-index: 2;
      max-width: 1200px;
      margin: 0 auto;
      padding: clamp(96px,15vw,180px) clamp(20px,5vw,72px) clamp(80px,12vw,140px);
    }
    .hero-inner { max-width: 40ch; }
    .hero .eyebrow { color: var(--brand-soft); }
    .hero-h1 {
      font-family: 'Fraunces', Georgia, serif;
      font-weight: 800;
      font-size: clamp(2.9rem, 7.5vw, 6.2rem);
      line-height: .98;
      letter-spacing: -0.02em;
      margin: 0 0 26px;
      color: var(--star);
    }
    .hero-h1 em {
      font-style: normal;
      background: linear-gradient(120deg, var(--brand-soft), var(--brand-glow));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .hero-sub {
      font: 400 clamp(1.05rem,1.5vw,1.28rem)/1.65 'Space Grotesk', sans-serif;
      color: var(--star-dim);
      max-width: 34ch;
      margin: 0 0 36px;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
    .hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(178,186,228,.28);
      background: rgba(255,255,255,.04);
      font: 600 .8rem 'Space Grotesk', sans-serif;
      color: var(--star-dim);
      white-space: nowrap;
    }

    /* ---- Generic section container ---- */
    .section { max-width: 1200px; margin: 0 auto; padding: clamp(64px,9vw,116px) clamp(20px,5vw,72px); }
    .section-head { max-width: none; margin: 0 auto clamp(40px,5vw,60px); text-align: center; }

    /* ---- Bourgogne outline behind the "Ancré en Bourgogne" section ---- */
    .bourgogne-section { position: relative; isolation: isolate; }
    .bourgogne-map {
      position: absolute; z-index: -1;
      top: 50%; left: 50%; transform: translate(-50%,-50%);
      height: calc(100% - 24px); width: auto; max-width: 100%;
      pointer-events: none;
    }
    .bourgogne-map path {
      fill: none;
      stroke: var(--brand);
      stroke-width: 1.5; stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
      opacity: .35;
    }
    .section-h2 {
      font-family: 'Fraunces', Georgia, serif;
      font-weight: 700;
      font-size: clamp(1.25rem,3.3vw,2.7rem);
      line-height: 1.04;
      letter-spacing: -0.018em;
      margin: 0 auto;
      color: var(--ink);
      white-space: nowrap;
    }

    /* ---- Stats ---- */
    .stats-section {
      position: relative;
      background:
        radial-gradient(700px 300px at 80% 0%, rgba(43,67,255,.07), transparent 60%),
        var(--paper-2);
      border-bottom: 1px solid var(--line);
    }
    .stats-grid {
      max-width: 1200px;
      margin: 0 auto;
      padding: clamp(52px,7vw,90px) clamp(20px,5vw,72px);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
      gap: clamp(28px,4vw,52px);
    }
    .stat-num {
      font-family: 'Fraunces', Georgia, serif;
      font-weight: 800;
      font-size: clamp(2.3rem,4vw,3.2rem);
      line-height: 1.06;
      letter-spacing: -0.018em;
      white-space: nowrap;
      padding-right: .06em;
      background: linear-gradient(150deg, var(--brand), var(--brand-glow));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .stat-label {
      margin: 14px 0 0;
      font: 700 .78rem 'Space Mono', monospace;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--muted);
    }

    /* ---- Cards (services aperçu) ---- */
    .cards-3 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr));
      gap: 22px;
    }
    .card {
      background:
        linear-gradient(180deg, rgba(43,67,255,.03), transparent 40%),
        var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 34px 30px;
      box-shadow: var(--shadow-card);
      transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
    }
    .card:hover { transform: translateY(-7px); box-shadow: var(--shadow-hover); border-color: rgba(43,67,255,.28); }
    .card-num {
      display: inline-flex;
      width: 44px; height: 44px;
      align-items: center; justify-content: center;
      border-radius: 12px;
      background: linear-gradient(160deg, rgba(43,67,255,.16), rgba(77,107,255,.08));
      color: var(--brand);
      font: 700 1.25rem 'Space Mono', monospace;
    }
    .card-h3 { font: 700 1.5rem 'Fraunces', Georgia, serif; letter-spacing: -0.02em; margin: 20px 0 12px; color: var(--ink); }
    .card-p { font: 400 1rem/1.65 'Space Grotesk', sans-serif; color: var(--muted); margin: 0; }

    /* ---- Testimonials ---- */
    .testi-section {
      position: relative;
      background:
        radial-gradient(680px 360px at 15% 10%, rgba(43,67,255,.07), transparent 60%),
        var(--paper-2);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .testi-inner { max-width: 1200px; margin: 0 auto; padding: clamp(64px,9vw,112px) clamp(20px,5vw,72px); }
    .testi-header {
      display: flex; flex-wrap: wrap;
      align-items: flex-end; justify-content: space-between;
      gap: 18px;
      margin-bottom: clamp(36px,5vw,56px);
    }
    .testi-h2 {
      font: 700 clamp(2rem,4.6vw,3.5rem) 'Fraunces', Georgia, serif;
      letter-spacing: -0.018em; line-height: 1.04;
      margin: 0; max-width: 16ch; color: var(--ink);
    }
    .stars-rating { font: 700 1rem 'Space Mono', monospace; color: var(--brand); white-space: nowrap; }
    .cards-testi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); gap: 22px; }
    .testi-card {
      margin: 0;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 30px 28px;
      display: flex; flex-direction: column; gap: 16px;
      box-shadow: var(--shadow-card);
      transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
    }
    .testi-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
    .testi-stars { color: var(--brand); font-size: 1rem; letter-spacing: 3px; }
    .testi-quote { margin: 0; font: 400 1.04rem/1.65 'Space Grotesk', sans-serif; color: var(--ink-soft); }
    .testi-name { margin-top: auto; font: 700 1.02rem 'Fraunces', Georgia, serif; letter-spacing: -0.01em; color: var(--ink); }
    .testi-sector {
      display: block; margin-top: 5px;
      font: 400 .76rem 'Space Mono', monospace;
      color: var(--faint); text-transform: uppercase; letter-spacing: .08em;
    }

    /* ---- CTA (cosmic) ---- */
    .cta-section { max-width: 1200px; margin: 0 auto; padding: clamp(64px,9vw,120px) clamp(20px,5vw,72px); }
    .cta-box {
      position: relative;
      overflow: hidden;
      border-radius: var(--r-lg);
      padding: clamp(44px,6vw,80px);
      text-align: center;
      color: var(--star);
      background:
        radial-gradient(600px 320px at 80% 10%, rgba(77,107,255,.35), transparent 60%),
        radial-gradient(520px 320px at 10% 100%, rgba(26,46,184,.40), transparent 60%),
        linear-gradient(160deg, var(--space-800), var(--space-900));
      border: 1px solid var(--line-dark);
      box-shadow: var(--shadow-glow);
    }
    .cta-box::before {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none;
      background-image:
        radial-gradient(1.4px 1.4px at 20% 30%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 70% 25%, #cdd6ff, transparent),
        radial-gradient(1.4px 1.4px at 45% 70%, #fff, transparent),
        radial-gradient(1.2px 1.2px at 85% 65%, #aab4f0, transparent),
        radial-gradient(1.2px 1.2px at 12% 80%, #fff, transparent);
      opacity: .7;
      animation: wcTwinkle 7s ease-in-out infinite alternate;
    }
    .cta-h2 { position: relative; font: 800 clamp(2rem,4.6vw,3.3rem) 'Fraunces', Georgia, serif; letter-spacing: -0.018em; line-height: 1.04; margin: 0 0 18px; }
    .cta-p { position: relative; font: 400 1.1rem/1.65 'Space Grotesk', sans-serif; color: var(--star-dim); margin: 0 auto 32px; max-width: 44ch; }
    .cta-box .btn-primary { position: relative; }

    /* ===========================================================
       INNER PAGES
       =========================================================== */
    .page-hero {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      padding: clamp(64px,9vw,108px) clamp(20px,5vw,72px) clamp(30px,4vw,52px);
    }
    .page-h1 {
      font: 800 clamp(2.5rem,6vw,5rem) 'Fraunces', Georgia, serif;
      letter-spacing: -0.02em; line-height: .98;
      margin: 0 0 22px; max-width: 16ch; color: var(--ink);
    }
    .page-sub {
      font: 400 clamp(1.05rem,1.5vw,1.22rem)/1.65 'Space Grotesk', sans-serif;
      color: var(--muted); max-width: 46ch; margin: 0;
    }

    /* ---- Services ---- */
    .services-list {
      max-width: 1200px; margin: 0 auto;
      padding: 0 clamp(20px,5vw,72px) clamp(20px,4vw,48px);
      display: flex; flex-direction: column; gap: 24px;
    }
    .service-article {
      background:
        linear-gradient(180deg, rgba(43,67,255,.03), transparent 35%),
        var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: clamp(30px,4vw,52px);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr));
      gap: clamp(28px,4vw,56px);
      box-shadow: var(--shadow-card);
    }
    .service-n {
      font: 800 2.6rem 'Fraunces', Georgia, serif;
      letter-spacing: -0.02em;
      background: linear-gradient(150deg, var(--brand), var(--brand-glow));
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .service-tag {
      font: 700 .74rem 'Space Mono', monospace;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--faint); margin: 8px 0 14px;
    }
    .service-h2 { font: 700 clamp(1.8rem,3vw,2.6rem) 'Fraunces', Georgia, serif; letter-spacing: -0.018em; margin: 0 0 16px; color: var(--ink); }
    .service-desc { font: 400 1.05rem/1.65 'Space Grotesk', sans-serif; color: var(--ink-soft); margin: 0 0 18px; }
    .service-purpose { font: 400 1rem/1.65 'Space Grotesk', sans-serif; color: var(--muted); margin: 0; }
    .service-kw { color: var(--brand); font-family: 'Space Mono',monospace; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
    .service-stats {
      display: flex; flex-direction: column; justify-content: center; gap: 18px;
      border-left: 1px solid var(--line);
      padding-left: clamp(0px,3vw,40px);
    }
    .stat-row { display: flex; align-items: baseline; gap: 14px; }
    .stat-k { font: 700 1.55rem 'Fraunces', Georgia, serif; letter-spacing: -0.02em; color: var(--ink); min-width: 92px; }
    .stat-v { font: 400 .98rem 'Space Grotesk', sans-serif; color: var(--muted); }

    .extras { max-width: 1200px; margin: 0 auto; padding: clamp(44px,5vw,68px) clamp(20px,5vw,72px); }
    .extras-label { font: 700 .78rem 'Space Mono', monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin: 0 0 24px; }
    .extras-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px),1fr)); gap: 18px; }
    .extra-card {
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 28px;
      background: var(--surface);
      transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease;
    }
    .extra-card:hover { transform: translateY(-5px); border-color: rgba(43,67,255,.28); }
    .extra-h3 { font: 700 1.28rem 'Fraunces', Georgia, serif; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--ink); }
    .extra-p { font: 400 .98rem/1.6 'Space Grotesk', sans-serif; color: var(--muted); margin: 0; }

    .aeo-box {
      position: relative; overflow: hidden;
      border-radius: var(--r-lg);
      padding: clamp(30px,4vw,46px);
      margin-top: 32px;
      display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
      color: var(--star);
      background:
        radial-gradient(420px 260px at 90% 10%, rgba(77,107,255,.32), transparent 62%),
        linear-gradient(160deg, var(--space-800), var(--space-900));
      border: 1px solid var(--line-dark);
      box-shadow: var(--shadow-glow);
    }
    .aeo-label { font: 700 .74rem 'Space Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-soft); margin: 0 0 10px; }
    .aeo-text { font: 400 1.05rem/1.6 'Space Grotesk', sans-serif; color: var(--star-dim); margin: 0; max-width: 52ch; }
    .aeo-em { color: var(--star); font-style: normal; font-weight: 600; }

    /* ---- Clients ---- */
    .clients-list {
      max-width: 1200px; margin: 0 auto;
      padding: 0 clamp(20px,5vw,72px) clamp(40px,6vw,80px);
      display: flex; flex-direction: column; gap: 22px;
    }
    .client-figure {
      margin: 0;
      background:
        linear-gradient(180deg, rgba(43,67,255,.03), transparent 35%),
        var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: clamp(28px,4vw,44px);
      display: flex;
      flex-direction: column;
      gap: clamp(26px,3.5vw,40px);
      box-shadow: var(--shadow-card);
      transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
    }
    .client-figure:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
    .client-top {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),auto));
      gap: clamp(20px,4vw,48px);
    }
    .client-meta { min-width: 200px; }

    /* ---- Client portfolio gallery ---- */
    .client-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr));
      gap: 16px;
    }
    .shot {
      position: relative;
      display: block;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--line);
      box-shadow: var(--shadow-card);
      aspect-ratio: 4 / 3;
      background: var(--paper-2);
    }
    .shot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
      transition: transform .45s cubic-bezier(.2,.7,.2,1);
    }
    .shot::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(43,67,255,.05) 0%, transparent 30%, rgba(11,13,36,.22) 100%);
      opacity: .9;
      transition: opacity .3s ease;
    }
    .shot:hover img { transform: scale(1.06); }
    .shot:hover::after { opacity: .55; }
    .shot:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

    /* ---- Lightbox ---- */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(16px, 4vw, 56px);
      background: rgba(5, 6, 14, .82);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      visibility: hidden;
      transition: opacity .25s ease, visibility .25s ease;
    }
    .lightbox.open { opacity: 1; visibility: visible; }
    .lightbox__img {
      max-width: 100%;
      max-height: 100%;
      border-radius: 12px;
      border: 1px solid var(--line-dark);
      box-shadow: var(--shadow-glow);
      transform: scale(.96);
      transition: transform .28s cubic-bezier(.2,.7,.2,1);
    }
    .lightbox.open .lightbox__img { transform: scale(1); }
    .lightbox__close {
      position: absolute;
      top: clamp(12px, 3vw, 28px);
      right: clamp(12px, 3vw, 28px);
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid rgba(178,186,228,.34);
      background: rgba(255,255,255,.06);
      color: var(--star);
      font: 400 1.5rem 'Space Grotesk', sans-serif;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .2s cubic-bezier(.2,.7,.2,1), background-color .2s ease, border-color .2s ease;
    }
    .lightbox__close:hover { background: rgba(77,107,255,.2); border-color: var(--brand-soft); transform: rotate(90deg); }
    .lightbox__nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid rgba(178,186,228,.34);
      background: rgba(255,255,255,.06);
      color: var(--star);
      font: 400 1.5rem 'Space Grotesk', sans-serif;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .2s cubic-bezier(.2,.7,.2,1), background-color .2s ease, border-color .2s ease;
    }
    .lightbox__nav:hover { background: rgba(77,107,255,.2); border-color: var(--brand-soft); }
    .lightbox__nav--prev { left: clamp(10px, 3vw, 28px); }
    .lightbox__nav--next { right: clamp(10px, 3vw, 28px); }
    .lightbox__nav:active { transform: translateY(-50%) scale(.92); }
    @media (max-width: 600px) { .lightbox__nav { display: none; } }
    .client-stars { color: var(--brand); font-size: 1.05rem; letter-spacing: 3px; }
    .client-name { font: 700 1.5rem 'Fraunces', Georgia, serif; letter-spacing: -0.02em; margin: 14px 0 6px; color: var(--ink); }
    .client-sector { font: 400 .76rem 'Space Mono', monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 0 0 16px; }
    .client-site-link {
      display: inline-flex; align-items: center; gap: 6px;
      font: 600 .9rem 'Space Grotesk', sans-serif;
      color: var(--brand);
      border-bottom: 1px solid rgba(43,67,255,.5);
      padding-bottom: 2px;
      transition: gap .25s cubic-bezier(.2,.7,.2,1), border-color .2s ease;
    }
    .client-site-link:hover { gap: 11px; border-color: var(--brand); }
    .client-quote {
      margin: 0;
      font: 400 clamp(1.05rem,1.7vw,1.3rem)/1.65 'Space Grotesk', sans-serif;
      color: var(--ink-soft);
      align-self: center;
      border-left: 2px solid var(--brand);
      padding-left: 24px;
    }
    .clients-cta { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px,5vw,72px) clamp(60px,8vw,110px); }
    .clients-cta-box {
      text-align: center;
      border-radius: var(--r-lg);
      padding: clamp(44px,6vw,72px);
      background:
        radial-gradient(540px 300px at 50% 0%, rgba(43,67,255,.08), transparent 60%),
        var(--paper-2);
      border: 1px solid var(--line);
    }
    .clients-cta-h2 { font: 800 clamp(1.8rem,4vw,2.8rem) 'Fraunces', Georgia, serif; letter-spacing: -0.018em; margin: 0 0 18px; color: var(--ink); }

    /* ---- Contact ---- */
    .contact-section {
      max-width: 1200px; margin: 0 auto;
      padding: clamp(64px,9vw,108px) clamp(20px,5vw,72px) clamp(60px,8vw,110px);
      display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr));
      gap: clamp(40px,6vw,80px);
    }
    .contact-h1 { font: 800 clamp(2.4rem,6vw,4.4rem) 'Fraunces', Georgia, serif; letter-spacing: -0.02em; line-height: .98; margin: 0 0 24px; color: var(--ink); }
    .contact-highlight {
      display: inline-flex; align-items: center;
      padding: 10px 20px; margin: 0 0 36px;
      border-radius: 999px;
      background: var(--brand); color: #fff;
      font: 700 1.05rem 'Space Grotesk', sans-serif; letter-spacing: .01em;
      box-shadow: 0 8px 24px rgba(43,67,255,.25);
    }
    .contact-info { display: flex; flex-direction: column; gap: 24px; }
    .info-label { font: 700 .72rem 'Space Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 0 0 7px; }
    .info-value {
      font: 700 1.22rem 'Fraunces', Georgia, serif; letter-spacing: -0.01em; color: var(--ink);
      border-bottom: 1px solid var(--line-strong);
      transition: color .2s ease, border-color .2s ease;
    }
    .info-value:hover { color: var(--brand); border-color: var(--brand); }
    .info-value-plain { font: 700 1.22rem 'Fraunces', Georgia, serif; letter-spacing: -0.01em; color: var(--ink); }

    .form-card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: clamp(28px,4vw,42px);
      box-shadow: var(--shadow-card);
    }
    .form { display: flex; flex-direction: column; gap: 20px; }
    .form-group { display: flex; flex-direction: column; }
    .form-label { font: 700 .74rem 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
    .form-input {
      width: 100%;
      padding: 14px 16px;
      border: 1px solid var(--line-strong);
      border-radius: var(--r-sm);
      background: var(--paper);
      font: 400 1rem 'Space Grotesk', sans-serif;
      color: var(--ink);
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    }
    .form-input::placeholder { color: var(--faint); }
    .form-input:hover { border-color: var(--brand-soft); }
    .form-input:focus { border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 4px rgba(43,67,255,.14); }
    .form-textarea { resize: vertical; }
    .btn-submit {
      padding: 15px;
      border-radius: var(--r-sm);
      border: none;
      background: linear-gradient(180deg, var(--brand-glow), var(--brand));
      color: #fff;
      font: 600 1rem 'Space Grotesk', sans-serif;
      cursor: pointer;
      box-shadow: var(--shadow-btn);
      transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
    }
    .btn-submit:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); }
    .btn-submit:active { transform: translateY(0); }
    .btn-submit:disabled { opacity: .65; cursor: progress; transform: none; box-shadow: none; }

    .form-success { text-align: center; padding: 30px 10px; }
    .success-icon { font: 400 2.6rem 'Space Mono', monospace; color: var(--brand); }
    .success-h3 { font: 700 1.6rem 'Fraunces', Georgia, serif; letter-spacing: -0.02em; margin: 16px 0 10px; color: var(--ink); }
    .success-p { font: 400 1rem/1.65 'Space Grotesk', sans-serif; color: var(--muted); margin: 0; }

    /* ---- Devis ---- */
    .devis-hero { max-width: 980px; margin: 0 auto; padding: clamp(64px,9vw,108px) clamp(20px,5vw,72px) clamp(30px,4vw,44px); text-align: center; }
    .devis-h1 { font: 800 clamp(2.4rem,6vw,4.6rem) 'Fraunces', Georgia, serif; letter-spacing: -0.02em; line-height: .98; margin: 0 auto 20px; max-width: 16ch; color: var(--ink); }
    .devis-sub { font: 400 clamp(1.05rem,1.5vw,1.22rem)/1.65 'Space Grotesk', sans-serif; color: var(--muted); max-width: 48ch; margin: 0 auto; }
    .devis-section { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px,5vw,72px) clamp(60px,8vw,110px); }
    .devis-form {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: clamp(28px,4vw,48px);
      display: flex; flex-direction: column; gap: 22px;
      box-shadow: var(--shadow-card);
    }
    .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr)); gap: 22px; }
    .form-note { font: 400 .82rem 'Space Grotesk', sans-serif; color: var(--faint); text-align: center; margin: 0; }
    .btn-submit-lg {
      padding: 16px;
      border-radius: var(--r-sm);
      border: none;
      background: linear-gradient(180deg, var(--brand-glow), var(--brand));
      color: #fff;
      font: 600 1.05rem 'Space Grotesk', sans-serif;
      cursor: pointer;
      box-shadow: var(--shadow-btn);
      transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
    }
    .btn-submit-lg:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); }
    .btn-submit-lg:active { transform: translateY(0); }
    .btn-submit-lg:disabled { opacity: .65; cursor: progress; transform: none; box-shadow: none; }

    .devis-sent {
      text-align: center;
      border-radius: var(--r-lg);
      padding: clamp(44px,6vw,72px);
      color: var(--star);
      background:
        radial-gradient(500px 300px at 50% 0%, rgba(77,107,255,.30), transparent 60%),
        linear-gradient(160deg, var(--space-800), var(--space-900));
      border: 1px solid var(--line-dark);
      box-shadow: var(--shadow-glow);
    }
    .devis-sent-icon { font: 400 3.4rem 'Space Mono', monospace; color: var(--brand-soft); }
    .devis-sent-h2 { font: 800 2rem 'Fraunces', Georgia, serif; letter-spacing: -0.018em; margin: 18px 0 12px; }
    .devis-sent-p { font: 400 1.1rem/1.65 'Space Grotesk', sans-serif; color: var(--star-dim); margin: 0 auto 28px; max-width: 40ch; }

    /* ---- Legal ---- */
    .legal-section { max-width: 820px; margin: 0 auto; padding: clamp(64px,9vw,108px) clamp(20px,5vw,72px) clamp(60px,8vw,110px); }
    .legal-h1 { font: 800 clamp(2.2rem,5vw,3.6rem) 'Fraunces', Georgia, serif; letter-spacing: -0.018em; line-height: 1; margin: 0 0 14px; color: var(--ink); }
    .legal-date { font: 400 .9rem 'Space Mono', monospace; color: var(--faint); margin: 0 0 40px; }
    .legal-content { display: flex; flex-direction: column; gap: 34px; font: 400 1rem/1.75 'Space Grotesk', sans-serif; color: var(--ink-soft); }
    .legal-h2 { font: 700 1.35rem 'Fraunces', Georgia, serif; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--ink); }
    .legal-p { margin: 0; }
    .legal-p a { color: var(--brand); border-bottom: 1px solid rgba(43,67,255,.4); }
    .legal-p a:hover { border-color: var(--brand); }

    /* ===========================================================
       FOOTER (cosmic)
       =========================================================== */
    .footer {
      position: relative;
      overflow: hidden;
      color: var(--star-dim);
      background:
        radial-gradient(700px 360px at 85% 0%, rgba(43,67,255,.18), transparent 60%),
        linear-gradient(180deg, var(--space-800), var(--space-900));
      border-top: 1px solid var(--line-dark);
    }
    .footer-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: clamp(52px,6vw,84px) clamp(20px,5vw,72px) 40px; }
    .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,200px),1fr)); gap: 40px; margin-bottom: 48px; }
    .footer-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
    .footer-logo-img { display: block; height: 50px; width: auto; }
    .footer-tagline { font: 400 1rem/1.65 'Space Grotesk', sans-serif; max-width: 30ch; margin: 0; color: var(--star-faint); }
    .footer-col-title { font: 700 .72rem 'Space Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--star-faint); margin: 0 0 16px; }
    .footer-links { display: flex; flex-direction: column; gap: 12px; font: 500 1rem 'Space Grotesk', sans-serif; align-items: flex-start; }
    .footer-link, .footer-link-a {
      cursor: pointer; color: var(--star-dim);
      background: none; border: none; padding: 0; text-align: left;
      transition: color .2s ease;
    }
    .footer-link:hover, .footer-link-a:hover { color: var(--brand-soft); }
    .footer-bottom {
      border-top: 1px solid var(--line-dark);
      padding-top: 24px;
      display: flex; flex-wrap: wrap; gap: 12px;
      justify-content: center; text-align: center;
      font: 400 .85rem 'Space Mono', monospace;
      color: var(--star-faint);
    }

    /* ---- PME page (light hero + checklist + steps) ---- */
    .pme-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
    .pme-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      background: var(--surface);
      font: 600 .8rem 'Space Grotesk', sans-serif;
      color: var(--ink-soft);
      white-space: nowrap;
    }
    .page-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

    .pme-checklist {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr));
      gap: 22px 36px;
    }
    .pme-check-item { display: flex; align-items: flex-start; gap: 14px; }
    .pme-check-icon {
      flex: none; width: 30px; height: 30px; margin-top: 2px;
      border-radius: 50%;
      background: linear-gradient(160deg, rgba(43,67,255,.16), rgba(77,107,255,.08));
      color: var(--brand);
      display: flex; align-items: center; justify-content: center;
      font: 700 .8rem 'Space Mono', monospace;
    }
    .pme-check-text { font: 400 1rem/1.55 'Space Grotesk', sans-serif; color: var(--ink-soft); margin: 0; }
    .pme-check-text strong { color: var(--ink); font-weight: 700; }

    .pme-steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr));
      gap: 32px;
    }
    .pme-step-num {
      display: inline-flex; width: 42px; height: 42px;
      align-items: center; justify-content: center;
      border-radius: 50%;
      background: linear-gradient(180deg, var(--brand-glow), var(--brand));
      color: #fff;
      font: 700 1.05rem 'Fraunces', Georgia, serif;
      margin-bottom: 16px;
      box-shadow: var(--shadow-btn);
    }
    .pme-step-h3 { font: 700 1.12rem 'Fraunces', Georgia, serif; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ink); }
    .pme-step-p { font: 400 .95rem/1.55 'Space Grotesk', sans-serif; color: var(--muted); margin: 0; }

    .pme-badge-price {
      background: linear-gradient(150deg, var(--brand), var(--brand-glow));
      border-color: transparent;
      color: #fff;
      font-weight: 700;
    }

    /* ---- PME pricing tiers ---- */
    .pme-pricing {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr));
      gap: 24px;
    }
    .price-tier-card {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: clamp(28px,3vw,36px);
      box-shadow: var(--shadow-card);
      display: flex;
      flex-direction: column;
    }
    .price-tier-highlight {
      border-color: var(--brand);
      box-shadow: var(--shadow-glow);
    }
    .price-tier-badge {
      align-self: flex-start;
      font: 700 .68rem 'Space Mono', monospace;
      letter-spacing: .08em; text-transform: uppercase;
      color: #fff;
      background: linear-gradient(150deg, var(--brand), var(--brand-glow));
      padding: 5px 12px;
      border-radius: 999px;
      margin: 0 0 16px;
    }
    .price-tier-name { font: 700 1.05rem 'Fraunces', Georgia, serif; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 8px; }
    .price-tier-amount { font: 800 2rem 'Fraunces', Georgia, serif; letter-spacing: -0.02em; color: var(--brand); margin: 0 0 10px; }
    .price-tier-desc { font: 400 .92rem/1.5 'Space Grotesk', sans-serif; color: var(--muted); margin: 0 0 20px; }
    .price-tier-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
    .price-tier-list li {
      font: 400 .92rem/1.5 'Space Grotesk', sans-serif;
      color: var(--ink-soft);
      padding-left: 22px;
      position: relative;
    }
    .price-tier-list li::before {
      content: "✓";
      position: absolute; left: 0; top: 0;
      color: var(--brand);
      font: 700 .85rem 'Space Mono', monospace;
    }
    .price-tier-note {
      text-align: center;
      max-width: 56ch;
      margin: 32px auto 0;
      font: 400 .88rem/1.55 'Space Grotesk', sans-serif;
      color: var(--faint);
    }

    /* ---- PME pricing FAQ ---- */
    .pme-faq { display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; }
    .pme-faq-item { padding: 26px 0; border-bottom: 1px solid var(--line); }
    .pme-faq-item:first-child { padding-top: 0; }
    .pme-faq-item:last-child { border-bottom: none; padding-bottom: 0; }
    .pme-faq-q { font: 700 1.05rem 'Fraunces', Georgia, serif; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px; }
    .pme-faq-a { font: 400 .98rem/1.6 'Space Grotesk', sans-serif; color: var(--muted); margin: 0; }

    /* ---- Responsive ---- */
    @media (max-width: 860px) {
      .nav-desktop { display: none; }
      .btn-menu { display: block; }
      .service-stats { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 18px; }
      .hero-cosmic__constellation { opacity: .5; top: auto; bottom: 8%; right: -10%; }
    }
    @media (max-width: 600px) {
      .client-figure { grid-template-columns: 1fr; }
    }

    /* ---- Reduced motion ---- */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
      [data-reveal] { opacity: 1 !important; transform: none !important; }
    }

    /* ---- Anchor elements styled as buttons / links ---- */
    a.btn-primary, a.btn-secondary, a.btn-ghost, a.btn-cta {
      display: inline-block;
      text-align: center;
      text-decoration: none;
    }

    /* ==== Admin pages (admin.html, admin-analytics.html, admin-tarifs.html) ==== */
    .admin-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--space-900); color: var(--star); }

    /* ---- Login screen ---- */
    .admin-login { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
    .admin-login-card {
      width: 100%; max-width: 420px; text-align: center;
      background: var(--space-panel); border: 1px solid var(--line-dark);
      border-radius: var(--r-lg); padding: 44px 36px; box-shadow: var(--shadow-glow);
    }
    .admin-login-card h1 { font-size: 1.5rem; margin: 0 0 8px; color: var(--star); }
    .admin-login-card p { color: var(--star-dim); font-size: .92rem; margin: 0 0 28px; }
    .btn-google {
      display: inline-flex; align-items: center; gap: 10px; width: 100%; justify-content: center;
      padding: 13px 20px; border-radius: 999px; border: 1px solid var(--line-dark);
      background: var(--star); color: var(--ink); font-weight: 600; font-size: .95rem;
      cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
    }
    .btn-google:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
    .btn-google svg { width: 18px; height: 18px; }
    .admin-msg { margin-top: 18px; font-size: .85rem; color: var(--brand-soft); min-height: 1.2em; }
    .admin-msg.is-error { color: #FF8A8A; }

    /* ---- Dashboard shell ---- */
    .admin-dashboard { display: none; flex: 1; flex-direction: column; }
    .admin-topbar {
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      padding: 18px 28px; border-bottom: 1px solid var(--line-dark); flex-wrap: wrap;
    }
    .admin-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--star); }
    .admin-brand span { color: var(--brand-soft); font-weight: 400; font-size: .85rem; }
    .admin-back {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-dark);
      color: var(--star-dim); text-decoration: none; font-weight: 400;
    }
    .admin-back:hover { border-color: var(--brand-soft); color: var(--star); }
    .admin-user { display: flex; align-items: center; gap: 14px; font-size: .85rem; color: var(--star-dim); }
    .btn-signout {
      padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-dark);
      background: transparent; color: var(--star-dim); font-size: .82rem; cursor: pointer;
    }
    .btn-signout:hover { border-color: var(--brand-soft); color: var(--star); }

    .admin-body { padding: 28px; max-width: 1200px; margin: 0 auto; width: 100%; }
    .admin-body h1 { font-size: 1.3rem; margin: 0 0 6px; color: var(--star); }
    .admin-body > p.admin-lead { color: var(--star-dim); font-size: .9rem; margin: 0 0 26px; }

    /* ---- Hub navigation ---- */
    .admin-nav-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
    .admin-nav-card {
      display: block; background: var(--space-panel); border: 1px solid var(--line-dark);
      border-radius: var(--r-lg); padding: 28px 26px; text-decoration: none;
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .admin-nav-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--brand-soft); }
    .admin-nav-card h2 { margin: 0 0 8px; color: var(--star); font-size: 1.1rem; }
    .admin-nav-card p { margin: 0; color: var(--star-dim); font-size: .88rem; line-height: 1.5; }

    .admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
    .kpi-card { background: var(--space-panel); border: 1px solid var(--line-dark); border-radius: var(--r-md); padding: 18px 20px; }
    .kpi-label { font: 700 .68rem 'Space Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--star-faint); margin: 0 0 8px; }
    .kpi-value { font-size: 1.7rem; font-weight: 700; color: var(--star); font-family: 'Space Mono', monospace; }
    .kpi-value small { font-size: .95rem; font-weight: 400; color: var(--star-dim); }

    .admin-panel { background: var(--space-panel); border: 1px solid var(--line-dark); border-radius: var(--r-lg); padding: 22px; margin-bottom: 24px; }
    .admin-panel h2 { font-size: 1rem; margin: 0 0 18px; color: var(--star); }
    .chart-wrap { position: relative; height: 320px; }

    table.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
    table.admin-table th, table.admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-dark); }
    table.admin-table th { color: var(--star-faint); font: 700 .68rem 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
    table.admin-table td { color: var(--star-dim); }
    table.admin-table td.num { color: var(--star); font-family: 'Space Mono', monospace; text-align: right; }
    table.admin-table tr:last-child td { border-bottom: none; }

    .admin-empty { text-align: center; color: var(--star-faint); padding: 30px 0; font-size: .88rem; }
    .admin-loading { text-align: center; color: var(--star-faint); padding: 60px 0; font-size: .9rem; }

    /* ---- Price management ---- */
    .prices-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
    .prices-panel-header h2 { margin: 0; }
    .prices-hint { color: var(--star-faint); font-size: .82rem; margin: -10px 0 18px; }
    .clients-hint { margin-top: 14px; }
    .btn-mini {
      padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-dark);
      background: transparent; color: var(--star-dim); font-size: .8rem; cursor: pointer;
      transition: border-color .15s ease, color .15s ease;
    }
    .btn-mini:hover { border-color: var(--brand-soft); color: var(--star); }
    .btn-mini.primary { background: var(--brand-soft, #4D6BFF); color: #fff; border-color: transparent; }
    .btn-mini.primary:hover { opacity: .88; }

    .price-category { border: 1px solid var(--line-dark); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 18px; }
    .price-category:last-child { margin-bottom: 0; }
    .price-cat-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .price-cat-name {
      flex: 1; background: transparent; border: none; border-bottom: 1px solid transparent;
      color: var(--star); font-weight: 700; font-size: .98rem; padding: 4px 2px; min-width: 0;
    }
    .price-cat-name:hover, .price-cat-name:focus { border-bottom-color: var(--line-dark); outline: none; }
    .btn-icon {
      background: transparent; border: 1px solid var(--line-dark); border-radius: 8px;
      color: var(--star-faint); width: 28px; height: 28px; cursor: pointer; font-size: .9rem; line-height: 1;
      flex-shrink: 0;
    }
    .btn-icon:hover { border-color: #FF8A8A; color: #FF8A8A; }

    .price-table-wrap { overflow-x: auto; }
    table.price-table { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 620px; }
    table.price-table th { text-align: left; padding: 6px 8px; color: var(--star-faint); font: 700 .64rem 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
    table.price-table td { padding: 4px 6px; border-top: 1px solid var(--line-dark); }
    table.price-table input {
      width: 100%; background: transparent; border: 1px solid transparent; border-radius: 6px;
      color: var(--star); font-size: .85rem; padding: 7px 8px; box-sizing: border-box;
      font-family: inherit;
    }
    table.price-table input:hover { border-color: var(--line-dark); }
    table.price-table input:focus { border-color: var(--brand-soft); outline: none; background: rgba(77,107,255,.06); }
    table.price-table td.pt-title input { min-width: 180px; }
    table.price-table td.pt-price input { min-width: 90px; font-family: 'Space Mono', monospace; }
    table.price-table td.pt-unit input { min-width: 90px; }
    table.price-table td.pt-note input { min-width: 160px; color: var(--star-dim); }
    table.price-table td.pt-del { width: 32px; text-align: center; }

    .btn-add-item { margin-top: 10px; }
    .prices-empty-cats { text-align: center; color: var(--star-faint); padding: 20px 0; font-size: .88rem; }
    .prices-saved-note { text-align: center; color: var(--star-faint); font-size: .78rem; margin-top: 10px; opacity: 0; transition: opacity .3s ease; }
    .prices-saved-note.is-visible { opacity: 1; }
    a.nav-link, a.mobile-link, a.footer-link { text-decoration: none; }

    /* ---- Client & maintenance management ---- */
    .clients-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
    .clients-panel-header h2 { margin: 0; }
    .clients-panel-actions { display: flex; align-items: center; gap: 10px; }
    a.btn-mini { text-decoration: none; display: inline-block; }

    .field-with-btn-row { display: flex; gap: 8px; align-items: stretch; }
    .field-with-btn-row input { flex: 1; min-width: 0; }
    .field-with-btn-row .btn-mini { flex-shrink: 0; white-space: nowrap; }

    .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
    .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
    .field label { font: 700 .64rem 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--star-faint); }
    .field input, .field textarea, .field select {
      background: rgba(128,149,255,.05); border: 1px solid var(--line-dark); border-radius: 8px;
      color: var(--star); font-size: .88rem; padding: 9px 10px; box-sizing: border-box;
      font-family: inherit; width: 100%;
    }
    .field select { appearance: auto; }
    .field textarea { resize: vertical; min-height: 44px; }
    .field input:hover, .field textarea:hover, .field select:hover { border-color: rgba(128,149,255,.32); }
    .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand-soft); outline: none; background: rgba(77,107,255,.08); }
    .field-checkbox { flex-direction: row; align-items: center; gap: 8px; }
    .field-checkbox label { text-transform: none; letter-spacing: 0; font: 400 .85rem 'Space Grotesk', sans-serif; color: var(--star-dim); }

    .client-card { border: 1px solid var(--line-dark); border-radius: var(--r-md); padding: 14px 18px; margin-bottom: 12px; transition: border-color .15s ease; }
    .client-card:last-child { margin-bottom: 0; }
    .client-card.is-open { border-color: var(--brand-soft); }

    .client-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; padding: 2px 0; }
    .client-summary-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1; }
    .client-summary-name { font-weight: 700; color: var(--star); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .client-summary-sector { color: var(--star-faint); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .client-summary-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .client-summary-badge { flex-shrink: 0; }
    .client-summary-paid { font: 700 .78rem 'Space Mono', monospace; color: var(--star-dim); white-space: nowrap; }
    .client-summary-chevron { color: var(--star-faint); font-size: .75rem; width: 12px; text-align: center; transition: transform .15s ease; }
    .client-card.is-open .client-summary-chevron { transform: rotate(90deg); color: var(--brand-soft); }

    .client-details { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-dark); }

    .client-contracts { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-dark); }
    .client-contracts-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
    .client-contracts-header h3 { margin: 0; font-size: .8rem; color: var(--star-faint); font: 700 .68rem 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
    .contract-empty { color: var(--star-faint); font-size: .82rem; padding: 8px 0 4px; }

    .contract-card { background: rgba(128,149,255,.04); border: 1px solid var(--line-dark); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
    .contract-card:last-child { margin-bottom: 0; }
    .contract-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
    .contract-card-top .field { flex: 1; min-width: 200px; }
    .contract-status-row { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
    .status-select {
      background: rgba(128,149,255,.05); border: 1px solid var(--line-dark); border-radius: 999px;
      color: var(--star-dim); font-size: .78rem; padding: 6px 10px; font-family: inherit; cursor: pointer;
    }
    .status-select:hover { border-color: rgba(128,149,255,.32); }

    .status-badge {
      display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
      font: 700 .68rem 'Space Mono', monospace; letter-spacing: .04em; white-space: nowrap;
      border: 1px solid transparent;
    }
    .status-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    .status-badge.status-active { color: #6EE7B7; background: rgba(110,231,183,.12); border-color: rgba(110,231,183,.3); }
    .status-badge.status-expiring { color: #FDBA74; background: rgba(253,186,116,.12); border-color: rgba(253,186,116,.3); }
    .status-badge.status-expired { color: #FF8A8A; background: rgba(255,138,138,.12); border-color: rgba(255,138,138,.3); }
    .status-badge.status-cancelled { color: var(--star-faint); background: rgba(125,134,182,.12); border-color: rgba(125,134,182,.3); }
    .status-badge.status-late_payment { color: #F87171; background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.3); }
    .status-badge.status-deposit_paid { color: #7DD3FC; background: rgba(125,211,252,.12); border-color: rgba(125,211,252,.3); }
    .status-badge.status-inactive { color: var(--star-faint); background: rgba(125,134,182,.12); border-color: rgba(125,134,182,.3); }

    .contract-section-label { font: 700 .62rem 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--star-faint); margin: 12px 0 8px; }
    .contract-section-label:first-of-type { margin-top: 4px; }

    .contract-section + .contract-section { border-top: 1px dashed var(--line-dark); margin-top: 16px; padding-top: 16px; }
    .contract-section-title { font: 700 .68rem 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--star-dim); margin: 0 0 10px; }

    .payments-table { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
    .payment-row {
      display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.6fr auto auto; gap: 8px; align-items: center;
    }
    .payment-row:not(.payment-row-header) { padding: 8px 10px; border: 1px solid var(--line-dark); border-radius: 8px; background: rgba(128,149,255,.03); }
    .payment-row-header { padding: 0 2px; font: 700 .6rem 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--star-faint); }
    .payment-cell {
      background: rgba(128,149,255,.05); border: 1px solid var(--line-dark); border-radius: 8px;
      color: var(--star); font-size: .84rem; padding: 8px 9px; box-sizing: border-box;
      font-family: inherit; width: 100%;
    }
    .payment-cell:hover { border-color: rgba(128,149,255,.32); }
    .payment-cell:focus { border-color: var(--brand-soft); outline: none; background: rgba(77,107,255,.08); }
    .payment-row .btn-mini, .payment-row .btn-icon { flex-shrink: 0; }
    @media (max-width: 780px) {
      .payment-row-header { display: none; }
      .payment-row:not(.payment-row-header) { grid-template-columns: 1fr 1fr; }
    }

    .last-payment-date { margin: 0; padding: 9px 10px; font-size: .88rem; color: var(--star-dim); background: rgba(128,149,255,.03); border: 1px dashed var(--line-dark); border-radius: 8px; box-sizing: border-box; }

    .contract-remaining { margin: 10px 0 0; font-size: .82rem; color: var(--star-dim); }
    .contract-remaining strong { color: var(--star); }
    .contract-remaining .contract-remaining-detail { color: var(--star-faint); font-size: .78rem; }
    .contract-remaining .is-paid { color: #6EE7B7; font-weight: 600; }
    .contract-remaining .is-over { color: #FDBA74; font-weight: 600; }
    .price-change-note { font-size: .76rem; color: #FDBA74; margin: 6px 0 0; opacity: 0; transition: opacity .3s ease; }
    .price-change-note.is-visible { opacity: 1; }
    .price-history { margin: 6px 0 0; padding-left: 18px; font-size: .74rem; color: var(--star-faint); }
    .price-history li { margin: 2px 0; }

    .btn-add-contract { margin-top: 4px; }

    .payment-row { padding: 12px; margin-bottom: 10px; border: 1px solid var(--line-dark); border-radius: 10px; }
    .payment-row:last-of-type { margin-bottom: 0; }
    .btn-add-payment { margin-top: 4px; }
    .clients-empty { text-align: center; color: var(--star-faint); padding: 30px 0; font-size: .88rem; }

    .contract-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .contract-file-empty { color: var(--star-faint); font-size: .82rem; }
    .contract-file-status { color: var(--star-faint); font-size: .78rem; }
    .btn-upload-file { cursor: pointer; }
    .btn-upload-file input.file-input-hidden {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    .migration-banner {
      background: rgba(253,186,116,.1); border: 1px solid rgba(253,186,116,.3); border-radius: var(--r-md);
      padding: 14px 16px; margin: 4px 0 18px; display: flex; align-items: center; justify-content: space-between;
      gap: 14px; flex-wrap: wrap;
    }
    .migration-banner-text { margin: 0; color: var(--star-dim); font-size: .86rem; flex: 1; min-width: 220px; }
    .migration-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }

    .bulk-add-panel { background: rgba(128,149,255,.05); border: 1px solid var(--line-dark); border-radius: var(--r-md); padding: 14px 16px; margin: 4px 0 18px; }
    .bulk-add-panel label { display: block; font: 700 .64rem 'Space Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--star-faint); margin-bottom: 8px; }
    .bulk-add-panel textarea {
      width: 100%; box-sizing: border-box; background: rgba(128,149,255,.05); border: 1px solid var(--line-dark);
      border-radius: 8px; color: var(--star); font-size: .88rem; padding: 9px 10px; font-family: inherit; resize: vertical;
    }
    .bulk-add-panel textarea:focus { border-color: var(--brand-soft); outline: none; background: rgba(77,107,255,.08); }
    .bulk-add-actions { display: flex; gap: 10px; margin-top: 10px; }