/* ===== RenderFarm - CSS global ===== */
:root {
  --bg: #0f1115; --card: #1a1d24; --accent: #4f8cff; --text: #e4e6eb;
  --muted: #8b90a0; --border: #2a2e38; --green: #3ecf8e; --orange: #ffa94d; --red: #ff5c5c;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Liens de contenu. Sans regle, le navigateur les peint en bleu vif puis en
   violet une fois visites : sur fond sombre ca jure, et le violet laisse
   croire a un etat qui n'existe pas ici. Une regle globale evite d'y penser
   page par page — c'est le defaut qui avait laisse le lien de la page vide
   en violet. Elle ne touche que les liens sans couleur propre : tous ceux
   qui ont une classe (.fname, .back, .btn-new, .dl-btn) la definissent
   eux-memes, avec une specificite superieure. */
a { color: var(--accent); }
a:visited { color: var(--accent); }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

/* Header (commun a toutes les pages) */
header { background: var(--card); border-bottom: 1px solid var(--border); padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
.logo span { color: var(--accent); }
/* Logo de l'atelier, a gauche du titre. La regle est portee par header et
   non par .logo tout court : la carte de connexion a elle aussi un .logo,
   qui doit rester une simple ligne de texte. */
header .logo { display: flex; align-items: center; gap: 0.6rem; }
header .logo .brand { flex: 0 0 auto; height: 32px; width: auto; display: block; }
@media (max-width: 640px) { header .logo .brand { height: 26px; } }
.user { display: flex; align-items: center; }
.user a, .nav a { color: var(--muted); text-decoration: none; margin-left: 1.5rem; font-size: 0.9rem; }
.user a:hover, .nav a:hover { color: var(--accent); }
.uname { color: var(--text); font-size: 0.9rem; font-weight: 500; }

/* Badges de statut (communs) */
.badge { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.badge.pending, .badge.cancelled { background: rgba(139,144,160,0.15); color: var(--muted); }
.badge.rendering, .badge.cancelling { background: rgba(255,169,77,0.15); color: var(--orange); }
.badge.encoding, .badge.pausing, .badge.resuming, .badge.paused { background: rgba(79,140,255,0.15); color: var(--accent); }
.badge.done { background: rgba(62,207,142,0.15); color: var(--green); }
.badge.error { background: rgba(255,92,92,0.15); color: var(--red); }


/* Layout specifique login */
body.page-login { display: flex; align-items: center; justify-content: center; }

/* ===== home ===== */
.page-home /* CSS commun dans /static/style.css - ci-dessous : specifique a cette page */
    .container { max-width: 1000px; margin: 2rem auto; padding: 0 2rem; }
.page-home .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.page-home .topbar h1 { font-size: 1.4rem; font-weight: 600; }
.page-home .btn-new { background: var(--accent); color: white; padding: 0.6rem 1.2rem; border-radius: 8px; text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.page-home .btn-new:hover { opacity: 0.9; }
.page-home .empty { background: var(--card); border: 1px dashed var(--border); border-radius: 12px; padding: 3rem; text-align: center; color: var(--muted); }
.page-home table { width: 100%; border-collapse: collapse; }
.page-home th { text-align: left; font-size: 0.8rem; color: var(--muted); font-weight: 500; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.page-home td { padding: 1rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.page-home .fname { color: var(--text); text-decoration: none; font-weight: 500; }
.page-home .fname:hover { color: var(--accent); }
.page-home .progress-bar { width: 160px; height: 10px; background: #2a2e38; border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 0.5rem; }
.page-home .progress-fill { display: block; height: 10px; background: linear-gradient(90deg, #3ecf8e, #4fe0a0); transition: width 0.5s; }
.page-home .progress-text { font-size: 0.8rem; color: var(--muted); }
.page-home .encoding-text { color: var(--accent); font-weight: 600; }
.page-home .dots::after { content: '...'; display: inline-block; overflow: hidden; vertical-align: bottom; width: 0; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { to { width: 1.3em; } }
.page-home .actions { display: flex; gap: 0.4rem; flex-wrap: nowrap; align-items: center; }
.page-home .action-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.55rem; border-radius: 8px; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text); transition: all 0.15s; white-space: nowrap; }
.page-home .action-btn.text { font-size: 0.75rem; }
.page-home .action-btn.pause { color: var(--orange); border-color: rgba(255,169,77,0.3); }
.page-home .action-btn.pause:hover { background: rgba(255,169,77,0.12); border-color: var(--orange); }
.page-home .action-btn.resume { color: var(--green); border-color: rgba(62,207,142,0.3); }
.page-home .action-btn.resume:hover { background: rgba(62,207,142,0.12); border-color: var(--green); }
.page-home .action-btn.stop { color: var(--red); border-color: rgba(255,92,92,0.3); }
.page-home .action-btn.stop:hover { background: rgba(255,92,92,0.12); border-color: var(--red); }
.page-home .action-btn.dl { color: var(--accent); border-color: rgba(79,140,255,0.3); }
.page-home .action-btn.dl:hover { background: rgba(79,140,255,0.12); border-color: var(--accent); }
.page-home .dl-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 72px; padding: 0.4rem 0.75rem; border-radius: 8px; border: 1px solid rgba(79,140,255,0.3); background: rgba(79,140,255,0.06); color: var(--accent); text-decoration: none; transition: all 0.15s; line-height: 1.25; }
.page-home .dl-btn:hover { background: rgba(79,140,255,0.16); border-color: var(--accent); transform: translateY(-1px); }
.page-home .dl-btn .dl-top { font-size: 0.78rem; font-weight: 600; }
.page-home .dl-btn .dl-size { font-size: 0.66rem; opacity: 0.75; margin-top: 0.1rem; }
.page-home .dl-btn.hd { color: #7aa7ff; border-color: rgba(122,167,255,0.35); background: rgba(122,167,255,0.08); }
.page-home .dl-btn.hd:hover { background: rgba(122,167,255,0.18); border-color: #7aa7ff; }
.page-home .dl-btn.preview { cursor: pointer; font-family: inherit; color: var(--orange); border-color: rgba(255,169,77,0.35); background: rgba(255,169,77,0.08); }
.page-home .dl-btn.preview:hover { background: rgba(255,169,77,0.18); border-color: var(--orange); }
.page-home .fps-badge { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 10px; font-size: 0.68rem; font-weight: 600; vertical-align: middle; }
.page-home .fps-badge.ok { background: rgba(139,144,160,0.15); color: var(--muted); }
.page-home .fps-badge.warn { background: rgba(255,169,77,0.15); color: var(--orange); cursor: help; }
.page-home .quality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
.page-home .quality-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; }
.page-home .quality-card.draft { border-color: rgba(255,169,77,0.25); }
.page-home .quality-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.page-home .quality-name { font-weight: 600; font-size: 0.85rem; color: var(--accent); }
.page-home .quality-card.draft .quality-name { color: var(--orange); }
.page-home .quality-use { font-size: 0.68rem; color: var(--muted); font-style: italic; }
.page-home .quality-res { font-size: 1.3rem; font-weight: 700; color: var(--text); margin-bottom: 0.15rem; }
.page-home .quality-specs { font-size: 0.72rem; color: var(--muted); }
@media (max-width: 700px) { .page-home .quality-grid { grid-template-columns: 1fr; } }
.page-home .action-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-home .action-btn.primary { background: var(--accent); color: white; border-color: var(--accent); }
.page-home .action-btn.primary:hover { opacity: 0.9; color: white; }
.page-home .action-btn.danger:hover { border-color: var(--red); color: var(--red); }
.page-home .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 100; align-items: center; justify-content: center; padding: 2rem; }
.page-home .modal.open { display: flex; }
.page-home .modal video { max-width: 90vw; max-height: 80vh; border-radius: 8px; display: block; }
.page-home .modal-inner { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.page-home .draft-label { background: rgba(255,169,77,0.15); color: var(--orange); border: 1px solid rgba(255,169,77,0.3); padding: 0.4rem 1rem; border-radius: 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; }
.page-home .modal-close { position: absolute; top: 1.5rem; right: 2rem; color: white; font-size: 2rem; cursor: pointer; background: none; border: none; }

/* ===== dashboard ===== */
.page-dashboard .container { max-width:1150px; margin:2rem auto; padding:0 2rem; }
.page-dashboard h1 { font-size:1.4rem; margin-bottom:0.3rem; font-weight:600; }
.page-dashboard .sub { color:var(--muted); font-size:0.9rem; margin-bottom:1.5rem; }
.page-dashboard h2 { font-size:1.05rem; margin:2rem 0 1rem; font-weight:600; color:var(--muted); letter-spacing:0.03em; }
.page-dashboard .gpu-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; }
.page-dashboard .gpu-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1.25rem; }
.page-dashboard .gpu-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.page-dashboard .gpu-name { font-size:0.85rem; font-weight:600; }
.page-dashboard .gpu-idx { font-size:0.7rem; color:var(--muted); background:var(--bg); padding:0.15rem 0.5rem; border-radius:6px; }
.page-dashboard .gpu-metric { margin-bottom:0.85rem; }
.page-dashboard .gpu-metric-label { display:flex; justify-content:space-between; font-size:0.75rem; color:var(--muted); margin-bottom:0.3rem; }
.page-dashboard .gpu-metric-val { color:var(--text); font-weight:600; }
.page-dashboard .gpu-bar { height:8px; background:var(--bg); border-radius:4px; overflow:hidden; }
.page-dashboard .gpu-bar-fill { display:block; height:8px; border-radius:4px; transition:width 0.5s, background 0.5s; }
.page-dashboard .stats-row { display:flex; gap:1rem; margin-top:0.75rem; }
.page-dashboard .stat { flex:1; text-align:center; background:var(--bg); border-radius:8px; padding:0.6rem; }
.page-dashboard .stat-val { font-size:1.1rem; font-weight:700; }
.page-dashboard .stat-label { font-size:0.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; }
.page-dashboard table { width:100%; border-collapse:collapse; margin-top:0.5rem; }
.page-dashboard th { text-align:left; font-size:0.8rem; color:var(--muted); font-weight:500; padding:0.75rem 1rem; border-bottom:1px solid var(--border); }
.page-dashboard td { padding:1rem; border-bottom:1px solid var(--border); font-size:0.9rem; }
.page-dashboard .owner { color:var(--muted); font-size:0.8rem; }
.page-dashboard .pbar { width:110px; height:8px; background:var(--border); border-radius:4px; overflow:hidden; display:inline-block; vertical-align:middle; margin-right:0.5rem; }
.page-dashboard .pbar-fill { display:block; height:8px; background:linear-gradient(90deg,#3ecf8e,#4fe0a0); border-radius:4px; }
/* nowrap : sinon les boutons de la colonne Actions passent a la ligne */
.page-dashboard .actions { display:flex; gap:0.4rem; align-items:stretch; flex-wrap:nowrap; }
.page-dashboard .abtn { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 0.55rem; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text); transition:all 0.15s; }
.page-dashboard .abtn.pause { color:var(--orange); border-color:rgba(255,169,77,0.3); }
.page-dashboard .abtn.pause:hover { background:rgba(255,169,77,0.12); border-color:var(--orange); }
.page-dashboard .abtn.resume { color:var(--green); border-color:rgba(62,207,142,0.3); }
.page-dashboard .abtn.resume:hover { background:rgba(62,207,142,0.12); border-color:var(--green); }
.page-dashboard .abtn.stop { color:var(--red); border-color:rgba(255,92,92,0.3); }
.page-dashboard .abtn.stop:hover { background:rgba(255,92,92,0.12); border-color:var(--red); }
.page-dashboard .abtn.play { color:var(--orange); border-color:rgba(255,169,77,0.3); }
.page-dashboard .abtn.play:hover { background:rgba(255,169,77,0.12); border-color:var(--orange); }
.page-dashboard .abtn.dl { color:var(--accent); border-color:rgba(79,140,255,0.3); text-decoration:none; font-size:0.75rem; }
.page-dashboard .abtn.dl:hover { background:rgba(79,140,255,0.12); border-color:var(--accent); }
.page-dashboard .fps-b { display:inline-block; margin-left:0.4rem; padding:0.05rem 0.4rem; border-radius:8px; font-size:0.62rem; font-weight:600; }
.page-dashboard .fps-b.ok { background:rgba(139,144,160,0.15); color:var(--muted); }
.page-dashboard .fps-b.warn { background:rgba(255,169,77,0.15); color:var(--orange); }
.page-dashboard .modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:100; align-items:center; justify-content:center; padding:2rem; }
.page-dashboard .modal.open { display:flex; }
.page-dashboard .modal video { max-width:90vw; max-height:80vh; border-radius:8px; display:block; }
.page-dashboard .modal-inner { display:flex; flex-direction:column; align-items:center; gap:0.75rem; }
.page-dashboard .modal-close { position:absolute; top:1.5rem; right:2rem; color:white; font-size:2rem; cursor:pointer; background:none; border:none; }
.page-dashboard .draft-label { background:rgba(255,169,77,0.15); color:var(--orange); border:1px solid rgba(255,169,77,0.3); padding:0.4rem 1rem; border-radius:8px; font-size:0.8rem; font-weight:600; letter-spacing:0.03em; }
.page-dashboard .dl-btn { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; min-width:72px; padding:0.4rem 0.75rem; border-radius:8px; border:1px solid rgba(79,140,255,0.3); background:rgba(79,140,255,0.06); color:var(--accent); text-decoration:none; transition:all 0.15s; line-height:1.25; font-family:inherit; cursor:pointer; }
.page-dashboard .dl-btn:hover { background:rgba(79,140,255,0.16); border-color:var(--accent); transform:translateY(-1px); }
.page-dashboard .dl-btn .dl-top { font-size:0.78rem; font-weight:600; }
.page-dashboard .dl-btn .dl-size { font-size:0.66rem; opacity:0.75; margin-top:0.1rem; }
.page-dashboard .dl-btn.hd { color:#7aa7ff; border-color:rgba(122,167,255,0.35); background:rgba(122,167,255,0.08); }
.page-dashboard .dl-btn.hd:hover { background:rgba(122,167,255,0.18); border-color:#7aa7ff; }
.page-dashboard .dl-btn.preview { color:var(--orange); border-color:rgba(255,169,77,0.35); background:rgba(255,169,77,0.08); }
.page-dashboard .dl-btn.preview:hover { background:rgba(255,169,77,0.18); border-color:var(--orange); }
.page-dashboard .empty { color:var(--muted); padding:2rem; text-align:center; background:var(--card); border:1px dashed var(--border); border-radius:12px; }

/* ===== admin =====
   Le style de cette page est regroupe plus bas, dans "page-admin (users)".
   Il y avait ici un second jeu de regles, herite d'un balisage anterieur
   (formulaire en ligne, cartes) qui n'existe plus dans admin.html : deux
   definitions concurrentes de .action-btn et de button, dont la plus faible
   gagnait sur le bouton de suppression. D'ou son aspect gris et minuscule,
   alors que le meme bouton est rouge partout ailleurs. */

/* ===== profile =====
   Un seul bloc. Il y en avait trois, ecrits a des moments differents, avec
   une douzaine de selecteurs definis deux fois : .container, .back, label,
   .error, .success, .pw-card, .pw-submit. C'est exactement le defaut qui
   avait rendu gris le bouton de la page des comptes — deux definitions
   concurrentes, et la moins attendue qui l'emporte. Les valeurs gardees ici
   sont celles qui gagnaient effectivement dans la cascade. */
.page-profile .container { max-width: 1120px; margin: 2rem auto; padding: 0 2rem; }
.page-profile h1 { font-size: 1.4rem; margin-bottom: 1.5rem; font-weight: 600; }
.page-profile .back { color: var(--muted); text-decoration: none; font-size: 0.9rem; display: inline-block; margin-bottom: 1.25rem; }
.page-profile .back:hover { color: var(--accent); }
.page-profile label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 0.4rem; }

/* Champs simples : adresse de courriel, lien Dropbox. Les champs de mot de
   passe passent par .pw-field, plus bas, qui les habille autrement. */
.page-profile input { width: 100%; padding: 0.75rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.95rem; margin-bottom: 1.25rem; }
.page-profile input:focus { outline: none; border-color: var(--accent); }
.page-profile code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0.05rem 0.3rem; font-size: 0.78rem; }

.page-profile .error { background: rgba(255,92,92,0.1); border: 1px solid rgba(255,92,92,0.3); color: var(--red); padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.85rem; margin-bottom: 1.25rem; }
.page-profile .success { background: rgba(62,207,142,0.1); border: 1px solid rgba(62,207,142,0.3); color: var(--green); padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.85rem; margin-bottom: 1.25rem; }

/* Cartes cote a cote : la colonne de 440 px obligeait a faire defiler des
   qu'il y avait plus d'une carte. */
.page-profile .profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1.25rem; align-items: stretch; }
.page-profile .pw-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 2rem; max-width: none; display: flex; flex-direction: column; }
.page-profile .pw-card form { display: flex; flex-direction: column; flex: 1; }
.page-profile .pw-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.page-profile .pw-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(79,140,255,0.12); font-size: 1.4rem; flex-shrink: 0; }
.page-profile .pw-head h1 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.25rem; }
.page-profile .pw-sub { font-size: 0.82rem; color: var(--muted); line-height: 1.4; }

.page-profile .pw-field { position: relative; margin-bottom: 1.1rem; display: flex; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.page-profile .pw-field:focus-within { border-color: var(--accent); }
.page-profile .pw-field input { flex: 1; padding: 0.75rem 0.6rem; background: none; border: none; color: var(--text); font-size: 0.95rem; margin-bottom: 0; }
.page-profile .pw-field input:focus { outline: none; }
.page-profile .pw-lock { flex-shrink: 0; margin-left: 0.85rem; color: var(--muted); display: block; }
.page-profile .pw-lock svg { width: 15px; height: 15px; display: block; }
.page-profile .pw-toggle { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; margin-right: 0.4rem; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--muted); padding: 0; transition: color 0.15s; }
.page-profile .pw-toggle:hover { color: var(--accent); }
.page-profile .pw-toggle svg { width: 17px; height: 17px; display: block; }

/* Les boutons s'alignent en bas, quelle que soit la hauteur du contenu */
.page-profile .pw-submit { width: 100%; padding: 0.85rem; background: var(--accent); color: white; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; margin-top: auto; }
.page-profile .pw-submit:hover { opacity: 0.9; }

/* ===== upload ===== */
.page-upload .container { max-width: 600px; margin: 2rem auto; padding: 0 2rem; }
.page-upload h1 { font-size: 1.4rem; margin-bottom: 1.5rem; font-weight: 600; }
.page-upload .card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; }
.page-upload .dropzone { display: block; border: 2px dashed var(--border); border-radius: 10px;
      padding: 3rem 2rem; text-align: center; cursor: pointer;
      transition: border-color 0.2s, background 0.2s; margin-bottom: 1.5rem; }
.page-upload .dropzone:hover, .page-upload .dropzone.drag { border-color: var(--accent); background: rgba(79,140,255,0.05); }
.page-upload .dropzone-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.5; }
.page-upload .dropzone-text { color: var(--muted); font-size: 0.95rem; }
.page-upload .dropzone-file { color: var(--accent); font-weight: 600; margin-top: 0.75rem; }
.page-upload input[type=file] { display: block; width: 100%; padding: 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.9rem; margin-bottom: 1rem; cursor: pointer; }
.page-upload input[type=file]::file-selector-button { padding: 0.5rem 1rem; margin-right: 1rem; background: var(--accent); color: white; border: none; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.page-upload input[type=file]::file-selector-button:hover { opacity: 0.9; }
.page-upload button { width: 100%; padding: 0.8rem; background: var(--accent); color: white;
      border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600;
      cursor: pointer; transition: opacity 0.15s; }
.page-upload button:hover { opacity: 0.9; }
.page-upload button:disabled { opacity: 0.4; cursor: not-allowed; }
.page-upload .back { color: var(--muted); text-decoration: none; font-size: 0.9rem; display: inline-block; margin-bottom: 1rem; }
.page-upload .back:hover { color: var(--accent); }
.page-upload .error { background: rgba(255,92,92,0.1); border: 1px solid rgba(255,92,92,0.3);
      color: var(--red); padding: 0.75rem 1rem; border-radius: 8px;
      font-size: 0.85rem; margin-bottom: 1.25rem; }

/* ===== login ===== */
.page-login .card { background: var(--card); border: 1px solid var(--border);
      border-radius: 12px; padding: 2.5rem; width: 100%; max-width: 380px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.page-login .subtitle { color: var(--muted); font-size: 0.9rem; margin-bottom: 2rem; }
.page-login label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.4rem; }
.page-login input { width: 100%; padding: 0.75rem 1rem; background: var(--bg);
      border: 1px solid var(--border); border-radius: 8px; color: var(--text);
      font-size: 0.95rem; margin-bottom: 1.25rem; transition: border-color 0.15s; }
.page-login input:focus { outline: none; border-color: var(--accent); }
.page-login button { width: 100%; padding: 0.8rem; background: var(--accent); color: white;
      border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600;
      cursor: pointer; transition: opacity 0.15s; }
.page-login button:hover { opacity: 0.9; }
.page-login .error { background: rgba(255,92,92,0.1); border: 1px solid rgba(255,92,92,0.3);
      color: var(--red); padding: 0.75rem 1rem; border-radius: 8px;
      font-size: 0.85rem; margin-bottom: 1.25rem; }
/* Message positif : meme forme que l'erreur, couleur opposee. Sert au retour
   apres un changement de mot de passe et a l'accuse d'envoi du lien. */
.page-login .notice { background: rgba(62,207,142,0.1); border: 1px solid rgba(62,207,142,0.3);
      color: var(--green); padding: 0.75rem 1rem; border-radius: 8px;
      font-size: 0.85rem; margin-bottom: 1.25rem; }
.page-login .hint { color: var(--muted); font-size: 0.82rem; line-height: 1.5; margin-bottom: 1.25rem; }
.page-login .back { display: inline-block; color: var(--muted); font-size: 0.85rem;
      text-decoration: none; margin-top: 0.25rem; }
.page-login .back:hover { color: var(--accent); }
.page-login form + .hint { margin-top: 1rem; margin-bottom: 0; }

/* ===== job ===== */
/* Temps restant et cadence, remplis par le suivi en direct de la page */
.page-job .job-time { color: var(--muted); font-size: 0.82rem; }
.page-job .container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
.page-job .back { color: var(--muted); text-decoration: none; font-size: 0.9rem; display: inline-block; margin-bottom: 1rem; }
.page-job .back:hover { color: var(--accent); }
.page-job h1 { font-size: 1.3rem; margin-bottom: 1rem; font-weight: 600; word-break: break-all; }
.page-job .info { display: flex; gap: 2rem; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; }
.page-job .progress-bar { flex: 1; min-width: 200px; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
/* display:block indispensable : c'est un <span>, donc en ligne par defaut,
   et ni width ni height ne s'y appliquent. La barre de cette page ne s'est
   donc jamais remplie, contrairement a celle de My renders. */
.page-job .progress-fill { display: block; height: 100%; background: var(--accent); transition: width 0.5s; }
.page-job .progress-text { font-size: 0.9rem; color: var(--muted); white-space: nowrap; }
.page-job .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
.page-job .frame { position: relative; border-radius: 8px; overflow: hidden; background: var(--card); border: 1px solid var(--border); aspect-ratio: 16/9; }
.page-job .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-job .frame-num { position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,0.7); color: white; font-size: 0.7rem; padding: 0.15rem 0.4rem; border-top-left-radius: 6px; }
.page-job .empty { color: var(--muted); padding: 2rem 0; }

/* ===== page-admin (users) ===== */
.page-admin .container { max-width: 900px; margin: 2rem auto; padding: 0 2rem; }
.page-admin .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.page-admin h1 { font-size: 1.4rem; font-weight: 600; }
.page-admin .btn-new { padding: 0.6rem 1.2rem; background: var(--accent); color: white; border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.page-admin .btn-new:hover { opacity: 0.9; }

.page-admin .users-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.page-admin .users-table th { text-align: left; font-size: 0.75rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.9rem 1.25rem; background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border); }
.page-admin .users-table td { padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; vertical-align: middle; }
.page-admin .users-table tbody tr:last-child td { border-bottom: none; }
.page-admin .users-table tbody tr { transition: background 0.15s; }
.page-admin .users-table tbody tr:hover { background: rgba(79,140,255,0.04); }
/* Colonne d'actions : largeur au contenu, alignee a droite, jamais coupee.
   Meme traitement que dans le centre de controle. */
.page-admin .col-actions { width: 1%; white-space: nowrap; text-align: right; }

.page-admin .user-cell { display: flex; align-items: center; gap: 0.8rem; }
.page-admin .avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: rgba(139,144,160,0.18); color: var(--muted); font-weight: 700; font-size: 0.95rem; text-transform: uppercase; }
.page-admin .avatar-admin { background: rgba(79,140,255,0.18); color: var(--accent); }
.page-admin .user-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.page-admin .user-uname { font-weight: 600; }
.page-admin .user-id { font-size: 0.72rem; color: var(--muted); font-weight: 400; margin-left: 0.15rem; }
/* Sous-ligne du compte : meme role et meme graisse que la ligne de versions
   sous un nom de projet, pour que les deux pages se lisent pareil. */
