/* ================================================================
   MOTRO FRANCE — mobile.css
   Styles dédiés aux écrans ≤ 767 px
   Chargé via : <link media="screen and (max-width: 767px)">
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   A. ÉLIMINATION DES ÉLÉMENTS FANTÔMES
   Tout élément PC invisible sur mobile doit avoir pointer-events:none
   pour ne jamais intercepter les touches.
   ════════════════════════════════════════════════════════════════ */

/* Backdrop du menu hamburger : invisible par défaut → aucun clic */
.mobile-nav-backdrop {
    pointer-events: none !important;
}
/* Uniquement quand le menu est ouvert */
.mobile-nav-backdrop.open {
    pointer-events: auto !important;
}

/* Drawer fermé : off-screen, aucune interception */
.mobile-nav-drawer {
    pointer-events: none;
}
.mobile-nav-drawer.open {
    pointer-events: auto;
}

/* Éléments PC masqués : display:none suffit mais on blindage pointer-events */
.nav-links   { display: none !important; pointer-events: none !important; }
.nav-actions { display: none !important; pointer-events: none !important; }

/*
 * Overlay-saisie : repositionné en absolu sur la voiture.
 * top: 60% = ~103px sur un écran 375px, plaque visuelle à 72% = 124px
 * → le centre de l'input (103+28=131px) se cale visuellement sur la plaque.
 */
.overlay-saisie {
    position: absolute  !important;
    inset: auto         !important;
    top: 73%            !important;
    left: 50%           !important;
    transform: translateX(-50%) !important;
    width: 90%          !important;
    pointer-events: auto !important;
    display: flex       !important;
    flex-direction: column !important;
    align-items: stretch   !important;
    gap: 12px           !important;
    padding: 0          !important;
    background: transparent !important;
    border-radius: 0    !important;
    z-index: 5          !important;
}

/* Contact overlay (étape 2) : plein écran fixe sur mobile */
.overlay-contact {
    position: fixed     !important;
    inset: 0            !important;
    border-radius: 0    !important;
    z-index: 9990       !important;
    pointer-events: none !important;
}
.overlay-contact.visible {
    pointer-events: auto !important;
}


/* ════════════════════════════════════════════════════════════════
   B. ZONES DE CLIC DU BLOC CENTRAL (plaque + bouton CTA)
   position:relative + z-index + pointer-events explicites
   ════════════════════════════════════════════════════════════════ */

/* Plaque d'immatriculation : écrase les inline-styles du JS */
.overlay-plaque {
    position: relative  !important;
    top: auto           !important;
    left: auto          !important;
    width: 100%         !important;
    transform: none     !important;
    opacity: 1          !important;
    margin-top: 0       !important;
    pointer-events: auto !important;
    z-index: 10         !important;
}

/* Float panel (Code moteur / Modèle) : masqué sur mobile */
.overlay-float {
    display: none       !important;
    pointer-events: none !important;
}

/* Bouton CTA : écrase les inline-styles du JS */
.overlay-cta {
    position: relative  !important;
    top: auto           !important;
    left: auto          !important;
    width: 100%         !important;
    transform: none     !important;
    opacity: 1          !important;
    pointer-events: auto !important;
    z-index: 10         !important;
}

/*
 * Car-viewer : hauteur augmentée pour que la Clio soit plus imposante.
 * calc(58vw) ≈ 218px sur 375px — le ratio 2:1 de l'image reste couvert.
 */
.car-viewer {
    position: relative          !important;
    aspect-ratio: unset         !important;
    height: calc(58vw)          !important;
    overflow: visible           !important;
}

/* Voiture filaire : images inactives masquées */
.car-image { display: none !important; pointer-events: none !important; }

/* Image active : remplit exactement le car-viewer (object-fit: cover) */
.car-image.active {
    display: block        !important;
    position: absolute    !important;
    inset: 0              !important;
    width: 100%           !important;
    height: 100%          !important;
    max-width: none       !important;
    margin: 0             !important;
    object-fit: cover     !important;
    object-position: center !important;
    opacity: 1            !important;
    filter: none          !important;
    transform: none       !important;
    pointer-events: none  !important;
}

/* Onglets et stats masqués (sans voiture ils sont non-fonctionnels) */
.tabs-hero  { display: none !important; pointer-events: none !important; }
.hero-stats { display: none !important; pointer-events: none !important; }


/* ════════════════════════════════════════════════════════════════
   C. CIBLES TACTILES ≥ 48 px (thumbs-friendly)
   ════════════════════════════════════════════════════════════════ */

.license-plate {
    max-width: 195px !important;
    width: 100%      !important;
    height: 52px     !important;
    min-height: 48px !important;
    margin: 0 auto   !important;
    cursor: text;
}

.plate-input {
    min-height: 48px !important;
    font-size: 20px  !important;
    width: 100%      !important;
}

.dept-select { min-height: 48px !important; }

.btn-cta-overlay {
    width: 100%             !important;
    min-height: 48px        !important;
    justify-content: center !important;
    padding: 14px 20px      !important;
    font-size: 14px         !important;
    position: relative      !important;
    z-index: 10             !important;
    pointer-events: auto    !important;
}


/* ════════════════════════════════════════════════════════════════
   D. SÉCURISATION DU CORPS DE PAGE
   ════════════════════════════════════════════════════════════════ */

/* body ne doit pas avoir overflow:hidden sauf quand le menu est ouvert */
body {
    overflow-x: hidden;
    padding-bottom: 74px;   /* espace pour la sticky call bar */
}
/* body.mobile-nav-open { overflow: hidden } est géré dans style.css */


