/* ===== Design system central ===== */
:root{
  --bg:#f7f7f9; --ink:#1f2428; --muted:#6b7280; --card:#ffffff; --line:#e5e7eb;
  --brand:#0f766e; --brand-ink:#ffffff; --accent:#4f46e5; --warn:#b45309; --danger:#b91c1c;
  --radius:14px; --shadow:0 8px 24px rgba(0,0,0,.06);
  --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:18px; --sp-5:24px; --sp-6:32px;
  --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-22:22px; --fs-28:28px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.al-body{background:var(--bg);color:var(--ink);font:var(--fs-16)/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}

/* Layouts de base */
.al-container{max-width:1180px;margin:0 auto;padding:0 var(--sp-4)}
.al-header,.al-footer{background:#fff;border-bottom:1px solid var(--line)}
.al-footer{border-top:1px solid var(--line);border-bottom:none}
.al-header .al-container,.al-footer .al-container{display:flex;align-items:center;justify-content:space-between;height:60px}
.al-brand{font-weight:700}
.al-nav{display:flex;gap:var(--sp-2)}
.al-link{color:var(--ink);text-decoration:none;padding:6px 10px;border-radius:8px}
.al-link:hover{background:var(--line)}
.al-link.active{background:#eef2ff;outline:2px solid transparent}

.al-main{padding:var(--sp-5) 0}
.al-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.al-h1{margin:0;font-size:var(--fs-28)}
.al-sub{margin:4px 0 0 0;color:var(--muted)}
.al-toolbar{display:flex;gap:var(--sp-2);flex-wrap:wrap}

/* Cartes et messages */
.al-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4);box-shadow:var(--shadow)}
.al-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4)}
.al-alert{margin:var(--sp-3) 0;padding:var(--sp-3);border-radius:10px;border:1px solid var(--line)}
.al-alert.ok{background:#ecfdf5;border-color:#bbf7d0}
.al-alert.err{background:#fef2f2;border-color:#fecaca}

/* Boutons / inputs */
.al-btn{appearance:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer;transition:.15s}
.al-btn:hover{filter:brightness(0.98)}
.al-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.al-btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.al-btn.ghost{background:transparent}
.al-btn.icon{font-size:20px;line-height:1;width:36px;height:36px;display:inline-grid;place-items:center}

.al-input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.al-input:focus{outline:2px solid var(--accent);outline-offset:1px}
.al-field{display:grid;gap:6px;margin-bottom:10px}
.al-label{color:var(--muted);font-size:var(--fs-14)}

/* Modales (formulaires) */
.al-modal{position:fixed;inset:0;display:none}
.al-modal[aria-hidden="false"]{display:block}
.al-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.28)}
.al-modal-dialog{
  position:relative;
  margin:3vh auto;                 /* ↓ moins haut que 10vh */
  background:#fff;
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  max-width:640px;
  max-height:84vh;                 /* ↓ limite la hauteur visible */
  overflow:auto;                   /* scroll interne si contenu long */
  -webkit-overflow-scrolling:touch;
}
.al-modal-dialog.size-xs{max-width:360px}
.al-modal-dialog.size-sm{max-width:480px}
.al-modal-dialog.size-md{max-width:760px}
.al-modal-dialog.size-lg{max-width:820px}
.al-modal-dialog.size-xl{max-width:980px}
.al-modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.al-form{padding:12px 14px}
.al-form-body{display:grid;gap:10px}
.al-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 14px;border-top:1px solid var(--line)}

/* Annuaire (2 colonnes) — FIX robuste (colonne gauche visible) */
.annuaire{
  display:grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap:var(--sp-4);
  align-items:start;
}
.annuaire-aside{
  display:grid;
  gap:var(--sp-3);
  position:sticky;
  top:18px;
  height:fit-content;
  min-width:320px;
}
.annuaire-main{
  display:grid;
  gap:var(--sp-3);
  min-width:0; /* IMPORTANT: empêche le main d'écraser l'aside */
}
.al-filter{display:grid;gap:8px}
@media (max-width:980px){
  .annuaire{grid-template-columns:1fr}
  .annuaire-aside{position:static;min-width:0}
}

