:root {
    --paper:#e3e8ee; --panel:#fdfefe; --row-alt:#eef2f6; --ink:#16202a; --ink-soft:#51606c;
    --ink-faint:#7d8c99; --line:#bcc7d1; --line-strong:#8fa0ac; --grid:rgba(23,88,92,0.05);
    --accent:#0e7c74; --accent-ink:#0a5a54; --accent-wash:#d3e7e4; --signal:#8f5c12; --signal-wash:#efe3d0;
    --dir-row:#dbeae6; --dir-row2:#cee4df; --hover-line:#8c5896;
    --shadow:rgba(20,32,42,0.13);
    --radius:3px; --maxw:1000px;
    --fs-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --fs-mono:ui-monospace,"Cascadia Code","SFMono-Regular",Menlo,Consolas,monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper:#0b1015; --panel:#1a232d; --row-alt:#141c25; --ink:#e7edf2; --ink-soft:#9aa8b3;
      --ink-faint:#66757f; --line:#2c3742; --line-strong:#43525e; --grid:rgba(85,190,180,0.055);
      --accent:#37b3a8; --accent-ink:#63cabf; --accent-wash:#123029; --signal:#d29a4a; --signal-wash:#2a2216;
      --dir-row:#152a2b; --dir-row2:#183332; --hover-line:#bd97c6;
      --shadow:rgba(0,0,0,0.5);
    }
  }
  :root[data-theme="light"]{--paper:#e3e8ee;--panel:#fdfefe;--row-alt:#eef2f6;--ink:#16202a;--ink-soft:#51606c;--ink-faint:#7d8c99;--line:#bcc7d1;--line-strong:#8fa0ac;--grid:rgba(23,88,92,0.05);--accent:#0e7c74;--accent-ink:#0a5a54;--accent-wash:#d3e7e4;--signal:#8f5c12;--signal-wash:#efe3d0;--dir-row:#dbeae6;--dir-row2:#cee4df;--hover-line:#8c5896;--shadow:rgba(20,32,42,0.13);}
  :root[data-theme="dark"]{--paper:#0b1015;--panel:#1a232d;--row-alt:#141c25;--ink:#e7edf2;--ink-soft:#9aa8b3;--ink-faint:#66757f;--line:#2c3742;--line-strong:#43525e;--grid:rgba(85,190,180,0.055);--accent:#37b3a8;--accent-ink:#63cabf;--accent-wash:#123029;--signal:#d29a4a;--signal-wash:#2a2216;--dir-row:#152a2b;--dir-row2:#183332;--hover-line:#bd97c6;--shadow:rgba(0,0,0,0.5);}

  * { box-sizing:border-box; margin:0; padding:0; }
  .sheet {
    min-height:100vh; background-color:var(--paper);
    background-image:
      repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 26px),
      repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 26px);
    color:var(--ink); font-family:var(--fs-sans); -webkit-font-smoothing:antialiased;
    line-height:1.5; padding:clamp(1rem,4vw,2.6rem) clamp(1rem,4vw,2.5rem) 3rem;
  }
  .wrap { max-width:var(--maxw); margin:0 auto; }

  .masthead { display:flex; align-items:center; gap:1rem; padding-bottom:1.1rem; margin-bottom:1.6rem;
    border-bottom:1.5px solid var(--line-strong); box-shadow:0 3px 0 -1.5px var(--line); }
  .logo-box { flex:none; background:#fff; border:1px solid var(--line); border-radius:9px;
    padding:8px 13px; box-shadow:0 3px 10px -5px var(--shadow); }
  .logo-img { height:58px; width:auto; display:block; }
  .mh-tag { margin-left:auto; font-family:var(--fs-mono); font-size:0.74rem; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--accent-ink); }

  h1 { font-size:clamp(1.9rem,4.6vw,3rem); font-weight:700; letter-spacing:-0.022em; line-height:1.05; text-wrap:balance; margin:0 0 0.9rem; }
  .rule-double { border:0; border-top:1.5px solid var(--line-strong); box-shadow:0 3px 0 -1.5px var(--line); margin:2rem 0 0; }

  .view { animation:rise .35s ease both; }
  @keyframes rise { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none;} }
  [hidden] { display:none !important; }

  .lede { max-width:65ch; color:var(--ink-soft); font-size:1.05rem; }
  .lede strong { color:var(--ink); font-weight:600; }
  .specs { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.1rem; }
  .spec { font-family:var(--fs-mono); font-size:0.72rem; letter-spacing:0.04em; color:var(--accent-ink);
    border:1px solid var(--line-strong); background:var(--panel); border-radius:999px; padding:0.25rem 0.7rem; box-shadow:0 1px 2px var(--shadow); }

  .tile {
    display:flex; align-items:center; gap:1.1rem; margin-top:2rem; width:100%; text-align:left;
    background:var(--panel); border:1.5px solid var(--line-strong); border-left:4px solid var(--accent);
    border-radius:var(--radius); padding:1.3rem 1.4rem; cursor:pointer; color:inherit; font-family:inherit;
    box-shadow:0 6px 18px -10px var(--shadow); transition:transform .16s ease, box-shadow .16s ease;
    text-decoration:none;
  }
  .tile:hover, .tile:focus-visible { transform:translateY(-2px); box-shadow:0 12px 26px -12px var(--shadow), inset 0 0 0 1.5px var(--hover-line); outline:none; }
  .tile:focus-visible { box-shadow:0 0 0 2px var(--accent-wash), 0 0 0 3.5px var(--accent); }
  .tile .ic { flex:none; width:46px; height:46px; color:var(--accent); }
  .tile .t-txt { flex:1; }
  .tile .t-title { font-size:1.15rem; font-weight:650; letter-spacing:-0.01em; }
  .tile .t-sub { font-size:0.9rem; color:var(--ink-soft); margin-top:0.15rem; }
  .tile .t-go { font-family:var(--fs-mono); font-size:1.4rem; color:var(--ink-faint); }
  .tile:hover .t-go { color:var(--hover-line); }

  .crumb { display:flex; flex-wrap:wrap; align-items:center; gap:0.35rem; font-family:var(--fs-mono); font-size:0.82rem; margin-bottom:1rem; }
  .crumb a { color:var(--accent-ink); text-decoration:none; cursor:pointer; }
  .crumb a:hover { text-decoration:underline; }
  .crumb .sep { color:var(--ink-faint); }
  .crumb .here { color:var(--ink); font-weight:600; }

  .toolbar { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.55rem; font-family:var(--fs-mono); font-size:0.72rem; color:var(--ink-faint); }
  .toolbar .lbl { text-transform:uppercase; letter-spacing:0.1em; }
  .toolbar .sort { color:var(--accent-ink); cursor:pointer; }
  .toolbar .grow { flex:1; border-top:1px dashed var(--line); }

  .list { border:1.5px solid var(--line-strong); border-radius:var(--radius); overflow:hidden;
    background:var(--panel); box-shadow:0 8px 22px -12px var(--shadow); }
  .row { display:grid; grid-template-columns:5.4rem 1fr auto auto; align-items:center; gap:0.9rem;
    padding:0.72rem 1rem; border-top:1px solid var(--line); text-decoration:none; color:var(--ink); cursor:pointer;
    background:var(--panel); }
  .row:first-child { border-top:0; }
  .row:nth-child(even) { background:var(--row-alt); }
  /* dossiers : fond teinté de la couleur du dossier (alterné, plus marqué) */
  .row.dir { background:var(--dir-row); }
  .row.dir:nth-child(even) { background:var(--dir-row2); }
  /* survol : liseret violet/rose net, sans décaler la mise en page */
  .row:hover { box-shadow:inset 0 0 0 1.5px var(--hover-line); }
  .row .tag { font-family:var(--fs-mono); font-size:0.68rem; font-weight:600; letter-spacing:0.03em; text-align:center;
    padding:0.24rem 0; border:1px solid var(--line-strong); border-radius:3px; color:var(--ink-soft); background:var(--paper); }
  /* étiquette dossier : contour discret (plus de teal plein) */
  .row.dir .tag { color:var(--accent-ink); border-color:var(--accent); background:var(--panel); }
  .row .nm { font-size:0.95rem; }
  .row.dir .nm { font-weight:650; }
  .row .sz, .row .dt { font-family:var(--fs-mono); font-size:0.76rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .row.legacy { color:var(--ink-faint); }
  .row.legacy .flag { font-family:var(--fs-mono); font-size:0.6rem; color:var(--signal); border:1px solid var(--signal);
    background:var(--signal-wash); border-radius:999px; padding:0.05rem 0.4rem; margin-left:0.45rem; }
  @media (max-width:560px){
    .row { grid-template-columns:4.4rem 1fr; }
    .row .sz { display:none; } .row .dt { grid-column:2; font-size:0.7rem; }
  }

  .back { display:inline-flex; align-items:center; gap:0.4rem; margin-top:1.3rem; font-family:var(--fs-mono); font-size:0.8rem; color:var(--accent-ink); text-decoration:none; cursor:pointer; }
  .back:hover { text-decoration:underline; }

  .cartouche { margin-top:2rem; border:1.5px solid var(--line-strong); border-radius:var(--radius);
    display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; background:var(--panel);
    font-family:var(--fs-mono); box-shadow:0 6px 16px -12px var(--shadow); }
  .cartouche .cell { padding:0.7rem 0.9rem; border-right:1px solid var(--line); }
  .cartouche .cell:last-child { border-right:0; }
  .cartouche .k { font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); }
  .cartouche .v { font-size:0.82rem; color:var(--ink); margin-top:0.2rem; }
  @media (max-width:560px){ .cartouche{ grid-template-columns:repeat(2,1fr);} .cartouche .cell:nth-child(2){border-right:0;}
    .cartouche .cell:nth-child(-n+2){border-bottom:1px solid var(--line);} }

  .note { margin-top:1.4rem; font-size:0.8rem; color:var(--ink-faint); font-style:italic; }
  @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }