@charset "UTF-8";

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

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

  :root {
    --bg: #0a0a0a;
    --bg-1: #101010;
    --bg-2: #141414;
    --bg-3: #1a1a1a;

    --text-1: #f4f4f4;
    --text-2: #b8b8b8;
    --text-3: #9a9a9a;
    --text-4: #6e6e6e;

    --line-1: rgba(255, 255, 255, 0.06);
    --line-2: rgba(255, 255, 255, 0.09);
    --line-3: rgba(255, 255, 255, 0.16);

    /* Accent — Pôle Informatique (bleu JCD) */
    --accent: #2E72BA;
    --accent-rgb: 46, 114, 186;
    --accent-hi: #5290cb;
    --accent-soft: rgba(46, 114, 186, 0.10);
    --accent-line: rgba(46, 114, 186, 0.22);
    --accent-deep: #1e5a94;

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

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --font-serif: "Instrument Serif", "Tiempos Text", Georgia, "Times New Roman", serif;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Fond garanti dès le premier paint (anti-flash entre pages). Smooth
     scroll réservé aux navigations intra-page après chargement (html.is-loaded) :
     l'arrivée sur une ancre et la restauration de scroll restent instantanées. */
  html { background: #0a0a0a; color-scheme: dark; scroll-behavior: auto; }
  html.is-loaded { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--text-1);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  body::before {
    content: ""; position: fixed; inset: 0;
    pointer-events: none; z-index: 1; opacity: 0.018;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' 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-1);
  }
  h1 p, h2 p, h3 p, h4 p {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
  }
  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; }
  ::selection { background: var(--accent); color: #fff; }

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

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; height: 36px; padding: 0 16px;
    border-radius: 8px;
    font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em;
    transition: all 180ms var(--ease-out);
    border: 1px solid transparent; white-space: nowrap;
  }
  .btn-primary { background: var(--text-1); color: #0a0a0a; }
  .btn-primary:hover { background: #fff; transform: translateY(-1px); }

  .btn-cta {
    display: inline-flex; align-items: center; gap: 10px;
    height: 44px; padding: 0 22px; border-radius: 10px;
    font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
    transition: all 200ms var(--ease-out);
    border: 1px solid transparent;
  }
  .btn-cta--primary { background: var(--text-1); color: #0a0a0a; }
  .btn-cta--primary:hover { background: #fff; transform: translateY(-1px); }
  .btn-cta--ghost { background: transparent; color: var(--text-1); border-color: var(--line-3); }
  .btn-cta--ghost:hover { border-color: var(--text-2); background: rgba(255,255,255,0.03); transform: translateY(-1px); }
  .btn-cta-arrow { display: inline-flex; width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
  .btn-cta:hover .btn-cta-arrow { transform: translateX(3px); }

    /* ================================================================
     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);
    /* Masque large unifié avec la sub-nav : bords adoucis à 9%, plateau
       opaque 9→91% — navbar + rail forment une seule bande continue. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, 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);
    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-2);
    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-1);
    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-1);
    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-2);
    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-1);
    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-1);
  }

  .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-3);
    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-1);
    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(--accent);
    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; }
  }

  /* Reveal */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal.delay-1 { transition-delay: 60ms; }
  .reveal.delay-2 { transition-delay: 120ms; }
  .reveal.delay-3 { transition-delay: 180ms; }
  .reveal.delay-4 { transition-delay: 240ms; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; transform: none; opacity: 1; }
  }

  /* Hero */
  .print-hero {
    position: relative;
    min-height: 100vh;
    padding: clamp(120px, 14vh, 160px) 0 80px;
    display: flex; align-items: center;
    overflow: hidden;
  }
  .print-hero::before {
    content: "";
    position: absolute;
    inset: -10% -10% auto -10%;
    height: 760px;
    background:
      radial-gradient(38% 50% at 14% 24%, rgba(46, 114, 186, 0.07) 0%, transparent 60%),
      radial-gradient(36% 56% at 42% 22%, rgba(46, 114, 186, 0.06) 0%, transparent 60%),
      radial-gradient(40% 52% at 72% 28%, rgba(46, 114, 186, 0.05) 0%, transparent 60%),
      radial-gradient(30% 48% at 94% 36%, rgba(46, 114, 186, 0.04) 0%, transparent 60%);
    pointer-events: none; z-index: 0;
  }
  .print-hero > * { position: relative; z-index: 1; }

  .breadcrumb {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 36px;
  }
  .breadcrumb a { color: var(--text-2); transition: color 160ms ease; }
  .breadcrumb a:hover { color: var(--text-1); }
  .breadcrumb-sep { width: 11px; height: 11px; color: var(--text-4); }
  .breadcrumb-current { color: var(--accent-hi); }

  .hero-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 4px 12px 4px 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-size: 12px; color: var(--text-2);
    margin-bottom: 28px;
    transition: background 160ms ease, border-color 160ms ease;
    font-weight: 500;
  }
  .hero-badge:hover { background: rgba(255,255,255,0.07); border-color: var(--line-3); }
  .hero-badge-tag {
    display: inline-block; padding: 2px 9px;
    background: var(--accent-soft); color: var(--accent-hi);
    border-radius: 999px;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
  }

  .hero-title {
    font-size: clamp(34px, 5.27vw, 65px);
    line-height: 1.02; letter-spacing: -0.035em;
    margin: 18px 0 22px;
    font-weight: 600; max-width: 18ch;
    color: var(--text-1);
  }
  .hero-title em {
    background: linear-gradient(120deg,
      rgba(82, 144, 203, 0.95) 0%,
      rgba(46, 114, 186, 0.92) 50%,
      rgba(30, 90, 148, 0.85) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero-sub {
    max-width: 560px; margin-bottom: 36px;
    font-size: 16px; line-height: 1.55;
    color: var(--text-2);
    letter-spacing: -0.005em;
  }
  .hero-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
  }

  /* "Bientôt" — section coming-soon */
  .coming-soon {
    padding: clamp(80px, 10vw, 140px) 0;
    border-top: 1px solid var(--line-1);
    position: relative;
  }
  .cs-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    display: flex; flex-direction: column;
    gap: 28px; align-items: center;
  }
  .cs-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 500;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.18em;
  }
  .cs-eyebrow::before {
    content: ""; width: 16px; height: 1px;
    background: var(--accent);
  }
  .cs-title {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 600;
    line-height: 1.08; letter-spacing: -0.03em;
    color: var(--text-1);
  }
  .cs-title em {
    font-family: var(--font-serif);
    font-style: italic; font-weight: 400;
    color: var(--accent);
  }
  .cs-text {
    font-size: 16px; line-height: 1.6;
    color: var(--text-2);
    max-width: 540px;
  }
  .cs-progress {
    margin-top: 8px;
    display: flex; gap: 18px;
    padding-top: 24px;
    border-top: 1px solid var(--line-1);
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    flex-wrap: wrap; justify-content: center;
  }
  .cs-progress em { color: var(--accent-hi); }
  .cs-actions {
    display: inline-flex; gap: 12px; flex-wrap: wrap;
    justify-content: center; margin-top: 4px;
  }

  /* Footer */
  footer {
    padding: 100px 0 40px;
    border-top: 1px solid var(--line-1);
    background: var(--bg);
    color: var(--text-2);
    position: relative; z-index: 2;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(28px, 3vw, 48px);
    margin-bottom: 60px;
  }
  @media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } }
  .footer-brand .logo-img { height: 32px; width: auto; margin-bottom: 18px; }
  .footer-brand p { font-size: 13.5px; color: var(--text-3); line-height: 1.6; max-width: 280px; }
  .footer-col h4 {
    font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.14em; font-weight: 600;
    color: var(--text-3); margin-bottom: 18px;
    font-family: var(--font-mono);
  }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-col a { color: var(--text-2); font-size: 13.5px; transition: color 160ms ease; }
  .footer-col a:hover { color: var(--text-1); }
  .footer-col a.is-current { color: var(--accent-hi); }
  .footer-contact { font-size: 13px; color: var(--text-2); line-height: 1.65; }
  .footer-contact strong { color: var(--text-1); font-weight: 500; }
  .footer-contact a { color: var(--text-2); }
  .footer-contact a:hover { color: var(--accent-hi); }
  .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 { color: var(--text-3); transition: color 160ms ease; }
  .footer-bottom a:hover { color: var(--text-1); }
  .footer-social { display: inline-flex; gap: 14px; align-items: center; }
  .footer-social a {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line-2);
    border-radius: 6px;
    transition: border-color 180ms ease, color 180ms ease;
  }
  .footer-social a:hover { border-color: var(--line-3); color: var(--text-1); }
  /* ============================================================
     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;
    }
  }

  /* ================================================================
     SUB-NAV INFORMATIQUE — rail sticky permanent, ancré sous le navbar.
     Présent sur les pages de l'écosystème Informatique : permet de
     passer d'un domaine à l'autre (libellés complets). Page active =
     bleu JCD. Scroll horizontal masqué si dépassement (fade latéral).
     Même langage "pill" que le navbar (conformité design system).
     ================================================================ */
  .info-subnav {
    position: fixed;
    top: 80px;
    left: 0; right: 0;
    z-index: 99;
    height: 54px;
    display: flex;
    align-items: stretch;
    pointer-events: none;
  }
  .info-subnav::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);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    pointer-events: none; z-index: -1;
  }
  .info-subnav::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 24%, rgba(255,255,255,0.10) 76%, transparent 100%);
    pointer-events: none; z-index: -1;
  }
  .info-subnav__inner {
    pointer-events: auto;
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
  }
  .info-subnav__inner::-webkit-scrollbar { display: none; height: 0; width: 0; }

  .info-subnav__home {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 13px 0 11px;
    border-radius: 999px;
    font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em;
    color: var(--text-2);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    white-space: nowrap;
    scroll-snap-align: start;
    transition: color 220ms var(--ease-out), background 220ms var(--ease-out), border-color 220ms var(--ease-out);
  }
  .info-subnav__home svg { width: 13px; height: 13px; opacity: 0.85; flex: 0 0 auto; }
  .info-subnav__home:hover { color: var(--text-1); background: rgba(255,255,255,0.05); border-color: var(--line-3); }
  .info-subnav__home.is-active {
    color: var(--accent-hi);
    background: var(--accent-soft);
    border-color: var(--accent-line);
  }

  .info-subnav__sep {
    flex: 0 0 auto;
    width: 1px; height: 20px;
    background: var(--line-2);
    margin: 0 6px;
  }

  .info-subnav__list {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 2px;
    list-style: none; margin: 0; padding: 0;
  }
  .info-subnav__link {
    position: relative;
    display: inline-flex; align-items: center;
    height: 34px; padding: 0 14px;
    border-radius: 8px;
    font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
    color: var(--text-2);
    white-space: nowrap;
    scroll-snap-align: center;
    transition: color 220ms var(--ease-out), background 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
  }
  .info-subnav__link:hover { color: var(--text-1); background: rgba(255, 255, 255, 0.045); }
  .info-subnav__link.is-active {
    color: var(--accent-hi);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent-line);
  }
  .info-subnav__link:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(46, 114, 186, 0.45); }

  /* ── Rail Informatique : icônes de section + hovers premium + indicateur     actif qui change d'une page à l'autre (View Transitions) ──────────── */
  @view-transition { navigation: auto; }
  /* Fond sombre garanti sous l'overlay de transition (anti-flash blanc si la VT bascule en navigation classique). */
  ::view-transition { background-color: #0a0a0a; }

  .info-subnav__link { gap: 9px; }
  .info-subnav__ic {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0.6;
    transition: opacity 240ms var(--ease-out), transform 420ms var(--ease-out);
  }
  .info-subnav__ic svg { width: 16px; height: 16px; display: block; }
  .info-subnav__link:hover .info-subnav__ic { opacity: 1; transform: translateY(-1px); }
  .info-subnav__link.is-active .info-subnav__ic { opacity: 1; }
  /* Hover plus soigné : fond légèrement plus présent + fine arête interne */
  .info-subnav__link:hover { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }

  /* ── Vue d'ensemble = icône seule + libellés complets + icônes bleues au survol ──
     Libère l'espace horizontal pour afficher toutes les sous-sections en entier. */
  .info-subnav__home { width: 34px; padding: 0; gap: 0; justify-content: center; }
  .info-subnav__home svg { width: 15px; height: 15px; opacity: 1; }
  .info-subnav__link { padding: 0 11px; }
  .info-subnav__list { gap: 1px; }
  .info-subnav__link:hover .info-subnav__ic,
  .info-subnav__link.is-active .info-subnav__ic { color: var(--accent-hi); opacity: 1; }

  /* Chrome persistant pendant la transition de page :
     Navbar et rail : snapshots strictement figés (zéro cross-fade → zéro
     scintillement du verre dépoli pendant la transition). */
  #navbar { view-transition-name: jcd-navbar; }
  .info-subnav { view-transition-name: jcd-subnav; }
  ::view-transition-group(jcd-navbar), ::view-transition-group(jcd-subnav),
  ::view-transition-image-pair(jcd-navbar), ::view-transition-image-pair(jcd-subnav),
  ::view-transition-new(jcd-navbar), ::view-transition-new(jcd-subnav) { animation: none; }
  ::view-transition-old(jcd-navbar), ::view-transition-old(jcd-subnav) { display: none; }
  /* Fond de page : fondu bref et feutré */
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: 260ms;
    animation-timing-function: var(--ease-out);
  }
  ::view-transition-group(root) {
    animation-duration: 260ms;
    animation-timing-function: var(--ease-out);
  }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    .info-subnav__ic { transition-duration: 80ms; }
  }

  @media (max-width: 820px) {
    .info-subnav { top: 70px; height: 50px; }
    .info-subnav__sep { margin: 0 4px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .info-subnav__home, .info-subnav__link { transition-duration: 80ms; }
  }

  /* Décalage du hero pour dégager navbar (80) + rail (54). */
  .print-hero { padding-top: calc(clamp(120px, 14vh, 160px) + 56px); }

  /* ================================================================
     HUB INFORMATIQUE — accès (cards 4 domaines, display repris de la
     home transposé aux tokens des pages pôle) + cybersécurité (cyan)
     + partenaires + pourquoi JCD + CTA maison.
     ================================================================ */
  .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); }
  .eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--accent); }

  /* --- Intro hub --- */
  .hub-intro { position: relative; overflow: hidden; padding: calc(clamp(120px, 14vh, 160px) + 64px) 0 clamp(30px, 4vw, 46px); }
  .hub-intro::before {
    content: ""; position: absolute; inset: -10% -10% auto -10%; height: 560px; z-index: 0; pointer-events: none;
    /* glow bleu uni (réf. hero index) — remplace l'ancien gradient à deux foyers */
    background: radial-gradient(60% 68% at 50% 12%, rgba(46,114,186,0.24) 0%, rgba(46,114,186,0.10) 40%, transparent 68%);
  }
  .hub-intro > .container { position: relative; z-index: 1; }
  .hub-intro h1 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; color: var(--text-1); max-width: 18ch; margin: 18px 0 18px; }
  .hub-intro h1 em { background: linear-gradient(120deg, rgba(82,144,203,0.95) 0%, rgba(46,114,186,0.92) 50%, rgba(30,90,148,0.85) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .hub-intro p { font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 580px; }

  /* --- Cards des 4 domaines (display home, tokens pôle, bleu unifié) --- */
  .poles { padding: clamp(8px, 1.5vw, 16px) 0 clamp(72px, 9vw, 110px); }
  .pole-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  @media (max-width: 760px) { .pole-cards { grid-template-columns: 1fr; } }
  .pole-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--line-2); border-radius: 12px; padding: 22px;
    --cc: 46, 114, 186;
    transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .pole-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--cc), 0.14), transparent 40%); transition: opacity 280ms ease; }
  .pole-card:hover { 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; }

  /* Fade des cards aux extrémités gauche/droite de la section (réf. index) :
     la couche visuelle (fond + bordure) est déléguée à ::after masqué pour que
     le bord externe se fonde dans le background ; le contenu (texte/icône) reste net.
     Désactivé en mono-colonne (mobile) où il n'y a pas d'extrémité gauche/droite. */
  @media (min-width: 761px) {
    .pole-card { background: transparent; border: 0 none; box-shadow: none; isolation: isolate; }
    .pole-card::after {
      content: ""; position: absolute; inset: 0; border-radius: 12px; z-index: -1; pointer-events: none;
      background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
      border: 1px solid var(--line-2);
      transition: border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    /* le fondu s'applique aussi au spotlight curseur (::before) : le glow se
       dissout au même bord externe que le fond, pas de halo net hors-carte. */
    .pole-card:nth-of-type(odd)::before,
    .pole-card:nth-of-type(odd)::after {
      -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 15%, #000 30%, #000 100%);
              mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 15%, #000 30%, #000 100%);
    }
    .pole-card:nth-of-type(even)::before,
    .pole-card:nth-of-type(even)::after {
      -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,0.45) 15%, #000 30%, #000 100%);
              mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,0.45) 15%, #000 30%, #000 100%);
    }
    /* hover : on conserve le lift + le spotlight curseur ; la bordure d'accent passe
       sur ::after (donc masquée/fondue), sans halo rectangulaire qui casserait le fondu. */
    .pole-card:hover { border-color: transparent; box-shadow: none; }
    .pole-card:hover::after { border-color: rgba(255,255,255,0.16); }
  }
  .pole-card-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
  .pole-card-icon {
    width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.04); border: 1px solid var(--line-2); color: var(--text-1);
    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-icon svg { width: 19px; height: 19px; }
  .pole-card:hover .pole-card-icon { color: var(--accent); border-color: rgba(var(--cc), 0.32); background: rgba(var(--cc), 0.08); transform: translateY(-4px) scale(1.07); box-shadow: 0 8px 18px rgba(var(--cc), 0.30), 0 2px 6px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08); }
  .pole-card-num { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); font-weight: 500; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
  .pole-card-tag { display: inline-flex; align-items: center; height: 19px; padding: 0 9px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-hi); }
  .pole-card h3 { position: relative; z-index: 1; font-size: 18px; color: var(--text-1); margin-bottom: 8px; font-weight: 600; letter-spacing: -0.015em; }
  .pole-card p { position: relative; z-index: 1; font-size: 13.5px; color: var(--text-2); line-height: 1.55; flex: 1 1 auto; }

  /* --- Section réutilisable : eyebrow + titre + sous-titre --- */
  .hub-sechead { max-width: 720px; margin-bottom: clamp(36px, 4.5vw, 52px); }
  .hub-sechead .eyebrow { margin-bottom: 18px; }
  .hub-sechead h2 { font-size: clamp(27px, 3.3vw, 42px); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; color: var(--text-1); }
  .hub-sechead h2 em { font-style: normal; font-weight: 600; color: var(--accent-hi); }
  .hub-sechead p { font-size: 15.5px; line-height: 1.6; color: var(--text-2); max-width: 620px; margin-top: 14px; }

  /* --- Cybersécurité (CYAN, transversale) --- */
  .cyber {
    position: relative; overflow: hidden; border-top: 1px solid var(--line-1);
    padding: clamp(72px, 9vw, 120px) 0;
    scroll-margin-top: 150px;   /* dégage navbar (80) + rail (54) pour l'ancre #cybersecurite */
    --accent: #2BA6C7; --accent-hi: #4FC9E2; --accent-soft: rgba(79,201,226,0.10); --accent-line: rgba(79,201,226,0.26);
    background: radial-gradient(80% 120% at 100% 0%, rgba(79,201,226,0.07) 0%, transparent 52%), var(--bg-1);
  }
  /* --- Schéma « Bouclier fine-line » : tracé horloger mat + reveal orchestré (draw-in) + 3 piliers --- */
  .cyber-diagram { position: relative; display: flex; flex-direction: column; align-items: center; }

  /* Bouclier fine-line : double liseré + remplissage quasi imperceptible, entrée douce */
  .cyber-shield { position: relative; display: flex; justify-content: center; padding-top: 6px; }
  .cyber-shield::before {   /* unique lueur résiduelle, large et très douce (pas de blur, pas de halo dur) */
    content: ""; position: absolute; left: 50%; top: 46%; width: 300px; height: 300px; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(79,201,226,0.10) 0%, rgba(79,201,226,0.03) 44%, transparent 68%);
    z-index: 0; pointer-events: none;
  }
  .cyber-shield-art {
    position: relative; width: 118px; height: 123px; z-index: 1;
    opacity: 0; transform: translateY(10px) scale(0.97);
    transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-expo);
  }
  .cyber-diagram.visible .cyber-shield-art { opacity: 1; transform: none; }
  .cyber-shield-art::after {   /* nœud d'origine des branches : anneau fin mat, à la pointe du bouclier */
    content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px;
    transform: translate(-50%, 50%); border-radius: 50%;
    background: var(--bg-1); border: 1.5px solid var(--accent-hi);
    opacity: 0; transition: opacity 500ms ease 450ms;
    z-index: 2;
  }
  .cyber-diagram.visible .cyber-shield-art::after { opacity: 1; }
  /* Anneaux orbitaux hairline, statiques, fondu lent à l'entrée */
  .cyber-orbits {
    position: absolute; left: 50%; top: 46%; width: clamp(250px, 26vw, 300px);
    transform: translate(-50%, -50%); z-index: 0; pointer-events: none; overflow: visible;
    opacity: 0; transition: opacity 1400ms ease 300ms;
  }
  .cyber-diagram.visible .cyber-orbits { opacity: 1; }
  .cyber-shield-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .cyber-shield-fill { fill: url(#cyberFill); }
  .cyber-shield-rim { fill: none; stroke: url(#cyberRim); stroke-width: 1.4; }
  .cyber-shield-rim2 { fill: none; stroke: rgba(79,201,226,0.15); stroke-width: 1; }
  .cyber-shield-check {
    fill: none; stroke: var(--accent-hi); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 100; stroke-dashoffset: 100;
  }
  .cyber-diagram.visible .cyber-shield-check { animation: cyber-check 800ms cubic-bezier(0.65, 0, 0.35, 1) 400ms forwards; }
  @keyframes cyber-check { to { stroke-dashoffset: 0; } }

  /* Branches hairline (bouclier → piliers), tracées au reveal */
  .cyber-branches { width: 100%; height: clamp(96px, 11vw, 130px); margin-top: -2px; display: block; }
  .cyber-wire {
    /* PAS de vector-effect:non-scaling-stroke ici : combiné à pathLength +
       dash, Chromium mesure le dash le long du path ÉCRAN (étiré ×~1.1 par
       preserveAspectRatio=none) → trait coupé ~9% avant la card en large. */
    fill: none; stroke: url(#cyberWire); stroke-width: 1.2;
    stroke-dasharray: 1000; stroke-dashoffset: 1000;
    opacity: 0.65; transition: opacity 360ms ease;
  }
  .cyber-diagram.visible .cyber-wire--1 { animation: cyber-draw 1300ms cubic-bezier(0.33, 1, 0.68, 1) 600ms forwards; }
  .cyber-diagram.visible .cyber-wire--2 { animation: cyber-draw 1300ms cubic-bezier(0.33, 1, 0.68, 1) 720ms forwards; }
  .cyber-diagram.visible .cyber-wire--3 { animation: cyber-draw 1300ms cubic-bezier(0.33, 1, 0.68, 1) 840ms forwards; }
  @keyframes cyber-draw { to { stroke-dashoffset: 0; } }

  /* 3 piliers — cartes hairline mates, cascade au reveal, hover discret (bordure + fond, pas de lift) */
  .cyber-piliers { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 20px); margin-top: 0; }
  @media (max-width: 820px) { .cyber-piliers { grid-template-columns: 1fr; margin-top: 22px; } .cyber-branches { display: none; } .cyber-shield-art::after { display: none; } }
  .cyber-pilier {
    position: relative;
    display: flex; flex-direction: column; gap: 12px; min-height: 200px;
    padding: clamp(24px, 2.4vw, 30px);
    border-radius: 16px; border: 1px solid var(--line-2);
    background: linear-gradient(180deg, #171717 0%, #141414 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 20px 44px -34px rgba(0,0,0,0.7);
    opacity: 0;
    transition: border-color 360ms ease, box-shadow 360ms ease;
  }
  .cyber-diagram.visible .cyber-pilier { animation: cyber-rise 900ms var(--ease-expo) forwards; }
  .cyber-diagram.visible .cyber-pilier:nth-child(1) { animation-delay: 700ms; }
  .cyber-diagram.visible .cyber-pilier:nth-child(2) { animation-delay: 820ms; }
  .cyber-diagram.visible .cyber-pilier:nth-child(3) { animation-delay: 940ms; }
  @keyframes cyber-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .cyber-pilier:hover {
    border-color: rgba(79,201,226,0.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 24px 52px -34px rgba(0,0,0,0.8);
  }
  .cyber-node {   /* jonction branche → carte : anneau fin mat, se remplit au survol */
    position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; transform: translateX(-50%); border-radius: 50%;
    background: var(--bg-1); border: 1.5px solid var(--accent-hi); z-index: 2;
    opacity: 0; transition: background-color 300ms ease;
  }
  .cyber-diagram.visible .cyber-node { animation: cyber-fade 500ms ease forwards; }
  .cyber-diagram.visible .cyber-pilier:nth-child(1) .cyber-node { animation-delay: 1250ms; }
  .cyber-diagram.visible .cyber-pilier:nth-child(2) .cyber-node { animation-delay: 1370ms; }
  .cyber-diagram.visible .cyber-pilier:nth-child(3) .cyber-node { animation-delay: 1490ms; }
  @keyframes cyber-fade { to { opacity: 1; } }
  @media (max-width: 820px) { .cyber-node { display: none; } }
  /* Survol pilier → son nœud se remplit, sa branche s'affirme (écho mat, sans glow) */
  .cyber-pilier:hover .cyber-node { background: var(--accent-hi); }
  .cyber-diagram:has(.cyber-pilier:nth-child(1):hover) .cyber-wire--1,
  .cyber-diagram:has(.cyber-pilier:nth-child(2):hover) .cyber-wire--2,
  .cyber-diagram:has(.cyber-pilier:nth-child(3):hover) .cyber-wire--3 { opacity: 1; }
  .cyber-pilier-ic {
    width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; color: var(--accent-hi);
    border: 1px solid rgba(79,201,226,0.22);
    background: rgba(79,201,226,0.05);
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color 300ms ease, background-color 300ms ease;
  }
  .cyber-pilier:hover .cyber-pilier-ic { border-color: rgba(79,201,226,0.42); background: rgba(79,201,226,0.09); }
  .cyber-pilier-ic svg { width: 20px; height: 20px; }
  .cyber-pilier h3 { font-size: 16px; font-weight: 600; color: var(--text-1); letter-spacing: -0.015em; }
  .cyber-pilier p { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }

  /* CTA du pilier "Formation & sensibilisation" -> catalogue formations cyber.
     Hover par gap+couleur (aucun transform : evite le conflit avec cyber-rise forwards). */
  .cyber-pilier-link {
    margin-top: auto; padding-top: 14px; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 500; color: var(--accent-hi);
    text-decoration: none; letter-spacing: -0.005em;
    transition: gap 200ms ease, color 200ms ease;
  }
  .cyber-pilier-link svg { width: 15px; height: 15px; flex: 0 0 auto; }
  .cyber-pilier-link:hover, .cyber-pilier-link:focus-visible { gap: 11px; color: var(--text-1); }

  @media (prefers-reduced-motion: reduce) {
    .cyber-shield-art, .cyber-orbits, .cyber-shield-art::after { opacity: 1; transform: none; transition: none; }
    .cyber-shield-check, .cyber-wire { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
    .cyber-pilier, .cyber-node { opacity: 1; animation: none; }
  }
  /* Bandeau : séparateur éditorial hairline, sans encadré ni fond teinté */
  .cyber-band {
    margin-top: clamp(40px, 5vw, 60px); display: flex; align-items: baseline; justify-content: space-between;
    gap: 18px 40px; flex-wrap: wrap;
    padding: clamp(24px, 3vw, 32px) 2px 0; border-top: 1px solid var(--line-1);
  }
  .cyber-stats { display: inline-flex; align-items: baseline; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
  .cyber-stat { display: inline-flex; align-items: baseline; gap: 7px; }
  .cyber-stat-num { color: var(--text-1); font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; }
  .cyber-stat + .cyber-stat::before { content: "·"; margin: 0 12px; color: var(--text-4); }
  .cyber-partner { display: inline-flex; align-items: center; gap: 14px; }
  .cyber-partner-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
  .cyber-partner-slash { color: var(--accent-hi); font-weight: 500; }
  .cyber-partner img { width: auto; height: 27px; display: block; opacity: 0.85; }
  .cyber-audit { font-size: 14px; color: var(--text-2); line-height: 1.5; }
  .cyber-audit strong { color: var(--accent-hi); font-weight: 600; }
  a.cyber-audit { position: relative; text-decoration: none; cursor: pointer; transition: color 200ms ease; }
  a.cyber-audit:hover, a.cyber-audit:focus-visible { color: var(--text-1); }
  a.cyber-audit::after { content: "\2197"; margin-left: 6px; font-size: 12px; color: var(--accent-hi); opacity: 0; display: inline-block; transition: opacity 200ms ease, transform 200ms ease; }
  a.cyber-audit:hover::after, a.cyber-audit:focus-visible::after { opacity: 1; transform: translate(2px, -2px); }
  .cyber-audit-path { position: absolute; top: calc(100% + 9px); right: 0; z-index: 3; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-hi); white-space: nowrap; padding: 5px 9px; border: 1px solid var(--accent-line); border-radius: 6px; background: rgba(10,10,10,0.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transform: translateY(-5px); transition: opacity 220ms ease, transform 220ms ease; pointer-events: none; }
  a.cyber-audit:hover .cyber-audit-path, a.cyber-audit:focus-visible .cyber-audit-path { opacity: 1; transform: none; }

  /* --- Partenaires & technologies (global) --- */
  .partners { border-top: 1px solid var(--line-1); padding: clamp(64px, 8vw, 100px) 0; background: var(--bg); }
  /* ============================================================
     ÉCOSYSTÈME — Pinwheel 4 quadrants + tracés « réseau » premium.
     Disposition décalée (moulin) : Collab(6) haut-G · Cloud(2) haut-D
     · Postes(4) bas-G · Infra(4) bas-D. Séparateurs = lignes fines
     bleues fondues + nœuds de jonction qui pulsent (cf. .net-*).
     ============================================================ */
  .eco-net { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; gap: 0; }
  .q-collab { grid-area: 1 / 1 / 2 / 9;  }
  .q-cloud  { grid-area: 1 / 9 / 2 / 13; }
  .q-postes { grid-area: 2 / 1 / 3 / 6;  }
  .q-infra  { grid-area: 2 / 6 / 3 / 13; }

  .eco-quad { position: relative; min-width: 0; padding: clamp(14px, 1.9vw, 28px) clamp(16px, 2vw, 32px); }
  .eco-quad-label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px 2px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
  .eco-quad-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.22), 0 0 7px 1px rgba(var(--accent-rgb),0.5); }
  .eco-quad-grid { display: grid; }
  .g-3x2 { grid-template-columns: repeat(3, 1fr); }
  .g-2x2 { grid-template-columns: repeat(2, 1fr); }
  .g-1x2 { grid-template-columns: 1fr; }

  .eco-tile {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: clamp(74px, 7.6vw, 90px); padding: 12px 14px;
    overflow: hidden; transition: background 260ms var(--ease-out);
  }
  .eco-tile::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0; transform: scaleX(0.35); transform-origin: center; transition: opacity 300ms ease, transform 380ms var(--ease-out); }
  .eco-tile:hover { background: rgba(255,255,255,0.022); }
  .eco-tile:hover::after { opacity: 0.55; transform: scaleX(1); }

  /* Logos : silhouettes blanches normalisées (cf. _normalize_logos.py) — taille
     et remplissage homogènes ; gris au repos, blanc franc au survol. */
  .eco-tile-img { width: auto; height: auto; max-width: min(150px, 88%); max-height: 26px; object-fit: contain; opacity: 0.7; transition: opacity 300ms ease, transform 320ms var(--ease-out); }
  .eco-tile:hover .eco-tile-img { opacity: 1; transform: translateY(-8px); }
  .eco-tile[data-brand="hp"] .eco-tile-img,
  .eco-tile[data-brand="terra"] .eco-tile-img,
  .eco-tile[data-brand="m365"] .eco-tile-img,
  .eco-tile[data-brand="sennheiser"] .eco-tile-img { max-height: 34px; }

  .eco-tile-name { font-size: clamp(12.5px, 1.3vw, 15px); font-weight: 500; letter-spacing: -0.01em; color: var(--text-3); line-height: 1.2; text-align: center; transition: color 300ms ease; }
  .eco-tile:hover .eco-tile-name { color: var(--text-1); }
  /* Nom de marque révélé au survol : caption mono sous le logo (qui remonte) */
  .eco-tile.has-logo .eco-tile-name {
    position: absolute; left: 0; right: 0; bottom: 8px;
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2);
    white-space: nowrap; opacity: 0; transform: translateY(5px); pointer-events: none;
    transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
  }
  .eco-tile.has-logo:hover .eco-tile-name { opacity: 1; transform: translateY(0); }

  /* ---- Tracés « réseau » : overlay décoratif dans les gouttières du pinwheel ---- */
  .eco-net-traces { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
  .net-line { position: absolute; }
  .net-v-top { left: 66.667%; top: 0; height: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(to bottom, rgba(var(--accent-rgb),0) 0%, rgba(var(--accent-rgb),0) 9%, rgba(var(--accent-rgb),0.48) 62%, rgba(var(--accent-rgb),0.7) 100%); }
  /* Verticale basse : ne s'évanouit plus — se prolonge en bleu clair jusqu'au
     bas de l'eco-net pour passer le relais au tronc de « Pourquoi JCD ». */
  .net-v-bot { left: 41.667%; top: 50%; height: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(to bottom, rgba(var(--accent-rgb),0.7) 0%, rgba(var(--accent-rgb),0.48) 38%, rgba(var(--accent-rgb),0.30) 100%); }
  .net-h-mid { left: 41.667%; top: 50%; width: 58.333%; height: 2px; transform: translateY(-50%); background: linear-gradient(to right, rgba(var(--accent-rgb),0.7) 0%, rgba(var(--accent-rgb),0.46) 52%, rgba(var(--accent-rgb),0.1) 86%, rgba(var(--accent-rgb),0) 100%); }
  /* Nœuds/dots du schéma retirés — on conserve uniquement les tracés fondus. */

  /* Responsive : sous 880px on empile les 4 blocs et on masque les tracés */
  @media (max-width: 880px) {
    .eco-net { display: flex; flex-direction: column; }
    .eco-net-traces { display: none; }
    .eco-quad { padding: clamp(8px,2vw,16px) 0; }
    .eco-quad + .eco-quad { border-top: 1px solid var(--line-1); padding-top: clamp(20px,4vw,30px); }
    .g-1x2 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 460px) { .g-3x2 { grid-template-columns: repeat(2, 1fr); } }

  /* --- Pourquoi JCD — arbre de distribution -------------------------------
     Le tronc « réseau » de l'écosystème (net-v-bot, à 41.667%) franchit la
     frontière de section et se prolonge ICI en tronc, qui se ramifie en
     4 nœuds-raisons. Le raccord est pixel-aligné : top du tronc = -2× le
     padding de section (= bas de l'eco-net), même abscisse 41.667% mesurée
     sur des conteneurs à la largeur du contenu. Tracé qui se dessine au
     scroll (transforms GPU uniquement), figé sous prefers-reduced-motion. --- */
  /* Seuil fondu : la section ouvre sur la teinte de fin de l'Écosystème
     (--bg) puis glisse vers son propre fond (--bg-1) — le tronc traverse
     une frontière de teinte invisible. PAS d'overflow:hidden ici : le
     tronc (.wt-trunk) remonte au-dessus du bord de section. */
  .why {
    position: relative;
    padding: clamp(64px, 8vw, 100px) 0;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-1) clamp(160px, 20vw, 280px), var(--bg-1) 100%);
  }
  .why::before {   /* hairline de frontière, conservée comme repère */
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: var(--line-1); pointer-events: none;
  }
  .why > .container { overflow: visible; }
  .why-tree { position: relative; --wt-gap: clamp(16px, 2vw, 30px); }
  .why-tree::before {   /* la hairline « s'ouvre » au passage du tronc : couvercle
     fondu aligné sur 41.667% du container (même référentiel que .wt-trunk),
     remonté à y=0 de la section (top = -padding). */
    content: ""; position: absolute; left: 41.667%; top: calc(-1 * clamp(64px, 8vw, 100px));
    transform: translateX(-50%); width: clamp(90px, 11vw, 140px); height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--bg) 24%, var(--bg) 76%, transparent 100%);
    pointer-events: none;
  }

  /* Corridor du tronc : prolonge la verticale de l'écosystème (41.667%) jusqu'au
     distributeur. Le titre devient la légende, en bas (réf. croquis). */
  .wt-head { position: relative; min-height: clamp(160px, 18vw, 216px); --wt-elbow: clamp(46px, 5.5vw, 64px); }

  /* Tronc : descend à 41.667% (raccord écosystème), puis un COUDE le recentre à 50 %
     pour une distribution symétrique. 3 segments dessinés en cascade. */
  .wt-trunk {
    position: absolute; left: 41.667%; width: 2px;
    top: calc(-2 * clamp(64px, 8vw, 100px)); bottom: var(--wt-elbow);
    transform: translateX(-50%) scaleY(0); transform-origin: top center;
    background: linear-gradient(to bottom,
      rgba(var(--accent-rgb),0.30) 0%,
      rgba(var(--accent-rgb),0.30) 64%,
      rgba(var(--accent-rgb),0.46) 100%);
    transition: transform 760ms var(--ease-out);
  }
  .wt-elbow-h {
    position: absolute; left: 41.667%; width: 8.333%; height: 2px; bottom: var(--wt-elbow);
    transform: scaleX(0); transform-origin: left center;
    background: linear-gradient(to right, rgba(var(--accent-rgb),0.42) 0%, rgba(var(--accent-rgb),0.50) 100%);
    transition: transform 300ms var(--ease-out); transition-delay: 600ms;
  }
  .wt-elbow-v {
    position: absolute; left: 50%; width: 2px; bottom: 0; height: var(--wt-elbow);
    transform: translateX(-50%) scaleY(0); transform-origin: top center;
    background: linear-gradient(to bottom, rgba(var(--accent-rgb),0.46) 0%, rgba(var(--accent-rgb),0.50) 100%);
    transition: transform 300ms var(--ease-out); transition-delay: 820ms;
  }
  .wt-trunk-node {
    position: absolute; left: 50%; bottom: 0; width: 11px; height: 11px;
    border-radius: 50%; opacity: 0; transform: translate(-50%, 50%) scale(0.4);
    background: radial-gradient(circle at 50% 42%, var(--accent-hi) 0%, var(--accent) 58%, var(--accent-deep) 100%);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb),0.40), 0 0 10px 2px rgba(var(--accent-rgb),0.45);
    transition: opacity 360ms var(--ease-out), transform 480ms var(--ease-out);
    transition-delay: 1000ms;
  }

  /* Corps : distributeur horizontal → 4 cartes-raisons suspendues à hauteurs
     décalées. Chaque branche relie le distributeur (y=0) à sa carte ; sa longueur
     = --hang (propre à chaque carte), ce qui crée le décalage « mobile suspendu ». */
  .wt-body { position: relative; }
  .wt-body::before {   /* lueur de distribution : nappe radiale douce centrée
     sur le nœud distributeur (x=50%, y=0 du corps), derrière les tracés.
     Invisible au départ : elle « s'allume » dans la cascade du schéma,
     au moment où le distributeur se déploie. */
    content: ""; position: absolute; left: 50%; top: 0;
    width: min(900px, 110%); height: clamp(320px, 40vw, 520px);
    background: radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb),0.10) 0%, rgba(var(--accent-rgb),0.04) 46%, transparent 74%);
    pointer-events: none;
    opacity: 0; transform: translate(-50%, -50%) scale(0.92);
    transition: opacity 1100ms var(--ease-out), transform 1300ms var(--ease-out);
    transition-delay: 1060ms;
  }
  .wt-dist {
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    transform: scaleX(0); transform-origin: 50% 50%;
    background: linear-gradient(to right,
      rgba(var(--accent-rgb),0) 0%, rgba(var(--accent-rgb),0.42) 9%,
      rgba(var(--accent-rgb),0.42) 91%, rgba(var(--accent-rgb),0) 100%);
    transition: transform 660ms var(--ease-out); transition-delay: 1060ms;
  }
  .wt-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wt-gap); align-items: start; }
  .wt-item { position: relative; padding-top: var(--hang); }
  /* Symétrie « pic central / suspension » : cartes extérieures (1,4) plus basses,
     cartes centrales (2,3) plus hautes — mirror-symétrique autour du centre. */
  .wt-item:nth-child(1), .wt-item:nth-child(4) { --hang: clamp(118px, 12.5vw, 162px); }
  .wt-item:nth-child(2), .wt-item:nth-child(3) { --hang: clamp(70px, 7.8vw, 98px); }
  .wt-item::after {   /* racine fantôme : le réseau se prolonge en filigrane sous chaque
     carte. Se dessine vers le bas en fin de cascade, après l'arrivée des cartes. */
    content: ""; position: absolute; left: 50%; top: calc(100% + 10px);
    width: 1px; height: clamp(56px, 7vw, 92px);
    background: linear-gradient(to bottom, rgba(var(--accent-rgb),0.22) 0%, rgba(var(--accent-rgb),0.07) 55%, transparent 100%);
    pointer-events: none;
    opacity: 0; transform: translateX(-50%) scaleY(0); transform-origin: top center;
    transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
  }

  .wt-branch {
    position: absolute; left: 50%; top: 0; width: 2px; height: var(--hang);
    transform: translateX(-50%) scaleY(0); transform-origin: top center;
    background: linear-gradient(to bottom, rgba(var(--accent-rgb),0.42) 0%, rgba(var(--accent-rgb),0.24) 100%);
    transition: transform 480ms var(--ease-out);
  }
  .wt-node {
    position: absolute; left: 50%; top: var(--hang); width: 12px; height: 12px;
    border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.4);
    background: radial-gradient(circle at 50% 42%, var(--accent-hi) 0%, var(--accent) 60%, var(--accent-deep) 100%);
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.08), 0 0 9px 1px rgba(var(--accent-rgb),0.5);
    transition: opacity 360ms var(--ease-out), transform 480ms var(--ease-expo), box-shadow 300ms var(--ease-out);
  }

  /* Carte suspendue (premium maison) */
  .wt-card-box {
    position: relative; isolation: isolate; border-radius: 14px;
    padding: clamp(16px, 1.6vw, 22px) clamp(16px, 1.6vw, 22px) clamp(28px, 3.2vw, 40px);
    background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
    border: 1px solid var(--line-2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 32px -24px rgba(0,0,0,0.85);
    opacity: 0; transform: translateY(12px);
    transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-expo), border-color 320ms var(--ease-out), box-shadow 460ms var(--ease-out);
  }
  /* Pied de carte dissous dans le fond (bottom-center) — voile couleur de section
     posé au-dessus du fond/bordure mais SOUS le contenu (z-index:-1) : le texte reste net. */
  .wt-card-box::after {
    content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none; border-radius: inherit;
    background: radial-gradient(80% 62% at 50% 104%,
      var(--bg-1) 0%, rgba(16,16,16,0.86) 30%, rgba(16,16,16,0.5) 54%, rgba(16,16,16,0.18) 72%, rgba(16,16,16,0) 84%);
  }
  .wt-num { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; color: var(--accent-hi); font-variant-numeric: tabular-nums; margin-bottom: 9px; }
  .wt-card-box h3 { font-size: clamp(14.5px, 1.4vw, 16.5px); font-weight: 600; color: var(--text-1); margin-bottom: 7px; letter-spacing: -0.015em; }
  .wt-card-box p { font-size: 13px; line-height: 1.55; color: var(--text-2); margin: 0; min-height: 4.65em; }

  /* Titre de section : en haut à gauche, comme les autres pôles (largeur bornée
     à 40% pour laisser passer le tronc qui descend à 41.667%). */
  .wt-head .hub-sechead { max-width: 40%; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }

  /* Cascade de tracé → cartes → légende, déclenchée par l'observer (.reveal → .visible). */
  .why-tree.reveal { opacity: 1; transform: none; transition: none; }
  .why-tree.visible .wt-trunk { transform: translateX(-50%) scaleY(1); }
  .why-tree.visible .wt-elbow-h { transform: scaleX(1); }
  .why-tree.visible .wt-elbow-v { transform: translateX(-50%) scaleY(1); }
  .why-tree.visible .wt-trunk-node { opacity: 1; transform: translate(-50%, 50%) scale(1); }
  .why-tree.visible .wt-dist { transform: scaleX(1); }
  .why-tree.visible .wt-branch { transform: translateX(-50%) scaleY(1); }
  .why-tree.visible .wt-node { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .why-tree.visible .wt-card-box { opacity: 1; transform: translateY(0); }
  .why-tree.visible .wt-head .hub-sechead { opacity: 1; transform: translateY(0); }
  /* fond : la lueur s'allume avec le distributeur, les racines se dessinent en clôture */
  .why-tree.visible .wt-body::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .why-tree.visible .wt-item::after { opacity: 1; transform: translateX(-50%) scaleY(1); }
  /* cascade symétrique : paire centrale (2,3) d'abord, puis paire extérieure (1,4). */
  .wt-item:nth-child(2) .wt-branch, .wt-item:nth-child(3) .wt-branch { transition-delay: 1180ms; }
  .wt-item:nth-child(1) .wt-branch, .wt-item:nth-child(4) .wt-branch { transition-delay: 1250ms; }
  .wt-item:nth-child(2) .wt-node, .wt-item:nth-child(3) .wt-node { transition-delay: 1380ms; }
  .wt-item:nth-child(1) .wt-node, .wt-item:nth-child(4) .wt-node { transition-delay: 1450ms; }
  .wt-item:nth-child(2) .wt-card-box, .wt-item:nth-child(3) .wt-card-box { transition-delay: 1460ms; }
  .wt-item:nth-child(1) .wt-card-box, .wt-item:nth-child(4) .wt-card-box { transition-delay: 1530ms; }
  .wt-item:nth-child(2)::after, .wt-item:nth-child(3)::after { transition-delay: 1560ms; }
  .wt-item:nth-child(1)::after, .wt-item:nth-child(4)::after { transition-delay: 1630ms; }

  /* Hover des cartes : lift + halo bleu + nœud qui s'intensifie (delay remis à 0
     pour ne pas hériter du retard de la cascade reveal). */
  .wt-item:hover .wt-card-box { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 20px 40px -22px rgba(0,0,0,0.7), 0 0 26px rgba(var(--accent-rgb),0.16); transition-delay: 0ms; }
  .wt-item:hover .wt-node { transform: translate(-50%, calc(-50% - 4px)) scale(1); transition-delay: 0ms; box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.14), 0 0 13px 2px rgba(var(--accent-rgb),0.75); }

  @media (prefers-reduced-motion: reduce) {
    .wt-trunk { transform: translateX(-50%) scaleY(1); transition: none; }
    .wt-elbow-h { transform: scaleX(1); transition: none; }
    .wt-elbow-v { transform: translateX(-50%) scaleY(1); transition: none; }
    .wt-branch { transform: translateX(-50%) scaleY(1); transition: none; }
    .wt-dist { transform: scaleX(1); transition: none; }
    .wt-trunk-node { opacity: 1; transform: translate(-50%, 50%) scale(1); transition: none; }
    .wt-node { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: none; }
    .wt-card-box { opacity: 1; transform: none; transition: none; }
    .wt-head .hub-sechead { opacity: 1; transform: none; transition: none; }
    .wt-body::before { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: none; }
    .wt-item::after { opacity: 1; transform: translateX(-50%) scaleY(1); transition: none; }
  }

  /* Responsive : sous 860px on retire le schéma (l'écosystème masque déjà ses
     tracés <880) ; titre pleine largeur en tête, cartes en grille simple dessous. */
  @media (max-width: 860px) {
    .wt-head { min-height: 0; }
    .wt-head .hub-sechead { max-width: none; margin: 0 0 clamp(28px, 5vw, 40px); }
    .wt-trunk, .wt-elbow-h, .wt-elbow-v, .wt-trunk-node, .wt-dist, .wt-branch, .wt-node,
    .why-tree::before, .wt-body::before, .wt-item::after { display: none; }
    .wt-items { grid-template-columns: repeat(2, 1fr); }
    .wt-item { padding-top: 0; }
    .wt-card-box { opacity: 1; transform: none; }
  }
  @media (max-width: 520px) {
    .wt-items { grid-template-columns: 1fr; }
  }

  /* --- CTA maison (commun aux pôles) --- */
  .cta-section { padding: clamp(40px, 5vw, 72px) 0; position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%); -webkit-mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 85%); mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 85%); }
  .cta-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 110% at 0% 50%, rgba(46,114,186,0.15) 0%, rgba(46,114,186,0.07) 28%, rgba(46,114,186,0.022) 52%, transparent 72%), linear-gradient(90deg, rgba(46,114,186,0.07) 0%, rgba(46,114,186,0.022) 18%, transparent 38%); }
  .cta-frame { position: relative; z-index: 2; padding: 0; }
  .cta-inner { position: relative; z-index: 2; display: flex; flex-direction: row; align-items: center; gap: clamp(20px, 3vw, 40px); max-width: 760px; margin: 0; }
  .cta-icon { flex-shrink: 0; width: clamp(106px, 13.5vw, 158px); height: auto; margin: 0; color: var(--accent); display: block; overflow: visible; }
  .cta-body { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; }
  .cta-title { font-size: clamp(24px, 3vw, 36px); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; color: var(--text-1); margin: 0 0 10px; }
  .cta-title em { font-style: normal; color: var(--accent); font-weight: 500; }
  .cta-sub { font-size: 14.5px; color: var(--text-2); line-height: 1.55; max-width: 540px; margin: 0 0 20px; letter-spacing: -0.005em; }
  .cta-actions { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: 18px; }
  .cta-actions-divider { width: 1px; height: 18px; background: var(--line-2); }
  .cta-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); font-family: var(--font-mono); letter-spacing: 0.04em; }
  .cta-phone-num { color: var(--text-1); font-weight: 500; border-bottom: 1px solid var(--line-3); transition: border-color 180ms ease, color 180ms ease; }
  .cta-phone-num:hover { color: var(--accent-hi); border-bottom-color: var(--accent); }
  @media (max-width: 640px) { .cta-inner { gap: 14px; } .cta-icon { width: clamp(82px, 22vw, 120px); } .cta-actions { gap: 14px; } }

/* ==================================================================
   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:#8f8f8f; --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; }
}

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

@media (max-width:820px){
  /* Le fondu de droite (mask desktop) effacait le texte et le bouton sur mobile -> on le retire */
  .cta-section{ -webkit-mask-image:none !important; mask-image:none !important; }
  /* Layout empile : icone en haut, contenu pleine largeur (au lieu de icone | texte comprime a droite) */
  .cta-inner{ flex-direction:column !important; align-items:flex-start !important; gap:15px !important; max-width:none !important; }
  .cta-icon{ width:clamp(52px,15vw,70px) !important; }
  .cta-body{ width:100%; }
  .cta-title,.cta-sub{ max-width:none !important; }
  /* separateur vertical bouton|telephone : sans objet une fois empile */
  .cta-actions-divider{ display:none !important; }
  .cta-actions{ gap:13px 16px !important; }
}

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

/* JCD - Transition de page pilotee en JS (pole Informatique).
   Un voile sombre couvre le dernier rendu avant navigation et le premier
   rendu apres : aucun cadre blanc ne peut apparaitre entre deux pages, meme
   si le navigateur saute la View Transition. On neutralise donc les View
   Transitions cross-document (la derniere regle @view-transition l'emporte)
   pour que le voile soit la seule transition. */
@view-transition { navigation: none; }
#jcd-pagefade {
  position: fixed; inset: 0; z-index: 2147483647;
  background: #0a0a0a; opacity: 0; pointer-events: none;
}
html.jcd-nav-in #jcd-pagefade { animation: jcd-pagefade-reveal 280ms var(--ease-out) both; }
@keyframes jcd-pagefade-reveal { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.jcd-nav-in #jcd-pagefade { animation-duration: 1ms; }
}

/* ==================================================================
   Vignettage baseline hero (hub) — version légère, le fond du
   hub-intro étant déjà sobre. Préserve la lisibilité de la
   baseline sur le dégradé bleuté. 2026-08-12.
   ================================================================== */
  .hub-intro h1 + p { position: relative; }
  .hub-intro h1 + p::before {
    content: "";
    position: absolute;
    inset: -56px -130px -60px -90px;
    background: radial-gradient(ellipse closest-side at center,
      rgba(10, 10, 10, 0.32),
      rgba(10, 10, 10, 0.16) 55%,
      rgba(10, 10, 10, 0) 100%);
    z-index: -1;
    pointer-events: none;
  }