/* MIEUX APPRENDRE — pages de connexion dédiées (body.lp) et tableaux de bord (body.sp) */
body.lp{min-height:100vh;margin:0;display:grid;grid-template-columns:minmax(320px,44%) 1fr;font-family:var(--font);background:var(--bg)}
.lp-hero{background-position:center 35%;position:relative;color:#fff;padding:40px 44px;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;
 background:linear-gradient(180deg,rgba(10,31,68,.88),rgba(18,48,99,.55) 55%,rgba(10,31,68,.85)),var(--bg-img) center/cover}
.lp-hero img.lg{width:130px;height:130px;object-fit:contain;border-radius:14px;background:#fff}
.lp-hero h1{color:#fff;margin:14px 0 6px;font-size:clamp(2.2rem,4.2vw,3.4rem);line-height:1.02;font-weight:900;letter-spacing:.5px}
.lp-hero h1 span{color:var(--gold2)}
.lp-hero p{color:#fff;margin:0;font-size:1.15rem}
.lp-hero hr{width:80px;height:3px;border:0;background:var(--gold2);margin:14px 0 0}
.lp-bar{display:flex;border-radius:16px;background:rgba(10,31,68,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2);padding:14px 6px}
.lp-bar div{flex:1;text-align:center;font-size:.78rem;font-weight:700;padding:0 8px;border-left:1px solid rgba(255,255,255,.2)}
.lp-bar div:first-child{border:0}.lp-bar i{display:block;color:var(--gold2);font-size:1.4rem;margin-bottom:6px}
.lp-main{display:flex;align-items:center;justify-content:center;padding:28px;background:linear-gradient(135deg,#e8efff,#f6f8fc)}
.lp-card{width:min(560px,100%);background:#fff;border-radius:24px;padding:34px 38px;box-shadow:var(--shadow)}
.lp-card .top{text-align:center}.lp-card .top img{width:84px;height:84px;object-fit:contain}
.lp-card h2{margin:6px 0 4px;color:var(--navy);font-size:1.85rem;font-weight:900}
.lp-card .top p{margin:0 0 16px;color:var(--muted)}
.lp-card .fld{display:block;margin-bottom:12px}.lp-card .fld>span:first-child{display:block;font-weight:800;color:var(--navy);margin-bottom:6px}
.lp-card .fld-in{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:0 14px;background:#fff}
.lp-card .fld-in i{color:var(--muted)}.lp-card .fld-in input{flex:1;border:0;outline:0;padding:14px 0;font:inherit;background:none;min-width:0}
.lp-card .fld-in:focus-within{border-color:var(--navy3);box-shadow:0 0 0 3px rgba(27,63,125,.15)}
.lp-card .eye{border:0;background:none;cursor:pointer;color:var(--muted)}
.lp-card .btn-block{width:100%;padding:14px;border-radius:12px;font-size:1.05rem;margin-top:4px}
.lp-card .links{text-align:center;font-size:.9rem;margin:14px 0}.lp-card .links a{color:var(--navy);font-weight:600}
.lp-card h3{text-align:center;color:var(--navy);margin:16px 0 12px;border-top:1px solid var(--line);padding-top:16px;font-size:1.1rem}
.lp-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:10px}
.lp-grid div{border:1px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;font-size:.72rem;color:var(--muted);background:var(--t,#f4f8ff)}
.lp-grid i{display:block;font-size:1.5rem;margin-bottom:6px;color:var(--c,var(--navy3))}.lp-grid b{display:block;color:var(--navy);font-size:.82rem;margin-bottom:2px}
.lp-info{display:flex;gap:10px;align-items:flex-start;margin-top:16px;background:#eef4ff;border-radius:12px;padding:12px 14px;font-size:.82rem;color:var(--navy2)}
.lp-info i{color:var(--navy3);margin-top:2px}
@media(max-width:900px){body.lp{grid-template-columns:1fr}.lp-hero{min-height:0;padding:24px;gap:18px}.lp-hero img.lg{width:90px;height:90px}.lp-card{padding:24px 18px}.lp-grid{--cols:2!important}}

/* ---- Tableaux de bord ---- */
body.sp{background:#f4f7fc}
.sp .sidebar{width:244px;padding:16px 12px;background:linear-gradient(180deg,#0b2a5e,#08204b 60%,#0a2a5c)}
.sp .sbrand{border:0;padding:0 6px 16px}.sp .sbrand img{width:56px;height:56px}
.sp .sbrand b{font-size:1.15rem;line-height:1.05;font-weight:900;display:block}.sp .sbrand b em{color:var(--gold2);font-style:normal}
.sp .sbrand small{letter-spacing:0;font-weight:500;color:#dbe6fb;font-size:.68rem}
.sp .sidebar>a{padding:12px 14px;font-weight:600;font-size:.93rem;color:#e6eefc}
.sp .sidebar>a.active{background:linear-gradient(90deg,#f6c850,#f0b93a);color:var(--navy)}
.sp .sidebar .help{margin-top:auto;display:flex;gap:10px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.2);border-radius:12px;color:#fff;font-size:.8rem;text-decoration:none}
.sp .sidebar .help i{font-size:1.4rem}.sp .sidebar .help small{display:block;color:#b9c8e6}
.sp .sidebar .out{margin-top:10px}
.sp .main{margin-left:244px;padding:0 0 40px}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:12px 24px;background:#fff;border-bottom:1px solid var(--line)}
.topbar .burger{display:none;border:0;background:none;font-size:1.3rem;color:var(--navy);cursor:pointer}
.tb-title{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.tb-title>i{font-size:1.9rem;color:var(--gold)}
.tb-title b{display:block;color:var(--navy);font-size:1.2rem;font-weight:900}.tb-title small{color:var(--muted)}
.bell{position:relative;color:var(--navy);font-size:1.2rem}.bell em{position:absolute;top:-8px;right:-9px;background:#e5484d;color:#fff;border-radius:99px;font:700 .65rem var(--font);padding:2px 5px}
.tb-user{display:flex;align-items:center;gap:10px;padding-left:16px;border-left:1px solid var(--line)}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--navy3),var(--navy));color:#fff;display:grid;place-items:center;font-weight:800}
.tb-user b{display:block;color:var(--navy);font-size:.92rem}.tb-user small{color:var(--muted);font-size:.78rem}
.sp .pane{padding:20px 24px}
.sp .pane>.card,.sp .pane>.welcome{margin-bottom:16px}
.ban{position:relative;border-radius:18px;overflow:hidden;color:#fff;padding:34px 36px;min-height:150px;display:flex;justify-content:space-between;align-items:center;gap:16px;
 background:linear-gradient(90deg,rgba(10,31,68,.95) 30%,rgba(10,31,68,.35)),var(--ban) right center/cover}
.ban h2{color:#fff;margin:0;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900;line-height:1.15}.ban h2 em{color:var(--gold2);font-style:normal;display:block}
.ban p{margin:8px 0 0;max-width:430px;opacity:.95}
.ban-info{background:#fff;color:var(--navy);border-radius:14px;padding:12px 16px;min-width:210px;font-size:.82rem}
.ban-info div+div{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}.ban-info small{color:var(--muted);display:block}.ban-info b{display:block}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
.kpi{display:flex;align-items:center;gap:14px;border-radius:16px;padding:16px;background:var(--k)}
.kpi>i{width:50px;height:50px;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:1.4rem;color:var(--kc)}
.kpi b{font-size:1.7rem;color:var(--navy);display:block;line-height:1}.kpi span{font-size:.82rem;color:var(--ink)}
.sec-t{margin:18px 0 10px;font-size:1.1rem;font-weight:900;color:var(--navy)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.quick a{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--navy);text-decoration:none;font-weight:800;font-size:.9rem}
.quick a small{display:block;font-weight:500;color:var(--muted);font-size:.76rem}.quick a>i:first-child{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--gold-soft);color:var(--gold);flex:none}
.quick a>i:last-child{margin-left:auto;color:var(--muted)}
.pnls{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}.pnls.two{grid-template-columns:1fr 1fr}
.pnl{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;min-width:0}
.pnl h3{margin:0 0 12px;font-size:1rem;font-weight:900;color:var(--navy);display:flex;justify-content:space-between;align-items:center}
.pnl h3 a{font-size:.74rem;font-weight:700;background:#eef4ff;color:var(--navy3);padding:5px 10px;border-radius:8px;text-decoration:none}
.pnl .none{color:var(--muted);font-size:.86rem;padding:14px;text-align:center;background:#f7f9fd;border-radius:10px}
.bars{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:10px}.bars div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;font-size:.72rem;color:var(--muted);text-align:center}
.bars i{display:block;width:100%;border-radius:6px 6px 0 0;background:#2f7de1;margin:3px 0}.bars div:nth-child(even) i{background:#e8b436}.bars b{color:var(--navy)}
.lst{list-style:none;margin:0;padding:0}.lst li{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #eef2f8;font-size:.86rem}.lst li:last-child{border:0}
.lst .ic{width:34px;height:34px;border-radius:50%;background:#e6f7ee;color:#1a8f55;display:grid;place-items:center;flex:none}.lst small{display:block;color:var(--muted)}.lst time{margin-left:auto;color:var(--muted);font-size:.72rem;white-space:nowrap}
.kids{display:flex;gap:12px;flex-wrap:wrap}.kid{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:14px;min-width:210px}.kid.on{border-color:var(--gold);background:#fff9e8}
.kid .avatar{width:46px;height:46px}.kid b{display:block;color:var(--navy)}.kid small{color:var(--muted)}
.gt{width:100%;border-collapse:collapse;font-size:.84rem}.gt th{background:#eef4ff;color:var(--navy);text-align:left;padding:8px;font-size:.76rem}.gt td{padding:9px 8px;border-bottom:1px solid #eef2f8}
.tag{font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:8px;background:#e6f7ee;color:#1a8f55;white-space:nowrap}.tag.b{background:#e8efff;color:#2563c9}.tag.o{background:#fff1d6;color:#b7791f}.tag.r{background:#fdeaea;color:#c53030}
@media(max-width:1100px){.kpis,.quick{grid-template-columns:repeat(2,1fr)}.pnls{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
 .sp .sidebar{position:fixed;inset:0 auto 0 0;width:260px;flex-direction:column;transform:translateX(-100%);transition:transform .25s;height:100vh}
 .sp.nav-open .sidebar{transform:none}.sp .sidebar>a{white-space:normal}
 .sp .main{margin-left:0}.topbar{padding:10px 14px}.topbar .burger{display:block}.tb-user>div{display:none}.tb-user{padding-left:10px}
 .sp .pane{padding:14px}.ban{flex-direction:column;align-items:flex-start;padding:24px 20px}.ban-info{width:100%}
 .kpis,.quick,.pnls,.pnls.two{grid-template-columns:1fr}.tb-title small{display:none}}
.pnl{overflow-x:auto}.gt th,.gt td{padding:8px 6px}