:root{
  --charbon-0:#141414; --charbon-1:#1c1c1c; --charbon-2:#262626; --charbon-3:#333333;
  --ambre:#f2a900; --ambre-dim:#8a6100;
  --rouge:#d64545; --rouge-bg:#3a1e1e;
  --orange:#e08a3c; --orange-bg:#3a2a1a;
  --vert:#3fb950; --vert-bg:#12261a;
  --texte:#eceae5; --texte-dim:#9a9a94;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--charbon-0); color:var(--texte);
  font-family:'Barlow Condensed', Arial Narrow, sans-serif;
  font-size:17px; line-height:1.4;
}
code, .mono{ font-family:'IBM Plex Mono', monospace; }
header.app-header{ background:var(--charbon-1); padding:16px 20px; border-bottom:2px solid var(--ambre); }
header.app-header h1{ margin:0; font-size:28px; letter-spacing:0.5px; text-transform:uppercase; }
header.app-header .sub{ color:var(--texte-dim); font-size:15px; }
main{ max-width:760px; margin:0 auto; padding:16px; }
.env-banner{
  background:var(--rouge); color:#fff; text-align:center; font-weight:700;
  padding:8px 12px; letter-spacing:0.5px; text-transform:uppercase; font-size:14px;
}
.card{ background:var(--charbon-1); border:1px solid var(--charbon-3); border-radius:8px; padding:16px; margin-bottom:16px; }
.card h2{ margin:0 0 12px; font-size:22px; color:var(--ambre); text-transform:uppercase; letter-spacing:0.5px; }
.vehicule-photo{ width:100%; max-height:220px; object-fit:cover; border-radius:6px; margin-bottom:10px; background:var(--charbon-2); }
.item-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--charbon-2); }
.item-row:last-child{ border-bottom:none; }
.item-label{ flex:1; }
select.item-select{
  background:var(--charbon-2); color:var(--texte); border:1px solid var(--charbon-3);
  border-radius:4px; padding:6px 8px; font-family:inherit; font-size:15px;
}
.item-row.etat-ok select.item-select{ border-color:var(--vert); }
.item-row.etat-orange{ background:var(--orange-bg); border-radius:6px; padding-left:8px; padding-right:8px; }
.item-row.etat-orange select.item-select{ border-color:var(--orange); color:var(--orange); }
.item-row.etat-rouge{ background:var(--rouge-bg); border-radius:6px; padding-left:8px; padding-right:8px; }
.item-row.etat-rouge select.item-select{ border-color:var(--rouge); color:var(--rouge); }

.conducteur-display{
  width:100%; text-align:left; background:var(--charbon-2); color:var(--texte);
  border:1px solid var(--charbon-3); border-radius:6px; padding:12px; font-size:17px;
  font-family:inherit; cursor:pointer;
}
.conducteur-panel{
  position:fixed; inset:0; background:rgba(0,0,0,0.7); display:none;
  align-items:flex-end; justify-content:center; z-index:50;
}
.conducteur-panel.open{ display:flex; }
.conducteur-sheet{
  background:var(--charbon-1); width:100%; max-width:760px; max-height:80vh; overflow-y:auto;
  border-radius:12px 12px 0 0; padding:12px;
}
.conducteur-sheet h2{ color:var(--ambre); }
.conducteur-option{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 8px; border-bottom:1px solid var(--charbon-2); cursor:pointer; background:none; border-left:none; border-right:none; border-top:none; width:100%; color:var(--texte); text-align:left; font-family:inherit; font-size:16px;
}
.conducteur-option:hover{ background:var(--charbon-2); }
.badge{ display:inline-block; padding:2px 8px; border-radius:4px; font-size:12px; font-weight:600; white-space:nowrap; }
.badge-valide{ color:var(--vert); background:var(--vert-bg); }
.badge-expire{ color:var(--rouge); background:var(--rouge-bg); }

.photos-grid{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.photo-thumb{ position:relative; width:90px; height:90px; }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:6px; }
.photo-thumb img.pdf-photo{ width:150px; height:auto; margin:4px; }
.photo-thumb button{ position:absolute; top:-6px; right:-6px; background:var(--rouge); color:#fff; border:none; border-radius:50%; width:22px; height:22px; cursor:pointer; }

button.primary{
  background:var(--ambre); color:#1c1500; border:none; border-radius:6px;
  padding:14px 20px; font-size:18px; font-weight:700; font-family:inherit; cursor:pointer;
  width:100%; text-transform:uppercase; letter-spacing:0.5px;
}
button.primary:disabled{ opacity:0.5; cursor:not-allowed; }
button.secondary{
  background:transparent; color:var(--ambre); border:1px solid var(--ambre); border-radius:6px;
  padding:8px 14px; font-family:inherit; cursor:pointer;
}
.error-box{ background:var(--rouge-bg); border:1px solid var(--rouge); border-radius:6px; padding:14px; }
.warning-box{ background:var(--orange-bg); border:1px solid var(--orange); border-radius:6px; padding:12px; margin-bottom:12px; font-size:15px; }
.queue-banner{
  position:sticky; top:0; z-index:40; background:var(--orange-bg); border-bottom:2px solid var(--orange);
  color:var(--texte); padding:10px 16px; display:none; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.queue-banner.visible{ display:flex; }
.hidden{ display:none !important; }

.pdf-preview{ background:#fff; color:#111; padding:20px; font-family:Arial,sans-serif; width:700px; }

.section-title{ color:var(--texte-dim); text-transform:uppercase; font-size:15px; margin:14px 0 6px; }
.text-dim{ color:var(--texte-dim); }
.text-dim-small{ color:var(--texte-dim); font-size:13px; }
.mt-10{ margin-top:10px; }