/* ============================================================
   HP84 Atelier — styles
   Tout le « look » est piloté par les variables ci-dessous :
   pour changer le visuel, on modifie surtout ce bloc.
   ============================================================ */
:root {
  --accent: #e8590c;          /* orange HP84 (à ajuster) */
  --accent-fonce: #b8460a;
  --accent-clair: #fff1e8;
  --fond: #f4f3f0;
  --carte: #ffffff;
  --texte: #1c1b19;
  --texte-2: #5f5d58;
  --texte-3: #8f8c85;
  --bord: #e3e1db;
  --bord-fort: #cfccc4;
  --ok: #2f7d32;   --ok-fond: #e8f5e9;
  --att: #a15c00;  --att-fond: #fff4dc;
  --non: #b3261e;  --non-fond: #fdecea;
  --info: #1f5fa8; --info-fond: #e7f0fb;
  --rayon: 10px;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--police); background: var(--fond); color: var(--texte); font-size: 15px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
a { color: var(--accent-fonce); }
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 20px; } h2 { font-size: 17px; } h3 { font-size: 15px; }
img { max-width: 100%; display: block; }

/* --- Barre du haut --- */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--texte); color: #fff; }
.topbar .logo { font-weight: 700; letter-spacing: .5px; }
.topbar .logo b { color: var(--accent); }
.topbar .spacer { flex: 1; }
.topbar a, .topbar button.lien { color: #fff; opacity: .85; text-decoration: none; font-size: 14px; background: none; border: 0; cursor: pointer; padding: 6px 4px; }
.topbar a:hover { opacity: 1; }

.page { max-width: 1320px; margin: 0 auto; padding: 16px; }

/* --- Cartes & blocs --- */
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; }
.carte + .carte { margin-top: 12px; }
.carte h2 { margin-bottom: 10px; }
.titre-bloc { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.muted { color: var(--texte-2); }
.petit { font-size: 13px; }
.mini { font-size: 12px; color: var(--texte-3); }
.grille { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ligne-flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pile > * + * { margin-top: 12px; }

/* --- Boutons --- */
button, .btn { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--bord-fort); background: var(--carte); color: var(--texte); padding: 8px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; min-height: 40px; }
button:hover, .btn:hover { border-color: var(--texte-3); }
button:disabled { opacity: .5; cursor: default; }
.btn-p { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-p:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
.btn-non { color: var(--non); }
.btn-g { min-height: 52px; font-size: 16px; width: 100%; }
.btn-s { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.btn-icone { min-height: 32px; width: 32px; padding: 0; border-color: transparent; background: transparent; color: var(--texte-3); }
.btn-icone:hover { color: var(--non); }

/* --- Formulaires --- */
label { display: block; font-size: 13px; color: var(--texte-2); margin-bottom: 4px; }
input, select, textarea { font: inherit; width: 100%; border: 1px solid var(--bord-fort); border-radius: 8px; padding: 8px 10px; background: #fff; color: var(--texte); min-height: 40px; }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.champs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.champs .large { grid-column: 1 / -1; }
.erreur { color: var(--non); font-size: 13px; margin-top: 6px; }

/* --- Pastilles de statut --- */
.pastille { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.st-reception { background: var(--info-fond); color: var(--info); }
.st-en_cours { background: var(--accent-clair); color: var(--accent-fonce); }
.st-attente_client { background: var(--att-fond); color: var(--att); }
.st-prete { background: var(--ok-fond); color: var(--ok); }
.st-rendue { background: #eeede9; color: var(--texte-2); }
.l-inclus { background: #eeede9; color: var(--texte-2); }
.l-a_chiffrer { background: var(--non-fond); color: var(--non); }
.l-propose { background: var(--att-fond); color: var(--att); }
.l-accepte { background: var(--ok-fond); color: var(--ok); }
.l-refuse { background: var(--non-fond); color: var(--non); text-decoration: line-through; }

/* --- Liste des fiches --- */
.fiche-carte { display: flex; gap: 12px; align-items: center; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px; cursor: pointer; text-decoration: none; color: inherit; }
.fiche-carte:hover { border-color: var(--bord-fort); }
.fiche-carte.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.fiche-carte .vign { width: 64px; height: 64px; border-radius: 8px; background: var(--fond) center/cover; flex: none; display: flex; align-items: center; justify-content: center; color: var(--texte-3); font-size: 22px; }
.fiche-carte .infos { flex: 1; min-width: 0; }
.fiche-carte .immat { font-weight: 700; font-family: ui-monospace, monospace; }
.fiche-carte .modele { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alerte { background: var(--non); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.alerte.att { background: var(--att); }
.alerte.ok { background: var(--ok); }

/* --- Photos --- */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.photo { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--fond); cursor: zoom-in; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .suppr { position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; border: 0; font-size: 14px; }
.photo .leg { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); padding: 10px 5px 3px; }
.ajout-photo { aspect-ratio: 1; border: 2px dashed var(--bord-fort); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--texte-2); font-size: 12px; cursor: pointer; text-align: center; gap: 2px; padding: 4px; }
.ajout-photo span { font-size: 24px; line-height: 1; }
.ajout-photo input { display: none; }
.gros-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed var(--bord-fort); border-radius: var(--rayon); padding: 18px 8px; cursor: pointer; text-align: center; background: var(--carte); }
.gros-photo span { font-size: 30px; }
.gros-photo input { display: none; }

/* Visionneuse */
dialog.zoom { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 92vh; }
dialog.zoom::backdrop { background: rgba(0,0,0,.85); }
dialog.zoom img { max-width: 96vw; max-height: 88vh; border-radius: 6px; }
dialog.zoom .fermer { position: fixed; top: 12px; right: 12px; background: #fff; border-radius: 50%; width: 40px; height: 40px; padding: 0; }

dialog.boite { border: 0; border-radius: 14px; padding: 18px; width: min(460px, 94vw); }
dialog.boite::backdrop { background: rgba(0,0,0,.4); }

/* --- Tableau des lignes (bureau) --- */
.lignes { width: 100%; border-collapse: collapse; font-size: 14px; }
.lignes th { text-align: left; font-size: 12px; font-weight: 600; color: var(--texte-2); padding: 6px 6px; border-bottom: 1px solid var(--bord); }
.lignes td { padding: 6px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.lignes td.num, .lignes th.num { text-align: right; white-space: nowrap; }
.lignes input, .lignes select { min-height: 32px; padding: 4px 6px; font-size: 14px; }
.lignes .w-qte { width: 58px; } .lignes .w-pu { width: 76px; } .lignes .w-rem { width: 48px; }
.lignes td:first-child { min-width: 200px; width: 100%; }
.lignes tr.a_chiffrer td { background: var(--non-fond); }
.lignes tr.propose td { background: #fffaf0; }
.lignes tr.refuse td { color: var(--texte-3); }
.lignes .ref { font-size: 11px; color: var(--texte-3); font-family: ui-monospace, monospace; }
.totaux { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-top: 10px; }
.totaux .gros { font-size: 20px; font-weight: 700; }

/* --- Panneau d'ajout --- */
.puce { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 4px 12px; font-size: 13px; border-radius: 999px; }
.puce.mo { border-color: var(--accent); color: var(--accent-fonce); }
.forfait { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 8px; }
.forfait + .forfait { margin-top: 6px; }
.resultats { max-height: 320px; overflow-y: auto; border: 1px solid var(--bord); border-radius: 8px; margin-top: 6px; }
.resultat { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--bord); cursor: pointer; }
.resultat:last-child { border-bottom: 0; }
.resultat:hover { background: var(--fond); }
.resultat .lib { flex: 1; min-width: 0; }
.etoile { border: 0; background: none; min-height: 0; padding: 2px; font-size: 18px; color: var(--bord-fort); }
.etoile.on { color: #e0a100; }
.mode-ajout { display: flex; border: 1px solid var(--bord-fort); border-radius: 8px; overflow: hidden; }
.mode-ajout button { border: 0; border-radius: 0; min-height: 34px; font-size: 13px; }
.mode-ajout button.on { background: var(--texte); color: #fff; }

/* --- Mise en page bureau --- */
.bureau { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.bureau .liste { position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.onglets { display: flex; gap: 4px; flex-wrap: wrap; }
.onglets button { min-height: 30px; padding: 3px 10px; font-size: 13px; border-radius: 999px; }
.onglets button.on { background: var(--texte); color: #fff; border-color: var(--texte); }
.detail-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.detail-cols > .cote { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; align-items: start; }
.detail-cols > .cote > .carte + .carte { margin-top: 0; }
@media (max-width: 820px) {
  .bureau { grid-template-columns: 1fr; }
  .bureau .liste { position: static; max-height: none; }
  .bureau.voir-detail .liste { display: none; }
  .bureau:not(.voir-detail) .detail { display: none; }
  .lignes .cache-mobile { display: none; }
}
.historique { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.historique li { padding: 4px 0 4px 14px; border-left: 2px solid var(--bord); position: relative; }
.historique li::before { content: ""; position: absolute; left: -5px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--bord-fort); }
.historique li.interne { color: var(--texte-3); font-style: italic; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--texte); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 100; max-width: 90vw; }
.vide { text-align: center; color: var(--texte-3); padding: 30px 10px; }

/* --- Page client --- */
.client { max-width: 620px; margin: 0 auto; padding: 0 0 40px; }
.client .entete { background: var(--texte); color: #fff; padding: 22px 18px 18px; }
.client .entete .garage { font-size: 13px; opacity: .75; letter-spacing: .5px; text-transform: uppercase; }
.client .entete h1 { font-size: 24px; margin-top: 4px; }
.client .entete .immat { display: inline-block; margin-top: 6px; font-family: ui-monospace, monospace; background: #fff; color: #b3261e; border: 2px solid #b3261e; border-radius: 4px; padding: 0 8px; font-weight: 700; }
.client .corps { padding: 14px; }
.etapes { display: flex; gap: 4px; margin: 4px 0 6px; }
.etapes div { flex: 1; height: 6px; border-radius: 3px; background: var(--bord); }
.etapes div.on { background: var(--accent); }
.etapes-noms { display: flex; justify-content: space-between; font-size: 12px; color: var(--texte-2); }
.valider { border: 2px solid var(--att); background: var(--att-fond); }
.valider .travail { background: #fff; border-radius: 8px; padding: 12px; }
.valider .travail + .travail { margin-top: 10px; }
.valider .prix { font-size: 20px; font-weight: 700; }
.liste-travaux { list-style: none; margin: 0; padding: 0; }
.liste-travaux li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.liste-travaux li:last-child { border-bottom: 0; }
.total-client { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; font-weight: 700; padding-top: 10px; border-top: 2px solid var(--texte); margin-top: 6px; }
.decide { font-size: 12px; font-weight: 600; }

/* --- Connexion --- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login .carte { width: min(360px, 100%); text-align: center; padding: 28px 22px; }
.login input { font-size: 28px; text-align: center; letter-spacing: 10px; margin: 16px 0 10px; }