:root {
  --fond: #eef1f5;
  --surface: #ffffff;
  --encre: #14181f;
  --encre-douce: #5a6472;
  --filet: #dde2e9;
  --accent: #12376b;
  --accent-clair: #e7edf6;
  --valide: #0b6b45;
  --alerte: #8a5000;
  --danger: #a32020;
  --rayon: 3px;
  --hauteur-entete: 52px;
}

* { box-sizing: border-box; }

/* Les regles display: grid / flex ci-dessous l'emportent sur la valeur par
   defaut de l'attribut hidden. Sans ce rappel, l'ecran de connexion reste
   visible au-dessus de l'application une fois connecte. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fond);
  color: var(--encre);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }

button, input, select { font: inherit; color: inherit; }

/* Boutons ---------------------------------------------------------- */
.bouton {
  border: 1px solid transparent;
  border-radius: var(--rayon);
  padding: 7px 14px;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bouton--principal { background: var(--accent); color: #fff; font-weight: 600; }
.bouton--principal:hover { background: #0e2c56; }
.bouton--secondaire { background: var(--surface); border-color: var(--filet); }
.bouton--secondaire:hover { border-color: #b9c2ce; }
.bouton--discret { color: var(--encre-douce); }
.bouton--discret:hover { color: var(--encre); background: rgba(0, 0, 0, .05); }
.bouton--sur-fonce { color: #c9d6e9; }
.bouton--sur-fonce:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.bouton--danger { color: var(--danger); }
.bouton--danger:hover { background: #fbeaea; }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }

.lien-discret { color: var(--encre-douce); font-size: 13px; text-decoration: underline; }
.lien-discret:hover { color: var(--accent); }

/* Connexion -------------------------------------------------------- */
.connexion {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}
.connexion__carte {
  width: 340px;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 28px;
  display: grid;
  gap: 14px;
}
.connexion__sous-titre { margin: -6px 0 6px; color: var(--encre-douce); font-size: 14px; }
.connexion label, .grille label { display: grid; gap: 5px; font-size: 13px; color: var(--encre-douce); }
.connexion input, .grille input, .grille select,
.rail__haut input, .filtres input[type="search"] {
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 8px 10px;
  background: #fff;
  width: 100%;
}
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

/* En-tête ---------------------------------------------------------- */
.entete {
  height: var(--hauteur-entete);
  background: var(--surface);
  border-bottom: 1px solid var(--filet);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.entete__titre { display: flex; align-items: baseline; gap: 10px; }
.entete__titre span { color: var(--encre-douce); font-size: 13px; }
.entete__compte { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--encre-douce); }

.onglets { display: flex; gap: 2px; }
.onglet {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: var(--rayon);
  color: var(--encre-douce);
  cursor: pointer;
}
.onglet:hover { background: rgba(0, 0, 0, .05); }
.onglet--actif { background: var(--accent-clair); color: var(--accent); font-weight: 600; }

/* Disposition ------------------------------------------------------ */
.disposition {
  display: grid;
  grid-template-columns: 268px 1fr;
  height: calc(100vh - var(--hauteur-entete));
}

.rail {
  background: var(--surface);
  border-right: 1px solid var(--filet);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
}
.rail__haut { padding: 12px; display: grid; gap: 8px; border-bottom: 1px solid var(--filet); }
.rail__bas { padding: 12px; display: grid; gap: 8px; border-top: 1px solid var(--filet); justify-items: start; }
.rail__bas .bouton { width: 100%; }

.clients { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; }
.clients li {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f2f6;
  cursor: pointer;
}
.clients li:hover { background: #f7f9fc; }
.clients li[aria-selected="true"] {
  background: var(--accent-clair);
  box-shadow: inset 3px 0 0 var(--accent);
}
.clients strong { display: block; font-weight: 600; font-size: 14px; }
.clients span { color: var(--encre-douce); font-size: 12px; font-variant-numeric: tabular-nums; }

.panneau { display: grid; grid-template-rows: auto auto 1fr; min-height: 0; }

.client-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px 12px;
}
.client-meta { margin: 4px 0 0; color: var(--encre-douce); font-size: 13px; font-variant-numeric: tabular-nums; }
.client-actions { display: flex; gap: 8px; }

.filtres { display: flex; align-items: center; gap: 14px; padding: 0 20px 12px; }
.filtres input[type="search"] { width: 260px; }
.filtres__compte { margin-left: auto; color: var(--encre-douce); font-size: 13px; }
.case { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--encre-douce); cursor: pointer; }

/* Tableau ---------------------------------------------------------- */
.tableau-cadre { overflow: auto; min-height: 0; padding: 0 20px 140px; }
.tableau { width: 100%; border-collapse: collapse; background: var(--surface); }
.tableau th, .tableau td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--filet);
}
.tableau thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--encre-douce);
  border-bottom: 1px solid #c8d0db;
  z-index: 1;
}
.tableau tbody tr:hover { background: #f7f9fc; }
.tableau tbody tr[data-choisi="1"] { background: var(--accent-clair); }
.col-case { width: 34px; }
.col-actions { width: 120px; }
.immat { font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.date { font-variant-numeric: tabular-nums; color: var(--encre-douce); }
.retire { color: var(--alerte); font-size: 12px; margin-left: 6px; }
.actions-ligne { display: flex; gap: 2px; justify-content: flex-end; }
.actions-ligne .bouton { padding: 4px 8px; font-size: 13px; }

.vide { padding: 40px 12px; color: var(--encre-douce); text-align: center; }

/* Barre de sélection ----------------------------------------------- */
.barre-action {
  position: fixed;
  left: 268px;
  right: 0;
  bottom: 0;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 20px;
  z-index: 6;
}
.barre-action__compte { display: flex; align-items: baseline; gap: 6px; }
.barre-action__compte strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.barre-action__compte span { font-size: 13px; color: #c9d6e9; }
.barre-action__options { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.barre-action .case { color: #e3ebf6; }
.champ-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #c9d6e9; }
.champ-inline input, .champ-inline select {
  border: 1px solid #3a5c8d;
  background: #0e2c56;
  color: #fff;
  border-radius: var(--rayon);
  padding: 5px 8px;
}
.barre-action__boutons { margin-left: auto; display: flex; gap: 8px; }
.barre-action .bouton--principal { background: #fff; color: var(--accent); }
.barre-action .bouton--principal:hover { background: #e3ebf6; }

/* Éditions --------------------------------------------------------- */
.editions { padding: 20px; max-width: 1000px; }
.editions__aide { color: var(--encre-douce); font-size: 13px; margin: 6px 0 16px; }
.editions .tableau { border: 1px solid var(--filet); }

/* Fenêtres --------------------------------------------------------- */
dialog {
  border: 1px solid var(--filet);
  border-radius: 4px;
  padding: 0;
  max-width: 92vw;
}
dialog::backdrop { background: rgba(20, 24, 31, .45); }
.fenetre { padding: 20px; width: 520px; max-width: 100%; display: grid; gap: 14px; }
.fenetre--large { width: 860px; }
.fenetre__aide { margin: 0; color: var(--encre-douce); font-size: 13px; }
.fenetre menu { display: flex; justify-content: flex-end; gap: 8px; margin: 4px 0 0; padding: 0; }
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grille label:first-child { grid-column: 1 / -1; }
#cadre-apercu { width: 100%; height: 70vh; border: 1px solid var(--filet); background: #f4f5f7; }

.rapport { font-size: 13px; border: 1px solid var(--filet); border-radius: var(--rayon); padding: 12px; background: #f9fafc; max-height: 220px; overflow: auto; }
.rapport dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 8px; }
.rapport dt { color: var(--encre-douce); }
.rapport dd { margin: 0; font-variant-numeric: tabular-nums; }
.rapport ul { margin: 6px 0 0; padding-left: 18px; color: var(--alerte); }

.message { margin: 0; font-size: 13px; }
.message--erreur { color: var(--danger); }

/* Notifications ---------------------------------------------------- */
.notifications { position: fixed; right: 16px; bottom: 90px; display: grid; gap: 8px; z-index: 20; }
.notification {
  background: var(--encre);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--rayon);
  font-size: 14px;
  max-width: 380px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.notification--succes { background: var(--valide); }
.notification--erreur { background: var(--danger); }
.notification a { color: #fff; font-weight: 600; }

@media (max-width: 900px) {
  .disposition { grid-template-columns: 1fr; }
  .rail { display: none; }
  .barre-action { left: 0; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: no-preference) {
  .notification { animation: apparition .18s ease-out; }
  @keyframes apparition { from { opacity: 0; transform: translateY(6px); } }
}