/* ============================================================
   KETRACO Map — Design System
   Basé sur la charte YKA/GEV
   ============================================================ */

/* Import Inter (pour l'instant, on fera Sons Condensed plus tard) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* === Couleurs === */
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --surface-sunken: #F3F2EE;

  --ink: #212121;
  --ink-2: #5C5F63;
  --ink-3: #8A8D91;

  --line: #E6E6E9;

  --primary: #005E60;
  --primary-hover: #004B4D;
  --primary-active: #003A3B;
  --primary-soft: #E4F1F0;

  --accent: #C8FF08;
  --accent-ink: #212121;

  --danger: #C53A37;
  --danger-soft: #FBE9E8;
  --success: #2E8B57;
  --success-soft: #E6F4EC;

  /* === Typo === */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* === Espacements === */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* === Radius === */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;

  /* === Ombres === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* === Transitions === */
  --transition: all 150ms ease;

  --header-height: 56px;
  --sidebar-width: 220px;
  --content-max-width: 1400px;
}

/* === Reset & base === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}

h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }

p { color: var(--ink-2); }

a {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
}
a:hover { color: var(--primary-hover); }

.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }

/* === Boutons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 40px;
  padding: 0 var(--sp-4);
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--primary);
  color: white;
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.btn-primary:active:not(:disabled) { background: var(--primary-active); }

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-secondary:hover:not(:disabled) { background: var(--surface-sunken); }

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--surface-sunken);
  color: var(--ink);
}

.btn-danger {
  background: var(--danger);
  color: white;
}
.btn-danger:hover:not(:disabled) { filter: brightness(0.9); }

.btn-block { width: 100%; }
.btn-sm { height: 32px; padding: 0 var(--sp-3); font-size: 13px; }
.btn-lg { height: 48px; padding: 0 var(--sp-6); font-size: 15px; }

/* === Inputs === */
.input {
  width: 100%;
  height: 40px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: var(--transition);
}
.input::placeholder { color: var(--ink-3); }
.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.input.input-error {
  border-color: var(--danger);
}

label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

/* === Cards === */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: var(--sp-3);
}

/* === Alerts === */
.alert {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: var(--sp-4);
}
.alert-danger {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid var(--danger);
}
.alert-success {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid var(--success);
}

/* === Layout utilities === */
.center-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.stack > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }

/* === Focus ring général === */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* === Chip / Badge === */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  background: var(--primary-soft);
  color: var(--primary);
}
.chip-accent {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.chip-muted {
  background: var(--surface-sunken);
  color: var(--ink-2);
}
.chip-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

/* ============================================================
   Header partagé (dashboard, admin, etc.)
   ============================================================ */

.app-header {
  height: 56px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0 var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  position: sticky;
  top: 0;
  z-index: 100;
}

.hdr-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  flex: 1;
}

.hdr-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.hdr-brand {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.hdr-brand:hover { color: var(--primary); }

.hdr-company-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.hdr-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  overflow: hidden;
  min-width: 0;
}

.hdr-crumb {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hdr-crumb:hover { color: var(--ink); }
.hdr-crumb-current {
  color: var(--ink);
  font-weight: 500;
}
.hdr-crumb-sep {
  color: var(--ink-3);
  font-size: 12px;
}

/* User menu */
.hdr-user {
  position: relative;
}

.hdr-user-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 10px 4px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  transition: var(--transition);
}
.hdr-user-btn:hover {
  background: var(--surface-sunken);
  border-color: var(--line);
}

.hdr-user-avatar {
  width: 30px;
  height: 30px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.hdr-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.15;
}

.hdr-user-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hdr-user-role {
  font-size: 10.5px;
  color: var(--ink-3);
}

.hdr-user-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 200;
}

.hdr-user-dropdown-info {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.hdr-user-dropdown-email {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  word-break: break-all;
}

.hdr-menu-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition);
}
.hdr-menu-item:hover {
  background: var(--surface-sunken);
}

.btn.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.project-card {
  cursor: pointer;
  transition: var(--transition);
}

/* ============================================================
   Cloche notifications
   ============================================================ */

.hdr-notif {
  position: relative;
}

.hdr-notif-btn {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
  display: flex;
  align-items: center;
}
.hdr-notif-btn:hover {
  background: var(--surface-sunken);
  border-color: var(--line);
}

.hdr-notif-icon {
  font-size: 16px;
  line-height: 1;
}

.hdr-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--danger, #E11D48);
  color: white;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.hdr-notif-dropdown[hidden] {
  display: none !important;
}

.hdr-notif-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 360px;
  max-height: 480px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 200;
}

.hdr-notif-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-sunken);
}

.hdr-notif-mark-all {
  background: transparent;
  border: none;
  color: var(--primary);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  font-weight: 500;
}
.hdr-notif-mark-all:hover { text-decoration: underline; }

.hdr-notif-list {
  overflow-y: auto;
  flex: 1;
}

.hdr-notif-empty {
  padding: var(--sp-6);
  text-align: center;
  color: var(--ink-3);
  font-size: 12px;
}

.hdr-notif-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.hdr-notif-item:hover {
  background: var(--surface-sunken);
}
.hdr-notif-item.is-unread {
  background: var(--primary-soft);
}
.hdr-notif-item.is-unread::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.hdr-notif-item.is-unread {
  padding-left: 20px;
}

.hdr-notif-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.hdr-notif-body {
  font-size: 11.5px;
  color: var(--ink-2);
  margin-top: 3px;
  line-height: 1.3;
}
.hdr-notif-time {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 4px;
}

/* Icône poubelle sur chaque notification */
.hdr-notif-item {
  padding-right: 40px !important;
}

.hdr-notif-delete {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  opacity: 0.5;
}

.hdr-notif-item:hover .hdr-notif-delete {
  opacity: 1;
}

.hdr-notif-delete:hover {
  color: var(--danger, #E11D48);
  background: rgba(225, 29, 72, 0.1);
  opacity: 1;
}
/* ============================================================
   Responsive breakpoints (mobile-first, media queries en CSS pur)
   sm : 640px  (téléphone paysage / petite tablette)
   md : 768px  (tablette portrait)
   lg : 1024px (tablette paysage / laptop 11")
   xl : 1280px (laptop 15" / desktop 24")
   2xl: 1536px (écran 27")
   ============================================================ */

/* Variables communes */
:root {
  --header-height: 56px;
  --sidebar-width: 220px;
  --content-max-width: 1400px;
}

/* Utilitaires d'affichage responsive */
.hide-mobile { display: none; }
.hide-tablet { display: initial; }
.hide-desktop { display: initial; }
.show-mobile { display: initial; }
.show-tablet { display: none; }
.show-desktop { display: none; }

@media (min-width: 640px) {
  .hide-mobile { display: initial; }
  .show-mobile { display: none; }

  /* `display: initial` écrase le `inline-flex` de .btn : le bouton perd sa
     hauteur de 40 px et son centrage vertical. Le lien « Administration »
     souffrait déjà du défaut ; on le corrige pour tous les boutons d'un coup. */
  .btn.hide-mobile, a.btn.hide-mobile { display: inline-flex; }
}

@media (min-width: 1024px) {
  .hide-tablet { display: none; }
  .show-tablet { display: initial; }
  .show-desktop { display: initial; }
  .hide-desktop { display: none; }
}

/* Sur les petits écrans, augmenter la taille cible tactile */
@media (max-width: 640px) {
  button, .btn, a.btn, input, select, textarea {
    min-height: 44px;
  }
  .btn-sm {
    min-height: 36px;
  }
  .admin-action-btn {
    width: 40px;
    height: 40px;
  }
}

/* Prévention débordement mobile */
html, body {
  overflow-x: hidden;
}

/* Support des safe areas (iPhone X+) */
body {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}


/* ============================================================
   Header responsive : hamburger mobile + drawer
   ============================================================ */

.hdr-hamburger {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
  margin-right: var(--sp-2);
  align-items: center;
  justify-content: center;
}

.hdr-hamburger:hover {
  background: var(--surface-sunken);
  border-color: var(--line);
}

/* Sur desktop : hamburger caché, sur mobile visible (via .show-mobile) */
.hdr-hamburger.show-mobile {
  display: none;
}

@media (max-width: 640px) {
  .hdr-hamburger.show-mobile {
    display: flex !important;
  }

  /* Compacter le header sur mobile */
  .app-header {
    padding: 0 var(--sp-3);
  }

  .hdr-user-info {
    display: none;
  }

  .hdr-user-btn {
    padding: 4px;
  }

  .hdr-right {
    gap: 4px;
  }
}

/* Drawer mobile */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.mobile-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.mobile-drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 85%;
  max-width: 320px;
  background: var(--surface);
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
  transition: transform 250ms ease-out;
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  gap: var(--sp-4);
  overflow-y: auto;
}

