/* ─── RESET & VARIABLES ─── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:         #0d0d14;
      --bg2:        #12121f;
      --bg3:        #1a1a2e;
      --panel:      #16213e;
      --border:     #1f3460;
      --accent:     #e94560;
      --accent2:    #0f3460;
      --teal:       #00b4d8;
      --gold:       #f4a261;
      --green:      #2dc653;
      --purple:     #9b5de5;
      --text:       #e0e0f0;
      --text2:      #8888aa;
      --text3:      #7a7aa3; /* contraste 4,7:1 sur --bg (WCAG AA) — ex-#555577 était à 2,7:1, illisible */
      --font-head:  'Rajdhani', sans-serif;
      --font-mono:  'Share Tech Mono', monospace;
      --font-body:  'Inter', sans-serif;
      --radius:     8px;
      --shadow:     0 4px 24px rgba(0,0,0,.5);
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 14px;
      min-height: 100vh;
      overflow-x: hidden;
    }

    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image:
        linear-gradient(rgba(233,69,96,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(233,69,96,.04) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
      z-index: 0;
    }

    .app { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; }

    /* ─── HEADER ─── */
    header {
      background: var(--bg);
      border-bottom: 1px solid rgba(233,69,96,.25);
      padding: 0 28px;
      display: flex; align-items: center; justify-content: space-between;
      height: 68px;
      position: sticky; top: 0; z-index: 100;
      box-shadow: 0 1px 0 rgba(233,69,96,.15), 0 4px 32px rgba(0,0,0,.6);
    }
    header::after {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--teal) 70%, transparent 100%);
    }

    /* Logo CODE'ASSIST */
    .logo {
      display: flex; align-items: center; gap: 16px;
      text-decoration: none;
      user-select: none;
    }
    .logo-emblem {
      width: 44px; height: 44px;
      border: 2px solid var(--accent);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      position: relative;
      background: linear-gradient(135deg, rgba(233,69,96,.15), rgba(233,69,96,.05));
      box-shadow: 0 0 16px rgba(233,69,96,.3), inset 0 1px 0 rgba(255,255,255,.05);
      flex-shrink: 0;
    }
    .logo-emblem svg { width: 26px; height: 26px; }
    .logo-wordmark {
      display: flex; flex-direction: column; gap: 0;
      line-height: 1;
    }
    .logo-code {
      font-family: 'Bebas Neue', var(--font-head);
      font-size: 28px;
      font-weight: 400;
      letter-spacing: 6px;
      color: var(--text);
      line-height: 1;
    }
    .logo-code .apos { color: var(--accent); }
    .logo-assist {
      font-family: 'Bebas Neue', var(--font-head);
      font-size: 28px;
      font-weight: 400;
      letter-spacing: 6px;
      color: var(--accent);
      line-height: 1;
      margin-left: 1px;
    }
    .logo-sub {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 3px;
      color: var(--text3);
      text-transform: uppercase;
      margin-top: 3px;
    }
    .logo-badge {
      font-family: var(--font-mono);
      font-size: 9px;
      color: var(--teal);
      background: rgba(0,180,216,.1);
      border: 1px solid rgba(0,180,216,.25);
      border-radius: 3px;
      padding: 2px 6px;
      letter-spacing: 2px;
      align-self: flex-start;
      margin-top: 2px;
    }

    .header-right { display: flex; align-items: center; gap: 20px; }
    .header-stats { display: flex; gap: 12px; }
    .stat-pill {
      display: flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,.03);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 5px 12px;
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--text2);
    }
    .stat-pill b { color: var(--teal); font-size: 13px; }
    .stat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

    /* Status indicator */
    .conn-status {
      display: flex; align-items: center; gap: 6px;
      font-family: var(--font-mono);
      font-size: 10px;
      color: var(--text3);
      letter-spacing: 1px;
    }
    .conn-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--text3);
      transition: background .3s;
    }
    .conn-dot.online { background: var(--green); box-shadow: 0 0 6px var(--green); }
    .conn-dot.loading { background: var(--gold); animation: pulse .8s infinite; }

    /* ─── NAV ─── */
    nav {
      background: var(--bg2);
      border-bottom: 1px solid var(--border);
      padding: 0 24px;
      display: flex; gap: 0;
      overflow-x: auto;
    }
    .tab {
      padding: 14px 20px;
      font-family: var(--font-head);
      font-size: 15px; font-weight: 600;
      letter-spacing: 1px;
      color: var(--text3);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all .2s;
      display: flex; align-items: center; gap: 8px;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .tab:hover { color: var(--text2); }
    .tab.active { color: var(--accent); border-bottom-color: var(--accent); }

    /* ─── MAIN ─── */
    main { flex: 1; padding: 24px; max-width: 1280px; width: 100%; margin: 0 auto; }
    .page { display: none; }
    .page.active { display: block; }

    /* ─── CARDS ─── */
    .card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      box-shadow: var(--shadow);
    }
    .card-title {
      font-family: var(--font-head);
      font-size: 18px; font-weight: 700;
      letter-spacing: 1px;
      color: var(--text);
      margin-bottom: 16px;
      display: flex; align-items: center; gap: 8px;
      text-transform: uppercase;
    }
    .card-title::after {
      content: '';
      flex: 1; height: 1px;
      background: linear-gradient(90deg, var(--border), transparent);
      margin-left: 8px;
    }

    /* ─── CODE DÉFAUT HIGHLIGHT ─── */
    .code-defaut-highlight {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
      color: var(--gold);
      background: rgba(244,162,97,.12);
      border: 1px solid rgba(244,162,97,.3);
      border-radius: 4px;
      padding: 2px 8px;
      letter-spacing: 1px;
    }
    .code-input-wrapper { position: relative; }
    .code-input-wrapper input {
      text-transform: uppercase;
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 700;
      color: var(--gold);
      letter-spacing: 2px;
    }

    /* ─── FORMULAIRES ─── */
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    .form-group.full { grid-column: 1 / -1; }
    .form-group.col2 { grid-column: span 2; }
    label {
      font-size: 11px; font-weight: 500; letter-spacing: 1px;
      color: var(--text2); text-transform: uppercase;
      display: flex; align-items: center; gap: 6px;
    }
    label .req { color: var(--accent); }

    /* Séparateur de section dans le formulaire */
    .form-sep {
      grid-column: 1 / -1;
      display: flex; align-items: center; gap: 10px;
      font-family: var(--font-head);
      font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
      color: var(--text3); margin: 4px 0;
    }
    .form-sep::before, .form-sep::after {
      content: ''; flex: 1; height: 1px;
      background: var(--border);
    }

    input, select, textarea {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 13px;
      padding: 10px 14px;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      width: 100%;
      text-transform: uppercase;
    }
    input:focus, select:focus, textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(233,69,96,.15);
    }
    textarea { resize: vertical; min-height: 80px; }
    select option { background: var(--bg3); text-transform: none; }
    input::placeholder, textarea::placeholder { color: var(--text3); text-transform: none; }
    /* Garder select en casse normale */
    select { text-transform: none; }

    /* Chevron custom (remplace la flèche native du navigateur) */
    select {
      appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238888aa' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 32px;
      cursor: pointer;
    }

    /* Code bar cliquable */
    .code-bar-item {
      display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
      cursor: pointer;
      border-radius: 6px;
      padding: 4px 6px;
      transition: background .15s;
    }
    .code-bar-item:hover { background: rgba(244,162,97,.08); }
    .code-bar-item:hover .code-bar-label { border-color: rgba(244,162,97,.6); }

    /* ─── BOUTONS ─── */
    .btn {
      font-family: var(--font-head);
      font-size: 14px; font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 10px 24px;
      border-radius: var(--radius);
      border: none;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 8px;
      transition: all .2s;
    }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-primary:hover { background: #c73652; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(233,69,96,.4); }
    .btn-secondary { background: var(--bg3); color: var(--text); border: 1px solid var(--border); }
    .btn-secondary:hover { border-color: var(--teal); color: var(--teal); }
    .btn-teal { background: var(--teal); color: #000; }
    .btn-teal:hover { background: #0096c7; transform: translateY(-1px); }
    .btn-gold { background: rgba(244,162,97,.15); color: var(--gold); border: 1px solid rgba(244,162,97,.3); }
    .btn-gold:hover { background: rgba(244,162,97,.25); }
    .btn-sm { padding: 6px 14px; font-size: 12px; }
    .btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
    .actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

    /* ─── PAGE DIAGNOSTIC ─── */
    .diag-layout { display: grid; grid-template-columns: 420px 1fr; gap: 20px; align-items: start; }
    .diag-form-col { position: sticky; top: 88px; }
    .diag-result-col { display: flex; flex-direction: column; gap: 16px; }

    /* Badge code défaut dans le formulaire diag */
    .diag-code-preview {
      display: none;
      font-family: var(--font-mono);
      font-size: 20px;
      font-weight: 700;
      color: var(--gold);
      text-align: center;
      padding: 8px;
      background: rgba(244,162,97,.08);
      border: 1px solid rgba(244,162,97,.2);
      border-radius: 6px;
      letter-spacing: 3px;
      margin-top: 6px;
    }

    .result-box {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      min-height: 120px;
      font-family: var(--font-body);
      font-size: 13px;
      line-height: 1.8;
      color: var(--text);
      word-break: break-word;
    }
    .result-meta { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
    .badge {
      padding: 3px 10px;
      border-radius: 20px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
    }
    .badge-history  { background: rgba(0,180,216,.15);  color: var(--teal);  border: 1px solid rgba(0,180,216,.3); }
    .badge-web      { background: rgba(244,162,97,.15); color: var(--gold);  border: 1px solid rgba(244,162,97,.3); }
    .badge-ok       { background: rgba(45,198,83,.15);  color: var(--green); border: 1px solid rgba(45,198,83,.3); }
    .badge-obd      { background: rgba(100,100,255,.15);color: #9090ff;      border: 1px solid rgba(100,100,255,.3); }
    .badge-community{ background: rgba(45,198,83,.12);  color: var(--green); border: 1px solid rgba(45,198,83,.25); font-weight:600; }
    .badge-code    { background: rgba(244,162,97,.15); color: var(--gold); border: 1px solid rgba(244,162,97,.3); font-size: 13px; font-weight: 700; letter-spacing: 1px; }

    .sources-list { margin-top: 12px; }
    .sources-list a {
      display: block; color: var(--teal); font-size: 11px;
      font-family: var(--font-mono); text-decoration: none;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px;
    }
    .sources-list a:hover { text-decoration: underline; }

    .typing::after { content: '▌'; animation: blink .7s infinite; color: var(--accent); }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

    /* Markdown rendu */
    .result-box h1,.result-box h2,.result-box h3 {
      font-family: var(--font-head);
      color: var(--accent);
      font-weight: 700;
      margin: 14px 0 6px;
      letter-spacing: 1px;
    }
    .result-box h2 { font-size: 16px; }
    .result-box h3 { font-size: 14px; color: var(--teal); }
    .result-box strong { color: var(--gold); }
    .result-box code {
      font-family: var(--font-mono);
      background: rgba(244,162,97,.12);
      border: 1px solid rgba(244,162,97,.2);
      border-radius: 4px;
      padding: 1px 6px;
      color: var(--gold);
      font-size: 13px;
    }
    .result-box ul,.result-box ol { padding-left: 20px; margin: 6px 0; }
    .result-box hr { border-color: var(--border); margin: 14px 0; }
    .result-box p { margin: 6px 0; }
    .md-spacer { height: 8px; }

    /* Blocs de code triple-backtick */
    .code-block-pre {
      background: var(--bg);
      border: 1px solid var(--border);
      border-left: 3px solid var(--teal);
      border-radius: var(--radius);
      padding: 12px 16px;
      margin: 10px 0;
      overflow-x: auto;
      white-space: pre-wrap;
      word-break: break-word;
    }
    .code-block-pre code {
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--teal);
      background: none;
      border: none;
      padding: 0;
    }

    /* ─── PAGE HISTORIQUE ─── */
    .filter-bar {
      display: flex; gap: 10px; margin-bottom: 20px; align-items: center; flex-wrap: wrap;
      background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
      padding: 12px 14px;
    }
    .filter-bar input, .filter-bar select {
      max-width: 170px; border-radius: 20px; font-size: 12px; padding: 9px 16px;
    }
    .filter-bar select { padding-right: 30px; background-position: right 12px center; }
    .filter-search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 320px; }
    .filter-search-wrap .filter-search-icon {
      position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
      font-size: 13px; color: var(--text3); pointer-events: none;
    }
    .filter-search-wrap input {
      max-width: none; width: 100%; padding-left: 34px;
    }

    .panne-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }

    .panne-card {
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 18px;
      transition: border-color .2s, box-shadow .2s;
      position: relative;
    }
    /* 🛡️ Ne PAS réutiliser .statut-Ouvert/.statut-Résolu/.statut-En-cours ici (classes badge,
       voir section STATUT BADGE) — la carte porte son accent via border-left inline uniquement. */
    .panne-card.panne-network { border-color: rgba(45,198,83,.25); }
    .panne-card:hover { border-color: var(--accent); box-shadow: 0 4px 20px rgba(233,69,96,.15); }

    .panne-avatar {
      width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; background: var(--bg2); border: 1px solid var(--border);
    }
    .panne-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
    .panne-header-main { display: flex; align-items: flex-start; gap: 10px; }
    .panne-vehicule { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
    .panne-code-badge {
      font-family: var(--font-mono);
      font-size: 12px; font-weight: 700;
      color: var(--gold);
      background: rgba(244,162,97,.12);
      border: 1px solid rgba(244,162,97,.25);
      border-radius: 20px;
      padding: 2px 10px;
      letter-spacing: 1px;
      margin-top: 6px;
      display: inline-block;
    }
    .panne-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text3); margin-top: 5px; }
    .panne-meta strong { color: var(--teal); font-weight: 600; }
    .panne-id   { font-family: var(--font-mono); font-size: 10px; color: var(--text3); margin-top: 2px; }
    .panne-symptomes { color: var(--text2); font-size: 13px; margin-bottom: 8px; line-height: 1.5; }

    .statut-badge {
      display: inline-block; padding: 2px 10px;
      border-radius: 12px; font-family: var(--font-mono);
      font-size: 11px; font-weight: 600;
    }
    .statut-Ouvert   { background: rgba(233,69,96,.2);  color: var(--accent); }
    .statut-Résolu   { background: rgba(45,198,83,.2);  color: var(--green); }
    .statut-En-cours { background: rgba(244,162,97,.2); color: var(--gold); }
    .panne-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

    /* ─── STATS PAGE ─── */
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
    .stat-card {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px; text-align: center;
    }
    .stat-icon {
      width: 38px; height: 38px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; margin: 0 auto 10px;
    }
    .stat-value { font-family: var(--font-head); font-size: 38px; font-weight: 700; color: var(--accent); line-height: 1; }
    .stat-label { font-size: 12px; color: var(--text2); margin-top: 6px; text-transform: uppercase; letter-spacing: 1px; }

    .code-bar-label {
      font-family: var(--font-mono); font-size: 13px; color: var(--gold);
      background: rgba(244,162,97,.1); border: 1px solid rgba(244,162,97,.2);
      border-radius: 4px; padding: 2px 8px; width: 80px; text-align: center; flex-shrink: 0;
    }

    /* ─── TOAST ─── */
    #toast {
      position: fixed; bottom: 24px; right: 24px;
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 20px;
      font-size: 13px;
      box-shadow: var(--shadow);
      transform: translateY(80px); opacity: 0;
      transition: all .3s;
      z-index: 9999;
      display: flex; align-items: center; gap: 10px;
    }
    #toast.show { transform: translateY(0); opacity: 1; }
    #toast.success { border-left: 3px solid var(--green); }
    #toast.error   { border-left: 3px solid var(--accent); }
    #toast.info    { border-left: 3px solid var(--teal); }

    /* ─── MODAL ─── */
    .modal-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.7);
      z-index: 500;
      display: none; align-items: center; justify-content: center;
      backdrop-filter: blur(4px);
    }
    .modal-overlay.open { display: flex; }
    .modal {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      width: 90%; max-width: 640px;
      box-shadow: 0 20px 60px rgba(0,0,0,.6);
      max-height: 90vh;
      overflow-y: auto;
    }
    .modal-title {
      font-family: var(--font-head);
      font-size: 20px; font-weight: 700;
      margin-bottom: 16px; color: var(--text); letter-spacing: 1px;
    }
    .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

    /* ─── EMPTY STATE ─── */
    .empty-state { text-align: center; padding: 60px 20px; color: var(--text3); }
    .empty-state .icon { font-size: 48px; margin-bottom: 16px; }
    .empty-state p { font-size: 16px; }

    /* ─── CONFIG PAGE ─── */
    .config-section { margin-bottom: 24px; }
    .config-section p { color: var(--text2); font-size: 13px; line-height: 1.7; margin-bottom: 12px; }
    .code-block {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px 16px;
      font-family: var(--font-mono);
      font-size: 12px; color: var(--teal);
      word-break: break-all;
    }
    .step { display: flex; gap: 14px; margin-bottom: 12px; }
    .step-num {
      width: 28px; height: 28px; flex-shrink: 0;
      background: var(--accent); border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-head); font-weight: 700; font-size: 14px; color: #fff;
    }
    .step-text { color: var(--text2); font-size: 13px; line-height: 1.7; padding-top: 4px; }

    /* ─── INFO BOX ─── */
    .info-box {
      background: rgba(0,180,216,.06);
      border: 1px solid rgba(0,180,216,.2);
      border-radius: var(--radius);
      padding: 12px 16px;
      font-size: 12px; color: var(--text2); line-height: 1.7;
      margin-top: 12px;
    }
    .info-box strong { color: var(--teal); }

    /* ─── ZONE CONVERSATION SUIVI ─── */
    .conversation-history {
      display: flex; flex-direction: column; gap: 12px;
      margin-bottom: 16px;
      padding-right: 4px;
      /* Pas de max-height — la zone grandit avec le contenu, la page scrolle */
    }
    .conv-bubble {
      display: flex; gap: 10px; align-items: flex-start;
    }
    .conv-bubble.user { flex-direction: row-reverse; }
    .conv-avatar {
      width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
      background: var(--bg3); border: 1px solid var(--border);
    }
    .conv-bubble.user .conv-avatar { background: rgba(233,69,96,.15); border-color: rgba(233,69,96,.3); }
    .conv-bubble.ia  .conv-avatar { background: rgba(0,180,216,.1);  border-color: rgba(0,180,216,.25); }
    .conv-content {
      max-width: 85%;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 13px; line-height: 1.7;
      word-break: break-word;
      white-space: normal;
      overflow-wrap: break-word;
    }
    .conv-bubble.user .conv-content {
      background: rgba(233,69,96,.08);
      border-color: rgba(233,69,96,.2);
      color: var(--text);
      border-bottom-right-radius: 3px;
    }
    .conv-bubble.ia .conv-content {
      border-bottom-left-radius: 3px;
      color: var(--text);
    }
    .conv-content.loading { color: var(--text3); }
    .conv-meta {
      font-family: var(--font-mono); font-size: 10px; color: var(--text3);
      margin-top: 4px;
      text-align: right;
    }
    .conv-bubble.ia .conv-meta { text-align: left; }

    .followup-input-area textarea {
      width: 100%;
      background: var(--bg3);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      color: var(--text);
      font-family: var(--font-body);
      font-size: 13px;
      padding: 10px 14px;
      resize: vertical;
      min-height: 70px;
      outline: none;
      transition: border-color .2s;
      text-transform: uppercase;
    }
    .followup-input-area textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(233,69,96,.12);
    }
    .followup-input-area textarea::placeholder { text-transform: none; color: var(--text3); }
    .suggestion-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
    .suggestion-btns .btn {
      font-size: 11px; padding: 5px 12px;
      text-transform: none; letter-spacing: 0;
    }

    /* ─── RESPONSIVE MOBILE ─── */
    @media (max-width: 1100px) {
      .diag-layout { grid-template-columns: 360px 1fr; }
    }
    @media (max-width: 860px) {
      .diag-layout { grid-template-columns: 1fr; }
      .diag-form-col { position: static; }
      .form-grid-3 { grid-template-columns: 1fr 1fr; }
      .header-right .conn-status { display: none; }
    }

    /* ── MOBILE : < 600px ─────────────────────────────────── */
    @media (max-width: 600px) {
      /* Header compact */
      header { height: 52px; padding: 0 14px; }
      .logo-emblem { width: 34px; height: 34px; }
      .logo-code, .logo-assist { font-size: 20px; letter-spacing: 3px; }
      .logo-badge { display: none; }
      .logo-sub { display: none; }
      .header-stats { display: none; }
      .header-right .conn-status { display: none; }

      /* Nav horizontale cachée — remplacée par nav bas */
      nav { display: none; }

      /* Nav fixe en bas (style app mobile) */
      .mobile-nav {
        display: flex !important;
        position: fixed; bottom: 0; left: 0; right: 0;
        background: var(--bg2);
        border-top: 1px solid var(--border);
        z-index: 200;
        box-shadow: 0 -4px 20px rgba(0,0,0,.4);
      }
      .mobile-nav-item {
        flex: 1; display: flex; flex-direction: column; align-items: center;
        padding: 8px 4px 10px;
        font-size: 9px; font-family: var(--font-head);
        letter-spacing: 0.5px; text-transform: uppercase;
        color: var(--text3); cursor: pointer;
        transition: color .2s;
        gap: 3px;
      }
      .mobile-nav-item .nav-icon { font-size: 20px; line-height: 1; }
      .mobile-nav-item.active { color: var(--accent); }
      .mobile-nav-item.active .nav-icon { filter: drop-shadow(0 0 6px rgba(233,69,96,.5)); }

      /* Main avec padding pour la nav bas */
      main { padding: 14px 12px 80px; }

      /* Grilles */
      .form-grid { grid-template-columns: 1fr; }
      .form-grid-3 { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: 1fr 1fr; }
      .panne-grid { grid-template-columns: 1fr; }

      /* Cards plus compactes */
      .card { padding: 14px; }
      .card-title { font-size: 15px; margin-bottom: 12px; }

      /* Boutons plus grands pour les doigts */
      .btn { padding: 12px 18px; font-size: 13px; }
      .btn-sm { padding: 8px 12px; font-size: 11px; }

      /* Inputs plus grands */
      input, select, textarea {
        font-size: 16px !important; /* évite le zoom auto iOS */
        padding: 12px 14px;
      }

      /* Résultat plein écran */
      .result-box { font-size: 14px; line-height: 1.8; }

      /* Bulle suivi */
      .conv-content { max-width: 92%; font-size: 13px; }

      /* Stats grid mobile */
      .stats-grid { gap: 10px; }
      .stat-card { padding: 14px 10px; }
      .stat-value { font-size: 32px; }

      /* Panne card compact */
      .panne-card { padding: 12px; }

      /* Filter bar wrap */
      .filter-bar { flex-wrap: wrap; gap: 8px; }
      .filter-bar input, .filter-bar select { max-width: 100%; width: 100%; }

      /* Suggestions suivi */
      .followup-input-area > div { gap: 6px; }
      .followup-input-area .btn-secondary { font-size: 10px; padding: 6px 10px; }

      /* Stats charts */
      #stats-vehicule-card, #stats-vehicule-list, #stats-codes-list { overflow-x: auto; }
    }

    /* Cacher la nav mobile sur desktop */
    .mobile-nav { display: none; }
  
    /* ─── AUTH / LOGIN ─── */
    /* 🛡️ PAS de position:fixed/inset ici : #landing-page (contenu long) est un enfant
       direct. Un wrapper fixe + centré sans scroll coupait le haut ET le bas de la
       page dès que son contenu dépassait la hauteur d'écran (systématique sur mobile
       et sur beaucoup d'écrans desktop) — rendant les boutons du header et le bas de
       page (FAQ, contact, footer) totalement inaccessibles, sans aucun moyen de scroller.
       #login-panel est un vrai overlay séparé (son propre position:fixed) donc il n'est
       pas concerné par ce changement. */
    #auth-screen {
      min-height: 100vh;
      background: var(--bg);
      display: flex; align-items: center; justify-content: center;
    }
    .auth-box {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 36px 32px;
      width: 100%; max-width: 420px;
      box-shadow: 0 20px 60px rgba(0,0,0,.6);
    }
    .auth-logo {
      text-align: center; margin-bottom: 28px;
    }
    .auth-logo .logo-code { font-size: 32px; letter-spacing: 6px; }
    .auth-logo .logo-assist { font-size: 32px; letter-spacing: 6px; }
    .auth-logo p { color: var(--text3); font-size: 12px; margin-top: 6px; letter-spacing: 2px; }
    .auth-tabs {
      display: flex; margin-bottom: 24px;
      background: var(--bg3); border-radius: 8px; padding: 4px;
    }
    .auth-tab {
      flex: 1; text-align: center; padding: 8px;
      border-radius: 6px; cursor: pointer;
      font-family: var(--font-head); font-size: 14px; font-weight: 600;
      letter-spacing: 1px; color: var(--text3);
      transition: all .2s;
    }
    .auth-tab.active { background: var(--accent); color: #fff; }
    .auth-error {
      background: rgba(233,69,96,.1); border: 1px solid rgba(233,69,96,.3);
      border-radius: 6px; padding: 10px 14px;
      color: var(--accent); font-size: 12px; margin-bottom: 14px;
      display: none;
    }
    .auth-error.show { display: block; }

    /* ─── COMPTE BADGE (header) ─── */
    .account-badge {
      display: flex; align-items: center; gap: 8px;
      background: var(--bg3); border: 1px solid var(--border);
      border-radius: 8px; padding: 5px 12px; cursor: pointer;
      transition: border-color .2s;
    }
    .account-badge:hover { border-color: var(--teal); }
    .account-badge .garage-name {
      font-family: var(--font-head); font-size: 13px; font-weight: 600;
      color: var(--text); max-width: 120px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .plan-badge {
      font-family: var(--font-mono); font-size: 9px; font-weight: 700;
      padding: 2px 6px; border-radius: 4px; letter-spacing: 1px;
    }
    .plan-badge.free { background: rgba(255,255,255,.08); color: var(--text3); }
    .plan-badge.pro  { background: rgba(244,162,97,.2); color: var(--gold); border: 1px solid rgba(244,162,97,.3); }

    /* ─── COMPTEUR DIAGNOSTICS ─── */
    .diag-counter {
      display: flex; align-items: center; gap: 8px;
      font-family: var(--font-mono); font-size: 11px; color: var(--text3);
    }
    .diag-counter-bar {
      width: 60px; height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden;
    }
    .diag-counter-fill {
      height: 100%; border-radius: 2px; transition: width .3s;
      background: var(--green);
    }
    .diag-counter-fill.warn { background: var(--gold); }
    .diag-counter-fill.full { background: var(--accent); }

    /* ─── BANNER UPGRADE ─── */
    .upgrade-banner {
      background: linear-gradient(135deg, rgba(244,162,97,.15), rgba(233,69,96,.1));
      border: 1px solid rgba(244,162,97,.3);
      border-radius: 8px; padding: 14px 16px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; margin-bottom: 16px;
    }
    .upgrade-banner p { font-size: 13px; color: var(--text2); }
    .upgrade-banner strong { color: var(--gold); }

    /* ─── MODAL DÉTAIL PANNE ─── */
    #modal-detail .modal {
      position: relative;
      padding: 28px;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
    }
    #modal-detail .modal::-webkit-scrollbar { width: 6px; }
    #modal-detail .modal::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    /* Auth inputs — empêcher majuscules navigateur */
    #login-email, #reg-email,
    #login-password, #reg-password,
    #reg-garage {
      text-transform: none !important;
      font-variant: normal !important;
    }
    /* Le champ "Nom du garage" garde la casse exacte saisie */
    #reg-garage::placeholder { text-transform: none; }

    /* ─── Password Toggle (œil afficher/masquer) ─────────────── */
    .pwd-wrapper { position: relative; }
    .pwd-wrapper input {
      padding-right: 44px !important;
    }
    .pwd-toggle {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,.04);
      border: 1px solid var(--border);
      color: var(--text3);
      width: 32px;
      height: 32px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: color .2s, border-color .2s, background .2s;
    }
    .pwd-toggle:hover {
      color: var(--teal);
      border-color: rgba(0,180,216,.4);
      background: rgba(0,180,216,.08);
    }
    .pwd-toggle:active { transform: translateY(-50%) scale(.92); }
    .pwd-toggle svg { width: 18px; height: 18px; pointer-events: none; }
    /* Quand visible : œil "fermé" affiché, accent doré */
    .pwd-toggle.is-visible { color: var(--gold); border-color: rgba(244,162,97,.4); }

    /* ═══════════════════════════════════════════════════════════
       UI POLISH (Jan 2026) — animations, scrollbar, focus
       ═══════════════════════════════════════════════════════════ */

    /* Scrollbar globale stylisée (Webkit + Firefox) */
    * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
    *::-webkit-scrollbar { width: 8px; height: 8px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--border), var(--accent2));
      border-radius: 4px;
      border: 1px solid transparent;
      background-clip: padding-box;
    }
    *::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, var(--accent2), var(--accent));
      background-clip: padding-box;
    }

    /* Fade-in subtil des cartes au changement de page */
    .page.active .card,
    .page.active .stats-grid > .stat-card,
    .page.active .panne-grid > .panne-card {
      animation: cardFadeIn .35s ease-out both;
    }
    .page.active .stat-card:nth-child(2)  { animation-delay: .05s; }
    .page.active .stat-card:nth-child(3)  { animation-delay: .1s;  }
    .page.active .stat-card:nth-child(4)  { animation-delay: .15s; }
    @keyframes cardFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Focus visible accessibilité (clavier) */
    .btn:focus-visible,
    .tab:focus-visible,
    .auth-tab:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 2px;
    }

    /* Boutons : effet "press" + glow accentué */
    .btn { transition: transform .15s ease, background-color .2s, box-shadow .2s, border-color .2s, color .2s; }
    .btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }

    /* Card hover : très subtil — translation + bord accentué */
    .card { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
    .result-card-hover .card:hover { border-color: rgba(233,69,96,.35); }

    /* Stat-card hover */
    .stat-card { transition: border-color .2s, transform .2s, box-shadow .2s; cursor: default; }
    .stat-card:hover {
      border-color: rgba(0,180,216,.4);
      box-shadow: 0 6px 24px rgba(0,180,216,.08), inset 0 1px 0 rgba(255,255,255,.04);
      transform: translateY(-2px);
    }

    /* Panne-card : améliorer micro-interaction */
    .panne-card { transition: border-color .2s, box-shadow .25s, transform .2s; }
    .panne-card:hover { transform: translateY(-2px); }

    /* Tabs nav : underline animé */
    .tab { position: relative; }
    .tab::after {
      content: '';
      position: absolute; left: 50%; right: 50%; bottom: -2px;
      height: 2px; background: var(--accent);
      transition: left .25s ease, right .25s ease;
    }
    .tab:hover::after { left: 15%; right: 15%; background: var(--teal); }
    .tab.active::after { left: 0; right: 0; }

    /* Inputs : caret coloré + glow renforcé en focus */
    input, select, textarea { caret-color: var(--accent); }
    input:focus, select:focus, textarea:focus {
      box-shadow: 0 0 0 3px rgba(233,69,96,.18), 0 0 18px rgba(233,69,96,.06);
    }

    /* Toast : entrée plus douce */
    #toast { transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .25s; }

    /* Selection texte */
    ::selection { background: rgba(233,69,96,.35); color: #fff; }

    /* OAuth buttons : micro hover */
    .auth-box .btn[onclick*="loginWithGoogle"]:hover,
    .auth-box .btn[onclick*="loginWithFacebook"]:hover {
      transform: translateY(-1px);
      filter: brightness(1.05);
    }

    /* Logo hover (header desktop) — léger glow */
    .logo:hover .logo-emblem {
      box-shadow: 0 0 22px rgba(233,69,96,.55), inset 0 1px 0 rgba(255,255,255,.08);
      transition: box-shadow .25s ease;
    }

    /* Réduction de mouvement (accessibilité) */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
      }
    }

    /* ═══════════════════════════════════════════════════════════
       CONVERSION BOOST — Badge "Recommandé" + Pulse CTA Pro
       Objectif : augmenter le taux de conversion free → pro
       ═══════════════════════════════════════════════════════════ */

    /* Badge "RECOMMANDÉ" flottant, réutilisable */
    .recommended-badge {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, var(--gold) 0%, #ffd166 50%, var(--gold) 100%);
      color: #1a1300;
      font-family: var(--font-head);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      padding: 4px 14px;
      border-radius: 12px;
      text-transform: uppercase;
      box-shadow: 0 4px 12px rgba(244, 162, 97, .45), 0 0 0 1px rgba(244, 162, 97, .3);
      white-space: nowrap;
      z-index: 2;
      animation: badgeShine 3s ease-in-out infinite;
    }
    @keyframes badgeShine {
      0%, 100% { box-shadow: 0 4px 12px rgba(244, 162, 97, .45), 0 0 0 1px rgba(244, 162, 97, .3); }
      50%      { box-shadow: 0 4px 20px rgba(244, 162, 97, .75), 0 0 0 1px rgba(244, 162, 97, .5); }
    }

    /* Bouton CTA Pro avec pulse */
    .btn-pro-pulse {
      background: linear-gradient(135deg, var(--gold) 0%, #f7b878 100%) !important;
      color: #1a1300 !important;
      border: none !important;
      font-weight: 700;
      position: relative;
      overflow: hidden;
      animation: proPulse 2.2s ease-in-out infinite;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    @keyframes proPulse {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(244, 162, 97, .55), 0 4px 14px rgba(244, 162, 97, .25);
      }
      50% {
        box-shadow: 0 0 0 10px rgba(244, 162, 97, 0), 0 6px 22px rgba(244, 162, 97, .4);
      }
    }
    .btn-pro-pulse:hover {
      transform: translateY(-2px) scale(1.02);
      filter: brightness(1.08);
      box-shadow: 0 8px 24px rgba(244, 162, 97, .5), 0 0 0 4px rgba(244, 162, 97, .15) !important;
      animation-play-state: paused;
    }
    /* Effet shimmer (reflet) qui traverse le bouton */
    .btn-pro-pulse::before {
      content: '';
      position: absolute;
      top: 0;
      left: -75%;
      width: 50%;
      height: 100%;
      background: linear-gradient(120deg,
        transparent 0%,
        rgba(255,255,255,.0) 35%,
        rgba(255,255,255,.45) 50%,
        rgba(255,255,255,.0) 65%,
        transparent 100%);
      transform: skewX(-20deg);
      animation: shimmerSweep 3.5s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes shimmerSweep {
      0%   { left: -75%; }
      60%  { left: 125%; }
      100% { left: 125%; }
    }

    /* Carte tarif Pro mise en avant (pour la page À propos) */
    .pricing-card-pro {
      position: relative;
      animation: cardLift 4s ease-in-out infinite;
    }
    @keyframes cardLift {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }
    .pricing-card-pro:hover {
      animation-play-state: paused;
      border-color: rgba(244,162,97,.7) !important;
      box-shadow: 0 12px 40px rgba(244,162,97,.2), 0 0 0 1px rgba(244,162,97,.4);
      transition: border-color .25s, box-shadow .25s;
    }