/* caserne.css — Charte « Caserne » commune à tout le site
   Chargée APRÈS le <style> de chaque page : elle redéfinit les jetons de couleur
   que les pages utilisent déjà (--brand, --accent…) et fournit l'en-tête commun (.cs-*). */

:root {
  --cs-navy: #14213D;
  --cs-navy-2: #1F2E4F;
  --cs-navy-line: #33415E;
  --cs-on-navy: #C9D1E3;
  --cs-red: #C8102E;
  --cs-red-dark: #9E0C24;
  --cs-red-tint: #FCE8EB;
  --cs-bg: #F4F5F7;
  --cs-surface: #FFFFFF;
  --cs-border: #E6E8EE;
  --cs-input: #CBD2DE;
  --cs-ink: #14213D;
  --cs-muted: #5B6475;
  --cs-ok: #15803D;
  --cs-ok-tint: #E3F4E8;
  --cs-warn: #C2410C;
  --cs-warn-tint: #FDEBDD;
  --cs-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --cs-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Jetons déjà utilisés par les pages existantes, remappés sur la charte */
  --bg: var(--cs-bg);
  --surface: var(--cs-surface);
  --panel: var(--cs-surface);
  --ink: var(--cs-ink);
  --ink2: #33415E;
  --muted: var(--cs-muted);
  --border: var(--cs-border);
  --line: var(--cs-border);
  --brand: var(--cs-navy);
  --brand-lit: var(--cs-navy-2);
  --brand-2: var(--cs-navy-2);
  --primary: var(--cs-navy);
  --accent: var(--cs-red);
  --danger: var(--cs-red);
  --ok: var(--cs-ok);
  --success: var(--cs-ok);
  --warn: var(--cs-warn);
  --ring: rgba(20, 33, 61, .22);

  /* Bootstrap */
  --bs-primary: #14213D;
  --bs-primary-rgb: 20, 33, 61;
  --bs-danger: #C8102E;
  --bs-danger-rgb: 200, 16, 46;
  --bs-link-color: #14213D;
  --bs-link-color-rgb: 20, 33, 61;
  --bs-link-hover-color: #C8102E;
  --bs-body-font-family: var(--cs-body);
  --bs-body-bg: var(--cs-bg);
  --bs-body-color: var(--cs-ink);
}

html, body {
  background: var(--cs-bg);
  color: var(--cs-ink);
  font-family: var(--cs-body);
}