.mobile-drawer.is-open {
  pointer-events: auto;
}

.mobile-drawer.is-open .mobile-drawer-backdrop {
  opacity: 1;
}

.mobile-drawer.is-open .mobile-drawer-panel {
  transform: translateX(0);
}

.mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.mobile-drawer-close {
  background: transparent;
  border: none;
  color: var(--ink-2);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-drawer-close:hover {
  background: var(--surface-sunken);
}

.mobile-drawer-company {
  padding: var(--sp-3);
  background: var(--primary-soft);
  border-radius: var(--radius);
}

.mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
}
.mobile-drawer-link:hover {
  background: var(--surface-sunken);
}

.mobile-drawer-breadcrumbs {
  padding: var(--sp-3);
  background: var(--surface-sunken);
  border-radius: var(--radius);
}

.mobile-drawer-user {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.mobile-drawer-logout {
  grid-column: 1 / -1;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 8px;
}
.mobile-drawer-logout:hover {
  background: var(--surface-sunken);
  border-color: var(--danger);
  color: var(--danger);
}

/* Empêcher le scroll du body quand drawer ouvert */
body:has(.mobile-drawer.is-open) {
  overflow: hidden;
}


/* Fix : boutons avec texte doivent centrer verticalement */
.btn, a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

/* Notifications dropdown responsive */
@media (max-width: 640px) {
  .hdr-notif-dropdown {
    position: fixed;
    top: var(--header-height);
    right: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100dvh - var(--header-height) - 16px);
  }
}

/* ============================================================
   Header : slot central (barre de recherche, etc.)
   ============================================================ */

.hdr-center {
  flex: 1;
  max-width: 500px;
  margin: 0 var(--sp-3);
  display: flex;
  align-items: center;
  min-width: 0;
}

.hdr-center > * {
  width: 100%;
}

