:root{--fond:#f4f4f1;--surface:#fff;--texte:#1f2933;--texte-doux:#5f6b76;--bordure:#d5d5cf;--primaire:#2f5d8a;--primaire-texte:#fff;--primaire-fond:#e3ecf5;--ok:#2e7d4f;--ok-fond:#e5f2ea;--attention:#9a6700;--attention-fond:#fbf0d9;--danger:#b42318;--danger-fond:#fbe7e5;--neutre-fond:#ecece8;--rayon:12px;--bouton-hauteur:64px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--fond);color:var(--texte);margin:0;font:18px/1.35 system-ui,sans-serif}h1{margin:0;font-size:20px}h2{margin:0 0 12px;font-size:20px}button{font:inherit;cursor:pointer}.app{max-width:560px;min-height:100vh;padding-bottom:env(safe-area-inset-bottom);margin:0 auto}.app.large{max-width:960px}.entete{background:var(--primaire);color:var(--primaire-texte);justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.entete small{opacity:.85;font-size:14px}.agent{background:var(--surface);border-bottom:1px solid var(--bordure);justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex}.agent .prenom{font-size:26px;font-weight:700}.agent .etiquette{color:var(--texte-doux);font-size:13px;display:block}.contenu{padding:16px}.carte{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);margin-bottom:12px;padding:14px}label,.etiquette-champ{margin:14px 0 6px;font-weight:600;display:block}.texte-doux{color:var(--texte-doux);font-size:15px}.champ{border:2px solid var(--bordure);border-radius:var(--rayon);width:100%;height:56px;font:inherit;background:var(--surface);color:var(--texte);padding:0 14px;font-size:20px}.champ:focus{outline:3px solid var(--primaire-fond);border-color:var(--primaire)}select.champ{appearance:auto}.bouton{width:100%;min-height:var(--bouton-hauteur);border-radius:var(--rayon);border:2px solid var(--primaire);background:var(--primaire);color:var(--primaire-texte);text-align:center;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:20px;font-weight:700;display:flex}.bouton.secondaire{background:var(--surface);color:var(--primaire)}.bouton.ok{background:var(--ok);border-color:var(--ok)}.bouton.petit{width:auto;min-height:40px;padding:0 12px;font-size:15px}.bouton:disabled{opacity:.55;cursor:default}.rangee{gap:10px;display:flex}.rangee>*{flex:1}.espace{height:12px}.choix{flex-wrap:wrap;gap:10px;display:flex}.choix button{border:2px solid var(--bordure);border-radius:var(--rayon);background:var(--surface);min-width:90px;height:56px;color:var(--texte);flex:1;justify-content:center;align-items:center;gap:6px;font-size:20px;font-weight:700;display:flex}.choix button.actif{background:var(--primaire);color:var(--primaire-texte);border-color:var(--primaire)}.avert{border-radius:var(--rayon);align-items:flex-start;gap:8px;margin-top:10px;padding:10px 12px;font-size:16px;display:flex}.avert svg{flex:none;margin-top:2px}.avert.attention{background:var(--attention-fond);color:var(--attention);border:1px solid var(--attention)}.avert.danger{background:var(--danger-fond);color:var(--danger);border:1px solid var(--danger)}.avert.ok{background:var(--ok-fond);color:var(--ok);border:1px solid var(--ok)}.icone{vertical-align:-.18em;flex:none;width:1.1em;height:1.1em}.pastille{border-radius:999px;align-items:center;gap:4px;padding:2px 10px;font-size:14px;font-weight:700;display:inline-flex}.pastille.route{background:var(--attention-fond);color:var(--attention)}.pastille.port{background:var(--primaire-fond);color:var(--primaire)}.pastille.decharge{background:var(--ok-fond);color:var(--ok)}.pastille.marque{background:var(--danger-fond);color:var(--danger)}.pastille.remplacant{background:var(--primaire);color:var(--primaire-texte)}.pastille.neutre{background:var(--neutre-fond);color:var(--texte-doux)}.camion{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);margin-bottom:12px;padding:14px}.camion .haut{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.camion .immat{font-size:24px;font-weight:800}.camion .detail{color:var(--texte-doux);margin:4px 0;font-size:16px}.camion .marques{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.recap{border-collapse:collapse;width:100%;font-size:19px}.recap td{border-bottom:1px solid var(--bordure);padding:8px 0}.recap td:first-child{color:var(--texte-doux);width:42%;font-size:16px}.recap td:last-child{font-weight:700}.menu{background:var(--surface);border-bottom:1px solid var(--bordure);gap:4px;padding:0 8px;display:flex;overflow-x:auto}.menu a{color:var(--texte-doux);white-space:nowrap;border-bottom:4px solid #0000;padding:12px;font-size:16px;font-weight:600;text-decoration:none}.menu a.active{color:var(--primaire);border-bottom-color:var(--primaire)}.grille{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));align-items:start;gap:12px;display:grid}.lien{color:var(--primaire);background:0 0;border:none;padding:8px 0;font-size:16px;text-decoration:underline}.onglets{background:var(--surface);border-bottom:1px solid var(--bordure);display:flex}.onglets button{color:var(--texte-doux);background:0 0;border:none;border-bottom:4px solid #0000;flex:1;justify-content:center;align-items:center;gap:6px;padding:12px 6px;font-size:16px;font-weight:700;display:flex}.onglets button.actif{color:var(--primaire);border-bottom-color:var(--primaire)}.onglets .compte{background:var(--texte-doux);color:#fff;border-radius:999px;padding:0 8px;font-size:14px}.onglets button.actif .compte{background:var(--primaire)}.camion .detail strong{color:var(--texte)}.camion .sous-bouton{margin-top:8px}.maj{color:var(--texte-doux);text-align:center;margin:8px 0 0;font-size:13px}.coche{align-items:center;gap:10px;margin:14px 0 6px;font-weight:600;display:flex}.coche input{width:24px;height:24px}.lien.discret{color:var(--texte-doux);margin:0 auto;font-size:14px;display:block}.tuiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px;display:grid}.tuile{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--rayon);padding:14px}.tuile .nombre{font-size:38px;font-weight:800;line-height:1.1}.tuile .palettes{font-size:17px;font-weight:700}.tuile .nom{color:var(--texte-doux);font-size:15px}.tuile.route .nombre{color:var(--attention)}.tuile.port .nombre{color:var(--primaire)}.tuile.decharge .nombre{color:var(--ok)}.tuile.alerte .nombre{color:var(--danger)}.deux-colonnes{grid-template-columns:1fr 1.6fr;align-items:start;gap:16px;display:grid}@media (width<=760px){.deux-colonnes{grid-template-columns:1fr}}.defile{overflow-x:auto}table.liste{border-collapse:collapse;background:var(--surface);width:100%;font-size:15px}table.liste th{text-align:left;color:var(--texte-doux);border-bottom:2px solid var(--bordure);white-space:nowrap;padding:8px 6px;font-size:13px}table.liste td{border-bottom:1px solid var(--bordure);vertical-align:top;padding:8px 6px}.alerte-ligne{border-left:5px solid var(--danger);background:var(--danger-fond);border-radius:6px;margin-bottom:8px;padding:8px 10px;font-size:15px}.alerte-ligne.attention{border-left-color:var(--attention);background:var(--attention-fond)}.alerte-ligne.neutre{border-left-color:var(--bordure);background:var(--surface)}.depuis b{font-size:17px;display:block}.depuis b.depasse{color:var(--danger)}.depuis small{color:var(--texte-doux);font-size:13px}.haut-liste{justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;display:flex}.haut-liste h2{margin:0}.filtres-grille{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 12px;display:grid}.filtres-grille label{margin:8px 0 4px;font-size:15px}.filtres-grille .champ{height:48px;font-size:17px}.filtres{flex-wrap:wrap;gap:8px;margin:12px 0;display:flex}.filtre{background:var(--surface);border:2px solid var(--bordure);color:var(--texte);border-radius:999px;align-items:center;gap:6px;padding:6px 14px;font-size:15px;display:inline-flex}.filtre.actif{border-color:var(--primaire);color:var(--primaire);font-weight:700}a.bouton{text-decoration:none}.barre{background:var(--neutre-fond);border-radius:999px;height:14px;margin:6px 0;overflow:hidden}.barre>span{background:var(--primaire);border-radius:999px;height:100%;display:block}.barre.depasse>span{background:var(--ok)}.bandeau-bateau .gros{font-size:22px;font-weight:800}.bandeau-bateau .societes{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:10px;display:grid}.bandeau-bateau .societe{border:1px solid var(--bordure);border-radius:var(--rayon);padding:10px}.bandeau-bateau .lignes-societe{color:var(--texte-doux,inherit);font-size:14px}.bandeau-bateau .lignes-societe>div{margin-top:2px}.bl-cible{border:2px solid var(--attention);background:var(--attention-fond);border-radius:6px;align-items:center;gap:4px;padding:2px 6px;display:inline-flex}.choisi{margin:4px 0 0}.horloge{background:var(--surface);border-bottom:1px solid var(--bordure);color:var(--texte-doux);flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:6px 16px;font-size:14px;display:flex}.horloge-heure{color:var(--texte);font-variant-numeric:tabular-nums;font-size:20px;font-weight:700}.horloge-infos{flex-wrap:wrap;gap:8px;display:inline-flex}.horloge-date{text-transform:none}.horloge.hors-connexion{background:#eceff1;border-bottom-style:dashed}.horloge.hors-connexion .horloge-heure{color:var(--texte-doux)}.horloge-etat{color:var(--texte);flex-basis:100%;align-items:center;gap:6px;font-weight:600;display:inline-flex}.depasse-seuil{color:var(--danger)}details.classees{margin:8px 0}details.classees summary{cursor:pointer;margin-bottom:8px;font-weight:600}
