/**
 * Styles CSS - Extension CRM Odoo
 * Design Professionnel & Moderne
 */

/* ========================================
   RESET & BASE
======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Palette moderne */
  --primary: #4F46E5;
  --primary-dark: #4338CA;
  --primary-light: #818CF8;
  --secondary: #0F172A;
  --accent: #06B6D4;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;

  /* Surfaces */
  --bg-primary: #F8FAFC;
  --bg-secondary: #FFFFFF;
  --surface: #FFFFFF;

  /* Texte */
  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --text-tertiary: #94A3B8;

  /* Bordures */
  --border-light: #E2E8F0;
  --border-medium: #CBD5E1;

  /* Ombres modernes */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

  /* Espacements */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Transitions */
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   VARIABLES RESPONSIVES
   Redéfinition des espacements selon l'écran
======================================== */
/* Mobile + Tablettes (< 1280px) - Espacements réduits */
@media (max-width: 1280px) {
  :root {
    --space-xs: 0.2rem;
    --space-sm: 0.375rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
  }
}

/* Desktop (1281px - 1599px) - Espacements modérés */
@media (min-width: 1281px) and (max-width: 1199px) {
  :root {
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.875rem;
    --space-lg: 1.25rem;
    --space-xl: 1.75rem;
    --space-2xl: 2.5rem;
  }
}

/* Desktop (1280px - 1599px) - Espacements légèrement réduits */
@media (min-width: 1280px) and (max-width: 1599px) {
  :root {
    --space-sm: 0.45rem;
    --space-md: 0.9rem;
    --space-lg: 1.35rem;
    --space-xl: 1.8rem;
    --space-2xl: 2.7rem;
  }
}

/* Grands écrans (2048px+) - Espacements augmentés */
@media (min-width: 2048px) {
  :root {
    --space-xs: 0.35rem;
    --space-sm: 0.65rem;
    --space-md: 1.25rem;
    --space-lg: 1.85rem;
    --space-xl: 2.5rem;
    --space-2xl: 3.75rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.65rem;
    --radius-lg: 0.9rem;
    --radius-xl: 1.25rem;
  }
}

/* Écrans 4K (2560px+) - Espacements encore plus grands */
@media (min-width: 2560px) {
  :root {
    --space-xs: 0.4rem;
    --space-sm: 0.75rem;
    --space-md: 1.5rem;
    --space-lg: 2.25rem;
    --space-xl: 3rem;
    --space-2xl: 4.5rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
  }
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   TYPOGRAPHY
======================================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

.text-muted {
  color: var(--text-secondary);
}

.text-tertiary {
  color: var(--text-tertiary);
}

/* ========================================
   BUTTONS
======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

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

.btn-primary {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-primary);
  border-color: var(--border-medium);
}

.btn-accent {
  background: var(--accent);
  color: white;
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.813rem;
}

.btn-block {
  width: 100%;
}

/* ========================================
   LOGIN PAGE
======================================== */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-lg);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.login-container {
  width: 100%;
  max-width: 420px;
}

.login-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2xl);
}

.login-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.login-header h1 {
  color: var(--primary);
  margin-bottom: var(--space-sm);
}

.login-info {
  margin-top: var(--space-xl);
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* ========================================
   DASHBOARD LAYOUT
======================================== */
.dashboard {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header */
.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
  padding: 0.5rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1100; /* Au-dessus de Leaflet (qui utilise 400-1000) */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.95);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0.25rem;
  gap: 0.25rem;
}

/* Hamburger Menu */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 101;
  transition: var(--transition);
  /* iOS Safari tactile fixes */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
}

.hamburger span {
  width: 100%;
  height: 3px;
  background: var(--primary);
  border-radius: 10px;
  transition: var(--transition);
  transform-origin: center;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.logo {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
}

/* ========================================
   WIDGET MÉTÉO - Styles anciens (conservés pour compatibilité)
======================================== */
.weather-current {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

/* Badge catégorie météo coloré */
.weather-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.weather-desc {
  font-size: 0.813rem;
  color: var(--text-secondary);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-info {
  display: none;
  flex-direction: column;
  align-items: flex-end;
}

.user-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-primary);
}

.user-role {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Main Content */
.main-content {
  display: flex;
  flex: 1;
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
}

/* Sidebar */
.sidebar {
  position: fixed;
  top: 40px;
  left: -280px;
  bottom: 0;
  width: 280px;
  background: var(--surface);
  border-right: 1px solid var(--border-light);
  padding: var(--space-lg);
  transition: left 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  -webkit-overflow-scrolling: touch;
}

.sidebar.open {
  left: 0 !important;
}

/* Overlay pour fermer le menu en cliquant à l'extérieur */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  /* iOS Safari tactile fixes */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}

.sidebar-overlay.active {
  display: block;
}

/* Forcer les contrôles Leaflet à passer sous la sidebar en mobile */
@media (max-width: 1280px) {
  .leaflet-control-zoom,
  .leaflet-control-attribution,
  .leaflet-control-container {
    z-index: 500 !important;
  }

  .leaflet-top,
  .leaflet-bottom {
    z-index: 500 !important;
  }

  /* Quand la sidebar est ouverte, cacher les contrôles Leaflet pour éviter la superposition */
  .sidebar.open ~ .content .leaflet-control-zoom,
  .sidebar.open ~ .content .leaflet-control-attribution {
    opacity: 0.3;
    pointer-events: none;
  }
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: var(--transition);
  white-space: nowrap;
  font-size: 0.938rem;
  font-weight: 500;
}

.nav-item .nav-icon {
  font-size: 1.25rem;
  width: 24px;
  text-align: center;
}

.nav-item:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--primary);
  color: white;
}

/* Content */
.content {
  flex: 1;
  padding: var(--space-lg);
  max-width: 100%;
  min-width: 0; /* Force le flex item à respecter les limites du conteneur */
  overflow-x: hidden; /* Empêche le débordement horizontal */
}

.content-section {
  display: none;
}

.content-section.active {
  display: block;
}

.content-section h2 {
  margin-bottom: var(--space-lg);
  color: var(--text-primary);
}

/* ========================================
   SEARCH BAR
======================================== */
.search-container {
  margin-bottom: 1rem; /* Réduit de 2rem à 1rem - OPTIMISÉ v2.2.0 */
}

.search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem; /* Réduit de 1rem à 0.625rem - OPTIMISÉ */
  align-items: center;
}

.search-input-wrapper {
  flex: 1;
  min-width: 250px;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  font-size: 0.938rem;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: var(--transition);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 1.125rem;
}

.search-clear-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.search-clear-btn:hover {
  background: var(--border-light);
  color: var(--text-primary);
}

/* ========================================
   CLIENT CARDS
======================================== */
#searchResults {
  display: grid;
  gap: var(--space-lg);
}

.client-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: var(--transition);
  cursor: pointer;
}

.client-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.client-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-light);
}

.client-title {
  flex: 1;
}

.client-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.client-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.client-status.active {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success);
}

.client-status.archived {
  background: rgba(245, 158, 11, 0.1);
  color: var(--warning);
}

.client-actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.client-info {
  display: grid;
  gap: var(--space-lg);
}

.info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.info-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-top: 2px;
}

.info-content {
  flex: 1;
  min-width: 0;
}

.info-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.info-value {
  font-size: 0.938rem;
  color: var(--text-primary);
  word-break: break-word;
}

.info-value a {
  color: var(--primary);
  text-decoration: none;
}

.info-value a:hover {
  text-decoration: underline;
}

/* ========================================
   MAP
======================================== */
#map {
  height: calc(100vh - 230px);
  min-height: 400px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  margin-bottom: var(--space-lg);
  overflow: hidden;
}

/* ========================================
   CLIENT POPUP (Leaflet Map)
======================================== */
.client-popup {
  font-size: 0.75rem;
  padding: 0.5rem;
  line-height: 1.4;
  width: 100%;
}

.popup-client-name {
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: #333;
}

.popup-badges {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.popup-badge {
  flex: 1;
  font-size: 0.7rem;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  text-align: center;
}

.popup-badge.badge-active {
  background: #d4edda;
}

.popup-badge.badge-archived {
  background: #fff3cd;
}

.popup-badge.badge-stage {
  background: #E8F4F8;
  color: #0066CC;
  font-weight: 600;
}

.popup-source {
  font-size: 0.7rem;
  margin-bottom: 0.5rem;
  padding: 0.4rem;
  background: #FFF9E6;
  border-left: 3px solid #FFB84D;
  border-radius: 4px;
}

.popup-details {
  font-size: 0.7rem;
  color: #555;
}

.popup-detail-row {
  margin: 0.25rem 0;
  word-wrap: break-word;
}

.popup-volets {
  margin-top: 0.6rem;
  padding: 0.5rem;
  background: #F5F1F3;
  border-radius: 5px;
  font-size: 0.7rem;
  color: #714B67;
}

.popup-volets-title {
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.popup-volet-row {
  margin: 0.2rem 0;
}

.popup-actions {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.popup-nav-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}

.popup-btn {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none !important;
  text-align: center;
  border-radius: 6px;
  display: block;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  color: white !important;
}

.popup-btn:hover {
  opacity: 0.85;
  color: white !important;
}

.popup-btn-waze {
  background: #34C759 !important;
  color: white !important;
}

.popup-btn-maps {
  background: #007AFF !important;
  color: white !important;
}

.popup-btn-success {
  background: #27AE60;
  color: white;
}

.popup-btn-primary {
  background: var(--primary);
  color: white;
}

.popup-btn-full {
  width: 100%;
}

/* ========================================
   CALENDAR
======================================== */
#calendar {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

/* ========================================
   LOADING
======================================== */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  gap: var(--space-lg);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-light);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========================================
   MESSAGES
======================================== */
.error-message,
.success-message {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  margin-bottom: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.error-message {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

.success-message {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: var(--success);
}

/* ========================================
   UTILITIES
======================================== */
.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

/* ========================================
   RESPONSIVE - TABLET
======================================== */
@media (min-width: 1281px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.875rem; }

  .user-info {
    display: flex;
  }

  .hamburger {
    display: none;
  }

  .sidebar {
    position: relative;
    top: auto;
    left: 0;
    width: 240px;
    border-bottom: none;
    border-right: 1px solid var(--border-light);
    padding: var(--space-lg) var(--space-md);
    box-shadow: none;
  }

  .sidebar-overlay {
    display: none !important;
  }

  .nav-menu {
    flex-direction: column;
  }

  .nav-item {
    justify-content: flex-start;
  }

  #map {
    height: calc(100vh - 210px);
  }

  .client-info {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
   RESPONSIVE - DESKTOP
======================================== */
@media (min-width: 1280px) {
  /* Header équilibré pour desktop/laptop */
  .header {
    padding: 0.4rem 0.75rem;
  }

  .header-content {
    padding: 0 0.5rem;
    gap: 0.5rem;
  }

  .hamburger {
    width: 24px;
    height: 24px;
    min-width: 28px;
    min-height: 28px;
  }

  .hamburger span {
    height: 2px;
  }

  .logo {
    font-size: 0.95rem;
    gap: 0.35rem;
  }

  .logo img {
    height: 24px;
  }

  /* Widget météo compact sur desktop */
  .weather-widget-extended {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    gap: 0.35rem;
  }

  .weather-widget-extended .weather-icon {
    font-size: 1rem;
  }

  .weather-widget-extended .weather-temp {
    font-size: 0.85rem;
  }

  /* Bouton déconnexion compact */
  .user-menu .btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
  }

  .sidebar {
    top: 42px;
  }

  .content {
    padding: var(--space-xl);
  }

  #map {
    height: calc(100vh - 120px);
  }

  #searchResults {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1440px) {
  #searchResults {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========================================
   MAP MARKERS ANIMATION
======================================== */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.88;
  }
}

/* ========================================
   MAP POPUPS
======================================== */
.leaflet-popup-content {
  min-width: 280px;
  max-width: 350px;
  padding: 0 !important;
  margin: 0 !important;
}

.leaflet-popup-content-wrapper {
  padding: 0 !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.popup-content {
  padding: 1rem;
}

/* ========================================
   DAY ROUTE POPUPS (Parcours jour)
======================================== */
.day-route-popup-container .leaflet-popup-content {
  min-width: 280px;
  max-width: 400px;
}

.day-route-popup {
  padding: 1rem;
  font-size: 0.9rem;
}

.day-route-popup-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  border-bottom: 2px solid var(--primary);
  padding-bottom: 0.5rem;
}

.day-route-popup-details {
  margin: 0.5rem 0;
}

.day-route-popup-row {
  margin: 0.3rem 0;
  color: var(--text-secondary);
}

.day-route-popup .popup-nav-buttons {
  margin-top: 0.75rem;
}

.popup-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary);
}

