html, body { overflow-x: hidden; }

    :root, [data-theme="light"] {
      --bg-primary: #ffffff;
      --bg-secondary: #f8fafc;
      --bg-card: #ffffff;
      --bg-input: #f1f5f9;
      --bg-overlay: rgba(0, 0, 0, 0.5);
      --bg-sheet: #ffffff;
      --text-primary: #0f172a;
      --text-secondary: #64748b;
      --text-muted: #94a3b8;
      --border-color: #e2e8f0;
      --border-input: #cbd5e1;
      --btn-primary-bg: #f97316;
      --btn-primary-text: #ffffff;
      --btn-secondary-bg: #f1f5f9;
      --btn-secondary-text: #0f172a;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
      --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
      --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
      --accent: #f97316;
      --accent-light: rgba(249,115,22,0.1);
      --success: #22c55e;
      --danger: #ef4444;
      --warning: #eab308;
      --nav-bg: #ffffff;
      --nav-text: #64748b;
      --nav-active: #f97316;
    }
    [data-theme="dark"] {
      --bg-primary: #0b0f1a;
      --bg-secondary: #111827;
      --bg-card: #1e293b;
      --bg-input: #1e293b;
      --bg-overlay: rgba(0, 0, 0, 0.7);
      --bg-sheet: #111827;
      --text-primary: #f1f5f9;
      --text-secondary: #94a3b8;
      --text-muted: #64748b;
      --border-color: #334155;
      --border-input: #475569;
      --btn-primary-bg: #f97316;
      --btn-primary-text: #ffffff;
      --btn-secondary-bg: #1e293b;
      --btn-secondary-text: #f1f5f9;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
      --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
      --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
      --accent: #f97316;
      --accent-light: rgba(249,115,22,0.15);
      --success: #22c55e;
      --danger: #ef4444;
      --warning: #eab308;
      --nav-bg: #0b0f1a;
      --nav-text: #64748b;
      --nav-active: #f97316;
    }
    [data-theme="light"] body,
    [data-theme="light"] .app-container,
    [data-theme="light"] main,
    [data-theme="light"] #app {
      background-color: var(--bg-primary) !important;
      color: var(--text-primary) !important;
    }
    * { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }

    :root, [data-theme="light"] {
      --bg-primary: #ffffff;
      --bg-secondary: #f8fafc;
      --bg-card: #ffffff;
      --bg-input: #f1f5f9;
      --bg-overlay: rgba(0, 0, 0, 0.5);
      --bg-sheet: #ffffff;
      --text-primary: #0f172a;
      --text-secondary: #64748b;
      --text-muted: #94a3b8;
      --border-color: #e2e8f0;
      --border-input: #cbd5e1;
      --btn-primary-bg: #f97316;
      --btn-primary-text: #ffffff;
      --btn-secondary-bg: #f1f5f9;
      --btn-secondary-text: #0f172a;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
      --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
      --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
      --accent: #f97316;
      --accent-light: rgba(249,115,22,0.1);
      --success: #22c55e;
      --danger: #ef4444;
      --warning: #eab308;
      --nav-bg: #ffffff;
      --nav-text: #64748b;
      --nav-active: #f97316;
      --bg: var(--bg-primary);
      --bg-elevated: var(--bg-secondary);
      --card: var(--bg-card);
      --text: var(--text-primary);
      --border: var(--border-color);
    }

    [data-theme="dark"] {
      --bg-primary: #0b0f1a;
      --bg-secondary: #111827;
      --bg-card: #1e293b;
      --bg-input: #1e293b;
      --bg-overlay: rgba(0, 0, 0, 0.7);
      --bg-sheet: #111827;
      --text-primary: #f1f5f9;
      --text-secondary: #94a3b8;
      --text-muted: #64748b;
      --border-color: #334155;
      --border-input: #475569;
      --btn-primary-bg: #f97316;
      --btn-primary-text: #ffffff;
      --btn-secondary-bg: #1e293b;
      --btn-secondary-text: #f1f5f9;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
      --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
      --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
      --accent: #f97316;
      --accent-light: rgba(249,115,22,0.15);
      --success: #22c55e;
      --danger: #ef4444;
      --warning: #eab308;
      --nav-bg: #0b0f1a;
      --nav-text: #64748b;
      --nav-active: #f97316;
      --bg: var(--bg-primary);
      --bg-elevated: var(--bg-secondary);
      --card: var(--bg-card);
      --text: var(--text-primary);
      --border: var(--border-color);
    }

    * { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; margin: 0; padding: 0; box-sizing: border-box; }
    .hidden { display: none !important; }
    :root {
      --safe-top: env(safe-area-inset-top);
      --safe-bottom: env(safe-area-inset-bottom);
      --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px;
      --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px;
      --primary: #69E2FF;
      --primary-light: #8EECFF;
      --primary-dark: #4DD4F2;
      --accent: #69E2FF;
      --bg: #f5f3ff;
      --bg-card: #fafafa;
      --card: var(--bg-card);
      --text: #1f2937;
      --text-muted: #6b7280;
      --border: #e5e7eb;
      --radius: 16px;
      --radius-lg: 20px;
      --shadow: 0 4px 12px rgba(105, 226, 255, 0.15);
      --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
    }
    [data-theme="dark"] {
      --bg: #0f172a;
      --bg-card: #1e293b;
      --card: var(--bg-card);
      --text: var(--text-primary);
      --text-muted: var(--text-secondary);
      --text-muted-strong: #b0bcc8;
      --border: var(--border-color);
      --shadow: 0 4px 12px rgba(0,0,0,0.4);
      --shadow-card: 0 2px 8px rgba(0,0,0,0.3);
    }
    [data-theme="dark"] .app-header {
      background: linear-gradient(180deg, var(--bg-card) 0%, rgba(15,28,51,0.98) 100%);
      box-shadow: 0 2px 12px rgba(0,0,0,0.2);
      color: #69E2FF;
    }
    [data-theme="dark"] .icon-btn { background: rgba(105, 226, 255, 0.15); }
    [data-theme="dark"] .card { border: 1px solid var(--border); }
    [data-theme="dark"] .bottom-sheet { background: var(--bg-card); }
    [data-theme="dark"] .bottom-sheet .action-bar { background: var(--card); border-color: var(--border); }
    [data-theme="dark"] .raison-sheet-item { background: var(--bg-card); border-color: var(--border); }
    [data-theme="dark"] .raison-sheet-item.selected { border-color: var(--primary); background: rgba(105,226,255,0.12); }
    [data-theme="dark"] .route-field, [data-theme="dark"] .dest-search-bar { background: var(--bg-card); border-color: var(--border); }
    [data-theme="dark"] .nav-bottom {
      background: var(--card);
      border-top: 1px solid var(--border);
      box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
    }
    [data-theme="dark"] .modal { background: var(--card); }
    [data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.7); }
    [data-theme="dark"] input, [data-theme="dark"] .form-group input { background: var(--bg); border-color: var(--border); color: var(--text); }
    [data-theme="dark"] .vehicle-option { background: var(--bg-card); }
    [data-theme="dark"] .option-monter-card { background: var(--bg); border-color: var(--border); }
    [data-theme="dark"] .option-monter-card:has(.option-monter-checkbox:checked) { border-color: #22c55e; background: rgba(34,197,94,0.15); }
    [data-theme="dark"] .search-hero { background: var(--card); }
    [data-theme="dark"] .ride-card { background: var(--card); }
    [data-theme="dark"] .address-suggestions { background: var(--card); border-color: var(--border); }
    [data-theme="dark"] .swap-btn { border-color: var(--border); }
    @media (hover: hover) {
      [data-theme="dark"] .raison-sheet-item:hover { border-color: var(--primary); background: rgba(105,226,255,0.12); }
      [data-theme="dark"] .vehicle-option:hover { border-color: var(--primary-light); background: rgba(105,226,255,0.08); }
      [data-theme="dark"] .option-monter-card:hover { border-color: var(--primary-light); background: rgba(105,226,255,0.08); }
    }
    [data-theme="dark"] .route-bar,
    [data-theme="dark"] .bottom-sheet .route-bar { background: var(--bg); color: var(--text); border-bottom-color: var(--border); }
    [data-theme="dark"] .bottom-sheet .route-bar .addr { color: var(--text); }
    [data-theme="dark"] .bottom-sheet .route-bar .stop-sep,
    [data-theme="dark"] .bottom-sheet .route-bar .close-sheet { color: var(--text-muted); }
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      max-width: 100%;
      overflow: hidden;
    }
    html { background: var(--bg); }
    body {
      font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
    }
    button:disabled,
    .btn:disabled,
    [aria-disabled="true"] {
      cursor: not-allowed;
    }
    button, a, [role="button"], .btn, .clickable { cursor: pointer; }
    /* Réactivité + pas de double déclenchement (Safari / mobile) */
    button, a, [role="button"], .nav-item, .rubric-row, .aide-doc-link, .clickable {
      touch-action: manipulation;
    }
    .home-hero,
    .screen-home-header,
    .header-main {
      padding-top: calc(var(--safe-top) + 12px);
    }
    /* Écrans toujours montés (plus de display:none) */
    .screen {
      display: block;
      position: absolute;
      inset: 0;
      padding: calc(var(--safe-top) + 0.5rem) max(1.25rem, env(safe-area-inset-right)) calc(12rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
      background: var(--bg);
      min-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      min-width: 0;
      box-sizing: border-box;
      opacity: 0;
      pointer-events: none;
      transform: translate3d(18%, 0, 0);
      contain: layout paint style;
    }
    .screen.active {
      opacity: 1;
      pointer-events: auto;
      transform: translate3d(0, 0, 0);
    }
    #screen-auth {
      position: fixed !important;
      inset: 0 !important;
      z-index: 9999 !important;
      overflow-y: auto !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transform: none !important;
      contain: none !important;
      transition: opacity 0.25s ease !important;
      background: var(--bg-primary) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    #screen-auth.active {
      opacity: 1 !important;
      pointer-events: auto !important;
    }
    .screen.screen--has-hero {
      padding-top: 0;
    }
    body.is-sliding .screen { transition: none; will-change: auto; }
    body.is-sliding .screen.is-anim {
      transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.28s;
      will-change: transform;
    }
    /* mode perf pendant animation : moins de paint */
    body.is-sliding * {
      box-shadow: none !important;
      filter: none !important;
    }
    body.is-sliding .app-header {
      background: var(--primary) !important;
    }
    /* PERF: réduire les ombres coûteuses (nav-bottom garde son ombre pour rester visible) */
    .card, .app-header, .toast { box-shadow: none !important; }
    .card { box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; }
    .app-header {
      background: #0f1c33;
      color: #0c4a6e;
      padding: 1.25rem 1.5rem 2rem;
      border-radius: 0;
      margin: 0;
    }
    body.is-home .app-header {
      border-radius: 0 0 22px 22px;
      margin-bottom: 12px;
    }
    .app-header + * { margin-top: 0 !important; }
    .header-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
    }
    .header-greeting p { font-size: 0.9rem; opacity: 0.95; margin-top: 0.25rem; }

    /* Autoriser le header à grandir */
    .app-header,
    .header-main{
      min-height: unset !important;
      height: auto !important;
    }

    .header-top{
      display:flex;
      align-items:center;
    }

    .header-greeting{
      display:flex;
      align-items:center;
      gap:12px;
      line-height:normal !important;
    }
    /* Header home clean */
    .header-greeting.header-home{
      display:flex;
      align-items:center;
      gap:12px;
    }
    /* Logo */
    .header-greeting.header-home .header-brand{
      background:transparent;
      border:0;
      padding:0;
      display:flex;
      align-items:center;
      cursor:pointer;
    }
    .header-greeting.header-home .brand-logo{
      height:40px;     /* taille plus lisible */
      width:auto;
      display:block;
      object-fit:contain;
    }
    /* Texte à gauche (sous-titre sous le logo) */
    .header-greeting.header-home .header-text{
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-width:0;
    }
    /* On cache le h1 (bonjour...) mais on garde i18n */
    .header-greeting.header-home h1[data-i18n="screen.greeting"]{
      display:none !important;
      margin:0 !important;
    }
    /* Sous-titre bien aligné */
    .header-greeting.header-home p[data-i18n="screen.subtitle"]{
      margin:0 !important;
      line-height:1.1;
      opacity:0.95;
    }
    /* Mobile */
    @media (max-width:420px){
      .header-greeting.header-home .brand-logo{ height:32px; }
    }

    /* Logo Truck - taille adaptée header */
    #btn-home-logo{
      background: transparent;
      border: 0;
      padding: 4px 0; /* zone respirante haut/bas */
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height:56px;     /* hauteur maître desktop/tablette */
      cursor: pointer;
    }
    #btn-home-logo .brand-logo{
      height:100%;     /* prend la hauteur du bouton */
      max-height:100%;
      width:auto;
      display:block;
      object-fit:contain;
      background:transparent;
      image-rendering:auto;
    }

    /* Mobile */
    @media (max-width: 420px){
      #btn-home-logo{
        height:46px;
      }
    }

    /* Très petit mobile */
    @media (max-width: 360px){
      #btn-home-logo{
        height:40px;
      }
    }
    .header-actions {
      display: none;
    }
    .icon-btn {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: rgba(255,255,255,0.2);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      transition: transform 80ms ease-out;
      transform-origin: center;
      -webkit-tap-highlight-color: transparent;
    }
    .icon-btn:active { opacity: 0.9; }
    
    .main-content {
      max-width: min(420px, calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
      margin: -1rem auto 0;
      padding: 0;
      min-height: calc(100vh - 180px);
      width: 100%;
      overflow-x: hidden;
      box-sizing: border-box;
    }
    
    .card {
      background: var(--card);
      border-radius: var(--radius);
      padding: 1.5rem;
      margin-bottom: 1.25rem;
      box-shadow: var(--shadow-card);
      border: none;
      max-width: 100%;
      min-width: 0;
    }
    .card-title {
      font-size: 1.125rem;
      font-weight: 600;
      margin-bottom: 1.25rem;
      padding-bottom: 0.5rem;
      color: var(--text);
    }
    
    .form-group {
      margin-bottom: 1.25rem;
    }
    .card .form-group:last-of-type { margin-bottom: 1.5rem; }
    .form-group label {
      display: block;
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.5;
      color: var(--text);
      margin-bottom: 0.375rem;
    }
    .form-group input {
      width: 100%;
      max-width: 100%;
      padding: 0.875rem 1rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      font-size: 16px;
      font-family: inherit;
    }
    .form-group input.input-error {
      border-color: #dc2626;
      box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
    }
    .form-group input, .form-group input[type="text"], .form-group input[type="password"] {
      min-height: 44px;
      font-size: 16px;
    }
    .form-group input:focus {
      outline: 2px solid var(--color-primary, #00d4ff);
      outline-offset: 2px;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(105, 226, 255, 0.3);
    }
    
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.875rem 1.5rem;
      min-height: 44px;
      font-size: 1rem;
      font-weight: 600;
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      font-family: inherit;
      transition: all 0.2s, transform 80ms ease-out;
      transform-origin: center;
      -webkit-tap-highlight-color: transparent;
    }
    .btn:focus-visible, button:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--color-primary, #00d4ff); outline-offset: 2px; }
    .btn:active, .btn.touch-press { opacity: 0.92; }
    .btn-primary:active, .btn-primary.touch-press { opacity: 0.92; }
    .btn-outline:active, .btn-outline.touch-press { opacity: 0.92; }
    .doc-unavailable { color: var(--text-muted); margin-bottom: 0.5rem; }
    .btn-primary {
      background: linear-gradient(135deg, #69E2FF, #4DD4F2);
      color: #0c4a6e;
      width: 100%;
      padding: 1rem;
    }
    @media (hover: hover) {
      .btn-primary:hover { filter: brightness(1.06); }
      .btn-outline:hover { background: rgba(105,226,255,0.1); }
      .btn-danger:hover { background: rgba(255,77,79,0.12); }
      .btn-text-danger:hover { opacity: 0.9; }
      .nav-item:hover { color: var(--primary); }
    }
    .btn-outline {
      background: transparent;
      border: 2px solid var(--primary);
      color: var(--primary);
    }
    .btn-copy, .btn-outline.btn-copy, .btn-history-action.btn-copier {
      color: var(--primary) !important;
      border-color: var(--primary);
    }
    .btn-history-action.btn-copier { background: rgba(105,226,255,0.12); }
    .btn-danger { border: 1px solid #ff4d4f; background: transparent; color: #ff4d4f; }
    .btn-text-danger { background: none; border: none; color: #ef4444; font-size: 0.9rem; cursor: pointer; transition: transform 80ms ease-out; transform-origin: center; -webkit-tap-highlight-color: transparent; }
    .btn-text-danger:active { opacity: 0.9; }
    .booking-step-indicator {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.6rem 1rem;
      background: linear-gradient(135deg, rgba(105,226,255,0.2), rgba(77,212,242,0.12));
      border-radius: var(--radius);
      font-size: 0.85rem; font-weight: 600; color: var(--primary);
      margin-bottom: 1rem;
    }
    .booking-step-indicator .step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
    .booking-step-indicator .step-dot.active { background: var(--primary); }
    .booking-step-indicator .step-dot.done { background: #22c55e; }
    .booking-estimation-badge {
      display: inline-flex; align-items: center; gap: 0.35rem;
      padding: 0.5rem 0.9rem;
      background: rgba(105,226,255,0.15);
      border: 1px solid rgba(105,226,255,0.35);
      border-radius: 999px;
      font-size: 0.95rem; font-weight: 600; color: var(--primary);
    }
    [data-theme="dark"] .booking-estimation-badge { background: rgba(105,226,255,0.15); border-color: rgba(105,226,255,0.4); }
    .booking-reassurance-block {
      padding: 1rem 1.25rem;
      background: rgba(34, 197, 94, 0.08);
      border: 1px solid rgba(34, 197, 94, 0.35);
      border-radius: var(--radius);
      margin-bottom: 1rem;
    }
    .booking-reassurance-block .reassurance-title { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 0.6rem; }
    .booking-reassurance-block .reassurance-list { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; color: var(--text-muted); }
    .booking-reassurance-block .reassurance-list span { display: flex; align-items: center; gap: 0.5rem; }
    .booking-reassurance-block .reassurance-list span::before { content: '✓'; color: #22c55e; font-weight: 700; margin-right: 0.25rem; }
    .booking-confirmation-banner {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      text-align: left;
      padding: 0.875rem 1rem;
      background: var(--bg-card);
      border-bottom: 1px solid var(--border);
      border-radius: 0;
      margin-bottom: 0;
    }
    .booking-confirmation-banner .check-icon {
      font-size: 1.25rem;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(34,197,94,0.2);
      color: #22c55e;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .booking-confirmation-banner .confirmation-title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.15rem; }
    .booking-confirmation-banner .confirmation-title { font-size: 0.95rem; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
    .booking-confirmation-banner .course-annuler-top-btn { flex-shrink: 0; padding: 0.35rem 0.65rem; font-size: 0.85rem; font-weight: 500; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: color 0.15s, border-color 0.15s; }
    .booking-confirmation-banner .course-annuler-top-btn:hover { color: #dc2626; border-color: rgba(220,38,38,0.5); }
    .booking-confirmation-banner .course-annuler-top-btn:active { background: rgba(0,0,0,0.04); }
    .booking-confirmation-banner .confirmation-sub { font-size: 0.85rem; color: var(--text-muted); }
    .booking-confirmation-banner .confirmation-banner-content { flex: 1; min-width: 0; }
    .booking-confirmation-banner .confirmation-extra { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
    .course-recap-total-row { font-size: 0.95rem; }
    .course-recap-total-row span:last-child,
    #recap-total-in-sheet,
    #recap-total,
    #modifier-recap-total { font-weight: 700; color: var(--primary); }
    .suggestion-hors-zone { padding: 1rem; text-align: center; }
    .suggestion-hors-zone strong { display: block; margin-bottom: 0.5rem; color: var(--text); }
    .suggestion-hors-zone p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.75rem; }
    .btn-changer-adresse { display: inline-block; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 600; color: var(--primary); background: rgba(105,226,255,0.15); border: 1px solid var(--primary); border-radius: var(--radius); cursor: pointer; margin-top: 0.5rem; }
    .search-radar-pulse { position: relative; }
    .search-radar-pulse::before,
    .search-radar-pulse::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 120px;
      height: 120px;
      margin: -60px 0 0 -60px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(105, 226, 255, 0.3), transparent 70%);
      animation: radarPulse 2s ease-out infinite;
      pointer-events: none;
      z-index: 600;
    }
    .search-radar-pulse::before {
      animation-delay: 1s;
    }
    @keyframes radarPulse {
      0% { transform: scale(0.4); opacity: 0.9; }
      50% { opacity: 0.4; }
      100% { transform: scale(2); opacity: 0; }
    }
    .course-fin-ecran { text-align: center; padding: 3rem 1.5rem; }
    .course-fin-ecran .check-big { font-size: 4rem; color: #22c55e; margin-bottom: 1rem; }
    .course-fin-ecran h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
    .sticky-recap-bar {
      position: absolute !important;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      width: 100%; max-width: 420px;
      padding: 0.65rem 1rem;
      background: linear-gradient(135deg, rgba(105,226,255,0.25), rgba(77,212,242,0.15));
      border-top: 1px solid rgba(105,226,255,0.4);
      font-size: 0.9rem; font-weight: 600; color: var(--primary);
      display: none; z-index: 1050;
    }
    .sticky-recap-bar.visible { display: block; }
    .sticky-recap-bar .sticky-recap-text { text-align: center; }
    
    .course-details {
      display: grid;
      gap: 1rem;
    }
    .address-row {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
    }
    .address-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 1.25rem;
    }
    .pickup { background: rgba(105, 226, 255, 0.25); color: #0f7a8f; }
    .dropoff { background: #fce7f3; color: #be185d; }
    .address-text strong { display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; }
    
    .driver-card {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: var(--bg-card);
      border-radius: var(--radius);
      margin-bottom: 1rem;
    }
    .driver-avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: linear-gradient(135deg, #69E2FF, #4DD4F2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0c4a6e;
      font-size: 1.25rem;
      font-weight: 600;
    }
    .driver-info h3 { font-size: 1rem; margin-bottom: 0.25rem; }
    .driver-info p { font-size: 0.875rem; color: var(--text-muted); }
    
    .vehicle-info {
      background: var(--bg-card);
      padding: 1rem;
      border-radius: var(--radius);
      margin-bottom: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .vehicle-info .plate {
      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
      font-size: 1.25rem;
      font-weight: 700;
      background: linear-gradient(135deg, #69E2FF, #4DD4F2);
      color: #0c4a6e;
      padding: 0.6rem 1.25rem;
      border-radius: 10px;
      display: inline-block;
      letter-spacing: 3px;
      margin: 0 auto;
    }
    .vehicle-info .model { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.5rem; }
    
    .action-buttons {
      display: flex;
      gap: 0.75rem;
    }
    .action-buttons .btn { flex: 1; }
    .plate-inline { font-family: monospace; font-weight: 600; letter-spacing: 1px; }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: rgba(105, 226, 255, 0.3);
      color: #0c4a6e;
      border-radius: 999px;
      font-size: 0.875rem;
      font-weight: 500;
      margin-bottom: 1rem;
    }
    .status-badge::before {
      content: '';
      width: 8px;
      height: 8px;
      background: currentColor;
      border-radius: 50%;
      animation: pulse 1.5s ease-in-out infinite;
    }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
    .nav-bottom {
      position: fixed;
      left: 0;
      right: 0;
      bottom: env(safe-area-inset-bottom, 0);
      margin: 0 auto;
      width: 100%;
      max-width: 420px;
      background: var(--card);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      border-top: 1px solid var(--border);
      box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
      display: flex;
      justify-content: space-evenly;
      align-items: stretch;
      padding: 0.5rem max(1rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
      height: 60px;
      padding-bottom: env(safe-area-inset-bottom, 0);
      z-index: 1000;
      box-sizing: border-box;
    }
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.15rem;
      color: var(--text-muted);
      font-size: 0.65rem;
      padding: 0.35rem 0.25rem;
      min-width: 0;
      flex: 1;
      max-width: 20%;
      min-height: 40px;
      cursor: pointer;
      border: none;
      background: none;
      font-family: inherit;
      border-radius: 10px;
      transition: transform 80ms ease-out, color 0.2s;
      transform-origin: center;
      -webkit-tap-highlight-color: transparent;
      overflow: hidden;
      text-align: center;
    }
    .nav-item:active { opacity: 0.9; }
    .nav-item.active { color: var(--primary); font-weight: 600; }
    .nav-item span { font-size: 12px; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav-bottom.hidden { display: none; }
    .env-dev-label { position: fixed; bottom: 56px; left: 1rem; right: 1rem; text-align: center; font-size: 0.7rem; color: var(--text-muted); padding: 0.5rem 1rem; background: rgba(0,0,0,0.03); border-radius: 8px; z-index: 50; max-width: 420px; margin: 0 auto; }
    [data-theme="dark"] .env-dev-label { background: rgba(255,255,255,0.04); }
    
    @keyframes fadeSlideIn {
      from { opacity: 0; transform: translate3d(0, 8px, 0); }
      to { opacity: 1; transform: translate3d(0, 0, 0); }
    }
    .main-content {
      position: relative;
      flex: 1;
      overflow: hidden;
    }
    .screen-sub { display: none; }
    .screen-sub.active { display: block; }
    .screen.active .card,
    .screen.active .ride-card,
    .screen.active .history-item,
    .screen.active .rubric-row,
    .screen.active .aide-accordion-item,
    .screen-sub.active .card,
    .screen-sub.active .planifie-adresses-row,
    .screen-sub.active .planifie-field,
    .screen-sub.active .planifie-vehicle-pick-item,
    .screen.active .dest-search-bar,
    .screen.active .map-container,
    .screen.active .recent-item {
      /* affichage immédiat, pas d'animation */
      animation: none !important;
      transition: none !important;
    }
    .page-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 0;
      margin: 0 0 1rem;
      border-bottom: 1px solid var(--border);
    }
    .page-header .btn-back {
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      padding: 0.25rem;
      color: var(--text);
    }
    .page-header h1 { font-size: 1.25rem; font-weight: 700; }
    .infos-perso-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 0;
      border-bottom: 1px solid var(--border);
    }
    .infos-perso-row:last-child { border-bottom: none; }
    .infos-perso-row .icon { font-size: 1.25rem; width: 28px; text-align: center; }
    .infos-perso-row .content { flex: 1; }
    .infos-perso-row .value { font-size: 1rem; color: var(--text); }
    .infos-perso-row .hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }
    .infos-perso-row .modifier { color: #22c55e; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
    .infos-perso-photo-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
    .infos-perso-avatar-wrap { position: relative; }
    .infos-perso-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
    .infos-perso-avatar.placeholder { background: var(--bg-card); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
    .infos-perso-photo-actions { display: flex; flex-direction: column; gap: 0.25rem; }
    .btn-small { padding: 0.4rem 0.75rem; font-size: 0.85rem; }
    .infos-perso-edit { display: flex; flex-direction: column; gap: 0.5rem; }
    .infos-perso-edit input, .infos-perso-edit select, .infos-perso-edit textarea { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 0.95rem; font-family: inherit; }
    .infos-perso-edit textarea { resize: vertical; min-height: 60px; }
    .infos-perso-edit-btns { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
    .infos-perso-edit-btns .btn { flex: 1; padding: 0.5rem; font-size: 0.9rem; }
    #screen-compte {
      padding-top: 1rem;
      padding-bottom: calc(11rem + env(safe-area-inset-bottom));
    }
    .card-aide {
      margin-bottom: 2rem;
    }
    @media (max-width: 768px) {
      .card-aide {
        margin-bottom: 100px;
      }
    }
    .wallet-card {
      margin-top: 1rem;
    }
    .wallet-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      margin-bottom: 0.75rem;
    }
    .wallet-header-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text);
    }
    .wallet-methods-list {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
    }
    .wallet-method-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.75rem 0.75rem;
      border-radius: var(--radius);
      background: var(--card);
      border: 1px solid var(--border);
    }
    .wallet-method-main {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-width: 0;
    }
    .wallet-method-icon {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: rgba(15,23,42,0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
    }
    [data-theme="dark"] .wallet-method-icon {
      background: rgba(148,163,184,0.18);
    }
    .wallet-method-texts {
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
      min-width: 0;
    }
    .wallet-method-label {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--text);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .wallet-method-meta {
      font-size: 0.8rem;
      color: var(--text-muted);
    }
    .wallet-chip {
      display: inline-flex;
      align-items: center;
      padding: 0.05rem 0.4rem;
      border-radius: 999px;
      font-size: 0.7rem;
      background: rgba(34,197,94,0.12);
      color: #16a34a;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .wallet-method-actions {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      flex-shrink: 0;
    }
    .btn-xs {
      padding: 0.25rem 0.55rem;
      font-size: 0.75rem;
    }
    .wallet-empty-state {
      font-size: 0.85rem;
      color: var(--text-muted);
      margin-bottom: 0.75rem;
    }
    .wallet-pay-section {
      margin: 1.25rem 0;
      padding: 0.75rem 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .wallet-pay-title {
      font-size: 0.95rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      color: var(--text);
    }
    .wallet-pay-options{
      display: grid;
      gap: 10px;
    }
    .pay-option{
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.04);
      text-align: left;
      cursor: pointer;
    }
    .pay-option:focus-visible {
      outline: 2px solid var(--color-primary, #00d4ff);
      outline-offset: 2px;
    }
    .pay-option:hover{
      background: rgba(255,255,255,0.06);
    }
    .pay-option.is-selected{
      border-color: var(--accent, #5de1ff);
      box-shadow: 0 0 0 3px rgba(93,225,255,0.18);
    }
    .pay-dot{
      width: 16px;
      height: 16px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,0.35);
      flex: 0 0 16px;
    }
    .pay-option.is-selected .pay-dot{
      border-color: var(--accent, #5de1ff);
      box-shadow: inset 0 0 0 4px var(--accent, #5de1ff);
    }
    .pay-text{
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .pay-title{
      font-weight: 700;
      font-size: 14px;
      line-height: 1.2;
    }
    .pay-sub{
      font-size: 12px;
      opacity: 0.75;
      line-height: 1.2;
    }
    .is-hidden{ display:none !important; }
    /* ===== Paiement options : uniformité ===== */
    #wallet-pay-options-paiement .pay-option{
      opacity: 1;
      filter: none;
      color: inherit;
    }
    #wallet-pay-options-paiement .pay-option:disabled,
    #wallet-pay-options-paiement .pay-option.is-disabled{
      opacity: .45;
      cursor: not-allowed;
    }
    .wallet-pay-empty-inline {
      font-size: 0.85rem;
      color: var(--text-muted);
      margin-bottom: 0.5rem;
    }
    .wallet-modal-placeholder {
      font-size: 0.9rem;
      color: var(--text-muted);
      margin-bottom: 1rem;
    }
    .wallet-save-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9rem;
      margin-bottom: 1rem;
    }
    .wallet-save-row input[type="checkbox"] {
      accent-color: var(--primary);
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
    .setting-row {
      margin-bottom: 0;
      border-bottom: 1px solid var(--border);
    }
    .setting-row:last-of-type { border-bottom: none; }
    .form-group.setting-row { display: block; }
    .form-group.setting-row label.setting-toggle-row { display: grid; width: 100%; box-sizing: border-box; }
    .setting-toggle-row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 1rem;
      cursor: pointer;
      padding: 0.85rem 0;
      min-height: 2.75rem;
      line-height: 1.5;
      font-size: 1rem;
      font-weight: 500;
    }
    .setting-toggle-row .setting-text { min-width: 0; color: var(--text); }
    .setting-toggle-row .toggle-wrap { justify-self: end; }
    .form-group .hint { font-size: 0.8rem; color: var(--text-muted); margin: 0.35rem 0 0; text-decoration: none; }
    .securite-card .planifie-subtitle { margin-bottom: 1.25rem; }
    .securite-card .rubric-section-title { margin-top: 1.25rem; padding-top: 0.5rem; }
    .securite-card .rubric-section-title:first-of-type { margin-top: 0; padding-top: 0; }
    .setting-toggle-row .toggle-wrap { flex-shrink: 0; width: 51px; }
    .toggle-wrap {
      flex-shrink: 0;
      position: relative;
      display: inline-block;
    }
    .toggle-input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    .toggle-track {
      display: block;
      width: 51px;
      height: 31px;
      background: var(--border);
      border-radius: 999px;
      position: relative;
      transition: background 0.3s ease;
    }
    .toggle-track::after {
      content: '';
      position: absolute;
      width: 27px;
      height: 27px;
      border-radius: 50%;
      background: white;
      top: 2px;
      left: 2px;
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .toggle-input:checked + .toggle-track {
      background: #34c759;
    }
    .toggle-input:checked + .toggle-track::after {
      transform: translateX(20px);
    }
    [data-theme="dark"] .toggle-track { background: var(--border); }
    [data-theme="dark"] .toggle-input:checked + .toggle-track { background: #34c759; }
    .aide-buttons { display: flex; flex-direction: column; gap: 0.75rem; }
    .aide-buttons .btn { width: 100%; }
    .compte-profile {
      text-align: center;
      padding: 1.5rem 0;
    }
    .compte-avatar {
      width: 80px;
      height: 80px;
      min-width: 80px;
      min-height: 80px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      font-weight: 600;
      color: var(--text);
      margin: 0 auto 0.75rem;
    }
    .compte-avatar:empty::before { content: '\00A0'; }
    .compte-profile h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--text); }
    .rubric-section-title { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 1rem 0 0.5rem; margin-top: 0.5rem; }
    [data-theme="dark"] .rubric-section-title { color: var(--text-muted-strong, var(--text-muted)); }
    .rubric-section-title:first-child { padding-top: 0; margin-top: 0; }
    .rubric-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 0.9rem 0;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      color: var(--text);
      font-size: 1rem;
      transition: transform 80ms ease-out;
      transform-origin: center;
      -webkit-tap-highlight-color: transparent;
    }
    .rubric-row:active { opacity: 0.9; }
    .rubric-row:last-child { border-bottom: none; }
    .rubric-row:hover { background: var(--bg-card); }
    .rubric-row .icon { font-size: 1.35rem; width: 28px; text-align: center; flex-shrink: 0; }
    .rubric-row .label { flex: 1; min-width: 0; }
    .rubric-row .chevron { color: var(--text-muted); font-size: 1rem; margin-left: auto; flex-shrink: 0; }
    .btn-supprimer-lieu { cursor: pointer; padding: 0.25rem; font-size: 1rem; opacity: 0.7; }
    .btn-supprimer-lieu:hover { opacity: 1; }
    .rubric-row .value { color: var(--text-muted); font-size: 0.9rem; margin-right: 0.25rem; }
    .rubric-row.danger { color: #ef4444; }
    .rubric-row.danger .chevron { color: #ef4444; }
    .confid-card .rubric-section-title { margin-top: 0.85rem; padding-top: 0.35rem; }
    .confid-card .rubric-section-title:first-child { margin-top: 0; padding-top: 0; }
    .confid-picker-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.25rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 0.5rem;
      cursor: pointer;
      transition: all 0.2s, transform 80ms ease-out;
      transform-origin: center;
      -webkit-tap-highlight-color: transparent;
    }
    .confid-picker-row:active { opacity: 0.9; }
    .confid-picker-row:hover { border-color: var(--primary); background: rgba(105,226,255,0.08); }
    .confid-picker-row .label { font-size: 0.95rem; color: var(--text); }
    .confid-picker-row .value { font-size: 0.9rem; color: var(--text-muted); }
    .confid-picker-row .chevron { font-size: 1.1rem; color: var(--text-muted); }
    .confid-selects-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .option-picker-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.25rem;
      border: 2px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 0.5rem;
      cursor: pointer;
      background: var(--card);
      transition: all 0.2s;
      min-height: 52px;
    }
    .option-picker-item:hover { border-color: var(--primary); background: rgba(105,226,255,0.08); }
    .option-picker-item.selected { border-color: var(--primary); background: rgba(105,226,255,0.12); }
    .option-picker-item .option-text { flex: 1; font-size: 1rem; color: var(--text); }
    .option-picker-item .option-check { font-size: 1.25rem; color: #22c55e; display: none; }
    .option-picker-item.selected .option-check { display: block; }
    .confid-toggles { display: flex; flex-direction: column; }
    .confid-toggles .setting-toggle-row.compact { padding: 0.6rem 0; min-height: auto; border-bottom: 1px solid var(--border); }
    .confid-toggles .setting-toggle-row.compact:last-child { border-bottom: none; }
    .confid-actions .rubric-row { padding: 0.65rem 0; }
    .confid-actions .rubric-row .icon { font-size: 1.2rem; }
    .confid-actions .rubric-row .label { font-size: 0.95rem; }
    .confid-card .setting-toggle-row.compact { padding: 0.6rem 0; min-height: auto; }
    .confid-note { font-size: 0.8rem; color: var(--text-muted); margin: 0.85rem 0 0; padding: 0.75rem; background: rgba(105,226,255,0.08); border-radius: var(--radius); line-height: 1.4; }
    .planifie-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 0;
      margin-bottom: 1rem;
    }
    .planifie-header .btn-close { flex-shrink: 0; width: 40px; }
    .planifie-header h1 { flex: 1; min-width: 0; font-size: 1.25rem; font-weight: 700; text-align: center; overflow: hidden; text-overflow: ellipsis; }
    .planifie-header .btn-close, .btn-close {
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: var(--text);
      padding: 0.25rem;
      transition: transform 80ms ease-out;
      transform-origin: center;
      -webkit-tap-highlight-color: transparent;
    }
    .planifie-header .btn-close:active, .btn-close:active { opacity: 0.9; }
    .planifie-subtitle { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.5rem; }
    .planifie-field {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 0;
      border-bottom: 1px solid var(--border);
    }
    .planifie-field:last-of-type { border-bottom: none; }
    .planifie-field label { font-weight: 500; }
    .planifie-field .value {
      padding: 0.5rem 1rem;
      background: var(--bg-card);
      border-radius: 999px;
      font-size: 0.95rem;
      min-width: 140px;
      text-align: center;
      cursor: pointer;
    }
    .planifie-field select {
      padding: 0.5rem 1rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 0.95rem;
      min-width: 140px;
      text-align: center;
      color: var(--text);
      font-family: inherit;
      cursor: pointer;
    }
    .planifie-date-trigger, .date-picker-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.5rem 1rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 0.95rem;
      min-width: 140px;
      text-align: center;
      color: var(--text);
      cursor: pointer;
      gap: 0.5rem;
    }
    .planifie-date-trigger, .date-picker-trigger { transition: transform 80ms ease-out; transform-origin: center; -webkit-tap-highlight-color: transparent; }
    .planifie-date-trigger:active, .date-picker-trigger:active { opacity: 0.9; }
    .planifie-date-trigger:hover, .date-picker-trigger:hover { border-color: var(--primary); background: rgba(105,226,255,0.08); }
    .planifie-date-trigger .placeholder, .date-picker-trigger .placeholder { color: var(--text-muted); }
    .planifie-date-trigger .cal-icon, .date-picker-trigger .cal-icon { font-size: 1rem; opacity: 0.8; }
    .planifie-date-trigger .planifie-date-display,
    .date-picker-trigger .planifie-date-display {
      flex: 1; min-width: 0; border: none; background: transparent; font: inherit; color: inherit;
      cursor: pointer; -webkit-appearance: none; appearance: none;
    }
    .planifie-date-trigger .planifie-date-display:focus-visible,
    .date-picker-trigger .planifie-date-display:focus-visible {
      outline: 2px solid var(--color-primary, #00d4ff);
      outline-offset: 2px;
    }
    .date-picker-sheet .date-picker-panel {
      background: var(--card);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      padding: 1rem 1.25rem 1.5rem;
      max-height: 75vh;
    }
    .date-picker-sheet .date-picker-header {
      font-weight: 600;
      font-size: 1.1rem;
      color: var(--text);
      text-align: center;
      margin-bottom: 1rem;
    }
    .date-picker-sheet .planifie-date-picker {
      display: block;
      position: static;
      transform: none;
      margin: 0;
      min-width: auto;
    }
    .planifie-date-picker .cal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
      gap: 0.5rem;
    }
    .planifie-date-picker .cal-title {
      font-weight: 600;
      font-size: 1rem;
      color: var(--text);
      flex: 1;
      text-align: center;
    }
    .planifie-date-picker .cal-nav {
      width: 36px;
      height: 36px;
      border: none;
      background: var(--bg-card);
      border-radius: 50%;
      color: var(--text);
      cursor: pointer;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }
    .planifie-date-picker .cal-nav:hover { background: rgba(105,226,255,0.2); color: var(--primary); }
    .planifie-date-picker .cal-weekdays {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      margin-bottom: 0.5rem;
      font-size: 0.75rem;
      color: var(--text-muted);
      text-align: center;
    }
    .planifie-date-picker .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
    }
    .planifie-date-picker .cal-day {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s;
      -webkit-tap-highlight-color: transparent;
    }
    .planifie-date-picker .cal-day.other-month { color: var(--text-muted); opacity: 0.5; }
    .planifie-date-picker .cal-day.disabled {
      color: var(--text-muted); opacity: 0.35;
      cursor: not-allowed;
      pointer-events: none;
    }
    .planifie-date-picker .cal-day.today {
      position: relative;
      color: var(--primary);
      font-weight: 600;
    }
    .planifie-date-picker .cal-day.today::after {
      content: '';
      position: absolute;
      bottom: 3px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--primary);
    }
    .planifie-date-picker .cal-day.today:not(.selected) { background: rgba(105,226,255,0.12); }
    .planifie-date-picker .cal-day.selected {
      background: var(--primary);
      color: #0c4a6e;
      font-weight: 700;
      box-shadow: 0 0 0 2px var(--primary);
    }
    .planifie-date-picker .cal-day.selected.today::after { background: #0c4a6e; }
    .planifie-date-picker .cal-day:not(.disabled):hover { background: rgba(105,226,255,0.25); color: var(--text); }
    .planifie-date-picker .cal-day.selected:hover { background: var(--primary-light); color: #0c4a6e; }
    .planifie-date-picker .cal-actions {
      display: flex;
      justify-content: space-between;
      margin-top: 1rem;
      padding-top: 0.75rem;
      border-top: 1px solid var(--border);
      gap: 0.5rem;
    }
    .planifie-date-picker .cal-btn {
      padding: 0.4rem 0.75rem;
      font-size: 0.85rem;
      border: none;
      background: transparent;
      color: var(--primary);
      cursor: pointer;
      border-radius: var(--radius);
    }
    .planifie-date-picker .cal-btn:hover { background: rgba(105,226,255,0.15); }
    .planifie-date-wrap { position: relative; display: flex; flex-direction: column; gap: 0.5rem; }
    .planifie-date-badge {
      display: inline-block;
      padding: 0.25rem 0.6rem;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--primary);
      background: rgba(105,226,255,0.15);
      border-radius: 20px;
      width: fit-content;
    }
    .planifie-field .value.empty { color: var(--text-muted); }
    .planifie-link { color: #22c55e; font-size: 0.9rem; cursor: pointer; margin-bottom: 1.5rem; display: inline-block; }
    .planifie-adresses-row {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1rem 0;
      border-bottom: 1px solid var(--border);
    }
    .planifie-adresses-row:last-of-type { border-bottom: none; }
    .planifie-adresses-row .icon { font-size: 1.25rem; flex-shrink: 0; }
    .planifie-adresses-row .content { flex: 1; }
    .planifie-adresses-row .label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.25rem; }
    .planifie-adresses-row .addr { font-weight: 500; }
    .planifie-adresses-row .modifier-link { font-size: 0.85rem; color: #22c55e; margin-top: 0.5rem; cursor: pointer; transition: transform 80ms ease-out; transform-origin: center; -webkit-tap-highlight-color: transparent; }
    .planifie-adresses-row .modifier-link:active { opacity: 0.9; }
    .planifie-vehicle-pick-item {
      transition: transform 80ms ease-out;
      transform-origin: center;
      -webkit-tap-highlight-color: transparent;
    }
    .planifie-vehicle-pick-item:active { opacity: 0.9; }
    .planifie-vehicle-pick-item:hover { border-color: var(--primary-light) !important; background: rgba(105,226,255,0.08); }
    .planifie-vehicle-pick-item.selected { border-color: #22c55e !important; background: rgba(34,197,94,0.08); }
    
    .spacer { height: 100px; }
    
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    .modal-overlay.show { display: flex; }
    body.modal-confirm-open { overflow: hidden; position: fixed; width: 100%; }
    .modal {
      background: var(--card);
      border-radius: var(--radius);
      padding: 1.5rem;
      max-width: 90%;
      width: 400px;
      max-height: 80vh;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
    /* === Chat moderne : visible, dynamique === */
    .modal-chat-overlay .modal-chat-modern {
      width: 100%;
      max-width: 420px;
      min-height: 420px;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    }
    .modal-chat-overlay .chat-modal-header {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 1rem 1.25rem;
      background: var(--card);
      border-bottom: 1px solid var(--border);
      border-radius: 20px 20px 0 0;
    }
    .modal-chat-overlay .chat-header-titles { flex: 1; min-width: 0; }
    .modal-chat-overlay .chat-header-titles h3 { margin: 0 0 0.15rem 0; font-size: 1.15rem; font-weight: 700; }
    .modal-chat-overlay .chat-header-sub { margin: 0; font-size: 0.8rem; color: var(--text-muted); font-weight: normal; line-height: 1.35; }
    .modal-chat-overlay .chat-modal-close {
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      border: none; background: rgba(0,0,0,0.06); color: var(--text);
      border-radius: 50%; font-size: 1.25rem; line-height: 1; cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.2s, transform 0.15s;
    }
    .modal-chat-overlay .chat-modal-close:hover { background: rgba(0,0,0,0.1); }
    .modal-chat-overlay .chat-modal-close:active { transform: scale(0.95); }
    .modal-chat-overlay .chat-body {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--bg);
    }
    .modal-chat-overlay .chat-messages {
      flex: 1;
      min-height: 120px;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 1rem 1rem 0.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
      -webkit-overflow-scrolling: touch;
    }
    .modal-chat-overlay .chat-msg {
      padding: 0.65rem 1rem;
      border-radius: 16px;
      max-width: 82%;
      font-size: 0.95rem;
      line-height: 1.4;
      word-wrap: break-word;
      animation: chatMsgIn 0.25s ease-out;
    }
    @keyframes chatMsgIn {
      from { opacity: 0; transform: scale(0.96); }
      to { opacity: 1; transform: scale(1); }
    }
    .modal-chat-overlay .chat-msg.sent {
      align-self: flex-end;
      margin-left: auto;
      background: linear-gradient(135deg, #69E2FF 0%, #4DD4F2 100%);
      color: #0c4a6e;
      box-shadow: 0 2px 8px rgba(77,212,242,0.35);
    }
    .modal-chat-overlay .chat-msg.received {
      align-self: flex-start;
      background: var(--card);
      color: var(--text);
      border: 1px solid var(--border);
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    .modal-chat-overlay .chat-quick-replies {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 0 1rem 1rem;
      transition: opacity 0.2s, max-height 0.25s ease-out;
    }
    .modal-chat-overlay .chat-quick-replies.chat-quick-replies-hidden {
      display: none !important;
      padding: 0;
      margin: 0;
      min-height: 0;
      overflow: hidden;
    }
    .modal-chat-overlay .chat-quick-reply {
      padding: 0.6rem 1rem;
      font-size: 0.9rem;
      background: rgba(105, 226, 255, 0.12);
      border: 1px solid rgba(105, 226, 255, 0.4);
      border-radius: 12px;
      color: var(--text);
      cursor: pointer;
      transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
      text-align: left;
      -webkit-tap-highlight-color: transparent;
    }
    .modal-chat-overlay .chat-quick-reply:hover { background: rgba(105, 226, 255, 0.22); }
    .modal-chat-overlay .chat-quick-reply:active { transform: scale(0.98); }
    .modal-chat-overlay .chat-quick-reply-primary {
      background: rgba(105, 226, 255, 0.2);
      border-color: var(--primary);
      font-weight: 600;
      color: var(--text);
    }
    .modal-chat-overlay .chat-quick-reply-primary:hover { background: rgba(105, 226, 255, 0.35); }
    .modal-chat-overlay .chat-input-row {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
      background: var(--card);
      border-top: 1px solid var(--border);
      border-radius: 0 0 20px 20px;
    }
    .modal-chat-overlay .chat-input-row input {
      flex: 1;
      min-width: 0;
      width: 100%;
      padding: 0.6rem 1rem;
      border: 1px solid var(--border);
      border-radius: 20px;
      font-size: 1rem;
      font-family: inherit;
      background: var(--bg);
      color: var(--text);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .modal-chat-overlay .chat-input-row input::placeholder {
      color: var(--text-muted);
    }
    .modal-chat-overlay .chat-input-row input:focus {
      outline: 2px solid var(--color-primary, #00d4ff);
      outline-offset: 2px;
      border-color: var(--primary);
      box-shadow: 0 0 0 2px rgba(105, 226, 255, 0.2);
    }
    .modal-chat-overlay .chat-send-btn {
      flex-shrink: 0;
      padding: 0.5rem 0.85rem;
      border-radius: 20px;
      font-size: 0.9rem;
      font-weight: 600;
      min-width: 0;
      width: auto;
    }
    /* === Modal Appel chauffeur (depuis l'app) - design moderne === */
    .modal-appel-chauffeur-overlay {
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      background: rgba(0, 0, 0, 0.5);
      transition: opacity 0.25s ease;
    }
    .modal-appel-chauffeur-overlay .modal-appel-chauffeur {
      width: 100%;
      max-width: 360px;
      padding: 0;
      border-radius: 24px;
      overflow: hidden;
      background: var(--card);
      box-shadow: 0 24px 64px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
    }
    .modal-appel-chauffeur-overlay.show .modal-appel-chauffeur {
      animation: appel-modal-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    @keyframes appel-modal-in {
      from { opacity: 0; transform: scale(0.92) translateY(10px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }
    .appel-chauffeur-header {
      padding: 1.1rem 1.35rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(105, 226, 255, 0.12) 0%, rgba(105, 226, 255, 0.04) 100%);
    }
    .appel-chauffeur-label { font-size: 0.95rem; color: var(--text-muted); font-weight: 600; letter-spacing: 0.02em; }
    .appel-chauffeur-duree {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--primary);
      font-variant-numeric: tabular-nums;
      padding: 0.25rem 0.6rem;
      border-radius: 10px;
      background: rgba(105, 226, 255, 0.2);
      animation: appel-duree-pulse 2s ease-in-out infinite;
    }
    @keyframes appel-duree-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.85; }
    }
    .appel-chauffeur-body {
      padding: 1.75rem 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .appel-chauffeur-badge {
      display: inline-block;
      margin: 0 0 1.25rem 0;
      padding: 0.35rem 0.85rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--primary);
      background: rgba(105, 226, 255, 0.15);
      border-radius: 999px;
      letter-spacing: 0.03em;
    }
    .appel-chauffeur-avatar-wrap {
      position: relative;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: linear-gradient(145deg, var(--primary) 0%, #2dd4e8 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.35rem;
      box-shadow: 0 8px 32px rgba(45, 212, 232, 0.35);
      overflow: hidden;
    }
    .appel-chauffeur-avatar-wrap:has(.appel-chauffeur-photo[src]:not([src=""])) {
      box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 0 3px rgba(105, 226, 255, 0.3);
    }
    .appel-chauffeur-photo {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
    .appel-chauffeur-initiales {
      font-size: 2.5rem;
      font-weight: 700;
      color: rgba(255,255,255,0.95);
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    }
    .appel-chauffeur-nom {
      margin: 0 0 0.3rem 0;
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.02em;
    }
    .appel-chauffeur-vehicle {
      margin: 0;
      font-size: 0.9rem;
      color: var(--text-muted);
    }
    .appel-chauffeur-plaque {
      margin: 0.35rem 0 0 0;
      font-size: 0.9rem;
      color: var(--text-muted);
      font-weight: 500;
    }
    .appel-chauffeur-tel {
      margin: 0.5rem 0 0 0;
      font-size: 0.85rem;
      color: var(--text-muted);
    }
    .appel-chauffeur-info {
      margin: 1rem 0 0 0;
      padding: 0.85rem 1rem;
      font-size: 0.8rem;
      color: var(--text-muted);
      background: var(--bg);
      border-radius: 12px;
      line-height: 1.45;
      border: 1px solid var(--border);
    }
    .appel-chauffeur-actions {
      display: flex;
      gap: 1rem;
      padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
      border-top: 1px solid var(--border);
      background: var(--bg);
    }
    .btn-appel-action {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      padding: 1rem 1rem;
      border-radius: 16px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      border: none;
      font-family: inherit;
      -webkit-tap-highlight-color: transparent;
      transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    }
    .btn-appel-action:hover { transform: translateY(-1px); }
    .btn-appel-action:active { opacity: 0.9; transform: scale(0.98) translateY(0); }
    .btn-appel-action-icon { font-size: 1.6rem; line-height: 1; }
    .btn-appel-sourdine {
      background: rgba(105, 226, 255, 0.18);
      color: var(--text);
      border: 1px solid rgba(105, 226, 255, 0.45);
    }
    .btn-appel-sourdine:hover { box-shadow: 0 4px 16px rgba(105, 226, 255, 0.25); }
    .btn-appel-sourdine[aria-pressed="true"] {
      background: var(--primary);
      color: #0c4a6e;
      border-color: var(--primary);
      box-shadow: 0 4px 16px rgba(105, 226, 255, 0.4);
    }
    .btn-appel-raccrocher {
      background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
      color: var(--text-primary);
      border: 1px solid rgba(239, 68, 68, 0.5);
    }
    .btn-appel-raccrocher:hover { background: #dc2626; box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35); }
    #modal-pdf-viewer .modal { width: 95%; max-width: 900px; height: 85vh; max-height: 85vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
    .modal-pdf-viewer .modal-header { flex-shrink: 0; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
    .modal-pdf-viewer .modal-header h3 { flex: 1; min-width: 0; margin: 0; }
    .modal-pdf-viewer .modal-header-actions { display: flex; gap: 0.5rem; align-items: center; }
    .modal-pdf-viewer .modal-pdf-body { flex: 1; min-height: 0; display: flex; position: relative; }
    .modal-pdf-viewer #pdf-iframe { width: 100%; height: 100%; border: none; background: var(--bg); }
    .modal-pdf-viewer .pdf-loader-overlay { position: absolute; inset: 0; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 2rem 1.5rem; z-index: 2; overflow: auto; }
    .modal-pdf-viewer .pdf-loader-overlay.hidden { display: none; }
    .modal-pdf-viewer .pdf-skeleton { max-width: 320px; width: 100%; }
    .modal-pdf-viewer .pdf-skeleton-page { background: var(--bg); border-radius: 6px; padding: 1.5rem; margin-bottom: 1rem; }
    .modal-pdf-viewer .pdf-skeleton-line { height: 10px; background: linear-gradient(90deg, var(--border) 25%, rgba(255,255,255,0.12) 50%, var(--border) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.2s ease-in-out infinite; border-radius: 4px; margin-bottom: 0.75rem; }
    .modal-pdf-viewer .pdf-skeleton-line.short { width: 60%; }
    .modal-pdf-viewer .pdf-skeleton-line.medium { width: 85%; }
    .modal-pdf-viewer .pdf-skeleton-line.long { width: 100%; }
    .modal-pdf-viewer .pdf-message { font-size: 0.95rem; color: var(--text-muted); text-align: center; padding: 0.5rem 1rem; margin-top: auto; }
    .modal-pdf-viewer .pdf-message.error { color: #ef4444; }
    .modal-pdf-viewer .btn-close-pdf, .modal-pdf-viewer .btn-pdf-download { font-size: 0.9rem; padding: 0.4rem 0.75rem; border-radius: var(--radius); font-weight: 600; transition: transform 80ms ease-out; transform-origin: center; -webkit-tap-highlight-color: transparent; }
    .modal-pdf-viewer .btn-close-pdf:active, .modal-pdf-viewer .btn-pdf-download:active { opacity: 0.9; }
    .modal-pdf-viewer .btn-close-pdf { background: var(--primary); color: #0c4a6e; border: none; }
    .modal-pdf-viewer .btn-pdf-download { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
    .evaluation-body { padding: 0.5rem 0; }
    .evaluation-prompt { margin-bottom: 1rem; color: var(--text); }
    .evaluation-stars { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 3rem; touch-action: manipulation; }
    .evaluation-stars .star { cursor: pointer; color: var(--border); transition: color 0.15s, transform 0.2s ease; user-select: none; -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0.35rem; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.15); }
    .evaluation-stars .star:active { opacity: 0.9; }
    .evaluation-stars .star.filled { transition: color 0.15s, transform 0.2s ease; }
    .evaluation-stars.rating-1 .star.filled, .evaluation-stars.rating-2 .star.filled { color: #f97316; }
    .evaluation-stars.rating-3 .star.filled { color: #fbbf24; }
    .evaluation-stars.rating-4 .star.filled { color: #eab308; }
    .evaluation-stars.rating-5 .star.filled { color: #22c55e; }
    .evaluation-stars.stars-max .star.filled { animation: starPulse 0.6s ease-out; }
    @keyframes starPulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
    @media (max-width: 480px) {
      .evaluation-stars { font-size: 3.5rem; gap: 0.6rem; }
      .evaluation-stars .star { min-width: 52px; min-height: 52px; padding: 0.5rem; }
    }
    .evaluation-stars-label { min-height: 1.5rem; font-size: 0.95rem; font-weight: 600; color: var(--text-muted); margin-bottom: 1rem; transition: color 0.2s; }
    .evaluation-stars-label.has-rating { color: var(--text); }
    .evaluation-stars-label.rating-5 { color: #22c55e; }
    #btn-submit-evaluation { transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s; }
    #btn-submit-evaluation:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
    #btn-submit-evaluation.rating-complete { animation: btnGlow 0.5s ease-out; box-shadow: 0 0 20px rgba(34,197,94,0.5); }
    @keyframes btnGlow { 0% { box-shadow: 0 0 0 rgba(34,197,94,0); } 50% { box-shadow: 0 0 24px rgba(34,197,94,0.6); } 100% { box-shadow: 0 0 20px rgba(34,197,94,0.5); } }
    .evaluation-label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text); }
    .evaluation-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
    .eval-chip { padding: 0.4rem 0.75rem; font-size: 0.85rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); cursor: pointer; transition: all 0.2s, transform 80ms ease-out; transform-origin: center; -webkit-tap-highlight-color: transparent; }
    .eval-chip:active { opacity: 0.9; }
    .eval-chip.selected { border-color: var(--primary); background: rgba(105,226,255,0.15); color: var(--primary); }
    #evaluation-comment { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 1rem; font-family: inherit; resize: vertical; box-sizing: border-box; }
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }
    .modal-close {
      background: none;
      border: none;
      transition: transform 80ms ease-out;
      transform-origin: center;
      -webkit-tap-highlight-color: transparent;
      font-size: 1.5rem;
      cursor: pointer;
      color: var(--text-muted);
      padding: 0.25rem;
    }
    .chat-messages {
      min-height: 60px;
      max-height: 160px;
      overflow-y: auto;
      margin-bottom: 0.75rem;
    }
    .chat-msg {
      padding: 0.5rem 1rem;
      border-radius: var(--radius);
      margin-bottom: 0.5rem;
      max-width: 85%;
    }
    .chat-msg.sent {
      background: linear-gradient(135deg, #69E2FF, #4DD4F2);
      color: #0c4a6e;
      margin-left: auto;
    }
    .chat-msg.received {
      background: var(--bg-card);
      color: var(--text);
    }
    .chat-input-row {
      display: flex;
      gap: 0.5rem;
    }
    .chat-input-row input {
      flex: 1;
      padding: 0.75rem 1rem;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 1rem;
      font-family: inherit;
    }
    .chat-quick-replies {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      margin-bottom: 0.75rem;
    }
    .chat-quick-reply {
      padding: 0.35rem 0.6rem;
      font-size: 0.78rem;
      background: rgba(105, 226, 255, 0.15);
      border: 1px solid var(--primary);
      border-radius: 8px;
      color: var(--text);
      cursor: pointer;
      transition: all 0.2s;
      text-align: left;
    }
    .chat-quick-reply:hover { background: rgba(105, 226, 255, 0.3); }

    .history-item {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      border-radius: var(--radius);
      -webkit-tap-highlight-color: transparent;
    }
    .history-item:hover { background: var(--bg-card); }
    .history-item:active { background: var(--bg-card); }
    .history-item-route { font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem; }
    .history-item-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
    .history-item-actions .btn-history-action { font-size: 0.8rem; padding: 0.35rem 0.6rem; border-radius: var(--radius); cursor: pointer; font-weight: 500; border: none; }
    #screen-historique .card { padding: 1rem 1.25rem; }
    #screen-historique .card-title { font-size: 1.25rem; margin-bottom: 0.5rem; }
    #screen-historique .planifie-subtitle { font-size: 0.95rem; margin-bottom: 1.25rem; }
    .historique-filters {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-bottom: 1.25rem;
    }
    .historique-date-segments {
      display: flex;
      gap: 0.5rem;
      overflow-x: auto;
      padding-bottom: 0.25rem;
      padding-right: 0.25rem;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .historique-date-segments::-webkit-scrollbar { display: none; }
    .historique-date-seg {
      flex: 1;
      min-width: max-content;
      min-height: 44px;
      padding: 0 1rem;
      font-size: 0.95rem;
      font-weight: 500;
      border: 2px solid var(--border);
      border-radius: var(--radius);
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      -webkit-tap-highlight-color: transparent;
      white-space: nowrap;
    }
    .historique-date-seg:hover { border-color: var(--primary); color: var(--text); }
    .historique-date-seg.active {
      background: var(--primary);
      border-color: var(--primary);
      color: #0c4a6e;
    }
    .historique-search-wrap {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      background: var(--input, var(--bg-card));
      border: 1px solid var(--border);
      border-radius: var(--radius);
      min-height: 2.75rem;
    }
    .historique-search-wrap .search-icon { font-size: 1.1rem; color: var(--text-muted); flex-shrink: 0; }
    .historique-search-wrap input {
      flex: 1;
      border: none;
      background: none;
      font-size: 1rem;
      color: var(--text);
      min-width: 0;
    }
    .historique-search-wrap input::placeholder { color: var(--text-muted); }
    .historique-search-wrap input:focus {
      outline: 2px solid var(--color-primary, #00d4ff);
      outline-offset: 2px;
    }
    .historique-loading {
      padding: 1rem;
      color: var(--text-muted);
      font-size: 1rem;
      display: none;
    }
    .historique-loading.visible {
      display: block;
    }
    #btn-supprimer-tout-courses {
      min-height: 3rem;
      padding: 0.875rem 1.25rem;
      font-size: 1rem;
      font-weight: 500;
      margin-top: 1.25rem;
      -webkit-tap-highlight-color: transparent;
      display: none;
    }
    #btn-supprimer-tout-courses.has-items {
      display: block;
    }

    .aide-content { padding: 1rem 1.25rem 2rem; }
    .aide-contact-card {
      margin-bottom: 1.5rem;
      padding: 1rem;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .aide-contact-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.35rem; color: var(--text); }
    .aide-contact-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 1rem; line-height: 1.4; }
    .aide-contact-row { margin-bottom: 0.85rem; }
    .aide-contact-row label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--text); }
    .aide-contact-row .auth-input,
    .aide-contact-row select.auth-input { width: 100%; box-sizing: border-box; }
    .aide-contact-row textarea.auth-input { min-height: 100px; resize: vertical; }
    .aide-contact-msg { font-size: 0.875rem; margin-top: 0.75rem; }
    .aide-contact-msg--ok { color: #22c55e; }
    .aide-contact-msg--err { color: #ef4444; }
    .aide-accordion { display: flex; flex-direction: column; gap: 0.5rem; }
    .aide-accordion-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
    .aide-accordion-trigger {
      width: 100%;
      padding: 1rem 1.25rem;
      font-size: 1rem;
      font-weight: 600;
      text-align: left;
      background: var(--bg-card);
      border: none;
      color: var(--text);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 48px;
      -webkit-tap-highlight-color: transparent;
    }
    .aide-accordion-trigger::after {
      content: '+';
      font-size: 1.25rem;
      color: var(--primary);
      flex-shrink: 0;
      margin-left: 0.5rem;
      transition: transform 0.2s;
    }
    .aide-accordion-trigger[aria-expanded="true"]::after { content: '−'; }
    .aide-accordion-trigger { transition: transform 80ms ease-out; transform-origin: center; }
    .aide-accordion-trigger:active { opacity: 0.9; }
    .aide-accordion-trigger:hover { background: var(--bg); }
    .aide-accordion-panel {
      display: none;
      padding: 0 1.25rem 1rem;
      border-top: 1px solid var(--border);
    }
    .aide-accordion-panel.open { display: block; }
    .aide-q { font-size: 0.9rem; margin-top: 0.75rem; color: var(--text); }
    .aide-q:first-child { margin-top: 0.75rem; }
    .aide-a { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.5rem; line-height: 1.5; padding-left: 0; }
    .aide-doc-links { display: flex; flex-direction: column; gap: 0.5rem; }
    .aide-doc-link {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem 1.25rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      text-align: left;
      font-size: 0.95rem;
      color: var(--text);
      text-decoration: none;
      cursor: pointer;
      min-height: 48px;
      -webkit-tap-highlight-color: transparent;
      width: 100%;
      font-family: inherit;
    }
    button.aide-doc-link { appearance: none; -webkit-appearance: none; }
    .aide-doc-link {
      transition: transform 80ms ease-out;
      transform-origin: center;
      -webkit-tap-highlight-color: transparent;
    }
    .aide-doc-link:active { opacity: 0.9; }
    .aide-doc-link:hover { border-color: var(--primary); background: rgba(105, 226, 255, 0.08); }
    .aide-doc-icon { font-size: 1.25rem; }
    .aide-doc-badge { margin-left: auto; font-size: 0.8rem; color: var(--primary); font-weight: 500; }

    .aide-search-wrap { margin-bottom: 1rem; }
    .aide-search-wrap input {
      width: 100%; padding: 0.75rem 1rem; border-radius: var(--radius); border: 1px solid var(--border);
      background: var(--bg-card); color: var(--text); font-size: 1rem;
    }
    .aide-toggle-all { width: 100%; margin-bottom: 1.25rem; padding: 0.6rem 1rem; font-size: 0.9rem; color: var(--primary); background: transparent; border: 1px solid var(--primary); border-radius: var(--radius); cursor: pointer; font-weight: 500; }
    .aide-categories { display: flex; flex-direction: column; gap: 1rem; }
    .aide-category-card {
      background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
      padding: 1rem 1.25rem; overflow: hidden;
    }
    .aide-category-card.hidden { display: none !important; }
    .aide-category-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 0.35rem; }
    .aide-category-desc { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.75rem; line-height: 1.4; }
    .aide-category-links { display: flex; flex-direction: column; gap: 0.35rem; }
    #aide-categories.aide-categories-collapsed .aide-category-links { display: none; }
    .aide-category-link {
      display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0;
      font-size: 0.95rem; color: var(--primary); text-decoration: none; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font-family: inherit;
      -webkit-tap-highlight-color: transparent;
    }
    .aide-category-link:hover { text-decoration: underline; }
    .aide-category-link::after { content: '›'; color: var(--text-muted); }
    
    .toast-container {
      position: fixed;
      top: calc(env(safe-area-inset-top) + 8px);
      left: 0;
      right: 0;
      z-index: 99999;
      pointer-events: none;
      display: flex;
      justify-content: center;
      padding: 0 4vw;
    }
    .toast {
      max-width: min(92vw, 420px);
      margin: 0 auto;
      border-radius: 14px;
      position: relative;
      transform: translateY(-100px);
      background: #111;
      color: var(--text-primary);
      opacity: 0;
      backdrop-filter: none;
      box-shadow: 0 10px 28px rgba(0,0,0,0.45);
      border: 1px solid rgba(255,255,255,0.08);
      padding: 0.75rem 1.5rem;
      font-size: 0.875rem;
      transition: transform 0.3s ease-out, opacity 0.3s;
      z-index: 99999;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }
    .toast .toast-icon { font-size: 1.2rem; flex-shrink: 0; }
    .toast .toast-icon.check { animation: toast-check-in 0.35s ease-out forwards; }
    @keyframes toast-check-in { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }
    .toast.show { transform: translateY(0); opacity: 0.98; }
    .toast.show.toast-error { animation: toast-shake 0.4s ease-out; }
    @keyframes toast-shake { 0%,100% { transform: translateY(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
    .toast.toast-error { background: #dc2626; }
    .toast.toast-success .toast-icon { color: #22c55e; }
    .toast.toast-driver { background: linear-gradient(135deg, #22c55e, #16a34a); animation: toast-driver-pulse 0.5s ease-out; }
    body.pdf-open .toast { background: #111 !important; color: var(--text-primary) !important; opacity: 0.98 !important; backdrop-filter: none !important; box-shadow: 0 6px 24px rgba(0,0,0,0.35); }
    body.pdf-open .toast .toast-icon { color: var(--text-primary) !important; }
    @keyframes toast-driver-pulse { 0% { transform: translateY(0) scale(0.95); } 50% { transform: translateY(0) scale(1.02); } 100% { transform: translateY(0) scale(1); } }
    .offline-banner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #dc2626;
      color: white;
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      z-index: 9999;
    }
    .offline-banner .btn-offline-retry {
      background: rgba(255,255,255,0.25);
      color: white;
      border: 1px solid rgba(255,255,255,0.5);
      padding: 0.25rem 0.6rem;
      border-radius: var(--radius, 8px);
      font-size: 0.8rem;
      cursor: pointer;
    }
    .offline-banner .btn-offline-retry:hover {
      background: rgba(255,255,255,0.35);
    }
    .paiement-erreur {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      background: rgba(220, 38, 38, 0.15);
      border: 1px solid #dc2626;
      border-radius: var(--radius);
      color: #dc2626;
      font-size: 0.9rem;
      margin-bottom: 1rem;
    }
    .paiement-erreur span:first-of-type { flex-shrink: 0; }
    .paiement-erreur #paiement-erreur-msg { flex: 1; min-width: 0; }
    .paiement-erreur .btn-reessayer {
      margin-left: auto;
      padding: 0.35rem 0.75rem;
      font-size: 0.85rem;
      border: 1px solid #dc2626;
      background: transparent;
      color: #dc2626;
      border-radius: var(--radius);
      cursor: pointer;
      font-weight: 600;
      transition: transform 80ms ease-out;
      transform-origin: center;
      -webkit-tap-highlight-color: transparent;
    }
    .paiement-erreur .btn-reessayer:active { opacity: 0.9; }
    #screen-paiement .card { overflow-wrap: break-word; padding-bottom: max(1rem, var(--keyboard-cta-gap, 0)); }
    #screen-instant-recap .card {
      min-width: 0;
      overflow-wrap: break-word;
      padding-bottom: 1.5rem;
      padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
      padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
      box-sizing: border-box;
    }
    #screen-instant-recap #btn-partager-trajet {
      box-sizing: border-box;
      max-width: 100%;
      width: 100%;
      padding-left: 1rem;
      padding-right: 1rem;
      overflow: visible;
      white-space: nowrap;
    }
    @media (max-width: 360px) {
      #screen-instant-recap #btn-partager-trajet { font-size: 0.9rem; padding-left: 0.75rem; padding-right: 0.75rem; white-space: normal; }
    }
    #screen-instant-recap .planifie-recap-row span { overflow-wrap: break-word; word-wrap: break-word; min-width: 0; }
    #screen-instant-recap .aide-legal-mention {
      overflow-wrap: break-word;
      word-wrap: break-word;
      max-width: 100%;
      padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
      margin-bottom: 0;
      padding-left: 0;
      padding-right: 0;
      white-space: normal;
      word-break: break-word;
    }
    #screen-instant-recap .btn { max-width: 100%; box-sizing: border-box; }
    #screen-instant-recap.screen.active {
      padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
    }
    #screen-paiement .form-group input {
      pointer-events: auto !important;
      -webkit-user-select: text !important;
      user-select: text !important;
      -webkit-tap-highlight-color: rgba(105,226,255,0.3);
    }
    #screen-paiement .form-group input:not([readonly]):not([disabled]) {
      cursor: text;
    }
    .paiement-erreur .btn-reessayer:hover {
      background: rgba(220, 38, 38, 0.2);
    }
    .section-label {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.75rem;
    }
    
    .welcome-hero {
      text-align: center;
      padding: 2rem 1rem;
    }
    .welcome-hero h2 {
      font-size: 1.5rem;
      margin-bottom: 0.5rem;
    }
    .welcome-hero p {
      color: var(--text-muted);
      margin-bottom: 2rem;
    }
    .search-hero {
      background: var(--card);
      border-radius: var(--radius);
      padding: 1.25rem;
      box-shadow: var(--shadow-card);
      border: 1px solid var(--border);
      margin-bottom: 1.25rem;
    }
    .route-fields {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .route-field {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.25rem;
      background: transparent;
      font-size: 0.95rem;
      min-height: 52px;
      border: none;
      border-bottom: 1px solid var(--border);
    }
    .route-field:last-of-type { border-bottom: none; }
    .route-field .icon {
      font-size: 1.2rem;
      flex-shrink: 0;
      width: 24px;
      text-align: center;
    }
    .route-field input {
      flex: 1;
      min-width: 0;
      border: none;
      background: none;
      font-family: inherit;
      font-size: 0.95rem;
      color: var(--text);
    }
    .route-field input::placeholder { color: var(--text-muted); opacity: 0.9; }
    .search-hero .swap-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0.5rem 0;
      background: var(--bg-card);
      border-bottom: 1px solid var(--border);
      position: relative;
      z-index: 1;
    }
    .swap-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: linear-gradient(135deg, #69E2FF, #4DD4F2);
      color: #0c4a6e;
      border: 2px solid var(--card);
      box-shadow: 0 2px 8px rgba(105,226,255,0.35);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
    }
    @media (hover: hover) {
      .swap-btn:hover { filter: brightness(1.08); box-shadow: 0 3px 12px rgba(105,226,255,0.45); }
    }
    .search-hero .btn-rechercher {
      margin-top: 1.25rem;
      width: 100%;
      padding: 1rem;
    }
    .map-container {
      height: 240px;
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: 1rem;
      background: var(--border);
    }
#map-preview { display: none !important; }
    .fullscreen-map {
      position: fixed;
      inset: 0;
      z-index: 0;
    }
    #map-accueil,
    #map-course {
      width: 100%;
      height: 100%;
    }
    .section-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 1rem; color: var(--text); }
    .ride-cards { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
    .ride-card {
      flex: 1;
      background: white;
      border-radius: var(--radius);
      padding: 1rem;
      box-shadow: var(--shadow-card);
      border: 1px solid var(--border);
      cursor: pointer;
      transition: all 0.2s;
    }
    .ride-card:hover { border-color: var(--primary-light); }
    .ride-card .car-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
    .ride-card h4 { font-size: 0.95rem; margin-bottom: 0.25rem; }
    .ride-card p { font-size: 0.8rem; color: var(--text-muted); }
    .dest-search-bar {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem;
      background: var(--bg-card);
      border-radius: var(--radius);
      margin-bottom: 1rem;
      cursor: pointer;
      transition: transform 80ms ease-out;
      transform-origin: center;
      -webkit-tap-highlight-color: transparent;
    }
    .dest-search-bar:active { opacity: 0.9; }
    .dest-search-bar .search-icon { font-size: 1.25rem; }
    .dest-search-bar input { flex: 1; border: none; background: none; font-size: 1rem; font-family: inherit; }
    .dest-search-bar .later {
      color: var(--primary);
      font-size: 0.85rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      cursor: pointer;
      pointer-events: auto;
      -webkit-tap-highlight-color: transparent;
      background: rgba(105, 226, 255, 0.12);
      border: none;
      border-radius: 20px;
      font-family: inherit;
      padding: 0.4rem 0.75rem;
      margin: 0;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .dest-search-bar .later:hover { background: rgba(105, 226, 255, 0.2); }
    .dest-search-bar .later:active { background: rgba(105, 226, 255, 0.25); opacity: 1; }
    .dest-search-bar .later:focus-visible { outline: 2px solid var(--color-primary, #00d4ff); outline-offset: 2px; }
    .recent-list { margin-top: 1.5rem; margin-bottom: 3rem; padding-top: 1rem; padding-bottom: 2rem; min-height: 4rem; border-top: 1px solid var(--border); }
    .recent-list .section-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.5rem; }
    .recent-item{
      display:flex;
      align-items:center;
      justify-content:space-between;
      background:#1c2a3a;
      border-radius:14px;
      padding:14px 16px;
      position:relative;
      margin-bottom:0.5rem;
      cursor:pointer;
    }
    .recent-left{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
    .recent-icon{
      font-size:0.9rem;
      opacity:0.85;
      flex-shrink:0;
    }
    .recent-text{
      font-weight:500;
      font-size:0.9rem;
      color:var(--text);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    /* bouton caché par défaut */
    .recent-delete{
      opacity:0;
      transform:scale(.8);
      transition:.2s ease;
      background:rgba(255,255,255,0.08);
      border:0;
      width:32px;
      height:32px;
      border-radius:50%;
      color: var(--text-primary);
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
    }
    /* visible au hover (desktop) */
    .recent-item:hover .recent-delete{
      opacity:1;
      transform:scale(1);
    }
    /* mobile : toujours visible légèrement */
    @media (max-width:768px){
      .recent-delete{
        opacity:.55;
      }
    }
    html.is-navigating .card,
    html.is-navigating .btn,
    html.is-navigating .bottom-sheet,
    html.is-navigating .sheet-backdrop {
      box-shadow: none !important;
    }
    html.is-navigating .sheet-backdrop.open {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    /* Mode perf : désactive animations/transitions (tester avec document.body.classList.add('perf')) */
    body.perf * {
      animation: none !important;
      transition: none !important;
    }
    .sheet-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55); /* fallback sans blur */
      transition: opacity .25s;
      z-index: 1100;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .sheet-backdrop.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .sheet-backdrop.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .sheet-backdrop.open .bottom-sheet { transform: translateY(0); }
    .bottom-sheet {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--bg);
      border-radius: 18px 18px 0 0;
      box-shadow: 0 -10px 40px rgba(0,0,0,0.25);
      transform: translateY(100%);
      transition: transform .28s cubic-bezier(.4,0,.2,1);
      will-change: transform;
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      pointer-events: auto;
    }
    .accueil-bottom-sheet {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      border-radius: 24px 24px 0 0;
      background: var(--card-bg, var(--card));
      z-index: 10;
      transform: translateY(60%);
      transition: transform .35s cubic-bezier(.22,1,.36,1);
      touch-action: none;
      padding: 1rem 1.25rem calc(1.5rem + var(--safe-bottom, 0));
      max-height: 85vh;
      overflow-y: auto;
    }
    .accueil-bottom-sheet.closed {
      transform: translateY(60%);
    }
    .accueil-bottom-sheet.open {
      transform: translateY(0%);
    }
    .accueil-bottom-sheet.collapsed {
      transform: translateY(70%);
    }
    .bottom-sheet-drag-handle {
      width: 36px; height: 4px; border-radius: 2px;
      background: rgba(0,0,0,0.2);
      margin: 8px auto 0;
      flex-shrink: 0;
    }
    [data-theme="dark"] .bottom-sheet-drag-handle { background: rgba(255,255,255,0.3); }
    .bottom-sheet-drag-zone { flex-shrink: 0; touch-action: none; cursor: grab; }
    .bottom-sheet-body { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; min-height: 0; }
    @keyframes spin { to { transform: rotate(360deg); } }
    /* Blur seulement si supporté */
    @supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
      .sheet-backdrop {
        background: rgba(0,0,0,0.35);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition: none !important; animation: none !important; }
      .screen.screen-nav-leaving, .screen.screen-nav-entering { animation: none !important; }
      .bottom-sheet, .sheet-backdrop { transition: none !important; }
      .modal-overlay, .modal, .toast-container .toast, .home-sheet { transition: none !important; }
      .screen.active .card, .screen.active .ride-card, .screen.active .history-item { animation: none !important; }
      .btn-shake { animation: none !important; }
    }
    /* Scrollbars fines façon mobile (sans grosse barre grise) */
    body,
    .screen,
    .bottom-sheet,
    .bottom-sheet-body,
    .accueil-bottom-sheet {
      scrollbar-width: thin; /* Firefox */
      scrollbar-color: rgba(148,163,184,0.6) transparent;
    }
    body::-webkit-scrollbar,
    .screen::-webkit-scrollbar,
    .bottom-sheet::-webkit-scrollbar,
    .bottom-sheet-body::-webkit-scrollbar,
    .accueil-bottom-sheet::-webkit-scrollbar {
      width: 4px;
    }
    body::-webkit-scrollbar-track,
    .screen::-webkit-scrollbar-track,
    .bottom-sheet::-webkit-scrollbar-track,
    .bottom-sheet-body::-webkit-scrollbar-track,
    .accueil-bottom-sheet::-webkit-scrollbar-track {
      background: transparent;
    }
    body::-webkit-scrollbar-thumb,
    .screen::-webkit-scrollbar-thumb,
    .bottom-sheet::-webkit-scrollbar-thumb,
    .bottom-sheet-body::-webkit-scrollbar-thumb,
    .accueil-bottom-sheet::-webkit-scrollbar-thumb {
      background: rgba(148,163,184,0.6);
      border-radius: 999px;
    }
    .bottom-sheet .route-bar {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem 1.25rem;
      background: #f8fafc;
      color: var(--text-primary);
      border-bottom: 1px solid var(--border);
    }
    .bottom-sheet .route-bar .addr { min-width: 0; color: inherit; }
    .bottom-sheet .route-bar-itinerary { display: flex; align-items: center; gap: 0.35rem; flex: 1; min-width: 0; overflow-x: auto; }
    .bottom-sheet .route-bar-itinerary .stop-sep { color: var(--text-muted); font-size: 0.85em; flex-shrink: 0; }
    .bottom-sheet .route-bar .close-sheet { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: var(--text-muted); padding: 0.25rem; flex-shrink: 0; }
    .bottom-sheet .route-bar .addr { flex: 1; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bottom-sheet .discount-bar {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1.25rem;
      background: var(--primary);
      color: #0c4a6e;
      font-size: 0.9rem;
      font-weight: 500;
    }
    .vehicle-option {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.25rem;
      border: 2px solid transparent;
      border-radius: var(--radius);
      margin: 0.75rem 1rem;
      cursor: pointer;
      transition: all 0.2s;
    }
    .vehicle-option:active, .vehicle-option.touch-press { opacity: 0.92; }
    @media (hover: hover) {
      .vehicle-option:hover { border-color: var(--primary-light); background: rgba(105,226,255,0.08); }
    }
    .vehicle-option.selected { border-color: #22c55e; background: rgba(34,197,94,0.06); }
    .vehicle-option .vehicle-icon { font-size: 2.5rem; display: flex; align-items: center; justify-content: center; min-width: 4rem; }
    .vehicle-option .vehicle-icon img { width: 4rem; height: auto; max-height: 4rem; object-fit: contain; }
    .vehicle-option .vehicle-info { flex: 1; }
    .vehicle-option .vehicle-info h4 { font-size: 1rem; margin-bottom: 0.25rem; }
    .vehicle-option .vehicle-info .detail { font-size: 0.8rem; color: var(--text-muted); }
    .vehicle-option .price { text-align: right; }
    .vehicle-option .price .current { font-weight: 700; font-size: 1.1rem; color: var(--text); }
    .vehicle-option .price .original { font-size: 0.8rem; color: var(--text-muted); text-decoration: line-through; }
    .vehicle-option .badge { display: inline-block; background: #22c55e; color: white; font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 6px; margin-left: 0.5rem; }
    .option-monter-card {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem 1.25rem;
      margin: 0.75rem 1rem;
      background: var(--bg-card);
      border: 2px solid var(--border);
      border-radius: var(--radius);
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }
    .option-monter-card:active, .option-monter-card.touch-press { opacity: 0.92; }
    @media (hover: hover) {
      .option-monter-card:hover { border-color: var(--primary-light); background: rgba(105,226,255,0.08); }
    }
    .option-monter-card:has(.option-monter-checkbox:checked) { border-color: #22c55e; background: rgba(34,197,94,0.08); }
    .option-monter-icon { font-size: 2rem; flex-shrink: 0; }
    .option-monter-text { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
    .option-monter-title { font-weight: 600; font-size: 0.95rem; color: var(--text); }
    .option-monter-desc { font-size: 0.8rem; color: var(--text-muted); }
    .option-monter-price { font-weight: 700; font-size: 1rem; color: #22c55e; }
    .option-monter-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
    .option-monter-card::after {
      content: '';
      width: 22px; height: 22px;
      border: 2px solid var(--border);
      border-radius: 6px;
      flex-shrink: 0;
      transition: all 0.2s;
    }
    .option-monter-card:has(.option-monter-checkbox:checked)::after {
      border-color: #22c55e;
      background: #22c55e;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
      background-size: 14px;
      background-position: center;
      background-repeat: no-repeat;
    }
    .monter-details-card {
      margin: 0.5rem 1rem 0;
      padding: 0.9rem 1rem;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: rgba(15,23,42,0.96);
      box-shadow: 0 10px 30px rgba(15,23,42,0.7);
      font-size: 0.8rem;
      display: grid;
      gap: 0.6rem;
    }
    .monter-mobile-card {
      padding: 0.85rem 0.9rem;
    }
    .monter-grid {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    .monter-field {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .monter-label {
      font-size: 0.78rem;
      color: var(--text-muted);
    }
    .monter-input {
      width: 100%;
      min-height: 44px;
      border-radius: 14px;
      border: 1px solid rgba(148,163,184,0.35);
      background: rgba(15,23,42,0.98);
      color: var(--text);
      padding: 0 0.9rem;
      font-size: 0.9rem;
    }
    .monter-input::placeholder {
      color: rgba(148,163,184,0.85);
    }
    .monter-input:focus {
      outline: 2px solid var(--color-primary, #00d4ff);
      outline-offset: 2px;
      border-color: var(--primary-light);
      box-shadow: 0 0 0 1px rgba(56,189,248,0.6);
    }
    .monter-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
    }
    .monter-switch {
      position: relative;
      display: inline-flex;
      width: 38px;
      height: 20px;
    }
    .monter-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .monter-switch-slider {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background: rgba(15,23,42,1);
      border-radius: 999px;
      border: 1px solid var(--border);
      transition: background 0.2s, border-color 0.2s;
    }
    .monter-switch-slider::before {
      content: '';
      position: absolute;
      height: 14px;
      width: 14px;
      left: 2px;
      top: 2px;
      border-radius: 999px;
      background: var(--text-muted);
      transition: transform 0.2s, background 0.2s;
    }
    .monter-switch input:checked + .monter-switch-slider {
      background: rgba(34,197,94,0.18);
      border-color: #22c55e;
    }
    .monter-switch input:checked + .monter-switch-slider::before {
      transform: translateX(16px);
      background: #22c55e;
    }
    .monter-confirm {
      display: flex;
      align-items: flex-start;
      gap: 0.45rem;
      font-size: 0.8rem;
      color: var(--text-muted);
    }
    .monter-confirm input {
      margin-top: 2px;
    }
    .monter-info {
      display: flex;
      align-items: flex-start;
      gap: 0.4rem;
      padding: 0.55rem 0.75rem;
      border-radius: 10px;
      background: rgba(15,23,42,0.98);
      border-left: 3px solid var(--primary-light);
      font-size: 0.78rem;
      color: var(--text-muted);
    }
    .monter-info-icon {
      font-size: 0.9rem;
      opacity: 0.9;
    }
    .monter-info-text {
      margin: 0;
      line-height: 1.4;
    }
    .monter-warning {
      margin: 0;
      margin-top: 0.2rem;
      font-size: 0.72rem;
      color: #f97316;
    }
    .monter-hint {
      display: block;
      margin-top: 0.2rem;
      font-size: 0.72rem;
    }
    .monter-photo-hint--error {
      color: #dc2626;
      font-size: 0.85rem;
      animation: monter-photo-error-in 0.25s ease-out;
    }
    @keyframes monter-photo-error-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .picker-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 14px;
      border-radius: 14px;
      border: 1px solid rgba(120, 200, 255, 0.35);
      background: rgba(255, 255, 255, 0.03);
      color: inherit;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      touch-action: manipulation;
    }
    .picker-row:focus-visible {
      outline: 2px solid var(--color-primary, #00d4ff);
      outline-offset: 2px;
    }
    .picker-row:active {
      transform: translateY(1px);
    }
    .picker-row-title {
      opacity: 0.9;
      font-size: 13px;
    }
    .picker-row-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .picker-row-value {
      font-size: 15px;
      font-weight: 600;
    }
    .picker-row-chevron {
      opacity: 0.6;
      font-size: 18px;
      line-height: 1;
    }
    .picker-label {
      color: var(--text-muted);
      font-size: 0.8rem;
    }
    .picker-value {
      font-weight: 600;
      font-size: 0.9rem;
    }
    .monter-photo-input {
      display: none;
    }
    .monter-photo-block {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }
    .photo-btn {
      align-self: flex-start;
      padding: 0.6rem 0.95rem;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(15,23,42,0.98);
      color: var(--text);
      font-size: 0.85rem;
      cursor: pointer;
    }
    .photo-btn:active {
      opacity: 0.9;
    }
    .photo-preview {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.15rem;
    }
    .photo-thumb {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.25rem 0.45rem;
      border-radius: 999px;
      background: rgba(15,23,42,0.98);
      border: 1px solid var(--border);
    }
    .photo-thumb img {
      width: 64px;
      height: 40px;
      object-fit: cover;
      border-radius: 6px;
    }
    .photo-remove-btn {
      border: none;
      background: transparent;
      color: var(--text-muted);
      font-size: 0.75rem;
      cursor: pointer;
    }
    .wheel-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15,23,42,0.65);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 1200;
    }
    .wheel-sheet {
      position: fixed;
      left: 50%;
      right: auto;
      bottom: 0;
      width: 100%;
      max-width: 420px;
      transform: translate(-50%, 100%);
      background: rgba(15,23,42,0.99);
      border-radius: 18px 18px 0 0;
      box-shadow: 0 -18px 40px rgba(15,23,42,0.9);
      padding: 0.75rem 1rem 1rem;
      z-index: 1201;
      opacity: 0;
      transition: transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.18s ease-out;
    }
    .wheel-sheet.open {
      transform: translate(-50%, 0);
      opacity: 1;
    }
    .wheel-handle {
      width: 40px;
      height: 4px;
      border-radius: 999px;
      background: rgba(148,163,184,0.45);
      margin: 0 auto 0.6rem;
    }
    .wheel-title {
      text-align: center;
      font-size: 0.95rem;
      font-weight: 600;
      margin-bottom: 0.6rem;
    }
    .wheel-container {
      position: relative;
      height: 180px;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      scroll-snap-type: y mandatory;
      padding: 0.5rem 0;
      margin: 0 -0.5rem;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .wheel-container::-webkit-scrollbar {
      display: none;
    }
    .wheel {
      padding: 40px 0;
    }
    .wheel-item {
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      scroll-snap-align: center;
      font-size: 0.95rem;
      color: var(--text-muted);
    }
    .wheel-item.active {
      color: var(--text);
      font-weight: 600;
    }
    .wheel-highlight {
      position: absolute;
      left: 1.5rem;
      right: 1.5rem;
      top: 50%;
      height: 32px;
      transform: translateY(-50%);
      border-radius: 999px;
      border: 1px solid var(--primary-light);
      pointer-events: none;
    }
    .wheel-actions {
      display: flex;
      justify-content: space-between;
      gap: 0.75rem;
      margin-top: 0.75rem;
    }
    .wheel-btn {
      flex: 1;
      min-height: 40px;
      border-radius: 999px;
      font-size: 0.9rem;
      cursor: pointer;
    }
    .wheel-btn.ghost {
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text-muted);
    }
    .wheel-btn.primary {
      border: none;
      background: #22c55e;
      color: var(--text-primary);
      font-weight: 600;
    }
    .photo-sheet {
      position: fixed;
      left: 50%;
      right: auto;
      bottom: 0;
      width: 100%;
      max-width: 420px;
      transform: translate(-50%, 100%);
      background: rgba(15,23,42,0.99);
      border-radius: 18px 18px 0 0;
      box-shadow: 0 -18px 40px rgba(15,23,42,0.9);
      padding: 0.75rem 1rem max(1.25rem, env(safe-area-inset-bottom));
      z-index: 1201;
      opacity: 0;
      transition: transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.18s ease-out;
    }
    .photo-sheet.open {
      transform: translate(-50%, 0);
      opacity: 1;
    }
    .photo-actions {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-top: 0.5rem;
    }
    .photo-action-btn {
      width: 100%;
      min-height: 48px;
      padding: 0 1rem;
      border-radius: 14px;
      font-size: 1rem;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .photo-action-btn.primary {
      border: none;
      background: #22c55e;
      color: var(--text-primary);
      font-weight: 600;
    }
    .photo-action-btn.ghost {
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text);
    }
    .photo-action-btn.muted {
      border: none;
      background: transparent;
      color: var(--text-muted);
    }
    .monter-grid--two {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .bottom-sheet .action-bar {
      display: flex;
      gap: 0.5rem;
      padding: 1rem;
      padding-bottom: max(1rem, env(safe-area-inset-bottom), var(--keyboard-cta-gap, 0));
      background: white;
      border-top: 1px solid var(--border);
      position: sticky;
      bottom: 0;
    }
    .cta-sticky-wrap {
      position: sticky;
      bottom: 0;
      padding: 1rem 0;
      padding-bottom: max(1rem, env(safe-area-inset-bottom), var(--keyboard-cta-gap, 0));
      background: var(--card);
      margin: 0 -1.25rem -1rem;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
    .bottom-sheet .btn-select { flex: 1; background: #22c55e; padding: 1rem; font-size: 1rem; font-weight: 600; border-radius: var(--radius); border: none; color: white; cursor: pointer; font-family: inherit; transition: transform 80ms ease-out; transform-origin: center; -webkit-tap-highlight-color: transparent; }
    .bottom-sheet .btn-select:active { opacity: 0.9; }
    .search-hero .btn-continuer-hero { width: 100%; margin-top: 1.25rem; padding: 1rem 1.25rem; font-size: 1rem; font-weight: 600; border-radius: 999px; box-shadow: 0 4px 14px rgba(105,226,255,0.35); -webkit-tap-highlight-color: transparent; }
    .search-hero .btn-continuer-hero:active { opacity: 0.92; }
    .raison-sheet-header { padding: 1.25rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
    .raison-sheet-list { padding: 0.75rem; max-height: 55vh; overflow-y: auto; }
    .raison-sheet-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 2px solid var(--border); border-radius: var(--radius); margin-bottom: 0.5rem; cursor: pointer; background: var(--card); transition: all 0.2s, transform 80ms ease-out; transform-origin: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    button.raison-sheet-item { width: 100%; text-align: left; font: inherit; color: inherit; box-sizing: border-box; }
    .raison-sheet-item:active, .raison-sheet-item.touch-press { opacity: 0.92; }
    .rappel-menu-btn {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,0.6);
      background: rgba(15,23,42,0.9);
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .rappel-menu-btn:active { opacity: 0.85; }
    @media (hover: hover) {
      .raison-sheet-item:hover { border-color: var(--primary); background: rgba(105,226,255,0.08); }
    }
    .raison-sheet-item.selected { border-color: var(--primary); background: rgba(105,226,255,0.12); }
    .raison-sheet-item .raison-icon { font-size: 1.5rem; flex-shrink: 0; width: 40px; text-align: center; }
    .raison-sheet-item .raison-text { flex: 1; font-size: 0.95rem; color: var(--text); }
    .raison-sheet-item .raison-check { font-size: 1.25rem; color: #22c55e; flex-shrink: 0; display: none; }
    .raison-sheet-item.selected .raison-check { display: block; }
    .raison-sheet-item-danger .raison-text { color: #ef4444; }
    .raison-sheet-autre { padding: 1rem 1.25rem; margin-top: 0.5rem; display: none; }
    .raison-sheet-autre.show { display: block; }
    .raison-sheet-autre input { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 1rem; box-sizing: border-box; }
    .raison-sheet-confirm { padding: 1rem 1.25rem; border-top: 1px solid var(--border); background: var(--card); }
    .raison-sheet-confirm .btn { width: 100%; padding: 1rem; font-size: 1rem; font-weight: 600; }
    .raison-sheet-confirm .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .bottom-sheet .btn-schedule { width: 52px; height: 52px; background: #22c55e; border-radius: var(--radius); border: none; color: white; cursor: pointer; font-size: 1.25rem; transition: transform 80ms ease-out; transform-origin: center; -webkit-tap-highlight-color: transparent; }
    .bottom-sheet .btn-schedule:active { opacity: 0.9; }
    .planifie-heure-trigger {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.5rem 1rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 999px;
      font-size: 0.95rem;
      min-width: 140px;
      text-align: center;
      color: var(--text);
      cursor: pointer;
      gap: 0.5rem;
    }
    .planifie-heure-trigger { transition: transform 80ms ease-out; transform-origin: center; -webkit-tap-highlight-color: transparent; }
    .planifie-heure-trigger:active { opacity: 0.9; }
    @media (hover: hover) {
      .planifie-heure-trigger:hover { border-color: var(--primary); background: rgba(105,226,255,0.08); }
    }
    .planifie-heure-trigger .placeholder { color: var(--text-muted); }
    .planifie-heure-trigger .clock-icon { font-size: 1rem; opacity: 0.8; }
    .time-picker-sheet .time-picker-panel {
      background: var(--card);
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      padding: 0 0 1.5rem;
      max-height: 45vh;
    }
    .time-picker-sheet .time-picker-header {
      padding: 1rem 1.25rem;
      border-bottom: 1px solid var(--border);
      font-weight: 600;
      font-size: 1rem;
      color: var(--text);
      text-align: center;
    }
    .time-picker-wheels {
      display: flex;
      justify-content: center;
      align-items: stretch;
      gap: 0.5rem;
      padding: 1rem 1.5rem;
      position: relative;
    }
    .time-picker-highlight {
      position: absolute;
      left: 1.5rem;
      right: 1.5rem;
      top: 50%;
      transform: translateY(-50%);
      height: 44px;
      border: 2px solid var(--primary);
      border-radius: var(--radius);
      background: rgba(105,226,255,0.08);
      pointer-events: none;
      z-index: 1;
    }
    .time-picker-col {
      flex: 1;
      max-width: 80px;
      position: relative;
      height: 220px;
      overflow: hidden;
    }
    .time-picker-col::before, .time-picker-col::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      height: 88px;
      pointer-events: none;
      z-index: 2;
    }
    .time-picker-col::before {
      top: 0;
      background: linear-gradient(to bottom, var(--card) 20%, transparent);
    }
    .time-picker-col::after {
      bottom: 0;
      background: linear-gradient(to top, var(--card) 20%, transparent);
    }
    .time-picker-col-inner {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      scroll-snap-type: y mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
    }
    .time-picker-col-inner::-webkit-scrollbar { display: none; }
    .time-picker-item {
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      font-weight: 500;
      color: var(--text);
      scroll-snap-align: center;
      scroll-snap-stop: always;
      -webkit-tap-highlight-color: transparent;
    }
    .time-picker-item.spacer { color: transparent; }
    .time-picker-actions {
      display: flex;
      gap: 0.75rem;
      padding: 0 1.25rem;
    }
    .time-picker-actions .btn { flex: 1; }
    .vehicle-select-visual { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
    .vehicle-img-card {
      flex: 1;
      border: 2px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      flex-direction: column;
    }
    .vehicle-img-card:hover { border-color: var(--primary-light); }
    .vehicle-img-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(105,226,255,0.3); }
    .vehicle-3d {
      width: 100%;
      height: 100px;
      background: #d4d4d4;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.5rem;
      overflow: hidden;
      position: relative;
    }
    .vehicle-3d::after {
      content: '';
      position: absolute;
      top: 8%;
      right: 5%;
      width: 18%;
      height: 22%;
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      pointer-events: none;
      border-radius: 4px;
    }
    .vehicle-3d img,
    .vehicle-3d svg {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .address-autocomplete { position: relative; overflow: visible; }
    .address-suggestions {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      max-height: 200px;
      overflow-y: auto;
      z-index: 9999;
      margin-top: 4px;
      display: none;
    }
    .address-suggestions.show { display: block; }
    .stops-container { margin-bottom: 0.5rem; }
    .stop-row {
      display: flex;
      align-items: flex-start;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }
    .stop-row .form-group { flex: 1; margin-bottom: 0; }
    .stop-row .btn-remove-stop {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: var(--bg-card);
      color: var(--text-muted);
      cursor: pointer;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1.75rem;
    }
    .stop-row .btn-remove-stop:hover { background: rgba(239,68,68,0.15); color: #ef4444; border-color: #ef4444; }
    .btn-add-stop {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 2px dashed var(--border);
      border-radius: var(--radius);
      background: transparent;
      color: var(--primary);
      font-size: 0.95rem;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.2s;
    }
    .btn-add-stop:hover { border-color: var(--primary); background: rgba(105,226,255,0.08); }
    .distance-badge {
      font-size: 0.8rem;
      color: var(--primary);
      font-weight: 500;
      margin-left: 0.5rem;
    }
    .appareil-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      margin-bottom: 0.75rem;
    }
    .appareil-item .appareil-info { flex: 1; min-width: 0; }
    .appareil-item .appareil-name { font-weight: 600; font-size: 0.95rem; }
    .appareil-item .appareil-detail { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; }
    .appareil-item .btn-retirer { padding: 0.5rem 0.75rem; font-size: 0.85rem; color: #ef4444; border-color: #ef4444; background: transparent; }
    .appareil-item .btn-retirer:hover { background: rgba(239,68,68,0.12); }
    .appareil-item.actuel { border-color: var(--primary); background: rgba(105,226,255,0.08); }
    .password-strength { margin-top: 0.5rem; }
    .strength-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
    .strength-fill { display: block; height: 100%; width: 0%; transition: width 0.2s, background 0.2s; }
    .strength-fill.faible { width: 33%; background: #ef4444; }
    .strength-fill.moyen { width: 66%; background: #f59e0b; }
    .strength-fill.fort { width: 100%; background: #22c55e; }
    .strength-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
    .address-suggestion {
      padding: 0.75rem 1rem;
      cursor: pointer;
      font-size: 0.9rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
    }
    .address-suggestion .addr-text { flex: 1; min-width: 0; }
    .address-suggestion .suggestion-km { font-size: 0.8rem; color: var(--primary); font-weight: 500; flex-shrink: 0; }
    .address-suggestion:last-child { border-bottom: none; }
    .address-suggestion:hover,
    .address-suggestion.active { background: var(--bg-card); }
    .suggestion-skeleton {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .suggestion-skeleton-line {
      height: 12px;
      background: linear-gradient(90deg, var(--border) 25%, rgba(255,255,255,0.1) 50%, var(--border) 75%);
      background-size: 200% 100%;
      animation: skeleton-shimmer 1.2s ease-in-out infinite;
      border-radius: 4px;
      flex: 1;
    }
    .suggestion-skeleton-line.km { flex: 0; width: 36px; }
    .vehicle-img-card .vehicle-label { font-weight: 600; font-size: 0.9rem; padding: 0.5rem 0.75rem 0.2rem; }
    .vehicle-img-card .vehicle-desc { font-size: 0.75rem; color: var(--text-muted); padding: 0 0.75rem 0.5rem; }
    .map-container.leaflet-container { font-family: inherit; }
    .map-uber-style .leaflet-tile-pane {
      filter: brightness(1.02) saturate(0.92) contrast(1.05);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    [data-theme="dark"] .map-uber-style .leaflet-tile-pane { filter: brightness(0.98) saturate(0.95) contrast(1.02); }
    .map-uber-style .leaflet-control { box-shadow: none !important; }
    .map-uber-style .leaflet-control-attribution {
      font-size: 12px;
      opacity: 0.7;
      max-width: 60%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    @media (max-width: 768px) {
      .map-uber-style .leaflet-control-attribution { font-size: 12px; opacity: 0.5; }
    }
    /* ---------- DEPTH EFFECT ---------- */
    .map-uber-style { position: relative; }
    .map-uber-style .leaflet-tile {
      filter: blur(0.15px);
    }
    .map-uber-style::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at center,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.03) 45%,
        rgba(255,255,255,0.08) 100%);
    }
    [data-theme="dark"] .map-uber-style::after {
      background:
        radial-gradient(circle at center,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.25) 55%,
        rgba(0,0,0,0.45) 100%);
    }
    /* ---------- FOCUS CENTER ---------- */
    .map-uber-style .leaflet-pane {
      transition: filter .25s ease;
    }
    .map-uber-style.is-idle .leaflet-pane {
      filter: brightness(.96) saturate(.9);
    }
    /* ---------- REMOVE CITY NOISE ---------- */
    .map-uber-style .leaflet-marker-icon {
      filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
    }
    /* ---------- SMOOTH MOVEMENT ---------- */
    .leaflet-container {
      image-rendering: auto;
    }
    .leaflet-div-icon {
      background: transparent !important;
      border: none !important;
    }
    .driver-dot {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #fff;
      border: 3px solid #000;
      box-shadow: 0 4px 10px rgba(0,0,0,.25);
    }
    .driver-marker-inner {
      width: 64px;
      height: 64px;
      transform-origin: 50% 50%;
    }
    .driver-marker-inner img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transform-origin: 50% 50%;
      transition: transform 220ms ease;
      will-change: transform;
      filter:
        drop-shadow(0 2px 6px rgba(0,0,0,0.28))
        drop-shadow(0 10px 18px rgba(0,0,0,0.18));
    }
    .empty-state {
      text-align: center;
      padding: 2rem 1rem;
      color: var(--text-muted);
    }
    .empty-state span { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
    .empty-state h3 { color: var(--text); margin-bottom: 0.5rem; font-size: 1.1rem; }
    .empty-state p { font-size: 0.95rem; color: var(--text-muted); margin: 0; line-height: 1.5; }
    .suggestion-empty-state { padding: 1.5rem 1rem; text-align: center; color: var(--text-muted); }
    .suggestion-empty-state strong { display: block; color: var(--text); margin-bottom: 0.35rem; }
    @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .skeleton-line { height: 14px; background: linear-gradient(90deg, var(--border) 25%, rgba(255,255,255,0.1) 50%, var(--border) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.2s ease-in-out infinite; border-radius: 4px; margin-bottom: 0.5rem; }
    .skeleton-line.short { width: 45%; } .skeleton-line.medium { width: 70%; } .skeleton-line.long { width: 95%; }
    @keyframes skeleton-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
    .ux-highlight { animation: ux-highlight 120ms ease-out; }
    @keyframes ux-highlight { 0% { filter: brightness(1); } 50% { filter: brightness(1.15); box-shadow: 0 0 0 2px rgba(105,226,255,0.4); } 100% { filter: brightness(1); } }
    .btn-shake { animation: btn-shake 0.4s ease-out; }
    @keyframes btn-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
    .app-container.connected {
      display: flex;
      flex-direction: column;
      max-width: 100%;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      min-height: 100vh;
      min-height: 100dvh;
      overflow: hidden;
      position: relative;
    }

    /* ============ ACCUEIL : Map full screen + Bottom sheet ============ */
    #screen-accueil { position: relative; }
    #screen-accueil #map-accueil {
      position: fixed;
      inset: 0;
      height: 100vh !important;
      width: 100% !important;
      border-radius: 0 !important;
      z-index: 1;
      contain: layout paint;
    }
    #home-sheet.home-sheet {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 5;
      max-height: 88vh;
      background: var(--card);
      border-top-left-radius: 24px;
      border-top-right-radius: 24px;
      box-shadow: 0 -18px 60px rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.06);
      overflow: auto;
      transform: translateY(var(--home-sheet-y, 45vh));
      transition: transform 220ms ease;
      will-change: transform;
      -webkit-overflow-scrolling: touch;
      padding: 0 1.25rem calc(8rem + env(safe-area-inset-bottom, 0px));
    }
    .home-sheet-handle {
      flex-shrink: 0;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: grab;
      touch-action: none;
      -webkit-tap-highlight-color: transparent;
      border-bottom: 1px solid var(--border);
    }
    .home-sheet-handle::before {
      content: '';
      width: 56px;
      height: 6px;
      background: var(--primary);
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }
    [data-theme="dark"] .home-sheet-handle::before {
      background: var(--primary);
      box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    }
    #home-sheet { touch-action: none; }
    /* Permettre les taps sur la barre de recherche et « Plus tard » pour générer un clic */
    #home-sheet .dest-search-bar,
    #home-sheet .dest-search-bar * { touch-action: manipulation; }
    [data-theme="dark"] #screen-accueil .leaflet-tile-pane {
      filter: brightness(0.92) saturate(1.15) contrast(1.08);
    }
    [data-theme="dark"] #accueil-course .leaflet-tile-pane {
      filter: none;
    }
    /* Carte compacte modale Détails de la course */
    .details-course-map-wrap {
      border: 1px solid var(--border);
    }
    .details-map-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      color: var(--text-muted);
      pointer-events: none;
    }
    .details-course-map-wrap .leaflet-control-attribution { display: none !important; }
    [data-theme="dark"] .details-course-map-wrap .leaflet-tile-pane {
      filter: none;
    }
    @media (max-width: 480px) {
      .details-course-map-wrap { height: 120px !important; }
      .details-course-map-wrap #details-map { min-height: 120px !important; }
    }
    body.course-screen-visible #screen-accueil {
      contain: none;
      overflow: visible;
      padding: 0;
    }
    /* Carte course : plein écran, infos en sheet en bas */
    #accueil-course .map-course-fullscreen {
      position: fixed;
      inset: 0;
      z-index: 1;
      height: 100vh;
      width: 100%;
    }
    #accueil-course #map-course {
      position: absolute !important;
      inset: 0;
      width: 100% !important;
      height: 100% !important;
      border-radius: 0;
      z-index: 0;
    }
    #accueil-course .course-info-sheet {
      position: fixed;
      left: 0;
      right: 0;
      bottom: calc(56px + env(safe-area-inset-bottom, 0px));
      z-index: 5;
      max-height: calc(72vh - 56px - env(safe-area-inset-bottom, 0px));
      display: flex;
      flex-direction: column;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
      background: var(--card);
      border-top-left-radius: 24px;
      border-top-right-radius: 24px;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.12), 0 1px 0 0 var(--border);
      transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
      transform: translateY(var(--course-sheet-y, 28vh));
    }
    #accueil-course .course-sheet-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding-bottom: 12rem;
    }
    #accueil-course .course-info-sheet.sheet-full { --course-sheet-y: 0; }
    #accueil-course .course-info-sheet.sheet-mid { --course-sheet-y: 28vh; }
    #accueil-course .course-info-sheet.sheet-mini { --course-sheet-y: 58vh; }
    .course-sheet-handle {
      flex-shrink: 0;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: grab;
      touch-action: none;
      background: var(--card);
      border-top-left-radius: 24px;
      border-top-right-radius: 24px;
      -webkit-tap-highlight-color: transparent;
      border-bottom: 1px solid var(--border);
      padding-top: 10px;
      box-sizing: border-box;
    }
    .course-sheet-handle:active { cursor: grabbing; }
    .course-sheet-handle::before {
      content: '';
      display: block;
      width: 64px;
      height: 7px;
      background: var(--primary);
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(105, 226, 255, 0.5), 0 1px 2px rgba(0,0,0,0.15);
    }
    [data-theme="dark"] .course-sheet-handle::before {
      background: var(--primary);
      box-shadow: 0 2px 8px rgba(105, 226, 255, 0.6), 0 1px 3px rgba(0,0,0,0.3);
    }
    .map-fab {
      position: fixed;
      right: 14px;
      top: calc(env(safe-area-inset-top) + 86px);
      z-index: 6;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      background: rgba(20, 28, 44, 0.85);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 2px 12px rgba(0,0,0,0.2);
      color: var(--text-primary);
      display: grid;
      place-items: center;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      opacity: 0.85;
    }
    .map-fab:active { opacity: 0.9; }
    [data-theme="light"] .map-fab {
      background: rgba(255,255,255,0.85);
      color: #0b1424;
      border: 1px solid rgba(0,0,0,0.08);
    }

    /* =========================
       COMPACT MODE COURSE PANEL
       ========================= */
    .driver-card {
      padding: 0.7rem 0.9rem;
      gap: 0.7rem;
      margin-bottom: 0.6rem;
    }
    .driver-avatar {
      width: 44px;
      height: 44px;
      font-size: 1rem;
    }
    .driver-info h3 {
      font-size: 0.92rem;
      margin-bottom: 0;
      line-height: 1.2;
    }
    .driver-info p {
      font-size: 0.78rem;
      opacity: 0.8;
    }
    .vehicle-info {
      padding: 0.6rem;
      margin-bottom: 0.6rem;
    }
    .vehicle-info .plate {
      font-size: 1rem;
      padding: 0.35rem 0.7rem;
      letter-spacing: 2px;
    }
    .vehicle-info .model {
      font-size: 0.75rem;
      margin-top: 0.2rem;
    }
    .address-row {
      gap: 0.5rem;
    }
    .address-icon {
      width: 30px;
      height: 30px;
      font-size: 0.95rem;
    }
    .address-text strong {
      font-size: 0.68rem;
      margin-bottom: 0.1rem;
    }
    .address-text {
      font-size: 0.82rem;
      line-height: 1.25;
    }
    .status-badge {
      padding: 0.35rem 0.7rem;
      font-size: 0.78rem;
      margin-bottom: 0.5rem;
    }
    .action-buttons {
      gap: 0.5rem;
    }
    .action-buttons .btn {
      padding: 0.6rem;
      font-size: 0.85rem;
      min-height: 38px;
    }
    .card {
      padding: 1rem;
      margin-bottom: 0.8rem;
    }
    #screen-course-en-cours,
    #screen-driver-found,
    #screen-course-arrivee,
    #accueil-course {
      font-size: 0.95em;
    }
    .course-details {
      gap: 0.6rem;
    }
    .main-content {
      padding-bottom: 3.2rem;
    }
    .course-driver-vehicle-row {
      padding: 0.7rem 0.9rem !important;
      gap: 0.7rem !important;
      margin-bottom: 0.6rem !important;
    }
    /* Bloc Contact chauffeur : même placement / style que Contact client (interface chauffeur) */
    .course-contact {
      margin-top: 0;
      margin-bottom: 14px;
      border-top: 1px solid var(--border);
      padding-top: 12px;
    }
    .course-contact-title {
      margin: 0 0 8px 0;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--text-muted);
    }
    .course-contact .rubric-row {
      padding: 0.85rem 0;
    }
    .course-contact .rubric-row:first-of-type {
      border-top: none;
    }

    /* Boutons ronds Message / Appel en haut du panneau (comme interface chauffeur) */
    .course-peek-actions-wrap {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-shrink: 0;
    }
    .course-peek-actions {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
      align-items: center;
    }
    .course-peek-action-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(105, 226, 255, 0.5);
      background: rgba(105, 226, 255, 0.12);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      transition: background 0.15s, border-color 0.15s;
    }
    .course-peek-action-btn:hover,
    .course-peek-action-btn:active {
      background: rgba(105, 226, 255, 0.25);
      border-color: var(--primary);
    }
    .course-peek-action-btn:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }
    .course-addresses-compact {
      margin-bottom: 0.6rem !important;
    }
    #accueil-course .course-info-sheet .card:last-of-type {
      padding-bottom: 1rem;
      margin-bottom: 0;
    }
    .course-annuler-sticky-wrap {
      flex-shrink: 0;
      left: 0;
      right: 0;
      background: var(--card);
      padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
    }
    /* Barre fixe Total : masquée sur l'écran course (le total est dans le panneau) */
    body.course-screen-visible #course-annuler-sticky-wrap {
      display: none !important;
    }
    /* Barre fixe Total + prix estimé (Annuler est dans la barre du haut du panneau) */
    #course-annuler-sticky-wrap {
      position: fixed !important;
      left: 0 !important;
      right: 0 !important;
      margin: 0 auto;
      width: 100%;
      max-width: 420px;
      bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
      top: auto !important;
      z-index: 1001 !important;
      border-radius: 16px 16px 0 0;
      padding: 0.75rem 1.25rem 1rem;
      box-shadow: 0 -4px 24px rgba(0,0,0,0.2);
      background: var(--card) !important;
      border-top: 1px solid var(--border);
      pointer-events: auto;
    }
    [data-theme="dark"] #course-annuler-sticky-wrap {
      box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
    }
    .course-actions,
    .course-footer,
    .course-buttons-row {
      padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    }
    #screen-accueil .course-sheet,
    .course-detail-sheet,
    [class*="course-sheet"] {
      overflow-y: auto;
      max-height: 70vh;
      padding-bottom: calc(3rem + env(safe-area-inset-bottom));
    }

    /* ===== SUPPORT IA TRUCK ===== */
    .support-fab{
      position:fixed;
      right:20px;
      bottom:20px;
      width:58px;
      height:58px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:22px;
      cursor:pointer;
      background:linear-gradient(135deg,#00d4ff,#007bff);
      color: var(--text-primary);
      box-shadow:0 10px 25px rgba(0,0,0,0.4);
      z-index:9999;
    }

    .support-widget{
      position:fixed;
      right:20px;
      bottom:90px;
      width:360px;
      max-width:95%;
      height:520px;
      background: var(--bg-primary);
      border-radius:18px;
      display:none;
      flex-direction:column;
      box-shadow:0 20px 60px rgba(0,0,0,0.6);
      z-index:9999;
      overflow:hidden;
    }

    .support-widget.open{ display:flex; }

    .support-header{
      height:55px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:0 15px;
      background:#111c34;
      color: var(--text-primary);
    }

    .support-title{
      display:flex;
      align-items:center;
      gap:8px;
      font-weight:600;
    }

    .support-title .dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:#00d4ff;
      box-shadow:0 0 10px #00d4ff;
    }

    .support-messages{
      flex:1;
      padding:15px;
      overflow:auto;
    }

    .support-msg{
      padding:10px 14px;
      border-radius:16px;
      margin:8px 0;
      max-width:85%;
      font-size:14px;
    }

    .support-msg.user{
      margin-left:auto;
      background:#00d4ff33;
      color: var(--text-primary);
    }

    .support-msg.bot{
      margin-right:auto;
      background:#ffffff12;
      color: var(--text-primary);
    }

    .support-inputbar{
      display:flex;
      padding:10px;
      gap:8px;
      background:#111c34;
    }

    .support-inputbar input{
      flex:1;
      border-radius:12px;
      border:none;
      padding:10px;
      background: var(--bg-card);
      color: var(--text-primary);
    }

    .support-inputbar button{
      border:none;
      border-radius:12px;
      padding:10px 14px;
      background:#00d4ff;
      color:#000;
      cursor:pointer;
    }

/* ═══════════════════════════════
   AUTH — Connexion / Inscription
   ═══════════════════════════════ */
body.auth-screen-visible .app-header,
body.auth-screen-visible #nav-bottom,
body:has(#screen-auth.active) .app-header,
body:has(#screen-auth.active) #nav-bottom,
body.auth-check-pending .app-header,
body.auth-check-pending #nav-bottom {
  display: none !important;
}
body:not(.auth-screen-visible) #nav-bottom {
  display: flex !important;
}
body.auth-screen-visible .app-nav,
body.auth-screen-visible .bottom-nav,
body.auth-screen-visible nav,
body.auth-screen-visible [class*="nav-bar"],
body.auth-screen-visible [class*="tab-bar"],
body.auth-screen-visible [id*="nav"],
body.auth-screen-visible [id*="bottom-bar"] {
  display: none !important;
  pointer-events: none !important;
}
body.auth-screen-visible {
  overflow: hidden;
}
body:has(#screen-auth.active) .env-dev-label {
  opacity: 0.5;
  font-size: 12px;
  margin-top: 8px;
}
.screen--auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 20px 16px 32px;
  background: var(--bg);
  background-image: linear-gradient(160deg, var(--bg) 0%, var(--bg-card) 50%, var(--bg) 100%);
}
.auth-wrap {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #162032;
  border: 1.5px solid rgba(105, 226, 255, 0.25);
  border-radius: 24px;
  padding: 32px 24px 28px;
  box-shadow: 0 0 0 1px rgba(105, 226, 255, 0.08), 0 24px 48px rgba(0,0,0,0.6);
  margin: 24px 20px;
}
.auth-form[hidden] {
  display: none !important;
}
#screen-auth .auth-wrap {
  overflow-y: auto;
  max-height: 100dvh;
  padding: 24px 20px 40px;
}
.auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.auth-logo-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.auth-logo-text {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.03em;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  border-radius: 14px;
  padding: 5px;
  gap: 4px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
}
.auth-tab {
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.auth-tab:hover {
  color: var(--text);
}
.auth-tab.active {
  background: var(--accent);
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(105, 226, 255, 0.35);
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.auth-required {
  color: #ef4444;
}
.auth-input {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-input::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}
.auth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(105, 226, 255, 0.2);
  outline: 2px solid var(--color-primary, #00d4ff);
  outline-offset: 2px;
}
.auth-input--code {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.4em;
  padding: 16px;
}
.auth-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  color: #ef4444;
}
.auth-btn-primary {
  width: 100%;
  padding: 16px;
  background: var(--accent);
  color: #0f172a;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s;
  margin-top: 4px;
  box-shadow: 0 4px 14px rgba(105, 226, 255, 0.35);
}
.auth-btn-primary:hover { opacity: 0.95; }
.auth-btn-primary:active { transform: scale(0.99); opacity: 0.9; }
.auth-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.auth-btn-secondary {
  width: 100%;
  padding: 14px;
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, opacity 0.2s;
}
.auth-btn-secondary:hover {
  background: rgba(105, 226, 255, 0.08);
}
.auth-btn-secondary:active { opacity: 0.85; }
.auth-link {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px 0 0;
  margin-top: 4px;
  transition: color 0.15s;
}
.auth-link:hover {
  color: var(--accent);
}
.auth-link--forgot {
  font-size: 13px;
  margin-top: 4px;
}
.auth-forgot-msg {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(105, 226, 255, 0.08);
  border-radius: 10px;
  border: 1px solid rgba(105, 226, 255, 0.2);
}
.auth-forgot-msg a {
  color: var(--accent);
  text-decoration: none;
}
.auth-forgot-msg a:hover {
  text-decoration: underline;
}
.auth-sms-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.auth-sms-icon {
  font-size: 42px;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(105, 226, 255, 0.12);
  border-radius: 20px;
}
.auth-sms-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.auth-sms-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 280px;
}
.auth-resend-timer {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}
.auth-demo-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.7;
  margin-top: 16px;
  padding: 0 8px;
}

.nav-item[data-screen="notifications"] {
  position: relative;
}
.nav-item-icon-wrap {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 0;
  height: 0;
  display: block;
  pointer-events: none;
}
.notif-badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px var(--card);
  font-size: 0;
  line-height: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.95;
  animation: notif-pop 0.25s ease-out;
}
.notif-badge[hidden] {
  display: none !important;
}
@keyframes notif-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 0.95; }
}
.notif-center-card { margin-bottom: 0.75rem; }
.notif-center-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.notif-center-header .card-title { margin-bottom: 0; }
.notif-clear-all {
  font-size: 0.8rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  font-family: inherit;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
}
.notif-clear-all:hover { color: var(--primary); background: rgba(105,226,255,0.08); }
.notif-empty {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.notif-empty-icon { font-size: 1.8rem; opacity: 0.5; }
.notif-empty-title { font-size: 0.9375rem; font-weight: 500; margin: 0; color: var(--text); }
.notif-empty-desc { font-size: 0.8125rem; margin: 0; max-width: 280px; line-height: 1.4; }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  animation: notif-slide-in 0.25s ease;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:active { background: rgba(105,226,255,0.05); }
.notif-item.unread .notif-item-title { font-weight: 700; }
.notif-item-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--bg-card);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
  font-size: 0.875rem;
  color: var(--text);
  margin: 0 0 2px;
  line-height: 1.3;
}
.notif-item-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 2px;
  line-height: 1.4;
}
.notif-item-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.7;
}
.notif-unread-dot {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
@keyframes notif-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Chat client (FAB + panel) */
.truck-chat-fab {
  position: fixed; bottom: 100px; right: 16px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--primary, #69E2FF); border: none;
  font-size: 22px; cursor: pointer; z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.truck-chat-badge {
  position: absolute; top: -4px; right: -4px;
  background: #ef4444; color: var(--text-primary); border-radius: 50%;
  width: 18px; height: 18px; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.truck-chat-panel {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; height: 60vh;
  background: var(--bg); border-top: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 60;
  border-radius: 16px 16px 0 0;
}
.truck-chat-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 15px;
}
.truck-chat-messages {
  flex: 1; overflow-y: auto; padding: 12px 16px; display: flex;
  flex-direction: column; gap: 8px;
}
.truck-chat-msg {
  max-width: 75%; padding: 8px 12px; border-radius: 14px;
  background: var(--bg-card); font-size: 14px;
  align-self: flex-start;
}
.truck-chat-msg--self {
  background: var(--primary, #69E2FF); color: #0f172a;
  align-self: flex-end;
}
.truck-chat-input {
  display: flex; gap: 8px; padding: 10px 16px;
  border-top: 1px solid var(--border);
}
.truck-chat-input input {
  flex: 1; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 22px; padding: 10px 16px; font-size: 14px;
  color: var(--text);
}
.truck-chat-input input:focus-visible {
  outline: 2px solid var(--color-primary, #00d4ff);
  outline-offset: 2px;
}
.truck-chat-input button {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary, #69E2FF); border: none; cursor: pointer;
  font-size: 16px; color: #0f172a;
}

/* Écran notation course */
#screen-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}
.rating-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 320px;
}
.rating-emoji {
  font-size: 56px;
}
.rating-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.rating-subtitle {
  font-size: 14px;
  color: var(--text-muted);
}
.rating-stars {
  display: flex;
  gap: 12px;
}
.rating-star {
  font-size: 36px;
  background: none;
  border: none;
  color: var(--border);
  cursor: pointer;
  transition: color .15s;
}
.rating-star.active {
  color: #f59e0b;
}
#rating-comment {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  color: var(--text);
  resize: none;
}
#rating-comment:focus-visible {
  outline: 2px solid var(--color-primary, #00d4ff);
  outline-offset: 2px;
}

/* Modal paiement Stripe */
#truck-payment-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.payment-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.payment-modal-box { position: relative; background: var(--bg-card); border-radius: 16px; padding: 24px; width: 90%; max-width: 360px; display: flex; flex-direction: column; gap: 16px; }
.payment-modal-box h3 { font-size: 18px; font-weight: 700; text-align: center; }
.payment-amount { font-size: 32px; font-weight: 800; text-align: center; color: var(--primary, #69E2FF); }
.stripe-card-element { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.stripe-errors { color: #ef4444; font-size: 13px; min-height: 18px; }

/* Connexion / Inscription : afficher-masquer mot de passe */
.auth-password-wrap { position: relative; display: flex; align-items: center; }
.auth-password-wrap .auth-input { width: 100%; padding-right: 48px; box-sizing: border-box; }
.btn-toggle-password { position: absolute; right: 12px; background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; display: flex; align-items: center; border-radius: 6px; transition: color 0.15s; }
.btn-toggle-password:hover { color: var(--accent); }