/* Revue : table lumineuse. Fond clair comme un négatoscope, pellicule en bandes de 6. */
.desk {
  --table: #eef1f5; --table-2: #e3e8ee; --ink: #16181d; --ink-2: #4b5260; --line: #d5dbe3;
  --film: #221c18; --film-2: #3a302a;
  min-height: 100dvh; background: var(--table); color: var(--ink);
}
body:has(.desk) { background: #eef1f5; }
.desk .err { color: #b4321c; }
.desk .hint { color: var(--ink-2); }
.mobile-only { display: inline-block; }
.desk .back { color: var(--ink-2); font-size: 16px; padding: 14px 0 0; }

.nav { display: none; }
.table { padding: 8px 16px 48px; min-width: 0; }

.roll-head { max-width: 820px; padding: 18px 0 8px; }
.roll-name { font-family: var(--display); font-size: clamp(32px, 5vw, 56px); font-weight: 750; letter-spacing: -.025em; line-height: 1.02;
  font-variation-settings: "opsz" 96; border: 0; background: none; padding: 0; width: 100%; color: var(--ink); border-radius: 6px; }
.roll-name::placeholder { color: var(--ink); }
.roll-name:hover { background: rgba(22, 24, 29, .04); }
.roll-name:focus { outline: none; background: #fff; box-shadow: 0 0 0 2px var(--edge); }
.roll-meta { color: var(--ink-2); margin: 10px 0 4px; font-size: 15px; }
.roll-note { border: 0; background: none; padding: 6px 0; width: 100%; color: var(--ink); font-size: 17px; line-height: 1.5; min-height: 0; resize: none; border-radius: 6px; max-width: 68ch; }
.roll-note::placeholder { color: #8a93a2; }
.roll-note:focus { outline: none; background: #fff; box-shadow: 0 0 0 2px var(--edge); padding: 6px 10px; }
.roll-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 6px; }

.seg { display: inline-flex; background: var(--table-2); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 8px 14px; font-size: 14px; color: var(--ink-2); font-weight: 550; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(22, 24, 29, .12); }
.seg kbd { font: inherit; font-size: 11px; color: #8a93a2; margin-left: 6px; }
.btn-dark { border: 0; border-radius: 999px; padding: 10px 18px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; }
.btn-dark:hover { background: #2b2f38; }
.btn-line { border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; background: #fff; color: var(--ink); font-weight: 550; font-size: 14px; }

.ratebar { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.ratebar-track { display: flex; width: 160px; height: 6px; border-radius: 3px; overflow: hidden; gap: 2px; }
.ratebar-track i { display: block; }
.ratebar-track .sous, .dot.sous { background: #3f7fc4; }
.ratebar-track .bonne, .dot.bonne { background: #4d9a3c; }
.ratebar-track .sur, .dot.sur { background: #d85a36; }

.plan { background: #fff; border-radius: 16px; padding: 18px 20px; margin: 16px 0; box-shadow: 0 1px 2px rgba(22, 24, 29, .06), 0 8px 24px rgba(22, 24, 29, .06); max-width: 820px; }
.plan h2 { font-family: var(--display); font-size: 22px; margin: 0 0 4px; letter-spacing: -.01em; }
.plan select { background: var(--table); border-color: var(--line); color: var(--ink); padding: 6px 8px; }
.plan .assign { grid-template-columns: 1fr 160px; max-height: 320px; overflow: auto; }
.plan-actions { display: flex; gap: 10px; justify-content: flex-end; }
.plan .bar { background: var(--table-2); }

/* bandes de pellicule */
.strips { display: grid; gap: 18px; margin-top: 18px; }
.strip { background: var(--film); border-radius: 3px; padding: 0 10px; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 24px -14px rgba(22, 24, 29, .5); }
.holes { height: 18px; background: repeating-linear-gradient(90deg, transparent 0 7px, var(--table) 7px 17px, transparent 17px 24px) center / 100% 9px no-repeat; opacity: .9; }
.frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.frame { border: 0; background: none; padding: 0; text-align: left; display: grid; gap: 4px; color: inherit; border-radius: 3px; }
.frame .pic { aspect-ratio: 3 / 2; background: #120e0b; border-radius: 2px; overflow: hidden; display: grid; place-items: center; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .12s; }
.frame .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame .blank { color: var(--film-2); font-size: 12px; }
.frame:hover .pic { outline-color: rgba(240, 180, 60, .45); }
.frame.sel .pic { outline-color: var(--edge); }
.edgeline { display: flex; align-items: baseline; gap: 6px; min-height: 20px; padding: 0 2px; }
.edgeno { font-family: var(--edgefont); color: var(--edge); font-weight: 600; font-size: 16px; letter-spacing: .02em; }
.edgeno.big { font-size: 44px; line-height: 1; }
.cap { color: #b9ab9c; font-size: 12px; font-variant-numeric: tabular-nums; }
.dot { width: 7px; height: 7px; border-radius: 50%; margin-left: auto; align-self: center; }

/* panneau de détail */
.inspector { position: fixed; inset: 0; z-index: 20; background: #fff; overflow: auto; padding: 16px 18px 28px; display: grid; gap: 12px; align-content: start; }
.insp-top { display: flex; align-items: center; justify-content: space-between; }
.insp-nav { display: flex; gap: 6px; }
.insp-nav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 20px; color: var(--ink); line-height: 1; }
.insp-img { background: var(--film); border-radius: 6px; aspect-ratio: 3 / 2; display: grid; place-items: center; overflow: hidden; color: #8a7b6d; font-size: 14px; }
.insp-img img { width: 100%; height: 100%; object-fit: contain; }
.insp-set { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 0; font-variant-numeric: tabular-nums; }
.insp-set span { margin-left: 18px; color: var(--ink-2); font-weight: 500; }
.insp-meta { color: var(--ink-2); margin: 0; font-size: 14px; display: flex; gap: 12px; flex-wrap: wrap; }
.insp-meta a, .desk .table a, .desk .err a { color: #9a6400; }
.insp-note { margin: 0; padding: 10px 12px; background: var(--table); border-radius: 10px; font-size: 15px; }
.inspector .seg { display: flex; }
.inspector .seg button { flex: 1; }
.inspector .seg button.on.sous { background: #3f7fc4; color: #fff; }
.inspector .seg button.on.bonne { background: #4d9a3c; color: #fff; }
.inspector .seg button.on.sur { background: #d85a36; color: #fff; }
.inspector .seg button.on kbd { color: rgba(255, 255, 255, .7); }
.insp-comment { background: var(--table); border: 1px solid transparent; color: var(--ink); min-height: 110px; border-radius: 12px; }
.insp-comment:focus { outline: none; border-color: var(--edge); background: #fff; }
.insp-keys { color: #8a93a2; font-size: 12px; margin: 0; display: none; }

.dropover { position: fixed; inset: 0; z-index: 30; background: rgba(238, 241, 245, .86); backdrop-filter: blur(6px); display: grid; place-items: center; pointer-events: none; }
.dropover p { font-family: var(--display); font-size: 32px; font-weight: 700; letter-spacing: -.02em; border: 2px dashed var(--ink); border-radius: 24px; padding: 40px 56px; margin: 0; }

/* Ordinateur */
@media (min-width: 900px) {
  .mobile-only { display: none; }
  .desk { display: grid; grid-template-columns: 272px minmax(0, 1fr); }
  .desk.with-insp { grid-template-columns: 272px minmax(0, 1fr) 400px; }
  .nav { display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; padding: 22px 16px; border-right: 1px solid var(--line); background: #f6f8fa; gap: 14px; }
  .nav-brand { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 8px; }
  .brand { font-family: var(--edgefont); font-weight: 600; font-size: 24px; color: var(--ink); letter-spacing: .01em; }
  .nav .sync { color: #8a93a2; font-size: 12px; }
  .nav .sync.warn { color: #9a6400; }
  .nav-new { border: 0; border-radius: 12px; padding: 11px 14px; background: var(--ink); color: #fff; font-weight: 600; text-align: left; }
  .nav-list { display: grid; gap: 2px; overflow: auto; margin: 0 -4px; padding: 0 4px; }
  .nav-roll { display: grid; gap: 2px; padding: 10px 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); }
  .nav-roll:hover { background: var(--table-2); }
  .nav-roll.on { background: #fff; box-shadow: 0 1px 2px rgba(22, 24, 29, .08), 0 0 0 1px var(--line); }
  .nav-title { font-weight: 650; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-sub { color: #6c7483; font-size: 13px; }
  .nav-progress { height: 3px; background: var(--table-2); border-radius: 2px; margin-top: 6px; overflow: hidden; }
  .nav-progress i { display: block; height: 100%; background: var(--edge); }
  .nav-foot { margin-top: auto; color: var(--ink-2) !important; text-decoration: none; padding: 8px; border-radius: 8px; font-size: 14px; }
  .nav-foot:hover { background: var(--table-2); }
  .table { padding: 28px 40px 64px; }
  .frames { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .inspector { position: sticky; top: 0; height: 100dvh; inset: auto; border-left: 1px solid var(--line); padding: 22px 22px 28px; box-shadow: -12px 0 32px -24px rgba(22, 24, 29, .4); }
  .insp-keys { display: block; }
  /* formulaires (nouvelle pellicule, matériel) dans la mise en page ordinateur */
  .desk .formpage { background: var(--table); }
  .desk .formpage .wrap { margin: 0; padding: 28px 40px; max-width: 620px; }
  .desk .formpage h1 { font-family: var(--display); font-size: 36px; letter-spacing: -.02em; }
  .desk .formpage .back { display: none; }
  .desk .formpage input, .desk .formpage select, .desk .formpage textarea { background: #fff; border-color: var(--line); color: var(--ink); }
  .desk .formpage .field > span, .desk .formpage .section, .desk .formpage .sub { color: var(--ink-2); }
  .desk .formpage .btn.primary { background: var(--ink); color: #fff; border-radius: 999px; }
  .desk .formpage .btn.ghost { border-color: var(--line); color: var(--ink); background: #fff; }
  .desk .formpage .roll, .desk .formpage .sheet { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
}
@media (min-width: 1500px) { .table { padding-inline: 56px; } }