@media (max-width: 900px) {
  .hdr-center {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .hdr-center {
    display: none;
  }
}


/* ============================================================
   Header en mode carte (map.html)
   Desktop  : marque | projet | RECHERCHE | admin | cloche | profil
   Mobile   : hamburger | RECHERCHE | admin | cloche | initiale
   ============================================================ */

/* Desktop : la recherche prend l'espace central maximal */
.app-header.hdr-map-mode .hdr-center {
  max-width: none;
  flex: 1;
}

/* Sur mobile, on cache automatiquement le brand + company chip
   (déjà géré par les règles générales) mais on veut aussi masquer les breadcrumbs
   pour libérer la recherche */
@media (max-width: 640px) {
  .app-header.hdr-map-mode .hdr-breadcrumbs { display: none; }

  /* La recherche apparait meme sur mobile en mode carte */
  .app-header.hdr-map-mode .hdr-center {
    display: flex !important;
    margin: 0 6px;
  }

  /* Reduire "Administration" a une icone engrenage */
  .app-header.hdr-map-mode a[href="/admin.html"] {
    padding: 6px;
    width: 36px;
    min-width: 36px;
    justify-content: center;
    font-size: 0;
  }
  .app-header.hdr-map-mode a[href="/admin.html"]::before {
    content: '⚙';
    font-size: 18px;
  }
}

/* Sur mobile : cacher la marque CartoHub (on garde hamburger + recherche) */
@media (max-width: 640px) {
  .app-header .hdr-brand {
    display: none;
  }
}

/* ============================================================
   Anti-zoom Safari sur focus input (nécessite font-size >= 16px)
   ============================================================ */
@media (max-width: 900px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ============================================================
   Mode carte mobile : compact au max
   ============================================================ */
@media (max-width: 640px) {
  .app-header.hdr-map-mode {
    padding: 0 6px;
    gap: 4px;
  }
  .app-header.hdr-map-mode .hdr-left {
    flex: none;
    gap: 4px;
  }
  .app-header.hdr-map-mode .hdr-hamburger {
    margin-right: 0;
  }
}

/* ============================================================
   Anti-zoom Safari sur focus input (nécessite font-size >= 16px)
   ============================================================ */
@media (max-width: 900px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ============================================================
   Mode carte mobile : compact au max
   ============================================================ */
@media (max-width: 640px) {
  .app-header.hdr-map-mode {
    padding: 0 6px;
    gap: 4px;
  }
  .app-header.hdr-map-mode .hdr-left {
    flex: none;
    gap: 4px;
  }
  .app-header.hdr-map-mode .hdr-hamburger {
    margin-right: 0;
  }
}

/* ============================================================
   Switcher de company dans le header
   ============================================================ */

.hdr-company-switcher {
  position: relative;
}

.hdr-company-chip.is-clickable {
  cursor: pointer;
  border: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  transition: var(--transition);
}

.hdr-company-chip.is-clickable:hover {
  background: var(--primary);
  color: white;
}

.hdr-company-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: 200;
}

.hdr-company-dropdown[hidden] {
  display: none !important;
}

.hdr-company-dropdown-header {
  padding: 10px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hdr-company-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
}

.hdr-company-option:hover {
  background: var(--surface-sunken);
}

.hdr-company-option.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.hdr-company-option-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hdr-company-option-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.hdr-company-option-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hdr-company-option-role {
  font-size: 11px;
  color: var(--ink-3);
}


/* ============================================================
   Menu déroulant "A · Sélecteur simple" — conforme à la charte
   (Applique aux <select> natifs par défaut + classe .dd pour version JS)
   ============================================================ */

/* Variables spécifiques dropdowns si non déjà définies */
:root {
  --control-h: 44px;
  --r-control: 11px;
  --r-chip: 8px;
  --ring: 0 0 0 3px var(--primary-soft);
}

/* --- <select> natif : appliquer les mêmes règles que .dd__trigger --- */
select {
  height: var(--control-h);
  padding: 0 40px 0 14px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  font: 400 15px var(--font-sans);
  font-size: 15px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

select:hover:not(:disabled) {
  border-color: var(--ink-3);
}

select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23005E60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

select:disabled {
  background-color: var(--surface-sunken);
  color: var(--ink-3);
  cursor: not-allowed;
  opacity: 1;
}

/* Version compacte pour tableaux et barres d'outils */
select.dd-compact,
.admin-table select {
  height: 38px;
  padding: 0 34px 0 12px;
  font-size: 14px;
  background-size: 16px;
  background-position: right 10px center;
}

/* --- Composant .dd (dropdown JS custom pour cas avancés) --- */
.dd { position: relative; display: inline-block; }

.dd__trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: var(--control-h);
  padding: 0 14px;
  min-width: 210px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  font: 400 15px var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dd__trigger:hover { border-color: var(--ink-3); }
.dd__trigger[aria-expanded="true"],
.dd__trigger:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.dd__trigger:disabled {
  background: var(--surface-sunken);
  color: var(--ink-3);
  cursor: not-allowed;
}

.dd__value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd__value.is-placeholder { color: var(--ink-3); }

.dd__caret {
  flex: none;
  color: var(--ink-3);
  transition: transform 0.18s;
}
.dd__trigger[aria-expanded="true"] .dd__caret {
  transform: rotate(180deg);
  color: var(--primary);
}

.dd__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: 280px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.dd.is-open .dd__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dd__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-chip);
  font: 400 14px var(--font-sans);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s;
}
.dd__item:hover,
.dd__item.is-active { background: var(--surface-sunken); }
.dd__item.is-selected {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 500;
}
.dd__item[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}
.dd__item[aria-disabled="true"]:hover { background: transparent; }

.dd__tick {
  margin-left: auto;
  flex: none;
  color: var(--primary);
  opacity: 0;
}
.dd__item.is-selected .dd__tick { opacity: 1; }

.dd__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}

/* ============================================================
   Menu déroulant "A · Sélecteur simple" — conforme à la charte
   (Applique aux <select> natifs par défaut + classe .dd pour version JS)
   ============================================================ */

/* Variables spécifiques dropdowns si non déjà définies */
:root {
  --control-h: 44px;
  --r-control: 11px;
  --r-chip: 8px;
  --ring: 0 0 0 3px var(--primary-soft);
}

