/* logistic.deskio.io (16/10/2026) — toutes les valeurs viennent de tokens.css. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 var(--t-texte)/1.5 var(--corps);color:var(--encre);background:var(--craie);min-height:100vh}
svg{display:block}
h1{font:700 var(--t-page)/1.05 var(--titre);letter-spacing:-.02em;margin:0;text-wrap:balance}
h2{font:700 1.1rem/1.2 var(--titre);letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--signal);font-weight:600}
label{display:block;font-weight:600;font-size:var(--t-meta);letter-spacing:.02em;margin:var(--e-2) 0 var(--e-1);color:var(--gris)}
.w{width:min(var(--largeur),100% - 32px);margin-inline:auto}
.meta{color:var(--gris);font-size:var(--t-meta);letter-spacing:.02em}
.ko{background:var(--alerte-fond);color:var(--alerte);border-left:3px solid var(--alerte);padding:var(--e-2) var(--e-3);border-radius:0 var(--r-champ) var(--r-champ) 0;margin-top:var(--e-3)}
button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Tête */
.tete{padding:var(--e-4) 0 0;background:var(--craie)}
.tete .w{display:flex;align-items:center;gap:var(--e-3) var(--e-4);flex-wrap:wrap}
.tete .logo{width:143px;height:40px;object-fit:contain;display:block}
.remorque-dim{font:600 var(--t-meta)/1.3 var(--corps);color:var(--gris);letter-spacing:.02em}
.tete-act{margin-left:auto;display:flex;gap:var(--e-2);flex-wrap:wrap}

/* Onglets */
.onglets{display:flex;gap:var(--e-3);margin-top:var(--e-3);border-bottom:1px solid var(--filet)}
.onglet{all:unset;cursor:pointer;padding:var(--e-2) 0;font:600 var(--t-texte) var(--corps);color:var(--gris);border-bottom:3px solid transparent;margin-bottom:-1px}
.onglet:hover{color:var(--encre)}
.onglet.on{color:var(--signal);border-bottom-color:var(--signal)}
.onglet:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.outils-plan{display:flex;gap:var(--e-2);flex-wrap:wrap;padding:var(--e-3) 0}
#volDemande .panneau{padding:var(--e-4)}
#volDemande .act{display:flex;justify-content:flex-end;margin-top:var(--e-3)}

/* Quai : bitume d'un bord à l'autre */
.quai{background:var(--bitume);padding:var(--e-4) 0}
.quai-int{width:min(var(--largeur),100% - 32px);margin-inline:auto;overflow-x:auto}
.plan{width:100%;height:auto;touch-action:none;user-select:none;outline:none}
.plan:focus-visible{outline:2px solid var(--signal);outline-offset:4px}
.plan .g1{stroke:var(--grille);stroke-width:.6}
.plan .g2{stroke:var(--grille-2);stroke-width:1}
.plan .plancher{fill:var(--plancher)}
.plan .paroi{fill:none;stroke:var(--paroi);stroke-width:6}
.plan .cabine{fill:var(--cabine);stroke:var(--cabine-2);stroke-width:3}
.plan .roue{fill:var(--paroi)}
.plan .chassis{fill:var(--bitume-2);stroke:var(--paroi);stroke-width:3}
.plan .sellette{fill:var(--paroi)}
.plan .parebrise{fill:var(--bitume)}
.plan .toit{fill:none;stroke:var(--cabine-2);stroke-width:2.5}
.plan .trappe{fill:var(--bitume);opacity:.6}
.plan .retro{fill:var(--cabine-2)}
.plan .detail{fill:none;stroke:var(--cabine-2);stroke-width:2}
.plan .mesure-trait{stroke:var(--signal-2);stroke-width:2.5;fill:none}
.plan .mesure{font:700 20px var(--titre);fill:var(--signal-2);letter-spacing:.02em}
.plan .mesure-libre{font:600 14px var(--corps);fill:var(--craie);opacity:.8}
.plan .cote{font:700 22px var(--titre);fill:var(--craie);letter-spacing:.02em}
.plan .cote-trait{stroke:var(--gris);stroke-width:1.2;fill:none}
.plan .pal{cursor:grab}
.plan .pal.saisie{cursor:grabbing}
.plan .pal rect{stroke:var(--encre);stroke-width:1.2;rx:2}
.plan .pal.on rect{stroke:var(--signal);stroke-width:4}
.plan .pal.ko rect{stroke:var(--alerte);stroke-width:4;stroke-dasharray:6 4}
.plan .pal text{font:600 13px var(--corps);fill:var(--encre);pointer-events:none}
.plan .pal .sub{font:400 11px var(--mono);fill:var(--gris)}
.plan .pal .fleche{fill:none;stroke:var(--encre);stroke-width:1.2;opacity:.45}
.plan .vide{font:600 15px var(--corps);fill:var(--gris)}

/* Chiffres clés */
.cles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-3);padding:var(--e-4) 0 var(--e-3)}
.cle b{display:block;font:700 var(--t-cle)/1 var(--titre);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cle span{display:block;color:var(--gris);font-size:var(--t-meta);letter-spacing:.02em;margin-top:var(--e-1)}
.cle.signal b{color:var(--signal)}
.cle.depasse b{color:var(--alerte)}

/* Panneaux */
.grille2{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4);padding-bottom:var(--e-6);align-items:start}
.panneau{background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r-panneau);padding:var(--e-3) var(--e-4)}
.panneau-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);margin-bottom:var(--e-2)}
.fiche-act{display:flex;gap:var(--e-1)}
.liste{list-style:none;margin:0;padding:0}
.liste li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--e-3);padding:var(--e-2) 0;border-top:1px solid var(--filet)}
.liste li:first-child{border-top:0}
.liste button.lig{all:unset;display:contents;cursor:pointer}
.liste .pastille{width:28px;height:28px;border-radius:var(--r-palette);border:1px solid var(--encre);display:grid;place-items:center;font:700 .7rem var(--titre)}
.liste .nom{font-weight:600}
.liste .nom small{display:block;font-weight:400;color:var(--gris);font-size:var(--t-meta);font-variant-numeric:tabular-nums}
.liste .etat{font:600 var(--t-meta) var(--corps);color:var(--gris);letter-spacing:.02em;white-space:nowrap}
.liste .etat.ko{color:var(--alerte)}
.liste li.on .nom{color:var(--signal)}
.liste li.on .pastille{border-color:var(--signal);outline:2px solid var(--signal)}
.liste .vide{padding:var(--e-3) 0;color:var(--gris)}
.fiche-dl{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-2) var(--e-3);margin:0 0 var(--e-3)}
.fiche-dl dt{font-size:var(--t-meta);color:var(--gris);letter-spacing:.02em}
.fiche-dl dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}

/* Champs, boutons */
.tf{width:100%;font:inherit;color:var(--encre);background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r-champ);padding:.5rem .7rem;font-variant-numeric:tabular-nums}
.tf:focus{outline:none;border-color:var(--signal)}
.tf::-webkit-outer-spin-button,.tf::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tf[type=number]{-moz-appearance:textfield;appearance:textfield}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-2)}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-2)}
.modale.large{width:min(1180px,calc(100% - 2rem));max-height:calc(100vh - 2rem);overflow:auto}
.blocs{gap:var(--e-3);margin-bottom:var(--e-3)}
.bloc{border:1px solid var(--filet);border-left:4px solid var(--signal);border-radius:var(--r-champ);padding:var(--e-2) var(--e-3) var(--e-3);margin:0 0 var(--e-3);min-width:0}
.bloc legend{font:700 .95rem var(--titre);color:var(--signal);padding:0 var(--e-1)}
.bloc label:first-of-type{margin-top:0}
.plages{display:flex;align-items:center;gap:var(--e-1);flex-wrap:wrap;font-size:var(--t-meta);color:var(--gris);font-weight:600}
.plages .tf{width:auto;flex:0 0 auto}
.plages-liste{display:grid;gap:var(--e-1);margin-bottom:var(--e-1)}
.plages .ic{width:30px;height:30px;margin-left:auto}
.plages .ic svg{width:14px;height:14px}
.plages-liste .plages:only-child .ic{visibility:hidden}
.ouinon{border:0;padding:0;margin:var(--e-2) 0 0;display:flex;gap:var(--e-3);align-items:center;flex-wrap:wrap}
.ouinon legend{font-weight:600;font-size:var(--t-meta);color:var(--gris);letter-spacing:.02em;padding:0;margin-bottom:var(--e-1)}
.ouinon label{display:inline-flex;align-items:center;gap:.35rem;margin:0;font-size:var(--t-texte);color:var(--encre);font-weight:400}
.ouinon input{accent-color:var(--signal);width:16px;height:16px;margin:0}
.ac{position:relative}
.ac-liste{position:absolute;left:0;right:0;top:100%;z-index:3;margin:var(--e-1) 0 0;padding:var(--e-1) 0;list-style:none;background:var(--blanc);border:1px solid var(--filet);border-radius:var(--r-champ);max-height:220px;overflow:auto;text-align:left}
.ac-liste li{padding:var(--e-1) var(--e-3);cursor:pointer;border-left:3px solid transparent;font-size:var(--t-texte)}
.ac-liste li small{display:block;color:var(--gris);font-size:var(--t-meta)}
.ac-liste li:hover,.ac-liste li[aria-selected=true]{background:var(--signal-fond);border-left-color:var(--signal)}
textarea.tf{resize:vertical;min-height:72px}
#cotRef{font-family:var(--titre);color:var(--signal)}
.b1,.b2,.b3{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.5rem 1rem;border-radius:var(--r-bouton);font:600 var(--t-texte) var(--corps);border:1.5px solid transparent;cursor:pointer;white-space:nowrap}
.b1{background:var(--signal);color:var(--blanc)}
.b1:hover{background:var(--signal-2)}
.b1.danger{background:var(--alerte)}
.b2{background:transparent;color:var(--encre);border-color:var(--filet)}
.b2:hover{border-color:var(--encre)}
.b2.danger{color:var(--alerte)}
.b2.danger:hover{border-color:var(--alerte)}
.b3{background:var(--craie);color:var(--encre);font-size:var(--t-meta);padding:.35rem .7rem}
.b3:hover{background:var(--craie-2)}
.ic{width:36px;height:36px;padding:0;display:inline-grid;place-items:center;border-radius:var(--r-bouton);border:1px solid var(--filet);background:var(--blanc);color:var(--gris);cursor:pointer}
.ic:hover{color:var(--encre);border-color:var(--encre)}
.ic.danger:hover{color:var(--alerte);border-color:var(--alerte)}
.b1:focus-visible,.b2:focus-visible,.b3:focus-visible,.ic:focus-visible,.liste button.lig:focus-visible .nom{outline:2px solid var(--signal);outline-offset:2px}
.formats{border:0;padding:0;margin:var(--e-3) 0 0;display:flex;gap:var(--e-1);flex-wrap:wrap}
.formats legend{font-weight:600;font-size:var(--t-meta);color:var(--gris);letter-spacing:.02em;padding:0;margin-bottom:var(--e-1)}

