/* =====================================================
   AUTO19 Track — CSS Public
   Design system AUTO19 · Plus Jakarta Sans + Inter
   ===================================================== */

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

/* ── Variables AUTO19 ─────────────────────────────── */
:root {
    /* Couleurs marque AUTO19 */
    --navy:          #0f1e3c;
    --navy-deep:     #0a1528;
    --navy-mid:      #162d52;
    --orange:        #e8500a;
    --orange-light:  #f06830;
    --orange-glow:   rgba(232,80,10,0.22);
    --orange-subtle: rgba(232,80,10,0.08);

    /* Surfaces & glass */
    --bg:            #f4f6fa;
    --bg2:           #eaeef5;
    --white:         #ffffff;
    --glass:         rgba(255,255,255,0.82);
    --glass-dark:    rgba(15,30,60,0.72);
    --glass-border:  rgba(15,30,60,0.10);
    --glass-border2: rgba(15,30,60,0.18);
    --surface:       rgba(15,30,60,0.04);
    --surface-hover: rgba(15,30,60,0.07);

    /* Texte */
    --text:          #0f1e3c;
    --text-sub:      #4a5878;
    --text-muted:    #8a96ab;
    --border:        rgba(15,30,60,0.10);

    /* États */
    --success:       #059669;
    --warning:       #d97706;
    --error:         #dc2626;
    --info:          #2563eb;

    /* Radius & shadow */
    --radius:        20px;
    --radius-sm:     12px;
    --radius-xs:     8px;
    --shadow:        0 8px 32px rgba(15,30,60,0.12);
    --shadow-lg:     0 24px 64px rgba(15,30,60,0.18);
    --shadow-orange: 0 8px 32px rgba(232,80,10,0.30);

    /* Orbs arrière-plan */
    --orb1: rgba(232,80,10,0.10);
    --orb2: rgba(15,30,60,0.08);
    --orb3: rgba(232,80,10,0.05);
    --grid-line: rgba(15,30,60,0.04);

    --navbar-bg: rgba(244,246,250,0.88);
}

/* ── Dark override ─────────────────────────────────── */
[data-theme="dark"] {
    --bg:            #080e1c;
    --bg2:           #0d1628;
    --white:         #111c35;
    --glass:         rgba(8,14,28,0.82);
    --glass-dark:    rgba(8,14,28,0.92);
    --glass-border:  rgba(255,255,255,0.07);
    --glass-border2: rgba(255,255,255,0.13);
    --surface:       rgba(255,255,255,0.04);
    --surface-hover: rgba(255,255,255,0.07);
    --text:          #e6eaf4;
    --text-sub:      #8892ab;
    --text-muted:    #4a5678;
    --border:        rgba(255,255,255,0.08);
    --shadow:        0 8px 32px rgba(0,0,0,0.40);
    --shadow-lg:     0 24px 64px rgba(0,0,0,0.55);
    --orb1: rgba(232,80,10,0.14);
    --orb2: rgba(15,30,60,0.30);
    --orb3: rgba(232,80,10,0.07);
    --grid-line: rgba(255,255,255,0.025);
    --navbar-bg: rgba(8,14,28,0.88);
}

html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background .35s, color .35s;
}

/* ── Arrière-plan animé ────────────────────────────── */
.bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .75; }
.orb-1 { width:700px; height:700px; background:radial-gradient(circle, var(--orb1), transparent 70%); top:-250px; left:-200px; animation:float1 20s ease-in-out infinite; }
.orb-2 { width:550px; height:550px; background:radial-gradient(circle, var(--orb2), transparent 70%); bottom:-120px; right:-120px; animation:float2 24s ease-in-out infinite; }
.orb-3 { width:400px; height:400px; background:radial-gradient(circle, var(--orb3), transparent 70%); top:45%; left:55%; transform:translate(-50%,-50%); animation:float3 16s ease-in-out infinite; }
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,70px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-60px,-50px)} }
@keyframes float3 { 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.15)} }

.bg-grid {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 20%, transparent 100%);
}

