/* Interface pensée pour une tablette tenue à bout de bras : rien en dessous
   de 17 px, aucune cible tactile sous 52 px, un seul geste par écran. */
:root{
  --bordeaux:#8a1538; --bordeaux-fonce:#6d1029; --or:#c9a227;
  --creme:#faf7f5; --bord:#e3d9d3; --texte:#1a1a1a; --gris:#6b6b6b;
  --vert:#1f7a3f; --rouge:#b3261e;
  --ombre:0 2px 8px rgba(0,0,0,.10);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font:17px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--texte); background:var(--creme);
  padding-bottom:env(safe-area-inset-bottom);
}
.chargement{padding:60px;text-align:center;color:var(--gris)}

/* ── En-tête ─────────────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:50;background:var(--bordeaux);color:#fff;
  padding:calc(12px + env(safe-area-inset-top)) 14px 12px;
  display:flex;align-items:center;gap:10px;box-shadow:var(--ombre);
}
header h1{font-size:19px;margin:0;font-weight:700;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header button{
  background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:10px;
  min-width:52px;height:44px;font-size:16px;font-weight:600;padding:0 12px;cursor:pointer;
}
header button:active{background:rgba(255,255,255,.3)}

main{padding:16px;max-width:820px;margin:0 auto}

/* ── Boutons ─────────────────────────────────────────────────────────── */
.geant{
  display:flex;align-items:center;gap:16px;width:100%;
  background:#fff;border:2px solid var(--bord);border-radius:16px;
  padding:20px;margin-bottom:14px;font-size:21px;font-weight:700;color:var(--texte);
  text-align:left;cursor:pointer;box-shadow:var(--ombre);
}
.geant:active{transform:scale(.99);background:var(--creme)}
.geant .emo{font-size:30px;line-height:1}
.geant small{display:block;font-size:15px;font-weight:400;color:var(--gris);margin-top:3px}

