:root {
  --blue: #1C6EA4;
  --blue-dark: #124C73;
  --charcoal: #2B2B2B;
  --charcoal-light: #4A4A4A;
  --brown: #8B5E34;
  --bg: #F5F6F7;
  --border: #E5E5E2;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--charcoal);
  font-size: 14px;
}
a { color: var(--blue-dark); }
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 250px; background: var(--charcoal); color: white;
  padding: 1.5rem 1.1rem; display: flex; flex-direction: column; flex-shrink: 0;
}
.sidebar .logo { font-size: 16px; font-weight: 800; letter-spacing: .5px; margin-bottom: 28px; }
.sidebar .logo span { color: #4FA3D1; }
.sidebar a.nav-item {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 9px 10px; border-radius: 6px; margin-bottom: 3px; font-size: 13px;
  color: #C6C6C2; border-left: 3px solid transparent;
}
.sidebar a.nav-item.active { background: rgba(79,163,209,.18); color: white; border-left-color: #4FA3D1; }
.sidebar a.nav-item:hover { color: white; }
.sidebar .user-box { border-top: 1px solid #444; padding-top: 14px; margin-top: 10px; font-size: 12.5px; }
.main { flex: 1; padding: 1.75rem 2.25rem; min-width: 0; overflow: auto; }
.page-title { font-size: 21px; font-weight: 700; margin-bottom: 2px; }
.page-sub { font-size: 13px; color: #8A8A85; margin-bottom: 1.5rem; }
.card { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 9px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; border: none; background: var(--blue); color: white;
  text-decoration: none;
}
.btn.ghost { background: white; color: var(--charcoal); border: 1px solid #DADAD6; }
.btn.danger { background: transparent; color: #B23B3B; border: none; padding: 6px; }
.btn.success { background: #2E7D4F; color: white; }
label.field-label { font-size: 12px; color: #8A8A85; display: block; margin-bottom: 3px; }
input, select, textarea {
  width: 100%; padding: 8px 10px; border-radius: 7px; border: 1px solid #DADAD6; font-size: 13px;
  font-family: inherit; box-sizing: border-box;
}
table { width: 100%; min-width: max-content; border-collapse: collapse; }
th { text-align: left; padding: 9px 12px; font-weight: 600; color: #8A8A85; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; background: #FAFAF8; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 9px 12px; font-size: 13px; border-top: 1px solid #EFEFED; }
/* Carte contenant un tableau large (ex. Gestion de carrière, Paie...) : au lieu de couper
   les dernières colonnes (bouton Historique invisible sans indice qu'il y a plus à voir),
   la carte défile horizontalement — comme le défilement vertical déjà présent ailleurs. */
.card[style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }
.card[style*="overflow-x:auto"] table td:last-child, .card[style*="overflow-x:auto"] table th:last-child { white-space: nowrap; }
.grid { display: grid; gap: 10px; }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; }
.flash.success { background: #E7F4EC; color: #2E7D4F; }
.flash.error { background: #FBEAEA; color: #B23B3B; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
.notif-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 10px;
  background: #E0503C; color: white; font-size: 10.5px; font-weight: 700;
  flex-shrink: 0;
}
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.print-letterhead { display: none; }
.print-footer { display: none; }
@media print {
  .sidebar, .no-print { display: none !important; }
  /* Le fond gris clair de l'écran (var(--bg)) n'a de sens qu'à l'écran : sans cette
     règle, il reste visible au format imprimé/PDF — auparavant masqué par le fond
     blanc de .card, désormais transparente ici — et donne une page grisâtre au lieu
     d'un blanc net. */
  body { background: white !important; }
  /* L'espace autour du contenu imprimé est porté par le padding de .main (valeurs
     réglables depuis Paramètres, injectées par includes/header.php) et non par la
     marge de @page : Chrome applique de façon peu fiable une marge de @page
     asymétrique (la marge de gauche retombe parfois à 0 alors que les autres côtés
     sont corrects, bug constaté en conditions réelles) alors que le padding d'un
     élément du contenu, lui, s'applique toujours correctement. @page ne garde que
     la marge basse, nécessaire pour réserver la place de la numérotation de page. */
  .app-shell { padding: 0 !important; margin: 0 !important; }
  .main { margin: 0 !important; }
  /* L'habillage "carte" (bordure, ombre, coins arrondis, fond) n'a de sens qu'à
     l'écran : à l'impression il créait un cadre visible qui réduisait encore la
     zone utile et donnait l'impression d'une page plus petite que l'A4 réel. */
  .card {
    border: none !important; box-shadow: none !important; border-radius: 0 !important;
    background: transparent !important; padding: 0 !important; margin-bottom: 12px !important;
  }
  .print-letterhead {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #124C73;
  }
  .print-letterhead img { height: 0.85in; width: auto; }
  .print-letterhead-infos { text-align: right; }
  .print-letterhead-infos .ligne-contact { font-size: 8.5px; color: #5A5A55; margin-bottom: 3px; }
  .print-letterhead-infos .ligne-contact span { margin-left: 10px; }
  .print-letterhead-infos .ligne-contact span:first-child { margin-left: 0; }
  .print-footer {
    display: block; position: fixed; bottom: 0; left: 0; right: 0;
    padding: 3px 15mm; border-top: 1px solid #DADAD6; background: white;
  }
  .print-footer .ligne-trace { font-size: 7.5px; color: #B0B0AB; text-align: center; }
  /* Le pied de page (traçabilité) se répète correctement sur chaque page grâce à la marge
     réservée ci-dessous — comportement vérifié et fiable. Le grand logo et les informations
     légales, eux, n'apparaissent qu'en haut du document (comme un en-tête de courrier
     classique) : forcer l'en-tête à se répéter sur chaque page via une position fixe se
     heurte à un défaut du moteur d'impression de Chrome qui déplace alors le contenu au
     mauvais endroit sur les pages suivantes — mieux vaut un rendu fiable qu'un rendu
     ambitieux mais cassé. La numérotation de page, elle, utilise la prise en charge native
     du navigateur (marges de page CSS) : fiable et se répète correctement, contrairement à
     un texte positionné en fixed.
     La règle @page (taille, marge basse réservée à la numérotation) est définie
     uniquement dans includes/header.php, avec les valeurs personnalisées enregistrées
     dans Paramètres — à ne pas dupliquer ici. */
  html, body { width: 210mm; margin: 0; }
}