/* ── Logo wordmark ─────────────────────────────────── */
.logo-wordmark { display:flex; align-items:baseline; gap:0; font-family:'Plus Jakarta Sans',sans-serif; font-weight:900; line-height:1; }
.lw-auto  { font-size:1.15rem; color:var(--navy); letter-spacing:-.02em; }
.lw-19    { font-size:1.15rem; color:var(--orange); letter-spacing:-.02em; }
.lw-track { font-size:.65rem; font-weight:700; color:var(--text-muted); letter-spacing:.12em; text-transform:uppercase; margin-left:5px; align-self:center; }
[data-theme="dark"] .lw-auto { color:#e6eaf4; }

/* ── Navbar ────────────────────────────────────────── */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: var(--navbar-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    transition: background .3s;
}
.nav-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 0 24px; height: 64px;
    display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-controls { display:flex; align-items:center; gap:10px; }

/* ── Bouton thème ──────────────────────────────────── */
.theme-toggle {
    width:36px; height:36px; border-radius:10px;
    background:var(--surface); border:1px solid var(--glass-border);
    color:var(--text-sub); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s, border-color .2s;
}
.theme-toggle:hover { background:var(--surface-hover); border-color:var(--glass-border2); }
.theme-toggle svg { width:16px; height:16px; }
.icon-sun  { display:none; }
.icon-moon { display:block; }
[data-theme="dark"] .icon-sun  { display:block; }
[data-theme="dark"] .icon-moon { display:none; }

/* ── Main container ────────────────────────────────── */
main { position:relative; z-index:1; padding-top:64px; }

/* ── Hero ──────────────────────────────────────────── */
.hero {
    min-height: calc(100vh - 64px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 60px 24px 80px;
    text-align: center;
}
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--orange-subtle);
    border: 1px solid rgba(232,80,10,.20);
    color: var(--orange); border-radius: 100px;
    padding: 6px 16px; font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 24px;
}
.hero-eyebrow svg { width:13px; height:13px; }

