/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Dark site and dashboard: native pickers, select popups and scrollbars draw dark too (D-m1).
   Emails don't load this file and stay light. */
:root { color-scheme: dark; }
/* Browser autofill (name, email, phone) paints a light box: keep it dark. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 40px #1C1C1E inset;
    -webkit-text-fill-color: #F5F0EB;
    caret-color: #F5F0EB;
}
/* No sideways drift on phones while scrolling (test B7): nothing may widen the page.
   clip, not hidden: hidden would break the sticky header. */
html, body { overflow-x: clip; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    background: #1C1C1E;
    color: #F5F0EB;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ===== LAYOUT ===== */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* ===== NAVBAR ===== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #1C1C1E;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
    height: 64px;
    display: flex;
    align-items: center;
}
.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.navbar-brand {
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #F5A623;
}
.brand-icon { height: 36px; width: auto; display: block; }
.brand-text { color: #F5F0EB; }
.brand-accent { color: #F5A623; }
.nav-links {
    display: flex;
    gap: 24px;
    font-size: 15px;
    font-weight: 500;
    align-items: center;
}
.nav-links a { color: #F5F0EB; transition: color 0.2s; }
.nav-links a:hover { color: #F5A623; }
.nav-links a[aria-current="page"] {
    color: #F5A623; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.nav-links a.nav-staff { color: #F5A623; }
/* Logout is a POST (Django's LogoutView), so a form whose button looks like the other links. */
.nav-logout { margin: 0; display: inline; }
.nav-logout button { background: none; border: 0; padding: 0; font: inherit; color: #F5F0EB; opacity: 0.85; cursor: pointer; transition: color 0.2s; }
.nav-logout button:hover { color: #F5A623; opacity: 1; }
.nav-links .lang-switch {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    background: rgba(245,166,35,0.15);
    color: #F5A623;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.globe-icon { vertical-align: middle; }
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}
.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #F5F0EB;
    border-radius: 2px;
}
/* open menu: the three bars become an ✕ (D-p8) */
.menu-toggle span { transition: transform 0.2s, opacity 0.2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .menu-toggle span { transition: none; } }

/* ===== HERO ===== */
.hero.hero-home {
    background: linear-gradient(rgba(28,28,30,0.55), rgba(28,28,30,0.7)), var(--hero-img) center/cover no-repeat;
}
/* 1x phones only (a media query, not image-set(): with var() an unsupported image-set drops the photo) */
@media (max-width: 600px) and (max-resolution: 1.5dppx) {
    .hero.hero-home {
        background-image: linear-gradient(rgba(28,28,30,0.55), rgba(28,28,30,0.7)), var(--hero-img-small);
    }
}
.hero {
    padding: 60px 20px 120px;
    text-align: center;
    background: linear-gradient(135deg, #2C2C2E 0%, #1C1C1E 100%);
    position: relative;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
    color: #F5F0EB;
}
.hero p {
    font-size: clamp(16px, 2.5vw, 20px);
    max-width: 600px;
    margin: 0 auto 32px;
    color: rgba(245,240,235,0.88);
}
.cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.15s, box-shadow 0.15s;
    text-decoration: none;
    min-height: 44px;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
    background: #F5A623;
    color: #1C1C1E;
    box-shadow: 0 4px 12px rgba(245,166,35,0.3);
}
.btn-outline {
    background: transparent;
    border: 2px solid #F5A623;
    color: #F5A623;
}
.btn-ghost {
    background: transparent;
    color: rgba(245,240,235,0.88);
    border: 1px solid rgba(245,240,235,0.15);
}
.btn-ghost:hover { color: #F5F0EB; border-color: rgba(245,240,235,0.3); }

/* ===== SECTIONS ===== */
.section { padding: 60px 20px; }
/* The container already gives the 20 px side gutter: a section wrapping one must not add
   another (phones had content 40 px in from each edge, D-M4). Sections without a
   container (home blocks, "Autres trajets") keep their own 20 px. */
.section:has(> .container) { padding-left: 0; padding-right: 0; }
.section-alt { background: #2C2C2E; }
/* Two plain sections in a row share one gap (else 60 + 60 px: home, Comment ça marche → Transferts populaires). */
.section:not(.section-alt) + .section:not(.section-alt) { padding-top: 0; }
.section-title {
    text-align: center;
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 700;
    margin-bottom: 40px;
}

/* ===== SERVICE CARDS ===== */
.services-grid {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}
.service-card {
    background: #2C2C2E;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}
.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.card-img {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: #F5A623;
    color: #1C1C1E;
    z-index: 1;
}
.card-body { padding: 20px; }
.card-body h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.card-body .route-info { font-size: 14px; color: rgba(245,240,235,0.82); margin-bottom: 12px; }
.card-body .price-row { display: flex; justify-content: space-between; align-items: center; }
.card-body .price { font-size: 22px; font-weight: 800; color: #F5A623; }
.card-body .price small { font-size: 13px; font-weight: 400; color: rgba(245,240,235,0.8); }
.card-body .book-link { font-size: 14px; font-weight: 600; color: #F5A623; transition: color 0.2s; } /* amber like every other link (D-p4) */
.card-body .book-link:hover { color: #FFBD55; }

/* ===== TRUST BAR ===== */
.trust-bar {
    padding: 40px 20px;
    text-align: center;
    background: #2C2C2E;
}
.trust-items {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    justify-items: center;
}
.trust-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.trust-icon { font-size: 32px; filter: brightness(1.2); }
.trust-label { font-size: 14px; font-weight: 600; }
.trust-sub { font-size: 13px; color: rgba(245,240,235,0.8); }

/* ===== FOOTER ===== */
.footer { padding: 48px 20px 24px; background: #141416; color: #F5F0EB; }
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
}
.footer-col h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; color: #F5A623; }
.footer-col h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #F5A623;
}
.footer-col p { font-size: 14px; color: rgba(245,240,235,0.88); margin-top: 8px; }
.footer-col a.footer-logo { display: inline-flex; align-items: center; gap: 10px; opacity: 1; padding: 0;
    font-size: 20px; font-weight: 800; color: #F5F0EB; }
.footer-col a.footer-rating { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    padding: 6px 12px; border: 1px solid rgba(245,240,235,0.15); border-radius: 20px;
    font-size: 13px; opacity: 1; color: #F5F0EB; }
.footer-col a.footer-rating:hover { border-color: #F5A623; }
.footer-col a.footer-rating strong { color: #F5A623; }
.footer-facts { font-size: 13px !important; color: rgba(245,240,235,0.8) !important; line-height: 1.6; }
.footer-col a { display: block; font-size: 14px; padding: 3px 0; color: rgba(245,240,235,0.88); }
.footer-col a:hover { color: #F5F0EB; }
.footer-bottom {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(245,240,235,0.1);
    font-size: 13px;
    color: rgba(245,240,235,0.75);
    text-align: center;
}
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 10px; margin: 0; }
.footer-legal a { color: rgba(245,240,235,0.88); text-decoration: underline; text-underline-offset: 2px; padding: 12px 0; }
.footer-legal a:hover { color: #F5A623; }
.footer-sep { opacity: 0.5; }
/* phones: the © line goes under the two links, no dangling separator */
@media (max-width: 600px) { .footer-legal > span:last-child { flex-basis: 100%; } .footer-legal .footer-sep:nth-of-type(2) { display: none; } }

/* ===== WHATSAPP FAB ===== */
.whatsapp-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(37,211,102,0.4);
    transition: transform 0.3s, opacity 0.3s;
    opacity: 0;
    pointer-events: none;
}
.whatsapp-fab.visible {
    opacity: 1;
    pointer-events: auto;
}
.whatsapp-fab:hover { transform: scale(1.1); }
.whatsapp-fab svg { width: 28px; height: 28px; fill: #fff; }

/* ===== BACK TO CITIES (transfers list, replaces the WhatsApp FAB there) ===== */
.back-to-cities, .to-top {
    position: fixed; bottom: 24px; left: 24px; z-index: 1000;
    width: 52px; height: 52px; border-radius: 50%;
    background: #F5A623; color: #1C1C1E;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    opacity: 0; pointer-events: none; transform: translateY(8px);
    transition: opacity 0.25s, transform 0.25s;
}
.back-to-cities.visible, .to-top.visible { opacity: 0.55; pointer-events: auto; transform: none; }
/* Left side and see-through so it never competes with the amber "Réserver" buttons;
   solid on hover (desktop) or keyboard focus. */
.back-to-cities.visible:hover, .to-top.visible:hover,
.back-to-cities.visible:focus-visible, .to-top.visible:focus-visible { opacity: 1; }
.back-to-cities:focus-visible, .to-top:focus-visible { outline: 3px solid #F5F0EB; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .back-to-cities, .to-top { transition: none; } }

/* ===== SEARCH FORM ===== */
.search-section {
    background: transparent;
    margin-top: -40px;
    position: relative;
    z-index: 10;
    padding: 0 20px 0;
}
.search-form-card {
    max-width: 1000px;
    margin: 0 auto;
    background: #2C2C2E;
    border-radius: 12px;
    padding: 24px 32px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
.search-form-card h2 {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #F5A623;
    margin-bottom: 20px;
}
.form-grid {
    display: grid;
    grid-template-columns: 2fr 2fr 1.4fr 1fr 1fr auto; /* De / À wide enough for their placeholder at 1024 (D-m11) */
    gap: 12px;
    align-items: end;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: #F5A623;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.form-group input,
.form-group select {
    background: #3A3A3C;
    border: 1px solid rgba(245,240,235,0.12);
    border-radius: 8px;
    color: #F5F0EB;
    font-size: 15px;
    padding: 12px 14px;
    min-height: 44px;
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F5A623' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.form-group input:focus,
.form-group select:focus {
    border-color: #F5A623;
}
.form-group input::placeholder,
.form-group textarea::placeholder,
.dash-search-input::placeholder { color: rgba(245,240,235,0.62); opacity: 1; }
.form-group input[type="date"]::-webkit-calendar-picker-indicator,
.form-group input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6) sepia(1) saturate(5) hue-rotate(5deg);
    cursor: pointer;
}
.form-submit { align-self: end; margin-left: 8px; }
.btn-search {
    width: 100%;
    padding: 12px 24px;
    white-space: nowrap;
}

/* ===== CARD LINK + PLACEHOLDER (shared by home/list) ===== */
.card-link { display: block; color: inherit; }
.card-link:hover { color: inherit; }
/* Shown when a route has neither its own image nor a destination image.
   Composed on purpose — reads as a design choice, not a missing asset. */
.card-img-placeholder {
    width: 100%; height: 100%;
    background:
        radial-gradient(120% 140% at 15% 0%, rgba(245,166,35,0.16) 0%, rgba(245,166,35,0) 55%),
        linear-gradient(150deg, #2C2C2E 0%, #232325 55%, #1C1C1E 100%);
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 16px;
}
.card-block-route {
    color: #F5F0EB;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.2px;
}
.card-block-arrow {
    color: #F5A623;
    margin: 0 4px;
    font-weight: 400;
}
.grid-empty {
    text-align: center; color: rgba(245,240,235,0.8);
    grid-column: 1 / -1; padding: 40px 0;
}
.grid-empty-card {
    grid-column: 1 / -1;
    background: #2C2C2E;
    border-radius: 12px;
    padding: 40px 28px;
    text-align: center;
}
.grid-empty-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.grid-empty-card p { color: rgba(245,240,235,0.85); margin-bottom: 20px; max-width: 520px; margin-left: auto; margin-right: auto; }
.empty-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.section-cta { text-align: center; margin-top: 40px; }

/* ===== PAGE HEADER (list + detail) ===== */
.page-header {
    background: linear-gradient(135deg, #2C2C2E 0%, #1C1C1E 100%);
    padding: 40px 0 32px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.page-header h1 {
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 800;
    margin-bottom: 8px;
}
.page-header .page-lead {
    font-size: 15px;
    color: rgba(245,240,235,0.85);
    max-width: 720px;
}
.breadcrumb {
    font-size: 13px;
    color: rgba(245,240,235,0.8);
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.breadcrumb a { color: #F5A623; padding: 12px 0; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { opacity: 0.5; }
.filter-clear {
    color: #F5A623;
    font-weight: 600;
    margin-left: 8px;
    text-decoration: underline;
}

/* ===== DETAIL PAGE ===== */
.route-header { display: flex; flex-direction: column; gap: 8px; }
.route-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: #F5A623;
    color: #1C1C1E;
    width: fit-content;
}
.route-summary { font-size: 15px; opacity: 0.85; }
.header-cta { display: none; }

.detail-section { padding-top: 48px; }
.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
}
.detail-main h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 32px 0 12px;
}
.detail-main h2:first-child { margin-top: 0; }
.detail-hero {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}
.detail-hero img { width: 100%; height: auto; display: block; }
.detail-hero-figure { margin: 0 0 24px; }
.detail-hero-figure .detail-hero { margin-bottom: 6px; }

/* Photo credit. Attribution is a licence condition on the CC BY / CC BY-SA
   destination photos, so it stays visible — discreet, never hidden. */
.image-credit {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.2px;
    color: rgba(245,240,235,0.78);
}
.image-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.image-credit a:hover { color: #F5A623; }
.image-credit-license::before { content: "· "; }
.detail-hero-credit { text-align: right; }
/* Dark fade under the card credit: white 11 px text was unreadable on bright sky / crowds (D-p5). */
.card-img:has(.card-credit)::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(transparent 62%, rgba(0,0,0,0.6));
}
/* On cards the credit sits over the photo: the layout has no room below it. */
.card-credit {
    position: absolute;
    right: 8px;
    bottom: 6px;
    z-index: 1;
    max-width: 85%;
    text-align: right;
    font-size: 11px;
    color: #F5F0EB;
    opacity: 0.92;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Colour-block counterpart to .detail-hero, for routes with no photo. */
.detail-hero-block {
    aspect-ratio: 21 / 9;
    min-height: 200px;
    padding: 24px;
    background:
        radial-gradient(110% 150% at 12% 0%, rgba(245,166,35,0.18) 0%, rgba(245,166,35,0) 58%),
        linear-gradient(150deg, #2C2C2E 0%, #232325 55%, #1C1C1E 100%);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}
.hero-block-route {
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 700;
    line-height: 1.25;
    color: #F5F0EB;
}
.hero-block-arrow { color: #F5A623; margin: 0 6px; font-weight: 400; }
.hero-block-meta {
    font-size: 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(245,240,235,0.8);
}
.detail-description { opacity: 0.85; line-height: 1.7; }
/* gaps that were missing (D-m6): paragraphs from |linebreaks, the accept button, decline label */
.detail-description p + p { margin-top: 12px; }
.detail-main > .detail-description { margin-bottom: 20px; }
.confirm-form { margin-top: 24px; }
.confirmation-lead + .cta-row { margin-top: 20px; }
.dash-card .dash-status-line + .booking-form { margin-top: 16px; }
.detail-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px 24px;
}
.detail-list li {
    position: relative;
    padding-left: 24px;
    opacity: 0.9;
}
.detail-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #F5A623;
    font-weight: 700;
}
/* "Non inclus": a dash, not the same tick as "Inclus" (D-m9) */
.detail-list--no li::before { content: '–'; color: rgba(245,240,235,0.8); }
.detail-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 0;
}
.detail-facts > div {
    background: #2C2C2E;
    border-radius: 8px;
    padding: 14px 18px;
}
.detail-facts dt {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #F5A623;
    margin-bottom: 4px;
}
.detail-facts dd { font-size: 16px; font-weight: 600; }
/* Booking / quote pages: one card of label | value rows, like the emails, not a box per field (D-p2). */
.detail-facts--rows { display: block; background: #2C2C2E; border-radius: 12px; padding: 4px 20px; }
.detail-facts--rows > div {
    display: grid; grid-template-columns: minmax(96px, 32%) minmax(0, 1fr); gap: 4px 16px; align-items: baseline;
    background: none; border-radius: 0; padding: 12px 0;
}
.detail-facts--rows > div + div { border-top: 1px solid rgba(245,240,235,0.1); }
.detail-facts--rows dt { margin: 0; }
.detail-facts--rows dd { overflow-wrap: anywhere; }
.detail-facts--rows dd a { color: #F5A623; text-decoration: underline; text-underline-offset: 2px; }
/* Booking recap: one card per leg, price card in lines (bookings/_summary.html) */
.summary-leg-title {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
    margin: 24px 0 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #F5A623;
}
.summary-leg-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #F5F0EB; letter-spacing: 0.5px; }
.detail-facts--price > div { grid-template-columns: minmax(0, 1fr) auto; }
.detail-facts--price dt { text-transform: none; letter-spacing: 0; font-size: 15px; color: rgba(245,240,235,0.92); }
.detail-facts--price dd { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.detail-facts--price .price-group-head dt { color: #F5A623; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: 0.6px; }
.detail-facts--price .price-sub { padding-left: 14px; }
.detail-facts--price .price-sub + .price-sub, .detail-facts--price .price-group-head + .price-sub { border-top: 0; padding-top: 0; }
.detail-facts--price .price-sub dt, .detail-facts--price .price-sub dd { font-size: 14px; font-weight: 500; color: rgba(245,240,235,0.85); }
.detail-facts--price .price-total { border-top: 2px solid rgba(245,166,35,0.5); }
.detail-facts--price .price-total dt { color: #F5F0EB; font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.6px; }
.detail-facts--price .price-total dd { color: #F5A623; font-size: 22px; font-weight: 800; }
.summary-note { margin: 12px 0 20px; font-size: 14px; color: rgba(245,240,235,0.88); }
@media (max-width: 600px) { .detail-facts--rows { padding: 2px 16px; } .detail-facts--rows > div { gap: 4px 12px; } }

.detail-aside { position: sticky; top: 84px; }
.price-card {
    background: #2C2C2E;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.price-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #F5A623;
}
.price-big {
    font-size: 40px;
    font-weight: 800;
    color: #F5A623;
    line-height: 1;
}
.price-note { font-size: 13px; color: rgba(245,240,235,0.82); margin-top: -4px; }
.price-availability {
    font-size: 13px;
    background: rgba(245,166,35,0.1);
    border-left: 3px solid #F5A623;
    padding: 8px 12px;
    border-radius: 4px;
}
.price-availability strong { color: #F5A623; }

.itinerary {
    list-style: none;
    counter-reset: step;
    padding-left: 0;
}
.itinerary li {
    counter-increment: step;
    position: relative;
    padding: 12px 0 12px 56px;
    border-left: 2px solid rgba(245,166,35,0.2);
    margin-left: 16px;
}
.itinerary li::before {
    content: counter(step);
    position: absolute;
    left: -16px;
    top: 12px;
    width: 32px;
    height: 32px;
    background: #F5A623;
    color: #1C1C1E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.itinerary-time {
    display: inline-block;
    font-weight: 700;
    color: #F5A623;
    margin-right: 12px;
    font-variant-numeric: tabular-nums;
}
.itinerary-activity { opacity: 0.9; }

/* ===== DASHBOARD ===== */
.dash-body { background: #141416; }

.dash-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #1C1C1E;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dash-header-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 4px 12px;
    flex-wrap: wrap;
    min-height: 56px;
}
.dash-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 17px;
    margin-right: auto;
}
.dash-brand-icon { width: 32px; height: 32px; display: block; }
.dash-brand-tag {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(245,240,235,0.78);
    margin-left: 4px;
}
/* Desktop: brand · nav · tools on one line. Phone: brand + tools, then the nav
   on its own full-width line that wraps instead of running off the screen. */
.dash-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; order: 2; }
.dash-tools { display: flex; align-items: center; gap: 4px; order: 3; }
.dash-nav-link, .dash-tool-link {
    padding: 10px 14px;
    border-radius: 8px;
    color: rgba(245,240,235,0.85);
    font-weight: 600;
    font-size: 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.dash-tool-link { font-size: 13px; color: rgba(245,240,235,0.8); padding: 10px; }
.dash-nav-link:hover, .dash-tool-link:hover { color: #F5F0EB; background: rgba(255,255,255,0.04); }
.dash-nav-link.is-active {
    color: #FFBD55;
    background: rgba(245,166,35,0.1);
}
.dash-logout-form { display: inline; }
.dash-logout-btn {
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(245,240,235,0.15);
    color: rgba(245,240,235,0.85);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    min-height: 44px;
}
.dash-logout-btn:hover { border-color: rgba(245,240,235,0.3); color: #F5F0EB; }
@media (max-width: 860px) {
    .dash-brand-tag { display: none; }
    .dash-tools { order: 1; }
    .dash-nav { order: 2; width: 100%; gap: 2px; margin: 0 -8px; }
    .dash-nav-link { padding: 8px 9px; font-size: 14px; min-height: 44px; }
}

/* Reply without a price: reason chips + live email preview. */
.dash-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dash-reason { position: relative; cursor: pointer; }
.dash-reason input { position: absolute; opacity: 0; pointer-events: none; }
.dash-reason span {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid rgba(245,240,235,0.2);
    color: rgba(245,240,235,0.88); font-weight: 600; font-size: 14px;
}
.dash-reason input:checked + span { border-color: #F5A623; background: rgba(245,166,35,0.12); color: #FFBD55; }
.dash-reason input:focus-visible + span { outline: 2px solid #F5A623; outline-offset: 2px; }
.dash-reply-preview { margin: 4px 0 16px; padding: 14px 16px; border-radius: 8px; background: #FAF7F3; color: #1C1C1E; font-size: 14px; line-height: 1.5; }
.dash-reply-preview-label { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #4D4D4D; margin: 0 0 8px; }
.dash-reply-preview-body p { margin: 0 0 10px; white-space: pre-line; }
.dash-reply-preview-body p:last-child { margin: 0; }
.dash-reply-preview-body .is-own { padding-left: 12px; border-left: 3px solid #F5A623; }

.dash-main { padding: 24px 0 60px; }
.dash-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 16px;
}
.dash-h1 {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 20px;
}

.dash-messages { max-width: 1140px; margin: 0 auto 16px; padding: 0 16px; }
.dash-message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}
.dash-message-success { background: rgba(46,204,113,0.12); border: 1px solid rgba(46,204,113,0.35); color: #5dd190; }
.dash-message-error { background: rgba(231,76,60,0.12); border: 1px solid rgba(231,76,60,0.35); color: #FFA396; }
.dash-message-info { background: rgba(245,166,35,0.1); border: 1px solid rgba(245,166,35,0.3); color: #F5A623; }

/* Stats grid */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}
.dash-stat {
    background: #2C2C2E;
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* An odd tile out spans the row instead of leaving a hole. */
.dash-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
a.dash-stat { color: inherit; text-decoration: none; border: 1px solid transparent; transition: border-color 0.2s; }
a.dash-stat:hover { border-color: rgba(245,166,35,0.35); }
a.dash-stat.is-active { border-color: #F5A623; }
.dash-stat-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #FFBD55;
}
.dash-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: #F5F0EB;
    line-height: 1.1;
    margin-top: 2px;
}
.dash-stat-sub { font-size: 13px; color: rgba(245,240,235,0.82); }

/* Sections */
.dash-section { margin-bottom: 32px; }
.dash-stats + .dash-section, .dash-stats + .dash-fold { margin-top: 32px; }
/* All bookings: behind a button at the end of the home page. */
.dash-fold-btn { list-style: none; cursor: pointer; }
.dash-fold-btn::-webkit-details-marker { display: none; }
.dash-fold-opened, .dash-fold[open] .dash-fold-closed { display: none; }
.dash-fold[open] .dash-fold-opened { display: inline; }
.dash-fold[open] > .dash-fold-btn { margin-bottom: 12px; }
.dash-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
}
.dash-section-head h2 { font-size: 18px; font-weight: 700; }
.dash-section-link { font-size: 14px; font-weight: 600; color: #FFBD55; }
.dash-section-link:hover { text-decoration: underline; }

/* List rows */
.dash-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dash-row {
    background: #2C2C2E;
    border-radius: 10px;
    transition: background 0.15s;
}
.dash-row:hover { background: #333335; }
.dash-row-link {
    display: block;
    padding: 14px 16px;
    color: inherit;
    min-height: 44px;
}
.dash-row-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.dash-row-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    font-weight: 700;
    color: #FFBD55;
    letter-spacing: 0.3px;
}
.dash-row-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: rgba(245,240,235,0.88);
}
.dash-row-customer { font-weight: 600; color: #F5F0EB; }
.dash-row-service { color: rgba(245,240,235,0.88); }
.dash-row-date { color: rgba(245,240,235,0.8); font-size: 13px; }

/* Status badges */
.dash-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
/* Sun-readable (2026-10-11): light tint + pale text keeps >= 7:1 on the #2C2C2E rows. */
.dash-status-new       { background: rgba(245,166,35,0.1); color: #FFC46A; }
.dash-status-confirmed { background: rgba(58,143,133,0.1); color: #8AD8CF; }
.dash-status-completed { background: rgba(46,204,113,0.1); color: #7FE0A8; }
.dash-status-cancelled { background: rgba(231,76,60,0.1); color: #FFB0A5; }
.dash-status-pending   { background: rgba(245,166,35,0.1); color: #FFC46A; }
.dash-status-sent      { background: rgba(58,143,133,0.1); color: #8AD8CF; }
.dash-status-accepted  { background: rgba(46,204,113,0.1); color: #7FE0A8; }
.dash-status-declined  { background: rgba(231,76,60,0.1); color: #FFB0A5; }
.dash-status-expired   { background: rgba(245,240,235,0.08); color: rgba(245,240,235,0.85); }
.dash-status-rejected  { background: rgba(245,240,235,0.08); color: rgba(245,240,235,0.85); }
/* Muted = a dimmer card, not dimmer text (opacity made it unreadable in sunlight). */
.dash-card.dash-card-muted { background: #242426; }

.dash-empty {
    padding: 24px 16px;
    text-align: center;
    color: rgba(245,240,235,0.8);
    background: #2C2C2E;
    border-radius: 10px;
    font-size: 14px;
}
.dash-note { margin-top: 12px; color: rgba(245,240,235,0.8); font-size: 13px; text-align: center; }

/* Filter bar */
.dash-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    background: #2C2C2E;
    border-radius: 10px;
    padding: 14px 16px;
}
.dash-filter-row { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }
.dash-filter-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #FFBD55;
}
.dash-filter-select {
    background: #1C1C1E;
    border: 1px solid rgba(245,240,235,0.12);
    border-radius: 8px;
    color: #F5F0EB;
    font-size: 15px;
    padding: 10px 12px;
    min-height: 44px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F5A623' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* Detail page */
.dash-breadcrumb { margin-bottom: 16px; font-size: 14px; }
.dash-breadcrumb a { color: #F5A623; min-height: 44px; display: inline-flex; align-items: center; }
.dash-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.dash-detail-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 22px;
    font-weight: 800;
    color: #F5A623;
    letter-spacing: 0.5px;
}
.dash-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.dash-card--lead { order: -2; }
.dash-card--first { order: -1; }
.dash-card {
    background: #2C2C2E;
    border-radius: 12px;
    padding: 18px 20px;
}
.dash-card h2 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #FFBD55;
    margin-bottom: 12px;
}
.dash-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0;
}
.dash-fields > div {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.dash-fields > div:last-child { border-bottom: none; }
.dash-fields dt {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgba(245,240,235,0.8);
    font-weight: 600;
}
.dash-fields dd { font-size: 14px; color: #F5F0EB; word-break: break-word; }
.dash-fields dd a { color: #FFBD55; }

.dash-card-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.dash-card-actions .btn { flex: 1; min-width: 140px; min-height: 44px; }
.dash-wa { margin-top: 16px; }
.dash-wa-title { font-size: 13px; font-weight: 700; color: #F5F0EB; margin: 0 0 8px; }
.dash-wa-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-wa-buttons .btn { flex: 1 1 140px; min-height: 44px; }

.dash-action-row { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dash-action-row form { display: flex; }
.dash-action-row .btn { flex: 1; min-height: 48px; }

.dash-status-line { font-size: 14px; color: rgba(245,240,235,0.88); }
.dash-prewrap { white-space: pre-wrap; line-height: 1.5; color: rgba(245,240,235,0.92); }
.dash-sub {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #FFBD55;
    margin: 14px 0 6px;
}

/* Login */
.dash-login-wrap {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.dash-login-card {
    background: #2C2C2E;
    border-radius: 12px;
    padding: 28px 28px 24px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
.dash-login-card h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.dash-login-sub { font-size: 13px; color: rgba(245,240,235,0.8); margin-bottom: 18px; }
.dash-login-card .form-group { margin-bottom: 14px; }
.dash-login-card .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
    color: rgba(245,240,235,0.85);
}
.dash-login-card .form-group input {
    background: #1C1C1E;
    border: 1px solid rgba(245,240,235,0.12);
    border-radius: 8px;
    color: #F5F0EB;
    font-size: 16px;
    padding: 12px 14px;
    width: 100%;
    outline: none;
    min-height: 44px;
}
.dash-login-card .form-group input:focus { border-color: #F5A623; }

@media (min-width: 720px) {
    .dash-stats { grid-template-columns: repeat(4, 1fr); }
    .dash-detail-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-action-row { flex-direction: row; flex-wrap: wrap; }
    .dash-action-row form { flex: 0 1 auto; }
    .dash-action-row .btn { flex: 0 1 auto; min-width: 160px; }
}

/* ===== BOOKING FORM ===== */
.booking-form .form-fieldset {
    background: #2C2C2E;
    border: none;
    border-radius: 12px;
    padding: 24px 24px 12px;
    margin-bottom: 20px;
}
.booking-form legend {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #F5A623;
    padding: 0 6px;
    margin-bottom: 4px;
}
.booking-form .form-group { margin-bottom: 16px; }
.booking-form .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #F5F0EB;
    margin-bottom: 6px;
}
.booking-form .form-group label .req { color: #F5A623; }
.form-check { display: flex; align-items: center; gap: 10px; }
.form-check input[type="checkbox"] {
    width: 20px; height: 20px; margin: 0; flex: 0 0 auto;
    accent-color: #F5A623; cursor: pointer;
}
.form-check label { font-size: 14px; font-weight: 600; color: #F5F0EB; cursor: pointer; }
.form-check label .label-hint { font-size: 13px; font-weight: 400; color: rgba(245,240,235,0.8); }
.return-fields { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.return-fields[hidden] { display: none; }
.price-big-sub { font-size: 13px; font-weight: 500; color: rgba(245,240,235,0.8); }
/* Post-trip review pages (bookings/feedback_*.html) */
.feedback-wrap { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.feedback-stars { display: flex; justify-content: center; gap: 6px; }
.feedback-star {
    font-size: 36px;
    line-height: 1;
    color: rgba(245,240,235,0.45);
    text-decoration: none;
    padding: 4px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.feedback-star.is-on { color: #F5A623; }
/* Which trip is rated (UAT #40) */
.feedback-trip { margin: 8px 0 0; font-size: 15px; color: #F5F0EB; }
span.feedback-star { cursor: default; }
.feedback-text { text-align: center; }
.feedback-form { margin-top: 8px; }
.feedback-form textarea { width: 100%; }
/* Dashboard: star rating */
.dash-rating { font-size: 14px; font-weight: 700; color: #FFBD55; letter-spacing: 1px; }
.dash-rating-1, .dash-rating-2, .dash-rating-3 { color: #FFA396; }
.dash-row-comment { color: rgba(245,240,235,0.88); font-style: italic; }
/* Dashboard: relative day label, period tabs, "Prochain trajet" card, phone country */
.dash-day { font-weight: 700; color: rgba(245,240,235,0.88); }
.dash-day.is-today { color: #FFBD55; }
.dash-day.is-soon { color: #7ACFC5; }
.dash-day.is-past { color: rgba(245,240,235,0.78); font-weight: 600; }
.dash-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    flex-wrap: wrap; /* every period visible: "Toutes" was off-screen with no hint (D-m13) */
}
.dash-tabs::-webkit-scrollbar { display: none; }
.dash-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: #2C2C2E;
    color: rgba(245,240,235,0.88);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.dash-tab.is-active { background: #F5A623; color: #1C1C1E; }
.dash-hero {
    background: linear-gradient(135deg, #3A2F14 0%, #2C2C2E 70%);
    border: 1px solid rgba(245,166,35,0.35);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 24px;
}
.dash-hero-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.dash-hero-kicker {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #FFBD55;
}
.dash-hero-when { font-size: 20px; color: #F5F0EB; margin-bottom: 4px; }
.dash-hero-when strong { font-size: 24px; font-weight: 800; }
.dash-hero-route { font-size: 16px; font-weight: 600; color: #F5F0EB; margin-bottom: 6px; }
.dash-hero-meta { font-size: 14px; color: rgba(245,240,235,0.88); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dash-hero-customer { font-weight: 700; color: #F5F0EB; }
.dash-hero-address { font-size: 13px; color: rgba(245,240,235,0.85); margin-top: 4px; }
.dash-phone-country { font-size: 13px; color: rgba(245,240,235,0.82); margin-left: 6px; white-space: nowrap; }
.dash-leg { font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(245,240,235,0.8); margin-left: 6px; }
label .label-hint {
    font-size: 12px;
    font-weight: 400;
    color: rgba(245,240,235,0.8);
    text-transform: none;
    letter-spacing: 0;
}
.booking-form .form-group input,
.booking-form .form-group select,
.booking-form .form-group textarea {
    background: #1C1C1E;
    border: 1px solid rgba(245,240,235,0.12);
    border-radius: 8px;
    color: #F5F0EB;
    font-size: 15px;
    padding: 11px 14px;
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.booking-form .form-group textarea { resize: vertical; min-height: 84px; }
.booking-form .form-group input:focus,
.booking-form .form-group select:focus,
.booking-form .form-group textarea:focus {
    border-color: #F5A623;
}
.booking-form .form-group input[type="date"]::-webkit-calendar-picker-indicator,
.booking-form .form-group input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6) sepia(1) saturate(5) hue-rotate(5deg);
    cursor: pointer;
}
/* Phones (iOS Safari especially): an EMPTY date/time input shrinks to its intrinsic
   width and loses height until a value is picked. Force full width, the same height
   as text inputs, and left-aligned values. */
.form-group input[type="date"],
.form-group input[type="time"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 46px;
    line-height: 1.4;
}
/* static/js/date-display.js: the date written with letters over the native field. */
.date-display { position: relative; display: block; }
.date-display.is-ready input[type="date"] { color: transparent; }
.date-display.is-ready input[type="date"]::-webkit-datetime-edit { opacity: 0; }
.date-display-text {
    position: absolute; top: 50%; right: 36px; transform: translateY(-50%);
    pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.date-display.is-empty .date-display-text { opacity: 0.62; }
.form-group input[type="date"]::-webkit-date-and-time-value,
.form-group input[type="time"]::-webkit-date-and-time-value {
    text-align: left;
    min-height: 1.4em;
}
.booking-form .form-row > * { min-width: 0; }
.booking-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}
/* Phones and tablets: one field per line, always. Side-by-side fields on 412–430 px phones were
   cramped (cut labels and placeholders); a longer readable form beats a short ugly one (Hicham). */
@media (max-width: 768px) {
    .booking-form .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* Desktop rows: label / input / help / errors on shared grid rows, so a label that wraps onto
   two lines ('Heure d'atterrissage') no longer pushes its input below its neighbours' (UAT #37). */
@media (min-width: 769px) {
    .booking-form .form-row { grid-template-rows: repeat(4, auto); row-gap: 0; }
    .booking-form .form-row > .form-group {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        align-content: start;
    }
    .booking-form .form-row > .form-group > label { align-self: end; }
}
.booking-form .has-error input,
.booking-form .has-error select,
.booking-form .has-error textarea {
    border-color: #E74C3C;
}
.form-errors {
    list-style: none;
    margin-top: 6px;
    font-size: 13px;
    color: #FFA396;
}
.form-errors-banner {
    background: rgba(231,76,60,0.12);
    border: 1px solid rgba(231,76,60,0.4);
    color: #FFA396;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.form-errors-banner p { margin: 0; }
.form-errors-banner p + p { margin-top: 6px; }
.form-errors-banner .banner-cta { margin-top: 10px; }
.form-help {
    display: block;
    font-size: 13px;
    color: rgba(245,240,235,0.8);
    margin-top: 4px;
}
.form-note {
    background: rgba(245,166,35,0.1);
    border-left: 3px solid #F5A623;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 16px;
}
.form-submit-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.form-total { font-size: 17px; font-weight: 600; margin: 0; }
.form-total strong { color: #F5A623; font-size: 20px; font-weight: 800; }
.form-fine {
    font-size: 13px;
    color: rgba(245,240,235,0.8);
    text-align: center;
    margin: 0;
}

.duration-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-top: 4px;
}
.duration-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #1C1C1E;
    border: 1px solid rgba(245,240,235,0.12);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    min-height: 44px;
    transition: border-color 0.15s, background 0.15s;
}
.duration-option:hover { border-color: rgba(245,166,35,0.4); }
.duration-option input[type="radio"] {
    accent-color: #F5A623;
    width: 18px;
    height: 18px;
    margin: 0;
}
.duration-option:has(input:checked) {
    border-color: #F5A623;
    background: rgba(245,166,35,0.08);
}

.booking-summary-title {
    font-size: 18px;
    font-weight: 700;
    color: #F5F0EB;
}
.booking-summary-meta { font-size: 13px; color: rgba(245,240,235,0.82); }

/* ===== CONFIRMATION ===== */
.confirmation-hero {
    background: linear-gradient(135deg, #2C2C2E 0%, #1C1C1E 100%);
    padding: 56px 0 40px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.confirmation-badge {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: #F5A623;
    color: #1C1C1E;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(245,166,35,0.35);
}
.confirmation-hero h1 {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 800;
    margin-bottom: 12px;
}
.confirmation-number {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 18px;
    font-weight: 700;
    color: #F5A623;
    background: rgba(245,166,35,0.1);
    padding: 6px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}
.quote-why {
    list-style: none;
    margin: 8px 0;
    padding: 0;
}
.quote-why li {
    position: relative;
    padding: 6px 0 6px 22px;
    font-size: 14px;
    opacity: 0.85;
}
.quote-why li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #F5A623;
    font-weight: 700;
}

.confirmation-lead a { color: #F5A623; text-decoration: underline; text-underline-offset: 2px; } /* D-p4 */
.confirmation-lead {
    max-width: 560px;
    margin: 0 auto;
    opacity: 0.85;
}

/* ===== ERROR PAGES ===== */
.error-hero {
    padding: 60px 20px;
    text-align: center;
}
.error-code {
    font-size: clamp(72px, 18vw, 140px);
    font-weight: 800;
    color: #F5A623;
    letter-spacing: -3px;
    line-height: 1;
    margin-bottom: 8px;
}
.error-hero h1 {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 800;
    margin-bottom: 12px;
}
.error-lead {
    max-width: 600px;
    margin: 0 auto 28px;
    opacity: 0.85;
}
.error-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 40px;
}
.error-links {
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
    background: #2C2C2E;
    border-radius: 12px;
    padding: 20px 24px;
}
.error-links h2 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #F5A623;
    margin-bottom: 10px;
}
.error-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.error-links li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.error-links li:last-child { border-bottom: none; }
.error-links a {
    color: #F5F0EB;
    opacity: 0.9;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
}
.error-links a:hover { color: #F5A623; opacity: 1; }

/* ===== DRIVER HIRE PAGE ===== */
.hire-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 48px;
}
.hire-card {
    background: #2C2C2E;
    border-radius: 12px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.hire-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #F5A623;
}
.hire-desc { opacity: 0.85; font-size: 14px; line-height: 1.6; }
.hire-prices {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 0;
}
.hire-prices li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 14px;
    background: rgba(245,166,35,0.08);
    border-radius: 6px;
}
.hire-price-label { font-size: 14px; opacity: 0.85; }
.hire-price-value {
    font-size: 22px;
    font-weight: 800;
    color: #F5A623;
}
.hire-pax {
    font-size: 13px;
    color: rgba(245,240,235,0.82);
    text-align: center;
    margin: 4px 0;
}

.hire-section { margin-top: 56px; }
.hire-section h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
}
.hire-use-cases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}
.use-case {
    background: #2C2C2E;
    border-radius: 8px;
    padding: 18px 20px;
}
.use-case h3 {
    font-size: 15px;
    font-weight: 700;
    color: #F5A623;
    margin-bottom: 6px;
}
.use-case p {
    font-size: 14px;
    opacity: 0.85;
    line-height: 1.5;
    margin: 0;
}

/* ===== ABOUT PAGE ===== */
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
}
.about-main h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 32px 0 12px;
}
.about-main h2:first-child { margin-top: 0; }
.about-main p {
    opacity: 0.85;
    line-height: 1.7;
    margin-bottom: 12px;
}
.area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 16px 0 8px;
}
.area-card {
    background: #2C2C2E;
    border-radius: 8px;
    padding: 16px 18px;
}
.area-card h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #F5A623;
    margin-bottom: 6px;
}
.area-card p {
    font-size: 14px;
    opacity: 0.85;
    margin: 0;
    line-height: 1.5;
}

/* ===== CONTACT PAGE ===== */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 48px;
}
.contact-card {
    background: #2C2C2E;
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    color: #F5F0EB;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    border: 2px solid transparent;
}
.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    border-color: rgba(245,166,35,0.4);
}
.contact-card-primary {
    background: linear-gradient(135deg, #0B6E62 0%, #075E54 100%);
    color: #fff;
}
.contact-card-primary:hover { border-color: rgba(255,255,255,0.25); }
.contact-card-icon {
    color: #F5A623;
    display: inline-flex;
    margin-bottom: 4px;
}
.contact-card-primary .contact-card-icon { color: #fff; }
.contact-card h3 {
    font-size: 18px;
    font-weight: 700;
}
.contact-card-value {
    font-size: 16px;
    font-weight: 600;
    opacity: 0.95;
    margin: 0;
}
.contact-card-note {
    font-size: 13px;
    color: rgba(245,240,235,0.82);
    margin: 4px 0 0;
}
.contact-card-primary .contact-card-note { color: #fff; }

.contact-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    padding-top: 32px;
    border-top: 1px solid rgba(245,240,235,0.08);
}
.contact-meta-block h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #F5A623;
    margin-bottom: 6px;
}
.contact-meta-block p {
    font-size: 14px;
    opacity: 0.85;
    line-height: 1.5;
    margin: 0;
}
.price-trust {
    font-size: 13px;
    color: rgba(245,240,235,0.8);
    text-align: center;
    margin-top: 4px;
}
.btn-block { width: 100%; justify-content: center; }
/* Phones only: buttons that end up one under the other never touch; desktop unchanged
   (Hicham, 2026-10-26). */
@media (max-width: 759px) {
    .grid-empty-card .btn + .btn,
    .btn-block + .btn-block { margin-top: 10px; }
}

/* ===== RESPONSIVE ===== */
/* ===== TRANSFER LIST: route finder + compact rows ===== */
/* The list page carries no images: at ~100 routes a wall of photo cards was the
   problem. Photos live on the home page and on each route's own page. */
[hidden] { display: none !important; }
/* The theme has no custom properties yet (colours are literal throughout); these two
   are the first, so the section shades are named once instead of repeated in rules.
   Both sit between the page background #1C1C1E and the card surface #2C2C2E. */
:root {
    --route-block-a: #222224;
    --route-block-b: #2A2A2D;
    --route-hairline: rgba(245,240,235,0.09);
    /* solid (sticky headers must cover the rows sliding under them): block shade warmed by the accent */
    --route-head-bg: #2F2A20;
}
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.finder-section { padding-top: 32px; }
.route-finder { max-width: none; margin-bottom: 24px; }
.finder-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: end;
}
.finder-trip { grid-template-columns: 1fr 1fr 0.7fr auto; margin-top: 14px; }
.finder-swap {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #3A3A3C; color: #F5A623;
    border: 1px solid rgba(245,240,235,0.12); border-radius: 8px;
    cursor: pointer; transition: border-color 0.2s, transform 0.15s;
}
.finder-swap svg { transform: rotate(90deg); }
.finder-swap:hover { border-color: #F5A623; }
.finder-hint { font-size: 13px; color: rgba(245,240,235,0.8); margin-top: 12px; }
/* date, time and select render at different natural heights; pin them so the row lines up */
.route-finder .form-group input,
.route-finder .form-group select { height: 44px; padding-top: 0; padding-bottom: 0; }
.route-finder select:focus-visible,
.route-finder input:focus-visible,
.finder-swap:focus-visible,
.route-jump a:focus-visible,
.route-row a:focus-visible,
.filter-clear:focus-visible { outline: 2px solid #F5A623; outline-offset: 2px; }

.finder-status { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.route-count { font-weight: 700; color: #F5A623; }
.route-empty { margin-bottom: 28px; }

.route-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.route-jump a {
    padding: 8px 14px; border-radius: 20px; font-size: 13.5px; font-weight: 500;
    display: inline-flex; align-items: center; min-height: 44px;
    background: #2C2C2E; border: 1px solid rgba(245,240,235,0.1);
    color: rgba(245,240,235,0.85); transition: border-color 0.2s, color 0.2s;
}
.route-jump a:hover { border-color: #F5A623; color: #F5A623; }
/* Phones: long names ("Aéroport Casablanca") left ragged gaps in the wrapped row.
   A two-column grid of equal chips reads as a tidy index instead. */
@media (max-width: 600px) {
    .itinerary li { padding-left: 24px; } /* text 40 px in, not 72 (D-p3) */
    .booking-form .form-fieldset { padding: 18px 16px 8px; }
    .route-jump { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .route-jump a { display: flex; align-items: center; justify-content: center;
                    text-align: center; line-height: 1.25; padding: 9px 8px; border-radius: 12px; }
}

/* One block per departure: heading and rows share a background, and blocks alternate
   between two close shades so section boundaries show while scrolling. The alternation
   is a class, not :nth-child — filtering hides sections, and the visible ones must
   still go A/B/A/B. The view sets it for the server render, the script re-sets it. */
.route-group {
    margin-bottom: 16px; scroll-margin-top: 80px;
    background: var(--route-block-a); border-radius: 12px; padding: 18px 20px 8px;
}
.route-group--alt { background: var(--route-block-b); }
.route-group-title {
    /* header band: the origin must read as a different thing from the "vers …" rows,
       and stay visible while the user scrolls a long section (sticky under the navbar) */
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin: -18px -20px 6px; padding: 12px 20px 12px 16px;
    background: var(--route-head-bg); border-left: 4px solid #F5A623;
    border-radius: 12px 12px 0 0;
    position: sticky; top: 64px; z-index: 2;
}
.route-group-heading {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin: 0; font-size: inherit; font-weight: inherit;
}
.route-group-up {
    margin-left: auto; align-self: center; white-space: nowrap;
    font-size: 13px; font-weight: 600; color: rgba(245,240,235,0.85);
    padding: 6px 2px; text-decoration: none;
    display: inline-flex; align-items: center; min-height: 44px;
}
.route-group-up:hover, .route-group-up:focus-visible { color: #F5A623; }
.route-jump { scroll-margin-top: 80px; }
.route-group-kicker {
    font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: #F5A623;
}
.route-group-place { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.route-rows { list-style: none; }
.route-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px 88px auto;
    align-items: center;
    gap: 8px 20px;
    padding: 10px 0;
}
/* rows are lines inside the block, not cards inside a card */
.route-row + .route-row { border-top: 1px solid var(--route-hairline); }
.route-row-name { font-weight: 600; font-size: 15.5px; overflow-wrap: anywhere; }
.route-row-name:hover { color: #F5A623; }
.route-row-meta { font-size: 13.5px; color: rgba(245,240,235,0.8); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.route-row-price { font-weight: 700; color: #F5A623; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.route-row .route-row-book {
    padding: 0 18px; min-height: 44px; font-size: 14.5px; width: auto;
    box-shadow: none; white-space: nowrap;
}

@media (max-width: 768px) {
    .finder-section { padding-left: 0; padding-right: 0; }
    .finder-grid { grid-template-columns: minmax(0, 1fr); }
    .finder-trip { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
    .finder-trip .form-group:first-child { grid-column: 1 / -1; }
    .finder-submit { grid-column: 1 / -1; margin-left: 0; }
    .finder-swap { justify-self: center; }
    .finder-swap svg { transform: none; }
    /* phone: destination + price on the first line, time/distance + button on the second */
    .route-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "name price" "meta book";
        gap: 4px 12px;
        padding: 10px 0;
    }
    .route-row-name { grid-area: name; font-size: 15px; line-height: 1.35; }
    .route-row-price { grid-area: price; align-self: start; }
    .route-row-meta { grid-area: meta; text-align: left; align-self: center; }
    .route-row .route-row-book {
        grid-area: book; justify-self: end; width: auto;
        min-height: 44px; padding: 0 16px; font-size: 14px;
    }
    /* blocks run nearly edge to edge on a phone so the padding costs the rows nothing */
    .route-group { margin: 0 -10px 12px; padding: 14px 14px 4px; border-radius: 10px; }
    /* the navbar is not sticky on phones, so the band sticks to the viewport top */
    .route-group-title { margin: -14px -14px 4px; padding: 10px 14px 10px 12px; border-radius: 10px 10px 0 0; top: 0; }
    .route-group-place { font-size: 18px; }
}

@media (max-width: 768px) {
    .menu-toggle { display: flex; }
    .nav-links {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: #1C1C1E;
        flex-direction: column;
        padding: 16px 20px;
        gap: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        border-top: 1px solid rgba(255,255,255,0.06);
        z-index: 99;
    }
    .nav-links.open { display: flex; }
    /* 44 px rows instead of 21 px links on a 40 px pitch (D-m4) */
    .nav-links { gap: 0; padding: 8px 20px; }
    .nav-links a, .nav-logout button { display: block; padding: 12px 0; }
    .footer-col a { padding: 8px 0; }
    .navbar { position: relative; }
    .search-section { margin-top: -32px; padding: 0 12px; }
    .search-form-card { padding: 20px 16px; }
    .form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .btn-search { width: 100%; margin-top: 8px; }
    .trust-items { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .trust-label { font-size: 13px; }
    .trust-sub { font-size: 12px; }
    .footer-grid { grid-template-columns: 1fr; }
    /* tablets: two cards a row (one 360 px-tall photo per row looked broken at 768, D-m11) */
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .hero {
        padding: 40px 16px 100px;
        min-height: 380px;
        background-position: center 70% !important;
        background-size: cover !important;
    }
    .hero h1 { font-size: 26px; }
    .hero p { font-size: 15px; margin-bottom: 24px; }
    .cta-row { flex-direction: column; gap: 10px; }
    .btn { width: 100%; justify-content: center; padding: 12px 20px; font-size: 15px; }
    .detail-grid { grid-template-columns: 1fr; gap: 24px; }
    .detail-aside { position: static; }
    /* booking forms: route + price above the form on phones, not after the submit button (D-M1) */
    .detail-aside--lead { order: -1; }
    .header-cta { display: flex; margin-top: 16px; }
    .detail-aside--lead .price-card { padding: 18px 20px; gap: 8px; box-shadow: none; }
    .detail-aside--lead .price-big { font-size: 32px; }
    .about-grid { grid-template-columns: 1fr; gap: 24px; }
    .page-header { padding: 28px 0 24px; }
}

/* "Sur devis" in the big-price slot: text, not a number, so smaller. */
.price-big.price-quote {
    font-size: 28px;
}

/* ===== TERMS ===== */
.terms-updated { font-size: 13px; color: rgba(245,240,235,0.78); margin-bottom: 20px; }
.terms-main .detail-list { margin-bottom: 8px; }
.terms-main p a, .terms-main li a { color: #F5A623; text-decoration: underline; overflow-wrap: anywhere; }
.price-summary { text-align: left; margin: 8px 0 16px; }
.form-fine a { color: inherit; text-decoration: underline; }

.price-trust a { color: #F5A623; text-decoration: underline; text-underline-offset: 2px; }

/* Home: "Comment ça marche" — three numbered steps, stacked on phones. */
.how-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; padding: 0 16px; }
/* Dark cards like the rest of the site (they were white with light text: unreadable). */
.how-steps li { counter-increment: step; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 12px; background: #2C2C2E; border: 1px solid rgba(255,255,255,0.06); }
.how-steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #F5A623; color: #1C1C1E; font-weight: 700; }
.how-steps strong { font-size: 1.05rem; color: #F5F0EB; margin-top: 6px; }
.how-steps span { color: rgba(245,240,235,0.82); font-size: .95rem; line-height: 1.5; }
@media (max-width: 600px) { .how-steps { grid-template-columns: 1fr; } .services-grid { grid-template-columns: 1fr; } }

/* Dashboard: trips to close, hints, cancel drawer, no-show (2026-10-10) */
.dash-status-no_show { background: rgba(231,76,60,0.1); color: #FFB0A5; }
.dash-hint { font-size: 13px; color: rgba(245,240,235,0.8); margin: 0 0 12px; }
.dash-todo .dash-todo-item { display: block; padding: 12px 0; border-top: 1px solid rgba(245,240,235,0.08); }
.dash-todo .dash-todo-main { display: block; color: inherit; text-decoration: none; margin-bottom: 8px; }
.dash-todo .dash-action-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-todo .dash-action-row .btn { min-height: 40px; }
.dash-cancel { margin-top: 14px; }
.dash-cancel summary { cursor: pointer; color: rgba(245,240,235,0.85); font-size: 14px; min-height: 44px; display: flex; align-items: center; }
.dash-merged { list-style: none; margin: 0 0 12px; padding: 0; }
.dash-merged li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.dash-merged span { overflow-wrap: anywhere; }
.dash-merged form { margin: 0; flex-shrink: 0; }
.dash-check { display: flex; gap: 8px; align-items: center; margin: 4px 0 12px; font-size: 14px; }
.dash-prices { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.dash-prices th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: rgba(245,240,235,0.8); padding: 6px 0; }
.dash-prices td { padding: 8px 0; border-top: 1px solid rgba(245,240,235,0.08); vertical-align: middle; }
.dash-prices td small { display: block; color: rgba(245,240,235,0.78); font-size: 13px; }
.dash-prices input {
    width: 90px; min-height: 44px; text-align: right; padding: 10px; font-size: 16px; font-family: inherit;
    background: #1C1C1E; color: #F5F0EB; border: 1px solid rgba(245,240,235,0.12); border-radius: 8px;
}
.dash-prices input:focus { border-color: #F5A623; outline: none; }
.dash-prices tr.is-off td:first-child { color: rgba(245,240,235,0.75); font-style: italic; }
.dash-prices-pick { margin-bottom: 16px; }

/* Home: the vehicle */
.vehicle-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; max-width: 1100px; margin: 0 auto; }
@media (min-width: 760px) { .vehicle-grid { grid-template-columns: 1.1fr 1fr; gap: 40px; } }
.vehicle-photo { margin: 0; }
.vehicle-photo img { width: 100%; height: auto; border-radius: 12px; display: block; }
.vehicle-photo figcaption { font-size: 12px; color: rgba(245,240,235,0.75); margin-top: 6px; }
.vehicle-photo figcaption a { color: inherit; }
.vehicle-text .section-title { text-align: left; }
.vehicle-facts { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.vehicle-facts li { padding-left: 26px; position: relative; }
.vehicle-facts li::before { content: "✓"; position: absolute; left: 0; color: #F5A623; font-weight: 700; }

/* Password show/hide eye (static/js/password-toggle.js) */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 44px !important; box-sizing: border-box; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; border: 0; background: transparent;
  color: inherit; opacity: .6; cursor: pointer; border-radius: 6px; padding: 0; }
.pw-toggle:hover, .pw-toggle:focus-visible { opacity: 1; }
.dash-login-alt { margin-top: 16px; text-align: center; font-size: 14px; }
.dash-login-alt a { color: rgba(245,240,235,0.85); }

/* Dashboard: customers (2026-10-11) */
.dash-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dash-badge {
    display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap;
    background: rgba(245,240,235,0.08); color: rgba(245,240,235,0.95); /* ≥ 7:1 (D-m14) */
}
.dash-badge-loyal { background: rgba(46,204,113,0.1); color: #7FE0A8; }
.dash-badge-watch { background: rgba(245,166,35,0.1); color: #FFC46A; }
.dash-badge-refuse { background: rgba(231,76,60,0.1); color: #FFB0A5; }
.dash-customer-strip { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: rgba(245,240,235,0.04); border-left: 3px solid rgba(245,240,235,0.15); }
.dash-customer-strip.is-watch { border-left-color: #F5A623; }
.dash-customer-strip.is-refuse { border-left-color: #ff7f6f; background: rgba(231,76,60,0.08); }
.dash-customer-strip .dash-badges:not(:empty) { margin-bottom: 6px; }
.dash-customer-counts { font-size: 13px; color: rgba(245,240,235,0.88); margin: 0 0 4px; }
.dash-customer-counts strong { color: #FFA396; }
.dash-customer-note { font-size: 13px; color: rgba(245,240,235,0.85); margin: 0 0 4px; white-space: pre-wrap; word-break: break-word; }
.dash-customer-strip .dash-section-link { display: inline-flex; align-items: center; min-height: 36px; }
.dash-customer-name { margin-bottom: 0; word-break: break-word; }
.dash-hint-after { margin: 10px 0 0; }
.dash-section-spaced { margin-top: 32px; }
.dash-search { display: flex; gap: 8px; }
.dash-search-input {
    flex: 1; min-width: 0; background: #1C1C1E; border: 1px solid rgba(245,240,235,0.12); border-radius: 8px;
    color: #F5F0EB; font-size: 16px; padding: 10px 12px; min-height: 44px;
}
.dash-search-input:focus { border-color: #F5A623; outline: none; }
.dash-search .btn { flex: 0 0 auto; width: auto; min-height: 44px; padding: 0 18px; }
.dash-row-main .dash-row-customer { min-width: 0; overflow-wrap: anywhere; }
/* Six nav links (Accueil … Avis, Clients) on one 390 px line. */
/* Under 430 px: two deliberate rows of three, not "Avis" alone on a second line (D-m13). */
@media (max-width: 430px) {
    .dash-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
    .dash-nav-link { padding: 8px 4px; font-size: 14px; justify-content: center; }
}

/* Public: "Se connecter" and "Mes réservations" (2026-10-11) */
.nav-links a.nav-account { color: #F5A623; }
.account-section { padding-top: 28px; }
.account-narrow { max-width: 560px; }
.account-notice { background: rgba(46,204,113,0.12); border: 1px solid rgba(46,204,113,0.35); color: #5dd190; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.account-tips { margin: 0 0 24px; padding-left: 20px; line-height: 1.6; opacity: 0.85; }
.account-tips li { margin-bottom: 8px; }
.account-email { word-break: break-all; }
.account-h2 { font-size: 18px; font-weight: 700; margin: 8px 0 12px; }
.account-list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
.account-card { background: #2C2C2E; border-radius: 12px; }
.account-card-link { display: block; padding: 16px 18px; color: inherit; }
.account-card-link:hover { background: #333335; border-radius: 12px; }
.account-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.account-card-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: #F5A623; font-size: 14px; }
.account-status { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; background: rgba(245,240,235,0.08); color: rgba(245,240,235,0.85); }
.account-status-confirmed, .account-status-sent { background: rgba(58,143,133,0.1); color: #8AD8CF; }
.account-status-new, .account-status-pending { background: rgba(245,166,35,0.1); color: #FFC46A; }
.account-status-completed, .account-status-accepted { background: rgba(46,204,113,0.1); color: #7FE0A8; }
.account-status-cancelled, .account-status-no_show, .account-status-declined { background: rgba(231,76,60,0.1); color: #FFB0A5; }
.account-card-what { font-weight: 700; margin: 0 0 4px; overflow-wrap: anywhere; }
.account-card-meta { font-size: 14px; color: rgba(245,240,235,0.85); margin: 0 0 2px; overflow-wrap: anywhere; }
.account-card-review { padding: 0 18px 12px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.account-stars { letter-spacing: 2px; font-size: 18px; color: rgba(245,240,235,0.5); }
.account-stars .is-on { color: #F5A623; }
.account-stars a { color: rgba(245,240,235,0.5); padding: 2px; text-decoration: none; }
.account-stars:hover a { color: #F5A623; }
.account-stars a:hover ~ a { color: rgba(245,240,235,0.5); }
.account-code-form { margin-bottom: 24px; }
.account-code-input { font-size: 24px; letter-spacing: 4px; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.again-notice { background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.4); color: #F5F0EB; padding: 12px 16px; border-radius: 8px; margin: 0 0 16px; font-size: 14px; }
/* Late cancel (UAT #64): readable box, not grey fine print, with its WhatsApp button. */
.late-cancel-notice { background: rgba(245,166,35,0.12); border: 1px solid rgba(245,166,35,0.4); color: #F5F0EB; padding: 14px 16px; border-radius: 8px; margin: 0 0 16px; font-size: 15px; line-height: 1.5; }
.late-cancel-notice p { margin: 0 0 12px; }
.booking-form input:disabled { opacity: 0.6; cursor: not-allowed; }
.account-card-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 16px; }
.account-card-actions .btn { flex: 1 1 auto; text-align: center; padding: 10px 14px; font-size: 14px; }
.account-card-links { display: flex; flex-wrap: wrap; gap: 0 20px; padding: 0 18px 6px; }
.account-card-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: #F5A623; }
.account-card-links a:hover { text-decoration: underline; }
.account-card-cta { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; color: #F5A623; }
.account-empty { background: #2C2C2E; border-radius: 12px; padding: 18px; color: rgba(245,240,235,0.88); margin-bottom: 28px; }
.account-empty a { color: #F5A623; font-weight: 600; }
.account-fine { margin-bottom: 20px; }
.account-text { margin-bottom: 16px; opacity: 0.85; line-height: 1.6; }
.account-actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.account-small-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; font-size: 14px; color: rgba(245,240,235,0.8); text-decoration: underline; }

/* Dashboard, outdoor readability (2026-10-11): Adil reads it on a phone in full sun.
   Shared public classes get the dashboard minimums here: 13px secondary text, AAA accent. */
.dash-body label .label-hint { font-size: 13px; }
.dash-body .dash-card .btn-outline { color: #FFBD55; }

/* Focused field: a soft amber ring on top of the border colour, not a 1 px change only (D-p9).
   Text fields match :focus-visible on click too, which is the point: you see where you type. */
input:not([type="checkbox"]):not([type="radio"]):focus-visible, select:focus-visible, textarea:focus-visible {
    box-shadow: 0 0 0 3px rgba(245,166,35,0.35);
}

/* Dashboard action with its consequence on a second line: "Confirmer aller + retour" / "un email au client" (Hicham, 2026-10-13). */
.btn.btn-stack { flex-direction: column; justify-content: center; gap: 2px; text-align: center; line-height: 1.25; }
.btn-stack .btn-note { font-size: 13px; font-weight: 500; }

/* Contact page: links to booking/quote, then the message form (2026-10-13). */
.contact-links { margin: 28px 0 0; font-size: 16px; }
.contact-form-block { margin: 32px 0; max-width: 640px; scroll-margin-top: 80px; }
.contact-form-block h2 { margin-bottom: 16px; }
.contact-links a { color: #F5A623; text-decoration: underline; text-underline-offset: 3px; }

/* Home: private driver section (2026-10-13). */
.hire-home .container { max-width: 760px; text-align: center; }
.hire-home-lead { font-size: 17px; line-height: 1.6; margin: 0 auto 20px; }
.hire-home-points { list-style: none; padding: 0; margin: 0 auto 8px; display: grid; gap: 10px; text-align: left; max-width: 520px; }
.hire-home-points li { position: relative; padding-left: 26px; line-height: 1.5; }
.hire-home-points li::before { content: "✓"; position: absolute; left: 0; color: #F5A623; font-weight: 700; }
.hire-home .section-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* UAT batch 2 (dashboard) */
.dash-hint-gap { margin-bottom: 16px; }                         /* Avis: text no longer touches the first card (#101) */
.dash-field-note { display: block; font-size: 12px; color: rgba(245,240,235,0.8); font-weight: 400; text-transform: none; }  /* #126 */
.dash-row-main { justify-content: flex-start; }
.dash-row-main > :last-child:not(:first-child) { margin-left: auto; }   /* badge always at the right (#125) */
.dash-cancel summary { list-style: none; }
.dash-cancel summary::-webkit-details-marker { display: none; }
.dash-cancel summary::before { content: "▸"; color: #F5A623; margin-right: 8px; }   /* looks tappable (#127) */
.dash-cancel[open] > summary::before { content: "▾"; }
.dash-prices-pick select {                                       /* a visible arrow on Départ (#85) */
    appearance: none; -webkit-appearance: none; padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F5A623' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
}
/* Account (UAT batch 2) */
.account-card-link + .account-card-links { margin-top: -12px; }      /* no big gap above the text links (#119) */
.account-card-actions .btn { justify-content: center; }              /* #120 */
.account-fine a { color: #F5A623; font-weight: 600; text-decoration: underline; }
.page-header .container.account-narrow { max-width: 560px; }
/* Cards in a row: the price line at the bottom whatever the title's length (UAT #108). */
.service-card { display: flex; flex-direction: column; }
.service-card .card-body { flex: 1; display: flex; flex-direction: column; }
.service-card .card-body .price-row { margin-top: auto; }
.feedback-form .feedback-text { text-align: left; margin-bottom: 4px; }
/* Re-check fixes */
.booking-form.dash-prices-pick .form-group select {               /* the arrow survives .booking-form's background shorthand */
    appearance: none; -webkit-appearance: none; padding-right: 32px;
    background: #1C1C1E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F5A623' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
}
@media (max-width: 600px) { .dash-filter .dash-filter-row { flex-basis: 100%; } }   /* search full width on phones */
.account-lead-link { color: #F5A623; font-weight: 600; text-decoration: underline; }
.feedback-form .detail-description { margin-bottom: 16px; }
.quote-details-lead p { margin: 0 0 6px; }
/* Home: private driver with the vehicle photo (2026-10-15; the « Votre véhicule » section is gone) */
.hire-home .vehicle-grid { padding: 0; }
.hire-home-text { text-align: left; }
.hire-home-text .section-title { text-align: left; }
.hire-home-text .hire-home-lead { margin: 0 0 20px; }
.hire-home-text .hire-home-points { margin: 0 0 20px; max-width: none; }
.hire-home-text .section-cta { justify-content: flex-start; }
@media (max-width: 759px) { .hire-home-text .section-cta .btn { flex: 1 1 100%; justify-content: center; } }
/* Language switch: in the menu on desktop, next to the menu button on phones (2026-10-15) */
.lang-switch-mobile { display: none; }
@media (max-width: 768px) {
    .lang-switch-mobile { display: inline-flex; margin-left: auto; margin-right: 6px; min-height: 40px; align-items: center;
        padding: 4px 12px; border-radius: 4px; font-size: 14px; font-weight: 700; background: rgba(245,166,35,0.15); color: #F5A623; }
    .nav-links .lang-switch { display: none; }
}

/* 24 h time picker: hour + minute selects side by side (core/widgets.py, test B3) */
.time-pick { display: flex; align-items: center; gap: 8px; }
.time-pick select { flex: 1 1 0; min-width: 0; }
.time-pick-sep { font-weight: 700; font-size: 18px; }
.form-group .time-pick select,
.booking-form .form-group .time-pick select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F5A623' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}
.dash-body .form-group .time-pick select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231E40AF' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Excursions as tailor-made round trips (2026-10-24): the four promises under the
   lead, the numbered « Exemple de journée » and its note. */
.page-header .trust-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px 24px;
    margin-top: 18px;
    max-width: 720px;
    font-size: 15px;
    color: rgba(245,240,235,0.9);
}
.page-header .trust-list li { position: relative; padding-left: 24px; }
.page-header .trust-list li::before { content: '✓'; position: absolute; left: 0; color: #F5A623; font-weight: 700; }
.detail-list--steps { grid-template-columns: 1fr; counter-reset: step; }
.detail-list--steps li { padding-left: 32px; counter-increment: step; }
.detail-list--steps li::before {
    content: counter(step);
    color: #F5A623;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.detail-note { margin-top: 12px; margin-bottom: 20px; font-size: 14px; opacity: 0.8; }