:root{
  --bleu:#12358f; --bleu-2:#1f5fd6; --bleu-clair:#e8f0fe;
  --cyan:#12a5c9; --ink:#16213a; --muted:#667089;
  --bg:#f4f6fb; --card:#fff; --line:#e5e9f2;
  --ok:#128a4e; --ok-bg:#e5f6ec; --wait:#b7791f; --wait-bg:#fdf3e0;
  --no:#c8322b; --no-bg:#fdeceb;
  --shadow:0 10px 30px -12px rgba(18,53,143,.25);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--bleu-2); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2}

/* ---------- Topbar ---------- */
.topbar{
  background:var(--card); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1.5rem; position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:.75rem; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-logo{height:42px; width:auto}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-text strong{font-size:1.02rem}
.brand-text small{color:var(--muted); font-size:.75rem; font-weight:600; letter-spacing:.02em}
.topnav{display:flex; align-items:center; gap:1rem}
.topnav a{font-weight:600; color:var(--ink)}

/* ---------- Layout ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:2rem 1.5rem 3rem}
.foot{
  max-width:1080px; margin:0 auto; padding:1.5rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  color:var(--muted); font-size:.8rem; border-top:1px solid var(--line);
}
.center-body{min-height:100vh; display:grid; place-items:center; padding:1.5rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.7rem 1.2rem; border-radius:11px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; transition:.15s; font-family:inherit;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--bleu-2),var(--bleu)); color:#fff; box-shadow:var(--shadow)}
.btn-danger{background:#fff; color:var(--no); border-color:#f3c6c3}
.btn-danger:hover{background:var(--no-bg)}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{background:#eef1f7}
.btn-out{background:#fff; border-color:var(--bleu-2); color:var(--bleu-2)}
.btn-block{width:100%}
.btn-sm{padding:.4rem .7rem; font-size:.82rem; border-radius:8px}
.btn-out.btn-sm{border-color:var(--bleu-2)}

/* ---------- Alerts ---------- */
.alert{padding:.85rem 1.1rem; border-radius:11px; font-weight:500; margin-bottom:1rem; font-size:.92rem}
.alert-success{background:var(--ok-bg); color:var(--ok); border:1px solid #b9e4c9}
.alert-error{background:var(--no-bg); color:var(--no); border:1px solid #f3c6c3}
.alert-wide{margin-bottom:1.5rem}

/* ---------- Hero (accueil) ---------- */
.hero-card{
  background:var(--card); border-radius:24px; box-shadow:var(--shadow);
  display:grid; grid-template-columns:1.15fr .85fr; overflow:hidden; border:1px solid var(--line);
}
.hero-left{padding:2.6rem 2.4rem}
.pill{display:inline-block; background:var(--bleu-clair); color:var(--bleu);
  font-weight:700; font-size:.72rem; letter-spacing:.03em; padding:.35rem .8rem; border-radius:999px; text-transform:uppercase}
.hero-left h1{font-size:2.15rem; margin:1rem 0 .6rem; letter-spacing:-.02em}
.lead{color:var(--muted); font-size:1.02rem; max-width:46ch}
.hero-steps{list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:.7rem}
.hero-steps li{display:flex; align-items:center; gap:.7rem; font-weight:500}
.hero-steps span{display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--bleu); color:#fff; font-size:.8rem; font-weight:700; flex:none}
.hero-right{background:linear-gradient(160deg,#12358f,#1f5fd6); padding:2.6rem 2.2rem; color:#fff; display:flex; align-items:center}
.access-form{width:100%}
.access-form h2{margin:0 0 1.1rem; font-size:1.3rem}
.access-form label{display:block; font-weight:600; font-size:.85rem; margin-bottom:.35rem; color:#dce6fb}
.access-form input{
  width:100%; padding:.85rem 1rem; border-radius:11px; border:0; font-size:1.05rem;
  font-family:inherit; margin-bottom:1rem; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
}
.access-form .btn{margin-top:.2rem}
.hint{font-size:.8rem; color:var(--muted); margin:.7rem 0 0}
.hero-right .hint{color:#c3d3f7}
.hero-right code, .hint code{background:rgba(255,255,255,.15); padding:.1rem .4rem; border-radius:5px; font-size:.85em}
.hint code{background:#eef1f7; color:var(--bleu)}

/* ---------- Espace salarié ---------- */
.grid-identity{display:grid; grid-template-columns:1.6fr 1fr; gap:1.2rem; margin-bottom:1.4rem}
.id-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; display:flex; gap:1.2rem; box-shadow:var(--shadow)}
.id-avatar{width:66px; height:66px; border-radius:18px; flex:none;
  background:linear-gradient(135deg,var(--bleu-2),var(--bleu)); color:#fff;
  display:grid; place-items:center; font-size:1.5rem; font-weight:800; letter-spacing:.02em}
.id-info h1{font-size:1.5rem; margin:.1rem 0 .1rem; font-weight:600}
.id-info h1 strong{font-weight:800}
.id-poste{color:var(--bleu-2); font-weight:600; margin:.1rem 0 .8rem}
.id-meta{display:flex; flex-wrap:wrap; gap:.4rem 1.6rem}
.id-meta span{display:flex; flex-direction:column; font-size:.92rem; font-weight:600}
.id-meta em{font-style:normal; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; font-weight:700}
.solde-card{background:linear-gradient(160deg,#0e2f82,#1f5fd6); color:#fff; border-radius:var(--radius);
  padding:1.6rem; display:flex; flex-direction:column; justify-content:center; box-shadow:var(--shadow)}
.solde-label{font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; opacity:.85; font-weight:700}
.solde-value{font-size:3rem; font-weight:800; line-height:1; margin:.3rem 0 .8rem}
.solde-value small{font-size:1rem; font-weight:600; opacity:.85; margin-left:.4rem}
.solde-bar{height:8px; background:rgba(255,255,255,.25); border-radius:99px; overflow:hidden}
.solde-bar i{display:block; height:100%; background:#7ee0a2; border-radius:99px}

/* ---------- CTA ---------- */
.cta-row{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:1.8rem}
.cta{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem 1.4rem; display:flex; gap:1rem; align-items:center; box-shadow:var(--shadow); color:var(--ink)}
.cta:hover{text-decoration:none; border-color:var(--bleu-2); transform:translateY(-2px); transition:.15s}
.cta-ico{font-size:1.7rem}
.cta span strong{display:block; font-size:1.02rem}
.cta span small{color:var(--muted); font-size:.85rem}
.cta-primary{background:linear-gradient(135deg,#eef4ff,#fff); border-color:#cfe0ff}

/* ---------- Panels & tables ---------- */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem; box-shadow:var(--shadow)}
.panel-title{margin:.1rem 0 1rem; font-size:1.15rem}
.empty{color:var(--muted); padding:1.5rem 0; text-align:center}
.table-scroll{overflow-x:auto}
.table{width:100%; border-collapse:collapse; font-size:.92rem}
.table th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:700; padding:.6rem .7rem; border-bottom:2px solid var(--line)}
.table td{padding:.75rem .7rem; border-bottom:1px solid var(--line); vertical-align:middle}
.table tbody tr:hover{background:#f8faff}
.table-admin td{font-size:.9rem}
.row-actions{display:flex; gap:.4rem; white-space:nowrap}
.note{font-size:.8rem; color:var(--wait); cursor:help}

/* ---------- Badges ---------- */
.badge{display:inline-block; padding:.28rem .65rem; border-radius:999px; font-size:.75rem; font-weight:700}
.badge-ok{background:var(--ok-bg); color:var(--ok)}
.badge-wait{background:var(--wait-bg); color:var(--wait)}
.badge-no{background:var(--no-bg); color:var(--no)}
.tag{display:inline-block; margin-left:.4rem; padding:.15rem .55rem; border-radius:6px; font-size:.72rem; font-weight:700; background:#eef1f7; color:var(--muted)}
.tag-warn{background:var(--wait-bg); color:var(--wait)}

/* ---------- Forms ---------- */
.back{display:inline-block; margin-bottom:1rem; color:var(--muted); font-weight:600}
.back.center{display:block; text-align:center; margin-top:1.2rem}
.form-head h1{font-size:1.6rem; margin:.2rem 0 .3rem}
.form-sub{color:var(--muted); margin:0 0 1.2rem}
.seg{display:inline-flex; background:#eef1f7; border-radius:12px; padding:.3rem; gap:.3rem; margin-bottom:1.3rem}
.seg a{padding:.5rem 1rem; border-radius:9px; font-weight:600; color:var(--muted)}
.seg a.active{background:#fff; color:var(--bleu); box-shadow:0 2px 6px rgba(0,0,0,.06)}
.seg a:hover{text-decoration:none}
.card-form{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow)}
.fields{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem 1.1rem; margin-bottom:1rem}
.field{display:flex; flex-direction:column}
.field-full{grid-column:1/-1}
.field label{font-weight:600; font-size:.85rem; margin-bottom:.4rem}
.field input,.field textarea,.field select{
  padding:.7rem .85rem; border:1px solid var(--line); border-radius:10px; font-size:.95rem; font-family:inherit; background:#fff; width:100%;
}
.field input:focus,.field textarea:focus{outline:2px solid var(--bleu-2); border-color:transparent}
.field .readonly{background:#f4f6fb; color:var(--bleu); font-weight:700}
.radio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-bottom:.4rem}
.radio-tile{position:relative; border:1.5px solid var(--line); border-radius:11px; padding:.8rem .9rem; cursor:pointer; font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:.5rem}
.radio-tile input{accent-color:var(--bleu-2); width:18px; height:18px}
.radio-tile:has(input:checked){border-color:var(--bleu-2); background:var(--bleu-clair); color:var(--bleu)}
.form-actions{display:flex; justify-content:flex-end; gap:.8rem; margin-top:1.4rem}

/* ---------- Login DRH ---------- */
.login-box{background:var(--card); border-radius:20px; box-shadow:var(--shadow); padding:2.4rem; width:100%; max-width:390px; text-align:center; border:1px solid var(--line)}
.login-brand img{height:56px; margin-bottom:.6rem}
.login-box h1{font-size:1.5rem; margin:.2rem 0}
.login-sub{color:var(--muted); margin:0 0 1.4rem}
.login-box label{display:block; text-align:left; font-weight:600; font-size:.85rem; margin-bottom:.35rem}
.login-box input{width:100%; padding:.8rem 1rem; border:1px solid var(--line); border-radius:11px; font-size:1rem; margin-bottom:1rem; font-family:inherit}

/* ---------- Admin ---------- */
.admin-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.3rem}
.admin-head h1{font-size:1.6rem; margin:0}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.4rem}
.stat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.2rem; display:flex; flex-direction:column; box-shadow:var(--shadow); color:var(--ink)}
.stat:hover{text-decoration:none; transform:translateY(-2px); transition:.15s}
.stat-active{outline:2px solid var(--bleu-2)}
.stat-n{font-size:2rem; font-weight:800; line-height:1}
.stat-l{color:var(--muted); font-weight:600; font-size:.85rem}
.stat-wait .stat-n{color:var(--wait)} .stat-ok .stat-n{color:var(--ok)} .stat-no .stat-n{color:var(--no)}

/* ---------- Détail demande ---------- */
.detail-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:1.2rem; align-items:start}
.detail-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem}
.detail-top h1{font-size:1.5rem; margin:0}
.detail-block{padding:1rem 0; border-top:1px solid var(--line)}
.detail-block h3{font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 .7rem}
.kv{width:100%; border-collapse:collapse}
.kv td{padding:.4rem .3rem; vertical-align:top; font-size:.93rem}
.kv td:first-child{color:var(--muted); width:42%; font-weight:500}
.decision-done{background:#f8faff; border-radius:12px; padding:1rem 1.1rem; border:1px solid var(--line)}
.muted{color:var(--muted); font-size:.88rem}
.side h3{margin-top:0}
.decision-btns{display:grid; gap:.7rem; margin-top:.5rem}

/* ---------- Gestion employés ---------- */
.head-actions{display:flex; gap:.6rem; flex-wrap:wrap}
.btn-del{background:#fff; border-color:#f3c6c3; color:var(--no); padding:.4rem .6rem}
.btn-del:hover{background:var(--no-bg)}
.check-line{display:flex; align-items:center; gap:.55rem; font-weight:600; font-size:.9rem; margin:.4rem 0 .2rem; cursor:pointer}
.check-line input{width:18px; height:18px; accent-color:var(--bleu-2)}

/* ---------- Barre d'outils de panneau ---------- */
.panel-tools{display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; gap:1rem; flex-wrap:wrap}
.panel-tools .panel-title{margin:0}

/* ---------- Calendrier ---------- */
.cal-nav{display:flex; align-items:center; justify-content:center; gap:1.2rem; margin-bottom:1rem}
.cal-nav h2{margin:0; min-width:200px; text-align:center; text-transform:capitalize}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cal-head{text-align:center; font-weight:700; font-size:.75rem; color:var(--muted); text-transform:uppercase; padding:.3rem 0}
.cal-cell{min-height:92px; border:1px solid var(--line); border-radius:10px; padding:5px 6px; background:#fff; display:flex; flex-direction:column; gap:3px; overflow:hidden}
.cal-empty{background:transparent; border:0}
.cal-we{background:#f4f6fb}
.cal-fe{background:#fdf3e0}
.cal-num{font-weight:700; font-size:.8rem; color:var(--ink)}
.cal-num em{font-style:normal; font-weight:600; font-size:.62rem; color:var(--wait); margin-left:2px}
.cal-abs{display:block; color:#fff; font-size:.68rem; font-weight:600; padding:2px 5px; border-radius:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cal-plus{font-size:.68rem; color:var(--muted); font-weight:700}
.cal-legend{display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:1rem; font-size:.82rem; color:var(--muted); align-items:center}
.cal-legend i{display:inline-block; width:16px; height:12px; border-radius:3px; vertical-align:middle; margin-right:4px; border:1px solid var(--line)}
.lg-we{background:#f4f6fb} .lg-fe{background:#fdf3e0}

/* ---------- Graphiques (barres horizontales) ---------- */
.barchart{display:grid; gap:.7rem}
.bar-row{display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:.8rem}
.bar-label{font-size:.85rem; font-weight:600; text-align:right; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bar-track{background:#eef1f7; border-radius:99px; height:16px; overflow:hidden}
.bar-fill{display:block; height:100%; background:linear-gradient(90deg,var(--bleu-2),var(--bleu)); border-radius:99px}
.bar-fill-2{background:linear-gradient(90deg,var(--cyan),#0e7490)}
.bar-val{font-size:.82rem; font-weight:700; white-space:nowrap}
.bar-val small{color:var(--muted); font-weight:500}

/* ---------- Graphique colonnes (par mois) ---------- */
.colchart{display:flex; align-items:flex-end; gap:.8rem; height:190px; padding-top:1rem; overflow-x:auto; justify-content:flex-start}
.col{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.35rem; width:60px; flex:0 0 60px}
.col-val{font-weight:700; font-size:.82rem}
.col-bar{width:60%; min-height:6px; background:linear-gradient(180deg,var(--bleu-2),var(--bleu)); border-radius:6px 6px 0 0}
.col-lbl{font-size:.72rem; color:var(--muted); text-align:center; line-height:1.1}

/* ============ RESPONSIVE / MOBILE ============ */
@media(max-width:860px){
  .hero-card,.grid-identity,.cta-row,.detail-grid,.fields,.radio-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero-left h1{font-size:1.8rem}
}
@media(max-width:600px){
  .topbar{padding:.6rem 1rem}
  .brand-logo{height:34px}
  .brand-text small{display:none}
  .topnav{gap:.6rem}
  .wrap{padding:1.2rem 1rem 2.5rem}
  .hero-left{padding:1.8rem 1.4rem}
  .hero-right{padding:1.8rem 1.4rem}
  .hero-left h1{font-size:1.55rem}
  .lead{font-size:.95rem}
  .id-card{flex-direction:column; text-align:center; align-items:center}
  .id-meta{justify-content:center}
  .solde-value{font-size:2.4rem}
  .cta{padding:1.1rem}
  .admin-head{flex-direction:column}
  .admin-head h1{font-size:1.35rem}
  .head-actions{width:100%}
  .head-actions .btn{flex:1}
  .stats{grid-template-columns:repeat(2,1fr); gap:.7rem}
  .stat-n{font-size:1.6rem}
  .form-actions{flex-direction:column-reverse}
  .form-actions .btn{width:100%}
  .seg{width:100%}
  .seg a{flex:1; text-align:center}
  .table{font-size:.85rem}
  .table th,.table td{padding:.6rem .5rem}
  .bar-row{grid-template-columns:100px 1fr auto; gap:.5rem}
  .bar-label{font-size:.75rem}
  .cal-grid{gap:3px}
  .cal-cell{min-height:60px; padding:3px; border-radius:7px}
  .cal-abs{font-size:.6rem; padding:1px 3px}
  .cal-num{font-size:.7rem}
  .cal-nav{gap:.5rem}
  .cal-nav h2{min-width:auto; font-size:1.1rem}
  .cal-nav .btn{padding:.5rem .6rem; font-size:.8rem}
  /* Confort tactile : cibles d'au moins 44px */
  .btn{min-height:44px}
  .field input,.field textarea,.field select{font-size:16px} /* évite le zoom auto iOS */
  .access-form input{font-size:16px}
}