/* 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.4rem; height: 1.4rem; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; border-radius: 4px;
}
.theme-chip span {
  display: block; width: 100%; height: 100%; 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; }