.page-admin .user-sub { font-size: 0.75rem; color: var(--muted); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.page-admin .user-sub .off { color: var(--muted); opacity: 0.65; font-style: italic; }
.page-admin .user-sub .chip { background: rgba(79,140,255,0.12); color: var(--accent); border-radius: 20px; padding: 0.1rem 0.5rem; font-size: 0.68rem; font-weight: 600; }
.page-admin .count { font-variant-numeric: tabular-nums; }

.page-admin .badge.admin { background: rgba(79,140,255,0.15); color: var(--accent); }
.page-admin .badge.user { background: rgba(139,144,160,0.15); color: var(--muted); }
.page-admin .you-tag { font-size: 0.78rem; color: var(--muted); font-style: italic; }

/* Boutons d'action : memes dimensions et memes couleurs que dans My renders
   et le centre de controle. Un bouton de suppression doit se reconnaitre du
   premier coup d'oeil, quelle que soit la page. */
.page-admin .actions { display: flex; gap: 0.4rem; justify-content: flex-end; }
.page-admin .action-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.55rem; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text); transition: all 0.15s; }
.page-admin .action-btn.del { color: var(--red); border-color: rgba(255,92,92,0.3); }
.page-admin .action-btn.del:hover { background: rgba(255,92,92,0.12); border-color: var(--red); }
.page-admin .action-btn.key { color: var(--accent); border-color: rgba(79,140,255,0.3); }
.page-admin .action-btn.key:hover { background: rgba(79,140,255,0.12); border-color: var(--accent); }
/* Bouton grise : il reste visible pour que son infobulle puisse expliquer ce
   qui manque, au lieu de disparaitre sans raison apparente. */
