/* COM-IT - theme inspire de MesSpectacles : menu lateral, sombre par defaut, clair au choix */
:root{--bg:#0c0c1d;--carte:rgba(255,255,255,.04);--carte-pleine:#15152b;--survol:rgba(255,255,255,.07);--ink:#e8e8f0;--quiet:rgba(255,255,255,.45);
--ligne:rgba(255,255,255,.08);--acc:#ff6633;--acc2:#ffaa33;--acc-bg:rgba(255,102,51,.12);--saisie:rgba(255,255,255,.06);--saisie-bord:rgba(255,255,255,.12);
--menu:rgba(12,12,30,.96);--menu-lien:rgba(255,255,255,.6);--ombre:0 12px 40px rgba(0,0,0,.3);
--ok:#44cc88;--ok-bg:rgba(68,204,136,.12);--bientot:#ff9f33;--bientot-bg:rgba(255,136,0,.13);--retard:#ff5a5a;--retard-bg:rgba(255,68,68,.13);--menu-l:250px}
[data-theme="light"]{--bg:#f0f2f8;--carte:#fff;--carte-pleine:#fff;--survol:rgba(0,0,0,.04);--ink:#1a1a2e;--quiet:rgba(0,0,0,.5);
--ligne:rgba(0,0,0,.1);--acc:#e8541c;--acc-bg:rgba(255,102,51,.1);--saisie:#fff;--saisie-bord:rgba(0,0,0,.15);
--menu:rgba(255,255,255,.96);--menu-lien:rgba(0,0,0,.6);--ombre:0 8px 30px rgba(0,0,0,.08);
--ok:#1f8a55;--ok-bg:#e3f5ea;--bientot:#b8650b;--bientot-bg:#fcf0dc;--retard:#c62828;--retard-bg:#fde8e7}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Inter,"Segoe UI",system-ui,sans-serif;min-height:100vh}
a{color:var(--acc)}
select option{background:var(--carte-pleine);color:var(--ink)}

/* Menu lateral */
.menu{position:fixed;top:0;left:0;bottom:0;width:var(--menu-l);background:var(--menu);border-right:1px solid var(--ligne);
  padding:24px 16px;display:flex;flex-direction:column;overflow-y:auto;z-index:100;backdrop-filter:blur(20px)}
.logo{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--ligne);text-decoration:none;color:var(--ink)}
.logo img{width:40px;height:40px;flex-shrink:0;filter:drop-shadow(0 4px 10px rgba(255,102,51,.35))}
.logo b small{display:block;font-size:10.5px;font-weight:500;color:var(--quiet);letter-spacing:.3px;margin-top:-2px}
.connexion-logo{display:flex;align-items:center;gap:14px;margin-bottom:6px}.connexion-logo img{width:56px;height:56px}
.connexion-logo b{font-size:26px}.connexion-logo b span{color:var(--acc)}
.logo b{font-size:18px}.logo b span{color:var(--acc)}
.menu .section{font-size:11px;color:var(--quiet);text-transform:uppercase;letter-spacing:1.4px;margin:18px 0 8px 12px}
.menu a.lien{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--menu-lien);text-decoration:none;margin-bottom:2px;transition:.15s}
.menu a.lien:hover{background:var(--survol);color:var(--ink)}
.menu a.lien.actif{background:var(--acc-bg);color:var(--acc)}
.menu svg{width:18px;height:18px;flex-shrink:0}
.menu .pied{margin-top:auto;padding-top:16px;border-top:1px solid var(--ligne)}
.moi{display:flex;align-items:center;gap:10px;padding:6px}
.moi i{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#9966ff,#4488ff);color:#fff;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center}
.moi b{display:block;font-size:13px}.moi small{color:var(--quiet);font-size:11px;word-break:break-all}
.menu .bas{display:flex;gap:6px;margin-top:10px}
.menu .bas a,.menu .bas button{flex:1;margin:0;padding:8px;border-radius:8px;font-size:12px;text-align:center;text-decoration:none;font-weight:500}
.menu .bas button{background:var(--carte);border:1px solid var(--ligne);color:var(--quiet)}
.menu .bas a{background:rgba(255,68,68,.1);border:1px solid rgba(255,68,68,.25);color:#ff6b6b}
.ouvrir-menu{display:none}

main{margin-left:var(--menu-l);padding:28px 34px 48px;max-width:calc(1280px + var(--menu-l))}
.sans-menu main,.sans-menu .demo{margin-left:0;max-width:none}
h1{font-size:26px;font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
h2{font-size:17px;margin:28px 0 10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
h3{font-size:15px;margin:18px 0 8px}
.quiet{color:var(--quiet)}.petit{font-size:11.5px}

/* Tableaux */
table{width:100%;border-collapse:collapse;background:var(--carte);border:1px solid var(--ligne);border-radius:12px;overflow:hidden;font-size:13px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--ligne);vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--quiet);font-weight:600}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--survol)}
tr.retard td:first-child{box-shadow:inset 3px 0 var(--retard)}
tr.bientot td:first-child{box-shadow:inset 3px 0 var(--bientot)}
tr.inactif{opacity:.5}
td.choix,th.choix{width:28px;padding-right:0}
.etat{display:inline-block;padding:2px 10px;border-radius:6px;font-size:11.5px;font-weight:600;white-space:nowrap}
.etat.ok{color:var(--ok);background:var(--ok-bg)}
.etat.bientot{color:var(--bientot);background:var(--bientot-bg)}
.etat.retard{color:var(--retard);background:var(--retard-bg)}