/* Liste annuaire (propre, ellipsis, responsive) */
.al-list{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:auto;
  max-height:calc(100vh - 220px);
  background:#fff;
}
.al-list a.al-list-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  color:inherit;
  transition:.15s;
}
.al-list a.al-list-item:hover{background:#fafafa}
.al-list a.al-list-item:last-child{border-bottom:0}
.al-list a.al-list-item.active{background:#eef2ff;border-left:3px solid var(--accent)}
.al-list a.al-list-item > *{min-width:0} /* nécessaire pour ellipsis */
.al-list-title{
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.al-list-sub{
  color:var(--muted);
  font-size:var(--fs-14);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Détail employé — grille à 2 colonnes max (jamais 3) */
.al-detail{display:grid;gap:var(--sp-3)}
.al-detail-header{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.al-detail-title{margin:0;font-size:var(--fs-22)}
.al-detail-sub{color:var(--muted)}
.al-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); /* max 2 colonnes */
  gap:var(--sp-3);
}
@media (max-width:980px){
  .al-detail-grid{grid-template-columns:1fr;}
}

/* Cartouches label/valeur – VERTICAL COMPACT (remplace l'ancien "avec ellipsis") */
.al-meta{
  display:block;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
}
.al-meta span{                /* LABEL au-dessus */
  display:block;
  margin:0;
  color:var(--muted);
  font-size:var(--fs-14);
  line-height:1.1;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
.al-meta strong{
  display:block;
  margin:0;
  font-size:var(--fs-16);
  line-height:1.3;
  word-break:break-word;
  color:var(--ink);
}
.al-meta strong *{
  white-space:inherit !important;
}

/* Neutralise le gras sur les valeurs des fiches (strong ≠ emphase ici) */
.al-meta strong{
  font-weight:400; /* normal */
}

/* Utilitaires */
.al-row{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.al-space{height:var(--sp-3)}
.al-muted{color:var(--muted)}

/* Grilles utilitaires */
.al-grid{display:grid;gap:var(--sp-4)}
.al-grid.two{grid-template-columns:repeat(2,1fr)}
.al-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){
  .al-grid.two,
  .al-grid.three{grid-template-columns:1fr}
}

/* ===== Meta panel — sections & rows compactes ===== */

/* Wrapper de toutes les sections */
.al-meta-sections{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}

/* Conteneur d’une section */
.al-meta-section{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--sp-4);
  box-shadow:var(--shadow);
}

/* Titre de section */
.al-meta-section > .al-meta-title{
  margin:0 0 var(--sp-3) 0;
  font-size:var(--fs-18);
  line-height:1.3;
}

/* Grille interne : 2 colonnes sur écrans standard, 1 en mobile */
.al-meta-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:var(--sp-3) var(--sp-4); /* row-gap / column-gap */
}
@media (max-width:980px){
  .al-meta-grid{ grid-template-columns:1fr; }
}

/* (Compat) Si d'anciens wrappers sont rendus dans la grille, on les neutralise */
.al-meta-grid .meta-row,
.al-meta-grid .row.meta,
.al-meta-grid .field-static{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
}

/* ==== Modales : verrouillage du scroll arrière-plan + scroll interne ==== */
body.no-scroll { overflow: hidden !important; }

/* Empêche la propagation du scroll du modal vers la page (wheel/touch) */
.al-modal { overscroll-behavior: contain; }

/* Le contenu long défile à l’intérieur du panneau */
.al-modal-dialog {
  max-height: 90vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* === TABLES (modificateurs uniformes RH) =============================== */
.al-table {
  width: 100%;
  border-collapse: separate; /* permet le spacing quand on l'active */
}

.al-table th,
.al-table td {
  text-align: left;       /* alignement gauche partout */
  vertical-align: top;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  white-space: nowrap;    /* évite les sauts de ligne inutiles */
}

/* Colonnes ajustées au contenu (opt-in) */
.al-table--fit td:first-child,
.al-table--fit th:first-child {
  width: 1%;              /* laisse le contenu piloter la largeur */
}

/* Espace entre colonnes (opt-in) */
.al-table--spaced {
  border-spacing: 16px 8px; /* horizontal | vertical */
}

/* Optionnel : cap sur mobile si besoin
@media (max-width: 640px) {
  .al-table th, .al-table td { white-space: normal; }
}
*/




/* --- Page Salaires : conteneur élargi (évite que la dernière colonne 'morde') --- */
.al-container.al-container-wide{max-width:1600px !important;padding-left:12px !important;padding-right:12px !important;}


/* --- Topbar : gauche / centre / droite --- */
.al-topbar-nav{
  display:flex;
  align-items:center;
  width:100%;
}

.al-topbar-left{flex:0 0 auto;}
.al-topbar-right{flex:0 0 auto;}

.al-topbar-center{
  flex:1;
  display:flex;
  justify-content:center;
  gap:16px;
}


/* --- Topbar : brand à gauche, onglets centrés, Paramètres à droite --- */
.al-header .al-container{
  display:flex;
  align-items:center;
  gap:16px;
}

.al-nav.al-nav-layout{
  flex:1;
  display:flex;
  align-items:center;
}

.al-nav-center{
  flex:1;
  display:flex;
  justify-content:center;
  gap:16px;
}

.al-nav-right{
  flex:0 0 auto;
}


/* --- Sticky footer (pages vides) --- */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer { margin-top: auto; }