/* Approved original Marche SVGs keep their colors at every size. */
:root { --brand-logo: url('../img/marche/logo.svg'); --dish-icon: url('../img/marche/icones/plat-bol.svg'); }
@media (prefers-color-scheme: dark) { :root { --brand-logo: url('../img/marche/logo-sombre.svg'); } }
[data-dish-type="dessert"] { --dish-icon: url('../img/marche/icones/plat-dessert.svg'); }
[data-dish-type="soupe"] { --dish-icon: url('../img/marche/icones/plat-soupe.svg'); }
[data-dish-type="pates"] { --dish-icon: url('../img/marche/icones/plat-pates.svg'); }
[data-dish-type="salade"] { --dish-icon: url('../img/marche/icones/plat-salade.svg'); }
[data-dish-type="poisson"] { --dish-icon: url('../img/marche/icones/plat-poisson.svg'); }
[data-dish-type="viande"] { --dish-icon: url('../img/marche/icones/plat-viande.svg'); }
[data-dish-type="vegetarien"] { --dish-icon: url('../img/marche/icones/plat-vegetarien.svg'); }

.recipe-card-mark::before, .recipe-heading h1::before, .meal-content h3::before { background: var(--dish-icon) center / contain no-repeat; }
.recipe-card-mark { background: var(--bg); }
.recipe-card-mark::before { width: 48px; height: 48px; }
.brand { flex-shrink: 0; letter-spacing: normal; }
.brand-logo { display: block; width: 145px; height: 37px; }
.brand-logo img { display: block; width: 100%; height: 100%; }
.app-nav .shell { min-height: 72px; }
.app-nav a { flex-direction: column; gap: 2px; padding: 4px; }
.app-nav a::before { content: ""; width: 24px; height: 24px; background: var(--nav-icon) center / contain no-repeat; }
.app-nav a[href="carnet-recettes.html"] { --nav-icon: url('../img/marche/icones/onglet-carnet.svg'); }
.app-nav a[href="menu-semaine.html"] { --nav-icon: url('../img/marche/icones/onglet-semaine.svg'); }
.app-nav a[href="liste-courses.html"] { --nav-icon: url('../img/marche/icones/onglet-courses.svg'); }
.app-nav a[href="historique-repas.html"] { --nav-icon: url('../img/marche/icones/onglet-repas.svg'); }

.actionbar { inset-block-end: calc(73px + env(safe-area-inset-bottom, 0px)); }
.shopping-aisle h2 { --aisle-icon: url('../img/marche/icones/rayon-epicerie.svg'); }
.shopping-aisle h2::before { display: none; }
.shopping-aisle h2::after { position: static; order: -1; flex-shrink: 0; width: 28px; height: 28px; background: var(--aisle-icon) center / contain no-repeat; }
.aisle-produce h2 { --aisle-icon: url('../img/marche/icones/rayon-fruits-legumes.svg'); }
.aisle-meat h2 { --aisle-icon: url('../img/marche/icones/rayon-boucherie.svg'); }
.aisle-dairy h2 { --aisle-icon: url('../img/marche/icones/rayon-cremerie.svg'); }
.aisle-fish h2 { --aisle-icon: url('../img/marche/icones/rayon-poissonnerie.svg'); }
.aisle-frozen h2 { --aisle-icon: url('../img/marche/icones/rayon-surgeles.svg'); }
.aisle-bakery h2 { --aisle-icon: url('../img/marche/icones/rayon-boulangerie.svg'); }
.aisle-drinks h2 { --aisle-icon: url('../img/marche/icones/rayon-boissons.svg'); }

.button[href="recette-saisie.html"], #add-ingredient, #add-step, #add-meal, #open-meal { --action-icon: url('../img/marche/icones/action-ajouter.svg'); }
#recipe-edit-link, .slot-actions [aria-label^="Modifier"] { --action-icon: url('../img/marche/icones/action-modifier.svg'); }
#save-recipe, #save-menu, #save-meal, #confirm-eaten, .cooking-check[aria-pressed="true"] { --action-icon: url('../img/marche/icones/action-coche.svg'); }
.button[href="recette-saisie.html"]::before, #add-ingredient::before, #add-step::before, #add-meal::before, #open-meal::before,
#recipe-edit-link::before, .slot-actions [aria-label^="Modifier"]::before,
#save-recipe::before, #save-menu::before, #save-meal::before, #confirm-eaten::before, .cooking-check[aria-pressed="true"]::before { content: ""; width: 24px; height: 24px; flex-shrink: 0; background: var(--action-icon) center / contain no-repeat; }
.shopping-check input:checked, .ingredient-check input:checked { appearance: none; background: url('../img/marche/icones/action-coche.svg') center / contain no-repeat; border: 0; }
.cooking-steps > .is-done::before { content: ""; background: url('../img/marche/icones/action-coche.svg') center / contain no-repeat; }
.family-access .eyebrow::before { content: ""; display: block; width: 176px; height: 45px; margin-bottom: 20px; background: var(--brand-logo) center / contain no-repeat; }
@media (forced-colors: active) {
  .shopping-check input:checked, .ingredient-check input:checked { appearance: auto; background: none; }
  .cooking-steps > .is-done::before { content: "\2713"; background: Canvas; color: CanvasText; }
  .button::before, #recipe-edit-link::before { forced-color-adjust: none; }
}
.shopping-meter { height: 8px; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.shopping-meter span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(var(--progress, 0)); transform-origin: left; border-radius: inherit; }
.shopping-progress progress { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.empty-scene { text-align: center; background: var(--surface); border: 1px solid var(--divider); padding: 24px; border-radius: var(--radius-lg); margin-block: 24px; }
.empty-scene p { max-width: 42ch; margin-inline: auto; color: var(--ink-muted); }
.empty-scene::before, #empty-state::before, #history-empty::before { content: ""; display: block; width: 180px; height: 144px; margin: 0 auto 16px; background: var(--scene) center / contain no-repeat; }
#cookbook-empty { --scene: url('../img/marche/vide-carnet.svg'); }
#week-empty { --scene: url('../img/marche/vide-semaine.svg'); }
#empty-state { --scene: url('../img/marche/vide-courses.svg'); }
#history-empty { --scene: url('../img/marche/vide-repas.svg'); }
#empty-state .empty-mark { display: none; }
#week-empty { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; text-align: left; padding: 16px; }
#week-empty::before { width: 96px; height: 96px; grid-row: 1 / 3; margin: 0; }
#week-empty h2 { font-size: 19px; line-height: 26px; margin-bottom: 4px; align-self: end; }
#week-empty p { font-size: 14px; margin: 0; }
.history-art { display: none; }
.family-access-mark { width: 180px; height: 124px; margin-bottom: 20px; border-radius: 0; background: transparent; }
.family-access-mark::before { width: 100%; height: 100%; -webkit-mask: none; mask: none; background: url('../img/marche/accueil-code.svg') center / contain no-repeat; }

@media (prefers-reduced-motion: no-preference) {
  .recipe-card, .week-day .meal-content { animation: card-appear 180ms ease-out both; }
  .shopping-row.is-checked input { animation: check-pop 200ms ease-out; }
  .shopping-meter span { transition: transform 200ms ease-out; }
  .app-nav a::before { transition: transform 150ms ease-out; }
  .app-nav a:hover::before { transform: translateY(-2px); }
}
@keyframes card-appear { from { transform: translateY(6px); } to { transform: translateY(0); } }
@keyframes check-pop { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }

@media (min-width: 768px) {
  .shell, .cookbook-page, .shopping-page { width: min(100%, 1232px); max-width: 1232px; padding-inline: 24px; }
  .cookbook-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .cookbook-list > li + li { margin: 0; }
  .recipe-card, .recipe-card-link { height: 100%; }
  .cookbook-page .page-heading { position: relative; min-height: 200px; padding: 24px 240px 24px 24px; border: 1px solid var(--divider); border-radius: var(--radius-lg); background: var(--surface); }
  .cookbook-page .page-heading::after { content: ""; position: absolute; top: 16px; right: 24px; width: 200px; height: 166px; background: url('../img/marche/vide-carnet.svg') center / contain no-repeat; pointer-events: none; }
  .shopping-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
  .shopping-aisle { min-width: 0; margin-top: 0; }
  .shopping-aisle-heading { min-height: 44px; }
  .shopping-aisle-heading h2 { text-transform: none; letter-spacing: 0; }
  .recipe-columns { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 32px; }
  .recipe-columns > section:first-child { position: sticky; top: 24px; }
  #recipe-form { max-width: 900px; margin-inline: auto; }
}
@media (min-width: 1100px) {
  .topbar .shell { min-height: 88px; }
  .app-nav { position: absolute; inset: 12px auto auto 50%; transform: translateX(-50%); width: min(50%, 620px); border: 0; background: transparent; }
  .app-nav .shell { width: 100%; padding: 0; }
  .app-nav a { flex-direction: row; gap: 8px; }
  .actionbar { inset-block-end: 0; }
  .page { padding-block: 32px 140px; }
  html { scroll-padding-block: 24px 132px; }
  .cookbook-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shopping-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recipe-card-link { grid-template-columns: 64px minmax(0, 1fr) 20px; gap: 12px; }
  .recipe-card h3 { font-size: 24px; }
  .cookbook-page .page-heading { padding: 32px 340px 32px 32px; min-height: 224px; }
  .cookbook-page .page-heading::after { width: 280px; height: 200px; top: 12px; right: 32px; }
  .cookbook-list > li:only-child { grid-column: 1 / -1; }
  .cookbook-list > li:only-child .recipe-card-link { grid-template-columns: 96px minmax(0, 1fr) 24px; gap: 24px; padding: 24px; }
  .cookbook-list > li:only-child .recipe-card-mark { width: 96px; height: 96px; }
  .cookbook-list > li:only-child h3 { font-size: 32px; line-height: 38px; }
  .week-page { position: relative; }
  .week-page .page-heading { padding-block: 0; padding-right: 420px; min-height: 128px; }
  .week-page .intro { max-width: 650px; margin-bottom: 24px; }
  .week-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 24px; margin-bottom: 24px; }
  .week-picker { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: start; }
  #week-title { grid-column: 1; margin: 0; align-self: end; }
  #menu-status { grid-column: 1; margin: 8px 0 0; }
  #menu-retry { grid-column: 1; justify-self: start; }
  .week-nav { display: none; }
  .week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
  .week-grid .week-day { display: grid; grid-template-rows: 72px minmax(160px, 1fr) minmax(160px, 1fr); border: 0; border-radius: 0; padding: 0; box-shadow: none; min-width: 0; }
  .week-day + .week-day { border-left: 1px solid var(--divider); }
  .week-day .section-head { display: block; padding: 12px; margin: 0; background: var(--bg); }
  .week-day .section-head h2 { font-size: 17px; line-height: 24px; }
  .week-day .section-head time { font-size: 13px; }
  .week-day .meal { display: block; min-width: 0; padding: 12px; margin: 0; }
  .week-day .meal-label { display: block; margin-bottom: 12px; font-weight: 700; }
  .week-day .meal h3 { font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
  .week-day .meal-content h3::before { display: block; margin: 0 0 8px; }
  .week-day .slot-actions { display: grid; }
  .week-day .slot-actions .button { width: 100%; padding-inline: 8px; }
  .week-day .meal-content a { font-size: 14px; }
  #week-empty { position: absolute; top: 24px; right: 24px; width: 390px; margin: 0; padding: 8px 12px; grid-template-columns: 112px minmax(0, 1fr); }
  #week-empty::before { width: 112px; }
  .history-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .history-records { min-width: 0; }
  .history-art { display: block; position: sticky; top: 32px; min-height: 460px; background: url('../img/marche/vide-repas.svg') center / 90% auto no-repeat; }
  .history-layout:has(#history-empty:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .history-layout:has(#history-empty:not([hidden])) .history-art { display: none; }
  .family-access-panel { width: min(100%, 1000px); display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 64px; }
  .family-access-panel > :not(.family-access-mark) { grid-column: 2; }
  .family-access-mark { grid-column: 1; grid-row: 1 / 8; width: 100%; height: 400px; align-self: center; margin: 0; }
}
@media print {
  .app-nav, .history-art, .empty-scene::before, #empty-state::before, #history-empty::before { display: none; }
  .recipe-columns > section:first-child { position: static; }
  .recipe-card, .week-day .meal-content, .shopping-row.is-checked input { animation: none; }
}