:root{
  --vert:#2d6a4f; --vert-fonce:#1b4332; --vert-clair:#d8e8de;
  --creme:#f7f4ec; --creme-fonce:#efe9db; --bord:#d9d2c2;
  --texte:#22262b; --gris:#6b7280; --rouge:#c0392b; --or:#c9a227;
  --ombre:0 2px 10px rgba(0,0,0,.08); --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--creme); color:var(--texte); -webkit-text-size-adjust:100%;
}
button{font-family:inherit; cursor:pointer}
input,textarea,select{font-family:inherit; font-size:16px}

/* En-tête */
header.app{
  background:linear-gradient(135deg,var(--vert),var(--vert-fonce));
  color:#fff; padding:16px 18px; box-shadow:var(--ombre);
  position:sticky; top:0; z-index:20;
}
header.app h1{margin:0; font-size:19px; display:flex; align-items:center; gap:9px}
header.app .resto{font-size:13px; opacity:.85; margin-top:3px}
.entete-haut{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.sel-langue{background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.35);
  border-radius:9px; padding:7px 10px; font-size:14px; font-weight:600; flex-shrink:0}
.sel-langue option{color:#111}

/* Écran de verrouillage (Face ID) */
.verrou{position:fixed; inset:0; z-index:60; background:linear-gradient(135deg,var(--vert),var(--vert-fonce));
  display:flex; align-items:center; justify-content:center; padding:20px}
.verrou-boite{background:var(--creme); border-radius:20px; padding:30px 24px; max-width:360px; width:100%;
  text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.3)}
.verrou-boite h2{margin:6px 0 4px}
.verrou-icone{font-size:52px}