.popup-info {
  margin: 0.75rem 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

.popup-info-row {
  margin-bottom: 0.75rem;
  color: var(--text-secondary);
}

.popup-info-row:last-child {
  margin-bottom: 0;
}

.popup-info-row strong {
  color: var(--text-primary);
  font-weight: 600;
  display: inline-block;
  margin-right: 0.25rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.active {
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}

.status-badge.archived {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warning);
}

.popup-btn {
  width: 100%;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.popup-btn-primary {
  background: var(--primary);
  color: white;
}

.popup-btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: var(--shadow-md);
}

.popup-btn-success {
  background: var(--success);
  color: white;
}

.popup-btn-success:hover {
  background: #059669;
  box-shadow: var(--shadow-md);
}

/* ========================================
   KANBAN BOARD (Opportunités) - OPTIMISÉ v2.3.0
======================================== */
.kanban-board {
  display: flex;
  gap: 0.4rem; /* Encore réduit pour compacité maximale */
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: var(--space-md);
  min-height: 600px;
}

.kanban-column {
  flex: 0 0 192px; /* 240px - 20% = 192px (ULTRA COMPACT) */
  background: var(--bg-primary);
  border-radius: var(--radius-sm); /* Plus petit pour gagner espace */
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  max-height: 84vh; /* Encore augmenté */
  transition: all 0.3s ease;
}

.kanban-column-header {
  padding: 0.5rem; /* Encore réduit */
  border-bottom: 2px solid var(--border-medium);
  background: var(--surface);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
  cursor: pointer; /* Cliquable pour toggle collapsed */
}

.kanban-column-title {
  font-size: 0.7rem; /* MINI pour gagner espace */
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

.kanban-column-count {
  background: var(--primary);
  color: white;
  border-radius: 9999px;
  padding: 0.1rem 0.3rem; /* Plus petit */
  font-size: 0.6rem; /* MINI */
  font-weight: 600;
  min-width: 18px;
  text-align: center;
}

.kanban-column-total {
  font-size: 0.65rem; /* MINI */
  color: var(--text-secondary);
  margin-top: 0.25rem;
  font-weight: 600;
}

.kanban-column-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem; /* Plus compact */
  display: flex;
  flex-direction: column;
  gap: 0.4rem; /* Plus compact */
}

/* ========================================
   COLONNES COLLAPSED (AUTO pour colonnes vides)
======================================== */
.kanban-column.collapsed {
  flex: 0 0 24px; /* ULTRA-COMPACT : 90% d'économie d'espace (240px -> 24px) */
  min-width: 24px;
  transition: all 0.3s ease;
  opacity: 0.3; /* Quasi invisible */
  background: var(--border-medium);
  border-left: 2px solid var(--border-light);
  border-right: 2px solid var(--border-light);
}

.kanban-column.collapsed:hover {
  opacity: 0.8;
  background: var(--text-tertiary);
  box-shadow: 0 0 0 1px var(--border-medium);
}

.kanban-column.collapsed .kanban-column-header {
  padding: 0.375rem 0.1875rem;
  border-bottom: none;
}

.kanban-column.collapsed .kanban-column-body {
  display: none;
}

.kanban-column.collapsed .kanban-column-title {
  flex-direction: row; /* Nom + counter côte à côte verticalement */
  gap: 0.125rem;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  font-size: 0.688rem;
  align-items: center;
  color: var(--text-primary);
}

.kanban-column.collapsed .kanban-column-count {
  font-size: 0.625rem;
  padding: 0.0625rem 0.1875rem;
  min-width: 12px;
  height: auto;
  writing-mode: horizontal-tb; /* Counter horizontal */
  text-orientation: upright;
  transform: rotate(0deg);
  background: var(--text-tertiary);
  color: white;
}

.kanban-column.collapsed .kanban-column-total {
  display: none;
}

/* Cartes d'opportunités - MICRO COMPACTES */
.lead-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 3px;
  padding: 0.25rem; /* MINI */
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.lead-card:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}

.lead-card.archived {
  opacity: 0.6;
  border-color: var(--warning);
}

.lead-card-header {
  margin-bottom: 0.15rem;
}

.lead-card-name {
  font-size: 0.65rem; /* MINI */
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.05rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-card-partner {
  font-size: 0.55rem; /* MINI */
  color: var(--text-secondary);
  margin-bottom: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-card-revenue {
  font-size: 0.7rem; /* MINI */
  font-weight: 700;
  color: var(--success);
  margin-bottom: 0.15rem;
}

.lead-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  margin-top: 0.15rem;
  padding-top: 0.15rem;
  border-top: 1px solid var(--border-light);
}

.lead-card-info-row {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.55rem; /* MINI */
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-card-info-row span:first-child {
  font-size: 0.65rem; /* Emoji plus petit */
  flex-shrink: 0;
}

.lead-card-footer {
  margin-top: 0.15rem;
  padding-top: 0.15rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.15rem;
}

.lead-card-probability {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  padding: 0.08rem 0.2rem;
  font-size: 0.55rem; /* MINI */
  font-weight: 600;
  border-radius: 9999px;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
  flex-shrink: 0;
}

.lead-card-user {
  font-size: 0.55rem; /* MINI */
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-badge {
  display: inline-block;
  padding: 0.05rem 0.2rem;
  font-size: 0.55rem; /* MINI */
  font-weight: 500;
  border-radius: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 85px;
}

/* Couleurs par colonne */
.kanban-column[data-stage="Appel 1"] .kanban-column-count {
  background: #3B82F6;
}

.kanban-column[data-stage="Appel 2"] .kanban-column-count {
  background: #8B5CF6;
}

.kanban-column[data-stage="Appel 3"] .kanban-column-count {
  background: #EC4899;
}

.kanban-column[data-stage="RDV"] .kanban-column-count {
  background: #F59E0B;
}

.kanban-column[data-stage="Devis"] .kanban-column-count {
  background: #10B981;
}

.kanban-column[data-stage="Relance"] .kanban-column-count {
  background: #EF4444;
}

/* État vide */
.kanban-empty {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-tertiary);
  font-size: 0.875rem;
}

/* Masquer automatiquement les colonnes vides */
.kanban-column-empty {
  display: none;
}

/* Option: afficher les colonnes vides en mode compacté (optionnel) */
/*
.kanban-column-empty {
  opacity: 0.5;
  max-width: 100px;
}
.kanban-column-empty .kanban-column-body {
  display: none;
}
*/

/* ========================================
   TOURNÉE MODULE
======================================== */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem; /* Réduit de 1.5rem à 0.5rem - OPTIMISÉ v2.2.0 */
  flex-wrap: wrap;
  gap: var(--space-sm); /* Réduit de md à sm */
}

.section-header h2 {
  margin-bottom: 0;
  font-size: 1.25rem; /* Réduit de 1.5rem - OPTIMISÉ */
}

.tour-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.summary-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.summary-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-sm);
}

.summary-value {
  font-size: 1rem;
  color: var(--text-primary);
  font-weight: 500;
}

.appointment-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-lg);
  align-items: start;
  transition: var(--transition);
}

.appointment-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.appt-time {
  font-size: 0.875rem;
  color: var(--primary);
  white-space: nowrap;
}

.appt-info {
  min-width: 0;
}

.appt-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.appt-client {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: var(--space-xs);
}

.client-name {
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.client-phone {
  font-size: 0.813rem;
  color: var(--text-tertiary);
}

.appt-location {
  font-size: 0.813rem;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.appt-distance {
  text-align: right;
  font-size: 0.875rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.appt-distance .loading {
  color: var(--text-tertiary);
  font-style: italic;
}

.empty-state {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-tertiary);
}

.empty-state p {
  font-size: 1rem;
  margin: 0;
}

/* ========================================
   MODAL
======================================== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  animation: fadeIn 0.2s ease;
}

/* Modal sans overlay (pour laisser la carte visible) */
.modal.modal-no-overlay {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none; /* Permettre clics sur la carte */
}

.modal.modal-no-overlay .modal-content {
  pointer-events: all; /* Reactiver clics sur le contenu du modal */
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

.modal-large {
  max-width: 900px;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xl);
  border-bottom: 1px solid var(--border-light);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.modal-close:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-xl);
}

.modal-footer {
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-md);
}

/* ========================================
   FORMULAIRES
======================================== */
.form-group {
  margin-bottom: var(--space-lg);
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.form-label-small {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
  display: block;
}

.form-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-family: inherit;
  transition: var(--transition);
  background: var(--surface);
  color: var(--text-primary);
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.form-input::placeholder {
  color: var(--text-tertiary);
}

.form-help {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

.form-row {
  display: flex;
  gap: var(--space-md);
}

/* ========================================
   WEATHER WIDGET ÉTENDU (Responsive)
======================================== */
.weather-widget-extended {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.5rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius-md);
  transition: var(--transition);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 1000; /* Au-dessus de la carte */
}

.weather-widget-extended:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Météo du jour (toujours visible) */
.weather-today {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.weather-day-label {
  display: none; /* Caché par défaut, visible sur grand écran */
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.weather-emoji {
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.weather-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.weather-temp {
  font-size: 0.8rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.weather-location {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

/* Prévisions inline (caché par défaut) */
.weather-forecast-inline {
  display: none;
}

/* Tooltips météo (cachés par défaut sur petits écrans) */
.today-tooltip,
.forecast-tooltip {
  display: none;
}

/* ========================================
   WEATHER - GRAND ÉCRAN (14-16"+, ~1400px+)
   Version normale avec prévisions pour laptops
======================================== */
@media (min-width: 1400px) {
  .weather-widget-extended {
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
  }

  .weather-day-label {
    display: block;
    position: absolute;
    top: -0.4rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.25);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.55rem;
    font-weight: 700;
  }

  .weather-today {
    padding-top: 0.35rem;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    position: relative;
  }

  .weather-today .weather-info {
    align-items: center;
  }

  /* Emoji météo taille moyenne pour laptop */
  .weather-today .weather-emoji {
    font-size: 1.5rem;
  }

  /* Température taille moyenne */
  .weather-today .weather-temp {
    font-size: 0.9rem;
  }

  .weather-location {
    display: none;
  }

  /* Tooltip pour aujourd'hui */
  .today-tooltip {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    color: var(--text-primary);
    padding: 1rem;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
  }

  .weather-today:hover .today-tooltip {
    opacity: 1;
    visibility: visible;
  }

  /* Afficher les prévisions sur laptop 14-16" */
  .weather-forecast-inline {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    padding-left: 0.5rem;
    border-left: 2px solid rgba(255, 255, 255, 0.3);
  }

  /* Chaque jour de prévision - taille moyenne pour laptop */
  .forecast-day-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem 0.4rem;
    border-radius: var(--radius-sm);
    min-width: 45px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
  }

  .forecast-day-inline:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
  }

  /* Nom du jour compact */
  .forecast-day-name {
    font-size: 0.55rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  /* Emoji météo taille moyenne */
  .forecast-day-emoji {
    font-size: 1.3rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  }

  .forecast-day-temps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
  }

  /* Températures compactes */
  .forecast-temp-max {
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
  }

  .forecast-temp-min {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
  }

  /* Tooltip au survol - apparaît EN DESSOUS - TAILLE AGRANDIE */
  .forecast-tooltip {
    display: block;
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface);
    color: var(--text-primary);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    min-width: 340px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
  }

  /* Flèche pointant vers le haut */
  .forecast-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-bottom-color: var(--surface);
  }

  .forecast-day-inline:hover .forecast-tooltip {
    opacity: 1;
    visibility: visible;
  }

  .tooltip-header {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .tooltip-header > span:first-child {
    font-size: 1.5rem;
  }

  .tooltip-temp-range {
    margin-left: auto;
    font-size: 1rem;
    color: var(--primary);
    font-weight: 700;
  }

  /* Évolution par créneaux horaires */
  .tooltip-evolution {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
  }

  .tooltip-slot {
    display: grid;
    grid-template-columns: 100px 50px 55px 1fr;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-primary);
    border-radius: 8px;
  }

  .slot-period {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
  }

  /* Emoji météo GRAND dans le tooltip */
  .slot-emoji {
    font-size: 2rem;
    text-align: center;
  }

  .slot-temp {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--text-primary);
    text-align: center;
  }

  .slot-details {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: right;
  }

  /* Lever/coucher du soleil */
  .tooltip-sun {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 0.6rem 0;
    margin-bottom: 0.5rem;
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 50%, #fed7aa 100%);
    border-radius: 8px;
  }

  .sun-item {
    font-size: 1.1rem;
    font-weight: 600;
    color: #92400e;
  }

  /* Résumé en bas du tooltip */
  .tooltip-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
  }

  .tooltip-summary span {
    white-space: nowrap;
  }
}

/* ========================================
   WEATHER - TRÈS GRAND ÉCRAN (1920px+)
======================================== */
@media (min-width: 1920px) {
  .weather-widget-extended {
    gap: 1.25rem;
    padding: 0.75rem 1.5rem;
  }

  .weather-today {
    min-width: 70px;
  }

  .weather-emoji {
    font-size: 2.25rem;
  }

  .forecast-day-inline {
    min-width: 65px;
    padding: 0.5rem 0.75rem;
  }

  .forecast-day-emoji {
    font-size: 1.6rem;
  }

  .forecast-temp-max {
    font-size: 0.9rem;
  }
}

/* ========================================
   WEATHER - ÉCRANS MOYENS (tablettes/laptops)
======================================== */
@media (max-width: 1399px) {
  .weather-widget-extended {
    padding: 0.4rem 0.75rem;
    gap: 0.5rem;
  }

  .weather-today {
    flex-direction: row;
    gap: 0.5rem;
  }

  .weather-day-label {
    display: none !important;
  }

  .weather-emoji {
    font-size: 1.5rem;
  }

  .weather-temp {
    font-size: 0.875rem;
  }

  .weather-forecast-inline {
    display: none !important;
  }
}

