:root{
  --bg:#171a1d;
  --panel:#24282c;
  --panel-2:#2d3237;
  --steel:#c7cdd2;
  --line:#454c52;
  --text:#f1f3f4;
  --muted:#9ca5ad;
  --accent:#f28c18;
  --accent-2:#ffb13b;
  --danger:#df4b3f;
  --success:#4fa86b;
  --warning:#e0a12f;
  --shadow:0 12px 28px rgba(0,0,0,.28);
  color-scheme:dark;
}

html{background:#111315}
body{
  color:var(--text);
  background-color:#181b1e;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    radial-gradient(circle at 20% 0%,rgba(242,140,24,.07),transparent 30%);
  background-size:32px 32px,32px 32px,100% 100%;
}

a{color:#ffad3c;font-weight:700;text-underline-offset:3px}
a:hover{color:#ffc56d}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:#101214;
  color:#fff;
  border-bottom:1px solid #343a40;
  box-shadow:0 5px 18px rgba(0,0,0,.35);
  padding-top:.68rem;
  padding-bottom:.68rem;
}
.topbar::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--accent) 0 18%,#4b5157 18% 100%);
}
.brand{color:#fff;gap:.75rem;align-items:center}
.brand:hover{color:#fff}
.brand-mark{
  width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid #60676d;
  border-radius:4px;
  background:linear-gradient(145deg,#343a3f,#1c2023);
  color:var(--accent);
  box-shadow:inset 0 0 0 1px #171a1c,0 3px 8px rgba(0,0,0,.35);
  font-size:1.25rem;
}
.brand b{
  font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;
  font-size:1.13rem;
  letter-spacing:.12em;
  font-weight:900;
}
.brand small{
  color:#8f989f;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700;
  letter-spacing:.08em;
}
.topbar nav{gap:.42rem}
.topbar nav a,.topbar button{
  color:#dfe3e6;
  background:#23272b;
  border:1px solid #444b51;
  border-radius:3px;
  padding:.54rem .72rem;
  font-weight:700;
  box-shadow:none;
}
.topbar nav a:hover,.topbar button:hover{
  background:#31373c;
  border-color:#707980;
  color:#fff;
  transform:none;
}
.topbar .primary{
  background:var(--accent);
  color:#161819;
  border-color:#ffae3e;
  font-weight:900;
}
.topbar .primary:hover{background:#ffad3c;color:#101214}

.container{max-width:1280px;padding-top:1.6rem}
.page-head{
  position:relative;
  margin-top:1rem;
  padding:1.15rem 1.25rem 1.1rem 1.4rem;
  background:linear-gradient(180deg,#282d31,#22262a);
  border:1px solid #444b51;
  border-left:5px solid var(--accent);
  border-radius:3px;
  box-shadow:var(--shadow);
}
.page-head::after{
  content:"ATELIER / SUIVI TECHNIQUE";
  position:absolute;
  right:1.1rem;
  top:1rem;
  color:#7f8990;
  background:#191c1f;
  border:1px solid #3a4146;
  border-radius:2px;
  padding:.3rem .5rem;
  font:700 .72rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em;
}
.page-head h1,h1,h2{
  color:#f4f5f6;
  font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.055em;
}
.page-head h1{font-size:clamp(1.75rem,4vw,2.65rem);font-weight:900}
.page-head h1::after{
  width:68px;height:3px;
  background:var(--accent);
  border:0;
  border-radius:0;
  transform:none;
}
h2{font-size:1.42rem;margin-top:2rem;font-weight:900}
.muted{color:var(--muted)}

.card{
  position:relative;
  background:linear-gradient(180deg,#282d31,#22262a);
  border:1px solid #454c52;
  border-radius:4px;
  color:var(--text);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;height:auto;
  background:var(--accent);
  border:0;
  transform:none;
}
.card::after{
  content:"";
  position:absolute;
  width:5px;height:5px;
  right:8px;top:8px;
  border-radius:50%;
  background:#656d73;
  box-shadow:0 calc(100% + 0px) 0 transparent;
}
.cards{gap:1rem}
.cards .card:nth-child(n){transform:none}
.metric span{color:#99a2a9;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem}
.metric strong{
  color:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:2.05rem;
  font-weight:800;
}

.vehicle-grid{gap:1rem}
.vehicle-card{color:var(--text);transform:none!important;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.vehicle-card:hover{
  transform:none!important;
  border-color:#717980;
  background:linear-gradient(180deg,#30363b,#282d31);
  box-shadow:0 14px 30px rgba(0,0,0,.36);
  color:#fff;
}
.vehicle-card b,.vehicle-title strong{color:#fff}
.vehicle-title strong{
  font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;
  font-size:1.12rem;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.vehicle-title small,.vehicle-meta small{color:#8f999f}
.brand-logo-shell{
  border:1px solid #5b6369;
  border-radius:3px;
  background:#e9ecee;
  box-shadow:inset 0 0 0 2px #c8cdd1;
}
.brand-monogram{background:#1a1d20;color:var(--accent);font-family:ui-monospace,monospace}
.badge{
  border:1px solid #50585e;
  background:#191c1f;
  color:#c8ced2;
  border-radius:2px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700;
  letter-spacing:.035em;
}
.badge.active{border-color:#3e8354;color:#90d3a3;background:#183020}

.btn{
  background:var(--accent);
  color:#151719;
  border:1px solid #ffad3b;
  border-radius:3px;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
  font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.btn:hover{
  background:#ffac38;
  color:#111315;
  transform:none;
  box-shadow:0 5px 12px rgba(0,0,0,.3);
}

.message{
  background:#1e3928;
  border:1px solid #43875a;
  border-left:4px solid #59b875;
  color:#b8e7c5;
  border-radius:3px;
  box-shadow:none;
  font-weight:700;
}
.form-card{background:#23282c}
.field label,.fuel-row label,.filter label{color:#cbd0d4;font-weight:700}
.form-control,.form-select,.filter select,input,select,textarea{
  border:1px solid #515960;
  border-radius:3px;
  background:#16191b;
  color:#f1f3f4;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4);
}
.form-control:focus,.form-select:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(242,140,24,.2);
  outline:none;
}
option{background:#1b1e21;color:#f1f3f4}
.energy-box{border-top:1px solid #4a5157}
.fuel-row{
  background:#1d2124;
  border:1px solid #444c52;
  border-radius:3px;
}

.table-wrap{
  background:#22272b;
  border:1px solid #454c52;
  border-radius:3px;
  box-shadow:var(--shadow);
}
th,td{border-bottom:1px solid #3a4146;color:#e8ebed}
th{
  background:#181b1e;
  color:#f3a23f;
  border-bottom:2px solid #5b6268;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.77rem;
  letter-spacing:.075em;
  text-transform:uppercase;
}
tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
tbody tr:hover{background:#2d3338}
td small{color:#8f999f}

.service-card small{color:#8d979e}
.status-pill{
  border:1px solid #42845a;
  background:#1b3424;
  color:#96d8aa;
  border-radius:2px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:800;
}
.status-pill.warning{background:#3a2d16;border-color:#9b7024;color:#f0bd62}
.status-pill.danger{background:#3b201d;border-color:#9d4b43;color:#ef9a92}
.year-filter{
  background:#1e2225;
  border:1px solid #454d53;
  border-radius:3px;
  box-shadow:none;
}
.year-filter label{color:#c7ccd0}

.stats-section{
  background:#22272b;
  border:1px solid #454c52;
  box-shadow:var(--shadow);
  border-radius:3px;
}
.stats-section>summary{
  color:#f1f3f4;
  font-family:"Arial Narrow","Roboto Condensed",Arial,sans-serif;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.stats-section[open]>summary{border-bottom:1px solid #4a5258;background:#1a1e21}
.stats-section>summary::after{color:var(--accent)}
.subcard{
  border:1px solid #444c52;
  background:#1c2023;
  border-radius:3px;
}
.legend-row,.tire-line{border-bottom:1px solid #3d4449}
.pie{border-color:#707980;box-shadow:none}
.empty-state{color:#8f999f}

.narrow{background:#23282c;transform:none;position:relative}
.narrow::after{
  content:"POSTE DE TRAVAIL";
  position:absolute;
  right:12px;
  top:12px;
  padding:.25rem .42rem;
  background:#171a1d;
  color:#8e989f;
  border:1px solid #444b50;
  border-radius:2px;
  font:700 .7rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.06em;
  transform:none;
  box-shadow:none;
}
.site-footer{
  border-top:1px solid #353b40;
  color:#7f888f;
  background:#101214;
  max-width:none;
  padding-left:max(1.15rem,calc((100vw - 1250px)/2));
  padding-right:max(1.15rem,calc((100vw - 1250px)/2));
  margin-top:3rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.045em;
}
.site-footer span:last-child{color:#75bf8b}

@media(max-width:760px){
  .topbar{background:#101214;box-shadow:0 4px 14px rgba(0,0,0,.35)}
  .topbar nav a,.topbar button{background:#23272b;border:1px solid #444b51;box-shadow:none}
  .page-head{padding:.9rem 1rem;margin-top:.8rem}
  .page-head::after{display:none}
  .card,.vehicle-card{transform:none!important;box-shadow:0 7px 18px rgba(0,0,0,.28)}
  .site-footer{padding-left:.75rem;padding-right:.75rem}
}