/* ═══════════════════════════════════════════════════════════════════════════════════════
   Lot S1 « Stock confortable et proactif » (23/10, constats de JB + benchmark SpiderVO lot 1).
   Chargée APRÈS recadrage.css et reglages-page.css (front/index.html). Jetons « ap- » seulement.
   1. Vignettes reconnaissables (≥ 120 px de large), rien posé sur la photo ; 2. densité selon la
   largeur (serrée ≤ 1 600 px, aérée ≥ 1 900 px ; réglage « Densité de la liste ») ; 3. bandeau de
   synthèse et accès rapides ; 4. pastille d'état unique et « à traiter » ; 5. vitrine.
   Retour arrière : retirer la ligne <link … stock-s1.css> de front/index.html.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1–2. Vignette et densité ─────────────────────────────────────────────────────────── */
.st[data-stock]{--st-vl:120px;--st-vh:68px;--st-pad:3px;--st-gap:var(--ap-e3)}
@media (min-width:1601px){.st[data-stock]{--st-vl:136px;--st-vh:84px;--st-pad:6px}}
@media (min-width:1900px){.st[data-stock]{--st-vl:176px;--st-vh:110px;--st-pad:10px;--st-gap:var(--ap-e4)}}
.st[data-stock] .st-ph,.st[data-stock] .st-ln .st-ph{width:var(--st-vl);height:var(--st-vh);border-radius:var(--ap-r-m)}
.st[data-stock] .st-ln{padding-top:var(--st-pad);padding-bottom:var(--st-pad)}
.st[data-stock] .st-th,.st[data-stock] .st-ln{gap:var(--st-gap)}
/* Colonnes : photo, véhicule, année, énergie / type / photos, prix, état, en ligne / dossier, contacts / entrée, atelier. */
.st[data-stock][data-mode=client] .st-th,.st[data-stock][data-mode=client] .st-ln{grid-template-columns:var(--st-vl) minmax(220px,2.4fr) 84px 100px 128px 118px 96px 74px 106px}
.st[data-stock][data-mode=gestion] .st-th,.st[data-stock][data-mode=gestion] .st-ln{grid-template-columns:var(--st-vl) minmax(220px,2.4fr) 84px 116px 128px 118px 140px 84px 106px}
.st[data-stock][data-mode=diffusion] .st-th,.st[data-stock][data-mode=diffusion] .st-ln{grid-template-columns:var(--st-vl) minmax(220px,2.4fr) 84px 116px 128px 118px 96px 74px 106px}
@media (min-width:1800px){
  .st[data-stock][data-mode=client] .st-th,.st[data-stock][data-mode=client] .st-ln{grid-template-columns:var(--st-vl) minmax(280px,1.8fr) 88px 112px 132px 124px 104px 86px 80px 96px minmax(140px,.8fr) 112px}
  .st[data-stock][data-mode=client][data-sans-suivi] .st-th,.st[data-stock][data-mode=client][data-sans-suivi] .st-ln,
  [data-p-stock-suivi="masquees"] .st[data-stock][data-mode=client] .st-th,[data-p-stock-suivi="masquees"] .st[data-stock][data-mode=client] .st-ln{grid-template-columns:var(--st-vl) minmax(280px,1.8fr) 88px 112px 132px 124px 104px 86px 80px 112px}
  .st[data-stock][data-mode=gestion] .st-th,.st[data-stock][data-mode=gestion] .st-ln{grid-template-columns:var(--st-vl) minmax(300px,3fr) 96px 150px 140px 124px 200px 116px 136px}
  .st[data-stock][data-mode=diffusion] .st-th,.st[data-stock][data-mode=diffusion] .st-ln{grid-template-columns:var(--st-vl) minmax(300px,3fr) 96px 160px 140px 124px 120px 96px 150px}
  .st[data-stock] .st-ph,.st[data-stock] .st-ln .st-ph{width:var(--st-vl);height:var(--st-vh)}
}
/* Aéré (≥ 1 900 px) : lignes plus hautes, un peu plus d'air dans le texte. */
@media (min-width:1900px){
  .st[data-stock] .st-ln .st-ve b{font-size:var(--ap-t-l)}
  .st[data-stock] .st-ln .st-ve>span{margin-top:2px}
  .st[data-stock] .st-ln .st-px{font-size:var(--ap-t-xl)}
}
@media (max-width:1180px) and (min-width:641px){
  .st[data-stock] .st-th,.st[data-stock] .st-ln{grid-template-columns:var(--st-vl) minmax(170px,2fr) 76px 112px 112px 86px 66px 98px!important}
}
/* Plus rien sur la photo : le nombre de photos va à côté (ligne d'identité). */
.st[data-stock] .st-ph .st-nph,.st[data-stock] .st-ph .st-st{display:none}
.st-nphl{display:inline-flex;align-items:center;gap:3px;font-size:var(--ap-t-xs);font-weight:var(--ap-g-titre);color:hsl(var(--doux));white-space:nowrap}
.st-nphl svg.st-i{width:13px;height:13px}
.st-nphl.peu{color:hsl(var(--orange))}

/* ── 4. Pastille d'état unique, « à traiter » ─────────────────────────────────────────── */
.st-etat-c{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.st-etat{display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:var(--ap-r-s);font-size:var(--ap-t-s);font-weight:var(--ap-g-titre);white-space:nowrap;background:hsl(var(--gris-doux));color:hsl(var(--encre))}
.st-etat.orange{background:hsl(var(--orange-doux));color:hsl(var(--orange))}
.st-etat.rouge{background:hsl(var(--rouge-doux));color:hsl(var(--rouge))}
.st-etat.vert{background:hsl(var(--vert-doux));color:hsl(var(--vert))}
.st-etat.bleu{background:hsl(var(--azur-doux));color:hsl(var(--azur-fort))}
.st-atr{display:block;max-width:100%;font-size:var(--ap-t-xs);font-weight:var(--ap-g-titre);color:hsl(var(--orange));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st[data-stock] .st-ln[data-a-traiter]{box-shadow:inset 3px 0 0 hsl(var(--orange-vif))}
.st-th .st-th-px{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.st-th .st-th-age button{font-size:var(--ap-t-xs);text-transform:none;letter-spacing:0;color:hsl(var(--doux))}
.st-th .st-th-age button.on{color:hsl(var(--encre))}

/* ── 3. Bandeau : synthèse, accès rapides, à traiter d'abord, recherches ───────────────── */
.st-bandeau{display:flex;align-items:center;flex-wrap:wrap;gap:6px var(--ap-e2);margin:0 0 var(--ap-e2)}
.st-syn{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px;padding:2px;border-radius:var(--ap-r-m);background:hsl(var(--gris-doux))}
.st-syn-b{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border-radius:var(--ap-r-s);font-size:var(--ap-t-s);font-weight:var(--ap-g-titre);color:hsl(var(--doux));white-space:nowrap;transition:background .16s,color .16s}
.st-syn-b b{color:hsl(var(--encre));font-weight:var(--ap-g-chiffre)}
.st-syn-t b{font-size:var(--ap-t-m)}
.st-syn-b.on{background:hsl(var(--carte));color:hsl(var(--encre));box-shadow:var(--ombre-1)}
.st-syn .st-moy{display:inline-flex;padding:0 8px}
.st-syn-sep{width:1px;height:16px;margin:0 3px;background:hsl(var(--trait-fort))}
.st-bandeau .st-cpts{display:contents}
.st-bandeau .st-cp{height:26px;padding:0 9px;font-size:var(--ap-t-s)}
.st-bandeau .st-dd-cpts{display:none}
.st-band-fin{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.st-ordre,.st-enr{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:999px;font-size:var(--ap-t-s);font-weight:var(--ap-g-titre);color:hsl(var(--doux));background:hsl(var(--carte));box-shadow:0 0 0 1px hsl(var(--trait-fort)) inset;white-space:nowrap}
.st-ordre svg.st-i,.st-enr svg.st-i,.st-band-fin .st-f svg.st-i{width:13px;height:13px}
.st-ordre.on{color:hsl(var(--orange));box-shadow:0 0 0 1.5px hsl(var(--orange-vif)/.6) inset}
.st-bandeau .st-band-fin .st-f{height:26px;padding:0 9px;font-size:var(--ap-t-s)}
.st-menu.st-rech{left:auto;right:0;min-width:300px}
.st-rech-l{display:flex;align-items:center;gap:2px}
.st-rech-l>button:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-menu .st-rech-l>button.x{flex:none;width:28px;justify-content:center;padding:0;color:hsl(var(--doux))}
.st-menu .st-rech-l svg.st-i{width:13px;height:13px}
.st-aff{flex:none}

/* ── 5. Vitrine ─────────────────────────────────────────────────────────────────────────── */
.st-marques{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--ap-e2)}
.st-marques button{display:inline-flex;align-items:center;gap:6px;height:var(--ap-h-ctrl);padding:0 10px;border-radius:999px;font-size:var(--ap-t-s);font-weight:var(--ap-g-titre);background:hsl(var(--carte));box-shadow:0 0 0 1px hsl(var(--trait-fort)) inset;white-space:nowrap}
.st-marques button b{font-weight:var(--ap-g-chiffre);color:hsl(var(--doux))}
.st-marques button.on{background:hsl(var(--encre));color:#fff;box-shadow:none}
.st-marques button.on b{color:hsl(0 0% 100%/.75)}
.st-vitrine{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--ap-e3)}
@media (min-width:1900px){.st-vitrine{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--ap-e4)}}
.st-vc{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--ap-r-l);overflow:hidden;background:hsl(var(--carte));box-shadow:var(--ombre-1),0 0 0 1px hsl(var(--trait)) inset;cursor:pointer;animation:st-entree .32s var(--sortie) both;transition:box-shadow .16s}
.st-vc:hover{box-shadow:var(--ombre-2),0 0 0 1px hsl(var(--azur)/.35) inset}
.st-vc:focus-visible{outline:2px solid hsl(var(--azur));outline-offset:2px}
.st-vc[data-a-traiter]{box-shadow:var(--ombre-1),0 0 0 1px hsl(var(--trait)) inset,inset 0 3px 0 hsl(var(--orange-vif))}
.st-vc-ph{position:relative;display:block;aspect-ratio:4/3;background:hsl(var(--gris-doux))}
.st-vc-ph img{display:block;width:100%;height:100%;object-fit:cover}
.st-vc-ph .st-sil svg.st-i{width:56px;height:56px}
.st-vc-prix{position:absolute;left:8px;bottom:8px;padding:3px 9px;border-radius:var(--ap-r-s);font-size:var(--ap-t-xl);font-weight:var(--ap-g-chiffre);letter-spacing:-.01em;color:hsl(var(--encre));background:hsl(var(--carte));box-shadow:var(--ombre-2)}
.st-vc-prix.ach{font-size:var(--ap-t-m);color:hsl(var(--orange))}
.st-vc-ph .st-etat{position:absolute;left:8px;top:8px;box-shadow:var(--ombre-1)}
.st-vc .st-etoile{opacity:1}
.st-vc-t{display:grid;gap:1px;padding:var(--ap-e2) var(--ap-e3) 0;min-width:0}
.st-vc-t b{font-size:var(--ap-t-l);font-weight:var(--ap-g-chiffre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-vc-t small{font-size:var(--ap-t-s);color:hsl(var(--doux));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Plaque française seulement, VIN toujours (correctif F2) : aussi dans la vitrine. */
.st-vc-id{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:18px;margin-top:3px}
.st-vc-id:empty{display:none}
.st-vc .st-pl{display:inline-flex;font:var(--ap-g-titre) var(--ap-t-xs)/1 Inter,system-ui,sans-serif;letter-spacing:.05em;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px hsl(220 30% 20%/.6);color:hsl(var(--encre))}
.st-vc .st-vin b{display:inline;font-size:inherit;font-weight:var(--ap-g-titre);letter-spacing:inherit;color:hsl(var(--ap-encre))}
.st-vc-pied{display:flex;align-items:center;flex-wrap:wrap;gap:4px var(--ap-e2);min-height:22px;padding:4px var(--ap-e3) var(--ap-e2);font-size:var(--ap-t-xs);color:hsl(var(--doux))}
.st-vc-pied .st-atr{flex-basis:100%}
.st-vc-age{font-weight:var(--ap-g-titre)}
@media print{.st-bandeau,.st-marques{display:none!important}}

/* ── Téléphone (≤ 760 px) : bandeau en une liste « À traiter ▾ », vignette de la liste ≥ 120 px ── */
@media (max-width:760px){
  .st-bandeau .st-syn,.st-bandeau .st-cpts,.st-bandeau .st-ordre{display:none}
  .st-bandeau .st-dd-cpts{display:inline-flex}
  .st-band-fin{margin-left:0}
  .st-menu.st-rech{position:fixed;left:16px;right:16px;top:auto;bottom:12px;min-width:0}
  .st-marques{gap:4px}
  .st-marques button{padding:0 8px}
  .st-vitrine{grid-template-columns:minmax(0,1fr);gap:var(--ap-e2)}
}
@media (max-width:640px){
  .st[data-stock] .st-ln{grid-template-columns:var(--st-vl) minmax(0,1fr) auto!important}
  .st[data-stock] .st-ln .st-ph{width:var(--st-vl);height:84px}
  .st[data-stock] .st-ln .cJ{grid-column:2;grid-row:3}
}