@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700,800,900,400i,700i,800i&display=swap');

/* ═══════════════════════════════════════════════════════════════
   CREWIGO — Minimal UI
   Font : Inter  ·  Accent : Orange #F97316
   Inspiré de Notion Mobile
   ═══════════════════════════════════════════════════════════════ */

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

/* ─── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Accent — CrewiGo Orange */
  --accent:        #F97316;
  --accent-dark:   #EA6B0B;
  --accent-light:  #FFF7ED;
  --accent-glow:   rgba(249,115,22,0.12);

  /* Status */
  --success:       #16A34A;
  --warning:       #D97706;
  --danger:        #DC2626;

  /* Surfaces — blanc pur, fond quasi-blanc */
  --bg:            #FFFFFF;
  --bg-alt:        #F7F7F5;
  --card:          #FFFFFF;
  --text:          #1C1C1C;
  --text-muted:    #787774;
  --text-light:    #ACABA8;
  --border:        rgba(55,53,47,0.09);
  --border-solid:  #E9E9E7;

  /* Aliases */
  --primary:       #F97316;
  --primary-dark:  #EA6B0B;
  --primary-light: #FFF7ED;

  /* Shape — minimaliste */
  --radius:        6px;
  --radius-lg:     8px;
  --radius-xl:     12px;

  /* Elevation — quasi nulle */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow:     0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-xl:  0 8px 24px rgba(0,0,0,0.10);

  /* Typography — Inter partout */
  --font-display: 'Satoshi', system-ui, -apple-system, sans-serif;
  --font-body:    'Satoshi', system-ui, -apple-system, sans-serif;
}

/* ─── BASE ───────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Satoshi', var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── SCREENS ────────────────────────────────────────────────── */
.screen { display: none; min-height: 100vh; flex-direction: column; }
.screen.active { display: flex; }

/* ════════════════════════════════════════════════════════════════
   AUTH SCREEN — même langage que le Home Screen
   Fond noir + halo orange en haut · Sheet blanche qui monte du bas
   ════════════════════════════════════════════════════════════════ */
#auth-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  flex-direction: column;
  background: #000;
  overflow: hidden;
}
#auth-screen.active { display: flex; }

/* Halo orange — identique à .home-hero-bg */
.auth-hero {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.auth-hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 130% 90% at 50% -10%,
    rgba(249,115,22,0.18) 0%, transparent 65%);
  pointer-events: none;
}
/* Grille subtile — identique à .home-hero-grid */
.auth-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 20%, transparent 100%);
  pointer-events: none;
}

/* Brand — logo + wordmark + tagline centré */
.auth-brand {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: env(safe-area-inset-top, 16px) 24px 28px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 36px);
}
.auth-logo {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(249,115,22,0.30), 0 4px 16px rgba(0,0,0,0.4);
}
.auth-wordmark {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
}
.auth-crewi { color: #fff; }
.auth-go    { color: var(--accent); }
.auth-tagline {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Sheet blanche — identique à #screen-home .main-content */
.auth-sheet {
  flex: 1;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 28px 24px calc(env(safe-area-inset-bottom, 0px) + 32px);
}

/* Formulaires — un seul visible à la fois */
.auth-form { display: none; flex-direction: column; gap: 18px; }
.auth-form.active { display: flex; }

/* Eyebrow pill — identique au home-tagline-eyebrow */
.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(249,115,22,0.85);
  padding: 4px 12px 4px 10px;
  background: rgba(249,115,22,0.08);
  border: 1px solid rgba(249,115,22,0.22);
  border-radius: 999px;
  align-self: flex-start;
}
.auth-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px rgba(249,115,22,0.7);
  flex-shrink: 0;
}

/* Titre du formulaire */
.auth-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.15;
  margin-top: -4px;
}

/* Message d'erreur */
.auth-error {
  display: none;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--danger);
  background: rgba(220,38,38,0.07);
  border: 1px solid rgba(220,38,38,0.15);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.auth-error:not(:empty) { display: block; }

/* Champs — réutilise le style global form-group */
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-field label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Les inputs auth héritent déjà du style global input[type=...] */

/* Bouton principal — identique à .home-cta-btn */
.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(249,115,22,0.35);
  transition: background 0.15s, transform 0.12s, box-shadow 0.2s;
  margin-top: 4px;
}
.auth-btn:hover  { background: #fb923c; box-shadow: 0 6px 28px rgba(249,115,22,0.50); }
.auth-btn:active { transform: scale(0.98); background: var(--accent-dark); box-shadow: none; }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Lien switch login ↔ register */
.auth-switch {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.auth-switch a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.auth-switch a:hover { text-decoration: underline; }

/* ── Header user badge (home screen) ─────────────────────── */
.header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.header-user-nom {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-logout-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.50);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.header-logout-btn:hover {
  background: rgba(249,115,22,0.15);
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .auth-btn { transition: opacity 0.2s; }
}

/* ════════════════════════════════════════════════════════════════
   HOME SCREEN
   ════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   HOME SCREEN — CrewiGo brand header
   ════════════════════════════════════════════════════════════════ */
#screen-home .app-header {
  position: relative;
  background: #000;
  border-bottom: none;
  padding: 0;
  padding-top: env(safe-area-inset-top);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Liseré bas — gradient orange subtil (à la place de la barre 3px) */
#screen-home .app-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249,115,22,0.45), transparent);
}

/* Grand halo orange — comme le hero de la landing */
.home-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 110% 75% at 50% -10%,
    rgba(249,115,22,0.15) 0%, transparent 65%);
}
.home-hero-bg::before,
.home-hero-bg::after { display: none; }

/* Grille subtile — même esprit que la landing */
.home-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 15%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 25%, #000 15%, transparent 100%);
  pointer-events: none;
}

.home-hero-grad { display: none; }

#screen-home .header-content {
  position: relative;
  z-index: 10;
  padding: 16px 20px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

#screen-home .crewigo-logo .logo-crew { color: #FFFFFF; }
#screen-home .crewigo-logo .logo-go   { color: #F97316; }

#screen-home .btn-icon {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  color: white;
}
#screen-home .btn-icon:hover { background: rgba(255,255,255,0.14); }

.home-tagline {
  position: relative;
  z-index: 10;
  padding: 22px 24px 0;
}

/* Eyebrow "crew we GO" — style brand, pas uppercase générique */
.home-tagline-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(249,115,22,0.75);
  margin-bottom: 12px;
  padding: 4px 12px 4px 10px;
  background: rgba(249,115,22,0.10);
  border: 1px solid rgba(249,115,22,0.25);
  border-radius: 999px;
}
.home-tagline-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #F97316;
  box-shadow: 0 0 6px rgba(249,115,22,0.7);
  flex-shrink: 0;
}
.home-tagline-eyebrow em {
  font-style: italic;
  color: rgba(255,255,255,0.65);
}

/* Headline — gradient blanc + "et GO." en orange italic */
.home-tagline-main {
  font-family: var(--font-display);
  font-size: 2.15rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.04em;
  background: linear-gradient(175deg, #fff 50%, rgba(255,255,255,0.5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.home-tagline-go {
  -webkit-text-fill-color: #F97316;
  color: #F97316;
  font-style: italic;
}

/* CTA principal — premium, avec glow */
.home-cta-row {
  position: relative;
  z-index: 10;
  padding: 20px 20px 0;
  display: flex;
  gap: 12px;
  align-items: center;
}
.home-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F97316;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: 'Satoshi', var(--font-body);
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background 0.15s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(249,115,22,0.38);
}
.home-cta-btn:hover {
  background: #fb923c;
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(249,115,22,0.55);
}
.home-cta-btn:active { transform: scale(0.97); background: #EA6B0B; box-shadow: none; }
.home-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: rgba(255,255,255,0.55);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Satoshi', var(--font-body);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.home-install-btn:hover {
  color: #F97316;
  border-color: rgba(249,115,22,0.5);
  background: rgba(249,115,22,0.06);
}
.home-tagline-sub {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
}

.home-banner {
  position: relative;
  z-index: 10;
  padding: 16px 20px 20px;
}
.home-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 6px 13px;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.stat-pill--ongoing {
  background: rgba(16,185,129,0.14);
  border-color: rgba(16,185,129,0.28);
  color: #6EE7B7;
}
.stat-pill--upcoming {
  background: rgba(99,102,241,0.14);
  border-color: rgba(99,102,241,0.28);
  color: #A5B4FC;
}
.stat-pill--total {
  background: rgba(249,115,22,0.12);
  border-color: rgba(249,115,22,0.26);
  color: #FDBA74;
}

#screen-home .main-content {
  background: var(--bg);
  border-radius: 16px 16px 0 0;
  margin-top: 0;
  padding: 0 0 100px;
  position: relative;
  z-index: 5;
  flex: 1;
}

