/* detail.css — modales et fiche véhicule : onglets, options, galerie, tableau clé/valeur, pied de page. */
/* modal */
.ov{position:fixed;inset:0;background:rgba(20,26,34,.55);z-index:60;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow:auto}
.ov.show{display:flex}
.modal{background:var(--card);max-width:960px;width:100%;border:1px solid var(--line)}
/* Fiche voiture en plein écran */
#ovDetail{padding:0}
/* 100dvh et non 100vh : sur Safari iOS, 100vh vaut la hauteur écran BARRE D'ADRESSE RÉTRACTÉE,
   donc la fiche déborde d'une centaine de pixels tant que la barre est visible et la page
   sursaute quand elle se rétracte. dvh suit la hauteur réellement affichée. */
#ovDetail .modal{max-width:none;min-height:100dvh;border:none}
#ovDetail .mh{position:sticky;top:0;background:var(--card);z-index:5}
.mh .x.back{width:auto;height:auto;font-size:14px;font-weight:700;color:var(--blue);white-space:nowrap;letter-spacing:.02em}
.modal .mh{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal .mh h2{font-size:22px}
.x{font-size:22px;color:var(--grey);width:34px;height:34px}
.detail{display:grid;grid-template-columns:1.1fr 1fr;gap:0}
/* min-width:0 : sans ça, une longue bande de vignettes (jusqu'à 40) impose sa largeur
   à la colonne galerie et écrase la colonne specs. Avec 0, les fr sont respectés et
   les vignettes défilent (overflow-x) au lieu d'élargir la colonne. */
.detail .big,.detail .info{min-width:0}
.detail .big{background:var(--soft);display:flex;flex-direction:column;align-content:flex-start}
/* Hauteur FIXE (pas flex:1) : sinon la grille étire .big pour égaler la colonne specs (longue),
   .gstage grandit et l'image contain (plafonnée) laisse un grand vide gris AU-DESSUS des
   vignettes. Avec une hauteur fixe, image + vignettes restent groupées en haut et l'éventuel
   espace gris tombe en bas de la colonne (comblage, pas de trou au milieu). */
.gstage{position:relative;flex:0 0 auto;height:56vh;max-height:520px}
.detail .big .gstage img{width:100%;height:100%;object-fit:contain;display:block}
.gnav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.45);color:var(--card);font-size:22px;display:flex;align-items:center;justify-content:center;z-index:2}
.gnav:hover{background:rgba(0,0,0,.7)}
.gprev{left:8px}.gnext{right:8px}
.gcount{position:absolute;bottom:8px;right:10px;background:rgba(0,0,0,.55);color:var(--card);font-size:12px;padding:2px 8px;border-radius:10px}
.gthumbs{display:flex;gap:6px;padding:8px;overflow-x:auto}
/* .gthumb était un <img onclick> : la navigation photo était souris uniquement. C'est
   désormais un <button> qui CONTIENT l'image — d'où les styles répartis sur les deux :
   dimensions et bordure sur le bouton, recadrage sur l'image. */
.detail .big .gthumbs .gthumb{width:62px;height:46px;padding:0;border-radius:4px;opacity:.55;cursor:pointer;flex:0 0 auto;border:2px solid transparent;max-height:none;overflow:hidden;background:none;display:block}
.detail .big .gthumbs .gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.detail .big .gthumbs .gthumb.on{opacity:1;border-color:var(--blue)}
.detail .info{padding:20px 22px}
.kv{display:flex;justify-content:space-between;border-bottom:1px solid var(--soft);padding:9px 0;font-size:14px}
.kv span:first-child{color:var(--grey)}
.kv span:last-child{font-weight:600}
.bigprice{font-family:"Barlow Condensed";font-size:40px;font-weight:700;margin:14px 0 2px}
.note{font-size:12px;color:var(--grey);padding:12px 20px;border-top:1px solid var(--line);background:var(--soft)}
.foot{max-width:1580px;margin:0 auto;padding:24px 26px 50px;color:var(--grey);font-size:12.5px;border-top:1px solid var(--line)}
/* Avertissement de purge du panier : véhicules restaurés depuis la session précédente qui ne
   sont plus au stock. Doit se voir sans être alarmant — c'est une information, pas une erreur. */
.cartnote{background:var(--warn-bg);border-left:3px solid var(--warn);padding:9px 12px;margin-bottom:12px;font-size:12.5px;color:var(--ink)}
.brief{padding:18px 20px}
.brief textarea{width:100%;min-height:90px;border:1px solid var(--line);padding:11px;font-family:inherit;font-size:14px;resize:vertical}
/* .ex est un <button> depuis le lot 2b : display:block + width:100% + text-align:left pour
   retrouver exactement le rendu qu'avait le <div> (pleine largeur, texte à gauche). */
.brief .ex{font-size:12.5px;color:var(--blue);cursor:pointer;padding:6px 0;border-bottom:1px dashed var(--line);display:block;width:100%;text-align:left;font-family:inherit}
@media(max-width:1000px){.wrap{grid-template-columns:1fr}.rail{position:static;max-height:none;overflow:visible}nav{display:none}.detail{grid-template-columns:1fr}}

/* ===================== RESPONSIVE (étape 4) ===================== */

/* Chips de repli de la nav : uniquement là où <nav> est masquée, sinon on aurait Stock et
   Recherche IA en double sur desktop. */
.navmob{display:none}
@media(max-width:1000px){ .navmob{display:inline-flex} }

@media(max-width:1000px){
  /* En-tête compacté : sur un sticky, chaque pixel est pris au contenu. La baseline du logo
     suffit à l'identité, la ligne « MARCHÉ B2B EUROPÉEN » part. */
  .hrow{gap:12px;padding:11px 16px}
  .logo{font-size:21px}
  .logo small{display:none}
  .search{flex-basis:100%;max-width:none;order:3}
  .tel{font-size:16px}
  .subrow{gap:9px;padding:7px 16px}
  .modebar{padding:7px 16px;font-size:12px}
  .modebar-cta{margin-left:0}
  .stats{gap:24px;padding:13px 16px}
  .wrap{padding:16px 16px 40px;gap:18px}
  .foot{padding:20px 16px 40px}
  /* La galerie de fiche prenait 56vh de haut sur une colonne devenue pleine largeur : l'image
     poussait les caractéristiques hors de l'écran. */
  .gstage{height:38vh}
  /* Barre de chips en bande défilable horizontalement, sur UNE ligne. Avec des cibles portées à
     44px, huit chips qui se replient occupaient trois lignes et faisaient monter le header
     sticky à 373px sur un écran de 812 — la moitié de la page. Le défilement latéral est le
     motif habituel des barres de filtres mobiles, et il garde le header à une hauteur tenable. */
  .subrow{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .subrow::-webkit-scrollbar{display:none}
  .subrow .chip{flex:0 0 auto}
  /* margin-left:auto (inline) pousserait le chip compte hors de la bande défilable. */
  #acctChip{margin-left:0 !important}
}

@media(max-width:620px){
  /* Header NON collant sous 620px. Compacté au maximum il occupait encore 273px sur un écran
     de 812 — un tiers de la page confisqué en permanence, sur l'appareil où l'espace est le
     plus rare.
     L'arbitrage tient parce que l'avertissement du mode interne ne repose pas que sur le
     bandeau : l'étiquette « Mon coût » est apposée sur CHAQUE montant (étape 3). Le signal
     voyage donc avec la donnée qu'il qualifie et reste visible en permanence, bandeau à
     l'écran ou non. Sur desktop, où la place ne manque pas, le header reste collant. */
  header{position:static}
  /* Vue LISTE (mode par défaut) : .ph était figée à 230px et .acts à 150px, soit 380px
     incompressibles sur un écran de 375. Sous 620px la ligne redevient une carte empilée —
     photo pleine largeur, actions côte à côte en dessous. */
  .grid.list .vc{flex-direction:column}
  .grid.list .ph{width:auto;flex:1 1 auto;aspect-ratio:4/3}
  .grid.list .acts{flex-direction:row;width:auto;padding:0 13px 13px}
  .grid.list .vc.open .vcx{grid-template-columns:1fr;padding:6px 13px 12px}
  .modal .mh h2{font-size:18px}
  .detail .info{padding:16px}
  .bigprice{font-size:32px}
}

/* Cibles tactiles : appliqué au POINTEUR GROSSIER uniquement. Élargir partout abîmerait la
   densité voulue du poste de travail, qui est l'usage principal — un acheteur coche des
   dizaines de facettes à la souris. Au doigt, en revanche, 24px de haut est une loterie.
   44px est le minimum recommandé par WCAG 2.5.5 / Apple HIG. */
@media(pointer:coarse){
  .chip{padding:10px 13px;min-height:44px}
  .opt{padding:9px 0;min-height:44px}
  .fav{width:44px;height:44px}
  .x{width:44px;height:44px}
  .gnav{width:44px;height:44px}
  .gthumb{width:74px;height:56px}
  .acts button{padding:13px 8px;min-height:44px}
  .dtab{padding:14px 10px;min-height:44px}
  .vctog{padding:10px 0;min-height:44px}
  .toggle button{padding:12px 14px;min-height:44px}
  .reset{padding:10px 4px;min-height:44px;display:inline-flex;align-items:center}
  .rbar select,.subrow select,select.full{min-height:44px}
  .modebar-cta{min-height:44px}
  .glegal button{padding:10px 6px;display:inline-block}
  /* Logo et téléphone : deux cibles de texte nu, hautes de 19 et 22px. Padding vertical plutôt
     que min-height, pour ne pas déformer l'alignement de la ligne d'en-tête. */
  .logo{padding:13px 0}
  .tel{padding:11px 0;display:inline-block}
  /* Curseurs de plage : la zone saisissable native est fine, on épaissit la piste. */
  input[type=range]{height:44px}
  /* Champ et bouton de recherche : c'est la cible la plus utilisée de l'application. */
  .search input{padding:13px 14px;min-height:44px}
  .search button{min-height:44px;min-width:52px}
  .mqsearch,.pfin,.gform input,.cptcreate input[type=email],.cptcreate input[type=text]{min-height:44px}
  .brief textarea{min-height:110px}
  .brief .ex{padding:12px 0;min-height:44px}
  .gform button{min-height:48px}
  .more{min-height:44px}
}