/* Mini paint chips in the header (theme colour picker) */
.theme-chips { display: flex; align-items: center; gap: 0.3rem; margin-right: auto; margin-left: 0.9rem; }
.theme-chip {
  width: 1.5rem; height: 1.5rem; padding: 0;   /* 24px target (WCAG 2.5.8); the visible chip stays 1.4rem */ border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; border-radius: 4px;
}
.theme-chip span {
  display: block; width: 1.4rem; height: 1.4rem; border-radius: 4px;
  background: linear-gradient(155deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%), var(--c);
  box-shadow: 0 0 0 1px var(--line, #262630);
  transition: transform 200ms ease;
}
.theme-chip:hover span { transform: translateY(-2px); }
.theme-chip[aria-pressed="true"] span { box-shadow: 0 0 0 2px var(--ink, #050507), 0 0 0 4px var(--c); }

/* Touch screens: 44px targets, chips on their own row under the brand */
@media (pointer: coarse) {
  .theme-chip { width: 44px; height: 44px; }
  .theme-chip span { width: 1.6rem; height: 1.6rem; }
}
/* Phones: chips stay on the top row beside « MMA »; the brand icon and the menu label make room */
@media (max-width: 720px) {
  .site-header, .mma-header { flex-wrap: nowrap; gap: 0.4rem; }
  .mma-header { flex-wrap: wrap; }
  .site-header .brand img, .mma-header .mma-icon { display: none; }
  .theme-chips { margin: 0 auto 0 0.4rem; gap: 0; }
  .js .nav-toggle { width: 44px; padding: 0; justify-content: center; flex: none; }
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 374px) {
  .site-header, .mma-header { padding-left: 1rem; padding-right: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .theme-chip span { transition: none; } }

/* Catalogue / admin header: brand, then chips, then the nav (never chips under the nav) */
.mma-header .mma-brand { order: 0; }
.mma-header .theme-chips { order: 1; }
.mma-header .mma-nav { order: 2; }
.mma-header .cat-who { order: 3; flex-basis: 100%; }
@media (max-width: 720px) {
  .mma-header .mma-nav { flex-basis: 100%; }
}

/* Catalogue on phones: the language switch (EN/FR) joins the top row after the chips;
   the other links go to a second row */
@media (max-width: 720px) {
  .mma-header .mma-nav { display: contents; }
  .mma-header .mma-nav a { order: 3; }
  .mma-header .mma-nav a.lang { order: 1; min-width: 44px; text-align: center; justify-content: center; }
  .mma-header::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
}

/* never let the five chips squeeze into each other */
.theme-chip { flex: none; }

/* Catalogue phones: keep « MMA · chips · EN » on one line (a few px were missing) */
@media (max-width: 720px) {
  .mma-header { column-gap: 0.25rem; }
  .mma-header .theme-chips { margin-left: 0; }
  .mma-header .mma-nav a.lang { padding-left: 0.6rem; padding-right: 0.6rem; }
}
@media (max-width: 374px) {
  .mma-header .mma-wordmark { font-size: 0.9rem; font-stretch: 100%; }
  .mma-header .mma-brand { min-width: 44px; }
  .mma-header .mma-nav a.lang { min-width: 44px; padding-left: 0.4rem; padding-right: 0.4rem; }
}

/* Admin header on wider screens: row 1 = brand · chips · "Connecté", row 2 = the whole nav */
@media (min-width: 721px) {
  .cat-admin .mma-header { flex-wrap: wrap; row-gap: 0.35rem; }
  .cat-admin .mma-header .mma-brand { flex: none; }
  .cat-admin .mma-header .theme-chips { order: 1; flex: none; margin: 0 auto 0 0.9rem; }
  .cat-admin .mma-header .cat-who { order: 2; flex-basis: auto; margin: 0; }
  .cat-admin .mma-header .mma-nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
}
.theme-chips { flex: none; }

/* =====================================================================
   Sous-menus de l'en-tête (2026-10-12), partagés par la vitrine (.site-nav) et le catalogue (.mma-nav) :
   « Secteurs » et « Catalogue ». Bouton qui déplie une liste (pas un menu ARIA) ; survol + clic, clavier
   dans theme-chips.js. Chaque secteur a sa mini-pastille de peinture.
   ===================================================================== */
.nav-group { position: relative; }
.nav-sub-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.35rem 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.95rem; color: var(--chrome-2, #a3a6b0);
}
.nav-sub-btn:hover, .nav-group.is-open > .nav-sub-btn, .nav-group.is-current > .nav-sub-btn { color: var(--chrome, #e2e4ea); }
.nav-group.is-current > .nav-sub-btn { text-decoration: underline; text-decoration-color: var(--chroma); text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.nav-caret {
  width: 0.42rem; height: 0.42rem; margin-top: -0.2rem;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
  transition: transform 160ms ease;
}
.nav-group.is-open > .nav-sub-btn .nav-caret { transform: translateY(0.2rem) rotate(-135deg); }
.nav-sub { list-style: none; margin: 0; padding: 0; display: none; }
.nav-group.is-open > .nav-sub { display: block; }
.nav-group .nav-sub a { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--chrome, #e2e4ea); }
.nav-group .nav-sub a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--chroma); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
/* the paint chip of the sector: same light-to-shadow gradient as the big chips */
.nav-swatch {
  flex: none; width: 0.8rem; height: 1.05rem; border-radius: 2px 2px 1px 1px;
  background: linear-gradient(160deg, rgb(255 255 255 / .4) 0%, rgb(255 255 255 / 0) 40%, rgb(0 0 0 / .35) 100%), var(--c);
  forced-color-adjust: none;
}

/* Wide screens (and the catalogue header at any width it shows the group): a panel under the button */
@media (min-width: 961px) {
  .site-nav .nav-sub, .mma-nav .nav-sub {
    position: absolute; top: calc(100% + 0.7rem); left: -0.9rem; z-index: 8; min-width: 15.5rem; padding: 0.4rem;
    background: var(--ink-2, #0d0d12); border: 1px solid var(--line-2, rgb(255 255 255 / .14)); border-top: 2px solid var(--chroma);
    border-radius: 0 0 10px 10px; box-shadow: 0 22px 40px -22px #000;
  }
  /* invisible bridge over the gap, so the pointer can travel from the button to the panel */
  .site-nav .nav-sub::before, .mma-nav .nav-sub::before { content: ''; position: absolute; left: 0; right: 0; top: -0.9rem; height: 0.9rem; }
  .site-nav .nav-group .nav-sub a, .mma-nav .nav-group .nav-sub a { padding: 0.6rem 0.75rem; border-radius: 6px; font-size: 0.95rem; white-space: nowrap; }
  .site-nav .nav-group .nav-sub a:hover, .mma-nav .nav-group .nav-sub a:hover { background: var(--ink-3, #17171f); }
  .site-nav .nav-group .nav-sub a:focus-visible, .mma-nav .nav-group .nav-sub a:focus-visible { outline-offset: -3px; }
  /* without JS: open on hover or keyboard focus */
  html:not(.js) .nav-group:hover > .nav-sub, html:not(.js) .nav-group:focus-within > .nav-sub { display: block; }
}

/* Phones and tablets, site menu (.nav-toggle): each submenu is a section that unfolds inside the menu */
@media (max-width: 960px) {
  .js .site-nav { max-height: calc(100dvh - 3.75rem); overflow-y: auto; overscroll-behavior: contain; }
  .js .site-nav .nav-group { border-bottom: 1px solid var(--line); }
  .js .site-nav .nav-sub-btn { width: 100%; min-height: 3.25rem; justify-content: space-between; font-size: 1.1rem; color: var(--chrome); padding: 0; }
  .js .site-nav .nav-caret { margin-right: 0.35rem; }
  .js .site-nav .nav-sub { padding: 0 0 0.6rem 0.15rem; }
  .js .site-nav .nav-group .nav-sub a { min-height: 3rem; font-size: 1.05rem; border-bottom: 0; color: var(--chrome-2); }
  .js .site-nav .nav-group .nav-sub a[aria-current="page"] { color: var(--chrome); }
  .js .site-nav .nav-group.is-current > .nav-sub-btn { text-decoration: none; }
  html:not(.js) .site-nav .nav-group { display: none; }   /* no JS: the footer lists every page */
}
/* Catalogue on phones: the sections and the cart keep their row; the sectors are in the footer */
@media (max-width: 720px) {
  .mma-nav .nav-group { display: none; }
}
/* Catalogue between 721 and 960 px: same panel as on wide screens */
@media (min-width: 721px) and (max-width: 960px) {
  .mma-nav .nav-sub {
    position: absolute; top: calc(100% + 0.5rem); left: -0.9rem; z-index: 8; min-width: 15.5rem; padding: 0.4rem;
    background: var(--ink-2, #0d0d12); border: 1px solid var(--line-2, rgb(255 255 255 / .14)); border-top: 2px solid var(--chroma); border-radius: 0 0 10px 10px;
  }
  .mma-nav .nav-group .nav-sub a { padding: 0.6rem 0.75rem; min-height: 44px; white-space: nowrap; }
}
@media (pointer: coarse) { .mma-nav .nav-sub-btn { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .nav-caret { transition: none; } }
/* the two carets cost ~30 px: keep the header on one line down to 961 px */
@media (min-width: 961px) and (max-width: 1500px) { .site-nav { gap: 1.2rem; } .nav-sub-btn { gap: 0.35rem; } }
@media (min-width: 961px) and (max-width: 1180px) { .site-nav { gap: 0.95rem; } }
.mma-nav .nav-group .nav-sub a { justify-content: flex-start; text-align: left; min-width: 0; }
/* catalogue header up to 1100 px: « Secteurs » takes the room of « Performance Coatings » (the chips touched it) */
@media (min-width: 721px) and (max-width: 1100px) { .cat-header .mma-wordmark em { display: none; } }