/* Appel cuisine — Le Moulin de la Galette de Sannois.
   Téléphone par défaut ; tablette paysage à partir de 900 px de large. */

/* Thèmes : sombre par défaut, clair au choix de chaque appareil (bouton Affichage). */
:root {
  --k14161A: #14161A;
  --k181B20: #181B20;
  --k1F2329: #1F2329;
  --k262A31: #262A31;
  --k3A3F47: #3A3F47;
  --k2E333B: #2E333B;
  --k2C3139: #2C3139;
  --kF2F0EA: #F2F0EA;
  --kB4BAC2: #B4BAC2;
  --k9AA1AA: #9AA1AA;
  --kC9CED5: #C9CED5;
  --kE1E4E8: #E1E4E8;
  --k8C939C: #8C939C;
  --k4A4F57: #4A4F57;
  --k6B1419: #6B1419;
  --k2A2216: #2A2216;
  --k5A4520: #5A4520;
  --k3A2E1B: #3A2E1B;
  --kF2A33A: #F2A33A;
  --kFF8A8D: #FF8A8D;
  --k5FD68C: #5FD68C;
  --k7FB2FF: #7FB2FF;
  --k17233A: #17233A;
  --k2F4A73: #2F4A73;
  --kE9756A: #E9756A;
  --k5C636C: #5C636C;
  --k1A1D22: #1A1D22;
  --k241517: #241517;
  --k4A2326: #4A2326;
  --k3A1C1F: #3A1C1F;
  --k1E4A2E: #1E4A2E;
  --kvoile: rgba(20, 22, 26, .55);
}
:root[data-theme="clair"] {
  --k14161A: #F4F3EF;
  --k181B20: #ECEBE6;
  --k1F2329: #FFFFFF;
  --k262A31: #E2E0D9;
  --k3A3F47: #D3D0C7;
  --k2E333B: #D8D5CC;
  --k2C3139: #ECEAE4;
  --kF2F0EA: #14161A;
  --kB4BAC2: #5C6068;
  --k9AA1AA: #6B6F77;
  --kC9CED5: #4A4E55;
  --kE1E4E8: #2A2D33;
  --k8C939C: #8A8E95;
  --k4A4F57: #C9C6BD;
  --k6B1419: #FFD3D0;
  --k2A2216: #FFF4E0;
  --k5A4520: #F0C97A;
  --k3A2E1B: #F6E3BF;
  --kF2A33A: #C77A0E;
  --kFF8A8D: #C8262C;
  --k5FD68C: #1F8A4C;
  --k7FB2FF: #2C5BD6;
  --k17233A: #E6EEFB;
  --k2F4A73: #A9C2EC;
  --kE9756A: #C2462F;
  --k5C636C: #8A8E95;
  --k1A1D22: #E9E7E1;
  --k241517: #FFECEA;
  --k4A2326: #F2B8B3;
  --k3A1C1F: #FFE1DE;
  --k1E4A2E: #DDF3E5;
  --kvoile: rgba(255, 255, 255, .78);
  color-scheme: light;
}

:root {
  --fond: var(--k14161A);
  --fond-2: var(--k181B20);
  --carte: var(--k1F2329);
  --carte-2: var(--k262A31);
  --trait: var(--k262A31);
  --trait-2: var(--k3A3F47);
  --texte: var(--kF2F0EA);
  --texte-2: var(--kB4BAC2);
  --texte-3: var(--k9AA1AA);
  --vert: #3DBE6E;
  --vert-clair: var(--k5FD68C);
  --vert-encre: #0B1F12;
  --rouge: #E5484D;
  --rouge-clair: var(--kFF8A8D);
  --orange: var(--kF2A33A);
  --bleu: var(--k7FB2FF);
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fond);
  color: var(--texte);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