/* Onglets */
nav.tabs{display:flex; gap:6px; background:var(--vert-fonce); padding:0 10px; position:sticky; top:64px; z-index:19}
nav.tabs button{
  background:transparent; border:none; color:#cfe6d9; padding:13px 14px;
  font-size:14px; font-weight:600; border-bottom:3px solid transparent;
}
nav.tabs button.actif{color:#fff; border-bottom-color:var(--or)}

main{max-width:1000px; margin:0 auto; padding:16px 14px 90px}
.tab{display:none} .tab.actif{display:block}

/* Boutons */
.btn{background:var(--vert); color:#fff; border:none; padding:12px 16px; border-radius:11px; font-weight:600; font-size:15px}
.btn:active{transform:scale(.98)}
.btn.sec{background:#fff; color:var(--vert); border:1.5px solid var(--vert)}
.btn.gris{background:#eceae3; color:var(--texte)}
.btn.plein{width:100%}
.btn.rouge{background:var(--rouge)}
.btn-flottant{position:fixed; right:18px; bottom:22px; z-index:30; box-shadow:0 6px 18px rgba(0,0,0,.25); border-radius:50px; padding:15px 22px; font-size:16px}

/* Liste des plats */
.cat-titre{margin:22px 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--vert); font-weight:800}
.plat{
  background:#fff; border:1px solid var(--bord); border-radius:var(--radius);
  padding:12px 14px; margin-bottom:9px; box-shadow:var(--ombre);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.plat .nom{font-weight:700; font-size:15px}
.plat .allergs{margin-top:4px; font-size:13px; color:var(--gris); display:flex; flex-wrap:wrap; gap:5px}
.chip{background:var(--vert-clair); color:var(--vert-fonce); border-radius:20px; padding:2px 9px; font-size:12px; font-weight:600; white-space:nowrap}
.chip.trace{background:#fdf0d5; color:#8a6d1a}
.chip.vide{background:#eef0f1; color:var(--gris); font-weight:500}
.plat .modif{background:none; border:none; font-size:20px; color:var(--gris)}

/* Modale édition */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40; display:none; align-items:flex-end; justify-content:center}
.overlay.ouvert{display:flex}
.feuille{background:var(--creme); width:100%; max-width:640px; max-height:92vh; overflow:auto; border-radius:20px 20px 0 0; padding:18px 16px 30px}
@media(min-width:700px){.overlay{align-items:center}.feuille{border-radius:20px}}
.feuille h2{margin:2px 0 14px; font-size:18px}
label.champ{display:block; margin:12px 0 5px; font-weight:600; font-size:14px}
input.txt, textarea.txt, select.txt{
  width:100%; padding:12px; border:1.5px solid var(--bord); border-radius:11px; background:#fff;
}
textarea.txt{min-height:80px; resize:vertical}
.ligne-voix{display:flex; gap:8px; align-items:flex-start}
.ligne-voix textarea{flex:1}
.btn-micro{background:var(--vert); color:#fff; border:none; border-radius:12px; width:52px; height:52px; font-size:22px; flex-shrink:0}
.btn-micro.ecoute{background:var(--rouge); animation:pulse 1.1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(192,57,43,.5)}70%{box-shadow:0 0 0 14px rgba(192,57,43,0)}100%{box-shadow:0 0 0 0 rgba(192,57,43,0)}}

/* Panneau détection auto */
.detection{background:#fff; border:1.5px dashed var(--vert); border-radius:12px; padding:12px; margin-top:10px}
.detection .titre{font-size:13px; font-weight:700; color:var(--vert); margin-bottom:8px}
.reconnus{font-size:12px; color:var(--gris); margin-top:8px}

/* Grille des 14 allergènes (édition tri-état) */
.grille-all{display:grid; grid-template-columns:1fr auto; gap:6px 8px; margin-top:6px}
.all-ligne{display:flex; justify-content:space-between; align-items:center; background:#fff; border:1px solid var(--bord); border-radius:10px; padding:8px 10px}
.all-ligne .lib{font-size:14px; font-weight:600}
.trietat{display:flex; border:1px solid var(--bord); border-radius:9px; overflow:hidden}
.trietat button{border:none; background:#fff; padding:7px 11px; font-size:13px; font-weight:700; color:var(--gris)}
.trietat button.on-present{background:var(--vert); color:#fff}
.trietat button.on-trace{background:var(--or); color:#fff}
.trietat button.on-absent{background:#e6e3da; color:var(--texte)}

/* Tableau allergènes (vue grille type PDF) */
.wrap-tableau{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; box-shadow:var(--ombre)}
table.allerg{border-collapse:collapse; width:100%; background:#fff; font-size:12px; min-width:760px}
table.allerg th, table.allerg td{border:1px solid var(--bord); padding:6px 5px; text-align:center}
table.allerg th{background:var(--vert); color:#fff; position:sticky; top:0; font-size:11px}
table.allerg td.plat-nom{text-align:left; font-weight:600; white-space:nowrap}
table.allerg tr.cat td{background:var(--vert-fonce); color:#fff; text-align:left; font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:.04em}
table.allerg .pt{color:var(--vert); font-weight:900; font-size:14px}
table.allerg .tr{color:var(--or); font-weight:900}
.legende{display:flex; gap:16px; flex-wrap:wrap; margin:12px 2px; font-size:13px; color:var(--gris)}
.legende b{color:var(--texte)}

/* Éditeur de catégories */
.cat-row{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.cat-row .cat-input{flex:1}
.cat-actions{display:flex; gap:5px; flex-shrink:0}
.cat-actions .btn{padding:9px 11px; font-size:15px; line-height:1}
.cat-actions .btn[disabled]{opacity:.35}
.cat-ajout{display:flex; gap:8px; margin-top:10px}
.cat-ajout input{flex:1}

/* Réglages */
.carte{background:#fff; border:1px solid var(--bord); border-radius:var(--radius); padding:16px; margin-bottom:14px; box-shadow:var(--ombre)}
.carte h3{margin:0 0 10px; font-size:15px}
#qr{display:flex; justify-content:center; padding:12px; background:#fff; border-radius:12px}
.muted{color:var(--gris); font-size:13px}

/* Impression : on n'imprime QUE la fiche allergènes propre */
@media print{
  header.app, nav.tabs, .btn-flottant, .no-print, .overlay{display:none !important}
  main{padding:0; max-width:none}
  .tab{display:none !important}
  #fiche-impression{display:block !important}
  body{background:#fff}
}
#fiche-impression{display:none}