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

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #000;
      color: var(--wc-text);
      min-height: 100vh;
      position: relative;
      overflow-x: hidden;
    }

    .bubble {
      position: fixed;
      border-radius: 50%;
      filter: blur(80px);
      pointer-events: none;
      z-index: 0;
      will-change: transform;
    }

    header a { font-size: 13px; color: #2e5090; text-decoration: none; }
    header a:hover { color: var(--wc-bleu-clair); }

    main { max-width: 860px; margin: 0 auto; padding: 32px 24px; }

    .section { margin-bottom: 28px; }
    .section-title {
      font-size: var(--wc-surtitre-taille);
      font-weight: var(--wc-surtitre-graisse);
      letter-spacing: var(--wc-surtitre-espacement);
      text-transform: var(--wc-surtitre-casse);
      color: var(--wc-surtitre-couleur);
      margin-bottom: 12px;
    }

    /* Drop zone */
    .dropzone {
      background: rgba(12, 24, 41, 0.25);
      border: 2px dashed rgba(26, 45, 74, 0.7);
      border-radius: var(--wc-r-m);
      padding: 48px 24px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      backdrop-filter: blur(12px);
    }

    .dropzone:hover, .dropzone.dragover {
      border-color: var(--wc-bleu-vif);
      background: rgba(29, 78, 216, 0.1);
    }

    .dropzone svg { color: var(--wc-bord-bleu); margin-bottom: 12px; }
    .dropzone p { font-size: 14px; color: var(--wc-gris-ocean); margin-bottom: 6px; }
    .dropzone span { font-size: 12px; color: var(--wc-bord-bleu); }

    .browse-btn {
      display: inline-block;
      margin-top: 14px;
      background: rgba(29, 78, 216, 0.2);
      border: 1px solid rgba(var(--wc-bleu-vif-rgb), 0.3);
      border-radius: var(--wc-r-s);
      padding: 9px 20px;
      font-size: 13px;
      color: var(--wc-bleu-clair);
      cursor: pointer;
      transition: all 0.15s;
    }
    .browse-btn:hover { background: rgba(29, 78, 216, 0.35); }

    /* Upload queue */
    .queue { display: flex; flex-direction: column; gap: 8px; }

    .queue-item {
      background: rgba(12, 24, 41, 0.25);
      border: 1px solid rgba(26, 45, 74, 0.6);
      border-radius: var(--wc-r-s);
      padding: 12px 16px;
      backdrop-filter: blur(12px);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .queue-name { flex: 1; font-size: 13px; color: var(--wc-texte-doux); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .queue-size { font-size: 12px; color: var(--wc-bord-bleu); flex-shrink: 0; }

    .progress-wrap {
      height: 3px;
      background: rgba(26, 45, 74, 0.6);
      border-radius: 3px;
      margin-top: 8px;
      overflow: hidden;
    }
    .progress-bar {
      height: 100%;
      background: var(--wc-bleu-vif);
      border-radius: 3px;
      transition: width 0.2s;
    }

    .queue-status { font-size: 11px; flex-shrink: 0; }
    .queue-status.done  { color: var(--wc-vert-clair); }
    .queue-status.error { color: var(--wc-rouge-clair); }
    .queue-status.wait  { color: var(--wc-bord-bleu); }

    .upload-all-btn {
      width: 100%;
      margin-top: 12px;
      background: #1d4ed8;
      border: none;
      border-radius: var(--wc-r-s);
      padding: 12px;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      cursor: pointer;
      transition: all 0.15s;
    }
    .upload-all-btn:hover { background: var(--wc-bleu-fonce); }
    .upload-all-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    /* File list */
    .file-list { display: flex; flex-direction: column; gap: 8px; }

    .file-item {
      background: rgba(12, 24, 41, 0.25);
      border: 1px solid rgba(26, 45, 74, 0.6);
      border-radius: var(--wc-r-s);
      padding: 12px 16px;
      backdrop-filter: blur(12px);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .file-icon { font-size: 18px; flex-shrink: 0; }
    .file-info { flex: 1; min-width: 0; }
    .file-name { font-size: 13px; color: var(--wc-texte-bleute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .file-meta { font-size: 11px; color: var(--wc-bord-bleu); margin-top: 2px; }

    .file-action {
      background: none;
      border: none;
      color: #1e3050;
      cursor: pointer;
      font-size: 16px;
      padding: 4px 8px;
      border-radius: var(--wc-r-xs);
      transition: all 0.15s;
      flex-shrink: 0;
      text-decoration: none;
      display: flex;
      align-items: center;
    }
    .file-action:hover { color: var(--wc-bleu-clair); }
    .file-delete { color: #1e3050; }
    .file-delete:hover { color: var(--wc-rouge-vif); }

    .empty-msg { text-align: center; color: var(--wc-bord-bleu); font-size: 13px; padding: 24px; }

    .toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: rgba(12, 24, 41, 0.9);
      border: 1px solid var(--wc-bord-nuit);
      border-radius: var(--wc-r-s);
      padding: 12px 18px;
      font-size: 13px;
      color: var(--wc-texte-doux);
      z-index: 200;
      opacity: 0;
      transform: translateY(8px);
      transition: all 0.2s;
      pointer-events: none;
      backdrop-filter: blur(12px);
    }
    .toast.show { opacity: 1; transform: translateY(0); }
    .toast.success { border-color: #1a5c34; color: var(--wc-vert-clair); }
    .toast.error   { border-color: #5c1a1a; color: var(--wc-rouge-clair); }

    @media (max-width: 700px) {
      .header-right a, .header-right button { padding: 6px 10px !important; font-size: 12px !important; }
      main { padding: 14px 16px; }
      .dropzone { padding: 24px 14px; }
      .file-item { flex-wrap: wrap; gap: 8px; }
      .queue-item { flex-wrap: wrap; }
    }
    @media (max-width: 420px) {
      .header-right a { font-size: 11px !important; }
      #login-overlay > div { margin: 12px !important; }
      .login-card { padding: 20px 14px !important; }
    }
  
    /* ─── Standard Nav (logo | titre | id) ─── */
    nav {
      position: sticky; top: 0; z-index: 1000;
      height: 64px;
      display: grid; grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: 0 24px;
      background: rgba(0,0,0,0.75);
      backdrop-filter: saturate(180%) blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    nav .brand { justify-self: start; display: inline-flex; align-items: center; height: 100%; }
    nav .brand img { height: 24px; display: block; }
    nav .nav-pill {
      justify-self: center;
      display: inline-flex; align-items: center;
      padding: 6px 14px;
      font-size: 12px; font-weight: 500;
      color: var(--wc-text-secondary);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--wc-r-pilule);
      max-width: 60vw;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      line-height: 1;
    }
    nav .nav-user {
      justify-self: end;
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px;
      border-radius: var(--wc-r-pilule);
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      font-size: 12px; font-weight: 500;
      color: var(--wc-text-secondary);
      cursor: pointer;
      transition: all .15s;
      line-height: 1;
    }
    nav .nav-user:hover { background: rgba(255,69,58,0.15); border-color: rgba(255,69,58,0.3); color: var(--wc-red); }
    nav .nav-user .x { opacity: 0.5; font-size: 10px; }
    nav .nav-clock {
      justify-self: end;
      font-size: 18px; font-weight: 700;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.04em;
      color: var(--wc-texte-bleute);
      text-shadow: 0 0 8px rgba(var(--wc-bleu-clair-rgb),0.45), 0 0 40px rgba(var(--wc-bleu-vif-rgb),0.35);
      line-height: 1;
    }
    nav .nav-timer {
      justify-self: center;
      font-size: 22px; font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: var(--wc-texte-bleute); letter-spacing: 0.04em;
      line-height: 1;
    }
    @media (max-width: 600px) {
      nav { padding: 0 14px; height: 56px; }
      nav .brand img { height: 13px; }
      nav .nav-pill { font-size: 9px; padding: 4px 8px; max-width: 50vw; }
      nav .nav-user { font-size: 10px; padding: 4px 11px; }
    }
    /* ─── Footer ─── */
    .page-footer {
      padding: 18px 32px;
      border-top: 1px solid rgba(255,255,255,0.07);
      display: flex; justify-content: center; align-items: center;
      font-size: 12px; color: rgba(255,255,255,0.3);
      margin-top: auto;
    }
    .page-footer a { color: rgba(255,255,255,0.3); text-decoration: none; }
    .page-footer a:hover { color: rgba(255,255,255,0.6); }

    /* Cibles tactiles : sur ecran tactile uniquement, ces boutons-icones
       mesuraient 20 a 29 px de haut — trop petits pour le doigt. Aucun effet
       a la souris. */
    @media (pointer: coarse) {
      .file-action {
        min-height: 40px;
        min-width: 40px;
      }
      input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
    }