* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 13px/1.4 "Segoe UI", Arial, sans-serif; color: #1f2933; background: #eef1f5; display: flex; flex-direction: column; }

header { background: #12344d; color: #fff; padding: 8px 16px; display: flex; align-items: baseline; gap: 12px; }
header h1 { font-size: 17px; margin: 0; }
.sous-titre { opacity: .75; font-size: 12px; }

main { flex: 1; min-height: 0; display: flex; }
.colonne { width: 640px; max-width: 55%; display: flex; flex-direction: column; gap: 8px; padding: 8px; overflow-y: auto; }
#carte { flex: 1; min-height: 300px; }

.bloc { background: #fff; border: 1px solid #d5dbe3; border-radius: 6px; padding: 10px 12px; }
.bloc h2 { font-size: 13px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; color: #52606d; }
.bloc-journal { flex: 1; min-height: 220px; display: flex; flex-direction: column; }
#journal-conteneur { flex: 1; overflow-y: auto; min-height: 0; }

.ligne { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
label.inline { display: inline-flex; align-items: center; gap: 4px; }
.grille-params { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; align-items: end; }
.grille-params label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #52606d; }
.pastille-info { grid-column: 1 / -1; font-size: 12px; color: #52606d; }

input[type=text], input[type=password], input[type=number], select { padding: 4px 6px; border: 1px solid #c3cbd6; border-radius: 4px; font: inherit; min-width: 0; }
#env-url { flex: 1; }
button { padding: 5px 10px; border: 1px solid #c3cbd6; border-radius: 4px; background: #f5f7fa; cursor: pointer; font: inherit; }
button:hover { background: #e4e9f0; }
button:disabled { opacity: .5; cursor: default; }
button.primaire { background: #1565c0; border-color: #1565c0; color: #fff; }
button.primaire:hover { background: #0d4f9c; }
button.discret { border: none; background: none; color: #1565c0; text-transform: none; padding: 0 4px; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11px; color: #7b8794; font-weight: 600; padding: 3px 4px; border-bottom: 1px solid #d5dbe3; position: sticky; top: 0; background: #fff; }
td { padding: 3px 4px; border-bottom: 1px solid #eef1f5; vertical-align: middle; }
#techs input[type=text], #techs input[type=password] { width: 110px; }
#techs .t-actions { white-space: nowrap; }
#techs .t-actions button { padding: 2px 6px; margin-right: 2px; }
#techs small { color: #52606d; }
.puce { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }

.message { font-size: 12px; color: #52606d; }
.erreur, .message.erreur, td.erreur, small.alerte { color: #c62828; }
#journal tr.erreur td { color: #c62828; background: #fdecea; }
#journal tr.info td { color: #52606d; font-style: italic; }
#journal tr.action-created td:nth-child(4) { color: #2e7d32; font-weight: 600; }
#journal tr.action-extended td:nth-child(4) { color: #1565c0; font-weight: 600; }
#journal tr.action-ignored td:nth-child(4) { color: #b26a00; font-weight: 600; }
#journal td { font-family: Consolas, monospace; font-size: 12px; }

/* marqueurs Leaflet */
.arret { width: 24px; height: 24px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 12px; line-height: 20px; text-align: center; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.gps { width: 20px; height: 20px; margin: 2px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 0 10px rgba(0,0,0,.5); }

@media (max-width: 1000px) { main { flex-direction: column; } .colonne { width: auto; max-width: none; } #carte { min-height: 400px; } }