/* ==========================================================================
   TABLE DES MATIÈRES :
   1. SYSTÈME DE DESIGN (Variables, Reset)
   2. MISE EN PAGE GLOBALE (Header, Conteneur Principal)
   3. BARRE DE RECHERCHE ET MASQUE (Input, Postal Mask)
   4. FILTRES ET SÉLECTEURS (Régions, Départements)
   5. RÉSULTATS ET GRILLE (Cartes, Badges, Stacks)
   6. VUE DÉTAILLÉE (Fiche Commune, Badges XL)
   7. MODALES ET COMPOSANTS (À Propos, Aide)
   8. FOOTER ET UTILITAIRES (Boutons, Animations)
   ========================================================================== */

/* 1. SYSTÈME DE DESIGN */
/* 1. SYSTÈME DE DESIGN - Google Chrome Refresh 2023 (Material 3) */
:root {
  /* Tonal Palette - Material 3 Blue */
  --m3-primary: #3b82f6;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #dbeafe;
  --m3-on-primary-container: #1e3a8a;
  
  --m3-secondary: #64748b;
  --m3-on-secondary: #ffffff;
  --m3-secondary-container: #f1f5f9;
  --m3-on-secondary-container: #0f172a;
  
  --m3-surface: #f4f7fb;
  --m3-on-surface: #0f172a;
  --m3-surface-container: #e2e8f0;
  --m3-surface-variant: #cbd5e1;
  --m3-outline: #94a3b8;

  /* Global variables adapted to CR23 - Softened */
  --bg-color: #f4f7fb;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --border: #e2e8f0;
  --accent: #3b82f6;
  --accent-soft: rgba(59, 130, 246, 0.1);
  --focus-glow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  
  /* CR23 Shadows */
  --shadow-1: 0 1px 2px 0 rgba(0,0,0,0.03), 0 1px 3px 1px rgba(0,0,0,0.05);
  --shadow-premium: 0 4px 12px 0 rgba(0,0,0,0.06), 0 1px 4px 0 rgba(0,0,0,0.04);
  
  /* CR23 Radii */
  --radius: 28px;      /* Large rounded corners for buttons, search bar, modals */
  --radius-md: 16px;   /* Medium corners for cards */
  --radius-sm: 8px;    /* Small corners for chips/tags */
  
  --header-height: 72px;
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-blur: blur(12px);
  --glass-border: rgba(255, 255, 255, 0.5);

  /* Search Mode Colors - Light (Materials 3 Colors) */
  --search-mrn: #0f172a;
  --search-mrp: #3b82f6;
  --search-mrd: #10b981;
  --search-mri: #ef4444;
  --search-mrf: #ec4899;
  --search-mrm: #1e293b;
  --search-mrx: #0ea5e9;
  --search-mrc: #84cc16;
  --search-mrl: #f59e0b;
  --search-izr: #eab308;
  --search-izt: #3b82f6;
  --search-izp: #f59e0b;
  --indicator-inactive: #94a3b8;

  /* Layout Specific Variables - Light */
  --header-bg: #ffffff;
  --header-text: #0f172a;
  --header-text-secondary: #475569;
  --toolbar-bg: #ffffff;
  --toolbar-border: transparent;
  --workspace-bg: #f4f7fb;
  --footer-bg: #f8fafc;

  /* History Card Variables - Light */
  --history-bg: #f1f5f9;
  --history-icon-filter: brightness(0) invert(0.2);

  /* Splash Loader Contrast */
  --loader-white: #cbd5e1;
}

/* Thème Sombre - Midnight Navy */
[data-theme="dark"] {
  --m3-primary: #818cf8;
  --m3-on-primary: #ffffff;
  --m3-primary-container: #3730a3;
  --m3-on-primary-container: #e0e7ff;
  
  --m3-secondary: #94a3b8;
  --m3-on-secondary: #0f172a;
  --m3-secondary-container: #334155;
  --m3-on-secondary-container: #f1f5f9;
  
  --m3-surface: #020617;
  --m3-on-surface: #f1f5f9;
  --m3-surface-container: #0f172a;
  --m3-surface-variant: #334155;
  --m3-outline: #475569;

  --bg-color: #020617;
  --surface: #1e293b;
  --surface-solid: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --border: rgba(255, 255, 255, 0.08);
  --accent: #818cf8;
  --accent-soft: rgba(129, 140, 248, 0.15);
  --focus-glow: 0 0 0 3px rgba(129, 140, 248, 0.3);
  
  --shadow-1: 0 1px 3px 0 rgba(0,0,0,0.40), 0 1px 2px 0 rgba(0,0,0,0.25);
  --shadow-premium: 0 4px 12px 0 rgba(0,0,0,0.5), 0 1px 4px 0 rgba(0,0,0,0.3);
  
  --glass-bg: rgba(15, 23, 42, 0.85);
  --glass-border: rgba(255, 255, 255, 0.05);

  /* Search Mode Colors - Dark */
  --search-mrn: #ffffff;
  --search-mrp: #818cf8;
  --search-mrd: #34d399;
  --search-mri: #f87171;
  --search-mrf: #f472b6;
  --search-mrm: #f1f5f9;
  --search-mrx: #38bdf8;
  --search-mrc: #a3e635;
  --search-mrl: #fbbf24;
  --search-izr: #fde047;
  --search-izt: #818cf8;
  --search-izp: #fbbf24;
  --indicator-inactive: #64748b;

  /* Layout Specific Variables - Dark */
  --header-bg: #0f172a;
  --header-text: #f1f5f9;
  --header-text-secondary: #cbd5e1;
  --toolbar-bg: #0f172a;
  --toolbar-border: transparent;
  --workspace-bg: #020617;
  --footer-bg: #0f172a;

  /* History Card Variables - Dark */
  --history-bg: #1e293b;
  --history-icon-filter: brightness(0) invert(0.85);

  /* Splash Loader Contrast */
  --loader-white: #ffffff;
}

/* Custom Professional Scrollbar - Chrome Refresh Style */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
  background-clip: content-box;
}

/* Scrollbar for Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* 1.1. OFFLINE MODAL SPECIFIC STYLES */
.modal-content--offline {
  max-width: 450px !important;
  text-align: center;
}

.offline-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
}

.offline-img {
  width: 100px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.offline-message {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-primary);
  font-weight: 500;
}

/* Classes de couleur pour les modes de recherche (utilisées dans l'historique IZP) */
.mode-color-mrn {
  color: var(--search-mrn);
}

.mode-color-mrp {
  color: var(--search-mrp);
}

.mode-color-mrd {
  color: var(--search-mrd);
}

.mode-color-mri {
  color: var(--search-mri);
}

.mode-color-mrf {
  color: var(--search-mrf);
}

.mode-color-mrx {
  color: var(--search-mrx);
}

.mode-color-mrm {
  color: var(--search-mrm);
}

.mode-color-mrc {
  color: var(--search-mrc);
}

.mode-color-mrl {
  color: var(--search-mrl);
}

.mode-color-izd {
  color: var(--search-mrd);
}

.mode-color-izr {
  color: var(--search-izr);
}

.mode-color-izt {
  color: var(--search-izt);
}

.mode-color-izp {
  color: var(--search-izp);
}

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


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

/* 2. MISE EN PAGE GLOBALE */
body {
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--workspace-bg);
  color: var(--text-primary);
  height: 100vh;
  /* Fixed height */
  overflow: hidden;
  /* Hide main body scrollbar */
  display: flex;
  flex-direction: column;
}

header {
  background: var(--header-bg);
  padding: 0 32px;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex-shrink: 0;
  z-index: 1200;
  border-bottom: 1px solid var(--border);
}

.scrollable-content {
  height: calc(100vh - var(--header-height) - 50px);
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--workspace-bg);
}

