:root{
  --bg:#0b1020;
  --card:#0f172a;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --line:#1f2937;
  --accent:#1d4ed8;      /* chantier: bleu */
  --accent2:#0ea5e9;     /* cyan */
  --ok:#16a34a;
  --danger:#ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(29,78,216,.35), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(14,165,233,.25), transparent 55%),
    var(--bg);
  color:var(--text);
}

/* Pleine largeur (plus de contrainte 1100px) */
.wrap{max-width:none;margin:0;padding:16px;width:100%}

.app-header{
  position:sticky;top:0;z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(11,16,32,.75);
  border-bottom:1px solid rgba(148,163,184,.12);
}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.app-title{font-size:22px;font-weight:900;letter-spacing:.2px}
.app-subtitle{color:var(--muted);font-size:13px;margin-top:4px}
.header-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Layout: pile verticale (infos -> sélection -> devis) */
main.wrap.grid{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
}

/* Cartes */
.card{
  background: rgba(15,23,42,.88);
  border:1px solid rgba(148,163,184,.14);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding:16px;
  position: relative;
  overflow: hidden;
}

/* En-têtes façon "outil pro" */
.card h2{
  margin:0 0 12px 0;
  font-size:15px;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:10px;
}
.card h2::before{
  content:"";
  width:10px;height:10px;border-radius:3px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 3px rgba(29,78,216,.18);
}

/* Inputs */
label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
input, select, textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.62);
  color: var(--text);
  padding:10px 12px;
  outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(14,165,233,.6);
  box-shadow: 0 0 0 3px rgba(14,165,233,.18);
}
input[disabled]{opacity:.75}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column: 1 / -1}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.adder{display:grid;gap:12px}
.mini-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media (max-width: 520px){
  .mini-grid{grid-template-columns:1fr}
  .row-2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}

/* Boutons */
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{
  border:1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.55);
  color: var(--text);
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:800;
}
.btn:hover{border-color: rgba(14,165,233,.6)}
.btn.primary{
  background: linear-gradient(135deg, rgba(29,78,216,.95), rgba(14,165,233,.9));
  border: none;
  color:#eef2ff;
}
.btn.secondary{background: rgba(14,165,233,.18); border-color: rgba(14,165,233,.35)}
.btn.ghost{background: transparent}
.hint{font-size:12px;color:var(--muted)}

/* Search + favoris */
.work-tools{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items:center;
  width:100%;
}
.work-tools input{min-width:0}
@media (max-width: 520px){
  .work-tools{grid-template-columns:1fr}
  .work-tools button{width:100%}
}

/* Tableau devis */
.table-wrap{margin-top:12px;overflow:auto;border-radius: 14px;border:1px solid rgba(148,163,184,.14)}
table{width:100%;border-collapse: collapse;min-width:680px;background: rgba(2,6,23,.35)}
th,td{padding:10px 10px;border-bottom:1px solid rgba(148,163,184,.12);font-size:13px}
th{color: #cbd5e1; text-align:left; font-weight:900}
.right{text-align:right}
.small{font-size:12px;color:var(--muted)}
.cell-input{width:80px; padding:6px 8px; border-radius:10px}
.percent{width:90px}
.del{border:none;background: rgba(239,68,68,.15);color:#fecaca;border-radius:10px;padding:6px 10px;cursor:pointer;font-weight:900}
.del:hover{background: rgba(239,68,68,.25)}

.totals{
  margin-top:12px;
  border-top:1px dashed rgba(148,163,184,.25);
  padding-top:12px;
  display:grid;
  gap:8px;
}
.tot-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tot-row .label{color:var(--muted);font-size:13px}
.tot-row .value{font-weight:900}
.tot-row.grand .value{font-size:18px}
.value.inline{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.value.inline select{width:auto}

.print-tip{margin-top:10px;color:var(--muted);font-size:12px}
.footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);padding-bottom:28px}

/* Largeurs (outil terrain) */
section.card.card-infos,
section.card.card-select{
  width: 560px;
  max-width: 560px;
  margin: 0 auto;
}
section.card.card-quote{
  width: min(1280px, 96vw);
  max-width: min(1280px, 96vw);
  margin: 0 auto;
}

/* Sticky devis (desktop) */
@media (min-width: 980px){
  section.card.card-quote{
    position: sticky;
    top: 96px; /* sous le header */
    max-height: calc(100vh - 120px);
    overflow: auto;
  }
  /* petite marge pour les ombres quand ça colle */
  section.card.card-quote::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:18px;
    background: linear-gradient(to bottom, rgba(15,23,42,0), rgba(15,23,42,.75));
    pointer-events:none;
  }
}

@media (max-width: 620px){
  section.card.card-infos,
  section.card.card-select,
  section.card.card-quote{
    width: 94vw;
    max-width: 94vw;
  }
  section.card.card-quote{ position: static; max-height: none; overflow: visible; }
}

/* Print */
@media print{
  body{background:#fff;color:#000}
  .app-header,.footer,.btn,.print-tip,.header-actions{display:none !important}
  .card{box-shadow:none;border:1px solid #ddd;background:#fff}
  .wrap{max-width:none}
  table{min-width:0;background:#fff}
  section.card.card-quote{position: static; max-height:none; overflow:visible;}
}


/* v62: input with trailing button (geoloc) */
.input-with-btn{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.input-with-btn .btn-ghost{
  min-height: 44px;
  width: 52px;
  display:flex;
  align-items:center;
  justify-content:center;
}