/* Espace Formation · style Learnbox (fond pastel, fenêtre blanche, cartes douces) */
:root{
  --ink:#1B1B1F; --ink2:#55555E; --mute:#8A8A94; --line:#EFEFF2; --soft:#F0F0F3;
  --win:#FBFBFC; --lav:#DEDBF8; --lav-ink:#4B3FC4; --sun:#FBEBC7; --sage:#E4EED7;
  --ok:#2F6B3A; --ok-bg:#E1F0DE; --warn:#A3570C; --warn-bg:#FBEBD8; --vio:#5B4DD6; --vio-bg:#ECEAFC;
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);font-size:15px;line-height:1.5;
  background:linear-gradient(120deg,#F7EFDF 0%,#EDE8F3 55%,#DCDDF7 100%);background-attachment:fixed;min-height:100vh}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--ink2)}
h1,h2,h3{margin:0;line-height:1.2}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid #8C7FF0;outline-offset:2px;border-radius:6px}

.bg{padding:28px;min-height:100vh}
.win{background:var(--win);border-radius:26px;display:flex;min-height:calc(100vh - 56px);overflow:hidden;max-width:1520px;margin:0 auto}

/* Menu */
.side{width:220px;flex-shrink:0;padding:28px 18px;display:flex;flex-direction:column;gap:26px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16.5px;padding:0 6px}
.menu{display:flex;flex-direction:column;gap:4px}
.menu a,.linkbtn{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;color:var(--mute);font-weight:500;font-size:14px;min-height:42px}
.menu a:hover,.linkbtn:hover{color:var(--ink);background:var(--soft)}
.menu a.on{background:var(--soft);color:var(--ink);font-weight:700}
.menu-t{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding:6px 10px 2px}
.menu.bottom{margin-top:auto}
.menu form{margin:0}
.linkbtn{width:100%;border:0;background:none;cursor:pointer;text-align:left}

/* Colonne centrale et colonne de droite */
.main{flex:1;min-width:0;padding:28px 30px 40px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:26px}
.aside{width:310px;flex-shrink:0;padding:28px 24px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.top h1{font-size:24px;font-weight:800}
.sub{margin:4px 0 0;color:var(--mute);font-size:14px}
.avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;color:var(--ink)}
.flash{background:var(--ok-bg);color:var(--ok);border-radius:12px;padding:12px 16px;font-weight:600;font-size:14px}
.flash.err{background:#FBE3E3;color:#9B2C2C}
h2{font-size:15px;font-weight:700}
.sec{display:flex;flex-direction:column;gap:14px}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sec-h a{font-size:13px;font-weight:700;color:var(--vio)}
.muted{color:var(--mute)}
.small{font-size:13px}

/* Vue d'ensemble */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);padding-bottom:18px;gap:12px}
.stat{display:flex;flex-direction:column;gap:6px;color:var(--ink2)}
.stat b{font-size:26px;font-weight:800;color:var(--ink);line-height:1.1}
.stat span{font-size:12px;color:var(--mute)}