h1, .h1, .page-title, .inner-topbar-title {
  font-family: var(--cs-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
}
h2, .h2, h3, .h3 { font-family: var(--cs-display); font-weight: 700; }

/* Boutons Bootstrap aux couleurs de la charte */
.btn-primary {
  --bs-btn-bg: var(--cs-navy); --bs-btn-border-color: var(--cs-navy);
  --bs-btn-hover-bg: var(--cs-navy-2); --bs-btn-hover-border-color: var(--cs-navy-2);
  --bs-btn-active-bg: var(--cs-navy-2); --bs-btn-active-border-color: var(--cs-navy-2);
}
.btn-danger {
  --bs-btn-bg: var(--cs-red); --bs-btn-border-color: var(--cs-red);
  --bs-btn-hover-bg: var(--cs-red-dark); --bs-btn-hover-border-color: var(--cs-red-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--cs-navy); --bs-btn-border-color: var(--cs-navy);
  --bs-btn-hover-bg: var(--cs-navy); --bs-btn-hover-border-color: var(--cs-navy);
}
.form-control:focus, .form-select:focus {
  border-color: var(--cs-navy);
  box-shadow: 0 0 0 3px rgba(20, 33, 61, .15);
}

/* Bouton d'action principal de la charte */
.cs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: 0 1.1rem; border-radius: 10px; border: none;
  background: var(--cs-red); color: #fff; text-decoration: none; cursor: pointer;
  font-family: var(--cs-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.cs-btn:hover { background: var(--cs-red-dark); color: #fff; }
.cs-btn--navy { background: var(--cs-navy); }
.cs-btn--navy:hover { background: var(--cs-navy-2); }
.cs-btn--ghost { background: #fff; color: var(--cs-navy); border: 1.5px solid var(--cs-input); font-family: var(--cs-body); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .95rem; }
.cs-btn--ghost:hover { background: var(--cs-bg); color: var(--cs-navy); }

/* ───────── En-tête commun ───────── */
.cs-header { background: var(--cs-navy); color: #fff; position: relative; z-index: 1000; }
.cs-header a { text-decoration: none; }
.cs-header__bar {
  max-width: 1200px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 10px;
}
.cs-brand { display: flex; align-items: center; gap: 12px; color: #fff; flex: 1 1 auto; min-width: 0; }
.cs-brand:hover { color: #fff; }
.cs-logo {
  width: 40px; height: 40px; border-radius: 10px; background: var(--cs-red); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cs-display); font-weight: 700; font-size: 18px; color: #fff;
}
.cs-brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.cs-brand__name {
  font-family: var(--cs-display); font-weight: 700; font-size: 17px;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.cs-brand__user { font-size: 12px; color: var(--cs-on-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-icon-btn {
  position: relative; width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  border: 1px solid var(--cs-navy-line); color: #fff; background: transparent;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.cs-icon-btn:hover, .cs-icon-btn.is-active { background: var(--cs-navy-2); color: #fff; }
.cs-dot { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--cs-red); }

.cs-primary {
  max-width: 1200px; margin: 0 auto; padding: 0 12px;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.cs-primary::-webkit-scrollbar, .cs-subnav__inner::-webkit-scrollbar { display: none; }
.cs-primary a {
  padding: 12px 12px 9px; color: var(--cs-on-navy); border-bottom: 3px solid transparent;
  font-weight: 600; font-size: 15px; white-space: nowrap;
}
.cs-primary a:hover { color: #fff; }
.cs-primary a.is-active { color: #fff; border-bottom-color: var(--cs-red); }

.cs-subnav { background: #fff; border-bottom: 1px solid var(--cs-border); position: sticky; top: 0; z-index: 999; }
.cs-subnav__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 12px;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
}
.cs-subnav a {
  padding: 12px 12px 9px; font-weight: 600; font-size: 14px; white-space: nowrap;
  color: var(--cs-muted); border-bottom: 3px solid transparent; text-decoration: none;
}
.cs-subnav a:hover { color: var(--cs-navy); }
.cs-subnav a.is-active { color: var(--cs-red); border-bottom-color: var(--cs-red); }
.cs-count {
  display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 4px; border-radius: 999px;
  background: var(--cs-red); color: #fff; font-size: 12px; text-align: center; line-height: 1.4;
}

/* Conteneur de page */
.app-main, .cs-main { max-width: 1200px; margin-left: auto; margin-right: auto; }
.cs-main { width: 100%; padding: 24px 20px 40px; box-sizing: border-box; }

.cs-footer { border-top: 1px solid var(--cs-border); background: #fff; margin-top: auto; }
.cs-footer__inner {
  max-width: 1200px; margin: 0 auto; padding: 16px 20px;
  display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--cs-muted);
}
.cs-footer a { color: var(--cs-muted); text-decoration: underline; }

/* Les anciens en-têtes de page (remplacés par .cs-header) ne doivent plus coller sous le nouveau */
.nav-tabs-wrap { top: 0 !important; }

@media print {
  .cs-header, .cs-subnav, .cs-footer, .cs-tabbar { display: none !important; }
}

/* ───────── Mode application ───────── */
.cs-icon-btn[hidden] { display: none; }
.cs-icon-btn.is-on { background: #FACC15; border-color: #FACC15; color: #14213D; }
.cs-tabbar { display: none; }

html { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; }
button, a, .btn, .chip { touch-action: manipulation; }
.cs-header { padding-top: env(safe-area-inset-top); }

@media (max-width: 768px), (display-mode: standalone) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .cs-primary { display: none; }
  .cs-footer { display: none; }
  .cs-header { position: sticky; top: 0; }
  .cs-subnav { top: calc(68px + env(safe-area-inset-top)); }
  .cs-brand__name { font-size: 15px; }
  .cs-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    background: #fff; border-top: 1px solid var(--cs-border);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 12px rgba(20, 33, 61, .08);
  }
  .cs-tabbar a {
    flex: 1 1 0; min-width: 0; min-height: 60px; padding: 8px 2px 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--cs-muted); text-decoration: none; font-size: 11.5px; font-weight: 600;
  }
  .cs-tabbar a i { font-size: 22px; line-height: 1; }
  .cs-tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cs-tabbar a.is-active { color: var(--cs-red); }
  body.fullscreen-map .cs-tabbar { display: none; }
  /* Cibles tactiles confortables */
  .btn:not(.btn-sm), .form-control:not(.form-control-sm), .form-select:not(.form-select-sm) { min-height: 44px; }
  input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], input[type=tel], select, textarea { font-size: 16px; }   /* évite le zoom auto sur iPhone */
}

.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}