:root	{ --fond:#EFE3C8; --carte:#FBF5E8; --encre:#2B1F1C; --doux:#76674F; --trait:#DDCCA8; --rouge:#B8322A; --rouge-hover:#9E2A23; --rouge-pale:#F6DEDA; --sur-rouge:#FFFFFF; --rayon:14px; color-scheme:light dark; }
@media (prefers-color-scheme: dark) {
	:root	{ --fond:#1D1816; --carte:#28211E; --encre:#F1E9E0; --doux:#A8988F; --trait:#3A302C; --rouge:#E0675B; --rouge-hover:#EA8378; --rouge-pale:#43231F; --sur-rouge:#1D1816; }
}

*, *::before, *::after	{ box-sizing:border-box; }
[hidden]	{ display:none !important; }
html	{ height:100%; }
body	{ margin:0; min-height:100%; background:var(--fond); color:var(--encre); font:400 17px/1.5 "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; padding:env(safe-area-inset-top, 0px) 0 calc(96px + env(safe-area-inset-bottom, 0px)); -webkit-text-size-adjust:100%; }
button, input	{ font:inherit; color:inherit; }
button	{ cursor:pointer; }
:focus-visible	{ outline:3px solid var(--rouge); outline-offset:2px; }

.entete	{ max-width:640px; margin:0 auto; padding:24px 20px 4px; display:flex; align-items:center; gap:12px; }
.logo	{ width:64px; height:64px; flex:none; border-radius:16px; margin-left:-10px; }
.entete h1	{ font:400 clamp(1.45rem, 6vw, 2.1rem)/1.1 "Young Serif", Georgia, serif; margin:0; color:var(--rouge); letter-spacing:-0.01em; }

.contenu	{ max-width:640px; margin:0 auto; padding:18px 20px 0; }
.bandeau	{ margin:0 0 14px; padding:10px 14px; border-radius:10px; background:var(--carte); border:1px dashed var(--doux); color:var(--doux); font-size:.92rem; }
.filtres	{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.rangee	{ display:flex; flex-wrap:wrap; gap:6px; }
.tags.choix	{ flex-direction:column; flex-wrap:nowrap; gap:8px; }

.tags	{ display:flex; flex-wrap:wrap; gap:6px; }
.tag	{ display:inline-flex; align-items:center; padding:3px 8px; border-radius:5px; border:1px solid color-mix(in srgb, var(--rouge) 40%, transparent); background:transparent; color:var(--rouge); font-size:.66rem; font-weight:500; white-space:nowrap; }
button.tag[aria-pressed="true"]	{ background:var(--rouge); border-color:var(--rouge); color:var(--sur-rouge); }

.liste	{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.repas	{ background:var(--carte); border:1px solid var(--trait); border-radius:var(--rayon); padding:11px 14px 12px; }
.repas h3	{ margin:0; font-size:1.05rem; font-weight:600; line-height:1.3; }
.repas .tags	{ gap:4px; margin-top:5px; }
.repas .tag	{ border-color:transparent; background:var(--rouge-pale); }
.btn-nom	{ all:unset; cursor:pointer; display:block; width:100%; }
.btn-nom:focus-visible	{ outline:3px solid var(--rouge); outline-offset:4px; border-radius:4px; }
.vide	{ text-align:center; color:var(--doux); padding:32px 12px; }

.btn-ajouter	{ position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); width:max-content; white-space:nowrap; padding:10px 40px; border:0; border-radius:999px; background:var(--rouge); color:var(--sur-rouge); font-weight:600; box-shadow:0 6px 18px rgba(60,20,15,.25); }
.btn-ajouter:hover	{ background:var(--rouge-hover); }
.btn-ajouter:disabled	{ opacity:.5; }

.btn-prim	{ padding:11px 20px; border:0; border-radius:10px; background:var(--rouge); color:var(--sur-rouge); font-weight:600; }
.btn-prim:disabled	{ opacity:.6; }
.btn-sec	{ padding:9px 16px; border:1px solid var(--trait); border-radius:10px; background:var(--carte); font-weight:500; }
.btn-lien	{ padding:9px 6px; border:0; background:none; text-decoration:underline; }
.btn-danger	{ padding:9px 6px; border:0; background:none; color:var(--rouge); }

.dialogue	{ width:min(560px, calc(100% - 24px)); max-height:calc(100% - 24px); border:0; border-radius:18px; padding:0; background:var(--carte); color:var(--encre); }
.dialogue::backdrop	{ background:rgba(40,20,15,.45); }
.dialogue form	{ padding:22px 20px 18px; display:flex; flex-direction:column; gap:6px; }
.dialogue h2	{ font:400 1.6rem/1.2 "Young Serif", Georgia, serif; margin:0 0 10px; color:var(--rouge); }
.dialogue label, .dialogue legend	{ font-weight:600; font-size:.95rem; margin-top:8px; }
.dialogue input[type="text"]	{ width:100%; padding:11px 12px; border:1px solid var(--trait); border-radius:10px; background:var(--fond); }
.dialogue fieldset	{ border:0; margin:0; padding:0; }
.dialogue legend	{ padding:0; margin-bottom:8px; }
.aide	{ font-weight:400; color:var(--doux); font-size:.88rem; margin:0; }
.nouveau-tag	{ display:flex; gap:8px; margin-top:10px; }
.nouveau-tag input	{ flex:1; min-width:0; }
.erreur	{ color:var(--rouge); margin:8px 0 0; font-size:.93rem; }
.dlg-actions	{ display:flex; align-items:center; gap:8px; margin-top:18px; }
.espace	{ flex:1; }

.ecran-code	{ position:fixed; inset:0; background:var(--fond); display:grid; place-items:center; padding:24px; z-index:10; }
.ecran-code form	{ width:min(360px, 100%); display:flex; flex-direction:column; gap:8px; }
.ecran-code h1	{ font:400 2.4rem/1.1 "Young Serif", Georgia, serif; margin:0 0 16px; color:var(--rouge); }
.ecran-code input	{ padding:12px 14px; border:1px solid var(--trait); border-radius:10px; background:var(--carte); margin-bottom:8px; }

.toast	{ position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%, 12px); width:max-content; max-width:calc(100% - 32px); padding:10px 18px; border-radius:999px; background:var(--encre); color:var(--fond); font-size:.93rem; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.toast.visible	{ opacity:1; transform:translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after	{ animation:none !important; transition:none !important; }
}