#screen-home .main-content::before {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--border-solid);
  border-radius: 2px;
  margin: 10px auto 16px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 12px;
}
.section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 16px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.section-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* ─── GLOBAL HEADER ──────────────────────────────────────────── */
.app-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border-solid);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: env(safe-area-inset-top) 0 0;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.app-header h1 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  letter-spacing: -.01em;
}

/* ─── CREWIGO LOGO ───────────────────────────────────────────── */
.crewigo-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  text-decoration: none;
}
.crewigo-logo-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.crewigo-logo-icon svg { display: block; }

/* Vrai logo PNG */
.crewigo-logo-img {
  width: 30px;
  height: 30px;
  max-width: 30px;
  max-height: 30px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.crewigo-logo-img--lg {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.logo-crew {
  font-family: 'Satoshi', var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.025em;
  line-height: 1;
}
.logo-go {
  font-family: 'Satoshi', var(--font-body);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
  font-style: italic;
  letter-spacing: -.025em;
  line-height: 1;
}

/* version blanche pour header sur image hero */
.crewigo-logo--white .logo-crew { color: #fff; }
.crewigo-logo--white .logo-go   { color: #fff; }

/* ─── VOYAGE HEADER — dark brand ────────────────────────────── */
.voyage-header {
  background: #1C1917;
  border-bottom: none;
  position: relative;
}
.voyage-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #F97316, #FBBF24);
}
.voyage-header .btn-icon {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
}
.voyage-header .btn-icon:hover { background: rgba(255,255,255,0.16); }
.voyage-header .header-title h1 { color: #FFFFFF; }
.voyage-header .header-title .subtitle { color: rgba(255,255,255,0.55); font-weight: 500; }

.header-title { flex: 1; min-width: 0; }
.header-title h1 {
  font-size: .95rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  letter-spacing: -.01em;
}
.header-title .subtitle {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 1px;
  font-weight: 400;
}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn-icon {
  width: 36px; height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.15s;
}
.btn-icon:hover { background: var(--bg-alt); color: var(--text); }
.btn-icon:active { opacity: 0.7; }
.btn-back { background: transparent; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 0.84rem;
  font-weight: 600;
  font-family: 'Satoshi', var(--font-body);
  cursor: pointer;
  transition: background 0.15s;
  letter-spacing: 0;
}
.btn-primary:hover { background: var(--accent-dark); }
.btn-primary:active { opacity: 0.85; }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 0.84rem;
  font-weight: 500;
  font-family: 'Satoshi', var(--font-body);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--bg-alt); }

/* ─── MAIN CONTENT ───────────────────────────────────────────── */
.main-content { flex: 1; padding: 16px; overflow-y: auto; padding-bottom: 90px; }
.tabs-content { padding: 0; }

/* ═══════════════════════════════════════════════════════════════
   VOYAGE CARDS
   ═══════════════════════════════════════════════════════════════ */
/* ─── VOYAGE GRID & CARDS ────────────────────────────────────── */
.voyage-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 16px;
  background: var(--bg);
}

.voyage-card {
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--border-solid);
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 10px;
  transition: box-shadow 0.20s, transform 0.14s, border-color 0.20s;
  animation: cardEntrance 0.3s ease both;
  position: relative;
}
.voyage-card:nth-child(1) { animation-delay: 0ms; }
.voyage-card:nth-child(2) { animation-delay: 55ms; }
.voyage-card:nth-child(3) { animation-delay: 110ms; }
.voyage-card:nth-child(n+4) { animation-delay: 160ms; }

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

.voyage-card:hover {
  border-color: rgba(249,115,22,0.35);
  box-shadow: 0 6px 24px rgba(249,115,22,0.12), 0 1px 4px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}
.voyage-card:hover .voyage-card-banner-img { transform: scale(1.04); }
.voyage-card:active { transform: scale(0.99); }

/* ── Banner : fond sombre brand, photo texture, accent couleur ── */
.voyage-card-banner {
  height: 96px;
  position: relative;
  background: #1C1917;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Bande de couleur en haut (3px) */
.voyage-card-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 3;
}

/* Photo Wikipedia : texture atténuée */
.voyage-card-banner-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease, opacity 0.5s ease;
  z-index: 1;
}

/* Wash couleur voyage très subtil */
.voyage-card-color-wash {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Dégradé noir pour lisibilité du texte */
.voyage-card-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.22) 55%, rgba(0,0,0,0.08) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Ligne destination + badge */
.voyage-card-banner-row {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 14px 11px;
}
.voyage-card-dest {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.88);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.voyage-card-dest svg { flex-shrink: 0; opacity: 0.8; }

/* Badge dans le banner */
.voyage-card-banner-row .voyage-badge {
  font-size: 0.60rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ── Corps de la carte ─────────────────────────────────────────── */
.voyage-card-body {
  padding: 12px 14px 13px;
}
.voyage-card-title {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 8px;
}
.voyage-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.voyage-dates {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 500;
}
.voyage-dates svg { color: var(--text-light); flex-shrink: 0; }
.voyage-duree {
  font-size: 0.70rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  padding: 2px 8px;
  border-radius: 10px;
}
.voyage-arrow { color: var(--text-light); font-size: 0.9rem; }

/* Badges statut — inchangés, positionnés dans le banner */
.voyage-badge {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.badge-upcoming { background: rgba(29,78,216,0.85); color: #BFDBFE; backdrop-filter: blur(4px); }
.badge-ongoing  { background: rgba(21,128,61,0.85);  color: #BBF7D0; backdrop-filter: blur(4px); }
.badge-past     { background: rgba(0,0,0,0.45);       color: rgba(255,255,255,0.55); backdrop-filter: blur(4px); }
.badge-done     { background: rgba(194,65,12,0.85);   color: #FED7AA; backdrop-filter: blur(4px); }

/* ─── TAB NAV after voyage-header ───────────────────────────── */
.voyage-header + .tab-nav {
  border-top: none;
  border-bottom: 1px solid var(--border-solid);
}

/* ─── TAB NAVIGATION ─────────────────────────────────────────── */
.tab-nav {
  display: flex;
  background: var(--bg);
  border-bottom: 1px solid var(--border-solid);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  flex: 1;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 6px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.58rem;
  font-weight: 500;
  font-family: 'Satoshi', var(--font-body);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
  position: relative;
}
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tab-btn:not(.active):hover { color: var(--text); }

/* ─── TAB SVG ICONS ──────────────────────────────────────────── */
.tab-icon { font-size: 1rem; }

.tab-svg-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.tab-svg-icon svg {
  width: 18px;
  height: 18px;
  fill: var(--text-muted);
  transition: fill 0.15s;
  flex-shrink: 0;
}
.tab-btn.active .tab-svg-icon {
  background: var(--accent);
}
.tab-btn.active .tab-svg-icon svg {
  fill: #ffffff;
}
.tab-btn:not(.active):hover .tab-svg-icon svg { fill: var(--text); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─── PANEL ACTIONS ──────────────────────────────────────────── */
.panel-actions {
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-solid);
}

/* ─── FILTER CHIPS ───────────────────────────────────────────── */
.filter-chips {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-solid);
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-chips::-webkit-scrollbar { display: none; }

.chip {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 500;
  font-family: 'Satoshi', var(--font-body);
  border: 1px solid var(--border-solid);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text-muted);
  transition: all 0.15s;
}
.chip.active {
  background: var(--text);
  border-color: var(--text);
  color: white;
}

/* ═══════════════════════════════════════════════════════════════
   RESERVATION CARDS
   ═══════════════════════════════════════════════════════════════ */
.resa-list {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.resa-card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border-solid);
  overflow: hidden;
  transition: background 0.15s;
}
.resa-card:hover { background: var(--bg-alt); }

.resa-card-inner {
  display: flex;
  gap: 12px;
  padding: 12px;
  align-items: flex-start;
}

/* ── Système d'icônes CrewiGo — gradient orange ─────────────── */
.cgo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(145deg, #FFB84D 0%, #F97316 100%);
  box-shadow: 0 3px 10px rgba(249,115,22,.30);
}
.cgo-icon svg {
  width: 55%; height: 55%;
  filter: drop-shadow(0 1px 2px rgba(140,55,0,.22));
}

.resa-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(145deg, #FFB84D 0%, #F97316 100%);
  box-shadow: 0 3px 8px rgba(249,115,22,.28);
}
.resa-icon svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(140,55,0,.22)); }
/* Conserver compatibilité avec les classes spécifiques au cas où */
.icon-transport, .icon-hebergement, .icon-vehicule,
.icon-activite,  .icon-restaurant  { background: linear-gradient(145deg, #FFB84D 0%, #F97316 100%); }

.resa-body { flex: 1; min-width: 0; }
.resa-titre {
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 4px;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.3;
}
.resa-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.resa-meta span { display: flex; align-items: center; gap: 3px; }
.resa-confirmation {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px; font-size: 0.68rem;
  padding: 2px 8px; background: var(--bg-alt);
  border-radius: 4px; color: var(--text-muted);
  font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
  border: 1px solid var(--border-solid); font-weight: 600;
}

.resa-card-badges {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;
}
.resa-badge-mini {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 0.62rem; font-weight: 600;
  padding: 2px 7px; border-radius: 4px;
  background: var(--bg-alt); color: var(--text-muted);
  border: 1px solid var(--border-solid); white-space: nowrap;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
}
.resa-badge-lien { background: var(--accent-light); color: var(--accent-dark); border-color: rgba(249,115,22,.15); }
.resa-badge-doc  { background: #EFF6FF; color: #1D4ED8; border-color: #DBEAFE; }

/* ─── PANNEAU DÉTAIL RÉSERVATION ─────────────────────────────── */
.resa-detail-sheet-body {
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.rd-header {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 16px;
}
.rd-icon {
  width: 44px; height: 44px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
}
.rd-header-text { flex: 1; min-width: 0; }
.rd-titre {
  font-size: 1.1rem; font-weight: 700;
  color: var(--text); line-height: 1.3; margin-bottom: 2px;
  letter-spacing: -.01em;
}
.rd-date { font-size: 0.80rem; color: var(--text-muted); font-weight: 400; }

.rd-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.rd-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.86rem; color: var(--text); line-height: 1.5;
}
.rd-row-icon { flex-shrink: 0; width: 18px; }
.rd-code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.80rem; font-weight: 600;
  background: var(--bg-alt); border: 1px solid var(--border-solid);
  padding: 2px 7px; border-radius: 4px; color: var(--text);
}
.rd-copy-btn {
  margin-left: auto; flex-shrink: 0;
  font-size: 0.68rem; font-weight: 600;
  padding: 2px 9px; border-radius: 4px;
  background: var(--bg-alt); color: var(--text-muted);
  border: 1px solid var(--border-solid); cursor: pointer;
  transition: all .15s;
}
.rd-copy-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }

.rd-notes {
  font-size: 0.84rem; color: var(--text);
  line-height: 1.65; margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg-alt); border-radius: var(--radius);
  border: 1px solid var(--border-solid);
}

.rd-lien-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px;
  background: var(--accent); color: white;
  border-radius: var(--radius); font-size: 0.88rem; font-weight: 600;
  text-decoration: none; margin-bottom: 14px;
  transition: background .15s;
}
.rd-lien-btn:hover { background: var(--accent-dark); }

