:root{
  --nuit:#0f2742;--bleu:#1d4e89;--bleu2:#2f6db0;--or:#c79a3b;
  --vert:#1f7a4d;--vbg:#e9f5ee;--rouge:#b23b3b;--rbg:#fbecec;
  --ambre:#a9701e;--abg:#fdf3e3;--gris:#5a6472;--line:#e3e7ec;
  --bg:#eef1f5;--card:#fff;--ink:#16202e;--wa:#25D366;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;}
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);box-shadow:0 0 40px rgba(15,39,66,.12);position:relative;padding-bottom:80px;}
/* topbar */
.top{background:var(--nuit);color:#fff;padding:16px 18px 14px;position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:9px;}
.logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--or),#e6c168);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--nuit);font-size:17px;}
.brand h1{font-size:19px;font-weight:700;letter-spacing:.3px;}
.brand .slo{font-size:11px;color:#9fb6d4;margin-top:1px;}
.logout{background:rgba(255,255,255,.1);border:0;color:#cdd9e8;font-size:12px;font-weight:600;padding:7px 11px;border-radius:8px;cursor:pointer;}
/* views */
.view{display:none;padding:16px 16px 0;}
.view.on{display:block;animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.hello{font-size:13px;color:var(--gris);margin-bottom:3px;}
.hello b{color:var(--ink);}
h2.sec{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--gris);margin:20px 2px 10px;font-weight:700;}
/* kpi */
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px 14px;}
.kpi .l{font-size:11.5px;color:var(--gris);font-weight:600;}
.kpi .v{font-size:21px;font-weight:800;margin-top:3px;letter-spacing:-.3px;}
.kpi .e{font-size:11px;color:var(--gris);margin-top:1px;}
.kpi.k-or .v{color:var(--or);}.kpi.k-vert .v{color:var(--vert);}.kpi.k-rouge .v{color:var(--rouge);}
/* property card */
.pcard{background:var(--card);border:1px solid var(--line);border-radius:13px;margin-bottom:11px;overflow:hidden;cursor:pointer;transition:.15s;}
.pcard:active{transform:scale(.99);}
.pcard .row{display:flex;align-items:center;gap:12px;padding:12px 14px;}
.thumb{width:52px;height:52px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;}
.thumb svg{width:30px;height:30px;}
.pinfo{flex:1;min-width:0;}
.pinfo .t{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pinfo .s{font-size:12.5px;color:var(--gris);margin-top:1px;}
.pinfo .o{font-size:11.5px;color:var(--bleu2);margin-top:2px;font-weight:600;}
.pright{text-align:right;flex-shrink:0;}
.pright .amt{font-weight:800;font-size:14.5px;}
.badge{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;margin-top:4px;}
.b-ok{background:var(--vbg);color:var(--vert);}.b-late{background:var(--rbg);color:var(--rouge);}
.b-vac{background:#eef1f5;color:var(--gris);}.b-build{background:var(--abg);color:var(--ambre);}
/* detail */
.back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--bleu2);font-size:14px;font-weight:600;cursor:pointer;margin-bottom:8px;padding:4px 0;}
.hero{border-radius:15px;height:140px;display:flex;align-items:flex-end;padding:14px;color:#fff;position:relative;overflow:hidden;}
.hero .ht{position:relative;z-index:2;}
.hero .ht .t{font-size:19px;font-weight:800;}
.hero .ht .s{font-size:13px;opacity:.92;}
.hero svg.bg{position:absolute;right:-10px;bottom:-10px;width:130px;height:130px;opacity:.18;z-index:1;}
.drow{display:flex;justify-content:space-between;padding:12px 2px;border-bottom:1px solid var(--line);font-size:14px;}
.drow .k{color:var(--gris);}.drow .v{font-weight:700;}
.timeline{margin-top:6px;}
.tl{display:flex;gap:11px;padding:9px 0;}
.tl .dot{width:11px;height:11px;border-radius:50%;background:var(--vert);margin-top:5px;flex-shrink:0;}
.tl .dot.miss{background:var(--line);}
.tl .tt{font-size:13.5px;font-weight:600;}.tl .td{font-size:12px;color:var(--gris);}
/* buttons */
.btn{display:block;width:100%;border:0;border-radius:11px;padding:13px;font-size:14.5px;font-weight:700;cursor:pointer;margin-top:12px;}
.btn-pri{background:var(--bleu);color:#fff;}
.btn-gho{background:#fff;border:1px solid var(--line);color:var(--bleu);}
.btn.wa-btn{background:var(--wa);color:#fff;}
.note{font-size:11.5px;color:var(--gris);text-align:center;margin-top:10px;}
/* galerie photos chantier */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0;}
.ph{position:relative;border-radius:11px;overflow:hidden;height:120px;background:#dfe4ea;}
.ph img{width:100%;height:100%;object-fit:cover;display:block;}
.ph span{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:11px;font-weight:600;padding:16px 8px 6px;}
.ph-del{position:absolute;top:5px;right:5px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:16px;line-height:22px;cursor:pointer;padding:0;}
/* forms */
.fld{margin-bottom:13px;}
.fld label{font-size:12.5px;color:var(--gris);font-weight:600;display:block;margin-bottom:6px;}
.fld input,.fld select{width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 13px;font-size:15px;outline:none;color:var(--ink);background:#fff;}
.fld input:focus,.fld select:focus{border-color:var(--bleu2);}
/* loyers rows */
.lr{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:9px;}
.lr .ic{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.lr .li{flex:1;min-width:0;}
.lr .li .t{font-weight:700;font-size:14px;}.lr .li .s{font-size:12px;color:var(--gris);}
.lr .amt{font-weight:800;font-size:14px;}
.sumbar{display:flex;gap:10px;margin:4px 0 14px;}
.sumbar .s{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px;text-align:center;}
.sumbar .s .v{font-size:18px;font-weight:800;}.sumbar .s .l{font-size:11px;color:var(--gris);margin-top:2px;}
/* login */
.login{min-height:100vh;background:linear-gradient(160deg,var(--nuit),#16365c);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:0 30px;max-width:480px;margin:0 auto;}
.login .lg{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--or),#e6c168);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--nuit);font-size:34px;margin-bottom:20px;}
.login h2{font-size:30px;font-weight:800;}
.login p{color:#9fb6d4;font-size:14.5px;margin:6px 0 28px;}
.login label{font-size:12px;color:#9fb6d4;font-weight:600;display:block;margin-bottom:6px;}
.login input{width:100%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;border-radius:11px;padding:13px 14px;font-size:15px;outline:none;margin-bottom:14px;}
.login input::placeholder{color:#6f88a8;}
.login .go{width:100%;border:0;border-radius:12px;padding:15px;font-size:15.5px;font-weight:700;background:var(--or);color:var(--nuit);cursor:pointer;margin-top:6px;}
.login .hint{text-align:center;color:#7f97b8;font-size:12px;margin-top:16px;}
.login .err{color:#ffb4b4;font-size:13px;margin-bottom:10px;min-height:16px;}
/* bottom nav */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:#fff;border-top:1px solid var(--line);display:flex;padding:8px 0 12px;z-index:25;}
.nav a{flex:1;text-align:center;font-size:10.5px;color:var(--gris);text-decoration:none;font-weight:600;cursor:pointer;}
.nav a svg{display:block;margin:0 auto 3px;width:21px;height:21px;}
.nav a.act{color:var(--bleu);}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--nuit);color:#fff;padding:11px 18px;border-radius:30px;font-size:13px;font-weight:600;opacity:0;transition:.3s;z-index:50;pointer-events:none;white-space:nowrap;max-width:90%;}
.toast.show{opacity:1;}

/* ============ VERSION ORDINATEUR — console gérant ============ */
@media (min-width:900px){
  body{background:radial-gradient(120% 120% at 50% 0%,#1b3d63 0%,#0d2138 60%,#0a1a2c 100%);}
  /* l'espace gérant devient une console : en-tête + barre latérale + grande zone de contenu */
  .app.gerant{
    max-width:1160px;margin:24px auto;min-height:calc(100vh - 48px);
    border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.42);padding-bottom:0;
    display:grid;grid-template-columns:232px 1fr;grid-template-rows:auto 1fr;
    grid-template-areas:"head head" "side main";
  }
  .app.gerant .top{grid-area:head;position:static;padding:18px 26px;}
  .app.gerant > .view{grid-area:main;padding:26px 32px 44px;overflow:auto;}
  .app.gerant .nav{
    grid-area:side;position:static;transform:none;width:auto;max-width:none;
    flex-direction:column;align-items:stretch;gap:4px;border-top:0;border-right:1px solid var(--line);
    padding:18px 12px;background:#fbfcfd;
  }
  .app.gerant .nav a{flex:none;text-align:left;display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:9px;font-size:14px;}
  .app.gerant .nav a svg{display:inline-block;margin:0;width:19px;height:19px;}
  .app.gerant .nav a.act{background:#eaf0f8;color:var(--bleu);}
  .app.gerant .hello{font-size:15px;}
  .app.gerant .kpis{grid-template-columns:repeat(4,1fr);}
  .app.gerant .kpi .v{font-size:23px;}
  .app.gerant .liste-biens{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
  .app.gerant .liste-biens .pcard{margin-bottom:0;}
  /* formulaires et fiches : largeur de lecture confortable, pas étirée */
  .app.gerant .fld input,.app.gerant .fld select,.app.gerant .btn{max-width:540px;}
  .app.gerant .hero,.app.gerant .drow,.app.gerant .timeline,.app.gerant .note,.app.gerant .sumbar,.app.gerant .lr{max-width:720px;}
}