.logo {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.logo-link:hover {
  opacity: 0.8;
}

.logo-img {
  height: 80px;
  width: auto;
  object-fit: contain
}

.main-nav {
  display: flex;
  gap: 30px;
  align-items: center
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 0;
  margin: 0 15px;
  background: transparent;
  border: none;
  position: relative;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
}

.nav-link:hover {
  color: var(--m3-primary);
  background-color: transparent;
}

.nav-link.active {
  color: var(--m3-primary);
  background-color: transparent;
  font-weight: 600;
}

/* Effet Underline Grow - Drapeau Français */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, 
    #0055A4 33.33%, 
    #FFFFFF 33.33%, 
    #FFFFFF 66.66%, 
    #EF4135 66.66%
  );
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease;
  opacity: 0;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
  opacity: 1;
}

.theme-toggle {
  background: var(--m3-surface-container);
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  background: var(--bg-color);
  border-color: var(--accent);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.15);
}

.sun-moon-container {
  width: 24px;
  height: 24px;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sun-moon-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rays for Sun (Light Mode) */
.sun-moon-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 2px dashed var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: all 0.4s ease;
}

/* Mask for Moon (Dark Mode) */
.sun-moon-icon::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  background: var(--surface);
  border-radius: 50%;
  transform: scale(0);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode States */
[data-theme="dark"] .sun-moon-container {
  transform: rotate(40deg);
}

[data-theme="dark"] .sun-moon-icon {
  background: var(--accent);
}

[data-theme="dark"] .sun-moon-icon::before {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}

[data-theme="dark"] .sun-moon-icon::after {
  transform: scale(1);
  background: var(--surface);
  /* Mask matches the container background */
}

.main-container {
  flex: 1;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 70px 20px;
  display: flex;
  flex-direction: column;
  align-items: center
}


/* 3. BARRE DE RECHERCHE ET MASQUE */
.search-container {
  width: 100%;
  z-index: 1100;
  margin: 0;
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  background: var(--toolbar-bg);
}

[data-theme="dark"] .search-container {
  background: linear-gradient(to right, #020617, #0f172a), var(--toolbar-brushed);
  background-blend-mode: overlay;
}


.indicator-zone {
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 20px;
  background: var(--m3-secondary-container);
  border-radius: 8px;
  position: relative;
  /* Cadre en relief (Thème clair par défaut) - Visibilité accrue */
  border-top: 4px solid rgba(255, 255, 255, 1);
  border-left: 4px solid rgba(255, 255, 255, 1);
  border-right: 4px solid rgba(0, 0, 0, 0.15);
  border-bottom: 4px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Incrustation d'une petite loupe */
.indicator-zone::after {
  content: '🔍';
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  border: 1px solid var(--border);
  z-index: 2;
}

[data-theme="dark"] .indicator-zone {
  border-top: 4px solid rgba(255, 255, 255, 0.15);
  border-left: 4px solid rgba(255, 255, 255, 0.15);
  border-right: 4px solid rgba(0, 0, 0, 0.6);
  border-bottom: 4px solid rgba(0, 0, 0, 0.8);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .indicator-zone::after {
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
}

.indicator-text {
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
  font-family: inherit;
  user-select: none;
  cursor: default;
  color: var(--m3-on-secondary-container) !important;
}

.izp-nav-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.izp-nav-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  line-height: 1;
}

.izp-nav-btn:hover:not(.disabled) {
  transform: scale(1.1);
  filter: brightness(1.1);
}

.izp-nav-btn.disabled,
.izp-nav-btn:disabled {
  background: var(--indicator-inactive);
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

.search-tools-zone {
  width: 100%;
  max-width: 1300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 0 20px;
}

.filter-config-row {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

.search-wrapper {
  width: 100%;
  max-width: 1000px;
  position: relative;
  z-index: 1;
  padding: 0;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.input-container {
  flex: 1;
  position: relative;
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  min-height: 80px;
  transition: all 0.2s ease;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-premium);
}

.input-container:hover {
  border-color: var(--m3-outline);
}

.input-container:focus-within {
  border-color: var(--m3-primary);
  box-shadow: var(--focus-glow), var(--shadow-premium);
}

.input-row {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px 16px 8px 24px;
  gap: 16px;
  flex: 1;
  order: 2;
}

.indicators-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px 0 12px;
  flex-wrap: wrap;
  order: 1;
}

.mode-indicator {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  background: transparent;
  transition: all 0.2s ease;
  letter-spacing: 0.2px;
  cursor: pointer;
  user-select: none;
}

.mode-indicator:hover {
  background: var(--m3-surface-variant);
  color: var(--text-primary);
}

/* Hover coloré par mode - RETIRÉ : l'indicateur s'allume uniquement au clic, pas au survol */

.mode-indicator.active {
  text-shadow: 0 0 4px currentColor;
  filter: drop-shadow(0 0 3px currentColor);
}

.mode-indicator[data-mode="MRN"].active {
  color: var(--search-mrn);
}

.mode-indicator[data-mode="MRP"].active {
  color: var(--search-mrp);
}

.mode-indicator[data-mode="IZD"].active {
  color: var(--search-mrd);
}

.mode-indicator[data-mode="MRI"].active {
  color: var(--search-mri);
}

.mode-indicator[data-mode="MRD"].active {
  color: var(--search-mrd);
}

.mode-indicator[data-mode="MRF"].active {
  color: var(--search-mrf);
}

.mode-indicator[data-mode="MRX"].active {
  color: var(--search-mrx);
}

.mode-indicator[data-mode="MRM"].active {
  color: var(--search-mrm);
}

.mode-indicator[data-mode="MRC"].active {
  color: var(--search-mrc);
}

.mode-indicator[data-mode="MRL"].active {
  color: var(--search-mrl);
}

.mode-indicator[data-mode="IZR"].active {
  color: var(--search-izr);
}

.mode-indicator[data-mode="IZT"].active {
  color: var(--search-izt);
  text-shadow: 0 0 6px var(--search-izt);
  filter: drop-shadow(0 0 3px var(--search-izt));
}

.mode-indicator[data-mode="IZP"].active {
  color: var(--search-izp);
  text-shadow: 0 0 6px var(--search-izp);
  filter: drop-shadow(0 0 3px var(--search-izp));
}

.indicator-group-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  align-self: center;
  margin: 0 8px;
  background: var(--border);
  flex-shrink: 0;
}


.toggles-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  flex-shrink: 0;
}

/* Search wrapper already defined above */

.search-input {
  width: 100%;
  padding: 8px 48px 8px 8px;
  /* padding-right réservé pour le bouton clear (X) */
  font-size: 1rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-primary);
  transition: none;
  height: 36px;
  position: relative;
  z-index: 2;
  font-family: monospace;
  letter-spacing: 2px;
  flex: 1;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postal-mask {
  position: absolute;
  top: 8px;
  left: 12px;
  right: 12px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--search-mrp);
  font-family: monospace;
  font-size: 1rem;
  z-index: 1;
  opacity: 1;
  letter-spacing: 2px;
  text-align: center;
}

/* Blinking dash animation */
@keyframes blink-dash {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.blink-dash {
  animation: blink-dash 1s step-end infinite;
  font-weight: bold;
}


[data-theme="light"] .postal-mask {
  color: var(--search-postal);
}

[data-theme="dark"] .postal-mask {
  color: var(--search-postal);
}

.search-input.invisible-text {
  color: transparent !important;
  caret-color: transparent !important;
  /* Caret invisible en mode masque postal/INSEE */
}

.search-input.insee-mode {
  color: red !important;
  caret-color: transparent !important;
}

.mask-digit-red {
  color: red !important;
}

.postal-mask.insee-mask {
  color: red !important;
}

.filters-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
}

.reset-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.reset-btn:hover {
  background: var(--bg-color);
  color: var(--accent);
  transform: rotate(-90deg);
}

.reset-btn:disabled {
  opacity: 0.3;
  cursor: default;
  transform: none;
  box-shadow: none;
  pointer-events: none;
  filter: grayscale(100%);
}

/* View Toggle Button */
.view-toggle-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.view-toggle-btn:hover {
  background: var(--bg-color);
  color: var(--accent);
  transform: scale(1.05);
}