.rd-section { margin-bottom: 12px; }
.rd-section-label {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); margin-bottom: 6px;
}

.rd-actions {
  display: flex; flex-direction: column; gap: 0;
  border-top: 1px solid var(--border-solid); margin-top: 14px; padding-top: 8px;
}

.resa-docs {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--border-solid);
}
.resa-doc-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: var(--bg-alt); border: 1px solid var(--border-solid);
  border-radius: 4px; font-size: 0.70rem; font-weight: 500;
  color: var(--text-muted); cursor: pointer; transition: all 0.15s;
  max-width: 200px;
}
.resa-doc-badge span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resa-doc-badge:hover { background: var(--accent-light); color: var(--accent-dark); border-color: rgba(249,115,22,.2); }

.resa-actions { display: flex; gap: 5px; align-self: flex-start; }
.btn-mini {
  height: 30px;
  min-width: 30px;
  border-radius: var(--radius);
  border: 1px solid var(--border-solid);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem;
  background: var(--bg-alt);
  color: var(--text-muted);
  transition: all 0.15s;
  padding: 0 8px;
  gap: 4px;
  font-family: 'Satoshi', var(--font-body);
  font-weight: 500;
}
.btn-mini:hover { background: var(--border-solid); color: var(--text); }
.btn-mini:active { opacity: 0.7; }
.btn-mini-view { background: #EFF6FF; color: #1D4ED8; border-color: #DBEAFE; }
.btn-mini-edit { background: var(--accent-light); color: var(--accent); border-color: rgba(249,115,22,.2); }
.btn-mini-del  { background: #FEF2F2; color: var(--danger); border-color: #FEE2E2; }

/* ═══════════════════════════════════════════════════════════════
   AGENDA
   ═══════════════════════════════════════════════════════════════ */
.agenda-day { margin: 12px 16px 0; }
.agenda-day-header {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 0 6px;
  display: flex; align-items: center; gap: 10px;
}
.agenda-day-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-solid);
}
.agenda-day-header.today { color: var(--accent); }

.agenda-item {
  display: flex;
  gap: 10px;
  padding: 11px 12px;
  background: var(--card);
  border-radius: var(--radius);
  margin-bottom: 6px;
  border: 1px solid var(--border-solid);
  align-items: flex-start;
  transition: background 0.15s;
}
.agenda-item:hover { background: var(--bg-alt); }

.agenda-heure {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  min-width: 40px;
  text-align: right;
  flex-shrink: 0;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.agenda-line {
  width: 2px;
  border-radius: 2px;
  background: var(--border-solid);
  flex-shrink: 0;
  align-self: stretch;
  min-height: 20px;
}
.agenda-content { flex: 1; min-width: 0; }
.agenda-titre {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.3;
}
.agenda-lieu {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.4;
}
.agenda-lien {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  background: var(--accent-light);
  padding: 3px 8px;
  border-radius: 4px;
  transition: all 0.15s;
}
.agenda-lien:hover { background: var(--accent); color: white; }
.agenda-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   CARTE
   ═══════════════════════════════════════════════════════════════ */
.carte-header {
  padding: 12px 16px 10px;
  background: var(--card);
  border-bottom: 1px solid var(--border-solid);
}
.carte-info { font-size: 0.82rem; color: var(--text-muted); font-weight: 400; }

.lieux-list {
  padding: 8px 16px 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--card);
  border-bottom: 1px solid var(--border-solid);
}

.lieu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius);
  background: var(--bg-alt);
  font-size: 0.84rem;
  cursor: pointer;
  transition: background 0.15s;
  color: var(--text);
  border: 1px solid var(--border-solid);
  font-weight: 400;
}
.lieu-item:hover { background: var(--accent-light); border-color: rgba(249,115,22,.2); color: var(--accent-dark); }
.lieu-emoji { font-size: 1rem; }

.carte-frame-container { padding: 0; }
.carte-frame { width: 100%; height: 420px; border: none; display: block; }

/* ═══════════════════════════════════════════════════════════════
   DOCUMENTS
   ═══════════════════════════════════════════════════════════════ */
.docs-list {
  padding: 10px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.doc-card {
  display: flex; align-items: center; gap: 11px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 11px;
  border: 1px solid var(--border-solid);
  transition: background 0.15s;
}
.doc-card:hover { background: var(--bg-alt); }
.doc-icon { font-size: 1.5rem; flex-shrink: 0; }
.doc-body { flex: 1; min-width: 0; }
.doc-nom {
  font-weight: 600;
  font-size: 0.86rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
  letter-spacing: -.01em;
}
.doc-meta { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }
.doc-event-link { font-size: 0.70rem; color: var(--accent); margin-top: 3px; font-weight: 500; }
.doc-actions { display: flex; gap: 5px; }

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 56px 28px;
  text-align: center; gap: 14px;
}
.empty-icon {
  width: 64px; height: 64px;
  background: var(--accent-light);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  margin-bottom: 4px;
}
.empty-state h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
}
.empty-state p { color: var(--text-muted); font-size: 0.84rem; line-height: 1.6; max-width: 260px; }
.hidden { display: none !important; }

.empty-tab {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.empty-tab-icon { font-size: 2.4rem; display: flex; justify-content: center; }
.empty-tab p { font-size: 0.84rem; line-height: 1.6; max-width: 260px; }

/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.40);
  display: flex; align-items: flex-end; z-index: 1000;
  animation: fadeIn 0.18s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--card);
  border-radius: 14px 14px 0 0;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  animation: slideUp 0.24s cubic-bezier(0.4,0,0.2,1);
  border-top: 1px solid var(--border-solid);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.modal::before {
  content: '';
  display: block;
  width: 36px; height: 4px;
  background: var(--accent);
  border-radius: 2px;
  margin: -8px auto 20px;
  opacity: 0.4;
}

.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.modal-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.modal-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border-solid);
}

