/* =========================================================
   EVH AUTOTRADE — v16.1 OVERRIDES (mobile tighten)
   Fichier séparé : mobile-tighten.css
   Objectif : réduire CTA + logo/texte en mobile, footer + compact
   ========================================================= */

/* -------- Header + Logo + Texte de marque (mobile) -------- */
@media (max-width: 859.98px){
  :root{ --hdr-h:54px }                     /* header un peu plus fin */
  .header-inner{ padding: 0 .8rem; }
  .logo img{ height: 44px; }                /* ↓ 52 -> 44 */
  .brand .evh, .brand .autotrade{
    font-size: clamp(1rem, 2.4vw, 1.02rem); /* ↓ taille texte logo */
    letter-spacing: .25px;
  }
  .brand{ gap: .2rem; }
}

/* Très petits écrans : on simplifie davantage */
@media (max-width: 420px){
  :root{ --hdr-h:50px }
  .logo img{ height: 40px; }                /* ↓ encore */
  .brand .evh{ display:none; }              /* garde “AUTOTRADE” seul */
  .brand .autotrade{ font-size: .9rem; }    /* discrète mais lisible */
}

/* -------- Hero CTA “Découvrez notre catalogue” (mobile) -------- */
@media (max-width: 680px){
  .hero-cta{ left:4.5%; bottom:57%; }      /* un poil plus bas et à gauche */
  .hero-cta .btn{
    padding: .6rem .9rem;                   /* ↓ padding */
    min-height: 38px;                       /* ↓ hauteur mini */
    font-size: 16px;                       /* ↓ taille texte */
    font-weight: 700;                       /* un cran moins “épais” */
    box-shadow: 0 4px 12px rgba(229,62,62,.22); /* ombre plus soft */
    border-radius: 999px;
  }
}
@media (max-width: 420px){
  .hero-cta .btn{
    padding: .55rem .8rem;                  /* encore plus compact */
    min-height: 36px;
    font-size: 16px;
    box-shadow: 0 3px 10px rgba(229,62,62,.2);
  }
}

/* -------- Boutons globaux en mobile (harmonisation) -------- */
@media (max-width: 680px){
  .btn{
    padding: .65rem 1rem;
    min-height: 38px;
    font-size: .9rem;
    font-weight: 700;
  }
}

/* -------- Menu : burger un peu plus compact -------- */
@media (max-width: 859.98px){
  .nav-btn{ width: 36px; height: 36px; }    /* icône burger plus petite */
  .nav-btn .bar, .nav-btn::before, .nav-btn::after{
    width: 20px; left: 8px;
  }
  .nav-btn .bar{ top: 17px }
  .nav-btn::before{ top: 11px }
  .nav-btn::after{ top: 23px }
}

/* -------- Footer : encore plus discret en mobile -------- */
@media (max-width: 680px){
  .footer-wrap{ padding: 1.2rem .9rem; }
  .f-cols{ gap: .6rem; }
  .f-col h4{ font-size: .85rem; }
  .site-footer{ font-size: .82rem; }
  .f-bottom{ font-size: .78rem; padding: .65rem .9rem; }
}
/* =========================================================
   EVH AUTOTRADE — v16.2 OVERRIDES (mobile harmony)
   Coller APRÈS la v16.1 dans mobile-tighten.css
   Objectifs :
   - Page DÉTAIL : images + petites, notice douane grise, titre sur 1 ligne,
     bloc prix aligné à droite
   - Page ACCUEIL : vignettes catalogue plus grandes en mobile
   ========================================================= */

/* -----  A) PAGE DÉTAIL (vehicle.html)  ----- */
@media (max-width: 680px){
  /* 1) Image de présentation : plus compacte */
  .hero-img{
    height: auto;                 /* était 360/420 → évite de “dépasser” l’écran */
    border-radius: 12px;
  }
  /* Galerie sous l’image : plus fine */
  .gallery img{
    height: 100%;                  /* était 130px */
    border-radius: 10px;
  }

  /* 2) Titre sur une seule ligne + plus harmonieux */
  .vehicle-title h1{
    font-size: clamp(1.08rem, 3.8vw, 1.35rem);
    line-height: 1.12;
    overflow: hidden;
    text-overflow: ellipsis;       /* coupe proprement si trop long */
    margin-bottom: .25rem;
  }
  .vehicle-meta{
    font-size: .9rem;              /* cohérent avec le gris “modèle / réf.” */
  }

  /* 3) Bloc prix : un peu plus à droite + allégé */
  .vehicle-header{
    grid-template-columns: 1fr auto; /* garantit le bloc prix à droite */
    align-items: start;
  }
  .price-stack{
    text-align: right;             /* override v16 qui passait en left */
    margin-left: .5rem;
  }
  .price-big{
    font-size: 1.25rem;            /* ↓ pour laisser la place au titre à gauche */
    margin-top: .15rem;
  }
  .price-sub{
    margin-top: .2rem;
  }

  /* 4) Mention “dédouanement…” : grise, petite, sans encadré */
  .notice--customs{
    display: inline-block;
    background: transparent !important;
    border: 0 !important;
    color: var(--muted) !important;          /* même gris que .vehicle-meta */
    font-size: .86rem !important;            /* plus discret */
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 5) Spécifs : aérer et réduire légèrement */
  .specs-card{ padding: .9rem; }
  .specs-grid{ gap: .65rem .9rem; }
  .spec-item{ font-size: .88rem; }
  .spec-label{ margin-bottom: .08rem; }
}

/* -----  B) PAGE ACCUEIL — vignettes du CATALOGUE  ----- */
@media (max-width: 680px){
  /* Images de cartes plus grandes pour la lisibilité produit */
  .thumb{
    height: 100% !important;                 /* était 220px */
    object-fit: contain;
    object-position: center;
  }
  /* Un peu plus d’air sous l’image */
  .body{ padding: .9rem; }
  .name{ font-size: 1rem; }        /* garde un texte compact */
}

/* -----  C) Détails généraux (harmonisation mobile)  ----- */
@media (max-width: 680px){
  .content-grid{ gap: 1rem; }
  .card-title{ font-size: .98rem; }
  .equip-list{ font-size: .92rem; }
  .cta-card .btn{
    font-size: .92rem;             /* cohérent avec le reste */
    padding: .65rem 1rem;
  }
   /* =========================================================
   v16.3 – CTA hero plus petit + plus bas
   À mettre APRÈS tous les autres overrides
   ========================================================= */

/* Desktop / tablettes (>= 681px) */
@media (min-width: 681px){
  .hero-cta{
    left: 5.5%;
    bottom: 57%;                 /* ↓ était ~28px → plus proche du bas */
  }
  .hero-cta .btn{
    padding: .55rem .9rem;        /* ↓ taille globale */
    font-size: 16px;            /* ↓ texte */
    min-height: 36px;
    box-shadow: 0 4px 12px rgba(229,62,62,.22);
  }
}

/* Mobile (<= 680px) : encore plus compact + un peu plus bas */
@media (max-width: 680px){
  .hero-cta{
    left: 4%;
    bottom: 57%;                 /* ↓ était 14–18px */
  }
  .hero-cta .btn{
    padding: .48rem .72rem;       /* ↓ padding */
    font-size: 16px;            /* ↓ texte */
    min-height: 32px;             /* ↓ hauteur mini */
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(229,62,62,.20);
  }
}

/* Très petits écrans */
@media (max-width: 420px){
  .hero-cta{ bottom: 57%; }
  .hero-cta .btn{
    padding: .45rem .68rem;
    font-size: 16px;
    min-height: 30px;
  }
}
   /* =========================================================
   v16.5 – Pastille énergie en haut-droite de la photo Hero
   ========================================================= */

/* Positionnement par défaut (toutes tailles) */
.image-card{ position: relative; }
.energy-badge{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
}
.energy-badge .pill{
  display: inline-block;
  padding: .28rem .55rem;
  font-size: .82rem;
  border-radius: 999px;
  line-height: 1;
}

/* Mobile : un peu plus petit */
@media (max-width: 680px){
  .energy-badge{ top: 8px; right: 8px; }
  .energy-badge .pill{
    padding: .24rem .48rem;
    font-size: .78rem;
  }
}
   /* =========================================================
   v16.6 – Détail véhicule (mobile) : prix sous le titre,
   pastille énergie ajustée, mention douane en petit gris
   ========================================================= */
@media (max-width: 680px){
  /* Empile PRIX sous TITRE */
  .vehicle-header{
    grid-template-columns: 1fr !important;
    grid-template-areas: "title" "price";
    align-items: start;
  }
  .vehicle-title{ grid-area: title; }
  .price-stack{
    grid-area: price;
    text-align: left !important;
    margin: .25rem 0 0 .15rem;
  }

  /* Titre compact (1 ligne, tronqué si trop long) */
  .vehicle-title h1{
    font-size: clamp(1.06rem, 3.7vw, 1.30rem);
    line-height: 1.18;
    margin-bottom: .1rem;
     overflow: hidden; text-overflow: ellipsis;
  }

  /* Prix plus discret */
  .price-big{
    font-size: .98rem;          /* ↓ taille prix */
    font-weight: 800;
    margin-top: .05rem;
  }

  /* Mention douane : petite, grise, entre parenthèses */
  .price-sub{ margin-top: .05rem; }
  .price-sub .notice--customs{
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--muted) !important;
    font-size: .76rem !important;   /* très petit */
    line-height: 1.25;
  }
  .price-sub .notice--customs::before{ content:"("; }
  .price-sub .notice--customs::after{ content:")"; }

  /* Pastille énergie (BEV/PHEV) : un peu plus bas et plus à gauche */
  .energy-badge{ top: 12px; right: 14px; }   /* ↓ vers le bas, ← vers la gauche */
  .energy-badge .pill{
    padding: .24rem .48rem;
    font-size: .78rem;
  }
}

/* Desktop/tablettes : légère harmonisation de la pastille aussi */
@media (min-width: 681px){
  .energy-badge{ top: 14px; right: 16px; }
}
   /* =========================================================
   v16.7 — Mobile tweaks (logo + images + alignements)
   ========================================================= */

