@charset "UTF-8";

/* ==================================================================
   Ex-bloc inline <style> principal - externalise le 2026-08-07
   ================================================================== */

  /* ================================
     RESET & VARIABLES
     ================================ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* Variable animatable (spotlight valeur cards) */
  @property --vlr-spot {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
  }

  :root {
    /* Charte JCD — palette complète conservée en variables (réserve) */
    --c-anthracite: #3D3B3B;
    --c-white: #FFFFFF;
    --c-blue: #2E72BA;
    --c-yellow: #F9D605;
    --c-orange: #F3941D;
    --c-red: #E51D29;
    --c-purple: #8D2C87;
    --c-green: #8EC041;
    --c-beige: #A78D75;

    /* Surfaces */
    --bg: #0a0a0a;
    --bg-elev-1: #101010;
    --bg-elev-2: #141414;
    --bg-elev-3: #1a1a1a;

    /* Textes */
    --text-primary: #f4f4f4;
    --text-secondary: #b8b8b8;
    --text-tertiary: #949494;

    /* Bordures */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);

    /* Accent unique = Bleu JCD (toujours utilisé pour les éléments
       structurels : dots de timeline, halo de hover, etc.) */
    --accent: var(--c-blue);
    --accent-hover: #4287cb;
    --accent-soft: rgba(46, 114, 186, 0.14);
    /* Couleur des éléments TEXTUELS auparavant bleus :
       gris avec une teinte très légère de bleu clair */
    --accent-text: #748099;

    /* Layout */
    --max-content: 1180px;
    --pad-x: clamp(20px, 4vw, 40px);

    /* Typographie unique = Inter */
    --font: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  }

  html { scroll-behavior: smooth; overflow-x: hidden; }

  body {
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  /* Texture grain subtile */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.025;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  h1, h2, h3, h4 {
    font-family: var(--font);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text-primary);
  }

  a { color: inherit; text-decoration: none; }
  button { font-family: var(--font); cursor: pointer; border: none; background: none; color: inherit; }
  img { max-width: 100%; display: block; }

  .container {
    max-width: var(--max-content);
    margin: 0 auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    position: relative;
    z-index: 2;
  }

  /* ================================
     BOUTONS
     ================================ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    transition: all 160ms cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .btn-primary {
    /* Bouton primaire en gris clair sur texte anthracite */
    background: #e5e7eb;
    color: var(--c-anthracite);
    box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 14px rgba(229, 231, 235, 0.12);
  }
  .btn-primary:hover {
    background: #f1f3f5;
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 6px 20px rgba(229, 231, 235, 0.18);
  }

  .btn-ghost {
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    border-color: var(--border-default);
  }
  .btn-ghost:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--border-strong);
    transform: translateY(-1px);
  }

  .btn-link {
    background: transparent;
    color: var(--text-secondary);
    padding: 0 10px;
    font-weight: 500;
  }
  .btn-link:hover { color: var(--text-primary); }

  .btn-lg { height: 42px; padding: 0 20px; font-size: 14px; }

  /* ================================================================
     NAVBAR v2 — Modal-like (bande pleine largeur + fade aux extrémités)
     Logo (g) · capsule centrale {Expertises ▾ · Contact · Carrières}
     · CTA Assistance (d). Le fond de la bande est fadé à 0 sur les
     bords via mask-image (forme "rectangulaire ellipse"). Backdrop
     blur uniquement dans la zone visible.
     ================================================================ */
  .navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: 80px;
    display: flex;
    align-items: center;
    pointer-events: none;     /* le fond ne capture pas le pointer */
  }

  /* Fond de la bande : opacité de base + scrolled, masque gradient
     gauche/droite => "barre ellipse" qui s'évanouit franchement aux
     extrémités. Fade très marqué : zone opaque seulement au centre. */
  .navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.50);
    backdrop-filter: saturate(170%) blur(16px);
    -webkit-backdrop-filter: saturate(170%) blur(16px);
    /* Fade exagéré : transparent jusqu'à 8%, montée douce jusqu'à 36%,
       plateau opaque jusqu'à 64%, redescente jusqu'à 92%, transparent. */
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,0.0) 8%,
      rgba(0,0,0,0.45) 22%,
      #000 36%,
      #000 64%,
      rgba(0,0,0,0.45) 78%,
      rgba(0,0,0,0.0) 92%,
      transparent 100%);
            mask-image: linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,0.0) 8%,
      rgba(0,0,0,0.45) 22%,
      #000 36%,
      #000 64%,
      rgba(0,0,0,0.45) 78%,
      rgba(0,0,0,0.0) 92%,
      transparent 100%);
    transition: background 280ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: -1;
  }
  .navbar.scrolled::before {
    background: rgba(10, 10, 10, 0.80);
  }

  /* Liseré bas, lui aussi fadé sur les bords (alignement symétrique) */
  .navbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.0) 12%,
      rgba(255, 255, 255, 0.10) 30%,
      rgba(255, 255, 255, 0.10) 70%,
      rgba(255, 255, 255, 0.0) 88%,
      transparent 100%);
    opacity: 0;
    transition: opacity 280ms ease;
    pointer-events: none;
    z-index: -1;
  }
  .navbar.scrolled::after { opacity: 1; }

  /* Grid 3 colonnes : logo | capsule | CTA */
  .nav-inner {
    pointer-events: auto;     /* on réactive le pointer pour le contenu */
    width: 100%;
    max-width: var(--max-content);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
  }

  /* ----- Logo ------------------------------------------------------- */
  .logo {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    line-height: 0;
  }
  /* Logo PNG officiel JCD — ratio 1530×482 (≈3.174:1), rendu HD */
  .logo .logo-img {
    display: block;
    height: 40px;
    width: auto;
    aspect-ratio: 1530 / 482;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* ----- Capsule centrale (Modal-like) ------------------------------ */
  .nav-center {
    justify-self: center;
    pointer-events: auto;
  }
  .nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    /* Double-bezel : highlight intérieur très subtil + ombre extérieure soft */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 1px 2px rgba(0, 0, 0, 0.20),
      0 6px 24px rgba(0, 0, 0, 0.18);
    transition:
      background 260ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-pill:hover,
  .nav-pill:focus-within {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
  }

  /* Chaque item du pill : link ou bouton, même rythme typo */
  .nav-pill__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition:
      color 200ms cubic-bezier(0.22, 1, 0.36, 1),
      background 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-pill__item:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
  }
  .nav-pill__item:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.40);
    outline-offset: 2px;
  }
  .nav-pill__trigger[aria-expanded="true"] {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
  }
  .nav-chevron {
    color: currentColor;
    opacity: 0.65;
    transition:
      transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 200ms ease;
  }
  .nav-pill__item:hover .nav-chevron { opacity: 0.9; }
  .nav-pill__trigger[aria-expanded="true"] .nav-chevron {
    transform: rotate(180deg);
    opacity: 1;
  }

  /* ----- Icône Carrières accolée à la capsule "Nos solutions" ------- */
  .nav-pill__sep {
    width: 1px; height: 16px; flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 2px;
  }
  .nav-pill__careers { padding: 0 11px; }
  .nav-pill__careers svg { width: 15px; height: 15px; display: block; }
  .nav-pill__careers.is-current {
    color: var(--text-1);
    background: rgba(255, 255, 255, 0.06);
  }

  /* ----- Pillule droite : Assistance + Contact ----------------------
     Contraste bi-tonal dans une même capsule :
       · Assistance → noir sur blanc (item clair)
       · Contact    → blanc sur noir (item sombre)
     Les deux items partagent le même contour pill. */
  .nav-cta {
    justify-self: end;
    display: flex;
    align-items: center;
    pointer-events: auto;
  }

  /* Container NOIR — hauteur EXACTE 32px (= Assistance). */
  .nav-pill--actions {
    height: 32px;
    padding: 0;
    gap: 0;
    background: #0a0a0a;
    border: none;
    border-radius: 999px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 1px 2px rgba(0, 0, 0, 0.35),
      0 6px 24px rgba(0, 0, 0, 0.30);
    overflow: visible;            /* le glow doit pouvoir s'échapper */
    transition: box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Hover sur Contact → seul effet : contour qui glow en blanc
     (couleur de contraste de la pill noire). Aucun changement de
     bg, aucun shift de couleur, aucun transform. */
  .nav-pill--actions:has(.nav-pill__item--dark:hover),
  .nav-pill--actions:has(.nav-pill__item--dark:focus-visible) {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 1px 2px rgba(0, 0, 0, 0.35),
      0 6px 24px rgba(0, 0, 0, 0.30),
      0 0 0 1px rgba(255, 255, 255, 0.32),
      0 0 14px rgba(255, 255, 255, 0.20);
  }

  /* Métriques communes : exactement la hauteur du container */
  .nav-pill__item--light,
  .nav-pill__item--dark {
    height: 32px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border: none;
    transition:
      transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
      background 200ms cubic-bezier(0.22, 1, 0.36, 1),
      color 200ms ease,
      box-shadow 200ms ease;
  }

  /* Assistance — premier plan, pill blanche. */
  .nav-pill__item--light {
    padding: 0 14px;
    background: #f4f4f4;
    color: #0a0a0a;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  }
  /* Hover Assistance → seul effet : contour qui glow dans sa
     couleur de contraste (sombre sur surface blanche). Aucun
     changement de bg, aucun shift de couleur, aucun transform. */
  .nav-pill__item--light:hover,
  .nav-pill__item--light:focus-visible {
    background: #f4f4f4;
    color: #0a0a0a;
    outline: none;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      inset 0 -1px 0 rgba(0, 0, 0, 0.06),
      inset 0 0 0 1px rgba(10, 10, 10, 0.42),
      inset 0 0 6px rgba(10, 10, 10, 0.14);
  }

  /* Contact — texte blanc fondu sur le noir du container.
     Aucun effet propre au hover : le glow est porté par le
     container (cf. .nav-pill--actions:has). */
  .nav-pill__item--dark {
    padding: 0 14px 0 12px;
    background: transparent;
    color: #f4f4f4;
  }
  .nav-pill__item--dark:hover,
  .nav-pill__item--dark:focus-visible {
    background: transparent;
    color: #f4f4f4;
    outline: none;
  }

  /* ============================================================
     DROPDOWN PANEL — 7 expertises avec SVG 3D isométriques
     Position : sous la navbar, centré sur l'écran. Animation
     d'ouverture : translate + opacity + scale très léger.
     ============================================================ */
  /* Le panneau ne transitionne QUE visibility ; le fade/slide vit sur le
     shell. Le flou de fond n'est PAS ici (un backdrop-filter descendant de
     la navbar fixed n'échantillonne pas la page sur Chromium) mais sur
     body::after, calé sur le rect du panneau (cf. plus bas). */
  .nav-panel {
    position: absolute; top: calc(100% + 12px); left: 50%;
    transform: translateX(-50%);
    width: min(480px, calc(100vw - 32px));
    pointer-events: none;
    z-index: 99;
    border-radius: 18px;
    /* (Pas de backdrop-filter ici : inopérant sur Chromium car descendant
       de la navbar fixed. Le flou est porté par body::after, cf. plus bas.) */
  }
  .nav-panel[aria-hidden="false"] { pointer-events: auto; }
  .nav-panel[aria-hidden="true"] {
    visibility: hidden;
    transition: visibility 0s linear 260ms;
  }
  .nav-panel[aria-hidden="false"] {
    visibility: visible;
    transition: visibility 0s linear 0s;
  }
  .nav-panel__shell {
    position: relative; padding: 4px;
    background: rgba(15, 15, 17, 0.92);
    border: none; border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.60), 0 50px 120px rgba(0,0,0,0.35);
    overflow: hidden;
    opacity: 0; transform: translateY(-6px);
    transition: opacity 260ms var(--ease-out), transform 320ms var(--ease-out);
  }
  .nav-panel[aria-hidden="false"] .nav-panel__shell { opacity: 1; transform: translateY(0); }

  /* Voile givré calé sur le panneau de menu ouvert (rect posé en vars
     --menu-x/y/w/h par setupMenuFrost). Porté par body::after et non par
     le panneau : un backdrop-filter descendant de la navbar fixed ne peut
     pas échantillonner le contenu de la page (bug compositing Chromium).
     z-index 99 : au-dessus du contenu, sous la navbar (z 100). */
  body::after {
    content: ""; position: fixed;
    left: var(--menu-x, 0px); top: var(--menu-y, 0px);
    width: var(--menu-w, 0px); height: var(--menu-h, 0px);
    border-radius: 18px;
    z-index: 99; pointer-events: none;
    opacity: 0; visibility: hidden;
    background: rgba(8, 8, 10, 0.35);
    backdrop-filter: blur(32px) saturate(120%);
    -webkit-backdrop-filter: blur(32px) saturate(120%);
    /* Sortie INSTANTANÉE : le menu glisse+fade et quitte le champ en ~80ms ;
       tout fondu du voile (immobile) le ferait traîner après → rectangle de
       blur nu. On le coupe net dès la fermeture, le panneau (92% opaque) le
       couvre encore. L'entrée reste à 260ms (cf. règle :has ci-dessous). */
    transition: opacity 0s, visibility 0s;
  }
  body:has(.nav-panel[aria-hidden="false"])::after {
    opacity: 1; visibility: visible;
    transition: opacity 260ms var(--ease-out), visibility 0s linear 0s;
  }

  /* ============================================================
     Stacked vertical (pattern Vercel / Notion / Linear).
     Chaque expertise = une ligne pleine largeur. Sous-sections
     indentées sous le parent. Monochrome strict : aucune couleur
     de marque, hairlines + 1 dot bleu JCD au hover sous-section.
     ============================================================ */
  .nav-panel__grid {
    list-style: none;
    margin: 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .nav-panel__grid > li {
    position: relative;
    display: flex;
    flex-direction: column;
  }
  /* Hairline gradient entre parents (sauf au-dessus du premier) */
  .nav-panel__grid > li + li::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 22%,
      rgba(255, 255, 255, 0.08) 78%,
      transparent 100%);
    pointer-events: none;
  }

  /* ============================================================
     Item parent : ligne pleine largeur, titre aligné à gauche.
     Hover = bg subtil + texte primaire. Aucune couleur d'accent.
     ============================================================ */
  .nav-panel__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    color: var(--text-secondary);
    text-decoration: none;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    transition:
      background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
      color 220ms cubic-bezier(0.22, 1, 0.36, 1);
    isolation: isolate;
  }
  .nav-panel__item:hover,
  .nav-panel__item:focus-visible {
    background-color: rgba(255, 255, 255, 0.035);
    color: var(--text-primary);
    outline: none;
  }
  .nav-panel__item:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(46, 114, 186, 0.40);
  }
  .nav-panel__item.is-current {
    color: var(--text-primary);
  }

  .nav-panel__title {
    font-size: 13.5px;
    font-weight: 500;
    color: inherit;
    letter-spacing: -0.005em;
    line-height: 1;
    white-space: nowrap;
  }

  /* ============================================================
     Sous-liste : indentée, typo plus légère, dot subtle qui
     passe au bleu JCD au hover (seul accent coloré du panel).
     ============================================================ */
  .nav-panel__sub {
    list-style: none;
    margin: 0;
    padding: 0 4px 6px 4px;
    display: flex;
    flex-direction: column;
  }
  .nav-panel__sub-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 0 16px 0 36px;
    color: var(--text-tertiary);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: -0.003em;
    line-height: 1;
    border-radius: 6px;
    transition:
      background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
      color 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-panel__sub-item::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
    transition:
      background 200ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-panel__sub-item:hover,
  .nav-panel__sub-item:focus-visible {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.025);
    outline: none;
  }
  .nav-panel__sub-item:hover::before,
  .nav-panel__sub-item:focus-visible::before {
    background: var(--c-blue);
    opacity: 1;
  }
  .nav-panel__sub-item:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(46, 114, 186, 0.40);
  }

  /* ----- Responsive nav v2 ----------------------------------------- */
  @media (max-width: 820px) {
    .navbar { height: 70px; }
    .nav-inner { grid-template-columns: auto 1fr auto; gap: 10px; }
    .logo .logo-img { height: 32px; }
    .nav-center { display: none; }
    .btn-assistance { height: 32px; padding: 0 12px 0 10px; font-size: 12px; }
  }
  @media (max-width: 520px) {
    .nav-panel { width: calc(100vw - 24px); }
    .nav-panel__shell { padding: 4px; border-radius: 14px; }
  }

  /* ================================
     HERO — left-aligned façon Linear
     ================================ */
  .hero {
    position: relative;
    padding: 132px 0 8px;
    overflow: hidden;
  }
  .hero::before {
    /* Aurora multi-couleurs : 7 teintes JCD réparties horizontalement.
       Opacités remontées ~2x (29/07) : la gamme 0.08-0.15 d'origine
       disparaissait sur le fond noir. Les proportions entre teintes
       sont conservées — le bleu reste l'ancre, derrière le titre. */
    content: "";
    position: absolute;
    inset: -10% -10% auto -10%;
    height: 720px;
    background:
      radial-gradient(40% 50% at 8% 24%, rgba(249, 214, 5, 0.17) 0%, transparent 60%),
      radial-gradient(35% 50% at 22% 30%, rgba(243, 148, 29, 0.17) 0%, transparent 60%),
      radial-gradient(40% 55% at 38% 22%, rgba(229, 29, 41, 0.16) 0%, transparent 60%),
      radial-gradient(35% 55% at 52% 32%, rgba(141, 44, 135, 0.21) 0%, transparent 60%),
      radial-gradient(45% 55% at 68% 26%, rgba(46, 114, 186, 0.28) 0%, transparent 65%),
      radial-gradient(35% 50% at 82% 30%, rgba(142, 192, 65, 0.17) 0%, transparent 60%),
      radial-gradient(30% 50% at 96% 38%, rgba(167, 141, 117, 0.15) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }
  .hero > * { position: relative; z-index: 1; }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-default);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    transition: background 160ms ease, border-color 160ms ease;
    font-weight: 500;
  }
  .badge:hover { background: rgba(255,255,255,0.07); border-color: var(--border-strong); }
  .badge-tag {
    display: inline-block;
    padding: 2px 8px;
    background: var(--accent-soft);
    color: #aac6ea;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .badge-arrow { color: var(--text-tertiary); transition: transform 160ms ease; }
  .badge:hover .badge-arrow { transform: translateX(2px); color: var(--text-primary); }

  .hero h1 {
    font-size: clamp(34px, 5.27vw, 65px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin-top: 75px;
    margin-bottom: 22px;
    font-weight: 600;
    max-width: 18ch;
  }
  .hero h1 em {
    /* Gradient multi-couleurs JCD appliqué sur le texte
       (bleu renforcé sur le P). */
    background: linear-gradient(120deg,
      rgba(46, 114, 186, 0.95)  0%,
      rgba(46, 114, 186, 0.92)  9%,
      rgba(249, 214, 5,  0.78) 24%,
      rgba(243, 148, 29, 0.78) 38%,
      rgba(239, 72,  88, 0.78) 53%,
      rgba(176, 99, 172, 0.78) 69%,
      rgba(142, 192, 65, 0.78) 84%,
      rgba(201, 179, 156, 0.78) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .hero-sub {
    max-width: 580px;
    margin-bottom: 32px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-secondary);
  }
  .hero-cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 72px;
  }

  /* ================================
     HERO GALAXY — constellation ultra-épurée, halos très progressifs
     ================================ */
  .hero-galaxy-wrap {
    position: relative;
    width: 100%;
    max-width: 760px;       /* réduit de 1080 → 760 */
    margin: 0 auto;
  }
  .hero-galaxy {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .hero-galaxy text {
    font-family: var(--font);
    pointer-events: none;
  }

  /* Pulsation : on anime un cercle dédié (pas le dot lui-même) pour
     éviter les transformations 0/0 sur SVG ; on joue sur le rayon
     ET l'opacité pour un effet "respire" plutôt que "scale brutal". */
  @keyframes hgRing {
    0%   { r: 11; opacity: 0.55; }
    70%  { r: 28; opacity: 0; }
    100% { r: 28; opacity: 0; }
  }
  .hero-galaxy .hg-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: hgRing 3.6s ease-out infinite;
  }
  .hero-galaxy .hg-blue   .hg-ring { animation-delay: 0s; }
  .hero-galaxy .hg-red    .hg-ring { animation-delay: 0.5s; }
  .hero-galaxy .hg-yellow .hg-ring { animation-delay: 1.0s; }
  .hero-galaxy .hg-orange .hg-ring { animation-delay: 1.5s; }
  .hero-galaxy .hg-purple .hg-ring { animation-delay: 2.0s; }
  .hero-galaxy .hg-green  .hg-ring { animation-delay: 2.5s; }
  .hero-galaxy .hg-beige  .hg-ring { animation-delay: 3.0s; }

  /* Respire du noyau central — glow et irradiation douce */
  @keyframes hgCoreBreath {
    0%, 100% {
      opacity: 0.9;
      filter: drop-shadow(0 0 6px rgba(255,255,255,0.55))
              drop-shadow(0 0 14px rgba(255,255,255,0.30));
    }
    50%      {
      opacity: 1;
      filter: drop-shadow(0 0 12px rgba(255,255,255,0.85))
              drop-shadow(0 0 28px rgba(255,255,255,0.45));
    }
  }
  .hero-galaxy .hg-core { animation: hgCoreBreath 4.5s ease-in-out infinite; }

  /* Halo irradiant qui pulse autour du cœur */
  @keyframes hgCoreRadiate {
    0%   { transform: scale(0.9); opacity: 0.55; }
    70%  { transform: scale(1.6); opacity: 0;    }
    100% { transform: scale(1.6); opacity: 0;    }
  }
  .hero-galaxy .hg-core-radiate {
    transform-box: fill-box;
    transform-origin: center;
    animation: hgCoreRadiate 4s ease-out infinite;
  }
  .hero-galaxy .hg-core-radiate.delay { animation-delay: 2s; }

  /* Particules de poussière qui scintillent doucement */
  @keyframes hgDust {
    0%, 100% { opacity: 0.18; }
    50%      { opacity: 0.55; }
  }
  .hero-galaxy .hg-dust { animation: hgDust 4.5s ease-in-out infinite; }
  .hero-galaxy .hg-dust.d2 { animation-delay: 0.6s; }
  .hero-galaxy .hg-dust.d3 { animation-delay: 1.2s; }
  .hero-galaxy .hg-dust.d4 { animation-delay: 1.8s; }
  .hero-galaxy .hg-dust.d5 { animation-delay: 2.4s; }

  /* Hover sur un nœud : intensification douce */
  .hero-galaxy .hg-node { cursor: default; }
  .hero-galaxy .hg-halo,
  .hero-galaxy .hg-label-tag,
  .hero-galaxy .hg-label-name {
    transition: opacity 320ms ease;
  }
  .hero-galaxy .hg-node:hover .hg-halo { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .hero-galaxy .hg-ring,
    .hero-galaxy .hg-core,
    .hero-galaxy .hg-dust { animation: none; }
  }

  /* Visuel de marque dans le hero (ancien) */
  .brand-showcase {
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    overflow: hidden;
    /* Gradient gris (anciennement teinté bleu) */
    background: linear-gradient(180deg, #2a2a2a 0%, #161616 100%);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.02),
      0 60px 120px -30px rgba(255, 255, 255, 0.05),
      0 30px 60px -20px rgba(0, 0, 0, 0.7);
  }
  .brand-showcase::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 28%;
    background: linear-gradient(to bottom, transparent 0%, rgba(10,10,10,0.4) 50%, var(--bg) 100%);
    pointer-events: none;
  }
  .showcase-bar {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-elev-1);
    gap: 6px;
  }
  .showcase-bar-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bg-elev-3); }
  .showcase-bar-title {
    margin-left: auto; margin-right: auto;
    font-size: 11px;
    color: var(--text-tertiary);
    transform: translateX(-22px);
  }

  .showcase-body {
    padding: 48px 44px 56px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 48px;
    align-items: center;
    text-align: left;
  }

  .sphere-wrap {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sphere-wrap::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(46,114,186,0.16), transparent 70%);
    filter: blur(20px);
  }
  .sphere-wrap svg {
    position: relative;
    width: 100%;
    height: 100%;
    color: var(--text-tertiary);
  }

  .pole-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .pole-tile {
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 14px 10px;
    text-align: center;
    transition: all 180ms ease;
    cursor: default;
  }
  .pole-tile:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--border-strong);
    transform: translateY(-1px);
  }
  .pole-tile-icon {
    width: 28px; height: 28px;
    margin: 0 auto 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
  }
  .pole-tile-name {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.3;
    font-weight: 500;
  }
  .pole-tile.is-cta { background: rgba(46,114,186,0.10); border-color: rgba(46,114,186,0.32); }
  .pole-tile.is-cta .pole-tile-icon { background: var(--accent); color: #fff; }
  .pole-tile.is-cta .pole-tile-name { color: var(--text-primary); font-weight: 600; }

  /* ================================
     SECTION HEADER (left-aligned)
     ================================ */
  .section-eyebrow {
    display: inline-block;
    font-size: 12px;
    color: var(--accent-text);
    margin-bottom: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .section-head {
    margin-bottom: 48px;
    max-width: 720px;
  }
  .section-head h2 {
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
    font-weight: 600;
  }
  .section-head p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.55;
    max-width: 580px;
  }

  /* ================================
     CHIFFRES CLÉS
     ================================ */
  .chiffres {
    position: relative;
    overflow: hidden;
    padding: 80px 0 96px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid transparent;
    /* Bordure inférieure qui s'estompe à droite, pour fondre la
       jonction avec la section .valeurs (dont le glow lunaire vient
       du bord droit). */
    border-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.075) 28%,
      rgba(255, 255, 255, 0.035) 55%,
      rgba(255, 255, 255, 0.012) 75%,
      rgba(255, 255, 255, 0) 92%
    ) 1;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-elev-1) 100%);
  }
  .chiffres::before {   /* trame de points discrète derrière la grille (papier millimétré sombre) */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 82% 56% at 50% 34%, #000 12%, rgba(0,0,0,0.35) 56%, transparent 86%);
            mask-image: radial-gradient(ellipse 82% 56% at 50% 34%, #000 12%, rgba(0,0,0,0.35) 56%, transparent 86%);
  }
  .chiffres > .container { position: relative; z-index: 1; }
  .chiffres-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  /* Calibrage éditorial : valeurs en chiffres tabulaires — le compteur
     ne « tremble » plus en largeur. */
  .chiffre {
    position: relative;
    padding: 24px 24px 0 0;
  }
  .chiffre-value {
    font-family: var(--font);
    font-size: clamp(40px, 5vw, 56px);
    line-height: 1;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 12px;
    display: flex;
    align-items: baseline;
    gap: 3px;
  }
  .chiffre-suffix {
    color: var(--accent-text);
    font-weight: 500;
    font-size: 0.62em;
    letter-spacing: -0.01em;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 600ms cubic-bezier(0.32, 0.72, 0, 1), transform 600ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .chiffre-suffix--pending { opacity: 0; transform: translateY(4px); }
  .chiffre-label {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 500;
  }

  /* ================================
     CLIENTS & PARTENAIRES — marquee
     Bandeau sous les chiffres : 3 rangées
     défilantes infinies, logos monochrome
     blanc avec fondu latéral. Pause au
     hover, accessibilité reduced-motion.
     ================================ */
  .clients-trust {
    margin-top: 48px;
    padding-top: 36px;
  }
  .clients-eyebrow {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--text-tertiary); margin-bottom: 26px;
  }
  .clients-eyebrow em { color: var(--accent-text); }

  .clients-marquee {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 28px;
    /* Fondu radial elliptique : zone pleine au centre puis dissipation
       en pétale ovale (rayons larges) pour un blend organique avec le
       background sombre de la section .chiffres. */
    --clients-mask: radial-gradient(
      ellipse 54% 96% at 50% 50%,
      #000 0%,
      #000 42%,
      rgba(0, 0, 0, 0.35) 66%,
      rgba(0, 0, 0, 0.07) 84%,
      transparent 94%
    );
    -webkit-mask-image: var(--clients-mask);
    mask-image: var(--clients-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    overflow: hidden;
    padding: 8px 0;
    /* Rails hairline entre les 3 rangées (fondus par le masque latéral).
       Positions = padding 8 + rangée 32 + demi-gap 14, puis + gap 28 + rangée 32. */
    background-image:
      linear-gradient(var(--border-subtle), var(--border-subtle)),
      linear-gradient(var(--border-subtle), var(--border-subtle));
    background-repeat: no-repeat;
    background-size: 100% 1px, 100% 1px;
    background-position: 0 54px, 0 114px;
  }
  .clients-row {
    display: flex;
    width: max-content;
    flex-shrink: 0;
    animation: clients-marquee var(--dur, 75s) linear infinite;
    will-change: transform;
  }
  .clients-row--reverse {
    animation-direction: reverse;
  }
  .clients-row__track {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }
  .clients-row__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    margin: 0 38px;
    list-style: none;
  }
  .clients-row__item img {
    display: block;
    max-height: 100%;
    max-width: 132px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.42;
    transition:
      opacity 600ms cubic-bezier(0.32, 0.72, 0, 1),
      transform 600ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .clients-row__item:hover img {
    opacity: 0.92;
    transform: scale(1.06);
  }
  /* Arrêt au survol. Le JS (bloc « marquee smooth ») prend la main dès
     qu'il peut piloter playbackRate : il pose .jcd-marquee-smooth et
     remplace cette coupure nette par une décélération progressive.
     La règle ci-dessous reste le repli si le JS ne s'exécute pas. */
  .clients-marquee:not(.jcd-marquee-smooth):hover .clients-row,
  .clients-marquee:not(.jcd-marquee-smooth):focus-within .clients-row {
    animation-play-state: paused;
  }
  @keyframes clients-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .clients-row {
      animation: none;
      transform: translate3d(-12%, 0, 0);
    }
    .clients-row__item img { opacity: 0.55; }
  }

  /* ================================
     PÔLES MÉTIERS — agencement H 3-1-3
     ================================ */
  .poles {
    padding: 12px 0 90px;
    margin-top: 35px;
    position: relative;
  }
  /* Gradient gris contrasté qui émane du container central et donne
     un léger effet 3D à la section (le centre paraît "élevé" par
     rapport aux côtés) */
  .poles::before {
    content: "";
    position: absolute;
    top: 200px;
    bottom: 60px;
    left: 0;
    right: 0;
    background:
      radial-gradient(34% 58% at 50% 52%, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.018) 30%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  /* L'orbe lunaire principal est porté par la section .valeurs et
     déborde naturellement par le haut sur Pôles métiers, créant
     une transition continue sans démarcation au bord droit. */
  .poles > .container {
    position: relative;
    z-index: 1;
  }

  .pole-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  /* Layout H 3-1-3 sur desktop : 3 cards à gauche, 1 large au centre
     (sur toute la hauteur), 3 cards à droite */
  @media (min-width: 1101px) {
    .pole-cards {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto auto;
      gap: 14px;
    }
    /* Informatique (pôle cœur) occupe 2 colonnes sur la première
       ligne. La couche visuelle (bg, border, box-shadow) est
       déléguée à ::after qui porte seule le mask — le contenu
       (texte/icônes) reste 100% lisible et non masqué. */
    .pole-card.pole-center {
      grid-column: 1 / span 2;
      grid-row: 1;
      padding: 22px 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
      background: transparent;
      border: 0 none;
      box-shadow: none;
      isolation: isolate;
    }
    .pole-card.pole-center .pole-card-top,
    .pole-card.pole-center h3,
    .pole-card.pole-center p {
      max-width: 720px;
    }
    /* Placement des 6 autres cards */
    .pole-card:nth-of-type(2) { grid-column: 3; grid-row: 1; }
    .pole-card:nth-of-type(3) { grid-column: 4; grid-row: 1; }
    .pole-card:nth-of-type(4) { grid-column: 1; grid-row: 2; }
    .pole-card:nth-of-type(5) { grid-column: 2; grid-row: 2; }
    .pole-card:nth-of-type(6) { grid-column: 3; grid-row: 2; }
    .pole-card:nth-of-type(7) { grid-column: 4; grid-row: 2; }

    /* Cards à fade : Info (pole-center) & Print : fade gauche.
       Développement & Agencement : fade droit. La couche visuelle est
       déléguée à ::after qui porte seule le mask. */
    .pole-card.pole-center,
    .pole-card:nth-of-type(3),
    .pole-card:nth-of-type(4),
    .pole-card:nth-of-type(7) {
      background: transparent;
      border: 0 none;
      box-shadow: none;
      isolation: isolate;
    }
    .pole-card.pole-center::after,
    .pole-card:nth-of-type(3)::after,
    .pole-card:nth-of-type(4)::after,
    .pole-card:nth-of-type(7)::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 12px;
      pointer-events: none;
      z-index: -1;
      background: linear-gradient(180deg, var(--bg-elev-2) 0%, var(--bg-elev-1) 100%);
      border: 1px solid var(--border-default);
      -webkit-mask-composite: source-in;
      mask-composite: intersect;
    }
    /* Fade gauche : Info & Print */
    .pole-card.pole-center::after,
    .pole-card:nth-of-type(4)::after {
      -webkit-mask-image:
        linear-gradient(to right,
          transparent 0%,
          rgba(0,0,0,0.10) 4%,
          rgba(0,0,0,0.22) 9%,
          rgba(0,0,0,0.38) 14%,
          rgba(0,0,0,0.55) 19%,
          rgba(0,0,0,0.72) 24%,
          rgba(0,0,0,0.88) 30%,
          #000 38%,
          #000 100%),
        linear-gradient(to bottom,
          rgba(0,0,0,0.20) 0%,
          rgba(0,0,0,0.40) 5%,
          rgba(0,0,0,0.65) 11%,
          rgba(0,0,0,0.85) 17%,
          #000 24%,
          #000 76%,
          rgba(0,0,0,0.85) 83%,
          rgba(0,0,0,0.65) 89%,
          rgba(0,0,0,0.40) 95%,
          rgba(0,0,0,0.20) 100%);
      mask-image:
        linear-gradient(to right,
          transparent 0%,
          rgba(0,0,0,0.10) 4%,
          rgba(0,0,0,0.22) 9%,
          rgba(0,0,0,0.38) 14%,
          rgba(0,0,0,0.55) 19%,
          rgba(0,0,0,0.72) 24%,
          rgba(0,0,0,0.88) 30%,
          #000 38%,
          #000 100%),
        linear-gradient(to bottom,
          rgba(0,0,0,0.20) 0%,
          rgba(0,0,0,0.40) 5%,
          rgba(0,0,0,0.65) 11%,
          rgba(0,0,0,0.85) 17%,
          #000 24%,
          #000 76%,
          rgba(0,0,0,0.85) 83%,
          rgba(0,0,0,0.65) 89%,
          rgba(0,0,0,0.40) 95%,
          rgba(0,0,0,0.20) 100%);
    }
    /* Info : top ET bottom entièrement opaques côté droit (contour
       identique aux cards Service / Télécom / Formation), puis fade
       horizontal très progressif vers la gauche. Le mask vertical
       reste 100% opaque pour que les deux bords (haut et bas) suivent
       exactement le même fade horizontal. */
    .pole-card.pole-center::after {
      -webkit-mask-image:
        linear-gradient(to right,
          transparent 0%,
          rgba(0,0,0,0.05) 8%,
          rgba(0,0,0,0.12) 18%,
          rgba(0,0,0,0.22) 28%,
          rgba(0,0,0,0.35) 38%,
          rgba(0,0,0,0.50) 48%,
          rgba(0,0,0,0.65) 58%,
          rgba(0,0,0,0.80) 68%,
          rgba(0,0,0,0.92) 78%,
          #000 88%,
          #000 100%),
        linear-gradient(to bottom, #000 0%, #000 100%);
      mask-image:
        linear-gradient(to right,
          transparent 0%,
          rgba(0,0,0,0.05) 8%,
          rgba(0,0,0,0.12) 18%,
          rgba(0,0,0,0.22) 28%,
          rgba(0,0,0,0.35) 38%,
          rgba(0,0,0,0.50) 48%,
          rgba(0,0,0,0.65) 58%,
          rgba(0,0,0,0.80) 68%,
          rgba(0,0,0,0.92) 78%,
          #000 88%,
          #000 100%),
        linear-gradient(to bottom, #000 0%, #000 100%);
    }
    /* Fade droit : Développement & Agencement */
    .pole-card:nth-of-type(3)::after,
    .pole-card:nth-of-type(7)::after {
      -webkit-mask-image:
        linear-gradient(to right,
          #000 0%,
          #000 62%,
          rgba(0,0,0,0.88) 70%,
          rgba(0,0,0,0.72) 76%,
          rgba(0,0,0,0.55) 81%,
          rgba(0,0,0,0.38) 86%,
          rgba(0,0,0,0.22) 91%,
          rgba(0,0,0,0.10) 96%,
          transparent 100%),
        linear-gradient(to bottom,
          rgba(0,0,0,0.20) 0%,
          rgba(0,0,0,0.40) 5%,
          rgba(0,0,0,0.65) 11%,
          rgba(0,0,0,0.85) 17%,
          #000 24%,
          #000 76%,
          rgba(0,0,0,0.85) 83%,
          rgba(0,0,0,0.65) 89%,
          rgba(0,0,0,0.40) 95%,
          rgba(0,0,0,0.20) 100%);
      mask-image:
        linear-gradient(to right,
          #000 0%,
          #000 62%,
          rgba(0,0,0,0.88) 70%,
          rgba(0,0,0,0.72) 76%,
          rgba(0,0,0,0.55) 81%,
          rgba(0,0,0,0.38) 86%,
          rgba(0,0,0,0.22) 91%,
          rgba(0,0,0,0.10) 96%,
          transparent 100%),
        linear-gradient(to bottom,
          rgba(0,0,0,0.20) 0%,
          rgba(0,0,0,0.40) 5%,
          rgba(0,0,0,0.65) 11%,
          rgba(0,0,0,0.85) 17%,
          #000 24%,
          #000 76%,
          rgba(0,0,0,0.85) 83%,
          rgba(0,0,0,0.65) 89%,
          rgba(0,0,0,0.40) 95%,
          rgba(0,0,0,0.20) 100%);
    }
    /* Hover ::before : hérite du même mask que ::after */
    .pole-card.pole-center::before,
    .pole-card:nth-of-type(4)::before {
      -webkit-mask-image:
        linear-gradient(to right,
          transparent 0%,
          rgba(0,0,0,0.10) 4%,
          rgba(0,0,0,0.22) 9%,
          rgba(0,0,0,0.38) 14%,
          rgba(0,0,0,0.55) 19%,
          rgba(0,0,0,0.72) 24%,
          rgba(0,0,0,0.88) 30%,
          #000 38%,
          #000 100%),
        linear-gradient(to bottom,
          rgba(0,0,0,0.20) 0%,
          rgba(0,0,0,0.40) 5%,
          rgba(0,0,0,0.65) 11%,
          rgba(0,0,0,0.85) 17%,
          #000 24%,
          #000 76%,
          rgba(0,0,0,0.85) 83%,
          rgba(0,0,0,0.65) 89%,
          rgba(0,0,0,0.40) 95%,
          rgba(0,0,0,0.20) 100%);
      mask-image:
        linear-gradient(to right,
          transparent 0%,
          rgba(0,0,0,0.10) 4%,
          rgba(0,0,0,0.22) 9%,
          rgba(0,0,0,0.38) 14%,
          rgba(0,0,0,0.55) 19%,
          rgba(0,0,0,0.72) 24%,
          rgba(0,0,0,0.88) 30%,
          #000 38%,
          #000 100%),
        linear-gradient(to bottom,
          rgba(0,0,0,0.20) 0%,
          rgba(0,0,0,0.40) 5%,
          rgba(0,0,0,0.65) 11%,
          rgba(0,0,0,0.85) 17%,
          #000 24%,
          #000 76%,
          rgba(0,0,0,0.85) 83%,
          rgba(0,0,0,0.65) 89%,
          rgba(0,0,0,0.40) 95%,
          rgba(0,0,0,0.20) 100%);
      -webkit-mask-composite: source-in;
      mask-composite: intersect;
    }
    .pole-card:nth-of-type(3)::before,
    .pole-card:nth-of-type(7)::before {
      -webkit-mask-image:
        linear-gradient(to right,
          #000 0%,
          #000 62%,
          rgba(0,0,0,0.88) 70%,
          rgba(0,0,0,0.72) 76%,
          rgba(0,0,0,0.55) 81%,
          rgba(0,0,0,0.38) 86%,
          rgba(0,0,0,0.22) 91%,
          rgba(0,0,0,0.10) 96%,
          transparent 100%),
        linear-gradient(to bottom,
          rgba(0,0,0,0.20) 0%,
          rgba(0,0,0,0.40) 5%,
          rgba(0,0,0,0.65) 11%,
          rgba(0,0,0,0.85) 17%,
          #000 24%,
          #000 76%,
          rgba(0,0,0,0.85) 83%,
          rgba(0,0,0,0.65) 89%,
          rgba(0,0,0,0.40) 95%,
          rgba(0,0,0,0.20) 100%);
      mask-image:
        linear-gradient(to right,
          #000 0%,
          #000 62%,
          rgba(0,0,0,0.88) 70%,
          rgba(0,0,0,0.72) 76%,
          rgba(0,0,0,0.55) 81%,
          rgba(0,0,0,0.38) 86%,
          rgba(0,0,0,0.22) 91%,
          rgba(0,0,0,0.10) 96%,
          transparent 100%),
        linear-gradient(to bottom,
          rgba(0,0,0,0.20) 0%,
          rgba(0,0,0,0.40) 5%,
          rgba(0,0,0,0.65) 11%,
          rgba(0,0,0,0.85) 17%,
          #000 24%,
          #000 76%,
          rgba(0,0,0,0.85) 83%,
          rgba(0,0,0,0.65) 89%,
          rgba(0,0,0,0.40) 95%,
          rgba(0,0,0,0.20) 100%);
      -webkit-mask-composite: source-in;
      mask-composite: intersect;
    }

    /* Hover sur les cards masquées : appliqué via ::after */
    .pole-card.pole-center:hover::after,
    .pole-card:nth-of-type(3):hover::after,
    .pole-card:nth-of-type(4):hover::after,
    .pole-card:nth-of-type(7):hover::after {
      border-color: rgba(255, 255, 255, 0.14);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.07),
        0 12px 32px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    }
    .pole-card.pole-center:hover,
    .pole-card:nth-of-type(3):hover,
    .pole-card:nth-of-type(4):hover,
    .pole-card:nth-of-type(7):hover {
      border-color: transparent;
      box-shadow: none;
    }
  }
  .pole-card {
    position: relative;
    background: linear-gradient(180deg, var(--bg-elev-2) 0%, var(--bg-elev-1) 100%);
    border: 1px solid var(--border-default);
    border-radius: 12px;
    padding: 22px;
    transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    --card-color: var(--accent);
    --card-color-rgb: 46, 114, 186;
  }
  .pole-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--card-color-rgb), 0.14), transparent 40%);
    opacity: 0;
    transition: opacity 280ms ease;
    pointer-events: none;
  }
  .pole-card:hover {
    /* Contour gris foncé au hover : contraste léger avec le fond
       des cards, sans saturer la couleur d'expertise. */
    border-color: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
    box-shadow:
      0 12px 32px rgba(0,0,0,0.5),
      0 0 0 1px rgba(255, 255, 255, 0.05);
  }
  .pole-card:hover::before { opacity: 1; }
  .pole-card:hover .pole-card-icon {
    color: var(--card-color);
    border-color: rgba(var(--card-color-rgb), 0.32);
    background: rgba(var(--card-color-rgb), 0.08);
    /* Léger pop 3D animé : l'icône sort de son cadre au hover */
    transform: translateY(-4px) scale(1.07);
    box-shadow:
      0 8px 18px rgba(var(--card-color-rgb), 0.30),
      0 2px 6px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  /* Couleurs propres à chaque pôle (pour le hover uniquement) */
  .pole-card.c-blue   { --card-color: var(--c-blue);   --card-color-rgb: 46, 114, 186; }
  .pole-card.c-red    { --card-color: #ef4858;          --card-color-rgb: 229, 29, 41; }
  .pole-card.c-yellow { --card-color: var(--c-yellow); --card-color-rgb: 249, 214, 5; }
  .pole-card.c-orange { --card-color: var(--c-orange); --card-color-rgb: 243, 148, 29; }
  .pole-card.c-purple { --card-color: #b063ac;          --card-color-rgb: 141, 44, 135; }
  .pole-card.c-green  { --card-color: var(--c-green);  --card-color-rgb: 142, 192, 65; }
  .pole-card.c-beige  { --card-color: #c9b39c;          --card-color-rgb: 167, 141, 117; }

  .pole-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
  }
  .pole-card-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-default);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-primary);
    will-change: transform;
    transition:
      transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 380ms cubic-bezier(0.16, 1, 0.3, 1),
      color 220ms ease,
      border-color 220ms ease,
      background 220ms ease;
  }
  .pole-card-num {
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .pole-card h3 {
    font-size: 16px;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: -0.015em;
  }
  .pole-card p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
  }

  /* Card "CTA" en fin de grille */
  .pole-card.is-cta {
    background: linear-gradient(135deg, rgba(46,114,186,0.10) 0%, var(--bg-elev-1) 60%);
    border-color: rgba(46,114,186,0.28);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .pole-card.is-cta h3 { font-size: 17px; margin-bottom: 10px; }
  .pole-card.is-cta p { margin-bottom: 18px; }


  /* jcd-qw1-poleid : identite couleur du pole AU REPOS (audit 2026-07-22).
     Lisere haut accent + icone teintee ; le hover existant garde son pop. */
  .pole-card { box-shadow: inset 0 2px 0 rgba(var(--card-color-rgb), 0.42); }
  .pole-card:hover {
    box-shadow:
      inset 0 2px 0 rgba(var(--card-color-rgb), 0.60),
      0 12px 32px rgba(0,0,0,0.5),
      0 0 0 1px rgba(255, 255, 255, 0.05);
  }
  .pole-card-icon {
    color: var(--card-color);
    border-color: rgba(var(--card-color-rgb), 0.22);
    background: rgba(var(--card-color-rgb), 0.06);
  }
  .pole-card-icon svg {
    width: 20px;
  }
  /* Cards a mask (desktop) : le lisere vit sur ::after pour suivre le fade. */
  @media (min-width: 1101px) {
    .pole-card.pole-center::after,
    .pole-card:nth-of-type(3)::after,
    .pole-card:nth-of-type(4)::after,
    .pole-card:nth-of-type(7)::after {
      box-shadow: inset 0 2px 0 rgba(var(--card-color-rgb), 0.55);
    }
    /* Hover : le hover generique des cards a mask remplacait tout le
       box-shadow de ::after par un inset blanc, ce qui effacait le lisere
       colore. On rejoue ici le meme hover que les cards sans mask
       (Developpement / Telecom / Formation) : lisere 0.42 -> 0.60. */
    .pole-card.pole-center:hover::after,
    .pole-card:nth-of-type(3):hover::after,
    .pole-card:nth-of-type(4):hover::after,
    .pole-card:nth-of-type(7):hover::after {
      box-shadow:
        inset 0 2px 0 rgba(var(--card-color-rgb), 0.72),
        0 12px 32px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    }
  }

  /* jcd-liseres4 : lisere un cran plus franc sur Informatique / Print /
     Service / Agencement. En desktop (>=1101px) ces 4 cards passent par
     le bloc ::after ci-dessus ; en dessous, elles retombent sur le
     lisere de base, d'ou cet override cible. Developpement / Telecom /
     Formation restent a 0.42. */
  @media (max-width: 1100px) {
    .pole-card.c-blue,
    .pole-card.c-orange,
    .pole-card.c-red,
    .pole-card.c-beige {
      box-shadow: inset 0 2px 0 rgba(var(--card-color-rgb), 0.55);
    }
    .pole-card.c-blue:hover,
    .pole-card.c-orange:hover,
    .pole-card.c-red:hover,
    .pole-card.c-beige:hover {
      box-shadow:
        inset 0 2px 0 rgba(var(--card-color-rgb), 0.72),
        0 12px 32px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    }
  }

  /* ================================
     VALEURS
     ================================ */
  .valeurs {
    position: relative;
    padding: 90px 0 120px;
    background: var(--bg);
    /* Fine ligne de démarcation gauche → droite, qui s'estompe
       progressivement pour laisser place au glow lunaire à droite. */
    border-top: 1px solid transparent;
    border-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.075) 28%,
      rgba(255, 255, 255, 0.035) 55%,
      rgba(255, 255, 255, 0.012) 75%,
      rgba(255, 255, 255, 0) 92%
    ) 1;
  }
  .valeurs > .container {
    position: relative;
    z-index: 1;
  }
  .valeurs-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    /* Perspective pour activer le tilt 3D sur les cards enfants */
    perspective: 1100px;
    padding: 60px 0 12px;
    /* Stretch : toutes les cards ont exactement la même hauteur. */
    align-items: stretch;
  }
  /* Halo projeté ultra-smooth lié au wrapper de la table of
     engagements : prend racine au bord gauche / droit de la zone de
     lecture, irradie vers le BG. Pas de filter blur (évite la
     pixellisation) — la finesse vient d'un radial-gradient à 13
     stops d'opacité ultra-progressive. */
  .valeurs-toc::before,
  .valeurs-toc::after {
    content: "";
    position: absolute;
    /* Étendu au-delà de la zone des cards pour laisser place au
       fade des coins top/bottom — le mask vertical taillera la
       forme finale en ellipse douce. Hauteur réduite de 8px (4 en
       haut + 4 en bas) pour éviter d'empiéter sur les éléments du
       bleed BG. */
    top: 49px;
    bottom: -8px;
    width: 240px;
    pointer-events: none;
    z-index: -1;
    /* Mask vertical : fade smooth aux bords top et bottom pour que
       le halo s'efface en ellipse organique (plus aucune coupe nette
       aux corners). Combiné au radial bg, le halo devient un ovale
       parfait dans toutes les directions. */
    -webkit-mask-image: linear-gradient(180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.10) 6%,
      rgba(0, 0, 0, 0.32) 13%,
      rgba(0, 0, 0, 0.58) 22%,
      rgba(0, 0, 0, 0.82) 32%,
      rgba(0, 0, 0, 0.94) 42%,
      rgba(0, 0, 0, 0.94) 58%,
      rgba(0, 0, 0, 0.82) 68%,
      rgba(0, 0, 0, 0.58) 78%,
      rgba(0, 0, 0, 0.32) 87%,
      rgba(0, 0, 0, 0.10) 94%,
      transparent 100%);
    mask-image: linear-gradient(180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.10) 6%,
      rgba(0, 0, 0, 0.32) 13%,
      rgba(0, 0, 0, 0.58) 22%,
      rgba(0, 0, 0, 0.82) 32%,
      rgba(0, 0, 0, 0.94) 42%,
      rgba(0, 0, 0, 0.94) 58%,
      rgba(0, 0, 0, 0.82) 68%,
      rgba(0, 0, 0, 0.58) 78%,
      rgba(0, 0, 0, 0.32) 87%,
      rgba(0, 0, 0, 0.10) 94%,
      transparent 100%);
  }
  .valeurs-toc::before {
    /* Halo gauche : centre radial au bord droit du pseudo (= bord
       gauche de la TOC), point lumineux au tiers haut. */
    left: -240px;
    background: radial-gradient(ellipse 100% 75% at 100% 32%,
      rgba(255, 255, 255, 0.105) 0%,
      rgba(255, 255, 255, 0.090) 6%,
      rgba(255, 255, 255, 0.074) 13%,
      rgba(255, 255, 255, 0.060) 20%,
      rgba(255, 255, 255, 0.048) 28%,
      rgba(255, 255, 255, 0.036) 36%,
      rgba(255, 255, 255, 0.026) 45%,
      rgba(255, 255, 255, 0.018) 54%,
      rgba(255, 255, 255, 0.012) 63%,
      rgba(255, 255, 255, 0.007) 72%,
      rgba(255, 255, 255, 0.004) 82%,
      rgba(255, 255, 255, 0.0015) 92%,
      transparent 100%);
  }
  .valeurs-toc::after {
    /* Halo droit : miroir. */
    right: -240px;
    background: radial-gradient(ellipse 100% 75% at 0% 32%,
      rgba(255, 255, 255, 0.105) 0%,
      rgba(255, 255, 255, 0.090) 6%,
      rgba(255, 255, 255, 0.074) 13%,
      rgba(255, 255, 255, 0.060) 20%,
      rgba(255, 255, 255, 0.048) 28%,
      rgba(255, 255, 255, 0.036) 36%,
      rgba(255, 255, 255, 0.026) 45%,
      rgba(255, 255, 255, 0.018) 54%,
      rgba(255, 255, 255, 0.012) 63%,
      rgba(255, 255, 255, 0.007) 72%,
      rgba(255, 255, 255, 0.004) 82%,
      rgba(255, 255, 255, 0.0015) 92%,
      transparent 100%);
  }
  /* Forme en escalier ascendant : Efficacité > Réactivité > Souplesse.
     On utilise `top` (et non transform) pour ne pas entrer en conflit
     avec le tilt 3D appliqué au mousemove côté JS. */
  @media (min-width: 901px) {
    .valeurs-grid > .valeur { position: relative; top: 0; }
  }

  /* Ombres au hover : les cards non-survolées passent au-dessus pour
  /* ================================================================
     VALEURS — Background : mocks UI helpdesk + monitoring (full bleed)
     · Très basse opacité (~8%), vignette radiale qui fond aux bords
     · Inspiration Linear / Vercel : panels sombres, hairline borders
     · Évoque les pôles Service & Informatique de JCD
     ================================================================ */
  .valeurs { overflow: hidden; }
  .vl-bg {
    position: absolute;
    /* Le BG occupe la moitié supérieure de la section : de top:0
       jusqu'à la border-top des cards. La hauteur (--vl-bg-top) est
       calée dynamiquement en JS. Fallback : 280px si JS indispo. */
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: var(--vl-bg-top, 280px);
    z-index: 0;
    pointer-events: none;
    user-select: none;
    opacity: 0.23;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    padding: 28px max(4vw, 36px) 4px;
    /* Mask composé : ellipse vignette globale (fond aux bords) ∩
       deux ellipses miroirs en diagonale (haut-gauche & bas-droit)
       qui éteignent le BG sur ces deux quarts pour faire respirer
       le bloc texte H2 et équilibrer visuellement la composition. */
    -webkit-mask-image:
      radial-gradient(ellipse 80% 90% at center,
        #000 32%,
        rgba(0, 0, 0, 0.87) 55%,
        rgba(0, 0, 0, 0.49) 78%,
        rgba(0, 0, 0, 0.25) 92%,
        rgba(0, 0, 0, 0.15) 100%),
      radial-gradient(ellipse 135% 150% at top left,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.072) 14%,
        rgba(0, 0, 0, 0.159) 28%,
        rgba(0, 0, 0, 0.303) 42%,
        rgba(0, 0, 0, 0.448) 56%,
        rgba(0, 0, 0, 0.578) 68%,
        rgba(0, 0, 0, 0.663) 80%,
        rgba(0, 0, 0, 0.706) 90%,
        #000 99%),
      radial-gradient(ellipse 80% 90% at bottom right,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.15) 24%,
        rgba(0, 0, 0, 0.22) 34%,
        rgba(0, 0, 0, 0.40) 46%,
        rgba(0, 0, 0, 0.64) 58%,
        rgba(0, 0, 0, 0.85) 70%,
        rgba(0, 0, 0, 0.96) 84%,
        #000 94%),
      radial-gradient(ellipse 65% 75% at top right,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.15) 38%,
        rgba(0, 0, 0, 0.30) 55%,
        rgba(0, 0, 0, 0.53) 70%,
        rgba(0, 0, 0, 0.81) 85%,
        #000 98%);
    mask-image:
      radial-gradient(ellipse 80% 90% at center,
        #000 32%,
        rgba(0, 0, 0, 0.87) 55%,
        rgba(0, 0, 0, 0.49) 78%,
        rgba(0, 0, 0, 0.25) 92%,
        rgba(0, 0, 0, 0.15) 100%),
      radial-gradient(ellipse 135% 150% at top left,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.072) 14%,
        rgba(0, 0, 0, 0.159) 28%,
        rgba(0, 0, 0, 0.303) 42%,
        rgba(0, 0, 0, 0.448) 56%,
        rgba(0, 0, 0, 0.578) 68%,
        rgba(0, 0, 0, 0.663) 80%,
        rgba(0, 0, 0, 0.706) 90%,
        #000 99%),
      radial-gradient(ellipse 80% 90% at bottom right,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.15) 24%,
        rgba(0, 0, 0, 0.22) 34%,
        rgba(0, 0, 0, 0.40) 46%,
        rgba(0, 0, 0, 0.64) 58%,
        rgba(0, 0, 0, 0.85) 70%,
        rgba(0, 0, 0, 0.96) 84%,
        #000 94%),
      radial-gradient(ellipse 65% 75% at top right,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.15) 38%,
        rgba(0, 0, 0, 0.30) 55%,
        rgba(0, 0, 0, 0.53) 70%,
        rgba(0, 0, 0, 0.81) 85%,
        #000 98%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .vl-bg-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 28px;
    flex: 0 0 auto;
  }
  .vl-bg-row.bottom { gap: 22px; }
  .vl-panel {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.95) 0%, rgba(10, 10, 10, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 12px 40px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    font-family: var(--font);
  }
  .vl-helpdesk {
    flex: 1 1 0;
    max-width: 520px;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }
  .vl-monitor {
    flex: 1 1 0;
    max-width: 580px;
    min-width: 0;
  }
  .vl-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
    letter-spacing: -0.005em;
  }
  .vl-panel-head .vl-icon-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .vl-panel-head .vl-spacer { flex: 1; }
  .vl-panel-head .vl-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(142, 192, 65, 0.20);
    color: #aed985;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  /* HELPDESK : liste de tickets — flex 1 + space-between pour
     conserver le positionnement haut/bas des tickets restants
     comme s'ils faisaient encore partie d'une liste plus longue. */
  .vl-ticket-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
  }
  .vl-ticket {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.82);
  }
  .vl-ticket:last-child { border-bottom: 0; }
  .vl-ticket-id {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
  }
  .vl-ticket-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }
  .vl-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .vl-tag-red    { background: rgba(239, 72, 88, 0.20);  color: #f0a4ad; }
  .vl-tag-orange { background: rgba(243, 148, 29, 0.20); color: #f3c182; }
  .vl-tag-blue   { background: rgba(46, 114, 186, 0.22); color: #a8c8eb; }
  .vl-tag-green  { background: rgba(142, 192, 65, 0.20); color: #c0dd9a; }
  .vl-status {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .vl-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
  }
  .vl-st-prog::before    { background: #F3941D; box-shadow: 0 0 8px rgba(243, 148, 29, 0.6); }
  .vl-st-open::before    { background: #ef4858; box-shadow: 0 0 8px rgba(239, 72, 88, 0.6); }
  .vl-st-resolved::before{ background: #8EC041; box-shadow: 0 0 8px rgba(142, 192, 65, 0.6); }
  .vl-st-pending::before { background: rgba(255, 255, 255, 0.45); }
  /* MONITORING : grid de tiles + chart */
  .vl-monitor-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 16px; }
  .vl-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .vl-tile {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .vl-tile-label {
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .vl-tile-value {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .vl-tile-trend {
    font-size: 10px;
    color: #c0dd9a;
    font-weight: 600;
  }
  .vl-tile-trend.down { color: #f0a4ad; }
  .vl-chart {
    height: 110px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .vl-chart-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .vl-chart svg { display: block; width: 100%; height: 60px; }
  /* BOTTOM ROW : panel large activité + sparklines status. */
  .vl-activity {
    flex: 2 1 0;
    max-width: 760px;
    min-width: 0;
    padding: 14px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .vl-activity-head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .vl-activity-head .vl-spacer { flex: 1; }
  .vl-activity-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
  }
  .vl-activity-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .vl-activity-legend span::before {
    content: "";
    width: 8px;
    height: 2px;
    border-radius: 2px;
    background: var(--ll, #aed985);
  }
  .vl-activity-canvas {
    position: relative;
    height: 130px;
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px 12px;
  }
  .vl-activity-canvas svg { display: block; width: 100%; height: 100%; }
  .vl-status-grid {
    flex: 1 1 0;
    max-width: 320px;
    min-width: 0;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .vl-status-grid .vl-panel-head { padding: 0 0 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); background: transparent; margin-bottom: 6px; }
  .vl-svc {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.82);
  }
  .vl-svc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8EC041;
    box-shadow: 0 0 8px rgba(142, 192, 65, 0.55);
  }
  .vl-svc-dot.warn { background: #F3941D; box-shadow: 0 0 8px rgba(243, 148, 29, 0.55); }
  .vl-svc-dot.crit { background: #ef4858; box-shadow: 0 0 8px rgba(239, 72, 88, 0.55); }
  .vl-svc-name { font-weight: 500; letter-spacing: -0.005em; }
  .vl-svc-val {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
  }
  /* Mobile : on cache les mocks pour ne pas surcharger. */
  @media (max-width: 900px) {
    .vl-bg { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .vl-bg { transition: none; }
  }
  .valeurs-grid > .valeur {
    position: relative;
    z-index: 1;
  }
  .valeurs-grid > .valeur:hover {
    z-index: 0;
  }
  /* Cards "Valeurs" : style fenêtre macOS dark, monochrome.
     · Title bar avec 3 traffic-lights (tons gris uniformes)
     · Aucune bordure : la card se fond dans le BG via mask radial
     · Effet 3D léger via box-shadow doux + gradient highlight top
     · Toutes les cards ont la même hauteur (align-items: stretch). */
  .valeur {
    position: relative;
    padding: 60px 30px 30px;
    background: transparent;
    border: 0;
    border-radius: 14px;
    transform-style: preserve-3d;
    isolation: isolate;
    transition:
      transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
      filter 380ms ease,
      --vlr-spot 380ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  .valeur:hover { --vlr-spot: 1; }
  /* Couche visuelle : gradient de luminance descendant (lumière du
     haut), ombre projetée prononcée pour effet 3D, et mask qui fond
     les bords inférieurs gauche / droit dans le BG. */
  .valeur::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    /* Couches background : spotlight blanc cassé qui suit le curseur
       (var --vlr-mx / --vlr-my, opacité contrôlée par --vlr-spot)
       superposé sur le gradient de luminance descendant. Le spotlight
       partage le mask de la card → quand la card se fond dans le BG
       (bords inférieurs), le spotlight est lui aussi masqué et ne
       révèle pas les contours fantômes. */
    background:
      radial-gradient(circle 180px at var(--vlr-mx, 50%) var(--vlr-my, 50%),
        rgba(250, 246, 235, calc(0.085 * var(--vlr-spot, 0))) 0%,
        rgba(250, 246, 235, calc(0.040 * var(--vlr-spot, 0))) 38%,
        rgba(250, 246, 235, calc(0.014 * var(--vlr-spot, 0))) 62%,
        transparent 78%),
      /* Luminance verticale légèrement atténuée : tons du haut
         abaissés (~6 RGB) et alpha réduit (~-0.06) pour un rendu
         plus tactile et moins lumineux, qui laisse respirer les
         glows latéraux du bg et accentue la "matière" sombre. */
      linear-gradient(180deg,
        rgba(42, 42, 42, 0.86) 0%,
        rgba(38, 38, 38, 0.83) 9%,
        rgba(34, 34, 34, 0.79) 18%,
        rgba(30, 30, 30, 0.74) 28%,
        rgba(26, 26, 26, 0.67) 38%,
        rgba(22, 22, 22, 0.59) 48%,
        rgba(16, 16, 16, 0.50) 58%,
        rgba(15, 15, 15, 0.40) 68%,
        rgba(12, 12, 12, 0.31) 78%,
        rgba(10, 10, 10, 0.22) 87%,
        rgba(9, 9, 9, 0.15) 95%,
        rgba(8, 8, 8, 0.10) 100%);
    box-shadow:
      /* Rim-light top : highlight bord supérieur (légèrement boosté
         pour que la card "lève" davantage hors du bg). */
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 2px 0 rgba(255, 255, 255, 0.05),
      /* Bord bottom subtil : ligne d'ombre interne 1px qui scelle
         la card et renforce l'illusion de "matière épaisse". */
      inset 0 -1px 0 rgba(0, 0, 0, 0.55),
      inset 0 -8px 14px -8px rgba(0, 0, 0, 0.42),
      /* Glow doux interne sous le bord top */
      inset 0 14px 24px -12px rgba(255, 255, 255, 0.06),
      /* Ombres projetées multi-couches : les ombres sont décalées
         strictement vers le BAS (offset y positif) pour ne pas
         empiéter latéralement sur les glows du bg-grid (à gauche
         d'Efficacité, à droite de Souplesse). 4 strates de blur
         pour un fondu premium ultra-progressif. */
      0 38px 80px rgba(0, 0, 0, 0.70),
      0 18px 40px rgba(0, 0, 0, 0.50),
      0 8px 18px rgba(0, 0, 0, 0.38),
      0 2px 6px rgba(0, 0, 0, 0.22),
      /* Halo doux supérieur (émanation 3D, opacité minime pour
         éviter tout conflit avec les glows latéraux). */
      0 -6px 18px rgba(255, 255, 255, 0.02);
    /* Mask : la card est nette en haut et au centre, et se fond dans
       le BG sur les coins bottom-left et bottom-right. Composé avec
       un gradient ellipse top + soustractions radiales aux 2 coins
       inférieurs. */
    -webkit-mask-image:
      radial-gradient(ellipse 140% 140% at 50% 22%,
        #000 48%,
        rgba(0, 0, 0, 0.985) 56%,
        rgba(0, 0, 0, 0.95) 64%,
        rgba(0, 0, 0, 0.88) 71%,
        rgba(0, 0, 0, 0.78) 78%,
        rgba(0, 0, 0, 0.65) 84%,
        rgba(0, 0, 0, 0.50) 89%,
        rgba(0, 0, 0, 0.34) 93%,
        rgba(0, 0, 0, 0.20) 97%,
        rgba(0, 0, 0, 0.10) 100%),
      radial-gradient(ellipse 70% 60% at 0% 110%,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 10%,
        rgba(0, 0, 0, 0.20) 20%,
        rgba(0, 0, 0, 0.36) 30%,
        rgba(0, 0, 0, 0.55) 42%,
        rgba(0, 0, 0, 0.72) 54%,
        rgba(0, 0, 0, 0.86) 67%,
        rgba(0, 0, 0, 0.95) 78%,
        #000 90%),
      radial-gradient(ellipse 70% 60% at 100% 110%,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 10%,
        rgba(0, 0, 0, 0.20) 20%,
        rgba(0, 0, 0, 0.36) 30%,
        rgba(0, 0, 0, 0.55) 42%,
        rgba(0, 0, 0, 0.72) 54%,
        rgba(0, 0, 0, 0.86) 67%,
        rgba(0, 0, 0, 0.95) 78%,
        #000 90%);
    mask-image:
      radial-gradient(ellipse 140% 140% at 50% 22%,
        #000 48%,
        rgba(0, 0, 0, 0.985) 56%,
        rgba(0, 0, 0, 0.95) 64%,
        rgba(0, 0, 0, 0.88) 71%,
        rgba(0, 0, 0, 0.78) 78%,
        rgba(0, 0, 0, 0.65) 84%,
        rgba(0, 0, 0, 0.50) 89%,
        rgba(0, 0, 0, 0.34) 93%,
        rgba(0, 0, 0, 0.20) 97%,
        rgba(0, 0, 0, 0.10) 100%),
      radial-gradient(ellipse 70% 60% at 0% 110%,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 10%,
        rgba(0, 0, 0, 0.20) 20%,
        rgba(0, 0, 0, 0.36) 30%,
        rgba(0, 0, 0, 0.55) 42%,
        rgba(0, 0, 0, 0.72) 54%,
        rgba(0, 0, 0, 0.86) 67%,
        rgba(0, 0, 0, 0.95) 78%,
        #000 90%),
      radial-gradient(ellipse 70% 60% at 100% 110%,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 10%,
        rgba(0, 0, 0, 0.20) 20%,
        rgba(0, 0, 0, 0.36) 30%,
        rgba(0, 0, 0, 0.55) 42%,
        rgba(0, 0, 0, 0.72) 54%,
        rgba(0, 0, 0, 0.86) 67%,
        rgba(0, 0, 0, 0.95) 78%,
        #000 90%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-backdrop-filter: blur(18px) saturate(135%);
            backdrop-filter: blur(18px) saturate(135%);
    pointer-events: none;
    z-index: -1;
    transition: opacity 380ms ease, box-shadow 380ms ease;
  }
  /* ============================================================
     TRIPTYQUE D'INSTRUMENTS — chaque card incarne sa valeur via
     un module extrait du dashboard du BG (helpdesk / monitoring /
     status). Le langage visuel échoit DIRECTEMENT à celui des
     panels du `.vl-bg` (label uppercase mono, métrique 18-22px,
     instrument graphique). Continuité totale BG ↔ cards.
     ============================================================ */
  .valeur {
    /* Réduction du padding-top : place pour l'instrument-header.
       Layout interne : flex column pour pousser le titre/texte en bas. */
    padding: 22px 26px 28px;
    display: flex;
    flex-direction: column;
  }
  /* Conteneur de l'instrument (label + métrique + graphique).
     C'est la partie "data" de la card — elle vit en haut et doit
     respirer le dashboard. */
  .valeur-instrument {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 18px;
  }
  /* Header instrument : label uppercase mono à gauche, trend à droite.
     Reprend exactement le style des `.vl-tile-label` du BG. */
  .vi-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 14px;
  }
  .vi-label {
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.48);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    flex: 1;
  }
  .vi-trend {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #c0dd9a;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    white-space: nowrap;
  }
  .vi-trend.is-blue { color: #a8c8eb; }
  .vi-trend.is-warm { color: #f3c182; }
  .vi-trend.is-mute {
    color: rgba(255, 255, 255, 0.55);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .vi-trend.is-mute::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8EC041;
    box-shadow: 0 0 8px rgba(142, 192, 65, 0.55);
  }
  /* Métrique géante : c'est le chiffre qui parle. Reprend le poids
     visuel des `.vl-tile-value` mais en plus grand (24-28px). */
  .vi-metric {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font);
    color: rgba(255, 255, 255, 0.96);
    line-height: 1;
    letter-spacing: -0.035em;
    font-feature-settings: "tnum" 1, "lnum" 1;
  }
  .vi-value {
    font-size: 30px;
    font-weight: 600;
    /* Léger text-shadow pour profondeur tactile, comme le h3 */
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.04),
      0 2px 6px rgba(0, 0, 0, 0.5);
  }
  .vi-unit {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    letter-spacing: -0.005em;
  }
  /* Graphique de l'instrument : zone fixe ~46px de haut, full width.
     Chaque variante override son propre rendu. */
  .vi-graphic {
    position: relative;
    height: 46px;
    margin-top: 2px;
  }
  /* Séparateur subtil entre l'instrument et le bloc texte —
     hairline gradient qui s'efface aux extrémités. PAS un border :
     un mask gradient. */
  .vi-divider {
    position: relative;
    z-index: 2;
    height: 1px;
    margin: 0 -2px 18px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.02) 12%,
      rgba(255, 255, 255, 0.09) 50%,
      rgba(255, 255, 255, 0.02) 88%,
      transparent 100%);
  }
  /* Bloc texte (h3 + p) sous le séparateur */
  .valeur > h3,
  .valeur > p {
    position: relative;
    z-index: 2;
  }

  /* ------------------------------------------------------------
     INSTRUMENT 1 — EFFICACITÉ : Gauge / Burndown
     Une jauge horizontale qui se remplit à 96.4 %, vert JCD,
     évoque la livraison maîtrisée et le SLA tenu.
     ------------------------------------------------------------ */
  .vi-graphic--gauge {
    height: 46px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    padding-bottom: 4px;
  }
  .vi-gauge-track {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background:
      linear-gradient(90deg,
        rgba(255, 255, 255, 0.025) 0%,
        rgba(255, 255, 255, 0.055) 50%,
        rgba(255, 255, 255, 0.025) 100%);
    box-shadow:
      inset 0 1px 2px rgba(0, 0, 0, 0.55),
      inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  }
  .vi-gauge-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 96.4%;
    border-radius: 4px;
    background: linear-gradient(90deg,
      rgba(142, 192, 65, 0.45) 0%,
      rgba(174, 217, 133, 0.95) 55%,
      rgba(192, 221, 154, 1) 100%);
    box-shadow:
      0 0 16px rgba(142, 192, 65, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.30),
      inset 0 -1px 0 rgba(0, 0, 0, 0.22);
  }
  /* Marker à la fin de la jauge : un petit ovale lumineux qui
     ancre la lecture du chiffre 96.4. Position calée sur la fin
     du fill (= 96.4% du track). */
  .vi-gauge-fill::after {
    content: "";
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(220, 240, 195, 1);
    box-shadow:
      0 0 10px rgba(174, 217, 133, 0.85),
      0 0 4px rgba(255, 255, 255, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }
  /* Tick marks fins à 25/50/75% — repères de jauge.
     Placement absolu pour un contrôle précis des positions. */
  .vi-gauge-ticks {
    position: relative;
    height: 4px;
    pointer-events: none;
  }
  .vi-gauge-ticks > span {
    position: absolute;
    top: 0;
    width: 1px;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
  }
  .vi-gauge-ticks > span:nth-child(1) { left: 25%; }
  .vi-gauge-ticks > span:nth-child(2) { left: 50%; }
  .vi-gauge-ticks > span:nth-child(3) { left: 75%; }
  /* Tick à 96.4% : marqueur du SLA atteint, vert subtil */
  .vi-gauge-ticks::after {
    content: "";
    position: absolute;
    top: 0;
    left: 96.4%;
    width: 1px;
    height: 4px;
    background: rgba(174, 217, 133, 0.55);
    box-shadow: 0 0 4px rgba(142, 192, 65, 0.55);
  }

  /* ------------------------------------------------------------
     INSTRUMENT 2 — RÉACTIVITÉ : ECG / Pulse
     Une ligne de signal vital avec un pulse glow qui voyage le
     long du tracé (boucle 4.5 s). Bleu JCD.
     ------------------------------------------------------------ */
  .vi-graphic--pulse svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .vi-pulse-line {
    stroke: rgba(168, 200, 235, 0.35);
    stroke-width: 1.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .vi-pulse-trail {
    stroke: url(#vi-pulse-grad);
    stroke-width: 1.6;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* pathLength=220 (sur le path) remappe la longueur. Dash 36 +
       gap 220 = cycle de 256 unités. L'offset balaye -36 → -256
       → dash glisse de l'extrême gauche jusqu'au-delà de l'extrême
       droite, puis reset (cycle infini fluide). */
    stroke-dasharray: 36 220;
    stroke-dashoffset: -36;
    filter: drop-shadow(0 0 5px rgba(46, 114, 186, 0.7));
    animation: vi-pulse-travel 4.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  @keyframes vi-pulse-travel {
    0%   { stroke-dashoffset:  -36; }
    100% { stroke-dashoffset: -256; }
  }
  /* Petit dot lumineux en bout de pulse — blink quand le pulse
     atteint l'extrémité droite (~85-95% du cycle). */
  .vi-pulse-dot {
    transform-origin: center;
    animation: vi-pulse-blink 4.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes vi-pulse-blink {
    0%, 78%   { opacity: 0; transform: scale(0.5); }
    86%, 92%  { opacity: 1; transform: scale(1); }
    100%      { opacity: 0; transform: scale(0.5); }
  }
  @media (prefers-reduced-motion: reduce) {
    .vi-pulse-trail { animation: none; stroke-dashoffset: 0; }
    .vi-pulse-dot { animation: none; opacity: 0.85; }
  }

  /* ------------------------------------------------------------
     INSTRUMENT 3 — SOUPLESSE : Mesh / Topologie
     Hub central + 4 satellites. Les liaisons "respirent" en
     opacity (loop décalé par node) → sensation d'orchestration
     dynamique. Les nodes pulsent doucement, à des phases différentes.
     ------------------------------------------------------------ */
  .vi-graphic--mesh svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .vi-mesh-link {
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 0.8;
    fill: none;
    stroke-linecap: round;
    animation: vi-mesh-link-breathe 4.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .vi-mesh-link.l2 { animation-delay: -1.0s; }
  .vi-mesh-link.l3 { animation-delay: -2.1s; animation-duration: 5.0s; }
  .vi-mesh-link.l4 { animation-delay: -3.0s; animation-duration: 4.6s; }
  @keyframes vi-mesh-link-breathe {
    0%, 100% { stroke: rgba(255, 255, 255, 0.10); }
    50%      { stroke: rgba(243, 148, 29, 0.55); }
  }
  .vi-mesh-node {
    fill: rgba(255, 255, 255, 0.55);
    animation: vi-mesh-node-pulse 4.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .vi-mesh-node.n2 { animation-delay: -0.7s; }
  .vi-mesh-node.n3 { animation-delay: -1.5s; }
  .vi-mesh-node.n4 { animation-delay: -2.4s; }
  .vi-mesh-node.n5 { animation-delay: -3.2s; }
  @keyframes vi-mesh-node-pulse {
    0%, 100% { fill: rgba(255, 255, 255, 0.40); r: 1.4; }
    50%      { fill: rgba(255, 255, 255, 0.95); r: 1.8; }
  }
  /* Hub central : toujours plus présent, glow orange JCD permanent */
  .vi-mesh-hub {
    fill: #f3c182;
    filter: drop-shadow(0 0 4px rgba(243, 148, 29, 0.65));
    animation: vi-mesh-hub-glow 3.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes vi-mesh-hub-glow {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(243, 148, 29, 0.50)); }
    50%      { filter: drop-shadow(0 0 7px rgba(243, 148, 29, 0.85)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .vi-mesh-link, .vi-mesh-node, .vi-mesh-hub { animation: none; }
  }

  /* ------------------------------------------------------------
     UNDERGLOW TEINTÉ par card — c'est l'élément qui réinjecte la
     palette du BG dans chaque card sans ajouter de border. Halo
     ovale subtil sous la card, projeté dans la zone bottom du BG.
     Override des halos blancs latéraux génériques pour les cards
     extrêmes (gauche/droite déjà couverts par .valeurs-grid
     pseudos), ici on AJOUTE un halo bottom dédié par card.
     ------------------------------------------------------------ */
  .valeur::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -28px;
    height: 90px;
    z-index: -2;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(22px);
    opacity: 0.85;
    transition: opacity 600ms ease;
  }
  .valeur--gauge::before {
    background: radial-gradient(ellipse 80% 100% at center,
      rgba(142, 192, 65, 0.28) 0%,
      rgba(142, 192, 65, 0.12) 38%,
      rgba(142, 192, 65, 0.04) 64%,
      transparent 88%);
  }
  .valeur--pulse::before {
    background: radial-gradient(ellipse 80% 100% at center,
      rgba(46, 114, 186, 0.32) 0%,
      rgba(46, 114, 186, 0.14) 38%,
      rgba(46, 114, 186, 0.04) 64%,
      transparent 88%);
  }
  .valeur--mesh::before {
    background: radial-gradient(ellipse 80% 100% at center,
      rgba(243, 148, 29, 0.26) 0%,
      rgba(243, 148, 29, 0.11) 38%,
      rgba(243, 148, 29, 0.035) 64%,
      transparent 88%);
  }
  .valeur:hover::before { opacity: 1; }

  /* ------------------------------------------------------------
     TEINTE CHROMATIQUE LATÉRALE sur chaque card — un soupçon de
     couleur sur le rim light supérieur via une couche additive
     posée sur le `.valeur::after` (qui porte déjà le rim blanc).
     Évite tout border : c'est la matière elle-même qui se teinte.
     Empilée comme box-shadow inset rim au top.
     ------------------------------------------------------------ */
  .valeur--gauge::after {
    box-shadow:
      inset 0 1px 0 rgba(174, 217, 133, 0.16),
      inset 0 2px 0 rgba(174, 217, 133, 0.04),
      inset 0 -1px 0 rgba(0, 0, 0, 0.55),
      inset 0 -8px 14px -8px rgba(0, 0, 0, 0.42),
      inset 0 14px 24px -12px rgba(174, 217, 133, 0.05),
      0 38px 80px rgba(0, 0, 0, 0.70),
      0 18px 40px rgba(0, 0, 0, 0.50),
      0 8px 18px rgba(0, 0, 0, 0.38),
      0 2px 6px rgba(0, 0, 0, 0.22),
      0 -6px 18px rgba(174, 217, 133, 0.02);
  }
  .valeur--pulse::after {
    box-shadow:
      inset 0 1px 0 rgba(168, 200, 235, 0.18),
      inset 0 2px 0 rgba(168, 200, 235, 0.04),
      inset 0 -1px 0 rgba(0, 0, 0, 0.55),
      inset 0 -8px 14px -8px rgba(0, 0, 0, 0.42),
      inset 0 14px 24px -12px rgba(168, 200, 235, 0.05),
      0 38px 80px rgba(0, 0, 0, 0.70),
      0 18px 40px rgba(0, 0, 0, 0.50),
      0 8px 18px rgba(0, 0, 0, 0.38),
      0 2px 6px rgba(0, 0, 0, 0.22),
      0 -6px 18px rgba(168, 200, 235, 0.02);
  }
  .valeur--mesh::after {
    box-shadow:
      inset 0 1px 0 rgba(243, 193, 130, 0.16),
      inset 0 2px 0 rgba(243, 193, 130, 0.04),
      inset 0 -1px 0 rgba(0, 0, 0, 0.55),
      inset 0 -8px 14px -8px rgba(0, 0, 0, 0.42),
      inset 0 14px 24px -12px rgba(243, 193, 130, 0.05),
      0 38px 80px rgba(0, 0, 0, 0.70),
      0 18px 40px rgba(0, 0, 0, 0.50),
      0 8px 18px rgba(0, 0, 0, 0.38),
      0 2px 6px rgba(0, 0, 0, 0.22),
      0 -6px 18px rgba(243, 193, 130, 0.02);
  }

  /* ================================================================
     VALEURS — TABLE OF ENGAGEMENTS (refonte v2)
     Sommaire de doctrine : header / III rows / footer, encadrés par
     4 corner brackets. Pas de cards. Hover ultra smooth — wash
     horizontal monochrome + trail line qui se remplit, sans translate
     ni scale. Continuité totale avec le reste de la page (mêmes
     hairlines à fade, même cubic-bezier, même monochrome).
     ================================================================ */
  .valeurs-toc {
    position: relative;
    padding: 60px 28px 24px;
    margin-top: 16px;
    /* Ambient gradient vertical + rim light top : éclaire
       subtilement le haut de la table, fond plus calme vers le
       bas (qui se fond dans le BG via le mask). */
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.024) 0%,
      rgba(255, 255, 255, 0.014) 22%,
      rgba(255, 255, 255, 0.006) 50%,
      rgba(255, 255, 255, 0.002) 78%,
      rgba(255, 255, 255, 0) 100%);
    /* Rim light intérieur top : trait lumineux 1px à peine visible,
       et un soft falloff lumineux qui descend dans la zone head. */
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      inset 0 28px 56px -28px rgba(255, 255, 255, 0.025);
    /* Isolation pour le z-index du SVG réseau. */
    isolation: isolate;
    /* Overflow visible : le SVG .toc-net déborde latéralement
       (émane sur les côtés) et au-dessus pour ancrer la section.
       Le mask vertical fade le bottom dans le BG sombre. */
    overflow: visible;
    /* Mask vertical : fade smooth du bottom vers le BG sombre.
       Le footer (signature) se fond progressivement, sans coupe.
       Le mask vertical contient aussi le débordement bas du SVG. */
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%,
      #000 76%,
      rgba(0, 0, 0, 0.78) 86%,
      rgba(0, 0, 0, 0.42) 94%,
      transparent 100%);
            mask-image: linear-gradient(180deg,
      #000 0%,
      #000 76%,
      rgba(0, 0, 0, 0.78) 86%,
      rgba(0, 0, 0, 0.42) 94%,
      transparent 100%);
  }

  /* --- Background réseau : SVG qui déborde latéralement du conteneur
     pour ancrer la section avec spectacle. Inset négatif sides + top.
     Grid technique 96px + 12 nodes aux intersections, fade radial
     centré sur la TOC. Les nodes respirent en opacité (pulse ultra
     subtil, 6-8s, phases décalées). Z-index négatif → derrière tout. --- */
  .toc-net {
    position: absolute;
    /* Bleed latéral fort (-200px chaque côté), top -80px pour
       laisser la grille émaner au-dessus du conteneur ; bottom
       reste à 0 (le mask vertical du conteneur prend la suite). */
    inset: -80px -200px 0 -200px;
    width: auto;
    height: auto;
    z-index: -1;
    pointer-events: none;
    user-select: none;
    /* opacity globale : tient le motif sous le seuil de perturbation. */
    opacity: 0.95;
  }
  .toc-net-nodes circle {
    fill: rgba(255, 255, 255, 0.42);
    transform-origin: center;
    animation: toc-net-pulse 7s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    will-change: opacity;
  }
  /* Phases décalées + durations variées → respiration organique,
     jamais synchrone. 12 nodes, chacun son rythme. */
  .toc-net-nodes circle:nth-child(1)  { animation-delay:  0s;    animation-duration: 7.0s; }
  .toc-net-nodes circle:nth-child(2)  { animation-delay: -1.4s;  animation-duration: 7.5s; }
  .toc-net-nodes circle:nth-child(3)  { animation-delay: -2.8s;  animation-duration: 6.6s; }
  .toc-net-nodes circle:nth-child(4)  { animation-delay: -0.7s;  animation-duration: 8.0s; }
  .toc-net-nodes circle:nth-child(5)  { animation-delay: -3.5s;  animation-duration: 6.8s; }
  .toc-net-nodes circle:nth-child(6)  { animation-delay: -5.2s;  animation-duration: 7.2s; }
  .toc-net-nodes circle:nth-child(7)  { animation-delay: -2.1s;  animation-duration: 6.4s; }
  .toc-net-nodes circle:nth-child(8)  { animation-delay: -4.6s;  animation-duration: 7.8s; }
  .toc-net-nodes circle:nth-child(9)  { animation-delay: -1.0s;  animation-duration: 7.6s; }
  .toc-net-nodes circle:nth-child(10) { animation-delay: -3.0s;  animation-duration: 6.2s; }
  .toc-net-nodes circle:nth-child(11) { animation-delay: -5.5s;  animation-duration: 8.2s; }
  .toc-net-nodes circle:nth-child(12) { animation-delay: -1.8s;  animation-duration: 7.4s; }

  @keyframes toc-net-pulse {
    0%, 100% {
      fill-opacity: 0.18;
      r: 1.4;
    }
    50% {
      fill-opacity: 0.62;
      r: 2.0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .toc-net-nodes circle {
      animation: none;
      fill-opacity: 0.40;
    }
  }

  /* --- Corner brackets : 4 marques d'angle, type "chapter".
     Chacune trace 2 segments d'un L (top/left ou top/right etc).
     Très bas contraste — c'est le squelette du chapitre. --- */
  .toc-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
    /* Reveal initial : opacity 0 → 0.12 (1.4s), pas d'animation
       au mount sauf si .reveal classes touchent. On les considère
       passives — visibles dès le rendu. */
  }
  .toc-corner--tl {
    top: 0;
    left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }
  .toc-corner--tr {
    top: 0;
    right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
  }
  .toc-corner--bl {
    bottom: 0;
    left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
  }
  .toc-corner--br {
    bottom: 0;
    right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-right: 1px solid rgba(255, 255, 255, 0.14);
  }

  /* Hover sur n'importe quelle row : les 4 corners s'illuminent
     subtilement → "le contenu éclaire le cadre". Transition très
     longue (1s) pour rester ultra-smooth, jamais agressif. */
  .toc-corner {
    transition:
      border-color 1000ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .valeurs-toc:hover .toc-corner {
    border-color: rgba(255, 255, 255, 0.30);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.05);
  }

  /* --- Header row : labels colonnes mono uppercase, très faibles. --- */
  .toc-head {
    display: grid;
    grid-template-columns: 88px minmax(180px, 0.42fr) minmax(280px, 1.58fr);
    column-gap: 36px;
    align-items: center;
    padding: 0 12px 18px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.03) 6%,
      rgba(255, 255, 255, 0.14) 50%,
      rgba(255, 255, 255, 0.03) 94%,
      transparent 100%) 1;
  }
  .toc-col {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 9.5px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
    font-weight: 500;
  }

  /* --- Body : ol resetée, 3 rows. --- */
  .toc-body {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* --- Article row : grid identique au header.
     Aucun translate / scale sur hover : seuls couleurs, opacités et
     gradient washes bougent. Transitions longues et bezier "smooth". --- */
  .toc-row {
    position: relative;
    display: grid;
    grid-template-columns: 88px minmax(180px, 0.42fr) minmax(280px, 1.58fr);
    column-gap: 36px;
    align-items: center;
    padding: 36px 12px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.025) 6%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0.025) 94%,
      transparent 100%) 1;
    isolation: isolate;
    transition:
      background-color 700ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .toc-row:last-child {
    /* Dernière row : retire le border-bottom (le footer prend la suite). */
    border-bottom: 0;
  }

  /* Wash horizontal au hover : transparent → blanc 3% → transparent.
     Centré, fade aux extrémités — l'éclat ne touche jamais les corners. */
  .toc-row::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.012) 18%,
      rgba(255, 255, 255, 0.030) 50%,
      rgba(255, 255, 255, 0.012) 82%,
      transparent 100%);
    opacity: 0;
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
  .toc-row:hover::before,
  .toc-row.toc-row--focus::before { opacity: 1; }
  .toc-row.toc-row--focus::before { opacity: 0.55; } /* focus = subtil */
  .toc-row:hover::before { opacity: 1; }            /* hover = full */

  /* Trail line — se remplit de gauche à droite au hover.
     Position : juste au-dessus du border-bottom, 1px, gradient blanc
     fade aux extrémités. Délai 120ms pour qu'elle suive le wash. */
  .toc-trail {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.55) 16%,
      rgba(255, 255, 255, 0.85) 50%,
      rgba(255, 255, 255, 0.55) 84%,
      rgba(255, 255, 255, 0.02) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms,
                opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    opacity: 0.85;
    will-change: transform;
  }
  .toc-row:hover .toc-trail { transform: scaleX(1); }
  /* Note : le focus scroll-driven NE touche PLUS au trail (évite
     l'effet "ligne coincée à 42 %" perçu comme un bug). Le focus
     se manifeste via wash + couleurs uniquement. Le trail reste
     un signal purement hover-driven, ultra-net. */
  .toc-row:last-child .toc-trail { display: none; }

  /* --- Index "shape" : rectangle outline 36×26 contenant I/II/III.
     C'est la SHAPE du design — minimal, géométrique, monochrome.
     Stroke 1px à 10% blanc ; brightens à 32% au hover. --- */
  .toc-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 2px;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.018) 0%,
      rgba(255, 255, 255, 0) 100%);
    transition:
      border-color 700ms cubic-bezier(0.16, 1, 0.3, 1),
      background 700ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 700ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .toc-index-num {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1;
    transition: color 700ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .toc-row:hover .toc-index,
  .toc-row.toc-row--focus .toc-index {
    border-color: rgba(255, 255, 255, 0.34);
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.048) 0%,
      rgba(255, 255, 255, 0.012) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 0 18px rgba(255, 255, 255, 0.045),
      0 0 38px rgba(255, 255, 255, 0.020);
  }
  .toc-row:hover .toc-index-num,
  .toc-row.toc-row--focus .toc-index-num {
    color: rgba(255, 255, 255, 0.95);
  }

  /* --- Nom de la valeur : sans-serif medium, taille mesurée.
     Pas de display oversized — typo fonctionnelle. --- */
  .toc-name {
    margin: 0;
    font-family: var(--font);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.018em;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    transition: color 700ms cubic-bezier(0.16, 1, 0.3, 1),
                text-shadow 900ms cubic-bezier(0.16, 1, 0.3, 1),
                letter-spacing 900ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .toc-row:hover .toc-name,
  .toc-row.toc-row--focus .toc-name {
    color: rgba(255, 255, 255, 1);
    /* Glow textuel ultra-soft : halo blanc autour du nom, premium,
       comme un mot qui s'éclaire à la lecture. Jamais bruyant. */
    text-shadow:
      0 0 16px rgba(255, 255, 255, 0.18),
      0 1px 0 rgba(255, 255, 255, 0.05);
  }

  /* --- Énoncé : colonne éditoriale lisible, line-height respiré.
     Au hover, le texte glisse d'une teinte plus claire (couleur, pas
     opacity → meilleur antialiasing). --- */
  .toc-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.70;
    color: rgba(255, 255, 255, 0.62);
    max-width: 60ch;
    transition: color 700ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .toc-row:hover .toc-text { color: rgba(255, 255, 255, 0.86); }
  .toc-row.toc-row--focus .toc-text { color: rgba(255, 255, 255, 0.74); }

  /* --- Footer : symétrie avec le header, signature de fin. --- */
  .toc-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 30px 12px 8px;
  }
  .toc-foot-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.10) 50%,
      transparent 100%);
  }
  .toc-foot-text {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
    white-space: nowrap;
  }
  .toc-em {
    margin: 0 4px;
    color: rgba(255, 255, 255, 0.28);
  }

  /* --- Mobile : index inline, name + text stack en col 2. --- */
  @media (max-width: 900px) {
    .valeurs-toc {
      padding: 36px 12px 8px;
    }
    .toc-head {
      grid-template-columns: 56px 1fr;
      column-gap: 16px;
      padding: 0 4px 12px;
    }
    .toc-col-text { display: none; }
    .toc-row {
      grid-template-columns: 56px 1fr;
      column-gap: 16px;
      row-gap: 8px;
      padding: 26px 4px;
    }
    .toc-name {
      grid-column: 2;
      font-size: 17px;
    }
    .toc-text {
      grid-column: 2;
      font-size: 14px;
      max-width: none;
    }
    .toc-foot {
      gap: 12px;
      padding: 22px 4px 4px;
    }
    .toc-foot-text {
      font-size: 9.5px;
      letter-spacing: 0.18em;
    }
  }

  /* Reduce motion : on coupe les animations longues, le hover reste
     fonctionnel mais sans timing premium. */
  @media (prefers-reduced-motion: reduce) {
    .toc-row::before,
    .toc-trail,
    .toc-index,
    .toc-index-num,
    .toc-name,
    .toc-text {
      transition: none;
    }
  }

  /* ================================================================
     VALEURS — Vercel-like Flow Diagram
     Parcours client : besoin > hub JCD > 3 branches (valeurs).
     Bleu JCD monochromatique. Lignes animees au scroll.
     ================================================================ */
  .vd-flow {
    --vd-c1: #6BB5E8;
    --vd-c2: #2E72BA;
    --vd-c3: #1E5A94;
    /* Langage de mouvement unifié :
       out   → entrées (out-expo, décélération franche)
       soft  → grands éléments diffus (out-quint, plus feutré)
       flow  → flux continus (quasi-sinus, ni départ ni arrivée sèche) */
    --vd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --vd-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --vd-ease-flow: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    position: relative;
    margin-top: 48px;
    padding: 24px 0;
  }
  /* Halo doux centré sur le hub : lueur radiale très feutrée et entièrement
     fondue (transparente bien avant les bords) → aucun bord « carré », rendu
     ultra smooth. Le schéma flotte sur un noir uni.
     Il démarre invisible (opacity 0) et n'éclot qu'avec le tracé du schéma
     (cf. .vd-flow.visible::before) : la lueur est émise PAR le diagramme au
     fur et à mesure qu'il s'allume, jamais avant lui. */
  .vd-flow::before {
    content: "";
    position: absolute;
    inset: -30% -14%;
    background: radial-gradient(46% 56% at 46% 50%,
      rgba(46, 114, 186, 0.13) 0%,
      rgba(46, 114, 186, 0.05) 38%,
      transparent 70%);
    filter: blur(26px);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transform: scale(0.9);
    transform-origin: 46% 50%;
    will-change: opacity, transform;
  }
  .vd-svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: visible;
  }
  .vd-anim-line {
    stroke-dasharray: 9999;
    stroke-dashoffset: 9999;
  }
  /* Pointes de tracé adoucies pendant le draw + jonctions nettes à l'arrivée */
  .vd-anim-line,
  .vd-glow-line { stroke-linecap: round; }
  .vd-flow.visible .vd-anim-line {
    animation: vd-draw var(--dur, 1s) var(--vd-ease-out) forwards;
    animation-delay: var(--d, 0s);
  }
  @keyframes vd-draw {
    to { stroke-dashoffset: 0; }
  }
  /* Entrée des nœuds : fade + micro-settle d'échelle (0.94 → 1) centré sur
     chaque élément (transform-box: fill-box). La propriété individuelle
     `scale` compose sans écraser les transform SVG ; navigateurs anciens
     l'ignorent → simple fade, dégradation propre. */
  .vd-anim-node {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    scale: 0.94;
  }
  .vd-flow.visible .vd-anim-node {
    animation: vd-node-in 0.9s var(--vd-ease-out) forwards;
    animation-delay: var(--d, 0s);
  }
  @keyframes vd-node-in { to { opacity: 1; scale: 1; } }
  .vd-anim-dash { opacity: 0; }
  /* Fade-in puis marche lente des pointillés (flux besoin → hub).
     Marche linéaire assumée (tapis roulant régulier), cadence apaisée. */
  .vd-flow.visible .vd-anim-dash {
    animation: vd-node-in 0.6s var(--vd-ease-out) forwards,
               vd-dash-march 2.2s linear infinite;
    animation-delay: 0.3s;
  }
  @keyframes vd-dash-march { to { stroke-dashoffset: -10; } }
  /* Lueur des branches : éclosion, puis respiration lente et synchrone de
     tout le schéma (0.15 ↔ 0.09) une fois le reveal terminé (2.8s). */
  .vd-glow-line { opacity: 0; }
  .vd-flow.visible .vd-glow-line {
    animation: vd-glow-in 1.8s var(--vd-ease-soft) var(--d, 0.6s) forwards,
               vd-glow-breathe 7s ease-in-out 2.8s infinite alternate;
  }
  @keyframes vd-glow-in { to { opacity: 0.15; } }
  @keyframes vd-glow-breathe {
    from { opacity: 0.15; }
    to   { opacity: 0.09; }
  }

  /* Éclosion du halo de fond, calée sur le tracé du schéma : démarre quand
     les branches colorées commencent à se dessiner (~0.6s) et gonfle en
     douceur jusqu'à ce que le diagramme soit complet (~2.5s). La lueur
     « respire » depuis le hub (scale 0.9 → 1) → effet d'aura émise par le
     schéma, unique et ultra-smooth, jamais en avance sur lui. */
  .vd-flow.visible::before {
    animation: vd-halo-bloom 2.2s var(--vd-ease-soft) 0.6s forwards,
               vd-halo-breathe 7s ease-in-out 2.8s infinite alternate;
  }
  @keyframes vd-halo-bloom {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
  }
  /* Respiration de l'aura, en phase avec la lueur des branches et le départ
     des impulsions (2.8s) : le schéma entier vit d'un seul souffle. */
  @keyframes vd-halo-breathe {
    from { opacity: 1;    transform: scale(1); }
    to   { opacity: 0.88; transform: scale(1.025); }
  }

  /* Hub orbital : comète (traînée fondue + cœur) en rotation lente autour du
     hub, et second satellite lointain en contre-rotation encore plus lente.
     Origine explicite au centre du hub (288,140) en unités viewBox : la
     traînée asymétrique interdit l'origine fill-box. */
  .vd-orbit {
    opacity: 0;
    transform-box: view-box;
    transform-origin: 288px 140px;
  }
  .vd-flow.visible .vd-orbit {
    animation: vd-node-in 0.9s var(--vd-ease-out) 0.7s forwards,
               vd-orbit-spin 28s linear 0.7s infinite;
  }
  .vd-flow.visible .vd-orbit--retro {
    animation: vd-node-in 0.9s var(--vd-ease-out) 0.9s forwards,
               vd-orbit-spin 46s linear 0.9s infinite reverse;
  }
  @keyframes vd-orbit-spin { to { transform: rotate(360deg); } }

  /* Flux continu post-reveal : une impulsion courte parcourt chaque branche
     du hub vers les environnements (dasharray > longueur du tracé →
     respiration naturelle entre deux passages, cadence décalée par branche). */
  .vd-pulse {
    opacity: 0;
    stroke-linecap: round;
  }
  /* Course quasi-sinus : l'impulsion accélère en sortant du hub et décélère
     à l'approche de l'environnement — la pause tombe pendant la phase
     invisible du cycle (dash hors tracé), le bouclage reste invisible.
     Unités normalisées (pathLength=100, période 105) : 110 → 5 = exactement
     une période, boucle sans couture. */
  .vd-flow.visible .vd-pulse {
    animation: vd-pulse-in 1.2s var(--vd-ease-soft) 2.8s forwards,
               vd-pulse-run 4.8s var(--vd-ease-flow) var(--pd, 2.8s) infinite;
  }
  @keyframes vd-pulse-in { to { opacity: 0.85; } }
  @keyframes vd-pulse-run {
    from { stroke-dashoffset: 110; }
    to   { stroke-dashoffset: 5; }
  }

  /* Curseur bloc du terminal : clignotement net, cadence système (~1.15s),
     démarre une fois la card révélée. */
  .vd-cursor { opacity: 0.9; }
  .vd-flow.visible .vd-cursor {
    animation: vd-cursor-blink 1.15s linear 1.2s infinite;
  }
  @keyframes vd-cursor-blink {
    0%, 55%  { opacity: 0.9; }
    56%, 100% { opacity: 0; }
  }

  .vd-legend {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    margin-top: 56px;
    padding: 0 8px;
  }
  .vd-legend-item {
    position: relative;
    padding-left: 20px;
  }
  .vd-legend-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot-c);
  }
  .vd-legend-item h3 {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 8px;
  }
  .vd-legend-item p {
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.50);
    max-width: 34ch;
  }

  @media (min-width: 901px) {
    .vd-mobile { display: none; }
  }
  @media (max-width: 900px) {
    .vd-svg { display: none; }
    .vd-legend { display: none; }
    .vd-mobile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      padding: 16px 0;
    }
    .vd-mobile-terminal {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 18px;
      background: #141414;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.75);
    }
    .vd-mobile-terminal svg {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
    }
    .vd-mobile-stem {
      width: 1px;
      height: 28px;
      background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
    }
    .vd-mobile-hub {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #141414;
      border: 1px solid rgba(255, 255, 255, 0.10);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .vd-mobile-hub svg { width: 16px; height: 16px; }
    .vd-mobile-branches {
      display: flex;
      flex-direction: column;
      gap: 14px;
      width: 100%;
      max-width: 340px;
      margin-top: 24px;
    }
    .vd-mobile-branch {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 16px;
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.015);
    }
    .vd-mobile-branch-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 5px;
    }
    .vd-mobile-branch h3 {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.88);
      margin-bottom: 4px;
    }
    .vd-mobile-branch p {
      font-size: 13px;
      line-height: 1.55;
      color: rgba(255, 255, 255, 0.48);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .vd-anim-line,
    .vd-anim-dash,
    .vd-anim-node,
    .vd-glow-line {
      animation: none !important;
      opacity: 1 !important;
      stroke-dashoffset: 0 !important;
      scale: none !important;
    }
    /* La lueur reste à sa valeur de design, jamais pleine opacité */
    .vd-glow-line { opacity: 0.15 !important; }
    .vd-cursor { animation: none !important; opacity: 0.9 !important; }
    .vd-orbit {
      animation: none !important;
      opacity: 1 !important;
    }
    .vd-pulse {
      animation: none !important;
      opacity: 0 !important;
    }
    .vd-flow::before {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* === Reste du bloc legacy manifesto en orphan ci-dessous —
     conservé pour rollback éventuel ; aucune classe HTML correspondante. === */

  .valeurs-manifesto {
    list-style: none;
    margin: 0;
    padding: 56px 0 0;
    position: relative;
    /* Conserve la perspective inutilisée mais inoffensive — la
       structure ne dépend pas du tilt 3D des anciennes cards. */
    counter-reset: manif;
  }

  /* Article = ligne complète du manifeste, séparée par hairlines.
     Grid : numéro (gauche) | corps (centre, large) | sceau (droite). */
  .manif-article {
    position: relative;
    display: grid;
    grid-template-columns: 116px minmax(280px, 1fr) 200px;
    column-gap: 44px;
    align-items: center;
    padding: 52px 8px;
    /* Hairline gradient horizontal — fade aux extrémités. */
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.02) 6%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0.02) 94%,
      transparent 100%) 1;
    transition: background 480ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .manif-article:last-child {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.02) 6%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0.02) 94%,
      transparent 100%) 1;
  }

  /* Numéro romain massif en outline — "second-read moment".
     Ultra-light text avec stroke pour une présence structurelle
     sans éclat. Couleur restée monochrome, pas d'accent JCD ici
     (la couleur arrive par les sceaux à droite). */
  .manif-numeral {
    font-family: var(--font);
    font-size: clamp(76px, 9vw, 128px);
    font-weight: 200;
    line-height: 0.92;
    letter-spacing: -0.06em;
    color: rgba(255, 255, 255, 0.045);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.20);
    text-stroke: 1px rgba(255, 255, 255, 0.20);
    text-align: center;
    align-self: center;
    user-select: none;
    pointer-events: none;
    /* Léger drop-shadow pour décoller subtilement du fond mocks UI. */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  }

  /* Corps de l'article : marker mono → nom display → rule → texte. */
  .manif-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 540px;
  }
  .manif-marker {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    font-weight: 600;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    margin-bottom: 14px;
  }
  .manif-name {
    font-family: var(--font);
    font-size: clamp(38px, 4.4vw, 58px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.038em;
    color: rgba(255, 255, 255, 0.97);
    margin: 0;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.05),
      0 2px 10px rgba(0, 0, 0, 0.55);
  }
  /* Trait fin sous le nom — signature graphique manuscrite.
     Largeur pose un appui visuel sans le souligner comme un lien. */
  .manif-rule {
    display: block;
    width: 64px;
    height: 1px;
    margin: 18px 0 16px;
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.10) 100%);
    transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1),
                background 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .manif-text {
    color: rgba(255, 255, 255, 0.66);
    font-size: 15px;
    line-height: 1.62;
    margin: 0;
    max-width: 480px;
  }

  /* Hover article : la rule s'étend, et la teinte du sceau s'éclaire.
     Aucun changement de bg/border — l'épure est sacrée. */
  .manif-article:hover .manif-rule { width: 96px; }
  .manif-article--gauge:hover .manif-rule {
    background: linear-gradient(90deg,
      rgba(174, 217, 133, 0.85) 0%,
      rgba(174, 217, 133, 0.10) 100%);
  }
  .manif-article--pulse:hover .manif-rule {
    background: linear-gradient(90deg,
      rgba(168, 200, 235, 0.90) 0%,
      rgba(168, 200, 235, 0.10) 100%);
  }
  .manif-article--mesh:hover .manif-rule {
    background: linear-gradient(90deg,
      rgba(243, 193, 130, 0.90) 0%,
      rgba(243, 193, 130, 0.10) 100%);
  }

  /* Sceau métrique à droite : compact, tactique, écho dashboard.
     Stack vertical aligné à droite ; label uppercase mono → valeur
     display → mini-glyphe. Ne dépasse jamais la valeur typographique
     du nom. */
  .manif-seal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    align-self: center;
    text-align: right;
    width: 100%;
  }
  .manif-seal-label {
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    font-weight: 600;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    white-space: nowrap;
  }
  .manif-seal-value {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font);
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.025em;
    color: rgba(255, 255, 255, 0.97);
    font-feature-settings: "tnum" 1, "lnum" 1;
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.04),
      0 2px 6px rgba(0, 0, 0, 0.5);
  }
  .manif-seal-unit {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.50);
    letter-spacing: 0.04em;
    margin-left: 2px;
  }
  .manif-seal-glyph {
    display: block;
    width: 110px;
    height: 18px;
    margin-top: 6px;
  }

  /* --- Glyph I : jauge fine — Efficacité --- */
  .manif-seal-glyph--gauge { height: 10px; padding-top: 4px; }
  .seal-gauge-track {
    display: block;
    position: relative;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background:
      linear-gradient(90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 100%);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.55);
    overflow: visible;
  }
  .seal-gauge-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 96.4%;
    border-radius: 2px;
    background: linear-gradient(90deg,
      rgba(142, 192, 65, 0.55) 0%,
      rgba(174, 217, 133, 0.95) 60%,
      rgba(192, 221, 154, 1) 100%);
    box-shadow:
      0 0 8px rgba(142, 192, 65, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.30);
  }
  .seal-gauge-fill::after {
    content: "";
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(220, 240, 195, 1);
    box-shadow:
      0 0 6px rgba(174, 217, 133, 0.85),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }

  /* --- Glyph II : pulse fin — Réactivité ---
     SVG ECG miniature avec trail glow qui voyage en boucle
     (réutilise la cinétique de l'instrument original). */
  .manif-seal-glyph--pulse svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .seal-pulse-line {
    stroke: rgba(168, 200, 235, 0.30);
    stroke-width: 1;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .seal-pulse-trail {
    stroke: url(#seal-pulse-grad);
    stroke-width: 1.4;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 22 110;
    stroke-dashoffset: -22;
    filter: drop-shadow(0 0 4px rgba(46, 114, 186, 0.7));
    animation: seal-pulse-travel 4.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  @keyframes seal-pulse-travel {
    0%   { stroke-dashoffset: -22; }
    100% { stroke-dashoffset: -132; }
  }

  /* --- Glyph III : mesh fin — Souplesse ---
     Hub central orange + 4 satellites blancs respirant. Réutilise
     les mêmes keyframes que l'instrument original. */
  .manif-seal-glyph--mesh svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .seal-mesh-link {
    stroke: rgba(255, 255, 255, 0.20);
    stroke-width: 0.7;
    fill: none;
    stroke-linecap: round;
    animation: vi-mesh-link-breathe 4.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .seal-mesh-link:nth-of-type(2) { animation-delay: -1.0s; }
  .seal-mesh-link:nth-of-type(3) { animation-delay: -2.1s; animation-duration: 5.0s; }
  .seal-mesh-link:nth-of-type(4) { animation-delay: -3.0s; animation-duration: 4.6s; }
  .seal-mesh-node {
    fill: rgba(255, 255, 255, 0.55);
    animation: vi-mesh-node-pulse 4.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  .seal-mesh-node:nth-of-type(6) { animation-delay: -0.7s; }
  .seal-mesh-node:nth-of-type(7) { animation-delay: -1.5s; }
  .seal-mesh-node:nth-of-type(8) { animation-delay: -2.4s; }
  .seal-mesh-node:nth-of-type(9) { animation-delay: -3.2s; }
  .seal-mesh-hub {
    fill: #f3c182;
    filter: drop-shadow(0 0 4px rgba(243, 148, 29, 0.65));
    animation: vi-mesh-hub-glow 3.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .seal-pulse-trail,
    .seal-mesh-link,
    .seal-mesh-node,
    .seal-mesh-hub {
      animation: none;
    }
  }

  /* Signature de fin de manifeste : ferme le contrat moral.
     Composition centrée — deux filets latéraux qui rejoignent un
     groupe texte mono + badge "JCD" type wax-seal. */
  .manif-signature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 56px 8px 8px;
  }
  .manif-sig-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.12) 50%,
      transparent 100%);
  }
  .manif-sig-text {
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    white-space: nowrap;
  }
  .manif-sig-em {
    margin: 0 4px;
    color: rgba(255, 255, 255, 0.28);
  }
  .manif-sig-mark {
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
    padding: 5px 11px 4px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 2px;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.01) 100%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  }

  /* Mobile : numéro inline en col 1, corps + sceau stack en col 2. */
  @media (max-width: 900px) {
    .valeurs-manifesto { padding-top: 36px; }
    .manif-article {
      grid-template-columns: 64px 1fr;
      column-gap: 18px;
      row-gap: 18px;
      padding: 36px 4px;
    }
    .manif-numeral {
      font-size: 56px;
      align-self: start;
      grid-row: 1 / span 2;
      text-align: left;
    }
    .manif-body { grid-column: 2; max-width: none; }
    .manif-seal {
      grid-column: 2;
      align-items: flex-start;
      text-align: left;
    }
    .manif-seal-glyph { width: 96px; }
    .manif-signature {
      gap: 14px;
      padding: 36px 4px 4px;
    }
    .manif-sig-text { font-size: 9.5px; letter-spacing: 0.18em; }
  }
  @media (max-width: 560px) {
    .manif-name { font-size: 34px; }
    .manif-numeral { font-size: 44px; }
    .manif-seal-value { font-size: 24px; }
  }

  .valeur-num {
    font-size: 12px;
    color: var(--accent-text);
    margin-bottom: 14px;
    display: inline-block;
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: color 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .valeur:hover .valeur-num {
    color: var(--text-primary);
  }
  .valeur h3 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: -0.02em;
    /* Important : on borne la largeur du h3 à son contenu pour que
       le gradient bg s'étale exactement sur le texte (et non sur la
       largeur de la card), garantissant l'apparition des 7 couleurs. */
    display: inline-block;
    width: max-content;
    max-width: 100%;
    /* Gradient JCD 7 couleurs full size sur chaque mot — angle
       horizontal, taille 100% du texte. Préchargé sur le titre,
       masqué par text-fill-color au repos et révélé au hover. */
    background-image: linear-gradient(90deg,
      #2E72BA 0%,
      #F9D605 16.66%,
      #F3941D 33.33%,
      #E51D29 50%,
      #8D2C87 66.66%,
      #8EC041 83.33%,
      #A78D75 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    -webkit-background-clip: text;
            background-clip: text;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    /* Effet 3D léger sur le texte via text-shadow projeté */
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.06),
      0 2px 6px rgba(0, 0, 0, 0.7);
    transition:
      -webkit-text-fill-color 1000ms cubic-bezier(0.16, 1, 0.3, 1),
      color 1000ms cubic-bezier(0.16, 1, 0.3, 1),
      text-shadow 1000ms cubic-bezier(0.16, 1, 0.3, 1),
      filter 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Hover : aucun changement de couleur du h3 — le titre reste blanc.
     L'effet de différenciation est porté par le compagnon hover (les
     2 autres cards se dim) et la constellation. */
  .valeur:hover h3 {
    /* No-op : on conserve color/text-fill/text-shadow d'origine */
  }
  .valeur p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
  }

  /* ================================================================
     HISTOIRE — Réseau éditorial « Synapse hybride »
     · Tronc vertical 1px central (préservé) qui prolonge vers le globe
     · 6 branches en courbes S bezier reliant chaque date au tronc
     · Nœuds 7px lumineux, couleur charte JCD (1 par date)
     · Pulse 7-couleurs scroll-driven le long du tronc (data flow)
     · Typographie éditoriale flottante (aucune carte, aucun fond)
     · Hairline 1px en accent vertical à côté du bloc texte de chaque jalon
     · Cascade de reveal : entry → branche tracée → nœud pop → typo fade-up
     ================================================================ */
  .histoire {
    position: relative;
    padding: 88px 0 96px;
    background: var(--bg);
    overflow: hidden;
    border-top: 1px solid transparent;
    border-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(255, 255, 255, 0.04) 8%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0.04) 92%,
      transparent 100%
    ) 1;
  }
  /* Prolongement du tronc : couvre le padding-bas de .histoire pour
     rejoindre sans rupture le sommet de la section contact.
     Calé sur l'intensité finale du tronc pour un raccord invisible. */
  .histoire::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 96px;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.130) 0%,
      rgba(255, 255, 255, 0.135) 100%
    );
    transform: translateX(-50%);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.035));
    pointer-events: none;
  }
  .histoire .hist-container { display: block; }
  /* SVG defs partagé (gradient des branches) — invisible, taille zéro. */
  .hist-svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
  }

  /* ============================================================
     OVERTURE — Tete editoriale compacte : titre + range 1996-2025
     ============================================================ */
  .hist-overture {
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 10%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0.08) 90%,
      transparent 100%
    ) 1;
  }
  .hist-overture-text { max-width: 720px; min-width: 0; }
  .hist-overture-text .section-eyebrow { margin-bottom: 14px; }
  .hist-overture-text h2 {
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.06;
    letter-spacing: -0.03em;
    font-weight: 600;
    margin-bottom: 14px;
  }
  .hist-overture-text p {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.65;
  }

  /* ============================================================
     NETWORK — Grille 2-cols, tronc central, pulse scroll-driven.
     Desktop : zigzag gauche/droite autour d'un tronc central.
     ============================================================ */
  .hist-network {
    position: relative;
    list-style: none;
    margin: 24px 0 0;
    padding: 20px 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;

    /* Variables compactes pour une fresque dense :
       --branch    : longueur horizontale (date plus proche du tronc)
       --branch-h  : hauteur de la zone du tracé (Z-step compact)
       --gap-v     : espacement vertical entre jalons (resserré)
       --node-size : diamètre du nœud lumineux */
    --branch:    clamp(96px, 11vw, 156px);
    --branch-h:  clamp(40px, 4.6vw, 60px);
    --gap-v:     clamp(36px, 4vw, 56px);
    --node-size: 6px;

    gap: var(--gap-v) 0;
  }

  /* Tronc principal — filament 1px vertical centré, gamme blanche
     très basse. Multi-stops cubiques pour une intensité qui monte
     progressivement vers le bas (rejoint le prolongement vers le globe). */
  .hist-network::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255, 255, 255, 0.035) 5%,
      rgba(255, 255, 255, 0.075) 14%,
      rgba(255, 255, 255, 0.105) 30%,
      rgba(255, 255, 255, 0.125) 55%,
      rgba(255, 255, 255, 0.130) 100%
    );
    transform: translateX(-50%);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.035));
    pointer-events: none;
  }

  /* Pulse 7 couleurs JCD — descend le tronc au rythme du scroll
     (translate3d Y driven par --pulse-y depuis le JS).
     Gradient vertical contient tout le sweep charte JCD : bleu,
     jaune, orange, rouge, violet, vert, beige (à ~50% opacité). */
  .hist-pulse {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 340px;
    margin-left: -0.5px;
    /* Fondu continu : un seul stop par teinte, les couleurs se
       mélangent d'une bande à l'autre. Ne PAS doubler les stops à une
       même position (essai « paliers » du 29/07) : sur une ligne de
       1px, les bornes franches se lisent comme un dégradé cassé.
       Seules les opacités sont remontées (~0.55 → ~0.78) pour que la
       fresque tienne face au fond noir. */
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0)     0%,
      rgba(46, 114, 186, 0)      4%,
      rgba(46, 114, 186, 0.78)  14%,
      rgba(249, 214, 5, 0.78)   26%,
      rgba(243, 148, 29, 0.80)  38%,
      rgba(229, 29, 41, 0.80)   50%,
      rgba(141, 44, 135, 0.78)  62%,
      rgba(142, 192, 65, 0.78)  74%,
      rgba(167, 141, 117, 0.62) 86%,
      rgba(167, 141, 117, 0)    96%,
      rgba(255, 255, 255, 0)   100%
    );
    filter: blur(0.4px) drop-shadow(0 0 6px rgba(255, 255, 255, 0.22));
    transform: translate3d(-50%, var(--pulse-y, -360px), 0);
    pointer-events: none;
    will-change: transform;
    z-index: 1;
  }

  /* ============================================================
     ENTRY — Une étape éditoriale : branche + nœud + typo flottante
     (aucun fond, aucune carte, juste un hairline accent vertical
     côté tronc et la typographie en flux libre)
     ============================================================ */
  .hist-entry {
    position: relative;
    min-height: 120px;
  }
  .hist-entry--left  {
    grid-column: 1;
    padding-right: calc(var(--branch) + 18px);
    display: flex;
    justify-content: flex-end;
  }
  .hist-entry--right {
    grid-column: 2;
    padding-left: calc(var(--branch) + 18px);
  }

  /* Branche SVG : courbe S subtile (cubic bezier) reliant le tronc
     au nœud. Étirée via preserveAspectRatio=none + non-scaling-stroke
     pour garder un trait visuellement constant à toutes tailles.
     Côté --left : flip horizontal pour mirroir parfait. */
  .hist-branch {
    position: absolute;
    top: 0;
    width: var(--branch);
    height: var(--branch-h);
    pointer-events: none;
    overflow: visible;
    z-index: 0;
    filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.04));
  }
  .hist-entry--right .hist-branch { left: 0; }
  .hist-entry--left  .hist-branch { right: 0; transform: scaleX(-1); }

  .hist-branch-path {
    fill: none;
    stroke: url(#hist-branch-grad);
    stroke-width: 1;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }

  /* Nœud : point lumineux ultra-discret à l'extrémité de la branche.
     PAS de ring « punch-out » dur — le nœud est un soft glow, fondu
     dans le background. Le radial-gradient interne crée un highlight
     subtil en haut (lumière diffuse), les box-shadow successifs
     diffusent le halo coloré sur 3 niveaux décroissants.
     Résultat : présence atmosphérique, jamais agressive. */
  .hist-node-dot {
    position: absolute;
    top: var(--branch-h);
    width: var(--node-size);
    height: var(--node-size);
    margin-top: calc(var(--node-size) * -0.5);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%,
      color-mix(in srgb, var(--node-color, #FFFFFF) 92%, white 8%) 0%,
      color-mix(in srgb, var(--node-color, #FFFFFF) 72%, transparent) 55%,
      color-mix(in srgb, var(--node-color, #FFFFFF) 30%, transparent) 100%);
    box-shadow:
      0 0 4px  color-mix(in srgb, var(--node-color, #FFFFFF) 55%, transparent),
      0 0 11px color-mix(in srgb, var(--node-color, #FFFFFF) 22%, transparent),
      0 0 24px color-mix(in srgb, var(--node-color, #FFFFFF) 8%,  transparent);
    z-index: 3;
    transition:
      box-shadow 480ms cubic-bezier(0.16, 1, 0.3, 1),
      transform  580ms cubic-bezier(0.34, 1.4, 0.64, 1);
  }
  .hist-entry--right .hist-node-dot {
    left: var(--branch);
    margin-left: calc(var(--node-size) * -0.5);
  }
  .hist-entry--left .hist-node-dot {
    right: var(--branch);
    margin-right: calc(var(--node-size) * -0.5);
  }

  /* Hover : diffusion légèrement amplifiée, jamais sur-saturée.
     Reste cohérent avec l'esthétique discrète du nœud au repos. */
  .hist-entry:hover .hist-node-dot {
    transform: scale(1.18);
    box-shadow:
      0 0 7px  color-mix(in srgb, var(--node-color, #FFFFFF) 75%, transparent),
      0 0 18px color-mix(in srgb, var(--node-color, #FFFFFF) 38%, transparent),
      0 0 38px color-mix(in srgb, var(--node-color, #FFFFFF) 14%, transparent);
  }

  /* Contenu éditorial flottant — flex column, hairline 1px à côté.
     Pas de fond, pas de cadre, pas de border-radius. Seule la typo
     et un fin trait vertical en accent (couleur du jalon) ancrent
     le bloc dans l'espace. Le bloc est aligné verticalement au nœud. */
  .hist-entry-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 480px;
    padding-left: 18px;
    /* Le bloc texte commence juste au-dessus du nœud : l'année tombe
       à hauteur du nœud, créant un ancrage horizontal serré. */
    margin-top: calc(var(--branch-h) - 18px);
    border-left: 1px solid transparent;
    /* Liseré du jalon en PALIER : bande pleine à bornes franches
       plutôt qu'un fondu qui culmine à 48% — le segment de l'année se
       lit comme un trait affirmé, pas comme une trace estompée. */
    border-image: linear-gradient(
      to bottom,
      transparent 0%,
      color-mix(in srgb, var(--node-color, #FFFFFF) 72%, transparent) 12%,
      color-mix(in srgb, var(--node-color, #FFFFFF) 72%, transparent) 88%,
      transparent 100%
    ) 1;
  }
  .hist-entry--left .hist-entry-content {
    align-items: flex-end;
    padding-left: 0;
    padding-right: 18px;
    border-left: none;
    border-right: 1px solid transparent;
    /* Liseré du jalon en PALIER : bande pleine à bornes franches
       plutôt qu'un fondu qui culmine à 48% — le segment de l'année se
       lit comme un trait affirmé, pas comme une trace estompée. */
    border-image: linear-gradient(
      to bottom,
      transparent 0%,
      color-mix(in srgb, var(--node-color, #FFFFFF) 72%, transparent) 12%,
      color-mix(in srgb, var(--node-color, #FFFFFF) 72%, transparent) 88%,
      transparent 100%
    ) 1;
  }

  /* Année plus compacte : tabular-nums, teinte légère de la couleur
     du jalon. Réduit nettement la hauteur du bloc. */
  .hist-year {
    display: block;
    font-family: var(--font);
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: color-mix(in srgb, var(--node-color, var(--text-primary)) 22%, var(--text-primary));
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
  }

  /* Titre : line-height resserré, max-width plus large → moins de
     retours à la ligne, hauteur de bloc réduite. */
  .hist-title {
    font-family: var(--font);
    font-weight: 600;
    font-size: clamp(16px, 1.45vw, 18px);
    line-height: 1.22;
    letter-spacing: -0.018em;
    color: var(--text-primary);
    margin: 0 0 6px;
    max-width: 44ch;
  }
  .hist-entry--left .hist-title { text-align: right; }

  .hist-body {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.48;
    max-width: 62ch;
    margin: 0;
  }
  .hist-entry--left .hist-body { text-align: right; }

  /* ============================================================
     REVEAL — Séquence cascade par entry :
     1. Entry slide-in (translateY)
     2. Branche tracée (stroke-dashoffset 100→0)
     3. Nœud pop (scale + opacity, après que la branche atteigne le nœud)
     4. Typo fade-up + blur, stagger interne phase → year → title → body
     ============================================================ */
  .hist-entry {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity   720ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hist-entry.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Reveal du path : tracé progressif tronc → nœud. Avec
     vector-effect: non-scaling-stroke, Chromium calcule les tirets en
     PIXELS ÉCRAN (pathLength ignoré) → le dash doit couvrir la longueur
     écran réelle. Les deux variantes de path (Z à 76% et à 50%) totalisent
     100 unités horizontales + 50 verticales du viewBox 100×100, donc :
     longueur écran = var(--branch) + var(--branch-h)/2 (+3px de marge,
     linecap round + arrondis). Le bloc reduced-motion force dashoffset: 0. */
  .hist-branch-path {
    --branch-len: calc(var(--branch) + var(--branch-h) / 2 + 3px);
    stroke-dasharray: var(--branch-len);
    stroke-dashoffset: var(--branch-len);
    transition: stroke-dashoffset 900ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hist-entry.is-revealed .hist-branch-path {
    stroke-dashoffset: 0;
    transition-delay: 180ms;
  }

  /* Marqueur angulaire au coin du Z-step (registration mark style).
     Petit carré hollow 6×6 stroked, ancre la pliure de la branche.
     Apparait après que le path soit tracé. */
  .hist-branch-mark {
    opacity: 0;
    transform: scale(0.5);
    transform-box: fill-box;
    transform-origin: center;
    transition:
      opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 460ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .hist-entry.is-revealed .hist-branch-mark {
    opacity: 1;
    transform: scale(1);
    transition-delay: 760ms;
  }

  .hist-node-dot {
    opacity: 0;
    transform: scale(0.4);
  }
  .hist-entry.is-revealed .hist-node-dot {
    opacity: 1;
    transform: scale(1);
    transition:
      opacity   380ms cubic-bezier(0.22, 1, 0.36, 1) 980ms,
      transform 540ms cubic-bezier(0.34, 1.56, 0.64, 1) 980ms,
      box-shadow 360ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .hist-entry-content > * {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(3px);
    transition:
      opacity   760ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
      filter    760ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .hist-entry.is-revealed .hist-entry-content > * {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
  .hist-entry.is-revealed .hist-entry-content .hist-year  { transition-delay: 460ms; }
  .hist-entry.is-revealed .hist-entry-content .hist-title { transition-delay: 600ms; }
  .hist-entry.is-revealed .hist-entry-content .hist-body  { transition-delay: 740ms; }

  /* ============================================================
     CHEVRON « < > » — Variations de --branch par entry (desktop only)
     Top et bas : branches plus longues (dates plus écartées du tronc).
     Milieu (entries 2, 3) : branches plus courtes (dates resserrées
     au tronc) — libère l'espace latéral pour les nodes d'interconnexion.
     Les deux côtés forment ensemble une silhouette « < > ».
     ============================================================ */
  @media (min-width: 981px) {
    .hist-entry[data-i="0"],
    .hist-entry[data-i="1"],
    .hist-entry[data-i="4"],
    .hist-entry[data-i="5"] { --branch: clamp(112px, 12.5vw, 180px); }

    .hist-entry[data-i="2"],
    .hist-entry[data-i="3"] { --branch: clamp(56px, 6.5vw, 92px); }

    /* Note : la pliure du Z des outer entries (data-i 0, 1, 4, 5) est
       posée à 76% directement via les attributs HTML d= et x= de chaque
       entry (compatibilité Firefox — les propriétés CSS d:/x: ne sont
       pas supportées par tous les navigateurs). */
  }

  /* ============================================================
     BRANCHE — Tracé en angle droit (Z-step) avec un unique marqueur
     angulaire au coin de pliure. Géométrie purement orthogonale,
     pas de courbe, pas de cercle générique : adn « tech engineering »
     pour une fresque historique premium.
     ============================================================ */
  .hist-branch-mark {
    fill: none;
    stroke: color-mix(in srgb, var(--node-color, #FFFFFF) 38%, rgba(255, 255, 255, 0.32));
    stroke-width: 0.9;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
  }

  /* ============================================================
     RESPONSIVE — sous 980px : tronc plaqué à gauche, mono-colonne,
     branches toutes orientées de gauche vers le contenu (pas de
     scaleX flip), nœuds tous à gauche. Hairline reste contre le
     contenu. Sous 560px : densités resserrées + typo réduite.
     ============================================================ */
  @media (max-width: 980px) {
    .histoire { padding: 56px 0 64px; }
    /* Trunk reste centre a 50% (grille 2 colonnes conservee comme
       sur desktop). On masque seulement le prolongement bas central
       .histoire::after pour ne pas trainer un hairline sous la fresque. */
    .histoire::after { display: none; }
    .hist-overture { margin-bottom: 28px; padding-bottom: 22px; }
    .hist-overture-text { max-width: 100%; }

    .hist-network {
      /* 2 colonnes conservees (base .hist-network = 1fr 1fr) :
         on ne collapse plus. Geometrie compactee pour tenir a 375px. */
      --branch:    clamp(40px, 6vw, 80px);
      --branch-h:  clamp(34px, 4.4vw, 52px);
      --gap-v:     clamp(28px, 3.6vw, 44px);
      padding: 14px 0 18px;
    }
    /* tronc + pulse restent centres a 50% comme sur desktop */

    /* Zigzag PC conserve : --left en colonne 1 (flex-end), --right en
       colonne 2. Padding vers le tronc resserre (+10 au lieu de +18). */
    .hist-entry--left  { padding-right: calc(var(--branch) + 10px); }
    .hist-entry--right { padding-left:  calc(var(--branch) + 10px); }

    /* branches : positionnement desktop conserve (cote tronc) */
    /* noeuds : positionnement desktop conserve (extremite branche) */

    /* Contenu : alignement/bordure/texte du cote --left restent ceux du
       desktop (flex-end, bordure droite, texte a droite). On borne
       seulement la largeur et on reduit l'annee pour tenir dans une
       colonne etroite a 375px (pas de debordement horizontal). */
    .hist-entry-content { max-width: 100%; padding-left: 12px; }
    .hist-entry--left .hist-entry-content { padding-left: 0; padding-right: 12px; }
    .hist-year  { font-size: clamp(24px, 6vw, 34px); }
    .hist-title { max-width: none; }
    .hist-body  { max-width: none; }
  }
  @media (max-width: 560px) {
    .histoire { padding: 44px 0 52px; }
    .histoire::after { display: none; }
    .hist-network {
      --branch:    clamp(34px, 6vw, 58px);
      --branch-h:  clamp(26px, 4vw, 38px);
      --gap-v:     24px;
    }
    .hist-year  { font-size: clamp(22px, 5vw, 30px); }
    .hist-title { font-size: 15px; line-height: 1.25; }
    .hist-body  { font-size: 12.5px; line-height: 1.5; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hist-pulse,
    .cta-orbit-pulse,
    .cta-spine-pulse,
    .cta-globe-fill { display: none; }
    .hist-entry,
    .hist-branch-path,
    .hist-branch-mark,
    .hist-node-dot,
    .hist-entry-content > * {
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
      stroke-dashoffset: 0 !important;
      transition: none !important;
    }
  }

  /* ================================
     CTA FINAL
     ================================ */
  .cta-final {
    /* Largeur de référence du globe — partagée par le wireframe
       (.cta-globe) ET les couches de diffusion (spine-ring, orbit-pulse,
       globe-fill) : toutes dessinent le même cercle (viewBox 800,
       r=290), une valeur unique garantit que le glow épouse
       exactement l'arrondi du contour. */
    --globe-w: min(1100px, 108vw);
    padding: 150px 0 110px;     /* +40px de respiration en haut pour le fondu */
    text-align: center;
    position: relative;
    overflow: hidden;
    /* Transition douce sur les deux bornes : démarre exactement à la
       couleur de .histoire (var(--bg)) en haut, plonge dans le base,
       puis remonte progressivement vers var(--bg-elev-1) en bas pour
       fondre dans le footer (qui est en bg-elev-1). Aucune cassure
       chromatique aux deux jonctions. */
    background: linear-gradient(
      to bottom,
      var(--bg) 0%,
      var(--bg) 36%,
      #101010 72%,
      var(--bg-elev-1) 100%
    );
  }
  /* Spine : prolonge le tronc de la fresque depuis le haut de la
     section jusqu'au sommet du contour extérieur du globe. L'intensité
     monte progressivement à l'approche du globe pour préparer la
     diffusion radiale autour du contour — tonalité alignée sur le
     tronc discret de la section histoire. */
  .cta-final::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    /* Sommet du contour extérieur du globe = 290/800 × largeur,
       moins le décalage de 2px de .cta-globe (bottom:-2px). */
    bottom: calc(var(--globe-w) * 0.3625 - 2px);
    width: 1px;
    /* Ligne statique : opacité constante puis fade SOFT à transparent
       au bas. Plus de pic de brillance à la jonction avec le globe
       (l'ancienne valeur 0.39 à 100% créait un artefact ponctuel
       visible). La diffusion vers le globe est désormais portée par
       .cta-spine-pulse (gradient 7 couleurs) + le halo .cta-spine-ring. */
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.130) 0%,
      rgba(255, 255, 255, 0.160) 50%,
      rgba(255, 255, 255, 0.175) 82%,
      rgba(255, 255, 255, 0.090) 95%,
      rgba(255, 255, 255, 0)     100%
    );
    transform: translateX(-50%);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.045));
    pointer-events: none;
    z-index: 2;
  }
  .cta-final::before {
    /* Aurora multi-couleurs JCD (même esprit que le hero). Décalé
       vers le bas pour ne pas remonter dans la zone de transition. */
    content: "";
    position: absolute;
    inset: 18% -20% -20% -20%;
    background:
      radial-gradient(40% 50% at 8% 50%, rgba(249, 214, 5, 0.055) 0%, transparent 60%),
      radial-gradient(35% 50% at 22% 55%, rgba(243, 148, 29, 0.055) 0%, transparent 60%),
      radial-gradient(40% 55% at 38% 47%, rgba(229, 29, 41, 0.050) 0%, transparent 60%),
      radial-gradient(35% 55% at 52% 57%, rgba(141, 44, 135, 0.065) 0%, transparent 60%),
      radial-gradient(45% 55% at 68% 50%, rgba(46, 114, 186, 0.090) 0%, transparent 65%),
      radial-gradient(35% 50% at 82% 55%, rgba(142, 192, 65, 0.055) 0%, transparent 60%),
      radial-gradient(30% 50% at 96% 60%, rgba(167, 141, 117, 0.045) 0%, transparent 60%);
    pointer-events: none;
  }
  .cta-final .section-eyebrow { display: block; position: relative; z-index: 3; }
  .cta-final h2 {
    font-size: clamp(32px, 4.4vw, 52px);
    line-height: 1.05;
    margin-bottom: 16px;
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 3;
    font-weight: 600;
    letter-spacing: -0.035em;
  }
  .cta-final p {
    max-width: 520px;
    margin: 0 auto 28px;
    color: var(--text-secondary);
    font-size: 16px;
    position: relative;
    z-index: 3;
  }
  .cta-final .hero-cta { position: relative; z-index: 3; }
  .cta-meta {
    margin-top: 16px;
    font-size: 12px;
    color: var(--text-tertiary);
    position: relative;
    z-index: 3;
  }

  /* ----------------------------------------------------------------
     GLOBE WIREFRAME ATMOSPHÉRIQUE — illustration arrière-plan CTA.
     Demi-globe ancré en bas de section (effet horizon planète) :
     centre du globe = bord inférieur de la section, seule la moitié
     supérieure reste visible, le reste est clippé par overflow:hidden.
     Empilé entre l'aurora (::before, sans z-index) et le contenu
     textuel (.container z-index:2 → on bump à 3).
     ---------------------------------------------------------------- */
  .cta-globe {
    position: absolute;
    left: 50%;
    bottom: -2px;            /* léger débordement bas pour éviter une ligne fine */
    transform: translate(-50%, 50%);  /* centre du globe sur l'arête basse */
    width: var(--globe-w);            /* plus large que le viewport → courbe ample */
    aspect-ratio: 1 / 1;
    pointer-events: none;
    z-index: 1;
    opacity: 0.55;
    will-change: opacity;
    /* Fondu vertical : la couronne nord du globe se fond dans l'aurora
       (transparent vers 0%), pleine intensité au cœur, puis re-fondu
       avant la coupe basse pour éviter une bordure dure visible. */
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,0.18) 10%,
      rgba(0,0,0,0.55) 22%,
      rgba(0,0,0,0.92) 38%,
      #000 50%,
      #000 78%,
      rgba(0,0,0,0.6) 92%,
      rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,0.18) 10%,
      rgba(0,0,0,0.55) 22%,
      rgba(0,0,0,0.92) 38%,
      #000 50%,
      #000 78%,
      rgba(0,0,0,0.6) 92%,
      rgba(0,0,0,0) 100%);
  }
  .cta-globe-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  /* ----------------------------------------------------------------
     SPINE-RING — Couronne de diffusion non-masquée. Reprend exactement
     la géométrie du contour extérieur du globe (cx=400 cy=400 r=290)
     mais sans le mask vertical qui éteint le sommet : la trace verticale
     qui arrive du haut "entre" par le sommet puis rayonne autour du
     contour entier, plus intense en haut et fondue en glissant le
     long des flancs. Double couche : halo flou (atmosphère) + ring
     net (filament) pour un rendu volumétrique.
     ---------------------------------------------------------------- */
  .cta-spine-ring {
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translate(-50%, 50%);
    width: var(--globe-w);
    aspect-ratio: 1 / 1;
    pointer-events: none;
    z-index: 2;
    /* Mask vertical : fade-out du SOMMET du halo, là où le pic de
       brillance (0.55α filament + 0.30α halo blurré) créait un
       artefact ponctuel à la jonction trace verticale / globe.
       Le halo reste visible sur les flancs latéraux du globe. */
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,0.18) 8%,
      rgba(0,0,0,0.55) 18%,
      rgba(0,0,0,0.92) 32%,
      #000 45%,
      #000 78%,
      rgba(0,0,0,0.6) 92%,
      rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,0.18) 8%,
      rgba(0,0,0,0.55) 18%,
      rgba(0,0,0,0.92) 32%,
      #000 45%,
      #000 78%,
      rgba(0,0,0,0.6) 92%,
      rgba(0,0,0,0) 100%);
  }

  /* ----------------------------------------------------------------
     ORBIT PULSE — Diffusion 7-couleurs sur le contour du globe.
     Système à 2 couches concentriques (halo flou + arc net) qui
     « émane » du sommet du globe et s'étend symétriquement vers les
     deux horizons. Pilotage scroll-driven via 2 vars CSS :
       --orbit-dash   : longueur du dash (0 → 50, demi-cercle)
       --orbit-offset : décalage pour centrer sur 12h
     Couches :
       .cta-orbit-halo : stroke épais blurré → "wake" diffus
       .cta-orbit-arc  : stroke fin précis  → filament net
     Effet final : un ruban de lumière qui s'épanouit le long du
     contour visible du globe, du centre vers les flancs.
     ---------------------------------------------------------------- */
  /* ----------------------------------------------------------------
     SPINE-PULSE — Pulse 7 couleurs qui illumine progressivement la
     trace verticale entre la fin du trunk (en bas de la section
     histoire) et le sommet du globe. Comble le « gap » jamais éclairé
     entre la courbe verticale et le globe. Le remplissage est piloté
     par --spine-pulse-fill (0% au début, 100% à la fin) — un mask
     vertical révèle le gradient coloré du haut vers le bas.
     ---------------------------------------------------------------- */
  .cta-spine-pulse {
    position: absolute;
    left: 50%;
    /* Élément ancré au bas (juste avant le globe). Hauteur explicite
       (pas top:0/bottom) pour garantir un espace suffisant à dérouler
       le gradient — auparavant l'élément était squeezé par la section
       (cta.height - globe height = trop peu de pixels). */
    bottom: calc(var(--globe-w) * 0.3625 - 2px);
    height: clamp(180px, 24vh, 320px);
    width: 1px;
    margin-left: -0.5px;
    /* Gradient blue → yellow → orange → purple, sans stop rouge dédié
       (sa saturation créait un blob rouge visible quand le clip-path
       révélait la zone 70-85% au scroll profond).
       Fondu continu : un seul stop par teinte. Ne PAS doubler les
       stops à une même position (essai « paliers » du 29/07) : sur une
       ligne de 1px, les bornes franches se lisent comme un dégradé
       cassé. Seules les opacités sont remontées (~2x) : à 1px de large
       sur fond noir, l'ancienne gamme 0.20-0.32 ne ressortait pas. */
    background: linear-gradient(
      to bottom,
      rgba(46, 114, 186, 0)     0%,
      rgba(46, 114, 186, 0.62) 16%,
      rgba(249, 214, 5, 0.58)  38%,
      rgba(243, 148, 29, 0.55) 58%,
      rgba(141, 44, 135, 0.50) 80%,
      rgba(141, 44, 135, 0)   100%
    );
    /* Animation : clip-path inset (animation fiable des CSS variables).
       --spine-pulse-fill 0% → fully clipped (invisible).
       --spine-pulse-fill 100% → no clip (full reveal). */
    clip-path: inset(0 0 calc(100% - var(--spine-pulse-fill, 0%)) 0);
    -webkit-clip-path: inset(0 0 calc(100% - var(--spine-pulse-fill, 0%)) 0);
    filter: blur(0.3px) drop-shadow(0 0 4px rgba(255, 255, 255, 0.15));
    pointer-events: none;
    z-index: 3;
    will-change: clip-path;
  }
  @media (max-width: 980px) {
    .cta-spine-pulse { display: none; }
  }

  /* ----------------------------------------------------------------
     GLOBE-FILL — Couverture radiale 7 couleurs JCD à l'intérieur
     du globe. Opacité pilotée par --globe-fill-opacity (scroll-driven) :
     0 au début du scroll CTA, 1 à la fin de la page → l'intégralité
     du globe est colorée quand l'utilisateur atteint le footer.
     Même mask que .cta-globe pour ne révéler que la moitié visible. */
  .cta-globe-fill {
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translate(-50%, 50%);
    width: var(--globe-w);
    aspect-ratio: 1 / 1;
    pointer-events: none;
    z-index: 1;
    opacity: var(--globe-fill-opacity, 0);
    filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,0.20) 10%,
      rgba(0,0,0,0.60) 22%,
      rgba(0,0,0,0.95) 38%,
      #000 50%,
      #000 78%,
      rgba(0,0,0,0.6) 92%,
      rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,0.20) 10%,
      rgba(0,0,0,0.60) 22%,
      rgba(0,0,0,0.95) 38%,
      #000 50%,
      #000 78%,
      rgba(0,0,0,0.6) 92%,
      rgba(0,0,0,0) 100%);
    will-change: opacity;
  }
  .cta-globe-fill-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  .cta-orbit-pulse {
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translate(-50%, 50%);
    width: var(--globe-w);
    aspect-ratio: 1 / 1;
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.18));
  }
  .cta-orbit-pulse-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }
  /* Couche halo : très large (6px), floutée, transparente
     → diffusion atmosphérique autour du filament principal. */
  .cta-orbit-halo {
    fill: none;
    stroke-dasharray: var(--orbit-dash, 0) calc(100 - var(--orbit-dash, 0));
    stroke-dashoffset: var(--orbit-offset, -100);
    filter: blur(7px);
    opacity: 0.55;
    will-change: stroke-dasharray, stroke-dashoffset;
  }
  /* Couche arc : fil net, centré dans le halo. */
  .cta-orbit-arc {
    fill: none;
    stroke-dasharray: var(--orbit-dash, 0) calc(100 - var(--orbit-dash, 0));
    stroke-dashoffset: var(--orbit-offset, -100);
    will-change: stroke-dasharray, stroke-dashoffset;
  }
  .cta-spine-ring-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  /* Pulsation douce du wireframe entier (souffle atmosphérique). */
  @keyframes ctaG-breath {
    0%, 100% { opacity: 0.86; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    50%      { opacity: 1.00; filter: drop-shadow(0 0 1.4px rgba(255,255,255,0.16)); }
  }
  .ctaG-wire {
    animation: ctaG-breath 7.5s ease-in-out infinite;
    will-change: opacity, filter;
    transform-origin: 400px 400px;
  }

  /* Balayage couleur sur l'équateur + parallèles ±20° :
     stroke-dashoffset glisse de 0 à -100 (pathLength=100). */
  @keyframes ctaG-flow {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -100; }
  }
  .ctaG-acc--eq {
    animation: ctaG-flow 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  }
  .ctaG-acc--n20 {
    animation: ctaG-flow 11s cubic-bezier(0.42, 0, 0.58, 1) infinite;
    animation-delay: -3.2s;
  }
  .ctaG-acc--s20 {
    animation: ctaG-flow 9.5s cubic-bezier(0.42, 0, 0.58, 1) infinite;
    animation-delay: -5.6s;
    animation-direction: reverse;  /* sens inverse → flux croisé, plus vivant */
  }

  /* Responsive — réduction de taille + opacité sur petits viewports.
     --globe-w suit la largeur du globe pour garder spine et ring
     parfaitement alignés. Sous 980px, le tronc de la fresque bascule
     à gauche : on coupe le spine plutôt que de raccorder à contre-axe. */
  @media (max-width: 980px) {
    .cta-final  { --globe-w: min(980px, 120vw); }
    .cta-globe  { width: min(980px, 120vw); opacity: 0.48; }
    .cta-final::after { display: none; }
    .cta-spine-ring { opacity: 0.70; }
    .cta-orbit-pulse { opacity: 0.70; }
    .cta-globe-fill { filter: blur(6px); }
  }
  @media (max-width: 640px) {
    .cta-final  { --globe-w: min(780px, 138vw); }
    .cta-globe  { width: min(780px, 138vw); opacity: 0.42; }
    .cta-spine-ring { opacity: 0.60; }
    .cta-orbit-pulse { opacity: 0.55; }
    .cta-globe-fill { filter: blur(5px); }
  }
  @media (max-width: 420px) {
    .cta-final  { --globe-w: min(620px, 148vw); }
    .cta-globe  { width: min(620px, 148vw); opacity: 0.36; }
    .cta-spine-ring { opacity: 0.55; }
    .cta-orbit-pulse { opacity: 0.45; }
    .cta-globe-fill { filter: blur(4px); }
  }

  /* Accessibilité : on coupe les animations si l'utilisateur a demandé
     une motion réduite. Le globe reste visible mais statique. */
  @media (prefers-reduced-motion: reduce) {
    .ctaG-wire,
    .ctaG-acc--eq,
    .ctaG-acc--n20,
    .ctaG-acc--s20 {
      animation: none;
    }
  }

  /* ================================
     FOOTER
     ================================ */
  footer {
    padding: 64px 0 32px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-elev-1);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
  }
  .footer-brand .logo-img {
    height: 32px;
    width: auto;
    aspect-ratio: 1530 / 482;
    display: block;
    margin-bottom: 16px;
    image-rendering: high-quality;
    image-rendering: smooth;
    -ms-interpolation-mode: bicubic;
  }
  .footer-brand p {
    color: var(--text-tertiary);
    font-size: 13px;
    max-width: 260px;
    line-height: 1.55;
  }
  .footer-col h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 14px;
    letter-spacing: -0.015em;
  }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .footer-col a {
    font-size: 13px;
    color: var(--text-tertiary);
    transition: color 140ms ease;
  }
  .footer-col a:hover { color: var(--text-primary); }

  .footer-contact {
    font-size: 13px;
    color: var(--text-tertiary);
    line-height: 1.65;
  }
  .footer-contact strong { color: var(--text-primary); font-weight: 600; }

  .footer-bottom {
    padding-top: 28px; border-top: 1px solid var(--line-1);
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 18px;
    font-size: 12px; color: var(--text-3);
  }
  .footer-copyright { justify-self: start; }
  .footer-legal { grid-area: 1 / 3; justify-self: end; text-align: right; }
  .footer-legal a { color: var(--text-2); text-decoration: none; transition: color 180ms ease; }
  .footer-legal a:hover { color: var(--text-1); }
  .footer-bottom .footer-social { grid-area: 1 / 2; justify-self: center; }
  @media (max-width: 640px) {
    .footer-bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .footer-copyright, .footer-legal, .footer-bottom .footer-social { justify-self: center; }
  }
  .footer-bottom a:hover { color: var(--text-primary); }
  .footer-social { display: flex; gap: 8px; }
  .footer-social a {
    width: 32px; height: 32px;
    border: 1px solid var(--border-default);
    border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    transition: color 140ms ease, border-color 140ms ease;
  }
  .footer-social a:hover { color: var(--text-primary); border-color: var(--border-strong); }

  /* ================================
     ANIMATIONS
     ================================ */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal.delay-1 { transition-delay: 70ms; }
  .reveal.delay-2 { transition-delay: 140ms; }
  .reveal.delay-3 { transition-delay: 210ms; }
  .reveal.delay-4 { transition-delay: 280ms; }
  .reveal.delay-5 { transition-delay: 350ms; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
  }

  /* ================================
     RESPONSIVE
     ================================ */
  @media (max-width: 1100px) {
    .showcase-body { grid-template-columns: 200px 1fr; gap: 36px; padding: 36px 28px 44px; }
    .pole-cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 900px) {
    .chiffres-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
    .chiffre { padding: 16px 12px 0 0; }

    .clients-trust { margin-top: 40px; padding-top: 28px; }
    .clients-marquee { gap: 22px; background-position: 0 45px, 0 93px; }
    .clients-row__item { height: 26px; margin: 0 26px; }
    .clients-row__item img { max-width: 108px; opacity: 0.5; }

    .pole-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }

    .showcase-body { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; }
    .sphere-wrap { max-width: 180px; margin: 0 auto; }

  }
  @media (max-width: 560px) {
    .hero { padding: 110px 0 56px; }
    .hero-cta .btn { width: 100%; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .pole-grid { grid-template-columns: repeat(2, 1fr); }
  }
  /* ============================================================
     NAV MENU v3 — Antimetal-like : 3 colonnes.
     Zone gauche "Expertises" (2 sous-colonnes : 3 + 4 items) avec
     icones aux couleurs JCD ; zone droite "Decouvrir" monochrome
     blanc/gris (Assistance, Contact, Carrieres). Sous-items
     Informatique : accordeon inline maitrise.
     ============================================================ */
  #nav-expertises-panel.nav-panel { width: min(600px, calc(100vw - 32px)); }
  #nav-expertises-panel .nav-panel__shell {
    padding: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
  }

  .nm-zone {
    display: flex;
    flex-direction: column;
    padding: 6px 4px 6px 6px;
    min-width: 0;
  }

  .nm-eyebrow {
    display: block;
    padding: 6px 10px 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.42);
    text-transform: uppercase;
  }

  /* Grille 2 sous-colonnes pour les expertises */
  .nm-zone--expertises .nm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 4px;
    align-items: start;
  }

  .nm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; min-width: 0; }
  .nm-group { position: relative; display: flex; flex-direction: column; }

  .nm-item {
    --nm-c: rgba(255, 255, 255, 0.65);
    --nm-c-soft: rgba(255, 255, 255, 0.06);
    --nm-c-soft-2: rgba(255, 255, 255, 0.14);
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    color: rgba(244, 244, 244, 0.78);
    text-decoration: none;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    isolation: isolate;
    transition:
      background-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
      color 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nm-item:hover,
  .nm-item:focus-visible,
  .nm-group[data-expanded="true"] > .nm-item {
    background-color: rgba(255, 255, 255, 0.04);
    color: #f4f4f4;
    outline: none;
  }
  .nm-item:focus-visible { box-shadow: inset 0 0 0 1px rgba(46, 114, 186, 0.45); }

  /* Couleurs par expertise — applique uniquement dans la zone Expertises */
  .nm-zone--expertises .nm-item[data-c="info"]       { --nm-c: #2E72BA; --nm-c-soft: rgba(46, 114, 186, 0.13); --nm-c-soft-2: rgba(46, 114, 186, 0.28); }
  .nm-zone--expertises .nm-item[data-c="service"]    { --nm-c: #E51D29; --nm-c-soft: rgba(229, 29, 41, 0.12);  --nm-c-soft-2: rgba(229, 29, 41, 0.26); }
  .nm-zone--expertises .nm-item[data-c="dev"]        { --nm-c: #F9D605; --nm-c-soft: rgba(249, 214, 5, 0.13);  --nm-c-soft-2: rgba(249, 214, 5, 0.30); }
  .nm-zone--expertises .nm-item[data-c="print"]      { --nm-c: #F3941D; --nm-c-soft: rgba(243, 148, 29, 0.12); --nm-c-soft-2: rgba(243, 148, 29, 0.26); }
  .nm-zone--expertises .nm-item[data-c="telecom"]    { --nm-c: #B063AC; --nm-c-soft: rgba(176, 99, 172, 0.14); --nm-c-soft-2: rgba(176, 99, 172, 0.28); }
  .nm-zone--expertises .nm-item[data-c="formation"]  { --nm-c: #8EC041; --nm-c-soft: rgba(142, 192, 65, 0.13); --nm-c-soft-2: rgba(142, 192, 65, 0.27); }
  .nm-zone--expertises .nm-item[data-c="agencement"] { --nm-c: #A78D75; --nm-c-soft: rgba(167, 141, 117, 0.15); --nm-c-soft-2: rgba(167, 141, 117, 0.30); }

  /* Zone Decouvrir : monochrome blanc/gris, palette neutre */

  /* Tuile icone */
  .nm-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nm-c-soft);
    border: 1px solid var(--nm-c-soft-2);
    border-radius: 9px;
    color: var(--nm-c);
    transition:
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
      background 320ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nm-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nm-item:hover .nm-icon,
  .nm-item:focus-visible .nm-icon,
  .nm-item.is-current .nm-icon,
  .nm-group[data-expanded="true"] > .nm-item .nm-icon {
    background: var(--nm-c-soft-2);
    border-color: var(--nm-c-soft-2);
    box-shadow:
      inset 0 0 0 1px var(--nm-c-soft-2);
  }
  .nm-item:hover .nm-icon svg,
  .nm-item:focus-visible .nm-icon svg,
  .nm-group[data-expanded="true"] > .nm-item .nm-icon svg {
    transform: rotate(-6deg) scale(1.12);
  }
  /* Decouvrir : pas de glow colore (palette neutre) */

  .nm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .nm-title {
    font-size: 13.5px;
    font-weight: 500;
    color: #f4f4f4;
    letter-spacing: -0.005em;
    line-height: 1.15;
  }
  .nm-sub-label {
    font-size: 12px;
    font-weight: 400;
    color: rgba(244, 244, 244, 0.45);
    letter-spacing: -0.003em;
    line-height: 1.3;
    transition: color 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nm-item:hover .nm-sub-label,
  .nm-item:focus-visible .nm-sub-label,
  .nm-group[data-expanded="true"] > .nm-item .nm-sub-label { color: rgba(244, 244, 244, 0.65); }

  /* Accordeon : sous-items d'Informatique */
  .nm-sub {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-3px);
    transition:
      grid-template-rows 360ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nm-group[data-expanded="true"] .nm-sub {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
    transition:
      grid-template-rows 420ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 320ms cubic-bezier(0.22, 1, 0.36, 1) 60ms,
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nm-sub-wrap { overflow: hidden; min-height: 0; }
  .nm-sub-list {
    list-style: none;
    margin: 0;
    padding: 4px 10px 8px 58px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    position: relative;
  }
  .nm-sub-list::before {
    content: "";
    position: absolute;
    top: 6px; bottom: 10px; left: 28px;
    width: 1px;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.08) 60%,
      rgba(255, 255, 255, 0.04) 100%);
    opacity: 0;
    transform-origin: top center;
    transform: scaleY(0.55);
    transition:
      opacity 280ms cubic-bezier(0.22, 1, 0.36, 1) 80ms,
      transform 380ms cubic-bezier(0.22, 1, 0.36, 1) 80ms;
  }
  .nm-group[data-expanded="true"] .nm-sub-list::before {
    opacity: 1;
    transform: scaleY(1);
  }
  .nm-sub-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 10px 0 14px;
    color: rgba(244, 244, 244, 0.55);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: -0.003em;
    line-height: 1;
    border-radius: 6px;
    opacity: 0;
    transform: translateX(-4px);
    transition:
      background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
      color 200ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nm-group[data-expanded="true"] .nm-sub-item { opacity: 1; transform: translateX(0); }
  .nm-group[data-expanded="true"] .nm-sub-item:nth-child(1) { transition-delay: 0ms, 0ms, 100ms, 100ms; }
  .nm-group[data-expanded="true"] .nm-sub-item:nth-child(2) { transition-delay: 0ms, 0ms, 160ms, 160ms; }
  .nm-group[data-expanded="true"] .nm-sub-item:nth-child(3) { transition-delay: 0ms, 0ms, 220ms, 220ms; }
  .nm-group[data-expanded="true"] .nm-sub-item:nth-child(4) { transition-delay: 0ms, 0ms, 280ms, 280ms; }
  .nm-sub-item::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nm-c, currentColor);
    opacity: 0;
    transition:
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nm-sub-item:hover,
  .nm-sub-item:focus-visible {
    color: #f4f4f4;
    background-color: rgba(255, 255, 255, 0.04);
    outline: none;
  }
  .nm-sub-item:hover::before,
  .nm-sub-item:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .nm-sub-item:focus-visible { box-shadow: inset 0 0 0 1px rgba(46, 114, 186, 0.40); }

  /* ── Sous-items Informatique : icônes distinctives par domaine ──────────
     (surcharge : remplace la pastille générique par une icône dédiée) */
  .nm-sub-list { padding-left: 16px; }
  .nm-sub-list::before { display: none; }
  .nm-sub-item {
    height: 34px;
    padding: 0 10px;
    gap: 11px;
    color: rgba(244, 244, 244, 0.58);
  }
  .nm-sub-item::before { display: none; }
  .nm-sub-tx { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nm-sub-ic {
    flex: 0 0 auto;
    width: 27px; height: 27px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px;
    color: rgba(46, 114, 186, 0.9);
    background: rgba(46, 114, 186, 0.09);
    border: 1px solid rgba(46, 114, 186, 0.18);
    transition:
      color 280ms cubic-bezier(0.22, 1, 0.36, 1),
      background 280ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 280ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nm-sub-ic svg { width: 15px; height: 15px; display: block; }
  .nm-sub-item:hover .nm-sub-ic,
  .nm-sub-item:focus-visible .nm-sub-ic,
  .nm-sub-item.is-current .nm-sub-ic {
    color: #6aa6e0;
    background: rgba(46, 114, 186, 0.17);
    border-color: rgba(46, 114, 186, 0.36);
    transform: scale(1.06) rotate(-4deg);
  }
  .nm-sub-item.is-current { color: #f4f4f4; background-color: rgba(46, 114, 186, 0.10); }
  @media (prefers-reduced-motion: reduce) {
    .nm-sub-ic { transition-duration: 80ms; }
    .nm-sub-item:hover .nm-sub-ic, .nm-sub-item:focus-visible .nm-sub-ic { transform: none; }
  }

  @media (max-width: 820px) {
    #nav-expertises-panel.nav-panel { width: calc(100vw - 24px); }
    #nav-expertises-panel .nav-panel__shell {
      grid-template-columns: 1fr;
      padding: 6px;
      border-radius: 14px;
    }
    .nm-zone--expertises .nm-grid { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nm-icon, .nm-icon svg, .nm-sub, .nm-sub-item, .nm-sub-list::before,
    .nm-item, .nm-sub-label {
      transition-duration: 80ms !important;
    }
  }

/* ==================================================================
   Ex-bloc inline <style id="jcd-mpolish-css"> - externalise le 2026-08-07
   ================================================================== */

@media (max-width:820px){
  /* Lisibilite : gris muets remontes au seuil WCAG AA sur fond sombre (#0a0a0a) */
  :root{ --text-3:#9a9a9a; --text-4:#8a8a8a; }
  /* Tap targets plus genereux sur les surfaces tappables principales */
  .footer-link{ display:inline-flex; align-items:center; min-height:40px; }
  .ct-level{ min-height:38px; }
  /* Heros animes coupes sur mobile : le canvas WebGL est masque, le fallback statique reste */
  canvas#heroMesh, canvas.hero-mesh{ display:none !important; }
}
/* Catalogue formation : toolbar empilee + chips filtrables en scroll + cartes pleine largeur */
@media (max-width:640px){
  .cat-toolbar{ top:70px; }
  .cat-toolbar-shell{ flex-direction:column; align-items:stretch; gap:9px; }
  .ct-search{ flex:1 1 auto; min-width:0; width:100%; }
  .ct-levels{ display:flex; width:100%; min-width:0; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:6px; padding-bottom:2px; scrollbar-width:none; }
  .ct-levels::-webkit-scrollbar{ display:none; }
  .ct-level{ flex:0 0 auto; }
  .fcat-grid{ grid-template-columns:1fr !important; }
}