.view-icon {
  position: absolute;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-icon--grid {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.view-icon--list {
  opacity: 0;
  transform: scale(0) rotate(90deg);
}

.view-toggle-btn.list-view {
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  border-color: var(--m3-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.view-toggle-btn:active {
  transform: scale(0.9) rotate(5deg);
}

.view-toggle-btn.list-view .view-icon--grid {
  opacity: 0;
  transform: scale(0) rotate(-180deg);
}

.view-toggle-btn.list-view .view-icon--list {
  opacity: 1;
  transform: scale(1) rotate(360deg);
}

/* Color Toggle Button (department color bands in list view) */
.color-toggle-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.color-toggle-btn:hover {
  background: var(--bg-color);
  transform: scale(1.05);
}

.color-toggle-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb, 108, 92, 231), 0.3);
}

.color-toggle-btn .color-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.color-toggle-btn.active .color-icon {
  transform: scale(1.15);
}

.color-toggle-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Define Zone Button (IZP) */
.define-zone-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.define-zone-btn:hover {
  background: var(--bg-color);
  transform: scale(1.08);
  border-color: var(--search-izp);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.define-zone-btn.izp-active {
  border-color: var(--search-izp);
  background: rgba(245, 158, 11, 0.12);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
  animation: izp-pulse 2s ease-in-out infinite;
}

@keyframes izp-pulse {

  0%,
  100% {
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.3);
  }

  50% {
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.6);
  }
}

[data-theme="dark"] .define-zone-btn.izp-active {
  background: rgba(252, 211, 77, 0.1);
  border-color: var(--search-izp);
  box-shadow: 0 0 10px rgba(252, 211, 77, 0.3);
}

/* 4. FILTRES ET SÉLECTEURS */
/* Filtres et Sélecteurs (Régions, Départements, etc.) */
.select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.select-wrapper::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
  opacity: 0.7;
}

/* Specific Icons via ID on wrapper */
#regionWrapper::before {
  background-image: var(--icon-region);
}

#deptWrapper::before {
  background-image: var(--icon-dept);
}

/* Dark Mode Icon Inversion - Force white for outline icons in dark mode */
[data-theme="dark"] .select-wrapper::before {
  filter: invert(1);
  opacity: 0.9;
}

.filter-select {
  padding: 8px 40px 8px 40px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background-color: var(--m3-surface-container-high);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444746' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  min-width: 180px;
  height: 40px;
  transition: all 0.2s ease;
}

.filter-select:hover {
  background-color: var(--m3-surface-container-highest);
  border-color: var(--m3-outline);
}

.filter-select:focus {
  outline: none;
  background-color: var(--surface);
  border-color: var(--m3-primary);
  box-shadow: var(--focus-glow);
}

.filter-select:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  background-color: var(--m3-surface-container-low);
}

.filter-select option {
  background-color: var(--surface);
  color: var(--text-primary);
}







.search-icon {
  font-size: 1.25rem;
  color: var(--text-secondary);
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-icon:hover {
  color: var(--m3-primary);
}

.search-icon.disabled {
  opacity: 0.38;
  pointer-events: none;
}

.clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: all 0.2s ease;
  z-index: 20;
}

.clear-btn:hover {
  background-color: var(--m3-surface-variant);
  color: var(--text-primary);
}

.footer-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  /* Space between items */
}

/* Add separator between footer items */
.footer-center>span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: var(--text-secondary);
  margin-left: 15px;
  vertical-align: middle;
  opacity: 0.5;
}



.welcome-text {
  text-align: center;
  max-width: 800px;
  margin: 15px auto;
  padding: 20px;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(0)
}

.welcome-text.hidden {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
  position: absolute;
  visibility: hidden
}

.welcome-text h2 {
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 20px;
  font-weight: 700
}

.welcome-text p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 15px
}

.welcome-text .data-source {
  font-size: 0.95rem;
  color: var(--text-secondary);
  opacity: 0.85
}

.welcome-text strong {
  color: var(--accent);
  font-weight: 600
}

/* 5. RÉSULTATS ET GRILLE */
.results-grid {
  width: 100%;
  display: block;
}

/* Grid layout wrapper */
.results-grid:not(:has(.results-list)) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 20px;
}

/* List View */
.results-list {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-premium);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  position: relative;
  /* overflow-x: auto removed to prevent breaking vertical sticky head */
  clip-path: inset(0 round var(--radius));
}

.results-list table {
  width: 100%;
  border-collapse: separate; /* Required for border-radius on cells */
  border-spacing: 0;
  table-layout: auto; 
}

/* ---- Sticky header styling ---- */
.results-list thead {
  position: sticky;
  top: 0;
  z-index: 110;
}

.results-list thead th {
  position: sticky;
  top: 0;
  z-index: 110;
  background-color: var(--surface);
  padding: 18px 20px;
  text-align: left;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m3-primary);
  font-family: 'Outfit', sans-serif;
  white-space: nowrap;
  border-bottom: 2px solid var(--border);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Soft shadow on the header itself */
}

/* Ensure body rows sit below the header */
.results-list tbody tr {
  position: relative;
  z-index: 1;
}

.results-list th {
  padding: 18px 20px;
  text-align: left;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m3-primary);
  background: var(--m3-surface-container-high);
  /* Deliberate per-column backgrounds on th via nth-child below */
  border-bottom: 2px solid var(--border);
  font-family: 'Outfit', sans-serif;
  white-space: nowrap;
  /* Prevent clipping by overflow:hidden parents */
  box-shadow: 0 2px 0 var(--border);
}

