/* Classeur de projets — feuille de style unique */

/* Polices servies par votre propre domaine (Archivo & IBM Plex,
   licence SIL Open Font License 1.1). Aucune requête extérieure. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/archivo-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/archivo-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --paper:#F1F4F3; --surface:#FFFFFF; --surface-2:#E7ECEA; --raise:#FBFCFC;
  --ink:#141A19; --ink-2:#495553; --ink-3:#73817E;
  --line:#D5DEDB; --line-strong:#B9C6C2;
  --accent:#0E6B60; --accent-ink:#0A4F47; --accent-soft:#D9EDE8; --on-accent:#FFFFFF;
  --ok:#2C6E4A; --ok-soft:#DCEFE3; --danger:#A32A22; --danger-soft:#F6E2E0;
  --shadow:0 1px 2px rgba(18,38,35,.06), 0 8px 24px -16px rgba(18,38,35,.35);
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1413; --surface:#151C1B; --surface-2:#1D2625; --raise:#1A2221;
    --ink:#E7EDEB; --ink-2:#A8B5B2; --ink-3:#7B8986;
    --line:#283331; --line-strong:#3A4846;
    --accent:#4FCBB9; --accent-ink:#8CE4D5; --accent-soft:#15322E; --on-accent:#07201D;
    --ok:#63C28C; --ok-soft:#16301F; --danger:#E88C82; --danger-soft:#39201E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.8);
  }
}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding-block:28px 56px; padding-left:20px; padding-right:20px;
}
h1,h2,h3{font-family:Archivo,ui-sans-serif,system-ui,sans-serif; margin:0; text-wrap:balance}
p{margin:0}
a{color:var(--accent-ink)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.soft{color:var(--ink-2)}
.eyebrow{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.wrap{max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:20px}

/* ---- page de garde (installation / connexion) ---- */
.gate{max-width:430px; margin:8vh auto 0; background:var(--surface); border:1px solid var(--line);
      border-radius:var(--r); box-shadow:var(--shadow); padding:26px 26px 28px}
.gate h1{font-size:25px; font-weight:700; letter-spacing:-.015em; margin-top:6px}
.gate .lede{color:var(--ink-2); font-size:13.5px; margin-top:9px}
.gate form{display:flex; flex-direction:column; gap:7px; margin-top:20px}
.gate .btn{margin-top:9px}
.hint{font-size:12.5px; color:var(--ink-2); margin-top:6px}

/* ---- en-tête ---- */
.masthead{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; justify-content:space-between}
.masthead h1{font-size:29px; font-weight:700; letter-spacing:-.015em}
.masthead .lede{margin-top:5px; color:var(--ink-2); max-width:58ch}

/* ---- messages ---- */
.flashes{display:flex; flex-direction:column; gap:6px}
.flash{font-size:13.5px; padding:9px 13px; border-radius:8px; border:1px solid var(--line)}
.flash.ok{background:var(--ok-soft); border-color:transparent; color:var(--ok)}
.flash.err{background:var(--danger-soft); border-color:transparent; color:var(--danger)}

/* ---- bandeau chiffres ---- */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line);
       border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
@media (max-width:640px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.stat{background:var(--surface); padding:13px 16px}
.stat b{display:block; font-family:Archivo; font-size:23px; font-weight:600; letter-spacing:-.01em;
        font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.stat b.small{font-size:15px; padding-block:4px 3px}
.stat span{font-size:12px; color:var(--ink-3)}

/* ---- grille ---- */
.grid{display:grid; grid-template-columns:290px minmax(0,1fr); gap:20px; align-items:start}
@media (max-width:860px){ .grid{grid-template-columns:minmax(0,1fr)} }
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.panel > header{padding:13px 16px; border-bottom:1px solid var(--line);
                display:flex; align-items:center; justify-content:space-between; gap:12px}
.panel > header h2{font-size:14px; font-weight:600}
.panel > header h2.big{font-size:21px; letter-spacing:-.01em; overflow-wrap:anywhere}
.sub{color:var(--ink-2); font-size:13.5px; margin-top:3px; overflow-wrap:anywhere}
.toolbar{display:flex; flex-wrap:wrap; gap:4px; align-items:center}
.toolbar form{margin:0}

/* ---- liste des projets ---- */
.plist{list-style:none; margin:0; padding:6px; display:flex; flex-direction:column; gap:2px;
       max-height:min(52vh,460px); overflow-y:auto}
.plist li.none{padding:12px 10px; color:var(--ink-3); font-size:13px}
.plist a{display:grid; grid-template-columns:1fr auto; gap:2px 10px; text-decoration:none; color:inherit;
         border-radius:8px; padding:9px 10px}
.plist a:hover{background:var(--surface-2)}
.plist a[aria-current="page"]{background:var(--accent-soft)}
.plist a[aria-current="page"] .pname{color:var(--accent-ink); font-weight:600}
.pname{font-weight:500; overflow-wrap:anywhere}
.pmeta{grid-column:1/-1; font-size:11.5px; color:var(--ink-3)}
.count{font-size:11px; color:var(--ink-2); background:var(--surface-2); border-radius:99px;
       padding:1px 7px; align-self:center}
.plist a[aria-current="page"] .count{background:var(--surface)}

/* ---- formulaires ---- */
.newp{padding:12px 16px 15px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.lab{font-size:11.5px; font-weight:600; color:var(--ink-2)}
input[type=text], input[type=password]{
  width:100%; font:inherit; font-size:14px; color:var(--ink); background:var(--raise);
  border:1px solid var(--line-strong); border-radius:8px; padding:8px 10px;
}
input:focus-visible, button:focus-visible, a:focus-visible, label.btn:focus-within{
  outline:2px solid var(--accent); outline-offset:2px;
}
.btn{display:inline-block; font:inherit; font-size:13.5px; font-weight:600; border-radius:8px;
     padding:8px 13px; cursor:pointer; border:1px solid var(--line-strong);
     background:var(--raise); color:var(--ink); text-align:center}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:none; border-color:transparent; color:var(--ink-2); padding:5px 8px; font-weight:500}
.btn.ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn.danger{color:var(--danger)}
.btn.inline{padding:4px 10px; font-size:13px}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.logout{margin:0}
.inlineform{display:inline}

/* ---- zone de dépôt ---- */
.drop{margin:16px; padding:22px 18px; border:1.5px dashed var(--line-strong); border-radius:var(--r);
      background:var(--raise); text-align:center; transition:border-color .15s, background .15s;
      display:flex; flex-direction:column; align-items:center; gap:8px}
.drop.over{border-color:var(--accent); background:var(--accent-soft)}
.drop p{color:var(--ink-2); font-size:13.5px}
.drop p.big{font-family:Archivo; font-size:16px; font-weight:600; color:var(--ink)}
.drop .fmts{font-size:11.5px; color:var(--ink-3); max-width:52ch}
.drop .chosen{font-size:13px; color:var(--accent-ink); font-weight:600; overflow-wrap:anywhere}
.drop input[type=file]{font-size:12.5px; color:var(--ink-2); max-width:100%}
.drop.enhanced input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}

/* ---- tableau ---- */
.tablewrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
   font-weight:600; padding:0 16px 8px; border-bottom:1px solid var(--line); white-space:nowrap}
th.num, td.num{text-align:right}
td{padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
.fname{font-weight:500; overflow-wrap:anywhere}
td.num, td.act{white-space:nowrap}
td.act{text-align:right}
.chip{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:500;
      letter-spacing:.04em; text-transform:uppercase; padding:2px 6px; border-radius:5px;
      background:var(--surface-2); color:var(--ink-2); white-space:nowrap}
.chip.doc{background:var(--accent-soft); color:var(--accent-ink)}
a.open{color:var(--accent-ink); font-weight:600; text-decoration:none; border-bottom:1px solid transparent;
       margin-left:10px}
a.open:hover{border-bottom-color:currentColor}

/* ---- états vides ---- */
.empty{padding:34px 24px; text-align:center; color:var(--ink-2)}
.empty.slim{padding:22px 24px}
.empty h3{font-size:17px; font-weight:600; color:var(--ink); margin-bottom:6px}
.empty p{margin:0 auto; max-width:46ch; font-size:13.5px}

/* ---- notification ---- */
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(8px); opacity:0;
       background:var(--ink); color:var(--paper); font-size:13px; font-weight:500; padding:9px 15px;
       border-radius:99px; box-shadow:var(--shadow); pointer-events:none;
       transition:opacity .2s, transform .2s; z-index:9}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }