/* HandiTicket — identité : bleu émail des plaques de rue, craie de la plaque d'immatriculation,
   poinçon du ticket. Signature : la bande horaire 9 h → 20 h. */
:root {
  --email: #1D4FA8; --encre: #10203C; --craie: #F3F4F1;
  --gris: #5C6A85; --trait: #D9DEE7; --vert: #1E7F5C; --vert-bg: #DDF2E7;
  --ambre: #9A6B00; --ambre-bg: #FFF1CC; --rouge: #C8321F; --rouge-bg: #FBE3DF;
  --bg: var(--craie); --card: #FFFFFF; --ink: var(--encre); --brand-ink: #fff;
  --r: 18px; --r-s: 11px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0C1220; --card: #141C2E; --ink: #EEF2FA; --gris: #9AA6C2; --trait: #26304A;
    --email: #6E9BFF; --brand-ink: #08122A;
    --vert: #6FDCA5; --vert-bg: #123326; --ambre: #FFD37A; --ambre-bg: #3A2E10; --rouge: #FF9D95; --rouge-bg: #3B1A1A;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
h1, h2, .brand span { font-family: "Bricolage Grotesque", "Instrument Sans", sans-serif; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 5.5vw, 2.7rem); line-height: 1.05; margin: .2rem 0 .5rem; font-weight: 800; }
h2 { font-size: 1.15rem; margin: 0 0 .9rem; }
a { color: var(--email); }
.muted, small { color: var(--gris); font-size: .9rem; }
.mono, code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
code { background: var(--bg); padding: .1em .4em; border-radius: 6px; font-size: .88em; word-break: break-all; }
code.big { font-size: 1.1rem; padding: .3em .6em; }

/* En-tête */
.top { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap;
  max-width: 860px; margin: 0 auto; padding: 1rem 16px .5rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font-size: 1.25rem; }
.brand b { color: var(--email); font-weight: 800; }
.mark { width: 34px; height: 34px; }
nav { display: flex; gap: .25rem; align-items: center; background: var(--card); border: 1px solid var(--trait); border-radius: 99px; padding: .25rem; }
nav a, nav .link { padding: .45rem .9rem; border-radius: 99px; text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--ink); }
nav a[aria-current] { background: var(--email); color: var(--brand-ink); }
nav .link { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 500; color: var(--gris); }
main { max-width: 860px; margin: 0 auto; padding: .25rem 16px 2rem; }
footer { max-width: 860px; margin: 0 auto; padding: 0 16px 2.5rem; color: var(--gris); font-size: .82rem; }

/* Manchette du jour */
.today { padding: 1.4rem 0 1rem; }
.eyebrow { margin: 0; text-transform: capitalize; font-weight: 600; color: var(--email); letter-spacing: .02em; }
.lead { margin: 0; color: var(--gris); font-size: 1.05rem; max-width: 46ch; }

/* Cartes et formulaires */
.card { background: var(--card); border: 1px solid var(--trait); border-radius: var(--r); padding: 1.25rem; margin: 1rem 0; }
.card.narrow { max-width: 420px; margin: 2.5rem auto; }
.stack { display: grid; gap: .8rem; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.row input { flex: 1 1 200px; }
label { display: grid; gap: .3rem; font-weight: 500; font-size: .95rem; }
label.check { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; }
input[type=text], input[type=email], input[type=password], input:not([type]) {
  width: 100%; padding: .7rem .85rem; border-radius: var(--r-s); border: 1px solid var(--trait);
  background: var(--bg); color: var(--ink); font: inherit;
}
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--email); outline-offset: 2px; }
button, .button {
  padding: .65rem 1.05rem; border-radius: var(--r-s); border: 1px solid var(--trait); background: var(--card);
  color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block;
}
button.primary { background: var(--email); color: var(--brand-ink); border-color: transparent; }
button.danger { color: var(--rouge); border-color: var(--rouge); }

.flash { padding: .8rem 1rem; border-radius: var(--r-s); margin: .6rem 0; }
.flash.ok { background: var(--vert-bg); color: var(--vert); }
.flash.error { background: var(--rouge-bg); color: var(--rouge); }
.flash.warn { background: var(--ambre-bg); color: var(--ambre); }
.flash a { color: inherit; font-weight: 600; }
.badge { display: inline-block; padding: .08rem .55rem; border-radius: 99px; font-size: .78rem; font-weight: 600; vertical-align: 1px; }
.badge.ok, .badge.deja_actif { background: var(--vert-bg); color: var(--vert); }
.badge.echec { background: var(--rouge-bg); color: var(--rouge); }
.err { color: var(--rouge); }

/* Véhicules */
.fleet { display: grid; gap: .8rem; }
.vehicle { background: var(--card); border: 1px solid var(--trait); border-radius: var(--r); padding: 1rem 1.1rem; }
.vehicle.on { border-color: color-mix(in srgb, var(--vert) 45%, var(--trait)); }
.head { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem .9rem; align-items: center; }
.plate { justify-self: start; }
.plate {
  display: inline-flex; align-items: stretch; font: 700 1.05rem/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .1em; background: #fff; color: #111; border: 2px solid #111; border-radius: 7px; overflow: hidden;
  padding: 0 .6rem 0 0;
}
.plate .eu { display: grid; place-items: end center; width: 1.05rem; margin-right: .5rem; padding-bottom: .12rem;
  background: #1D4FA8; color: #fff; font: 700 .55rem/1 "Instrument Sans", sans-serif; letter-spacing: 0; }
.plate { padding-top: 0; }
.plate .eu ~ * { padding: .45rem 0; }
.vehicle.off .plate { filter: grayscale(1); opacity: .7; }
.who { display: grid; min-width: 0; }
.who strong { font-size: 1.05rem; }
.state { color: var(--gris); font-size: .88rem; }
.switch { width: 3.1rem; height: 1.85rem; padding: 0; border-radius: 99px; background: var(--trait); border: 0; position: relative; transition: background .18s; }
.switch span { position: absolute; top: 3px; left: 3px; width: calc(1.85rem - 6px); height: calc(1.85rem - 6px); border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px #0005; transition: transform .18s; }
.switch[aria-checked=true] { background: var(--vert); }
.switch[aria-checked=true] span { transform: translateX(1.25rem); }

/* Bande horaire — 11 cases, 9 h → 20 h */
.band { list-style: none; margin: .9rem 0 .3rem; padding: 0; display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; }
.band li { height: 26px; border-radius: 5px; background: var(--bg); border: 1px dashed var(--trait); display: grid; place-items: center; }
.band li span { font-size: .66rem; font-weight: 600; color: var(--gris); }
.band li.on { background: var(--vert); border: 0; animation: punch .35s both; }
.band li.on span { color: #fff; }
.band li.part { background: linear-gradient(90deg, var(--vert) 50%, transparent 50%); border-color: var(--vert); }
.band li.past:not(.on):not(.part) { opacity: .45; }
.band li:nth-child(2).on { animation-delay: .03s } .band li:nth-child(3).on { animation-delay: .06s }
.band li:nth-child(4).on { animation-delay: .09s } .band li:nth-child(5).on { animation-delay: .12s }
.band li:nth-child(6).on { animation-delay: .15s } .band li:nth-child(7).on { animation-delay: .18s }
.band li:nth-child(8).on { animation-delay: .21s } .band li:nth-child(9).on { animation-delay: .24s }
.band li:nth-child(10).on { animation-delay: .27s } .band li:nth-child(11).on { animation-delay: .3s }
@keyframes punch { from { transform: scale(.6); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .band li.on { animation: none } .switch, .switch span { transition: none } }
.band-note { margin: 0; font-size: .88rem; color: var(--gris); }
.vehicle details { margin-top: .6rem; }
summary { cursor: pointer; color: var(--email); font-size: .9rem; font-weight: 600; width: fit-content; }
.vehicle details[open] { display: grid; gap: .9rem; }
.vehicle details form { padding-top: .8rem; border-top: 1px dashed var(--trait); justify-items: start; }

/* Outils */
.tools { display: grid; gap: .9rem; }
.sync { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.add { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; }
.empty { color: var(--gris); text-align: center; padding: 1rem 0; margin: 0; }

/* Réglages */
.rate { display: flex; align-items: center; gap: .75rem; padding: .7rem .85rem; border: 1px solid var(--trait); border-radius: var(--r-s); font-weight: 400; }
.rate.handi { border-color: var(--vert); }
.rate span:nth-of-type(1) { display: grid; flex: 1; }

/* Tableau */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--trait); white-space: nowrap; }
td:last-child { white-space: normal; min-width: 14rem; }
th { color: var(--gris); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 560px) {
  .top { padding-top: .8rem; }
  nav { width: 100%; justify-content: space-between; }
  .head { grid-template-columns: 1fr auto; }
  .plate { justify-self: start; }
  .head form { grid-column: 2; grid-row: 1; justify-self: end; }
  .who { grid-column: 1 / -1; }
  .add { grid-template-columns: 1fr; }
  .band li { height: 30px; }
}