.fonctions-entete{max-width: 76rem}
.fonctions-entete .ui-titre-page{max-width: 25ch; font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); line-height: 1.12}
.fonctions-sommaire{display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6); margin-top: var(--e-6)}
.fonctions-sommaire a{display: inline-flex; align-items: center; min-height: 44px; color: var(--brand); text-decoration: underline; text-underline-offset: .25em; font-weight: 600}
.fonctions section[id], .fonctions details[id]{scroll-margin-top: 6rem}
.fonctions p{max-width: 65ch}
.fonctions-repere{color: var(--brand); font-weight: 600; font-size: .9375rem}
.fonctions-repas{display: grid; gap: var(--e-6); padding: var(--e-6) 0 48px}
.fonctions-repas-texte{display: grid; align-content: center; justify-items: start; gap: var(--e-4); min-width: 0}
.fonctions-repas-texte p:not(.fonctions-repere), .fonctions-budget p:not(.fonctions-repere){color: var(--text-secondary)}
.fonctions-photo{min-width: 0; margin: 0}
.fonctions-photo .ui-photo{width: 100%; height: auto; max-height: none; border-radius: var(--r-tile)}
.fonctions-photo figcaption{display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-3); margin-top: var(--e-3)}
.fonctions-photo figcaption .fonctions-repere, .fonctions-photo small{grid-column: 1 / -1}
.fonctions-photo strong{font-size: 1.125rem}
.fonctions-photo small{color: var(--text-secondary); font-size: .875rem}
.fonctions-carnet{padding-top: var(--e-4); border-top: 1px solid var(--border)}
.fonctions-repas-liste{display: grid; gap: var(--e-4); padding: var(--e-4) 0}
.fonctions-repas-liste li{display: flex; align-items: center; gap: var(--e-3); min-width: 0}
.fonctions-repas-liste .ui-photo{width: 80px; height: 64px; flex: none; object-fit: cover}
.fonctions-repas-liste li > span{display: grid; gap: var(--e-1)}
.fonctions-repas-liste li > span > span{color: var(--text-secondary); font-size: .9375rem}
.fonctions-credit{display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; color: var(--brand); text-decoration: underline}
.fonctions-achats{display: grid; gap: var(--e-6); border-top: 1px solid var(--border); padding: 48px 0}
.fonctions-achats-entete, .fonctions-achats-suite{display: grid; align-content: start; gap: var(--e-3)}
.fonctions-achats-suite h3{font-size: 1.125rem}
.fonctions-achats-suite h3:not(:first-child){margin-top: var(--e-4)}
.fonctions-achats-entete > p:last-child, .fonctions-achats-suite p{color: var(--text-secondary)}
.fonctions-liste{margin: 0; padding: var(--e-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); min-width: 0}
.fonctions-liste figcaption{font-size: 1.125rem; font-weight: 700; margin-bottom: var(--e-6)}
.fonctions-rayon + .fonctions-rayon{margin-top: var(--e-6)}
.fonctions-rayon h3{font-size: .9375rem; font-weight: 600; color: var(--brand); margin-bottom: var(--e-2)}
.fonctions-rayon li{display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-1) var(--e-4); padding: var(--e-3) 0; border-bottom: 1px solid var(--border)}
.fonctions-prix-inconnu{color: var(--text-secondary); font-size: .875rem}
.fonctions-note{color: var(--text-secondary); font-size: .875rem; margin-top: var(--e-6)}
.fonctions-budget{display: grid; gap: var(--e-6); border-top: 1px solid var(--border); padding: 48px 0}
.fonctions-budget > div{display: grid; gap: var(--e-4); align-content: start}
.fonctions-lecture{margin: 0; display: grid; gap: var(--e-6); align-content: start}
.fonctions-lecture > div{padding-bottom: var(--e-4); border-bottom: 1px solid var(--border)}
.fonctions-lecture dt{font-weight: 700; font-size: 1.125rem}
.fonctions-lecture dd{margin: var(--e-2) 0 0; color: var(--text-secondary)}
.fonctions-outils{border-top: 1px solid var(--border); padding: 48px 0}
.fonctions-reception{display: grid; gap: var(--e-6); padding: var(--e-6); background: var(--highlight); color: var(--text); border-radius: var(--r-tile)}
.fonctions-reception > div{display: grid; gap: var(--e-3); align-content: start}
.fonctions-reception-action{justify-items: start}
.fonctions-reception .fonctions-repere{color: var(--text)}
@media (min-width: 900px){.fonctions-repas{grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--e-8) 48px}
.fonctions-carnet{grid-column: 1 / -1}
.fonctions-repas-liste{grid-template-columns: repeat(3, minmax(0, 1fr))}
.fonctions-achats{grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); column-gap: 64px}
.fonctions-achats-entete{grid-column: 1 / -1; max-width: 42rem}
.fonctions-achats-suite{padding-top: var(--e-6)}
.fonctions-budget{grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px}
.fonctions-reception{grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); padding: var(--e-8); gap: 48px}
.fonctions-reception-action{align-content: center}
}