:root{--ease-snap: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--font-display: "Young Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
--font-body: "Commissioner", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
--font-numeric: "Commissioner", ui-monospace, "SF Mono", monospace;
--paper: oklch(0.985 0.006 75);
--paper-soft: oklch(0.948 0.008 75);
--paper-sheet: oklch(0.996 0.002 75);
--paper-deep: oklch(0.935 0.01 75);
--ink: oklch(0.22 0.016 75);
--ink-soft: oklch(0.36 0.014 72);
--ink-muted: oklch(0.46 0.012 70);
--ink-fade: oklch(0.54 0.01 70);
--accent: oklch(0.53 0.16 143);
--accent-deep: oklch(0.44 0.13 143);
--accent-bright: oklch(0.72 0.17 143);
--accent-tint: oklch(0.958 0.026 143);
--accent-tint2: oklch(0.91 0.05 143);
--accent-glow: 0 6px 28px oklch(0.59 0.16 143 / 0.26);
--danger: oklch(0.44 0.14 25);
--danger-deep: oklch(0.34 0.12 25);
--danger-bright: oklch(0.58 0.16 25);
--danger-tint: oklch(0.945 0.035 25);
--heart: oklch(0.58 0.19 15);
--heart-deep: oklch(0.52 0.2 15);
--danger-tint2: oklch(0.9 0.04 25);
--danger-glow: 0 6px 28px oklch(0.44 0.14 25 / 0.22);
--badge-warn-bg: oklch(0.85 0.10 80 / 0.18);
--badge-warn-ink: oklch(0.40 0.13 70);
--badge-neutral-bg: oklch(0.92 0.012 75);
--badge-neutral-ink: oklch(0.42 0.012 75);
--courge: oklch(0.62 0.14 68);
--courge-tint: oklch(0.955 0.038 68);
--moutarde: oklch(0.54 0.13 82);
--moutarde-tint: oklch(0.945 0.038 82);
--ardoise: oklch(0.52 0.1 220);
--ardoise-tint: oklch(0.945 0.03 220);
--paille: oklch(0.82 0.13 72);
--cream-fixed: oklch(0.992 0.006 85);
--cream-fixed-soft: oklch(0.992 0.006 85 / 0.82);
--cream-fixed-fade: oklch(0.992 0.006 85 / 0.55);
--bg: var(--paper);
--white: var(--paper-sheet);
--surface: var(--paper-soft);
--ink2: var(--ink-soft);
--muted: var(--ink-muted);
--muted2: var(--ink-fade);
--brand: var(--accent);
--brand-light: var(--accent-bright);
--brand-dark: var(--accent-deep);
--brand-pale: var(--accent-tint);
--brand-glow: var(--accent-glow);
--brick: var(--accent);
--brick-deep: var(--accent-deep);
--brick-bright: var(--accent-bright);
--brick-tint: var(--accent-tint);
--brick-tint2: var(--accent-tint2);
--brick-glow: var(--accent-glow);
--canneberge: var(--danger);
--canneberge-tint: var(--danger-tint);
--labrador: var(--accent);
--labrador-deep: var(--accent-deep);
--labrador-bright: var(--accent-bright);
--labrador-tint: var(--accent-tint);
--labrador-tint2: var(--accent-tint2);
--labrador-glow: var(--accent-glow);
--oxblood: var(--danger);
--oxblood-deep: var(--danger-deep);
--oxblood-bright: var(--danger-bright);
--oxblood-tint: var(--danger-tint);
--oxblood-tint2: var(--danger-tint2);
--oxblood-glow: var(--danger-glow);
--orange: var(--accent);
--orange-pale: var(--accent-tint);
--green: var(--accent);
--green-pale: var(--accent-tint);
--red: var(--danger);
--amber: var(--courge);
--amber-pale: var(--accent-tint);
--blue: var(--ardoise);
--border: oklch(0.82 0.018 75);
--border2: oklch(0.88 0.014 75);
--shadow: 0 1px 2px oklch(0.22 0.016 75 / 0.08), 0 1px 3px oklch(0.22 0.016 75 / 0.09);
--shadow-md: 0 6px 20px oklch(0.22 0.016 75 / 0.12), 0 2px 6px oklch(0.22 0.016 75 / 0.08);
--shadow-lg: 0 18px 48px oklch(0.22 0.016 75 / 0.16), 0 4px 12px oklch(0.22 0.016 75 / 0.09);
--radius-sm: 10px;
--radius: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px}
*{margin: 0;
padding: 0;
box-sizing: border-box}
.sr-only{position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -2px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0}
@media (prefers-reduced-motion: reduce){*,
*::before,
*::after{animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important}
}
html,
body{min-height: 100%}
body{font-family: var(--font-body);
font-feature-settings:
"ss01",
"cv11",
"tnum" 0;
font-size: 16px;
line-height: 1.55;
background: var(--paper);
color: var(--ink);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility}
a{text-decoration: none;
color: inherit}
.num,
.fb-amount,
.kpi-val,
.sc-pct,
.cmp-v,
.fb-sub strong,
.rc-total,
.mockup-budget-amount,
.ri-price,
.si-p,
.plan-price{font-variant-numeric: tabular-nums;
font-feature-settings:
"tnum" 1,
"lnum" 1}
::-webkit-scrollbar{width: 6px;
height: 6px}
::-webkit-scrollbar-track{background: transparent}
::-webkit-scrollbar-thumb{background: var(--border);
border-radius: 3px}
@media (hover: hover) and (pointer: fine){::-webkit-scrollbar-thumb:hover{background: var(--ink-fade)}
}
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress{accent-color: var(--brand-dark, var(--brand))}
.app-layout{display: flex;
min-height: 100vh;
min-height: 100dvh}
.sidebar{width: 240px;
flex-shrink: 0;
background: var(--paper-sheet);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
border-right: 1px solid var(--border)}
.sidebar .nav{flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding-bottom: 8px;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent}
.sidebar .nav::-webkit-scrollbar{width: 4px}
.sidebar .nav::-webkit-scrollbar-thumb{background: var(--border);
border-radius: 4px}
.sidebar .nav::-webkit-scrollbar-track{background: transparent}
.sidebar::after{content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
background: transparent}
.logo-zone{padding: 20px 20px 16px;
border-bottom: 1px solid var(--border)}
.logo-mark{display: flex;
align-items: center;
gap: 8px}
.logo-sq{width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: var(--accent, var(--brand));
display: flex;
align-items: center;
justify-content: center;
font-size: 19px}
.logo-img{filter: drop-shadow(0 2px 6px oklch(0.59 0.16 143 / 0.32))}
.logo-txt{font-family: var(--font-display);
font-size: 19px;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.5px;
white-space: nowrap}
.logo-txt em{color: var(--brand);
font-style: normal}
img.brand-e{display: inline-block;
height: 1.08em;
width: auto;
max-width: none;
vertical-align: -0.1em;
color: var(--brand);
margin: 0 0.01em;
flex-shrink: 0}
.logo-sub{font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--muted);
margin-top: 4px}
.pwa-install-btn{display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 8px 12px;
border-radius: 999px;
background: var(--brand);
color: var(--cream-fixed);
border: none;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
transition:
transform 0.15s ease,
background 0.15s ease}
@media (hover: hover) and (pointer: fine){.pwa-install-btn:hover{background: oklch(0.4 0.1 158);
transform: translateY(-1px)}
}
.pwa-install-btn[hidden]{display: none}
.weather-strip{margin: 16px 16px 0;
padding: 8px 16px;
border-radius: var(--radius);
background: var(--brand-pale);
border: 1px solid oklch(0.59 0.16 143 / 0.14);
display: flex;
align-items: center;
gap: 8px}
.w-icon{font-size: 23px}
.w-temp{font-size: 13px;
font-weight: 700;
color: var(--ink)}
.w-desc{font-size: 12px;
color: var(--ink-soft)}
.w-ai{font-size: 12px;
color: var(--brand-dark);
margin-top: 2px;
font-weight: 500}
.nav{flex: 1;
padding: 12px 0;
overflow-y: auto}
.nav-sec{font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--muted2);
padding: 16px 20px 4px;
font-weight: 600}
.ni{display: flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
margin: 2px 8px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
color: var(--muted);
cursor: pointer;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border-left: none}
@media (hover: hover) and (pointer: fine){.ni:hover{color: var(--ink);
background: var(--bg)}
}
.ni.on{color: var(--brand-dark);
background: var(--brand-pale);
font-weight: 600}
.nico{width: 16px;
text-align: center;
color: var(--ink-fade);
font-size: 19px;
line-height: 1;
transition:
color 0.2s,
transform 0.2s;
flex-shrink: 0}
.ni.on .nico{color: var(--brand-dark);
transform: scale(1.4)}
@media (hover: hover) and (pointer: fine){.ni:hover .nico{color: var(--ink-muted)}
}
.nbadge{margin-left: auto;
font-size: 12px;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px}
.nb-r{background: oklch(0.44 0.14 25 / 0.14);
color: var(--red);
border: 1px solid oklch(0.44 0.14 25 / 0.22)}
.nb-a{background: oklch(0.62 0.14 68 / 0.14);
color: var(--amber);
border: 1px solid oklch(0.62 0.14 68 / 0.22)}
.nav-group-toggle{display: flex;
align-items: center;
justify-content: space-between;
width: calc(100% - 16px);
margin: 8px 8px 2px;
padding: 8px 16px;
border-radius: var(--radius-sm);
font-size: 12px;
letter-spacing: 1.8px;
text-transform: uppercase;
font-weight: 700;
color: var(--ink-muted);
background: none;
border: none;
cursor: pointer;
transition:
color 0.2s,
background 0.2s;
font-family: var(--font-body)}
@media (hover: hover) and (pointer: fine){.nav-group-toggle:hover{color: var(--ink);
background: var(--bg)}
}
.nav-group-toggle.is-open{color: var(--brand-dark);
background: var(--accent-tint)}
.nav-group-chevron{font-size: 15px;
font-weight: 400;
line-height: 1;
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: var(--ink-fade)}
.nav-group-toggle.is-open .nav-group-chevron{transform: rotate(90deg);
color: var(--brand-dark)}
.nav-group{display: grid;
grid-template-rows: 0fr;
opacity: 0;
overflow: hidden;
transition:
grid-template-rows 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.25s ease;
border-left: 1px solid var(--border);
margin-left: 24px}
.nav-group > *{min-height: 0}
.nav-group.is-open{grid-template-rows: 1fr;
opacity: 1}
.nav-group .ni{padding-left: 16px;
margin-left: 0}
.urgence-btn{margin: 8px 12px 16px;
padding: 12px 16px;
border-radius: var(--radius);
background: var(--accent);
display: flex;
align-items: center;
gap: 8px;
color: var(--cream-fixed);
font-size: 13px;
font-weight: 700;
font-family: var(--font-body);
transition:
background 0.15s ease,
transform 0.15s ease}
@media (hover: hover) and (pointer: fine){.urgence-btn:hover{background: var(--accent-deep);
transform: translateY(-1px)}
}
.ub-dot{width: 8px;
height: 8px;
border-radius: 50%;
background: var(--paper-sheet);
animation: ubpulse 1.5s infinite}
@keyframes ubpulse{0%,
100%{opacity: 1;
transform: scale(1)}
50%{opacity: 0.6;
transform: scale(1.3)}
}
.sidebar-mode-gm-form{margin: 12px 16px 8px}
.sidebar-mode-gm-toggle{display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 44px;
padding: 8px 16px;
background: transparent;
border: 1px solid var(--border, oklch(0.88 0.02 75));
border-radius: 10px;
cursor: pointer;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--ink-soft);
text-align: left;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease}
@media (hover: hover) and (pointer: fine){.sidebar-mode-gm-toggle:hover,
.sidebar-mode-gm-toggle:focus-visible{background: var(--paper-soft, var(--paper));
border-color: color-mix(in oklch, var(--brand) 30%, var(--border));
outline: none}
}
.sidebar-mode-gm-toggle:focus-visible{box-shadow:
0 0 0 2px var(--brand-dark, var(--brand)),
0 0 0 4px var(--paper)}
.sidebar-mode-gm-toggle.is-on{background: var(--accent-tint, color-mix(in oklch, var(--brand) 12%, var(--paper)));
border-color: color-mix(in oklch, var(--brand) 40%, transparent);
color: var(--brand-dark, var(--brand));
font-weight: 600}
.sidebar-mode-gm-dot{flex: 0 0 auto;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--ink-fade);
transition: background 0.15s ease}
.sidebar-mode-gm-toggle.is-on .sidebar-mode-gm-dot{background: var(--brand-dark, var(--brand));
box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 25%, transparent)}
.sidebar-mode-gm-label{flex: 1}
.sidebar-mode-gm-state{font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.7}
.sidebar-user{padding: 16px 20px;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 8px}
.uav{width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand), var(--brand-light));
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
color: var(--cream-fixed)}
.uname{font-size: 13px;
font-weight: 600;
color: var(--ink)}
.uplan{font-size: 12px;
color: var(--brand);
font-weight: 500}
.main{flex: 1;
display: flex;
flex-direction: column;
background: var(--bg)}
.topbar{background: var(--paper-sheet);
border-bottom: 1px solid var(--border);
padding: 12px 28px;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0}
.tb-left{display: flex;
align-items: center;
gap: 16px}
.ptitle{font-family: var(--font-display);
font-size: 19px;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.2px}
.live-pill{display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 20px;
background: var(--brand-pale);
border: 1px solid oklch(0.59 0.16 143 / 0.16);
font-size: 12px;
font-weight: 600;
color: var(--brand-dark)}
.ldot{width: 5px;
height: 5px;
border-radius: 50%;
background: var(--brand);
animation: lpulse 2s infinite}
@keyframes lpulse{0%,
100%{opacity: 1}
50%{opacity: 0.4}
}
.tb-right{display: flex;
gap: 8px;
align-items: center}
.btn-main{padding: 8px 20px;
border-radius: var(--radius-sm);
border: none;
cursor: pointer;
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: -0.2px;
background: var(--accent, var(--brand));
color: var(--cream-fixed);
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: inset 0 -1px 0 oklch(0.44 0.13 143 / 0.35)}
@media (hover: hover) and (pointer: fine){.btn-main:hover{background: var(--brand-dark, var(--accent))}
}
.btn-main:active{transform: translateY(1px)}
.btn-main--hero,
.dash-cta-primary{box-shadow: var(--brand-glow)}
.btn-main.is-loading,
.btn-sec.is-loading{opacity: 0.7;
cursor: progress;
pointer-events: none;
position: relative;
padding-left: 36px}
.btn-main.is-loading::before,
.btn-sec.is-loading::before{content: "";
position: absolute;
left: 14px;
top: 50%;
width: 14px;
height: 14px;
margin-top: -8px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: btn-spin 0.7s linear infinite}
@keyframes btn-spin{to{transform: rotate(360deg)}
}
@media (prefers-reduced-motion: reduce){.btn-main.is-loading::before,
.btn-sec.is-loading::before{animation: none}
}
.btn-sec{border: none;
padding: 8px 16px;
border-radius: var(--radius-sm);
background: var(--paper-soft);
color: var(--ink2);
font-size: 13px;
font-family: var(--font-body);
cursor: pointer;
transition:
transform 0.18s,
opacity 0.18s,
color 0.18s,
background 0.18s,
box-shadow 0.18s;
font-weight: 600}
@media (hover: hover) and (pointer: fine){.btn-sec:hover{background: var(--accent-tint);
color: var(--brand-dark)}
}
.btn-sec:active{transform: scale(0.98)}
.btn-full{width: 100%;
text-align: center;
display: block;
padding: 12px}
.flash{padding: 12px 28px;
font-size: 13px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
transition:
opacity 0.4s,
transform 0.4s}
.flash-close{background: none;
border: none;
cursor: pointer;
font-size: 19px;
line-height: 1;
color: inherit;
opacity: 0.5;
padding: 4px 8px;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center}
@media (hover: hover) and (pointer: fine){.flash-close:hover{opacity: 1}
}
.flash-success{background: oklch(0.59 0.16 143 / 0.12);
color: var(--brand-dark);
border-bottom: 1px solid oklch(0.59 0.16 143 / 0.16)}
.flash-error{background: oklch(0.44 0.14 25 / 0.1);
color: var(--red);
border-bottom: 1px solid oklch(0.44 0.14 25 / 0.18)}
.content{flex: 1;
padding: 24px 28px}
.content > *{animation: fadeUp 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}
@keyframes fadeUp{from{opacity: 0;
transform: translateY(8px)}
to{opacity: 1;
transform: translateY(0)}
}
.card{background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow);
margin-bottom: var(--space-md);
transition: border-color 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
@media (hover: hover) and (pointer: fine){.card:hover{border-color: var(--accent-tint2, color-mix(in oklch, var(--brand) 30%, var(--border)))}
}
.chd{display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px}
.ctitle{font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: var(--ink)}
.caction{font-size: 12px;
color: var(--brand);
cursor: pointer;
font-weight: 600}
.card--danger{border-color: color-mix(in oklch, var(--danger) 30%, transparent)}
.ctitle--danger{color: var(--danger)}
.cuisine-shell{max-width: 640px;
margin: 0 auto;
padding: 20px;
display: flex;
flex-direction: column;
min-height: calc(100vh - 120px)}
.cuisine-header{display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap}
.cuisine-header-title{min-width: 0;
flex: 1 1 auto}
.cuisine-header-actions{display: flex;
gap: 8px;
align-items: center;
flex-shrink: 0}
.cuisine-tts-btn,
.cuisine-quitter-btn{font-size: 13px;
padding: 12px 16px;
min-height: 44px;
display: inline-flex;
align-items: center;
gap: 8px}
.cuisine-tts-btn[aria-pressed="true"],
.cuisine-tts-btn.is-on{background: var(--brand);
color: var(--cream-fixed, #fff);
border-color: var(--brand)}
.cuisine-tts-btn:focus-visible,
.cuisine-quitter-btn:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px}
.cuisine-tts-icon{font-size: 15px;
line-height: 1}
.cuisine-end-icon{display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
color: var(--brand-dark, var(--brand))}
.cuisine-end-title{text-align: center;
margin: 0 0 8px}
.cuisine-end-lede{text-align: center;
color: var(--ink-muted);
margin: 0 0 24px;
font-size: 15px}
.cuisson-note-wrap{margin-top: 20px}
.cuisson-note-label{display: block;
font-size: 13px;
color: var(--ink-muted);
margin-bottom: 8px}
.cuisson-note-textarea{width: 100%;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 10px;
font-family: var(--font-body);
font-size: 13px;
line-height: 1.5;
resize: vertical;
min-height: 60px;
background: var(--paper-sheet);
color: var(--ink)}
.cuisson-note-textarea:focus{outline: 2px solid var(--brand);
outline-offset: 1px;
border-color: var(--brand)}
.cuisson-note-counter{display: block;
margin-top: 4px;
font-size: 12px;
color: var(--ink-muted);
text-align: right;
font-feature-settings: "tnum" 1}
.cuisson-note-counter.is-near-limit{color: var(--danger)}
.cuisine-end-actions{display: flex;
gap: 8px;
margin-top: 24px}
.cuisine-end-action{flex: 1;
text-align: center}
.visually-hidden{position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -2px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0}
.cuisine-eyebrow{font-size: 13px;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700}
.cuisine-step-counter{font-size: clamp(20px, 5vw, 32px);
font-weight: 900;
color: var(--ink);
margin-top: 4px;
line-height: 1.1}
.cuisine-progress{height: 6px;
background: var(--paper-soft);
border-radius: 3px;
overflow: hidden;
margin-bottom: 24px}
.cuisine-progress-bar{height: 100%;
background: var(--brand);
transform-origin: left center;
transform: scaleX(var(--progress, 0));
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform}
.cuisine-step{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 20px;
padding: 32px 28px;
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
box-shadow: var(--shadow)}
.cuisine-step-num{background: var(--brand);
color: var(--cream-fixed, #fff);
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 23px;
font-weight: 900;
flex-shrink: 0}
.cuisine-step-text{font-size: 19px;
line-height: 1.7;
color: var(--ink);
font-weight: 500}
.cuisine-timer{background: var(--accent-tint);
border-radius: 14px;
padding: 16px;
width: 100%;
text-align: center;
border: 1px solid color-mix(in oklch, var(--courge) 35%, transparent)}
.cuisine-timer-display{font-size: clamp(32px, 9vw, 56px);
font-weight: 900;
font-variant-numeric: tabular-nums;
color: var(--ink);
margin-bottom: 8px;
letter-spacing: 0.02em;
line-height: 1}
.cuisine-timer-controls{display: flex;
gap: 8px;
justify-content: center}
.cuisine-nav{display: flex;
gap: 8px;
margin-top: 16px}
.cuisine-nav button{flex: 1;
padding: 16px;
font-size: 15px}
.cuisine-end{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 20px;
padding: 32px 28px}
.cuisine-feedback{display: flex;
gap: 8px;
justify-content: center}
.feedback-btn{flex: 1;
padding: 16px 12px;
font-size: 15px;
border-radius: 14px;
border: 2px solid var(--border);
background: var(--paper-sheet);
cursor: pointer;
font-weight: 600;
transition:
transform 0.2s var(--ease-snap, ease),
border-color 0.15s ease,
background 0.15s ease,
box-shadow 0.2s ease}
.feedback-btn span{font-size: 12px;
display: block;
margin-top: 4px;
color: var(--ink-muted)}
@media (hover: hover) and (pointer: fine){.feedback-btn:hover{border-color: var(--accent-tint2, color-mix(in oklch, var(--brand) 35%, var(--border)))}
}
@media (hover: hover) and (pointer: fine){.feedback-yes:hover{border-color: var(--brand);
background: var(--accent-tint)}
}
@media (hover: hover) and (pointer: fine){.feedback-no:hover{border-color: var(--danger);
background: var(--danger-tint)}
}
@media (hover: hover) and (pointer: fine){.feedback-neutre:hover{border-color: var(--ink-muted);
background: var(--paper-soft)}
}
.feedback-btn.selected{background: var(--accent-tint);
border-color: var(--accent)}
@media (prefers-reduced-motion: reduce){.feedback-btn{transition: none}
@media (hover: hover) and (pointer: fine){.feedback-btn:hover{transform: none}
}
}
.fantome-banner{background: var(--paper-sheet);
border: 1px solid color-mix(in oklch, var(--brand) 16%, transparent);
border-radius: var(--radius-xl);
padding: 24px 32px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow)}
.fantome-banner::before{content: none}
.fb-inner{position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between}
.fb-eyebrow{font-size: 12px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--brand);
font-weight: 700;
margin-bottom: 8px}
.fb-main{display: flex;
align-items: baseline;
gap: 8px}
.fb-amount{font-family: var(--font-display);
font-size: 56px;
font-weight: 900;
color: var(--ink);
line-height: 1}
.fb-currency{font-size: 23px;
font-weight: 700;
color: var(--muted)}
.fb-sub{font-size: 13px;
color: var(--muted);
margin-top: 8px;
line-height: 1.6}
.fb-sub strong{color: var(--brand)}
.fb-tags{display: flex;
gap: 8px;
margin-top: 16px;
flex-wrap: wrap}
.ftag{font-size: 12px;
font-weight: 600;
padding: 4px 12px;
border-radius: 20px;
border: 1px solid var(--border);
color: var(--muted);
background: var(--bg)}
.fb-ring{position: relative;
flex-shrink: 0}
.fb-ring-center{position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center}
.fb-pct{font-family: var(--font-display);
font-size: 23px;
font-weight: 900;
color: var(--brand)}
.fb-plbl{font-size: 12px;
color: var(--muted);
letter-spacing: 1px;
text-transform: uppercase}
.kpi-strip{display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 16px}
.kpi{background: var(--paper);
border: 1px solid var(--border);
border-radius: 18px;
padding: 16px 16px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
transition:
transform 0.22s,
opacity 0.22s,
color 0.22s,
background 0.22s,
border-color 0.22s,
box-shadow 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
@media (hover: hover) and (pointer: fine){.kpi:hover{border-color: var(--accent-tint2, color-mix(in oklch, var(--brand) 30%, var(--border)))}
}
.kpi::after{content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
border-radius: 0 0 18px 18px}
.kpi.k1::after,
.kpi.k2::after,
.kpi.k3::after,
.kpi.k4::after{background: var(--accent)}
.kpi-ico{font-size: 19px;
margin-bottom: 8px}
.kpi-val{font-family: var(--font-display);
font-size: 23px;
font-weight: 900;
line-height: 1}
.kpi.k1 .kpi-val,
.kpi.k2 .kpi-val,
.kpi.k3 .kpi-val,
.kpi.k4 .kpi-val{color: var(--ink)}
.kpi-lbl{font-size: 12px;
color: var(--muted);
margin-top: 4px}
.kpi-delta{font-size: 12px;
color: var(--green);
margin-top: 4px;
font-weight: 600}
.dgrid{display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 16px}
.dgrid3{display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px}
.ri{display: flex;
align-items: center;
gap: 12px;
padding: 12px 12px;
border-radius: 12px;
background: var(--paper);
border: 1px solid var(--border2);
cursor: pointer;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s;
margin-bottom: 8px}
.ri:last-child{margin-bottom: 0}
@media (hover: hover) and (pointer: fine){.ri:hover{background: var(--brand-pale);
border-color: oklch(0.59 0.16 143 / 0.16)}
}
.ri-emo{width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: var(--bg);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 23px;
flex-shrink: 0}
.ri-name{font-size: 13px;
font-weight: 600;
color: var(--ink)}
.ri-detail{font-size: 12px;
color: var(--muted);
margin-top: 2px}
.ri-speed{font-size: 12px;
background: var(--green-pale);
color: var(--green);
padding: 2px 8px;
border-radius: 4px;
font-weight: 700;
margin-left: 4px}
.ri-price{font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: var(--brand);
margin-left: auto;
flex-shrink: 0}
.ri-price.free{color: var(--green)}
.si{display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: var(--radius-sm);
background: var(--paper);
border: 1px solid var(--border2);
margin-bottom: 8px;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
.si:last-child{margin-bottom: 0}
@media (hover: hover) and (pointer: fine){.si:hover{background: var(--brand-pale)}
}
.st{font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 4px;
flex-shrink: 0}
.st{background: var(--paper-soft);
color: var(--ink-soft);
border: 1px solid var(--border)}
.si-nom{flex: 1;
font-size: 13px;
color: var(--ink)}
.si-p{font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--green)}
.si-r{font-size: 12px;
color: var(--muted2);
text-decoration: line-through}
.si-pct{font-size: 12px;
font-weight: 700;
background: var(--green-pale);
color: var(--green);
padding: 2px 4px;
border-radius: 3px}
.pred-card{background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow)}
.pred-card::before{content: none}
.pred-title{font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--brand);
margin-bottom: 8px;
font-weight: 700}
.pred-item{display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
color: var(--ink)}
.pred-item:last-child{border: none}
.pred-ico{font-size: 16px;
width: 20px;
text-align: center}
.pred-info{flex: 1}
.pred-prod{color: var(--ink);
font-weight: 500}
.pred-timing{font-size: 12px;
color: var(--muted);
margin-top: 2px}
.pred-action{font-size: 12px;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px}
.pred-action.wait{background: var(--brand-pale);
color: var(--brand-dark)}
.pred-action.buy{background: var(--green-pale);
color: var(--brand-dark)}
.detective-alert{background: oklch(0.62 0.14 68 / 0.1);
border: 1px solid oklch(0.62 0.14 68 / 0.22);
border-radius: var(--radius);
padding: 16px 16px;
display: flex;
align-items: flex-start;
gap: 12px}
.pantry-grid{display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px}
.pantry-item{background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
text-align: center;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
@media (hover: hover) and (pointer: fine){.pantry-item:hover{transform: translateY(-2px);
box-shadow: var(--shadow-md)}
}
.pi-emo{font-size: 30px;
margin-bottom: 8px}
.pi-name{font-size: 13px;
font-weight: 600;
color: var(--ink)}
.pi-qty{font-size: 12px;
color: var(--muted);
margin-top: 2px}
.pi-expire{font-size: 12px;
font-weight: 700;
margin-top: 8px;
padding: 2px 8px;
border-radius: 10px;
display: inline-block}
.exp-ok{background: var(--green-pale);
color: var(--green)}
.exp-warn{background: oklch(0.62 0.14 68 / 0.12);
color: var(--amber)}
.exp-urgent{background: oklch(0.44 0.14 25 / 0.1);
color: var(--red)}
.badges-grid{display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px}
.bdg{background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px;
text-align: center;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s;
box-shadow: var(--shadow)}
@media (hover: hover) and (pointer: fine){.bdg:hover{transform: translateY(-2px);
box-shadow: var(--shadow-md)}
}
.bdg.locked{opacity: 0.3;
filter: grayscale(1)}
@media (hover: hover) and (pointer: fine){.bdg.locked:hover{transform: none;
box-shadow: var(--shadow)}
}
.bdg-ico{font-size: 23px;
margin-bottom: 8px}
.bdg-name{font-size: 13px;
font-weight: 700;
color: var(--ink)}
.bdg-desc{font-size: 12px;
color: var(--muted);
margin-top: 2px}
.day-strip{display: flex;
gap: 8px;
margin-bottom: 20px}
.dc{flex: 1;
padding: 8px 8px;
border-radius: 12px;
text-align: center;
cursor: pointer;
background: var(--paper);
border: 1px solid var(--border);
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s;
box-shadow: var(--shadow)}
@media (hover: hover) and (pointer: fine){.dc:hover{border-color: oklch(0.59 0.16 143 / 0.26)}
}
.dc.sel{background: var(--brand);
border-color: var(--brand);
box-shadow: 0 4px 16px oklch(0.59 0.16 143 / 0.28)}
.dn{font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--muted)}
.dd{font-family: var(--font-display);
font-size: 16px;
font-weight: 900;
color: var(--ink)}
.de{font-size: 16px;
margin-top: 2px}
.dc.sel .dn,
.dc.sel .dd{color: var(--cream-fixed)}
.menu-grid{display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 16px}
.recipe-panel{background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md)}
.recipe-alert-allergie{display: flex;
align-items: flex-start;
gap: 16px;
margin: 16px 0 24px;
padding: 16px 20px;
background: color-mix(in oklch, var(--danger, #c92a3e) 8%, var(--paper));
border: 1.5px solid color-mix(in oklch, var(--danger, #c92a3e) 50%, transparent);
border-radius: 12px}
.recipe-alert-allergie-icon{flex-shrink: 0;
font-size: 23px;
line-height: 1;
margin-top: 2px}
.recipe-alert-allergie-body{flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0}
.recipe-alert-allergie-title{font-family: var(--font-display, var(--font-body));
font-size: 19px;
font-weight: 400;
color: var(--danger, #c92a3e);
letter-spacing: -0.005em;
line-height: 1.3}
.recipe-alert-allergie-list{margin: 0;
padding-left: 16px;
font-size: 13px;
line-height: 1.55;
color: var(--ink)}
.recipe-alert-allergie-list li{margin-bottom: 4px}
.recipe-alert-allergie-list li:last-child{margin-bottom: 0}
.recipe-alert-allergie-list strong{color: var(--danger, #c92a3e)}
.recipe-alert-allergie-action{margin-top: 8px}
.recipe-alert-allergie-action .btn-main{background: var(--danger, #c92a3e)}
@media (hover: hover) and (pointer: fine){.recipe-alert-allergie-action .btn-main:hover{filter: brightness(1.08)}
}
.menu-day-allergie-flag{display: inline-block;
margin-top: 4px;
padding: 2px 8px;
background: color-mix(in oklch, var(--danger, #c92a3e) 12%, var(--paper));
border: 1px solid color-mix(in oklch, var(--danger, #c92a3e) 35%, transparent);
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: var(--danger, #c92a3e);
letter-spacing: 0}
.recipe-cover{height: 160px;
display: flex;
align-items: center;
justify-content: center;
font-size: 64px;
position: relative;
background: var(--paper-sheet);
border-top: 2px solid var(--brand)}
.recipe-cover-detail{min-height: 240px;
position: relative;
overflow: hidden}
.recipe-cover-detail::before{content: "É";
position: absolute;
right: clamp(-30px, -4vw, -12px);
bottom: clamp(-70px, -8vw, -30px);
font-family: var(--font-display);
font-style: italic;
font-size: clamp(220px, 36vw, 360px);
line-height: 0.85;
color: var(--brand);
opacity: 0.08;
pointer-events: none;
user-select: none;
letter-spacing: -0.04em;
z-index: 0}
.recipe-cover-emoji{font-size: 72px;
position: relative;
z-index: 1;
filter: drop-shadow(0 2px 6px oklch(0.2 0.02 110 / 0.2))}
.recipe-chip{position: absolute;
z-index: 2;
font-size: 12px;
font-weight: 700;
padding: 4px 12px;
border-radius: 980px;
background: var(--brand);
color: var(--cream-fixed);
letter-spacing: 0.02em}
.recipe-chip-meteo{top: 12px;
left: 12px;
background: var(--accent)}
.recipe-chip-pantry{bottom: 12px;
left: 12px;
background: var(--accent-deep)}
.recipe-chips{display: flex;
flex-wrap: wrap;
gap: var(--space-2xs) var(--space-xs);
margin: var(--space-xs) 0 var(--space-md)}
.recipe-chips .recipe-chip,
.recipe-chips .recipe-speed{position: static;
top: auto;
left: auto;
right: auto;
bottom: auto;
font-size: 13px;
padding: 8px 12px;
line-height: 1.3}
.recipe-price{font-family: var(--font-numeric);
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
font-feature-settings:
"tnum" 1,
"lnum" 1}
.recipe-price-solde{color: var(--accent)}
.recipe-price-est{color: var(--ink-muted);
font-weight: 600}
.recipe-price-tag{font-size: 12px;
color: var(--ink-fade);
font-weight: 600;
margin-left: 2px}
.recipe-section-h{margin: 24px 0 8px}
.recipe-tip-card{background: var(--accent-tint);
border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
border-radius: 14px;
padding: 16px}
.recipe-tip-list{margin: 0;
padding-left: 20px;
font-size: 13px;
line-height: 1.8;
color: var(--ink)}
.recipe-tip-list li{margin-bottom: 8px}
.recipe-tip-list li:last-child{margin-bottom: 0}
.recipe-nutri-grid{display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 8px}
.recipe-nutri-cell{background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 12px;
text-align: center}
.recipe-nutri-num{font-family: var(--font-display);
font-size: 23px;
font-weight: 400;
line-height: 1;
color: var(--ink);
font-variant-numeric: tabular-nums;
margin-bottom: 8px}
.recipe-nutri-unit{font-size: 13px;
color: var(--ink-muted);
margin-left: 2px}
.recipe-nutri-lbl{font-size: 12px;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600}
.recipe-sub-list{display: flex;
flex-direction: column;
gap: 8px}
.recipe-sub-row{background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 16px;
font-size: 13px;
line-height: 1.5}
.recipe-sub-row strong{color: var(--ink);
font-weight: 600}
.recipe-sub-arrow{color: var(--ink-muted);
margin: 0 8px}
.recipe-sub-alt{color: var(--ink-soft)}
.recipe-acc-list{display: flex;
flex-wrap: wrap;
gap: 8px}
.recipe-acc-pill{background: var(--accent-tint);
color: var(--accent-deep);
font-size: 13px;
padding: 8px 16px;
border-radius: 980px;
font-weight: 500}
.recipe-pantry-note{background: var(--accent-tint);
border: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
border-radius: 10px;
padding: 12px 16px;
font-size: 13px;
color: var(--accent-deep);
margin-top: 8px;
line-height: 1.5}
.recipe-pantry-note strong{color: var(--accent-deep);
font-weight: 700}
.recipe-badge{position: absolute;
top: 12px;
right: 12px;
font-size: 12px;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
background: var(--brand);
color: var(--cream-fixed)}
.recipe-speed{position: absolute;
top: 12px;
left: 12px;
font-size: 12px;
font-weight: 700;
padding: 4px 12px;
border-radius: 20px;
background: var(--green);
color: var(--cream-fixed)}
.recipe-body{padding: 16px}
.recipe-title{font-family: var(--font-display);
font-size: 19px;
font-weight: 900;
color: var(--ink);
margin-bottom: 8px;
line-height: 1.2}
.rmeta{display: flex;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
align-items: center}
.rm{font-size: 12px;
color: var(--muted)}
.rm strong{color: var(--ink);
font-weight: 600}
.rm-portions{display: inline-flex;
align-items: center;
gap: 8px}
.rm-portion-btn{width: 28px;
height: 28px;
min-width: 28px;
border: 1px solid var(--border);
background: var(--paper);
border-radius: 50%;
color: var(--ink);
font-size: 16px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background 0.12s,
border-color 0.12s;
-webkit-tap-highlight-color: transparent}
@media (hover: hover) and (pointer: fine){.rm-portion-btn:hover{background: var(--accent-tint);
border-color: var(--brand-dark)}
}
.rm-portion-btn:active{background: var(--brand-dark);
color: var(--paper)}
.rm-portion-btn:focus-visible{outline: none;
box-shadow: 0 0 0 3px rgba(26, 138, 74, 0.35)}
@media (max-width: 900px){.rm-portion-btn{width: 44px;
height: 44px;
min-width: 44px;
font-size: 19px}
}
.recipe-startat{font-size: 13px;
color: var(--ink2);
background: var(--accent-tint);
border: 1px solid rgba(26, 138, 74, 0.22);
padding: 8px 12px;
border-radius: 8px;
margin: 0 0 16px 0}
.recipe-startat strong{color: var(--brand-dark);
font-weight: 700}
.ing-subst-btn{background: transparent;
border: 0;
text-decoration: underline;
text-decoration-color: color-mix(in oklch, var(--ink-soft) 30%, transparent);
text-underline-offset: 3px;
color: var(--ink-muted);
padding-inline: 0;
color: var(--muted);
font-size: 12px;
padding: 2px 8px;
border-radius: 999px;
margin-left: 8px;
cursor: pointer;
font-family: inherit;
transition:
background 0.12s,
color 0.12s,
border-color 0.12s}
@media (hover: hover) and (pointer: fine){.ing-subst-btn:hover{background: var(--accent-tint);
color: var(--brand-dark);
border-color: var(--brand-dark);
border-style: solid}
}
.ing-subst-btn:disabled{opacity: 0.5;
cursor: wait}
.ing-subst-result{background: var(--paper-soft, var(--accent-tint));
border: 1px solid rgba(26, 138, 74, 0.22);
border-radius: 10px;
padding: 12px 16px;
margin: 4px 0 8px 0;
font-size: 13px;
color: var(--ink2);
animation: ing-subst-fade 0.18s ease-out}
@keyframes ing-subst-fade{from{opacity: 0;
transform: translateY(-4px)}
to{opacity: 1;
transform: translateY(0)}
}
.ing-subst-title{font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--brand-dark);
font-weight: 700;
margin-bottom: 8px}
.ing-subst-item{padding: 8px 0;
border-bottom: 1px solid rgba(26, 138, 74, 0.1)}
.ing-subst-item:last-child{border-bottom: none;
padding-bottom: 0}
.ing-subst-item strong{color: var(--ink);
font-weight: 700}
.ing-subst-prop{color: var(--muted);
font-size: 12px}
.ing-subst-note{font-size: 12px;
color: var(--muted);
margin-top: 4px;
line-height: 1.5}
.ing-subst-empty{font-size: 13px;
color: var(--muted);
margin: 0;
font-style: italic}
@media (max-width: 900px){.ing-subst-btn{padding: 8px 16px;
font-size: 13px;
min-height: 44px}
}
.essentiels-card{margin-top: 16px}
.essentiels-intro{font-size: 13px;
color: var(--muted);
margin: 4px 0 16px 0;
line-height: 1.5}
.essentiels-list{display: flex;
flex-direction: column;
gap: 8px}
.essentiels-item{display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 8px 12px;
background: var(--paper-soft, var(--accent-tint));
border: 1px solid var(--border);
border-radius: 10px}
.essentiels-meta{display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1}
.essentiels-meta strong{color: var(--ink);
font-weight: 700;
font-size: 13px}
.essentiels-freq{font-size: 12px;
color: var(--muted)}
.essentiels-form{margin: 0}
.essentiels-btn{padding: 12px 16px;
font-size: 13px;
min-height: 44px;
white-space: nowrap}
.extras-card{margin-top: 16px}
.extras-list{display: flex;
flex-direction: column;
gap: 4px}
@media (max-width: 900px){.essentiels-item{flex-direction: column;
align-items: stretch}
.essentiels-btn{width: 100%;
min-height: 44px}
}
.ev-bundle-credit{background: var(--accent-tint);
border: 1px solid rgba(26, 138, 74, 0.22);
padding: 8px 16px;
border-radius: 8px;
margin: 8px 0;
font-size: 13px;
color: var(--ink2)}
.ev-bundle-credit strong{color: var(--brand-dark);
font-weight: 700}
.ev-bundle-card{background: var(--paper);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px 28px;
box-shadow: var(--shadow);
text-align: center}
.ev-bundle-eyebrow{font-family: var(--font-display);
font-size: 12px;
letter-spacing: 2.4px;
text-transform: uppercase;
color: var(--brand-dark);
font-weight: 700;
margin-bottom: 8px}
.ev-bundle-title{font-family: var(--font-display);
font-size: 23px;
margin: 0 0 12px 0;
color: var(--ink);
font-weight: 800;
line-height: 1.25}
.ev-bundle-title strong{color: var(--brand-dark);
font-weight: 900}
.ev-bundle-sub{font-size: 15px;
color: var(--ink2);
line-height: 1.65;
max-width: 540px;
margin: 0 auto 16px auto}
.ev-bundle-fineprint{font-size: 12px;
color: var(--muted);
margin: 12px 0 0 0}
.ev-templates{background: var(--paper);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px 24px;
margin: 16px 0 28px 0}
.ev-templates-title{font-family: var(--font-display);
font-size: 19px;
font-weight: 800;
color: var(--ink);
margin: 0 0 4px 0}
.ev-templates-sub{font-size: 13px;
color: var(--muted);
margin: 0 0 16px 0}
.ev-templates-grid{display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px}
.ev-template-card{display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 8px;
background: var(--paper-soft, var(--accent-tint));
border: 1px solid var(--border);
border-radius: 12px;
font-family: inherit;
cursor: pointer;
text-align: center;
transition:
background 0.15s,
border-color 0.15s,
transform 0.12s;
min-height: 92px}
.ev-template-card:nth-child(4n + 1){background: var(--accent-tint)}
.ev-template-card:nth-child(4n + 2){background: var(--paper-soft)}
.ev-template-card:nth-child(4n + 3){background: var(--paper-sheet);
border-color: var(--brand);
border-style: dashed}
.ev-template-card:nth-child(4n + 4){background: var(--accent-tint);
border-color: color-mix(in oklch, var(--brand) 40%, var(--border))}
@media (hover: hover) and (pointer: fine){.ev-template-card:hover{background: var(--accent-tint);
border-color: var(--brand-dark);
transform: translateY(-1px)}
}
.ev-template-card.is-selected{background: var(--brand-dark);
color: var(--paper);
border-color: var(--brand-dark)}
.ev-template-card.is-selected .ev-template-titre{color: var(--paper)}
.ev-template-icon{font-size: 23px;
line-height: 1}
.ev-template-titre{font-size: 13px;
font-weight: 700;
color: var(--ink);
line-height: 1.3}
@media (max-width: 900px){.ev-templates-grid{grid-template-columns: repeat(2, 1fr)}
.ev-template-card{min-height: 100px}
}
.ev-share-allergies{margin: 16px 0 28px 0;
background: var(--paper-soft, var(--accent-tint));
border: 1px solid var(--border);
border-radius: 12px}
.ev-share-summary{list-style: none;
cursor: pointer;
padding: 16px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 15px;
color: var(--ink);
font-weight: 600;
-webkit-tap-highlight-color: transparent}
.ev-share-summary::-webkit-details-marker{display: none}
.ev-share-summary-cta{font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--brand-dark);
font-weight: 700}
.ev-share-allergies[open] .ev-share-summary{border-bottom: 1px solid var(--border)}
.ev-share-body{padding: 16px 16px 16px 16px}
.ev-share-intro{font-size: 13px;
color: var(--ink2);
margin: 0 0 12px 0;
line-height: 1.6}
.ev-share-link-wrap{display: flex;
gap: 8px;
margin: 12px 0}
.ev-share-link-wrap input{flex: 1;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--paper);
font-family: ui-monospace, monospace;
font-size: 13px;
color: var(--ink);
min-height: 44px}
.ev-share-link-wrap button{white-space: nowrap;
min-height: 44px}
.ev-share-status{background: var(--accent-tint);
border: 1px solid rgba(26, 138, 74, 0.22);
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
color: var(--ink2);
margin: 8px 0 0 0}
.ev-share-status strong{color: var(--brand-dark)}
@media (max-width: 640px){.ev-share-link-wrap{flex-direction: column}
.ev-share-link-wrap button{width: 100%}
}
.ing-row{display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid var(--border2);
font-size: 13px}
.ing-row:last-child{border: none}
.pantry-tag{font-size: 12px;
background: var(--green-pale);
color: var(--green);
padding: 2px 8px;
border-radius: 4px;
font-weight: 700}
.expire-tag{font-size: 12px;
background: oklch(0.44 0.14 25 / 0.1);
color: var(--red);
padding: 2px 8px;
border-radius: 4px;
font-weight: 700}
.lp{background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 16px;
box-shadow: var(--shadow)}
.ls{margin-bottom: 16px}
.ls-title{font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--muted);
margin-bottom: 8px;
font-weight: 600}
.li{display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid var(--border2);
font-size: 13px}
.li:last-child{border: none}
.chk{width: 18px;
height: 18px;
border-radius: 5px;
border: 2px solid var(--muted2);
flex-shrink: 0;
cursor: pointer;
transition:
transform 0.18s,
opacity 0.18s,
color 0.18s,
background 0.18s,
border-color 0.18s,
box-shadow 0.18s;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px}
.chk.on{background: var(--brand);
border-color: var(--brand);
color: var(--cream-fixed)}
.li-n{flex: 1;
color: var(--ink)}
.li-n.done{text-decoration: line-through;
color: var(--muted2)}
.li-q{font-size: 12px;
color: var(--muted)}
.urgence-hero{background: linear-gradient(135deg, var(--danger), oklch(0.58 0.16 25));
border-radius: var(--radius-xl);
padding: 24px 28px;
margin-bottom: 16px;
color: var(--cream-fixed);
box-shadow: 0 8px 32px oklch(0.44 0.14 25 / 0.25)}
.uh-top{display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px}
.uh-clock{font-size: 30px}
.urgence-grid{display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px}
.ug-card{background: color-mix(in oklch, var(--cream-fixed) 15%, transparent);
border-radius: var(--radius);
padding: 16px;
border: 1px solid color-mix(in oklch, var(--cream-fixed) 20%, transparent);
cursor: pointer;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
@media (hover: hover) and (pointer: fine){.ug-card:hover{background: color-mix(in oklch, var(--cream-fixed) 25%, transparent);
transform: translateY(-2px)}
}
.ug-emo{font-size: 30px;
margin-bottom: 8px}
.ug-name{font-size: 13px;
font-weight: 700;
color: var(--cream-fixed);
margin-bottom: 4px}
.ug-time{font-size: 12px;
color: var(--cream-fixed-soft)}
.ug-badge{display: inline-block;
margin-top: 8px;
font-size: 12px;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
background: color-mix(in oklch, var(--cream-fixed) 20%, transparent);
color: var(--cream-fixed)}
.ug-expire{color: var(--paille);
font-size: 12px;
margin-top: 4px;
font-weight: 600}
.scan-zone{border: 2px dashed oklch(0.59 0.16 143 / 0.28);
border-radius: var(--radius-lg);
padding: 48px;
text-align: center;
background: var(--brand-pale);
cursor: pointer;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s;
margin-bottom: 20px}
@media (hover: hover) and (pointer: fine){.scan-zone:hover{border-color: var(--brand);
background: oklch(0.59 0.16 143 / 0.12)}
}
.sz-ico{font-size: 48px;
margin-bottom: 12px}
.sz-title{font-family: var(--font-display);
font-size: 19px;
font-weight: 900;
color: var(--ink);
margin-bottom: 4px}
.sz-sub{font-size: 13px;
color: var(--muted)}
.rc{background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: var(--shadow-md)}
.rc-hd{display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px}
.rc-store{font-family: var(--font-display);
font-size: 19px;
font-weight: 900;
color: var(--ink)}
.rc-date{font-size: 12px;
color: var(--muted);
margin-top: 2px}
.rc-total{font-family: var(--font-display);
font-size: 30px;
font-weight: 900;
color: var(--ink);
text-align: right}
.rc-save{font-size: 13px;
color: var(--green);
margin-top: 2px;
font-weight: 700}
.cmp-row{display: flex;
gap: 8px;
margin-bottom: 16px}
.cmp{flex: 1;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
text-align: center}
.cmp-v{font-family: var(--font-display);
font-size: 23px;
font-weight: 900}
.cmp-v.g{color: var(--green)}
.cmp-v.r{color: var(--red)}
.cmp-l{font-size: 12px;
color: var(--muted);
margin-top: 4px}
.ai-insight{background: var(--brand-pale);
border: 1px solid oklch(0.59 0.16 143 / 0.14);
border-radius: 12px;
padding: 16px}
.ai-t{font-size: 13px;
font-weight: 700;
color: var(--brand);
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 8px}
.ai-b{font-size: 13px;
color: var(--ink2);
line-height: 1.6}
.vote-banner{background: oklch(0.62 0.14 68 / 0.1);
border: 1px solid oklch(0.62 0.14 68 / 0.18);
border-radius: var(--radius);
padding: 16px 16px;
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px}
.vc{background: var(--paper);
border: 1px solid var(--border);
border-radius: 16px;
padding: 16px;
margin-bottom: 12px;
box-shadow: var(--shadow);
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
@media (hover: hover) and (pointer: fine){.vc:hover{box-shadow: var(--shadow-md)}
}
.vt{display: flex;
align-items: center;
gap: 16px;
margin-bottom: 12px}
.ve{font-size: 38px}
.vn{font-family: var(--font-display);
font-size: 15px;
font-weight: 900;
color: var(--ink)}
.vm{font-size: 12px;
color: var(--muted);
margin-top: 2px}
.vmembers{display: flex;
gap: 8px;
margin-bottom: 12px}
.mv{display: flex;
align-items: center;
gap: 4px}
.mav{width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: var(--cream-fixed);
background: var(--brand)}
.mvi{font-size: 12px}
.vbar{height: 5px;
background: var(--bg);
border-radius: 3px;
overflow: hidden;
border: 1px solid var(--border)}
.vfill{height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, var(--brand), var(--brand-light))}
.vfill.low{background: linear-gradient(90deg, var(--danger), oklch(0.58 0.16 25))}
.vscores{display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--muted);
margin-top: 4px}
.fantome-big{background: var(--paper-sheet);
border: 1px solid oklch(0.59 0.16 143 / 0.16);
border-radius: var(--radius-xl);
padding: 28px 32px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-md)}
.fantome-big::before{content: none}
.chart-card{background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
margin-bottom: 16px;
box-shadow: var(--shadow)}
.bars-wrap{display: flex;
align-items: flex-end;
gap: 8px;
height: 90px;
margin-top: 16px}
.bc{flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px}
.b-track{position: relative;
width: 100%}
.b-bud{width: 100%;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 5px 5px 0 0}
.b-real{position: absolute;
bottom: 0;
left: 0;
right: 0;
border-radius: 5px 5px 0 0;
background: linear-gradient(180deg, var(--brand), var(--brand-light))}
.b-lbl{font-size: 12px;
color: var(--muted2)}
.pill{display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600}
.p-orange{background: var(--brand-pale);
border: 1px solid oklch(0.59 0.16 143 / 0.16);
color: var(--brand)}
.p-green{background: var(--green-pale);
border: 1px solid oklch(0.32 0.09 158 / 0.18);
color: var(--green)}
.p-amber{background: oklch(0.62 0.14 68 / 0.1);
border: 1px solid oklch(0.62 0.14 68 / 0.18);
color: var(--amber)}
.p-red{background: oklch(0.44 0.14 25 / 0.1);
border: 1px solid oklch(0.44 0.14 25 / 0.18);
color: var(--red)}
input,
select,
textarea{background: var(--paper);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
padding: 8px 16px;
font-size: 15px;
color: var(--ink);
font-family: var(--font-body);
transition:
border-color 0.18s,
box-shadow 0.18s;
width: 100%}
input:focus,
select:focus,
textarea:focus{outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px oklch(0.59 0.16 143 / 0.14)}
label{font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
display: block}
.form-group{margin-bottom: 16px}
.form-row{display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px}
.form-field-error{margin: 8px 0 0;
font-size: 13px;
line-height: 1.4;
font-weight: 500;
color: var(--danger)}
.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"],
.form-group select[aria-invalid="true"]{border-color: var(--danger)}
.form-group input[aria-invalid="true"]:focus-visible,
.form-group textarea[aria-invalid="true"]:focus-visible{outline: 2px solid var(--danger);
outline-offset: 2px}
.profil-toggle-row{display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 8px 8px;
margin: 0;
cursor: pointer;
border-radius: 8px;
transition:
background 0.15s ease,
box-shadow 0.15s ease;
text-transform: none;
letter-spacing: 0}
@media (hover: hover) and (pointer: fine){.profil-toggle-row:hover{background: var(--paper-soft, var(--paper))}
}
.profil-toggle-row:focus-within{outline: none;
box-shadow:
0 0 0 2px var(--brand-dark, var(--brand)),
0 0 0 4px var(--paper);
background: var(--paper-soft, var(--paper))}
.profil-toggle-cb{flex: 0 0 auto;
width: 22px;
height: 22px;
margin: 0;
cursor: pointer;
accent-color: var(--brand-dark, var(--brand))}
.profil-toggle-text{font-size: 15px;
font-weight: 500;
color: var(--ink);
line-height: 1.4}
.profil-toggle-cb:checked + .profil-toggle-text{font-weight: 600;
color: var(--brand-dark, var(--brand))}
.profil-toggle-cb:checked + .profil-toggle-text::before{content: "\2713 ";
color: var(--brand-dark, var(--brand));
font-weight: 700;
margin-right: 2px}
.profil-toggle-help{display: block;
font-size: 13px;
font-weight: 400;
color: var(--ink-muted);
margin-top: 2px;
letter-spacing: 0}
.profil-advanced{margin: 16px 0;
border: 1px dashed var(--border, oklch(0.88 0.02 75));
border-radius: 10px;
background: transparent;
overflow: hidden}
.profil-advanced-summary{display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
cursor: pointer;
list-style: none;
min-height: 44px}
.profil-advanced-summary::-webkit-details-marker{display: none}
.profil-advanced-text{font-size: 15px;
font-weight: 500;
color: var(--ink);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap}
.profil-advanced-count{font-size: 12px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
background: var(--accent-tint);
color: var(--brand-dark, var(--brand));
letter-spacing: 0}
.profil-advanced-cta{font-size: 12px;
font-weight: 600;
color: var(--brand-dark, var(--brand));
text-transform: uppercase;
letter-spacing: 0.06em;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
transition: opacity 0.15s ease}
.profil-advanced-cta::after{content: "";
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform 0.2s ease}
.profil-advanced[open] .profil-advanced-cta{opacity: 0.6}
.profil-advanced[open] .profil-advanced-cta::after{transform: rotate(180deg)}
.profil-advanced-body{padding: 4px 16px 16px;
border-top: 1px dashed var(--border2, oklch(0.92 0.015 75));
margin-top: 4px;
display: flex;
flex-direction: column;
gap: 16px}
.profil-advanced-body .form-group{margin-bottom: 0}
.profil-actions-more{margin: 12px 0 24px;
border: 1px dashed var(--border, oklch(0.88 0.02 75));
border-radius: 10px;
background: transparent;
overflow: hidden}
.profil-actions-more-summary{display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
cursor: pointer;
list-style: none;
min-height: 44px;
font-size: 13px;
font-weight: 500;
color: var(--ink-muted)}
.profil-actions-more-summary::-webkit-details-marker{display: none}
.profil-actions-more-cta{font-size: 12px;
font-weight: 600;
color: var(--brand-dark, var(--brand));
text-transform: uppercase;
letter-spacing: 0.06em;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
transition: opacity 0.15s ease}
.profil-actions-more-cta::after{content: "";
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform 0.2s ease}
.profil-actions-more[open] .profil-actions-more-cta{opacity: 0.6}
.profil-actions-more[open] .profil-actions-more-cta::after{transform: rotate(180deg)}
.profil-actions-more-body{padding: 4px 16px 16px;
border-top: 1px dashed var(--border2, oklch(0.92 0.015 75));
margin-top: 4px;
display: flex;
flex-direction: column;
gap: 8px}
.profil-actions-more-body .btn-sec,
.profil-actions-more-body .profil-logout-btn{width: 100%;
text-align: center;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center}
.profil-logout-btn{color: var(--danger);
border-color: var(--danger);
background: transparent;
cursor: pointer}
@media (hover: hover) and (pointer: fine){.profil-logout-btn:hover{background: color-mix(in oklch, var(--danger) 8%, transparent)}
}
.profil-actions-more-body .profil-logout{margin: 0}
.form-divider{font-size: 12px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 16px 0 8px;
border-top: 1px solid var(--border);
margin-top: 4px}
.tag-cloud{display: flex;
flex-wrap: wrap;
gap: 8px}
.ptag{padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
border: 1.5px solid var(--border);
color: var(--muted);
transition:
transform 0.18s,
opacity 0.18s,
color 0.18s,
background 0.18s,
border-color 0.18s,
box-shadow 0.18s;
background: var(--paper);
display: inline-block}
.ptag.on{background: var(--brand-pale);
border-color: oklch(0.59 0.16 143 / 0.26);
color: var(--brand)}
@media (hover: hover) and (pointer: fine){.ptag:hover{border-color: oklch(0.59 0.16 143 / 0.26);
color: var(--brand)}
}
.sidebar-toggle{display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
font-size: 23px;
line-height: 1;
color: var(--ink)}
.pwa-back-btn{display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
color: var(--accent);
border-radius: 50%;
transition: background-color 150ms cubic-bezier(0.22, 1, 0.36, 1)}
@media (hover: hover) and (pointer: fine){.pwa-back-btn:hover{background: var(--accent-tint)}
}
.pwa-back-btn:active{background: color-mix(in oklch, var(--accent-tint) 80%, var(--accent) 20%)}
.pwa-back-btn:focus-visible{outline: 2px solid var(--accent);
outline-offset: 2px}
@media (display-mode: standalone){.pwa-back-btn:not([hidden]){display: inline-flex}
}
.sidebar-overlay{display: none;
position: fixed;
inset: 0;
background: oklch(0.18 0.015 110 / 0.55);
z-index: 199}
@media (min-width: 769px){html,
body{height: 100%;
overflow: hidden}
.app-layout{height: 100vh;
height: 100dvh;
overflow: hidden}
.main{overflow: hidden}
.content{overflow-y: auto;
scrollbar-gutter: stable}
}
@media (max-width: 1024px){.sidebar{width: 200px}
.content-inner{padding: 16px}
.cards-grid{grid-template-columns: repeat(2, 1fr)}
.epargne-grid{grid-template-columns: 1fr}
}
@media (max-width: 768px){.app-layout{flex-direction: column}
.sidebar{position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
max-width: 100vw;
z-index: 200;
transform: translateX(-100%);
transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
box-shadow: none}
.sidebar.open{transform: translateX(0)}
.sidebar-overlay.open{display: block}
.topbar{padding: 8px 16px;
position: sticky;
top: 0;
z-index: 100}
.sidebar-toggle{display: flex;
align-items: center;
justify-content: center}
.tb-left{gap: 8px}
.ptitle{font-size: 15px}
.content-inner{padding: 16px 16px}
.cards-grid{grid-template-columns: 1fr}
.form-row{grid-template-columns: 1fr}
.epargne-grid{grid-template-columns: 1fr}
.tb-right{gap: 8px}
.tb-right .btn-main,
.tb-right .btn-sec{padding: 12px 16px;
font-size: 12px;
min-height: 44px}
.score-grid{grid-template-columns: 1fr}
.page-header{flex-direction: column;
align-items: flex-start;
gap: 8px}
}
@media (max-width: 480px){.topbar{padding: 8px 12px}
.ptitle{font-size: 15px}
.content-inner{padding: 8px 12px}
.card{padding: 16px}
.bars-wrap{gap: 4px}
.modal-box{margin: 12px;
width: calc(100% - 24px);
border-radius: 16px}
.kpi-strip{grid-template-columns: repeat(2, 1fr)}
}
[data-theme="dark"]{--paper: oklch(0.18 0.014 75);
--paper-soft: oklch(0.15 0.012 75);
--paper-sheet: oklch(0.23 0.016 75);
--paper-deep: oklch(0.12 0.01 75);
--ink: oklch(0.94 0.01 75);
--ink-soft: oklch(0.8 0.012 75);
--ink-muted: oklch(0.72 0.012 75);
--ink-fade: oklch(0.6 0.01 75);
--accent: oklch(0.72 0.14 143);
--accent-deep: oklch(0.56 0.13 143);
--accent-bright: oklch(0.84 0.14 143);
--accent-tint: oklch(0.28 0.042 143);
--accent-tint2: oklch(0.34 0.05 143);
--accent-glow: 0 8px 32px oklch(0.72 0.14 143 / 0.28);
--badge-warn-bg: oklch(0.34 0.08 80 / 0.40);
--badge-warn-ink: oklch(0.82 0.12 80);
--badge-neutral-bg: oklch(0.30 0.014 75);
--badge-neutral-ink: oklch(0.80 0.012 75);
--danger: oklch(0.58 0.15 25);
--danger-deep: oklch(0.44 0.13 25);
--danger-bright: oklch(0.7 0.16 25);
--heart: oklch(0.7 0.17 15);
--heart-deep: oklch(0.78 0.18 15);
--danger-tint: oklch(0.3 0.042 25);
--danger-tint2: oklch(0.36 0.05 25);
--danger-glow: 0 8px 32px oklch(0.58 0.15 25 / 0.28);
--brick: var(--accent);
--brick-deep: var(--accent-deep);
--brick-bright: var(--accent-bright);
--brick-tint: var(--accent-tint);
--brick-tint2: var(--accent-tint2);
--brick-glow: var(--accent-glow);
--canneberge: var(--danger);
--canneberge-tint: var(--danger-tint);
--labrador: var(--accent);
--labrador-deep: var(--accent-deep);
--labrador-bright: var(--accent-bright);
--labrador-tint: var(--accent-tint);
--labrador-tint2: var(--accent-tint2);
--labrador-glow: var(--accent-glow);
--oxblood: var(--danger);
--oxblood-deep: var(--danger-deep);
--oxblood-bright: var(--danger-bright);
--oxblood-tint: var(--danger-tint);
--oxblood-tint2: var(--danger-tint2);
--oxblood-glow: var(--danger-glow);
--moutarde: oklch(0.7 0.13 82);
--moutarde-tint: oklch(0.3 0.042 82);
--brand: oklch(0.54 0.14 143);
--brand-light: oklch(0.72 0.14 143);
--brand-dark: oklch(0.42 0.12 143);
--brand-pale: oklch(0.28 0.042 143);
--brand-glow: 0 8px 32px oklch(0.54 0.14 143 / 0.38);
--courge: oklch(0.74 0.14 68);
--courge-tint: oklch(0.3 0.04 68);
--ardoise: oklch(0.66 0.1 220);
--ardoise-tint: oklch(0.28 0.032 220);
--paille: oklch(0.84 0.12 72);
--border: oklch(0.32 0.016 75);
--border2: oklch(0.26 0.014 75);
--shadow: 0 1px 3px oklch(0.08 0.012 75 / 0.4), 0 1px 2px oklch(0.08 0.012 75 / 0.3);
--shadow-md: 0 6px 24px oklch(0.08 0.012 75 / 0.5), 0 2px 8px oklch(0.08 0.012 75 / 0.35);
--shadow-lg: 0 18px 48px oklch(0.08 0.012 75 / 0.6), 0 4px 14px oklch(0.08 0.012 75 / 0.4)}
[data-theme="dark"] body{background: var(--paper);
color: var(--ink)}
[data-theme="dark"] .sidebar{background: var(--paper-sheet);
border-right-color: var(--border)}
[data-theme="dark"] .topbar{background: color-mix(in oklch, var(--paper-sheet) 82%, transparent)}
[data-theme="dark"] .fantome-banner,
[data-theme="dark"] .fantome-big{background: linear-gradient(135deg, var(--paper-sheet), oklch(0.26 0.035 155));
border-color: oklch(0.72 0.14 143 / 0.22)}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea{background: var(--paper-soft);
border-color: var(--border);
color: var(--ink)}
[data-theme="dark"] .flash-success{background: oklch(0.72 0.14 143 / 0.18);
border-color: oklch(0.72 0.14 143 / 0.26)}
[data-theme="dark"] .flash-error{background: oklch(0.62 0.17 22 / 0.18);
border-color: oklch(0.62 0.17 22 / 0.26)}
[data-theme="dark"] canvas{filter: brightness(0.92) saturate(0.9)}
.dark-toggle,
.tb-icon-btn{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 12px;
cursor: pointer;
padding: 12px;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-soft);
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
line-height: 1}
@media (hover: hover) and (pointer: fine){.dark-toggle:hover,
.tb-icon-btn:hover{border-color: var(--brand-dark);
color: var(--brand-dark);
background: var(--accent-tint)}
}
.tb-icon-btn.is-dark{color: var(--brand-dark)}
.topbar-form{display: inline-flex}
.live-pill-hidden{display: none !important}
.is-hidden{display: none !important}
.btn-icon-mobile-icon{display: none}
@media (max-width: 768px){.btn-icon-mobile{width: 44px;
height: 44px;
padding: 0 !important;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center}
.btn-icon-mobile-text{display: none}
.btn-icon-mobile-icon{display: block}
.live-pill{display: none}
.ptitle{max-width: 38vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap}
}
.vocal-active{border-color: var(--brand) !important;
animation: pulse-border 1s infinite}
@keyframes pulse-border{0%,
100%{box-shadow: none}
50%{box-shadow: 0 0 0 4px oklch(0.59 0.16 143 / 0.26)}
}
#vocalBtn.vocal-active{background: var(--brand-pale);
color: var(--brand)}
.meteo-badge{display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--muted);
padding: 4px 8px;
border: 1.5px solid var(--border);
border-radius: 8px}
.modal-overlay{background: oklch(0.18 0.015 110 / 0.62)}
.ptitle,
.ctitle,
.logo-txt,
.recipe-title,
.sz-title,
.rc-store,
.vn,
.dd,
.fb-eyebrow,
.sc-lbl,
.fb-plbl{font-weight: 400 !important;
letter-spacing: -0.01em}
.logo-txt{letter-spacing: -0.012em}
.fb-amount,
.fb-currency,
.fb-pct,
.kpi-val,
.sc-pct,
.rc-total,
.cmp-v,
.ri-price,
.si-p,
.mockup-budget-amount{font-family: var(--font-body);
font-feature-settings:
"tnum" 1,
"lnum" 1,
"ss01";
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em}
.fb-amount{font-weight: 800}
.kpi-val,
.sc-pct{font-weight: 800}
.rc-total,
.cmp-v,
.mockup-budget-amount{font-weight: 800}
.ri-price,
.si-p{font-weight: 700}
h1,
h2,
h3,
h4,
.display-xl,
.display-lg,
.display-md,
.display-sm{font-family: var(--font-display);
color: var(--ink);
line-height: 1.08;
letter-spacing: -0.01em;
font-weight: 400;
text-wrap: balance}
.display-xl{font-size: clamp(40px, 6vw, 72px);
line-height: 1.02;
letter-spacing: -0.015em}
.display-lg{font-size: clamp(32px, 4.2vw, 54px);
line-height: 1.05;
letter-spacing: -0.012em}
.display-md{font-size: clamp(26px, 3vw, 38px);
line-height: 1.1}
.display-sm{font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.2}
.eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brand-dark);
display: inline-block;
margin-bottom: 8px}
[data-theme="dark"] .eyebrow{color: var(--accent)}
:focus{outline: none}
:focus-visible{outline: 2.5px solid var(--brand-dark);
outline-offset: 3px;
border-radius: 4px}
input:focus-visible,
select:focus-visible,
textarea:focus-visible{outline: none;
border-color: var(--brand-dark);
box-shadow: 0 0 0 4px oklch(0.59 0.16 143 / 0.18)}
.nav-group-toggle:focus-visible,
.ni:focus-visible{outline: 2px solid var(--brand-dark);
outline-offset: -2px}
.tb-icon-btn:focus-visible{outline: 2px solid var(--brand-dark);
outline-offset: 2px}
.skip-link{position: absolute;
top: 8px;
left: 16px;
transform: translateY(-200%);
background: var(--brand-dark);
color: var(--cream-fixed);
padding: 8px 16px;
border-radius: var(--radius-sm);
z-index: 9999;
font-size: 13px;
font-weight: 600;
transition: transform 0.2s}
.skip-link:focus{transform: translateY(0)}
.ni.ni-premium{color: var(--danger);
font-weight: 700;
background: var(--brick-tint);
position: relative}
@media (hover: hover) and (pointer: fine){.ni.ni-premium:hover{color: var(--brick-deep);
background: oklch(0.59 0.16 143 / 0.14)}
}
.ni.ni-premium .nico{opacity: 1}
.circulaires-pending{display: none;
background: var(--paper-soft);
border: 1px solid color-mix(in oklch, var(--brand) 22%, var(--border));
border-radius: var(--radius);
padding: 16px 16px;
margin: 0 0 16px 0;
font-size: 15px;
color: var(--ink-soft);
align-items: flex-start;
gap: 16px;
line-height: 1.55}
.circulaires-pending-icon{display: inline-flex;
align-items: center;
line-height: 1;
flex-shrink: 0;
margin-top: 2px;
color: var(--brand-dark, var(--brand))}
.circulaires-pending-body{flex: 1}
.circulaires-pending a{color: var(--brand-dark, var(--brand));
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
font-weight: 600}
@media (hover: hover) and (pointer: fine){.circulaires-pending a:hover{text-decoration-thickness: 2px}
}
.circulaires-pending-close{background: transparent;
border: 0;
color: var(--ink-muted);
font-size: 23px;
cursor: pointer;
line-height: 1;
padding: 8px 12px;
flex-shrink: 0;
border-radius: 6px;
position: relative;
transition:
background 0.15s,
color 0.15s}
.circulaires-pending-close::after{content: "";
position: absolute;
inset: -8px;
min-width: 44px;
min-height: 44px}
@media (hover: hover) and (pointer: fine){.circulaires-pending-close:hover{background: color-mix(in oklch, var(--ink) 6%, transparent);
color: var(--ink)}
}
[data-theme="dark"] .circulaires-pending{background: color-mix(in oklch, var(--brand) 8%, var(--paper-soft));
border-color: color-mix(in oklch, var(--brand) 35%, var(--border));
color: var(--ink-soft)}
.vocal-overlay{display: none;
position: fixed;
inset: 0;
background: oklch(0.18 0.015 110 / 0.62);
z-index: 600;
align-items: center;
justify-content: center}
.vocal-dialog{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 40px 32px;
text-align: center;
max-width: 380px;
width: 90%;
box-shadow: var(--shadow-lg)}
.vocal-icon{font-size: 56px;
margin-bottom: 16px}
.vocal-title{font-family: var(--font-display);
font-size: 23px;
font-weight: 400;
color: var(--ink);
margin-bottom: 8px;
letter-spacing: -0.01em}
.vocal-status{font-size: 13px;
color: var(--ink-muted);
margin-bottom: 16px}
.vocal-transcript{font-size: 16px;
font-weight: 600;
color: var(--brand-dark);
min-height: 30px;
margin-bottom: 24px}
.vocal-commands{font-size: 12px;
color: var(--ink-muted);
line-height: 1.9;
margin-bottom: 20px}
.vocal-commands strong{color: var(--ink-soft);
font-weight: 600}
.vocal-actions{display: flex;
gap: 8px;
justify-content: center}
.vocal-close{background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--ink);
padding: 8px 24px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
font-family: var(--font-body)}
@media (hover: hover) and (pointer: fine){.vocal-close:hover{border-color: var(--brand-dark);
color: var(--brand-dark)}
}
.vocal-hint{margin-top: 16px;
font-size: 12px;
color: var(--ink-fade)}
.offline-bar{display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--danger);
color: var(--cream-fixed);
text-align: center;
padding: 12px 16px;
font-size: 13px;
font-weight: 600;
z-index: 9999;
letter-spacing: -0.1px}
.loading-overlay{position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
background: var(--accent-tint);
border-bottom: 1px solid oklch(0.59 0.16 143 / 0.22);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 16px;
animation: slideDown 0.3s ease}
@keyframes slideDown{from{transform: translateY(-100%)}
to{transform: translateY(0)}
}
.loading-spinner{width: 18px;
height: 18px;
border-radius: 50%;
border: 2.5px solid var(--accent-tint);
border-top-color: var(--brand-dark);
animation: spin 0.8s linear infinite}
.loading-text{font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--brand-dark)}
.app-footer{margin-top: 56px;
padding: 24px 4px 16px;
border-top: 1px solid var(--border);
font-size: 13px;
color: var(--ink-fade);
line-height: 1.6;
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
align-items: baseline;
justify-content: space-between}
@media all and (display-mode: standalone){.app-footer{display: none !important}
}
@media all and (display-mode: fullscreen), all and (display-mode: minimal-ui){.app-footer{display: none !important}
}
.app-footer-links{display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px}
.app-footer-sep{color: var(--ink-fade);
opacity: 0.55}
.app-footer-copy{font-size: 13px;
color: var(--ink-fade);
letter-spacing: 0.01em}
.app-footer-copy em{font-family: var(--font-display);
font-style: normal;
color: var(--accent)}
.app-footer a{color: var(--ink-muted);
text-decoration: none;
border-bottom: 1px solid oklch(from var(--ink-muted) l c h / 0.25);
padding-bottom: 2px;
transition:
color 0.15s ease,
border-color 0.15s ease}
@media (hover: hover) and (pointer: fine){.app-footer a:hover{color: var(--accent);
border-bottom-color: var(--accent)}
}
.page-masthead,
.dash-masthead{margin-bottom: var(--space-lg);
display: flex;
flex-direction: column;
gap: var(--space-sm)}
.page-masthead-meta,
.dash-masthead-date{display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--border);
flex-wrap: wrap}
.page-masthead-eyebrow,
.dash-masthead-eyebrow{color: var(--brand-dark)}
.page-masthead-sep,
.dash-masthead-sep{width: 3px;
height: 3px;
border-radius: 50%;
background: var(--ink-fade);
flex-shrink: 0}
.page-masthead-title,
.dash-masthead-greeting{font-family: var(--font-display);
font-size: clamp(28px, 3.2vw, 42px);
font-weight: 400;
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1.06;
margin: 0;
text-wrap: balance;
max-width: 28ch}
.page-masthead-title em,
.dash-masthead-greeting em{color: var(--brand-dark);
font-style: italic;
font-family: var(--font-display)}
.page-masthead-lede{font-family: var(--font-body);
font-size: 16px;
line-height: 1.62;
color: var(--ink-soft);
max-width: 60ch;
margin: var(--space-xs) 0 0}
.fb-savings-value{color: var(--brand-dark) !important;
font-family: var(--font-body);
font-size: 16px !important;
font-weight: 700;
font-variant-numeric: tabular-nums}
.ftag.ftag-accent{color: var(--brand-dark);
border-color: oklch(0.59 0.16 143 / 0.28);
background: var(--accent-tint)}
.ptitle{font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
color: var(--ink-soft);
letter-spacing: 0.02em;
text-transform: none}
.dash-quick{display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 28px}
.dash-quick-tile{display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 8px 16px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
text-decoration: none;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: pointer}
@media (hover: hover) and (pointer: fine){.dash-quick-tile:hover{background: var(--accent-tint);
border-color: var(--brand-dark);
transform: translateY(-2px);
box-shadow: 0 6px 20px oklch(0.59 0.16 143 / 0.12)}
}
.dash-quick-tile--urgent{border-color: oklch(0.44 0.14 25 / 0.22)}
@media (hover: hover) and (pointer: fine){.dash-quick-tile--urgent:hover{background: oklch(0.44 0.14 25 / 0.06);
border-color: var(--danger)}
}
.dash-quick-icon{font-size: 23px;
line-height: 1}
.dash-quick-label{font-size: 13px;
font-weight: 600;
color: var(--ink-soft);
text-align: center;
line-height: 1.3;
letter-spacing: -0.2px}
@media (hover: hover) and (pointer: fine){.dash-quick-tile:hover .dash-quick-label{color: var(--ink)}
}
@media (max-width: 640px){.dash-quick{grid-template-columns: repeat(2, 1fr);
gap: 8px}
}
@media (max-width: 480px){.dash-quick{grid-template-columns: repeat(2, 1fr);
gap: 8px}
.dash-quick-tile{padding: 16px 8px 12px}
.dash-quick-label{font-size: 12px}
}
@keyframes shimmer{0%{background-position: -400px 0}
100%{background-position: 400px 0}
}
.skel{background: linear-gradient(90deg, var(--paper-soft) 25%, var(--paper-sheet) 37%, var(--paper-soft) 63%);
background-size: 800px 100%;
animation: shimmer 1.6s ease-in-out infinite;
border-radius: var(--radius-sm);
color: transparent !important}
.skel *{visibility: hidden}
.skel-line{height: 14px;
margin-bottom: 8px}
.skel-line-lg{height: 32px;
margin-bottom: 12px;
width: 60%}
.skel-circle{width: 120px;
height: 120px;
border-radius: 50%}
.dash-hero{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: clamp(24px, 3vw, 40px);
margin-bottom: 28px;
position: relative;
overflow: hidden}
.dash-hero-greeting{position: relative;
margin-bottom: 24px}
.dash-hero-meta{display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 4px}
.dash-hero-grid{position: relative;
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(24px, 4vw, 48px);
align-items: center;
margin-bottom: 24px}
.dash-hero-ring{position: relative;
width: 180px;
height: 180px;
display: flex;
align-items: center;
justify-content: center}
.dash-hero-ring svg{position: absolute}
.dash-hero-ring-progress{transform: rotate(-90deg);
transform-origin: 60px 60px;
animation: ringFill 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}
@keyframes ringFill{from{stroke-dashoffset: 301.6}
to{stroke-dashoffset: var(--offset)}
}
.celebration-toast{position: fixed;
left: 50%;
bottom: calc(env(safe-area-inset-bottom, 0) + 84px);
transform: translate(-50%, calc(var(--toast-stack-offset, 0px) * -1));
transition: transform 0.24s var(--ease-out, ease);
z-index: 9998;
display: flex;
align-items: center;
gap: 12px;
max-width: min(480px, calc(100vw - 32px));
padding: 16px 16px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 12px 40px oklch(0.22 0.02 110 / 0.18);
animation: celebToastIn 0.32s var(--ease-out-quart) both}
.celebration-toast.is-leaving{animation: celebToastOut 0.24s var(--ease-out) both}
@keyframes celebToastIn{from{opacity: 0;
transform: translate(-50%, 12px)}
to{opacity: 1;
transform: translate(-50%, 0)}
}
@keyframes celebToastOut{from{opacity: 1;
transform: translate(-50%, 0)}
to{opacity: 0;
transform: translate(-50%, 8px)}
}
.celebration-toast-icon{font-size: 23px;
line-height: 1;
flex: 0 0 auto}
.celebration-toast-text{display: flex;
flex-direction: column;
gap: 2px;
min-width: 0}
.celebration-toast-text strong{font-family: var(--font-display);
font-size: 15px;
color: var(--ink);
font-weight: 600}
.celebration-toast-text span{font-size: 13px;
color: var(--ink-soft);
line-height: 1.4}
.celebration-toast-close{flex: 0 0 auto;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ink-soft);
font-size: 19px;
line-height: 1;
cursor: pointer}
@media (hover: hover) and (pointer: fine){.celebration-toast-close:hover{background: var(--brand-pale);
color: var(--ink)}
}
.celebration-toast-actions{display: flex;
gap: 8px;
width: 100%;
margin-top: 8px;
flex-basis: 100%}
.celebration-toast-btn{flex: 1;
padding: 12px 16px;
border: 1px solid var(--border);
background: var(--paper-sheet);
color: var(--ink);
border-radius: 8px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
cursor: pointer;
min-height: 44px;
transition:
background 0.15s,
border-color 0.15s}
@media (hover: hover) and (pointer: fine){.celebration-toast-btn:hover{background: var(--paper-soft);
border-color: var(--ink-muted)}
}
.celebration-toast-btn.is-primary{background: var(--brand);
color: var(--cream-fixed, #fff);
border-color: var(--brand)}
@media (hover: hover) and (pointer: fine){.celebration-toast-btn.is-primary:hover{background: var(--brand-dark, var(--brand))}
}
.celebration-toast:has(.celebration-toast-actions){flex-wrap: wrap}
.celebration-toast.is-error{border-color: oklch(0.65 0.18 28 / 0.35);
background: oklch(0.985 0.01 70)}
.celebration-toast.is-error .celebration-toast-icon{color: oklch(0.55 0.2 28);
font-weight: 700}
@media (max-width: 768px){.celebration-toast{bottom: calc(env(safe-area-inset-bottom, 0) + 76px + var(--toast-stack-offset, 0px))}
}
.gen-reveal{max-width: 620px;
margin: 40px auto 60px;
padding: 40px 24px 32px;
position: relative;
text-align: center;
animation: gen-reveal-in 0.6s cubic-bezier(0.19, 1, 0.22, 1) both}
@keyframes gen-reveal-in{from{opacity: 0;
transform: translateY(18px) scale(0.985)}
to{opacity: 1;
transform: none}
}
.gen-reveal-burst{position: absolute;
inset: 0 0 auto 0;
height: 180px;
pointer-events: none;
overflow: visible}
.gen-reveal-burst span{position: absolute;
left: 50%;
top: 40%;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
opacity: 0;
animation: gen-burst 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0.15s both}
.gen-reveal-burst span:nth-child(1){--tx: -120px;
--ty: -40px;
background: var(--accent-deep);
animation-delay: 0.1s}
.gen-reveal-burst span:nth-child(2){--tx: 120px;
--ty: -40px;
background: var(--accent);
animation-delay: 0.15s}
.gen-reveal-burst span:nth-child(3){--tx: -70px;
--ty: -90px;
background: var(--accent);
animation-delay: 0.2s}
.gen-reveal-burst span:nth-child(4){--tx: 70px;
--ty: -90px;
background: var(--accent-deep);
animation-delay: 0.25s}
.gen-reveal-burst span:nth-child(5){--tx: -30px;
--ty: -30px;
background: var(--accent);
animation-delay: 0.3s}
.gen-reveal-burst span:nth-child(6){--tx: 30px;
--ty: -30px;
background: var(--accent-deep);
animation-delay: 0.35s}
@keyframes gen-burst{0%{opacity: 0;
transform: translate(-50%, -50%) scale(0.2)}
30%{opacity: 1}
100%{opacity: 0;
transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1)}
}
.gen-reveal-eyebrow{font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-deep, #2d6329);
font-weight: 600;
margin-bottom: 8px}
.gen-reveal-title{font-family: var(--font-display);
font-size: clamp(34px, 6vw, 48px);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 28px;
color: var(--text, #1a1a1a)}
.gen-reveal-title em{font-style: italic;
color: var(--brick, #c44e3a);
font-weight: 400}
.gen-reveal-stats{display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin: 0 0 20px}
.gen-reveal-stat{padding: 16px 8px;
border-radius: 14px;
background: oklch(0.98 0.005 90);
border: 1px solid oklch(0.92 0.012 85);
opacity: 0;
transform: translateY(8px);
animation: gen-stat-in 0.5s cubic-bezier(0.19, 1, 0.22, 1) both;
animation-delay: calc(350ms + var(--d, 0ms))}
@keyframes gen-stat-in{to{opacity: 1;
transform: none}
}
.gen-reveal-stat-num{font-family: var(--font-display);
font-size: 30px;
line-height: 1;
font-weight: 500;
color: var(--brick-deep, #8a3526);
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: baseline;
gap: 2px}
.gen-reveal-stat-unit{font-size: 19px;
font-weight: 400;
color: var(--brick, #c44e3a)}
.gen-reveal-stat-lbl{font-size: 12px;
letter-spacing: 0.02em;
color: var(--muted, #666);
margin-top: 8px;
text-transform: lowercase}
.gen-reveal-chips{display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 0 0 28px}
.gen-reveal-chip{font-size: 13px;
padding: 8px 16px;
background: var(--accent-tint);
border: 1px solid oklch(0.86 0.06 72);
color: var(--brick-deep, #8a3526);
border-radius: 999px;
font-weight: 500;
opacity: 0;
transform: translateY(6px);
animation: gen-stat-in 0.5s cubic-bezier(0.19, 1, 0.22, 1) both;
animation-delay: calc(350ms + var(--d, 0ms))}
.gen-reveal-chip b{font-weight: 700}
.gen-reveal-cta{display: inline-flex;
align-items: center;
gap: 8px;
padding: 16px 28px;
border-radius: 999px;
background: var(--accent, #4a9e46);
color: white;
font-family: var(--font-display);
font-size: 16px;
text-decoration: none;
font-weight: 500;
box-shadow: 0 8px 22px -10px oklch(0.55 0.18 145 / 0.55);
transition:
transform 0.2s,
box-shadow 0.2s;
opacity: 0;
animation: gen-stat-in 0.55s cubic-bezier(0.19, 1, 0.22, 1) 550ms both}
@media (hover: hover) and (pointer: fine){.gen-reveal-cta:hover{transform: translateY(-2px);
box-shadow: 0 14px 28px -10px oklch(0.55 0.18 145 / 0.65)}
}
[data-theme="dark"] .gen-reveal-stat{background: oklch(0.22 0.015 85);
border-color: oklch(0.3 0.015 85)}
[data-theme="dark"] .gen-reveal-stat-num{color: var(--paille, #e8c547)}
[data-theme="dark"] .gen-reveal-chip{background: oklch(0.28 0.04 70);
color: var(--paille, #e8c547);
border-color: oklch(0.45 0.08 72)}
@media (max-width: 480px){.gen-reveal-stats{grid-template-columns: repeat(2, 1fr)}
.gen-reveal-title{font-size: clamp(28px, 8vw, 36px)}
}
.menu-fresh-flash{margin: -4px 0 20px;
padding: 16px 16px;
border-radius: 16px;
background: linear-gradient(135deg, var(--accent-tint), oklch(0.95 0.035 100));
border: 1px solid oklch(0.82 0.08 72 / 0.5);
display: flex;
align-items: center;
gap: 16px;
animation: gen-reveal-in 0.6s cubic-bezier(0.19, 1, 0.22, 1) both}
.menu-fresh-flash-icon{font-size: 30px;
line-height: 1;
flex-shrink: 0}
.menu-fresh-flash-title{font-family: var(--font-display);
font-size: 19px;
line-height: 1.15;
color: var(--brick-deep, #8a3526);
margin: 0 0 2px}
.menu-fresh-flash-sub{font-size: 15px;
color: var(--muted, #666);
line-height: 1.35}
[data-theme="dark"] .menu-fresh-flash{background: linear-gradient(135deg, oklch(0.28 0.04 70), oklch(0.24 0.03 60));
border-color: oklch(0.5 0.08 72 / 0.4)}
[data-theme="dark"] .menu-fresh-flash-title{color: var(--paille, #e8c547)}
body.menu-fresh .menu-day{opacity: 0;
transform: translateY(10px);
animation: menu-day-in 0.5s cubic-bezier(0.19, 1, 0.22, 1) both}
body.menu-fresh .menu-day:nth-child(1){animation-delay: 60ms}
body.menu-fresh .menu-day:nth-child(2){animation-delay: 120ms}
body.menu-fresh .menu-day:nth-child(3){animation-delay: 180ms}
body.menu-fresh .menu-day:nth-child(4){animation-delay: 240ms}
body.menu-fresh .menu-day:nth-child(5){animation-delay: 300ms}
body.menu-fresh .menu-day:nth-child(6){animation-delay: 360ms}
body.menu-fresh .menu-day:nth-child(7){animation-delay: 420ms}
@keyframes menu-day-in{to{opacity: 1;
transform: none}
}
body.menu-fresh .menu-spread{animation: menu-spread-in 0.7s cubic-bezier(0.19, 1, 0.22, 1) 500ms both}
@keyframes menu-spread-in{from{opacity: 0;
transform: translateY(16px)}
to{opacity: 1;
transform: none}
}
@media (prefers-reduced-motion: reduce){.gen-reveal,
.gen-reveal-stat,
.gen-reveal-chip,
.gen-reveal-cta,
.menu-fresh-flash,
body.menu-fresh .menu-day,
body.menu-fresh .menu-spread,
.gen-reveal-burst span{animation: none !important;
opacity: 1 !important;
transform: none !important}
}
.gen-loading{max-width: 640px;
margin: 40px auto;
padding: 0 20px}
.gen-loading-card{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: clamp(32px, 5vw, 56px);
text-align: center;
position: relative;
overflow: hidden;
animation: fadeInUp 0.5s ease}
.gen-loading-card::before{content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% -20%, oklch(0.59 0.16 143 / 0.08), transparent 60%);
pointer-events: none}
.gen-loading-emoji{font-size: 72px;
line-height: 1;
margin-bottom: 24px;
animation: chefBounce 2s ease-in-out infinite}
@keyframes chefBounce{0%,
100%{transform: translateY(0) rotate(-2deg)}
50%{transform: translateY(-10px) rotate(2deg)}
}
.gen-loading-title{font-family: var(--font-display);
font-size: clamp(26px, 4vw, 38px);
color: var(--ink);
margin-bottom: 12px;
letter-spacing: -0.5px}
.gen-loading-lede{font-size: 15px;
color: var(--ink-muted);
max-width: 420px;
margin: 0 auto 36px;
line-height: 1.55}
.gen-steps{list-style: none;
padding: 0;
margin: 0 0 32px;
text-align: left;
max-width: 380px;
margin-left: auto;
margin-right: auto}
.gen-step{display: flex;
align-items: center;
gap: 16px;
padding: 8px 0;
opacity: 0.4;
transition: opacity 0.4s}
.gen-step.is-active{opacity: 1}
.gen-step.is-done{opacity: 0.7}
.gen-step-dot{width: 12px;
height: 12px;
border-radius: 50%;
background: var(--border);
flex-shrink: 0;
position: relative;
transition: background 0.3s}
.gen-step.is-active .gen-step-dot{background: var(--brand-dark);
box-shadow: 0 0 0 4px oklch(0.59 0.16 143 / 0.15);
animation: genPulse 1.5s ease-in-out infinite}
.gen-step.is-done .gen-step-dot{background: var(--brand-dark)}
.gen-step.is-done .gen-step-dot::after{content: "✓";
position: absolute;
inset: 0;
color: var(--cream-fixed);
font-size: 12px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center}
@keyframes genPulse{0%,
100%{box-shadow: 0 0 0 4px oklch(0.59 0.16 143 / 0.15)}
50%{box-shadow: 0 0 0 10px oklch(0.59 0.16 143 / 0.05)}
}
.gen-step-text{font-size: 15px;
color: var(--ink);
font-weight: 500}
.gen-step.is-active .gen-step-text{font-weight: 600}
.gen-loading-meta{display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 13px;
color: var(--ink-muted);
font-variant-numeric: tabular-nums}
.gen-loading-meta #genMessage{transition: opacity 0.3s;
font-family: var(--font-display);
font-style: italic;
color: var(--brand-dark)}
.gen-loading-sep{width: 3px;
height: 3px;
border-radius: 50%;
background: var(--border);
display: inline-block}
.gen-loading-edu{margin-top: 28px;
padding-top: 24px;
border-top: 1px dashed var(--border)}
.gen-loading-edu-title{font-family: var(--font-display, var(--font-body));
font-size: 15px;
font-weight: 400;
color: var(--ink-muted);
margin: 0 0 16px;
text-align: center;
letter-spacing: -0.005em}
.gen-loading-edu-cards{display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 8px}
.gen-loading-edu-card{display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 16px;
background: var(--paper-soft, var(--paper));
border: 1px solid var(--border);
border-radius: 10px;
text-decoration: none;
color: inherit;
transition:
background 0.15s ease,
border-color 0.15s ease,
transform 0.1s ease;
min-height: 44px}
@media (hover: hover) and (pointer: fine){.gen-loading-edu-card:hover,
.gen-loading-edu-card:focus-visible{background: var(--accent-tint, color-mix(in oklch, var(--brand) 6%, var(--paper)));
border-color: color-mix(in oklch, var(--brand) 30%, var(--border));
outline: none}
}
.gen-loading-edu-card:focus-visible{box-shadow:
0 0 0 2px var(--brand-dark, var(--brand)),
0 0 0 4px var(--paper)}
.gen-loading-edu-card:active{transform: translateY(1px)}
.gen-loading-edu-emoji{flex-shrink: 0;
font-family: "Young Serif", Georgia, serif;
font-size: 23px;
line-height: 1;
margin-top: -2px;
color: var(--brand-dark, #355c4d);
min-width: 28px;
letter-spacing: -0.02em}
.gen-loading-edu-body{display: flex;
flex-direction: column;
gap: 2px}
.gen-loading-edu-card-title{font-size: 13px;
font-weight: 600;
color: var(--ink);
line-height: 1.3}
.gen-loading-edu-card-lede{font-size: 13px;
color: var(--ink-soft);
line-height: 1.45}
.gen-loading-error{margin-top: 24px;
padding: 16px;
background: oklch(0.44 0.14 25 / 0.08);
border: 1px solid oklch(0.44 0.14 25 / 0.2);
border-radius: var(--radius);
color: var(--danger)}
.gen-loading-error p{margin-bottom: 12px;
font-size: 15px}
.gen-loading-cancel{margin-top: 24px;
text-align: center}
.gen-loading-cancel-btn{background: none;
border: none;
font-family: inherit;
font-size: 13px;
color: var(--ink-muted);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: var(--border);
padding: 8px 16px;
min-height: 44px;
cursor: pointer;
transition: color 0.15s}
@media (hover: hover) and (pointer: fine){.gen-loading-cancel-btn:hover{color: var(--danger);
text-decoration-color: var(--danger)}
}
.astuce-bandeau{background: var(--paper-sheet);
border: 1px solid oklch(0.59 0.16 143 / 0.18);
border-radius: var(--radius);
padding: 16px 20px;
margin-bottom: 20px;
font-family: var(--font-display);
font-size: 15px;
font-style: italic;
color: var(--brand-dark);
animation: fadeInUp 0.6s ease both;
animation-delay: 0.2s}
.cook-mode[hidden]{display: none !important}
.cook-mode{position: fixed;
inset: 0;
z-index: 9997;
background: var(--paper);
display: grid;
grid-template-rows: auto auto 1fr auto auto;
animation: cookModeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1)}
@keyframes cookModeIn{from{opacity: 0;
transform: scale(0.96)}
to{opacity: 1;
transform: scale(1)}
}
.cook-progress-bar{height: 3px;
background: var(--paper-soft);
position: relative;
margin-top: env(safe-area-inset-top)}
.cook-progress-fill{height: 100%;
background: linear-gradient(90deg, var(--brand), var(--brand-dark));
width: 100%;
transform: scaleX(var(--progress, 0));
transform-origin: left center;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)}
.cook-mode-bar{display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
padding: 14px calc(16px + env(safe-area-inset-right)) 14px calc(16px + env(safe-area-inset-left))}
.cook-close{width: 44px;
height: 44px;
border: none;
background: var(--paper-soft);
border-radius: 50%;
cursor: pointer;
color: var(--ink-muted);
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background 0.15s,
color 0.15s,
transform 0.12s}
@media (hover: hover) and (pointer: fine){.cook-close:hover{background: var(--border);
color: var(--ink)}
}
.cook-close:active{transform: scale(0.94)}
.cook-progress-label{text-align: center;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-muted);
font-variant-numeric: tabular-nums}
.cook-timer-btn{display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 980px;
background: var(--accent-tint);
border: 1px solid var(--accent-tint2);
color: var(--accent-deep);
font-weight: 600;
cursor: pointer;
transition:
background 0.15s,
transform 0.12s}
.cook-timer-btn.is-running{background: var(--brand);
color: var(--cream-fixed);
border-color: var(--brand-dark)}
.cook-timer-btn:active{transform: scale(0.96)}
.cook-timer{font-family: var(--font-display);
font-size: 16px;
font-variant-numeric: tabular-nums}
.cook-timer-ico{font-size: 13px}
.cook-mode-content{display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 24px calc(28px + env(safe-area-inset-right)) 24px calc(28px + env(safe-area-inset-left));
max-width: 780px;
margin: 0 auto;
width: 100%;
overflow-y: auto}
.cook-mode-eyebrow{font-size: 13px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 16px;
animation: cookFadeIn 0.5s ease 0.1s both;
display: inline-flex;
align-items: center;
gap: 12px}
.cook-mode-eyebrow::before{content: "";
width: 24px;
height: 1px;
background: var(--brand-dark);
opacity: 0.55}
.cook-recipe-name{font-family: var(--font-display);
font-size: clamp(22px, 3.5vw, 28px);
font-weight: 400;
color: var(--ink-muted);
margin-bottom: 28px;
line-height: 1.2;
animation: cookFadeIn 0.5s ease 0.15s both}
.cook-step-wrap{position: relative;
min-height: 180px}
.cook-step{font-family: var(--font-display);
font-size: clamp(30px, 5.5vw, 52px);
font-weight: 400;
line-height: 1.2;
color: var(--ink);
letter-spacing: -0.015em}
.cook-step.is-leaving{animation: cookStepOut 0.25s cubic-bezier(0.55, 0, 0.68, 0.18) forwards}
.cook-step.is-entering{animation: cookStepIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both}
@keyframes cookStepIn{from{opacity: 0;
transform: translateY(14px)}
to{opacity: 1;
transform: translateY(0)}
}
@keyframes cookStepOut{from{opacity: 1;
transform: translateY(0)}
to{opacity: 0;
transform: translateY(-14px)}
}
@keyframes cookFadeIn{from{opacity: 0;
transform: translateY(8px)}
to{opacity: 1;
transform: translateY(0)}
}
.cook-mode-footer{display: grid;
grid-template-columns: 68px 1fr;
gap: 8px;
padding: 16px calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom))
calc(20px + env(safe-area-inset-left));
border-top: 1px solid var(--border);
background: var(--paper-sheet)}
.cook-btn{display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 56px;
padding: 0 20px;
border-radius: 14px;
cursor: pointer;
font-family: var(--font-body);
font-size: 16px;
font-weight: 600;
transition:
background 0.15s,
transform 0.12s,
box-shadow 0.15s}
.cook-btn--prev{background: var(--paper-soft);
border: 1px solid var(--border);
color: var(--ink-muted)}
.cook-btn--prev:active{transform: scale(0.96)}
.cook-btn--prev:disabled{opacity: 0.4;
cursor: not-allowed}
.cook-btn--next{background: var(--brand);
color: var(--cream-fixed);
border: none;
box-shadow: 0 2px 8px oklch(0.59 0.16 143 / 0.3)}
@media (hover: hover) and (pointer: fine){.cook-btn--next:hover{box-shadow: 0 4px 14px oklch(0.59 0.16 143 / 0.42)}
}
.cook-btn--next:active{transform: scale(0.98)}
.cook-btn--next.is-done{background: var(--brand-dark)}
.cook-swipe-hint{position: fixed;
bottom: calc(96px + env(safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%);
font-size: 13px;
color: var(--ink-muted);
opacity: 0;
pointer-events: none;
animation: cookHint 4s ease both}
@keyframes cookHint{0%{opacity: 0}
12%{opacity: 1}
75%{opacity: 1}
100%{opacity: 0}
}
@media (max-width: 640px){.cook-mode-content{padding-top: 16px;
padding-bottom: 16px}
.cook-recipe-name{font-size: 19px;
margin-bottom: 20px}
.cook-step{font-size: clamp(26px, 7vw, 36px)}
.cook-step-wrap{min-height: 140px}
.cook-mode-eyebrow{font-size: 12px}
.cook-timer{font-size: 15px}
}
@media (prefers-reduced-motion: reduce){.cook-mode,
.cook-step.is-leaving,
.cook-step.is-entering,
.cook-mode-eyebrow,
.cook-recipe-name,
.cook-swipe-hint{animation: none}
.cook-progress-fill{transition: none}
}
.cook-mode-btn{background: linear-gradient(135deg, var(--danger), var(--brick-deep));
color: var(--cream-fixed);
border-color: var(--brick-deep)}
@media (hover: hover) and (pointer: fine){.cook-mode-btn:hover{background: linear-gradient(135deg, var(--brick-deep), var(--danger))}
}
.dash-hero-context{font-family: var(--font-display);
font-size: 16px;
font-style: italic;
color: var(--ink-soft);
margin-top: 8px;
line-height: 1.4;
animation: fadeInUp 0.6s ease both;
animation-delay: 0.3s}
@keyframes fadeInUp{from{opacity: 0;
transform: translateY(8px)}
to{opacity: 1;
transform: translateY(0)}
}
.dash-hero-ring-center{text-align: center;
position: relative}
.dash-hero-ring-pct{font-family: var(--font-display);
font-size: 42px;
color: var(--ink);
line-height: 1}
.dash-hero-ring-pct span{font-size: 23px;
color: var(--ink-muted)}
.dash-hero-ring-lbl{font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--ink-muted);
margin-top: 4px}
.dash-hero-numbers{display: flex;
flex-direction: column;
gap: 16px}
.dash-hero-ring-context{margin-top: 8px;
font-size: 13px;
color: var(--ink-soft);
text-align: center;
line-height: 1.5;
font-feature-settings: "tnum" 1}
.dash-hero-ring-context strong{color: var(--ink);
font-weight: 700}
.dash-hero-actions{position: relative;
display: flex;
gap: 8px;
flex-wrap: wrap}
.dash-hero-action{display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 980px;
background: var(--paper-sheet);
border: 1px solid var(--border);
font-size: 13px;
font-weight: 600;
color: var(--ink-soft);
text-decoration: none;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
.dash-hero-action-lead{font-family: var(--font-display);
font-size: 15px;
font-weight: 400;
color: var(--brand-dark);
line-height: 1}
@media (hover: hover) and (pointer: fine){.dash-hero-action:hover{background: var(--accent-tint);
border-color: var(--brand-dark);
color: var(--brand-dark);
transform: translateY(-1px)}
}
@media (hover: hover) and (pointer: fine){.dash-hero-action--urgent:hover{background: var(--accent-tint);
border-color: var(--brand-dark);
color: var(--brand-dark)}
}
.dash-for-you{margin: 36px 0 40px;
position: relative}
.dash-for-you-head{margin-bottom: 24px}
.dash-for-you-eyebrow{font-size: 13px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 8px}
.dash-for-you-title{font-family: var(--font-display);
font-size: clamp(24px, 3.4vw, 34px);
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--ink)}
.dash-for-you-title em{font-style: italic;
color: var(--brand-dark)}
.dash-for-you-grid{display: grid;
grid-template-columns: 1fr;
gap: 16px}
@media (min-width: 640px){.dash-for-you-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (min-width: 1024px){.dash-for-you-grid{grid-template-columns: repeat(3, 1fr)}
}
.dash-for-you-card{display: flex;
flex-direction: column;
gap: 8px;
padding: 24px 24px 16px;
min-height: 200px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl, 18px);
color: var(--ink);
text-decoration: none;
transition:
background 0.2s ease,
border-color 0.2s ease,
transform 0.15s ease}
@media (hover: hover) and (pointer: fine){.dash-for-you-card:hover{background: var(--paper-soft);
border-color: var(--brand);
transform: translateY(-2px)}
}
.dash-for-you-card:focus-visible{outline: 2px solid var(--brand);
outline-offset: 3px}
.dash-for-you-card-eyebrow{font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted)}
.dash-for-you-card-title{font-family: var(--font-display);
font-size: 23px;
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--ink);
font-style: italic}
.dash-for-you-card-sub{font-size: 15px;
line-height: 1.5;
color: var(--ink-muted)}
.dash-for-you-card-cta{margin-top: auto;
font-size: 13px;
font-weight: 600;
color: var(--brand-dark);
letter-spacing: 0.01em;
padding-top: 8px}
.dash-for-you-card--tonight{background: var(--accent-tint);
border-color: var(--accent-tint2)}
@media (hover: hover) and (pointer: fine){.dash-for-you-card--tonight:hover{background: var(--paper-sheet);
border-color: var(--brand)}
}
.dash-for-you-aubaines{list-style: none;
margin: 8px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px}
.dash-for-you-aubaines li{display: flex;
align-items: baseline;
gap: 8px;
font-size: 13px;
padding: 8px 0;
border-bottom: 1px solid var(--border)}
.dash-for-you-aubaines li:last-child{border-bottom: none}
.dash-for-you-aubaine-name{flex: 1;
color: var(--ink);
font-weight: 500}
.dash-for-you-aubaine-price{color: var(--brand-dark);
font-weight: 700;
font-variant-numeric: tabular-nums}
.dash-for-you-aubaine-store{font-size: 12px;
color: var(--ink-muted);
background: var(--paper-soft);
padding: 2px 8px;
border-radius: 999px}
@media (prefers-reduced-motion: reduce){.dash-for-you-card{transition: none}
@media (hover: hover) and (pointer: fine){.dash-for-you-card:hover{transform: none}
}
}
.composer-bar{position: fixed;
left: 50%;
bottom: calc(70px + env(safe-area-inset-bottom));
transform: translateX(-50%);
z-index: 85;
display: inline-flex;
align-items: center;
gap: 8px;
width: calc(100% - 24px);
max-width: 520px;
padding: 12px 16px;
min-height: 52px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 999px;
box-shadow: 0 6px 24px oklch(0.22 0.015 75 / 0.12);
color: var(--ink-muted);
font-size: 15px;
font-weight: 500;
cursor: pointer;
text-align: left;
transition:
transform 0.15s ease,
box-shadow 0.2s ease,
border-color 0.15s ease}
@media (hover: hover) and (pointer: fine){.composer-bar:hover{transform: translateX(-50%) translateY(-2px);
box-shadow: 0 10px 32px oklch(0.22 0.015 75 / 0.18);
border-color: var(--brand)}
}
.composer-bar:active{transform: translateX(-50%) translateY(0)}
.composer-bar:focus-visible{outline: 2px solid var(--brand);
outline-offset: 3px}
.composer-bar-icon{display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: var(--brand);
color: var(--cream-fixed);
border-radius: 50%;
flex-shrink: 0}
.composer-bar-glyph{font-family: var(--font-display, "Young Serif", serif);
font-size: 16px;
font-weight: 400;
line-height: 1;
padding-bottom: 2px}
.composer-bar-text{flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis}
.composer-bar-mic{color: var(--ink-muted);
flex-shrink: 0}
@media (min-width: 900px){.composer-bar{bottom: 24px;
max-width: 420px}
}
.composer-sheet[hidden]{display: none !important}
.composer-sheet{position: fixed;
inset: 0;
z-index: 9990;
display: flex;
align-items: flex-end;
animation: composerFadeIn 0.2s ease both}
.composer-sheet-backdrop{position: absolute;
inset: 0;
background: oklch(0.18 0.015 110 / 0.55);
cursor: pointer}
.composer-sheet-panel{position: relative;
width: 100%;
max-width: 560px;
margin: 0 auto;
background: var(--paper-sheet);
border-radius: 24px 24px 0 0;
padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: 0 -8px 32px oklch(0.22 0.016 75 / 0.25);
animation: composerSlideUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both}
.composer-sheet-handle{width: 44px;
height: 5px;
background: var(--border);
border-radius: 3px;
margin: 8px auto 16px}
.composer-sheet-head{display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px}
.composer-sheet-eyebrow{font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 8px}
.composer-sheet-title{font-family: var(--font-display);
font-size: 23px;
line-height: 1.2;
color: var(--ink);
font-weight: 400;
font-style: italic}
.composer-sheet-close{width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: var(--paper-soft);
color: var(--ink-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:
background 0.15s,
color 0.15s;
flex-shrink: 0}
@media (hover: hover) and (pointer: fine){.composer-sheet-close:hover{background: var(--border);
color: var(--ink)}
}
.composer-sheet-body{flex: 1;
min-height: 0;
overflow-y: auto;
margin-bottom: 16px;
-webkit-overflow-scrolling: touch}
.composer-suggestions-label{font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 12px}
.composer-suggestions{display: flex;
flex-direction: column;
gap: 8px}
.composer-suggestion{display: block;
width: 100%;
padding: 16px 16px;
background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: 14px;
color: var(--ink);
font-size: 15px;
text-align: left;
cursor: pointer;
transition:
background 0.15s,
border-color 0.15s,
transform 0.12s}
@media (hover: hover) and (pointer: fine){.composer-suggestion:hover{background: var(--paper-sheet);
border-color: var(--brand)}
}
.composer-suggestion:active{transform: scale(0.985)}
.composer-suggestion:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px}
.composer-thread{display: flex;
flex-direction: column;
gap: 12px}
.composer-msg{padding: 12px 16px;
border-radius: 16px;
font-size: 15px;
line-height: 1.5;
max-width: 85%}
.composer-msg--user{align-self: flex-end;
background: var(--brand);
color: var(--cream-fixed);
border-bottom-right-radius: 4px}
.composer-msg--assistant{align-self: flex-start;
background: var(--paper-soft);
color: var(--ink);
border-bottom-left-radius: 4px}
.composer-msg--thinking{align-self: flex-start;
background: var(--paper-soft);
color: var(--ink-muted);
font-style: italic}
.composer-msg--thinking::after{content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ink-muted);
margin-left: 8px;
animation: composerPulse 1s ease-in-out infinite}
@keyframes composerPulse{0%,
100%{opacity: 0.3}
50%{opacity: 1}
}
.composer-sheet-form{margin-top: auto}
.composer-sheet-input-wrap{display: flex;
align-items: center;
gap: 8px;
padding: 4px 4px 4px 16px;
background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: 999px;
transition: border-color 0.15s}
.composer-sheet-input-wrap:focus-within{border-color: var(--brand)}
.composer-sheet-input{flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 16px;
color: var(--ink);
padding: 8px 0;
font-family: var(--font-body)}
.composer-sheet-input::placeholder{color: var(--ink-muted)}
.composer-sheet-send{width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: var(--brand);
color: var(--cream-fixed);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition:
background 0.15s,
transform 0.12s;
flex-shrink: 0}
@media (hover: hover) and (pointer: fine){.composer-sheet-send:hover{background: var(--brand-dark)}
}
.composer-sheet-send:active{transform: scale(0.94)}
.composer-sheet-send:disabled{background: var(--border);
color: var(--ink-muted);
cursor: not-allowed}
@keyframes composerFadeIn{from{opacity: 0}
to{opacity: 1}
}
@keyframes composerSlideUp{from{transform: translateY(100%)}
to{transform: translateY(0)}
}
@media (prefers-reduced-motion: reduce){.composer-bar,
.composer-suggestion,
.composer-sheet-send{transition: none}
.composer-sheet,
.composer-sheet-panel,
.composer-msg--thinking::after{animation: none}
}
body:has(.cook-mode:not([hidden])) .composer-bar{display: none}
.dash-cta{display: flex;
flex-direction: column;
gap: 16px;
margin-top: 12px}
.dash-cta-primary{display: flex;
align-items: center;
gap: 16px;
padding: 16px 24px;
background: var(--paper-sheet);
border-radius: var(--radius-xl, 16px);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.03),
0 4px 14px rgba(0, 0, 0, 0.04);
text-decoration: none;
color: var(--ink);
transition:
background 0.2s ease,
box-shadow 0.2s ease,
transform 0.15s ease}
@media (hover: hover) and (pointer: fine){.dash-cta-primary:hover{background: var(--accent-tint);
box-shadow:
0 2px 4px rgba(74, 158, 70, 0.08),
0 8px 24px rgba(74, 158, 70, 0.1);
transform: translateY(-1px)}
}
.dash-cta-primary:active{transform: translateY(0)}
.dash-cta-primary--alt{background: var(--paper-soft)}
@media (hover: hover) and (pointer: fine){.dash-cta-primary--alt:hover{background: var(--accent-tint);
border-color: var(--accent)}
}
.dash-cta-primary:focus-visible{outline: 2px solid var(--brand);
outline-offset: 3px;
border-radius: var(--radius-xl, 16px)}
.dash-cta-primary--firstrun{background: var(--brand-dark, var(--brand));
border-color: var(--brand-dark, var(--brand));
color: var(--paper, #faf6ec);
width: 100%;
font-family: inherit;
font-size: inherit;
text-align: left;
cursor: pointer}
@media (hover: hover) and (pointer: fine){.dash-cta-primary--firstrun:hover{background: var(--brand);
transform: translateY(-1px)}
}
.dash-cta-primary--firstrun .dash-cta-sub{color: color-mix(in oklch, var(--paper) 85%, var(--brand));
opacity: 0.92}
.dash-cta-primary--firstrun .dash-cta-title{color: var(--paper, #faf6ec)}
.dash-cta-firstrun{margin: 0}
.dash-cta-secondary{display: inline-block;
padding: 8px 0 0;
margin-bottom: 12px;
font-size: 13px;
color: var(--ink-muted);
text-decoration: none;
letter-spacing: 0.01em;
align-self: center;
transition: color 0.15s ease}
@media (hover: hover) and (pointer: fine){.dash-cta-secondary:hover{color: var(--brand-dark, var(--brand))}
}
@media (hover: hover) and (pointer: fine){.dash-cta-secondary:hover{color: var(--brand-dark, var(--brand));
text-decoration: underline;
text-underline-offset: 3px}
}
.dash-cta-emoji{font-size: 30px;
line-height: 1;
flex-shrink: 0}
.dash-cta-body{display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0}
.dash-cta-title{font-family: var(--font-display, "Young Serif", serif);
font-size: clamp(18px, 4vw, 22px);
font-weight: 400;
color: var(--ink);
line-height: 1.15;
overflow-wrap: break-word;
hyphens: none}
.dash-cta-sub{font-size: 15px;
color: var(--ink-muted);
line-height: 1.45}
.dash-cta-arrow{font-size: 19px;
color: var(--brand-dark);
flex-shrink: 0;
transition: transform 0.2s ease}
@media (hover: hover) and (pointer: fine){.dash-cta-primary:hover .dash-cta-arrow{transform: translateX(3px)}
}
.dash-scan-auto{display: flex;
align-items: center;
gap: 16px;
padding: 16px 16px;
min-height: 64px;
background: var(--accent-tint);
border: 1px solid var(--accent-tint2);
border-radius: var(--radius-lg, 14px);
text-decoration: none;
color: var(--accent-deep);
margin-bottom: 12px;
transition:
background 0.2s ease,
border-color 0.2s ease,
transform 0.15s ease}
@media (hover: hover) and (pointer: fine){.dash-scan-auto:hover{background: var(--paper-sheet);
border-color: var(--brand);
transform: translateY(-1px)}
}
.dash-scan-auto:active{transform: translateY(0)}
.dash-scan-auto:focus-visible{outline: 2px solid var(--brand);
outline-offset: 3px}
.dash-scan-auto-icon{flex-shrink: 0;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--brand);
color: var(--cream-fixed);
border-radius: 50%}
.dash-scan-auto-body{display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1}
.dash-scan-auto-title{font-family: var(--font-display, "Young Serif", serif);
font-size: 19px;
font-weight: 400;
color: var(--accent-deep);
line-height: 1.15}
.dash-scan-auto-sub{font-size: 13px;
color: var(--accent-deep);
opacity: 0.82;
line-height: 1.3}
.dash-scan-precise{font-size: 13px;
color: var(--ink-muted);
margin-bottom: 8px;
padding: 0 4px;
font-style: italic}
.dash-scan-section{margin-top: 4px}
.dash-scan-eyebrow{font-size: 13px;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 8px;
padding: 0 4px}
.dash-scan-grid{display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px}
.dash-scan-card{display: flex;
align-items: center;
gap: 16px;
padding: 16px 16px;
min-height: 72px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-lg, 14px);
text-decoration: none;
color: var(--ink);
transition:
background 0.2s ease,
border-color 0.2s ease,
transform 0.15s ease}
@media (hover: hover) and (pointer: fine){.dash-scan-card:hover{background: var(--accent-tint);
border-color: var(--brand);
transform: translateY(-1px)}
}
.dash-scan-card:active{transform: translateY(0)}
.dash-scan-card:focus-visible{outline: 2px solid var(--brand);
outline-offset: 3px;
border-radius: var(--radius-lg, 14px)}
.dash-scan-card-icon{flex-shrink: 0;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--paper-soft);
border-radius: 50%;
color: var(--brand-dark);
transition:
background 0.2s ease,
color 0.2s ease}
@media (hover: hover) and (pointer: fine){.dash-scan-card:hover .dash-scan-card-icon{background: var(--paper-sheet)}
}
.dash-scan-card-body{display: flex;
flex-direction: column;
gap: 2px;
min-width: 0}
.dash-scan-card-title{font-family: var(--font-display, "Young Serif", serif);
font-size: 19px;
font-weight: 400;
color: var(--ink);
line-height: 1.15}
.dash-scan-card-sub{font-size: 13px;
color: var(--ink-muted);
line-height: 1.3}
@media (max-width: 480px){.dash-scan-card{padding: 16px;
gap: 8px}
.dash-scan-card-icon{width: 36px;
height: 36px}
.dash-scan-card-title{font-size: 16px}
.dash-scan-card-sub{font-size: 13px}
}
@media (prefers-reduced-motion: reduce){.dash-scan-card,
.dash-scan-card-icon{transition: none}
@media (hover: hover) and (pointer: fine){.dash-scan-card:hover{transform: none}
}
}
@media (prefers-reduced-motion: reduce){.dash-cta-primary,
.dash-cta-arrow{transition: none}
@media (hover: hover) and (pointer: fine){.dash-cta-primary:hover{transform: none}
}
@media (hover: hover) and (pointer: fine){.dash-cta-primary:hover .dash-cta-arrow{transform: none}
}
}
.frigo-tabs{display: flex;
gap: 4px;
padding: 4px;
margin: 0 0 24px;
background: var(--paper-soft);
border-radius: 14px;
border: 1px solid var(--border);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch}
.frigo-tabs::-webkit-scrollbar{display: none}
.frigo-tab{flex: 1 1 0;
min-width: max-content;
padding: 12px 16px;
border-radius: 10px;
font-weight: 600;
font-size: 15px;
text-align: center;
text-decoration: none;
color: var(--ink-muted);
transition:
background 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center}
@media (hover: hover) and (pointer: fine){.frigo-tab:hover{color: var(--ink)}
}
.frigo-tab.is-active{background: var(--paper-sheet);
color: var(--ink);
box-shadow: 0 1px 3px oklch(0.22 0.016 75 / 0.1)}
.frigo-tab:focus-visible{outline: 2px solid var(--accent);
outline-offset: 2px}
@media (prefers-reduced-motion: reduce){.frigo-tab{transition: none}
}
.menu-recipe-actions{display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 8px;
margin-bottom: 16px}
.menu-recipe-action{display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
min-height: 44px;
border: 1px solid var(--border);
background: var(--paper-sheet);
color: var(--ink-muted);
border-radius: 980px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition:
color 0.2s ease,
transform 0.15s ease,
background 0.15s ease,
border-color 0.15s ease}
.menu-recipe-action svg{flex-shrink: 0}
.menu-recipe-action-label{white-space: nowrap}
@media (hover: hover) and (pointer: fine){.menu-recipe-action:hover{background: var(--paper-soft);
color: var(--ink);
border-color: var(--ink-muted)}
}
.menu-recipe-action:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px}
.menu-recipe-fav.is-on{color: var(--heart);
border-color: var(--heart);
background: oklch(0.97 0.025 15)}
.menu-recipe-fav.is-on svg path{fill: currentColor}
@media (hover: hover) and (pointer: fine){.menu-recipe-fav.is-on:hover{color: var(--heart-deep);
border-color: var(--heart-deep)}
}
.menu-recipe-cooked.is-on{color: var(--brand-dark);
border-color: var(--brand);
background: var(--accent-tint)}
@media (hover: hover) and (pointer: fine){.menu-recipe-cooked.is-on:hover{color: var(--brand-dark)}
}
.menu-recipe-action.is-pulsing{animation: favPulse 0.45s cubic-bezier(0.25, 1, 0.5, 1)}
@keyframes favPulse{0%{transform: scale(1)}
40%{transform: scale(1.06)}
100%{transform: scale(1)}
}
@media (max-width: 480px){.menu-recipe-action{padding: 8px 12px}
.menu-recipe-action-label{display: none}
}
@media (prefers-reduced-motion: reduce){.menu-recipe-action,
.menu-recipe-action.is-pulsing{transition: none;
animation: none}
}
.cdc-empty{text-align: center;
padding: 80px 24px;
max-width: 520px;
margin: 0 auto}
.cdc-empty-emoji{font-size: 56px;
margin-bottom: 20px;
opacity: 0.85}
.cdc-empty-title{font-family: var(--font-display, "Young Serif", serif);
font-size: 30px;
font-weight: 400;
color: var(--ink);
margin-bottom: 12px;
line-height: 1.15}
.cdc-empty-lede{font-size: 16px;
color: var(--ink-muted);
line-height: 1.55;
margin-bottom: 28px}
.cdc-grid{display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-top: 24px}
.cdc-card{position: relative;
display: flex;
gap: 16px;
padding: 16px 16px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl, 16px);
transition:
transform 0.15s ease,
border-color 0.15s ease}
@media (hover: hover) and (pointer: fine){.cdc-card:hover{border-color: var(--brand);
transform: translateY(-1px)}
}
.cdc-card-emoji{font-size: 38px;
line-height: 1;
flex-shrink: 0}
.cdc-card-body{flex: 1;
min-width: 0}
.cdc-card-title{font-family: var(--font-display, "Young Serif", serif);
font-size: 19px;
font-weight: 400;
color: var(--ink);
line-height: 1.2;
margin-bottom: 4px}
.cdc-card-meta{font-size: 13px;
color: var(--ink-muted);
display: flex;
flex-wrap: wrap;
gap: 4px 0}
.cdc-card-meta > span{margin-right: 4px}
.cdc-card-sep{color: var(--border)}
.cdc-card-date{font-size: 13px;
color: var(--ink-muted);
opacity: 0.7;
margin-top: 8px}
.cdc-card-remove-form{position: absolute;
top: 4px;
right: 4px}
.cdc-card-remove{width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: transparent;
color: var(--ink-muted);
font-size: 16px;
cursor: pointer;
opacity: 0.5;
display: inline-flex;
align-items: center;
justify-content: center;
transition:
opacity 0.15s ease,
background 0.15s ease}
@media (hover: hover) and (pointer: fine){.cdc-card-remove:hover{opacity: 1;
background: var(--paper-soft)}
}
.cdc-card-remove:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px;
opacity: 1}
@media (prefers-reduced-motion: reduce){.cdc-card,
.cdc-card-remove{transition: none}
@media (hover: hover) and (pointer: fine){.cdc-card:hover{transform: none}
}
}
.dash-tabs{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
overflow: hidden}
.dash-tabs-nav{display: flex;
border-bottom: 1px solid var(--border);
padding: 0 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none}
.dash-tabs-nav::-webkit-scrollbar{display: none}
.dash-tabs-nav .dash-tab{white-space: nowrap;
flex-shrink: 0}
.dash-tab{flex: 1;
padding: 16px 16px;
border: none;
background: none;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--ink-muted);
cursor: pointer;
position: relative;
transition: color 0.2s}
@media (hover: hover) and (pointer: fine){.dash-tab:hover{color: var(--ink)}
}
.dash-tab:focus-visible{outline: 2px solid var(--brand);
outline-offset: -2px;
border-radius: 6px}
.dash-tab.is-active{color: var(--brand-dark)}
.dash-tab.is-active::after{content: "";
position: absolute;
bottom: -1px;
left: 16px;
right: 16px;
height: 2px;
background: var(--brand-dark);
border-radius: 2px 2px 0 0}
.dash-tab-badge{display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
background: var(--danger);
color: var(--cream-fixed);
font-size: 12px;
font-weight: 700;
border-radius: 9px;
margin-left: 8px}
.dash-tab-panel{padding: clamp(20px, 3vw, 32px)}
.dash-tab-panel[hidden]{display: none}
@media (max-width: 640px){.dash-hero-grid{grid-template-columns: 1fr;
justify-items: center;
gap: 20px}
.dash-hero-ring{width: 150px;
height: 150px}
.dash-hero-ring svg{width: 150px;
height: 150px}
.dash-hero-ring-pct{font-size: 38px}
.dash-hero-numbers{flex-direction: row;
gap: 0;
width: 100%;
text-align: center}
.dash-hero-actions{justify-content: center}
.dash-hero-action{font-size: 13px;
padding: 8px 12px}
.dash-tabs-nav{overflow-x: auto;
-webkit-overflow-scrolling: touch}
.dash-tab{white-space: nowrap;
flex: none;
padding: 12px 16px}
}
.dash-budget{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px);
margin-bottom: 32px;
position: relative;
overflow: hidden}
.dash-budget::before{content: none}
.dash-budget-grid{display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(24px, 4vw, 56px);
align-items: center;
position: relative;
z-index: 1}
.dash-budget-main{min-width: 0}
.dash-budget-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 16px}
.dash-budget-amount{font-family: var(--font-body);
font-size: clamp(56px, 8vw, 96px);
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -0.03em;
color: var(--ink);
line-height: 0.92;
margin-bottom: 16px;
display: flex;
align-items: baseline}
.dash-budget-currency{font-size: 0.4em;
font-weight: 600;
color: var(--ink-muted);
margin-right: 8px;
letter-spacing: -0.01em}
.dash-budget-sub{font-family: var(--font-body);
font-size: clamp(14px, 1.4vw, 16px);
line-height: 1.6;
color: var(--ink-soft);
margin: 0 0 16px;
max-width: 56ch}
.dash-budget-sub strong{font-family: var(--font-body);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ink)}
.dash-budget-savings{color: var(--brand-dark) !important;
font-size: 1.06em}
.dash-budget-tags{display: flex;
gap: 8px;
flex-wrap: wrap}
.dash-tag{display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 980px;
border: 1px solid var(--border);
background: var(--paper-sheet);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--ink-soft)}
.dash-tag-accent{color: var(--brand-dark);
border-color: oklch(0.59 0.16 143 / 0.26);
background: var(--accent-tint);
font-weight: 600}
.dash-budget-ring{position: relative;
flex-shrink: 0;
width: 156px;
height: 156px;
display: flex;
align-items: center;
justify-content: center}
.dash-budget-ring-center{position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center}
.dash-budget-ring-pct{font-family: var(--font-body);
font-size: 30px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1}
.dash-budget-ring-pct span{font-size: 0.5em;
color: var(--ink-muted);
margin-left: 2px}
.dash-budget-ring-lbl{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
margin-top: 8px;
max-width: 110px;
line-height: 1.35}
.dash-budget-ring-reste{font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
color: var(--brand-dark);
margin-top: 4px}
.dash-stats{display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--border);
margin-bottom: 36px}
.dash-stat{padding: 24px 24px;
border-right: 1px solid var(--border)}
.dash-stat:last-child{border-right: none}
.dash-stat-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 12px}
.dash-stat-value{font-family: var(--font-display);
font-size: clamp(28px, 3.2vw, 42px);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1;
color: var(--ink);
font-variant-numeric: tabular-nums}
.dash-stat-value sub{font-family: var(--font-body);
font-size: 0.32em;
color: var(--ink-muted);
vertical-align: baseline;
font-weight: 500;
margin-left: 8px;
letter-spacing: 0.02em;
text-transform: lowercase}
.dash-stat-note{font-family: var(--font-body);
font-size: 13px;
font-style: italic;
color: var(--ink-muted);
margin-top: 8px;
line-height: 1.5}
.dash-recevoir-banner{display: flex;
align-items: center;
gap: 16px;
margin: 16px 0 24px;
padding: 16px 20px;
border: 1px solid color-mix(in oklch, var(--brand) 25%, var(--border, oklch(0.88 0.02 75)));
border-radius: 12px;
background: var(--paper-soft, var(--paper));
text-decoration: none;
color: inherit;
transition: border-color 0.15s ease;
min-height: 44px}
@media (hover: hover) and (pointer: fine){.dash-recevoir-banner:hover,
.dash-recevoir-banner:focus-visible{border-color: color-mix(in oklch, var(--brand) 50%, var(--border));
outline: none}
}
.dash-recevoir-banner:focus-visible{box-shadow:
0 0 0 2px var(--brand-dark, var(--brand)),
0 0 0 4px var(--paper)}
.dash-recevoir-banner:active{transform: translateY(1px)}
.dash-recevoir-banner-body{flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0}
.dash-recevoir-banner-eyebrow{font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--brand-dark, var(--brand))}
.dash-recevoir-banner-title{font-family: var(--font-display, var(--font-body));
font-size: 19px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
line-height: 1.25}
.dash-recevoir-banner-lede{font-size: 13px;
line-height: 1.5;
color: var(--ink-soft)}
.dash-recevoir-banner-cta{flex-shrink: 0;
font-size: 13px;
font-weight: 600;
color: var(--brand-dark, var(--brand));
text-transform: uppercase;
letter-spacing: 0.06em}
@media (max-width: 560px){.dash-recevoir-banner{flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 16px}
.dash-recevoir-banner-title{font-size: 17px}
.dash-recevoir-banner-cta{display: flex;
align-items: center;
min-height: 44px}
}
.dash-section{margin-bottom: var(--space-2xl)}
.dash-section-head{display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"eyebrow action"
"title   action";
gap: 4px 16px;
align-items: center;
margin-bottom: 16px}
.dash-section-eyebrow{grid-area: eyebrow;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-dark)}
.dash-section-title{grid-area: title;
font-family: var(--font-display);
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 400;
letter-spacing: -0.014em;
color: var(--ink);
line-height: 1.1;
margin: 0;
text-wrap: balance}
.dash-section-title--md{font-size: 23px}
.dash-section-title--lg{font-size: 23px}
.dash-section-title em{color: var(--brand-dark);
font-style: italic;
font-family: var(--font-display)}
.dash-section-action{grid-area: action;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--brand-dark);
align-self: end;
text-decoration: none;
white-space: nowrap}
@media (hover: hover) and (pointer: fine){.dash-section-action:hover{color: var(--brand-dark);
text-decoration: underline;
text-underline-offset: 4px}
}
.dash-section-body{display: flex;
flex-direction: column}
.dash-empty{text-align: center;
padding: var(--space-2xl) var(--space-lg);
background: var(--paper-soft);
border-radius: var(--radius)}
.dash-empty-icon{display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
color: var(--ink-muted);
opacity: 0.7}
.dash-empty-mark{font-family: var(--font-display, 'Young Serif', serif);
font-size: 80px;
line-height: 1;
color: var(--brand-dark, var(--brand));
opacity: 0.6;
margin-bottom: 16px}
.dash-empty-title{font-family: var(--font-display);
font-size: 19px;
color: var(--ink);
margin-bottom: 8px;
text-wrap: balance}
.dash-empty p{font-family: var(--font-body);
font-size: 15px;
color: var(--ink-muted);
margin: 0 0 16px;
text-wrap: balance}
.dash-empty-alt{font-size: 13px !important;
color: var(--ink-fade, var(--ink-muted)) !important;
margin-top: 16px !important;
margin-bottom: 0 !important}
.pantry-legend{display: flex;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 16px;
padding: 8px 16px;
background: var(--paper-soft);
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--ink-muted)}
.pantry-legend-item{display: flex;
align-items: center;
gap: 8px}
.pantry-legend-dot{width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0}
.pantry-legend-dot--urgent{background: var(--danger)}
.pantry-legend-dot--warn{background: var(--courge)}
.pantry-legend-dot--ok{background: var(--brand-dark)}
.dash-meal{display: grid;
grid-template-columns: 44px 1fr auto;
gap: 16px;
align-items: center;
padding: 16px 4px;
border-bottom: 1px solid var(--border2);
text-decoration: none;
color: inherit;
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1)}
@media (hover: hover) and (pointer: fine){.dash-meal:hover{transform: translateX(12px)}
}
.dash-meal:last-child{border-bottom: none}
.dash-meal-emoji{font-size: 38px;
line-height: 1;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0}
.cover-beef,
.cover-poultry,
.cover-sea,
.cover-pasta,
.cover-pizza,
.cover-green,
.cover-stew,
.cover-sweet,
.cover-breakfast,
.cover-grain,
.cover-mex,
.cover-neutral{background: var(--paper-sheet)}
.recipe-cover.cover-beef,
.recipe-cover.cover-poultry,
.recipe-cover.cover-sea,
.recipe-cover.cover-pasta,
.recipe-cover.cover-pizza,
.recipe-cover.cover-green,
.recipe-cover.cover-stew,
.recipe-cover.cover-sweet,
.recipe-cover.cover-breakfast,
.recipe-cover.cover-grain,
.recipe-cover.cover-mex,
.recipe-cover.cover-neutral{border-top: 2px solid var(--brand)}
[data-theme="dark"] .cover-beef,
[data-theme="dark"] .cover-poultry,
[data-theme="dark"] .cover-sea,
[data-theme="dark"] .cover-pasta,
[data-theme="dark"] .cover-pizza,
[data-theme="dark"] .cover-green,
[data-theme="dark"] .cover-stew,
[data-theme="dark"] .cover-sweet,
[data-theme="dark"] .cover-breakfast,
[data-theme="dark"] .cover-grain,
[data-theme="dark"] .cover-mex,
[data-theme="dark"] .cover-neutral{background: var(--paper-sheet)}
.dash-meal-info{min-width: 0}
.dash-meal-name{font-family: var(--font-display);
font-size: 19px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.008em;
line-height: 1.2;
margin-bottom: 4px}
.dash-meal-meta{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
letter-spacing: 0.02em}
.dash-meal-price{font-family: var(--font-body);
font-size: 16px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--ink);
flex-shrink: 0;
letter-spacing: -0.01em}
.dash-meal-price.is-free{color: var(--brand-dark)}
.dash-pred{display: block;
padding: 16px 16px;
border-bottom: 1px solid var(--border2)}
.dash-pred:last-child{border-bottom: none}
.dash-pred-name{font-family: var(--font-display);
font-size: 16px;
color: var(--ink);
margin-bottom: 4px;
letter-spacing: -0.005em}
.dash-pred-msg{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
line-height: 1.5}
.dash-alert{padding: 16px 16px;
background: var(--accent-tint);
border-radius: 12px;
margin-top: 12px;
border: 1px solid oklch(0.62 0.14 68 / 0.22)}
.dash-alert-title{font-family: var(--font-display);
font-size: 15px;
color: oklch(0.42 0.12 68);
margin-bottom: 4px;
letter-spacing: -0.005em}
.dash-alert-body{font-family: var(--font-body);
font-size: 13px;
line-height: 1.55;
color: oklch(0.4 0.1 68)}
.dash-pantry{display: grid;
grid-template-columns: 32px 1fr auto;
gap: 16px;
align-items: center;
padding: 16px 4px;
border-bottom: 1px solid var(--border2)}
.dash-pantry:last-child{border-bottom: none}
.dash-pantry-emoji{font-size: 23px}
.dash-pantry-name{font-family: var(--font-body);
font-size: 15px;
color: var(--ink);
font-weight: 500}
.dash-pantry-expire{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 980px;
white-space: nowrap}
.dash-pantry-expire--ok{background: var(--accent-tint);
color: var(--brand-dark)}
.dash-pantry-expire--warn{background: var(--accent-tint);
color: oklch(0.42 0.12 68)}
.dash-pantry-expire--urgent{background: var(--danger-tint);
color: var(--danger)}
.dash-deal{display: grid;
grid-template-columns: 100px 1fr auto;
gap: 16px;
align-items: center;
padding: 16px 4px;
border-bottom: 1px solid var(--border2)}
.dash-deal:last-child{border-bottom: none}
.dash-deal-store{font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 980px;
text-align: center;
white-space: nowrap}
.dash-deal-name{font-family: var(--font-display);
font-size: 16px;
color: var(--ink);
letter-spacing: -0.005em}
.dash-deal-prices{display: flex;
align-items: baseline;
gap: 8px;
flex-shrink: 0}
.dash-deal-price{font-family: var(--font-body);
font-size: 16px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: var(--brand-dark);
letter-spacing: -0.01em}
.dash-deal-original{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-fade);
text-decoration: line-through;
font-variant-numeric: tabular-nums}
.dash-deal-pct{font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
padding: 4px 8px;
border-radius: 4px;
background: var(--accent-tint);
color: var(--brand-dark)}
@media (max-width: 900px){.dash-budget{padding: 28px 24px}
.dash-budget-grid{grid-template-columns: 1fr;
gap: 32px;
text-align: left}
.dash-budget-amount{font-size: clamp(48px, 14vw, 72px)}
.dash-budget-ring{margin: 0 auto}
.dash-stats{grid-template-columns: 1fr}
.dash-stat{border-right: none;
border-bottom: 1px solid var(--border);
padding: 24px 4px}
.dash-stat:last-child{border-bottom: none}
.dash-section-head{grid-template-columns: 1fr;
grid-template-areas:
"eyebrow"
"title"
"action";
gap: 8px}
.dash-section-action{align-self: start}
}
@media (max-width: 480px){.dash-meal{grid-template-columns: 40px 1fr auto;
gap: 12px}
.dash-meal-emoji{width: 40px;
height: 40px;
font-size: 30px}
.dash-meal-name{font-size: 16px}
.dash-deal{grid-template-columns: 1fr auto;
gap: 8px}
.dash-deal-store{grid-column: 1 / -1;
justify-self: start}
.dash-pred{grid-template-columns: 1fr;
gap: 8px}
.dash-pred-action{justify-self: start}
}
.vote-banner{display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 24px;
margin-bottom: 28px}
.vote-banner-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 4px}
.vote-banner-meta{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted)}
.vote-card{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 28px;
margin-bottom: 16px}
.vote-card-head{display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center;
gap: 16px;
margin-bottom: 16px}
.vote-card-emoji{font-size: 38px;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: var(--paper-soft);
border-radius: 14px}
.vote-card-name{font-family: var(--font-display);
font-size: 19px;
color: var(--ink);
margin: 0 0 4px;
letter-spacing: -0.008em}
.vote-card-meta{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted)}
.vote-card-fav{font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 980px;
background: var(--accent-tint);
color: var(--brand-dark);
border: 1px solid oklch(0.59 0.16 143 / 0.26)}
.vote-members{display: flex;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap}
.vote-member{display: flex;
align-items: center;
gap: 8px}
.vote-member-avatar{width: 28px;
height: 28px;
border-radius: 50%;
background: var(--brand-dark);
color: var(--cream-fixed);
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase}
.vote-member-icon{font-family: var(--font-display);
font-size: 15px;
width: 18px;
text-align: center}
.vote-member-icon--oui{color: var(--brand-dark)}
.vote-member-icon--non{color: var(--danger)}
.vote-member-icon--peut_etre{color: var(--danger)}
.vote-member-icon--pending{color: var(--ink-fade)}
.vote-bar{height: 6px;
background: var(--paper-deep);
border-radius: 3px;
overflow: hidden}
.vote-bar-fill{height: 100%;
background: var(--brand-dark);
border-radius: 3px;
transform-origin: left center;
transform: scaleX(var(--progress, 0));
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform}
.vote-bar-meta{display: flex;
justify-content: space-between;
font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
margin-top: 8px}
.vote-bar-meta strong{font-family: var(--font-display);
font-size: 16px;
color: var(--brand-dark)}
.vote-form{display: flex;
gap: 8px;
margin-top: 16px;
flex-wrap: wrap}
.vote-form input{flex: 1;
min-width: 140px;
font-family: var(--font-body);
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink)}
.vote-form button{padding: 8px 16px;
font-size: 13px}
.vote-form-no{color: var(--danger);
border-color: oklch(0.44 0.14 25 / 0.34)}
.coloc-onboarding{display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 720px;
margin: 0 auto}
@media (max-width: 768px){.coloc-onboarding{grid-template-columns: 1fr}
}
.coloc-onboarding-card{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 36px 32px;
text-align: center}
.coloc-onboarding-rank{font-family: var(--font-display);
font-size: 38px;
color: var(--brand-dark);
margin-bottom: 8px}
.coloc-onboarding-title{font-family: var(--font-display);
font-size: 23px;
color: var(--ink);
margin: 0 0 12px}
.coloc-onboarding-card p{font-family: var(--font-body);
font-size: 15px;
color: var(--ink-soft);
margin: 0 0 24px}
.coloc-onboarding-card input{width: 100%;
font-family: var(--font-body);
padding: 12px 16px;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink);
margin-bottom: 12px}
.coloc-onboarding-code{text-align: center;
font-family: var(--font-display) !important;
font-size: 23px !important;
letter-spacing: 0.16em;
text-transform: uppercase}
.coloc-header{display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 28px 32px;
margin-bottom: 28px;
flex-wrap: wrap}
.coloc-header-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 8px}
.coloc-header-name{font-family: var(--font-display);
font-size: 30px;
color: var(--ink);
margin: 0 0 4px;
letter-spacing: -0.018em}
.coloc-header-meta{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted)}
.coloc-header-code{text-align: center;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 24px}
.coloc-header-code-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 8px}
.coloc-header-code-value{font-family: var(--font-display);
font-size: 23px;
letter-spacing: 0.18em;
color: var(--brand-dark);
font-weight: 400}
.coloc-balances{display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px}
.coloc-balance{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px 16px;
text-align: center}
.coloc-balance.is-positive{border-color: oklch(0.59 0.16 143 / 0.26)}
.coloc-balance.is-negative{border-color: oklch(0.44 0.14 25 / 0.26)}
.coloc-balance-avatar{width: 44px;
height: 44px;
border-radius: 50%;
background: var(--accent-tint);
color: var(--brand-dark);
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 8px}
.coloc-balance.is-negative .coloc-balance-avatar{background: var(--danger-tint);
color: var(--danger)}
.coloc-balance-name{font-family: var(--font-display);
font-size: 15px;
color: var(--ink);
margin-bottom: 8px}
.coloc-balance-value{font-family: var(--font-display);
font-size: 23px;
letter-spacing: -0.018em;
font-variant-numeric: tabular-nums}
.coloc-balance.is-positive .coloc-balance-value{color: var(--brand-dark)}
.coloc-balance.is-negative .coloc-balance-value{color: var(--danger)}
.coloc-balance-note{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
margin-top: 4px}
.coloc-turn{background: var(--accent-tint);
border: 1px solid oklch(0.59 0.16 143 / 0.26);
border-radius: var(--radius);
padding: 24px 28px;
margin-bottom: 28px;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap}
.coloc-turn-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 4px}
.coloc-turn-name{font-family: var(--font-display);
font-size: 23px;
color: var(--ink);
flex: 1}
.coloc-add-form{display: grid;
grid-template-columns: 2fr 1fr auto;
gap: 16px;
align-items: end;
padding: 24px 24px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 16px}
@media (max-width: 768px){.coloc-add-form{grid-template-columns: 1fr}
}
.coloc-add-form .form-group{margin-bottom: 0}
.coloc-add-form .btn-main{padding: 12px 24px}
.coloc-expense{display: grid;
grid-template-columns: 80px 1fr auto;
gap: 16px;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid var(--border2)}
.coloc-expense:last-child{border-bottom: none}
.coloc-expense-date{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.06em}
.coloc-expense-desc{font-family: var(--font-display);
font-size: 16px;
color: var(--ink)}
.coloc-expense-payer{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
font-style: italic}
.coloc-expense-amount{font-family: var(--font-body);
font-size: 16px;
font-weight: 700;
color: var(--brand-dark);
font-variant-numeric: tabular-nums}
.coloc-actions{margin-top: 32px;
text-align: center}
.coloc-leave{color: var(--danger);
border-color: oklch(0.44 0.14 25 / 0.34)}
.parrainage-link{background: var(--paper);
border: 1.5px solid var(--border);
border-radius: var(--radius);
padding: 16px 24px;
font-family: var(--font-body);
font-size: 13px;
color: var(--ink);
word-break: break-all;
margin-bottom: 16px}
.parrainage-actions{display: flex;
gap: 12px;
margin-bottom: 24px}
.parrainage-actions .btn-main,
.parrainage-actions .btn-sec{flex: 1;
padding: 12px}
.parrainage-code{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-soft);
background: var(--accent-tint);
border: 1px solid oklch(0.59 0.16 143 / 0.22);
border-radius: var(--radius-sm);
padding: 16px 16px;
margin: 0 0 28px}
.parrainage-code strong{font-family: var(--font-display);
font-size: 16px;
color: var(--brand-dark);
letter-spacing: 0.04em}
.parrainage-email{border-top: 1px solid var(--border);
padding-top: 24px}
.parrainage-email-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 12px}
.parrainage-email-form{display: flex;
gap: 8px}
.parrainage-email-form input{flex: 1;
font-family: var(--font-body);
padding: 12px 16px;
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
background: var(--paper)}
.parrainage-filleul{display: grid;
grid-template-columns: 44px 1fr auto;
align-items: center;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--border2)}
.parrainage-filleul:last-child{border-bottom: none}
.parrainage-filleul-avatar{width: 44px;
height: 44px;
border-radius: 50%;
background: var(--accent-tint);
color: var(--brand-dark);
font-family: var(--font-display);
font-size: 19px;
display: flex;
align-items: center;
justify-content: center}
.parrainage-filleul-name{font-family: var(--font-display);
font-size: 16px;
color: var(--ink)}
.parrainage-filleul-date{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted)}
.parrainage-filleul-plan{font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 980px;
background: var(--paper-soft);
color: var(--ink-muted);
border: 1px solid var(--border)}
.parrainage-filleul-plan.is-premium{background: var(--accent-tint);
color: var(--brand-dark);
border-color: oklch(0.59 0.16 143 / 0.26)}
.gaspillage-bar{height: 32px;
border-radius: 16px;
overflow: hidden;
display: flex;
border: 1px solid var(--border)}
.gaspillage-bar-good,
.gaspillage-bar-bad{display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--cream-fixed)}
.gaspillage-bar-good{background: var(--brand-dark)}
.gaspillage-bar-bad{background: var(--danger)}
.gaspillage-row{display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid var(--border2);
font-family: var(--font-body);
font-size: 15px}
.gaspillage-row:last-child{border-bottom: none}
.gaspillage-row-name{color: var(--ink)}
.gaspillage-row-count{color: var(--danger);
font-weight: 600;
font-variant-numeric: tabular-nums}
.gaspillage-mark{display: inline}
.gaspillage-mark-good,
.gaspillage-mark-bad{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 12px;
border-radius: 980px;
border: 1px solid currentColor;
background: transparent;
cursor: pointer}
.gaspillage-mark-good{color: var(--brand-dark);
background: var(--accent-tint)}
.gaspillage-mark-bad{color: var(--danger);
background: var(--danger-tint)}
.defi{display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
padding: 20px 24px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 12px}
.defi.is-complete{background: var(--accent-tint);
border-color: oklch(0.59 0.16 143 / 0.26)}
.defi-title{font-family: var(--font-display);
font-size: 19px;
color: var(--ink);
margin: 0 0 4px}
.defi-desc{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-soft);
margin: 0 0 12px}
.defi-bar{height: 4px;
background: var(--paper-deep);
border-radius: 2px;
overflow: hidden;
margin-bottom: 8px}
.defi-bar-fill{height: 100%;
width: 100%;
background: var(--brand-dark);
border-radius: 2px;
transform-origin: left center;
transform: scaleX(var(--progress, 0))}
.defi-meta{display: flex;
justify-content: space-between;
font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted)}
.defi-complete-badge{font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 980px;
background: var(--brand-dark);
color: var(--cream-fixed)}
.achievements-grid{display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px}
.achievement{text-align: center;
padding: 16px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--paper)}
.achievement.is-locked{opacity: 0.45}
.achievement.is-unlocked{background: var(--accent-tint);
border-color: oklch(0.59 0.16 143 / 0.26)}
.achievement-name{font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--ink)}
.abo-plans{display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 2.4vw, 32px);
align-items: stretch;
margin-bottom: 32px}
@media (max-width: 900px){.abo-plans{grid-template-columns: 1fr;
max-width: 560px;
margin: 0 auto 32px}
}
.abo-section-title{font-family: var(--font-display, "Young Serif", Georgia, serif);
font-size: clamp(24px, 3.6vw, 32px);
font-weight: 400;
line-height: 1.2;
color: var(--ink);
margin: 28px 0 8px;
letter-spacing: -0.01em}
.abo-section-title em{font-style: italic;
color: var(--brand-dark)}
.abo-section-title--famille{margin-top: 48px;
padding-top: 28px;
border-top: 1px solid var(--border)}
.abo-section-lede{font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
max-width: 64ch;
margin: 0 0 16px}
.abo-section-lede strong{color: var(--ink);
font-weight: 600}
.tarif.is-current{border-color: var(--brand-dark);
background: var(--accent-tint)}
.tarif-current{font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
padding: 16px;
background: var(--brand-dark);
color: var(--cream-fixed);
border-radius: var(--radius-sm);
margin-top: auto}
.abo-portail-lede{font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
margin: 0 0 24px;
max-width: 60ch}
.compte-name{font-family: var(--font-display);
font-size: clamp(28px, 3vw, 38px);
color: var(--ink);
letter-spacing: -0.018em;
line-height: 1.1;
margin: 8px 0 4px}
.compte-email{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
margin-bottom: 16px}
.compte-verify-warning{display: inline-block;
font-family: var(--font-body);
font-size: 13px;
color: var(--danger);
background: var(--brick-tint);
border: 1px solid oklch(0.59 0.16 143 / 0.26);
border-radius: var(--radius-sm);
padding: 8px 16px;
margin-top: 12px;
text-decoration: none}
.compte-plan{background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px 24px;
margin-bottom: 16px}
.compte-plan-head{display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px}
.compte-plan-name{font-family: var(--font-display);
font-size: 23px;
color: var(--ink);
margin-bottom: 4px}
.compte-plan-price{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-soft)}
.compte-plan-status{font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 8px 16px;
border-radius: 980px;
background: var(--accent-tint);
color: var(--brand-dark)}
.compte-plan-meta{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
margin: 8px 0 0}
.compte-plan-meta--warn{color: var(--danger)}
.compte-plan-actions{display: flex;
gap: 8px;
flex-wrap: wrap}
.compte-plan-note{margin-top: 12px;
padding: 12px 16px;
background: var(--accent-tint);
border: 1px solid color-mix(in oklch, var(--accent, var(--brand)) 22%, transparent);
border-radius: 8px;
font-size: 13px;
line-height: 1.55;
color: var(--ink-soft)}
.onb-cards{display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin: 28px 0 8px}
.onb-card{position: relative;
padding: 16px 40px 16px 16px;
background: var(--accent-tint);
border: 1px solid color-mix(in oklch, var(--brand) 25%, transparent);
border-radius: 14px;
transition:
opacity 0.22s ease,
transform 0.22s ease}
.onb-card.is-leaving{opacity: 0;
transform: translateY(-4px)}
.onb-card-title{font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
font-style: italic;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 8px;
line-height: 1.25}
.onb-card p{font-size: 15px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0}
.onb-card-close{position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
border: none;
background: transparent;
font-size: 15px;
color: var(--ink-muted);
cursor: pointer;
border-radius: 50%;
transition:
background 0.15s,
color 0.15s}
@media (hover: hover) and (pointer: fine){.onb-card-close:hover{background: var(--paper-soft);
color: var(--ink)}
}
.onb-card-close:focus-visible{outline: 2px solid var(--brand);
outline-offset: 1px}
.compte-verify-banner{display: flex;
align-items: center;
gap: 12px;
padding: 16px 16px;
margin: 16px 0;
background: var(--accent-tint);
border: 1px solid color-mix(in oklch, var(--courge) 35%, transparent);
border-radius: 12px;
text-decoration: none;
color: var(--ink);
font-size: 15px;
line-height: 1.5;
transition:
transform 0.15s ease,
border-color 0.15s ease}
@media (hover: hover) and (pointer: fine){.compte-verify-banner:hover{transform: translateY(-1px);
border-color: var(--courge)}
}
.compte-verify-banner-icon{font-size: 23px;
flex-shrink: 0}
.compte-verify-banner-text{flex: 1;
min-width: 0}
.compte-verify-banner-arrow{font-size: 19px;
color: var(--courge);
flex-shrink: 0}
.compte-cancel{color: var(--danger) !important;
border-color: oklch(0.44 0.14 25 / 0.34) !important}
.compte-invoice{display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 16px;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid var(--border2)}
.compte-invoice:last-child{border-bottom: none}
.compte-invoice-date{font-family: var(--font-display);
font-size: 16px;
color: var(--ink)}
.compte-invoice-num{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted)}
.compte-invoice-amount{font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
color: var(--brand-dark);
font-variant-numeric: tabular-nums}
.compte-invoice-status{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brand-dark)}
.compte-invoice-pdf{padding: 8px 12px;
font-size: 12px}
.compte-jump{display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
padding: 16px;
background: var(--paper-soft);
border-radius: 14px;
border: 1px solid var(--border)}
.compte-jump a{padding: 8px 16px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: var(--ink);
text-decoration: none;
white-space: nowrap;
transition:
background 0.15s,
border-color 0.15s}
@media (hover: hover) and (pointer: fine){.compte-jump a:hover{background: var(--accent-tint);
border-color: var(--accent)}
}
.compte-jump-danger{color: var(--danger) !important}
@media (hover: hover) and (pointer: fine){.compte-jump-danger:hover{background: color-mix(in oklch, var(--danger) 12%, transparent) !important;
border-color: var(--danger) !important}
}
html{scroll-behavior: smooth;
scroll-padding-top: 16px}
.compte-quicklinks{display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px}
.compte-quicklink{display: block;
padding: 16px 24px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
text-decoration: none;
transition:
border-color 0.25s,
transform 0.25s}
@media (hover: hover) and (pointer: fine){.compte-quicklink:hover{border-color: var(--brand-dark);
transform: translateY(-2px)}
}
.compte-quicklink-name{font-family: var(--font-display);
font-size: 16px;
color: var(--ink);
margin-bottom: 4px}
.compte-quicklink-meta{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted)}
.compte-danger{border: 1px solid oklch(0.44 0.14 25 / 0.26);
border-radius: var(--radius-xl);
background: var(--danger-tint);
padding: 24px 28px}
.compte-danger-lede{font-family: var(--font-body);
font-size: 15px;
color: var(--ink-soft);
margin: 0 0 16px}
.compte-modal{position: fixed;
inset: 0;
background: oklch(0.18 0.016 120 / 0.42);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
border: none;
margin: 0;
padding: 24px;
width: 100%;
height: 100dvh;
inset: 0}
.compte-modal[hidden]{display: none}
.compte-modal-inner{background: var(--paper-sheet);
border-radius: var(--radius-xl);
padding: 36px;
max-width: 460px;
width: 100%;
box-shadow: var(--shadow-lg)}
.compte-modal-title{font-family: var(--font-display);
font-size: 23px;
color: var(--ink);
margin: 0 0 16px}
.compte-modal p{font-family: var(--font-body);
font-size: 15px;
color: var(--ink-soft);
line-height: 1.6;
margin: 0 0 24px}
.compte-modal-actions{display: flex;
gap: 8px;
margin-top: 16px}
.compte-modal-actions > *{flex: 1}
.compte-delete-confirm{background: var(--danger) !important;
color: var(--cream-fixed) !important}
.dash-section-actions{display: flex;
gap: 16px;
margin-bottom: 28px}
.negociateur-grid{display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px}
.negociateur-card{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 24px;
transition:
border-color 0.25s,
transform 0.25s}
@media (hover: hover) and (pointer: fine){.negociateur-card:hover{transform: translateY(-2px)}
}
.negociateur-card.is-buy{border-color: color-mix(in oklch, var(--brand-dark) 45%, var(--border));
background: color-mix(in oklch, var(--accent-tint) 55%, var(--cream-fixed))}
.negociateur-card.is-wait{border-color: color-mix(in oklch, var(--danger) 40%, var(--border));
background: color-mix(in oklch, var(--brick-tint) 55%, var(--cream-fixed))}
.negociateur-card-head{display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px}
.negociateur-card-name{font-family: var(--font-display);
font-size: 19px;
color: var(--ink);
letter-spacing: -0.005em;
margin-bottom: 4px}
.negociateur-card-store{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
letter-spacing: 0.04em}
.negociateur-card-action{font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 8px 16px;
border-radius: 980px;
white-space: nowrap}
.negociateur-card.is-buy .negociateur-card-action{color: var(--brand-dark);
background: var(--accent-tint);
border: 1px solid oklch(0.59 0.16 143 / 0.26)}
.negociateur-card.is-wait .negociateur-card-action{color: var(--brick-deep);
background: var(--brick-tint);
border: 1px solid oklch(0.59 0.16 143 / 0.26)}
.negociateur-prices{display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 16px}
.negociateur-prices > div{background: var(--paper);
border-radius: 10px;
padding: 12px 16px}
.negociateur-price-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 8px}
.negociateur-price-value{font-family: var(--font-display);
font-size: 23px;
letter-spacing: -0.018em;
color: var(--ink);
font-variant-numeric: tabular-nums}
.negociateur-price-value--muted{color: var(--ink-soft)}
.negociateur-card.is-buy .negociateur-price-value:first-of-type{color: var(--brand-dark)}
.negociateur-reason{font-family: var(--font-body);
font-size: 13px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0 0 16px}
.negociateur-card-foot{display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap}
.negociateur-confidence{display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 12px}
.negociateur-confidence-label{font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-muted)}
.negociateur-confidence-bar{width: 80px;
height: 4px;
background: var(--paper-deep);
border-radius: 2px;
overflow: hidden}
.negociateur-confidence-fill{height: 100%;
width: 100%;
background: var(--brand-dark);
border-radius: 2px;
transform-origin: left center;
transform: scaleX(var(--progress, 0))}
.negociateur-confidence-value{color: var(--ink);
font-weight: 600}
.negociateur-wait{font-family: var(--font-display);
font-size: 15px;
color: var(--danger)}
.negociateur-add{padding: 8px 16px;
font-size: 13px}
.comparateur-search{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: clamp(28px, 3vw, 40px);
margin-bottom: 28px}
.comparateur-search-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-dark);
display: block;
margin-bottom: 12px}
.comparateur-search-row{display: flex;
gap: 12px;
align-items: stretch}
.comparateur-search-row input{flex: 1;
font-family: var(--font-display);
font-size: 19px;
padding: 16px 24px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
background: var(--paper);
color: var(--ink);
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
.comparateur-search-row input:focus{outline: none;
border-color: var(--brand-dark);
box-shadow: 0 0 0 4px oklch(0.59 0.16 143 / 0.14)}
.comparateur-search-row .btn-main{padding: 16px 28px}
.comparateur-tags{display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 16px}
.comparateur-tags-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
margin-right: 4px}
.comparateur-tag-form{display: inline;
margin: 0}
.comparateur-tag{appearance: none;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 980px;
padding: 8px 16px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--ink-soft);
cursor: pointer;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
@media (hover: hover) and (pointer: fine){.comparateur-tag:hover{border-color: var(--brand-dark);
color: var(--brand-dark);
background: var(--accent-tint)}
}
.comparateur-row{display: grid;
grid-template-columns: 100px 1fr auto auto;
align-items: baseline;
gap: 16px;
padding: 16px 4px;
border-bottom: 1px solid var(--border2)}
.comparateur-row:last-child{border-bottom: none}
.comparateur-row.is-best{background: var(--accent-tint);
margin: 0 -12px;
padding: 16px 16px;
border-radius: var(--radius);
border-bottom: none}
.comparateur-row-store{font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: 980px;
text-align: center}
.comparateur-row.is-best .comparateur-row-store{color: var(--brand-dark);
border-color: var(--brand-dark)}
.comparateur-row-name{font-family: var(--font-display);
font-size: 16px;
color: var(--ink)}
.comparateur-row-format{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
margin-top: 2px}
.comparateur-row-price{font-family: var(--font-body);
font-size: 19px;
font-weight: 800;
color: var(--ink);
font-variant-numeric: tabular-nums}
.comparateur-row.is-best .comparateur-row-price{color: var(--brand-dark)}
.comparateur-row-unit{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted)}
.comparateur-row-tag{font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--cream-fixed);
background: var(--brand-dark);
padding: 4px 8px;
border-radius: 6px}
.congelation-grid{display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px}
.congelation-card{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 28px;
display: flex;
flex-direction: column}
.congelation-card-head{display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px}
.congelation-card-name{font-family: var(--font-display);
font-size: 19px;
color: var(--ink);
letter-spacing: -0.008em;
margin-bottom: 4px;
line-height: 1.2}
.congelation-card-store{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
letter-spacing: 0.04em}
.congelation-card-discount{font-family: var(--font-display);
font-size: 30px;
color: var(--brand-dark);
letter-spacing: -0.018em;
line-height: 1;
font-variant-numeric: tabular-nums;
white-space: nowrap}
.congelation-card-discount span{font-size: 0.5em;
margin-left: 2px}
.congelation-prices{display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 16px}
.congelation-price-now{font-family: var(--font-display);
font-size: 30px;
color: var(--ink);
letter-spacing: -0.018em;
font-variant-numeric: tabular-nums}
.congelation-price-was{font-family: var(--font-body);
font-size: 15px;
color: var(--ink-fade);
text-decoration: line-through;
font-variant-numeric: tabular-nums}
.congelation-meta{display: flex;
flex-direction: column;
gap: 8px;
margin: 0 0 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border)}
.congelation-meta > div{display: flex;
justify-content: space-between;
font-family: var(--font-body);
font-size: 13px}
.congelation-meta dt{color: var(--ink-muted)}
.congelation-meta dd{color: var(--ink);
font-weight: 600;
margin: 0;
font-variant-numeric: tabular-nums}
.congelation-meta dd.is-accent{color: var(--brand-dark)}
.congelation-card-foot{display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: auto}
.congelation-card-foot .btn-main,
.congelation-card-foot .btn-sec{padding: 12px 16px;
font-size: 13px}
.optim-modes{display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding: 16px 24px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 24px}
.optim-modes-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted)}
.optim-modes-list{display: flex;
gap: 8px;
flex-wrap: wrap}
.optim-mode{font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: 980px;
background: var(--paper);
color: var(--ink-soft);
text-decoration: none;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
@media (hover: hover) and (pointer: fine){.optim-mode:hover{border-color: var(--brand-dark);
color: var(--brand-dark)}
}
.optim-mode.is-active{background: var(--ink);
border-color: var(--ink);
color: var(--cream-fixed)}
.optim-modes-warning{margin-left: auto;
font-family: var(--font-body);
font-size: 12px;
color: var(--danger);
font-style: italic;
text-decoration: underline}
.optim-best{background: var(--paper-sheet);
border: 1px solid var(--brand-dark);
border-radius: var(--radius-xl);
padding: 32px}
.optim-best-stats{display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 24px;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid var(--border)}
.optim-best-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 8px}
.optim-best-value{font-family: var(--font-display);
font-size: 23px;
color: var(--ink);
letter-spacing: -0.018em;
font-variant-numeric: tabular-nums}
.optim-best-value--accent{color: var(--brand-dark)}
.optim-items{list-style: none;
padding: 0;
margin: 0}
.optim-item{display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: baseline;
padding: 12px 0;
border-bottom: 1px solid var(--border2)}
.optim-item:last-child{border-bottom: none}
.optim-item-name{font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
color: var(--ink);
margin-bottom: 2px}
.optim-item-meta{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted)}
.optim-item-price{font-family: var(--font-body);
font-weight: 700;
color: var(--brand-dark);
font-variant-numeric: tabular-nums;
text-align: right}
.optim-item-was{display: block;
font-size: 12px;
color: var(--ink-fade);
text-decoration: line-through;
font-weight: 500;
margin-top: 2px}
.optim-routes{display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px}
.optim-route{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px 24px}
.optim-route.is-unprofitable{border-color: oklch(0.44 0.14 25 / 0.26)}
.optim-route.is-best{opacity: 0.65}
.optim-route-head{display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border)}
.optim-route-name{font-family: var(--font-display);
font-size: 19px;
color: var(--ink)}
.optim-route-economy{font-family: var(--font-display);
font-size: 19px;
color: var(--brand-dark);
font-variant-numeric: tabular-nums}
.optim-route-meta{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px}
.optim-route-sep{width: 3px;
height: 3px;
border-radius: 50%;
background: var(--ink-fade)}
.optim-route-items{font-family: var(--font-body);
font-size: 13px}
.optim-route-item{display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid var(--border2)}
.optim-route-item:last-child{border-bottom: none}
.optim-route-item span:last-child{font-weight: 600;
color: var(--brand-dark);
font-variant-numeric: tabular-nums}
.alertes-triggered{display: flex;
flex-direction: column;
gap: 0;
margin-top: 20px}
.alertes-triggered-item{padding: 12px 0;
border-bottom: 1px solid var(--border2)}
.alertes-triggered-item:last-child{border-bottom: none}
.alertes-triggered-name{font-family: var(--font-display);
font-size: 15px;
color: var(--ink);
margin-bottom: 2px}
.alertes-triggered-meta{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted)}
.alertes-triggered-price{font-family: var(--font-body);
font-size: 16px;
font-weight: 800;
color: var(--danger);
font-variant-numeric: tabular-nums;
margin-top: 8px}
.alertes-triggered-price span{font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
color: var(--ink-muted);
margin-left: 8px}
.alerte-row{display: grid;
grid-template-columns: 1fr auto auto;
gap: 16px;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid var(--border2)}
.alerte-row:last-child{border-bottom: none}
.alerte-row.is-paused{opacity: 0.55}
.alerte-row-name{font-family: var(--font-display);
font-size: 16px;
color: var(--ink);
margin-bottom: 2px}
.alerte-row-meta{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
font-variant-numeric: tabular-nums}
.alerte-toggle{appearance: none;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 980px;
padding: 8px 16px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--ink-muted);
cursor: pointer;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
.alerte-toggle.is-active{color: var(--brand-dark);
background: var(--accent-tint);
border-color: oklch(0.59 0.16 143 / 0.26)}
.pantry-row-delete-btn{appearance: none;
background: transparent;
border: none;
width: 32px;
height: 32px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-fade);
cursor: pointer;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
@media (hover: hover) and (pointer: fine){.pantry-row-delete-btn:hover{background: var(--danger-tint);
color: var(--danger)}
}
.prev-legend{display: flex;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 28px;
font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted)}
.prev-legend-item{display: flex;
align-items: center;
gap: 8px}
.prev-legend-dot{width: 10px;
height: 10px;
border-radius: 50%}
.prev-legend-dot--now{background: var(--brand-dark)}
.prev-legend-dot--soon{background: var(--danger)}
.prev-legend-dot--later{background: var(--ink-fade)}
.prev-grid{display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px}
.prev-card{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 24px 24px;
transition: border-color 0.25s}
.prev-card--maintenant{border-color: oklch(0.59 0.16 143 / 0.26);
background: var(--accent-tint)}
.prev-card--bientot{border-color: oklch(0.59 0.16 143 / 0.26);
background: var(--brick-tint)}
.prev-card-head{display: grid;
grid-template-columns: 36px 1fr auto;
gap: 12px;
align-items: center;
margin-bottom: 16px}
.prev-card-emoji{font-size: 30px}
.prev-card-name{font-family: var(--font-display);
font-size: 16px;
color: var(--ink);
letter-spacing: -0.005em;
margin-bottom: 2px}
.prev-card-months{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted)}
.prev-card-tag{font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 980px;
white-space: nowrap;
border: 1px solid currentColor}
.prev-card--maintenant .prev-card-tag{color: var(--brand-dark)}
.prev-card--bientot .prev-card-tag{color: var(--brick-deep)}
.prev-card--plus_tard .prev-card-tag{color: var(--ink-muted)}
.prev-card-reduction{margin-bottom: 16px}
.prev-card-reduction-head{display: flex;
justify-content: space-between;
font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
margin-bottom: 8px}
.prev-card-reduction-head strong{font-family: var(--font-display);
font-size: 16px;
color: var(--ink);
font-variant-numeric: tabular-nums}
.prev-card-bar{height: 4px;
background: var(--paper-deep);
border-radius: 2px;
overflow: hidden}
.prev-card-fill{height: 100%;
width: 100%;
background: var(--brand-dark);
border-radius: 2px;
transform-origin: left center;
transform: scaleX(var(--progress, 0))}
.prev-card--bientot .prev-card-fill{background: var(--danger)}
.prev-card-wait{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-soft);
margin-bottom: 8px}
.prev-card-wait strong{color: var(--ink)}
.prev-card-tip{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
font-style: italic;
line-height: 1.55;
margin: 0}
.prev-footer-note{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
font-style: italic;
text-align: center;
margin: 36px 0 0;
line-height: 1.55}
.scan-editorial{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: clamp(36px, 5vw, 64px);
margin-bottom: 36px;
position: relative;
overflow: hidden}
.scan-editorial::before{content: "";
position: absolute;
top: -160px;
right: -160px;
width: 480px;
height: 480px;
border-radius: 50%;
background: radial-gradient(ellipse, var(--accent-tint) 0%, transparent 65%);
pointer-events: none}
.scan-editorial-eyebrow{position: relative;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 16px}
.scan-editorial-title{position: relative;
font-family: var(--font-display);
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 400;
color: var(--ink);
letter-spacing: -0.018em;
line-height: 1.06;
margin: 0 0 16px;
max-width: 22ch;
text-wrap: balance}
.scan-editorial-title em{color: var(--brand-dark);
font-style: italic;
font-family: var(--font-display)}
.scan-editorial-lede{position: relative;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.65;
color: var(--ink-soft);
margin: 0 0 28px;
max-width: 56ch}
.scan-editorial-form{position: relative;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap}
.scan-editorial-form .btn-main{padding: 16px 36px;
font-size: 15px}
.scan-editorial-note{font-family: var(--font-body);
font-size: 13px;
font-style: italic;
color: var(--ink-muted)}
.scan-editorial-drop{position: relative;
border: 2px dashed var(--border);
border-radius: var(--radius-xl);
padding: 56px 32px;
text-align: center;
background: var(--paper);
cursor: pointer;
transition:
border-color 0.25s,
background 0.25s;
margin-bottom: 16px}
@media (hover: hover) and (pointer: fine){.scan-editorial-drop:hover,
.scan-editorial-drop.is-drag{border-color: var(--brand-dark);
background: var(--accent-tint)}
}
.scan-editorial-drop img{max-width: 100%;
max-height: 320px;
border-radius: 12px;
object-fit: cover;
margin: 0 auto}
.scan-editorial-placeholder{color: var(--ink-soft)}
.scan-editorial-placeholder-title{font-family: var(--font-display);
font-size: 23px;
color: var(--ink);
margin-bottom: 8px}
.scan-editorial-placeholder-meta{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
font-style: italic}
.scan-editorial-tips{position: relative;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
padding: 16px 0 16px;
letter-spacing: 0.04em}
.scan-editorial-tips-label{font-weight: 600;
color: var(--ink-soft)}
.scan-editorial-tips-sep{width: 3px;
height: 3px;
border-radius: 50%;
background: var(--ink-fade)}
.scan-editorial-loading{position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
text-align: center;
font-family: var(--font-display);
font-size: 19px;
font-style: italic;
color: var(--brand-dark);
margin-top: 24px;
padding: 24px;
background: var(--accent-tint);
border: 1px solid oklch(0.59 0.16 143 / 0.22);
border-radius: var(--radius)}
.scan-loading-spinner{width: 20px;
height: 20px;
border-radius: 50%;
border: 2.5px solid var(--accent-tint);
border-top-color: var(--brand-dark);
animation: spin 0.8s linear infinite}
@keyframes spin{to{transform: rotate(360deg)}
}
.scan-dropzone{margin-top: 16px;
padding: 28px;
border: 2px dashed var(--border);
border-radius: var(--radius-lg);
text-align: center;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
.scan-dropzone.is-over{border-color: var(--brand-dark);
background: var(--accent-tint)}
.scan-dropzone-text{font-size: 13px;
color: var(--ink-muted);
font-weight: 500}
.scan-dropzone.is-over .scan-dropzone-text{color: var(--brand-dark)}
.scan-share-hint{display: none;
align-items: flex-start;
gap: 8px;
margin: 16px 0 0;
padding: 0;
font-size: 15px;
line-height: 1.5;
color: var(--ink-soft);
max-width: 62ch}
.scan-share-hint-ico{flex-shrink: 0;
margin-top: 2px;
color: var(--brand-dark, var(--brand))}
@media (display-mode: standalone), (display-mode: minimal-ui){.scan-share-hint{display: flex}
}
body.mode-grand-maman .scan-share-hint{font-size: 16px}
.scan-btn-label{cursor: pointer;
display: inline-block}
.scan-buttons{display: flex;
gap: 12px;
flex-wrap: wrap}
.scan-buttons .btn-main,
.scan-buttons .btn-sec{flex: 1;
min-width: 180px;
text-align: center}
@media (max-width: 480px){.scan-buttons{flex-direction: column}
.scan-buttons .btn-main,
.scan-buttons .btn-sec{min-width: auto}
}
.recu-price{font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
color: var(--brand-dark);
font-variant-numeric: tabular-nums}
.recu-actions{display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 36px}
.recu-actions .btn-main,
.recu-actions .btn-sec{padding: 16px 24px}
.scan-result-actions{display: flex;
gap: 8px;
align-self: end}
.scan-result-actions .btn-sec{padding: 8px 16px;
font-size: 12px}
.scan-result-item{display: grid;
grid-template-columns: 24px 36px 1fr auto;
align-items: center;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--border2);
cursor: pointer}
.scan-result-item:last-child{border-bottom: none}
.scan-result-checkbox{width: 20px;
height: 20px;
accent-color: var(--brand-dark);
cursor: pointer}
.scan-result-emoji{font-size: 23px}
.scan-result-info{min-width: 0}
.scan-result-name{font-family: var(--font-display);
font-size: 16px;
color: var(--ink);
margin-bottom: 2px;
letter-spacing: -0.005em}
.scan-result-meta{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
font-variant-numeric: tabular-nums}
.scan-result-note{font-family: var(--font-body);
font-size: 12px;
color: var(--danger);
font-style: italic;
margin-top: 2px}
.scan-result-confidence{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-muted);
white-space: nowrap}
.dash-pull-alert{margin-top: 16px;
padding: 8px 16px;
background: var(--accent-tint);
border: 1px solid oklch(0.62 0.14 68 / 0.26);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 13px;
font-style: italic;
color: oklch(0.42 0.12 68)}
.nutrition-bars{display: flex;
flex-direction: column;
gap: 16px}
.nutrition-bar-head{display: flex;
justify-content: space-between;
font-family: var(--font-body);
margin-bottom: 8px}
.nutrition-bar-name{font-size: 13px;
font-weight: 600;
color: var(--ink)}
.nutrition-bar-value{font-family: var(--font-display);
font-size: 16px;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums}
.nutrition-bar-value--good{color: var(--brand-dark)}
.nutrition-bar-value--warn{color: var(--danger)}
.nutrition-bar-value--low{color: var(--danger)}
.nutrition-bar-track{height: 4px;
background: var(--paper-deep);
border-radius: 2px;
overflow: hidden}
.nutrition-bar-fill{height: 100%;
width: 100%;
border-radius: 2px;
transform-origin: left center;
transform: scaleX(var(--progress, 0));
transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform}
.nutrition-bar-fill--good{background: var(--brand-dark)}
.nutrition-bar-fill--warn{background: var(--danger)}
.nutrition-bar-fill--low{background: var(--danger)}
.nutrition-grid,
.adn-grid{display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(24px, 3vw, 40px)}
@media (max-width: 1024px){.nutrition-grid,
.adn-grid{grid-template-columns: 1fr}
}
.nutrition-list{list-style: none;
padding: 0;
margin: 0}
.nutrition-list-item{font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
color: var(--ink);
padding: 12px 0 12px 24px;
border-bottom: 1px solid var(--border2);
position: relative}
.nutrition-list-item:last-child{border-bottom: none}
.nutrition-list-item::before{content: "";
position: absolute;
left: 0;
top: 18px;
width: 14px;
height: 6px;
border-left: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg)}
.nutrition-list-item--good{color: var(--ink)}
.nutrition-list-item--good::before{color: var(--brand-dark)}
.nutrition-list-item--warn::before{border: none;
width: 12px;
height: 12px;
background: none;
top: 16px;
transform: none;
color: var(--danger)}
.nutrition-list-item--warn::before{content: "→";
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
border: none}
.nutrition-suggestions{display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px}
.nutrition-suggestion{background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 20px}
.nutrition-suggestion-day{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 8px}
.nutrition-suggestion-text{font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft)}
.dash-pull{background: var(--accent-tint);
border: 1px solid oklch(0.59 0.16 143 / 0.22);
border-radius: var(--radius-xl);
padding: clamp(28px, 3vw, 40px) clamp(28px, 4vw, 56px);
margin: 32px 0}
.dash-pull-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 16px}
.dash-pull p{font-family: var(--font-display);
font-size: clamp(18px, 2vw, 24px);
font-style: italic;
line-height: 1.45;
color: var(--ink);
margin: 0}
.inflation-grid{display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px}
.inflation-card{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 24px 24px 24px;
transition:
border-color 0.25s,
transform 0.25s}
@media (hover: hover) and (pointer: fine){.inflation-card:hover{border-color: var(--brand-dark);
transform: translateY(-2px)}
}
.inflation-card-head{display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px}
.inflation-card-info{min-width: 0}
.inflation-card-name{font-family: var(--font-display);
font-size: 19px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.005em;
line-height: 1.2;
margin-bottom: 4px}
.inflation-card-meta{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
letter-spacing: 0.04em}
.inflation-card-variation{font-family: var(--font-display);
font-size: 23px;
letter-spacing: -0.018em;
line-height: 1;
white-space: nowrap;
font-variant-numeric: tabular-nums}
.inflation-card-variation span{font-size: 0.6em;
margin-left: 2px}
.inflation-card--up .inflation-card-variation{color: var(--danger)}
.inflation-card--down .inflation-card-variation{color: var(--brand-dark)}
.inflation-card--flat .inflation-card-variation{color: var(--ink-muted)}
.inflation-card-chart{width: 100%;
height: 60px;
margin-bottom: 16px}
.inflation-card-foot{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-variant-numeric: tabular-nums;
border-top: 1px solid var(--border2);
padding-top: 16px}
.inflation-card-foot strong{color: var(--ink);
font-weight: 700}
.inflation-card-alert{margin-left: auto;
font-size: 12px;
font-weight: 600;
color: var(--danger);
text-decoration: none;
padding: 2px 8px;
border: 1px solid var(--brick-tint);
border-radius: 980px;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
@media (hover: hover) and (pointer: fine){.inflation-card-alert:hover{background: var(--brick-tint)}
}
.inflation-card-sep{width: 3px;
height: 3px;
border-radius: 50%;
background: var(--ink-fade)}
.adn-progress{font-family: var(--font-display);
font-size: 19px;
color: var(--ink-soft);
margin: 16px 0 24px;
font-style: italic}
.adn-progress strong{color: var(--brand-dark);
font-style: normal;
font-weight: 400}
.adn-hero{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: clamp(40px, 5vw, 64px);
text-align: center;
margin-bottom: 36px;
position: relative;
overflow: hidden}
.adn-hero::before{content: "";
position: absolute;
top: -120px;
left: 50%;
transform: translateX(-50%);
width: 480px;
height: 480px;
border-radius: 50%;
background: radial-gradient(ellipse, var(--accent-tint) 0%, transparent 65%);
pointer-events: none}
.adn-hero-eyebrow{position: relative;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 16px}
.adn-hero-title{position: relative;
font-family: var(--font-display);
font-size: clamp(32px, 4vw, 52px);
font-weight: 400;
color: var(--ink);
letter-spacing: -0.022em;
line-height: 1.06;
margin: 0 0 16px;
text-wrap: balance}
.adn-hero-subtitle{position: relative;
font-family: var(--font-display);
font-size: 19px;
font-style: italic;
color: var(--brand-dark);
margin-bottom: 16px}
.adn-hero-meta{position: relative;
font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
font-style: italic}
.adn-traits{display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px}
.adn-trait{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 28px 24px;
text-align: center;
transition: border-color 0.25s}
@media (hover: hover) and (pointer: fine){.adn-trait:hover{border-color: var(--brand-dark)}
}
.adn-trait-rank{font-family: var(--font-display);
font-size: 23px;
color: var(--brand-dark);
letter-spacing: -0.018em;
margin-bottom: 8px}
.adn-trait-name{font-family: var(--font-display);
font-size: 16px;
color: var(--ink);
margin-bottom: 16px}
.adn-trait-value{font-family: var(--font-display);
font-size: 44px;
color: var(--ink);
letter-spacing: -0.022em;
line-height: 1;
margin-bottom: 16px;
font-variant-numeric: tabular-nums}
.adn-trait-value span{font-size: 0.5em;
color: var(--ink-muted)}
.adn-trait-track{height: 3px;
background: var(--paper-deep);
border-radius: 2px;
overflow: hidden;
margin-bottom: 16px}
.adn-trait-fill{height: 100%;
width: 100%;
background: var(--brand-dark);
transform-origin: left center;
transform: scaleX(var(--progress, 0));
transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform}
.adn-trait-desc{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
line-height: 1.55;
margin: 0}
.adn-signature{margin-top: 24px;
padding: 16px 24px;
background: var(--accent-tint);
border: 1px solid oklch(0.59 0.16 143 / 0.22);
border-radius: var(--radius)}
.adn-signature-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 8px}
.adn-signature-name{font-family: var(--font-display);
font-size: 19px;
color: var(--ink);
font-style: italic}
.adn-stats{display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0;
border-top: 1px solid var(--border);
margin: 0}
.adn-stats > div{padding: 16px 24px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border)}
.adn-stats > div:last-child{border-right: none}
.adn-stats dt{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 8px}
.adn-stats dd{font-family: var(--font-display);
font-size: 23px;
color: var(--ink);
margin: 0;
letter-spacing: -0.012em}
.adn-actions{display: flex;
gap: 16px;
margin-top: 32px;
flex-wrap: wrap}
.adn-actions form,
.adn-actions .btn-main,
.adn-actions .btn-sec{flex: 1;
min-width: 200px}
.adn-actions .btn-main,
.adn-actions .btn-sec{padding: 16px 24px}
.score-row{display: grid;
grid-template-columns: 56px 1fr auto auto;
gap: 20px;
align-items: baseline;
padding: 16px 12px;
border-bottom: 1px solid var(--border2)}
.score-row:last-child{border-bottom: none}
.score-row.is-self{background: var(--accent-tint);
margin: 0 -12px;
padding: 16px 24px;
border-radius: var(--radius);
border-bottom: none}
.score-row-rank{font-family: var(--font-display);
font-size: 23px;
color: var(--brand-dark);
letter-spacing: -0.018em;
text-align: center}
.score-row-name{font-family: var(--font-display);
font-size: 16px;
color: var(--ink)}
.score-row.is-self .score-row-name{color: var(--brand-dark);
font-style: italic}
.score-row-amount{font-family: var(--font-body);
font-size: 16px;
font-weight: 700;
color: var(--ink);
font-variant-numeric: tabular-nums}
.score-row-pct{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
font-variant-numeric: tabular-nums}
.epargne-chart{display: flex;
align-items: flex-end;
gap: 12px;
height: 140px;
padding: 16px 0 0}
.epargne-bar{flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 0}
.epargne-bar-track{position: relative;
width: 100%;
max-width: 56px}
.epargne-bar-budget{width: 100%;
background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: 4px 4px 0 0;
position: absolute;
bottom: 0;
left: 0;
right: 0}
.epargne-bar-real{position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--brand-dark);
border-radius: 4px 4px 0 0}
.epargne-bar-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
color: var(--ink-muted);
font-variant-numeric: tabular-nums}
.epargne-chart-legend{display: flex;
gap: 24px;
margin-top: 16px;
font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted)}
.epargne-chart-legend > span{display: inline-flex;
align-items: center;
gap: 8px}
.epargne-legend-dot{width: 10px;
height: 10px;
border-radius: 2px}
.epargne-legend-dot--budget{background: var(--paper-soft);
border: 1px solid var(--border)}
.epargne-legend-dot--real{background: var(--brand-dark)}
.epargne-badges{display: flex;
flex-direction: column;
gap: 0}
.epargne-badge{display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center;
gap: 24px;
padding: 24px 0;
border-bottom: 1px solid var(--border2);
transition: opacity 0.2s}
.epargne-badge:last-child{border-bottom: none}
.epargne-badge.is-locked{opacity: 0.45}
.epargne-badge-rank{font-family: var(--font-display);
font-size: 38px;
color: var(--brand-dark);
letter-spacing: -0.025em;
line-height: 1;
text-align: center}
.epargne-badge.is-locked .epargne-badge-rank{color: var(--ink-fade)}
.epargne-badge-name{font-family: var(--font-display);
font-size: 19px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.005em;
margin-bottom: 4px;
line-height: 1.2}
.epargne-badge-desc{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5}
.epargne-badge-status{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
white-space: nowrap}
.epargne-badge-status--done{color: var(--brand-dark)}
.bilan-nav{display: flex;
align-items: center;
gap: 16px;
padding: 16px 0 24px;
border-bottom: 1px solid var(--border);
margin-bottom: 24px;
flex-wrap: wrap}
.bilan-nav .btn-sec{padding: 8px 16px;
font-size: 13px}
.bilan-nav-current{font-family: var(--font-display);
font-size: 30px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.018em;
font-variant-numeric: tabular-nums;
padding: 0 8px}
.bilan-nav-export{margin-left: auto}
.bilan-stats{display: grid;
grid-template-columns: repeat(6, 1fr);
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--border);
margin-bottom: 36px}
.bilan-stat{padding: 24px 16px;
border-right: 1px solid var(--border)}
.bilan-stat:last-child{border-right: none}
.bilan-stat-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 12px}
.bilan-stat-value{font-family: var(--font-display);
font-size: clamp(20px, 2.2vw, 28px);
font-weight: 400;
color: var(--ink);
letter-spacing: -0.018em;
line-height: 1;
font-variant-numeric: tabular-nums}
.bilan-stat-value--accent{color: var(--brand-dark)}
.bilan-chart{display: flex;
align-items: flex-end;
gap: 16px;
height: 160px;
padding: 16px 0}
.bilan-bar{flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
min-width: 0}
.bilan-bar-track{position: relative;
width: 100%;
max-width: 64px;
height: 140px;
display: flex;
align-items: flex-end;
justify-content: center}
.bilan-bar-fill{width: 100%;
background: var(--brand-dark);
border-radius: 4px 4px 0 0}
.bilan-bar-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--ink-muted)}
.bilan-best{text-align: center;
padding: 36px 24px;
background: var(--accent-tint);
border: 1px solid oklch(0.59 0.16 143 / 0.22);
border-radius: var(--radius-xl)}
.bilan-best-week{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 16px}
.bilan-best-amount{font-family: var(--font-display);
font-size: clamp(48px, 6vw, 72px);
color: var(--brand-dark);
letter-spacing: -0.022em;
line-height: 1;
font-variant-numeric: tabular-nums;
margin-bottom: 16px}
.bilan-best-meta{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-soft);
font-style: italic}
.bilan-share{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: clamp(28px, 3vw, 44px)}
.bilan-share .dash-section-head{border-bottom: 1px solid var(--border);
padding-bottom: 16px;
margin-bottom: 24px}
.bilan-share-quote{font-family: var(--font-display);
font-size: clamp(20px, 2.4vw, 28px);
font-style: italic;
line-height: 1.36;
color: var(--ink);
margin: 0 0 28px;
text-wrap: balance}
.bilan-share-quote strong{color: var(--brand-dark);
font-weight: 400;
font-style: normal;
font-variant-numeric: tabular-nums}
.bilan-share-actions{display: flex;
gap: 16px;
flex-wrap: wrap}
.urgence-bar{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 28px 32px;
margin-bottom: 32px;
position: relative;
overflow: hidden}
.urgence-bar::before{content: "";
position: absolute;
top: -120px;
right: -120px;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(ellipse, var(--brick-tint) 0%, transparent 65%);
pointer-events: none}
.urgence-bar-inner{display: grid;
grid-template-columns: auto 1fr;
gap: 32px;
align-items: center;
position: relative}
.urgence-bar-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brick-deep);
margin-bottom: 8px}
.urgence-bar-value{font-family: var(--font-display);
font-size: clamp(48px, 6vw, 72px);
color: var(--ink);
letter-spacing: -0.025em;
line-height: 1;
font-variant-numeric: tabular-nums}
.urgence-bar-value sub{font-family: var(--font-body);
font-size: 0.24em;
color: var(--ink-muted);
vertical-align: baseline;
font-weight: 500;
margin-left: 8px;
letter-spacing: 0.04em}
.urgence-bar-changer{display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-self: end}
.urgence-regen{margin-left: auto;
white-space: nowrap}
.urgence-bar-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
margin-right: 4px}
.urgence-time-pill{display: inline-flex;
align-items: center;
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: 980px;
background: var(--paper);
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--ink-soft);
text-decoration: none;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
@media (hover: hover) and (pointer: fine){.urgence-time-pill:hover{border-color: var(--danger);
color: var(--brick-deep);
background: var(--brick-tint)}
}
.urgence-time-pill.is-active{background: var(--ink);
border-color: var(--ink);
color: var(--cream-fixed)}
.urgence-recipes{display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px}
.urgence-recipe{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 32px 28px 28px;
transition:
border-color 0.3s,
transform 0.3s,
box-shadow 0.3s}
.urgence-recipe.is-complete{border-color: var(--brand-dark);
background: var(--accent-tint)}
.urgence-recipe-head{display: grid;
grid-template-columns: 48px 1fr;
gap: 16px;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border)}
.urgence-recipe-rank{font-family: var(--font-display);
font-size: 38px;
color: var(--brand-dark);
letter-spacing: -0.025em;
line-height: 1;
text-align: center}
.urgence-recipe-emoji{font-size: 30px;
margin-bottom: 8px}
.urgence-recipe-title{font-family: var(--font-display);
font-size: 23px;
font-weight: 400;
color: var(--ink);
margin: 0 0 8px;
letter-spacing: -0.012em;
line-height: 1.18}
.urgence-recipe-meta{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px}
.urgence-recipe-sep{width: 3px;
height: 3px;
border-radius: 50%;
background: var(--ink-fade)}
.urgence-recipe-urgent{color: var(--danger);
font-weight: 600}
.urgence-recipe-ingredients{font-family: var(--font-body);
font-size: 13px;
line-height: 1.55;
color: var(--ink-soft);
margin: 0 0 16px}
.urgence-recipe-ingredients-label{font-weight: 600;
letter-spacing: 0.04em;
color: var(--ink-muted);
text-transform: uppercase;
font-size: 12px;
margin-right: 4px}
.urgence-recipe-start{width: 100%;
padding: 16px;
font-size: 15px}
.urgence-recipe-start.is-active{background: var(--ink);
color: var(--cream-fixed);
cursor: not-allowed}
.urgence-steps{margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--border)}
.urgence-steps-header{display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 16px}
.urgence-steps-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted)}
.urgence-steps-progress{font-family: var(--font-display);
font-size: 15px;
color: var(--brand-dark);
font-variant-numeric: tabular-nums}
.urgence-steps-list{list-style: none;
padding: 0;
margin: 0}
.urgence-step{padding: 8px 0;
border-bottom: 1px solid var(--border2)}
.urgence-step:last-child{border-bottom: none}
.urgence-step.is-done{opacity: 0.55}
.urgence-step-label{display: grid;
grid-template-columns: 0 28px 1fr;
gap: 12px;
align-items: baseline;
cursor: pointer}
.urgence-step-checkbox{appearance: none;
width: 0;
height: 0;
position: absolute;
opacity: 0}
.urgence-step-num{font-family: var(--font-display);
font-size: 19px;
color: var(--ink-muted);
width: 28px;
height: 28px;
border: 1.5px solid var(--border);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-variant-numeric: tabular-nums;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s;
flex-shrink: 0}
.urgence-step-num.is-done{background: var(--brand-dark);
border-color: var(--brand-dark);
color: var(--cream-fixed)}
.urgence-step-num.is-done::before{content: "";
width: 6px;
height: 11px;
border-right: 2px solid var(--cream-fixed);
border-bottom: 2px solid var(--cream-fixed);
transform: rotate(42deg);
position: relative;
top: -2px}
.urgence-step-num.is-done{font-size: 0}
.urgence-step-text{font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
color: var(--ink)}
.urgence-step.is-done .urgence-step-text{text-decoration: line-through;
color: var(--ink-muted)}
@media (max-width: 1024px){.bilan-stats{grid-template-columns: repeat(3, 1fr)}
.bilan-stat:nth-child(3){border-right: none}
}
@media (max-width: 768px){.urgence-bar-inner{grid-template-columns: 1fr;
gap: 24px}
.urgence-bar-changer{justify-self: start}
.bilan-stats{grid-template-columns: 1fr 1fr}
.bilan-stat:nth-child(odd){border-right: 1px solid var(--border)}
.bilan-stat:nth-child(even){border-right: none}
.bilan-stat{border-bottom: 1px solid var(--border)}
.bilan-stat:nth-last-child(-n + 2){border-bottom: none}
.bilan-nav{font-size: 13px}
.bilan-nav-export{margin-left: 0;
flex-basis: 100%}
.epargne-badge{grid-template-columns: 40px 1fr;
gap: 16px}
.epargne-badge-status{grid-column: 1 / -1;
justify-self: start;
padding-left: 56px;
margin-top: -8px}
}
.pantry-actions{display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: clamp(24px, 3vw, 40px);
margin-bottom: 44px;
align-items: start}
@media (max-width: 1024px){.pantry-actions{grid-template-columns: 1fr}
}
.pantry-form{margin-bottom: 0}
.pantry-form-grid{display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 16px}
.pantry-form-grid .form-group{margin-bottom: 0}
.pantry-form-grid .form-group-wide{grid-column: 1 / -1}
.pantry-form-grid label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 8px;
display: block}
.pantry-form-grid input,
.pantry-form-grid select{width: 100%;
font-family: var(--font-body);
font-size: 15px;
padding: 12px 16px;
border: 1.5px solid var(--border);
border-radius: 12px;
background: var(--paper);
color: var(--ink);
transition:
border-color 0.2s,
box-shadow 0.2s}
.pantry-form-grid input:focus,
.pantry-form-grid select:focus{outline: none;
border-color: var(--brand-dark);
box-shadow: 0 0 0 4px oklch(0.59 0.16 143 / 0.16)}
.pantry-form-submit{grid-column: 1 / -1;
margin-top: 8px;
padding: 16px 24px;
font-size: 15px}
.pantry-urgence{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: clamp(28px, 3vw, 36px);
position: relative;
overflow: hidden}
.pantry-urgence::before{content: "";
position: absolute;
top: -120px;
right: -120px;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(ellipse, var(--brick-tint) 0%, transparent 65%);
pointer-events: none}
.pantry-urgence-eyebrow{position: relative;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brick-deep);
margin-bottom: 16px}
.pantry-urgence-title{position: relative;
font-family: var(--font-display);
font-size: clamp(24px, 2.6vw, 30px);
font-weight: 400;
color: var(--ink);
margin: 0 0 16px;
letter-spacing: -0.014em;
line-height: 1.12;
text-wrap: balance}
.pantry-urgence-title em{color: var(--danger);
font-style: italic;
font-family: var(--font-display)}
.pantry-urgence-lede{position: relative;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.62;
color: var(--ink-soft);
margin: 0 0 24px}
.pantry-urgence-lede strong{color: var(--ink);
font-variant-numeric: tabular-nums;
font-weight: 700}
.pantry-urgence-buttons{position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px}
.pantry-time{display: flex;
flex-direction: column;
align-items: center;
padding: 16px 8px 16px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--paper);
color: var(--ink);
text-decoration: none;
transition:
transform 0.25s,
opacity 0.25s,
color 0.25s,
background 0.25s,
border-color 0.25s,
box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1)}
@media (hover: hover) and (pointer: fine){.pantry-time:hover{border-color: var(--danger);
background: var(--brick-tint);
transform: translateY(-2px)}
}
.pantry-time-num{font-family: var(--font-display);
font-size: 30px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.018em;
font-variant-numeric: tabular-nums;
line-height: 1;
margin-bottom: 4px}
.pantry-time-lbl{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-muted)}
.pantry-time-active{background: var(--ink);
border-color: var(--ink)}
.pantry-time-active .pantry-time-num{color: var(--cream-fixed)}
.pantry-time-active .pantry-time-lbl{color: oklch(0.92 0.015 85 / 0.82)}
@media (hover: hover) and (pointer: fine){.pantry-time-active:hover{background: oklch(0.18 0.015 110);
border-color: oklch(0.18 0.015 110)}
}
.pantry-group{margin-bottom: 32px}
.pantry-group:last-child{margin-bottom: 0}
.pantry-group-title{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
padding-bottom: 12px;
margin-bottom: 4px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 8px}
.pantry-group-title::before{content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0}
.pantry-group-urgent{color: var(--danger)}
.pantry-group-warn{color: var(--danger)}
.pantry-group-ok{color: var(--brand-dark)}
.pantry-row{display: grid;
grid-template-columns: 44px 1fr auto auto;
align-items: center;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--border2)}
.pantry-row:last-child{border-bottom: none}
.pantry-row-emoji{font-size: 23px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--paper-soft);
border-radius: 12px;
flex-shrink: 0}
.pantry-row-info{min-width: 0}
.pantry-row-name{font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.005em;
line-height: 1.2;
margin-bottom: 2px}
.pantry-row-meta{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
display: flex;
align-items: center;
gap: 8px;
letter-spacing: 0.02em}
.pantry-row-sep{width: 3px;
height: 3px;
border-radius: 50%;
background: var(--ink-fade)}
.pantry-row-expire{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 980px;
white-space: nowrap}
.pantry-row-expire--ok{background: var(--accent-tint);
color: var(--brand-dark)}
.pantry-row-expire--warn{background: var(--brick-tint);
color: var(--brick-deep)}
.pantry-row-expire--urgent{background: var(--danger-tint);
color: var(--danger)}
.pantry-row-delete button{appearance: none;
background: transparent;
border: none;
width: 32px;
height: 32px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ink-fade);
cursor: pointer;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
@media (hover: hover) and (pointer: fine){.pantry-row-delete button:hover{background: var(--danger-tint);
color: var(--danger)}
}
.pantry-row-actions{display: flex;
gap: 4px;
margin-left: auto;
flex-shrink: 0}
.pantry-action-btn{appearance: none;
background: transparent;
border: 1px solid var(--border);
width: 30px;
height: 30px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
cursor: pointer;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
.pantry-action-ok{color: var(--brand-dark)}
@media (hover: hover) and (pointer: fine){.pantry-action-ok:hover{background: var(--accent-tint);
border-color: var(--brand-dark)}
}
.pantry-action-bad{color: var(--ink-fade)}
@media (hover: hover) and (pointer: fine){.pantry-action-bad:hover{background: var(--danger-tint);
border-color: var(--danger);
color: var(--danger)}
}
@media (max-width: 768px){.pantry-form-grid{grid-template-columns: 1fr}
.pantry-row{grid-template-columns: 40px 1fr auto;
grid-template-areas:
"emoji info expire"
"emoji info delete";
gap: 4px 12px}
.pantry-row-emoji{grid-area: emoji;
align-self: start}
.pantry-row-info{grid-area: info}
.pantry-row-expire{grid-area: expire;
align-self: start}
.pantry-row-delete{grid-area: delete;
align-self: end;
justify-self: end}
}
.menu-days{display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
margin-bottom: 36px;
overflow-x: auto;
scrollbar-width: none}
.menu-days::-webkit-scrollbar{display: none}
.menu-day{appearance: none;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 8px;
min-height: 92px;
text-align: left;
font-family: var(--font-body);
cursor: pointer;
transition:
background 0.2s,
border-color 0.2s,
transform 0.15s;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0}
@media (hover: hover) and (pointer: fine){.menu-day:hover{background: var(--paper-soft);
border-color: var(--ink-muted)}
}
@media (hover: hover) and (pointer: fine){.menu-day[draggable="true"]{cursor: grab}
.menu-day[draggable="true"]:active{cursor: grabbing}
}
.menu-day.is-active{background: var(--accent-tint);
border-color: var(--brand);
box-shadow: 0 1px 3px oklch(0.59 0.16 143 / 0.16)}
.menu-day:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px}
.menu-day-head{display: flex;
align-items: baseline;
gap: 8px}
.menu-day-name{font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted)}
.menu-day-date{font-family: var(--font-display);
font-size: 19px;
font-weight: 400;
color: var(--ink);
font-variant-numeric: tabular-nums;
line-height: 1}
.menu-day.is-active .menu-day-date{color: var(--accent-deep)}
.menu-day.is-active .menu-day-name{color: var(--accent-deep)}
.menu-day-recipe{font-size: 13px;
font-weight: 600;
color: var(--ink);
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden}
.menu-day.is-active .menu-day-recipe{color: var(--ink)}
.menu-day-meta{font-size: 12px;
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
margin-top: auto}
.menu-day.is-active .menu-day-meta{color: var(--accent-deep)}
.menu-day-empty-text{color: var(--ink-muted);
font-style: italic;
font-weight: 500}
.menu-day.is-empty{opacity: 0.7}
@media (hover: hover) and (pointer: fine){.menu-day.is-empty:hover{border-color: var(--border);
background: var(--paper-sheet)}
}
@media (max-width: 768px){.menu-days{grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
overflow-x: visible;
padding-bottom: 0}
.menu-day{padding: 8px 4px 8px;
min-height: 64px;
align-items: center;
gap: 2px}
.menu-day-head{flex-direction: column;
align-items: center;
gap: 2px}
.menu-day-name{font-size: 12px;
letter-spacing: 0.1em}
.menu-day-date{font-size: 16px}
.menu-day-recipe,
.menu-day-meta{display: none}
}
@media (prefers-reduced-motion: reduce){.menu-day{transition: none}
}
.menu-spread{display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 56px);
margin-bottom: 48px}
@media (max-width: 640px){.menu-spread{grid-template-columns: 1fr;
gap: 32px}
}
.menu-recipe{min-width: 0}
.assistant-suggestions{display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 24px}
.assistant-suggest{padding: 8px 16px;
border-radius: 980px;
background: var(--paper-sheet);
border: 1px solid var(--border);
font-size: 13px;
font-weight: 500;
color: var(--ink-soft);
cursor: pointer;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
@media (hover: hover) and (pointer: fine){.assistant-suggest:hover{background: var(--accent-tint);
border-color: var(--brand-dark);
color: var(--brand-dark)}
}
.assistant-chat{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
min-height: 300px;
max-height: 60vh;
overflow-y: auto;
margin-bottom: 16px}
.assistant-message{display: flex;
margin-bottom: 16px}
.assistant-message--bot{justify-content: flex-start}
.assistant-message--user{justify-content: flex-end}
.assistant-bubble{max-width: 75%;
padding: 12px 16px;
border-radius: 16px;
font-size: 15px;
line-height: 1.5}
.assistant-message--bot .assistant-bubble{background: var(--paper-soft);
color: var(--ink);
border-bottom-left-radius: 4px}
.assistant-message--user .assistant-bubble{background: var(--brand-dark);
color: var(--cream-fixed);
border-bottom-right-radius: 4px}
.assistant-form{display: flex;
gap: 8px}
.assistant-form input{flex: 1;
padding: 16px 16px;
border-radius: var(--radius);
border: 1px solid var(--border);
font-size: 15px;
background: var(--paper-sheet);
color: var(--ink)}
.assistant-form input:focus{outline: none;
border-color: var(--brand-dark);
box-shadow: 0 0 0 3px oklch(0.59 0.16 143 / 0.15)}
.assistant-actions{display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
margin-left: 4px}
.assistant-action-chip{display: inline-block;
padding: 4px 8px;
border-radius: 980px;
background: var(--accent-tint);
color: var(--brand-dark);
font-size: 13px;
font-weight: 600;
border: 1px solid oklch(0.59 0.16 143 / 0.25)}
.membre-card{background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px;
margin-bottom: 8px}
.membre-row{display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px}
.membre-prefs{display: flex;
gap: 8px;
align-items: center}
.dash-restock-collapse{margin-top: 20px;
background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden}
.dash-restock-collapse-summary{display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 16px;
cursor: pointer;
list-style: none;
user-select: none}
.dash-restock-collapse-summary::-webkit-details-marker{display: none}
.dash-restock-collapse-summary:focus-visible{outline: 2px solid var(--brand);
outline-offset: -2px;
border-radius: var(--radius)}
.dash-restock-count{display: inline-block;
margin-left: 4px;
padding: 2px 8px;
background: var(--accent-tint);
color: var(--brand-dark, var(--brand));
border-radius: 10px;
font-size: 12px;
font-weight: 700}
.dash-restock-collapse-cta{font-size: 13px;
font-weight: 600;
color: var(--brand-dark, var(--brand));
letter-spacing: 0.04em}
.dash-restock-collapse[open] .dash-restock-collapse-cta{font-size: 0}
.dash-restock-collapse[open] .dash-restock-collapse-cta::before{content: "Replier";
font-size: 13px}
.dash-restock-collapse[open] .dash-restock-list{padding: 0 16px 16px}
.dash-restock-title{font-size: 13px;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.2px}
.dash-restock-list{list-style: none;
padding: 0;
margin: 0}
.dash-restock-item{display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 15px}
.dash-restock-name{color: var(--ink-soft);
font-weight: 500}
.dash-restock-when{font-size: 13px;
font-weight: 700;
color: var(--brand-dark);
text-transform: uppercase;
letter-spacing: 0.5px}
.dash-callout{margin-top: 16px;
padding: 16px 20px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius)}
.dash-callout[data-tone="warm"]{background: color-mix(in oklch, var(--danger) 7%, var(--paper-sheet));
border-color: color-mix(in oklch, var(--danger) 30%, var(--border))}
.dash-callout[data-tone="cool"]{background: color-mix(in oklch, var(--ardoise) 7%, var(--paper-sheet));
border-color: color-mix(in oklch, var(--ardoise) 30%, var(--border))}
.dash-callout[data-tone="ok"]{background: color-mix(in oklch, var(--brand-dark) 6%, var(--paper-sheet));
border-color: color-mix(in oklch, var(--brand-dark) 25%, var(--border))}
.dash-callout[data-tone="watch"]{background: color-mix(in oklch, oklch(0.72 0.13 75) 6%, var(--paper-sheet));
border-color: color-mix(in oklch, oklch(0.72 0.13 75) 35%, var(--border))}
.dash-callout[data-tone="saison"]{background: linear-gradient(
135deg,
color-mix(in oklch, var(--brand-dark) 8%, var(--paper-sheet)),
color-mix(in oklch, oklch(0.8 0.1 75) 8%, var(--paper-sheet))
);
border-color: color-mix(in oklch, var(--brand-dark) 20%, var(--border))}
.dash-callout-meta{font-size: 12px;
color: var(--ink-muted);
margin-top: 2px}
.dash-callout-list{margin-top: 8px}
.dash-callout-body{margin-top: 8px;
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft)}
.dash-callout-footnote{margin-top: 8px;
font-size: 12px;
color: var(--ink-muted)}
.dash-callout-cta{margin-top: 8px}
.dash-callout-cta .btn-sec{font-size: 13px;
padding: 8px 16px}
.dash-callout-hit{color: var(--brand-dark)}
.dash-callout-gap{color: var(--brick-deep)}
.dash-season-chips{display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px}
.dash-season-chip{display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--paper-sheet);
border-radius: 999px;
border: 1px solid var(--border);
font-size: 13px;
font-weight: 600}
.dash-season-chip-emoji{font-size: 16px}
.dash-season-chip-pct{color: var(--brand-dark);
font-weight: 700}
.historique-meta{text-align: center;
margin-top: 16px;
font-size: 13px;
color: var(--ink-muted);
font-variant-numeric: tabular-nums}
.historique-meta strong{color: var(--ink);
font-weight: 700}
.menu-exports{display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 20px}
.menu-export-btn{padding: 8px 16px;
border-radius: 980px;
background: var(--paper-sheet);
border: 1px solid var(--border);
font-size: 13px;
font-weight: 600;
color: var(--ink-soft);
text-decoration: none;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
@media (hover: hover) and (pointer: fine){.menu-export-btn:hover{background: var(--accent-tint);
border-color: var(--brand-dark);
color: var(--brand-dark)}
}
.menu-recipe-cover--editorial{position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(120px, auto) 1fr;
gap: clamp(20px, 3vw, 36px);
padding: clamp(24px, 3vw, 36px);
min-height: clamp(180px, 50vw, 220px);
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: 28px;
box-shadow: 0 2px 12px oklch(0.22 0.02 110 / 0.06);
isolation: isolate}
.menu-recipe-cover--editorial::before{content: "É";
position: absolute;
right: clamp(-40px, -4vw, -20px);
bottom: clamp(-80px, -8vw, -40px);
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(240px, 38vw, 420px);
line-height: 0.85;
color: var(--brand);
opacity: 0.08;
pointer-events: none;
z-index: 0;
user-select: none;
letter-spacing: -0.04em}
.menu-recipe-cover--editorial::after{content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: var(--brand);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
z-index: 1}
.menu-recipe-cover--editorial > *{position: relative;
z-index: 2}
.menu-recipe-cover-stats{display: flex;
flex-direction: column;
gap: 16px;
padding-right: clamp(16px, 3vw, 28px);
border-right: 1px solid var(--border)}
.menu-recipe-cover-stat{display: flex;
align-items: baseline;
gap: 8px;
font-variant-numeric: tabular-nums}
.menu-recipe-cover-stat-num{font-family: var(--font-display);
font-size: clamp(28px, 4vw, 40px);
font-weight: 400;
line-height: 1;
color: var(--ink);
font-feature-settings:
"tnum" 1,
"lnum" 1}
.menu-recipe-cover-stat-unit{font-size: 13px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted)}
.menu-recipe-cover-body{display: flex;
flex-direction: column;
gap: 8px;
min-width: 0}
.menu-recipe-cover-eyebrow{font-size: 12px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--accent-deep);
line-height: 1.3}
.menu-recipe-cover-title{font-family: var(--font-display);
font-size: clamp(22px, 3.2vw, 34px);
line-height: 1.18;
font-weight: 400;
font-style: italic;
color: var(--ink);
letter-spacing: -0.01em;
padding-bottom: 4px;
margin: 0}
.menu-recipe-cover-badges{margin-top: auto;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
font-style: normal;
line-height: 1.6;
padding-bottom: 8px}
.menu-recipe-cover-badges span{color: var(--accent-deep);
font-style: normal;
font-weight: 600}
@media (max-width: 480px){.menu-recipe-cover--editorial{grid-template-columns: 1fr;
gap: 16px;
padding-bottom: clamp(28px, 5vw, 40px)}
.menu-recipe-cover-stats{display: grid;
grid-template-columns: repeat(3, auto);
justify-content: start;
align-items: baseline;
gap: 8px 16px;
padding-right: 0;
padding-bottom: 16px;
border-right: none;
border-bottom: 1px solid var(--border)}
.menu-recipe-cover-stat-num{font-size: 23px}
.menu-recipe-cover-badges{margin-top: 4px;
padding-bottom: 4px;
line-height: 1.5}
.menu-recipe-cover-title{line-height: 1.22;
padding-bottom: 4px}
.menu-recipe-cover--editorial::before{font-size: clamp(180px, 50vw, 240px);
bottom: clamp(-100px, -14vw, -50px);
right: clamp(-50px, -7vw, -25px)}
}
.menu-recipe-votes{display: flex;
align-items: center;
gap: 4px;
margin-top: 8px}
.menu-star{font-size: 16px;
color: var(--border)}
.menu-star.is-filled{color: var(--courge)}
.menu-vote-label{font-size: 13px;
color: var(--ink-muted);
margin-left: 8px}
.menu-tag-cuisine{padding: 2px 8px;
border-radius: 980px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
background: var(--paper-deep);
color: var(--ink-soft);
text-transform: capitalize}
.menu-astuce-chef{display: flex;
gap: 16px;
padding: 16px 16px;
background: var(--paper-sheet);
border: 1px solid oklch(0.59 0.16 143 / 0.18);
border-radius: var(--radius);
margin-top: 20px;
margin-bottom: 20px}
.menu-astuce-icon{font-size: 30px;
flex-shrink: 0;
line-height: 1.2}
.menu-astuce-label{font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 4px}
.menu-astuce-text{font-family: var(--font-display);
font-size: 15px;
font-style: italic;
color: var(--ink-soft);
line-height: 1.5}
@media (max-width: 640px){.menu-recipe-cover-emoji{font-size: 56px}
}
.menu-recipe-head{margin-bottom: 28px}
.menu-recipe-eyebrow{display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-dark)}
.menu-recipe-title{font-family: var(--font-display);
font-size: clamp(36px, 4.6vw, 56px);
font-weight: 400;
color: var(--ink);
line-height: 1.04;
letter-spacing: -0.022em;
margin: 0 0 16px;
text-wrap: balance}
.menu-recipe-description{font-family: var(--font-display);
font-size: clamp(17px, 1.6vw, 20px);
font-style: italic;
line-height: 1.55;
color: var(--ink-soft);
max-width: 56ch;
margin: 0}
.menu-recipe-kcal{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
margin: var(--space-md) 0 var(--space-lg);
font-variant-numeric: tabular-nums}
.menu-recipe-meta{display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
margin: 28px 0 36px;
padding: 0}
.menu-recipe-meta > div{padding: 16px 16px 16px 0;
border-right: 1px solid var(--border)}
.menu-recipe-meta > div:last-child{border-right: none;
padding-right: 0}
.menu-recipe-meta dt{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 8px}
.menu-recipe-meta dd{font-family: var(--font-display);
font-size: 23px;
font-weight: 400;
color: var(--ink);
margin: 0;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums}
.menu-recipe-section{margin-bottom: 36px}
.menu-recipe-section-title{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border)}
.menu-ingredients{list-style: none;
padding: 0;
margin: 0}
.menu-ingredient{display: grid;
grid-template-columns: 1fr auto auto auto;
align-items: baseline;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--border2);
font-family: var(--font-body);
font-size: 15px;
color: var(--ink)}
.menu-ingredient:last-child{border-bottom: none}
.menu-ingredient-name{font-weight: 500}
.menu-ingredient-qty{font-size: 13px;
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap}
.menu-ingredient-source{display: inline-flex;
gap: 8px;
flex-wrap: wrap}
.menu-ingredient-price{font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
color: var(--brand-dark);
font-variant-numeric: tabular-nums;
white-space: nowrap}
.menu-ingredient-price.is-est{color: var(--ink-muted);
font-weight: 500}
.menu-tag{display: inline-flex;
align-items: center;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
padding: 4px 8px;
border-radius: 980px;
border: 1px solid currentColor;
text-transform: none}
.menu-tag-bright{color: var(--brand-dark);
background: var(--accent-tint);
border-color: oklch(0.59 0.16 143 / 0.26)}
.menu-tag-cool{color: oklch(0.42 0.08 240);
background: var(--ardoise-tint);
border-color: oklch(0.52 0.1 220 / 0.26)}
.menu-tag-pantry{color: var(--brand-dark);
background: var(--accent-tint);
border-color: oklch(0.59 0.16 143 / 0.26)}
.menu-tag-store{color: var(--ink-soft);
background: var(--paper-sheet);
border-color: var(--border)}
.menu-tag-warn{color: var(--danger);
background: var(--danger-tint);
border-color: oklch(0.44 0.14 25 / 0.26)}
.menu-instructions{font-family: var(--font-body);
font-size: 15px;
line-height: 1.7;
color: var(--ink-soft);
white-space: pre-line;
background: var(--paper-soft);
padding: 24px 24px;
border-radius: var(--radius);
border: 1px solid var(--border)}
.menu-recipe-footer{margin-top: 16px;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: stretch}
.menu-recipe-footer .btn-main,
.menu-recipe-footer .btn-sec{flex: 1 1 auto;
min-width: 160px;
text-align: center;
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
hyphens: none;
line-height: 1.35;
padding: 12px 16px}
.menu-recipe-footer .btn-main{flex: 1 1 100%;
min-width: 100%}
.menu-recipe-footer-quiet{flex: 1 1 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 var(--space-sm);
margin-top: var(--space-2xs)}
.menu-recipe-footer .menu-swap-form{display: flex}
.menu-quiet-link{background: none;
border: none;
padding: 12px 0;
font-family: var(--font-body);
font-size: 13px;
line-height: 1.4;
color: var(--ink-soft);
text-decoration: underline;
text-decoration-color: color-mix(in oklch, var(--ink-soft) 32%, transparent);
text-underline-offset: 3px;
cursor: pointer;
transition: color 0.15s ease, text-decoration-color 0.15s ease}
@media (hover: hover) and (pointer: fine){.menu-quiet-link:hover{color: var(--ink);
text-decoration-color: currentColor}
}
.menu-quiet-link:focus-visible{outline: 2px solid var(--brand-dark);
outline-offset: 3px;
border-radius: 3px}
.menu-quiet-sep{color: var(--ink-fade);
font-size: 13px}
@media (min-width: 720px){.menu-recipe-footer .btn-main{flex: 1 1 auto;
min-width: 220px}
}
@media (max-width: 480px){.menu-recipe-footer .btn-sec{flex: 1 1 100%;
min-width: 100%}
}
.menu-list{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: clamp(28px, 3vw, 36px);
box-shadow: var(--shadow);
align-self: start;
position: sticky;
top: 88px}
.menu-list-head{margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border)}
.menu-list-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-dark);
margin-bottom: 8px}
.menu-list-title{font-family: var(--font-display);
font-size: 23px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.012em;
line-height: 1.15;
margin: 0;
text-wrap: balance}
.menu-list-title em{color: var(--brand-dark);
font-style: italic;
font-family: var(--font-display)}
.menu-list-group{margin-bottom: 24px}
.menu-list-group:last-of-type{margin-bottom: 12px}
.menu-list-group-title{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-muted);
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid var(--border2)}
.menu-list-item{display: grid;
grid-template-columns: 22px 1fr auto;
align-items: center;
gap: 12px;
padding: 8px 0;
font-family: var(--font-body);
font-size: 15px;
color: var(--ink);
cursor: pointer}
.menu-list-check{width: 20px;
height: 20px;
border-radius: 5px;
border: 1.5px solid var(--border);
background: var(--paper);
flex-shrink: 0;
position: relative;
cursor: pointer;
transition:
transform 0.2s,
opacity 0.2s,
color 0.2s,
background 0.2s,
border-color 0.2s,
box-shadow 0.2s}
@media (hover: hover) and (pointer: fine){.menu-list-check:hover{border-color: var(--brand-dark)}
}
.menu-list-check.is-on{background: var(--brand-dark);
border-color: var(--brand-dark)}
.menu-list-check.is-on::after{content: "";
position: absolute;
top: 4px;
left: 6px;
width: 5px;
height: 9px;
border-right: 2px solid var(--paper-sheet);
border-bottom: 2px solid var(--paper-sheet);
transform: rotate(42deg)}
.menu-list-check:focus-visible{outline: 2.5px solid var(--brand-dark);
outline-offset: 3px}
.menu-list-name{line-height: 1.4}
.menu-list-item.is-done .menu-list-name{text-decoration: line-through;
color: var(--ink-fade)}
.menu-list-qty{font-size: 12px;
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-transform: none}
.menu-list-pantry{margin-top: 16px;
padding: 16px 16px;
background: var(--accent-tint);
border: 1px solid oklch(0.59 0.16 143 / 0.22);
border-radius: 12px;
font-family: var(--font-body);
font-size: 13px;
line-height: 1.55;
color: var(--brand-dark)}
.menu-list-pantry strong{font-weight: 700}
.menu-rest{text-align: center;
padding: 72px 24px;
background: var(--paper-soft);
border: 1px dashed var(--border);
border-radius: var(--radius-xl);
margin-bottom: 48px}
.menu-rest-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 16px}
.menu-rest-title{font-family: var(--font-display);
font-size: clamp(28px, 3.6vw, 38px);
font-weight: 400;
color: var(--ink);
letter-spacing: -0.014em;
margin: 0 0 12px;
line-height: 1.12}
.menu-rest-title em{color: var(--brand-dark);
font-style: italic;
font-family: var(--font-display)}
.menu-rest p{font-family: var(--font-body);
font-size: 15px;
color: var(--ink-soft);
margin: 0;
line-height: 1.6}
.menu-empty{text-align: center;
padding: clamp(64px, 9vw, 120px) 24px;
max-width: 600px;
margin: 0 auto}
.menu-empty-rule{width: 64px;
height: 2px;
background: var(--brand-dark);
margin: 0 auto 36px}
.menu-empty-title{font-family: var(--font-display);
font-size: clamp(34px, 4.4vw, 52px);
font-weight: 400;
color: var(--ink);
letter-spacing: -0.018em;
line-height: 1.06;
margin: 0 0 24px;
text-wrap: balance}
.menu-empty-title em{color: var(--brand-dark);
font-style: italic;
font-family: var(--font-display)}
.menu-empty-lede{font-family: var(--font-body);
font-size: 16px;
line-height: 1.62;
color: var(--ink-soft);
margin: 0 0 32px;
max-width: 52ch;
margin-left: auto;
margin-right: auto}
.menu-empty-form{margin-bottom: 24px}
.menu-empty-form .btn-main{padding: 16px 36px;
font-size: 16px}
.menu-empty-note{font-family: var(--font-body);
font-size: 13px;
font-style: italic;
color: var(--ink-muted);
margin-top: 16px}
@media (max-width: 1024px){.menu-spread{grid-template-columns: 1fr;
gap: 32px}
.menu-list{position: static}
}
@media (max-width: 768px){.menu-days{grid-template-columns: repeat(7, 1fr)}
.menu-day{padding: 16px 4px 12px}
.menu-day-date{font-size: 19px}
.menu-day-emoji,
.menu-day-empty{font-size: 16px}
.menu-recipe-meta{grid-template-columns: 1fr 1fr}
.menu-recipe-meta > div:nth-child(2){border-right: none}
.menu-recipe-meta > div:nth-child(3){border-right: 1px solid var(--border)}
.menu-ingredient{grid-template-columns: 1fr auto;
gap: 8px 16px}
.menu-ingredient-source{grid-column: 1 / -1;
margin-top: -4px}
.menu-ingredient-price{grid-column: 2}
}
@media (max-width: 480px){.menu-day-name{font-size: 12px;
letter-spacing: 0.12em}
.menu-day-date{font-size: 19px}
.menu-recipe-meta{grid-template-columns: 1fr}
.menu-recipe-meta > div{border-right: none !important;
border-bottom: 1px solid var(--border)}
.menu-recipe-meta > div:last-child{border-bottom: none}
}
.surfac-list{display: grid;
gap: 16px}
.surfac-card{background: color-mix(in oklch, var(--danger-tint) 60%, var(--surface));
border: 1px solid color-mix(in oklch, var(--danger) 22%, var(--border));
border-radius: 14px;
padding: 16px 16px;
display: grid;
gap: 12px}
.surfac-card-head{display: flex;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap}
.surfac-card-name{font-weight: 700;
font-size: 16px}
.surfac-card-epi{color: var(--ink-muted);
font-size: 13px}
.surfac-card-prices{display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
font-variant-numeric: tabular-nums}
.surfac-price{display: grid;
gap: 2px}
.surfac-price-label{font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted)}
.surfac-price-val{font-weight: 600;
font-size: 15px}
.surfac-price-arrow{color: var(--ink-muted);
font-size: 19px}
.surfac-price-paid .surfac-price-val{color: var(--danger);
text-decoration: line-through}
.surfac-price-deal .surfac-price-val{color: var(--brand-dark)}
.surfac-price-diff .surfac-price-val{color: var(--danger);
font-weight: 800}
.surfac-card-actions{display: flex;
gap: 8px;
flex-wrap: wrap}
.surfac-form{display: inline}
.surfac-ignored{list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 8px}
.surfac-ignored li{display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: var(--surface-alt, #f7f4ec);
border-radius: 8px;
color: var(--ink-muted);
font-size: 13px}
.pred-list{display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))}
.pred-card{background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px 16px;
display: grid;
gap: 12px;
position: relative}
.pred-card::before{content: "";
position: absolute;
top: 18px;
left: 18px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--ink-fade);
box-shadow: 0 0 0 4px color-mix(in oklch, var(--ink-fade) 18%, transparent)}
.pred-card .pred-head{padding-left: 20px}
.pred-achete_maintenant{background: color-mix(in oklch, var(--accent-tint) 55%, var(--surface));
border-color: color-mix(in oklch, var(--brand-dark) 22%, var(--border))}
.pred-achete_maintenant::before{background: var(--brand-dark);
box-shadow: 0 0 0 4px color-mix(in oklch, var(--brand-dark) 22%, transparent)}
.pred-attends{background: color-mix(in oklch, var(--accent-tint) 55%, var(--surface));
border-color: color-mix(in oklch, var(--courge) 22%, var(--border))}
.pred-attends::before{background: var(--courge);
box-shadow: 0 0 0 4px color-mix(in oklch, var(--courge) 22%, transparent)}
.pred-stable::before{background: var(--ink-muted);
box-shadow: 0 0 0 4px color-mix(in oklch, var(--ink-muted) 18%, transparent)}
.pred-head{display: flex;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap}
.pred-name{font-weight: 700;
font-size: 15px}
.pred-epi{color: var(--ink-muted);
font-size: 13px}
.pred-message{font-size: 15px;
line-height: 1.4}
.pred-grid{display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 16px;
margin: 0;
font-size: 13px}
.pred-grid > div{display: grid;
gap: 2px}
.pred-grid dt{font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
font-weight: 500}
.pred-grid dd{margin: 0;
font-weight: 600;
font-variant-numeric: tabular-nums}
@media (max-width: 480px){.surfac-card-prices{gap: 8px}
.surfac-price-arrow{display: none}
.pred-list{grid-template-columns: 1fr}
}
@media (prefers-reduced-motion: reduce){*,
*::before,
*::after{animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 120ms !important;
scroll-behavior: auto !important}
.content > *{animation: none !important}
}
.le-toast{position: fixed;
left: 50%;
bottom: calc(env(safe-area-inset-bottom, 0) + 92px);
transform: translateX(-50%) translateY(20px);
padding: 12px 16px;
background: var(--ink);
color: var(--cream-fixed);
border-radius: 14px;
font-size: 15px;
font-weight: 500;
max-width: 92vw;
text-align: center;
opacity: 0;
transition:
opacity 0.25s ease,
transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
z-index: 600;
pointer-events: none;
box-shadow: 0 8px 24px oklch(0.18 0.016 120 / 0.25);
font-feature-settings: "tnum" 1}
.le-toast.is-visible{opacity: 1;
transform: translateX(-50%) translateY(0)}
.le-toast.error{background: var(--danger);
color: var(--cream-fixed)}
.cook-mini-bar{position: fixed;
left: 50%;
bottom: calc(env(safe-area-inset-bottom, 0) + 76px);
transform: translateX(-50%);
width: min(640px, calc(100vw - 24px));
padding: 8px 12px 8px 16px;
background: var(--accent);
color: var(--cream-fixed);
border-radius: 14px;
display: flex;
align-items: center;
gap: 12px;
z-index: 95;
font-family: var(--font-body);
text-decoration: none;
cursor: pointer;
animation: cookMiniIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
box-shadow: 0 6px 22px oklch(0.59 0.16 143 / 0.28)}
.cook-mini-bar[hidden]{display: none}
.cook-mini-bar:active{transform: translateX(-50%) scale(0.98)}
@keyframes cookMiniIn{from{transform: translateX(-50%) translateY(24px);
opacity: 0}
to{transform: translateX(-50%) translateY(0);
opacity: 1}
}
.cook-mini-icon{width: 32px;
height: 32px;
border-radius: 8px;
background: var(--cream-fixed);
color: var(--accent-deep);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 19px;
line-height: 1;
flex-shrink: 0}
.cook-mini-text{flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px}
.cook-mini-label{font-size: 15px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis}
.cook-mini-progress{font-size: 12px;
font-feature-settings: "tnum" 1;
opacity: 0.82;
letter-spacing: 0.01em}
.cook-mini-resume{flex-shrink: 0;
background: var(--cream-fixed);
color: var(--accent-deep);
border: none;
border-radius: 999px;
padding: 8px 16px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
font-family: var(--font-body)}
.pull-refresh{position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(0);
padding-top: env(safe-area-inset-top, 0);
z-index: 90;
pointer-events: none;
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: clamp(56px, 14vw, 88px);
line-height: 1;
color: var(--accent);
opacity: 0;
letter-spacing: -0.02em}
.pull-refresh.is-ready{color: var(--accent-deep)}
.pull-refresh.is-loading{animation: pullRefreshSpin 0.9s cubic-bezier(0.45, 0, 0.55, 1) infinite}
@keyframes pullRefreshSpin{from{transform: translateX(-50%) translateY(80px) rotate(0deg)}
to{transform: translateX(-50%) translateY(80px) rotate(360deg)}
}
.recipe-actions-sheet{border: none;
background: transparent;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
position: fixed;
inset: 0;
z-index: 500}
.recipe-actions-sheet::backdrop{background: oklch(0 0 0 / 0.42);
opacity: 0;
transition: opacity 0.25s ease}
.recipe-actions-sheet.is-visible::backdrop{opacity: 1}
.recipe-actions-sheet-panel{position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--paper-sheet);
border-radius: 18px 18px 0 0;
padding: 8px 0 calc(env(safe-area-inset-bottom, 0) + 12px);
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
max-height: 80vh;
overflow-y: auto}
.recipe-actions-sheet.is-visible .recipe-actions-sheet-panel{transform: translateY(0)}
.recipe-actions-handle{width: 44px;
height: 5px;
background: oklch(0 0 0 / 0.15);
border-radius: 3px;
margin: 8px auto 16px}
.recipe-actions-name{font-family: var(--font-display);
font-size: 19px;
font-weight: 600;
color: var(--ink);
text-align: center;
margin: 0 0 16px;
padding: 0 24px;
letter-spacing: -0.01em}
.recipe-actions-list{display: flex;
flex-direction: column}
.recipe-actions-item{display: flex;
align-items: center;
gap: 16px;
padding: 16px 24px;
background: transparent;
color: var(--ink);
font-size: 16px;
font-weight: 500;
font-family: var(--font-body);
border: none;
border-top: 1px solid var(--border);
width: 100%;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background 0.12s ease;
min-height: 56px}
.recipe-actions-item:active{background: oklch(0 0 0 / 0.04)}
.recipe-actions-item--danger{color: var(--danger)}
.recipe-actions-icon{width: 28px;
height: 28px;
flex-shrink: 0;
border-radius: 7px;
background: var(--accent-tint);
color: var(--accent-deep);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 600}
.recipe-actions-item--danger .recipe-actions-icon{background: oklch(0.92 0.04 25);
color: var(--danger)}
.tb-inline-title{font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.01em;
opacity: 0;
transform: translateY(8px);
transition:
opacity 0.25s ease,
transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
min-width: 0;
flex: 1;
margin: 0 12px}
.topbar.is-title-inline .tb-inline-title{opacity: 1;
transform: translateY(0)}
.topbar.is-title-inline .ptitle{display: none}
[data-theme="dark"] .le-toast{background: var(--paper-sheet);
color: var(--ink)}
[data-theme="dark"] .cook-mini-bar{box-shadow: 0 6px 22px oklch(0 0 0 / 0.35)}
[data-theme="dark"] .recipe-actions-sheet-panel{background: var(--paper-sheet)}
[data-theme="dark"] .recipe-actions-handle{background: oklch(1 0 0 / 0.15)}
[data-theme="dark"] .recipe-actions-icon{background: oklch(1 0 0 / 0.06);
color: var(--accent)}
[data-theme="dark"] .recipe-actions-item--danger .recipe-actions-icon{background: oklch(0.32 0.08 25);
color: oklch(0.78 0.12 25)}
@media (prefers-reduced-motion: reduce){.cook-mini-bar{animation: none}
.pull-refresh.is-loading{animation: none}
.pull-refresh,
.recipe-actions-sheet-panel,
.recipe-actions-sheet::backdrop,
.le-toast{transition: none !important}
}
.main svg:not([width]),
.content svg:not([width]){max-width: 100%;
max-height: 60vh}
details.nav-group-details{}
details.nav-group-details > summary{list-style: none;
cursor: pointer;
-webkit-user-select: none;
user-select: none}
details.nav-group-details > summary::-webkit-details-marker{display: none}
details.nav-group-details > summary::marker{display: none}
details.nav-group-details[open] > summary .nav-group-chevron{transform: rotate(90deg);
color: var(--accent-deep)}
.mobile-tabbar{display: none}
.compte-pwa-hub{display: none}
.sidebar-close-btn{display: none}
.onb-collapse{margin: 24px 0 8px;
border-radius: 14px;
background: color-mix(in oklch, var(--accent-tint) 50%, transparent)}
.onb-collapse[open]{background: var(--accent-tint)}
.onb-collapse-summary{display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 16px;
cursor: pointer;
list-style: none;
font-family: var(--font-body);
user-select: none}
.onb-collapse-summary::-webkit-details-marker{display: none}
.onb-collapse-summary-text{font-size: 15px;
font-weight: 500;
color: var(--ink-soft)}
.onb-collapse-count{color: var(--brand-dark, var(--brand));
font-weight: 600}
.onb-collapse-summary-cta{display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--accent-tint, oklch(0.59 0.16 143 / 0.1));
color: var(--brand-dark, var(--brand));
transition: background 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1)}
.onb-collapse-chevron{transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)}
.onb-collapse[open] .onb-collapse-chevron{transform: rotate(180deg)}
@media (hover: hover) and (pointer: fine){.onb-collapse-summary:hover .onb-collapse-summary-cta{background: var(--accent-tint, oklch(0.59 0.16 143 / 0.18))}
}
@media (prefers-reduced-motion: reduce){.onb-collapse-chevron{transition: none}
}
.onb-collapse-summary:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: 14px}
.onb-collapse[open] .onb-cards{margin: 0;
padding: 0 16px 16px;
border: none}
.onb-collapse[open] .onb-card{background: var(--paper-soft);
border-color: color-mix(in oklch, var(--brand) 18%, transparent)}
.dash-soft-note{font-family: var(--font-body);
font-size: 15px;
line-height: 1.5;
color: var(--ink-soft);
background: var(--paper-soft);
border: 1px solid var(--border);
padding: 12px 16px;
border-radius: 8px;
margin: 0 0 16px}
.dash-soft-note strong{color: var(--ink);
font-weight: 600}
.dash-soft-note[role="alert"]{background: color-mix(in oklch, var(--danger, var(--canneberge, var(--ink-muted))) 6%, var(--paper-soft));
border-color: color-mix(in oklch, var(--danger, var(--canneberge, var(--border))) 30%, var(--border))}
.info-pop{display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 1px solid color-mix(in oklch, var(--ink-muted) 55%, transparent);
border-radius: 50%;
background: transparent;
color: var(--ink-muted);
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
font-style: italic;
cursor: pointer;
padding: 0;
line-height: 1;
position: relative;
transition:
background 0.15s,
color 0.15s,
border-color 0.15s}
.info-pop::after{content: "";
position: absolute;
inset: -13px;
min-width: 44px;
min-height: 44px}
@media (hover: hover) and (pointer: fine){.info-pop:hover,
.info-pop[aria-expanded="true"]{background: var(--ink);
color: var(--paper);
border-color: var(--ink)}
}
.info-pop:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px}
.info-pop-content{display: none}
.info-pop-content:not([hidden]){display: block;
margin-top: 8px;
font-family: var(--font-body);
font-size: 13px;
line-height: 1.5;
color: var(--ink-soft);
background: var(--paper-soft);
padding: 8px 12px;
border-radius: 8px;
max-width: 320px}
.usage-banner{margin: 16px 0 8px;
border: 1px dashed color-mix(in oklch, var(--ink-muted) 35%, transparent);
border-radius: 12px;
background: color-mix(in oklch, var(--paper-soft) 80%, transparent)}
.usage-banner[open]{background: var(--paper-soft);
border-style: solid}
.usage-banner-summary{display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
cursor: pointer;
list-style: none;
user-select: none}
.usage-banner-summary::-webkit-details-marker{display: none}
.usage-banner-summary:focus-visible{outline: 2px solid var(--brand);
outline-offset: -2px;
border-radius: 12px}
.usage-banner-text{font-size: 13px;
color: var(--ink-soft);
font-weight: 500}
.usage-banner-cta{font-size: 13px;
font-weight: 600;
color: var(--brand-dark, var(--brand));
letter-spacing: 0.04em}
.usage-banner[open] .usage-banner-cta{font-size: 0}
.usage-banner[open] .usage-banner-cta::before{content: "Replier";
font-size: 13px}
.usage-banner-list{list-style: none;
padding: 0 16px 16px;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px}
.usage-banner-item{display: grid;
grid-template-columns: minmax(140px, 1fr) 2fr auto;
align-items: center;
gap: 12px;
font-size: 13px}
.usage-banner-item.is-full{color: var(--canneberge, var(--ink-muted))}
.usage-banner-label{color: var(--ink);
font-weight: 500}
.usage-banner-bar{height: 4px;
background: var(--border);
border-radius: 4px;
overflow: hidden}
.usage-banner-bar-fill{display: block;
height: 100%;
background: var(--brand);
border-radius: 4px;
transform-origin: left center;
transform: scaleX(var(--fill, 0));
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
width: 100%}
.usage-banner-item.is-full .usage-banner-bar-fill{background: var(--canneberge, var(--ink-muted))}
.usage-banner-count{font-variant-numeric: tabular-nums;
font-size: 13px;
font-weight: 600;
color: var(--ink-muted)}
.usage-banner-upsell{padding: 8px 16px 16px;
margin: 0;
font-size: 13px;
font-style: italic;
color: var(--ink-muted);
border-top: 1px dashed var(--border2)}
.usage-banner-upsell a{color: var(--brand-dark, var(--brand));
font-weight: 600}
.admin-users-list{list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px}
.admin-user-card{background: var(--paper-sheet, var(--paper-soft));
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px;
transition:
border-color 0.15s,
box-shadow 0.15s}
.admin-user-card.is-suspended{opacity: 0.65;
border-color: color-mix(in oklch, var(--canneberge, var(--ink-muted)) 25%, var(--border))}
.admin-user-head{display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap}
.admin-user-identity{flex: 1;
min-width: 0}
.admin-user-name{font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
color: var(--ink);
margin-bottom: 2px;
letter-spacing: -0.005em}
.admin-user-email{font-size: 13px;
color: var(--ink-muted);
word-break: break-word}
.admin-user-meta{font-size: 12px;
color: var(--ink-muted);
margin-top: 2px}
.admin-user-plan{flex-shrink: 0;
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px}
.admin-user-tag{display: inline-block;
font-size: 12px;
font-weight: 600;
padding: 4px 8px;
border-radius: 980px;
letter-spacing: 0.02em;
white-space: nowrap}
.admin-user-tag.is-paid{background: var(--accent-tint);
color: var(--brand-dark, var(--brand))}
.admin-user-tag.is-trial{background: var(--paille-tint, var(--paper-soft));
color: var(--ink-soft)}
.admin-user-tag.is-comped{background: color-mix(in oklch, var(--brand) 14%, transparent);
color: var(--brand-dark, var(--brand))}
.admin-user-tag.is-danger{background: color-mix(in oklch, var(--canneberge, var(--ink-muted)) 18%, transparent);
color: var(--canneberge, var(--ink-muted))}
.admin-user-tag.is-expired{background: var(--paper-soft);
color: var(--ink-muted)}
.admin-user-stats{display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 16px 0;
border-top: 1px solid var(--border2);
border-bottom: 1px solid var(--border2);
margin-bottom: 16px}
.admin-user-stat-label{font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-muted);
margin-bottom: 4px;
font-weight: 500}
.admin-user-stat-value{font-family: var(--font-display);
font-size: 16px;
color: var(--ink);
font-variant-numeric: tabular-nums;
font-weight: 400}
.admin-user-stat-value.is-muted{color: var(--ink-muted);
font-size: 15px}
.admin-user-actions{text-align: right}
.admin-user-action{font-size: 13px;
padding: 8px 16px}
.admin-user-empty{padding: 32px;
text-align: center;
color: var(--ink-muted);
background: var(--paper-soft);
border-radius: 14px}
@media (max-width: 480px){.admin-user-head{flex-direction: column;
gap: 8px}
.admin-user-plan{text-align: left;
align-items: flex-start}
.admin-user-stats{grid-template-columns: 1fr 1fr}
.admin-user-stats .admin-user-stat:last-child{grid-column: 1 / -1}
}
.evenement-list{list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px}
.evenement-card{background: var(--paper-sheet, var(--paper-soft));
border-radius: 14px;
padding: 16px}
.evenement-card.is-expired{opacity: 0.6}
.evenement-card-head{display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
margin-bottom: 16px;
flex-wrap: wrap}
.evenement-card-eyebrow{font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-muted);
margin-bottom: 4px;
font-weight: 500}
.evenement-card-title{font-family: var(--font-display);
font-size: 19px;
font-weight: 400;
margin: 0 0 4px;
color: var(--ink);
letter-spacing: -0.005em}
.evenement-card-meta{font-size: 13px;
color: var(--ink-soft)}
.evenement-tag{display: inline-block;
font-size: 12px;
font-weight: 600;
padding: 4px 8px;
border-radius: 980px;
white-space: nowrap}
.evenement-tag.is-active{background: var(--accent-tint);
color: var(--brand-dark, var(--brand))}
.evenement-tag.is-warn{background: var(--paille-tint, var(--paper-soft));
color: var(--ink-soft)}
.evenement-tag.is-pending{background: var(--paper-soft);
color: var(--ink-muted)}
.evenement-tag.is-expired{background: var(--paper-soft);
color: var(--ink-muted)}
.evenement-card-actions{text-align: right}
.ev-cookbook{max-width: 720px;
margin: 0 auto;
padding: 0 8px;
position: relative}
@media (min-width: 1100px){.ev-cookbook{max-width: 760px}
}
.ev-cover{text-align: center;
padding: clamp(40px, 7vw, 72px) 16px clamp(28px, 5vw, 48px);
margin-bottom: 0}
.ev-cover-title{font-family: var(--font-display);
font-weight: 400;
font-size: clamp(32px, 5.5vw, 48px);
line-height: 1.04;
letter-spacing: -0.018em;
color: var(--ink);
margin: 0 0 16px;
text-wrap: balance}
.ev-cover-standfirst{font-family: var(--font-body);
font-size: clamp(15px, 1.6vw, 18px);
line-height: 1.55;
color: var(--ink-soft);
margin: 0 0 20px;
max-width: 56ch;
margin-left: auto;
margin-right: auto}
.ev-cover-standfirst em{font-style: italic;
color: var(--brand-dark, var(--brand))}
.ev-cover-standfirst strong{color: var(--ink);
font-weight: 600}
.ev-cover-byline{font-family: var(--font-body);
font-size: 15px;
color: var(--ink-muted);
margin: 0;
font-style: italic}
.ev-status-bar--cookbook{background: transparent;
border-top: 1px solid var(--border2);
border-bottom: 1px solid var(--border2);
border-radius: 0;
margin: 0 0 clamp(32px, 5vw, 56px);
padding: 16px 16px;
font-size: 13px}
.ev-toc{display: none}
@media (min-width: 1100px){.ev-toc{display: block;
position: fixed;
top: 50%;
right: max(24px, calc((100vw - 760px) / 2 - 200px));
transform: translateY(-50%);
width: 180px;
z-index: 5;
pointer-events: auto}
.ev-toc-label{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 16px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border2)}
.ev-toc-list{list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px}
.ev-toc-link{display: flex;
align-items: baseline;
gap: 12px;
font-family: var(--font-body);
font-size: 15px;
color: var(--ink-muted);
text-decoration: none;
transition: color 0.2s;
line-height: 1.35}
@media (hover: hover) and (pointer: fine){.ev-toc-link:hover{color: var(--ink-soft)}
}
.ev-toc-link.is-current{color: var(--ink);
font-weight: 500}
.ev-toc-link.is-current .ev-toc-num{color: var(--brand-dark, var(--brand))}
.ev-toc-num{font-family: var(--font-display);
font-size: 15px;
color: var(--ink-fade);
flex-shrink: 0;
min-width: 18px}
}
.ev-chapter{margin: clamp(40px, 6vw, 64px) 0;
padding: 0 8px;
scroll-margin-top: 80px}
.ev-tabs{position: sticky;
top: 0;
z-index: 20;
display: flex;
gap: 4px;
padding: 12px 4px;
margin: 24px 0 0;
background: var(--paper);
border-bottom: 1px solid var(--border2);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch}
.ev-tabs::-webkit-scrollbar{display: none}
.ev-tab{flex: 0 0 auto;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 8px 16px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 500;
color: var(--ink-soft);
text-decoration: none;
border-radius: 999px;
transition:
color 0.15s,
background 0.15s;
white-space: nowrap}
@media (hover: hover) and (pointer: fine){.ev-tab:hover{color: var(--ink);
background: var(--paper-soft)}
}
.ev-tab.is-active{color: var(--brand-dark);
background: var(--accent-tint);
font-weight: 600}
.ev-tab:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px}
.ev-tab.is-disabled{color: var(--ink-muted);
opacity: 0.55;
cursor: not-allowed;
user-select: none}
@media (hover: hover) and (pointer: fine){.ev-tab.is-disabled:hover{background: transparent;
color: var(--ink-muted)}
}
body.ev-tab-menu .ev-chapter:not(#ev-ch-menu),
body.ev-tab-marche .ev-chapter:not(#ev-ch-marche),
body.ev-tab-cuisine .ev-chapter:not(#ev-ch-cuisine),
body.ev-tab-materiel .ev-chapter:not(#ev-ch-tour){display: none}
.ev-chapter-kicker{display: block;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 8px;
font-feature-settings: "lnum"}
.ev-chapter-num{display: none}
.ev-chapter-title{font-family: var(--font-display);
font-weight: 400;
font-size: clamp(28px, 4vw, 38px);
line-height: 1.05;
letter-spacing: -0.018em;
color: var(--ink);
margin: 0 0 20px;
text-wrap: balance}
.ev-chapter-intro{font-family: var(--font-body);
font-size: clamp(15.5px, 1.5vw, 17px);
line-height: 1.7;
color: var(--ink);
margin: 0 0 32px;
max-width: 56ch}
.ev-dropcap{float: left;
font-family: var(--font-display);
font-size: 2.4em;
line-height: 0.85;
margin: 0.08em 0.1em 0 0;
color: var(--brand-dark, var(--brand));
font-weight: 400}
@media (max-width: 640px){.ev-dropcap{font-size: 2em}
}
@media (prefers-contrast: more){.ev-dropcap{float: none;
font-size: 1em;
line-height: inherit;
margin: 0;
color: inherit}
}
body.mode-grand-maman .ev-dropcap{float: none;
font-size: 1em;
line-height: inherit;
margin: 0;
color: inherit}
.ev-course{margin-bottom: clamp(28px, 4vw, 40px)}
.ev-course-eyebrow{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 0 0 16px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border2)}
.ev-course-list{display: flex;
flex-direction: column}
.ev-dish{padding: 16px 0;
border-bottom: 1px solid var(--border2)}
.ev-dish:last-child{border-bottom: none}
.ev-dish-name{font-family: var(--font-display);
font-weight: 400;
font-size: 23px;
line-height: 1.2;
color: var(--ink);
letter-spacing: -0.008em;
margin: 0 0 8px}
.ev-dish-line{font-family: var(--font-body);
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft);
font-style: italic;
margin: 0 0 8px;
max-width: 60ch}
.ev-dish-meta{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
margin: 0;
display: flex;
gap: 16px;
align-items: baseline;
font-feature-settings:
"tnum" 1,
"lnum" 1}
.ev-dish-meta span:not(.ev-dish-cost){font-style: italic}
.ev-dish-cost{font-variant-numeric: tabular-nums;
color: var(--ink-soft);
font-weight: 500;
margin-left: auto}
.ev-stall{margin-bottom: clamp(28px, 4vw, 40px)}
.ev-stall-head{margin-bottom: 16px}
.ev-stall-name{font-family: var(--font-body);
font-weight: 600;
font-size: 16px;
color: var(--ink);
letter-spacing: -0.005em;
margin: 0 0 2px;
text-transform: none}
.ev-stall-meta{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
margin: 0;
display: flex;
gap: 8px;
flex-wrap: wrap}
.ev-stall-total{font-variant-numeric: tabular-nums;
color: var(--ink-soft);
font-weight: 600}
.ev-stall-list{list-style: none;
padding: 0;
margin: 0}
.ev-stall-item{border-bottom: 1px dotted var(--border2)}
.ev-stall-item:last-child{border-bottom: none}
.ev-stall-check{display: grid;
grid-template-columns: 28px 1fr auto;
gap: 12px;
align-items: baseline;
padding: 16px 4px;
min-height: 44px;
cursor: pointer;
transition: opacity 0.2s}
.ev-stall-checkbox{appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
border: 1.5px solid var(--border);
border-radius: 4px;
cursor: pointer;
position: relative;
background: var(--paper);
transition:
background 0.15s,
border-color 0.15s;
flex-shrink: 0;
align-self: center}
.ev-stall-checkbox:checked{background: var(--brand);
border-color: var(--brand)}
.ev-stall-checkbox:checked::after{content: "";
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 12px;
border-right: 2px solid var(--cream-fixed, var(--paper));
border-bottom: 2px solid var(--cream-fixed, var(--paper));
transform: rotate(45deg)}
.ev-stall-checkbox:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px}
.ev-stall-good{font-family: var(--font-body);
font-size: 15px;
color: var(--ink);
line-height: 1.45;
text-transform: none}
.ev-stall-name-item{font-weight: 500;
color: var(--ink)}
.ev-stall-qty{color: var(--ink-muted);
font-weight: 400;
font-style: normal;
font-size: 15px;
margin-left: 2px}
.ev-stall-mark{display: inline-flex;
align-items: center;
margin-left: 8px;
padding: 2px 8px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
font-style: normal;
color: var(--brand-dark, var(--brand));
background: var(--accent-tint);
border-radius: 999px;
letter-spacing: 0;
vertical-align: 1px;
font-variant-numeric: tabular-nums}
.ev-stall-price{font-family: var(--font-body);
font-variant-numeric: tabular-nums;
font-weight: 500;
color: var(--ink);
font-size: 15px;
align-self: center}
.ev-stall-check.is-done .ev-stall-good,
.ev-stall-check.is-done .ev-stall-price{text-decoration: line-through;
text-decoration-thickness: 1px;
opacity: 0.55}
.ev-timeline{list-style: none;
padding: 0 0 0 0;
margin: 0}
.ev-tl-step{border-bottom: 1px solid var(--border2)}
.ev-tl-step:last-child{border-bottom: none}
.ev-tl-check{display: grid;
grid-template-columns: 28px 1fr;
gap: 16px;
align-items: start;
padding: 16px 4px;
min-height: 44px;
cursor: pointer}
.ev-tl-checkbox{appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
border: 1.5px solid var(--border);
border-radius: 50%;
cursor: pointer;
position: relative;
background: var(--paper);
transition:
background 0.15s,
border-color 0.15s;
margin-top: 2px}
.ev-tl-checkbox:checked{background: var(--brand);
border-color: var(--brand)}
.ev-tl-checkbox:checked::after{content: "";
position: absolute;
left: 5px;
top: 2px;
width: 6px;
height: 11px;
border-right: 2px solid var(--cream-fixed, var(--paper));
border-bottom: 2px solid var(--cream-fixed, var(--paper));
transform: rotate(45deg)}
.ev-tl-checkbox:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px}
.ev-tl-body{min-width: 0}
.ev-tl-when{font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-dark, var(--brand));
margin: 0 0 8px}
.ev-tl-task{font-family: var(--font-display);
font-weight: 400;
font-size: clamp(15px, 3.6vw, 18px);
line-height: 1.45;
color: var(--ink);
letter-spacing: -0.005em;
margin: 0;
text-wrap: balance;
text-transform: none}
.ev-tl-dur{font-family: var(--font-body);
font-size: 13px;
color: var(--ink-muted);
font-style: italic;
margin: 8px 0 0}
.ev-tl-check.is-done .ev-tl-task,
.ev-tl-check.is-done .ev-tl-when,
.ev-tl-check.is-done .ev-tl-dur{text-decoration: line-through;
text-decoration-thickness: 1px;
opacity: 0.55}
.ev-toolkit{list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0}
@media (min-width: 600px){.ev-toolkit{grid-template-columns: 1fr 1fr;
column-gap: 32px}
}
.ev-toolkit-item{border-bottom: 1px dotted var(--border2)}
.ev-toolkit-check{display: grid;
grid-template-columns: 28px 1fr auto;
gap: 16px;
align-items: baseline;
padding: 16px 4px;
min-height: 44px;
cursor: pointer}
.ev-toolkit-checkbox{appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
border: 1.5px solid var(--border);
border-radius: 4px;
cursor: pointer;
position: relative;
background: var(--paper);
align-self: center}
.ev-toolkit-checkbox:checked{background: var(--brand);
border-color: var(--brand)}
.ev-toolkit-checkbox:checked::after{content: "";
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 12px;
border-right: 2px solid var(--cream-fixed, var(--paper));
border-bottom: 2px solid var(--cream-fixed, var(--paper));
transform: rotate(45deg)}
.ev-toolkit-checkbox:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px}
.ev-toolkit-name{font-family: var(--font-body);
font-size: 15px;
color: var(--ink);
line-height: 1.45}
.ev-toolkit-qty{font-family: var(--font-body);
font-variant-numeric: tabular-nums;
font-size: 15px;
color: var(--ink-soft);
font-weight: 500}
.ev-toolkit-check.is-done .ev-toolkit-name,
.ev-toolkit-check.is-done .ev-toolkit-qty{text-decoration: line-through;
text-decoration-thickness: 1px;
opacity: 0.55}
.ev-voix{margin: 0 0 32px;
padding: 0;
max-width: 56ch}
.ev-voix-mot{font-family: var(--font-body);
font-size: clamp(16px, 1.6vw, 18.5px);
line-height: 1.7;
color: var(--ink);
margin: 0 0 12px;
padding: 0;
border: none;
text-wrap: pretty}
.ev-voix-mot::before,
.ev-voix-mot::after{content: none}
.ev-voix-signataire{font-family: var(--font-display);
font-style: italic;
font-size: clamp(14px, 1.2vw, 15.5px);
color: var(--brand-dark, var(--brand));
letter-spacing: 0.01em;
margin: 0;
padding-left: 4px}
.ev-voix--secondaire .ev-voix-mot{font-size: clamp(15px, 1.4vw, 17px);
font-style: italic;
color: var(--ink-soft);
line-height: 1.65;
max-width: 50ch}
.ev-colophon{text-align: center;
margin-top: clamp(32px, 5vw, 56px);
padding-top: clamp(32px, 5vw, 48px)}
.ev-colophon-text{font-family: var(--font-body);
font-size: 15px;
font-style: italic;
color: var(--ink-soft);
line-height: 1.6;
margin: 0 0 24px;
max-width: 56ch;
margin-left: auto;
margin-right: auto}
.ev-colophon-text em{font-style: italic;
color: var(--brand-dark, var(--brand))}
.ev-colophon-actions{display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 24px}
@media print{body{background: white;
color: black}
.ev-cookbook{max-width: 100%;
padding: 0}
.ev-cover-title{font-size: 38px}
.ev-toc,
.ev-status-bar,
[data-no-print],
.nav,
.land-nav,
.site-nav,
.topbar,
.sidebar,
.vocal-overlay,
footer,
.footer-mobile-tabs{display: none !important}
.ev-chapter{page-break-inside: avoid}
.ev-dish{page-break-inside: avoid}
.ev-stall-checkbox,
.ev-tl-checkbox,
.ev-toolkit-checkbox{border: 1.5px solid #000 !important;
background: white !important}
.ev-stall-checkbox:checked,
.ev-tl-checkbox:checked,
.ev-toolkit-checkbox:checked{background: white !important}
.ev-stall-checkbox:checked::after,
.ev-tl-checkbox:checked::after,
.ev-toolkit-checkbox:checked::after{border-color: var(--ink, #0c0c0a) !important}
body[class*="ev-tab-"] .ev-chapter{display: block !important}
body.ev-print-list .ev-cover ~ *:not(#ev-ch-marche):not(.ev-colophon),
body.ev-print-list #ev-ch-menu,
body.ev-print-list #ev-ch-cuisine,
body.ev-print-list #ev-ch-tour{display: none !important}
body.ev-print-timeline .ev-cover ~ *:not(#ev-ch-cuisine):not(.ev-colophon),
body.ev-print-timeline #ev-ch-menu,
body.ev-print-timeline #ev-ch-marche,
body.ev-print-timeline #ev-ch-tour{display: none !important}
}
.ev-print-options{position: relative;
display: inline-block}
.ev-print-summary{list-style: none;
cursor: pointer;
user-select: none}
.ev-print-summary::-webkit-details-marker{display: none}
.ev-print-options-body{position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
min-width: 240px;
z-index: 5}
.ev-print-options-body .btn-sec{white-space: nowrap;
text-align: left}
.ev-form{max-width: 680px}
.ev-form-group{margin-bottom: 20px}
.ev-form-group--last{margin-bottom: 24px}
.ev-form-label{display: block;
font-weight: 600;
margin-bottom: 8px;
color: var(--ink)}
.ev-form-input,
.ev-form-select,
.ev-form-textarea{width: 100%;
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: 8px;
font-family: var(--font-body);
font-size: 15px;
background: var(--paper)}
.ev-form-input--narrow{width: 200px}
.ev-form-hint{font-size: 13px;
color: var(--ink-muted);
margin-top: 4px}
.ev-form-row{display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 20px}
@media (max-width: 480px){.ev-form-row{grid-template-columns: 1fr}
}
.ev-form-prefix{margin-left: 8px;
color: var(--ink-muted)}
.ev-form-categories{display: grid;
grid-template-columns: 1fr;
gap: 8px}
.ev-form-categorie-label{display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
padding: 16px;
min-height: 44px;
background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: 10px}
.ev-form-categorie-checkbox{margin-top: 2px;
width: 20px;
height: 20px;
cursor: pointer;
flex-shrink: 0;
accent-color: var(--brand)}
.ev-form-categorie-text{font-size: 15px;
line-height: 1.45;
color: var(--ink)}
.ev-form-categories-intro{font-size: 13px;
color: var(--ink-muted);
margin: 0 0 8px}
.ev-pitch-details{max-width: 720px;
margin: 16px auto 0;
padding: 0 16px}
.ev-pitch-summary{list-style: none;
cursor: pointer;
padding: 12px 16px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: 10px;
font-size: 15px;
font-weight: 500;
color: var(--ink-soft);
transition: background 0.15s}
@media (hover: hover) and (pointer: fine){.ev-pitch-summary:hover{background: color-mix(in oklch, var(--brand) 4%, var(--paper-soft))}
}
.ev-pitch-summary::-webkit-details-marker{display: none}
.ev-pitch-details[open] .ev-pitch-summary{background: var(--paper-sheet);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0}
.ev-pitch-summary-cta{font-size: 13px;
color: var(--ink-muted);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase}
.ev-pitch-body{padding: 16px 16px 16px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 10px 10px;
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft)}
.ev-pitch-body p{margin: 0 0 8px}
.ev-pitch-body strong{color: var(--ink);
font-weight: 600}
.ev-pitch-list{list-style: none;
padding: 0;
margin: 0 0 12px;
display: grid;
grid-template-columns: 1fr;
gap: 8px}
@media (min-width: 540px){.ev-pitch-list{grid-template-columns: 1fr 1fr}
}
.ev-pitch-list li{font-size: 15px;
color: var(--ink);
padding-left: 16px;
position: relative}
.ev-pitch-list li::before{content: "";
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
background: var(--brand);
border-radius: 50%}
.ev-pitch-footer{font-size: 13px;
color: var(--ink-muted);
font-style: italic;
margin: 16px 0 0}
.ev-budget-range{margin-top: 8px;
padding: 8px 12px;
background: var(--accent-tint);
border-radius: 6px;
font-size: 13px;
line-height: 1.5;
color: var(--ink-soft)}
.ev-budget-range strong{color: var(--brand-dark, var(--brand));
font-variant-numeric: tabular-nums;
font-weight: 600}
.ev-style-fieldset{border: none;
padding: 0;
margin: 0 0 20px}
.ev-style-fieldset .ev-form-label{margin-bottom: 12px}
.ev-style-cards{display: grid;
grid-template-columns: 1fr;
gap: 8px}
@media (min-width: 540px){.ev-style-cards{grid-template-columns: 1fr 1fr}
}
.ev-style-card{position: relative;
display: grid;
grid-template-columns: 22px 1fr;
grid-template-rows: auto auto;
column-gap: 12px;
row-gap: 4px;
align-items: start;
padding: 16px 16px;
min-height: 44px;
background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
transition:
background 0.15s,
border-color 0.15s}
@media (hover: hover) and (pointer: fine){.ev-style-card:hover{background: color-mix(in oklch, var(--brand) 4%, var(--paper-soft));
border-color: color-mix(in oklch, var(--brand) 25%, var(--border))}
}
.ev-style-card-input{appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
margin: 0;
border: 1.5px solid var(--border);
border-radius: 50%;
cursor: pointer;
position: relative;
background: var(--paper);
grid-row: 1 / 3;
align-self: start;
margin-top: 2px;
flex-shrink: 0;
transition:
background 0.15s,
border-color 0.15s}
.ev-style-card-input:checked{background: var(--brand);
border-color: var(--brand);
border-width: 6px}
.ev-style-card-input:focus-visible{outline: 2px solid var(--brand);
outline-offset: 3px}
.ev-style-card:has(.ev-style-card-input:checked){background: var(--accent-tint);
border-color: var(--brand)}
.ev-style-card-label{font-size: 15px;
font-weight: 600;
color: var(--ink);
line-height: 1.3}
.ev-style-card-desc{font-size: 13px;
line-height: 1.45;
color: var(--ink-muted)}
.ev-form-categories-details{margin: 0 0 20px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--paper-soft);
overflow: hidden}
.ev-form-categories-details[open]{background: var(--paper-sheet)}
.ev-form-categories-summary{list-style: none;
cursor: pointer;
padding: 16px 16px;
min-height: 44px;
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
user-select: none}
.ev-form-categories-summary::-webkit-details-marker{display: none}
.ev-form-categories-summary::before{content: "›";
font-family: var(--font-display);
font-size: 19px;
color: var(--ink-muted);
margin-right: 4px;
transition: transform 0.2s;
display: inline-block}
.ev-form-categories-details[open] .ev-form-categories-summary::before{transform: rotate(90deg)}
.ev-form-categories-summary-text{font-size: 15px;
font-weight: 600;
color: var(--ink)}
.ev-form-categories-summary-meta{font-size: 13px;
color: var(--ink-muted);
font-style: italic}
.ev-form-categories-body{padding: 0 16px 16px;
border-top: 1px solid var(--border2);
margin-top: 4px;
padding-top: 16px}
.ev-pricing-card{background: var(--accent-tint);
border: 1px solid color-mix(in oklch, var(--brand) 25%, transparent);
border-radius: 14px;
padding: 16px;
margin-bottom: 24px}
.ev-pricing-card-grid{display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px}
.ev-pricing-card-amount{display: block;
font-size: 19px;
color: var(--ink)}
.ev-pricing-card-meta{font-size: 13px;
color: var(--ink-muted)}
.ev-pricing-card-detail{font-size: 13px;
color: var(--ink-muted);
text-align: right}
.ev-pricing-card-reassure{margin: 16px 0 0;
padding-top: 16px;
border-top: 1px solid color-mix(in oklch, var(--brand) 18%, var(--border));
font-size: 13px;
line-height: 1.55;
color: var(--ink-soft);
grid-column: 1 / -1}
.ev-pricing-card-reassure strong{color: var(--ink);
font-weight: 600}
.ev-form-actions{display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center}
.ev-form-errors{padding: 16px;
background: color-mix(in oklch, var(--danger, var(--canneberge, var(--ink-muted))) 8%, var(--paper-soft));
border: 1px solid color-mix(in oklch, var(--danger, var(--canneberge, var(--border))) 35%, var(--border));
border-radius: 8px;
margin-bottom: 20px}
.ev-form-errors-list{margin: 8px 0 0 20px;
padding: 0}
.ev-status-bar{display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
padding: 16px 16px;
background: var(--paper-soft);
border-radius: 10px}
.ev-status-bar-text{font-size: 13px;
color: var(--ink-soft);
line-height: 1.5}
.ev-status-bar-secondary{display: block;
font-size: 13px;
color: var(--ink-muted);
margin-top: 2px}
.ev-status-bar-form{margin: 0}
.ev-status-bar-btn{font-size: 13px;
min-height: 44px;
display: inline-flex;
align-items: center}
.ev-empty-card{padding: 24px;
text-align: center;
border-radius: 14px}
.ev-empty-card--pending{background: var(--paper-soft);
border: 1px solid var(--border)}
.ev-empty-card--loading{background: var(--accent-tint);
border: 1px solid color-mix(in oklch, var(--brand) 22%, transparent)}
.ev-empty-card-title{font-family: var(--font-display);
font-weight: 400;
font-size: 23px;
margin: 0 0 8px}
.ev-back-actions{margin-top: 32px;
display: flex;
gap: 12px;
flex-wrap: wrap}
.admin-circ-info{background: var(--accent-tint);
border: 1px solid color-mix(in oklch, var(--brand) 22%, transparent);
border-radius: 12px;
padding: 16px 16px;
font-size: 13px;
color: var(--ink-soft);
line-height: 1.6}
.admin-circ-grid{display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 8px;
margin-top: 8px}
.admin-circ-grid--compact{grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
margin-bottom: 16px}
.admin-circ-link{display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 16px 12px;
min-height: 76px;
border-radius: 12px;
background: var(--paper-sheet, var(--paper-soft));
border: 1px solid var(--border);
color: var(--ink);
text-decoration: none;
font-family: var(--font-display);
font-weight: 400;
font-size: 16px;
letter-spacing: -0.01em;
transition:
transform 0.15s,
box-shadow 0.15s,
border-color 0.15s}
@media (hover: hover) and (pointer: fine){.admin-circ-link:hover{transform: translateY(-2px);
box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
border-color: color-mix(in oklch, var(--brand) 35%, var(--border))}
}
.admin-circ-link-name{font-weight: 400}
.admin-circ-link-domain{font-family: var(--font-body);
font-size: 12px;
color: var(--ink-muted);
font-weight: 500}
.admin-circ-fetch-form{margin: 0}
.admin-circ-fetch-btn{width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 16px 8px;
min-height: 64px;
border-radius: 12px;
background: var(--accent-tint);
border: 1px solid color-mix(in oklch, var(--brand) 30%, transparent);
color: var(--ink);
cursor: pointer;
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
transition:
transform 0.15s,
background 0.15s}
.admin-circ-fetch-btn:active{transform: scale(0.97)}
@media (hover: hover) and (pointer: fine){.admin-circ-fetch-btn:hover{background: color-mix(in oklch, var(--brand) 18%, var(--paper-soft))}
}
.admin-circ-fetch-bolt{font-size: 16px;
color: var(--brand-dark, var(--brand))}
.admin-circ-dropzone{border: 2px dashed color-mix(in oklch, var(--ink-muted) 30%, transparent);
border-radius: 14px;
background: var(--paper-soft);
padding: 32px 20px;
text-align: center;
cursor: pointer;
transition:
background 0.2s,
border-color 0.2s}
.admin-circ-dropzone.is-dragover{background: var(--accent-tint);
border-color: var(--brand)}
.admin-circ-dropzone-icon{font-size: 42px;
margin-bottom: 8px}
.admin-circ-dropzone-title{font-weight: 800;
font-size: 15px;
color: var(--ink);
margin-bottom: 4px}
.admin-circ-dropzone-sub{font-size: 13px;
color: var(--ink-muted);
margin-bottom: 12px}
.admin-circ-dropzone-meta{font-size: 12px;
color: var(--ink-muted)}
.admin-circ-fileinput{display: none}
.admin-circ-file-row{display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: color-mix(in oklch, var(--brand) 4%, var(--paper-soft));
border: 1px solid color-mix(in oklch, var(--brand) 18%, var(--border));
border-radius: 10px;
font-size: 13px}
.admin-circ-file-row.is-toobig{background: color-mix(in oklch, var(--danger) 6%, var(--paper-soft));
border-color: color-mix(in oklch, var(--danger) 35%, var(--border))}
.admin-circ-file-icon{font-size: 19px}
.admin-circ-file-meta{flex: 1;
min-width: 0}
.admin-circ-file-name{font-weight: 700;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap}
.admin-circ-file-size{font-size: 12px;
color: var(--ink-muted)}
.admin-circ-file-row.is-toobig .admin-circ-file-size{color: var(--danger)}
.admin-circ-select{width: 100%;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--paper);
font-size: 13px;
font-family: var(--font-body);
color: var(--ink)}
.admin-circ-status-row{display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid var(--border2)}
.admin-circ-status-info{display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap}
.admin-circ-status-name{font-weight: 800;
color: var(--ink);
min-width: 110px}
.admin-circ-pill-empty{background: var(--paper-soft);
color: var(--ink-muted)}
.admin-circ-history-row{display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid var(--border2);
font-size: 13px}
.admin-circ-history-info{display: flex;
align-items: center;
gap: 8px;
flex: 1}
.admin-circ-history-icon{font-size: 19px}
.admin-circ-history-name{font-weight: 700;
color: var(--ink)}
.admin-circ-history-meta{font-size: 12px;
color: var(--ink-muted)}
.admin-circ-delete-btn{background: transparent;
border: 1px solid color-mix(in oklch, var(--danger) 35%, transparent);
color: var(--danger);
padding: 12px 16px;
min-height: 44px;
border-radius: 8px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: background 0.15s}
@media (hover: hover) and (pointer: fine){.admin-circ-delete-btn:hover{background: color-mix(in oklch, var(--danger) 8%, transparent)}
}
.admin-circ-empty{text-align: center;
color: var(--ink-muted);
padding: 20px;
font-size: 13px}
.ev-hero-card{text-align: center;
padding: 32px 24px;
background: var(--accent-tint);
border: 1px solid color-mix(in oklch, var(--brand) 22%, transparent);
border-radius: 14px}
.ev-hero-card-title{font-family: var(--font-display);
font-weight: 400;
font-size: 23px;
margin: 0 0 8px}
.ev-hero-card-sub{margin: 0 0 20px;
color: var(--ink-soft)}
.recipe-layout{display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
gap: clamp(14px, 2vw, 22px);
align-items: start}
@media (max-width: 1024px){.recipe-layout{grid-template-columns: 1fr;
gap: 16px}
}
@media (min-width: 1025px){.recipe-layout > :last-child .lp{position: sticky;
top: 80px;
max-height: calc(100vh - 100px);
overflow-y: auto}
}
@media (min-width: 769px){.page-masthead + div,
.page-masthead + section,
.page-masthead + form{margin-top: clamp(18px, 2.2vw, 28px)}
}
.optim-resume{display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
padding: 16px 20px;
margin-bottom: 16px;
background: var(--accent-tint);
border: 1px solid color-mix(in oklch, var(--brand) 22%, transparent);
border-radius: 14px;
text-decoration: none;
color: inherit;
min-height: 44px;
transition:
background 0.2s ease,
border-color 0.2s ease}
@media (hover: hover) and (pointer: fine){.optim-resume:hover{background: color-mix(in oklch, var(--accent-tint) 80%, var(--brand) 6%);
border-color: color-mix(in oklch, var(--brand) 38%, transparent)}
}
.optim-resume:focus-visible{outline: 2px solid var(--brand-dark, var(--brand));
outline-offset: 2px}
.optim-resume-amount{font-family: var(--font-display);
font-size: 30px;
font-weight: 400;
color: var(--brand-dark, var(--brand));
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
flex-shrink: 0}
.optim-resume-text{flex: 1;
font-size: 15px;
line-height: 1.45;
color: var(--ink);
min-width: 200px}
.optim-resume-cta{font-size: 12px;
font-weight: 600;
color: var(--brand-dark, var(--brand));
text-transform: uppercase;
letter-spacing: 0.06em;
flex-shrink: 0}
@media (max-width: 480px){.optim-resume{padding: 16px 16px;
gap: 8px}
.optim-resume-amount{font-size: 23px}
.optim-resume-text{font-size: 13px}
}
body.mode-grand-maman{font-size: 16px;
line-height: 1.65}
body.mode-grand-maman h1,
body.mode-grand-maman .page-masthead-title{font-size: clamp(28px, 6vw, 38px)}
body.mode-grand-maman h2,
body.mode-grand-maman .dash-section-title{font-size: clamp(22px, 4.5vw, 28px);
line-height: 1.3}
body.mode-grand-maman h3{font-size: 19px;
line-height: 1.4}
body.mode-grand-maman .btn-main,
body.mode-grand-maman .btn-sec{min-height: 48px;
font-size: 16px;
padding: 16px 24px}
body.mode-grand-maman .profil-toggle-row,
body.mode-grand-maman .ev-stall-check,
body.mode-grand-maman .share-item{min-height: 48px}
body.mode-grand-maman input[type="text"],
body.mode-grand-maman input[type="email"],
body.mode-grand-maman input[type="tel"],
body.mode-grand-maman input[type="password"],
body.mode-grand-maman input[type="number"],
body.mode-grand-maman select{font-size: 16px;
min-height: 48px;
padding: 12px 16px}
body.mode-grand-maman{--ink-muted: oklch(0.4 0.014 75);
--ink-soft: oklch(0.3 0.014 75)}
body.mode-grand-maman a:not(.btn-main):not(.btn-sec){text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1.5px}
body.mode-grand-maman em{font-style: normal;
font-weight: 600;
color: var(--brand-dark, var(--brand))}
.astuce-bandeau-eyebrow{display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-dark, var(--brand));
margin-right: 12px;
padding: 2px 8px;
border: 1px solid color-mix(in oklch, var(--brand) 22%, transparent);
border-radius: 4px;
vertical-align: 1px}
.liste-actions{display: flex;
gap: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
align-items: center}
.liste-action-btn{font-size: 13px;
letter-spacing: 0.01em}
.liste-share-row{display: flex;
align-items: center;
gap: 8px;
background: color-mix(in oklch, var(--brand) 8%, transparent);
border: 1px solid color-mix(in oklch, var(--brand) 22%, transparent);
border-radius: 10px;
padding: 8px 16px;
font-size: 13px;
flex-wrap: wrap}
.liste-share-url{font-family: ui-monospace, "SF Mono", Monaco, monospace;
color: var(--ink-soft);
word-break: break-all;
flex: 1 1 200px}
.liste-help-text{font-size: 13px;
color: var(--ink-muted);
line-height: 1.55;
margin-top: 8px}
.liste-scan-btn{display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 13px}
.liste-qr-modal{position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
padding: 20px}
.liste-qr-modal[hidden]{display: none}
.liste-qr-modal-card{background: var(--paper);
border-radius: 18px;
padding: 28px 24px 24px;
text-align: center;
max-width: 320px;
width: 100%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25)}
.liste-qr-modal-title{font-family: var(--font-display, "Young Serif", serif);
font-size: 16px;
font-weight: 400;
color: var(--ink);
margin-bottom: 16px}
.liste-qr-modal-card canvas{border-radius: 8px}
.liste-qr-modal-url{font-size: 12px;
color: var(--muted);
margin-top: 12px;
word-break: break-all}
.liste-qr-modal-close{margin-top: 16px;
width: 100%}
.recette-cuisiner-btn{margin-top: 16px;
padding: 16px;
font-size: 15px;
text-align: center;
display: block}
.recette-cuisiner-note{font-size: 12px;
color: var(--muted);
text-align: center;
margin-top: 8px}
.dash-restock-link{display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 16px;
padding: 12px 16px;
background: color-mix(in oklch, var(--accent-tint) 60%, transparent);
border: 1px solid color-mix(in oklch, var(--brand) 18%, transparent);
border-radius: 12px;
text-decoration: none;
color: var(--ink);
transition:
border-color 0.18s,
background 0.18s}
@media (hover: hover) and (pointer: fine){.dash-restock-link:hover{background: var(--accent-tint);
border-color: color-mix(in oklch, var(--brand) 32%, transparent)}
}
.dash-restock-link-text{font-size: 13px;
line-height: 1.55;
color: var(--ink-soft)}
.dash-restock-link-text strong{color: var(--brand-dark, var(--brand));
font-weight: 700}
.dash-restock-link-cta{font-size: 13px;
font-weight: 600;
color: var(--brand-dark, var(--brand));
flex-shrink: 0;
letter-spacing: 0.04em}
.onb-page{max-width: 560px;
margin: 0 auto;
padding-bottom: 120px;
position: relative}
.onb-progress{position: absolute;
top: -4px;
right: 0;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-muted);
font-weight: 600}
.onb-progress-current{color: var(--brand-dark, var(--brand));
font-size: 16px;
font-weight: 700}
.onb-progress-sep{margin: 0 4px;
color: var(--muted)}
.onb-progress-total{color: var(--ink-muted)}
.onb-h1{font-family: var(--font-display, "Young Serif", serif);
font-size: 30px;
font-weight: 400;
line-height: 1.2;
margin: 0 0 12px 0;
color: var(--ink)}
.onb-h1 em{color: var(--brand-dark, var(--brand));
font-style: italic}
.onb-intro{font-size: 15px;
color: var(--ink2, var(--ink-soft));
line-height: 1.65;
margin-bottom: 32px}
.onb-section{margin-bottom: 36px;
padding-bottom: 32px;
border-bottom: 1px solid var(--border2, var(--border))}
.onb-section:last-of-type{border-bottom: none;
padding-bottom: 0}
.onb-section-title{font-family: var(--font-display, "Young Serif", serif);
font-size: 19px;
font-weight: 400;
color: var(--ink);
margin: 0 0 8px 0;
line-height: 1.25}
.onb-section-sub{font-size: 13px;
color: var(--muted);
margin: 0 0 16px 0;
line-height: 1.5}
.onb-actions{position: sticky;
bottom: 0;
background: var(--paper);
padding: 16px 0;
border-top: 1px solid var(--border);
margin-top: 24px;
z-index: 5;
display: flex;
gap: 8px;
align-items: center}
.onb-skip-link{font-size: 13px;
color: var(--muted);
text-decoration: underline;
padding: 8px}
.onb-submit-btn{flex: 1}
.sms-toggle{background: var(--bg);
border: 1.5px solid var(--border);
border-radius: 10px;
padding: 16px;
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
transition: border-color 0.2s}
@media (hover: hover) and (pointer: fine){.sms-toggle:hover{border-color: var(--brand-dark, var(--orange))}
}
.sms-track{width: 40px;
height: 24px;
border-radius: 12px;
background: var(--muted2);
transition: background 0.2s;
position: relative;
flex-shrink: 0}
.sms-thumb{width: 18px;
height: 18px;
border-radius: 50%;
background: var(--cream-fixed);
position: absolute;
top: 3px;
left: 3px;
transform: translateX(calc(var(--on, 0) * 16px));
transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform}
.app-footer-trust{margin-top: 32px;
padding: 16px 0 24px;
font-size: 12px;
color: var(--ink-muted);
text-align: center;
letter-spacing: 0.04em;
line-height: 1.7}
.app-footer-trust-sep{margin: 0 8px;
opacity: 0.5}
.dash-hero-grid--compact{display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 24px;
margin-top: 16px}
@media (max-width: 640px){.dash-hero-grid--compact{grid-template-columns: auto 1fr;
text-align: left;
gap: 16px}
.dash-hero-grid--compact .dash-hero-ring{margin: 0 auto}
}
.dash-hero-budget{display: flex;
flex-direction: column;
gap: 8px}
.dash-hero-budget-line{font-size: 15px;
line-height: 1.5;
color: var(--ink);
font-weight: 500}
.dash-hero-budget-line strong{font-weight: 700;
color: var(--brand-dark, var(--brand))}
.gen-loading-mark{width: 64px;
height: 64px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display, "Young Serif", serif);
font-size: 38px;
color: var(--brand-dark, var(--brand));
background: color-mix(in oklch, var(--brand) 10%, transparent);
border: 1px solid color-mix(in oklch, var(--brand) 22%, transparent);
border-radius: 50%;
letter-spacing: -0.02em}
@media (max-width: 900px){.composer-bar{transition:
transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.18s ease;
will-change: transform}
body.composer-hidden .composer-bar{transform: translateY(120%);
opacity: 0;
pointer-events: none}
}
[data-theme="dark"] body.mode-grand-maman,
[data-theme="dark"] body.mode-gm{--ink-muted: oklch(0.78 0.014 75);
--ink-soft: oklch(0.85 0.014 75);
--ink: oklch(0.95 0.008 75)}
[data-theme="dark"] body.mode-grand-maman a:not(.btn-main):not(.btn-sec),
[data-theme="dark"] body.mode-gm a:not(.btn-main):not(.btn-sec){text-decoration-color: color-mix(in oklch, var(--brand) 70%, var(--ink-muted))}
[data-theme="dark"] body.mode-grand-maman em,
[data-theme="dark"] body.mode-gm em{color: oklch(0.78 0.16 143)}
.cuisine-timer-alarm{animation: cuisine-alarm-pulse 0.9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
color: var(--danger, #c0392b) !important}
@keyframes cuisine-alarm-pulse{0%,
100%{transform: scale(1);
opacity: 1}
50%{transform: scale(1.06);
opacity: 0.55}
}
body.cuisine-alarm-firing{box-shadow: inset 0 0 0 4px var(--danger, #c0392b);
transition: box-shadow 0.15s ease}
@media (prefers-reduced-motion: reduce){.cuisine-timer-alarm{animation: none}
}
.recipe-tags-row{display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px}
.recipe-tag-pill{font-size: 12px}
.recipe-description{font-size: 13px;
color: var(--muted);
margin-bottom: 16px;
line-height: 1.7}
.recipe-section-head{margin-bottom: 8px}
.recipe-ing-list{margin-bottom: 16px}
.recipe-ing-qty{color: var(--muted);
font-size: 12px}
.recipe-ing-meta{display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap}
.recipe-price-trend{color: var(--green, var(--brand))}
.recipe-instructions-head{margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap}
.recipe-tts-btn{padding: 8px 16px;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 8px}
.recipe-tts-progress{margin-bottom: 8px;
padding: 8px 16px;
background: var(--green-pale, color-mix(in oklch, var(--brand) 10%, transparent));
border-radius: 10px;
font-size: 13px;
color: var(--green, var(--brand));
border: 1px solid color-mix(in oklch, var(--brand) 20%, transparent)}
.recipe-tts-progress[hidden]{display: none}
.recipe-tts-progress-hint{margin-left: 8px;
opacity: 0.7}
.recipe-tts-container{background: var(--bg, var(--paper-soft));
border-radius: 14px;
padding: 16px;
font-size: 13px;
color: var(--ink2, var(--ink-soft));
line-height: 1.8;
white-space: pre-line}
.recipe-enrichir-form{margin-top: 16px}
.recipe-enrichir-btn{padding: 16px;
font-size: 15px}
.recipe-enrichir-note{font-size: 12px;
color: var(--muted);
text-align: center;
margin-top: 8px}
.recipe-bottom-actions{margin-top: 16px;
display: flex;
flex-direction: column;
gap: 8px}
.recipe-bottom-link{text-align: center}
.gen-loading-mark{}
.ev-share-status--ok{color: var(--brand-dark, var(--brand));
font-weight: 500}
.ev-share-status--ok strong{font-weight: 700}
.cuisine-end-stage1,
.cuisine-end-stage2,
.cuisine-end-stage3{opacity: 0;
transform: translateY(8px);
animation: cuisine-end-fade 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards}
.cuisine-end-stage1{animation-delay: 0s}
.cuisine-end-stage2{animation-delay: 1.4s}
.cuisine-end-stage3{animation-delay: 3s}
@keyframes cuisine-end-fade{from{opacity: 0;
transform: translateY(8px)}
to{opacity: 1;
transform: translateY(0)}
}
@media (prefers-reduced-motion: reduce){.cuisine-end-stage1,
.cuisine-end-stage2,
.cuisine-end-stage3{opacity: 1;
transform: none;
animation: none}
}
.cuisine-end-feedback-prompt{font-size: 15px;
color: var(--ink-muted);
text-align: center;
margin: 16px 0 12px;
letter-spacing: 0.005em}
.rap-spark-card{padding: 16px 20px 16px;
border-color: var(--brand);
background: var(--paper-sheet)}
.rap-spark-eyebrow{font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--brand-dark);
font-weight: 700;
margin-bottom: 12px}
.rap-spark-svg{display: block;
width: 100%;
height: 96px;
max-width: 480px;
margin: 0 auto;
overflow: visible}
.rap-spark-labels{display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 12px;
padding: 0 4px;
gap: 12px}
.rap-spark-labels span{font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-muted);
line-height: 1.5}
.rap-spark-labels strong{display: block;
font-family: var(--font-display, "Young Serif", Georgia, serif);
font-size: 23px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--brand-dark);
text-transform: none;
margin-top: 2px;
font-variant-numeric: tabular-nums}
.rap-spark-end{text-align: right}
.rap-spark-end strong{color: var(--brand-dark)}
@media (max-width: 640px){.rap-spark-svg{height: 80px}
.rap-spark-labels strong{font-size: 19px}
}
.dash-victory{display: flex;
align-items: center;
gap: 20px;
padding: 24px 24px;
background: var(--accent-tint);
border: 1px solid var(--brand);
border-radius: 18px;
margin: 0 0 20px 0;
position: relative;
overflow: hidden;
animation: dashVictoryEnter 480ms cubic-bezier(0.22, 1, 0.36, 1)}
.dash-victory::before{content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 80% at 0% 0%, color-mix(in oklch, var(--brand) 12%, transparent), transparent 60%);
pointer-events: none}
.dash-victory-mark{font-family: var(--font-display, "Young Serif", Georgia, serif);
font-size: 56px;
line-height: 1;
color: var(--brand-dark);
flex-shrink: 0;
min-width: 64px;
text-align: center;
letter-spacing: -0.04em;
font-variant-numeric: lining-nums}
.dash-victory-body{flex: 1;
min-width: 0}
.dash-victory-title{font-family: var(--font-display, "Young Serif", Georgia, serif);
font-size: 23px;
line-height: 1.2;
color: var(--ink);
margin-bottom: 4px}
.dash-victory-message{font-size: 15px;
line-height: 1.5;
color: var(--ink-soft)}
@keyframes dashVictoryEnter{from{opacity: 0;
transform: translateY(-8px)}
to{opacity: 1;
transform: translateY(0)}
}
@media (prefers-reduced-motion: reduce){.dash-victory{animation: none}
}
@media (max-width: 640px){.dash-victory{gap: 16px;
padding: 16px 16px}
.dash-victory-mark{font-size: 42px;
min-width: 48px}
.dash-victory-title{font-size: 19px}
.dash-victory-message{font-size: 15px}
}
.dash-week-kpis{display: flex;
flex-direction: column;
gap: 16px;
margin: 0 0 28px;
padding: 16px 20px;
background: var(--accent-tint, oklch(0.59 0.16 143 / 0.06));
border: 1px solid oklch(0.59 0.16 143 / 0.15);
border-radius: 14px}
.dash-week-kpi{display: flex;
flex-direction: column;
gap: 4px}
.dash-week-kpi-main{display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap}
.dash-week-kpi-value{font-family: var(--font-display, "Young Serif", Georgia, serif);
font-size: 23px;
color: var(--brand-dark);
font-variant-numeric: tabular-nums;
line-height: 1;
letter-spacing: -0.01em;
flex-shrink: 0}
.dash-week-kpi-total{font-size: 19px;
color: var(--ink-muted);
margin-left: 2px}
.dash-week-kpi-label{font-size: 15px;
color: var(--ink-soft);
line-height: 1.4}
.dash-week-kpi-caption{font-size: 13px;
color: var(--ink-muted);
line-height: 1.45;
font-style: italic}
.dash-week-kpi-caption em{font-style: normal;
color: var(--brand-dark);
font-weight: 600;
letter-spacing: 0.005em}
@media (max-width: 640px){.dash-week-kpis{padding: 16px 16px;
gap: 16px}
.dash-week-kpi-value{font-size: 23px}
.dash-week-kpi-label{font-size: 15px}
.dash-week-kpi-caption{font-size: 13px}
}
.dash-hero-fantome-inline{margin: 8px 0 0;
font-size: 15px;
line-height: 1.5;
color: var(--ink-soft)}
.dash-hero-fantome-inline strong{font-family: var(--font-display, "Young Serif", Georgia, serif);
font-size: 19px;
color: var(--brand-dark);
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
margin-right: 2px}
.dash-hero-fantome-inline-caption{display: block;
font-size: 13px;
color: var(--ink-muted);
font-style: italic;
margin-top: 2px}
.dash-hero-fantome-inline--empty{margin-top: 12px}
.dash-hero-fantome-inline--empty .dash-hero-fantome-inline-caption{font-size: 15px;
color: var(--ink-soft);
margin-top: 0;
line-height: 1.5}
.dash-hero-replan-link{display: inline-flex;
align-items: center;
margin-top: 8px;
font-family: var(--font-display, "Young Serif", Georgia, serif);
font-style: italic;
font-size: 15px;
color: var(--brand-dark);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 0.18s ease;
min-height: 44px;
min-width: 44px;
padding: 8px 4px}
.dash-hero-replan-link:hover,
.dash-hero-replan-link:focus-visible{color: var(--brand);
text-decoration-thickness: 1.5px}
.dash-help-line{max-width: var(--max-w, 1200px);
margin: 48px auto 24px;
padding: 20px 24px;
text-align: center;
font-size: 15px;
color: var(--ink-soft);
line-height: 1.6;
border-top: 1px solid var(--border, oklch(0.85 0.012 90))}
.dash-help-line a{color: var(--brand-dark);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
padding: 12px 8px;
display: inline-block;
min-height: 44px;
min-width: 44px;
line-height: 1.4;
font-weight: 500}
.dash-help-line a:hover,
.dash-help-line a:focus-visible{color: var(--brand);
text-decoration-thickness: 1.5px}
@media (max-width: 640px){.dash-help-line{margin: 36px auto 16px;
padding: 16px 16px;
font-size: 15px}
}
.dash-section .dash-section-body table tbody tr{transition: background-color 0.15s ease-out}
.dash-section .dash-section-body table tbody tr:nth-child(even){background: color-mix(in oklch, var(--paper-soft) 50%, transparent)}
@media (hover: hover) and (pointer: fine){.dash-section .dash-section-body table tbody tr:hover{background: var(--accent-tint)}
}
.dash-section .dash-section-body table th{background: var(--paper-soft);
color: var(--ink-muted);
font-weight: 700;
padding: 12px 8px !important}
.dash-section .dash-section-body table td{padding: 12px 8px !important;
font-variant-numeric: tabular-nums}
.dash-stats{gap: 0}
.dash-stat{position: relative}
.dash-stat::before{content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--brand);
opacity: 0;
transition: opacity 0.2s}
@media (hover: hover) and (pointer: fine){.dash-stat:hover::before{opacity: 0.55}
}
.dash-stat-value{color: var(--brand-dark)}
.profil-grid{display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px}
@media (max-width: 900px){.profil-grid{grid-template-columns: 1fr}
}
.profil-freq-row{display: flex;
align-items: center;
gap: 8px}
.profil-freq-label{text-transform: none;
letter-spacing: 0;
font-size: 13px;
margin: 0}
.profil-freq-select{font-size: 15px;
padding: 8px 8px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--paper-sheet)}
.profil-cp-input{text-transform: uppercase}
.profil-ville-confirm{font-size: 13px;
color: var(--brand-dark);
margin-top: 4px;
font-weight: 600;
letter-spacing: -0.005em}
.profil-ville-hint{font-size: 12px;
color: var(--ink-muted);
margin-top: 4px}
.profil-fieldset{border: none;
padding: 0;
margin: 0}
.profil-legend{padding: 0;
margin-bottom: 8px}
.profil-radio-row{display: flex;
gap: 8px;
flex-wrap: wrap}
.profil-ptag{flex: 1;
min-width: 140px;
text-align: center;
padding: 8px 12px}
.profil-radio-input{position: absolute;
opacity: 0;
pointer-events: none}
.profil-radio-ico{font-size: 19px;
margin-bottom: 4px;
line-height: 1}
.profil-radio-label{font-size: 13px;
font-weight: 700}
.profil-radio-desc{font-size: 12px;
color: var(--ink-muted);
margin-top: 2px}
.profil-exclus-input{font-size: 15px}
.profil-exclus-hint{font-size: 12px;
color: var(--ink-muted);
margin-top: 4px}
.profil-membres-card{margin-bottom: 16px}
.membre-avatar{font-size: 19px;
line-height: 1}
.membre-tel{font-size: 13px;
color: var(--ink-muted)}
.membre-supprimer{display: inline;
margin-left: auto}
.membre-supprimer-btn{background: none;
border: none;
color: var(--danger);
cursor: pointer;
font-size: 13px;
padding: 8px 8px;
text-decoration: underline;
text-underline-offset: 2px}
@media (hover: hover) and (pointer: fine){.membre-supprimer-btn:hover{color: var(--ink)}
}
.membre-prefs-input{font-size: 13px;
flex: 1}
.membre-prefs-btn{font-size: 13px;
padding: 8px 16px}
.profil-ajouter-row{display: flex;
gap: 8px;
margin-top: 12px;
flex-wrap: wrap}
.profil-ajouter-input{flex: 1;
min-width: 140px}
.profil-pwd-card{margin-bottom: 16px}
.profil-pwd-hint{font-size: 12px;
color: var(--ink-muted)}
.rap-eyebrow-sm{font-size: 12px;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 1px}
.rap-eyebrow-md{font-size: 13px;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 1px}
.rap-stat-num{font-family: var(--font-display);
font-size: 23px}
.rap-stat-num-lg{font-family: var(--font-display);
font-size: 42px;
color: var(--brand-dark)}
.rap-stat-num-xl{font-family: var(--font-display);
font-size: 48px;
color: var(--brand-dark);
margin: 8px 0}
.rap-row-sep{display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid var(--border)}
.rap-row-sep--md{padding: 8px 0}
.rap-text-soft{font-size: 13px;
color: var(--ink-soft)}
.rap-text-muted{font-size: 13px;
color: var(--ink-muted)}
.rap-card--accent{background: var(--accent-tint);
border-color: var(--brand)}
.rap-mt-md{margin-top: 16px}
.det-eyebrow-md{font-size: 13px;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 1px}
.det-row-sep{padding: 8px 0;
border-bottom: 1px solid var(--border)}
.det-row-sep--lg{padding: 12px 0;
border-bottom: 1px solid var(--border)}
.det-row-sep--inline{display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 13px}
.det-text-soft{font-size: 13px;
color: var(--ink-soft)}
.det-text-muted{font-size: 13px;
color: var(--ink-muted)}
.det-text-soft-mt{font-size: 13px;
color: var(--ink-soft);
margin-top: 8px}
.det-num-danger{font-family: var(--font-display);
font-size: 38px;
color: var(--danger)}
.det-bold-danger{font-weight: 700;
color: var(--danger)}
.det-card--danger{margin-bottom: 16px;
border-color: var(--danger)}
.det-mt-md{margin-top: 16px}
.det-bold{font-weight: 600}
.det-muted{color: var(--ink-muted)}
@keyframes ambient-hint-pulse{0%, 100%{box-shadow: 0 0 0 0 oklch(0.59 0.16 143 / 0.35)}
50%{box-shadow: 0 0 0 14px oklch(0.59 0.16 143 / 0)}
}
.ambient-hint{animation: ambient-hint-pulse 2s ease-in-out 3 0.8s;
will-change: box-shadow;
border-radius: inherit}
@media (prefers-reduced-motion: reduce){.ambient-hint{animation: none}
}
.dislikes-group{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px;
margin-bottom: 24px}
.dislikes-group-head{display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border)}
.dislikes-group-title{font-family: var(--font-display, "Young Serif", Georgia, serif);
font-weight: 400;
font-size: 23px;
color: var(--ink);
margin: 0;
letter-spacing: -0.01em}
.dislikes-group-count{font-size: 13px;
color: var(--ink-muted);
font-variant-numeric: tabular-nums}
.dislikes-empty{font-size: 15px;
color: var(--ink-muted);
font-style: italic;
margin: 0 0 16px}
.dislikes-list{list-style: none;
padding: 0;
margin: 0 0 16px;
display: flex;
flex-direction: column;
gap: 8px}
.dislikes-item{position: relative;
padding: 12px 16px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 10px}
.dislikes-item-main{display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px}
.dislikes-item-aliment{font-size: 15px;
font-weight: 600;
color: var(--ink)}
.dislikes-item-intensite{font-size: 13px;
font-weight: 500;
padding: 2px 8px;
border-radius: 999px;
background: var(--accent-tint, oklch(0.59 0.16 143 / 0.1));
color: var(--brand-dark, var(--brand))}
.dislikes-item--parfois_ok .dislikes-item-intensite{background: var(--badge-warn-bg);
color: var(--badge-warn-ink)}
.dislikes-item--trace_ok .dislikes-item-intensite{background: var(--badge-neutral-bg);
color: var(--badge-neutral-ink)}
.dislikes-item-note{font-size: 13px;
color: var(--ink-soft);
margin-top: 4px;
font-style: italic}
.dislikes-item-form{margin-top: 8px;
text-align: right}
.dislikes-item-remove{background: transparent;
border: 0;
padding: 8px 12px;
min-height: 44px;
font-size: 13px;
color: var(--ink-muted);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
border-radius: 6px}
.dislikes-item-remove:hover,
.dislikes-item-remove:focus-visible{color: var(--danger);
background: var(--danger-tint)}
.dislikes-item-remove:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px}
.dislikes-add-form{padding-top: 16px;
border-top: 1px dashed var(--border)}
.dislikes-add-row{display: grid;
grid-template-columns: 2fr 1fr;
gap: 16px;
margin-bottom: 16px}
@media (max-width: 600px){.dislikes-add-row{grid-template-columns: 1fr}
}
.dislikes-add-field{display: flex;
flex-direction: column}
.dislikes-add-field--full{margin-bottom: 16px}
.dislikes-add-label{font-size: 13px;
font-weight: 600;
color: var(--ink);
margin-bottom: 8px}
.dislikes-add-hint{display: block;
font-weight: 400;
font-size: 13px;
color: var(--ink-muted);
font-style: italic;
margin-top: 2px}
.dislikes-add-input,
.dislikes-add-select{padding: 12px 16px;
min-height: 44px;
font-size: 15px;
font-family: inherit;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--ink)}
.dislikes-add-input:focus,
.dislikes-add-select:focus{outline: 2px solid var(--brand);
outline-offset: 2px}
.dislikes-footer{margin-top: 32px;
padding: 16px 20px;
background: var(--accent-tint, oklch(0.59 0.16 143 / 0.06));
border-radius: 12px;
font-size: 15px;
color: var(--ink-soft);
line-height: 1.6}
.dislikes-footer a{color: var(--brand-dark, var(--brand));
text-decoration: underline;
text-underline-offset: 3px}
.lunch-onboarding{display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin: 24px 0 32px}
@media (max-width: 768px){.lunch-onboarding{grid-template-columns: 1fr}
}
.lunch-onb-feature{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px}
.lunch-onb-icon{display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: 12px;
border-radius: 10px;
background: var(--accent-tint, oklch(0.59 0.16 143 / 0.10));
color: var(--brand-dark, var(--brand))}
.lunch-onb-icon svg{display: block}
.lunch-onb-feature h3{font-family: var(--font-display, "Young Serif", Georgia, serif);
font-weight: 400;
font-size: 19px;
color: var(--ink);
margin: 0 0 8px}
.lunch-onb-feature p{font-size: 15px;
color: var(--ink-soft);
line-height: 1.55;
margin: 0}
.lunch-onb-cta{text-align: center;
margin: 32px 0}
.lunch-onb-note{font-size: 13px;
color: var(--ink-muted);
margin-top: 16px;
font-style: italic}
.lunch-week-nav{font-size: 13px;
color: var(--brand-dark, var(--brand));
text-decoration: underline;
text-underline-offset: 3px}
.lunch-week-current{font-size: 15px;
color: var(--ink-soft);
font-weight: 600;
text-align: center}
.lunch-empty{background: var(--accent-tint, oklch(0.59 0.16 143 / 0.06));
border: 1px solid color-mix(in oklch, var(--brand) 20%, var(--border));
border-radius: 14px;
padding: 32px;
text-align: center;
margin: 24px 0}
.lunch-empty-text{font-size: 16px;
color: var(--ink-soft);
line-height: 1.6;
margin: 0 0 20px;
max-width: 60ch;
margin-left: auto;
margin-right: auto}
.lunch-actions{text-align: right;
margin-bottom: 16px}
.lunch-enfant-section{margin-bottom: 36px}
.lunch-enfant-head{display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border)}
.lunch-enfant-title{font-family: var(--font-display, "Young Serif", Georgia, serif);
font-weight: 400;
font-size: 23px;
color: var(--ink);
margin: 0;
letter-spacing: -0.01em}
.lunch-enfant-count{font-size: 13px;
color: var(--ink-muted);
font-variant-numeric: tabular-nums}
.lunch-calendar{display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px}
@media (max-width: 1024px){.lunch-calendar{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 540px){.lunch-calendar{grid-template-columns: 1fr}
}
.lunch-day{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
position: relative}
.lunch-day.is-fait{background: var(--accent-tint, oklch(0.59 0.16 143 / 0.05));
border-color: color-mix(in oklch, var(--brand) 25%, var(--border))}
.lunch-day-head{display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: 8px;
border-bottom: 1px solid var(--border)}
.lunch-day-name{font-family: var(--font-display, "Young Serif", Georgia, serif);
font-weight: 400;
font-size: 16px;
color: var(--ink)}
.lunch-day-date{font-size: 13px;
color: var(--ink-muted);
font-variant-numeric: tabular-nums}
.lunch-day-content{display: flex;
flex-direction: column;
gap: 8px}
.lunch-item{font-size: 15px;
line-height: 1.5}
.lunch-item-label{display: inline-block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-muted);
margin-right: 8px}
.lunch-item-text{color: var(--ink)}
.lunch-item--principal .lunch-item-text{font-weight: 600}
.lunch-day-meta{display: flex;
flex-wrap: wrap;
gap: 8px 12px;
padding-top: 8px;
border-top: 1px dashed var(--border);
font-size: 12px;
color: var(--ink-muted)}
.lunch-day-reuse{color: var(--brand-dark, var(--brand))}
.lunch-day-notes{font-size: 13px;
font-style: italic;
color: var(--ink-soft);
padding-top: 8px}
.lunch-day-actions{margin-top: auto;
padding-top: 8px}
.lunch-day-detail{display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
margin-top: 6px;
font-size: 13px;
font-weight: 600;
color: var(--ink-muted);
text-decoration: none}
.lunch-day-toggle{width: 100%;
padding: 8px;
min-height: 44px;
font-size: 13px;
font-weight: 600;
background: var(--paper);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--ink-soft);
cursor: pointer}
.lunch-day-toggle.is-on{background: var(--brand);
color: var(--paper);
border-color: var(--brand)}
.lunch-day-toggle:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px}
.lunch-day-empty{font-size: 13px;
color: var(--ink-muted);
font-style: italic;
padding: 20px 0;
text-align: center}
.lunch-back-link{font-size: 13px;
color: var(--brand-dark, var(--brand));
text-decoration: underline;
text-underline-offset: 3px}
.lunch-detail-card{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px;
margin-bottom: 16px}
.lunch-detail-head{display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 16px}
.lunch-detail-head h2{font-family: var(--font-display, "Young Serif", Georgia, serif);
font-weight: 400;
font-size: 23px;
margin: 0}
.lunch-detail-reuse{display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: var(--brand-dark, var(--brand))}
.lunch-detail-content{display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px}
.lunch-detail-item{display: flex;
gap: 12px;
padding: 8px 12px;
background: var(--paper);
border-radius: 8px}
.lunch-detail-label{flex: 0 0 100px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-muted)}
.lunch-detail-text{font-size: 15px;
color: var(--ink)}
.lunch-detail-meta{display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 12px 0;
font-size: 15px;
color: var(--ink-soft);
border-top: 1px dashed var(--border);
border-bottom: 1px dashed var(--border)}
.lunch-detail-notes{font-size: 15px;
font-style: italic;
color: var(--ink-soft);
margin: 16px 0}
.recette-adapte{display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0 8px;
padding: 0;
font-size: 15px;
line-height: 1.45;
letter-spacing: -0.005em}
.recette-adapte-pen{flex-shrink: 0;
display: inline-flex;
align-items: center;
width: 18px;
height: 18px;
margin-top: 2px;
color: var(--brand-dark, var(--brand));
transform: rotate(-6deg);
transform-origin: 50% 60%}
.recette-adapte-text{font-family: var(--font-display, "Young Serif", Georgia, serif);
font-style: italic;
font-weight: 400;
color: var(--brand-dark, var(--brand))}
.recette-adapte--precise .recette-adapte-pen,
.recette-adapte--precise .recette-adapte-text,
.recette-adapte--evite .recette-adapte-pen,
.recette-adapte--evite .recette-adapte-text{color: var(--brand-dark, var(--brand))}
.recette-adapte--alerte .recette-adapte-pen,
.recette-adapte--alerte .recette-adapte-text{color: var(--danger)}
.recette-adapte-form{margin: 0;
display: inline-flex;
flex-basis: 100%}
.recette-adapte-cta{appearance: none;
background: transparent;
border: 1px solid var(--danger);
color: var(--danger);
font-family: var(--font-sans, "Commissioner", system-ui, sans-serif);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.005em;
padding: 8px 16px;
min-height: 44px;
border-radius: 8px;
cursor: pointer;
transition: background-color 120ms ease-out, color 120ms ease-out}
.recette-adapte-cta:hover,
.recette-adapte-cta:focus-visible{background: var(--danger);
color: var(--paper)}
.recette-adapte-cta:focus-visible{outline: 2px solid var(--danger);
outline-offset: 2px}
body.mode-grand-maman .recette-adapte{font-size: 19px;
line-height: 1.5}
body.mode-grand-maman .recette-adapte-pen{width: 24px;
height: 24px}
body.mode-grand-maman .recette-adapte-pen svg{width: 20px;
height: 22px}
body.mode-grand-maman .recette-adapte-cta{font-size: 16px;
padding: 12px 16px;
min-height: 48px}
.menu-recipe{container-type: inline-size;
container-name: recipe}
@container recipe (max-width: 520px){.menu-recipe-title{font-size: clamp(22px, 6cqi, 32px);
line-height: 1.15}
.menu-recipe-meta{grid-template-columns: 1fr 1fr}
.menu-recipe-meta > div:last-child{grid-column: 1 / -1}
}
.dash-quick{container-type: inline-size;
container-name: quick}
@container quick (max-width: 640px){.dash-quick{grid-template-columns: repeat(2, 1fr)}
}
@container quick (max-width: 360px){.dash-quick{grid-template-columns: 1fr}
}
.recherche-form{margin: 0 0 8px}
.recherche-field{display: flex;
align-items: center;
gap: 8px;
padding: 8px 8px 8px 16px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 14px;
transition: border-color 0.15s ease, box-shadow 0.15s ease}
.recherche-field:focus-within{border-color: var(--brand);
box-shadow: 0 0 0 3px var(--accent-tint)}
.recherche-field-ico{flex-shrink: 0;
display: inline-flex;
color: var(--ink-muted)}
.recherche-field:focus-within .recherche-field-ico{color: var(--brand-dark, var(--brand))}
.recherche-input{flex: 1;
min-width: 0;
border: none;
background: transparent;
font-family: var(--font-body);
font-size: 16px;
color: var(--ink);
padding: 8px 0}
.recherche-input:focus-visible{outline: none}
.recherche-input::placeholder{color: var(--ink-fade)}
.recherche-submit{flex-shrink: 0;
min-height: 44px;
white-space: nowrap}
@media (max-width: 430px){.recherche-field{padding-left: 12px;
gap: 8px}
.recherche-submit{padding-left: 16px;
padding-right: 16px;
font-size: 15px}
}
.recherche-count{font-size: 15px;
color: var(--ink-soft);
margin: 16px 0 4px}
.recherche-section{margin-top: 8px}
.recherche-hint{margin-top: 20px;
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
max-width: 60ch}
.recherche-hint-list{margin: 8px 0 0;
padding-left: 20px;
display: grid;
gap: 8px}
.recherche-empty{margin-top: 28px;
max-width: 60ch}
.recherche-empty-title{font-family: var(--font-display, Georgia, serif);
font-size: 23px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em;
line-height: 1.25}
.recherche-empty-lede{margin-top: 8px;
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft)}
body.mode-grand-maman .recherche-input{font-size: 16px}
body.mode-grand-maman .recherche-hint,
body.mode-grand-maman .recherche-empty-lede{font-size: 16px}
.nav-badge{display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
margin-left: 8px;
border-radius: 9px;
background: var(--brand);
color: var(--paper);
font-size: 12px;
font-weight: 700;
line-height: 1;
vertical-align: middle}
.notif-actions{display: flex;
justify-content: flex-end;
margin-bottom: 8px}
.notif-clear-btn{min-height: 44px}
.notif-list{list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px}
.notif-item{border-radius: 12px;
transition: background 0.15s ease}
.notif-item.is-unread{background: var(--accent-tint)}
.notif-link{display: flex;
align-items: center;
gap: 12px;
padding: 16px 16px;
min-height: 44px;
text-decoration: none;
color: inherit}
.notif-item.is-unread .notif-title::before{content: "";
display: inline-block;
width: 7px;
height: 7px;
margin-right: 8px;
border-radius: 50%;
background: var(--brand);
vertical-align: middle}
.notif-body{flex: 1; min-width: 0}
.notif-title{font-family: var(--font-display, Georgia, serif);
font-size: 16px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.005em;
line-height: 1.3}
.notif-text{margin: 2px 0 0;
font-size: 15px;
line-height: 1.45;
color: var(--ink-soft)}
.notif-time{display: block;
margin-top: 4px;
font-size: 13px;
color: var(--ink-fade)}
.notif-chevron{flex-shrink: 0;
font-size: 19px;
color: var(--ink-fade)}
.notif-empty{margin-top: 28px; max-width: 60ch}
.notif-empty-title{font-family: var(--font-display, Georgia, serif);
font-size: 23px;
font-weight: 400;
color: var(--ink);
letter-spacing: -0.01em}
.notif-empty-lede{margin-top: 8px;
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft)}
body.mode-grand-maman .notif-title{font-size: 16px}
body.mode-grand-maman .notif-text,
body.mode-grand-maman .notif-empty-lede{font-size: 16px}
.tb-notif-btn{position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--ink-soft)}
.tb-notif-btn.is-active{color: var(--brand-dark, var(--brand));
border-color: color-mix(in oklch, var(--brand) 40%, transparent)}
.tb-notif-dot{position: absolute;
top: 7px;
right: 7px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--brand);
border: 2px solid var(--paper);
box-sizing: content-box}
.pantry-add > .pantry-add-summary{display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
list-style: none;
min-height: 44px}
.pantry-add > .pantry-add-summary::-webkit-details-marker{display: none}
.pantry-add-chevron{flex-shrink: 0;
font-size: 23px;
line-height: 1;
color: var(--ink-fade);
transition: transform 0.18s ease-out}
.pantry-add[open] .pantry-add-chevron{transform: rotate(90deg)}
@media (hover: hover) and (pointer: fine){.pantry-add > .pantry-add-summary:hover .pantry-add-chevron{color: var(--brand-dark, var(--brand))}
}
.pantry-add > .pantry-add-summary:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: 10px}