@font-face{font-family:Fraunces;src:url('../media/fraunces-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url('../media/nunito-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url('../media/nunito-700.woff2') format('woff2');font-weight:700 800;font-display:swap}

/* Mise en page : à gauche le téléphone où le client discute avec le bot ; à droite la cuisine qui reçoit les commandes. */
:root {
  --creme: #F8F4EB; --vert: #355B3D; --nuit: #243C2A; --or: #E7B94D;
  --fond: #EFE9DC; --carte: #FFFDF8; --texte: #22302A; --doux: #5F6E64; --trait: #DED6C4;
  --bulle-client: #DCEBD9; --bulle-bot: #FFFFFF; --ecran: #F3EEE3; --ok: #2F7D4A; --attente: #B7791F;
  --titre: "Fraunces", Georgia, "Times New Roman", serif;
  --corps: "Nunito", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fond: #141D17; --carte: #1C2820; --texte: #EDE7D9; --doux: #A8B5AA; --trait: #2F3E33; --creme: #1C2820;
  --bulle-client: #2E4A35; --bulle-bot: #243128; --ecran: #18231C; --ok: #6CC48A; --attente: #E3B05A; color-scheme: dark } }
:root[data-theme="dark"] {
  --fond: #141D17; --carte: #1C2820; --texte: #EDE7D9; --doux: #A8B5AA; --trait: #2F3E33; --creme: #1C2820;
  --bulle-client: #2E4A35; --bulle-bot: #243128; --ecran: #18231C; --ok: #6CC48A; --attente: #E3B05A; color-scheme: dark }
* { box-sizing: border-box }
body { background: var(--fond); color: var(--texte); font-family: var(--corps); font-size: 15px; line-height: 1.5; padding: 24px 16px 96px }
.page { max-width: 1120px; margin: 0 auto; display: grid; gap: 28px }
header h1 { font-family: var(--titre); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.1; margin: 0; text-wrap: balance }
header h1 em { color: var(--or); font-style: italic; font-weight: 700 }
header p { margin: 10px 0 0; color: var(--doux); max-width: 62ch }
.sur { font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--vert) }
:root[data-theme="dark"] .sur, :root:not([data-theme="light"]) .sur { color: var(--or) }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .sur { color: var(--vert) } }
.scene { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 28px; align-items: start }
@media (max-width: 820px) { .scene { grid-template-columns: minmax(0, 1fr) } }

/* Téléphone */
.tel { background: #121A15; border-radius: 40px; padding: 12px; box-shadow: 0 30px 60px rgba(20, 35, 25, .25); max-width: 400px; width: 100%; justify-self: center }
.ecran { background: var(--ecran); border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; height: 680px; max-height: 78vh }
.entete { background: var(--vert); color: #FFF8EA; padding: 14px 16px; display: flex; align-items: center; gap: 12px }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--or); color: var(--nuit); display: grid; place-items: center; font-family: var(--titre); font-weight: 700; font-size: 1.05rem; flex: none }
.entete b { font-family: var(--titre); font-weight: 700; font-size: 1.05rem; display: block; line-height: 1.2 }
.entete small { opacity: .85; font-size: .78rem }
.fil { flex: 1; overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth }
.msg { max-width: 84%; padding: 9px 12px 6px; border-radius: 14px; white-space: pre-line; font-size: .92rem; box-shadow: 0 1px 1px rgba(0,0,0,.06); animation: entre .2s ease-out }
.msg.bot { background: var(--bulle-bot); align-self: flex-start; border-top-left-radius: 4px }
.msg.client { background: var(--bulle-client); align-self: flex-end; border-top-right-radius: 4px }
.msg .heure { display: block; text-align: right; font-size: .68rem; color: var(--doux); margin-top: 2px }
.msg strong { font-weight: 800 }
.ecrit { align-self: flex-start; background: var(--bulle-bot); border-radius: 14px; padding: 10px 14px; display: flex; gap: 4px }
.ecrit i { width: 6px; height: 6px; border-radius: 50%; background: var(--doux); animation: point 1s infinite }
.ecrit i:nth-child(2) { animation-delay: .15s } .ecrit i:nth-child(3) { animation-delay: .3s }
@keyframes point { 0%, 80%, 100% { opacity: .3 } 40% { opacity: 1 } }
@keyframes entre { from { opacity: 0; transform: translateY(4px) } }
.choix { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px }
.choix button { font: 700 .8rem var(--corps); border: 1.5px solid var(--vert); color: var(--vert); background: var(--carte); border-radius: 999px; padding: 6px 12px; cursor: pointer }
:root[data-theme="dark"] .choix button { color: var(--or); border-color: var(--or) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .choix button { color: var(--or); border-color: var(--or) } }
.saisie { display: flex; gap: 8px; padding: 10px 12px 12px; background: var(--ecran); border-top: 1px solid var(--trait) }
.saisie input { flex: 1; min-width: 0; font: 600 .95rem var(--corps); padding: 11px 14px; border-radius: 999px; border: 1px solid var(--trait); background: var(--carte); color: var(--texte) }
.saisie button, .btn { font: 800 .9rem var(--corps); border: 0; border-radius: 999px; padding: 10px 16px; background: var(--vert); color: #FFF8EA; cursor: pointer }
.btn.or { background: var(--or); color: var(--nuit) }
.btn.leger { background: transparent; color: var(--texte); border: 1.5px solid var(--trait) }
button:focus-visible, input:focus-visible { outline: 3px solid var(--or); outline-offset: 2px }

/* Cuisine */
.cuisine { display: grid; gap: 18px; min-width: 0 }
.bloc { background: var(--carte); border: 1px solid var(--trait); border-radius: 18px; padding: 18px }
.bloc h2 { font-family: var(--titre); font-weight: 700; font-size: 1.3rem; margin: 2px 0 10px }
.actions { display: flex; flex-wrap: wrap; gap: 8px }
.commandes { display: grid; gap: 10px }
.vide { color: var(--doux); font-size: .92rem; border: 1.5px dashed var(--trait); border-radius: 14px; padding: 18px; text-align: center }
.cmd { border: 1px solid var(--trait); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; animation: entre .3s ease-out }
.cmd .haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap }
.ref { font-family: var(--titre); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums }
.pastille { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1.5px solid currentColor }
.pastille.nouvelle { color: var(--attente) } .pastille.prete { color: var(--ok) } .pastille.livree { color: var(--doux) }
.cmd ul { margin: 0; padding-left: 18px; font-size: .9rem }
.cmd .meta { font-size: .82rem; color: var(--doux) }
.cmd .total { font-weight: 800; font-variant-numeric: tabular-nums }
.etapes { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: .92rem }
.etapes b { font-weight: 800 }
.essais { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.essais code { font: 700 .8rem var(--corps); background: var(--fond); border: 1px solid var(--trait); padding: 4px 9px; border-radius: 8px; cursor: pointer }
.note { font-size: .8rem; color: var(--doux) }
@media (prefers-reduced-motion: reduce) { .msg, .cmd { animation: none } .ecrit i { animation: none } .fil { scroll-behavior: auto } }

@media (max-width: 480px) {
  body { padding: 16px 12px 72px }
  .tel { padding: 0; border-radius: 22px; background: transparent; box-shadow: 0 16px 34px rgba(20, 35, 25, .18) }
  .ecran { border-radius: 22px; height: 72vh; min-height: 520px }
  .msg { max-width: 90% }
}
.retour { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--vert); text-decoration: none; margin-bottom: 14px }
:root[data-theme="dark"] .retour { color: var(--or) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .retour { color: var(--or) } }