/* Rythme vertical : un seul intervalle entre les sections
       (HERO → CE QU'ON CONSTRUIT → COMMENT ÇA MARCHE → DOCUMENTS → CONTACT). */
    :root { --gap-section: 96px; }

    @layer base {

      html,
      body {
        margin: 0;
        padding: 0;
        background-color: #fbf9fa;
      }

      body {
        overscroll-behavior: none;
      }
    }

    .tactile-dot-grid {
      background-image: radial-gradient(rgba(27, 28, 29, 0.13) 1px, transparent 1px);
      background-size: 22px 22px;
    }

    @keyframes led-pulse {

      0%,
      100% {
        opacity: 1;
        box-shadow: 0 0 6px rgba(79, 109, 74, 0.85);
      }

      50% {
        opacity: 0.35;
        box-shadow: 0 0 1px rgba(79, 109, 74, 0.2);
      }
    }

    .animate-led {
      animation: led-pulse 2s infinite ease-in-out;
    }

    .hairline-border {
      border: 1px solid rgba(27, 28, 29, 0.08);
    }

    #hero {
      background: #F4EFE6;
      padding: 48px 0 0;
      color: #121314;
      box-sizing: border-box;
    }

    #hero * {
      box-sizing: border-box;
    }

    #hero .hero-chassis {
      width: 1200px;
      max-width: calc(100% - 40px);
      margin: 0 auto;
      position: relative;
    }

    #hero .hero-tick {
      position: absolute;
      width: 10px;
      height: 10px;
      pointer-events: none;
    }

    #hero .hero-tick::before,
    #hero .hero-tick::after {
      content: "";
      position: absolute;
      background: #121314;
    }

    #hero .hero-tick::before {
      height: 1px;
      width: 10px;
    }

    #hero .hero-tick::after {
      width: 1px;
      height: 10px;
    }

    #hero .hero-tick-tl { top: 0; left: 0; }
    #hero .hero-tick-tl::before { top: 0; left: -10px; }
    #hero .hero-tick-tl::after { top: -10px; left: 0; }

    #hero .hero-tick-tr { top: 0; right: 0; }
    #hero .hero-tick-tr::before { top: 0; right: -10px; }
    #hero .hero-tick-tr::after { top: -10px; right: 0; }

    #hero .hero-tick-bl { bottom: 0; left: 0; }
    #hero .hero-tick-bl::before { bottom: 0; left: -10px; }
    #hero .hero-tick-bl::after { bottom: -10px; left: 0; }

    #hero .hero-tick-br { bottom: 0; right: 0; }
    #hero .hero-tick-br::before { bottom: 0; right: -10px; }
    #hero .hero-tick-br::after { bottom: -10px; right: 0; }

    #hero .hero-identity {
      height: 48px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
    }

    #hero .hero-wordmark {
      justify-self: start;
      font-family: "Space Grotesk", sans-serif;
      font-size: 18px;
      font-weight: 700;
      line-height: 24px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #121314;
      text-decoration: none;
    }

    #hero .hero-tech {
      color: #E59B2C;
    }

    #hero .hero-index,
    #hero .hero-places {
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      font-weight: 700;
      line-height: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #121314;
      margin: 0;
    }

    #hero .hero-index {
      justify-self: center;
    }

    #hero .hero-status {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    #hero .hero-cases {
      height: 28px;
      padding: 0 8px 0 10px;
      border: 1px solid #121314;
      border-radius: 4px;
      background: #121314;
      color: #FAF7F0;
      box-shadow: 2px 2px 0 #121314;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      white-space: nowrap;
      cursor: pointer;
      transition: transform 80ms linear, box-shadow 80ms linear;
    }

    #hero .hero-cases > span {
      margin-left: 8px;
      padding-left: 8px;
      border-left: 1px solid rgba(250, 247, 240, 0.32);
      color: #D63E2A;
      line-height: 1;
      transition: transform 80ms linear;
    }

    #hero .hero-cases:hover {
      transform: translate(-1px, -1px);
      box-shadow: 3px 3px 0 #121314;
    }

    #hero .hero-cases:hover > span {
      transform: translate(1px, -1px);
    }

    #hero .hero-cases:active {
      transform: translate(2px, 2px);
      box-shadow: 0 0 0 #121314;
    }

    #hero .hero-cases:focus-visible {
      outline: 2px solid #D63E2A;
      outline-offset: 2px;
    }

    #hero .hero-mark {
      display: block;
      height: 32px;
      width: auto;
    }

    #hero .hero-flag {
      display: inline-block;
      width: 12px;
      height: 8px;
      margin-right: 5px;
      vertical-align: -1px;
    }

    #hero .hero-rule {
      height: 1px;
      background: #121314;
      border: 0;
      margin: 0;
    }

    #build .hero-rule {
      height: 1px;
      background: #121314;
      border: 0;
      margin: 0;
    }

    #hero .hero-grid {
      margin-top: 40px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }

    #hero .hero-title {
      margin: 0;
      font-family: "Space Grotesk", sans-serif;
      font-size: 40px;
      font-weight: 700;
      line-height: 42px;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      color: #121314;
    }

    #hero .hero-title span {
      display: block;
      white-space: nowrap;
    }

    #hero .hero-turn {
      color: #D63E2A;
    }

    #hero .hero-sub {
      margin: 20px 0 0;
      max-width: 42ch;
      font-family: "Space Grotesk", sans-serif;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: 0;
      color: #5A403C;
    }

    #hero .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    #hero .hero-pill {
      height: 36px;
      padding: 0 16px;
      border-radius: 9999px;
      border: 1px solid #121314;
      box-shadow: 2px 2px 0 #121314;
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      font-weight: 700;
      line-height: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform 80ms linear, box-shadow 80ms linear;
    }

    #hero .hero-pill-primary {
      background: #D63E2A;
      color: #FFFFFF;
    }

    #hero .hero-pill-primary:hover {
      background: #BE3422;
    }

    #hero .hero-pill-secondary {
      background: #FAF7F0;
      color: #121314;
    }

    #hero .hero-pill-secondary:hover {
      background: #EAE3D2;
    }

    #hero .hero-pill:active {
      transform: translate(2px, 2px);
      box-shadow: 0 0 0 #121314;
    }

    #hero .hero-pill:focus-visible,
    #hero .hero-term:focus-visible {
      outline: 2px solid #D63E2A;
      outline-offset: 2px;
    }

    #hero .hero-module {
      background: #FAF7F0;
      border: 1px solid #121314;
      border-radius: 4px;
      box-shadow: 2px 2px 0 #121314;
      overflow: hidden;
    }

    #hero .hero-oled {
      background: #121314;
      padding: 20px 20px 16px;
    }

    #hero .hero-oled-row {
      display: grid;
      grid-template-columns: 3px minmax(0, 1fr);
      column-gap: 12px;
      align-items: stretch;
    }

    #hero .hero-oled-row + .hero-oled-row {
      margin-top: 12px;
    }

    #hero .hero-stepbar {
      width: 3px;
      background: transparent;
    }

    #hero .hero-oled-row.is-emitted .hero-stepbar {
      background: #D63E2A;
    }

    #hero .hero-oled-label {
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      font-weight: 700;
      line-height: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    #hero .hero-oled-row.is-emitted .hero-oled-label {
      color: #D63E2A;
    }

    #hero .hero-oled-row.is-past .hero-oled-label,
    #hero .hero-oled-row.is-past .hero-oled-sentence {
      color: #FAF7F0;
    }

    #hero .hero-oled-row.is-waiting .hero-oled-label {
      color: #A2A09C;
    }

    #hero .hero-oled-sentence {
      margin: 2px 0 0;
      font-family: "Space Grotesk", sans-serif;
      font-size: 18px;
      font-weight: 500;
      line-height: 24px;
      color: #FAF7F0;
    }

    #hero .hero-oled-sentence[hidden] {
      display: none;
    }

    #hero .hero-wait {
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      font-weight: 700;
      line-height: 14px;
      letter-spacing: 0.08em;
      color: #CC8A1E;
    }

    #hero .hero-oled-row.is-waiting .hero-oled-body {
      min-height: 28px;
    }

    #hero .hero-oled-row.is-emitted .hero-oled-body,
    #hero .hero-oled-row.is-past .hero-oled-body {
      min-height: 56px;
    }

    #hero .hero-dock-row {
      position: relative;
      min-height: 40px;
      padding: 8px 20px 8px 20px;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      border-top: 1px solid #CEC6B5;
    }

    #hero .hero-dock-row.is-live::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 3px;
      height: 100%;
      background: #D63E2A;
    }

    #hero .hero-dock-key {
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      font-weight: 700;
      line-height: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #1C3E6E;
    }

    #hero .hero-dock-val {
      font-family: "JetBrains Mono", monospace;
      font-size: 13px;
      font-weight: 500;
      line-height: 18px;
      letter-spacing: 0;
      color: #121314;
      text-align: right;
    }

    #hero .hero-equation {
      margin: 28px 0 0;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 8px 10px;
    }

    #hero .hero-term,
    #hero .hero-plus {
      font-family: "JetBrains Mono", monospace;
      font-size: 12px;
      font-weight: 700;
      line-height: 16px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    #hero .hero-term {
      position: relative;
      margin: 0;
      padding: 0 0 6px;
      border: 0;
      background: transparent;
      color: #121314;
      cursor: pointer;
    }

    #hero .hero-term:hover {
      text-decoration: underline;
      text-decoration-color: #D63E2A;
      text-underline-offset: 4px;
    }

    #hero .hero-term.is-active:hover {
      text-decoration: none;
    }

    #hero .hero-term.is-active::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 8px;
      height: 2px;
      margin-left: -4px;
      background: #D63E2A;
    }

    #hero .hero-plus {
      color: #686764;
      padding-top: 0;
    }

    #hero .hero-equation-note {
      min-height: 16px;
      margin: 4px 0 0;
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      font-weight: 700;
      line-height: 16px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #121314;
    }

    @media (min-width: 1280px) {
      #hero .hero-grid {
        grid-template-columns: 520px minmax(0, 1fr);
        gap: 32px;
      }

      #hero .hero-title {
        font-size: 48px;
        line-height: 46px;
        letter-spacing: -0.03em;
      }
    }

    @media (min-width: 960px) and (max-width: 1279px) {
      #hero .hero-grid {
        grid-template-columns: minmax(280px, 46%) minmax(0, 1fr);
        gap: 32px;
      }
    }

    @media (max-width: 959px) {
      #hero {
        padding: 32px 0 0;
      }

      #hero .hero-chassis {
        width: auto;
        max-width: none;
        margin: 0 20px;
      }

      #hero .hero-identity {
        height: auto;
        min-height: 48px;
        display: grid;
        grid-template-columns: 1fr auto auto;
        grid-template-areas:
          "mark index lamp"
          "places places places";
        row-gap: 4px;
        padding: 8px 0;
      }

      #hero .hero-wordmark { grid-area: mark; justify-self: start; }
      #hero .hero-identity > .hero-index { display: none; }
      #hero .hero-status { display: contents; }
      #hero .hero-places {
        grid-area: places;
        justify-self: start;
      }
      #hero .hero-index-mobile {
        display: inline;
        grid-area: index;
        justify-self: end;
      }

      #hero .hero-mark { height: 22px; }
      #hero .hero-oled {
        padding: 16px;
      }

      #hero .hero-oled-sentence {
        font-size: 16px;
        line-height: 22px;
      }

      #hero .hero-dock-row {
        padding-left: 16px;
        padding-right: 16px;
      }
    }

    @media (min-width: 960px) {
      #hero .hero-index-mobile { display: none; }
    }

    @media (max-width: 359px) {
      #hero .hero-actions {
        flex-direction: column;
        gap: 8px;
      }

      #hero .hero-pill {
        width: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #hero .hero-pill {
        transition: none;
      }

      #hero .hero-pill:active,
      #hero .hero-cases,
      #hero .hero-cases > span,
      #hero .hero-cases:active,
      #hero .hero-cases:hover,
      #hero .hero-cases:hover > span {
        transform: none;
        transition: none;
      }
    }

    /* PIÈCE 01 — démonstrateur : interface système (remplace la maquette de page) */
    #hero .hero-sys {
      background: #FAF7F0;
      color: #121314;
      border: 1px solid #CEC6B5;
      height: 214px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    #hero .hero-sys * { box-sizing: border-box; }

    #hero .hero-sys-bar {
      flex: none;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 12px;
      background: #F4EFE6;
      border-bottom: 1px solid #121314;
    }

    /* le contenu typographique est abstrait : des barres, jamais du texte */
    #hero .hp-bar { display: block; flex: none; height: 3px; border-radius: 1px; background: #121314; }
    #hero .hero-sys-path {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    #hero .hero-sys-path .hp-bar:nth-of-type(1) { width: 26px; }
    #hero .hero-sys-path .hp-bar:nth-of-type(2) { width: 17px; }
    #hero .hero-sys-path .hp-bar:nth-of-type(3) { width: 11px; }

    #hero .hero-sys-led {
      flex: none;
      width: 5px;
      height: 5px;
      margin-right: 2px;
      border-radius: 9999px;
      background: #4F6D4A;
      box-shadow: 0 0 5px rgba(79, 109, 74, 0.95);
    }

    /* ══════════════════════════════════════════════════════════════════════
       LA PLAQUE — le système Hadooken en fonctionnement.
       Une entrée, un bus à deux niveaux, cinq unités de traitement de tailles
       différentes, une grappe de sorties, un registre qui enregistre le débit,
       une passe d'inspection qui marque deux points puis les résout, et une
       réimplantation des mêmes unités : même système, autre architecture.
       Tout est fonction du temps écoulé, sans commande.
       ══════════════════════════════════════════════════════════════════════ */
    #hero .hp { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
    #hero .hp .hero-tick { opacity: 0.4; }
    #hero .hp .hero-tick-tl { top: 12px; left: 12px; }
    #hero .hp .hero-tick-tr { top: 12px; right: 12px; }
    #hero .hp .hero-tick-bl { bottom: 8px; left: 12px; }
    #hero .hp .hero-tick-br { bottom: 8px; right: 12px; }

    /* la règle graduée du bord haut : deux pas de graduation */
    #hero .hp-edge { position: absolute; left: 16px; right: 16px; top: 14px; height: 7px;
      border-top: 1px solid #121314; opacity: 0.45;
      background-image:
        repeating-linear-gradient(90deg, #121314 0 1px, transparent 1px 7px),
        repeating-linear-gradient(90deg, #121314 0 1px, transparent 1px 35px);
      background-repeat: repeat-x, repeat-x;
      background-size: 7px 3px, 35px 6px;
      background-position: 0 1px, 0 1px; }

    /* la prise d'entrée, à gauche, sur l'axe du bus */
    #hero .hp-port { position: absolute; left: 0; width: 14px; background: #121314; }
    #hero .hp-port::after { content: ""; position: absolute; right: -6px; top: 50%;
      width: 6px; height: 1px; background: #121314; }

    /* le câblage : bus, colonne de sortie, canaux des unités */
    #hero .hp-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    #hero .hp-rail, #hero .hp-chan line, #hero .hp-stem {
      stroke: #121314; stroke-width: 1; vector-effect: non-scaling-stroke; }
    #hero .hp-grad { stroke: #121314; stroke-width: 1; opacity: 0.45;
      stroke-dasharray: 1 5; vector-effect: non-scaling-stroke; }
    #hero .hp-rail-b { opacity: 0; transition: opacity 0.9s ease-out; }
    #hero .hp[data-arch="target"] .hp-rail-b { opacity: 1; }
    #hero .hp-chan line { transition: stroke 0.4s ease-out, stroke-width 0.4s ease-out; }
    #hero .hp-chan.is-focus line { stroke: #D63E2A; stroke-width: 1.5; }
    #hero .hp-chan.is-work line:first-child { stroke: #D63E2A; stroke-width: 1.4; }
    #hero .hp-g { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s cubic-bezier(0.3, 0.7, 0.25, 1); }
    #hero .hp-g.is-drawn { clip-path: inset(0 0 0 0); }
    #hero #hp-g-riser { transition-delay: 0.45s; }
    #hero .hp-chan { clip-path: inset(0 0 100% 0); transition: clip-path 0.8s cubic-bezier(0.3, 0.7, 0.25, 1); }
    #hero .hp-chan.is-drawn { clip-path: inset(0 0 0 0); }

    /* les unités de traitement */
    #hero .hp-u { position: absolute; display: flex; align-items: center; justify-content: center;
      background: #F4EFE6; border: 1px solid #121314; border-radius: 2px;
      transition: background-color 0.4s ease-out, border-color 0.4s ease-out, filter 0.4s ease-out; }
    #hero .hp-u:nth-child(1) { left: 15.5%; width: 7.6%; }
    #hero .hp-u:nth-child(2) { left: 29%; width: 5%; }
    #hero .hp-u:nth-child(3) { left: 40.6%; width: 10.2%; }
    #hero .hp-u:nth-child(4) { left: 58.1%; width: 5%; }
    #hero .hp-u:nth-child(5) { left: 70.6%; width: 7.6%; }
    #hero .hp-u::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 3px; height: 2px;
      margin-left: -1.5px; background: #121314; }
    #hero .hp-u.is-work { background: #EAE3D2; }
    #hero .hp-u-lamp { position: absolute; left: 3px; top: 3px; width: 3px; height: 3px;
      border-radius: 50%; background: #C9C1AF; transition: background-color 0.4s ease-out, box-shadow 0.4s ease-out; }
    #hero .hp-u.is-armed .hp-u-lamp { background: #1C3E6E; }
    #hero .hp-u.is-work .hp-u-lamp { background: #D63E2A; box-shadow: 0 0 4px #D63E2A; }
    #hero .hp-u-mark { width: 62%; height: 62%; max-width: 26px; max-height: 22px; overflow: visible; }
    #hero .hp-u-mark * { fill: none; stroke: #121314; stroke-width: 1.6; vector-effect: non-scaling-stroke;
      transition: stroke 0.4s ease-out; }
    #hero .hp-u.is-focus { border-color: #1C3E6E; background: #EAE3D2; }
    #hero .hp-u.is-focus .hp-u-mark * { stroke: #1C3E6E; }
    #hero .hp[data-focus] .hp-u:not(.is-focus) { filter: grayscale(1) contrast(0.72) brightness(1.1); }
    #hero .hp-u { cursor: crosshair; }
    #hero .hp-flow, #hero .hp-marks, #hero .hp-reg, #hero .hp-wire, #hero .hp-sweep,
    #hero .hp-edge, #hero .hp-port, #hero .hp-outs { pointer-events: none; }

    /* la grappe de sorties, en saillie sur le bord droit */
    #hero .hp-o { position: absolute; width: 15px; height: 13px; border: 1px solid #121314;
      border-left: 0; border-radius: 0 2px 2px 0; background: #F4EFE6;
      transition: background-color 0.45s ease-out; }
    #hero .hp-o.is-live { background: #4F6D4A; }

    /* les marques de l'inspection, résolues une fois le point réglé */
    #hero .hp-mark { position: absolute; width: 21px; height: 21px; margin: -10.5px 0 0 -10.5px;
      border: 1px solid #D63E2A; border-radius: 50%; opacity: 0;
      transition: opacity 0.5s ease-out, border-color 0.7s ease-out; }
    #hero .hp-mark::after { content: ""; position: absolute; inset: 6px; background: #D63E2A;
      transition: background-color 0.7s ease-out; }
    #hero .hp-mark.is-in { opacity: 1; }
    #hero .hp-mark.is-done { border-color: #4F6D4A; }
    #hero .hp-mark.is-done::after { background: #4F6D4A; }

    /* les jetons : bleu en attente, encre pendant le traitement, matcha en sortie */
    #hero .hp-tk { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px;
      background: #1C3E6E; transition: background-color 0.35s ease-out; }
    #hero .hp-tk.is-work { background: #121314; }
    #hero .hp-tk.is-done { background: #4F6D4A; }

    /* le balayage d'inspection */
    #hero .hp-sweep { position: absolute; top: 20px; bottom: 26px; width: 1px; background: #D63E2A;
      opacity: 0; transition: opacity 0.4s ease-out; }
    #hero .hp-sweep::before, #hero .hp-sweep::after { content: ""; position: absolute; left: -3px;
      width: 7px; height: 1px; background: #D63E2A; }
    #hero .hp-sweep::before { top: 0; }
    #hero .hp-sweep::after { bottom: 0; }
    #hero .hp-sweep.is-in { opacity: 0.9; }

    /* le registre : ce qui est sorti du système, dans l'ordre */
    #hero .hp-reg { position: absolute; left: 16px; right: 96px; height: 10px; display: flex;
      align-items: flex-end; gap: 3px; }
    #hero .hp-reg i { flex: 1; min-width: 0; height: 100%; background: #E4DDD0;
      transition: background-color 0.45s ease-out; }
    #hero .hp-reg i.is-on { background: #4F6D4A; }
    #hero .hp-reg i.is-live { background: #D63E2A; }
    #hero .hp[data-static="true"] .hp-tk, #hero .hp[data-static="true"] .hp-sweep { display: none; }

    #hero .hero-sys-foot {
      flex: none;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 12px;
    }

    #hero .hero-sys-svcs {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    #hero .hero-sys-svc {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    #hero .hero-sys-svc .hp-bar { height: 2.5px; }
    #hero .hero-sys-svc .hp-bar:nth-of-type(1) { width: 15px; }
    #hero .hero-sys-svc .hp-bar:nth-of-type(2) { width: 9px; }
    #hero .hero-sys-svc .hp-bar:nth-of-type(3) { width: 12px; }

    #hero .hero-sys-svc i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #4F6D4A;
    }

    /* montage : chaque étape révèle une couche */
    @media (prefers-reduced-motion: reduce) {
      #hero .hero-sys,
      #hero .hero-sys * { transition: none !important; }
    }

    @media (min-width: 1280px) {
      #hero .hero-title {
        font-size: 44px;
        line-height: 44px;
      }
    }

    @media (max-width: 959px) {
      #hero .hero-grid { margin-top: 24px; }
      #hero .hero-title {
        font-size: 28px;
        line-height: 30px;
        letter-spacing: -0.03em;
      }
      #hero .hero-sys { height: 184px; }
      #hero .hero-sys-bar { padding: 0 10px; }
      #hero .hero-sys-foot { padding: 0 10px; }
      #hero .hp-reg { left: 10px; right: 62px; }
      #hero .hp-tk { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
    }

    #build {
      background: #F4EFE6;
      color: #121314;
      padding: var(--gap-section) 0 calc(var(--gap-section) / 2);
      border-bottom: 1px solid #121314;
      scroll-margin-top: 80px;
    }

    /* Le panneau contact prend la moitié restante du même intervalle :
       le filet de fin de section tombe exactement au milieu. */
    #contact { padding-top: calc(var(--gap-section) / 2); }

    #build * { box-sizing: border-box; }

    #build .build-chassis {
      width: 1200px;
      max-width: calc(100% - 40px);
      margin: 0 auto;
      position: relative;
    }

    #build .build-kicker {
      margin: 0 0 20px;
      font-family: "Space Grotesk", sans-serif;
      font-size: 22px;
      font-weight: 600;
      line-height: 28px;
      letter-spacing: -0.01em;
      text-transform: uppercase;
      color: #121314;
    }

    #build .build-plate,
    #build .build-module {
      background: #FAF7F0;
      border: 1px solid #121314;
      border-radius: 4px;
      box-shadow: 2px 2px 0 #121314;
    }

    #build .build-row {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
      padding: 16px 20px;
      border-top: 1px solid #CEC6B5;
    }

    #build .build-row:first-child { border-top: 0; }

    #build .build-plate-label {
      margin: 0;
      padding: 13px 20px 10px;
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      font-weight: 700;
      line-height: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #5A403C;
    }

    #build .build-modules { margin-top: var(--gap-section); }

    #build .build-idx {
      font-family: "JetBrains Mono", monospace;
    }

    #build .build-idx {
      padding-top: 4px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: #1C3E6E;
    }

    #build .build-cap-row { grid-template-columns: 36px 320px minmax(0, 1fr); padding: 14px 20px; }

    /* Rangée ouvrante — la famille 01 ouvre son expérience dédiée.
       Mêmes classes, même grille, même typographie : seules l'affordance
       et les états (survol, focus, actif) s'ajoutent à l'existant. */
    #build .build-cap-open {
      position: relative;
      width: 100%;
      margin: 0;
      font: inherit;
      color: inherit;
      text-align: left;
      background: none;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
      transition: background 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    #build .build-cap-open:hover { background: #F4EFE6; }
    #build .build-cap-open:active { background: #EBE4D8; }
    #build .build-cap-open:focus-visible { outline: 2px solid #1C3E6E; outline-offset: -2px; border-radius: 3px; }

    #build .build-cap-go {
      position: absolute;
      right: 20px;
      top: 50%;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      font-weight: 700;
      line-height: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #5A403C;
      white-space: nowrap;
      opacity: 0;
      transform: translateY(-50%) translateX(-4px);
      pointer-events: none;
      transition: opacity 200ms cubic-bezier(0.2, 0.7, 0.2, 1),
                  transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1),
                  color 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    #build .build-cap-go svg { width: 16px; height: 8px; transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1); }

    #build .build-cap-open:hover .build-cap-go,
    #build .build-cap-open:focus-visible .build-cap-go { opacity: 1; transform: translateY(-50%); color: #121314; }
    #build .build-cap-open:hover .build-cap-go svg { transform: translateX(2px); }

    @media (max-width: 959px) {
      /* Sous 960 px la rangée est déjà empilée : l'invite reste visible, dans le flux. */
      #build .build-cap-go {
        position: static;
        grid-column: 2;
        margin-top: 8px;
        opacity: 1;
        transform: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #build .build-cap-open,
      #build .build-cap-go,
      #build .build-cap-go svg { transition: none; }
    }

    #build .build-cap-name {
      margin: 0;
      font-family: "Space Grotesk", sans-serif;
      font-size: 16px;
      font-weight: 700;
      line-height: 22px;
      letter-spacing: 0.01em;
      text-transform: uppercase;
      color: #121314;
    }

    #build .build-cap-desc {
      margin: 0;
      font-family: "JetBrains Mono", monospace;
      font-size: 12px;
      font-weight: 400;
      line-height: 22px;
      letter-spacing: 0.02em;
      color: #5A403C;
    }

    #build .build-bays {
      margin-top: 16px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: start;
    }

    #build .build-head {
      padding: 14px 20px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    #build .build-head h3 {
      margin: 0;
      min-width: 0;
      font-family: "Space Grotesk", sans-serif;
      font-size: 16px;
      font-weight: 700;
      line-height: 20px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: #121314;
    }

    /* Méthodologie — THINK / BUILD / OPERATE.
       Une image par étape, dessinée dans le module (planche inline).
       Encre = structure, bleu = pas encore choisi, vermillon = en cours,
       matcha = en service. Pas d'interrupteur : ce n'est plus une machine. */

    #build .build-module { min-width: 0; }

    #build .meth-fig {
      margin: 0;
      background: #121314;
      padding: 10px 12px;
    }

    #build .meth-fig svg {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 320 / 168;
    }

    #build .meth-line {
      margin: 0;
      padding: 14px 20px 16px;
      min-height: 74px;
      display: flex;
      align-items: center;
      font-family: "Space Grotesk", sans-serif;
      font-size: 15px;
      font-weight: 500;
      line-height: 22px;
      letter-spacing: -0.01em;
      text-wrap: pretty;
      color: #5A403C;
    }

    @media (min-width: 1024px) {
      #build .build-bays {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 959px) {
      :root { --gap-section: 64px; }
      #build { padding: var(--gap-section) 0 calc(var(--gap-section) / 2); }
      #build .build-chassis {
        width: auto;
        max-width: none;
        margin: 0 20px;
      }
      #build .build-row {
        grid-template-columns: 28px minmax(0, 1fr);
        padding: 12px 16px;
      }
      #build .build-cap-name,
      #build .build-cap-desc { grid-column: 2; }
      #build .build-cap-desc { margin-top: 4px; line-height: 18px; }
      #build .build-plate-label,
      #build .build-head,
      #build .meth-line { padding-left: 16px; padding-right: 16px; }
      #build .meth-fig { padding: 8px 10px; }
    }

    /* Jetons des modules d'expérience — déclarés ici, une fois pour toutes,
       hors des sections de chaque famille : encre = structure, bleu = attente,
       vermillon = actif, matcha = terminé ; plate/filet/sunk pour les fonds et
       les filets. Chaque module les hérite. */
    #exp {
      --ex-ink: #121314;
      --ex-bone: #FAF7F0;
      --ex-plate: #F4EFE6;
      --ex-filet: #CEC6B5;
      --ex-track: #E4DED0;
      --ex-sunk: #EAE3D2;
      --ex-blue: #1C3E6E;
      --ex-verm: #D63E2A;
      --ex-matcha: #4F6D4A;
      --ex-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    /* ══════════════════════════════════════════════════════════════════════
       SOCLE D'EXPÉRIENCE (#exp) + module de la famille PRODUITS WEB
       Portée stricte : rien hors de #exp n'est touché.
       ══════════════════════════════════════════════════════════════════════ */

    #exp {
      --x-ink: #121314;
      --x-bone: #FAF7F0;
      --x-plate: #F4EFE6;
      --x-filet: #CEC6B5;
      --x-verm: #D63E2A;
      --x-navy: #1C3E6E;
      --x-2nd: #5A403C;
      --x-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

      position: fixed;
      inset: 0;
      z-index: 90;
      display: flex;
      flex-direction: column;
      background: var(--x-plate);
      opacity: 0;
      visibility: hidden;
      transition: opacity 280ms var(--x-ease), visibility 0s linear 280ms;
    }

    #exp.is-open { opacity: 1; visibility: visible; transition: opacity 280ms var(--x-ease); }
    #exp [hidden] { display: none !important; }

    /* ————— barre de cadre : le langage industriel Hadooken ————— */

    .exp-chrome {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px clamp(16px, 4vw, 48px);
      background: var(--x-bone);
      border-bottom: 1px solid var(--x-ink);
    }

    .exp-chrome-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

    .exp-chrome-led {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--x-verm);
      box-shadow: 0 0 0 3px rgba(214, 62, 42, 0.16);
    }

    .exp-chrome-kicker,
    .exp-chrome-title,
    .exp-close {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      font-weight: 700;
      line-height: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .exp-chrome-kicker { color: var(--x-2nd); }
    .exp-chrome-slash { color: var(--x-filet); }
    .exp-chrome-title { margin: 0; color: var(--x-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .exp-chrome-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

    .exp-chrome-mark {
      display: block;
      width: auto;
      height: 24px;
      flex: 0 0 auto;
    }

    .exp-close {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      color: var(--x-bone);
      background: var(--x-ink);
      border: 1px solid var(--x-ink);
      border-radius: 3px;
      cursor: pointer;
      transition: background 160ms var(--x-ease), transform 160ms var(--x-ease);
    }

    .exp-close:hover { background: var(--x-verm); border-color: var(--x-verm); }
    .exp-close:active { transform: translateY(1px); }
    .exp-close-key { font: inherit; color: inherit; opacity: 0.62; }

    .exp-stage {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: #C6BCA6 transparent;
    }

    .exp-stage::-webkit-scrollbar { width: 10px; display: block; }
    .exp-stage::-webkit-scrollbar-thumb { background: #C6BCA6; border: 3px solid var(--x-plate); border-radius: 999px; }

    /* le contenu d'une famille occupe la hauteur de la couche : le module peut
       ainsi se centrer verticalement et, au-delà, c'est la couche qui défile. */
    .exp-content {
      display: flex;
      flex-direction: column;
      flex: 1 0 auto;
    }

    /* ————— « En bref » : texte accessible de chaque famille ————————————————
       Bandeau au pied de la couche. Sa hauteur est mesurée par le script et
       exposée en --exp-brief-h : les cadres des expériences la retranchent de
       leur hauteur, pour que rien ne passe sous le bandeau. */
    .exp-brief {
      flex: 0 0 auto;
      background: var(--x-bone);
      border-top: 1px solid var(--x-ink);
      color: var(--x-ink);
    }
    .exp-brief-sum {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      max-width: 1240px;
      margin: 0 auto;
      padding: 8px clamp(14px, 2.4vw, 32px);
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      font-weight: 700;
      line-height: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--x-2nd);
      cursor: pointer;
      list-style: none;
    }
    .exp-brief-sum::-webkit-details-marker { display: none; }
    .exp-brief-sum:focus-visible { outline: 2px solid var(--x-navy); outline-offset: -2px; }
    .exp-brief-chev {
      width: 8px;
      height: 8px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translate(-2px, -2px);
      transition: transform 160ms var(--x-ease);
    }
    .exp-brief[open] .exp-brief-chev { transform: rotate(-135deg) translate(-2px, -2px); }
    .exp-brief-inner {
      display: flex;
      align-items: flex-start;
      gap: 24px;
      max-width: 1240px;
      margin: 0 auto;
      padding: 2px clamp(14px, 2.4vw, 32px) 16px;
    }
    .exp-brief-list { flex: 1 1 auto; min-width: 0; margin: 0; }
    .exp-brief-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .exp-brief-body dt {
      margin: 0 0 4px;
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      font-weight: 700;
      line-height: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--x-2nd);
    }
    .exp-brief-body { margin: 0; }
    .exp-brief-body dd { margin: 0; font-size: 14px; line-height: 20px; color: var(--x-ink); }
    .exp-brief-cta {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: 2px;
      padding: 9px 14px;
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      font-weight: 700;
      line-height: 16px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
      text-decoration: none;
      color: var(--x-bone);
      background: var(--x-ink);
      border: 1px solid var(--x-ink);
      border-radius: 3px;
      transition: background 180ms var(--x-ease), border-color 180ms var(--x-ease);
    }
    .exp-brief-cta svg { width: 16px; height: 8px; transition: transform 180ms var(--x-ease); }
    .exp-brief-cta:hover { background: var(--x-verm); border-color: var(--x-verm); }
    .exp-brief-cta:hover svg { transform: translateX(2px); }
    .exp-brief-cta:focus-visible { outline: 2px solid var(--x-navy); outline-offset: 2px; }

    @media (max-width: 900px) {
      .exp-brief-body { grid-template-columns: 1fr; gap: 10px; }
      .exp-brief-inner { flex-direction: column; gap: 14px; }
      .exp-brief-cta { align-self: stretch; justify-content: center; }
    }
    @media (max-width: 760px) {
      .exp-brief { max-height: 60dvh; overflow-y: auto; }
    }
    @media (prefers-reduced-motion: reduce) {
      .exp-brief-chev, .exp-brief-cta, .exp-brief-cta svg { transition: none; }
    }

    /* aucun cycle ne tourne pendant que l'expérience est fermée */
    #exp:not(.is-open) *,
    #exp:not(.is-open) *::before,
    #exp:not(.is-open) *::after { animation-play-state: paused !important; }

    /* ══════════════════════════════════════════════════════════════════════
       EXPÉRIENCE « PRODUITS WEB » — on VISITE un site.
       Une seule page verticale, défilée lentement : navigation collante,
       grandes compositions graphiques, beaucoup d'espace négatif, presque
       aucun texte. Les « images » sont des compositions construites avec les
       motifs du projet (matière, perforation, stries, halftone, radial,
       orbite) : elles tiennent lieu de photographies, pas d'illustrations.
       Rien ici ne s'utilise : rien n'est réglable. C'est la différence avec
       « OUTILS MÉTIER », où l'on travaille.
       ══════════════════════════════════════════════════════════════════════ */

    .ex {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1 0 auto;
      padding: clamp(14px, 2.4vw, 32px);
    }

    .ex-frame {
      display: flex;
      width: 100%;
      max-width: 1240px;
      height: clamp(468px, calc(100dvh - 176px - var(--exp-brief-h, 0px)), 900px);
      padding: clamp(8px, 1vw, 14px);
      background: var(--ex-ink);
    }

    .ex-window {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
      min-height: 0;
      background: var(--ex-bone);
      border: 1px solid var(--ex-filet);
      overflow: hidden;
    }

    .ex-btn,
    .mt-btn,
    .dp-btn,
    .ag-btn,
    .sm-btn,
    .ca-btn {
      appearance: none;
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      font: inherit;
      color: inherit;
      cursor: pointer;
      transition: background-color 320ms linear, border-color 320ms linear, outline-color 200ms linear, opacity 320ms linear;
    }
    .ex-btn:focus-visible,
    .mt-btn:focus-visible,
    .dp-btn:focus-visible,
    .ag-btn:focus-visible,
    .sm-btn:focus-visible,
    .ca-btn:focus-visible { outline: 2px solid var(--ex-blue); outline-offset: 1px; }
    .ex-btn:disabled,
    .mt-btn:disabled,
    .dp-btn:disabled,
    .ag-btn:disabled,
    .sm-btn:disabled,
    .ca-btn:disabled { cursor: default; }

    /* ————— le site : une page, un défilement ————— */

    .pw-site {
      position: relative;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      background: var(--ex-bone);
      scrollbar-width: none;
      --pw-vh: 480px;   /* hauteur utile, mesurée par le script */
    }
    .pw-site::-webkit-scrollbar { width: 0; height: 0; }
    .pw-page { display: flex; flex-direction: column; }

    /* navigation collante : discrète, elle ne bouge pas pendant le défilement */
    .pw-nav {
      position: sticky;
      top: 0;
      z-index: 4;
      display: flex;
      align-items: center;
      gap: clamp(12px, 2vw, 26px);
      min-height: 46px;
      padding: 0 clamp(14px, 1.8vw, 26px);
      background: rgba(250, 247, 240, 0.95);
      border-bottom: 1px solid var(--ex-filet);
    }
    .pw-logo { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
    .pw-logo > span { width: 18px; height: 18px; background: var(--ex-ink); }
    .pw-logo::after { content: ""; width: 7px; height: 7px; background: var(--ex-verm); }
    .pw-nav-items { display: flex; align-items: center; gap: clamp(8px, 1.2vw, 16px); flex: 1; }
    .pw-nav-items > span { display: block; width: clamp(30px, 4vw, 52px); height: 6px; background: var(--ex-filet); }
    .pw-nav-items > span:first-child { width: clamp(38px, 5vw, 64px); background: var(--ex-ink); opacity: 0.82; }
    .pw-nav-end { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
    .pw-nav-dot { width: 9px; height: 9px; border: 1px solid var(--ex-ink); border-radius: 9999px; }
    .pw-nav-pill { width: clamp(52px, 7vw, 78px); height: 22px; background: var(--ex-verm); }

    /* sections : de très grandes respirations */
    .pw-sec { position: relative; display: flex; }
    .pw-hero {
      min-height: var(--pw-vh);
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
      align-items: center;
      gap: clamp(20px, 3.6vw, 56px);
      padding: clamp(24px, 3.4vw, 52px) clamp(18px, 3vw, 46px);
    }
    .pw-band { min-height: calc(var(--pw-vh) * 0.78); display: block; padding: 0; }
    .pw-edito {
      min-height: calc(var(--pw-vh) * 0.92);
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: center;
      gap: clamp(20px, 3.6vw, 56px);
      padding: clamp(26px, 3.8vw, 58px) clamp(18px, 3vw, 46px);
    }
    .pw-gallery {
      min-height: calc(var(--pw-vh) * 0.86);
      display: block;
      padding: clamp(24px, 3.4vw, 52px) clamp(18px, 3vw, 46px);
    }
    .pw-final {
      min-height: calc(var(--pw-vh) * 0.9);
      display: block;
      padding: clamp(24px, 3.4vw, 52px) clamp(18px, 3vw, 46px);
    }
    .pw-foot {
      min-height: calc(var(--pw-vh) * 0.3);
      display: block;
      padding: clamp(20px, 2.6vw, 36px) clamp(18px, 3vw, 46px);
      border-top: 1px solid var(--ex-filet);
    }

    /* ————— blocs d'interface suggérés, jamais écrits ————— */

    .pw-mark { display: block; width: 18px; height: 18px; background: var(--ex-verm); }
    .pw-mark.is-small { width: 12px; height: 12px; }
    .pw-t { display: block; height: clamp(12px, 1.6vw, 19px); background: var(--ex-ink); }
    .pw-t1 { width: 92%; max-width: 520px; }
    .pw-t2 { width: 62%; max-width: 360px; margin-top: 10px; }
    .pw-t3 { width: 74%; max-width: 420px; margin-top: 10px; }
    .pw-l { display: block; width: 66%; max-width: 380px; height: 5px; background: var(--ex-filet); margin-top: clamp(12px, 1.8vw, 22px); }
    .pw-l2 { width: 48%; max-width: 260px; margin-top: 8px; }
    .pw-pills { display: flex; gap: 10px; margin-top: clamp(16px, 2.2vw, 28px); }
    .pw-pill { display: block; height: clamp(22px, 3vw, 30px); }
    .pw-pill.is-ink { width: clamp(78px, 10vw, 118px); background: var(--ex-ink); }
    .pw-pill.is-ghost { width: clamp(52px, 7vw, 78px); border: 1px solid var(--ex-filet); }
    .pw-rule { display: block; height: 1px; background: var(--ex-filet); width: 100%; margin: clamp(16px, 2.2vw, 26px) 0; }
    .pw-specs { display: flex; gap: 8px; }
    .pw-specs > span { width: 26px; height: 26px; border: 1px solid var(--ex-filet); }
    .pw-specs > span:first-child { background: var(--ex-ink); border-color: var(--ex-ink); }
    .pw-specs > span:nth-child(3) { border-color: var(--ex-verm); }
    .pw-hero .pw-rule { max-width: 300px; margin-top: clamp(20px, 2.8vw, 34px); }
    .pw-hero .pw-cap { width: 84px; height: 5px; background: var(--ex-filet); }
    .pw-dots { display: flex; gap: 6px; margin-top: clamp(20px, 3vw, 34px); }
    .pw-dots > span { width: 7px; height: 7px; border-radius: 9999px; background: var(--ex-filet); }
    .pw-dots > span.is-on { background: var(--ex-verm); }

    /* ————— les compositions : elles tiennent lieu de photographies ————— */

    .pw-art { position: relative; overflow: hidden; background: var(--ex-sunk); }
    .pw-art-in {
      position: absolute;
      inset: -30px 0;
      display: block;
      background-repeat: no-repeat;
      will-change: transform;
    }

    .pw-art-in[data-art="hero"] {
      /* stries sombres à droite, coin vermillon, champ de perforations */
      background-image:
        repeating-linear-gradient(90deg, #121314 0 5px, #2A2B2C 5px 9px),
        linear-gradient(196deg, transparent 0 62%, var(--ex-verm) 62% 100%),
        radial-gradient(circle at 50% 50%, rgba(18, 19, 20, 0.5) 0 2.6px, transparent 3.4px),
        radial-gradient(circle at 50% 50%, rgba(18, 19, 20, 0.26) 0 1.5px, transparent 2px),
        linear-gradient(180deg, #F4EFE6 0 100%);
      background-size: 22% 100%, 100% 100%, 16px 16px, 8px 8px, 100% 100%;
      background-position: right top, 0 0, 0 0, 4px 6px, 0 0;
      background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
    }
    .pw-art-in[data-art="band"] {
      background-image:
        repeating-linear-gradient(90deg, #121314 0 6px, #2E2F30 6px 10px),
        linear-gradient(72deg, transparent 0 74%, var(--ex-verm) 74% 100%),
        radial-gradient(circle at 50% 50%, rgba(18, 19, 20, 0.44) 0 3px, transparent 3.9px),
        radial-gradient(circle at 50% 50%, rgba(18, 19, 20, 0.24) 0 1.7px, transparent 2.3px),
        linear-gradient(180deg, #EAE3D2 0 100%);
      background-size: 16% 100%, 100% 100%, 17px 17px, 9px 9px, 100% 100%;
      background-position: left top, 0 0, 0 0, 5px 7px, 0 0;
      background-repeat: no-repeat, no-repeat, repeat, repeat, no-repeat;
    }
    .pw-art-in[data-art="wood"] {
      background-image:
        linear-gradient(90deg, transparent 0 74%, #2A2B2C 74% 100%),
        linear-gradient(180deg, transparent 0 58%, #C08E52 58% 100%),
        linear-gradient(180deg, #D8B98C 0 58%, transparent 58%);
      background-size: 100% 100%, 100% 100%, 100% 100%;
    }
    /* Chacune est cadrée comme une photographie : un sujet, une lumière,
       une matière — jamais un aplat. */
    .pw-art-in[data-art="panel"] {
      /* panneau perforé, coin verni, plaque ondulée, une vis */
      background-image:
        radial-gradient(circle at 50% 50%, #6E6A62 0 1.7px, #F2ECE1 1.7px 3.1px, transparent 3.3px),
        linear-gradient(196deg, transparent 0 54.6%, #B2432D 54.6% 100%),
        linear-gradient(196deg, transparent 0 53.8%, rgba(255, 255, 255, 0.55) 53.8% 54.6%, transparent 54.6%),
        linear-gradient(196deg, transparent 0 54.6%, rgba(20, 8, 4, 0.28) 54.6% 100%),
        radial-gradient(circle at 50% 50%, rgba(18, 19, 20, 0.52) 0 2.9px, transparent 3.7px),
        radial-gradient(circle at 50% 50%, rgba(18, 19, 20, 0.22) 0 1.5px, transparent 2.2px),
        repeating-linear-gradient(90deg, #0F1011 0 4px, #2B2D30 4px 7px),
        radial-gradient(120% 100% at 16% 2%, rgba(255, 255, 255, 0.92) 0 26%, transparent 70%),
        linear-gradient(184deg, #F7F3EA 0 60%, #DCD4C3 100%);
      background-size: 40px 40px, 100% 100%, 100% 100%, 100% 100%, 18px 18px, 9px 9px, 19% 100%, 100% 100%, 100% 100%;
      background-position: 70% 60%, 0 0, 0 0, 0 0, 0 0, 5px 6px, right top, 0 0, 0 0;
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
    }
    .pw-art-in[data-art="room"] {
      /* un volume sombre, traversé par une ligne de lumière */
      background-image:
        linear-gradient(158deg, transparent 0 45.4%, rgba(255, 255, 255, 0.96) 45.4% 46.8%, transparent 46.8%),
        linear-gradient(158deg, transparent 0 42.6%, rgba(255, 255, 255, 0.16) 42.6% 46.2%, transparent 46.2%),
        linear-gradient(158deg, #4C5157 0 45.2%, transparent 45.2%),
        linear-gradient(158deg, transparent 0 46.8%, #23262B 46.8% 100%),
        linear-gradient(158deg, transparent 0 60%, rgba(255, 255, 255, 0.09) 60% 61.4%, transparent 61.4%),
        linear-gradient(158deg, transparent 0 62%, #131519 62% 100%),
        linear-gradient(158deg, transparent 0 61.2%, rgba(255, 255, 255, 0.12) 61.2% 62%, transparent 62%),
        linear-gradient(90deg, transparent 0 76%, rgba(255, 255, 255, 0.07) 76% 77%, rgba(255, 255, 255, 0.03) 77% 100%),
        radial-gradient(140% 120% at 46% 30%, transparent 0 46%, rgba(0, 0, 0, 0.58) 100%);
      background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
      background-color: #131519;
    }
    .pw-art-in[data-art="machine"] {
      /* un panneau laqué, un anneau métallique, une grille perforée */
      background-image:
        linear-gradient(198deg, transparent 0 60.4%, rgba(255, 255, 255, 0.6) 60.4% 61.3%, transparent 61.3%),
        radial-gradient(circle at 50% 50%, #1E2026 0 36%, #2C2F36 36% 58%, #C9C3B4 58% 64%, #FDFBF6 64% 69%, rgba(255, 255, 255, 0.26) 69% 76%, transparent 76%),
        radial-gradient(110% 90% at 8% 4%, rgba(255, 255, 255, 0.4) 0 20%, transparent 62%),
        linear-gradient(198deg, #E9A82B 0 61%, #D1911C 61% 100%),
        linear-gradient(198deg, #E5A428 0 61%, #CD8E1A 61% 100%),
        radial-gradient(circle at 50% 50%, #14161A 0 4.4px, transparent 5.2px);
      background-size: 100% 100%, 29% 43%, 100% 100%, 71% 100%, 29% 76%, 19px 19px;
      background-position: 0 0, 62% 56%, 0 0, 0 0, 100% 0, 0 0;
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
      background-color: #D89A20;
    }
    .pw-art-in[data-art="facade"] {
      /* un ciel profond, un volume bâti, une fente de lumière vermillon */
      background-image:
        radial-gradient(closest-side, rgba(226, 58, 33, 0.26) 0 34%, transparent 100%),
        linear-gradient(90deg, transparent 0 63%, #E23A21 63% 68.5%, transparent 68.5%),
        repeating-linear-gradient(90deg, rgba(8, 12, 24, 0.42) 0 1px, transparent 1px 4.5px),
        linear-gradient(168deg, transparent 0 38%, #16233C 38% 100%),
        linear-gradient(168deg, transparent 0 36.4%, rgba(255, 255, 255, 0.24) 36.4% 38%, transparent 38%),
        radial-gradient(120% 90% at 14% 4%, rgba(255, 255, 255, 0.2) 0 22%, transparent 64%),
        linear-gradient(190deg, #1C3E70 0 50%, #0F2748 100%);
      background-size: 30% 42%, 30% 42%, 100% 38%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
      background-position: 70% 60%, 70% 60%, 0 100%, 0 0, 0 0, 0 0, 0 0;
      background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    }
    .pw-art-in[data-art="dial"] {
      background-image:
        radial-gradient(circle at 50% 46%, transparent 0 22%, rgba(250, 247, 240, 0.7) 22% 23.2%, transparent 23.2%),
        linear-gradient(90deg, transparent 0 49.85%, rgba(250, 247, 240, 0.42) 49.85% 50.15%, transparent 50.15%),
        linear-gradient(180deg, transparent 0 49.85%, rgba(250, 247, 240, 0.42) 49.85% 50.15%, transparent 50.15%),
        linear-gradient(0deg, var(--ex-verm) 0 100%),
        radial-gradient(circle at 50% 50%, rgba(250, 247, 240, 0.32) 0 2.4px, transparent 3.1px);
      background-size: 100% 100%, 100% 100%, 100% 100%, 16% 30%, 17px 17px;
      background-position: 0 0, 0 0, 0 0, 84% 20%, 0 0;
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
      background-color: var(--ex-ink);
    }

    .pw-hero-art { height: calc(var(--pw-vh) * 0.72); }
    .pw-band .pw-art-in { inset: 0; }
    .pw-edito-art { height: calc(var(--pw-vh) * 0.7); }
    .pw-final-art { height: calc(var(--pw-vh) * 0.6); }

    .pw-badge { position: absolute; top: clamp(12px, 1.6vw, 22px); right: clamp(12px, 1.6vw, 22px); width: 34px; height: 34px; background: var(--ex-verm); }
    .pw-ball { position: absolute; left: 14%; bottom: 18%; width: 22px; height: 22px; border-radius: 9999px; border: 1px solid var(--ex-ink); background: var(--ex-bone); }
    .pw-cap { display: block; width: clamp(90px, 12vw, 150px); height: 8px; background: var(--ex-ink); }
    .pw-band .pw-cap { position: absolute; left: clamp(18px, 3vw, 46px); bottom: clamp(20px, 2.6vw, 36px); }
    .pw-plate { position: absolute; top: clamp(18px, 2.4vw, 32px); right: clamp(18px, 3vw, 46px); width: 54px; height: 16px; border: 1px solid var(--ex-bone); }

    .pw-sec-label { display: block; width: clamp(70px, 9vw, 110px); height: 5px; background: var(--ex-ink); opacity: 0.7; margin-bottom: clamp(16px, 2.2vw, 28px); }
    .pw-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 22px); }
    .pw-tile {
      display: block;
      position: relative;
      height: calc(var(--pw-vh) * 0.32);
      overflow: hidden;
      background: var(--ex-sunk);
      box-shadow: inset 0 0 0 1px rgba(18, 19, 20, 0.13);
    }
    /* la marge couvre le débattement du parallaxe : aucune couture ne doit apparaître */
    .pw-tile .pw-art-in { inset: -30px 0; }
    .pw-tile-bar {
      position: absolute;
      inset: 0 0 auto 0;
      z-index: 1;
      display: flex;
      align-items: center;
      height: 13px;
      padding-left: 7px;
      background: #F3EFE6;
      border-bottom: 1px solid rgba(18, 19, 20, 0.12);
    }
    .pw-tile-bar > span { display: block; width: 8px; height: 8px; }
    .pw-tiles > .pw-tile:nth-child(1) .pw-tile-bar > span { background: var(--ex-verm); }
    .pw-tiles > .pw-tile:nth-child(2) .pw-tile-bar > span { background: var(--ex-ink); }
    .pw-tiles > .pw-tile:nth-child(3) .pw-tile-bar > span { background: #DFA524; }
    .pw-tiles > .pw-tile:nth-child(4) .pw-tile-bar > span { background: var(--ex-blue); }
    .pw-caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 22px); margin-top: clamp(12px, 1.6vw, 20px); }
    .pw-caps > .pw-cap { width: 72%; }

    .pw-final .pw-t { margin-top: clamp(20px, 2.6vw, 34px); max-width: 380px; }
    .pw-final .pw-l { max-width: 300px; }
    .pw-final .pw-pills { margin-top: clamp(14px, 1.8vw, 22px); }

    .pw-foot-row { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); }
    .pw-foot-bars { display: flex; flex-direction: column; gap: 6px; flex: 1; }
    .pw-foot-bars > span { display: block; height: 5px; background: var(--ex-filet); }
    .pw-foot-bars > span:first-child { width: 34%; background: var(--ex-ink); opacity: 0.75; }
    .pw-foot-bars > span:last-child { width: 22%; }
    .pw-foot-sq { display: flex; gap: 6px; }
    .pw-foot-sq > span { width: 14px; height: 14px; border: 1px solid var(--ex-filet); }
    .pw-foot-sq > span:last-child { background: var(--ex-verm); border-color: var(--ex-verm); }

    /* ————— l'indicateur de lecture, à droite, comme une réglette ————— */

    .pw-rail { position: absolute; top: 0; right: 12px; width: 1px; height: 100%; background: var(--ex-filet); pointer-events: none; }
    .pw-rail > span { display: block; width: 1px; height: 0; background: var(--ex-ink); opacity: 0.6; }
    .pw-rail-tick { position: absolute; right: -3px; top: 0; width: 7px; height: 2px; background: var(--ex-verm); }

    /* ————— adaptation : la page reste une page ————— */

    @media (max-width: 900px) {
      .ex-frame { height: clamp(430px, calc(100dvh - 150px - var(--exp-brief-h, 0px)), 720px); }
      .pw-hero { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 3vw, 28px); }
      .pw-hero-art { height: calc(var(--pw-vh) * 0.5); }
      .pw-edito { grid-template-columns: minmax(0, 1fr); }
      .pw-edito-art { height: calc(var(--pw-vh) * 0.52); }
      .pw-nav-items > span:nth-child(4) { display: none; }
    }

    @media (max-width: 620px) {
      .ex { padding: 10px; }
      .ex-frame { height: calc(100dvh - 132px - var(--exp-brief-h, 0px)); min-height: 420px; }
      .pw-nav-items { display: none; }
      .pw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .pw-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .pw-tile { height: calc(var(--pw-vh) * 0.26); }
      .pw-rail { right: 8px; }
    }

    /* ══════════════════════════════════════════════════════════════════════
       EXPÉRIENCE « OUTILS MÉTIER » — un poste de travail : file à traiter,
       dossier ouvert, flux d'étapes, checklist, validation.
       Mêmes jetons, même densité, mêmes motifs que « PRODUITS WEB » ; ce qui
       change est la structure : ici on ne consulte pas, on traite.
       ══════════════════════════════════════════════════════════════════════ */

    .mt {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1 0 auto;
      padding: clamp(14px, 2.4vw, 32px);
    }

    .mt-frame {
      display: flex;
      width: 100%;
      max-width: 1240px;
      height: clamp(468px, calc(100dvh - 176px - var(--exp-brief-h, 0px)), 900px);
      padding: clamp(8px, 1vw, 14px);
      background: var(--ex-ink);
    }

    .mt-window {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
      min-height: 0;
      background: var(--ex-bone);
      border: 1px solid var(--ex-filet);
      overflow: hidden;
    }

    /* ————— barre d'application : identité du dossier + flux + outils ————— */

    .mt-bar {
      display: flex;
      align-items: center;
      gap: clamp(10px, 1.6vw, 22px);
      min-height: 46px;
      padding: 0 clamp(10px, 1.6vw, 20px);
      border-bottom: 1px solid var(--ex-ink);
    }
    .mt-ref { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
    .mt-ref-mark { width: 18px; height: 18px; background: var(--ex-ink); }
    .mt-ref-id { width: 7px; height: 7px; background: var(--ex-verm); }
    .mt-ref-lines { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
    .mt-ref-title { display: block; width: 84px; height: 8px; background: var(--ex-ink); }
    .mt-ref-meta { display: block; width: 52px; height: 3px; background: var(--ex-filet); }

    .mt-steps { display: flex; align-items: center; gap: 0; flex: 1; min-width: 0; }
    .mt-step { width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid var(--ex-filet); background: var(--ex-bone); }
    .mt-step:hover { border-color: var(--ex-blue); }
    .mt-step.is-done { background: var(--ex-matcha); border-color: var(--ex-matcha); }
    .mt-step.is-run { background: var(--ex-verm); border-color: var(--ex-verm); box-shadow: 0 0 0 3px rgba(214, 62, 42, 0.18); }
    .mt-link { flex: 1; min-width: 12px; height: 2px; background: var(--ex-track); }
    .mt-link.is-done { background: var(--ex-matcha); }
    .mt-link.is-run { background: var(--ex-verm); }

    .mt-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
    .mt-tool { width: 16px; height: 16px; border: 1px solid var(--ex-filet); background: var(--ex-bone); }
    .mt-tool-cta { width: 44px; height: 20px; background: var(--ex-ink); }

    /* ————— corps : file · dossier · état ————— */

    .mt-body { display: grid; grid-template-columns: clamp(176px, 20vw, 238px) minmax(0, 1fr) clamp(150px, 17vw, 200px); flex: 1; min-height: 0; }

    /* file d'attente */

    .mt-queue { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 10px; border-right: 1px solid var(--ex-filet); }
    .mt-queue-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .mt-chips { display: flex; gap: 4px; }
    .mt-chip { height: 12px; border: 1px solid var(--ex-filet); background: var(--ex-bone); }
    .mt-chip[data-filter="0"] { width: 42px; }
    .mt-chip[data-filter="1"] { width: 30px; }
    .mt-chip[data-filter="2"] { width: 36px; }
    .mt-chip:hover { border-color: var(--ex-ink); }
    .mt-chip.is-on { background: var(--ex-ink); border-color: var(--ex-ink); }
    .mt-count { display: flex; gap: 3px; }
    .mt-count > span { width: 6px; height: 6px; border: 1px solid var(--ex-ink); background: var(--ex-matcha); }
    .mt-count > span + span { background: var(--ex-filet); }

    .mt-rows { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow: hidden; }
    /* les lignes se partagent exactement la hauteur du panneau : la file remplit
       son panneau et ne déborde jamais, quelle que soit la hauteur de l'écran */
    .mt-row { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-height: 0; padding: 0 6px; border: 1px solid transparent; }
    .mt-row:hover { border-color: var(--ex-ink); }
    .mt-row-rail { width: 3px; height: 60%; max-height: 22px; flex: 0 0 auto; background: var(--ex-filet); }
    .mt-row-body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
    .mt-row-body > span { display: block; height: 6px; background: var(--ex-ink); opacity: 0.85; }
    .mt-row-body > span + span { height: 3px; background: var(--ex-filet); opacity: 1; }
    .mt-row-chip { width: 9px; height: 9px; flex: 0 0 auto; border: 1px solid var(--ex-ink); background: var(--ex-filet); }

    .mt-row.is-run .mt-row-rail { background: var(--ex-verm); }
    .mt-row.is-hold .mt-row-rail { background: var(--ex-blue); }
    .mt-row.is-done .mt-row-rail { background: var(--ex-matcha); }
    .mt-row.is-run .mt-row-chip { background: var(--ex-verm); }
    .mt-row.is-hold .mt-row-chip { background: var(--ex-blue); }
    .mt-row.is-done .mt-row-chip { background: var(--ex-matcha); }
    .mt-row.is-done .mt-row-body > span:first-child { opacity: 0.5; }
    .mt-row.is-picked { border-color: var(--ex-blue); outline: 1px solid var(--ex-blue); outline-offset: -1px; background: var(--ex-plate); }
    .mt-row.is-picked .mt-row-rail { width: 5px; }
    .mt-row.is-dim { opacity: 0.26; }

    .mt-queue-foot { padding-top: 6px; border-top: 1px solid var(--ex-filet); }
    .mt-queue-rail { display: block; height: 5px; background: var(--ex-track); overflow: hidden; }
    .mt-queue-rail > span { display: block; height: 100%; width: 0; background: var(--ex-ink); transition: width 900ms var(--ex-ease); }

    /* dossier ouvert */

    .mt-case { display: flex; flex-direction: column; gap: clamp(8px, 1.1vw, 14px); min-height: 0; padding: clamp(10px, 1.4vw, 16px); overflow: hidden; }
    .mt-case-head { display: flex; align-items: center; gap: 10px; }
    .mt-case-art { width: clamp(40px, 5vw, 54px); height: clamp(40px, 5vw, 54px); flex: 0 0 auto; border: 1px solid var(--ex-filet); background-repeat: no-repeat; }
    .mt-case-art[data-art="1"] { background-image: linear-gradient(90deg, #121314 0 42%, transparent 42%), linear-gradient(180deg, #E4DED0 0 100%); }
    .mt-case-art[data-art="2"] { background-image: linear-gradient(180deg, #C8A97E 0 54%, #A8794A 54% 100%); }
    .mt-case-art[data-art="3"] { background-image: radial-gradient(circle at 48% 54%, #121314 0 20%, transparent 20%), linear-gradient(180deg, #E4DED0 0 100%); }
    .mt-case-art[data-art="4"] { background-image: linear-gradient(90deg, transparent 0 60%, #D63E2A 60% 100%), linear-gradient(180deg, #EAE3D2 0 100%); }
    .mt-case-titles { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
    .mt-case-title { display: block; height: 9px; background: var(--ex-ink); transition: width 700ms var(--ex-ease); }
    .mt-case-sub { display: block; height: 4px; background: var(--ex-filet); transition: width 700ms var(--ex-ease); }
    .mt-case-state { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
    .mt-case-mark { width: 26px; height: 16px; background: var(--ex-filet); transition: background-color 380ms linear; }
    .mt-case-state.is-run .mt-case-mark { background: var(--ex-verm); }
    .mt-case-state.is-hold .mt-case-mark { background: var(--ex-blue); }
    .mt-case-state.is-done .mt-case-mark { background: var(--ex-matcha); }
    .mt-case-line { width: 40px; height: 3px; background: var(--ex-filet); }

    .mt-fields { display: flex; flex-direction: column; gap: 9px; }
    .mt-group { display: flex; flex-direction: column; gap: 5px; }
    .mt-group-label { display: block; width: 34%; height: 3px; background: var(--ex-ink); opacity: 0.5; }
    .mt-fields-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .mt-field { display: block; height: 32px; border: 1px solid var(--ex-filet); background: var(--ex-bone); overflow: hidden; }
    .mt-field-fill { display: block; height: 100%; width: 40%; background: var(--ex-ink); transition: width 700ms var(--ex-ease), background-color 380ms linear; }
    .mt-field-fill.is-blue { background: var(--ex-blue); }
    .mt-field-fill.is-empty { width: 0; }

    .mt-checks { display: flex; flex-direction: column; gap: 2px; }
    .mt-check { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border: 1px solid transparent; }
    .mt-check:hover { border-color: var(--ex-blue); }
    .mt-check-box { position: relative; width: 13px; height: 13px; flex: 0 0 auto; border: 1px solid var(--ex-ink); background: var(--ex-bone); transition: background-color 300ms linear, border-color 300ms linear; }
    .mt-check-box::after { content: ""; position: absolute; left: 3px; top: 5px; width: 7px; height: 3px; background: var(--ex-bone); opacity: 0; transition: opacity 240ms linear; }
    .mt-check-line { display: block; flex: 1; max-width: 62%; height: 4px; background: var(--ex-filet); transition: background-color 300ms linear, max-width 500ms var(--ex-ease); }
    .mt-check.is-checked .mt-check-box { background: var(--ex-matcha); border-color: var(--ex-matcha); }
    .mt-check.is-checked .mt-check-box::after { opacity: 1; }
    .mt-check.is-checked .mt-check-line { background: var(--ex-ink); opacity: 0.72; }

    .mt-attach { display: flex; gap: 6px; }
    .mt-attach-item { width: 30px; height: 30px; border: 1px solid var(--ex-filet); background-repeat: no-repeat; }
    .mt-attach-item[data-art="1"] { background-image: linear-gradient(90deg, #D8B98C 0 46%, transparent 46%); }
    .mt-attach-item[data-art="2"] { background-image: linear-gradient(180deg, transparent 0 52%, #C08E52 52% 100%); }
    .mt-attach-item[data-art="3"] { background-image: linear-gradient(90deg, #121314 0 40%, transparent 40%); }

    /* historique : les événements du dossier, du plus ancien au plus récent */
    .mt-timeline { display: flex; flex-direction: column; flex: 1; min-height: 0; justify-content: center; }
    .mt-tl { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-height: 20px; padding-left: 16px; }
    .mt-tl-line { position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: var(--ex-filet); }
    .mt-tl:first-child .mt-tl-line { top: 50%; }
    .mt-tl:last-child .mt-tl-line { bottom: 50%; }
    .mt-tl-dot { position: absolute; left: 0; width: 9px; height: 9px; border: 1px solid var(--ex-ink); background: var(--ex-bone); }
    .mt-tl-bar { display: block; max-width: 46%; height: 4px; background: var(--ex-filet); transition: width 700ms var(--ex-ease); }
    .mt-tl.is-done .mt-tl-dot { background: var(--ex-matcha); border-color: var(--ex-matcha); }
    .mt-tl.is-done .mt-tl-bar { background: var(--ex-ink); opacity: 0.62; }
    .mt-tl.is-run .mt-tl-dot { background: var(--ex-verm); border-color: var(--ex-verm); }
    .mt-tl.is-run .mt-tl-bar { background: var(--ex-ink); }

    .mt-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--ex-filet); }
    .mt-action { display: block; height: 26px; }
    .mt-action.is-primary { width: 92px; background: var(--ex-ink); transition: background-color 320ms linear; }
    .mt-action.is-primary.is-off { background: var(--ex-filet); }
    .mt-action.is-ghost { width: 54px; border: 1px solid var(--ex-filet); background: var(--ex-bone); }
    .mt-validate { flex: 1; min-width: 0; height: 6px; background: var(--ex-track); overflow: hidden; }
    .mt-validate > span { display: block; height: 100%; width: 0; background: var(--ex-ink); transition: width 700ms var(--ex-ease), background-color 380ms linear; }
    .mt-validate.is-full > span { background: var(--ex-matcha); }
    .mt-stamp { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 9999px; border: 2px solid var(--ex-filet); transition: border-color 380ms linear, transform 420ms var(--ex-ease); }
    .mt-stamp.is-on { border-color: var(--ex-verm); }
    .mt-stamp.is-full { border-color: var(--ex-matcha); transform: scale(1.06); }

    /* colonne d'état et de ressources */

    .mt-side { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 0; padding: 10px; border-left: 1px solid var(--ex-filet); }
    .mt-block { display: flex; flex-direction: column; gap: 7px; padding: 8px; border: 1px solid var(--ex-filet); background: var(--ex-plate); }
    .mt-block-state { flex-direction: row; align-items: center; gap: 8px; }
    .mt-state-mark { width: 30px; height: 30px; flex: 0 0 auto; background: var(--ex-filet); transition: background-color 380ms linear; }
    .mt-block-state.is-run .mt-state-mark { background: var(--ex-verm); }
    .mt-block-state.is-hold .mt-state-mark { background: var(--ex-blue); }
    .mt-block-state.is-done .mt-state-mark { background: var(--ex-matcha); }
    .mt-block-lines { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
    .mt-block-lines > span { display: block; height: 3px; background: var(--ex-ink); opacity: 0.7; transition: width 700ms var(--ex-ease); }

    .mt-people { display: flex; gap: 5px; }
    .mt-avatar { width: 18px; height: 18px; border-radius: 9999px; border: 1px solid var(--ex-ink); background: var(--ex-filet); }
    .mt-avatar.is-ink { background: var(--ex-ink); }
    .mt-avatar.is-matcha { background: var(--ex-matcha); }
    .mt-avatar-add { width: 18px; height: 18px; border: 1px solid var(--ex-filet); background: var(--ex-bone); position: relative; }
    .mt-avatar-add::after { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 2px; background: var(--ex-filet); }
    .mt-assign-rail { display: block; height: 4px; background: var(--ex-track); overflow: hidden; }
    .mt-assign-rail > span { display: block; height: 100%; width: 40%; background: var(--ex-matcha); transition: width 800ms var(--ex-ease); }

    .mt-due-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
    .mt-day { aspect-ratio: 1 / 1; background: var(--ex-track); transition: background-color 320ms linear; }

    .mt-block-notes { gap: 6px; }
    .mt-note { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
    .mt-note > span { display: block; height: 3px; background: var(--ex-ink); opacity: 0.6; transition: width 700ms var(--ex-ease); }
    .mt-day.is-out { background: var(--ex-sunk); }
    .mt-day.is-done { background: var(--ex-matcha); }
    .mt-day.is-due { background: var(--ex-verm); }

    .mt-route { flex-direction: row; align-items: center; justify-content: space-between; }
    .mt-route-seg { display: flex; gap: 3px; padding: 2px; border: 1px solid var(--ex-ink); }
    .mt-route-item { width: 20px; height: 12px; border: 1px solid var(--ex-filet); background: var(--ex-bone); }
    .mt-route-item:hover { border-color: var(--ex-blue); }
    .mt-route-item.is-on { background: var(--ex-ink); border-color: var(--ex-ink); }
    .mt-switch { position: relative; display: block; width: 36px; height: 16px; flex: 0 0 auto; border: 1px solid var(--ex-ink); border-radius: 9999px; background: var(--ex-bone); }
    .mt-switch > span { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 9999px; background: var(--ex-filet); transition: left 620ms var(--ex-ease), background-color 460ms linear; }
    .mt-switch:hover { border-color: var(--ex-blue); }
    .mt-switch.is-on > span { left: 22px; background: var(--ex-matcha); }

    /* ————— barre d'état : les mêmes instruments que les autres modules ————— */

    .mt-status {
      display: flex;
      align-items: center;
      gap: clamp(10px, 1.6vw, 20px);
      min-height: 34px;
      padding: 0 clamp(10px, 1.6vw, 20px);
      background: var(--ex-plate);
      border-top: 1px solid var(--ex-ink);
    }
    .mt-leds { display: flex; gap: 5px; flex: 0 0 auto; }
    .mt-leds > span { width: 6px; height: 6px; border-radius: 9999px; background: var(--ex-filet); transition: background-color 380ms linear; }
    .mt-leds > span.is-ok { background: var(--ex-matcha); }
    .mt-leds > span.is-run { background: var(--ex-verm); }
    .mt-rail { flex: 1; min-width: 0; height: 4px; background: var(--ex-track); overflow: hidden; }
    .mt-rail > span { display: block; height: 100%; width: 0; background: var(--ex-ink); transition: width 900ms var(--ex-ease); }
    .mt-gauge { width: clamp(72px, 9vw, 110px); height: 10px; flex: 0 0 auto; border: 1px solid var(--ex-filet); background: var(--ex-sunk); }
    .mt-gauge > span { display: block; height: 100%; width: 24%; background: var(--ex-ink); transition: width 900ms var(--ex-ease), background-color 420ms linear; }

    /* ————— adaptation : l'objet reste un seul écran ————— */

    @media (max-width: 1024px) {
      .mt-body { grid-template-columns: 172px minmax(0, 1fr) 158px; }
      .mt-ref-lines { display: none; }
      .mt-rows { gap: 1px; }
      .mt-row { padding: 0 4px; }
    }

    @media (max-width: 900px) {
      .mt-frame { height: clamp(430px, calc(100dvh - 150px - var(--exp-brief-h, 0px)), 720px); }
      .mt-body { grid-template-columns: 150px minmax(0, 1fr); }
      .mt-side { display: none; }
      .mt-steps { max-width: 220px; }
    }

    @media (max-width: 620px) {
      .mt { padding: 10px; }
      .mt-frame { height: calc(100dvh - 132px - var(--exp-brief-h, 0px)); min-height: 420px; }
      .mt-body { grid-template-columns: 108px minmax(0, 1fr); }
      .mt-queue { padding: 6px; gap: 6px; }
      .mt-row { min-height: 30px; gap: 5px; padding: 0 3px; }
      .mt-row-rail { height: 16px; }
      .mt-row-chip { display: none; }
      .mt-steps { max-width: 150px; }
      .mt-tools .mt-tool { display: none; }
      .mt-case { gap: 8px; padding: 8px; }
      .mt-attach { display: none; }
      .mt-action.is-primary { width: 68px; }
      .mt-ref-lines { display: none; }
    }

    /* ══════════════════════════════════════════════════════════════════════
       EXPÉRIENCE « DATA & PILOTAGE » — un centre de pilotage : quelques
       chiffres clés, une courbe d'évolution qui se trace, un histogramme de
       distribution, une répartition, un seuil et des alertes.
       Mêmes jetons et même châssis que les deux autres familles ; ici on ne
       consulte pas et on ne traite pas : on comprend et on décide.
       ══════════════════════════════════════════════════════════════════════ */

    .dp {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1 0 auto;
      padding: clamp(14px, 2.4vw, 32px);
    }

    .dp-frame {
      display: flex;
      width: 100%;
      max-width: 1240px;
      height: clamp(468px, calc(100dvh - 176px - var(--exp-brief-h, 0px)), 900px);
      padding: clamp(8px, 1vw, 14px);
      background: var(--ex-ink);
    }

    .dp-window {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
      min-height: 0;
      background: var(--ex-bone);
      border: 1px solid var(--ex-filet);
      overflow: hidden;
    }

    /* ————— barre : identité, période, série, comparaison ————— */

    .dp-bar {
      display: flex;
      align-items: center;
      gap: clamp(10px, 1.5vw, 20px);
      min-height: 46px;
      padding: 0 clamp(10px, 1.6vw, 20px);
      border-bottom: 1px solid var(--ex-ink);
      flex: 0 0 auto;
    }
    .dp-ref { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
    .dp-ref-mark { width: 18px; height: 18px; background: var(--ex-ink); }
    .dp-ref-id { width: 7px; height: 7px; background: var(--ex-verm); }
    .dp-ref-lines { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
    .dp-ref-title { display: block; width: 92px; height: 8px; background: var(--ex-ink); }
    .dp-ref-meta { display: block; width: 58px; height: 3px; background: var(--ex-filet); }

    .dp-periods { display: flex; gap: 4px; flex: 0 0 auto; }
    .dp-chip { position: relative; width: 34px; height: 22px; border: 1px solid var(--ex-filet); background: var(--ex-bone); }
    .dp-chip::after { content: ""; position: absolute; right: 7px; bottom: 6px; height: 5px; background: var(--ex-filet); transition: background-color 320ms linear; }
    .dp-chip[data-period="0"]::after { left: 20px; }
    .dp-chip[data-period="1"]::after { left: 16px; }
    .dp-chip[data-period="2"]::after { left: 12px; }
    .dp-chip[data-period="3"]::after { left: 8px; }
    .dp-chip:hover { border-color: var(--ex-ink); }
    .dp-chip.is-on { background: var(--ex-ink); border-color: var(--ex-ink); }
    .dp-chip.is-on::after { background: var(--ex-bone); }

    .dp-series { display: flex; gap: 3px; flex: 1; min-width: 0; }
    .dp-seg { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; max-width: 96px; height: 22px; padding: 0 8px; border: 1px solid var(--ex-filet); background: var(--ex-bone); }
    .dp-seg-dot { width: 8px; height: 8px; flex: 0 0 auto; background: var(--ex-track); }
    .dp-seg-bar { display: block; flex: 1; min-width: 8px; height: 5px; background: var(--ex-filet); transition: background-color 320ms linear; }
    .dp-seg[data-series="0"] .dp-seg-dot { background: var(--ex-verm); }
    .dp-seg[data-series="1"] .dp-seg-dot { background: var(--ex-blue); }
    .dp-seg[data-series="2"] .dp-seg-dot { background: var(--ex-matcha); }
    .dp-seg:hover { border-color: var(--ex-ink); }
    .dp-seg.is-on { background: var(--ex-ink); border-color: var(--ex-ink); }
    .dp-seg.is-on .dp-seg-bar { background: var(--ex-bone); opacity: 0.85; }

    .dp-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
    .dp-toggle { position: relative; width: 42px; height: 22px; border: 1px solid var(--ex-filet); background: var(--ex-sunk); cursor: pointer; transition: background-color 320ms linear, border-color 320ms linear; }
    .dp-toggle > span { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--ex-bone); border: 1px solid var(--ex-filet); transition: left 320ms var(--ex-ease), border-color 320ms linear; }
    .dp-toggle:hover { border-color: var(--ex-ink); }
    .dp-toggle.is-on { background: var(--ex-blue); border-color: var(--ex-blue); }
    .dp-toggle.is-on > span { left: 23px; border-color: var(--ex-blue); }

    .dp-status { display: flex; gap: 4px; }
    .dp-status > span { width: 6px; height: 6px; border-radius: 9999px; background: var(--ex-track); transition: background-color 420ms linear; }
    .dp-status > span.is-ok { background: var(--ex-matcha); }
    .dp-status > span.is-run { background: var(--ex-verm); }
    .dp-status > span.is-warn { background: #DFA524; }

    /* ————— corps : chiffres clés · graphiques · alertes ————— */

    .dp-body {
      display: grid;
      grid-template-columns: clamp(168px, 19vw, 212px) minmax(0, 1fr) clamp(158px, 18vw, 204px);
      flex: 1;
      min-height: 0;
    }

    /* chiffres clés */

    .dp-keys { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 12px; border-right: 1px solid var(--ex-filet); }
    .dp-key { display: flex; flex-direction: column; justify-content: center; gap: 9px; flex: 1; min-height: 0; padding: 0 0 12px 9px; border-bottom: 1px solid var(--ex-track); border-left: 2px solid transparent; }
    .dp-key:last-child { border-bottom: 0; padding-bottom: 0; }
    .dp-key.is-picked { border-left-color: var(--ex-ink); }
    .dp-key-label { display: block; width: 38px; height: 5px; background: var(--ex-filet); transition: background-color 320ms linear; }
    .dp-key.is-picked .dp-key-label { background: var(--ex-ink); }
    .dp-key-value { display: block; position: relative; height: 36px; background: var(--ex-sunk); overflow: hidden; }
    .dp-key-value > span { display: block; height: 100%; width: 40%; background: var(--ex-ink); transition: width 900ms var(--ex-ease), background-color 420ms linear; }
    .dp-key-row { display: flex; align-items: center; gap: 8px; }
    .dp-key-delta { width: 0; height: 0; flex: 0 0 auto; border-left: 4px solid transparent; border-right: 4px solid transparent; }
    .dp-key-delta.is-up { border-bottom: 7px solid var(--ex-matcha); }
    .dp-key-delta.is-down { border-top: 7px solid var(--ex-verm); }
    .dp-key-spark { flex: 1; min-width: 0; height: 30px; }
    .dp-key:nth-child(1) .dp-key-spark > polyline { stroke: var(--ex-verm); }
    .dp-key:nth-child(2) .dp-key-spark > polyline { stroke: var(--ex-blue); }
    .dp-key:nth-child(3) .dp-key-spark > polyline { stroke: var(--ex-matcha); }
    .dp-key-spark > polyline { fill: none; stroke: var(--ex-ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
    .dp-compare { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; padding-top: 12px; border-top: 1px solid var(--ex-ink); }
    .dp-compare-row { display: block; height: 11px; background: var(--ex-sunk); }
    .dp-compare-row > span { display: block; height: 100%; width: 40%; background: var(--ex-ink); transition: width 900ms var(--ex-ease), background-color 420ms linear; }
    .dp-compare-row.is-prev { height: 7px; }
    .dp-compare-row.is-prev > span { background: var(--ex-filet); }

    /* le grand graphique */

    .dp-main { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; }
    .dp-chart { position: relative; flex: 1; min-height: 0; border: 1px solid var(--ex-track); background: #FCFAF3; }
    .dp-plot { display: block; width: 100%; height: 100%; }
    .dp-grid-line { stroke: var(--ex-track); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .dp-grid-line.is-strong { stroke: var(--ex-filet); }
    .dp-zone { fill: #DFA524; fill-opacity: 0.07; stroke: none; }
    .dp-line { fill: none; stroke: var(--ex-ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 1500ms var(--ex-ease), stroke 420ms linear; }
    .dp-prev { fill: none; stroke: var(--ex-filet); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; transition: opacity 420ms linear; }
    .dp-threshold { stroke: #DFA524; stroke-width: 1; stroke-dasharray: 7 4; vector-effect: non-scaling-stroke; }
    .dp-mark { fill: var(--ex-verm); stroke: none; transition: opacity 320ms linear; }
    .dp-mark.is-on { fill: var(--ex-ink); }
    .dp-cursor { stroke: var(--ex-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .dp-cursor-dot { fill: var(--ex-ink); stroke: var(--ex-bone); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
    /* la série choisie teinte la courbe, l'aire et le curseur : le lien est immédiat */
    .dp-chart[data-series="0"] .dp-line { stroke: var(--ex-verm); }
    .dp-chart[data-series="1"] .dp-line { stroke: var(--ex-blue); }
    .dp-chart[data-series="2"] .dp-line { stroke: var(--ex-matcha); }
    .dp-chart.is-compare .dp-prev { opacity: 1; }
    .dp-chart:not(.is-compare) .dp-prev { opacity: 0; }

    .dp-readout { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; padding: 6px 8px; background: var(--ex-bone); border: 1px solid var(--ex-filet); }
    .dp-readout > span:first-child { display: block; width: 54px; height: 9px; background: var(--ex-ink); transition: width 600ms var(--ex-ease); }
    .dp-readout > span:last-child { display: block; width: 30px; height: 3px; background: var(--ex-filet); }

    .dp-hist { display: flex; align-items: flex-end; gap: 3px; height: clamp(46px, 7vh, 70px); flex: 0 0 auto; }
    .dp-hist > span { flex: 1; min-width: 0; height: 12%; background: var(--ex-ink); transition: height 700ms var(--ex-ease), background-color 320ms linear; }
    .dp-hist > span.is-on { background: #DFA524; }
    .dp-axis { display: flex; align-items: center; gap: 6px; height: 10px; flex: 0 0 auto; }
    .dp-axis > span { height: 3px; background: var(--ex-track); }
    .dp-axis > span.is-tick { width: 2px; height: 7px; background: var(--ex-filet); flex: 0 0 auto; }
    .dp-axis > span.is-label { width: 26px; }
    .dp-axis > span.is-grow { flex: 1; min-width: 4px; height: 1px; background: var(--ex-track); }

    /* alertes · répartition · seuil */

    .dp-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px; border-left: 1px solid var(--ex-filet); }
    .dp-block { display: flex; flex-direction: column; gap: 7px; min-height: 0; }
    .dp-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .dp-block-head > span:first-child { display: block; width: 44px; height: 5px; background: var(--ex-ink); opacity: 0.7; }
    .dp-count { display: flex; gap: 3px; }
    .dp-count > span { width: 6px; height: 6px; background: var(--ex-filet); transition: background-color 420ms linear; }
    .dp-count > span.is-on { background: var(--ex-verm); }

    .dp-alerts { display: flex; flex-direction: column; gap: 5px; }
    .dp-alert { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 6px; border: 1px solid var(--ex-track); background: var(--ex-bone); transition: background-color 320ms linear, border-color 320ms linear; cursor: pointer; }
    .dp-alert:hover { border-color: var(--ex-ink); }
    .dp-alert-sev { width: 8px; height: 8px; flex: 0 0 auto; background: var(--ex-filet); }
    .dp-alert-bar { display: block; height: 5px; background: var(--ex-filet); transition: width 700ms var(--ex-ease), background-color 320ms linear; }
    .dp-alert.is-critical .dp-alert-sev { background: var(--ex-verm); }
    .dp-alert.is-warn .dp-alert-sev { background: #DFA524; }
    .dp-alert.is-info .dp-alert-sev { background: var(--ex-blue); }
    .dp-alert.is-ok .dp-alert-sev { background: var(--ex-matcha); }
    .dp-alert.is-on { background: var(--ex-ink); border-color: var(--ex-ink); }
    .dp-alert.is-on .dp-alert-bar { background: var(--ex-bone); opacity: 0.85; }

    .dp-split { display: flex; gap: 2px; height: 22px; }
    .dp-split > span { height: 100%; background: var(--ex-track); transition: width 900ms var(--ex-ease); }
    .dp-split > span:nth-child(1) { background: var(--ex-ink); }
    .dp-split > span:nth-child(2) { background: var(--ex-verm); }
    .dp-split > span:nth-child(3) { background: var(--ex-blue); }
    .dp-split > span:nth-child(4) { background: var(--ex-matcha); }
    .dp-legend { display: flex; flex-direction: column; gap: 5px; }
    .dp-legend-item { display: flex; align-items: center; gap: 6px; }
    .dp-legend-dot { width: 7px; height: 7px; flex: 0 0 auto; }
    .dp-legend-item:nth-child(1) .dp-legend-dot { background: var(--ex-ink); }
    .dp-legend-item:nth-child(2) .dp-legend-dot { background: var(--ex-verm); }
    .dp-legend-item:nth-child(3) .dp-legend-dot { background: var(--ex-blue); }
    .dp-legend-item:nth-child(4) .dp-legend-dot { background: var(--ex-matcha); }
    .dp-legend-bar { display: block; flex: 1; min-width: 0; height: 5px; background: var(--ex-sunk); }
    .dp-legend-bar > span { display: block; height: 100%; width: 30%; background: var(--ex-ink); opacity: 0.72; transition: width 900ms var(--ex-ease); }

    .dp-gauge { position: relative; display: block; height: 28px; border: 1px solid var(--ex-track); background: var(--ex-sunk); overflow: hidden; }
    .dp-gauge-fill { display: block; height: 100%; width: 42%; background: var(--ex-matcha); transition: width 900ms var(--ex-ease), background-color 420ms linear; }
    .dp-gauge-thr { position: absolute; top: 0; bottom: 0; left: 68%; width: 1px; background: var(--ex-verm); opacity: 0.85; }
    .dp-gauge-mark { position: absolute; top: 4px; bottom: 4px; left: 46%; width: 2px; background: var(--ex-ink); transition: left 900ms var(--ex-ease); }

    /* barre d'état */

    .dp-status-bar { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); min-height: 38px; padding: 0 clamp(10px, 1.6vw, 20px); border-top: 1px solid var(--ex-ink); flex: 0 0 auto; }
    .dp-leds { display: flex; gap: 5px; }
    .dp-leds > span { width: 8px; height: 8px; background: var(--ex-track); transition: background-color 420ms linear; }
    .dp-leds > span.is-ok { background: var(--ex-matcha); }
    .dp-leds > span.is-run { background: var(--ex-verm); }
    .dp-foot-rail { flex: 1; min-width: 0; height: 6px; background: var(--ex-track); }
    .dp-foot-rail > span { display: block; height: 100%; width: 30%; background: var(--ex-ink); transition: width 900ms var(--ex-ease); }
    .dp-foot-gauge { width: clamp(70px, 9vw, 108px); height: 10px; flex: 0 0 auto; border: 1px solid var(--ex-filet); background: var(--ex-sunk); }
    .dp-foot-gauge > span { display: block; height: 100%; width: 40%; background: var(--ex-ink); transition: width 900ms var(--ex-ease), background-color 420ms linear; }
    .dp-foot-count { display: flex; gap: 4px; }
    .dp-foot-count > span { width: 9px; height: 9px; background: var(--ex-track); transition: background-color 420ms linear; }
    .dp-foot-count > span.is-on { background: var(--ex-ink); }

    /* ————— adaptation : l'objet reste un seul écran ————— */

    @media (max-width: 1024px) {
      .dp-body { grid-template-columns: 152px minmax(0, 1fr) 148px; }
      .dp-ref-lines { display: none; }
      .dp-keys, .dp-side, .dp-main { padding: 9px; gap: 8px; }
      .dp-key-value { height: 18px; }
      .dp-hist { height: 44px; }
      .dp-chart { min-height: 0; }
    }

    @media (max-width: 760px) {
      .dp-body { grid-template-columns: 118px minmax(0, 1fr) 112px; }
      .dp-seg { max-width: 62px; padding: 0 6px; gap: 4px; }
      .dp-chip { width: 28px; }
      .dp-legend { gap: 4px; }
      .dp-key-spark { height: 14px; }
    }

    @media (max-width: 620px) {
      .dp { padding: 10px; }
      .dp-frame { height: calc(100dvh - 132px - var(--exp-brief-h, 0px)); min-height: 420px; }
      .dp-bar { gap: 8px; padding: 0 8px; }
      .dp-chip { width: 24px; height: 20px; }
      .dp-seg { max-width: 40px; padding: 0 4px; gap: 3px; }
      .dp-seg-bar { display: none; }
      .dp-toggle { width: 34px; height: 20px; }
      .dp-toggle > span { width: 12px; height: 12px; }
      .dp-toggle.is-on > span { left: 17px; }
      .dp-body { grid-template-columns: 82px minmax(0, 1fr) 78px; }
      .dp-keys, .dp-side, .dp-main { padding: 6px; gap: 6px; }
      .dp-key-value { height: 14px; }
      .dp-key { gap: 5px; padding-bottom: 6px; }
      .dp-key-spark { height: 11px; }
      .dp-compare { padding-top: 8px; }
      .dp-compare-row { height: 8px; }
      .dp-compare-row.is-prev { height: 5px; }
      .dp-readout { padding: 4px 5px; }
      .dp-readout > span:first-child { width: 34px; height: 7px; }
      .dp-hist { height: 34px; gap: 2px; }
      .dp-alerts .dp-alert:nth-child(n+4) { display: none; }
      .dp-alert { height: 19px; padding: 0 4px; gap: 4px; }
      .dp-split { height: 18px; }
      .dp-legend { display: none; }
      .dp-block-gauge { display: none; }
      .dp-axis > span.is-label { width: 16px; }
    }

    @media (max-width: 470px) {
      /* trois colonnes laisseraient au graphique moins de 180 px : il en faut plus */
      .dp-body { grid-template-columns: 80px minmax(0, 1fr); }
      .dp-side { display: none; }
      .dp-keys { padding-right: 8px; }
      .dp-hist { height: 30px; }
    }

    /* ══════════════════════════════════════════════════════════════════════
       EXPÉRIENCE « IA & AUTOMATISATION » — une chaîne d'agents en marche.
       Des petites machines géométriques (corps, deux capteurs, antenne, socle,
       témoin d'état) reliées par des rails orthogonaux : une tâche entre, se
       divise, se rejoint, déclenche une action, sort. Les états sont des
       couleurs : attente (filet), travail (vermillon), terminé (matcha),
       transmission (bleu). Ici ce n'est ni une visite, ni un poste, ni un
       tableau de bord : c'est un système qui tourne.
       ══════════════════════════════════════════════════════════════════════ */

    .ag {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1 0 auto;
      padding: clamp(14px, 2.4vw, 32px);
    }

    .ag-frame {
      display: flex;
      width: 100%;
      max-width: 1240px;
      height: clamp(468px, calc(100dvh - 176px - var(--exp-brief-h, 0px)), 900px);
      padding: clamp(8px, 1vw, 14px);
      background: var(--ex-ink);
    }

    .ag-window {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
      min-height: 0;
      background: var(--ex-bone);
      border: 1px solid var(--ex-filet);
      overflow: hidden;
      --ag-unit: 46px;   /* taille d'un agent, réduite par les adaptations */
    }

    /* ————— barre : identité, chaînes, marche ————— */

    .ag-bar {
      display: flex;
      align-items: center;
      gap: clamp(10px, 1.5vw, 20px);
      min-height: 46px;
      padding: 0 clamp(10px, 1.6vw, 20px);
      border-bottom: 1px solid var(--ex-ink);
      flex: 0 0 auto;
    }
    .ag-ref { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
    .ag-ref-mark { width: 18px; height: 18px; background: var(--ex-ink); }
    .ag-ref-id { width: 7px; height: 7px; background: var(--ex-matcha); }
    .ag-ref-lines { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
    .ag-ref-title { display: block; width: 96px; height: 8px; background: var(--ex-ink); }
    .ag-ref-meta { display: block; width: 56px; height: 3px; background: var(--ex-filet); }

    .ag-recipes { display: flex; gap: 3px; flex: 1; min-width: 0; }
    .ag-rec { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; max-width: 104px; height: 22px; padding: 0 8px; border: 1px solid var(--ex-filet); background: var(--ex-bone); }
    .ag-rec-dot { width: 8px; height: 8px; flex: 0 0 auto; background: var(--ex-filet); transition: background-color 320ms linear; }
    .ag-rec-bar { display: block; flex: 1; min-width: 8px; height: 5px; background: var(--ex-filet); transition: background-color 320ms linear; }
    .ag-rec[data-recipe="0"] .ag-rec-dot { background: var(--ex-verm); }
    .ag-rec[data-recipe="1"] .ag-rec-dot { background: var(--ex-blue); }
    .ag-rec[data-recipe="2"] .ag-rec-dot { background: var(--ex-matcha); }
    .ag-rec:hover { border-color: var(--ex-ink); }
    .ag-rec.is-on { background: var(--ex-ink); border-color: var(--ex-ink); }
    .ag-rec.is-on .ag-rec-bar { background: var(--ex-bone); opacity: 0.85; }

    .ag-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
    .ag-toggle { position: relative; width: 42px; height: 22px; border: 1px solid var(--ex-filet); background: var(--ex-sunk); cursor: pointer; transition: background-color 320ms linear, border-color 320ms linear; }
    .ag-toggle > span { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--ex-bone); border: 1px solid var(--ex-filet); transition: left 320ms var(--ex-ease), border-color 320ms linear; }
    .ag-toggle:hover { border-color: var(--ex-ink); }
    .ag-toggle.is-on { background: var(--ex-matcha); border-color: var(--ex-matcha); }
    .ag-toggle.is-on > span { left: 23px; border-color: var(--ex-matcha); }

    .ag-status { display: flex; gap: 4px; }
    .ag-status > span { width: 6px; height: 6px; border-radius: 9999px; background: var(--ex-track); transition: background-color 420ms linear; }
    .ag-status > span.is-ok { background: var(--ex-matcha); }
    .ag-status > span.is-run { background: var(--ex-verm); }
    .ag-status > span.is-warn { background: #DFA524; }

    /* ————— corps : file · chaîne · étapes ————— */

    .ag-body {
      display: grid;
      grid-template-columns: clamp(140px, 15vw, 178px) minmax(0, 1fr) clamp(146px, 16vw, 186px);
      flex: 1;
      min-height: 0;
    }

    .ag-col { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; border-right: 1px solid var(--ex-filet); }
    .ag-col.is-steps { border-right: 0; border-left: 1px solid var(--ex-filet); }
    .ag-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; }
    .ag-block-head > span:first-child { display: block; width: 48px; height: 5px; background: var(--ex-ink); opacity: 0.7; }
    .ag-block-head.is-cycles > span:first-child { width: 34px; opacity: 0.45; }
    .ag-count { display: flex; gap: 3px; }
    .ag-count > span { width: 6px; height: 6px; background: var(--ex-filet); transition: background-color 420ms linear; }
    .ag-count > span.is-on { background: var(--ex-ink); }

    .ag-queue { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
    .ag-queue > span { flex: 0 0 auto; height: clamp(14px, 2.2vh, 24px); background: var(--ex-filet); transition: opacity 420ms linear, background-color 420ms linear; }
    .ag-queue::after { content: ""; flex: 1; min-height: 0; opacity: 0.45; background: repeating-linear-gradient(180deg, var(--ex-track) 0 1px, transparent 1px 7px); }
    .ag-queue > span.is-next { background: var(--ex-ink); }
    .ag-queue > span.is-out { opacity: 0.24; }
    .ag-queue-rail { display: block; height: 6px; background: var(--ex-track); flex: 0 0 auto; }
    .ag-queue-rail > span { display: block; height: 100%; width: 72%; background: var(--ex-ink); transition: width 700ms var(--ex-ease); }
    .ag-cycles { display: flex; gap: 4px; flex: 0 0 auto; }
    .ag-cycles > span { width: 8px; height: 8px; background: var(--ex-track); transition: background-color 420ms linear; }
    .ag-cycles > span.is-done { background: var(--ex-matcha); }

    /* ————— la scène : rails, agents, plates ————— */

    .ag-stage { position: relative; min-height: 0; overflow: hidden; background: #FCFAF3; }
    .ag-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(18, 19, 20, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 19, 20, 0.045) 1px, transparent 1px);
      background-size: 34px 34px;
    }
    .ag-rails { position: absolute; inset: 0; width: 100%; height: 100%; }
    .ag-rail { fill: none; stroke: var(--ex-filet); stroke-width: 2.4; vector-effect: non-scaling-stroke; opacity: 1; transition: stroke 320ms linear, opacity 460ms linear; }
    /* une liaison qui n'appartient pas à la chaîne en cours n'est pas dessinée */
    .ag-rail.is-hold { opacity: 0; }
    .ag-rail.is-flow { stroke: var(--ex-ink); opacity: 1; }
    .ag-rail.is-live { stroke: var(--ex-blue); opacity: 1; }
    .ag-token { fill: var(--ex-ink); stroke: var(--ex-bone); stroke-width: 1; vector-effect: non-scaling-stroke; }
    .ag-token.is-trigger { fill: var(--ex-verm); }
    .ag-token.is-result { fill: var(--ex-matcha); }

    .ag-unit {
      position: absolute;
      width: var(--ag-unit);
      height: var(--ag-unit);
      transform: translate(-50%, -50%);
      transition: opacity 420ms linear;
    }
    .ag-unit-ant { position: absolute; left: 50%; top: 1%; width: 2.5px; height: 20%; margin-left: -1.25px; background: var(--ex-ink); }
    .ag-unit-ant::after { content: ""; position: absolute; left: -2.5px; top: -6px; width: 7px; height: 7px; background: var(--ex-ink); }
    .ag-unit-body {
      position: absolute;
      left: 50%; top: 50%;
      width: 78%; height: 62%;
      transform: translate(-50%, -50%);
      background: #F1EBE0;
      border: 2px solid var(--ex-ink);
      transition: border-color 320ms linear, border-style 320ms linear, background-color 320ms linear;
    }
    .ag-unit-eye { position: absolute; top: 19%; width: 19%; height: 19%; background: var(--ex-ink); }
    .ag-unit-eye.one { left: 20%; }
    .ag-unit-eye.two { right: 20%; }
    .ag-unit-mouth { position: absolute; left: 30%; right: 30%; bottom: 16%; height: 7%; background: var(--ex-filet); }
    .ag-unit-foot { position: absolute; left: 50%; bottom: 2%; width: 56%; height: 8%; margin-left: -28%; background: var(--ex-ink); }
    .ag-unit-lamp { position: absolute; right: 0; top: 0; width: 16%; height: 16%; background: var(--ex-filet); transition: background-color 320ms linear; }
    .ag-unit-task { position: absolute; left: -2%; top: 30%; bottom: 30%; width: 11%; background: var(--ex-sunk); }
    .ag-unit-task > span { display: block; width: 100%; height: 0; background: var(--ex-verm); transition: height 520ms linear, background-color 320ms linear; }

    /* attente : la machine est là, elle ne fait rien */
    .ag-unit.is-wait .ag-unit-lamp { background: var(--ex-sunk); }
    .ag-unit.is-wait .ag-unit-body { border-style: dashed; border-color: var(--ex-filet); background: #F5F1E7; }
    .ag-unit.is-work .ag-unit-body,
    .ag-unit.is-done .ag-unit-body,
    .ag-unit.is-send .ag-unit-body { background: var(--ex-bone); }
    /* travail : témoin vermillon, la machine respire, la tâche se remplit */
    .ag-unit.is-work .ag-unit-lamp { background: var(--ex-verm); }
    .ag-unit.is-work .ag-unit-task > span { height: 100%; }
    .ag-unit.is-work { animation: ag-bob 2.6s var(--ex-ease) infinite; }
    /* terminé */
    .ag-unit.is-done .ag-unit-lamp { background: var(--ex-matcha); }
    .ag-unit.is-done .ag-unit-task > span { height: 100%; background: var(--ex-matcha); }
    /* transmission : témoin bleu et une onde qui part */
    .ag-unit.is-send .ag-unit-lamp { background: var(--ex-blue); }
    .ag-unit.is-send::after {
      content: "";
      position: absolute;
      inset: 8%;
      border: 1px solid var(--ex-blue);
      opacity: 0;
      animation: ag-wave 1000ms linear;
    }
    /* unité choisie par le visiteur */
    .ag-unit.is-sel .ag-unit-body { border-color: var(--ex-blue); }
    .ag-unit.is-sel::before { content: ""; position: absolute; inset: -4%; border: 1px dashed var(--ex-blue); }

    @keyframes ag-bob {
      0%, 100% { transform: translate(-50%, -50%); }
      50% { transform: translate(-50%, -56%); }
    }
    @keyframes ag-wave {
      0% { opacity: 0.9; transform: scale(0.7); }
      100% { opacity: 0; transform: scale(1.7); }
    }

    .ag-plate { position: absolute; transform: translate(-50%, -50%); opacity: 1; transition: border-color 320ms linear, background-color 320ms linear, opacity 460ms linear; }
    /* la fourche et la jonction ne sont visibles que dans les chaînes qui les utilisent */
    .ag-plate.is-ghost { opacity: 0.12; }
    .ag-plate.is-node {
      width: calc(var(--ag-unit) * 0.42);
      height: calc(var(--ag-unit) * 0.42);
      background: var(--ex-bone);
      border: 1.5px solid var(--ex-ink);
      transform: translate(-50%, -50%) rotate(45deg);
    }
    .ag-plate.is-end { width: calc(var(--ag-unit) * 0.66); height: calc(var(--ag-unit) * 0.4); background: var(--ex-ink); transition: background-color 320ms linear; }
    .ag-plate.is-end::after { content: ""; position: absolute; left: 22%; right: 22%; top: 41%; height: 3px; background: var(--ex-bone); }
    .ag-plate.is-live { border-color: var(--ex-blue); }
    .ag-plate.is-flow { border-color: var(--ex-verm); box-shadow: inset 0 0 0 2px var(--ex-verm); }
    .ag-plate.is-end.is-flow { background: var(--ex-verm); }

    /* ————— étapes et résultat ————— */

    .ag-steps { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; }
    .ag-step { display: flex; align-items: center; gap: 6px; flex: 1; min-height: 0; }
    .ag-step-mark { width: 10px; height: 10px; flex: 0 0 auto; border: 1px solid var(--ex-filet); background: var(--ex-bone); transition: background-color 320ms linear, border-color 320ms linear; }
    .ag-step-bar { display: block; flex: 1; min-width: 6px; height: 6px; background: var(--ex-sunk); overflow: hidden; }
    .ag-step-bar > span { display: block; height: 100%; width: 0; background: var(--ex-ink); transition: width 700ms var(--ex-ease), background-color 320ms linear; }
    .ag-step.is-wide .ag-step-bar { background: repeating-linear-gradient(90deg, var(--ex-sunk) 0 42%, var(--ex-bone) 42% 46%, var(--ex-sunk) 46% 100%); }
    .ag-step.is-run .ag-step-mark { background: var(--ex-verm); border-color: var(--ex-verm); }
    .ag-step.is-run .ag-step-bar > span { background: var(--ex-verm); }
    .ag-step.is-done .ag-step-mark { background: var(--ex-matcha); border-color: var(--ex-matcha); }
    .ag-step.is-done .ag-step-bar > span { width: 100%; background: var(--ex-matcha); opacity: 0.45; }

    .ag-result { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; padding-top: 10px; border-top: 1px solid var(--ex-ink); }
    .ag-result-rail { display: block; height: 6px; background: var(--ex-track); }
    .ag-result-rail > span { display: block; height: 100%; width: 0; background: var(--ex-verm); transition: width 400ms linear, background-color 320ms linear; }
    .ag-result-plate { display: block; position: relative; height: 26px; background: var(--ex-sunk); overflow: hidden; }
    .ag-result-plate > span { display: block; height: 100%; width: 0; background: var(--ex-matcha); transition: width 900ms var(--ex-ease); }

    /* ————— barre d'état ————— */

    .ag-status-bar { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); min-height: 38px; padding: 0 clamp(10px, 1.6vw, 20px); border-top: 1px solid var(--ex-ink); flex: 0 0 auto; }
    .ag-leds { display: flex; gap: 5px; }
    .ag-leds > span { width: 8px; height: 8px; background: var(--ex-track); transition: background-color 420ms linear; }
    .ag-leds > span.is-ok { background: var(--ex-matcha); }
    .ag-leds > span.is-run { background: var(--ex-verm); }
    .ag-foot-rail { flex: 1; min-width: 0; height: 6px; background: var(--ex-track); }
    .ag-foot-rail > span { display: block; height: 100%; width: 0; background: var(--ex-ink); transition: width 400ms linear; }
    .ag-foot-gauge { width: clamp(70px, 9vw, 108px); height: 10px; flex: 0 0 auto; border: 1px solid var(--ex-filet); background: var(--ex-sunk); }
    .ag-foot-gauge > span { display: block; height: 100%; width: 40%; background: var(--ex-ink); transition: width 700ms var(--ex-ease), background-color 420ms linear; }
    .ag-foot-count { display: flex; gap: 4px; }
    .ag-foot-count > span { width: 9px; height: 9px; background: var(--ex-track); transition: background-color 420ms linear; }
    .ag-foot-count > span.is-on { background: var(--ex-matcha); }

    /* ————— adaptation : l'objet reste un seul écran ————— */

    @media (max-width: 1024px) {
      .ag-window { --ag-unit: 38px; }
      .ag-body { grid-template-columns: 124px minmax(0, 1fr) 132px; }
      .ag-col { padding: 9px; gap: 7px; }
      .ag-ref-lines { display: none; }
      .ag-stage::before { background-size: 30px 30px; }
    }

    @media (max-width: 760px) {
      .ag-window { --ag-unit: 30px; }
      .ag-body { grid-template-columns: 100px minmax(0, 1fr) 108px; }
      .ag-rec { max-width: 66px; padding: 0 6px; gap: 4px; }
      .ag-step { gap: 4px; }
      .ag-result-plate { height: 20px; }
    }

    @media (max-width: 620px) {
      .ag { padding: 10px; }
      .ag-frame { height: calc(100dvh - 132px - var(--exp-brief-h, 0px)); min-height: 420px; }
      .ag-window { --ag-unit: 24px; }
      .ag-bar { gap: 8px; padding: 0 8px; }
      .ag-rec { max-width: 40px; }
      .ag-rec-bar { display: none; }
      .ag-toggle { width: 34px; height: 20px; }
      .ag-toggle > span { width: 12px; height: 12px; }
      .ag-toggle.is-on > span { left: 17px; }
      .ag-body { grid-template-columns: 64px minmax(0, 1fr) 68px; }
      .ag-col { padding: 6px; gap: 5px; }
      .ag-queue { gap: 3px; }
      .ag-cycles { display: none; }
      .ag-block-head.is-cycles { display: none; }
      .ag-step-bar { height: 5px; }
      .ag-result-plate { height: 16px; }
      .ag-stage::before { background-size: 24px 24px; }
    }

    @media (max-width: 470px) {
      /* la chaîne est le sujet : sous 470 px elle prend toute la largeur */
      .ag-body { grid-template-columns: minmax(0, 1fr); }
      .ag-col { display: none; }
      .ag-window { --ag-unit: 30px; }
    }

    /* ══════════════════════════════════════════════════════════════════════
       EXPÉRIENCE « SYSTÈMES SUR MESURE » — un assemblage modulaire.
       Des composants indépendants — tailles et formes multiples, toutes
       multiples de la cellule — rejoignent leur logement, s'emboîtent par
       ergots et lumières, puis se câblent sur une double barre de bus.
       Le système fonctionne, se décompose, et les mêmes pièces reforment une
       autre architecture : c'est le plan qui change, pas le matériel.
       ══════════════════════════════════════════════════════════════════════ */

    .sm {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1 0 auto;
      padding: clamp(14px, 2.4vw, 32px);
    }

    .sm-frame {
      display: flex;
      width: 100%;
      max-width: 1240px;
      height: clamp(468px, calc(100dvh - 176px - var(--exp-brief-h, 0px)), 900px);
      padding: clamp(8px, 1vw, 14px);
      background: var(--ex-ink);
    }

    .sm-window {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
      min-height: 0;
      background: var(--ex-bone);
      border: 1px solid var(--ex-filet);
      overflow: hidden;
      --sm-u: 7px;        /* pas des détails : ergots, ports, plaquettes */
      --sm-move: 3200ms;  /* durée d'un déplacement — relue par le script */
    }

    /* ————— barre : identité, plans, marche ————— */

    .sm-bar {
      display: flex;
      align-items: center;
      gap: clamp(10px, 1.5vw, 20px);
      min-height: 46px;
      padding: 0 clamp(10px, 1.6vw, 20px);
      border-bottom: 1px solid var(--ex-ink);
      flex: 0 0 auto;
    }
    .sm-ref { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
    .sm-ref-mark { width: 18px; height: 18px; background: var(--ex-ink); }
    .sm-ref-id { width: 7px; height: 7px; background: var(--ex-verm); }
    .sm-ref-lines { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
    .sm-ref-title { display: block; width: 96px; height: 8px; background: var(--ex-ink); }
    .sm-ref-meta { display: block; width: 56px; height: 3px; background: var(--ex-filet); }

    .sm-plans { display: flex; gap: 3px; flex: 1; min-width: 0; }
    .sm-plan { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; max-width: 104px; height: 22px; padding: 0 8px; border: 1px solid var(--ex-filet); background: var(--ex-bone); }
    .sm-plan-dot { width: 8px; height: 8px; flex: 0 0 auto; background: var(--ex-filet); transition: background-color 320ms linear; }
    .sm-plan-bar { display: block; flex: 1; min-width: 8px; height: 5px; background: var(--ex-filet); transition: background-color 320ms linear; }
    .sm-plan:hover { border-color: var(--ex-ink); }
    .sm-plan.is-on { background: var(--ex-ink); border-color: var(--ex-ink); }
    .sm-plan.is-on .sm-plan-bar { background: var(--ex-bone); opacity: 0.85; }
    .sm-plan[data-plan="0"] .sm-plan-dot { background: var(--ex-verm); }
    .sm-plan[data-plan="1"] .sm-plan-dot { background: var(--ex-blue); }
    .sm-plan[data-plan="2"] .sm-plan-dot { background: var(--ex-matcha); }

    .sm-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
    .sm-toggle { position: relative; width: 42px; height: 22px; border: 1px solid var(--ex-filet); background: var(--ex-sunk); cursor: pointer; transition: background-color 320ms linear, border-color 320ms linear; }
    .sm-toggle > span { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--ex-bone); border: 1px solid var(--ex-filet); transition: left 320ms var(--ex-ease), border-color 320ms linear; }
    .sm-toggle:hover { border-color: var(--ex-ink); }
    .sm-toggle.is-on { background: var(--ex-matcha); border-color: var(--ex-matcha); }
    .sm-toggle.is-on > span { left: 23px; border-color: var(--ex-matcha); }
    .sm-status { display: flex; gap: 4px; }
    .sm-status > span { width: 6px; height: 6px; border-radius: 9999px; background: var(--ex-track); transition: background-color 420ms linear; }
    .sm-status > span.is-ok { background: var(--ex-matcha); }
    .sm-status > span.is-run { background: var(--ex-verm); }
    .sm-status > span.is-warn { background: #DFA524; }

    /* ————— corps : nomenclature · table · plan ————— */

    .sm-body {
      display: grid;
      grid-template-columns: clamp(146px, 16vw, 186px) minmax(0, 1fr) clamp(140px, 15vw, 178px);
      flex: 1;
      min-height: 0;
    }
    .sm-col { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; border-right: 1px solid var(--ex-filet); }
    .sm-col.is-plan { border-right: 0; border-left: 1px solid var(--ex-filet); }
    .sm-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; }
    .sm-block-head > span:first-child { display: block; width: 48px; height: 5px; background: var(--ex-ink); opacity: 0.7; }
    .sm-block-head.is-marks > span:first-child { width: 32px; opacity: 0.45; }
    .sm-count { display: flex; gap: 3px; }
    .sm-count > span { width: 6px; height: 6px; background: var(--ex-filet); transition: background-color 420ms linear; }
    .sm-count > span.is-on { background: var(--ex-ink); }

    /* nomenclature : une ligne par composant, sa silhouette à l'échelle */
    .sm-parts { display: flex; flex-direction: column; gap: 7px; flex: 1; min-height: 0; justify-content: center; }
    .sm-part-row { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
    .sm-part-sil { flex: 0 0 auto; background: var(--ex-sunk); border: 1px solid var(--ex-filet); transition: background-color 460ms linear, border-color 460ms linear; }
    .sm-part-row.is-ready .sm-part-sil { background: var(--ex-ink); border-color: var(--ex-ink); }
    .sm-part-row.is-moving .sm-part-sil { background: var(--ex-verm); border-color: var(--ex-verm); }
    .sm-part-row.is-sel .sm-part-sil { border-color: var(--ex-blue); background: var(--ex-blue); }
    .sm-part-line { display: block; flex: 1; min-width: 6px; height: 5px; background: var(--ex-sunk); }
    .sm-part-row.is-ready .sm-part-line { background: var(--ex-ink); opacity: 0.8; }
    .sm-part-row.is-moving .sm-part-line { background: var(--ex-filet); }
    .sm-parts-rail { display: block; height: 6px; background: var(--ex-track); flex: 0 0 auto; }
    .sm-parts-rail > span { display: block; height: 100%; width: 0; background: var(--ex-ink); transition: width 600ms var(--ex-ease); }
    .sm-marks { display: flex; gap: 4px; flex: 0 0 auto; }
    .sm-marks > span { width: 8px; height: 8px; background: var(--ex-track); transition: background-color 420ms linear; }
    .sm-marks > span.is-done { background: var(--ex-matcha); }

    /* ————— la table de montage ————— */

    .sm-table { position: relative; min-height: 0; overflow: hidden; background: #FCFAF3; }
    .sm-table::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(18, 19, 20, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 19, 20, 0.045) 1px, transparent 1px);
      background-size: 34px 34px;
    }
    .sm-rails { position: absolute; inset: 0; width: 100%; height: 100%; }

    /* le logement : un cadre à deux coins, comme un gabarit de montage */
    .sm-slot { position: absolute; border: 1px dashed var(--ex-filet); background: rgba(18, 19, 20, 0.022); transition: opacity 820ms linear; }
    .sm-slot::before, .sm-slot::after {
      content: "";
      position: absolute;
      width: 10px;
      height: 10px;
      border: 1.5px solid var(--ex-ink);
    }
    .sm-slot::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
    .sm-slot::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
    .sm-slot.is-filled { opacity: 0; }
    .sm-slot.is-next { border-color: var(--ex-verm); }

    /* le composant : corps, face, ergots, ports, témoin */
    .sm-part {
      position: absolute;
      left: 0; top: 0;
      background: #EAE3D2;
      border: 2px solid var(--ex-filet);
      transform-origin: 50% 50%;
      transition: transform var(--sm-move) cubic-bezier(0.4, 0, 0.2, 1), border-color 820ms linear, background-color 820ms linear, opacity 620ms linear;
    }
    .sm-part.is-moving { border-color: var(--ex-verm); background: #F3EDE1; }
    .sm-part.is-seated { border-color: var(--ex-ink); border-width: 2px; background: var(--ex-bone); }
    .sm-part.is-sel { border-color: var(--ex-blue); }

    .sm-part-face {
      position: absolute;
      left: calc(var(--sm-u) * 0.9);
      right: calc(var(--sm-u) * 0.9);
      top: calc(var(--sm-u) * 0.9);
      bottom: calc(var(--sm-u) * 0.9);
      background: var(--ex-bone);
      border: 1px solid var(--ex-filet);
      transition: border-color 820ms linear, background-color 820ms linear;
    }
    .sm-part.is-seated .sm-part-face { border-color: var(--ex-filet); background: var(--ex-bone); }
    .sm-part.is-sel .sm-part-face { border-color: var(--ex-blue); }

    /* le glyphe de fonction : trois marques, une géométrie par famille */
    .sm-glyph { position: absolute; left: 50%; top: 50%; width: var(--sm-glyph, calc(var(--sm-u) * 5.4)); height: var(--sm-glyph, calc(var(--sm-u) * 5.4)); margin: calc(var(--sm-glyph, calc(var(--sm-u) * 5.4)) / -2) 0 0 calc(var(--sm-glyph, calc(var(--sm-u) * 5.4)) / -2); }
    .sm-glyph > span { position: absolute; background: var(--ex-ink); opacity: 0.82; transition: opacity 320ms linear; }
    .sm-part[data-glyph="bars"] .sm-glyph > span { width: calc(var(--sm-u) * 0.42); bottom: 26%; top: 34%; }
    .sm-part[data-glyph="bars"] .sm-glyph > span:nth-child(1) { left: 22%; }
    .sm-part[data-glyph="bars"] .sm-glyph > span:nth-child(2) { left: 42%; top: 22%; }
    .sm-part[data-glyph="bars"] .sm-glyph > span:nth-child(3) { left: 62%; top: 44%; }
    .sm-part[data-glyph="cross"] .sm-glyph > span:nth-child(1) { left: 46%; top: 20%; bottom: 20%; width: calc(var(--sm-u) * 0.4); }
    .sm-part[data-glyph="cross"] .sm-glyph > span:nth-child(2) { top: 46%; left: 20%; right: 20%; height: calc(var(--sm-u) * 0.4); }
    .sm-part[data-glyph="cross"] .sm-glyph > span:nth-child(3) { display: none; }
    .sm-part[data-glyph="grid"] .sm-glyph > span { width: 26%; height: 26%; }
    .sm-part[data-glyph="grid"] .sm-glyph > span:nth-child(1) { left: 18%; top: 20%; }
    .sm-part[data-glyph="grid"] .sm-glyph > span:nth-child(2) { right: 18%; top: 20%; }
    .sm-part[data-glyph="grid"] .sm-glyph > span:nth-child(3) { left: 18%; bottom: 20%; }
    .sm-part[data-glyph="trace"] .sm-glyph > span { height: calc(var(--sm-u) * 0.42); }
    .sm-part[data-glyph="trace"] .sm-glyph > span:nth-child(1) { left: 12%; top: 58%; width: 32%; }
    .sm-part[data-glyph="trace"] .sm-glyph > span:nth-child(2) { left: 38%; top: 38%; width: 26%; }
    .sm-part[data-glyph="trace"] .sm-glyph > span:nth-child(3) { left: 60%; top: 22%; width: 28%; }
    .sm-part[data-glyph="dot"] .sm-glyph > span:nth-child(1) { left: 30%; top: 30%; right: 30%; bottom: 30%; background: none; border: calc(var(--sm-u) * 0.4) solid var(--ex-ink); }
    .sm-part[data-glyph="dot"] .sm-glyph > span:nth-child(2),
    .sm-part[data-glyph="dot"] .sm-glyph > span:nth-child(3) { display: none; }

    /* la face supérieure de la pièce composite : une marche */
    .sm-part-cap {
      position: absolute;
      left: 14%;
      right: 40%;
      top: calc(var(--sm-u) * -0.9);
      height: 30%;
      background: var(--ex-bone);
      border: 1.5px solid var(--ex-ink);
    }

    .sm-part-lamp { position: absolute; right: calc(var(--sm-u) * 0.4); top: calc(var(--sm-u) * 0.4); width: calc(var(--sm-u) * 0.9); height: calc(var(--sm-u) * 0.9); background: var(--ex-filet); transition: background-color 720ms linear; }
    .sm-part.is-moving .sm-part-lamp { background: var(--ex-verm); }
    .sm-part.is-seated .sm-part-lamp { background: var(--ex-matcha); }
    .sm-part.is-sel .sm-part-lamp { background: var(--ex-blue); }

    /* ergots sur un bord, ports sur l'autre : l'emboîtement */
    .sm-pins { position: absolute; right: calc(var(--sm-u) * -0.75); top: 18%; bottom: 18%; display: flex; flex-direction: column; justify-content: space-between; }
    .sm-pins > span { display: block; width: calc(var(--sm-u) * 1.5); height: calc(var(--sm-u) * 0.85); background: var(--ex-ink); }
    .sm-ports { position: absolute; left: calc(var(--sm-u) * -0.75); top: 18%; bottom: 18%; display: flex; flex-direction: column; justify-content: space-between; }
    .sm-ports > span { display: block; width: calc(var(--sm-u) * 1.5); height: calc(var(--sm-u) * 0.85); background: var(--ex-filet); }
    .sm-part.is-seated .sm-ports > span { background: var(--ex-ink); }

    /* la plaquette de sortie : le port de bus, sous la pièce */
    .sm-part-out { position: absolute; left: 50%; bottom: calc(var(--sm-u) * -1.5); width: calc(var(--sm-u) * 1.6); height: calc(var(--sm-u) * 0.8); margin-left: calc(var(--sm-u) * -0.8); background: var(--ex-filet); transition: background-color 720ms linear; }
    /* la pièce se câble par le côté le plus court : le port change de bord */
    .sm-part.is-tap-up .sm-part-out { bottom: auto; top: calc(var(--sm-u) * -1.5); }
    /* pendant un recalage (rotation d'écran), rien ne doit glisser */
    .sm-noanim .sm-part { transition: none !important; }
    .sm-part.is-seated .sm-part-out { background: var(--ex-ink); }
    .sm-part.is-sel .sm-part-out { background: var(--ex-blue); }

    .sm-part-label { position: absolute; left: calc(var(--sm-u) * 0.9); bottom: calc(var(--sm-u) * 0.9); width: 26%; height: calc(var(--sm-u) * 0.5); background: var(--ex-filet); }

    /* ————— câblage : bus, liaisons, jonctions, signaux ————— */

    .sm-cable { fill: none; stroke: var(--ex-filet); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; transition: stroke 300ms linear, opacity 900ms linear 1500ms; }
    .sm-cable.is-in { stroke: var(--ex-ink); opacity: 1; }
    .sm-cable.is-live { stroke: var(--ex-blue); opacity: 1; }
    .sm-bus { fill: none; stroke: var(--ex-ink); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; transition: stroke 300ms linear, opacity 1100ms linear; }
    .sm-bus.is-in { opacity: 1; }
    .sm-bus.is-live { stroke: var(--ex-blue); }
    .sm-joint { stroke: var(--ex-ink); stroke-width: 4; vector-effect: non-scaling-stroke; opacity: 0; transition: stroke 300ms linear, opacity 900ms linear 700ms; }
    .sm-joint.is-in { opacity: 1; }
    .sm-signal { fill: var(--ex-ink); }
    .sm-signal.is-verm { fill: var(--ex-verm); }

    /* ————— plan de montage (colonne droite) ————— */

    .sm-mini { position: relative; flex: 0 0 auto; min-height: 0; border: 1px solid var(--ex-filet); background: #FCFAF3; transition: height 460ms var(--ex-ease); }
    .sm-mini-block { position: absolute; border: 1px solid var(--ex-track); background: var(--ex-sunk); transition: background-color 460ms linear, border-color 460ms linear; }
    .sm-mini-block.is-move { background: var(--ex-verm); border-color: var(--ex-verm); }
    .sm-mini-block.is-in { background: var(--ex-ink); border-color: var(--ex-ink); }
    .sm-mini-block.is-sel { background: var(--ex-blue); border-color: var(--ex-blue); }
    .sm-stage-line { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; padding-top: 10px; border-top: 1px solid var(--ex-ink); }
    .sm-stage-rail { display: block; height: 6px; background: var(--ex-track); }
    .sm-stage-rail > span { display: block; height: 100%; width: 0; background: var(--ex-verm); transition: width 400ms linear; }
    .sm-stage-plate { display: block; position: relative; height: 24px; background: var(--ex-sunk); overflow: hidden; }
    .sm-stage-plate > span { display: block; height: 100%; width: 0; background: var(--ex-matcha); transition: width 900ms var(--ex-ease); }

    /* ————— barre d'état ————— */

    .sm-status-bar { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); min-height: 38px; padding: 0 clamp(10px, 1.6vw, 20px); border-top: 1px solid var(--ex-ink); flex: 0 0 auto; }
    .sm-leds { display: flex; gap: 5px; }
    .sm-leds > span { width: 8px; height: 8px; background: var(--ex-track); transition: background-color 420ms linear; }
    .sm-leds > span.is-ok { background: var(--ex-matcha); }
    .sm-leds > span.is-run { background: var(--ex-verm); }
    .sm-foot-rail { flex: 1; min-width: 0; height: 6px; background: var(--ex-track); }
    .sm-foot-rail > span { display: block; height: 100%; width: 0; background: var(--ex-ink); transition: width 400ms linear; }
    .sm-foot-gauge { width: clamp(70px, 9vw, 108px); height: 10px; flex: 0 0 auto; border: 1px solid var(--ex-filet); background: var(--ex-sunk); }
    .sm-foot-gauge > span { display: block; height: 100%; width: 30%; background: var(--ex-ink); transition: width 700ms var(--ex-ease), background-color 420ms linear; }
    .sm-foot-count { display: flex; gap: 4px; }
    .sm-foot-count > span { width: 9px; height: 9px; background: var(--ex-track); transition: background-color 420ms linear; }
    .sm-foot-count > span.is-on { background: var(--ex-matcha); }

    /* ————— adaptation : l'objet reste un seul écran ————— */

    @media (max-width: 1024px) {
      .sm-window { --sm-u: 6px; }
      .sm-body { grid-template-columns: 126px minmax(0, 1fr) 118px; }
      .sm-col { padding: 9px; gap: 7px; }
      .sm-ref-lines { display: none; }
    }

    @media (max-width: 760px) {
      .sm-window { --sm-u: 5px; }
      .sm-body { grid-template-columns: 98px minmax(0, 1fr) 94px; }
      .sm-plan { max-width: 66px; padding: 0 6px; gap: 4px; }
      .sm-stage-plate { height: 18px; }
    }

    @media (max-width: 620px) {
      .sm { padding: 10px; }
      .sm-frame { height: calc(100dvh - 132px - var(--exp-brief-h, 0px)); min-height: 420px; }
      .sm-window { --sm-u: 4px; }
      .sm-bar { gap: 8px; padding: 0 8px; }
      .sm-plan { max-width: 40px; }
      .sm-plan-bar { display: none; }
      .sm-toggle { width: 34px; height: 20px; }
      .sm-toggle > span { width: 12px; height: 12px; }
      .sm-toggle.is-on > span { left: 17px; }
      .sm-body { grid-template-columns: 62px minmax(0, 1fr) 60px; }
      .sm-col { padding: 6px; gap: 5px; }
      .sm-parts { gap: 5px; }
      .sm-marks { display: none; }
      .sm-block-head.is-marks { display: none; }
      .sm-mini { display: none; }
      .sm-stage-plate { height: 14px; }
      .sm-table::before { background-size: 24px 24px; }
    }

    @media (max-width: 470px) {
      .sm-body { grid-template-columns: 54px minmax(0, 1fr); }
      .sm-col.is-plan { display: none; }
      .sm-window { --sm-u: 5px; }
    }

    /* ————— adaptation : l'objet reste un seul écran ————— */

    @media (max-width: 620px) {
      .exp-chrome-kicker, .exp-chrome-slash, .exp-close-key { display: none; }
      .exp-chrome-left { min-width: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      #exp .ex-btn,
      #exp .mt-btn,
      #exp .mt-row,
      #exp .mt-row-body > span,
      #exp .mt-field-fill,
      #exp .mt-check-box,
      #exp .mt-day,
      #exp .mt-rail > span,
      #exp .mt-gauge > span,
      #exp .mt-queue-rail > span,
      #exp .mt-validate > span,
      #exp .mt-switch > span,
      #exp .mt-step,
      #exp .pw-art-in,
      #exp .pw-rail-tick,
      #exp .dp-chip,
      #exp .dp-seg,
      #exp .dp-seg-bar,
      #exp .dp-toggle,
      #exp .dp-toggle > span,
      #exp .dp-status > span,
      #exp .dp-key-value > span,
      #exp .dp-key-spark > polyline,
      #exp .dp-line,
      #exp .dp-prev,
      #exp .dp-mark,
      #exp .dp-readout > span,
      #exp .dp-hist > span,
      #exp .dp-alert,
      #exp .dp-alert-bar,
      #exp .dp-split > span,
      #exp .dp-legend-bar > span,
      #exp .dp-gauge-fill,
      #exp .dp-gauge-mark,
      #exp .dp-leds > span,
      #exp .dp-foot-rail > span,
      #exp .dp-foot-gauge > span,
      #exp .dp-foot-count > span,
      #exp .ag-rec,
      #exp .ag-rec-dot,
      #exp .ag-rec-bar,
      #exp .ag-toggle,
      #exp .ag-toggle > span,
      #exp .ag-status > span,
      #exp .ag-rail,
      #exp .ag-token,
      #exp .ag-queue > span,
      #exp .ag-queue-rail > span,
      #exp .ag-cycles > span,
      #exp .ag-unit,
      #exp .ag-unit-body,
      #exp .ag-unit-lamp,
      #exp .ag-unit-task > span,
      #exp .ag-plate,
      #exp .ag-step-mark,
      #exp .ag-step-bar > span,
      #exp .ag-result-rail > span,
      #exp .ag-result-plate > span,
      #exp .ag-leds > span,
      #exp .ag-foot-rail > span,
      #exp .ag-foot-gauge > span,
      #exp .ag-foot-count > span,
      #exp .sm-plan,
      #exp .sm-plan-dot,
      #exp .sm-plan-bar,
      #exp .sm-toggle,
      #exp .sm-toggle > span,
      #exp .sm-status > span,
      #exp .sm-parts-rail > span,
      #exp .sm-part-row .sm-part-sil,
      #exp .sm-marks > span,
      #exp .sm-part,
      #exp .sm-part-face,
      #exp .sm-part-cap,
      #exp .sm-part-lamp,
      #exp .sm-part-label,
      #exp .sm-pins > span,
      #exp .sm-ports > span,
      #exp .sm-part-out,
      #exp .sm-cable,
      #exp .sm-bus,
      #exp .sm-joint,
      #exp .sm-mini-block,
      #exp .sm-stage-rail > span,
      #exp .sm-stage-plate > span,
      #exp .sm-leds > span,
      #exp .sm-foot-rail > span,
      #exp .sm-foot-gauge > span,
      #exp .sm-foot-count > span,
      #exp .sm-slot { transition: none; }
    }

    /* ══════════════════════════════════════════════════════════════════════
       EXPÉRIENCE « CONSEIL & AUDIT » — la table d'audit.
       On observe un système existant comme un consultant technique : le schéma
       se dessine, une loupe l'inspecte, des annotations rouges le marquent,
       les points signalés sont isolés, le schéma se transforme en une
       architecture cible propre, et un plan de transformation se déploie.
       AUDITER → COMPRENDRE → CADRER → RECOMMANDER → TRANSFORMER.
       ══════════════════════════════════════════════════════════════════════ */

    .ca {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1 0 auto;
      padding: clamp(14px, 2.4vw, 32px);
    }

    .ca-frame {
      display: flex;
      width: 100%;
      max-width: 1240px;
      height: clamp(468px, calc(100dvh - 176px - var(--exp-brief-h, 0px)), 900px);
      padding: clamp(8px, 1vw, 14px);
      background: var(--ex-ink);
    }

    .ca-window {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
      min-height: 0;
      background: var(--ex-bone);
      border: 1px solid var(--ex-filet);
      overflow: hidden;
    }

    /* ————— barre : identité, étapes de la mission, marche ————— */

    .ca-bar {
      display: flex;
      align-items: center;
      gap: clamp(10px, 1.5vw, 20px);
      min-height: 46px;
      padding: 0 clamp(10px, 1.6vw, 20px);
      border-bottom: 1px solid var(--ex-ink);
      flex: 0 0 auto;
    }
    .ca-ref { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
    .ca-ref-mark { width: 18px; height: 18px; background: var(--ex-ink); }
    .ca-ref-id { width: 7px; height: 7px; background: var(--ex-verm); }
    .ca-ref-lines { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
    .ca-ref-title { display: block; width: 96px; height: 8px; background: var(--ex-ink); }
    .ca-ref-meta { display: block; width: 56px; height: 3px; background: var(--ex-filet); }

    .ca-acts { display: flex; gap: 3px; flex: 1; min-width: 0; }
    .ca-act { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; max-width: 104px; height: 22px; padding: 0 8px; border: 1px solid var(--ex-filet); background: var(--ex-bone); transition: background-color 320ms linear, border-color 320ms linear; }
    .ca-act-dot { width: 8px; height: 8px; flex: 0 0 auto; background: var(--ex-filet); transition: background-color 420ms linear; }
    .ca-act-bar { display: block; flex: 1; min-width: 8px; height: 5px; background: var(--ex-filet); transition: background-color 420ms linear; }
    .ca-act[data-act="0"] .ca-act-dot { background: var(--ex-ink); }
    .ca-act[data-act="1"] .ca-act-dot { background: var(--ex-verm); }
    .ca-act[data-act="2"] .ca-act-dot { background: var(--ex-blue); }
    .ca-act[data-act="3"] .ca-act-dot { background: var(--ex-matcha); }
    .ca-act[data-act="4"] .ca-act-dot { background: #C08E52; }
    .ca-act.is-on { background: var(--ex-ink); border-color: var(--ex-ink); }
    .ca-act.is-on .ca-act-bar { background: var(--ex-bone); opacity: 0.85; }
    .ca-act.is-done { border-color: var(--ex-ink); }
    .ca-act.is-done .ca-act-bar { background: var(--ex-ink); opacity: 0.35; }

    .ca-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
    .ca-toggle { position: relative; width: 42px; height: 22px; border: 1px solid var(--ex-filet); background: var(--ex-sunk); cursor: pointer; transition: background-color 320ms linear, border-color 320ms linear; }
    .ca-toggle > span { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--ex-bone); border: 1px solid var(--ex-filet); transition: left 320ms var(--ex-ease), border-color 320ms linear; }
    .ca-toggle.is-on { background: var(--ex-ink); border-color: var(--ex-ink); }
    .ca-toggle.is-on > span { left: 23px; border-color: var(--ex-ink); }
    .ca-status { display: flex; gap: 4px; }
    .ca-status > span { width: 6px; height: 6px; border-radius: 9999px; background: var(--ex-track); transition: background-color 420ms linear; }
    .ca-status > span.is-ok { background: var(--ex-matcha); }
    .ca-status > span.is-run { background: var(--ex-verm); }
    .ca-status > span.is-warn { background: #DFA524; }

    /* ————— corps ————— */

    .ca-body {
      display: grid;
      grid-template-columns: clamp(146px, 16vw, 186px) minmax(0, 1fr) clamp(140px, 15vw, 178px);
      flex: 1;
      min-height: 0;
    }
    .ca-col { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; border-right: 1px solid var(--ex-filet); }
    .ca-col.is-right { border-right: 0; border-left: 1px solid var(--ex-filet); }
    .ca-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; }
    .ca-block-head > span:first-child { display: block; width: 48px; height: 5px; background: var(--ex-ink); opacity: 0.7; }
    .ca-block-head.is-marks > span:first-child { width: 32px; opacity: 0.45; }
    .ca-count { display: flex; gap: 3px; }
    .ca-count > span { width: 6px; height: 6px; background: var(--ex-filet); transition: background-color 420ms linear; }
    .ca-count > span.is-on { background: var(--ex-ink); }

    .ca-act-list { display: flex; flex-direction: column; gap: 7px; flex: 1; min-height: 0; justify-content: center; }
    .ca-act-row { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
    .ca-act-sil { width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid var(--ex-filet); background: var(--ex-sunk); transition: background-color 420ms linear, border-color 420ms linear; }
    .ca-act-line { display: block; flex: 1; min-width: 0; height: 5px; background: var(--ex-track); transition: background-color 420ms linear, opacity 420ms linear; }
    .ca-act-row.is-on .ca-act-sil { background: var(--ex-ink); border-color: var(--ex-ink); }
    .ca-act-row.is-on .ca-act-line { background: var(--ex-ink); opacity: 0.8; }
    .ca-act-row.is-done .ca-act-sil { background: var(--ex-matcha); border-color: var(--ex-matcha); }
    .ca-act-row.is-done .ca-act-line { background: var(--ex-ink); opacity: 0.45; }
    .ca-act-rail { display: block; height: 6px; background: var(--ex-track); flex: 0 0 auto; }
    .ca-act-rail > span { display: block; height: 100%; width: 0; background: var(--ex-ink); transition: width 600ms var(--ex-ease); }

    .ca-marks { display: flex; gap: 4px; flex: 0 0 auto; }
    .ca-marks > span { width: 8px; height: 8px; background: var(--ex-track); transition: background-color 420ms linear; }
    .ca-marks > span.is-done { background: var(--ex-matcha); }

    /* ————— la table, la feuille, ses repères ————— */

    .ca-board {
      position: relative;
      min-height: 0;
      overflow: hidden;
      background: var(--ex-sunk);
      display: flex;
      padding: 18px 48px 18px 18px;
    }

    /* la règle graduée, en haut, et son échelle à gauche */
    .ca-board::before {
      content: "";
      position: absolute;
      left: 18px; right: 48px; top: 0; height: 18px;
      background-image:
        repeating-linear-gradient(90deg, var(--ex-filet) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(90deg, var(--ex-ink) 0 1px, transparent 1px 60px),
        linear-gradient(var(--ex-filet), var(--ex-filet));
      background-size: 100% 7px, 100% 12px, 100% 1px;
      background-position: 0 11px, 0 6px, 0 17px;
      background-repeat: no-repeat, no-repeat, no-repeat;
      opacity: 0.6;
      pointer-events: none;
    }
    .ca-board::after {
      content: "";
      position: absolute;
      left: 0; top: 18px; bottom: 18px; width: 18px;
      background-image:
        repeating-linear-gradient(0deg, var(--ex-filet) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(0deg, var(--ex-ink) 0 1px, transparent 1px 60px),
        linear-gradient(var(--ex-filet), var(--ex-filet));
      background-size: 7px 100%, 12px 100%, 1px 100%;
      background-position: 11px 0, 6px 0, 17px 0;
      background-repeat: no-repeat, no-repeat, no-repeat;
      opacity: 0.6;
      pointer-events: none;
    }
    .ca-ruler, .ca-square { display: none; }

    .ca-sheet {
      position: relative;
      flex: 1;
      min-width: 0;
      min-height: 0;
      background: #FDFBF6;
      border: 1px solid var(--ex-ink);
      overflow: hidden;
    }
    .ca-sheet::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(18, 19, 20, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 19, 20, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(28, 62, 110, 0.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28, 62, 110, 0.075) 1px, transparent 1px);
      background-size: 11px 11px, 11px 11px, 55px 55px, 55px 55px;
      transition: opacity 800ms linear;
      pointer-events: none;
    }
    .ca-sheet.is-target::before { opacity: 0.62; }

    .ca-sheet-frame { position: absolute; inset: 10px; border: 1px solid var(--ex-ink); opacity: 0.3; pointer-events: none; }
    .ca-sheet-frame > span { position: absolute; background: var(--ex-ink); }
    .ca-sheet-frame > span:nth-child(1) { left: 40%; top: -1px; width: 22px; height: 1px; }
    .ca-sheet-frame > span:nth-child(2) { right: -1px; top: 40%; width: 1px; height: 22px; }
    .ca-sheet-frame > span:nth-child(3) { left: 40%; bottom: -1px; width: 22px; height: 1px; }
    .ca-sheet-frame > span:nth-child(4) { left: -1px; top: 40%; width: 1px; height: 22px; }

    .ca-sheet-corner > span { position: absolute; width: 7px; height: 7px; opacity: 0.35; }
    .ca-sheet-corner > span:nth-child(1) { left: 14px; top: 14px; border-left: 1px solid var(--ex-ink); border-top: 1px solid var(--ex-ink); }
    .ca-sheet-corner > span:nth-child(2) { right: 14px; top: 14px; border-right: 1px solid var(--ex-ink); border-top: 1px solid var(--ex-ink); }
    .ca-sheet-corner > span:nth-child(3) { right: 14px; bottom: 14px; border-right: 1px solid var(--ex-ink); border-bottom: 1px solid var(--ex-ink); }
    .ca-sheet-corner > span:nth-child(4) { left: 14px; bottom: 14px; border-left: 1px solid var(--ex-ink); border-bottom: 1px solid var(--ex-ink); }

    .ca-sheet-title {
      position: absolute;
      right: 22px; bottom: 22px;
      width: clamp(88px, 13%, 148px);
      padding: 5px;
      border: 1px solid var(--ex-ink);
      opacity: 0.45;
      display: flex; flex-direction: column; gap: 4px;
    }
    .ca-sheet-title > span { display: block; height: 3px; background: var(--ex-ink); }
    .ca-sheet-title > span:nth-child(1) { width: 68%; height: 5px; }
    .ca-sheet-title > span:nth-child(2) { width: 48%; }
    .ca-sheet-title > span:nth-child(3) { width: 80%; }
    .ca-sheet-title > span:nth-child(4) { width: 36%; }

    .ca-sheet-scale {
      position: absolute;
      left: 22px; bottom: 26px;
      width: clamp(66px, 10%, 112px); height: 8px;
      opacity: 0.4;
      border: 1px solid var(--ex-ink);
      background-image: repeating-linear-gradient(90deg, var(--ex-ink) 0 50%, transparent 50% 100%);
      background-size: 16px 100%;
      pointer-events: none;
    }

    /* ————— le schéma : liaisons, nœuds ————— */

    .ca-draw, .ca-annot, .ca-leaders { position: absolute; inset: 0; width: 100%; height: 100%; }
    .ca-draw { z-index: 1; pointer-events: none; }
    .ca-annot { z-index: 3; pointer-events: none; }
    .ca-nodes { position: absolute; inset: 0; z-index: 2; }

    .ca-link {
      fill: none;
      stroke: var(--ex-ink);
      stroke-width: 1.6;
      vector-effect: non-scaling-stroke;
      clip-path: inset(0 100% 0 0);
      transition: clip-path 900ms linear, stroke 340ms linear, opacity 520ms linear, stroke-dasharray 1ms linear;
    }
    .ca-link.is-in { clip-path: inset(0 0 0 0); }
    .ca-link.is-old { stroke: var(--ex-verm); stroke-dasharray: 7 4.5; }
    .ca-link.is-cut { stroke: var(--ex-verm); stroke-dasharray: 4 3.5; }
    .ca-link.is-gone { clip-path: inset(0 100% 0 0); }
    .ca-link.is-sel { stroke: var(--ex-blue); }
    .ca-link.is-thin { stroke-width: 1.1; }

    .ca-band {
      fill: rgba(28, 62, 110, 0.035);
      stroke: rgba(28, 62, 110, 0.42);
      stroke-width: 1;
      stroke-dasharray: 5 4;
      vector-effect: non-scaling-stroke;
      opacity: 0;
      transition: opacity 700ms linear;
    }
    .ca-band.is-in { opacity: 1; }

    .ca-node {
      position: absolute;
      background: var(--ex-bone);
      border: 1.4px solid var(--ex-ink);
      box-sizing: border-box;
      opacity: 0;
      transform: scale(0.9);
      transition: opacity 420ms linear, transform 420ms var(--ex-ease), border-color 340ms linear, background-color 340ms linear;
    }
    .ca-node.is-in { opacity: 1; transform: none; }
    .ca-node-head { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ex-ink); opacity: 0.85; }
    .ca-node-line { position: absolute; left: 5px; height: 2.5px; background: var(--ex-filet); }
    .ca-node-line:nth-child(2) { top: 9px; width: 62%; }
    .ca-node-line:nth-child(3) { top: 14px; width: 44%; }
    .ca-node-mk { position: absolute; right: 4px; bottom: 4px; width: 6px; height: 6px; background: var(--ex-filet); transition: background-color 340ms linear, border-color 340ms linear; }
    .ca-node[data-kind="dot"] .ca-node-mk { background: var(--ex-ink); }
    .ca-node[data-kind="grid"] .ca-node-mk { background: transparent; border: 1px solid var(--ex-ink); }
    .ca-node.is-dim { opacity: 0.24; }
    .ca-node.is-flag { border-color: var(--ex-verm); background: #FFFBF8; }
    .ca-node.is-lit { border-color: var(--ex-ink); background: #FFFFFF; }
    .ca-node.is-sel { border-color: var(--ex-blue); background: #F3F6FB; }
    .ca-node.is-sel .ca-node-head { background: var(--ex-blue); opacity: 1; }

    /* ————— les annotations rouges ————— */

    .ca-mark { fill: none; stroke: var(--ex-verm); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 520ms linear, stroke 480ms linear; }
    .ca-mark.is-in { opacity: 1; }
    .ca-mark.is-resolved { stroke: var(--ex-matcha); }
    .ca-mark.is-sel { stroke: var(--ex-blue); }
    .ca-mark-hatch { stroke-width: 1.1; }
    .ca-mark-zone { fill: none; stroke: var(--ex-verm); stroke-width: 1.2; stroke-dasharray: 6 3; }
    .ca-mark-cut { stroke-width: 2.4; }
    .ca-mark-stamp { stroke: var(--ex-ink); stroke-width: 1.5; }
    .ca-mark-fill { fill: var(--ex-verm); stroke: none; }
    .ca-mark-fill.is-resolved { fill: var(--ex-matcha); }
    .ca-mark-lead { stroke: var(--ex-verm); stroke-width: 1.1; stroke-dasharray: 3 3; stroke-dashoffset: 0; transition: opacity 520ms linear, stroke 480ms linear, stroke-dashoffset 900ms linear; }
    .ca-mark-lead.is-in { opacity: 0.85; }
    .ca-mark-lead.is-resolved { stroke: var(--ex-matcha); }

    .ca-leader { fill: none; stroke: var(--ex-verm); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; opacity: 0; transition: opacity 460ms linear, stroke 480ms linear; }
    .ca-leader.is-in { opacity: 0.9; }
    .ca-leader.is-resolved { stroke: var(--ex-matcha); }
    .ca-leader.is-plan { stroke: var(--ex-ink); stroke-dasharray: 2 4; opacity: 0; }
    .ca-leader.is-plan.is-in { opacity: 0.5; }

    /* ————— la loupe et le balayage ————— */

    .ca-loupe {
      position: absolute;
      z-index: 6;
      width: 72px; height: 72px;
      margin: -36px 0 0 -36px;
      left: 20%; top: 20%;
      opacity: 0;
      pointer-events: none;
      transition: opacity 460ms linear, left 1900ms var(--ex-ease), top 1900ms var(--ex-ease);
    }
    .ca-loupe.is-in { opacity: 1; }
    .ca-loupe-glass {
      position: absolute; inset: 0;
      border-radius: 9999px;
      border: 1.6px solid var(--ex-ink);
      background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.9), rgba(250, 247, 240, 0.24) 72%);
      box-shadow: 0 8px 16px -12px rgba(18, 19, 20, 0.6);
    }
    .ca-loupe-glass::before, .ca-loupe-glass::after { content: ""; position: absolute; background: var(--ex-ink); opacity: 0.4; }
    .ca-loupe-glass::before { left: 50%; top: 13px; bottom: 13px; width: 1px; margin-left: -0.5px; }
    .ca-loupe-glass::after { top: 50%; left: 13px; right: 13px; height: 1px; margin-top: -0.5px; }
    .ca-loupe-glass > span { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 1px solid var(--ex-ink); border-radius: 9999px; opacity: 0.45; }
    .ca-loupe-grip { position: absolute; right: -1px; bottom: 2px; width: 24px; height: 8px; background: var(--ex-ink); transform: rotate(45deg); transform-origin: right center; }

    .ca-scan {
      position: absolute;
      z-index: 5;
      top: 0; bottom: 0; left: 0;
      width: 26px;
      background: linear-gradient(90deg, rgba(214, 62, 42, 0) 0%, rgba(214, 62, 42, 0.06) 62%, rgba(214, 62, 42, 0.5) 100%);
      border-right: 1px solid rgba(214, 62, 42, 0.7);
      opacity: 0;
      pointer-events: none;
      transition: opacity 400ms linear;
    }
    .ca-scan.is-in { opacity: 1; }

    /* ————— les onglets de relevé, en saillie sur le bord droit ————— */

    .ca-tabs { position: absolute; inset: 0; pointer-events: none; }
    .ca-tab {
      position: absolute;
      width: 30px;
      padding: 7px 0;
      display: flex; flex-direction: column; align-items: center; gap: 5px;
      background: var(--ex-bone);
      border: 1px solid var(--ex-ink);
      border-left-width: 3px;
      cursor: pointer;
      opacity: 0;
      transform: translateX(12px);
      transition: opacity 460ms linear, transform 460ms var(--ex-ease), border-color 340ms linear, background-color 340ms linear;
    }
    .ca-tab.is-in { opacity: 1; transform: none; }
    .ca-tab-pip { display: block; width: 14px; height: 4px; background: var(--ex-track); transition: background-color 420ms linear; }
    .ca-tab.is-sev .ca-tab-pip { background: var(--ex-verm); }
    .ca-tab-graph { display: block; width: 16px; height: 13px; background-image: linear-gradient(var(--ex-ink), var(--ex-ink)); background-repeat: no-repeat; background-size: 3px 100%; background-position: 1px 0; box-shadow: inset -5px 0 0 -2px var(--ex-filet); }
    .ca-tab-tick { display: block; width: 11px; height: 11px; border: 1.4px solid var(--ex-matcha); opacity: 0; transition: opacity 420ms linear; }
    .ca-tab.is-done .ca-tab-tick { opacity: 1; }
    .ca-tab.is-sel { border-color: var(--ex-blue); background: #F3F6FB; }
    .ca-tab.is-sel .ca-tab-graph { background-image: linear-gradient(var(--ex-blue), var(--ex-blue)); }

    /* ————— la feuille de route ————— */

    .ca-road {
      position: absolute;
      z-index: 7;
      left: 20px; right: 20px; bottom: -152px;
      height: 140px;
      padding: 10px 12px;
      display: flex; flex-direction: column; gap: 9px;
      background: #FDFBF6;
      border: 1.4px solid var(--ex-ink);
      box-shadow: 0 -12px 24px -20px rgba(18, 19, 20, 0.65);
      opacity: 0;
      transition: bottom 1200ms var(--ex-ease), opacity 620ms linear;
    }
    .ca-road.is-in { bottom: 20px; opacity: 1; }
    .ca-road-head { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
    .ca-road-head > span:nth-child(1) { display: block; width: 66px; height: 6px; background: var(--ex-ink); }
    .ca-road-head > span:nth-child(2) { display: block; width: 34px; height: 4px; background: var(--ex-filet); }
    .ca-road-track { display: flex; gap: 8px; flex: 1; min-height: 0; }
    .ca-road-phase {
      position: relative;
      display: flex; flex-direction: column;
      padding: 6px;
      border: 1px solid var(--ex-filet);
      background: var(--ex-sunk);
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 460ms linear, transform 460ms var(--ex-ease), border-color 340ms linear;
    }
    .ca-road-phase:nth-child(1) { flex: 1.7; }
    .ca-road-phase:nth-child(2) { flex: 1.3; }
    .ca-road-phase:nth-child(3) { flex: 1; }
    .ca-road-phase:nth-child(4) { flex: 0.66; }
    .ca-road-phase.is-in { opacity: 1; transform: none; }
    .ca-road-phase > span:nth-child(1) { display: block; width: 60%; height: 5px; background: var(--ex-ink); opacity: 0.45; }
    .ca-road-phase > span:nth-child(2) { display: block; margin-top: auto; height: 10px; width: 0; background: var(--ex-matcha); transition: width 1200ms var(--ex-ease); }
    .ca-road-phase.is-fill > span:nth-child(2) { width: 100%; }
    .ca-road-phase.is-done { border-color: var(--ex-matcha); }

    /* ————— colonne de droite : le relevé et la synthèse ————— */

    .ca-sev { display: flex; flex-direction: column; gap: 7px; flex: 0 0 auto; }
    .ca-sev-row { display: flex; align-items: center; gap: 6px; }
    .ca-sev-pip { width: 7px; height: 12px; background: var(--ex-track); transition: background-color 420ms linear; }
    .ca-sev-row.is-sev .ca-sev-pip { background: var(--ex-verm); }
    .ca-sev-row.is-done .ca-sev-pip { background: var(--ex-matcha); }
    .ca-sev-bar { display: block; flex: 1; min-width: 0; height: 6px; background: var(--ex-track); }
    .ca-sev-bar > span { display: block; height: 100%; width: 0; background: var(--ex-ink); transition: width 700ms var(--ex-ease); }
    .ca-sev-row.is-sev .ca-sev-bar > span { background: var(--ex-verm); }
    .ca-sev-row.is-done .ca-sev-bar > span { background: var(--ex-matcha); }
    .ca-sev-sq { display: flex; gap: 2px; flex: 0 0 auto; }
    .ca-sev-sq > span { width: 5px; height: 5px; background: var(--ex-track); transition: background-color 420ms linear; }
    .ca-sev-row.is-sev .ca-sev-sq > span { background: var(--ex-verm); }

    .ca-rail { display: block; height: 6px; background: var(--ex-track); flex: 0 0 auto; }
    .ca-rail > span { display: block; height: 100%; width: 0; background: var(--ex-ink); transition: width 600ms var(--ex-ease); }
    .ca-stage-line { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; padding-top: 10px; border-top: 1px solid var(--ex-ink); }
    .ca-stage-rail { display: block; height: 6px; background: var(--ex-track); }
    .ca-stage-rail > span { display: block; height: 100%; width: 0; background: var(--ex-verm); transition: width 400ms linear; }
    .ca-stage-plate { display: block; height: 24px; background: var(--ex-sunk); overflow: hidden; }
    .ca-stage-plate > span { display: block; height: 100%; width: 0; background: var(--ex-matcha); transition: width 900ms var(--ex-ease); }

    /* ————— barre d'état ————— */

    .ca-status-bar { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); min-height: 38px; padding: 0 clamp(10px, 1.6vw, 20px); border-top: 1px solid var(--ex-ink); flex: 0 0 auto; }
    .ca-leds { display: flex; gap: 5px; }
    .ca-leds > span { width: 8px; height: 8px; background: var(--ex-track); transition: background-color 420ms linear; }
    .ca-leds > span.is-ok { background: var(--ex-matcha); }
    .ca-leds > span.is-run { background: var(--ex-verm); }
    .ca-foot-rail { flex: 1; min-width: 0; height: 6px; background: var(--ex-track); }
    .ca-foot-rail > span { display: block; height: 100%; width: 0; background: var(--ex-ink); transition: width 400ms linear; }
    .ca-foot-gauge { width: clamp(70px, 9vw, 108px); height: 10px; flex: 0 0 auto; border: 1px solid var(--ex-filet); background: var(--ex-sunk); }
    .ca-foot-gauge > span { display: block; height: 100%; width: 0; background: var(--ex-ink); transition: width 700ms var(--ex-ease), background-color 420ms linear; }
    .ca-foot-count { display: flex; gap: 4px; }
    .ca-foot-count > span { width: 9px; height: 9px; background: var(--ex-track); transition: background-color 420ms linear; }
    .ca-foot-count > span.is-on { background: var(--ex-matcha); }

    /* ————— adaptation : l'objet reste un seul écran ————— */

    @media (max-width: 1180px) {
      .ca-node-line:nth-child(3) { display: none; }
    }

    @media (max-width: 1024px) {
      .ca-body { grid-template-columns: 126px minmax(0, 1fr) 118px; }
      .ca-col { padding: 9px; gap: 7px; }
      .ca-ref-lines { display: none; }
      .ca-board { padding: 16px 42px 16px 16px; }
      .ca-board::before { left: 16px; right: 42px; }
      .ca-road { left: 16px; right: 16px; height: 124px; }
    }

    @media (max-width: 760px) {
      .ca-body { grid-template-columns: 98px minmax(0, 1fr) 94px; }
      .ca-act { max-width: 64px; padding: 0 6px; gap: 4px; }
      .ca-tab { width: 26px; }
      .ca-loupe { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
    }

    @media (max-width: 620px) {
      .ca { padding: 10px; }
      .ca-frame { height: calc(100dvh - 132px - var(--exp-brief-h, 0px)); min-height: 420px; }
      .ca-bar { gap: 8px; padding: 0 8px; }
      .ca-act { max-width: 40px; }
      .ca-act-bar { display: none; }
      .ca-toggle { width: 34px; height: 20px; }
      .ca-toggle > span { width: 12px; height: 12px; }
      .ca-toggle.is-on > span { left: 17px; }
      .ca-body { grid-template-columns: 62px minmax(0, 1fr) 60px; }
      .ca-col { padding: 6px; gap: 5px; }
      .ca-marks { display: none; }
      .ca-block-head.is-marks { display: none; }
      .ca-board { padding: 12px 32px 12px 12px; }
      .ca-board::before { left: 12px; right: 32px; }
      .ca-sheet-title { display: none; }
      .ca-sheet-scale { left: 14px; bottom: 16px; }
      .ca-tab { width: 22px; padding: 5px 0; }
      .ca-tab-pip { width: 11px; }
      .ca-road { left: 12px; right: 12px; height: 78px; padding: 6px 8px; }
      .ca-road-head { display: none; }
      .ca-road-track { gap: 5px; }
      .ca-road-phase { padding: 4px; }
      .ca-road-phase > span:nth-child(1) { height: 4px; }
      .ca-road-phase > span:nth-child(2) { height: 8px; }
      .ca-loupe { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
    }

    @media (max-width: 470px) {
      .ca-body { grid-template-columns: 54px minmax(0, 1fr); }
      .ca-col.is-right { display: none; }
      .ca-loupe { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
    }

    @media (prefers-reduced-motion: reduce) {
      #exp .ca-act,
      #exp .ca-act-dot,
      #exp .ca-act-bar,
      #exp .ca-toggle,
      #exp .ca-toggle > span,
      #exp .ca-status > span,
      #exp .ca-count > span,
      #exp .ca-act-sil,
      #exp .ca-act-line,
      #exp .ca-act-rail > span,
      #exp .ca-marks > span,
      #exp .ca-node,
      #exp .ca-node-mk,
      #exp .ca-link,
      #exp .ca-band,
      #exp .ca-mark,
      #exp .ca-mark-lead,
      #exp .ca-leader,
      #exp .ca-loupe,
      #exp .ca-scan,
      #exp .ca-tab,
      #exp .ca-tab-pip,
      #exp .ca-tab-tick,
      #exp .ca-road,
      #exp .ca-road-phase,
      #exp .ca-road-phase > span,
      #exp .ca-sev-pip,
      #exp .ca-sev-bar > span,
      #exp .ca-sev-sq > span,
      #exp .ca-rail > span,
      #exp .ca-stage-rail > span,
      #exp .ca-stage-plate > span,
      #exp .ca-leds > span,
      #exp .ca-foot-rail > span,
      #exp .ca-foot-gauge > span,
      #exp .ca-foot-count > span,
      #exp .ca-sheet::before { transition: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      #exp * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    }
    /* ══════════════════════════════════════════════════════════════════════
       CONTACT — finitions : quatre repères d'angle, une trame graduée au bas
       de la plaque, un balayage très lent, de petites unités en veille et un
       voyant d'état par champ. Purement décoratif : aucun texte inventé,
       aucune donnée. Mouvements lents et continus ; sous mouvement réduit,
       tout est figé dans un état complet.
       ══════════════════════════════════════════════════════════════════════ */
    #contact .ct-tick {
      position: absolute;
      width: 11px;
      height: 11px;
      pointer-events: none;
    }

    #contact .ct-tick::before,
    #contact .ct-tick::after {
      content: "";
      position: absolute;
      background: rgba(250, 247, 240, 0.28);
    }

    #contact .ct-tick::before { width: 11px; height: 1px; }
    #contact .ct-tick::after { width: 1px; height: 11px; }
    #contact .ct-tick-tl { top: 9px; left: 9px; }
    #contact .ct-tick-tr { top: 9px; right: 9px; }
    #contact .ct-tick-bl { bottom: 9px; left: 9px; }
    #contact .ct-tick-br { bottom: 9px; right: 9px; }
    #contact .ct-tick-tr::before,
    #contact .ct-tick-br::before,
    #contact .ct-tick-tr::after,
    #contact .ct-tick-br::after { right: 0; }
    #contact .ct-tick-bl::before,
    #contact .ct-tick-bl::after,
    #contact .ct-tick-br::before,
    #contact .ct-tick-br::after { bottom: 0; }

    #contact .ct-ruler {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 7px;
      pointer-events: none;
      background: repeating-linear-gradient(90deg, rgba(250, 247, 240, 0.18) 0 1px, transparent 1px 45px);
    }

    #contact .ct-ruler::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 4px;
      background: repeating-linear-gradient(90deg, rgba(250, 247, 240, 0.09) 0 1px, transparent 1px 9px);
    }

    #contact .ct-scan {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, transparent 0, rgba(250, 247, 240, 0.1) 1px, transparent 1px);
      animation: ct-scan 17s linear infinite;
    }

    /* les unités : deux yeux, une antenne, deux pieds, un voyant de veille */
    #contact .ct-rail {
      display: flex;
      align-items: flex-end;
      gap: 20px;
      padding: 10px 0 6px 2px;
    }

    #contact .ct-unit {
      position: relative;
      width: 22px;
      height: 15px;
      pointer-events: none;
      border: 1px solid rgba(250, 247, 240, 0.3);
      border-radius: 3px;
      background-color: rgba(250, 247, 240, 0.04);
      background-image: radial-gradient(circle at 7px 6px, rgba(250, 247, 240, 0.55) 1.3px, transparent 1.5px),
                        radial-gradient(circle at 15px 6px, rgba(250, 247, 240, 0.55) 1.3px, transparent 1.5px);
      animation: ct-drift 8.5s ease-in-out infinite;
    }

    #contact .ct-unit::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -5px;
      width: 1px;
      height: 5px;
      background: rgba(250, 247, 240, 0.28);
    }

    #contact .ct-unit::after {
      content: "";
      position: absolute;
      left: 5px;
      right: 5px;
      bottom: -4px;
      height: 4px;
      border-left: 1px solid rgba(250, 247, 240, 0.28);
      border-right: 1px solid rgba(250, 247, 240, 0.28);
    }

    #contact .ct-unit i {
      position: absolute;
      left: 50%;
      top: -9px;
      width: 4px;
      height: 4px;
      margin-left: -2px;
      border-radius: 9999px;
      background: #4f6d4a;
      box-shadow: 0 0 4px rgba(79, 109, 74, 0.85);
      animation: ct-veille 5.4s ease-in-out infinite;
    }

    #contact .ct-unit:nth-child(2) { animation-duration: 10.6s; animation-delay: -3.1s; }
    #contact .ct-unit:nth-child(2) i {
      background: #d63e2a;
      box-shadow: 0 0 4px rgba(214, 62, 42, 0.8);
      animation-delay: -1.7s;
    }

    #contact .ct-unit:nth-child(3) { animation-duration: 9.3s; animation-delay: -6.2s; }
    #contact .ct-unit:nth-child(3) i {
      background: #e59b2c;
      box-shadow: 0 0 4px rgba(229, 155, 44, 0.85);
      animation-delay: -3.5s;
    }

    /* ══════════════════════════════════════════════════════════════════════
       DOCUMENT — la plaquette commerciale, montée comme une planche technique.
       L'aperçu est une composition fictive (aucune maquette PDF n'existe) :
       pages blanches bordées, barres abstraites, repères et voyants. Rien
       ici ne prétend être une donnée réelle ni ne déclenche d'envoi.
       Mouvements lents et continus ; sous mouvement réduit, tout est figé.
       ══════════════════════════════════════════════════════════════════════ */
    #build .build-doc { margin-top: var(--gap-section); }

    #build .build-doc-line {
      margin: 0;
      max-width: 560px;
      font-family: "Space Grotesk", sans-serif;
      font-size: 13px;
      line-height: 20px;
      color: #5A403C;
    }

    /* ————— la planche : le fond technique et sa trame ————— */
    #build .build-doc-board {
      position: relative;
      overflow: hidden;
      margin-top: 22px;
      padding: 26px clamp(18px, 3vw, 34px);
      background: #FAF7F0;
      border: 1px solid #121314;
      border-radius: 4px;
      box-shadow: 2px 2px 0 #121314;
    }

    #build .doc-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image:
        repeating-linear-gradient(90deg, rgba(18, 19, 20, 0.055) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(0deg, rgba(18, 19, 20, 0.055) 0 1px, transparent 1px 24px);
    }

    #build .doc-scan {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, transparent 0, rgba(18, 19, 20, 0.07) 1px, transparent 1px);
      animation: doc-scan 23s linear infinite;
    }

    #build .doc-row {
      position: relative;
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: clamp(22px, 4vw, 60px);
    }

    /* ————— le tas de pages : trois feuilles décalées, plus un fragment ————— */
    #build .doc-fan { display: flex; align-items: flex-end; padding-bottom: 26px; }

    #build .doc-page {
      display: block;
      width: 188px;
      height: 266px;
      padding: 16px 15px;
      background: #FFFFFF;
      border: 1px solid #121314;
      border-radius: 2px;
    }

    #build .doc-page + .doc-page { margin-left: -30px; }
    #build .doc-page-3 { z-index: 1; transform: translateY(-20px); background: #F1EBDF; border-color: #CEC6B5; }
    #build .doc-page-2 { z-index: 2; transform: translateY(-11px); background: #F7F3EA; border-color: #CEC6B5; }
    #build .doc-page-1 {
      z-index: 3;
      display: flex;
      flex-direction: column;
      box-shadow: 2px 2px 0 #121314;
      animation: doc-drift 12s ease-in-out infinite;
    }

    #build .doc-foot { display: flex; gap: 8px; margin-top: auto; }
    #build .doc-foot b { display: block; width: 40px; height: 3px; background: #121314; opacity: 0.12; }
    #build .doc-foot b:last-child { width: 24px; }

    #build .doc-cap { display: flex; align-items: center; gap: 5px; }
    #build .doc-mark { display: block; width: auto; height: 12px; }
    #build .doc-cap b {
      font-family: "JetBrains Mono", monospace;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #121314;
    }

    #build .doc-rule { display: block; height: 1px; margin: 9px 0; background: #121314; opacity: 0.22; }
    #build .doc-rule.is-thin { opacity: 0.12; }

    #build .doc-tag {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 10px;
      font-family: "JetBrains Mono", monospace;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #5A403C;
    }

    #build .doc-bars { display: flex; flex-direction: column; gap: 6px; }
    #build .doc-bars b { display: block; height: 4px; background: #121314; opacity: 0.15; }
    #build .doc-bars b:nth-child(1) { width: 92%; }
    #build .doc-bars b:nth-child(2) { width: 68%; }
    #build .doc-bars b:nth-child(3) { width: 84%; }
    #build .doc-bars b:nth-child(4) { width: 57%; }
    #build .doc-bars b:nth-child(5) { width: 78%; }
    #build .doc-bars b:nth-child(6) { width: 46%; }
    #build .doc-bars.is-lg b { height: 6px; opacity: 0.19; }

    /* ————— repères techniques : mesure, graduations, voyants, unités ————— */
    #build .doc-notes { display: flex; flex-direction: column; gap: 11px; padding-bottom: 34px; flex: 0 0 auto; }

    #build .doc-leader {
      flex: 1 1 40px;
      align-self: center;
      height: 1px;
      margin-bottom: 34px;
      background: repeating-linear-gradient(90deg, #CEC6B5 0 5px, transparent 5px 11px);
    }

    #build .doc-note {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      font-weight: 700;
      line-height: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #5A403C;
    }

    #build .doc-dim { position: relative; display: block; width: 122px; height: 9px; }
    #build .doc-dim::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 4px;
      height: 1px;
      background: #121314;
      opacity: 0.32;
    }
    #build .doc-dim::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.32;
      background:
        linear-gradient(#121314, #121314) left top / 1px 100% no-repeat,
        linear-gradient(#121314, #121314) right top / 1px 100% no-repeat;
    }

    #build .doc-scale { display: flex; align-items: flex-end; gap: 6px; height: 8px; }
    #build .doc-scale i { display: block; width: 1px; height: 4px; background: #121314; opacity: 0.28; }
    #build .doc-scale i:nth-child(3) { height: 8px; }
    #build .doc-scale i:nth-child(5) { height: 6px; }

    #build .doc-led {
      display: inline-block;
      flex: none;
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: rgba(18, 19, 20, 0.28);
      transition: background-color 0.5s ease, box-shadow 0.5s ease;
    }
    #build .doc-led.is-verm {
      background: #D63E2A;
      box-shadow: 0 0 4px rgba(214, 62, 42, 0.85);
      animation: doc-veille 5.4s ease-in-out infinite;
    }
    #build .doc-led.is-matcha {
      background: #4F6D4A;
      box-shadow: 0 0 4px rgba(79, 109, 74, 0.8);
      animation: doc-veille 6.6s ease-in-out infinite;
      animation-delay: -2.1s;
    }
    #build .doc-led.is-amber {
      background: #E59B2C;
      box-shadow: 0 0 4px rgba(229, 155, 44, 0.85);
      animation: doc-veille 7.4s ease-in-out infinite;
      animation-delay: -3.6s;
    }

    #build .doc-units { display: flex; align-items: flex-end; gap: 16px; padding-top: 2px; }
    #build .doc-unit {
      position: relative;
      width: 20px;
      height: 14px;
      border: 1px solid rgba(18, 19, 20, 0.45);
      border-radius: 3px;
      background-color: rgba(18, 19, 20, 0.05);
      background-image:
        radial-gradient(circle at 6px 5px, rgba(18, 19, 20, 0.62) 1.2px, transparent 1.4px),
        radial-gradient(circle at 13px 5px, rgba(18, 19, 20, 0.62) 1.2px, transparent 1.4px);
      animation: doc-drift 9.4s ease-in-out infinite;
    }
    #build .doc-unit::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -4px;
      width: 1px;
      height: 4px;
      background: rgba(18, 19, 20, 0.42);
    }
    #build .doc-unit::after {
      content: "";
      position: absolute;
      left: 4px;
      right: 4px;
      bottom: -4px;
      height: 4px;
      border-left: 1px solid rgba(18, 19, 20, 0.42);
      border-right: 1px solid rgba(18, 19, 20, 0.42);
    }
    #build .doc-unit i {
      position: absolute;
      left: 50%;
      top: -8px;
      width: 4px;
      height: 4px;
      margin-left: -2px;
      border-radius: 999px;
      background: #4F6D4A;
      box-shadow: 0 0 3px rgba(79, 109, 74, 0.8);
      animation: doc-veille 6s ease-in-out infinite;
    }
    #build .doc-unit:nth-child(2) { animation-duration: 11.2s; animation-delay: -4.3s; }
    #build .doc-unit:nth-child(2) i { background: #D63E2A; box-shadow: 0 0 3px rgba(214, 62, 42, 0.8); animation-delay: -1.9s; }

    /* ————— la boîte de récupération : demande de la plaquette par e-mail ————— */
    #build .build-doc-get {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px 20px;
      margin-top: 14px;
      padding: 14px 18px;
      background: #F4EFE6;
      border: 1px solid #CEC6B5;
      border-radius: 4px;
    }

    #build .doc-get-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      font-weight: 700;
      line-height: 14px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #5A403C;
      white-space: nowrap;
    }

    #build .doc-get-fields { display: flex; align-items: center; gap: 10px; flex: 0 1 520px; min-width: 0; margin-left: auto; }

    #build .doc-get-btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 9px 14px;
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      font-weight: 700;
      line-height: 16px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #FAF7F0;
      background: #121314;
      border: 1px solid #121314;
      border-radius: 3px;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      transition: background 180ms cubic-bezier(0.2, 0.7, 0.2, 1),
                  border-color 180ms cubic-bezier(0.2, 0.7, 0.2, 1),
                  transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
    }
    #build .doc-get-btn svg { width: 16px; height: 8px; transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1); }
    #build .doc-get-btn:hover { background: #D63E2A; border-color: #D63E2A; }
    #build .doc-get-btn:hover svg { transform: translateX(2px); }
    #build .doc-get-btn:active { transform: translateY(1px); }
    #build .doc-get-btn:focus-visible { outline: 2px solid #1C3E6E; outline-offset: 2px; }

    @keyframes doc-scan {
      0% { transform: translateY(-100%); opacity: 0; }
      6% { opacity: 1; }
      94% { opacity: 1; }
      100% { transform: translateY(100%); opacity: 0; }
    }
    @keyframes doc-drift {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-1.5px); }
    }
    @keyframes doc-veille {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 1; }
    }

    @media (max-width: 959px) {
      #build .doc-fan { padding-bottom: 18px; }
      #build .doc-page { width: 134px; height: 190px; padding: 11px 10px; }
      #build .doc-page + .doc-page { margin-left: -40px; }
      #build .doc-page-3 { transform: translateY(-15px); }
      #build .doc-page-2 { transform: translateY(-8px); }
      #build .doc-leader { display: none; }
      #build .doc-notes {
        flex: 1 1 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 18px;
        padding-bottom: 22px;
      }
      #build .doc-get-fields { flex: 1 1 300px; margin-left: 0; }
      #build .doc-get-btn { flex: 0 0 auto; }
    }

    @media (max-width: 470px) {
      /* Sous 470 px, le bouton prend la ligne entière. */
      #build .doc-get-fields { flex-wrap: wrap; }
      #build .doc-get-btn { flex: 1 1 100%; }
      #build .doc-get-btn { justify-content: center; }
    }

    @media (prefers-reduced-motion: reduce) {
      #build .doc-page-1,
      #build .doc-unit,
      #build .doc-unit i,
      #build .doc-led,
      #build .doc-scan { animation: none !important; }
      #build .doc-scan { display: none; }
      #build .doc-unit i,
      #build .doc-led { opacity: 1; }
    }

    /* Le conteneur du CONTACT reprend exactement le châssis des modules
       supérieurs (hero, catalogue) : même largeur, même axe, à toutes les
       largeurs d'écran. C'est un ajustement de conteneur uniquement — le
       contenu, les espacements internes et la typographie ne changent pas. */
    main > .ct-chassis {
      width: 1200px;
      max-width: calc(100% - 40px);
      margin: 0 auto;
      position: relative;
    }

    @media (max-width: 959px) {
      main > .ct-chassis {
        width: auto;
        max-width: none;
        margin: 0 20px;
      }
    }

    /* le voyant de veille du panneau : seul repère de l'en-tête, fondu lent */
    #contact .ct-veille {
      display: block;
      width: 6px;
      height: 6px;
      border-radius: 9999px;
      background: #4f6d4a;
      box-shadow: 0 0 5px rgba(79, 109, 74, 0.85);
      animation: ct-veille 6s ease-in-out infinite;
    }

    /* un voyant par champ : veille, survol, saisie en cours, champ rempli */
    #contact .ct-led {
      width: 4px;
      height: 4px;
      flex: none;
      border-radius: 9999px;
      background: rgba(250, 247, 240, 0.25);
      transition: background-color 0.5s ease, box-shadow 0.5s ease;
    }

    #contact .ct-champ:hover .ct-led { background: rgba(250, 247, 240, 0.5); }
    #contact .ct-champ:focus-within .ct-led {
      background: #d63e2a;
      box-shadow: 0 0 5px rgba(214, 62, 42, 0.85);
    }

    #contact .ct-champ.is-rempli .ct-led {
      background: #4f6d4a;
      box-shadow: 0 0 5px rgba(79, 109, 74, 0.8);
    }

    #contact .ct-champ.is-rempli:focus-within .ct-led { box-shadow: 0 0 7px rgba(79, 109, 74, 0.95); }

    #contact .ct-champ input:hover:not(:focus),
    #contact .ct-champ select:hover:not(:focus),
    #contact .ct-champ textarea:hover:not(:focus) { background-color: rgba(255, 255, 255, 0.07); }

    @keyframes ct-scan {
      0% { transform: translateY(-100%); opacity: 0; }
      5% { opacity: 1; }
      95% { opacity: 1; }
      100% { transform: translateY(100%); opacity: 0; }
    }

    @keyframes ct-drift {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-1.5px); }
    }

    @keyframes ct-veille {
      0%, 100% { opacity: 0.35; }
      50% { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      #contact .ct-unit,
      #contact .ct-unit i,
      #contact .ct-scan,
      #contact .ct-veille { animation: none !important; }
      #contact .ct-scan { display: none; }
      #contact .ct-unit i,
      #contact .ct-veille { opacity: 1; }
    }