/* =================================================================
   WatiTaxi — Premium UI Refresh v1
   Complète styles.css (v2 WhatsApp/Uber déjà actif sur Home)
   Ce fichier améliore : Planning · Profil · Détail course ·
   Formulaire création · Modales · Toasts · Chat · Répertoire
   Aucun JS modifié — pure CSS override
   ================================================================= */

/* ──────────────────────────────────────────────────────────────────
   A. TOKENS GLOBAUX — affinés
   ────────────────────────────────────────────────────────────────── */
:root {
  /* Vert WatiTaxi — identique à la splash screen */
  --green:       #00A86B;
  --green-2:     #00C882;
  --green-dark:  #007A4D;
  --green-soft:  #E6F7F1;
  --green-mid:   #B3E8D5;

  /* Fond & surfaces */
  --bg:      #F0F2F5;
  --surface: #FFFFFF;
  --line:    #EBEBEB;
  --muted:   #6B7280;
  --black:   #111827;

  /* Shadows — 3 niveaux */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.04);
  --shadow:     0 2px 8px rgba(0,0,0,0.07), 0 4px 20px rgba(0,0,0,0.05);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.13), 0 4px 16px rgba(0,0,0,0.06);

  /* Gradients */
  --g-green:     linear-gradient(135deg, #00C882 0%, #00A86B 100%);
  --g-green-hdr: linear-gradient(160deg, #00A86B 0%, #007A4D 100%);

  /* Radius */
  --radius-xs:   6px;
  --radius-sm:   12px;
  --radius:      16px;
  --radius-lg:   22px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* Timing */
  --t-fast: 0.14s cubic-bezier(0.4,0,0.2,1);
  --t-med:  0.24s cubic-bezier(0.4,0,0.2,1);
}

/* ──────────────────────────────────────────────────────────────────
   B. BOUTONS GÉNÉRAUX — gradient + ombre + pression
   ────────────────────────────────────────────────────────────────── */
.btn {
  font-weight: 700;
  letter-spacing: -0.1px;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), opacity var(--t-fast);
  border-radius: var(--radius-sm);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--g-green) !important;
  box-shadow: 0 3px 16px rgba(0,168,107,0.35), 0 1px 4px rgba(0,168,107,0.20) !important;
  color: #fff !important;
}
.btn-primary:hover  { background: var(--green-dark) !important; }
.btn-primary:active { box-shadow: 0 1px 6px rgba(0,168,107,0.22) !important; }

.btn-ghost {
  background: var(--surface) !important;
  border: 1.5px solid var(--line) !important;
  color: var(--black) !important;
  box-shadow: var(--shadow-xs) !important;
}
.btn-ghost:hover { background: #F9FAFB !important; }

.btn-danger {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  box-shadow: 0 3px 12px rgba(220,38,38,0.28) !important;
}

/* Bouton bloc */
.btn-block { border-radius: var(--radius-sm); }

/* ──────────────────────────────────────────────────────────────────
   C. TOPBAR GENERIQUE (hors topbar-home qui est déjà vert foncé)
   ────────────────────────────────────────────────────────────────── */
.topbar:not(.topbar-home) {
  background: #00A86B;
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.topbar-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: #fff;
}

.icon-btn {
  border-radius: 12px;
  transition: background var(--t-fast), transform var(--t-fast);
}
.icon-btn:active { transform: scale(0.92); background: rgba(0,0,0,0.07) !important; }

/* ──────────────────────────────────────────────────────────────────
   D. PLANNING — header + cartes + datebar
   ────────────────────────────────────────────────────────────────── */

/* Header vert solide — même couleur que les autres pages (Profil, Messages) */
.planning-header {
  background: #00A86B !important;
  box-shadow: 0 3px 16px rgba(0,168,107,0.35) !important;
  /* Safe-area iOS comme le header Profil (.topbar) : le vert monte à y=0,
     le contenu (titre + boutons) reste sous l'heure. Test isolé Planning. */
  padding: max(14px, env(safe-area-inset-top, 14px)) 16px 18px !important;
}
/* Même typo que les autres headers (.topbar-title : 16px / 700 / -0.2px) */
.planning-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}

/* Cartes planning — élévation + border gauche */
.planning-card {
  background: var(--surface) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.05) !important;
  border: none !important;
  border-left: 4px solid var(--green) !important;
  padding: 14px 14px 14px 14px !important;
  transition: transform var(--t-fast), box-shadow var(--t-fast) !important;
  cursor: pointer !important;
}
.planning-card:active {
  transform: scale(0.99) !important;
  box-shadow: var(--shadow-xs) !important;
}
.planning-card.card-driver {
  background: #F5F9FF !important;
  border-left-color: #3B82F6 !important;
}
.planning-card.cancelled { opacity: 0.45 !important; }

/* Heure grande */
.pl-time {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}

