:root { --fond:#f5f6f9; --carte:#ffffff; --texte:#1d2233; --texte2:#5b6478; --bord:#e2e6ef; --accent:#2b5fd9; --accent2:#1d2b4f;
  --vert:#2e9e5b; --orange:#e08a1e; --rouge:#d64545; --gris:#9aa3b2; --info:#5b8def; --ombre:0 1px 3px rgba(20,30,60,.08); }
* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body { font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size:15px; line-height:1.45; color:var(--texte); background:var(--fond); }
a { color:var(--accent); }
h1 { font-size:1.35rem; margin:0; }
h2 { font-size:1.1rem; margin:1.2rem 0 .6rem; }
h3 { font-size:1rem; margin:1rem 0 .4rem; }
p { margin:.4rem 0; }
.entete { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 1.2rem; background:var(--carte); border-bottom:1px solid var(--bord); position:sticky; top:0; z-index:5; flex-wrap:wrap; }
.marque { display:flex; align-items:center; gap:.6rem; }
.marque .logo { width:30px; height:30px; border-radius:8px; background:var(--accent2); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.marque small { color:var(--texte2); }
.onglets { display:flex; gap:.3rem; flex-wrap:wrap; }
.onglets button { border:1px solid var(--bord); background:var(--carte); padding:.45rem .9rem; border-radius:999px; cursor:pointer; font-size:.95rem; color:var(--texte); }
.onglets button.actif { background:var(--accent2); color:#fff; border-color:var(--accent2); }
.actions-entete { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.contenu { padding:1rem 1.2rem 3rem; max-width:1500px; margin:0 auto; }
.bandeau { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin:.4rem 0 1rem; color:var(--texte2); }
.bandeau .chiffre { background:var(--carte); border:1px solid var(--bord); border-radius:10px; padding:.45rem .8rem; box-shadow:var(--ombre); color:var(--texte); }
.bandeau .chiffre b { font-size:1.1rem; }
.filtres { display:flex; gap:.35rem; flex-wrap:wrap; margin:.4rem 0 .8rem; }
.filtres button { border:1px solid var(--bord); background:var(--carte); padding:.3rem .7rem; border-radius:999px; cursor:pointer; font-size:.85rem; color:var(--texte2); }
.filtres button.actif { border-color:var(--accent); color:var(--accent); background:#eef3ff; }
.alerte { background:#fff4e5; border:1px solid #f3d9b1; color:#7a4b00; padding:.6rem .9rem; border-radius:8px; margin:.5rem 0; }
.alerte.rouge { background:#fdecec; border-color:#f2c2c2; color:#7a1f1f; }
.alerte.info { background:#eef3ff; border-color:#c9d8fb; color:#1f3a7a; }
.carte { background:var(--carte); border:1px solid var(--bord); border-radius:12px; box-shadow:var(--ombre); padding:1rem; margin:.7rem 0; }
.tableau { overflow-x:auto; background:var(--carte); border:1px solid var(--bord); border-radius:12px; box-shadow:var(--ombre); }
table { border-collapse:collapse; width:100%; font-size:.92rem; }
th, td { text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--bord); vertical-align:top; white-space:nowrap; }
th { background:#f9fafc; color:var(--texte2); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.02em; position:sticky; top:0; }
tr.ligne { cursor:pointer; }
tr.ligne:hover { background:#f5f8ff; }
tr.ligne.sel { background:#eef3ff; }
td.col-nom { font-weight:600; }
td.col-prop { white-space:normal; min-width:360px; max-width:520px; color:var(--texte2); font-size:.85rem; }
.p { display:inline-block; width:14px; height:14px; border-radius:50%; vertical-align:middle; margin-right:.35rem; background:var(--gris); }
.p.vert { background:var(--vert); } .p.orange { background:var(--orange); } .p.rouge { background:var(--rouge); } .p.gris { background:var(--gris); } .p.info { background:var(--info); }
.p.mini { width:10px; height:10px; margin-right:.15rem; }
.etiq { display:inline-block; font-size:.75rem; padding:.1rem .45rem; border-radius:6px; background:#eef0f5; color:var(--texte2); margin-left:.3rem; }
.etiq.vert { background:#e6f5ec; color:#1f6b3d; } .etiq.orange { background:#fdf1e0; color:#8a4f00; } .etiq.rouge { background:#fdecec; color:#8a1f1f; } .etiq.info { background:#eef3ff; color:#1f3a7a; }
.vide { color:var(--texte2); font-style:italic; }
.bouton { border:1px solid var(--bord); background:var(--carte); padding:.45rem .85rem; border-radius:8px; cursor:pointer; font-size:.9rem; color:var(--texte); }
.bouton:hover { border-color:var(--accent); color:var(--accent); }
.bouton.principal { background:var(--accent); color:#fff; border-color:var(--accent); }
.bouton.principal:hover { background:#2350bd; color:#fff; }
.bouton.petit { padding:.25rem .6rem; font-size:.82rem; }
.bouton:disabled { opacity:.5; cursor:default; }
.barre { height:9px; background:#e9ecf3; border-radius:6px; overflow:hidden; min-width:80px; }
.barre > div { height:100%; background:var(--vert); }
.panneau { position:fixed; top:0; right:0; height:100vh; width:min(720px, 100vw); background:var(--carte); border-left:1px solid var(--bord); box-shadow:-4px 0 20px rgba(20,30,60,.12); overflow-y:auto; z-index:20; padding:1rem 1.2rem 3rem; transform:translateX(100%); transition:transform .18s ease; }
.panneau.ouvert { transform:none; }
.panneau .fermer { position:sticky; top:0; float:right; }
.panneau h2 { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.panneau h2 input, .panneau h2 select { font-size:1rem; font-weight:400; width:auto; }
.voile { position:fixed; inset:0; background:rgba(20,30,60,.25); z-index:15; display:none; }
.voile.ouvert { display:block; }
.grille { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:.5rem .9rem; }
.grille .cle { color:var(--texte2); font-size:.8rem; }
.grille .val { font-weight:500; }
.cause { border:1px solid var(--bord); border-left:4px solid var(--gris); border-radius:10px; padding:.8rem .9rem; margin:.6rem 0; }
.cause.rouge { border-left-color:var(--rouge); } .cause.orange { border-left-color:var(--orange); } .cause.info { border-left-color:var(--info); } .cause.vert { border-left-color:var(--vert); }
.cause.ferme { opacity:.65; }
.cause .titre { font-weight:600; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.cause .bloc { margin:.45rem 0; }
.cause .bloc b { color:var(--texte2); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.02em; display:block; margin-bottom:.15rem; }
textarea, input[type=text], input[type=password], select { width:100%; font:inherit; padding:.55rem .65rem; border:1px solid var(--bord); border-radius:8px; background:#fff; color:var(--texte); }
textarea { min-height:90px; resize:vertical; }
textarea.message { min-height:140px; background:#fbfbfd; }
.boutons { display:flex; gap:.4rem; flex-wrap:wrap; margin:.4rem 0; }
.registre { display:inline-flex; border:1px solid var(--bord); border-radius:8px; overflow:hidden; }
.registre button { border:0; background:var(--carte); padding:.25rem .6rem; cursor:pointer; font-size:.82rem; color:var(--texte2); }
.registre button.actif { background:var(--accent2); color:#fff; }
.liste-retours { list-style:none; padding:0; margin:.3rem 0; }
.liste-retours li { border-bottom:1px solid var(--bord); padding:.45rem 0; }
.liste-retours .quand { color:var(--texte2); font-size:.8rem; }
.liste-retours .traite { color:var(--vert); font-size:.8rem; }
.etape { display:flex; align-items:flex-start; gap:.6rem; padding:.45rem 0; border-bottom:1px solid var(--bord); }
.etape input { margin-top:.25rem; width:18px; height:18px; }
.etape .vu { color:var(--texte2); font-size:.8rem; }
.etape.auto label { color:var(--texte2); }
.pied { color:var(--texte2); font-size:.8rem; text-align:center; padding:1.5rem 1rem; }
.graph { width:100%; height:auto; display:block; }
.graph text { font-size:11px; fill:var(--texte2); }
.legende { display:flex; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:var(--texte2); margin:.3rem 0; }
.legende i { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:.3rem; vertical-align:middle; }
.deux { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width: 800px) { .deux { grid-template-columns:1fr; } .contenu { padding:.8rem .8rem 3rem; } .entete { padding:.6rem .8rem; } }
/* Connexion et Mon bord */
.centre { max-width:560px; margin:6vh auto; padding:0 1rem; }
.connexion .carte { padding:1.4rem; }
.mon-bord { max-width:720px; margin:0 auto; padding:1rem; }
.mon-bord .entete-bord { display:flex; align-items:center; gap:.8rem; margin:.5rem 0 1rem; }
.etat { display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; border-radius:10px; background:#f9fafc; border:1px solid var(--bord); }
.etat .p { width:18px; height:18px; }
.causes-usager { list-style:none; margin:.3rem 0 0; padding:0; font-size:.9rem; }
.causes-usager li { padding:.1rem 0; }
.etoiles { display:flex; gap:.3rem; }
.etoiles button { font-size:1.6rem; background:none; border:0; cursor:pointer; color:#cfd4df; padding:0 .1rem; }
.etoiles button.on { color:#f2b01e; }
.note10 { display:flex; gap:.25rem; flex-wrap:wrap; }
.note10 button { width:36px; height:32px; border:1px solid var(--bord); background:#fff; border-radius:6px; cursor:pointer; }
.note10 button.on { background:var(--accent2); color:#fff; border-color:var(--accent2); }
.ok { color:var(--vert); font-weight:600; }
.mb1 { margin-bottom:1rem; } .mt1 { margin-top:.8rem; } .m0 { margin:0; }
.erreur { color:var(--rouge); }