/* ========================================================================== HORUS — Layouts : header, footer, grilles principales Applicable aux layouts public et admin. ========================================================================== */ /* ── Header public ─────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in oklab, var(--color-bg) 92%, transparent); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--color-border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-4); } .site-header__brand { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md); letter-spacing: .15em; text-decoration: none; color: var(--color-fg); } .site-header__emblem { color: var(--color-bronze); display: inline-flex; } .site-header__wordmark { font-size: var(--fs-md); } .site-header__lang:hover { background: var(--color-sand); } .site-header__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-pill); transition: background var(--dur-fast) var(--ease-out); color: var(--color-fg); } .site-header__icon:hover { background: var(--color-sand); } .site-header__cart { position: relative; } .site-header__cart-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--color-bronze); color: var(--color-ink); border-radius: var(--radius-pill); font-size: 11px; font-weight: var(--fw-bold); display: inline-flex; align-items: center; justify-content: center; transition: transform var(--dur-base) var(--ease-out); } .site-header__cart-badge[hidden] { display: none; } .site-header__cart-badge.is-bump { animation: cart-badge-bump 500ms var(--ease-out); } @keyframes cart-badge-bump { 0%,100% { transform: scale(1); } 35% { transform: scale(1.4); } } .category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .site-header__nav ul { list-style: none; display: flex; align-items: center; /* alignement vertical strict — Boutique ▾ / Journal / À propos sur même baseline */ gap: var(--s-5); margin: 0; padding: 0; } .site-header__nav li { display: inline-flex; align-items: center; } .site-header__nav a { text-decoration: none; font-weight: var(--fw-medium); display: inline-flex; align-items: center; line-height: 1; padding: 6px 0; color: var(--color-fg); } .site-header__actions { display: flex; align-items: center; gap: var(--s-3); } /* ── Menu mobile (burger + drawer) ─────────────────────────────────

natif : toggle via summary, fermeture clavier (Escape via label), aucun JS. Le drawer s'ancre en absolute sous le header (sticky parent). */ .site-header__menu { display: none; position: relative; } .site-header__burger { cursor: pointer; list-style: none; } .site-header__burger::-webkit-details-marker { display: none; } .site-header__burger::marker { content: ""; } .site-header__menu[open] > .site-header__burger { background: var(--color-sand); } .site-header__menu .burger-icon-close { display: none; } .site-header__menu[open] .burger-icon-open { display: none; } .site-header__menu[open] .burger-icon-close { display: block; } /* Backdrop blur sur le CONTENU de la page (sous le header sticky) quand le drawer est ouvert. Le ::before est porté par via :has() pour sortir du stacking context du header — ainsi le header reste net (son propre glass-effect prime) et seul le contenu derrière est flouté + voilé. pointer-events:none : laisse le clic burger fermer le menu naturellement. */ body:has(.site-header__menu[open])::before { content: ""; position: fixed; inset: 0; z-index: calc(var(--z-sticky) - 1); /* sous le header sticky */ pointer-events: none; background: color-mix(in oklab, var(--color-ink) 28%, transparent); backdrop-filter: blur(8px) saturate(110%); -webkit-backdrop-filter: blur(8px) saturate(110%); animation: drawer-backdrop 220ms var(--ease-out); } @keyframes drawer-backdrop { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { body:has(.site-header__menu[open])::before { animation: none; } } .site-header__drawer { position: absolute; top: calc(100% + var(--s-3)); right: 0; min-width: 240px; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--s-3); box-shadow: var(--shadow-cinematic); animation: drawer-slide 200ms var(--ease-out); z-index: var(--z-dropdown); } .site-header__drawer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-1); } .site-header__drawer a { display: block; padding: var(--s-3) var(--s-4); text-decoration: none; font-weight: var(--fw-medium); border-radius: var(--radius-sm); color: var(--color-fg); } .site-header__drawer a:hover { background: var(--color-sand); } @keyframes drawer-slide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Breakpoint : nav desktop jusqu'à 768px, burger en dessous */ @media (max-width: 768px) { .site-header__nav { display: none; } .site-header__menu { display: block; } /* Mobile : on cache le switcher de langue (resté dispo dans drawer) */ .site-header__lang { display: none; } /* Mobile : œil d'Horus seul, sans le wordmark "HORUS" — moins encombrant et signature emblématique plus forte. Œil agrandi pour rester lisible. */ .site-header__wordmark { display: none; } .site-header__emblem img { width: 32px; height: 26px; } .site-header__brand { gap: 0; padding: 4px 0; } } /* ═══ Mega-menu Boutique — refonte UX/CRO 2026-04-25 ═══ Pattern

natif : a11y intégré (Tab, Enter, Space, Escape via summary). Desktop : open au clic, fermeture au clic ailleurs (CSS-only via :not(:focus-within)). */ .site-header__has-mega { position: static; } /* le panel se positionne par rapport au header */ .mega { position: static; } .mega summary { list-style: none; cursor: pointer; } .mega summary::-webkit-details-marker { display: none; } .mega summary::marker { content: ""; } .mega__trigger { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-medium); font-family: var(--font-body); font-size: 1rem; line-height: 1; padding: 6px 0; color: var(--color-fg); } .mega__chevron { transition: transform var(--dur-fast) var(--ease-out); display: inline-block; } .mega[open] .mega__chevron { transform: rotate(180deg); } .mega__panel { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg-elevated); border-top: 1px solid color-mix(in oklab, var(--color-border) 60%, transparent); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-cinematic); z-index: var(--z-dropdown); animation: mega-slide 200ms var(--ease-out); } @keyframes mega-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Layout simple et robuste : cats seules, centrées, en 3 colonnes propres. Pas de feature card (source de chevauchement quand le panel est étroit). La promo livraison est rappelée via la chips bar et la home, pas ici. */ .mega__inner { padding-block: var(--s-6) var(--s-6); max-width: 880px; margin: 0 auto; } .mega__cats { min-width: 0; } .mega__eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 var(--s-4); font-weight: var(--fw-semi); font-family: var(--font-body); } /* Liste catégories — 3 colonnes propres avec largeur égale. `display: grid !important` pour neutraliser tout reset périmé en cache. */ .mega__list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px var(--s-3) !important; } @media (max-width: 1100px) { .mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } .mega__item { display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-3); border-radius: var(--radius-md); color: var(--color-fg); text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); min-width: 0; } .mega__item, .mega__item:hover, .mega__item:focus, .mega__item:visited { text-decoration: none; } .mega__item:hover, .mega__item:focus-visible { background: color-mix(in oklab, var(--color-bronze) 10%, var(--color-sand)); color: var(--color-fg); transform: translateX(2px); } .mega__item:hover .mega__icon, .mega__item:focus-visible .mega__icon { background: var(--color-bronze); color: var(--color-paper); } .mega__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-bronze) 14%, transparent); color: var(--color-bronze); flex: 0 0 auto; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .mega__name { font-weight: var(--fw-semi); font-size: var(--fs-base); font-family: var(--font-display); letter-spacing: -.005em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .mega__shopall { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid color-mix(in oklab, var(--color-border) 60%, transparent); font-weight: var(--fw-semi); color: var(--color-accent); text-decoration: none; font-size: var(--fs-sm); align-self: flex-start; } .mega__shopall:hover { text-decoration: underline; } /* Card "feature" supprimée — réintroduira si besoin en V1.1 sous forme d'un bandeau intégré (header de panel) plutôt que colonne flottante. */ /* Mobile : le mega-menu est masqué (drawer prend le relais) */ @media (max-width: 768px) { .site-header__has-mega { display: none; } } /* ═══ Drawer mobile — accordion Boutique ═══ */ .site-header__drawer-section { border-bottom: 1px solid var(--color-border); margin-bottom: var(--s-2); padding-bottom: var(--s-2); } .site-header__drawer-section summary { list-style: none; cursor: pointer; padding: var(--s-3) var(--s-4); font-weight: var(--fw-semi); font-family: var(--font-display); font-size: var(--fs-md); color: var(--color-fg); display: flex; align-items: center; justify-content: space-between; } .site-header__drawer-section summary::-webkit-details-marker { display: none; } .site-header__drawer-section summary::marker { content: ""; } .drawer-chevron { transition: transform var(--dur-fast) var(--ease-out); color: var(--color-muted); } .site-header__drawer-section[open] .drawer-chevron { transform: rotate(180deg); } .site-header__drawer-cats { list-style: none; padding: 0 0 0 var(--s-3); margin: 0 0 var(--s-2); } .site-header__drawer-cats a { display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-4); text-decoration: none; color: var(--color-fg); font-size: var(--fs-sm); border-radius: var(--radius-sm); } .site-header__drawer-cats a:hover { background: var(--color-sand); } .site-header__drawer-cats .drawer-shopall { font-weight: var(--fw-semi); color: var(--color-accent); margin-top: var(--s-2); } .site-header__drawer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .site-header__drawer-list a { display: block; padding: var(--s-3) var(--s-4); text-decoration: none; font-weight: var(--fw-medium); border-radius: var(--radius-sm); color: var(--color-fg); } .site-header__drawer-list a:hover { background: var(--color-sand); } /* ═══ Recherche déployable inline ═══ */ .site-header__search { position: relative; } .site-header__search summary { list-style: none; cursor: pointer; } .site-header__search summary::-webkit-details-marker { display: none; } .site-header__search summary::marker { content: ""; } .site-header__search .search-icon-close { display: none; } .site-header__search[open] > summary { background: var(--color-sand); } .site-header__search[open] .search-icon-open { display: none; } .site-header__search[open] .search-icon-close { display: block; } .site-header__search-form { position: absolute; top: calc(100% + var(--s-2)); right: 0; width: min(360px, 90vw); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-cinematic); padding: var(--s-3); display: flex; align-items: center; gap: var(--s-2); animation: drawer-slide 180ms var(--ease-out); z-index: var(--z-dropdown); } .site-header__search-input { flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: var(--fs-base); font-family: var(--font-body); background: var(--color-bg); color: var(--color-fg); outline: none; } .site-header__search-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 20%, transparent); } .site-header__search-submit { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--color-accent); color: var(--color-paper); border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .site-header__search-submit:hover { background: var(--color-bronze-deep); } .site-header__search-suggest { position: absolute; top: 100%; left: var(--s-3); right: var(--s-3); list-style: none; padding: 0; margin: var(--s-1) 0 0; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-sm); max-height: 320px; overflow-y: auto; box-shadow: var(--shadow-md); } .site-header__search-suggest:empty, .site-header__search-suggest[hidden] { display: none; } .site-header__search-suggest li a { display: flex; align-items: center; gap: var(--s-2); padding: 10px var(--s-3); text-decoration: none; color: var(--color-fg); font-size: var(--fs-sm); border-bottom: 1px solid color-mix(in oklab, var(--color-border) 50%, transparent); } .site-header__search-suggest li:last-child a { border-bottom: none; } .site-header__search-suggest li a:hover, .site-header__search-suggest li a[aria-selected="true"] { background: var(--color-sand); } @media (max-width: 768px) { /* Mobile : le summary est dans le flow flex tout à droite. Avec `right: 0` du form absolute, il s'ancre sur la droite du

mais sa largeur 360 px le pousse sous la zone visible (left negatif). Solution : position: fixed alignée sur le viewport, full-width avec padding latéral. Aucun parent positionné ne pollue. */ .site-header__search-form { position: fixed; top: calc(var(--header-height, 64px) + 8px); left: var(--s-3); right: var(--s-3); width: auto; } } /* ═══ Chips bar (catégories rapides sous header) ═══ Visible sur toutes pages. Scrollable horizontalement en mobile (snap-x). Pas de sticky pour éviter le double-stick avec le header (réduit le viewport visible). Si stickyé en V1.1, prévoir merge avec header sticky en composant unique. */ .cat-chips { background: color-mix(in oklab, var(--color-bg) 96%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); } .cat-chips__inner { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; } .cat-chips__inner::-webkit-scrollbar { display: none; } .cat-chips ul { list-style: none; padding: 10px 0; margin: 0; display: flex; gap: 8px; white-space: nowrap; } .cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: transparent; color: var(--color-fg); border: 1px solid color-mix(in oklab, var(--color-border) 80%, transparent); border-radius: var(--radius-pill); text-decoration: none; font-size: 13px; font-weight: var(--fw-medium); scroll-snap-align: start; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); flex: 0 0 auto; } .cat-chip, .cat-chip:hover, .cat-chip:focus, .cat-chip:visited { text-decoration: none; } .cat-chip:hover, .cat-chip:focus-visible { background: color-mix(in oklab, var(--color-bronze) 15%, transparent); color: var(--color-fg); border-color: var(--color-bronze); } .cat-chip--all { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); } .cat-chip--all:hover, .cat-chip--all:focus-visible { background: var(--color-bronze-deep); color: var(--color-paper); border-color: var(--color-bronze-deep); } .cat-chip__icon { display: inline-flex; opacity: .7; } .cat-chip:hover .cat-chip__icon { opacity: 1; } .cat-chip[aria-current="page"] { background: var(--color-bronze); color: var(--color-ink); border-color: var(--color-bronze); font-weight: var(--fw-semi); box-shadow: 0 2px 8px color-mix(in oklab, var(--color-bronze) 35%, transparent); } .cat-chip[aria-current="page"] .cat-chip__icon { opacity: 1; color: var(--color-ink); } .cat-chip--all[aria-current="page"] { background: var(--color-bronze-deep); color: var(--color-paper); border-color: var(--color-bronze-deep); box-shadow: 0 2px 8px color-mix(in oklab, var(--color-bronze-deep) 40%, transparent); } /* Indicateur de scroll horizontal (mobile) — fade right si la liste déborde */ .cat-chips__inner { position: relative; -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, black 0, black calc(100% - 24px), transparent 100%); } @media (max-width: 768px) { .cat-chips ul { padding: 8px 0; gap: 6px; } .cat-chip { padding: 6px 11px; font-size: 12.5px; } .cat-chip--all { padding: 6px 14px; } /* "Tout" légèrement plus large pour signal de raccourci */ .cat-chip__icon svg { width: 14px; height: 14px; } } /* ── Footer ────────────────────────────────────────────────────────── */ .site-footer { margin-top: var(--s-10); padding-block: var(--s-8) var(--s-6); background: color-mix(in oklab, var(--color-ink) 95%, transparent); color: var(--color-paper); } .site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-6); } .site-footer a { color: var(--color-paper); text-decoration-color: var(--color-bronze); } .site-footer__col h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--s-3); color: var(--color-sand); } .site-footer__col ul { list-style: none; padding: 0; margin: 0; } .site-footer__col li + li { margin-top: var(--s-2); } /* Newsletter (Phase G) — floating label + validation + submit loading sur fond encre du footer. Les couleurs locales overrident .field--floating (muted est trop sombre sur ink). */ .newsletter-form { display: flex; gap: var(--s-2); align-items: stretch; } .newsletter-form__field { flex: 1; } .newsletter-form .input { background: rgba(255, 255, 255, .06); color: var(--color-paper); border-color: rgba(255, 255, 255, .2); } .newsletter-form .input:focus { border-color: var(--color-bronze); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-bronze) 25%, transparent); } .newsletter-form .field--floating > label { color: var(--color-sand); } .newsletter-form .field--floating > .input:focus ~ label, .newsletter-form .field--floating > .input:not(:placeholder-shown) ~ label { color: var(--color-bronze); } /* Le checkmark reste en --color-success (vert), lisible sur dark. */ .site-footer__legal { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-xs); color: var(--color-sand); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; } /* ── Main ──────────────────────────────────────────────────────────── */ main { display: block; padding-block: var(--s-6); max-width: 100%; overflow-x: clip; } /* ── Grilles utilitaires ───────────────────────────────────────────── */ .grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-5); } .grid-split { display: grid; grid-template-columns: 1fr; gap: var(--s-6); } @media (min-width: 768px) { .grid-split { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; } .grid-split--image-first > :first-child { order: 0; } .grid-split--image-last > :first-child { order: 1; } } /* ── Sections full-bleed ───────────────────────────────────────────── */ .section { padding-block: var(--s-8); } .section--tight { padding-block: var(--s-5); } .section--loose { padding-block: var(--s-10); } .section--ink { background: var(--color-ink); color: var(--color-paper); } /* Mobile : compress les sections pour densifier la page d'accueil et faire apparaître plus de produits dans le fold. Conversion-first. */ @media (max-width: 768px) { .section { padding-block: var(--s-5); } .section--tight { padding-block: var(--s-4); } .section--loose { padding-block: var(--s-6); } } /* ── Layout admin (appliqué sur ) ───────────── */ body.is-admin { background: var(--color-bg); color: var(--color-fg); } .admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100dvh; } /* Sidebar */ .admin-sidebar { background: var(--color-ink); color: var(--color-paper); padding: var(--s-5) var(--s-4); position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-4); } .admin-sidebar__brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--color-paper); padding-bottom: var(--s-4); border-bottom: 1px solid rgba(255,255,255,.08); } /* Œil d'Horus en mask-image (cohérent avec le divider front — bronze sur ink) */ .admin-sidebar__emblem { width: 40px; height: 32px; background-color: var(--color-bronze); -webkit-mask-image: url("/assets/img/eye-of-horus.png"); mask-image: url("/assets/img/eye-of-horus.png"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; flex-shrink: 0; } .admin-sidebar__wordmark { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-md); letter-spacing: .15em; line-height: 1.1; } .admin-sidebar__wordmark small { display: block; font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-xs); letter-spacing: .1em; color: var(--color-sand); margin-top: 2px; } .admin-sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .admin-sidebar__nav a { color: var(--color-paper); text-decoration: none; display: block; padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); transition: background var(--dur-fast) var(--ease-out); } .admin-sidebar__nav a:hover { background: rgba(255,255,255,.08); } .admin-sidebar__nav a[aria-current="page"] { background: color-mix(in oklab, var(--color-bronze) 20%, transparent); color: var(--color-bronze); } .admin-sidebar__foot { padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.08); font-size: var(--fs-xs); color: var(--color-sand); } .admin-sidebar__user { font-weight: var(--fw-medium); color: var(--color-paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-sidebar__logout { background: transparent; border: 1px solid rgba(255,255,255,.2); color: var(--color-paper); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-xs); width: 100%; transition: background var(--dur-fast) var(--ease-out); } .admin-sidebar__logout:hover { background: rgba(255,255,255,.08); } /* Main + topbar */ .admin-main-wrap { display: flex; flex-direction: column; min-height: 100dvh; } .admin-topbar { padding: var(--s-5) var(--s-6); background: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: var(--z-sticky); } .admin-topbar__title { margin: 0; font-size: var(--fs-lg); font-family: var(--font-display); font-weight: var(--fw-semi); } .admin-flashes { padding: var(--s-4) var(--s-6) 0; display: flex; flex-direction: column; gap: var(--s-2); } .admin-main { padding: var(--s-6); flex: 1; } /* Responsive : sidebar en accordéon au-dessus du contenu sur mobile */ @media (max-width: 900px) { .admin-shell { grid-template-columns: 1fr; } .admin-sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; } .admin-sidebar__nav { flex-direction: row; flex-wrap: wrap; gap: var(--s-2); flex: 1 0 100%; } }