/* La Table du Lavancher — feuille commune au client et à la salle.
   Copiée de l'application des commandes : même palette, même grammaire
   visuelle. Copiée et non partagée, volontairement — un fichier servi aux
   clients d'un restaurant ne doit pas bouger parce qu'une autre application
   a changé d'avis. */
:root{
  --vert:#2C4A3B; --vert-fonce:#22382C; --dore:#B98A2F;
  --fond:#F4F5F3; --carte:#FFFFFF; --ligne:#E2E3DC;
  --texte:#33403A; --gris:#6B7A72; --rouge:#A4402F; --accent:var(--dore);
  --font:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--fond);color:var(--texte);font-family:var(--font);
  -webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.45}

header{background:var(--vert);color:#EAF0EC;padding:calc(20px + env(safe-area-inset-top)) 20px 20px}
.bandeau{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:13px}
header h1{margin:0;font-size:20px;font-weight:600;letter-spacing:.2px;line-height:1.2}
header p{margin:2px 0 0;font-size:13px;color:#A9C0B2}
.langue{margin-left:auto;display:flex;gap:2px;background:rgba(0,0,0,.22);border-radius:8px;padding:3px}
.langue button{background:none;border:0;color:#A9C0B2;font:inherit;font-size:12.5px;font-weight:600;
  padding:5px 11px;border-radius:6px;cursor:pointer}
.langue button[aria-pressed="true"]{background:#EAF0EC;color:var(--vert-fonce)}

main{width:100%;max-width:760px;margin:0 auto;padding:22px 20px calc(120px + env(safe-area-inset-bottom))}
h2{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:var(--gris)}
.bloc{background:var(--carte);border:1px solid var(--ligne);border-radius:12px;padding:16px 17px;margin-bottom:14px}
.bloc + h2{margin-top:24px}

label{display:block;font-size:13.5px;font-weight:600;color:var(--vert-fonce);margin-bottom:5px}
label .en{display:block;font-weight:400;font-size:12px;color:var(--gris)}
.oblig{color:var(--rouge);font-weight:700}
input[type=text],input[type=date],input[type=number],select,textarea{
  width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1px solid #CFD5CD;
  border-radius:9px;background:#fff;color:var(--texte)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
textarea{min-height:72px;resize:vertical}
.champ{margin-bottom:14px}
.champ:last-child{margin-bottom:0}
.duo{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:560px){.duo{grid-template-columns:1fr 1fr}}
.erreur{color:var(--rouge);font-size:12.5px;margin-top:5px;font-weight:600}
.aide{color:var(--gris);font-size:12.5px;margin:6px 0 0}

/* Ligne de produit avec compteur */
.produit{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--ligne)}
.produit:first-of-type{border-top:0}
.produit .nom{flex:1;min-width:0;font-size:14.5px;color:var(--vert-fonce);font-weight:500}
.produit .nom em{display:block;font-style:normal;font-size:12px;color:var(--gris);font-weight:400}
.produit .prix{font-size:13px;color:var(--gris);white-space:nowrap}
.compteur{display:flex;align-items:center;gap:0;flex:none;border:1px solid #CFD5CD;border-radius:9px;overflow:hidden;background:#fff}
.compteur button{width:38px;height:38px;border:0;background:#fff;color:var(--vert);font-size:19px;
  line-height:1;cursor:pointer;font-family:inherit}
.compteur button:disabled{color:#C9D0C9;cursor:default}
.compteur button:hover:not(:disabled){background:#F1F4F0}
.compteur .val{width:34px;text-align:center;font-size:15px;font-weight:700;color:var(--vert-fonce)}
.compteur.vide .val{color:#B6BFB6;font-weight:400}

/* Barre de validation */
.barre{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);
  border-top:1px solid var(--ligne);padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  backdrop-filter:blur(8px)}
.barre .dedans{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:14px}
.barre .compte{font-size:13px;color:var(--gris);flex:1;min-width:0}
.barre .compte strong{display:block;color:var(--vert-fonce);font-size:15px}
button.valider{background:var(--vert);color:#fff;border:0;border-radius:10px;padding:13px 24px;
  font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;flex:none}
button.valider:disabled{background:#B6BFB6;cursor:default}
button.valider:hover:not(:disabled){background:var(--vert-fonce)}

button.secondaire{background:#fff;color:var(--vert);border:1px solid #CFD5CD;border-radius:9px;
  padding:9px 15px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
button.secondaire:hover{background:#F1F4F0}

.merci{text-align:center;padding:30px 0}
.merci .coche{width:62px;height:62px;border-radius:50%;background:var(--vert);color:#fff;
  display:grid;place-items:center;margin:0 auto 18px;font-size:32px}
.merci h3{margin:0 0 8px;font-size:21px;color:var(--vert-fonce)}
.merci p{margin:0 0 6px;color:var(--gris);font-size:14.5px}
.recap{text-align:left;max-width:420px;margin:22px auto 0}
.recap .l{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:14px;border-top:1px solid var(--ligne)}
.recap .l span:last-child{font-weight:600;color:var(--vert-fonce)}

footer{max-width:760px;margin:0 auto;padding:0 20px 30px;font-size:12.5px;color:#5E6D65}
.avert{background:#FFF7E8;border:1px solid #EBD9B0;border-radius:10px;padding:12px 14px;
  font-size:13.5px;color:#6B5320;margin-bottom:14px}

/* --- Choix du service : cinq cartes, avec leur état --- */
.services-choix{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:520px){.services-choix{grid-template-columns:1fr 1fr}}
.svc{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:#fff;border:1px solid #CFD5CD;border-radius:11px;padding:13px 15px;
  font:inherit;cursor:pointer;color:inherit}
.svc:hover:not(:disabled){border-color:var(--accent);background:#FBFCFA}
.svc[aria-pressed="true"]{border-color:var(--vert);background:var(--vert);color:#fff}
.svc:disabled{opacity:.5;cursor:default;background:#F6F7F5}
.svc .n{display:block;font-size:15.5px;font-weight:600;line-height:1.25}
.svc .h{display:block;font-size:12.5px;opacity:.75;margin-top:2px}
.svc .e{margin-left:auto;flex:none;font-size:12px;font-weight:600;text-align:right;white-space:nowrap}
.svc[aria-pressed="true"] .e{color:#DCE8DF}

/* --- Créneaux --- */
.heures{display:flex;gap:8px;flex-wrap:wrap}
.heures button{flex:1 1 22%;min-width:82px;background:#fff;border:1px solid #CFD5CD;
  border-radius:9px;padding:11px 6px;font:inherit;font-size:15px;font-weight:600;
  color:var(--vert);cursor:pointer}
.heures button[aria-pressed="true"]{background:var(--vert);color:#fff;border-color:var(--vert)}
.heures button:hover:not([aria-pressed="true"]){background:#F1F4F0}

.ferme{background:#FFF7E8;border:1px solid #EBD9B0;border-radius:10px;padding:14px 16px;
  color:#6B5320;font-size:14.5px;line-height:1.5}
.ferme strong{display:block;margin-bottom:6px;color:#4E3C14}
.ferme a{color:#4E3C14;font-weight:700}