/* ============================================================================
   Habillage du catalogue lui-meme. N'est PAS a copier dans vos projets :
   les composants vivent dans css/components/.
   ========================================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Instrument Sans", var(--font-ui);
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Lien d'evitement : premier element focalisable de la page. */
.cat-saut {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--c-text);
  color: var(--c-surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  text-decoration: none;
  transition: top var(--t-base);
}
.cat-saut:focus { top: 12px; }

/* ---------------------------------------------------------------------------
   EN-TETE
   ------------------------------------------------------------------------ */
.cat-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--c-border);
}
.cat-head__marque {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: var(--fs-md);
  text-decoration: none;
  color: var(--c-text);
  white-space: nowrap;
}
.cat-head__marque b { font-weight: 700; letter-spacing: -.015em; }
.cat-head__marque span {
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--c-primary);
  color: var(--c-primary-text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}
.cat-head__spacer { flex: 1; }

.cat-head select, .cat-head input[type="search"], .cat-btn, .cat-menu-b {
  height: 34px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-sm);
}
.cat-head select { padding: 0 var(--sp-2); }
.cat-head input[type="search"] { width: 230px; padding: 0 var(--sp-3); }
.cat-head input[type="search"]::placeholder { color: var(--c-text-muted); }
.cat-btn { padding: 0 var(--sp-3); font-weight: var(--fw-semi); cursor: pointer; }
.cat-btn:hover { background: var(--c-surface-2); }
.cat-btn--icone { display: grid; place-items: center; width: 34px; padding: 0; }
.cat-btn--icone svg { width: 16px; height: 16px; }
.cat-ico-lune { display: none; }
[data-theme="dark"] .cat-ico-soleil { display: none; }
[data-theme="dark"] .cat-ico-lune { display: block; }

