/* Feuille de style unique. Mobile d'abord : la page est surtout consultee sur un
   telephone, au decollage, avec un reseau incertain. */

:root {
  --bleu: #1d4e73;
  --bleu-clair: #e8f1f7;
  --bleu-vif: #2b7cb3;
  --encre: #17242e;
  --gris: #5c6b76;
  --gris-clair: #e5eaee;
  --fond: #f7f9fb;
  --surface: #fff;

  --ok: #1a7a4c;
  --ok-fond: #e6f4ec;
  --bientot: #96590a;
  --bientot-fond: #fdf1dd;
  --retard: #a52121;
  --retard-fond: #fbe9e9;
  --neutre: #5c6b76;
  --neutre-fond: #eef1f3;

  /* En-tete. Ces jetons decrivent un texte pose sur un fond sombre, et restent
     donc clairs dans les deux themes : les reutiliser depuis --surface avait
     rendu l'en-tete illisible en mode sombre. */
  --entete-fond: #143a56;
  --entete-fond-bas: #1d4e73;
  --entete-texte: #fff;
  --entete-texte-doux: #bcd4e5;
  --entete-actif: #8fd0ff;
  --entete-bordure: rgb(255 255 255 / 14%);

  --bouton-fond: #1d4e73;
  --bouton-texte: #fff;

  --rayon: 10px;
  --ombre: 0 1px 2px rgb(23 36 46 / 8%), 0 4px 12px rgb(23 36 46 / 6%);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--encre);
  background: var(--fond);
}

a { color: var(--bleu-vif); }
a:hover { color: var(--bleu); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 650; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; margin-top: 2rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }

.contenu {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 4rem;
}

/* Lien d'evitement : visible seulement quand il recoit le focus au clavier. */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: .6rem 1rem;
  background: var(--surface);
  color: var(--encre);
  border-radius: 0 0 var(--rayon) 0;
}

.saut-contenu:focus {
  left: 0;
  outline: 2px solid var(--bleu-vif);
}

/* ------------------------------------------------------------- navigation */

/* L'en-tete tient sur deux rangees : l'identite du site en haut, les onglets
   en dessous. Les deux onglets destines au passager sont ainsi separes de
   l'acces pilote, qui ne le concerne pas. */

.entete {
  background: linear-gradient(var(--entete-fond), var(--entete-fond-bas));
  color: var(--entete-texte);
}

.entete-haut,
.entete-nav {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.entete-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .8rem;
  padding-bottom: .7rem;
}

.marque {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--entete-texte);
  text-decoration: none;
  min-width: 0;
}

.marque svg { flex: none; }

.marque-texte { min-width: 0; }

.marque-texte b {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.marque-texte > span {
  display: block;
  font-size: .82rem;
  font-weight: 400;
  color: var(--entete-texte-doux);
  line-height: 1.2;
}

/* Acces pilote : volontairement discret, ce n'est pas une destination pour un
   passager. */
.entete-acces {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: none;
}

.entete-acces form { margin: 0; display: flex; }

.entete-acces a,
.entete-acces button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .75rem;
  border: 1px solid var(--entete-bordure);
  border-radius: 999px;
  background: transparent;
  color: var(--entete-texte-doux);
  font: inherit;
  font-size: .85rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.entete-acces a:hover,
.entete-acces button:hover {
  background: rgb(255 255 255 / 12%);
  color: var(--entete-texte);
}

.entete-acces a[aria-current="page"] {
  background: rgb(255 255 255 / 16%);
  color: var(--entete-texte);
  border-color: transparent;
}

/* Barre d'onglets : le soulignement dit ou l'on se trouve, et la couleur n'est
   pas seule a le dire puisque l'onglet actif passe aussi en gras et porte
   aria-current. */
.entete-nav {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--entete-bordure);
}

.entete-nav::-webkit-scrollbar { display: none; }

.onglet {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem .9rem;
  color: var(--entete-texte-doux);
  text-decoration: none;
  font-size: .95rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  /* Compense la bordure, pour que l'etiquette ne bouge pas a la selection. */
  margin-bottom: -1px;
}

.onglet:hover {
  color: var(--entete-texte);
  background: rgb(255 255 255 / 8%);
}

.onglet[aria-current="page"] {
  color: var(--entete-texte);
  font-weight: 650;
  border-bottom-color: var(--entete-actif);
}

.onglet svg { flex: none; opacity: .85; }
.onglet[aria-current="page"] svg { opacity: 1; }