/* --- <select> natif : appliquer les mêmes règles que .dd__trigger --- */
select {
  height: var(--control-h);
  padding: 0 40px 0 14px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  font: 400 15px var(--font-sans);
  font-size: 15px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

select:hover:not(:disabled) {
  border-color: var(--ink-3);
}

select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23005E60' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

select:disabled {
  background-color: var(--surface-sunken);
  color: var(--ink-3);
  cursor: not-allowed;
  opacity: 1;
}

/* Version compacte pour tableaux et barres d'outils */
select.dd-compact,
.admin-table select {
  height: 38px;
  padding: 0 34px 0 12px;
  font-size: 14px;
  background-size: 16px;
  background-position: right 10px center;
}

/* --- Composant .dd (dropdown JS custom pour cas avancés) --- */
.dd { position: relative; display: inline-block; }

.dd__trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: var(--control-h);
  padding: 0 14px;
  min-width: 210px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  font: 400 15px var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dd__trigger:hover { border-color: var(--ink-3); }
.dd__trigger[aria-expanded="true"],
.dd__trigger:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.dd__trigger:disabled {
  background: var(--surface-sunken);
  color: var(--ink-3);
  cursor: not-allowed;
}

.dd__value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd__value.is-placeholder { color: var(--ink-3); }

.dd__caret {
  flex: none;
  color: var(--ink-3);
  transition: transform 0.18s;
}
.dd__trigger[aria-expanded="true"] .dd__caret {
  transform: rotate(180deg);
  color: var(--primary);
}

.dd__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: 280px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.dd.is-open .dd__panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dd__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-chip);
  font: 400 14px var(--font-sans);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s;
}
.dd__item:hover,
.dd__item.is-active { background: var(--surface-sunken); }
.dd__item.is-selected {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 500;
}
.dd__item[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}
.dd__item[aria-disabled="true"]:hover { background: transparent; }

.dd__tick {
  margin-left: auto;
  flex: none;
  color: var(--primary);
  opacity: 0;
}
.dd__item.is-selected .dd__tick { opacity: 1; }

.dd__meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}

/* Le dropdown doit pouvoir déborder de son container tableau */
.admin-table td { overflow: visible !important; }
.admin-table { overflow: visible !important; }

/* Aussi le wrapper */
#users-table-wrap,
#invitations-table-wrap { overflow: visible; }

/* Aligner chip company avec les btn-sm du header (même hauteur) */
.hdr-company-chip {
  height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.hdr-company-chip.is-clickable {
  cursor: pointer;
}

/* Les slots de dropdown doivent laisser le trigger remplir 100% */
#add-user-dd-slot .dd,
#add-role-dd-slot .dd {
  display: block;
  width: 100%;
}
#add-user-dd-slot .dd__trigger,
#add-role-dd-slot .dd__trigger {
  width: 100%;
  min-width: 0;
}

/* Autoriser le dropdown à déborder du modal-body */
.modal-body {
  overflow: visible !important;
}
.modal {
  overflow: visible !important;
}


/* Modales (deplace depuis admin.css pour etre partage) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--sp-4);
}
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  animation: modal-in 200ms ease-out;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-header {
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-title {
  font-size: 16px;
  font-weight: 600;
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.modal-body { padding: var(--sp-6); }
.modal-footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--line);
  background: var(--surface-sunken);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
}


/* Modale d'export (deplace depuis map.css pour etre partage) */
/* Export modale : 2 colonnes */
.export-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.export-column-title {
  margin-bottom: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  font-weight: 600;
}

/* Sur mobile : passage en 1 colonne */
@media (max-width: 640px) {
  .export-columns {
    grid-template-columns: 1fr;
  }
}
/* Modale export : hauteur fixe et identique pour les 2 colonnes,
   chacune avec son propre scroll interne. La modale entiere ne grossit pas. */
.export-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.export-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.export-layer-list,
.export-format-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 360px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

@media (max-width: 640px) {
  .export-columns {
    grid-template-columns: 1fr;
  }
  .export-layer-list,
  .export-format-grid {
    height: 240px;
  }
}
.export-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 100ms;
}
.export-checkbox-row:hover {
  background: var(--surface-sunken);
}
.export-checkbox-row input[type="checkbox"] {
  flex-shrink: 0;
}
.export-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Modale d'export : padding cohérent avec les autres modales */
#export-modal-root .modal {
  padding: 0;
}
#export-modal-root .modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#export-modal-root .modal-title {
  font-size: 16px;
  font-weight: 600;
}
#export-modal-root .modal-body {
  padding: 20px 24px;
}
#export-modal-root .modal-footer {
  padding: 12px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface-sunken);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
