/* ========================================================================== app.css — layout + components, built on Pico.css + tokens.css -------------------------------------------------------------------------- Load order (see ): 1) Pico 2) tokens.css 3) app.css. Two jobs: A) "Pico bridge" — point Pico's --pico-* variables at OUR tokens so Pico's built-in elements match the design system. B) Our components — app bar, cards, gallery, product page, login modal, etc. RULE: no raw colors/sizes here — only var(--token) refs and a few clearly named layout constants below. The layout is mobile-first and fully responsive (no horizontal scroll at any width; grid reflows 1→4 columns). ========================================================================== */ /* -------------------------------------------------------------------------- Layout constants (structural sizes; not part of the color/type charter) -------------------------------------------------------------------------- */ :root { /* The catalog is FULL-WIDTH: content fills the viewport (with side gutters), so the grid adds columns as the screen widens. --card-min is PX on purpose: Pico v2 scales the root font-size up on wide screens (fluid typography), so a rem track size would change the column count unpredictably; px keeps the reflow stable as the page widens. */ --card-min: 260px; /* min product-card width before the grid adds a column */ --detail-max: 82rem; /* readable max width of the product DETAIL (not the grid) */ --gallery-thumb: 3.25rem; /* gallery thumbnail size */ --tap-min: 2.75rem; /* ~44px minimum touch target (a11y) */ --radius-pill: 999px; /* fully rounded (stock badges) */ } /* Hide Alpine-bound elements until Alpine initializes (avoids any flash). */ [x-cloak] { display: none !important; } /* Keep the whole app hidden until the language file has loaded (`ready`), so UI labels never flash as raw i18n keys. The catalog component sets data-ready once i18n is in (see init() in catalog.js). */ body:not([data-ready="true"]) { visibility: hidden; } /* Screen-reader-only: present to assistive tech, hidden visually. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Skip link: off-screen until focused, then slides into the top-left. */ .skip-link { position: fixed; left: var(--space-3); top: var(--space-3); z-index: 100; transform: translateY(-150%); transition: transform .15s ease; background: var(--surface); color: var(--brand); font-weight: var(--fw-bold); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); box-shadow: var(--shadow); text-decoration: none; } .skip-link:focus { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } } /* ========================================================================== A) PICO BRIDGE — map Pico's variables onto our tokens. ========================================================================== */ :root { --pico-font-family: var(--font-sans); --pico-border-radius: var(--radius); --pico-background-color: var(--bg); --pico-color: var(--text); --pico-muted-color: var(--text-muted); --pico-muted-border-color: var(--border); --pico-border-color: var(--border); --pico-primary: var(--brand); --pico-primary-background: var(--brand); --pico-primary-border: var(--brand); --pico-primary-hover: var(--brand-hover); --pico-primary-hover-background: var(--brand-hover); --pico-primary-hover-border: var(--brand-hover); --pico-primary-inverse: var(--brand-contrast); --pico-primary-focus: color-mix(in srgb, var(--brand) 35%, transparent); --pico-link-color: var(--brand); --pico-link-hover-color: var(--brand-hover); --pico-card-background-color: var(--surface); --pico-card-border-color: var(--border); --pico-card-box-shadow: var(--shadow); --pico-form-element-background-color: var(--surface); --pico-form-element-border-color: var(--border); --pico-form-element-color: var(--text); --pico-form-element-placeholder-color: var(--text-muted); --pico-form-element-active-border-color: var(--brand); --pico-form-element-focus-color: var(--brand); --pico-dropdown-background-color: var(--surface); --pico-dropdown-border-color: var(--border); --pico-dropdown-box-shadow: var(--shadow); /* Pin the root font-size. Pico v2 scales it up on wide screens (≈125% at desktop), which makes titles/prices/buttons feel oversized. Keeping it at the user's base size gives a cleaner, more compact UI. */ font-size: 100%; /* Compact buttons + inputs (Pico's defaults are tall). */ --pico-form-element-spacing-vertical: 0.55rem; --pico-form-element-spacing-horizontal: 0.9rem; } body { background: var(--bg); color: var(--text); } /* Keyboard-focus ring (keyboard users only). */ :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ========================================================================== AUTH CHROME visibility -------------------------------------------------------------------------- `[data-authed]` on mirrors the real auth state and toggles CHROME: .only-authed → signed-in only (customer name, Log out) .only-guest → guests only (Log in) DATA gating (price/stock/specs vs. the contact CTA) is NOT done here — it's driven by FIELD PRESENCE in the markup via x-show="hasPricing(item)", because the server omits those fields for guests (SPEC §11). ========================================================================== */ [data-authed="true"] .only-guest { display: none !important; } [data-authed="false"] .only-authed { display: none !important; } /* ========================================================================== B) COMPONENTS ========================================================================== */ /* --- Page container -------------------------------------------------------- */ /* Centered, responsive column: ~92% of the viewport, so it visibly scales as you resize the window, stays centered, and is capped on very wide screens so it doesn't sprawl. `.app-bar__inner` uses the same width so the bar lines up. */ .page { width: min(92%, 100rem); margin-inline: auto; padding-block: var(--space-6); } /* --- Top app bar ----------------------------------------------------------- */ /* The bar background/border span the full width; its content is centered to the same column as .page via .app-bar__inner. */ .app-bar { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .app-bar__inner { width: min(92%, 100rem); margin-inline: auto; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-4); padding-block: var(--space-3); } .app-bar__brand { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); text-decoration: none; margin: 0; } .app-bar__brand:hover { color: var(--text); } .app-bar__brand-text { display: inline-flex; align-items: center; gap: var(--space-3); } .app-bar__brand .logo-dot { width: 1.4rem; height: 1.4rem; border-radius: var(--radius); background: var(--brand); flex: none; } /* Optional logo image (config.LOGO_URL) — replaces the brand text. */ .app-bar__logo { display: block; height: 2rem; width: auto; max-width: 12rem; object-fit: contain; } /* Customer menu (upper-right): the customer name is the dropdown trigger; its menu (logout, …) opens below, right-aligned so it never overflows the edge. */ .app-bar__user { margin: 0; } .app-bar__user > summary { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text); white-space: nowrap; } .app-bar__user > ul { right: 0; left: auto; min-width: 11rem; } /* The collapsible part (menu + auth actions). Inline on desktop; a drawer on mobile. */ .app-bar__collapse { display: flex; align-items: center; gap: var(--space-4); flex: 1; } .app-bar__actions { margin-left: auto; display: flex; gap: var(--space-3); align-items: center; } .app-bar__actions :is(button, [role="button"]) { width: auto; margin: 0; } /* Hamburger toggle — hidden on desktop, shown on mobile (see media query). */ .app-bar__toggle { display: none; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); margin: 0; padding: 0; background: transparent; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); } .app-bar__toggle svg { width: 1.4rem; height: 1.4rem; } /* --- Category menu --------------------------------------------------------- */ /* (justify-content:flex-start overrides Pico's default nav `space-between`.) */ .category-menu { display: flex; justify-content: flex-start; align-items: center; gap: var(--space-1); flex-wrap: wrap; } /* The menu is generated with x-for; each node is wrapped in a .category-menu__node whose box is removed (display:contents) so the dropdown/leaf inside stays a direct flex item of .category-menu. */ .category-menu__node { display: contents; } .category-menu__leaf { display: inline-block; padding: var(--space-2) var(--space-2); border-radius: var(--radius); color: var(--text); text-decoration: none; font-weight: var(--fw-bold); font-size: var(--fs-sm); } .category-menu__leaf:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); } .category-menu__leaf[aria-current="true"] { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); } /* Contact lives in the footer; hide it in the desktop bar to save width (placed AFTER .category-menu__leaf so it wins on equal specificity). The mobile drawer shows it again — see the nav media query. */ .category-menu__contact { display: none; } /* Highlight the selected leaf inside the dropdown too. */ .category-menu details.dropdown a[aria-current="true"] { color: var(--brand); font-weight: var(--fw-bold); } /* Pico's

opens on click/tap (good for touch). */ .category-menu details.dropdown { margin: 0; } .category-menu details.dropdown > summary { display: inline-flex; /* not list-item: centers the label so it lines up with the leaf links (was sitting higher) */ align-items: center; padding: var(--space-2) var(--space-2); font-weight: var(--fw-bold); font-size: var(--fs-sm); border-radius: var(--radius); border: none; background: transparent; color: var(--text); } .category-menu details.dropdown > summary:hover { color: var(--brand); } /* --- Toolbar (search on top; result count + active-filter chip below) ------- */ .toolbar { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); } .toolbar__row { display: flex; align-items: center; gap: var(--space-3); } .toolbar__search { flex: 1; min-width: 0; } .toolbar .search { width: 100%; margin: 0; } .toolbar__status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); } .toolbar__meta { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; } /* "Filtres" button (mobile only — opens the drawer). */ .filters-toggle { display: none; align-items: center; gap: var(--space-2); width: auto; margin: 0; white-space: nowrap; } .filters-toggle svg { width: 1.1rem; height: 1.1rem; } /* ========================================================================== Catalog layout: filters sidebar (left) + main column (grid). Sidebar = a fixed left column on desktop, an off-canvas drawer on mobile. It's authed-only (the sort/stock filters use gated fields). ========================================================================== */ .catalog-layout { display: flex; align-items: flex-start; gap: var(--space-5); } .catalog-main { flex: 1; min-width: 0; } .filters-sidebar { flex: 0 0 14rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); } .filters-sidebar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); } .filters-sidebar__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); margin: 0; } .filters-sidebar__close { display: none; width: var(--tap-min); height: var(--tap-min); margin: 0; padding: 0; background: transparent; border: none; color: var(--text-muted); align-items: center; justify-content: center; } .filters-sidebar__close svg { width: 1.1rem; height: 1.1rem; } .filters-switch { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text); margin-bottom: var(--space-5); cursor: pointer; } .filters-switch input { margin: 0; flex: none; } .filters-field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-muted); } .filters-field select { width: 100%; margin: 0; font-size: var(--fs-base); font-weight: var(--fw-normal); color: var(--text); } .filters-clear { width: 100%; margin: var(--space-2) 0 0; font-size: var(--fs-sm); } .filters-backdrop { display: none; } /* Mobile: the sidebar becomes a left drawer opened by the "Filtres" button. */ @media (max-width: 48rem) { .filters-toggle { display: inline-flex; } .filters-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(85%, 20rem); border: none; border-radius: 0; box-shadow: var(--shadow); overflow-y: auto; transform: translateX(-100%); transition: transform .2s ease; } .filters-sidebar.is-open { transform: translateX(0); } .filters-sidebar__close { display: inline-flex; } .filters-backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: color-mix(in srgb, var(--text) 45%, transparent); } } @media (prefers-reduced-motion: reduce) { .filters-sidebar { transition: none; } } /* "Load more" pagination — render the grid in chunks (keeps the DOM small for large catalogs); search/sort/filter still run on the full in-memory set. */ .load-more-wrap { display: flex; justify-content: center; margin-top: var(--space-6); } .load-more { width: auto; margin: 0; } /* Active category filter shown as an elegant, removable pill. */ .filter-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--surface)); border-radius: var(--radius-pill); } .filter-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: 0; margin: 0; border: none; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; } .filter-chip__x:hover { background: color-mix(in srgb, var(--brand) 22%, var(--surface)); } .filter-chip__x svg { width: .7rem; height: .7rem; } /* --- Section heading ------------------------------------------------------- */ .section-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); margin: 0 0 var(--space-4); } /* --- Responsive product grid (1 → 2 → 3 → 4 columns) ----------------------- */ .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr)); gap: var(--space-5); } /* --- Product card ---------------------------------------------------------- */ .product-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: clip; transition: box-shadow .15s ease, transform .15s ease; } .product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* The image + name are a single link to the product page (keyboard accessible). */ .product-card__link { display: block; color: inherit; text-decoration: none; } .product-card__link:hover .product-card__name { color: var(--brand); } .product-card__head { padding: var(--space-4) var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-1); } /* Clamp the name to 2 lines AND reserve 2 lines (min-height), so the price/stock below start at the same height on every card → aligned across the grid. */ .product-card__name { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text); margin: 0; line-height: 1.3; min-height: calc(2 * 1.3em); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .product-card__sku { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; } /* Foot sits at the bottom so prices line up across cards of different heights. */ .product-card__foot { padding: var(--space-3) var(--space-4) var(--space-4); margin-top: auto; } /* Structured + consistent: price on its own line, stock badge on the next line. (Stacking — not side-by-side — so price and stock align across every card.) */ .product-card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); } /* --- Card image / placeholder ---------------------------------------------- */ /* The media box always reserves a 4/3 area with a neutral background, so whether it holds a real photo, the SVG placeholder, or a removed (404'd) image, the card keeps the same shape and prices stay aligned across the grid. */ /* contain (not cover) so the WHOLE product shows — furniture photos vary between tall (chairs, lamps) and wide (sideboards, tables); cover cropped the tall ones. White media background so product photos (usually on white) blend cleanly. */ .product-card__media { aspect-ratio: 4 / 3; background: var(--surface); display: grid; place-items: center; } .product-card__img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Tokenized stand-in for a real photo (no images, or load failure). Icon color comes from currentColor (a token) — no hard-coded colors. */ .media-placeholder { aspect-ratio: 4 / 3; display: grid; place-items: center; background: color-mix(in srgb, var(--border) 45%, var(--surface)); color: var(--text-muted); } .media-placeholder svg { width: 28%; max-width: 3.5rem; height: auto; opacity: .65; } /* --- Price + stock badge --------------------------------------------------- */ .price { color: var(--price); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.01em; } .price--deal { color: var(--deal); } /* discounted ("deal") price */ .price__uom { font-size: var(--fs-sm); font-weight: var(--fw-normal); color: var(--text-muted); } /* Discounted price: current price + struck-through base price ("prix barré") + a compact -X% pill. Shown only when base_price > price (authenticated). */ /* Keep price + struck base + −% on ONE line so the price/stock rows align across every card (the sidebar makes authed cards wide enough to fit). */ .price-block { display: inline-flex; align-items: baseline; flex-wrap: nowrap; gap: var(--space-1) var(--space-2); } .price__base { font-size: var(--fs-sm); font-weight: var(--fw-normal); color: var(--text-muted); text-decoration: line-through; } .price__discount { align-self: center; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--discount); background: color-mix(in srgb, var(--discount) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--discount) 28%, var(--surface)); border-radius: var(--radius-pill); padding: 0 var(--space-2); white-space: nowrap; } .stock-badge { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; /* never exceed the card/column width */ font-size: var(--fs-sm); font-weight: var(--fw-bold); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); border: 1px solid transparent; color: var(--text); /* high-contrast label (AA); the colored dot carries the status */ } .stock-badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--dot); } .stock-badge--ok { --dot: var(--stock-ok); background: color-mix(in srgb, var(--stock-ok) 12%, var(--surface)); border-color: color-mix(in srgb, var(--stock-ok) 25%, var(--surface)); } .stock-badge--low { --dot: var(--stock-low); background: color-mix(in srgb, var(--stock-low) 12%, var(--surface)); border-color: color-mix(in srgb, var(--stock-low) 25%, var(--surface)); } .stock-badge--out { --dot: var(--stock-out); background: color-mix(in srgb, var(--stock-out) 14%, var(--surface)); border-color: color-mix(in srgb, var(--stock-out) 28%, var(--surface)); } .stock-badge--incoming { --dot: var(--stock-incoming); background: color-mix(in srgb, var(--stock-incoming) 12%, var(--surface)); border-color: color-mix(in srgb, var(--stock-incoming) 25%, var(--surface)); } /* Product-page restock schedule (authenticated). */ .stock-arrivals { margin: var(--space-4) 0; } .stock-arrivals__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text); margin: 0 0 var(--space-2); } .stock-arrivals__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); } .stock-arrivals__list li { font-size: var(--fs-sm); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); } .stock-arrivals__list li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--stock-incoming); flex: none; } /* --- Guest CTA on a card ("Contact us for pricing") ------------------------ */ .gated-cta-row { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; } .gated-cta { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--brand); text-decoration: none; } .gated-cta:hover { color: var(--brand-hover); text-decoration: underline; } .gated-cta svg { width: 1rem; height: 1rem; flex: none; } .gated-cta__login { font-size: var(--fs-sm); color: var(--text-muted); } /* ========================================================================== Product page (hash route #/p/SKU) ========================================================================== */ .breadcrumb { display: flex; justify-content: flex-start; /* override Pico's nav space-between */ flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-5); } .breadcrumb > * { margin: 0; } /* reset any Pico nav child margins */ .breadcrumb a { color: var(--text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--brand); } .breadcrumb__sep { color: var(--border); } .breadcrumb__current { color: var(--text); font-weight: var(--fw-bold); } /* The product DETAIL stays in a readable, centered column (the catalog grid is full-width, but long descriptions + a hero gallery read better when capped). */ .product-page { max-width: var(--detail-max); margin-inline: auto; } .product-page__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; } @media (min-width: 48rem) { .product-page__grid { grid-template-columns: 1.05fr 0.95fr; align-items: start; } } .product-page__info { display: flex; flex-direction: column; gap: var(--space-3); } .product-page__cat { font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0; } .product-page__name { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text); margin: 0; line-height: 1.2; } .product-page__desc { color: var(--text); margin: 0; } .product-page__subhead { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); margin: var(--space-4) 0 0; } .product-page__long { color: var(--text-muted); margin: 0; } .detail-info__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3) var(--space-4); margin-top: var(--space-2); } /* --- Gallery (tap thumbnails, arrow buttons, swipe on touch) --------------- */ .gallery { display: flex; flex-direction: column; gap: var(--space-3); } .gallery__frame { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: clip; background: var(--surface); } .gallery__main { position: relative; /* anchors the prev/next arrows */ aspect-ratio: 4 / 3; display: grid; place-items: center; gap: var(--space-2); background: color-mix(in srgb, var(--border) 45%, var(--surface)); color: var(--text-muted); touch-action: pan-y; /* allow vertical scroll, we handle horizontal swipe */ } .gallery__main .media-placeholder, .gallery__main svg { width: 30%; max-width: 4rem; opacity: .65; } /* Real photo fills the 4/3 frame; contain (not cover) so the whole product shows. */ .gallery__img { width: 100%; height: 100%; object-fit: contain; display: block; } .gallery__main-label { font-size: var(--fs-base); font-weight: var(--fw-bold); } .gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: var(--tap-min); height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow); } .gallery__nav:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); } .gallery__nav svg { width: 1.2rem; height: 1.2rem; } .gallery__nav--prev { left: var(--space-3); } .gallery__nav--next { right: var(--space-3); } .gallery__thumbs { display: flex; gap: var(--space-3); flex-wrap: wrap; } .gallery__thumb { /* flex: 0 0 + min-width:0 pins the thumb to --gallery-thumb. Without it, a flex item's default min-width:auto lets the image's intrinsic size blow the thumb up to full size. */ flex: 0 0 var(--gallery-thumb); min-width: 0; width: var(--gallery-thumb); aspect-ratio: 1; display: grid; place-items: center; padding: 0; cursor: pointer; overflow: clip; border: 2px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--border) 35%, var(--surface)); color: var(--text-muted); font-weight: var(--fw-bold); } .gallery__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery__thumb:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); } .gallery__thumb.is-active { border-color: var(--brand); color: var(--brand); } /* --- Technical info: attributes table + documents (authenticated) ---------- */ .table-wrap { overflow-x: auto; } /* never force the page to scroll sideways */ .attr-table { width: 100%; border-collapse: collapse; margin: 0; font-size: var(--fs-base); } .attr-table th, .attr-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; } .attr-table th { color: var(--text-muted); font-weight: var(--fw-normal); width: 40%; } .attr-table td { color: var(--text); font-weight: var(--fw-bold); } /* Section heading row (spans both columns); groups attributes under a label. */ .attr-table__section th { width: auto; color: var(--text); font-weight: var(--fw-bold); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; padding-top: var(--space-4); background: color-mix(in srgb, var(--border) 22%, var(--surface)); } .docs__title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text); margin: var(--space-4) 0 var(--space-2); } .docs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .docs__list li { list-style: none; } /* Pico sets a square marker on

directly */ .docs__list a { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--brand); text-decoration: none; min-height: var(--tap-min); } .docs__list a:hover { text-decoration: underline; } .docs__list svg { width: 1.1rem; height: 1.1rem; flex: none; } /* --- Contact-to-order / contact-for-pricing button ------------------------- */ .contact-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); width: auto; min-height: var(--tap-min); padding: var(--space-2) var(--space-4); margin-top: var(--space-2); background: var(--brand); color: var(--brand-contrast); border: 1px solid var(--brand); border-radius: var(--radius); font-weight: var(--fw-bold); text-decoration: none; } .contact-btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-contrast); } .contact-btn svg { width: 1.1rem; height: 1.1rem; } .secondary-link { color: var(--text-muted); } /* --- Contact form (#/contact) ---------------------------------------------- */ .contact-page { max-width: 36rem; margin-inline: auto; } .contact-form { display: flex; flex-direction: column; gap: var(--space-4); } .contact-form > h1 { margin: 0; } .contact-form label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text); } .contact-form label > span { display: block; margin-bottom: var(--space-1); } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; margin: 0; font-weight: var(--fw-normal); } .contact-form button[type="submit"] { width: auto; align-self: flex-start; min-height: var(--tap-min); } .contact-form__fallback { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; } /* --- Static content pages (Mentions légales / Politique de confidentialité) - */ .content-page { max-width: 48rem; margin-inline: auto; } .content-page__intro { color: var(--text-muted); margin: 0 0 var(--space-5); } .content-page__section { margin-bottom: var(--space-5); } .content-page__heading { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); margin: 0 0 var(--space-2); } /* pre-line lets placeholder bodies use \n for multi-line blocks (e.g. the address). */ .content-page__body { color: var(--text); line-height: 1.6; margin: 0; white-space: pre-line; } .content-page__updated { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--space-6); } /* --- Site footer (company info + links) ------------------------------------ */ .site-footer { background: var(--surface); border-top: 1px solid var(--border); margin-top: var(--space-6); padding: 0; text-align: left; } .site-footer__inner { width: min(92%, 100rem); margin-inline: auto; padding-block: var(--space-6); } .site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-5); } .site-footer__col { min-width: 0; } .site-footer__brand { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); margin: 0 0 var(--space-2); } .site-footer__about { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; max-width: 30rem; } .site-footer__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 0 0 var(--space-3); } .site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .site-footer li { list-style: none; } /* Pico sets list-style on

itself, not the