/* Sur un telephone, trois onglets avec icone depassent la largeur et le dernier
   se retrouve coupe. On retire les icones et on repartit la largeur : les trois
   destinations restent visibles d'un coup d'oeil, avec des cibles plus larges
   au doigt. */
@media (max-width: 30rem) {
  .entete-nav { gap: 0; }

  .onglet {
    flex: 1;
    justify-content: center;
    padding: .7rem .3rem;
    font-size: .9rem;
  }

  .onglet svg { display: none; }
}

.entete a:focus-visible,
.entete button:focus-visible {
  outline: 2px solid var(--entete-actif);
  outline-offset: -2px;
  border-radius: 4px;
}

.pastille {
  display: inline-block;
  min-width: 1.35em;
  padding: 0 .35em;
  border-radius: 999px;
  background: #e8600f;
  color: #fff;
  font-size: .78em;
  font-weight: 700;
  text-align: center;
}

/* ------------------------------------------------------------- statistiques */

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .75rem;
  margin: 1.25rem 0 2rem;
}

.chiffre {
  background: var(--surface);
  border-radius: var(--rayon);
  padding: .9rem 1rem;
  box-shadow: var(--ombre);
}

.chiffre b {
  display: block;
  font-size: 1.75rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--bleu);
}

.chiffre span {
  font-size: .85rem;
  color: var(--gris);
}

/* -------------------------------------------------------------- graphique */

.histogramme {
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  height: 9rem;
  padding: 0;
  margin: 0 0 .5rem;
  list-style: none;
}

.histogramme li {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: .3rem;
  font-size: .78rem;
  color: var(--gris);
}

.histogramme .barre {
  width: 100%;
  min-height: 2px;
  background: var(--bleu-vif);
  border-radius: 3px 3px 0 0;
}

.histogramme .valeur {
  font-variant-numeric: tabular-nums;
  color: var(--encre);
  font-weight: 600;
}

/* ---------------------------------------------------------------- tableaux */

.carte {
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

table { width: 100%; border-collapse: collapse; }

th, td {
  padding: .6rem .8rem;
  text-align: left;
  border-bottom: 1px solid var(--gris-clair);
  font-size: .93rem;
  vertical-align: top;
}

th {
  background: var(--bleu-clair);
  color: var(--bleu);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bleu-clair); }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.table-defile { overflow-x: auto; }

.tronque {
  max-width: 16rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------- materiel */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.materiel {
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1rem;
  border-left: 4px solid var(--neutre);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.materiel.statut-ok { border-left-color: var(--ok); }
.materiel.statut-bientot { border-left-color: var(--bientot); }
.materiel.statut-en_retard { border-left-color: var(--retard); }
.materiel.statut-reforme,
.materiel.statut-inconnu { border-left-color: var(--neutre); }

.materiel h3 { margin: 0; font-size: 1.05rem; }
.materiel h3 a { text-decoration: none; color: inherit; }
.materiel h3 a:hover { text-decoration: underline; }

.materiel .categorie {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gris);
}

.materiel dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem .7rem;
  font-size: .88rem;
}

.materiel dt { color: var(--gris); }
.materiel dd { margin: 0; font-variant-numeric: tabular-nums; }

.motifs {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .85rem;
  color: var(--gris);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: flex-start;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  background: var(--neutre-fond);
  color: var(--neutre);
}

/* Le statut n'est jamais porte par la seule couleur : le texte le repete. */
.badge.statut-ok { background: var(--ok-fond); color: var(--ok); }
.badge.statut-bientot { background: var(--bientot-fond); color: var(--bientot); }
.badge.statut-en_retard { background: var(--retard-fond); color: var(--retard); }

.jauge {
  height: 6px;
  background: var(--gris-clair);
  border-radius: 999px;
  overflow: hidden;
}

.jauge div { height: 100%; background: var(--bleu-vif); }
.jauge.pleine div { background: var(--retard); }

/* ------------------------------------------------------------ commentaires */

.commentaire {
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: .9rem 1rem;
  margin-bottom: .75rem;
}

.commentaire .auteur { font-weight: 650; }
.commentaire .quand { color: var(--gris); font-size: .82rem; }
.commentaire p { margin: .35rem 0 0; white-space: pre-wrap; }

/* ---------------------------------------------------------- popup d'avis */
/* :target pur, sans JS : le lien "N avis" pointe vers l'ancre, "Fermer" vide
   le fragment. */