button.primaire{
  background:var(--bordeaux);color:#fff;border:0;border-radius:12px;
  min-height:56px;font-size:19px;font-weight:700;padding:0 22px;width:100%;cursor:pointer;
}
button.primaire:active{background:var(--bordeaux-fonce)}
button.primaire[disabled]{background:#c9bdb8;cursor:default}
button.secondaire{
  background:#fff;color:var(--bordeaux);border:2px solid var(--bordeaux);
  border-radius:12px;min-height:52px;font-size:17px;font-weight:600;padding:0 18px;cursor:pointer;
}
button.discret{
  background:transparent;border:0;color:var(--gris);font-size:16px;
  padding:12px;cursor:pointer;text-decoration:underline;
}
.rangee{display:flex;gap:10px;flex-wrap:wrap}
.rangee>*{flex:1;min-width:140px}

/* ── Cartes / listes ─────────────────────────────────────────────────── */
.carte{background:#fff;border:1px solid var(--bord);border-radius:14px;
  padding:16px;margin-bottom:12px;box-shadow:var(--ombre)}
.titre-section{font-size:14px;font-weight:700;color:var(--gris);
  text-transform:uppercase;letter-spacing:.06em;margin:22px 0 10px}

.ligne-liste{
  display:flex;align-items:center;gap:12px;width:100%;background:#fff;
  border:1px solid var(--bord);border-radius:12px;padding:14px;margin-bottom:8px;
  text-align:left;font-size:17px;color:var(--texte);cursor:pointer;min-height:60px;
}
.ligne-liste:active{background:var(--creme)}
.ligne-liste .principal{flex:1;min-width:0}
.ligne-liste .principal b{display:block;font-size:17px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ligne-liste .principal span{display:block;font-size:14px;color:var(--gris);margin-top:2px}
/* La puce reste une pastille : sans cette règle, elle hérite du bloc parent
   et s'étire sur toute la largeur de la ligne. */
.ligne-liste .principal span.puce{display:inline-block;width:auto}
.ligne-liste .montant{font-weight:700;font-size:17px;white-space:nowrap}

.puce{display:inline-block;font-size:12px;font-weight:700;padding:3px 9px;
  border-radius:20px;background:var(--bord);color:#4a4a4a;text-transform:uppercase}
.puce.proforma{background:#e8eef7;color:#1f4b8f}
.puce.devis{background:#fdf3d8;color:#8a6b00}
.puce.facture{background:#e6f2ea;color:var(--vert)}
.puce.annule{background:#fbe4e2;color:var(--rouge)}
.puce.paye{background:var(--vert);color:#fff}

/* ── Formulaires ─────────────────────────────────────────────────────── */
label{display:block;font-size:15px;font-weight:600;color:var(--gris);margin:14px 0 6px}
input,select,textarea{
  width:100%;font-size:18px;font-family:inherit;padding:14px;
  border:2px solid var(--bord);border-radius:12px;background:#fff;color:var(--texte);
  min-height:54px;
}
input:focus,select,textarea:focus{outline:3px solid rgba(138,21,56,.25);border-color:var(--bordeaux)}
textarea{min-height:90px;resize:vertical}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.deux{grid-template-columns:1fr}}

/* ── Catalogue ───────────────────────────────────────────────────────── */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tuile{
  background:#fff;border:2px solid var(--bord);border-radius:14px;padding:14px;
  text-align:left;cursor:pointer;min-height:86px;display:flex;flex-direction:column;
  justify-content:space-between;font-size:16px;font-weight:600;color:var(--texte);
}
.tuile:active{border-color:var(--bordeaux);background:var(--creme)}
.tuile .prix{color:var(--bordeaux);font-weight:700;font-size:16px;margin-top:6px}
/* Prix carte rappelé, barré, quand un tarif négocié s'applique. */
.tuile .prix s{color:var(--gris);font-weight:400;font-size:13px;margin-left:6px}

/* ── Panier ──────────────────────────────────────────────────────────── */
.panier-ligne{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--bord);
  border-radius:12px;padding:12px;margin-bottom:8px;
}
.panier-ligne .lib{flex:1;min-width:0;font-size:16px}
.panier-ligne .lib small{display:block;color:var(--gris);font-size:14px}
.compteur{display:flex;align-items:center;gap:2px}
.compteur button{
  width:46px;height:46px;border:2px solid var(--bord);background:#fff;
  border-radius:10px;font-size:24px;font-weight:700;color:var(--bordeaux);cursor:pointer;
}
.compteur button:active{background:var(--creme)}
.compteur input{width:62px;min-height:46px;text-align:center;padding:6px;font-size:17px;border-radius:10px}
.supprimer{background:none;border:0;font-size:22px;color:var(--rouge);
  width:46px;height:46px;cursor:pointer}
/* Sur téléphone, le libellé passe au-dessus du compteur plutôt que d'être
   comprimé sur trois lignes. */
@media(max-width:520px){
  .panier-ligne{flex-wrap:wrap}
  .panier-ligne .lib{flex:1 1 100%;margin-bottom:8px}
  .panier-ligne .compteur{flex:1}
}

.barre-total{
  position:sticky;bottom:0;background:#fff;border-top:2px solid var(--bord);
  padding:14px 16px calc(14px + env(safe-area-inset-bottom));margin:16px -16px -16px;
  box-shadow:0 -3px 12px rgba(0,0,0,.08);
}
.barre-total .chiffres{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.barre-total .ttc{font-size:26px;font-weight:800;color:var(--bordeaux)}
.barre-total .ht{font-size:15px;color:var(--gris)}

/* ── Connexion ───────────────────────────────────────────────────────── */
.connexion{max-width:340px;margin:0 auto;padding:40px 20px;text-align:center}
.connexion h1{color:var(--bordeaux);font-size:26px;margin-bottom:6px}
.points{display:flex;justify-content:center;gap:14px;margin:28px 0}
.points i{width:18px;height:18px;border-radius:50%;background:var(--bord)}
.points i.plein{background:var(--bordeaux)}
.pave{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pave button{
  height:72px;font-size:28px;font-weight:600;background:#fff;
  border:2px solid var(--bord);border-radius:16px;cursor:pointer;color:var(--texte);
}
.pave button:active{background:var(--bordeaux);color:#fff}

/* ── Divers ──────────────────────────────────────────────────────────── */
.vide{text-align:center;color:var(--gris);padding:34px 20px;font-size:17px}
.alerte{background:#fdf3d8;border:1px solid #e8cf8a;border-radius:12px;
  padding:14px;margin-bottom:14px;font-size:16px}
.alerte.rouge{background:#fbe4e2;border-color:#e8b5b0}
.messager{
  position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:99;
  background:#1a1a1a;color:#fff;padding:14px 22px;border-radius:12px;font-size:16px;
  box-shadow:var(--ombre);max-width:90vw;text-align:center;
}
.pdf{width:100%;height:72vh;border:1px solid var(--bord);border-radius:12px;background:#fff}