/* ==========================================================================
   NumiApp — Module VTC & Taxi (site public) — habillage dédié
   --------------------------------------------------------------------------
   Page d'accueil du module VTC (`/vtc`), d'après la maquette validée
   `design_web/maquette-vtc.html`. Le socle commun (jetons, boutons, cartes,
   formulaires, en-tête, pied de page) vit dans `numiapp-socle.css` : ici on ne
   pose que ce qui est propre au module.

   Règles tenues :
     - tout est porté par le scope `.numi-vtc` (aucun autre module touché) ;
     - l'accent du module (ambre VTC) est posé sur `.numi-vtc` via `--np-accent`
       (le socle fournit `--np-accent-700` / `-sof` de repli) ;
     - ZÉRO `!important` ;
     - les fonds pleins porteurs de texte blanc utilisent la nuance 700
       (#B45309), jamais l'ambre vif (#F59E0B, contraste 2,15:1 → interdit).
   ========================================================================== */

.numi-vtc {
    /* Accent VTC (source : sections.color Firestore = ambre / cab) */
    --np-accent:     #F59E0B;
    --np-accent-700: #B45309;
    --np-accent-sof: #FFFBEB;

    /* Variables locales du module */
    --nv-amber:      #F59E0B;
    --nv-amber-700:  #B45309;
    --nv-amber-soft: #FFFBEB;
    --nv-ink:        #0B1220;
    --nv-radius:     22px;

    background: var(--np-bg, #F7F9FA);
    color: var(--np-ink, #0B1220);
    font-family: 'Plus Jakarta Sans', 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------- bandeau */
.numi-vtc .nv-topbar {
    background: #0B1220;
    color: #fff;
    padding: 14px 0;
}
.numi-vtc .nv-brandline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.numi-vtc .nv-logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 900; font-size: 19px; letter-spacing: -.03em; color: #fff; }
.numi-vtc .nv-logo .nv-dot {
    width: 32px; height: 32px; border-radius: 10px;
    background: linear-gradient(140deg, var(--nv-amber-700), #7C2D12);
    display: grid; place-items: center; color: #fff; font-size: 17px;
}
.numi-vtc .nv-badge-brand {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(245,158,11,.18); color: #FCD34D; border: 1px solid rgba(245,158,11,.35);
}
.numi-vtc .nv-slogan { color: #B7C2D0; font-size: 13.5px; font-weight: 600; }
.numi-vtc .nv-topbar-cta { margin-left: auto; }

/* ------------------------------------------------------- sections du module */
.numi-vtc .nv-sect { padding: 34px 0; }
.numi-vtc .nv-sect-title { margin-bottom: 18px; }
.numi-vtc .nv-sect-title h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.numi-vtc .nv-sect-title p { color: var(--np-muted, #5B6B7F); font-size: 14px; margin-top: 4px; }

/* Le bloc de réservation reste collé au héros. */
.numi-vtc .nv-hero-wrap { position: relative; }

/* Barre d'action collante sur téléphone (le pouce atteint l'action) */
.numi-vtc .nv-sticky-cta {
    position: sticky; bottom: 0; z-index: 20;
    background: var(--np-glass, rgba(255,255,255,.9));
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--np-line, #E6EAF0);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    display: none;
}
.numi-vtc .nv-sticky-cta .np-btn { width: 100%; }

/* Réassurance : cartes alignées */
.numi-vtc .nv-trust .np-t { background: #fff; border: 1px solid var(--np-line, #E6EAF0); border-radius: 16px; }

/* Bloc « prix négocié » : l'accent porte le cadre, jamais du texte blanc. */
.numi-vtc .nv-nego .np-nego-h { color: var(--nv-amber-700); }

/* « Comment ça marche » : le titre de l'étape et sa description sur deux
   lignes (la maquette les laissait en ligne — collision de texte corrigée). */
.numi-vtc .np-step .np-step-t,
.numi-vtc .np-step .np-step-s { display: block; }

@media (max-width: 720px) {
    .numi-vtc .nv-topbar { padding: 10px 0; }
    .numi-vtc .nv-slogan { display: none; }
    .numi-vtc .nv-sect { padding: 24px 0; }
    .numi-vtc .nv-sticky-cta { display: block; }
    .numi-vtc .nv-trust { grid-template-columns: repeat(2, 1fr); }
}