/* Menu des categories : un popover natif, sans une ligne de JavaScript. */
.cat-menu-b {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 var(--sp-3);
  font-weight: var(--fw-semi);
  cursor: pointer;
  anchor-name: --menu-cat;
}
.cat-menu-b:hover { background: var(--c-surface-2); }
.cat-menu-b svg { width: 14px; height: 14px; }
.cat-menu {
  position-anchor: --menu-cat;
  position-area: block-end span-inline-end;
  position-try-fallbacks: flip-block;
  margin: 6px 0 0;
  width: 300px;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-4);
}
.cat-menu:not([popover]) { display: none; }
.cat-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--c-text);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.cat-menu a:hover { background: var(--c-primary-soft); color: var(--c-primary-ink); }
.cat-menu b { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.cat-menu::backdrop { background: rgba(10,12,18,.14); }

@media (max-width: 900px) {
  .cat-head { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .cat-head input[type="search"] { width: 130px; }
  .cat-head select { display: none; }
}

/* ---------------------------------------------------------------------------
   ACCUEIL
   ------------------------------------------------------------------------ */
.cat-hero { padding: var(--sp-16) var(--sp-5) var(--sp-12); }
.cat-hero__in { max-width: 1180px; margin: 0 auto; }
.cat-hero__sur {
  display: inline-block;
  margin-bottom: var(--sp-4);
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: var(--c-primary-soft);
  color: var(--c-primary-ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cat-hero h1 {
  margin: 0 0 var(--sp-4);
  font-size: clamp(30px, 5.4vw, 58px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.cat-hero p { margin: 0; max-width: 62ch; font-size: var(--fs-xl); line-height: 1.6; color: var(--c-text-soft); }
.cat-hero code, .cat-section code, .cat-pied code {
  font-family: var(--font-mono);
  font-size: .88em;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--c-surface-2);
  color: var(--c-text);
}
.cat-hero__chiffres { display: flex; flex-wrap: wrap; gap: var(--sp-10); margin-top: var(--sp-8); }
.cat-hero__chiffres b {
  display: block;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cat-hero__chiffres span { display: block; margin-top: 5px; font-size: var(--fs-sm); color: var(--c-text-muted); }

.cat-section { padding: var(--sp-12) var(--sp-5); max-width: 1180px; margin: 0 auto; }
.cat-section--grise {
  max-width: none;
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.cat-section--grise > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.cat-section__tete { margin-bottom: var(--sp-6); }
.cat-section h2 { margin: 0 0 var(--sp-2); font-size: clamp(21px, 2.6vw, 28px); font-weight: 700; letter-spacing: -.025em; }
.cat-section__tete p { margin: 0; max-width: 66ch; font-size: var(--fs-lg); color: var(--c-text-soft); line-height: 1.6; }

.cat-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--sp-4); }
.cat-carte {
  display: flex; flex-direction: column;
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  text-decoration: none; color: inherit;
  transition: border-color var(--t-fast), transform var(--t-base), box-shadow var(--t-base);
}
.cat-carte:hover { border-color: var(--c-primary); transform: translateY(-3px); box-shadow: var(--sh-2); }
.cat-carte h3 { margin: 0 0 7px; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }
.cat-carte p { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.55; }
.cat-carte__compte {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  color: var(--c-primary-ink);
}

.cat-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sp-6); }
.cat-etapes b {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: var(--c-primary-text);
  font-size: var(--fs-md); font-weight: 800;
}
.cat-etapes h4 { margin: 0 0 6px; font-size: var(--fs-lg); font-weight: 700; }
.cat-etapes p { margin: 0; font-size: var(--fs-md); color: var(--c-text-soft); line-height: 1.6; }

.cat-deux { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: start; }
.cat-deux p { font-size: var(--fs-md); color: var(--c-text-soft); line-height: 1.65; }
.cat-code {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: #12151b;
  color: #d5dde8;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  overflow-x: auto;
}
.cat-liste { margin: 0; padding-left: var(--sp-5); }
.cat-liste li { margin-bottom: 9px; font-size: var(--fs-md); color: var(--c-text-soft); line-height: 1.6; }

.cat-technos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-4); }
.cat-technos > div {
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.cat-technos b { display: block; font-size: var(--fs-lg); font-weight: 700; margin-bottom: 5px; }
.cat-technos span { display: block; margin-bottom: var(--sp-3); font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.55; }
.cat-technos code { font-size: 11px; }

@media (max-width: 800px) {
  .cat-deux { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cat-hero { padding: var(--sp-10) var(--sp-4) var(--sp-8); }
  .cat-hero__chiffres { gap: var(--sp-6); }
  .cat-section { padding: var(--sp-8) var(--sp-4); }
}

/* ---------------------------------------------------------------------------
   PAGE DE CATEGORIE
   ------------------------------------------------------------------------ */
.cat-wrap { display: flex; align-items: flex-start; gap: var(--sp-8); max-width: 1500px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-12); }
.cat-nav { position: sticky; top: 74px; width: 226px; flex: none; font-size: var(--fs-sm); max-height: calc(100vh - 100px); overflow-y: auto; }
.cat-nav h4 { margin: var(--sp-4) 0 var(--sp-2); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-muted); }
.cat-nav h4:first-child { margin-top: 0; }
.cat-nav a { display: block; padding: 5px var(--sp-3); border-radius: var(--r-sm); color: var(--c-text-soft); text-decoration: none; }
.cat-nav a:hover { background: var(--c-surface-2); color: var(--c-text); }
.cat-main { flex: 1; min-width: 0; }

.cat-titre { font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -.03em; margin: 0 0 var(--sp-2); }
.cat-titre span { font-family: var(--font-mono); }
.cat-chapo { font-size: var(--fs-lg); color: var(--c-text-soft); margin: 0 0 var(--sp-8); max-width: 74ch; line-height: 1.62; }
.cat-chapo code { font-family: var(--font-mono); font-size: .9em; padding: 2px 5px; border-radius: var(--r-xs); background: var(--c-surface-2); }
.cat-fam { margin: var(--sp-12) 0 var(--sp-5); padding-top: var(--sp-6); border-top: 1px solid var(--c-border); }
.cat-fam h2 { font-size: 21px; font-weight: 700; margin: 0 0 var(--sp-2); letter-spacing: -.02em; }
.cat-fam p { margin: 0; color: var(--c-text-soft); font-size: var(--fs-md); max-width: 76ch; line-height: 1.6; }

/* ---------------------------------------------------------------------------
   FICHE
   ------------------------------------------------------------------------ */
.cat-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-5); align-items: start; }
.fiche {
  display: flex; flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.fiche:hover { border-color: var(--c-border-strong); }
.fiche__scene {
  position: relative;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--sp-3);
  min-height: 132px;
  padding: var(--sp-6);
  overflow-x: auto;
  background:
    linear-gradient(45deg, var(--c-surface-2) 25%, transparent 25%, transparent 75%, var(--c-surface-2) 75%),
    linear-gradient(45deg, var(--c-surface-2) 25%, transparent 25%, transparent 75%, var(--c-surface-2) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border-bottom: 1px solid var(--c-border);
}
/* Seule la categorie Boutons garde le damier : ailleurs les blocs occupent
   toute la largeur et le motif fatigue. */
.fiche__scene:not(.fiche__scene--btn) {
  display: block;
  padding: var(--sp-4);
  background: var(--c-surface-2);
  min-height: 0;
}
.fiche__scene:not(.fiche__scene--btn) > .demo-row,
.fiche__scene:not(.fiche__scene--btn) > .demo-col { display: flex; }
.fiche--large .fiche__scene { padding: var(--sp-6); }

.fiche__meta { padding: var(--sp-4); }
.fiche--large .fiche__meta { max-width: 84ch; }
.fiche__ligne { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 6px; }
.fiche__id {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  padding: 3px 7px;
  border: none;
  border-radius: var(--r-xs);
  background: var(--c-primary-soft);
  color: var(--c-primary-ink);
  cursor: pointer;
}
.fiche__id:hover { background: var(--c-primary); color: var(--c-primary-text); }
.fiche__nom { font-size: var(--fs-md); font-weight: 700; }
.fiche__usage { font-size: var(--fs-sm); color: var(--c-text-soft); line-height: 1.55; margin: 0; }

/* Le code est replie : la fiche montre le rendu, pas la syntaxe. */
.fiche__code { border-top: 1px solid var(--c-border); }
.fiche__code > summary {
  display: flex; align-items: center; gap: 7px;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.fiche__code > summary::-webkit-details-marker { display: none; }
.fiche__code > summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--t-base);
}
.fiche__code[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.fiche__code > summary:hover { background: var(--c-surface-2); color: var(--c-text); }
.fiche__cacher { display: none; }
.fiche__code[open] .fiche__voir { display: none; }
.fiche__code[open] .fiche__cacher { display: inline; }

.fiche__tabs { display: flex; gap: 2px; padding: 0 var(--sp-2); background: var(--c-surface-2); }
.fiche__tab {
  padding: 6px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  color: var(--c-text-muted);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.fiche__tab:hover { color: var(--c-text); }
.fiche__tab.is-actif { background: #12151b; color: #e6edf3; }
.fiche__pre {
  display: none; margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: #12151b; color: #d5dde8;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.65;
  max-height: 340px; overflow: auto; white-space: pre;
}
.fiche__pre.is-actif { display: block; }
.fiche__copie {
  display: block; width: 100%;
  padding: 8px;
  border: none; border-top: 1px solid var(--c-border);
  background: var(--c-surface-2); color: var(--c-text-soft);
  font-family: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer;
}
.fiche__copie:hover { background: var(--c-surface-3); color: var(--c-text); }
.fiche__copie.is-ok { color: var(--c-success); }

.cat-grille > .est-large { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------------
   PIED DE PAGE
   ------------------------------------------------------------------------ */
.cat-pied {
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
  padding: var(--sp-10) var(--sp-5) var(--sp-5);
}
.cat-pied__in { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: var(--sp-10); max-width: 1180px; margin: 0 auto; }
.cat-pied b { display: block; font-size: var(--fs-lg); font-weight: 700; margin-bottom: 7px; }
.cat-pied p { margin: 0; font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.6; max-width: 46ch; }
.cat-pied nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.cat-pied nav div { display: flex; flex-direction: column; gap: 7px; }
.cat-pied nav a { font-size: var(--fs-sm); color: var(--c-text-soft); text-decoration: none; }
.cat-pied nav a:hover { color: var(--c-primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.cat-pied__bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3);
  max-width: 1180px; margin: var(--sp-8) auto 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-xs); color: var(--c-text-muted);
}
.cat-pied__bas code { font-size: 11px; }
@media (max-width: 800px) {
  .cat-pied__in { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cat-pied nav { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) { .cat-nav { display: none; } .cat-wrap { padding: var(--sp-4); } }

/* ---------------------------------------------------------------------------
   DIVERS
   ------------------------------------------------------------------------ */
.cat-toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  padding: 11px 20px;
  border-radius: var(--r-full);
  background: var(--c-text); color: var(--c-surface);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base);
  z-index: 100;
}
.cat-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.is-masque { display: none !important; }
/* --- Scenes speciales des demos ----------------------------------------- */
.demo-row  { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); }
.demo-row--haute { padding-top: 34px; }
.demo-col  { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); width: 100%; max-width: 300px; }
.demo-photo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3);
  width: 100%; padding: var(--sp-6); border-radius: var(--r-md);
  background: linear-gradient(135deg, #4f74c8 0%, #8b5fbf 50%, #d9737d 100%);
}
.demo-photo--sombre { background: linear-gradient(135deg, #1a2332 0%, #2d3f52 60%, #46342e 100%); }
.demo-photo--noir   { background: radial-gradient(circle at 30% 20%, #171a2e 0%, #06070d 70%); }
.demo-neo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-4);
  width: 100%; padding: var(--sp-6); border-radius: var(--r-md);
  background: #e8ebf0;
}
.demo-canevas {
  position: relative; width: 100%; height: 132px;
  border-radius: var(--r-md); background: var(--c-surface-2);
  border: 1px dashed var(--c-border);
}
.demo-canevas .btn { position: absolute; right: var(--sp-4); bottom: var(--sp-4); }
.demo-bandeau {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-radius: var(--r-md); background: var(--c-success); color: #fff;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.demo-etats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); width: 100%; }
.demo-etats > div { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.demo-etats em { font-family: var(--font-mono); font-size: 10px; font-style: normal; color: var(--c-text-muted); }
.demo-etats .btn { width: 100%; font-size: var(--fs-sm); }

/* Les blocs de galerie occupent toute la largeur : le damier de transparence
   n'apporte rien et fatigue la lecture. Fond uni, contenu cale en haut. */
/* Seule la categorie Boutons garde le damier de transparence : partout
   ailleurs les blocs occupent toute la largeur et le motif fatigue. */
.fiche__scene:not(.fiche__scene--btn) {
  display: block;
  padding: var(--sp-4);
  background: var(--c-surface-2);
  min-height: 0;
}
.fiche__scene:not(.fiche__scene--btn) > .demo-row,
.fiche__scene:not(.fiche__scene--btn) > .demo-col { display: flex; }

/* Les variantes concues pleine largeur (bannieres, en-tetes, tableaux de bord,
   assemblages) occupent toute la grille : les ecraser dans une colonne de
   340 px casse les titres et tronque les formulaires. */
.cat-grille > .est-large { grid-column: 1 / -1; }
.fiche--large .fiche__scene { padding: var(--sp-6); }
.fiche--large .fiche__meta  { max-width: 82ch; }
/* Garde-fou : rien ne deborde jamais horizontalement d'une fiche. */
.fiche__scene { overflow-x: auto; }