/* ─── FORMS ──────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1; }

input[type="text"],
input[type="date"],
input[type="time"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  font-size: 0.90rem;
  font-family: 'Satoshi', var(--font-body);
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.15s;
  -webkit-appearance: none;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
textarea { resize: vertical; line-height: 1.6; }

/* ─── COLOR PICKER ───────────────────────────────────────────── */
.color-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.color-opt {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.color-opt.active {
  border-color: white;
  outline: 2.5px solid var(--text);
  transform: scale(1.15);
}

/* ─── TYPE SELECTOR ──────────────────────────────────────────── */
.type-selector { display: flex; flex-wrap: wrap; gap: 6px; }
.type-opt {
  padding: 7px 12px;
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 500;
  font-family: 'Satoshi', var(--font-body);
  border: 1px solid var(--border-solid);
  background: var(--bg);
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
}
.type-opt.active {
  background: var(--text);
  border-color: var(--text);
  color: white;
}

/* ─── BOTTOM SHEET ───────────────────────────────────────────── */
.bottom-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--card);
  border-radius: 14px 14px 0 0;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 1001;
  animation: slideUp 0.20s ease;
  border-top: 1px solid var(--border-solid);
}
.bottom-sheet-handle {
  width: 32px; height: 3px;
  background: var(--border-solid);
  border-radius: 2px;
  margin: 0 auto 20px;
}
.sheet-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 10px;
  border: none; background: transparent; cursor: pointer;
  font-size: 0.90rem; font-weight: 500;
  font-family: 'Satoshi', var(--font-body);
  border-radius: var(--radius);
  text-align: left;
  transition: background 0.15s;
  margin-bottom: 2px;
  color: var(--text);
}
.sheet-btn:hover { background: var(--bg-alt); }
.sheet-btn.danger { color: var(--danger); }

/* ── Bottom sheet redesigné ── */
.sheet-header {
  padding: 0 4px 12px;
  font-size: 0.80rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 4px;
}
.sheet-action-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-lg);
  transition: background 0.12s;
  text-align: left;
  font-family: 'Satoshi', var(--font-body);
}
.sheet-action-btn:hover { background: var(--bg-alt); }
.sheet-action-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(145deg, #FFB84D 0%, #F97316 100%);
  box-shadow: 0 3px 10px rgba(249,115,22,.28);
}
.sheet-action-icon svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(140,55,0,.22)); }
.sheet-action-body { flex: 1; min-width: 0; }
.sheet-action-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.sheet-action-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 1px;
  line-height: 1.3;
}
.sheet-action-chevron {
  width: 16px; height: 16px;
  color: var(--text-light);
  flex-shrink: 0;
}
.sheet-cancel-btn {
  display: block;
  width: 100%;
  padding: 13px;
  background: var(--bg-alt);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius-lg);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: 'Satoshi', var(--font-body);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  margin-top: 10px;
  transition: background 0.12s;
}
.sheet-cancel-btn:hover { background: var(--border-solid); }
.overlay-sheet {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 1000;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ─── TOAST ──────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%);
  background: var(--text);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 500;
  font-family: 'Satoshi', var(--font-body);
  z-index: 2000;
  white-space: nowrap;
  animation: toastIn 0.22s cubic-bezier(0.4,0,0.2,1);
  letter-spacing: 0;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   BAGAGES
   ═══════════════════════════════════════════════════════════════ */
.bagage-section { margin-bottom: 2px; }
.bagage-cat-header {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 2px 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.bagage-count { font-size: 0.68rem; color: var(--accent); font-weight: 600; }

.bagage-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--card);
  border-radius: var(--radius);
  margin-bottom: 4px;
  border: 1px solid var(--border-solid);
  cursor: pointer;
  transition: background 0.15s;
}
.bagage-item:hover { background: var(--bg-alt); }
.bagage-item:active { opacity: 0.8; }
.bagage-item.checked {
  background: #F0FDF4;
  border-color: #BBF7D0;
}

.bagage-check {
  width: 20px; height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1.5px solid var(--border-solid);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
  background: white;
}
.bagage-check.checked {
  background: #22C55E;
  border-color: #16A34A;
  color: white;
}

.bagage-nom {
  flex: 1;
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--text);
  transition: all 0.2s;
}
.bagage-item.checked .bagage-nom {
  text-decoration: line-through;
  color: var(--text-muted);
}

.bagage-del {
  background: none; border: none; cursor: pointer;
  color: var(--text-light); font-size: 1rem; line-height: 1;
  padding: 4px; border-radius: 4px; opacity: 0.5;
  transition: opacity 0.15s;
}
.bagage-del:hover { opacity: 1; color: var(--danger); }

/* ─── Avatar Chips ────────────────────────────────────────────── */
.avatar-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--border-solid);
  border-radius: 6px;
  padding: 4px 10px 4px 5px;
  cursor: pointer;
  transition: background 0.15s;
}
.avatar-chip:hover { background: var(--border-solid); }
.avatar-chip.active { border-color: var(--accent); background: var(--accent-light); }

.avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700; color: white; flex-shrink: 0;
}
.avatar-xs {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.55rem; font-weight: 700; color: white;
}
.avatar-nom { font-size: 0.80rem; font-weight: 500; color: var(--text); }
.avatar-del {
  background: none; border: none; cursor: pointer;
  color: var(--text-light); font-size: .9rem; line-height: 1;
  padding: 0 2px; margin-left: 1px;
  transition: color 0.15s;
}
.avatar-del:hover { color: var(--danger); }
.avatar-pin {
  background: none; border: none; cursor: pointer;
  font-size: .82rem; line-height: 1; padding: 0 2px;
  opacity: .4; transition: opacity 0.15s;
}
.avatar-pin:hover, .avatar-pin.has-pin { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   BUDGET
   ═══════════════════════════════════════════════════════════════ */
.budget-section {
  background: var(--card);
  border-bottom: 1px solid var(--border-solid);
}
.budget-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 8px;
}
.budget-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.budget-section-title::before {
  content: '';
  display: inline-block;
  width: 3px; height: 14px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.btn-mini-add {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  border: none;
  border-radius: var(--radius);
  padding: 4px 11px;
  cursor: pointer;
  font-family: 'Satoshi', var(--font-body);
  transition: all 0.15s;
}
.btn-mini-add:hover { background: var(--accent); color: white; }

.participants-list { padding: 0 16px 12px; }
.avatars-row { display: flex; flex-wrap: wrap; gap: 6px; }

.budget-total-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  background: var(--text);
  margin-bottom: 0;
  border-radius: 0;
}
.budget-total-label {
  font-size: 0.74rem;
  font-weight: 500;
  color: rgba(255,255,255,0.70);
}
.budget-total-amount {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  letter-spacing: -.02em;
}

.depense-card {
  display: flex; align-items: center; gap: 11px;
  background: var(--card);
  border-radius: var(--radius);
  padding: 10px 12px;
  border: 1px solid var(--border-solid);
  transition: background 0.15s;
}
.depense-card:hover { background: var(--bg-alt); }
.depense-cat { flex-shrink: 0; display: flex; align-items: center; }
.depense-body { flex: 1; min-width: 0; }
.depense-titre {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  letter-spacing: -.01em;
}
.depense-meta {
  font-size: 0.70rem;
  color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 3px; align-items: center;
}
.depense-montant {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: -.01em;
}

.participants-selector { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.participant-radio, .participant-check {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 7px;
  border-radius: 6px;
  border: 1px solid var(--border-solid);
  cursor: pointer;
  font-size: 0.80rem;
  font-weight: 500;
  font-family: 'Satoshi', var(--font-body);
  color: var(--text);
  transition: all 0.15s;
  user-select: none;
}
.participant-radio input, .participant-check input { display: none; }
.participant-radio:has(input:checked), .participant-check:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent-dark);
}

.bilan-ok {
  padding: 18px;
  text-align: center;
  font-size: 0.90rem;
  font-weight: 600;
  color: var(--success);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bilan-transaction {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  padding: 11px 13px;
  gap: 8px;
}
.bilan-from, .bilan-to {
  display: flex; align-items: center; gap: 7px;
  font-weight: 600;
  font-size: 0.84rem;
}
.bilan-arrow {
  display: flex; flex-direction: column; align-items: center;
  color: var(--text-muted);
  flex: 1;
}
.bilan-amount {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 2px;
}

/* ─── DOCUMENT VIEWER ────────────────────────────────────────── */
.doc-viewer-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: #000;
  display: flex; flex-direction: column;
}
.doc-viewer-overlay.hidden { display: none; }
.doc-viewer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: #111;
  gap: 12px; flex-shrink: 0;
}
.doc-viewer-titre {
  color: #fff;
  font-size: 0.84rem;
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.doc-viewer-close {
  background: #333;
  color: #fff;
  border: none; border-radius: 6px;
  padding: 7px 14px;
  font-size: 0.84rem; font-weight: 600;
  font-family: 'Satoshi', var(--font-body);
  cursor: pointer; flex-shrink: 0;
  transition: background .15s;
}
.doc-viewer-close:hover { background: var(--danger); }
.doc-viewer-frame { flex: 1; width: 100%; border: none; background: #fff; }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (min-width: 640px) {
  .voyage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg);
  }
  .voyage-card { border-radius: 12px; margin-bottom: 0; }
  .modal-overlay { align-items: center; }
  .modal { border-radius: 14px; max-width: 540px; margin: auto; }
  .modal::before { display: none; }
  .bottom-sheet { max-width: 480px; left: 50%; transform: translateX(-50%); border-radius: 14px 14px 0 0; }
  .carte-frame { height: 500px; }
  #screen-home .app-header { min-height: 300px; }
  .home-tagline-main { font-size: 2.5rem; }
}

