/* =====================================================================
   DriveLess — version application mobile (smartphones et petites tablettes)
   Barre d'onglets en bas, filtres en panneau, barre de réservation fixe,
   invitation à installer l'application (PWA), mode « standalone ».
   Chargé après front.css / pages.css / reservation.css.
   ===================================================================== */

/* ---------- Corrections communes (débordement horizontal) ---------- */
html { overflow-x: clip; }
body.front { overflow-x: clip; }
.vehicle-layout > *, .quote-layout > *, .catalogue > *, .results { min-width: 0; }

/* Éléments propres à la version mobile : masqués sur ordinateur */
.tabbar, .m-cta, .m-filters-btn, .m-sheet-close, .app-install { display: none; }

@media (max-width: 960px) {
    :root { --tabbar-h: 64px; --safe-b: env(safe-area-inset-bottom, 0px); }

    body.front {
        padding-bottom: calc(var(--tabbar-h) + var(--safe-b));
        -webkit-tap-highlight-color: transparent;
    }
    /* Champs en 16 px minimum : évite le zoom automatique d'iOS au focus */
    .front input:not([type=checkbox]):not([type=radio]):not([type=range]), .front select, .front textarea { font-size: max(16px, 1em); }
    .front .btn { min-height: 44px; }
    .front .btn-sm { min-height: 38px; }

    /* En-tête : actions alignées à droite (à gauche en arabe) */
    .header-actions { margin-inline-start: auto; }
    /* Calendrier : jamais plus large que l'écran (téléphones de 320 px) */
    .dp { width: min(340px, calc(100vw - 20px)); max-width: calc(100vw - 20px); }
    .brand img { height: 34px; }

    /* ---------- Barre d'onglets ---------- */
    .tabbar {
        position: fixed; inset-inline: 0; bottom: 0; z-index: 300;
        display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
        height: calc(var(--tabbar-h) + var(--safe-b));
        padding-bottom: var(--safe-b);
        background: rgba(var(--panel-rgb), .94);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        border-top: 1px solid var(--line);
    }
    .tab {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-width: 0; padding: 6px 2px 4px;
        color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.1; text-decoration: none;
        transition: color .2s;
    }
    .tab-lib { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tab-ico { display: grid; place-items: center; transition: transform .2s var(--ease); }
    .tab-ico svg { width: 23px; height: 23px; }
    .tab:active .tab-ico { transform: scale(.88); }
    .tab.is-active { color: var(--accent); }
    .tab.is-active .tab-ico { position: relative; }
    .tab:not(.tab-reserver).is-active .tab-ico::after {
        content: ""; position: absolute; top: -9px; left: 50%; width: 18px; height: 3px; margin-left: -9px;
        border-radius: 0 0 3px 3px; background: var(--accent);
    }
    /* Bouton central « Réserver » */
    .tab-reserver { color: var(--text); }
    .tab-reserver .tab-ico {
        width: 54px; height: 54px; margin-top: -28px; border-radius: 50%;
        border: 4px solid var(--bg); background: var(--accent); color: var(--on-accent);
        box-shadow: var(--shadow-accent);
    }
    .tab-reserver .tab-ico svg { width: 24px; height: 24px; }
    .tab-reserver.is-active { color: var(--accent); }

    /* Éléments flottants remontés au-dessus de la barre */
    .to-top { bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px); inset-inline-end: 14px; width: 44px; height: 44px; }
    .consent { bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px); inset-inline: 10px; }
    .site-footer { padding-bottom: 8px; }
    .to-top { display: none; } /* la barre d'onglets suffit ; évite de masquer le bas du pied de page */

    /* ---------- Catalogue : filtres dans un panneau ---------- */
    .m-filters-btn {
        position: sticky; top: calc(var(--header-h) + 10px); z-index: 20;
        display: inline-flex; align-items: center; gap: 8px;
        min-height: 44px; margin-top: 18px; padding: 0 18px;
        border: 1px solid var(--line-2); border-radius: 999px;
        background: rgba(var(--panel-rgb), .95); color: var(--text);
        font: 600 14px/1 var(--font); box-shadow: var(--shadow); cursor: pointer;
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .m-filters-btn svg { width: 18px; height: 18px; color: var(--accent); }
    .m-count {
        display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
        border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 12px;
    }
    .catalogue { margin-top: 14px; }
    .catalogue .filters {
        position: fixed; inset: auto 0 0 0; z-index: 500;
        max-height: 85vh; max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain;
        padding: 6px 20px calc(24px + var(--safe-b));
        border-radius: 22px 22px 0 0; border-bottom: 0;
        box-shadow: 0 -20px 50px -10px rgba(0, 0, 0, .7);
        transform: translateY(105%); visibility: hidden;
        transition: transform .35s var(--ease), visibility 0s linear .35s;
    }
    .catalogue .filters.is-open { transform: none; visibility: visible; transition: transform .35s var(--ease); }
    .catalogue .filters::before {
        content: ""; display: block; width: 42px; height: 4px; margin: 6px auto 12px;
        border-radius: 2px; background: var(--line-2);
    }
    .filter-head { gap: 10px; }
    .filter-head .link { margin-inline-start: auto; }
    .m-sheet-close {
        display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px;
        border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--text); cursor: pointer;
    }
    .m-sheet-close svg { width: 18px; height: 18px; }
    .m-backdrop {
        position: fixed; inset: 0; z-index: 450; background: rgba(0, 0, 0, .55);
        opacity: 0; transition: opacity .3s;
    }
    .m-backdrop.is-open { opacity: 1; }
    body.m-lock { overflow: hidden; }

    /* ---------- Fiche véhicule : barre de réservation fixe ---------- */
    .m-cta {
        position: fixed; inset-inline: 10px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px); z-index: 290;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 10px; padding-inline-start: 18px;
        border: 1px solid var(--line-2); border-radius: 18px;
        background: rgba(var(--panel-rgb), .96); box-shadow: var(--shadow);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        transition: transform .3s var(--ease), opacity .3s;
    }
    .m-cta.is-hidden { opacity: 0; transform: translateY(24px); pointer-events: none; }
    .m-cta-prix { line-height: 1.15; }
    .m-cta-prix small { color: var(--muted); font-size: 12px; }
    .m-cta-prix strong { color: var(--accent); font: 700 22px/1 var(--font-display); }
    .m-cta .btn { flex-shrink: 0; }
    body:has(.m-cta) .site-footer { padding-bottom: 84px; }
    .booking-box { scroll-margin-top: calc(var(--header-h) + 12px); padding: 18px; }

    /* ---------- Retour tactile ---------- */
    .car-card { transition: transform .15s; }
    .car-card:active { transform: scale(.985); }

    /* ---------- Invitation à installer l'application ---------- */
    .app-install:not([hidden]) {
        position: fixed; inset-inline: 10px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px); z-index: 600;
        display: flex; align-items: center; gap: 12px;
        padding: 12px; padding-inline-start: 12px;
        border: 1px solid var(--line-2); border-radius: 18px;
        background: var(--panel); box-shadow: var(--shadow);
        animation: m-monte .45s var(--ease);
    }
    .app-install img { width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; }
    .app-install-txt { flex: 1; min-width: 0; }
    .app-install-txt strong { display: block; font-size: 14px; }
    .app-install-txt p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
    .app-install-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; }
    .app-install-actions .btn svg { width: 16px; height: 16px; }
    .app-install-close {
        display: grid; place-items: center; width: 30px; height: 30px;
        border: 0; background: none; color: var(--muted); cursor: pointer;
    }
    .app-install-close svg { width: 18px; height: 18px; }
    .app-install.ios .app-install-actions .btn { display: none; }
}

/* ---------- Pied de page sur téléphone : liens sur 2 colonnes, plus compact ---------- */
@media (max-width: 600px) {
    .site-footer { margin-top: 56px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; padding-block: 40px 28px; }
    .footer-brand, .footer-col-contact { grid-column: 1 / -1; }
    .footer-brand p { max-width: none; }
    .site-footer h3 { margin-bottom: 12px; font-size: 13px; }
    .footer-links { gap: 2px; }
    .footer-links a { display: block; padding-block: 7px; font-size: 14px; } /* zones tactiles d'au moins 36 px */
    .footer-links a:hover { padding-inline-start: 0; }
    .footer-contact a { display: inline-block; padding-block: 4px; }
    .footer-bottom { flex-direction: column; gap: 8px; padding-block: 18px; }
    .footer-bottom::before { inset-inline: 16px; }
}

@keyframes m-monte { from { opacity: 0; transform: translateY(30px); } }

/* ---------- Application installée (écran d'accueil) ---------- */
@media (display-mode: standalone) {
    .app-install { display: none !important; }
    body.front { overscroll-behavior-y: none; }
    .site-header { padding-top: env(safe-area-inset-top, 0px); height: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
    .catalogue .filters, .m-cta, .app-install { transition: none; animation: none; }
}