/* =============================================================================
   Portail Saraïlis — styles
   Reprend l'identité du login Académie : fond dégradé sombre, carte papier,
   logo foncé, séparateur vertical, titre sérif corail, bouton bordeaux.
   Polices du cabinet : Lora (sérif) + Poppins (sans).
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;1,500&family=Poppins:wght@300;400;500;600&display=swap');

:root{
  --bg-1:#1d2026;
  --bg-2:#16181d;
  --paper:#f6f2ea;
  --paper-line:#e6ddcd;
  --ink:#1d2630;
  --ink-soft:#5b6571;
  --corail:#b8553f;        /* titre sérif */
  --bordeaux:#7a1e30;      /* bouton */
  --bordeaux-h:#8c2538;
  --or:#b98e3c;
  --err:#b3261e;
  --ok:#2e7d52;
  --radius:14px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:radial-gradient(circle at 50% 0%, var(--bg-1), var(--bg-2) 70%);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:28px 18px;
}
.hidden{display:none !important}

/* ---------- Carte (login) --------------------------------------------------*/
.card{
  width:100%;max-width:392px;
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:34px 32px 30px;
}
.brand{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.brand-logo{height:34px;width:auto;display:block}
.brand-sep{width:1px;height:40px;background:var(--paper-line)}
.brand-titles{display:flex;flex-direction:column;line-height:1.05}
.brand-titles h1{
  margin:0;font-family:'Lora',Georgia,serif;font-weight:600;
  font-size:25px;color:var(--corail);letter-spacing:.2px;
}
.brand-titles small{
  margin-top:3px;font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);
}

label{display:block;font-size:12.5px;font-weight:500;color:var(--ink-soft);margin:14px 0 6px}
input[type=email],input[type=password]{
  width:100%;padding:12px 13px;font-size:14.5px;font-family:inherit;
  color:var(--ink);background:#fff;border:1px solid var(--paper-line);
  border-radius:9px;outline:none;transition:border-color .15s,box-shadow .15s;
}
input:focus{border-color:var(--bordeaux);box-shadow:0 0 0 3px rgba(122,30,48,.12)}

.btn{
  width:100%;margin-top:22px;padding:12.5px 14px;
  font-family:inherit;font-size:14.5px;font-weight:600;letter-spacing:.02em;
  color:#fdf6f0;background:var(--bordeaux);border:0;border-radius:10px;cursor:pointer;
  transition:background .15s,transform .05s;
}
.btn:hover{background:var(--bordeaux-h)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:default}

.msg{margin-top:16px;font-size:13px;border-radius:9px;padding:10px 12px;display:none}
.msg.err{display:block;color:var(--err);background:rgba(179,38,30,.08)}
.msg.ok{display:block;color:var(--ok);background:rgba(46,125,82,.10)}
.foot{margin-top:18px;font-size:11.5px;color:var(--ink-soft);text-align:center}

/* ---------- Hub ------------------------------------------------------------*/
.hub{
  width:100%;max-width:680px;background:var(--paper);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:30px 30px 26px;
}
.hub-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.hub-brand{display:flex;align-items:center;gap:14px}
.hub-brand img{height:30px}
.hub-brand .sep{width:1px;height:34px;background:var(--paper-line)}
.hub-brand h1{margin:0;font-family:'Lora',serif;font-weight:600;font-size:21px;color:var(--corail)}
.hub-who{font-size:12.5px;color:var(--ink-soft);text-align:right;line-height:1.4}
.hub-who b{color:var(--ink);font-weight:600}
.hub-who a{color:var(--bordeaux);text-decoration:none;cursor:pointer}
.hub-who a:hover{text-decoration:underline}

.hub-sub{font-size:12.5px;color:var(--ink-soft);margin:2px 0 22px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.tile{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--paper-line);border-radius:12px;padding:18px 18px 16px;
  background:#fff;transition:transform .08s,box-shadow .15s,border-color .15s;
  border-left:4px solid var(--accent,#999);
}
.tile:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.10);border-color:var(--accent,#999)}
.tile h3{margin:0 0 4px;font-family:'Lora',serif;font-weight:600;font-size:17px;color:var(--ink)}
.tile .role{
  display:inline-block;margin-bottom:8px;font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent,#777);
}
.tile p{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.45}

/* Accents par app */
.tile.app-dashboard{--accent:var(--or)}
.tile.app-academie{--accent:var(--bordeaux)}
.tile.app-rh{--accent:#2f6f7a}

/* ---------- Panneau direction (sessions actives) --------------------------*/
.admin{margin-top:26px;border-top:1px solid var(--paper-line);padding-top:18px}
.admin h2{margin:0 0 10px;font-family:'Lora',serif;font-size:15px;color:var(--ink)}
.sess{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:13px;padding:9px 12px;border:1px solid var(--paper-line);border-radius:9px;background:#fff;margin-bottom:8px}
.sess .meta{color:var(--ink-soft);font-size:11.5px}
.sess .meta b{color:var(--ink)}
.sess button{
  font-family:inherit;font-size:12px;font-weight:600;color:var(--bordeaux);
  background:transparent;border:1px solid var(--bordeaux);border-radius:7px;padding:6px 11px;cursor:pointer;
}
.sess button:hover{background:var(--bordeaux);color:#fff}
.admin .empty{font-size:12.5px;color:var(--ink-soft)}

@media(max-width:520px){
  .hub-top{flex-direction:column;align-items:flex-start}
  .hub-who{text-align:left}
}