/* ════════════════════════════════════════════════════════════════
   E. HEADER MOBILE
   ════════════════════════════════════════════════════════════════ */

.nav { padding: 0 20px; position: relative; }

.nav-hamburger {
    display: flex    !important;
    position: absolute;
    left: 20px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: auto !important;
}

.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}


/* ════════════════════════════════════════════════════════════════
   F. DRAWER MOBILE — affiché uniquement via la classe .open
   ════════════════════════════════════════════════════════════════ */

.mobile-nav-backdrop { display: block; }
.mobile-nav-drawer   { display: flex; }


/* ════════════════════════════════════════════════════════════════
   G. HERO : texte introductif
   ════════════════════════════════════════════════════════════════ */

/* Supprime le 100vh desktop → la section prend la hauteur de son contenu */
.hero-immersif { height: auto !important; min-height: unset !important; }

.hero-top-text { padding: 28px 16px 12px; text-align: center; }
.hero-title    { font-size: clamp(26px, 7vw, 40px); letter-spacing: -1px; }
.hero-subtitle { font-size: 14px; line-height: 1.5; }
.car-stage     { padding: 0 16px 80px; flex: none !important; }


/* ════════════════════════════════════════════════════════════════
   H. STICKY CALL BAR
   ════════════════════════════════════════════════════════════════ */

.sticky-call-bar { display: flex; }


/* ════════════════════════════════════════════════════════════════
   I. SECTION VEDETTE masquée → CTA alternatif
   ════════════════════════════════════════════════════════════════ */

.section-vedette    { display: none; }
.mobile-vedette-cta { display: flex; }


/* ════════════════════════════════════════════════════════════════
   J. AVANTAGES — grille 2 × 2 compact
   ════════════════════════════════════════════════════════════════ */

.avantages-grille   { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.avantage-item      { padding: 20px 16px; }
.avantage-icone svg { width: 20px; height: 20px; }
.avantage-titre     { font-size: 13px; }
.avantage-desc      { font-size: 11px; line-height: 1.4; }


/* ════════════════════════════════════════════════════════════════
   K. BOUTIQUE : filtres horizontaux + grille 1 colonne
   ════════════════════════════════════════════════════════════════ */

.boutique-filtres {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    scrollbar-width: none;
}
.boutique-filtres::-webkit-scrollbar { display: none; }
.filtre-select           { flex-shrink: 0; min-width: 140px; }
.boutique-grille         { grid-template-columns: 1fr; }
.boutique-toolbar        { top: 64px; }
.boutique-search-wrapper { min-width: 100%; }


/* ════════════════════════════════════════════════════════════════
   L. CARROUSEL — scroll tactile, animation désactivée
   ════════════════════════════════════════════════════════════════ */

.carrousel-outer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: none;
}
.carrousel-outer::-webkit-scrollbar { display: none; }
.carrousel-track { animation: none; width: max-content; }


/* ════════════════════════════════════════════════════════════════
   M. UTILITAIRES
   ════════════════════════════════════════════════════════════════ */

.container { padding: 0 16px; }

/* Footer-bas : marge basse pour que les liens légaux restent
   au-dessus de la sticky call bar (≈ 54px + safe-area) */
.footer-bas { padding-bottom: 90px !important; }


/* ════════════════════════════════════════════════════════════════
   O. DRAWER CONTACT — défilement sécurisé sur mobile
   ════════════════════════════════════════════════════════════════ */

/* Corps du formulaire : scroll fluide avec marge basse pour le footer du drawer */
.drawer-body {
    overflow-y: auto   !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px !important;
}

/* Footer du drawer : protège le bouton de l'encoche iOS (safe-area) */
.drawer-footer {
    padding-bottom: max(22px, env(safe-area-inset-bottom)) !important;
}


/* ════════════════════════════════════════════════════════════════
   N. SUCCÈS — masque le bloc véhicule, affiche la confirmation
   ════════════════════════════════════════════════════════════════ */

/* Masque complètement la Clio + plaque + CTA dès que succès */
.car-stage.succes-actif { display: none !important; }

/* Overlay succès : sorti de son contexte absolu, flux normal */
.overlay-succes {
    display: none;
}
.overlay-succes.visible {
    display: flex        !important;
    flex-direction: column !important;
    align-items: center  !important;
    position: relative   !important;
    inset: auto          !important;
    opacity: 1           !important;
    width: 100%          !important;
    padding: 28px 20px   !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto !important;
    z-index: 1           !important;
    transition: none     !important;
}

/* Carte succès : pleine largeur, espacements confortables */
.succes-card {
    width: 100%          !important;
    max-width: 340px     !important;
    padding: 28px 20px 32px !important;
    display: flex        !important;
    flex-direction: column !important;
    align-items: center  !important;
    gap: 16px            !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px  !important;
    animation: none      !important;
}

/* Icône légèrement plus petite sur mobile */
.succes-icone svg {
    width: 44px !important;
    height: 44px !important;
}

/* Annule les margin-bottom individuels : le gap: 16px de la carte gère l'espacement */
.succes-icone   { margin-bottom: 0 !important; }
.succes-titre   { margin-bottom: 0 !important; font-size: 22px !important; }
.succes-message { margin-bottom: 0 !important; max-width: 100% !important; }
.succes-details { margin-bottom: 0 !important; width: 100% !important; max-width: 100% !important; }