@media (min-width: 1024px) {
  .voyage-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* ─── DASHBOARD ACCUEIL ──────────────────────────────────────── */
.dash-hero {
  margin: 12px 16px;
  border-radius: 12px;
  padding: 18px 20px;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.dash-hero-upcoming { background: #1C1917; }
.dash-hero-ongoing  { background: #064E3B; }
.dash-hero-past     { background: #292524; }
/* Accent bar */
.dash-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #F97316, #FBBF24);
}

.dash-hero-eyebrow {
  font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  opacity: .70; margin-bottom: 5px;
}
.dash-hero-days {
  font-size: 2rem; font-weight: 800; line-height: 1.1; margin-bottom: 6px;
  letter-spacing: -.03em;
}
.dash-hero-dest {
  font-size: .88rem; opacity: .80; margin-bottom: 3px;
}
.dash-hero-period {
  font-size: .75rem; opacity: .60;
}

.dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-solid);
  border-top: 1px solid var(--border-solid);
  border-bottom: 1px solid var(--border-solid);
}
.dash-stat-card {
  background: var(--card);
  padding: 14px 12px 12px;
  text-align: center;
}
.dash-stat-value {
  font-size: 1.7rem; font-weight: 800; color: var(--text); line-height: 1;
  margin-bottom: 3px; letter-spacing: -.03em;
}
.dash-stat-label {
  font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted);
}
.dash-stat-bar {
  margin-top: 8px; height: 2px; border-radius: 1px;
  background: var(--border-solid); overflow: hidden;
}
.dash-stat-bar-fill {
  height: 100%; border-radius: 1px;
  background: var(--accent);
  transition: width .4s ease;
}

.dash-section-title {
  font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); padding: 12px 16px 6px;
  display: flex; align-items: center; gap: 6px;
}

.dash-next-card {
  margin: 0 16px 12px;
  background: var(--card);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  padding: 12px 12px 12px 10px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; transition: background .15s;
}
.dash-next-card:hover { background: var(--bg-alt); }
.dash-next-icon { font-size: 1.5rem; flex-shrink: 0; }
.dash-next-body { flex: 1; min-width: 0; }
.dash-next-titre { font-weight: 600; font-size: .90rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-next-date  { font-size: .75rem; color: var(--accent); font-weight: 500; margin-top: 2px; }
.dash-next-lieu  { font-size: .72rem; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 3px; }

.dash-weather-card {
  margin: 0 16px 12px;
  background: var(--card);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  padding: 12px;
  overflow: hidden;
}
.dash-weather-loc {
  font-size: .72rem; font-weight: 600; color: var(--text-muted); margin-bottom: 10px;
  display: flex; align-items: center; gap: 4px;
}
.dash-weather-row {
  display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: none;
}
.dash-weather-row::-webkit-scrollbar { display: none; }
.dash-forecast-day {
  flex: 0 0 auto; min-width: 48px;
  background: var(--bg-alt);
  border-radius: var(--radius);
  padding: 7px 3px;
  text-align: center;
}
.dash-forecast-label { font-size: .62rem; font-weight: 600; color: var(--text-muted); margin-bottom: 3px; }
.dash-forecast-emoji { font-size: 1.25rem; line-height: 1; margin-bottom: 3px; }
.dash-forecast-temps { display: flex; gap: 2px; justify-content: center; font-size: .68rem; font-weight: 600; }
.dash-tmax { color: var(--text); }
.dash-tmin { color: var(--text-muted); }
.dash-forecast-rain { font-size: .58rem; color: #3B82F6; margin-top: 2px; }
.dash-meteo-na { padding: 12px 16px; font-size: .80rem; color: var(--text-muted); }

.dash-notes {
  margin: 0 16px 12px;
  background: var(--card);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  padding: 12px;
  font-size: .84rem; line-height: 1.5; color: var(--text-muted);
  white-space: pre-wrap;
}

/* ─── PROGRAMME TIMELINE ─────────────────────────────────────── */
.prog-day { margin-bottom: 0; }

.prog-day-header {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg);
  padding: 8px 16px 6px;
  border-bottom: 1px solid var(--border-solid);
}
.prog-day-label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prog-day-date { font-weight: 700; font-size: .86rem; letter-spacing: -.01em; }
.prog-day-num  { font-size: .68rem; font-weight: 600; color: var(--accent); background: var(--accent-light); padding: 1px 7px; border-radius: 4px; }
.prog-day-today .prog-day-date { color: var(--accent); }
.prog-day-past  .prog-day-date { color: var(--text-muted); }
.prog-day-past  .prog-day-header { opacity: .60; }

.prog-items { padding: 8px 16px 4px; display: flex; flex-direction: column; gap: 0; }

.prog-item { display: flex; gap: 8px; min-height: 56px; }

.prog-spine {
  display: flex; flex-direction: column; align-items: center;
  width: 20px; flex-shrink: 0; padding-top: 10px;
}
.prog-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--bg); flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
  position: relative; z-index: 1;
}
.prog-line {
  width: 1px; flex: 1; margin-top: 3px; border-radius: 1px;
  min-height: 20px;
}

.prog-card {
  flex: 1; min-width: 0;
  background: var(--card);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
  transition: background .15s;
}
.prog-card:hover { background: var(--bg-alt); }

.prog-card-top {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px;
}
.prog-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 1px; }
.prog-card-body { flex: 1; min-width: 0; }
.prog-titre { font-weight: 600; font-size: .88rem; margin-bottom: 2px; letter-spacing: -.01em; }
.prog-heure { font-size: .72rem; font-weight: 500; color: var(--accent); display: inline-flex; align-items: center; gap: 4px; }
.prog-lieu  { font-size: .74rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.prog-desc  { font-size: .74rem; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.prog-lien  { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--accent); text-decoration: none; margin-top: 3px; }
.prog-lien:hover { text-decoration: underline; }

.prog-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }

.prog-badge {
  font-size: .60rem; font-weight: 600; padding: 2px 6px;
  border-radius: 4px; white-space: nowrap;
}
.prog-badge-resa   { background: #EFF6FF; color: #1D4ED8; }
.prog-badge-agenda { background: #F0FDF4; color: #15803D; }

.prog-docs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.prog-doc-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--bg-alt); color: var(--text-muted);
  border: 1px solid var(--border-solid);
  border-radius: 4px; padding: 2px 8px;
  font-size: .68rem; font-weight: 500; cursor: pointer;
  transition: background .14s;
}
.prog-doc-badge:hover { background: var(--accent-light); color: var(--accent-dark); border-color: rgba(249,115,22,.2); }
.prog-doc-badge span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn-mini-map { background: #EFF6FF; color: #1D4ED8; border-color: #DBEAFE; }
.btn-mini-map.active { background: #1D4ED8; color: #fff; border-color: #1D4ED8; }

.prog-map {
  border-top: 1px solid var(--border-solid);
  overflow: hidden;
  border-radius: 0 0 var(--radius) var(--radius);
  animation: mapSlideDown .20s ease;
}
@keyframes mapSlideDown {
  from { max-height: 0; opacity: 0; }
  to   { max-height: 220px; opacity: 1; }
}
.prog-map-frame {
  display: block; width: 100%; height: 180px; border: none;
}

/* ─── SCAN / OCR ─────────────────────────────────────────────── */
.scan-mode-btns {
  display: flex; gap: 0;
  border: 1px solid var(--border-solid);
  border-radius: var(--radius); overflow: hidden;
  margin-top: 12px;
}
.scan-mode-btn {
  flex: 1; padding: 8px 8px;
  font-size: .80rem; font-weight: 500;
  background: var(--bg-alt); color: var(--text-muted);
  border: none; cursor: pointer;
  transition: background .15s, color .15s;
}
.scan-mode-btn:first-child { border-right: 1px solid var(--border-solid); }
.scan-mode-btn.active { background: var(--text); color: #fff; }

.scan-preview {
  width: 100%; max-height: 160px; object-fit: contain;
  border-radius: var(--radius); background: var(--bg-alt);
  display: block; margin-bottom: 10px;
}

.scan-progress-bar {
  height: 4px; border-radius: 2px;
  background: var(--border-solid); overflow: hidden;
}
.scan-progress-fill {
  height: 100%; width: 0%; border-radius: 2px;
  background: var(--accent);
  transition: width .25s ease;
}

.scan-fields {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--bg-alt);
  border: 1px solid var(--border-solid);
  border-radius: var(--radius); padding: 10px 12px;
}
.scan-field { display: flex; align-items: baseline; gap: 8px; }
.scan-fl {
  font-size: .68rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  flex-shrink: 0; min-width: 80px;
}
.scan-fv { font-size: .84rem; font-weight: 500; color: var(--text); word-break: break-all; }
.scan-no-data { font-size: .80rem; color: var(--text-muted); padding: 5px 0; }

/* ─── ADMIN TAB ──────────────────────────────────────────────── */
.adm-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 16px;
  border-bottom: 1px solid var(--border-solid);
}
.adm-stat { display: flex; flex-direction: column; align-items: center; flex: 1; }
.adm-stat-n {
  font-size: 1.8rem; font-weight: 800; color: var(--text); line-height: 1;
  letter-spacing: -.03em;
}
.adm-stat-l {
  font-size: .62rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); margin-top: 3px;
}
.adm-stat-sep {
  width: 1px; height: 36px; background: var(--border-solid); margin: 0 16px;
}

