:root{
  color-scheme:light dark;
  --bleu:#0b2a5b; --bleu-clair:#1d4e97; --bleu-pale:#eaf0fa;
  --fond:#f5f7fb; --carte:#ffffff; --texte:#000000; --bord:#c8d4e6;
  --ok:#0a6b3d; --alerte:#a32020; --alerte-fond:#fdf0ef;
}
@media (prefers-color-scheme: dark){
  :root{
    --bleu:#8fb5f0; --bleu-clair:#a8c6f5; --bleu-pale:#12233d;
    --fond:#0b1220; --carte:#131c2c; --texte:#f2f5fa; --bord:#2c3d59;
    --ok:#5fd39a; --alerte:#ff8a8a; --alerte-fond:#2a1618;
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; background:var(--fond); color:var(--texte);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.5; padding:24px 16px 64px;
}
.wrap{max-width:1100px;margin:0 auto}
h1{font-size:1.5rem;margin:0 0 4px;color:var(--bleu)}
h2{font-size:1.05rem;color:var(--bleu);margin:0 0 12px}
.compte{font-weight:400;font-size:.9rem}
.entete{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.entete p{margin:0;font-size:.92rem}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:12px;padding:20px;margin-bottom:20px}
.connexion{max-width:380px;margin:12vh auto 0;background:var(--carte);border:1px solid var(--bord);border-radius:12px;padding:28px}
.connexion p{margin:0 0 16px;font-size:.92rem}
.connexion input{width:100%;margin-bottom:12px}
.connexion button{width:100%}
label{display:block;font-size:.8rem;font-weight:600;margin-bottom:4px}
input,select{
  font:inherit;padding:9px 10px;border:1px solid var(--bord);border-radius:8px;
  background:var(--carte);color:var(--texte);min-height:42px;max-width:100%;
}
button,.bouton{
  font:inherit;font-weight:600;padding:9px 16px;border-radius:8px;border:1px solid var(--bleu);
  background:var(--bleu);color:var(--carte);cursor:pointer;min-height:42px;text-decoration:none;display:inline-block;
}
button.sec,.bouton.sec{background:transparent;color:var(--bleu)}
button.danger{background:transparent;border-color:var(--alerte);color:var(--alerte)}
button:disabled{opacity:.5;cursor:wait}
button:focus-visible,.bouton:focus-visible,input:focus-visible,select:focus-visible,#drop:focus-visible{outline:2px solid var(--bleu-clair);outline-offset:2px}
#drop{
  border:2px dashed var(--bleu-clair);border-radius:12px;padding:30px 20px;
  text-align:center;cursor:pointer;background:var(--bleu-pale);
}
#drop.over{background:var(--carte);border-color:var(--bleu)}
#drop strong{display:block;font-size:1.05rem;color:var(--bleu);margin-bottom:4px}
#drop span{font-size:.88rem}
.msg{font-size:.9rem;margin:10px 0 0;min-height:1.3em}
.msg:empty{min-height:0;margin:0}
.ko{color:var(--alerte);font-weight:600}
.ok{color:var(--ok);font-weight:600}
.classeur{border-top:1px solid var(--bord);padding:12px 0;}
.classeur:first-child{margin-top:12px}
.classeur-tete{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.classeur-nom{overflow-wrap:anywhere}
.classeur-nom b{color:var(--bleu);text-transform:capitalize}
.detail{font-size:.84rem}
.alerte{background:var(--alerte-fond);border-left:3px solid var(--alerte);padding:8px 12px;margin-top:8px;font-size:.88rem;border-radius:0 8px 8px 0}
.alerte select{margin-top:6px;display:block}
.titre-ligne{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.titre-ligne h2{margin:0}
.filtres{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin-bottom:14px}
.vide{font-size:.92rem;margin:8px 0 0}
.tableau{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--bord);vertical-align:middle}
th{background:var(--bleu-pale);color:var(--bleu);font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
td.nom{font-weight:600;overflow-wrap:anywhere}
.liens{display:flex;flex-wrap:wrap;gap:6px}
.liens button,td button{font-size:.82rem;padding:6px 10px;min-height:38px;white-space:nowrap}
.aide ul{margin:0 0 12px;padding-left:20px;font-size:.92rem}
.aide li{margin-bottom:6px}
.attention{background:var(--bleu-pale);border-radius:8px;padding:10px 12px;font-size:.9rem;margin:0}
footer{font-size:.8rem;text-align:center;margin-top:24px}
@media (max-width:720px){
  table,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tr{border-bottom:1px solid var(--bord);padding:10px 0}
  td{border:0;padding:3px 0}
}

/* ---------- vue responsable ---------- */
.onglets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.onglet{background:transparent;color:var(--bleu)}
.onglet.actif{background:var(--bleu);color:var(--carte)}
.resume{font-size:.95rem;margin:0}
.resume:empty,.detail:empty{display:none}
.jour{background:var(--carte);border:1px solid var(--bord);border-radius:12px;padding:16px 20px;margin-bottom:12px}
.jour.aujourdhui{border:2px solid var(--bleu-clair)}
.jour-tete{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;margin-bottom:8px}
.jour-tete h3{margin:0;font-size:1rem;color:var(--bleu);text-transform:capitalize}
.services{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px 20px}
.service h4{margin:0 0 4px;font-size:.82rem;color:var(--bleu);text-transform:uppercase;letter-spacing:.03em}
.personne{display:flex;gap:8px;font-size:.86rem;padding:2px 0}
.personne .h{flex:none;min-width:96px;font-variant-numeric:tabular-nums}
.personne.moi{font-weight:700;color:var(--bleu)}
.autres{font-size:.8rem;margin-top:4px}
.alerte.ignoree{opacity:.6;border-left-color:var(--bord);background:transparent}
.alerte-ligne{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between}
.alerte-ligne button,.note button,.regle button,.jour-tete button{font-size:.8rem;padding:4px 10px;min-height:36px}
.note,.regle{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;background:var(--bleu-pale);border-radius:8px;padding:6px 12px;margin-top:8px;font-size:.88rem}
.form-note{border-top:1px solid var(--bord);margin-top:10px;padding-top:10px}
.form-note .filtres{margin-bottom:0}
.form-note input[type=text]{width:260px}
.ligne-employe{display:grid;grid-template-columns:130px 1fr;gap:4px 12px;border-top:1px solid var(--bord);padding:8px 0;font-size:.88rem}
.ligne-employe.repos{opacity:.65}
.ligne-employe .date{font-weight:600;text-transform:capitalize}
@media (max-width:720px){
  .ligne-employe{grid-template-columns:1fr}
}
.services{margin-top:12px}

/* ---------- code téléphone ---------- */
.connexion #bloc-code input{width:100%;margin-bottom:12px}
.carte-code{border:2px solid var(--alerte)}
.qr{display:block;background:#fff;border-radius:8px;margin:8px 0;max-width:100%}
.secret{font-family:ui-monospace,Menlo,Consolas,monospace;overflow-wrap:anywhere;user-select:all}