#export-modal-root .modal-close {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--ink-3);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
#export-modal-root .modal-close:hover {
  background: var(--surface-sunken);
  color: var(--ink);
}

/* Page profil : blocs QGIS */
.qgis-connection-block {
  padding: 16px;
  background: var(--primary-soft, #e5f0f0);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.qgis-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.qgis-info-table td {
  padding: 6px 0;
  vertical-align: middle;
}
.qgis-info-table td.label {
  color: var(--ink-3);
  min-width: 140px;
  padding-right: 12px;
}
.qgis-info-table code {
  background: var(--surface);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  margin-right: 8px;
}
.copy-btn {
  font-size: 11px;
  padding: 2px 8px;
}

/* ============================================================
   Point 12 — Correctifs responsive et tactiles
   Audit du 2026-08-08.

   Portée volontairement limitée aux petits écrans : les valeurs
   desktop, plus denses, restent inchangées. On corrige l'usage au
   pouce sans dégrader l'usage à la souris.
   ============================================================ */

@media (max-width: 640px) {

  /* ── 1. Zoom automatique d'iOS ──────────────────────────────
     Safari iOS zoome la page dès qu'un champ de moins de 16 px
     reçoit le focus, puis ne dézoome pas : la mise en page paraît
     cassée à chaque saisie. Les champs étaient à 14 px.
     C'est le correctif le plus visible de tout ce lot. */
  .input, input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="date"],
  input[type="datetime-local"], input[type="tel"], input[type="url"],
  select, textarea {
    font-size: 16px;
  }

  /* ── 2. Cibles tactiles ─────────────────────────────────────
     La recommandation d'accessibilité est 44 x 44 px. Les boutons
     étaient à 40 px, et 32 px en version « sm » — trop petits pour
     être visés de façon fiable en marchant sur un site. */
  .btn, .input, select {
    min-height: 44px;
  }
  .btn-sm {
    min-height: 40px;   /* actions secondaires : 40 px reste acceptable */
    font-size: 14px;
  }
  /* Les boutons purement iconographiques doivent rester carrés. */
  .btn-icon, .btn--icone { min-width: 44px; }

  /* Les éléments de navigation et de liste sont aussi des cibles. */
  .admin-nav-item, .nav-item, .menu__item, .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* ── 3. Débordement horizontal ──────────────────────────────
     Un enfant de flexbox refuse de rétrécir sous sa taille de
     contenu tant qu'on ne lui donne pas min-width:0. C'est la
     cause la plus fréquente de page qui défile latéralement, et
     elle est invisible tant qu'aucun contenu n'est assez long. */
  .card, .admin-main, .app-body, main, section, form { min-width: 0; }

  /* Les adresses e-mail et identifiants longs ne doivent pas
     élargir leur conteneur. */
  td, .muted, .cell-email, code { overflow-wrap: anywhere; }

  /* Débordement des tableaux.
     ATTENTION — ne PAS forcer ici `display:block` sur les tableaux ni
     `display:table` sur leurs thead. L'application bascule déjà ses tableaux
     d'administration en tuiles sous 900 px (admin.css), en masquant le thead.
     Une règle générique de ce type est plus spécifique que `.admin-table
     thead`, elle réaffiche donc l'en-tête sous forme de longue bande au-dessus
     des tuiles — régression constatée sur les onglets Membres, Projets et
     Entreprises le 2026-08-08.
     On se contente donc d'empêcher le débordement, sans toucher au display. */
  table { max-width: 100%; }

  /* ── 4. Confort de saisie ───────────────────────────────────
     Les libellés à 13 px sont à la limite du lisible en extérieur. */
  label { font-size: 14px; }
}

/* Écrans tactiles, quelle que soit la largeur : une tablette a de la
   place mais reste manipulée au doigt. */
@media (hover: none) and (pointer: coarse) {
  .btn, .input, select, .admin-nav-item, .nav-item { min-height: 44px; }
  /* Les actions qui n'apparaissaient qu'au survol sont traitées dans map.css,
     avec les vrais noms de classes de l'application. */
}

