/* ═══ Lot S2 (23/10, benchmark SpiderVO § 7.5 = spécification validée) : la fiche évolutive ══════════
   Un bandeau d'identité unique en tête (gestes au-dessus, photo, statut, titre, puces, vendeur), la
   frise de vie dessous (neuf étapes datées par la V1), une barre compacte fixe dès que le bandeau est
   passé, la check-list à trois couleurs par pôle, les documents en trois gestes, les clients
   potentiels, et le même bandeau en petit en tête d'un document. Recadrage du 21/10 : jetons --ap-
   seuls, filets plutôt qu'ombres, un seul bleu d'action, trois couleurs d'état. */

/* ── bandeau ── */
.s2-bandeau{background:hsl(var(--ap-carte));border-radius:var(--ap-r-l) var(--ap-r-l) 0 0;box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;padding:var(--ap-e2) var(--ap-e3) var(--ap-e2);min-width:0}
.s2-gestes{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ap-e2);min-width:0}
.s2-g{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ap-e2);min-width:0}
.s2-esp{flex:1}
.pv a.s2-retour{display:inline-flex;align-items:center;gap:4px;height:var(--ap-h-ctrl);padding:0 var(--ap-e2) 0 4px;border-radius:var(--ap-r-s);font-size:var(--ap-t-m);font-weight:var(--ap-g-titre);color:hsl(var(--ap-encre));text-decoration:none;box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset}
.s2-gestes .pv-btn{height:var(--ap-h-ctrl);font-size:var(--ap-t-m);padding:0 var(--ap-e3);border-radius:var(--ap-r-s)}
.s2-imp{display:inline-grid;place-items:center;width:var(--ap-h-ctrl);height:var(--ap-h-ctrl);border-radius:var(--ap-r-s);color:hsl(var(--ap-doux));box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset}
.s2-voisines{display:flex;align-items:center;gap:4px;margin-left:auto}
.pv a.s2-vo{display:inline-flex;align-items:center;gap:2px;height:var(--ap-h-ctrl);padding:0 var(--ap-e2);border-radius:var(--ap-r-s);font-size:var(--ap-t-m);font-weight:var(--ap-g-moyen);color:hsl(var(--ap-encre));text-decoration:none;box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset}
.s2-pos{font-size:var(--ap-t-s);color:hsl(var(--ap-doux));padding:0 4px;white-space:nowrap}
.s2-pos small{font-size:var(--ap-t-s)}
.s2-ident{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--ap-e3);align-items:center;margin-top:var(--ap-e2)}
.pv .s2-photo{display:block;width:104px;height:68px;border-radius:var(--ap-r-m);overflow:hidden;background:hsl(var(--ap-gris-doux));box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset}
.s2-photo img{width:100%;height:100%;object-fit:cover;display:block}
.s2-photo .s2-sans-photo{width:100%;height:100%}
.s2-txt{min-width:0;display:grid;gap:6px}
.s2-l1{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px var(--ap-e2);min-width:0}
.pv h1.s2-titre{margin:0;font-size:var(--ap-t-titre);font-weight:var(--ap-g-chiffre);line-height:var(--ap-li-serre);letter-spacing:-.01em}
.s2-version{font-size:var(--ap-t-m);color:hsl(var(--ap-doux));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:48ch}
.s2-statut{display:inline-flex;align-items:center;height:22px;padding:0 var(--ap-e2);border-radius:999px;font-size:var(--ap-t-s);font-weight:var(--ap-g-titre);background:hsl(var(--ap-gris-doux));color:hsl(var(--ap-doux));white-space:nowrap;align-self:center}
.s2-statut.vert{background:hsl(var(--ap-vert-doux));color:hsl(var(--ap-vert))}
.s2-statut.orange{background:hsl(var(--ap-ambre-doux));color:hsl(var(--ap-ambre))}
.s2-statut.bleu{background:hsl(var(--ap-action-doux));color:hsl(var(--ap-action-fort))}
.pv a.s2-v1{font-size:var(--ap-t-s);color:hsl(var(--ap-doux));text-decoration:none;white-space:nowrap;align-self:center}
.pv a.s2-v1:hover{text-decoration:underline}
.s2-puces{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:0;list-style:none;min-width:0}
.s2-puces li{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 var(--ap-e2);border-radius:var(--ap-r-s);font-size:var(--ap-t-s);background:hsl(var(--ap-gris-doux));color:hsl(var(--ap-encre));white-space:nowrap}
.s2-puces li.s2-prix{font-weight:var(--ap-g-chiffre)}
.s2-puces li.pv-plaque,.s2-mini .pv-plaque{padding:0;background:none;height:auto}
.s2-puces li.s2-dv{background:hsl(var(--ap-ambre-doux));color:hsl(var(--ap-ambre));font-weight:var(--ap-g-titre)}
.s2-puces li.s2-vendeur{background:none;box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;color:hsl(var(--ap-doux))}
.s2-puces .pv-anneau{width:14px;height:14px}

/* ── frise de vie ── */
.s2-frise{background:hsl(var(--ap-carte));border-radius:0 0 var(--ap-r-l) var(--ap-r-l);box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;margin:-1px 0 var(--ap-e2);padding:var(--ap-e1) var(--ap-e2) var(--ap-e2);min-width:0}
.s2-etapes{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));margin:0;padding:0;list-style:none}
.s2-j{position:relative;min-width:0}
.s2-j button{width:100%;display:grid;justify-items:center;gap:2px;padding:4px 2px;border-radius:var(--ap-r-s);text-align:center;min-width:0}
.s2-j button:hover{background:hsl(var(--ap-gris-doux))}
.s2-j .pt{position:relative;width:10px;height:10px;border-radius:50%;background:hsl(var(--ap-carte));box-shadow:0 0 0 2px hsl(var(--ap-trait-fort)) inset;z-index:1}
.s2-j::before{content:"";position:absolute;top:13px;left:-50%;right:50%;height:2px;background:hsl(var(--ap-trait-fort))}
.s2-j:first-child::before{display:none}
.s2-j .e{font-size:var(--ap-t-s);font-weight:var(--ap-g-moyen);color:hsl(var(--ap-doux));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.s2-j .d{font-size:var(--ap-t-xs);color:hsl(var(--ap-encre));min-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.s2-j .d.nd{color:hsl(var(--ap-doux));font-style:italic}
.s2-j.faite .pt{background:hsl(var(--ap-vert));box-shadow:none}
.s2-j.faite::before,.s2-j.courante::before{background:hsl(var(--ap-vert))}
.s2-j.faite .e{color:hsl(var(--ap-encre))}
.s2-j.courante .pt{width:14px;height:14px;margin-top:-2px;background:hsl(var(--ap-action));box-shadow:0 0 0 4px hsl(var(--ap-action-doux))}
.s2-j.courante button{background:hsl(var(--ap-action-doux))}
.s2-j.courante .e{color:hsl(var(--ap-action-fort));font-weight:var(--ap-g-titre)}
.s2-etapes.attente .s2-j .e{color:hsl(var(--ap-doux))}
.s2-frise-tel{display:none;margin:4px 0 0;font-size:var(--ap-t-m);align-items:center;gap:var(--ap-e2)}
.s2-frise-tel span{flex:1;min-width:0}
.pv .s2-lien{font-size:var(--ap-t-s);font-weight:var(--ap-g-titre);color:hsl(var(--ap-action-fort));padding:2px 0;white-space:nowrap}
.s2-hors{margin:4px 0 0;font-size:var(--ap-t-s);color:hsl(var(--ap-doux))}

/* ── barre compacte (fixe dès que le bandeau est passé) ── */
.s2-compact{position:fixed;left:0;right:0;top:58px;z-index:45;transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;transition:transform var(--pv-t-vue) var(--pv-sortie),opacity var(--pv-t-vue) var(--pv-sortie),visibility 0s linear var(--pv-t-vue);background:hsl(var(--ap-carte));box-shadow:0 1px 0 hsl(var(--ap-trait))}
.s2-compact.on{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:transform var(--pv-t-vue) var(--pv-sortie),opacity var(--pv-t-vue) var(--pv-sortie)}
.s2-compact .in{max-width:1880px;margin:0 auto;padding:var(--ap-e1) var(--ap-e4);height:52px;display:flex;align-items:center;gap:var(--ap-e2);min-width:0}
.s2-compact img{width:52px;height:36px;border-radius:var(--ap-r-s);object-fit:cover;flex:none}
.s2-compact .n{min-width:0;font-weight:var(--ap-g-chiffre);font-size:var(--ap-t-l);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s2-compact .n small{display:block;font-weight:var(--ap-g-moyen);font-size:var(--ap-t-s);color:hsl(var(--ap-doux))}
.s2-compact .p{font-size:var(--ap-t-xl);font-weight:var(--ap-g-chiffre);white-space:nowrap}
.s2-compact .pv-btn{height:var(--ap-h-ctrl);font-size:var(--ap-t-m);border-radius:var(--ap-r-s);padding:0 var(--ap-e3)}
.s2-c-offre{display:flex;gap:var(--ap-e1)}
.s2-compact .s2-voisines{margin-left:0}
/* La barre compacte occupe 52 px sous la barre du haut : ce qui colle se range dessous. */
.pv.compact-on{--pv-ancres-haut:114px}
.pv.pv-large.compact-on .pv-gauche{top:116px;max-height:calc(100vh - 128px)}
.pv-large .pv-gauche{top:calc(var(--pv-haut) - 30px)}
/* L'ancienne barre compacte et le fil sont remplacés par le bandeau. */
.pv .pv-compacte,.pv .pv-fil-haut{display:none!important}

/* ── check-list à trois couleurs ── */
.s2-cl{display:grid;gap:4px;margin-top:var(--ap-e2);scroll-margin-top:calc(var(--pv-ancres-haut) + var(--pv-ancres) + 12px)}
.s2-cl:empty{display:none}
.s2-cl-t{display:flex;align-items:center;justify-content:space-between;gap:var(--ap-e2);font-size:var(--ap-t-m)}
.s2-cl-leg{display:inline-flex;align-items:center;gap:4px;font-size:var(--ap-t-xs);color:hsl(var(--ap-doux))}
.s2-cl-leg i{width:8px;height:8px;border-radius:50%;margin-left:6px}
.s2-cl-leg i.vert,.s2-dots i.vert,.s2-cases li.vert>i{background:hsl(var(--ap-vert))}
.s2-cl-leg i.orange,.s2-dots i.orange,.s2-cases li.orange>i{background:hsl(var(--ap-ambre-vif))}
.s2-cl-leg i.rouge,.s2-dots i.rouge,.s2-cases li.rouge>i{background:hsl(var(--ap-rouge))}
.s2-pole{border-radius:var(--ap-r-m);box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;min-width:0}
.pv .s2-pole-b{width:100%;display:flex;align-items:center;gap:var(--ap-e2);min-height:36px;padding:0 var(--ap-e2);text-align:left;font-size:var(--ap-t-m);min-width:0}
.s2-pole-b .pt{width:8px;height:8px;border-radius:50%;flex:none}
.s2-pole.vert .pt{background:hsl(var(--ap-vert))}.s2-pole.orange .pt{background:hsl(var(--ap-ambre-vif))}.s2-pole.rouge .pt{background:hsl(var(--ap-rouge))}
.s2-pole.rouge .s2-pole-b{background:hsl(var(--ap-rouge-doux));border-radius:var(--ap-r-m)}
.s2-pole-b .n{color:hsl(var(--ap-doux));white-space:nowrap}
.s2-pole-b b{white-space:nowrap}
.s2-pole-b .bl{color:hsl(var(--ap-rouge));font-weight:var(--ap-g-titre);white-space:nowrap}
.s2-dots{display:flex;flex-wrap:nowrap;gap:2px;margin-left:auto;min-width:0;overflow:hidden;justify-content:flex-end}
.s2-dots i{width:5px;height:5px;border-radius:50%;flex:none}
.s2-cases{list-style:none;margin:0;padding:0 var(--ap-e2) var(--ap-e1);display:grid;gap:2px}
.s2-cases li{display:flex;align-items:baseline;gap:var(--ap-e2);font-size:var(--ap-t-m);min-width:0}
.s2-cases li>i{width:8px;height:8px;border-radius:50%;flex:none;transform:translateY(-1px)}
.s2-cases li span{flex:1;min-width:0}
.s2-cases li small{display:block;font-size:var(--ap-t-s);color:hsl(var(--ap-doux))}
.s2-cases li em{font-style:normal;font-size:var(--ap-t-xs);color:hsl(var(--ap-doux));white-space:nowrap}
.s2-cases li.rouge em{color:hsl(var(--ap-rouge));font-weight:var(--ap-g-titre)}
.s2-pole .s2-lien{margin:0 var(--ap-e2) var(--ap-e2)}

/* ── documents en trois gestes ── */
.s2-docs{margin-top:var(--ap-e3)}
.s2-docs-t{margin:0 0 4px;font-size:var(--ap-t-m)}
.s2-docs-t span{color:hsl(var(--ap-doux))}
.s2-docs-l{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.s2-doc{display:flex;align-items:center;gap:var(--ap-e2);min-height:var(--ap-h-ligne);padding:0 var(--ap-e2);border-radius:var(--ap-r-m);box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;min-width:0}
.s2-doc .tx{flex:1;min-width:0;display:grid}
.s2-doc .tx b,.s2-doc .tx small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s2-doc .tx small{font-size:var(--ap-t-s);color:hsl(var(--ap-doux))}
.s2-doc.genere .tx small{color:hsl(var(--ap-vert))}
.s2-doc-g{display:flex;align-items:center;gap:4px;flex:none}
.s2-doc-g .pv-mini-b[disabled]{opacity:.45;cursor:default}
.s2-doc-g a.pv-v1g{height:28px}

/* ── clients potentiels ── */
.s2-potentiels{margin-top:var(--ap-e3);padding-top:var(--ap-e2);border-top:1px solid hsl(var(--ap-trait))}
.s2-potentiels h3{margin:0 0 4px;font-size:var(--ap-t-m);font-weight:var(--ap-g-titre)}
.s2-potentiels h3 small{font-weight:var(--ap-g-texte);color:hsl(var(--ap-doux));font-size:var(--ap-t-s)}
.s2-pot-l{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.s2-pot-l li{display:flex;align-items:center;gap:var(--ap-e2);min-height:var(--ap-h-ligne);padding:4px var(--ap-e2);border-radius:var(--ap-r-m);box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;min-width:0}
.s2-pot-l .tx{flex:1;min-width:0;display:grid}
.s2-pot-l small{font-size:var(--ap-t-s);color:hsl(var(--ap-doux));overflow:hidden;text-overflow:ellipsis}
.s2-pot-l small.r{font-size:var(--ap-t-xs)}

/* ── le même bandeau, en petit, en tête d'un document ── */
a.s2-mini{display:flex;align-items:center;flex-wrap:wrap;gap:4px var(--ap-e2);padding:4px var(--ap-e2) 4px 4px;margin:0 0 6px;border-radius:var(--ap-r-m);background:hsl(var(--ap-gris-doux));color:hsl(var(--ap-encre));text-decoration:none;min-width:0;font-size:var(--ap-t-s)}
.s2-mini img{width:48px;height:32px;border-radius:var(--ap-r-s);object-fit:cover}
.s2-mini .n{font-weight:var(--ap-g-titre);font-size:var(--ap-t-m);min-width:0}
.s2-mini .n small{font-weight:var(--ap-g-texte);color:hsl(var(--ap-doux));margin-left:6px;font-size:var(--ap-t-s)}
.s2-mini .s2-pu{white-space:nowrap}
.s2-mini .s2-prix{font-weight:var(--ap-g-chiffre)}

/* ── téléphone et écran étroit ── */
@media (max-width:1099px){
  .s2-bandeau{margin-top:var(--ap-e1)}
}
@media (max-width:640px){
  .s2-compact{top:56px}
  .s2-compact .in{padding:4px var(--ap-e3);gap:6px}
  .s2-compact img,.s2-compact .s2-statut,.s2-compact .s2-c-offre{display:none}
  .s2-compact .p{font-size:var(--ap-t-l)}
  .pv.compact-on{--pv-ancres-haut:108px}
}
@media (max-width:599px){
  .s2-bandeau{padding:var(--ap-e2)}
  .s2-g{flex:1 1 100%;order:3}
  .s2-g .pv-btn{flex:1}
  .s2-voisines .s2-vo{padding:0 6px}
  .s2-pos small{display:none}
  .pv .s2-photo{width:72px;height:48px}
  .pv h1.s2-titre{font-size:var(--ap-t-xl)}
  .s2-version{max-width:100%;white-space:normal}
  /* la frise : des points reliés, l'étape courante dite en clair ; « Toutes les étapes » les déplie */
  .s2-etapes .e,.s2-etapes .d{display:none}
  .s2-j button{padding:6px 0}
  .s2-frise-tel{display:flex}
  .s2-frise.deplie .s2-etapes{grid-template-columns:1fr}
  .s2-frise.deplie .s2-j::before{display:none}
  .s2-frise.deplie .s2-j button{grid-template-columns:14px minmax(0,1fr) auto;justify-items:start;align-items:center;gap:var(--ap-e2);text-align:left;padding:4px 6px}
  .s2-frise.deplie .s2-etapes .e,.s2-frise.deplie .s2-etapes .d{display:block}
  .s2-doc{flex-wrap:wrap;padding:var(--ap-e1) var(--ap-e2)}
  .s2-doc .tx{flex:1 1 100%}
  .s2-doc-g{flex:1 1 100%;justify-content:flex-end}
  .s2-dots{display:none}
}
@media print{.s2-compact,.s2-gestes,.s2-cl,.s2-docs,.s2-potentiels{display:none!important}}

/* ── compacité (l'essentiel sans défiler à 1 440 × 900) ── */
.s2-bandeau{padding:6px var(--ap-e3)}
.s2-ident{margin-top:6px}
.pv .s2-photo{width:88px;height:58px}
.s2-puces li{height:22px}
.s2-frise{padding:2px var(--ap-e2) 4px}
/* La check-list est sous la prochaine action, sur toute la largeur de la tête. */
.pv-tete>.s2-cl{grid-column:1/-1;margin-top:0}
/* Une carte amenée passe toujours sous la barre compacte ET la barre d'ancres (la barre compacte
   apparaît pendant le défilement : la marge est calculée pour elle). */
.pv .pv-ca,.pv .pv-bandeau,.pv .s2-cl{scroll-margin-top:calc(114px + var(--pv-ancres) + 12px)}
@media (max-width:640px){.pv .pv-ca,.pv .pv-bandeau,.pv .s2-cl{scroll-margin-top:calc(108px + var(--pv-ancres) + 12px)}}
/* Grand écran : chaque étape tient sur une ligne (point, nom, date), une barre de progression dessous. */
@media (min-width:1400px){
  .s2-j::before,.s2-j:first-child::before{display:block;top:auto;bottom:0;left:2px;right:2px;height:3px;border-radius:2px}
  .s2-j.courante::before{background:hsl(var(--ap-action))}
  .s2-j button{display:flex;align-items:center;justify-content:center;gap:5px;padding:4px 2px 8px;flex-wrap:nowrap}
  .s2-j .pt{flex:none}
  .s2-j.courante .pt{width:10px;height:10px;margin:0;box-shadow:0 0 0 3px hsl(var(--ap-action-doux))}
  .s2-j .d{min-height:0}
  .s2-j .e{flex:none;max-width:none}
  .s2-j .d{flex:0 1 auto;min-width:0}
  .s2-j button{gap:4px}
}
/* Téléphone : photo et titre côte à côte, les puces sur toute la largeur ; une ligne de gestes vide disparaît. */
.s2-g:empty{display:none}
@media (max-width:599px){
  .s2-ident{grid-template-columns:64px minmax(0,1fr);align-items:start;gap:6px var(--ap-e2)}
  .s2-txt{display:contents}
  .s2-l1{grid-column:2;align-self:center}
  .s2-puces{grid-column:1/-1}
  .pv .s2-photo{width:64px;height:44px}
  .s2-gestes .s2-imp{display:none}
}
/* Téléphone : « Faire une offre » est dans la barre du bas, pas deux fois. */
@media (max-width:640px){.s2-g [data-geste^="faire-offre"]{display:none}}