.adm-section { border-top: 1px solid var(--border-solid); }
.adm-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 8px;
  background: var(--bg-alt);
}
.adm-section-title {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
}

.adm-table { display: flex; flex-direction: column; }

.adm-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-solid);
  transition: background .14s;
}
.adm-row:last-child { border-bottom: none; }
.adm-row:hover { background: var(--bg-alt); }

.adm-row-icon { font-size: 1.1rem; flex-shrink: 0; width: 26px; text-align: center; }
.adm-row-body { flex: 1; min-width: 0; }
.adm-row-titre {
  font-weight: 500; font-size: .86rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.adm-row-meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-size: .68rem; color: var(--text-muted);
}
.adm-row-ref {
  background: var(--accent-light); color: var(--accent);
  padding: 1px 6px; border-radius: 4px; font-weight: 600;
}
.adm-row-cat {
  background: var(--bg-alt); border: 1px solid var(--border-solid);
  padding: 1px 6px; border-radius: 4px;
}

.adm-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.adm-btn-link {
  background: var(--bg-alt) !important;
  color: var(--text-muted) !important;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}

.adm-empty {
  padding: 18px 16px;
  text-align: center;
  font-size: .82rem; color: var(--text-muted);
}

/* ─── FIL DE COMMENTAIRES ────────────────────────────────────── */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 88px;
}
.chat-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.chat-msg.mine { flex-direction: row-reverse; }
.chat-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .70rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.chat-bubble { flex: 1; min-width: 0; max-width: 78%; }
.chat-msg.mine .chat-bubble { align-items: flex-end; display: flex; flex-direction: column; }
.chat-meta {
  font-size: .66rem; color: var(--text-muted);
  margin-bottom: 3px;
  display: flex; gap: 5px; align-items: center;
}
.chat-auteur { font-weight: 600; color: var(--text); }
.chat-text {
  background: var(--bg-alt);
  border-radius: 3px 12px 12px 12px;
  padding: 8px 12px;
  font-size: .86rem; line-height: 1.5;
  border: 1px solid var(--border-solid);
  word-break: break-word;
}
.chat-msg.mine .chat-text {
  background: var(--accent);
  color: #fff;
  border-radius: 12px 3px 12px 12px;
  border-color: transparent;
}
.chat-del {
  background: none; border: none; cursor: pointer;
  font-size: .72rem; color: var(--text-muted);
  padding: 2px 4px; opacity: 0.5; line-height: 1;
}
.chat-del:hover { opacity: 1; color: #EF4444; }
.chat-input-bar {
  position: sticky;
  bottom: 0;
  background: var(--card);
  border-top: 1px solid var(--border-solid);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  align-items: flex-end;
  z-index: 5;
}
.chat-input {
  flex: 1;
  border: 1px solid var(--border-solid);
  border-radius: 6px;
  padding: 9px 14px;
  font-size: .86rem;
  background: var(--bg-alt);
  color: var(--text);
  resize: none;
  max-height: 100px;
  font-family: inherit;
  line-height: 1.4;
}
.chat-input:focus { outline: none; border-color: var(--accent); background: var(--card); }
.chat-send {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: var(--accent);
  border: none; color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.chat-send:hover { background: var(--accent-dark); }
.chat-send:disabled { opacity: .35; cursor: default; }
.chat-empty {
  text-align: center; padding: 36px 20px;
  color: var(--text-muted); font-size: .84rem;
}

/* ─── PARTAGE BADGE ──────────────────────────────────────────── */
#partage-id-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #F97316;
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ─── ADMIN SOUS-ONGLETS ─────────────────────────────────────── */
.adm-sub-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card);
  border-bottom: 1px solid var(--border-solid);
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.adm-sub-nav::-webkit-scrollbar { display: none; }
.adm-sub-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-solid);
  background: transparent;
  color: var(--text-muted);
  font-size: .74rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.adm-sub-btn.active {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}
