:root {
  --pico-font-size: 100%;
  --c-ok: #2e7d32;
  --c-proche: #e08600;
  --c-depasse: #c62828;
  --c-inconnu: #8a8f98;
}

header.container nav { padding-block: 0.25rem; }
.marque { color: inherit; }
button.lien {
  all: unset; cursor: pointer; color: var(--pico-primary);
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
}

h2 { margin-bottom: 0.75rem; }
.entete { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.entete h2 { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.actions a[role="button"], .actions button { margin: 0; padding: 0.35rem 0.8rem; font-size: 0.9rem; }
.actions form { margin: 0; }
.discret { color: var(--pico-muted-color); font-size: 0.9rem; }
.erreur { color: var(--c-depasse); }

/* Messages */
.message { padding: 0.6rem 1rem; border-radius: var(--pico-border-radius); background: var(--pico-card-background-color); border-left: 4px solid var(--pico-primary); }
.message-success { border-color: var(--c-ok); }
.message-error { border-color: var(--c-depasse); }
.message-warning { border-color: var(--c-proche); }

/* Pastilles d'état */
.pastille { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.pastille::before { content: ""; width: 0.8em; height: 0.8em; border-radius: 50%; background: currentColor; }
.pastille-ok { color: var(--c-ok); }
.pastille-proche { color: var(--c-proche); }
.pastille-depasse { color: var(--c-depasse); }
.pastille-inconnu { color: var(--c-inconnu); }

/* Compteurs */
.compteurs { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-bottom: 1rem; }
.compteurs a { text-decoration: none; }

/* Filtres */
.filtres { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin-bottom: 1rem; }
.filtres select { margin: 0; width: auto; }
.filtres label { margin: 0; }

/* Cartes du parc */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.lien-carte { display: block; color: inherit; text-decoration: none; }
.carte { margin: 0; height: 100%; padding: 1rem; border-left: 6px solid var(--c-inconnu); }
.lien-carte:hover .carte { box-shadow: 0 0 0 2px var(--pico-primary-focus); }
.carte.etat-ok { border-left-color: var(--c-ok); }
.carte.etat-proche { border-left-color: var(--c-proche); }
.carte.etat-depasse { border-left-color: var(--c-depasse); }
.carte .immat { font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.05em; }
.carte .ligne { display: flex; justify-content: space-between; gap: 0.5rem; }
.carte p { margin: 0.25rem 0 0; }

/* Tableaux */
.defilement { overflow-x: auto; }
table td, table th { vertical-align: top; }
td.actions-cellule { white-space: nowrap; text-align: right; }
td.actions-cellule a, td.actions-cellule button { font-size: 0.85rem; margin-left: 0.5rem; }

dl.infos { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; }
dl.infos dt { color: var(--pico-muted-color); }
dl.infos dd { margin: 0; }

.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 768px) { .deux-colonnes { grid-template-columns: 1fr; } }

/* Petits formulaires sur une ligne (relevé km, réalisation) */
.en-ligne { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0; }
.en-ligne input, .en-ligne button { margin: 0; width: auto; }
.en-ligne input.large { flex: 1 1 12rem; }
.en-ligne label.case { margin: 0; white-space: nowrap; }

/* Blocs d'entretien / d'opération */
.bloc { padding: 1rem; border-left: 6px solid var(--c-inconnu); }
.bloc.etat-ok { border-left-color: var(--c-ok); }
.bloc.etat-proche { border-left-color: var(--c-proche); }
.bloc.etat-depasse { border-left-color: var(--c-depasse); }
.bloc .entete { margin-bottom: 0.5rem; }
.bloc .actions a { font-size: 0.9rem; }
.prochaine { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
table.realisations { margin-bottom: 0.5rem; font-size: 0.95rem; }

/* Champs de formulaire conditionnels */
.champ { margin-bottom: var(--pico-spacing); }
.champ input, .champ select, .champ textarea { margin-bottom: 0.25rem; }


.connexion { max-width: 420px; margin: 3rem auto; }

ul.erreurs { color: var(--c-depasse); margin: 0 0 0.5rem; padding-left: 1rem; }
.champ-cases ul { list-style: none; padding: 0; columns: 2; }
.champ-cases li { list-style: none; }

/* Rapport */
.feuille { padding: 1.5rem; background: #fff; }
@media print {
  header.container, .no-print, .message { display: none !important; }
  main.container { max-width: none; padding: 0; }
  .feuille { box-shadow: none; padding: 0; margin: 0; }
}