/* ============================================================
 * DAGOO'S MOBILE — THÈME CENTRALISÉ
 * Charte officielle DAGOO'S 2026 — version Passager
 *
 * Bleu marine  #06245F  : texte principal, contours
 * Or safran    #E0A01C  : accent principal (aligné logo passager)
 * Vert         #0A6F35  : validations
 * Blanc        #FFFFFF  : surfaces
 *
 * Splash (écran de démarrage) : fond sombre #16213e conservé,
 * spinner aligné sur l'or safran de la charte.
 * ============================================================ */

/* ============================================================
 * 1. VARIABLES GLOBALES
 * ============================================================ */
:root {
  /* Surfaces */
  --bg-page:       #F7F8FA;
  --bg-surface:    #FFFFFF;
  --bg-soft:       #F1F5F9;
  --bg-elevated:   #E2E8F0;

  /* Texte */
  --text-primary:   #06245F;
  --text-secondary: #4A5A7A;
  --text-muted:     #94A3B8;
  --text-on-accent: #FFFFFF;

  /* Accent principal — or safran (passager) */
  --accent:        #E0A01C;
  --accent-hover:  #C68B15;
  --accent-soft:   #FEF3C7;

  /* Accent secondaire — bleu marine */
  --navy:          #06245F;
  --navy-hover:    #041B47;

  /* États */
  --error-bg:   #FEF2F2;
  --error-fg:   #DC2626;
  --success-bg: #E6F4EA;
  --success-fg: #0A6F35;
  --warning-bg: #FEF3C7;
  --warning-fg: #E0A01C;
  --info-bg:    #EFF6FF;
  --info-fg:    #06245F;

  /* Bordures */
  --border:        #E2E8F0;
  --border-strong: #CBD5E1;

  /* Ombres */
  --shadow-soft: 0 1px 3px rgba(6, 36, 95, 0.06),
                 0 8px 24px rgba(6, 36, 95, 0.06);
  --shadow-card: 0 1px 3px rgba(6, 36, 95, 0.04);

  /* Splash (écran de démarrage) — conservé sombre */
  --splash-bg:     #16213e;
  --splash-fg:     #FFFFFF;
  --splash-accent: #E0A01C;
}

/* ============================================================
 * 2. RESET + BASE
 * ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================================
 * 3. APP — conteneur SPA
 * ============================================================ */
#app {
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
  min-height: 100dvh;
}

/* ============================================================
 * 4. NAVIGATION BASSE
 * ============================================================ */
.nav-bottom {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-around;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 100;
}
.nav-bottom button {
  background: none; border: none; color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 12px;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}
.nav-bottom button.active { color: var(--accent); }

/* ============================================================
 * 5. TACTILE + iOS
 * ============================================================ */
button, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button { min-height: 44px; }
input, select { min-height: 44px; font-size: 16px; }

@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: 16px !important; }
}

/* ============================================================
 * 6. SCROLLBAR
 * ============================================================ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

/* ============================================================
 * 7. SPLASH — écran de démarrage (sombre conservé)
 * ============================================================ */
body.splash-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--splash-bg);
  color: var(--splash-fg);
  font-family: system-ui, sans-serif;
}
.splash-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.splash-logo {
  width: 140px;
  height: 140px;
  border-radius: 28px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  animation: pulse 2s infinite;
}
.splash-title {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.splash-subtitle {
  font-size: 15px;
  opacity: 0.8;
  font-weight: 400;
}
.spinner {
  margin-top: 36px;
  width: 36px;
  height: 36px;
  border: 4px solid rgba(255, 255, 255, 0.15);
  border-top: 4px solid var(--splash-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================================
 * 8. RESPONSIVE
 * ============================================================ */
@media (max-width: 360px) {
  #app { max-width: 100%; }
  .nav-bottom button { font-size: 9px; min-height: 42px; }
  .nav-bottom button i { font-size: 16px !important; }
  button { min-height: 40px; }
  input, select { min-height: 40px; font-size: 14px; }
}

@media (min-width: 361px) and (max-width: 430px) {
  .nav-bottom button { font-size: 10px; }
  .nav-bottom button i { font-size: 18px !important; }
}

@media (min-width: 431px) {
  #app { max-width: 480px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  #app { max-width: 100%; padding-bottom: 60px; }
  .nav-bottom { padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); }
  .nav-bottom button { min-height: 36px; }
}