/* Cartes */
.carte{background:var(--carte);border:1px solid var(--ligne);border-radius:14px;padding:18px;margin-bottom:16px}
.carte.etroit{max-width:420px;margin:80px auto;box-shadow:var(--ombre)}
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:16px}
.cartes .carte{margin:0}

/* Formulaires */
label{display:block;font-weight:600;font-size:12.5px;margin:12px 0 4px;color:var(--quiet)}
label.case{font-weight:400;display:flex;align-items:center;gap:8px;color:var(--ink)}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--saisie-bord);border-radius:8px;background:var(--saisie);color:var(--ink);font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc)}
input::placeholder,textarea::placeholder{color:var(--quiet)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--acc)}
textarea.mono,pre,code{font-family:Consolas,"Courier New",monospace;font-size:12.5px}
pre{background:var(--survol);border:1px solid var(--ligne);border-radius:8px;padding:10px;overflow-x:auto;white-space:pre-wrap;margin:4px 0}
.pre{white-space:pre-wrap}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}
button,.bouton{display:inline-block;padding:8px 16px;border:0;border-radius:8px;background:var(--acc);color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;font-size:13px}
button:hover,.bouton:hover{filter:brightness(1.08)}
button.discret,.bouton.discret{background:var(--carte);color:var(--ink);border:1px solid var(--ligne)}
button.danger{background:rgba(255,68,68,.15);color:#ff6b6b;border:1px solid rgba(255,68,68,.3)}
button:disabled{opacity:.4;cursor:default;filter:none}
form button{margin-top:14px}
form.ligne{display:flex;gap:6px}form.ligne button{margin:0}
button.mini,.bouton.mini{padding:2px 9px;font-size:11px;margin:0 2px}
.flash{background:var(--ok-bg);color:var(--ok);padding:10px 14px;border-radius:10px;margin-bottom:16px}
.erreur{background:var(--retard-bg);color:var(--retard);padding:10px 14px;border-radius:10px}
.erreur a{color:inherit;font-weight:600}
.consigne{background:var(--survol);border-left:3px solid var(--acc);padding:8px 12px;border-radius:6px}
ol.etapes{margin:6px 0;padding-left:22px}ol.etapes li{margin:4px 0}
p.outil{background:var(--survol);border-radius:8px;padding:8px 12px}
.colonnes-tache{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1100px){.colonnes-tache{grid-template-columns:1fr}}
.commande{display:flex;gap:8px;align-items:flex-start}.commande pre{flex:1}.commande button{margin:4px 0 0}
/* Une commande par bloc : titre numerote, commande, case de resultat */
.bloc-commande{border:1px solid var(--ligne);border-radius:8px;padding:8px 10px;margin:10px 0}.titre-commande{margin-bottom:4px}.bloc-commande textarea{margin-top:6px}
.filtres{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-end;margin-bottom:16px;background:var(--carte);border:1px solid var(--ligne);border-radius:14px;padding:12px 16px}
.filtres label{margin:0}.filtres input,.filtres select{width:auto}.filtres button{margin:0}

/* Barre de selection par lot */
.lot{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--carte-pleine);border:1px solid var(--acc);
  border-radius:12px;padding:8px 14px;margin-bottom:12px;box-shadow:var(--ombre)}
