@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

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

    :root {
      --bg:     #252c3a;
      --surf:   #313a50;
      --border: #3e4a63;
      --text:   #f3f3f3;
      --muted:  #8b95a8;
      --blue:   #0059ff;
      --blue-l: #5b9bff;
    }

    html, body {
      height: 100%;
      font-family: 'Inter', system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }

    .hidden { display: none !important; }

    #screensaver {
      position: fixed;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(-45deg, #252c3a, #2a3348, #252c3a, #2d3a52);
      background-size: 400% 400%;
      animation: bgPulse 12s ease infinite;
      gap: 0;
      overflow: hidden;
    }

    @keyframes bgPulse {
      0%, 100% { background-position: 0% 50%; }
      50%       { background-position: 100% 50%; }
    }
    @keyframes bgDiag {
      0%, 100% { background-position: 0% 0%; }
      50%       { background-position: 100% 100%; }
    }
    @keyframes bgCycle {
      0%   { background-position: 0%   50%; }
      25%  { background-position: 100% 50%; }
      50%  { background-position: 50%  0%;  }
      75%  { background-position: 0%   100%; }
      100% { background-position: 0%   50%; }
    }

    /* ── Background themes ── */
    #screensaver.bg-noir       { background: #000000; }
    #screensaver.bg-blanc      { background: #ffffff; }
    #screensaver.bg-blanc .vs-clock,
    #screensaver.bg-blanc .vs-date,
    #screensaver.bg-blanc #vs-phrase,
    #screensaver.bg-blanc .vs-radio-name,
    #screensaver.bg-blanc .vs-radio-icon { color: #1a1a2e; }
    #screensaver.bg-blanc .vs-radio-eq span { background: #1a1a2e; }
    #screensaver.bg-aurore     { background: linear-gradient(-45deg,#071a0a,#0a2415,#0d2a1a,#071a12); background-size:400% 400%; animation:bgDiag  18s ease infinite; }
    #screensaver.bg-braise     { background: linear-gradient(-45deg,#1a0800,#2d1000,#1a0600,#200d00); background-size:400% 400%; animation:bgCycle  7s ease infinite; }
    #screensaver.bg-glace      { background: linear-gradient(-45deg,#0d1520,#162040,#0f1c30,#1a2848); background-size:400% 400%; animation:bgPulse 20s ease infinite; }
    #screensaver.bg-foret      { background: linear-gradient(-45deg,#0a1a10,#0f2518,#0a1e14,#0d2015); background-size:400% 400%; animation:bgDiag  22s ease infinite; }
    #screensaver.bg-crepuscule { background: linear-gradient(-45deg,#1a0a30,#251040,#200a35,#2a0f3f); background-size:400% 400%; animation:bgCycle 12s ease infinite; }
    #screensaver.bg-dore       { background: linear-gradient(-45deg,#1a1400,#221a00,#1a1200,#201600); background-size:400% 400%; animation:bgPulse  9s ease infinite; }
    #screensaver.bg-rubis      { background: linear-gradient(-45deg,#1a0008,#250010,#1a0005,#20000d); background-size:400% 400%; animation:bgCycle  6s ease infinite; }
    #screensaver.bg-abysses    { background: linear-gradient(-45deg,#020810,#040d1e,#020a14,#030f1c); background-size:400% 400%; animation:bgDiag  28s ease infinite; }
    #screensaver.bg-encre      { background: linear-gradient(-45deg,#060606,#0a0a0a,#060606,#0d0d0d); background-size:400% 400%; animation:bgPulse 30s ease infinite; }

    #vs-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .vs-halo {
      position: absolute;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--halo-c, rgba(0,89,255,0.12)) 0%, transparent 70%);
      animation: haloBreath 6s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes haloBreath {
      0%, 100% { transform: scale(1);   opacity: 0.7; }
      50%       { transform: scale(1.3); opacity: 1; }
    }

    .vs-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    @keyframes clockFade {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .vs-date {
      margin-top: 18px;
      font-size: clamp(1.2rem, 2.2vw, 1.8rem);
      color: #ffffff;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      animation: fadeUp 1.6s ease both;
    }

    .vs-clock {
      font-size: clamp(5rem, 14vw, 11rem);
      font-weight: 800;
      color: #fff;
      letter-spacing: -4px;
      line-height: 1;
      margin-bottom: 20px;
      font-variant-numeric: tabular-nums;
      animation: clockFade 1s ease-in-out;
    }

    .vs-brand {
      font-size: clamp(1.2rem, 3vw, 2rem);
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.5px;
      margin-bottom: 12px;
      animation: fadeUp 1.2s ease both;
    }
    .vs-brand em { color: var(--blue-l); font-style: normal; }

    .vs-badge {
      display: inline-block;
      background: rgba(91,155,255,.12);
      color: var(--blue-l);
      font-size: clamp(10px, 1.2vw, 13px);
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 5px 16px;
      border-radius: 20px;
      border: 1px solid rgba(91,155,255,.25);
      animation: fadeUp 1.4s ease both;
    }

    #vs-phrase {
      font-size: clamp(1.4rem, 3.5vw, 2.6rem);
      font-weight: 600;
      color: rgba(255,255,255,0.85);
      font-style: italic;
      letter-spacing: 0.3px;
      text-align: center;
      max-width: 75vw;
      line-height: 1.4;
      margin-bottom: 48px;
      animation: fadeUp 1.1s ease both;
      display: none;
    }

    #vs-radio {
      margin-top: 28px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .5s ease;
    }
    #vs-radio.visible { opacity: 1; pointer-events: auto; cursor: pointer; }
    .vs-radio-pill {
      display: inline-flex; align-items: center; gap: 10px;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(8px);
      border-radius: 999px;
      padding: 7px 16px 7px 12px;
    }
    .vs-radio-icon { color: rgba(255,255,255,.8); flex-shrink: 0; }
    .vs-radio-eq {
      display: flex; align-items: flex-end; gap: 3px; height: 20px;
    }
    .vs-radio-eq span {
      display: block; width: 3px; border-radius: 2px;
      background: #22d3ee; height: 3px;
    }
    #vs-radio.visible .vs-radio-eq span:nth-child(1) { animation: vsEq .7s ease-in-out -.42s infinite; }
    #vs-radio.visible .vs-radio-eq span:nth-child(2) { animation: vsEq .7s ease-in-out -.28s infinite; }
    #vs-radio.visible .vs-radio-eq span:nth-child(3) { animation: vsEq .7s ease-in-out -.14s infinite; }
    #vs-radio.visible .vs-radio-eq span:nth-child(4) { animation: vsEq .7s ease-in-out  0s   infinite; }
    #vs-radio.visible .vs-radio-eq span:nth-child(5) { animation: vsEq .7s ease-in-out  .14s infinite; }
    #vs-radio.visible .vs-radio-eq span:nth-child(6) { animation: vsEq .7s ease-in-out  .28s infinite; }
    #vs-radio.visible .vs-radio-eq span:nth-child(7) { animation: vsEq .7s ease-in-out  .42s infinite; }
    @keyframes vsEq {
      0%, 100% { height: 3px;  opacity: .4; }
      50%       { height: 18px; opacity: 1;  }
    }
    .vs-radio-name {
      font-size: clamp(12px, 1.4vw, 15px);
      font-weight: 700;
      color: rgba(255,255,255,.95);
      letter-spacing: .3px;
    }

    /* ── Audio display (son envoyé) ── */
    #audioDisplay {
      display: none; position: absolute; inset: 0;
      align-items: center; justify-content: center;
      flex-direction: column; gap: 24px;
      background: radial-gradient(ellipse at center, #0f1a2e 0%, #060a10 100%);
    }
    .audio-display-icon {
      color: #22d3ee;
      filter: drop-shadow(0 0 24px rgba(34,211,238,.4));
      animation: audioIconPulse 2s ease-in-out infinite;
    }
    @keyframes audioIconPulse {
      0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 16px rgba(34,211,238,.3)); }
      50%       { transform: scale(1.06); filter: drop-shadow(0 0 32px rgba(34,211,238,.6)); }
    }
    .audio-display-label {
      font-size: clamp(18px, 3vw, 28px);
      font-weight: 700; color: #fff;
      text-align: center; padding: 0 48px;
      max-width: 800px; line-height: 1.3;
      text-shadow: 0 2px 20px rgba(0,0,0,.5);
    }
    .audio-display-eq {
      display: flex; gap: 5px; align-items: flex-end; height: 44px;
    }
    .audio-display-eq span {
      width: 5px; border-radius: 3px;
      background: linear-gradient(to top, #0ea5e9, #22d3ee);
      height: 5px;
    }
    .audio-display-eq span:nth-child(1)  { animation: audioEq .9s ease-in-out -.72s infinite; }
    .audio-display-eq span:nth-child(2)  { animation: audioEq .9s ease-in-out -.56s infinite; }
    .audio-display-eq span:nth-child(3)  { animation: audioEq .9s ease-in-out -.40s infinite; }
    .audio-display-eq span:nth-child(4)  { animation: audioEq .9s ease-in-out -.24s infinite; }
    .audio-display-eq span:nth-child(5)  { animation: audioEq .9s ease-in-out -.08s infinite; }
    .audio-display-eq span:nth-child(6)  { animation: audioEq .9s ease-in-out  .08s infinite; }
    .audio-display-eq span:nth-child(7)  { animation: audioEq .9s ease-in-out  .24s infinite; }
    .audio-display-eq span:nth-child(8)  { animation: audioEq .9s ease-in-out  .40s infinite; }
    .audio-display-eq span:nth-child(9)  { animation: audioEq .9s ease-in-out  .56s infinite; }
    .audio-display-eq span:nth-child(10) { animation: audioEq .9s ease-in-out  .72s infinite; }
    @keyframes audioEq {
      0%, 100% { height: 5px;  opacity: .3; }
      50%       { height: 38px; opacity: 1;  }
    }
    #vs-logos {
      position: fixed;
      bottom: 20px;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      pointer-events: none;
      background: rgba(243,243,243,0.07);
      border: 1px solid rgba(243,243,243,0.12);
      border-radius: 16px;
      padding: 10px 28px;
      width: fit-content;
      margin: 0 auto;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    #vs-logos img {
      height: clamp(42px, 6vh, 72px);
      width: auto;
      opacity: .9;
      filter: brightness(1.1);
    }
    #vs-logos img[alt="UMHP"] {
      height: clamp(58px, 8vh, 92px);
    }

    .vs-topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 52px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 20px;
      background: rgba(24,28,36,0.6);
      backdrop-filter: blur(8px);
    }

    .vs-topbar {
      display: none !important;
    }
    .vs-topbar-spacer { flex: 1; }

    .conn-pill {
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(35,40,55,.7);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
    }
    .conn-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--muted);
      flex-shrink: 0;
    }
    .conn-dot.ok  { background: #4cd97b; box-shadow: 0 0 6px rgba(76,217,123,.6); }
    .conn-dot.err { background: #ef4444; }

    .ctrl-btn {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      padding: 6px 13px;
      cursor: pointer;
      white-space: nowrap;
      transition: color .15s, border-color .15s, background .15s;
    }
    .ctrl-btn:hover { color: var(--text); border-color: var(--blue-l); }
    .ctrl-btn.active { color: var(--text); border-color: var(--blue); background: rgba(var(--blue-rgb, 66,153,225),.15); }

    #player {
      position: fixed;
      inset: 0;
      display: flex;
      flex-direction: column;
    }


    #whiteboardPane {
      flex: 1;
      background: #ffffff;
      display: none;
      flex-direction: column;
    }

    #whiteboardContainer {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #ffffff;
    }

    #whiteboardCanvas {
      flex: 1;
      background: #ffffff;
      cursor: crosshair;
      touch-action: none;
    }

    #wb-controls-container {
      display: none !important;
    }

    .wb-logo {
      position: absolute;
      bottom: 18px;
      height: clamp(36px, 5vh, 60px);
      width: auto;
      opacity: 0.18;
      pointer-events: none;
    }
    .wb-logo-left  { left: 18px; }
    .wb-logo-right { right: 18px; }

    .wb-controls {
      background: #f5f5f5;
      border-top: 1px solid #ddd;
      padding: 12px 16px;
      display: flex;
      gap: 20px;
      align-items: center;
      flex-wrap: wrap;
      font-family: 'Inter', system-ui, sans-serif;
    }

    .wb-control-group {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .wb-control-group label {
      font-size: 13px;
      font-weight: 600;
      color: #333;
    }

    .wb-color-picker {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .wb-color-input {
      width: 40px;
      height: 32px;
      border: 1px solid #ccc;
      border-radius: 6px;
      cursor: pointer;
    }

    .wb-color-preset {
      width: 28px;
      height: 28px;
      border: 2px solid #ccc;
      border-radius: 4px;
      cursor: pointer;
      transition: all .2s;
    }

    .wb-color-preset:hover {
      border-color: #666;
      transform: scale(1.1);
    }

    .wb-width-selector {
      display: flex;
      gap: 6px;
    }

    .wb-width-btn {
      min-width: 32px;
      height: 32px;
      border: 1px solid #ccc;
      border-radius: 6px;
      background: white;
      cursor: pointer;
      font-weight: 600;
      color: #333;
      transition: all .2s;
    }

    .wb-width-btn:hover {
      border-color: #0059ff;
      background: #f0f7ff;
    }

    .wb-width-btn.active {
      background: #0059ff;
      color: white;
      border-color: #0059ff;
    }

    .wb-btn {
      padding: 8px 14px;
      background: white;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      color: #333;
      cursor: pointer;
      transition: all .2s;
    }

    .wb-btn:hover {
      border-color: #0059ff;
      color: #0059ff;
    }

    .wb-btn-danger {
      color: #c0392b;
      border-color: #c0392b;
    }

    .wb-btn-danger:hover {
      background: #fff5f5;
    }

    #playerContent {
      flex: 1;
      position: relative;
      overflow: hidden;
      transform-origin: 0 0;
      will-change: transform;
    }

    #playerFrame {
      position: absolute;
      inset: 0;
      border: none;
      width: 100%;
      height: 100%;
      display: block;
      background: #fff;
    }

    #playerImg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #ffffff;
      display: none;
    }

    /* width/height:100% obligatoires : un canvas (élément remplacé) en inset:0
       sans largeur explicite prend sa taille intrinsèque → boucle de redimensionnement. */
    #annotOverlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: none;
      pointer-events: none;
      z-index: 6;
    }

    #liveOverlay {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      touch-action: none;
      z-index: 7;
    }

    #annotOverlayImg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: none;
      pointer-events: none;
      z-index: 8101;
    }

    #liveOverlayImg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      touch-action: none;
      z-index: 8102;
    }

    #projectionDateTime {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 9501;
      display: none;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 10px;
      background: var(--surf);
      border: 1px solid var(--border);
      color: var(--text);
      font-size: 14px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    #projectionDateTime.visible { display: inline-flex; }
    #projectionDate { text-transform: capitalize; }


    #fs-btn {
      position: fixed;
      bottom: 16px;
      right: 16px;
      z-index: 9999;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.15);
      background: rgba(24,28,36,0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: rgba(255,255,255,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      transition: opacity .3s, color .15s, border-color .15s, background .15s;
      pointer-events: none;
    }
    #fs-btn.visible {
      opacity: 1;
      pointer-events: auto;
    }
    #fs-btn:hover {
      color: #fff;
      border-color: rgba(255,255,255,0.35);
      background: rgba(24,28,36,0.9);
    }

    /* ── Bouton flottant Dessin (entrée du mode dessin, sur veille + projection) ── */
    #draw-toggle-btn {
      position: fixed;
      bottom: 16px;
      right: 64px;
      z-index: 9999;
      height: 40px;
      padding: 0 14px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.15);
      background: rgba(24,28,36,0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: rgba(255,255,255,0.6);
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s, color .15s, border-color .15s, background .15s;
    }
    #draw-toggle-btn.visible { opacity: 1; pointer-events: auto; }
    #draw-toggle-btn:hover {
      color: #fff;
      border-color: rgba(255,255,255,0.35);
      background: rgba(24,28,36,0.9);
    }
    #draw-toggle-btn.active {
      opacity: 1;
      pointer-events: auto;
      color: #fff;
      border-color: var(--blue);
      background: rgba(var(--blue-rgb, 66,153,225),.30);
    }
    /* ── Cluster en bas à droite : Dessin + plein écran + horloge ── */
    #proj-controls {
      position: fixed;
      top: 14px;
      left: 14px;
      z-index: 9600;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    /* Les boutons et l'horloge deviennent des éléments du cluster (toujours visibles) */
    #proj-controls > #draw-toggle-btn,
    #proj-controls > #fs-btn {
      position: static;
      bottom: auto; right: auto;
      opacity: 1;
      pointer-events: auto;
    }
    #proj-controls > #projectionDateTime {
      position: static;
      top: auto; left: auto; bottom: auto; right: auto;
    }

    #img-pres {
      position: fixed; inset: 0; z-index: 8000;
      /* Transparent : le fond animé de la veille (screensaver) reste visible derrière l'image */
      background: transparent;
      display: none;
      align-items: center; justify-content: center;
    }
    #img-pres.visible { display: flex; }
    /* Pendant l'affichage d'une image : ne garder que le fond de veille, masquer horloge/phrase/radio */
    #screensaver.behind-image .vs-content,
    #screensaver.behind-image .vs-topbar { display: none !important; }

    /* ── Thème clair — Aurora nordique ── */
    @keyframes bgPulseLight {
      0%, 100% { background-position: 0% 50%; }
      50%       { background-position: 100% 50%; }
    }
    body.theme-light #screensaver {
      background: linear-gradient(-45deg, #eef2ff, #f0f9ff, #f5f0ff, #eef8f4) !important;
      background-size: 400% 400% !important;
      animation: bgPulseLight 16s ease infinite !important;
    }
    body.theme-light .vs-clock   { color: #1e293b; }
    body.theme-light .vs-date    { color: #334155; }
    body.theme-light #vs-phrase  { color: #1e293b; }
    body.theme-light .vs-brand   { color: #475569; }
    body.theme-light .vs-brand em { color: #4f46e5; }
    body.theme-light .vs-badge   { background: rgba(99,102,241,.1); color: #4f46e5; border-color: rgba(99,102,241,.2); }
    body.theme-light .vs-radio-name { color: #1e293b; }
    body.theme-light .vs-radio-eq span { background: #334155; }
    body.theme-light .vs-halo    { background: radial-gradient(circle, rgba(99,102,241,.14) 0%, transparent 70%); }
    body.theme-light #vs-logos   { background: rgb(128, 128, 128); border-color: rgba(30,41,59,0.12); }

    /* ── Thème clair — image présentation ── */
    body.theme-light #img-pres {
      background: linear-gradient(-45deg, #eef2ff, #f0f9ff, #f5f0ff, #eef8f4);
      background-size: 400% 400%;
      animation: bgPulseLight 12s ease infinite;
    }
    body.theme-light #imgp-img {
      box-shadow: 0 0 40px rgba(99,102,241,.2), 0 8px 32px rgba(0,0,0,.18);
    }
    body.theme-light .imgp-texte {
      color: #1e293b;
    }

    .imgp-box {
      display: flex; align-items: center; justify-content: center;
      gap: clamp(20px, 3vw, 48px);
      max-width: 94vw; max-height: 94vh;
    }
    .imgp-box.pos-top, .imgp-box.pos-bottom { flex-direction: column; }
    .imgp-box.pos-right { flex-direction: row-reverse; }
    #imgp-img {
      max-width: 82vw; max-height: 82vh;
      border-radius: 16px;
      box-shadow: 0 0 60px rgba(0,89,255,.25), 0 8px 40px rgba(0,0,0,.65);
      animation: fadeUp 1s ease both;
    }
    .imgp-texte {
      font-size: clamp(1.2rem, 3vw, 2.2rem);
      font-weight: 800; color: #fff;
      text-align: center; letter-spacing: .12em;
      text-transform: uppercase;
      animation: fadeUp 1.3s ease both;
    }

    /* ── Whiteboard FAB ── */
    #wb-fab {
      position: fixed;
      bottom: 28px;
      right: 28px;
      height: 40px;
      padding: 0 16px 0 12px;
      border-radius: 999px;
      background: #007acc;
      border: 1.5px solid rgba(78,201,176,0.5);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      font-family: 'Segoe UI', system-ui, sans-serif;
      letter-spacing: .2px;
      display: none;
      align-items: center;
      justify-content: center;
      gap: 7px;
      cursor: grab;
      z-index: 9999;
      box-shadow: 0 4px 18px rgba(0,0,0,0.5);
      user-select: none;
      touch-action: none;
      transition: background .15s, border-color .15s, box-shadow .15s;
    }
    #wb-fab:hover { background: #005a9e; box-shadow: 0 6px 24px rgba(0,0,0,0.6); }
    #wb-fab.active { background: #155e38; border-color: #4ec9b0; }
    #wb-fab.dragging { cursor: grabbing; }

    /* ── Menu dessin — barre verticale sombre (slim, façon Figma/tldraw) ── */
    #wb-menu {
      position: fixed;
      background: #1e1e1e;
      border: 1px solid #333;
      border-radius: 14px;
      padding: 6px;
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      z-index: 9998;
      box-shadow: 0 12px 34px rgba(0,0,0,0.6);
      max-height: 92vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    #wb-menu.open { display: flex; }
    #wb-menu::-webkit-scrollbar { width: 0; }

    .wbm-sep { width: 26px; height: 1px; background: #383838; margin: 4px 0; border: none; flex-shrink: 0; }

    .wbm-tool, .wbm-act {
      width: 42px; height: 42px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 10px;
      border: 1px solid transparent;
      background: transparent;
      color: #d0d0d0;
      cursor: pointer;
      flex-shrink: 0;
      transition: background .12s, color .12s, border-color .12s;
    }
    .wbm-tool svg, .wbm-act svg { width: 20px; height: 20px; }
    .wbm-tool:hover, .wbm-act:hover { background: #2d2d2d; color: #fff; }
    .wbm-tool.active { background: #0e639c; border-color: #1f8ad2; color: #fff; }
    .wbm-act.danger { color: #ef8a8a; }
    .wbm-act.danger:hover { background: rgba(230,90,90,.16); color: #ff9d9d; }
    .wbm-terminate { color: #ef8a8a; }
    .wbm-terminate:hover { background: rgba(230,90,90,.16); color: #ff9d9d; }

    .wbm-color {
      width: 26px; height: 26px;
      border-radius: 50%;
      border: 2px solid #2b2b2b;
      background: var(--c, #000);
      cursor: pointer;
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
      transition: transform .1s, box-shadow .12s, border-color .12s;
    }
    .wbm-color:hover { transform: scale(1.14); }
    .wbm-color.active { border-color: #fff; box-shadow: 0 0 0 2px #1f8ad2; }

    .wbm-width {
      width: 42px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 9px;
      border: 1px solid transparent;
      background: transparent;
      cursor: pointer;
      flex-shrink: 0;
      transition: background .12s, border-color .12s;
    }
    .wbm-width:hover { background: #2d2d2d; }
    .wbm-width.active { background: #2d2d2d; border-color: #1f8ad2; }
    .wbm-dot { display: block; border-radius: 50%; background: #cfcfcf; }
    .wbm-width.active .wbm-dot { background: #fff; }