/* Chantier n° 10 (31/10) — l'Atelier façon SpiderVO : les ordres de travail (`/atelier/ordres`) et « Planifier »
   de la fiche voiture. Un mot, une couleur ; le détail au survol ou dans la fiche. Préfixe « ot- ». */
.ot{display:grid;gap:10px;padding:4px 0 24px}
.ot-tete{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ot-titre{display:flex;align-items:baseline;gap:8px;margin:0;font-size:20px;font-weight:var(--ap-g-titre)}
.ot-n{font-size:14px;font-weight:600;color:hsl(var(--ap-doux))}
.ot-cherche{margin-left:auto;min-width:220px;height:36px;padding:0 12px;border:0;border-radius:var(--ap-r-m);background:hsl(var(--ap-carte));box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;font:inherit;font-size:14px}
.ot-fbtn{display:none}
.ot-filtres{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ot-seg{display:inline-flex;flex-wrap:wrap;gap:4px}
.ot-seg button{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}
.ot-seg button .num{font-weight:500;opacity:.8}
.ot-seg button.on{background:hsl(var(--ap-action-doux));color:hsl(var(--ap-action-fort));box-shadow:0 0 0 1px hsl(var(--ap-action)) inset}
.ot-msg{display:inline-flex;justify-self:start;padding:2px 10px;border-radius:999px;font-weight:600;font-size:13px;background:hsl(var(--ap-ambre-doux));color:hsl(var(--ap-ambre));margin:0}
.ot-vide,.ot-attente{color:hsl(var(--ap-doux));font-weight:600;padding:24px 0;text-align:center}

/* Mots et couleurs. */
.ot-mot{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;background:hsl(var(--ap-gris-doux));color:hsl(var(--ap-encre))}
.ot-mot[data-ton="bleu"]{background:hsl(var(--ap-action-doux));color:hsl(var(--ap-action-fort))}
.ot-mot[data-ton="orange"]{background:hsl(var(--ap-ambre-doux));color:hsl(var(--ap-ambre))}
.ot-mot[data-ton="rouge"]{background:hsl(var(--ap-rouge-doux));color:hsl(var(--ap-rouge))}
.ot-mot[data-ton="vert"]{background:hsl(var(--ap-vert-doux,var(--ap-gris-doux)));color:hsl(var(--ap-vert))}
.ot-mot[data-ton="gris"]{color:hsl(var(--ap-doux))}

/* Liste et fiche côte à côte au bureau. */
.ot-plan{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.ot-avec-fiche .ot-plan{grid-template-columns:minmax(0,1fr) minmax(340px,400px)}
.ot-tel{display:none}

/* ── Bureau : le tableau de la V1 ───────────────────────────────────────────────────── */
.ot-t{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;background:hsl(var(--ap-carte));border-radius:var(--ap-r-l);box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;font-size:13px}
.ot-t th{text-align:left;font-weight:500;color:hsl(var(--ap-doux));padding:8px;border-bottom:1px solid hsl(var(--ap-trait));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ot-t th:nth-child(1){width:118px}.ot-t th:nth-child(2){width:92px}.ot-t th:nth-child(5){width:104px}
.ot-t th:nth-child(6),.ot-t th:nth-child(7){width:56px}.ot-t th:nth-child(8){width:112px}.ot-t th:nth-child(9){width:88px}
.ot-t th.r{width:96px}.ot-t th:last-child{width:22px}
.ot-t td{padding:8px;border-top:1px solid hsl(var(--ap-trait));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.ot-t tr:first-child td{border-top:0}
.ot-t .r{text-align:right}
.ot-t tr.ot-l{cursor:pointer;position:relative}
.ot-t tr.ot-l:hover td,.ot-t tr.ot-l.on td{background:hsl(var(--ap-action-doux))}
.ot-t tr.ot-l td:first-child{box-shadow:4px 0 0 hsl(var(--ap-trait)) inset}
.ot-t tr.ot-l[data-ton="bleu"] td:first-child{box-shadow:4px 0 0 hsl(var(--ap-action)) inset}
.ot-t tr.ot-l[data-ton="orange"] td:first-child{box-shadow:4px 0 0 hsl(var(--ap-ambre)) inset}
.ot-t tr.ot-l[data-ton="rouge"] td:first-child{box-shadow:4px 0 0 hsl(var(--ap-rouge)) inset}
.ot-t tr.ot-l[data-ton="vert"] td:first-child{box-shadow:4px 0 0 hsl(var(--ap-vert)) inset}
.ot-ref{font-weight:600;padding-left:14px!important}
.ot-ref small{color:hsl(var(--ap-doux));font-weight:500}
.ot-cl.interne{color:hsl(var(--ap-doux));font-weight:600}
.ot-ve b{font-weight:600}
.ot-tr{font-weight:600}
.ot-go{color:hsl(var(--ap-action));font-weight:700;text-align:center}
.ot-avec-fiche .ot-t th:nth-child(6),.ot-avec-fiche .ot-t td:nth-child(6),.ot-avec-fiche .ot-t th:nth-child(7),.ot-avec-fiche .ot-t td:nth-child(7),
.ot-avec-fiche .ot-t th:nth-child(8),.ot-avec-fiche .ot-t td:nth-child(8){display:none}

/* ── La fiche d'un ordre ───────────────────────────────────────────────────────────── */
.ot-fiche{position:sticky;top:12px;display:grid;gap:12px;padding:14px;border-radius:var(--ap-r-l);background:hsl(var(--ap-carte));box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;border-left:4px solid hsl(var(--ap-trait))}
.ot-fiche[data-ton="bleu"]{border-left-color:hsl(var(--ap-action))}
.ot-fiche[data-ton="orange"]{border-left-color:hsl(var(--ap-ambre))}
.ot-fiche[data-ton="rouge"]{border-left-color:hsl(var(--ap-rouge))}
.ot-fiche[data-ton="vert"]{border-left-color:hsl(var(--ap-vert))}
.ot-ft{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ot-ft h2{margin:0;font-size:17px;font-weight:var(--ap-g-titre);display:grid;min-width:0}
.ot-ft h2 small{font-size:13px;font-weight:500;color:hsl(var(--ap-doux))}
.ot-b{min-width:36px;min-height:36px;padding:0 10px;border:0;border-radius:var(--ap-r-s);background:hsl(var(--ap-gris-doux));font:inherit;font-size:14px;font-weight:600;color:hsl(var(--ap-encre));cursor:pointer}
.ot-retour{display:none}
.ot-voisines{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:13px;color:hsl(var(--ap-doux))}
.ot-x{font-size:18px}
.ot-frise{display:grid;grid-template-columns:repeat(var(--ot-n),minmax(0,1fr));gap:4px;list-style:none;margin:0;padding:0}
.ot-frise li{padding-top:8px;border-top:4px solid hsl(var(--ap-trait));font-size:13px;font-weight:600;color:hsl(var(--ap-doux));text-align:center}
.ot-frise li.fait{border-top-color:hsl(var(--ap-vert))}
.ot-frise li.ici{border-top-color:hsl(var(--ap-action));color:hsl(var(--ap-encre))}
.ot-frise li.annule{border-top-style:dashed}
.ot-det{display:grid;gap:6px;margin:0}
.ot-dl{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;font-size:14px}
.ot-dl dt{color:hsl(var(--ap-doux))}.ot-dl dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.ot-gestes{display:flex;flex-wrap:wrap;gap:8px}
.ot-g{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border:0;border-radius:var(--ap-r-m);background:hsl(var(--ap-gris-doux));font:inherit;font-size:14px;font-weight:600;color:hsl(var(--ap-encre));text-decoration:none;cursor:pointer}
.ot-g.p{background:hsl(var(--ap-action));color:#fff}
.ot-g[disabled]{opacity:.45;cursor:default}
.ot-clore{display:grid;gap:8px}
.ot-clore textarea{font:inherit;font-size:15px;padding:8px;border-radius:var(--ap-r-m);border:0;box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset}

/* ── « Planifier » de la fiche voiture ─────────────────────────────────────────────── */
.ot-plan-boite{position:fixed;top:120px;right:24px;z-index:60;display:grid;gap:10px;width:min(320px,calc(100vw - 32px));padding:14px;border-radius:var(--ap-r-l);background:hsl(var(--ap-carte));box-shadow:var(--ombre-2,0 8px 24px rgba(0,0,0,.14)),0 0 0 1px hsl(var(--ap-trait)) inset}
.ot-plan-boite label{display:grid;gap:4px;font-size:13px;font-weight:600;color:hsl(var(--ap-doux))}
.ot-plan-boite input{height:40px;padding:0 10px;border:0;border-radius:var(--ap-r-m);box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;font:inherit;font-size:15px;color:hsl(var(--ap-encre))}
.ot-plan-g{display:flex;justify-content:flex-end;gap:8px}
.pv-mini-b.ot-planifier[data-planifie="true"]{background:hsl(var(--ap-action-doux));color:hsl(var(--ap-action-fort))}

/* ── Téléphone : une ligne par ordre ───────────────────────────────────────────────── */
@media (max-width:767px){
  .ot-titre{font-size:18px}
  .ot-cherche{order:3;width:100%;min-width:0;margin:0;height:44px;font-size:16px}
  .ot-fbtn{display:inline-flex;align-items:center;gap:6px;margin-left:auto;min-height:44px;padding:0 14px;border-radius:999px;border:0;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))}
  .ot-filtres:not(.ot-ouvert){display:none}
  .ot-filtres{display:grid;gap:8px}
  .ot-seg button{min-height:44px;height:auto;font-size:15px}
  .ot-t{display:none}
  .ot-tel{display:grid;gap:8px;list-style:none;margin:0;padding:0}
  .ot-ln{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 28px;gap:10px;align-items:center;width:100%;min-height:72px;padding:10px 10px 10px 16px;border:0;border-radius:var(--ap-r-l);background:hsl(var(--ap-carte));box-shadow:0 0 0 1px hsl(var(--ap-trait)) inset;font:inherit;text-align:left;color:hsl(var(--ap-encre));overflow:hidden;cursor:pointer}
  .ot-ln::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:hsl(var(--ap-trait))}
  .ot-ln[data-ton="bleu"]::before{background:hsl(var(--ap-action))}
  .ot-ln[data-ton="orange"]::before{background:hsl(var(--ap-ambre))}
  .ot-ln[data-ton="rouge"]::before{background:hsl(var(--ap-rouge))}
  .ot-ln[data-ton="vert"]::before{background:hsl(var(--ap-vert))}
  .ot-lt{display:grid;min-width:0;gap:1px}
  .ot-lt b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ot-lt small{font-size:15px;color:hsl(var(--ap-doux));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ot-ld{display:grid;justify-items:end;gap:4px}
  .ot-ld .ot-mot{font-size:15px}
  .ot-ld small{font-size:15px;color:hsl(var(--ap-doux))}
  .ot-geste{display:flex;align-items:center;justify-content:center;width:28px;height:44px;font-size:22px;font-weight:700;color:hsl(var(--ap-action))}
  /* La fiche prend la place de la liste. */
  .ot-avec-fiche .ot-plan{grid-template-columns:minmax(0,1fr)}
  .ot-avec-fiche .ot-liste,.ot-avec-fiche .ot-tete,.ot-avec-fiche .ot-filtres{display:none}
  .ot-fiche{position:static;padding:12px}
  .ot-retour{display:inline-flex;align-items:center}
  .ot-x{display:none}
  .ot-ft h2{width:100%;order:2;font-size:18px}
  .ot-ft h2 small{font-size:15px}
  .ot-b{min-width:44px;min-height:44px;font-size:15px}
  .ot-frise li{font-size:15px}
  .ot-dl{grid-template-columns:110px minmax(0,1fr);font-size:15px}
  .ot-g{min-height:44px;font-size:15px;flex:1}
  .ot-voisines{font-size:15px}
  .ot-plan-boite{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:auto;margin:0}
  .ot-plan-boite label{font-size:15px}
  .ot-plan-boite input{height:44px;font-size:16px}
  .ot-plan-g .ot-g{flex:1}
}