/* ---- Per-column distinct soft colours (header - OPAQUE) ---- */
.results-list thead th:nth-child(1) { background-color: #f0f4ff; } 
.results-list thead th:nth-child(2) { background-color: #fff9e6; } 
.results-list thead th:nth-child(3) { background-color: #f1f8f1; } 
.results-list thead th:nth-child(4) { background-color: #f8f2fa; } 
.results-list thead th:nth-child(5) { background-color: #fff2f0; } 

/* ---- Per-column distinct soft colours (body cells - SEMI-TRANSPARENT) ---- */
.results-list td:nth-child(1) { background-color: rgba(11, 87, 208, 0.06) !important; }
.results-list td:nth-child(2) { background-color: rgba(255, 193, 7, 0.10) !important; }
.results-list td:nth-child(3) { background-color: rgba(76, 175, 80, 0.08) !important; }
.results-list td:nth-child(4) { background-color: rgba(156, 39, 176, 0.06) !important; }
.results-list td:nth-child(5) { background-color: rgba(244, 67, 54, 0.06) !important; text-align: center; }

/* Dark mode overrides for soft backgrounds - MUST BE OPAQUE to hide results underneath */
[data-theme="dark"] .results-list thead th:nth-child(1) { background-color: #2a2b37; } 
[data-theme="dark"] .results-list thead th:nth-child(2) { background-color: #433d2a; } 
[data-theme="dark"] .results-list thead th:nth-child(3) { background-color: #2e352e; } 
[data-theme="dark"] .results-list thead th:nth-child(4) { background-color: #352b3b; } 
[data-theme="dark"] .results-list thead th:nth-child(5) { background-color: #3f2d2d; } 

[data-theme="dark"] .results-list td:nth-child(1) { background-color: #1a237e11 !important; }
[data-theme="dark"] .results-list td:nth-child(2) { background-color: #ffb30011 !important; }
[data-theme="dark"] .results-list td:nth-child(3) { background-color: #2e7d3211 !important; }
[data-theme="dark"] .results-list td:nth-child(4) { background-color: #6a1b9a11 !important; }
[data-theme="dark"] .results-list td:nth-child(5) { background-color: #c6282811 !important; }

/* Last column (NB CODES): always centred, never clipped */
.results-list th:last-child {
  text-align: center;
  min-width: 90px;
}

.results-list td:nth-child(5) {
  background: rgba(244, 67, 54, 0.04);
  text-align: center;
  min-width: 90px;
}

.results-list tbody tr {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.results-list tbody tr:hover td {
  /* Overlay hover tint on top of column colours */
  background-color: rgba(11, 87, 208, 0.07) !important;
}

.results-list tbody tr:hover {
  box-shadow: inset 4px 0 0 var(--accent);
}

.results-list tbody tr.is-selected td {
  background-color: rgba(11, 87, 208, 0.12) !important;
}

.results-list tbody tr.is-selected {
  box-shadow: inset 4px 0 0 var(--accent);
}

.results-list td {
  padding: 14px 20px;
  font-size: 0.97rem;
  color: var(--text-primary);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rounded bottom corners for the last row */
.results-list tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius);
}

.results-list tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius);
}

/* ---- Commune cell ---- */
.results-list .list-city-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

/* ---- Code postal cell ---- */
.results-list .list-postal-code-cell {
  white-space: nowrap;
  text-align: center;
}

.results-list .list-postal-code {
  /* Hérite du design de base .postal-badge */
  font-family: inherit;
  font-size: 0.85rem;
  padding: 4px 12px;
}

.results-list tbody tr:hover .list-postal-code,
.results-list tbody tr.is-selected .list-postal-code {
  transform: scale(1.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 100;
  background: #ffeb3b; /* Jaune vif */
  border: 1px solid var(--m3-primary);
  font-weight: 800;
}

/* ---- N° Dép. cell ---- */
.results-list .list-dept-code {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-weight: 700;
  font-size: 1rem;
  color: #2ea44f; /* Distinct Green */
  text-align: center;
}

/* ---- Département cell ---- */
.results-list .list-dept-name {
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* ---- NB Codes cell ---- */
.results-list .list-count {
  text-align: center;
  color: var(--text-secondary);
  font-weight: 600;
}

.results-list .list-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  background: #ef5350; /* Distinct Red/Coral */
  color: white;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Responsive list view */
@media (max-width: 1024px) {
  .results-list {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .results-list th,
  .results-list td {
    padding: 12px 15px;
    font-size: 0.85rem;
  }

  /* Don't hide columns if they fit, or hide only the least important */
  .results-list th:nth-child(4),
  .results-list td:nth-child(4) {
    display: none;
  }
}

@media (max-width: 600px) {
  .results-list th:nth-child(3),
  .results-list td:nth-child(3),
  .results-list th:nth-child(4),
  .results-list td:nth-child(4),
  .results-list th:nth-child(5),
  .results-list td:nth-child(5) {
    display: none;
  }
}

.results-grid.single-result {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: calc(100vh - var(--header-height) - 140px);
  flex: 1;
  padding: 0 20px 30px 20px;
}

/* Hide scrollbar when showing detail card */
.scrollable-content.no-scroll {
  overflow: hidden;
}

/* Card used by list and single (XL variant) */
.result-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--border);
  position: relative;
  min-height: 120px;
  transition: all 0.2s ease;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  width: 100%
}

/* Nom de la ville : pas de troncature, retour à la ligne automatique */
.city-name {
  font-size: 1.25rem;
  font-weight: 600;
  min-width: 0;
  line-height: 1.4;
  color: var(--text-primary);
}

/* Postal badge base (yellow/black) with rounded corners */
/* Badge postal : largeur fixe pour garantir l'alignement visuel */
.postal-badge {
  background: #ffeb3b;
  color: #1a1c1e;
  padding: 4px 12px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.3s ease;
  min-width: 60px;
  flex-shrink: 0;
}

.postal-badge--giant {
  min-width: 120px;
  font-size: 1.6rem;
  padding: 12px 24px;
}

.result-card.is-selected {
  border-color: var(--accent);
  background: rgba(255, 235, 59, 0.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

[data-theme="light"] .result-card.is-selected {
  background: rgba(0, 0, 0, 0.02);
}



/* Stacked Badge Effect */
.badge-stack {
  position: relative;
  width: 85px;
  min-width: 85px;
  flex-shrink: 0;
  /* Match single badge height */
  height: 38px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  cursor: help;
}

.badge-layer {
  position: absolute;
  width: 100%;
  /* Match badge width dynamically */
  height: 28px; /* Slightly shorter for better stack effect */
  border-radius: 100px;
  background: #ffeb3b;
  border: 1px solid rgba(0, 0, 0, 0.1);
  opacity: 0.4;
}

.badge-layer--bottom {
  transform: translate(-6px, -6px);
  z-index: 1;
}

.badge-layer--middle {
  transform: translate(-3px, -3px);
  z-index: 2;
  opacity: 0.8;
}

.postal-badge--multi {
  position: relative;
  z-index: 3;
  width: 100%;
}

/* Red Notification Badge on Stack */
.badge-stack .notification-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  left: auto;
  /* Reset left */
  width: 24px;
  height: 24px;
  background-color: #ef4444;
  /* Red */
  color: white;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
  /* Stronger shadow */
  border: 1px solid white;
}





.badge-stack:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Tooltip for help icon */
.help-icon {
  position: relative;
  cursor: help;
}



/* Card variants */
.result-card--clickable {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.results-grid:not(.is-keyboard-mode) .result-card--clickable:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
  border-color: var(--accent);
  z-index: 1000;
  /* Ensure the hovered card and its tooltip are above everything else */
}

.result-card--xl {
  padding: 40px;
  min-height: auto;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-premium);
  position: relative; /* Ensure ribbon position: absolute works */
  overflow: hidden; /* Clamp the top of the ribbon to the card radius */
  /* Cadre en relief (Thème clair par défaut) - Visibilité accrue */
  border-top: 4px solid rgba(255, 255, 255, 1);
  border-left: 4px solid rgba(255, 255, 255, 1);
  border-right: 4px solid rgba(0, 0, 0, 0.15);
  border-bottom: 4px solid rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .result-card--xl {
  border-top: 4px solid rgba(255, 255, 255, 0.15);
  border-left: 4px solid rgba(255, 255, 255, 0.15);
  border-right: 4px solid rgba(0, 0, 0, 0.6);
  border-bottom: 4px solid rgba(0, 0, 0, 0.8);
}

/* Ruban tricolore façon tissus cousu hyper-réaliste */
.sewn-ribbon {
  position: absolute;
  top: -2px;
  right: 40px;
  width: 32px;
  height: 48px;
  display: flex;
  z-index: 10;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.4)) drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 88%, 0% 100%);
}

.sewn-ribbon-band {
  flex: 1;
  height: 100%;
  position: relative;
  /* Texture de tissu maillé croisé */
  background-image: 
    repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(0,0,0,0.06) 1px, rgba(0,0,0,0.06) 2px),
    repeating-linear-gradient(-45deg, transparent, transparent 1px, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0.05) 2px);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.3), inset 1px 0 2px rgba(255,255,255,0.2), inset -1px 0 2px rgba(0,0,0,0.2);
}

/* Effet de coutures (stitching) hyper-réaliste et discret */
.sewn-ribbon-band::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 8px;
  left: 2px;
  right: 2px;
  /* Fil blanc/clair rendu plus discret */
  border-left: 1px dashed rgba(255, 255, 255, 0.35);
  border-right: 1px dashed rgba(255, 255, 255, 0.35);
  filter: drop-shadow(0 -1px 0 rgba(0,0,0,0.15));
  opacity: 0.7;
}

.sewn-ribbon-band--blue  { background-color: #002395; }
.sewn-ribbon-band--white { 
  background-color: #f8f9fa; 
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 1px 0 2px rgba(255,255,255,0.8), inset -1px 0 2px rgba(0,0,0,0.05);
}
.sewn-ribbon-band--red   { background-color: #ed2939; }

/* Couture discrète sur la bande blanche */
.sewn-ribbon-band--white::before {
  border-left: 1px dashed rgba(0, 0, 0, 0.08);
  border-right: 1px dashed rgba(0, 0, 0, 0.08);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.4));
}

/* 6. VUE DÉTAILLÉE (Fiche XL) */
/* Composants de la vue de détail (Fiche unique) */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 30px;
  text-align: left;
}

/* Zones Layout */
.detail-zones-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* Forces layout side by side horizontally */
  align-items: stretch;
  gap: 20px;
  margin-top: 30px;
  width: max-content;
  max-width: 100%;
  overflow-x: auto; /* Scroll horizontal de sécurité sur petits écrans */
  padding-bottom: 10px;
}

.detail-zone {
  background: var(--m3-surface-container-low);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 240px;
  min-width: 200px;
  transition: all 0.2s ease;
}

.detail-zone:hover {
  background: var(--m3-surface-container);
  border-color: var(--m3-outline);
}

.detail-zone--postal {
  flex: 0 0 auto; /* Ne rétrécit pas, prend exactement la taille dont il a besoin */
  min-width: max-content; /* S'adapte au contenu de la grille (ex: 5 colonnes) */
}

/* ── Carte interactive de la commune (Leaflet / OpenStreetMap) ────────────── */
.results-grid.map-mode {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100%;
  display: flex !important;
  flex-direction: column;
}

.commune-map-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--surface);
  position: relative;
}

.commune-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  flex-shrink: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--m3-outline);
}

.commune-map-title {
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.commune-map-close {
  background: var(--m3-surface-container-highest);
  border: none;
  color: var(--m3-on-surface);
  font-size: 1.2rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.commune-map-close:hover {
  background: var(--m3-surface-variant);
  transform: scale(1.1);
}

.commune-leaflet-map {
  width: 100%;
  flex-grow: 1; /* Remplit tout l'espace restant */
  min-height: 0; 
  z-index: 1;
}

/* On force la hauteur de la zone de travail quand on est en mode map */
.scrollable-content:has(.map-mode) {
  overflow: hidden; /* Empêche le scroll sur le conteneur principal */
}

.scrollable-content:has(.map-mode) .main-container {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.detail-zone-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--m3-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}

.zone-icon {
  font-size: 1.2rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.detail-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

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

.detail-value--small {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
}

.detail-value--emphasis {
  color: #ef4444 !important; /* Rouge intense (Material Red 500 equivalent used in the app) */
  font-weight: 700 !important;
}

.detail-item--highlight {
  align-items: center;
  margin-top: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  width: 100%;
}

.postal-badges-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  max-width: 100%;
}

.postal-badges-grid {
  display: grid;
  /* grid-template-columns is determined dynamically in JS */
  gap: 8px;
  width: 100%;
  justify-items: center;
  align-content: start;
  margin-top: 5px;
}

.postal-badge--xl {
  font-size: 1.2rem;
  padding: 8px 20px;
  min-width: 90px;
}


.back-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  padding: 10px 0;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  transition: transform 0.2s ease
}

.back-btn:hover {
  transform: translateX(-5px)
}

.single-card-wrapper {
  width: max-content;
  max-width: 100vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0 20px;
}

.single-card-wrapper.from-history .result-card--xl {
  background: var(--history-bg);
  border-color: var(--border);
}

.history-icon {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  filter: var(--history-icon-filter);
  opacity: 0.7;
  transition: opacity 0.2s ease;
  z-index: 1000;
  border-radius: 4px;
}

.history-icon:hover {
  opacity: 1;
}

.city-name--xl {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--accent);
  margin-bottom: 10px;
}

footer {
  padding: 0 32px;
  text-align: center;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 500;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--footer-bg);
  z-index: 4000;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.footer-content {
  width: 100%;
  max-width: 100%;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto auto;
  align-items: center;
  height: 100%;
}

.footer--secondary .footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-left {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}


.footer-center {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-center .footer-item {
  color: var(--text-primary);
  font-weight: 500;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
}

.help-button {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  padding: 4px 8px;
  border-radius: 4px;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-button:hover {
  opacity: 1;
  transform: scale(1.1);
  background: rgba(139, 92, 246, 0.1);
}

.help-button:active {
  transform: scale(0.95);
}

.search-mode-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 500;
}

.search-mode-indicator span:first-child {
  font-weight: 400;
}

.search-mode-code {
  font-weight: 700;
  transition: color 0.3s ease;
}

.search-mode-description {
  color: var(--text-primary);
  font-weight: 500;
  margin-left: 2px;
}

/* Mode-specific colors for search mode code */
.search-mode-code.mode-mrc {
  color: var(--text-primary);
}

.search-mode-code.mode-mrp {
  color: var(--search-postal);
}

.search-mode-code.mode-mrd {
  color: var(--search-dept);
}

.search-mode-code.mode-mri {
  color: var(--search-insee);
}

.search-mode-code.mode-mrb {
  color: var(--search-prefix);
}

.search-mode-code.mode-mrb-trailing {
  color: var(--search-prefix-trailing);
}

.search-mode-code.mode-mre {
  color: var(--search-suffix);
}

.count-highlight {
  font-weight: 800;
  color: var(--accent);
  font-size: 1.05em;
}

.stat-number {
  font-weight: 800;
}

.footer-zone {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.zone-name {
  font-weight: 700;
  color: var(--accent);
}

.footer-separator {
  margin: 0 16px;
  width: 1px;
  height: 16px;
  background: var(--m3-outline);
  opacity: 0.3;
}

.footer-clock {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.85rem;
  min-width: 140px;
  text-align: right;
  padding-left: 10px;
}

/* Custom Tooltip Styles */
.custom-tooltip {
  position: fixed;
  background: var(--surface);
  color: #ff0000;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  font-family: Helvetica, Arial, sans-serif;
  white-space: nowrap;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 2px solid #ff0000;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.custom-tooltip.show {
  opacity: 1;
}

/* Thème clair - Tooltip en rouge */
[data-theme="light"] .custom-tooltip {
  color: #ff0000;
  border-color: #ff0000;
  background: #ffffff;
}

/* Thème sombre - Tooltip en orange-doré */
[data-theme="dark"] .custom-tooltip {
  color: #ff9400;
  border-color: #ff9400;
  background: #0f0f0f;
}

/* Theme colors for stats */
[data-theme="light"] .stat-number {
  color: #d32f2f;
  /* Red */
}

[data-theme="dark"] .stat-number {
  color: #f1c40f;
  /* Yellow */
}

.counter-value.is-zero {
  opacity: 0.4;
  filter: grayscale(1);
}

.footer-zone.is-disabled {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(1);
  cursor: default !important;
}

/* Message "Aucun résultat" : Centré avec des conseils de recherche */
.no-results {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 40px 20px;
  min-height: 400px;
}

.no-results-container {
  max-width: 600px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.no-results-content {
  text-align: center;
  width: 100%;
}

.no-results-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ef4444;
  margin-bottom: 10px;
}

.no-results-subtitle {
  font-size: 1rem;
  font-weight: 700;
  color: #ef4444;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Message d'avertissement avec couleur distinctive */
.no-results-tips {
  background: rgba(249, 115, 22, 0.1);
  border: 1.5px solid #f97316;
  border-radius: 16px;
  padding: 16px 20px;
  width: 100%;
  margin-bottom: 10px;
}

.no-results-tip-message {
  color: #ea580c;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.5;
}

.no-results-tip-message code {
  background: rgba(249, 115, 22, 0.15);
  color: #d97706;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
  font-weight: 700;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

[data-theme="dark"] .no-results-tips {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.5);
}

[data-theme="dark"] .no-results-tip-message {
  color: #fb923c;
}

[data-theme="dark"] .no-results-tip-message code {
  background: rgba(249, 115, 22, 0.2);
  color: #fdba74;
  border-color: rgba(249, 115, 22, 0.4);
}

.no-results-hints {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
  text-align: left;
  width: 100%;
}

.hint-section {
  margin-bottom: 25px;
}

.hint-section:last-child {
  margin-bottom: 0;
}

.hint-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hints-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.hints-list li {
  position: relative;
  padding-left: 24px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.hints-list li strong {
  color: var(--text-primary);
  font-weight: 600;
}

.hints-list li code {
  background: var(--toolbar-bg);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.85em;
  font-weight: 600;
}

.hints-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
  width: 16px;
  text-align: center;
}

/* Dark theme adjustments */
[data-theme="dark"] .no-results-hints {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] .hints-list li code {
  background: var(--toolbar-bg);
  color: var(--accent);
}



/* 7. MODALES ET COMPOSANTS */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
  align-items: center;
  justify-content: center;
}

.modal.show {
  display: flex;
  opacity: 1;
}

.modal-content {
  background-color: var(--surface);
  margin: auto;
  padding: 32px;
  border: 1px solid var(--border);
  width: 90%;
  max-width: 560px;
  border-radius: var(--radius);
  position: relative;
  box-shadow: var(--shadow-premium);
  transform: translateY(24px);
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0.3s ease;
  text-align: left;
}

.modal.show .modal-content {
  transform: translateY(0);
}

.close-modal {
  position: absolute;
  right: 16px;
  top: 16px;
  background: var(--m3-surface-container-highest);
  border: none;
  font-size: 1.4rem;
  color: var(--text-primary);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 100;
}

.close-modal:hover {
  background: var(--m3-surface-variant);
  transform: scale(1.1);
}

.modal-logo {
  height: 100px;
  margin-bottom: 20px;
  object-fit: contain;
}

.modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  text-align: center;
}

.modal-version {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
  display: block;
  margin-bottom: 24px;
  text-align: center;
}

.about-description {
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 30px;
}

.about-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 24px 0;
  margin-bottom: 24px;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.info-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

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

.contact-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  padding: 2px 8px;
  background: var(--nav-bg);
  border-radius: 6px;
  transition: all 0.2s ease;
  display: inline-block;
  border: 1px solid transparent;
}

.contact-link:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(108, 92, 231, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}

.copyright-contact {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 16px;
  opacity: 0.7;
  display: block;
  text-align: center;
}

.about-footer {
  font-size: 0.85rem;
  color: var(--text-secondary);
  opacity: 0.8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* New About Modal Styles */
.modal-content--about {
  max-width: 600px;
  text-align: left;
  padding: 32px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.modal-content--about .about-header {
  text-align: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.modal-content--about .about-subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  text-align: center;
  width: 100%;
}

#communeCount {
  font-weight: 800;
  display: inline-block;
}

.modal-content--about .about-body {
  overflow-y: auto;
  padding: 24px;
  margin-bottom: 20px;
  scrollbar-width: thin;
  background: var(--m3-surface-container);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
  /* Typography requested */
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
}

.modal-content--about .about-section {
  margin: 15px 0;
}

.modal-content--about .about-section h4 {
  font-size: 1.2em; /* relative to 7.5px */
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.modal-content--about .about-section p {
  font-size: 1em; /* inherits 7.5px */
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.modal-content--about .about-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 15px 0;
  opacity: 0.5;
}

.modal-content--about .about-list {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.modal-content--about .about-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 1em; /* inherits 7.5px */
  color: var(--text-primary);
}

.modal-content--about .about-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
}

.modal-content--about .about-footer {
  flex-shrink: 0;
  padding-top: 10px;
}

/* Watermark "Made with love" - Glossy effect */
.made-with-love {
  position: absolute;
  bottom: 14px;
  right: 20px;
  font-size: 0.70rem;
  font-family: inherit;
  font-weight: 500;
  opacity: 0.4;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

.made-with-love-text {
  background: linear-gradient(180deg, var(--text-primary) 0%, var(--text-secondary) 40%, var(--m3-outline) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,0.6));
}

[data-theme="dark"] .made-with-love-text {
  background: linear-gradient(180deg, var(--text-primary) 0%, var(--text-secondary) 40%, #555 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6));
}

.french-heart {
  display: inline-block;
  background: linear-gradient(to right, #002395 33.3%, #ffffff 33.3%, #ffffff 66.6%, #ed2939 66.6%);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.8px rgba(0, 0, 0, 0.45);
  filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.3));
  font-size: 0.85rem;
}

/* Info Modal Variant */
.modal-content--info {
  max-width: 650px;
  text-align: left;
  padding: 48px;
}

/* Search Modes Help Modal */
.modal-content--help {
  max-width: 900px;
  text-align: left;
  padding: 40px;
}

.modal-header {
  margin-bottom: 24px;
  text-align: center;
}

.modal-header h3 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 8px;
}

.modal-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
}

.modal-body {
  margin-bottom: 24px;
}

.modal-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.close-btn-footer {
  padding: 10px 32px;
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  border: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-btn-footer:hover {
  background: #1b68ff;
  box-shadow: var(--shadow-1);
}

/* Modal Confirmation & Danger States */
.modal-content--confirm {
  max-width: 420px !important;
  text-align: center;
  padding: 40px !important;
}

.confirm-icon {
  font-size: 3.5rem;
  margin-bottom: 16px;
  line-height: 1;
}

#confirmTitle {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

#confirmMessage {
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.btn-secondary {
  background: var(--m3-surface-container-high);
  color: var(--text-primary);
  border: 1px solid var(--border);
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: var(--m3-surface-variant);
  border-color: var(--m3-outline);
}

.btn-danger {
  background: #b3261e;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-danger:hover {
  background: #8c1d18;
  box-shadow: 0 4px 12px rgba(179, 38, 30, 0.3);
  transform: translateY(-1px);
}

.search-modes-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.search-mode-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  transition: all 0.2s ease;
  background: rgba(139, 92, 246, 0.02);
}

.search-mode-item:hover {
  border-color: var(--accent);
  background: rgba(139, 92, 246, 0.06);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

.mode-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.mode-code {
  font-weight: 800;
  font-size: 0.95rem;
  min-width: 40px;
  text-shadow: 0 0 4px currentColor;
}

.mode-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.mode-description {
  color: var(--text-primary);
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 6px;
}

.mode-example {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin: 0;
}

.mode-example code {
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 600;
}

/* New Help Modal Styles */
.help-section {
  margin-bottom: 30px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--m3-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.section-icon {
  font-size: 1.2rem;
}

.section-intro {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 15px;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.help-item {
  background: var(--bg-color);
  padding: 15px;
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.help-item--full {
  grid-column: 1 / -1;
}

.help-item {
  background: var(--m3-surface-container-low);
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

.help-item:hover {
  background: var(--m3-surface-container);
  border-color: var(--m3-outline);
  box-shadow: var(--shadow-1);
}

.help-item:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  pointer-events: none;
}

/* Indicator Detail Modal Custom Styles */
.modal-content--detail {
  max-width: 550px;
  text-align: left;
  padding: 30px;
  border: 1px solid var(--accent);
}

.modal-content--detail .modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-bottom: 1.5px solid var(--border);
  padding-bottom: 20px;
  margin-bottom: 25px;
}

.indicator-badge {
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 10px currentColor;
  line-height: 1;
}

#detailIndicatorTitle {
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
}

.detail-section {
  margin-bottom: 20px;
}

.detail-section h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-section p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0;
}

.detail-icon {
  font-size: 1.1rem;
}

.example-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-color);
  padding: 15px;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.example-item {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
  display: flex;
  gap: 10px;
}

.example-item span {
  color: var(--accent);
  font-weight: bold;
}

[data-theme="dark"] .modal-content--detail {
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .example-list {
  background: rgba(255, 255, 255, 0.03);
}

/* Region Grid for IZR Detail */
.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding: 10px;
  background: var(--bg-color);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.region-item {
  font-size: 0.75rem;
  display: flex;
  gap: 6px;
  align-items: center;
}

.reg-code {
  font-family: monospace;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 4px;
  border-radius: 4px;
  min-width: 25px;
  text-align: center;
}

.reg-name {
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .region-grid {
  background: rgba(255, 255, 255, 0.02);
}

.item-description {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0;
}

/* Nuance Subtile Box */
.nuance-box {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
  border: 1.5px solid var(--accent);
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}

.nuance-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
}

.nuance-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nuance-content {
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin: 0;
}

.nuance-content strong {
  color: var(--accent);
}

.highlight {
  background: var(--accent-soft);
  padding: 2px 4px;
  border-radius: 4px;
  font-weight: 600;
}

[data-theme="dark"] .help-item {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .nuance-box {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
}

.modal-info-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 20px;
}

.info-icon-large {
  font-size: 2.5rem;
}

.modal-info-body h3 {
  color: var(--accent);
  margin: 24px 0 12px;
  font-size: 1.2rem;
}

.modal-info-body p {
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.modal-info-body ul {
  margin-left: 20px;
  margin-bottom: 16px;
  color: var(--text-secondary);
}

.info-feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 20px 0;
}

.feature-item {
  background: rgba(108, 92, 231, 0.05);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(108, 92, 231, 1);
}

.info-alert {
  margin-top: 32px;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.info-alert--warning {
  background: #fff9db;
  border-left: 4px solid #fcc419;
  color: #856404;
}

[data-theme="dark"] .info-alert--warning {
  background: rgba(252, 196, 25, 0.1);
  color: #ffd43b;
}

/* Help Icon Styling */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--border);
  color: var(--text-secondary);
  border-radius: 50%;
  font-size: 0.75rem;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.help-icon:hover {
  background: var(--accent);
  color: white;
  transform: scale(1.1);
}

.detail-value {
  display: flex;
  align-items: center;
}

/* KBD Styling for Help Modal */
kbd {
  background-color: var(--bg-color);
  border-radius: 4px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 600;
  padding: 2px 6px;
  white-space: nowrap;
}

.info-example {
  background: var(--bg-color);
  padding: 12px;
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-example span {
  font-family: monospace;
  font-size: 1.1em;
}

/* 8. FOOTER ET UTILITAIRES */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Back to Top Button - Glossy Blue Orb Design */
.back-to-top {
  position: fixed !important;
  bottom: 85px !important;
  right: 30px !important;
  left: auto !important;
  width: 64px;
  height: 64px;
  background: radial-gradient(circle at 35% 35%, #9ecaff, #4697ff);
  color: white;
  border: none;
  border-radius: 50% !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Removal of France clip-path to restore circle */
  clip-path: none !important;
  box-shadow: inset -4px -4px 10px rgba(0, 0, 0, 0.5), 
              inset 6px 6px 12px rgba(255, 255, 255, 0.4),
              0 8px 16px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  opacity: 0;
  visibility: hidden;
  z-index: 5000;
  overflow: hidden;
}

.back-to-top::before {
  content: '';
  position: absolute;
  top: 5%;
  left: 15%;
  width: 70%;
  height: 35%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 50% / 100% 100% 25% 25%;
  pointer-events: none;
  z-index: 2;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  transform: scale(1.1);
  box-shadow: inset -4px -4px 10px rgba(0, 0, 0, 0.5), 
              inset 6px 6px 12px rgba(255, 255, 255, 0.4),
              0 12px 24px rgba(0, 58, 122, 0.4);
}

.back-to-top:active {
  transform: scale(0.95);
  filter: brightness(0.9);
}

.back-to-top-svg {
  position: relative;
  z-index: 10;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
  transition: transform 0.3s ease;
}

.back-to-top:hover .back-to-top-svg {
  transform: translateY(-2px);
}




/* Removed legacy close-btn-footer styles */

/* Search Animation */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 40px;
  font-weight: 600;
  color: var(--accent);
  width: 100%;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(108, 92, 231, 0.1);
  border-left-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Performance Optimization: Disable transitions during theme switch */
.no-transitions * {
  transition: none !important;
  animation: none !important;
}

#footerConsultationCounter .counter-value {
  color: var(--m3-primary);
  font-weight: 600;
  font-size: 1rem;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--m3-primary-container);
  border-radius: 12px;
}

[data-theme="dark"] #footerConsultationCounter .counter-value {
  color: var(--m3-on-primary-container);
}

/* History Modal Specifics */
.history-meta {
  display: flex;
  gap: 20px;
  margin-top: 8px;
  justify-content: center;
}

.history-meta-item {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.history-meta-item .meta-value {
  color: var(--accent);
  font-weight: 600;
}

.history-table-header {
  display: grid;
  grid-template-columns: 1fr 90px 60px;
  align-items: center;
  gap: 15px;
  padding: 10px 15px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.history-table-header .col-title:nth-child(2) {
  width: 90px;
  text-align: center;
}

.history-table-header .col-title:nth-child(3) {
  width: 60px;
  text-align: center;
}

.history-list {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px;
}

.persistence-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #4caf50;
  padding: 8px;
  background: rgba(76, 175, 80, 0.05);
  border-radius: 0 0 8px 8px;
  font-weight: 500;
  border-top: 1px solid var(--border);
}

.history-item {
  display: grid;
  grid-template-columns: 1fr 90px 60px;
  /* Fixed widths for postal and time */
  align-items: center;
  gap: 15px;
  padding: 12px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.history-item:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  transform: translateX(5px);
}

.history-city-name {
  font-weight: 600;
  color: var(--text-primary);
}

.history-city-code {
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--bg-color);
  padding: 2px 8px;
  border-radius: 12px;
  text-align: center;
}

.history-city-details {
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: var(--bg-color);
  padding: 2px 8px;
  border-radius: 12px;
  text-align: center;
}

.history-city-details.loading {
  color: var(--accent);
  font-style: italic;
}

.history-indicator {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--surface);
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-style: italic;
  opacity: 0.8;
  z-index: 5;
}