/* Mes demandes */
.porte{width:min(420px,100%);margin:var(--e-5) auto}
.porte .act{display:flex;justify-content:flex-end;margin-top:var(--e-3)}
.outils{display:flex;gap:var(--e-2);align-items:center;margin:var(--e-4) 0 var(--e-3)}
.outils .tf{max-width:360px}
.inline{display:inline}
.tab{width:100%;border-collapse:collapse;font-size:var(--t-texte)}
.tab th{text-align:left;font-weight:600;color:var(--gris);font-size:var(--t-meta);letter-spacing:.02em;border-bottom:1.5px solid var(--encre);padding:var(--e-2) var(--e-2)}
.tab td{padding:var(--e-2);border-bottom:1px solid var(--filet);vertical-align:top;font-variant-numeric:tabular-nums}
.tab td b{display:block}.tab td:first-child{white-space:nowrap}.tab td small{display:block;color:var(--gris);font-size:var(--t-meta)}
.tab .n{text-align:right;white-space:nowrap}
.tab select.tf{width:auto;padding:.3rem .5rem;font-size:var(--t-meta)}
.tab .act-cell{white-space:nowrap}.tab .act-cell .b3{margin-right:var(--e-1)}
main.w{padding-bottom:var(--e-6)}
@media(max-width:900px){.tab thead{display:none}.tab tr{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-1) var(--e-2);padding:var(--e-2) 0;border-bottom:1px solid var(--filet)}.tab td{border:0;padding:0}.tab .n{text-align:left}}

/* Modales */
.modale{border:0;border-radius:var(--r-panneau);padding:var(--e-3) var(--e-4);width:min(480px,calc(100% - 2rem));background:var(--blanc);color:var(--encre);border-top:4px solid var(--signal)}
.modale::backdrop{background:var(--bitume);opacity:.7}
.modale .act{display:flex;justify-content:flex-end;gap:var(--e-2);margin-top:var(--e-4)}
.modale p{margin:var(--e-2) 0}

@media(max-width:900px){
  .cles{grid-template-columns:1fr 1fr}
  .grille2{grid-template-columns:1fr}
  .trois,.deux{grid-template-columns:1fr}
  .plan{min-width:1000px}
  .plan .cote{font-size:30px}
  .plan .pal text{font-size:18px}
  .plan .pal .sub{font-size:15px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}