/* ════════════════════════════════════════════════════════════════════ MealCrew — Fondations design system (cf. design-system/MASTER.md) Tokens dérivés du thème espresso + garde-fous UX (ui-ux-pro-max). ════════════════════════════════════════════════════════════════════ */ :root { /* Surfaces élevées (au-dessus de Surface #201B18) — survols, hover cards */ --mc-surface-2: #2A2420; --mc-surface-3: #332B26; /* Échelle d'espacement 4/8 px */ --mc-space-1: 4px; --mc-space-2: 8px; --mc-space-3: 12px; --mc-space-4: 16px; --mc-space-6: 24px; --mc-space-8: 32px; /* Rayons */ --mc-radius-sm: 8px; --mc-radius: 0.85rem; --mc-radius-pill: 999px; /* Élévation (douce, jamais lourde) */ --mc-elev-1: 0 1px 2px rgba(0,0,0,.20); --mc-elev-2: 0 8px 24px -16px rgba(0,0,0,.55); /* Durées de transition (150–300ms) */ --mc-dur: 160ms; /* Polices du thème (surchargées sur par le thème actif) */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; } html, body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; } /* Titres MudBlazor → police d'affichage du thème. */ .mud-typography-h1, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { font-family: var(--font-display); } /* Transition douce du changement de thème (0,3 s) — :where() = spécificité 0, donc les transitions propres aux composants (hover…) gardent la priorité. */ :where(*, *::before, *::after) { transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease; } .tnum { font-variant-numeric: tabular-nums; } /* Accessibilité : anneau de focus visible cohérent (garde-fou §1) */ :where(a, button, input, select, textarea, [tabindex], .mc-chip, .mc-cell-empty, .mc-cell-act):focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; border-radius: var(--mc-radius-sm); } /* Tout élément cliquable a un curseur pointer (garde-fou §2) */ :where(button, [role="button"], .mc-chip, .mc-cell-card, .mc-rec-card, .mc-cell-empty, .mc-cell-act, .mc-logout) { cursor: pointer; } /* Respect de prefers-reduced-motion (garde-fou §7) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ── Sidebar / Drawer (layout custom, piloté CSS/JS) ── */ .mc-shell { min-height: 100vh; } .mc-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 1200; background: var(--mud-palette-surface); border-right: 1px solid var(--mud-palette-divider); overflow-y: auto; } .mc-drawer .mud-drawer-content { border-right: 1px solid var(--mud-palette-divider); } .mc-drawer-inner { display: flex; flex-direction: column; height: 100%; padding: 8px 0; } .mc-logo { display: flex; align-items: center; gap: 10px; padding: 16px 22px 18px; font-size: 1.3rem; font-weight: 800; font-family: 'Manrope', sans-serif; letter-spacing: -0.02em; } .mc-logo .mud-icon-root { font-size: 1.6rem; } .mc-logo-accent { color: var(--mud-palette-primary); } .mc-nav { flex: 1; padding: 0 12px; } .mc-nav .mud-nav-link { border-radius: 10px; margin-bottom: 3px; font-weight: 500; transition: background-color .18s ease, color .18s ease; } .mc-nav .mud-nav-link:hover { background-color: var(--mud-palette-action-default-hover); } .mc-nav .mud-nav-link.active { background-color: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-primary); font-weight: 600; position: relative; } .mc-nav .mud-nav-link.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 0 4px 4px 0; background: var(--mud-palette-primary); } .mc-nav .mud-nav-link.active .mud-icon-root { color: var(--mud-palette-primary); } .mc-profile { display: flex; align-items: center; gap: 10px; margin: 8px 12px 4px; padding: 8px 10px; border-top: 1px solid var(--mud-palette-divider); } .mc-profile-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: inherit; border-radius: 8px; padding: 2px; transition: background .15s ease; } .mc-profile-link:hover { background: var(--mud-palette-action-default-hover); } .mc-profile-info { flex: 1; min-width: 0; } .mc-profile-name { font-weight: 600; font-size: .85rem; line-height: 1.1; } .mc-profile-sub { font-size: .72rem; color: var(--mud-palette-text-secondary); } /* Hamburger : caché sur desktop, visible en haut à droite sur mobile (44×44). */ .mc-burger { position: fixed; top: 10px; right: 12px; z-index: 1400; width: 44px; height: 44px; border-radius: 12px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-divider); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; } .mc-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--mud-palette-text-primary); transition: transform .2s ease, opacity .2s ease; } body.mc-nav-open .mc-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.mc-nav-open .mc-burger span:nth-child(2) { opacity: 0; } body.mc-nav-open .mc-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .mc-nav-scrim { display: none; position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,.5); } /* ── Content ── */ .mc-main { background: var(--mud-palette-background); min-height: 100vh; margin-left: 260px; } .mc-content { max-width: 1400px; margin: 0 auto; padding: 32px 40px 56px; } @media (max-width: 768px) { .mc-content { padding: 64px 18px 40px; } .mc-main { margin-left: 0; } .mc-burger { display: flex; } /* Sidebar hors-écran par défaut, glisse depuis la gauche à l'ouverture. */ .mc-sidebar { transform: translateX(-105%); transition: transform .25s ease; box-shadow: 0 8px 40px rgba(0,0,0,.45); } body.mc-nav-open .mc-sidebar { transform: translateX(0); } body.mc-nav-open .mc-nav-scrim { display: block; } } /* ── Cards & micro-interactions ── */ .mc-card { border: 1px solid var(--mud-palette-divider); border-radius: 14px; background: var(--mud-palette-surface); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .mc-card-hover:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent); box-shadow: 0 8px 24px rgba(0,0,0,.18); } /* ── Badge de portion ── */ .mc-portion { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 500; line-height: 1.4; } .mc-portion-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .mc-portion-good { background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent); color: var(--mud-palette-success); } .mc-portion-good .mc-portion-dot { background: var(--mud-palette-success); } .mc-portion-warn { background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent); color: var(--mud-palette-warning); } .mc-portion-warn .mc-portion-dot { background: var(--mud-palette-warning); } .mc-portion-bad { background: color-mix(in srgb, var(--mud-palette-error) 16%, transparent); color: var(--mud-palette-error); } .mc-portion-bad .mc-portion-dot { background: var(--mud-palette-error); } /* ── Planning : barre + bilan + grille calendrier ── */ .mc-weeknav { display: flex; align-items: center; gap: 4px; } .mc-weeknav-label { min-width: 132px; text-align: center; font-size: .9rem; font-weight: 500; } .mc-weekbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border: 1px solid var(--mud-palette-divider); border-radius: 8px; background: var(--mud-palette-surface); padding: 12px 16px; } .mc-weekbar-kcal { font-size: 1.05rem; font-weight: 500; } .mc-weekbar-kcal .sep { color: var(--mud-palette-text-secondary); font-weight: 400; } .mc-weekbar-sub { font-size: .78rem; color: var(--mud-palette-text-secondary); } .mc-weekbar-track { flex: 1; min-width: 160px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; } .mc-weekbar-fill { height: 100%; border-radius: 999px; background: var(--mud-palette-primary); } .mc-cal { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); gap: 6px; } .mc-cal-corner { } .mc-cal-head { padding: 4px 0 6px; text-align: center; } .mc-cal-head .d { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); } .mc-cal-head .n { font-size: 1.1rem; font-weight: 500; line-height: 1.1; color: var(--mud-palette-text-primary); } .mc-cal-head.today .d, .mc-cal-head.today .n { color: var(--mud-palette-primary); } .mc-cal-rowlabel { display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; text-align: right; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mud-palette-text-secondary); } .mc-cell { min-height: 104px; position: relative; } .mc-cell-card { height: 100%; display: flex; flex-direction: column; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-divider); border-radius: 8px; padding: 8px; cursor: grab; transition: border-color .15s ease, background .15s ease; } .mc-cell-card:hover { border-color: var(--mud-palette-primary); background: var(--mc-surface-2); } .mc-cell-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .mc-cell-code { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); } .mc-cell-title { font-size: .76rem; font-weight: 500; line-height: 1.25; margin-top: 5px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mc-cell-kcal { font-size: .72rem; font-weight: 500; color: var(--mud-palette-primary); margin-top: 4px; } .mc-cell-actions { position: absolute; right: 6px; top: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s ease; } .mc-cell:hover .mc-cell-actions { opacity: 1; } .mc-cell-act { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--mud-palette-divider); background: var(--mud-palette-background); color: var(--mud-palette-text-secondary); cursor: pointer; transition: color .15s ease, border-color .15s ease; } .mc-cell-act:hover { color: var(--mud-palette-text-primary); border-color: rgba(255,255,255,0.28); } .mc-cell-act.danger:hover { color: var(--mud-palette-error); border-color: var(--mud-palette-error); } .mc-cell-empty { height: 100%; width: 100%; border: 1px dashed rgba(255,255,255,0.12); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--mud-palette-text-disabled); transition: border-color .15s ease, color .15s ease, background .15s ease; background: none; cursor: pointer; } .mc-cell-empty:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); background: rgba(231,114,60,0.08); } /* ── Recettes ── */ .mc-rec-layout { display: grid; grid-template-columns: 248px 1fr; gap: 28px; align-items: start; } @media (max-width: 900px) { .mc-rec-layout { grid-template-columns: 1fr; } } .mc-filters { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 22px; } @media (max-width: 900px) { .mc-filters { position: static; } } .mc-filter-group-title { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); margin-bottom: 10px; font-weight: 600; } .mc-chips { display: flex; flex-wrap: wrap; gap: 8px; } .mc-chip { font-size: .8rem; padding: 6px 13px; border-radius: 999px; cursor: pointer; border: 1px solid var(--mud-palette-divider); background: transparent; color: var(--mud-palette-text-secondary); transition: all .15s ease; user-select: none; } .mc-chip:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-text-primary); } .mc-chip.on { background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); color: #fff; } .mc-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; } .mc-rec-card { border: 1px solid var(--mud-palette-divider); border-radius: 16px; overflow: hidden; background: var(--mud-palette-surface); cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; display: flex; flex-direction: column; } .mc-rec-card:hover { transform: translateY(-3px); border-color: var(--mud-palette-primary); box-shadow: 0 14px 30px -18px rgba(0,0,0,.6); } .mc-rec-thumb { height: 124px; position: relative; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; background: linear-gradient(135deg, rgba(226,112,58,.16), rgba(134,176,73,.12)); } .mc-rec-fav { position: absolute; top: 8px; right: 8px; } .mc-rec-time { position: absolute; bottom: 8px; left: 10px; font-size: .68rem; font-weight: 600; background: rgba(0,0,0,.45); color:#fff; padding: 2px 8px; border-radius: 999px; backdrop-filter: blur(3px); } .mc-rec-body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .mc-rec-cuisine { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--mud-palette-primary); font-weight: 700; } .mc-rec-title { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .95rem; line-height: 1.25; } .mc-rec-meta { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: .74rem; color: var(--mud-palette-text-secondary); padding-top: 6px; } .mc-rec-kcal { font-weight: 700; color: var(--mud-palette-text-primary); } .mc-rec-macros { display: flex; gap: 6px; } .mc-macro { font-size: .64rem; padding: 1px 6px; border-radius: 5px; background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary); font-weight: 600; } /* ── Groupe + chat (Slack/Discord) ── */ .mc-group-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: stretch; height: calc(100vh - 64px - 64px); min-height: 540px; } @media (max-width: 900px) { .mc-group-layout { grid-template-columns: 1fr; height: auto; } } .mc-members { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; } .mc-member { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px; transition: background .15s ease; } .mc-member:hover { background: var(--mud-palette-action-default-hover); } .mc-member-name { font-size: .88rem; font-weight: 500; } .mc-member-sub { font-size: .72rem; color: var(--mud-palette-text-secondary); } .mc-presence { width: 9px; height: 9px; border-radius: 50%; margin-left: auto; flex: none; } .mc-presence.on { background: var(--mud-palette-success); box-shadow: 0 0 0 3px rgba(111,167,111,.18); } .mc-presence.off { background: var(--mud-palette-text-disabled); } .mc-chat { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--mud-palette-divider); border-radius: 16px; background: var(--mud-palette-surface); overflow: hidden; } .mc-chat-head { padding: 14px 20px; border-bottom: 1px solid var(--mud-palette-divider); display: flex; align-items: center; gap: 12px; } .mc-chat-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 18px; } .mc-daysep { display: flex; align-items: center; gap: 12px; color: var(--mud-palette-text-secondary); font-size: .72rem; } .mc-daysep::before, .mc-daysep::after { content: ""; flex: 1; height: 1px; background: var(--mud-palette-divider); } .mc-msg { display: flex; gap: 12px; } .mc-msg.me { flex-direction: row-reverse; } .mc-msg-col { display: flex; flex-direction: column; gap: 3px; max-width: 72%; } .mc-msg.me .mc-msg-col { align-items: flex-end; } .mc-msg-meta { font-size: .72rem; color: var(--mud-palette-text-secondary); display: flex; gap: 8px; align-items: baseline; } .mc-bubble { padding: 9px 14px; border-radius: 14px; font-size: .9rem; line-height: 1.4; background: var(--mud-palette-action-default-hover); border-top-left-radius: 5px; } .mc-msg.me .mc-bubble { background: var(--mud-palette-primary); color: #fff; border-top-left-radius: 14px; border-top-right-radius: 5px; } .mc-bubble-card { padding: 0; overflow: hidden; } .mc-bubble-card-img { height: 120px; background: linear-gradient(135deg, rgba(226,112,58,.22), rgba(134,176,73,.16)); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; } .mc-bubble-card-body { padding: 10px 14px; } .mc-chat-input { padding: 14px 16px; border-top: 1px solid var(--mud-palette-divider); display: flex; align-items: center; gap: 10px; } .mc-chat-textbox { flex: 1; background: var(--mud-palette-action-default-hover); border: 1px solid var(--mud-palette-divider); border-radius: 12px; padding: 10px 14px; color: var(--mud-palette-text-primary); font-size: .9rem; outline: none; } .mc-chat-textbox:focus { border-color: var(--mud-palette-primary); } .mc-chat-textbox:disabled { opacity: .6; } /* ── Chat temps réel (layout type Discord/Slack) ── */ .mc-chat-shell { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: stretch; height: calc(100vh - 64px - 96px); min-height: 520px; position: relative; } .mc-chat-aside { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--mud-palette-divider); border-radius: 16px; background: var(--mud-palette-surface); overflow: hidden; } .mc-chat-aside-head { padding: 14px 16px; border-bottom: 1px solid var(--mud-palette-divider); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); display: flex; align-items: center; justify-content: space-between; } .mc-chat-aside .mc-members { padding: 8px; } .mc-aside-close { display: none; background: none; border: none; color: var(--mud-palette-text-secondary); font-size: 1rem; cursor: pointer; } .mc-chat-scrim { display: none; } .mc-members-toggle { display: none; background: var(--mud-palette-action-default-hover); border: 1px solid var(--mud-palette-divider); border-radius: 10px; width: 40px; height: 40px; font-size: 1.05rem; cursor: pointer; } .mc-ava { width: 34px; height: 34px; flex: none; border-radius: 50%; color: #fff; font-weight: 600; font-size: .9rem; display: flex; align-items: center; justify-content: center; } .mc-ava.sm { width: 30px; height: 30px; font-size: .82rem; } .mc-conn { width: 9px; height: 9px; border-radius: 50%; background: var(--mud-palette-warning); transition: background .2s ease; } .mc-conn.ok { background: var(--mud-palette-success); } .mc-chat-empty { margin: auto; color: var(--mud-palette-text-secondary); font-size: .88rem; text-align: center; } .mc-send { flex: none; width: 42px; height: 42px; border-radius: 12px; border: none; background: var(--mud-palette-primary); color: #fff; font-size: 1rem; cursor: pointer; transition: filter .15s ease; } .mc-send:hover:not(:disabled) { filter: brightness(1.08); } .mc-send:disabled { opacity: .5; cursor: default; } .mc-typing { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--mud-palette-text-secondary); padding-left: 4px; } .mc-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--mud-palette-text-secondary); animation: mc-bounce 1.2s infinite ease-in-out; } .mc-typing span:nth-child(2) { animation-delay: .15s; } .mc-typing span:nth-child(3) { animation-delay: .3s; } @keyframes mc-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } } /* Mobile : membres masqués par défaut, accessibles via le bouton 👥 (overlay slide-in) */ @media (max-width: 768px) { .mc-chat-shell { grid-template-columns: 1fr; height: calc(100vh - 64px - 80px); } .mc-members-toggle { display: inline-flex; align-items: center; justify-content: center; } .mc-chat-aside { position: absolute; top: 0; left: 0; bottom: 0; width: 78%; max-width: 300px; z-index: 30; transform: translateX(-105%); transition: transform .25s ease; box-shadow: 0 8px 40px rgba(0,0,0,.4); } .is-members-open .mc-chat-aside { transform: translateX(0); } .mc-aside-close { display: block; } .is-members-open .mc-chat-scrim { display: block; position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.5); } } /* ── Badges nutritionnels (recommandations médicales) ── */ .mc-nutri-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; } .mc-nutri-badge { font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; color: var(--nb); background: color-mix(in srgb, var(--nb) 16%, transparent); border: 1px solid color-mix(in srgb, var(--nb) 38%, transparent); } .mc-nutri-badge.match { box-shadow: 0 0 0 2px color-mix(in srgb, var(--nb) 45%, transparent); } .mc-med-hint { font-size: .7rem; color: var(--mud-palette-text-secondary); margin-top: 6px; } .mc-need-tip { font-size: .82rem; background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, transparent); border-radius: 8px; padding: 9px 12px; } .mc-need-disclaimer { font-size: .72rem; color: var(--mud-palette-text-secondary); } /* Cartes enrichies dans le chat (perfs, planning) */ .mc-chatcard { background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-divider); border-radius: 14px; padding: 12px 14px; max-width: 340px; } .mc-chatcard-h { font-weight: 600; font-size: .85rem; margin-bottom: 8px; } .mc-chatcard-medals { display: flex; flex-wrap: wrap; gap: 6px; } .mc-chatcard-medal { font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; color: var(--m); background: color-mix(in srgb, var(--m) 16%, transparent); border: 1px solid color-mix(in srgb, var(--m) 40%, transparent); } .mc-chatcard-link { display: inline-block; margin-top: 8px; font-size: .8rem; font-weight: 600; color: var(--mud-palette-primary); text-decoration: none; } .mc-planprev { display: flex; gap: 5px; } .mc-planprev-day { flex: 1; text-align: center; background: var(--mud-palette-background); border-radius: 8px; padding: 6px 0; } .mc-planprev-dn { font-size: .68rem; color: var(--mud-palette-text-secondary); } .mc-planprev-dots { font-size: .9rem; font-weight: 700; color: var(--mud-palette-primary); } /* Page Mes performances */ .mc-perf-banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; margin-bottom: 16px; background: color-mix(in srgb, var(--m) 12%, transparent); border: 1px solid color-mix(in srgb, var(--m) 35%, transparent); } .mc-perf-banner-medal { font-size: 2rem; line-height: 1; } .mc-perf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .mc-perf-card { display: flex; flex-direction: column; gap: 10px; } .mc-perf-ex { font-weight: 600; font-size: .95rem; } .mc-perf-1rm { font-size: .8rem; color: var(--mud-palette-text-secondary); } .mc-perf-medal { font-size: 1.9rem; line-height: 1; filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--m) 50%, transparent)); } .mc-perf-spark { width: 100%; height: 34px; } .mc-perf-disclaimer { font-size: .72rem; color: var(--mud-palette-text-secondary); } @keyframes mc-celebrate { 0% { transform: scale(.6); opacity: 0; } 40% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .mc-celebrate { animation: mc-celebrate .5s ease; } /* Co-repas */ .mc-corepas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; } .mc-corepas-card { display: flex; flex-direction: column; gap: 10px; } .mc-corepas-meal { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mud-palette-text-secondary); } .mc-corepas-title { font-weight: 600; font-size: .95rem; } .mc-corepas-count { font-size: .8rem; font-weight: 600; flex: none; white-space: nowrap; } .mc-corepas-people { font-size: .78rem; display: flex; flex-direction: column; gap: 2px; } .mc-corepas-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .mc-corepas-mine { font-size: .78rem; color: var(--mud-palette-text-secondary); } .mc-corepas-in { font-size: .8rem; font-weight: 600; color: var(--mud-palette-success); } .mc-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 18px; margin-bottom: 8px; } .mc-shop-row { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; padding: 4px 0; border-bottom: 1px solid var(--mud-palette-divider); } /* Mon frigo */ .mc-fridge-add { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; } .mc-fridge-name { flex: 1 1 220px; min-width: 180px; } .mc-fridge-qty { width: 90px; flex: none; } .mc-fridge-unit { width: 120px; flex: none; } .mc-staples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .mc-staple-chip { font-size: .72rem; padding: 2px 9px; border-radius: 999px; background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-secondary); } .mc-fridge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .mc-fridge-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-divider); } .mc-fridge-item-name { font-size: .88rem; font-weight: 500; flex: 1; min-width: 0; } .mc-fridge-item-qty { font-size: .74rem; color: var(--mud-palette-text-secondary); } .mc-fridge-del { background: none; border: none; color: var(--mud-palette-text-secondary); cursor: pointer; font-size: .85rem; flex: none; border-radius: 6px; padding: 2px 6px; } .mc-fridge-del:hover { color: var(--mud-palette-error); background: var(--mud-palette-action-default-hover); } @media (max-width: 640px) { .mc-fridge-name, .mc-fridge-qty, .mc-fridge-unit { flex: 1 1 100%; width: 100%; } } .mc-feas-badge { font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; flex: none; color: var(--f); background: color-mix(in srgb, var(--f) 16%, transparent); border: 1px solid color-mix(in srgb, var(--f) 40%, transparent); } .mc-miss { margin-top: 8px; font-size: .76rem; } .mc-miss-label { color: var(--mud-palette-text-secondary); } .mc-miss-row { display: flex; gap: 6px; flex-wrap: wrap; } .mc-miss-name { color: var(--mud-palette-error); font-weight: 500; } .mc-miss-alt { color: var(--mud-palette-text-secondary); } .mc-ai-card { border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 40%, transparent); } .mc-ai-macros { font-size: .8rem; color: var(--mud-palette-text-secondary); } .mc-ai-list { margin: 4px 0 0; padding-left: 20px; font-size: .88rem; display: flex; flex-direction: column; gap: 3px; } .mc-ai-disclaimer { font-size: .72rem; color: var(--mud-palette-text-secondary); } /* Scrollbar discrète */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--mud-palette-divider); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--mud-palette-lines-inputs); } /* Bouton déconnexion (sidebar) */ .mc-logout { background: none; border: none; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--mud-palette-text-secondary); display: inline-flex; transition: color .15s ease, background .15s ease; } .mc-logout:hover { color: var(--mud-palette-primary); background: var(--mud-palette-action-default-hover); } /* Error UI Blazor */ #blazor-error-ui { background: var(--mud-palette-error); color: #fff; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: 0.6rem 1.25rem; position: fixed; width: 100%; z-index: 1500; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }