/* ================================================================
   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; }

/* BLOC DE SAISIE — DANS LE FLUX, SOUS LA VOITURE.
 *
 * Il était posé en absolu à `top: 73%` de la scène, pour venir se caler sur
 * la plaque DESSINÉE de la voiture. Deux défauts en découlaient :
 *   • 73 % est un réglage visuel fait pour une hauteur donnée ; dès que la
 *     scène changeait de taille, le bloc glissait ailleurs ;
 *   • posé en absolu, il ne réserve aucune place, donc rien ne garantissait
 *     que le bouton ne vienne pas recouvrir la plaque.
 *
 * Deux éléments qui se suivent dans un FLUX ne peuvent pas se chevaucher :
 * le défaut disparaît par construction au lieu d'être arbitré. C'est déjà le
 * parti retenu pour les écrans courts et larges (style.css, bloc 4). */
/* Ses deux enfants ne vivent plus au même endroit : la plaque est POSÉE SUR
 * la voiture, le bouton la SUIT dans le flux. Le conteneur ne doit donc plus
 * imposer de mise en page — ni flex, ni écart, ni largeur contrainte.
 *
 * ⚠ `position: static` est délibéré et non un oubli : c'est lui qui fait que
 * la plaque, en absolu, se cale sur `.car-viewer` (le premier ancêtre
 * positionné) et non sur ce bloc-ci. C'est la voiture qui sert de repère. */
.overlay-saisie {
    position: static    !important;
    inset: auto         !important;
    transform: none     !important;
    width: 100%         !important;
    padding: 0          !important;
    pointer-events: none !important;
    display: block      !important;
    background: transparent !important;
    border-radius: 0    !important;
}

/* PLAQUE — incrustée sur la calandre, à la place du rectangle dessiné.
 *
 * `top` est calculé, pas deviné : `PLATE_FY = 0.72` dans hero.js est la
 * fraction MESURÉE sur l'image face avant (haut de la plaque à 72 % de la
 * hauteur). On la réutilise telle quelle, pour que la version mobile et la
 * version bureau désignent le même point du véhicule.
 *
 * ⚠ Les `!important` sont indispensables : hero.js écrit `top`, `left`,
 * `width` et `transform` EN LIGNE à toutes les tailles, sans garde mobile,
 * et un style en ligne bat toute feuille de style (Contexte §39).
 *
 * La largeur ne suit PAS `PLATE_FW` (20 % de l’image, soit ~70 px sur un
 * téléphone) : c'est illisible et sous la cible tactile de 48 px. On prend le
 * plus petit de 195 px et 58 % — la plaque déborde un peu du rectangle
 * dessiné, compromis assumé en faveur de la saisie. */
/* (Mise en page PAR IMAGE : repli seulement. En 3D, hero.js pose la plaque sur
   la plaque projetée du modèle, en ligne — ces !important l'en empêcheraient.) */
.car-viewer.repli-image .overlay-plaque {
    position: absolute  !important;
    top: calc(var(--h-voiture) * 0.72) !important;
    bottom: auto        !important;
    left: 50%           !important;
    transform: translateX(-50%) !important;
    width: min(195px, 58%) !important;
    max-width: none     !important;
    margin: 0           !important;
    opacity: 1          !important;
    pointer-events: auto !important;
    z-index: 12         !important;
}

/* BOUTON — sous le véhicule, dégagé. Il est le seul enfant de
 * `.overlay-saisie` resté dans le flux : il se place donc naturellement
 * après la voiture, et aucun chevauchement n’est possible. */