.hero-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    font-weight: 900; line-height: 1.08;
    letter-spacing: -.04em; color: var(--text);
    margin-bottom: 20px; max-width: 720px;
}
.hero-title .accent { color: var(--orange); }
.hero-title .navy   { color: var(--navy); }
[data-theme="dark"] .hero-title .navy { color: #e6eaf4; }

.hero-sub {
    font-size: 1.05rem; color: var(--text-sub); line-height: 1.7;
    max-width: 520px; margin-bottom: 44px;
}

/* ── Carte de recherche ────────────────────────────── */
.search-card {
    width: 100%; max-width: 560px;
    background: var(--glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1.5px solid var(--glass-border2);
    border-radius: var(--radius);
    padding: 28px 28px 22px;
    box-shadow: var(--shadow-lg);
}
.search-label {
    font-size: .7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; color: var(--text-muted); margin-bottom: 12px;
    display: block;
}
.search-input-wrap {
    display: flex; align-items: center; gap: 0;
    background: var(--bg); border: 1.5px solid var(--glass-border2);
    border-radius: 14px; overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.search-input-wrap:focus-within {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(232,80,10,.12);
}
.search-icon-wrap {
    width:48px; display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); flex-shrink:0;
}
.search-icon-wrap svg { width:17px; height:17px; }
.search-input {
    flex:1; border:none; background:transparent; padding:14px 8px;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:1rem; font-weight:700;
    color:var(--text); outline:none; letter-spacing:.04em;
}
.search-input::placeholder { font-weight:500; color:var(--text-muted); font-family:'Inter',sans-serif; }
.search-btn {
    background: var(--navy); color: #fff;
    border: none; padding: 12px 22px; cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .85rem; font-weight: 800; letter-spacing: .04em;
    display: flex; align-items: center; gap: 7px;
    transition: background .2s;
    white-space: nowrap;
}
.search-btn:hover { background: var(--navy-mid); }
.search-btn svg { width:15px; height:15px; }
.search-btn-orange { background: var(--orange) !important; }
.search-btn-orange:hover { background: var(--orange-light) !important; }

.search-hint {
    font-size:.78rem; color:var(--text-muted); margin-top:14px; line-height:1.6;
    display:flex; align-items:flex-start; gap:6px;
}
.search-hint svg { width:13px; height:13px; margin-top:2px; flex-shrink:0; }

/* ── Section comment ça marche ─────────────────────── */
.how-section { padding: 80px 24px; position: relative; z-index: 1; }
.how-inner { max-width: 960px; margin: 0 auto; }
.section-eyebrow {
    display:inline-flex; align-items:center; gap:7px;
    font-size:.72rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.12em; color:var(--orange); margin-bottom:14px;
}
.section-eyebrow svg { width:13px; height:13px; }
.section-title {
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:900;
    letter-spacing:-.03em; color:var(--text); margin-bottom:10px;
}
.section-sub { font-size:.95rem; color:var(--text-sub); margin-bottom:48px; }

.steps-row {
    display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px;
    align-items: start;
}
.step-card {
    background: var(--glass); backdrop-filter:blur(16px);
    border: 1.5px solid var(--glass-border2); border-radius: var(--radius);
    padding: 28px 24px; text-align: center;
    box-shadow: var(--shadow);
    transition: transform .2s, box-shadow .2s;
}
.step-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.step-number {
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:2.2rem; font-weight:900; color:var(--orange);
    opacity:.25; margin-bottom:14px; letter-spacing:-.04em;
}
.step-icon {
    width:52px; height:52px; border-radius:14px;
    background: linear-gradient(135deg, var(--navy), var(--navy-mid));
    display:flex; align-items:center; justify-content:center;
    margin: 0 auto 16px; color:#fff;
}
.step-icon svg { width:22px; height:22px; }
.step-card h3 { font-family:'Plus Jakarta Sans',sans-serif; font-size:.95rem; font-weight:800; color:var(--text); margin-bottom:8px; }
.step-card p  { font-size:.83rem; color:var(--text-sub); line-height:1.6; }
.step-connector {
    display:flex; align-items:center; justify-content:center;
    padding-top:24px; color:var(--text-muted);
}
.step-connector svg { width:20px; height:20px; }

/* ── Features ──────────────────────────────────────── */
.features-section { padding: 0 24px 80px; position:relative; z-index:1; }
.features-grid {
    max-width:960px; margin:0 auto;
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.feature-card {
    background:var(--glass); backdrop-filter:blur(16px);
    border:1.5px solid var(--glass-border2); border-radius:var(--radius);
    padding:28px 24px; box-shadow:var(--shadow);
    transition:transform .2s, box-shadow .2s;
}
.feature-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.feature-icon {
    width:44px; height:44px; border-radius:12px;
    background:linear-gradient(135deg,var(--orange-subtle),rgba(232,80,10,.04));
    border:1px solid rgba(232,80,10,.15);
    display:flex; align-items:center; justify-content:center;
    color:var(--orange); margin-bottom:16px;
}
.feature-icon svg { width:20px; height:20px; }
.feature-card h3 { font-family:'Plus Jakarta Sans',sans-serif; font-size:.9rem; font-weight:800; color:var(--text); margin-bottom:8px; }
.feature-card p  { font-size:.82rem; color:var(--text-sub); line-height:1.6; }

/* ── Footer ────────────────────────────────────────── */
.footer {
    position:relative; z-index:1;
    background: linear-gradient(180deg, transparent, rgba(15,30,60,.04));
    border-top:1px solid var(--glass-border);
    padding:32px 24px;
}
[data-theme="dark"] .footer { background:linear-gradient(180deg,transparent,rgba(0,0,0,.15)); }
.footer-inner {
    max-width:1200px; margin:0 auto;
    display:flex; flex-direction:column; align-items:center; gap:16px;
    text-align:center;
}
.footer-links {
    display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:center;
    margin-bottom:4px;
}
.footer-links a {
    font-size:.78rem; color:var(--text-muted); text-decoration:none;
    transition:color .2s;
}
.footer-links a:hover { color:var(--orange); }
.footer-sep { color:var(--glass-border2); }
.footer-copy { font-size:.78rem; color:var(--text-muted); }
.footer-copy strong { color:var(--orange); }

/* ── Page track ────────────────────────────────────── */
.track-wrap {
    max-width: 1100px; margin: 0 auto;
    padding: 88px 24px 60px; position:relative; z-index:1;
}
.track-back {
    display:inline-flex; align-items:center; gap:7px;
    font-size:.82rem; font-weight:600; color:var(--text-sub);
    text-decoration:none; margin-bottom:28px;
    padding:8px 14px; border-radius:10px;
    background:var(--surface); border:1px solid var(--glass-border);
    transition:background .2s, color .2s;
}
.track-back:hover { background:var(--surface-hover); color:var(--text); }
.track-back svg { width:14px; height:14px; }

/* Header track */
.track-header {
    background:var(--glass); backdrop-filter:blur(20px);
    border:1.5px solid var(--glass-border2); border-radius:var(--radius);
    padding:32px 36px; margin-bottom:24px; box-shadow:var(--shadow-lg);
}
.track-header h1 {
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(1.3rem,3vw,1.8rem); font-weight:900;
    letter-spacing:-.03em; color:var(--text);
}
.track-header p { font-size:.9rem; color:var(--text-sub); margin-top:6px; }
.track-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }

.meta-pill {
    display:inline-flex; align-items:center; gap:7px;
    background:var(--surface); border:1px solid var(--glass-border);
    border-radius:100px; padding:6px 14px;
    font-size:.8rem; font-weight:500; color:var(--text-sub);
}
.meta-pill svg { width:13px; height:13px; color:var(--orange); }

/* Grille track */
.track-grid { display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start; }

/* Timeline */
.timeline-card {
    background:var(--glass); backdrop-filter:blur(20px);
    border:1.5px solid var(--glass-border2); border-radius:var(--radius);
    padding:28px 32px; box-shadow:var(--shadow);
}
.timeline-card h2 {
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:.9rem; font-weight:800; color:var(--text);
    margin-bottom:24px; text-transform:uppercase; letter-spacing:.06em;
}
.timeline { list-style:none; }
.timeline-item {
    display:flex; gap:16px; padding-bottom:24px;
}
.timeline-item:last-child { padding-bottom:0; }
.tl-dot-wrap { display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.tl-dot {
    width:14px; height:14px; border-radius:50%;
    border:2.5px solid var(--glass-border2);
    background:var(--bg); flex-shrink:0; margin-top:3px;
    transition:all .2s;
}
.tl-dot.done   { background:var(--navy); border-color:var(--navy); }
.tl-dot.active {
    background:var(--orange); border-color:var(--orange);
    box-shadow:0 0 0 4px var(--orange-glow);
    animation:pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{box-shadow:0 0 0 4px var(--orange-glow)} 50%{box-shadow:0 0 0 8px rgba(232,80,10,.10)} }
.tl-line {
    width:2px; flex:1; min-height:20px; margin-top:4px;
    background:var(--glass-border);
}
.tl-line.done { background:var(--navy); }
.tl-content { flex:1; padding-bottom:4px; }
.tl-label {
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:.88rem; font-weight:700; color:var(--text); margin-bottom:4px;
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.tl-label.active-label { color:var(--orange); }
.tl-badge-active {
    font-size:.65rem; background:var(--orange-subtle); border:1px solid rgba(232,80,10,.25);
    color:var(--orange); padding:2px 8px; border-radius:100px;
    font-family:'Inter',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.tl-desc     { font-size:.8rem; color:var(--text-sub); line-height:1.5; margin-bottom:4px; }
.tl-location { display:flex; align-items:center; gap:5px; font-size:.75rem; color:var(--text-muted); }
.tl-location svg { width:11px; height:11px; }
.tl-date     { font-size:.72rem; color:var(--text-muted); margin-top:4px; font-style:italic; }

/* Carte véhicule */
.vehicle-card {
    background:var(--glass); backdrop-filter:blur(20px);
    border:1.5px solid var(--glass-border2); border-radius:var(--radius);
    overflow:hidden; box-shadow:var(--shadow);
    position:sticky; top:80px;
}
.vehicle-img { width:100%; height:200px; object-fit:cover; display:block; }
.vehicle-img-placeholder {
    width:100%; height:200px;
    background:linear-gradient(135deg,var(--navy),var(--navy-mid));
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:12px;
    color:rgba(255,255,255,.35);
}
.vehicle-img-placeholder svg { width:48px; height:48px; }
.vehicle-img-placeholder span { font-size:.8rem; font-weight:500; }
.vehicle-body { padding:22px 20px; }
.vehicle-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.1rem; font-weight:900; color:var(--text); }
.vehicle-sub   { font-size:.8rem; color:var(--text-muted); margin-bottom:14px; }
.vehicle-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 0; border-bottom:1px solid var(--border);
    font-size:.82rem;
}
.vehicle-row:last-child { border-bottom:none; }
.vr-label { color:var(--text-muted); font-weight:500; }
.vr-val   { font-weight:700; color:var(--text); text-align:right; }

/* ── Badges statut ─────────────────────────────────── */
.status-badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 12px; border-radius:100px;
    font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
}
.status-badge svg { width:8px; height:8px; }
.status-confirmed  { background:#eff6ff; color:#1e40af; }
.status-preparing  { background:#fefce8; color:#92400e; }
.status-in_transit { background:#fff7ed; color:#c2410c; }
.status-customs    { background:#f5f3ff; color:#5b21b6; }
.status-arrived    { background:#ecfdf5; color:#065f46; }
.status-delivered  { background:#f0fdf4; color:#166534; }
[data-theme="dark"] .status-confirmed  { background:rgba(30,64,175,.20); color:#93c5fd; }
[data-theme="dark"] .status-preparing  { background:rgba(146,64,14,.20); color:#fcd34d; }
[data-theme="dark"] .status-in_transit { background:rgba(194,65,12,.20); color:#fdba74; }
[data-theme="dark"] .status-customs    { background:rgba(91,33,182,.20); color:#c4b5fd; }
[data-theme="dark"] .status-arrived    { background:rgba(6,95,70,.20);  color:#6ee7b7; }
[data-theme="dark"] .status-delivered  { background:rgba(22,101,52,.20); color:#86efac; }

/* ── Alertes ───────────────────────────────────────── */
.alert {
    display:flex; align-items:flex-start; gap:14px;
    padding:16px 20px; border-radius:var(--radius-sm);
    font-size:.875rem; line-height:1.6; margin-bottom:20px;
}
.alert svg { width:20px; height:20px; flex-shrink:0; margin-top:1px; }
.alert-error { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
[data-theme="dark"] .alert-error { background:rgba(153,27,27,.15); border-color:rgba(239,68,68,.25); color:#fca5a5; }

/* ── Bouton outline ────────────────────────────────── */
.btn-outline {
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 24px; border-radius:12px;
    background:transparent; border:1.5px solid var(--glass-border2);
    color:var(--text-sub); font-family:'Plus Jakarta Sans',sans-serif;
    font-size:.85rem; font-weight:700; cursor:pointer;
    text-decoration:none; transition:all .2s;
}
.btn-outline:hover { border-color:var(--navy); color:var(--text); }

.btn-primary {
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 24px; border-radius:12px;
    background:var(--orange); border:none; color:#fff;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:.85rem; font-weight:800;
    cursor:pointer; text-decoration:none; transition:background .2s, box-shadow .2s;
    box-shadow:var(--shadow-orange);
}
.btn-primary:hover { background:var(--orange-light); }

/* ── Pages légales ─────────────────────────────────── */
.legal-wrap {
    max-width: 860px; margin: 0 auto;
    padding: 96px 24px 80px; position:relative; z-index:1;
}
.legal-header { margin-bottom:48px; }
.legal-header .eyebrow {
    font-size:.7rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.12em; color:var(--orange); margin-bottom:12px; display:block;
}
.legal-header h1 {
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900;
    letter-spacing:-.04em; color:var(--text); margin-bottom:12px;
}
.legal-header .update {
    font-size:.8rem; color:var(--text-muted);
    display:flex; align-items:center; gap:6px;
}
.legal-body {
    background:var(--glass); backdrop-filter:blur(16px);
    border:1.5px solid var(--glass-border2); border-radius:var(--radius);
    padding:40px 44px; box-shadow:var(--shadow);
}
.legal-body h2 {
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:1.05rem; font-weight:800; color:var(--navy);
    margin:36px 0 12px; padding-top:36px;
    border-top:1px solid var(--border);
}
[data-theme="dark"] .legal-body h2 { color:#93c5fd; }
.legal-body h2:first-child { margin-top:0; padding-top:0; border-top:none; }
.legal-body h3 { font-size:.9rem; font-weight:700; color:var(--text); margin:20px 0 8px; }
.legal-body p  { font-size:.88rem; color:var(--text-sub); line-height:1.8; margin-bottom:12px; }
.legal-body ul { padding-left:20px; margin-bottom:12px; }
.legal-body li { font-size:.88rem; color:var(--text-sub); line-height:1.8; margin-bottom:4px; }
.legal-body strong { color:var(--text); font-weight:700; }
.legal-body a { color:var(--orange); text-decoration:none; }
.legal-body a:hover { text-decoration:underline; }
.legal-info-box {
    background:var(--orange-subtle); border:1px solid rgba(232,80,10,.18);
    border-radius:var(--radius-sm); padding:16px 20px; margin:20px 0;
    font-size:.84rem; color:var(--text-sub); line-height:1.7;
}
.legal-info-box strong { color:var(--orange); }
.legal-nav { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.legal-nav a {
    padding:7px 16px; border-radius:100px;
    background:var(--surface); border:1px solid var(--glass-border);
    font-size:.78rem; font-weight:600; color:var(--text-sub);
    text-decoration:none; transition:all .2s;
}
.legal-nav a:hover, .legal-nav a.active { background:var(--orange-subtle); border-color:rgba(232,80,10,.25); color:var(--orange); }

/* ── 404 ───────────────────────────────────────────── */
.not-found-page {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:24px; text-align:center; position:relative; z-index:1;
}
.not-found-code {
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:6rem; font-weight:900; color:var(--orange);
    opacity:.18; line-height:1; margin-bottom:8px;
}
.not-found-page h1 { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.6rem; font-weight:900; color:var(--text); margin-bottom:10px; }
.not-found-page p  { font-size:.9rem; color:var(--text-sub); margin-bottom:28px; }

/* ══════════════════════════════════════════════════
   RESPONSIVE — Mobile first
   ══════════════════════════════════════════════════ */

/* ── Navbar mobile ─────────────────────────────────── */
@media (max-width: 768px) {
    .nav-inner { padding: 0 16px; }
    .nav-controls { gap: 6px; }

    /* Cacher le code lang sur très petit écran */
    .a19-code { display: none; }
    .a19-lang-btn { padding: 7px 9px; }

    /* Dropdown vers la gauche si nécessaire */
    .a19-lang-drop { right: 0; min-width: 160px; }
}

/* ── Track navbar form ─────────────────────────────── */
.track-nav-form {
    display: flex; align-items: center; gap: 8px;
}
.track-nav-input {
    background: var(--surface); border: 1px solid var(--glass-border);
    border-radius: 100px; color: var(--text);
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: .8rem;
    font-weight: 600; padding: 7px 14px; outline: none;
    width: 160px; letter-spacing: .04em; transition: border-color .2s;
}
.track-nav-input:focus { border-color: var(--orange); }
.track-nav-btn {
    background: var(--navy); color: #fff; border: none;
    border-radius: 10px; padding: 7px 14px;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: .78rem;
    font-weight: 800; cursor: pointer; display: flex; align-items: center;
    gap: 5px; transition: background .2s; white-space: nowrap;
}
.track-nav-btn:hover { background: var(--navy-mid); }
.track-nav-btn svg { width: 13px; height: 13px; }
@media (max-width: 600px) {
    .track-nav-input { width: 110px; font-size: .75rem; padding: 7px 10px; }
    .track-nav-btn span { display: none; }
    .track-nav-btn { padding: 7px 10px; }
}
@media (max-width: 420px) {
    .track-nav-input { width: 80px; }
}

/* ── Hero ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero { padding: 40px 16px 60px; }
    .hero-sub { font-size: .95rem; }
    .search-card { padding: 22px 18px 18px; }
}
@media (max-width: 480px) {
    .search-btn span { display: none; }
    .search-btn { padding: 12px 14px; }
    .hero { padding: 32px 16px 48px; }
}

/* ── Steps how-section ─────────────────────────────── */
@media (max-width: 900px) {
    .steps-row { grid-template-columns: 1fr; gap: 12px; }
    .step-connector { display: none; }
    .step-card { padding: 22px 20px; }
}

/* ── Features ──────────────────────────────────────── */
@media (max-width: 900px) {
    .features-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 480px) {
    .features-section { padding: 0 16px 48px; }
    .how-section { padding: 48px 16px; }
}

/* ── Page track ────────────────────────────────────── */
@media (max-width: 900px) {
    .track-grid { grid-template-columns: 1fr; gap: 16px; }
    .vehicle-card { position: static; }
    .track-header { padding: 20px 18px; }
    .timeline-card { padding: 18px 16px; }
    .track-wrap { padding: 80px 16px 48px; }
}
@media (max-width: 480px) {
    .track-header h1 { font-size: 1.1rem; }
    .track-meta { gap: 8px; }
    .meta-pill { font-size: .72rem; padding: 5px 10px; }
    .tl-label { font-size: .82rem; }
    .track-wrap { padding: 76px 12px 40px; }
}

/* ── Pages légales ─────────────────────────────────── */
@media (max-width: 768px) {
    .legal-wrap { padding: 80px 16px 48px; }
    .legal-body { padding: 24px 18px; }
    .legal-header { margin-bottom: 28px; }
    .legal-nav { gap: 8px; }
    .legal-nav a { padding: 6px 12px; font-size: .74rem; }
}

/* ── Footer ────────────────────────────────────────── */
@media (max-width: 480px) {
    .footer { padding: 24px 16px; }
    .footer-links { gap: 6px 14px; font-size: .74rem; }
}

/* ── GTranslate : cacher widget natif + barre ──────── */
.gtranslate_wrapper { display: none !important; }
body { top: 0 !important; }
body.translated-ltr, body.translated-rtl { top: 0 !important; margin-top: 0 !important; }
.goog-te-banner-frame, iframe.goog-te-banner-frame { display: none !important; }
#goog-gt-tt, .goog-te-balloon-frame, .VIpgJd-ZVi9od-aZ2wEe { display: none !important; }

/* ── Sélecteur de langue AUTO19 ─────────────────────── */
.a19-lang { position: relative; }
.a19-lang-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--glass-border);
    color: var(--text-sub); font-family: 'Inter', sans-serif;
    font-size: .78rem; font-weight: 700; cursor: pointer;
    transition: background .2s, border-color .2s; white-space: nowrap;
    user-select: none;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.a19-lang-btn:hover { background: var(--surface-hover); border-color: var(--glass-border2); }
.a19-lang-btn svg { width: 11px; height: 11px; transition: transform .2s; flex-shrink: 0; }
.a19-lang.open .a19-lang-btn svg { transform: rotate(180deg); }
.a19-flag { font-size: .95rem; line-height: 1; }
.a19-code { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

.a19-lang-drop {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1.5px solid var(--glass-border2); border-radius: 14px;
    padding: 6px; min-width: 175px; z-index: 3000;
    box-shadow: var(--shadow-lg); animation: a19DropIn .15s ease;
}
.a19-lang.open .a19-lang-drop { display: block; }
@keyframes a19DropIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

.a19-lang-opt {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 12px; border: none;
    background: transparent; border-radius: 9px; cursor: pointer;
    color: var(--text-sub); font-family: 'Inter', sans-serif;
    font-size: .83rem; font-weight: 600;
    transition: background .15s, color .15s; text-align: left;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    min-height: 44px; /* Apple HIG minimum tap target */
}
.a19-lang-opt:hover { background: var(--surface-hover); color: var(--text); }
.a19-lang-opt.active { background: var(--orange-subtle); color: var(--orange); font-weight: 700; }
.a19-lang-opt span:first-child { font-size: .95rem; }
.a19-lang-opt span:last-child  { font-size: .83rem; }