/* ========================================
   MOBILE - Zone tactile agrandie (< 1280px)
======================================== */
@media (max-width: 1279px) {
  /* Hamburger avec zone tactile Apple-compliant sur mobile/tablette */
  .hamburger {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ========================================
   WEATHER - PETITS ÉCRANS (< 768px)
======================================== */
@media (max-width: 768px) {
  .weather-widget-extended {
    padding: 0.3rem 0.5rem;
    gap: 0.35rem;
  }

  .weather-today {
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
  }

  .weather-emoji {
    font-size: 1.25rem;
  }

  .weather-info {
    gap: 0;
  }

  .weather-temp {
    font-size: 0.75rem;
  }

  .weather-location {
    display: none !important;
  }
}

/* ========================================
   WEATHER - TRÈS PETITS ÉCRANS (< 480px)
======================================== */
@media (max-width: 480px) {
  .weather-widget-extended {
    padding: 0.25rem 0.4rem;
    gap: 0.25rem;
    border-radius: var(--radius-md);
  }

  .weather-today {
    gap: 0.25rem;
  }

  .weather-emoji {
    font-size: 1.1rem;
  }

  .weather-temp {
    font-size: 0.7rem;
  }

  .weather-info {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .weather-location {
    display: none !important;
  }
}

/* ========================================
   KANBAN - BOUTONS D'ACTION LEADS
======================================== */
.lead-card-actions {
  margin-top: 0.3rem;
  display: flex;
  gap: 0.15rem;
  flex-wrap: wrap;
}

.lead-action-btn {
  padding: 0.15rem 0.3rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 2px;
  font-size: 0.8rem; /* Emoji plus petit */
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
}

.lead-action-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.lead-action-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.lead-action-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
}

/* Couleurs spécifiques par type d'action */
.lead-action-btn[title*="Appeler"]:hover {
  background: #dcfce7;
  border-color: #10B981;
}

.lead-action-btn[title*="email"]:hover {
  background: #dbeafe;
  border-color: #3B82F6;
}

.lead-action-btn[title*="Odoo"]:hover {
  background: #fef3c7;
  border-color: #F59E0B;
}

/* ========================================
   FILTRES PUBLIPOSTAGE RESPONSIVE
======================================== */
/* Mobile (< 768px) : Tout en colonne */
@media (max-width: 1280px) {
  .publipostage-filters-container {
    padding: 0.75rem !important;
  }

  .filters-header strong {
    font-size: 0.85rem !important;
  }

  .filter-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  .filter-row-1,
  .filter-row-2,
  .filter-row-3 {
    grid-template-columns: 1fr !important;
  }

  .mobile-hide {
    display: none !important;
  }

  .filter-row label {
    justify-content: center;
    padding: 0.5rem !important;
  }

  .form-input {
    font-size: 0.85rem !important;
    width: 100% !important;
  }

  #publipostageResetFiltersBtn {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
  }
}

/* Tablette (768px - 1023px) : 2 colonnes */
@media (min-width: 1281px) and (max-width: 1199px) {
  .filter-row-1 {
    grid-template-columns: 2fr 1fr !important;
  }

  .filter-row-1 label {
    grid-column: 1 / -1;
  }

  .filter-row-2,
  .filter-row-3 {
    grid-template-columns: 1fr 1fr !important;
  }

  .filter-row-3 > div:first-child {
    grid-column: 1 / -1;
  }
}

/* ========================================
   APPAREILS TACTILES (smartphones, tablettes)
   Augmente les zones de clic et désactive les hover
======================================== */
@media (hover: none) and (pointer: coarse) {
  /* Boutons plus grands pour les doigts (min 44px recommandé par Apple/Google) */
  .btn,
  button {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.75rem 1.25rem !important;
  }

  .btn-sm {
    min-height: 38px !important;
    min-width: 38px !important;
    padding: 0.5rem 1rem !important;
  }

  /* Liens de navigation plus grands */
  .nav-item {
    min-height: 48px !important;
    padding: 1rem 1.25rem !important;
  }

  /* Checkboxes et radios plus grands */
  input[type="checkbox"],
  input[type="radio"] {
    width: 24px !important;
    height: 24px !important;
    cursor: pointer;
  }

  /* Inputs plus grands */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  input[type="number"],
  select,
  textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* Évite le zoom auto sur iOS */
  }

  /* Désactiver les effets hover */
  .btn:hover,
  .nav-item:hover,
  .kanban-card:hover,
  .client-card:hover {
    transform: none !important;
  }

  /* Marqueurs carte plus grands */
  .custom-marker div {
    min-width: 28px !important;
    min-height: 28px !important;
  }

  /* Popups carte scroll-friendly */
  .leaflet-popup-content {
    max-height: 50vh !important;
    overflow-y: auto !important;
  }

  /* Améliorer le drag & drop Kanban */
  .kanban-card {
    touch-action: pan-y !important;
  }

  .kanban-column {
    touch-action: pan-x pan-y !important;
  }

  .kanban-column-body {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Espacement accru entre éléments cliquables */
  .popup-actions {
    gap: 0.75rem !important;
  }

  .popup-btn {
    padding: 0.75rem 1rem !important;
    min-height: 44px !important;
  }

  /* Calendrier - boutons plus grands */
  .fc .fc-button {
    min-height: 40px !important;
    padding: 0.5rem 0.75rem !important;
  }

  /* Événements calendrier plus faciles à toucher */
  .fc .fc-event {
    min-height: 32px !important;
    padding: 0.5rem !important;
  }
}

/* Écrans tactiles avec pointeur fin (stylet) - moins de modifications */
@media (hover: none) and (pointer: fine) {
  .btn,
  button {
    min-height: 36px !important;
  }

  input[type="text"],
  input[type="email"],
  select {
    font-size: 16px !important; /* Évite zoom iOS */
  }
}

/* ========================================
   PRINT - OPTIMISÉ POUR IMPRESSION
======================================== */
@media print {
  /* === ÉLÉMENTS MASQUÉS === */
  .header,
  .sidebar,
  .sidebar-overlay,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-action,
  .search-container,
  .hamburger,
  .weather-widget-extended,
  .fc-toolbar,
  .leaflet-control-zoom,
  .leaflet-control-attribution,
  .modal,
  .modal-backdrop,
  .tooltip,
  .popover,
  .dropdown-menu,
  .notification,
  .loading-spinner,
  #map,
  .map-container,
  .filters-container,
  .publipostage-filters-container,
  button:not(.print-visible) {
    display: none !important;
  }

  /* === MISE EN PAGE GÉNÉRALE === */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html, body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12pt !important;
    line-height: 1.4 !important;
    color: #000 !important;
    background: #fff !important;
  }

  .content {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .container {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* === TYPOGRAPHIE === */
  h1 {
    font-size: 18pt !important;
    margin-bottom: 12pt !important;
    color: #000 !important;
    page-break-after: avoid !important;
  }

  h2 {
    font-size: 16pt !important;
    margin-bottom: 10pt !important;
    color: #000 !important;
    page-break-after: avoid !important;
  }

  h3 {
    font-size: 14pt !important;
    margin-bottom: 8pt !important;
    color: #000 !important;
    page-break-after: avoid !important;
  }

  h4, h5, h6 {
    font-size: 12pt !important;
    margin-bottom: 6pt !important;
    color: #000 !important;
    page-break-after: avoid !important;
  }

  p {
    font-size: 11pt !important;
    margin-bottom: 8pt !important;
    orphans: 3 !important;
    widows: 3 !important;
  }

  /* === LIENS - AFFICHER L'URL === */
  a {
    color: #000 !important;
    text-decoration: underline !important;
  }

  a[href^="http"]:after,
  a[href^="https"]:after {
    content: " (" attr(href) ")" !important;
    font-size: 9pt !important;
    color: #666 !important;
    word-break: break-all !important;
  }

  a[href^="#"]:after,
  a[href^="javascript"]:after {
    content: "" !important;
  }

  /* === CARTES CLIENT === */
  .client-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    page-break-inside: avoid !important;
    margin-bottom: 10pt !important;
    padding: 10pt !important;
    background: #fff !important;
  }

  .client-card h3 {
    font-size: 12pt !important;
    color: #000 !important;
  }

  .client-card .badge,
  .client-card .status-badge {
    border: 1px solid #999 !important;
    padding: 2pt 4pt !important;
    font-size: 9pt !important;
  }

  /* === TABLEAUX === */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    page-break-inside: auto !important;
    font-size: 10pt !important;
  }

  thead {
    display: table-header-group !important;
  }

  tr {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
  }

  th, td {
    border: 1px solid #999 !important;
    padding: 6pt 8pt !important;
    text-align: left !important;
    color: #000 !important;
    background: #fff !important;
  }

  th {
    background: #f0f0f0 !important;
    font-weight: bold !important;
  }

  /* === STATISTIQUES === */
  .stats-card,
  .stat-card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    background: #fff !important;
    page-break-inside: avoid !important;
    padding: 8pt !important;
  }

  .stat-value {
    font-size: 16pt !important;
    font-weight: bold !important;
    color: #000 !important;
  }

  .stat-label {
    font-size: 10pt !important;
    color: #333 !important;
  }

  /* === GRILLES ET FLEXBOX === */
  .grid,
  [class*="grid-"] {
    display: block !important;
  }

  .grid > * {
    width: 100% !important;
    margin-bottom: 8pt !important;
  }

  /* === KANBAN === */
  .kanban-board {
    display: block !important;
  }

  .kanban-column {
    display: block !important;
    width: 100% !important;
    margin-bottom: 15pt !important;
    page-break-inside: avoid !important;
    border: 1px solid #ccc !important;
    padding: 8pt !important;
  }

  .kanban-card {
    border: 1px solid #ddd !important;
    padding: 6pt !important;
    margin-bottom: 6pt !important;
    page-break-inside: avoid !important;
    box-shadow: none !important;
  }

  /* === CALENDRIER (si imprimé) === */
  .fc {
    font-size: 10pt !important;
  }

  .fc-event {
    border: 1px solid #999 !important;
    background: #f5f5f5 !important;
    color: #000 !important;
    padding: 2pt !important;
  }

  /* === IMAGES === */
  img {
    max-width: 100% !important;
    page-break-inside: avoid !important;
  }

  /* === RÈGLES DE SAUT DE PAGE === */
  .page-break-before {
    page-break-before: always !important;
  }

  .page-break-after {
    page-break-after: always !important;
  }

  .no-page-break {
    page-break-inside: avoid !important;
  }

  /* === CONFIG PAGE A4 === */
  @page {
    margin: 1.5cm 1cm;
    size: A4 portrait;
  }

  @page :first {
    margin-top: 2cm;
  }
}

/* ========================================
   RESPONSIVE - ÉCRANS PORTABLES (14-16 pouces: 1280px-1599px)
   Réduction des tailles pour écrans laptop
======================================== */
@media (min-width: 1280px) and (max-width: 1599px) {
  /* Base font réduite */
  body {
    font-size: 13px;
  }

  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.1rem; }
  h4 { font-size: 1rem; }

  /* ===== SIDEBAR - Réduction 15% ===== */
  .sidebar {
    width: 220px;
  }

  .sidebar .nav-item {
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
  }

  .sidebar .nav-item svg,
  .sidebar .nav-item i {
    font-size: 1rem;
  }

  /* ===== MAP POPUP - Réduction 20% ===== */
  .leaflet-popup-content {
    font-size: 0.8rem !important;
    padding: 0.6rem !important;
    min-width: 200px !important;
    max-width: 280px !important;
  }

  .leaflet-popup-content h3,
  .leaflet-popup-content strong {
    font-size: 0.9rem !important;
  }

  .leaflet-popup-content p,
  .leaflet-popup-content span {
    font-size: 0.78rem !important;
  }

  .popup-content {
    padding: 0.5rem !important;
  }

  .popup-btn {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.75rem !important;
  }

  .day-route-popup {
    min-width: 180px !important;
    max-width: 260px !important;
  }

  .day-route-popup-title {
    font-size: 0.85rem !important;
  }

  .day-route-popup-row {
    font-size: 0.75rem !important;
  }

  /* ===== PANEL OPTIMISATION TOURNÉE - Réduction 20% ===== */
  #tour-suggestions-panel .modal-content,
  .modal.modal-no-overlay .modal-content {
    max-width: 380px !important;
    padding: 0.8rem !important;
    font-size: 0.8rem !important;
  }

  #tour-suggestions-panel h3,
  .modal.modal-no-overlay h3 {
    font-size: 1rem !important;
  }

  #tour-suggestions-panel h4 {
    font-size: 0.9rem !important;
  }

  .slot-suggestion-card {
    font-size: 0.78rem !important;
    padding: 0.5rem !important;
  }

  .slot-suggestion-card h3,
  .slot-suggestion-card strong {
    font-size: 0.85rem !important;
  }

  .free-day-card {
    font-size: 0.78rem !important;
    padding: 0.5rem !important;
  }

  .choose-slot-btn,
  .free-day-choose-btn {
    font-size: 0.75rem !important;
    padding: 0.4rem !important;
  }

  /* Timeline dans le panel */
  .client-name-hover {
    font-size: 0.78rem !important;
  }

  /* ===== CALENDRIER : STYLES CENTRALISÉS DANS enhancements.css ===== */

  /* ===== DASHBOARD/CARDS - Réduction 20% ===== */
  .client-card {
    padding: 0.8rem !important;
  }

  .client-card h3 {
    font-size: 0.95rem !important;
  }

  .client-card p,
  .client-info {
    font-size: 0.78rem !important;
  }

  .stats-card {
    padding: 0.8rem !important;
  }

  .stats-card .stat-value {
    font-size: 1.3rem !important;
  }

  .stats-card .stat-label {
    font-size: 0.75rem !important;
  }

  /* Kanban */
  .kanban-column {
    min-width: 220px !important;
  }

  .kanban-column-header {
    font-size: 0.85rem !important;
    padding: 0.5rem !important;
  }

  .kanban-card {
    padding: 0.6rem !important;
    font-size: 0.78rem !important;
  }

  .kanban-card h4 {
    font-size: 0.85rem !important;
  }

  /* ===== SEARCH BAR - Ajustement ===== */
  .search-input {
    font-size: 0.85rem !important;
    padding: 0.6rem 0.8rem 0.6rem 2.2rem !important;
  }

  .search-icon {
    font-size: 0.95rem !important;
    left: 0.8rem !important;
  }

  /* ===== BOUTONS - Réduction ===== */
  .btn {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.8rem !important;
  }

  .btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
  }

  /* ===== FORMULAIRES ===== */
  input, select, textarea {
    font-size: 0.85rem !important;
    padding: 0.5rem 0.7rem !important;
  }

  label {
    font-size: 0.85rem !important;
  }

  /* ===== TABLES ===== */
  table {
    font-size: 0.8rem !important;
  }

  th, td {
    padding: 0.5rem !important;
  }

  /* ===== MODALS ===== */
  .modal-content {
    padding: 1rem !important;
  }

  .modal-content h2,
  .modal-content h3 {
    font-size: 1.1rem !important;
  }
}