/* A) LOGO : garder "E.V.H." visible et grossir légèrement l’image */
@media (max-width: 859.98px){
  .logo img{ height: 48px; }                        /* +4px vs v16.1 */
  .brand{ gap: .28rem; }
  .brand .evh{ display: inline !important; }        /* on ré-affiche EVH */
  .brand .evh, .brand .autotrade{
    font-size: clamp(1rem, 2.2vw, 1.02rem);       /* très léger + lisible */
    letter-spacing: .25px;
  }
}
@media (max-width: 420px){
  .logo img{ height: 44px; }                        /* était 40px */
  .brand .evh{ display: inline !important; }        /* ne plus masquer */
  .brand .evh, .brand .autotrade{
    font-size: 1rem;                               /* compact sur très petits écrans */
  }
}

/* B) DÉTAIL — images : réduire encore la 1ère, empêcher tout débordement */
@media (max-width: 680px){
  .image-card{ position: relative; overflow: hidden; }
  .hero-img{
    height: auto;                                  /* ↓ 300 → 270 */
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: .9rem;
  }
  .gallery img{
    height: 100%;                                   /* ↓ 96 → 88 */
    border-radius: 10px;
  }
}

/* C) DÉTAIL — aligner les deux encadrés (Spécifs / Équipements) */
@media (max-width: 680px){
  .content-grid{ gap: .9rem; }
  .specs-card, .equip-card{
    padding: .9rem;                                 /* padding identique */
  }
  .equip-card{ margin-top: .9rem; }                 /* même marge que l'écart global */
}

/* D) DÉTAIL — pastille énergie : léger décalage demandé (↘ et ←) */
@media (max-width: 680px){
  .energy-badge{ top: 14px; right: 18px; }
  .energy-badge .pill{ font-size: .78rem; padding: .24rem .5rem; }
}

/* E) DÉTAIL — prix sous le titre, plus discret, et mention douane en (petit gris) */
@media (max-width: 680px){
  .vehicle-header{
    grid-template-columns: 1fr !important;
    grid-template-areas: "title" "price";
    align-items: start;
  }
  .vehicle-title{ grid-area: title; }
  .price-stack{
    grid-area: price;
    text-align: left !important;
    margin: .2rem 0 0 .1rem;
  }
  .price-big{
    font-size: .98rem;                               /* taille réduite */
    font-weight: 800;
    margin-top: .05rem;
  }
  .price-sub{ margin-top: .05rem; }
  .price-sub .notice--customs{
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--muted) !important;                  /* gris des metas */
    font-size: .76rem !important;                    /* très petit */
    line-height: 1.25;
  }
  .price-sub .notice--customs::before{ content:"("; }
  .price-sub .notice--customs::after{ content:")"; }
}
   /* =========================================================
   v16.7.1 — Anti-overflow photo (mobile)
   Empêche la grande image de déborder sur la droite
   ========================================================= */
@media (max-width: 680px){
  /* évite toute barre de scroll horizontale sur la fiche */

  /* le conteneur et la carte image ne laissent rien dépasser */
  .container--page{ overflow-x: hidden; }
  .image-card{
    position: relative;
    overflow: hidden;              /* masque tout débordement interne */
    padding-left: .75rem;          /* un poil moins de padding latéral */
    padding-right: .75rem;
  }

  /* image héro : bloc, largeur sûre, pas de dépassement subpixel */
  .hero-img{
    display: block;
    width: calc(100% - 2px);       /* évite les 1–2px de dépassement sur certains mobiles */
    max-width: 100%;
    height: auto;                 /* un cran plus bas vs 270 pour + de marge */
    object-fit: cover;
    border-radius: 12px;
    margin: 0 auto .9rem;          /* recentre proprement */
    transform: translateZ(0);      /* anti-blur/overflow GPU */
  }

  /* galerie : s’assure de rester dans la largeur */
  .gallery{
    overflow: hidden;
    margin-left: -1px;             /* neutralise d'éventuels arrondis de grille */
    margin-right: -1px;
  }
  .gallery img{
    height: 100%;                  /* très léger - */
  }
}
   @media (max-width: 680px) {
  .quick-specs {
    padding: 8px 10px;
    font-size: 11px;
    gap: 6px;
  }
  .qs-label {
    font-size: 9px;
  }
  .qs-value {
    font-size: 12px;
  }
  /* Sur très petit écran, réduire les labels */
  @media (max-width: 480px) {
    .qs-label {
      font-size: 8px;
    }
    .qs-value {
      font-size: 11px;
    }
     @media (max-width: 680px) {
  .quick-specs {
    padding: 8px 10px;
    font-size: 11px;
    gap: 6px;
  }
  .qs-label {
    font-size: 9px;
  }
  .qs-value {
    font-size: 12px;
    font-weight: 700;
  }
  /* Sur très petit écran */
  @media (max-width: 480px) {
    .qs-label {
      font-size: 8px;
    }
    .qs-value {
      font-size: 11px;
    }
  }
}