.page-admin .action-btn:disabled { opacity: 0.35; cursor: not-allowed; color: var(--muted); border-color: var(--border); }
.page-admin .action-btn:disabled:hover { background: transparent; border-color: var(--border); }

.page-admin .user-modal-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.75rem; width: 100%; max-width: 420px; }
.page-admin .user-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.page-admin .user-modal-head h2 { font-size: 1.15rem; font-weight: 600; }
.page-admin .user-modal-card label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.4rem; }
.page-admin .user-modal-card input[type=text], .page-admin .user-modal-card input[type=password] { width: 100%; padding: 0.7rem 0.9rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.95rem; margin-bottom: 1rem; }
.page-admin .user-modal-card input:focus { outline: none; border-color: var(--accent); }
.page-admin .check { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.88rem; margin-bottom: 1.25rem; }
.page-admin .btn-create { width: 100%; padding: 0.8rem; background: var(--accent); color: white; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.page-admin .btn-create:hover { opacity: 0.9; }


/* ===== Modal global (toutes pages) ===== */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 100; align-items: center; justify-content: center; padding: 2rem; }
.modal.open { display: flex; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 1.6rem; cursor: pointer; line-height: 1; padding: 0; }
.modal-close:hover { color: var(--text); }

/* ===== Footer commun ===== */
.app-footer { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; text-align: center; color: var(--muted); font-size: 0.88rem; padding: 2rem 1rem; margin-top: 2rem; border-top: 1px solid var(--border); }
.app-footer strong { color: var(--text); font-weight: 600; }
.app-footer .sep { opacity: 0.4; margin: 0 0.2rem; }

/* Footer versions */
.footer-versions { opacity: 0.7; }



/* Indications page upload */
.page-upload .upload-reqs { list-style: none; margin: 1.25rem 0 0; padding: 1rem 1.25rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
.page-upload .upload-reqs li { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; font-size: 0.85rem; border-bottom: 1px solid var(--border); }
.page-upload .upload-reqs li:last-child { border-bottom: none; }
.page-upload .req-key { color: var(--muted); font-weight: 500; }
.page-upload .req-val { color: var(--text); text-align: right; }

/* Note pack resources */
.page-upload .pack-note { margin: 1rem 0 1.5rem; padding: 0.85rem 1rem; background: rgba(255,169,77,0.08); border: 1px solid rgba(255,169,77,0.25); border-radius: 8px; font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
.page-upload .pack-note strong { color: var(--orange); font-weight: 600; }

/* Sélecteur version Blender (upload) */
.page-upload .version-select { display: block; width: 100%; padding: 0.7rem 0.9rem; margin-bottom: 1.25rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.95rem; cursor: pointer; color-scheme: dark; }
.page-upload .version-select:focus { outline: none; border-color: var(--accent); }


/* =====================================================================
   Ajouts et corrections du 2026-08-25
   ===================================================================== */

/* --- Etat "staged" : fichier recupere, en attente d'une decision --- */
.badge.staged { background: rgba(122,167,255,0.13); color: #9fb4d8; }

/* --- My renders : lignes de versions et rangees de boutons --- */
.page-home .ver-line { margin-top: 3px; font-size: 0.75rem; color: var(--muted); }
.page-home .dl-row { display: flex; gap: 0.5rem; flex-wrap: nowrap; align-items: stretch; }
.page-home td:last-child, .page-home th:last-child { white-space: nowrap; width: 1%; }
.page-home .action-row { display: flex; gap: 0.4rem; align-items: center; }
/* La corbeille cotoie des boutons a deux lignes : sa hauteur fixe de 34 px
   la laissait plus courte que ses voisins. */
.page-home .dl-row .action-btn { height: auto; align-self: stretch; }
/* .action-btn.del n'existait pas dans la feuille (seul .danger y etait),
   la corbeille s'affichait donc dans le gris neutre. */
.page-home .action-btn.del { color: var(--red); border-color: rgba(255,92,92,0.3); }
.page-home .action-btn.del:hover { background: rgba(255,92,92,0.12); border-color: var(--red); color: var(--red); }

/* --- Control Center : memes rangees mixtes que My renders. Les .abtn ont
   une hauteur fixe de 34 px qui les laissait plus courtes que les boutons
   de telechargement, a deux lignes. --- */
.page-dashboard .actions .abtn { height: auto; min-height: 34px; align-self: stretch; }
/* La colonne Actions ne doit pas etre comprimee : sans cela le navigateur
   la retrecit et la corbeille passe a la ligne. Le tableau resserre les
   autres colonnes a la place. */
.page-dashboard td:last-child, .page-dashboard th:last-child { white-space: nowrap; width: 1%; }

/* --- Control Center : le nom du projet ouvre sa galerie --- */
.page-dashboard .fname { color: var(--text); text-decoration: none; font-weight: 600; }
.page-dashboard .fname:visited { color: var(--text); }
.page-dashboard .fname:hover { color: var(--accent); text-decoration: underline; }

/* --- Galerie : le markup utilise .thumb, le CSS ne stylait que .frame,
   d'ou des vignettes sans cadre et des numeros non superposes. --- */
.page-job .thumb { position: relative; border-radius: 8px; overflow: hidden; background: var(--card); border: 1px solid var(--border); aspect-ratio: 16/9; cursor: zoom-in; transition: border-color 0.15s, transform 0.15s; }
.page-job .thumb:hover { border-color: var(--accent); transform: translateY(-2px); }
.page-job .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-job .thumb-num { position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,0.7); color: #fff; font-size: 0.7rem; padding: 0.15rem 0.4rem; border-top-left-radius: 6px; }
.page-job .job-status { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; }
.page-job .job-frames { font-size: 0.9rem; color: var(--muted); }

/* --- Visionneuse plein ecran d'une frame --- */
.frame-viewer { display: none; position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,0.93); align-items: center; justify-content: center; }
.frame-viewer.open { display: flex; }
.frame-viewer img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 4px; }
.fv-btn { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; opacity: 0.55; line-height: 1; padding: 0 18px; transition: opacity 0.15s; }
.fv-btn:hover { opacity: 1; }
.fv-close { top: 12px; right: 18px; font-size: 2.2rem; padding: 0 8px; }
.fv-prev, .fv-next { top: 50%; transform: translateY(-50%); font-size: 3.4rem; }
.fv-prev { left: 6px; }
.fv-next { right: 6px; }
.fv-caption { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #ddd; font-size: 0.85rem; letter-spacing: 0.02em; }
.fv-hint { opacity: 0.55; margin-left: 10px; }

/* --- Barre de progression de l'upload : le balisage existait, le style
   n'a jamais ete ecrit, d'ou un simple pourcentage sans barre. --- */
.page-upload .upload-progress { align-items: center; gap: 0.75rem; margin-top: 1rem; }
.page-upload .upload-bar { flex: 1; height: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.page-upload .upload-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3ecf8e, #4fe0a0); transition: width 0.3s; }
.page-upload #uploadPct { font-size: 0.8rem; color: var(--muted); min-width: 6.5rem; text-align: right; white-space: nowrap; }
.page-upload #uploadNote { margin-top: 0.6rem; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }

/* --- Cloud files : la page porte aussi page-home, dont elle reprend
   tableaux et boutons ; ce qui suit lui est propre. --- */
.page-cloud .cloud-head { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-cloud .cloud-hint { color: var(--muted); font-size: 0.82rem; }
.page-cloud .cloud-empty { color: var(--muted); padding: 2rem; text-align: center; background: var(--card); border: 1px dashed var(--border); border-radius: 12px; }
.page-cloud .cloud-meta { color: var(--muted); font-size: 0.75rem; margin-top: 3px; }
.page-cloud .cloud-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.page-cloud .container a { color: var(--accent); text-decoration: none; }
.page-cloud .container a:visited { color: var(--accent); }
.page-cloud .container a:hover { text-decoration: underline; }
.page-cloud .container a.back { color: var(--muted); font-size: 0.9rem; display: inline-block; margin-bottom: 1rem; }
.page-cloud .container a.back:hover { color: var(--accent); text-decoration: none; }
.page-cloud .error { background: rgba(255,92,92,0.1); border: 1px solid rgba(255,92,92,0.3); color: var(--red); padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.85rem; margin-bottom: 1.25rem; }
.page-cloud .import-list { margin: 0 0 1.2rem; padding: 0; list-style: none; }
.page-cloud .import-list li { padding: 0.45rem 0; font-size: 0.85rem; border-bottom: 1px solid var(--border); }
.page-cloud .import-list li:last-child { border-bottom: none; }
.page-cloud .import-run { color: var(--accent); }
.page-cloud .import-ok  { color: var(--green); }
.page-cloud .import-err { color: var(--red); }

/* Le selecteur de version n'etait style que sur la page d'upload */
.page-cloud .version-select { width: auto; min-width: 210px; margin: 0; -webkit-appearance: none; appearance: none; color-scheme: dark; background-color: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 2.1rem 0.6rem 0.9rem; font: inherit; cursor: pointer; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238b90a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 0.8rem center; }
.page-cloud .version-select:hover { border-color: rgba(255,255,255,0.24); }
.page-cloud .version-select:focus { outline: none; border-color: var(--accent); }