/* Chantier n° 12 (31/10) — Dossiers façon SpiderVO : au bureau, des colonnes courtes (véhicule, client, vendeur,
   signée, livraison, dossier n/6, état, carte grise, acompte, geste) ; un mot et une couleur par état, le détail
   au survol ; la fiche en volet avec Précédente / Suivante et la frise des six étapes. Au téléphone : une ligne
   par dossier (photo, voiture et client, le mot), les filtres derrière « Filtres ▾ », textes ≥ 15 px,
   cibles ≥ 44 px, rien qui glisse de côté. Préfixe « ds- ». Chargé après n1-navigation.css. */

/* Le mot : une couleur par état. */
.ds-tag{display:inline-flex;align-items:center;justify-content:center;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.5;white-space:nowrap;text-decoration:none;background:hsl(var(--ap-gris-doux));color:hsl(var(--ap-doux))}
.ds-tag[data-ton="bleu"]{background:hsl(var(--ap-action-doux));color:hsl(var(--ap-action-fort))}
.ds-tag[data-ton="orange"]{background:hsl(var(--ap-ambre-doux));color:hsl(var(--ap-ambre))}
.ds-tag[data-ton="vert"]{background:hsl(var(--ap-vert-doux));color:hsl(var(--ap-vert))}
.ds-tag[data-ton="rouge"]{background:hsl(var(--ap-rouge-doux));color:hsl(var(--ap-rouge))}
a.ds-tag:hover{box-shadow:0 0 0 1px currentColor inset}

/* En-tête de l'écran. */
.ds-tete{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.ds-tete h1{margin:0;font-size:var(--ap-t-titre);font-weight:var(--ap-g-chiffre);letter-spacing:-.025em}
.ds-n{font-size:15px;font-weight:600;color:hsl(var(--ap-doux))}
.ds-cherche{margin-left:auto;width:300px}
.ds-fbtn{display:none}
.ds-filtres{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.ds-puce{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:0;border-radius:999px;background:hsl(var(--ap-carte));box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;font:inherit;font-size:13px;font-weight:600;color:hsl(var(--ap-doux));cursor:pointer;text-decoration:none}
.ds-puce b{font-weight:600;color:hsl(var(--ap-encre))}
.ds-puce.on{background:hsl(var(--ap-action-doux));color:hsl(var(--ap-action-fort));box-shadow:0 0 0 1px hsl(var(--ap-action)) inset}
.ds-puce.on b{color:hsl(var(--ap-action-fort))}
.ds-vds{display:inline-flex;gap:4px;margin-left:8px}
.ds-vds:empty{display:none}
.ds-vd-p{padding:0 10px}
.ds-lien,a.ds-lien{color:hsl(var(--ap-doux));box-shadow:none;background:none;text-decoration:underline;text-underline-offset:3px}
.ds-filtres .ds-lien:first-of-type{margin-left:auto}
.ds-seul-tel{display:none}

/* Bureau : les colonnes. */
section.ds .ds-liste{--ds-cols:64px minmax(140px,1.4fr) minmax(100px,1fr) 36px 48px 100px 80px 84px 88px 72px 210px}
section.ds .ds-liste.ds-serre{--ds-cols:64px minmax(150px,1.4fr) minmax(110px,1fr) 100px 80px 84px 88px 220px}
section.ds .ds-liste.ds-serre :is(.ds-c-vd,.ds-c-si,.ds-c-ac){display:none}
section.ds .ds-th,section.ds .or-ln.ds-l{display:grid;grid-template-columns:var(--ds-cols);align-items:center;gap:10px;padding:0 14px}
section.ds .ds-th{height:34px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:hsl(var(--ap-doux));border-bottom:1px solid hsl(var(--ap-trait));background:hsl(var(--ap-fond,var(--fond))/.6)}
section.ds .or-ln.ds-l{min-height:56px;padding-top:4px;padding-bottom:4px}
section.ds .or-ln.ds-l>*{min-width:0}
section.ds .ds-ph{width:64px;height:44px;border-radius:6px}
section.ds .ds-ve,section.ds .ds-cl{display:flex;flex-direction:column;line-height:1.25}
section.ds .ds-ve b,section.ds .ds-cl b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
section.ds .ds-ve small,section.ds .ds-cl small{font-size:13px;color:hsl(var(--ap-doux));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
section.ds .ds-ve small .no{font-weight:600;letter-spacing:.03em;color:hsl(var(--ap-encre));margin-right:6px}
section.ds .ds-tel-client{display:none!important}
section.ds .ds-si,section.ds .ds-lv,section.ds .ds-ac{font-size:13px;font-weight:600;white-space:nowrap}
section.ds .ds-si{color:hsl(var(--ap-doux))}
section.ds .ds-lv[data-ton="rouge"],section.ds .ds-ac [data-ton="orange"]{color:hsl(var(--ap-rouge))}
section.ds .ds-lv[data-ton="orange"]{color:hsl(var(--ap-ambre))}
section.ds .ds-ac [data-ton="orange"]{color:hsl(var(--ap-ambre))}
section.ds .ds-lv[data-ton="vert"],section.ds .ds-ac [data-ton="vert"]{color:hsl(var(--ap-vert))}
section.ds .ds-av{gap:2px}
section.ds .ds-av small{font-size:12px}
section.ds .ds-go{display:flex;justify-content:flex-end}
section.ds .ds-go{min-width:0}
section.ds .ds-go>*{display:block;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:34px;line-height:34px;padding-top:0;padding-bottom:0;font-size:13px}
section.ds .or-ln.ds-l[data-ton="rouge"]::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:hsl(var(--ap-rouge))}
section.ds .or-ln.ds-l[data-ton="orange"]::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:hsl(var(--ap-ambre))}
section.ds .ds-grp{display:flex;align-items:center;gap:8px;padding:6px 14px}
section.ds .ds-grp b{font-size:12px;color:hsl(var(--ap-encre))}
section.ds .ds-vide{padding:32px 14px;text-align:center;color:hsl(var(--ap-doux));font-weight:600}

/* La fiche (volet) : en-tête, mot, voisines, frise. */
.ds-vt{flex-wrap:wrap}
.ds-vt .ds-retour{display:none}
.ds-vt>.ds-tag{flex:none}
.ds-vt .mtg{margin-left:auto}
.ds-voisines{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:hsl(var(--ap-doux))}
.ds-voisines .or-btn{min-width:36px;height:36px;padding:0;justify-content:center}
.ds-frise{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;list-style:none;margin:0;padding:10px 16px 4px;background:hsl(var(--ap-carte))}
.ds-frise li{padding-top:7px;border-top:4px solid hsl(var(--ap-trait));font-size:13px;font-weight:600;color:hsl(var(--ap-doux));text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-frise li.fait{border-top-color:hsl(var(--ap-vert))}
.ds-frise li.ici{border-top-color:hsl(var(--ap-action));color:hsl(var(--ap-encre))}
.ds-frise li.inconnu{border-top-style:dashed}
.ds-v1{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* Téléphone (≤ 767 px) : une ligne par dossier ; les filtres derrière « Filtres ▾ ». */
@media (max-width:767px){
  body:has(section.ds) .n1-puce-filtres{display:none!important}
  section.ds .ds-tete{flex-wrap:nowrap;gap:8px}
  section.ds .ds-tete h1{font-size:20px}
  section.ds .ds-tete>.ds-tag{display:none}
  section.ds .ds-cherche{flex:1 1 auto;width:auto;min-width:0;margin-left:0}
  section.ds .ds-cherche input{height:44px;font-size:16px}
  section.ds .ds-fbtn{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:44px;padding:0 14px;border:0;border-radius:999px;font:inherit;font-size:15px;font-weight:600;background:hsl(var(--ap-carte));box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;color:hsl(var(--ap-encre));white-space:nowrap}
  section.ds .ds-filtres:not(.ds-ouvert){display:none}
  section.ds .ds-filtres{gap:6px;margin-top:8px}
  section.ds .ds-puce{min-height:44px;height:auto;padding:0 14px;font-size:15px}
  section.ds .ds-vds{margin-left:0}
  section.ds .ds-filtres .ds-lien:first-of-type{margin-left:0}
  section.ds .ds-seul-tel{display:inline-flex}
  main.page section.ds .ds-liste{display:block;border-radius:var(--ap-r-l);overflow:hidden}
  main.page section.ds .ds-th{display:none}
  main.page section.ds .or-ln.ds-l{display:grid!important;text-align:left;grid-template-columns:60px minmax(0,1fr) auto!important;grid-template-rows:auto!important;gap:0 10px!important;min-height:64px;padding:6px 12px 6px 10px!important;align-items:center!important}
  main.page section.ds .or-ln.ds-l>:not(.ds-ph,.ds-ve,.ds-et){display:none!important}
  main.page section.ds .or-ln.ds-l>:is(.ds-ph,.ds-et){display:block!important}
  main.page section.ds .or-ln.ds-l>:is(.ds-ph,.ds-ve,.ds-et){grid-row:1!important}
  main.page section.ds .or-ln.ds-l>.ds-ph{grid-column:1!important;width:60px!important;height:44px!important}
  main.page section.ds .or-ln.ds-l>.ds-ve{grid-column:2!important;align-items:flex-start}
  main.page section.ds .or-ln.ds-l>.ds-et{grid-column:3!important;justify-self:end}
  main.page section.ds .or-ln.ds-l .ds-ve{display:flex!important;flex-direction:column;flex-wrap:nowrap!important;line-height:1.25}
  main.page section.ds .or-ln.ds-l .ds-ve>*{flex:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  main.page section.ds .or-ln.ds-l .ds-ve b{font-size:16px}
  main.page section.ds .or-ln.ds-l .ds-ve small{font-size:15px}
  main.page section.ds .or-ln.ds-l .ds-ve small:not(.ds-tel-client){display:none}
  main.page section.ds .or-ln.ds-l .ds-tel-client{display:block!important}
  main.page section.ds .or-ln.ds-l .ds-tag{font-size:15px;min-height:30px}
  section.ds .ds-grp{font-size:15px;padding:8px 12px}
  section.ds .ds-grp b{font-size:15px}
  /* La fiche à la place de la liste : retour, voisines à portée de pouce, frise lisible. */
  section.ds .ds-vt{gap:8px 10px;padding:10px 12px}
  section.ds .ds-vt .ds-retour{display:inline-flex;min-height:44px;flex:1 0 100%;justify-content:flex-start;font-size:15px}
  section.ds .ds-vt .or-ph{width:72px;height:50px}
  section.ds .ds-vt b{font-size:18px}
  section.ds .ds-vt small{font-size:15px}
  section.ds .ds-vt>.ds-tag{font-size:15px}
  section.ds .ds-voisines{font-size:15px}
  section.ds .ds-voisines .or-btn{min-width:44px;height:44px}
  section.ds .ds-vt .or-x{min-width:44px;min-height:44px}
  section.ds .ds-frise{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 4px;padding:8px 12px 4px}
  section.ds .ds-frise li{font-size:15px;letter-spacing:-.02em}
}