.history-icon {
  position: absolute;
  top: 10px;
  right: 15px;
  /* Coin haut à droite de la carte */
  right: 10px;
  /* Coin haut à droite de la carte */
  width: 24px;
  height: 24px;
  filter: var(--history-icon-filter);
  opacity: 0.7;
  transition: opacity 0.2s ease;
  z-index: 6;
  border-radius: 4px;
}

.history-city-time {
  font-size: 0.85rem;
  color: #ff9800;
  font-weight: 600;
  text-align: center;
}

.empty-history {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-style: italic;
}

.modal-footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  padding: 15px;
  border-top: 1px solid var(--border);
}

.clear-history-btn {
  background: #f44336;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  transition: opacity 0.2s;
  width: auto;
  margin: 0 auto;
}

.clear-history-btn:hover {
  opacity: 0.9;
}

/* Footer Date Picker */
.history-footer-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.footer-label {
  font-size: 0.75rem;
  letter-spacing: 0.2px;
  color: var(--text-muted);
  font-weight: 600;
  opacity: 0.9;
}

.history-date-picker {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.8rem;
  outline: none;
  cursor: pointer;
}

/* Material DatePicker Styles */
.material-datepicker {
  position: relative;
  display: inline-block;
}

.datepicker-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.datepicker-trigger:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.datepicker-popup {
  position: absolute;
  bottom: calc(100% + 10px);
  /* Open upwards */
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  width: 280px;
  padding: 15px;
  z-index: 3000;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.datepicker-popup.show {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.dp-header span {
  font-weight: 700;
  color: var(--text-primary);
}

.dp-nav-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  font-weight: bold;
}

.dp-nav-btn:hover {
  background: var(--bg-hover);
}

.dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 10px;
}

