/* ==========================================================================
   Autoloc — thème sombre du site public
   Chargé après autoloc.css par les layouts publics (autoloc, guest).
   L'espace client et l'administration restent clairs (ils ne chargent pas ce fichier).
   ========================================================================== */

:root {
    --al-navy: #0B0C0F;
    --al-navy-2: #16181D;
    --al-navy-line: #262A31;
    --al-accent: #C2500F;
    --al-accent-hover: #D85E17;
    --al-accent-soft: rgba(245, 154, 91, .14);
    --al-accent-on-dark: #F59A5B;
    --al-ground: #0E0F12;
    --al-surface: #16181D;
    --al-sand: #1E2127;
    --al-chip: #20232A;
    --al-line: #2A2E36;
    --al-line-soft: #23262D;
    --al-text: #F3F4F6;
    --al-text-2: #CDD1D8;
    --al-muted: #9CA3AF;
    --al-on-dark: #B8BEC9;
    --al-success: #3DD68C;
    --al-danger: #FF7A6B;
    --al-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

html { color-scheme: dark; }
body { background: var(--al-ground); }
::selection { background: var(--al-accent); color: #fff; }

/* Texte d'accent : plus clair sur fond sombre (contraste) */
.al-eyebrow, .al-link, .al-step-num, .al-stars, .al-faq-q span:last-child, .al-dash-list li::before { color: var(--al-accent-on-dark); }
a:hover { color: var(--al-accent-on-dark); }
.al-btn-primary:hover { color: #fff; }

/* Boutons */
.al-btn-dark { background: #F3F4F6; color: #0B0C0F; }
.al-btn-dark:hover { background: #fff; color: #0B0C0F; }
.al-btn-ghost:hover { border-color: var(--al-accent-on-dark); color: var(--al-accent-on-dark); }
.al-btn-danger-ghost { background: transparent; border-color: rgba(255, 122, 107, .4); }

/* Champs */
.al-input, .al-select { background: #111317; border-color: var(--al-line); color: var(--al-text); color-scheme: dark; }
.al-input::placeholder { color: #6B7280; }
.al-input:focus, .al-select:focus { border-color: var(--al-accent-on-dark); box-shadow: 0 0 0 3px rgba(245, 154, 91, .2); }
.al-check input { accent-color: var(--al-accent); }

/* Éléments qui avaient un fond blanc */
.al-badge { background: rgba(11, 12, 15, .82); color: #fff; backdrop-filter: blur(6px); }
.al-seg button, .al-quick button, .al-tabs button, .al-results-bar .al-select { background: var(--al-surface); color: var(--al-text); }
.al-seg button.is-on, .al-tabs button.is-on { background: var(--al-accent); border-color: var(--al-accent); color: #fff; }
.al-quick button:hover { border-color: var(--al-accent-on-dark); }
.al-filter-opt { background: transparent; color: var(--al-text-2); }
.al-filter-opt:hover { background: var(--al-chip); color: var(--al-text); }
.al-filter-opt.is-on, .al-legal-nav a.is-on { background: var(--al-accent-soft); border-color: rgba(245, 154, 91, .35); color: var(--al-accent-on-dark); }
.al-placeholder { color: #6B7280; }
.al-stars-input label { color: #3A3F48; }

/* Messages */
.al-flash-success { background: rgba(61, 214, 140, .1); border-color: rgba(61, 214, 140, .3); }
.al-flash-error { background: rgba(255, 122, 107, .1); border-color: rgba(255, 122, 107, .3); }
.al-badge-s.is-pending { background: rgba(245, 180, 80, .14); color: #F5B450; }
.al-badge-s.is-confirmed { background: rgba(96, 150, 255, .14); color: #8AB4FF; }
.al-badge-s.is-completed { background: rgba(61, 214, 140, .12); color: #3DD68C; }
.al-badge-s.is-cancelled { background: rgba(255, 122, 107, .12); color: #FF7A6B; }

/* Bandeaux sombres : se détachent légèrement du fond */
.al-pagehead, .al-panel-dark, .al-auth-aside { background: #121418; border-bottom: 1px solid var(--al-line-soft); }
.al-pagehead .al-input { background: #0E0F12; }
.al-band { background: #121418; }
.al-cta { background: linear-gradient(120deg, #C2500F, #8F3608); }

/* ---------- Barre d'informations ---------- */
.al-topbar { background: #08090B; border-bottom: 1px solid var(--al-line-soft); font-size: 13px; color: var(--al-muted); }
.al-topbar .al-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 9px; padding-bottom: 9px; }
.al-topbar span, .al-topbar a { display: inline-flex; align-items: center; gap: 8px; }
.al-topbar svg { color: var(--al-accent-on-dark); }
.al-topbar-group { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 640px) { .al-topbar { display: none; } }

.al-header { background: rgba(11, 12, 15, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--al-line-soft); }

/* ==========================================================================
   Accueil
   ========================================================================== */

/* Hero plein écran avec titres qui défilent */
.al-xhero { position: relative; min-height: min(86vh, 760px); display: flex; align-items: center; overflow: hidden; background: #0B0C0F; }
.al-xhero-bg { position: absolute; inset: 0; }
.al-xhero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.al-xhero-bg::after { content: ''; position: absolute; inset: 0; background:
    radial-gradient(ellipse 60% 70% at 85% 60%, rgba(194, 80, 15, .28), transparent 70%),
    linear-gradient(90deg, rgba(11, 12, 15, .96) 0%, rgba(11, 12, 15, .7) 45%, rgba(11, 12, 15, .25) 100%),
    linear-gradient(0deg, #0E0F12 0%, transparent 30%); }
.al-xhero-art { position: absolute; right: -4%; bottom: 14%; width: min(760px, 62vw); color: #2B2F37; pointer-events: none; }
.al-xhero-art .al-art-glow { color: var(--al-accent); }
.al-xhero-inner { position: relative; z-index: 1; width: 100%; padding-top: 96px; padding-bottom: 168px; }
.al-xhero-copy { max-width: 860px; display: flex; flex-direction: column; gap: 22px; }
.al-xhero h1, .al-xhero .al-h1-like { font-size: clamp(42px, 6vw, 78px) !important; }
.al-xhero h1 em { font-style: normal; color: var(--al-accent-on-dark); }
.al-xhero .al-lead { color: var(--al-on-dark); max-width: 560px; }
.al-xhero-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.al-xhero-dots { display: flex; gap: 8px; padding-top: 10px; }
.al-xhero-dots button { width: 28px; height: 4px; border-radius: 4px; border: 0; padding: 0; background: #3A3F48; cursor: pointer; transition: background .2s, width .2s; }
.al-xhero-dots button.is-on { width: 48px; background: var(--al-accent-on-dark); }
.al-slide-enter { transition: opacity .5s ease, transform .5s ease; }
.al-slide-from { opacity: 0; transform: translateY(14px); }
.al-slide-to { opacity: 1; transform: none; }
@media (max-width: 760px) { .al-xhero-inner { padding-top: 56px; padding-bottom: 150px; } .al-xhero-art { width: 120vw; right: -40%; bottom: 22%; opacity: .5; } }

.al-xsearch { margin-top: -96px; position: relative; z-index: 2; }
.al-xsearch .al-searchbar { margin-top: 0; border: 1px solid var(--al-line); background: rgba(22, 24, 29, .96); backdrop-filter: blur(12px); }
.al-xsearch-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; margin-bottom: 4px; }
.al-xsearch-head strong { font-family: var(--al-display); font-size: 20px; }

/* Bande catégories */
.al-catstrip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.al-catstrip a { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; border: 1px solid var(--al-line); border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 14px; background: var(--al-surface); transition: border-color .15s, background .15s; }
.al-catstrip a:hover { border-color: var(--al-accent-on-dark); color: var(--al-text); background: var(--al-chip); }
.al-catstrip small { color: var(--al-muted); font-weight: 600; }

/* Cartes de la flotte */
.al-fleet { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 24px; }
@media (max-width: 400px) { .al-fleet { grid-template-columns: 1fr; } }
.al-fcard { display: flex; flex-direction: column; overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; }
.al-fcard:hover { transform: translateY(-4px); border-color: #3A3F48; box-shadow: var(--al-shadow); }
.al-fcard-media { position: relative; height: 220px; background: var(--al-sand); }
.al-fcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.al-fcard:hover .al-fcard-media img { transform: scale(1.04); }
.al-fcard-body { padding: 22px; display: flex; flex-direction: column; gap: 16px; flex-grow: 1; }
.al-fcard-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.al-specs { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; font-weight: 600; color: var(--al-text-2); }
.al-specs span { display: inline-flex; align-items: center; gap: 7px; }
.al-specs svg { color: var(--al-muted); }
.al-fcard-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-top: 1px solid var(--al-line-soft); padding-top: 16px; margin-top: auto; }
.al-fcard-price { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--al-muted); }
.al-fcard-price strong { font-family: var(--al-display); font-size: 26px; color: var(--al-text); line-height: 1.1; }

/* Bande chiffres */
.al-stats { position: relative; margin-top: 112px; padding: 96px 0; overflow: hidden; background: #121418; border-top: 1px solid var(--al-line-soft); border-bottom: 1px solid var(--al-line-soft); }
.al-stats::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 80% at 10% 0%, rgba(194, 80, 15, .18), transparent 70%); }
.al-stats .al-wrap { position: relative; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.al-stats-copy { flex: 1 1 420px; display: flex; flex-direction: column; gap: 16px; }
.al-stats-copy p { margin: 0; color: var(--al-on-dark); line-height: 1.7; }
.al-stats-grid { flex: 1 1 480px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.al-stat { border: 1px solid var(--al-line); border-radius: 18px; padding: 26px; background: rgba(14, 15, 18, .6); display: flex; flex-direction: column; gap: 6px; }
.al-stat strong { font-family: var(--al-display); font-size: clamp(36px, 4vw, 52px); line-height: 1; letter-spacing: -.03em; }
.al-stat strong small { color: var(--al-accent-on-dark); font-size: .6em; }
.al-stat span { color: var(--al-muted); font-weight: 600; font-size: 14px; }

/* Atouts autour du véhicule */
.al-perks { display: grid; grid-template-columns: 1fr minmax(260px, 1.2fr) 1fr; gap: 32px; align-items: center; }
.al-perks-col { display: flex; flex-direction: column; gap: 40px; }
.al-perk { display: flex; gap: 16px; align-items: flex-start; }
.al-perks-col:first-child .al-perk { flex-direction: row-reverse; text-align: right; }
.al-perk-ico { flex: 0 0 52px; height: 52px; border-radius: 14px; background: var(--al-accent-soft); color: var(--al-accent-on-dark); display: flex; align-items: center; justify-content: center; }
.al-perk h3 { margin: 0 0 6px; font-size: 19px; font-family: var(--al-display); }
.al-perk p { margin: 0; color: var(--al-muted); line-height: 1.6; font-size: 15px; }
.al-perks-car { color: #2B2F37; }
.al-perks-car .al-art-glow { color: var(--al-accent); }
.al-perks-car img { width: 100%; height: 300px; object-fit: cover; border-radius: 24px; border: 1px solid var(--al-line); }
@media (max-width: 980px) {
    .al-perks { grid-template-columns: 1fr; }
    .al-perks-car { order: -1; max-width: 520px; margin: 0 auto; width: 100%; }
    .al-perks-col:first-child .al-perk { flex-direction: row; text-align: left; }
}

/* Étapes */
.al-steps-x { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.al-step-x { border: 1px solid var(--al-line); border-radius: 20px; padding: 28px; background: var(--al-surface); display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.al-step-x .al-step-num { font-size: 64px; opacity: .9; }
.al-step-x h3 { margin: 0; font-size: 20px; font-family: var(--al-display); }
.al-step-x p { margin: 0; color: var(--al-muted); line-height: 1.6; }

/* Bandeau d'appel final */
.al-xcta { position: relative; overflow: hidden; border-radius: 28px; padding: 64px 56px; background: linear-gradient(115deg, #1A1C21 0%, #121418 55%); border: 1px solid var(--al-line); display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: space-between; }
.al-xcta::after { content: ''; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(194, 80, 15, .45), transparent 65%); pointer-events: none; }
.al-xcta > * { position: relative; z-index: 1; }
.al-xcta-points { display: flex; flex-wrap: wrap; gap: 12px 28px; color: var(--al-text-2); font-weight: 600; font-size: 15px; }
.al-xcta-points span { display: inline-flex; align-items: center; gap: 8px; }
.al-xcta-points svg { color: var(--al-accent-on-dark); }
@media (max-width: 760px) { .al-xcta { padding: 40px 24px; } }

/* Pied de page */
.al-footer { background: #08090B; border-top: 1px solid var(--al-line-soft); }
.al-footer .al-btn { color: #fff; }
.al-footer-cta { display: inline-flex; align-items: center; gap: 10px; }