/* Sélecteur d'entreprise dans le volet mobile.
   Le sélecteur du header porte .hide-mobile ; sans ce relais, changer
   d'entreprise était impossible depuis un téléphone. */
.mobile-company-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.mobile-company-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 44px; padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); font: inherit; text-align: left;
  color: var(--ink); cursor: pointer;
}
.mobile-company-item:hover { background: var(--surface-sunken); }
.mobile-company-item.is-active {
  background: var(--primary-soft); border-color: var(--primary); color: var(--primary);
}
.mobile-company-item__nom   { font-weight: 600; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.mobile-company-item__role  { font-size: 11px; color: var(--ink-3); flex: none; }
.mobile-company-item__actif { font-size: 11px; font-weight: 600; color: var(--primary); flex: none; }

/* ── Mode hors ligne ─────────────────────────────────────────── */
/* Bandeau discret mais permanent : sur le terrain, on doit pouvoir constater
   d'un coup d'œil que ce qu'on lit n'est pas frais. Il est masqué par défaut
   et ne coûte rien tant que la connexion tient. */
#bandeau-hors-ligne {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  background: #212121;
  color: #FAFAF7;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
.est-hors-ligne #bandeau-hors-ligne { display: block; }

/* Les boutons d'écriture restent ACTIFS hors ligne.
   Une version précédente les neutralisait, ce qui contredisait le besoin : un
   rapport de chantier se remplit justement là où il n'y a pas de réseau. Les
   saisies partent en file d'attente et sont envoyées au retour du signal.
   Seul le bandeau informe de l'état ; il n'empêche rien. */

/* ══════════════════════════════════════════════════════════════
   Zones sûres iOS et hauteurs de fenêtre
   ══════════════════════════════════════════════════════════════
   Depuis l'activation de `viewport-fit=cover` — indispensable à une
   application installée, sans quoi iOS laisse des bandes blanches autour de
   l'encoche —, le contenu s'étend jusqu'aux bords physiques de l'écran. Il
   faut donc rendre explicitement la place que prennent la barre d'état en haut
   et l'indicateur d'accueil en bas. Sans cela, l'en-tête passe SOUS l'heure et
   la batterie, et les menus deviennent illisibles.

   `body` ne portait que les marges gauche et droite : c'est le haut qui
   manquait. On le pose sur l'en-tête lui-même, qui est collant, plutôt que sur
   `body` — un remplissage sur `body` décalerait tout le document et laisserait
   une bande vide sous l'en-tête au défilement. */

.app-header {
  padding-top: env(safe-area-inset-top, 0px);
  /* La hauteur suit : sinon le contenu de l'en-tête est comprimé de la
     hauteur de l'encoche au lieu d'être repoussé. */
  height: calc(56px + env(safe-area-inset-top, 0px));
}

/* Repère commun : hauteur réelle de l'en-tête, encoche comprise. Tout élément
   positionné « sous l'en-tête » doit s'y référer, faute de quoi il remonte de
   la hauteur de l'encoche et chevauche les menus. */
:root { --header-total: calc(var(--header-height) + env(safe-area-inset-top, 0px)); }

@media (max-width: 640px) {
  .hdr-notif-dropdown {
    top: var(--header-total);
    /* 100dvh : sur iOS, 100dvh compte la barre d'outils de Safari comme si elle
       n'existait pas, et le panneau déborde sous l'écran. */
    max-height: calc(100dvh - var(--header-total) - 16px);
  }
}

/* Le tiroir de navigation mobile part sous l'en-tête, pas sous l'encoche. */
.hdr-drawer, .nav-drawer, .menu-mobile {
  top: var(--header-total);
  max-height: calc(100dvh - var(--header-total));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Le dernier élément atteignable d'une page défilante doit rester au-dessus de
   l'indicateur d'accueil, sinon on ne peut pas le toucher. */
@media (max-width: 640px) {
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Compteur de saisies en attente d'envoi. Discret mais permanent : tant qu'il
   reste quelque chose en file, l'utilisateur doit le savoir — une saisie qu'on
   croit envoyée et qui dort dans un téléphone éteint est une saisie perdue. */
#file-attente-badge {
  position: fixed;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 9998;
  display: none;
  padding: 7px 12px;
  border-radius: 999px;
  background: #C8FF08;
  color: #212121;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.est-hors-ligne #file-attente-badge { bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }