:root {
      --bg: #050b18;
      --bg-alt: #0a1428;
      --surface: rgba(14, 26, 50, 0.72);
      --surface-solid: #0e1a32;
      --border: rgba(120, 160, 220, 0.16);
      --text: #e8eef8;
      --text-muted: #9aabc6;
      --accent: #c0392b;
      --accent-bright: #e8574a;
      --accent-glow: rgba(232, 87, 74, 0.45);
      --cyan: #5fc8ff;
      --radius: 16px;
      --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    }

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

    html, body {
      margin: 0;
      padding: 0;
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    body.modal-open { overflow: hidden; }

    a { color: inherit; }

    /* ---------- En-tete commun (identique sur toutes les vues) ---------- */
    .site-header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 50;
      height: 68px;
      background: #061a33;
      border-bottom: 1px solid rgba(120, 170, 230, 0.16);
      box-shadow: 0 8px 24px rgba(0, 8, 20, 0.28);
      font-family: var(--font);
    }

    .sh-inner {
      display: flex;
      align-items: center;
      gap: 16px;
      height: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 16px 0 20px;
    }

    .sh-brand {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      border-radius: 6px;
      text-decoration: none;
    }

    .logo img {
      display: block;
      height: 34px;
      width: auto;
    }

    .logo-fallback {
      display: none;
      font-size: 1.5rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      color: #fff;
    }

    .logo-fallback span { color: var(--accent-bright); }

    .logo.is-fallback img { display: none; }
    .logo.is-fallback .logo-fallback { display: inline; }

    .sh-tagline {
      display: none;
      max-width: 172px;
      padding-left: 14px;
      border-left: 1px solid rgba(150, 185, 230, 0.28);
      color: #b7c6dc;
      font-size: 12px;
      line-height: 1.3;
    }

    .sh-tagline em {
      color: #f0685c;
      font-style: normal;
    }

    .sh-actions {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-left: auto;
    }

    .sh-loc {
      display: none;
      align-items: center;
      gap: 8px;
      color: #8ea6c6;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .sh-loc::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #e8574a;
      box-shadow: 0 0 0 3px rgba(232, 87, 74, 0.18);
    }

    .sh-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 20px;
      border: 0;
      border-radius: 8px;
      background: #d9463a;
      color: #fff;
      font: inherit;
      font-size: 14.5px;
      font-weight: 600;
      line-height: 1.2;
      white-space: nowrap;
      cursor: pointer;
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .sh-cta:hover,
    .sh-cta:focus-visible {
      background: #e8574a;
      box-shadow: 0 0 18px var(--accent-glow);
    }

    .sh-actions .sh-cta { display: none; }

    .sh-burger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin-right: -4px;
      padding: 0;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #fff;
      cursor: pointer;
    }

    .sh-burger:hover { background: rgba(255, 255, 255, 0.06); }

    .sh-burger-box {
      position: relative;
      display: block;
      width: 22px;
      height: 16px;
    }

    .sh-burger-box span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background: currentColor;
      transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
    }

    .sh-burger-box span:nth-child(1) { top: 0; }
    .sh-burger-box span:nth-child(2) { top: 7px; }
    .sh-burger-box span:nth-child(3) { top: 14px; }

    .site-header.is-nav-open .sh-burger-box span:nth-child(1) { top: 7px; transform: rotate(45deg); }
    .site-header.is-nav-open .sh-burger-box span:nth-child(2) { opacity: 0; }
    .site-header.is-nav-open .sh-burger-box span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

    /* Mobile : panneau pleine largeur sous la barre */
    .sh-nav {
      position: fixed;
      top: 68px;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 6px 20px 32px;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: none;
      background: #061a33;
      visibility: hidden;
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }

    .sh-nav::-webkit-scrollbar { display: none; }

    .site-header.is-nav-open .sh-nav {
      visibility: visible;
      opacity: 1;
      transform: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    body.nav-open { overflow: hidden; }

    .sh-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .sh-list > li { border-bottom: 1px solid rgba(120, 170, 230, 0.12); }

    .sh-link {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 15px 4px;
      border: 0;
      background: none;
      color: #e8eef8;
      font: inherit;
      font-size: 17px;
      font-weight: 600;
      line-height: 1.3;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
    }

    .sh-link[aria-current] { color: #fff; }

    .sh-link[aria-current]::before {
      content: "";
      position: absolute;
      top: 50%;
      left: -20px;
      width: 3px;
      height: 22px;
      border-radius: 0 3px 3px 0;
      background: #e8574a;
      transform: translateY(-50%);
    }

    .sh-caret {
      flex-shrink: 0;
      width: 12px;
      height: 12px;
      margin-left: 8px;
      transition: transform 0.2s ease;
    }

    .sh-item.is-open .sh-caret { transform: rotate(180deg); }

    .sh-menu {
      display: none;
      padding: 0 0 12px;
    }

    .sh-item.is-open .sh-menu { display: block; }

    .sh-menu ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .sh-menu a {
      display: block;
      padding: 10px 12px;
      border-radius: 8px;
      color: #c5d3e8;
      font-size: 15.5px;
      line-height: 1.35;
      text-decoration: none;
    }

    .sh-menu a strong {
      display: block;
      font-weight: 500;
    }

    .sh-menu a span { display: none; }

    .sh-menu a:hover,
    .sh-menu a:focus-visible {
      background: rgba(255, 255, 255, 0.06);
      color: #fff;
    }

    .sh-menu a[aria-current="page"] {
      background: rgba(232, 87, 74, 0.12);
      box-shadow: inset 2px 0 0 #e8574a;
      color: #fff;
    }

    .sh-list > li.sh-mobile-extra {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 16px;
      padding-top: 24px;
      border-bottom: 0;
    }

    .sh-mobile-extra .sh-cta {
      width: 100%;
      padding: 14px 20px;
      font-size: 16px;
    }

    .sh-mobile-extra .sh-loc {
      display: inline-flex;
      justify-content: center;
    }

    .site-header :focus-visible,
    .site-footer :focus-visible {
      outline: 2px solid #5fc8ff;
      outline-offset: 2px;
    }

    @media (min-width: 1000px) {
      .sh-inner {
        gap: 18px;
        padding: 0 28px;
      }

      .sh-burger,
      .sh-list > li.sh-mobile-extra { display: none; }

      .sh-actions { margin-left: 0; }
      .sh-actions .sh-cta { display: inline-flex; }

      .sh-nav {
        position: static;
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
        padding: 0;
        overflow: visible;
        background: none;
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: none;
      }

      .sh-list {
        display: flex;
        align-items: center;
        gap: 2px;
      }

      .sh-list > li {
        position: relative;
        border-bottom: 0;
      }

      .sh-link {
        width: auto;
        padding: 8px 11px;
        border-radius: 8px;
        color: #c5d3e8;
        font-size: 14.5px;
        font-weight: 500;
        white-space: nowrap;
        transition: color 0.15s ease, background 0.15s ease;
      }

      .sh-link:hover,
      .sh-item.is-open > .sh-link {
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
      }

      .sh-link[aria-current]::before { display: none; }

      .sh-link[aria-current]::after {
        content: "";
        position: absolute;
        right: 11px;
        bottom: -14px;
        left: 11px;
        height: 2px;
        border-radius: 2px;
        background: #e8574a;
      }

      .sh-caret {
        width: 10px;
        height: 10px;
        margin-left: 6px;
      }

      .sh-menu {
        position: absolute;
        top: calc(100% + 15px);
        left: -8px;
        display: block;
        width: 320px;
        padding: 8px;
        border: 1px solid rgba(120, 170, 230, 0.2);
        border-radius: 12px;
        background: #0a2242;
        box-shadow: 0 18px 40px rgba(0, 8, 20, 0.45);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
      }

      /* pont invisible entre le bouton et le menu (survol continu) */
      .sh-menu::before {
        content: "";
        position: absolute;
        top: -17px;
        right: 0;
        left: 0;
        height: 17px;
      }

      .sh-item.is-open .sh-menu {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity 0.16s ease, transform 0.16s ease;
      }

      .sh-menu li.sh-menu-hub {
        margin-bottom: 6px;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(120, 170, 230, 0.14);
      }

      .sh-menu a strong {
        color: #f1f5fb;
        font-size: 14.5px;
        font-weight: 600;
      }

      .sh-menu a span {
        display: block;
        margin-top: 2px;
        color: #8ea6c6;
        font-size: 12.5px;
        line-height: 1.4;
      }
    }

    @media (min-width: 1240px) {
      .sh-tagline { display: block; }
    }

    @media (min-width: 1380px) {
      .sh-actions .sh-loc { display: inline-flex; }
    }

    /* ---------- Hero ---------- */
    .hero {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background:
        radial-gradient(ellipse 120% 55% at 50% 118%, #0f2a52 0%, rgba(8, 20, 44, 0.45) 40%, transparent 70%),
        linear-gradient(180deg, #02050d 0%, #050b18 45%, #081631 100%);
    }

    #network-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    .hero::after {
      /* vignette for text legibility */
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(ellipse 60% 45% at 50% 50%, rgba(2, 6, 16, 0.55) 0%, transparent 75%),
                  linear-gradient(to bottom, transparent 88%, var(--bg) 100%);
    }

    [hidden] { display: none !important; }

    .section-head .highlight,
    .hosting-head .highlight {
      background: linear-gradient(90deg, var(--accent-bright), #ff8a65);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 999px;
      border: none;
      background: linear-gradient(135deg, var(--accent), var(--accent-bright));
      color: #fff;
      font: inherit;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 8px 30px var(--accent-glow);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .btn:hover,
    .btn:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 12px 38px var(--accent-glow);
    }


    /* ---------- Services ---------- */
    .services {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 110px 20px 70px;
    }

    .section-head-wrap {
      position: relative;
      max-width: 1180px;
      margin: 0 auto;
    }

    .section-head {
      max-width: 700px;
      margin: 0 auto 40px;
      text-align: center;
    }

    .section-kicker {
      display: block;
      margin-bottom: 12px;
      color: #ffb3aa;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    .section-head h1 {
      margin: 0 0 12px;
      font-size: clamp(1.6rem, 4.5vw, 2.4rem);
      font-weight: 750;
      line-height: 1.2;
      text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
    }

    .section-tag {
      display: none;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      font-size: 0.7rem;
      font-weight: 600;
      line-height: 1.8;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .section-tag::after {
      content: "";
      display: block;
      width: 28px;
      height: 2px;
      margin-top: 10px;
      background: var(--accent-bright);
    }

    .section-tag--left { left: 0; text-align: left; }
    .section-tag--right { right: 0; text-align: right; }
    .section-tag--right::after { margin-left: auto; }

    .section-head p {
      margin: 0;
      font-size: clamp(1rem, 2.6vw, 1.2rem);
      color: var(--text-muted);
      text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
    }

    .cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px;
      max-width: 1180px;
      margin: 0 auto;
    }

    .card {
      position: relative;
      isolation: isolate;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: linear-gradient(160deg, rgba(20, 36, 68, 0.85), rgba(10, 18, 36, 0.9));
      color: var(--text);
      text-decoration: none;
      font: inherit;
      text-align: left;
      cursor: pointer;
      overflow: hidden;
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 3px;
      z-index: 2;
      background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    .card:hover,
    .card:focus-visible {
      transform: translateY(-6px);
      border-color: rgba(232, 87, 74, 0.5);
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(192, 57, 43, 0.18);
      outline: none;
    }

    .card:hover::before,
    .card:focus-visible::before { opacity: 1; }

    .card-icon {
      display: grid;
      place-items: center;
      width: 58px;
      height: 58px;
      margin-bottom: 20px;
      border-radius: 14px;
      background: rgba(192, 57, 43, 0.14);
      border: 1px solid rgba(232, 87, 74, 0.35);
      color: var(--accent-bright);
    }

    .card-icon svg { width: 30px; height: 30px; }

    .card-media {
      position: relative;
      display: block;
      width: 100%;
      aspect-ratio: 421 / 242;
      height: auto;
      overflow: hidden;
      border: 0;
      border-radius: var(--radius) var(--radius) 0 0;
      background: transparent;
    }

    .card-media::after {
      /* blends the illustration into the card body */
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(to bottom, transparent 88%, rgba(10, 18, 36, 0.35) 100%);
    }

    .card-illus {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }

    .card:hover .card-illus,
    .card:focus-visible .card-illus { transform: scale(1.04); }

    .card-tags {
      position: absolute;
      top: 16px;
      right: 18px;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 1px;
      color: var(--text);
      font-size: 0.62rem;
      font-weight: 600;
      line-height: 1.55;
      letter-spacing: 0.18em;
      text-align: right;
      text-transform: uppercase;
      text-shadow: 0 1px 6px rgba(2, 6, 16, 0.9);
      opacity: 0.85;
      pointer-events: none;
    }

    .card-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: flex-start;
      position: static;
      width: 100%;
      padding: 22px 24px 24px;
    }

    .card-rule {
      display: block;
      width: 24px;
      height: 2px;
      margin-bottom: 14px;
      border-radius: 2px;
      background: var(--accent-bright);
    }

    .card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
    }

    .card-arrow {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border: 1px solid var(--accent-bright);
      border-radius: 50%;
      background: transparent;
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .card:hover .card-arrow,
    .card:focus-visible .card-arrow {
      background: rgba(232, 87, 74, 0.15);
      box-shadow: 0 0 14px var(--accent-glow);
    }

    .card-num {
      position: absolute;
      right: 22px;
      bottom: 12px;
      color: var(--text);
      font-size: 3.2rem;
      font-weight: 200;
      line-height: 1;
      opacity: 0.14;
      pointer-events: none;
    }

    /* Discrete illustration motion (always on, prefers-reduced-motion is ignored) */
    @keyframes illusPulse {
      0%, 100% { opacity: 0.35; }
      50% { opacity: 1; }
    }

    @keyframes illusFlow {
      to { stroke-dashoffset: -48; }
    }

    .illus-pulse { animation: illusPulse 3.2s ease-in-out infinite; }
    .illus-pulse--late { animation-delay: 1.6s; }

    .illus-flow {
      stroke-dasharray: 3 9;
      animation: illusFlow 2.4s linear infinite;
    }

    .card h3, .card h2.card-title {
      margin: 0 0 10px;
      font-size: 1.3rem;
      font-weight: 700;
    }

    .card p {
      margin: 0 0 22px;
      color: var(--text-muted);
      font-size: 0.97rem;
    }

    .card-link {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--accent-bright);
      font-weight: 600;
      font-size: 0.93rem;
    }

    .card-link svg {
      width: 16px;
      height: 16px;
      transition: transform 0.2s ease;
    }

    .card:hover .card-link svg,
    .card:focus-visible .card-link svg { transform: translateX(3px); }


    /* ---------- Accueil : 8 domaines d'expertise (maquette client) ---------- */
    .services .section-head-wrap,
    .services .cards { max-width: 1400px; }

    .services .section-head {
      max-width: 740px;
      margin-bottom: 44px;
    }

    .services .section-kicker {
      color: #ff6f61;
      letter-spacing: 0.24em;
    }

    .services .section-head h1 {
      margin-bottom: 16px;
      font-size: clamp(1.85rem, 5.4vw, 3.25rem);
      line-height: 1.1;
      letter-spacing: -0.01em;
      text-wrap: balance;
    }

    .services .section-head p {
      max-width: 620px;
      margin: 0 auto;
      color: #dbe5f3;
      font-size: clamp(1rem, 2.2vw, 1.15rem);
      line-height: 1.5;
    }

    .services .lead-nw { white-space: nowrap; }

    .services .section-tag {
      display: none;
      color: #dbe5f3;
      font-size: 0.68rem;
      line-height: 1.75;
    }

    .services .section-tag--left { top: auto; bottom: 6px; transform: none; }
    .services .section-tag--right { top: 0; transform: none; }

    .services .cards { gap: 18px; }

    .cards .card-media--r1 { aspect-ratio: 668 / 306; }
    .cards .card-media--r2 { aspect-ratio: 682 / 264; }

    .card-media .card-tags {
      top: 50%;
      right: 12px;
      align-items: flex-start;
      gap: 3px;
      font-size: 0.56rem;
      letter-spacing: 0.1em;
      text-align: left;
      opacity: 0.95;
      transform: translateY(-50%);
    }

    .card-media .card-tags::after {
      content: "";
      width: 24px;
      height: 2px;
      margin-top: 6px;
      background: var(--accent-bright);
    }

    .services .card h3, .services .card h2.card-title {
      font-size: 1.3rem;
      line-height: 1.25;
    }

    .services .card p {
      margin-bottom: 18px;
      color: #bccadd;
      font-size: 0.96rem;
      line-height: 1.55;
    }

    .services .card-foot {
      margin-top: auto;
      padding-right: 64px;
    }

    .services .card-num {
      color: #a9c1e4;
      font-size: 2.9rem;
      opacity: 0.22;
    }

    @media (min-width: 640px) {
      .services .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    }

    @media (min-width: 1200px) {
      .services { padding-right: 24px; padding-left: 24px; }
      .services .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
      .services .section-tag { display: block; }
      .services .card-body { padding: 20px 20px 20px; }
      .services .card h3, .services .card h2.card-title { font-size: 1.22rem; }
      .services .card p { font-size: 0.93rem; }
      .services .card-link { gap: 10px; font-size: 0.9rem; }
      .services .card-arrow { width: 32px; height: 32px; }
      .services .card-foot { padding-right: 54px; }
      .services .card-num { right: 18px; font-size: 2.6rem; }
    }

    @media (min-width: 1400px) {
      .services .card-body { padding: 22px 24px 22px; }
      .services .card h3, .services .card h2.card-title { font-size: 1.32rem; }
      .services .card p { font-size: 0.96rem; }
    }

    /* ---------- En-tete : menu de droite (Entreprise) aligne a droite ; libelles compacts 1000-1239px ---------- */
    @media (min-width: 1000px) {
      .sh-item--end .sh-menu {
        right: -8px;
        left: auto;
        width: 280px;
      }
    }

    @media (min-width: 1000px) and (max-width: 1239.98px) {
      .sh-inner { gap: 12px; padding: 0 20px; }
      .sh-link { padding: 8px 8px; font-size: 14px; }
      .sh-link[aria-current]::after { right: 8px; left: 8px; }
    }

    /* ---------- Trust bar ---------- */
    .trust-bar {
      display: grid;
      grid-template-columns: 1fr;
      max-width: 1180px;
      margin: 56px auto 0;
      padding: 0;
      border-top: 1px solid var(--border);
      list-style: none;
    }

    .trust-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 20px 4px;
    }

    .trust-item + .trust-item { border-top: 1px solid var(--border); }

    .trust-icon {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border: 1px solid rgba(232, 87, 74, 0.35);
      border-radius: 50%;
      background: rgba(192, 57, 43, 0.14);
      color: var(--accent-bright);
    }

    .trust-icon svg { width: 20px; height: 20px; }

    .trust-text strong {
      display: block;
      color: #fff;
      font-size: 0.98rem;
      font-weight: 700;
    }

    .trust-text span {
      display: block;
      color: var(--text-muted);
      font-size: 0.88rem;
      line-height: 1.45;
    }

    /* ---------- Hosting view ---------- */
    .ic {
      display: block;
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .hosting-view {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: 96px 20px 70px;
    }

    .back-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 22px;
      color: var(--text-muted);
      font-size: 0.88rem;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .back-link:hover,
    .back-link:focus-visible { color: #fff; }

    .back-link .ic {
      width: 16px;
      height: 16px;
      transform: rotate(180deg);
    }

    .hosting-wrap {
      max-width: 1320px;
      margin: 0 auto;
    }

    .hosting-top { position: relative; }

    .hosting-head {
      max-width: 760px;
      margin: 0 auto 36px;
      text-align: center;
    }

    .eyebrow {
      display: inline-block;
      margin-bottom: 18px;
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid rgba(232, 87, 74, 0.45);
      background: rgba(192, 57, 43, 0.12);
      color: #ffb3aa;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .hosting-head h1 {
      margin: 0 0 14px;
      font-size: clamp(1.9rem, 6.4vw, 3.1rem);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.02em;
      text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
    }

    .hosting-head p {
      margin: 0;
      color: var(--text-muted);
      font-size: clamp(1rem, 2.6vw, 1.15rem);
      text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
    }

    .models {
      display: grid;
      grid-template-columns: 1fr;
      gap: 22px;
      max-width: 1320px;
      margin: 0 auto;
    }

    .model {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid rgba(80, 140, 255, 0.32);
      border-radius: var(--radius);
      background: linear-gradient(165deg, rgba(14, 28, 60, 0.92), rgba(7, 15, 33, 0.94));
      box-shadow: 0 0 40px rgba(40, 100, 255, 0.1), inset 0 0 0 1px rgba(80, 140, 255, 0.05);
    }

    .model-media {
      display: block;
      aspect-ratio: 657 / 314;
      overflow: hidden;
    }

    .model-media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .model-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 22px 20px 26px;
    }

    .model h2 {
      margin: 0 0 6px;
      font-size: clamp(1.35rem, 4.4vw, 1.7rem);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }

    .model-lead {
      margin: 0 0 20px;
      color: var(--text);
      opacity: 0.88;
    }

    .chips,
    .checks,
    .pillars-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .chips {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-bottom: 22px;
    }

    .chip {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      padding: 12px 12px;
      border: 1px solid rgba(80, 140, 255, 0.24);
      border-radius: 10px;
      background: rgba(10, 22, 48, 0.7);
      color: var(--text);
      font-size: 0.88rem;
      line-height: 1.25;
    }

    .chip .ic { color: var(--accent-bright); }

    .checks {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px 24px;
      margin-bottom: 26px;
    }

    .checks li {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.92rem;
      line-height: 1.35;
    }

    .checks .ic {
      width: 24px;
      height: 24px;
      color: var(--accent-bright);
    }

    .model-cta {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: auto;
      color: var(--accent-bright);
      font-weight: 700;
      text-decoration: none;
    }

    .model-cta .card-arrow {
      width: 46px;
      height: 46px;
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .model-cta .card-arrow .ic {
      width: 18px;
      height: 18px;
      stroke-width: 2;
    }

    .model-cta::after {
      content: "";
      flex: 0 0 48px;
      height: 2px;
      background: var(--accent-bright);
    }

    .model-cta:hover .card-arrow,
    .model-cta:focus-visible .card-arrow {
      background: rgba(232, 87, 74, 0.15);
      box-shadow: 0 0 14px var(--accent-glow);
    }

    .pillars {
      max-width: 1320px;
      margin: 26px auto 0;
      padding: 6px 16px 18px;
      border: 1px solid rgba(80, 140, 255, 0.22);
      border-radius: var(--radius);
      background: rgba(8, 18, 40, 0.6);
    }

    .pillars-list {
      display: grid;
      grid-template-columns: 1fr;
    }

    .pillar {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 18px 8px;
    }

    .pillar + .pillar { border-top: 1px solid var(--border); }

    .pillar .ic {
      width: 34px;
      height: 34px;
      color: var(--accent-bright);
    }

    .pillar strong {
      display: block;
      color: #fff;
      font-size: 1.05rem;
      font-weight: 700;
    }

    .pillar span {
      display: block;
      color: var(--text-muted);
      font-size: 0.9rem;
      line-height: 1.45;
    }

    .pillars-caption {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 6px 0 0;
      color: var(--text-muted);
      font-size: 0.66rem;
      letter-spacing: 0.22em;
      text-align: center;
      text-transform: uppercase;
    }

    .pillars-caption::before,
    .pillars-caption::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    /* ---------- Pied de page commun (identique sur toutes les vues) ---------- */
    .site-footer {
      position: relative;
      z-index: 2;
      border-top: 1px solid rgba(120, 170, 230, 0.18);
      background: #061a33;
      color: #9fb3cf;
      font-family: var(--font);
      font-size: 14.5px;
      line-height: 1.55;
    }

    .sf-inner {
      max-width: 1240px;
      margin: 0 auto;
      padding: 48px 20px 26px;
    }

    .sf-top {
      display: grid;
      gap: 36px;
    }

    .sf-logo {
      display: inline-flex;
      border-radius: 6px;
    }

    .sf-logo img {
      display: block;
      height: 40px;
      width: auto;
    }

    .sf-motto {
      margin: 16px 0 8px;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .sf-pitch {
      max-width: 36ch;
      margin: 0;
    }

    .sf-cols {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 30px 20px;
    }

    .sf-title {
      margin: 0 0 12px;
      color: #fff;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      line-height: 1.4;
      text-transform: uppercase;
    }

    .sf-title a {
      border-radius: 3px;
      color: inherit;
      text-decoration: none;
    }

    .sf-col ul {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .sf-col ul a,
    .sf-linkbtn {
      padding: 0;
      border: 0;
      border-radius: 3px;
      background: none;
      color: #b4c4da;
      font: inherit;
      line-height: 1.45;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
    }

    .sf-col ul a:hover,
    .sf-linkbtn:hover,
    .sf-title a:hover {
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .sf-col ul a[aria-current="page"] {
      color: #fff;
      font-weight: 600;
    }

    .sf-ext svg {
      width: 12px;
      height: 12px;
      margin-left: 5px;
      vertical-align: -1px;
    }

    .sf-sr {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .sf-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 30px;
      margin: 40px 0 0;
      padding: 18px 0;
      border-top: 1px solid rgba(120, 170, 230, 0.14);
      border-bottom: 1px solid rgba(120, 170, 230, 0.14);
      color: #c9d6ea;
      font-size: 13.5px;
      list-style: none;
    }

    .sf-strip li {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .sf-strip svg {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      color: #f0685c;
    }

    .sf-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 6px 24px;
      padding-top: 18px;
      color: #7f97b8;
      font-size: 13px;
    }

    .sf-bottom p { margin: 0; }

    .sf-sep { margin: 0 10px; }

    .sf-planlink {
      border-radius: 3px;
      color: #b4c4da;
      text-decoration: none;
    }

    .sf-planlink:hover {
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .sf-planlink[aria-current="page"] {
      color: #fff;
      font-weight: 600;
    }

    @media (min-width: 760px) {
      .sf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (min-width: 1100px) {
      .sf-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }

    @media (min-width: 1000px) {
      .sf-inner { padding: 60px 28px 28px; }

      .sf-top {
        grid-template-columns: minmax(230px, 1fr) 3fr;
        gap: 48px;
      }
    }

    /* ---------- Pied de page : coordonnees (NAP) et reseaux sociaux ---------- */
    .sf-nap {
      display: grid;
      gap: 2px;
      margin: 18px 0 0;
      color: #b4c4da;
      font-size: 14px;
      font-style: normal;
      line-height: 1.5;
    }

    .sf-nap-org { color: #fff; font-weight: 700; }

    .sf-nap-gap { margin-top: 8px; }

    .sf-nap a {
      border-radius: 3px;
      color: #dbe5f3;
      text-decoration: none;
      white-space: nowrap;
    }

    .sf-nap a:hover {
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .sf-social {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
    }

    .sf-social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border: 1px solid rgba(120, 170, 230, 0.28);
      border-radius: 50%;
      color: #c9d6ea;
      transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    }

    .sf-social a:hover {
      border-color: #f0685c;
      background: rgba(240, 104, 92, 0.12);
      color: #fff;
    }

    .sf-social svg { width: 17px; height: 17px; }

    /* ---------- FAQ visibles (balisage commun : section.faq[data-faq] > details > summary + .faq-a) ---------- */
    .faq { margin: 40px 0 0; }

    .faq-head { margin: 0 0 14px; }

    .faq-head h2 {
      margin: 0;
      color: var(--text);
      font-size: clamp(1.3rem, 4.6vw, 1.8rem);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }

    .faq-head p { margin: 6px 0 0; color: var(--text-muted); font-size: 0.95rem; }

    .faq-list { display: grid; gap: 10px; }

    .faq details {
      border: 1px solid var(--faq-border, var(--border));
      border-radius: 12px;
      background: var(--faq-bg, rgba(14, 26, 50, 0.85));
    }

    .faq details[open] { border-color: rgba(232, 87, 74, 0.45); }

    .faq summary {
      position: relative;
      padding: 14px 52px 14px 18px;
      border-radius: 12px;
      color: var(--text);
      font-weight: 600;
      line-height: 1.4;
      list-style: none;
      cursor: pointer;
    }

    .faq summary::-webkit-details-marker { display: none; }

    .faq summary::after {
      content: "+";
      position: absolute;
      top: 50%;
      right: 18px;
      color: var(--accent-bright);
      font-size: 1.4rem;
      font-weight: 400;
      line-height: 1;
      transform: translateY(-50%);
    }

    .faq details[open] summary::after { content: "\2212"; }

    .faq summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

    .faq .faq-a { padding: 0 18px 16px; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }

    .faq .faq-a p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }

    .faq .faq-a p + p { margin-top: 8px; }

    /* ---------- Loi 25 et souverainete des donnees (Managed, Data Center) ---------- */
    .law25 {
      margin: 0 0 36px;
      padding: 20px;
      border: 1px solid rgba(80, 140, 255, 0.3);
      border-radius: 14px;
      background: rgba(8, 18, 40, 0.66);
    }

    .law25-kicker {
      color: var(--text-muted);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    .law25-kicker::after {
      content: "";
      display: block;
      width: 28px;
      height: 2px;
      margin-top: 8px;
      background: var(--accent-bright);
    }

    .law25-head h2 {
      margin: 12px 0 8px;
      font-size: clamp(1.3rem, 4.6vw, 1.8rem);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }

    .law25-head p { margin: 0; max-width: 860px; color: var(--text-muted); font-size: 0.95rem; }

    .law25-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      margin: 18px 0 0;
    }

    .law25-card {
      min-width: 0;
      padding: 16px 18px;
      border: 1px solid rgba(80, 140, 255, 0.24);
      border-radius: 10px;
      background: rgba(10, 22, 48, 0.7);
    }

    .law25-card--hdce { border-color: rgba(232, 87, 74, 0.4); }

    .law25-card h3 { margin: 0 0 8px; color: #fff; font-size: 1.05rem; line-height: 1.3; }

    .law25-card p { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }

    .law25-card p + p { margin-top: 8px; }

    .law25-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }

    .law25-list li {
      position: relative;
      padding-left: 18px;
      color: var(--text-muted);
      font-size: 0.92rem;
      line-height: 1.5;
    }

    .law25-list li::before {
      content: "";
      position: absolute;
      top: 0.55em;
      left: 2px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent-bright);
    }

    .law25-list strong { color: var(--text); }

    .law25-note { margin: 14px 0 0; color: var(--text-muted); font-size: 0.85rem; font-style: italic; }

    .fw-note {
      grid-column: 1 / -1;
      margin: 0;
      color: var(--text-muted);
      font-size: 0.85rem;
      font-style: italic;
    }

    @media (min-width: 900px) {
      .law25 { padding: 24px 26px; }
      .law25-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    /* ---------- Modal ---------- */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 0;
      background: rgba(2, 5, 12, 0.78);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    .modal-overlay.is-open {
      opacity: 1;
      visibility: visible;
    }

    html, body, .modal {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar,
    .modal::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }

    .modal {
      position: relative;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      padding: 34px 24px 28px;
      border: 1px solid var(--border);
      border-radius: 20px 20px 0 0;
      background: linear-gradient(170deg, #12213f 0%, #0a1428 100%);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
      transform: translateY(30px);
      transition: transform 0.3s ease;
    }

    .modal-overlay.is-open .modal { transform: translateY(0); }

    .modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      color: var(--text);
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .modal-close:hover,
    .modal-close:focus-visible {
      background: var(--accent);
      border-color: var(--accent);
      outline: none;
    }

    .modal-close svg { width: 18px; height: 18px; }

    .modal-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
      padding-right: 44px;
    }

    .modal-header .card-icon { margin: 0; flex-shrink: 0; }

    .modal h2 {
      margin: 0;
      font-size: clamp(1.35rem, 4vw, 1.75rem);
      line-height: 1.2;
    }

    .modal-intro {
      margin: 0 0 22px;
      color: var(--text-muted);
    }

    .feature-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
      margin: 0 0 26px;
      padding: 0;
      list-style: none;
    }

    .feature-list li {
      padding: 16px 18px;
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.025);
    }

    .feature-list strong {
      display: block;
      margin-bottom: 4px;
      color: #fff;
    }

    .feature-list span {
      color: var(--text-muted);
      font-size: 0.93rem;
    }

    .modal-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
    }

    .modal-footer small { color: var(--text-muted); }

    /* ---------- Breakpoints ---------- */
    @media (min-width: 640px) {
      .modal-overlay { align-items: center; padding: 24px; }
      .modal {
        max-width: 720px;
        padding: 40px 40px 32px;
        border-radius: 20px;
        transform: translateY(20px) scale(0.97);
      }
      .modal-overlay.is-open .modal { transform: translateY(0) scale(1); }
      .feature-list { grid-template-columns: 1fr 1fr; }
    }

    @media (min-width: 640px) {
      .card-body { padding: 24px 26px 24px; }
      .model-body { padding: 24px 26px 28px; }
      .checks { grid-template-columns: 1fr 1fr; }
      .pillars-caption { font-size: 0.72rem; }
    }

    @media (min-width: 900px) {
      .services { padding: 130px 36px 110px; }
      .hosting-view { padding: 120px 36px 90px; }
      .models { grid-template-columns: repeat(2, 1fr); gap: 28px; }
      .pillars { padding: 10px 24px 20px; }
      .pillars-list { grid-template-columns: repeat(3, 1fr); }
      .pillar { padding: 22px 16px 22px 40px; }
      .pillar + .pillar {
        border-top: 0;
        border-left: 1px solid var(--border);
      }
      .trust-bar { grid-template-columns: repeat(3, 1fr); }
      .trust-item { justify-content: center; padding: 30px 24px; }
      .trust-item + .trust-item {
        border-top: 0;
        border-left: 1px solid var(--border);
      }
    }

    @media (min-width: 1100px) {
      .section-tag { display: block; }
      .chips--three { grid-template-columns: repeat(3, 1fr); }
    }

    @media (min-width: 1200px) {
      .chips--four { grid-template-columns: repeat(4, 1fr); }
      .chips--four .chip { gap: 8px; padding: 12px 10px; font-size: 0.84rem; }
    }

    /* ---------- Managed + Why views ---------- */
    .mv-wrap {
      max-width: 1320px;
      margin: 0 auto;
    }

    .mv-hero {
      position: relative;
      display: grid;
      gap: 18px;
      align-items: center;
      margin-bottom: 26px;
    }

    .mv-hero h1 {
      margin: 0 0 16px;
      font-size: clamp(1.9rem, 7vw, 3.3rem);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -0.02em;
      text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
    }

    .mv-hero .highlight {
      background: linear-gradient(90deg, var(--accent-bright), #ff8a65);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .mv-lead {
      max-width: 560px;
      margin: 0 0 22px;
      color: var(--text);
      opacity: 0.9;
      font-size: clamp(1rem, 2.6vw, 1.12rem);
      text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
    }

    .mv-points {
      display: grid;
      gap: 14px;
      margin: 0 0 26px;
      padding: 0;
      list-style: none;
    }

    .mv-point {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 0.9rem;
      line-height: 1.3;
    }

    .mv-point-ic {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      border: 1.5px solid rgba(232, 87, 74, 0.65);
      border-radius: 50%;
      background: rgba(192, 57, 43, 0.1);
      color: var(--accent-bright);
    }

    .mv-point-ic .ic { width: 22px; height: 22px; }

    .mv-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
    }

    .btn .ic,
    .btn-ghost .ic { width: 20px; height: 20px; }

    .btn-why {
      gap: 10px;
      padding: 15px 30px;
      font-size: 1.05rem;
      animation: why-shake 3.4s ease-in-out infinite, why-glow 3.4s ease-in-out infinite;
    }

    .btn-why:hover,
    .btn-why:focus-visible { animation-play-state: paused; }

    @keyframes why-shake {
      0%, 60%, 100% { transform: translateX(0) rotate(0); }
      64% { transform: translateX(-6px) rotate(-3deg); }
      68% { transform: translateX(6px) rotate(3deg); }
      72% { transform: translateX(-5px) rotate(-2.5deg); }
      76% { transform: translateX(5px) rotate(2.5deg); }
      80% { transform: translateX(-3px) rotate(-1.5deg); }
      84% { transform: translateX(2px) rotate(1deg); }
      88% { transform: translateX(0) rotate(0); }
    }

    @keyframes why-glow {
      0%, 55%, 100% { box-shadow: 0 8px 30px var(--accent-glow); }
      70% { box-shadow: 0 8px 44px rgba(232, 87, 74, 0.85), 0 0 0 8px rgba(232, 87, 74, 0.18); }
    }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 24px;
      border: 1.5px solid rgba(232, 87, 74, 0.7);
      border-radius: 999px;
      background: rgba(192, 57, 43, 0.1);
      color: #fff;
      font: inherit;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-ghost:hover,
    .btn-ghost:focus-visible {
      background: var(--accent);
      box-shadow: 0 0 18px var(--accent-glow);
      outline: none;
    }

    .mv-visual {
      position: relative;
      margin: 0 -20px;
    }

    .mv-visual img {
      display: block;
      width: 100%;
      height: auto;
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
      -webkit-mask-composite: source-in;
      mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
      mask-composite: intersect;
    }

    .mv-tag {
      display: none;
      position: absolute;
      right: 0;
      color: var(--text-muted);
      font-size: 0.68rem;
      font-weight: 600;
      line-height: 1.8;
      letter-spacing: 0.2em;
      text-align: left;
      text-transform: uppercase;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    }

    .mv-tag::after {
      content: "";
      display: block;
      width: 28px;
      height: 2px;
      margin-top: 10px;
      background: var(--accent-bright);
    }

    .mv-tag--top { top: 4%; }
    .mv-tag--bottom { bottom: 12%; }

    .frameworks {
      display: grid;
      gap: 14px;
      margin-bottom: 36px;
      padding: 16px;
      border: 1px solid rgba(80, 140, 255, 0.3);
      border-radius: 14px;
      background: rgba(8, 18, 40, 0.66);
      box-shadow: 0 0 34px rgba(40, 100, 255, 0.08);
    }

    .fw-label {
      color: var(--text-muted);
      font-size: 0.68rem;
      font-weight: 600;
      line-height: 1.8;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    .fw-label::after {
      content: "";
      display: block;
      width: 28px;
      height: 2px;
      margin-top: 8px;
      background: var(--accent-bright);
    }

    .fw-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .fw-item {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      padding: 12px;
      border: 1px solid rgba(80, 140, 255, 0.24);
      border-radius: 10px;
      background: rgba(10, 22, 48, 0.7);
    }

    .fw-item:last-child { grid-column: 1 / -1; }

    .fw-item .ic {
      width: 30px;
      height: 30px;
      color: var(--accent-bright);
    }

    .fw-item strong {
      display: block;
      color: #fff;
      font-size: 0.98rem;
      line-height: 1.25;
    }

    .fw-item span {
      display: block;
      color: var(--text-muted);
      font-size: 0.76rem;
      line-height: 1.3;
    }

    .mv-section { margin-bottom: 36px; }

    .mv-title-row {
      display: grid;
      gap: 6px;
      margin-bottom: 16px;
    }

    .mv-title-row h2 {
      margin: 0;
      font-size: clamp(1.3rem, 4.6vw, 1.8rem);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -0.01em;
    }

    .mv-title-row p {
      margin: 0;
      color: var(--text-muted);
      font-size: 0.92rem;
    }

    .offer-grid,
    .usecases {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .offer {
      position: relative;
      padding: 38px 20px 22px;
      border: 1px solid rgba(80, 140, 255, 0.32);
      border-radius: 14px;
      background: linear-gradient(165deg, rgba(14, 28, 60, 0.92), rgba(7, 15, 33, 0.94));
      box-shadow: 0 0 34px rgba(40, 100, 255, 0.08);
    }

    .offer-num {
      position: absolute;
      top: 14px;
      left: 18px;
      color: var(--text-muted);
      font-size: 0.85rem;
      letter-spacing: 0.08em;
    }

    .offer-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 10px;
    }

    .offer-head .ic {
      width: 38px;
      height: 38px;
      color: var(--accent-bright);
    }

    .offer h3 {
      margin: 0;
      font-size: 1.1rem;
      font-weight: 700;
      line-height: 1.2;
    }

    .offer p {
      margin: 0 0 14px;
      color: var(--text-muted);
      font-size: 0.86rem;
      line-height: 1.5;
    }

    .checks--sm,
    .checks--xs {
      grid-template-columns: 1fr;
      gap: 10px;
      margin: 0;
    }

    .checks--sm li { font-size: 0.86rem; }
    .checks--sm .ic { width: 22px; height: 22px; }
    .checks--xs { gap: 7px; }
    .checks--xs li { gap: 9px; font-size: 0.78rem; line-height: 1.25; }
    .checks--xs .ic { width: 18px; height: 18px; }

    .usecase {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      padding: 16px 16px;
      border: 1px solid rgba(80, 140, 255, 0.3);
      border-radius: 14px;
      background: linear-gradient(165deg, rgba(14, 28, 60, 0.9), rgba(7, 15, 33, 0.94));
      color: var(--text);
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .usecase:hover,
    .usecase:focus-visible {
      transform: translateY(-3px);
      border-color: rgba(232, 87, 74, 0.55);
      box-shadow: 0 0 26px rgba(192, 57, 43, 0.2);
      outline: none;
    }

    .uc-ic {
      width: 36px;
      height: 36px;
      color: var(--accent-bright);
    }

    .uc-text {
      flex: 1;
      min-width: 0;
      color: var(--text-muted);
      font-size: 0.8rem;
      line-height: 1.4;
    }

    .uc-text strong {
      display: block;
      margin-bottom: 2px;
      color: #fff;
      font-size: 1rem;
    }

    .uc-arrow {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 38px;
      height: 38px;
      border: 1.5px solid rgba(232, 87, 74, 0.6);
      border-radius: 50%;
      color: var(--accent-bright);
    }

    .uc-arrow .ic { width: 16px; height: 16px; stroke-width: 2; }

    .pricing {
      position: relative;
      display: grid;
      gap: 16px;
      margin-bottom: 26px;
      padding: 20px 16px;
      border: 1px solid rgba(80, 140, 255, 0.3);
      border-radius: 16px;
      background: rgba(7, 16, 36, 0.78);
      box-shadow: 0 0 40px rgba(40, 100, 255, 0.1);
    }

    .pricing-intro h2 {
      margin: 0 0 10px;
      font-size: clamp(1.25rem, 4.4vw, 1.55rem);
      font-weight: 800;
      line-height: 1.25;
    }

    .pricing-intro p {
      margin: 0;
      color: var(--text-muted);
      font-size: 0.9rem;
    }

    .price-card {
      position: relative;
      padding: 16px 18px 18px;
      border: 1px solid rgba(80, 140, 255, 0.3);
      border-radius: 12px;
      background: rgba(8, 18, 40, 0.72);
    }

    .price-card--pro {
      border-color: rgba(232, 87, 74, 0.75);
      box-shadow: 0 0 30px rgba(232, 87, 74, 0.2), inset 0 0 24px rgba(232, 87, 74, 0.05);
    }

    .price-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }

    .price-head > .ic {
      width: 34px;
      height: 34px;
      color: var(--accent-bright);
    }

    .price-card:not(.price-card--pro) .price-head > .ic { color: var(--text-muted); }

    .price-name {
      display: block;
      color: #fff;
      font-size: 0.98rem;
      font-weight: 600;
    }

    .price-amount {
      display: block;
      color: #fff;
      font-size: 1.7rem;
      font-weight: 800;
      line-height: 1.2;
    }

    .price-amount small {
      color: var(--text-muted);
      font-size: 0.95rem;
      font-weight: 500;
    }

    .price-from {
      display: block;
      margin-bottom: 2px;
      color: #ffb3aa;
      font-size: 0.7rem;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .price-card--pro .price-head { padding-right: 98px; }
    .price-card--pro .price-name { font-size: 0.92rem; }

    .price-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      display: grid;
      place-content: center;
      width: 84px;
      height: 84px;
      border: 3px solid var(--accent-bright);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(232, 87, 74, 0.2), rgba(192, 57, 43, 0.06));
      box-shadow: 0 0 24px rgba(232, 87, 74, 0.45);
      color: #fff;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      line-height: 1.3;
      text-align: center;
      text-transform: uppercase;
    }

    .price-badge strong {
      display: block;
      color: #ff7a6b;
      font-size: 1.35rem;
      letter-spacing: 0;
    }

    .price-vs {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      color: var(--text-muted);
      font-size: 0.64rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      line-height: 1.6;
      text-align: center;
      text-transform: uppercase;
    }

    .price-vs .ic {
      width: 34px;
      height: 34px;
      color: var(--accent-bright);
      transform: rotate(90deg);
    }

    .price-why {
      display: flex;
      gap: 12px;
      margin: 0;
      padding: 14px 16px;
      border: 1px dashed rgba(232, 87, 74, 0.5);
      border-radius: 12px;
      background: rgba(192, 57, 43, 0.07);
      color: var(--text-muted);
      font-size: 0.88rem;
      line-height: 1.55;
    }

    .price-why .ic {
      width: 26px;
      height: 26px;
      margin-top: 2px;
      color: var(--accent-bright);
    }

    .price-why strong { color: #fff; }

    .price-why a {
      color: #ffb3aa;
      text-underline-offset: 3px;
    }

    .human {
      display: grid;
      gap: 18px;
      align-items: center;
      padding: 22px 20px;
      border: 1px solid rgba(232, 87, 74, 0.5);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(192, 57, 43, 0.16), rgba(8, 18, 40, 0.8));
      box-shadow: 0 0 34px rgba(232, 87, 74, 0.12);
    }

    .human-ic {
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border: 1.5px solid rgba(232, 87, 74, 0.65);
      border-radius: 50%;
      background: rgba(192, 57, 43, 0.14);
      color: var(--accent-bright);
    }

    .human-ic .ic { width: 26px; height: 26px; }

    .human h2 {
      margin: 0 0 8px;
      font-size: clamp(1.2rem, 4.4vw, 1.55rem);
      font-weight: 800;
      line-height: 1.25;
    }

    .human p {
      margin: 0;
      color: var(--text-muted);
      font-size: 0.95rem;
    }

    .human-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    /* ----- Why view : architecture ----- */
    .why-view .mv-wrap { max-width: 1440px; }

    .diagram {
      display: grid;
      gap: 14px;
      margin: 0 0 28px;
    }

    .dc {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
      padding: 16px;
      border: 1.5px solid rgba(63, 140, 255, 0.6);
      border-radius: 16px;
      background: linear-gradient(165deg, rgba(10, 24, 56, 0.93), rgba(5, 12, 28, 0.96));
      box-shadow: 0 0 36px rgba(40, 100, 255, 0.16), inset 0 0 40px rgba(40, 100, 255, 0.05);
    }

    .dc-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 6px 12px;
    }

    .dc-title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0;
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .dc-title .ic {
      width: 32px;
      height: 32px;
      color: #5fa8ff;
    }

    .dc-env {
      color: var(--text-muted);
      font-size: 0.64rem;
      font-weight: 600;
      line-height: 1.5;
      letter-spacing: 0.2em;
      text-align: right;
      text-transform: uppercase;
    }

    .blk {
      min-width: 0;
      padding: 12px 14px;
      border: 1px solid rgba(80, 140, 255, 0.32);
      border-radius: 12px;
      background: rgba(8, 18, 40, 0.62);
    }

    .blk--red {
      border-color: rgba(232, 87, 74, 0.75);
      box-shadow: 0 0 22px rgba(232, 87, 74, 0.14);
    }

    .blk-title {
      margin: 0;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1.3;
      text-transform: uppercase;
    }

    .env .blk-title { text-align: center; }

    .blk-title--icon {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .blk-title--icon .ic {
      width: 22px;
      height: 22px;
      color: var(--accent-bright);
    }

    .blk-sub {
      margin: 2px 0 10px;
      color: var(--text-muted);
      font-size: 0.8rem;
      line-height: 1.4;
    }

    .env .blk-sub { text-align: center; }

    .stack-chips {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .s-chip {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 0;
      padding: 12px 6px;
      border: 1px solid rgba(80, 140, 255, 0.45);
      border-radius: 9px;
      background: linear-gradient(180deg, rgba(16, 38, 86, 0.8), rgba(10, 24, 56, 0.8));
      box-shadow: inset 0 0 14px rgba(63, 140, 255, 0.12);
      font-size: 0.72rem;
      line-height: 1.2;
      text-align: center;
    }

    .s-chip .ic {
      width: 26px;
      height: 26px;
      color: #d6e6ff;
    }

    .s-chip--more {
      color: var(--text-muted);
      font-size: 1.3rem;
    }

    .conn {
      position: relative;
      flex-shrink: 0;
      height: 22px;
      margin: -2px 0;
      background: linear-gradient(#3f8cff, #5fc8ff) center / 2px 100% no-repeat;
    }

    .conn--line { height: 16px; }

    .conn-row {
      display: flex;
      flex-shrink: 0;
      justify-content: space-around;
      height: 24px;
      margin: -4px 0;
      padding: 0 6%;
    }

    .conn-row span {
      position: relative;
      width: 2px;
      height: 100%;
      background: linear-gradient(#3f8cff, #5fc8ff);
    }

    .conn-row .dn::after,
    .conn-row .bi::after,
    .conn-row .bi::before {
      content: "";
      position: absolute;
      left: 50%;
      border: 5px solid transparent;
      transform: translateX(-50%);
    }

    .conn-row .dn::after,
    .conn-row .bi::after { bottom: -1px; border-top: 7px solid #5fc8ff; border-bottom: 0; }
    .conn-row .bi::before { top: -1px; border-bottom: 7px solid #5fc8ff; border-top: 0; }

    .net-row {
      display: grid;
      gap: 12px;
    }

    .checks--xs { margin: 0; }

    .sec-card .blk-title--icon .ic { width: 30px; height: 30px; }

    .private-net {
      position: relative;
      min-width: 0;
      padding: 20px 6% 4px;
      text-align: center;
    }

    .pn-ring {
      position: absolute;
      inset: 0 0 24px;
      border: 1.5px solid rgba(80, 160, 255, 0.75);
      border-radius: 50%;
      background: radial-gradient(ellipse at 50% 55%, rgba(40, 110, 255, 0.3), rgba(8, 18, 40, 0.35) 72%);
      box-shadow: 0 0 28px rgba(40, 100, 255, 0.4), inset 0 0 28px rgba(40, 100, 255, 0.24);
    }

    .pn-ring::after {
      content: "";
      position: absolute;
      inset: 7px 12px;
      border: 1px solid rgba(95, 200, 255, 0.35);
      border-radius: 50%;
    }

    .pn-title,
    .vlan-row { position: relative; }

    .pn-title {
      margin: 0 0 4px;
      font-size: 0.85rem;
      font-weight: 700;
      line-height: 1.3;
      text-transform: uppercase;
    }

    .pn-title small {
      display: block;
      color: var(--text-muted);
      font-size: 0.74rem;
      font-weight: 500;
      text-transform: none;
    }

    .vlan-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-around;
      gap: 6px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .vlan {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    .tower {
      display: block;
      width: clamp(46px, 14vw, 66px);
      height: auto;
    }

    .vlan-label {
      margin-top: -3px;
      padding: 3px 9px;
      border: 1px solid rgba(80, 140, 255, 0.7);
      border-radius: 6px;
      background: rgba(6, 16, 40, 0.95);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .san {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .san-head .blk-sub { margin-bottom: 4px; }

    .san-body {
      display: grid;
      gap: 12px;
      align-items: center;
    }

    .san-visual {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 0;
    }

    .san-visual img { display: block; flex-shrink: 1; min-width: 0; height: auto; }
    .r-san-a { width: 38%; max-width: 128px; }
    .r-san-b { width: 34%; max-width: 114px; }
    .r-store-dr { width: min(100%, 190px); }

    .san-mid {
      display: flex;
      flex: 1 1 0;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      min-width: 0;
      color: var(--text-muted);
      font-size: 0.68rem;
      line-height: 1.3;
      text-align: center;
    }

    .san-mid strong {
      margin-bottom: 14px;
      color: var(--text);
      font-size: 0.76rem;
      font-weight: 600;
    }

    .san-mid .ic {
      width: 100%;
      max-width: 96px;
      height: 20px;
      color: #8fd8ff;
    }

    .san-checks {
      padding: 12px 14px;
      border: 1px solid rgba(80, 140, 255, 0.3);
      border-radius: 10px;
      background: rgba(5, 12, 28, 0.5);
    }

    .repl-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .repl-node,
    .repl-mid {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 0;
      color: var(--text);
      font-size: 0.7rem;
      line-height: 1.3;
      text-align: center;
    }

    .repl-node img { display: block; width: min(100%, 108px); height: auto; }

    .repl-mid { color: var(--text-muted); }

    .repl-mid .ic {
      width: 34px;
      height: 34px;
      color: #8fd8ff;
    }

    .xfer-col {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
    }

    .xfer-wrap {
      width: 100%;
      max-width: 260px;
      filter: drop-shadow(0 0 14px rgba(40, 110, 255, 0.7));
    }

    .xfer-arrow {
      padding: 20px 24px 46px;
      background: linear-gradient(135deg, #0b4ad8, #2a86ff);
      clip-path: polygon(14% 0, 86% 0, 86% 68%, 100% 68%, 50% 100%, 0 68%, 14% 68%);
      color: #fff;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      line-height: 1.4;
      text-align: center;
      text-transform: uppercase;
    }

    .distance { text-align: center; }

    .distance p {
      margin: 6px 0 0;
      font-size: 0.8rem;
      font-weight: 700;
      line-height: 1.4;
    }

    .skyline {
      position: relative;
      width: 160px;
      height: 110px;
      margin: 0 auto;
    }

    .skyline svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .skyline .sky-pin {
      inset: auto;
      width: 38px;
      height: 38px;
      color: #ff6a5a;
      stroke-width: 1.7;
      filter: drop-shadow(0 0 7px rgba(255, 106, 90, 0.8));
    }
    .skyline .sky-pin--a { left: 6px; top: 2px; }
    .skyline .sky-pin--b { left: 98px; top: 14px; }

    .dc-body {
      display: grid;
      flex: 1;
      gap: 12px;
    }

    .dc-left {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
    }

    .backup-col {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 14px 12px 12px;
      text-align: center;
    }

    .backup-col .blk-title { font-size: 0.9rem; }

    .r-backup {
      display: block;
      width: min(100%, 160px);
      height: auto;
    }

    .backup-sub {
      margin: 0;
      color: var(--text);
      font-size: 0.8rem;
      line-height: 1.35;
    }

    .backup-checks {
      align-self: stretch;
      padding: 12px 6px 4px;
      text-align: left;
    }

    .backup-note {
      display: flex;
      flex-direction: column;
      align-items: center;
      align-self: stretch;
      gap: 8px;
      margin: auto 0 0;
      padding: 12px;
      border: 1px solid rgba(80, 140, 255, 0.35);
      border-radius: 12px;
      background: rgba(5, 12, 28, 0.55);
      color: var(--text);
      font-size: 0.78rem;
      line-height: 1.4;
    }

    .backup-note .ic {
      width: 34px;
      height: 34px;
      color: var(--accent-bright);
    }

    .sectors {
      display: grid;
      gap: 14px;
      margin-bottom: 18px;
      padding: 18px 16px;
      border: 1px solid rgba(80, 140, 255, 0.3);
      border-radius: 14px;
      background: rgba(8, 18, 40, 0.66);
    }

    .sectors-title {
      margin: 0;
      font-size: 1.15rem;
      font-weight: 800;
      line-height: 1.3;
    }

    .sectors-title::after {
      content: "";
      display: block;
      width: 28px;
      height: 2px;
      margin-top: 8px;
      background: var(--accent-bright);
    }

    .sector-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .sector {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .sector:last-child { grid-column: 1 / -1; }

    .sector .ic {
      width: 32px;
      height: 32px;
      color: var(--accent-bright);
    }

    .sector strong {
      display: block;
      color: #fff;
      font-size: 0.9rem;
      line-height: 1.25;
    }

    .sector span span,
    .sector > span {
      color: var(--text-muted);
      font-size: 0.74rem;
      line-height: 1.35;
    }

    .claims {
      display: grid;
      gap: 16px;
      margin: 0 0 26px;
      padding: 6px 4px;
      list-style: none;
    }

    .claim {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .claim .ic {
      width: 38px;
      height: 38px;
      color: var(--accent-bright);
    }

    .claim strong {
      display: block;
      color: #fff;
      font-size: 0.98rem;
      line-height: 1.3;
    }

    .claim > span {
      color: var(--text-muted);
      font-size: 0.82rem;
      line-height: 1.45;
    }

    .why-price {
      margin-bottom: 26px;
      padding: 22px 18px;
      border: 1px solid rgba(232, 87, 74, 0.5);
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(192, 57, 43, 0.14), rgba(8, 18, 40, 0.82));
      box-shadow: 0 0 34px rgba(232, 87, 74, 0.12);
    }

    .why-price-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }

    .why-price-head .ic {
      width: 30px;
      height: 30px;
      color: var(--accent-bright);
    }

    .why-price h2 {
      margin: 0;
      font-size: clamp(1.2rem, 4.4vw, 1.55rem);
      font-weight: 800;
    }

    .why-price > p {
      max-width: 780px;
      margin: 0 0 18px;
      color: var(--text-muted);
      font-size: 0.95rem;
    }

    .copies {
      display: grid;
      gap: 12px;
      margin: 0 0 22px;
      padding: 0;
      list-style: none;
    }

    .copies li {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 14px;
      border: 1px solid rgba(80, 140, 255, 0.28);
      border-radius: 12px;
      background: rgba(8, 18, 40, 0.7);
      font-size: 0.8rem;
      line-height: 1.4;
    }

    .copy-num {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      border: 1.5px solid rgba(232, 87, 74, 0.7);
      border-radius: 50%;
      color: var(--accent-bright);
      font-size: 1rem;
      font-weight: 800;
    }

    .copies strong {
      display: block;
      color: #fff;
      font-size: 0.92rem;
    }

    .copies li > span:last-child { color: var(--text-muted); }

    .why-price-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .why-caption {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 0;
      color: var(--text-muted);
      font-size: 0.64rem;
      letter-spacing: 0.22em;
      text-align: center;
      text-transform: uppercase;
    }

    .why-caption::before,
    .why-caption::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    /* ----- Callback modal ----- */
    .callback-form {
      display: grid;
      gap: 14px;
      margin-bottom: 20px;
    }

    .field label {
      display: block;
      margin-bottom: 6px;
      color: var(--text-muted);
      font-size: 0.82rem;
      font-weight: 600;
    }

    .field input,
    .field select {
      width: 100%;
      padding: 13px 14px;
      border: 1px solid rgba(120, 160, 220, 0.3);
      border-radius: 10px;
      background: rgba(5, 11, 24, 0.7);
      color: #fff;
      font: inherit;
      font-size: 1rem;
    }

    .field select option { background: #0a1428; color: #fff; }

    .field input:focus,
    .field select:focus {
      border-color: var(--accent-bright);
      outline: none;
      box-shadow: 0 0 0 3px rgba(232, 87, 74, 0.25);
    }

    .callback-submit {
      justify-content: center;
      width: 100%;
    }

    .form-status {
      margin: 0;
      min-height: 1.4em;
      color: #8fe3b0;
      font-size: 0.9rem;
    }

    .form-status.is-error { color: #ff9a8f; }

    .modal-footer a { color: #ffb3aa; }

    /* ----- Formulaire de demande (modale) : envoi a support@hdce.ca ----- */
    .field textarea {
      display: block;
      width: 100%;
      min-height: 104px;
      padding: 12px 14px;
      border: 1px solid rgba(120, 160, 220, 0.3);
      border-radius: 10px;
      background: rgba(5, 11, 24, 0.7);
      color: #fff;
      font: inherit;
      font-size: 1rem;
      resize: vertical;
    }

    .field textarea:focus {
      border-color: var(--accent-bright);
      outline: none;
      box-shadow: 0 0 0 3px rgba(232, 87, 74, 0.25);
    }

    .field input[aria-invalid="true"],
    .field textarea[aria-invalid="true"] { border-color: #ff9a8f; }

    .field-req { color: #ff9a8f; }
    .field-opt { color: var(--text-muted); font-weight: 400; }
    .field-err { margin: 6px 0 0; color: #ff9a8f; font-size: 0.85rem; }
    .field-note { margin: 0; color: var(--text-muted); font-size: 0.82rem; }
    .callback-submit[disabled] { opacity: 0.65; cursor: progress; }

    .req-context {
      margin: 0 0 18px;
      padding: 14px 16px;
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.03);
    }

    .req-context-title { margin: 0 0 8px; color: #fff; font-size: 0.9rem; font-weight: 700; }
    .req-context-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 0.86rem; }
    .req-context-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
    .req-context-k { color: var(--text-muted); }
    .req-context-v { min-width: 0; color: #fff; text-align: right; overflow-wrap: anywhere; }

    /* champ piege anti-robots : invisible, hors tabulation */
    .hp-field {
      position: absolute !important;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    @media (min-width: 640px) {
      .callback-form { grid-template-columns: 1fr 1fr; column-gap: 16px; }
      .callback-form > .field--full,
      .callback-form > .callback-submit,
      .callback-form > .field-note,
      .callback-form > .form-status { grid-column: 1 / -1; }
    }

    @media (min-width: 640px) {
      .mv-points { grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; }
      .mv-point { padding: 0 24px; }
      .mv-point:first-child { padding-left: 0; }
      .mv-point + .mv-point { border-left: 1px solid var(--border); }
      .offer-grid,
      .usecases { grid-template-columns: repeat(2, 1fr); }
      .fw-list { grid-template-columns: repeat(3, 1fr); }
      .fw-item:last-child { grid-column: auto; }
      .sector-list { grid-template-columns: repeat(3, 1fr); }
      .sector:last-child { grid-column: auto; }
      .copies { grid-template-columns: repeat(2, 1fr); }
      .human { grid-template-columns: auto 1fr; }
      .human-actions { grid-column: 1 / -1; }
    }

    @media (min-width: 900px) {
      .mv-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
      .mv-visual { margin: 0; }
      .frameworks {
        grid-template-columns: 170px 1fr;
        align-items: center;
        gap: 22px;
        padding: 16px 22px;
      }
      .fw-list { grid-template-columns: repeat(5, 1fr); }
      .mv-title-row { grid-template-columns: 1fr minmax(0, 520px); align-items: end; gap: 24px; }
      .mv-title-row p { text-align: right; }
      .pricing { grid-template-columns: 1fr 1fr; padding: 24px; }
      .pricing-intro,
      .price-why { grid-column: 1 / -1; }
      .price-vs { display: none; }
      .human { grid-template-columns: auto 1fr auto; padding: 24px 28px; }
      .human-actions { grid-column: auto; flex-direction: column; align-items: stretch; }
      .human-actions .btn,
      .human-actions .btn-ghost { justify-content: center; }
      .sectors { grid-template-columns: 220px 1fr; align-items: center; gap: 24px; padding: 18px 24px; }
      .claims { grid-template-columns: repeat(3, 1fr); gap: 0; }
      .claim { padding: 0 24px; }
      .claim + .claim { border-left: 1px solid var(--border); }
      .copies { grid-template-columns: repeat(4, 1fr); }
      .why-price { padding: 26px 28px; }
    }

    @media (min-width: 1100px) {
      .offer-grid,
      .usecases { grid-template-columns: repeat(4, 1fr); }
      .mv-point { padding: 0 16px; }
      .mv-point:first-child { padding-left: 0; }
      .mv-point-ic { width: 44px; height: 44px; }
      .mv-tag { display: block; width: 118px; }
      .mv-visual { padding-right: 132px; }
      .mv-hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
      .mv-tag--top { top: 12%; }
      .mv-tag--bottom { bottom: 14%; }
    }

    @media (min-width: 1200px) {
      .sector-list { grid-template-columns: repeat(5, 1fr); }
      .pricing { grid-template-columns: 1.05fr 1fr auto 1.3fr; align-items: stretch; }
      .pricing-intro { grid-column: auto; align-self: center; }
      .price-why { grid-column: 1 / -1; }
      .price-vs { display: flex; align-self: center; }
      .price-vs .ic { transform: none; }
    }

    /* ----- Why view : responsive ----- */
    @media (max-width: 639px) {
      .san-visual { flex-wrap: wrap; row-gap: 6px; }
      .r-san-a { width: 46%; }
      .r-san-b { width: 40%; }
      .san-mid { order: 3; flex: 1 1 100%; }
      .san-mid strong { margin-bottom: 4px; }
      .san-mid .ic { max-width: 44px; }
      .repl-row { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
      .repl-node { flex: 1 1 40%; }
      .repl-mid { order: 3; flex: 1 1 100%; flex-direction: row; justify-content: center; }
      .dc-env { text-align: left; }
    }

    @media (min-width: 640px) {
      .stack-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); }
      .net-row { grid-template-columns: 180px minmax(0, 1fr); align-items: center; }
      .san-body { grid-template-columns: minmax(0, 1fr) 210px; }
      .san--dr .san-body { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
      .tower { width: 64px; }
      .backup-checks { align-self: center; }
    }

    @media (min-width: 900px) {
      .dc-body { grid-template-columns: minmax(0, 1fr) 232px; }
      .sector + .sector { padding-left: 16px; border-left: 1px solid var(--border); }
    }

    @media (min-width: 1360px) {
      .diagram {
        grid-template-columns: minmax(0, 1.06fr) 140px minmax(0, 1fr);
        align-items: start;
        gap: 12px;
      }

      .xfer-col {
        align-self: stretch;
        justify-content: flex-start;
        gap: 26px;
        padding-top: 196px;
      }

      .xfer-wrap {
        width: calc(100% + 60px);
        max-width: none;
        margin: 0 -30px;
      }

      .xfer-arrow {
        padding: 26px 34px 26px 14px;
        clip-path: polygon(0 12%, 76% 12%, 76% 0, 100% 50%, 76% 100%, 76% 88%, 0 88%);
        font-size: 0.6rem;
        letter-spacing: 0.02em;
      }

      .dc--main .private-net { margin-right: 18px; }
      .dc--dr .dc-left .private-net { margin-left: 18px; }
      .dc-body { grid-template-columns: minmax(0, 1fr) 176px; gap: 22px; }

      .backup-col::before,
      .backup-col::after {
        content: "";
        position: absolute;
        left: -22px;
        top: 236px;
      }

      .backup-col::before {
        width: 20px;
        height: 2px;
        background: #5fc8ff;
      }

      .backup-col::after {
        left: -8px;
        top: 231px;
        border: 6px solid transparent;
        border-left: 8px solid #5fc8ff;
        border-right: 0;
      }

      .dc { gap: 8px; padding: 14px; }
      .dc--main .blk { padding: 9px 12px; }
      .dc--main .blk-sub { margin-bottom: 7px; }
      .dc--main .s-chip { gap: 4px; padding: 8px 6px; }
      .dc--main .s-chip .ic { width: 24px; height: 24px; }
      .conn-row { height: 18px; margin: -3px 0; }
      .conn--line { height: 10px; }
      .dc--main .private-net { padding-top: 16px; }
      .dc--main .san-checks { padding: 8px 12px; gap: 5px; }
      .dc--main .san-checks li { font-size: 0.74rem; }
      .dc--main .san .san-mid strong { margin-bottom: 8px; }
      .dc--main .repl .blk-title--icon { margin-bottom: 4px; }
      .dc--main .repl-node img { width: min(100%, 92px); }
      .dc--dr { align-self: stretch; }
      .dc--dr .san--dr { flex: 1; }
      .dc--dr .s-chip { gap: 5px; padding: 10px 2px; font-size: 0.6rem; }
      .dc--dr .s-chip .ic { width: 22px; height: 22px; }
      .dc--dr .san--dr .san-body { flex: 1; grid-template-columns: 164px minmax(0, 1fr); }
      .r-store-dr { width: 164px; }
      .dc--dr .san-checks { padding: 10px 10px; }
      .dc--dr .san-checks li { font-size: 0.72rem; }
    }

    /* ---------- Self-Provisioning view ---------- */
    .sv-wrap {
      max-width: 1320px;
      margin: 0 auto;
    }

    .sv-panel {
      border: 1px solid rgba(80, 140, 255, 0.32);
      border-radius: 14px;
      background: linear-gradient(165deg, rgba(14, 28, 60, 0.92), rgba(7, 15, 33, 0.94));
      box-shadow: 0 0 40px rgba(40, 100, 255, 0.1), inset 0 0 0 1px rgba(80, 140, 255, 0.05);
    }

    .sv-layout {
      display: grid;
      gap: 14px;
      align-items: start;
      margin-bottom: 30px;
    }

    .sv-solutions {
      padding: 14px;
      scroll-margin-top: 90px;
    }

    .sv-solutions h2 {
      margin: 2px 0 12px;
      font-size: 1.1rem;
      font-weight: 700;
    }

    .sv-tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin: 0 0 12px;
      padding: 0;
      list-style: none;
    }

    .sv-tab {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      min-height: 48px;
      padding: 8px 12px;
      border: 1px solid rgba(80, 140, 255, 0.28);
      border-radius: 10px;
      background: rgba(8, 18, 40, 0.78);
      color: var(--text);
      font: inherit;
      font-size: 0.84rem;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .sv-tab .ic {
      width: 22px;
      height: 22px;
      color: var(--accent-bright);
    }

    .sv-tab-label {
      flex: 1;
      min-width: 0;
      line-height: 1.2;
    }

    .sv-tab .sv-tab-chev {
      display: none;
      width: 16px;
      height: 16px;
      color: var(--text);
      opacity: 0.8;
    }

    .sv-tab:hover { border-color: rgba(232, 87, 74, 0.6); }

    .sv-tab:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
    }

    .sv-tab[aria-selected="true"] {
      border-color: rgba(232, 87, 74, 0.9);
      background: rgba(192, 57, 43, 0.14);
      box-shadow: 0 0 22px rgba(232, 87, 74, 0.22), inset 0 0 0 1px rgba(232, 87, 74, 0.22);
    }

    .sv-help {
      display: grid;
      gap: 8px;
      padding: 14px;
      border: 1px solid rgba(80, 140, 255, 0.28);
      border-radius: 10px;
      background: rgba(8, 18, 40, 0.78);
    }

    .sv-help strong {
      display: block;
      margin-bottom: 3px;
      font-size: 0.9rem;
    }

    .sv-help p {
      margin: 0;
      color: var(--text-muted);
      font-size: 0.78rem;
      line-height: 1.4;
    }

    .sv-help-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      justify-self: start;
      padding: 4px 0;
      border: 0;
      background: none;
      color: #ff8a78;
      font: inherit;
      font-size: 0.86rem;
      font-weight: 700;
      cursor: pointer;
    }

    .sv-help-link:hover { color: #ffb3aa; }

    .sv-help-link:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 3px;
      border-radius: 4px;
    }

    .sv-help-link .ic {
      width: 18px;
      height: 18px;
    }

    .sv-config {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      overflow: hidden;
      scroll-margin-top: 90px;
    }

    .sv-builder { padding: 20px 16px 22px; }

    .sv-builder-head {
      position: relative;
      margin-bottom: 18px;
    }

    .sv-kicker {
      display: block;
      margin-bottom: 6px;
      padding-right: 120px;
      color: var(--text-muted);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    .sv-builder h2 {
      margin: 0 0 4px;
      font-size: clamp(1.55rem, 5.4vw, 2.05rem);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: -0.01em;
    }

    .sv-builder-head p {
      margin: 0;
      color: var(--text-muted);
      font-size: 0.92rem;
    }

    .sv-reset {
      position: absolute;
      top: -4px;
      right: 0;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 0;
      border: 0;
      background: none;
      color: #8ec5ff;
      font: inherit;
      font-size: 0.84rem;
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }

    .sv-reset:hover { color: #fff; }

    .sv-reset:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 3px;
      border-radius: 4px;
    }

    .sv-reset .ic {
      width: 16px;
      height: 16px;
    }

    .sv-fields {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px 18px;
    }

    .sv-field {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      min-width: 0;
    }

    .sv-ficon {
      display: grid;
      place-items: center;
      flex: 0 0 46px;
      width: 46px;
      height: 46px;
      margin-top: 2px;
      border: 1px solid rgba(80, 140, 255, 0.3);
      border-radius: 10px;
      background: rgba(10, 22, 48, 0.8);
      color: var(--accent-bright);
    }

    .sv-ficon .ic {
      width: 22px;
      height: 22px;
    }

    .sv-fbody {
      flex: 1;
      min-width: 0;
    }

    .sv-fbody label {
      display: block;
      margin-bottom: 5px;
      color: #fff;
      font-size: 0.8rem;
      font-weight: 600;
    }

    .sv-select { position: relative; }

    .sv-select select {
      -webkit-appearance: none;
      appearance: none;
      display: block;
      width: 100%;
      height: 42px;
      padding: 0 36px 0 12px;
      border: 1px solid rgba(80, 140, 255, 0.4);
      border-radius: 8px;
      background: rgba(5, 12, 28, 0.92);
      color: #fff;
      font: inherit;
      font-size: 16px;
      text-overflow: ellipsis;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .sv-select select:hover { border-color: rgba(232, 87, 74, 0.6); }

    .sv-select select:focus-visible {
      outline: none;
      border-color: var(--cyan);
      box-shadow: 0 0 0 3px rgba(95, 200, 255, 0.28);
    }

    .sv-select option {
      background: #0e1a32;
      color: #e8eef8;
    }

    .sv-select .sv-chev {
      position: absolute;
      top: 50%;
      right: 12px;
      width: 16px;
      height: 16px;
      margin-top: -8px;
      color: #fff;
      pointer-events: none;
    }

    .sv-note {
      display: block;
      min-height: 1.25em;
      margin-top: 5px;
      color: var(--text-muted);
      font-size: 0.72rem;
      line-height: 1.25;
    }

    .sv-summary {
      display: flex;
      flex-direction: column;
      border-top: 1px solid rgba(80, 140, 255, 0.28);
    }

    .self-view .hosting-head p {
      color: #b4c3dc;
      text-shadow: 0 1px 3px rgba(3, 8, 20, 0.95), 0 0 14px rgba(3, 8, 20, 0.95), 0 0 28px rgba(3, 8, 20, 0.85);
    }

    .sv-hall {
      position: relative;
      aspect-ratio: 2.5 / 1;
      max-height: 240px;
      overflow: hidden;
      background: #040a16;
    }

    .sv-hall img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: left center;
    }

    .sv-hall-text {
      position: absolute;
      top: 0;
      right: 4%;
      bottom: 0;
      left: 62%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: var(--text-muted);
      font-size: 0.56rem;
      font-weight: 600;
      line-height: 1.8;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    }

    .sv-hall-text::after {
      content: "";
      display: block;
      width: 28px;
      height: 2px;
      margin-top: 10px;
      background: var(--accent-bright);
    }

    .sv-recap-wrap {
      padding: 16px 16px 0;
      border-top: 1px solid rgba(80, 140, 255, 0.2);
    }

    .sv-recap-title {
      margin: 0 0 12px;
      color: var(--text-muted);
      font-size: 0.64rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .sv-recap {
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .sv-recap li {
      display: grid;
      grid-template-columns: 14px 82px minmax(0, 1fr);
      gap: 0 10px;
      align-items: start;
      font-size: 0.76rem;
      line-height: 1.3;
    }

    .sv-recap .ic {
      width: 14px;
      height: 14px;
      margin-top: 1px;
      color: var(--text-muted);
    }

    .sv-recap-k { color: var(--text-muted); }

    .sv-recap-v {
      padding-left: 12px;
      border-left: 1px solid var(--border);
      color: #fff;
    }

    .sv-buy {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin: 14px 16px 0;
      padding: 14px 0 18px;
      border-top: 1px solid rgba(80, 140, 255, 0.2);
    }

    .sv-price-label {
      display: block;
      font-size: 0.82rem;
      font-weight: 600;
    }

    .sv-price-from {
      display: block;
      margin-top: 2px;
      color: #ff9b8d;
      font-size: 0.64rem;
    }

    .sv-price {
      display: block;
      font-size: 1.8rem;
      font-weight: 800;
      line-height: 1.1;
      white-space: nowrap;
      transform-origin: left center;
    }

    .sv-price.is-pop { animation: sv-pop 0.35s ease; }

    @keyframes sv-pop {
      0% { transform: scale(1); }
      40% { transform: scale(1.07); color: #ffb3aa; }
      100% { transform: scale(1); }
    }

    .btn.sv-cta {
      gap: 14px;
      padding: 16px 26px;
      border-radius: 10px;
      background: linear-gradient(135deg, #e8574a, #ff7a63);
      font-size: 1rem;
    }

    .sv-cta .ic {
      width: 20px;
      height: 20px;
    }

    .sv-popular-head {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 8px 16px;
      margin: 0 0 12px;
    }

    .sv-popular-head h2 {
      margin: 0 0 2px;
      font-size: 1.2rem;
      font-weight: 700;
    }

    .sv-popular-head p {
      margin: 0;
      color: var(--text-muted);
      font-size: 0.82rem;
    }

    .sv-all {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 0;
      border: 0;
      background: none;
      color: #8ec5ff;
      font: inherit;
      font-size: 0.86rem;
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
    }

    .sv-all:hover { color: #fff; }

    .sv-all:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 3px;
      border-radius: 4px;
    }

    .sv-all .ic {
      width: 18px;
      height: 18px;
    }

    .sv-cards {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
      margin: 0 0 16px;
      padding: 0;
      list-style: none;
    }

    .sv-card {
      display: grid;
      grid-template-rows: auto 1fr;
      overflow: hidden;
      border: 1px solid rgba(80, 140, 255, 0.34);
      border-radius: 14px;
      background: linear-gradient(165deg, rgba(14, 28, 60, 0.92), rgba(7, 15, 33, 0.94));
      box-shadow: 0 0 30px rgba(40, 100, 255, 0.08);
    }

    .sv-card--gpu {
      border-color: rgba(232, 87, 74, 0.6);
      box-shadow: 0 0 34px rgba(232, 87, 74, 0.14);
    }

    .sv-card-media {
      position: relative;
      height: 170px;
      overflow: hidden;
    }

    .sv-card-media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .sv-card-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(5, 11, 24, 0.82), transparent 55%);
      pointer-events: none;
    }

    .sv-card-price {
      position: absolute;
      left: 14px;
      bottom: 12px;
      z-index: 1;
    }

    .sv-card-price small {
      display: block;
      color: #ffb3aa;
      font-size: 0.66rem;
    }

    .sv-card-price strong {
      display: block;
      font-size: 1.4rem;
      font-weight: 800;
      line-height: 1.1;
      white-space: nowrap;
    }

    .sv-card-body {
      display: flex;
      flex-direction: column;
      padding: 16px;
    }

    .sv-card-title {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 6px 10px;
      margin: 0 0 4px;
      font-size: 1.12rem;
      font-weight: 800;
    }

    .sv-badge {
      padding: 3px 10px;
      border: 1px solid rgba(80, 140, 255, 0.7);
      border-radius: 999px;
      background: rgba(40, 100, 255, 0.12);
      color: #8ec5ff;
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .sv-badge--hot {
      border-color: rgba(232, 87, 74, 0.8);
      background: rgba(192, 57, 43, 0.14);
      color: #ff9b8d;
    }

    .sv-card-desc {
      margin: 0 0 10px;
      color: var(--text-muted);
      font-size: 0.84rem;
      line-height: 1.4;
    }

    .sv-card-list {
      display: grid;
      gap: 6px;
      margin: 0 0 14px;
      padding: 0;
      list-style: none;
      font-size: 0.8rem;
      line-height: 1.3;
    }

    .sv-card-list li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .sv-card-list .ic {
      width: 15px;
      height: 15px;
      margin-top: 1px;
      color: var(--accent-bright);
    }

    .sv-offer-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      align-self: flex-end;
      margin-top: auto;
      padding: 9px 18px;
      border: 1.5px solid rgba(232, 87, 74, 0.75);
      border-radius: 10px;
      background: rgba(192, 57, 43, 0.1);
      color: #fff;
      font: inherit;
      font-size: 0.86rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease, box-shadow 0.2s ease;
    }

    .sv-offer-btn:hover,
    .sv-offer-btn:focus-visible {
      background: var(--accent);
      box-shadow: 0 0 18px var(--accent-glow);
      outline: none;
    }

    .sv-offer-btn .ic {
      width: 18px;
      height: 18px;
    }

    .sv-why {
      display: grid;
      gap: 14px;
      padding: 16px;
      border: 1px solid rgba(80, 140, 255, 0.3);
      border-radius: 12px;
      background: rgba(8, 18, 40, 0.66);
      box-shadow: 0 0 34px rgba(40, 100, 255, 0.08);
    }

    .sv-why-head strong {
      display: block;
      font-size: 1rem;
    }

    .sv-why-head span {
      display: block;
      color: var(--text-muted);
      font-size: 0.8rem;
    }

    .sv-why-list {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .sv-why-item {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .sv-why-ic {
      display: grid;
      place-items: center;
      flex: 0 0 42px;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(80, 140, 255, 0.3);
      border-radius: 10px;
      background: rgba(10, 22, 48, 0.8);
      color: var(--accent-bright);
    }

    .sv-why-ic .ic {
      width: 22px;
      height: 22px;
    }

    .sv-why-item strong {
      display: block;
      font-size: 0.84rem;
      line-height: 1.25;
    }

    .sv-why-item small {
      display: block;
      color: var(--text-muted);
      font-size: 0.72rem;
      line-height: 1.3;
    }

    @media (min-width: 480px) {
      .sv-why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (min-width: 640px) {
      .sv-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .sv-help { grid-template-columns: 1fr auto; align-items: center; gap: 16px; }
      .sv-builder { padding: 24px 24px 26px; }
      .sv-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .sv-select select { font-size: 0.9rem; }
      .sv-hall-text {
        left: 64%;
        font-size: 0.62rem;
        letter-spacing: 0.2em;
      }
      .sv-recap-wrap { padding: 18px 24px 0; }
      .sv-buy { margin: 14px 24px 0; padding-bottom: 22px; }
      .sv-card {
        grid-template-columns: 230px minmax(0, 1fr);
        grid-template-rows: none;
      }
      .sv-card-media { height: auto; min-height: 210px; }
      .sv-card-body { padding: 18px 20px; }
      .sv-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
    }

    @media (min-width: 900px) {
      .sv-solutions { padding: 16px; }
    }

    @media (min-width: 1100px) {
      .sv-config { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
      .sv-hall-text {
        left: 58%;
        font-size: 0.56rem;
        letter-spacing: 0.14em;
        white-space: nowrap;
      }
      .sv-summary {
        border-top: 0;
        border-left: 1px solid rgba(80, 140, 255, 0.28);
      }
      .sv-why {
        grid-template-columns: 250px minmax(0, 1fr);
        align-items: center;
        gap: 24px;
        padding: 16px 24px;
      }
      .sv-why-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
      .sv-why-item { padding: 0 16px; }
      .sv-why-item + .sv-why-item { border-left: 1px solid var(--border); }
      .sv-why-item:first-child { padding-left: 0; }
    }

    @media (min-width: 1180px) {
      .self-view .hosting-head { max-width: 980px; }
      .self-view .hosting-head h1 { font-size: 2.25rem; }
      .sv-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
      .sv-card {
        grid-template-columns: 34% minmax(0, 1fr);
        grid-template-rows: none;
      }
      .sv-card-media { min-height: 230px; }
      .sv-card-body { padding: 16px 14px 14px; }
      .sv-card-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
      .sv-card-title { font-size: 1.08rem; }
      .sv-card-price strong { font-size: clamp(1rem, calc(1.15vw + 0.15rem), 1.2rem); }
    }

    @media (min-width: 1400px) {
      .sv-layout { grid-template-columns: 232px minmax(0, 1fr); }
      .sv-tabs { grid-template-columns: minmax(0, 1fr); gap: 10px; }
      .sv-tab { min-height: 50px; padding: 8px 14px; }
      .sv-tab .sv-tab-chev { display: block; }
      .sv-help { grid-template-columns: minmax(0, 1fr); gap: 8px; }
      .sv-builder { padding: 24px 24px 24px; }
    }

    @media (max-width: 479px) {
      .sv-kicker { letter-spacing: 0.16em; }
      .sv-card-price strong { font-size: 1.3rem; }
    }

    /* ---------- Accueil : vision, mission, valeurs ---------- */
    .vision { max-width: 1240px; margin: 56px auto 0; padding: 0 20px; }
    .vision-kicker { display: inline-block; color: var(--accent-bright); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
    .vision-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; padding: 28px 24px; border: 1px solid rgba(80, 140, 255, 0.32); border-radius: 18px; background: linear-gradient(165deg, rgba(14, 28, 60, 0.92), rgba(7, 15, 33, 0.94)); }
    .vision-copy h2 { margin: 10px 0 12px; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.2; }
    .vision-copy .highlight { color: var(--accent-bright); background: none; -webkit-text-fill-color: currentColor; }
    .vision-copy p { margin: 0; color: var(--text-muted); font-size: 1.02rem; }
    .vision-levers { display: grid; gap: 10px; }
    .vision-levers-lead { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
    .vision-lever { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid rgba(232, 87, 74, 0.45); border-radius: 14px; background: rgba(192, 57, 43, 0.12); }
    .vision-lever strong { font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.2; }
    .vision-lever-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; }
    .vision-lever-ic svg { width: 24px; height: 24px; }
    .vision-levers-foot { margin: 2px 0 0; color: var(--text); font-weight: 600; font-size: 0.95rem; }
    .vision-diff { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 14px 0 0; }
    .vision-diff-item { padding: 20px 22px; border: 1px solid var(--border); border-radius: 16px; background: rgba(14, 26, 50, 0.72); }
    .vision-diff-item p { margin: 8px 0 0; color: var(--text-muted); }
    .vision-values { margin: 28px 0 0; }
    .vision-values-title { margin: 0 0 12px; font-size: 1.2rem; }
    .vision-values-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .vision-values-list li { padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--accent-bright); border-radius: 12px; background: rgba(14, 26, 50, 0.72); }
    .vision-values-list strong { display: block; margin-bottom: 2px; }
    .vision-values-list span { color: var(--text-muted); font-size: 0.92rem; }
    @media (min-width: 700px) {
      .vision-diff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .vision-values-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1000px) {
      .vision-main { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; padding: 36px 40px; }
      .vision-values-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    /* @@IA:core:css:start@@ */
    /* ======================================================================
       IA : primitives partagees des pages + rendu du moteur de diagrammes fx
       (fichier core.css - genere par build.py, ne pas modifier dans landing.html)
       ====================================================================== */
    :root {
      --ia-panel-bg: linear-gradient(165deg, rgba(14, 28, 60, 0.92), rgba(7, 15, 33, 0.94));
      --ia-panel-border: rgba(80, 140, 255, 0.32);
      --ia-line: rgba(120, 160, 220, 0.16);
      --ia-coral-soft: #ffb3aa;
      --fx-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, "Roboto Mono", monospace;
      --fx-node-bg: linear-gradient(170deg, #10203f 0%, #0a1430 100%);
      --fx-k-data: #5fc8ff;
      --fx-k-event: #86a9ff;
      --fx-k-control: #a9b8d6;
      --fx-k-payment: #ff7b68;
      --fx-k-secure: #3ddbc1;
      --fx-k-feedback: #8d9bb8;
      --fx-k-ai: #a48dff;
      --fx-p-jrose: #f283aa;
      --fx-p-se: #3ddbc1;
      --fx-p-tib: #f2b544;
      --fx-p-hdce: #ff6f5e;
      --fx-p-ext: #9aabc6;
    }

    /* Carte de fond attenuee sur les pages IA */
    #network-canvas { transition: opacity 0.6s ease; }
    #network-canvas.is-ia-dim { opacity: 0.4; }

    /* Modales : visibles des l'ouverture (le fondu reste porte par l'opacite) pour que le focus initial
       sur le bouton de fermeture aboutisse meme si la trame suivante tarde ; la fermeture garde son fondu */
    .modal-overlay.is-open { transition: opacity 0.25s ease, visibility 0s; }

    /* ---------- Modale IA : choix de page ---------- */
    .ia-choices {
      display: grid;
      gap: 10px;
      margin: 0 0 24px;
    }

    .ia-choice {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      padding: 15px 16px;
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.025);
      color: var(--text);
      text-decoration: none;
      transition: border-color 0.2s ease, background 0.2s ease;
    }

    .ia-choice:hover,
    .ia-choice:focus-visible {
      border-color: rgba(232, 87, 74, 0.6);
      background: rgba(232, 87, 74, 0.07);
      outline: none;
    }

    .ia-choice:focus-visible { box-shadow: 0 0 0 2px var(--cyan); }

    .ia-choice-num {
      font-family: var(--fx-mono);
      font-size: 0.74rem;
      letter-spacing: 0.08em;
      color: var(--ia-coral-soft);
    }

    .ia-choice-body strong {
      display: block;
      margin-bottom: 2px;
      color: #fff;
      font-size: 1rem;
      line-height: 1.3;
    }

    .ia-choice-body span {
      display: block;
      color: var(--text-muted);
      font-size: 0.88rem;
      line-height: 1.42;
    }

    .ia-choice .card-arrow { width: 34px; height: 34px; color: #fff; }
    .ia-choice .card-arrow .ic { width: 16px; height: 16px; stroke-width: 2; }

    .ia-choice:hover .card-arrow,
    .ia-choice:focus-visible .card-arrow {
      background: rgba(232, 87, 74, 0.15);
      box-shadow: 0 0 14px var(--accent-glow);
    }

    /* ---------- Vues IA : structure ---------- */
    .ia-wrap {
      max-width: 1440px;
      margin: 0 auto;
    }

    .ia-subnav {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px 24px;
      margin: 0 0 30px;
    }

    .ia-subnav .back-link { margin: 0; }

    .ia-subnav-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px;
      width: 100%;
      margin: 0;
      padding: 4px;
      list-style: none;
      border: 1px solid rgba(80, 140, 255, 0.26);
      border-radius: 12px;
      background: rgba(8, 17, 38, 0.8);
    }

    .ia-subnav-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1px;
      min-height: 48px;
      padding: 6px 4px;
      border-radius: 9px;
      color: var(--text-muted);
      font-size: 0.78rem;
      font-weight: 600;
      line-height: 1.2;
      text-align: center;
      text-decoration: none;
      transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    /* chiffres en police de texte (le zero pointe des polices mono se lit « B » a petite taille sur ecran 1x) */
    .ia-subnav-num {
      font-family: var(--font);
      font-size: 0.72rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.06em;
      color: rgba(154, 171, 198, 0.78);
    }

    .ia-subnav-link:hover { color: #fff; background: rgba(95, 200, 255, 0.07); }

    .ia-subnav-link:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
      color: #fff;
    }

    .ia-subnav-link[aria-current="page"] {
      color: #fff;
      background: linear-gradient(160deg, rgba(232, 87, 74, 0.24), rgba(192, 57, 43, 0.1));
      box-shadow: inset 0 0 0 1px rgba(232, 87, 74, 0.55);
    }

    .ia-subnav-link[aria-current="page"] .ia-subnav-num { color: var(--ia-coral-soft); }

    .ia-subnav-long { display: none; }

    /* Sous-navigation « Développement sur mesure » (#iaproc, #iaplat) : libelle du groupe + 2 pages */
    .ia-subnav-list--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ia-subnav-label {
      grid-column: 1 / -1;
      padding: 6px 10px 2px;
      color: var(--ia-coral-soft);
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      line-height: 1.3;
      text-transform: uppercase;
    }

    @media (min-width: 640px) {
      .ia-subnav-list--duo .ia-subnav-long { display: inline; }
      .ia-subnav-list--duo .ia-subnav-short { display: none; }
    }

    @media (min-width: 1400px) {
      .ia-subnav-list--duo { grid-template-columns: auto repeat(2, minmax(0, 1fr)); }
      .ia-subnav-list--duo .ia-subnav-label {
        grid-column: auto;
        align-self: center;
        padding: 0 8px 0 12px;
      }
    }

    /* Titre de page : recoit le focus apres un changement de vue (route), sans anneau visible */
    .ia-view h1[tabindex="-1"]:focus { outline: none; }

    /* ---------- Vues IA : hero ---------- */
    .ia-hero {
      display: grid;
      gap: 28px;
      align-items: center;
      margin-bottom: 20px;
    }

    .ia-hero-copy,
    .ia-hero-visual { min-width: 0; }

    .ia-eyebrow {
      display: inline-block;
      margin-bottom: 16px;
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid rgba(232, 87, 74, 0.45);
      background: rgba(192, 57, 43, 0.12);
      color: var(--ia-coral-soft);
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .ia-h1 {
      margin: 0 0 16px;
      font-size: clamp(1.9rem, 6.4vw, 3.2rem);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -0.02em;
      overflow-wrap: break-word;
      text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
    }

    .ia-h1 .highlight,
    .ia-section-head .highlight {
      background: linear-gradient(90deg, var(--accent-bright), #ff8a65);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .ia-lead {
      max-width: 620px;
      margin: 0 0 24px;
      color: var(--text);
      opacity: 0.9;
      font-size: clamp(1rem, 2.6vw, 1.12rem);
      text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
    }

    .ia-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
    }

    .ia-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 12px 24px;
      border: 1.5px solid transparent;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent), var(--accent-bright));
      color: #fff;
      font: inherit;
      font-weight: 600;
      line-height: 1.2;
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 8px 30px var(--accent-glow);
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }

    .ia-btn .ic { width: 20px; height: 20px; }

    .ia-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 38px var(--accent-glow); }

    .ia-btn:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 3px;
    }

    .ia-btn--ghost {
      border-color: rgba(140, 190, 255, 0.5);
      background: rgba(95, 200, 255, 0.06);
      box-shadow: none;
    }

    .ia-btn--ghost:hover {
      border-color: rgba(140, 200, 255, 0.85);
      background: rgba(95, 200, 255, 0.14);
      box-shadow: 0 0 22px rgba(95, 200, 255, 0.16);
    }

    /* ---------- Vues IA : sections et panneaux ---------- */
    .ia-section {
      margin-top: 56px;
      scroll-margin-top: 90px;
    }

    .ia-section-head {
      max-width: 820px;
      margin: 0 0 24px;
    }

    .ia-section-head--center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .ia-kicker {
      display: block;
      margin-bottom: 10px;
      color: var(--ia-coral-soft);
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .ia-section-head h2 {
      margin: 0 0 10px;
      font-size: clamp(1.45rem, 3.6vw, 2.2rem);
      font-weight: 750;
      line-height: 1.18;
      letter-spacing: -0.01em;
    }

    .ia-section-head p {
      margin: 0;
      color: var(--text-muted);
      font-size: clamp(0.95rem, 2.2vw, 1.06rem);
    }

    .ia-panel {
      border: 1px solid var(--ia-panel-border);
      border-radius: 14px;
      background: var(--ia-panel-bg);
      box-shadow: 0 0 40px rgba(40, 100, 255, 0.1), inset 0 0 0 1px rgba(80, 140, 255, 0.05);
      padding: 14px;
    }

    .ia-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
    }

    .ia-card {
      min-width: 0;
      padding: 18px;
      border: 1px solid var(--ia-panel-border);
      border-radius: 14px;
      background: var(--ia-panel-bg);
    }

    .ia-card h3 {
      margin: 0 0 6px;
      font-size: 1.02rem;
      line-height: 1.3;
      color: #fff;
    }

    .ia-card p {
      margin: 0;
      color: var(--text-muted);
      font-size: 0.9rem;
      line-height: 1.5;
    }

    /* ======================================================================
       Moteur fx : diagramme anime
       ====================================================================== */
    .fx {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      min-width: 0;
      scroll-margin-top: 90px;
    }

    .fx:focus { outline: none; }

    .fx:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 6px;
      border-radius: 12px;
    }

    .fx-viewport {
      position: relative;
      min-width: 0;
    }

    /* La zone de defilement deborde de 12px autour de la scene (marge negative + padding : la mise en page
       ne bouge pas) pour que les lueurs des noeuds et des paquets ne soient pas coupees sur les bords */
    .fx--pan .fx-viewport {
      margin: -12px;
      padding: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .fx--pan .fx-viewport::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }

    .fx-viewport:focus { outline: none; }

    .fx-viewport:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
      border-radius: 10px;
    }

    .fx.is-overflow .fx-viewport {
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
      mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
    }

    .fx.is-overflow.is-at-start .fx-viewport {
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
      mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
    }

    .fx.is-overflow.is-at-end .fx-viewport {
      -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent 100%);
      mask-image: linear-gradient(to left, #000 calc(100% - 30px), transparent 100%);
    }

    .fx-stage {
      position: relative;
      isolation: isolate;
      min-width: 0;
      -webkit-user-select: none;
      user-select: none;
    }

    .fx-wires {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    .fx-pan-hint {
      display: none;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      margin: -4px 2px 0;
      color: var(--text-muted);
      font-size: 0.74rem;
      letter-spacing: 0.03em;
    }

    .fx-pan-hint .ic {
      width: 16px;
      height: 16px;
      color: var(--cyan);
      animation: fx-nudge 1.8s ease-in-out infinite;
    }

    .fx-pan-hint-m { display: none; }

    .fx.is-overflow .fx-pan-hint { display: flex; }
    .fx.is-overflow.is-panned .fx-pan-hint { opacity: 0.55; }
    .fx.is-idle .fx-pan-hint .ic { animation-play-state: paused; }

    /* Souris : glisser pour defiler (Maj + molette est natif) */
    @media (hover: hover) and (pointer: fine) {
      .fx-pan-hint-t { display: none; }
      .fx-pan-hint-m { display: inline; }
      .fx--pan.is-overflow .fx-viewport { cursor: grab; }
      .fx--pan.is-dragging .fx-viewport { cursor: grabbing; }
    }

    @keyframes fx-nudge {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(4px); }
    }

    /* ----- Mise en page optionnelle dans la scene ----- */
    .fx-cols {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      column-gap: var(--fx-gap-x, 56px);
      align-items: stretch;
    }

    .fx-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: var(--fx-gap-y, 14px);
      min-width: 0;
    }

    .fx-col > .fx-col-head ~ :last-child { margin-bottom: auto; }

    .fx-col-head {
      margin: 0 0 auto;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--ia-line);
      color: rgba(154, 171, 198, 0.8);
      font-family: var(--fx-mono);
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-align: center;
      text-transform: uppercase;
    }

    /* ----- Noeuds ----- */
    .fx-node,
    .fx-vig,
    .fx-elabel { --fx-accent: var(--cyan); }

    .fx-node {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
      padding: 10px 12px 11px;
      border: 1px solid rgba(110, 150, 220, 0.28);
      border-radius: 10px;
      background: var(--fx-node-bg);
      color: var(--text);
      line-height: 1.25;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
      transition: border-color 0.45s ease, box-shadow 0.45s ease, background 0.45s ease;
    }

    .fx-node > * { transition: opacity 0.45s ease, filter 0.45s ease; }

    /* jamais tronquee (noms de produits) : passe a la ligne si le noeud est etroit */
    .fx-tag {
      display: block;
      min-width: 0;
      color: var(--text-muted);
      font-family: var(--fx-mono);
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      line-height: 1.4;
      overflow-wrap: break-word;
      text-transform: uppercase;
      transition: color 0.45s ease, opacity 0.45s ease, filter 0.45s ease;
    }

    .fx-tag::before {
      content: "";
      display: inline-block;
      position: relative;
      top: -0.1em;
      width: 6px;
      height: 6px;
      margin-right: 6px;
      border-radius: 50%;
      vertical-align: middle;
      background: var(--fx-accent);
      opacity: 0.45;
      transition: opacity 0.45s ease, box-shadow 0.45s ease;
    }

    .fx-title {
      display: block;
      color: #fff;
      font-size: 0.88rem;
      font-weight: 650;
      line-height: 1.25;
      overflow-wrap: anywhere;
      -webkit-hyphens: auto;
      hyphens: auto;
    }

    .fx-sub {
      display: block;
      color: var(--text-muted);
      font-size: 0.74rem;
      line-height: 1.3;
      overflow-wrap: anywhere;
      -webkit-hyphens: auto;
      hyphens: auto;
    }

    .fx-node--hub {
      align-items: center;
      padding: 16px 18px;
      border-width: 1.5px;
      text-align: center;
    }

    .fx-node--hub .fx-title { font-size: 1rem; }

    .fx-node--sm { padding: 8px 10px 9px; }
    .fx-node--sm .fx-title { font-size: 0.8rem; }

    .fx-node--ghost {
      border-style: dashed;
      background: #0a142c;
    }

    .fx-node.is-lit {
      border-color: var(--fx-accent);
      background: linear-gradient(170deg, color-mix(in srgb, var(--fx-accent) 15%, #10203f) 0%, #0a1430 100%);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent) 40%, transparent), 0 0 28px color-mix(in srgb, var(--fx-accent) 28%, transparent), 0 8px 22px rgba(0, 0, 0, 0.4);
    }

    .fx-node.is-lit .fx-tag { color: color-mix(in srgb, var(--fx-accent) 70%, #fff); }

    .fx-node.is-lit .fx-tag::before,
    .fx-node.is-done .fx-tag::before { opacity: 1; }

    .fx-node.is-lit .fx-tag::before { box-shadow: 0 0 8px var(--fx-accent); }

    .fx-node.is-done { border-color: color-mix(in srgb, var(--fx-accent) 48%, transparent); }

    .fx--static .fx-node.is-done {
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent) 30%, transparent), 0 6px 18px rgba(0, 0, 0, 0.35);
    }

    /* Hors scenario : le fond reste opaque (les liens passent dessous), seul le contenu s'estompe */
    .fx-node.is-dim {
      border-color: rgba(110, 150, 220, 0.12);
      box-shadow: none;
    }

    .fx-node.is-dim > * {
      opacity: 0.34;
      filter: saturate(0.55);
    }

    /* Accents produits (noeuds, vignettes, etiquettes) */
    .fx-prod--jrose { --fx-accent: var(--fx-p-jrose); }
    .fx-prod--se { --fx-accent: var(--fx-p-se); }
    .fx-prod--tib { --fx-accent: var(--fx-p-tib); }
    .fx-prod--hdce { --fx-accent: var(--fx-p-hdce); }
    .fx-prod--ext { --fx-accent: var(--fx-p-ext); }
    .fx-prod--ai { --fx-accent: var(--fx-k-ai); }

    /* ----- Connecteurs ----- */
    .fx-edge,
    .fx-pk,
    .fx-elabel { --fx-c: var(--fx-k-data); }

    .fx-k-event { --fx-c: var(--fx-k-event); }
    .fx-k-control { --fx-c: var(--fx-k-control); }
    .fx-k-payment { --fx-c: var(--fx-k-payment); }
    .fx-k-secure { --fx-c: var(--fx-k-secure); }
    .fx-k-feedback { --fx-c: var(--fx-k-feedback); }
    .fx-k-ai { --fx-c: var(--fx-k-ai); }

    .fx-wire {
      fill: none;
      stroke: var(--fx-c);
      stroke-width: 1.4;
      stroke-opacity: 0.34;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke-opacity 0.45s ease, stroke-width 0.45s ease;
    }

    .fx-k-feedback .fx-wire { stroke-dasharray: 4 5; }

    .fx-flow {
      fill: none;
      stroke: var(--fx-c);
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-dasharray: 2 10;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .fx-arrow {
      fill: var(--fx-c);
      fill-opacity: 0.5;
      transition: fill-opacity 0.45s ease;
    }

    .fx-edge.is-active .fx-wire { stroke-opacity: 0.95; stroke-width: 1.9; }

    .fx-edge.is-active .fx-flow {
      opacity: 0.9;
      animation: fx-flow 0.8s linear infinite;
    }

    .fx-edge.is-active.is-rev .fx-flow { animation-direction: reverse; }
    .fx.is-paused .fx-edge.is-active .fx-flow { animation-play-state: paused; }

    /* Gel complet : bouton pause (is-frozen) ou diagramme hors ecran / vue masquee / onglet cache (is-idle).
       Toutes les animations CSS de la scene (vignettes du moteur ET de la page) et de la console s'arretent sur place. */
    .fx.is-frozen .fx-stage *,
    .fx.is-frozen .fx-stage *::before,
    .fx.is-frozen .fx-stage *::after,
    .fx.is-frozen .fx-console *,
    .fx.is-idle .fx-stage *,
    .fx.is-idle .fx-stage *::before,
    .fx.is-idle .fx-stage *::after,
    .fx.is-idle .fx-console * { animation-play-state: paused !important; }

    /* Parcours a contresens : la fleche de depart remplace celle d'arrivee */
    .fx-arrow-rev { display: none; }
    .fx-edge.is-rev .fx-arrow-rev { display: inline; }
    .fx-edge.is-rev .fx-arrow-end { display: none; }
    .fx-edge.is-active .fx-arrow { fill-opacity: 1; }
    .fx-edge.is-done .fx-wire { stroke-opacity: 0.62; stroke-width: 1.6; }
    .fx-edge.is-done .fx-arrow { fill-opacity: 0.8; }
    .fx-edge.is-dim .fx-wire { stroke-opacity: 0.09; }
    .fx-edge.is-dim .fx-arrow { fill-opacity: 0.12; }
    .fx-edge.is-off,
    .fx-edge--ghost:not(.is-active):not(.is-done) { display: none; }
    .fx-edge--ghost .fx-wire { stroke-dasharray: 3 4; }

    @keyframes fx-flow {
      to { stroke-dashoffset: -12; }
    }

    .fx-elabel {
      position: absolute;
      z-index: 3;
      left: 0;
      top: 0;
      padding: 1px 6px;
      border: 1px solid color-mix(in srgb, var(--fx-c) 35%, transparent);
      border-radius: 4px;
      background: rgba(5, 11, 24, 0.92);
      color: color-mix(in srgb, var(--fx-c) 65%, #fff);
      font-family: var(--fx-mono);
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      line-height: 1.5;
      text-transform: uppercase;
      white-space: nowrap;
      pointer-events: none;
      transform: translate(-50%, -50%);
      transition: opacity 0.45s ease;
    }

    .fx-elabel.is-dim,
    .fx-elabel.is-off { opacity: 0.12; }
    .fx-elabel.is-off { display: none; }
    .fx-elabel.is-hidden { visibility: hidden; }

    /* ----- Paquets ----- */
    .fx-pk-halo { fill: var(--fx-c); fill-opacity: 0.26; }
    .fx-pk-tail { fill: var(--fx-c); }
    .fx-pk-head { fill: #fff; }

    /* ----- Vignettes ----- */
    .fx-vig {
      position: absolute;
      z-index: 4;
      width: max-content;
      max-width: min(260px, calc(100% - 8px));
      padding: 10px 12px;
      border: 1px solid color-mix(in srgb, var(--fx-accent) 45%, rgba(120, 170, 255, 0.3));
      border-radius: 10px;
      background: linear-gradient(170deg, #112042, #081024);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 26px color-mix(in srgb, var(--fx-accent) 16%, transparent);
      color: var(--text);
      font-size: 0.74rem;
      line-height: 1.35;
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px) scale(0.97);
      transform-origin: 50% 100%;
      transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.4s;
      pointer-events: none;
    }

    .fx-vig.is-on {
      opacity: 1;
      visibility: visible;
      transform: none;
      transition-delay: 0s;
    }

    .fx-vig-head {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 6px;
      color: var(--text-muted);
      font-family: var(--fx-mono);
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .fx-vig-head .ic {
      width: 16px;
      height: 16px;
      color: var(--fx-accent);
    }

    .fx-vig-title {
      display: block;
      color: #fff;
      font-size: 0.82rem;
      font-weight: 650;
    }

    .fx-vig-meta {
      display: block;
      color: var(--text-muted);
      font-size: 0.7rem;
    }

    .fx-vig-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 3px 0;
      border-top: 1px dashed var(--ia-line);
      font-size: 0.7rem;
    }

    .fx-vig-row > :last-child { color: #fff; font-weight: 600; }

    .fx-vig-ok {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 7px;
      padding: 2px 9px;
      border-radius: 999px;
      background: rgba(61, 219, 193, 0.12);
      color: #86f0dd;
      font-size: 0.66rem;
      font-weight: 600;
    }

    .fx-vig-ok .ic { width: 14px; height: 14px; }

    .fx-vig-progress {
      height: 4px;
      margin-top: 8px;
      overflow: hidden;
      border-radius: 4px;
      background: rgba(120, 160, 220, 0.18);
    }

    .fx-vig-progress::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, var(--fx-accent), #fff);
      transform: scaleX(0);
      transform-origin: left center;
    }

    .fx-vig.is-on .fx-vig-progress::after { animation: fx-fill 1.2s ease 0.2s forwards; }

    .fx-vig-draw {
      display: block;
      width: 100%;
      height: auto;
      fill: none;
      stroke: var(--fx-accent);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .fx-vig-draw [pathLength] {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
    }

    .fx-vig.is-on .fx-vig-draw [pathLength] { animation: fx-draw 1.4s ease 0.25s forwards; }

    @keyframes fx-fill {
      to { transform: scaleX(1); }
    }

    @keyframes fx-draw {
      to { stroke-dashoffset: 0; }
    }

    /* ----- Console ----- */
    .fx-sr {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    .fx-console {
      display: grid;
      gap: 6px;
      min-width: 0;
      padding: 13px 14px;
      border: 1px solid rgba(80, 140, 255, 0.26);
      border-radius: 12px;
      background: rgba(7, 15, 33, 0.88);
    }

    .fx-con-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
      color: var(--text-muted);
      font-family: var(--fx-mono);
      font-size: 0.64rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .fx-con-step {
      flex: none;
      color: var(--ia-coral-soft);
      font-weight: 600;
    }

    .fx-con-scn {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fx-con-title {
      margin: 0;
      color: #fff;
      font-size: 0.98rem;
      font-weight: 650;
      line-height: 1.3;
    }

    .fx-con-text {
      min-height: 2.8em;
      margin: 0;
      color: var(--text-muted);
      font-size: 0.86rem;
      line-height: 1.4;
    }

    /* Journal : hauteur fixe (pas de saut de page), --fx-log-lines lignes. Le DOM va du plus recent au plus ancien ;
       column-reverse + justify-content:flex-end remplit depuis le HAUT (plus recent en dernier, sous les autres) et wrap
       envoie dans une colonne invisible (a droite, hors cadre) toute entree ancienne qui ne tient pas ENTIERE :
       jamais de ligne coupee ni de suite orpheline, pas de puits vide au-dessus des premieres entrees. */
    .fx-log {
      display: flex;
      flex-direction: column-reverse;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-content: flex-start;
      column-gap: 24px;
      /* +2px : marge d'arrondi pour que N lignes tiennent vraiment dans N lignes */
      height: calc(var(--fx-log-lines, 5) * 1.6em + 18px);
      margin: 4px 0 0;
      padding: 8px 10px;
      overflow: hidden;
      list-style: none;
      border: 1px solid rgba(80, 140, 255, 0.14);
      border-radius: 8px;
      background: rgba(2, 6, 16, 0.72);
      font-family: var(--fx-mono);
      font-size: 0.66rem;
      line-height: 1.6;
    }

    .fx-log li {
      display: flex;
      flex: none;
      gap: 10px;
      width: 100%;
      min-width: 0;
    }

    .fx-log li.is-new { animation: fx-log-in 0.35s ease; }

    /* journal vide (depart d'un scenario) : ligne d'attente discrete plutot qu'un cadre noir vide */
    .fx-log:empty::before {
      content: "Waiting for events…";
      color: rgba(154, 171, 198, 0.45);
    }

    .fx-log-t { flex: none; color: rgba(154, 171, 198, 0.62); white-space: nowrap; }

    /* source, evenement, reference : passent a la ligne (retrait sous la source) plutot que d'etre coupes */
    .fx-log-m {
      display: flex;
      flex: 1 1 auto;
      flex-wrap: wrap;
      column-gap: 10px;
      min-width: 0;
    }

    .fx-log-s,
    .fx-log-e,
    .fx-log-r {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fx-log-s { color: var(--cyan); }
    .fx-log-e { color: var(--text); }
    .fx-log-r { color: var(--ia-coral-soft); }

    /* Mouvement reduit : journal complet, sans hauteur fixe */
    .fx--static .fx-log {
      height: auto;
      min-height: calc(3 * 1.6em + 16px);
    }

    @keyframes fx-log-in {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: none; }
    }

    /* ----- Controles ----- */
    .fx-controls {
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    /* puces a la largeur de leur contenu (libelle et etiquette sur une ligne chacun quand c'est possible) */
    .fx-scn {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .fx-chip {
      display: flex;
      flex: 0 1 auto;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      min-width: 0;
      max-width: 340px;
      padding: 9px 12px;
      border: 1px solid rgba(80, 140, 255, 0.26);
      border-radius: 10px;
      background: rgba(10, 20, 44, 0.78);
      color: var(--text);
      font: inherit;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }

    .fx-chip:hover { border-color: rgba(95, 200, 255, 0.55); }

    .fx-chip-l {
      font-size: 0.82rem;
      font-weight: 650;
      line-height: 1.25;
    }

    .fx-chip-t {
      color: var(--text-muted);
      font-size: 0.66rem;
      line-height: 1.3;
    }

    .fx-chip[aria-pressed="true"] {
      border-color: rgba(232, 87, 74, 0.75);
      background: linear-gradient(160deg, rgba(232, 87, 74, 0.2), rgba(192, 57, 43, 0.07));
      box-shadow: 0 0 18px rgba(232, 87, 74, 0.16);
    }

    .fx-scn-sum {
      margin: 0;
      color: var(--text-muted);
      font-size: 0.84rem;
      line-height: 1.45;
    }

    /* Variante compacte (hero) : pas de resume de scenario, journal de 3 lignes */
    .fx--compact { --fx-log-lines: 3; }
    .fx--compact .fx-scn-sum { display: none; }

    .fx-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }

    .fx-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-width: 40px;
      height: 40px;
      padding: 0 14px;
      border: 1px solid rgba(120, 160, 220, 0.32);
      border-radius: 999px;
      background: rgba(10, 20, 44, 0.75);
      color: #fff;
      font: inherit;
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
    }

    .fx-btn--icon {
      width: 40px;
      padding: 0;
    }

    .fx-btn .ic {
      width: 18px;
      height: 18px;
      stroke-width: 2;
    }

    .fx-btn:hover {
      border-color: rgba(95, 200, 255, 0.6);
      background: rgba(95, 200, 255, 0.1);
    }

    .fx-btn[aria-disabled="true"] {
      opacity: 0.38;
      cursor: default;
    }

    .fx-btn[aria-disabled="true"]:hover {
      border-color: rgba(120, 160, 220, 0.32);
      background: rgba(10, 20, 44, 0.75);
    }

    .fx-chip:focus-visible,
    .fx-btn:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
    }

    .fx-steps {
      display: flex;
      flex: 1 1 90px;
      gap: 3px;
      min-width: 60px;
    }

    .fx-steps span {
      flex: 1;
      height: 3px;
      border-radius: 2px;
      background: rgba(120, 160, 220, 0.2);
      transition: background 0.3s ease;
    }

    .fx-steps .is-done { background: rgba(95, 200, 255, 0.55); }
    .fx-steps .is-cur { background: var(--accent-bright); }

    /* ----- Barre de temps des heros (data-fx-timeline, fxSteps) : lecture/pause + un segment par etape.
       Le segment courant se remplit sur la duree de l'etape (animation CSS gelee par .is-held). ----- */
    .fx-tl {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      padding: 5px 14px 5px 5px;
      border: 1px solid rgba(120, 160, 220, 0.24);
      border-radius: 999px;
      background: rgba(6, 13, 30, 0.84);
      box-shadow: 0 8px 24px rgba(0, 8, 24, 0.28);
    }

    .fx-tl-btn {
      display: inline-flex;
      flex: none;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 6.9em;
      height: 34px;
      padding: 0 12px 0 10px;
      border: 1px solid rgba(232, 87, 74, 0.6);
      border-radius: 999px;
      background: rgba(232, 87, 74, 0.16);
      color: #fff;
      font: inherit;
      font-size: 0.78rem;
      font-weight: 650;
      line-height: 1;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .fx-tl-btn .ic {
      width: 15px;
      height: 15px;
      stroke-width: 2.2;
    }

    .fx-tl-btn:hover {
      border-color: var(--accent-bright);
      background: rgba(232, 87, 74, 0.3);
    }

    .fx-tl-btn[aria-pressed="true"] {
      border-color: rgba(95, 200, 255, 0.6);
      background: rgba(95, 200, 255, 0.14);
    }

    .fx-tl-btn[aria-pressed="true"]:hover { background: rgba(95, 200, 255, 0.26); }

    .fx-tl-body {
      display: grid;
      flex: 1 1 auto;
      gap: 1px;
      min-width: 0;
    }

    .fx-tl-label {
      display: flex;
      min-width: 0;
      margin: 0;
      color: var(--text-muted);
      font-family: var(--fx-mono);
      font-size: 0.68rem;
      letter-spacing: 0.04em;
      line-height: 1.35;
      white-space: nowrap;
    }

    .fx-tl-n {
      flex: none;
      color: #fff;
      font-weight: 600;
      text-transform: uppercase;
    }

    .fx-tl-t {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fx-tl-t::before {
      content: "·";
      margin: 0 0.55em;
      color: var(--accent-bright);
    }

    .fx-tl-segs {
      display: flex;
      gap: 4px;
    }

    /* cible de 20px de haut pour une barre de 4px */
    .fx-tl-seg {
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      height: 20px;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 4px;
      background: none;
      cursor: pointer;
    }

    .fx-tl-seg::before,
    .fx-tl-fill {
      position: absolute;
      left: 0;
      right: 0;
      top: 8px;
      height: 4px;
      border-radius: 2px;
    }

    .fx-tl-seg::before {
      content: "";
      background: rgba(120, 160, 220, 0.22);
      transition: background 0.2s ease;
    }

    .fx-tl-fill {
      background: rgba(95, 200, 255, 0.62);
      transform: scaleX(0);
      transform-origin: left center;
    }

    .fx-tl-seg.is-done .fx-tl-fill { transform: scaleX(1); }
    .fx-tl-seg.is-cur::before { background: rgba(232, 87, 74, 0.24); }
    .fx-tl-seg.is-cur .fx-tl-fill { background: linear-gradient(90deg, var(--accent), var(--accent-bright)); }
    .fx-tl.is-static .fx-tl-seg.is-cur .fx-tl-fill { transform: scaleX(1); }
    .fx-tl.is-held .fx-tl-fill { animation-play-state: paused !important; }
    .fx-tl-seg:hover::before { background: rgba(95, 200, 255, 0.42); }

    .fx-tl-btn:focus-visible,
    .fx-tl-seg:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
    }

    @keyframes fx-tl-a {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    @keyframes fx-tl-b {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    /* fxSteps : pause, hors ecran ou vue masquee = gel complet des animations CSS du hero */
    .fx-steps-root.is-held *,
    .fx-steps-root.is-held *::before,
    .fx-steps-root.is-held *::after { animation-play-state: paused !important; }

    /* ---------- Vues IA : responsive ---------- */
    @media (max-width: 639px) {
      .fx-cols--reflow {
        grid-auto-flow: row;
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--fx-gap-y-sm, 34px);
      }
      /* chaque colonne devient une rangee ; au-dela de la largeur utile, 3 noeuds passent en 2 + 1 */
      .fx-cols--reflow > .fx-col {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--fx-gap-wrap-sm, 18px) var(--fx-gap-x-sm, 28px);
      }
      .fx-cols--reflow > .fx-col > .fx-node { flex: 1 1 var(--fx-node-min-sm, 112px); }
      .fx-cols--reflow .fx-col-head { display: none; }
      /* etiquettes mono plus lisibles sur telephone, sur 2 lignes au besoin (jamais tronquees) */
      .fx-tag {
        font-size: 0.66rem;
        letter-spacing: 0.04em;
      }
      .fx-col-head,
      .fx-vig-head {
        font-size: 0.68rem;
        letter-spacing: 0.06em;
      }
      .fx-elabel {
        font-size: 0.66rem;
        letter-spacing: 0.04em;
      }
      /* nom du scenario sur sa propre ligne plutot que coupe par des points de suspension */
      .fx-con-head { flex-wrap: wrap; row-gap: 2px; }
      .fx-con-scn {
        flex: 1 1 100%;
        overflow: visible;
        white-space: normal;
      }
      .fx-log { font-size: 0.64rem; }
      .fx-log li { gap: 8px; }
      .fx-log-m { column-gap: 8px; }
      .fx-log-ms { display: none; }
      .fx--compact { --fx-log-lines: 4; }
      /* puces sur 2 colonnes ; « Rejouer » en icone seule pour garder la barre de lecture sur une ligne */
      .fx-scn {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .fx-chip { max-width: none; }
      .fx-btn--replay {
        width: 40px;
        padding: 0;
      }
      .fx-btn--replay > span { display: none; }
    }

    @media (min-width: 640px) {
      .ia-panel { padding: 18px; }
      .ia-grid--2,
      .ia-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .fx-console { padding: 14px 16px; }
      /* sous-navigation : numero et libelle court sur une ligne, cases egales (libelles longs des 1400px) */
      .ia-subnav-link {
        flex-direction: row;
        gap: 10px;
        min-height: 44px;
        padding: 8px 12px;
        font-size: 0.84rem;
        white-space: nowrap;
      }
    }

    @media (min-width: 900px) {
      .ia-section { margin-top: 84px; }
      .ia-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      /* console large : etape a gauche, journal a droite */
      .fx { --fx-log-lines: 6; }
      .fx--compact { --fx-log-lines: 4; }
      /* la 4e rangee (1fr) absorbe la hauteur du journal : pas d'espace entre titre et texte */
      .fx-console {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        grid-template-rows: auto auto auto 1fr;
        column-gap: 20px;
        align-content: start;
      }
      .fx-con-head,
      .fx-con-live,
      .fx-con-text { grid-column: 1; }
      .fx-log {
        grid-column: 2;
        grid-row: 1 / span 4;
        margin: 0;
      }
    }

    /* Hero et sous-navigation partagent la meme grille : la liste des pages s'aligne sur la colonne du diagramme.
       Surchargeable par page : #<cle> { --ia-hero-cols: ...; --ia-hero-gap: ...; } */
    @media (min-width: 1100px) {
      .ia-subnav {
        display: grid;
        grid-template-columns: var(--ia-hero-cols, minmax(0, 0.9fr) minmax(0, 1.1fr));
        column-gap: var(--ia-hero-gap, 44px);
      }
      .ia-subnav .back-link { justify-self: start; }
      .ia-hero {
        grid-template-columns: var(--ia-hero-cols, minmax(0, 0.9fr) minmax(0, 1.1fr));
        gap: var(--ia-hero-gap, 44px);
        align-items: start;
      }
      .ia-hero-copy { padding-top: 28px; }
      .ia-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    @media (min-width: 1400px) {
      .ia-subnav-long { display: inline; }
      .ia-subnav-short { display: none; }
    }

    /* .fx--aside : console a droite seulement quand la scene garde assez de place (sinon dessous, en 2 colonnes).
       En mouvement reduit (journal complet), la console reste sous le diagramme. */
    @media (min-width: 1440px) {
      .fx--aside:not(.fx--static) {
        --fx-log-lines: 8;
        grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
        align-items: start;
      }
      .fx--aside:not(.fx--static) > .fx-viewport {
        grid-column: 1;
        grid-row: 1;
      }
      .fx--aside:not(.fx--static) > .fx-pan-hint {
        grid-column: 1;
        grid-row: 2;
      }
      .fx--aside:not(.fx--static) > .fx-console {
        grid-column: 2;
        grid-row: 1;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
      }
      .fx--aside:not(.fx--static) > .fx-console > * {
        grid-column: auto;
        grid-row: auto;
      }
      .fx--aside:not(.fx--static) .fx-log { margin-top: 4px; }
      .fx--aside:not(.fx--static) > .fx-controls { grid-column: 1 / -1; }
    }
    /* @@IA:core:css:end@@ */

    /* @@IA:iadev:css:start@@ */
    /* ======================================================================
       IA et developpeurs (iadev) : #ia-developpeurs
       Theme marine de la maquette client (fond bleu plus clair, panneaux bleus a bordure vive,
       colonne « Resultats » corail, boutons corail) : tout est limite a #iadev.
       ====================================================================== */
    #iadev {
        --iadev-text: #eef4fc;
        --iadev-muted: #a9bfdc;
        --iadev-faint: #8ea8c9;
        --iadev-blue: #3fa9ff;
        --iadev-blue-soft: #7cc4ff;
        --iadev-cyan: #58c3fe;
        --iadev-line: rgba(70, 150, 255, 0.45);
        --iadev-line-soft: rgba(70, 150, 255, 0.24);
        --iadev-panel: linear-gradient(180deg, rgba(6, 46, 88, 0.82) 0%, rgba(2, 30, 60, 0.9) 100%);
        --iadev-tile: linear-gradient(180deg, #082c52 0%, #05203f 100%);
        --iadev-glow: 0 0 0 1px rgba(60, 140, 255, 0.06), 0 0 22px rgba(30, 120, 255, 0.14), inset 0 1px 0 rgba(120, 190, 255, 0.1);
        --iadev-coral: #fc6867;
        --iadev-coral-hi: #ff7d73;
        --iadev-coral-line: rgba(255, 102, 98, 0.62);
        --iadev-coral-bg: linear-gradient(180deg, #3e1d31 0%, #261627 100%);
        --iadev-ink: #10172a;
        --ia-panel-bg: var(--iadev-panel);
        --ia-panel-border: var(--iadev-line);
        --ia-line: rgba(90, 160, 255, 0.2);
        --fx-node-bg: linear-gradient(180deg, #06315a 0%, #022649 100%);
        --text-muted: #a9bfdc;
        --ia-hero-cols: minmax(0, 0.6fr) minmax(0, 1.4fr);
        --ia-hero-gap: 36px;
        background:
            radial-gradient(1100px 620px at 74% 320px, rgba(36, 120, 235, 0.26), transparent 70%),
            radial-gradient(760px 520px at 14% 720px, rgba(24, 96, 210, 0.22), transparent 72%),
            radial-gradient(1200px 700px at 30% 2700px, rgba(24, 96, 200, 0.18), transparent 70%),
            radial-gradient(1200px 700px at 80% 4300px, rgba(24, 96, 200, 0.16), transparent 70%),
            linear-gradient(115deg, transparent 42%, rgba(120, 180, 255, 0.04) 50%, transparent 58%),
            linear-gradient(180deg, #041d3a 0, #062a52 760px, #052549 45%, #04213f 85%, #03182f 100%);
        color: var(--iadev-text);
    }


    #iadev .ia-subnav-list {
        border-color: var(--iadev-line);
        background: rgba(3, 30, 60, 0.82);
    }

    #iadev .ia-subnav .back-link { color: #a9c6e8; }
    #iadev .ia-subnav .back-link:hover,
    #iadev .ia-subnav .back-link:focus-visible { color: #fff; }

    /* ---------- Boutons (maquette : corail plein, rayon 8px, texte fonce ; secondaire a contour bleu) ---------- */
    #iadev .ia-btn {
        gap: 12px;
        min-height: 48px;
        padding: 12px 22px;
        border-radius: 8px;
        background: var(--iadev-coral);
        color: var(--iadev-ink);
        font-weight: 650;
        box-shadow: 0 8px 26px rgba(252, 104, 103, 0.28);
    }

    #iadev .ia-btn .ic { width: 20px; height: 20px; stroke-width: 2; }

    #iadev .ia-btn:hover {
        background: var(--iadev-coral-hi);
        box-shadow: 0 10px 32px rgba(252, 104, 103, 0.38);
    }

    #iadev .ia-btn--ghost {
        border: 1px solid rgba(40, 170, 230, 0.85);
        background: rgba(0, 18, 40, 0.55);
        color: #eef2fa;
        box-shadow: none;
    }

    #iadev .ia-btn--ghost:hover {
        border-color: #5fc8ff;
        background: rgba(20, 110, 190, 0.22);
        box-shadow: 0 0 22px rgba(95, 200, 255, 0.18);
    }

    #iadev .ia-btn:focus-visible,
    #iadev button:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 3px;
    }

    /* ---------- Citations laterales (majuscules, filet a gauche) ---------- */
    #iadev .iadev-quote {
        margin: 0;
        padding: 2px 0 2px 14px;
        border-left: 2px solid #d66666;
        color: #8eacd0;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        line-height: 1.55;
        text-transform: uppercase;
    }

    #iadev .iadev-quote--cyan {
        border-left-color: #1bbdf8;
        color: #7fa9d4;
    }

    /* ---------- Panneaux ---------- */
    #iadev .ia-panel {
        border-radius: 10px;
        border-color: var(--iadev-line);
        background: var(--iadev-panel);
        box-shadow: var(--iadev-glow);
    }

    #iadev .iadev-ptitle {
        margin: 0 0 4px;
        color: #fff;
        font-size: clamp(1.12rem, 2.4vw, 1.3rem);
        font-weight: 750;
        line-height: 1.25;
    }

    #iadev .iadev-psub {
        margin: 0 0 16px;
        color: #8db6df;
        font-size: 0.92rem;
    }

    #iadev .iadev-head h2 { color: #fff; }
    #iadev .iadev-head p { color: var(--iadev-muted); }
    #iadev .iadev-kicker { color: #ff9a8f; }

    /* ======================================================================
       Hero
       ====================================================================== */
    #iadev .iadev-hero { margin-bottom: 0; }

    #iadev .iadev-h1 {
        margin: 0 0 18px;
        color: #fbfcfe;
        font-size: clamp(2.2rem, 9vw, 3.1rem);
        font-weight: 800;
        line-height: 1.04;
        letter-spacing: -0.015em;
        text-shadow: 0 2px 24px rgba(0, 10, 30, 0.45);
    }

    #iadev .iadev-lead {
        margin: 0 0 14px;
        color: #e3edf9;
        font-size: clamp(1.08rem, 2.6vw, 1.22rem);
        font-weight: 500;
        line-height: 1.38;
    }

    #iadev .iadev-body {
        margin: 0 0 24px;
        color: #a9c3e2;
        font-size: 0.98rem;
        line-height: 1.55;
    }

    #iadev .iadev-geo {
        position: relative;
        display: grid;
        margin-top: 30px;
    }

    #iadev .iadev-quote--coral {
        position: relative;
        z-index: 1;
        justify-self: start;
        max-width: 62%;
    }

    #iadev .iadev-map {
        display: block;
        width: min(84%, 340px);
        height: auto;
        margin: -30px 0 -6px auto;
        filter: brightness(1.18) saturate(1.15) drop-shadow(0 0 14px rgba(60, 150, 255, 0.35));
        pointer-events: none;
        -webkit-user-select: none;
        user-select: none;
    }

    #iadev .iadev-stats {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #iadev .iadev-stats li {
        display: grid;
        align-content: start;
        gap: 2px;
        min-width: 0;
        padding: 0 10px;
        border-left: 1px solid rgba(120, 170, 230, 0.35);
    }

    #iadev .iadev-stats li:nth-child(odd) { padding-left: 0; border-left: 0; }

    #iadev .iadev-stats strong {
        color: #8fd0f6;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.25;
    }

    #iadev .iadev-stats .iadev-stat-big { font-size: 1.3rem; line-height: 1.1; }

    #iadev .iadev-stats span {
        color: #93acce;
        font-size: 0.8rem;
        line-height: 1.3;
    }

    /* ----- Panneau « Chaine de valeur » ----- */
    #iadev .iadev-chain {
        padding: 14px;
        background: linear-gradient(180deg, rgba(1, 26, 52, 0.94), rgba(1, 20, 41, 0.96));
        border-color: rgba(30, 110, 190, 0.5);
    }

    #iadev .iadev-chain-head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px 24px;
        margin: 2px 2px 0;
    }

    #iadev .iadev-chain-title {
        margin: 0 0 3px;
        color: #fff;
        font-size: clamp(1.14rem, 2.6vw, 1.42rem);
        font-weight: 750;
        line-height: 1.2;
    }

    #iadev .iadev-chain-sub {
        margin: 0;
        color: #8db0d6;
        font-size: 0.88rem;
    }

    #iadev .iadev-chain-quote {
        margin: 0;
        color: #6fb2e6;
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.35;
        text-align: right;
    }

    /* ----- Scene : 5 colonnes x 9 rangees (geometrie fixe : les fenetres couvrent des rangees entieres) ----- */
    #iadev .iadev-hero-stage {
        --iadev-g: 16px;
        --iadev-row: 40px;
        --iadev-rgap: 5px;
        --iadev-head: 40px;
        --iadev-hgap: 4px;
        --iadev-cpad: 6px;
        --iadev-y0: calc(1px + var(--iadev-head) + var(--iadev-hgap) + var(--iadev-rgap));
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: var(--iadev-g);
        align-items: start;
        min-width: 740px;
    }

    #iadev .iadev-col {
        display: flex;
        flex-direction: column;
        gap: var(--iadev-rgap);
        min-width: 0;
        padding: 0 var(--iadev-cpad) 9px;
        border: 1px solid rgba(40, 140, 220, 0.62);
        border-radius: 8px;
        background: linear-gradient(180deg, #02294b 0%, #001d3a 100%);
        box-shadow: 0 0 14px rgba(30, 130, 240, 0.2), inset 0 1px 0 rgba(90, 180, 255, 0.35);
    }

    #iadev .iadev-colhead {
        display: flex;
        flex: none;
        align-items: center;
        gap: 7px;
        height: var(--iadev-head);
        margin: 0 calc(-1 * var(--iadev-cpad)) var(--iadev-hgap);
        padding: 0 6px;
        border-bottom: 1px solid rgba(60, 150, 230, 0.32);
        border-radius: 7px 7px 0 0;
        background: linear-gradient(180deg, #03396a 0%, #012d55 100%);
        color: #f2f6fc;
        font-size: 0.76rem;
        font-weight: 650;
        line-height: 1.15;
        letter-spacing: -0.005em;
        transition: box-shadow 0.45s ease, background 0.45s ease;
    }

    #iadev .iadev-badge {
        display: inline-grid;
        flex: none;
        place-items: center;
        width: 20px;
        height: 20px;
        border: 1px solid rgba(110, 180, 255, 0.55);
        border-radius: 4px;
        background: #0b4a86;
        color: #fff;
        font-size: 0.74rem;
        font-weight: 700;
        transition: box-shadow 0.45s ease, background 0.45s ease;
    }

    #iadev .iadev-col--res {
        border-color: var(--iadev-coral-line);
        background: var(--iadev-coral-bg);
        box-shadow: 0 0 16px rgba(240, 80, 80, 0.16), inset 0 1px 0 rgba(255, 130, 120, 0.3);
    }

    #iadev .iadev-col--res .iadev-colhead {
        border-bottom-color: rgba(255, 110, 100, 0.3);
        background: linear-gradient(180deg, #4a2033 0%, #391e2d 100%);
        color: #f8dcd8;
    }

    #iadev .iadev-col--res .iadev-badge {
        border-color: rgba(255, 120, 110, 0.7);
        background: #6a2633;
        color: #ffb3aa;
    }

    /* rangees */
    #iadev .iadev-hero-fx .iadev-row {
        flex-direction: row;
        align-items: center;
        gap: 7px;
        height: var(--iadev-row);
        padding: 0 15px 0 8px;
        border: 1px solid rgba(50, 125, 190, 0.8);
        border-radius: 5px;
        background: linear-gradient(180deg, #05325c 0%, #012647 100%);
        box-shadow: none;
    }

    #iadev .iadev-row .ic {
        display: none;
        flex: none;
        width: 14px;
        height: 14px;
        color: #9cc0e6;
        stroke-width: 1.8;
    }

    #iadev .iadev-row .fx-title {
        color: #dfe9f6;
        font-size: 0.74rem;
        font-weight: 500;
        line-height: 1.18;
        overflow-wrap: normal;
        -webkit-hyphens: manual;
        hyphens: manual;
    }

    #iadev .iadev-col--res .iadev-row {
        border-color: rgba(150, 50, 65, 0.85);
        background: linear-gradient(180deg, #2c1c2e 0%, #1d1626 100%);
    }

    #iadev .iadev-col--res .iadev-row .ic { color: #e07b72; }
    #iadev .iadev-col--res .iadev-row .fx-title { color: #eddde3; }

    /* etats (le moteur pose is-lit / is-done / is-dim) */
    /* hors scenario : a peine en retrait (la maquette montre toutes les rangees lisibles) */
    #iadev .iadev-hero-fx .iadev-row.is-dim { border-color: rgba(50, 125, 190, 0.55); }
    #iadev .iadev-hero-fx .iadev-col--res .iadev-row.is-dim { border-color: rgba(150, 50, 65, 0.65); }

    #iadev .iadev-hero-fx .iadev-row.is-dim > * {
        opacity: 0.88;
        filter: none;
    }

    #iadev .iadev-hero-fx .iadev-row::after {
        content: "";
        position: absolute;
        right: 6px;
        top: 50%;
        width: 7px;
        height: 7px;
        margin-top: -4px;
        border-radius: 50%;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    #iadev .iadev-hero-fx .iadev-row.is-lit {
        border-color: #5fc8ff;
        background: linear-gradient(180deg, #0d4a85 0%, #073664 100%);
        box-shadow: 0 0 0 1px rgba(95, 200, 255, 0.45), 0 0 16px rgba(95, 200, 255, 0.5);
    }

    #iadev .iadev-hero-fx .iadev-row.is-lit .fx-title { color: #fff; font-weight: 650; }
    #iadev .iadev-hero-fx .iadev-row.is-lit .ic { color: #9fe0ff; }

    /* en cours : anneau qui tourne ; termine : coche */
    #iadev .iadev-hero-fx .iadev-row.is-lit::after {
        border: 1.6px solid rgba(160, 225, 255, 0.35);
        border-top-color: #bdeaff;
        opacity: 1;
    }

    #iadev .iadev-hero-fx .iadev-row.is-done {
        border-color: rgba(95, 200, 255, 0.7);
        background: linear-gradient(180deg, #06386a 0%, #032b52 100%);
    }

    #iadev .iadev-hero-fx .iadev-row.is-done .fx-title { color: #eaf4ff; }

    #iadev .iadev-hero-fx .iadev-row.is-done::after {
        content: "✓";
        width: auto;
        height: auto;
        margin-top: -0.6em;
        border-radius: 0;
        color: #7fd8ff;
        font-size: 0.66rem;
        font-weight: 700;
        line-height: 1.2;
        opacity: 1;
    }

    #iadev .iadev-hero-fx .iadev-col--res .iadev-row.is-lit {
        border-color: #ff8a7a;
        background: linear-gradient(180deg, #6a2434 0%, #4a1c2b 100%);
        box-shadow: 0 0 0 1px rgba(255, 138, 122, 0.45), 0 0 16px rgba(255, 110, 100, 0.5);
    }

    #iadev .iadev-hero-fx .iadev-col--res .iadev-row.is-lit::after {
        border-color: rgba(255, 190, 180, 0.35);
        border-top-color: #ffd0c8;
    }

    #iadev .iadev-hero-fx .iadev-col--res .iadev-row.is-lit .ic { color: #ffb3aa; }

    #iadev .iadev-hero-fx .iadev-col--res .iadev-row.is-done {
        border-color: rgba(255, 138, 122, 0.75);
        background: linear-gradient(180deg, #4a1f30 0%, #341827 100%);
    }

    #iadev .iadev-hero-fx .iadev-col--res .iadev-row.is-done::after { color: #ffb3aa; }

    /* seuls les liens du scenario courant sont dessines */
    #iadev .iadev-hero-fx .fx-edge.is-dim { opacity: 0; }

    /* colonne courante : titre allume ; colonnes passees : badge plein */
    #iadev .iadev-hero-stage[data-iadev-col="1"] [data-iadev-c="1"] .iadev-colhead,
    #iadev .iadev-hero-stage[data-iadev-col="2"] [data-iadev-c="2"] .iadev-colhead,
    #iadev .iadev-hero-stage[data-iadev-col="3"] [data-iadev-c="3"] .iadev-colhead,
    #iadev .iadev-hero-stage[data-iadev-col="4"] [data-iadev-c="4"] .iadev-colhead {
        background: linear-gradient(180deg, #0a4f8f 0%, #063c6f 100%);
        box-shadow: inset 0 -2px 0 #5fc8ff;
    }

    #iadev .iadev-hero-stage[data-iadev-col="5"] [data-iadev-c="5"] .iadev-colhead {
        background: linear-gradient(180deg, #6a2638 0%, #4f1f2f 100%);
        box-shadow: inset 0 -2px 0 #ff8a7a;
    }

    #iadev .iadev-hero-stage[data-iadev-col="1"] [data-iadev-c="1"] .iadev-badge,
    #iadev .iadev-hero-stage[data-iadev-col="2"] [data-iadev-c="2"] .iadev-badge,
    #iadev .iadev-hero-stage[data-iadev-col="3"] [data-iadev-c="3"] .iadev-badge,
    #iadev .iadev-hero-stage[data-iadev-col="4"] [data-iadev-c="4"] .iadev-badge {
        background: #1c8ee0;
        box-shadow: 0 0 12px rgba(95, 200, 255, 0.7);
    }

    #iadev .iadev-hero-stage[data-iadev-col="5"] [data-iadev-c="5"] .iadev-badge {
        background: #e0574f;
        color: #fff;
        box-shadow: 0 0 12px rgba(255, 120, 110, 0.7);
    }

    /* chevrons entre colonnes (decoratifs, sous les liens) */
    #iadev .iadev-chev {
        position: absolute;
        left: calc(var(--k) * ((100% - 4 * var(--iadev-g)) / 5 + var(--iadev-g)) - var(--iadev-g) / 2 - 6px);
        top: calc(var(--iadev-y0) + 3 * (var(--iadev-row) + var(--iadev-rgap)) + var(--iadev-row) / 2 - 7px);
        width: 12px;
        height: 14px;
        background: #58c3fe;
        clip-path: polygon(0 22%, 46% 22%, 46% 0, 100% 50%, 46% 100%, 46% 78%, 0 78%);
        opacity: 0.5;
        pointer-events: none;
        transition: opacity 0.45s ease, filter 0.45s ease;
    }

    #iadev .iadev-chev[data-iadev-chev="1"] { --k: 1; }
    #iadev .iadev-chev[data-iadev-chev="2"] { --k: 2; }
    #iadev .iadev-chev[data-iadev-chev="3"] { --k: 3; }
    #iadev .iadev-chev[data-iadev-chev="4"] { --k: 4; }
    #iadev .iadev-chev.iadev-is-on { opacity: 1; filter: drop-shadow(0 0 5px rgba(95, 200, 255, 0.9)); }

    /* ======================================================================
       Fenetres (vignettes) : barre de titre, attente (squelette), contenu, resultat
       ====================================================================== */
    #iadev .iadev-win {
        --fx-accent: #5fc8ff;
        display: flex;
        flex-direction: column;
        width: auto;
        max-width: none;
        padding: 0;
        overflow: hidden;
        border: 1px solid rgba(120, 190, 255, 0.6);
        border-radius: 8px;
        background: linear-gradient(180deg, #0a2a52 0%, #061c3a 100%);
        box-shadow: 0 14px 34px rgba(0, 6, 20, 0.6), 0 0 22px rgba(60, 160, 255, 0.22);
        color: #dce8f7;
        font-size: 0.68rem;
        line-height: 1.3;
        /* fondu court : pas de superposition trouble avec les rangees recouvertes */
        transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.22s;
    }

    #iadev .iadev-win.is-on { transition-delay: 0s; }

    #iadev .iadev-win--res {
        --fx-accent: #ff8a7a;
        border-color: rgba(255, 138, 122, 0.7);
        background: linear-gradient(180deg, #3a1c30 0%, #221526 100%);
    }

    #iadev .iadev-win--alert {
        --fx-accent: #ff8a7a;
        border-color: rgba(255, 120, 110, 0.75);
    }

    #iadev .iadev-win-bar {
        display: flex;
        flex: none;
        align-items: flex-start;
        gap: 4px;
        min-width: 0;
        padding: 5px 8px;
        border-bottom: 1px solid rgba(120, 190, 255, 0.22);
        background: rgba(0, 10, 26, 0.45);
        color: #b4d0ee;
        font-family: var(--fx-mono);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        line-height: 1.25;
    }

    #iadev .iadev-win-bar i {
        flex: none;
        width: 6px;
        height: 6px;
        margin-top: 0.22em;
        border-radius: 50%;
        background: rgba(160, 190, 230, 0.4);
    }

    #iadev .iadev-win-bar i:first-child { background: #ff7b6e; }
    /* titre jamais tronque : passe a la ligne au besoin */
    #iadev .iadev-win-bar span { min-width: 0; margin-left: 3px; white-space: normal; overflow-wrap: anywhere; }

    #iadev .iadev-agentname {
        color: #fff;
        font-size: 0.7rem;
        font-weight: 700;
        line-height: 1.25;
    }

    #iadev .iadev-win--res .iadev-agentname { color: #ffd9d3; }

    #iadev .iadev-docrow {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        align-items: start;
        gap: 8px;
    }

    #iadev .iadev-doclines { display: grid; gap: 4px; min-width: 0; }

    #iadev .iadev-win-body {
        position: relative;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 5px;
        min-height: 0;
        padding: 7px 9px;
    }

    #iadev .iadev-win-body p { margin: 0; }

    #iadev .iadev-kv {
        display: flex;
        flex-wrap: wrap;
        column-gap: 6px;
        overflow-wrap: anywhere;
    }

    #iadev .iadev-kv b {
        color: #84a7cd;
        font-family: var(--fx-mono);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    #iadev .iadev-txt { color: #c2d4ea; }
    #iadev .iadev-strong { color: #fff; font-weight: 650; font-size: 0.72rem; }

    #iadev .iadev-file,
    #iadev .iadev-tib,
    #iadev .iadev-se {
        display: flex;
        align-items: flex-start;
        gap: 6px;
        padding: 5px 6px;
        border: 1px solid rgba(120, 190, 255, 0.3);
        border-radius: 5px;
        background: rgba(0, 14, 34, 0.5);
        overflow-wrap: anywhere;
    }

    #iadev .iadev-file .ic,
    #iadev .iadev-tib .ic,
    #iadev .iadev-se .ic { width: 14px; height: 14px; color: #7cc4ff; }

    #iadev .iadev-tib { border-color: rgba(242, 181, 68, 0.6); }
    #iadev .iadev-tib .ic { color: #f2b544; }
    #iadev .iadev-tib b { color: #f7cf7f; }
    #iadev .iadev-se { border-color: rgba(61, 219, 193, 0.55); }

    #iadev .iadev-jr {
        align-self: flex-start;
        padding: 2px 8px;
        border: 1px solid color-mix(in srgb, var(--fx-p-jrose, #c084fc) 60%, transparent);
        border-radius: 999px;
        color: #e6dcff;
        font-family: var(--fx-mono);
        font-size: 0.62rem;
    }

    #iadev .iadev-jr b { color: var(--fx-p-jrose, #c084fc); }
    #iadev .iadev-se .ic { color: #3ddbc1; }
    #iadev .iadev-se b { color: #86f0dd; }

    #iadev .iadev-ok,
    #iadev .iadev-tick { position: relative; padding-left: 15px; }

    #iadev .iadev-ok::before,
    #iadev .iadev-tick::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 0;
        color: #5fe0b4;
        font-weight: 700;
    }

    #iadev .iadev-pend {
        position: relative;
        padding-left: 15px;
        color: #ffd28a;
    }

    #iadev .iadev-pend::before {
        content: "";
        position: absolute;
        left: 1px;
        top: 0.2em;
        width: 8px;
        height: 8px;
        border: 1.5px solid rgba(255, 210, 138, 0.35);
        border-top-color: #ffd28a;
        border-radius: 50%;
    }

    #iadev .iadev-bad { color: #ff9a8e; font-weight: 650; }

    #iadev .iadev-done {
        padding: 4px 7px;
        border-radius: 4px;
        background: rgba(61, 219, 193, 0.14);
        color: #8cf0d8;
        font-weight: 650;
    }

    #iadev .iadev-chip {
        align-self: flex-start;
        padding: 2px 7px;
        border: 1px solid rgba(124, 196, 255, 0.45);
        border-radius: 999px;
        color: #a6d6ff;
        font-family: var(--fx-mono);
        font-size: 0.6rem;
    }

    #iadev .iadev-bubble {
        padding: 6px 8px;
        border: 1px solid rgba(124, 196, 255, 0.3);
        border-radius: 8px 8px 8px 2px;
        background: rgba(30, 110, 200, 0.22);
        color: #e6f1ff;
    }

    #iadev .iadev-conf { display: grid; gap: 3px; color: #a6d6ff; }
    #iadev .iadev-conf .fx-vig-progress { margin-top: 0; }

    /* page numerisee + barre de lecture */
    #iadev .iadev-page {
        position: relative;
        display: grid;
        gap: 4px;
        width: 100%;
        padding: 6px 5px;
        overflow: hidden;
        border-radius: 3px;
        background: #e9f0fa;
    }

    #iadev .iadev-page i { display: block; height: 3px; border-radius: 2px; background: #a9bad2; }
    #iadev .iadev-page i:nth-child(2) { width: 70%; }
    #iadev .iadev-page i:nth-child(4) { width: 55%; }

    #iadev .iadev-scanbar {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 3px;
        background: #3fa9ff;
        box-shadow: 0 0 8px #3fa9ff;
        opacity: 0;
    }

    /* points de saisie (agent qui « ecrit ») */
    #iadev .iadev-typing {
        display: none;
        gap: 4px;
        height: 10px;
        align-items: center;
        overflow: hidden;
    }
    #iadev .iadev-typing i { width: 5px; height: 5px; border-radius: 50%; background: #7cc4ff; }

    /* forme d'onde */
    #iadev .iadev-wave {
        display: flex;
        align-items: center;
        gap: 3px;
        height: 30px;
    }

    #iadev .iadev-wave i {
        flex: 1;
        height: 40%;
        border-radius: 2px;
        background: linear-gradient(180deg, #7cc4ff, #2b84d8);
    }

    #iadev .iadev-wave i:nth-child(3n) { height: 75%; }
    #iadev .iadev-wave i:nth-child(4n + 1) { height: 55%; }
    #iadev .iadev-wave i:nth-child(5n) { height: 90%; }

    #iadev .iadev-swap-b { display: none; color: #ffd28a; }

    /* ----- placement des fenetres du hero : rangees entieres d'une colonne ----- */
    #iadev .iadev-hero-stage .iadev-win {
        left: calc(var(--c) * ((100% - 4 * var(--iadev-g)) / 5 + var(--iadev-g)) + 1px + var(--iadev-cpad) - 3px);
        top: calc(var(--iadev-y0) + (var(--r) - 1) * (var(--iadev-row) + var(--iadev-rgap)) - 2px);
        width: calc((100% - 4 * var(--iadev-g)) / 5 - 2px - 2 * var(--iadev-cpad) + 6px);
        height: calc(var(--n) * var(--iadev-row) + (var(--n) - 1) * var(--iadev-rgap) + 4px);
    }

    /* ======================================================================
       Developpement sur mesure + confiance
       ====================================================================== */
    #iadev .iadev-devrow {
        display: grid;
        gap: 16px;
    }

    #iadev .iadev-dev { padding: 20px; }

    #iadev .iadev-tiles {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #iadev .iadev-tile {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
        padding: 12px 14px;
        border: 1px solid rgba(40, 100, 160, 0.55);
        border-radius: 7px;
        background: linear-gradient(180deg, #082a4f 0%, #051f3c 100%);
    }

    #iadev .iadev-tile .ic { width: 30px; height: 30px; color: #57a7dc; stroke-width: 1.5; }

    #iadev .iadev-tile strong {
        display: block;
        color: #e3ebf6;
        font-size: 0.95rem;
        font-weight: 650;
        line-height: 1.3;
    }

    #iadev .iadev-tile span {
        min-width: 0;
        color: #8fadd0;
        font-size: 0.85rem;
        line-height: 1.35;
    }

    #iadev .iadev-tile em { color: #ff9a8f; font-style: normal; font-weight: 650; }
    #iadev .iadev-tile--fin { border-color: rgba(252, 104, 103, 0.45); }
    #iadev .iadev-tile--fin .ic { color: #ff8a7a; }

    #iadev .iadev-dev-note {
        margin: 16px 0 0;
        color: #9ab6d6;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    #iadev .iadev-trust {
        padding: 22px;
        background: linear-gradient(180deg, rgba(1, 30, 60, 0.92), rgba(0, 21, 43, 0.95));
    }

    #iadev .iadev-trust-title {
        margin: 0 0 18px;
        color: #5cc2f2;
        font-size: 1.28rem;
        font-weight: 700;
        line-height: 1.28;
    }

    #iadev .iadev-checks {
        display: grid;
        gap: 12px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #iadev .iadev-checks li {
        display: flex;
        align-items: center;
        gap: 11px;
        color: #a9c3e2;
        font-size: 0.92rem;
    }

    #iadev .iadev-checks .ic { width: 20px; height: 20px; color: #49a4d7; stroke-width: 1.8; }

    #iadev .iadev-fin {
        margin-top: 20px;
        padding-top: 16px;
        border-top: 1px solid rgba(70, 150, 255, 0.24);
    }

    #iadev .iadev-fin p {
        margin: 0 0 12px;
        color: #a9c3e2;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    #iadev .iadev-fin strong { color: #fff; }

    #iadev .iadev-link-btn,
    #iadev .iadev-text-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 8px 2px;
        border: 0;
        background: none;
        color: #ff9a8f;
        font: inherit;
        font-size: 0.92rem;
        font-weight: 650;
        cursor: pointer;
    }

    #iadev .iadev-text-btn { color: #7cc4ff; }

    #iadev .iadev-link-btn .ic,
    #iadev .iadev-text-btn .ic { width: 18px; height: 18px; stroke-width: 2; transition: transform 0.2s ease; }

    #iadev .iadev-link-btn:hover .ic,
    #iadev .iadev-text-btn:hover .ic { transform: translateX(3px); }

    /* ======================================================================
       Cas d'usage
       ====================================================================== */
    #iadev .iadev-case-grid,
    #iadev .iadev-cap-grid,
    #iadev .iadev-agent-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #iadev .iadev-case,
    #iadev .iadev-cap,
    #iadev .iadev-agent {
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 20px;
        border: 1px solid var(--iadev-line-soft);
        border-radius: 10px;
        background: var(--iadev-tile);
        box-shadow: inset 0 1px 0 rgba(120, 190, 255, 0.12);
    }

    #iadev .iadev-case-tag,
    #iadev .iadev-agent-tag {
        margin-bottom: 10px;
        color: #8fc4ee;
        font-family: var(--fx-mono);
        font-size: 0.66rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    #iadev .iadev-case h3,
    #iadev .iadev-cap h3,
    #iadev .iadev-agent h3 {
        margin: 0 0 8px;
        color: #fff;
        font-size: 1.04rem;
        font-weight: 700;
        line-height: 1.3;
    }

    #iadev .iadev-case p,
    #iadev .iadev-cap p {
        margin: 0 0 12px;
        color: #a9c3e2;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    #iadev .iadev-case .iadev-route {
        padding: 8px 10px;
        border: 1px dashed rgba(90, 160, 255, 0.3);
        border-radius: 6px;
        background: rgba(0, 16, 36, 0.4);
        color: #b9d3ef;
        font-family: var(--fx-mono);
        font-size: 0.7rem;
        line-height: 1.6;
    }

    #iadev .iadev-route i { color: #58c3fe; font-style: normal; }

    #iadev .iadev-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0 0 16px;
        padding: 0;
        list-style: none;
    }

    #iadev .iadev-pills li {
        padding: 3px 9px;
        border: 1px solid rgba(124, 196, 255, 0.4);
        border-radius: 999px;
        color: #b8d8f6;
        font-size: 0.74rem;
        font-weight: 600;
    }

    #iadev .iadev-pills .iadev-pill--tib { border-color: rgba(242, 181, 68, 0.6); color: #f7cf7f; }
    #iadev .iadev-pills .iadev-pill--se { border-color: rgba(61, 219, 193, 0.6); color: #86f0dd; }

    #iadev .iadev-case > .ia-btn,
    #iadev .iadev-case-actions { margin-top: auto; }

    #iadev .iadev-case-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 16px;
    }

    #iadev .iadev-case > .ia-btn { align-self: flex-start; }

    /* ======================================================================
       Les IA developpeurs : bandeau, couloirs, livrables, impact
       ====================================================================== */
    #iadev .iadev-hyb-head {
        position: relative;
        display: grid;
        gap: 18px;
        margin: 0 0 20px;
        padding: 6px 0;
    }

    #iadev .iadev-hyb-head::before {
        content: "";
        position: absolute;
        right: -20px;
        top: -40px;
        width: min(760px, 80%);
        height: calc(100% + 80px);
        background: url("/img/iadev-streaks.webp?v=139c130f") center / cover no-repeat;
        opacity: 0.85;
        pointer-events: none;
        /* fondu sur les 4 bords : aucune arete visible (l'image est recadree par cover) */
        -webkit-mask-image: radial-gradient(closest-side, #000 38%, rgba(0, 0, 0, 0.55) 68%, transparent 100%);
        mask-image: radial-gradient(closest-side, #000 38%, rgba(0, 0, 0, 0.55) 68%, transparent 100%);
    }

    #iadev .iadev-hyb-head > * { position: relative; }

    #iadev .iadev-h2 {
        margin: 0 0 10px;
        color: #fff;
        font-size: clamp(1.8rem, 5vw, 2.5rem);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.01em;
    }

    #iadev .iadev-h2-lead {
        max-width: 760px;
        margin: 0;
        color: #b9cfe8;
        font-size: clamp(1rem, 2.4vw, 1.15rem);
        line-height: 1.5;
    }

    /* racine fx du modele hybride : schema, console et controles ; livrables a droite des 1360px (meme hauteur) */
    #iadev .iadev-hyb-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "dia" "con" "ctl" "del";
        gap: 14px;
    }

    #iadev .iadev-hyb-body > .iadev-hyb { grid-area: dia; min-width: 0; }
    #iadev .iadev-hyb-body > .iadev-deliv { grid-area: del; min-width: 0; margin-top: 4px; }
    #iadev .iadev-hyb-body > .fx-console { grid-area: con; }
    #iadev .iadev-hyb-body > .fx-controls { grid-area: ctl; }

    #iadev .iadev-hyb {
        padding: 18px 14px 14px;
        background: linear-gradient(180deg, rgba(0, 28, 54, 0.94), rgba(0, 22, 44, 0.96));
    }

    #iadev .iadev-hyb > .iadev-ptitle { margin: 0 4px 12px; }

    /* ----- Scene des couloirs : geometrie fixe (fenetres placees en calc sur la grille 7 colonnes) ----- */
    #iadev .iadev-main-stage {
        --iadev-pl: 6px;
        --iadev-pr: 28px;
        --iadev-pt: 14px;
        --iadev-pb: 66px;
        --iadev-lab: 98px;
        --iadev-lgap: 22px;
        --iadev-g7: 20px;
        --iadev-lp: 10px;
        --iadev-h1: 66px;
        --iadev-h2: 80px;
        --iadev-h3: 72px;
        --iadev-band: 64px;
        --iadev-band1: 76px;
        min-width: 960px;
        padding: var(--iadev-pt) var(--iadev-pr) var(--iadev-pb) var(--iadev-pl);
    }

    #iadev .iadev-lane {
        display: grid;
        grid-template-columns: var(--iadev-lab) minmax(0, 1fr);
        column-gap: var(--iadev-lgap);
        align-items: center;
        padding: var(--iadev-lp) 0;
        border-radius: 8px;
        background: rgba(4, 40, 80, 0.32);
        box-shadow: inset 0 1px 0 rgba(70, 150, 255, 0.18), inset 0 -1px 0 rgba(70, 150, 255, 0.18);
    }

    #iadev .iadev-lane--ai {
        background: linear-gradient(90deg, rgba(10, 70, 130, 0.42), rgba(6, 50, 100, 0.3));
        box-shadow: inset 0 1px 0 rgba(90, 170, 255, 0.32), inset 0 -1px 0 rgba(90, 170, 255, 0.32);
    }

    #iadev .iadev-lane-label {
        margin: 0;
        padding-left: 6px;
        color: #57b6f0;
        font-size: 0.76rem;
        font-weight: 650;
        line-height: 1.3;
    }

    #iadev .iadev-lane-n {
        display: none;
        place-items: center;
        width: 20px;
        height: 20px;
        border: 1px solid rgba(110, 180, 255, 0.6);
        border-radius: 4px;
        background: #0b4a86;
        color: #fff;
        font-size: 0.72rem;
        font-weight: 700;
    }

    /* legende des couloirs : seulement sur telephone (les libelles de la scene y sont remplaces par des numeros) */
    #iadev .iadev-lane-legend {
        display: none;
        flex-wrap: wrap;
        gap: 6px 14px;
        margin: 0 4px 10px;
        padding: 0;
        list-style: none;
        color: #9fc6ea;
        font-size: 0.8rem;
    }

    #iadev .iadev-lane-legend li { display: flex; align-items: center; gap: 6px; }

    #iadev .iadev-lane-legend b {
        display: inline-grid;
        place-items: center;
        width: 18px;
        height: 18px;
        border: 1px solid rgba(110, 180, 255, 0.6);
        border-radius: 4px;
        background: #0b4a86;
        color: #fff;
        font-size: 0.68rem;
    }

    #iadev .iadev-lane-row {
        display: grid;
        column-gap: var(--iadev-g7);
        min-width: 0;
    }

    #iadev .iadev-lane-row--gov { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    #iadev .iadev-lane-row--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    #iadev .iadev-lane-row--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

    /* ----- Bandes entre couloirs (maquette : « Orientation ↔ Priorités ↔ Validation ↔ Amélioration continue »
       et « Contexte ↔ Exécution ↔ Résultats ↔ Rétroaction ») : un filet en crochet, les mots posés dessus.
       Les paliers des liens en equerre sont a mi-bande ; le filet de la bande 1 est plus haut (aucun chevauchement). ----- */
    #iadev .iadev-band {
        position: relative;
        height: var(--iadev-band);
    }

    #iadev .iadev-band--1 { height: var(--iadev-band1); }

    #iadev .iadev-bus {
        position: absolute;
        left: -999px;
        top: 0;
        width: 0;
        height: var(--iadev-busy);
        border: 1px solid rgba(95, 170, 240, 0.42);
        border-top: 0;
        border-radius: 0 0 5px 5px;
        pointer-events: none;
    }

    #iadev .iadev-band--1 { --iadev-busy: 20px; }
    #iadev .iadev-band--2 { --iadev-busy: 50%; }

    #iadev .iadev-flow,
    #iadev .iadev-flowline {
        position: absolute;
        left: -999px;
        top: var(--iadev-busy);
        margin: 0;
        padding: 1px 8px;
        background: #01213f;
        color: #9db9d8;
        font-size: 0.76rem;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        transform: translate(-50%, -50%);
        transition: color 0.3s ease, text-shadow 0.3s ease;
    }

    #iadev .iadev-flowline {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #iadev .iadev-flowline .iadev-flow {
        position: static;
        padding: 0;
        background: none;
        transform: none;
    }

    #iadev .iadev-flowline i { color: #4f9fd8; font-style: normal; font-size: 0.8rem; }

    #iadev .iadev-flow.iadev-is-tight,
    #iadev .iadev-flowline.iadev-is-tight { padding: 1px 4px; font-size: 0.68rem; }
    #iadev .iadev-flowline.iadev-is-tight { gap: 5px; }

    #iadev .iadev-flow.iadev-is-on {
        color: #fff;
        font-weight: 650;
        text-shadow: 0 0 10px rgba(95, 200, 255, 0.95), 0 0 2px rgba(95, 200, 255, 0.8);
    }

    /* noeuds des couloirs */
    #iadev .iadev-main .fx-node {
        min-width: 0;
        box-shadow: none;
    }

    #iadev .iadev-gn {
        flex-direction: row;
        align-items: center;
        gap: 9px;
        height: var(--iadev-h1);
        padding: 6px 9px;
        border-color: rgba(9, 69, 112, 0.95);
        border-radius: 6px;
        background: linear-gradient(180deg, #053058 0%, #032848 100%);
    }

    #iadev .iadev-gn .ic { width: 22px; height: 22px; color: #8fc4ee; stroke-width: 1.6; }
    #iadev .iadev-gn > span { display: grid; gap: 2px; min-width: 0; }

    #iadev .iadev-main .fx-title {
        color: #e9f0f9;
        font-size: 0.76rem;
        font-weight: 650;
        line-height: 1.2;
        overflow-wrap: normal;
    }

    #iadev .iadev-main .fx-sub {
        color: #8eabc9;
        font-size: 0.66rem;
        line-height: 1.25;
        overflow-wrap: normal;
    }

    #iadev .iadev-an {
        justify-content: center;
        align-items: center;
        gap: 3px;
        height: var(--iadev-h2);
        padding: 6px 5px;
        border-color: rgba(4, 110, 175, 0.95);
        border-radius: 6px;
        background: linear-gradient(180deg, #0f3f6c 0%, #04325a 100%);
        text-align: center;
        box-shadow: 0 0 12px rgba(30, 130, 240, 0.18) !important;
    }

    #iadev .iadev-en {
        justify-content: center;
        gap: 3px;
        height: var(--iadev-h3);
        padding: 6px 7px;
        border-color: rgba(9, 60, 100, 0.95);
        border-radius: 6px;
        background: linear-gradient(180deg, #04294c 0%, #032241 100%);
    }

    #iadev .iadev-en-t {
        display: flex;
        align-items: flex-start;
        gap: 5px;
        min-width: 0;
    }

    #iadev .iadev-en-t .ic { display: none; flex: none; width: 13px; height: 13px; margin-top: 1px; color: #8fc4ee; stroke-width: 1.8; }
    #iadev .iadev-en .fx-title { font-size: 0.74rem; -webkit-hyphens: manual; hyphens: manual; }

    #iadev .iadev-envs b { font-weight: 500; transition: color 0.3s ease, text-shadow 0.3s ease; }

    #iadev .iadev-main-stage[data-iadev-ph="deploy"] .iadev-envs b {
        color: #fff;
        font-weight: 650;
        text-shadow: 0 0 8px rgba(95, 200, 255, 0.9);
    }

    /* etats des couloirs. Deja traverse (« ça a passé ici ») : fond plus clair, titre vif, coche en haut a droite */
    #iadev .iadev-main .fx-node.is-done {
        border-color: rgba(95, 200, 255, 0.75);
        background: linear-gradient(180deg, #0b4378 0%, #06345f 100%);
    }

    #iadev .iadev-main .fx-node.is-done .fx-title { color: #eaf4ff; }
    #iadev .iadev-main .fx-node.is-done .fx-sub { color: #b4d3f0; }
    #iadev .iadev-main .fx-node.is-done .ic { color: #9fe0ff; }

    #iadev .iadev-main .fx-node.is-done::after {
        content: "✓";
        position: absolute;
        top: 3px;
        right: 6px;
        color: #7fd8ff;
        font-size: 0.68rem;
        font-weight: 700;
        line-height: 1.2;
        pointer-events: none;
    }

    #iadev .iadev-main .fx-node.is-lit {
        border-color: #5fc8ff;
        background: linear-gradient(180deg, #0f5698 0%, #083f75 100%);
        box-shadow: 0 0 0 1px rgba(95, 200, 255, 0.5), 0 0 22px rgba(95, 200, 255, 0.45) !important;
    }

    #iadev .iadev-main .fx-node.is-lit .fx-title { color: #fff; }
    #iadev .iadev-main .fx-node.is-lit .fx-sub { color: #cfe6ff; }
    #iadev .iadev-main .fx-node.is-lit .ic { color: #bfeaff; }
    #iadev .iadev-main .fx-node.is-dim { border-color: rgba(40, 90, 140, 0.55); }

    #iadev .iadev-main .fx-node.is-dim > * {
        opacity: 0.8;
        filter: none;
    }

    #iadev .iadev-main .fx-edge.is-dim .fx-wire { stroke-opacity: 0.16; }

    /* fenetres des couloirs : cellules entieres (couloir 1 : 5 cases ; couloir 3 : grille de 7 colonnes) */
    #iadev .iadev-main-stage .iadev-mv {
        --iadev-x0: calc(var(--iadev-pl) + var(--iadev-lab) + var(--iadev-lgap));
        --iadev-L: calc(100% - var(--iadev-pl) - var(--iadev-pr) - var(--iadev-lab) - var(--iadev-lgap));
        --iadev-N: 6;
        --iadev-cw: calc((var(--iadev-L) - (var(--iadev-N) - 1) * var(--iadev-g7)) / var(--iadev-N));
        left: calc(var(--iadev-x0) + var(--k) * (var(--iadev-cw) + var(--iadev-g7)) - 4px);
        width: calc(var(--s) * var(--iadev-cw) + (var(--s) - 1) * var(--iadev-g7) + 8px);
        top: calc(var(--iadev-pt) + 5 * var(--iadev-lp) + var(--iadev-h1) + var(--iadev-h2) + var(--iadev-band1) + var(--iadev-band) - 4px);
        height: calc(var(--iadev-h3) + 8px);
    }

    #iadev .iadev-main-stage .iadev-mv[data-fx-vig="m-deploy"],
    #iadev .iadev-main-stage .iadev-mv[data-fx-vig="m3-alert"] {
        --iadev-N: 5;
        top: calc(var(--iadev-pt) + var(--iadev-lp) - 4px);
        height: calc(var(--iadev-h1) + 8px);
    }

    #iadev .iadev-mv .iadev-win-body { padding: 6px 9px; }

    #iadev .iadev-row2 {
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 4px 16px;
    }

    #iadev .iadev-row2 .fx-vig-progress { flex: 1 1 100%; margin-top: 2px; }

    #iadev .iadev-kpis {
        flex-direction: row;
        gap: 14px;
    }

    #iadev .iadev-kpi {
        display: grid;
        flex: 1 1 0;
        grid-template-columns: minmax(0, 1fr) auto;
        align-content: start;
        gap: 4px 8px;
        min-width: 0;
    }

    #iadev .iadev-kpi b { color: #9fc0e4; font-weight: 600; }
    #iadev .iadev-kpi em { color: #5fe0b4; font-style: normal; font-weight: 700; }

    #iadev .iadev-bar {
        grid-column: 1 / -1;
        grid-row: 2;
        height: 6px;
        overflow: hidden;
        border-radius: 3px;
        background: rgba(120, 160, 220, 0.18);
    }

    #iadev .iadev-bar i {
        display: block;
        width: var(--v);
        height: 100%;
        border-radius: 3px;
        background: linear-gradient(90deg, #2b84d8, #7cc4ff);
        transform-origin: left center;
    }

    #iadev .iadev-spark-wrap {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    #iadev .iadev-spark {
        flex: 0 0 46%;
        height: 32px;
        fill: none;
        stroke: #ff8a7a;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    #iadev .iadev-spark-wrap .iadev-bad { flex: 1 1 auto; min-width: 0; }

    /* ----- Livrables ----- */
    #iadev .iadev-deliv { padding: 18px; }

    #iadev .iadev-deliv-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin: 12px 0 0;
        padding: 0;
        list-style: none;
    }

    #iadev .iadev-deliv-list li {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 52px;
        padding: 10px 12px;
        border: 1px solid rgba(40, 100, 160, 0.6);
        border-radius: 7px;
        background: linear-gradient(180deg, #082c52 0%, #01274a 100%);
        color: #c2d3e8;
        font-size: 0.9rem;
        line-height: 1.3;
        transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    }

    #iadev .iadev-deliv-list .ic { width: 22px; height: 22px; color: #98b5d1; }
    #iadev .iadev-deliv-list small { display: block; color: #8eabc9; font-size: 0.78rem; }
    #iadev .iadev-deliv-list span { flex: 1 1 auto; min-width: 0; }

    /* pastille « produit » en surimpression : ne prend pas de largeur au libelle */
    #iadev .iadev-deliv-list em {
        position: absolute;
        top: -8px;
        right: 8px;
        padding: 1px 7px;
        border: 1px solid rgba(61, 219, 193, 0.5);
        border-radius: 999px;
        background: #07344a;
        color: #86f0dd;
        font-family: var(--fx-mono);
        font-size: 0.6rem;
        font-style: normal;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    #iadev .iadev-deliv-list em::before { content: "✓ "; }

    #iadev .iadev-deliv-list li.iadev-is-made {
        border-color: #5fc8ff;
        background: linear-gradient(180deg, #0b3d6e 0%, #052f58 100%);
        box-shadow: 0 0 16px rgba(95, 200, 255, 0.3);
        color: #fff;
    }

    #iadev .iadev-deliv-list li.iadev-is-made .ic { color: #bfeaff; }
    #iadev .iadev-deliv-list li.iadev-is-made em { opacity: 1; }

    #iadev .iadev-deliv-foot { margin-top: 14px; }

    #iadev .iadev-deliv-count {
        margin: 0 0 7px;
        color: #a9c3e2;
        font-size: 0.88rem;
    }

    #iadev .iadev-deliv-count strong { color: #fff; font-size: 1.1rem; }

    #iadev .iadev-deliv-bar {
        display: block;
        height: 4px;
        overflow: hidden;
        border-radius: 2px;
        background: rgba(120, 160, 220, 0.18);
    }

    #iadev .iadev-deliv-bar i {
        display: block;
        width: calc(var(--iadev-made, 0) * 100%);
        height: 100%;
        border-radius: 2px;
        background: linear-gradient(90deg, #2b84d8, #7cc4ff);
        transition: width 0.5s ease;
    }

    #iadev .iadev-deliv-note {
        margin: 10px 0 0;
        color: #8eabc9;
        font-size: 0.85rem;
    }

    /* ----- Impact ----- */
    #iadev .iadev-impact {
        margin-top: 16px;
        padding: 18px;
        background: linear-gradient(180deg, rgba(0, 28, 54, 0.92), rgba(0, 22, 46, 0.95));
    }

    #iadev .iadev-impact-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin: 12px 0 0;
        padding: 0;
        list-style: none;
    }

    #iadev .iadev-impact-list li {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
        padding: 12px 14px;
        border: 1px solid rgba(30, 90, 150, 0.6);
        border-radius: 7px;
        background: #021f3d;
        transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    }

    #iadev .iadev-impact-list .ic { width: 28px; height: 28px; color: #7cb6d8; stroke-width: 1.5; }

    #iadev .iadev-impact-list strong {
        display: block;
        color: #8cc3ea;
        font-size: 0.95rem;
        font-weight: 650;
    }

    #iadev .iadev-impact-list span {
        min-width: 0;
        color: #8eabc9;
        font-size: 0.85rem;
        line-height: 1.35;
    }

    #iadev .iadev-impact-list li.iadev-is-hit {
        border-color: #5fc8ff;
        background: #073764;
        box-shadow: 0 0 18px rgba(95, 200, 255, 0.35);
    }

    #iadev .iadev-impact-list li.iadev-is-hit strong { color: #fff; }

    /* ======================================================================
       Capacites et agents
       ====================================================================== */
    #iadev .iadev-num {
        margin-bottom: 10px;
        color: #ff9a8f;
        font-family: var(--fx-mono);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.08em;
    }

    #iadev .iadev-cap code {
        margin-top: auto;
        padding-top: 10px;
        border-top: 1px dashed rgba(90, 160, 255, 0.25);
        color: #8fbbe4;
        font-family: var(--fx-mono);
        font-size: 0.7rem;
    }

    #iadev .iadev-agent dl {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 6px 12px;
        margin: 4px 0 12px;
    }

    #iadev .iadev-agent dt {
        color: #8fc4ee;
        font-family: var(--fx-mono);
        font-size: 0.66rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        line-height: 1.9;
        text-transform: uppercase;
    }

    #iadev .iadev-agent dd {
        margin: 0;
        color: #c9d9ec;
        font-size: 0.88rem;
        line-height: 1.45;
    }

    #iadev .iadev-ctl {
        margin: auto 0 0;
        padding-top: 10px;
        border-top: 1px dashed rgba(90, 160, 255, 0.25);
        color: #a9c3e2;
        font-size: 0.86rem;
        line-height: 1.45;
    }

    #iadev .iadev-ctl b {
        display: block;
        margin-bottom: 2px;
        color: #ff9a8f;
        font-family: var(--fx-mono);
        font-size: 0.66rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    /* ----- Console et controles du moteur (teinte marine) ----- */
    #iadev .fx-console {
        border-color: rgba(70, 150, 255, 0.3);
        background: rgba(1, 22, 46, 0.9);
    }

    #iadev .fx-log {
        border-color: rgba(70, 150, 255, 0.18);
        background: rgba(0, 12, 28, 0.78);
    }

    #iadev .fx-chip {
        border-color: rgba(70, 150, 255, 0.35);
        background: rgba(3, 32, 64, 0.85);
    }

    #iadev .fx-chip-t { color: #9fb9d8; }

    #iadev .fx-btn {
        border-color: rgba(90, 160, 255, 0.4);
        background: rgba(3, 32, 64, 0.85);
    }

    /* hors ecran, le moteur gele les animations : une entree de journal neuve resterait a opacite 0 (cadre vide) */
    #iadev .fx.is-idle .fx-log li.is-new { animation: none; }

    /* ======================================================================
       Animations (toujours actives, prefers-reduced-motion ignore)
       ====================================================================== */
    #iadev .iadev-hero-fx .iadev-row.is-lit::after { animation: iadev-spin 0.9s linear infinite; }
    #iadev .iadev-pend::before { animation: iadev-spin 0.9s linear infinite; }

    /* attente : barre de squelette, puis lignes de contenu en cascade */
    #iadev .iadev-skel {
        position: absolute;
        left: 9px;
        right: 9px;
        top: 9px;
        height: 44px;
        border-radius: 4px;
        background:
            linear-gradient(90deg, transparent, rgba(160, 210, 255, 0.22), transparent) -120px 0 / 120px 100% no-repeat,
            repeating-linear-gradient(180deg, rgba(120, 170, 230, 0.18) 0 7px, transparent 7px 13px);
        opacity: 0;
    }

    #iadev .fx-vig.is-on .iadev-skel { animation: iadev-skel 0.45s ease-out both; }
    #iadev .fx-vig.is-on .iadev-l { animation: iadev-line 0.32s ease calc(0.18s + var(--d, 0) * 0.15s) both; }
    #iadev .fx-vig.is-on .iadev-tick::before { animation: iadev-pop 0.3s ease calc(0.4s + var(--d, 0) * 0.15s) both; }

    #iadev .fx-vig.is-on .iadev-scanbar { animation: iadev-scan 1.3s ease-in-out 0.1s 2 both; }

    #iadev .fx-vig.is-on .iadev-typing {
        display: flex;
        animation: iadev-typing-out 0.15s linear 0.8s forwards;
    }

    #iadev .fx-vig.is-on .iadev-typing i { animation: iadev-dot 0.9s ease-in-out infinite; }
    #iadev .fx-vig.is-on .iadev-typing i:nth-child(2) { animation-delay: 0.15s; }
    #iadev .fx-vig.is-on .iadev-typing i:nth-child(3) { animation-delay: 0.3s; }

    #iadev .fx-vig.is-on .iadev-wave i { animation: iadev-wave 0.8s ease-in-out infinite alternate; }
    #iadev .fx-vig.is-on .iadev-wave i:nth-child(2n) { animation-delay: -0.3s; }
    #iadev .fx-vig.is-on .iadev-wave i:nth-child(3n) { animation-delay: -0.55s; }

    #iadev .fx-vig.is-on .iadev-swap-a { animation: iadev-gone 0.01s linear 1.6s forwards; }
    #iadev .fx-vig.is-on .iadev-swap-b { display: inline; animation: iadev-come 0.4s ease 1.6s both; }

    #iadev .fx-vig.is-on .iadev-bar i { animation: iadev-grow 1s ease calc(0.6s + var(--d, 0) * 0.2s) both; }
    #iadev .fx-vig.is-on .iadev-spark path { stroke-dasharray: 1; animation: iadev-draw 1.2s ease 0.3s both; }

    @keyframes iadev-spin { to { transform: rotate(360deg); } }

    @keyframes iadev-skel {
        0% { opacity: 1; background-position: -120px 0, 0 0; }
        80% { opacity: 1; background-position: 260px 0, 0 0; }
        100% { opacity: 0; background-position: 260px 0, 0 0; }
    }

    @keyframes iadev-line {
        from { opacity: 0; transform: translateY(5px); }
        to { opacity: 1; transform: none; }
    }

    @keyframes iadev-pop {
        from { opacity: 0; transform: scale(0.3); }
        to { opacity: 1; transform: none; }
    }

    @keyframes iadev-scan {
        0% { top: 0; opacity: 1; }
        100% { top: calc(100% - 3px); opacity: 1; }
    }

    @keyframes iadev-fade { to { opacity: 0; } }
    @keyframes iadev-typing-out { to { height: 0; margin: -5px 0 0; opacity: 0; } }
    @keyframes iadev-gone { to { opacity: 0; font-size: 0; } }

    @keyframes iadev-come {
        0% { opacity: 0; font-size: 0; }
        1% { opacity: 0; font-size: 0.66rem; }
        100% { opacity: 1; font-size: 0.66rem; }
    }

    @keyframes iadev-dot {
        0%, 100% { opacity: 0.3; transform: translateY(0); }
        50% { opacity: 1; transform: translateY(-3px); }
    }

    @keyframes iadev-wave {
        from { transform: scaleY(0.35); }
        to { transform: scaleY(1); }
    }

    @keyframes iadev-grow {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }

    @keyframes iadev-draw {
        from { stroke-dashoffset: 1; }
        to { stroke-dashoffset: 0; }
    }

    /* ======================================================================
       Responsive
       ====================================================================== */
    @media (max-width: 639.98px) {
        #iadev .iadev-actions .ia-btn { width: 100%; }
        #iadev .iadev-map { width: min(92%, 380px); margin: -4px auto 4px; }
        #iadev .iadev-quote--coral { max-width: none; }
        #iadev .iadev-chain-quote { text-align: left; }
        #iadev .iadev-stats li:nth-child(odd) { padding-left: 0; }
        /* couloirs : numeros dans la scene (jamais coupes par le cadrage auto) + legende au-dessus */
        #iadev .iadev-main-stage {
            --iadev-lab: 24px;
            --iadev-lgap: 14px;
            min-width: 880px;
        }
        #iadev .iadev-lane-label { padding-left: 2px; }
        #iadev .iadev-lane-t { display: none; }
        #iadev .iadev-lane-n { display: inline-grid; }
        #iadev .iadev-lane-legend { display: flex; }
    }

    @media (min-width: 480px) {
        #iadev .iadev-tiles,
        #iadev .iadev-impact-list,
        #iadev .iadev-deliv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (min-width: 640px) {
        #iadev .iadev-hero-stage { min-width: 720px; }
        #iadev .iadev-chain { padding: 14px; }
        #iadev .iadev-case-grid,
        #iadev .iadev-cap-grid,
        #iadev .iadev-agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        #iadev .iadev-impact-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
        #iadev .iadev-impact-list li { grid-column: span 2; }
        #iadev .iadev-impact-list li:nth-child(4),
        #iadev .iadev-impact-list li:nth-child(5) { grid-column: span 3; }
        /* hero empile : texte a gauche ; citation, carte et chiffres a droite */
        #iadev .iadev-copy {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
            column-gap: 32px;
            align-items: end;
        }
        #iadev .iadev-geo { margin-top: 0; }
        #iadev .iadev-hyb-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    }

    @media (min-width: 820px) {
        #iadev .iadev-deliv-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }

    @media (min-width: 1100px) {
        #iadev .iadev-hero-stage { min-width: 760px; }
        #iadev .iadev-colhead { font-size: 0.8rem; gap: 7px; }
        #iadev .iadev-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        #iadev .iadev-impact-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
        #iadev .iadev-impact-list li,
        #iadev .iadev-impact-list li:nth-child(4),
        #iadev .iadev-impact-list li:nth-child(5) { grid-column: auto; }
        #iadev .iadev-cap-grid,
        #iadev .iadev-agent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        #iadev .iadev-hyb { padding: 20px 18px 18px; }
    }

    /* 1100-1439 : hero empile (la chaine garde toute la largeur : rangees sur une ligne, avec icones) */
    @media (min-width: 1100px) and (max-width: 1439.98px) {
        #iadev { --ia-hero-cols: minmax(0, 1fr); }
        #iadev .ia-hero-copy { padding-top: 0; }
    }

    /* rangees de la chaine : icone + libelle sur une ligne (maquette) des que la chaine a assez de largeur */
    @media (min-width: 1100px) {
        #iadev .iadev-hero-fx .iadev-row { gap: 6px; padding: 0 13px 0 7px; }
        #iadev .iadev-row .ic { display: block; width: 13px; height: 13px; }
        #iadev .iadev-row .fx-title {
            min-width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    @media (min-width: 1280px) {
        #iadev .iadev-devrow { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
        #iadev .iadev-case-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    /* hero cote a cote (maquette : texte ~25 %, chaine ~75 %) */
    @media (min-width: 1440px) {
        #iadev { --ia-hero-cols: minmax(0, 0.46fr) minmax(0, 1.54fr); --ia-hero-gap: 30px; }
        #iadev .iadev-copy { display: block; }
        /* colonne de texte ~300px : « développeurs » tient sur une ligne, jamais coupe en plein mot */
        #iadev .iadev-h1 { margin-bottom: 14px; font-size: 2.7rem; overflow-wrap: normal; word-break: normal; -webkit-hyphens: manual; hyphens: manual; }
        #iadev .iadev-lead { margin-bottom: 10px; font-size: 1.12rem; }
        #iadev .iadev-body { margin-bottom: 18px; font-size: 0.94rem; line-height: 1.5; }
        #iadev .iadev-geo { margin-top: 22px; }
        #iadev .iadev-map { width: min(80%, 300px); margin: -14px 0 2px auto; }
        /* chiffres en 2 x 2 : 4 colonnes de ~75px feraient chevaucher « Souveraineté » et « Expertise » */
        #iadev .iadev-stats { gap: 12px 0; }
        #iadev .iadev-stats li { padding: 0 0 0 12px; }
        #iadev .iadev-quote--coral { max-width: none; font-size: 0.7rem; letter-spacing: 0.07em; }
        #iadev .iadev-actions .ia-btn { padding: 12px 16px; font-size: 0.94rem; white-space: nowrap; }
        #iadev .iadev-copy .iadev-actions { flex-wrap: wrap; gap: 10px; }
        #iadev .iadev-stats strong { font-size: 0.78rem; }
        #iadev .iadev-stats span { font-size: 0.78rem; }
        #iadev .iadev-stats .iadev-stat-big { font-size: 1.1rem; }
        #iadev .iadev-chain { padding: 12px; }
        #iadev .iadev-chain-head { margin-bottom: 0; }
        #iadev .iadev-hero-stage {
            --iadev-g: 12px;
            --iadev-cpad: 5px;
            min-width: 760px;
        }
        #iadev .iadev-hero-fx .iadev-row { padding: 0 13px 0 7px; }
        #iadev .iadev-colhead { gap: 6px; font-size: 0.74rem; letter-spacing: -0.01em; }
        #iadev .iadev-badge { width: 18px; height: 18px; font-size: 0.7rem; }
    }

    /* modele hybride + livrables cote a cote (maquette) */
    @media (min-width: 1360px) {
        #iadev .iadev-hyb-body {
            grid-template-columns: minmax(0, 1fr) 240px;
            grid-template-areas: "dia del" "con con" "ctl ctl";
            align-items: stretch;
            column-gap: 16px;
        }
        #iadev .iadev-hyb-body > .iadev-deliv { display: flex; flex-direction: column; margin-top: 0; padding: 16px 14px; }
        /* les 6 livrables se repartissent sur toute la hauteur du schema */
        #iadev .iadev-deliv-list { flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(50px, 1fr); gap: 10px; }
        #iadev .iadev-deliv-list li { gap: 10px; min-height: 50px; padding: 9px 10px; font-size: 0.86rem; }
        #iadev .iadev-deliv-list .ic { width: 20px; height: 20px; }
    }

    @media (min-width: 1440px) {
        #iadev .iadev-chain { padding: 12px 10px; }
        #iadev .iadev-hero-stage { --iadev-g: 7px; min-width: 860px; }
        #iadev .iadev-hero-fx .iadev-row { padding: 0 9px 0 6px; gap: 5px; }
        #iadev .iadev-row .fx-title { font-size: 0.65rem; letter-spacing: -0.005em; }
        #iadev .iadev-devrow { grid-template-columns: minmax(0, 1fr) 320px; }
        #iadev .iadev-stats strong { font-size: 0.8rem; }
    }

    @media (min-width: 1600px) {
        #iadev { --ia-hero-cols: minmax(0, 0.52fr) minmax(0, 1.48fr); }
        #iadev .iadev-h1 { font-size: 3rem; }
        #iadev .iadev-colhead { font-size: 0.8rem; letter-spacing: 0; }
        #iadev .iadev-hyb-body { grid-template-columns: minmax(0, 1fr) 290px; }
        #iadev .iadev-deliv { padding: 18px 16px; }
        #iadev .iadev-deliv-list li { padding: 10px 12px; font-size: 0.9rem; }
        #iadev .iadev-en-t .ic { display: block; }
    }

    /* listes d'etapes (orchestrateur, pipeline) : cascade plus rapide, terminee bien avant la fin de l'etape */
    #iadev .fx-vig.is-on .iadev-plan .iadev-l { animation-delay: calc(0.35s + var(--d, 0) * 0.12s); }
    #iadev .fx-vig.is-on .iadev-plan .iadev-tick::before { animation-delay: calc(0.55s + var(--d, 0) * 0.12s); }

    /* fenetres du hero : colonnes plus etroites = une ou deux rangees (libres) de plus, jamais de contenu coupe */
    @media (max-width: 1439.98px) {
        #iadev .iadev-win[data-fx-vig="h1-result"],
        #iadev .iadev-win[data-fx-vig="h2-ticket"] { --n: 5 !important; }
    }

    @media (max-width: 1099.98px) {
        #iadev .iadev-hero-stage .iadev-win { font-size: 0.66rem; }
        #iadev .iadev-win[data-fx-vig="h1-mail"],
        #iadev .iadev-win[data-fx-vig="h2-mail"] { --n: 5 !important; }
        #iadev .iadev-win[data-fx-vig="h1-result"],
        #iadev .iadev-win[data-fx-vig="h2-ticket"] { --n: 6 !important; }
    }

    /* anneau de focus du lien de retour de la sous-navigation (demande de changement core : idem pour les 3 pages) */
    #iadev .ia-subnav .back-link:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 3px;
        border-radius: 4px;
    }

    /* hero empile : la citation laterale coule naturellement (pas de « CANADA » isole) */
    @media (min-width: 640px) and (max-width: 1439.98px) {
        #iadev .iadev-quote--coral br { display: none; }
    }

    /* 640-819 : colonnes etroites ; rangees un peu plus hautes (3 lignes possibles) et fenetre de conciliation allegee */
    @media (min-width: 640px) and (max-width: 819.98px) {
        #iadev .iadev-hero-stage { --iadev-row: 44px; }
        #iadev .iadev-win[data-fx-vig="h1-agent"] .iadev-chip--opt { display: none; }
    }

    /* fenetre « Demande de fusion » : 3 lignes dans la hauteur d'une cellule */
    #iadev .iadev-mv[data-fx-vig="m-pr"] .iadev-win-body { padding: 4px 9px; gap: 2px 14px; }

    /* 1100-1279 : chaine pleine largeur mais encore serree : meme reglage compact qu'a 1440 (une ligne, icone) */
    @media (min-width: 1100px) and (max-width: 1279.98px) {
        #iadev .iadev-chain { padding: 12px 10px; }
        #iadev .iadev-hero-stage { --iadev-g: 7px; --iadev-cpad: 5px; }
        #iadev .iadev-hero-fx .iadev-row { padding: 0 9px 0 6px; gap: 5px; }
        #iadev .iadev-row .fx-title { font-size: 0.65rem; letter-spacing: -0.005em; }
    }
    /* @@IA:iadev:css:end@@ */

    /* @@IA:iaproc:css:start@@ */
    /* ======================================================================
       Integration des processus d'affaires (iaproc) : #ia-processus
       Reprend la maquette client : fond marine plus clair, colonnes numerotees,
       colonne « Resultats » corail, bande « Amelioration continue », bande partenaire.
       ====================================================================== */
    #iaproc {
        --iaproc-line: rgba(70, 150, 255, 0.45);
        --iaproc-line-soft: rgba(70, 150, 255, 0.24);
        --iaproc-card: linear-gradient(180deg, #04305a 0%, #022644 30%, #011f3c 100%);
        --iaproc-card-end: #011f3c;
        --iaproc-row: linear-gradient(180deg, #0b467e 0%, #073864 100%);
        --iaproc-badge-bg: #0d4f8f;
        --iaproc-badge-bd: #3b8fe0;
        --iaproc-res-card: linear-gradient(180deg, #3d2136 0%, #2d1a2e 55%, #251829 100%);
        --iaproc-res-end: #251829;
        --iaproc-res-line: rgba(240, 103, 90, 0.6);
        --iaproc-coral: #f0675a;
        --iaproc-ink: #eaf2fc;
        --iaproc-ink-2: #a9bdd8;
        --iaproc-quote: #6fb2f2;
        --iaproc-gx: 40px;
        --ia-panel-bg: linear-gradient(175deg, rgba(8, 44, 84, 0.9), rgba(3, 27, 54, 0.94));
        --ia-panel-border: var(--iaproc-line);
        --fx-node-bg: linear-gradient(170deg, #0b3866 0%, #072b52 100%);
        /* fond marine plus clair de la maquette (et non le quasi-noir du site), plein ecran */
        background:
            repeating-linear-gradient(115deg, transparent 0 160px, rgba(90, 160, 255, 0.028) 160px 161px),
            radial-gradient(60% 34% at 12% 0%, rgba(40, 125, 235, 0.24), transparent 70%),
            radial-gradient(42% 28% at 92% 22%, rgba(35, 115, 225, 0.18), transparent 70%),
            radial-gradient(70% 30% at 50% 100%, rgba(20, 90, 190, 0.2), transparent 70%),
            linear-gradient(180deg, rgba(5, 33, 63, 0.96) 0%, rgba(7, 45, 85, 0.95) 40%, rgba(6, 40, 76, 0.95) 75%, rgba(4, 30, 58, 0.97) 100%);
        color: var(--iaproc-ink);
    }

    #iaproc .ia-subnav-list {
        border-color: rgba(70, 150, 255, 0.4);
        background: rgba(3, 30, 60, 0.85);
    }

    /* ---------- Boutons : corail plat de la maquette (texte fonce), secondaire en contour ---------- */
    #iaproc .ia-btn {
        border-radius: 8px;
        background: linear-gradient(180deg, #fd7469 0%, #f2615a 100%);
        color: #2a0612;
        font-weight: 650;
        box-shadow: 0 6px 22px rgba(240, 103, 90, 0.26);
    }

    #iaproc .ia-btn:hover { box-shadow: 0 10px 30px rgba(240, 103, 90, 0.4); }
    #iaproc .ia-btn .ic { width: 18px; height: 18px; stroke-width: 2.2; }

    #iaproc .ia-btn--ghost {
        border-color: rgba(90, 165, 255, 0.6);
        background: rgba(10, 50, 100, 0.35);
        color: #dce9fb;
        box-shadow: none;
    }

    #iaproc .ia-btn--ghost:hover {
        border-color: rgba(120, 190, 255, 0.9);
        background: rgba(20, 80, 150, 0.45);
        box-shadow: 0 0 22px rgba(95, 200, 255, 0.16);
    }

    #iaproc .ia-section-head h2 { color: #fff; }
    #iaproc .ia-section-head p { color: var(--iaproc-ink-2); }

    /* ---------- En-tete (maquette : fil d'Ariane, titre, texte, citation a droite) ---------- */
    #iaproc .iaproc-head {
        display: grid;
        gap: 22px;
        margin: 0 0 24px;
    }

    /* l'architecture suit directement l'en-tete, comme dans la maquette */
    #iaproc .iaproc-arch { margin-top: 0; }

    #iaproc .iaproc-head-copy { min-width: 0; }

    #iaproc .iaproc-crumbs ol {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 0;
        margin: 0 0 14px;
        padding: 0;
        list-style: none;
        font-size: 0.85rem;
    }

    #iaproc .iaproc-crumbs li { display: inline-flex; align-items: center; color: #8fb5dc; }

    #iaproc .iaproc-crumbs li + li::before {
        content: "›";
        margin: 0 10px;
        color: #5f86b3;
    }

    #iaproc .iaproc-crumbs a {
        color: #7fa6d6;
        text-decoration: none;
    }

    #iaproc .iaproc-crumbs a:hover { color: #fff; text-decoration: underline; }

    #iaproc .iaproc-crumbs a:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 2px;
        border-radius: 3px;
    }

    #iaproc .iaproc-h1 {
        margin: 0 0 12px;
        color: #fff;
        font-size: clamp(1.9rem, 3.4vw, 3.15rem);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.015em;
        text-shadow: 0 2px 24px rgba(0, 20, 60, 0.45);
    }

    #iaproc .iaproc-lead {
        max-width: 880px;
        margin: 0 0 20px;
        color: #d9e8f7;
        font-size: clamp(1.02rem, 1.5vw, 1.2rem);
        line-height: 1.45;
    }

    #iaproc .iaproc-quote {
        display: grid;
        gap: 4px;
        max-width: 420px;
        margin: 0;
        padding: 4px 0 4px 18px;
        border-left: 2px solid #f46c6b;
        color: var(--iaproc-quote);
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        line-height: 1.45;
        text-transform: uppercase;
    }

    /* ---------- Architecture d'integration (piece maitresse) ---------- */
    #iaproc .iaproc-frame {
        padding: 14px;
        border-radius: 12px;
        border-color: rgba(70, 150, 255, 0.38);
        /* fond du cadre (gouttieres) nettement plus sombre que les colonnes : 3 niveaux de profondeur de la maquette */
        background: linear-gradient(180deg, rgba(2, 14, 31, 0.98) 0%, rgba(0, 8, 20, 0.98) 100%);
        box-shadow: 0 0 50px rgba(30, 110, 230, 0.14), inset 0 1px 0 rgba(120, 190, 255, 0.12);
    }

    #iaproc .iaproc-frame-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 6px 24px;
        margin: 2px 2px 16px;
    }

    #iaproc .iaproc-frame-head h2 {
        margin: 0;
        color: #fff;
        font-size: clamp(1.2rem, 2.1vw, 1.5rem);
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -0.005em;
    }

    #iaproc .iaproc-frame-head p {
        margin: 0;
        color: #8fb0d3;
        font-size: 0.85rem;
    }

    /* Acces direct aux colonnes : seulement quand le schema deborde et se fait glisser (petits ecrans) */
    #iaproc .iaproc-colnav { display: none; }

    /* pagination 1-5 : la colonne affichee montre son titre, les autres leur seul numero */
    #iaproc .iaproc-frame:has(.iaproc-main.is-overflow) .iaproc-colnav {
        display: flex;
        gap: 6px;
        margin: 0 0 14px;
    }

    #iaproc .iaproc-colnav button {
        position: relative;
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 44px;
        min-height: 44px;
        padding: 6px 8px;
        border: 1px solid rgba(70, 150, 255, 0.35);
        border-radius: 8px;
        background: rgba(4, 38, 74, 0.85);
        color: #cfe3f7;
        font: inherit;
        font-size: 0.86rem;
        font-weight: 600;
        line-height: 1.2;
        cursor: pointer;
    }

    #iaproc .iaproc-colnav button[aria-current="true"] { flex: 0 1 auto; justify-content: flex-start; min-width: 0; }

    #iaproc .iaproc-colnav button:not([aria-current="true"]) .iaproc-colnav-l {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    #iaproc .iaproc-colnav-l { min-width: 0; text-align: left; }
    #iaproc .iaproc-colnav .iaproc-badge { width: 24px; height: 24px; font-size: 0.82rem; }
    #iaproc .iaproc-colnav button:nth-child(5) .iaproc-badge { border-color: #f1aba3; background: #8a2f3f; }
    #iaproc .iaproc-colnav button:hover { border-color: rgba(120, 200, 255, 0.75); }

    #iaproc .iaproc-colnav button[aria-current="true"] {
        border-color: #5fc8ff;
        background: rgba(14, 64, 118, 0.95);
        box-shadow: 0 0 0 1px rgba(95, 200, 255, 0.35), 0 0 14px rgba(60, 150, 255, 0.3);
        color: #fff;
    }

    #iaproc .iaproc-colnav button:focus-visible {
        outline: 2px solid var(--cyan);
        outline-offset: 2px;
    }

    #iaproc .iaproc-main-stage {
        display: flex;
        flex-direction: column;
        gap: 24px;
        min-width: 940px;
        padding: 4px 0 6px;
    }

    #iaproc .iaproc-cols {
        --fx-gap-x: var(--iaproc-gx);
        align-items: stretch;
    }

    /* Carte de colonne : fond permis, jamais de z-index / transform / opacity / filter (contexte d'empilement) */
    #iaproc .iaproc-col {
        position: relative;
        justify-content: flex-start;
        gap: 5px;
        padding: 0 9px 10px;
        border: 1px solid rgba(70, 155, 255, 0.55);
        border-radius: 9px;
        background: var(--iaproc-card);
        box-shadow: inset 0 1px 0 rgba(130, 200, 255, 0.2), 0 0 22px rgba(30, 110, 230, 0.16);
    }

    #iaproc .iaproc-col > :last-child { margin-bottom: 0; }

    #iaproc .iaproc-colhead {
        display: flex;
        align-items: center;
        gap: 11px;
        box-sizing: border-box;
        min-height: 45px;
        margin: 0 -9px 4px;
        padding: 9px 11px;
        border-bottom: 1px solid rgba(70, 150, 255, 0.34);
        border-radius: 8px 8px 0 0;
        background: linear-gradient(180deg, #04406f, #023562);
        color: #ebf7fe;
        font-family: var(--font);
        font-size: 0.96rem;
        font-weight: 650;
        letter-spacing: 0;
        line-height: 1.2;
        text-align: left;
        text-transform: none;
    }

    #iaproc .iaproc-badge {
        display: inline-grid;
        flex: none;
        place-items: center;
        width: 26px;
        height: 26px;
        border: 1px solid var(--iaproc-badge-bd);
        border-radius: 5px;
        background: var(--iaproc-badge-bg);
        color: #fff;
        font-size: 0.92rem;
        font-weight: 700;
        box-shadow: 0 0 10px rgba(59, 143, 224, 0.35);
    }

    #iaproc .iaproc-main .iaproc-row {
        flex-direction: row;
        align-items: center;
        gap: 9px;
        min-height: 30px;
        padding: 4px 9px;
        border: 1px solid rgba(90, 170, 255, 0.5);
        border-radius: 6px;
        background: var(--iaproc-row);
        box-shadow: inset 0 1px 0 rgba(150, 210, 255, 0.14), 0 0 8px rgba(40, 130, 240, 0.14);
        color: #e1edf9;
        font-size: 0.82rem;
        line-height: 1.22;
    }

    /* icone dans un petit carre encadre, comme la maquette */
    #iaproc .iaproc-row > .ic {
        flex: none;
        box-sizing: border-box;
        width: 22px;
        height: 22px;
        padding: 3px;
        border: 1px solid rgba(70, 150, 255, 0.38);
        border-radius: 5px;
        background: rgba(3, 30, 62, 0.55);
        color: #b3d9ff;
        stroke-width: 1.7;
    }

    #iaproc .iaproc-col--5 .iaproc-row > .ic {
        border-color: rgba(240, 103, 90, 0.4);
        background: rgba(40, 14, 28, 0.5);
    }

    #iaproc .iaproc-rl {
        display: block;
        min-width: 0;
        font-weight: 500;
    }

    #iaproc .iaproc-rl small {
        display: block;
        margin-top: 1px;
        color: #8fabc9;
        font-size: 0.72rem;
        font-weight: 400;
    }

    /* accents par colonne (allumage) ; produits : JRose rose, TIB Finance or */
    #iaproc .iaproc-col--1 .fx-node,
    #iaproc .iaproc-col--4 .fx-node { --fx-accent: #5fc8ff; }
    #iaproc .iaproc-col--2 .fx-node { --fx-accent: #3ddbc1; }
    #iaproc .iaproc-col--3 .fx-node { --fx-accent: #74c6ff; }
    #iaproc .iaproc-col--5 .fx-node { --fx-accent: #ff7b68; }
    #iaproc .iaproc-main .iaproc-row--jrose { --fx-accent: #f283aa; }
    #iaproc .iaproc-main .iaproc-row--tib { --fx-accent: #f2b544; }
    #iaproc .iaproc-row--jrose > .ic { color: #f6a3c2; }
    #iaproc .iaproc-row--tib > .ic { color: #f5c76a; }

    #iaproc .iaproc-main .fx-node.is-lit {
        border-color: var(--fx-accent);
        background: linear-gradient(180deg, color-mix(in srgb, var(--fx-accent) 28%, #0b467e) 0%, #073864 100%);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent) 55%, transparent), 0 0 20px color-mix(in srgb, var(--fx-accent) 38%, transparent);
        color: #fff;
    }

    #iaproc .iaproc-main .fx-node.is-lit > .ic,
    #iaproc .iaproc-main .fx-node.is-done > .ic { color: var(--fx-accent); }

    #iaproc .iaproc-main .fx-node.is-done {
        border-color: color-mix(in srgb, var(--fx-accent) 60%, transparent);
        color: #e3eef9;
    }

    /* pastille « parcouru » en position absolue : aucune variation de taille du noeud (les liens restent en place) */
    #iaproc .iaproc-main .iaproc-row.is-done::after {
        content: "";
        position: absolute;
        right: 5px;
        top: 5px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--fx-accent);
        box-shadow: 0 0 6px var(--fx-accent);
    }

    /* hors scenario : reste proche de la maquette (contenu a 72 %) */
    #iaproc .iaproc-main .fx-node.is-dim { border-color: rgba(90, 170, 255, 0.3); box-shadow: none; }
    #iaproc .iaproc-main .fx-node.is-dim > * { opacity: 0.72; filter: none; }

    /* Colonne 3 : orchestration HDCE, bordure plus lumineuse */
    #iaproc .iaproc-col--3 {
        border-color: rgba(79, 180, 245, 0.8);
        box-shadow: inset 0 1px 0 rgba(130, 200, 255, 0.25), 0 0 0 1px rgba(79, 180, 245, 0.18), 0 0 30px rgba(60, 160, 255, 0.24);
    }

    /* Colonne 5 : resultats en corail */
    #iaproc .iaproc-col--5 {
        border-color: var(--iaproc-res-line);
        background: var(--iaproc-res-card);
        box-shadow: inset 0 1px 0 rgba(255, 170, 160, 0.18), 0 0 0 1px rgba(240, 103, 90, 0.14), 0 0 28px rgba(240, 103, 90, 0.18);
    }

    #iaproc .iaproc-col--5 .iaproc-colhead {
        border-bottom-color: rgba(240, 103, 90, 0.35);
        background: linear-gradient(180deg, rgba(90, 40, 58, 0.95), rgba(66, 33, 50, 0.85));
    }

    #iaproc .iaproc-col--5 .iaproc-badge {
        border-color: #f1aba3;
        background: #8a2f3f;
        box-shadow: 0 0 10px rgba(240, 103, 90, 0.4);
    }

    #iaproc .iaproc-main .iaproc-col--5 .iaproc-row {
        border-color: rgba(240, 103, 90, 0.4);
        background: linear-gradient(180deg, #3d2334 0%, #321d2e 100%);
        color: #dccbd3;
    }

    #iaproc .iaproc-col--5 .iaproc-row > .ic { color: #ff8a7a; }

    #iaproc .iaproc-main .iaproc-col--5 .fx-node.is-lit {
        background: linear-gradient(180deg, #5a2a3a 0%, #3b1f31 100%);
    }

    #iaproc .iaproc-main .iaproc-col--5 .fx-node.is-dim { border-color: rgba(240, 103, 90, 0.2); }

    /* Notes de colonne (noeuds de boucle ou texte simple) */
    #iaproc .iaproc-main .iaproc-note {
        display: block;
        min-height: 0;
        margin-top: auto;
        padding: 6px 7px 3px;
        border-color: transparent;
        background: var(--iaproc-card-end);
        box-shadow: none;
        color: #5fa8e6;
        font-size: 0.8rem;
        line-height: 1.3;
    }

    #iaproc .iaproc-main .iaproc-col--5 .iaproc-note {
        background: var(--iaproc-res-end);
        color: #ff8f80;
    }

    #iaproc .iaproc-main .iaproc-note.is-dim { border-color: transparent; }

    #iaproc .iaproc-colnote {
        margin: auto 0 0;
        padding: 6px 4px 2px;
        color: #5fa8e6;
        font-size: 0.8rem;
        line-height: 1.3;
    }

    /* Fleches de la maquette entre les colonnes (decoratives) */
    #iaproc .iaproc-chev {
        position: absolute;
        top: 43%;
        right: calc(var(--fx-gap-x) / -2 - 11px);
        width: 20px;
        height: 18px;
        background: #5bcafc;
        clip-path: polygon(0 32%, 48% 32%, 48% 0, 100% 50%, 48% 100%, 48% 68%, 0 68%);
        opacity: 0.85;
        pointer-events: none;
    }

    /* Bande « Amelioration continue » : du centre de la colonne 1 au centre de la colonne 5 (+/- 40px) */
    #iaproc .iaproc-band {
        margin: 0 calc((100% - 4 * var(--iaproc-gx)) / 10 + 40px);
        padding: 8px 14px 11px;
        border: 1px solid rgba(70, 150, 255, 0.42);
        border-radius: 9px;
        background: linear-gradient(180deg, rgba(3, 44, 82, 0.95), rgba(2, 36, 68, 0.95));
        box-shadow: 0 0 24px rgba(30, 110, 230, 0.12);
    }

    #iaproc .iaproc-band-title {
        margin: 0 auto 8px;
        width: max-content;
        max-width: 100%;
        color: #eff5fc;
        font-size: 1rem;
        font-weight: 700;
        text-align: center;
    }

    /* 26px entre les cases : la chaine de liens de la boucle reste lisible (fleche visible) */
    #iaproc .iaproc-band-row {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 26px;
    }

    #iaproc .iaproc-main .iaproc-bandnode {
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 8px 8px 9px;
        border: 1px solid rgba(60, 150, 240, 0.5);
        border-radius: 7px;
        background: linear-gradient(180deg, #063867 0%, #032d55 100%);
        box-shadow: none;
        text-align: center;
        --fx-accent: #5fc8ff;
    }

    #iaproc .iaproc-main .iaproc-bandnode.fx-prod--ai { --fx-accent: #a48dff; }

    #iaproc .iaproc-bandnode strong {
        display: block;
        color: #fff;
        font-size: 0.82rem;
        font-weight: 650;
        line-height: 1.25;
    }

    #iaproc .iaproc-bandnode span {
        display: block;
        color: #8fc0f0;
        font-size: 0.74rem;
        line-height: 1.25;
    }

    /* bande hors scenario : contenu presque plein (titres blancs, sous-titres bleu clair de la maquette) */
    #iaproc .iaproc-main .iaproc-bandnode.is-dim { border-color: rgba(60, 150, 240, 0.32); }
    #iaproc .iaproc-main .iaproc-bandnode.is-dim > * { opacity: 0.88; }

    /* Les deux retours en L de la maquette (seuls liens « feedback » du schema) : cyan plein, toujours visibles */
    #iaproc .iaproc-main { --fx-k-feedback: #5be0fd; }
    #iaproc .iaproc-main .fx-k-feedback .fx-wire { stroke-dasharray: none; stroke-width: 2; stroke-opacity: 0.7; }
    #iaproc .iaproc-main .fx-k-feedback .fx-arrow { fill-opacity: 0.85; }
    #iaproc .iaproc-main .fx-edge.is-dim.fx-k-feedback .fx-wire { stroke-opacity: 0.75; }
    #iaproc .iaproc-main .fx-edge.is-dim.fx-k-feedback .fx-arrow { fill-opacity: 0.85; }
    #iaproc .iaproc-main .fx-edge.is-active.fx-k-feedback .fx-wire { stroke-opacity: 1; stroke-width: 2.2; }

    /* Console et controles aux couleurs de la page */
    #iaproc .fx-console {
        border-color: rgba(70, 150, 255, 0.32);
        background: rgba(2, 24, 50, 0.88);
    }

    #iaproc .fx-log {
        border-color: rgba(70, 150, 255, 0.2);
        background: rgba(1, 14, 32, 0.72);
    }

    #iaproc .fx-con-text,
    #iaproc .fx-scn-sum,
    #iaproc .fx-chip-t { color: #9fb8d6; }

    #iaproc .fx-chip,
    #iaproc .fx-btn {
        border-color: rgba(70, 150, 255, 0.38);
        background: rgba(4, 38, 74, 0.85);
    }

    #iaproc .fx-chip:hover,
    #iaproc .fx-btn:hover {
        border-color: rgba(120, 200, 255, 0.75);
        background: rgba(14, 64, 118, 0.9);
    }

    /* puce du scenario en cours : corail, comme le moteur (la surcharge ci-dessus l'ecrasait) */
    #iaproc .fx-chip[aria-pressed="true"],
    #iaproc .fx-chip[aria-pressed="true"]:hover {
        border-color: rgba(240, 103, 90, 0.85);
        background: linear-gradient(160deg, rgba(240, 103, 90, 0.3), rgba(192, 57, 43, 0.12));
        box-shadow: 0 0 18px rgba(240, 103, 90, 0.22);
        color: #fff;
    }

    #iaproc .fx-btn[aria-disabled="true"]:hover {
        border-color: rgba(70, 150, 255, 0.38);
        background: rgba(4, 38, 74, 0.85);
    }

    #iaproc .iaproc-main { margin-top: 0; }

    /* Architecture : barre de scenarios compacte (pastilles d'une ligne), console courte */
    #iaproc .iaproc-main .fx-scn-sum,
    #iaproc .iaproc-main .fx-chip-t { display: none; }

    #iaproc .iaproc-main .fx-scn { gap: 6px; }

    #iaproc .iaproc-main .fx-chip {
        justify-content: center;
        min-height: 34px;
        padding: 5px 11px;
        border-radius: 999px;
    }

    #iaproc .iaproc-main .fx-chip-l { font-size: 0.78rem; font-weight: 600; }

    /* ---------- Architecture : fenetres en direct ----------
       Partie basse des colonnes 2, 3 et 4 (.iaproc-low) : une fenetre flottante s'y ouvre a cote de la tuile
       active, sur des rangees libres qu'elle couvre entierement. Les 5 titres numerotes et les rangees du haut
       restent toujours visibles : la disposition de la maquette n'est jamais remplacee. */
    #iaproc .iaproc-low {
        position: relative;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: inherit;
        min-height: 0;
    }

    #iaproc .iaproc-main .iaproc-mv {
        left: -11px;
        top: -3px;
        right: -11px;
        bottom: -4px;
        display: flex;
        flex-direction: column;
        width: auto;
        max-width: none;
        padding: 0;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--fx-accent) 60%, #cfe3ff);
        border-radius: 9px;
        background: #f4f7fc;
        box-shadow: 0 16px 36px rgba(0, 6, 20, 0.62), 0 0 0 3px rgba(2, 18, 40, 0.55), 0 0 28px color-mix(in srgb, var(--fx-accent) 38%, transparent);
        color: #15233d;
        font-size: 0.72rem;
        line-height: 1.28;
        transform-origin: 50% 0;
    }

    /* fenetre claire : barre produit, contenu reparti sur toute la hauteur, barre d'etat en bas */
    #iaproc .iaproc-mwin {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    #iaproc .iaproc-mwin .iaproc-wbar { min-height: 0; padding: 0.45em 0.75em; }
    #iaproc .iaproc-mwin .iaproc-wbody { justify-content: space-evenly; overflow: hidden; }

    #iaproc .iaproc-wstat {
        flex: none;
        padding: 0.35em 0.75em;
        border-top: 1px solid #dbe4f1;
        background: #e8eef7;
        color: #5d6f8c;
        font-family: var(--fx-mono);
        font-size: 0.86em;
        letter-spacing: 0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #iaproc .iaproc-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35em;
    }

    #iaproc .iaproc-chips .iaproc-chk { flex: 1 1 auto; }

    #iaproc .iaproc-wttl {
        display: flex;
        flex-direction: column;
        min-width: 0;
        line-height: 1.2;
    }

    #iaproc .iaproc-wttl small {
        font-size: 0.8em;
        font-weight: 600;
        letter-spacing: 0.04em;
        opacity: 0.8;
        white-space: normal;
    }

    #iaproc .iaproc-mwin .iaproc-wbar b { min-width: 0; white-space: normal; }
    #iaproc .iaproc-mwin .iaproc-wbody { gap: 0.4em; padding: 0.55em 0.7em; }
    #iaproc .iaproc-mwin strong { font-size: 1.05em; }
    #iaproc .iaproc-mwin .iaproc-wbtn,
    #iaproc .iaproc-mwin .iaproc-chip,
    #iaproc .iaproc-mwin .iaproc-ok { white-space: normal; }
    #iaproc .iaproc-mwin .fx-vig-draw { max-height: 3.4em; stroke: #1b56b0; }

    #iaproc .iaproc-kv {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.1em 0.6em;
        padding-top: 0.3em;
        border-top: 1px dashed #d3ddeb;
        font-weight: 650;
    }

    #iaproc .iaproc-kv b { color: #5d6f8c; font-weight: 600; }

    #iaproc .iaproc-meter {
        display: block;
        height: 6px;
        overflow: hidden;
        border-radius: 3px;
        background: #e3e9f2;
    }

    #iaproc .iaproc-meter i {
        display: block;
        width: var(--iaproc-v, 50%);
        height: 100%;
        border-radius: 3px;
        background: linear-gradient(90deg, #6f5ad6, #a48dff);
    }

    #iaproc .iaproc-meter--low i { background: linear-gradient(90deg, #1b8048, #34c77b); }

    #iaproc .iaproc-bars {
        display: flex;
        align-items: flex-end;
        gap: 4px;
        height: 42px;
        padding: 0 2px;
        border-bottom: 1px solid #c9d7ec;
    }

    #iaproc .iaproc-bars i {
        flex: 1 1 0;
        height: var(--iaproc-v, 50%);
        border-radius: 2px 2px 0 0;
        background: #4f8fe0;
    }

    #iaproc .iaproc-bars i:nth-child(4) { background: #e8574a; }

    #iaproc .iaproc-wbar--ai { background: linear-gradient(90deg, #4b3aa8, #6f5ad6); }
    #iaproc .iaproc-wbtn--hdce { background: #c94336; }

    /* ---------- Hero en direct : parcours d'une facture ---------- */
    #iaproc .iaproc-live { margin: 56px 0 0; scroll-margin-top: 90px; }

    /* journal hors ecran (diagramme gele) : l'entree de l'etape 1 est affichee sans attendre son fondu */
    #iaproc .fx.is-idle .fx-log li.is-new { animation: none !important; }

    #iaproc .iaproc-nowrap { white-space: nowrap; }

    #iaproc .iaproc-live-head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 14px;
        margin-bottom: 14px;
    }

    #iaproc .iaproc-live-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 4px 12px;
        border: 1px solid rgba(240, 103, 90, 0.55);
        border-radius: 999px;
        background: rgba(240, 103, 90, 0.12);
        color: #ffb3aa;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    #iaproc .iaproc-live-pill i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ff6f5e;
        box-shadow: 0 0 0 0 rgba(255, 111, 94, 0.6);
    }

    #iaproc .iaproc-live-head h2 {
        margin: 0;
        color: #fff;
        font-size: clamp(1.15rem, 2.2vw, 1.5rem);
        font-weight: 750;
        line-height: 1.25;
    }

    #iaproc .iaproc-live-chain {
        flex: 1 1 100%;
        margin: 0;
        color: #9fbde0;
        font-size: 0.92rem;
    }

    #iaproc .iaproc-live-chain span { color: #5bcafc; }

    /* « En direct » : la pulsation suit l'etat du diagramme (arretee hors ecran ou en pause) */
    #iaproc .iaproc-live:has(.iaproc-hero.is-idle) .iaproc-live-pill i,
    #iaproc .iaproc-live:has(.iaproc-hero.is-paused) .iaproc-live-pill i { animation-play-state: paused; }

    /* Scene du parcours (>= 640px) : la colonne de gauche (rangees 2-3) est l'ecran ou s'ouvrent les fenetres ;
       aucun noeud n'y est place, une fenetre y est visible a chaque etape */
    #iaproc .iaproc-hero-stage {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
        grid-template-rows: auto minmax(150px, auto) minmax(150px, auto);
        column-gap: 40px;
        row-gap: 28px;
        padding: 4px 2px;
    }

    #iaproc .iaproc-hp-jrose { grid-area: 1 / 1; }
    #iaproc .iaproc-hp-se { grid-area: 1 / 2; }
    #iaproc .iaproc-hp-client { grid-area: 1 / 3; }
    #iaproc .iaproc-hp-shield { grid-area: 2 / 2; }
    #iaproc .iaproc-hp-tib { grid-area: 2 / 3; }
    #iaproc .iaproc-hp-hdce { grid-area: 3 / 2; }
    #iaproc .iaproc-hp-dests { grid-area: 3 / 3; }
    #iaproc .iaproc-hp-screen { display: none; }

    #iaproc .iaproc-hn {
        align-self: center;
        justify-self: center;
        width: min(100%, 290px);
    }

    #iaproc .iaproc-hero .fx-node.is-lit {
        background: linear-gradient(170deg, color-mix(in srgb, var(--fx-accent) 22%, #0b3866) 0%, #072b52 100%);
    }

    #iaproc .iaproc-hero .fx-sub { color: #8fb0d3; }

    #iaproc .iaproc-se-mark {
        display: inline-block;
        width: 10px;
        height: 12px;
        margin-right: 6px;
        vertical-align: -1px;
    }

    #iaproc .iaproc-hp-se .fx-tag::before { display: none; }

    #iaproc .iaproc-hp-hdce .fx-tag { color: #ffb3aa; }

    /* Statut du client (pastille pilotee par la phase) */
    #iaproc .iaproc-pill {
        display: inline-flex;
        align-self: flex-start;
        margin-top: 4px;
    }

    #iaproc .iaproc-pill > span {
        display: none;
        padding: 2px 9px;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 650;
        line-height: 1.4;
        white-space: nowrap;
    }

    #iaproc .iaproc-pill-0 { background: rgba(154, 171, 198, 0.16); color: #c3d0e3; }
    #iaproc .iaproc-pill-1 { background: rgba(95, 200, 255, 0.16); color: #9fdcff; }
    #iaproc .iaproc-pill-2 { background: rgba(242, 181, 68, 0.18); color: #f7cf7d; }
    #iaproc .iaproc-pill-3,
    #iaproc .iaproc-pill-4 { background: rgba(52, 199, 123, 0.18); color: #8ff0bb; }

    #iaproc [data-iaproc-ph=""] .iaproc-pill-0,
    #iaproc [data-iaproc-ph="doc"] .iaproc-pill-0,
    #iaproc [data-iaproc-ph="mail"] .iaproc-pill-0,
    #iaproc [data-iaproc-ph="inbox"] .iaproc-pill-1,
    #iaproc [data-iaproc-ph="pay"] .iaproc-pill-2,
    #iaproc [data-iaproc-ph="sign"] .iaproc-pill-3,
    #iaproc [data-iaproc-ph="shield"] .iaproc-pill-4,
    #iaproc [data-iaproc-ph="orch"] .iaproc-pill-4,
    #iaproc [data-iaproc-ph="land"] .iaproc-pill-4 { display: inline-block; }

    /* Bouclier TIB Finance (noeud rond) : l'icone n'apparait qu'a son retour ; jamais de transform sur le noeud */
    #iaproc .iaproc-hp-shield {
        align-self: center;
        justify-self: center;
        align-items: center;
        gap: 5px;
        padding: 8px 12px 7px;
        border-radius: 14px;
        text-align: center;
    }

    #iaproc .iaproc-shield-ring {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border: 1.5px dashed rgba(242, 181, 68, 0.45);
        border-radius: 50%;
        background: rgba(242, 181, 68, 0.06);
    }

    /* au repos : bouclier TIB Finance attenue (en attente de confirmation) ; plein a son retour */
    #iaproc .iaproc-shield-ic {
        width: 26px;
        height: 26px;
        color: #b99a5c;
        stroke-width: 1.8;
        opacity: 0.45;
    }

    #iaproc .iaproc-sc-wait { display: block; }
    #iaproc .iaproc-sc-ok { display: none; }
    #iaproc .iaproc-shield-on .iaproc-sc-wait { display: none; }
    #iaproc .iaproc-shield-on .iaproc-sc-ok { display: block; }

    #iaproc .iaproc-shield-cap {
        color: #f5c76a;
        font-family: var(--fx-mono);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    #iaproc .iaproc-shield-on .iaproc-shield-ring {
        border-style: solid;
        border-color: #f2b544;
        background: radial-gradient(circle, rgba(242, 181, 68, 0.3), rgba(242, 181, 68, 0.06) 70%);
        box-shadow: 0 0 18px rgba(242, 181, 68, 0.45);
    }

    #iaproc .iaproc-shield-on .iaproc-shield-ic { color: #f5c76a; opacity: 1; }

    /* Destinations : quatre petits noeuds empiles */
    #iaproc .iaproc-hp-dests {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        align-self: center;
        justify-self: center;
        width: min(100%, 290px);
    }

    #iaproc .iaproc-hd {
        flex-direction: row;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 2px 8px;
        padding: 7px 11px;
        border-radius: 8px;
        font-size: 0.8rem;
        line-height: 1.25;
    }

    #iaproc .iaproc-hd b { color: #fff; font-weight: 650; }
    #iaproc .iaproc-hd span { color: #8fb0d3; }

    /* ----- Fenetres (vignettes) : mini-interfaces claires ----- */
    #iaproc .iaproc-win {
        display: flex;
        flex-direction: column;
        width: auto;
        max-width: none;
        padding: 0;
        overflow: hidden;
        border: 1px solid rgba(170, 205, 255, 0.6);
        border-radius: 10px;
        background: #f4f7fc;
        color: #15233d;
        font-size: 0.74rem;
        line-height: 1.3;
        box-shadow: 0 18px 40px rgba(0, 8, 24, 0.5), 0 0 30px color-mix(in srgb, var(--fx-accent) 22%, transparent);
    }

    /* ecran des fenetres (colonne gauche, rangees 2-3) : chaque fenetre prend la hauteur de son contenu et
       se centre dans l'ecran (pas de grand vide blanc). Lignes de fin explicites : pour un element absolu,
       une fin « auto » vaut le bord de la scene */
    #iaproc .iaproc-hero-stage .iaproc-win {
        grid-area: 2 / 1 / 4 / 2;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        height: fit-content;
        max-height: 100%;
        margin: auto 0;
        /* sortie rapide... */
        transition: opacity 0.14s ease, transform 0.2s ease, visibility 0s linear 0.16s;
    }

    /* ...entree differee : la fenetre sortante a disparu avant que la suivante apparaisse (jamais deux textes superposes) */
    #iaproc .iaproc-hero-stage .iaproc-win.is-on {
        transition: opacity 0.3s ease 0.18s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.18s, visibility 0s linear 0s;
    }

    #iaproc .iaproc-secure {
        display: flex;
        align-items: center;
        gap: 0.45em;
        padding-top: 0.35em;
        border-top: 1px dashed #d3ddeb;
        color: #5d6f8c;
        font-size: 0.9em;
    }

    #iaproc .iaproc-secure .ic { flex: none; width: 1.15em; height: 1.15em; color: #1b8048; stroke-width: 2; }

    #iaproc .iaproc-wbar {
        display: flex;
        flex: none;
        align-items: center;
        gap: 0.5em;
        min-height: 2.3em;
        padding: 0 0.85em;
        color: #fff;
        font-size: 0.95em;
        white-space: nowrap;
        overflow: hidden;
    }

    #iaproc .iaproc-wbar b { font-weight: 700; }
    #iaproc .iaproc-wbar span { overflow: hidden; text-overflow: ellipsis; opacity: 0.82; }
    #iaproc .iaproc-wbar img { width: 0.95em; height: auto; }
    #iaproc .iaproc-wbar .ic { width: 1.25em; height: 1.25em; color: #f5c76a; stroke-width: 2; }

    #iaproc .iaproc-wbar i {
        flex: none;
        width: 0.55em;
        height: 0.55em;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.45);
    }

    #iaproc .iaproc-wbar i:first-of-type { margin-left: auto; }

    #iaproc .iaproc-wbar--jrose { background: linear-gradient(90deg, #8e2f5b, #c2457a); }
    #iaproc .iaproc-wbar--se { background: linear-gradient(90deg, #1b56b0, #2a72d8); }
    #iaproc .iaproc-wbar--client { background: linear-gradient(90deg, #2d3c58, #46597d); }
    #iaproc .iaproc-wbar--tib { background: linear-gradient(90deg, #0c2a52, #174178); }
    #iaproc .iaproc-wbar--hdce { background: linear-gradient(90deg, #b8372b, #e8574a); }
    #iaproc .iaproc-wbar--erp { background: linear-gradient(90deg, #0d5a55, #15857b); }

    #iaproc .iaproc-wbody {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 0.42em;
        min-height: 0;
        padding: 0.75em 0.9em;
    }

    #iaproc .iaproc-wrow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6em;
    }

    #iaproc .iaproc-wrow strong { font-size: 1.08em; }
    #iaproc .iaproc-wmeta { color: #5d6f8c; font-size: 0.94em; }
    #iaproc .iaproc-amt { font-size: 1.25em; }

    #iaproc .iaproc-wline {
        display: flex;
        justify-content: space-between;
        gap: 0.8em;
        padding-top: 0.3em;
        border-top: 1px dashed #d3ddeb;
    }

    #iaproc .iaproc-wline b { font-weight: 650; white-space: nowrap; }
    #iaproc .iaproc-wline--total { border-top: 1px solid #b9c7da; font-size: 1.06em; }
    #iaproc .iaproc-wline--total b { color: #0f2a52; }

    #iaproc .iaproc-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.35em;
        padding: 0.18em 0.6em;
        border-radius: 999px;
        font-size: 0.9em;
        font-weight: 650;
        white-space: nowrap;
    }

    #iaproc .iaproc-chip .ic { width: 1.15em; height: 1.15em; stroke-width: 2; }
    #iaproc .iaproc-chip--grey { background: #e3e9f2; color: #5d6f8c; }
    #iaproc .iaproc-chip--file { background: #e5edf9; color: #1b56b0; }
    #iaproc .iaproc-chip--teal { background: #d6f4ee; color: #0f7d6c; }
    #iaproc .iaproc-chip--green { background: #d9f3e4; color: #1b8048; }

    /* bascule d'etat dans la meme cellule (etat final par defaut) */
    #iaproc .iaproc-swap { display: inline-grid; }
    #iaproc .iaproc-swap > * { grid-area: 1 / 1; justify-self: end; }
    #iaproc .iaproc-sw-a { visibility: hidden; }

    #iaproc .iaproc-wbtn {
        position: relative;
        display: inline-flex;
        align-self: flex-start;
        align-items: center;
        justify-content: center;
        padding: 0.45em 0.95em;
        border-radius: 6px;
        color: #fff;
        font-weight: 700;
        white-space: nowrap;
    }

    #iaproc .iaproc-wbtn--se { background: #1f62c4; }
    #iaproc .iaproc-wbtn--tib { background: #174178; box-shadow: inset 0 -2px 0 #f2b544; }
    #iaproc .iaproc-wbtn--wide { align-self: stretch; }

    #iaproc .iaproc-cur {
        position: absolute;
        right: -0.4em;
        bottom: -1.1em;
        width: 1.7em;
        height: 1.7em;
        visibility: hidden;
        pointer-events: none;
    }

    #iaproc .iaproc-cur .ic {
        width: 100%;
        height: 100%;
        fill: #fff;
        stroke: #15233d;
        stroke-width: 1.6;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
    }

    #iaproc .iaproc-ok {
        display: inline-flex;
        align-self: flex-start;
        align-items: center;
        gap: 0.4em;
        padding: 0.25em 0.7em;
        border-radius: 999px;
        background: #d9f3e4;
        color: #1b7a45;
        font-weight: 650;
    }

    #iaproc .iaproc-ok .ic { width: 1.2em; height: 1.2em; stroke-width: 2; }

    /* courriel securise */
    #iaproc .iaproc-field {
        display: flex;
        gap: 0.6em;
        padding-bottom: 0.32em;
        border-bottom: 1px solid #dbe4f1;
    }

    #iaproc .iaproc-field b { flex: none; width: 3.2em; color: #5d6f8c; font-weight: 600; }
    #iaproc .iaproc-field span { min-width: 0; }
    #iaproc .iaproc-wtext { color: #34465f; }

    #iaproc .iaproc-wfoot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45em;
    }

    #iaproc .iaproc-wfoot .iaproc-wbtn { margin-left: auto; }

    /* boite de reception */
    #iaproc .iaproc-mrow {
        position: relative;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 0.55em;
        padding: 0.45em 0.6em;
        border-radius: 6px;
        background: #e6eefb;
    }

    #iaproc .iaproc-mrow i {
        grid-row: 1 / span 2;
        align-self: center;
        width: 0.55em;
        height: 0.55em;
        border-radius: 50%;
        background: #1f62c4;
    }

    #iaproc .iaproc-mrow b,
    #iaproc .iaproc-mrow span:not(.iaproc-cur) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #iaproc .iaproc-mrow span:not(.iaproc-cur) { color: #5d6f8c; }
    #iaproc .iaproc-mrow .iaproc-cur { right: 0.6em; bottom: -0.7em; }

    #iaproc .iaproc-mopen {
        display: flex;
        flex-direction: column;
        gap: 0.45em;
        padding-left: 0.6em;
        border-left: 2px solid #c9d7ec;
    }

    #iaproc .iaproc-mopen .iaproc-chip { align-self: flex-start; }

    #iaproc .iaproc-warn {
        display: flex;
        align-items: center;
        gap: 0.4em;
        padding: 0.35em 0.55em;
        border-radius: 5px;
        background: #fff1d6;
        color: #8a5a00;
        font-weight: 650;
    }

    #iaproc .iaproc-warn .ic { flex: none; width: 1.2em; height: 1.2em; stroke-width: 2; }

    /* passerelle de paiement */
    #iaproc .iaproc-tabs {
        display: flex;
        gap: 0.3em;
        padding: 0.2em;
        border-radius: 6px;
        background: #e3e9f2;
    }

    #iaproc .iaproc-tabs > span {
        display: inline-flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        gap: 0.35em;
        padding: 0.25em 0.4em;
        border-radius: 4px;
        color: #5d6f8c;
        font-weight: 600;
        white-space: nowrap;
    }

    #iaproc .iaproc-tabs > span.is-on { background: #fff; color: #0f2a52; box-shadow: 0 1px 2px rgba(15, 42, 82, 0.15); }
    #iaproc .iaproc-tabs .ic { width: 1.15em; height: 1.15em; }

    #iaproc .iaproc-input {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6em;
        min-width: 0;
        padding: 0.32em 0.55em;
        border: 1px solid #cdd8e8;
        border-radius: 5px;
        background: #fff;
    }

    #iaproc .iaproc-input b { flex: none; color: #5d6f8c; font-weight: 600; }

    #iaproc .iaproc-type {
        display: inline-block;
        overflow: hidden;
        font-family: var(--fx-mono);
        font-size: 0.95em;
        white-space: nowrap;
    }

    #iaproc .iaproc-inputs {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.4em;
    }

    #iaproc .iaproc-paybox { display: grid; }
    #iaproc .iaproc-paybox > * { grid-area: 1 / 1; }
    #iaproc .iaproc-paybox .iaproc-wbtn { visibility: hidden; }
    #iaproc .iaproc-paybox .iaproc-ok { align-self: center; justify-self: stretch; justify-content: center; }

    #iaproc .iaproc-pending {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5em;
        padding: 0.45em;
        border-radius: 6px;
        background: #fff1d6;
        color: #8a5a00;
        font-weight: 650;
        visibility: hidden;
    }

    #iaproc .iaproc-pending i {
        width: 1em;
        height: 1em;
        border: 2px solid rgba(138, 90, 0, 0.25);
        border-top-color: #8a5a00;
        border-radius: 50%;
    }

    /* signature */
    #iaproc .iaproc-sigpad {
        display: block;
        padding: 0.3em 0.5em;
        border: 1px dashed #b9c7da;
        border-radius: 6px;
        background: #fff;
    }

    #iaproc .iaproc-hv-sign .fx-vig-draw { max-height: 4.2em; stroke: #1b56b0; }
    #iaproc .iaproc-sigbase { stroke: #c9d4e4; stroke-width: 1; }

    /* confirmation TIB Finance */
    #iaproc .iaproc-tibok {
        flex-direction: row;
        align-items: center;
        gap: 0.9em;
    }

    #iaproc .iaproc-tibok-mark {
        display: grid;
        flex: none;
        place-items: center;
        width: 3.6em;
        height: 3.6em;
        border-radius: 50%;
        background: radial-gradient(circle, #1d4b85, #0c2a52);
        box-shadow: 0 0 0 3px rgba(242, 181, 68, 0.35), 0 0 18px rgba(242, 181, 68, 0.45);
    }

    #iaproc .iaproc-tibok-mark .ic { width: 2.1em; height: 2.1em; color: #f5c76a; stroke-width: 1.8; }

    #iaproc .iaproc-tibok-txt {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 0.35em;
        min-width: 0;
    }

    #iaproc .iaproc-tibok-txt strong { font-size: 1.08em; }
    #iaproc .iaproc-c-ok { color: #1b8048; }

    /* controles de l'orchestration */
    #iaproc .iaproc-chk {
        display: flex;
        align-items: center;
        gap: 0.5em;
        padding: 0.3em 0.5em;
        border-radius: 5px;
        background: #eaf0f8;
    }

    #iaproc .iaproc-chk .ic { flex: none; width: 1.25em; height: 1.25em; color: #1b8048; stroke-width: 2; }

    #iaproc .iaproc-route {
        display: flex;
        flex-wrap: wrap;
        gap: 0.2em 0.5em;
        margin-top: auto;
        color: #34465f;
        font-weight: 600;
    }

    #iaproc .iaproc-route span { color: #b8372b; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.88em; }

    /* table d'atterrissage */
    #iaproc .iaproc-tabs--sys > span { flex: 1 1 0; padding: 0.25em 0.2em; }

    #iaproc .iaproc-tbl {
        display: flex;
        flex-direction: column;
        border: 1px solid #d3ddeb;
        border-radius: 6px;
        background: #fff;
        overflow: hidden;
    }

    #iaproc .iaproc-tr {
        display: grid;
        grid-template-columns: 1.2fr 0.9fr 1fr 1.25fr;
        gap: 0.4em;
        padding: 0.45em 0.6em;
        border-top: 1px solid #e3e9f2;
    }

    #iaproc .iaproc-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #iaproc .iaproc-tr--h { border-top: 0; background: #eef3fa; color: #5d6f8c; font-size: 0.9em; font-weight: 650; }
    #iaproc .iaproc-tr--new { background: #e7f7ee; font-weight: 650; box-shadow: inset 3px 0 0 #1b8048; }
    #iaproc .iaproc-tr em { font-style: normal; font-weight: 650; }
    #iaproc .iaproc-st-ok { color: #1b8048; }
    #iaproc .iaproc-st-wait { color: #a86b00; }
    #iaproc .iaproc-tr .iaproc-swap > * { justify-self: start; }

    #iaproc .iaproc-tblfoot {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.3em 0.8em;
        margin-top: auto;
        color: #1b8048;
        font-weight: 650;
    }

    /* ---------- Scenarios ---------- */
    #iaproc .iaproc-case-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    #iaproc .iaproc-case {
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-width: 0;
        padding: 18px;
        border: 1px solid var(--iaproc-line);
        border-top: 2px solid var(--iaproc-coral);
        border-radius: 10px;
        background: linear-gradient(170deg, rgba(10, 56, 104, 0.8), rgba(4, 34, 68, 0.88));
    }

    #iaproc .iaproc-case-k {
        color: #ffb3aa;
        font-family: var(--fx-mono);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    #iaproc .iaproc-case h3 {
        margin: 0;
        color: #fff;
        font-size: 1.05rem;
        line-height: 1.3;
    }

    #iaproc .iaproc-chain {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 0;
        margin: 0;
    }

    #iaproc .iaproc-chain span {
        padding: 2px 8px;
        border: 1px solid rgba(95, 200, 255, 0.3);
        border-radius: 999px;
        background: rgba(95, 200, 255, 0.08);
        color: #cfe3f7;
        font-size: 0.78rem;
        white-space: nowrap;
    }

    #iaproc .iaproc-chain span { position: relative; }

    #iaproc .iaproc-chain span + span::before {
        content: "→";
        position: absolute;
        left: -15px;
        top: 50%;
        margin-top: -0.62em;
        color: #5bcafc;
        font-size: 0.8rem;
        line-height: 1.2;
    }

    #iaproc .iaproc-chain span + span { margin-left: 16px; }

    #iaproc .iaproc-case-p {
        margin: 0;
        color: #9fb8d6;
        font-size: 0.86rem;
    }

    #iaproc .iaproc-case .ia-btn { align-self: flex-start; margin-top: auto; min-height: 42px; padding: 9px 18px; }

    /* ---------- Agents IA ---------- */
    #iaproc .iaproc-ai-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    #iaproc .iaproc-ai-card {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
        padding: 18px;
        border: 1px solid var(--iaproc-line);
        border-radius: 10px;
        background: linear-gradient(170deg, rgba(10, 56, 104, 0.75), rgba(4, 34, 68, 0.85));
    }

    #iaproc .iaproc-ai-n { color: #a48dff; font-family: var(--fx-mono); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; }
    #iaproc .iaproc-ai-card h3 { margin: 0; color: #fff; font-size: 1.04rem; }
    #iaproc .iaproc-ai-card p { margin: 0; color: var(--iaproc-ink-2); font-size: 0.9rem; line-height: 1.5; }

    #iaproc .iaproc-ai-card code {
        display: block;
        margin-top: auto;
        padding: 8px 10px;
        border: 1px solid rgba(164, 141, 255, 0.3);
        border-radius: 6px;
        background: rgba(1, 14, 32, 0.6);
        color: #cbbfff;
        font-family: var(--fx-mono);
        font-size: 0.74rem;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    /* ---------- Ou atterrit l'information ---------- */
    #iaproc .iaproc-table-wrap { padding: 6px 4px; }

    #iaproc .iaproc-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.92rem;
    }

    #iaproc .iaproc-table thead th {
        padding: 10px 14px;
        border-bottom: 1px solid rgba(70, 150, 255, 0.4);
        color: #8fb5dc;
        font-size: 0.74rem;
        font-weight: 650;
        letter-spacing: 0.08em;
        text-align: left;
        text-transform: uppercase;
    }

    #iaproc .iaproc-table tbody th,
    #iaproc .iaproc-table tbody td {
        padding: 13px 14px;
        border-bottom: 1px solid rgba(70, 150, 255, 0.14);
        color: #c4d6ea;
        text-align: left;
        vertical-align: middle;
    }

    #iaproc .iaproc-table tbody th { color: #fff; font-weight: 650; }
    #iaproc .iaproc-table tbody tr:last-child > * { border-bottom: 0; }

    #iaproc .iaproc-stat {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 650;
        white-space: nowrap;
    }

    #iaproc .iaproc-stat--ok { background: rgba(52, 199, 123, 0.16); color: #8ff0bb; }
    #iaproc .iaproc-stat--blue { background: rgba(95, 200, 255, 0.14); color: #9fdcff; }
    #iaproc .iaproc-stat--warn { background: rgba(242, 181, 68, 0.18); color: #f7cf7d; }

    /* ---------- Benefices ---------- */
    #iaproc .iaproc-ben-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #iaproc .iaproc-ben {
        min-width: 0;
        padding: 18px;
        border: 1px solid var(--iaproc-line-soft);
        border-radius: 10px;
        background: linear-gradient(170deg, rgba(10, 56, 104, 0.6), rgba(4, 34, 68, 0.75));
    }

    #iaproc .iaproc-ben-n { display: block; margin-bottom: 8px; color: var(--iaproc-coral); font-family: var(--fx-mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; }
    #iaproc .iaproc-ben h3 { margin: 0 0 6px; color: #fff; font-size: 1.02rem; line-height: 1.3; }
    #iaproc .iaproc-ben p { margin: 0; color: var(--iaproc-ink-2); font-size: 0.9rem; line-height: 1.5; }

    /* ---------- Responsive ---------- */
    @media (max-width: 639px) {
        #iaproc .iaproc-main-stage {
            --iaproc-gx: 40px;
            min-width: 1000px;
        }

        #iaproc .iaproc-main .iaproc-row { padding: 6px 7px; font-size: 0.8rem; }
        #iaproc .iaproc-main .iaproc-mv { font-size: 0.68rem; }
        #iaproc .iaproc-frame { padding: 12px; }

        /* parcours : 2 colonnes lisibles (JRose -> Secure-Exchanges -> client -> TIB Finance -> retour ->
           bouclier -> HDCE -> destinations en rangee) + bande ecran permanente (une fenetre a chaque etape) */
        #iaproc .iaproc-hero-stage {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: auto auto auto auto 244px;
            column-gap: 34px;
            row-gap: 26px;
        }

        #iaproc .iaproc-hp-jrose { grid-area: 1 / 1; }
        #iaproc .iaproc-hp-client { grid-area: 1 / 2; }
        #iaproc .iaproc-hp-se { grid-area: 2 / 1; }
        #iaproc .iaproc-hp-tib { grid-area: 2 / 2; }
        #iaproc .iaproc-hp-shield { grid-area: 3 / 1; }
        #iaproc .iaproc-hp-hdce { grid-area: 3 / 2; }
        #iaproc .iaproc-hp-dests {
            grid-area: 4 / 1 / 5 / 3;
            flex-direction: row;
            justify-content: space-between;
        }
        #iaproc .iaproc-hp-screen { display: block; grid-area: 5 / 1 / 6 / 3; }

        #iaproc .iaproc-hero-stage .iaproc-win { grid-area: 5 / 1 / 6 / 3; margin: 0; font-size: 0.72rem; }
        /* boite de reception : le message ancien est retire pour que « Payer maintenant » tienne dans l'ecran */
        #iaproc .iaproc-hv-inbox .iaproc-mrow--old { display: none; }

        #iaproc .iaproc-hn { width: 100%; padding: 7px 9px 8px; }
        #iaproc .iaproc-hero .fx-title { font-size: 0.8rem; }
        #iaproc .iaproc-hero .fx-sub { display: none; }
        #iaproc .iaproc-hero .fx-tag::before { display: none; }
        #iaproc .iaproc-tr { grid-template-columns: 1.15fr 1fr 1fr; }
        #iaproc .iaproc-tr > :nth-child(2) { display: none; }
        #iaproc .iaproc-tr--h { font-size: 1em; }
        #iaproc .iaproc-pill > span { padding: 1px 6px; font-size: 0.68rem; }
        #iaproc .iaproc-hp-hdce { padding: 8px 6px; }
        #iaproc .iaproc-hp-dests { width: 100%; gap: 6px; }
        #iaproc .iaproc-hd { flex: 1 1 auto; justify-content: center; padding: 6px 5px; font-size: 0.72rem; text-align: center; }
        #iaproc .iaproc-hd span { display: none; }
        #iaproc .iaproc-shield-ring { width: 38px; height: 38px; }
        #iaproc .iaproc-hp-shield { padding: 6px 6px 5px; }
        #iaproc .iaproc-shield-cap { font-size: 0.62rem; letter-spacing: 0.03em; }
    }

    @media (max-width: 420px) {
        #iaproc .iaproc-colnav button { min-width: 38px; padding: 6px; gap: 6px; font-size: 0.8rem; }

        #iaproc .iaproc-actions .ia-btn { width: 100%; }
    }

    @media (min-width: 640px) {
        #iaproc .iaproc-frame { padding: 18px; }
        #iaproc .iaproc-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        #iaproc .iaproc-ai-grid,
        #iaproc .iaproc-ben-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (min-width: 640px) and (max-width: 1099px) {
        #iaproc .iaproc-main-stage { min-width: 1060px; }
        #iaproc .iaproc-win { font-size: 0.68rem; }
        #iaproc .iaproc-tr { grid-template-columns: 1.15fr 1fr 1fr; }
        #iaproc .iaproc-tr > :nth-child(2) { display: none; }
    }

    @media (max-width: 819px) {
        /* table en cartes : aucune barre de defilement horizontale (roles ARIA explicites dans le HTML) */
        #iaproc .iaproc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
        #iaproc .iaproc-table,
        #iaproc .iaproc-table tbody,
        #iaproc .iaproc-table tr { display: block; }
        #iaproc .iaproc-table tr { padding: 10px 6px; border-bottom: 1px solid rgba(70, 150, 255, 0.18); }
        #iaproc .iaproc-table tbody tr:last-child { border-bottom: 0; }

        #iaproc .iaproc-table tbody th,
        #iaproc .iaproc-table tbody td {
            display: grid;
            grid-template-columns: 9.5em minmax(0, 1fr);
            gap: 10px;
            padding: 4px 6px;
            border: 0;
        }

        #iaproc .iaproc-table tbody th::before,
        #iaproc .iaproc-table tbody td::before {
            content: attr(data-label);
            color: #8fb5dc;
            font-size: 0.74rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        #iaproc .iaproc-table tbody td > .iaproc-stat { justify-self: start; }
    }

    @media (min-width: 900px) {
        #iaproc .iaproc-frame { padding: 22px; }
        #iaproc .iaproc-hero-stage { column-gap: 52px; }

        /* architecture : scenarios AU-DESSUS du schema, console dessous (schema + bande « Amelioration continue »
           tiennent dans l'ecran apres « Voir le workflow », des 1366 x 768) */
        #iaproc .iaproc-main { --fx-log-lines: 3; }
        #iaproc .iaproc-main > .fx-controls { order: -2; }
        #iaproc .iaproc-main > .fx-console { padding: 11px 14px; }
        #iaproc .iaproc-main .fx-con-text { min-height: 0; }
    }

    @media (min-width: 1100px) {
        #iaproc .iaproc-head {
            grid-template-columns: minmax(0, 1fr) 300px;
            column-gap: 48px;
        }

        #iaproc .iaproc-quote { align-self: start; margin-top: 52px; }
        #iaproc .iaproc-case-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        #iaproc .iaproc-ai-grid,
        #iaproc .iaproc-ben-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        #iaproc .iaproc-hero-stage { column-gap: 60px; }
        #iaproc .iaproc-win { font-size: 0.8rem; }

        /* pastilles de scenario a gauche, lecture a droite, sur la meme bande */
        #iaproc .iaproc-main .fx-controls {
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            column-gap: 18px;
        }

        #iaproc .iaproc-main .fx-bar { flex-wrap: nowrap; min-width: 320px; }
        #iaproc .iaproc-main .fx-tl { width: 360px; }
        #iaproc .iaproc-main .fx-steps { flex-basis: 70px; }
    }

    @media (min-width: 1440px) {
        #iaproc .iaproc-case-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }

    /* ---------- Animations des fenetres (etat final par defaut : lisible en mouvement reduit) ---------- */
    #iaproc .iaproc-live-pill i { animation: iaproc-pulse 1.8s ease-out infinite; }

    /* curseur : arrive, clique, disparait */
    #iaproc .fx-vig.is-on .iaproc-press > .iaproc-cur { animation: iaproc-cur 1.4s ease 0.4s both; }
    #iaproc .fx-vig.is-on .iaproc-press { animation: iaproc-press 0.28s ease 1.35s both; }

    /* 1. facture JRose */
    #iaproc .iaproc-hv-doc.is-on .iaproc-sw-a { animation: iaproc-until 1.55s steps(1) both; }
    #iaproc .iaproc-hv-doc.is-on .iaproc-sw-b { animation: iaproc-in 0.3s ease 1.55s both; }

    /* 2. courriel securise */
    #iaproc .iaproc-hv-mail.is-on .iaproc-press > .iaproc-cur { animation-delay: 0.8s; }
    #iaproc .iaproc-hv-mail.is-on .iaproc-press { animation-delay: 1.75s; }
    #iaproc .iaproc-hv-mail.is-on .iaproc-ok--late { animation: iaproc-in 0.35s ease 2s both; }

    /* 3. boite de reception : clic sur le message, apercu, « Payer maintenant » */
    #iaproc .iaproc-hv-inbox.is-on .iaproc-press > .iaproc-cur { animation: iaproc-cur 1.2s ease 0.2s both; }
    #iaproc .iaproc-hv-inbox.is-on .iaproc-press { animation: iaproc-press 0.28s ease 0.95s both; }
    #iaproc .iaproc-hv-inbox.is-on .iaproc-mrow--new i { animation: iaproc-out 0.2s ease 1s both; }
    #iaproc .iaproc-hv-inbox.is-on .iaproc-mopen { animation: iaproc-in 0.4s ease 1.1s both; }
    #iaproc .iaproc-hv-inbox.is-on .iaproc-press2 > .iaproc-cur { animation: iaproc-cur 1.1s ease 1.5s both; }
    #iaproc .iaproc-hv-inbox.is-on .iaproc-press2 { animation: iaproc-press 0.28s ease 2.2s both; }

    /* 4. passerelle TIB Finance : saisie, clic, traitement, autorisation */
    #iaproc .iaproc-hv-pay.is-on .iaproc-type--1 { animation: iaproc-type 0.6s steps(13) 0.3s both; }
    #iaproc .iaproc-hv-pay.is-on .iaproc-type--2 { animation: iaproc-type 0.5s steps(9) 0.95s both; }
    #iaproc .iaproc-hv-pay.is-on .iaproc-type--3 { animation: iaproc-type 0.3s steps(5) 1.7s both; }
    #iaproc .iaproc-hv-pay.is-on .iaproc-paybox .iaproc-wbtn { animation: iaproc-until 2.25s steps(1) both, iaproc-press 0.28s ease 2s; }
    #iaproc .iaproc-hv-pay.is-on .iaproc-paybox .iaproc-cur { animation: iaproc-cur 1.1s ease 1.15s both; }
    #iaproc .iaproc-hv-pay.is-on .iaproc-pending { animation: iaproc-in 0.2s ease 2.25s both, iaproc-out 0.15s ease 2.95s forwards; }
    #iaproc .iaproc-hv-pay.is-on .iaproc-pending i { animation: iaproc-spin 0.7s linear infinite; }
    #iaproc .iaproc-hv-pay.is-on .iaproc-paybox .iaproc-ok { animation: iaproc-in 0.35s ease 3s both; }

    /* 5. signature (le trace est anime par le moteur) */
    #iaproc .iaproc-hv-sign.is-on .iaproc-ok--sig { animation: iaproc-in 0.35s ease 1.75s both; }

    /* 6. bouclier TIB Finance */
    #iaproc .iaproc-hv-tibok.is-on .iaproc-tibok-mark { animation: iaproc-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) 0.15s both; }
    #iaproc .iaproc-hv-tibok.is-on .iaproc-tibok-txt > * { animation: iaproc-in 0.3s ease 0.55s both; }
    #iaproc .iaproc-shield-on [data-iaproc-ph="shield"] .iaproc-shield-ic { animation: iaproc-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }

    /* 7. controles HDCE */
    #iaproc .iaproc-hv-orch.is-on .iaproc-chk .ic { animation: iaproc-tick 0.3s ease both; }
    #iaproc .iaproc-hv-orch.is-on .iaproc-chk--1 .ic { animation-delay: 0.3s; }
    #iaproc .iaproc-hv-orch.is-on .iaproc-chk--2 .ic { animation-delay: 0.7s; }
    #iaproc .iaproc-hv-orch.is-on .iaproc-chk--3 .ic { animation-delay: 1.1s; }
    #iaproc .iaproc-hv-orch.is-on .iaproc-chk--4 .ic { animation-delay: 1.5s; }
    #iaproc .iaproc-hv-orch.is-on .iaproc-route { animation: iaproc-in 0.35s ease 1.9s both; }

    /* 8. la ligne arrive dans la bonne table, puis son statut passe a « Payee · conciliee » */
    #iaproc .iaproc-hv-table.is-on .iaproc-tr--new { animation: iaproc-rowin 0.5s ease 0.5s both; }
    #iaproc .iaproc-hv-table.is-on .iaproc-tr--new .iaproc-sw-a { animation: iaproc-until 1.7s steps(1) both; }
    #iaproc .iaproc-hv-table.is-on .iaproc-tr--new .iaproc-sw-b { animation: iaproc-in 0.3s ease 1.7s both; }
    #iaproc .iaproc-hv-table.is-on .iaproc-tblfoot { animation: iaproc-in 0.35s ease 2.1s both; }

    /* 9. architecture : la fenetre s'ouvre, agit, puis affiche son resultat */
    #iaproc .iaproc-mv.is-on .iaproc-mwin { animation: iaproc-in 0.35s ease 0.1s both; }
    #iaproc .fx-vig.is-on .iaproc-a1 { animation: iaproc-in 0.3s ease 0.45s both; }
    #iaproc .fx-vig.is-on .iaproc-a2 { animation: iaproc-in 0.3s ease 0.85s both; }
    #iaproc .fx-vig.is-on .iaproc-a3 { animation: iaproc-in 0.3s ease 1.25s both; }
    #iaproc .fx-vig.is-on .iaproc-a4 { animation: iaproc-in 0.35s ease 1.7s both; }
    #iaproc .iaproc-mv.is-on .iaproc-meter i { animation: iaproc-grow 1s ease 0.4s both; }
    #iaproc .iaproc-mv.is-on .iaproc-bars i { animation: iaproc-rise 0.7s ease 0.9s both; }
    #iaproc .iaproc-mv.is-on .iaproc-type { animation: iaproc-type 0.45s steps(9) 0.3s both; }
    #iaproc .iaproc-mv.is-on .iaproc-paybox .iaproc-wbtn { animation: iaproc-until 1.35s steps(1) both, iaproc-press 0.28s ease 1.1s; }
    #iaproc .iaproc-mv.is-on .iaproc-paybox .iaproc-cur { animation: iaproc-cur 1s ease 0.3s both; }
    #iaproc .iaproc-mv.is-on .iaproc-pending { animation: iaproc-in 0.2s ease 1.35s both, iaproc-out 0.15s ease 1.95s forwards; }
    #iaproc .iaproc-mv.is-on .iaproc-pending i { animation: iaproc-spin 0.7s linear infinite; }
    #iaproc .iaproc-mv.is-on .iaproc-paybox .iaproc-ok { animation: iaproc-in 0.35s ease 2s both; }

    @keyframes iaproc-in {
        from { opacity: 0; visibility: visible; transform: translateY(4px); }
        to { opacity: 1; visibility: visible; transform: none; }
    }

    @keyframes iaproc-out {
        to { opacity: 0; visibility: hidden; }
    }

    @keyframes iaproc-until {
        from { visibility: visible; }
        to { visibility: hidden; }
    }

    @keyframes iaproc-cur {
        0% { visibility: visible; opacity: 0; transform: translate(2.6em, 2em); }
        20% { opacity: 1; }
        62% { opacity: 1; transform: none; }
        70% { transform: scale(0.82); }
        78% { transform: none; }
        92% { opacity: 1; }
        100% { visibility: visible; opacity: 0; transform: none; }
    }

    @keyframes iaproc-press {
        0%, 100% { transform: none; filter: none; }
        50% { transform: scale(0.94); filter: brightness(1.18); }
    }

    @keyframes iaproc-type {
        from { clip-path: inset(0 100% 0 0); }
        to { clip-path: inset(0 0 0 0); }
    }

    @keyframes iaproc-spin {
        to { transform: rotate(360deg); }
    }

    @keyframes iaproc-pop {
        0% { opacity: 0; transform: scale(0.3); }
        70% { opacity: 1; transform: scale(1.15); }
        100% { opacity: 1; transform: none; }
    }

    @keyframes iaproc-tick {
        from { opacity: 0.2; transform: scale(0.5); color: #9aa8bd; }
        to { opacity: 1; transform: none; }
    }

    @keyframes iaproc-rowin {
        from { opacity: 0; transform: translateY(-8px); background: #fff3c4; }
        60% { opacity: 1; transform: none; background: #fff3c4; }
        to { opacity: 1; transform: none; }
    }

    @keyframes iaproc-open {
        from { opacity: 0; transform: translateY(10px) scale(0.96); }
        to { opacity: 1; transform: none; }
    }

    @keyframes iaproc-grow {
        from { width: 0; }
    }

    @keyframes iaproc-rise {
        from { height: 0; }
    }

    @keyframes iaproc-pulse {
        0% { box-shadow: 0 0 0 0 rgba(255, 111, 94, 0.6); }
        100% { box-shadow: 0 0 0 9px rgba(255, 111, 94, 0); }
    }

    /* 1100-1439 : libelles des rangees sur une ligne autant que possible (comme la maquette) */
    @media (min-width: 1100px) and (max-width: 1439px) {
        #iaproc .iaproc-main-stage { --iaproc-gx: 36px; }
        #iaproc .iaproc-col { padding: 0 7px 9px; }
        #iaproc .iaproc-colhead { margin: 0 -7px 4px; padding: 9px 9px; gap: 9px; font-size: 0.92rem; }
        #iaproc .iaproc-main .iaproc-row { gap: 8px; padding: 4px 8px; font-size: 0.78rem; }
        #iaproc .iaproc-note,
        #iaproc .iaproc-colnote { font-size: 0.78rem; }
    }
    /* @@IA:iaproc:css:end@@ */

    /* @@IA:iaplat:css:start@@ */
    /* ======================================================================
       Plateforme d'integration et produits connectes (iaplat)
       Theme de la maquette client : marine plus clair et plus bleu que le site,
       panneaux bleus a bordure vive, en-tetes numerotes, colonne « Resultats » corail.
       ====================================================================== */
    #iaplat {
        --ia-hero-cols: minmax(0, 0.76fr) minmax(0, 1.24fr);
        --ia-hero-gap: 40px;
        --iaplat-white: #f4f8fc;
        --iaplat-lead: #d3e2f2;
        --iaplat-body: #9cb8d6;
        --iaplat-muted: #7f9fc4;
        --iaplat-item: #a9bfd8;
        --iaplat-note: #5c9acb;
        --iaplat-stat: #8ad5f7;
        --iaplat-bright: #4aa8e8;
        --iaplat-cyan: #3fa9f5;
        --iaplat-coral: #fd6765;
        --iaplat-coral-rule: #ed7375;
        --iaplat-coral-text: #f1897e;
        --iaplat-border: rgba(70, 150, 255, 0.45);
        --iaplat-border-soft: rgba(70, 150, 255, 0.26);
        /* Fond de page tenu au marine clair du brief ; panneaux, colonnes et rangees nettement plus clairs
           (ecart de luminance ~1,6x comme la maquette : les panneaux se detachent du fond) */
        --iaplat-panel: linear-gradient(180deg, #08345f 0%, #062c54 100%);
        --iaplat-col: linear-gradient(180deg, #0a4378 0%, #073a6e 16%, #053262 100%);
        --iaplat-item-bg: linear-gradient(180deg, #08467f 0%, #063c6f 100%);
        --iaplat-item-border: rgba(45, 145, 235, 0.66);
        --iaplat-res-col: linear-gradient(180deg, #552a45 0%, #3e2542 28%, #352240 100%);
        --iaplat-res-item: linear-gradient(180deg, #52283f 0%, #452438 100%);
        --iaplat-tile: #083463;
        --fx-node-bg: var(--iaplat-item-bg);
        --ia-line: rgba(70, 150, 255, 0.22);
        /* Maquette : uniquement du bleu et du corail (liens, accents des noeuds et des fenetres) */
        --iaplat-acc: #4fa6ff;
        --fx-k-data: #4fa6ff;
        --fx-k-event: #74bbff;
        --fx-k-control: #5aa2e6;
        --fx-k-secure: #4fa6ff;
        --fx-k-ai: #74bbff;
        --fx-k-payment: #fb6866;
        --fx-k-feedback: #9ab8dc;
        position: relative;
        color: var(--iaplat-white);
        background:
            linear-gradient(180deg, transparent calc(100% - 60px), #050b18 100%),
            radial-gradient(ellipse 50% 520px at 82% 160px, rgba(22, 92, 170, 0.26), transparent 72%),
            radial-gradient(ellipse 42% 460px at 8% 420px, rgba(12, 54, 94, 0.4), transparent 74%),
            linear-gradient(180deg, #051f3b 0%, #052241 18%, #052240 50%, #04203d 82%, #041c38 100%);
    }

    /* Accents produits ramenes au bleu de la maquette ; la couleur du produit ne reste que sur la pastille */
    #iaplat .fx-prod--jrose,
    #iaplat .fx-prod--se,
    #iaplat .fx-prod--tib,
    #iaplat .fx-prod--ai,
    #iaplat .fx-prod--ext { --fx-accent: var(--iaplat-acc); }

    #iaplat .fx-node.fx-prod--jrose .fx-tag::before { background: var(--fx-p-jrose); }
    #iaplat .fx-node.fx-prod--se .fx-tag::before { background: var(--fx-p-se); }

    /* ----- Sous-navigation (coquille) : style maquette ----- */
    #iaplat .ia-subnav .back-link { color: #5d9bd0; }
    #iaplat .ia-subnav .back-link:hover { color: #fff; }

    #iaplat .ia-subnav-list {
        border-color: var(--iaplat-border);
        border-radius: 8px;
        background: rgba(3, 30, 58, 0.86);
    }

    #iaplat .ia-subnav-link { border-radius: 5px; color: #a8b8cf; }
    #iaplat .ia-subnav-link[aria-current="page"] {
        background: linear-gradient(160deg, rgba(253, 103, 101, 0.26), rgba(150, 50, 60, 0.14));
        box-shadow: inset 0 0 0 1px rgba(237, 115, 117, 0.7);
    }

    /* ----- Boutons : corail plein (encre foncee, comme la maquette), secondaire en contour ----- */
    #iaplat .ia-btn {
        gap: 10px;
        min-height: 46px;
        padding: 11px 20px;
        border-radius: 6px;
        font-weight: 650;
    }

    #iaplat .ia-btn .ic { width: 18px; height: 18px; stroke-width: 2; }

    #iaplat .iaplat-btn {
        border-color: transparent;
        background: var(--iaplat-coral);
        color: #160a1c;
        box-shadow: 0 8px 24px rgba(253, 103, 101, 0.26);
    }

    #iaplat .iaplat-btn:hover {
        background: #ff7a73;
        box-shadow: 0 0 0 1px rgba(255, 140, 130, 0.4), 0 10px 30px rgba(253, 103, 101, 0.36);
    }

    #iaplat .ia-btn--ghost {
        border: 1px solid #16a1d9;
        background: rgba(0, 17, 37, 0.25);
        color: #fff;
        box-shadow: none;
    }

    #iaplat .ia-btn--ghost:hover {
        border-color: #5fc8ff;
        background: rgba(22, 161, 217, 0.14);
        box-shadow: 0 0 22px rgba(22, 161, 217, 0.22);
    }

    #iaplat .ia-btn--ghost .ic { width: 14px; height: 14px; fill: currentColor; stroke: none; }

    /* ----- Elements communs ----- */
    .iaplat-panel {
        min-width: 0;
        padding: 14px;
        border: 1px solid var(--iaplat-border);
        border-radius: 8px;
        background: var(--iaplat-panel);
        box-shadow: 0 0 0 1px rgba(0, 11, 27, 0.45), 0 0 34px rgba(30, 120, 255, 0.12), inset 0 1px 0 rgba(140, 200, 255, 0.08);
    }

    .iaplat-quote {
        margin: 0;
        padding: 3px 0 3px 13px;
        border-left: 2px solid var(--iaplat-coral-rule);
        color: #7da0c6;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        line-height: 1.65;
        text-transform: uppercase;
    }

    .iaplat-quote--blue { border-left-color: #19bbf1; }

    /* Citations des en-tetes de section : taille proche du texte courant, comme la maquette */
    .iaplat-quote--lg {
        padding: 4px 0 4px 16px;
        color: #b8cde6;
        font-size: 0.8rem;
        letter-spacing: 0.12em;
        line-height: 1.7;
    }

    .iaplat-num {
        display: inline-grid;
        flex: none;
        place-items: center;
        min-width: 23px;
        height: 23px;
        padding: 0 5px;
        border: 1px solid #1a69a6;
        border-radius: 3px;
        background: linear-gradient(180deg, #0d5590, #0a4a80);
        color: #f0fbfc;
        font-size: 0.78rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }

    .iaplat-num--res {
        border-color: #8a333d;
        background: #5b2734;
        color: var(--iaplat-coral-text);
    }

    .iaplat-head {
        display: grid;
        gap: 16px;
        margin: 0 0 20px;
    }

    .iaplat-h2 {
        margin: 0 0 8px;
        color: #fff;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.16;
        letter-spacing: 0;
    }

    .iaplat-sub {
        max-width: 780px;
        margin: 0;
        color: var(--iaplat-body);
        font-size: clamp(0.96rem, 2vw, 1.06rem);
        line-height: 1.55;
    }

    .iaplat-ptitle {
        margin: 0;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 0;
    }

    .iaplat-psub {
        margin: 4px 0 0;
        color: var(--iaplat-muted);
        font-size: 0.9rem;
        line-height: 1.45;
    }

    /* ======================================================================
       Hero
       ====================================================================== */
    .iaplat-h1 {
        margin: 0 0 18px;
        color: #fff;
        font-size: clamp(2.15rem, 3.8vw, 3.45rem);
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -0.02em;
        text-shadow: none;
    }

    .iaplat-lead {
        max-width: 640px;
        margin: 0 0 14px;
        color: var(--iaplat-lead);
        font-size: clamp(1.06rem, 1.6vw, 1.2rem);
        line-height: 1.45;
    }

    .iaplat-body {
        max-width: 640px;
        margin: 0 0 26px;
        color: var(--iaplat-body);
        font-size: 0.98rem;
        line-height: 1.62;
    }

    .iaplat-sov {
        position: relative;
        max-width: 640px;
        min-height: 168px;
        margin-top: 34px;
    }

    .iaplat-sov .iaplat-quote {
        position: relative;
        z-index: 1;
        max-width: 56%;
        font-size: 0.66rem;
    }

    .iaplat-map {
        position: absolute;
        right: -6px;
        top: -34px;
        width: min(64%, 340px);
        height: auto;
        opacity: 0.96;
        mix-blend-mode: screen;
        pointer-events: none;
    }

    .iaplat-stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, auto));
        justify-content: start;
        max-width: 640px;
        margin: 10px 0 0;
        padding: 0;
        list-style: none;
    }

    .iaplat-stats li {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
        padding: 2px 16px;
        border-left: 1px solid rgba(110, 170, 255, 0.3);
    }

    .iaplat-stats li:first-child { padding-left: 0; border-left: 0; }

    .iaplat-stats strong {
        color: var(--iaplat-stat);
        font-size: 1.08rem;
        font-weight: 650;
        line-height: 1.2;
    }

    .iaplat-stats span {
        color: #8fadd0;
        font-size: 0.8rem;
        line-height: 1.3;
    }

    /* Colonne texte etroite (1280-1499px) : une rangee de 4, plus serree, comme la maquette */
    @media (min-width: 1280px) and (max-width: 1499px) {
        .iaplat-stats li { padding: 2px 11px; }
        .iaplat-stats strong { font-size: 0.98rem; }
        .iaplat-stats span { font-size: 0.74rem; }
    }

    /* 1100-1279px : 2 x 2 */
    @media (min-width: 1100px) and (max-width: 1279px) {
        .iaplat-stats {
            grid-template-columns: repeat(2, minmax(0, max-content));
            row-gap: 14px;
        }
        .iaplat-stats li:nth-child(3) { padding-left: 0; border-left: 0; }
    }

    /* ----- Panneau du hero (« Chaine de valeur » de la maquette) ----- */
    .iaplat-heropanel { padding: 16px; }

    .iaplat-phead {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px 24px;
        margin: 0 0 10px;
    }

    .iaplat-bquote {
        margin: 2px 0 0 auto;
        color: #8cc6ec;
        font-size: 0.92rem;
        font-weight: 500;
        line-height: 1.4;
        text-align: right;
    }

    /* ----- Scene du hero ----- */
    .iaplat-hero-stage {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
        grid-template-rows: auto auto minmax(var(--iaplat-dock-h, 164px), auto);
        column-gap: clamp(34px, 7%, 58px);
        row-gap: 16px;
        align-items: center;
    }

    .iaplat-hn--jrose { grid-area: 1 / 1; }
    .iaplat-hn--se { grid-area: 2 / 1; }
    .iaplat-hn--tib { grid-area: 3 / 1; }
    .iaplat-hn--ai { grid-area: 1 / 2; justify-self: center; width: 76%; }
    .iaplat-hn--hub { grid-area: 2 / 2; }
    .iaplat-hn--erp { grid-area: 1 / 3; }
    .iaplat-hn--crm { grid-area: 2 / 3; }
    .iaplat-hn--portal { grid-area: 3 / 3; }

    .iaplat-hero .fx-node,
    .iaplat-main .fx-node {
        border-color: var(--iaplat-item-border);
        border-radius: 5px;
        box-shadow: 0 0 0 1px rgba(0, 11, 27, 0.4), 0 6px 16px rgba(0, 8, 24, 0.35);
    }

    .iaplat-hero .fx-node { padding: 9px 11px 10px; }
    .iaplat-hero .fx-title { font-size: 0.84rem; }
    .iaplat-hero .fx-sub { font-size: 0.74rem; color: #8eaacb; }

    .iaplat-hero .fx-tag {
        color: color-mix(in srgb, var(--fx-accent) 62%, #c9d8ea);
        font-family: var(--font);
        font-size: 0.7rem;
        letter-spacing: 0.02em;
        text-transform: none;
    }

    .iaplat-hero .iaplat-hn--hub {
        padding: 14px 12px;
        border-color: rgba(253, 103, 101, 0.62);
        background: linear-gradient(180deg, #0c4a85 0%, #073e72 100%);
        box-shadow: 0 0 0 4px rgba(253, 103, 101, 0.08), 0 0 30px rgba(253, 103, 101, 0.16), 0 8px 20px rgba(0, 8, 24, 0.4);
    }

    .iaplat-hero .iaplat-hn--hub .fx-title { font-size: 1rem; }
    .iaplat-hero .iaplat-hn--hub .fx-sub { color: #a9c4e4; }

    .iaplat-hero .fx-node.is-lit,
    .iaplat-main .fx-node.is-lit {
        border-color: var(--fx-accent);
        background: linear-gradient(170deg, color-mix(in srgb, var(--fx-accent) 24%, #08467f) 0%, #063c6f 100%);
    }

    .iaplat-tibmark {
        display: inline-block;
        width: 13px;
        height: 13px;
        margin: -2px 5px 0 0;
        vertical-align: middle;
        color: var(--fx-p-tib);
        stroke-width: 2;
    }

    .iaplat-hero .fx-node[data-fx-node="tib"] .fx-tag::before,
    .iaplat-main .fx-node[data-fx-node="tib"] .fx-tag::before { display: none; }
    .iaplat-hero .fx-node[data-fx-node="tib"].is-lit .iaplat-tibmark,
    .iaplat-main .fx-node[data-fx-node="tib"].is-lit .iaplat-tibmark { filter: drop-shadow(0 0 5px var(--fx-p-tib)); }

    /* Cellule « Activite » : les fenetres s'ouvrent exactement dessus (jamais sur un noeud) */
    .iaplat-dock {
        grid-area: 3 / 2;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1px dashed rgba(110, 170, 255, 0.3);
        border-radius: 8px;
        background: rgba(2, 24, 48, 0.5);
    }

    .iaplat-dock-l {
        color: rgba(169, 196, 228, 0.7);
        font-family: var(--fx-mono);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .iaplat-dock-w { color: rgba(154, 180, 210, 0.55); font-size: 0.72rem; }

    /* La legende de la cellule ne transparait jamais sous une fenetre (ni pendant un fondu) */
    .iaplat-dock > * { transition: opacity 0.25s ease 0.6s; }
    .iaplat-hero-stage:has(.iaplat-win.is-on) .iaplat-dock > * { opacity: 0; transition-delay: 0s; }

    /* Fondu enchaine des fenetres : la sortante disparait vite, l'entrante attend qu'elle soit partie */
    #iaplat .iaplat-win {
        transition: opacity 0.18s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }

    #iaplat .iaplat-win.is-on {
        transition: opacity 0.3s ease 0.2s, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s, visibility 0s linear 0s;
    }

    /* ----- Fenetres (vignettes en coin, data-fx-place="css") ----- */
    .iaplat-hero-stage .iaplat-win {
        grid-area: 3 / 2 / 4 / 3;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        width: auto;
        max-width: none;
        padding: 0;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--fx-accent) 58%, rgba(110, 170, 255, 0.3));
        border-radius: 8px;
        background: #06223f;
        box-shadow: 0 14px 34px rgba(0, 6, 18, 0.55), 0 0 24px color-mix(in srgb, var(--fx-accent) 18%, transparent);
        font-size: 0.72rem;
        transform-origin: 50% 50%;
    }

    .iaplat-win-bar {
        display: flex;
        flex: none;
        align-items: center;
        gap: 5px;
        min-width: 0;
        padding: 6px 9px;
        border-bottom: 1px solid rgba(110, 170, 255, 0.18);
        background: rgba(255, 255, 255, 0.035);
        color: #b3cbe6;
        font-family: var(--fx-mono);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .iaplat-win-bar > i {
        flex: none;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 111, 94, 0.75);
    }

    .iaplat-win-bar > i:nth-child(2) { background: rgba(242, 181, 68, 0.75); }
    .iaplat-win-bar > i:nth-child(3) { margin-right: 4px; background: rgba(61, 219, 193, 0.75); }

    /* titre de fenetre : passe a la ligne dans une cellule etroite, jamais de points de suspension */
    .iaplat-win-bar > span {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.35;
    }

    .iaplat-win-mark {
        flex: none;
        width: 14px;
        height: 14px;
        margin-left: auto;
        color: var(--fx-p-tib);
        stroke-width: 2;
    }

    .iaplat-win-body {
        display: grid;
        flex: 1 1 auto;
        align-content: start;
        gap: 5px;
        min-height: 0;
        padding: 8px 10px 9px;
    }

    .iaplat-kv {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        min-width: 0;
        padding-bottom: 3px;
        border-bottom: 1px dashed rgba(110, 170, 255, 0.16);
    }

    .iaplat-kv > b {
        min-width: 0;
        color: #8fb3d9;
        font-weight: 500;
    }

    .iaplat-kv > span {
        flex: none;
        color: #fff;
        font-weight: 600;
    }

    /* Statut : etat en attente, puis etat final (etat final par defaut : mouvement reduit et apercu) */
    .iaplat-st {
        display: inline-grid;
        justify-self: start;
        align-items: center;
    }

    .iaplat-st > span {
        grid-area: 1 / 1;
        justify-self: start;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 0.66rem;
        font-weight: 650;
        line-height: 1.45;
        white-space: nowrap;
    }

    .iaplat-st-p {
        visibility: hidden;
        background: rgba(242, 181, 68, 0.14);
        color: #f6c86f;
    }

    .iaplat-st-p::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-right: 6px;
        border-radius: 50%;
        background: currentColor;
        vertical-align: 1px;
    }

    .iaplat-st-d {
        background: rgba(61, 219, 193, 0.14);
        color: #86f0dd;
    }

    .iaplat-kv .iaplat-st > span { padding: 1px 7px; font-size: 0.62rem; }

    /* Fenetre de routage */
    .iaplat-rt {
        display: grid;
        gap: 2px;
    }

    .iaplat-rt-io {
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        column-gap: 6px;
        align-items: baseline;
        min-width: 0;
    }

    .iaplat-rt-io small {
        grid-row: 1 / span 2;
        color: rgba(154, 180, 210, 0.7);
        font-family: var(--fx-mono);
        font-size: 0.6rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    /* noms d'evenements jamais tronques : retour a la ligne au besoin */
    .iaplat-rt-io b {
        min-width: 0;
        color: #fff;
        font-family: var(--fx-mono);
        font-size: 0.68rem;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .iaplat-rt-io em {
        min-width: 0;
        color: #ff9d8f;
        font-size: 0.66rem;
        font-style: normal;
        overflow-wrap: anywhere;
    }

    .iaplat-rt-arrow {
        position: relative;
        width: 2px;
        height: 9px;
        margin: 1px 0 1px 24px;
        background: linear-gradient(180deg, rgba(253, 103, 101, 0.2), #fd6765);
    }

    .iaplat-rt-arrow::after {
        content: "";
        position: absolute;
        left: -3px;
        bottom: -3px;
        border: 4px solid transparent;
        border-top: 5px solid #fd6765;
        border-bottom: 0;
    }

    .iaplat-rt-rule {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        margin-top: 2px;
        padding-top: 4px;
        line-height: 1.3;
        border-top: 1px dashed rgba(110, 170, 255, 0.2);
        color: #a9c4e4;
        font-size: 0.66rem;
    }

    .iaplat-rt-ms {
        flex: none;
        color: #86f0dd;
        font-family: var(--fx-mono);
        font-size: 0.62rem;
    }

    /* Signature */
    .iaplat-file {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #fff;
        font-family: var(--fx-mono);
        font-size: 0.66rem;
    }

    .iaplat-file .ic { width: 14px; height: 14px; color: var(--fx-accent); }
    .iaplat-sig { max-height: 28px; }
    .iaplat-w-sign .iaplat-win-body { gap: 4px; }

    /* Paiement : montant qui defile jusqu'au total */
    .iaplat-amt {
        display: block;
        height: 1.3em;
        overflow: hidden;
        color: #fff;
        font-size: 1.12rem;
        font-weight: 700;
        line-height: 1.3;
        font-variant-numeric: tabular-nums;
    }

    .iaplat-amt-roll {
        display: flex;
        flex-direction: column;
        transform: translateY(-5.2em);
    }

    .iaplat-amt-roll > span { display: block; height: 1.3em; }

    .iaplat-w-pay .fx-vig-progress { margin-top: 2px; }

    /* Portail : statut, indicateur et barres */
    .iaplat-portal {
        grid-template-columns: minmax(0, 1fr) 64px;
        column-gap: 10px;
        align-items: end;
    }

    .iaplat-portal-l {
        display: grid;
        gap: 8px;
        min-width: 0;
    }

    .iaplat-kpi {
        color: #8ad5f7;
        font-size: 0.68rem;
        font-weight: 600;
        line-height: 1.35;
    }

    .iaplat-bars {
        display: flex;
        align-items: flex-end;
        gap: 4px;
        height: 54px;
        padding-bottom: 2px;
        border-bottom: 1px solid rgba(110, 170, 255, 0.3);
    }

    .iaplat-bars i {
        flex: 1;
        height: 40%;
        border-radius: 2px 2px 0 0;
        background: linear-gradient(180deg, #4aa8e8, #1c5f9a);
        transform-origin: 50% 100%;
    }

    .iaplat-bars i:nth-child(2) { height: 55%; }
    .iaplat-bars i:nth-child(3) { height: 48%; }
    .iaplat-bars i:nth-child(4) { height: 72%; }
    .iaplat-bars i:nth-child(5) { height: 100%; background: linear-gradient(180deg, #ff8a80, #c94b4a); }

    /* Depot de pieces */
    .iaplat-files { gap: 4px; }

    .iaplat-fl {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 42px;
        align-items: center;
        gap: 8px;
        color: #cfe0f2;
        font-family: var(--fx-mono);
        font-size: 0.62rem;
    }

    .iaplat-fl > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .iaplat-hero-stage .iaplat-fl { grid-template-columns: minmax(0, 1fr) 28px; gap: 6px; }

    .iaplat-fl > i {
        position: relative;
        height: 4px;
        overflow: hidden;
        border-radius: 3px;
        background: rgba(120, 160, 220, 0.2);
    }

    .iaplat-fl > i::after,
    .iaplat-conf > i::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, var(--fx-accent), #dff9ff);
        transform-origin: 0 50%;
    }

    /* IA : champs et indices de confiance */
    .iaplat-conf {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 38px auto;
        align-items: center;
        gap: 7px;
        font-size: 0.66rem;
    }

    .iaplat-conf > b {
        min-width: 0;
        overflow: hidden;
        color: #cfe0f2;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .iaplat-conf > i {
        position: relative;
        height: 4px;
        overflow: hidden;
        border-radius: 3px;
        background: rgba(120, 160, 220, 0.2);
    }

    .iaplat-conf > i::after { right: calc((1 - var(--c, 1)) * 100%); }

    .iaplat-conf > em {
        color: #9fd0ff;
        font-family: var(--fx-mono);
        font-size: 0.6rem;
        font-style: normal;
    }

    /* Variantes de contenu selon le scenario courant du hero (data-fx-current pose par le moteur) */
    .iaplat-hero:not([data-fx-current="docia"]):not([data-fx-current="commande"]) .iaplat-v:not(.iaplat-v--a),
    .iaplat-hero[data-fx-current="docia"] .iaplat-v:not(.iaplat-v--b),
    .iaplat-hero[data-fx-current="commande"] .iaplat-v:not(.iaplat-v--c) { display: none; }

    /* Animations des fenetres : l'etat final est l'etat par defaut ; elles jouent toujours (prefers-reduced-motion ignore) */
    .iaplat-win { --iaplat-t: 1.6s; }
    .iaplat-w-jrose { --iaplat-t: 1.9s; }
    .iaplat-w-erp { --iaplat-t: 1.5s; }
    .iaplat-w-portal { --iaplat-t: 0.7s; }
    .iaplat-w-sign { --iaplat-t: 1.3s; }
    .iaplat-w-order { --iaplat-t: 1.7s; }

    .iaplat-win.is-on .iaplat-type {
        animation: iaplat-type 0.5s steps(16, end) both;
    }

    .iaplat-win.is-on .iaplat-type:nth-child(2) { animation-delay: 0.5s; }
    .iaplat-win.is-on .iaplat-type:nth-child(3) { animation-delay: 1s; }

    .iaplat-win.is-on .iaplat-st-p { animation: iaplat-show-until var(--iaplat-t) step-end both, iaplat-blink 0.8s ease-in-out infinite; }
    .iaplat-win.is-on .iaplat-st-d { animation: iaplat-show-from var(--iaplat-t) step-end both, iaplat-pop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1.4) var(--iaplat-t) both; }
    .iaplat-win.is-on .iaplat-signer--2 .iaplat-st-p { animation-duration: 2.1s, 0.8s; }
    .iaplat-win.is-on .iaplat-signer--2 .iaplat-st-d { animation-duration: 2.1s, 0.35s; animation-delay: 0s, 2.1s; }

    .iaplat-win.is-on .iaplat-amt-roll { animation: iaplat-roll 1.4s steps(4, end) 0.15s both; }
    .iaplat-win.is-on .iaplat-bars i { animation: iaplat-grow 0.5s ease both; }
    .iaplat-win.is-on .iaplat-bars i:nth-child(2) { animation-delay: 0.08s; }
    .iaplat-win.is-on .iaplat-bars i:nth-child(3) { animation-delay: 0.16s; }
    .iaplat-win.is-on .iaplat-bars i:nth-child(4) { animation-delay: 0.24s; }
    .iaplat-win.is-on .iaplat-bars i:nth-child(5) { animation-delay: 0.7s; }

    .iaplat-win.is-on .iaplat-fl > i::after { animation: iaplat-fill 0.7s ease both; }
    .iaplat-win.is-on .iaplat-fl:nth-child(2) > i::after { animation-delay: 0.3s; }
    .iaplat-win.is-on .iaplat-fl:nth-child(3) > i::after { animation-delay: 0.6s; }
    .iaplat-win.is-on .iaplat-fl:nth-child(4) > i::after { animation-delay: 0.9s; }

    .iaplat-win.is-on .iaplat-conf > i::after { animation: iaplat-fill 0.6s ease both; }
    .iaplat-win.is-on .iaplat-conf:nth-child(2) > i::after { animation-delay: 0.35s; }
    .iaplat-win.is-on .iaplat-conf:nth-child(3) > i::after { animation-delay: 0.7s; }

    .iaplat-win.is-on .iaplat-rt-arrow { animation: iaplat-drop 0.5s ease 0.15s both; }
    .iaplat-win.is-on .iaplat-rt-io + .iaplat-rt-arrow + .iaplat-rt-io { animation: iaplat-in 0.35s ease 0.55s both; }

    @keyframes iaplat-type {
        from { clip-path: inset(0 100% 0 0); }
        to { clip-path: inset(0 0 0 0); }
    }

    @keyframes iaplat-show-until {
        0% { visibility: visible; }
        100% { visibility: hidden; }
    }

    @keyframes iaplat-show-from {
        0% { visibility: hidden; }
        100% { visibility: visible; }
    }

    @keyframes iaplat-blink {
        50% { opacity: 0.55; }
    }

    @keyframes iaplat-pop {
        from { transform: scale(0.7); }
        to { transform: none; }
    }

    @keyframes iaplat-roll {
        from { transform: translateY(0); }
        to { transform: translateY(-5.2em); }
    }

    @keyframes iaplat-grow {
        from { transform: scaleY(0); }
        to { transform: none; }
    }

    @keyframes iaplat-fill {
        from { transform: scaleX(0); }
        to { transform: none; }
    }

    @keyframes iaplat-drop {
        from { clip-path: inset(0 0 100% 0); }
        to { clip-path: inset(0 0 -6px 0); }
    }

    @keyframes iaplat-in {
        from { opacity: 0; transform: translateY(-4px); }
        to { opacity: 1; transform: none; }
    }

    /* Console et controles : style maquette */
    /* Console et journal : tons de panneau marine de la maquette (jamais de bloc noir) */
    #iaplat .fx-console {
        border-color: var(--iaplat-border-soft);
        border-radius: 6px;
        background: linear-gradient(180deg, rgba(6, 46, 88, 0.62) 0%, rgba(4, 36, 70, 0.7) 100%);
    }

    #iaplat .fx-log {
        border-color: rgba(70, 150, 255, 0.34);
        border-radius: 4px;
        background: rgba(4, 40, 76, 0.55);
    }

    #iaplat .fx-log:empty::before { color: rgba(169, 196, 228, 0.6); }

    /* Diagramme hors ecran (is-idle) : l'entree d'arrivee du journal reste lisible au lieu d'etre gelee
       sur la premiere image de son fondu (cadre de journal vide) */
    #iaplat .fx.is-idle .fx-log li { animation: none; }
    #iaplat .fx-log-t { color: rgba(169, 196, 228, 0.7); }
    #iaplat .fx-log-s { color: #74bbff; }

    /* nom du scenario : retour a la ligne plutot que des points de suspension */
    #iaplat .fx-con-scn {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    #iaplat .fx-chip {
        border-color: var(--iaplat-border-soft);
        border-radius: 6px;
        background: rgba(3, 32, 62, 0.85);
    }

    #iaplat .fx-chip:hover { border-color: rgba(95, 200, 255, 0.6); }

    #iaplat .fx-chip[aria-pressed="true"] {
        border-color: rgba(237, 115, 117, 0.8);
        background: linear-gradient(160deg, rgba(253, 103, 101, 0.22), rgba(120, 40, 60, 0.18));
    }

    #iaplat .fx-btn {
        border-color: var(--iaplat-border-soft);
        border-radius: 6px;
        background: rgba(3, 32, 62, 0.85);
    }

    #iaplat .fx-steps .is-cur { background: var(--iaplat-coral); }

    /* ======================================================================
       Architecture principale
       ====================================================================== */
    .iaplat-board { padding: 16px; }

    .iaplat-board-head {
        display: grid;
        gap: 10px 24px;
        margin: 0 0 14px;
    }

    .iaplat-board-head .iaplat-psub { max-width: 760px; }

    .iaplat-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 18px;
        margin: 0;
        padding: 0;
        list-style: none;
        color: #a9c4e4;
        font-size: 0.76rem;
    }

    .iaplat-legend li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .iaplat-legend li::before {
        content: "";
        width: 20px;
        height: 0;
        border-top: 2px solid var(--iaplat-lg, var(--fx-k-data));
    }

    .iaplat-lg--payment { --iaplat-lg: var(--fx-k-payment); }
    .iaplat-legend .iaplat-lg--feedback::before { border-top: 3px solid var(--iaplat-cyan); }

    /* Console au-dessus de la scene : etape et journal restent visibles avec les fenetres apres « Voir le workflow » */
    #iaplat .iaplat-main { --fx-log-lines: 3; }
    .iaplat-main > .fx-console { order: -1; }

    /* Les cartes « Workflows types » pilotent deja les scenarios : puces seulement sur tablette et telephone */
    @media (min-width: 1100px) {
        .iaplat-main .fx-scn { display: none; }
    }

    /* Grille : colonnes 1, 4, 5 sur deux rangees ; colonnes 2-3 (hub) sur la premiere, leurs fonctions dessous
       (zone des fenetres d'activite) ; puis la bande d'exploitation et le socle */
    .iaplat-main-stage {
        --iaplat-gx: 46px;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        grid-template-rows: auto auto auto auto;
        column-gap: var(--iaplat-gx);
        row-gap: 12px;
        min-width: 960px;
        padding: 18px 0 2px;
    }

    /* Hub HDCE : cadre autour des colonnes 2 et 3 (decor, sous tout le reste de la scene) */
    .iaplat-hubframe {
        position: relative;
        z-index: -1;
        grid-area: 1 / 2 / 3 / 4;
        margin: -10px -15px -9px;
        border: 1px dashed rgba(253, 103, 101, 0.6);
        border-radius: 10px;
        background:
            radial-gradient(ellipse 60% 46% at 50% 40%, rgba(253, 103, 101, 0.1), transparent 72%),
            radial-gradient(ellipse 90% 70% at 50% 50%, rgba(60, 150, 255, 0.08), transparent 80%);
        box-shadow: 0 0 40px rgba(253, 103, 101, 0.08);
        pointer-events: none;
    }

    .iaplat-hubframe-tag {
        position: absolute;
        left: 50%;
        top: 0;
        padding: 2px 12px;
        border: 1px solid rgba(253, 103, 101, 0.7);
        border-radius: 999px;
        background: #3a1f33;
        color: #ffc2b9;
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        white-space: nowrap;
        transform: translate(-50%, -50%);
    }

    /* Fleches bleues de la maquette, une par goulotte, a mi-hauteur des colonnes */
    .iaplat-chevs {
        position: relative;
        z-index: 3;
        grid-area: 1 / 1 / 3 / -1;
        pointer-events: none;
    }

    .iaplat-chevs i {
        --iaplat-k: 1;
        position: absolute;
        top: 50%;
        left: calc(var(--iaplat-k) * (100% - 4 * var(--iaplat-gx)) / 5 + (var(--iaplat-k) - 1) * var(--iaplat-gx) + var(--iaplat-gx) / 2);
        width: 22px;
        height: 20px;
        margin: -10px 0 0 -11px;
        background: linear-gradient(90deg, #2f97e6, #5cc0ff);
        clip-path: polygon(0 32%, 50% 32%, 50% 0, 100% 50%, 50% 100%, 50% 68%, 0 68%);
        filter: drop-shadow(0 0 6px rgba(63, 169, 245, 0.7));
    }

    .iaplat-chevs i:nth-child(2) { --iaplat-k: 2; }
    .iaplat-chevs i:nth-child(3) { --iaplat-k: 3; }
    .iaplat-chevs i:nth-child(4) { --iaplat-k: 4; }

    .iaplat-col,
    .iaplat-fn {
        border: 1px solid #0d6aa8;
        border-top-color: #1a7cbe;
        border-radius: 4px;
        background: var(--iaplat-col);
        box-shadow: 0 0 0 1px rgba(0, 11, 27, 0.55), 0 0 22px rgba(40, 140, 255, 0.14), inset 0 1px 0 rgba(140, 200, 255, 0.12);
    }

    .iaplat-col {
        --fx-gap-y: 8px;
        justify-content: flex-start;
        padding: 0 9px 10px;
    }

    .iaplat-col--1 { grid-area: 1 / 1 / 3 / 2; }
    .iaplat-col--2 { grid-area: 1 / 2 / 2 / 3; }
    .iaplat-col--3 { grid-area: 1 / 3 / 2 / 4; }
    .iaplat-col--4 { grid-area: 1 / 4 / 3 / 5; }
    .iaplat-col--5 { grid-area: 1 / 5 / 3 / 6; }

    .iaplat-main .iaplat-colhead {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 4px;
        padding: 10px 1px 9px;
        border-bottom: 1px solid rgba(70, 150, 255, 0.24);
        color: #fff;
        font-family: var(--font);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.2;
        text-align: left;
        text-transform: none;
    }

    .iaplat-main .iaplat-colnote {
        margin: auto 0 0;
        padding: 8px 2px 0;
        color: var(--iaplat-note);
        font-size: 0.72rem;
        line-height: 1.35;
    }

    /* Fonctions de la couche HDCE (colonnes 2 et 3, rangee 2) : les fenetres d'activite s'ouvrent ici */
    .iaplat-fn {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-height: 156px;
        padding: 9px 9px 10px;
    }

    .iaplat-fn--2 { grid-area: 2 / 2; }
    .iaplat-fn--3 { grid-area: 2 / 3; }

    .iaplat-fn > * { transition: opacity 0.25s ease 0.5s; }
    .iaplat-main-stage:has(.iaplat-mwin.is-on) .iaplat-fn > * { opacity: 0; transition-delay: 0s; }

    .iaplat-main .iaplat-prow {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 30px;
        padding: 5px 9px;
        border: 1px solid rgba(40, 140, 225, 0.45);
        border-radius: 4px;
        background: rgba(6, 60, 112, 0.6);
        color: #c3d6ec;
        font-size: 0.76rem;
        line-height: 1.25;
    }

    .iaplat-main .iaplat-prow::before {
        content: "";
        flex: none;
        width: 5px;
        height: 5px;
        border: 1px solid #4fa6ff;
        border-radius: 1px;
    }

    /* Rangees de la maquette : titre + precision, meme gabarit dans toutes les colonnes */
    .iaplat-main .fx-node {
        gap: 2px;
        min-height: 46px;
        justify-content: center;
        padding: 6px 10px 7px;
    }

    .iaplat-main .fx-title { color: #eef4fc; font-size: 0.82rem; font-weight: 600; }
    .iaplat-main .fx-sub { color: #9ab8d8; font-size: 0.72rem; }

    .iaplat-main .iaplat-mn--dot .fx-title::before {
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        margin: 0 7px 1px 0;
        border-radius: 50%;
        background: var(--iaplat-dot, var(--fx-p-jrose));
        vertical-align: middle;
    }

    .iaplat-main .fx-prod--se { --iaplat-dot: var(--fx-p-se); }

    /* Hors scenario : les blocs restent nets (la maquette ne grise rien), seul l'eclat baisse */
    #iaplat .iaplat-main .fx-node.is-dim { border-color: var(--iaplat-item-border); }

    #iaplat .iaplat-main .fx-node.is-dim > * {
        opacity: 0.86;
        filter: none;
    }

    #iaplat .iaplat-main .fx-node.is-dim .fx-title { color: #cfdced; }

    /* Liens : discrets au repos (la chaine se lit par les fleches bleues), vifs quand un paquet passe */
    #iaplat .iaplat-main .fx-edge .fx-wire { stroke-opacity: 0.13; }
    #iaplat .iaplat-main .fx-edge .fx-arrow { fill-opacity: 0.2; }
    #iaplat .iaplat-main .fx-edge.is-dim .fx-wire { stroke-opacity: 0.07; }
    #iaplat .iaplat-main .fx-edge.is-dim .fx-arrow { fill-opacity: 0.1; }
    #iaplat .iaplat-main .fx-edge.is-done .fx-wire { stroke-opacity: 0.5; stroke-width: 1.5; }
    #iaplat .iaplat-main .fx-edge.is-done .fx-arrow { fill-opacity: 0.7; }
    #iaplat .iaplat-main .fx-edge.is-active .fx-wire { stroke-opacity: 0.95; stroke-width: 1.9; }
    #iaplat .iaplat-main .fx-edge.is-active .fx-arrow { fill-opacity: 1; }

    /* Boucle d'amelioration : les deux fleches bleues pleines de la maquette, toujours visibles */
    #iaplat .iaplat-main .fx-k-feedback { --fx-c: var(--iaplat-cyan); }
    #iaplat .iaplat-main .fx-edge.fx-k-feedback .fx-wire {
        stroke-dasharray: none;
        stroke-opacity: 0.9;
        stroke-width: 3;
        filter: drop-shadow(0 0 4px rgba(63, 169, 245, 0.55));
    }
    #iaplat .iaplat-main .fx-edge.fx-k-feedback .fx-arrow { fill-opacity: 1; }
    #iaplat .iaplat-main .fx-edge.fx-k-feedback.is-active .fx-wire { stroke: #9adcff; }

    /* Ports de la boucle : la note de bas de colonne 1 et 5 (la fleche part du bord bas de la colonne) */
    #iaplat .iaplat-main .iaplat-port {
        min-height: 0;
        width: 68%;
        margin-top: auto;
        padding: 6px 2px 2px;
        border: 0;
        border-radius: 3px;
        background: none;
        box-shadow: none;
    }

    #iaplat .iaplat-main .iaplat-port .fx-sub { color: var(--iaplat-note); font-size: 0.72rem; line-height: 1.35; -webkit-hyphens: none; hyphens: none; }
    #iaplat .iaplat-main .iaplat-port--l { align-self: flex-start; }
    #iaplat .iaplat-main .iaplat-port--r { align-self: flex-end; }
    #iaplat .iaplat-main .iaplat-port--r .fx-sub { color: #f08a86; }
    #iaplat .iaplat-main .iaplat-port.is-dim > * { opacity: 1; }
    #iaplat .iaplat-main .iaplat-port.is-lit { box-shadow: 0 0 0 1px var(--iaplat-cyan), 0 0 16px rgba(63, 169, 245, 0.45); }
    #iaplat .iaplat-main .iaplat-port.is-lit .fx-sub { color: #e6f4ff; }

    /* Colonne « Resultats » : corail */
    .iaplat-col--res {
        border-color: #9a3a45;
        border-top-color: #b14d57;
        background: var(--iaplat-res-col);
        box-shadow: 0 0 0 1px rgba(20, 4, 14, 0.55), 0 0 24px rgba(240, 90, 90, 0.18), inset 0 1px 0 rgba(255, 170, 160, 0.1);
    }

    .iaplat-main .iaplat-col--res .iaplat-colhead {
        border-bottom-color: rgba(237, 115, 117, 0.3);
        color: #fae6e1;
    }

    .iaplat-col--res .iaplat-num {
        border-color: #8a333d;
        background: #5b2734;
        color: var(--iaplat-coral-text);
    }

    .iaplat-main .iaplat-rn {
        --fx-accent: #f1897e;
        border-color: #8a3540;
        background: var(--iaplat-res-item);
    }

    .iaplat-main .iaplat-rn .fx-sub,
    #iaplat .iaplat-main .iaplat-rn.is-dim .fx-sub { color: #c4b3c2; }
    #iaplat .iaplat-main .iaplat-rn.is-dim { border-color: #7a3540; }
    #iaplat .iaplat-main .iaplat-rn.is-dim .fx-title { color: #f0e0e3; }

    .iaplat-main .iaplat-rn.is-lit {
        border-color: #f1897e;
        background: linear-gradient(170deg, #6a2e40 0%, #48243a 100%);
    }

    /* Bande d'exploitation : tuiles compactes, entre la colonne 1 et la colonne 5 (place des fleches de boucle) */
    #iaplat .iaplat-main .iaplat-loop {
        grid-area: 3 / 1 / 4 / -1;
        gap: 8px;
        margin: 26px calc((100% - 4 * var(--iaplat-gx)) / 5 * 0.56) 0;
        padding: 8px 12px 10px;
        border: 1px solid rgba(70, 150, 255, 0.55);
        border-radius: 6px;
        background: linear-gradient(180deg, #063766 0%, #052e58 100%);
        box-shadow: 0 0 22px rgba(40, 140, 255, 0.14), inset 0 1px 0 rgba(140, 200, 255, 0.12);
    }

    #iaplat .iaplat-main .iaplat-loop > .fx-title {
        color: #fff;
        font-size: 0.86rem;
        font-weight: 600;
        text-align: center;
    }

    #iaplat .iaplat-main .iaplat-loop.is-dim > * { opacity: 1; }
    #iaplat .iaplat-main .iaplat-loop.is-dim { border-color: rgba(70, 150, 255, 0.55); }
    #iaplat .iaplat-main .iaplat-loop.is-lit { border-color: var(--iaplat-cyan); box-shadow: 0 0 0 1px rgba(63, 169, 245, 0.5), 0 0 26px rgba(63, 169, 245, 0.3); }

    .iaplat-loop-cells {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .iaplat-loop-cells li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        min-height: 44px;
        padding: 5px 8px;
        border: 1px solid rgba(40, 140, 225, 0.5);
        border-radius: 4px;
        background: rgba(8, 66, 122, 0.55);
        text-align: center;
    }

    .iaplat-loop-cells b {
        color: #e6eefa;
        font-size: 0.76rem;
        font-weight: 600;
        line-height: 1.25;
    }

    .iaplat-loop-cells span {
        color: #9ab8d8;
        font-size: 0.7rem;
        line-height: 1.3;
    }

    /* Socle : infrastructures souveraines, sur toute la largeur, sous la plateforme */
    .iaplat-socle {
        grid-area: 4 / 1 / 5 / -1;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 2px 22px;
        margin-top: 4px;
        padding: 10px 16px;
        border: 1px solid rgba(70, 150, 255, 0.5);
        border-radius: 5px;
        background: linear-gradient(180deg, #063a6c 0%, #04305b 100%);
    }

    .iaplat-socle-tag {
        grid-area: 1 / 1;
        color: #74bbff;
        font-size: 0.7rem;
        font-weight: 600;
    }

    .iaplat-socle-title {
        grid-area: 2 / 1;
        color: #fff;
        font-size: 0.9rem;
        font-weight: 600;
    }

    .iaplat-socle-cells {
        display: grid;
        grid-area: 1 / 2 / 3 / 3;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .iaplat-socle-cells li {
        padding: 3px 10px;
        border-left: 1px solid rgba(70, 150, 255, 0.32);
        color: #c3d6ec;
        font-size: 0.78rem;
        line-height: 1.3;
    }

    /* Fenetres d'activite du diagramme principal : exactement sur la zone des fonctions du hub (colonnes 2-3, rangee 2) */
    .iaplat-main-stage .iaplat-mwin {
        grid-area: 2 / 2 / 3 / 4;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        width: auto;
        max-width: none;
        padding: 0;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--fx-accent) 70%, rgba(110, 170, 255, 0.3));
        border-radius: 6px;
        background: #06223f;
        box-shadow: 0 14px 34px rgba(0, 6, 18, 0.55), 0 0 26px color-mix(in srgb, var(--fx-accent) 22%, transparent);
        font-size: 0.74rem;
        transform-origin: 50% 0;
    }

    .iaplat-mwin--res { --fx-accent: #f1897e; }

    .iaplat-mwin .iaplat-win-body { gap: 6px; padding: 9px 12px 10px; }
    .iaplat-mwin .iaplat-win-bar { font-size: 0.62rem; }
    .iaplat-mwin .iaplat-sig { max-height: 30px; width: 70%; }
    .iaplat-mwin .iaplat-files { gap: 5px; }
    .iaplat-mwin .iaplat-fl { font-size: 0.66rem; grid-template-columns: minmax(0, 1fr) 40%; }
    .iaplat-mwin .iaplat-conf { font-size: 0.7rem; grid-template-columns: minmax(0, 1fr) 36% auto; }
    .iaplat-mwin .iaplat-portal { grid-template-columns: minmax(0, 1fr) 30%; }

    /* Etat d'attente plus court dans le diagramme principal : la fenetre aboutit avant l'entree suivante du journal */
    .iaplat-main .iaplat-win { --iaplat-t: 0.8s; }
    .iaplat-main .iaplat-win.is-on .iaplat-signer--2 .iaplat-st-p { animation-duration: 1.2s, 0.8s; }
    .iaplat-main .iaplat-win.is-on .iaplat-signer--2 .iaplat-st-d { animation-duration: 1.2s, 0.35s; animation-delay: 0s, 1.2s; }

    /* ======================================================================
       Workflows types
       ====================================================================== */
    .iaplat-wf {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .iaplat-wf-card {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .iaplat-wf-top {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        min-width: 0;
    }

    .iaplat-wf-top h3 {
        min-width: 0;
        margin: 0;
        color: #fff;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .iaplat-wf-live {
        display: none;
        flex: none;
        margin-left: auto;
        padding: 2px 6px;
        border: 1px solid rgba(237, 115, 117, 0.7);
        border-radius: 3px;
        color: #ff9d8f;
        font-family: var(--fx-mono);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .iaplat-wf-card.is-current {
        border-color: rgba(237, 115, 117, 0.8);
        box-shadow: 0 0 0 1px rgba(0, 11, 27, 0.45), 0 0 26px rgba(253, 103, 101, 0.2);
    }

    /* « En lecture » : seulement quand le diagramme joue reellement (classe posee par le JS) */
    .iaplat-wf.is-playing .iaplat-wf-card.is-current .iaplat-wf-live { display: inline-block; }

    .iaplat-wf-card.is-muted {
        order: 1;
        border-style: dashed;
        border-color: rgba(70, 150, 255, 0.22);
        background: rgba(5, 36, 68, 0.55);
        box-shadow: none;
    }

    /* Filtre par industrie ou par produit */
    .iaplat-filter {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin: 0 0 16px;
    }

    .iaplat-filter-l {
        margin: 0 2px 0 10px;
        color: #8fadd0;
        font-family: var(--fx-mono);
        font-size: 0.64rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .iaplat-fbtn {
        min-height: 34px;
        padding: 6px 12px;
        border: 1px solid var(--iaplat-border-soft);
        border-radius: 6px;
        background: rgba(3, 32, 62, 0.85);
        color: #cfe0f2;
        font: inherit;
        font-size: 0.84rem;
        cursor: pointer;
        transition: border-color 0.2s ease, background 0.2s ease;
    }

    .iaplat-fbtn:hover { border-color: rgba(95, 200, 255, 0.6); }
    .iaplat-fbtn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

    .iaplat-fbtn[aria-pressed="true"] {
        border-color: rgba(237, 115, 117, 0.8);
        background: linear-gradient(160deg, rgba(253, 103, 101, 0.22), rgba(120, 40, 60, 0.18));
        color: #fff;
    }

    .iaplat-filter-n {
        margin-left: auto;
        color: #8fadd0;
        font-size: 0.82rem;
    }

    .iaplat-wf-tag {
        color: #7b9fc4;
        font-family: var(--fx-mono);
        font-size: 0.64rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .iaplat-mini {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .iaplat-mini li {
        position: relative;
        padding: 3px 7px;
        border: 1px solid rgba(70, 150, 255, 0.3);
        border-left: 2px solid var(--iaplat-c, var(--iaplat-acc));
        border-radius: 3px;
        background: rgba(2, 30, 60, 0.85);
        color: #d4e3f3;
        font-size: 0.72rem;
        line-height: 1.3;
    }

    .iaplat-mini li + li { margin-left: 16px; }

    .iaplat-mini li + li::before {
        content: "";
        position: absolute;
        left: -13px;
        top: 50%;
        width: 7px;
        height: 1px;
        background: var(--iaplat-cyan);
    }

    .iaplat-mini li + li::after {
        content: "";
        position: absolute;
        left: -7px;
        top: calc(50% - 3px);
        border: 3px solid transparent;
        border-left: 4px solid var(--iaplat-cyan);
        border-right: 0;
    }

    /* blocs HDCE (couche d'integration) et resultats en corail, le reste en bleu */
    .iaplat-c--hdce { --iaplat-c: #ff8a80; }
    .iaplat-c--res { --iaplat-c: var(--iaplat-coral-text); }

    .iaplat-wf-card p {
        margin: 0;
        color: var(--iaplat-body);
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .iaplat-wf-card .iaplat-wf-res {
        color: var(--iaplat-coral-text);
        font-size: 0.84rem;
    }

    .iaplat-wf-res b { font-weight: 650; }

    #iaplat .iaplat-wf-btn {
        align-self: flex-start;
        min-height: 40px;
        margin-top: auto;
        padding: 8px 14px;
        font-size: 0.86rem;
    }

    .iaplat-wf-card--cta {
        border-color: rgba(237, 115, 117, 0.6);
        background: var(--iaplat-res-col);
    }

    .iaplat-wf-card--cta .iaplat-wf-top h3 { color: #fae6e1; }

    .iaplat-cta-ex {
        display: grid;
        gap: 6px;
        margin: -4px 0 0;
        padding: 0;
        list-style: none;
    }

    .iaplat-cta-ex li {
        padding: 5px 9px;
        border: 1px solid rgba(237, 115, 117, 0.32);
        border-left: 2px solid var(--iaplat-coral-rule);
        border-radius: 3px;
        background: rgba(40, 18, 34, 0.5);
        color: #ecd7d8;
        font-size: 0.8rem;
        line-height: 1.35;
    }

    /* ======================================================================
       Produits et systemes connectes
       ====================================================================== */
    .iaplat-prodgrid {
        display: grid;
        gap: 18px;
    }

    .iaplat-prodpanel,
    .iaplat-impact { padding: 18px; }

    .iaplat-ptitle--h2 { font-size: 20px; }

    .iaplat-prods {
        display: grid;
        gap: 12px;
        margin-top: 16px;
    }

    .iaplat-prod {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
        padding: 14px;
        border: 1px solid rgba(70, 150, 255, 0.3);
        border-top: 2px solid var(--iaplat-acc);
        border-radius: 4px;
        background: var(--iaplat-tile);
    }

    /* couleur propre au produit : pastille seulement */
    .iaplat-prod-dot {
        flex: none;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .iaplat-prod-dot--jrose { background: var(--fx-p-jrose); }
    .iaplat-prod-dot--se { background: var(--fx-p-se); }

    .iaplat-prod h3 {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        color: #fff;
        font-size: 1.08rem;
        font-weight: 700;
    }

    .iaplat-prod h3 .ic { width: 20px; height: 20px; color: var(--fx-p-tib); stroke-width: 1.9; }

    .iaplat-prod-role {
        color: #7fc0ff;
        font-size: 0.82rem;
        font-weight: 600;
        line-height: 1.35;
    }

    .iaplat-prod p {
        margin: 2px 0 4px;
        color: var(--iaplat-body);
        font-size: 0.86rem;
        line-height: 1.5;
    }

    .iaplat-ev-l {
        margin-top: 2px;
        color: #7b9fc4;
        font-family: var(--fx-mono);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .iaplat-evs {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .iaplat-evs code {
        padding: 2px 6px;
        border: 1px solid rgba(70, 150, 255, 0.26);
        border-radius: 3px;
        background: rgba(5, 48, 90, 0.7);
        color: #d4e3f3;
        font-family: var(--fx-mono);
        font-size: 0.66rem;
    }

    .iaplat-sys-h {
        margin: 20px 0 10px;
        color: #fff;
        font-size: 0.95rem;
        font-weight: 650;
    }

    .iaplat-sys,
    .iaplat-impact-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Systemes connectes : liste a filet bleu (pas d'icone decorative) */
    .iaplat-sys li {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
        padding: 10px 12px 11px 14px;
        border: 1px solid rgba(40, 100, 160, 0.62);
        border-left: 2px solid var(--iaplat-acc);
        border-radius: 4px;
        background: var(--iaplat-tile);
    }

    .iaplat-impact-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        min-width: 0;
        padding: 14px;
        border: 1px solid rgba(40, 100, 160, 0.62);
        border-radius: 4px;
        background: var(--iaplat-tile);
    }

    .iaplat-impact-list li > span:last-child {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

    .iaplat-sys b,
    .iaplat-impact-list b {
        color: #fff;
        font-size: 0.92rem;
        font-weight: 650;
        line-height: 1.25;
    }

    .iaplat-sys li > span,
    .iaplat-impact-list li span span {
        color: #8fadd0;
        font-size: 0.85rem;
        line-height: 1.4;
    }

    /* Panneau de confiance : contenu reparti sur toute la hauteur (pas de vide) */
    .iaplat-trust {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 22px;
        overflow: hidden;
        padding: 20px 20px 22px;
    }

    .iaplat-trust-t {
        position: relative;
        margin: 0;
        color: var(--iaplat-bright);
        font-size: 20px;
        font-weight: 700;
        line-height: 1.3;
    }

    .iaplat-checks {
        position: relative;
        display: grid;
        gap: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .iaplat-checks li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: #c9d9ec;
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .iaplat-checks .ic { flex: none; width: 20px; height: 20px; color: var(--iaplat-bright); stroke-width: 1.8; }

    .iaplat-trust-cta {
        position: relative;
        display: grid;
        gap: 12px;
        padding: 14px 0 0 14px;
        border-left: 2px solid var(--iaplat-coral-rule);
    }

    .iaplat-trust-cta p {
        margin: 0;
        color: #a9c4e4;
        font-size: 0.86rem;
        line-height: 1.5;
    }

    .iaplat-trust-cta b {
        display: block;
        margin-bottom: 3px;
        color: #fff;
        font-size: 0.95rem;
        font-weight: 650;
    }

    #iaplat .iaplat-trust-btn {
        justify-self: start;
        min-height: 40px;
        padding: 8px 14px;
        font-size: 0.88rem;
    }

    #iaplat .iaplat-trust-btn .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; }

    .iaplat-commit {
        position: relative;
        z-index: 1;
        margin-top: auto;
        padding: 14px 14px 12px;
        border: 1px solid rgba(70, 150, 255, 0.34);
        border-radius: 6px;
        background: rgba(3, 34, 66, 0.82);
    }

    .iaplat-commit-h {
        margin: 0 0 8px;
        color: #8fadd0;
        font-family: var(--fx-mono);
        font-size: 0.64rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .iaplat-commit-l { margin: 0; }

    .iaplat-commit-l > div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border-top: 1px dashed rgba(110, 170, 255, 0.2);
    }

    .iaplat-commit-l dt { color: #a9c4e4; font-size: 0.85rem; }

    .iaplat-commit-l dd {
        margin: 0;
        color: #fff;
        font-size: 0.85rem;
        font-weight: 650;
        text-align: right;
    }

    /* ======================================================================
       Resultats
       ====================================================================== */
    .iaplat-impact-list { margin-top: 16px; }

    /* ======================================================================
       Responsive
       ====================================================================== */
    @media (max-width: 639px) {
        .iaplat-stats {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            row-gap: 14px;
        }
        .iaplat-stats li:nth-child(3) { padding-left: 0; border-left: 0; }
        .iaplat-sov { min-height: 0; margin-top: 28px; }
        .iaplat-sov .iaplat-quote { max-width: none; }
        .iaplat-map {
            position: static;
            display: block;
            width: min(78%, 300px);
            margin: -6px 0 0 auto;
        }
        #iaplat .iaplat-actions .ia-btn { width: 100%; }
        .iaplat-bquote { margin-left: 0; text-align: left; }

        /* Hero en rangees : 3 produits, IA + hub, 3 systemes, puis la cellule des fenetres */
        .iaplat-hero-stage {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-template-rows: auto auto auto minmax(var(--iaplat-dock-h-sm, 150px), auto);
            column-gap: 12px;
            row-gap: 30px;
        }
        .iaplat-hn--jrose { grid-area: 1 / 1; }
        .iaplat-hn--se { grid-area: 1 / 2; }
        .iaplat-hn--tib { grid-area: 1 / 3; }
        .iaplat-hn--ai { grid-area: 2 / 1; justify-self: stretch; width: auto; }
        .iaplat-hn--hub { grid-area: 2 / 2 / 3 / 4; margin-left: 18px; }
        .iaplat-hn--erp { grid-area: 3 / 1; }
        .iaplat-hn--crm { grid-area: 3 / 2; }
        .iaplat-hn--portal { grid-area: 3 / 3; }
        .iaplat-dock,
        .iaplat-hero-stage .iaplat-win { grid-area: 4 / 1 / 5 / -1; }
        .iaplat-hero .fx-node:not(.iaplat-hn--hub) { align-self: stretch; padding: 8px 8px 9px; }
        .iaplat-hero .fx-node:not(.iaplat-hn--hub) .fx-sub { display: none; }
        .iaplat-hero .fx-node:not(.iaplat-hn--hub) .fx-title { font-size: 0.78rem; }
        .iaplat-hero .iaplat-hn--hub { padding: 10px 10px; }
        .iaplat-heropanel,
        .iaplat-board { padding: 12px; }
        /* telephone : colonnes un peu plus larges (moins de retours a la ligne, scene moins haute) ;
           la fenetre d'activite reste dans l'ecran apres « Voir le workflow » */
        .iaplat-main-stage { min-width: 1080px; }
        #iaplat .iaplat-main .fx-con-text { min-height: 0; }
        #iaplat .iaplat-main { --fx-log-lines: 2; }
        .iaplat-fn { min-height: 146px; }
        .iaplat-fn > .iaplat-colnote { display: none; }
    }

    @media (min-width: 480px) {
        .iaplat-sys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .iaplat-impact-list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    }

    @media (min-width: 640px) {
        .iaplat-wf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .iaplat-heropanel { padding: 16px 20px; }
        .iaplat-board { padding: 20px; }
    }

    /* 1100-1279px : un peu plus de largeur pour le diagramme du hero */
    @media (min-width: 1100px) and (max-width: 1279px) {
        #iaplat { --ia-hero-cols: minmax(0, 0.68fr) minmax(0, 1.32fr); }
    }

    @media (min-width: 820px) {
        .iaplat-head {
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: end;
            gap: 32px;
        }
        .iaplat-prods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .iaplat-board-head {
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: end;
        }
    }

    @media (max-width: 1099px) {
        .iaplat-copy { max-width: 760px; }
    }

    /* Titres en pixels entiers : Segoe UI semi-gras laisse des espaces parasites a certaines tailles fractionnaires */
    @media (min-width: 820px) {
        .iaplat-h2 { font-size: 30px; }
        .iaplat-ptitle { font-size: 22px; }
        .iaplat-ptitle--h2 { font-size: 22px; }
    }

    @media (min-width: 1280px) {
        .iaplat-h2 { font-size: 34px; }
        .iaplat-ptitle { font-size: 23px; }
        .iaplat-ptitle--h2 { font-size: 24px; }
    }

    @media (min-width: 1100px) {
        .iaplat-copy { padding-top: 22px; }
        .iaplat-wf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .iaplat-prodgrid { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
        .iaplat-sys { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .iaplat-impact-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }
    /* @@IA:iaplat:css:end@@ */

    /* @@IA:iahub:css:start@@ */
    /* ---------- IA & Developpement : ecran de choix (frere de #hosting) ---------- */
    .iahub-card {
      --iahub-edge: 20px;
      position: relative;
      color: var(--text);
      text-decoration: none;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .iahub-card:hover {
      border-color: rgba(120, 170, 255, 0.58);
      box-shadow: 0 0 48px rgba(40, 100, 255, 0.2), inset 0 0 0 1px rgba(80, 140, 255, 0.08);
    }

    .iahub-card:focus { outline: none; }

    .iahub-card:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 4px;
    }

    .iahub-card:hover .model-cta .card-arrow,
    .iahub-card:focus-visible .model-cta .card-arrow {
      background: rgba(232, 87, 74, 0.15);
      box-shadow: 0 0 14px var(--accent-glow);
    }

    /* ----- Visuel : illustration + reperes (meme format et meme traitement que les photos de #hosting) ----- */
    .iahub-media {
      position: relative;
      display: block;
      aspect-ratio: 657 / 314;
      overflow: hidden;
      background: #071027;
      container-type: inline-size;
      /* le lien parent recoit le clic */
      pointer-events: none;
    }

    .iahub-media-img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .iahub-media-num {
      position: absolute;
      z-index: 1;
      top: 18px;
      left: var(--iahub-edge);
      display: flex;
      align-items: center;
      gap: 12px;
      color: #fff;
      font-size: 1.4rem;
      font-weight: 300;
      line-height: 1;
      text-shadow: 0 1px 10px rgba(2, 8, 24, 0.8);
    }

    .iahub-media-num::after {
      content: "";
      width: 36px;
      height: 2px;
      background: var(--accent-bright);
    }

    .iahub-media-tag {
      position: absolute;
      z-index: 1;
      top: 17px;
      right: var(--iahub-edge);
      color: rgba(206, 218, 240, 0.86);
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      line-height: 1.75;
      text-align: right;
      text-transform: uppercase;
      text-shadow: 0 1px 8px rgba(2, 8, 24, 0.85);
    }

    /* reperes legendes, facon plan annote (texte HTML net, positions en % de l'illustration) */
    .iahub-co {
      --co-line: rgba(120, 175, 255, 0.62);
      position: absolute;
      z-index: 1;
      padding: 0.15em 0;
      color: rgba(226, 234, 250, 0.94);
      font-size: clamp(7px, 1.5cqi, 10px);
      font-weight: 600;
      letter-spacing: 0.15em;
      line-height: 1.65;
      text-transform: uppercase;
      white-space: nowrap;
      text-shadow: 0 1px 6px rgba(2, 8, 24, 0.95), 0 0 2px rgba(2, 8, 24, 0.9);
    }

    /* point aux extremites du trait vertical */
    .iahub-co::before {
      content: "";
      position: absolute;
      top: -2px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--co-line);
      box-shadow: 0 0 6px rgba(95, 170, 255, 0.8);
    }

    /* trait d'attache vers l'illustration, termine par un anneau */
    .iahub-co::after {
      content: "";
      position: absolute;
      top: calc(50% - 3.5px);
      width: 3.4em;
      height: 7px;
      background:
        radial-gradient(circle, transparent 1.6px, var(--co-line) 2px 3px, transparent 3.4px) var(--ring-x) 50% / 7px 7px no-repeat,
        linear-gradient(var(--co-line), var(--co-line)) 50% 50% / 100% 1px no-repeat;
    }

    .iahub-co--l {
      left: var(--iahub-edge);
      padding-left: 1.05em;
      border-left: 1px solid var(--co-line);
    }

    .iahub-co--l::before { left: -2.5px; }

    .iahub-co--l::after {
      --ring-x: 100%;
      left: calc(100% + 0.9em);
    }

    .iahub-co--r {
      right: var(--iahub-edge);
      padding-right: 1.05em;
      border-right: 1px solid var(--co-line);
      text-align: right;
    }

    .iahub-co--r::before { right: -2.5px; }

    .iahub-co--r::after {
      --ring-x: 0%;
      right: calc(100% + 0.9em);
      width: 2.2em;
    }

    /* Produits IA : trois reperes sur la bande sombre a gauche, deux a droite */
    .iahub-co--p1 { top: 40%; }
    .iahub-co--p2 { top: 58%; }
    .iahub-co--p3 { top: 77%; }
    .iahub-co--p4 { top: 34%; }
    .iahub-co--p5 { top: 83%; }

    .iahub-co--p4::after,
    .iahub-co--p5::after { display: none; }

    /* IA Developpement : colonne de reperes dans le vide a droite du visage */
    .iahub-co--d1 { top: 34%; }
    .iahub-co--d2 { top: 50%; }
    .iahub-co--d3 { top: 66%; }
    .iahub-co--d4 { top: 82%; }

    /* ----- Liens secondaires sous la vignette 02 : Developpement sur mesure ----- */
    .iahub-more {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-self: start;
      gap: 6px 12px;
      margin-top: -6px;
      padding: 6px 4px;
      color: var(--text-muted);
      font-size: 0.9rem;
      line-height: 1.35;
    }

    .iahub-more-label {
      flex-basis: 100%;
      color: var(--ia-coral-soft);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .iahub-more-sep { display: none; color: rgba(154, 171, 198, 0.6); }

    .iahub-more-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 2px;
      border-radius: 6px;
      color: var(--text);
      text-decoration: none;
    }

    .iahub-more-text {
      border-bottom: 1px solid rgba(232, 87, 74, 0.45);
      transition: color 0.2s ease, border-color 0.2s ease;
    }

    .iahub-more-link .ic {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      color: var(--accent-bright);
      transition: transform 0.2s ease;
    }

    .iahub-more-link:hover .iahub-more-text,
    .iahub-more-link:focus-visible .iahub-more-text { color: #fff; border-bottom-color: var(--accent-bright); }

    .iahub-more-link:hover .ic { transform: translateX(3px); }

    .iahub-more-link:focus { outline: none; }

    .iahub-more-link:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
    }

    @media (min-width: 480px) {
      .iahub-more-sep { display: inline; }
    }

    @media (min-width: 1100px) {
      .iahub-more-label { flex-basis: auto; }
    }

    .iahub-nowrap { white-space: nowrap; }

    @media (min-width: 640px) {
      .iahub-card { --iahub-edge: 26px; }
    }

    @media (max-width: 380px) {
      .iahub-media-tag { letter-spacing: 0.12em; }
    }

    @media (min-width: 900px) {
      .iahub-more { grid-column: 2; }
    }
    /* @@IA:iahub:css:end@@ */

    /* @@IA:cyber:css:start@@ */
    /* ---------- Cybersecurite : ecran de choix (frere de #hosting et de #ia) ---------- */
    .cyber-card {
      --cyber-edge: 20px;
      position: relative;
      color: var(--text);
      text-decoration: none;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .cyber-card:hover {
      border-color: rgba(120, 170, 255, 0.58);
      box-shadow: 0 0 48px rgba(40, 100, 255, 0.2), inset 0 0 0 1px rgba(80, 140, 255, 0.08);
    }

    .cyber-card:focus { outline: none; }

    .cyber-card:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 4px;
    }

    .cyber-card:hover .model-cta .card-arrow,
    .cyber-card:focus-visible .model-cta .card-arrow {
      background: rgba(232, 87, 74, 0.15);
      box-shadow: 0 0 14px var(--accent-glow);
    }

    .cyber-nowrap { white-space: nowrap; }

    /* ----- Visuel : maquettes du client (moniteur d7, portable Secure-Exchanges) sur fond marine ----- */
    .cyber-media {
      position: relative;
      display: block;
      aspect-ratio: 1.55;
      overflow: hidden;
      border-bottom: 1px solid rgba(80, 140, 255, 0.16);
      background:
        radial-gradient(ellipse 62% 58% at 50% 60%, rgba(36, 92, 220, 0.3), transparent 72%),
        linear-gradient(180deg, #0b1a3c 0%, #071027 100%);
      container-type: inline-size;
      /* le lien parent recoit le clic */
      pointer-events: none;
    }

    /* trame discrete facon plan d'architecture (comme l'ecran #ia) */
    .cyber-media::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(95, 200, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95, 200, 255, 0.055) 1px, transparent 1px);
      background-size: 26px 26px;
      -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 58%, #000 25%, transparent 82%);
      mask-image: radial-gradient(ellipse 72% 70% at 50% 58%, #000 25%, transparent 82%);
    }

    /* reflet bleu au sol, sous les appareils */
    .cyber-media::after {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: -4%;
      height: 26%;
      background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(60, 140, 255, 0.32), transparent 70%);
      pointer-events: none;
    }

    .cyber-media-num {
      position: absolute;
      z-index: 3;
      top: 18px;
      left: var(--cyber-edge);
      display: flex;
      align-items: center;
      gap: 12px;
      color: #fff;
      font-size: 1.4rem;
      font-weight: 300;
      line-height: 1;
    }

    .cyber-media-num::after {
      content: "";
      width: 36px;
      height: 2px;
      background: var(--accent-bright);
    }

    .cyber-media-tag {
      position: absolute;
      z-index: 3;
      top: 17px;
      right: var(--cyber-edge);
      color: rgba(206, 218, 240, 0.8);
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      line-height: 1.75;
      text-align: right;
      text-transform: uppercase;
    }

    .cyber-dev {
      position: absolute;
      z-index: 1;
      transition: transform 0.45s ease;
    }

    .cyber-dev-img {
      display: block;
      width: 100%;
      height: auto;
    }

    .cyber-card:hover .cyber-dev,
    .cyber-card:focus-visible .cyber-dev { transform: translateY(-1.5%) scale(1.015); }

    /* ===== 01 : moniteur d7 + miniature du tableau de bord HDCE Sentinel ===== */
    .cyber-mon {
      --cyber-mon-w: 80cqw;
      width: var(--cyber-mon-w);
      /* le pied du moniteur (44,8 % de l'image, la tasse est a droite) est centre */
      left: calc(50% - var(--cyber-mon-w) * 0.448);
      bottom: 3%;
    }

    .cyber-mon .cyber-dev-img { filter: drop-shadow(0 0 2.4cqw rgba(60, 140, 255, 0.28)); }

    .cyber-scr {
      position: absolute;
      left: 2.78%;
      top: 4.75%;
      width: 83.93%;
      height: 74.55%;
      overflow: hidden;
      border-radius: 0.3cqw;
      background: #eef3fa;
      color: #15233d;
      container-type: inline-size;
      line-height: 1.2;
      box-shadow: 0 0 2cqw rgba(79, 155, 255, 0.35);
    }

    /* dans l'ecran, toutes les mesures suivent sa largeur (cqw de .cyber-scr) */
    .cyber-db-top {
      position: absolute;
      inset: 0 0 auto 0;
      height: 10.5%;
      display: flex;
      align-items: center;
      gap: 2cqw;
      padding: 0 2cqw;
      background: #0b1631;
      color: #fff;
      font-size: 2.3cqw;
    }

    .cyber-db-brand {
      display: inline-flex;
      align-items: center;
      gap: 1cqw;
      font-weight: 700;
    }

    .cyber-db-brand img {
      width: 3.6cqw;
      height: 3.6cqw;
      border-radius: 0.7cqw;
    }

    .cyber-db-org {
      margin-left: auto;
      color: rgba(255, 255, 255, 0.82);
      font-size: 1.9cqw;
      font-weight: 600;
      letter-spacing: 0.06em;
    }

    .cyber-db-bell {
      position: relative;
      width: 2.6cqw;
      height: 2.6cqw;
      border: 0.3cqw solid rgba(255, 255, 255, 0.75);
      border-radius: 50% 50% 0.6cqw 0.6cqw;
    }

    .cyber-db-bell i {
      position: absolute;
      top: -0.9cqw;
      right: -0.9cqw;
      width: 1.3cqw;
      height: 1.3cqw;
      border-radius: 50%;
      background: #ff5d5d;
    }

    .cyber-db-av {
      display: grid;
      place-items: center;
      width: 3.6cqw;
      height: 3.6cqw;
      border-radius: 50%;
      background: #4f6bff;
      font-size: 1.5cqw;
      font-weight: 700;
    }

    .cyber-db-side {
      position: absolute;
      left: 0;
      top: 10.5%;
      bottom: 0;
      width: 15%;
      display: flex;
      flex-direction: column;
      gap: 2.6cqw;
      padding: 2.4cqw 1.4cqw;
      background: #0d1937;
    }

    .cyber-db-side i {
      display: block;
      height: 1.2cqw;
      width: 72%;
      border-radius: 1cqw;
      background: rgba(190, 210, 240, 0.28);
    }

    .cyber-db-side i:nth-child(2n) { width: 58%; }

    .cyber-db-side i.is-on {
      width: 100%;
      height: 2.6cqw;
      margin: -0.7cqw 0;
      background: #1f6fe0;
    }

    .cyber-db-main {
      position: absolute;
      left: 15%;
      top: 10.5%;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      gap: 1.3cqw;
      padding: 1.6cqw 2cqw 1.8cqw;
    }

    .cyber-db-h {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 2.2cqw;
    }

    .cyber-db-live {
      display: inline-flex;
      align-items: center;
      gap: 0.8cqw;
      color: #1f9d5c;
      font-size: 1.7cqw;
      font-weight: 600;
    }

    .cyber-db-live i,
    .cyber-feed i,
    .cyber-toast i {
      width: 1.2cqw;
      height: 1.2cqw;
      border-radius: 50%;
      background: #34c77b;
    }

    .cyber-kpis {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.3cqw;
    }

    .cyber-kpi,
    .cyber-pnl {
      border-radius: 0.9cqw;
      background: #fff;
      box-shadow: 0 0 0 0.15cqw #dbe4f1, 0 0.5cqw 1.4cqw rgba(21, 35, 61, 0.06);
    }

    .cyber-kpi {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0.3cqw;
      padding: 1.2cqw 1.3cqw 1.2cqw 5.4cqw;
    }

    .cyber-kpi::before {
      content: "";
      position: absolute;
      left: 1.3cqw;
      top: 50%;
      width: 3cqw;
      height: 3cqw;
      margin-top: -1.5cqw;
      border-radius: 50%;
      background: var(--cyber-kpi-c, #34c77b);
      opacity: 0.18;
      box-shadow: inset 0 0 0 0.25cqw var(--cyber-kpi-c, #34c77b);
    }

    .cyber-kpi b {
      font-size: 3.1cqw;
      font-weight: 700;
      line-height: 1;
    }

    .cyber-kpi em {
      overflow: hidden;
      color: #5d6f8c;
      font-size: 1.45cqw;
      font-style: normal;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .cyber-kpi--al { --cyber-kpi-c: #ff5d5d; }
    .cyber-kpi--mt { --cyber-kpi-c: #4f9bff; }
    .cyber-kpi--ok { --cyber-kpi-c: #2bb5a0; }

    .cyber-pnls {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.3cqw;
    }

    .cyber-pnl {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0.7cqw;
      min-height: 0;
      overflow: hidden;
      padding: 1.3cqw 1.6cqw;
    }

    .cyber-pnl-h {
      font-size: 1.75cqw;
      font-weight: 600;
    }

    .cyber-thr {
      display: flex;
      align-items: baseline;
      gap: 0.8cqw;
      color: #5d6f8c;
      font-size: 1.6cqw;
    }

    .cyber-thr b {
      color: #15233d;
      font-size: 3.6cqw;
      line-height: 1;
    }

    .cyber-spark {
      display: block;
      width: 100%;
      flex: 1;
      min-height: 0;
    }

    .cyber-spk-area { fill: rgba(31, 111, 224, 0.12); }

    .cyber-spk-line {
      fill: none;
      stroke: #1f6fe0;
      stroke-width: 1.6;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .cyber-bar {
      display: grid;
      grid-template-columns: 11cqw 1fr;
      align-items: center;
      gap: 1cqw;
      color: #5d6f8c;
      font-size: 1.45cqw;
    }

    .cyber-bar i {
      height: 0.9cqw;
      border-radius: 1cqw;
      background: #e4ebf5;
      overflow: hidden;
    }

    .cyber-bar b {
      display: block;
      height: 100%;
      width: 98%;
      border-radius: inherit;
      background: #34c77b;
      transform-origin: left center;
    }

    .cyber-bar:nth-child(3) b { width: 93%; background: #e0a73a; }
    .cyber-bar:nth-child(4) b { width: 100%; }
    .cyber-bar:nth-child(5) b { width: 97%; }

    .cyber-pnl--feed {
      flex-direction: row;
      align-items: center;
      gap: 2.2cqw;
      padding: 1.2cqw 1.6cqw;
    }

    .cyber-feed {
      display: inline-flex;
      align-items: center;
      gap: 0.8cqw;
      color: #15233d;
      margin: -0.6cqw 0;
      padding: 0.6cqw 1cqw;
      border-radius: 0.8cqw;
      font-size: 1.5cqw;
      white-space: nowrap;
    }

    .cyber-feed:nth-child(3) i { background: #4f9bff; }

    /* balayage lumineux de l'ecran */
    .cyber-scan {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 0%, rgba(95, 200, 255, 0.14) 48%, transparent 52%);
      background-size: 100% 220%;
      background-position: 0 120%;
      opacity: 0;
      pointer-events: none;
    }

    /* notification : menace bloquee */
    .cyber-toast {
      position: absolute;
      right: 2.4cqw;
      bottom: 2.4cqw;
      display: inline-flex;
      align-items: center;
      gap: 1cqw;
      padding: 1cqw 1.8cqw;
      border-radius: 3cqw;
      background: #0b1631;
      box-shadow: 0 1cqw 2.4cqw rgba(11, 22, 49, 0.35), 0 0 0 0.15cqw rgba(52, 199, 123, 0.6);
      color: #fff;
      font-size: 1.7cqw;
      font-weight: 600;
      white-space: nowrap;
    }

    /* ===== 02 : portable Secure-Exchanges + serveur Cesar ===== */
    .cyber-media--se {
      --cyber-wire-y: 64%;
      --cyber-wire-x0: 64.6%;
      --cyber-wire-x1: 75.5%;
    }

    .cyber-lap {
      width: 64cqw;
      left: 3cqw;
      bottom: 3%;
    }

    .cyber-lap .cyber-dev-img { filter: drop-shadow(0 0 2.2cqw rgba(60, 140, 255, 0.22)); }

    /* fenetre Outlook posee sur l'ecran du portable (bord gauche incline comme l'ecran) */
    .cyber-win {
      position: absolute;
      left: 29.4%;
      top: 6%;
      width: 65.6%;
      height: 72.6%;
      overflow: hidden;
      background: #f3f6fb;
      color: #15233d;
      clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%);
      container-type: inline-size;
      line-height: 1.2;
    }

    .cyber-ow-bar {
      display: flex;
      align-items: center;
      gap: 1.6cqw;
      height: 8cqw;
      padding: 0 2.4cqw 0 10cqw;
      background: #0f5fbf;
      color: #fff;
      font-size: 3cqw;
      font-weight: 600;
    }

    .cyber-ow-bar img {
      width: 4.4cqw;
      height: 4.4cqw;
    }

    .cyber-ow-bar i {
      width: 2cqw;
      height: 2cqw;
      border: 0.35cqw solid rgba(255, 255, 255, 0.7);
      border-radius: 0.4cqw;
    }

    .cyber-ow-bar i:first-of-type { margin-left: auto; }

    .cyber-ow-tabs {
      display: flex;
      gap: 3.4cqw;
      padding: 1.4cqw 2.4cqw 0 9.4cqw;
      color: #5d6f8c;
      font-size: 2.5cqw;
    }

    .cyber-ow-tabs span { padding-bottom: 0.9cqw; }

    .cyber-ow-tabs .is-on {
      color: #0f5fbf;
      font-weight: 700;
      box-shadow: inset 0 -0.45cqw 0 #0f5fbf;
    }

    .cyber-ow-rib {
      display: flex;
      gap: 1.6cqw;
      padding: 1.6cqw 2.4cqw 1.6cqw 8.6cqw;
      border-bottom: 0.25cqw solid #dbe4f1;
      background: #fff;
    }

    .cyber-rb {
      display: inline-flex;
      align-items: center;
      gap: 1cqw;
      padding: 0.9cqw 1.8cqw;
      border: 0.25cqw solid #c9d8ee;
      border-radius: 1cqw;
      background: #fff;
      font-size: 2.4cqw;
      font-weight: 600;
      white-space: nowrap;
    }

    .cyber-rb img {
      width: 2.6cqw;
      height: auto;
    }

    .cyber-rb--se {
      border-color: #e95b13;
      color: #b8430a;
      box-shadow: 0 0 0 0 rgba(233, 91, 19, 0.45);
    }

    .cyber-ow-body {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 1.8cqw;
      height: 100%;
      padding: 2.6cqw 3cqw 0 7.6cqw;
      background: #fff;
    }

    .cyber-ow-f {
      display: flex;
      gap: 2cqw;
      padding-bottom: 1.2cqw;
      border-bottom: 0.2cqw solid #e4ebf5;
      font-size: 2.5cqw;
    }

    .cyber-ow-f b {
      min-width: 7cqw;
      color: #5d6f8c;
      font-weight: 500;
    }

    .cyber-ow-l {
      display: block;
      height: 1.4cqw;
      width: 82%;
      border-radius: 1cqw;
      background: #e4ebf5;
    }

    .cyber-ow-l--s { width: 56%; }

    .cyber-ow-att {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 1cqw;
      padding: 0.9cqw 1.6cqw;
      border: 0.2cqw solid #f3c4a8;
      border-radius: 1cqw;
      background: #fff6f0;
      color: #b8430a;
      font-size: 2.2cqw;
      font-weight: 600;
    }

    .cyber-ow-att img { width: 2.2cqw; height: auto; }

    .cyber-ow-send {
      position: absolute;
      right: 3cqw;
      top: 25.5cqw;
      padding: 1.2cqw 2.6cqw;
      border-radius: 1cqw;
      background: #0f5fbf;
      color: #fff;
      font-size: 2.4cqw;
      font-weight: 700;
    }

    .cyber-ow-ok {
      position: absolute;
      right: 3cqw;
      top: 33cqw;
      display: inline-flex;
      align-items: center;
      gap: 1cqw;
      padding: 0.9cqw 1.8cqw;
      border-radius: 3cqw;
      background: #e7f8ef;
      box-shadow: 0 0 0 0.2cqw #9fe0bd;
      color: #157a46;
      font-size: 2.2cqw;
      font-weight: 700;
      white-space: nowrap;
    }

    .cyber-ow-ok i {
      width: 1.4cqw;
      height: 1.4cqw;
      border-radius: 50%;
      background: #34c77b;
    }

    /* liaison chiffree portable -> Cesar (tirets qui avancent) */
    .cyber-se-wire {
      position: absolute;
      z-index: 1;
      left: var(--cyber-wire-x0);
      width: calc(var(--cyber-wire-x1) - var(--cyber-wire-x0));
      top: var(--cyber-wire-y);
      height: 2px;
      margin-top: -1px;
      background: repeating-linear-gradient(90deg, rgba(95, 200, 255, 0.75) 0 7px, transparent 7px 13px);
      box-shadow: 0 0 10px rgba(95, 200, 255, 0.35);
    }

    .cyber-env {
      position: absolute;
      z-index: 2;
      left: var(--cyber-wire-x1);
      top: var(--cyber-wire-y);
      display: grid;
      place-items: center;
      width: 7.4cqw;
      height: 7.4cqw;
      margin: -3.7cqw 0 0 -3.7cqw;
      border-radius: 1.8cqw;
      background: linear-gradient(160deg, #ff7a36, #e95b13);
      box-shadow: 0 0 2.6cqw rgba(233, 91, 19, 0.55);
      color: #fff;
      opacity: 0;
    }

    .cyber-env > .ic {
      width: 60%;
      height: 60%;
      stroke-width: 2;
    }

    .cyber-env b {
      position: absolute;
      right: -1.2cqw;
      bottom: -1.2cqw;
      display: grid;
      place-items: center;
      width: 3.6cqw;
      height: 3.6cqw;
      border-radius: 50%;
      background: #0b1631;
      box-shadow: 0 0 0 0.4cqw #e95b13;
    }

    .cyber-env b .ic {
      width: 64%;
      height: 64%;
      stroke-width: 2.4;
    }

    .cyber-cesar {
      position: absolute;
      z-index: 1;
      right: 12cqw;
      bottom: 16%;
      width: 12.5cqw;
      transition: transform 0.45s ease;
    }

    .cyber-cesar img {
      display: block;
      width: 100%;
      height: auto;
      filter: drop-shadow(0 0 1.6cqw rgba(60, 140, 255, 0.35));
    }

    .cyber-card:hover .cyber-cesar,
    .cyber-card:focus-visible .cyber-cesar { transform: translateY(-3%); }

    .cyber-cesar-led {
      position: absolute;
      left: 50%;
      top: 4%;
      width: 2.4cqw;
      height: 2.4cqw;
      margin-left: -1.2cqw;
      border-radius: 50%;
      background: #34c77b;
      box-shadow: 0 0 1.6cqw #34c77b;
    }

    .cyber-cesar-cap {
      position: absolute;
      left: 50%;
      top: calc(100% + 4px);
      display: flex;
      flex-direction: column;
      align-items: center;
      transform: translateX(-50%);
      color: rgba(206, 218, 240, 0.78);
      font-size: 0.56rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      line-height: 1.3;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .cyber-cesar-cap b {
      color: #fff;
      font-size: 0.72rem;
      letter-spacing: 0.04em;
      text-transform: none;
    }

    /* ----- Corps : marque du produit au-dessus du titre ----- */
    .cyber-brand {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 14px;
      min-height: 34px;
      margin: 0 0 14px;
    }

    .cyber-brand-mark {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #fff;
      font-size: 1.2rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }

    .cyber-brand-mark img {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      box-shadow: 0 6px 18px rgba(79, 155, 255, 0.25);
    }

    .cyber-se-logo {
      display: block;
      width: auto;
      height: 34px;
    }

    .cyber-brand-note {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding-left: 14px;
      border-left: 1px solid rgba(154, 171, 198, 0.35);
      color: var(--text-muted);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      line-height: 1.3;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .cyber-eset {
      display: block;
      width: auto;
      height: 15px;
    }

    /* ----- Liens secondaires sous les vignettes ----- */
    .cyber-more {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-self: start;
      gap: 6px 12px;
      margin-top: -6px;
      padding: 6px 4px;
      border-radius: 8px;
      color: var(--text-muted);
      font-size: 0.9rem;
      line-height: 1.35;
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .cyber-more-label {
      color: var(--ia-coral-soft);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .cyber-more-text {
      border-bottom: 1px solid rgba(232, 87, 74, 0.45);
      color: var(--text);
    }

    .cyber-more .ic {
      width: 16px;
      height: 16px;
      color: var(--accent-bright);
      transition: transform 0.2s ease;
    }

    .cyber-more:hover .cyber-more-text,
    .cyber-more:focus-visible .cyber-more-text { color: #fff; border-bottom-color: var(--accent-bright); }

    .cyber-more:hover .ic { transform: translateX(3px); }

    .cyber-more--ext:hover .ic { transform: translate(2px, -2px); }

    .cyber-more:focus { outline: none; }

    .cyber-more:focus-visible {
      outline: 2px solid var(--cyan);
      outline-offset: 2px;
    }

    /* une colonne : chaque lien suit sa vignette */
    .cyber-models > :nth-child(1) { order: 1; }
    .cyber-models > :nth-child(3) { order: 2; }
    .cyber-models > :nth-child(2) { order: 3; }
    .cyber-models > :nth-child(4) { order: 4; }

    @media (min-width: 640px) {
      .cyber-card { --cyber-edge: 26px; }

      .cyber-media {
        aspect-ratio: 657 / 314;
      }

      .cyber-mon { --cyber-mon-w: 65cqw; }

      .cyber-media--se {
        --cyber-wire-y: 61%;
        --cyber-wire-x0: 68.5%;
        --cyber-wire-x1: 78.5%;
      }

      .cyber-lap {
        width: 66cqw;
        left: 5cqw;
      }

      .cyber-cesar {
        right: 9cqw;
        bottom: 14%;
        width: 12.5cqw;
      }

      .cyber-env {
        width: 6cqw;
        height: 6cqw;
        margin: -3cqw 0 0 -3cqw;
        border-radius: 1.5cqw;
      }

      .cyber-env b {
        width: 3cqw;
        height: 3cqw;
      }

      .cyber-cesar-led {
        width: 2cqw;
        height: 2cqw;
        margin-left: -1cqw;
      }
    }

    /* telephone : la mention passe sous la marque, sans filet orphelin */
    @media (max-width: 639px) {
      .cyber-brand { gap: 10px; }

      .cyber-brand-note {
        flex-basis: 100%;
        padding-left: 0;
        border-left: 0;
      }
    }

    @media (max-width: 380px) {
      .cyber-media-tag { letter-spacing: 0.12em; }
      .cyber-brand-note { letter-spacing: 0.08em; }
    }

    @media (min-width: 900px) {
      .cyber-models > * { order: 0; }
      .cyber-models > :nth-child(1) { grid-area: 1 / 1; }
      .cyber-models > :nth-child(2) { grid-area: 1 / 2; }
      .cyber-models > :nth-child(3) { grid-area: 2 / 1; }
      .cyber-models > :nth-child(4) { grid-area: 2 / 2; }
    }

    /* ----- Animations (legeres, en boucle ; toujours actives, prefers-reduced-motion ignore) ----- */
    .cyber-db-live i { animation: cyber-pulse 1.6s ease-in-out infinite; }
    .cyber-db-bell i { animation: cyber-pulse 2.2s ease-in-out infinite; }

    .cyber-spk-line {
      stroke-dasharray: 1;
      animation: cyber-draw 7s ease-in-out infinite;
    }

    .cyber-bar b { animation: cyber-breathe 3.6s ease-in-out infinite alternate; }
    .cyber-bar:nth-child(3) b { animation-delay: -1.2s; }
    .cyber-bar:nth-child(4) b { animation-delay: -2.1s; }
    .cyber-bar:nth-child(5) b { animation-delay: -0.6s; }

    .cyber-scan { animation: cyber-scan 7s linear infinite; }
    .cyber-toast { animation: cyber-toast 7s ease infinite; }
    .cyber-kpi--al { animation: cyber-alert 7s ease infinite; }
    .cyber-pnl-h + .cyber-feed { animation: cyber-feed 7s ease infinite; }

    .cyber-rb--se { animation: cyber-ring 6s ease-out infinite; }
    .cyber-ow-send { animation: cyber-press 6s ease infinite; }
    .cyber-ow-ok { animation: cyber-ok 6s ease infinite; }
    .cyber-se-wire { animation: cyber-dash 1.1s linear infinite; }
    .cyber-env { animation: cyber-env 6s ease-in-out infinite; }
    .cyber-cesar-led { animation: cyber-led 6s ease infinite; }

    @keyframes cyber-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.35; transform: scale(0.7); }
    }

    @keyframes cyber-draw {
      0% { stroke-dashoffset: 1; }
      35%, 100% { stroke-dashoffset: 0; }
    }

    @keyframes cyber-breathe {
      from { transform: scaleX(0.94); }
      to { transform: scaleX(1); }
    }

    @keyframes cyber-scan {
      0%, 55% { opacity: 0; background-position: 0 120%; }
      58% { opacity: 1; }
      85% { opacity: 1; background-position: 0 -20%; }
      88%, 100% { opacity: 0; background-position: 0 -20%; }
    }

    @keyframes cyber-toast {
      0%, 30% { opacity: 0; transform: translateY(40%); }
      36%, 84% { opacity: 1; transform: none; }
      90%, 100% { opacity: 0; transform: translateY(40%); }
    }

    @keyframes cyber-alert {
      0%, 26%, 44%, 100% { box-shadow: 0 0 0 0.15cqw #dbe4f1, 0 0.5cqw 1.4cqw rgba(21, 35, 61, 0.06); }
      30%, 38% { box-shadow: 0 0 0 0.3cqw #ff5d5d, 0 0 2cqw rgba(255, 93, 93, 0.45); }
    }

    @keyframes cyber-feed {
      0%, 40% { background: transparent; }
      46%, 80% { background: rgba(79, 155, 255, 0.14); }
      88%, 100% { background: transparent; }
    }

    @keyframes cyber-ring {
      0%, 6% { box-shadow: 0 0 0 0 rgba(233, 91, 19, 0.55); }
      18% { box-shadow: 0 0 0 1.6cqw rgba(233, 91, 19, 0); }
      19%, 100% { box-shadow: 0 0 0 0 rgba(233, 91, 19, 0); }
    }

    @keyframes cyber-press {
      0%, 16%, 24%, 100% { transform: none; filter: none; }
      19% { transform: scale(0.92); filter: brightness(1.25); }
    }

    @keyframes cyber-ok {
      0%, 50% { opacity: 0; transform: translateY(30%); }
      56%, 92% { opacity: 1; transform: none; }
      97%, 100% { opacity: 0; transform: none; }
    }

    @keyframes cyber-dash {
      from { background-position: 0 0; }
      to { background-position: 13px 0; }
    }

    @keyframes cyber-env {
      0%, 18% { left: var(--cyber-wire-x0); opacity: 0; transform: scale(0.6); }
      23% { left: var(--cyber-wire-x0); opacity: 1; transform: scale(1); }
      46% { left: var(--cyber-wire-x1); opacity: 1; transform: scale(1); }
      52%, 100% { left: var(--cyber-wire-x1); opacity: 0; transform: scale(0.5); }
    }

    @keyframes cyber-led {
      0%, 46% { background: #4f9bff; box-shadow: 0 0 1cqw #4f9bff; }
      52%, 90% { background: #34c77b; box-shadow: 0 0 2.2cqw #34c77b; }
      96%, 100% { background: #4f9bff; box-shadow: 0 0 1cqw #4f9bff; }
    }
    /* @@IA:cyber:css:end@@ */

    /* @@IA:cyse:css:start@@ */
    /* ======================================================================
       Secure-Exchanges (cyse) : #cyber-secure-exchanges — fidele a la maquette client
       Fonds marine #001628 / #011c32 / #01203b ; bandes pleine largeur par border-image (outset),
       sans defilement horizontal. En-tete et pied de page communs injectes ailleurs.
       ====================================================================== */
    #cyse {
      --bg: #001628;
      --bg-alt: #011c32;
      --cyse-cyan: #4cc9f0;
      --cyse-cyan2: #8fdcff;
      --cyse-coral: #f2735e;
      --cyse-coral2: #ff8f7a;
      --cyse-line: rgba(52, 150, 235, 0.5);
      --cyse-card: linear-gradient(170deg, rgba(3, 36, 68, 0.96), rgba(1, 22, 42, 0.97));
      --cyse-ink: #15233d;
      --cyse-ink2: #5d6f8c;
      --cyse-wline: #dde5f0;
      --cyse-blue: #1557c0;
      --cyse-green: #18a058;
      --cyse-sec-gap: 56px;
      --cyse-gap: 44px;
      background:
        radial-gradient(48% 520px at 74% 360px, rgba(26, 112, 200, 0.4), transparent 72%),
        radial-gradient(36% 400px at 8% 140px, rgba(10, 74, 140, 0.2), transparent 70%),
        linear-gradient(180deg, #001628 0, #011a30 900px, #011c32 100%);
    }

    @media (min-width: 900px) {
      #cyse { --cyse-sec-gap: 72px; }
    }

    #cyse .cyse-nw { white-space: nowrap; }
    #cyse .cyse-cy { color: var(--cyse-cyan); }

    /* ---------- Barre du haut : retour + Automation (demandes client) ---------- */
    #cyse .cyse-top {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px 20px;
      margin: 0 0 22px;
    }

    #cyse .cyse-top .back-link { margin: 0; }

    #cyse .cyse-top .cyse-auto {
      gap: 10px;
      padding: 9px 18px 9px 16px;
      border: 1.5px solid rgba(232, 87, 74, 0.75);
      background: linear-gradient(135deg, rgba(192, 57, 43, 0.28), rgba(232, 87, 74, 0.12));
      font-size: 1rem;
      line-height: 1.15;
    }

    #cyse .cyse-auto .ic { width: 18px; height: 18px; color: var(--ia-coral-soft); }
    #cyse .cyse-auto .cyse-auto-arr { width: 16px; height: 16px; color: #fff; }
    #cyse .cyse-auto-txt { display: flex; flex-direction: column; align-items: flex-start; }
    #cyse .cyse-auto-l { font-size: 0.98rem; font-weight: 700; letter-spacing: 0.01em; }

    #cyse .cyse-auto-s {
      color: var(--ia-coral-soft);
      font-family: var(--fx-mono, ui-monospace, monospace);
      font-size: 0.62rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    #cyse .cyse-auto.cyse-off,
    #cyse .cyse-auto.cyse-off::before,
    #cyse .cyse-auto.cyse-off::after { animation-play-state: paused; }
    #cyse .cyse-auto:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

    /* ---------- Hero ---------- */
    #cyse .cyse-hero {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 36px;
      align-items: center;
      padding-bottom: 40px;
    }

    #cyse .cyse-hero-copy,
    #cyse .cyse-hero-visual { min-width: 0; }

    #cyse .cyse-eyebrow-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 18px;
      margin: 0 0 18px;
    }

    #cyse .cyse-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      color: var(--cyse-cyan2);
      font-size: 0.95rem;
      font-weight: 500;
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }

    #cyse .cyse-eyebrow::before {
      content: "";
      flex: none;
      width: 30px;
      height: 3px;
      border-radius: 2px;
      background: var(--cyse-coral);
    }

    #cyse .cyse-logo {
      display: block;
      width: auto;
      height: 26px;
      padding-left: 18px;
      border-left: 1px solid rgba(154, 186, 220, 0.35);
      opacity: 0.92;
    }

    #cyse .cyse-h1 {
      margin: 0 0 18px;
      color: #fff;
      font-size: clamp(1.95rem, 5.4vw, 3.05rem);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.015em;
    }

    #cyse .cyse-br { display: none; }

    #cyse .cyse-lead {
      max-width: 620px;
      margin: 0 0 26px;
      color: #e3ebf6;
      font-size: clamp(1rem, 1.6vw, 1.12rem);
      line-height: 1.6;
    }

    #cyse .cyse-keys {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px 22px;
      margin: 0 0 30px;
      padding: 0;
      list-style: none;
    }

    #cyse .cyse-keys li {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      color: #c9d6e8;
      font-size: 0.9rem;
      line-height: 1.4;
    }

    #cyse .cyse-keys .ic { width: 36px; height: 36px; color: var(--cyse-cyan); stroke-width: 1.4; }
    #cyse .cyse-keys strong { display: block; color: #fff; font-weight: 600; }

    #cyse .cyse-actions { display: flex; flex-wrap: wrap; gap: 14px 18px; }

    #cyse .cyse-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 12px 30px;
      border: 1.5px solid transparent;
      border-radius: 8px;
      font: inherit;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    #cyse .cyse-btn:hover { transform: translateY(-2px); }
    #cyse .cyse-btn:focus-visible { outline: 2px solid var(--cyse-cyan); outline-offset: 3px; }

    #cyse .cyse-btn--coral {
      min-width: 230px;
      background: var(--cyse-coral);
      color: #2a0d07;
      box-shadow: 0 8px 26px rgba(242, 115, 94, 0.3);
    }

    #cyse .cyse-btn--coral:hover { background: var(--cyse-coral2); }

    #cyse .cyse-btn--outline {
      min-width: 170px;
      border-color: rgba(220, 232, 248, 0.75);
      background: transparent;
      color: #fff;
    }

    #cyse .cyse-btn--outline:hover { background: rgba(255, 255, 255, 0.07); }

    /* visuel : portable + carte d'applications + note manuscrite */
    #cyse .cyse-hero-visual {
      position: relative;
      padding: 0 0 54px;
    }

    #cyse .cyse-laptop {
      position: relative;
      z-index: 1;
      width: 92%;
      margin-left: 8%;
      container-type: inline-size;
    }

    #cyse .cyse-laptop-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 40px rgba(0, 10, 30, 0.6)); }

    #cyse .cyse-lt-compose {
      position: absolute;
      left: 34.2%;
      top: 31%;
      width: 3.4%;
      display: flex;
      flex-direction: column;
      gap: 2.2cqw;
      color: #5d6f8c;
      font-size: 1.15cqw;
    }

    #cyse .cyse-lt-compose span { display: flex; gap: 4px; }
    #cyse .cyse-lt-compose b { font-weight: 600; }
    #cyse .cyse-lt-compose i { display: none; }

    #cyse .cyse-lt-modal {
      position: absolute;
      left: 37.9%;
      top: 30.1%;
      width: 47%;
      height: 50.9%;
      display: flex;
      flex-direction: column;
      padding: 2.4cqw 2.4cqw 2.2cqw;
      border-radius: 1cqw;
      background: #fff;
      color: var(--cyse-ink);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 3.5cqw rgba(76, 201, 240, 0.55), 0 2cqw 4cqw rgba(0, 20, 50, 0.45);
    }

    #cyse .cyse-lm-bar { display: flex; align-items: center; gap: 1.3cqw; font-size: 2.15cqw; font-weight: 600; }
    #cyse .cyse-lm-bar .ic { width: 2.9cqw; height: 2.9cqw; color: var(--cyse-blue); stroke-width: 2; }
    #cyse .cyse-lm-bar .cyse-lm-x { width: 2.2cqw; height: 2.2cqw; margin-left: auto; color: #4a5a72; }
    #cyse .cyse-lm-q { margin: 2.4cqw 0 2cqw; font-size: 1.95cqw; font-weight: 600; text-align: center; }

    #cyse .cyse-lm-tiles {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.4cqw;
    }

    #cyse .cyse-lm-tile {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.2cqw;
      padding: 1cqw;
      border: 1px solid var(--cyse-wline);
      border-radius: 0.8cqw;
      background: #fbfcfe;
      font-size: 1.6cqw;
      line-height: 1.3;
      text-align: center;
    }

    #cyse .cyse-lm-tile .ic { width: 3.6cqw; height: 3.6cqw; color: var(--cyse-blue); stroke-width: 1.8; }
    #cyse .cyse-lm-tile--pick { animation: cyse-pick 3.2s ease-in-out infinite; }

    #cyse .cyse-lm-cur {
      position: absolute;
      right: 14%;
      bottom: 10%;
      width: 3cqw !important;
      height: 3cqw !important;
      fill: #fff;
      stroke: #0b1f3a !important;
      stroke-width: 1.6 !important;
      animation: cyse-click 3.2s ease-in-out infinite;
    }

    /* Hero : demo en 4 etapes (data-cyse-hstep pose par fxSteps ; sans JS, la fenetre reste affichee et animee) */
    #cyse .cyse-lt-modal { transform-origin: 50% 60%; transition: opacity 0.45s ease, transform 0.45s ease; }
    #cyse .cyse-lm-q { transition: opacity 0.4s ease; }
    #cyse .cyse-laptop[data-cyse-hstep="0"] .cyse-lt-modal { opacity: 0; transform: translateY(2cqw) scale(0.94); }
    #cyse .cyse-laptop[data-cyse-hstep] .cyse-lm-tile--pick,
    #cyse .cyse-laptop[data-cyse-hstep] .cyse-lm-cur { animation: none; }
    #cyse .cyse-laptop[data-cyse-hstep] .cyse-lm-cur { opacity: 0; }
    #cyse .cyse-laptop[data-cyse-hstep="2"] .cyse-lm-tile--pick { animation: cyse-pick1 2.8s ease-in-out forwards; }
    #cyse .cyse-laptop[data-cyse-hstep="2"] .cyse-lm-cur { animation: cyse-click1 2.8s ease-in-out forwards; }
    #cyse .cyse-laptop[data-cyse-hstep="3"] .cyse-lm-q { opacity: 0.4; }

    #cyse .cyse-lm-done {
      position: absolute;
      left: 2.4cqw;
      right: 2.4cqw;
      top: 12.4cqw;
      bottom: 2.2cqw;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.6cqw;
      border: 1px solid #9fdcb6;
      border-radius: 0.8cqw;
      background: #f2fbf5;
      color: #165a36;
      font-size: 1.6cqw;
      line-height: 1.3;
      text-align: center;
      opacity: 0;
      transform: scale(0.96);
      transition: opacity 0.4s ease, transform 0.4s ease;
      pointer-events: none;
    }

    #cyse .cyse-lm-done .ic { width: 4.2cqw; height: 4.2cqw; color: #1f9d55; stroke-width: 2.2; }
    #cyse .cyse-lm-done strong { font-size: 1.95cqw; font-weight: 700; }
    #cyse .cyse-laptop[data-cyse-hstep="3"] .cyse-lm-done { opacity: 1; transform: none; }

    #cyse .cyse-hero-tl {
      position: relative;
      z-index: 3;
      margin: 14px 0 0 8%;
    }

    #cyse .cyse-applist {
      position: absolute;
      z-index: 0;
      left: 3%;
      top: 7%;
      width: 37%;
      margin: 0;
      padding: 0.9em 5.5em 0.9em 1em;
      list-style: none;
      border-radius: 14px;
      background: linear-gradient(160deg, #eef4fc, #d9e5f4);
      box-shadow: 0 0 0 1px rgba(150, 200, 255, 0.5), 0 0 30px rgba(76, 170, 255, 0.45);
      font-size: clamp(0.62rem, 1vw, 0.82rem);
    }

    #cyse .cyse-applist li {
      display: flex;
      align-items: center;
      gap: 0.7em;
      padding: 0.6em 0.2em;
      color: #15233d;
      font-weight: 500;
      line-height: 1.2;
    }

    #cyse .cyse-applist li + li { border-top: 1px solid rgba(21, 35, 61, 0.1); }
    #cyse .cyse-applist img { flex: none; width: 2em; height: 2em; object-fit: contain; }

    #cyse .cyse-note {
      position: absolute;
      right: -4px;
      bottom: 0;
      z-index: 2;
      max-width: 240px;
      margin: 0;
      color: #e8f1fb;
      font-family: "Segoe Print", "Bradley Hand", "Comic Neue", cursive;
      font-size: clamp(0.82rem, 1.25vw, 1rem);
      line-height: 1.45;
      text-align: right;
      transform: rotate(-11deg);
      transform-origin: right bottom;
    }

    #cyse .cyse-note-arrow {
      position: absolute;
      right: 7%;
      bottom: 64px;
      z-index: 2;
      width: 58px;
      height: 78px;
      fill: none;
      stroke: var(--cyse-cyan);
      stroke-width: 2;
      stroke-dasharray: 5 5;
      stroke-linecap: round;
    }

    #cyse .cyse-note-arrow path + path { stroke-dasharray: none; }

    @media (min-width: 640px) {
      #cyse .cyse-keys { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; }
    }

    @media (min-width: 1100px) {
      #cyse .cyse-hero { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 24px; padding-bottom: 46px; }
      #cyse .cyse-br { display: inline; }
      #cyse .cyse-h1 { font-size: min(3vw, 3.05rem); }
      #cyse .cyse-h1 span { white-space: nowrap; }
      #cyse .cyse-hero-visual { padding-bottom: 30px; }
      #cyse .cyse-note { right: -10px; bottom: -6px; }
      /* la note manuscrite occupe le coin bas droit */
      #cyse .cyse-hero-tl { width: 62%; }
    }

    @media (max-width: 639px) {
      #cyse .cyse-applist { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: auto; margin: 0 0 14px; padding: 0.4em 0.8em; font-size: 0.78rem; }
      #cyse .cyse-applist li + li { border-top: 0; }
      #cyse .cyse-laptop { width: 100%; margin-left: 0; }
      #cyse .cyse-hero-tl { margin-left: 0; }
      #cyse .cyse-hero-visual { padding-bottom: 70px; }
      #cyse .cyse-note { right: 0; max-width: 220px; }
      #cyse .cyse-note-arrow { display: none; }
      #cyse .cyse-btn { flex: 1 1 100%; }
    }

    /* ---------- Sections ---------- */
    #cyse .cyse-sec { position: relative; padding: calc(var(--cyse-sec-gap) * 0.55) 0 calc(var(--cyse-sec-gap) * 0.7); }

    #cyse .cyse-how {
      border-image: linear-gradient(180deg, #2a6aa6 0 1px, #0b416e 1px, #01233f 30px, #01203b 50%, #011c32 100%)
        fill 0 / 0 / 0 100vmax;
    }

    #cyse .cyse-h2 {
      margin: 0 0 6px;
      color: #fff;
      font-size: clamp(1.4rem, 3vw, 1.95rem);
      font-weight: 400;
      letter-spacing: 0.05em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    #cyse .cyse-h2--sm { font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 500; letter-spacing: 0.08em; margin-bottom: 22px; }
    #cyse .cyse-h2--xs { font-size: 1rem; font-weight: 600; letter-spacing: 0.12em; margin: 0; }

    #cyse .cyse-how-sub {
      margin: 0 0 30px;
      color: #e6eef8;
      font-size: clamp(1rem, 1.8vw, 1.28rem);
      line-height: 1.45;
    }

    #cyse .cyse-how-sub strong { color: #fff; font-weight: 600; }

    /* ---------- Grille des 9 cartes : serpentin 1-2-3 / 6-5-4 / 7(large)-8-9 ---------- */
    #cyse .cyse-steps {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--cyse-gap);
      max-width: 680px;
      margin: 0 auto;
    }

    #cyse .cyse-links {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    #cyse .cyse-links path.cyse-ln {
      fill: none;
      stroke: #3fd0ff;
      stroke-width: 3;
      stroke-dasharray: 2 7;
      stroke-linecap: round;
      filter: drop-shadow(0 0 4px rgba(63, 208, 255, 0.8));
      animation: cyse-flow 1.1s linear infinite;
    }

    #cyse .cyse-links marker path { fill: var(--cyse-coral2); }

    #cyse .cyse-dot {
      fill: #fff;
      stroke: #3fd0ff;
      stroke-width: 3;
      filter: drop-shadow(0 0 6px #3fd0ff);
    }

    #cyse .cyse-step {
      position: relative;
      z-index: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: 18px 18px 20px;
      border: 1px solid var(--cyse-line);
      border-radius: 14px;
      background: var(--cyse-card);
      box-shadow: inset 0 0 30px rgba(40, 140, 240, 0.08), 0 0 22px rgba(20, 110, 220, 0.16);
      transition: border-color 0.4s ease, box-shadow 0.4s ease;
    }

    #cyse .cyse-step.is-cur {
      border-color: rgba(76, 201, 240, 0.95);
      box-shadow: inset 0 0 30px rgba(40, 140, 240, 0.12), 0 0 28px rgba(63, 208, 255, 0.4);
    }

    #cyse .cyse-sh { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 16px; }

    #cyse .cyse-num {
      display: grid;
      place-items: center;
      flex: none;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #e9f2fc;
      color: #0b1f3a;
      font-size: 1.15rem;
      font-weight: 700;
      box-shadow: 0 0 14px rgba(120, 200, 255, 0.45);
    }

    #cyse .cyse-sh h3 { margin: 4px 0 6px; color: #fff; font-size: 1.12rem; font-weight: 600; line-height: 1.25; }
    #cyse .cyse-sh p { margin: 0; color: #c9d6e8; font-size: 0.9rem; line-height: 1.4; }

    #cyse .cyse-ui { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; font-size: 0.72rem; }

    #cyse .cyse-cap { margin: 14px 0 0; color: #dbe6f3; font-size: 0.86rem; line-height: 1.45; text-align: center; }
    #cyse .cyse-cap--l { text-align: left; }

    /* fenetres blanches (maquette) */
    #cyse .cyse-w {
      min-width: 0;
      border-radius: 6px;
      background: #fff;
      color: var(--cyse-ink);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 18px rgba(76, 170, 255, 0.35);
      overflow: hidden;
    }

    #cyse .cyse-w .ic { width: 14px; height: 14px; }

    #cyse .cyse-wbar {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 9px 12px;
      border-bottom: 1px solid var(--cyse-wline);
      font-size: 0.78rem;
      font-weight: 600;
    }

    #cyse .cyse-se-ic { color: var(--cyse-blue); stroke-width: 2.2 !important; }
    #cyse .cyse-x { margin-left: auto; color: #556580; }

    #cyse .cyse-ok {
      display: inline-grid;
      place-items: center;
      flex: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--cyse-green);
      color: #fff;
    }

    #cyse .cyse-ok .ic { width: 11px !important; height: 11px !important; stroke-width: 3; }

    #cyse .cyse-bblue {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      border-radius: 4px;
      background: var(--cyse-blue);
      color: #fff;
      font-weight: 600;
      white-space: nowrap;
    }

    #cyse .cyse-dots { margin-left: auto; color: #8796ad; letter-spacing: 1px; }

    /* 1 */
    #cyse .cyse-ui1 { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: 10px; align-items: center; }
    #cyse .cyse-apps { margin: 0; padding: 0; list-style: none; }
    #cyse .cyse-apps li { display: flex; align-items: center; gap: 8px; padding: 7px 0; color: #e8f0fa; font-size: 0.74rem; line-height: 1.2; }
    #cyse .cyse-apps img { flex: none; width: 24px; height: 24px; object-fit: contain; }
    #cyse .cyse-compose { display: flex; flex-direction: column; gap: 6px; padding: 9px; }
    #cyse .cyse-fld { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 4px; color: var(--cyse-ink2); }
    #cyse .cyse-fld b { font-weight: 500; }
    #cyse .cyse-fld span { padding: 4px 6px; border: 1px solid var(--cyse-wline); border-radius: 3px; color: var(--cyse-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #cyse .cyse-msg { display: flex; flex-direction: column; gap: 4px; padding: 7px; border: 1px solid var(--cyse-wline); border-radius: 3px; font-size: 0.68rem; line-height: 1.35; }
    #cyse .cyse-tb { display: flex; align-items: center; gap: 7px; padding-top: 2px; color: #6a7a92; }
    #cyse .cyse-tb .ic { width: 13px; height: 13px; }
    #cyse .cyse-tb-send { margin-left: auto; }

    /* 2 */
    #cyse .cyse-ui2 { align-items: center; }
    #cyse .cyse-modal { width: 100%; max-width: 330px; }
    #cyse .cyse-modal-q { display: block; margin: 12px 0 10px; font-size: 0.8rem; font-weight: 600; text-align: center; }
    #cyse .cyse-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 10px 12px; }

    #cyse .cyse-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 12px 6px;
      border: 1px solid var(--cyse-wline);
      border-radius: 5px;
      font-size: 0.7rem;
      line-height: 1.3;
      text-align: center;
    }

    #cyse .cyse-tile .ic { width: 24px; height: 24px; color: var(--cyse-blue); }
    #cyse .cyse-step.is-cur .cyse-tile--pick { border-color: #6aa9f0; background: #eef5ff; }

    /* 3 */
    #cyse .cyse-chain { display: flex; align-items: flex-start; justify-content: space-between; gap: 2px; }
    #cyse .cyse-dev { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; color: #fff; font-size: 0.72rem; line-height: 1.2; text-align: center; }
    #cyse .cyse-dev img { display: block; width: auto; height: 46px; max-width: 100%; object-fit: contain; }
    #cyse .cyse-dev--shield img { height: 54px; margin-top: -4px; }
    #cyse .cyse-dev span { max-width: 70px; }

    #cyse .cyse-ch-arr {
      position: relative;
      flex: 1 1 10px;
      min-width: 8px;
      height: 2px;
      margin-top: 22px;
      background: repeating-linear-gradient(90deg, #3fd0ff 0 3px, transparent 3px 6px);
    }

    #cyse .cyse-ch-arr::after {
      content: "";
      position: absolute;
      right: -2px;
      top: -4px;
      border: 5px solid transparent;
      border-left: 6px solid var(--cyse-coral2);
      border-right: 0;
    }

    /* 4 */
    #cyse .cyse-mail-from { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--cyse-wline); }
    #cyse .cyse-mail-from b,
    #cyse .cyse-back-from b { display: block; font-size: 0.76rem; font-weight: 500; }
    #cyse .cyse-mail-from b + span,
    #cyse .cyse-back-from b + span { color: var(--cyse-ink2); font-size: 0.66rem; }
    #cyse .cyse-av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #4a90e2; color: #fff; }
    #cyse .cyse-mail-in { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 11px 12px 13px; }
    #cyse .cyse-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.74rem; }
    #cyse .cyse-badge img { width: 12px; height: 14px; }
    #cyse .cyse-mail-t { font-size: 0.78rem; line-height: 1.4; }
    #cyse .cyse-bcoral { padding: 8px 18px; border-radius: 4px; background: var(--cyse-coral); color: #fff; font-size: 0.78rem; font-weight: 600; }

    /* 5 */
    #cyse .cyse-sign-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
    #cyse .cyse-sign-l,
    #cyse .cyse-sign-r { display: flex; flex-direction: column; gap: 7px; padding: 10px 10px 12px; }
    #cyse .cyse-sign-r { border-left: 1px solid var(--cyse-wline); }
    #cyse .cyse-sign-l b,
    #cyse .cyse-sign-r b { font-size: 0.72rem; font-weight: 600; }
    #cyse .cyse-pad { display: block; padding: 6px; border: 1px solid var(--cyse-wline); border-radius: 4px; background: #f7f9fc; }
    #cyse .cyse-pad svg { display: block; width: 100%; height: 40px; fill: none; stroke: #1b2a44; stroke-width: 2; stroke-linecap: round; }
    #cyse .cyse-sg { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 7px; border: 1px solid var(--cyse-wline); border-radius: 4px; font-size: 0.68rem; }
    #cyse .cyse-sg em { color: #8a97ab; font-size: 0.6rem; font-style: normal; white-space: nowrap; }

    /* 6 */
    #cyse .cyse-back { display: grid; grid-template-columns: 64px minmax(0, 1fr); }
    #cyse .cyse-back-ic { display: flex; justify-content: center; padding-top: 14px; border-right: 1px solid var(--cyse-wline); }
    #cyse .cyse-back-ic img { width: 38px; height: 38px; }
    #cyse .cyse-back-in { display: flex; flex-direction: column; gap: 6px; padding: 11px 12px 13px; min-width: 0; }
    #cyse .cyse-back-from { display: flex; align-items: flex-start; margin-bottom: 6px; }
    #cyse .cyse-back-t { font-size: 0.8rem; }
    #cyse .cyse-back-p { font-size: 0.74rem; }
    #cyse .cyse-file { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 7px 9px; border: 1px solid var(--cyse-wline); border-radius: 4px; }
    #cyse .cyse-file > .ic { width: 18px; height: 18px; color: var(--cyse-blue); }
    #cyse .cyse-file b { display: block; font-size: 0.72rem; font-weight: 500; }
    #cyse .cyse-file b + span { color: var(--cyse-ink2); font-size: 0.64rem; }
    #cyse .cyse-file .cyse-ok { margin-left: auto; }

    /* 7 (large) */
    #cyse .cyse-c7 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
    #cyse .cyse-c7-main { min-width: 0; }
    #cyse .cyse-ol { font-size: 0.72rem; }
    #cyse .cyse-ol-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #f3f6fa; color: #3b4b63; font-size: 0.66rem; }
    #cyse .cyse-ol-bar img { width: 14px; height: 14px; }
    #cyse .cyse-ol-bar i { width: 9px; height: 1px; margin-left: auto; background: #9aa7ba; }
    #cyse .cyse-ol-bar i + i { margin-left: 8px; height: 8px; background: none; border: 1px solid #9aa7ba; }
    #cyse .cyse-ol-bar .ic { width: 10px; height: 10px; margin-left: 8px; color: #6a7a92; }
    #cyse .cyse-ol-tabs { display: flex; gap: 16px; padding: 8px 12px 0; border-bottom: 1px solid var(--cyse-wline); color: #6a7a92; font-size: 0.76rem; }
    #cyse .cyse-ol-tabs span { padding-bottom: 6px; }
    #cyse .cyse-ol-tabs .is-on { border-bottom: 2px solid var(--cyse-blue); color: var(--cyse-blue); font-weight: 600; }
    #cyse .cyse-ol-rib { display: flex; justify-content: space-around; gap: 6px; padding: 10px 8px; border-bottom: 1px solid var(--cyse-wline); }
    #cyse .cyse-ol-b { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 64px; padding: 8px 6px; border: 1px solid transparent; border-radius: 5px; color: #3b4b63; font-size: 0.66rem; text-align: center; }
    #cyse .cyse-ol-b .ic { width: 22px; height: 22px; color: #4a7fc4; }
    #cyse .cyse-ol-b.is-on { border-color: #9cc4f2; background: #eef5ff; color: var(--cyse-blue); font-weight: 600; box-shadow: 0 0 10px rgba(31, 111, 224, 0.2); }
    #cyse .cyse-ol-ph { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 12px 12px 14px; background: #f8fafc; }
    #cyse .cyse-ol-ph i { height: 7px; border-radius: 4px; background: #dfe6ef; }
    #cyse .cyse-ol-ph i:nth-child(1) { width: 22%; }
    #cyse .cyse-ol-ph i:nth-child(2) { width: 44%; }
    #cyse .cyse-ol-ph i:nth-child(3) { width: 54%; }

    #cyse .cyse-c7-arr { display: none; }
    #cyse .cyse-c7-srv { display: flex; justify-content: center; }
    #cyse .cyse-c7-srv img { display: block; width: auto; height: 190px; filter: drop-shadow(0 0 18px rgba(63, 160, 255, 0.35)); }

    #cyse .cyse-c7-k { margin: 0 0 12px; color: #e6eef8; font-size: 1.15rem; line-height: 1.15; }
    #cyse .cyse-c7-k strong { display: block; color: #fff; font-size: 1.9rem; font-weight: 700; }
    #cyse .cyse-c7-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
    #cyse .cyse-c7-list li { display: flex; align-items: flex-start; gap: 8px; color: #e6eef8; font-size: 0.9rem; line-height: 1.35; }
    #cyse .cyse-c7-list .ic { width: 17px; height: 17px; margin-top: 1px; padding: 2px; border: 1.5px solid var(--cyse-cyan); border-radius: 50%; color: var(--cyse-cyan); stroke-width: 2.6; }

    #cyse .cyse-price {
      display: inline-flex;
      flex-direction: column;
      margin: 0;
      padding: 10px 18px 12px;
      border: 1.5px solid rgba(230, 240, 252, 0.85);
      border-radius: 12px;
      background: rgba(0, 10, 22, 0.6);
      color: #fff;
      font-size: 0.86rem;
      line-height: 1.25;
    }

    #cyse .cyse-price strong { font-size: 2.1rem; font-weight: 700; line-height: 1.05; white-space: nowrap; }

    /* 8 */
    #cyse .cyse-vault { padding-bottom: 12px; }
    #cyse .cyse-vt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 6px 12px; border-bottom: 1px solid #edf1f6; font-size: 0.72rem; }
    #cyse .cyse-vt > span { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--cyse-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #cyse .cyse-vt > span .ic { flex: none; color: #4a5a72; }
    #cyse .cyse-vt em { color: #d6453a; font-style: normal; font-weight: 500; }
    #cyse .cyse-vt--h { background: #f7f9fc; font-weight: 600; }
    #cyse .cyse-vt--h > span { color: var(--cyse-ink); }
    #cyse .cyse-getback { display: flex; margin: 12px 12px 0; }

    /* 9 */
    #cyse .cyse-ui9 { gap: 10px; justify-content: flex-start; }
    #cyse .cyse-smsn { display: flex; align-items: center; gap: 10px; padding: 11px 12px; }
    #cyse .cyse-smsn > span:last-child { display: flex; flex-direction: column; min-width: 0; font-size: 0.66rem; }
    #cyse .cyse-smsn b { font-size: 1.05rem; letter-spacing: 0.04em; }
    #cyse .cyse-smsn-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #dff3e8; color: var(--cyse-green); }
    #cyse .cyse-code { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; font-size: 0.7rem; }
    #cyse .cyse-code-row { display: flex; gap: 6px; }
    #cyse .cyse-code-in { flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid var(--cyse-wline); border-radius: 4px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; }
    #cyse .cyse-code-row .cyse-bblue { padding: 7px 9px; }

    /* grille bureau : 1-2-3 / 6-5-4 / 7(large)-8-9 */
    @media (min-width: 1100px) {
      #cyse .cyse-steps {
        grid-template-columns: 33fr 21fr 12fr 13fr 21fr;
        max-width: none;
      }

      #cyse .cyse-step[data-step="1"] { grid-area: 1 / 1 / 2 / 2; }
      #cyse .cyse-step[data-step="2"] { grid-area: 1 / 2 / 2 / 4; }
      #cyse .cyse-step[data-step="3"] { grid-area: 1 / 4 / 2 / 6; }
      #cyse .cyse-step[data-step="4"] { grid-area: 2 / 4 / 3 / 6; }
      #cyse .cyse-step[data-step="5"] { grid-area: 2 / 2 / 3 / 4; }
      #cyse .cyse-step[data-step="6"] { grid-area: 2 / 1 / 3 / 2; }
      #cyse .cyse-step[data-step="7"] { grid-area: 3 / 1 / 4 / 3; }
      #cyse .cyse-step[data-step="8"] { grid-area: 3 / 3 / 4 / 5; }
      #cyse .cyse-step[data-step="9"] { grid-area: 3 / 5 / 4 / 6; }

      #cyse .cyse-c7 {
        grid-template-columns: minmax(0, 1.2fr) 30px minmax(0, 0.5fr) minmax(0, 0.95fr);
        gap: 12px;
        align-items: center;
        height: 100%;
      }

      #cyse .cyse-c7-arr {
        display: block;
        position: relative;
        height: 2px;
        background: repeating-linear-gradient(90deg, #3fd0ff 0 3px, transparent 3px 6px);
      }

      #cyse .cyse-c7-arr::after {
        content: "";
        position: absolute;
        right: -2px;
        top: -5px;
        border: 6px solid transparent;
        border-left: 8px solid var(--cyse-coral2);
        border-right: 0;
      }

      #cyse .cyse-c7-srv img { height: auto; width: 100%; max-height: 250px; object-fit: contain; }
      #cyse .cyse-ui9 { justify-content: center; }
    }

    @media (min-width: 1100px) and (max-width: 1320px) {
      #cyse .cyse-step { padding: 16px 14px 18px; }
      #cyse .cyse-ui1 { grid-template-columns: minmax(0, 1fr); }
      #cyse .cyse-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
      #cyse .cyse-apps li { padding: 3px 0; }
      #cyse .cyse-c7-k strong { font-size: 1.6rem; }
      #cyse .cyse-c7-list li { font-size: 0.82rem; }
      #cyse .cyse-dev img { height: 36px; }
      #cyse .cyse-dev--shield img { height: 42px; }
      #cyse .cyse-ch-arr { margin-top: 17px; }
    }

    @media (max-width: 1099px) {
      #cyse .cyse-c7 { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
      #cyse .cyse-c7-main { grid-column: 1 / -1; }
      #cyse .cyse-c7-srv img { height: 170px; }
    }

    @media (max-width: 479px) {
      #cyse .cyse-step { padding: 16px 12px 18px; }
      #cyse .cyse-ui1 { grid-template-columns: minmax(0, 1fr); }
      #cyse .cyse-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
      #cyse .cyse-apps li { padding: 3px 0; }
      #cyse .cyse-dev img { height: 32px; }
      #cyse .cyse-dev--shield img { height: 38px; }
      #cyse .cyse-ch-arr { margin-top: 15px; }
      #cyse .cyse-dev { font-size: 0.64rem; }
      #cyse .cyse-sign-grid { grid-template-columns: minmax(0, 1fr); }
      #cyse .cyse-sign-r { border-left: 0; border-top: 1px solid var(--cyse-wline); }
      #cyse .cyse-c7 { grid-template-columns: minmax(0, 1fr); }
      #cyse .cyse-c7-srv img { height: 150px; }
      #cyse .cyse-ol-tabs { gap: 10px; font-size: 0.68rem; }
      #cyse .cyse-ol-b { min-width: 0; }
    }

    /* ---------- Pourquoi choisir ---------- */
    #cyse .cyse-why {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 28px;
      align-items: center;
      border-image: linear-gradient(180deg, #2a6aa6 0 1px, #0a3660 1px, #001628 28px, #001123 60%, #001325 100%)
        fill 0 / 0 / 0 100vmax;
    }

    #cyse .cyse-points {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 16px 34px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #cyse .cyse-points li { display: flex; align-items: center; gap: 16px; color: #eef3fa; font-size: 0.98rem; line-height: 1.4; }

    #cyse .cyse-pt-ic {
      display: grid;
      place-items: center;
      flex: none;
      width: 46px;
      height: 46px;
      border: 1.5px solid rgba(76, 201, 240, 0.75);
      border-radius: 50%;
      background: rgba(20, 110, 200, 0.12);
      color: var(--cyse-cyan2);
      box-shadow: 0 0 12px rgba(76, 201, 240, 0.25);
    }

    #cyse .cyse-pt-ic .ic { width: 22px; height: 22px; }

    #cyse .cyse-quote {
      margin: 0;
      padding: 30px 32px 26px;
      border: 1px solid var(--cyse-line);
      border-radius: 16px;
      background: linear-gradient(160deg, rgba(4, 44, 84, 0.9), rgba(1, 24, 46, 0.92));
      box-shadow: 0 0 26px rgba(20, 110, 220, 0.2);
    }

    #cyse .cyse-quote blockquote { margin: 0; }
    #cyse .cyse-quote p { margin: 0; color: #fff; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.5; }

    #cyse .cyse-quote figcaption {
      margin-top: 16px;
      color: #c9d6e8;
      font-size: 0.95rem;
    }

    #cyse .cyse-quote figcaption::after {
      content: "";
      display: block;
      width: 46px;
      height: 4px;
      margin-top: 18px;
      border-radius: 2px;
      background: var(--cyse-coral);
    }

    @media (min-width: 700px) {
      #cyse .cyse-points { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(4, auto); }
    }

    @media (min-width: 1100px) {
      #cyse .cyse-why { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; }
    }

    /* ---------- Pour qui ? (compact) ---------- */
    #cyse .cyse-who {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px 22px;
      padding: 6px 0 calc(var(--cyse-sec-gap) * 0.5);
      border-image: linear-gradient(180deg, #001325, #001628) fill 0 / 0 / 0 100vmax;
    }

    #cyse .cyse-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

    #cyse .cyse-chips li {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border: 1px solid var(--cyse-line);
      border-radius: 999px;
      background: rgba(3, 36, 68, 0.7);
      color: #e6eef8;
      font-size: 0.88rem;
      line-height: 1.3;
    }

    #cyse .cyse-chips .ic { width: 17px; height: 17px; color: var(--cyse-cyan); }

    /* ---------- Animations ---------- */
    @keyframes cyse-flow { to { stroke-dashoffset: -18; } }

    @keyframes cyse-pick {
      0%, 35%, 100% { border-color: var(--cyse-wline); background: #fbfcfe; box-shadow: none; }
      50%, 80% { border-color: #6aa9f0; background: #eef5ff; box-shadow: 0 0 0 2px rgba(31, 111, 224, 0.18); }
    }

    @keyframes cyse-pick1 {
      0%, 40% { border-color: var(--cyse-wline); background: #fbfcfe; box-shadow: none; }
      60%, 100% { border-color: #6aa9f0; background: #eef5ff; box-shadow: 0 0 0 2px rgba(31, 111, 224, 0.18); }
    }

    @keyframes cyse-click1 {
      0% { opacity: 0; transform: translate(60%, 60%); }
      35% { opacity: 1; transform: translate(0, 0); }
      48% { transform: scale(0.82); }
      58%, 100% { opacity: 1; transform: scale(1); }
    }

    @keyframes cyse-click {
      0%, 30% { opacity: 0; transform: translate(40%, 40%); }
      45% { opacity: 1; transform: translate(0, 0); }
      52% { transform: scale(0.82); }
      58%, 82% { opacity: 1; transform: scale(1); }
      95%, 100% { opacity: 0; }
    }
    /* FAQ */
    #cyse .cyse-faq { margin: 8px 0 48px; --faq-bg: rgba(3, 36, 68, 0.9); }
    #cyse .cyse-faq .faq-a a { color: var(--cyse-cyan); }
    /* @@IA:cyse:css:end@@ */

    /* @@IA:cyd7:css:start@@ */
    /* ======================================================================
       HDCE Sentinel (cyd7) : #cyber-hdce-sentinel
       ====================================================================== */
    #cyd7 {
        --cyd7-bg: #0d1937;
        --cyd7-bg-cur: #102446;
        --cyd7-win: #f5f8fd;
        --cyd7-ink: #15233d;
        --cyd7-ink2: #5d6f8c;
        --cyd7-wline: #dbe4f1;
        --cyd7-ghost: #0b1631;
        --cyd7-ui-fs: 0.7rem;
        --cyd7-d7: #4f9bff;
        --cyd7-eset: #2bb5a0;
        --cyd7-rmm: #e0a73a;
        --cyd7-ok: #34c77b;
        --cyd7-warn: #f5c84b;
        --cyd7-bad: #ff5d5d;
        --cyd7-maint: #5fc8ff;
        --cyd7-blue: #1f6fe0;
        --cyd7-teal-t: #9be0d5;
        --fx-k-secure: #2bb5a0;
        --fx-k-control: #e0a73a;
        --fx-k-event: #f28cb8;
    }

    #cyd7 .cyd7-prod--fleet { --fx-accent: var(--cyd7-d7); }
    #cyd7 .cyd7-prod--eset { --fx-accent: var(--cyd7-eset); }
    #cyd7 .cyd7-prod--rmm { --fx-accent: var(--cyd7-rmm); }

    /* Variantes de scenario (serpentin) : thr = menace, mnt = maintenance, rev = reversion ; nX = tous sauf X */
    #cyd7 .cyd7-flow[data-cyd7-scn="thr"] :is(.cyd7-v-mnt, .cyd7-v-rev, .cyd7-v-nt),
    #cyd7 .cyd7-flow[data-cyd7-scn="mnt"] :is(.cyd7-v-thr, .cyd7-v-rev, .cyd7-v-nm),
    #cyd7 .cyd7-flow[data-cyd7-scn="rev"] :is(.cyd7-v-thr, .cyd7-v-mnt, .cyd7-v-nr) { display: none !important; }

    #cyd7 .cyd7-sample {
        margin: 8px 2px 0;
        color: rgba(154, 171, 198, 0.75);
        font-family: var(--fx-mono);
        font-size: 0.64rem;
        letter-spacing: 0.06em;
        text-align: right;
    }

    #cyd7 .cyd7-c-ok { color: #1f9d5c; }
    #cyd7 .cyd7-c-bad { color: #d6453a; }
    #cyd7 .cyd7-c-warn { color: #c77c06; }

    /* ---------- Barre du haut : retour + Maintenances par IA ---------- */
    #cyd7 .cyd7-top {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px 20px;
        margin: 0 0 26px;
    }

    #cyd7 .cyd7-top .back-link { margin: 0; }

    #cyd7 .cyd7-top .cyd7-ai-btn {
        gap: 10px;
        padding: 9px 18px 9px 16px;
        border: 1.5px solid rgba(232, 87, 74, 0.75);
        background: linear-gradient(135deg, rgba(192, 57, 43, 0.28), rgba(232, 87, 74, 0.12));
        font-size: 1rem;
        line-height: 1.15;
    }

    #cyd7 .cyd7-ai-btn .ic { width: 18px; height: 18px; color: var(--ia-coral-soft); }
    #cyd7 .cyd7-ai-btn .cyd7-ai-arr { width: 16px; height: 16px; color: #fff; }
    #cyd7 .cyd7-ai-txt { display: flex; flex-direction: column; align-items: flex-start; }
    #cyd7 .cyd7-ai-l { font-size: 0.98rem; font-weight: 700; letter-spacing: 0.01em; }

    #cyd7 .cyd7-ai-s {
        color: var(--ia-coral-soft);
        font-family: var(--fx-mono);
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    #cyd7 .cyd7-ai-btn.cyd7-off,
    #cyd7 .cyd7-ai-btn.cyd7-off::before,
    #cyd7 .cyd7-ai-btn.cyd7-off::after { animation-play-state: paused; }

    #cyd7 .cyd7-ai-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

    /* ---------- Hero : texte ---------- */
    #cyd7 .cyd7-hero { margin-bottom: 0; }

    #cyd7 .cyd7-brand { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
    #cyd7 .cyd7-brand-logo { display: inline-flex; align-items: center; gap: 10px; }
    #cyd7 .cyd7-brand-logo img { display: block; width: 46px; height: 46px; border-radius: 10px; box-shadow: 0 6px 20px rgba(79, 155, 255, 0.25); }
    #cyd7 .cyd7-brand-name { color: #fff; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }

    #cyd7 .cyd7-brand-note {
        padding-left: 14px;
        border-left: 1px solid rgba(154, 171, 198, 0.4);
        color: var(--text-muted);
        font-size: 0.86rem;
        font-variant-caps: small-caps;
        letter-spacing: 0.04em;
        line-height: 1.3;
    }

    #cyd7 .cyd7-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 0;
        border: 0;
        background: none;
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        text-transform: none;
    }

    #cyd7 .cyd7-eyebrow::before {
        content: "";
        flex: none;
        width: 26px;
        height: 2px;
        border-radius: 2px;
        background: var(--accent-bright);
    }

    #cyd7 .cyd7-h1-sub { display: block; margin-top: 0.12em; font-size: 0.8em; line-height: 1.12; }
    #cyd7 .cyd7-hero .ia-lead strong { color: #fff; }

    #cyd7 .cyd7-keys {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 14px;
        margin: 0 0 26px;
        padding: 0;
        list-style: none;
    }

    #cyd7 .cyd7-keys li { display: flex; align-items: center; gap: 12px; min-width: 0; }

    #cyd7 .cyd7-key-ic,
    #cyd7 .cyd7-pt-ic {
        display: grid;
        place-items: center;
        flex: none;
        width: 40px;
        height: 40px;
        border: 1.5px solid rgba(232, 87, 74, 0.65);
        border-radius: 50%;
        background: rgba(192, 57, 43, 0.1);
        color: var(--accent-bright);
    }

    #cyd7 .cyd7-key-ic .ic { width: 19px; height: 19px; }
    #cyd7 .cyd7-keys li > span { min-width: 0; }
    #cyd7 .cyd7-keys strong { display: block; color: #fff; font-size: 0.92rem; line-height: 1.25; }
    #cyd7 .cyd7-keys strong + span { display: block; color: var(--text-muted); font-size: 0.86rem; line-height: 1.3; }

    #cyd7 .cyd7-note {
        position: relative;
        display: flex;
        align-items: flex-end;
        gap: 6px;
        max-width: 360px;
        margin: 26px 0 0 4px;
        color: var(--ia-coral-soft);
        font-family: "Segoe Print", "Bradley Hand", "Comic Neue", cursive;
        font-size: 1.02rem;
        line-height: 1.35;
        transform: rotate(-3deg);
        transform-origin: left center;
    }

    #cyd7 .cyd7-note-arrow {
        flex: none;
        width: 70px;
        height: 52px;
        fill: none;
        stroke: var(--ia-coral-soft);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        overflow: visible;
    }

    #cyd7 .cyd7-note-arrow path:first-child { stroke-dasharray: 5 6; }

    @media (max-width: 1099px) {
        #cyd7 .cyd7-note-arrow { width: 34px; height: 64px; transform: scaleY(-1); }
    }

    /* ---------- Hero : moniteur et tableau de bord vivant ---------- */
    #cyd7 .cyd7-hero-fx { gap: 0; }

    #cyd7 .cyd7-hero-stage {
        aspect-ratio: 760 / 486;
        container-type: inline-size;
        font-size: clamp(8.5px, 1.36cqw, 11px);
        line-height: 1.3;
    }

    #cyd7 .cyd7-hero-stage::after {
        content: "";
        position: absolute;
        left: 18%;
        right: 2%;
        top: 82%;
        height: 9%;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(79, 155, 255, 0.16), transparent);
        pointer-events: none;
    }

    #cyd7 .cyd7-mon { position: absolute; left: 7%; top: 0; width: 93%; aspect-ratio: 1512 / 884; }
    #cyd7 .cyd7-mon-img { display: block; width: 100%; height: 100%; }

    /* Texte du tableau de bord : tailles entieres par palier (conteneur = scene du hero) et graisses 350 / 600.
       Segoe UI (Windows) affiche un espace parasite apres le « m » a certaines tailles en pixels physiques
       (400 : 10 et 12 px a 200 %, 11,5 px a 125 % ; 600 : 11 px a 200 %). Le Semilight (350) est net de 9 a 13 px
       a 100, 125, 150 et 200 % : tout le texte qui contient un « m » est en 350, le 600 est reserve aux chiffres et libelles sans « m ». */
    /* Le tableau de bord se met a l'echelle d'un seul bloc : les tailles suivent la largeur de la scene
       (reference 797 px, la scene a 1440 px) et sont arrondies vers le bas au pixel entier ; les espacements sont en em. */
    #cyd7 .cyd7-scr,
    #cyd7 .cyd7-hero-fx .cyd7-h-agent {
        --hx-u: clamp(0.8px, calc(100cqw / 790), 1.06px);
        --hx-xs: max(9px, calc(10 * var(--hx-u)));
        --hx-s: max(9px, calc(10 * var(--hx-u)));
        --hx-b: calc(11 * var(--hx-u));
        --hx-m: calc(12 * var(--hx-u));
        --hx-n: calc(17 * var(--hx-u));
        --hx-l: calc(20 * var(--hx-u));
        --hx-ag: calc(13 * var(--hx-u));
        font-weight: 350;
    }

    @supports (width: round(down, 10.5px, 1px)) {
        #cyd7 .cyd7-scr,
        #cyd7 .cyd7-hero-fx .cyd7-h-agent {
            --hx-xs: max(9px, round(down, calc(10 * var(--hx-u)), 1px));
            --hx-s: max(9px, round(down, calc(10 * var(--hx-u)), 1px));
            --hx-b: round(down, calc(11 * var(--hx-u)), 1px);
            --hx-m: round(down, calc(12 * var(--hx-u)), 1px);
            --hx-n: round(down, calc(17 * var(--hx-u)), 1px);
            --hx-l: round(down, calc(20 * var(--hx-u)), 1px);
            --hx-ag: round(down, calc(13 * var(--hx-u)), 1px);
        }
    }

    #cyd7 .cyd7-scr b,
    #cyd7 .cyd7-scr strong,
    #cyd7 .cyd7-h-agent strong { font-weight: 600; }

    #cyd7 .cyd7-scr {
        position: absolute;
        left: 2.778%;
        top: 4.751%;
        width: 83.995%;
        height: 74.661%;
        display: grid;
        grid-template-columns: 19% minmax(0, 1fr);
        grid-template-rows: 2.4em minmax(0, 1fr);
        overflow: hidden;
        border-radius: 0.35em;
        background: #edf2f9;
        color: #15233d;
        font-size: var(--hx-b);
        line-height: 1.25;
    }

    #cyd7 .cyd7-scr .ic { width: 1.25em; height: 1.25em; flex: none; }

    #cyd7 .cyd7-db-top {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 0.9em;
        min-width: 0;
        padding: 0 0.9em;
        background: #0b1733;
        color: #fff;
    }

    #cyd7 .cyd7-db-brand { display: inline-flex; align-items: center; gap: 0.45em; margin-right: auto; font-size: var(--hx-m); font-weight: 600; white-space: nowrap; }
    #cyd7 .cyd7-db-brand img { width: 1.5em; height: 1.5em; border-radius: 0.3em; }
    #cyd7 .cyd7-db-org { font-weight: 600; letter-spacing: 0.06em; }

    #cyd7 .cyd7-db-sel {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        padding: 0.25em 0.6em;
        border: 1px solid rgba(160, 190, 240, 0.3);
        border-radius: 0.35em;
        background: rgba(255, 255, 255, 0.06);
        color: #cfdcf0;
        white-space: nowrap;
    }

    #cyd7 .cyd7-db-sel .ic { width: 1em; height: 1em; }
    #cyd7 .cyd7-db-bell { position: relative; display: inline-flex; color: #cfdcf0; }

    #cyd7 .cyd7-db-bell i {
        position: absolute;
        top: -0.15em;
        right: -0.2em;
        width: 0.55em;
        height: 0.55em;
        border-radius: 50%;
        background: #ff5d5d;
        box-shadow: 0 0 0 2px #0b1733;
        opacity: 0;
    }

    #cyd7 .cyd7-db-av {
        display: grid;
        place-items: center;
        width: 1.9em;
        height: 1.9em;
        border-radius: 50%;
        background: linear-gradient(135deg, #7a5cff, #4f9bff);
        font-size: var(--hx-s);
        font-weight: 600;
    }

    #cyd7 .cyd7-db-side {
        display: flex;
        flex-direction: column;
        gap: 0.15em;
        margin: 0;
        padding: 0.7em 0.4em;
        list-style: none;
        background: linear-gradient(180deg, #0e1d3e, #0a1630);
        color: #b9c8e2;
        font-size: var(--hx-s);
    }

    #cyd7 .cyd7-db-side li {
        display: flex;
        align-items: center;
        gap: 0.5em;
        min-width: 0;
        padding: 0.42em 0.5em;
        border-radius: 0.4em;
        white-space: nowrap;
    }

    #cyd7 .cyd7-db-side li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    #cyd7 .cyd7-db-side small { display: block; color: #7f93b6; font-size: var(--hx-xs); }
    #cyd7 .cyd7-db-side li.cyd7-is-on { background: #1f6fe0; color: #fff; font-weight: 600; }

    #cyd7 .cyd7-db-badge {
        display: inline-block;
        margin-left: auto;
        padding: 0 0.45em;
        border-radius: 999px;
        background: #d6453a;
        color: #fff;
        font-size: var(--hx-s);
        font-weight: 600;
        line-height: 1.5;
    }

    #cyd7 .cyd7-db-main {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "h h" "k k" "dev thr" "feed hea";
        gap: 0.55em;
        min-width: 0;
        min-height: 0;
        padding: 0.6em 0.7em 0.7em;
    }

    #cyd7 .cyd7-db-h { grid-area: h; display: flex; align-items: center; justify-content: space-between; font-size: var(--hx-m); }
    /* « Vue d’ensemble » contient un « m » : graisse 350 (le 600 montre l’espace parasite a 11 px x 2) */
    #cyd7 .cyd7-db-h b { color: #0b1733; font-weight: 350; }

    #cyd7 .cyd7-live {
        display: inline-flex;
        align-items: center;
        gap: 0.4em;
        color: #1f9d5c;
        font-size: var(--hx-s, 0.8em);
        font-weight: 600;
    }

    #cyd7 .cyd7-live i { width: 0.6em; height: 0.6em; border-radius: 50%; background: #34c77b; box-shadow: 0 0 0 0.2em rgba(52, 199, 123, 0.2); }

    #cyd7 .cyd7-kpis { grid-area: k; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55em; }

    #cyd7 .cyd7-kpi,
    #cyd7 .cyd7-pnl {
        position: relative;
        min-width: 0;
        min-height: 0;
        border: 1px solid #dde6f2;
        border-radius: 0.55em;
        background: #fff;
        box-shadow: 0 1px 2px rgba(20, 40, 80, 0.06);
    }

    #cyd7 .cyd7-hero-fx .fx-node {
        z-index: 2;
        padding: 0;
        border: 1px solid #dde6f2;
        background: #fff;
        color: #15233d;
        box-shadow: 0 1px 2px rgba(20, 40, 80, 0.06);
        scale: none !important;
    }

    #cyd7 .cyd7-hero-fx .cyd7-scr .fx-node.is-lit {
        border-color: var(--cyd7-d7);
        background: #fff;
        box-shadow: 0 0 0 2px rgba(79, 155, 255, 0.55), 0 0 1.4em rgba(79, 155, 255, 0.35);
    }

    #cyd7 .cyd7-hero-fx .cyd7-scr .fx-node.is-done { border-color: #dde6f2; }

    #cyd7 .cyd7-kpi { display: grid; grid-template-columns: 2em minmax(0, 1fr); align-items: center; gap: 0.45em; padding: 0.45em 0.5em; }
    #cyd7 .cyd7-kpi .cyd7-kpi-ic .ic { width: 1.1em; height: 1.1em; }
    #cyd7 .cyd7-hero-fx .cyd7-kpi.fx-node { display: grid; padding: 0.45em 0.5em; }

    #cyd7 .cyd7-kpi-ic {
        display: grid;
        place-items: center;
        width: 2em;
        height: 2em;
        border-radius: 50%;
        background: rgba(52, 199, 123, 0.14);
        color: #1f9d5c;
        transition: background 0.4s ease, color 0.4s ease;
    }

    #cyd7 .cyd7-kpi--al .cyd7-kpi-ic { background: rgba(214, 69, 58, 0.12); color: #d6453a; }
    #cyd7 .cyd7-kpi--mt .cyd7-kpi-ic { background: rgba(31, 111, 224, 0.12); color: #1f6fe0; }
    #cyd7 .cyd7-kpi-t { display: flex; flex-direction: column; min-width: 0; }
    #cyd7 .cyd7-kpi-n { display: block; overflow: hidden; font-size: var(--hx-n); line-height: 1.1; }
    #cyd7 .cyd7-kpi-n > span { display: inline-block; }
    /* une ligne chacun : les quatre chiffres restent alignes */
    #cyd7 .cyd7-kpi-l,
    #cyd7 .cyd7-kpi-s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #cyd7 .cyd7-kpi-l { color: #42536f; font-size: var(--hx-s); line-height: 1.2; }
    #cyd7 .cyd7-kpi-s { color: #5d6f8c; font-size: var(--hx-s); font-style: normal; font-weight: 600; line-height: 1.2; }

    #cyd7 .cyd7-pnl { display: flex; flex-direction: column; padding: 0.55em 0.7em; overflow: hidden; }
    #cyd7 .cyd7-hero-fx .cyd7-pnl.fx-node { display: flex; flex-direction: column; gap: 0; padding: 0.55em 0.7em; overflow: hidden; }
    #cyd7 .cyd7-pnl-h { display: block; flex: none; margin-bottom: 0.3em; font-size: var(--hx-b); font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #cyd7 .cyd7-pnl-h small { color: #5d6f8c; font-size: var(--hx-xs); font-weight: 350; line-height: 1; }

    #cyd7 .cyd7-pnl--dev { grid-area: dev; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 0.8em; }
    #cyd7 .cyd7-pnl--dev .cyd7-pnl-h { grid-column: 1 / -1; }
    #cyd7 .cyd7-pnl--thr { grid-area: thr; }
    #cyd7 .cyd7-pnl--feed { grid-area: feed; }
    #cyd7 .cyd7-pnl--hea { grid-area: hea; }

    #cyd7 .cyd7-donut { position: relative; align-self: center; width: 6.4em; height: 6.4em; }
    #cyd7 .cyd7-donut svg { display: block; width: 100%; height: 100%; transform: rotate(0deg); }
    #cyd7 .cyd7-dn-bg,
    #cyd7 .cyd7-dn { fill: none; stroke-width: 4.6; }
    #cyd7 .cyd7-dn-bg { stroke: #e7edf6; }
    #cyd7 .cyd7-dn--on { stroke: #34c77b; }
    #cyd7 .cyd7-dn--off { stroke: #ff5d5d; }
    #cyd7 .cyd7-dn--mt { stroke: #1f6fe0; }
    #cyd7 .cyd7-dn--pb { stroke: #f5a524; }
    #cyd7 .cyd7-dn-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
    #cyd7 .cyd7-dn-c b { font-size: var(--hx-b); }
    #cyd7 .cyd7-dn-c span { color: #5d6f8c; font-size: var(--hx-xs); }

    #cyd7 .cyd7-dn-lg { display: grid; align-content: center; gap: 0.3em; margin: 0; padding: 0; list-style: none; font-size: var(--hx-s); }
    #cyd7 .cyd7-dn-lg li { display: flex; align-items: center; gap: 0.45em; min-width: 0; white-space: nowrap; }
    #cyd7 .cyd7-dn-lg i { flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; }
    #cyd7 .cyd7-dn-lg b { display: inline-block; margin-left: auto; }
    #cyd7 .cyd7-bg-ok { background: #34c77b; }
    #cyd7 .cyd7-bg-bad { background: #ff5d5d; }
    #cyd7 .cyd7-bg-mt { background: #1f6fe0; }
    #cyd7 .cyd7-bg-warn { background: #f5a524; }

    #cyd7 .cyd7-thr-n { display: flex; align-items: baseline; gap: 0.45em; min-width: 0; }
    #cyd7 .cyd7-thr-n b { font-size: var(--hx-l); line-height: 1; }
    #cyd7 .cyd7-thr-n span { color: #42536f; white-space: nowrap; }

    #cyd7 .cyd7-thr-chip {
        display: grid;
        margin-left: auto;
        font-size: var(--hx-s);
        font-style: normal;
        font-weight: 600;
        white-space: nowrap;
    }

    #cyd7 .cyd7-thr-chip > span { grid-area: 1 / 1; padding: 0.15em 0.5em; border-radius: 999px; visibility: hidden; }
    #cyd7 .cyd7-tc-new { background: #fde6e4; color: #c0392b; }
    #cyd7 .cyd7-tc-ok { background: #def6e9; color: #18804a; }

    #cyd7 .cyd7-spk { position: relative; display: block; flex: 1 1 auto; min-height: 2.2em; margin-top: 0.3em; }
    #cyd7 .cyd7-spark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    #cyd7 .cyd7-spk-area { fill: rgba(79, 155, 255, 0.16); }
    #cyd7 .cyd7-spk-line { fill: none; stroke: #2f80f0; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

    #cyd7 .cyd7-spk-end {
        position: absolute;
        left: 98.33%;
        top: 20%;
        width: 0.65em;
        height: 0.65em;
        margin: -0.325em 0 0 -0.325em;
        border: 2px solid #fff;
        border-radius: 50%;
        background: #2f80f0;
        box-shadow: 0 0 0 1px #2f80f0;
    }

    #cyd7 .cyd7-pnl-more { align-self: flex-end; margin-top: 0.25em; color: #1f6fe0; font-size: var(--hx-s); font-weight: 600; }

    #cyd7 .cyd7-hfeed { display: grid; grid-template-rows: repeat(3, 1fr); flex: 1 1 auto; gap: 0.15em; margin: 0; padding: 0; overflow: hidden; list-style: none; }
    #cyd7 .cyd7-hfeed li { display: flex; align-items: center; gap: 0.5em; min-width: 0; padding: 0.15em 0; border-bottom: 1px solid #eef2f8; }
    #cyd7 .cyd7-hfeed li:last-child { border-bottom: 0; }
    #cyd7 .cyd7-hfeed span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #cyd7 .cyd7-hfeed b { color: #1f6fe0; font-weight: 600; }
    #cyd7 .cyd7-hfeed em { flex: none; color: #5d6f8c; font-size: var(--hx-s); font-style: normal; }
    #cyd7 .cyd7-fi { flex: none; width: 0.7em; height: 0.7em; border-radius: 50%; background: #1f6fe0; box-shadow: 0 0 0 0.18em rgba(31, 111, 224, 0.16); }
    #cyd7 .cyd7-fi--ok { background: #34c77b; box-shadow: 0 0 0 0.18em rgba(52, 199, 123, 0.18); }
    #cyd7 .cyd7-fi--srch { background: #7a5cff; box-shadow: 0 0 0 0.18em rgba(122, 92, 255, 0.18); }
    #cyd7 .cyd7-fi--gear { background: #0b1733; box-shadow: 0 0 0 0.18em rgba(11, 23, 51, 0.14); }

    #cyd7 .cyd7-hbars { display: grid; flex: 1 1 auto; align-content: space-evenly; gap: 0.2em; margin: 0; padding: 0; list-style: none; }
    #cyd7 .cyd7-hbars li { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) 2.9em; align-items: center; gap: 0.5em; }
    #cyd7 .cyd7-hbars li > span:first-child { color: #42536f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #cyd7 .cyd7-hbars b { text-align: right; transition: color 0.4s ease; }
    #cyd7 .cyd7-hb { height: 0.5em; overflow: hidden; border-radius: 999px; background: #e7edf6; }
    #cyd7 .cyd7-hb i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #18a058, #34c77b); transform-origin: left center; transition: width 0.6s ease, background 0.4s ease; }
    #cyd7 .cyd7-hb i.is-warn { background: linear-gradient(90deg, #d98a07, #f5c84b); }

    /* Agent IA (carte flottante) */
    #cyd7 .cyd7-hero-fx .cyd7-h-agent {
        position: absolute;
        left: 0;
        top: 59%;
        width: 25.5%;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0.4em 0.7em;
        padding: 0.85em 0.9em 0.8em;
        border: 1px solid rgba(95, 170, 255, 0.55);
        border-radius: 0.9em;
        background: linear-gradient(150deg, #173f86, #0a1838 72%);
        color: #fff;
        box-shadow: 0 0 2.2em rgba(79, 155, 255, 0.32), 0 1em 2em rgba(0, 0, 0, 0.5);
    }

    #cyd7 .cyd7-hero-fx .cyd7-h-agent.is-lit { border-color: #8fc2ff; background: linear-gradient(150deg, #1d4ea3, #0a1838 72%); box-shadow: 0 0 0 2px rgba(143, 194, 255, 0.45), 0 0 2.6em rgba(79, 155, 255, 0.5), 0 1em 2em rgba(0, 0, 0, 0.5); }
    #cyd7 .cyd7-hero-fx .cyd7-h-agent.is-done { border-color: rgba(95, 170, 255, 0.55); }

    #cyd7 .cyd7-ag-ic {
        position: relative;
        display: grid;
        place-items: center;
        width: 2.8em;
        height: 2.8em;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #5aa5ff, #1f4fb3 70%);
        color: #fff;
        box-shadow: 0 0 1.2em rgba(95, 170, 255, 0.55);
    }

    #cyd7 .cyd7-ag-ic .ic { width: 1.5em; height: 1.5em; fill: rgba(255, 255, 255, 0.25); }
    #cyd7 [data-cyd7-hphase="stable"] .cyd7-ag-ic { background: radial-gradient(circle at 35% 30%, #5fe0a0, #158a52 70%); box-shadow: 0 0 1.2em rgba(52, 199, 123, 0.5); }
    #cyd7 [data-cyd7-hphase="detect"] .cyd7-ag-ic { background: radial-gradient(circle at 35% 30%, #ff8a7d, #b8322a 70%); box-shadow: 0 0 1.2em rgba(255, 93, 93, 0.5); }
    #cyd7 .cyd7-ag-txt { display: flex; flex-direction: column; gap: 0.1em; min-width: 0; }
    #cyd7 .cyd7-ag-txt strong { font-size: var(--hx-ag); }
    #cyd7 .cyd7-ag-l1 { color: #dfe8f6; font-size: var(--hx-b); }
    #cyd7 .cyd7-ag-l2 { color: #9fb7dc; font-size: var(--hx-s); }
    #cyd7 .cyd7-ag-bar { grid-column: 1 / -1; display: block; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
    #cyd7 .cyd7-ag-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5fc8ff, #a48dff); transform-origin: left center; }

    /* Etats de phase du hero (statiques ; les animations sont plus bas) */
    #cyd7 [data-cyd7-hphase="detect"] .cyd7-db-bell i,
    #cyd7 [data-cyd7-hphase="investigate"] .cyd7-db-bell i { opacity: 1; }

    #cyd7 [data-cyd7-hphase="detect"] .cyd7-kpi--inc .cyd7-kpi-ic,
    #cyd7 [data-cyd7-hphase="investigate"] .cyd7-kpi--inc .cyd7-kpi-ic { background: rgba(214, 69, 58, 0.14); color: #d6453a; }

    #cyd7 [data-cyd7-hphase="detect"] .cyd7-tc-new,
    #cyd7 [data-cyd7-hphase="investigate"] .cyd7-tc-new,
    #cyd7 [data-cyd7-hphase="contain"] .cyd7-tc-ok { visibility: visible; }

    #cyd7 [data-cyd7-hphase="detect"] .cyd7-spk-end,
    #cyd7 [data-cyd7-hphase="investigate"] .cyd7-spk-end { background: #ff5d5d; box-shadow: 0 0 0 1px #ff5d5d, 0 0 0 0.35em rgba(255, 93, 93, 0.22); }
    #cyd7 [data-cyd7-hphase="contain"] .cyd7-spk-end { background: #34c77b; box-shadow: 0 0 0 1px #34c77b; }

    #cyd7 [data-cyd7-hphase="detect"] .cyd7-ag-bar,
    #cyd7 [data-cyd7-hphase="contain"] .cyd7-ag-bar,
    #cyd7 [data-cyd7-hphase="maintain"] .cyd7-ag-bar,
    #cyd7 [data-cyd7-hphase="stable"] .cyd7-ag-bar { opacity: 0.35; }

    /* Controles du hero : barre de temps du moteur (lecture/pause, etape courante, segments cliquables) sous l'ecran */
    #cyd7 .cyd7-hero-fx > .fx-controls { position: relative; z-index: 5; margin-top: 12px; }
    #cyd7 .cyd7-hero-fx .fx-scn-sum { display: none; }

    /* lien de l'agent : seul le paquet (etincelle IA) est visible */
    #cyd7 .cyd7-hero-fx .fx-wire,
    #cyd7 .cyd7-hero-fx .fx-arrow { stroke-opacity: 0 !important; fill-opacity: 0 !important; }

    #cyd7 .cyd7-hero .cyd7-sample { margin-top: 4px; }

    /* sous 790 px de scene (tailles de 9 px) : Segoe UI en 600 resserre les espaces entre les mots */
    @container (max-width: 789px) {
        #cyd7 .cyd7-scr :is(b, strong, .cyd7-live, .cyd7-kpi-s, .cyd7-pnl-h, .cyd7-pnl-more, .cyd7-db-sel, .cyd7-thr-chip),
        #cyd7 .cyd7-db-side li.cyd7-is-on,
        #cyd7 .cyd7-h-agent strong { word-spacing: 1px; }
        #cyd7 .cyd7-scr,
        #cyd7 .cyd7-h-agent { word-spacing: 0.5px; }
    }

    @container (max-width: 699px) {
        #cyd7 .cyd7-scr { grid-template-columns: 7.5% minmax(0, 1fr); }
        #cyd7 .cyd7-kpi { grid-template-columns: minmax(0, 1fr); }
        #cyd7 .cyd7-kpi-ic { display: none; }
        #cyd7 .cyd7-db-side { align-items: center; padding: 0.7em 0.2em; }
        #cyd7 .cyd7-db-side li { padding: 0.45em; }
        #cyd7 .cyd7-db-side li > span,
        #cyd7 .cyd7-db-side li > b,
        #cyd7 .cyd7-db-sel,
        #cyd7 .cyd7-db-org { display: none; }
        #cyd7 .cyd7-hero-fx .cyd7-h-agent { width: 29%; top: 69%; }
    }

    /* ---------- Fonctionnalites ---------- */
    #cyd7 .cyd7-feat-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

    #cyd7 .cyd7-feat-card { --cyd7-t: var(--cyd7-d7); display: flex; flex-direction: column; gap: 12px; padding: 20px; transition: border-color 0.25s ease, transform 0.25s ease; }
    #cyd7 .cyd7-feat-card:hover { border-color: color-mix(in srgb, var(--cyd7-t) 60%, transparent); transform: translateY(-2px); }
    #cyd7 .cyd7-tint--ai { --cyd7-t: #a48dff; }
    #cyd7 .cyd7-tint--eset { --cyd7-t: var(--cyd7-eset); }

    #cyd7 .cyd7-feat-ic {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border: 1.5px solid color-mix(in srgb, var(--cyd7-t) 70%, transparent);
        border-radius: 50%;
        background: color-mix(in srgb, var(--cyd7-t) 14%, transparent);
        color: var(--cyd7-t);
        box-shadow: 0 0 18px color-mix(in srgb, var(--cyd7-t) 22%, transparent);
    }

    #cyd7 .cyd7-feat-ic .ic { width: 22px; height: 22px; }
    #cyd7 .cyd7-feat-card h3 { margin: 0; }
    @media (max-width: 639px) {
        #cyd7 .cyd7-feat-card { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 10px; }
        #cyd7 .cyd7-feat-card ul { grid-column: 1 / -1; }
    }
    #cyd7 .cyd7-feat-card ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
    #cyd7 .cyd7-feat-card li { position: relative; padding-left: 14px; color: var(--text-muted); font-size: 0.9rem; line-height: 1.45; }
    #cyd7 .cyd7-feat-card li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--cyd7-t); }

    #cyd7 .cyd7-feat-play { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; }
    #cyd7 .cyd7-feat-play > span { color: var(--text-muted); font-size: 0.9rem; }
    #cyd7 .cyd7-feat-play .ia-btn { min-height: 42px; padding: 9px 18px; font-size: 0.92rem; }
    #cyd7 .cyd7-feat-play .ia-btn .ic { width: 16px; height: 16px; }

    #cyd7 .cyd7-feat-more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        margin-left: auto;
        color: var(--ia-coral-soft);
        font-size: 0.92rem;
        font-weight: 600;
        text-decoration: none;
    }

    #cyd7 .cyd7-feat-more .ic { width: 16px; height: 16px; transition: transform 0.2s ease; }
    #cyd7 .cyd7-feat-more:hover { color: #fff; }
    #cyd7 .cyd7-feat-more:hover .ic { transform: translateX(3px); }
    #cyd7 .cyd7-feat-more:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
    #cyd7 #cyd7-features-title:focus { outline: none; }

    /* ---------- Qu'est-ce qu'un RMM ? ---------- */
    #cyd7 .cyd7-rmm-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 20px 16px 22px;
        background: radial-gradient(ellipse at 22% 45%, rgba(79, 155, 255, 0.14), transparent 55%), var(--ia-panel-bg);
    }

    #cyd7 .cyd7-hub { width: 100%; max-width: 420px; margin: 0 auto; }
    #cyd7 .cyd7-hub svg { display: block; width: 100%; height: auto; overflow: visible; }
    #cyd7 .cyd7-hub-ring { fill: none; stroke: rgba(120, 160, 220, 0.16); stroke-dasharray: 2 6; }
    #cyd7 .cyd7-hub-in path,
    #cyd7 .cyd7-hub-out path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 7; }
    #cyd7 .cyd7-hub-in path { stroke: #5fc8ff; opacity: 0.8; }
    #cyd7 .cyd7-hub-out path { stroke: #e0a73a; opacity: 0.55; }
    #cyd7 .cyd7-hub-lb { font-family: var(--fx-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; }
    #cyd7 .cyd7-hub-lb--in { fill: #8fd8ff; }
    #cyd7 .cyd7-hub-lb--out { fill: #f2c46a; }
    #cyd7 .cyd7-hub-core { fill: url(#cyd7-hub-g); stroke: rgba(143, 194, 255, 0.7); stroke-width: 1.5; filter: drop-shadow(0 0 14px rgba(79, 155, 255, 0.55)); }
    #cyd7 .cyd7-hub-t1 { fill: #fff; font-size: 13px; font-weight: 800; }
    #cyd7 .cyd7-hub-t2 { fill: #cfe2ff; font-family: var(--fx-mono); font-size: 9px; letter-spacing: 0.06em; }
    #cyd7 .cyd7-hub-sat rect { fill: #0d1937; stroke: rgba(120, 160, 220, 0.45); }
    #cyd7 .cyd7-hub-sat use { fill: none; stroke: #9fd0ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    #cyd7 .cyd7-hub-sat text { fill: #e8eef8; font-size: 12px; font-weight: 600; }
    #cyd7 .cyd7-hub-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--text-muted); font-size: 0.86rem; line-height: 1.35; }
    #cyd7 .cyd7-hub-key li { display: inline-flex; align-items: center; gap: 9px; }
    #cyd7 .cyd7-hub-key strong { color: #fff; }
    #cyd7 .cyd7-hub-sw { flex: none; width: 26px; height: 0; border-top: 2.5px dashed #5fc8ff; }
    #cyd7 .cyd7-hub-sw--out { border-top-color: #e0a73a; }
    #cyd7 .cyd7-hub-sat circle { fill: #34c77b; }

    #cyd7 .cyd7-rmm-body { min-width: 0; }

    @media (max-width: 1099px) {
        /* une colonne : intro (sur-titre, titre, texte), puis le schema, puis les capacites */
        #cyd7 .cyd7-rmm-panel { gap: 0; }
        #cyd7 .cyd7-rmm-body { display: contents; }
        #cyd7 .cyd7-rmm-body > .ia-section-head { order: -2; }
        #cyd7 .cyd7-hub { order: -1; margin-bottom: 24px; }
    }
    #cyd7 .cyd7-rmm-body .ia-section-head { margin-bottom: 18px; }
    #cyd7 .cyd7-rmm-h3 { margin: 0 0 12px; color: #fff; font-size: 1rem; }

    #cyd7 .cyd7-rmm-caps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 22px; margin: 0 0 18px; padding: 0; list-style: none; }
    #cyd7 .cyd7-rmm-caps li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }

    #cyd7 .cyd7-cap-ic {
        display: grid;
        place-items: center;
        flex: none;
        width: 36px;
        height: 36px;
        border: 1px solid rgba(224, 167, 58, 0.55);
        border-radius: 10px;
        background: rgba(224, 167, 58, 0.1);
        color: #f2c46a;
    }

    #cyd7 .cyd7-cap-ic .ic { width: 18px; height: 18px; }
    #cyd7 .cyd7-rmm-caps strong { display: block; color: #fff; font-size: 0.94rem; }
    #cyd7 .cyd7-rmm-caps strong + span { display: block; color: var(--text-muted); font-size: 0.87rem; line-height: 1.4; }

    #cyd7 .cyd7-specs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }

    #cyd7 .cyd7-specs li {
        padding: 5px 10px;
        border: 1px solid rgba(120, 160, 220, 0.32);
        border-radius: 999px;
        background: rgba(6, 13, 30, 0.6);
        color: #cfdcf0;
        font-family: var(--fx-mono);
        font-size: 0.66rem;
        letter-spacing: 0.04em;
    }

    /* ---------- Pourquoi ESET Inspect ? ---------- */
    #cyd7 .cyd7-eset .ia-section-head { max-width: 900px; }
    #cyd7 .cyd7-eset-why { margin-top: 10px !important; padding-left: 12px; border-left: 3px solid var(--accent-bright); color: #fff !important; font-weight: 600; }
    #cyd7 .cyd7-eset-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }

    #cyd7 .cyd7-reasons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 28px; margin: 0 0 20px; padding: 0; list-style: none; }
    #cyd7 .cyd7-reasons li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
    #cyd7 .cyd7-pt-ic { width: 42px; height: 42px; }
    #cyd7 .cyd7-pt-ic .ic { width: 20px; height: 20px; }
    #cyd7 .cyd7-reasons strong { display: block; color: #fff; font-size: 0.98rem; line-height: 1.3; }
    #cyd7 .cyd7-reasons strong + span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 0.88rem; line-height: 1.45; }

    #cyd7 .cyd7-rules {
        position: relative;
        overflow: hidden;
        border: 1px solid #c9d6ea;
        border-radius: 10px;
        background: var(--cyd7-win);
        color: var(--cyd7-ink);
        font-size: 0.8rem;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(43, 181, 160, 0.06);
    }

    #cyd7 .cyd7-rules-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--cyd7-wline); background: #e9eff8; font-weight: 700; }
    #cyd7 .cyd7-rules-bar .ic { width: 16px; height: 16px; color: #1b8f7e; }
    #cyd7 .cyd7-rules-bar i { margin-left: auto; color: #8a9bb6; font-style: normal; }
    #cyd7 .cyd7-rules-h,
    #cyd7 .cyd7-rule { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; align-items: center; padding: 9px 12px; }
    #cyd7 .cyd7-rules-h { color: #5d6f8c; font-family: var(--fx-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }
    #cyd7 .cyd7-rule { position: relative; border-top: 1px solid var(--cyd7-wline); }
    #cyd7 .cyd7-rule-g { font-weight: 700; }
    #cyd7 .cyd7-rule-d { color: #42536f; }
    #cyd7 .cyd7-rule-r { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }

    #cyd7 .cyd7-tog { position: relative; flex: none; width: 28px; height: 16px; border-radius: 999px; background: #2bb5a0; }
    #cyd7 .cyd7-tog::after { content: ""; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

    #cyd7 .cyd7-lock {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 8px;
        border: 1px solid #f0c674;
        border-radius: 999px;
        background: #fff5e0;
        color: #8a5a00;
        font-size: 0.74rem;
    }

    #cyd7 .cyd7-lock .ic { width: 12px; height: 12px; }
    #cyd7 .cyd7-rules-f { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding: 9px 12px; border-top: 1px solid var(--cyd7-wline); background: #eef3fa; color: #5d6f8c; font-size: 0.72rem; }

    #cyd7 .cyd7-rule::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(43, 181, 160, 0.16), rgba(43, 181, 160, 0.04));
        opacity: 0;
        pointer-events: none;
    }

    #cyd7 .cyd7-vs { display: grid; margin-top: 30px; border: 1px solid var(--ia-panel-border); border-radius: 14px; overflow: hidden; background: var(--ia-panel-bg); }
    #cyd7 .cyd7-vs-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 10px; padding: 11px 18px; border-top: 1px solid rgba(120, 160, 220, 0.12); font-size: 0.9rem; }
    #cyd7 .cyd7-vs-head { border-top: 0; background: rgba(6, 13, 30, 0.45); color: var(--text-muted); font-family: var(--fx-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
    #cyd7 .cyd7-vs-head > span:last-child { color: #7fe3d2; }
    #cyd7 .cyd7-vs-long { color: inherit; }
    #cyd7 .cyd7-vs-row [role="rowheader"] { color: #fff; font-weight: 600; }
    #cyd7 .cyd7-y,
    #cyd7 .cyd7-n { display: inline-flex; align-items: center; gap: 6px; }
    #cyd7 .cyd7-y { color: #7fe3d2; font-weight: 600; }
    #cyd7 .cyd7-y .ic { width: 16px; height: 16px; stroke-width: 2.4; }
    #cyd7 .cyd7-n { color: #7f93b6; }

    /* ---------- Comment ca fonctionne : legende ---------- */
    #cyd7 .cyd7-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 18px; padding: 0; list-style: none; color: var(--text-muted); font-size: 0.84rem; }
    #cyd7 .cyd7-legend li { display: inline-flex; align-items: center; gap: 8px; }
    #cyd7 .cyd7-lg { display: inline-block; width: 24px; height: 0; border-top: 2.5px solid var(--fx-k-data); border-radius: 2px; }
    #cyd7 .cyd7-lg--secure { border-top: 5px solid rgba(43, 181, 160, 0.75); }
    #cyd7 .cyd7-lg--ai { border-top-color: var(--fx-k-ai); }
    #cyd7 .cyd7-lg--control { border-top-color: var(--fx-k-control); }
    #cyd7 .cyd7-lg--event { border-top-color: var(--fx-k-event); }
    #cyd7 .cyd7-lg--feedback { border-top: 2.5px dashed var(--fx-k-feedback); }

    /* ---------- Serpentin : scene et cartes ---------- */
    #cyd7 .cyd7-flow-stage { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 44px; padding: 2px 0 6px; }

    #cyd7 .cyd7-flow .cyd7-step {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 0;
        padding: 16px;
        border: 1px solid rgba(80, 140, 255, 0.28);
        border-radius: 14px;
        background: var(--cyd7-bg);
        color: var(--text);
        line-height: 1.4;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
        transition: border-color 0.45s ease, box-shadow 0.45s ease, background 0.45s ease;
    }

    #cyd7 .cyd7-flow .cyd7-step:not(.fx-node) { position: relative; }
    #cyd7 .cyd7-flow .fx-node.cyd7-step { scale: none !important; }

    #cyd7 .cyd7-flow .fx-node.cyd7-step.is-lit,
    #cyd7 .cyd7-flow .cyd7-step.cyd7-is-cur {
        --cyd7-bg: var(--cyd7-bg-cur);
        border-color: var(--fx-accent, var(--cyd7-rmm));
        background: var(--cyd7-bg-cur);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent, #e0a73a) 32%, transparent), 0 0 22px color-mix(in srgb, var(--fx-accent, #e0a73a) 16%, transparent), 0 10px 26px rgba(0, 0, 0, 0.4);
    }

    #cyd7 .cyd7-flow .cyd7-step--6.cyd7-is-cur { --fx-accent: var(--cyd7-rmm); }

    #cyd7 .cyd7-flow .fx-node.cyd7-step.is-done { border-color: color-mix(in srgb, var(--fx-accent) 42%, transparent); }
    #cyd7 .cyd7-flow .cyd7-step.cyd7-is-visited { border-color: rgba(224, 167, 58, 0.42); }
    #cyd7 .cyd7-flow .fx-node.cyd7-step.is-dim { border-color: rgba(110, 150, 220, 0.14); box-shadow: none; }
    #cyd7 .cyd7-flow .fx-node.cyd7-step.is-dim > * { opacity: 0.42; filter: saturate(0.6); }
    #cyd7 .cyd7-flow .cyd7-step.cyd7-is-dim { border-color: rgba(110, 150, 220, 0.14); box-shadow: none; }

    #cyd7 .cyd7-flow .cyd7-step.cyd7-is-dim::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        border-radius: inherit;
        background: rgba(9, 18, 40, 0.6);
        pointer-events: none;
    }

    /* En-tete de carte : masque les liens qui passent dessous */
    #cyd7 .cyd7-step-head {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        column-gap: 12px;
        align-items: start;
        background: var(--cyd7-bg);
        transition: background 0.45s ease;
    }

    #cyd7 .cyd7-step-head h3 { grid-column: 2; margin: 4px 0; color: #fff; font-size: 1rem; line-height: 1.25; }
    #cyd7 .cyd7-step-head p { grid-column: 2; margin: 0; color: var(--text-muted); font-size: 0.86rem; line-height: 1.42; }

    #cyd7 .cyd7-num {
        grid-row: 1 / span 2;
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #e8eef8;
        color: #0b1733;
        font-size: 0.95rem;
        font-weight: 800;
        transition: background 0.45s ease, color 0.45s ease, box-shadow 0.45s ease;
    }

    #cyd7 .cyd7-step.is-lit .cyd7-num,
    #cyd7 .cyd7-step.cyd7-is-cur .cyd7-num {
        background: linear-gradient(135deg, var(--accent), var(--accent-bright));
        color: #fff;
        box-shadow: 0 0 14px rgba(232, 87, 74, 0.5);
    }

    #cyd7 .cyd7-step.is-done .cyd7-num { box-shadow: 0 0 0 2px var(--fx-accent); }
    #cyd7 .cyd7-step.cyd7-is-visited .cyd7-num { box-shadow: 0 0 0 2px var(--cyd7-rmm); }

    #cyd7 .cyd7-ui { min-width: 0; margin-top: auto; margin-bottom: auto; font-size: var(--cyd7-ui-fs); line-height: 1.35; }
    #cyd7 .cyd7-ui .ic { flex: none; width: 14px; height: 14px; }

    /* Fenetres claires (mini-interfaces) */
    #cyd7 .cyd7-win {
        position: relative;
        min-width: 0;
        border: 1px solid #c9d6ea;
        border-radius: 8px;
        background: var(--cyd7-win);
        color: var(--cyd7-ink);
        font-size: var(--cyd7-ui-fs);
        line-height: 1.35;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
    }

    #cyd7 .cyd7-win-bar {
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
        box-sizing: border-box;
        height: var(--cyd7-bar, 28px);
        min-width: 0;
        padding: 0 9px;
        border-bottom: 1px solid var(--cyd7-wline);
        border-radius: 8px 8px 0 0;
        background: #e9eff8;
        font-weight: 700;
        white-space: nowrap;
    }

    #cyd7 .cyd7-win-bar > span:not(.cyd7-wres) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    #cyd7 .cyd7-win-bar > .cyd7-bar-idle { display: none; }
    #cyd7 .cyd7-flow .cyd7-step[data-cyd7-phase=""] .cyd7-win-bar > .cyd7-bar-idle { display: inline; }
    #cyd7 .cyd7-flow .cyd7-step[data-cyd7-phase=""] .cyd7-win-bar > .cyd7-bar-act { display: none; }
    #cyd7 .cyd7-win-bar > .ic { color: var(--cyd7-blue); }
    #cyd7 .cyd7-bar--bad > .ic { color: #d6453a; }
    #cyd7 .cyd7-bar--ai > .ic { color: #6b4fe0; }
    #cyd7 .cyd7-bar--rmm > .ic { color: #b07a10; }
    #cyd7 .cyd7-bar--ok > .ic { color: #18a058; }
    #cyd7 .cyd7-x { margin-left: auto; color: #8a9bb6; font-style: normal; font-weight: 400; }

    #cyd7 .cyd7-win-in { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 9px 9px; }

    #cyd7 .cyd7-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; padding-bottom: 4px; border-bottom: 1px solid var(--cyd7-wline); }
    #cyd7 .cyd7-kv > span { flex: none; color: var(--cyd7-ink2); }
    #cyd7 .cyd7-kv > b { min-width: 0; text-align: right; overflow-wrap: anywhere; }
    #cyd7 .cyd7-mono { font-family: var(--fx-mono); font-weight: 600; }

    #cyd7 .cyd7-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
    #cyd7 .cyd7-pill--bad { background: #fde6e4; color: #b8322a; }
    #cyd7 .cyd7-pill--warn { background: #fff1d1; color: #8a5a00; }
    #cyd7 .cyd7-pill--ok { background: #def6e9; color: #127a44; }
    #cyd7 .cyd7-pill--mnt { background: #e0f0ff; color: #1557b0; }
    #cyd7 .cyd7-pill--alr { background: #fff1d1; color: #8a5a00; }
    #cyd7 .cyd7-pill--off { background: #fde6e4; color: #b8322a; }

    #cyd7 .cyd7-chk { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
    #cyd7 .cyd7-chk .ic { width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: #def6e9; color: #18a058; stroke-width: 3; }
    #cyd7 .cyd7-chk > span { min-width: 0; overflow-wrap: anywhere; }

    #cyd7 .cyd7-btn-blue { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 5px 12px; border-radius: 6px; background: var(--cyd7-blue); color: #fff; font-weight: 700; white-space: nowrap; }

    #cyd7 .cyd7-cursor { position: absolute; right: 8%; bottom: -6px; z-index: 3; width: 18px; height: 18px; opacity: 0; pointer-events: none; }
    #cyd7 .cyd7-cursor .ic { width: 100%; height: 100%; fill: #fff; stroke: #0f1d3a; stroke-width: 1.5; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }

    /* ----- Emplacement de fenetre : en attente (repliee), ouverture, action, repli sur la barre qui affiche le resultat ----- */
    #cyd7 .cyd7-wslot { --cyd7-bar: 28px; position: relative; display: grid; min-width: 0; }
    #cyd7 .cyd7-wslot > * { grid-area: 1 / 1; }

    #cyd7 .cyd7-wres {
        position: absolute;
        inset: -1px;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 10px;
        border: 1px solid rgba(43, 181, 160, 0.6);
        border-radius: 8px;
        background: var(--cyd7-ghost);
        color: var(--cyd7-teal-t);
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        visibility: hidden;
    }

    #cyd7 .cyd7-wres .ic { width: 15px; height: 15px; padding: 2px; border-radius: 50%; background: rgba(43, 181, 160, 0.22); stroke-width: 2.6; }

    #cyd7 .cyd7-wghost {
        display: grid;
        align-content: center;
        justify-items: center;
        min-width: 0;
        padding: calc(var(--cyd7-bar) + 8px) 12px 10px;
        border: 1px dashed rgba(120, 160, 220, 0.38);
        border-radius: 8px;
        background: #0a1530;
        color: var(--text-muted);
        font-size: var(--cyd7-ui-fs);
        line-height: 1.35;
        text-align: center;
        visibility: hidden;
    }

    #cyd7 .cyd7-wg-wait,
    #cyd7 .cyd7-wg-done { grid-area: 1 / 1; display: none; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: 100%; }

    #cyd7 .cyd7-wg-wait > .ic,
    #cyd7 .cyd7-wg-done > .ic {
        width: 24px;
        height: 24px;
        margin-bottom: 2px;
        padding: 4px;
        border-radius: 50%;
        background: rgba(120, 160, 220, 0.14);
        color: #9fb7dc;
    }

    #cyd7 .cyd7-wg-done > .ic { background: rgba(43, 181, 160, 0.2); color: var(--cyd7-teal-t); stroke-width: 2.4; }
    #cyd7 .cyd7-wg-wait b { color: #c4d2ea; font-size: 0.74rem; }
    #cyd7 .cyd7-wg-done b { color: #fff; font-size: 0.74rem; }
    #cyd7 .cyd7-wg-done--ok b { color: #7ee2a8; }

    /* en attente (lecture en cours, carte non atteinte) */
    #cyd7 .cyd7-flow .cyd7-step[data-cyd7-phase=""] .cyd7-wslot > .cyd7-win { clip-path: inset(0 0 calc(100% - var(--cyd7-bar)) 0 round 8px); box-shadow: none; }
    #cyd7 .cyd7-flow .cyd7-step[data-cyd7-phase=""] .cyd7-wslot > .cyd7-win > .cyd7-win-bar { opacity: 0.6; }
    #cyd7 .cyd7-flow .cyd7-step[data-cyd7-phase=""] .cyd7-wghost { visibility: visible; }
    #cyd7 .cyd7-step[data-cyd7-phase=""] .cyd7-wg-wait { display: flex; }
    #cyd7 .cyd7-step:not([data-cyd7-phase=""]) .cyd7-wg-done { display: flex; }

    /* ----- Carte 1 : poste ou serveur ----- */
    #cyd7 .cyd7-ui--1 { display: grid; gap: 8px; padding: 10px; border: 1px solid #c9d6ea; border-radius: 8px; background: var(--cyd7-win); color: var(--cyd7-ink); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4); }
    #cyd7 .cyd7-dev { display: flex; align-items: center; gap: 9px; min-width: 0; }
    #cyd7 .cyd7-dev-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px; background: #0b1733; color: #8fc2ff; }
    #cyd7 .cyd7-dev-ic .ic { width: 18px; height: 18px; }
    #cyd7 .cyd7-dev-t { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
    #cyd7 .cyd7-dev-t b { font-size: 0.8rem; }
    #cyd7 .cyd7-dev-t > span { color: var(--cyd7-ink2); }
    #cyd7 .cyd7-st { display: grid; flex: none; font-weight: 700; }
    #cyd7 .cyd7-st > span { grid-area: 1 / 1; padding: 2px 8px; border-radius: 999px; text-align: center; }
    #cyd7 .cyd7-st-0 { background: #e0f0ff; color: #1557b0; }
    #cyd7 .cyd7-st-1 { background: #fde6e4; color: #b8322a; visibility: hidden; }
    #cyd7 .cyd7-st-2 { background: #def6e9; color: #127a44; visibility: hidden; }
    #cyd7 .cyd7-step--1[data-cyd7-phase="start"] .cyd7-st-0,
    #cyd7 .cyd7-step--1[data-cyd7-phase="back"] .cyd7-st-0 { visibility: hidden; }
    #cyd7 .cyd7-step--1[data-cyd7-phase="start"] .cyd7-st-1,
    #cyd7 .cyd7-step--1[data-cyd7-phase="back"] .cyd7-st-2 { visibility: visible; }
    #cyd7 [data-cyd7-scn="mnt"] .cyd7-st-1 { background: #fff1d1; color: #8a5a00; }

    #cyd7 .cyd7-agents { display: flex; flex-wrap: wrap; gap: 6px; }
    #cyd7 .cyd7-agent { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border: 1px solid #d5dfed; border-radius: 999px; background: #fff; font-weight: 600; }
    #cyd7 .cyd7-agent i { width: 7px; height: 7px; border-radius: 50%; background: #e0a73a; }
    #cyd7 .cyd7-agent--eset i { background: #2bb5a0; }
    #cyd7 .cyd7-agent em { color: #18a058; font-style: normal; font-weight: 700; }

    #cyd7 .cyd7-term { display: flex; gap: 6px; min-width: 0; padding: 6px 8px; border-radius: 6px; background: #0b1631; color: #9fb7dc; font-family: var(--fx-mono); font-size: 0.66rem; line-height: 1.4; }
    #cyd7 .cyd7-term-p { color: #5fc8ff; }
    #cyd7 .cyd7-term-l { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    #cyd7 .cyd7-step--1[data-cyd7-phase="start"] .cyd7-term-l { color: #ff9c90; }
    #cyd7 [data-cyd7-scn="mnt"] .cyd7-step--1[data-cyd7-phase="start"] .cyd7-term-l { color: #f7c46a; }
    #cyd7 .cyd7-step--1[data-cyd7-phase="back"] .cyd7-term-l { color: #6f83a6; text-decoration: line-through; text-decoration-color: rgba(126, 226, 168, 0.7); }

    /* ----- Carte 2 : telemetrie ----- */
    #cyd7 .cyd7-tele { display: grid; gap: 6px; padding: 10px; border: 1px solid rgba(95, 200, 255, 0.28); border-radius: 8px; background: #060d1e; color: #b9c8e2; font-family: var(--fx-mono); font-size: 0.66rem; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), inset 0 0 24px rgba(95, 200, 255, 0.05); }
    #cyd7 .cyd7-tele-h { display: flex; align-items: center; gap: 6px; color: #dfe8f6; letter-spacing: 0.04em; }
    #cyd7 .cyd7-tele-rate { margin-left: auto; color: #5fc8ff; }
    #cyd7 .cyd7-rec { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ff5d5d; box-shadow: 0 0 6px #ff5d5d; }
    #cyd7 .cyd7-met { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) 3.2em; align-items: center; gap: 8px; }
    #cyd7 .cyd7-met b { color: #fff; text-align: right; }
    #cyd7 .cyd7-mb { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(120, 160, 220, 0.18); }
    #cyd7 .cyd7-mb i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2f80f0, #5fc8ff); transform-origin: left center; }
    #cyd7 .cyd7-met--disk .cyd7-mb i { width: 61%; }
    #cyd7 [data-cyd7-scn="mnt"] .cyd7-met--disk .cyd7-mb i { width: 93%; background: linear-gradient(90deg, #d98a07, #f5c84b); }
    #cyd7 [data-cyd7-scn="mnt"] .cyd7-met--disk b { color: #f7c46a; }

    #cyd7 .cyd7-stream { display: grid; gap: 2px; margin: 2px 0 0; padding: 6px 0 0; border-top: 1px solid rgba(120, 160, 220, 0.16); list-style: none; }
    #cyd7 .cyd7-stream li { overflow: hidden; color: #7f93b6; text-overflow: ellipsis; white-space: nowrap; }
    #cyd7 .cyd7-stream li::before { content: "› "; color: #3f5a86; }
    #cyd7 .cyd7-stream .cyd7-hot { padding: 1px 4px; border-radius: 3px; background: rgba(255, 93, 93, 0.14); color: #ff9c90; }
    #cyd7 [data-cyd7-scn="mnt"] .cyd7-stream .cyd7-hot { background: rgba(245, 200, 75, 0.14); color: #f7c46a; }
    #cyd7 .cyd7-hot-idle { display: none; }
    #cyd7 .cyd7-flow .cyd7-step--2[data-cyd7-phase=""] .cyd7-hot { background: none; color: #6f83a6; font-style: italic; }
    #cyd7 .cyd7-flow .cyd7-step--2[data-cyd7-phase=""] .cyd7-hot-idle { display: inline; }
    #cyd7 .cyd7-flow .cyd7-step--2[data-cyd7-phase=""] .cyd7-hot-v { display: none; }

    /* ----- Cartes 3 et 5 : deux voies (detection, confinement ou plan) ----- */
    #cyd7 .cyd7-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }

    #cyd7 .cyd7-duo-t {
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
        padding: 6px 8px;
        border: 1px solid rgba(120, 160, 220, 0.3);
        border-radius: 8px;
        background: #0a1530;
        color: #c4d2ea;
        transition: opacity 0.4s ease, border-color 0.4s ease, background 0.4s ease;
    }

    #cyd7 .cyd7-duo-t .ic { width: 18px; height: 18px; color: #8fb3e6; }
    #cyd7 .cyd7-duo-t > span { display: flex; flex-direction: column; min-width: 0; }
    #cyd7 .cyd7-duo-t b { color: #fff; font-size: 0.72rem; }
    #cyd7 .cyd7-duo-t b + span { color: #8a9bb6; }
    #cyd7 .cyd7-duo--a .ic { color: #5fd6c3; }
    #cyd7 .cyd7-ui--3 .cyd7-duo--b .ic { color: #b6a5ff; }
    #cyd7 .cyd7-ui--5 .cyd7-duo--b .ic { color: #8fc2ff; }

    #cyd7 :is(.cyd7-step--3[data-cyd7-phase="eset"], .cyd7-step--5[data-cyd7-phase="iso"]) .cyd7-duo--a,
    #cyd7 :is(.cyd7-step--3[data-cyd7-phase="ai"], .cyd7-step--5[data-cyd7-phase="plan"], .cyd7-step--5[data-cyd7-phase="rev"]) .cyd7-duo--b {
        border-color: var(--fx-accent);
        background: color-mix(in srgb, var(--fx-accent) 16%, #0a1530);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent) 30%, transparent);
    }

    #cyd7 .cyd7-step--3[data-cyd7-phase="ai"] .cyd7-duo--b { --fx-accent: #a48dff; }
    #cyd7 :is(.cyd7-step--3[data-cyd7-phase="eset"], .cyd7-step--5[data-cyd7-phase="iso"]) .cyd7-duo--b,
    #cyd7 :is(.cyd7-step--3[data-cyd7-phase="ai"], .cyd7-step--5[data-cyd7-phase="plan"], .cyd7-step--5[data-cyd7-phase="rev"]) .cyd7-duo--a { opacity: 0.38; }

    /* ----- Carte 4 : investigation ----- */
    #cyd7 .cyd7-tree { display: grid; gap: 1px; padding: 6px 8px; border-radius: 6px; background: #0b1631; color: #b9c8e2; font-family: var(--fx-mono); font-size: 0.64rem; white-space: pre; overflow: hidden; }
    #cyd7 .cyd7-tree > span { overflow: hidden; text-overflow: ellipsis; }
    #cyd7 [data-cyd7-scn="thr"] .cyd7-tree > span:nth-child(2) { color: #ff9c90; }
    #cyd7 [data-cyd7-scn="thr"] .cyd7-tree > span:nth-child(3) { color: #f7c46a; }
    #cyd7 .cyd7-verdict { display: grid; gap: 4px; margin-top: 2px; }
    #cyd7 .cyd7-vd-bar { height: 6px; overflow: hidden; border-radius: 999px; background: #e3eaf5; }
    #cyd7 .cyd7-vd-bar i { display: block; width: 92%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f5a524, #d6453a); transform-origin: left center; }
    #cyd7 [data-cyd7-scn="mnt"] .cyd7-vd-bar i { width: 100%; background: linear-gradient(90deg, #2f80f0, #5fc8ff); }
    #cyd7 [data-cyd7-scn="rev"] .cyd7-vd-bar i { width: 97%; background: linear-gradient(90deg, #7a5cff, #a48dff); }
    #cyd7 .cyd7-verdict b { color: #b8322a; }
    #cyd7 [data-cyd7-scn="mnt"] .cyd7-verdict b { color: #1557b0; }
    #cyd7 [data-cyd7-scn="rev"] .cyd7-verdict b { color: #5536c9; }

    /* ----- Carte 5 : poste isole ----- */
    #cyd7 .cyd7-iso { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 4px 8px; padding: 6px 8px; border-radius: 6px; background: #eef3fa; }
    #cyd7 .cyd7-iso-a,
    #cyd7 .cyd7-iso-b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #0b1733; color: #8fc2ff; }
    #cyd7 .cyd7-iso-a .ic,
    #cyd7 .cyd7-iso-b .ic { width: 16px; height: 16px; }
    #cyd7 .cyd7-iso-link { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    #cyd7 .cyd7-iso-link i { display: block; height: 3px; border-radius: 2px; background: #c3d0e4; }
    #cyd7 [data-cyd7-scn="thr"] .cyd7-iso-link i { background: #d6453a; }
    #cyd7 [data-cyd7-scn="thr"] .cyd7-iso-link i:first-child { transform: translateX(-6px); }
    #cyd7 [data-cyd7-scn="thr"] .cyd7-iso-link i:last-child { transform: translateX(6px); }
    #cyd7 :is([data-cyd7-scn="mnt"], [data-cyd7-scn="rev"]) .cyd7-iso-link i { background: linear-gradient(90deg, #2f80f0, #5fc8ff); }
    #cyd7 [data-cyd7-scn="rev"] .cyd7-iso-b .ic,
    #cyd7 [data-cyd7-scn="mnt"] .cyd7-iso-b .ic { color: #34c77b; }
    #cyd7 .cyd7-iso-t { grid-column: 1 / -1; font-weight: 700; text-align: center; }

    /* ----- Carte 6 : action RMM ----- */
    #cyd7 .cyd7-flow .cyd7-win.fx-node { display: block; padding: 0; border: 1px solid #c9d6ea; border-radius: 8px; background: var(--cyd7-win); color: var(--cyd7-ink); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4); scale: none !important; }
    #cyd7 .cyd7-flow .cyd7-win.fx-node.is-lit { border-color: var(--cyd7-rmm); box-shadow: 0 0 0 2px rgba(224, 167, 58, 0.45), 0 0 22px rgba(224, 167, 58, 0.25), 0 10px 26px rgba(0, 0, 0, 0.4); }
    #cyd7 .cyd7-flow .cyd7-win.fx-node.is-done { border-color: #c9d6ea; }
    #cyd7 .cyd7-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
    #cyd7 .cyd7-prog-bar { height: 7px; overflow: hidden; border-radius: 999px; background: #e3eaf5; }
    #cyd7 .cyd7-prog-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d98a07, #f5c84b); transform-origin: left center; }
    #cyd7 .cyd7-prog-n { display: grid; font-family: var(--fx-mono); }
    #cyd7 .cyd7-prog-n > span { grid-area: 1 / 1; text-align: right; }
    #cyd7 .cyd7-pn-0 { visibility: hidden; }
    #cyd7 .cyd7-out { display: grid; gap: 2px; padding: 6px 8px; border-radius: 6px; background: #0b1631; color: #9fe6c2; font-family: var(--fx-mono); font-size: 0.64rem; }
    #cyd7 .cyd7-out > span { overflow-wrap: anywhere; }
    #cyd7 .cyd7-out > span::before { content: "✓ "; color: #34c77b; }
    #cyd7 .cyd7-out > .cyd7-o0 { color: #cfe2ff; }
    #cyd7 .cyd7-out > .cyd7-o0::before { content: "› "; color: #5fc8ff; }

    #cyd7 .cyd7-eps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
    #cyd7 .cyd7-flow .cyd7-ep { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 8px 7px; scale: none !important; }
    #cyd7 .cyd7-ep b { max-width: 100%; overflow: hidden; color: #fff; font-family: var(--fx-mono); font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; }
    #cyd7 .cyd7-ep-pill { display: grid; font-size: 0.62rem; font-weight: 700; }
    #cyd7 .cyd7-ep-pill > span { grid-area: 1 / 1; padding: 1px 7px; border-radius: 999px; white-space: nowrap; visibility: hidden; }
    #cyd7 .cyd7-ep-0 { background: rgba(120, 160, 220, 0.16); color: #b9c8e2; }
    #cyd7 .cyd7-ep-iso { display: none; }
    #cyd7 .cyd7-step--6[data-cyd7-iso] .cyd7-ep-iso { display: inline; }
    #cyd7 .cyd7-step--6[data-cyd7-iso] .cyd7-ep-sus { display: none; }
    #cyd7 [data-cyd7-scn="thr"] .cyd7-step--6[data-cyd7-iso] .cyd7-ep:first-child .cyd7-ep-0 { background: rgba(255, 93, 93, 0.18); color: #ff9c90; }
    #cyd7 .cyd7-ep-1 { background: rgba(224, 167, 58, 0.2); color: #f7c46a; }
    #cyd7 .cyd7-ep-2 { background: rgba(52, 199, 123, 0.18); color: #7ee2a8; }
    #cyd7 .cyd7-step--6 .cyd7-ep .cyd7-ep-0,
    #cyd7 .cyd7-step--6[data-cyd7-ep="run"] .cyd7-ep.is-dim .cyd7-ep-0,
    #cyd7 .cyd7-step--6[data-cyd7-ep="done"] .cyd7-ep.is-dim .cyd7-ep-0 { visibility: visible; }
    #cyd7 .cyd7-step--6[data-cyd7-ep="run"] .cyd7-ep:not(.is-dim) .cyd7-ep-0,
    #cyd7 .cyd7-step--6[data-cyd7-ep="done"] .cyd7-ep:not(.is-dim) .cyd7-ep-0 { visibility: hidden; }
    #cyd7 .cyd7-step--6[data-cyd7-ep="run"] .cyd7-ep:not(.is-dim) .cyd7-ep-1,
    #cyd7 .cyd7-step--6[data-cyd7-ep="done"] .cyd7-ep:not(.is-dim) .cyd7-ep-2 { visibility: visible; }
    #cyd7 .cyd7-flow.fx--static .cyd7-step--6:not([data-cyd7-phase=""]) .cyd7-ep:not(.is-dim) .cyd7-ep-0 { visibility: hidden; }
    #cyd7 .cyd7-flow.fx--static .cyd7-step--6:not([data-cyd7-phase=""]) .cyd7-ep:not(.is-dim) .cyd7-ep-2 { visibility: visible; }

    /* ----- Carte 7 : verification ----- */
    #cyd7 .cyd7-state { align-self: flex-start; margin-top: 2px; }

    /* ----- Carte 8 : rapport ----- */
    #cyd7 .cyd7-tl { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 8px; padding-bottom: 3px; border-bottom: 1px dashed var(--cyd7-wline); }
    #cyd7 .cyd7-tl time { color: var(--cyd7-blue); font-family: var(--fx-mono); font-weight: 600; }
    #cyd7 .cyd7-rep-k { padding: 5px 8px; border-left: 3px solid var(--cyd7-blue); border-radius: 0 6px 6px 0; background: #eaf2ff; }
    #cyd7 .cyd7-rep-chips { display: flex; gap: 6px; }
    #cyd7 .cyd7-chip { padding: 1px 8px; border: 1px solid #c9d6ea; border-radius: 5px; background: #fff; font-weight: 700; }

    /* ----- Carte 9 : notification au technicien ----- */
    #cyd7 .cyd7-ntf { display: grid; }
    #cyd7 .cyd7-ntf > * { grid-area: 1 / 1; }

    #cyd7 .cyd7-ntf-wait {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 12px;
        border: 1px dashed rgba(120, 160, 220, 0.38);
        border-radius: 12px;
        background: #0a1530;
        color: var(--text-muted);
        text-align: center;
    }

    #cyd7 .cyd7-ntf-wait .ic { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: rgba(120, 160, 220, 0.14); color: #9fb7dc; }
    #cyd7 .cyd7-ntf-wait b { color: #c4d2ea; font-size: 0.74rem; }

    #cyd7 .cyd7-toast { display: grid; gap: 7px; padding: 10px 11px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 12px; background: rgba(245, 248, 253, 0.97); color: var(--cyd7-ink); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45); }
    #cyd7 .cyd7-toast-h { display: flex; align-items: center; gap: 6px; color: var(--cyd7-ink2); font-weight: 600; }
    #cyd7 .cyd7-toast-h img { width: 16px; height: 16px; border-radius: 4px; }
    #cyd7 .cyd7-toast-b { display: flex; align-items: flex-start; gap: 8px; }

    #cyd7 .cyd7-av {
        display: grid;
        place-items: center;
        flex: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent), var(--accent-bright));
        color: #fff;
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        white-space: nowrap;
    }

    #cyd7 .cyd7-toast-m { min-width: 0; font-weight: 600; }
    #cyd7 .cyd7-toast-a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
    #cyd7 .cyd7-ack { display: inline-flex; align-items: center; gap: 4px; color: #127a44; font-weight: 700; }
    #cyd7 .cyd7-ack .ic { width: 13px; height: 13px; stroke-width: 3; }
    #cyd7 .cyd7-flow .cyd7-step--9[data-cyd7-phase=""] .cyd7-ntf-wait { display: flex; }
    #cyd7 .cyd7-flow .cyd7-step--9[data-cyd7-phase=""] .cyd7-toast { visibility: hidden; }

    /* ----- Controles, progression par carte (1 a 9) et console ----- */
    #cyd7 .cyd7-flow .fx-steps { display: none; }
    #cyd7 .cyd7-steps9 { display: flex; flex: 1 1 90px; align-items: center; gap: 4px; min-width: 60px; }
    #cyd7 .cyd7-steps9 span { flex: 1; height: 4px; border-radius: 2px; background: rgba(120, 160, 220, 0.22); transition: background 0.3s ease; }
    #cyd7 .cyd7-steps9 .is-done { background: rgba(95, 200, 255, 0.55); }
    #cyd7 .cyd7-steps9 .is-cur { background: var(--accent-bright); }

    #cyd7 .cyd7-flow { --fx-log-lines: 3; }
    #cyd7 .cyd7-flow.fx { display: block; }
    #cyd7 .cyd7-flow > .fx-controls { margin-bottom: 14px; }
    #cyd7 .cyd7-flow > .fx-console,
    #cyd7 .cyd7-flow > .cyd7-con-ph { margin-top: 14px; }
    #cyd7 .cyd7-flow > .cyd7-con-ph + .fx-console:not(.is-floating) { margin-top: 0; }
    #cyd7 .cyd7-flow > .fx-console { position: relative; z-index: 6; background: #060d1e; }
    #cyd7 .cyd7-flow .fx-log { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px); mask-image: linear-gradient(to bottom, transparent 0, #000 12px); }
    #cyd7 .cyd7-flow.fx--static .fx-log { -webkit-mask-image: none; mask-image: none; }
    #cyd7 .cyd7-con-ph { display: block; height: 0; }
    #cyd7 .cyd7-con-more { display: none; }

    #cyd7 .cyd7-flow > .fx-console.is-floating {
        position: fixed;
        bottom: 10px;
        display: flex;
        align-items: center;
        gap: 6px 14px;
        margin: 0;
        padding: 7px 8px 7px 14px;
        border-color: rgba(80, 140, 255, 0.3);
        background: rgba(6, 13, 30, 0.8);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
    }

    #cyd7 .fx-console.is-floating .fx-con-head { flex: none; }
    #cyd7 .fx-console.is-floating .fx-con-scn,
    #cyd7 .fx-console.is-floating .fx-con-text,
    #cyd7 .fx-console.is-floating .fx-log { display: none; }
    #cyd7 .fx-console.is-floating .fx-con-live { flex: 1 1 auto; min-width: 0; }
    #cyd7 .fx-console.is-floating .fx-con-title { display: -webkit-box; overflow: hidden; font-size: 0.9rem; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

    #cyd7 .fx-console.is-floating .cyd7-con-more {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 6px;
        min-height: 32px;
        padding: 4px 12px;
        border: 1px solid rgba(120, 160, 220, 0.35);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        color: var(--text);
        font: inherit;
        font-size: 0.78rem;
        cursor: pointer;
    }

    #cyd7 .cyd7-con-more:hover { border-color: var(--cyan); }
    #cyd7 .cyd7-con-more:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
    #cyd7 .fx-console.is-floating.cyd7-con-open .fx-log { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); display: flex; height: calc(4 * 1.6em + 16px); margin: 0; border: 1px solid rgba(95, 200, 255, 0.35); background: #02060f; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6); -webkit-mask-image: none; mask-image: none; }

    #cyd7 .cyd7-flow .fx-edge.is-dim .fx-wire { stroke-opacity: 0.12; }
    #cyd7 .cyd7-flow .fx-elabel.is-dim { opacity: 0; }
    #cyd7 .cyd7-flow .fx-k-secure .fx-wire { stroke-width: 2.2; }

    /* ---------- Visibilite ---------- */
    #cyd7 .cyd7-vis-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; }
    #cyd7 .cyd7-vis-main { display: flex; flex-direction: column; min-width: 0; padding: 18px; }
    #cyd7 .cyd7-tp-stack { display: grid; flex: 1 1 auto; min-width: 0; }
    #cyd7 .cyd7-tp-stack > .cyd7-tp { grid-area: 1 / 1; }
    #cyd7 .cyd7-vis-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-bottom: 16px; }
    #cyd7 .cyd7-vis-head h3,
    #cyd7 .cyd7-feed-head h3 { margin: 0; color: #fff; font-size: 1.08rem; }

    #cyd7 .cyd7-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid rgba(120, 160, 220, 0.25); border-radius: 10px; background: rgba(6, 13, 30, 0.6); }

    #cyd7 .cyd7-tabs [role="tab"] {
        min-height: 36px;
        padding: 6px 14px;
        border: 0;
        border-radius: 7px;
        background: none;
        color: #b9c8e2;
        font: inherit;
        font-size: 0.86rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
    }

    #cyd7 .cyd7-tabs [role="tab"]:hover { color: #fff; background: rgba(95, 200, 255, 0.08); }
    #cyd7 .cyd7-tabs [role="tab"][aria-selected="true"] { background: #1f6fe0; color: #fff; box-shadow: 0 4px 14px rgba(31, 111, 224, 0.4); }
    #cyd7 .cyd7-tabs [role="tab"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

    #cyd7 .cyd7-tp { min-width: 0; }
    #cyd7 .cyd7-tp:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 8px; }
    #cyd7 .cyd7-tp--global { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 18px; }
    #cyd7 .cyd7-tp-off { display: none; }

    @media (min-width: 640px) {
        /* panneaux inactifs : invisibles mais presents, la console garde la hauteur du plus haut */
        #cyd7 .cyd7-tp-stack > .cyd7-tp-off { display: block; visibility: hidden; }
        #cyd7 .cyd7-tp-stack > .cyd7-tp--global.cyd7-tp-off { display: grid; }
    }

    #cyd7 .cyd7-tp:not(.cyd7-tp-off) { animation: cyd7-fade-in 0.25s ease both; }

    #cyd7 .cyd7-assets h4 { margin: 0 0 10px; color: var(--ia-coral-soft); font-family: var(--fx-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
    #cyd7 .cyd7-assets ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
    #cyd7 .cyd7-assets li { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 0.9rem; }
    #cyd7 .cyd7-assets .ic { flex: none; width: 18px; height: 18px; color: #8fc2ff; }

    #cyd7 .cyd7-map {
        position: relative;
        margin: 0;
        overflow: hidden;
        border: 1px solid rgba(80, 140, 255, 0.3);
        border-radius: 12px;
        background: radial-gradient(ellipse at 60% 55%, rgba(31, 111, 224, 0.22), transparent 65%), #071226;
    }

    #cyd7 .cyd7-map-art { position: relative; display: block; aspect-ratio: 990 / 465; }
    #cyd7 .cyd7-map img { display: block; width: 100%; height: 100%; }

    #cyd7 .cyd7-dot {
        --c: var(--cyd7-ok);
        position: absolute;
        left: var(--x);
        top: var(--y);
        width: 9px;
        height: 9px;
        margin: -4.5px 0 0 -4.5px;
        border-radius: 50%;
        background: var(--c);
        box-shadow: 0 0 0 2px rgba(7, 18, 38, 0.9), 0 0 10px var(--c);
        transition: background 0.4s ease, box-shadow 0.4s ease;
    }

    #cyd7 .cyd7-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%); }
    #cyd7 .cyd7-dot[data-cyd7-st="alr"] { --c: var(--cyd7-warn); }
    #cyd7 .cyd7-dot[data-cyd7-st="mnt"] { --c: var(--cyd7-maint); }
    #cyd7 .cyd7-dot[data-cyd7-st="off"] { --c: var(--cyd7-bad); }
    #cyd7 .cyd7-dot[data-cyd7-st="mnt"]::before { content: ""; position: absolute; inset: -6px; border: 1.5px dashed var(--cyd7-maint); border-radius: 50%; }
    #cyd7 .cyd7-dot--hq { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; box-shadow: 0 0 0 2px rgba(7, 18, 38, 0.95), 0 0 0 3.5px rgba(255, 255, 255, 0.9), 0 0 12px var(--c); }

    #cyd7 .cyd7-dot em {
        position: absolute;
        left: 14px;
        top: 50%;
        display: none;
        padding: 1px 6px;
        border: 1px solid rgba(120, 160, 220, 0.35);
        border-radius: 5px;
        background: rgba(6, 13, 30, 0.88);
        color: #dfe8f6;
        font-family: var(--fx-mono);
        font-size: 0.62rem;
        font-style: normal;
        white-space: nowrap;
        transform: translateY(-50%);
    }

    #cyd7 .cyd7-dot[data-cyd7-site="mtl"] em { left: 6px; top: calc(100% + 7px); transform: none; border-color: rgba(255, 255, 255, 0.45); color: #fff; }
    /* Montreal et Quebec gardent leur etiquette a toutes les largeurs */
    #cyd7 .cyd7-dot:is([data-cyd7-site="mtl"], [data-cyd7-site="qc"]) em { display: block; }
    #cyd7 .cyd7-dot[data-cyd7-site="gat"] em { left: auto; right: 14px; }

    #cyd7 .cyd7-map-sum,
    #cyd7 .cyd7-legend-st {
        position: absolute;
        padding: 5px 9px;
        border: 1px solid rgba(120, 160, 220, 0.3);
        border-radius: 8px;
        background: rgba(6, 13, 30, 0.85);
        color: #dfe8f6;
        font-size: 0.7rem;
    }

    #cyd7 .cyd7-map-sum { right: 10px; top: 10px; font-family: var(--fx-mono); font-size: 0.64rem; letter-spacing: 0.04em; }
    #cyd7 .cyd7-legend-st { left: 10px; bottom: 10px; display: grid; gap: 3px; margin: 0; list-style: none; }
    #cyd7 .cyd7-legend-st li { display: flex; align-items: center; gap: 7px; }
    #cyd7 .cyd7-legend-st i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyd7-ok); }
    #cyd7 .cyd7-legend-st i[data-cyd7-st="alr"] { background: var(--cyd7-warn); }
    #cyd7 .cyd7-legend-st i[data-cyd7-st="mnt"] { background: var(--cyd7-maint); }
    #cyd7 .cyd7-legend-st i[data-cyd7-st="off"] { background: var(--cyd7-bad); }

    #cyd7 .cyd7-tbl { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
    #cyd7 .cyd7-tbl caption { padding: 0 0 10px; color: var(--text-muted); font-family: var(--fx-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-align: left; text-transform: uppercase; }
    #cyd7 .cyd7-tbl th,
    #cyd7 .cyd7-tbl td { padding: 9px 10px; border-bottom: 1px solid rgba(120, 160, 220, 0.14); text-align: left; }
    #cyd7 .cyd7-tbl thead th { color: var(--text-muted); font-family: var(--fx-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
    #cyd7 .cyd7-tbl tbody th { color: #fff; font-weight: 600; }
    #cyd7 .cyd7-tbl td { color: var(--text); }
    #cyd7 .cyd7-tbl .cyd7-pill { font-size: 0.74rem; }
    @media (min-width: 640px) {
        /* tableaux compacts : la console garde la hauteur de la vue globale (pas de bande vide autour de la carte) */
        #cyd7 .cyd7-tbl { font-size: 0.84rem; line-height: 1.3; }
        #cyd7 .cyd7-tbl caption { padding-bottom: 6px; }
        #cyd7 .cyd7-tbl :is(th, td) { padding-top: 3px; padding-bottom: 3px; }
        #cyd7 .cyd7-tbl .cyd7-pill { font-size: 0.7rem; line-height: 1.35; }
        #cyd7 .cyd7-tp-stack > .cyd7-tp { align-self: center; }
    }

    #cyd7 .cyd7-hbar-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
    #cyd7 .cyd7-hbar-list li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 3.6em; align-items: center; gap: 12px; font-size: 0.88rem; }
    #cyd7 .cyd7-hbar-list b { color: #fff; text-align: right; }
    #cyd7 .cyd7-hbar { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(120, 160, 220, 0.16); }
    #cyd7 .cyd7-hbar i { display: block; min-width: 4px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2f80f0, #5fc8ff); }
    #cyd7 .cyd7-hbar-list--thr .cyd7-hbar i { background: linear-gradient(90deg, #d6453a, #ff8a65); }
    #cyd7 .cyd7-tp-foot { margin: 14px 0 0; color: var(--text-muted); font-size: 0.84rem; }
    #cyd7 .cyd7-thr-big { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
    #cyd7 .cyd7-thr-big b { color: #fff; font-size: 2.6rem; line-height: 1; }
    #cyd7 .cyd7-thr-big span { color: var(--text-muted); font-size: 0.9rem; }

    #cyd7 .cyd7-feed { display: flex; flex-direction: column; min-width: 0; padding: 18px; }
    #cyd7 .cyd7-feed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
    #cyd7 .cyd7-feed-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5aa5ff, #1f4fb3 70%); color: #fff; box-shadow: 0 0 16px rgba(95, 170, 255, 0.5); }
    #cyd7 .cyd7-feed-ic .ic { width: 18px; height: 18px; fill: rgba(255, 255, 255, 0.25); }
    #cyd7 .cyd7-live--dark { margin-left: auto; color: #7ee2a8; font-size: 0.74rem; font-weight: 700; }

    #cyd7 .cyd7-feed-list { position: relative; display: grid; flex: 1 1 auto; align-content: start; gap: 6px; margin: 0; padding: 8px; border-radius: 10px; background: rgba(245, 248, 253, 0.97); list-style: none; }
    #cyd7 .cyd7-fr { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; background: #fff; color: var(--cyd7-ink); box-shadow: 0 1px 2px rgba(20, 40, 80, 0.08); }
    #cyd7 .cyd7-fr > span { display: flex; flex-direction: column; min-width: 0; }
    #cyd7 .cyd7-fr b { font-size: 0.84rem; line-height: 1.25; }
    #cyd7 .cyd7-fr b + span { overflow: hidden; color: var(--cyd7-ink2); font-size: 0.76rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
    #cyd7 .cyd7-fr em { color: var(--cyd7-ink2); font-size: 0.72rem; font-style: normal; white-space: nowrap; }
    #cyd7 .cyd7-fr-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; }
    #cyd7 .cyd7-fr-ic .ic { width: 16px; height: 16px; stroke-width: 2.4; }
    #cyd7 .cyd7-fr--bad { background: #d6453a; }
    #cyd7 .cyd7-fr--ai { background: #1f6fe0; }
    #cyd7 .cyd7-fr--ok { background: #18a058; }
    #cyd7 .cyd7-fr--gear { background: #0b1733; }
    #cyd7 .cyd7-feed-list { overflow: hidden; align-content: space-between; }

    #cyd7 .cyd7-feed-tog {
        display: grid;
        place-items: center;
        flex: none;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 1px solid rgba(120, 160, 220, 0.35);
        border-radius: 50%;
        background: rgba(6, 13, 30, 0.6);
        color: #dfe8f6;
        cursor: pointer;
    }

    #cyd7 .cyd7-feed-tog[hidden] { display: none; }
    #cyd7 .cyd7-feed-tog .ic { width: 13px; height: 13px; }
    #cyd7 .cyd7-feed-tog:hover { border-color: var(--cyan); }
    #cyd7 .cyd7-feed-tog:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

    /* ---------- Tarifs ---------- */
    #cyd7 .cyd7-price-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
    #cyd7 .cyd7-plan,
    #cyd7 .cyd7-complete { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; }
    #cyd7 .cyd7-plan-h { display: flex; align-items: center; gap: 14px; }
    #cyd7 .cyd7-plan-h h3,
    #cyd7 .cyd7-complete h3 { margin: 0; color: #fff; font-size: 1.15rem; }
    #cyd7 .cyd7-plan-h p { margin: 2px 0 0; color: var(--text-muted); font-size: 0.86rem; line-height: 1.35; }
    #cyd7 .cyd7-plan-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 1.5px solid rgba(79, 155, 255, 0.6); border-radius: 12px; background: rgba(79, 155, 255, 0.12); color: #8fc2ff; }
    #cyd7 .cyd7-plan-ic .ic { width: 24px; height: 24px; }
    #cyd7 .cyd7-eset-logo { flex: none; width: 76px; height: auto; }
    #cyd7 .cyd7-p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
    #cyd7 .cyd7-p-n { color: #fff; font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
    #cyd7 .cyd7-p-u { color: var(--text); font-size: 0.95rem; white-space: nowrap; }
    #cyd7 .cyd7-p--lic { color: #7fe3d2; font-size: 1.05rem; font-weight: 700; }
    #cyd7 .cyd7-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
    #cyd7 .cyd7-checks li { display: flex; align-items: flex-start; gap: 9px; color: var(--text); font-size: 0.9rem; line-height: 1.4; }
    #cyd7 .cyd7-checks .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--cyd7-ok); stroke-width: 2.4; }
    #cyd7 .cyd7-checks strong { color: #fff; }
    #cyd7 .cyd7-plan--eset .cyd7-checks .ic { color: var(--cyd7-eset); }
    #cyd7 .cyd7-complete .ia-btn { width: 100%; margin-top: auto; }
    #cyd7 .cyd7-plan .cyd7-checks { margin-top: auto; }

    #cyd7 .cyd7-op {
        display: grid;
        place-items: center;
        justify-self: center;
        align-self: center;
        width: 34px;
        height: 34px;
        border: 1px solid rgba(120, 160, 220, 0.45);
        border-radius: 50%;
        background: #0b1631;
        color: #fff;
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1;
    }

    #cyd7 .cyd7-combo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        min-width: 0;
        padding: 22px 20px;
        border: 1.5px solid rgba(232, 87, 74, 0.7);
        border-radius: 14px;
        background: linear-gradient(160deg, rgba(232, 87, 74, 0.16), rgba(10, 20, 44, 0.9) 70%);
        box-shadow: 0 0 34px rgba(232, 87, 74, 0.18);
        text-align: center;
    }

    #cyd7 .cyd7-combo .cyd7-p { justify-content: center; }
    #cyd7 .cyd7-combo-k { color: var(--ia-coral-soft); font-family: var(--fx-mono); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
    #cyd7 .cyd7-combo h3 { margin: 0; color: #fff; font-size: 1.1rem; }
    #cyd7 .cyd7-combo-from { color: var(--text-muted); font-size: 0.88rem; }
    #cyd7 .cyd7-combo-d { color: var(--text); font-size: 0.84rem; }
    #cyd7 .cyd7-combo-s { color: var(--text-muted); font-size: 0.76rem; }

    /* ======================================================================
       Animations (toujours actives, prefers-reduced-motion ignore).
       L'etat de base est l'etat final lisible ; chaque animation aboutit a cet etat.
       ====================================================================== */
    /* --- hero --- */
    #cyd7 .cyd7-roll { animation: cyd7-roll 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
    #cyd7 [data-cyd7-hphase] .cyd7-ag-txt > span { animation: cyd7-fade-up 0.3s ease both; }
    #cyd7 [data-cyd7-hphase] .cyd7-ag-txt > span + span { animation-delay: 0.06s; }
    #cyd7 [data-cyd7-hphase] .cyd7-ag-txt > span + span + span { animation-delay: 0.12s; }
    #cyd7 [data-cyd7-hphase="calm"] .cyd7-ag-bar i { animation: cyd7-scan 1.4s ease-in-out infinite; }
    #cyd7 [data-cyd7-hphase="investigate"] .cyd7-ag-bar i { animation: cyd7-fill 2.2s ease 0.1s both; }
    #cyd7 .cyd7-ag-ic::after { content: ""; position: absolute; inset: -0.35em; border-radius: 50%; box-shadow: 0 0 1.4em rgba(95, 170, 255, 0.7); opacity: 0.3; animation: cyd7-glow 2s ease-in-out infinite; }
    #cyd7 .cyd7-hfeed .cyd7-new { animation: cyd7-row-in 0.45s ease 0.2s both; }
    #cyd7 .cyd7-hero-fx .cyd7-live i { animation: cyd7-blink 1.6s ease-in-out infinite; }
    #cyd7 [data-cyd7-hphase="detect"] .cyd7-kpi--inc::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: rgba(255, 93, 93, 0.22); pointer-events: none; animation: cyd7-flash 0.6s ease 2 both; }
    #cyd7 [data-cyd7-hphase="detect"] .cyd7-spk-end,
    #cyd7 [data-cyd7-hphase="investigate"] .cyd7-spk-end { animation: cyd7-ping 0.9s ease-in-out infinite; }
    #cyd7 [data-cyd7-hphase="detect"] .cyd7-tc-new,
    #cyd7 [data-cyd7-hphase="contain"] .cyd7-tc-ok { animation: cyd7-pop 0.35s ease 0.2s both; }
    #cyd7 [data-cyd7-hphase="detect"] .cyd7-db-bell i { animation: cyd7-pop 0.3s ease both; }
    #cyd7 [data-cyd7-hphase="contain"] .cyd7-kpi--inc .cyd7-kpi-s { animation: cyd7-pop 0.35s ease 0.25s both; }
    /* la courbe se trace de gauche a droite (decoupe du bloc : le trait, l'aire et le point final arrivent ensemble) */
    #cyd7 .cyd7-drawn .cyd7-spk { animation: cyd7-wipe 1.4s ease 0.1s both; }
    #cyd7 .cyd7-drawn .cyd7-dn { animation: cyd7-dash-in 1.2s cubic-bezier(0.3, 0.7, 0.3, 1) both; }
    #cyd7 .cyd7-drawn .cyd7-hb i { animation: cyd7-grow 0.9s cubic-bezier(0.3, 0.7, 0.3, 1) both; }
    #cyd7 .cyd7-drawn .cyd7-hbars li:nth-child(2) .cyd7-hb i { animation-delay: 0.1s; }
    #cyd7 .cyd7-drawn .cyd7-hbars li:nth-child(3) .cyd7-hb i { animation-delay: 0.2s; }
    #cyd7 .cyd7-drawn .cyd7-hbars li:nth-child(4) .cyd7-hb i { animation-delay: 0.3s; }
    #cyd7 .cyd7-hero-fx.is-paused :is(.cyd7-ag-bar i, .cyd7-live i, .cyd7-spk-end),
    #cyd7 .cyd7-hero-fx.is-idle :is(.cyd7-ag-bar i, .cyd7-live i, .cyd7-spk-end) { animation-play-state: paused; }
    #cyd7 .cyd7-hero-fx.is-paused .cyd7-ag-ic::after,
    #cyd7 .cyd7-hero-fx.is-idle .cyd7-ag-ic::after { animation-play-state: paused; }

    /* --- serpentin : flash a l'activation des cartes-noeuds --- */
    #cyd7 .cyd7-flow .fx-node.cyd7-step.is-lit::after {
        content: "";
        position: absolute;
        inset: -1px;
        border: 2px solid var(--fx-accent);
        border-radius: inherit;
        pointer-events: none;
        animation: cyd7-ring 0.9s ease-out both;
    }

    /* fenetres : ouverture depuis la barre de titre, action, puis repli sur la barre qui affiche le resultat ;
       l'espace libere montre le resultat dans le contour pointille (.cyd7-wg-done), comme sur Secure-Exchanges.
       En mouvement reduit, les fenetres restent ouvertes (etat final). */
    #cyd7 .cyd7-step:not([data-cyd7-phase=""]):not(.cyd7-step--6) .cyd7-wslot > .cyd7-win { animation: cyd7-w-open 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both, cyd7-w-close 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) var(--cyd7-shut-at) forwards; }
    #cyd7 .cyd7-step:not([data-cyd7-phase=""]):not(.cyd7-step--6) .cyd7-wslot > .cyd7-win > .cyd7-win-in { animation: cyd7-w-body-out 0.3s cubic-bezier(0.5, 0, 0.75, 0) var(--cyd7-shut-at) forwards; }
    #cyd7 .cyd7-step:not([data-cyd7-phase=""]):not(.cyd7-step--6) .cyd7-wres { animation: cyd7-w-res 0.35s cubic-bezier(0.3, 0.7, 0.3, 1) calc(var(--cyd7-shut-at) + 0.3s) forwards; }
    #cyd7 .cyd7-step:not([data-cyd7-phase=""]):not(.cyd7-step--6) .cyd7-wghost { animation: cyd7-w-ghost 0.35s ease calc(var(--cyd7-shut-at) + 0.1s) forwards; }
    #cyd7 .cyd7-step--3 { --cyd7-shut-at: 2s; }
    #cyd7 .cyd7-step--4 { --cyd7-shut-at: 2.4s; }
    #cyd7 .cyd7-step--5 { --cyd7-shut-at: 2s; }
    #cyd7 .cyd7-step--7 { --cyd7-shut-at: 2s; }
    #cyd7 .cyd7-step--8 { --cyd7-shut-at: 1.9s; }

    /* carte 6 en deux temps : 6a la console envoie le script (barre jusqu'a 40 %), 6b les postes l'executent
       (barre jusqu'au bout, sorties une a une, compteur N/N), puis le resultat quand l'etape 7 commence (data-cyd7-ep="done") */
    #cyd7 .cyd7-step--6:not([data-cyd7-phase=""])[data-cyd7-ep=""] .cyd7-wslot > .cyd7-win { animation: cyd7-w-reveal 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
    #cyd7 .cyd7-step--6:not([data-cyd7-phase=""])[data-cyd7-ep=""] .cyd7-prog-bar i { animation: cyd7-prog-a 1.6s ease 0.6s both; }
    #cyd7 .cyd7-step--6:not([data-cyd7-phase=""])[data-cyd7-ep=""] .cyd7-pn-0 { visibility: visible; }
    #cyd7 .cyd7-step--6:not([data-cyd7-phase=""])[data-cyd7-ep=""] .cyd7-pn-1 { visibility: hidden; }
    #cyd7 .cyd7-step--6:not([data-cyd7-phase=""])[data-cyd7-ep=""] .cyd7-out > .cyd7-o0 { animation: cyd7-fade-up 0.3s ease 1s both; }
    #cyd7 .cyd7-step--6:not([data-cyd7-phase=""])[data-cyd7-ep=""] .cyd7-out > :is(.cyd7-o1, .cyd7-o2, .cyd7-o3) { opacity: 0; }
    #cyd7 .cyd7-step--6[data-cyd7-ep="run"] .cyd7-prog-bar i { animation: cyd7-prog-b 1.1s ease-in-out both; }
    #cyd7 .cyd7-step--6[data-cyd7-ep="run"] .cyd7-pn-0 { animation: cyd7-vis-window 1.1s steps(1) both; }
    #cyd7 .cyd7-step--6[data-cyd7-ep="run"] .cyd7-pn-1 { animation: cyd7-vis-late 1.1s steps(1) both, cyd7-pop 0.3s ease 1.1s both; }
    #cyd7 .cyd7-step--6[data-cyd7-ep="run"] .cyd7-out > .cyd7-o1 { animation: cyd7-fade-up 0.3s ease 0.15s both; }
    #cyd7 .cyd7-step--6[data-cyd7-ep="run"] .cyd7-out > .cyd7-o2 { animation: cyd7-fade-up 0.3s ease 0.5s both; }
    #cyd7 .cyd7-step--6[data-cyd7-ep="run"] .cyd7-out > .cyd7-o3 { animation: cyd7-fade-up 0.3s ease 0.85s both; }
    /* la console RMM est un noeud : repli par decoupe seulement (jamais de transformation) */
    #cyd7 .cyd7-step--6[data-cyd7-ep="done"] .cyd7-wslot > .cyd7-win { animation: cyd7-w-shut 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both; }
    #cyd7 .cyd7-step--6[data-cyd7-ep="done"] .cyd7-wslot > .cyd7-win > .cyd7-win-in { animation: cyd7-w-body-out 0.3s cubic-bezier(0.5, 0, 0.75, 0) 0.15s forwards; }
    #cyd7 .cyd7-step--6[data-cyd7-ep="done"] .cyd7-wres { animation: cyd7-w-res 0.35s cubic-bezier(0.3, 0.7, 0.3, 1) 0.45s forwards; }
    #cyd7 .cyd7-step--6[data-cyd7-ep="done"] .cyd7-wghost { animation: cyd7-w-ghost 0.35s ease 0.25s forwards; }

    /* carte 1 */
    #cyd7 .cyd7-step--1[data-cyd7-phase="start"] .cyd7-term-l { animation: cyd7-reveal 0.9s steps(18) 0.25s both; }
    /* l'etiquette precedente reste en place jusqu'a l'arrivee de la suivante (jamais de pastille vide) */
    #cyd7 .cyd7-step--1[data-cyd7-phase="start"] .cyd7-st-0 { animation: cyd7-vis-window 1.15s steps(1) both; }
    #cyd7 .cyd7-step--1[data-cyd7-phase="start"] .cyd7-st-1 { animation: cyd7-vis-late 1.15s steps(1) both, cyd7-pop 0.35s ease 1.15s both; }
    #cyd7 .cyd7-step--1[data-cyd7-phase="back"] .cyd7-st-1 { animation: cyd7-vis-window 0.2s steps(1) both; }
    #cyd7 .cyd7-step--1[data-cyd7-phase="back"] .cyd7-st-2 { animation: cyd7-vis-late 0.2s steps(1) both, cyd7-pop 0.35s ease 0.2s both; }
    #cyd7 .cyd7-step--1[data-cyd7-phase="start"] .cyd7-dev-ic { animation: cyd7-alarm 0.5s ease 1.2s 2; }
    #cyd7 .cyd7-step--1.is-lit .cyd7-agent i { animation: cyd7-blink 1s ease-in-out infinite; }

    /* carte 2 */
    #cyd7 .cyd7-step--2[data-cyd7-phase="on"] .cyd7-hot { animation: cyd7-slide-down 0.4s ease 0.3s both; }
    #cyd7 .cyd7-step--2[data-cyd7-phase="on"] .cyd7-stream li:not(.cyd7-hot) { animation: cyd7-shift 0.4s ease 0.3s both; }
    #cyd7 .cyd7-step--2[data-cyd7-phase="on"] .cyd7-mb i { animation: cyd7-grow 0.8s ease both; }
    #cyd7 .cyd7-step--2.is-lit .cyd7-rec,
    #cyd7 .cyd7-step--2.is-lit .cyd7-tele-rate { animation: cyd7-blink 1s ease-in-out infinite; }

    /* carte 3 */
    #cyd7 .cyd7-step--3:not([data-cyd7-phase=""]) .cyd7-kv { animation: cyd7-fade-up 0.3s ease both; }
    #cyd7 .cyd7-step--3:not([data-cyd7-phase=""]) .cyd7-r1 { animation-delay: 0.4s; }
    #cyd7 .cyd7-step--3:not([data-cyd7-phase=""]) .cyd7-r2 { animation-delay: 0.7s; }
    #cyd7 .cyd7-step--3:not([data-cyd7-phase=""]) .cyd7-r3 { animation-delay: 1s; }
    #cyd7 .cyd7-step--3:not([data-cyd7-phase=""]) .cyd7-r4 { animation-delay: 1.3s; }
    #cyd7 .cyd7-step--3:not([data-cyd7-phase=""]) .cyd7-pill { animation: cyd7-pop 0.35s ease 1.15s both; }
    #cyd7 .cyd7-flow:not(.is-paused):not(.is-idle) .cyd7-step--3[data-cyd7-phase=""] .cyd7-radar { animation: cyd7-spin 2.4s linear infinite; }

    /* cartes 4, 5 et 7 : les verifications se cochent une a une */
    #cyd7 .cyd7-step:not([data-cyd7-phase=""]) .cyd7-chk { animation: cyd7-fade-up 0.3s ease both; }
    #cyd7 .cyd7-step:not([data-cyd7-phase=""]) .cyd7-chk .ic { animation: cyd7-pop 0.3s ease both; }
    #cyd7 .cyd7-step--4:not([data-cyd7-phase=""]) .cyd7-tree > span { animation: cyd7-reveal 0.35s steps(8) both; }
    #cyd7 .cyd7-step--4:not([data-cyd7-phase=""]) .cyd7-tree > span:nth-child(3n+2) { animation-delay: 0.25s; }
    #cyd7 .cyd7-step--4:not([data-cyd7-phase=""]) .cyd7-tree > span:nth-child(3n) { animation-delay: 0.5s; }
    #cyd7 .cyd7-step--4:not([data-cyd7-phase=""]) .cyd7-c1,
    #cyd7 .cyd7-step--4:not([data-cyd7-phase=""]) .cyd7-c1 .ic { animation-delay: 0.8s; }
    #cyd7 .cyd7-step--4:not([data-cyd7-phase=""]) .cyd7-c2,
    #cyd7 .cyd7-step--4:not([data-cyd7-phase=""]) .cyd7-c2 .ic { animation-delay: 1.15s; }
    #cyd7 .cyd7-step--4:not([data-cyd7-phase=""]) .cyd7-c3,
    #cyd7 .cyd7-step--4:not([data-cyd7-phase=""]) .cyd7-c3 .ic { animation-delay: 1.5s; }
    #cyd7 .cyd7-step--4:not([data-cyd7-phase=""]) .cyd7-vd-bar i { animation: cyd7-grow 0.6s ease 1.7s both; }
    #cyd7 .cyd7-step--4:not([data-cyd7-phase=""]) .cyd7-verdict b { animation: cyd7-fade-in 0.3s ease 2.1s both; }
    #cyd7 .cyd7-step--5:not([data-cyd7-phase=""]) .cyd7-c1,
    #cyd7 .cyd7-step--5:not([data-cyd7-phase=""]) .cyd7-c1 .ic { animation-delay: 0.8s; }
    #cyd7 .cyd7-step--5:not([data-cyd7-phase=""]) .cyd7-c2,
    #cyd7 .cyd7-step--5:not([data-cyd7-phase=""]) .cyd7-c2 .ic { animation-delay: 1.1s; }
    #cyd7 .cyd7-step--5:not([data-cyd7-phase=""]) .cyd7-c3,
    #cyd7 .cyd7-step--5:not([data-cyd7-phase=""]) .cyd7-c3 .ic { animation-delay: 1.4s; }
    #cyd7 .cyd7-step--5[data-cyd7-phase="iso"] .cyd7-iso-link i:first-child { animation: cyd7-cut-l 0.5s cubic-bezier(0.3, 0.7, 0.3, 1) 0.45s both; }
    #cyd7 .cyd7-step--5[data-cyd7-phase="iso"] .cyd7-iso-link i:last-child { animation: cyd7-cut-r 0.5s cubic-bezier(0.3, 0.7, 0.3, 1) 0.45s both; }
    #cyd7 .cyd7-step--5[data-cyd7-phase="iso"] .cyd7-iso-a { animation: cyd7-alarm 0.5s ease 0.5s 1; }
    #cyd7 .cyd7-step--5:not([data-cyd7-phase=""]) .cyd7-iso-t { animation: cyd7-fade-in 0.3s ease 0.6s both; }
    #cyd7 .cyd7-step--7:not([data-cyd7-phase=""]) .cyd7-c1,
    #cyd7 .cyd7-step--7:not([data-cyd7-phase=""]) .cyd7-c1 .ic { animation-delay: 0.4s; }
    #cyd7 .cyd7-step--7:not([data-cyd7-phase=""]) .cyd7-c2,
    #cyd7 .cyd7-step--7:not([data-cyd7-phase=""]) .cyd7-c2 .ic { animation-delay: 0.9s; }
    #cyd7 .cyd7-step--7:not([data-cyd7-phase=""]) .cyd7-c3,
    #cyd7 .cyd7-step--7:not([data-cyd7-phase=""]) .cyd7-c3 .ic { animation-delay: 1.4s; }
    #cyd7 .cyd7-step--7:not([data-cyd7-phase=""]) .cyd7-state { animation: cyd7-pop 0.35s ease 1.65s both; }

    /* carte 6 : pastilles des postes */
    #cyd7 .cyd7-step--6[data-cyd7-ep="done"] .cyd7-ep:not(.is-dim) .cyd7-ep-2 { animation: cyd7-pop 0.3s ease both; }
    #cyd7 .cyd7-flow:not(.is-paused):not(.is-idle) .cyd7-step--6[data-cyd7-ep="run"] .cyd7-ep:not(.is-dim) .cyd7-ep-1 { animation: cyd7-blink 0.8s ease-in-out infinite; }

    /* carte 8 */
    #cyd7 .cyd7-step--8:not([data-cyd7-phase=""]) .cyd7-tl { animation: cyd7-reveal 0.4s ease both; }
    #cyd7 .cyd7-step--8:not([data-cyd7-phase=""]) .cyd7-t1 { animation-delay: 0.35s; }
    #cyd7 .cyd7-step--8:not([data-cyd7-phase=""]) .cyd7-t2 { animation-delay: 0.65s; }
    #cyd7 .cyd7-step--8:not([data-cyd7-phase=""]) .cyd7-t3 { animation-delay: 0.95s; }
    #cyd7 .cyd7-step--8:not([data-cyd7-phase=""]) .cyd7-rep-k { animation: cyd7-fade-up 0.35s ease 1.2s both; }
    #cyd7 .cyd7-step--8:not([data-cyd7-phase=""]) .cyd7-chip { animation: cyd7-pop 0.3s ease 1.45s both; }
    #cyd7 .cyd7-step--8:not([data-cyd7-phase=""]) .cyd7-chip + .cyd7-chip { animation-delay: 1.6s; }

    /* carte 9 */
    #cyd7 .cyd7-step--9:not([data-cyd7-phase=""]) .cyd7-toast { animation: cyd7-drop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; }
    #cyd7 .cyd7-step--9:not([data-cyd7-phase=""]) .cyd7-cursor { animation: cyd7-cur-in 0.6s cubic-bezier(0.3, 0.7, 0.3, 1) 0.9s both, cyd7-vis-out 0.1s steps(1) 1.9s forwards; }
    #cyd7 .cyd7-step--9:not([data-cyd7-phase=""]) .cyd7-btn-blue { animation: cyd7-press 0.3s ease 1.6s both; }
    #cyd7 .cyd7-step--9:not([data-cyd7-phase=""]) .cyd7-ack { animation: cyd7-pop 0.35s ease 2s both; }

    /* a l'arret (precedent / suivant), seules les animations decoratives en boucle s'arretent :
       l'etape affichee se joue jusqu'au bout (le bouton pause gele tout, voir is-frozen) */
    #cyd7 .cyd7-flow:is(.is-paused, .is-idle) .cyd7-step :is(.cyd7-agent i, .cyd7-rec, .cyd7-tele-rate) { animation-play-state: paused; }

    /* --- RMM : flux de telemetrie (vers la console) et actions (vers les appareils, une a la fois).
           Une seule passe de 4,8 s a chaque entree dans l'ecran (WCAG 2.2.2 : pas de mouvement de plus de 5 s) --- */
    #cyd7 .cyd7-hub.is-live .cyd7-hub-in path { animation: cyd7-dash 1.2s linear 4; }
    #cyd7 .cyd7-hub.is-live .cyd7-hub-out path { animation: cyd7-dash 1.2s linear 4, cyd7-spoke 0.8s ease; }
    #cyd7 .cyd7-hub.is-live .cyd7-hub-out path:nth-child(2) { animation-delay: 0s, 0.8s; }
    #cyd7 .cyd7-hub.is-live .cyd7-hub-out path:nth-child(3) { animation-delay: 0s, 1.6s; }
    #cyd7 .cyd7-hub.is-live .cyd7-hub-out path:nth-child(4) { animation-delay: 0s, 2.4s; }
    #cyd7 .cyd7-hub.is-live .cyd7-hub-out path:nth-child(5) { animation-delay: 0s, 3.2s; }
    #cyd7 .cyd7-hub.is-live .cyd7-hub-out path:nth-child(6) { animation-delay: 0s, 4s; }
    #cyd7 .cyd7-hub.is-live .cyd7-hub-core { animation: cyd7-core 2.4s ease-in-out 2; }
    #cyd7 .cyd7-hub.is-live .cyd7-hub-sat circle { animation: cyd7-blink 1.6s ease-in-out 3; }

    /* --- regles ESET : une bande balaie les regles une a une, le verrou de l'approbation ressort (une passe de 4,8 s) --- */
    #cyd7 .cyd7-rules.is-live .cyd7-rule::before { animation: cyd7-sweep 1.2s ease; }
    #cyd7 .cyd7-rules.is-live .cyd7-rule:nth-of-type(4)::before { animation-delay: 1.2s; }
    #cyd7 .cyd7-rules.is-live .cyd7-rule:nth-of-type(5)::before { animation-delay: 2.4s; }
    #cyd7 .cyd7-rules.is-live .cyd7-rule:nth-of-type(6)::before { animation-delay: 3.6s; }
    #cyd7 .cyd7-rules.is-live .cyd7-rule--appr .cyd7-lock { animation: cyd7-lockpop 1.2s ease 2.4s; }

    /* --- visibilite : points de la carte et flux « IA en action » --- */
    #cyd7 .cyd7-vis.is-live .cyd7-dot[data-cyd7-st="alr"] { animation: cyd7-blink 1s ease-in-out infinite; }
    #cyd7 .cyd7-vis.is-live .cyd7-dot[data-cyd7-st="ok"]::after { animation: cyd7-breathe 3.2s ease-in-out infinite; }
    #cyd7 .cyd7-vis.is-live .cyd7-dot[data-cyd7-st="mnt"]::before { animation: cyd7-spin 4s linear infinite; }
    #cyd7 .cyd7-vis.is-live .cyd7-live i { animation: cyd7-blink 1.6s ease-in-out infinite; }
    #cyd7 .cyd7-vis.is-live.cyd7-vis-paused .cyd7-dot[data-cyd7-st],
    #cyd7 .cyd7-vis.is-live.cyd7-vis-paused .cyd7-dot[data-cyd7-st]::before,
    #cyd7 .cyd7-vis.is-live.cyd7-vis-paused .cyd7-dot[data-cyd7-st]::after,
    #cyd7 .cyd7-vis.is-live.cyd7-vis-paused .cyd7-live i { animation-play-state: paused; }
    #cyd7 .cyd7-fr.cyd7-in { animation: cyd7-row-in 0.4s ease both; }

    /* fleche de la note manuscrite : quelques passages seulement */
    #cyd7 .cyd7-note-arrow path:first-child { animation: cyd7-dash2 1.6s linear 0.8s infinite; }

    @keyframes cyd7-roll { from { opacity: 0; transform: translateY(0.6em); } to { opacity: 1; transform: none; } }
    @keyframes cyd7-fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes cyd7-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    @keyframes cyd7-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
    @keyframes cyd7-shift { from { transform: translateY(-1.2em); } to { transform: none; } }
    @keyframes cyd7-row-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
    @keyframes cyd7-pop { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
    @keyframes cyd7-press { 0%, 100% { transform: none; } 45% { transform: scale(0.92); } }
    @keyframes cyd7-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
    @keyframes cyd7-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    @keyframes cyd7-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes cyd7-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    @keyframes cyd7-scan { 0% { transform: translateX(-100%) scaleX(0.4); } 100% { transform: translateX(100%) scaleX(0.4); } }
    @keyframes cyd7-wipe { from { clip-path: inset(-1em 100% -1em -1em); } to { clip-path: inset(-1em -1em -1em -1em); } }
    @keyframes cyd7-dash-in { from { stroke-dasharray: 0 100; } }
    @keyframes cyd7-glow { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.85; } }
    @keyframes cyd7-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
    @keyframes cyd7-flash { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
    @keyframes cyd7-ping { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
    @keyframes cyd7-alarm { 0%, 100% { background: #0b1733; } 50% { background: #b8322a; color: #fff; } }
    @keyframes cyd7-spin { to { transform: rotate(360deg); } }
    @keyframes cyd7-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.025); } }
    @keyframes cyd7-cut-l { from { transform: none; background: #8fb3e6; } to { transform: translateX(-6px); } }
    @keyframes cyd7-cut-r { from { transform: none; background: #8fb3e6; } to { transform: translateX(6px); } }
    @keyframes cyd7-cur-in { from { opacity: 0; transform: translate(-40px, 26px); } 70% { opacity: 1; } to { opacity: 1; transform: none; } }
    @keyframes cyd7-vis-out { 0%, 99% { visibility: visible; } 100% { visibility: hidden; } }
    @keyframes cyd7-vis-late { 0%, 99% { visibility: hidden; } 100% { visibility: visible; } }
    @keyframes cyd7-vis-window { 0%, 99% { visibility: visible; } 100% { visibility: hidden; } }
    @keyframes cyd7-w-open { from { clip-path: inset(0 0 calc(100% - var(--cyd7-bar)) 0 round 8px); opacity: 0.6; transform: scale(0.96); } to { clip-path: inset(-40px round 8px); opacity: 1; transform: none; } }
    @keyframes cyd7-w-reveal { from { clip-path: inset(0 0 calc(100% - var(--cyd7-bar)) 0 round 8px); } to { clip-path: inset(-40px round 8px); } }
    @keyframes cyd7-w-close { from { clip-path: inset(-40px round 8px); } to { clip-path: inset(0 0 calc(100% - var(--cyd7-bar)) 0 round 8px); } }
    @keyframes cyd7-w-shut { from { clip-path: inset(-40px round 8px); } to { clip-path: inset(0 0 calc(100% - var(--cyd7-bar)) 0 round 8px); box-shadow: none; } }
    @keyframes cyd7-w-body-out { to { opacity: 0; transform: translateY(-6px) scale(0.97); } }
    @keyframes cyd7-w-ghost { from { opacity: 0; visibility: visible; } to { opacity: 1; visibility: visible; } }
    @keyframes cyd7-prog-a { from { transform: scaleX(0); } to { transform: scaleX(0.4); } }
    @keyframes cyd7-prog-b { from { transform: scaleX(0.4); } to { transform: scaleX(1); } }
    @keyframes cyd7-w-res { from { clip-path: inset(0 100% 0 0 round 8px); visibility: visible; } to { clip-path: inset(0 0 0 0 round 8px); visibility: visible; } }
    @keyframes cyd7-dash { to { stroke-dashoffset: -20; } }
    @keyframes cyd7-dash2 { to { stroke-dashoffset: -22; } }
    @keyframes cyd7-spoke { 0%, 75% { opacity: 1; } 100% { opacity: 0.55; } }
    @keyframes cyd7-core { 0%, 100% { filter: drop-shadow(0 0 10px rgba(79, 155, 255, 0.45)); } 50% { filter: drop-shadow(0 0 20px rgba(79, 155, 255, 0.8)); } }
    @keyframes cyd7-sweep { 0% { opacity: 0; } 15%, 65% { opacity: 1; } 100% { opacity: 0; } }
    @keyframes cyd7-lockpop { 0%, 20% { transform: none; } 45% { transform: scale(1.12); box-shadow: 0 0 0 4px rgba(240, 198, 116, 0.35); } 100% { transform: none; box-shadow: none; } }
    @keyframes cyd7-breathe { 0%, 100% { opacity: 0.55; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } }

    /* ======================================================================
       Mise en page responsive
       ====================================================================== */
    @media (max-width: 1099px) {
        /* empile : l'en-tete (opaque) couvre aussi l'espace qui le suit, les liens entrants restent caches */
        #cyd7 .cyd7-flow .cyd7-step:not(.fx-node) { gap: 0; }
        #cyd7 .cyd7-flow .cyd7-step:not(.fx-node) > .cyd7-step-head { padding-bottom: 12px; }
    }

    @media (max-width: 639px) {
        #cyd7 .ia-actions .ia-btn { flex: 1 1 220px; }
        #cyd7 .cyd7-keys li { flex-direction: column; align-items: flex-start; gap: 8px; }
        #cyd7 .cyd7-keys strong { font-size: 0.86rem; }
        #cyd7 .cyd7-brand { gap: 12px; }
        #cyd7 .cyd7-note { font-size: 0.95rem; }
        #cyd7 .cyd7-flow.ia-panel { padding: 10px; }
        #cyd7 .cyd7-flow .cyd7-step { padding: 12px; }
        #cyd7 .cyd7-eps { gap: 8px; }
        #cyd7 .cyd7-flow .cyd7-ep { padding: 5px 6px 6px; }
        #cyd7 .cyd7-ep b { font-size: 0.6rem; }
        #cyd7 .cyd7-feat-card { padding: 16px; }
        #cyd7 .cyd7-feat-play .ia-btn { flex: 1 1 100%; }
        #cyd7 .cyd7-feat-more { display: block; flex: 1 1 100%; margin: 4px 0 0; padding: 8px 0; line-height: 1.4; text-align: center; }
        #cyd7 .cyd7-feat-more .ic { display: inline-block; margin-left: 6px; vertical-align: -3px; }
        #cyd7 .cyd7-hub { max-width: 420px; }
        #cyd7 .cyd7-hub-sat text { font-size: 14px; }
        #cyd7 .cyd7-hub-t1 { font-size: 15px; }
        #cyd7 .cyd7-hub-t2 { font-size: 11.5px; }
        #cyd7 .cyd7-hub-lb { display: none; }
        #cyd7 .cyd7-hub-key { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px; }
        #cyd7 .cyd7-rule { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 6px; }
        #cyd7 .cyd7-rule-r { grid-column: 1 / -1; }
        #cyd7 .cyd7-rules-h span:last-child { display: none; }
        #cyd7 .cyd7-rules-h { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
        #cyd7 .cyd7-vs-row { grid-template-columns: minmax(0, 1fr) auto auto; padding: 10px 12px; font-size: 0.85rem; }
        #cyd7 .cyd7-vs-head { font-size: 0.6rem; }
        #cyd7 .cyd7-vs-head span:first-child { color: transparent; }
        #cyd7 .cyd7-vs-long { display: none; }
        #cyd7 .cyd7-brand-name { font-size: 1.45rem; }
        #cyd7 .cyd7-brand-note { padding-left: 12px; font-size: 0.8rem; }
        #cyd7 .cyd7-ep b { white-space: normal; overflow-wrap: normal; }
        #cyd7 .cyd7-tabs { justify-content: center; width: 100%; }
        #cyd7 .cyd7-tabs [role="tab"] { flex: 0 0 calc((100% - 8px) / 3); min-height: 40px; padding: 6px 4px; font-size: 0.8rem; }
        #cyd7 .cyd7-vis-main,
        #cyd7 .cyd7-feed { padding: 14px; }
        #cyd7 .cyd7-assets ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
        #cyd7 .cyd7-assets li { font-size: 0.85rem; }
        #cyd7 .cyd7-assets { order: 2; }
        #cyd7 .cyd7-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
        #cyd7 .cyd7-dot::after { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
        #cyd7 .cyd7-dot[data-cyd7-st="mnt"]::before { inset: -4px; }
        #cyd7 .cyd7-dot--sub { display: none; }
        /* la legende et le resume passent sous la carte : aucun point n'est masque */
        #cyd7 .cyd7-map { display: flex; flex-direction: column; }
        #cyd7 .cyd7-map-sum,
        #cyd7 .cyd7-legend-st { position: static; order: 2; border: 0; border-radius: 0; background: none; }
        #cyd7 .cyd7-legend-st { order: 1; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 9px 10px 4px; border-top: 1px solid rgba(120, 160, 220, 0.2); font-size: 0.68rem; }
        #cyd7 .cyd7-map-sum { padding: 2px 10px 9px; color: var(--text-muted); font-size: 0.62rem; }
        #cyd7 .cyd7-legend-st i { width: 7px; height: 7px; }
        #cyd7 .cyd7-dot em { padding: 0 4px; font-size: 0.58rem; }
        #cyd7 .cyd7-dot[data-cyd7-site="qc"] em { left: 11px; }
        /* en-tetes masques visuellement mais lus ; les roles explicites gardent la semantique de tableau */
        #cyd7 .cyd7-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
        #cyd7 .cyd7-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid rgba(120, 160, 220, 0.14); }
        #cyd7 .cyd7-tbl th,
        #cyd7 .cyd7-tbl td { padding: 0; border: 0; }
        #cyd7 .cyd7-tbl td { grid-column: 1; color: var(--text-muted); font-size: 0.85rem; }
        #cyd7 .cyd7-tbl td::before { content: attr(data-cyd7-l) "\00a0: "; color: #7f93b6; }
        #cyd7 .cyd7-tbl td:last-child { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
        #cyd7 .cyd7-tbl td:last-child::before { content: none; }
        #cyd7 .cyd7-hbar-list li { grid-template-columns: minmax(0, 1fr) 3.2em; row-gap: 4px; }
        #cyd7 .cyd7-hbar-list .cyd7-hbar { grid-column: 1 / -1; grid-row: 2; }
        #cyd7 .cyd7-fr b + span { font-size: 0.72rem; white-space: normal; }
        #cyd7 .cyd7-fr { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; padding: 6px; }
        #cyd7 .cyd7-p-n { font-size: 2.1rem; }

        /* hero telephone : ecran sans moniteur, hauteur naturelle (rien n'est coupe), agent IA en bande sous le tableau de bord */
        #cyd7 .cyd7-hero-stage { display: flex; flex-direction: column; gap: 0.9em; aspect-ratio: auto; font-size: clamp(10px, 2.9cqw, 12px); }
        #cyd7 .cyd7-hero-stage::after { display: none; }
        #cyd7 .cyd7-mon { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: auto; }
        #cyd7 .cyd7-mon-img { display: none; }
        #cyd7 .cyd7-scr,
        #cyd7 .cyd7-hero-fx .cyd7-h-agent { --hx-xs: 10px; --hx-s: 10px; --hx-b: 11px; --hx-m: 12px; --hx-n: 18px; --hx-l: 20px; --hx-ag: 13px; }
        #cyd7 .cyd7-scr {
            position: relative;
            inset: auto;
            width: auto;
            height: auto;
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: 2.4em auto;
            border: 1px solid rgba(120, 160, 220, 0.45);
            border-radius: 0.8em;
            box-shadow: 0 1.2em 2.4em rgba(0, 0, 0, 0.45);
        }
        #cyd7 .cyd7-kpi { grid-template-columns: 2em minmax(0, 1fr); }
        #cyd7 .cyd7-kpi-ic { display: grid; }
        #cyd7 .cyd7-db-side { display: none; }
        #cyd7 .cyd7-db-main { grid-template-rows: auto; grid-template-areas: "h h" "k k" "thr thr" "dev hea" "feed feed"; }
        #cyd7 .cyd7-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        #cyd7 .cyd7-kpi-s { display: block; }
        #cyd7 .cyd7-spk { min-height: 4.2em; }
        #cyd7 .cyd7-pnl--dev { grid-template-columns: minmax(0, 1fr); justify-items: center; }
        #cyd7 .cyd7-dn-lg { display: none; }
        #cyd7 .cyd7-donut { width: 6em; height: 6em; }
        #cyd7 .cyd7-hbars li { grid-template-columns: minmax(0, 1fr) 2.8em; row-gap: 0.15em; }
        #cyd7 .cyd7-hbars .cyd7-hb { grid-column: 1 / -1; grid-row: 2; }
        #cyd7 .cyd7-hfeed { grid-template-rows: none; }
        #cyd7 .cyd7-hfeed li { padding: 0.3em 0; }
        #cyd7 .cyd7-hero-fx .cyd7-h-agent { position: relative; left: auto; top: auto; width: 100%; min-height: 4.6em; }
        #cyd7 .cyd7-ag-l1,
        #cyd7 .cyd7-ag-l2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    }

    @media (max-width: 479px) {
        #cyd7 .cyd7-top .cyd7-ai-btn { padding: 8px 14px 8px 12px; }
    }

    @media (min-width: 640px) {
        #cyd7 .cyd7-hero .ia-hero-visual { width: 100%; max-width: 760px; margin: 0 auto; }
        #cyd7 .cyd7-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        #cyd7 .cyd7-feat-card:last-child { grid-column: 1 / -1; }
        #cyd7 .cyd7-rmm-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        #cyd7 .cyd7-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        #cyd7 .cyd7-rmm-panel { padding: 26px; }
    }

    @media (min-width: 640px) and (max-width: 899px) {
        #cyd7 .cyd7-feat-card:last-child { justify-self: center; width: calc(50% - 7px); }
    }

    @media (min-width: 640px) {
        #cyd7 .cyd7-price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 46px; row-gap: 18px; }
        #cyd7 .cyd7-plan { grid-area: 1 / 1; }
        #cyd7 .cyd7-plan--eset { grid-area: 1 / 2; }
        #cyd7 .cyd7-combo { grid-area: 3 / 1; }
        #cyd7 .cyd7-complete { grid-area: 3 / 2; }
        #cyd7 .cyd7-op--plus { grid-area: 1 / 1 / 2 / 3; z-index: 1; }
        /* « = » centre sous les deux offres : HDCE Sentinel + ESET Inspect = solution combinee */
        #cyd7 .cyd7-op--eq { grid-area: 2 / 1 / 3 / 3; margin: -4px 0; }
    }

    @media (min-width: 640px) and (max-width: 1099px) {
        #cyd7 .cyd7-flow .cyd7-step { padding: 18px 20px; }
        #cyd7 .cyd7-ui { width: 100%; max-width: 580px; margin-right: auto; margin-left: auto; }
    }

    @media (max-width: 819px) {
        /* console : hauteur reservee (texte sur 3 lignes) pour que rien ne bouge sous le serpentin d'une etape a l'autre */
        #cyd7 .cyd7-flow .fx-con-text { min-height: calc(3 * 1.4em); }
        #cyd7 .fx-console.is-floating .fx-con-title { min-height: 2.5em; }
    }

    @media (max-width: 639px) {
        #cyd7 .cyd7-flow > .fx-console:not(.is-floating) .fx-con-head { min-height: 51px; }
    }

    @media (min-width: 820px) {
        #cyd7 .cyd7-flow { --fx-log-lines: 4; }
        #cyd7 .cyd7-flow > .fx-console:not(.is-floating) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 20px; align-content: start; }
        #cyd7 .cyd7-flow > .fx-console:not(.is-floating) .fx-con-head,
        #cyd7 .cyd7-flow > .fx-console:not(.is-floating) .fx-con-live,
        #cyd7 .cyd7-flow > .fx-console:not(.is-floating) .fx-con-text { grid-column: 1; }
        #cyd7 .cyd7-flow > .fx-console:not(.is-floating) .fx-log { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
        #cyd7 .cyd7-flow .fx-con-text { min-height: calc(3 * 1.4em); }
        #cyd7 .cyd7-flow.fx--static > .fx-console:not(.is-floating) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
        #cyd7 .cyd7-flow.fx--static > .fx-console:not(.is-floating) > * { grid-column: auto; grid-row: auto; }
        #cyd7 .cyd7-flow.fx--static > .fx-console:not(.is-floating) .fx-log { margin-top: 6px; }
        #cyd7 .cyd7-tp--global { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); align-items: center; }
        #cyd7 .cyd7-dot em { display: block; }
    }

    @media (min-width: 900px) {
        #cyd7 .cyd7-feat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
        #cyd7 .cyd7-feat-card { grid-column: span 2; }
        #cyd7 .cyd7-feat-card:nth-child(4) { grid-column: 2 / span 2; }
        #cyd7 .cyd7-feat-card:last-child { grid-column: 4 / span 2; }
        #cyd7 .cyd7-feat-card h3 { min-height: calc(2 * 1.3em); line-height: 1.3; }
    }

    @media (min-width: 1100px) {
        /* serpentin 3 x 3 : rangee 2 inversee (6 5 4) */
        #cyd7 .cyd7-flow-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; row-gap: 64px; padding: 8px 4px 52px 28px; }
        #cyd7 .cyd7-step--1 { grid-area: 1 / 1; }
        #cyd7 .cyd7-step--2 { grid-area: 1 / 2; }
        #cyd7 .cyd7-step--3 { grid-area: 1 / 3; }
        #cyd7 .cyd7-step--4 { grid-area: 2 / 3; }
        #cyd7 .cyd7-step--5 { grid-area: 2 / 2; }
        #cyd7 .cyd7-step--6 { grid-area: 2 / 1; }
        #cyd7 .cyd7-step--7 { grid-area: 3 / 1; }
        #cyd7 .cyd7-step--8 { grid-area: 3 / 2; }
        #cyd7 .cyd7-step--9 { grid-area: 3 / 3; }
    }

    @media (min-width: 1100px) {
        #cyd7 { --ia-hero-cols: minmax(0, 0.8fr) minmax(0, 1.2fr); --ia-hero-gap: 40px; }
        #cyd7 .cyd7-hero { align-items: center; }
        #cyd7 .cyd7-hero .ia-h1 { font-size: clamp(2.1rem, 3vw, 2.6rem); }
        #cyd7 .cyd7-hero .ia-hero-visual { max-width: none; }
        #cyd7 .cyd7-note { margin: 22px -12px 0 auto; padding-right: 64px; }
        #cyd7 .cyd7-note-arrow { position: absolute; right: -70px; bottom: 14px; width: 116px; height: 230px; }
        #cyd7 .cyd7-rmm-panel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; padding: 30px 34px; }
        #cyd7 .cyd7-hub { max-width: 500px; }
        #cyd7 .cyd7-eset-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 34px; }
        #cyd7 .cyd7-vis-grid { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
    }

    @media (min-width: 1100px) {
        #cyd7 .cyd7-flow .fx-con-text { min-height: calc(2 * 1.4em); }
    }

    @media (min-width: 1100px) and (max-width: 1279px) {
        /* colonnes serrees : sous-titres des voies et debit masques, noms des postes coupes aux espaces seulement */
        #cyd7 .cyd7-duo-t b + span,
        #cyd7 .cyd7-tele-rate { display: none; }
        #cyd7 .cyd7-duo-t { padding: 6px 7px; }
        #cyd7 .cyd7-ep b { white-space: normal; overflow-wrap: normal; }
        #cyd7 .cyd7-eps { gap: 10px; }
    }

    @media (min-width: 1100px) and (max-width: 1279px) {
        #cyd7 { --ia-hero-cols: minmax(0, 0.7fr) minmax(0, 1.3fr); }
    }

    @media (min-width: 1280px) {
        #cyd7 .cyd7-keys { gap: 16px 18px; }
        #cyd7 .cyd7-keys strong { white-space: nowrap; }
        #cyd7 .cyd7-flow-stage { column-gap: 46px; }
        #cyd7 .cyd7-feat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
        #cyd7 .cyd7-feat-card,
        #cyd7 .cyd7-feat-card:nth-child(4),
        #cyd7 .cyd7-feat-card:last-child { grid-column: auto; }
        #cyd7 .cyd7-price-grid { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1.1fr) 34px minmax(0, 0.9fr) minmax(0, 1.05fr); column-gap: 12px; }
        #cyd7 .cyd7-price-grid > * { grid-area: auto; }
        #cyd7 .cyd7-op--eq { margin: 0; align-self: center; }
    }

    /* ======================================================================
       Theme clair (maquette client) : hero marine, puis tout le corps de page sur fond blanc
       pleine largeur ; les consoles vivantes (serpentin, visibilite, IA en action) restent
       des cartes sombres posees sur le blanc.
       ====================================================================== */

    /* ---------- Hero : degrade marine + bleu primaire ---------- */
    #cyd7.hosting-view { padding-bottom: 0; }

    #cyd7::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(180deg, rgba(0, 17, 33, 0.62) 0, rgba(6, 33, 55, 0.72) 900px, rgba(9, 38, 62, 0.74) 100%);
        pointer-events: none;
    }

    #cyd7 .ia-btn:not(.ia-btn--ghost) {
        background: linear-gradient(135deg, #0c5bc9, #1570e6);
        box-shadow: 0 8px 24px rgba(21, 112, 230, 0.34);
    }

    #cyd7 .ia-btn:not(.ia-btn--ghost):hover { box-shadow: 0 12px 30px rgba(21, 112, 230, 0.45); }

    #cyd7 .cyd7-hero .ia-h1 .highlight { background: linear-gradient(90deg, #3d9bff, #7cc4ff); -webkit-background-clip: text; background-clip: text; }
    #cyd7 .cyd7-eyebrow { color: #8cc8ff; }
    #cyd7 .cyd7-eyebrow::before { background: #3d9bff; }
    #cyd7 .cyd7-key-ic { border-color: rgba(95, 170, 255, 0.65); background: rgba(31, 111, 224, 0.16); color: #7cc0ff; }

    /* ---------- Corps clair pleine largeur ---------- */
    #cyd7 .cyd7-light {
        --text: #1b2b47;
        --text-muted: #4a5b78;
        --border: #dfe6f0;
        --cyan: #0b63c9;
        --ia-panel-bg: #fff;
        --ia-panel-border: #dce4ef;
        --ia-line: #e3e9f2;
        --cyd7-l-ink: #0b1b36;
        --cyd7-l-blue: #0b5fc4;
        --cyd7-l-shadow: 0 1px 2px rgba(16, 40, 80, 0.05), 0 8px 24px rgba(16, 40, 80, 0.07);
        position: relative;
        margin-top: 48px;
        padding: 48px 0 70px;
        color: var(--text);
    }

    /* fond blanc : deborde la colonne jusqu'aux bords de la fenetre (l'ancetre .hero coupe le surplus) */
    #cyd7 .cyd7-light::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        z-index: -1;
        width: 100vw;
        margin-left: -50vw;
        background: #fdfefe;
        pointer-events: none;
    }

    #cyd7 .cyd7-light > .ia-section:first-child { margin-top: 0; }

    @media (min-width: 900px) {
        #cyd7 .cyd7-light { margin-top: 64px; padding: 64px 0 90px; }
    }

    /* Ilots sombres : on retablit les jetons du theme sombre */
    #cyd7 .cyd7-light .ia-panel:is(.cyd7-vis-main, .cyd7-feed) {
        --text: #e8eef8;
        --text-muted: #9aabc6;
        --border: rgba(120, 160, 220, 0.16);
        --cyan: #5fc8ff;
        --ia-panel-bg: linear-gradient(165deg, #0c1c3a, #04101f);
        --ia-panel-border: rgba(80, 140, 255, 0.32);
        --ia-line: rgba(120, 160, 220, 0.16);
        border-color: #1d3560;
        background: linear-gradient(165deg, #0c1c3a, #04101f);
        color: var(--text);
        box-shadow: 0 2px 6px rgba(10, 30, 70, 0.1), 0 18px 40px rgba(10, 30, 70, 0.18);
    }

    #cyd7 .cyd7-light :is(.cyd7-vis-main, .cyd7-feed) .cyd7-sample { color: rgba(154, 171, 198, 0.85); }

    /* Titres, sur-titres, textes */
    #cyd7 .cyd7-light .ia-section-head h2 { color: var(--cyd7-l-ink); }
    #cyd7 .cyd7-light .ia-kicker { color: var(--cyd7-l-blue); }
    #cyd7 .cyd7-light .ia-section-head .highlight { background: linear-gradient(90deg, #0b5fc4, #1f74e0); -webkit-background-clip: text; background-clip: text; }
    #cyd7 .cyd7-light .ia-card h3 { color: var(--cyd7-l-ink); }
    #cyd7 .cyd7-light .cyd7-sample { color: #5d6f8c; }

    /* Cartes et panneaux clairs */
    #cyd7 .cyd7-light .ia-card,
    #cyd7 .cyd7-light .ia-panel { box-shadow: var(--cyd7-l-shadow); }

    /* Boutons secondaires sur fond clair */
    #cyd7 .cyd7-light .ia-btn--ghost { border-color: #b6cbe8; background: #fff; color: #0b4fa8; box-shadow: 0 1px 2px rgba(16, 40, 80, 0.06); }
    #cyd7 .cyd7-light .ia-btn--ghost:hover { border-color: #6f9fe0; background: #eef5ff; box-shadow: 0 6px 16px rgba(21, 112, 230, 0.12); }

    /* ---------- Fonctionnalites ---------- */
    #cyd7 .cyd7-light .cyd7-feat-card { --cyd7-t: #0b5aa8; }
    #cyd7 .cyd7-light .cyd7-tint--ai { --cyd7-t: #5b3fd0; }
    #cyd7 .cyd7-light .cyd7-tint--eset { --cyd7-t: #0e7f6e; }
    #cyd7 .cyd7-light .cyd7-feat-card:hover { box-shadow: 0 1px 2px rgba(16, 40, 80, 0.05), 0 14px 30px rgba(16, 40, 80, 0.1); }
    #cyd7 .cyd7-light .cyd7-feat-ic { border-color: var(--cyd7-t); background: var(--cyd7-t); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--cyd7-t) 28%, transparent); }
    #cyd7 .cyd7-light .cyd7-feat-more { color: var(--cyd7-l-blue); }
    #cyd7 .cyd7-light .cyd7-feat-more:hover { color: #083f85; }

    #cyd7 .cyd7-light :is(.cyd7-x, .cyd7-rules-bar i) { color: #56677f; }

    /* ---------- RMM : carte claire ---------- */
    #cyd7 .cyd7-light .cyd7-rmm-panel { background: radial-gradient(ellipse at 22% 45%, rgba(31, 111, 224, 0.07), transparent 55%), #fff; }
    #cyd7 .cyd7-light .cyd7-hub-ring { stroke: rgba(31, 80, 160, 0.22); }
    #cyd7 .cyd7-light .cyd7-hub-in path { stroke: #1b8fd8; opacity: 1; }
    #cyd7 .cyd7-light .cyd7-hub-out path { stroke: #a86400; opacity: 1; }
    #cyd7 .cyd7-light .cyd7-hub-lb--in { fill: #0b6aa8; }
    #cyd7 .cyd7-light .cyd7-hub-lb--out { fill: #8a5600; }
    #cyd7 .cyd7-light .cyd7-hub-core { stroke: #8fc2ff; filter: drop-shadow(0 6px 14px rgba(31, 111, 224, 0.35)); }
    #cyd7 .cyd7-light .cyd7-hub-sat rect { fill: #fff; stroke: #b9cbe4; }
    #cyd7 .cyd7-light .cyd7-hub-sat use { stroke: #1f6fe0; }
    #cyd7 .cyd7-light .cyd7-hub-sat text { fill: var(--cyd7-l-ink); }
    #cyd7 .cyd7-light .cyd7-hub-sat circle { fill: #18a058; }
    #cyd7 .cyd7-light .cyd7-hub-key strong { color: var(--cyd7-l-ink); }
    #cyd7 .cyd7-light .cyd7-hub-sw { border-top-color: #1b8fd8; }
    #cyd7 .cyd7-light .cyd7-hub-sw--out { border-top-color: #a86400; }
    #cyd7 .cyd7-light .cyd7-rmm-h3,
    #cyd7 .cyd7-light .cyd7-rmm-caps strong { color: var(--cyd7-l-ink); }
    #cyd7 .cyd7-light .cyd7-cap-ic { border-color: rgba(194, 124, 14, 0.45); background: #fff5e3; color: #9a6200; }
    #cyd7 .cyd7-light .cyd7-specs li { border-color: #d3deee; background: #f3f6fb; color: #33476a; }

    /* ---------- ESET Inspect ---------- */
    #cyd7 .cyd7-light .cyd7-eset-why { border-left-color: #1570e6; color: var(--cyd7-l-ink) !important; }
    #cyd7 .cyd7-light .cyd7-reasons strong { color: var(--cyd7-l-ink); }
    #cyd7 .cyd7-light .cyd7-pt-ic { border-color: #b9d2f3; background: #eef5fe; color: var(--cyd7-l-blue); }
    #cyd7 .cyd7-light .cyd7-rules { border-color: #d3deee; box-shadow: 0 2px 6px rgba(16, 40, 80, 0.06), 0 16px 36px rgba(16, 40, 80, 0.12), 0 0 0 6px rgba(43, 181, 160, 0.07); }
    #cyd7 .cyd7-light .cyd7-vs { box-shadow: var(--cyd7-l-shadow); }
    #cyd7 .cyd7-light .cyd7-vs-row { border-top-color: #e3e9f2; }
    #cyd7 .cyd7-light .cyd7-vs-head { background: #f3f6fb; color: #4a5b78; }
    #cyd7 .cyd7-light .cyd7-vs-head > span:last-child,
    #cyd7 .cyd7-light .cyd7-y { color: #0d7d6c; }
    #cyd7 .cyd7-light .cyd7-vs-row [role="rowheader"] { color: var(--cyd7-l-ink); }
    #cyd7 .cyd7-light .cyd7-n { color: #5d6f8c; }

    /* ---------- Comment ca fonctionne : serpentin clair (cartes blanches, liens assombris pour le fond blanc) ---------- */
    #cyd7 .cyd7-light .cyd7-how {
        --fx-k-data: #1570c4;
        --fx-k-event: #c2407a;
        --fx-k-control: #a86400;
        --fx-k-secure: #0b7a6a;
        --fx-k-feedback: #5d6d8a;
        --fx-k-ai: #6b4fe0;
    }

    #cyd7 .cyd7-light .cyd7-legend { padding: 10px 16px; border: 1px solid #dce4ef; border-radius: 12px; background: #fff; color: #33476a; box-shadow: var(--cyd7-l-shadow); }
    #cyd7 .cyd7-light .cyd7-lg { border-top-width: 3px; }
    #cyd7 .cyd7-light .cyd7-lg--secure { border-top: 5px solid var(--fx-k-secure); }
    #cyd7 .cyd7-light .cyd7-lg--feedback { border-top: 3px dashed var(--fx-k-feedback); }

    #cyd7 .cyd7-light .ia-panel.cyd7-flow {
        --fx-node-bg: #fff;
        --cyd7-bg: #fff;
        --cyd7-bg-cur: #f4f8ff;
        --cyd7-ghost: #f3f6fb;
        --cyd7-teal-t: #0b6e60;
        --cyd7-d7: #1f6fe0;
        --cyd7-eset: #0e8a78;
        --cyd7-rmm: #b57200;
        --cyd7-c-ink: #0b1b36;
        --cyd7-c-line: #d6e0ee;
        --cyd7-c-soft: 0 1px 2px rgba(16, 40, 80, 0.06), 0 6px 16px rgba(16, 40, 80, 0.08);
        border-color: #dce4ef;
        background: #f4f7fb;
        box-shadow: var(--cyd7-l-shadow);
    }

    /* cartes d'etape */
    #cyd7 .cyd7-light .cyd7-flow .cyd7-step { border-color: var(--cyd7-c-line); box-shadow: var(--cyd7-c-soft); }

    #cyd7 .cyd7-light .cyd7-flow .fx-node.cyd7-step.is-lit,
    #cyd7 .cyd7-light .cyd7-flow .cyd7-step.cyd7-is-cur {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent, #b57200) 45%, transparent), 0 0 20px color-mix(in srgb, var(--fx-accent, #b57200) 18%, transparent), 0 8px 22px rgba(16, 40, 80, 0.12);
    }

    #cyd7 .cyd7-light .cyd7-flow .fx-node.cyd7-step.is-done { border-color: color-mix(in srgb, var(--fx-accent) 50%, #d6e0ee); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-step.cyd7-is-visited { border-color: color-mix(in srgb, var(--cyd7-rmm) 50%, #d6e0ee); }
    #cyd7 .cyd7-light .cyd7-flow .fx-node.cyd7-step.is-dim,
    #cyd7 .cyd7-light .cyd7-flow .cyd7-step.cyd7-is-dim { border-color: #e3e9f2; box-shadow: none; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-step.cyd7-is-dim::after { background: rgba(244, 247, 251, 0.62); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-step-head h3 { color: var(--cyd7-c-ink); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-num { background: #e6edf7; color: var(--cyd7-c-ink); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-step.is-lit .cyd7-num,
    #cyd7 .cyd7-light .cyd7-flow .cyd7-step.cyd7-is-cur .cyd7-num { background: linear-gradient(135deg, #b8322a, #c0392b); color: #fff; box-shadow: 0 0 12px rgba(232, 87, 74, 0.35); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-step.is-done .cyd7-num { box-shadow: 0 0 0 2px var(--fx-accent); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-step.cyd7-is-visited .cyd7-num { box-shadow: 0 0 0 2px var(--cyd7-rmm); }

    /* mini-interfaces : ombres douces, en-tetes en attente lisibles */
    #cyd7 .cyd7-light .cyd7-flow :is(.cyd7-win, .cyd7-ui--1, .cyd7-tele) { box-shadow: 0 2px 4px rgba(16, 40, 80, 0.06), 0 8px 18px rgba(16, 40, 80, 0.1); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-win.fx-node { box-shadow: 0 2px 4px rgba(16, 40, 80, 0.06), 0 8px 18px rgba(16, 40, 80, 0.1); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-win.fx-node.is-lit { border-color: var(--cyd7-rmm); box-shadow: 0 0 0 2px rgba(181, 114, 0, 0.35), 0 0 18px rgba(181, 114, 0, 0.18), 0 8px 18px rgba(16, 40, 80, 0.1); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-step[data-cyd7-phase=""] .cyd7-wslot > .cyd7-win { box-shadow: none; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-step[data-cyd7-phase=""] .cyd7-wslot > .cyd7-win > .cyd7-win-bar { opacity: 1; color: #33476a; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-agent em { color: #0f7a43; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-tl time { color: #1557b0; }

    #cyd7 .cyd7-light .cyd7-flow .cyd7-wres { border-color: rgba(14, 138, 120, 0.55); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-wres .ic { background: rgba(14, 138, 120, 0.14); }

    #cyd7 .cyd7-light .cyd7-flow :is(.cyd7-wghost, .cyd7-ntf-wait) { border-color: #b9c8de; background: var(--cyd7-ghost); color: var(--text-muted); }
    #cyd7 .cyd7-light .cyd7-flow :is(.cyd7-wg-wait, .cyd7-ntf-wait) .ic { background: rgba(31, 80, 160, 0.08); color: #4f6a94; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-wg-done > .ic { background: rgba(14, 138, 120, 0.14); color: var(--cyd7-teal-t); }
    #cyd7 .cyd7-light .cyd7-flow :is(.cyd7-wg-wait, .cyd7-ntf-wait) b { color: #33476a; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-wg-done b { color: var(--cyd7-c-ink); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-wg-done--ok b { color: #127a44; }

    /* deux voies (cartes 3 et 5) */
    #cyd7 .cyd7-light .cyd7-flow .cyd7-duo-t { border-color: #d3deee; background: var(--cyd7-ghost); color: #33476a; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-duo-t b { color: var(--cyd7-c-ink); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-duo-t b + span { color: #4a5b78; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-duo--a .ic { color: #0e8a78; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-ui--3 .cyd7-duo--b .ic { color: #6b4fe0; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-ui--5 .cyd7-duo--b .ic { color: #1f6fe0; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-step--3[data-cyd7-phase="ai"] .cyd7-duo--b { --fx-accent: #6b4fe0; }

    #cyd7 .cyd7-light .cyd7-flow :is(.cyd7-step--3[data-cyd7-phase="eset"], .cyd7-step--5[data-cyd7-phase="iso"]) .cyd7-duo--a,
    #cyd7 .cyd7-light .cyd7-flow :is(.cyd7-step--3[data-cyd7-phase="ai"], .cyd7-step--5[data-cyd7-phase="plan"], .cyd7-step--5[data-cyd7-phase="rev"]) .cyd7-duo--b {
        background: color-mix(in srgb, var(--fx-accent) 9%, #fff);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent) 30%, transparent);
    }

    /* postes de la carte 6 (noeuds du moteur) */
    #cyd7 .cyd7-light .cyd7-flow .cyd7-ep { border-color: var(--cyd7-c-line); box-shadow: 0 1px 2px rgba(16, 40, 80, 0.06); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-ep.is-lit { background: color-mix(in srgb, var(--fx-accent) 8%, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent) 40%, transparent), 0 0 16px color-mix(in srgb, var(--fx-accent) 18%, transparent); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-ep b { color: var(--cyd7-c-ink); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-ep-0 { background: #e9eff8; color: #33476a; }
    #cyd7 .cyd7-light .cyd7-flow[data-cyd7-scn="thr"] .cyd7-step--6[data-cyd7-iso] .cyd7-ep:first-child .cyd7-ep-0 { background: #fde6e4; color: #b8322a; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-ep-1 { background: #fff1d1; color: #7a4f00; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-ep-2 { background: #def6e9; color: #127a44; }

    /* notification (carte 9) */
    #cyd7 .cyd7-light .cyd7-flow .cyd7-av { background: linear-gradient(135deg, #b03224, #c0392b); }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-toast { border-color: var(--cyd7-c-line); background: #fff; box-shadow: 0 2px 4px rgba(16, 40, 80, 0.06), 0 10px 24px rgba(16, 40, 80, 0.12); }

    /* liens du moteur sur fond clair */
    #cyd7 .cyd7-light .cyd7-flow .fx-wire { stroke-opacity: 0.5; }
    #cyd7 .cyd7-light .cyd7-flow .fx-edge.is-done .fx-wire { stroke-opacity: 0.8; }
    #cyd7 .cyd7-light .cyd7-flow .fx-edge.is-active .fx-wire { stroke-opacity: 1; }
    #cyd7 .cyd7-light .cyd7-flow .fx-edge.is-dim .fx-wire { stroke-opacity: 0.16; }
    #cyd7 .cyd7-light .cyd7-flow .fx-arrow { fill-opacity: 0.7; }
    #cyd7 .cyd7-light .cyd7-flow .fx-edge.is-active .fx-arrow { fill-opacity: 1; }
    #cyd7 .cyd7-light .cyd7-flow .fx-edge.is-dim .fx-arrow { fill-opacity: 0.18; }
    #cyd7 .cyd7-light .cyd7-flow .fx-pk-head { fill: #fff; stroke: var(--fx-c); stroke-width: 1.5; }
    #cyd7 .cyd7-light .cyd7-flow .fx-elabel { border-color: color-mix(in srgb, var(--fx-c) 45%, #fff); background: #fff; color: var(--fx-c); box-shadow: 0 1px 3px rgba(16, 40, 80, 0.08); }

    /* puces de scenario, boutons et progression */
    #cyd7 .cyd7-light .cyd7-flow .fx-chip { border-color: #d3deee; background: #fff; color: var(--cyd7-c-ink); box-shadow: 0 1px 2px rgba(16, 40, 80, 0.05); }
    #cyd7 .cyd7-light .cyd7-flow .fx-chip:hover { border-color: #6f9fe0; }
    #cyd7 .cyd7-light .cyd7-flow .fx-chip-t { color: #4a5b78; }
    #cyd7 .cyd7-light .cyd7-flow .fx-chip[aria-pressed="true"] { border-color: #c0392b; background: #fdf1ef; box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.25), 0 4px 12px rgba(192, 57, 43, 0.1); }
    #cyd7 .cyd7-light .cyd7-flow .fx-btn { border-color: #c4d3e8; background: #fff; color: var(--cyd7-c-ink); }
    #cyd7 .cyd7-light .cyd7-flow .fx-btn:hover { border-color: #6f9fe0; background: #eef5ff; }
    #cyd7 .cyd7-light .cyd7-flow .fx-btn[aria-disabled="true"]:hover { border-color: #c4d3e8; background: #fff; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-steps9 span { background: #dbe4f1; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-steps9 .is-done { background: #5c9ee6; }
    #cyd7 .cyd7-light .cyd7-flow .cyd7-steps9 .is-cur { background: #d6453a; }

    /* la console du serpentin reste une console sombre (jetons sombres retablis) */
    #cyd7 .cyd7-light .cyd7-flow > .fx-console {
        --text: #e8eef8;
        --text-muted: #9aabc6;
        --cyan: #5fc8ff;
        border-color: #1d3560;
        color: var(--text);
        box-shadow: 0 2px 6px rgba(10, 30, 70, 0.1), 0 12px 28px rgba(10, 30, 70, 0.16);
    }

    #cyd7 .cyd7-light .cyd7-flow > .fx-console.is-floating { border-color: rgba(80, 140, 255, 0.35); background: rgba(6, 13, 30, 0.95); box-shadow: 0 -4px 20px rgba(10, 30, 70, 0.22); }

    /* horodatages des journaux : contraste AA sur les consoles sombres */
    #cyd7 :is(.fx-log-t, .fx-log-hm) { color: rgba(154, 171, 198, 0.86); }

    /* ---------- Tarifs ---------- */
    #cyd7 .cyd7-light .cyd7-plan-h h3,
    #cyd7 .cyd7-light .cyd7-complete h3,
    #cyd7 .cyd7-light .cyd7-p-n,
    #cyd7 .cyd7-light .cyd7-checks strong { color: var(--cyd7-l-ink); }
    #cyd7 .cyd7-light .cyd7-plan-ic { border-color: #b9d2f3; background: #eef5fe; color: var(--cyd7-l-blue); }
    #cyd7 .cyd7-light .cyd7-p--lic { color: #0d7d6c; }
    #cyd7 .cyd7-light .cyd7-checks .ic { color: #18a058; }
    #cyd7 .cyd7-light .cyd7-plan--eset .cyd7-checks .ic { color: #0e8a78; }
    #cyd7 .cyd7-light .cyd7-op { border-color: #c9d6ea; background: #fff; color: var(--cyd7-l-ink); box-shadow: 0 2px 8px rgba(16, 40, 80, 0.08); }

    #cyd7 .cyd7-light .cyd7-combo {
        border: 1.5px solid #9cc8f0;
        background: linear-gradient(170deg, #e6f3fd, #f3f9fe);
        box-shadow: 0 1px 2px rgba(16, 40, 80, 0.05), 0 10px 26px rgba(21, 112, 230, 0.12);
    }

    #cyd7 .cyd7-light .cyd7-combo-k { color: #0a56b0; }
    #cyd7 .cyd7-light .cyd7-combo h3 { color: #0a4f9e; }
    #cyd7 .cyd7-light .cyd7-complete { background: linear-gradient(170deg, #f5f9fd, #fff); }
    /* FAQ (corps clair) */
    #cyd7 .cyd7-light .cyd7-faq { --faq-bg: #fff; --faq-border: #dce4ef; }
    #cyd7 .cyd7-light .cyd7-faq .faq-head h2 { color: var(--cyd7-l-ink); }
    #cyd7 .cyd7-light .cyd7-faq details { box-shadow: var(--cyd7-l-shadow); }
    /* @@IA:cyd7:css:end@@ */

    /* @@IA:cyd7ai:css:start@@ */
    /* ======================================================================
       HDCE Sentinel : maintenances automatiques par IA (cyd7ai) : #cyber-hdce-sentinel-maintenance-ia
       Page soeur de Secure-Exchanges (cyse) : memes cartes, fenetres et console.
       ====================================================================== */
    #cyd7ai {
      --cyd7ai-bg: #0d1937;
      --cyd7ai-bg-cur: #102446;
      --cyd7ai-win: #f5f8fd;
      --cyd7ai-ink: #15233d;
      --cyd7ai-ink2: #5d6f8c;
      --cyd7ai-wline: #dbe4f1;
      --cyd7ai-blue: #1f6fe0;
      --cyd7ai-ghost: #0b1631;
      --cyd7ai-ui-fs: 0.7rem;
      --cyd7ai-ai: #8f7cff;
      --cyd7ai-ai-t: #c9c0ff;
      --cyd7ai-ok: #18a058;
      --cyd7ai-ok-t: #7ee2a8;
      --cyd7ai-warn: #c77c06;
      --cyd7ai-warn-t: #f7c46a;
      --cyd7ai-bad: #d6453a;
      --cyd7ai-bad-t: #ff8f80;
      --cyd7ai-green: #4fd18b;
      --fx-k-ai: #8f7cff;
      --fx-k-control: #e0a73a;
      --fx-k-event: #3fd0b0;
      --cyd7ai-ok-ink: #0f7a43;
      --fx-k-payment: #e8574a;
    }

    #cyd7ai .cyd7ai-nw { white-space: nowrap; }

    /* ---------- Barre du haut : retour ---------- */
    #cyd7ai .cyd7ai-top {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px 20px;
      margin: 0 0 26px;
    }

    #cyd7ai .cyd7ai-top .back-link { margin: 0; }
    #cyd7ai .back-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

    /* ---------- Hero : texte ---------- */
    #cyd7ai .cyd7ai-hero { margin-bottom: 0; }

    #cyd7ai .cyd7ai-brand {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 0 0 18px;
    }

    #cyd7ai .cyd7ai-badge {
      display: block;
      flex: none;
      width: 46px;
      height: 46px;
      filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45));
    }

    #cyd7ai .cyd7ai-brand-name {
      color: #fff;
      font-size: 1.55rem;
      font-weight: 800;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }

    #cyd7ai .cyd7ai-brand-note {
      padding-left: 14px;
      border-left: 1px solid rgba(154, 171, 198, 0.4);
      color: var(--text-muted);
      font-size: 0.86rem;
      font-variant-caps: small-caps;
      letter-spacing: 0.04em;
      line-height: 1.3;
    }

    /* surtitre : tiret corail (comme Secure-Exchanges) */
    #cyd7ai .cyd7ai-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 0;
      border: 0;
      background: none;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
    }

    #cyd7ai .cyd7ai-eyebrow::before {
      content: "";
      flex: none;
      width: 26px;
      height: 2px;
      border-radius: 2px;
      background: var(--accent-bright);
    }

    #cyd7ai #cyd7ai-title { text-wrap: balance; }

    #cyd7ai .cyd7ai-keys {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      margin: 0 0 26px;
      padding: 0;
      list-style: none;
    }

    #cyd7ai .cyd7ai-keys li {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    #cyd7ai .cyd7ai-key-ic,
    #cyd7ai .cyd7ai-pt-ic,
    #cyd7ai .cyd7ai-cap-ic {
      display: grid;
      place-items: center;
      flex: none;
      width: 40px;
      height: 40px;
      border: 1.5px solid rgba(232, 87, 74, 0.65);
      border-radius: 50%;
      background: rgba(192, 57, 43, 0.1);
      color: var(--accent-bright);
    }

    #cyd7ai .cyd7ai-key-ic .ic { width: 19px; height: 19px; }

    #cyd7ai .cyd7ai-keys strong {
      display: block;
      color: #fff;
      font-size: 0.92rem;
      line-height: 1.25;
    }

    #cyd7ai .cyd7ai-keys strong + span {
      display: block;
      color: var(--text-muted);
      font-size: 0.86rem;
      line-height: 1.3;
    }

    #cyd7ai .cyd7ai-note {
      position: relative;
      display: flex;
      align-items: flex-end;
      gap: 6px;
      max-width: 360px;
      margin: 26px 0 0 4px;
      color: var(--ia-coral-soft);
      font-family: "Segoe Print", "Bradley Hand", "Comic Neue", cursive;
      font-size: 1.02rem;
      line-height: 1.35;
      transform: rotate(-3deg);
      transform-origin: left center;
    }

    #cyd7ai .cyd7ai-note-arrow {
      flex: none;
      width: 70px;
      height: 52px;
      fill: none;
      stroke: var(--ia-coral-soft);
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      overflow: visible;
    }

    #cyd7ai .cyd7ai-note-arrow path { vector-effect: non-scaling-stroke; }
    #cyd7ai .cyd7ai-note-arrow path:first-child { stroke-dasharray: 5 6; }

    @media (max-width: 1099px) {
      #cyd7ai .cyd7ai-note-arrow { width: 40px; height: 76px; margin-bottom: -10px; stroke-width: 2.2; transform: scaleY(-1); }
    }

    /* ---------- Hero : moniteur HDCE Sentinel, console de nuit en direct (meme moniteur que la page HDCE Sentinel) ---------- */
    #cyd7ai .cyd7ai-hero-fx { gap: 0; }

    /* hauteur serree : la vignette de l'etape (ancree en bas) touche presque le pied du moniteur ;
       positions verticales en cqw (largeur de la scene) pour ne pas dependre de cette hauteur */
    #cyd7ai .cyd7ai-hero-stage {
      aspect-ratio: 760 / 560;
      container-type: inline-size;
      font-size: clamp(9.5px, 1.45cqw, 11.5px);
      line-height: 1.3;
    }

    /* halo sous le moniteur */
    #cyd7ai .cyd7ai-hero-stage::after {
      content: "";
      position: absolute;
      left: 22%;
      right: 4%;
      top: 48.9cqw;
      height: 7.8cqw;
      z-index: -1;
      border-radius: 50%;
      background: radial-gradient(closest-side, rgba(143, 124, 255, 0.16), transparent);
      pointer-events: none;
    }

    #cyd7ai .cyd7ai-mon { position: absolute; left: 9%; top: 0; width: 91%; aspect-ratio: 1512 / 884; }
    #cyd7ai .cyd7ai-mon-img { display: block; width: 100%; height: 100%; }

    /* ecran : console de nuit (sombre), grille fixe : barre, horloge + ligne du temps, parc | fil d'activite */
    #cyd7ai .cyd7ai-scr {
      position: absolute;
      left: 2.778%;
      top: 4.751%;
      width: 83.995%;
      height: 74.661%;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
      grid-template-rows: auto auto minmax(0, 1fr);
      column-gap: 0.7em;
      padding: 0 0.7em 0.7em;
      overflow: hidden;
      border-radius: 0.35em;
      background:
        radial-gradient(ellipse at 88% 0%, rgba(143, 124, 255, 0.16), transparent 55%),
        linear-gradient(165deg, #0b1835, #050b1a);
      color: #dfe8f6;
    }

    #cyd7ai .cyd7ai-scr-top {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 0.7em;
      min-width: 0;
      height: 2.5em;
      margin: 0 -0.7em;
      padding: 0 0.8em;
      border-bottom: 1px solid rgba(120, 160, 220, 0.16);
      background: rgba(3, 8, 20, 0.72);
    }

    #cyd7ai .cyd7ai-scr-brand {
      display: inline-flex;
      align-items: center;
      gap: 0.4em;
      flex: none;
      color: #fff;
      font-size: max(0.7rem, 1.02em);
      font-weight: 800;
      white-space: nowrap;
    }

    #cyd7ai .cyd7ai-scr-brand img { display: block; width: 1.55em; height: 1.55em; }

    #cyd7ai .cyd7ai-scr-ttl {
      min-width: 0;
      overflow: hidden;
      color: #b9c8e2;
      font-size: max(0.66rem, 0.9em);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #cyd7ai .cyd7ai-h-win {
      flex: none;
      margin-left: auto;
      padding: 0.15em 0.7em;
      border: 1px solid rgba(143, 124, 255, 0.5);
      border-radius: 999px;
      background: rgba(143, 124, 255, 0.14);
      color: var(--cyd7ai-ai-t);
      font-size: max(0.66rem, 0.86em);
      font-weight: 600;
      white-space: nowrap;
    }

    #cyd7ai .cyd7ai-h-sky { display: grid; flex: none; }
    #cyd7ai .cyd7ai-h-sky .ic { grid-area: 1 / 1; width: 1.55em; height: 1.55em; }
    #cyd7ai .cyd7ai-h-moon { color: #ffe7a8; fill: rgba(255, 231, 168, 0.18); }
    #cyd7ai .cyd7ai-h-sun { color: #ffd27a; visibility: hidden; }
    #cyd7ai [data-cyd7ai-hphase="login"] .cyd7ai-h-moon { visibility: hidden; }
    #cyd7ai [data-cyd7ai-hphase="login"] .cyd7ai-h-sun { visibility: visible; }
    #cyd7ai [data-cyd7ai-hphase="login"] .cyd7ai-h-win { border-color: rgba(79, 209, 139, 0.55); background: rgba(79, 209, 139, 0.14); color: var(--cyd7ai-ok-t); }

    #cyd7ai .cyd7ai-scr-head {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 1.1em;
      min-width: 0;
      padding: 0.6em 0 0.7em;
    }

    #cyd7ai .cyd7ai-h-time {
      display: flex;
      flex-direction: column;
      flex: none;
      width: max(11.2em, 8.4rem);
      line-height: 1.1;
    }

    #cyd7ai .cyd7ai-h-clock {
      color: #fff;
      font-family: var(--fx-mono);
      font-size: 2.15em;
      font-weight: 700;
      letter-spacing: 0.02em;
      font-variant-numeric: tabular-nums;
    }

    #cyd7ai .cyd7ai-h-cap {
      margin-top: 0.25em;
      color: var(--ia-coral-soft);
      font-size: max(0.68rem, 0.92em);
      font-weight: 700;
      white-space: nowrap;
    }

    #cyd7ai [data-cyd7ai-hphase="login"] .cyd7ai-h-cap { color: var(--cyd7ai-ok-t); }

    /* ligne du temps : 8 jalons */
    #cyd7ai .cyd7ai-h-tl { position: relative; flex: 1; min-width: 0; }

    #cyd7ai .cyd7ai-h-rail {
      position: absolute;
      left: 6.25%;
      right: 6.25%;
      top: 0.42em;
      height: 2px;
      border-radius: 2px;
      background: rgba(120, 160, 220, 0.22);
    }

    #cyd7ai .cyd7ai-h-fill {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--cyd7ai-ai), var(--cyan));
      transform: scaleX(var(--cyd7ai-p, 1));
      transform-origin: left center;
    }

    #cyd7ai .cyd7ai-h-ms {
      position: relative;
      display: grid;
      grid-template-columns: repeat(8, minmax(0, 1fr));
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #cyd7ai .cyd7ai-h-ms li { display: flex; flex-direction: column; align-items: center; gap: 0.35em; min-width: 0; }

    #cyd7ai .cyd7ai-h-ms i {
      box-sizing: border-box;
      width: 0.95em;
      height: 0.95em;
      border: 2px solid rgba(120, 160, 220, 0.55);
      border-radius: 50%;
      background: #08122a;
    }

    #cyd7ai .cyd7ai-h-ms span {
      color: #9fb3d6;
      font-family: var(--font);
      font-size: max(0.66rem, 0.82em);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    #cyd7ai .cyd7ai-h-ms .is-done i { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 0.5em rgba(95, 200, 255, 0.5); }
    #cyd7ai .cyd7ai-h-ms .is-done span { color: #bfe6ff; }
    #cyd7ai .cyd7ai-h-ms .is-cur i { border-color: var(--accent-bright); background: var(--accent-bright); box-shadow: 0 0 0 0.25em rgba(232, 87, 74, 0.25); }
    #cyd7ai .cyd7ai-h-ms .is-cur span { color: #fff; font-weight: 700; }

    /* panneaux de la console (noeuds) */
    #cyd7ai .cyd7ai-hero-fx .cyd7ai-h-fleet,
    #cyd7ai .cyd7ai-hero-fx .cyd7ai-h-feed {
      grid-row: 3;
      display: flex;
      flex-direction: column;
      gap: 0.5em;
      min-height: 0;
      padding: 0.6em 0.75em 0.65em;
      border: 1px solid rgba(120, 160, 220, 0.24);
      border-radius: 0.55em;
      background: #0c1a37;
      box-shadow: none;
      transition: border-color 0.45s ease, box-shadow 0.45s ease;
    }

    #cyd7ai .cyd7ai-hero-fx .cyd7ai-h-fleet { grid-column: 1; }
    #cyd7ai .cyd7ai-hero-fx .cyd7ai-h-feed { grid-column: 2; }

    #cyd7ai .cyd7ai-hero-fx .cyd7ai-h-fleet.is-lit,
    #cyd7ai .cyd7ai-hero-fx .cyd7ai-h-feed.is-lit {
      border-color: var(--fx-accent);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent) 40%, transparent), 0 0 1.4em color-mix(in srgb, var(--fx-accent) 24%, transparent);
    }

    #cyd7ai .cyd7ai-hero-fx .fx-tag { font-size: max(0.66rem, 0.8em); }

    #cyd7ai .cyd7ai-h-fleet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; min-width: 0; }
    #cyd7ai .cyd7ai-h-fleet-head strong { color: #fff; font-size: max(0.7rem, 1.02em); white-space: nowrap; }

    #cyd7ai .cyd7ai-tiles {
      position: relative;
      flex: 1;
      display: grid;
      grid-template-columns: repeat(10, minmax(0, 1fr));
      grid-template-rows: repeat(4, minmax(0, 1fr));
      gap: 0.34em;
      min-height: 0;
      overflow: hidden;
      border-radius: 0.3em;
    }

    #cyd7ai .cyd7ai-tiles i {
      position: relative;
      border: 1px solid rgba(120, 170, 230, 0.22);
      border-radius: 0.25em;
      background: #14294f;
      transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    }

    #cyd7ai .cyd7ai-tiles i::after {
      content: "";
      position: absolute;
      right: 0.2em;
      top: 0.2em;
      width: 0.34em;
      height: 0.34em;
      border-radius: 50%;
      background: var(--cyd7ai-green);
      opacity: 0.85;
    }

    #cyd7ai .cyd7ai-tiles .cyd7ai-tile--off { background: #0d1a33; border-color: rgba(120, 160, 220, 0.12); }
    #cyd7ai .cyd7ai-tiles .cyd7ai-tile--off::after { background: #7f8ba3; opacity: 0.6; }

    /* balayage (une seule barre, pas 40 animations) */
    #cyd7ai .cyd7ai-tiles::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 18%;
      background: linear-gradient(90deg, transparent, rgba(143, 124, 255, 0.4) 70%, rgba(201, 192, 255, 0.85) 96%, transparent);
      opacity: 0;
      pointer-events: none;
    }

    /* appareil vise (HOST-0221) : alerte, reversion, retabli */
    #cyd7ai [data-cyd7ai-hit="warn"] .cyd7ai-tile--hit { border-color: #f7c46a; background: #6b4a10; box-shadow: 0 0 0 2px rgba(247, 196, 106, 0.35), 0 0 0.9em rgba(247, 196, 106, 0.5); }
    #cyd7ai [data-cyd7ai-hit="warn"] .cyd7ai-tile--hit::after { background: #ffb02e; }
    #cyd7ai [data-cyd7ai-hit="fix"] .cyd7ai-tile--hit { border-color: #6aa8ff; background: #173f86; box-shadow: 0 0 0 2px rgba(106, 168, 255, 0.35), 0 0 0.9em rgba(106, 168, 255, 0.55); }
    #cyd7ai [data-cyd7ai-hit="fix"] .cyd7ai-tile--hit::after { background: #8fc1ff; }
    #cyd7ai [data-cyd7ai-hit="ok"] .cyd7ai-tile--hit { border-color: rgba(79, 209, 139, 0.75); background: #124a33; }

    #cyd7ai .cyd7ai-h-fleet-foot {
      display: flex;
      align-items: center;
      gap: 0.5em;
      min-width: 0;
      color: #c4d2ea;
      font-size: max(0.66rem, 0.86em);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    #cyd7ai .cyd7ai-h-foot-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

    #cyd7ai .cyd7ai-dot {
      flex: none;
      width: 0.6em;
      height: 0.6em;
      border-radius: 50%;
      background: var(--cyd7ai-ai);
      box-shadow: 0 0 0.5em var(--cyd7ai-ai);
    }

    #cyd7ai [data-cyd7ai-hit="warn"] .cyd7ai-h-fleet-foot .cyd7ai-dot,
    #cyd7ai [data-cyd7ai-hit="fix"] .cyd7ai-h-fleet-foot .cyd7ai-dot { background: #ffb02e; box-shadow: 0 0 0.5em #ffb02e; }
    #cyd7ai [data-cyd7ai-hphase="verify"] .cyd7ai-h-fleet-foot .cyd7ai-dot,
    #cyd7ai [data-cyd7ai-hphase="report"] .cyd7ai-h-fleet-foot .cyd7ai-dot,
    #cyd7ai [data-cyd7ai-hphase="login"] .cyd7ai-h-fleet-foot .cyd7ai-dot { background: var(--cyd7ai-green); box-shadow: 0 0 0.5em var(--cyd7ai-green); }

    /* fil d'activite des agents IA (4 entrees, la plus recente en haut) */
    #cyd7ai .cyd7ai-feed-h {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.6em;
      min-width: 0;
      color: #fff;
      font-size: max(0.68rem, 0.92em);
      font-weight: 700;
      white-space: nowrap;
    }

    #cyd7ai .cyd7ai-feed-h > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

    #cyd7ai .cyd7ai-live {
      display: inline-flex;
      align-items: center;
      gap: 0.35em;
      flex: none;
      color: var(--cyd7ai-ok-t);
      font-size: max(0.66rem, 0.8em);
      font-weight: 600;
    }

    #cyd7ai .cyd7ai-live i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--cyd7ai-green); box-shadow: 0 0 0.4em var(--cyd7ai-green); }

    #cyd7ai .cyd7ai-feed {
      display: grid;
      grid-template-rows: repeat(4, minmax(0, 1fr));
      gap: 0.3em;
      flex: 1;
      min-height: 0;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #cyd7ai .cyd7ai-feed li {
      display: grid;
      grid-template-columns: 0.6em minmax(0, 1fr) auto;
      align-items: center;
      gap: 0.55em;
      min-width: 0;
      min-height: 0;
      padding: 0.2em 0.5em;
      border-radius: 0.4em;
      background: rgba(120, 160, 220, 0.07);
      font-size: max(0.66rem, 0.86em);
      line-height: 1.22;
    }

    #cyd7ai .cyd7ai-feed li:first-child { background: rgba(143, 124, 255, 0.16); box-shadow: inset 2px 0 0 var(--cyd7ai-ai); }
    #cyd7ai .cyd7ai-feed li.is-empty { visibility: hidden; }
    #cyd7ai .cyd7ai-feed li > i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--cyd7ai-ai); }
    #cyd7ai .cyd7ai-feed li[data-k="warn"] > i { background: #ffb02e; }
    #cyd7ai .cyd7ai-feed li[data-k="ok"] > i { background: var(--cyd7ai-green); }
    #cyd7ai .cyd7ai-feed li[data-k="fix"] > i { background: #6aa8ff; }
    #cyd7ai .cyd7ai-feed li[data-k="gear"] > i { background: var(--cyan); }
    #cyd7ai .cyd7ai-feed li[data-k="doc"] > i { background: var(--accent-bright); }

    /* une ligne par entree (libelles courts ; points de suspension en filet de securite) */
    #cyd7ai .cyd7ai-feed li > span {
      display: block;
      min-width: 0;
      overflow: hidden;
      color: #dfe8f6;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #cyd7ai .cyd7ai-feed time { color: #9fb3d6; font-variant-numeric: tabular-nums; }

    /* 08:00 : la console ouvre la vue du poste de Marie (session ouverte, tout fonctionne).
       La vue couvre toute la zone sous la barre du haut : aucun fragment de la console ne depasse autour */
    #cyd7ai .cyd7ai-rv {
      position: absolute;
      left: 0;
      right: 0;
      top: 2.5em;
      bottom: 0;
      z-index: 3;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 0 0 0.35em 0.35em;
      background: #0b1630;
      visibility: hidden;
    }

    #cyd7ai [data-cyd7ai-hphase="login"] .cyd7ai-rv { visibility: visible; }

    #cyd7ai .cyd7ai-rv-bar {
      display: flex;
      align-items: center;
      gap: 0.5em;
      flex: none;
      min-width: 0;
      height: 2.2em;
      padding: 0 0.75em;
      background: #e9eff8;
      color: var(--cyd7ai-ink);
      font-size: max(0.68rem, 0.9em);
      font-weight: 700;
      white-space: nowrap;
    }

    #cyd7ai .cyd7ai-rv-bar .ic { flex: none; width: 1.3em; height: 1.3em; color: var(--cyd7ai-blue); }
    #cyd7ai .cyd7ai-rv-bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    #cyd7ai .cyd7ai-rv-live { display: inline-flex; align-items: center; gap: 0.35em; flex: none; margin-left: auto; color: #0d7a45; font-style: normal; }
    #cyd7ai .cyd7ai-rv-live i { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--cyd7ai-ok); }

    #cyd7ai .cyd7ai-rv-scr {
      position: relative;
      display: grid;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 80% 10%, rgba(255, 179, 120, 0.5), transparent 55%),
        radial-gradient(ellipse at 10% 95%, rgba(143, 124, 255, 0.42), transparent 60%),
        linear-gradient(140deg, #23508f, #0f2a5c 70%);
    }

    #cyd7ai .cyd7ai-rv-scr > * { grid-area: 1 / 1; }
    #cyd7ai .cyd7ai-rv-desk { position: relative; display: block; }
    #cyd7ai .cyd7ai-rv-icons { position: absolute; left: 0.9em; top: 0.9em; display: grid; gap: 0.6em; }
    #cyd7ai .cyd7ai-rv-icons i { display: block; width: 1.6em; height: 1.35em; border-radius: 0.25em; background: rgba(255, 255, 255, 0.3); }

    #cyd7ai .cyd7ai-rv-toast {
      position: absolute;
      right: 0.9em;
      bottom: 3em;
      display: flex;
      align-items: center;
      gap: 0.7em;
      max-width: calc(100% - 4.5em);
      padding: 0.7em 0.95em;
      border-radius: 0.6em;
      background: #f5f8fd;
      color: var(--cyd7ai-ink);
      box-shadow: 0 0.8em 2em rgba(0, 0, 0, 0.4);
    }

    #cyd7ai .cyd7ai-rv-toast .ic { flex: none; width: 2em; height: 2em; padding: 0.35em; border-radius: 50%; background: var(--cyd7ai-ok); color: #fff; stroke-width: 3; }
    #cyd7ai .cyd7ai-rv-toast > span { display: flex; flex-direction: column; min-width: 0; }
    #cyd7ai .cyd7ai-rv-toast b { color: #0d7a45; font-size: max(0.78rem, 1.15em); }
    #cyd7ai .cyd7ai-rv-toast > span > span { color: var(--cyd7ai-ink2); font-size: max(0.68rem, 0.92em); }

    #cyd7ai .cyd7ai-rv-task {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      gap: 0.5em;
      height: 2.1em;
      padding: 0 0.85em;
      background: rgba(6, 13, 30, 0.78);
      color: #dfe8f6;
      font-size: max(0.66rem, 0.86em);
      font-variant-numeric: tabular-nums;
    }

    #cyd7ai .cyd7ai-rv-task i { display: block; width: 0.95em; height: 0.95em; border-radius: 0.2em; background: rgba(255, 255, 255, 0.4); }
    #cyd7ai .cyd7ai-rv-task i:first-child { background: var(--cyan); }
    #cyd7ai .cyd7ai-rv-task span { margin-left: auto; }

    #cyd7ai .cyd7ai-rv-lock {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.35em;
      background: linear-gradient(160deg, #10306a, #081633);
      color: #fff;
      visibility: hidden;
    }

    #cyd7ai .cyd7ai-rv-time { font-family: var(--fx-mono); font-size: 2.8em; font-weight: 700; line-height: 1.05; }
    #cyd7ai .cyd7ai-rv-av { display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-bright)); font-weight: 800; }
    #cyd7ai .cyd7ai-rv-hi { font-size: max(0.74rem, 1.1em); font-weight: 700; }

    /* Agent IA : carte de verre bleue flottante (comme la page HDCE Sentinel) */
    #cyd7ai .cyd7ai-hero-fx .cyd7ai-h-ai {
      position: absolute;
      left: 0;
      top: 46.6cqw;
      width: 36%;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 0.5em 0.8em;
      padding: 0.85em 0.95em 0.8em;
      border: 1px solid rgba(140, 190, 255, 0.6);
      border-radius: 0.9em;
      background: linear-gradient(135deg, #1f4fb5 0%, #143583 50%, #0c1f52 100%);
      color: #fff;
      box-shadow: 0 0 1.8em rgba(70, 130, 255, 0.32), 0 1em 2em rgba(0, 0, 0, 0.5);
      transition: border-color 0.45s ease, box-shadow 0.45s ease;
    }

    #cyd7ai .cyd7ai-hero-fx .cyd7ai-h-ai.is-lit { border-color: #c9c0ff; box-shadow: 0 0 0 1px rgba(201, 192, 255, 0.5), 0 0 2.2em rgba(143, 124, 255, 0.5), 0 1em 2em rgba(0, 0, 0, 0.5); }

    #cyd7ai .cyd7ai-agent-ic {
      position: relative;
      display: grid;
      place-items: center;
      flex: none;
      width: 2.8em;
      height: 2.8em;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.35), rgba(120, 170, 255, 0.18) 60%, rgba(143, 124, 255, 0.12));
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 1.2em rgba(143, 124, 255, 0.45);
      color: #fff;
    }

    #cyd7ai .cyd7ai-agent-ic .ic { width: 1.6em; height: 1.6em; fill: rgba(255, 255, 255, 0.85); stroke-width: 1.4; }

    #cyd7ai .cyd7ai-agent-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.24; overflow-wrap: normal; word-break: normal; -webkit-hyphens: manual; hyphens: manual; }
    #cyd7ai .cyd7ai-agent-txt b { color: #fff; font-size: max(0.78rem, 1.15em); }
    #cyd7ai .cyd7ai-h-ai-s { color: #e6eeff; font-size: max(0.7rem, 0.98em); font-weight: 600; }
    #cyd7ai .cyd7ai-h-ai-d { color: #b8cdf5; font-size: max(0.66rem, 0.9em); }

    #cyd7ai [data-cyd7ai-hphase="detect"] .cyd7ai-h-ai-s { color: #ffd38a; font-weight: 700; }
    #cyd7ai [data-cyd7ai-hphase="login"] .cyd7ai-h-ai-s { color: var(--cyd7ai-ok-t); font-weight: 700; }

    #cyd7ai .cyd7ai-ag-bar { display: block; grid-column: 1 / -1; height: 0.26em; overflow: hidden; border-radius: 0.2em; background: rgba(255, 255, 255, 0.14); }
    #cyd7ai .cyd7ai-ag-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8fc1ff, #fff); transform-origin: left center; }

    /* Vignettes du hero : sous le moniteur, a droite de l'agent IA, une a la fois */
    #cyd7ai .cyd7ai-hero-fx .fx-vig {
      max-width: none;
      box-sizing: border-box;
      padding: 0.75em 1em;
      font-size: 1em;
    }

    /* ancrees en bas : la place libre reste entre le moniteur et la fenetre, jamais sous la scene */
    #cyd7ai .cyd7ai-hero-fx .cyd7ai-hv { left: 40%; top: auto; bottom: 0; width: 60%; }
    #cyd7ai .cyd7ai-hero-fx .fx-vig-head { font-size: max(0.66rem, 0.84em); margin-bottom: 0.4em; }
    #cyd7ai .cyd7ai-hero-fx .fx-vig-head .ic { width: 1.4em; height: 1.4em; }
    #cyd7ai .cyd7ai-hero-fx .fx-vig-title { font-size: max(0.76rem, 1.1em); margin-bottom: 0.2em; }
    #cyd7ai .cyd7ai-hero-fx .fx-vig-meta,
    #cyd7ai .cyd7ai-hero-fx .fx-vig-row { font-size: max(0.68rem, 0.95em); }
    #cyd7ai .cyd7ai-hero-fx .fx-vig-ok { font-size: max(0.68rem, 0.92em); margin-top: 0.45em; }
    #cyd7ai .cyd7ai-hero-fx .fx-vig-ok .ic { width: 1.3em; height: 1.3em; }
    #cyd7ai .cyd7ai-hero-fx .fx-vig-progress { display: block; margin: 0.45em 0 0.35em; }
    #cyd7ai .cyd7ai-t-bad { color: var(--cyd7ai-bad-t) !important; }

    /* Controles du hero : barre de temps du moteur (lecture/pause, etape courante, segments cliquables) sous la scene */
    #cyd7ai .cyd7ai-hero-fx > .fx-controls { position: relative; z-index: 5; margin-top: 12px; }
    #cyd7ai .cyd7ai-hero-fx .fx-scn-sum { display: none; }
    #cyd7ai .cyd7ai-hero-fx .fx-edge .fx-wire { stroke-opacity: 0.7; }

    #cyd7ai .cyd7ai-sample { margin: 6px 0 0; color: var(--text-muted); font-size: 0.78rem; text-align: right; }

    #cyd7ai .ia-hero-visual > .cyd7ai-sample { margin-top: 8px; }

    #cyd7ai .cyd7ai-how > .cyd7ai-sample { margin-top: 10px; }

    /* ---------- Ce que font les agents IA ---------- */
    #cyd7ai .cyd7ai-caps-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
    }

    #cyd7ai .cyd7ai-cap {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }

    /* hauteur fixe (celle de l'icone) : les titres d'une meme rangee restent alignes */
    #cyd7ai .cyd7ai-cap-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      height: 42px;
    }

    #cyd7ai .cyd7ai-cap-ic { width: 42px; height: 42px; }
    #cyd7ai .cyd7ai-cap-ic .ic { width: 20px; height: 20px; }
    #cyd7ai .cyd7ai-cap h3 { margin: 0; color: #fff; font-size: 1rem; line-height: 1.3; }

    #cyd7ai .cyd7ai-cap ul {
      display: grid;
      gap: 5px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #cyd7ai .cyd7ai-cap li {
      position: relative;
      padding-left: 15px;
      color: var(--text-muted);
      font-size: 0.88rem;
      line-height: 1.42;
    }

    #cyd7ai .cyd7ai-cap li::before {
      content: "";
      position: absolute;
      left: 2px;
      top: 0.6em;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--cyan);
    }

    /* micro-visuels (decoratifs) : etat final lisible, boucles seulement quand le bloc est visible */
    #cyd7ai .cyd7ai-viz {
      position: relative;
      display: flex;
      align-items: center;
      gap: 6px;
      flex: none;
      height: 30px;
      color: var(--text-muted);
      font-family: var(--fx-mono);
      font-size: 0.6rem;
    }

    #cyd7ai .cyd7ai-viz--radar {
      width: 30px;
      border: 1px solid rgba(143, 124, 255, 0.45);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(143, 124, 255, 0.16) 0 35%, transparent 36%), rgba(10, 20, 44, 0.8);
      overflow: hidden;
    }

    #cyd7ai .cyd7ai-viz--radar i {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: conic-gradient(from 0deg, rgba(143, 124, 255, 0.55), transparent 28%);
    }

    #cyd7ai .cyd7ai-viz--radar b {
      position: absolute;
      left: 64%;
      top: 26%;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--cyd7ai-warn-t);
      box-shadow: 0 0 6px var(--cyd7ai-warn-t);
    }

    #cyd7ai .cyd7ai-viz--log { flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; width: 64px; }
    #cyd7ai .cyd7ai-viz--log i { display: block; height: 3px; border-radius: 2px; background: rgba(120, 160, 220, 0.4); }
    #cyd7ai .cyd7ai-viz--log i:nth-child(1) { width: 100%; }
    #cyd7ai .cyd7ai-viz--log i:nth-child(2) { width: 74%; }
    #cyd7ai .cyd7ai-viz--log i:nth-child(3) { width: 88%; background: var(--cyd7ai-warn-t); box-shadow: 0 0 6px rgba(247, 196, 106, 0.6); }
    #cyd7ai .cyd7ai-viz--log i:nth-child(4) { width: 60%; }

    #cyd7ai .cyd7ai-viz--ver .ic { width: 14px; height: 14px; color: var(--cyd7ai-ai-t); }
    #cyd7ai .cyd7ai-viz--ver span { padding: 2px 6px; border-radius: 999px; white-space: nowrap; }
    #cyd7ai .cyd7ai-ver-a { background: rgba(214, 69, 58, 0.16); color: var(--cyd7ai-bad-t); text-decoration: line-through; }
    #cyd7ai .cyd7ai-ver-b { background: rgba(79, 209, 139, 0.16); color: var(--cyd7ai-ok-t); }

    #cyd7ai .cyd7ai-viz--sky { gap: 4px; }
    #cyd7ai .cyd7ai-viz--sky .ic { display: block; width: 15px; height: 15px; }
    #cyd7ai .cyd7ai-sky-m { color: #ffe7a8; }
    #cyd7ai .cyd7ai-sky-s { color: #ffd27a; }
    #cyd7ai .cyd7ai-viz--sky i {
      position: relative;
      width: 40px;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, rgba(143, 124, 255, 0.6), rgba(255, 210, 122, 0.8));
    }

    #cyd7ai .cyd7ai-viz--sky i::after {
      content: "";
      position: absolute;
      right: -2px;
      top: -3px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ffd27a;
      box-shadow: 0 0 8px rgba(255, 210, 122, 0.8);
    }

    #cyd7ai .cyd7ai-viz--spark { width: 96px; }
    #cyd7ai .cyd7ai-viz--spark svg { display: block; width: 100%; height: 28px; overflow: visible; }
    #cyd7ai .cyd7ai-viz--spark path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    #cyd7ai .cyd7ai-sp-a { stroke: rgba(247, 196, 106, 0.45); stroke-dasharray: 3 3; }
    #cyd7ai .cyd7ai-sp-b { stroke: var(--cyd7ai-green); }

    #cyd7ai .cyd7ai-viz--chips { flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: flex-end; gap: 3px; flex: 0 1 auto; min-width: 0; max-width: 176px; height: 42px; }
    #cyd7ai .cyd7ai-viz--chips span { padding: 1px 6px; border-radius: 999px; background: rgba(247, 196, 106, 0.14); color: var(--cyd7ai-warn-t); white-space: nowrap; }
    #cyd7ai .cyd7ai-viz--chips span:nth-child(2) { background: rgba(214, 69, 58, 0.16); color: var(--cyd7ai-bad-t); }

    #cyd7ai .cyd7ai-viz--bar { flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; width: 76px; }
    #cyd7ai .cyd7ai-bar-t { display: block; width: 100%; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(120, 160, 220, 0.18); }
    #cyd7ai .cyd7ai-bar-t i { display: block; width: 48%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyd7ai-green), #9be8bf); }

    #cyd7ai .cyd7ai-cap--result {
      justify-content: center;
      padding: 20px 18px;
      border-color: rgba(232, 87, 74, 0.55);
      background:
        radial-gradient(ellipse at 20% 0%, rgba(232, 87, 74, 0.2), transparent 60%),
        var(--ia-panel-bg);
    }

    #cyd7ai .cyd7ai-cap--result h3 { font-size: 1.05rem; }
    #cyd7ai .cyd7ai-cap--result p { margin: 0 0 6px; color: #fff; font-size: 0.98rem; line-height: 1.45; }
    #cyd7ai .cyd7ai-cap--result .ia-btn { align-self: flex-start; min-height: 42px; padding: 9px 18px; font-size: 0.92rem; }
    #cyd7ai .cyd7ai-cap-ic--ai .ic { fill: rgba(232, 87, 74, 0.25); }

    /* ---------- Comment ca fonctionne : legende ---------- */
    #cyd7ai .cyd7ai-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 20px;
      margin: 0 0 18px;
      padding: 0;
      list-style: none;
      color: var(--text-muted);
      font-size: 0.84rem;
    }

    #cyd7ai .cyd7ai-legend li { display: inline-flex; align-items: center; gap: 8px; }

    #cyd7ai .cyd7ai-lg {
      display: inline-block;
      width: 24px;
      height: 0;
      border-top: 2.5px solid var(--fx-k-data);
      border-radius: 2px;
    }

    #cyd7ai .cyd7ai-lg--ai { border-top-color: var(--fx-k-ai); }
    #cyd7ai .cyd7ai-lg--control { border-top-color: var(--fx-k-control); }
    #cyd7ai .cyd7ai-lg--payment { border-top-color: var(--fx-k-payment); }
    #cyd7ai .cyd7ai-lg--event { border-top-color: var(--fx-k-event); }
    #cyd7ai .cyd7ai-lg--feedback { border-top: 2.5px dashed var(--fx-k-feedback); }

    /* ---------- Serpentin : scene et cartes ---------- */
    #cyd7ai .cyd7ai-flow-stage {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      row-gap: 44px;
      padding: 2px 0 6px;
    }

    #cyd7ai .cyd7ai-flow .cyd7ai-step {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
      padding: 16px;
      border: 1px solid rgba(80, 140, 255, 0.28);
      border-radius: 14px;
      background: var(--cyd7ai-bg);
      color: var(--text);
      line-height: 1.4;
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
      transition: border-color 0.45s ease, box-shadow 0.45s ease, background 0.45s ease;
    }

    #cyd7ai .cyd7ai-flow .cyd7ai-step--9 { --fx-accent: var(--cyd7ai-green); }

    /* carte conteneur (4) : position pour le voile d'attenuation, sans contexte d'empilement */
    #cyd7ai .cyd7ai-flow .cyd7ai-step:not(.fx-node) { position: relative; }

    #cyd7ai .cyd7ai-flow .fx-node.cyd7ai-step,
    #cyd7ai .cyd7ai-flow .cyd7ai-rules,
    #cyd7ai .cyd7ai-flow .cyd7ai-appr { scale: none !important; }

    #cyd7ai .cyd7ai-flow .fx-node.cyd7ai-step.is-lit,
    #cyd7ai .cyd7ai-flow .cyd7ai-step.cyd7ai-is-cur {
      --cyd7ai-bg: var(--cyd7ai-bg-cur);
      border-color: var(--fx-accent);
      background: var(--cyd7ai-bg-cur);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--fx-accent) 32%, transparent), 0 0 22px color-mix(in srgb, var(--fx-accent) 14%, transparent), 0 10px 26px rgba(0, 0, 0, 0.4);
    }

    #cyd7ai .cyd7ai-flow .cyd7ai-step.cyd7ai-is-cur { --fx-accent: var(--cyd7ai-ai); }

    #cyd7ai .cyd7ai-flow .fx-node.cyd7ai-step.is-done,
    #cyd7ai .cyd7ai-flow .cyd7ai-step.cyd7ai-is-visited { border-color: rgba(120, 160, 220, 0.3); }

    #cyd7ai .cyd7ai-flow .fx-node.cyd7ai-step.is-dim { border-color: rgba(110, 150, 220, 0.14); box-shadow: none; }
    #cyd7ai .cyd7ai-flow .fx-node.cyd7ai-step.is-dim > * { opacity: 0.42; filter: saturate(0.6); }

    #cyd7ai .cyd7ai-flow .cyd7ai-step.cyd7ai-is-dim { border-color: rgba(110, 150, 220, 0.14); box-shadow: none; }

    #cyd7ai .cyd7ai-flow .cyd7ai-step.cyd7ai-is-dim::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      border-radius: inherit;
      background: rgba(9, 18, 40, 0.6);
      pointer-events: none;
    }

    /* En-tete de carte : masque les liens qui passent dessous */
    #cyd7ai .cyd7ai-step-head {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      column-gap: 12px;
      align-items: start;
      background: var(--cyd7ai-bg);
      transition: background 0.45s ease;
    }

    #cyd7ai .cyd7ai-layer {
      grid-column: 2;
      color: var(--cyd7ai-ai-t);
      font-family: var(--fx-mono);
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      line-height: 1.5;
      text-transform: uppercase;
    }

    #cyd7ai .fx-prod--hdce .cyd7ai-layer { color: var(--ia-coral-soft); }
    #cyd7ai .cyd7ai-step--9 .cyd7ai-layer { color: var(--cyd7ai-ok-t); }

    #cyd7ai .cyd7ai-step-head h3 {
      grid-column: 2;
      margin: 2px 0 4px;
      color: #fff;
      font-size: 1rem;
      line-height: 1.25;
    }

    #cyd7ai .cyd7ai-step-head p {
      grid-column: 2;
      margin: 0;
      color: var(--text-muted);
      font-size: 0.86rem;
      line-height: 1.42;
    }

    #cyd7ai .cyd7ai-num {
      grid-row: 1 / span 3;
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #e8eef8;
      color: #0b1733;
      font-size: 0.95rem;
      font-weight: 800;
      transition: background 0.45s ease, color 0.45s ease, box-shadow 0.45s ease;
    }

    #cyd7ai .cyd7ai-step.is-lit .cyd7ai-num,
    #cyd7ai .cyd7ai-step.cyd7ai-is-cur .cyd7ai-num {
      background: linear-gradient(135deg, var(--accent), var(--accent-bright));
      color: #fff;
      box-shadow: 0 0 14px rgba(232, 87, 74, 0.5);
    }

    #cyd7ai .cyd7ai-step.is-done .cyd7ai-num,
    #cyd7ai .cyd7ai-step.cyd7ai-is-visited .cyd7ai-num { box-shadow: 0 0 0 2px var(--cyd7ai-ai); }

    #cyd7ai .cyd7ai-ui { min-width: 0; margin-top: auto; margin-bottom: auto; }

    /* Fenetres claires (mini-interfaces) */
    #cyd7ai .cyd7ai-win {
      position: relative;
      min-width: 0;
      border: 1px solid #c9d6ea;
      border-radius: 8px;
      background: var(--cyd7ai-win);
      color: var(--cyd7ai-ink);
      font-size: var(--cyd7ai-ui-fs);
      line-height: 1.35;
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
    }

    #cyd7ai .cyd7ai-win-bar {
      position: relative;
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      padding: 5px 9px;
      border-bottom: 1px solid var(--cyd7ai-wline);
      border-radius: 8px 8px 0 0;
      background: #e9eff8;
      font-weight: 700;
      white-space: nowrap;
    }

    #cyd7ai .cyd7ai-win-bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    #cyd7ai .cyd7ai-win .ic { flex: none; width: 14px; height: 14px; }
    #cyd7ai .cyd7ai-win-bar > .ic { color: var(--cyd7ai-blue); }
    #cyd7ai .cyd7ai-win-bar > .cyd7ai-ic-ai { color: #6a55e8; }
    #cyd7ai .cyd7ai-x { margin-left: auto; color: var(--cyd7ai-ink2); font-style: normal; font-weight: 400; }

    #cyd7ai .cyd7ai-win-in {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
      padding: 8px 9px 9px;
    }

    #cyd7ai .cyd7ai-flow .cyd7ai-cursor {
      position: absolute;
      right: 8%;
      bottom: -6px;
      z-index: 3;
      width: 18px;
      height: 18px;
      opacity: 0;
      pointer-events: none;
    }

    #cyd7ai .cyd7ai-cursor .ic {
      width: 100%;
      height: 100%;
      fill: #fff;
      stroke: #0f1d3a;
      stroke-width: 1.5;
      filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
    }

    /* barre de progression claire */
    #cyd7ai .cyd7ai-prog { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 2px; }
    #cyd7ai .cyd7ai-prog-t { flex: 1; height: 5px; overflow: hidden; border-radius: 3px; background: #dfe7f3; }
    #cyd7ai .cyd7ai-prog-t i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyd7ai-blue), #6aa8ff); transform-origin: left center; }
    #cyd7ai .cyd7ai-prog-l { flex: none; color: var(--cyd7ai-ink2); font-weight: 600; white-space: nowrap; }

    /* ----- Fenetres modales (cartes 2, 3, 5 et 8) : emplacement fixe, sans saut de mise en page.
       Pendant la lecture, une fenetre non atteinte est repliee sur sa barre (« en attente ») ;
       a son etape elle s'ouvre, l'action a lieu, puis elle se replie sur sa barre, qui affiche le resultat.
       En mouvement reduit, les fenetres restent ouvertes (etat final). ----- */
    #cyd7ai .cyd7ai-wslot { --cyd7ai-bar: 28px; position: relative; display: grid; min-width: 0; }
    #cyd7ai .cyd7ai-wslot > * { grid-area: 1 / 1; }
    #cyd7ai .cyd7ai-wslot .cyd7ai-win-bar { box-sizing: border-box; height: var(--cyd7ai-bar); }

    #cyd7ai .cyd7ai-wres {
      position: absolute;
      inset: -1px;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 10px;
      border: 1px solid rgba(143, 124, 255, 0.6);
      border-radius: 8px;
      background: var(--cyd7ai-ghost);
      color: var(--cyd7ai-ai-t);
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      visibility: hidden;
    }

    #cyd7ai .cyd7ai-wslot .cyd7ai-wres .ic { width: 15px; height: 15px; padding: 2px; border-radius: 50%; background: rgba(143, 124, 255, 0.24); color: var(--cyd7ai-ai-t); stroke-width: 2.6; }
    #cyd7ai .fx-prod--hdce .cyd7ai-wres { border-color: rgba(255, 111, 94, 0.55); color: #ffc9c1; }
    #cyd7ai .fx-prod--hdce .cyd7ai-wslot .cyd7ai-wres .ic { background: rgba(255, 111, 94, 0.22); color: #ffc9c1; }

    #cyd7ai .cyd7ai-wghost {
      display: grid;
      align-content: center;
      justify-items: center;
      min-width: 0;
      padding: calc(var(--cyd7ai-bar) + 8px) 12px 10px;
      border: 1px dashed rgba(120, 160, 220, 0.38);
      border-radius: 8px;
      background: #0a1530;
      color: var(--text-muted);
      font-size: var(--cyd7ai-ui-fs);
      line-height: 1.35;
      text-align: center;
      visibility: hidden;
    }

    #cyd7ai .cyd7ai-wg-wait,
    #cyd7ai .cyd7ai-wg-done {
      grid-area: 1 / 1;
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      min-width: 0;
      max-width: 100%;
    }

    #cyd7ai .cyd7ai-wg-wait > .ic,
    #cyd7ai .cyd7ai-wg-done > .ic {
      flex: none;
      width: 24px;
      height: 24px;
      margin-bottom: 2px;
      padding: 4px;
      border-radius: 50%;
      background: rgba(120, 160, 220, 0.14);
      color: #9fb7dc;
    }

    #cyd7ai .cyd7ai-wg-done > .ic { background: rgba(79, 209, 139, 0.18); color: var(--cyd7ai-ok-t); stroke-width: 2.4; }
    #cyd7ai .cyd7ai-wg-wait b { color: #c4d2ea; font-size: 0.74rem; }
    #cyd7ai .cyd7ai-wg-done b { color: #fff; font-size: 0.74rem; }
    #cyd7ai .cyd7ai-wg-wait > span,
    #cyd7ai .cyd7ai-wg-done > span { max-width: 100%; }

    /* ----- Etats « en attente » pendant la lecture (carte non encore atteinte) ----- */
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--2[data-cyd7ai-phase=""] .cyd7ai-tele,
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--3[data-cyd7ai-phase=""] .cyd7ai-ana,
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--5[data-cyd7ai-phase=""] .cyd7ai-job,
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--8[data-cyd7ai-phase=""] .cyd7ai-rep { clip-path: inset(0 0 calc(100% - var(--cyd7ai-bar)) 0 round 8px); }

    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--2[data-cyd7ai-phase=""] .cyd7ai-tele > .cyd7ai-win-bar,
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--3[data-cyd7ai-phase=""] .cyd7ai-ana > .cyd7ai-win-bar,
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--5[data-cyd7ai-phase=""] .cyd7ai-job > .cyd7ai-win-bar,
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--8[data-cyd7ai-phase=""] .cyd7ai-rep > .cyd7ai-win-bar { opacity: 0.6; }

    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step[data-cyd7ai-phase=""] .cyd7ai-wghost { visibility: visible; }
    #cyd7ai .cyd7ai-step[data-cyd7ai-phase=""] .cyd7ai-wg-wait { display: flex; }

    /* resultats (visibles une fois la fenetre refermee) */
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-wg-done,
    #cyd7ai .cyd7ai-step--3[data-cyd7ai-phase="analyze"] .cyd7ai-wg-done,
    #cyd7ai .cyd7ai-step--5[data-cyd7ai-phase="run"] .cyd7ai-wg-done,
    #cyd7ai .cyd7ai-step--8[data-cyd7ai-phase="report"] .cyd7ai-wg-done { display: flex; }

    /* ----- Carte 1 : inventaire du parc ----- */
    #cyd7ai .cyd7ai-inv {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(120, 160, 220, 0.3);
      border-radius: 8px;
      background: #081128;
      font-size: var(--cyd7ai-ui-fs);
      line-height: 1.35;
    }

    #cyd7ai .cyd7ai-inv-h {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 9px;
      border-bottom: 1px solid rgba(120, 160, 220, 0.18);
      color: #dfe8f6;
      font-weight: 700;
      white-space: nowrap;
    }

    #cyd7ai .cyd7ai-inv-h .ic { flex: none; width: 14px; height: 14px; color: var(--cyd7ai-ai-t); }
    #cyd7ai .cyd7ai-inv-h > span:not(.cyd7ai-inv-n) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    #cyd7ai .cyd7ai-inv-n { margin-left: auto; color: var(--text-muted); font-family: var(--fx-mono); font-size: 0.6rem; font-weight: 600; }

    #cyd7ai .cyd7ai-inv-list { margin: 0; padding: 4px 0; list-style: none; }

    #cyd7ai .cyd7ai-inv-r {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      padding: 4px 9px;
      border-left: 2px solid transparent;
    }

    #cyd7ai .cyd7ai-inv-r > .ic { flex: none; width: 15px; height: 15px; color: #8fa6cc; }
    #cyd7ai .cyd7ai-inv-id { display: flex; flex-direction: column; flex: 1; min-width: 0; }
    #cyd7ai .cyd7ai-inv-id b { overflow: hidden; color: #fff; font-family: var(--fx-mono); font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; }
    #cyd7ai .cyd7ai-inv-id > span { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }

    #cyd7ai .cyd7ai-inv-plus { display: none; margin-left: 6px; color: var(--cyd7ai-warn-t); font-weight: 600; }
    /* le nombre de postes touches n'apparait qu'avec le diagnostic de l'IA (carte 3) */
    #cyd7ai [data-cyd7ai-hit="diag"] .cyd7ai-inv-r.is-hit .cyd7ai-inv-plus:not(:empty),
    #cyd7ai [data-cyd7ai-hit="fix"] .cyd7ai-inv-r.is-hit .cyd7ai-inv-plus:not(:empty),
    #cyd7ai [data-cyd7ai-hit="ok"] .cyd7ai-inv-r.is-hit .cyd7ai-inv-plus:not(:empty) { display: inline; }

    #cyd7ai .cyd7ai-st { display: grid; flex: none; justify-items: end; }
    #cyd7ai .cyd7ai-st > span {
      grid-area: 1 / 1;
      padding: 1px 7px;
      border-radius: 999px;
      font-weight: 700;
      white-space: nowrap;
      visibility: hidden;
    }

    #cyd7ai .cyd7ai-st0 { background: rgba(79, 209, 139, 0.14); color: var(--cyd7ai-ok-t); }
    #cyd7ai .cyd7ai-st1,
    #cyd7ai .cyd7ai-st5 { background: rgba(217, 138, 7, 0.18); color: var(--cyd7ai-warn-t); }
    #cyd7ai .cyd7ai-st2 { background: rgba(31, 111, 224, 0.22); color: #a9ccff; }
    #cyd7ai .cyd7ai-st3 { background: rgba(79, 209, 139, 0.2); color: var(--cyd7ai-ok-t); }

    /* une seule pastille visible : sain, a analyser (balayage), diagnostic (des l'analyse IA), en correction, corrige */
    #cyd7ai .cyd7ai-st > .cyd7ai-st0 { visibility: visible; }
    #cyd7ai [data-cyd7ai-hit="alert"] .is-hit .cyd7ai-st0,
    #cyd7ai [data-cyd7ai-hit="diag"] .is-hit .cyd7ai-st0,
    #cyd7ai [data-cyd7ai-hit="fix"] .is-hit .cyd7ai-st0,
    #cyd7ai [data-cyd7ai-hit="ok"] .is-hit .cyd7ai-st0 { visibility: hidden; }
    #cyd7ai [data-cyd7ai-hit="alert"] .is-hit .cyd7ai-st5,
    #cyd7ai [data-cyd7ai-hit="diag"] .is-hit .cyd7ai-st1,
    #cyd7ai [data-cyd7ai-hit="fix"] .is-hit .cyd7ai-st2,
    #cyd7ai [data-cyd7ai-hit="ok"] .is-hit .cyd7ai-st3 { visibility: visible; }

    #cyd7ai [data-cyd7ai-hit="alert"] .cyd7ai-inv-r.is-hit,
    #cyd7ai [data-cyd7ai-hit="diag"] .cyd7ai-inv-r.is-hit { border-left-color: var(--cyd7ai-warn-t); background: rgba(217, 138, 7, 0.1); }
    #cyd7ai [data-cyd7ai-hit="fix"] .cyd7ai-inv-r.is-hit { border-left-color: #6aa8ff; background: rgba(31, 111, 224, 0.12); }
    #cyd7ai [data-cyd7ai-hit="ok"] .cyd7ai-inv-r.is-hit { border-left-color: var(--cyd7ai-green); background: rgba(79, 209, 139, 0.08); }

    /* filet de securite : jamais deux pastilles superposees */
    #cyd7ai [data-cyd7ai-hit="fix"] .is-hit .cyd7ai-st1,
    #cyd7ai [data-cyd7ai-hit="fix"] .is-hit .cyd7ai-st5,
    #cyd7ai [data-cyd7ai-hit="ok"] .is-hit .cyd7ai-st1,
    #cyd7ai [data-cyd7ai-hit="ok"] .is-hit .cyd7ai-st5,
    #cyd7ai [data-cyd7ai-hit="alert"] .is-hit .cyd7ai-st1 { visibility: hidden !important; }

    /* balayage de l'inventaire */
    #cyd7ai .cyd7ai-inv::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 22px;
      background: linear-gradient(180deg, transparent, rgba(143, 124, 255, 0.28) 70%, rgba(201, 192, 255, 0.7));
      opacity: 0;
      pointer-events: none;
    }

    /* ----- Carte 2 : collecte RMM ----- */
    #cyd7ai .cyd7ai-ui--2 { display: grid; gap: 9px; }

    #cyd7ai .cyd7ai-rmm-chips,
    #cyd7ai .cyd7ai-acts {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #cyd7ai .cyd7ai-rmm-chips li,
    #cyd7ai .cyd7ai-acts li {
      padding: 2px 8px;
      border: 1px solid rgba(120, 160, 220, 0.3);
      border-radius: 999px;
      background: #0a1530;
      color: #c4d2ea;
      font-size: 0.66rem;
      font-weight: 600;
      white-space: nowrap;
    }

    #cyd7ai .cyd7ai-rmm-chips li { border-color: rgba(255, 111, 94, 0.35); color: #ffd2cb; }

    #cyd7ai .cyd7ai-kv {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto 8px;
      align-items: center;
      gap: 8px;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--cyd7ai-wline);
    }

    #cyd7ai .cyd7ai-kv > span { min-width: 0; overflow: hidden; color: var(--cyd7ai-ink2); text-overflow: ellipsis; white-space: nowrap; }
    #cyd7ai .cyd7ai-kv > b { color: var(--cyd7ai-ink); font-weight: 700; white-space: nowrap; }
    #cyd7ai .cyd7ai-kv > i { width: 8px; height: 8px; border-radius: 50%; background: #b8c6dc; }
    #cyd7ai .cyd7ai-kv[data-cyd7ai-f="ok"] > i { background: var(--cyd7ai-ok); }
    #cyd7ai .cyd7ai-kv[data-cyd7ai-f="warn"] > i { background: #e19a12; }
    #cyd7ai .cyd7ai-kv[data-cyd7ai-f="warn"] > b { color: #9a5d00; }
    #cyd7ai .cyd7ai-kv[data-cyd7ai-f="bad"] > i { background: var(--cyd7ai-bad); }
    #cyd7ai .cyd7ai-kv[data-cyd7ai-f="bad"] > b { color: #b4352b; }

    /* ----- Carte 3 : analyse IA ----- */
    #cyd7ai .cyd7ai-pills { display: flex; align-items: center; gap: 5px; min-width: 0; }
    #cyd7ai .cyd7ai-pills > span {
      padding: 2px 8px;
      border: 1px solid #c9b9ff;
      border-radius: 999px;
      background: #efeaff;
      color: #4b36c9;
      font-weight: 700;
      white-space: nowrap;
    }

    #cyd7ai .cyd7ai-pills > i { flex: 1; min-width: 6px; height: 1px; background: #c9b9ff; }

    #cyd7ai .cyd7ai-chart { position: relative; display: block; height: 46px; border: 1px solid var(--cyd7ai-wline); border-radius: 6px; background: #fff; }
    #cyd7ai .cyd7ai-chart svg { display: block; width: 100%; height: 100%; }
    #cyd7ai .cyd7ai-ch-band { fill: rgba(79, 209, 139, 0.12); }
    #cyd7ai .cyd7ai-ch-line { fill: none; stroke: #6a55e8; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
    #cyd7ai .cyd7ai-ch-mark { position: absolute; left: 62%; top: 22.7%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 1.5px solid #fff; border-radius: 50%; background: #ffb02e; box-shadow: 0 0 0 3px rgba(255, 176, 46, 0.25); }
    #cyd7ai .cyd7ai-ch-l { position: absolute; left: 6px; bottom: 2px; color: #2c8a5a; font-size: 0.6rem; font-weight: 600; }

    #cyd7ai .cyd7ai-find { display: grid; gap: 4px; }
    #cyd7ai .cyd7ai-find-r { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 6px; }
    #cyd7ai .cyd7ai-find-r b { color: var(--cyd7ai-ink2); font-weight: 700; }
    #cyd7ai .cyd7ai-find-r > span { color: var(--cyd7ai-ink); }
    #cyd7ai .cyd7ai-find-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
    #cyd7ai .cyd7ai-plan { padding: 1px 8px; border-radius: 999px; background: #6a55e8; color: #fff; font-weight: 700; }
    #cyd7ai .cyd7ai-conf { color: var(--cyd7ai-ink2); white-space: nowrap; }
    #cyd7ai .cyd7ai-conf b { color: #4b36c9; }

    /* ----- Carte 4 : garde-fous (noeud) + approbation humaine (noeud) ----- */
    #cyd7ai .cyd7ai-ui--4 {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) minmax(96px, 1fr);
      column-gap: 24px;
      align-items: center;
    }

    #cyd7ai .cyd7ai-flow .cyd7ai-rules {
      display: block;
      padding: 0;
      gap: 0;
      border: 1px solid #c9d6ea;
      border-radius: 8px;
      background: var(--cyd7ai-win);
      color: var(--cyd7ai-ink);
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
    }

    #cyd7ai .cyd7ai-flow .cyd7ai-rules.is-lit {
      border-color: var(--cyd7ai-ai);
      box-shadow: 0 0 0 2px rgba(143, 124, 255, 0.45), 0 0 18px rgba(143, 124, 255, 0.3), 0 10px 26px rgba(0, 0, 0, 0.4);
    }

    #cyd7ai .cyd7ai-flow .cyd7ai-rules.is-done { border-color: #b9aef5; }
    #cyd7ai .cyd7ai-rules .cyd7ai-win-bar > .ic { color: #6a55e8; }
    #cyd7ai .cyd7ai-rules .cyd7ai-win-in { gap: 4px; }

    /* ligne d'etat toujours presente (meme hauteur en attente et apres) : aucun saut de mise en page */
    #cyd7ai .cyd7ai-rules-st { display: grid; }

    #cyd7ai .cyd7ai-rules-st > span {
      grid-area: 1 / 1;
      padding: 2px 6px;
      border-radius: 4px;
      font-family: var(--fx-mono);
      font-size: 0.6rem;
    }

    #cyd7ai .cyd7ai-rules-wait { background: #eef2f9; color: var(--cyd7ai-ink2); font-style: italic; visibility: hidden; }
    #cyd7ai .cyd7ai-rules-go { background: #efeaff; color: #4b36c9; font-weight: 600; }

    /* carte 4 : l'en-tete opaque monte jusqu'a la bordure ; le lien 3 -> 4 s'arrete au bord de la carte,
       passe sous l'en-tete et reapparait, avec sa pointe, juste au-dessus des regles */
    #cyd7ai .cyd7ai-flow .cyd7ai-step--4 { padding-top: 0; }
    #cyd7ai .cyd7ai-flow .cyd7ai-step--4 > .cyd7ai-step-head { padding-top: 16px; border-radius: 13px 13px 0 0; }

    #cyd7ai .cyd7ai-rule {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
      padding-bottom: 3px;
      border-bottom: 1px solid var(--cyd7ai-wline);
    }

    #cyd7ai .cyd7ai-rule:last-child { border-bottom: 0; padding-bottom: 0; }
    #cyd7ai .cyd7ai-rule > span { display: flex; flex-direction: column; min-width: 0; }
    #cyd7ai .cyd7ai-rule b { color: var(--cyd7ai-ink); font-weight: 700; }
    #cyd7ai .cyd7ai-rule > span > span { color: var(--cyd7ai-ink2); }

    #cyd7ai .cyd7ai-ck {
      position: relative;
      flex: none;
      box-sizing: border-box;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: var(--cyd7ai-ok);
    }

    #cyd7ai .cyd7ai-ck::after {
      content: "";
      position: absolute;
      left: 4.6px;
      top: 2.6px;
      width: 3.6px;
      height: 6.6px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    #cyd7ai .cyd7ai-r3b { display: none; color: var(--cyd7ai-ok-ink) !important; font-weight: 700; }

    /* action sensible (scenario faille) : des l'evaluation des regles, la regle 3 attend l'approbation, puis passe au vert
       (rien de tout cela tant que la carte 4 n'est pas atteinte) */
    #cyd7ai .cyd7ai-rule--3 { margin: 0 -4px; padding: 3px 4px; border-radius: 5px; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4:not([data-cyd7ai-phase=""]) .cyd7ai-rule--3 { background: #fff4df; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4:not([data-cyd7ai-phase=""]) .cyd7ai-rule--3 .cyd7ai-r3a { color: #9a5d00; font-weight: 700; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4:not([data-cyd7ai-phase=""]) .cyd7ai-rule--3 .cyd7ai-ck { background: #e19a12; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4:not([data-cyd7ai-phase=""]) .cyd7ai-rule--3 .cyd7ai-ck::after { left: 6px; top: 2.5px; width: 0; height: 6px; border-width: 0 2.2px 0 0; transform: none; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4[data-cyd7ai-phase="approved"] .cyd7ai-rule--3 { background: #e7f7ee; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4[data-cyd7ai-phase="approved"] .cyd7ai-r3a { display: none; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4[data-cyd7ai-phase="approved"] .cyd7ai-r3b { display: inline; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4[data-cyd7ai-phase="approved"] .cyd7ai-rule--3 .cyd7ai-ck { background: var(--cyd7ai-ok); }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4[data-cyd7ai-phase="approved"] .cyd7ai-rule--3 .cyd7ai-ck::after { left: 4.6px; top: 2.6px; width: 3.6px; height: 6.6px; border-width: 0 2px 2px 0; transform: rotate(45deg); }

    /* en attente : regles non evaluees */
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--4[data-cyd7ai-phase=""] .cyd7ai-rules-wait { visibility: visible; }
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--4[data-cyd7ai-phase=""] .cyd7ai-rules-go { visibility: hidden; }
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--4[data-cyd7ai-phase=""] .cyd7ai-ck { background: #d5deeb; }
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--4[data-cyd7ai-phase=""] .cyd7ai-ck::after { left: 4px; top: 6.5px; width: 7px; height: 0; border-width: 2px 0 0; transform: none; border-color: #fff; }
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--4[data-cyd7ai-phase=""] .cyd7ai-rule { opacity: 0.6; }

    /* approbation humaine */
    #cyd7ai .cyd7ai-flow .cyd7ai-appr {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 8px 9px 9px;
      border: 1px solid rgba(255, 111, 94, 0.4);
      border-radius: 12px;
      background: linear-gradient(170deg, #142a52, #0a1430);
      font-size: var(--cyd7ai-ui-fs);
      line-height: 1.3;
    }

    #cyd7ai .cyd7ai-appr-h { display: flex; align-items: center; gap: 6px; min-width: 0; }
    #cyd7ai .cyd7ai-appr-h .ic { flex: none; width: 16px; height: 16px; color: var(--ia-coral-soft); }
    #cyd7ai .cyd7ai-appr-h b { min-width: 0; color: #fff; font-size: 0.7rem; }
    /* demande d'approbation : visible seulement quand une action sensible a ete reperee (scenario faille, des
       l'evaluation des regles) ; sinon « Aucune demande en attente » dans le meme emplacement (hauteur fixe) */
    #cyd7ai .cyd7ai-appr-slot { display: grid; min-width: 0; }
    #cyd7ai .cyd7ai-appr-slot > * { grid-area: 1 / 1; }
    #cyd7ai .cyd7ai-appr-none { align-self: center; color: #8fa2c4; font-style: italic; }
    #cyd7ai .cyd7ai-appr-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; visibility: hidden; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4:is([data-cyd7ai-phase="rules"], [data-cyd7ai-phase="approve"], [data-cyd7ai-phase="approved"]) .cyd7ai-appr-body { visibility: visible; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4:is([data-cyd7ai-phase="rules"], [data-cyd7ai-phase="approve"], [data-cyd7ai-phase="approved"]) .cyd7ai-appr-none { visibility: hidden; }
    #cyd7ai .cyd7ai-appr-q { color: #dfe8f6; }
    #cyd7ai .cyd7ai-appr-qs { display: none; }
    #cyd7ai .cyd7ai-appr-btns { display: flex; gap: 5px; }

    #cyd7ai .cyd7ai-appr-btns > span {
      position: relative;
      flex: 1;
      padding: 3px 4px;
      border-radius: 5px;
      font-weight: 700;
      text-align: center;
      white-space: nowrap;
    }

    #cyd7ai .cyd7ai-appr-no { border: 1px solid rgba(120, 160, 220, 0.4); color: #c4d2ea; }
    #cyd7ai .cyd7ai-appr-yes { background: var(--cyd7ai-blue); color: #fff; }

    #cyd7ai .cyd7ai-appr-st { display: grid; justify-items: start; }
    /* pastilles empilees : chacune garde sa propre hauteur (jamais etiree par la plus longue, masquee) */
    #cyd7ai .cyd7ai-appr-st > span {
      grid-area: 1 / 1;
      align-self: start;
      padding: 1px 7px;
      border-radius: 999px;
      font-weight: 700;
      line-height: 1.35;
      visibility: hidden;
    }

    #cyd7ai .cyd7ai-as0 { background: rgba(120, 160, 220, 0.14); color: #c4d2ea; }
    #cyd7ai .cyd7ai-as1 { background: rgba(217, 138, 7, 0.18); color: var(--cyd7ai-warn-t); }
    #cyd7ai .cyd7ai-as2 { background: rgba(79, 209, 139, 0.2); color: var(--cyd7ai-ok-t); }

    /* scenario faille : « requise » jusqu'aux regles, « en attente » a la demande, puis « approuve » */
    #cyd7ai .cyd7ai-appr-st > .cyd7ai-as0 { visibility: visible; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4[data-cyd7ai-phase="rules"] .cyd7ai-as0,
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4[data-cyd7ai-phase="approve"] .cyd7ai-as0,
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4[data-cyd7ai-phase="approved"] .cyd7ai-as0 { visibility: hidden; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4[data-cyd7ai-phase="rules"] .cyd7ai-as1 { visibility: visible; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4[data-cyd7ai-phase="approve"] .cyd7ai-as2,
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4[data-cyd7ai-phase="approved"] .cyd7ai-as2 { visibility: visible; }
    #cyd7ai .cyd7ai-step--4[data-cyd7ai-phase="approve"] .cyd7ai-appr-yes,
    #cyd7ai .cyd7ai-step--4[data-cyd7ai-phase="approved"] .cyd7ai-appr-yes { background: var(--cyd7ai-ok); }

    #cyd7ai .cyd7ai-flow .cyd7ai-appr.is-lit { border-color: var(--fx-p-hdce); }

    /* ----- Carte 5 : actions automatiques ----- */
    #cyd7ai .cyd7ai-ui--5 { display: grid; gap: 9px; }
    #cyd7ai .cyd7ai-acts li { color: #7f93b6; }
    #cyd7ai .cyd7ai-acts li.is-on { border-color: rgba(255, 111, 94, 0.7); background: rgba(232, 87, 74, 0.16); color: #fff; }
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--5[data-cyd7ai-phase=""] .cyd7ai-acts li.is-on { border-color: rgba(120, 160, 220, 0.3); background: #0a1530; color: #7f93b6; }

    #cyd7ai .cyd7ai-tgt { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-muted); font-size: 0.7rem; }
    #cyd7ai .cyd7ai-tgt .ic { flex: none; width: 14px; height: 14px; color: var(--ia-coral-soft); }
    #cyd7ai .cyd7ai-tgt b { color: #dfe8f6; font-weight: 600; }

    #cyd7ai .cyd7ai-prog-l--run { display: grid; justify-items: end; }
    #cyd7ai .cyd7ai-prog-l--run > span { grid-area: 1 / 1; }
    #cyd7ai .cyd7ai-pl0 { visibility: hidden; }

    #cyd7ai .cyd7ai-con {
      display: grid;
      gap: 2px;
      padding: 6px 8px;
      border-radius: 5px;
      background: #0b1631;
      color: #bfe6ff;
      font-family: var(--fx-mono);
      font-size: 0.62rem;
    }

    #cyd7ai .cyd7ai-con-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #cyd7ai .cyd7ai-con-l2 { color: var(--cyd7ai-ok-t); }

    /* ----- Carte 6 : verification ----- */
    #cyd7ai .cyd7ai-chk .cyd7ai-win-bar > .ic { color: var(--cyd7ai-ok); }

    #cyd7ai .cyd7ai-chk-pill {
      flex: none;
      margin-left: auto;
      padding: 1px 8px;
      border-radius: 999px;
      background: #e1f6ec;
      color: #0d7a45 !important;
      font-weight: 700;
    }

    #cyd7ai .cyd7ai-cr {
      display: grid;
      grid-template-columns: 15px minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--cyd7ai-wline);
    }

    #cyd7ai .cyd7ai-cr-t { display: grid; min-width: 0; }
    #cyd7ai .cyd7ai-cr-t > span { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #cyd7ai .cyd7ai-cr-p { visibility: hidden; }
    #cyd7ai .cyd7ai-chk-wait { display: none; }
    #cyd7ai .cyd7ai-chk-scope { margin-bottom: 9px; }
    #cyd7ai .cyd7ai-cr > em { display: none; color: var(--cyd7ai-ink2); font-style: italic; }

    #cyd7ai .cyd7ai-spin {
      position: relative;
      box-sizing: border-box;
      width: 15px;
      height: 15px;
      border: 2px solid var(--cyd7ai-ok);
      border-radius: 50%;
      background: var(--cyd7ai-ok);
    }

    #cyd7ai .cyd7ai-spin::after {
      content: "";
      position: absolute;
      left: 3.2px;
      top: 0.9px;
      width: 3.4px;
      height: 6.4px;
      border: solid #fff;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    #cyd7ai .cyd7ai-chk-note {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--cyd7ai-ink2);
      font-size: 0.64rem;
    }

    #cyd7ai .cyd7ai-chk-note .ic { width: 13px; height: 13px; color: #6a55e8; }

    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--6[data-cyd7ai-phase=""] .cyd7ai-spin { border: 2px dashed #b8c6dc; background: transparent; }
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--6[data-cyd7ai-phase=""] .cyd7ai-spin::after { opacity: 0; }
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--6[data-cyd7ai-phase=""] .cyd7ai-cr-p { visibility: visible; color: var(--cyd7ai-ink2); }
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--6[data-cyd7ai-phase=""] .cyd7ai-cr-r { visibility: hidden; }
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--6[data-cyd7ai-phase=""] .cyd7ai-chk-ic { display: none; }
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--6[data-cyd7ai-phase=""] .cyd7ai-chk-wait { display: block; color: #9fb0cc; }
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--6[data-cyd7ai-phase=""] .cyd7ai-cr > em { display: inline; }
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--6[data-cyd7ai-phase=""] .cyd7ai-chk-pill { visibility: hidden; }

    /* ----- Carte 7 : journal d'audit ----- */
    #cyd7ai .cyd7ai-audit {
      position: relative;
      display: grid;
      gap: 0;
      overflow: hidden;
      border: 1px solid rgba(120, 160, 220, 0.3);
      border-radius: 8px;
      background: #081128;
      font-family: var(--fx-mono);
      font-size: 0.62rem;
      line-height: 1.4;
    }

    #cyd7ai .cyd7ai-au-h,
    #cyd7ai .cyd7ai-au-r {
      display: grid;
      grid-template-columns: 42px minmax(0, 1.3fr) minmax(0, 1fr);
      gap: 8px;
      padding: 4px 9px;
    }

    #cyd7ai .cyd7ai-au-h { border-bottom: 1px solid rgba(120, 160, 220, 0.2); color: #7f93b6; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
    #cyd7ai .cyd7ai-au-r { border-bottom: 1px dashed rgba(120, 160, 220, 0.14); color: #dfe8f6; }
    #cyd7ai .cyd7ai-au-r > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #cyd7ai .cyd7ai-au-r > span:first-child { color: var(--cyd7ai-ai-t); }
    #cyd7ai .cyd7ai-au-r > span:last-child { color: var(--text-muted); }
    /* « aucune entree » se pose sur les rangees (masquees) : la carte garde la hauteur de son etat rempli */
    #cyd7ai .cyd7ai-au-empty {
      position: absolute;
      left: 0;
      right: 0;
      top: 24px;
      bottom: 34px;
      display: grid;
      place-items: center;
      padding: 0 9px;
      color: var(--text-muted);
      font-family: var(--font, inherit);
      font-style: italic;
      text-align: center;
      visibility: hidden;
    }

    #cyd7ai .cyd7ai-au-chip {
      display: inline-flex;
      align-items: center;
      justify-self: start;
      gap: 6px;
      margin: 6px 9px 8px;
      padding: 1px 8px;
      border-radius: 999px;
      background: rgba(143, 124, 255, 0.16);
      color: var(--cyd7ai-ai-t);
      font-weight: 600;
    }

    #cyd7ai .cyd7ai-au-chip .ic { width: 12px; height: 12px; }

    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--7[data-cyd7ai-phase=""] .cyd7ai-au-r { visibility: hidden; }
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--7[data-cyd7ai-phase=""] .cyd7ai-au-empty { visibility: visible; }

    /* ----- Carte 8 : rapport ----- */
    #cyd7ai .cyd7ai-rr {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--cyd7ai-wline);
    }

    #cyd7ai .cyd7ai-rr > span { min-width: 0; color: var(--cyd7ai-ink2); }
    #cyd7ai .cyd7ai-rr > b { color: var(--cyd7ai-ink); text-align: right; }
    #cyd7ai .cyd7ai-rr--3 > b { color: var(--cyd7ai-ok-ink); }

    #cyd7ai .cyd7ai-rep-to { display: flex; align-items: center; gap: 6px; color: var(--cyd7ai-ink2); }

    #cyd7ai .cyd7ai-rep-av {
      display: grid;
      place-items: center;
      flex: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-bright));
      color: #fff;
      font-size: 0.6rem;
      font-weight: 800;
    }

    /* ----- Carte 9 : ecran de l'employee ----- */
    #cyd7ai .cyd7ai-screen {
      position: relative;
      display: grid;
      height: 128px;
      overflow: hidden;
      border: 3px solid #1b2a47;
      border-radius: 10px;
      background:
        radial-gradient(ellipse at 80% 10%, rgba(95, 200, 255, 0.35), transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(143, 124, 255, 0.35), transparent 60%),
        linear-gradient(135deg, #1a3d7c, #0d2251);
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
      font-size: var(--cyd7ai-ui-fs);
    }

    #cyd7ai .cyd7ai-screen > * { grid-area: 1 / 1; }

    #cyd7ai .cyd7ai-desk { position: relative; display: block; }
    #cyd7ai .cyd7ai-desk-icons { position: absolute; left: 10px; top: 10px; display: grid; gap: 7px; }
    #cyd7ai .cyd7ai-desk-icons i { display: block; width: 16px; height: 14px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); }

    #cyd7ai .cyd7ai-toast {
      position: absolute;
      right: 8px;
      bottom: 30px;
      display: flex;
      align-items: center;
      gap: 7px;
      max-width: calc(100% - 50px);
      padding: 6px 9px;
      border-radius: 7px;
      background: rgba(245, 248, 253, 0.97);
      color: var(--cyd7ai-ink);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    }

    #cyd7ai .cyd7ai-toast .ic { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--cyd7ai-ok); color: #fff; stroke-width: 3; }
    #cyd7ai .cyd7ai-toast > span { display: flex; flex-direction: column; min-width: 0; }
    #cyd7ai .cyd7ai-toast b { color: #0d7a45; }
    #cyd7ai .cyd7ai-toast > span > span { overflow: hidden; color: var(--cyd7ai-ink2); text-overflow: ellipsis; white-space: nowrap; }

    #cyd7ai .cyd7ai-taskbar {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      gap: 6px;
      height: 20px;
      padding: 0 8px;
      background: rgba(6, 13, 30, 0.75);
      color: #dfe8f6;
      font-family: var(--fx-mono);
      font-size: 0.6rem;
    }

    #cyd7ai .cyd7ai-taskbar i { display: block; width: 10px; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.4); }
    #cyd7ai .cyd7ai-taskbar i:first-child { background: var(--cyan); }
    #cyd7ai .cyd7ai-taskbar span { margin-left: auto; }

    #cyd7ai .cyd7ai-lock {
      position: relative;
      z-index: 2;
      display: grid;
      place-items: center;
      background: linear-gradient(160deg, #0a1634, #060d1e);
      color: #dfe8f6;
      text-align: center;
      visibility: hidden;
    }

    #cyd7ai .cyd7ai-lock > span { grid-area: 1 / 1; display: none; flex-direction: column; align-items: center; gap: 3px; }
    #cyd7ai .cyd7ai-lock-wait .ic { width: 22px; height: 22px; color: #ffe7a8; }
    #cyd7ai .cyd7ai-lock-wait b { color: #c4d2ea; font-size: 0.74rem; }
    #cyd7ai .cyd7ai-lock-wait > span { color: var(--text-muted); }
    #cyd7ai .cyd7ai-lock-time { color: #fff; font-family: var(--fx-mono); font-size: 1.5rem; font-weight: 700; line-height: 1.1; }

    #cyd7ai .cyd7ai-lock-av {
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-bright));
      color: #fff;
      font-weight: 800;
    }

    #cyd7ai .cyd7ai-lock-hi { color: #fff; font-weight: 700; }
    #cyd7ai .cyd7ai-lock-who { color: var(--text-muted); }

    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--9[data-cyd7ai-phase=""] .cyd7ai-lock { visibility: visible; }
    #cyd7ai .cyd7ai-step--9[data-cyd7ai-phase=""] .cyd7ai-lock-wait { display: flex; }
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--9:not([data-cyd7ai-phase="login"]) .cyd7ai-toast { visibility: hidden; }

    /* ----- Controles, progression par carte (1 a 9) et console ----- */
    #cyd7ai .cyd7ai-flow .fx-steps { display: none; }

    #cyd7ai .cyd7ai-steps9 {
      display: flex;
      flex: 1 1 90px;
      align-items: center;
      gap: 4px;
      min-width: 60px;
    }

    #cyd7ai .cyd7ai-steps9 span {
      flex: 1;
      height: 4px;
      border-radius: 2px;
      background: rgba(120, 160, 220, 0.22);
      transition: background 0.3s ease;
    }

    #cyd7ai .cyd7ai-steps9 .is-skip { background: rgba(120, 160, 220, 0.07); }
    #cyd7ai .cyd7ai-steps9 .is-done { background: rgba(143, 124, 255, 0.6); }
    #cyd7ai .cyd7ai-steps9 .is-cur { background: var(--accent-bright); }

    #cyd7ai .cyd7ai-flow { --fx-log-lines: 3; }
    #cyd7ai .cyd7ai-flow.fx { display: block; }
    #cyd7ai .cyd7ai-flow > .fx-controls { margin-bottom: 14px; }
    #cyd7ai .cyd7ai-flow > .fx-console,
    #cyd7ai .cyd7ai-flow > .cyd7ai-con-ph { margin-top: 14px; }
    #cyd7ai .cyd7ai-flow > .cyd7ai-con-ph + .fx-console:not(.is-floating) { margin-top: 0; }

    #cyd7ai .cyd7ai-flow > .fx-console {
      position: relative;
      z-index: 6;
      background: #060d1e;
    }

    #cyd7ai .cyd7ai-flow .fx-log {
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px);
      mask-image: linear-gradient(to bottom, transparent 0, #000 12px);
    }

    #cyd7ai .cyd7ai-flow.fx--static .fx-log { -webkit-mask-image: none; mask-image: none; }

    #cyd7ai .cyd7ai-flow .fx-con-head { flex-wrap: wrap; row-gap: 2px; }
    #cyd7ai .cyd7ai-flow .fx-con-scn { overflow: visible; white-space: normal; }

    #cyd7ai .cyd7ai-con-ph { display: block; height: 0; }
    #cyd7ai .cyd7ai-con-more { display: none; }

    #cyd7ai .cyd7ai-flow > .fx-console.is-floating {
      position: fixed;
      bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px 14px;
      margin: 0;
      padding: 7px 8px 7px 14px;
      border-color: rgba(80, 140, 255, 0.3);
      background: rgba(6, 13, 30, 0.8);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
    }

    #cyd7ai .fx-console.is-floating .fx-con-head { flex: none; }
    #cyd7ai .fx-console.is-floating .fx-con-scn,
    #cyd7ai .fx-console.is-floating .fx-con-text,
    #cyd7ai .fx-console.is-floating .fx-log { display: none; }
    #cyd7ai .fx-console.is-floating .fx-con-live { flex: 1 1 auto; min-width: 0; }

    #cyd7ai .fx-console.is-floating .fx-con-title {
      display: -webkit-box;
      overflow: hidden;
      font-size: 0.9rem;
      line-height: 1.25;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    #cyd7ai .fx-console.is-floating .cyd7ai-con-more {
      display: inline-flex;
      flex: none;
      align-items: center;
      gap: 6px;
      min-height: 32px;
      padding: 4px 12px;
      border: 1px solid rgba(120, 160, 220, 0.35);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.04);
      color: var(--text);
      font: inherit;
      font-size: 0.78rem;
      cursor: pointer;
    }

    #cyd7ai .cyd7ai-con-more:hover { border-color: var(--cyan); }
    #cyd7ai .cyd7ai-con-more:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

    #cyd7ai .fx-console.is-floating.cyd7ai-con-open .fx-log {
      position: absolute;
      left: 0;
      right: 0;
      bottom: calc(100% + 6px);
      display: flex;
      height: calc(4 * 1.6em + 16px);
      margin: 0;
      border-color: rgba(80, 140, 255, 0.3);
      background: #030914;
      -webkit-mask-image: none;
      mask-image: none;
    }

    /* journal ouvert pendant une pause : les entrees ne restent pas figees a leur image 0 (animation gelee) */
    #cyd7ai .cyd7ai-flow > .fx-console.is-floating.cyd7ai-con-open .fx-log li { animation: none !important; opacity: 1; transform: none; }

    /* liens hors scenario nettement estompes ; etiquettes des liens estompes masquees */
    #cyd7ai .cyd7ai-flow .fx-edge.is-dim .fx-wire { stroke-opacity: 0.12; }
    #cyd7ai .cyd7ai-flow .fx-elabel.is-dim { opacity: 0; }

    /* ---------- Avant / apres ---------- */
    #cyd7ai .cyd7ai-ba-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
    }

    #cyd7ai .cyd7ai-ba-col { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 20px; }
    #cyd7ai .cyd7ai-ba-col--without { border-color: rgba(214, 69, 58, 0.4); }
    #cyd7ai .cyd7ai-ba-col--with { border-color: rgba(143, 124, 255, 0.5); box-shadow: 0 0 40px rgba(143, 124, 255, 0.12), inset 0 0 0 1px rgba(143, 124, 255, 0.06); }

    #cyd7ai .cyd7ai-ba-col h3 {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      color: #fff;
      font-size: 1.02rem;
    }

    #cyd7ai .cyd7ai-ba-ic {
      display: grid;
      place-items: center;
      flex: none;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(214, 69, 58, 0.16);
      color: var(--cyd7ai-bad-t);
    }

    #cyd7ai .cyd7ai-ba-col--with .cyd7ai-ba-ic { background: rgba(143, 124, 255, 0.2); color: var(--cyd7ai-ai-t); }
    #cyd7ai .cyd7ai-ba-ic .ic { width: 17px; height: 17px; }

    #cyd7ai .cyd7ai-tl {
      position: relative;
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0 0 0 20px;
      list-style: none;
    }

    #cyd7ai .cyd7ai-tl::before {
      content: "";
      position: absolute;
      left: 5px;
      top: 6px;
      bottom: 6px;
      width: 2px;
      border-radius: 2px;
      background: rgba(120, 160, 220, 0.22);
    }

    #cyd7ai .cyd7ai-tl li {
      position: relative;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      gap: 10px;
      align-items: baseline;
      color: var(--text);
      font-size: 0.9rem;
      line-height: 1.4;
    }

    #cyd7ai .cyd7ai-tl li::before {
      content: "";
      position: absolute;
      left: -20px;
      top: 0.42em;
      box-sizing: border-box;
      width: 12px;
      height: 12px;
      border: 2px solid #7f93b6;
      border-radius: 50%;
      background: #0a1430;
    }

    #cyd7ai .cyd7ai-tl time { color: var(--text-muted); font-family: var(--fx-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
    #cyd7ai .cyd7ai-tl .is-bad::before { border-color: var(--cyd7ai-bad-t); background: rgba(214, 69, 58, 0.5); }
    #cyd7ai .cyd7ai-tl .is-bad time { color: var(--cyd7ai-bad-t); }
    #cyd7ai .cyd7ai-tl .is-ai::before { border-color: var(--cyd7ai-ai); background: rgba(143, 124, 255, 0.55); }
    #cyd7ai .cyd7ai-tl .is-ai time { color: var(--cyd7ai-ai-t); }
    #cyd7ai .cyd7ai-tl .is-ok::before { border-color: var(--cyd7ai-green); background: var(--cyd7ai-green); }
    #cyd7ai .cyd7ai-tl .is-ok time { color: var(--cyd7ai-ok-t); }
    #cyd7ai .cyd7ai-tl .is-ok span { color: #fff; font-weight: 700; }

    #cyd7ai .cyd7ai-ba-total { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 4px; }
    #cyd7ai .cyd7ai-ba-bar { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: rgba(120, 160, 220, 0.14); }
    #cyd7ai .cyd7ai-ba-bar i { display: block; height: 100%; border-radius: inherit; transform-origin: left center; }
    #cyd7ai .cyd7ai-ba-col--without .cyd7ai-ba-bar i { width: 100%; background: linear-gradient(90deg, var(--accent), #ff8f80); }
    #cyd7ai .cyd7ai-ba-col--with .cyd7ai-ba-bar i { width: 3%; min-width: 6px; background: var(--cyd7ai-green); }
    #cyd7ai .cyd7ai-ba-total b { font-size: 1.08rem; }
    #cyd7ai .cyd7ai-ba-col--without .cyd7ai-ba-total b { color: var(--cyd7ai-bad-t); }
    #cyd7ai .cyd7ai-ba-col--with .cyd7ai-ba-total b { color: var(--cyd7ai-ok-t); }

    #cyd7ai .cyd7ai-kpis {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin: 14px 0 0;
      padding: 0;
      list-style: none;
    }

    #cyd7ai .cyd7ai-kpis li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 14px 14px; }
    #cyd7ai .cyd7ai-kpis b { color: #fff; font-size: clamp(1.5rem, 4.4vw, 2.1rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
    #cyd7ai .cyd7ai-kpis li > span:last-child { color: var(--text-muted); font-size: 0.86rem; line-height: 1.35; }

    #cyd7ai .cyd7ai-ex {
      align-self: flex-start;
      margin-bottom: 4px;
      padding: 0 6px;
      border: 1px solid rgba(247, 196, 106, 0.6);
      border-radius: 4px;
      color: var(--cyd7ai-warn-t);
      font-family: var(--fx-mono);
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      line-height: 1.6;
      text-transform: uppercase;
    }

    #cyd7ai .cyd7ai-foot { margin: 12px 0 0; color: var(--text-muted); font-size: 0.8rem; }

    /* ---------- Garde-fous ---------- */
    #cyd7ai .cyd7ai-safe-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }

    #cyd7ai .cyd7ai-points {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 16px 28px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #cyd7ai .cyd7ai-points li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
    #cyd7ai .cyd7ai-pt-ic { width: 42px; height: 42px; }
    #cyd7ai .cyd7ai-pt-ic .ic { width: 20px; height: 20px; }
    #cyd7ai .cyd7ai-points strong { display: block; color: #fff; font-size: 0.96rem; line-height: 1.3; }
    #cyd7ai .cyd7ai-points strong + span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 0.88rem; line-height: 1.42; }

    #cyd7ai .cyd7ai-policy-wrap { padding: 16px; }

    #cyd7ai .cyd7ai-policy {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.86rem;
    }

    #cyd7ai .cyd7ai-policy caption {
      margin-bottom: 10px;
      color: var(--ia-coral-soft);
      font-size: 0.74rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-align: left;
      text-transform: uppercase;
    }

    #cyd7ai .cyd7ai-policy th,
    #cyd7ai .cyd7ai-policy td {
      padding: 8px 8px;
      border-bottom: 1px solid var(--ia-line);
      text-align: left;
      vertical-align: middle;
    }

    #cyd7ai .cyd7ai-policy thead th { color: var(--text-muted); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
    #cyd7ai .cyd7ai-policy tbody th { color: #fff; font-weight: 600; }
    #cyd7ai .cyd7ai-policy tbody tr:last-child > * { border-bottom: 0; }

    #cyd7ai .cyd7ai-pc {
      display: inline-block;
      padding: 2px 9px;
      border-radius: 999px;
      font-size: 0.76rem;
      font-weight: 700;
      line-height: 1.4;
    }

    #cyd7ai .cyd7ai-pc { border-radius: 8px; }

    #cyd7ai .cyd7ai-pc--auto { background: rgba(79, 209, 139, 0.15); color: var(--cyd7ai-ok-t); }
    #cyd7ai .cyd7ai-pc--appr { background: rgba(217, 138, 7, 0.17); color: var(--cyd7ai-warn-t); }
    #cyd7ai .cyd7ai-pc--tech { background: rgba(232, 87, 74, 0.17); color: #ffb3aa; }

    /* ---------- Offre ---------- */
    #cyd7ai .cyd7ai-offer-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
      padding: 20px 16px 22px;
      background:
        radial-gradient(ellipse at 85% 30%, rgba(232, 87, 74, 0.12), transparent 55%),
        var(--ia-panel-bg);
    }

    #cyd7ai .cyd7ai-offer-body { min-width: 0; }
    #cyd7ai .cyd7ai-offer-body .ia-section-head { margin-bottom: 16px; }

    #cyd7ai .cyd7ai-incl {
      display: grid;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #cyd7ai .cyd7ai-incl li {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      color: var(--text);
      font-size: 0.94rem;
      line-height: 1.4;
    }

    #cyd7ai .cyd7ai-incl .ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--cyd7ai-ai-t); }

    #cyd7ai .cyd7ai-offer-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

    #cyd7ai .cyd7ai-price {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 18px;
      border: 1.5px solid rgba(232, 87, 74, 0.7);
      border-radius: 14px;
      background: linear-gradient(160deg, rgba(232, 87, 74, 0.16), rgba(10, 20, 44, 0.9) 70%);
      box-shadow: 0 0 34px rgba(232, 87, 74, 0.18);
    }

    #cyd7ai .cyd7ai-price-k {
      color: var(--ia-coral-soft);
      font-family: var(--fx-mono);
      font-size: 0.64rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    #cyd7ai .cyd7ai-price-v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
    #cyd7ai .cyd7ai-price-n { flex: none; color: #fff; font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
    #cyd7ai .cyd7ai-price-u { display: flex; flex-direction: column; min-width: 0; color: var(--text); font-size: 0.86rem; line-height: 1.3; }
    #cyd7ai .cyd7ai-price-u > span { white-space: nowrap; }
    #cyd7ai .cyd7ai-price-d { color: var(--text); font-size: 0.9rem; line-height: 1.4; }
    #cyd7ai .cyd7ai-price-s { color: var(--text-muted); font-size: 0.78rem; }

    #cyd7ai .cyd7ai-value {
      margin: 0;
      padding-left: 12px;
      border-left: 3px solid var(--accent-bright);
      color: #fff;
      font-size: 0.95rem;
      font-weight: 600;
      line-height: 1.45;
    }

    /* ======================================================================
       Theme clair (maquette HDCE Sentinel du client) :
       bandeau hero bleu nuit pleine largeur (#001222 -> #112e47), puis sections blanches
       a cartes blanches ; les consoles en direct (serpentin, carte « Le resultat ») restent
       des panneaux sombres poses sur le blanc. Les jetons sont redefinis par section claire :
       les regles existantes basees sur var(--...) s'adaptent sans etre dupliquees.
       ====================================================================== */
    #cyd7ai {
      --cyd7ai-l-ink: #0b1f3a;
      --cyd7ai-l-card-shadow: 0 1px 2px rgba(11, 31, 58, 0.05), 0 10px 26px rgba(11, 31, 58, 0.08);
      overflow: clip;
      background: #fff;
    }

    /* Bandeau hero sombre : pleine largeur (decoupe par #cyd7ai, sans debordement horizontal) */
    #cyd7ai .cyd7ai-hero { position: relative; isolation: isolate; }
    #cyd7ai .cyd7ai-top { position: relative; z-index: 1; }

    #cyd7ai .cyd7ai-hero::before {
      content: "";
      position: absolute;
      top: -400px;
      bottom: -46px;
      left: 50%;
      width: 100vw;
      margin-left: -50vw;
      z-index: -1;
      background:
        radial-gradient(ellipse 55% 75% at 88% 12%, rgba(1, 50, 96, 0.55), transparent 70%),
        linear-gradient(100deg, #001222 0%, #03182c 45%, #112e47 100%);
      pointer-events: none;
    }

    /* Jetons clairs des sections blanches */
    #cyd7ai .cyd7ai-caps,
    #cyd7ai .cyd7ai-how > .ia-section-head,
    #cyd7ai .cyd7ai-how > .cyd7ai-legend,
    #cyd7ai .cyd7ai-how > .cyd7ai-sample,
    #cyd7ai .cyd7ai-ba,
    #cyd7ai .cyd7ai-safety,
    #cyd7ai .cyd7ai-offer {
      --text: #1d3150;
      --text-muted: #4a5d7a;
      --ia-line: #e3e9f2;
      --ia-panel-bg: #fff;
      --ia-panel-border: #dce5f0;
      --ia-coral-soft: #0b5fc4;
      --cyan: #1f6fe0;
      --cyd7ai-ok-t: #0f7a43;
      --cyd7ai-warn-t: #8a5300;
      --cyd7ai-bad-t: #b3261e;
      --cyd7ai-ai-t: #5b45d6;
      --cyd7ai-green: #18a058;
      color: var(--text);
    }

    #cyd7ai :is(.cyd7ai-caps, .cyd7ai-how, .cyd7ai-ba, .cyd7ai-safety, .cyd7ai-offer) .ia-section-head h2 { color: var(--cyd7ai-l-ink); }

    /* degrade bleu (accent de la maquette et de la page soeur d7) : titres lisibles sur blanc */
    #cyd7ai :is(.cyd7ai-caps, .cyd7ai-how, .cyd7ai-ba, .cyd7ai-safety, .cyd7ai-offer) .ia-section-head .highlight {
      background: linear-gradient(90deg, #0b5fc4, #1f74e0);
      -webkit-background-clip: text;
      background-clip: text;
    }

    /* cartes blanches */
    #cyd7ai :is(.cyd7ai-caps, .cyd7ai-ba, .cyd7ai-safety, .cyd7ai-offer) :is(.ia-card, .ia-panel):not(.cyd7ai-cap--result) {
      border-color: var(--ia-panel-border);
      box-shadow: var(--cyd7ai-l-card-shadow);
    }

    #cyd7ai :is(.cyd7ai-caps, .cyd7ai-ba, .cyd7ai-safety, .cyd7ai-offer) :is(.ia-card, .ia-panel) h3,
    #cyd7ai .cyd7ai-safety .cyd7ai-points strong,
    #cyd7ai .cyd7ai-safety .cyd7ai-policy tbody th,
    #cyd7ai .cyd7ai-ba .cyd7ai-kpis b,
    #cyd7ai .cyd7ai-ba .cyd7ai-tl .is-ok span,
    #cyd7ai .cyd7ai-offer .cyd7ai-price-n,
    #cyd7ai .cyd7ai-offer .cyd7ai-value { color: var(--cyd7ai-l-ink); }

    /* pastilles d'icones bleues sur blanc (comme la page soeur d7) */
    #cyd7ai .cyd7ai-caps .cyd7ai-cap:not(.cyd7ai-cap--result) .cyd7ai-cap-ic,
    #cyd7ai .cyd7ai-safety .cyd7ai-pt-ic {
      border-color: #b9d2f3;
      background: #eef5fe;
      color: #0b5fc4;
    }

    #cyd7ai .cyd7ai-caps .cyd7ai-cap:not(.cyd7ai-cap--result) .cyd7ai-cap-ic--ai .ic { fill: rgba(11, 95, 196, 0.18); }

    /* bouton secondaire sur blanc */
    #cyd7ai .cyd7ai-offer .ia-btn--ghost {
      border-color: rgba(31, 111, 224, 0.5);
      background: #fff;
      color: #0d4fb0;
    }

    #cyd7ai .cyd7ai-offer .ia-btn--ghost:hover {
      border-color: #1f6fe0;
      background: rgba(31, 111, 224, 0.06);
      box-shadow: 0 6px 18px rgba(31, 111, 224, 0.14);
    }

    /* Ce que font les agents IA : micro-visuels sur carte blanche */
    #cyd7ai .cyd7ai-caps .cyd7ai-viz--radar {
      border-color: rgba(106, 85, 232, 0.4);
      background: radial-gradient(circle, rgba(143, 124, 255, 0.18) 0 35%, transparent 36%), #f1effe;
    }

    #cyd7ai .cyd7ai-caps .cyd7ai-viz--radar b { background: #e0a73a; box-shadow: 0 0 6px rgba(224, 167, 58, 0.8); }
    #cyd7ai .cyd7ai-caps .cyd7ai-viz--log i { background: rgba(60, 90, 140, 0.3); }
    #cyd7ai .cyd7ai-caps .cyd7ai-viz--log i:nth-child(3) { background: #e0a73a; box-shadow: 0 0 6px rgba(224, 167, 58, 0.5); }
    #cyd7ai .cyd7ai-caps .cyd7ai-sky-m { color: #6a55e8; }
    #cyd7ai .cyd7ai-caps .cyd7ai-sky-s { color: #d98a07; }
    #cyd7ai .cyd7ai-caps .cyd7ai-viz--sky i { background: linear-gradient(90deg, rgba(106, 85, 232, 0.6), rgba(217, 138, 7, 0.8)); }
    #cyd7ai .cyd7ai-caps .cyd7ai-viz--sky i::after { background: #e0a73a; box-shadow: 0 0 8px rgba(224, 167, 58, 0.7); }
    #cyd7ai .cyd7ai-caps .cyd7ai-sp-a { stroke: rgba(199, 124, 6, 0.55); }
    #cyd7ai .cyd7ai-caps .cyd7ai-viz--chips span { background: rgba(217, 138, 7, 0.13); }
    #cyd7ai .cyd7ai-caps .cyd7ai-viz--chips span:nth-child(2) { background: rgba(214, 69, 58, 0.12); }
    #cyd7ai .cyd7ai-caps .cyd7ai-bar-t { background: rgba(31, 60, 110, 0.1); }

    /* carte « Le resultat » : panneau sombre sur blanc (jetons sombres d'origine) */
    #cyd7ai .cyd7ai-caps .cyd7ai-cap--result {
      --text: #e8eef8;
      --text-muted: #9aabc6;
      --ia-coral-soft: #9fd0ff;
      --cyan: #5fc8ff;
      --cyd7ai-ai-t: #c9c0ff;
      color: var(--text);
      border-color: rgba(95, 170, 255, 0.5);
      background:
        radial-gradient(ellipse at 20% 0%, rgba(31, 111, 224, 0.3), transparent 60%),
        linear-gradient(160deg, #0c2440, #001222);
      box-shadow: 0 14px 34px rgba(0, 18, 34, 0.22);
    }

    #cyd7ai .cyd7ai-caps .cyd7ai-cap--result h3 { color: #fff; }

    /* Comment ca fonctionne : legende sur blanc (teintes assombries des liens), console sombre */
    #cyd7ai .cyd7ai-how > .cyd7ai-legend {
      --fx-k-data: #1d8fd0;
      --fx-k-ai: #6a55e8;
      --fx-k-control: #b07a12;
      --fx-k-payment: #d6453a;
      --fx-k-event: #1a9c80;
      --fx-k-feedback: #6f7f9c;
    }

    /* cadre de la console clair : seules les cartes-etapes et la console du bas restent des ilots sombres */
    #cyd7ai .cyd7ai-flow.ia-panel {
      border-color: #dce5f0;
      background: linear-gradient(180deg, #f3f7fc, #eef3f9);
      box-shadow: var(--cyd7ai-l-card-shadow);
    }

    #cyd7ai .cyd7ai-flow .cyd7ai-step { box-shadow: 0 8px 22px rgba(0, 18, 34, 0.16); }

    /* controles (scenarios, lecture, progression) sur le cadre clair */
    #cyd7ai .cyd7ai-flow > .fx-controls,
    #cyd7ai .cyd7ai-flow .fx-pan-hint {
      --text: #1d3150;
      --text-muted: #4a5d7a;
      --cyan: #1f6fe0;
      color: var(--text);
    }

    #cyd7ai .cyd7ai-flow .fx-chip { border-color: #d3deec; background: #fff; box-shadow: 0 1px 2px rgba(11, 31, 58, 0.05); }
    #cyd7ai .cyd7ai-flow .fx-chip:hover { border-color: #8fb4e6; }
    #cyd7ai .cyd7ai-flow .fx-chip[aria-pressed="true"] { border-color: #1f6fe0; background: #eaf3ff; box-shadow: 0 4px 14px rgba(31, 111, 224, 0.16); }
    #cyd7ai .cyd7ai-flow .fx-chip[aria-pressed="true"] .fx-chip-l { color: #0b3f8f; }

    #cyd7ai .cyd7ai-flow .fx-btn,
    #cyd7ai .cyd7ai-flow .fx-btn[aria-disabled="true"]:hover { border-color: #c9d6e8; background: #fff; color: #1d3150; }
    #cyd7ai .cyd7ai-flow .fx-btn:hover { border-color: #1f6fe0; background: #eef5ff; }

    #cyd7ai .cyd7ai-flow .cyd7ai-steps9 span { background: rgba(31, 60, 110, 0.14); }
    #cyd7ai .cyd7ai-flow .cyd7ai-steps9 .is-skip { background: rgba(31, 60, 110, 0.06); }
    #cyd7ai .cyd7ai-flow .cyd7ai-steps9 .is-done { background: rgba(106, 85, 232, 0.6); }
    #cyd7ai .cyd7ai-flow .cyd7ai-steps9 .is-cur { background: #1570e6; }

    /* liens et etiquettes entre les cartes : teintes assombries (comme la legende) sur le cadre clair */
    #cyd7ai .cyd7ai-flow :is(.fx-wires, .fx-elabel) {
      --fx-k-data: #1d8fd0;
      --fx-k-ai: #6a55e8;
      --fx-k-control: #b07a12;
      --fx-k-payment: #d6453a;
      --fx-k-event: #1a9c80;
      --fx-k-feedback: #6f7f9c;
    }

    #cyd7ai .cyd7ai-flow .fx-wire { stroke-opacity: 0.5; }
    #cyd7ai .cyd7ai-flow .fx-edge.is-active .fx-wire { stroke-opacity: 1; }
    #cyd7ai .cyd7ai-flow .fx-edge.is-done .fx-wire { stroke-opacity: 0.75; }

    #cyd7ai .cyd7ai-flow .fx-elabel {
      border-color: color-mix(in srgb, var(--fx-c) 45%, transparent);
      background: #fff;
      color: color-mix(in srgb, var(--fx-c) 62%, #0b1f3a);
      box-shadow: 0 1px 3px rgba(11, 31, 58, 0.08);
    }

    /* AA dans la console sombre : horodatages du journal, rangees en attente, libelle du graphique */
    #cyd7ai .cyd7ai-flow .fx-log-t { color: rgba(154, 171, 198, 0.85); }
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step--4[data-cyd7ai-phase=""] .cyd7ai-rule,
    #cyd7ai .cyd7ai-flow:not(.fx--static) .cyd7ai-step[data-cyd7ai-phase=""] :is(.cyd7ai-tele, .cyd7ai-ana, .cyd7ai-job, .cyd7ai-rep) > .cyd7ai-win-bar.cyd7ai-win-bar { opacity: 0.85; --cyd7ai-ink2: #44566f; }
    #cyd7ai .cyd7ai-ch-l { color: #1f7a4c; }
    #cyd7ai .cyd7ai-x { color: #44566f; }

    /* Avant / apres */
    #cyd7ai .cyd7ai-ba .cyd7ai-ba-col--with { box-shadow: 0 10px 30px rgba(106, 85, 232, 0.14), var(--cyd7ai-l-card-shadow); }
    #cyd7ai .cyd7ai-ba .cyd7ai-tl::before { background: rgba(31, 60, 110, 0.14); }
    #cyd7ai .cyd7ai-ba .cyd7ai-tl li::before { background: #fff; }
    #cyd7ai .cyd7ai-ba .cyd7ai-tl .is-bad::before { background: rgba(214, 69, 58, 0.35); }
    #cyd7ai .cyd7ai-ba .cyd7ai-tl .is-ai::before { background: rgba(143, 124, 255, 0.4); }
    #cyd7ai .cyd7ai-ba .cyd7ai-tl .is-ok::before { background: var(--cyd7ai-green); }
    #cyd7ai .cyd7ai-ba .cyd7ai-ba-bar { background: rgba(31, 60, 110, 0.08); }
    #cyd7ai .cyd7ai-ba .cyd7ai-ex { border-color: rgba(199, 124, 6, 0.5); background: rgba(217, 138, 7, 0.07); }

    /* Garde-fous */
    #cyd7ai .cyd7ai-safety .cyd7ai-pc--auto { background: rgba(24, 160, 88, 0.12); }
    #cyd7ai .cyd7ai-safety .cyd7ai-pc--appr { background: rgba(217, 138, 7, 0.14); }
    #cyd7ai .cyd7ai-safety .cyd7ai-pc--tech { background: rgba(214, 69, 58, 0.12); color: var(--cyd7ai-bad-t); }

    /* Offre : carte blanche, tarif en carte claire teintee */
    #cyd7ai .cyd7ai-offer .cyd7ai-offer-panel {
      background:
        radial-gradient(ellipse at 85% 30%, rgba(31, 111, 224, 0.06), transparent 55%),
        #fff;
    }

    #cyd7ai .cyd7ai-offer .cyd7ai-price {
      border-color: rgba(11, 95, 196, 0.45);
      background: linear-gradient(160deg, #e8f2fe, #f7fbff 75%);
      box-shadow: 0 10px 28px rgba(11, 95, 196, 0.1);
    }

    #cyd7ai .cyd7ai-offer .cyd7ai-value { border-left-color: #1570e6; }

    /* ---------- Accent bleu de la maquette (identique a la page soeur d7) ---------- */
    #cyd7ai .ia-btn:not(.ia-btn--ghost) {
      background: linear-gradient(135deg, #0c5bc9, #1570e6);
      box-shadow: 0 8px 24px rgba(21, 112, 230, 0.34);
    }

    #cyd7ai .ia-btn:not(.ia-btn--ghost):hover { box-shadow: 0 12px 30px rgba(21, 112, 230, 0.45); }

    #cyd7ai #cyd7ai-title .highlight { background: linear-gradient(90deg, #3d9bff, #7cc4ff); -webkit-background-clip: text; background-clip: text; }
    #cyd7ai .cyd7ai-eyebrow { color: #8cc8ff; }
    #cyd7ai .cyd7ai-eyebrow::before { background: #3d9bff; }
    #cyd7ai .cyd7ai-keys .cyd7ai-key-ic { border-color: rgba(95, 170, 255, 0.65); background: rgba(31, 111, 224, 0.16); color: #7cc0ff; }
    #cyd7ai .cyd7ai-hero .cyd7ai-note { color: #9fd0ff; }
    #cyd7ai .cyd7ai-hero .cyd7ai-note-arrow { stroke: #9fd0ff; }

    /* petits libelles chiffres : police du site (le zero barre de la police mono ressemble a un B a cette taille) */
    #cyd7ai .cyd7ai-hero-fx .fx-vig-head,
    #cyd7ai .cyd7ai-inv-id b,
    #cyd7ai .cyd7ai-inv-n,
    #cyd7ai .cyd7ai-audit,
    #cyd7ai .cyd7ai-con,
    #cyd7ai .cyd7ai-taskbar,
    #cyd7ai .cyd7ai-tl time { font-family: var(--font); font-variant-numeric: tabular-nums; }
    #cyd7ai .cyd7ai-audit .cyd7ai-au-h { letter-spacing: 0.1em; }

    /* ======================================================================
       Animations (toujours actives, prefers-reduced-motion ignore).
       Regle : l'etat de base est l'etat final lisible ; chaque animation part d'un etat
       anterieur et aboutit a cet etat (fill both/forwards). Les fermetures de fenetres
       n'existent qu'ici : en mouvement reduit, les fenetres visitees restent ouvertes.
       ====================================================================== */
    /* --- hero --- */
    #cyd7ai .cyd7ai-h-fill { transition: transform 0.6s ease; }
    #cyd7ai .cyd7ai-h-ms .is-cur i { animation: cyd7ai-ms-pulse 1.4s ease-in-out infinite; }
    #cyd7ai [data-cyd7ai-hphase] .cyd7ai-h-clock { animation: cyd7ai-tick 0.45s ease both; }
    #cyd7ai [data-cyd7ai-hphase] .cyd7ai-h-cap { animation: cyd7ai-fade-up 0.4s ease both; }
    #cyd7ai .cyd7ai-agent-ic { animation: cyd7ai-glow 2.4s ease-in-out infinite; }
    #cyd7ai .cyd7ai-live i { animation: cyd7ai-blink 1.6s ease-in-out infinite; }
    #cyd7ai [data-cyd7ai-hphase] .cyd7ai-ag-bar i { animation: cyd7ai-fill 1.6s ease 0.1s both; }
    #cyd7ai .cyd7ai-feed li.is-new { animation: cyd7ai-feed-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
    #cyd7ai [data-cyd7ai-hphase="scan"] .cyd7ai-tiles::after { animation: cyd7ai-sweep 2.4s ease-in-out both; }
    #cyd7ai [data-cyd7ai-hphase="detect"] .cyd7ai-tile--hit { animation: cyd7ai-ping 0.7s ease 0.1s 2; }
    #cyd7ai [data-cyd7ai-hphase="revert"] .cyd7ai-tile--hit { animation: cyd7ai-breathe-t 1.1s ease-in-out infinite; }
    #cyd7ai [data-cyd7ai-hphase="verify"] .cyd7ai-tile--hit { animation: cyd7ai-pop 0.45s ease both; }
    #cyd7ai [data-cyd7ai-hphase="prevent"] .cyd7ai-tile--p { animation: cyd7ai-tflash 0.9s ease var(--d, 0s) both; }
    #cyd7ai [data-cyd7ai-hphase="login"] .cyd7ai-h-sun { animation: cyd7ai-pop 0.6s ease 0.2s both; }
    /* 08:00 : la vue du poste s'ouvre, l'ecran de verrouillage monte, la notification apparait */
    #cyd7ai [data-cyd7ai-hphase="login"] .cyd7ai-rv { animation: cyd7ai-rv-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
    #cyd7ai [data-cyd7ai-hphase="login"] .cyd7ai-rv-lock { animation: cyd7ai-lock-up 1.9s ease 0.15s both; }
    #cyd7ai [data-cyd7ai-hphase="login"] .cyd7ai-rv-time { animation: cyd7ai-pop 0.4s ease 0.3s both; }
    #cyd7ai [data-cyd7ai-hphase="login"] .cyd7ai-rv-hi { animation: cyd7ai-fade-up 0.35s ease 0.6s both; }
    #cyd7ai [data-cyd7ai-hphase="login"] .cyd7ai-rv-toast { animation: cyd7ai-pop 0.4s ease 2.15s both; }
    /* resultats des vignettes : seulement quand la barre de progression est pleine (1,4 s) */
    #cyd7ai .cyd7ai-hero-fx .cyd7ai-hv-revert.is-on .fx-vig-ok { animation: cyd7ai-vis-late 1.5s steps(1) both, cyd7ai-pop 0.35s ease 1.5s both; }
    #cyd7ai .cyd7ai-hero-fx .cyd7ai-hv-prevent.is-on .fx-vig-ok { animation: cyd7ai-vis-late 1.1s steps(1) both, cyd7ai-pop 0.35s ease 1.1s both; }
    #cyd7ai .cyd7ai-hero-fx .cyd7ai-hv-report.is-on .fx-vig-ok { animation: cyd7ai-pop 0.35s ease 0.8s both; }
    #cyd7ai .cyd7ai-hero-fx .fx-node.is-lit::after {
      content: "";
      position: absolute;
      inset: -1px;
      border: 2px solid var(--fx-accent);
      border-radius: inherit;
      pointer-events: none;
      animation: cyd7ai-ring 0.9s ease-out both;
    }

    /* --- serpentin : flash a l'activation des cartes-noeuds --- */
    #cyd7ai .cyd7ai-flow .fx-node.cyd7ai-step.is-lit::after {
      content: "";
      position: absolute;
      inset: -1px;
      border: 2px solid var(--fx-accent);
      border-radius: inherit;
      pointer-events: none;
      animation: cyd7ai-ring 0.9s ease-out both;
    }

    /* fenetres : ouverture depuis la barre de titre, action, puis repli sur la barre qui affiche le resultat */
    /* contenu complet vers 1,1 a 1,8 s, repli vers 3 a 4 s : environ 2 s (ou plus) de lecture du resultat complet ;
       les durees d'etape du script (HOLD) laissent ensuite le resultat replie visible */
    #cyd7ai .cyd7ai-step--2 { --cyd7ai-shut-at: 3.1s; }
    #cyd7ai .cyd7ai-step--3 { --cyd7ai-shut-at: 4s; }
    #cyd7ai .cyd7ai-step--5 { --cyd7ai-shut-at: 3.6s; }
    #cyd7ai .cyd7ai-step--8 { --cyd7ai-shut-at: 3.2s; }
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-tele,
    #cyd7ai .cyd7ai-step--3[data-cyd7ai-phase="analyze"] .cyd7ai-ana,
    #cyd7ai .cyd7ai-step--5[data-cyd7ai-phase="run"] .cyd7ai-job,
    #cyd7ai .cyd7ai-step--8[data-cyd7ai-phase="report"] .cyd7ai-rep { animation: cyd7ai-w-open 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both, cyd7ai-w-close 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) var(--cyd7ai-shut-at) forwards; }
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-tele > .cyd7ai-win-in,
    #cyd7ai .cyd7ai-step--3[data-cyd7ai-phase="analyze"] .cyd7ai-ana > .cyd7ai-win-in,
    #cyd7ai .cyd7ai-step--5[data-cyd7ai-phase="run"] .cyd7ai-job > .cyd7ai-win-in,
    #cyd7ai .cyd7ai-step--8[data-cyd7ai-phase="report"] .cyd7ai-rep > .cyd7ai-win-in { animation: cyd7ai-w-body-out 0.3s cubic-bezier(0.5, 0, 0.75, 0) var(--cyd7ai-shut-at) forwards; }
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-wres,
    #cyd7ai .cyd7ai-step--3[data-cyd7ai-phase="analyze"] .cyd7ai-wres,
    #cyd7ai .cyd7ai-step--5[data-cyd7ai-phase="run"] .cyd7ai-wres,
    #cyd7ai .cyd7ai-step--8[data-cyd7ai-phase="report"] .cyd7ai-wres { animation: cyd7ai-w-res 0.35s cubic-bezier(0.3, 0.7, 0.3, 1) calc(var(--cyd7ai-shut-at) + 0.3s) forwards; }
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-wghost,
    #cyd7ai .cyd7ai-step--3[data-cyd7ai-phase="analyze"] .cyd7ai-wghost,
    #cyd7ai .cyd7ai-step--5[data-cyd7ai-phase="run"] .cyd7ai-wghost,
    #cyd7ai .cyd7ai-step--8[data-cyd7ai-phase="report"] .cyd7ai-wghost { animation: cyd7ai-w-ghost 0.35s ease calc(var(--cyd7ai-shut-at) + 0.1s) forwards; }

    /* carte 1 : balayage, l'appareil vise passe a l'alerte */
    #cyd7ai .cyd7ai-step--1[data-cyd7ai-phase="scan"] .cyd7ai-inv::after { animation: cyd7ai-scan 1.6s ease-in-out 0.1s both; }
    #cyd7ai .cyd7ai-step--1[data-cyd7ai-phase="scan"] .cyd7ai-inv-r { animation: cyd7ai-row-scan 1.6s ease both; animation-delay: calc(var(--r, 0) * 0.28s); }
    #cyd7ai .cyd7ai-step--1[data-cyd7ai-phase="scan"][data-cyd7ai-hit="alert"] .is-hit .cyd7ai-st5 { animation: cyd7ai-vis-late 1.5s steps(1) both, cyd7ai-pop 0.35s ease 1.5s both; }
    #cyd7ai .cyd7ai-step--1[data-cyd7ai-phase="scan"][data-cyd7ai-hit="alert"] .is-hit .cyd7ai-st0 { animation: cyd7ai-vis-window 1.5s steps(1) both; }
    #cyd7ai .cyd7ai-step--1[data-cyd7ai-phase="scan"][data-cyd7ai-hit="alert"] .cyd7ai-inv-r.is-hit { animation: cyd7ai-hit-row 1.6s ease both; }
    #cyd7ai .cyd7ai-step--1[data-cyd7ai-hit="diag"] .is-hit .cyd7ai-st1 { animation: cyd7ai-pop 0.35s ease 1.6s both; }
    #cyd7ai .cyd7ai-step--1[data-cyd7ai-hit="diag"] .is-hit .cyd7ai-st5 { visibility: visible; animation: cyd7ai-vis-window 1.6s steps(1) both; }
    /* corrige seulement une fois les verifications terminees (carte 6, environ 2,2 s) */
    #cyd7ai .cyd7ai-step--1[data-cyd7ai-phase="ok"] .is-hit .cyd7ai-st3 { animation: cyd7ai-vis-late 2.3s steps(1) both, cyd7ai-pop 0.4s ease 2.3s both; }
    #cyd7ai .cyd7ai-step--1[data-cyd7ai-phase="ok"] .is-hit .cyd7ai-st2 { visibility: visible; animation: cyd7ai-vis-window 2.3s steps(1) both; }

    /* carte 2 : collecte */
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-rmm-chips li { animation: cyd7ai-chip-on 0.9s ease both; }
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-rmm-chips li:nth-child(2) { animation-delay: 0.12s; }
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-rmm-chips li:nth-child(3) { animation-delay: 0.24s; }
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-rmm-chips li:nth-child(4) { animation-delay: 0.36s; }
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-rmm-chips li:nth-child(5) { animation-delay: 0.48s; }
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-kv { animation: cyd7ai-fade-up 0.3s ease both; }
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-kv--1 { animation-delay: 0.25s; }
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-kv--2 { animation-delay: 0.45s; }
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-kv--3 { animation-delay: 0.65s; }
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-kv--4 { animation-delay: 0.85s; }
    #cyd7ai .cyd7ai-step--2[data-cyd7ai-phase="collect"] .cyd7ai-prog-t i { animation: cyd7ai-fill 1s ease 0.2s both; }

    /* carte 3 : analyse, correlation, prediction ; diagnostic complet a 1,4 s, lisible jusqu'au repli (4 s) */
    #cyd7ai .cyd7ai-step--3[data-cyd7ai-phase="analyze"] .cyd7ai-pills > span { animation: cyd7ai-pill 0.3s ease both; }
    #cyd7ai .cyd7ai-step--3[data-cyd7ai-phase="analyze"] .cyd7ai-pill1 { animation-delay: 0.2s; }
    #cyd7ai .cyd7ai-step--3[data-cyd7ai-phase="analyze"] .cyd7ai-pill2 { animation-delay: 0.5s; }
    #cyd7ai .cyd7ai-step--3[data-cyd7ai-phase="analyze"] .cyd7ai-pill3 { animation-delay: 0.8s; }
    #cyd7ai .cyd7ai-step--3[data-cyd7ai-phase="analyze"] .cyd7ai-ch-line { animation: cyd7ai-draw 0.7s ease 0.2s both; }
    #cyd7ai .cyd7ai-step--3[data-cyd7ai-phase="analyze"] .cyd7ai-ch-mark { animation: cyd7ai-pop 0.3s ease 0.9s both; }
    #cyd7ai .cyd7ai-step--3[data-cyd7ai-phase="analyze"] .cyd7ai-find { animation: cyd7ai-fade-up 0.4s ease 1s both; }

    /* carte 4 : regles cochees, puis approbation humaine (scenario faille) */
    #cyd7ai .cyd7ai-step--4[data-cyd7ai-phase="rules"] .cyd7ai-ck { animation: cyd7ai-pop 0.3s ease both; }
    #cyd7ai .cyd7ai-step--4[data-cyd7ai-phase="rules"] .cyd7ai-rule--1 .cyd7ai-ck { animation-delay: 0.2s; }
    #cyd7ai .cyd7ai-step--4[data-cyd7ai-phase="rules"] .cyd7ai-rule--2 .cyd7ai-ck { animation-delay: 0.6s; }
    #cyd7ai .cyd7ai-step--4[data-cyd7ai-phase="rules"] .cyd7ai-rule--3 .cyd7ai-ck { animation-delay: 1s; }
    #cyd7ai .cyd7ai-step--4[data-cyd7ai-phase="rules"] .cyd7ai-rule--4 .cyd7ai-ck { animation-delay: 1.4s; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4[data-cyd7ai-phase="rules"] .cyd7ai-appr-body { animation: cyd7ai-w-reveal-y 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s both; }
    #cyd7ai .cyd7ai-step--4[data-cyd7ai-phase="approve"] .cyd7ai-appr-yes .cyd7ai-cursor { animation: cyd7ai-cur-in 0.7s cubic-bezier(0.3, 0.7, 0.3, 1) 0.5s both, cyd7ai-vis-out 0.1s steps(1) 1.9s forwards; }
    #cyd7ai .cyd7ai-step--4[data-cyd7ai-phase="approve"] .cyd7ai-appr-yes { animation: cyd7ai-press 0.3s ease 1.3s both, cyd7ai-yes 1.4s steps(1) both; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4[data-cyd7ai-phase="approve"] .cyd7ai-as2 { animation: cyd7ai-vis-late 1.6s steps(1) both, cyd7ai-pop 0.35s ease 1.6s both; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4[data-cyd7ai-phase="approve"] .cyd7ai-as1 { visibility: visible; animation: cyd7ai-vis-window 1.6s steps(1) both; }
    #cyd7ai [data-cyd7ai-scn="vuln"] .cyd7ai-step--4[data-cyd7ai-phase="approved"] .cyd7ai-rule--3 { animation: cyd7ai-flash-ok 0.8s ease both; }

    /* carte 5 : la tache RMM s'execute */
    #cyd7ai .cyd7ai-step--5[data-cyd7ai-phase="run"] .cyd7ai-acts li.is-on { animation: cyd7ai-pop 0.35s ease 0.2s both; }
    #cyd7ai .cyd7ai-step--5[data-cyd7ai-phase="run"] .cyd7ai-con-l { animation: cyd7ai-reveal 0.4s ease both; }
    #cyd7ai .cyd7ai-step--5[data-cyd7ai-phase="run"] .cyd7ai-con-l1 { animation-delay: 0.4s; }
    #cyd7ai .cyd7ai-step--5[data-cyd7ai-phase="run"] .cyd7ai-con-l2 { animation-delay: 0.8s; }
    #cyd7ai .cyd7ai-step--5[data-cyd7ai-phase="run"] .cyd7ai-con-l3 { animation-delay: 1.2s; }
    #cyd7ai .cyd7ai-step--5[data-cyd7ai-phase="run"] .cyd7ai-prog-t i { animation: cyd7ai-fill 1.4s ease 0.3s both; }
    #cyd7ai .cyd7ai-step--5[data-cyd7ai-phase="run"] .cyd7ai-pl0 { visibility: visible; animation: cyd7ai-vis-window 1.7s steps(1) both; }
    #cyd7ai .cyd7ai-step--5[data-cyd7ai-phase="run"] .cyd7ai-pl1 { animation: cyd7ai-vis-late 1.7s steps(1) both, cyd7ai-pop 0.3s ease 1.7s both; }

    /* carte 6 : verifications une a une */
    /* chaque rangee tourne jusqu'a sa resolution (--cd), puis passe au crochet vert */
    #cyd7ai .cyd7ai-step--6[data-cyd7ai-phase="verify"] .cyd7ai-spin { animation: cyd7ai-spinr var(--cd) linear, cyd7ai-cr-res 0.25s ease var(--cd) both; }
    #cyd7ai .cyd7ai-step--6[data-cyd7ai-phase="verify"] .cyd7ai-spin::after { animation: cyd7ai-cr-tick 0.25s ease var(--cd) both; }
    #cyd7ai .cyd7ai-step--6[data-cyd7ai-phase="verify"] .cyd7ai-cr > em { display: inline; animation: cyd7ai-vis-out 0.1s steps(1) var(--cd) both; }
    #cyd7ai .cyd7ai-step--6[data-cyd7ai-phase="verify"] .cyd7ai-cr-p { visibility: visible; animation: cyd7ai-vis-window var(--cd) steps(1) both; }
    #cyd7ai .cyd7ai-step--6[data-cyd7ai-phase="verify"] .cyd7ai-cr-r { animation: cyd7ai-vis-late var(--cd) steps(1) both, cyd7ai-ink 0.25s ease var(--cd) both; }
    #cyd7ai .cyd7ai-step--6[data-cyd7ai-phase="verify"] .cyd7ai-chk-pill { animation: cyd7ai-pop 0.35s ease 2.1s both; }

    /* carte 7 : entrees du journal */
    #cyd7ai .cyd7ai-step--7[data-cyd7ai-phase="log"] .cyd7ai-au-r { animation: cyd7ai-slide-in 0.35s ease both; }
    #cyd7ai .cyd7ai-step--7[data-cyd7ai-phase="log"] .cyd7ai-au-r1 { animation-delay: 0.2s; }
    #cyd7ai .cyd7ai-step--7[data-cyd7ai-phase="log"] .cyd7ai-au-r2 { animation-delay: 0.5s; }
    #cyd7ai .cyd7ai-step--7[data-cyd7ai-phase="log"] .cyd7ai-au-r3 { animation-delay: 0.8s; }
    #cyd7ai .cyd7ai-step--7[data-cyd7ai-phase="log"] .cyd7ai-au-r4 { animation-delay: 1.1s; }
    #cyd7ai .cyd7ai-step--7[data-cyd7ai-phase="log"] .cyd7ai-au-chip { animation: cyd7ai-pop 0.35s ease 1.5s both; }

    /* carte 8 : rapport */
    #cyd7ai .cyd7ai-step--8[data-cyd7ai-phase="report"] .cyd7ai-rr { animation: cyd7ai-fade-up 0.3s ease both; }
    #cyd7ai .cyd7ai-step--8[data-cyd7ai-phase="report"] .cyd7ai-rr--1 { animation-delay: 0.25s; }
    #cyd7ai .cyd7ai-step--8[data-cyd7ai-phase="report"] .cyd7ai-rr--2 { animation-delay: 0.45s; }
    #cyd7ai .cyd7ai-step--8[data-cyd7ai-phase="report"] .cyd7ai-rr--3 { animation-delay: 0.65s; }
    #cyd7ai .cyd7ai-step--8[data-cyd7ai-phase="report"] .cyd7ai-rep-to { animation: cyd7ai-fade-up 0.3s ease 0.85s both; }

    /* carte 9 : 08:00, bonjour, le verrou monte, la notification apparait */
    #cyd7ai .cyd7ai-step--9[data-cyd7ai-phase="login"] .cyd7ai-lock { animation: cyd7ai-lock-up 1.55s ease both; }
    #cyd7ai .cyd7ai-step--9[data-cyd7ai-phase="login"] .cyd7ai-lock-on { display: flex; }
    #cyd7ai .cyd7ai-step--9[data-cyd7ai-phase="login"] .cyd7ai-lock-time { animation: cyd7ai-pop 0.4s ease 0.05s both; }
    #cyd7ai .cyd7ai-step--9[data-cyd7ai-phase="login"] .cyd7ai-lock-hi,
    #cyd7ai .cyd7ai-step--9[data-cyd7ai-phase="login"] .cyd7ai-lock-who { animation: cyd7ai-fade-up 0.35s ease 0.45s both; }
    #cyd7ai .cyd7ai-step--9[data-cyd7ai-phase="login"] .cyd7ai-toast { animation: cyd7ai-pop 0.4s ease 1.5s both; }

    /* --- capacites : micro-visuels quand le bloc devient visible ; chaque animation s'arrete en moins de 5 s
       (WCAG 2.2.2) sur son etat de base lisible, et rejoue seulement au prochain passage dans l'ecran --- */
    #cyd7ai .cyd7ai-caps-grid.is-live .cyd7ai-viz--radar i { animation: cyd7ai-spinr 2.4s linear 2; }
    #cyd7ai .cyd7ai-caps-grid.is-live .cyd7ai-viz--radar b { animation: cyd7ai-blink 1.3s ease-in-out 3; }
    #cyd7ai .cyd7ai-caps-grid.is-live .cyd7ai-viz--log i:nth-child(3) { animation: cyd7ai-logline 3s ease-in-out 1; }
    #cyd7ai .cyd7ai-caps-grid.is-live .cyd7ai-ver-b { animation: cyd7ai-pulse-ok 2.4s ease-in-out 2; }
    #cyd7ai .cyd7ai-caps-grid.is-live .cyd7ai-viz--sky i::after { animation: cyd7ai-travel 3.2s ease-in-out 1; }
    #cyd7ai .cyd7ai-caps-grid.is-live .cyd7ai-sp-b { animation: cyd7ai-draw-loop 3.2s ease 1; }
    #cyd7ai .cyd7ai-caps-grid.is-live .cyd7ai-viz--chips span { animation: cyd7ai-blink-chip 2.7s ease-in-out 1; }
    #cyd7ai .cyd7ai-caps-grid.is-live .cyd7ai-viz--chips span:nth-child(2) { animation-delay: 0.9s; }
    #cyd7ai .cyd7ai-caps-grid.is-live .cyd7ai-viz--chips span:nth-child(3) { animation-delay: 1.8s; }
    #cyd7ai .cyd7ai-caps-grid.is-live .cyd7ai-bar-t i { animation: cyd7ai-shrink 3.4s ease-in-out 1; }

    /* --- avant / apres : chronologies et indicateurs reveles une fois, chacun quand il devient visible --- */
    @media screen {
      #cyd7ai .cyd7ai-ba-grid.is-armed:not(.is-live) .cyd7ai-tl li,
      #cyd7ai .cyd7ai-ba-grid.is-armed:not(.is-live) .cyd7ai-ba-total { opacity: 0; }
      #cyd7ai .cyd7ai-ba-grid.is-armed:not(.is-live) .cyd7ai-ba-bar i { transform: scaleX(0); }
      #cyd7ai .cyd7ai-kpis.is-armed:not(.is-live) .cyd7ai-kn { visibility: hidden; }
    }
    #cyd7ai .cyd7ai-ba-grid.is-live .cyd7ai-tl li { animation: cyd7ai-slide-in 0.4s ease both; animation-delay: calc(var(--i, 0) * 0.3s); }
    #cyd7ai .cyd7ai-ba-grid.is-live .cyd7ai-ba-col--without .cyd7ai-ba-total { animation: cyd7ai-fade-up 0.4s ease 1.5s both; }
    #cyd7ai .cyd7ai-ba-grid.is-live .cyd7ai-ba-col--with .cyd7ai-ba-total { animation: cyd7ai-fade-up 0.4s ease 3s both; }
    #cyd7ai .cyd7ai-ba-grid.is-live .cyd7ai-ba-col--without .cyd7ai-ba-bar i { animation: cyd7ai-fill 1.2s ease 1.6s both; }
    #cyd7ai .cyd7ai-ba-grid.is-live .cyd7ai-ba-col--with .cyd7ai-ba-bar i { animation: cyd7ai-fill 0.5s ease 3.1s both; }

    /* fleche de la note manuscrite : quelques passages seulement, puis immobile */
    #cyd7ai .cyd7ai-note-arrow path:first-child { animation: cyd7ai-dash 1.6s linear 0.8s infinite; }

    /* delais de resolution des verifications (carte 6) */
    #cyd7ai .cyd7ai-cr--1 { --cd: 0.3s; }
    #cyd7ai .cyd7ai-cr--2 { --cd: 0.8s; }
    #cyd7ai .cyd7ai-cr--3 { --cd: 1.3s; }
    #cyd7ai .cyd7ai-cr--4 { --cd: 1.8s; }

    @keyframes cyd7ai-ink {
      from { color: #5d6f8c; }
      to { color: #15233d; }
    }

    /* index de rangee pour le balayage de l'inventaire */
    #cyd7ai .cyd7ai-inv-r2 { --r: 1; }
    #cyd7ai .cyd7ai-inv-r3 { --r: 2; }
    #cyd7ai .cyd7ai-inv-r4 { --r: 3; }
    #cyd7ai .cyd7ai-inv-r5 { --r: 4; }

    @keyframes cyd7ai-reveal {
      from { clip-path: inset(0 100% 0 0); }
      to { clip-path: inset(0 0 0 0); }
    }

    @keyframes cyd7ai-fade-up {
      from { opacity: 0; transform: translateY(7px); }
      to { opacity: 1; transform: none; }
    }

    @keyframes cyd7ai-slide-in {
      from { opacity: 0; transform: translateX(-12px); }
      to { opacity: 1; transform: none; }
    }

    @keyframes cyd7ai-pop {
      0% { opacity: 0; transform: scale(0.6); }
      70% { opacity: 1; transform: scale(1.08); }
      100% { opacity: 1; transform: none; }
    }

    @keyframes cyd7ai-press {
      0%, 100% { transform: none; }
      45% { transform: scale(0.92); }
    }

    @keyframes cyd7ai-cur-in {
      from { opacity: 0; transform: translate(-40px, 26px); }
      70% { opacity: 1; }
      to { opacity: 1; transform: none; }
    }

    @keyframes cyd7ai-vis-out {
      0%, 99% { visibility: visible; }
      100% { visibility: hidden; }
    }

    @keyframes cyd7ai-vis-late {
      0%, 99% { visibility: hidden; }
      100% { visibility: visible; }
    }

    @keyframes cyd7ai-vis-window {
      0%, 99% { visibility: visible; }
      100% { visibility: hidden; }
    }

    @keyframes cyd7ai-w-open {
      from { clip-path: inset(0 0 calc(100% - var(--cyd7ai-bar)) 0 round 8px); opacity: 0.6; transform: scale(0.94); }
      to { clip-path: inset(-40px round 8px); opacity: 1; transform: none; }
    }

    @keyframes cyd7ai-w-close {
      from { clip-path: inset(-40px round 8px); }
      to { clip-path: inset(0 0 calc(100% - var(--cyd7ai-bar)) 0 round 8px); }
    }

    @keyframes cyd7ai-w-body-out {
      to { opacity: 0; transform: translateY(-6px) scale(0.97); }
    }

    @keyframes cyd7ai-w-res {
      from { clip-path: inset(0 100% 0 0 round 8px); visibility: visible; }
      to { clip-path: inset(0 0 0 0 round 8px); visibility: visible; }
    }

    @keyframes cyd7ai-w-ghost {
      from { opacity: 0; visibility: visible; }
      to { opacity: 1; visibility: visible; }
    }

    /* dans un noeud : decoupe seulement (aucune transformation du noeud) */
    @keyframes cyd7ai-w-reveal-y {
      from { clip-path: inset(0 0 100% 0); opacity: 0.4; }
      to { clip-path: inset(0 0 0 0); opacity: 1; }
    }

    @keyframes cyd7ai-feed-in {
      from { opacity: 0; transform: translateY(-0.5em); }
      to { opacity: 1; transform: none; }
    }

    @keyframes cyd7ai-rv-in {
      from { opacity: 0; transform: translateY(0.8em); }
      to { opacity: 1; transform: none; }
    }

    @keyframes cyd7ai-ring {
      from { opacity: 0.9; transform: scale(1); }
      to { opacity: 0; transform: scale(1.025); }
    }

    @keyframes cyd7ai-ping {
      50% { transform: scale(1.35); }
    }

    @keyframes cyd7ai-breathe-t {
      0%, 100% { box-shadow: 0 0 0 2px rgba(106, 168, 255, 0.35), 0 0 0.6em rgba(106, 168, 255, 0.4); }
      50% { box-shadow: 0 0 0 3px rgba(106, 168, 255, 0.55), 0 0 1.4em rgba(106, 168, 255, 0.8); }
    }

    @keyframes cyd7ai-tflash {
      0% { background-color: #14294f; }
      35% { background-color: #1d6aa0; border-color: rgba(95, 200, 255, 0.9); box-shadow: 0 0 0.7em rgba(95, 200, 255, 0.6); }
      100% { background-color: #14294f; }
    }

    @keyframes cyd7ai-sweep {
      0% { opacity: 0; transform: translateX(-100%); }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { opacity: 0; transform: translateX(560%); }
    }

    @keyframes cyd7ai-scan {
      0% { opacity: 0; transform: translateY(-22px); }
      10%, 85% { opacity: 1; }
      100% { opacity: 0; transform: translateY(210px); }
    }

    @keyframes cyd7ai-row-scan {
      0% { background-color: transparent; }
      12% { background-color: rgba(143, 124, 255, 0.14); }
      30%, 100% { background-color: transparent; }
    }

    @keyframes cyd7ai-hit-row {
      0%, 85% { border-left-color: transparent; background-color: transparent; }
      100% { border-left-color: #f7c46a; background-color: rgba(217, 138, 7, 0.1); }
    }

    @keyframes cyd7ai-fill {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    @keyframes cyd7ai-tick {
      from { opacity: 0.35; transform: translateY(-0.2em); }
      to { opacity: 1; transform: none; }
    }

    @keyframes cyd7ai-glow {
      0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0.9em rgba(143, 124, 255, 0.35); }
      50% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 1.8em rgba(143, 124, 255, 0.7); }
    }

    @keyframes cyd7ai-ms-pulse {
      0%, 100% { box-shadow: 0 0 0 0.2em rgba(232, 87, 74, 0.25); }
      50% { box-shadow: 0 0 0 0.45em rgba(232, 87, 74, 0.08); }
    }

    @keyframes cyd7ai-chip-on {
      0% { border-color: rgba(255, 111, 94, 0.35); background-color: #0a1530; }
      40% { border-color: rgba(255, 111, 94, 0.9); background-color: rgba(232, 87, 74, 0.28); }
      100% { border-color: rgba(255, 111, 94, 0.35); background-color: #0a1530; }
    }

    @keyframes cyd7ai-pill {
      from { border-color: #d9dfea; background-color: #f2f4f8; color: #9aa7bd; }
    }

    @keyframes cyd7ai-draw {
      from { stroke-dashoffset: 1; }
      to { stroke-dashoffset: 0; }
    }

    @keyframes cyd7ai-yes {
      0% { background-color: var(--cyd7ai-blue); }
      100% { background-color: var(--cyd7ai-ok); }
    }

    @keyframes cyd7ai-flash-ok {
      0% { box-shadow: 0 0 0 0 rgba(24, 160, 88, 0.5); }
      40% { box-shadow: 0 0 0 4px rgba(24, 160, 88, 0.25); }
      100% { box-shadow: 0 0 0 0 rgba(24, 160, 88, 0); }
    }

    @keyframes cyd7ai-spinr {
      to { transform: rotate(360deg); }
    }

    @keyframes cyd7ai-cr-res {
      from { border-color: #9fb0cc; border-style: dashed; background-color: transparent; }
      to { border-color: #18a058; border-style: solid; background-color: #18a058; }
    }

    @keyframes cyd7ai-cr-tick {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes cyd7ai-lock-up {
      0%, 62% { visibility: visible; transform: none; }
      99% { visibility: visible; transform: translateY(-102%); }
      100% { visibility: hidden; transform: translateY(-102%); }
    }

    @keyframes cyd7ai-blink {
      0%, 100% { opacity: 0.3; }
      50% { opacity: 1; }
    }

    @keyframes cyd7ai-logline {
      0%, 30% { background-color: rgba(120, 160, 220, 0.4); box-shadow: none; }
      45%, 85% { background-color: #f7c46a; box-shadow: 0 0 6px rgba(247, 196, 106, 0.6); }
      100% { background-color: rgba(120, 160, 220, 0.4); box-shadow: none; }
    }

    @keyframes cyd7ai-pulse-ok {
      0%, 100% { box-shadow: 0 0 0 0 rgba(79, 209, 139, 0); }
      50% { box-shadow: 0 0 0 3px rgba(79, 209, 139, 0.25); }
    }

    @keyframes cyd7ai-travel {
      0% { right: 100%; background-color: #ffe7a8; }
      70%, 100% { right: -2px; background-color: #ffd27a; }
    }

    @keyframes cyd7ai-draw-loop {
      0% { stroke-dasharray: 1; stroke-dashoffset: 1; }
      50%, 100% { stroke-dasharray: 1; stroke-dashoffset: 0; }
    }

    @keyframes cyd7ai-blink-chip {
      0%, 100% { opacity: 1; }
      15% { opacity: 0.45; }
      30% { opacity: 1; }
    }

    @keyframes cyd7ai-shrink {
      0% { width: 92%; background: linear-gradient(90deg, #e8574a, #f7c46a); }
      45%, 100% { width: 48%; background: linear-gradient(90deg, #4fd18b, #9be8bf); }
    }

    @keyframes cyd7ai-dash {
      to { stroke-dashoffset: -22; }
    }

    /* ======================================================================
       Mise en page responsive
       ====================================================================== */
    @media (max-width: 999px) {
      /* empile : le coude du lien 3 -> 4 passe sous l'en-tete opaque ; l'espace (fond de carte) entre l'en-tete et
         les regles laisse voir la fin du lien et sa pointe */
      #cyd7ai .cyd7ai-flow .cyd7ai-step:not(.fx-node) { gap: 16px; }
    }

    @media (max-width: 639px) {
      #cyd7ai .ia-actions .ia-btn { flex: 1 1 220px; }
      #cyd7ai .cyd7ai-flow.ia-panel { padding: 10px; }
      #cyd7ai .cyd7ai-flow .cyd7ai-step { padding: 12px; }
      #cyd7ai .cyd7ai-flow-stage { row-gap: 44px; }
      #cyd7ai .cyd7ai-note { font-size: 0.95rem; }
      #cyd7ai .cyd7ai-brand-name { font-size: 1.35rem; }
      #cyd7ai .cyd7ai-flow .cyd7ai-step--4 { padding-top: 0; }
      #cyd7ai .cyd7ai-flow .cyd7ai-step--4 > .cyd7ai-step-head { padding-top: 12px; }
      /* carte 4 : regles environ 60 %, approbation 40 % ; question courte et seul le bouton Approuver (clic anime conserve) */
      #cyd7ai .cyd7ai-ui--4 { column-gap: 14px; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
      #cyd7ai .cyd7ai-appr-ql,
      #cyd7ai .cyd7ai-appr-no { display: none; }
      #cyd7ai .cyd7ai-appr-qs { display: inline; }
      #cyd7ai .cyd7ai-as2-t { display: none; }
      #cyd7ai .cyd7ai-as1,
      #cyd7ai .cyd7ai-as2 { white-space: nowrap; }
      #cyd7ai .cyd7ai-as0 { border-radius: 8px !important; }

      /* hero mobile : console seule (sans le moniteur), agent IA dessous (controles a droite),
         puis une bande basse de hauteur fixe pour les fenetres de l'etape */
      #cyd7ai .cyd7ai-hero-stage {
        aspect-ratio: 340 / 585;
        font-size: clamp(10px, 2.9cqw, 12px);
      }
      #cyd7ai .cyd7ai-hero-stage::after { display: none; }
      #cyd7ai .cyd7ai-mon { left: 0; top: 0; width: 100%; height: 58%; aspect-ratio: auto; }
      #cyd7ai .cyd7ai-mon-img { display: none; }
      #cyd7ai .cyd7ai-scr {
        inset: 0;
        width: auto;
        height: auto;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1.2fr) minmax(0, 1fr);
        row-gap: 0.55em;
        border: 1px solid rgba(120, 160, 220, 0.45);
        border-radius: 0.8em;
        box-shadow: 0 1.2em 2.4em rgba(0, 0, 0, 0.45);
      }
      #cyd7ai .cyd7ai-scr-ttl { display: none; }
      #cyd7ai .cyd7ai-scr-head { flex-direction: column; align-items: stretch; gap: 0.55em; padding: 0.5em 0 0; }
      #cyd7ai .cyd7ai-h-time { flex-direction: row; align-items: baseline; gap: 0.7em; width: auto; }
      #cyd7ai .cyd7ai-h-clock { font-size: 1.9em; }
      #cyd7ai .cyd7ai-hero-fx .cyd7ai-h-fleet { grid-row: 3; }
      #cyd7ai .cyd7ai-hero-fx .cyd7ai-h-feed { grid-column: 1; grid-row: 4; }
      #cyd7ai .cyd7ai-feed { grid-template-rows: repeat(3, minmax(0, 1fr)); }
      #cyd7ai .cyd7ai-feed li:nth-child(4) { display: none; }
      #cyd7ai .cyd7ai-rv { border-radius: 0 0 0.8em 0.8em; }
      #cyd7ai .cyd7ai-hero-fx .cyd7ai-h-ai { top: 60.5%; width: 100%; }
      #cyd7ai .cyd7ai-hero-fx .cyd7ai-hv {
        left: 0;
        top: 74%;
        bottom: auto;
        width: 100%;
      }
      /* une fenetre sort avant que la suivante entre (pas de texte superpose) */
      #cyd7ai .cyd7ai-hero-fx .fx-vig { transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0.2s; }
      #cyd7ai .cyd7ai-hero-fx .fx-vig.is-on { transition: opacity 0.3s ease 0.2s, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s, visibility 0s linear 0.2s; }

      #cyd7ai .cyd7ai-policy thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
      #cyd7ai .cyd7ai-policy,
      #cyd7ai .cyd7ai-policy tbody { display: block; }
      #cyd7ai .cyd7ai-policy caption { display: block; }
      #cyd7ai .cyd7ai-policy tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px 10px;
        padding: 10px 0;
        border-bottom: 1px solid var(--ia-line);
      }
      #cyd7ai .cyd7ai-policy tbody tr:last-child { border-bottom: 0; }
      #cyd7ai .cyd7ai-policy th,
      #cyd7ai .cyd7ai-policy td { padding: 0; border: 0; }
      #cyd7ai .cyd7ai-policy tbody th { grid-column: 1 / -1; }
      #cyd7ai .cyd7ai-policy td { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
      #cyd7ai .cyd7ai-policy td::before { content: attr(data-label); color: var(--text-muted); font-family: var(--fx-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }
    }

    @media (min-width: 640px) {
      #cyd7ai .cyd7ai-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
      #cyd7ai .cyd7ai-hero .ia-hero-visual { width: 100%; max-width: 760px; margin: 0 auto; }
      #cyd7ai .cyd7ai-caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #cyd7ai .cyd7ai-ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #cyd7ai .cyd7ai-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (min-width: 640px) and (max-width: 999px) {
      #cyd7ai .cyd7ai-flow .cyd7ai-step { padding: 18px 20px; }
      #cyd7ai .cyd7ai-flow .cyd7ai-step--4 { padding-top: 0; }
      #cyd7ai .cyd7ai-flow .cyd7ai-step--4 > .cyd7ai-step-head { padding-top: 18px; }
      /* interface centree : les liens entre cartes restent verticaux, au centre */
      #cyd7ai .cyd7ai-ui { width: 100%; max-width: 580px; margin-right: auto; margin-left: auto; }
    }

    @media (min-width: 820px) {
      #cyd7ai .cyd7ai-flow { --fx-log-lines: 4; }
      #cyd7ai .cyd7ai-flow > .fx-console:not(.is-floating) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        column-gap: 20px;
        align-content: start;
      }
      #cyd7ai .cyd7ai-flow > .fx-console:not(.is-floating) .fx-con-head,
      #cyd7ai .cyd7ai-flow > .fx-console:not(.is-floating) .fx-con-live,
      #cyd7ai .cyd7ai-flow > .fx-console:not(.is-floating) .fx-con-text { grid-column: 1; }
      #cyd7ai .cyd7ai-flow > .fx-console:not(.is-floating) .fx-log { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
      #cyd7ai .cyd7ai-flow.fx--static > .fx-console:not(.is-floating) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
      #cyd7ai .cyd7ai-flow.fx--static > .fx-console:not(.is-floating) > * { grid-column: auto; grid-row: auto; }
      #cyd7ai .cyd7ai-flow.fx--static > .fx-console:not(.is-floating) .fx-log { margin-top: 6px; }
      #cyd7ai .cyd7ai-offer-panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 30px; padding: 28px; align-items: center; }
      #cyd7ai .cyd7ai-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    /* console sous le diagramme : hauteur du texte reservee (4 lignes) pour que la page ne bouge pas d'une etape a l'autre */
    @media (max-width: 1099px) {
      #cyd7ai .cyd7ai-flow:not(.fx--static) > .fx-console:not(.is-floating) .fx-con-text { min-height: 4lh; }
    }

    @media (min-width: 1000px) {
      /* serpentin 3 x 3 : rangee 2 inversee (6 5 4), 4 sous 3 et 7 sous 6 */
      #cyd7ai .cyd7ai-flow-stage {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 40px;
        row-gap: 64px;
        padding: 8px 4px 20px 4px;
      }
      #cyd7ai .cyd7ai-step--1 { grid-area: 1 / 1; }
      #cyd7ai .cyd7ai-step--2 { grid-area: 1 / 2; }
      #cyd7ai .cyd7ai-step--3 { grid-area: 1 / 3; }
      #cyd7ai .cyd7ai-step--4 { grid-area: 2 / 3; }
      #cyd7ai .cyd7ai-step--5 { grid-area: 2 / 2; }
      #cyd7ai .cyd7ai-step--6 { grid-area: 2 / 1; }
      #cyd7ai .cyd7ai-step--7 { grid-area: 3 / 1; }
      #cyd7ai .cyd7ai-step--8 { grid-area: 3 / 2; }
      #cyd7ai .cyd7ai-step--9 { grid-area: 3 / 3; }
      /* carte 4 : regles au-dessus, approbation dessous (le lien vers la carte 5 sort a gauche des regles) */
      #cyd7ai .cyd7ai-ui--4 { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
      #cyd7ai .cyd7ai-flow .cyd7ai-appr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
      #cyd7ai .cyd7ai-appr-slot { grid-column: 1 / -1; grid-row: 2; }
      #cyd7ai .cyd7ai-appr-st { grid-column: 2; grid-row: 1; justify-items: end; }
      #cyd7ai .cyd7ai-appr-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      /* question et boutons sur une ligne ; regles et approbation plus proches */
      #cyd7ai .cyd7ai-ui--4 { row-gap: 24px; }
      #cyd7ai .cyd7ai-appr-body { flex-direction: row; align-items: center; gap: 8px; }
      #cyd7ai .cyd7ai-appr-q { flex: 1; min-width: 0; }
      #cyd7ai .cyd7ai-appr-btns { flex: none; }
      /* le lien 3 -> 4 descend dans la gouttiere de gauche et entre par le cote gauche des regles :
         les fenetres de la carte 4 s'alignent presque sur le bord de la carte (pas de crochet du trace) */
      #cyd7ai .cyd7ai-step--4 .cyd7ai-ui--4 { margin-right: -14px; margin-left: -14px; }
      /* fenetres des cartes 5 et 6 juste sous leur texte (la rangee suit la hauteur de la carte 4) */
      #cyd7ai .cyd7ai-step--5 .cyd7ai-ui,
      #cyd7ai .cyd7ai-step--6 .cyd7ai-ui { margin-top: 0; }
    }

    @media (min-width: 1100px) {
      #cyd7ai {
        --ia-hero-cols: minmax(0, 0.84fr) minmax(0, 1.16fr);
        --ia-hero-gap: 40px;
      }
      #cyd7ai .cyd7ai-hero { align-items: center; }
      #cyd7ai .cyd7ai-hero .ia-hero-copy { padding-top: 0; }
      #cyd7ai .cyd7ai-hero .ia-h1 { font-size: clamp(2.3rem, 3.3vw, 2.85rem); }
      /* la promesse commence toujours sur sa propre ligne (pas de « Tout » orphelin en fin de ligne) */
      #cyd7ai #cyd7ai-title .highlight { display: block; }
      #cyd7ai .cyd7ai-hero .ia-hero-visual { max-width: none; }

      #cyd7ai .cyd7ai-note { margin: 22px -12px 0 auto; padding-right: 40px; }
      /* fleche courte : reste dans la gouttiere entre le texte et la scene (aucune carte ne la recouvre) */
      #cyd7ai .cyd7ai-note-arrow {
        position: absolute;
        right: -30px;
        bottom: 12px;
        width: 64px;
        height: 118px;
      }

      /* trace calcule par le script (de la fin du texte jusqu'au coin bas gauche de l'agent IA), en px du repere de la note */
      #cyd7ai .cyd7ai-note-arrow.cyd7ai-note-arrow--aimed {
        left: 0;
        top: 0;
        right: auto;
        bottom: auto;
        width: 1px;
        height: 1px;
      }

      #cyd7ai .cyd7ai-caps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      #cyd7ai .cyd7ai-safe-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 34px; }
      #cyd7ai .cyd7ai-points { grid-template-columns: minmax(0, 1fr); }
      #cyd7ai .cyd7ai-offer-panel { padding: 30px 34px; }
    }

    @media (min-width: 1100px) and (max-width: 1279px) {
      #cyd7ai { --ia-hero-cols: minmax(0, 0.74fr) minmax(0, 1.26fr); }
    }

    @media (min-width: 1280px) {
      #cyd7ai .cyd7ai-flow-stage { column-gap: 46px; }
    }
    /* @@IA:cyd7ai:css:end@@ */

    /* @@IA:cyseauto:css:start@@ */
    /* ======================================================================
       Secure-Exchanges · Automation (cyseauto) : #cyber-secure-exchanges-automation
       Theme « marine claire » de la page soeur (cyse), version allegee.
       ====================================================================== */
    #cyseauto {
      --bg: #001628;
      --bg-alt: #011c32;
      --surface: rgba(2, 36, 68, 0.72);
      --border: rgba(60, 150, 230, 0.2);
      --ia-panel-bg: linear-gradient(165deg, rgba(3, 40, 76, 0.94), rgba(1, 26, 50, 0.95));
      --ia-panel-border: rgba(40, 150, 240, 0.45);
      --ia-line: rgba(90, 165, 235, 0.2);
      --fx-node-bg: linear-gradient(170deg, #03294c 0%, #011c38 100%);
      --fx-p-se: #46b3a6;
      --fx-k-secure: #46b3a6;
      --fx-k-event: #8f7cff;
      --cyseauto-teal: #46b3a6;
      --cyseauto-teal-t: #9be0d5;
      --cyseauto-sec-gap: 56px;
      --cyseauto-pad-b: 70px;
      background:
        radial-gradient(52% 560px at 72% 380px, rgba(26, 112, 200, 0.4), transparent 72%),
        radial-gradient(38% 420px at 8% 160px, rgba(10, 74, 140, 0.22), transparent 70%),
        linear-gradient(180deg, #001628 0, #011a30 900px, #011c32 100%);
    }

    #cyseauto .cyseauto-nw { white-space: nowrap; }
    #cyseauto #cyseauto-how-title:focus { outline: none; }

    /* ---------- Barre du haut ---------- */
    #cyseauto .cyseauto-top { margin: 0 0 26px; }
    #cyseauto .cyseauto-top .back-link { margin: 0; }

    /* ---------- Hero : texte ---------- */
    #cyseauto .cyseauto-hero { margin-bottom: 0; }

    #cyseauto .cyseauto-logo {
      display: block;
      width: 180px;
      height: auto;
      margin: 0 0 18px;
    }

    #cyseauto .cyseauto-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 0;
      border: 0;
      background: none;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
    }

    #cyseauto .cyseauto-eyebrow::before {
      content: "";
      flex: none;
      width: 26px;
      height: 2px;
      border-radius: 2px;
      background: var(--accent-bright);
    }

    #cyseauto .cyseauto-sys {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 26px;
      padding: 0;
      list-style: none;
    }

    #cyseauto .cyseauto-sys li {
      padding: 5px 12px;
      border: 1px solid rgba(70, 179, 166, 0.45);
      border-radius: 999px;
      background: rgba(70, 179, 166, 0.08);
      color: #d3eeea;
      font-size: 0.85rem;
      line-height: 1.3;
    }

    /* ---------- Hero : scene animee ---------- */
    #cyseauto .cyseauto-hero-fx {
      container-type: inline-size;
      gap: 6px;
      padding: 18px 16px 10px;
    }

    #cyseauto .cyseauto-stage {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: auto minmax(15.6em, auto) auto;
      grid-template-areas:
        "erp api enc"
        "band band band"
        "cesar hook client";
      column-gap: 8%;
      row-gap: 1.8em;
      font-size: clamp(10px, 1.62cqw, 12.5px);
      line-height: 1.3;
    }

    #cyseauto .cyseauto-n--erp { grid-area: erp; }
    #cyseauto .cyseauto-n--api { grid-area: api; }
    #cyseauto .cyseauto-n--enc { grid-area: enc; }
    #cyseauto .cyseauto-n--client { grid-area: client; }
    #cyseauto .cyseauto-n--hook { grid-area: hook; }
    #cyseauto .cyseauto-n--cesar { grid-area: cesar; }

    #cyseauto .cyseauto-hero-fx .cyseauto-n {
      align-self: center;
      align-items: center;
      gap: 0.3em;
      padding: 0.85em 0.7em 0.9em;
      text-align: center;
    }

    #cyseauto .cyseauto-hero-fx .fx-tag { font-size: max(0.6rem, 0.78em); }
    #cyseauto .cyseauto-hero-fx .cyseauto-n .fx-title { font-size: 1.08em; }
    #cyseauto .cyseauto-hero-fx .cyseauto-n .fx-sub { font-size: max(0.6rem, 0.88em); }

    #cyseauto .cyseauto-n-mark { width: 1.9em; height: auto; }
    #cyseauto .cyseauto-n-img { width: auto; height: 2.6em; }

    #cyseauto .cyseauto-av {
      display: grid;
      place-items: center;
      width: 2.3em;
      height: 2.3em;
      border-radius: 50%;
      background: linear-gradient(135deg, #2f7fd6, #1b4f8f);
      color: #fff;
      font-weight: 700;
    }

    #cyseauto .cyseauto-cesar-img { position: relative; display: block; }
    #cyseauto .cyseauto-cesar-img img { display: block; width: auto; height: 3.2em; }
    #cyseauto .cyseauto-cesar-txt { display: flex; flex-direction: column; gap: 0.2em; }

    #cyseauto .cyseauto-led {
      position: absolute;
      left: 26%;
      width: 0.32em;
      height: 0.32em;
      border-radius: 50%;
      background: #5fe0a8;
      box-shadow: 0 0 5px #5fe0a8;
      opacity: 0.35;
    }

    #cyseauto .cyseauto-led:nth-of-type(1) { top: 22%; }
    #cyseauto .cyseauto-led:nth-of-type(2) { top: 38%; }
    #cyseauto .cyseauto-n--cesar.is-lit .cyseauto-led { opacity: 1; }

    /* pastilles d'etat (0 = depart, 1 = intermediaire, 2 = termine) */
    #cyseauto .cyseauto-st > span { display: none; }
    #cyseauto .cyseauto-st[data-cyseauto-s="0"] > .cyseauto-p0,
    #cyseauto .cyseauto-st[data-cyseauto-s="1"] > .cyseauto-p1,
    #cyseauto .cyseauto-st[data-cyseauto-s="2"] > .cyseauto-p2 { display: inline-block; }

    #cyseauto .cyseauto-pill,
    #cyseauto .cyseauto-evt {
      margin-top: 0.15em;
      padding: 0.15em 0.75em;
      border: 1px solid rgba(224, 167, 58, 0.55);
      border-radius: 999px;
      background: rgba(224, 167, 58, 0.12);
      color: #f3cf86;
      font-family: var(--fx-mono);
      font-size: max(0.6rem, 0.8em);
      font-weight: 600;
      white-space: nowrap;
    }

    #cyseauto .cyseauto-st[data-cyseauto-s="1"] {
      border-color: rgba(95, 170, 255, 0.6);
      background: rgba(95, 170, 255, 0.12);
      color: #a9d1ff;
    }

    #cyseauto .cyseauto-pill[data-cyseauto-s="2"],
    #cyseauto .cyseauto-evt[data-cyseauto-s="2"] {
      border-color: rgba(70, 200, 140, 0.6);
      background: rgba(70, 200, 140, 0.13);
      color: #8ff0bf;
    }

    #cyseauto .cyseauto-evt[data-cyseauto-s="0"] {
      border-color: rgba(154, 171, 198, 0.35);
      background: rgba(154, 171, 198, 0.08);
      color: var(--text-muted);
    }

    #cyseauto .cyseauto-n--cesar .fx-sub[data-cyseauto-s="2"] { color: #8ff0bf; }

    /* bande centrale : suivi discret, remplace par une fenetre quand elle s'ouvre */
    #cyseauto .cyseauto-cap {
      grid-area: band;
      align-self: center;
      justify-self: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.8em;
      max-width: 56%;
      text-align: center;
      transition: opacity 0.3s ease;
    }

    #cyseauto .cyseauto-cap-dots { display: flex; gap: 0.55em; }

    #cyseauto .cyseauto-cap-dots i {
      width: 0.6em;
      height: 0.6em;
      border-radius: 50%;
      background: rgba(154, 171, 198, 0.28);
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    #cyseauto .cyseauto-cap-dots i.is-on { background: var(--cyseauto-teal); }
    #cyseauto .cyseauto-cap-dots i.is-cur { background: var(--cyseauto-teal-t); box-shadow: 0 0 8px var(--cyseauto-teal); }

    #cyseauto .cyseauto-cap-t {
      color: #fff;
      font-size: 1.25em;
      font-weight: 650;
      line-height: 1.3;
    }

    #cyseauto [data-cyseauto-i="1"] .cyseauto-cap,
    #cyseauto [data-cyseauto-i="3"] .cyseauto-cap { opacity: 0; }

    /* fenetres (vignettes en surimpression dans la bande centrale, jamais sur un noeud) */
    #cyseauto .cyseauto-hero-fx .cyseauto-vig {
      grid-area: band;
      top: 0;
      bottom: 0;
      left: 20%;
      right: 20%;
      width: auto;
      max-width: none;
      height: fit-content;
      margin: auto 0;
      padding: 0.8em 1em 0.9em;
      background: linear-gradient(170deg, #03284c, #011a34);
      font-size: 1em;
      transform-origin: 50% 50%;
    }

    #cyseauto .cyseauto-hero-fx .cyseauto-vig--sign { left: 27%; right: 27%; }

    #cyseauto .cyseauto-hero-fx .fx-vig-head { font-size: max(0.6rem, 0.8em); margin-bottom: 0.55em; }
    #cyseauto .cyseauto-hero-fx .fx-vig-head .ic { width: 1.4em; height: 1.4em; }
    #cyseauto .cyseauto-hero-fx .fx-vig-meta { font-size: max(0.6rem, 0.9em); }
    #cyseauto .cyseauto-hero-fx .fx-vig-ok { font-size: max(0.6rem, 0.9em); margin-top: 0.4em; }
    #cyseauto .cyseauto-vig--sign .fx-vig-draw { height: 3.6em; margin: 0.3em 0 0; }
    #cyseauto .cyseauto-sig-base { stroke: rgba(154, 171, 198, 0.4) !important; stroke-width: 1 !important; animation: none !important; stroke-dasharray: none !important; }

    #cyseauto .cyseauto-ex {
      margin-left: auto;
      padding: 0.1em 0.7em;
      border: 1px solid rgba(255, 179, 170, 0.5);
      border-radius: 999px;
      color: var(--ia-coral-soft);
      letter-spacing: 0.08em;
    }

    #cyseauto .cyseauto-code {
      display: block;
      padding: 0.6em 0.8em;
      border: 1px solid rgba(90, 165, 235, 0.18);
      border-radius: 8px;
      background: #00101f;
      color: #c9d6ea;
      font-family: var(--fx-mono);
      font-size: max(0.6rem, 0.9em);
      line-height: 1.45;
    }

    #cyseauto .cyseauto-cl { display: block; overflow: hidden; white-space: pre; text-overflow: clip; }
    #cyseauto .cyseauto-cl--in { padding-left: 1.6em; }
    #cyseauto .cyseauto-code b { color: #ff9d8f; font-weight: 700; }
    #cyseauto .cyseauto-code i { color: #9cc9ff; font-style: normal; }
    #cyseauto .cyseauto-code u { color: var(--cyseauto-teal-t); text-decoration: none; }
    #cyseauto .cyseauto-code em { color: var(--text-muted); font-style: normal; }

    #cyseauto .cyseauto-resp {
      display: inline-flex;
      align-items: center;
      gap: 0.4em;
      margin-top: 0.6em;
      padding: 0.15em 0.75em;
      border-radius: 999px;
      background: rgba(70, 200, 140, 0.13);
      color: #8ff0bf;
      font-family: var(--fx-mono);
      font-size: max(0.6rem, 0.82em);
      font-weight: 600;
    }

    #cyseauto .cyseauto-resp .ic { width: 1.2em; height: 1.2em; }

    /* liens securises : tube discret, comme la page soeur */
    #cyseauto .cyseauto-hero-fx .fx-k-secure .fx-wire { stroke-width: 9; stroke-opacity: 0.16; }
    #cyseauto .cyseauto-hero-fx .fx-k-secure.is-active .fx-wire { stroke-width: 12; stroke-opacity: 0.24; }
    #cyseauto .cyseauto-hero-fx .fx-edge:not(.fx-k-secure) .fx-wire { stroke-opacity: 0.55; }

    /* controles : barre de temps du moteur (lecture/pause, etape courante, segments cliquables) */
    #cyseauto .cyseauto-hero-fx .fx-scn-sum { display: none; }

    /* ---------- Comment fonctionne l'automatisation ---------- */
    #cyseauto .cyseauto-steps {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 34px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #cyseauto .cyseauto-step {
      position: relative;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: 16px;
      align-content: start;
      min-width: 0;
      padding: 18px;
      border: 1px solid var(--ia-panel-border);
      border-radius: 14px;
      background: var(--ia-panel-bg);
      box-shadow: 0 0 22px rgba(30, 130, 235, 0.12);
    }

    #cyseauto .cyseauto-step-top {
      grid-row: 1 / span 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    #cyseauto .cyseauto-step-n {
      color: var(--ia-coral-soft);
      font-family: var(--fx-mono);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.08em;
    }

    #cyseauto .cyseauto-step-ic,
    #cyseauto .cyseauto-ic {
      display: grid;
      place-items: center;
      flex: none;
      width: 42px;
      height: 42px;
      border: 1.5px solid rgba(70, 179, 166, 0.7);
      border-radius: 50%;
      background: rgba(70, 179, 166, 0.1);
      color: var(--cyseauto-teal-t);
    }

    #cyseauto .cyseauto-step-ic .ic,
    #cyseauto .cyseauto-ic .ic { width: 20px; height: 20px; }

    #cyseauto .cyseauto-step h3 {
      margin: 0 0 6px;
      color: #fff;
      font-size: 1.02rem;
      line-height: 1.3;
    }

    #cyseauto .cyseauto-step p {
      margin: 0;
      color: var(--text-muted);
      font-size: 0.9rem;
      line-height: 1.5;
    }

    /* points animes entre les etapes : verticaux (empile), horizontaux (grille) */
    #cyseauto .cyseauto-link {
      position: absolute;
      left: 36px;
      top: 100%;
      width: 6px;
      height: 34px;
      background: radial-gradient(circle, var(--cyseauto-teal-t) 0 1.7px, transparent 2.3px) 50% 0 / 6px 9px repeat-y;
      opacity: 0.85;
    }

    /* ---------- Cartes ---------- */
    #cyseauto .cyseauto-card {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      box-shadow: 0 0 22px rgba(30, 130, 235, 0.12);
    }

    #cyseauto .cyseauto-who-card .cyseauto-ic {
      border-color: rgba(232, 87, 74, 0.65);
      background: rgba(192, 57, 43, 0.1);
      color: var(--accent-bright);
    }

    /* ---------- Bandes de fond pleine largeur (border-image : debordement d'encre, sans defilement) ---------- */
    #cyseauto .cyseauto-how {
      border-image: linear-gradient(180deg, #2a6aa6 0 1px, #0b416e 1px, #01233f 28px, #00213e 55%, #01264a 100%)
        fill 0 / 0 / calc(var(--cyseauto-sec-gap) / 2) 100vmax calc(var(--cyseauto-sec-gap) / 2);
    }

    #cyseauto .cyseauto-api {
      border-image: linear-gradient(180deg, #01264a 0, #002a4d 45%, #01274a 100%)
        fill 0 / 0 / calc(var(--cyseauto-sec-gap) / 2) 100vmax calc(var(--cyseauto-sec-gap) / 2);
    }

    #cyseauto .cyseauto-who {
      border-image: linear-gradient(180deg, #2a6aa6 0 1px, #0a3660 1px, #001628 28px, #001123 50%, #001628 100%)
        fill 0 / 0 / calc(var(--cyseauto-sec-gap) / 2) 100vmax var(--cyseauto-pad-b);
    }

    /* ---------- Telephone : scene en 2 colonnes, fenetres dans la bande du bas ---------- */
    @media (max-width: 639px) {
      #cyseauto .cyseauto-hero-fx { padding: 14px 12px 8px; }
      #cyseauto .cyseauto-stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto auto minmax(16.4em, auto);
        grid-template-areas:
          "erp api"
          "cesar enc"
          "hook client"
          "band band";
        column-gap: 14%;
        row-gap: 2.2em;
        font-size: clamp(10px, 3.3cqw, 12px);
      }
      #cyseauto .cyseauto-cap { max-width: 92%; }
      #cyseauto .cyseauto-hero-fx .cyseauto-vig { left: 0; right: 0; }
      #cyseauto .cyseauto-hero-fx .cyseauto-vig--sign { left: 8%; right: 8%; }
      #cyseauto .cyseauto-cl--in { padding-left: 1em; }
      #cyseauto .cyseauto-logo { width: 150px; }
    }

    @media (min-width: 640px) {
      #cyseauto .cyseauto-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (min-width: 900px) {
      #cyseauto { --cyseauto-sec-gap: 84px; --cyseauto-pad-b: 90px; }
      #cyseauto .cyseauto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

      #cyseauto .cyseauto-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 44px; }
      #cyseauto .cyseauto-step { display: block; }
      #cyseauto .cyseauto-step-top { flex-direction: row; justify-content: space-between; margin-bottom: 14px; }
      #cyseauto .cyseauto-step-n { font-size: 1.5rem; letter-spacing: 0; opacity: 0.9; }
      #cyseauto .cyseauto-link {
        left: 100%;
        top: 38px;
        width: 44px;
        height: 6px;
        background: radial-gradient(circle, var(--cyseauto-teal-t) 0 1.7px, transparent 2.3px) 0 50% / 9px 6px repeat-x;
      }
      #cyseauto .cyseauto-step:nth-child(3) .cyseauto-link { display: none; }
    }

    @media (min-width: 1100px) {
      #cyseauto {
        --ia-hero-cols: minmax(0, 0.84fr) minmax(0, 1.16fr);
        --ia-hero-gap: 44px;
      }
      #cyseauto .cyseauto-hero { align-items: center; }
      #cyseauto .cyseauto-hero .ia-hero-copy { padding-top: 0; }
      #cyseauto .cyseauto-hero .ia-h1 { font-size: clamp(2.3rem, 3.3vw, 2.9rem); }
    }

    @media (min-width: 1280px) {
      #cyseauto .cyseauto-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 32px; }
      #cyseauto .cyseauto-step { padding: 18px 16px; }
      #cyseauto .cyseauto-link { width: 32px; }
      #cyseauto .cyseauto-step:nth-child(3) .cyseauto-link { display: block; }
    }

    /* ---------- Animations (toujours actives, prefers-reduced-motion ignore ; l'etat de base est l'etat final) ---------- */
    #cyseauto .cyseauto-st > span { animation: cyseauto-pop 0.35s ease both; }

    #cyseauto .cyseauto-n--cesar.is-lit .cyseauto-led { animation: cyseauto-blink 0.9s ease-in-out infinite; }
    #cyseauto .cyseauto-n--cesar.is-lit .cyseauto-led:nth-of-type(2) { animation-delay: 0.3s; }

    #cyseauto .fx-vig.is-on .cyseauto-cl { animation: cyseauto-type 0.32s steps(14, end) both; animation-delay: calc(var(--i) * 0.2s + 0.25s); }
    #cyseauto .fx-vig.is-on .cyseauto-resp { animation: cyseauto-pop 0.35s ease 2.05s both; }

    #cyseauto .cyseauto-how.is-live .cyseauto-link { animation: cyseauto-dots-v 0.9s linear infinite; }
    #cyseauto .cyseauto-how.is-live .cyseauto-step { animation: cyseauto-lit 7.2s ease infinite; animation-delay: calc(var(--i) * 1.2s); }
    #cyseauto .cyseauto-how.is-live .cyseauto-step-ic { animation: cyseauto-lit-ic 7.2s ease infinite; animation-delay: calc(var(--i) * 1.2s); }

    @media (min-width: 900px) {
      #cyseauto .cyseauto-how.is-live .cyseauto-link { animation-name: cyseauto-dots-h; }
    }

    @keyframes cyseauto-pop {
      0% { opacity: 0; transform: scale(0.7); }
      70% { opacity: 1; transform: scale(1.06); }
      100% { opacity: 1; transform: none; }
    }

    @keyframes cyseauto-blink {
      0%, 100% { opacity: 0.35; }
      50% { opacity: 1; }
    }

    @keyframes cyseauto-type {
      from { clip-path: inset(0 100% 0 0); }
      to { clip-path: inset(0 0 0 0); }
    }

    @keyframes cyseauto-dots-v {
      from { background-position: 50% 0; }
      to { background-position: 50% 9px; }
    }

    @keyframes cyseauto-dots-h {
      from { background-position: 0 50%; }
      to { background-position: 9px 50%; }
    }

    @keyframes cyseauto-lit {
      0%, 22%, 100% { border-color: var(--ia-panel-border); box-shadow: 0 0 22px rgba(30, 130, 235, 0.12); }
      5%, 15% { border-color: var(--cyseauto-teal); box-shadow: 0 0 0 1px rgba(70, 179, 166, 0.4), 0 0 30px rgba(70, 179, 166, 0.3); }
    }

    @keyframes cyseauto-lit-ic {
      0%, 22%, 100% { background: rgba(70, 179, 166, 0.1); color: var(--cyseauto-teal-t); }
      5%, 15% { background: var(--cyseauto-teal); color: #00243a; }
    }
    /* @@IA:cyseauto:css:end@@ */

    /* @@IA:real:css:start@@ */
    /* ---------- Nos réalisations : bandes sombres / claires pleine largeur ---------- */
    #real {
        --real-light: #f5f8fc;
        --real-ink: #0b1b36;
        --real-muted: #4a5d7a;
        --real-line: #dbe4f0;
        --real-coral: #b8352a;
        --real-blue: #1f5fbf;
        --real-chip: #edf2f9;
    }
    #real.hosting-view { padding: 0; }
    #real .ia-wrap { max-width: none; margin: 0; }
    #real .real-band { position: relative; width: 100%; }
    #real .real-inner { box-sizing: border-box; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
    #real .real-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
    #real .real-eyebrow,
    #real .real-kicker { display: inline-block; color: var(--accent-bright); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }

    /* ---------- Hero (sombre) ---------- */
    #real .real-band--hero { padding: 96px 0 56px; background: linear-gradient(180deg, rgba(5, 11, 24, 0.2) 0, rgba(6, 16, 34, 0.7) 100%); }
    #real .real-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; margin: 10px 0 0; }
    #real .real-hero h1 { margin: 10px 0 14px; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; }
    #real .real-hl { background: linear-gradient(90deg, var(--accent-bright), #ff8a65); -webkit-background-clip: text; background-clip: text; color: transparent; }
    #real .real-lead { margin: 0; max-width: 640px; color: var(--text-muted); font-size: 1.06rem; }

    #real .real-index { padding: 18px 18px 14px; border: 1px solid rgba(120, 160, 220, 0.24); border-radius: 16px; background: linear-gradient(180deg, rgba(16, 30, 58, 0.92), rgba(9, 18, 38, 0.92)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
    #real .real-index-head { display: flex; justify-content: space-between; gap: 12px; margin: 0 4px 10px; color: var(--text-muted); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; }
    #real .real-index-head span:first-child { color: var(--accent-bright); font-weight: 600; }
    #real .real-index-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
    #real .real-index-btn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: rgba(255, 255, 255, 0.03); color: var(--text); font: inherit; font-size: 0.97rem; text-align: left; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
    #real .real-index-btn .ic { width: 20px; height: 20px; color: var(--cyan); }
    #real .real-index-nums { color: var(--text-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
    #real .real-index-btn:hover { border-color: rgba(95, 200, 255, 0.35); background: rgba(95, 200, 255, 0.07); }
    #real .real-index-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

    #real .real-facts { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    #real .real-facts li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; align-content: start; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(14, 26, 50, 0.7); }
    #real .real-facts .ic { grid-row: span 2; width: 22px; height: 22px; margin-top: 2px; color: var(--accent-bright); }
    #real .real-facts strong { font-size: 1.05rem; line-height: 1.3; }
    #real .real-facts span { color: var(--text-muted); font-size: 0.88rem; line-height: 1.45; }

    /* ---------- Bande claire ---------- */
    #real .real-band--light { padding: 64px 0 72px; background: var(--real-light); color: var(--real-ink); }
    #real .real-section-head { max-width: 760px; margin: 0 0 28px; }
    #real .real-section-head .real-kicker { color: var(--real-coral); }
    #real .real-section-head h2 { margin: 8px 0 10px; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.18; color: var(--real-ink); }
    #real .real-section-head p { margin: 0; color: var(--real-muted); font-size: 1.02rem; }

    #real .real-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 8px; padding: 0 0 22px; border-bottom: 1px solid var(--real-line); scroll-margin-top: 90px; }
    #real .real-filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
    #real .real-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px 8px 16px; border: 1px solid #c9d6e8; border-radius: 999px; background: #fff; color: var(--real-ink); font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
    #real .real-filter:hover { border-color: var(--real-blue); }
    #real .real-filter[aria-pressed="true"] { border-color: var(--real-ink); background: var(--real-ink); color: #fff; }
    #real .real-filter:focus-visible { outline: 3px solid var(--real-blue); outline-offset: 2px; }
    #real .real-count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--real-chip); color: #24406b; font-size: 0.78rem; font-weight: 700; }
    #real .real-filter[aria-pressed="true"] .real-count { background: rgba(255, 255, 255, 0.16); color: #fff; }
    #real .real-status { margin: 0; color: var(--real-muted); font-size: 0.88rem; }

    #real .real-group { margin: 34px 0 0; }
    #real .real-group[hidden] { display: none; }
    #real .real-group-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
    #real .real-group-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--real-ink); color: #ff9f94; }
    #real .real-group-ic .ic { width: 20px; height: 20px; }
    #real .real-group-head h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; color: var(--real-ink); }
    #real .real-group-count { margin-left: auto; color: var(--real-muted); font-size: 0.85rem; white-space: nowrap; }

    #real .real-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
    #real .real-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 22px 20px 20px; border: 1px solid var(--real-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(11, 27, 54, 0.04), 0 14px 34px -22px rgba(11, 27, 54, 0.28); scroll-margin-top: 90px; outline: none; transition: box-shadow 0.25s ease, border-color 0.25s ease; }
    #real .real-card::before { content: ""; position: absolute; left: 20px; top: -1px; width: 44px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--accent), var(--accent-bright)); }
    #real .real-card:hover { border-color: #c6d4e8; box-shadow: 0 1px 2px rgba(11, 27, 54, 0.05), 0 20px 44px -22px rgba(11, 27, 54, 0.34); }
    #real .real-card.is-target { border-color: var(--real-blue); box-shadow: 0 0 0 3px rgba(31, 95, 191, 0.18), 0 20px 44px -22px rgba(11, 27, 54, 0.34); }
    #real .real-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
    #real .real-num { color: var(--real-coral); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
    #real .real-tag { color: var(--real-blue); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
    #real .real-own { padding: 3px 10px; border: 1px solid rgba(184, 53, 42, 0.35); border-radius: 999px; background: #fff3f1; color: var(--real-coral); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
    #real .real-card h4 { margin: -6px 0 0; font-size: 1.28rem; line-height: 1.28; color: var(--real-ink); }
    #real .real-block { min-width: 0; }
    #real .real-label { margin: 0 0 8px; color: var(--real-coral); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
    #real .real-block p:not(.real-label) { margin: 0; color: var(--real-muted); font-size: 0.97rem; line-height: 1.6; }
    #real .real-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
    #real .real-points li { position: relative; padding-left: 22px; color: #22364f; font-size: 0.96rem; line-height: 1.55; }
    #real .real-points li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 7px; height: 7px; border-radius: 2px; background: var(--real-blue); transform: rotate(45deg); }
    #real .real-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
    #real .real-chips li { padding: 4px 10px; border: 1px solid #d3deee; border-radius: 999px; background: var(--real-chip); color: #24406b; font-size: 0.82rem; font-weight: 600; line-height: 1.4; }
    #real .real-who { margin: 0; padding: 12px 14px; border-left: 3px solid var(--accent-bright); border-radius: 0 10px 10px 0; background: #fbf4f3; color: #33465f; font-size: 0.94rem; line-height: 1.5; }
    #real .real-who strong { color: var(--real-ink); }

    /* ---------- Bande sombre « Vous vous reconnaissez ? » ---------- */
    #real .real-band--dark { padding: 68px 0 72px; background: radial-gradient(1200px 400px at 85% 0, rgba(192, 57, 43, 0.16), transparent 70%), linear-gradient(180deg, #071226 0, #0a1830 100%); }
    #real .real-section-head--dark h2 { color: var(--text); }
    #real .real-section-head--dark p { color: var(--text-muted); }
    #real .real-section-head--dark .real-kicker { color: var(--accent-bright); }
    #real .real-match { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
    #real .real-match li { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: rgba(14, 26, 50, 0.85); }
    #real .real-match p { margin: 0; color: var(--text); font-size: 1.04rem; font-weight: 600; line-height: 1.45; }
    #real .real-goto { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; min-height: 40px; padding: 6px 0; border: 0; background: none; color: var(--cyan); font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; }
    #real .real-goto .ic { width: 16px; height: 16px; transition: transform 0.2s ease; }
    #real .real-goto:hover .ic { transform: translateX(3px); }
    #real .real-goto:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

    /* ---------- Bande claire « Notre façon de livrer » ---------- */
    #real .real-band--how { padding: 64px 0 68px; }
    #real .real-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
    #real .real-steps li { padding: 20px; border: 1px solid var(--real-line); border-radius: 14px; background: #fff; }
    #real .real-step-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(184, 53, 42, 0.45); border-radius: 50%; color: var(--real-coral); font-size: 0.85rem; font-weight: 700; }
    #real .real-steps h3 { margin: 12px 0 6px; font-size: 1.08rem; line-height: 1.3; color: var(--real-ink); }
    #real .real-steps p { margin: 0; color: var(--real-muted); font-size: 0.95rem; line-height: 1.55; }

    /* ---------- Bande d’appel à l’action (sombre) ---------- */
    #real .real-band--cta { padding: 64px 0 76px; background: linear-gradient(180deg, #050b18 0, #071226 100%); }
    #real .real-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; padding: 28px 22px; border: 1px solid rgba(232, 87, 74, 0.32); border-radius: 18px; background: radial-gradient(600px 240px at 0 0, rgba(232, 87, 74, 0.16), transparent 70%), linear-gradient(180deg, rgba(16, 30, 58, 0.95), rgba(10, 20, 40, 0.95)); }
    #real .real-cta h2 { margin: 8px 0 10px; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.18; }
    #real .real-cta p { margin: 0; max-width: 620px; color: var(--text-muted); }
    #real .real-cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
    #real .real-cta-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 0.95rem; font-weight: 600; text-decoration: none; }
    #real .real-cta-link .ic { width: 16px; height: 16px; color: var(--accent-bright); }
    #real .real-cta-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
    #real .real-cta-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

    @media (max-width: 639px) {
        #real .real-facts li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 14px; }
        #real .real-facts .ic { grid-row: auto; margin: 0 0 4px; }
    }
    @media (min-width: 640px) {
        #real .real-inner { padding: 0 28px; }
        #real .real-match { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        #real .real-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        #real .real-card { padding: 26px 26px 24px; }
        #real .real-card::before { left: 26px; }
    }
    @media (min-width: 900px) {
        #real .real-band--hero { padding: 120px 0 64px; }
        #real .real-band--light { padding: 80px 0 88px; }
        #real .real-band--dark { padding: 84px 0 88px; }
        #real .real-band--how { padding: 80px 0 84px; }
        #real .real-band--cta { padding: 80px 0 96px; }
        #real .real-inner { padding: 0 36px; }
        #real .real-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        #real .real-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: 56px; }
        #real .real-match { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        #real .real-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        #real .real-cta { grid-template-columns: minmax(0, 1fr) auto; padding: 36px 40px; gap: 32px; }
        /* carte en deux colonnes : récit à gauche, construction à droite */
        #real .real-card {
            display: grid;
            grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
            grid-template-rows: auto auto auto 1fr auto;
            grid-template-areas: "top build" "title build" "defi build" "who build" "tech tech";
            gap: 14px 40px;
            padding: 28px 30px 26px;
        }
        #real .real-card::before { left: 30px; }
        #real .real-card-top { grid-area: top; }
        #real .real-card h4 { grid-area: title; margin: 0; font-size: 1.36rem; }
        #real .real-block--defi { grid-area: defi; }
        #real .real-block--build { grid-area: build; padding-left: 40px; border-left: 1px solid var(--real-line); }
        #real .real-block--tech { grid-area: tech; display: flex; align-items: baseline; gap: 10px 18px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--real-line); }
        #real .real-block--tech .real-label { flex: none; margin: 0; }
        #real .real-who { grid-area: who; align-self: start; margin-top: 4px; }
    }
    #real .real-band--fleet { background: #fff; border-bottom: 1px solid var(--real-line); }
    #real .real-fleet { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
    #real .real-fleet li { padding: 20px; border: 1px solid var(--real-line); border-radius: 16px; background: var(--real-light); }
    #real .real-fleet strong { display: block; margin-bottom: 6px; color: var(--real-ink); font-size: 1.2rem; line-height: 1.25; }
    #real .real-fleet span { color: var(--real-muted); font-size: 0.95rem; }
    #real .real-fleet-title { margin: 34px 0 14px; color: var(--real-ink); font-size: 1.15rem; }
    #real .real-sectors { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
    #real .real-sectors li { padding: 8px 14px; border: 1px solid #c9d6e8; border-radius: 999px; background: #fff; color: var(--real-ink); font-size: 0.92rem; font-weight: 600; }
    @media (min-width: 900px) {
      #real .real-fleet { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    #real .real-card--featured { grid-column: 1 / -1; border-color: rgba(184, 53, 42, 0.45); box-shadow: 0 1px 2px rgba(11, 27, 54, 0.05), 0 24px 50px -24px rgba(184, 53, 42, 0.35); }
    #real .real-card--featured h4 { font-size: 1.3rem; }
    #real .real-badge { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #fdecea; color: var(--real-coral); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; }
    /* @@IA:real:css:end@@ */

    /* @@IA:exig:css:start@@ */
    #exig .ia-wrap { max-width: 1100px; }
    #exig .exig-head { margin: 18px 0 24px; }
    #exig .exig-eyebrow { color: var(--accent-bright); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }
    #exig .exig-head h1 { margin: 8px 0 10px; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; }
    #exig .exig-head p { margin: 0; max-width: 820px; color: var(--text-muted); }
    #exig .exig-block { margin: 30px 0 0; }
    #exig .exig-block h2 { margin: 0 0 14px; font-size: 1.35rem; }
    #exig .exig-steps { margin: 0; padding: 0; list-style: none; counter-reset: exig; display: grid; gap: 10px; }
    #exig .exig-steps li { counter-increment: exig; position: relative; padding: 14px 18px 14px 60px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); color: var(--text-muted); }
    #exig .exig-steps li::before { content: counter(exig); position: absolute; left: 18px; top: 13px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--accent-bright); color: var(--accent-bright); font-weight: 700; display: grid; place-items: center; font-size: 0.9rem; }
    #exig .exig-steps strong { display: block; color: var(--text); margin-bottom: 2px; }
    #exig .exig-callout { margin: 16px 0 0; padding: 14px 18px; border-left: 3px solid var(--accent-bright); background: rgba(192, 57, 43, 0.12); border-radius: 0 10px 10px 0; color: var(--text); font-weight: 600; }
    #exig .exig-callout--plain { border-left-color: var(--cyan); background: rgba(95, 200, 255, 0.08); font-weight: 500; }
    #exig .exig-grid { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
    #exig .exig-grid li { padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); }
    #exig .exig-grid strong { display: block; margin-bottom: 4px; }
    #exig .exig-grid span { color: var(--text-muted); font-size: 0.95rem; }
    #exig .exig-cta { margin: 30px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; color: var(--text-muted); }
    #exig .exig-head .exig-lead { margin: 0 0 12px; color: var(--text); font-size: 1.15rem; line-height: 1.5; }
    #exig .exig-intro { margin: 0 0 14px; max-width: 860px; color: var(--text-muted); }
    #exig .exig-note { margin: 14px 0 0; max-width: 860px; color: var(--text-muted); font-size: 0.95rem; }
    #exig .exig-quote { margin: 18px 0 0; padding: 18px 22px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); }
    #exig .exig-quote p { margin: 0 0 6px; color: var(--text); font-size: 1.2rem; font-weight: 600; line-height: 1.4; }
    #exig .exig-quote p::before { content: "«\00a0"; color: var(--accent-bright); }
    #exig .exig-quote p::after { content: "\00a0»"; color: var(--accent-bright); }
    #exig .exig-quote span { display: block; color: var(--text-muted); font-size: 0.95rem; }
    #exig .exig-quote--cyan { margin: 0 0 14px; }
    #exig .exig-quote--cyan p::before, #exig .exig-quote--cyan p::after { color: var(--cyan); }
    #exig .exig-levels { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
    #exig .exig-level { padding: 18px 20px; border: 1px solid var(--border); border-top: 3px solid var(--cyan); border-radius: 12px; background: rgba(14, 26, 50, 0.85); }
    #exig .exig-level--ha { border-top-color: var(--accent-bright); }
    #exig .exig-level h3 { margin: 0 0 12px; font-size: 1.1rem; line-height: 1.3; }
    #exig .exig-level dl { margin: 0; display: grid; gap: 10px; }
    #exig .exig-level dt { color: var(--cyan); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
    #exig .exig-level dd { margin: 2px 0 0; color: var(--text-muted); font-size: 0.93rem; }
    @media (min-width: 900px) {
      #exig .exig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #exig .exig-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    /* @@IA:exig:css:end@@ */

    /* @@IA:dc:css:start@@ */
    #dc .ia-wrap { max-width: 1100px; }
    #dc .dc-hero { margin: 18px 0 30px; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: center; }
    #dc .dc-eyebrow { color: var(--accent-bright); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }
    #dc .dc-hero h1 { margin: 8px 0 10px; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; }
    #dc .dc-lead { margin: 0; max-width: 620px; color: var(--text-muted); font-size: 1.05rem; }
    #dc .dc-actions { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
    #dc .dc-hero-media { margin: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: rgba(14, 26, 50, 0.85); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
    #dc .dc-hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 306; object-fit: cover; }
    #dc .dc-link { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); font-weight: 600; text-decoration: none; }
    #dc .dc-link .ic { width: 18px; height: 18px; transition: transform 0.2s ease; }
    #dc .dc-link:hover, #dc .dc-link:focus-visible { color: #fff; }
    #dc .dc-link:hover .ic, #dc .dc-link:focus-visible .ic { transform: translateX(3px); }
    #dc .dc-block { margin: 34px 0 0; }
    #dc .dc-block > h2 { margin: 0 0 14px; font-size: 1.35rem; }
    #dc .dc-grid { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); counter-reset: dc; }
    #dc .dc-card { counter-increment: dc; position: relative; padding: 18px 20px 18px 64px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); }
    #dc .dc-card::before { content: counter(dc, decimal-leading-zero); position: absolute; left: 20px; top: 18px; color: var(--accent-bright); font-weight: 700; }
    #dc .dc-card h3 { margin: 0 0 6px; font-size: 1.1rem; line-height: 1.3; }
    #dc .dc-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
    #dc .dc-band { margin: 30px 0 0; padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; border-left: 3px solid var(--cyan); background: rgba(95, 200, 255, 0.08); border-radius: 0 12px 12px 0; }
    #dc .dc-band h2 { margin: 0 0 4px; font-size: 1.15rem; }
    #dc .dc-band p { margin: 0; color: var(--text-muted); font-size: 0.95rem; max-width: 640px; }
    #dc .dc-cta { margin: 30px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; color: var(--text-muted); }
    #dc .dc-certs { margin: 0; padding: 20px; border: 1px solid rgba(80, 140, 255, 0.3); border-radius: 14px; background: rgba(8, 18, 40, 0.66); box-shadow: 0 0 34px rgba(40, 100, 255, 0.08); }
    #dc .dc-certs-head { margin: 0 0 16px; }
    #dc .dc-certs-label { color: var(--text-muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
    #dc .dc-certs-label::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 8px; background: var(--accent-bright); }
    #dc .dc-certs-head h2 { margin: 12px 0 6px; font-size: 1.35rem; }
    #dc .dc-certs-head p { margin: 0; max-width: 760px; color: var(--text-muted); font-size: 0.95rem; }
    #dc .dc-cert-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
    #dc .dc-cert { min-width: 0; padding: 14px; border: 1px solid rgba(80, 140, 255, 0.24); border-radius: 10px; background: rgba(10, 22, 48, 0.7); }
    #dc .dc-cert-badge { display: flex; align-items: center; gap: 12px; min-width: 0; }
    #dc .dc-cert-badge .ic { flex: 0 0 auto; width: 30px; height: 30px; color: var(--accent-bright); }
    #dc .dc-cert-badge strong { display: block; color: #fff; font-size: 1.05rem; line-height: 1.25; }
    #dc .dc-cert-badge > span { display: block; color: var(--text-muted); font-size: 0.78rem; line-height: 1.3; }
    #dc .dc-cert p { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(80, 140, 255, 0.16); color: var(--text-muted); font-size: 0.9rem; line-height: 1.45; }
    #dc .dc-certs-note { margin: 14px 0 0; color: var(--text-muted); font-size: 0.85rem; font-style: italic; }
    @media (min-width: 600px) {
      #dc .dc-cert-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1100px) {
      #dc .dc-cert-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (min-width: 900px) {
      #dc .dc-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; }
      #dc .dc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1100px) {
      #dc .dc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    #dc .dc-law25 { margin: 34px 0 0; }
    #dc .dc-block-intro { margin: 0 0 14px; max-width: 760px; color: var(--text-muted); font-size: 0.95rem; }
    #dc .dc-colo-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
    #dc .dc-colo-item { min-width: 0; padding: 16px 18px; border: 1px solid var(--border); border-left: 3px solid var(--accent-bright); border-radius: 10px; background: rgba(14, 26, 50, 0.85); }
    #dc .dc-colo-item h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.3; }
    #dc .dc-colo-item p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
    #dc .dc-faq { margin: 34px 0 0; }
    @media (min-width: 600px) {
      #dc .dc-colo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1100px) {
      #dc .dc-colo-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    /* @@IA:dc:css:end@@ */

    /* @@IA:iamkt:css:start@@ */
    #iamkt .ia-wrap { max-width: 1100px; }
    #iamkt .iamkt-head { margin: 18px 0 28px; }
    #iamkt .iamkt-eyebrow { color: var(--accent-bright); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }
    #iamkt .iamkt-head h1 { margin: 8px 0 10px; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; }
    #iamkt .iamkt-lead { margin: 0; max-width: 800px; color: var(--text-muted); font-size: 1.05rem; }
    #iamkt .iamkt-pills { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
    #iamkt .iamkt-pills li { padding: 6px 12px; border: 1px solid rgba(95, 200, 255, 0.35); border-radius: 999px; background: rgba(95, 200, 255, 0.08); color: var(--text); font-size: 0.85rem; }
    #iamkt .iamkt-block { margin: 34px 0 0; }
    #iamkt .iamkt-block > h2 { margin: 0 0 8px; font-size: 1.35rem; }
    #iamkt .iamkt-intro { margin: 0 0 16px; color: var(--text-muted); max-width: 760px; }
    #iamkt .iamkt-grid { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); counter-reset: iamkt; }
    #iamkt .iamkt-card { counter-increment: iamkt; position: relative; padding: 18px 20px 18px 64px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); }
    #iamkt .iamkt-card::before { content: counter(iamkt, decimal-leading-zero); position: absolute; left: 20px; top: 18px; color: var(--accent-bright); font-weight: 700; }
    #iamkt .iamkt-card h3 { margin: 0 0 6px; font-size: 1.1rem; line-height: 1.3; }
    #iamkt .iamkt-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
    #iamkt .iamkt-card .iamkt-row { margin-top: 10px; font-size: 0.9rem; }
    #iamkt .iamkt-row strong { display: block; color: var(--cyan); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; }
    #iamkt .iamkt-row--hdce { padding-top: 10px; border-top: 1px solid var(--border); }
    #iamkt .iamkt-row--hdce strong { color: var(--accent-bright); }
    #iamkt .iamkt-steps { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: iamktstep; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
    #iamkt .iamkt-steps li { counter-increment: iamktstep; position: relative; padding: 14px 18px 14px 60px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); color: var(--text-muted); font-size: 0.95rem; }
    #iamkt .iamkt-steps li::before { content: counter(iamktstep); position: absolute; left: 18px; top: 13px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--accent-bright); color: var(--accent-bright); font-weight: 700; display: grid; place-items: center; font-size: 0.9rem; }
    #iamkt .iamkt-steps strong { display: block; color: var(--text); margin-bottom: 2px; }
    #iamkt .iamkt-band { margin: 30px 0 0; padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; border-left: 3px solid var(--cyan); background: rgba(95, 200, 255, 0.08); border-radius: 0 12px 12px 0; }
    #iamkt .iamkt-band h2 { margin: 0 0 4px; font-size: 1.15rem; }
    #iamkt .iamkt-band p { margin: 0; color: var(--text-muted); font-size: 0.95rem; max-width: 640px; }
    #iamkt .iamkt-link { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); font-weight: 600; text-decoration: none; }
    #iamkt .iamkt-link .ic { width: 18px; height: 18px; transition: transform 0.2s ease; }
    #iamkt .iamkt-link:hover, #iamkt .iamkt-link:focus-visible { color: #fff; }
    #iamkt .iamkt-link:hover .ic, #iamkt .iamkt-link:focus-visible .ic { transform: translateX(3px); }
    #iamkt .iamkt-cta { margin: 30px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; color: var(--text-muted); }
    @media (min-width: 900px) {
      #iamkt .iamkt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #iamkt .iamkt-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
      #iamkt .iamkt-card:last-child:nth-child(odd) > p:not(.iamkt-row) { max-width: 760px; }
    }
    @media (min-width: 1100px) {
      #iamkt .iamkt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      #iamkt .iamkt-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
      #iamkt .iamkt-steps li { padding: 54px 16px 16px; }
      #iamkt .iamkt-steps li::before { left: 16px; top: 16px; }
    }
    #iamkt .iamkt-cap { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
    #iamkt .iamkt-cap-item { padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); }
    #iamkt .iamkt-cap-item--key { border-color: rgba(232, 87, 74, 0.55); background: rgba(192, 57, 43, 0.12); }
    #iamkt .iamkt-cap-item h3 { margin: 0 0 6px; font-size: 1.05rem; }
    #iamkt .iamkt-cap-item p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
    #iamkt .iamkt-note { margin: 16px 0 0; padding: 14px 18px; border-left: 3px solid var(--cyan); background: rgba(95, 200, 255, 0.08); border-radius: 0 10px 10px 0; color: var(--text-muted); }
    #iamkt .iamkt-note strong { color: var(--text); }
    @media (min-width: 900px) {
      #iamkt .iamkt-cap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #iamkt .iamkt-cap-item--key { grid-column: 1 / -1; }
    }
    #iamkt .iamkt-faq { margin: 34px 0 30px; }
    /* @@IA:iamkt:css:end@@ */

    /* @@IA:iaprod:css:start@@ */
    #iaprod .ia-wrap { max-width: 1100px; }
    #iaprod .iaprod-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; margin: 18px 0 8px; }
    #iaprod .iaprod-eyebrow { color: var(--accent-bright); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }
    #iaprod .iaprod-hero h1 { margin: 8px 0 12px; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; }
    #iaprod .iaprod-lead { margin: 0; max-width: 640px; color: var(--text-muted); font-size: 1.05rem; }
    #iaprod .iaprod-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
    #iaprod .iaprod-media { margin: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #050b18; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
    #iaprod .iaprod-media img { display: block; width: 100%; height: auto; }
    #iaprod .iaprod-section { margin: 44px 0 0; }
    #iaprod .iaprod-section > h2 { margin: 0 0 8px; font-size: 1.35rem; }
    #iaprod .iaprod-intro { margin: 0 0 16px; max-width: 760px; color: var(--text-muted); }
    #iaprod .iaprod-grid { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
    #iaprod .iaprod-card { padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); }
    #iaprod .iaprod-card h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.3; }
    #iaprod .iaprod-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
    #iaprod .iaprod-steps { margin: 0; padding: 0; list-style: none; counter-reset: iaprod-step; display: grid; gap: 10px; }
    #iaprod .iaprod-steps li { counter-increment: iaprod-step; position: relative; padding: 14px 18px 14px 60px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); color: var(--text-muted); }
    #iaprod .iaprod-steps li::before { content: counter(iaprod-step); position: absolute; left: 18px; top: 13px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--accent-bright); color: var(--accent-bright); font-weight: 700; display: grid; place-items: center; font-size: 0.9rem; }
    #iaprod .iaprod-steps strong { display: block; color: var(--text); margin-bottom: 2px; }
    #iaprod .iaprod-form-panel { margin: 48px 0 8px; padding: 24px clamp(16px, 4vw, 36px) 28px; border: 1px solid rgba(120, 160, 220, 0.24); border-radius: 16px; background: linear-gradient(180deg, rgba(16, 30, 58, 0.95), rgba(10, 20, 40, 0.95)); scroll-margin-top: 96px; }
    #iaprod .iaprod-form-panel > h2 { margin: 0 0 6px; font-size: 1.45rem; }
    #iaprod .iaprod-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 18px; margin: 18px 0 0; }
    #iaprod .iaprod-field { min-width: 0; margin: 0; padding: 0; border: 0; }
    #iaprod .iaprod-field--full { grid-column: 1 / -1; }
    #iaprod .iaprod-label { display: block; margin: 0 0 6px; padding: 0; color: var(--text); font-size: 0.92rem; font-weight: 600; }
    #iaprod .iaprod-req { color: var(--accent-bright); }
    #iaprod .iaprod-opt { color: var(--text-muted); font-weight: 400; }
    #iaprod .iaprod-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(120, 160, 220, 0.3); border-radius: 10px; background: rgba(5, 11, 24, 0.7); color: #fff; font: inherit; font-size: 1rem; }
    #iaprod textarea.iaprod-input { min-height: 140px; resize: vertical; line-height: 1.5; }
    #iaprod select.iaprod-input option { background: #0a1428; color: #fff; }
    #iaprod .iaprod-input::placeholder { color: rgba(154, 171, 198, 0.7); }
    #iaprod .iaprod-input:focus { border-color: var(--accent-bright); outline: none; box-shadow: 0 0 0 3px rgba(232, 87, 74, 0.25); }
    #iaprod .iaprod-input[aria-invalid="true"] { border-color: #ff9a8f; }
    #iaprod .iaprod-err { margin: 6px 0 0; color: #ff9a8f; font-size: 0.88rem; }
    #iaprod .iaprod-choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
    #iaprod .iaprod-choice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(5, 11, 24, 0.5); color: var(--text-muted); cursor: pointer; line-height: 1.35; }
    #iaprod .iaprod-choice input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent-bright); }
    #iaprod .iaprod-choice:has(input:checked) { border-color: rgba(232, 87, 74, 0.65); color: #fff; }
    #iaprod .iaprod-choice:focus-within { border-color: var(--accent-bright); box-shadow: 0 0 0 3px rgba(232, 87, 74, 0.25); }
    #iaprod .iaprod-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 22px 0 0; }
    #iaprod .iaprod-note { margin: 0; color: var(--text-muted); font-size: 0.88rem; }
    #iaprod .iaprod-status { margin: 14px 0 0; min-height: 1.4em; color: #8fe3b0; font-size: 0.95rem; }
    #iaprod .iaprod-status.is-error { color: #ff9a8f; }
    @media (min-width: 720px) {
      #iaprod .iaprod-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #iaprod .iaprod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1000px) {
      #iaprod .iaprod-grid:has(> li:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (min-width: 960px) {
      #iaprod .iaprod-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; }
    }

    /* ---------- Financement / sections detaillees ---------- */
    #iaprod .iaprod-fin { padding: 26px clamp(16px, 4vw, 34px) 30px; border: 1px solid rgba(232, 87, 74, 0.35); border-radius: 16px; background: linear-gradient(180deg, rgba(16, 30, 58, 0.7), rgba(10, 20, 40, 0.7)); }
    #iaprod .iaprod-fin > .iaprod-eyebrow { display: block; margin: 0 0 4px; }
    #iaprod .iaprod-tag { display: inline-block; margin: 0 0 8px; color: var(--accent-bright); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
    #iaprod .iaprod-note { margin: 16px 0 0; max-width: 900px; padding: 14px 18px; border: 1px solid var(--border); border-left: 3px solid var(--accent-bright); border-radius: 10px; background: rgba(5, 11, 24, 0.55); color: var(--text-muted); font-size: 0.95rem; }
    #iaprod .iaprod-note strong { color: var(--text); }
    #iaprod .iaprod-sub { margin: 32px 0 6px; font-size: 1.15rem; line-height: 1.3; }
    #iaprod .iaprod-sub-note { margin: 0 0 14px; color: var(--text-muted); font-size: 0.92rem; font-style: italic; }
    #iaprod .iaprod-steps--detail li > p { margin: 6px 0 0; }
    #iaprod .iaprod-steps .iaprod-out { color: var(--text); font-size: 0.93rem; }
    #iaprod .iaprod-steps .iaprod-out span { color: var(--accent-bright); font-weight: 600; }
    #iaprod .iaprod-faq { display: grid; gap: 10px; }
    #iaprod .iaprod-faq details { border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); }
    #iaprod .iaprod-faq details[open] { border-color: rgba(232, 87, 74, 0.45); }
    #iaprod .iaprod-faq summary { position: relative; padding: 14px 52px 14px 18px; color: var(--text); font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; border-radius: 12px; }
    #iaprod .iaprod-faq summary::-webkit-details-marker { display: none; }
    #iaprod .iaprod-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--accent-bright); font-size: 1.4rem; font-weight: 400; line-height: 1; }
    #iaprod .iaprod-faq details[open] summary::after { content: "\2212"; }
    #iaprod .iaprod-faq summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
    #iaprod .iaprod-faq details p { margin: 0; padding: 0 18px 16px; color: var(--text-muted); }
    #iaprod .iaprod-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
    /* @@IA:iaprod:css:end@@ */

    /* @@IA:startup:css:start@@ */
    #startup .ia-wrap { max-width: 1100px; }
    #startup .startup-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; margin: 18px 0 8px; }
    #startup .startup-eyebrow { color: var(--accent-bright); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }
    #startup .startup-hero h1 { margin: 8px 0 12px; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; }
    #startup .startup-lead { margin: 0; max-width: 640px; color: var(--text-muted); font-size: 1.05rem; }
    #startup .startup-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
    #startup .startup-media { margin: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #050b18; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
    #startup .startup-media img { display: block; width: 100%; height: auto; }
    #startup .startup-section { margin: 44px 0 0; }
    #startup .startup-section > h2 { margin: 0 0 8px; font-size: 1.35rem; }
    #startup .startup-intro { margin: 0 0 16px; max-width: 760px; color: var(--text-muted); }
    #startup .startup-grid { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
    #startup .startup-card { padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); }
    #startup .startup-card h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.3; }
    #startup .startup-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
    #startup .startup-steps { margin: 0; padding: 0; list-style: none; counter-reset: startup-step; display: grid; gap: 10px; }
    #startup .startup-steps li { counter-increment: startup-step; position: relative; padding: 14px 18px 14px 60px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); color: var(--text-muted); }
    #startup .startup-steps li::before { content: counter(startup-step); position: absolute; left: 18px; top: 13px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--accent-bright); color: var(--accent-bright); font-weight: 700; display: grid; place-items: center; font-size: 0.9rem; }
    #startup .startup-steps strong { display: block; color: var(--text); margin-bottom: 2px; }
    #startup .startup-form-panel { margin: 48px 0 8px; padding: 24px clamp(16px, 4vw, 36px) 28px; border: 1px solid rgba(120, 160, 220, 0.24); border-radius: 16px; background: linear-gradient(180deg, rgba(16, 30, 58, 0.95), rgba(10, 20, 40, 0.95)); scroll-margin-top: 96px; }
    #startup .startup-form-panel > h2 { margin: 0 0 6px; font-size: 1.45rem; }
    #startup .startup-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 18px; margin: 18px 0 0; }
    #startup .startup-field { min-width: 0; margin: 0; padding: 0; border: 0; }
    #startup .startup-field--full { grid-column: 1 / -1; }
    #startup .startup-label { display: block; margin: 0 0 6px; padding: 0; color: var(--text); font-size: 0.92rem; font-weight: 600; }
    #startup .startup-req { color: var(--accent-bright); }
    #startup .startup-opt { color: var(--text-muted); font-weight: 400; }
    #startup .startup-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(120, 160, 220, 0.3); border-radius: 10px; background: rgba(5, 11, 24, 0.7); color: #fff; font: inherit; font-size: 1rem; }
    #startup textarea.startup-input { min-height: 140px; resize: vertical; line-height: 1.5; }
    #startup select.startup-input option { background: #0a1428; color: #fff; }
    #startup .startup-input::placeholder { color: rgba(154, 171, 198, 0.7); }
    #startup .startup-input:focus { border-color: var(--accent-bright); outline: none; box-shadow: 0 0 0 3px rgba(232, 87, 74, 0.25); }
    #startup .startup-input[aria-invalid="true"] { border-color: #ff9a8f; }
    #startup .startup-err { margin: 6px 0 0; color: #ff9a8f; font-size: 0.88rem; }
    #startup .startup-choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
    #startup .startup-choice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(5, 11, 24, 0.5); color: var(--text-muted); cursor: pointer; line-height: 1.35; }
    #startup .startup-choice input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent-bright); }
    #startup .startup-choice:has(input:checked) { border-color: rgba(232, 87, 74, 0.65); color: #fff; }
    #startup .startup-choice:focus-within { border-color: var(--accent-bright); box-shadow: 0 0 0 3px rgba(232, 87, 74, 0.25); }
    #startup .startup-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 22px 0 0; }
    #startup .startup-note { margin: 0; color: var(--text-muted); font-size: 0.88rem; }
    #startup .startup-status { margin: 14px 0 0; min-height: 1.4em; color: #8fe3b0; font-size: 0.95rem; }
    #startup .startup-status.is-error { color: #ff9a8f; }
    @media (min-width: 720px) {
      #startup .startup-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #startup .startup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1000px) {
      #startup .startup-grid:has(> li:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (min-width: 960px) {
      #startup .startup-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; }
    }

    /* ---------- Financement (encadre) ---------- */
    #startup .startup-fin { padding: 22px clamp(16px, 4vw, 30px) 24px; border: 1px solid rgba(232, 87, 74, 0.35); border-left-width: 3px; border-radius: 14px; background: rgba(14, 26, 50, 0.7); }
    #startup .startup-fin p { margin: 0 0 12px; max-width: 860px; color: var(--text-muted); }
    #startup .startup-fin ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; max-width: 860px; color: var(--text-muted); }
    #startup .startup-fin strong { color: var(--text); }
    #startup .startup-fin .startup-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }
    /* @@IA:startup:css:end@@ */

    /* @@IA:projet:css:start@@ */
    #projet .ia-wrap { max-width: 1100px; }
    #projet .projet-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; margin: 18px 0 8px; }
    #projet .projet-eyebrow { color: var(--accent-bright); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }
    #projet .projet-hero h1 { margin: 8px 0 12px; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; }
    #projet .projet-lead { margin: 0; max-width: 640px; color: var(--text-muted); font-size: 1.05rem; }
    #projet .projet-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
    #projet .projet-media { margin: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #050b18; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
    #projet .projet-media img { display: block; width: 100%; height: auto; }
    #projet .projet-section { margin: 44px 0 0; }
    #projet .projet-section > h2 { margin: 0 0 8px; font-size: 1.35rem; }
    #projet .projet-intro { margin: 0 0 16px; max-width: 760px; color: var(--text-muted); }
    #projet .projet-grid { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
    #projet .projet-card { padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); }
    #projet .projet-card h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.3; }
    #projet .projet-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
    #projet .projet-steps { margin: 0; padding: 0; list-style: none; counter-reset: projet-step; display: grid; gap: 10px; }
    #projet .projet-steps li { counter-increment: projet-step; position: relative; padding: 14px 18px 14px 60px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); color: var(--text-muted); }
    #projet .projet-steps li::before { content: counter(projet-step); position: absolute; left: 18px; top: 13px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--accent-bright); color: var(--accent-bright); font-weight: 700; display: grid; place-items: center; font-size: 0.9rem; }
    #projet .projet-steps strong { display: block; color: var(--text); margin-bottom: 2px; }
    #projet .projet-form-panel { margin: 48px 0 8px; padding: 24px clamp(16px, 4vw, 36px) 28px; border: 1px solid rgba(120, 160, 220, 0.24); border-radius: 16px; background: linear-gradient(180deg, rgba(16, 30, 58, 0.95), rgba(10, 20, 40, 0.95)); scroll-margin-top: 96px; }
    #projet .projet-form-panel > h2 { margin: 0 0 6px; font-size: 1.45rem; }
    #projet .projet-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 18px; margin: 18px 0 0; }
    #projet .projet-field { min-width: 0; margin: 0; padding: 0; border: 0; }
    #projet .projet-field--full { grid-column: 1 / -1; }
    #projet .projet-label { display: block; margin: 0 0 6px; padding: 0; color: var(--text); font-size: 0.92rem; font-weight: 600; }
    #projet .projet-req { color: var(--accent-bright); }
    #projet .projet-opt { color: var(--text-muted); font-weight: 400; }
    #projet .projet-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(120, 160, 220, 0.3); border-radius: 10px; background: rgba(5, 11, 24, 0.7); color: #fff; font: inherit; font-size: 1rem; }
    #projet textarea.projet-input { min-height: 140px; resize: vertical; line-height: 1.5; }
    #projet select.projet-input option { background: #0a1428; color: #fff; }
    #projet .projet-input::placeholder { color: rgba(154, 171, 198, 0.7); }
    #projet .projet-input:focus { border-color: var(--accent-bright); outline: none; box-shadow: 0 0 0 3px rgba(232, 87, 74, 0.25); }
    #projet .projet-input[aria-invalid="true"] { border-color: #ff9a8f; }
    #projet .projet-err { margin: 6px 0 0; color: #ff9a8f; font-size: 0.88rem; }
    #projet .projet-choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
    #projet .projet-choice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(5, 11, 24, 0.5); color: var(--text-muted); cursor: pointer; line-height: 1.35; }
    #projet .projet-choice input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent-bright); }
    #projet .projet-choice:has(input:checked) { border-color: rgba(232, 87, 74, 0.65); color: #fff; }
    #projet .projet-choice:focus-within { border-color: var(--accent-bright); box-shadow: 0 0 0 3px rgba(232, 87, 74, 0.25); }
    #projet .projet-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 22px 0 0; }
    #projet .projet-note { margin: 0; color: var(--text-muted); font-size: 0.88rem; }
    #projet .projet-status { margin: 14px 0 0; min-height: 1.4em; color: #8fe3b0; font-size: 0.95rem; }
    #projet .projet-status.is-error { color: #ff9a8f; }
    @media (min-width: 720px) {
      #projet .projet-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #projet .projet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1000px) {
      #projet .projet-grid:has(> li:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (min-width: 960px) {
      #projet .projet-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; }
    }

    #projet .projet-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
    #projet .projet-duo-col { padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); }
    #projet .projet-duo-col--us { border-color: rgba(232, 87, 74, 0.4); }
    #projet .projet-duo-col h3 { margin: 0 0 10px; font-size: 1.05rem; }
    #projet .projet-duo-col ul { margin: 0; padding: 0 0 0 18px; color: var(--text-muted); display: grid; gap: 6px; }
    @media (min-width: 760px) {
      #projet .projet-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* ---------- Financement / sections detaillees ---------- */
    #projet .projet-fin { padding: 26px clamp(16px, 4vw, 34px) 30px; border: 1px solid rgba(232, 87, 74, 0.35); border-radius: 16px; background: linear-gradient(180deg, rgba(16, 30, 58, 0.7), rgba(10, 20, 40, 0.7)); }
    #projet .projet-fin > .projet-eyebrow { display: block; margin: 0 0 4px; }
    #projet .projet-tag { display: inline-block; margin: 0 0 8px; color: var(--accent-bright); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
    #projet .projet-note { margin: 16px 0 0; max-width: 900px; padding: 14px 18px; border: 1px solid var(--border); border-left: 3px solid var(--accent-bright); border-radius: 10px; background: rgba(5, 11, 24, 0.55); color: var(--text-muted); font-size: 0.95rem; }
    #projet .projet-note strong { color: var(--text); }
    #projet .projet-sub { margin: 32px 0 6px; font-size: 1.15rem; line-height: 1.3; }
    #projet .projet-sub-note { margin: 0 0 14px; color: var(--text-muted); font-size: 0.92rem; font-style: italic; }
    #projet .projet-steps--detail li > p { margin: 6px 0 0; }
    #projet .projet-steps .projet-out { color: var(--text); font-size: 0.93rem; }
    #projet .projet-steps .projet-out span { color: var(--accent-bright); font-weight: 600; }
    #projet .projet-faq { display: grid; gap: 10px; }
    #projet .projet-faq details { border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); }
    #projet .projet-faq details[open] { border-color: rgba(232, 87, 74, 0.45); }
    #projet .projet-faq summary { position: relative; padding: 14px 52px 14px 18px; color: var(--text); font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; border-radius: 12px; }
    #projet .projet-faq summary::-webkit-details-marker { display: none; }
    #projet .projet-faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--accent-bright); font-size: 1.4rem; font-weight: 400; line-height: 1; }
    #projet .projet-faq details[open] summary::after { content: "\2212"; }
    #projet .projet-faq summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
    #projet .projet-faq details p { margin: 0; padding: 0 18px 16px; color: var(--text-muted); }
    #projet .projet-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
    @media (min-width: 1000px) {
      #projet .projet-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    /* @@IA:projet:css:end@@ */

    /* @@IA:part:css:start@@ */
    #part .ia-wrap { max-width: 1100px; }
    #part .part-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; margin: 18px 0 8px; }
    #part .part-eyebrow { color: var(--accent-bright); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }
    #part .part-hero h1 { margin: 8px 0 12px; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; }
    #part .part-lead { margin: 0; max-width: 640px; color: var(--text-muted); font-size: 1.05rem; }
    #part .part-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
    #part .part-media { margin: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #050b18; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
    #part .part-media img { display: block; width: 100%; height: auto; }
    #part .part-section { margin: 44px 0 0; }
    #part .part-section > h2 { margin: 0 0 8px; font-size: 1.35rem; }
    #part .part-intro { margin: 0 0 16px; max-width: 760px; color: var(--text-muted); }
    #part .part-grid { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
    #part .part-card { padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); }
    #part .part-card h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.3; }
    #part .part-card p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
    #part .part-steps { margin: 0; padding: 0; list-style: none; counter-reset: part-step; display: grid; gap: 10px; }
    #part .part-steps li { counter-increment: part-step; position: relative; padding: 14px 18px 14px 60px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); color: var(--text-muted); }
    #part .part-steps li::before { content: counter(part-step); position: absolute; left: 18px; top: 13px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--accent-bright); color: var(--accent-bright); font-weight: 700; display: grid; place-items: center; font-size: 0.9rem; }
    #part .part-steps strong { display: block; color: var(--text); margin-bottom: 2px; }
    #part .part-form-panel { margin: 48px 0 8px; padding: 24px clamp(16px, 4vw, 36px) 28px; border: 1px solid rgba(120, 160, 220, 0.24); border-radius: 16px; background: linear-gradient(180deg, rgba(16, 30, 58, 0.95), rgba(10, 20, 40, 0.95)); scroll-margin-top: 96px; }
    #part .part-form-panel > h2 { margin: 0 0 6px; font-size: 1.45rem; }
    #part .part-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 18px; margin: 18px 0 0; }
    #part .part-field { min-width: 0; margin: 0; padding: 0; border: 0; }
    #part .part-field--full { grid-column: 1 / -1; }
    #part .part-label { display: block; margin: 0 0 6px; padding: 0; color: var(--text); font-size: 0.92rem; font-weight: 600; }
    #part .part-req { color: var(--accent-bright); }
    #part .part-opt { color: var(--text-muted); font-weight: 400; }
    #part .part-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(120, 160, 220, 0.3); border-radius: 10px; background: rgba(5, 11, 24, 0.7); color: #fff; font: inherit; font-size: 1rem; }
    #part textarea.part-input { min-height: 140px; resize: vertical; line-height: 1.5; }
    #part select.part-input option { background: #0a1428; color: #fff; }
    #part .part-input::placeholder { color: rgba(154, 171, 198, 0.7); }
    #part .part-input:focus { border-color: var(--accent-bright); outline: none; box-shadow: 0 0 0 3px rgba(232, 87, 74, 0.25); }
    #part .part-input[aria-invalid="true"] { border-color: #ff9a8f; }
    #part .part-err { margin: 6px 0 0; color: #ff9a8f; font-size: 0.88rem; }
    #part .part-choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
    #part .part-choice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(5, 11, 24, 0.5); color: var(--text-muted); cursor: pointer; line-height: 1.35; }
    #part .part-choice input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent-bright); }
    #part .part-choice:has(input:checked) { border-color: rgba(232, 87, 74, 0.65); color: #fff; }
    #part .part-choice:focus-within { border-color: var(--accent-bright); box-shadow: 0 0 0 3px rgba(232, 87, 74, 0.25); }
    #part .part-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 22px 0 0; }
    #part .part-note { margin: 0; color: var(--text-muted); font-size: 0.88rem; }
    #part .part-status { margin: 14px 0 0; min-height: 1.4em; color: #8fe3b0; font-size: 0.95rem; }
    #part .part-status.is-error { color: #ff9a8f; }
    @media (min-width: 720px) {
      #part .part-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #part .part-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1000px) {
      #part .part-grid:has(> li:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (min-width: 960px) {
      #part .part-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; }
    }

    #part .part-ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 40px 0 0; }
    #part .part-way { padding: 22px 22px 24px; border: 1px solid var(--border); border-radius: 14px; background: rgba(14, 26, 50, 0.85); }
    #part .part-way--sell { border-color: rgba(232, 87, 74, 0.4); }
    #part .part-way-tag { color: var(--cyan); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
    #part .part-way h2 { margin: 6px 0 10px; font-size: 1.25rem; line-height: 1.3; }
    #part .part-way > p { margin: 0 0 14px; color: var(--text-muted); }
    #part .part-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
    #part .part-list li { position: relative; padding: 0 0 0 18px; color: var(--text-muted); font-size: 0.95rem; }
    #part .part-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); }
    #part .part-list strong { color: var(--text); }
    @media (min-width: 860px) {
      #part .part-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    /* @@IA:part:css:end@@ */

    /* @@IA:plan:css:start@@ */
    #plan .ia-wrap { max-width: 1100px; }
    #plan .plan-head { margin: 18px 0 24px; }
    #plan .plan-eyebrow { color: var(--accent-bright); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }
    #plan .plan-head h1 { margin: 8px 0 10px; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; }
    #plan .plan-head p { margin: 0; max-width: 820px; color: var(--text-muted); }
    #plan .plan-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin: 0 0 8px; }
    #plan .plan-block { min-width: 0; padding: 18px 20px 20px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); }
    #plan .plan-block h2 { margin: 0 0 4px; font-size: 1.2rem; line-height: 1.3; }
    #plan .plan-desc { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
    #plan .plan-hub { color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(95, 200, 255, 0.45); }
    #plan .plan-hub:hover, #plan .plan-hub:focus-visible { color: #fff; border-bottom-color: var(--cyan); }
    #plan .plan-list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
    #plan .plan-list .plan-list { margin: 10px 0 0 6px; padding-left: 16px; border-left: 1px solid rgba(120, 170, 230, 0.22); }
    #plan .plan-list > li { display: grid; gap: 2px; min-width: 0; }
    #plan .plan-list a { justify-self: start; color: var(--cyan); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
    #plan .plan-list a:hover, #plan .plan-list a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
    #plan .plan-list span { color: var(--text-muted); font-size: 0.92rem; line-height: 1.45; }
    #plan .plan-list .plan-label { color: var(--text); font-weight: 600; font-size: 0.95rem; }
    #plan .plan-block--contact .btn { margin-top: 14px; }
    @media (min-width: 900px) {
      #plan .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
      #plan .plan-block:first-child { grid-column: 1 / -1; }
    }
    /* @@IA:plan:css:end@@ */

    /* @@IA:terms:css:start@@ */
    #terms .ia-wrap { max-width: 1180px; }
    #terms .terms-head { margin: 18px 0 26px; max-width: 860px; }
    #terms .terms-eyebrow { color: var(--accent-bright); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }
    #terms .terms-head h1 { margin: 8px 0 10px; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; }
    #terms .terms-head p { margin: 0; color: var(--text-muted); }
    #terms .terms-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
    #terms .terms-toc { min-width: 0; padding: 16px 18px 18px; border: 1px solid var(--border); border-radius: 12px; background: rgba(10, 20, 40, 0.92); }
    #terms .terms-toc-title { margin: 0 0 10px; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
    #terms .terms-toc-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
    #terms .terms-toc-list a { display: block; padding: 5px 8px; border-radius: 6px; color: var(--text); font-size: 0.82rem; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
    #terms .terms-toc-list a:hover, #terms .terms-toc-list a:focus-visible { color: #fff; background: rgba(95, 200, 255, 0.12); }
    #terms .terms-toc-list a.is-current { color: #fff; background: rgba(95, 200, 255, 0.16); box-shadow: inset 2px 0 0 var(--cyan); }
    #terms .terms-body { min-width: 0; padding: 8px 22px 22px; border: 1px solid var(--border); border-radius: 12px; background: rgba(10, 20, 40, 0.94); }
    #terms .terms-sec { padding: 18px 0 8px; border-bottom: 1px solid rgba(120, 170, 230, 0.16); scroll-margin-top: 96px; }
    #terms .terms-sec h2 { margin: 0 0 14px; font-size: 1.1rem; line-height: 1.35; letter-spacing: 0.02em; color: #fff; }
    #terms .terms-sec h3 { margin: 18px 0 8px; font-size: 1rem; line-height: 1.4; color: var(--text); }
    #terms .terms-sec p, #terms .terms-sec li { color: #d3deee; font-size: 0.98rem; line-height: 1.7; }
    #terms .terms-sec p { margin: 0 0 12px; max-width: 78ch; }
    #terms .terms-sec strong { color: #fff; font-weight: 600; }
    #terms .terms-cl, #terms .terms-alpha > li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 6px; }
    #terms .terms-cl > p, #terms .terms-alpha > li > p { margin: 0 0 12px; }
    #terms .terms-n { color: var(--cyan); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.7; font-size: 0.95rem; }
    #terms .terms-alpha { margin: 0 0 8px 3.4em; padding: 0; list-style: none; }
    #terms .terms-alpha > li { grid-template-columns: 2em minmax(0, 1fr); }
    #terms .terms-ul { margin: 0 0 12px; padding: 0 0 0 1.4em; max-width: 78ch; }
    #terms .terms-ul li { margin: 0 0 4px; padding-left: 4px; }
    #terms .terms-ul li::marker { color: var(--cyan); }
    #terms .terms-label { margin: 14px 0 6px !important; color: var(--text) !important; font-weight: 600; }
    #terms .terms-contact { margin-top: 22px; padding: 18px 20px; border: 1px solid rgba(95, 200, 255, 0.28); border-radius: 12px; background: rgba(14, 26, 50, 0.9); }
    #terms .terms-contact h2 { margin: 0 0 6px; font-size: 1.1rem; }
    #terms .terms-contact p { margin: 0 0 14px; color: var(--text-muted); }
    @media (min-width: 1100px) {
      #terms .terms-layout { grid-template-columns: 290px minmax(0, 1fr); gap: 24px; }
      #terms .terms-toc { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; }
      #terms .terms-body { padding: 8px 34px 28px; }
    }
    @media (max-width: 600px) {
      #terms .terms-body { padding: 4px 14px 16px; }
      #terms .terms-cl { grid-template-columns: minmax(0, 1fr); gap: 0; }
      #terms .terms-alpha { margin-left: 0.6em; }
    }
    /* @@IA:terms:css:end@@ */

    /* @@IA:support:css:start@@ */
    #support .ia-wrap { max-width: 1100px; }
    #support .sup-hero { margin: 18px 0 30px; }
    #support .sup-eyebrow { color: var(--accent-bright); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; }
    #support .sup-hero h1 { margin: 8px 0 10px; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; }
    #support .sup-lead { margin: 0; max-width: 680px; color: var(--text-muted); font-size: 1.05rem; }
    #support .sup-actions { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
    #support .sup-link { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); font-weight: 600; text-decoration: none; white-space: nowrap; }
    #support .sup-link .ic { width: 18px; height: 18px; }
    #support .sup-link:hover, #support .sup-link:focus-visible { color: #fff; }
    #support .sup-block { margin: 34px 0 0; }
    #support .sup-block h2 { margin: 0 0 14px; font-size: 1.35rem; }
    #support .sup-intro { margin: -4px 0 14px; max-width: 760px; color: var(--text-muted); font-size: 0.95rem; }
    #support .sup-cards, #support .sup-tools { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
    #support .sup-card, #support .sup-tool { min-width: 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: rgba(14, 26, 50, 0.85); }
    #support .sup-card--urgent { border-color: rgba(232, 87, 74, 0.5); }
    #support .sup-card-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 10px; background: rgba(232, 87, 74, 0.14); color: var(--accent-bright); }
    #support .sup-card-ic .ic { width: 20px; height: 20px; }
    #support .sup-card h3, #support .sup-tool h3 { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.3; }
    #support .sup-big { display: inline-block; margin: 0 0 6px; color: #fff; font-size: 1.2rem; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
    #support .sup-big:hover, #support .sup-big:focus-visible { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }
    #support .sup-card p, #support .sup-tool p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
    #support .sup-tool { display: flex; flex-direction: column; gap: 0; }
    #support .sup-dl { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 14px; padding: 9px 14px; border: 1px solid rgba(95, 200, 255, 0.45); border-radius: 999px; color: var(--cyan); font-size: 0.92rem; font-weight: 600; text-decoration: none; }
    #support .sup-dl .ic { flex: 0 0 auto; width: 16px; height: 16px; }
    #support .sup-dl:hover, #support .sup-dl:focus-visible { border-color: var(--cyan); background: rgba(95, 200, 255, 0.1); color: #fff; }
    #support .sup-split { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
    #support .sup-panel { min-width: 0; padding: 18px 20px; border-left: 3px solid var(--cyan); border-radius: 0 12px 12px 0; background: rgba(95, 200, 255, 0.08); }
    #support .sup-panel h2 { margin: 0 0 10px; font-size: 1.15rem; }
    #support .sup-checks, #support .sup-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--text-muted); font-size: 0.95rem; }
    #support .sup-checks li { display: flex; gap: 10px; align-items: flex-start; }
    #support .sup-checks .ic { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-bright); }
    #support .sup-links a { color: var(--cyan); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
    #support .sup-links a:hover, #support .sup-links a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
    #support .sup-cta { margin: 30px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; color: var(--text-muted); }
    @media (min-width: 700px) {
      #support .sup-cards, #support .sup-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      #support .sup-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 700px) and (max-width: 899px) {
      #support .sup-big { font-size: 1.05rem; }
    }
    /* @@IA:support:css:end@@ */

    /* @@imgq:start@@ Image quality: never display an illustration much larger than its source pixels.
       Sources are ~320-340 px wide mock-up crops: cap CSS width at ~1.25x source (sharp at DPR 2),
       show them as framed illustrations instead of stretched heroes. */
    #dc .dc-hero-media,
    #iaprod .iaprod-media,
    #startup .startup-media,
    #projet .projet-media,
    #part .part-media { width: 100%; max-width: 396px; justify-self: center; }
    #dc .dc-hero-media { max-width: 376px; }
    @media (max-width: 599px) {
      #dc .dc-hero-media,
      #iaprod .iaprod-media,
      #startup .startup-media,
      #projet .projet-media,
      #part .part-media { max-width: 264px; }
      #dc .dc-hero-media { max-width: 250px; }
    }
    /* IA hub: two choice cards at a size the ~280-315 px sources can carry */
    .iahub-models { max-width: 900px; margin-left: auto; margin-right: auto; }
    /* Self-provisioning racks are portrait (146x216 source): no landscape cover-crop on phones */
    @media (max-width: 479px) {
      .sv-card-media { height: 160px; background: #050b18; }
      .sv-card-media img { object-fit: contain; }
    }
    /* Decorative streaks (186 px source): no cover-crop, small footprint */
    #iadev .iadev-hyb-head::before { width: min(296px, 60%); background-size: contain; background-position: right center; }
    @media (max-width: 599px) {
      #iadev .iadev-hyb-head::before { width: 150px; }
    }
    /* Secure Exchanges laptop (355 px source) */
    #cyse .cyse-laptop { max-width: 436px; margin-left: auto; margin-right: auto; }
    @media (max-width: 599px) {
      #cyse .cyse-laptop { max-width: 290px; }
    }
    /* Canada maps (cut-outs, 237-256 px source) */
    #iaplat .iaplat-map { max-width: 318px; }
    @media (max-width: 599px) {
      #iaplat .iaplat-map { max-width: 212px; }
      #iadev .iadev-map { max-width: 196px; }
    }
    /* @@imgq:end@@ */
  
    /* ---------- Selecteur de langue FR | EN (site/generate.py) ---------- */
    .sh-lang { display: inline-flex; align-items: center; gap: 2px; color: #8ea6c6; font-size: 12px; font-weight: 700;
      letter-spacing: 0.12em; line-height: 1; white-space: nowrap; }
    .sh-lang a, .sh-lang .sh-lang-cur { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px;
      border-radius: 6px; color: inherit; text-decoration: none; }
    .sh-lang .sh-lang-cur { color: #fff; }
    .sh-lang a:hover, .sh-lang a:focus-visible { color: #fff; background: rgba(232, 87, 74, 0.14); }
    .sh-lang-sep { opacity: 0.45; }
    .sh-mobile-extra .sh-lang { justify-content: center; font-size: 14px; }
    .sh-mobile-extra .sh-lang a, .sh-mobile-extra .sh-lang .sh-lang-cur { min-height: 44px; padding: 0 12px; }