*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: linear-gradient(120deg, var(--accent2), var(--accent));
  color: var(--text);
}
a{color:var(--text); text-decoration:none}
a:hover{opacity:.9}

.topbar{
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  position:sticky; top:0;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(8px);
  z-index:100;
}

.brand{display:flex; align-items:center; gap:10px}
.logo{height:34px; width:auto}
.brand-title{font-weight:700; letter-spacing:.2px}
.nav{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end}

.nav-dd{ position: relative; display: inline-block; }
.nav-dd__menu{
  display: none;
  position: absolute;
  right: 0;               /* aligne à droite dans ton header */
  top: calc(100% + 8px);
  min-width: 180px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  z-index: 200;
}

.nav-dd__menu a{
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
}

.nav-dd__menu a:hover{
  background: rgba(255,255,255,.06);
}

/* Affichage au survol (desktop) */
.nav-dd:hover .nav-dd__menu{ display: block; }

/* Bonus: laisse un “pont” pour éviter que ça se referme quand tu descends */
.nav-dd__menu::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -10px;
  height: 10px;
}


.container{max-width:1100px; margin:0 auto; padding:14px}

/* .grid{ */
  /* display:grid; */
  /* grid-template-columns:1fr; */
  /* gap:12px; */
/* } */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}

.legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  margin-top:10px;
}
.legend-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(7,16,31,.35);
  font-size:13px;
}
.legend-dot{
  width:10px; height:10px; border-radius:999px;
  display:inline-block;
  flex:0 0 auto;
}
.legend-label{color:var(--text)}
.legend-val{color:var(--muted)}
.legend-pct{color:var(--muted)}

/* Même hauteur pour les zones de graph */
.chart-wrap-tall,
.canvas-wrap{
  height: 360px;          /* ajuste (320/360/420) selon ton goût */
}

.chart-wrap { height: 340px; }

/* Important pour Chart.js */
.chart-wrap-tall canvas{
  width: 100% !important;
  height: 100% !important;
}

/* Pour que le SVG du donut remplisse bien la zone */
.canvas-wrap svg{
  width: 100%;
  height: 100%;
  display: block;
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.card h2{
		all: revert;      /* reset */
		margin:0 0 0 0; 
		font-size:16px
		
	}
.muted{color:var(--muted); font-size:14px}

.table{
  all: revert; 
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:12px;
  margin-top:0px;
}
.table th,.table td{
  padding:10px 8px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top;
}
.table th{color:var(--muted); font-weight:600; font-size:13px}

.table td:nth-child(1), /* Date */
.table td:nth-child(2), /* Km */
.table td:nth-child(3)  /* Coût */
{
  white-space: nowrap;
}

.table td:nth-child(4){
  max-width: 260px;
}

.cell-link{
display:block;
color: inherit;
text-decoration:none;
}
.cell-link:hover{ text-decoration:underline; }

td.best{
	background: rgba(46, 204, 113, .12);
	border-color: rgba(46, 204, 113, .25);
	font-weight: 600;
}
 
 td.worst{
  background: rgba(255, 77, 77, .12);
  border-color: rgba(255, 77, 77, .25);
  font-weight: 600;
}

.title-car {
	margin-bottom: 20px;
}

.title-car .title{
  display: block;
  margin: 0;
  line-height: 1.2;
  font-weight: bold;
}

.title-car .immat{
  display: block;
  margin-top: 0;          /* supprime le “petit décalage” */
  line-height: 1.2;
}

.kv-2cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.kv-2cols .kv-grid{
  grid-template-columns: 1fr; /* donc chaque .kv-grid = un bloc */
}

.table-kv{
	
  margin-top: 0px;
}

.table-kv th{
  width: 42%;
  white-space: nowrap;
}

.table-kv td{
  text-align: right;
}

.table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table{
  min-width: 720px; /* force une largeur mini pour garder les colonnes lisibles */
}


.badge{
  display:inline-block;
  padding:2px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
}

.badge-active{
  color: rgba(46,204,113,1);
  border-color: rgba(46,204,113,.35);
  background: rgba(46,204,113,.10);
}

.badge-candidat{
  color: rgba(255,165,0,1);
  border-color: rgba(255,165,0,.35);
  background: rgba(255,165,0,.10);
}

.badge-sold{
  color: rgba(255,77,77,1);
  border-color: rgba(255,77,77,.35);
  background: rgba(255,77,77,.10);
}

.status-ring{
  display:inline-block;           /* important pour width/height sur un span */ /* [web:22] */
  width:14px;
  height:14px;
  border-radius:50%;              /* cercle */ /* [web:18] */
  background:transparent;         /* pas plein */ /* [web:22] */
  border:2px solid currentColor;  /* anneau */
  vertical-align:middle;
}

.status-ring--green{ color:#28a745; }
.status-ring--red{ color:#dc3545; }


.status-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  vertical-align:middle;
}
.status-dot--green{ background:#28a745; } /* vert */
.status-dot--red{ background:#dc3545; }   /* rouge */

.btn{
  display:inline-block;
  padding:7px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  /* background: linear-gradient(120deg, var(--accent2), var(--accent)); */
  background: var(--accent2);
  color:#fff;
  cursor:pointer;
  font-size:14px;
  text-decoration:none;
}

.btn.secondary{
  /* background: #fff; */
  color: var(--text);
}

.btn.danger{
    background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 30%, transparent),
                                      color-mix(in srgb, var(--danger) 14%, transparent));
}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn:hover{opacity:.85}

form .row{
  display:grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap:12px 16px;
  align-items:start;
}

form .row .span-all{ grid-column: 1 / -1; }

label{display:block; font-size:13px; color:var(--muted); margin-bottom:4px;}
input, textarea, select{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color:var(--text);
  font-size:14px;
}
input[type="checkbox"]{width:auto}
textarea{min-height:90px; font-family:inherit}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.alert{padding:10px 12px; border-radius:12px; border:1px solid var(--border); margin-bottom:10px}
.alert.ok{border-color:rgba(46,204,113,.35); background:rgba(46,204,113,.1)}
.alert.err{border-color:rgba(255,77,77,.35); background:rgba(255,77,77,.1)}

.footer{padding:18px 14px; color:var(--muted); text-align:center}
.canvas-wrap{width:100%; max-width:520px; margin:0 auto}

/* Hover ligne tableau */
.table-hover tbody tr:hover{
  background: rgba(255,255,255,.06);
}

/* Immat sous le modèle */
.immat{
  margin-top: 2px;
  font-size: 12px;
}

/* .kv-grid{ */
  /* display:grid; */
  /* grid-template-columns: 1fr; */
  /* gap:10px; */
  /* margin-top:10px; */
/* } */

/* @media (min-width: 700px){ */
  /* .kv-grid{ grid-template-columns: 1fr 1fr 1fr; } */
/* } */

/* .kv{ */
  /* border:1px solid var(--border); */
  /* border-radius:12px; */
  /* padding:10px 12px; */
  /* background:var(--accent); */
/* } */

/* .kv-label{ */
  /* color:var(--muted); */
  /* font-weight: normal; */
  /* font-size:12px; */
  /* margin-bottom:4px; */
/* } */

/* .kv-value{ */
  /* color:var(--text); */
  /* font-size:14px; */
  /* line-height:1.2; */
/* } */

/* .kv-strong{ */
  /* font-weight:700; */
/* } */

.row-click{ cursor:pointer; }
.table tbody tr.row-click:hover{ background: rgba(255,255,255,.06); }

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
}
.icon-btn .icon{ width:18px; height:18px; fill: var(--text); opacity:.9; }

.icon-btn.danger{
  background: rgba(255,77,77,.12);
  border-color: rgba(255,77,77,.35);
}
.icon-btn.danger .icon{ fill: rgba(255,77,77,1); }

.icon-btn.pdf{
  background: rgba(27,119,255,.12);
  border-color: rgba(27,119,255,.35);
}
.icon-btn.pdf .icon{ fill: rgba(27,119,255,1); }

.modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.55);
    z-index:9999;
    padding: 16px;
}
.modal-overlay.is-open{ display:block; }

.modal-card{
max-width: 960px;
margin: 5vh auto;
max-height: 90vh;
overflow: auto;
}

.modal-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom: 10px;
}

.modal-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom: 10px;
}

.modal-body{
border: 1px solid rgba(0,0,0,.08);
border-radius: 10px;
padding: 10px;
}

#ocrModal{ background: var(--bg); }

.ocr-line{
display:flex;
gap:10px;
align-items:flex-start;
padding: 8px 6px;
border-bottom: 1px dashed rgba(0,0,0,.10);
}
.ocr-line:last-child{ border-bottom:0; }


.ocr-info-table{
  display:grid;
  grid-template-columns: 14px 170px 1fr 1fr; /* checkbox | libellé | valeur form | valeur OCR */
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden; /* pour arrondis propres */
  background:var(--bg) ;
  padding: 5px;
  /* margin-top:8px; */
}

/* cellules (en-tête + corps) */
.ocr-info-head,
.ocr-info-row > span,
.ocr-info-row > input{
  padding:2px 0 2px 10px;
  /* border-bottom:1px solid #e7e7e7; */
  /* border-right:1px solid #e7e7e7; */
  font-size:14px;
}

/* dernière colonne: pas de bordure droite */
.ocr-info-head:nth-child(4),
.ocr-info-row > span:nth-child(4){
  border-right:0;
}

/* entête */
.ocr-info-head{
  font-weight:700;
  color:var(--th);
  background:var(--bg);
  border-bottom: 1px solid var(--th); 
  font-size:13px;
}


.ocr-card{
  /* font-weight:700; */
  color:var(--text);
  background:var(--bg);
  font-size:13px;
}

/* lignes */
.ocr-info-row{
  display:contents; /* chaque label remplit les 4 colonnes */
  cursor:pointer;
}

/* checkbox centrée verticalement */
.ocr-info-row > input{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
}

.ocr-info-row:hover{ background: var(--bg-hover); }

/* alternance (zebra) : on colore les spans, pas l'input (display:contents) */
.ocr-info-row:nth-of-type(even) > span,
.ocr-info-row:nth-of-type(even) > input{
  background:var(--bg);
}

/* dernière ligne: pas de bordure basse */
.ocr-info-row:last-of-type > span,
.ocr-info-row:last-of-type > input{
  border-bottom:0;
}

.ocr-text{color:var(--text);}
.ocr-text.rouge { color: var(--danger); font-weight: 600; }

.bold{font-weight:700;}

.ocr-info-row

.ocr-current{ color:var(--text); }
.ocr-ocrval{ color:var(--text); font-weight:700; }

.rouge{color : #DB2757}

.grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.span-2{
  grid-column: 1 / -1;
}

@media (max-width: 520px){
  
	
	form .row{
		grid-template-columns: 1fr;
	  }
		
	.grid{
		grid-template-columns: 1fr;
	}

	.span-2{ min-width: 0; }  


  /* Table KV compacte: 2 colonnes sur une ligne */
  table.table-kv tr{
    display:grid !important;
    grid-template-columns: 1fr auto; /* libellé | valeur */
    gap: 8px;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }

  table.table-kv th,
  table.table-kv td{
    display:block !important;
    width:auto !important;
    padding: 2px 0 !important;
  }

  table.table-kv th{
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    white-space: normal;
    text-align: left;
  }

  table.table-kv td{
    text-align: right !important;
    white-space: nowrap; /* évite retour à la ligne sur les montants */
  }

  table.table-kv tr:last-child{ border-bottom: 0; }
  
  .kv-2cols{ grid-template-columns: 1fr; }
}