/* Written before the design system: kept in the « legacy » layer, below components.css (see tokens.css). */
@layer legacy {
/* ==========================================================================
   MAGGMALIGHT — additions shared by every page, on top of styles.css:
   images, header pieces, keyboard focus, colour contrast, reduced motion.
   ========================================================================== */

/* Images carry width and height (no layout shift); CSS still decides the displayed size. */
:where(img) { height: auto; }
picture { display: contents; }

/* Ticker: two identical copies scroll in a loop. */
.ticker-copy { display: flex; align-items: center; flex-shrink: 0; }

/* Text for screen readers only. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* « Aller au contenu »: first stop of the Tab key. */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 10000; padding: 10px 16px; border-radius: 8px; background: #1D1D1B; color: #fff; font-weight: 700; font-size: .85rem; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

/* Without JavaScript, sections that fade in are simply shown. */
html:not(.js) .fade-in-up { opacity: 1; transform: none; }

/* ---- Keyboard focus: always visible, whatever a component's own styles say (styles.css and some
   pages remove the outline of buttons and fields). A dark ring with a thin white ring inside it shows
   on any background; on dark areas the outer ring is amber. ---- */
:focus-visible { outline: 3px solid #1D1D1B !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #FFFFFF !important; }
:is(.footer, .ticker-bar, .navbar.hero-mode, .search-overlay, .trust-dark, .hero, [data-dark], .cat-hero, .contact-hero,
  .blog-hero, .academy-hero, .academy-cta, .sl-hero, .cp-hero, .realisations-hero, .real-hero, .real-cta, .featured-real) :focus-visible { outline-color: #F2AD64 !important; }
.navbar .nav-dropdown :focus-visible { outline-color: #1D1D1B !important; }
/* Rows and field groups that crop what sticks out: the ring is drawn just inside the element. */
:is(.carousel-track, .similar-track, .qty-selector, .blog-search) :focus-visible {
  outline-offset: -3px !important; box-shadow: inset 0 0 0 5px #FFFFFF !important;
}
/* Category cards of the home row: their photo covers an inner ring, so the ring is drawn above it. */
.categories-row-wrap .cat-card:focus-visible { outline: none !important; box-shadow: none !important; }
.categories-row-wrap .cat-card:focus-visible::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  border: 3px solid #1D1D1B; box-shadow: inset 0 0 0 2px #FFFFFF;
}
/* The Produits menu also opens from the keyboard. */
.nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
/* The search box is visible at once when opened (the cursor goes straight into it), then fades in;
   when closed it fades out, then hides. */
.search-overlay { transition: opacity .3s ease, visibility 0s linear .3s; }
.search-overlay.open { transition: opacity .3s ease, visibility 0s; }
/* A closed mobile menu cannot be reached with Tab. */
.mobile-nav { visibility: hidden; transition: transform .4s cubic-bezier(.4,0,.2,1), visibility 0s linear .4s; }
.mobile-nav.open { visibility: visible; transition: transform .4s cubic-bezier(.4,0,.2,1); }

/* Messages stay above the cart drawer and the order windows. */
.toast { z-index: 10001; }

/* Links inside a line of text are underlined, so they are not told apart by colour alone. */
.footer-bottom-left a { text-decoration: underline; text-underline-offset: 2px; }

/* Information line under every form (law 09-08). */
.mg-consent { font-size: .72rem; line-height: 1.5; color: #5f5d58; margin-top: 10px; text-align: left; }
.mg-consent a { color: inherit; text-decoration: underline; }
[data-dark] .mg-consent, .mg-consent.on-dark { color: rgba(255,255,255,.78); }
.order-terms a, .mg-order-check a { color: inherit; text-decoration: underline; }

/* ---- Less motion for visitors who ask for it ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .ticker-track { animation: none !important; transform: none !important; }
  .fade-in-up { opacity: 1 !important; transform: none !important; }
}

/* Product cards: the product name is the link (the whole card stays clickable). */
a.product-name { display: block; }
.cat-product-name { font-family: inherit; }
.cat-product-name a { color: inherit; }
[data-href] { cursor: pointer; }
[hidden] { display: none !important; }

/* Controls drawn as buttons (calendar days, time slots) keep the page's own look. */
:where(button.cal-day, button.slot) { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; width: 100%; }

/* ---- Phase 2: shared lead forms (quote, devis express, call-back) ---- */
.lead-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
@media (max-width: 640px) { .lead-grid { grid-template-columns: 1fr; } }
.lead-field { display: grid; gap: 6px; }
.lead-field label { font-size: .82rem; font-weight: 600; color: #1D1D1B; }
.lead-optional { font-weight: 400; color: #6b6862; }
.lead-field input, .lead-field select, .lead-field textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid #c9c6bf; border-radius: 10px; background: #fff; font: 400 .95rem Poppins, system-ui, sans-serif; color: #1D1D1B; }
.lead-field textarea { resize: vertical; min-height: 84px; }
.lead-field input:focus, .lead-field select:focus, .lead-field textarea:focus { border-color: #1D1D1B; }
}