/* ================================================================
   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-menu-backdrop {
    pointer-events: none !important;
}
.mobile-menu-backdrop.open {
    pointer-events: auto !important;
}

/* Menu dropdown fermé : off-screen, aucune interception */
.mobile-menu-overlay {
    pointer-events: none;
}
.mobile-menu-overlay.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;
    /* Réserve sous la sticky call bar : elle est désormais portée par le PIED
       DE PAGE, plus par le body.
       Pourquoi : le body a un fond BLANC, le pied de page est en #111111. Les
       110 px réservés ici s'affichaient donc en une bande blanche entre la fin
       du pied et la barre noire — un défaut visible sur toutes les pages
       mobiles. Posée sur le pied, la réserve prend sa couleur et la jointure
       disparaît, sans rien changer à la protection du contenu.
       74 px valaient pour une barre d'une ligne ; sous 360 px de large le
       numéro passe à la ligne et la barre monte à 95 px. 110 px couvrent le cas
       le plus haut mesuré, l'encoche iOS en plus.
       (Même valeur que la règle de style.css, tenues ensemble.) */
    padding-bottom: 0;
}

.footer {
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
}
/* body.mobile-nav-open { overflow: hidden } est géré dans style.css */


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

/* Par défaut : nav transparent, fondu dans la page.
   Island activé uniquement au scroll (.scrolled) ou menu ouvert (.menu-open) */
.nav {
    padding: 0 20px;
    position: relative;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Activation island */
.header.scrolled .nav,
.header.menu-open .nav {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    box-shadow: 0 2px 14px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.05) !important;
    border-color: rgba(255,255,255,0.65) !important;
}

/* Island + menu ouvert : coins bas carrés pour la soudure */
.header.menu-open .nav {
    border-radius: 18px 18px 0 0 !important;
}

.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-menu-backdrop { display: block; }
.mobile-menu-overlay  { display: block; }


/* ════════════════════════════════════════════════════════════════
   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: 86px; }
.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 : la réserve pour la sticky call bar est désormais portée par
   `body` (110 px + encoche). Ces 90 px s'y ajoutaient et creusaient 200 px de
   vide sous les liens légaux — il ne reste qu'une respiration normale. */
.footer-bas { padding-bottom: 28px !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; }