/* ========================================
   RESPONSIVE - ÉCRANS LAPTOP HD+ (1600px-1919px)
   Pour écrans 1600x900 et similaires
======================================== */
@media (min-width: 1600px) and (max-width: 1919px) {
  /* Base font légèrement réduite */
  body {
    font-size: 13.5px;
  }

  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.2rem; }
  h4 { font-size: 1.05rem; }

  /* ===== SIDEBAR - Réduction 15% ===== */
  .sidebar {
    width: 230px !important;
  }

  .sidebar .nav-item {
    padding: 0.65rem 1rem !important;
    font-size: 0.88rem !important;
  }

  .sidebar .nav-item svg,
  .sidebar .nav-item i {
    font-size: 1.05rem !important;
  }

  .sidebar-header {
    padding: 0.8rem !important;
  }

  .sidebar-header h2 {
    font-size: 1.1rem !important;
  }

  /* ===== MAP POPUP - Réduction 20% ===== */
  .leaflet-popup-content {
    font-size: 0.82rem !important;
    padding: 0.65rem !important;
    max-width: 300px !important;
  }

  .leaflet-popup-content h4 {
    font-size: 0.95rem !important;
  }

  .leaflet-popup-content p {
    font-size: 0.8rem !important;
    margin: 0.25rem 0 !important;
  }

  .leaflet-popup-content .btn {
    font-size: 0.75rem !important;
    padding: 0.3rem 0.5rem !important;
  }

  /* ===== PANEL OPTIMISATION TOURNÉE - Réduction 20% ===== */
  #tour-suggestions-panel .modal-content {
    max-width: 400px !important;
    padding: 0.8rem !important;
    font-size: 0.82rem !important;
  }

  #tour-suggestions-panel h3 {
    font-size: 1rem !important;
  }

  #tour-suggestions-panel h4 {
    font-size: 0.9rem !important;
  }

  #tour-suggestions-panel .slot-card {
    padding: 0.6rem !important;
    font-size: 0.8rem !important;
  }

  #tour-suggestions-panel .timeline-event {
    font-size: 0.78rem !important;
    padding: 0.4rem 0.5rem !important;
  }

  #tour-suggestions-panel .btn {
    font-size: 0.78rem !important;
    padding: 0.35rem 0.6rem !important;
  }

  /* Timeline */
  .client-name-hover {
    font-size: 0.8rem !important;
  }

  /* ===== CALENDRIER : STYLES CENTRALISÉS DANS enhancements.css ===== */

  /* ===== DASHBOARD/CARDS - Réduction 20% ===== */
  .client-card {
    padding: 0.85rem !important;
  }

  .client-card h3 {
    font-size: 0.98rem !important;
  }

  .client-card p,
  .client-info {
    font-size: 0.8rem !important;
  }

  .stats-card {
    padding: 0.85rem !important;
  }

  .stats-card .stat-value {
    font-size: 1.35rem !important;
  }

  .stats-card .stat-label {
    font-size: 0.78rem !important;
  }

  /* Kanban */
  .kanban-column {
    min-width: 230px !important;
  }

  .kanban-column-header {
    font-size: 0.88rem !important;
    padding: 0.55rem !important;
  }

  .kanban-card {
    padding: 0.65rem !important;
    font-size: 0.8rem !important;
  }

  .kanban-card h4 {
    font-size: 0.88rem !important;
  }

  /* ===== SEARCH BAR ===== */
  .search-input {
    font-size: 0.88rem !important;
    padding: 0.65rem 0.85rem 0.65rem 2.3rem !important;
  }

  .search-icon {
    font-size: 1rem !important;
    left: 0.85rem !important;
  }

  /* ===== BOUTONS ===== */
  .btn {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.85rem !important;
  }

  .btn-sm {
    padding: 0.28rem 0.55rem !important;
    font-size: 0.78rem !important;
  }

  /* ===== FORMULAIRES ===== */
  .form-input,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="date"],
  select,
  textarea {
    font-size: 0.85rem !important;
    padding: 0.5rem !important;
  }

  /* ===== MODALS ===== */
  .modal-content {
    padding: 1.1rem !important;
  }

  .modal-content h2,
  .modal-content h3 {
    font-size: 1.15rem !important;
  }
}

/* ========================================
   RESPONSIVE - ÉCRANS FULL HD (1920px-2047px)
   Pour moniteurs 1920x1080 standard (80% des écrans)
======================================== */
@media (min-width: 1920px) and (max-width: 2047px) {
  /* Tailles légèrement plus grandes que laptop HD+ */
  body {
    font-size: 14.5px;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.65rem; }
  h3 { font-size: 1.3rem; }
  h4 { font-size: 1.15rem; }

  /* ===== SIDEBAR ===== */
  .sidebar {
    width: 250px !important;
  }

  .sidebar .nav-item {
    padding: 0.75rem 1.1rem !important;
    font-size: 0.95rem !important;
  }

  .sidebar .nav-item svg,
  .sidebar .nav-item i {
    font-size: 1.15rem !important;
  }

  /* ===== MAP POPUP ===== */
  .leaflet-popup-content {
    font-size: 0.9rem !important;
    padding: 0.75rem !important;
    max-width: 350px !important;
  }

  .leaflet-popup-content h4 {
    font-size: 1.05rem !important;
  }

  /* ===== PANEL OPTIMISATION TOURNÉE ===== */
  #tour-suggestions-panel .modal-content {
    max-width: 450px !important;
    padding: 1rem !important;
    font-size: 0.9rem !important;
  }

  #tour-suggestions-panel h3 {
    font-size: 1.1rem !important;
  }

  #tour-suggestions-panel h4 {
    font-size: 1rem !important;
  }

  #tour-suggestions-panel .slot-card {
    padding: 0.75rem !important;
    font-size: 0.88rem !important;
  }

  #tour-suggestions-panel .btn {
    font-size: 0.85rem !important;
    padding: 0.4rem 0.7rem !important;
  }

  /* ===== CALENDRIER : STYLES CENTRALISÉS DANS enhancements.css ===== */

  /* ===== DASHBOARD/CARDS ===== */
  .client-card {
    padding: 1rem !important;
  }

  .client-card h3 {
    font-size: 1.05rem !important;
  }

  .client-card p,
  .client-info {
    font-size: 0.88rem !important;
  }

  .stats-card {
    padding: 1rem !important;
  }

  .stats-card .stat-value {
    font-size: 1.5rem !important;
  }

  .stats-card .stat-label {
    font-size: 0.85rem !important;
  }

  /* Kanban */
  .kanban-column {
    min-width: 250px !important;
  }

  .kanban-column-header {
    font-size: 0.95rem !important;
    padding: 0.65rem !important;
  }

  .kanban-card {
    padding: 0.75rem !important;
    font-size: 0.85rem !important;
  }

  /* ===== BOUTONS ===== */
  .btn {
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
  }

  .btn-sm {
    font-size: 0.82rem !important;
    padding: 0.35rem 0.6rem !important;
  }

  /* ===== FORMULAIRES ===== */
  .form-input,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="date"],
  select,
  textarea {
    font-size: 0.92rem !important;
    padding: 0.6rem !important;
  }

  /* ===== TABLES ===== */
  table {
    font-size: 0.88rem !important;
  }

  th, td {
    padding: 0.6rem !important;
  }

  /* ===== MODALS ===== */
  .modal-content {
    padding: 1.25rem !important;
  }

  .modal-content h2,
  .modal-content h3 {
    font-size: 1.25rem !important;
  }
}

/* ========================================
   RESPONSIVE - GRANDS ÉCRANS (2048px+)
======================================== */
@media (min-width: 2048px) {
  /* Augmentation globale des polices de 15% */
  body {
    font-size: 16.1px; /* 14px * 1.15 */
  }

  h1 { font-size: 2.588rem; } /* 2.25rem * 1.15 */
  h2 { font-size: 2.156rem; } /* 1.875rem * 1.15 */
  h3 { font-size: 1.438rem; } /* 1.25rem * 1.15 */
  h4 { font-size: 1.294rem; } /* 1.125rem * 1.15 */

  /* Boutons */
  .btn {
    font-size: 1.006rem; /* 0.875rem * 1.15 */
    padding: 0.575rem 1.15rem;
  }

  /* Cartes Kanban */
  .lead-card-name {
    font-size: 0.748rem; /* 0.65rem * 1.15 */
  }

  .lead-card-partner {
    font-size: 0.633rem; /* 0.55rem * 1.15 */
  }

  .lead-card-revenue {
    font-size: 0.805rem; /* 0.7rem * 1.15 */
  }

  .lead-card-info-row {
    font-size: 0.633rem; /* 0.55rem * 1.15 */
  }

  /* Colonnes Kanban */
  .kanban-column-title {
    font-size: 0.805rem; /* 0.7rem * 1.15 */
  }

  .kanban-column-count {
    font-size: 0.69rem; /* 0.6rem * 1.15 */
  }

  .kanban-column-total {
    font-size: 0.748rem; /* 0.65rem * 1.15 */
  }

  /* Inputs et formulaires */
  .form-input,
  .search-input {
    font-size: 1.079rem; /* 0.938rem * 1.15 */
  }

  /* Modals */
  .modal-header h3 {
    font-size: 1.438rem; /* 1.25rem * 1.15 */
  }

  /* Carte augmentée - utilise viewport height pour remplir l'écran */
  #map {
    height: calc(100vh - 200px); /* Remplit la hauteur d'écran moins header/padding */
    min-height: 750px;
  }

  /* Sidebar plus large */
  .sidebar {
    width: 280px;
  }

  .nav-item {
    font-size: 1rem;
    padding: var(--space-md) var(--space-lg);
  }

  /* ===== CALENDRIER : STYLES CENTRALISÉS DANS enhancements.css ===== */
}

/* ========================================
   NOTE: Le doublon agressif @media 2048px a été supprimé
   Utiliser le breakpoint 2560px+ pour les très grands écrans
======================================== */

