/* home-drive — classeur domestique : gris d'archive, encre bleu nuit, onglets ocre. */

:root {
  --paper:   #E9EDF1;
  --surface: #FFFFFF;
  --sunken:  #F4F6F8;
  --ink:     #17202B;
  --muted:   #5A6474;
  --line:    #D3D9E1;
  --accent:  #2E55B8;
  --accent-ink: #FFFFFF;
  --accent-soft: #E3EAFA;
  --folder:  #D8962A;
  --folder-deep: #A86E12;
  --danger:  #B3261E;
  --danger-soft: #FBE9E7;
  --ok:      #1E7A4C;
  --ok-soft: #E4F3EA;
  --shadow:  0 1px 2px rgba(23, 32, 43, .06), 0 8px 24px -12px rgba(23, 32, 43, .18);

  --font: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --step--1: .8125rem;
  --step-0:  .9375rem;
  --step-1:  1.125rem;
  --step-2:  1.5rem;
  --step-3:  2rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #11161C;
    --surface: #19212A;
    --sunken:  #151C23;
    --ink:     #E5E9EE;
    --muted:   #9AA4B1;
    --line:    #2C3641;
    --accent:  #86A6F2;
    --accent-ink: #0E1726;
    --accent-soft: #1F2C47;
    --folder:  #E8AE4E;
    --folder-deep: #E8AE4E;
    --danger:  #F2867E;
    --danger-soft: #3A1E1C;
    --ok:      #6CCB97;
    --ok-soft: #173326;
    --shadow:  0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.5 var(--font);
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
h1, h2, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.js .no-js-only { display: none; }
.muted { color: var(--muted); }
.sprites { position: absolute; }

/* ------------------------------------------------------------------ icônes */
.ico { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
.ico-folder { fill: var(--folder); width: 1.25em; }
.ico-file { color: var(--muted); }
.ico-file.kind-image   { color: #3F8F7B; }
.ico-file.kind-pdf     { color: #C2453A; }
.ico-file.kind-text    { color: var(--accent); }
.ico-file.kind-sheet   { color: #2E8B4E; }
.ico-file.kind-archive { color: #8A6A3A; }
.ico-file.kind-media   { color: #7B5CC4; }

/* ------------------------------------------------------------------ boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 2.5rem; padding: .5rem 1rem;
  border: 1px solid transparent; border-radius: 8px;
  font: 600 var(--step-0)/1.2 var(--font); text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { background: var(--sunken); }
.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-wide { width: 100%; }
.btn-icon {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: 8px; color: var(--muted); cursor: pointer; list-style: none;
}
.btn-icon:hover, .popover[open] > .btn-icon { background: var(--sunken); color: var(--ink); }
.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* ------------------------------------------------------------------ formulaires */
.stack { display: grid; gap: 1rem; }
.stack-tight { display: grid; gap: .5rem; }
.field { display: grid; gap: .35rem; }
.field > span { font-size: var(--step--1); font-weight: 600; color: var(--muted); }
.field input {
  width: 100%; min-height: 2.75rem; padding: .55rem .75rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: inherit;
}
.field input:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0; }
.otp { font-size: var(--step-2) !important; letter-spacing: .4em; text-align: center; }

.notice { padding: .65rem .85rem; border-radius: 8px; border-left: 3px solid; font-size: var(--step-0); }
.notice + .notice { margin-top: .5rem; }
.notice-error { background: var(--danger-soft); border-color: var(--danger); }
.notice-ok    { background: var(--ok-soft); border-color: var(--ok); }
.notice-info  { background: var(--accent-soft); border-color: var(--accent); }

/* ------------------------------------------------------------------ connexion */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 2rem 16px; }
.auth-card {
  width: 100%; max-width: 24rem; padding: 2rem 1.75rem 1.5rem;
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow);
  display: grid; gap: 1rem;
  /* l'onglet de chemise, en haut à gauche */
  position: relative; margin-top: 1rem;
}
.auth-card::before {
  content: ""; position: absolute; top: -.85rem; left: 0; width: 7.5rem; height: 1.1rem;
  background: var(--surface); border-radius: 10px 10px 0 0;
  clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
}
.auth-brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--muted); font-size: var(--step--1); }
.auth-mark { width: 1.9rem; height: 1.6rem; fill: var(--folder); }
.auth-step { font-size: var(--step--1); color: var(--muted); margin-top: .25rem; }
.auth h1 { font-size: var(--step-3); line-height: 1.1; font-weight: 650; letter-spacing: -.01em; margin-top: -.5rem; }
.auth-help { color: var(--muted); }
.auth-foot { font-size: var(--step--1); color: var(--muted); text-align: center; padding-top: .25rem; }

/* ------------------------------------------------------------------ bandeau d'information */
.info {
  display: grid; grid-template-columns: minmax(12rem, auto) minmax(0, 1fr) auto; align-items: center; gap: 1rem 2rem;
  max-width: 82rem; margin: 1rem auto 0; padding: 1.1rem 1.5rem;
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow);
}
.info-brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: var(--step--1); font-weight: 600; text-decoration: none; }
.info-owner { font-size: var(--step-2); font-weight: 650; line-height: 1.2; letter-spacing: -.01em; margin-top: .1rem; }

.gauge { max-width: 34rem; justify-self: center; width: 100%; }
.gauge-text { font-size: var(--step-0); }
.gauge-text strong { font-size: var(--step-1); }
.gauge-bar {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: .7rem; margin: .4rem 0 .35rem; border: 0; border-radius: 99px;
  background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden;
}
.gauge-bar::-webkit-progress-bar { background: transparent; }
.gauge-bar::-webkit-progress-value { background: var(--folder); border-radius: 99px; }
.gauge-bar::-moz-progress-bar { background: var(--folder); border-radius: 99px; }
.gauge-high .gauge-bar::-webkit-progress-value { background: var(--folder-deep); }
.gauge-high .gauge-bar::-moz-progress-bar { background: var(--folder-deep); }
.gauge-full .gauge-bar::-webkit-progress-value { background: var(--danger); }
.gauge-full .gauge-bar::-moz-progress-bar { background: var(--danger); }
.gauge-full .gauge-text strong { color: var(--danger); }
.gauge-meta { font-size: var(--step--1); color: var(--muted); display: flex; flex-wrap: wrap; gap: .15rem 1rem; }

/* ------------------------------------------------------------------ espace de travail */
.workspace {
  display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1rem; align-items: start;
  max-width: 82rem; margin: 1rem auto 2rem; padding: 0 16px;
}
.info { margin-left: max(16px, calc((100% - 82rem) / 2)); margin-right: max(16px, calc((100% - 82rem) / 2)); }

/* arborescence */
.tree {
  position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto;
  background: var(--surface); border-radius: 10px; box-shadow: var(--shadow); padding: .75rem .5rem .9rem;
}
.tree-toggle > summary { padding: .25rem .6rem .5rem; font-size: var(--step--1); font-weight: 600; color: var(--muted); cursor: default; }
.tree ul { list-style: none; margin: 0 0 0 .95rem; padding: 0 0 0 .35rem; border-left: 1px solid var(--line); }
.tree-toggle > ul { margin-left: .95rem; }
.tree li { margin: 1px 0; }
.tree li > details > summary { display: flex; align-items: center; cursor: pointer; }
.tree li > details > summary::before {
  content: ""; flex: none; width: .9rem; height: .9rem; margin-left: -.95rem; margin-right: .05rem;
  background: currentColor; color: var(--muted);
  clip-path: polygon(30% 20%, 75% 50%, 30% 80%); transition: transform .15s ease;
}
.tree li > details[open] > summary::before { transform: rotate(90deg); }
.tree-link {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem;
  padding: .3rem .5rem; border-radius: 6px; color: var(--ink); text-decoration: none;
}
.tree-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-link:hover { background: var(--sunken); }
.tree-link.is-current { background: var(--accent-soft); font-weight: 600; }
.tree-root { margin: 0 0 .15rem; }

/* fichiers */
.files { background: var(--surface); border-radius: 10px; box-shadow: var(--shadow); padding: 1rem 1.25rem 1.25rem; min-height: 22rem; }
.files > .notice { margin-bottom: .75rem; }
.files-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; }
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; font-size: var(--step-1); font-weight: 600; min-width: 0; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.crumb-sep { color: var(--line); font-weight: 400; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.upload { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.upload label.btn { position: relative; }
.upload label.btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.upload-hint { font-size: var(--step--1); color: var(--muted); }
.upload.is-busy { opacity: .7; pointer-events: none; }

.popover { position: relative; }
.popover > summary { cursor: pointer; }
.popover-body {
  position: absolute; z-index: 10; top: calc(100% + .35rem); left: 0; width: 17rem;
  display: grid; gap: .6rem; padding: .85rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  text-align: left;
}
.popover-end > .popover-body { left: auto; right: 0; }

.listing { width: 100%; border-collapse: collapse; }
.listing th {
  text-align: left; font-size: var(--step--1); font-weight: 600; color: var(--muted);
  padding: .4rem .6rem; border-bottom: 1px solid var(--line);
}
.listing td { padding: .3rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.listing tbody tr:last-child td { border-bottom: 0; }
.listing tbody tr:hover { background: var(--sunken); }
.col-size, .col-date { white-space: nowrap; color: var(--muted); font-size: var(--step--1); }
.col-size { text-align: right; width: 7rem; }
.listing th.col-size { text-align: right; }
.col-date { width: 9.5rem; }
.col-act { width: 3rem; text-align: right; }
.item { display: flex; align-items: center; gap: .6rem; min-height: 2.4rem; color: var(--ink); text-decoration: none; min-width: 0; }
.item span { overflow-wrap: anywhere; }
.item:hover span { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.row-up .item { color: var(--muted); }

.empty { display: grid; justify-items: center; text-align: center; gap: .3rem; padding: 3.5rem 1rem; color: var(--muted); }
.empty strong { color: var(--ink); font-size: var(--step-1); }
.empty-ico { width: 4rem; height: 3.4rem; fill: var(--folder); opacity: .35; margin-bottom: .5rem; }

/* ------------------------------------------------------------------ petits écrans */
@media (max-width: 960px) {
  .info { grid-template-columns: 1fr auto; }
  .gauge { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; max-width: none; }
}
@media (max-width: 760px) {
  .workspace { grid-template-columns: 1fr; }
  .tree { position: static; max-height: none; }
  .tree-toggle > summary { cursor: pointer; display: flex; justify-content: space-between; }
  .tree-toggle > summary::after { content: "Afficher"; font-weight: 400; color: var(--accent); }
  .tree-toggle[open] > summary::after { content: "Masquer"; }
  .col-date { display: none; }
  .files { padding: .85rem .75rem 1rem; }
  .info { padding: 1rem; }
  .popover-body { width: min(17rem, calc(100vw - 48px)); }
  .col-size { width: 4.75rem; }
  .col-act { width: 2.5rem; }
  .listing td, .listing th { padding-left: .35rem; padding-right: .35rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}