.lot button{margin:0}[hidden]{display:none!important}

/* Divers */
.collage{border:2px dashed var(--ligne);border-radius:10px;padding:14px;text-align:center;color:var(--quiet);margin-bottom:6px;cursor:text}
.collage:focus{outline:none;border-color:var(--acc)}
.apercu,.captures{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.apercu img,.captures img{max-height:140px;max-width:240px;border:1px solid var(--ligne);border-radius:8px}
.preuve{border-bottom:1px solid var(--ligne);padding:8px 0}
.bilan .carte b{display:block;font-size:28px}.bilan .carte span{color:var(--quiet);font-size:13px}
.bilan b.ok{color:var(--ok)}.bilan b.bientot{color:var(--bientot)}.bilan b.retard{color:var(--retard)}
table.interne{border:0;background:transparent;border-radius:0}table.interne td{border-bottom:1px solid var(--ligne);padding:5px 8px}
table.interne tbody tr:hover td,table.interne tr:hover td{background:transparent}
.colonnes{columns:2 320px;column-gap:24px}.colonnes label{margin:2px 0;break-inside:avoid}
form.coffre{align-items:center;flex-wrap:wrap;margin:0 0 10px}form.coffre input{width:auto;min-width:220px}
.secret{white-space:nowrap}.secret code,td code{background:var(--survol);padding:1px 6px;border-radius:5px}
.mdp{display:flex;gap:4px}.mdp input{flex:1}.mdp button{margin:0}
nav.ancres{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 16px}
nav.ancres a{padding:6px 12px;border:1px solid var(--ligne);border-radius:8px;text-decoration:none;font-size:12.5px;background:var(--carte);color:var(--ink)}
nav.ancres a.actif{background:var(--acc);border-color:var(--acc);color:#fff}
details.groupe>summary{list-style:none;display:flex;gap:10px;align-items:center}
details.groupe>summary::before{content:"\25B8";color:var(--acc);transition:.15s}details.groupe[open]>summary::before{transform:rotate(90deg)}
.editeur{border:1px solid var(--saisie-bord);border-radius:10px;background:var(--saisie)}
.editeur .barre{display:flex;flex-wrap:wrap;gap:2px;padding:6px;border-bottom:1px solid var(--ligne);border-radius:10px 10px 0 0}
.editeur .zone{min-height:220px;padding:10px 12px;outline:none}.editeur>p{margin:4px 10px 8px}
form .editeur button{margin-top:0}
.riche img{max-width:100%;height:auto;border:1px solid var(--ligne);border-radius:6px;margin:4px 0}
.riche h3{margin:14px 0 6px}.riche p{margin:6px 0}.riche table{width:auto}
details summary{cursor:pointer;color:var(--acc)}
.depot{border:2px dashed var(--ligne);border-radius:10px;padding:18px;text-align:center;color:var(--quiet)}
.depot.survol{border-color:var(--acc);background:var(--survol)}.depot input{width:auto}
.demo{background:#7a1f9c;color:#fff;text-align:center;font-weight:700;padding:8px 16px;margin-left:var(--menu-l)}

@media (max-width:900px){
  .menu{transform:translateX(-100%);transition:.2s}.menu.ouvert{transform:none}
  main,.demo{margin-left:0;padding:64px 16px 40px}
  .ouvrir-menu{display:block;position:fixed;top:12px;left:12px;z-index:101;margin:0}
  table{display:block;overflow-x:auto}
}
@media print{
  .menu,.ouvrir-menu,.non-imprime,.bouton,.lot{display:none!important}
  :root{--bg:#fff;--carte:#fff;--ink:#000;--quiet:#555;--ligne:#bbb}
  body{background:#fff;color:#000;font-size:11px}main{margin:0;max-width:none;padding:0}
  .saut{page-break-before:always}.saut:first-of-type{page-break-before:auto}
  .captures img{max-height:220px;max-width:45%}
  .demo{background:none;color:#000;border:3px solid #000;font-size:16px;margin:0}
}