.mobile-tabbar{display: none}
.compte-pwa-hub{display: none}
@media (max-width: 768px){html,
body{overscroll-behavior: none;
-webkit-tap-highlight-color: transparent}
a,
button,
[role="button"],
input[type="button"],
input[type="submit"],
.mtab,
.cph-row,
.cph-shortcut{touch-action: manipulation}
.mobile-tabbar{display: grid;
grid-template-columns: repeat(5, 1fr);
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
background: var(--paper-sheet);
border-top: 1px solid var(--border);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) 4px}
[data-theme="dark"] .mobile-tabbar{background: oklch(0.22 0.015 90);
border-top-color: var(--border)}
.mtab{display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 8px 4px;
min-height: 48px;
text-decoration: none;
color: var(--muted);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.2px;
border-radius: 10px;
transition:
color 0.15s ease,
background 0.15s ease,
transform 0.1s ease;
-webkit-tap-highlight-color: transparent}
.mtab:active{transform: scale(0.97);
background: color-mix(in oklch, var(--brand) 8%, transparent)}
.mtab.on{color: var(--brand)}
.mtab.on .mtab-icon{stroke-width: 2.2}
.mtab-icon{width: 22px;
height: 22px}
.mtab-label{line-height: 1}
.content{flex: 0 1 auto !important;
padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important}
.app-footer{margin-top: 24px !important;
padding-bottom: 16px !important}
}
html{background: var(--paper);
-webkit-text-size-adjust: 100%}
[data-theme="dark"] html,
html[data-theme="dark"]{background: var(--paper)}
body{background: var(--paper)}
.app-layout{min-height: 100vh;
min-height: 100dvh}
[data-theme="dark"] body{background: var(--paper)}
@media (max-width: 768px){html,
body{overflow-x: hidden;
max-width: 100vw}
}
body.scroll-locked{overflow: hidden !important}
body.scroll-locked .content{overflow: hidden !important}
.topbar{padding-left: max(28px, env(safe-area-inset-left));
padding-right: max(28px, env(safe-area-inset-right));
padding-top: max(12px, env(safe-area-inset-top))}
.sidebar{padding-left: env(safe-area-inset-left);
padding-bottom: env(safe-area-inset-bottom)}
.content{padding-bottom: max(24px, env(safe-area-inset-bottom))}
@media (max-width: 768px){.sidebar{background: var(--cream-fixed, var(--paper-sheet)) !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: 4px 0 32px rgba(0, 0, 0, 0.18)}
[data-theme="dark"] .sidebar{background: var(--cream-fixed, var(--paper-sheet)) !important}
.sidebar-overlay{background: rgba(0, 0, 0, 0.45) !important;
top: calc(0px - env(safe-area-inset-top)) !important;
padding-top: env(safe-area-inset-top)}
}
@media (max-width: 768px){.site-nav{background: #faf6ec !important}
.nav-links{background: #faf6ec !important;
z-index: 105 !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12)}
.nav-links.open{opacity: 1 !important;
visibility: visible !important;
background: #faf6ec !important}
.site-nav .nav-links.open a:not(.nav-btn-main):not(.nav-btn-sec){color: #2e2e26 !important}
.site-nav .nav-links.open .nav-btn-main{background: #4a9e46 !important;
background-color: #4a9e46 !important;
color: #faf6ec !important}
.site-nav .nav-links.open .nav-btn-sec{color: #2e6b2a !important}
.nav-burger{z-index: 110 !important}
.nav-logo{z-index: 110 !important}
}
@supports (color: oklch(0 0 0)){@media (max-width: 768px){.site-nav{background: var(--paper-sheet) !important}
.nav-links{background: var(--paper-sheet) !important}
.nav-links.open{background: var(--paper-sheet) !important}
.site-nav .nav-links.open a:not(.nav-btn-main):not(.nav-btn-sec){color: var(--ink) !important}
.site-nav .nav-links.open .nav-btn-main{background: var(--brand) !important;
background-color: var(--brand) !important;
color: var(--paper) !important}
.site-nav .nav-links.open .nav-btn-sec{color: var(--brand-dark) !important}
}
}
@media (max-width: 1024px){.ni{min-height: 44px;
padding-top: 8px;
padding-bottom: 8px}
.btn-sec,
.btn-main,
.dark-toggle,
.sidebar-toggle{min-height: 44px;
min-width: 44px}
.chk{width: 28px;
height: 28px;
font-size: 13px;
border-radius: 7px}
.nav-group-toggle{min-height: 44px;
padding-top: 8px;
padding-bottom: 8px}
.tb-icon-btn{min-width: 44px;
min-height: 44px}
.dash-hero-action{min-height: 44px;
display: inline-flex;
align-items: center}
.circulaires-pending-close{min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center}
.pantry-action-btn{min-width: 44px;
min-height: 44px}
.app-footer-links a{display: inline-block;
padding: 12px 4px}
.ptag{min-height: 44px;
display: inline-flex;
align-items: center}
}
@media (max-width: 768px){.dash-stat-eyebrow,
.dash-section-eyebrow,
.page-masthead-eyebrow,
.page-masthead-meta span,
.logo-sub,
.w-desc,
.uplan{font-size: 13px !important}
.pill{font-size: 13px !important;
padding: 4px 8px !important}
label{font-size: 13px}
}
.profil-actions{display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap}
.profil-logout{margin-left: auto}
@media (max-width: 768px){.profil-actions{position: sticky;
bottom: 0;
z-index: 50;
background: var(--paper-sheet);
border-top: 1px solid var(--border);
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
margin: 16px -16px -16px;
box-shadow: 0 -4px 16px oklch(0.22 0.02 110 / 0.08);
flex-direction: column;
align-items: stretch;
gap: 8px}
.profil-actions .btn-main,
.profil-actions .btn-sec{width: 100%;
text-align: center}
.profil-actions .btn-main{padding: 12px 20px;
font-size: 15px}
.profil-actions .btn-sec{padding: 12px 16px;
font-size: 13px}
.profil-logout{margin-left: 0;
width: 100%}
.profil-logout .btn-sec{width: 100%}
}
@media (max-width: 768px){.profil-actions{bottom: calc(64px + env(safe-area-inset-bottom));
padding: 12px 16px}
}
@media (max-width: 768px){.topbar{position: sticky;
top: 0;
z-index: 100;
min-height: 56px;
max-height: 64px;
overflow: hidden;
background: var(--paper-sheet)}
.topbar-form{flex-shrink: 0}
}
@media (max-width: 768px){.topbar #darkToggle{display: none}
.topbar .live-pill{display: none}
.topbar{max-height: none;
min-height: calc(56px + env(safe-area-inset-top));
padding-top: calc(12px + env(safe-area-inset-top))}
.sidebar .logo-zone{padding-top: calc(18px + env(safe-area-inset-top))}
}
@media (max-width: 768px){.dgrid,
.dgrid3{grid-template-columns: 1fr}
.urgence-grid{grid-template-columns: 1fr 1fr}
.pantry-grid,
.badges-grid{grid-template-columns: repeat(2, 1fr)}
.fb-inner{flex-direction: column;
align-items: flex-start;
gap: 16px}
.fb-amount{font-size: 42px}
.recipe-cover{height: 120px;
font-size: 48px}
.cmp-row{flex-direction: column}
}
@media (max-width: 640px){.kpi-strip{grid-template-columns: repeat(2, 1fr);
gap: 8px}
.kpi-val{font-size: 23px}
.fantome-banner{padding: 20px 16px}
.fb-amount{font-size: 38px}
}
@media (max-width: 768px){.live-pill{display: none}
.tb-right .btn-main{font-size: 0;
padding: 8px 8px;
min-width: 40px}
.tb-right .btn-main::before{content: "✦ IA";
font-size: 13px}
}
@media (max-width: 480px){.ptitle{font-size: 13px;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap}
.tb-right .btn-main::before{content: "✦";
font-size: 16px}
.tb-right .btn-main{padding: 8px;
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center}
.dark-toggle{padding: 8px;
min-width: 44px;
min-height: 44px;
font-size: 15px;
display: inline-flex;
align-items: center;
justify-content: center}
}
@media (max-width: 480px){.topbar{padding-left: max(10px, env(safe-area-inset-left));
padding-right: max(10px, env(safe-area-inset-right))}
.ptitle{font-size: 13px;
max-width: 110px}
.kpi-strip{grid-template-columns: 1fr}
.urgence-grid{grid-template-columns: 1fr}
.day-strip{flex-wrap: wrap}
.dc{flex: 0 0 calc(33.333% - 5px)}
}
@media (max-width: 480px){.kpi-lbl,
.ri-detail,
.si-r,
.pred-timing{font-size: 12px}
.nav-sec,
.logo-sub,
.fb-eyebrow,
.sc-lbl{font-size: 12px}
}
@media (max-width: 768px){input,
select,
textarea{font-size: 16px}
}
@media (max-width: 768px){.table-wrap,
.content table{display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%}
}
@media (max-width: 480px){.modal-box,
#vocalOverlay > div{width: calc(100% - 20px) !important;
max-width: calc(100% - 20px) !important;
margin: 8px !important;
padding: 24px 20px !important}
}
@media (max-width: 1024px){.fb-amount{font-size: 44px}
.fb-ring svg{width: 90px !important;
height: 90px !important}
.dgrid{grid-template-columns: 1fr}
.dgrid3{grid-template-columns: 1fr 1fr}
}
@media (max-width: 768px){.fantome-banner{padding: 20px 16px;
margin-bottom: 16px}
.fb-inner{flex-direction: column;
align-items: stretch;
gap: 16px}
.fb-left{width: 100%}
.fb-main{display: flex;
align-items: baseline;
gap: 4px}
.fb-amount{font-size: 38px}
.fb-currency{font-size: 19px}
.fb-sub{font-size: 13px}
.fb-tags{gap: 8px}
.fb-tags .ftag{font-size: 12px;
padding: 2px 8px}
.fb-ring{align-self: center;
position: relative}
.fb-ring svg{width: 90px !important;
height: 90px !important}
.fb-pct{font-size: 19px}
.fb-plbl{font-size: 12px}
.kpi-strip{grid-template-columns: repeat(2, 1fr);
gap: 8px}
.kpi{padding: 12px 16px}
.kpi-ico{font-size: 16px;
margin-bottom: 4px}
.kpi-val{font-size: 19px}
.kpi-lbl{font-size: 12px}
.dgrid,
.dgrid3{grid-template-columns: 1fr;
gap: 8px}
.ri{padding: 8px;
gap: 8px}
.ri-emo{font-size: 23px}
.ri-name{font-size: 13px}
.ri-detail{font-size: 12px}
.ri-price{font-size: 15px}
.si{padding: 8px 8px;
gap: 8px;
flex-wrap: wrap}
.si-nom{font-size: 13px;
min-width: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap}
.si-p{font-size: 13px}
.si-pct{font-size: 12px}
.st{font-size: 12px;
padding: 2px 4px;
white-space: nowrap}
.pred-card{padding: 16px}
.pred-item{gap: 8px}
.pred-prod{font-size: 13px}
.pred-timing{font-size: 12px}
.pred-action{font-size: 12px;
padding: 4px 8px}
.score-card{padding: 16px}
.sc-pct{font-size: 30px}
.sc-trophy{font-size: 23px}
.sc-desc{font-size: 12px}
.detective-alert{padding: 8px 12px;
gap: 8px}
.card{padding: 16px;
margin-bottom: 8px;
border-radius: 14px}
.chd{margin-bottom: 12px}
.ctitle{font-size: 15px}
.caction{font-size: 12px}
.pill{font-size: 12px;
padding: 2px 8px}
}
@media (max-width: 480px){.fantome-banner{padding: 16px 16px}
.fb-amount{font-size: 30px}
.fb-eyebrow{font-size: 12px;
letter-spacing: 2px}
.fb-sub{font-size: 12px}
.fb-ring svg{width: 80px !important;
height: 80px !important}
.fb-pct{font-size: 16px}
.kpi-strip{gap: 8px}
.kpi{padding: 8px 12px;
border-radius: 14px}
.kpi-val{font-size: 19px}
.ri-emo{font-size: 19px}
.ri-price{font-size: 13px}
.card{padding: 12px;
border-radius: 12px}
.chd{margin-bottom: 8px}
}
@media (max-width: 480px){.kpi-strip{grid-template-columns: 1fr 1fr}
.fb-amount{font-size: 30px}
.fb-currency{font-size: 15px}
.kpi-val{font-size: 16px}
.fb-ring svg{width: 70px !important;
height: 70px !important}
}
.recipe-emoji{font-size: 60px}
.dc{-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none}
.chk{-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none}
.li{-webkit-tap-highlight-color: transparent}
@media (max-width: 768px){.menu-grid{grid-template-columns: 1fr !important;
gap: 12px !important}
.day-strip{gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
flex-wrap: nowrap;
scroll-snap-type: x mandatory}
.dc{min-width: 50px;
min-height: 70px;
padding: 8px 8px;
scroll-snap-align: start;
position: relative;
z-index: 1}
.dn{font-size: 12px}
.dd{font-size: 16px}
.de{font-size: 16px}
.recipe-panel{width: 100%}
.recipe-cover{height: 100px;
border-radius: 14px 14px 0 0}
.recipe-emoji{font-size: 44px !important}
.recipe-body{padding: 16px}
.recipe-title{font-size: 19px}
.rmeta{flex-wrap: wrap;
gap: 8px}
.rm{font-size: 13px}
.ing-row{flex-direction: column;
align-items: flex-start !important;
gap: 4px;
padding: 8px 0}
.ing-row > div{margin-left: 0 !important}
.ing-row > div[style*="display:flex"]{flex-wrap: wrap;
gap: 4px !important}
.pantry-tag,
.expire-tag{font-size: 12px}
.lp{width: 100%;
padding: 16px}
.ls-title{font-size: 13px}
.li{gap: 8px;
padding: 8px 0;
min-height: 44px}
.li-n{font-size: 13px}
.li-q{font-size: 12px;
white-space: nowrap}
.chk{width: 32px;
height: 32px;
border-radius: 8px;
font-size: 15px;
flex-shrink: 0}
.recipe-speed{font-size: 12px;
padding: 4px 8px}
.tb-right .btn-main{font-size: 12px;
padding: 8px 8px;
white-space: nowrap;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis}
.jour-panel div[style*="white-space:pre-line"]{font-size: 13px !important;
line-height: 1.6 !important}
.jour-panel .btn-main{font-size: 13px;
padding: 12px 16px}
}
@media (max-width: 480px){.recipe-cover{height: 80px}
.recipe-emoji{font-size: 38px !important}
.recipe-title{font-size: 16px}
.rm{font-size: 12px}
.dc{min-width: 44px;
padding: 8px 8px}
.dd{font-size: 15px}
.dn{font-size: 12px}
.chk{width: 28px;
height: 28px;
font-size: 13px}
.lp{padding: 12px}
.recipe-body{padding: 12px}
}
@media (max-width: 768px){div[style*="grid-template-columns"][style*="minmax(180px"]{grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important}
div[style*="grid-template-columns"][style*="minmax(140px"]{grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important}
}
.auth-body .auth-split{padding-top: 64px}
@media (max-width: 768px){.auth-brand{display: none !important}
.auth-form-side{width: 100% !important;
padding: 20px !important;
min-height: calc(100vh - 64px)}
}
.testimonials-marquee{margin-top: 48px;
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%)}
.testimonials-track{display: flex;
gap: 20px;
width: max-content;
animation: testimonials-scroll 40s linear infinite}
@media (hover: hover) and (pointer: fine){.testimonials-marquee:hover .testimonials-track{animation-play-state: paused}
}
.testimonial-card{flex: 0 0 340px;
background: var(--paper-sheet);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 18px;
padding: 28px;
text-align: left;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04)}
.testimonial-card p{font-size: 15px;
color: var(--ink-soft);
line-height: 1.7;
margin-bottom: 16px}
.testimonial-card .t-author{display: flex;
align-items: center;
gap: 8px}
.testimonial-card .t-avatar{width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--cream-fixed);
font-size: 15px;
font-weight: 700}
.testimonial-card .t-name{font-size: 13px;
font-weight: 600;
color: var(--ink)}
.testimonial-card .t-role{font-size: 12px;
color: var(--ink-muted)}
@keyframes testimonials-scroll{from{transform: translateX(0)}
to{transform: translateX(calc(-360px * 5))}
}
@media (prefers-reduced-motion: reduce){.testimonials-track{animation: none}
}
@media (max-width: 640px){.testimonial-card{flex: 0 0 280px;
padding: 24px}
@keyframes testimonials-scroll{from{transform: translateX(0)}
to{transform: translateX(calc(-300px * 5))}
}
}
.live-counter{display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
padding: 8px 16px;
border-radius: 980px;
background: oklch(0.59 0.16 143 / 0.12);
border: 1px solid oklch(0.59 0.16 143 / 0.25);
font-size: 13px;
color: var(--ink)}
.live-counter strong{font-weight: 700;
color: var(--brand)}
.live-dot{width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 0 0 oklch(0.59 0.16 143 / 0.6);
animation: live-pulse 2s infinite}
@keyframes live-pulse{0%{box-shadow: 0 0 0 0 oklch(0.59 0.16 143 / 0.6)}
70%{box-shadow: 0 0 0 10px oklch(0.59 0.16 143 / 0)}
100%{box-shadow: 0 0 0 0 oklch(0.59 0.16 143 / 0)}
}
.trust-bar{padding: 56px 24px;
text-align: center;
border-top: 1px solid rgba(0, 0, 0, 0.06);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
background: var(--paper-soft)}
.trust-label{font-size: 13px;
color: var(--ink-muted);
font-weight: 500;
margin-bottom: 28px}
.trust-grid{display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
max-width: 720px;
margin: 0 auto}
.trust-card{display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 24px 16px;
background: var(--paper-sheet);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
font-weight: 700;
font-size: 15px;
color: var(--ink);
transition:
transform 0.3s ease,
box-shadow 0.3s ease}
@media (hover: hover) and (pointer: fine){.trust-card:hover{transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08)}
}
.trust-emoji{font-size: 30px;
animation: trust-float 4s ease-in-out infinite}
.trust-card:nth-child(2) .trust-emoji{animation-delay: 0.5s}
.trust-card:nth-child(3) .trust-emoji{animation-delay: 1s}
.trust-card:nth-child(4) .trust-emoji{animation-delay: 1.5s}
@keyframes trust-float{0%,
100%{transform: translateY(0)}
50%{transform: translateY(-6px)}
}
@media (max-width: 640px){.trust-grid{grid-template-columns: repeat(2, 1fr)}
}
.calc-card{max-width: 560px;
margin: 0 auto;
background: var(--paper-sheet);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 24px;
padding: 36px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
text-align: center}
.calc-label{display: block;
font-size: 15px;
font-weight: 600;
color: var(--ink);
margin-bottom: 20px}
.calc-input-row{display: flex;
align-items: center;
gap: 16px;
margin-bottom: 28px}
.calc-input-row input[type="range"]{flex: 1;
-webkit-appearance: none;
appearance: none;
height: 6px;
border-radius: 999px;
background: linear-gradient(to right, var(--brand) 0%, var(--brand) 50%, var(--paper-deep) 50%);
outline: none}
.calc-input-row input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:
0 0 0 4px oklch(0.59 0.16 143 / 0.3),
0 2px 8px oklch(0.59 0.16 143 / 0.42)}
.calc-input-row input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:
0 0 0 4px oklch(0.59 0.16 143 / 0.3),
0 2px 8px oklch(0.59 0.16 143 / 0.42)}
.calc-input-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--brand);
border: 3px solid var(--paper-sheet);
box-shadow: 0 2px 8px oklch(0.59 0.16 143 / 0.42);
cursor: pointer}
.calc-input-row input[type="range"]::-moz-range-thumb{width: 24px;
height: 24px;
border-radius: 50%;
background: var(--brand);
border: 3px solid var(--paper-sheet);
box-shadow: 0 2px 8px oklch(0.59 0.16 143 / 0.42);
cursor: pointer}
.calc-input-val{min-width: 80px;
font-size: 19px;
font-weight: 700;
color: var(--ink)}
.calc-results{display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px}
.calc-result{background: var(--paper);
border-radius: 14px;
padding: 20px}
.calc-result-hl{background: linear-gradient(135deg, var(--brand), var(--brand-light));
color: var(--cream-fixed)}
.calc-result-lbl{font-size: 13px;
opacity: 0.85;
margin-bottom: 8px}
.calc-result-val{font-size: 30px;
font-weight: 800;
letter-spacing: -0.5px}
.calc-result:not(.calc-result-hl) .calc-result-val{color: var(--ink)}
@media (max-width: 480px){.calc-card{padding: 24px}
.calc-input-row{flex-direction: column;
gap: 12px}
}
.ba-slider{position: relative;
max-width: 720px;
margin: 0 auto;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
cursor: ew-resize;
user-select: none;
background: var(--paper-sheet)}
.ba-side{position: relative;
padding: 32px}
.ba-after{position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--paper-sheet);
clip-path: inset(0 0 0 50%)}
.ba-tag{display: inline-block;
padding: 8px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 20px}
.ba-tag-red{background: oklch(0.94 0.032 22);
color: var(--danger)}
.ba-tag-green{background: var(--accent-tint);
color: var(--brand-dark)}
.ba-receipt{font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 13px}
.ba-line{display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
color: var(--ink-soft)}
.ba-line em{font-style: normal;
color: var(--brand);
font-weight: 600;
font-size: 12px}
.ba-total{margin-top: 8px;
padding-top: 16px !important;
border-top: 2px solid var(--ink);
border-bottom: none;
font-size: 16px;
font-weight: 800;
color: var(--ink)}
.ba-total-green{color: var(--brand-dark) !important;
border-top-color: var(--brand-dark)}
.ba-handle{position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 4px;
background: var(--brand);
cursor: ew-resize;
z-index: 10}
.ba-handle span{position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--brand);
color: var(--cream-fixed);
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
font-weight: 700;
box-shadow: 0 4px 16px oklch(0.59 0.16 143 / 0.42);
letter-spacing: -2px}
.ba-savings{text-align: center;
margin-top: 24px;
font-size: 16px;
color: var(--ink-soft)}
.ba-savings strong{color: var(--brand);
font-size: 23px;
font-weight: 800}
body.auth-body .sticky-cta-mobile{display: none !important}
.comp-search{display: flex;
gap: 8px;
width: 100%;
max-width: 560px;
margin: 32px auto 0}
.comp-search input{flex: 1;
padding: 16px 20px;
border: 2px solid var(--paper-deep);
border-radius: 14px;
font-size: 15px;
background: var(--paper-sheet);
outline: none;
transition: border-color 0.2s}
.comp-search input:focus{border-color: var(--brand)}
.comp-search button{padding: 16px 28px;
border-radius: 14px}
.comp-suggestions{margin-top: 24px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px}
.comp-sug-label{font-size: 13px;
color: var(--ink-muted);
margin-right: 4px}
.comp-sug{padding: 8px 16px;
background: var(--paper-sheet);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 999px;
font-size: 13px;
color: var(--ink);
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){.comp-sug:hover{border-color: var(--brand);
background: oklch(0.59 0.16 143 / 0.1);
color: var(--brand)}
}
.comp-empty{text-align: center;
padding: 60px 20px}
.comp-empty-emoji{font-size: 48px;
margin-bottom: 16px}
.comp-empty h3{font-size: 23px;
color: var(--ink);
margin-bottom: 8px}
.comp-empty p{color: var(--ink-muted)}
.comp-best{max-width: 720px;
margin: 0 auto;
background: linear-gradient(135deg, var(--brand), var(--brand-light));
color: var(--cream-fixed);
border-radius: 24px;
padding: 40px 32px;
text-align: center;
box-shadow: 0 12px 40px oklch(0.59 0.16 143 / 0.32)}
.comp-best-tag{display: inline-block;
padding: 8px 16px;
background: color-mix(in oklch, var(--paper-sheet) 25%, transparent);
border-radius: 999px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 16px}
.comp-best-product{font-size: 23px;
font-weight: 600;
margin-bottom: 12px}
.comp-best-price{font-size: 56px;
font-weight: 900;
letter-spacing: -2px;
line-height: 1}
.comp-best-price span{display: block;
font-size: 16px;
font-weight: 500;
margin-top: 8px;
opacity: 0.9}
.comp-best-savings{margin-top: 20px;
font-size: 15px;
opacity: 0.95}
.comp-best-savings strong{font-weight: 800}
.comp-grid{display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px}
.comp-store{background: var(--paper-sheet);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 18px;
overflow: hidden}
.comp-store-head{display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
background: var(--paper-soft)}
.comp-store-name{font-size: 19px;
font-weight: 800;
color: var(--ink)}
.comp-store-count{font-size: 13px;
color: var(--ink-muted)}
.comp-store-empty{padding: 40px 20px;
text-align: center;
color: var(--ink-muted);
font-size: 13px}
.comp-items{list-style: none;
padding: 0;
margin: 0}
.comp-item{display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.04)}
.comp-item:last-child{border-bottom: none}
.comp-item-info{flex: 1;
min-width: 0}
.comp-item-name{font-size: 15px;
font-weight: 600;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap}
.comp-item-unit{font-size: 12px;
color: var(--ink-muted)}
.comp-item-prices{display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px}
.comp-item-old{font-size: 12px;
color: var(--ink-muted);
text-decoration: line-through}
.comp-item-price{font-size: 16px;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.3px}
.comp-item-discount{font-size: 12px;
font-weight: 700;
color: var(--brand);
background: oklch(0.59 0.16 143 / 0.14);
padding: 2px 8px;
border-radius: 4px}
.comp-cta{margin-top: 56px;
padding: 48px 32px;
text-align: center;
background: var(--paper);
border-radius: 24px}
.comp-cta h3{font-size: 23px;
font-weight: 800;
color: var(--ink);
margin-bottom: 8px}
.comp-cta p{color: var(--ink-muted);
margin-bottom: 24px}
@media (max-width: 768px){.comp-grid{grid-template-columns: 1fr}
.comp-best-price{font-size: 44px}
.comp-search{flex-direction: column}
.comp-search button{width: 100%}
}
.trust-tile{display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 28px 16px 24px;
background: var(--paper-sheet);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 18px;
text-align: center;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
position: relative;
overflow: hidden}
.trust-tile::before{content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--tile-color, var(--brand))}
@media (hover: hover) and (pointer: fine){.trust-tile:hover{transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08)}
}
.trust-mono{width: 56px;
height: 56px;
border-radius: 14px;
background: var(--tile-color, var(--brand));
color: var(--cream-fixed);
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 23px;
letter-spacing: -1px;
box-shadow: 0 8px 20px var(--tile-shadow, oklch(0.59 0.16 143 / 0.32))}
.trust-name{font-size: 16px;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.3px}
.trust-tag{font-size: 12px;
font-weight: 600;
color: var(--brand);
text-transform: uppercase;
letter-spacing: 0.5px}
.trust-maxi{--tile-color: var(--paille);
--tile-shadow: oklch(0.82 0.11 88 / 0.38)}
.trust-maxi .trust-mono{color: var(--ink)}
.trust-superc{--tile-color: var(--danger);
--tile-shadow: oklch(0.44 0.14 25 / 0.32)}
.trust-iga{--tile-color: var(--ardoise);
--tile-shadow: oklch(0.52 0.1 220 / 0.32)}
.trust-metro{--tile-color: var(--brand);
--tile-shadow: oklch(0.59 0.16 143 / 0.32)}
.trust-disclaimer{max-width: 720px;
margin: 24px auto 0;
font-size: 12px;
color: var(--ink-muted);
text-align: center;
font-style: italic}
.trust-card{display: none}
.feat-icon-svg{width: 56px;
height: 56px;
border-radius: 16px;
background: oklch(0.59 0.16 143 / 0.14);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
color: var(--brand);
transition:
transform 0.3s ease,
background 0.3s ease}
.feat-icon-svg svg{width: 32px;
height: 32px}
@media (hover: hover) and (pointer: fine){.feat-card:hover .feat-icon-svg{transform: scale(1.08) rotate(-3deg);
background: color-mix(in oklch, var(--brand) 15%, transparent)}
}
.feat-card-highlight .feat-icon-svg{background: var(--brand);
color: var(--cream-fixed)}
@media (hover: hover) and (pointer: fine){.feat-card-highlight:hover .feat-icon-svg{background: var(--brand-dark)}
}
.feat-card:has(.feat-icon-svg) .feat-icon{display: none !important}
@media (max-width: 768px){.profil-grid{grid-template-columns: 1fr !important}
.profil-grid .ptag{min-width: unset !important}
.profil-grid ~ div[style*="display:flex"]{flex-wrap: wrap}
.profil-grid ~ div[style*="display:flex"] > *{flex: 1 1 auto;
text-align: center}
.profil-grid ~ div[style*="display:flex"] form{margin-left: 0 !important}
}
@media (max-width: 480px){.ptag{padding: 8px 8px !important;
font-size: 12px}
.ptag div[style*="font-size: 19px"]{font-size: 16px !important}
}
.hero-mockup{position: relative}
.hero-deco{position: absolute;
width: 64px;
height: 64px;
filter: drop-shadow(0 8px 24px oklch(0.59 0.16 143 / 0.25));
z-index: 2;
pointer-events: none;
animation: hero-float 6s ease-in-out infinite}
.hero-deco-1{top: -20px;
left: -10px;
animation-delay: 0s}
.hero-deco-2{top: 20%;
right: -30px;
width: 72px;
height: 72px;
animation-delay: 1.5s}
.hero-deco-3{bottom: 20%;
left: -30px;
animation-delay: 3s}
.hero-deco-4{bottom: -10px;
right: 10%;
animation-delay: 4.5s}
@keyframes hero-float{0%,
100%{transform: translateY(0) rotate(0deg)}
50%{transform: translateY(-12px) rotate(3deg)}
}
@media (max-width: 768px){.hero-deco{display: none}
}
.showcase-svg{width: 100%;
max-width: 320px;
height: auto;
display: block;
margin: 0 auto;
filter: drop-shadow(0 12px 40px oklch(0.59 0.16 143 / 0.15))}
.showcase-visual-inner{display: none}
@media (max-width: 768px){.dash-hero{background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin-bottom: 16px}
.dash-hero::before{display: none !important}
.dash-hero-greeting{margin-bottom: 16px;
padding: 0 2px}
.dash-hero-grid{grid-template-columns: 1fr !important;
gap: 16px !important;
margin-bottom: 16px;
padding: 24px 20px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.02),
0 4px 16px rgba(0, 0, 0, 0.03)}
.dash-hero-ring{width: 160px !important;
height: 160px !important;
margin: 0 auto}
.dash-hero-ring svg{width: 160px !important;
height: 160px !important}
.dash-hero-numbers{flex-direction: row !important;
gap: 0 !important;
justify-content: space-around;
padding-top: 16px;
border-top: 1px solid var(--border)}
.dash-hero-kpi{flex: 1;
text-align: center;
position: relative}
.dash-hero-kpi + .dash-hero-kpi::before{content: "";
position: absolute;
left: 0;
top: 15%;
bottom: 15%;
width: 1px;
background: var(--border)}
.dash-hero-kpi-value{font-size: 23px !important;
line-height: 1.1}
.dash-hero-kpi-label{font-size: 12px !important;
letter-spacing: 0.3px;
margin-top: 4px;
padding: 0 4px}
.dash-hero-actions{display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 8px !important;
margin-bottom: 16px}
.dash-cta{margin-bottom: 16px}
.dash-scan-section{margin-top: 8px}
.dash-scan-auto,
.dash-scan-card{box-shadow: 0 1px 3px oklch(0.22 0.02 110 / 0.06)}
.dash-hero-action{aspect-ratio: 1.3 / 1;
padding: 16px 8px !important;
border-radius: 18px !important;
background: var(--paper-sheet);
border: 1px solid var(--border) !important;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
-webkit-tap-highlight-color: transparent}
.dash-hero-action:active{transform: scale(0.96);
background: var(--accent-tint)}
.dash-hero-action-lead{width: 38px;
height: 38px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Young Serif", Georgia, serif;
font-size: 19px;
font-weight: 400;
background: color-mix(in oklch, var(--brand) 10%, var(--paper-deep));
color: var(--brand);
line-height: 1}
.dash-hero-action-label{font-size: 13px;
font-weight: 600;
color: var(--ink-soft);
letter-spacing: 0.1px}
.dash-hero-action--urgent{grid-column: 1 / -1;
aspect-ratio: auto !important;
flex-direction: row !important;
justify-content: center;
gap: 12px !important;
padding: 16px !important;
background: var(--paper-sheet) !important;
border-color: var(--border) !important}
.dash-hero-action--urgent .dash-hero-action-lead{font-size: 19px;
color: var(--brand-dark) !important}
.dash-hero-action--urgent .dash-hero-action-label{color: var(--ink) !important;
font-size: 15px;
font-weight: 600 !important}
.dash-tabs{background: transparent !important;
border: none !important;
border-radius: 0 !important;
overflow: visible !important}
.dash-tabs-nav{border-bottom: 1px solid var(--border);
padding: 0 !important;
margin-bottom: 16px}
.dash-tab-panel{padding: 0 !important}
.dash-section-head{margin-bottom: 12px;
padding: 0 2px}
.dash-meal{background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 16px;
padding: 16px !important;
margin-bottom: 8px;
grid-template-columns: 52px 1fr auto !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02)}
@media (hover: hover) and (pointer: fine){.dash-meal:hover{padding-left: 16px !important}
}
.dash-meal:last-child{border-bottom: 1px solid var(--border) !important}
.dash-restock{border-radius: 16px !important;
margin-top: 16px}
}
@media (max-width: 768px){body[data-route="dashboard"] .topbar .ptitle,
.main .topbar .ptitle{display: none}
.topbar{background: var(--paper-sheet) !important;
border-bottom: 1px solid var(--border)}
[data-theme="dark"] .topbar{background: oklch(0.22 0.015 90) !important}
.tb-icon-btn{background: rgba(0, 0, 0, 0.04) !important;
border: none !important;
border-radius: 12px !important;
width: 40px;
height: 40px;
transition:
transform 0.1s,
background 0.15s}
.tb-icon-btn:active{transform: scale(0.92);
background: rgba(0, 0, 0, 0.08) !important}
.sidebar-toggle{background: transparent !important;
border: none !important;
font-size: 23px !important;
width: 40px;
height: 40px}
.sidebar-toggle:active{transform: scale(0.92)}
.dash-hero-greeting{padding: 8px 2px 2px !important;
margin-bottom: 24px !important}
.dash-hero-meta{font-size: 12px !important;
letter-spacing: 1.2px !important;
color: oklch(0.55 0.02 130) !important}
.page-masthead-title,
.dash-hero-greeting h1{font-size: clamp(32px, 8vw, 42px) !important;
line-height: 1.05 !important;
letter-spacing: -0.02em !important;
margin-top: 8px !important}
.dash-hero-context{font-size: 16px !important;
line-height: 1.45 !important;
color: var(--ink-soft) !important;
margin-top: 12px !important;
padding-right: 12px}
.dash-hero-grid{background: var(--paper-sheet) !important;
padding: 28px 24px 24px !important;
border-radius: 24px !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.02),
0 4px 14px rgba(0, 0, 0, 0.04) !important;
position: relative;
overflow: hidden}
.dash-hero-ring,
.dash-hero-numbers{position: relative;
z-index: 1}
.dash-hero-grid{grid-template-columns: auto 1fr !important;
align-items: center}
.dash-hero-ring{width: 124px !important;
height: 124px !important}
.dash-hero-ring svg{width: 124px !important;
height: 124px !important}
.dash-hero-ring-progress{filter: drop-shadow(0 2px 8px rgba(58, 112, 82, 0.25))}
.dash-hero-ring-pct{font-size: 38px !important;
font-weight: 400 !important;
letter-spacing: -0.02em !important}
.dash-hero-ring-pct span{font-size: 16px !important;
opacity: 0.6}
.dash-hero-ring-lbl{font-size: 12px !important;
letter-spacing: 2.5px !important;
opacity: 0.7}
.dash-hero-numbers{padding-top: 20px !important;
border-top: 1px solid rgba(0, 0, 0, 0.06) !important}
.dash-hero-kpi-value{font-size: 23px !important;
font-weight: 400 !important;
letter-spacing: -0.01em !important}
.dash-hero-kpi-label{font-size: 12px !important;
letter-spacing: 0.5px !important;
opacity: 0.75}
.dash-hero-action{background: linear-gradient(180deg, var(--paper-sheet), oklch(0.97 0.01 100)) !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.03),
0 4px 12px rgba(0, 0, 0, 0.04) !important;
transition:
transform 0.2s var(--ease-snap),
box-shadow 0.2s ease,
background 0.15s ease !important}
.dash-hero-action:active{transform: scale(0.94) !important;
background: linear-gradient(
180deg,
var(--brand-pale),
color-mix(in oklch, var(--brand) 14%, var(--paper-deep))
) !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 2px 6px rgba(0, 0, 0, 0.06) !important}
.dash-hero-action-lead{transition: transform 0.2s var(--ease-snap)}
.dash-hero-action:active .dash-hero-action-lead{transform: scale(1.06)}
.dash-hero-action-label{font-size: 13px !important;
font-weight: 600 !important;
color: var(--ink) !important}
.dash-section-head{margin-bottom: 8px !important;
padding: 4px 2px 0 !important}
.dash-section-title{font-family: var(--font-display) !important;
font-size: 23px !important;
letter-spacing: -0.01em !important}
.dash-section-action{font-size: 13px !important;
color: var(--brand-dark) !important;
font-weight: 500 !important}
.dash-tabs-nav{border-bottom: none !important;
background: rgba(0, 0, 0, 0.04);
border-radius: 12px;
padding: 4px !important;
gap: 2px}
.dash-tab{border-radius: 9px !important;
font-size: 13px !important;
padding: 8px 12px !important;
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, 1, 0.5, 1) !important}
.dash-tab.is-active{background: var(--paper-sheet) !important;
color: var(--ink) !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 2px 8px rgba(0, 0, 0, 0.06)}
.dash-tab.is-active::after{display: none !important}
.dash-meal{background: var(--paper-sheet) !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
border-radius: 18px !important;
padding: 16px 16px !important;
margin-bottom: 8px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.03),
0 3px 10px rgba(0, 0, 0, 0.04) !important;
transition:
transform 0.2s var(--ease-snap),
box-shadow 0.2s !important}
.dash-meal:active{transform: scale(0.98);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important}
.dash-meal-emoji{font-size: 38px !important;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08))}
.dash-meal-name{font-size: 16px !important;
letter-spacing: -0.01em !important}
.dash-meal-price{font-size: 16px !important;
font-weight: 600 !important;
color: var(--brand-dark) !important}
.dash-hero-greeting,
.dash-hero-grid,
.dash-hero-actions,
.dash-tabs{animation: dashEnterUp 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both}
.dash-hero-greeting{animation-delay: 0.02s}
.dash-hero-grid{animation-delay: 0.08s}
.dash-hero-actions{animation-delay: 0.14s}
.dash-tabs{animation-delay: 0.2s}
@keyframes dashEnterUp{from{opacity: 0;
transform: translateY(16px)}
to{opacity: 1;
transform: translateY(0)}
}
@media (prefers-reduced-motion: reduce){.dash-hero-greeting,
.dash-hero-grid,
.dash-hero-actions,
.dash-tabs,
.mtab.on .mtab-icon,
.is-navigating::after{animation: none !important}
.dash-hero-action--urgent{animation: none !important}
}
.mtab.on{font-weight: 600}
.mtab.on .mtab-icon{filter: drop-shadow(0 2px 6px rgba(58, 112, 82, 0.3));
animation: tabPop 0.3s var(--ease-snap)}
@keyframes tabPop{0%{transform: scale(1)}
50%{transform: scale(1.15)}
100%{transform: scale(1)}
}
.content::-webkit-scrollbar{display: none}
.content{scrollbar-width: none}
}
@media (max-width: 768px){.sidebar{background: linear-gradient(180deg, oklch(0.97 0.01 90) 0%, oklch(0.95 0.015 85) 100%) !important;
padding: 0 !important;
gap: 0 !important;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.06)}
.sidebar-close-btn{position: absolute;
top: calc(14px + env(safe-area-inset-top));
right: 14px;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.06);
color: rgba(0, 0, 0, 0.55);
font-size: 15px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 10;
transition:
background 0.15s ease,
transform 0.15s var(--ease-snap)}
.sidebar-close-btn:active{transform: scale(0.92);
background: rgba(0, 0, 0, 0.1)}
.sidebar .logo-zone{padding: calc(14px + env(safe-area-inset-top)) 20px 12px !important;
background: transparent;
border-bottom: none !important}
.sidebar .logo-mark,
.sidebar .logo-sub{display: none !important}
.sidebar-title-lg{font-family:
var(--font-display),
-apple-system,
system-ui,
sans-serif;
font-size: 19px;
font-weight: 700;
letter-spacing: -0.015em;
color: var(--ink-soft);
line-height: 1.2;
padding-top: 2px}
.pwa-install-btn{margin-top: 16px !important;
border-radius: 11px !important;
padding: 12px 16px !important;
font-size: 15px !important;
font-weight: 600 !important;
background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
color: var(--cream-fixed) !important;
border: none !important;
box-shadow: 0 4px 14px rgba(58, 112, 82, 0.28)}
.sidebar .weather-strip{margin: 0 16px 16px !important;
padding: 16px 16px !important;
background: var(--paper-sheet) !important;
border-radius: 14px !important;
border: none !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 4px 12px rgba(0, 0, 0, 0.05) !important}
.sidebar .w-temp{font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: -0.01em}
.sidebar .w-desc{font-size: 13px !important;
opacity: 0.7;
margin-top: 2px}
.sidebar .w-ai{font-size: 12px !important;
margin-top: 8px !important;
opacity: 0.85}
.sidebar .nav{padding: 0 16px 28px !important;
gap: 0 !important;
display: flex;
flex-direction: column}
.sidebar .nav > .nav-group-toggle,
.sidebar .nav > .nav-sec{margin-top: 24px !important}
.sidebar .nav > .nav-group + .ni{margin-top: 24px !important;
border-top-left-radius: 13px !important;
border-top-right-radius: 13px !important;
border-bottom-left-radius: 13px !important;
border-bottom-right-radius: 13px !important}
.sidebar .nav > .ni{background: var(--paper-sheet);
margin: 0 !important;
padding: 8px 16px 8px 48px !important;
font-size: 15px !important;
font-weight: 500 !important;
color: var(--ink) !important;
letter-spacing: -0.005em;
position: relative;
min-height: 44px;
display: flex !important;
align-items: center;
border-radius: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
overflow: hidden;
transition:
background 0.15s ease,
transform 0.15s var(--ease-snap)}
.sidebar .nav > .ni:active{background: rgba(0, 0, 0, 0.04);
transform: scale(0.985)}
.sidebar .nav > .ni:first-child,
.sidebar .nav > .nav-group-toggle + .ni{border-top-left-radius: 13px;
border-top-right-radius: 13px}
.sidebar .nav > .ni:has(+ .nav-group-toggle),
.sidebar .nav > .ni:has(+ .nav-sec),
.sidebar .nav > .ni:last-child{border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
border-bottom: none}
.sidebar .ni .nico{position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 7px;
font-size: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--cream-fixed) !important;
background: var(--brand);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.15)}
.sidebar .ni .nico::before{content: "";
width: 16px;
height: 16px;
background: var(--cream-fixed);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain}
.sidebar .nav > .ni[data-nav] .nico{background: linear-gradient(135deg, var(--brand), var(--brand-light, var(--brand)))}
.sidebar .nav > .ni[data-nav="accueil"] .nico::before{-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/></svg>");
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/></svg>")}
.sidebar .nav > .ni[data-nav="recherche"] .nico::before{-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>")}
.sidebar .nav > .ni[data-nav="notifications"] .nico::before{-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a5 5 0 0 0-5 5c0 4-2 5-2 5h14s-2-1-2-5a5 5 0 0 0-5-5z'/><path d='M10.3 20a2 2 0 0 0 3.4 0'/></svg>");
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a5 5 0 0 0-5 5c0 4-2 5-2 5h14s-2-1-2-5a5 5 0 0 0-5-5z'/><path d='M10.3 20a2 2 0 0 0 3.4 0'/></svg>")}
.sidebar .ni::after{content: "";
position: absolute;
right: 14px;
top: 50%;
width: 8px;
height: 8px;
border-right: 2px solid color-mix(in oklch, var(--ink) 28%, transparent);
border-top: 2px solid color-mix(in oklch, var(--ink) 28%, transparent);
transform: translateY(-50%) rotate(45deg);
transition: border-color 0.15s}
.sidebar .ni.on{background: oklch(0.93 0.05 155 / 0.55) !important;
color: var(--brand-dark) !important;
font-weight: 600 !important}
.sidebar .ni.on::after{border-color: var(--brand-dark)}
.sidebar .nav-group-toggle{margin: 0 !important;
padding: 8px 16px 8px 48px !important;
background: var(--paper-sheet) !important;
border: none !important;
border-radius: 13px !important;
font-size: 15px !important;
font-weight: 500 !important;
color: var(--ink) !important;
letter-spacing: -0.005em;
min-height: 44px;
display: flex !important;
align-items: center;
justify-content: space-between;
text-transform: none !important;
position: relative;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 2px 8px rgba(0, 0, 0, 0.04);
transition: transform 0.15s var(--ease-snap);
cursor: pointer !important;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0.05)}
.sidebar .nav-group-toggle:active{transform: scale(0.985);
background: rgba(0, 0, 0, 0.03) !important}
.sidebar .nav-group-toggle::before{content: "";
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 7px;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 28px 28px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 28px 28px}
.sidebar .nav-group-details[data-nav-group] > .nav-group-toggle::after{content: "";
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: var(--brand-dark, var(--brand));
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
pointer-events: none}
.sidebar .nav-group-details[data-nav-group="semaine"] > .nav-group-toggle::before{background: linear-gradient(135deg, var(--brand), var(--brand-light))}
.sidebar .nav-group-details[data-nav-group="semaine"] > .nav-group-toggle::after{-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>");
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>")}
.sidebar .nav-group-details[data-nav-group="courses"] > .nav-group-toggle::before{background: linear-gradient(135deg, var(--brand), var(--brand-light, var(--brand)))}
.sidebar .nav-group-details[data-nav-group="courses"] > .nav-group-toggle::after{-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16l-2 12H6z'/><path d='M8 7V5a4 4 0 0 1 8 0v2'/></svg>");
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16l-2 12H6z'/><path d='M8 7V5a4 4 0 0 1 8 0v2'/></svg>")}
.sidebar .nav-group-details[data-nav-group="argent"] > .nav-group-toggle::before{background: linear-gradient(135deg, var(--brand), var(--brand-light, var(--brand)))}
.sidebar .nav-group-details[data-nav-group="argent"] > .nav-group-toggle::after{-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V10M10 20v-7M16 20v-4M22 20V6'/></svg>");
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V10M10 20v-7M16 20v-4M22 20V6'/></svg>")}
.sidebar .nav-group-details[data-nav-group="compte"] > .nav-group-toggle::before{background: linear-gradient(135deg, var(--brand), var(--brand-light, var(--brand)))}
.sidebar .nav-group-details[data-nav-group="compte"] > .nav-group-toggle::after{-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='6' x2='11' y2='6'/><line x1='17' y1='6' x2='20' y2='6'/><line x1='4' y1='12' x2='7' y2='12'/><line x1='13' y1='12' x2='20' y2='12'/><line x1='4' y1='18' x2='15' y2='18'/><line x1='21' y1='18' x2='20' y2='18'/><circle cx='14' cy='6' r='2'/><circle cx='10' cy='12' r='2'/><circle cx='18' cy='18' r='2'/></svg>");
mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='6' x2='11' y2='6'/><line x1='17' y1='6' x2='20' y2='6'/><line x1='4' y1='12' x2='7' y2='12'/><line x1='13' y1='12' x2='20' y2='12'/><line x1='4' y1='18' x2='15' y2='18'/><line x1='21' y1='18' x2='20' y2='18'/><circle cx='14' cy='6' r='2'/><circle cx='10' cy='12' r='2'/><circle cx='18' cy='18' r='2'/></svg>")}
.sidebar .nav-group-chevron{font-size: 19px !important;
color: rgba(0, 0, 0, 0.3) !important;
transition: transform 0.25s var(--ease-snap);
line-height: 1}
.sidebar .nav-group-toggle.is-open .nav-group-chevron{transform: rotate(90deg)}
.sidebar .nav-group-toggle.is-open{border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04)}
.sidebar .nav-group{background: var(--paper-sheet);
border-bottom-left-radius: 13px;
border-bottom-right-radius: 13px;
overflow: hidden;
margin-top: -2px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04)}
.sidebar .nav-group .ni{margin: 0 !important;
padding: 8px 16px 8px 44px !important;
background: transparent !important;
border-radius: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
font-size: 15px !important;
min-height: 40px;
display: flex !important;
align-items: center;
position: relative;
overflow: hidden}
.sidebar .nav-group .ni:last-child{border-bottom: none}
.sidebar .nav-group .ni:active{background: rgba(0, 0, 0, 0.04) !important}
.sidebar .nav-group .ni .nico{width: 20px;
height: 20px;
border-radius: 5px;
background: rgba(0, 0, 0, 0.08) !important;
box-shadow: none;
left: 14px}
.sidebar .nav-group .ni .nico::before{width: 6px;
height: 6px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
-webkit-mask-image: none !important;
mask-image: none !important}
.sidebar .nav-sec{font-size: 13px !important;
letter-spacing: 0.02em !important;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.45) !important;
padding: 12px 16px 8px !important;
margin-top: 8px !important;
font-weight: 600 !important}
.sidebar .nbadge{position: absolute !important;
right: 38px !important;
top: 50% !important;
transform: translateY(-50%) !important;
background: var(--danger) !important;
color: var(--cream-fixed) !important;
font-size: 12px !important;
font-weight: 700 !important;
min-width: 20px;
height: 20px;
border-radius: 10px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: 0 1px 3px oklch(0.44 0.14 25 / 0.32)}
.sidebar .urgence-btn{margin: 20px 16px 16px !important;
padding: 16px 16px !important;
border-radius: 14px !important;
background: linear-gradient(135deg, var(--danger), oklch(0.72 0.13 85)) !important;
color: var(--cream-fixed) !important;
font-weight: 600 !important;
font-size: 15px !important;
border: none !important;
box-shadow:
0 4px 14px oklch(0.59 0.16 143 / 0.38),
0 1px 2px oklch(0.59 0.16 143 / 0.22) !important;
display: flex !important;
align-items: center;
gap: 8px !important;
justify-content: center;
transition: transform 0.15s var(--ease-snap)}
.sidebar .urgence-btn:active{transform: scale(0.97)}
.sidebar .urgence-btn .ub-dot{width: 8px !important;
height: 8px !important;
background: var(--cream-fixed) !important;
border-radius: 50%;
box-shadow: 0 0 0 0 oklch(0.992 0.006 85 / 0.6);
animation: urgenceDotPulse 1.6s ease-in-out infinite}
@keyframes urgenceDotPulse{0%,
100%{box-shadow: 0 0 0 0 oklch(0.992 0.006 85 / 0.6)}
50%{box-shadow: 0 0 0 6px oklch(0.992 0.006 85 / 0)}
}
.sidebar .sidebar-user{margin: 0 16px calc(16px + env(safe-area-inset-bottom)) !important;
padding: 16px 16px 16px 16px !important;
background: var(--paper-sheet) !important;
border-radius: 14px !important;
border: none !important;
display: flex !important;
align-items: center;
gap: 12px !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 4px 12px rgba(0, 0, 0, 0.05)}
.sidebar .sidebar-user .uav{width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
color: var(--cream-fixed) !important;
font-weight: 700 !important;
font-size: 15px !important;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(58, 112, 82, 0.3);
flex-shrink: 0}
.sidebar .sidebar-user .uname{font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: -0.005em;
color: var(--ink) !important}
.sidebar .sidebar-user .uplan{font-size: 13px !important;
opacity: 0.6;
margin-top: 2px}
.sidebar .ni-premium{color: var(--brand-dark) !important;
font-weight: 600 !important}
@media (prefers-reduced-motion: reduce){.sidebar .urgence-btn .ub-dot{animation: none !important}
.sidebar .nav-group-toggle,
.sidebar .ni,
.sidebar .urgence-btn{transition: none !important}
}
}
@media (max-width: 768px){body,
.content-inner,
.ni,
.nav-group-toggle,
.btn-sec,
.btn-main,
.dash-meal-name,
.dash-meal-price{-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-synthesis: none}
.skip-link{display: none !important}
.flash{border-radius: 14px !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12) !important;
margin: 12px !important;
position: sticky;
top: calc(env(safe-area-inset-top) + 54px);
z-index: 80}
.topbar{background: var(--paper-sheet) !important;
border-bottom: 1px solid var(--border) !important;
padding: 0 16px !important;
padding-top: calc(6px + env(safe-area-inset-top)) !important;
min-height: calc(44px + env(safe-area-inset-top)) !important;
max-height: none !important;
gap: 8px !important}
.topbar .topbar-form:not(.topbar-form--ctx){display: none !important}
.topbar #menuGenPill{display: none !important}
.topbar .ptitle{display: none !important}
.topbar .live-pill{display: none !important}
.topbar .tb-icon-btn{width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
border-radius: 12px !important;
background: rgba(0, 0, 0, 0.05) !important;
border: none !important;
color: var(--brand-dark) !important;
padding: 0 !important}
.topbar .tb-icon-btn:active{transform: scale(0.92)}
.topbar #darkToggle{display: none !important}
.topbar .btn-main.btn-icon-mobile{height: 44px !important;
min-height: 44px !important;
width: auto !important;
min-width: 44px !important;
padding: 0 16px !important;
border-radius: 12px !important;
background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
color: var(--cream-fixed) !important;
box-shadow: 0 2px 8px rgba(58, 112, 82, 0.25) !important}
.topbar .btn-icon-mobile-text{display: none !important}
.topbar .btn-icon-mobile{width: 34px !important;
display: inline-flex !important;
align-items: center;
justify-content: center}
.topbar .btn-icon-mobile-icon{width: 16px !important;
height: 16px !important;
stroke-width: 2.5 !important}
.topbar-form{margin: 0 !important}
.tb-left{gap: 8px !important;
align-items: center !important}
.tb-right{gap: 8px !important;
align-items: center !important}
body{background: var(--paper) !important}
.content-inner{padding: 14px 16px calc(80px + env(safe-area-inset-bottom)) !important}
.btn-sec,
.btn-main{border-radius: 11px !important;
transition: transform 0.12s var(--ease-snap) !important}
.btn-sec:active,
.btn-main:active{transform: scale(0.97)}
.circulaires-pending{border-radius: 14px !important;
margin: 8px !important}
body::before{content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: env(safe-area-inset-top);
background: var(--paper-sheet);
z-index: 9999;
pointer-events: none}
.is-navigating::after{content: "";
position: fixed;
top: env(safe-area-inset-top);
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--brand), transparent);
background-size: 200% 100%;
animation: navbar-slide 1.2s ease-in-out infinite;
will-change: background-position;
z-index: 10000;
pointer-events: none}
@keyframes navbar-slide{0%{background-position: 200% 0}
100%{background-position: -200% 0}
}
.compte-pwa-hub{display: block;
padding: 0 12px 4px;
margin-bottom: 20px}
.compte-pwa-hub ~ .page-masthead{display: none !important}
.compte-pwa-hub ~ .dash-budget{display: none !important}
.cph-profile{display: flex;
align-items: center;
gap: 16px;
padding: 16px 16px;
background: linear-gradient(
135deg,
oklch(0.59 0.16 143 / 0.12) 0%,
var(--paper-sheet) 55%,
var(--paper-sheet) 100%
);
border: 1px solid oklch(0.59 0.16 143 / 0.22);
border-radius: 16px;
text-decoration: none;
color: var(--ink);
margin-bottom: 16px;
box-shadow: 0 2px 8px oklch(0.59 0.16 143 / 0.08);
transition: transform 0.12s var(--ease-snap)}
.cph-profile:active{transform: scale(0.98)}
.cph-avatar{width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
color: var(--cream-fixed);
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
font-weight: 700;
flex-shrink: 0}
.cph-profile-body{flex: 1;
min-width: 0}
.cph-name{font-size: 16px;
font-weight: 600;
color: var(--ink);
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis}
.cph-plan{font-size: 13px;
color: var(--ink-muted)}
.cph-chev{font-size: 23px;
color: var(--ink-muted);
font-weight: 300;
margin-left: 4px}
.cph-tiles{display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 1fr;
gap: 12px;
margin-bottom: 24px}
.cph-tile{display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 16px 16px;
min-width: 0;
min-height: 118px;
background: var(--paper-sheet);
border: 1px solid var(--border);
border-radius: 14px;
text-decoration: none;
color: var(--ink);
transition:
transform 0.12s var(--ease-snap),
background 0.15s ease,
border-color 0.15s ease}
.cph-tile:active{transform: scale(0.97)}
.cph-tile-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)}
.cph-tile-body{display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
width: 100%}
.cph-tile-label{font-size: 15px;
font-weight: 600;
color: var(--ink);
line-height: 1.25;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden}
.cph-tile-meta{font-size: 13px;
color: var(--ink-muted);
line-height: 1.3;
font-feature-settings: "tnum" 1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden}
.cph-tile--primary{background: var(--accent-tint);
border-color: var(--accent-tint2)}
.cph-tile--primary .cph-tile-icon{background: var(--brand);
color: var(--cream-fixed)}
.cph-tile--primary .cph-tile-label,
.cph-tile--primary .cph-tile-meta{color: var(--accent-deep)}
.cph-tile.is-flagged{border-color: oklch(0.78 0.14 85 / 0.55);
background: oklch(0.98 0.025 85)}
.cph-tile.is-flagged .cph-tile-icon{color: oklch(0.5 0.13 65)}
@media (prefers-reduced-motion: reduce){.cph-tile{transition: none}
.cph-tile:active{transform: none}
}
.cph-section{margin-bottom: 16px}
.cph-section-title{font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink-muted);
padding: 0 16px 8px}
.cph-list{background: var(--paper-sheet);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04)}
.cph-row{display: flex;
align-items: center;
gap: 12px;
padding: 16px 16px;
min-height: 48px;
text-decoration: none;
color: var(--ink);
border-bottom: 1px solid var(--border);
transition: background 0.1s}
.cph-row:last-child{border-bottom: none}
.cph-row:active{background: color-mix(in oklch, var(--brand) 5%, transparent)}
.cph-row-label{flex: 1;
font-size: 16px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.1px}
.cph-row-chev{font-size: 19px;
color: var(--ink-fade);
font-weight: 300}
.cph-logout-form{margin: 20px 0 12px}
.cph-logout{width: 100%;
padding: 16px;
background: var(--paper-sheet);
border: none;
border-radius: 14px;
color: var(--danger);
font-size: 16px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 1px 2px oklch(0.22 0.02 110 / 0.06);
transition: transform 0.12s var(--ease-snap)}
.cph-logout:active{transform: scale(0.98);
background: var(--danger-tint)}
.cph-legal{display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 12px 0 4px;
font-size: 13px;
color: var(--ink-muted)}
.cph-legal a{color: var(--ink-muted);
text-decoration: none;
padding: 4px 8px;
min-height: 44px;
display: inline-flex;
align-items: center}
@media (hover: hover) and (pointer: fine){.cph-legal a:hover{text-decoration: underline}
}
.cph-version{text-align: center;
font-size: 13px;
color: var(--ink-muted);
padding: 8px 0 16px}
.cph-version-num{font-variant-numeric: tabular-nums;
opacity: 0.65;
margin-inline-start: 6px;
user-select: all}
[data-theme="dark"] .cph-profile,
[data-theme="dark"] .cph-shortcut,
[data-theme="dark"] .cph-list,
[data-theme="dark"] .cph-logout{background: oklch(0.22 0.01 85)}
[data-theme="dark"] .cph-row{border-bottom-color: rgba(255, 255, 255, 0.06)}
[data-theme="dark"] .cph-row:active{background: rgba(255, 255, 255, 0.04)}
[data-theme="dark"] .cph-logout:active{background: oklch(0.26 0.02 30)}
[data-theme="dark"] .cph-shortcut-lead{color: var(--brand-light)}
.cph-row:focus-visible,
.cph-shortcut:focus-visible,
.cph-profile:focus-visible,
.cph-logout:focus-visible,
.dash-hero-action:focus-visible,
.mtab:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px;
border-radius: 12px}
input:focus-visible,
textarea:focus-visible,
select:focus-visible{outline: 2px solid var(--brand);
outline-offset: 2px}
@view-transition{navigation: auto}
.mobile-tabbar{view-transition-name: app-tabbar}
.topbar{view-transition-name: app-topbar}
::view-transition-old(root),
::view-transition-new(root){animation-duration: 0.18s;
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1)}
::view-transition-old(app-tabbar),
::view-transition-new(app-tabbar),
::view-transition-old(app-topbar),
::view-transition-new(app-topbar){animation: none}
@media (prefers-reduced-motion: reduce){::view-transition-old(root),
::view-transition-new(root){animation: none}
}
}
.ios-a2hs{position: fixed;
left: 12px;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom));
z-index: 95;
background: var(--paper-sheet, #faf6ec);
border: 1px solid oklch(0.59 0.16 143 / 0.18);
border-radius: 14px;
box-shadow: 0 12px 40px oklch(0.22 0.02 110 / 0.18);
padding: 12px 16px;
animation: iosA2hsUp 0.38s var(--ease-snap) both}
[data-theme="dark"] .ios-a2hs{background: oklch(0.28 0.015 110);
border-color: oklch(0.72 0.14 143 / 0.28)}
.ios-a2hs-inner{display: flex;
align-items: center;
gap: 12px}
.ios-a2hs-icon{flex: 0 0 40px;
border-radius: 10px;
box-shadow: 0 2px 6px oklch(0.22 0.02 110 / 0.18)}
.ios-a2hs-text{flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
font-size: 13px;
line-height: 1.35;
color: var(--ink, #222)}
[data-theme="dark"] .ios-a2hs-text{color: var(--paper-sheet, #faf6ec)}
.ios-a2hs-text strong{font-size: 15px;
font-weight: 600}
.ios-a2hs-text span:last-child{opacity: 0.78}
.ios-a2hs-close{flex: 0 0 44px;
min-width: 44px;
min-height: 44px;
background: transparent;
border: 0;
font-size: 19px;
line-height: 1;
color: var(--ink-soft, #666);
cursor: pointer;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation}
@media (hover: hover) and (pointer: fine){.ios-a2hs-close:hover,
.ios-a2hs-close:focus-visible{background: oklch(0.22 0.02 110 / 0.06);
outline: none}
}
@media (hover: hover) and (pointer: fine){[data-theme="dark"] .ios-a2hs-close:hover,
[data-theme="dark"] .ios-a2hs-close:focus-visible{background: oklch(1 0 0 / 0.06)}
}
@keyframes iosA2hsUp{from{transform: translateY(110%);
opacity: 0}
to{transform: translateY(0);
opacity: 1}
}
@media (prefers-reduced-motion: reduce){.ios-a2hs{animation: none}
}
@media (pointer: coarse){.pill,
.chk,
.tb-icon-btn,
.sidebar-toggle,
.btn-sec,
.btn-main,
.nav-btn-sec,
.nav-btn-main,
.cph-shortcut,
.compte-quicklink,
.dash-hero-action,
.dash-tab,
.dash-section-action,
button[type="submit"],
button[type="button"]:not(.celebration-toast-close):not(.nav-burger span){min-height: 44px;
min-width: 44px}
.tb-icon-btn{width: 44px !important;
height: 44px !important}
.pill{padding: 12px 16px !important;
min-height: 44px}
.chk{padding: 12px 8px !important;
min-height: 44px}
.dash-tab{padding: 16px 16px !important;
min-height: 48px}
.compte-quicklink,
.dash-hero-action{padding: 16px 16px !important}
}
@media (max-width: 640px){.dash-hero-meta{color: var(--ink-muted) !important}
}
@media (pointer: coarse){.tb-icon-btn:active{transform: none !important;
background: var(--accent-tint) !important}
.sidebar-toggle:active{transform: none !important;
background: var(--accent-tint) !important}
}
@media (pointer: coarse){.ni{min-height: 44px;
padding: 8px 20px !important}
.mtab{min-height: 44px}
.cph-shortcut{min-height: 56px;
min-width: 56px}
}
.form-group.is-invalid input,
.form-group.is-invalid textarea,
.form-group.is-invalid select,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"]{border-color: var(--danger) !important;
background: color-mix(in oklch, var(--danger-tint) 60%, var(--paper-sheet));
box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 14%, transparent)}
.form-group.is-invalid input:focus,
.form-group.is-invalid textarea:focus,
.form-group.is-invalid select:focus,
input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus{outline: none;
border-color: var(--danger-deep) !important;
box-shadow: 0 0 0 4px color-mix(in oklch, var(--danger) 22%, transparent)}
.form-error,
.field-error,
.invalid-feedback{display: block;
margin-top: 8px;
font-size: 13px;
color: var(--danger-deep);
font-weight: 500}
@media (max-width: 768px){label,
.form-label,
.dash-section-eyebrow,
.page-masthead-eyebrow{font-size: max(12px, 1em) !important}
label{font-size: 13px !important}
}
.flash-error{color: var(--danger-deep) !important}
.flash-success{color: var(--accent-deep) !important}
@media (prefers-reduced-motion: reduce){.mtab:active,
.btn-sec:active,
.btn-main:active,
.cph-shortcut:active,
.tb-icon-btn:active,
.sidebar-toggle:active{transform: none !important}
}
@media (max-width: 480px){.rmeta{gap: 8px 16px}
.rm{font-size: 13px;
line-height: 1.4}
}
@media (max-width: 768px){.recipe-body form,
.recipe-body .btn-main.btn-full,
.recipe-body > .btn-main{margin-top: 20px !important}
.recipe-body form + *,
.recipe-body .btn-main + p{margin-top: 8px}
.recipe-body .chd[style*="margin:24px 0"]{margin: 28px 0 8px !important}
}
@media (max-width: 640px){.ing-row{padding: 12px 0 !important;
gap: 8px !important}
.ing-row > span:first-child{font-size: 15px;
font-weight: 500;
line-height: 1.35}
.ing-row .si-pct,
.ing-row .pantry-tag,
.ing-row .expire-tag{font-size: 12px !important;
padding: 2px 8px !important}
}
@media (max-width: 480px){.recipe-body div[style*="grid-template-columns"][style*="minmax(100px"]{grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important}
}
.ob-choices-grid{display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 32px}
@media (max-width: 480px){.ob-choices-grid{grid-template-columns: 1fr;
gap: 8px}
}
.ob-choice{min-height: 72px}
@media (max-width: 640px){.recipe-body .btn-main.btn-full,
.recipe-body > form .btn-main{width: 100%;
padding: 16px !important;
font-size: 15px !important;
font-weight: 700}
}
@media (max-width: 768px){.sidebar{width: 100vw !important;
max-width: 100vw !important;
background: var(--paper) !important;
background-color: var(--paper) !important;
box-shadow: none !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important}
.sidebar > .logo-zone,
.sidebar > .weather-strip,
.sidebar > .urgence-btn,
.sidebar > .sidebar-user{flex-shrink: 0 !important}
.sidebar .nav{flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch}
.sidebar-close-btn{width: 44px !important;
height: 44px !important;
background: transparent !important;
color: var(--ink) !important;
font-size: 23px !important;
font-weight: 300 !important}
.sidebar-close-btn:active{background: oklch(0 0 0 / 0.04) !important}
.sidebar .logo-zone{padding: calc(18px + env(safe-area-inset-top)) 24px 18px !important}
.sidebar-title-lg{font-size: 19px !important;
padding-top: 2px !important}
.sidebar .weather-strip{margin: 0 0 4px !important;
padding: 8px 24px 12px !important;
background: var(--accent-tint) !important;
border-radius: 0 !important;
border-top: 1px solid var(--border) !important;
border-bottom: 1px solid var(--border) !important;
box-shadow: none !important}
.sidebar .weather-strip > div{display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 8px}
.sidebar .w-temp{flex: 0 0 auto}
.sidebar .w-desc{flex: 0 0 auto;
font-size: 13px !important;
margin: 0 !important}
.sidebar .w-desc::before{content: "·";
margin-right: 8px;
color: var(--ink-fade)}
.sidebar .w-ai{flex: 1 0 100%;
margin-top: 2px !important;
font-size: 13px !important;
line-height: 1.4 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden}
.sidebar .nav{padding: 0 !important;
gap: 0 !important}
.sidebar .nav > .nav-group-toggle,
.sidebar .nav > .nav-sec{margin-top: 0 !important}
.sidebar .nav > .nav-group + .ni{margin-top: 0 !important;
border-radius: 0 !important}
.sidebar .nav > .ni,
.sidebar .nav-group-toggle{background: transparent !important;
border-radius: 0 !important;
border-bottom: 1px solid var(--border) !important;
box-shadow: none !important;
padding: 16px 24px 16px 68px !important;
min-height: 56px !important;
font-size: 16px !important;
font-weight: 500 !important;
letter-spacing: -0.01em !important}
.sidebar .nav > .ni:active,
.sidebar .nav-group-toggle:active{background: oklch(0 0 0 / 0.03) !important;
transform: none !important}
.sidebar .nav > .ni:first-child,
.sidebar .nav > .nav-group-toggle + .ni,
.sidebar .nav > .ni:has(+ .nav-group-toggle),
.sidebar .nav > .ni:has(+ .nav-sec),
.sidebar .nav > .ni:last-child{border-radius: 0 !important}
.sidebar .ni .nico,
.sidebar .nav-group-toggle::before{width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
background: var(--accent-tint) !important;
background-image: none !important;
box-shadow: none !important;
left: 24px !important}
.sidebar .ni .nico::before,
.sidebar .nav-group-toggle::after{background: var(--accent-deep) !important;
width: 18px !important;
height: 18px !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
left: 31px !important}
.sidebar .nav > .ni[data-nav] .nico,
.sidebar .nav-group-details[data-nav-group="semaine"] > .nav-group-toggle::before,
.sidebar .nav-group-details[data-nav-group="courses"] > .nav-group-toggle::before,
.sidebar .nav-group-details[data-nav-group="argent"] > .nav-group-toggle::before,
.sidebar .nav-group-details[data-nav-group="compte"] > .nav-group-toggle::before{background: var(--accent-tint) !important;
background-image: none !important;
box-shadow: none !important}
.sidebar .ni.on{background: transparent !important;
color: var(--accent-deep) !important;
font-weight: 700 !important}
.sidebar .ni.on .nico{background: var(--accent) !important}
.sidebar .ni.on .nico::before{background: var(--cream-fixed) !important}
.sidebar .ni.on::after{border-color: var(--accent-deep) !important}
.sidebar .ni::after{border-right-color: var(--ink-muted) !important;
border-top-color: var(--ink-muted) !important}
.sidebar .nav-group{background: oklch(0 0 0 / 0.015) !important;
border-radius: 0 !important;
box-shadow: none !important;
margin-top: 0 !important;
overflow: hidden}
.sidebar .nav-group .ni{padding: 12px 24px 12px 68px !important;
background: transparent !important;
border-bottom: 1px solid var(--border) !important;
border-radius: 0 !important;
font-size: 15px !important;
min-height: 48px !important}
.sidebar .nav-group .ni:last-child{border-bottom: none !important}
.sidebar .nav-group-toggle.is-open{border-radius: 0 !important;
box-shadow: none !important}
.sidebar .urgence-btn{margin: 24px 24px 12px !important;
padding: 16px 20px !important;
border-radius: 14px !important;
background: var(--accent) !important;
background-image: none !important;
color: var(--cream-fixed) !important;
box-shadow: none !important;
font-weight: 600 !important;
font-size: 15px !important;
justify-content: flex-start !important;
gap: 12px !important}
.sidebar .urgence-btn:active{background: var(--accent-deep) !important;
transform: scale(0.98)}
.sidebar .sidebar-user{margin: 0 24px calc(20px + env(safe-area-inset-bottom)) !important;
padding: 16px 0 !important;
background: transparent !important;
border-top: 1px solid var(--border) !important;
border-radius: 0 !important;
box-shadow: none !important;
gap: 16px !important}
.sidebar .sidebar-user .uav{width: 38px !important;
height: 38px !important;
background: var(--accent) !important;
background-image: none !important;
box-shadow: none !important}
.sidebar .sidebar-user .uname{font-family: var(--font-display) !important;
font-size: 16px !important;
font-weight: 600 !important;
color: var(--ink) !important}
.sidebar .sidebar-user .uplan{font-size: 13px !important;
color: var(--ink-muted) !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin-top: 2px !important}
.pwa-install-btn{background: var(--accent) !important;
background-image: none !important;
box-shadow: none !important}
[data-theme="dark"] .sidebar{background: var(--paper) !important}
[data-theme="dark"] .sidebar .weather-strip{background: oklch(0.28 0.04 143) !important;
border-color: var(--border) !important}
[data-theme="dark"] .sidebar .nav-group{background: oklch(1 0 0 / 0.03) !important}
}