/* Nom client */
.pl-client {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.1px !important;
}

/* Statut pill */
.pl-status {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

/* Bouton dispatcher */
.pl-dispatch-btn {
  background: linear-gradient(135deg, #EF4444, #DC2626) !important;
  box-shadow: 0 2px 8px rgba(220,38,38,0.25) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
}

/* Barre de date */
.planning-datebar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 10px 16px !important;
}
.datebar-label {
  background: #F3F4F6 !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
}
.datebar-arrow {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: var(--surface) !important;
  border: 1.5px solid var(--line) !important;
  box-shadow: var(--shadow-xs) !important;
  font-size: 18px !important;
}
.stat-pill {
  background: var(--black) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Swipe delete — style rouge uniquement dans le contexte swipe */
.pl-swipe-wrap { border-radius: 16px !important; }
.pl-swipe-wrap .pl-delete-btn {
  background: linear-gradient(135deg, #EF4444, #DC2626) !important;
  border-radius: 0 16px 16px 0 !important;
  color: #fff !important;
}

/* Bouton poubelle INLINE dans les cartes planning (pl-right-done) */
.pl-right-done .pl-delete-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
  background: #FEF2F2 !important;
  border: 1.5px solid #FECACA !important;
  border-radius: 8px !important;
  color: #EF4444 !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s !important;
}
.pl-right-done .pl-delete-btn:hover {
  background: #FEE2E2 !important;
  border-color: #EF4444 !important;
}
.pl-right-done .pl-delete-btn svg {
  stroke: #EF4444 !important;
  flex-shrink: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────
   E. COURSE DETAIL — header + sections
   ────────────────────────────────────────────────────────────────── */

/* Header vert foncé */
.cd-header {
  background: var(--g-green-hdr) !important;
  min-height: 60px !important;
  box-shadow: 0 2px 16px rgba(0,168,107,0.30) !important;
}
.cd-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}

/* Sections blanches élevées */
.cd-section {
  background: var(--surface) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04) !important;
  border: none !important;
}
.cd-section-title {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #9CA3AF !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
}

/* Client name grande */
.cd-client-name {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
}
.cd-client-phone {
  font-size: 14px !important;
  color: var(--muted) !important;
}

/* Gros bouton Accepter (pool) */
.cd-btn-accept {
  background: var(--g-green) !important;
  border-radius: 16px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  box-shadow: 0 6px 24px rgba(0,168,107,0.40), 0 2px 8px rgba(0,168,107,0.20) !important;
  transition: all var(--t-fast) !important;
}
.cd-btn-accept:active {
  transform: scale(0.98) !important;
  box-shadow: 0 2px 12px rgba(0,168,107,0.25) !important;
}

/* Barre d'actions CEC */
.cd-bar-btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  transition: all var(--t-fast) !important;
}
.cd-bar-start {
  background: linear-gradient(135deg,#FB923C,#EA580C) !important;
  box-shadow: 0 3px 12px rgba(234,88,12,0.30) !important;
}
.cd-bar-onboard {
  background: linear-gradient(135deg,#60A5FA,#2563EB) !important;
  box-shadow: 0 3px 12px rgba(37,99,235,0.30) !important;
}
.cd-bar-complete {
  background: var(--g-green) !important;
  box-shadow: 0 3px 12px rgba(0,168,107,0.35) !important;
}
.cd-bar-dispatch {
  background: linear-gradient(135deg,#EF4444,#DC2626) !important;
  box-shadow: 0 3px 12px rgba(220,38,38,0.30) !important;
}

/* Sticky CTA */
.cd-sticky-cta {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.10) !important;
  padding: 12px 20px calc(env(safe-area-inset-bottom,0px) + 16px) !important;
}

/* Status pill CD */
.cd-status-badge {
  border-radius: 999px !important;
  padding: 4px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Messages btn */
.cd-messages-btn {
  border: 1.5px solid var(--line) !important;
  border-radius: 16px !important;
  font-weight: 600 !important;
}
.cd-messages-btn:hover {
  border-color: var(--green) !important;
  color: var(--green) !important;
  background: var(--green-soft) !important;
}

/* Notation étoiles */
.cd-star { transition: color 0.1s !important; }
.cd-star.active { color: #F59E0B !important; }

/* Supprimer course — bouton danger */
.cd-btn-delete {
  border: 1.5px solid #FECACA !important;
  color: #EF4444 !important;
  background: #FFF5F5 !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}

/* Reprendre course — bouton orange avertissement */
.cd-btn-reassign {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: center !important;
  border: 1.5px solid #FED7AA !important;
  color: #EA580C !important;
  background: #FFF7ED !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.cd-btn-reassign:active { background: #FFEDD5 !important; }

/* Dupliquer course — bouton bleu neutre */
.cd-btn-duplicate {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: center !important;
  border: 1.5px solid #BFDBFE !important;
  color: #2563EB !important;
  background: #EFF6FF !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background 0.15s, border-color 0.15s !important;
}
.cd-btn-duplicate:active { background: #DBEAFE !important; }

/* ──────────────────────────────────────────────────────────────────
   F. PROFIL — hero card + sections + actions
   ────────────────────────────────────────────────────────────────── */

/* Hero card dégradé premium */
.prof-hero-card {
  background: var(--g-green-hdr) !important;
  border-radius: 22px !important;
  box-shadow: 0 6px 24px rgba(0,168,107,0.35), 0 2px 8px rgba(0,168,107,0.15) !important;
  padding: 28px 20px 24px !important;
}
.prof-hero-avatar {
  border: 3px solid rgba(255,255,255,0.55) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.20) !important;
  width: 82px !important;
  height: 82px !important;
  font-size: 36px !important;
}
.prof-hero-name {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
}
.prof-kpi-val { font-size: 24px !important; font-weight: 900 !important; }

/* Sections profil */
.prof-section {
  background: var(--surface) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
}
.prof-section-head h3 {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #9CA3AF !important;
}

/* Actions profil */
.prof-actions-list {
  border-radius: 16px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  overflow: hidden !important;
}
.prof-action-item {
  font-size: 15px !important;
  font-weight: 500 !important;
  padding: 17px 18px !important;
  gap: 14px !important;
  transition: background var(--t-fast) !important;
  border-bottom: 1px solid #F3F4F6 !important;
}
.prof-action-item:last-child { border-bottom: none !important; }
.prof-action-item:active { background: var(--bg) !important; }

/* KPI Grid */
.prof-kpi-card {
  border-radius: 12px !important;
  padding: 14px !important;
}
.prof-kpi-num {
  font-size: 22px !important;
  font-weight: 800 !important;
}

/* ──────────────────────────────────────────────────────────────────
   G. FORMULAIRE CRÉATION COURSE (cr2-*)
   ────────────────────────────────────────────────────────────────── */
.cr2-screen { background: #F0FDF4 !important; }
.cr2-body   { background: #F0FDF4 !important; }

.cr2-header {
  /* Header VERT comme les autres pages (topbar). Le blanc translucide rendait
     le titre + la flèche (blancs) invisibles. */
  background: #00A86B !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.cr2-header-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}

.cr2-card {
  background: var(--surface) !important;
  border-radius: 18px !important;
  padding: 20px 18px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04) !important;
  border: none !important;
}
.cr2-card-title {
  font-size: 11px !important;            /* P3 : +1px lisibilité */
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  color: #6B7280 !important;             /* P3 : gray-500, contraste 4.6:1 (était #9CA3AF ~2.5:1) */
  margin-bottom: 16px !important;
}

.cr2-input {
  background: #FFFFFF !important;        /* P1 : fond blanc — champ visible (était #F5F5F6) */
  border: 1.5px solid #E5E7EB !important;/* P1 : bordure nette (était var(--line) #EBEBEB, invisible) */
  border-radius: 12px !important;
  padding: 13px 14px !important;
  font-size: 16px !important;            /* P2 : 16px → pas de zoom auto iOS au focus */
  color: var(--black) !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast) !important;
}
.cr2-input:focus {
  border-color: var(--green) !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 3px rgba(0,168,107,0.10) !important;
  outline: none !important;
}

/* Segmented control (Immédiat / Réservation) */
.cr2-seg-btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  padding: 9px 12px !important;
  transition: all var(--t-fast) !important;
}
.cr2-seg-btn.active {
  background: var(--g-green) !important;
  color: #fff !important;
  border-color: var(--green) !important;
  box-shadow: 0 2px 8px rgba(0,168,107,0.25) !important;
}

/* Payment chips */
.cd-payment-chip {
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all var(--t-fast) !important;
}
.cd-payment-chip.active {
  background: var(--green-soft) !important;
  color: var(--green-dark) !important;
  border-color: var(--green) !important;
  box-shadow: 0 1px 6px rgba(0,168,107,0.20) !important;
}

/* Timing toggle */
.cr2-timing-btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: all var(--t-fast) !important;
}
.cr2-timing-btn.cr2-timing-active {
  background: var(--green-soft) !important;
  border-color: var(--green) !important;
  color: var(--green-dark) !important;
  box-shadow: 0 1px 6px rgba(0,168,107,0.20) !important;
}

/* Badge confidentiel */
.cr2-private-badge {
  background: var(--green-soft) !important;
  border-color: var(--green-mid) !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--green-dark) !important;
}

/* Les boutons font partie du formulaire et apparaissent À LA FIN (pas de barre flottante) */
.cr2-submit-area {
  position: static !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* A11y (High) : anneau de focus clavier sur les boutons du formulaire (absent jusqu'ici) */
.cr2-seg-btn:focus-visible,
.cr2-chip:focus-visible,
.cr2-step-btn:focus-visible,
.cr2-timing-btn:focus-visible,
.cr2-wait-chip:focus-visible,
.cr2-submit-btn:focus-visible {
  outline: 2px solid var(--green) !important;
  outline-offset: 2px !important;
}

/* ──────────────────────────────────────────────────────────────────
   H. CHAMPS FORMULAIRES GÉNÉRAUX
   ────────────────────────────────────────────────────────────────── */
.field input,
.field select,
.field textarea {
  background: #FFFFFF;            /* champ visible (était #F5F5F6, quasi invisible) */
  border: 1.5px solid #E5E7EB;
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 16px;               /* anti-zoom iOS au focus (était 15px) */
  color: var(--black);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(0,168,107,0.10);
}

.field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.field-check {
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: #F9FAFB;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.field-check:hover { background: var(--green-soft); border-color: var(--green); }

/* ──────────────────────────────────────────────────────────────────
   I. MODALES — bottom sheet premium
   ────────────────────────────────────────────────────────────────── */
.modal-overlay {
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.modal {
  background: var(--surface) !important;
  border-top-left-radius: 26px !important;
  border-top-right-radius: 26px !important;
  box-shadow: var(--shadow-xl) !important;
}
.modal-header {
  padding: 18px 20px 14px !important;
}
.modal-header h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
}
.modal-body { padding: 18px 20px !important; }
.modal-actions { padding: 14px 20px 20px !important; gap: 10px !important; }

/* Poignée handle sur les bottom sheets */
.dispatch-sheet-handle,
.accept-sheet-handle,
.cal-handle,
.rep-sheet-handle {
  width: 36px !important;
  height: 4px !important;
  background: #D1D5DB !important;
  border-radius: 2px !important;
  margin: 10px auto 16px !important;
}

/* Bottom sheet accept */
.accept-sheet {
  border-radius: 26px 26px 0 0 !important;
  box-shadow: var(--shadow-xl) !important;
}
.accept-btn-confirm {
  border-radius: 12px !important;
  background: var(--g-green) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(0,168,107,0.30) !important;
}
.accept-sheet-card {
  border-radius: 14px !important;
  border: 1.5px solid var(--line) !important;
  background: #F9FAFB !important;
}

/* Dispatch popover */
.dispatch-popover {
  border-radius: 26px 26px 0 0 !important;
  box-shadow: var(--shadow-xl) !important;
}
.dispatch-chip {
  border-radius: 12px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  padding: 16px 8px !important;
  transition: all var(--t-fast) !important;
}
.dispatch-chip:active { transform: scale(0.94) !important; }
.dispatch-chip.selected {
  background: var(--green) !important;
  color: #fff !important;
  border-color: var(--green) !important;
  box-shadow: 0 3px 10px rgba(0,168,107,0.30) !important;
}

/* Calendrier */
.calendar-picker {
  border-radius: 26px 26px 0 0 !important;
  box-shadow: var(--shadow-xl) !important;
}
.cal-selected {
  background: var(--green) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(0,168,107,0.30) !important;
}
.cal-go-today {
  border-radius: 12px !important;
  font-weight: 700 !important;
  background: var(--green-soft) !important;
  color: var(--green) !important;
}

/* ──────────────────────────────────────────────────────────────────
   J. TOAST — feedback utilisateur
   ────────────────────────────────────────────────────────────────── */
.toast {
  background: #1F2937 !important;
  color: #fff !important;
  padding: 13px 18px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10) !important;
  max-width: calc(100vw - 40px) !important;
}
.toast.success {
  background: var(--green) !important;
  box-shadow: 0 6px 24px rgba(0,168,107,0.40) !important;
}
.toast.error {
  background: #DC2626 !important;
  box-shadow: 0 6px 24px rgba(220,38,38,0.35) !important;
}

/* ──────────────────────────────────────────────────────────────────
   K. CHAT — composer + bulles
   ────────────────────────────────────────────────────────────────── */
.chat-composer {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.06) !important;
  padding: 10px 14px !important;
  gap: 10px !important;
  align-items: center !important;
}
.chat-composer input {
  background: #F5F5F6 !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 999px !important;
  padding: 11px 16px !important;
  font-size: 15px !important;
  transition: border-color var(--t-fast) !important;
}
.chat-composer input:focus {
  border-color: var(--green) !important;
  background: var(--surface) !important;
  outline: none !important;
}
.chat-send {
  background: var(--g-green) !important;
  box-shadow: 0 3px 10px rgba(0,168,107,0.30) !important;
  transition: all var(--t-fast) !important;
}
.chat-send:active { transform: scale(0.92) !important; }

/* Bulles chat */
.bubble {
  border-radius: 16px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
.bubble-mine {
  background: #DCF8C6 !important;
  border-bottom-right-radius: 4px !important;
}
.bubble-other {
  background: var(--surface) !important;
  border-bottom-left-radius: 4px !important;
  box-shadow: var(--shadow-xs) !important;
}

/* ──────────────────────────────────────────────────────────────────
   L. RÉPERTOIRE — lignes + avatar
   ────────────────────────────────────────────────────────────────── */
.rep-row {
  background: var(--surface) !important;
  border-radius: 14px !important;
  padding: 13px 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  transition: all var(--t-fast) !important;
}
.rep-row:active { transform: scale(0.99) !important; }
.rep-row:hover { background: var(--green-soft) !important; }

.rep-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}
.rep-avatar-driver {
  border-radius: 14px !important;
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
}

.rep-call-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 13px !important;
  background: var(--green-soft) !important;
}

/* Fiche détail bottom sheet */
.rep-detail-sheet {
  border-radius: 26px 26px 0 0 !important;
}
.rep-detail-btn-back {
  border-radius: 14px !important;
  font-weight: 600 !important;
}
.rep-detail-btn-edit,
.rep-detail-btn-delete {
  border-radius: 12px !important;
  font-weight: 600 !important;
}

/* Onglets répertoire */
.rep-tabs-wrap {
  background: #ECEDF0 !important;
  border-radius: 14px !important;
  padding: 3px !important;
}
.rep-tab {
  border-radius: 12px !important;
  font-weight: 600 !important;
  transition: all var(--t-fast) !important;
}
.rep-tab.active {
  background: var(--surface) !important;
  color: var(--green-dark) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
}

/* Barre recherche répertoire */
.rep-search-wrap {
  border-radius: 12px !important;
  border: 1.5px solid var(--line) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 10px 14px !important;
}
.rep-search-wrap input {
  font-size: 15px !important;
}

/* ──────────────────────────────────────────────────────────────────
   M. MESSAGES — liste conversations
   ────────────────────────────────────────────────────────────────── */
.msg-conv-item {
  background: var(--surface) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.04) !important;
  margin-bottom: 8px !important;
  transition: all var(--t-fast) !important;
}
.msg-conv-item:active { transform: scale(0.99) !important; }

.msg-conv-avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
}

.msg-conv-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.1px !important;
}
.msg-conv-badge {
  border-radius: 6px !important;
  padding: 2px 8px !important;
}

/* ──────────────────────────────────────────────────────────────────
   N. DETAIL BLOCKS & SECTIONS
   ────────────────────────────────────────────────────────────────── */
.detail-block {
  background: var(--surface) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 2px 12px rgba(0,0,0,0.04) !important;
  border: none !important;
}
.detail-block h3 {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #9CA3AF !important;
  margin-bottom: 10px !important;
}

/* ──────────────────────────────────────────────────────────────────
   O. STATUS PILLS GÉNÉRAUX — couleurs raffinées
   ────────────────────────────────────────────────────────────────── */
.pill-DISPATCHED   { background: #DCFCE7 !important; color: #007A4D !important; border-radius: 999px !important; }
.pill-DISPATCHED.urgent { background: #FEE2E2 !important; color: #DC2626 !important; }
.pill-ACCEPTED     { background: #DBEAFE !important; color: #1D4ED8 !important; border-radius: 999px !important; }
.pill-IN_PROGRESS  { background: #EDE9FE !important; color: #6D28D9 !important; border-radius: 999px !important; }
.pill-CLIENT_ON_BOARD { background: #F0FDF4 !important; color: #007A4D !important; border-radius: 999px !important; }
.pill-COMPLETED    { background: #F3F4F6 !important; color: #6B7280 !important; border-radius: 999px !important; }
.pill-CANCELLED    { background: #FEF2F2 !important; color: #DC2626 !important; border-radius: 999px !important; text-decoration: line-through !important; }
.pill-DRAFT        { background: #F9FAFB !important; color: #9CA3AF !important; border-radius: 999px !important; }

/* ──────────────────────────────────────────────────────────────────
   P. PLANNING POOL (statuts planning)
   ────────────────────────────────────────────────────────────────── */
.pl-status.a-dispatcher { background: #FEE2E2 !important; color: #B91C1C !important; border-radius: 999px !important; }
.pl-status.dispatching  { background: #FEF3C7 !important; color: #B45309 !important; border-radius: 999px !important; }
.pl-status.acceptee     { background: #D1FAE5 !important; color: #065F46 !important; border-radius: 999px !important; }
.pl-status.en-route     { background: #D1FAE5 !important; color: #065F46 !important; border-radius: 999px !important; }
.pl-status.aboard       { background: #DBEAFE !important; color: #1E40AF !important; border-radius: 999px !important; }
.pl-status.terminee     { background: #F3F4F6 !important; color: #6B7280 !important; border-radius: 999px !important; }
.pl-status.annulee      { background: #FEE2E2 !important; color: #991B1B !important; border-radius: 999px !important; }

/* ──────────────────────────────────────────────────────────────────
   Q. MICRO — focus, curseurs, tap
   ────────────────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--green) !important;
  outline-offset: 2px !important;
}
button:focus:not(:focus-visible) { outline: none !important; }

/* Curseur pointer sur tous les éléments interactifs */
.ride-row, .planning-card, .rep-row, .msg-conv-item,
.client-row, .dispatch-chip, .channel-pill, .dept-item,
.prof-action-item, .cd-section[data-click] {
  cursor: pointer;
}

/* ──────────────────────────────────────────────────────────────────
   R. SAFE AREAS (iOS)
   ────────────────────────────────────────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .chat-composer {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
  .accept-sheet {
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }
  .dispatch-popover {
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
  .calendar-picker {
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   S. SCROLLBAR FINE (desktop/iPad)
   ────────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* ──────────────────────────────────────────────────────────────────
   T. UX WALKTHROUGH FIXES
   ────────────────────────────────────────────────────────────────── */

/* Fix 5 — Adresses masquées avant acceptation */
.cd-pool-hidden-notice {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: -4px 16px 12px !important;
  padding: 8px 12px !important;
  background: #F0FDF4 !important;
  border: 1px solid #BBF7D0 !important;
  border-radius: 8px !important;
  color: #007A4D !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.cd-pool-hidden-notice svg { flex-shrink: 0; color: #00A86B; }

/* Fix 4 — Récapitulatif fin de course */
.cd-complete-summary {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.cd-complete-client {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}
.cd-complete-route {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #374151;
  margin-bottom: 6px;
}
.cd-complete-city { font-weight: 500; }
.cd-complete-price-estimate {
  display: inline-block;
  font-size: 13px;
  color: #059669;
  font-weight: 600;
  background: #ECFDF5;
  padding: 2px 8px;
  border-radius: 999px;
}

/* Fix 6 — Montant gagné planning COMPLETED */
.pl-right-done--col {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
}
.pl-earned-amount {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #059669 !important;
  background: #ECFDF5 !important;
  border: 1px solid #A7F3D0 !important;
  border-radius: 999px !important;
  padding: 2px 8px !important;
}

/* Fix 7 — Onglet Historique */
.pl-tabs-bar { flex-wrap: nowrap; overflow-x: auto; }
.pl-tabs-bar .pl-tab { flex-shrink: 0; }

/* Cacher datebar en mode historique */
.planning-datebar.datebar-hidden {
  display: none !important;
}

/* Header history — même style que network (violet/sombre) */
.pl-header-history {
  background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%) !important;
}

/* ──────────────────────────────────────────────────────────────────
   I. PROFIL V2 — Premium redesign 2026
   Glassmorphism hero · bloc Aujourd'hui · menu-rows modernes
   ────────────────────────────────────────────────────────────────── */

/* Fond écran profil */
#screen-profile .container { background: #F8FAFC; }

/* ── Hero card ── */
.prof2-hero-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 55%, #f8fafc 100%);
  border-radius: 24px;
  padding: 24px 20px 20px;
  margin-bottom: 14px;
  box-shadow: 0 2px 20px rgba(0,168,107,0.09), 0 1px 4px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
}
.prof2-hero-deco {
  position: absolute;
  top: -70px; right: -70px;
  width: 210px; height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,168,107,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.prof2-hero-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  position: relative;
}

/* Avatar */
.prof2-avatar-wrap { position: relative; flex-shrink: 0; }
.prof2-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ade80 0%, #00A86B 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 4px 18px rgba(0,168,107,0.30);
  flex-shrink: 0;
  overflow: hidden;
}
.prof2-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.prof2-verified {
  position: absolute; top: -2px; right: -2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #2563EB;
  border: 2.5px solid #fff;
  display: flex; align-items: center; justify-content: center;
}
/* Bouton photo (#2) */
.prof2-avatar-cam {
  position: absolute; bottom: -2px; right: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #007A4D;
  border: 2.5px solid #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.prof2-avatar-cam:active { background: #006B43; }

/* Infos texte hero */
.prof2-hero-info { flex: 1; min-width: 0; }
.prof2-name {
  font-size: 20px; font-weight: 800;
  color: #0F172A;
  margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prof2-member-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  background: #ECFDF5;
  border: 1px solid #BBF7D0;
  border-radius: 20px;
  font-size: 10px; font-weight: 700; color: #007A4D;
  letter-spacing: 0.5px; text-transform: uppercase;
  margin-bottom: 8px;
}
.prof2-stars {
  display: flex; align-items: center; gap: 4px;
}
.prof2-stars-ico { color: #F59E0B; font-size: 15px; letter-spacing: -1px; }
.prof2-stars-svg { display: inline-flex; align-items: center; gap: 1px; }
.prof2-star { display: block; }
.prof2-stars-val { font-weight: 700; color: #0F172A; font-size: 14px; margin-left: 3px; }
.prof2-stars-cnt { color: #9CA3AF; font-size: 13px; }

/* ── Bloc Aujourd'hui ── */
.prof2-today-wrap {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 10px 14px 10px;
  border: 1px solid rgba(229,231,235,0.9);
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  position: relative;
}
.prof2-today-hd {
  font-size: 10px; font-weight: 600; color: #9CA3AF;
  text-transform: uppercase; letter-spacing: 0.8px;
  margin-bottom: 8px;
}
.prof2-today-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
}
.prof2-today-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  padding: 2px 0;
}
.prof2-today-item + .prof2-today-item {
  border-left: 1px solid #F3F4F6;
}
.prof2-today-ico {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
}
.prof2-today-ico.green { background: #ECFDF5; }
.prof2-today-ico.blue  { background: #EFF6FF; }
.prof2-today-num {
  font-size: 20px; font-weight: 800; color: #00A86B; line-height: 1;
}
.prof2-today-lbl {
  font-size: 10px; color: #6B7280; text-align: center; line-height: 1.3;
}

/* ── Menu-rows accordions ── */
.prof2-acc {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05), 0 0 0 0.5px rgba(0,0,0,0.04);
  margin-bottom: 10px;
  overflow: hidden;
}
.prof2-menu-row {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
}
.prof2-menu-row:active,
.prof2-menu-row:focus-visible { background: #F9FAFB; outline: none; }

/* Icône ronde pastel */
.prof2-icon-circ {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pic-green  { background: #ECFDF5; }
.pic-blue   { background: #EFF6FF; }
.pic-purple { background: #F5F3FF; }
.pic-yellow { background: #FFFBEB; }
.pic-indigo { background: #EEF2FF; }
.pic-gray   { background: #F9FAFB; }
.pic-teal   { background: #F0FDFA; }
.pic-red    { background: #FEF2F2; }

/* Label et chevron */
.prof2-menu-lbl {
  flex: 1; font-size: 15px; font-weight: 500; color: #1F2937;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prof2-menu-badge-soon {
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 20px;
  background: #ECFDF5; color: #007A4D; border: 1px solid #BBF7D0;
  white-space: nowrap; flex-shrink: 0;
}
.prof2-chevron {
  color: #D1D5DB; flex-shrink: 0;
  transition: transform 0.22s ease;
}
.prof2-chevron.acc-open { transform: rotate(90deg); }

/* Corps expandable */
.prof2-acc-body {
  border-top: 1px solid #F3F4F6;
  padding: 0 16px;
}
.prof2-acc-body.acc-closed { display: none; }
.prof2-acc-body .prof-acc-inner { padding: 12px 0 16px; }

/* Header profil avec cloche notif */
#screen-profile .topbar {
  background: #00A86B;
  border-bottom: none;
}
.prof2-bell-wrap {
  position: relative;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.prof2-bell-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #00A86B;
  border: 2px solid #fff;
}

/* ── Titres de groupe de sections (#4) ── */
.prof2-group-title {
  font-size: 12px; font-weight: 700; color: #9CA3AF;
  text-transform: uppercase; letter-spacing: 0.6px;
  margin: 18px 4px 8px;
}

/* ── Déconnexion autonome (#6) ── */
.prof2-logout-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px;
  border-radius: 14px; border: 1px solid #FECACA;
  background: #fff; color: #DC2626;
  font-size: 15px; font-weight: 700; cursor: pointer;
  margin-top: 6px;
}
.prof2-logout-btn:active { background: #FEF2F2; }
.prof2-version {
  text-align: center; font-size: 11px; color: #9CA3AF;
  margin-top: 14px;
}

/* ──────────────────────────────────────────────────────────────────
   SLIDER "ALLER EN LIGNE" — swipe-to-confirm (W de gauche à droite)
   ────────────────────────────────────────────────────────────────── */

/* Track : la pill verte reste fixe, on désactive le tap */
.ofl2-btn {
  position: relative !important;
  cursor: default !important;
  user-select: none !important;
}
.ofl2-btn:active {
  transform: none !important;         /* plus de scale au tap */
  background: #22c55e !important;     /* couleur stable */
  box-shadow: 0 4px 20px rgba(34,197,94,0.35) !important;
}

/* Thumb : le cercle W positionné absolument à gauche */
.ofl2-w {
  position: absolute !important;
  left: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #fff !important;        /* blanc = clairement draggable */
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  cursor: grab !important;
  z-index: 2 !important;
  touch-action: none !important;      /* on gère le geste nous-mêmes (sinon scroll vole le drag) */
  will-change: left;
}
.ofl2-w:active { cursor: grabbing !important; }
/* L'image ne doit pas intercepter le pointeur ni se laisser drag nativement */
.ofl2-w img {
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}

/* Transition douce pour snap-back et snap-forward */
.ofl2-w.snapping {
  transition: left 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Label centré — supprime le padding-right qui compensait le W en flex */
.ofl2-btn-label {
  padding-right: 10px !important;
  padding-left: 10px !important;
  font-size: 15px !important;
}

/* Pulse sur le thumb (W) plutôt que sur la pill entière */
.ofl2-btn-pulse {
  animation: none !important;
}
@keyframes ofl2-w-pulse {
  0%   { box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 0 0 0   rgba(255,255,255,.65); }
  70%  { box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 0 0 11px rgba(255,255,255,0);  }
  100% { box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 0 0 0   rgba(255,255,255,0);  }
}
.ofl2-btn-pulse .ofl2-w {
  animation: ofl2-w-pulse 1.8s ease-out infinite;
}

/* =========================================================
   CRÉDITS / FORFAITS — #screen-credits
   ========================================================= */
#screen-credits { background: var(--bg); }

/* ── Carte solde ── */
.cr-balance-card {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  margin-bottom: 6px;
}
.cr-balance-card.cr-balance-empty { border: 1.5px solid #FEE2E2; }
.cr-balance-icon { flex-shrink: 0; }
.cr-balance-info { display: flex; flex-direction: column; gap: 2px; }
.cr-balance-num  { font-size: 36px; font-weight: 800; line-height: 1; color: #00A86B; }
.cr-balance-label { font-size: 13px; color: #6B7280; }
.cr-balance-expiry { font-size: 11.5px; color: #94A3B8; margin-top: 2px; }

/* ── Barre de progression ── */
.cr-bar-wrap {
  position: relative; background: #F3F4F6; border-radius: 99px;
  height: 8px; margin: 0 0 20px; overflow: hidden;
}
.cr-bar-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: #00A86B; border-radius: 99px;
  transition: width .5s ease;
}
.cr-bar-label { display: none; }

/* ── Notice solde vide ── */
.cr-empty-notice {
  display: flex; align-items: center; gap: 8px;
  background: #FEF2F2; border-radius: 10px;
  padding: 10px 14px; font-size: 13px; color: #EF4444;
  margin-bottom: 20px;
}

/* ── Titre section ── */
.cr-section-title {
  font-size: 13px; font-weight: 600; color: #6B7280;
  text-transform: uppercase; letter-spacing: .5px;
  margin: 4px 0 12px;
}

/* ── Carte forfait ── */
.cr-pack-card {
  background: #fff; border-radius: 16px;
  padding: 18px 18px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  border: 1.5px solid #D1FAE5;
  margin-bottom: 16px;
}
.cr-pack-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cr-pack-badge {
  background: #ECFDF5; color: #00A86B;
  font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 99px;
}
.cr-pack-price { font-size: 22px; font-weight: 800; color: #111827; }
.cr-pack-units {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: #374151;
  margin-bottom: 10px;
}
.cr-pack-features {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 5px;
}
.cr-pack-features li {
  font-size: 13px; color: #6B7280;
  padding-left: 18px; position: relative;
}
.cr-pack-features li::before {
  content: "✓"; position: absolute; left: 0;
  color: #00A86B; font-weight: 700;
}
.cr-btn-buy {
  width: 100%; padding: 14px;
  background: #00A86B; color: #fff;
  border: none; border-radius: 12px;
  font-size: 16px; font-weight: 700;
  cursor: pointer; transition: opacity .15s;
}
.cr-btn-buy:active { opacity: .8; }

/* ── Note bas de page ── */
.cr-coming-soon {
  font-size: 12px; color: #9CA3AF;
  text-align: center; padding: 0 8px;
}

/* ── Chargement ── */
.cr-loading {
  padding: 40px; text-align: center;
  color: #9CA3AF; font-size: 14px;
}

/* ── Code promo ── */
.cr-promo-box {
  display: flex; gap: 8px;
  margin-bottom: 6px;
}
.cr-promo-input {
  flex: 1; padding: 13px 14px;
  border: 1.5px solid #E5E7EB; border-radius: 12px;
  font-size: 15px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: #111827;
  background: #fff; outline: none;
  transition: border-color .15s;
}
.cr-promo-input:focus { border-color: #00A86B; }
.cr-promo-input::placeholder { letter-spacing: 0; font-weight: 400; color: #9CA3AF; }
.cr-promo-btn {
  padding: 13px 18px;
  background: #111827; color: #fff;
  border: none; border-radius: 12px;
  font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: opacity .15s;
}
.cr-promo-btn:disabled { opacity: .5; cursor: not-allowed; }
.cr-promo-btn:active   { opacity: .7; }
.cr-promo-hint {
  font-size: 12px; color: #9CA3AF;
  margin: 0 0 20px; padding: 0 2px;
}

/* ── Ligne profil crédits ── */
.cr-prof-row { cursor: pointer; }
.cr-sub-empty { color: #EF4444 !important; }