.overlay-cta {
    position: relative  !important;
    top: auto           !important;
    left: auto          !important;
    transform: none     !important;
    width: 100%         !important;
    margin-top: 22px    !important;
    padding: 0 16px     !important;
    opacity: 1          !important;
    pointer-events: auto !important;
    z-index: 10         !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
   ════════════════════════════════════════════════════════════════ */

/* ⚠ LES RÈGLES `.overlay-plaque` ET `.overlay-cta` ONT ÉTÉ RETIRÉES D'ICI.
   Elles posaient toutes deux `position: relative`, ce qui convenait quand la
   plaque et le bouton s'empilaient tous les deux sous la voiture. Depuis que
   la plaque est INCRUSTÉE sur la calandre, elles vivent plus haut dans ce
   fichier (section « BLOC DE SAISIE »), et les garder ici les écrasait : à
   égalité de spécificité et de `!important`, c'est la DERNIÈRE règle du
   fichier qui l'emporte. Mesuré dans Chrome : la plaque retombait à 100 % de
   la hauteur de la voiture, donc juste dessous, au lieu de 72 %.
   Ne pas redéclarer ces deux sélecteurs après ce point. */

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

/* SCÈNE — colonne : voiture, puis plaque, puis bouton.
 *
 * ⚠ `width: 100%` n'est pas décoratif. Ce bloc n'a AUCUN contenu dans le
 * flux (tout est en absolu) et `aspect-ratio: unset` lui retire sa dernière
 * source de largeur : depuis que `.car-stage` centre ses enfants, il
 * retombait à `fit-content`, donc à ZÉRO. La voiture disparaissait et le
 * bloc de saisie, large de 90 % de rien, empilait plaque et bouton au même
 * endroit. C'est la cause des DEUX défauts constatés, pas seulement du premier.
 *
 * `height: auto` : la hauteur vient désormais du contenu réel, puisqu'il est
 * dans le flux. Plus de réglage en `vw` à retoucher à chaque appareil. */
.car-viewer {
    position: relative          !important;
    aspect-ratio: unset         !important;
    width: 100%                 !important;
    height: auto                !important;
    overflow: visible           !important;
    display: block              !important;
    /* REPÈRES DE LA VOITURE.
       `--h-voiture` est la hauteur RÉELLE de la vue face avant une fois
       posée en pleine largeur : elle sert à placer la plaque par le calcul
       plutôt que par un pourcentage de la scène — la scène contient aussi le
       bouton, donc « 72 % de la scène » ne désigne pas le véhicule.
       2.004 = 1120 / 559, les dimensions natives de `clio-face-1120.webp`.
       `--padding-scene` est repris de `.car-stage` pour que les deux restent
       synchronisés : changer l’un sans l’autre décalerait la plaque. */
    --ratio-voiture: 2.004;
    --h-voiture: calc((100vw - var(--padding-scene, 12px) * 2) / var(--ratio-voiture));
}

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

/* Image active : DANS LE FLUX, entière, au-dessus de la plaque.
 * `contain` et non `cover` : `cover` recadrait la voiture pour remplir une
 * boîte imposée, et sur un écran étroit c'est l'avant du véhicule — donc sa
 * plaque — qui sortait du cadre. `contain` la montre en entier, quitte à
 * occuper moins de hauteur. */
/* Pleine largeur, hauteur DÉDUITE du ratio natif. Aucun `object-fit` ne
 * s’applique alors — la boîte a exactement les proportions de l’image, donc
 * ni recadrage ni bande noire. C’est ce qui rend `--h-voiture` exact, et
 * donc la plaque posée au bon endroit. */
.car-image.active {
    display: block        !important;
    position: relative    !important;
    inset: auto           !important;
    width: 100%           !important;
    height: auto          !important;
    max-width: 100%       !important;
    max-height: none      !important;
    margin: 0             !important;
    object-fit: contain   !important;
    object-position: center !important;
    opacity: 1            !important;
    filter: none          !important;
    transform: none       !important;
    pointer-events: none  !important;
}

/* Onglets masqués en REPLI (sans 3D, pas de panneau de saisie mobile) ; stats masquées. */
.hero-immersif.repli-image .tabs-hero { display: none !important; pointer-events: none !important; }
.hero-stats { display: none !important; pointer-events: none !important; }

/* AÉRATION — le hero n'est plus une scène à hauteur imposée mais une colonne
 * qui se lit du titre au bouton. `height: auto` avec un plancher : sur un
 * téléphone très haut, on garde l'écran occupé sans jamais étirer le contenu.
 * `justify-content: center` le maintient centré dans cette hauteur. */
.hero-immersif {
    height: auto            !important;
    min-height: 100svh      !important;
    justify-content: center !important;
    padding-top: 84px       !important;
    padding-bottom: 28px    !important;
}
.car-stage {
    flex: none              !important;
    width: 100%             !important;
    /* Exposé en variable : `.car-viewer` s’en sert pour calculer la hauteur
       de la voiture, donc la position de la plaque. Les deux doivent bouger
       ensemble. */
    --padding-scene: 12px;
    padding: 0 var(--padding-scene) !important;
}
.hero-top-text { padding: 0 20px 20px !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;
}

/* 17 px et non plus 20 : à 20 px la plaque saisie (143 px) débordait du champ
   (98 px) et défilait — seul « 123 CD » restait visible. 17 px ≥ 16 px : pas de
   zoom iOS au focus. Voir .plate-input dans css/style.css. */
.plate-input {
    min-height: 48px !important;
    font-size: 17px  !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; }


/* ════════════════════════════════════════════════════════════════
   K. HERO EN 3D SUR TÉLÉPHONE (2026-10-08)
   Mode par défaut ; `.repli-image` (posé par hero.js si la 3D est
   impossible, en échec ou lente) rend la mise en page par image ci-dessus.
   Colonne : titre → voiture 3D (300 px) → bouton → onglets en pastilles
   défilables. Mêmes rotations de caméra qu'en bureau (js/clio3d.js).
   ⚠ Sélecteurs plus spécifiques que ceux des sections A–B (qui gardent
   leurs !important pour le repli) : ici ils l'emportent.
   ════════════════════════════════════════════════════════════════ */

/* Espacements resserrés : titre, voiture et bouton tiennent dans le premier écran. */
.hero-immersif:not(.repli-image) { padding-top: 74px !important; padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
.hero-immersif:not(.repli-image) .hero-top-text { padding: 0 20px 4px !important; }
.hero-immersif:not(.repli-image) .hero-title { margin-bottom: 4px; }
.hero-immersif:not(.repli-image) .hero-top-link { margin-top: 8px; }

/* Voiture : boîte de 300 px (280 px sur petit écran), le canevas s'y cale. */
.car-viewer:not(.repli-image) { height: 300px !important; }
.car-viewer:not(.repli-image) .car-image,
.car-viewer:not(.repli-image) .car-image.active { display: none !important; }
/* Place réservée sous la voiture pour le bouton (posé en absolu juste dessous). */
.hero-immersif:not(.repli-image) .car-stage { padding-bottom: 66px !important; }

/* Bouton : sous la voiture, pleine largeur ; bat le positionnement en ligne de hero.js. */
.car-viewer:not(.repli-image) .overlay-saisie .overlay-cta {
    position: absolute  !important;
    top: calc(100% + 10px) !important;
    left: 0             !important;
    width: 100%         !important;
    transform: none     !important;
    margin-top: 0       !important;
    padding: 0 4px      !important;
}
/* Plaque : posée par hero.js sur la plaque du modèle ; largeur tactile garantie. */
.car-viewer:not(.repli-image) .overlay-plaque { position: absolute !important; z-index: 12 !important; }
.car-viewer:not(.repli-image) .overlay-plaque.visible { opacity: 1 !important; pointer-events: auto !important; }
.car-viewer:not(.repli-image) .overlay-plaque:not(.visible) { opacity: 0 !important; pointer-events: none !important; }

/* Panneau de saisie (VIN, code moteur, modèle) : en haut de la voiture, compact. */
.car-viewer:not(.repli-image) .overlay-float {
    display: block      !important;
    top: 4px            !important;
    width: calc(100% - 8px) !important;
    pointer-events: none !important;
}
.car-viewer:not(.repli-image) .overlay-float.visible { pointer-events: auto !important; }
.car-viewer:not(.repli-image) .float-panel { padding: 12px 14px 10px; }
.car-viewer:not(.repli-image) .float-input { min-height: 46px; font-size: 16px; }   /* 16 px : pas de zoom iOS */

/* Attente de la 3D : surcouches masquées (le squelette tient la place). */
.car-viewer:not(.repli-image):not(.vue-3d) .overlay-plaque,
.car-viewer:not(.repli-image):not(.vue-3d) .overlay-cta,
.car-viewer:not(.repli-image):not(.vue-3d) .overlay-float { opacity: 0 !important; pointer-events: none !important; }

/* Onglets : mini-pastilles défilables au pouce, sous le bouton. */
.hero-immersif:not(.repli-image) .tabs-hero {
    display: flex       !important;
    width: calc(100% - 24px);
    max-width: none;
    margin-top: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    flex-wrap: nowrap   !important;
}
.hero-immersif:not(.repli-image) .tabs-hero::-webkit-scrollbar { display: none; }
.hero-immersif:not(.repli-image) .tabs-hero .tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 13px;
    font-size: 12.5px;
    scroll-snap-align: center;
}

/* Petit écran (iPhone SE…) : voiture à 280 px pour que le bouton reste au-dessus de la barre d'appel. */
@media (max-height: 700px) {
    .car-viewer:not(.repli-image) { height: 280px !important; }
    .hero-immersif:not(.repli-image) { padding-top: 62px !important; }
    /* Lien secondaire « ou parcourir notre boutique » retiré : la boutique reste dans le menu. */
    .hero-immersif:not(.repli-image) .hero-top-link { display: none; }
}