/* Cartes de semaine */
.weeks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wk{border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px;min-height:158px;color:var(--ink)}
a.wk:hover{color:var(--ink);transform:translateY(-1px)}
.wk-ic{width:32px;height:32px;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center}
.wk-t{font-weight:800;font-size:16px}
.wk-s{font-size:12px;color:var(--ink2)}
.wk-f{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:700}
.wk.locked{opacity:.92}
.bar{height:6px;border-radius:6px;background:rgba(255,255,255,.7);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);border-radius:6px}
.faces{display:flex}
.faces span{width:24px;height:24px;border-radius:50%;border:2px solid #fff;margin-left:-8px;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center}
.faces span:first-child{margin-left:0}

/* Listes */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid #F1F1F4}
.row:last-child{border-bottom:0}
.row-b{flex:1;min-width:0}
.row-t{font-size:14px;font-weight:700}
.row-s{font-size:12px;color:var(--mute)}
.thumb{width:62px;height:40px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.pill{font-size:12px;font-weight:700;border-radius:8px;padding:5px 10px;white-space:nowrap}
.pill.vio{color:var(--vio);background:var(--vio-bg)}
.pill.ok{color:var(--ok);background:var(--ok-bg)}
.pill.warn{color:var(--warn);background:var(--warn-bg)}
.pill.grey{color:var(--ink2);background:var(--soft)}

/* Planning */
.cal{display:flex;flex-direction:column;gap:10px}
.cal-h{font-size:13px;font-weight:700}
.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;text-align:center;font-size:11.5px}
.cal-g span{padding:4px 0;border-radius:6px}
.cal-g .dow{color:var(--mute)}
.cal-g .today{background:var(--ink);color:#fff;font-weight:700}
.cal-g .mk-live{background:var(--lav);font-weight:700}
.cal-g .mk-rdv{background:var(--sun);font-weight:700}
.evs{display:flex;flex-direction:column;gap:10px}
.ev{display:flex;gap:10px}
.ev-d{width:46px;flex-shrink:0;font-size:11px;color:var(--mute);padding-top:10px}
.ev-b{flex:1;border-radius:12px;padding:10px 12px}
.ev-b.live{background:var(--lav)}
.ev-b.rdv{background:var(--sun)}
.ev-t{font-size:13px;font-weight:700}
.ev-s{font-size:11.5px;color:var(--ink2)}
.card-g{background:var(--soft);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:10px}
.card-g .t{font-size:14px;font-weight:800}
.card-g p{margin:0;font-size:12.5px;color:var(--ink2)}

/* Boutons et formulaires */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;border:0;border-radius:10px;padding:0 16px;min-height:42px;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.btn:hover{color:#fff;background:#33333A}
.btn.ghost{background:var(--soft);color:var(--ink)}
.btn.ghost:hover{background:#E6E6EB;color:var(--ink)}
.btn.sm{min-height:34px;padding:0 12px;font-size:12.5px}
.btn.danger{background:#FBE3E3;color:#9B2C2C}
.btn[disabled]{opacity:.5;cursor:default}
.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12.5px;font-weight:700;color:var(--ink2)}
.input,select.input,textarea.input{width:100%;min-height:44px;border:1px solid #DCDCE3;border-radius:10px;background:#fff;padding:10px 12px;font-size:14px}
textarea.input{min-height:90px;resize:vertical}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.hint{font-size:12px;color:var(--mute);margin:0}

/* Lecteur */
.player{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#111}
.player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .none{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ccc;font-size:14px;padding:20px;text-align:center}
.lesson{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.lesson-list{display:flex;flex-direction:column;gap:6px}
.lesson-list a{display:flex;gap:10px;align-items:center;padding:10px;border-radius:10px;font-size:13.5px}
.lesson-list a.on{background:var(--lav);font-weight:700}
.lesson-list a:hover{background:var(--soft)}
.lesson-list .dot{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--soft);color:var(--ink2)}
.lesson-list .dot.ok{background:var(--ok-bg);color:var(--ok)}
.desc{font-size:14.5px;color:var(--ink2);white-space:pre-line;margin:0}
.crumb{font-size:12.5px;color:var(--mute)}
.crumb a{color:var(--mute)}

/* Chat */
.chat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);height:calc(100vh - 230px);min-height:420px}
.chat-list{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.msg{display:flex;gap:10px;max-width:640px}
.msg .avatar{width:32px;height:32px;font-size:11px}
.msg-n{font-size:12px;font-weight:700}
.msg-n time{font-weight:500;color:var(--mute);margin-left:6px}
.msg-b{font-size:14px;background:var(--soft);border-radius:4px 14px 14px 14px;padding:9px 13px;margin-top:3px;white-space:pre-wrap;word-wrap:break-word}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg.me .msg-b{background:var(--lav);border-radius:14px 4px 14px 14px}
.msg.me .msg-n{text-align:right}
.msg-del{border:0;background:none;color:var(--mute);font-size:11px;margin-left:8px;cursor:pointer;padding:0;opacity:0;transition:opacity .2s}
.msg:hover .msg-del,.msg-del:focus{opacity:1}
@media (hover:none){.msg-del{opacity:1}}
.chat-form{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line)}
.chat-form textarea{flex:1;min-height:44px;max-height:140px;resize:none}
.empty{color:var(--mute);font-size:14px;text-align:center;margin:auto 0}

/* Tables d'administration */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 10px;border-bottom:1px solid #F4F4F6;vertical-align:top}
.tbl-wrap{overflow-x:auto}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline form{margin:0}
details.box summary{cursor:pointer;font-weight:700}
.copy{display:flex;gap:8px}
.copy input{flex:1}

/* Connexion */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-card{background:var(--win);border-radius:26px;padding:40px;width:100%;max-width:420px;display:flex;flex-direction:column;gap:22px}
.auth-card h1{font-size:24px;font-weight:800}
.auth-foot{font-size:13px;color:var(--mute);text-align:center;border-top:1px solid var(--line);padding-top:18px}
.auth-foot a{color:var(--vio);font-weight:700}

/* Téléphone et tablette */
@media (max-width:1180px){
  .win{flex-wrap:wrap}
  .main{flex:1 1 0}
  .aside{width:100%;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .aside h2{grid-column:1/-1}
}
@media (max-width:860px){
  .bg{padding:0}
  .win{border-radius:0;flex-direction:column;min-height:100vh}
  .side{width:100%;padding:12px 14px;flex-direction:row;align-items:center;gap:10px;position:sticky;top:0;z-index:5;background:var(--win);border-bottom:1px solid var(--line);overflow-x:auto}
  .brand span{display:none}
  .menu{flex-direction:row;gap:2px}
  .menu a span,.linkbtn span,.menu-t{display:none}
  .menu a,.linkbtn{padding:10px;min-width:44px;justify-content:center}
  .menu.bottom{margin-top:0;margin-left:auto}
  .main{border-left:0;padding:20px 16px 32px}
  .weeks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lesson{grid-template-columns:1fr}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chat{height:calc(100vh - 190px)}
  .aside{grid-template-columns:1fr;padding:20px 16px 32px}
}
@media (max-width:480px){
  .weeks .wk{min-height:140px;padding:14px}
  .grid2,.grid3{grid-template-columns:1fr}
  .top h1{font-size:21px}
  .auth-card{padding:28px 22px}
}