/* ========================================
   RESPONSIVE - TRÈS GRANDS ÉCRANS 4K (2560px+)
   Pour moniteurs 4K et ultra-wide
======================================== */
@media (min-width: 2560px) {
  /* Augmentation globale des polices de 70% */
  body {
    font-size: 24px; /* 14px * 1.70 */
  }

  h1 { font-size: 3.8rem; }
  h2 { font-size: 3.2rem; }
  h3 { font-size: 2.1rem; }
  h4 { font-size: 1.9rem; }

  /* Sidebar très large */
  .sidebar {
    width: 420px;
    padding: var(--space-2xl);
  }

  .nav-item {
    font-size: 1.5rem;
    padding: var(--space-xl);
  }

  .nav-item span:first-child {
    font-size: 1.7rem;
  }

  /* ===== CALENDRIER : STYLES CENTRALISÉS DANS enhancements.css ===== */

  /* ========== MODALS/POPUPS +40% ========== */
  .modal-content {
    max-width: 950px;
    font-size: 1.4rem;
  }

  .modal-large {
    max-width: 1400px;
  }

  .modal-header {
    padding: 2.5rem 3rem;
  }

  .modal-header h3 {
    font-size: 2.4rem;
  }

  .modal-body {
    padding: 2.5rem 3rem;
    font-size: 1.4rem;
  }

  .modal-body label {
    font-size: 1.3rem;
  }

  .modal-body input,
  .modal-body select,
  .modal-body textarea {
    font-size: 1.3rem !important;
    padding: 1rem 1.2rem !important;
  }

  .modal-footer {
    padding: 1.5rem 3rem;
  }

  .modal-footer .btn {
    font-size: 1.4rem;
    padding: 1rem 2rem;
  }

  .modal-close {
    font-size: 2.8rem;
    width: 56px;
    height: 56px;
  }

  /* ========== PANEL OPTIMISATION TOURNÉE +40% ========== */
  .tour-optimization-panel,
  .optimization-panel,
  #tourOptimizationPanel,
  [class*="optimization"],
  [class*="tour-panel"],
  .panel-tournee {
    min-width: 600px !important;
    font-size: 1.4rem !important;
    padding: var(--space-2xl) !important;
  }

  .tour-optimization-panel h3,
  .optimization-panel h3,
  .panel-tournee h3 {
    font-size: 2.1rem !important;
  }

  .tour-optimization-panel .btn,
  .optimization-panel .btn,
  .panel-tournee .btn {
    font-size: 1.45rem !important;
    padding: 1rem 2rem !important;
  }

  /* ========== DAY ROUTE POPUP 4K ========== */
  .day-route-popup-container .leaflet-popup-content {
    min-width: 400px !important;
    max-width: 600px !important;
  }

  .day-route-popup {
    padding: 1.5rem !important;
    font-size: 1.5rem !important;
  }

  .day-route-popup-title {
    font-size: 1.9rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.8rem !important;
  }

  .day-route-popup-details {
    margin: 1rem 0 !important;
  }

  .day-route-popup-row {
    margin: 0.6rem 0 !important;
    font-size: 1.5rem !important;
  }

  .day-route-popup .popup-nav-buttons {
    margin-top: 1.2rem !important;
  }

  .day-route-popup .popup-btn {
    padding: 1rem 1.5rem !important;
    font-size: 1.4rem !important;
    color: white !important;
  }

  .popup-btn,
  .popup-btn-waze,
  .popup-btn-maps {
    color: white !important;
    font-weight: 600 !important;
  }

  /* Boutons généraux */
  .btn {
    font-size: 1.5rem;
    padding: 1rem 2rem;
  }

  .btn-sm {
    font-size: 1.25rem;
    padding: 0.7rem 1.4rem;
  }

  /* Cartes Kanban augmentées */
  .lead-card-name {
    font-size: 1.1rem;
  }

  .lead-card-partner {
    font-size: 0.95rem;
  }

  .lead-card-revenue {
    font-size: 1.15rem;
  }

  .lead-card-info-row {
    font-size: 0.95rem;
  }

  .kanban-column-title {
    font-size: 1.2rem;
  }

  .kanban-column-count {
    font-size: 1rem;
  }

  .kanban-column-total {
    font-size: 1.1rem;
  }

  /* Inputs et formulaires */
  .form-control,
  .form-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  input[type="number"],
  select,
  textarea {
    font-size: 1.4rem !important;
    padding: 1rem 1.3rem !important;
  }

  label {
    font-size: 1.3rem;
  }

  /* Carte */
  #map {
    height: calc(100vh - 160px);
    min-height: 1000px;
  }

  /* Search bar */
  .search-input-wrapper {
    position: relative !important;
  }

  .search-input {
    font-size: 1.5rem !important;
    padding: 1.3rem 1.5rem 1.3rem 3.5rem !important;
  }

  .search-icon {
    position: absolute !important;
    left: 1.3rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.7rem !important;
  }

  /* Cards clients */
  .client-card {
    padding: var(--space-2xl);
  }

  .client-card h3 {
    font-size: 1.7rem;
  }

  .client-card p,
  .client-info {
    font-size: 1.3rem;
  }

  /* Tables */
  table {
    font-size: 1.35rem;
  }

  th, td {
    padding: 1.3rem 1.5rem;
  }

  /* Content et calendrier */
  .content {
    padding: 3rem;
  }

  #calendar {
    padding: 3rem;
  }

  /* Notifications */
  .notification {
    font-size: 1.3rem;
    padding: 1.2rem 1.8rem;
  }

  /* ========== PANEL SUGGESTIONS TOURNÉE 4K ========== */
  #tour-suggestions-panel {
    font-size: 1.6rem !important;
  }

  #tour-suggestions-panel .modal-content {
    min-width: 700px !important;
    max-width: 850px !important;
    font-size: 1.6rem !important;
  }

  #tour-suggestions-panel h3,
  #tour-suggestions-panel h4 {
    font-size: 2.1rem !important;
  }

  #tour-suggestions-panel .btn {
    font-size: 1.5rem !important;
    padding: 1.1rem 2rem !important;
  }

  #tour-suggestions-panel span,
  #tour-suggestions-panel div,
  #tour-suggestions-panel p,
  #tour-suggestions-panel label {
    font-size: 1.5rem !important;
  }

  #tour-suggestions-panel strong {
    font-size: 1.6rem !important;
  }

  /* ========== MODAL MODIFIER TEMPLATE EMAIL 4K ========== */
  .template-editor-modal {
    padding: 2.5rem !important;
  }

  .template-editor-content {
    max-width: 95% !important;
  }

  .template-editor-header {
    padding: 2.5rem 3rem !important;
  }

  .template-editor-title {
    font-size: 2.4rem !important;
  }

  .template-editor-subtitle {
    font-size: 1.4rem !important;
  }

  .template-editor-close {
    font-size: 3rem !important;
    padding: 0.8rem !important;
  }

  .template-editor-body {
    grid-template-columns: 45% 35% 20% !important;
  }

  .template-editor-left {
    padding: 2.5rem !important;
  }

  .template-editor-label {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }

  .template-editor-input {
    font-size: 1.5rem !important;
    padding: 1.2rem !important;
  }

  .template-var-badge {
    font-size: 1.3rem !important;
    padding: 0.6rem 1rem !important;
  }

  .template-editor-textarea {
    font-size: 1.25rem !important;
    line-height: 1.7 !important;
  }

  .template-editor-actions {
    padding-top: 2rem !important;
    gap: 2rem !important;
  }

  .template-editor-btn {
    font-size: 1.5rem !important;
    padding: 1.2rem 2.5rem !important;
  }

  /* Preview section */
  .template-preview-header {
    padding: 2rem !important;
  }

  .template-preview-title {
    font-size: 1.7rem !important;
  }

  .template-preview-subtitle {
    font-size: 1.3rem !important;
  }

  .template-preview-content {
    padding: 2.5rem !important;
    font-size: 1.4rem !important;
  }

  /* AI Assistant section */
  .ai-assistant-header {
    padding: 2.5rem !important;
  }

  .ai-assistant-title {
    font-size: 1.8rem !important;
  }

  .ai-assistant-title span {
    font-size: 2.4rem !important;
  }

  .ai-assistant-subtitle {
    font-size: 1.35rem !important;
  }

  .ai-settings-btn {
    font-size: 2.2rem !important;
    padding: 1rem !important;
  }

  .ai-chat-messages {
    padding: 2rem !important;
  }

  .ai-chat-intro {
    font-size: 1.4rem !important;
  }

  .ai-chat-list {
    font-size: 1.35rem !important;
    max-width: 450px !important;
  }

  .ai-chat-list li {
    margin-bottom: 0.7rem;
  }

  .ai-chat-input-area {
    padding: 2rem !important;
  }

  .ai-chat-textarea {
    font-size: 1.35rem !important;
    padding: 1.2rem !important;
  }

  .ai-send-btn {
    font-size: 1.45rem !important;
    padding: 1.2rem !important;
  }

  .ai-chat-hint {
    font-size: 1.25rem !important;
  }
}

/* ===== CALENDRIER MOBILE : STYLES CENTRALISÉS DANS enhancements.css ===== */

/* ========================================
   STYLES MOBILE GÉNÉRAUX (< 480px)
   (Calendrier centralisé dans enhancements.css)
======================================== */
@media (max-width: 480px) {
  /* Modal détails événement sur mobile */
  .client-card {
    max-width: 95vw !important;
    margin: 0.5rem !important;
    padding: 0.75rem !important;
    font-size: 0.8rem !important;
  }

  .client-card .client-header {
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: flex-start !important;
  }

  .client-card .client-name {
    font-size: 0.9rem !important;
  }

  .client-card .client-info {
    padding: 0.5rem 0 !important;
  }

  .client-card .info-row {
    padding: 0.35rem 0 !important;
    gap: 0.5rem !important;
  }

  .client-card .info-icon {
    font-size: 0.9rem !important;
  }

  .client-card .info-label {
    font-size: 0.65rem !important;
  }

  .client-card .info-value {
    font-size: 0.75rem !important;
  }

  .client-card .btn {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.7rem !important;
  }

  .client-card .btn-sm {
    padding: 0.25rem 0.4rem !important;
    font-size: 0.65rem !important;
  }

  /* Layout global page calendrier */
  .main-content {
    padding: 0.25rem !important;
  }

  .page-header {
    padding: 0.5rem !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .page-header h2 {
    font-size: 1rem !important;
  }

  /* Filtres calendrier */
  .calendar-filters,
  .calendar-controls {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    justify-content: center !important;
  }

  .calendar-filters select,
  .calendar-filters input,
  .calendar-controls select,
  .calendar-controls button {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.35rem !important;
  }

  /* Sidebar cachée par défaut sur mobile */
  .sidebar {
    position: fixed !important;
    left: -100% !important;
    z-index: 9999 !important;
    transition: left 0.3s ease !important;
  }

  .sidebar.mobile-open {
    left: 0 !important;
  }

  /* Toggle sidebar mobile */
  .sidebar-toggle-mobile {
    display: block !important;
    position: fixed !important;
    bottom: 1rem !important;
    left: 1rem !important;
    z-index: 10000 !important;
    background: var(--primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 50% !important;
    width: 45px !important;
    height: 45px !important;
    font-size: 1.2rem !important;
    box-shadow: var(--shadow-lg) !important;
  }
}

/* ===== CALENDRIER TABLETTES : STYLES CENTRALISÉS DANS enhancements.css ===== */

/* ========================================
   SAFE AREA INSETS - iPhone X+ (Notch)
   Support des appareils avec encoche
======================================== */
@supports (padding: env(safe-area-inset-top)) {
  /* Header avec safe-area */
  .header {
    padding-top: calc(0.15rem + env(safe-area-inset-top));
    padding-left: calc(0.25rem + env(safe-area-inset-left));
    padding-right: calc(0.25rem + env(safe-area-inset-right));
  }

  /* Sidebar avec safe-area à gauche */
  .sidebar {
    padding-left: env(safe-area-inset-left);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Contenu principal */
  .content {
    padding-left: calc(var(--space-lg) + env(safe-area-inset-left));
    padding-right: calc(var(--space-lg) + env(safe-area-inset-right));
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
  }

  /* Footer sticky avec safe-area */
  .actions,
  .modal-footer,
  [style*="position: sticky"][style*="bottom"] {
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  }

  /* Boutons flottants */
  .sidebar-toggle-mobile,
  .fab,
  [class*="float"] {
    bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }
}

/* ========================================
   PREFERS-REDUCED-MOTION - Accessibilité
   Désactivation des animations pour les utilisateurs sensibles
======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Leaflet - Désactiver animations carte */
  .leaflet-fade-anim .leaflet-tile,
  .leaflet-zoom-anim .leaflet-zoom-animated {
    transition: none !important;
  }

  .leaflet-marker-icon,
  .leaflet-marker-shadow {
    transition: none !important;
  }

  /* FullCalendar - Désactiver animations */
  .fc-event {
    transition: none !important;
  }

  /* Clusters - Pas d'animation */
  .marker-cluster {
    transition: none !important;
  }

  /* Sidebar - Pas de transition */
  .sidebar {
    transition: none !important;
  }

  /* Hover effects - Simplifiés */
  .btn:hover,
  .card:hover,
  .nav-item:hover {
    transform: none !important;
  }
}

/* ========================================
   LANDSCAPE MODE - Mobile en paysage
   Optimisation pour rotation écran
======================================== */
@media (max-width: 896px) and (orientation: landscape) {
  /* Header plus compact en paysage */
  .header {
    padding: 0.3rem 0.75rem !important;
    min-height: 40px !important;
  }

  .header .logo {
    font-size: 0.95rem !important;
  }

  /* Sidebar en mode mini en paysage */
  .sidebar {
    width: 60px !important;
  }

  .sidebar .nav-item span:not(.nav-icon) {
    display: none !important;
  }

  .sidebar .nav-icon {
    margin-right: 0 !important;
    font-size: 1.2rem !important;
  }

  .sidebar:hover {
    width: 220px !important;
  }

  .sidebar:hover .nav-item span:not(.nav-icon) {
    display: inline !important;
  }

  /* Contenu occupe plus d'espace */
  .content {
    margin-left: 60px !important;
    padding: 0.5rem !important;
  }

  /* Carte plus haute en paysage */
  #map {
    height: calc(100vh - 100px) !important;
    min-height: 250px !important;
  }

  /* Calendrier compact */
  .fc-toolbar {
    flex-wrap: nowrap !important;
  }

  .fc-toolbar-title {
    font-size: 0.9rem !important;
  }

  /* Masquer éléments non essentiels */
  .weather-forecast-inline,
  .weather-widget-extended .forecast-day-inline:nth-child(n+3) {
    display: none !important;
  }

  /* Modal plein écran en paysage */
  .modal-content {
    max-height: 90vh !important;
    margin: 2vh auto !important;
  }
}

/* ========================================
   PETIT ÉCRAN EN PAYSAGE (iPhone SE, etc.)
======================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .header {
    padding: 0.25rem 0.5rem !important;
    min-height: 36px !important;
  }

  .sidebar {
    display: none !important;
  }

  .content {
    margin-left: 0 !important;
    padding: 0.5rem !important;
  }

  #map {
    height: calc(100vh - 60px) !important;
  }

  /* Modals ultra-compactes */
  .modal-content {
    max-height: 95vh !important;
    margin: 1vh auto !important;
    padding: 0.75rem !important;
  }

  .modal-header {
    padding: 0.5rem !important;
  }

  .modal-body {
    padding: 0.5rem !important;
    max-height: calc(95vh - 100px) !important;
    overflow-y: auto !important;
  }
}

/* ========================================
   CORRECTIONS RESPONSIVE v3.1 (Audit 2025-12-03)
   Touch Targets & Accessibility
======================================== */

/* Touch targets 44px minimum sur mobile (WCAG 2.1 AAA) */
@media (max-width: 768px) {
  .btn,
  button,
  input[type="submit"],
  input[type="button"],
  .nav-item {
    min-height: 44px;
    min-width: 44px;
  }

  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* Évite le zoom auto sur iOS */
  }

  /* Liens cliquables avec espacement */
  a.btn,
  .kanban-card,
  .client-card,
  .metre-item {
    min-height: 44px;
  }
}

