:root{
  --bg:#f4f5f2; --surface:#ffffff; --surface2:#eef0ec; --ink:#1b2420; --ink2:#4d5a54; --ink3:#7b8781;
  --line:#d8ddd8; --accent:#1f5f4a; --accent-soft:#dcebe4; --maq:#8a5a00; --maq-soft:#fbefd6;
  --ok:#1e7a45; --ok-bg:#dff1e5; --part:#9a6400; --part-bg:#fbefd2; --ko:#b3261e; --ko-bg:#fbe2df;
  --ver:#2f5d8a; --ver-bg:#e0ebf6; --hors:#5f6b66; --hors-bg:#e9ece9; --code:#f6f7f4;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#121815; --surface:#19211d; --surface2:#202a25; --ink:#e4ebe6; --ink2:#a9b6af; --ink3:#7f8c85;
  --line:#2e3a34; --accent:#6cc3a0; --accent-soft:#1e3a2f; --maq:#e9b85a; --maq-soft:#3a2e14;
  --ok:#6fd39a; --ok-bg:#173826; --part:#e9b85a; --part-bg:#3a2e14; --ko:#f08a82; --ko-bg:#401c19;
  --ver:#8dbbe8; --ver-bg:#1b2e41; --hors:#a9b6af; --hors-bg:#262f2b; --code:#141b18; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#121815; --surface:#19211d; --surface2:#202a25; --ink:#e4ebe6; --ink2:#a9b6af; --ink3:#7f8c85;
  --line:#2e3a34; --accent:#6cc3a0; --accent-soft:#1e3a2f; --maq:#e9b85a; --maq-soft:#3a2e14;
  --ok:#6fd39a; --ok-bg:#173826; --part:#e9b85a; --part-bg:#3a2e14; --ko:#f08a82; --ko-bg:#401c19;
  --ver:#8dbbe8; --ver-bg:#1b2e41; --hors:#a9b6af; --hors-bg:#262f2b; --code:#141b18; color-scheme:dark }
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:15px/1.5 "IBM Plex Sans",system-ui,sans-serif}
.mono,code,pre{font-family:"IBM Plex Mono",ui-monospace,monospace}
h1,h2,h3{text-wrap:balance;margin:0;line-height:1.25}
h1{font-size:1.55rem}h2{font-size:1.2rem}h3{font-size:1rem}
.maq{background:var(--maq-soft);color:var(--maq);border-bottom:1px solid var(--line);padding:6px 16px;font-size:.82rem;text-align:center}
header.top{background:var(--surface);border-bottom:1px solid var(--line);padding:12px 16px;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between}
.marque{display:flex;flex-direction:column}
.marque b{font-size:1.05rem;letter-spacing:.01em}
.marque span{font-size:.8rem;color:var(--ink2)}
.jour{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.compte{background:var(--accent);color:var(--surface);border-radius:6px;padding:6px 12px;font-weight:600;font-variant-numeric:tabular-nums}
.qui{font-size:.82rem;color:var(--ink2)}
.cadre{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:calc(100vh - 100px)}
nav.menu{background:var(--surface);border-right:1px solid var(--line);padding:12px 0}
nav.menu table{width:100%;border-collapse:collapse}
nav.menu td{padding:0}
nav.menu a{display:flex;justify-content:space-between;gap:8px;padding:9px 16px;color:var(--ink);text-decoration:none;border-left:3px solid transparent;font-size:.92rem}
nav.menu a:hover{background:var(--surface2)}
nav.menu a.actif{border-left-color:var(--accent);background:var(--accent-soft);font-weight:600}
nav.menu .n{color:var(--ink3);font-variant-numeric:tabular-nums;font-size:.8rem}
nav.menu .sep td{padding:12px 16px 4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3)}
main{padding:22px 24px 48px;min-width:0;display:flex;flex-direction:column;gap:18px}
.bloc{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px 18px;min-width:0}
.bloc>h2{margin-bottom:10px}
.lead{color:var(--ink2);max-width:72ch;margin:4px 0 0}
.grille2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;font-size:.92rem}
.kv dt{color:var(--ink2)}.kv dd{margin:0;font-weight:500}
.barre{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--surface2);margin:8px 0}
.barre i{display:block;height:100%}
.leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.84rem;color:var(--ink2)}
.pt{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.st{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.76rem;font-weight:600;white-space:nowrap}
.st.ok{background:var(--ok-bg);color:var(--ok)}.st.part{background:var(--part-bg);color:var(--part)}
.st.ko{background:var(--ko-bg);color:var(--ko)}.st.ver{background:var(--ver-bg);color:var(--ver)}
.st.hors{background:var(--hors-bg);color:var(--hors)}
.filtres{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filtres select,.filtres input{font:inherit;font-size:.9rem;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
.filtres input{min-width:0;flex:1 1 200px}
.tabw{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
table.t{border-collapse:collapse;width:100%;font-size:.88rem}
table.t th{text-align:left;font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);background:var(--surface2);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t tr.cl{cursor:pointer}table.t tr.cl:hover td{background:var(--surface2)}
table.t td.id{font-family:"IBM Plex Mono",monospace;font-weight:500;white-space:nowrap}
.cinq{display:flex;gap:3px}
.cinq span{width:18px;height:18px;border-radius:3px;font-size:.62rem;display:grid;place-items:center;font-weight:600;background:var(--surface2);color:var(--ink3)}
.cinq span.on{background:var(--accent);color:var(--surface)}
.fil{font-size:.85rem;color:var(--ink2)}.fil a{color:var(--accent)}
.preuves{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.preuve{border:1px solid var(--line);border-radius:8px;background:var(--surface);display:flex;flex-direction:column;min-width:0}
.preuve .tete{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);gap:8px}
.preuve .tete b{font-size:.92rem}
.preuve .corps{padding:12px 14px;display:flex;flex-direction:column;gap:8px;font-size:.88rem;min-width:0}
.preuve .vide{color:var(--ink3);font-style:italic}
.ticket{font-family:"IBM Plex Mono",monospace;font-size:.76rem;background:#fffef8;color:#222;border:1px dashed #bbb;padding:10px 12px;white-space:pre;overflow-x:auto;line-height:1.35}
pre.sql{background:var(--code);border:1px solid var(--line);border-radius:6px;padding:10px;font-size:.76rem;overflow-x:auto;margin:0;white-space:pre}
.ecran{border:1px solid var(--line);border-radius:6px;overflow:hidden;font-size:.8rem}
.ecran .barre-ecran{background:var(--accent);color:var(--surface);padding:5px 10px;font-weight:600}
.ecran .contenu{padding:10px;display:flex;flex-direction:column;gap:6px;background:var(--surface2)}
.ligne-e{display:flex;justify-content:space-between;gap:8px;font-variant-numeric:tabular-nums}
.verif{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;background:var(--ok-bg);color:var(--ok);font-weight:600;font-size:.84rem}
.btn{font:inherit;font-size:.86rem;padding:7px 12px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.btn.p{background:var(--accent);color:var(--surface);border-color:var(--accent)}
.avert{border-left:4px solid var(--ko);background:var(--ko-bg);padding:10px 14px;border-radius:0 6px 6px 0;font-size:.9rem}
.info{border-left:4px solid var(--accent);background:var(--accent-soft);padding:10px 14px;border-radius:0 6px 6px 0;font-size:.9rem}
.onglets{display:flex;gap:6px;flex-wrap:wrap}
.onglets button{font:inherit;font-size:.86rem;padding:6px 12px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.onglets button.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
ol.q{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.etape{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--surface)}
.etape small{display:block;color:var(--ink3);font-variant-numeric:tabular-nums}
.etape.fixe{border-color:var(--accent);background:var(--accent-soft)}
@media (max-width:820px){
  .cadre{grid-template-columns:1fr}
  nav.menu{border-right:0;border-bottom:1px solid var(--line);padding:4px 0;overflow-x:auto}
  nav.menu table,nav.menu tbody{display:block}
  nav.menu tbody{display:flex;white-space:nowrap}
  nav.menu tr{display:block}nav.menu .sep{display:none}
  nav.menu a{border-left:0;border-bottom:3px solid transparent;padding:9px 12px}
  nav.menu a.actif{border-bottom-color:var(--accent)}
  main{padding:16px 16px 40px}
}
.photo{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.photo label{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.vign{width:48px;height:48px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}
@media (max-width:820px){
 .photo label.btn.p{padding:10px 16px;font-size:1rem}
 table.pcs thead{display:none}
 table.pcs,table.pcs tbody{display:block}
 table.pcs tr{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:12px;border-bottom:1px solid var(--line)}
 table.pcs td{display:block;border:0;padding:0}
 table.pcs td:nth-child(2){grid-column:1/-1;color:var(--ink2);font-size:.86rem}
 table.pcs td:nth-child(3){display:none}
 table.pcs td:nth-child(4){grid-column:1/-1}
 table.pcs td:nth-child(5){grid-row:1;grid-column:2}
}
/* ajouts du vrai site (au-delà de la maquette) */
.cinq span.joint{background:var(--ok);color:var(--surface)}
.pastilles{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pastille{font-size:.8rem;padding:4px 10px}
.titre-fiche{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.nav-fiche{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fichier{display:flex;gap:8px;align-items:center;color:var(--ink);text-decoration:none;font-size:.84rem;margin:4px 0;min-width:0;overflow-wrap:anywhere}
.fichier:hover{text-decoration:underline}
.pile{display:flex;flex-direction:column;gap:10px;max-width:520px}
.pile label{display:flex;flex-direction:column;gap:4px;font-size:.88rem;color:var(--ink2)}
.pile input,.pile select,.pile textarea{font:inherit;font-size:.95rem;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
.pile .btn{align-self:flex-start}
main.connexion{max-width:560px;margin:32px auto;padding:0 16px;display:block}
main.connexion .bloc{display:flex;flex-direction:column;gap:12px}
#code{font-family:"IBM Plex Mono",monospace;font-size:1.4rem;letter-spacing:.3em;max-width:12ch}
pre.source{max-height:70vh;overflow:auto}
pre.source .n{color:var(--ink3);user-select:none}
select[data-fermer]{font:inherit;font-size:.8rem;padding:2px 6px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}