button { font-family: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { opacity: .35; cursor: default; }
input { font-family: inherit; }
input::placeholder { color: var(--k8C939C); }
p { margin: 0; }
[hidden] { display: none !important; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

/* ------------------------------------------------------------ connexion */

.page-connexion { min-height: 100dvh; }
.connexion {
  max-width: 440px; margin: 0 auto; min-height: 100dvh;
  padding: calc(48px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 28px;
}
.marque { display: flex; flex-direction: column; gap: 6px; }
.sur-titre { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--kE9756A); }
.marque h1 { margin: 0; font-family: var(--cond); font-size: 46px; font-weight: 700; line-height: 1; }
.formulaire { display: flex; flex-direction: column; gap: 22px; flex: 1; }
.champ { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.champ label, .champ legend, .etiquette-champ { font-size: 14px; color: var(--texte-2); padding: 0; }
.champ legend { margin-bottom: 8px; }
.champ input, .saisie-grande {
  height: 58px; border-radius: 16px; border: 1px solid var(--trait-2); background: var(--carte);
  color: var(--texte); font-size: 20px; padding: 0 18px; outline: none; width: 100%;
}
.champ input:focus, .saisie-grande:focus { border-color: var(--texte-2); }
.aide { font-size: 13px; color: var(--texte-3); }
.erreur { font-size: 15px; font-weight: 600; color: var(--rouge-clair); }
.choix-role { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.role input { position: absolute; opacity: 0; pointer-events: none; }
.role-btn {
  height: 150px; border-radius: 22px; border: 2px solid var(--k2E333B); background: var(--carte);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 20px; font-weight: 700;
}
.role-btn:active { background: var(--texte); color: var(--fond); }
.role-btn.dernier { border-color: var(--texte-2); }
.role-direction {
  margin-top: 12px; height: 60px; border-radius: 18px; border: 1px solid var(--trait-2); background: transparent; color: var(--texte-2);
  display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 17px; font-weight: 600; text-decoration: none;
}
.role-direction:active { background: var(--carte); }
.etape-code { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.etape-code .btn-clair.grand { margin-top: 8px; }
.poste-choisi { font-family: var(--cond); font-size: 34px; font-weight: 700; }
.role span {
  height: 124px; border-radius: 20px; border: 2px solid var(--k2E333B); background: var(--carte);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  font-size: 18px; font-weight: 700; cursor: pointer;
}
.role input:checked + span { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.role input:focus-visible + span { outline: 3px solid var(--bleu); outline-offset: 2px; }
.btn-clair { border: none; border-radius: 18px; background: var(--texte); color: var(--fond); font-size: 19px; font-weight: 700; }
.btn-clair.grand { height: 64px; margin-top: auto; }
.pied { text-align: center; font-size: 12px; color: var(--k5C636C); }

/* ----------------------------------------------------------- application */

.appareil { position: relative; height: 100vh; height: 100dvh; height: var(--hv, 100dvh); display: flex; flex-direction: column; overflow: hidden; }

.barre {
  flex-shrink: 0; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: env(safe-area-inset-top) 12px 0 18px; border-bottom: 1px solid var(--trait);
}
.qui { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pastille { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em; background: var(--texte); color: var(--fond); }
.role-cuisine .pastille { background: var(--vert); color: var(--vert-encre); }
.bascule { display: flex; padding: 4px; gap: 4px; border-radius: 16px; background: var(--carte); border: 1px solid var(--trait-2); }
.bascule button { height: 44px; padding: 0 18px; border: none; border-radius: 12px; background: transparent; color: var(--texte-2); font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.bascule button.actif { background: var(--texte); color: var(--fond); cursor: default; }
.role-cuisine .bascule button.actif { background: var(--vert); color: var(--vert-encre); }
.nom { font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liaison { padding: 5px 10px; border-radius: 999px; background: var(--rouge); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.actions-barre { display: flex; gap: 6px; }
.btn-icone {
  width: 48px; height: 48px; border-radius: 14px; border: none; background: var(--carte); color: var(--texte-2);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}

.corps { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.zone-a { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; padding: 14px 18px 0; }
.zone-b { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 12px; padding: 14px 18px; }
.zone-c { display: flex; flex-direction: column; flex-shrink: 0; height: 210px; background: var(--fond-2); border-top: 1px solid var(--trait); padding-bottom: env(safe-area-inset-bottom); }

/* Téléphone salle : vignettes en haut, discussion, puis le bouton de demande au pouce */
.role-salle .zone-b { order: 1; }
.role-salle .zone-c { order: 2; }
.role-salle .zone-a { order: 3; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); }
.role-salle .zone-c { padding-bottom: 0; }

.titre-liste { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--texte-3); flex-shrink: 0; }

.btn-plat {
  height: 140px; flex-shrink: 0; border: none; border-radius: 28px; background: var(--vert); color: var(--vert-encre);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; text-align: center;
}
.btn-plat:active { transform: scale(.98); }
.gros-titre { font-family: var(--cond); font-size: 42px; font-weight: 700; line-height: 1; }
.sous { font-size: 16px; font-weight: 500; }
.btn-ligne {
  height: 56px; flex-shrink: 0; border-radius: 18px; border: 1px solid var(--trait-2); background: var(--carte);
  font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-ligne.bleu { border-color: var(--k2F4A73); background: var(--k17233A); }
.btn-urgence {
  height: 60px; flex-shrink: 0; border-radius: 18px; border: 2px solid var(--rouge); background: transparent; color: var(--rouge-clair);
  font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px;
}

/* Demandes de la salle, côté cuisine */
.urgence {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-radius: 20px;
  background: #D93A40; color: #fff; flex-shrink: 0; margin-bottom: 12px;
}
#urgences:empty { display: none; }
#urgences .urgence:last-child { margin-bottom: 0; }
.urgence-txt { flex: 1; min-width: 0; }
.urgence-type { font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.urgence-titre { margin-top: 2px; font-family: var(--cond); font-size: 34px; font-weight: 700; line-height: 1.05; overflow-wrap: anywhere; }
.urgence-de { margin-top: 2px; font-size: 14px; }
.btn-blanc { height: 56px; padding: 0 22px; border-radius: 16px; border: none; background: #fff; color: #A61E25; font-size: 18px; font-weight: 700; flex-shrink: 0; }

/* Manques */
.bandeau-manques { border-radius: 18px; background: var(--k2A2216); border: 1px solid var(--k5A4520); padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; }
.bandeau-titre { font-size: 12px; letter-spacing: .1em; font-weight: 700; color: var(--orange); }
.manque-salle { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.manque-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 17px; font-weight: 600; }
.badge { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--orange); color: #2A1A04; }
.badge.niv-ok { background: var(--k1E4A2E); color: var(--vert-clair); }
.badge.niv-orange { background: var(--orange); color: #2A1A04; }
.badge.niv-rouge, .badge.niv-rupture { background: var(--rouge); color: #fff; }
.mini-compteur { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.mini-compteur button { width: 46px; height: 46px; border-radius: 13px; border: none; background: var(--k2C3139); font-size: 25px; font-weight: 600; }
.bandeau-manques .mini-compteur button { background: var(--k3A2E1B); }
.mini-compteur span { min-width: 36px; text-align: center; font-family: var(--cond); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.manques-cuisine { display: flex; flex-direction: column; gap: 8px; }
.manques-cuisine:empty { display: none; }
.manque-cuisine { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--carte); flex-shrink: 0; }
.manque-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.manque-produit { font-size: 16px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.manque-etat { font-size: 13px; font-weight: 700; color: var(--orange); white-space: nowrap; }
.manque-etat.niv-ok { color: var(--vert-clair); }
.manque-etat.niv-orange { color: var(--orange); }
.manque-etat.niv-rouge, .manque-etat.niv-rupture { color: var(--rouge-clair); }
.btn-reassort { height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--trait-2); background: transparent; color: var(--kC9CED5); font-size: 14px; font-weight: 600; }
.seulement-tablette { display: none; }

/* --------------------------------------------------------------- vignettes */

.vignettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 204px; gap: 12px; }
.vignettes:empty { display: none; }
.glisse { position: relative; height: 100%; border-radius: 20px; overflow: hidden; transition: opacity .2s; }
.glisse.part { opacity: 0; pointer-events: none; }
.fond-glisse {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: space-between;
  padding: 0 14px; font-size: 15px; font-weight: 700; color: #fff;
}
.glisse.vers-droite .fond-glisse, .glisse.vers-gauche .fond-glisse { display: flex; }
.glisse.vers-droite { background: #2E9B58; }
.glisse.vers-gauche { background: #C8343A; }
.glisse.vers-droite .fond-glisse span:last-child, .glisse.vers-gauche .fond-glisse span:first-child { visibility: hidden; }
.glisse.arme .fond-glisse { font-size: 17px; }

/* Vignette presque carrée, toujours de la même taille ; la couleur monte du bas avec les secondes */
.carte {
  position: relative; height: 100%; box-sizing: border-box; overflow: hidden; isolation: isolate;
  border-radius: 20px; background: var(--carte); border: 2px solid var(--vert);
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: transform .2s ease;
}
.carte.glisse-actif { transition: none; }
.niveau { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--r, .04) * 100%); z-index: -1; transition: height .5s linear, width .5s linear, background .5s linear; }
.carte.alerte { animation: clignote .8s steps(1, end) infinite; }
@keyframes clignote { 0% { background: var(--carte); } 50% { background: var(--k6B1419); } }

/* ------------------------------------------------- menu Affichage (thème, vignettes / lignes) */
.affichage { position: relative; }
.btn-affichage { width: auto; min-width: 48px; padding: 0 12px; gap: 8px; font-size: 15px; font-weight: 700; color: var(--texte); }
.btn-affichage[aria-expanded="true"] { outline: 2px solid var(--texte); outline-offset: -2px; }
.menu-affichage {
  position: fixed; top: calc(70px + env(safe-area-inset-top)); left: 10px; right: 10px; z-index: 25; box-sizing: border-box;
  padding: 12px; border-radius: 20px; background: var(--carte); border: 1px solid var(--trait-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 8px;
}
.ligne-reglage {
  width: 100%; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px;
  border-radius: 14px; border: none; background: var(--fond-2); font-size: 16px; font-weight: 700;
}
.ligne-lib { flex: 1; text-align: left; }
.ligne-val { font-size: 15px; font-weight: 600; color: var(--texte-2); }
.ligne-reglage svg { transition: transform .2s; flex-shrink: 0; }
.ligne-reglage[aria-expanded="true"] svg { transform: rotate(90deg); }
.choix-reglage { display: flex; padding: 4px; gap: 4px; border-radius: 14px; background: var(--fond-2); }
.choix-reglage button {
  flex: 1; height: 46px; border: none; border-radius: 10px; background: transparent; color: var(--texte-2);
  display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700;
}
.choix-reglage button.actif { background: var(--texte); color: var(--fond); }
.menu-aide { font-size: 13px; color: var(--texte-3); padding: 2px 4px 0; }
.menu-affichage { max-height: calc(var(--hv, 100vh) - 90px); overflow-y: auto; }
.reglage-son { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 14px; background: var(--fond-2); }
.volume { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.volume label, .jingle label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); }
.volume input { width: 100%; height: 36px; accent-color: var(--vert); }
#volume-txt { min-width: 48px; text-align: right; font-family: var(--cond); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jingle { display: flex; flex-direction: column; gap: 6px; }
.jingle-ligne { display: flex; gap: 8px; }
.jingle select {
  flex: 1; min-width: 0; height: 46px; border-radius: 12px; border: 1px solid var(--trait-2); background: var(--carte);
  color: var(--texte); font-family: inherit; font-size: 16px; font-weight: 600; padding: 0 10px;
}
.btn-ecouter { width: 46px; height: 46px; flex-shrink: 0; border-radius: 23px; border: none; background: var(--vert); color: var(--vert-encre); display: flex; align-items: center; justify-content: center; }


/* -------------------------------------------------------------- affichage en lignes */
.affichage-lignes .vignettes { display: flex; flex-direction: column; gap: 8px; }
.affichage-lignes .glisse { height: 76px; flex-shrink: 0; border-radius: 14px; }
.affichage-lignes .carte {
  border-radius: 14px; padding: 0 10px 0 14px; display: grid; column-gap: 6px; row-gap: 2px;
  grid-template-columns: minmax(0, auto) auto minmax(0, 1fr) auto; align-content: center; align-items: center;
}
.affichage-lignes .carte-haut { display: contents; }
.affichage-lignes .etiquette { grid-column: 1; grid-row: 1; font-size: 10px; }
.affichage-lignes .carte-num { grid-column: 1; grid-row: 2; justify-content: flex-start; min-width: 0; }
.affichage-lignes .chrono { grid-column: 2; grid-row: 2; align-self: end; margin: 0 0 2px 6px; font-size: 22px; }
.affichage-lignes .carte-btns { grid-column: 4; grid-row: 1 / 3; }
.affichage-lignes .libelle { font-size: 40px; line-height: 1; text-align: left; white-space: nowrap; }
.affichage-lignes .libelle.texte { display: block; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.affichage-lignes .niveau { top: 0; bottom: 0; right: auto; height: auto; width: calc(var(--r, .03) * 100%); }
.affichage-lignes .btn-ok { flex: none; min-width: 104px; padding: 0 12px; white-space: nowrap; }

.carte.alerte .niveau { animation: barre .8s steps(1, end) infinite; }
@keyframes barre { 0% { opacity: 1; } 50% { opacity: .35; } }

.carte-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-shrink: 0; }
.etiquette { font-size: 11px; letter-spacing: .1em; font-weight: 700; color: var(--kC9CED5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chrono {
  flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums;
  font-family: var(--cond); font-size: 22px; font-weight: 700;
}
.carte-num { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.libelle { font-family: var(--cond); font-size: 70px; font-weight: 700; line-height: .95; text-align: center; }
.libelle.texte {
  font-size: 30px; line-height: 1.05; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.carte-btns { display: flex; gap: 6px; flex-shrink: 0; }
.carte-btns button { height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 700; padding: 0; }
.btn-annuler { width: 46px; flex-shrink: 0; border: 1px solid var(--k4A4F57); background: var(--kvoile); color: var(--kE1E4E8); }
.btn-annuler span { display: none; }
.btn-ok { flex: 1; border: none; background: var(--vert); color: var(--vert-encre); }
.btn-ok svg { display: none; }

.vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 28px 12px; flex-shrink: 0; }
.vide-titre { font-size: 21px; font-weight: 700; }
.vide-sous { font-size: 15px; color: var(--texte-2); max-width: 280px; }

/* Historique */
.historique { margin-top: auto; padding-top: 8px; flex-shrink: 0; }
.btn-historique {
  width: 100%; height: 52px; border-radius: 14px; border: 1px solid var(--k2E333B); background: var(--fond-2); color: var(--kE1E4E8);
  display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 16px; font-weight: 600;
}
.btn-historique svg { transition: transform .2s; }
.btn-historique.ouvert svg { transform: rotate(180deg); }
#historique { margin-top: 6px; }
.ligne-histo { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--trait); }
.histo-lib { font-family: var(--cond); font-size: 22px; font-weight: 700; min-width: 76px; max-width: 120px; overflow-wrap: anywhere; line-height: 1.05; }
.histo-txt { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; }
.histo-txt.pris { color: var(--vert-clair); }
.histo-txt.annule { color: var(--texte-3); }
.histo-heure { font-size: 13px; color: var(--texte-3); flex-shrink: 0; }
.histo-vide { margin: 10px 6px; font-size: 14px; color: var(--k8C939C); }

/* Discussion */
.chat-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 0 16px; min-height: 44px; }
.btn-vider { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--trait-2); background: transparent; color: var(--texte-3); display: flex; align-items: center; justify-content: center; }
.btn-vider:active { color: var(--rouge-clair); border-color: var(--rouge); }
button.bulle { border: none; text-align: left; font-family: inherit; cursor: pointer; }
button.bulle:active { filter: brightness(.85); }
.confirmation { position: absolute; inset: 0; z-index: 30; background: rgba(5, 7, 10, .72); display: flex; align-items: center; justify-content: center; padding: 20px; }
.confirmation-boite { width: min(400px, 100%); border-radius: 22px; background: var(--carte); border: 1px solid var(--trait-2); padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.confirmation-texte { font-size: 21px; font-weight: 700; }
.confirmation-detail { font-size: 15px; color: var(--texte-2); overflow-wrap: anywhere; }
.confirmation-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.confirmation-btns button { height: 56px; }
.chat-liste { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 8px; padding: 10px 16px; }
.chat-vide { margin: auto 0; text-align: center; font-size: 14px; color: var(--k8C939C); }
.msg { display: flex; flex-direction: column; gap: 3px; }
.msg.moi { align-items: flex-end; }
.msg.autre { align-items: flex-start; }
.msg-entete { font-size: 12px; color: var(--texte-3); }
.bulle { max-width: 82%; padding: 9px 13px; border-radius: 16px; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.moi .bulle { background: var(--texte); color: var(--fond); border-bottom-right-radius: 4px; }
.autre .bulle { background: var(--k2C3139); border-bottom-left-radius: 4px; }
.rapides { display: flex; gap: 8px; padding: 0 16px 8px; overflow-x: auto; scrollbar-width: none; }
.rapides:empty { display: none; }
.puce { height: 38px; flex-shrink: 0; padding: 0 14px; border-radius: 999px; border: 1px solid var(--trait-2); background: var(--carte); color: var(--kE1E4E8); font-size: 14px; font-weight: 600; }
.chat-saisie { display: flex; gap: 8px; padding: 0 16px 14px; }
.chat-saisie input { flex: 1; min-width: 0; height: 50px; border-radius: 14px; border: 1px solid var(--trait-2); background: var(--carte); color: var(--texte); font-size: 16px; padding: 0 14px; outline: none; }
.btn-envoyer { width: 50px; height: 50px; border-radius: 14px; border: none; background: var(--texte); color: var(--fond); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ------------------------------------------------------- écrans secondaires */

.sous-ecran { position: absolute; inset: 0; z-index: 5; background: var(--fond); display: flex; flex-direction: column; }
.sous-ecran .barre { justify-content: flex-start; padding-left: 8px; }
.btn-retour { height: 48px; padding: 0 14px 0 8px; border-radius: 14px; border: none; background: transparent; font-size: 17px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.sous-titre { font-size: 17px; font-weight: 700; }
.colonne {
  flex: 1; min-height: 0; width: 100%; max-width: 480px; margin: 0 auto; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px; padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
}
.ressort { flex: 1; }
.titre-pave { font-size: 17px; font-weight: 600; color: var(--vert-clair); }
.titre-pave.rouge, .role-salle .titre-pave { color: var(--rouge-clair); }
.ecran-chiffres { height: 96px; flex-shrink: 0; border-radius: 22px; background: var(--carte); display: flex; align-items: center; justify-content: center; font-family: var(--cond); font-size: 68px; font-weight: 700; }
.pave { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pave button { height: 72px; border-radius: 18px; border: none; background: var(--carte-2); font-size: 30px; font-weight: 600; }
.pave button:active { background: var(--k3A3F47); }
.pave .touche-texte { background: var(--k1A1D22); font-size: 19px; }
.btn-valider { height: 68px; flex-shrink: 0; border: none; border-radius: 20px; font-size: 20px; font-weight: 700; }
.btn-valider.vert { background: var(--vert); color: var(--vert-encre); }
.btn-valider.rouge { background: var(--rouge); color: #fff; }
.btn-valider.orange { background: var(--orange); color: #2A1A04; }
.compteur { display: flex; align-items: center; gap: 12px; }
.compteur button { width: 72px; height: 72px; border-radius: 20px; border: none; background: var(--carte-2); font-size: 34px; font-weight: 600; }
.compteur .valeur { flex: 1; height: 72px; border-radius: 20px; background: var(--carte); display: flex; align-items: center; justify-content: center; font-family: var(--cond); font-size: 48px; font-weight: 700; }
.jauge-stock { height: 14px; border-radius: 7px; background: var(--carte-2); overflow: hidden; }
.jauge-stock div { height: 100%; border-radius: 7px; transition: width .2s, background .2s; }
.jauge-texte { font-size: 15px; font-weight: 700; }
.motifs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.motif {
  min-height: 132px; border-radius: 22px; border: 2px solid var(--k4A2326); background: var(--k241517);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; padding: 16px; text-align: left;
}
.motif-txt { font-family: var(--cond); font-size: 30px; font-weight: 700; line-height: 1; overflow-wrap: anywhere; }
.motif-aide { font-size: 14px; color: var(--texte-2); }
.titre-liste.rouge { color: var(--rouge-clair); }
.motif-direct {
  min-height: 64px; flex-shrink: 0; border-radius: 18px; border: 2px solid var(--k4A2326); background: var(--k241517);
  padding: 10px 16px; text-align: left; font-family: var(--cond); font-size: 26px; font-weight: 700; line-height: 1.05; overflow-wrap: anywhere;
}
.motif-direct:active { background: var(--k3A1C1F); }
.motif-direct.motif-table { border-color: var(--rouge); color: var(--rouge-clair); }
.motif-direct.motif-autre { border-style: dashed; color: var(--texte-2); }

.toast {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 20;
  width: min(360px, calc(100% - 40px)); border-radius: 16px; background: var(--texte); color: var(--fond);
  padding: 14px 16px; text-align: center; font-size: 16px; font-weight: 700; box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.appareil > .barre { order: 0; }
.corps { order: 2; }
.btn-son .son-coupe { display: none; }
.btn-son.coupe { background: var(--k3A1C1F); color: var(--rouge-clair); }
.btn-son.coupe .son-ouvert { display: none; }
.btn-son.coupe .son-coupe { display: flex; }
.btn-son:not(.coupe) { color: var(--vert-clair); }
.btn-son span { display: flex; }

/* ----------------------------------------------------------- tablette paysage */

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .corps { flex-direction: row; }
  .zone-a, .role-salle .zone-a { order: 1; width: 280px; padding: 18px 18px calc(24px + env(safe-area-inset-bottom)); border-right: 1px solid var(--trait); overflow-y: auto; }
  .zone-b, .role-salle .zone-b { order: 2; padding: 18px 18px calc(24px + env(safe-area-inset-bottom)); }
  .zone-c, .role-salle .zone-c { order: 3; width: 300px; height: auto; border-top: none; border-left: 1px solid var(--trait); padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .btn-plat { height: 230px; }
  .demandes-directes { flex-direction: column; gap: 10px; }
  .motifs-directs { display: flex; flex-direction: column; gap: 10px; }
  .seulement-tablette { display: flex; }
  .seulement-telephone { display: none !important; }
  .manques-cuisine.seulement-tablette { margin-top: 6px; }

  /* Douze vignettes d'un coup d'œil : quatre colonnes de vignettes presque carrées */
  .vignettes { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; gap: 12px; }
  .glisse, .carte { border-radius: 18px; }
  .carte { padding: 14px 12px 12px; }
  .libelle { font-size: 58px; }
  .libelle.texte { font-size: 26px; }
  .chrono { font-size: 20px; }
  .carte-btns button { height: 42px; }
  .btn-annuler { width: 42px; }
  .btn-ok span { display: none; }
  .btn-ok svg { display: block; }
  .menu-affichage { position: absolute; top: 56px; left: auto; right: 0; width: 300px; }
  .affichage-lignes .glisse { height: 112px; border-radius: 18px; }
  .affichage-lignes .carte { border-radius: 18px; padding: 0 14px 0 20px; column-gap: 16px; row-gap: 4px; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto auto; grid-template-rows: auto auto; }
  .affichage-lignes .etiquette { font-size: 11px; }
  .affichage-lignes .libelle { font-size: 62px; }
  .affichage-lignes .libelle.texte { font-size: 32px; }
  .affichage-lignes .chrono { grid-column: 3; justify-self: end; align-self: center; grid-row: 1 / 3; margin: 0; font-size: 34px; }
  .affichage-lignes .carte-btns { grid-column: 4; grid-row: 1 / 3; flex-direction: row; gap: 8px; }
  .affichage-lignes .btn-ok { min-width: 88px; width: 88px; height: 60px; padding: 0; }
  .affichage-lignes .btn-annuler { width: 60px; min-width: 60px; height: 60px; }
  .affichage-lignes .btn-annuler span { display: none; }
  .affichage-lignes .btn-annuler svg { display: block; }
}

/* Petits téléphones : barre du haut plus compacte */
@media (max-width: 380px) {
  .btn-icone { width: 44px; height: 44px; }
  .btn-affichage { min-width: 44px; padding: 0 10px; }
  .bascule button { padding: 0 14px; }
}