.popup-avis {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  padding: 1rem;
  align-items: center;
  justify-content: center;
  background: rgb(23 36 46 / 55%);
}

.popup-avis:target { display: flex; }

.popup-avis .popup-panneau {
  background: var(--fond);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.1rem;
  width: 100%;
  max-width: 30rem;
  max-height: 80vh;
  overflow-y: auto;
}

.popup-entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: .7rem;
}

.popup-fermer {
  color: var(--gris);
  font-size: 1.2rem;
  line-height: 1;
  text-decoration: none;
  flex: none;
}

.popup-fermer:hover { color: var(--encre); }

/* ----------------------------------------------------------- formulaires */

form.bloc {
  background: var(--surface);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.1rem;
  margin-bottom: 1.5rem;
}

.champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .9rem;
}

label { display: block; font-size: .85rem; color: var(--gris); margin-bottom: .2rem; }

input[type="text"], input[type="date"], input[type="number"],
input[type="password"], select, textarea {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--gris-clair);
  border-radius: 6px;
  font: inherit;
  background: var(--surface);
  color: var(--encre);
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--bleu-vif);
  outline-offset: 1px;
  border-color: var(--bleu-vif);
}

textarea { min-height: 6rem; resize: vertical; }

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bouton {
  display: inline-block;
  padding: .55rem 1.1rem;
  border: 0;
  border-radius: 6px;
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.bouton:hover { background: var(--bleu-vif); color: var(--bouton-texte); }
.bouton.secondaire { background: var(--gris-clair); color: var(--encre); }
.bouton.secondaire:hover { background: #d5dce1; color: var(--encre); }
.bouton.danger { background: var(--retard); }
.bouton.danger:hover { background: #c22c2c; }
.bouton.petit { padding: .3rem .7rem; font-size: .85rem; }

.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; align-items: center; }

/* ------------------------------------------------------------- messages */

.message {
  padding: .8rem 1rem;
  border-radius: var(--rayon);
  margin-bottom: 1.25rem;
  border-left: 4px solid;
}

.message.succes { background: var(--ok-fond); border-color: var(--ok); color: #14603c; }
.message.erreur { background: var(--retard-fond); border-color: var(--retard); color: #8a1c1c; }
.message.info { background: var(--bleu-clair); border-color: var(--bleu-vif); color: var(--bleu); }

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
  align-items: center;
}

.filtres a {
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--gris-clair);
  text-decoration: none;
  font-size: .88rem;
  color: var(--gris);
}

.filtres a[aria-current] {
  background: var(--bleu);
  border-color: var(--bleu);
  color: var(--surface);
  font-weight: 600;
}

.pagination { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; }

.discret { color: var(--gris); font-size: .88rem; }

.prive {
  background: var(--bientot-fond);
  border-radius: 4px;
  padding: 0 .3em;
  font-size: .92em;
}

.pied {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  color: var(--gris);
  font-size: .85rem;
  border-top: 1px solid var(--gris-clair);
}

.pied a { color: var(--gris); }

@media (prefers-color-scheme: dark) {
  :root {
    --encre: #e6edf3;
    --gris: #9cb0bf;
    --gris-clair: #2b3b47;
    --fond: #121a20;
    --surface: #1a252d;
    --bleu-clair: #1f3140;
    --bleu: #3f88bd;
    --bleu-vif: #6cb2e0;

    --ok: #67d19b;
    --ok-fond: #14332a;
    --bientot: #e8b263;
    --bientot-fond: #35290f;
    --retard: #f08c8c;
    --retard-fond: #3a1c1c;
    --neutre: #9cb0bf;
    --neutre-fond: #24323c;

    /* L'en-tete reste un bandeau sombre a texte clair dans les deux themes :
       seule la nuance du fond change. */
    --entete-fond: #16222c;
    --entete-fond-bas: #1b2b38;
    --entete-texte: #f2f7fb;
    --entete-texte-doux: #a8bdcd;
    --entete-actif: #6cb2e0;
    --entete-bordure: rgb(255 255 255 / 12%);

    --bouton-fond: #6cb2e0;
    --bouton-texte: #0f1a21;
  }

  .bouton.secondaire { background: var(--gris-clair); color: var(--encre); }
  .bouton.danger { background: #a83b3b; color: #fff; }
}

@media print {
  .entete, .filtres, .pagination, form { display: none; }
  body { background: #fff; }
  .carte, .materiel { box-shadow: none; border: 1px solid #ccc; }
}