/* LocFolder UraGames — même thème que folder.syncroom.fr */
:root {
  --bg-base: #000000;
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-border: rgba(255, 255, 255, 0.08);
  --input-bg: rgba(255, 255, 255, 0.04);
  --input-border: rgba(255, 255, 255, 0.1);
  --text-main: #ffffff;
  --text-muted: #a1a1aa;
  --accent: #ffffff;
  --accent-hover: #e4e4e7;
  --error-color: #ef4444;
  --p1: #ec4899;
  --p2: #3b82f6;
  --p3: #f59e0b;
  --ok: #10b981;
  --doing: #eab308;
  --sent: #38bdf8;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; background: var(--bg-base); color: var(--text-main);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
.muted { color: var(--text-muted); }
small { display: block; font-size: 12px; color: var(--text-muted); }

/* Fond : dégradé noir et trois halos flous qui flottent */
.bg-shapes { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(circle, #111111 0%, #000000 100%); }
.shape { position: absolute; filter: blur(90px); opacity: .5; animation: float 18s ease-in-out infinite; }
.shape-circle { width: 400px; height: 400px; border-radius: 50%; top: -8%; left: -5%; background: linear-gradient(135deg, #4f46e5, #3b82f6); }
.shape-square { width: 350px; height: 350px; border-radius: 30%; bottom: -12%; right: -6%; background: linear-gradient(135deg, #9333ea, #ec4899); animation-delay: -6s; }
.shape-rectangle { width: 500px; height: 250px; border-radius: 40%; top: 40%; left: 30%; opacity: .3; background: linear-gradient(135deg, #0d9488, #10b981); animation-delay: -12s; }
@keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0); } 33% { transform: translate(40px, -30px) rotate(8deg); } 66% { transform: translate(-30px, 25px) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .shape { animation: none; } }

/* Cartes en verre */
.card, .glass {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 24px;
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5), inset 0 1px 0 0 rgba(255, 255, 255, .1);
}
.card { padding: 20px; margin: 0 0 16px; }
.card h2 { font-size: 16px; margin-bottom: 12px; }

/* Connexion */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.glass { width: 100%; max-width: 380px; padding: 34px 28px; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.glass h1 { font-size: 26px; }
.glass p { margin: 0 0 6px; font-size: 14px; }
.pill { align-self: center; display: inline-block; background: #fff; color: #000; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 99px; padding: 4px 11px; }
.error { color: var(--error-color); font-size: 14px; }

/* Champs et boutons */
input, textarea, select {
  width: 100%; font: inherit; color: var(--text-main); background: var(--input-bg); border: 1px solid var(--input-border);
  border-radius: 12px; padding: 12px 14px; outline: none; transition: border-color .2s, background .2s;
}
input:focus, textarea:focus, select:focus { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .07); }
select option { background: #111; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 14px; font-weight: 600;
  background: var(--accent); color: #000; border: 1px solid var(--accent); border-radius: 12px; padding: 9px 16px;
  cursor: pointer; text-decoration: none; transition: background .2s, transform .1s; white-space: nowrap;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(.98); }
.btn.white { padding: 12px; margin-top: 4px; }
.btn.ghost { background: transparent; color: var(--text-main); border-color: var(--input-border); }
.btn.ghost:hover { background: rgba(255, 255, 255, .06); }
.btn.danger { background: transparent; color: var(--error-color); border-color: rgba(239, 68, 68, .4); }
.mini { font: inherit; font-size: 12px; background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid var(--input-border); border-radius: 8px; padding: 3px 9px; cursor: pointer; margin-top: 6px; }

/* En-tête */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 20px; padding: 14px 24px;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--card-border); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; }
.brand small { font-weight: 500; }
.logo { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: #000; font-weight: 800; font-size: 13px; }
.menu { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.menu a { text-decoration: none; color: var(--text-muted); padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.menu a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.menu a.on { color: #000; background: #fff; }
.me { display: flex; align-items: center; gap: 12px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--input-border); background: linear-gradient(135deg, #4f46e5, #ec4899); color: #fff; font-weight: 700; cursor: pointer; }
.logout { color: var(--text-muted); font-size: 13px; text-decoration: none; }
.logout:hover { color: #fff; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 28px 24px 10px; }
.foot { text-align: center; color: var(--text-muted); font-size: 12px; padding: 30px 16px; }

/* Accueil */
.hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.hero h1 { font-size: clamp(28px, 4vw, 40px); margin: 10px 0 6px; }
.hero .pill { align-self: auto; }
.ring { --v: 0; width: 120px; height: 120px; flex: none; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(closest-side, #050505 79%, transparent 80% 100%), conic-gradient(var(--ok) calc(var(--v) * 1%), rgba(255, 255, 255, .08) 0); }
.ring b { font-size: 24px; display: block; line-height: 1; }
.ring span { font-size: 12px; color: var(--text-muted); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stat { text-decoration: none; margin: 0; padding: 16px 18px; }
.stat b { display: block; font-size: 30px; line-height: 1.1; }
.stat span { color: var(--text-muted); font-size: 13px; }
.stat.s1 b { color: var(--doing); } .stat.s2 b { color: var(--sent); } .stat.s3 b { color: var(--ok); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.prio-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--card-border); text-decoration: none; }
.prio-row:first-of-type { border-top: 0; }
.grow { flex: 1; min-width: 0; }
.bar { width: 110px; height: 8px; border-radius: 9px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #4f46e5, #ec4899); }
.tag { display: inline-block; font-size: 11px; font-weight: 800; color: #fff; border-radius: 99px; padding: 2px 9px; }
.tag.p1 { background: var(--p1); } .tag.p2 { background: var(--p2); } .tag.p3 { background: var(--p3); }
.next { display: flex; gap: 14px; align-items: flex-start; }
.next .pic { width: 120px; height: 120px; flex: none; border-radius: 16px; }
.next h3 { margin: 6px 0 4px; }
.next p { margin: 0 0 10px; font-size: 14px; }
.links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.links a { text-decoration: none; padding: 11px 12px; border-radius: 12px; background: var(--input-bg); border: 1px solid var(--input-border); font-size: 14px; }
.links a:hover { background: rgba(255, 255, 255, .07); }
.log { list-style: none; margin: 0; padding: 0; }
.log li { padding: 7px 0; border-top: 1px solid var(--card-border); font-size: 14px; }
.log li:first-child { border-top: 0; }

/* Objets */
.page-title { margin-bottom: 18px; }
.page-title h1 { font-size: 30px; margin-bottom: 6px; }
.page-title p { margin: 0 0 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filters a { text-decoration: none; font-size: 13px; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--input-border); color: var(--text-muted); }
.filters a.on, .filters a:hover { color: #000; background: #fff; border-color: #fff; }
.filters input { width: 200px; padding: 7px 12px; border-radius: 99px; font-size: 13px; margin-left: auto; }
.group { font-size: 17px; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.obj { padding: 0; margin: 0; overflow: hidden; display: flex; flex-direction: column; scroll-margin-top: 90px; }
.pic { height: 140px; background: rgba(255, 255, 255, .92); display: grid; place-items: center; }
.pic img { max-height: 125px; max-width: 90%; }
.pic.empty { background: rgba(255, 255, 255, .04); font-size: 46px; font-weight: 800; color: rgba(255, 255, 255, .2); }
.obj .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.obj h3 { font-size: 16px; }
.desc { margin: 0; font-size: 14px; color: #d4d4d8; }
dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: 13px; }
dt { color: var(--text-muted); } dd { margin: 0; }
.note { margin: 0; font-size: 13px; color: #fdba74; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .25); border-radius: 10px; padding: 7px 9px; }
details { font-size: 13px; }
summary { cursor: pointer; color: #a5b4fc; font-weight: 600; }
code { display: block; margin-top: 6px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: rgba(0, 0, 0, .4); border: 1px solid var(--input-border); border-radius: 8px; padding: 8px; word-break: break-word; user-select: all; }
.states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: auto; }
.states button { font: inherit; font-size: 11.5px; padding: 6px 2px; border-radius: 9px; border: 1px solid var(--input-border); background: transparent; color: var(--text-muted); cursor: pointer; }
.states button:disabled { cursor: not-allowed; opacity: .5; }
.obj[data-s="0"] .states [data-s="0"] { background: rgba(255, 255, 255, .14); color: #fff; }
.obj[data-s="1"] .states [data-s="1"] { background: var(--doing); color: #000; border-color: var(--doing); }
.obj[data-s="2"] .states [data-s="2"] { background: var(--sent); color: #000; border-color: var(--sent); }
.obj[data-s="3"] .states [data-s="3"] { background: var(--ok); color: #000; border-color: var(--ok); opacity: 1; }
.obj[data-s="3"] { opacity: .65; }
.row { display: flex; gap: 6px; flex-wrap: wrap; }
.row .btn { font-size: 12.5px; padding: 7px 10px; }
.comments p { margin: 0 0 8px; font-size: 13px; }
.com-form { display: flex; flex-direction: column; gap: 6px; }

/* Dossiers */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--text-muted); }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: #fff; }
.files { padding: 8px; }
.file { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; text-decoration: none; }
.file + .file { border-top: 1px solid var(--card-border); }
.file.dir:hover { background: rgba(255, 255, 255, .05); }
.file .btn { font-size: 12.5px; padding: 6px 11px; }
.ico { font-size: 20px; width: 28px; text-align: center; }
.drop { display: grid; place-items: center; min-height: 130px; border: 2px dashed var(--input-border); border-radius: 18px; cursor: pointer; color: var(--text-muted); text-align: center; padding: 16px; transition: border-color .2s, background .2s; }
.drop:hover, .drop.over { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .03); color: #fff; }
.drop input { display: none; }
.progress { height: 8px; border-radius: 9px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: 10px; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4f46e5, #ec4899); transition: width .2s; }
.inline { display: flex; gap: 8px; margin-top: 14px; }
.stack { display: flex; flex-direction: column; gap: 10px; }

dialog { border: 1px solid var(--card-border); border-radius: 24px; background: rgba(15, 15, 18, .96); color: #fff; padding: 24px; width: min(92vw, 400px); }
dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); opacity: 0; background: #fff; color: #000; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 12px; transition: .25s; pointer-events: none; z-index: 50; }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 860px) {
  .cols { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .top { flex-wrap: wrap; padding: 12px 16px; gap: 10px; }
  .menu { order: 3; width: 100%; }
  .me { margin-left: auto; }
  .wrap { padding: 20px 16px 10px; }
  .hero { flex-direction: column; align-items: flex-start; }
  .filters input { width: 100%; margin-left: 0; }
  .file { flex-wrap: wrap; }
  .links { grid-template-columns: 1fr; }
}

/* ---------- Page « Tâche » ---------- */
.task-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.task-head h1 { font-size: clamp(26px, 4vw, 36px); margin: 8px 0 4px; }
.task-head p { margin: 0; max-width: 640px; }
.pick select { min-width: 260px; }
.task { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.step { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; margin: 4px 0 10px; }
.step > b:first-child { width: 24px; height: 24px; flex: none; border-radius: 50%; background: #fff; color: #000; display: grid; place-items: center; font-size: 12px; }
.prompt-card pre { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; line-height: 1.55;
  background: rgba(0, 0, 0, .45); border: 1px solid var(--input-border); border-radius: 14px; padding: 14px; margin: 0 0 12px; max-height: 430px; overflow: auto; }
.prompt-card .step:nth-of-type(2) { margin-top: 18px; }
.prompt-card details { margin-top: 10px; }
.specs { margin-top: 14px; }
.remarks { background: rgba(236, 72, 153, .1); border: 1px solid rgba(236, 72, 153, .3); border-radius: 14px; padding: 10px 12px; margin-bottom: 14px; font-size: 13.5px; }
.remarks p { margin: 6px 0 0; }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 130px; padding: 14px; text-align: center; cursor: pointer;
  border: 2px dashed var(--input-border); border-radius: 18px; transition: border-color .2s, background .2s; }
.slot input { display: none; }
.slot .ico { font-size: 28px; }
.slot small { word-break: break-all; }
.slot:hover, .slot.over { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .03); }
.slot.filled { border-style: solid; border-color: var(--ok); background: rgba(16, 185, 129, .08); }
.viewer { position: relative; height: 320px; margin-top: 12px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; text-align: center; padding: 0;
  background: radial-gradient(circle at 50% 40%, #2a2a33 0%, #0b0b0f 75%); border: 1px solid var(--card-border); }
.viewer canvas { position: absolute; inset: 0; cursor: grab; }
.viewer.big { height: min(70vh, 620px); margin: 0 0 12px; }
.save { width: 100%; margin-top: 12px; padding: 13px; font-size: 15px; }
.save:disabled { opacity: .4; cursor: not-allowed; }
.empty-state { text-align: center; padding: 40px 20px; }

/* ---------- Page « Fait » ---------- */
.done-card .pic.shot { position: relative; height: 190px; background: radial-gradient(circle at 50% 40%, #2a2a33 0%, #0b0b0f 75%); }
.done-card .pic.shot img { max-height: 180px; }
.done-card .pic.shot span { font-size: 40px; opacity: .4; }
.done-card .view3d { position: absolute; right: 10px; bottom: 10px; margin: 0; }
.done-card .body { gap: 6px; }
.small { font-size: 13px; margin: 0; word-break: break-all; }
.badge { align-self: flex-start; font-size: 11.5px; font-weight: 700; border-radius: 99px; padding: 2px 10px; background: rgba(255, 255, 255, .12); }
.badge.s1 { background: var(--doing); color: #000; } .badge.s2 { background: var(--sent); color: #000; } .badge.s3 { background: var(--ok); color: #000; }
.done-card[data-s="3"] { opacity: 1; }
dialog.wide { width: min(94vw, 900px); }

@media (max-width: 860px) {
  .task { grid-template-columns: 1fr; }
  .task-head { flex-direction: column; align-items: stretch; }
  .pick select { min-width: 0; }
  .viewer { height: 260px; }
}

/* ---------- Tâche : dossier U: et bouton « Fini » ---------- */
.folder-path { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 14px; border-radius: 14px; background: rgba(0, 0, 0, .45); border: 1px solid var(--input-border); transition: border-color .2s; }
.folder-path:hover { border-color: rgba(255, 255, 255, .4); }
.folder-path span { font-size: 22px; }
.folder-path code { margin: 0; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 600; color: #fff; }
.folder-list { margin: 12px 0 16px; padding-left: 18px; font-size: 14px; color: #d4d4d8; }
.folder-list li { margin: 6px 0; }
#done-btn { font-size: 17px; padding: 15px; background: var(--ok); border-color: var(--ok); color: #000; }
#done-btn:hover { background: #34d399; }
code.path { margin: 0; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ok); }
#confirm-yes:disabled { opacity: .4; cursor: not-allowed; }