:root { --fond: #f6f1ea; --encre: #2a1d1a; --rouge: #8e1b25; --bulle: #fffaf4; --moi: #efe3d6; --gris: #7a6a62; --ligne: rgba(42, 29, 26, .15); }
@media (prefers-color-scheme: dark) {
    :root { --fond: #17110f; --encre: #efe5dc; --rouge: #d0505c; --bulle: #241b18; --moi: #33261f; --gris: #b3a49b; --ligne: rgba(239, 229, 220, .15); }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { display: flex; flex-direction: column; background: var(--fond); color: var(--encre); font: 17px/1.55 Georgia, "Times New Roman", serif; padding-bottom: env(safe-area-inset-bottom); }
a { color: var(--rouge); }
.barre { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--ligne); }
.barre .titre { font-size: 1.35rem; color: var(--rouge); letter-spacing: .02em; }
.barre .sous { color: var(--gris); font-size: .9rem; flex: 1; }
.barre nav { display: flex; gap: .5rem; align-items: center; font-size: .85rem; }
.barre nav button, .barre nav a { font: inherit; background: none; border: 1px solid var(--gris); color: var(--encre); border-radius: 999px; padding: .25rem .8rem; cursor: pointer; text-decoration: none; }
.barre .sortie { margin: 0; }
#qv-fil { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .8rem; max-width: 46rem; width: 100%; margin: 0 auto; }
.msg { max-width: 88%; padding: .7rem .95rem; border-radius: 14px; }
.msg p { margin: 0 0 .6em; } .msg p:last-child { margin: 0; }
.regina { align-self: flex-start; background: var(--bulle); border-left: 3px solid var(--rouge); }
.moi { align-self: flex-end; background: var(--moi); }
.attente { color: var(--gris); font-style: italic; }
.geste { color: var(--gris); }
.erreur { align-self: center; color: var(--rouge); font-size: .9rem; }
#qv-form { display: flex; gap: .5rem; padding: .75rem 1rem 1rem; max-width: 46rem; width: 100%; margin: 0 auto; }
textarea, input { font: inherit; padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--gris); background: var(--bulle); color: var(--encre); width: 100%; }
textarea { flex: 1; resize: none; }
button[type="submit"] { font: inherit; background: var(--rouge); color: #fff; border: 0; border-radius: 12px; padding: .6rem 1rem; cursor: pointer; }
#qv-envoyer:disabled { opacity: .5; cursor: wait; }
#qv-micro { font: inherit; font-size: 1.2rem; background: var(--bulle); border: 1px solid var(--gris); border-radius: 12px; padding: 0 .75rem; cursor: pointer; }
#qv-micro.actif { background: var(--rouge); border-color: var(--rouge); animation: qv-pulse 1.2s infinite; }
@keyframes qv-pulse { 50% { opacity: .55; } }
.carte { max-width: 26rem; margin: 3rem auto; padding: 0 1rem; }
.carte h1 { color: var(--rouge); font-weight: normal; margin-bottom: .2rem; }
.carte .sous { color: var(--gris); }
.carte form { display: flex; flex-direction: column; gap: .9rem; }
.carte label { display: flex; flex-direction: column; gap: .3rem; font-size: .95rem; }
.carte label.case { flex-direction: row; align-items: center; gap: .5rem; }
.carte label.case input { width: auto; }
.alerte { color: var(--rouge); }
.bravo { color: #2e7d32; }