/* ==========================================================================
   1. VARIABLES & CONFIGURATION GENERALE
   ========================================================================== */
:root {
  --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #311042 100%);
  --card-bg: rgba(255, 255, 255, 0.06);
  --card-border: rgba(255, 255, 255, 0.1);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --loader-bg: #0f172a;
  
  /* Échelle de pollution moderne (Couleurs moins agressives) */
  --aqi-1: #10b981; /* Vert émeraude */
  --aqi-2: #f59e0b; /* Ambre */
  --aqi-3: #f97316; /* Orange */
  --aqi-4: #ef4444; /* Rouge */
  --aqi-5: #a855f7; /* Violet */
  --aqi-6: #6366f1; /* Indigo */
}

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

body {
  min-height: 100vh;
  font-family: "Inter", sans-serif;
  color: var(--text-main);
  background: var(--bg-gradient);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  opacity: 0;
  animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Couche de dégradé dynamique gérée par JS */
.background-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.15;
  transition: background 0.5s ease;
  pointer-events: none;
}

/* ==========================================================================
   2. LAYOUT & CONTENEURS
   ========================================================================== */
.app-container {
  width: 100%;
  max-width: 480px;
  padding: 20px;
  z-index: 1;
}

h1 {
  font-family: "Roboto", sans-serif;
  text-align: center;
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 30px;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Effet Glassmorphism pour le bloc d'info */
.information-block {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24px;
  padding: 35px 30px;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   3. ÉLÉMENTS DE CHARGEMENT & VISUELS (TABLER ICONS)
   ========================================================================== */
.loader {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  background-color: var(--loader-bg);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.loader.active {
  visibility: visible;
  opacity: 0.95;
}

.loader-logo {
  width: 60px;
  height: 60px;
  animation: rotateLoader 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

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

/* Style de l'icône dynamique Tabler Icons */
.ti {
  font-family: "tabler-icons" !important; /* Force l'utilisation des glyphes d'icônes */
  display: block;
  font-size: 60px;
  margin: 0 auto 15px;
  text-align: center;
  color: var(--text-main);
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.2));
  transition: transform 0.3s ease;
}

.ti:hover {
  transform: scale(1.05);
}

.user-information {
  text-align: center;
  margin-bottom: 30px;
  font-size: 16px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}

/* ==========================================================================
   4. STRUCTURE DES DONNÉES (TABLEAU STYLE MODERNE)
   ========================================================================== */
table {
  margin-bottom: 35px;
  width: 100%;
  border-collapse: collapse;
}

table, th, td {
  border: none;
}

tr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

tr:last-child {
  border-bottom: none;
}

th.label {
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 500;
}

td {
  font-size: 18px;
  color: var(--text-main);
  font-weight: 700;
  text-align: right;
}

/* ==========================================================================
   5. BARRE ET JAUGE DE POLLUTION
   ========================================================================== */
.scale-bar-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.scale-container {
  width: 100%;
  display: flex;
  position: relative;
  height: 8px;
  border-radius: 4px;
  overflow: visible; /* Laisse dépasser le curseur */
}

.location-pointer {
  position: absolute;
  top: -12px;
  left: 0;
  width: 20px;
  height: 20px;
  z-index: 5;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-section {
  height: 100%;
  flex-grow: 1;
}

.scale-section:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.scale-section:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Attribution des couleurs aux sections (l'image du pointeur compte comme enfant 1) */
.scale-section:nth-child(2) { background-color: var(--aqi-1); }
.scale-section:nth-child(3) { background-color: var(--aqi-2); }
.scale-section:nth-child(4) { background-color: var(--aqi-3); }
.scale-section:nth-child(5) { background-color: var(--aqi-4); }
.scale-section:nth-child(6) { background-color: var(--aqi-5); flex-grow: 1.5; }
.scale-section:nth-child(7) { background-color: var(--aqi-6); flex-grow: 2; }