/* Désactiver tooltips hover sur touch devices */
@media (hover: none) {
  [title]:hover::after,
  .tooltip:hover .tooltip-content,
  [data-tooltip]:hover::before,
  [data-tooltip]:hover::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* Amélioration focus visible pour accessibilité */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Safe area iOS pour les éléments fixed en bas */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .fixed-bottom,
  .modal-footer,
  .toast-container {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ========================================
   CORRECTIONS CRITIQUES MOBILE v3.2 (2025-12-03)
   Audit NASA - VRAIS PROBLÈMES
======================================== */

/* ===== FIX #1: KANBAN MOBILE - SCROLL VERTICAL AU LIEU D'HORIZONTAL ===== */
@media (max-width: 1280px) {
  .kanban-board {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    gap: 1rem !important;
    padding: 0.5rem !important;
  }

  .kanban-column {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
  }

  .kanban-column-body {
    max-height: 300px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
  }

  .kanban-column.collapsed {
    max-height: 50px !important;
  }

  .kanban-column.collapsed .kanban-column-body {
    display: none !important;
  }
}

/* ===== FIX #2: CALENDRIER TOOLBAR - FORCER WRAP SUR MOBILE ===== */
@media (max-width: 896px) {
  .fc-toolbar,
  .fc .fc-toolbar {
    flex-wrap: wrap !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
  }

  .fc-toolbar-chunk {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.25rem !important;
  }

  .fc-button {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.75rem !important;
    min-height: 44px !important;
    min-width: 44px !important;
  }

  .fc-toolbar-title {
    font-size: 1rem !important;
    text-align: center !important;
    order: -1 !important;
    width: 100% !important;
  }
}

/* ===== FIX #3: CONTENT - PERMETTRE SCROLL SI NÉCESSAIRE ===== */
@media (max-width: 1280px) {
  .content {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ===== FIX #4: HEADER BOUTONS - WRAP SUR PETIT ÉCRAN ===== */
@media (max-width: 480px) {
  .header-content {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    padding: 0.25rem !important;
  }

  .header-actions,
  .user-menu {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }

  .btn,
  button {
    padding: 0.35rem 0.5rem !important;
    font-size: 0.75rem !important;
    white-space: normal !important;
  }
}

/* ===== FIX #5: CLAVIER MOBILE - SCROLL VERS INPUT ACTIF ===== */
@media (max-width: 1280px) {
  input:focus,
  select:focus,
  textarea:focus {
    scroll-margin-bottom: 50vh;
  }

  /* Éviter que les éléments fixed cachent l'input */
  body.keyboard-open .sidebar-toggle-mobile,
  body.keyboard-open .fixed-bottom {
    display: none !important;
  }
}

/* ===== FIX #6: MODALS MOBILE - FULLSCREEN + SCROLL ===== */
@media (max-width: 480px) {
  .modal-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
  }

  .modal-body {
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ===== FIX #7: POPUPS LEAFLET - ADAPTER À L'ÉCRAN ===== */
@media (max-width: 480px) {
  .leaflet-popup-content {
    min-width: auto !important;
    max-width: calc(100vw - 40px) !important;
    width: auto !important;
  }

  .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 40px) !important;
  }

  .popup-content {
    padding: 0.5rem !important;
  }

  .popup-nav-buttons {
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }

  .popup-nav-buttons .btn {
    flex: 1 1 45% !important;
    min-width: 0 !important;
  }
}

/* ===== FIX #8: TRÈS PETITS ÉCRANS (320px - iPhone SE) ===== */
@media (max-width: 375px) {
  body {
    font-size: 13px !important;
  }

  .header-content {
    padding: 0.15rem !important;
  }

  .logo {
    font-size: 0.8rem !important;
  }

  .sidebar {
    width: 100% !important;
    max-width: 280px !important;
  }

  .kanban-column-header {
    padding: 0.3rem !important;
  }

  .kanban-column-title {
    font-size: 0.65rem !important;
  }

  .kanban-card {
    padding: 0.4rem !important;
  }

  .btn {
    padding: 0.3rem 0.4rem !important;
    font-size: 0.7rem !important;
  }
}

/* ===== FIX #9: EMPÊCHER ZOOM ACCIDENTEL SUR DOUBLE-TAP ===== */
@media (max-width: 1280px) {
  * {
    touch-action: manipulation;
  }

  input, select, textarea, button, a {
    touch-action: manipulation;
  }
}

/* ===== FIX #10: PAGE MÉTRÉ - OPTIMISATIONS TERRAIN ===== */
@media (max-width: 480px) {
  .metres-container {
    flex-direction: column !important;
  }

  .metres-list {
    width: 100% !important;
    max-height: 35vh !important;
    border-right: none !important;
    border-bottom: 2px solid var(--metres-border) !important;
  }

  .volet-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.3rem !important;
  }

  .volet-grid input {
    min-height: 48px !important;
    font-size: 16px !important;
  }
}

/* ===== FIX #11: TOUS BOUTONS ACCESSIBLES - 44px MINIMUM ===== */
@media (max-width: 1280px) {
  /* Boutons généraux */
  .btn,
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  .lead-action-btn,
  .popup-btn,
  .fc-button,
  .nav-item {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.5rem !important;
  }

  /* Espacement entre boutons pour éviter clics accidentels */
  .btn + .btn,
  button + button,
  .lead-action-btn + .lead-action-btn {
    margin-left: 8px !important;
  }

  /* Boutons dans les groupes */
  .btn-group,
  .button-group,
  .lead-card-actions,
  .popup-nav-buttons,
  .modal-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Liens cliquables */
  a:not(.btn) {
    padding: 4px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ===== FIX #12: ÉVITER SUPERPOSITION DE BOUTONS ===== */
@media (max-width: 480px) {
  /* Actions en bas de carte - stack vertical */
  .lead-card-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .lead-card-actions .lead-action-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Footer modal - stack vertical sur très petit écran */
  .modal-footer {
    flex-direction: column !important;
  }

  .modal-footer .btn {
    width: 100% !important;
  }

  /* Filtres - stack vertical */
  .filters-row,
  .filter-group {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
}

/* ===== FIX #13: LEAFLET ZOOM CONTROLS - MASQUÉS SUR MOBILE ===== */
@media (max-width: 1280px) {
  /* Masquer les boutons zoom sur mobile - on zoome avec les doigts */
  /* Évite aussi que ces boutons gênent l'ouverture des popups clients */
  .leaflet-control-zoom {
    display: none !important;
  }

  /* Attribution plus petite sur mobile */
  .leaflet-control-attribution {
    font-size: 8px !important;
    padding: 2px 5px !important;
  }
}

/* ===== FIX #14: POPUP CARTE - BOUTONS BIEN ESPACÉS ===== */
@media (max-width: 480px) {
  /* Boutons popup en colonne sur très petit écran */
  .popup-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .popup-btn {
    width: 100% !important;
    text-align: center !important;
  }

  .popup-nav-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .popup-nav-buttons a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* ===== FIX #15: INPUTS GLOBAUX - ÉVITER ZOOM iOS ===== */
@media (max-width: 1280px) {
  /* Tous les inputs avec font-size 16px minimum pour éviter zoom iOS */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px !important;
  }

  /* Checkboxes et radios plus grands pour tactile */
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }

  /* Labels avec checkboxes/radios - zone cliquable agrandie */
  label:has(input[type="checkbox"]),
  label:has(input[type="radio"]) {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px !important;
  }
}

/* ===== FIX #16: TOUR SUGGESTIONS PANEL MOBILE ===== */
@media (max-width: 480px) {
  #tour-suggestions-panel {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    max-height: 60vh !important;
    border-radius: 16px 16px 0 0 !important;
  }

  #tour-suggestions-panel .modal-header {
    padding: 12px !important;
    border-radius: 16px 16px 0 0 !important;
  }

  #tour-suggestions-panel button {
    min-height: 44px !important;
  }
}

/* ===== FIX #17: DÉSACTIVER TOOLTIPS SUR TOUCH ===== */
@media (hover: none), (pointer: coarse) {
  /* Désactiver les tooltips natifs sur appareils tactiles */
  [title] {
    pointer-events: auto;
  }

  [title]:hover::before,
  [title]:hover::after,
  .tooltip:hover .tooltip-content,
  .tooltip:hover .tooltip-text,
  [data-tooltip]:hover::before,
  [data-tooltip]:hover::after {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Empêcher les tooltips CSS de s'afficher */
  .has-tooltip:hover .tooltip,
  .tooltip-wrapper:hover .tooltip-content {
    display: none !important;
  }
}

/* ===== FIX #18: TOASTS SWIPE-TO-DISMISS STYLES ===== */
.notification,
.toast,
.metres-toast,
[class*="toast"],
[class*="notification"] {
  transition: transform 0.3s ease, opacity 0.3s ease !important;
  touch-action: pan-x !important;
}

.notification.swiping,
.toast.swiping,
.metres-toast.swiping {
  transition: none !important;
}

.notification.dismissed,
.toast.dismissed,
.metres-toast.dismissed {
  transform: translateX(100%) !important;
  opacity: 0 !important;
}

/* Animation d'entrée pour les toasts */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.notification,
.toast,
.metres-toast {
  animation: slideInRight 0.3s ease forwards;
}

/* ===== FIX #20: POPUPS LEAFLET MOBILE - CROIX ET BOUTONS ===== */
/* Bouton de fermeture toujours visible et accessible - CENTRAGE PARFAIT */
.leaflet-popup-close-button {
  width: 36px !important;
  height: 36px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: white !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
  top: -12px !important;
  right: -12px !important;
  color: #333 !important;
  z-index: 1000 !important;
  position: absolute !important;
  padding: 0 !important;
  border: 2px solid #eee !important;
}

.leaflet-popup-close-button:hover {
  background: #f5f5f5 !important;
  color: #000 !important;
}

@media (max-width: 1280px) {
  /* Croix plus grande sur mobile (44px touch target) - CENTRAGE FLEXBOX */
  .leaflet-popup-close-button {
    width: 44px !important;
    height: 44px !important;
    font-size: 26px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: -16px !important;
    right: -16px !important;
    padding: 0 !important;
  }

  /* Popup content avec padding-top pour la croix */
  .popup-content {
    padding-top: 12px !important;
  }

  /* Boutons popup - GRILLE pour même taille */
  .popup-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  /* Boutons navigation en ligne */
  .popup-nav-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Tous les boutons popup - MÊME TAILLE */
  .popup-btn,
  .popup-btn-waze,
  .popup-btn-maps,
  .popup-btn-success,
  .popup-btn-primary,
  .popup-btn-full {
    min-height: 48px !important;
    height: 48px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }
}

/* ===== FIX #19: DASHBOARD MOBILE - BOUTONS WRAP ===== */
@media (max-width: 1280px) {
  /* Conteneur des boutons rapides - grille 2 colonnes */
  .dashboard-quick-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Masquer le séparateur vertical sur mobile */
  .dashboard-quick-buttons > div[style*="width: 1px"] {
    display: none !important;
  }

  /* Tous les boutons même taille */
  .dashboard-quick-buttons button {
    width: 100% !important;
    padding: 10px 8px !important;
    font-size: 0.8rem !important;
    min-height: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 8px !important;
  }

  /* Bouton Réinitialiser seul sur sa ligne - pleine largeur */
  .dashboard-quick-buttons button:last-child {
    grid-column: 1 / -1 !important;
  }

  /* Sélecteur de dates en colonne sur mobile */
  .dashboard-date-selector {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .dashboard-date-selector input[type="date"] {
    width: 100% !important;
    font-size: 16px !important; /* Éviter zoom iOS */
    padding: 10px !important;
    height: 44px !important;
  }

  /* Masquer la flèche entre les dates */
  .dashboard-date-selector > span {
    display: none !important;
  }

  /* Label période */
  .dashboard-date-selector > label {
    width: 100% !important;
    margin-bottom: 4px !important;
  }

  /* Section filtres - en colonne */
  .card > div[style*="flex-wrap: wrap"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* Filtre commercial pleine largeur */
  #dashboardUserFilterContainer {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  #dashboardUserFilterContainer select {
    width: 100% !important;
    padding: 10px !important;
    height: 44px !important;
    font-size: 16px !important;
  }

  /* Checkbox archivées */
  .card > div > div[style*="align-items: center"] {
    width: 100% !important;
  }

  /* KPIs en grille 2x2 */
  .dashboard-kpis {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .kpi-card {
    padding: 8px !important;
  }

  .kpi-card > div[style*="font-size: 1.6rem"] {
    font-size: 1.1rem !important;
  }
}

/* ===== FIX #21 + #22: CALENDRIER MOBILE COMPACT (style Odoo) ===== */

/* --- DESKTOP: Styles normaux --- */
.calendar-filters-toggle {
  display: none; /* Caché sur desktop */
}

.filter-label-short {
  display: none;
}

.filter-label-long {
  display: inline;
}

.calendar-header-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.calendar-title-desktop {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- MOBILE: Calendrier compact --- */
@media (max-width: 1280px) {
  /* Header calendrier compact */
  .calendar-header-mobile {
    margin-bottom: 0 !important;
    padding: 4px 0 !important;
  }

  /* MASQUER le titre sur mobile */
  .calendar-title-desktop {
    display: none !important;
  }

  /* Bouton filtres visible sur mobile */
  .calendar-filters-toggle {
    display: flex !important;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
  }

  /* Panneau filtres - CACHÉ par défaut sur mobile */
  .calendar-filters-panel {
    display: none;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .calendar-filters-panel.open {
    display: block;
  }

  /* Filtres en ligne compacts */
  .calendar-filters-content {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 0 !important;
  }

  .calendar-filter-item {
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    margin: 0 !important;
  }

  .filter-label-short {
    display: inline !important;
  }

  .filter-label-long {
    display: none !important;
  }

  /* MASQUER auto-refresh sur mobile */
  #calendar-refresh-indicator,
  .calendar-auto-refresh,
  [class*="auto-refresh"] {
    display: none !important;
  }

  /* FullCalendar - toolbar ULTRA compacte */
  .fc .fc-toolbar {
    flex-wrap: nowrap !important;
    gap: 2px !important;
    padding: 2px !important;
    margin-bottom: 2px !important;
  }

  /* Titre du mois - compact */
  .fc .fc-toolbar-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    flex: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    order: 0 !important;
    width: auto !important;
    margin: 0 4px !important;
  }

  /* Boutons navigation mini */
  .fc .fc-button {
    padding: 4px 6px !important;
    font-size: 0.7rem !important;
    min-height: 28px !important;
    height: 28px !important;
  }

  .fc .fc-button-group {
    gap: 1px !important;
  }

  /* Boutons prev/next/today ultra-compacts */
  .fc .fc-prev-button,
  .fc .fc-next-button {
    padding: 4px 8px !important;
  }

  .fc .fc-today-button {
    padding: 4px 6px !important;
    font-size: 0.65rem !important;
  }

  /* Boutons vues (Mois/Semaine/Jour) compacts */
  .fc .fc-dayGridMonth-button,
  .fc .fc-timeGridWeek-button,
  .fc .fc-timeGridDay-button {
    padding: 4px 6px !important;
    font-size: 0.65rem !important;
  }

  /* Calendrier prend TOUT l'espace restant */
  #calendar {
    height: calc(100vh - 180px) !important;
    min-height: 400px !important;
  }

  #calendarSection {
    padding: 4px !important;
  }

  /* Cellules du calendrier - plus petites */
  .fc-daygrid-day-frame {
    min-height: 50px !important;
    position: relative !important;
  }

  .fc-daygrid-day-top {
    padding: 1px !important;
  }

  /* Numéro du jour compact */
  .fc-daygrid-day-number {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 2px 4px !important;
  }

  /* Événements plus lisibles */
  .fc-event {
    padding: 2px 4px !important;
    margin: 1px 2px !important;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }

  .fc-event-time {
    font-weight: bold !important;
    margin-right: 4px !important;
  }

  .fc-event-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Plus d'événements visibles */
  .fc-daygrid-more-link {
    font-size: 0.7rem !important;
    padding: 2px 4px !important;
    background: #f0f0f0 !important;
    border-radius: 3px !important;
  }

  /* Vue semaine/jour - heures lisibles */
  .fc-timegrid-slot-label {
    font-size: 0.7rem !important;
    padding: 2px !important;
  }

  .fc-timegrid-event {
    font-size: 0.75rem !important;
  }

  /* Filtres calendrier compacts */
  #calendarSection .search-bar {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  #calendarSection .search-bar label {
    font-size: 0.8rem !important;
    padding: 4px 8px !important;
  }

  #calendarSection .search-bar select {
    font-size: 0.8rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIX #24: POPUP BOUTONS - ALIGNEMENT FORCÉ ULTRA-SPÉCIFIQUE                  */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  /* Popup container - largeur maximale */
  .leaflet-popup-content {
    width: calc(100vw - 60px) !important;
    max-width: 340px !important;
    min-width: auto !important;
  }

  /* Actions container - flex column */
  .leaflet-popup-content .popup-actions,
  .popup-content .popup-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Navigation buttons (Waze/Maps) - grille 2 colonnes */
  .popup-actions .popup-nav-buttons {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* TOUS les boutons popup - même dimensions */
  .popup-actions button,
  .popup-actions a,
  .popup-actions .popup-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 12px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    text-align: center !important;
  }

  /* Bouton Métré - couleur spécifique */
  .popup-actions button[onclick*="openMetres"] {
    background: #714B67 !important;
    color: white !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIX #25: DASHBOARD DATES - VISIBILITÉ iOS + STYLE                           */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  /* Sélecteur dates - forcer colonne */
  .dashboard-date-selector {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
  }

  /* Label période */
  .dashboard-date-selector > label {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 4px !important;
  }

  /* Masquer la flèche → */
  .dashboard-date-selector > span {
    display: none !important;
  }

  /* Inputs date - STYLE iOS-FRIENDLY */
  .dashboard-date-selector input[type="date"],
  #dashboardDateFrom,
  #dashboardDateTo {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
    font-size: 16px !important; /* IMPORTANT: évite zoom iOS */
    border: 2px solid #ddd !important;
    border-radius: 10px !important;
    background: white !important;
    color: #333 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
  }

  /* Placeholder visible */
  .dashboard-date-selector input[type="date"]::-webkit-datetime-edit-text,
  .dashboard-date-selector input[type="date"]::-webkit-datetime-edit-month-field,
  .dashboard-date-selector input[type="date"]::-webkit-datetime-edit-day-field,
  .dashboard-date-selector input[type="date"]::-webkit-datetime-edit-year-field {
    color: #333 !important;
  }

  /* Icône calendrier visible */
  .dashboard-date-selector input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 1 !important;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer !important;
  }

  /* Focus state */
  .dashboard-date-selector input[type="date"]:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
  }

  /* Boutons rapides - amélioration grille */
  .dashboard-quick-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Boutons uniformes */
  .dashboard-quick-buttons > button,
  .dashboard-quick-buttons > * > button {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 10px !important;
    font-size: 0.85rem !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  /* Dernier bouton (Réinitialiser) - pleine largeur */
  .dashboard-quick-buttons > button:last-child {
    grid-column: 1 / -1 !important;
  }

  /* Masquer séparateur */
  .dashboard-quick-buttons > div[style*="width: 1px"] {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIX #26: CALENDRIER MOBILE - CORRECTIONS COMPLÈTES                          */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  /* Section calendrier - padding réduit */
  #calendarSection {
    padding: 8px !important;
  }

  /* Header calendrier compact */
  .calendar-header-mobile {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
  }

  /* Titre CACHÉ sur mobile */
  .calendar-title-desktop,
  #calendarSection > .card > h2:first-of-type,
  #calendarSection h2:contains("Calendrier") {
    display: none !important;
  }

  /* Toggle filtres - visible et stylé */
  .calendar-filters-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    background: linear-gradient(135deg, #714B67 0%, #5a3a52 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
  }

  /* Panel filtres - caché par défaut */
  .calendar-filters-panel {
    display: none !important;
    background: #f5f5f5 !important;
    padding: 12px !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
  }

  .calendar-filters-panel.open {
    display: block !important;
  }

  /* Auto-refresh indicator - CACHÉ */
  #calendar-refresh-indicator,
  .calendar-auto-refresh,
  div[id*="refresh-indicator"] {
    display: none !important;
  }

  /* Calendrier - hauteur maximale */
  #calendar {
    height: calc(100vh - 160px) !important;
    min-height: 450px !important;
  }

  /* FullCalendar toolbar - ultra compact */
  .fc .fc-toolbar.fc-header-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
    padding: 4px !important;
    background: #f8f9fa !important;
    border-radius: 8px !important;
  }

  /* Titre mois - compact */
  .fc .fc-toolbar-title {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    flex: 0 1 auto !important;
    order: 2 !important;
    text-align: center !important;
  }

  /* Boutons nav (prev/next) */
  .fc .fc-toolbar .fc-prev-button,
  .fc .fc-toolbar .fc-next-button {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 8px !important;
  }

  .fc .fc-toolbar .fc-button-group:first-child {
    order: 1 !important;
  }

  .fc .fc-toolbar .fc-button-group:last-child {
    order: 3 !important;
  }

  /* Today et vues - plus petits */
  .fc .fc-toolbar .fc-today-button,
  .fc .fc-toolbar .fc-dayGridMonth-button,
  .fc .fc-toolbar .fc-timeGridWeek-button,
  .fc .fc-toolbar .fc-timeGridDay-button {
    padding: 6px 8px !important;
    font-size: 0.7rem !important;
    border-radius: 6px !important;
  }

  /* Événements lisibles */
  .fc-event {
    padding: 2px 4px !important;
    font-size: 0.7rem !important;
    border-radius: 4px !important;
    min-height: 18px !important;
    line-height: 1.2 !important;
  }

  .fc-event-title {
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .fc-event-time {
    font-weight: 700 !important;
    margin-right: 4px !important;
  }

  /* Jours du calendrier */
  .fc-daygrid-day {
    min-height: 60px !important;
  }

  .fc-daygrid-day-number {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 4px !important;
  }

  /* Jour courant - discret avec bordure */
  .fc-day-today {
    background: transparent !important;
    border-bottom: 3px solid #714B67 !important;
  }

  .fc-day-today .fc-daygrid-day-number {
    color: #714B67 !important;
    font-weight: 700 !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════ */
  /* CALENDRIER MOBILE - FIX IMAGES ET MISE EN PAGE                              */
  /* ═══════════════════════════════════════════════════════════════════════════ */

  /* MASQUER toutes les images dans les événements */
  .fc-event img,
  .fc-event-main img,
  .fc-daygrid-event img,
  .fc-daygrid-event-harness img {
    display: none !important;
  }

  /* Numéros de semaine compacts */
  .fc-daygrid-week-number {
    font-size: 0.55rem !important;
    padding: 1px 2px !important;
    background: transparent !important;
    color: #999 !important;
    min-width: auto !important;
    width: auto !important;
  }

  /* Colonne numéro semaine réduite */
  .fc .fc-daygrid-body td.fc-daygrid-week-number {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
  }

  /* Cellules du calendrier */
  .fc-daygrid-day-frame {
    min-height: 55px !important;
    max-height: 80px !important;
    overflow: hidden !important;
  }

  /* Zone des événements limitée */
  .fc-daygrid-day-events {
    max-height: 45px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 1px !important;
  }

  /* Événements ultra compacts */
  .fc-daygrid-event {
    padding: 1px 3px !important;
    margin: 0 1px 1px 1px !important;
    font-size: 0.6rem !important;
    min-height: 14px !important;
    max-height: 16px !important;
    overflow: hidden !important;
    border-radius: 3px !important;
  }

  .fc-daygrid-event .fc-event-main {
    padding: 0 !important;
    overflow: hidden !important;
  }

  .fc-daygrid-event .fc-event-time {
    font-size: 0.55rem !important;
    font-weight: 600 !important;
  }

  .fc-daygrid-event .fc-event-title {
    font-size: 0.55rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Lien "plus" compact */
  .fc-daygrid-more-link {
    font-size: 0.6rem !important;
    padding: 1px 3px !important;
    margin-top: 1px !important;
  }

  /* En-têtes jours de la semaine */
  .fc-col-header-cell {
    padding: 4px 0 !important;
  }

  .fc-col-header-cell-cushion {
    font-size: 0.7rem !important;
    padding: 2px !important;
  }

  /* Numéro du jour */
  .fc-daygrid-day-top {
    padding: 2px !important;
  }

  .fc-daygrid-day-number {
    font-size: 0.75rem !important;
    padding: 2px 4px !important;
  }

  /* Toolbar calendrier mobile */
  .fc-toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  .fc-toolbar-title {
    font-size: 1rem !important;
    order: -1 !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 4px !important;
  }

  .fc-toolbar-chunk {
    display: flex !important;
    gap: 4px !important;
  }

  .fc-button {
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
  }

  .fc-button-group .fc-button {
    padding: 4px 6px !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════════ */
  /* VUE MOIS MOBILE - COMPTEUR SEULEMENT + CLIC POUR DÉTAILS                    */
  /* ═══════════════════════════════════════════════════════════════════════════ */

  /* Masquer tous les événements individuels sur mobile */
  .fc-daygrid-event-harness,
  .fc-daygrid-event,
  .fc-daygrid-more-link {
    display: none !important;
  }

  /* Cellules cliquables avec curseur */
  .fc-daygrid-day {
    cursor: pointer !important;
    min-height: 50px !important;
  }

  .fc-daygrid-day:active {
    background: rgba(113, 75, 103, 0.1) !important;
  }

  /* Frame du jour - position relative pour le compteur */
  .fc-daygrid-day-frame {
    position: relative !important;
    min-height: 45px !important;
  }

  /* Numéro du jour */
  .fc-daygrid-day-number {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 4px 6px !important;
  }

  /* Jour courant - discret avec bordure */
  .fc-day-today {
    background: transparent !important;
    border-bottom: 3px solid #714B67 !important;
  }

  .fc-day-today .fc-daygrid-day-number {
    color: #714B67 !important;
    font-weight: 700 !important;
  }

  /* Toolbar compact */
  .fc-toolbar {
    margin-bottom: 8px !important;
  }

  .fc-toolbar-title {
    font-size: 1rem !important;
  }

  /* En-têtes jours de la semaine */
  .fc-col-header-cell-cushion {
    font-size: 0.75rem !important;
    padding: 6px 2px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIX #27: MODALS MOBILE - FULL SCREEN + FORMULAIRES ADAPTATIFS               */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  /* TOUS les modals - FULL SCREEN sur mobile */
  .modal {
    padding: 0 !important;
    align-items: flex-start !important;
  }

  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .modal-header {
    position: sticky !important;
    top: 0 !important;
    background: white !important;
    z-index: 10 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #eee !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 56px !important;
  }

  .modal-header h3 {
    font-size: 1rem !important;
    margin: 0 !important;
    flex: 1 !important;
  }

  .modal-close {
    width: 44px !important;
    height: 44px !important;
    font-size: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
  }

  .modal-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    background: white !important;
    z-index: 10 !important;
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #eee !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .modal-footer .btn,
  .modal-footer button {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
  }

  /* GRIDS dans les forms - TOUJOURS en colonne sur mobile */
  .modal-body div[style*="grid-template-columns"],
  .modal-body div[style*="display: grid"],
  form div[style*="grid-template-columns"],
  form div[style*="display: grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* TOUS les form-group */
  .form-group {
    margin-bottom: 16px !important;
  }

  .form-group label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
  }

  /* TOUS les inputs dans les modals */
  .modal input[type="text"],
  .modal input[type="email"],
  .modal input[type="password"],
  .modal input[type="number"],
  .modal input[type="date"],
  .modal input[type="time"],
  .modal input[type="datetime-local"],
  .modal select,
  .modal textarea,
  .form-control {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 12px !important;
    font-size: 16px !important; /* ÉVITE ZOOM iOS */
    border: 2px solid #ddd !important;
    border-radius: 10px !important;
    background: white !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  .modal textarea {
    height: auto !important;
    min-height: 100px !important;
  }

  /* Focus states */
  .modal input:focus,
  .modal select:focus,
  .modal textarea:focus {
    border-color: #3b82f6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
  }

  /* Checkbox et radio - plus grands */
  .modal input[type="checkbox"],
  .modal input[type="radio"] {
    width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
  }

  /* Labels avec checkbox inline */
  .modal label:has(input[type="checkbox"]),
  .modal label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIX #28: BOUTONS GLOBAUX - UNIFORMITÉ SUR TOUS LES ÉCRANS                   */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  /* TOUS les boutons - taille minimale tactile */
  .btn,
  button:not(.fc-button):not(.modal-close):not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out) {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  /* Boutons en ligne - flex wrap */
  div[style*="display: flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }

  /* Groupes de boutons - en colonne sur très petit écran */
  .btn-group,
  .button-group,
  div[style*="display: flex"] > .btn + .btn,
  div[style*="display: flex"] > button + button {
    margin-top: 0 !important;
  }

  /* Boutons d'action dans les cards */
  .client-card .btn,
  .card .btn,
  .popup-content .btn {
    width: 100% !important;
    margin-bottom: 8px !important;
  }

  .client-card .btn:last-child,
  .card .btn:last-child,
  .popup-content .btn:last-child {
    margin-bottom: 0 !important;
  }

  /* Info-row boutons */
  .info-row .btn,
  .client-info .btn {
    min-width: 100px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIX #29: CALENDAR EVENT DETAILS MODAL - BOUTONS ALIGNÉS                     */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  /* Modal détails événement (inline styles) */
  div[style*="position: fixed"][style*="rgba(0,0,0,0.5)"] {
    padding: 0 !important;
    align-items: flex-start !important;
  }

  div[style*="position: fixed"][style*="rgba(0,0,0,0.5)"] > .client-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Boutons footer événement - en colonne */
  div[style*="position: fixed"] div[style*="border-top"][style*="flex-wrap"] {
    flex-direction: column !important;
    gap: 10px !important;
  }

  div[style*="position: fixed"] div[style*="border-top"] > div {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  div[style*="position: fixed"] div[style*="border-top"] .btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIX #30: TRÈS PETITS ÉCRANS (320px - iPhone SE, petits Android)             */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  /* Header plus compact */
  .header {
    padding: 8px 12px !important;
  }

  .header h1 {
    font-size: 1rem !important;
  }

  /* Modals encore plus compacts */
  .modal-header {
    padding: 10px 12px !important;
  }

  .modal-header h3 {
    font-size: 0.9rem !important;
  }

  .modal-body {
    padding: 12px !important;
  }

  .modal-footer {
    padding: 10px 12px !important;
  }

  /* Inputs légèrement plus petits mais toujours lisibles */
  .modal input,
  .modal select,
  .form-control {
    padding: 10px !important;
    font-size: 16px !important; /* Toujours 16px pour éviter zoom */
  }

  /* Boutons texte plus petit */
  .btn,
  button {
    font-size: 0.85rem !important;
    padding: 8px 12px !important;
  }

  /* KPIs plus compacts */
  .kpi-card {
    padding: 8px !important;
  }

  .kpi-card h3 {
    font-size: 0.7rem !important;
  }

  /* Calendrier - encore plus compact */
  .fc .fc-toolbar-title {
    font-size: 0.8rem !important;
  }

  .fc .fc-button {
    padding: 4px 6px !important;
    font-size: 0.65rem !important;
  }

  .fc-event {
    font-size: 0.65rem !important;
    padding: 1px 3px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIX #31: DASHBOARD FILTRES COLLAPSIBLES SUR MOBILE                          */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Desktop : toggle caché, filtres visibles */
.dashboard-filters-toggle {
  display: none;
}

.dashboard-header-mobile {
  display: block;
}

@media (max-width: 1280px) {
  /* Header compact sur mobile */
  .dashboard-header-mobile {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 10px !important;
    padding: 0 4px !important;
  }

  .dashboard-header-mobile .section-header {
    flex: 1 !important;
    margin-bottom: 0 !important;
  }

  .dashboard-header-mobile .section-header h2 {
    font-size: 1.1rem !important;
    margin-bottom: 0 !important;
  }

  /* Cacher la description sur mobile */
  .dashboard-subtitle {
    display: none !important;
  }

  /* Bouton toggle filtres - visible sur mobile */
  .dashboard-filters-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }

  /* Panel filtres - CACHÉ par défaut sur mobile */
  .dashboard-filters-panel {
    display: none !important;
    margin-bottom: 10px !important;
    border-radius: 12px !important;
    padding: 12px !important;
  }

  .dashboard-filters-panel.open {
    display: block !important;
  }

  /* Titre filtres caché sur mobile (redondant avec le bouton) */
  .dashboard-filters-title {
    display: none !important;
  }

  /* Filtres internes - en colonne */
  .dashboard-filters-panel > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Chaque groupe de filtre - pleine largeur */
  .dashboard-filters-panel > div > div {
    width: 100% !important;
  }

  /* Labels filtres */
  .dashboard-filters-panel label {
    font-size: 0.85rem !important;
  }

  /* KPIs - Directement visibles, plus compacts */
  .dashboard-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .kpi-card {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  .kpi-card > div:first-child {
    font-size: 0.7rem !important;
    margin-bottom: 4px !important;
  }

  .kpi-card > div:nth-child(2) {
    font-size: 1.3rem !important;
  }

  /* Kanban plus compact */
  #dashboardSection .kanban-board {
    margin-top: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIX #32: HEADER GLOBAL COMPACT SUR MOBILE                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  /* Section headers plus compacts */
  .section-header {
    margin-bottom: 8px !important;
    padding: 0 !important;
  }

  .section-header h2 {
    font-size: 1.1rem !important;
    margin-bottom: 2px !important;
  }

  .section-header p {
    font-size: 0.75rem !important;
    margin-top: 2px !important;
  }

  /* Cards plus compactes */
  .card {
    padding: 10px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
  }

  /* Content padding réduit */
  .content {
    padding: 8px !important;
  }

  /* Content sections padding réduit */
  .content-section {
    padding: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIX #33: DASHBOARD BOUTONS PÉRIODE - STYLE + SURBRILLANCE                   */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Base button style */
.dashboard-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 38px;
}

/* Refresh button - green */
.dashboard-btn-refresh {
  background: #28a745;
  color: white;
}

.dashboard-btn-refresh:hover {
  background: #218838;
  transform: scale(1.02);
}

/* Period buttons - default state */
.dashboard-btn-period {
  background: #e9ecef;
  color: #495057;
  border: 2px solid transparent;
}

.dashboard-btn-period:hover {
  background: #dee2e6;
}

/* Period button - ACTIVE/SELECTED state */
.dashboard-btn-period.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: 2px solid #764ba2;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
  transform: scale(1.05);
}

/* Custom period button */
.dashboard-btn-custom {
  background: #6c757d;
  color: white;
}

.dashboard-btn-custom:hover {
  background: #5a6268;
}

.dashboard-btn-custom.active {
  background: #17a2b8;
  box-shadow: 0 2px 8px rgba(23, 162, 184, 0.4);
}

/* Apply button */
.dashboard-btn-apply {
  background: #28a745;
  color: white;
}

.dashboard-btn-apply:hover {
  background: #218838;
}

/* Separator */
.dashboard-btn-separator {
  width: 1px;
  height: 24px;
  background: #ddd;
  margin: 0 0.25rem;
}

/* Mobile styles */
@media (max-width: 1280px) {
  .dashboard-period-buttons {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .dashboard-btn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 0.8rem !important;
    padding: 8px !important;
  }

  .dashboard-btn-separator {
    display: none !important;
  }

  /* Refresh button - full width on first row */
  .dashboard-btn-refresh {
    grid-column: 1 / -1 !important;
  }

  /* Period button active - more visible on mobile */
  .dashboard-btn-period.active {
    transform: scale(1.02) !important;
    border-width: 3px !important;
  }

  /* Custom date selector - column layout */
  #dashboardCustomPeriod {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px !important;
    background: #f8f9fa !important;
    border-radius: 10px !important;
    margin-top: 10px !important;
  }

  #dashboardCustomPeriod input[type="date"] {
    width: 100% !important;
    height: 48px !important;
    font-size: 16px !important;
    padding: 10px !important;
    border-radius: 8px !important;
  }

  #dashboardCustomPeriod label {
    font-size: 0.85rem !important;
    margin-bottom: -6px !important;
  }

  .dashboard-btn-apply {
    width: 100% !important;
    min-height: 48px !important;
    margin-top: 4px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* FIX #34: MODAL MÉTÉO MOBILE - DÉTAILS COMPLETS                              */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* Overlay modal météo */
.weather-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10000;
  padding: 0;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Contenu modal météo */
.weather-modal-content {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: white;
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

/* Header modal */
.weather-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 10;
}

.weather-modal-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.weather-city-emoji {
  font-size: 2.5rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.weather-modal-title h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.weather-current-temp {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffd700;
}

.weather-modal-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.weather-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Body modal */
.weather-modal-body {
  padding: 1.25rem;
}

/* Section Aujourd'hui */
.weather-today-section {
  margin-bottom: 1.5rem;
}

.weather-today-section h4,
.weather-forecast-section h4 {
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: capitalize;
}

/* Lever/Coucher soleil */
.weather-sun-times {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.sun-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.sun-icon {
  font-size: 1.5rem;
}

.sun-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sun-value {
  font-size: 1rem;
  font-weight: 600;
  color: #ffd700;
}

/* Grille périodes (Matin, Après-midi, Soir) */
.weather-periods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.weather-period-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1rem 0.5rem;
  text-align: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.period-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.period-icon {
  font-size: 1.25rem;
}

.period-name {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.period-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.period-emoji {
  font-size: 2rem;
}

.period-temp {
  font-size: 1.25rem;
  font-weight: 700;
}

.period-details {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.6);
}

/* Section prévisions */
.weather-forecast-section {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.25rem;
}

.weather-days-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.weather-day-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.day-info {
  display: flex;
  flex-direction: column;
}

.day-name {
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: capitalize;
}

.day-date {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.day-weather {
  display: flex;
  align-items: center;
}

.day-emoji {
  font-size: 2rem;
}

.day-temps {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
}

.temp-max {
  font-size: 1.25rem;
  font-weight: 700;
}

.temp-min {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.day-extra {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: -0.25rem;
}

.day-rain {
  color: #64b5f6;
}

.day-desc {
  text-transform: capitalize;
}

/* Desktop: modal centré */
@media (min-width: 1281px) {
  .weather-modal-overlay {
    align-items: center;
    padding: 1rem;
  }

  .weather-modal-content {
    border-radius: 24px;
    max-height: 80vh;
  }

  .weather-periods-grid {
    gap: 1rem;
  }

  .weather-period-card {
    padding: 1.25rem 0.75rem;
  }

  .period-emoji {
    font-size: 2.5rem;
  }

  .period-temp {
    font-size: 1.5rem;
  }
}

/* Très petits écrans */
@media (max-width: 380px) {
  .weather-modal-content {
    max-height: 90vh;
  }

  .weather-periods-grid {
    gap: 0.5rem;
  }

  .weather-period-card {
    padding: 0.75rem 0.25rem;
  }

  .period-emoji {
    font-size: 1.5rem;
  }

  .period-temp {
    font-size: 1rem;
  }

  .period-details {
    font-size: 0.6rem;
  }

  .day-emoji {
    font-size: 1.5rem;
  }
}

/* ===== MASQUER ZOOM LEAFLET SUR MOBILE - PRIORITÉ FINALE ===== */
@media (max-width: 1280px) {
  .leaflet-control-zoom,
  .leaflet-top.leaflet-left .leaflet-control-zoom,
  .leaflet-control-container .leaflet-control-zoom {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ===== MODAL TEMPLATE EDITOR - RESPONSIVE MOBILE ===== */
@media (max-width: 768px) {
  .template-editor-modal {
    padding: 0 !important;
  }

  .template-editor-content {
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .template-editor-header {
    padding: 1rem !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .template-editor-title {
    font-size: 1.1rem !important;
  }

  .template-editor-subtitle {
    display: none !important;
  }

  /* Les 3 colonnes en une seule colonne */
  .template-editor-body {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    overflow-y: auto !important;
  }

  .template-editor-left,
  .template-editor-center,
  .template-editor-right {
    border-right: none !important;
    border-bottom: 1px solid #eee !important;
    min-height: auto !important;
    max-height: none !important;
  }

  .template-editor-left {
    padding: 1rem !important;
    order: 1 !important;
  }

  .template-editor-center {
    order: 2 !important;
    max-height: 400px !important;
  }

  .template-editor-right {
    order: 3 !important;
    max-height: 350px !important;
    border-bottom: none !important;
  }

  /* Formulaire sur mobile */
  .template-editor-left > div:first-child {
    overflow-y: visible !important;
  }

  .template-editor-left div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .template-editor-textarea {
    min-height: 200px !important;
  }

  .template-editor-actions {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .template-editor-btn {
    width: 100% !important;
  }

  /* Preview sur mobile */
  .template-preview-header {
    padding: 0.75rem !important;
  }

  .template-preview-content {
    padding: 1rem !important;
  }

  /* Assistant IA sur mobile */
  .ai-assistant-header {
    padding: 1rem !important;
  }

  .ai-chat-messages {
    max-height: 150px !important;
  }

  .ai-chat-input-area {
    padding: 0.75rem !important;
  }

  .ai-chat-textarea {
    rows: 2 !important;
  }
}

/* ========================================
   FIX CHAT IA MOBILE - Publipostage
======================================== */
@media (max-width: 768px) {
  /* Container principal du chat doit avoir une hauteur fixe sur mobile */
  .template-editor-right {
    min-height: 400px !important;
    max-height: 60vh !important;
    height: auto !important;
  }

  /* Zone des messages doit avoir une hauteur minimale */
  .ai-chat-messages {
    min-height: 200px !important;
    max-height: 40vh !important;
    flex: 1 1 auto !important;
  }

  /* Input area ne doit pas prendre trop de place */
  .ai-chat-input-area {
    flex-shrink: 0 !important;
  }

  /* Messages individuels du chat */
  .chat-message-user,
  .chat-message-assistant {
    max-width: 95% !important;
    word-wrap: break-word !important;
  }
}

@media (max-width: 480px) {
  .template-editor-right {
    min-height: 350px !important;
    max-height: 55vh !important;
  }

  .ai-chat-messages {
    min-height: 150px !important;
    max-height: 35vh !important;
    padding: 0.75rem !important;
  }

  .ai-chat-textarea {
    font-size: 16px !important; /* Évite le zoom iOS */
  }
}