html {
        font-size: 17px;
      }
      :root {
        --black: #090909;
        --deep: #0e0e0b;
        --surface: #141410;
        --red: #E8B000;
        --red-light: #FFD147;
        --red-pale: #FFF1A0;
        --red-deep: #A07A00;
        --cream: #FAFAF5;
        --muted: #A09A8C;
        --line: rgba(232, 176, 0, 0.20);
      }

      *,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        scroll-behavior: auto;
      }

      body {
        background: var(--black);
        color: var(--cream);
        font-family: "Jost", sans-serif;
        font-weight: 400;
        cursor: none;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
      }

      /* ── CURSOR FIL DÉNUDÉ ───────────────────────────── */
      #cursor-wire {
        position: fixed;
        pointer-events: none;
        z-index: 9999;
        top: 0;
        left: 0;
        will-change: transform;
      }
      .wire-spark {
        position: fixed;
        pointer-events: none;
        z-index: 9998;
        top: 0;
        left: 0;
        animation: wireSpark 0.45s ease-out forwards;
      }
      @keyframes wireSpark {
        0% {
          opacity: 1;
          transform: translate(-50%, -50%) scale(0.6);
        }
        60% {
          opacity: 0.8;
          transform: translate(-50%, -50%) scale(1.1);
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1.6);
        }
      }

      /* ── NAV ─────────────────────────────────────────── */
      nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 200;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 28px 56px;
        transition:
          background 0.6s,
          padding 0.4s;
      }
      nav.scrolled {
        background: rgba(8, 8, 8, 0.92);
        backdrop-filter: blur(20px);
        padding: 18px 56px;
        border-bottom: 1px solid var(--line);
      }
      .nav-logo {
        font-family: "Cormorant Garamond", serif;
        font-size: 1.1rem;
        font-weight: 400;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: #1a1a1a;
        text-decoration: none;
        transition: color 0.4s;
      }
      .nav-logo span {
        color: var(--red-light);
      }
      nav.scrolled .nav-logo {
        color: var(--cream);
      }
      .nav-links {
        display: flex;
        gap: 48px;
        list-style: none;
      }
      .nav-links a {
        font-size: 0.7rem;
        font-weight: 400;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--muted);
        text-decoration: none;
        transition: color 0.3s;
      }
      .nav-links a:hover {
        color: var(--red-light);
      }
      .nav-cta {
        font-size: 0.7rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--red-light);
        text-decoration: none;
        border: 1px solid var(--red);
        padding: 10px 26px;
        transition:
          background 0.3s,
          color 0.3s;
      }
      .nav-cta:hover {
        background: var(--red);
        color: var(--cream);
      }

      /* ── LOADER ──────────────────────────────────────── */
      #loader {
        position: fixed;
        inset: 0;
        background: var(--black);
        z-index: 9000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
        transition: opacity 0.8s ease;
      }
      #loader.hidden {
        opacity: 0;
        pointer-events: none;
      }
      .loader-logo {
        font-family: "Cormorant Garamond", serif;
        font-size: 1.4rem;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--cream);
      }
      .loader-logo span {
        color: var(--red);
      }
      .loader-bar-wrap {
        width: 200px;
        height: 1px;
        background: rgba(232, 176, 0, 0.15);
      }
      .loader-bar {
        height: 100%;
        background: var(--red);
        width: 0%;
        transition: width 0.1s linear;
      }
      .loader-pct {
        font-size: 0.65rem;
        letter-spacing: 0.25em;
        color: var(--muted);
      }

      /* ── SCRUB HERO (UNTOUCHED) ──────────────────────── */
      #hero-scroll-zone {
        position: relative;
        height: 380vh;
      }
      #hero-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
      }
      #hero-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
      }
      .hero-gradient {
        position: absolute;
        inset: 0;
        background: linear-gradient(160deg, rgba(8, 8, 8, 0) 0%, rgba(8, 8, 8, 0.22) 55%, rgba(8, 8, 8, 0.6) 100%);
        pointer-events: none;
      }
      /* Cache le filigrane IA (Minimax/Hailuo) imprimé en bas à droite des
         frames de la séquence hero. Flou local plutôt qu'un patch de couleur
         fixe : les frames passent du clair au sombre selon la scène, un flou
         se fond toujours avec le fond réel au lieu de créer une tache. */
      .hero-watermark-mask {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 32%;
        height: 18%;
        -webkit-backdrop-filter: blur(22px) saturate(0.6);
        backdrop-filter: blur(22px) saturate(0.6);
        -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 60%, transparent 100%);
        mask-image: radial-gradient(ellipse 100% 100% at 100% 100%, #000 60%, transparent 100%);
        pointer-events: none;
      }
      .hero-layer {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 80px 100px;
        pointer-events: none;
        transition: none;
      }
      .hero-eyebrow {
        font-size: 0.68rem;
        font-weight: 400;
        letter-spacing: 0.35em;
        text-transform: uppercase;
        color: rgba(10, 10, 10, 0.65);
        margin-bottom: 20px;
        will-change: opacity, transform;
      }
      .hero-title {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(3rem, 7vw, 6.2rem);
        font-weight: 300;
        line-height: 1.05;
        margin-bottom: 28px;
        color: #0a0a0a;
        will-change: opacity, transform;
      }
      .hero-title em {
        font-style: italic;
        color: var(--red);
      }
      .hero-sub {
        font-size: 1rem;
        font-weight: 300;
        color: rgba(10, 10, 10, 0.62);
        max-width: 420px;
        line-height: 1.75;
        margin-bottom: 48px;
        will-change: opacity, transform;
      }
      .hero-actions {
        display: flex;
        align-items: center;
        gap: 40px;
        pointer-events: auto;
        will-change: opacity, transform;
      }
      .btn-primary {
        display: inline-block;
        background: var(--red);
        color: var(--cream);
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 17px 44px;
        transition:
          background 0.3s,
          transform 0.3s;
      }
      .btn-primary:hover {
        background: var(--red-light);
        transform: translateY(-2px);
      }
      .btn-ghost {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-size: 0.72rem;
        font-weight: 400;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: #0a0a0a;
        text-decoration: none;
        padding: 17px 32px;
        border: 1px solid rgba(10, 10, 10, 0.2);
        transition: color 0.3s, border-color 0.3s;
      }
      .btn-ghost::after {
        content: "";
        display: block;
        width: 32px;
        height: 1px;
        background: var(--red);
        transition: width 0.3s;
      }
      .btn-ghost:hover {
        color: var(--red-light);
      }
      .btn-ghost:hover::after {
        width: 52px;
      }
      #scrub-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 2px;
        background: var(--red);
        width: 0%;
        transition: width 0.05s linear;
        z-index: 10;
      }
      #scroll-hint {
        position: absolute;
        bottom: 48px;
        right: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        opacity: 1;
        transition: opacity 0.4s;
      }
      #scroll-hint span {
        font-size: 0.6rem;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--muted);
        writing-mode: vertical-rl;
      }
      .scroll-line {
        width: 1px;
        height: 60px;
        background: linear-gradient(to bottom, var(--red), transparent);
        animation: scrollPulse 2s infinite;
      }

      /* ── MARQUEE ─────────────────────────────────────── */
      .marquee-wrap {
        overflow: hidden;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background: var(--deep);
        padding: 18px 0;
      }
      .marquee-track {
        display: flex;
        white-space: nowrap;
        animation: marquee 28s linear infinite;
      }
      .marquee-item {
        display: flex;
        align-items: center;
        gap: 32px;
        padding: 0 48px;
        font-size: 0.68rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.55);
        flex-shrink: 0;
      }
      .marquee-dot {
        width: 4px;
        height: 4px;
        background: var(--red);
        border-radius: 50%;
        flex-shrink: 0;
      }

      /* ── SHARED ──────────────────────────────────────── */
      .section-label {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 0.62rem;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: var(--red);
        margin-bottom: 32px;
      }
      .section-label::before {
        content: "";
        display: block;
        width: 40px;
        height: 1px;
        background: var(--red);
      }
      .section-title {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(2.4rem, 4vw, 3.6rem);
        font-weight: 300;
        line-height: 1.12;
        margin-bottom: 32px;
      }
      .section-title em {
        font-style: italic;
        color: var(--red);
      }

      /* ── ABOUT ───────────────────────────────────────── */
      #about {
        padding: 100px 60px;
        display: grid;
        grid-template-columns: 62fr 38fr;
        gap: 60px;
        align-items: center;
        background: #f5f5f5;
      }
      #about .section-title {
        color: #0a0a0a;
      }
      #about .section-title em {
        color: var(--red);
      }
      #about .about-text {
        color: rgba(10, 10, 10, 0.62);
      }
      #about .stat-number {
        color: var(--red);
      }
      #about .stat-label {
        color: rgba(10, 10, 10, 0.5);
      }
      #about .about-stats {
        border-top-color: rgba(10, 10, 10, 0.15);
      }
      .about-img-container {
        position: relative;
        aspect-ratio: 4/5;
        overflow: hidden;
      }
      .about-img-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(15%) contrast(1.05);
        transition: transform 6s ease;
      }
      .about-img-container:hover img {
        transform: scale(1.04);
      }
      .about-img-accent {
        position: absolute;
        top: -20px;
        right: -20px;
        width: 120px;
        height: 120px;
        border: 1px solid var(--red);
        z-index: -1;
      }
      .about-img-label {
        position: absolute;
        bottom: 0;
        left: 0;
        background: var(--red);
        color: var(--cream);
        font-size: 0.62rem;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        padding: 8px 20px;
        font-weight: 500;
      }
      .about-3d-float {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
      }
      .disj-wrap {
        position: relative;
        display: inline-block;
        cursor: none;
        animation: about3dFloat 5s ease-in-out infinite;
      }
      .disj-img {
        display: block;
        transition: opacity 0.45s ease;
        animation: none;
      }
      .disj-on {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0;
      }
      .disj-wrap.is-on .disj-on  { opacity: 1; }
      .disj-wrap.is-on .disj-off { opacity: 0; }
      .about-3d-float {
        filter: drop-shadow(0 30px 60px rgba(232, 176, 0, 0.25));
      }
      .about-3d-img {
        width: min(460px, 44vw);
        animation: about3dFloat 5s ease-in-out infinite;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: high-quality;
      }
      #expertise .about-3d-img {
        width: min(320px, 30vw);
      }
      .svc-scene[data-index="0"] .about-3d-img {
        width: min(920px, 88vw);
      }
      .svc-scene[data-index="2"] .about-3d-img {
        width: min(720px, 68vw);
      }
      @keyframes about3dFloat {
        0%,
        100% {
          transform: translateY(0px) rotateY(-6deg) rotateZ(-1.5deg);
        }
        50% {
          transform: translateY(-26px) rotateY(6deg) rotateZ(1.5deg);
        }
      }

      /* ── TABLEAU TOGGLE ─────────────────────────────── */
      .about-tableau-wrap {
        position: relative;
        width: 100%;
        max-height: 520px;
        overflow: hidden;
        animation: about3dFloat 6s ease-in-out infinite;
        cursor: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-mask-image: radial-gradient(ellipse 92% 90% at 50% 48%, black 60%, transparent 100%);
        mask-image: radial-gradient(ellipse 92% 90% at 50% 48%, black 60%, transparent 100%);
      }
      .tbl-img {
        width: 100%;
        height: 520px;
        object-fit: cover;
        display: block;
        transition:
          opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
          transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .tbl-assembled {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0;
        transform: scale(1.04);
        transition:
          opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
          transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .about-tableau-wrap.is-assembled .tbl-decomposed {
        opacity: 0;
        transform: scale(0.97);
      }
      .about-tableau-wrap.is-assembled .tbl-assembled {
        opacity: 1;
        transform: scale(1);
      }
      .tbl-hint {
        display: block;
        text-align: center;
        margin-top: 14px;
        font-size: 0.6rem;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        color: rgba(10, 10, 10, 0.35);
        transition: opacity 0.5s;
        pointer-events: none;
      }
      .tbl-hint.is-hidden {
        opacity: 0;
      }

      .about-text {
        font-size: 0.95rem;
        line-height: 1.85;
        color: rgba(240, 237, 230, 0.65);
        margin-bottom: 20px;
      }
      .about-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        margin-top: 52px;
        padding-top: 48px;
        border-top: 1px solid var(--line);
      }
      .stat-number {
        font-family: "Cormorant Garamond", serif;
        font-size: 3.2rem;
        font-weight: 300;
        color: var(--red-light);
        line-height: 1;
        margin-bottom: 8px;
      }
      .stat-label {
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--muted);
      }

      /* ════════════════════════════════════════════════════
       SERVICES — STICKY SEQUENTIAL SCENES
       Zone: 800vh  |  6 scenes × ~133vh of scroll each
       ════════════════════════════════════════════════════ */
      #services-scroll-zone {
        position: relative;
        height: 860vh;
        z-index: 2;
      }
      #services-sticky {
        margin-top: 80vh;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        background: var(--black);
      }

      /* Shared scene structure */
      .svc-scene {
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        padding: 0 80px 0 100px;
        opacity: 0;
        will-change: opacity, transform;
        pointer-events: none;
      }
      .svc-scene.active {
        pointer-events: auto;
      }

      /* Giant background number */
      .svc-bg-num {
        position: absolute;
        right: -0.05em;
        top: 50%;
        transform: translateY(-50%);
        font-family: "Cormorant Garamond", serif;
        font-size: 38vw;
        font-weight: 300;
        line-height: 1;
        color: rgba(232, 176, 0, 0.05);
        user-select: none;
        pointer-events: none;
        letter-spacing: -0.04em;
      }

      /* Left: content */
      .svc-left {
        position: relative;
        z-index: 2;
        padding-right: 60px;
      }
      .svc-label {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 0.6rem;
        letter-spacing: 0.38em;
        text-transform: uppercase;
        color: var(--red);
        margin-bottom: 28px;
      }
      .svc-label::before {
        content: "";
        display: block;
        width: 32px;
        height: 1px;
        background: var(--red);
      }
      .svc-num-small {
        font-family: "Cormorant Garamond", serif;
        font-size: 0.8rem;
        color: rgba(232, 176, 0, 0.5);
        margin-left: auto;
      }
      .svc-title {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(2.8rem, 5vw, 5rem);
        font-weight: 300;
        line-height: 1.05;
        margin-bottom: 28px;
      }
      .svc-title em {
        font-style: italic;
        color: var(--red);
      }
      .svc-desc {
        font-size: 0.95rem;
        line-height: 1.82;
        color: rgba(240, 237, 230, 0.6);
        max-width: 420px;
        margin-bottom: 40px;
      }
      .svc-bullets {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 48px;
      }
      .svc-bullets li {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 0.84rem;
        color: rgba(240, 237, 230, 0.5);
        letter-spacing: 0.04em;
      }
      .svc-bullets li::before {
        content: "";
        display: block;
        width: 18px;
        height: 1px;
        background: var(--red);
        flex-shrink: 0;
      }
      .svc-link {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        font-size: 0.68rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--red-light);
        text-decoration: none;
        border-bottom: 1px solid rgba(232, 176, 0, 0.3);
        padding-bottom: 6px;
        transition:
          border-color 0.3s,
          gap 0.3s;
      }
      .svc-link::after {
        content: "→";
        font-size: 1rem;
      }
      .svc-link:hover {
        border-color: var(--red);
        gap: 20px;
      }

      /* Right: service image */
      .svc-right {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-top: 50px;
      }
      .svc-img-wrap {
        width: min(560px, 52vw);
        overflow: hidden;
        border: 1px solid rgba(232, 176, 0, 0.18);
        box-shadow:
          0 40px 100px rgba(0, 0, 0, 0.65),
          0 0 0 1px rgba(255, 255, 255, 0.02);
      }
      .svc-img-wrap img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        image-rendering: -webkit-optimize-contrast;
        image-rendering: high-quality;
      }
      .svc-scene.active .svc-img-wrap img {
        transform: scale(1.04);
      }

      /* Slide-in depuis la gauche au moment où la scène devient active */
      .svc-scene .svc-img-wrap,
      .svc-scene .about-3d-float {
        transform: translateX(-90px);
        transition: transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .svc-scene.scene-active .svc-img-wrap,
      .svc-scene.scene-active .about-3d-float {
        transform: translateX(0);
      }

      /* Progress counter at bottom */
      #services-counter {
        position: absolute;
        bottom: 48px;
        left: 100px;
        display: flex;
        align-items: center;
        gap: 24px;
        z-index: 10;
      }
      .svc-counter-num {
        font-family: "Cormorant Garamond", serif;
        font-size: 0.9rem;
        color: var(--red);
        letter-spacing: 0.1em;
      }
      .svc-counter-dots {
        display: flex;
        gap: 8px;
      }
      .svc-dot {
        width: 24px;
        height: 1px;
        background: rgba(232, 176, 0, 0.25);
        transition:
          background 0.4s,
          width 0.4s;
      }
      .svc-dot.active {
        background: var(--red);
        width: 40px;
      }

      /* Section intro (before first scene) */
      #services-intro {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 0 100px 120px;
        z-index: 5;
        background: var(--black);
        will-change: opacity;
      }

      /* ── VISUAL BREAK ────────────────────────────────── */
      #overlap-zone {
        position: relative;
      }
      #visual-break {
        position: sticky;
        top: 0;
        z-index: 1;
        height: 100vh;
        display: grid;
        grid-template-columns: 38fr 62fr;
        align-items: center;
        background: #fcfcfc;
      }
      .vb-right {
        position: relative;
        background: #fcfcfc;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      #vb-video {
        width: 100%;
        height: auto;
        max-height: 78vh;
        object-fit: contain;
        display: block;
        margin-top: 40px;
      }
      .visual-break-overlay {
        display: flex;
        align-items: center;
        padding: 0 60px;
      }

      /* Redesign luxe Notre Philosophie */
      .vb-label {
        display: flex;
        align-items: center;
        gap: 14px;
        font-size: 0.58rem;
        letter-spacing: 0.38em;
        text-transform: uppercase;
        color: var(--red);
        margin-bottom: 36px;
      }
      .vb-label::before {
        content: "";
        display: block;
        width: 36px;
        height: 1px;
        background: var(--red);
      }
      .vb-headline {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(2.4rem, 3.8vw, 4rem);
        font-weight: 300;
        line-height: 1.12;
        color: #111;
        margin-bottom: 40px;
        letter-spacing: -0.01em;
        transition: opacity 0.35s ease;
      }
      .vb-headline em {
        font-style: italic;
        color: var(--red);
      }
      .vb-keywords {
        display: flex;
        gap: 0;
        margin-bottom: 40px;
      }
      .vb-kw {
        font-family: "Cormorant Garamond", serif;
        font-size: 0.72rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: #111;
        padding: 10px 22px;
        border: 1px solid rgba(232, 176, 0, 0.25);
        cursor: none;
        transition:
          background 0.4s,
          color 0.4s;
      }
      .vb-kw:first-child {
        border-right: none;
      }
      .vb-kw:last-child {
        border-left: none;
      }
      .vb-kw:hover,
      .vb-kw.active {
        background: var(--red);
        color: #fff;
      }
      .vb-body {
        font-size: 0.95rem;
        line-height: 1.85;
        color: rgba(17, 17, 17, 0.55);
        max-width: 380px;
        margin-bottom: 44px;
        transition: opacity 0.35s ease;
      }
      .vb-divider {
        width: 60px;
        height: 1px;
        background: var(--red);
        margin-bottom: 44px;
      }
      .vb-closing {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(1.3rem, 2vw, 1.7rem);
        font-weight: 300;
        line-height: 1.5;
        color: #111;
        transition: opacity 0.35s ease;
      }
      .vb-closing em {
        font-style: italic;
        color: var(--red);
      }
      .vb-compact .vb-headline {
        margin-bottom: 22px;
      }
      .vb-compact .vb-keywords {
        margin-bottom: 22px;
      }
      .vb-compact .vb-body {
        margin-bottom: 26px;
      }
      .vb-compact .vb-divider {
        margin-bottom: 26px;
      }
      #vb-video {
        transition: opacity 0.6s ease;
      }

      #vb-trigger {
        position: absolute;
        bottom: 36px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 22px;
        border: 1px solid var(--red);
        background: var(--red);
        backdrop-filter: blur(10px);
        cursor: none;
        font-family: "Jost", sans-serif;
        font-size: 0.58rem;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: #ffffff;
        white-space: nowrap;
        transition:
          opacity 0.5s ease,
          background 0.3s,
          border-color 0.3s;
        opacity: 0;
        pointer-events: none;
      }
      #vb-trigger.is-visible {
        opacity: 1;
        pointer-events: auto;
      }
      #vb-trigger:hover {
        background: #C09000;
        border-color: #C09000;
        color: #ffffff;
      }
      .vb-trigger-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #ffffff;
        flex-shrink: 0;
        animation: vbDotPulse 1.8s ease-in-out infinite;
      }
      @keyframes vbDotPulse {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }
        50% {
          opacity: 0.3;
          transform: scale(0.6);
        }
      }
      #visual-break,
      .vb-right {
        transition: background 0.6s ease;
      }

      /* ── EXPERTISE ───────────────────────────────────── */
      #expertise-scroll-zone {
        position: relative;
        height: 160vh;
        margin-top: 0;
        margin-bottom: 60px;
      }
      #expertise {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 120px;
        align-items: center;
        padding: 30px 80px;
      }
      #expertise .section-label {
        margin-bottom: 16px;
      }
      #expertise .section-title {
        margin-bottom: 16px;
      }
      .expertise-list {
        margin-top: 16px;
      }
      .expertise-item {
        display: flex;
        gap: 28px;
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
        transition: padding 0.3s;
      }
      .expertise-item:hover {
        padding-left: 12px;
      }
      .expertise-item-num {
        font-family: "Cormorant Garamond", serif;
        font-size: 0.9rem;
        color: var(--red);
        margin-top: 4px;
        flex-shrink: 0;
      }
      .expertise-item-title {
        font-family: "Cormorant Garamond", serif;
        font-size: 1.35rem;
        font-weight: 400;
        margin-bottom: 6px;
        transition: color 0.3s;
      }
      .expertise-item:hover .expertise-item-title {
        color: var(--red);
      }
      .expertise-item-desc {
        font-size: 0.86rem;
        color: var(--muted);
        line-height: 1.7;
      }
      .expertise-right {
        position: relative;
      }
      #prise-canvas {
        width: 100%;
        aspect-ratio: 3/4;
        display: block;
        border: 1px solid rgba(232, 176, 0, 0.18);
        box-shadow:
          0 40px 100px rgba(0, 0, 0, 0.65),
          0 0 0 1px rgba(255, 255, 255, 0.02);
      }
      .expertise-badge {
        position: absolute;
        bottom: 32px;
        right: 20px;
        background: var(--red);
        color: var(--cream);
        padding: 24px 28px;
        text-align: center;
        z-index: 2;
      }
      .badge-num {
        font-family: "Cormorant Garamond", serif;
        font-size: 2.4rem;
        font-weight: 300;
        line-height: 1;
        display: block;
      }
      .badge-label {
        font-size: 0.6rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        display: block;
        margin-top: 6px;
      }

      /* ── PROCESS ─────────────────────────────────────── */
      #process-zone {
        position: relative;
        height: 420vh;
      }
      #process {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        background: var(--deep);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 80px;
      }
      .process-header {
        text-align: center;
        margin-bottom: 80px;
      }
      .process-steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        position: relative;
      }
      .process-line {
        position: absolute;
        top: 28px;
        left: 12.5%;
        right: 12.5%;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--red), var(--red), transparent);
        transform: scaleX(0);
        transform-origin: center center;
        transition: none;
        pointer-events: none;
      }
      .process-step {
        padding: 0 32px;
        text-align: center;
        will-change: transform, opacity;
      }
      .step-circle {
        width: 56px;
        height: 56px;
        border: 1px solid var(--red);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 32px;
        background: var(--black);
        font-family: "Cormorant Garamond", serif;
        font-size: 1.2rem;
        font-weight: 300;
        color: var(--red-light);
        position: relative;
        z-index: 1;
      }
      .step-title {
        font-family: "Cormorant Garamond", serif;
        font-size: 1.3rem;
        margin-bottom: 12px;
      }
      .step-desc {
        font-size: 0.82rem;
        color: var(--muted);
        line-height: 1.7;
      }

      /* ── CERTIFICATIONS ──────────────────────────────── */
      #cert-zone {
        position: relative;
        height: 360vh;
      }
      #certifications {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        background: var(--black);
      }
      .cert-progress-bar {
        position: absolute;
        top: 0;
        left: 0;
        height: 2px;
        background: var(--red);
        width: 0%;
        z-index: 10;
        transition: width 0.05s linear;
      }
      .cert-counter {
        position: absolute;
        bottom: 48px;
        right: 80px;
        font-family: "Cormorant Garamond", serif;
        font-size: 0.72rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.22);
        z-index: 10;
        pointer-events: none;
      }
      .cert-counter span {
        color: var(--red);
      }
      .cert-dots {
        position: absolute;
        left: 48px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 14px;
        z-index: 10;
      }
      .cert-dot {
        width: 3px;
        height: 3px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.18);
        cursor: none;
        transition:
          background 0.4s,
          height 0.4s;
      }
      .cert-dot.is-active {
        background: var(--red);
        height: 28px;
      }
      .cert-slides {
        position: relative;
        width: 100%;
        height: 100%;
      }
      .cert-slide {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        padding: 0 100px 0 120px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease;
      }
      .cert-slide.is-active {
        opacity: 1;
        pointer-events: auto;
      }
      .cert-bg-num {
        position: absolute;
        right: 60px;
        top: 50%;
        transform: translateY(-50%);
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(160px, 20vw, 300px);
        font-weight: 700;
        color: rgba(180, 132, 0, 0.55);
        line-height: 1;
        pointer-events: none;
        user-select: none;
      }
      .cert-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 80px;
        align-items: center;
        width: 100%;
      }
      .cert-label-tag {
        font-size: 0.6rem;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: var(--red);
        margin-bottom: 32px;
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .cert-label-tag::before {
        content: "";
        display: block;
        width: 36px;
        height: 1px;
        background: var(--red);
        flex-shrink: 0;
      }
      .cert-name {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(3.2rem, 6.5vw, 6rem);
        font-weight: 300;
        line-height: 1;
        color: var(--cream);
        margin-bottom: 40px;
        clip-path: inset(0 100% 0 0);
        transition: clip-path 1s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .cert-slide.is-active .cert-name {
        clip-path: inset(0 0% 0 0);
      }
      .cert-sub {
        font-size: 0.84rem;
        line-height: 1.9;
        color: rgba(255, 255, 255, 0.4);
        max-width: 380px;
        opacity: 0;
        transform: translateY(18px);
        transition:
          opacity 0.8s 0.35s ease,
          transform 0.8s 0.35s ease;
      }
      .cert-slide.is-active .cert-sub {
        opacity: 1;
        transform: translateY(0);
      }
      .cert-visual {
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(0.84) translateY(12px);
        transition:
          opacity 0.9s 0.12s ease,
          transform 0.9s 0.12s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .cert-slide.is-active .cert-visual {
        opacity: 1;
        transform: scale(1) translateY(0);
      }

      /* ── CONTACT ─────────────────────────────────────── */
      #contact {
        padding: 160px 80px;
      }
      .contact-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 100px;
        align-items: start;
      }
      .contact-title {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(2.8rem, 5vw, 4.4rem);
        font-weight: 300;
        line-height: 1.1;
        margin-bottom: 32px;
      }
      .contact-title em {
        font-style: italic;
        color: var(--red);
      }
      .contact-text {
        font-size: 0.9rem;
        color: var(--muted);
        line-height: 1.8;
        margin-bottom: 52px;
      }
      .contact-infos {
        display: flex;
        flex-direction: column;
        gap: 28px;
      }
      .contact-info-item {
        display: flex;
        gap: 20px;
        align-items: flex-start;
      }
      .contact-info-icon {
        width: 40px;
        height: 40px;
        border: 1px solid var(--line);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--red);
        font-size: 0.9rem;
      }
      .contact-info-label {
        font-size: 0.62rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--red);
        margin-bottom: 4px;
      }
      .contact-info-value {
        font-size: 0.95rem;
        color: var(--cream);
      }

      .form-group {
        margin-bottom: 24px;
      }
      .form-group label {
        display: block;
        font-size: 0.62rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 8px;
      }
      .form-group input,
      .form-group select,
      .form-group textarea {
        width: 100%;
        background: var(--surface);
        border: 1px solid var(--line);
        border-bottom: 1px solid rgba(232, 176, 0, 0.35);
        color: var(--cream);
        font-family: "Jost", sans-serif;
        font-size: 0.9rem;
        font-weight: 300;
        padding: 14px 18px;
        outline: none;
        transition:
          border-color 0.3s,
          background 0.3s;
        appearance: none;
      }
      .form-group input:focus,
      .form-group select:focus,
      .form-group textarea:focus {
        border-color: var(--red);
        background: rgba(20, 18, 5, 0.9);
      }
      .form-group textarea {
        height: 120px;
        resize: none;
      }
      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
      .field-error {
        display: none;
        font-size: 0.6rem;
        letter-spacing: 0.12em;
        color: var(--red);
        margin-top: 6px;
      }
      .form-group.has-error .field-error {
        display: block;
      }
      .form-group.has-error input,
      .form-group.has-error select,
      .form-group.has-error textarea {
        border-color: rgba(232, 176, 0, 0.6);
        border-bottom-color: var(--red);
      }
      .btn-submit {
        width: 100%;
        padding: 18px;
        background: var(--red);
        color: var(--cream);
        border: none;
        font-family: "Jost", sans-serif;
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        cursor: none;
        transition:
          background 0.3s,
          transform 0.2s;
        margin-top: 8px;
      }
      .btn-submit:hover {
        background: var(--red-light);
        transform: translateY(-2px);
      }

      /* ── FOOTER ──────────────────────────────────────── */
      footer {
        background: var(--deep);
        border-top: 1px solid var(--line);
        padding: 80px;
      }
      .footer-top {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 60px;
        margin-bottom: 60px;
        padding-bottom: 60px;
        border-bottom: 1px solid var(--line);
      }
      .footer-brand-name {
        font-family: "Cormorant Garamond", serif;
        font-size: 1.4rem;
        font-weight: 400;
        letter-spacing: 0.1em;
        margin-bottom: 16px;
      }
      .footer-brand-name span {
        color: var(--red);
      }
      .footer-brand-desc {
        font-size: 0.82rem;
        color: var(--muted);
        line-height: 1.75;
        max-width: 280px;
      }
      .footer-col-title {
        font-size: 0.62rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--red);
        margin-bottom: 24px;
      }
      .footer-links {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .footer-links a {
        font-size: 0.84rem;
        color: var(--muted);
        text-decoration: none;
        transition: color 0.3s;
      }
      .footer-links a:hover {
        color: var(--cream);
      }
      .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .footer-copy {
        font-size: 0.72rem;
        color: var(--muted);
        letter-spacing: 0.08em;
      }
      .footer-copy span {
        color: var(--red);
      }
      .footer-legal {
        display: flex;
        gap: 32px;
      }
      .footer-legal a {
        font-size: 0.72rem;
        color: var(--muted);
        text-decoration: none;
        transition: color 0.3s;
      }
      .footer-legal a:hover {
        color: var(--cream);
      }
      .footer-top-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--line);
        color: var(--muted);
        text-decoration: none;
        transition:
          border-color 0.3s,
          color 0.3s,
          transform 0.3s;
        font-size: 1.1rem;
      }
      .footer-top-btn:hover {
        border-color: var(--red);
        color: var(--red);
        transform: translateY(-4px);
      }

      /* ── KEYFRAMES ───────────────────────────────────── */
      @keyframes marquee {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }
      @keyframes scrollPulse {
        0%,
        100% {
          opacity: 0.3;
          transform: scaleY(0.8);
        }
        50% {
          opacity: 1;
          transform: scaleY(1);
        }
      }
      @keyframes spinSlow {
        to {
          transform: rotate(360deg);
        }
      }

      .reveal {
        opacity: 0;
        transform: translateY(40px);
        transition:
          opacity 0.9s ease,
          transform 0.9s ease;
      }
      .reveal.visible {
        opacity: 1;
        transform: none;
      }
      .reveal-left {
        opacity: 0;
        transform: translateX(-40px);
        transition:
          opacity 0.9s ease,
          transform 0.9s ease;
      }
      .reveal-left.visible {
        opacity: 1;
        transform: none;
      }
      .reveal-right {
        opacity: 0;
        transform: translateX(40px);
        transition:
          opacity 0.9s ease,
          transform 0.9s ease;
      }
      .reveal-right.visible {
        opacity: 1;
        transform: none;
      }
      .stagger > * {
        opacity: 0;
        transform: translateY(30px);
        transition:
          opacity 0.7s ease,
          transform 0.7s ease;
      }
      .stagger.visible > *:nth-child(1) {
        opacity: 1;
        transform: none;
        transition-delay: 0s;
      }
      .stagger.visible > *:nth-child(2) {
        opacity: 1;
        transform: none;
        transition-delay: 0.12s;
      }
      .stagger.visible > *:nth-child(3) {
        opacity: 1;
        transform: none;
        transition-delay: 0.24s;
      }
      .stagger.visible > *:nth-child(4) {
        opacity: 1;
        transform: none;
        transition-delay: 0.36s;
      }
      .stagger.visible > *:nth-child(5) {
        opacity: 1;
        transform: none;
        transition-delay: 0.48s;
      }
      .stagger.visible > *:nth-child(6) {
        opacity: 1;
        transform: none;
        transition-delay: 0.6s;
      }

      /* ── CTA SERVICES ───────────────────────────────── */
      .svc-cta-banner {
        background: var(--black);
        border-top: 1px solid var(--line);
        padding: 80px 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
      }
      .svc-cta-text {
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(2rem, 3.5vw, 3rem);
        font-weight: 300;
        color: var(--cream);
        line-height: 1.1;
      }
      .svc-cta-text em {
        font-style: italic;
        color: var(--red);
      }
      .svc-cta-btn {
        display: inline-block;
        flex-shrink: 0;
        background: var(--red);
        color: var(--cream);
        font-family: "Jost", sans-serif;
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        text-decoration: none;
        padding: 20px 52px;
        transition:
          background 0.3s,
          transform 0.3s;
      }
      .svc-cta-btn:hover {
        background: var(--red-light);
        transform: translateY(-2px);
      }

      /* ── BOUTON MOBILE FLOTTANT ──────────────────────── */
      .mobile-call-btn {
        display: none;
      }

      /* ── RESPONSIVE ──────────────────────────────────── */
      @media (max-width: 1100px) {
        #about {
          grid-template-columns: 1fr;
          gap: 60px;
        }
        #expertise-scroll-zone {
          height: auto;
        }
        #expertise {
          position: static;
          height: auto;
          padding: 80px 28px;
          overflow: visible;
          grid-template-columns: 1fr;
          gap: 60px;
        }
        #prise-canvas,
        #prise-video {
          display: none;
        }
        .contact-inner {
          grid-template-columns: 1fr;
          gap: 60px;
        }
        .footer-top {
          grid-template-columns: 1fr 1fr;
        }
        .process-steps {
          grid-template-columns: 1fr 1fr;
          gap: 40px;
        }
        .process-line {
          display: none;
        }
        .svc-scene {
          grid-template-columns: 1fr;
          padding: 100px 40px 0;
        }
        .svc-right {
          display: none;
        }
        .svc-bg-num {
          font-size: 55vw;
          opacity: 0.04;
          right: -0.02em;
        }
      }
      @media (max-width: 768px) {
        nav {
          padding: 20px 24px;
        }
        nav.scrolled {
          padding: 14px 24px;
        }
        .nav-links {
          display: none;
        }
        body {
          cursor: auto;
        }
        #cursor-wire {
          display: none;
        }
        #cursor,
        #cursor-ring {
          display: none;
        }
        .hero-layer {
          padding: 0 28px 80px;
        }
        #about,
        #expertise,
        #contact {
          padding: 80px 28px;
        }
        #process-zone {
          height: auto;
        }
        #process {
          position: relative;
          height: auto;
          padding: 80px 28px;
        }
        .process-step {
          opacity: 1 !important;
          transform: none !important;
        }
        #cert-zone {
          height: auto;
        }
        #certifications {
          position: relative;
          height: auto;
          padding: 80px 28px;
        }
        .cert-slide {
          position: relative;
          opacity: 1;
          pointer-events: auto;
          padding: 40px 0;
          display: block;
        }
        .cert-slide.is-active {
          opacity: 1;
        }
        .cert-bg-num {
          display: none;
        }
        .cert-dots,
        .cert-progress-bar,
        .cert-counter {
          display: none;
        }
        .cert-content {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .cert-name {
          clip-path: none !important;
          font-size: 2.8rem;
        }
        .cert-sub {
          opacity: 1 !important;
          transform: none !important;
        }
        .cert-visual {
          opacity: 1 !important;
          transform: none !important;
        }
        .footer-top {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        footer {
          padding: 60px 28px;
        }
        .footer-bottom {
          flex-direction: column;
          gap: 20px;
        }
        .form-row {
          grid-template-columns: 1fr;
        }
        .visual-break-overlay {
          padding: 0 40px;
        }
        .process-steps {
          grid-template-columns: 1fr;
        }
        #services-counter {
          left: 40px;
        }
        .svc-scene {
          padding: 80px 28px 0;
        }
        .svc-cta-banner {
          flex-direction: column;
          align-items: flex-start;
          padding: 60px 28px;
          gap: 28px;
        }
      }