/* ============================================================
   DESIGN TOKENS
   ============================================================ */
   :root {
    /* Olive base */
    --c-dark:      #2d4a00;
    --c-mid:       #4d7800;
    --c-accent:    #6aab00;
    --c-ink:       #2c2c1a;
    --c-bg:        #eef3e2;
  
    /* Surfaces */
    --c-srf-1:     #f4f9e6;
    --c-srf-2:     #eaf2cc;
    --c-srf-3:     #deedb0;
  
    /* Semantic */
    --c-primary:   #c07800;
    --c-secondary: #5e7a70;
    --c-success:   #8fbe1f;
    --c-info:      #2e88b0;
    --c-warning:   #c49a00;
    --c-danger:    #b83a2e;
  
    /* Spacing */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-12: 3rem;
  
    /* Shape */
    --radius:       0.4rem;
    --radius-sm:    0.25rem;
    --radius-lg:    0.5rem;
    --transition:   0.18s ease;
    --hover-darken: 0.9;
  
    /* Layout */
    --widget-title-icon-width: 3.75rem;
    --header-height:  60px;
    --header-pad-x:   var(--sp-8);
    --drawer-width:   min(22rem, 85vw);
    --brand-width:    13rem;
    --nav-gap:        var(--sp-6);
    --page-max-width: 72rem;
    --page-pad-x:     var(--sp-8);
  
    /* Misc */
    --header-border:  rgba(0, 0, 0, 0.25);
    --tborder:        rgba(100, 130, 0, 0.12);
    --tborder-strong: rgba(100, 130, 0, 0.25);
    --panel-bg:       rgba(255, 255, 255, 0.55);
    --panel-border:   rgba(100, 130, 0, 0.18);
    --widget-bg:      rgba(255, 255, 255, 0.92);
    --widget-border:  rgba(100, 130, 0, 0.16);
  
    /* Typography */
    --font-heading: "Oswald", Arial Narrow, sans-serif;
    --font-body:    "Source Sans 3", Arial, sans-serif;
  }
  
  /* ============================================================
     RESET & BASE
     ============================================================ */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    color-scheme: light;
    scroll-behavior: smooth;
  }
  
  body {
    margin: 0;
    padding-top: var(--header-height);
    background-color: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  button {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  h1, h2, h3 {
    font-family: var(--font-heading);
    line-height: 1.1;
  }
  
  /* ============================================================
     BUTTONS
     ============================================================ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    padding: 0 var(--sp-6);
    border: none;
    border-radius: var(--radius-lg);
    font: 800 0.9rem/1 var(--font-heading);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: filter var(--transition), box-shadow var(--transition);
  }
  
  .btn:hover,
  .btn:focus-visible {
    filter: brightness(var(--hover-darken));
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
  }
  
  .btn--success   { background: var(--c-success); }
  .btn--primary   { background: var(--c-primary); }
  .btn--secondary { background: var(--c-secondary); }
  .btn--info      { background: var(--c-info); }
  .btn--warning   { background: var(--c-warning); color: var(--c-ink); }
  .btn--danger    { background: var(--c-danger); }
  
  /* ============================================================
     HEADER & PRIMARY NAV
     ============================================================ */
  #site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    height: var(--header-height);
    background: var(--c-dark);
    border-bottom: 1px solid var(--header-border);
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 100%
    );
  }
  
  #primary-nav {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    height: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: 0 var(--header-pad-x);
  }
  
  #primary-nav > ul {
    display: flex;
    align-items: stretch;
    flex: 1 1 0;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0;
  }
  
  #primary-nav > ul li {
    display: flex;
    height: 100%;
  }
  
  #primary-nav > ul:first-of-type {
    justify-content: flex-end;
    padding-right: calc(var(--brand-width) / 2 + var(--nav-gap));
  }
  
  #primary-nav > ul:last-of-type {
    justify-content: flex-start;
    padding-left: calc(var(--brand-width) / 2 + var(--nav-gap));
  }
  
  /* Top-level header links + dropdown trigger button. */
  #primary-nav > ul > li > button.dropdown-trigger {
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 1.1rem;
    color: rgba(255, 255, 255, 0.82);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    font-family: var(--font-heading);
    transition: color var(--transition), background var(--transition);
  }

  #primary-nav > ul > li > button.dropdown-trigger:hover,
  #primary-nav > ul > li > button.dropdown-trigger:focus-visible {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.1);
    outline: none;
  }

  /* Top-level header links only (excludes dropdown items). */
  #primary-nav > ul > li > a:not(#brand):not(#play-link) {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 1.1rem;
    color: rgba(255, 255, 255, 0.82);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    font-family: var(--font-heading);
    border-bottom: none;
    transition: color var(--transition), background var(--transition);
  }
  
  #primary-nav > ul > li > a:not(#brand):not(#play-link):hover,
  #primary-nav > ul > li > a:not(#brand):not(#play-link):focus-visible {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.1);
  }
  
  #primary-nav > ul > li > a[aria-current="page"]:not(#brand):not(#play-link) {
    color: #ffffff;
    position: relative;
  }
  
  #primary-nav > ul > li > a[aria-current="page"]:not(#brand):not(#play-link)::after {
    content: "";
    position: absolute;
    bottom: 0.5rem;
    left: 1.1rem;
    right: 1.1rem;
    height: 3px;
    background: var(--c-success);
    border-radius: 2px;
  }
  
  /* Brand (centered) */
  #brand {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--brand-width);
    height: 100%;
    transform: translate(-50%, -50%);
    overflow: hidden;
  }
  
  #brand img {
    max-height: 4.5rem;
    width: auto;
    padding-bottom: var(--sp-2);
  }
  
  /* Mobile hamburger */
  #mobile-toggle {
    display: none;
    position: absolute;
    left: var(--sp-4);
    top: 50%;
    width: 2.5rem;
    height: 2.5rem;
    transform: translateY(-50%);
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-1);
    padding: var(--sp-1);
  }
  
  #mobile-toggle span {
    display: block;
    width: 100%;
    height: 0.18rem;
    border-radius: 999px;
    background: #ffffff;
    transition: opacity var(--transition), transform var(--transition);
  }
  
  /* Play CTA — positioning only; visuals handled by .btn.btn--success */
  #play-link {
    position: absolute;
    top: 50%;
    right: var(--header-pad-x);
    z-index: 3;
    transform: translateY(-50%);
  }
  
  #play-link:hover,
  #play-link:focus-visible {
    transform: translateY(-50%);
  }
  
  /* ============================================================
     MOBILE DRAWER
     ============================================================ */
  #mobile-drawer {
    position: fixed;
    top: var(--header-height);
    left: 0;
    z-index: 999;
    width: var(--drawer-width);
    height: calc(100dvh - var(--header-height));
    padding: var(--sp-6);
    background: var(--c-dark);
    border-right: 1px solid var(--header-border);
    overflow-y: auto;
  }
  
  #mobile-drawer nav ul {
    display: grid;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  #mobile-drawer nav a {
    display: block;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius);
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    font-family: var(--font-heading);
    transition: background var(--transition), color var(--transition);
  }
  
  #mobile-drawer nav a:hover,
  #mobile-drawer nav a:focus-visible {
    background: rgba(0, 0, 0, 0.1);
    color: #ffffff;
  }
  
  #mobile-drawer nav a[aria-current="page"] {
    color: var(--c-success);
    border-color: rgba(143, 190, 31, 0.3);
  }
  
  /* ============================================================
     PAGE SHELL
     ============================================================ */
  #page-shell {
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: var(--sp-6) var(--page-pad-x) var(--sp-12);
  }
  
  /* ============================================================
     BREADCRUMB
     ============================================================ */
  #breadcrumb {
    margin-bottom: var(--sp-5);
  }
  
  #breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  #breadcrumb li {
    display: flex;
    align-items: center;
  }
  
  #breadcrumb a,
  #breadcrumb a:visited {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-mid);
    letter-spacing: 0.02em;
    transition: opacity var(--transition);
  }

  #breadcrumb a:hover {
    opacity: 0.7;
  }

  /* Page courante : même style, sans assombrir au survol (on est déjà sur la page) */
  #breadcrumb a[aria-current="page"]:hover {
    opacity: 1;
  }
  
  #breadcrumb li + li::before {
    content: "›";
    display: inline-block;
    margin: 0 var(--sp-2);
    color: var(--c-success);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
  }
  
  /* ============================================================
     PAGE LAYOUT — 2-COLUMN GRID
     ============================================================ */
  #page-main {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    gap: var(--sp-5);
    padding: var(--sp-5);
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    backdrop-filter: blur(2px);
  }
  
  #page-left,
  #page-right {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }

  #page-right {
    position: sticky;
    top: calc(var(--header-height) + var(--sp-5));
    align-self: start;
    max-height: calc(100vh - var(--header-height) - var(--sp-5) * 2);
    overflow-y: auto;
  }
  
  /* ============================================================
     WIDGETS — shared shell
     ============================================================ */
  [data-widget] {
    position: relative;
    margin: 0;
    background: var(--widget-bg);
    border: 1px solid var(--widget-border);
  }
  
  /* Stacking : supprimer le border-top entre widgets consécutifs (hors br) */
  [data-widget]:not([data-widget="br"]) + [data-widget]:not([data-widget="br"]) {
    border-top: none;
  }

  /* Après un br : restaurer le border-top du premier widget du nouveau groupe */
  [data-widget="br"] + [data-widget]:not([data-widget="br"]) {
    border-top: 1px solid var(--widget-border);
  }

  /* Coins supérieurs : premier widget d'un groupe */
  #page-left  > [data-widget]:not([data-widget="br"]):first-child,
  #page-right > [data-widget]:not([data-widget="br"]):first-child,
  [data-widget="br"] + [data-widget]:not([data-widget="br"]) {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }

  /* Coins inférieurs : dernier widget d'un groupe */
  #page-left  > [data-widget]:not([data-widget="br"]):last-child,
  #page-right > [data-widget]:not([data-widget="br"]):last-child,
  [data-widget]:not([data-widget="br"]):has(+ [data-widget="br"]) {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
  }

  /* BR : espaceur sans style visuel */
  [data-widget="br"] {
    height: var(--sp-5);
    background: none;
    border: none;
  }
  
  /* ============================================================
     WIDGET — SUBNAV (icon tabs)
     ============================================================ */
  [data-widget="subnav"] {
    background: var(--c-bg);
    border-bottom-color: var(--widget-border);
  }
  
  [data-widget="subnav"] ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  [data-widget="subnav"] li {
    display: flex;
  }
  
  [data-widget="subnav"] a {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--widget-title-icon-width);
    min-width: var(--widget-title-icon-width);
    max-width: var(--widget-title-icon-width);
    min-height: 3rem;
    padding: var(--sp-2) 0;
    font-size: 1.4rem;
    color: var(--c-ink);
    border-right: 1px solid var(--widget-border);
    transition: background var(--transition), color var(--transition);
  }
  
  
  [data-widget="subnav"] a:hover,
  [data-widget="subnav"] a:focus-visible {
    background: rgba(0, 0, 0, 0.06);
  }
  
  [data-widget="subnav"] a[aria-current="page"] {
    color: var(--c-dark);
  }
  
  [data-widget="subnav"] a[aria-current="page"]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--c-success);
  }
  
  /* ============================================================
     WIDGET — TITLE
     ============================================================ */
  [data-widget="title"] {
    --_widget-color: var(--c-success);
    display: flex;
    align-items: center;
    min-height: 60px;
    background: var(--_widget-color);
    border-color: transparent;
    overflow: hidden;
  }
  
  [data-widget="title"].widget--success   { --_widget-color: var(--c-success); }
  [data-widget="title"].widget--primary   { --_widget-color: var(--c-primary); }
  [data-widget="title"].widget--secondary { --_widget-color: var(--c-secondary); }
  /* Marques (liens communautaires) */
  [data-widget="title"].widget--discord   { --_widget-color: #5865f2; }
  [data-widget="title"].widget--reddit    { --_widget-color: #ff4500; }
  /* Dofus : dominante extraite de dofus.png (~#a3c526), assombrie pour le contraste du titre blanc */
  [data-widget="title"].widget--dofus     { --_widget-color: #8ba720; }
  [data-widget="title"].widget--info      { --_widget-color: var(--c-info); }
  [data-widget="title"].widget--warning   { --_widget-color: var(--c-warning); color: var(--c-ink); }
  [data-widget="title"].widget--danger    { --_widget-color: var(--c-danger); }
  
  [data-widget="title"] .widget-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--widget-title-icon-width);
    height: 60px;
    background: rgba(0, 0, 0, 0.15);
    font-size: 1.5rem;
    overflow: hidden;
  }
  
  [data-widget="title"] .widget-icon img {
    width: 100%;
    height: 100%;
    padding: var(--sp-2);
    object-fit: contain;
  }
  
  [data-widget="title"] h1,
  [data-widget="title"] h2 {
    margin: 0;
    padding: var(--sp-1) var(--sp-4);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  
  /* Secondary column title — compact size only */
  #page-right [data-widget="title"] {
    min-height: 50px;
  }
  
  #page-right [data-widget="title"] .widget-icon {
    height: 50px;
  }
  
  #page-right [data-widget="title"] h1,
  #page-right [data-widget="title"] h2 {
    font-size: 1rem;
  }

  [data-widget="title"]:has(> a.widget-title-link) {
    transition: filter var(--transition);
  }

  [data-widget="title"] > a.widget-title-link {
    display: flex;
    flex: 1;
    align-items: center;
    align-self: stretch;
    min-width: 0;
    width: 100%;
    color: inherit;
    text-decoration: none;
  }

  /* Barre entière (icône + titre) : même survol / focus clavier */
  [data-widget="title"]:has(> a.widget-title-link):hover,
  [data-widget="title"]:has(> a.widget-title-link:focus-within) {
    filter: brightness(0.9);
  }
  
  /* ============================================================
     TEXT COLOR UTILITIES
     ============================================================ */
  .u-success   { color: var(--c-success); }
  .u-primary   { color: var(--c-primary); }
  .u-secondary { color: var(--c-secondary); }
  .u-info      { color: var(--c-info); }
  .u-warning   { color: var(--c-warning); }
  .u-danger    { color: var(--c-danger); }
  
  /* ============================================================
     WIDGET — CONTENT (rich text)
     ============================================================ */
  [data-widget="content"] {
    padding: var(--sp-5) var(--sp-6);
    color: var(--c-ink);
    font-size: 0.975rem;
    line-height: 1.65;
  }
  
  [data-widget="content"] > :first-child { margin-top: 0; }
  [data-widget="content"] > :last-child  { margin-bottom: 0; }
  
  [data-widget="content"] h2,
  [data-widget="content"] h3 {
    color: var(--c-mid);
    font-family: var(--font-heading);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: var(--sp-5) 0 var(--sp-2);
  }
  
  [data-widget="content"] p {
    margin: 0 0 var(--sp-3);
  }
  
  [data-widget="content"] strong {
    color: var(--c-mid);
  }
  
  /* ============================================================
     WIDGET — TABLE
     ============================================================ */
  [data-widget="table"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  [data-widget="table"] table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
  }
  
  [data-widget="table"] thead th {
    position: sticky;
    top: 0;
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-srf-2);
    color: var(--c-ink);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    vertical-align: middle;
    border-bottom: 2px solid var(--tborder-strong);
    white-space: nowrap;
  }
  
  [data-widget="table"] thead th[data-sort-key] {
    cursor: pointer;
    user-select: none;
    transition: filter var(--transition);
  }
  
  [data-widget="table"] thead th[data-sort-key]:hover {
    filter: brightness(var(--hover-darken));
  }
  
  [data-widget="table"] thead th[data-sort-key]::after {
    content: " ↕";
    opacity: 0.5;
    font-size: 0.75rem;
  }
  
  [data-widget="table"] thead th[data-sort-dir="asc"]::after  { content: " ↑"; opacity: 1; }
  [data-widget="table"] thead th[data-sort-dir="desc"]::after { content: " ↓"; opacity: 1; }
  
  [data-widget="table"] tbody tr {
    background: var(--widget-bg);
    transition: background var(--transition);
  }
  
  [data-widget="table"] tbody tr:hover {
    background: rgba(0, 0, 0, 0.07);
  }
  
  [data-widget="table"] tbody td {
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--tborder);
    vertical-align: middle;
    text-align: center;
    color: var(--c-ink);
  }

  [data-widget="table"] .empty-state-cell {
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    color: var(--c-muted);
    font-style: italic;
  }
  
  [data-widget="table"] td.col-number {
    width: 3.5rem;
    color: var(--c-ink);
    font-size: 0.85rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  [data-widget="table"] td.col-id {
    font-size: 0.78rem;
    color: var(--c-mid);
    font-family: monospace;
    white-space: nowrap;
  }

  [data-widget="table"] td.col-item-name {
    font-weight: 600;
    color: var(--c-mid);
  }

  .category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.15em 0.5em;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--c-srf-3);
    color: var(--c-ink);
  }

  .category-emoji {
    font-size: 1em;
    line-height: 1;
  }
  
  [data-widget="table"] tbody tr {
    height: 5rem;
  }
  
  [data-widget="table"] td.col-name {
    font-weight: 600;
    color: var(--c-mid);
  }
  
  .col-name-inner {
    display: flex;
    align-items: center;
  }
  
  [data-widget="table"] td.col-image {
    position: relative;
  }

  .monster-thumb {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4.5rem;
    height: auto;
    object-fit: contain;
  }

  .item-thumb {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
  }
  
  [data-widget="table"] td.col-name a {
    color: inherit;
    transition: opacity var(--transition);
  }
  
  [data-widget="table"] td.col-name a:hover {
    opacity: 0.7;
    text-decoration: underline;
  }
  
  [data-widget="table"] td.col-type {
    font-size: 0.82rem;
  }
  
  .type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.15em 0.5em;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--c-srf-3);
    color: var(--c-ink);
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0.1rem 0.15rem 0.1rem 0;
    white-space: nowrap;
  }
  
  .type-icon {
    width: 1em;
    height: 1em;
    object-fit: contain;
    flex-shrink: 0;
  }
  
  /* ============================================================
     FILTER INPUT
     ============================================================ */
  .filter-input {
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 2px solid var(--widget-border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.9rem;
    background: var(--c-srf-1);
    color: var(--c-ink);
    outline: none;
    transition: border-color var(--transition);
  }
  
  .filter-input:focus,
  .filter-input:focus-visible {
    outline: none;
    border-color: var(--c-success);
  }
  
  .filter-fieldset {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    font-size: 0.88rem;
  }
  
  .filter-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    padding: 0.25em 0.6em;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-weight: 600;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
  }
  
  .filter-checkbox input[type="checkbox"],
  .filter-checkbox input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    padding: 0;
  }
  
  .filter-checkbox:hover {
    background: color-mix(in srgb, var(--_panel-color, var(--c-success)) 10%, transparent);
    border-color: color-mix(in srgb, var(--_panel-color, var(--c-success)) 35%, transparent);
  }

  .filter-checkbox:has(input[type="checkbox"]:checked),
  .filter-checkbox:has(input[type="radio"]:checked) {
    opacity: 1;
    background: var(--type-bg);
    border-color: var(--type-border);
    color: var(--type-text);
  }

  .filter-checkbox:has(input[type="checkbox"]:checked):hover,
  .filter-checkbox:has(input[type="radio"]:checked):hover {
    background: color-mix(in srgb, var(--type-bg) 85%, var(--type-border));
    border-color: var(--type-border);
  }
  
  .filter-checkbox .type-icon {
    width: 1em;
    height: 1em;
    object-fit: contain;
    flex-shrink: 0;
  }
  
  #page-right [data-widget="content"] h2,
  #page-right [data-widget="content"] h3 {
    color: var(--_panel-color, var(--c-success));
  }
  
  #page-right .filter-input {
    background: color-mix(in srgb, var(--_panel-color, var(--c-success)) 8%, #fff);
    border-color: color-mix(in srgb, var(--_panel-color, var(--c-success)) 25%, #fff);
  }
  
  #page-right .filter-input:focus,
  #page-right .filter-input:focus-visible {
    border-color: var(--_panel-color, var(--c-success));
  }
  
  
  /* ============================================================
     RESPONSIVE — ≤ 900px
     ============================================================ */
  @media (max-width: 900px) {
    :root {
      --header-height: 4.5rem;
      --header-pad-x:  var(--sp-4);
      --page-pad-x:    var(--sp-4);
    }
  
    #primary-nav > ul {
      display: none;
    }
  
    #mobile-toggle {
      display: flex;
    }
  
    #brand img {
      max-height: 3.75rem;
      padding-bottom: 0;
    }
  
    #play-link {
      right: var(--sp-4);
      height: 2.25rem;
      padding: 0 var(--sp-3);
      font-size: 0.82rem;
    }
  
    #page-main {
      grid-template-columns: 1fr;
      padding: var(--sp-3);
      gap: var(--sp-4);
    }

    #page-right {
      position: static;
      align-self: auto;
      max-height: none;
      overflow-y: visible;
    }
  
    #page-left  > [data-widget]:not([data-widget="br"]):first-child,
    #page-right > [data-widget]:not([data-widget="br"]):first-child,
    [data-widget="br"] + [data-widget]:not([data-widget="br"]) {
      border-top-left-radius: var(--radius);
      border-top-right-radius: var(--radius);
    }

    #page-left  > [data-widget]:not([data-widget="br"]):last-child,
    #page-right > [data-widget]:not([data-widget="br"]):last-child,
    [data-widget]:not([data-widget="br"]):has(+ [data-widget="br"]) {
      border-bottom-left-radius: var(--radius);
      border-bottom-right-radius: var(--radius);
    }
  
    #page-right {
      margin-top: var(--sp-1);
    }
  }
  
  @media (max-width: 500px) {
    [data-widget="subnav"] a {
      width: var(--widget-title-icon-width);
      min-width: var(--widget-title-icon-width);
      max-width: var(--widget-title-icon-width);
      font-size: 1.2rem;
    }
  
    [data-widget="title"] h1,
    [data-widget="title"] h2 {
      font-size: 1.1rem;
    }
  
    #breadcrumb a {
      font-size: 0.8rem;
    }
  }
  
  /* ============================================================
     FOCUS VISIBLE
     ============================================================ */
  :focus-visible {
    outline: 2px solid var(--c-success);
    outline-offset: 2px;
  }
  
  /* ============================================================
     UTILITY
     ============================================================ */
  .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;
  }
  
  /* ============================================================
     DROPDOWN NAV
     ============================================================ */
  #primary-nav .has-dropdown {
    position: relative;
  }
  
  #primary-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 500;
    min-width: 9rem;
    padding: var(--sp-2) 0;
    background: var(--c-srf-1);
    border: 1px solid var(--tborder-strong);
    border-top: 3px solid var(--c-success);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%);
    transition:
      opacity var(--transition),
      visibility 0s linear 0.18s;
  }
  
  #primary-nav .has-dropdown:hover .dropdown-menu,
  #primary-nav .has-dropdown.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity var(--transition),
      visibility 0s linear 0s;
  }
  
  #primary-nav .dropdown-menu li {
    display: block;
    height: auto;
  }
  
  #primary-nav .dropdown-menu a {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    color: var(--c-mid);
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-left: 3px solid transparent;
    transition: background var(--transition), border-color var(--transition);
  }
  
  #primary-nav .dropdown-menu a:hover,
  #primary-nav .dropdown-menu a:focus-visible {
    background: rgba(0, 0, 0, 0.06);
    border-left-color: var(--c-success);
  }
  
  #primary-nav .dropdown-trigger::after {
    content: " ▾";
    font-size: 0.7rem;
    opacity: 0.6;
    transition: opacity var(--transition);
  }
  
  #primary-nav .has-dropdown:hover .dropdown-trigger::after,
  #primary-nav .has-dropdown.is-open .dropdown-trigger::after {
    opacity: 1;
  }

  /* ============================================================
     PLAY — embedded game
     ============================================================ */
  .play-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: min(72rem, 100%);
    margin-inline: auto;
  }

  .play-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: min(85vh, calc(100vw * 9 / 16));
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .play-iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    vertical-align: top;
  }

  .play-fs-btn {
    position: absolute;
    right: var(--sp-3);
    bottom: var(--sp-3);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    transition:
      background var(--transition),
      border-color var(--transition),
      transform var(--transition);
  }

  .play-fs-btn:hover,
  .play-fs-btn:focus-visible {
    background: rgba(0, 0, 0, 0.72);
    border-color: var(--c-success);
    outline: none;
  }

  .play-fs-icon {
    display: block;
    pointer-events: none;
  }

  /* [hidden] doit primer sur display:block (sinon l’icône inactive reste visible). */
  .play-fs-btn .play-fs-icon[hidden] {
    display: none !important;
  }