.dp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dp-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  border-radius: 50%;
  transition: all 0.2s;
}

.dp-day:hover:not(.empty) {
  background: var(--bg-hover);
  color: var(--accent);
}

.dp-day.selected {
  background: var(--accent) !important;
  color: white !important;
  font-weight: bold;
}

.dp-day.has-history {
  color: #f44336 !important;
  font-weight: 700 !important;
}

/* Red color even for today if it has history */
.dp-day.today.has-history {
  color: #f44336 !important;
  border-color: #f44336;
}

.dp-day.selected.has-history {
  color: white !important;
}

.dp-day.today {
  border: 1px solid var(--accent);
  color: var(--accent);
}

/* Harmonized Tooltips (Customizing native title appearance via CSS isn't possible, 
   but we can style the elements that have them for consistency) */
[title] {
  position: relative;
  cursor: pointer;
}

.dp-day.empty {
  cursor: default;
}

/* --- Styles Premium pour les Pages d'Information --- */
.info-page-container {
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 40px;
  animation: fadeInSecondary 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

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

.info-card {
  background: var(--surface);
  border-radius: 20px;
  padding: 45px 50px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(150, 150, 150, 0.1);
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .info-card {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--accent);
  opacity: 0.7;
}

.info-header-premium {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px 20px;
  background: transparent;
}

.info-title-premium {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.info-intro-premium {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 750px;
  margin: 0 auto;
  font-weight: 400;
  overflow-wrap: break-word;
}

/* ==========================================================================
   TABLE OF CONTENTS PREMIUM STYLE
   ========================================================================== */
.toc-container {
  background: rgba(var(--surface-rgb, 255, 255, 255), 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(150, 150, 150, 0.1);
  border-radius: 16px;
  padding: 25px 30px;
  margin-bottom: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .toc-container {
  background: rgba(30, 30, 30, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.toc-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

.toc-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-item a {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  text-decoration: none;
  color: var(--text-secondary);
  background: transparent;
  border-radius: 10px;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.toc-item a:hover {
  background: var(--bg-color);
  color: var(--accent);
  transform: translateX(4px);
}

.toc-item a::before {
  content: "→";
  margin-right: 10px;
  opacity: 0.4;
  transition: transform 0.2s ease;
}

.toc-item a:hover::before {
  transform: translateX(3px);
  opacity: 1;
}

/* SECTION STYLES */
.info-section {
  margin-bottom: 55px;
  scroll-margin-top: 100px;
}

.info-section h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-section h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  margin-left: 15px;
  opacity: 0.3;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 25px;
}

/* FEATURE CARDS (CLEAN & MODERN) */
.feature-card {
  background: var(--surface);
  padding: 30px;
  border-radius: 16px;
  border: 1px solid rgba(150, 150, 150, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.015);
}

[data-theme="dark"] .feature-card {
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  border-color: rgba(108, 92, 231, 0.2);
}

[data-theme="dark"] .feature-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  border-color: rgba(162, 155, 254, 0.2);
}

.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.feature-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.feature-card ul {
  margin: 15px 0 0 0;
  padding-left: 20px;
}

.feature-card li {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.premium-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: transparent;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  margin-bottom: 20px;
  border-radius: 8px;
}

.premium-back-btn:hover {
  color: var(--text-primary);
  background: var(--surface);
  transform: translateX(-4px);
}

.premium-back-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.example-box-premium {
  background: var(--surface);
  border: 1px solid rgba(150, 150, 150, 0.1);
  border-radius: 12px;
  padding: 18px;
  margin-top: 15px;
  font-family: 'Inter', sans-serif;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.01);
}

[data-theme="dark"] .example-box-premium {
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
}

.example-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.example-input {
  font-family: inherit;
  font-weight: 600;
  color: var(--text-primary);
}

.example-result {
  color: var(--text-secondary);
  font-style: italic;
}

.pro-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* 9. SPLASH SCREEN */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--m3-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.6s ease, visibility 0.6s;
}

.splash-screen.fade-out {
  opacity: 0;
  visibility: hidden;
}

.splash-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.splash-logo {
  height: 120px;
  width: auto;
  filter: drop-shadow(0 0 15px rgba(99, 102, 241, 0.3));
  animation: splashPulse 2s ease-in-out infinite;
}

.splash-loader-container {
  width: 120px;
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-loader {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-loader span {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-radius: 50%;
  animation: splashRotate 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.15));
}

.splash-loader span:nth-child(1) {
  border-top-color: #0055A4; /* Bleu */
  width: 100%;
  height: 100%;
  animation-duration: 1.5s;
}

.splash-loader span:nth-child(2) {
  border-top-color: var(--loader-white); /* Dynamic White */
  width: 70%;
  height: 70%;
  animation-duration: 1.2s;
  animation-direction: reverse;
}

.splash-loader span:nth-child(3) {
  border-top-color: #EF4135; /* Rouge */
  width: 40%;
  height: 40%;
  animation-duration: 0.9s;
}

@keyframes splashRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.splash-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  opacity: 0.9;
  margin-top: 10px;
}

@keyframes splashPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

.pro-tip-premium {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid #f59e0b;
  /* Amber for tips */
  padding: 20px;
  border-radius: var(--radius-sm);
  display: flex;
  gap: 15px;
  box-shadow: var(--shadow-1);
}

.tip-icon {
  font-size: 1.5rem;
}

.tip-text strong {
  display: block;
  margin-bottom: 5px;
  color: #b45309;
}

/* WELCOME TEXT PREMIUM STYLES */
.welcome-title-premium {
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 20px;
  letter-spacing: -1px;
}

[data-theme="dark"] .welcome-title-premium {
  background: linear-gradient(135deg, #f87171 0%, #fb923c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-intro-premium {
  font-size: 1.1rem;
  color: var(--text-primary);
  max-width: 700px;
  margin: 0 auto 15px;
  line-height: 1.6;
}

.welcome-sources-premium {
  font-size: 0.95rem;
  color: var(--text-secondary);
  opacity: 0.8;
  margin-bottom: 5px;
}

.welcome-update-premium {
  font-size: 0.95rem;
  color: var(--text-secondary);
  background: var(--accent-soft);
  display: inline-block;
  padding: 6px 15px;
  border-radius: 20px;
  margin-top: 10px;
}
/* Special Feature Box and IZP Spotlight */
.special-feature-box {
  margin: 30px 0;
  padding: 35px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid rgba(150, 150, 150, 0.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .special-feature-box {
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.izp-spotlight {
  border-top: 3px solid var(--search-izp);
  background: linear-gradient(135deg, var(--surface) 0%, rgba(108, 92, 231, 0.03) 100%);
}

.spotlight-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.spotlight-header h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.spotlight-description {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 25px;
}

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.spotlight-item {
  background: var(--bg-color);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(150, 150, 150, 0.05);
  transition: transform 0.2s ease;
}

[data-theme="dark"] .spotlight-item {
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.spotlight-item:hover {
  transform: translateY(-3px);
}

.spotlight-item strong {
  display: block;
  font-size: 1.05rem;
  color: var(--search-izp);
  margin-bottom: 8px;
  font-weight: 600;
}

.spotlight-item p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.spotlight-example {
  background: rgba(108, 92, 231, 0.05);
  padding: 18px 20px;
  border-radius: 10px;
  border-left: 4px solid var(--search-izp);
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

[data-theme="dark"] .spotlight-example {
  background: rgba(0, 0, 0, 0.2);
}

.feature-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  height: 28px;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  color: white;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.feature-badge--izt { background-color: var(--search-izt); }
.feature-badge--izr { background-color: var(--search-izr); }
.feature-badge--izd { background-color: var(--search-mrd); }
.feature-badge--izp { background-color: var(--search-izp); }

/* PRO TIPS SECTION */
.pro-tip-premium {
  background: var(--surface);
  border: 1px solid rgba(150, 150, 150, 0.1);
  border-left: 4px solid #6c5ce7;
  padding: 20px 25px;
  border-radius: 12px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease;
}

[data-theme="dark"] .pro-tip-premium {
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 4px solid #a29bfe;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.pro-tip-premium:hover {
  transform: translateY(-3px);
}

.tip-icon {
  font-size: 1.4rem;
}

.tip-text strong {
  display: block;
  margin-bottom: 5px;
  color: var(--text-primary);
  font-weight: 600;
}

.tip-text p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* Secondary Pages Layout Optimizations */
.duo-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

@media (max-width: 800px) {
  .duo-grid {
    grid-template-columns: 1fr !important;
  }
}