.adm-sub-badge {
  background: #EF4444;
  color: #fff;
  border-radius: 4px;
  font-size: .58rem;
  font-weight: 700;
  padding: 1px 4px;
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE
   ════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #191919;
    --bg-alt:       #222222;
    --card:         #262626;
    --text:         #EFEFEF;
    --text-muted:   #9B9A97;
    --text-light:   #6B6860;
    --border:       rgba(255,255,255,0.07);
    --border-solid: #2F2F2F;
    --accent-light: #3A2010;
    --accent-glow:  rgba(249,115,22,0.20);
    --shadow-sm:    0 1px 2px rgba(0,0,0,0.40);
    --shadow:       0 1px 4px rgba(0,0,0,0.50);
    --shadow-lg:    0 4px 16px rgba(0,0,0,0.55);
    --shadow-xl:    0 8px 24px rgba(0,0,0,0.60);
  }

  .home-hero-grad {
    background: linear-gradient(to bottom, rgba(25,25,25,0.10) 0%, rgba(25,25,25,0.35) 60%, rgba(25,25,25,0.60) 100%);
  }
  #screen-home .main-content { background: var(--bg); }

  .badge-upcoming { background: #1A2540; color: #93BFFF; }
  .badge-ongoing  { background: #0D2B1A; color: #6EE7A0; }
  .badge-past     { background: #333; color: var(--text-muted); }
  .badge-done     { background: #3A1800; color: #FB923C; }

  .icon-transport, .icon-hebergement, .icon-vehicule,
  .icon-activite,  .icon-restaurant {
    background: linear-gradient(145deg, #D97706 0%, #C2620A 100%);
  }

  .btn-mini-view { background: #1A2540; color: #93BFFF; border-color: #1A2A50; }
  .btn-mini-edit { background: #3A2010; color: #F0956A; border-color: #4A2C16; }
  .btn-mini-del  { background: #3A0A0A; color: #FCA5A5; border-color: #4A1010; }

  .stat-pill--ongoing  { background: rgba(16,185,129,0.18); border-color: rgba(16,185,129,0.32); color: #6EE7B7; }
  .stat-pill--upcoming { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.32); color: #A5B4FC; }
  .stat-pill--total    { background: rgba(249,115,22,0.16); border-color: rgba(249,115,22,0.30); color: #FDBA74; }

  input[type="text"], input[type="date"], input[type="time"],
  input[type="url"], input[type="number"], input[type="password"],
  textarea, select {
    background: var(--bg);
    color: var(--text);
    border-color: var(--border-solid);
  }
  input:focus, textarea:focus, select:focus {
    background: var(--card);
  }

  .chip.active  { background: #EFEFEF; border-color: #EFEFEF; color: #191919; }
  .type-opt.active { background: #EFEFEF; border-color: #EFEFEF; color: #191919; }

  .toast { background: #EFEFEF; color: #191919; }

  .dash-hero-upcoming { background: #1C1917; }
  .dash-hero-ongoing  { background: #064E3B; }
  .dash-hero-past     { background: #292524; }
  .dash-stat-card     { background: var(--card); }
  .dash-next-card     { background: var(--card); }
  .dash-weather-card  { background: var(--card); }
  .dash-forecast-day  { background: var(--bg); }
  .dash-notes         { background: var(--card); }

  .prog-card        { background: var(--card); }
  .prog-day-header  { background: var(--bg); }
  .prog-badge-resa  { background: #1A2540; color: #93BFFF; }
  .prog-badge-agenda{ background: #0D2B1A; color: #6EE7A0; }

  .adm-section-head { background: var(--bg); }
  .adm-row-cat      { background: var(--bg); }
  .adm-btn-link     { background: var(--bg) !important; }

  .budget-total-bar { background: #333; }

  .bagage-item.checked { background: #0D2B1A; border-color: #1A4A2A; }

  .doc-viewer-close { background: #444; }
  .doc-viewer-close:hover { background: var(--danger); }

  .voyage-grid { background: var(--bg); }
  .voyage-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(249,115,22,0.15); }
}

/* ─── CLÔTURE TRIP ────────────────────────────────────────────── */
.cloture-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-solid);
  border-top: 1px solid var(--border-solid);
  border-bottom: 1px solid var(--border-solid);
  margin-bottom: 0;
}
.cloture-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 16px 8px;
  background: var(--card);
}
.cloture-stat-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1;
}
.cloture-stat-lbl {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}
.cloture-header-trip {
  padding: 14px 16px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}
.cloture-archived-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-dark);
  margin-bottom: 0;
}

/* ─── ADMIN CLÔTURE FOOTER ───────────────────────────────────── */
.adm-cloture-footer {
  margin: 16px 16px 0;
  border-radius: var(--radius-xl);
  background: var(--accent-light);
  border: 1px solid rgba(249,115,22,0.20);
  overflow: hidden;
}
.adm-cloture-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.adm-cloture-icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-dark);
}
.adm-cloture-text { flex: 1; min-width: 0; }
.adm-cloture-titre {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-dark);
  line-height: 1.2;
}
.adm-cloture-desc {
  font-size: 0.72rem;
  color: var(--accent);
  margin-top: 2px;
  opacity: 0.85;
}
.adm-cloture-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: 'Satoshi', var(--font-body);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.adm-cloture-btn svg { width: 14px; height: 14px; }
.adm-cloture-btn:hover { background: var(--accent-dark); }

@media (prefers-color-scheme: dark) {
  .adm-cloture-footer { background: #2A1400; border-color: rgba(249,115,22,0.25); }
  .sheet-action-btn:hover { background: #2A2520; }
  .sheet-cancel-btn { background: #2A2520; border-color: #3A3530; }
  .sheet-cancel-btn:hover { background: #3A3530; }
}

/* ════════════════════════════════════════════════════════════════
   WIZARD CRÉER UN TRIP
   ════════════════════════════════════════════════════════════════ */

#screen-create {
  background: #1C1917;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* ── PHASE 1 : Splash ─────────────────────────────────────────── */
.create-splash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 10;
  background: #1C1917;
  transition: opacity 0.48s ease, transform 0.48s ease;
}
.create-splash.splash-out {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}
.create-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: splashEnter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes splashEnter {
  from { opacity: 0; transform: scale(0.7) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.create-splash-logo {
  position: relative;
}
.create-splash-img {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(249,115,22,0.45), 0 0 80px rgba(249,115,22,0.20);
  animation: splashPulse 1.8s ease-in-out infinite;
}
@keyframes splashPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(249,115,22,0.45), 0 0 80px rgba(249,115,22,0.20); }
  50%       { box-shadow: 0 0 60px rgba(249,115,22,0.65), 0 0 120px rgba(249,115,22,0.30); }
}
.create-splash-wordmark {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  animation: splashEnter 0.7s 0.15s cubic-bezier(0.34,1.56,0.64,1) both;
}
.cs-crew { color: #FFFFFF; }
.cs-go   { color: #F97316; font-style: italic; }
.create-splash-tagline {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.02em;
  animation: splashEnter 0.7s 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ── PHASE 2 : Wizard ──────────────────────────────────────────── */
.create-wizard {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  padding-top: env(safe-area-inset-top);
}
.create-wizard.wizard-in {
  animation: wizardSlideIn 0.4s cubic-bezier(0.4,0,0.2,1) both;
}
.create-wizard.wizard-out {
  animation: wizardSlideOut 0.3s ease forwards;
}
@keyframes wizardSlideIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wizardSlideOut {
  to { opacity: 0; transform: scale(0.97); }
}

/* Barre de progression */
.create-progress-track {
  height: 3px;
  background: var(--border-solid);
  flex-shrink: 0;
}
.create-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #F97316, #FBBF24);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* Nav haut */
.create-topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  flex-shrink: 0;
}
.create-back-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: var(--bg-alt);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s;
}
.create-back-btn:hover { background: var(--border-solid); }
.create-back-btn svg { width: 18px; height: 18px; }
.create-step-counter {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.create-skip-btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-muted);
  font-family: 'Satoshi', var(--font-body);
  padding: 6px 0;
  transition: color 0.15s;
}
.create-skip-btn:hover { color: var(--accent); }

/* Conteneur des steps */
.create-steps-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.create-step {
  position: absolute;
  inset: 0;
  padding: 24px 28px 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.36s cubic-bezier(0.4,0,0.2,1),
              opacity   0.36s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}
.create-step.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) !important;
}

/* Contenu des steps */
.create-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.create-title {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 28px;
}
.create-title em {
  font-style: italic;
  color: var(--accent);
}
.create-big-input {
  width: 100%;
  font-size: 1.15rem;
  font-weight: 600;
  font-family: 'Satoshi', var(--font-body);
  padding: 16px 18px;
  border: 2px solid var(--border-solid);
  border-radius: var(--radius-xl);
  background: var(--bg-alt);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 16px;
}
.create-big-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
  background: var(--bg);
}
.create-big-input::placeholder { color: var(--text-light); font-weight: 500; }

/* Chips destination */
.create-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.create-chip {
  padding: 8px 14px;
  border: 1.5px solid var(--border-solid);
  border-radius: 20px;
  background: var(--bg);
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Satoshi', var(--font-body);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.create-chip:hover  { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.create-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

/* Hint / suggestion */
.create-hint {
  font-size: 0.80rem;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 16px;
  min-height: 20px;
  transition: opacity 0.2s;
}

/* Color picker step 2 */
.create-color-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.create-color-opt {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  outline: none;
}
.create-color-opt:hover  { transform: scale(1.15); }
.create-color-opt.active { border-color: var(--text); transform: scale(1.15); }

/* Dates step 3 */
.create-dates-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.create-date-card {
  flex: 1;
  background: var(--bg-alt);
  border: 2px solid var(--border-solid);
  border-radius: var(--radius-xl);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s;
  position: relative;
}
.create-date-card:hover { border-color: var(--accent); }
.create-date-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.create-date-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border: none;
  background: transparent;
  /* Évite que le label/val en dessous reçoive les clics avant l'input */
  z-index: 2;
}
/* Les enfants textuels de la card sont sous l'input, pas interactifs */
.create-date-card .create-date-label,
.create-date-card .create-date-val {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.create-date-val {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.create-date-sep {
  color: var(--text-muted);
  flex-shrink: 0;
}
.create-date-sep svg { width: 20px; height: 20px; }
.create-duree-badge {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent-dark);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  animation: fadeInUp 0.25s ease both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Participants step 4 */
.create-p-add-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.create-participant-input {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Satoshi', var(--font-body);
  padding: 14px 16px;
  border: 2px solid var(--border-solid);
  border-radius: var(--radius-xl);
  background: var(--bg-alt);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.create-participant-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
  background: var(--bg);
}
.create-participant-input::placeholder { color: var(--text-light); font-weight: 500; }
.create-p-add-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.1s;
}
.create-p-add-btn:hover  { background: var(--accent-dark); }
.create-p-add-btn:active { transform: scale(0.93); }
.create-p-add-btn svg { width: 20px; height: 20px; stroke: white; }
.create-p-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.create-p-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  animation: fadeInUp 0.2s ease both;
}
.create-p-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem; font-weight: 800; color: white;
  flex-shrink: 0;
}
.create-p-nom {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}
.create-p-del {
  width: 28px; height: 28px;
  border: none; background: transparent; cursor: pointer;
  color: var(--text-muted);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.create-p-del:hover { background: #FEF2F2; color: var(--danger); }
.create-p-del svg { width: 14px; height: 14px; }

/* CTA footer */
.create-footer {
  padding: 16px 24px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.create-cta-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px;
  background: var(--accent);
  color: white;
  border: none; border-radius: var(--radius-xl);
  font-size: 1rem; font-weight: 800;
  font-family: 'Satoshi', var(--font-body);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, opacity 0.2s;
}
.create-cta-btn svg { width: 20px; height: 20px; }
.create-cta-btn:not(:disabled):hover  { background: var(--accent-dark); }
.create-cta-btn:not(:disabled):active { transform: scale(0.98); }

/* ── PHASE 3 : Confirmation ───────────────────────────────────── */
.create-confirm {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--bg);
  animation: fadeInUp 0.4s ease both;
}
.create-confirm-check {
  width: 80px; height: 80px;
  animation: confirmPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.create-confirm-check svg { width: 80px; height: 80px; }
@keyframes confirmPop {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
.create-confirm-title {
  font-size: 1.8rem; font-weight: 800;
  color: var(--text); letter-spacing: -0.03em;
  animation: fadeInUp 0.4s 0.1s ease both;
}
.create-confirm-sub {
  font-size: 0.88rem; color: var(--text-muted); font-weight: 500;
  text-align: center; max-width: 260px;
  animation: fadeInUp 0.4s 0.2s ease both;
}

/* Step 1 — deux inputs destination */
.create-dest-fields { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.create-dest-field { display: flex; flex-direction: column; gap: 6px; }
.create-dest-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.create-dest-field .create-big-input { margin-bottom: 0; }

/* Step 2 — grille types */
.create-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.create-type-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border: 1.5px solid var(--border-solid); border-radius: 12px;
  background: var(--bg); cursor: pointer; transition: all 0.15s;
  font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
  font-family: 'Satoshi', var(--font-body);
}
.create-type-card .type-emoji { font-size: 1.6rem; line-height: 1; }
.create-type-card:hover { border-color: var(--accent); color: var(--text); }
.create-type-card.active {
  border-color: var(--accent); background: var(--accent-light);
  color: var(--accent);
}

/* Step 3 — suggestions */
.create-suggestions-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 20px 0 10px; }
.create-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.create-suggestion-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--accent-glow); border: 1px solid rgba(249,115,22,0.25);
  color: var(--accent); font-size: 0.82rem; font-weight: 600;
  font-family: 'Satoshi', var(--font-body);
  cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.create-suggestion-pill:hover { background: rgba(249,115,22,0.18); transform: translateY(-1px); }
.create-suggestion-pill::before { content: '✨'; font-size: 0.75rem; }

/* Step 5 — organisateur */
.create-orga-block {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1.5px solid var(--accent); border-radius: 12px;
  background: var(--accent-light); margin-bottom: 24px;
}
.create-orga-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--accent);
  color: #fff; font-size: 1.1rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.create-orga-info { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.create-orga-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.create-orga-info input {
  background: transparent; border: none; padding: 0;
  font-size: 1rem; font-weight: 700; color: var(--text); outline: none;
  font-family: 'Satoshi', var(--font-body);
}
.create-crew-sep { display: flex; align-items: center; gap: 10px; margin: 8px 0 16px; }
.create-crew-sep::before, .create-crew-sep::after { content: ''; flex: 1; height: 1px; background: var(--border-solid); }
.create-crew-sep span { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }

/* ── Dark mode ────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .create-wizard { background: #1A1917; }
  .create-big-input { background: #2A2520; border-color: #3A3530; color: #F5F5F4; }
  .create-big-input:focus { background: #2A2520; }
  .create-participant-input { background: #2A2520; border-color: #3A3530; color: #F5F5F4; }
  .create-type-card { background: #2A2520; border-color: #3A3530; color: rgba(245,245,244,0.5); }
  .create-type-card.active { background: rgba(249,115,22,0.15); }
  .create-date-card { background: #2A2520; border-color: #3A3530; }
  .create-p-item { background: #2A2520; }
  .create-footer { background: #1A1917; border-color: #3A3530; }
  .create-confirm { background: #1A1917; }
  .create-back-btn { background: #2A2520; }
  .create-orga-block { background: rgba(249,115,22,0.10); }
  .create-orga-info input { color: #F5F5F4; }
}

/* ═══ APP STARTUP SPLASH ════════════════════════════════════════
   Séquence cinématique — 6 secondes :
   0.00s  Noir absolu
   0.10s  Logo surgit du noir, éclairé par l'arrière (halo orange)
   1.50s  Allumage : spark → montée → flash d'ignition → settle
   2.30s  Logo pleinement orange, stable
   2.55s  « Crew » monte
   2.78s  « Go » suit (cascade)
   3.15s  Tagline se dissout
   3.50s  Respiration légère (halo + logo)
   5.30s  Fondu sortie → dissolve linéaire
   ═══════════════════════════════════════════════════════════════ */

/* ─── APP STARTUP SPLASH — CINÉMATIQUE ─── */

/* Barres letterbox cinema */
#app-splash::before,
#app-splash::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 13vh;
  background: #000;
  z-index: 2;
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}
#app-splash::before { top: 0; }
#app-splash::after  { bottom: 0; }
#app-splash.bars-out::before { transform: translateY(-100%); }
#app-splash.bars-out::after  { transform: translateY(100%); }

#app-splash {
  position: fixed; inset: 0; z-index: 9999;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity 0.6s ease;
}
#app-splash.app-splash-out {
  opacity: 0;
  pointer-events: none;
}

/* Halo de chaleur orange au centre */
.intro-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 45% at 50% 50%, rgba(249,115,22,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* Ligne de lumière horizontale */
.intro-line {
  position: absolute;
  top: calc(50% - 0.5px);
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(249,115,22,0.5) 25%,
    rgba(255,255,255,0.9) 50%,
    rgba(249,115,22,0.5) 75%,
    transparent 100%);
  transform-origin: left center;
  pointer-events: none;
}

.intro-content {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 28px;
  position: relative; z-index: 3;
}

.intro-logo-wrap { position: relative; }

/* Flash ring à l'impact */
.intro-logo-wrap::after {
  content: '';
  position: absolute;
  inset: -24px;
  border-radius: 32px;
  background: radial-gradient(circle, rgba(249,115,22,0.55) 0%, transparent 65%);
  opacity: 0;
  pointer-events: none;
}

.intro-logo-img {
  width: 108px; height: 108px;
  border-radius: 26px;
  display: block;
  position: relative; z-index: 1;
  box-shadow:
    0 0 40px 10px rgba(249,115,22,0.4),
    0 0 90px 28px rgba(249,115,22,0.15),
    0 32px 64px rgba(0,0,0,0.7);
}

.intro-wordmark {
  font-family: var(--font-display);
  font-size: 3.2rem; line-height: 1;
}
.intro-crewi { color: #fff;    font-weight: 800; }
.intro-go    { color: #F97316; font-weight: 900; font-style: italic; }

.intro-tagline {
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}

/* ── Keyframes ── */
@keyframes cineLineSweep {
  0%   { transform: scaleX(0); opacity: 0; }
  8%   { opacity: 1; }
  55%  { transform: scaleX(1); opacity: 0.7; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes cineLogoIn {
  0%   { transform: scale(0.04); opacity: 0; filter: blur(20px); }
  55%  { transform: scale(1.1);  opacity: 1; filter: blur(0); }
  78%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
@keyframes cineFlashRing {
  0%   { opacity: 0; transform: scale(0.6); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.4); }
}
@keyframes cineGlowPulse {
  0%, 100% {
    box-shadow: 0 0 40px 10px rgba(249,115,22,0.4), 0 0 90px 28px rgba(249,115,22,0.15), 0 32px 64px rgba(0,0,0,0.7);
  }
  50% {
    box-shadow: 0 0 64px 20px rgba(249,115,22,0.6), 0 0 130px 48px rgba(249,115,22,0.25), 0 32px 64px rgba(0,0,0,0.7);
  }
}
@keyframes cineWordmark {
  0%   { opacity: 0; letter-spacing: 0.5em;  filter: blur(8px); }
  100% { opacity: 1; letter-spacing: -0.04em; filter: blur(0); }
}
@keyframes cineTagline {
  0%   { opacity: 0; letter-spacing: 0.55em; filter: blur(4px); }
  100% { opacity: 0.38; letter-spacing: 0.28em; filter: blur(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .intro-line {
    animation: cineLineSweep 1.1s ease-out 0.05s both;
  }
  .intro-logo-img {
    animation:
      cineLogoIn    1s  cubic-bezier(0.34,1.56,0.64,1) 0.25s both,
      cineGlowPulse 3s  ease-in-out                     1.6s  infinite;
  }
  .intro-logo-wrap::after {
    animation: cineFlashRing 0.85s ease-out 0.8s both;
  }
  .intro-wordmark {
    animation: cineWordmark 0.8s cubic-bezier(0.22,1,0.36,1) 1.15s both;
  }
  .intro-tagline {
    animation: cineTagline 0.7s ease-out 1.75s both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-line { display: none; }
  .intro-logo-img, .intro-wordmark, .intro-tagline {
    animation: none; opacity: 1; transform: none; filter: none;
  }
  .intro-logo-wrap::after { display: none; }
  .intro-tagline { opacity: 0.38; }
  .intro-wordmark { letter-spacing: -0.04em; }
}