/* ==========================================================================
   VIBRATON — système de design
   Affiche de concert × produit bien fini. Thème « scène » (sombre) par défaut,
   thème « papier d'affiche » sous prefers-color-scheme: light.
   Référence des classes : docs/UI.md
   ========================================================================== */

@layer reset, tokens, base, layout, shell, components, utilities;

/* --------------------------------------------------------------------------
   Polices auto-hébergées (aucun CDN)
   latin-ext est déclaré AVANT latin : « œ » (U+0152-0153) figure dans les deux plages, et la règle
   déclarée en dernier gagne. Ainsi « Bœufs » utilise le fichier latin déjà préchargé, sans télécharger latin-ext.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/archivo-black/archivo-black-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/archivo-black/archivo-black-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/fonts/inter/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/fonts/inter/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    color-scheme: dark;

    /* Scène : noir chaud, crème, orange ampli */
    --bg: #14110f;
    --surface: #1b1714;
    --surface-2: #231e1a;
    --surface-3: #2d2621;
    --line: #352d27;
    --line-strong: #4d433a;
    --control-line: #857766;
    --text: #f4ead6;
    --text-muted: #bfb29c;
    --text-faint: #9a8e7b;

    --accent: #ff6b1f;
    --accent-hover: #ff8442;
    --accent-press: #ec5b10;
    --accent-shade: #9c3905;
    --accent-text: #ff8a4c;
    --accent-strong: #ff6b1f; /* orange en GRAND (≥ 24 px), bordures et anneaux : ≥ 3:1 sur les fonds */
    --accent-soft: rgb(255 107 31 / 0.14);
    --on-accent: #1a0d05;

    --vu: #ffcf33;
    --vu-text: #ffd75e;
    --vu-soft: rgb(255 207 51 / 0.14);
    --on-vu: #1a1405;

    --signal: #3ee08a;
    --signal-text: #5ee89e;
    --signal-soft: rgb(62 224 138 / 0.14);
    --on-signal: #04170c;

    --danger: #ff5a4f;
    --danger-text: #ff7d73;
    --danger-soft: rgb(255 90 79 / 0.14);
    --on-danger: #1c0402;

    --tape: #efe4c8;
    --on-tape: #1d1813;
    --focus: #ffcf33;

    --vu-face: #f7e7b4;
    --vu-ink: #2a231c;
    --vu-rim: #0d0b09;
    --vu-hot: #19b862;
    --vu-hot-ink: #0f7a3f;
    --needle: #c62d10;

    --logo-bg: #231e1a;
    --logo-ink: #ff6b1f;
    --logo-wave: #ffcf33;

    --shadow-1: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 1px 2px rgb(0 0 0 / 0.45);
    --shadow-2: 0 14px 34px -14px rgb(0 0 0 / 0.7), 0 2px 6px rgb(0 0 0 / 0.35);
    --shadow-3: 0 30px 60px -18px rgb(0 0 0 / 0.75), 0 6px 16px rgb(0 0 0 / 0.4);
    --spotlight: radial-gradient(ellipse 90% 55% at 50% -12%, rgb(255 107 31 / 0.11), transparent 62%);

    --grain-opacity: 0.075;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bfb29c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

    /* Typo */
    --font-display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', Impact, system-ui, sans-serif;
    --font-body: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fs-xs: 0.875rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
    --fs-2xl: clamp(1.9rem, 1.4rem + 2.6vw, 3rem);
    --fs-3xl: clamp(2.5rem, 1.6rem + 4.6vw, 5rem);
    --fs-display: clamp(3.1rem, 1.2rem + 9.2vw, 8.75rem);

    /* Espace, formes */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --radius-btn: 2px; /* éléments cliquables (pastilles, onglets, anneau de focus des boutons Gaffer) : angles droits */
    --ink: #1b1611; /* encre d’impression : bord des aplats colorés (pastille cochée, portes…), dans les deux thèmes */

    --container: 72rem;
    --container-narrow: 44rem;
    --gutter: 1rem;
    --topbar-h: 3.75rem;
    --tabbar-h: 4.25rem;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-bounce: cubic-bezier(0.3, 1.5, 0.5, 1);
  }

  /* Papier d'affiche */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme='dark']) {
      color-scheme: light;
      --bg: #f3ead7;
      --surface: #fbf6ea;
      --surface-2: #efe5d0;
      --surface-3: #e5d8bd;
      --line: #dccdb0;
      --line-strong: #c4b291;
      --control-line: #8f7d62;
      --text: #1b1611;
      --text-muted: #5a4e40;
      --text-faint: #6f6252;
      --accent: #ff6b1f;
      --accent-hover: #ff7d38;
      --accent-press: #f05d12;
      --accent-shade: #b8470b;
      --accent-text: #a33705;
      --accent-strong: #d64510;
      --accent-soft: rgb(255 107 31 / 0.15);
      --on-accent: #1a0d05;
      --vu: #ffcf33;
      --vu-text: #7a4f00; /* 5,4:1 sur --vu-soft (badges 12 px) */
      --vu-soft: rgb(255 196 0 / 0.22);
      --signal: #2fcf78;
      --signal-text: #0f6636; /* 5:1 sur --signal-soft */
      --signal-soft: rgb(47 191 113 / 0.16);
      --on-signal: #04170c;
      --danger: #d22d20;
      --danger-text: #b3241a;
      --danger-soft: rgb(210 45 32 / 0.1);
      --on-danger: #ffffff;
      --tape: #dcc8a0; /* Thème papier : ruban kraft et encre foncée (le fondateur ne veut plus d'aplat noir, 31/10/2026). */
      --on-tape: #1b1611;
      --focus: #a33705;
      --logo-bg: #1b1611;
      --shadow-1: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 1px 2px rgb(60 40 20 / 0.12);
      --shadow-2: 0 14px 30px -14px rgb(60 40 20 / 0.35), 0 2px 6px rgb(60 40 20 / 0.1);
      --shadow-3: 0 30px 60px -20px rgb(60 40 20 / 0.45), 0 6px 16px rgb(60 40 20 / 0.14);
      --spotlight: radial-gradient(ellipse 90% 55% at 50% -12%, rgb(255 107 31 / 0.12), transparent 62%);
      --grain-opacity: 0.13;
      --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .1 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a4e40' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    }
  }

  /* Forçage manuel éventuel : <html data-theme="light"> */
  :root[data-theme='light'] {
    color-scheme: light;
    --bg: #f3ead7;
    --surface: #fbf6ea;
    --surface-2: #efe5d0;
    --surface-3: #e5d8bd;
    --line: #dccdb0;
    --line-strong: #c4b291;
    --control-line: #8f7d62;
    --text: #1b1611;
    --text-muted: #5a4e40;
    --text-faint: #6f6252;
    --accent-hover: #ff7d38;
    --accent-press: #f05d12;
    --accent-shade: #b8470b;
    --accent-text: #a33705;
    --accent-strong: #d64510;
    --accent-soft: rgb(255 107 31 / 0.15);
    --vu-text: #7a4f00; /* 5,4:1 sur --vu-soft (badges 12 px) */
    --vu-soft: rgb(255 196 0 / 0.22);
    --signal: #2fcf78;
    --signal-text: #0f6636; /* 5:1 sur --signal-soft */
    --signal-soft: rgb(47 191 113 / 0.16);
    --danger: #d22d20;
    --danger-text: #b3241a;
    --danger-soft: rgb(210 45 32 / 0.1);
    --on-danger: #ffffff;
    --tape: #dcc8a0;
    --on-tape: #1b1611;
    --focus: #a33705;
    --logo-bg: #1b1611;
    --shadow-1: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 1px 2px rgb(60 40 20 / 0.12);
    --shadow-2: 0 14px 30px -14px rgb(60 40 20 / 0.35), 0 2px 6px rgb(60 40 20 / 0.1);
    --shadow-3: 0 30px 60px -20px rgb(60 40 20 / 0.45), 0 6px 16px rgb(60 40 20 / 0.14);
    --grain-opacity: 0.13;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .1 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a4e40' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }

  @media (min-width: 640px) {
    :root {
      --gutter: 1.5rem;
    }
  }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
  }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    hanging-punctuation: first last;
  }
  body {
    min-height: 100dvh;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }
  img,
  video {
    height: auto;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }
  button {
    cursor: pointer;
  }
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }
  ul[role='list'],
  ol[role='list'] {
    list-style: none;
    padding: 0;
  }
  table {
    border-collapse: collapse;
  }
  [hidden] {
    display: none !important;
  }
  dialog {
    color: inherit;
  }
  summary {
    cursor: pointer;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
@layer base {
  html {
    background: var(--bg);
    scroll-padding-top: calc(var(--topbar-h) + 1rem);
  }
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }
  body {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--spotlight) no-repeat, var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.55;
    font-optical-sizing: auto;
    font-feature-settings: 'cv11', 'ss03';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  /* Grain d'affiche, derrière le contenu */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--grain);
    opacity: var(--grain-opacity);
  }

  h1,
  h2,
  .display {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1;
    text-wrap: balance;
  }
  h1 {
    font-size: var(--fs-3xl);
  }
  h2 {
    font-size: var(--fs-2xl);
  }
  /* Pages pratiques (onboarding, paramètres, demandes, messages…) : pas de capitales qui crient (PRODUCT §0.4).
     La typo d'affiche en capitales reste pour la landing et les grands titres de section. */
  .is-calm h1,
  .is-calm h2,
  .is-calm .display {
    text-transform: none;
    letter-spacing: -0.015em;
    line-height: 1.1;
  }
  .is-calm h2 {
    font-size: var(--fs-xl);
  }
  h3 {
    font-size: var(--fs-lg);
    font-weight: 780;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  h4 {
    font-size: var(--fs-base);
    font-weight: 750;
    line-height: 1.3;
  }
  p {
    text-wrap: pretty;
  }
  a {
    color: var(--accent-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 0.15s, text-decoration-thickness 0.15s;
  }
  a:hover {
    text-decoration-thickness: 2px;
  }
  strong,
  b {
    font-weight: 750;
  }
  small {
    font-size: var(--fs-sm);
  }
  hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin-block: var(--s-5);
  }
  code,
  kbd,
  pre {
    font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.9em;
  }
  code {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.08em 0.35em;
  }
  ::selection {
    background: var(--accent);
    color: var(--on-accent);
  }
  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }
  :focus:not(:focus-visible) {
    outline: none;
  }
  main:focus {
    outline: none;
  }
  html {
    scrollbar-color: var(--line-strong) transparent;
  }
}

/* --------------------------------------------------------------------------
   Mise en page
   -------------------------------------------------------------------------- */
@layer layout {
  .container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
  .container-narrow {
    width: min(100% - 2 * var(--gutter), var(--container-narrow));
    margin-inline: auto;
  }
  .container-wide {
    width: min(100% - 2 * var(--gutter), 86rem);
    margin-inline: auto;
  }
  .section {
    padding-block: clamp(3rem, 2rem + 5vw, 6.5rem);
  }
  .section-sm {
    padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
  }
  .page {
    padding-block: var(--s-5) var(--s-8);
  }

  .stack > * + * {
    margin-block-start: var(--stack, var(--s-4));
  }
  .stack-xs {
    --stack: var(--s-1);
  }
  .stack-sm {
    --stack: var(--s-2);
  }
  .stack-md {
    --stack: var(--s-4);
  }
  .stack-lg {
    --stack: var(--s-6);
  }
  .stack-xl {
    --stack: var(--s-8);
  }
  .stack-xs,
  .stack-sm,
  .stack-md,
  .stack-lg,
  .stack-xl {
    display: block;
  }
  .stack-xs > * + *,
  .stack-sm > * + *,
  .stack-md > * + *,
  .stack-lg > * + *,
  .stack-xl > * + * {
    margin-block-start: var(--stack);
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster, var(--s-2));
  }
  .cluster-lg {
    --cluster: var(--s-4);
  }
  .spread {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
  }
  .grid-cards {
    display: grid;
    gap: var(--grid-gap, var(--s-4));
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 19rem)), 1fr));
  }
  .grid-2,
  .grid-3,
  .grid-4 {
    display: grid;
    gap: var(--grid-gap, var(--s-4));
  }
  @media (min-width: 640px) {
    .grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .grid-3,
    .grid-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 960px) {
    .grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .grid-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .split {
    display: grid;
    gap: var(--s-6);
    align-items: center;
  }
  @media (min-width: 900px) {
    .split {
      grid-template-columns: 1fr 1fr;
      gap: var(--s-7);
    }
    .split--wide-left {
      grid-template-columns: 1.3fr 1fr;
    }
  }
  .with-sidebar {
    display: grid;
    gap: var(--s-5);
  }
  @media (min-width: 960px) {
    .with-sidebar {
      grid-template-columns: minmax(0, 1fr) 20rem;
      align-items: start;
    }
  }
  .center {
    display: grid;
    place-items: center;
  }
}

/* --------------------------------------------------------------------------
   Coque de l'app : barre du haut, onglets mobiles, pied de page
   -------------------------------------------------------------------------- */
@layer shell {
  .skip-link {
    position: absolute;
    left: var(--s-3);
    top: -100px;
    z-index: 200;
    padding: var(--s-2) var(--s-4);
    background: var(--vu);
    color: var(--on-vu);
    font-weight: 800;
    border-radius: var(--radius);
    text-decoration: none;
  }
  .skip-link:focus {
    top: var(--s-3);
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: var(--topbar-h);
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .topbar__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--s-3);
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
  }
  .brand__mark {
    width: 2rem;
    height: 2rem;
  }
  .brand__word {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
    padding-top: 0.08em;
  }
  .brand:hover .brand__mark {
    --logo-wave: var(--accent);
  }

  .nav-main {
    display: none;
    align-items: center;
    gap: var(--s-1);
    margin-inline: auto;
  }
  .nav-main a,
  .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-btn);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 1.02rem; /* lisible au premier coup d'œil (retour du 30/10) */
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
  }
  .nav-main a:hover,
  .nav-link:hover {
    color: var(--text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
  }
  .nav-main .count {
    margin-left: -0.1rem;
  }
  .nav-main a[aria-current='page'] {
    color: var(--text);
  }
  .nav-main a[aria-current='page']::after {
    content: '';
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    bottom: -0.62rem;
    height: 4px;
    background: var(--accent);
  }
  .nav-main .icon {
    width: 1.15rem;
    height: 1.15rem;
  }
  /* Entre 900 et 1100 px, cinq entrées + pastilles : on garde les mots, on lâche les pictos. */
  @media (max-width: 1099px) {
    .nav-main .icon {
      display: none;
    }
  }
  .nav-actions {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-left: auto;
  }
  .icon-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-btn);
    color: var(--text-muted);
    background: transparent;
    border: 0;
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
  }
  .icon-btn:hover {
    color: var(--text);
    background: var(--surface-2);
  }
  .icon-btn[aria-current='page'] {
    color: var(--accent-text);
  }
  .icon-btn .icon {
    width: 1.35rem;
    height: 1.35rem;
  }
  .icon-btn .count,
  .tabbar .count {
    position: absolute;
    top: 0.3rem;
    right: 0.25rem;
    box-shadow: 0 0 0 2px var(--bg);
  }
  .nav-me {
    display: none;
  }
  .nav-cta {
    display: inline-flex;
  }
  /* Petit écran (visiteur : logo + « Créer mon annonce » + menu) : on resserre, jamais de défilement horizontal.
     Sous 360 px, le logo garde son pictogramme (le lien garde son nom accessible) et lâche le mot. */
  @media (max-width: 399px) {
    .topbar__inner:has(.nav-cta) {
      gap: var(--s-2);
    }
    .topbar__inner:has(.nav-cta) .brand {
      gap: 0.4rem;
    }
    .topbar__inner:has(.nav-cta) .brand__mark {
      width: 1.75rem;
      height: 1.75rem;
    }
    .topbar__inner:has(.nav-cta) .brand__word {
      font-size: 1.1rem;
    }
    .topbar__inner:has(.nav-cta) .nav-actions {
      gap: 2px;
    }
  }
  @media (max-width: 359px) {
    .topbar__inner:has(.nav-cta) .brand__word {
      display: none;
    }
  }
  .nav-guest-links {
    display: none;
  }

  /* Menu replié (visiteur, mobile) */
  .nav-menu {
    position: relative;
  }
  .nav-menu > summary {
    list-style: none;
  }
  .nav-menu > summary::-webkit-details-marker {
    display: none;
  }
  .nav-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    width: min(18rem, calc(100vw - 2rem));
    padding: var(--s-2);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    display: grid;
    gap: 2px;
  }
  .nav-menu__panel a,
  .nav-menu__panel button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-btn);
    color: var(--text);
    background: none;
    border: 0;
    font-weight: 650;
    text-decoration: none;
    text-align: left;
  }
  .nav-menu__panel a:hover,
  .nav-menu__panel button:hover {
    background: var(--surface-2);
  }
  .nav-menu__panel hr {
    margin: var(--s-1) 0;
  }
  /* Qui est connecté·e (haut du menu « Moi ») */
  .nav-menu__who {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.8rem 0.75rem;
    margin-bottom: var(--s-1);
    border-bottom: 1px solid var(--line);
    min-width: 0;
  }
  .nav-menu__who > span:last-child {
    display: grid;
    min-width: 0;
    line-height: 1.25;
  }
  .nav-menu__who strong {
    font-weight: 800;
  }
  .nav-menu__who strong + span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    color: var(--text-muted);
  }
  .nav-menu__panel .icon {
    width: 1.15rem;
    height: 1.15rem;
    color: var(--text-muted);
  }

  @media (min-width: 900px) {
    .nav-main,
    .nav-guest-links {
      display: flex;
    }
    .nav-me {
      display: block;
    }
    .nav-menu--guest {
      display: none;
    }
  }

  /* Barre d'onglets mobile */
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--line);
  }
  .tabbar a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 1.9rem;
    transition: color 0.2s;
  }
  .tabbar .icon {
    width: 1.4rem;
    height: 1.4rem;
  }
  .tabbar .count {
    top: -0.3rem;
    right: 0.1rem;
    box-shadow: 0 0 0 2px var(--surface);
  }
  .tabbar a[aria-current='page'] {
    color: var(--text);
  }
  .tabbar a[aria-current='page'] .tabbar__icon {
    color: var(--accent-text);
  }
  .tabbar a[aria-current='page']::before {
    content: '';
    position: absolute;
    top: 0;
    width: 2rem;
    height: 4px;
    background: var(--accent);
  }
  body.has-tabbar {
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  }
  @media (min-width: 900px) {
    .tabbar {
      display: none;
    }
    body.has-tabbar {
      padding-bottom: 0;
    }
  }

  main {
    flex: 1 0 auto;
  }

  /* Pied de page */
  .footer {
    margin-top: var(--s-8);
    border-top: 1px solid var(--line);
    background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.12));
    padding-block: var(--s-7) var(--s-6);
    color: var(--text-muted);
    font-size: var(--fs-sm);
  }
  .footer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-6) var(--s-4);
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
  .footer .brand {
    color: var(--text);
  }
  @media (min-width: 760px) {
    .footer__brand {
      grid-column: auto;
    }
    .footer__grid {
      grid-template-columns: 1.4fr repeat(3, 1fr);
    }
  }
  .footer__brand p {
    max-width: 22rem;
    margin-top: var(--s-3);
  }
  .footer h2 {
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    color: var(--text);
    margin-bottom: var(--s-3);
  }
  .footer ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.45rem;
  }
  .footer a {
    color: var(--text-muted);
    text-decoration: none;
  }
  .footer a:hover {
    color: var(--text);
    text-decoration: underline;
  }
  .footer__cities {
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
  }
  .footer__fine {
    margin-top: var(--s-5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-3);
    color: var(--text-faint);
  }
  .footer .footer__bonus {
    color: var(--text-faint);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
  .footer .footer__bonus:hover {
    color: var(--text);
  }
}

/* --------------------------------------------------------------------------
   Composants
   -------------------------------------------------------------------------- */
@layer components {
  /* Icônes ---------------------------------------------------------------- */
  .icon {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.2em;
  }
  .icon--sm {
    width: 1em;
    height: 1em;
  }
  .icon--lg {
    width: 1.6em;
    height: 1.6em;
  }

  /* Boutons « Gaffer » (docs/PRODUCT.md §0.5) --------------------------------
     Un bouton = un bout de gaffer collé sur l'affiche : aplat franc, bouts gauche et droit déchirés (clip-path),
     collé un peu de travers ; il se redresse au survol, au focus et à l'appui. Libellé en Archivo Black, capitales.
     Le ruban est dessiné sur ::before (z-index -1, isolation sur le bouton) : la boîte du bouton n'est jamais
     rognée, l'anneau de focus reste entier et toute la boîte reste cliquable. AUCUNE icône dans un bouton texte,
     aucune ombre, aucune lueur, aucun dégradé. ::after reste libre pour le spinner htmx.
     Découpe en px sur les côtés (même déchirure quelle que soit la largeur), en % en hauteur.
     Variables : --btn-bg (le ruban ; transparent = pas de ruban), --btn-fg (l'encre), --btn-hover-bg, --btn-press-bg,
     --btn-tilt (l'angle de la variante), --btn-shape (la découpe). Un conteneur peut poser --btn-tilt-k (hérité,
     1 par défaut) pour atténuer l'angle des bandes larges (cartes, pieds de dialogue). */
  .btn {
    --btn-bg: var(--tape);
    --btn-fg: var(--on-tape);
    --btn-hover-bg: var(--btn-bg);
    --btn-press-bg: var(--btn-hover-bg);
    --btn-tilt: -1.2deg;
    --btn-rot: calc(var(--btn-tilt) * var(--btn-tilt-k, 1));
    --btn-shape: polygon(4px 8%, 0 22%, 3px 40%, 0 58%, 4px 76%, 1px 92%, 7px 100%, calc(100% - 7px) 98%, 100% 88%, calc(100% - 4px) 70%, 100% 52%, calc(100% - 3px) 34%, 100% 16%, calc(100% - 5px) 0, 5px 3%);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 2.75rem;
    padding: 0.8125rem 1.375rem;
    border: 0;
    border-radius: var(--radius-btn);
    background: transparent;
    color: var(--btn-fg);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
    transform: rotate(var(--btn-rot));
    transition: transform 0.16s var(--ease), color 0.12s;
  }
  /* Le ruban : bouts déchirés, bords haut et bas presque droits. */
  .btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--btn-bg);
    clip-path: var(--btn-shape);
    transition: background-color 0.12s;
  }
  /* Survol (souris), focus clavier, appui : le gaffer se recolle droit. */
  @media (hover: hover) {
    .btn:where(:not([disabled], [aria-disabled='true'])):hover {
      transform: none;
    }
    .btn:where(:not([disabled], [aria-disabled='true'])):hover::before {
      background: var(--btn-hover-bg);
    }
  }
  .btn:focus-visible,
  .btn:where(:not([disabled], [aria-disabled='true'])):active,
  .pass[open] > summary.btn {
    transform: none;
  }
  .btn:where(:not([disabled], [aria-disabled='true'])):active::before,
  .pass[open] > summary.btn::before {
    background: var(--btn-press-bg);
  }
  /* Focus : l'anneau entoure toute la boîte (non rognée), bien détaché du ruban. */
  .btn:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }
  /* Un bouton texte n'a pas d'icône (filet de sécurité pour les boutons écrits à la main). */
  .btn:not(.btn--icon) > .icon {
    display: none;
  }
  .btn--icon .icon {
    width: 1.2em;
    height: 1.2em;
  }

  /* Gaffer orange ampli, encre noire : l'appel principal. */
  .btn--primary {
    --btn-bg: var(--accent);
    --btn-fg: var(--on-accent);
    --btn-hover-bg: var(--accent-hover);
    --btn-press-bg: var(--accent-press);
  }
  /* Gaffer crème (noir sur papier), collé dans l'autre sens : l'action d'à côté. `tape` : même ruban, ancien nom,
     penché comme l'appel principal (grands appels). */
  .btn--secondary,
  .btn--tape {
    --btn-bg: var(--tape);
    --btn-fg: var(--on-tape);
    --btn-hover-bg: color-mix(in srgb, var(--tape) 90%, var(--bg));
    --btn-press-bg: color-mix(in srgb, var(--tape) 80%, var(--bg));
  }
  .btn--secondary {
    --btn-tilt: 0.8deg;
  }
  /* Ruban mat, translucide : l'action discrète (« Pas pour moi », raccourcis). */
  .btn--outline {
    --btn-bg: color-mix(in srgb, var(--tape) 20%, transparent);
    --btn-fg: var(--text);
    --btn-hover-bg: color-mix(in srgb, var(--tape) 30%, transparent);
    --btn-press-bg: color-mix(in srgb, var(--tape) 38%, transparent);
    --btn-tilt: 0.8deg;
  }
  .btn--danger {
    --btn-bg: var(--danger);
    --btn-fg: var(--on-danger);
    --btn-hover-bg: color-mix(in srgb, var(--danger) 90%, #000);
  }
  .btn--signal {
    --btn-bg: var(--signal);
    --btn-fg: var(--on-signal);
    --btn-hover-bg: color-mix(in srgb, var(--signal) 90%, #000);
    --btn-tilt: 0.8deg;
  }
  /* Bouton texte discret : pas de ruban, police du texte, droit ; le libellé se souligne au survol. */
  .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-tilt: 0deg;
    font-family: var(--font-body);
    font-weight: 750;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    text-transform: none;
    padding-inline: 0.85em;
  }
  .btn--ghost::before {
    content: none;
  }
  .btn--ghost:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.22em;
  }
  .btn--ghost:active {
    color: var(--text-muted);
  }
  /* Capitales d'affiche plus espacées : réservées aux grands appels (landing), jamais dans un formulaire. */
  .btn--loud {
    letter-spacing: 0.07em;
  }
  /* Pages pratiques (body.is-calm) : un « loud » oublié redevient un bouton normal (PRODUCT §0.4). */
  .is-calm .btn--loud {
    letter-spacing: 0.04em;
  }
  .btn--sm {
    min-height: 2.25rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
  }
  /* « Créer mon annonce » dans l'en-tête d'un petit téléphone : plus serré, pour que le menu reste dans l'écran
     (ici, dans la couche des composants : la taille des boutons y est définie). */
  @media (max-width: 399px) {
    .topbar .btn--sm.nav-cta {
      padding-inline: 0.55rem;
      font-size: 0.66rem;
      letter-spacing: 0;
    }
  }
  .btn--lg {
    min-height: 3.25rem;
    padding: 0.9375rem 1.625rem;
    font-size: 0.9375rem;
  }
  .btn--xl {
    min-height: 3.9rem;
    padding: 1.125rem 2rem;
    font-size: 1.125rem;
  }
  .btn--ghost.btn--sm {
    font-size: 0.875rem;
    padding-inline: 0.7em;
  }
  .btn--ghost.btn--lg {
    font-size: 1.05rem;
  }
  /* Bande pleine largeur : à peine de travers, sinon une longue bande a l'air cassée. */
  .btn--block {
    --btn-tilt-k: 0.4;
    display: flex;
    width: 100%;
  }
  /* Petit écran : un bouton passe à la ligne plutôt que de déborder (le ruban suit). */
  @media (max-width: 480px) {
    .btn {
      max-width: 100%;
      white-space: normal;
      text-wrap: balance;
    }
    .btn--lg,
    .btn--xl {
      padding-inline: 1.25rem;
    }
  }
  /* « Créer mon annonce » dans l'en-tête : toujours sur une ligne (la barre du haut se resserre, voir .topbar). */
  .nav-cta {
    white-space: nowrap;
  }
  @media (max-width: 399px) {
    .nav-cta.btn--sm {
      padding-inline: 0.7rem;
    }
  }
  /* Bouton icône seule : pas de ruban, discret, droit. */
  .btn--icon {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-tilt: 0deg;
    padding: 0;
    width: 2.75rem;
  }
  .btn--icon::before {
    content: none;
  }
  .btn--icon:hover {
    background: var(--surface-2);
  }
  .btn--icon.btn--sm {
    width: 2.25rem;
  }
  /* Désactivé : ruban passé, curseur « interdit », il ne se redresse plus. */
  .btn[disabled],
  .btn[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
  }
  a.btn[aria-disabled='true'] {
    pointer-events: none; /* un lien n'a pas d'état désactivé natif */
  }
  .btn.htmx-request,
  form.htmx-request .btn[type='submit'] {
    color: transparent;
    text-decoration: none;
  }
  .btn.htmx-request::after,
  form.htmx-request .btn[type='submit']::after {
    content: '';
    position: absolute;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2.5px solid var(--btn-fg);
    border-right-color: transparent;
    animation: spin 0.7s linear infinite;
  }
  /* Mouvement réduit : le gaffer reste collé, moins penché, et ne bouge plus (le ruban change juste de teinte). */
  @media (prefers-reduced-motion: reduce) {
    .btn,
    .btn::before {
      transition: none;
    }
    .btn,
    .btn:hover,
    .btn:focus-visible,
    .btn:active,
    .pass[open] > summary.btn {
      transform: rotate(calc(var(--btn-rot) * 0.5));
    }
  }
  /* Contraste forcé (Windows) : le fond du ruban (::before) est effacé par le système et le bouton n'était plus
     qu'un mot. Un cadre aux couleurs système lui rend sa forme ; les boutons texte et icône restent sans cadre. */
  @media (forced-colors: active) {
    .btn:not(.btn--ghost, .btn--icon) {
      border: 2px solid currentColor;
    }
    .btn[disabled],
    .btn[aria-disabled='true'] {
      color: GrayText;
    }
  }
  .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    align-items: center;
  }

  /* Étiquettes « gaffer » ------------------------------------------------- */
  .tag {
    --tilt: -1.6deg;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.5em 0.8em 0.42em;
    background: var(--tape);
    color: var(--on-tape);
    font-family: var(--font-display);
    font-size: 0.8rem;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(var(--tilt));
    clip-path: polygon(
      3px 0,
      calc(100% - 2px) 1px,
      100% 28%,
      calc(100% - 3px) 52%,
      100% 78%,
      calc(100% - 1px) 100%,
      2px calc(100% - 1px),
      0 72%,
      3px 46%,
      0 18%
    );
  }
  .tag:nth-child(even) {
    --tilt: 1.2deg;
  }
  .tag--straight {
    --tilt: 0deg !important;
  }
  .tag--orange {
    background: var(--accent);
    color: var(--on-accent);
  }
  .tag--yellow {
    background: var(--vu);
    color: var(--on-vu);
  }
  .tag--green {
    background: var(--signal);
    color: var(--on-signal);
  }
  .tag--red {
    background: var(--danger);
    color: var(--on-danger);
  }
  .tag--dark {
    background: var(--surface-3);
    color: var(--text);
  }
  .tag--lg {
    font-size: 0.85rem;
    padding: 0.6em 1em 0.52em;
  }
  .tag .icon {
    width: 1.1em;
    height: 1.1em;
    stroke-width: 2.6;
  }

  /* Badges (puces de statut) ---------------------------------------------- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.32em 0.65em;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 680;
    line-height: 1.2;
    white-space: nowrap;
  }
  .badge--accent {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--accent-text);
  }
  .badge--vu {
    background: var(--vu-soft);
    border-color: color-mix(in srgb, var(--vu) 45%, transparent);
    color: var(--vu-text);
  }
  .badge--signal {
    background: var(--signal-soft);
    border-color: color-mix(in srgb, var(--signal) 45%, transparent);
    color: var(--signal-text);
  }
  .badge--danger {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    color: var(--danger-text);
  }
  .badge--solid {
    background: var(--tape);
    border-color: var(--tape);
    color: var(--on-tape);
  }
  .badge .dot {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: currentColor;
  }
  .badge--live .dot {
    box-shadow: 0 0 0 0 currentColor;
    animation: pulse 2s infinite;
  }

  /* Pastille de compteur */
  .count {
    display: inline-grid;
    place-items: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.32rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.75rem;
    font-weight: 850;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .count[data-count='0'],
  .count:empty {
    display: none;
  }
  .count.is-bumped {
    animation: bump 0.45s var(--ease-bounce);
  }

  /* Avatar ---------------------------------------------------------------- */
  .avatar {
    --size: 2.75rem;
    --h: 20;
    position: relative;
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    overflow: hidden;
    background:
      radial-gradient(circle at 30% 25%, hsl(var(--h) 60% 38% / 0.9), transparent 70%),
      hsl(var(--h) 38% 20%);
    color: hsl(var(--h) 90% 86%);
    box-shadow: inset 0 0 0 1.5px hsl(var(--h) 60% 55% / 0.45);
    font-family: var(--font-display);
    font-size: calc(var(--size) * 0.38);
    line-height: 1;
    letter-spacing: 0.02em;
    text-decoration: none;
    user-select: none;
  }
  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .avatar--xs {
    --size: 1.75rem;
  }
  .avatar--sm {
    --size: 2.25rem;
  }
  .avatar--lg {
    --size: 4rem;
  }
  .avatar--xl {
    --size: 6.5rem;
  }
  .avatar--hero {
    --size: clamp(6rem, 4rem + 10vw, 9.5rem);
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme='dark']) .avatar {
      background:
        radial-gradient(circle at 30% 25%, hsl(var(--h) 85% 92%), transparent 70%),
        hsl(var(--h) 60% 82%);
      color: hsl(var(--h) 65% 22%);
      box-shadow: inset 0 0 0 1.5px hsl(var(--h) 50% 40% / 0.35);
    }
  }
  :root[data-theme='light'] .avatar {
    background:
      radial-gradient(circle at 30% 25%, hsl(var(--h) 85% 92%), transparent 70%),
      hsl(var(--h) 60% 82%);
    color: hsl(var(--h) 65% 22%);
    box-shadow: inset 0 0 0 1.5px hsl(var(--h) 50% 40% / 0.35);
  }
  .avatar__status {
    position: absolute;
    right: 2%;
    bottom: 2%;
    width: 26%;
    height: 26%;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 2px var(--surface);
  }
  .avatars {
    display: flex;
  }
  .avatars > .avatar + .avatar {
    margin-left: calc(var(--size) * -0.28);
    box-shadow: 0 0 0 2px var(--surface);
  }

  /* Cartes ---------------------------------------------------------------- */
  .card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--card-pad, 1.15rem);
    box-shadow: var(--shadow-1);
  }
  @media (min-width: 640px) {
    .card {
      --card-pad: 1.35rem;
    }
  }
  .card--raised {
    box-shadow: var(--shadow-2);
  }
  .card--flush {
    padding: 0;
    overflow: hidden;
  }
  .card--interactive {
    transition: border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
  }
  .card--interactive:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
  }
  .card--accent {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), var(--shadow-2);
  }
  .card--dashed {
    background: transparent;
    border: 1px solid var(--line);
    box-shadow: none;
  }
  .card__title {
    font-size: var(--fs-lg);
  }
  .card__title a {
    color: inherit;
    text-decoration: none;
  }
  .card__title a:hover {
    text-decoration: underline;
  }
  .card__link-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .card__footer {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
  }
  .card > .tag--pinned,
  .tag--pinned {
    position: absolute;
    top: -0.6rem;
    left: 1rem;
    --tilt: -3deg;
    z-index: 2;
  }

  /* Carte de match (Sélection, Explorer) */
  .match-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
  }
  .match-card__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--s-3);
    align-items: start;
  }
  .match-card__who {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
  }
  .match-card__name {
    font-size: 1.2rem;
    font-weight: 820;
    line-height: 1.15;
  }
  .match-card__name a {
    color: var(--text);
    text-decoration: none;
  }
  .match-card__name a:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
  }
  .match-card__name .age {
    font-weight: 500;
    color: var(--text-muted);
  }
  /* Le « · » de chaque élément tombe dans une gouttière de 1rem rognée à gauche : quand la ligne passe à la
     ligne, le séparateur du premier élément de la nouvelle ligne est caché (jamais de « · » en début de ligne).
     Le rognage déborde en haut, à droite et en bas (valeurs négatives) pour laisser passer les anneaux de focus. */
  .meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0;
    margin-left: -1rem;
    clip-path: inset(-0.5rem -0.5rem -0.5rem calc(1rem - 4px));
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.35;
  }
  .meta-line > * {
    position: relative;
    margin-left: 1rem;
  }
  .meta-line .icon {
    width: 1em;
    height: 1em;
  }
  .meta-line > *::before {
    content: '·';
    position: absolute;
    left: -0.65rem;
    color: var(--text-faint);
  }
  .meta-line--plain {
    margin-left: 0;
    clip-path: none;
  }
  .meta-line--plain > * {
    margin-left: 0;
  }
  .meta-line--plain > *::before {
    content: none;
  }
  .match-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.5rem;
  }
  /* « Ça m’intéresse » + « Pas pour moi » : côte à côte s'il y a la place, sinon l'un sous l'autre, en bandes
     pleine largeur à peine de travers (jamais de débordement, même à 320 px). */
  .match-card__actions {
    --btn-tilt-k: 0.4;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-2);
    margin-top: auto;
    align-items: stretch;
  }
  .match-card__actions > .btn,
  .match-card__actions > .pass {
    flex: 1 1 auto;
  }
  .match-card__actions > .pass > summary.btn {
    width: 100%;
    height: 100%;
  }
  /* « Ça m'intéresse » prend la ligne ; « Voir le profil » (et « Pas pour moi ») se partagent la suivante. */
  .match-card__actions > .btn--lg {
    flex-basis: 100%;
  }
  /* « Nouvelle fiche » : un ruban à cheval sur le bord, en haut à droite. */
  .match-card {
    position: relative;
  }
  .match-card__corner {
    position: absolute;
    top: -0.7rem;
    right: 1rem;
    z-index: 1;
    pointer-events: none;
  }
  .artist-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
  }
  .artist-list li {
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
  }
  .artist-list li.is-common {
    background: var(--vu-soft);
    border-color: color-mix(in srgb, var(--vu) 50%, transparent);
    color: var(--vu-text);
  }

  /* « Pas pour moi » : menu de raisons en 1 tap */
  /* Le panneau se positionne par rapport à la rangée d'actions (toute la largeur de la carte). */
  .pass {
    position: static;
  }
  .pass > summary {
    list-style: none;
  }
  .pass > summary::-webkit-details-marker {
    display: none;
  }
  .pass > summary {
    cursor: pointer;
  }
  .pass__panel {
    --btn-tilt-k: 1; /* les petits gaffers des raisons gardent leur angle, même dans une rangée de bandes larges */
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 20;
    padding: var(--s-3);
    background: var(--surface);
    border: 2px solid var(--text);
    border-radius: var(--radius-btn);
    box-shadow: var(--shadow-3);
  }
  .pass__panel p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: var(--s-2);
  }
  .pass__reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  /* Places à prendre, groupes, jams */
  .slot-card {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding-top: 1.6rem;
    background:
      linear-gradient(135deg, var(--accent-soft), transparent 45%),
      var(--surface);
  }
  .slot-card__role {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
    line-height: 1;
  }
  .slot-card__role .emoji {
    font-size: 1.6rem;
  }
  .slot-card__note {
    font-style: italic;
    color: var(--text-muted);
    border-left: 3px solid var(--accent);
    padding-left: var(--s-3);
  }
  .lineup {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    padding: 0;
  }
  .seat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem 0.3rem 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--text);
    white-space: nowrap;
  }
  .seat__emoji {
    font-size: 1rem;
    line-height: 1;
  }
  /* Pictogramme d'instrument : un emoji, ou un dessin pour la basse (#i-bass) pour ne pas la confondre avec la guitare. */
  .imark {
    display: inline-block;
    line-height: 1;
  }
  svg.imark {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--accent-text);
  }
  .seat svg.seat__emoji {
    width: 1.1rem;
    height: 1.1rem;
  }
  .seat--open.seat--you {
    border-style: solid;
    border-width: 2px;
  }
  .seat--open {
    background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line));
    color: var(--accent-text);
  }
  .seat--ok::after {
    content: '✓';
    color: var(--signal-text);
    font-weight: 900;
  }
  .seat--declined {
    color: var(--text-faint);
    text-decoration: line-through;
  }

  .band-card {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .band-card__cover {
    --h: 20;
    position: relative;
    aspect-ratio: 16 / 7;
    display: flex;
    align-items: flex-end;
    padding: var(--s-4);
    background:
      radial-gradient(circle at 78% 20%, hsl(var(--h) 85% 58% / 0.5), transparent 55%),
      radial-gradient(circle at 10% 110%, hsl(calc(var(--h) + 50) 80% 50% / 0.35), transparent 50%),
      linear-gradient(135deg, hsl(var(--h) 40% 18%), hsl(calc(var(--h) + 30) 35% 9%));
    color: #fbf3e2;
    isolation: isolate;
  }
  .band-card__cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    opacity: 0.25;
    mix-blend-mode: overlay;
    z-index: -1;
  }
  .band-card__cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
  }
  .band-card__cover:has(img)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.75), transparent 70%);
    z-index: -1;
  }
  .band-card__name {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
    line-height: 0.95;
    text-shadow: 0 2px 12px rgb(0 0 0 / 0.5);
  }
  .band-card__name a {
    color: inherit;
    text-decoration: none;
  }
  .band-card__status {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
  }
  .band-card__body {
    padding: var(--s-4);
    display: grid;
    gap: var(--s-3);
  }

  /* Ticket de jam */
  .ticket {
    --hole: var(--bg);
    position: relative;
    display: grid;
    grid-template-columns: 5.75rem minmax(0, 1fr);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
  }
  .ticket__stub {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.1rem;
    padding: var(--s-4) var(--s-2);
    background: var(--stub-bg, var(--accent));
    color: var(--stub-fg, var(--on-accent));
    text-align: center;
  }
  .ticket__stub::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -6px;
    width: 12px;
    background: radial-gradient(circle at 6px 9px, var(--hole) 4px, transparent 4.6px) 0 0 / 12px 18px repeat-y;
  }
  .ticket__weekday,
  .ticket__month {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    line-height: 1.1;
  }
  .ticket__day {
    font-family: var(--font-display);
    font-size: 2.1rem;
    line-height: 0.95;
  }
  .ticket__time {
    margin-top: 0.25rem;
    font-weight: 800;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
  }
  .ticket__tbd {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 0.9rem;
    line-height: 1.05;
  }
  .ticket--tbd .ticket__stub {
    --stub-bg: repeating-linear-gradient(-45deg, var(--surface-3) 0 7px, var(--surface-2) 7px 14px);
    --stub-fg: var(--text);
  }
  .ticket--groupe {
    --stub-bg: var(--vu);
    --stub-fg: var(--on-vu);
  }
  .ticket--matchee {
    --stub-bg: var(--signal);
    --stub-fg: var(--on-signal);
  }
  .ticket--ouverte {
    --stub-bg: var(--tape);
    --stub-fg: var(--on-tape);
  }
  .ticket--past .ticket__stub {
    filter: grayscale(0.85);
  }
  .ticket--past .ticket__title a {
    color: var(--text-muted);
  }
  .ticket__body {
    padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 6px);
    display: grid;
    gap: 0.45rem;
    align-content: start;
  }
  .ticket__title {
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.2;
  }
  .ticket__title a {
    color: var(--text);
    text-decoration: none;
  }
  .ticket__title a:hover {
    text-decoration: underline;
  }

  /* Formulaires ----------------------------------------------------------- */
  .form {
    display: grid;
    gap: var(--s-5);
  }
  .field {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    min-width: 0;
    border: 0;
    padding: 0;
  }
  fieldset.field > legend {
    padding: 0;
    margin-bottom: 0.45rem;
  }
  .field__label,
  fieldset.field > legend {
    font-weight: 740;
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--text);
  }
  .field__label--big,
  fieldset.field > legend.field__label--big {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: var(--fs-xl);
    line-height: 1.1;
    margin-bottom: var(--s-2);
  }
  .field__optional {
    font-weight: 500;
    color: var(--text-faint);
    font-size: 0.85em;
  }
  .field__required {
    color: var(--accent-text);
    margin-left: 0.15em;
  }
  .field__hint {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
  }
  .field__error {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    color: var(--danger-text);
    font-weight: 650;
    font-size: 0.9rem;
    line-height: 1.35;
  }
  .field__error .icon {
    width: 1.05em;
    height: 1.05em;
    margin-top: 0.1em;
  }
  .field__counter {
    justify-self: end;
    font-size: 0.875rem;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
  }
  .field__counter.is-over {
    color: var(--danger-text);
    font-weight: 750;
  }
  .field-row {
    display: grid;
    gap: var(--s-4);
  }
  @media (min-width: 640px) {
    .field-row {
      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    }
    /* Côte à côte, l'aide passe sous le champ : les étiquettes et les champs restent alignés, même quand un seul
       des deux a une aide (« Niveau minimum » à côté de « Un concert à assurer ? »). */
    .field-row > .field > .field__hint {
      order: 1;
    }
    .field-row > .field > .field__error {
      order: 2;
    }
  }

  /* « Continuer avec Google » (partials/google.njk) : le bouton neutre des règles de Google (fond clair, « G » en
     couleurs, libellé sombre), pas un ruban gaffer ; puis « ou » avant le formulaire e-mail. */
  .google-signin {
    display: grid;
    gap: var(--s-2);
  }
  .google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 2.9rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid #747775;
    border-radius: var(--radius);
    background: #ffffff;
    color: #1f1f1f;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
  }
  .google-btn:hover {
    background: #f2f2f2;
    text-decoration: none;
  }
  .google-btn:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }
  .google-btn__g {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
  }
  .google-signin__fine {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
  }
  .google-signin__or {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-2) 0 0;
    color: var(--text-muted);
    font-size: var(--fs-sm);
  }
  .google-signin__or::before,
  .google-signin__or::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--line);
  }

  /* « Où t'écouter » (partials/links.njk) : un nom par réseau, avec le « @ » ou le « .bandcamp.com » autour. */
  .links-fields {
    display: grid;
    gap: var(--s-3);
    /* Pas de marge du haut : celle de la pile qui l'entoure (.stack-*) s'applique. */
    margin-inline: 0;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  .links-fields__grid {
    display: grid;
    gap: var(--s-3) var(--s-4);
  }
  @media (min-width: 640px) {
    .links-fields__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .links-fields__more {
    display: grid;
    gap: var(--s-3);
  }
  .links-fields__more > summary {
    width: fit-content;
    cursor: pointer;
    font-weight: 700;
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .links-fields__more[open] > summary {
    margin-bottom: var(--s-2);
  }
  .link-field {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
  }
  .link-field__label {
    font-size: var(--fs-sm);
    font-weight: 750;
  }
  .link-field__box {
    display: flex;
    align-items: center;
    min-width: 0;
    border: 1.5px solid var(--control-line);
    border-radius: var(--radius);
    background: var(--surface-2);
  }
  .link-field__box:focus-within {
    border-color: var(--text);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .link-field.has-error .link-field__box {
    border-color: var(--danger-text);
  }
  .link-field__affix {
    flex: none;
    padding-inline: 0.7rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    white-space: nowrap;
  }
  .link-field__affix:first-child {
    padding-right: 0;
  }
  .link-field__affix:last-child {
    padding-left: 0;
  }
  .link-field__input.input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .link-field__input.input:focus {
    outline: none;
    box-shadow: none;
  }

  .input,
  .select,
  .textarea {
    display: block;
    width: 100%;
    min-height: 2.9rem;
    padding: 0.68rem 0.85rem;
    background: var(--surface-2);
    color: var(--text);
    border: 1.5px solid var(--control-line);
    border-radius: var(--radius);
    font-size: 1rem;
    line-height: 1.35;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  }
  .input::placeholder,
  .textarea::placeholder {
    color: var(--text-faint);
    opacity: 1;
  }
  .input:hover,
  .select:hover,
  .textarea:hover {
    border-color: var(--text-muted);
  }
  .input:focus-visible,
  .select:focus-visible,
  .textarea:focus-visible,
  .input:focus,
  .select:focus,
  .textarea:focus {
    outline: none;
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent-strong);
    background: var(--surface);
  }
  .input[aria-invalid='true'],
  .select[aria-invalid='true'],
  .textarea[aria-invalid='true'],
  .has-error .input,
  .has-error .select,
  .has-error .textarea {
    border-color: var(--danger);
  }
  .input:disabled,
  .select:disabled,
  .textarea:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .input--lg {
    min-height: 3.5rem;
    font-size: 1.15rem;
    padding-inline: 1rem;
  }
  .select {
    appearance: none;
    padding-right: 2.5rem;
    background-image: var(--chevron);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.1rem;
  }
  .textarea {
    min-height: 7rem;
    resize: vertical;
  }
  .input-group {
    position: relative;
    display: flex;
    align-items: stretch;
  }
  .input-group > .input {
    flex: 1;
  }
  .input-group > .icon {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    pointer-events: none;
  }
  .input-group > .icon + .input {
    padding-left: 2.6rem;
  }

  /* Pastilles (cases à cocher / boutons radio en « chips ») */
  .pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border: 0;
    padding: 0;
  }
  .pill {
    position: relative;
    display: inline-flex;
  }
  .pill > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .pill__label {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    min-height: 2.6rem;
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius-btn);
    border: 2px solid var(--control-line);
    background: transparent;
    color: var(--text);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.15;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    pointer-events: none;
  }
  .pill__emoji {
    font-size: 1.1em;
    line-height: 1;
  }
  .pill__hint {
    font-size: 0.8rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vu-text);
  }
  .pill:hover > .pill__label {
    border-color: var(--text);
  }
  .pill > input:checked + .pill__label {
    background: var(--accent);
    border-color: var(--ink);
    color: var(--on-accent);
  }
  .pill > input:checked + .pill__label svg.imark {
    color: currentColor;
  }
  .pill > input[aria-invalid='true'] + .pill__label {
    border-color: var(--danger-text);
  }
  .pill > input:checked + .pill__label .pill__hint {
    color: var(--on-accent);
  }
  .pill > input:checked + .pill__label::before {
    content: '';
    width: 0.9em;
    height: 0.9em;
    margin-right: -0.1em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .pill > input:focus-visible + .pill__label {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }
  .pill > input:disabled + .pill__label {
    opacity: 0.5;
  }
  .pill--sm .pill__label {
    min-height: 2.1rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.875rem;
  }
  .pill--main > input:checked + .pill__label {
    background: var(--vu);
    border-color: var(--ink);
    color: var(--on-vu);
  }
  .instrument-picker .pill__label {
    min-height: 3rem;
    padding-inline: 1rem 1.1rem;
  }

  /* Cartes radio (une question, gros boutons) */
  .radio-cards {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--radio-min, 13rem)), 1fr));
    border: 0;
    padding: 0;
  }
  .radio-card {
    position: relative;
    display: flex;
  }
  .radio-card > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .radio-card__body {
    position: relative;
    flex: 1;
    display: grid;
    align-content: start;
    gap: 0.3rem;
    padding: 1rem 2.6rem 1rem 1.1rem;
    border-radius: var(--radius-btn);
    border: 2px solid var(--control-line);
    background: transparent;
    pointer-events: none;
    transition: border-color 0.12s, background 0.12s;
  }
  .radio-card__emoji {
    font-size: 1.6rem;
    line-height: 1.1;
  }
  .radio-card__title {
    font-weight: 820;
    font-size: 1.08rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .radio-card__hint {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.4;
  }
  .radio-card__body::after {
    content: '';
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid var(--control-line);
    background: transparent;
    transition: background 0.12s, border-color 0.12s;
  }
  .radio-card:hover > .radio-card__body {
    border-color: var(--text);
  }
  .radio-card > input:checked + .radio-card__body {
    border-color: var(--text);
    background: var(--accent-soft);
  }
  .radio-card > input:checked + .radio-card__body::after {
    background: var(--accent);
    border-color: var(--ink);
  }
  .radio-card > input[aria-invalid='true'] + .radio-card__body {
    border-color: var(--danger-text);
  }
  .radio-card > input:focus-visible + .radio-card__body {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  /* Curseur (rayon, etc.) : un fader */
  .range {
    display: grid;
    gap: 0.25rem;
  }
  .range__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-3);
  }
  .range__value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
  }
  .range__scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--text-faint);
    font-weight: 600;
  }
  .range input[type='range'] {
    --fill: 50%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2.75rem;
    background: transparent;
    cursor: pointer;
  }
  .range input[type='range']::-webkit-slider-runnable-track {
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(to right, var(--accent) var(--fill), var(--surface-3) var(--fill));
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.4);
  }
  .range input[type='range']::-moz-range-track {
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
  }
  .range input[type='range']::-moz-range-progress {
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
  }
  .range input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.1rem;
    height: 1.9rem;
    margin-top: -0.7rem;
    border-radius: 4px;
    background: linear-gradient(to bottom, #f8efdc 0 44%, #1d1813 44% 56%, #f8efdc 56%);
    border: 1px solid rgb(0 0 0 / 0.5);
    box-shadow: 0 3px 6px rgb(0 0 0 / 0.45);
  }
  .range input[type='range']::-moz-range-thumb {
    width: 1.1rem;
    height: 1.9rem;
    border-radius: 4px;
    background: linear-gradient(to bottom, #f8efdc 0 44%, #1d1813 44% 56%, #f8efdc 56%);
    border: 1px solid rgb(0 0 0 / 0.5);
    box-shadow: 0 3px 6px rgb(0 0 0 / 0.45);
  }
  .range input[type='range']:focus-visible {
    outline: none;
  }
  .range input[type='range']:focus-visible::-webkit-slider-thumb {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }
  .range input[type='range']:focus-visible::-moz-range-thumb {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  /* Interrupteur : un switch d'ampli */
  .toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    cursor: pointer;
  }
  .toggle input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 3.1rem;
    height: 1.8rem;
    margin: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    border: 1.5px solid var(--control-line);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
  }
  .toggle input::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0.2rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--text-muted);
    transform: translateY(-50%);
    transition: transform 0.2s var(--ease-bounce), background 0.2s;
  }
  .toggle input:checked {
    background: var(--accent);
    border-color: var(--accent);
  }
  .toggle input:checked::before {
    background: var(--on-accent);
    transform: translate(1.25rem, -50%);
  }
  .toggle input:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }
  .toggle__text {
    display: grid;
    gap: 0.1rem;
    padding-top: 0.15rem;
  }
  .toggle__label {
    font-weight: 700;
  }
  .toggle__hint {
    font-size: 0.9rem;
    color: var(--text-muted);
  }

  /* Case à cocher simple */
  .check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    line-height: 1.4;
  }
  .check input {
    accent-color: var(--accent);
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
  }

  /* Saisie à puces (villes, artistes) */
  .chips {
    position: relative;
  }
  .chips__box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.9rem;
    padding: 0.35rem 0.45rem;
    background: var(--surface-2);
    border: 1.5px solid var(--control-line);
    border-radius: var(--radius);
    cursor: text;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .chips__box:focus-within {
    border-color: var(--accent-strong);
    box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent-strong);
  }
  .chips__list {
    display: contents;
    list-style: none;
  }
  .chips__input {
    flex: 1 1 8rem;
    min-width: 6rem;
    min-height: 2.1rem;
    padding: 0.3rem 0.4rem;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
  }
  .chips__input:focus {
    outline: none;
  }
  .chips:not(.is-enhanced) .chips__input {
    border: 0;
  }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.25rem 0.3rem 0.25rem 0.65rem;
    border-radius: var(--radius-btn);
    border: 2px solid var(--ink);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.2;
    animation: pop-in 0.18s var(--ease-bounce);
  }
  /* Puces déjà présentes au chargement : pas d'animation d'entrée */
  .chip--static {
    animation: none;
  }
  .chip__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chip__sub {
    font-weight: 550;
    opacity: 0.75;
    font-size: 0.95em;
  }
  .chip__remove {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-btn);
    border: 0;
    background: rgb(0 0 0 / 0.12);
    color: inherit;
    padding: 0;
  }
  .chip__remove:hover {
    background: rgb(0 0 0 / 0.25);
  }
  .chip__remove .icon {
    width: 0.85rem;
    height: 0.85rem;
    stroke-width: 3;
  }
  .chips__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 40;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.3rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
  }
  .chips__option {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-3);
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
  }
  .chips__option small {
    color: var(--text-faint);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .chips__option[aria-selected='true'],
  .chips__option:hover {
    background: var(--accent-soft);
    color: var(--text);
  }
  .chips__option mark {
    background: none;
    color: var(--accent-text);
  }
  .chips__empty {
    padding: 0.6rem 0.75rem;
    color: var(--text-muted);
    font-size: 0.9rem;
  }
  .chips__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--s-2);
    font-size: 0.875rem;
    color: var(--text-faint);
  }

  /* Alertes, flash, toasts ------------------------------------------------ */
  .alert {
    --alert-c: var(--vu);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--alert-c) 40%, var(--line));
    border-left: 4px solid var(--alert-c);
    background: color-mix(in srgb, var(--alert-c) 9%, var(--surface));
    color: var(--text);
    line-height: 1.45;
  }
  .alert > .icon {
    color: var(--alert-c);
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 0.05rem;
  }
  .alert__title {
    font-weight: 800;
  }
  .alert--ok {
    --alert-c: var(--signal);
  }
  .alert--ok > .icon {
    color: var(--signal-text);
  }
  .alert--erreur {
    --alert-c: var(--danger);
  }
  .alert--erreur > .icon {
    color: var(--danger-text);
  }
  .alert--info > .icon {
    color: var(--vu-text);
  }
  .alert--warn {
    --alert-c: var(--vu);
  }
  .alert--warn > .icon {
    color: var(--vu-text);
  }

  .toasts {
    position: fixed;
    z-index: 120;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(100% - 2rem, 25rem);
    display: grid;
    gap: 0.5rem;
    pointer-events: none;
  }
  body.has-tabbar .toasts {
    bottom: calc(var(--tabbar-h) + 0.75rem + env(safe-area-inset-bottom, 0px));
  }
  @media (min-width: 900px) {
    .toasts,
    body.has-tabbar .toasts {
      left: auto;
      right: 1.5rem;
      bottom: 1.5rem;
      transform: none;
    }
  }
  .toast {
    --toast-c: var(--vu);
    position: relative;
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    padding: 0.85rem 0.6rem 0.85rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--surface-3);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    animation: toast-in 0.32s var(--ease-bounce);
  }
  .toast::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--toast-c);
  }
  .toast--ok {
    --toast-c: var(--signal);
  }
  .toast--erreur {
    --toast-c: var(--danger);
  }
  .toast--message,
  .toast--notification {
    --toast-c: var(--accent);
  }
  .toast__icon {
    font-size: 1.25rem;
    line-height: 1.2;
  }
  .toast__title {
    font-weight: 800;
    line-height: 1.3;
  }
  .toast__text {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
  }
  .toast__title + .toast__text {
    margin-top: 0.1rem;
  }
  .toast a {
    color: inherit;
  }
  .toast__link {
    display: inline-block;
    margin-top: 0.35rem;
    font-weight: 750;
    color: var(--accent-text) !important;
  }
  .toast__close {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin: -0.3rem 0 0;
    border-radius: var(--radius-sm);
    border: 0;
    background: transparent;
    color: var(--text-muted);
  }
  .toast__close:hover {
    background: var(--surface-2);
    color: var(--text);
  }
  .toast.is-leaving {
    animation: toast-out 0.25s var(--ease) forwards;
  }

  /* Onglets --------------------------------------------------------------- */
  .tabs {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tabs a,
  .tabs button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 0.9rem 0.85rem;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-weight: 720;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
  }
  .tabs a:hover,
  .tabs button:hover {
    color: var(--text);
  }
  .tabs [aria-current='page'],
  .tabs [aria-selected='true'] {
    color: var(--text);
  }
  .tabs [aria-current='page']::after,
  .tabs [aria-selected='true']::after {
    content: '';
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: -1px;
    height: 4px;
    background: var(--accent);
  }
  /* La rangée déborde (mobile) : un fondu signale qu'on peut faire défiler ; il s'efface au bout. */
  .tabs.is-overflowing {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
  .tabs.is-overflowing.is-at-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
  @media (max-width: 400px) {
    .tabs a,
    .tabs button {
      padding-inline: 0.55rem;
    }
  }
  .tabs .count {
    background: var(--surface-3);
    color: var(--text);
  }
  .tabs [aria-current='page'] .count,
  .tabs [aria-selected='true'] .count {
    background: var(--accent);
    color: var(--on-accent);
  }
  .segmented {
    display: inline-flex;
    padding: 0;
    gap: 0;
    border-radius: var(--radius-btn);
    background: transparent;
    border: 2px solid var(--text);
  }
  .segmented a,
  .segmented button {
    padding: 0.5rem 1rem;
    border-radius: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-weight: 720;
    font-size: 0.9rem;
    text-decoration: none;
  }
  .segmented [aria-current='page'],
  .segmented [aria-pressed='true'] {
    background: var(--accent);
    color: var(--on-accent);
  }

  /* Dialogue -------------------------------------------------------------- */
  .dialog {
    width: min(100% - 2rem, 32rem);
    max-height: min(88dvh, 46rem);
    margin: auto;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xl);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-3);
    overflow: auto;
  }
  .dialog--lg {
    width: min(100% - 2rem, 46rem);
  }
  .dialog::backdrop {
    background: rgb(10 7 5 / 0.72);
    backdrop-filter: blur(3px);
  }
  .dialog[open] {
    animation: dialog-in 0.28s var(--ease-bounce);
  }
  .dialog__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 1.2rem 1.2rem 0.6rem 1.4rem;
    background: var(--surface);
  }
  .dialog__title {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: var(--fs-xl);
    line-height: 1.1;
    padding-top: 0.4rem;
  }
  .dialog__body {
    padding: 0.4rem 1.4rem 1.4rem;
  }
  .dialog__foot {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    gap: var(--s-2);
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
  }
  @media (max-width: 599px) {
    .dialog {
      width: 100%;
      max-width: 100%;
      margin: auto 0 0;
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      border-bottom: 0;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .dialog[open] {
      animation: sheet-in 0.32s var(--ease);
    }
    .dialog__foot {
      --btn-tilt-k: 0.4;
    }
    .dialog__foot > .btn {
      flex: 1;
    }
  }

  /* État vide ------------------------------------------------------------- */
  .empty {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) 1.25rem;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
      repeating-linear-gradient(-45deg, transparent 0 14px, rgb(255 255 255 / 0.012) 14px 28px);
  }
  .empty__icon {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-size: 2.1rem;
    line-height: 1;
    transform: rotate(-6deg);
  }
  .empty__title {
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: -0.01em;
    font-size: var(--fs-xl);
    line-height: 1.1;
    max-width: 28rem;
  }
  .empty__text {
    color: var(--text-muted);
    max-width: 34rem;
  }
  .empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
    margin-top: var(--s-2);
  }

  /* Squelettes ------------------------------------------------------------ */
  .skeleton {
    display: block;
    min-height: 1em;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 40%, var(--surface-2) 60%);
    background-size: 300% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }
  .skeleton--text {
    height: 0.9em;
    width: var(--w, 100%);
    border-radius: 4px;
  }
  .skeleton--title {
    height: 1.4em;
    width: var(--w, 60%);
  }
  .skeleton--circle {
    width: var(--size, 2.75rem);
    height: var(--size, 2.75rem);
    border-radius: 50%;
  }
  .skeleton--block {
    height: var(--h, 6rem);
    border-radius: var(--radius);
  }

  /* Tuiles de chiffres ---------------------------------------------------- */
  .stat {
    display: grid;
    gap: 0.3rem;
    align-content: start;
    padding: 1rem 1.15rem;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--line);
  }
  .stat__icon {
    font-size: 1.3rem;
    line-height: 1;
  }
  .stat__value {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.5rem + 2vw, 2.7rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
  }
  .stat__label {
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.3;
  }
  .stat__hint {
    font-size: 0.875rem;
    color: var(--text-faint);
  }
  .stat--accent .stat__value {
    color: var(--accent-text);
  }
  .stat--vu .stat__value {
    color: var(--vu-text);
  }
  .stat--signal .stat__value {
    color: var(--signal-text);
  }

  /* Progression (onboarding) : une rangée de LED --------------------------- */
  .stepper {
    display: grid;
    gap: 0.5rem;
  }
  .stepper__label {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    font-size: 0.875rem;
    font-weight: 750;
    color: var(--text-muted);
  }
  .stepper__label strong {
    color: var(--text);
  }
  .stepper__bar {
    display: grid;
    grid-template-columns: repeat(var(--total, 8), minmax(0, 1fr));
    gap: 4px;
    list-style: none;
    padding: 0;
  }
  .stepper__seg {
    height: 0.4rem;
    border-radius: 2px;
    background: var(--surface-3);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.35);
  }
  .stepper__seg.is-done {
    background: var(--accent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent);
  }
  .stepper__seg.is-current {
    background: var(--vu);
    box-shadow: 0 0 10px var(--vu);
    animation: led 1.6s ease-in-out infinite;
  }

  /* Grille de dispos (7 × 3) --------------------------------------------- */
  /* La grille est fluide : 7 colonnes qui se partagent la largeur (jamais de défilement à 320 px),
     plafonnées à --cell-max ; .avail--sm garde des cases fixes (--cell). */
  .avail {
    --cell: 1.6rem;
    --cell-max: 3rem;
    --row-head: 3.4rem;
    display: grid;
    gap: var(--s-2);
    border: 0;
    padding: 0;
    min-width: 0;
  }
  .avail__scroll {
    overflow-x: auto;
    margin-inline: -0.25rem;
    padding: 0.25rem;
  }
  .avail__table {
    width: calc(100% + 4px);
    max-width: calc(var(--row-head) + 7 * (var(--cell-max) + 4px) + 4px);
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 4px;
    margin-left: -4px;
  }
  .avail__table thead td:first-child {
    width: var(--row-head);
  }
  .avail__table th {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-align: center;
    padding: 0 0 0.15rem;
  }
  .avail__table th[scope='row'] {
    text-align: left;
    padding: 0 0.4rem 0 0;
    white-space: nowrap;
  }
  .avail__table td {
    padding: 0;
  }
  .avail__mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 1.5rem;
    aspect-ratio: 1 / 0.82;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: transparent;
    font-size: 0.9rem;
    font-weight: 900;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.15s, transform 0.1s;
  }
  .is-on > .avail__mark,
  .avail__input:checked + .avail__mark {
    background: var(--accent);
    border: 1.5px solid var(--accent);
    color: var(--on-accent);
    box-shadow: none;
  }
  .avail__input:checked + .avail__mark::after {
    content: '✓';
  }
  .is-common > .avail__mark {
    background: var(--signal);
    border: 1.5px solid var(--signal);
    color: var(--on-signal);
    box-shadow: 0 0 0 3px var(--signal-soft);
  }
  .is-common > .avail__mark::after {
    content: '★';
  }
  /* En mode édition, « en commun » = suggestion (anneau vert), la sélection reste orange */
  .avail--edit .is-common > .avail__mark {
    background: var(--surface-2);
    border: 2px solid var(--signal);
    color: var(--signal-text);
    box-shadow: none;
  }
  .avail--edit .is-common > .avail__mark::after {
    content: '★';
    font-size: 0.75rem;
  }
  .avail--edit .is-common > .avail__input:checked + .avail__mark {
    background: var(--signal);
    color: var(--on-signal);
    box-shadow: 0 0 0 3px var(--signal-soft);
  }
  .avail--edit .is-common > .avail__input:checked + .avail__mark::after {
    content: '✓';
    font-size: 0.9rem;
  }
  .avail--edit .avail__cell {
    position: relative;
    display: block;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .avail--edit .avail__cell:hover > .avail__mark {
    border-color: var(--accent);
  }
  .avail__input:focus-visible + .avail__mark {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }
  .avail__cell:active > .avail__mark {
    transform: scale(0.94);
  }
  .avail__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 600;
  }
  .avail__legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .avail__legend i {
    width: 0.9rem;
    height: 0.75rem;
    border-radius: 3px;
    background: var(--accent);
  }
  .avail__legend i.is-common {
    background: var(--signal);
  }
  .avail__legend i.is-off {
    background: var(--surface-2);
    border: 1px solid var(--line);
  }
  .avail__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .avail--sm {
    --cell: 1.6rem;
  }
  .avail--sm .avail__mark {
    width: var(--cell);
    min-width: 0;
    aspect-ratio: auto;
    height: calc(var(--cell) * 0.82);
    border-radius: 5px;
    font-size: 0.7rem;
  }
  .avail--sm .avail__table {
    width: auto;
    max-width: none;
    table-layout: auto;
    border-spacing: 3px;
  }
  .avail--sm .avail__table thead td:first-child {
    width: auto;
  }

  /* Jauge VU-mètre -------------------------------------------------------- */
  .gauge {
    --gauge-w: 5.4rem;
    --tier: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--tier);
  }
  .gauge--hot {
    --tier: var(--signal-text);
  }
  .gauge--high {
    --tier: var(--accent-text);
  }
  .gauge--mid {
    --tier: var(--vu-text);
  }
  .gauge__meter {
    width: var(--gauge-w);
    height: auto;
    aspect-ratio: 120 / 72;
    filter: drop-shadow(0 3px 5px rgb(0 0 0 / 0.35));
    overflow: visible;
  }
  .gauge__needle {
    transform-box: view-box;
    transform-origin: 60px 66px;
    transform: rotate(var(--a, 0deg));
  }
  @media (prefers-reduced-motion: no-preference) {
    .gauge__needle {
      animation: needle-in 1.1s var(--ease-bounce) both;
    }
  }
  .gauge__readout {
    display: grid;
    gap: 0.15rem;
    justify-items: start;
  }
  .gauge__value {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
    color: var(--text);
  }
  .gauge__value small {
    font-size: 0.55em;
    color: var(--text-muted);
  }
  .gauge__led {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--surface-3);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.5);
  }
  .gauge--hot .gauge__led {
    background: var(--signal);
    box-shadow: 0 0 8px 1px var(--signal);
  }
  .gauge--high .gauge__led {
    background: var(--accent);
    box-shadow: 0 0 8px 1px var(--accent);
  }
  .gauge--mid .gauge__led {
    background: var(--vu);
    box-shadow: 0 0 6px var(--vu);
  }
  .gauge__label {
    font-size: 0.8rem;
    font-weight: 780;
    letter-spacing: 0.01em;
    line-height: 1.15;
    color: var(--tier);
    max-width: 7.5rem;
  }
  .gauge--sm {
    --gauge-w: 3.6rem;
    gap: 0.45rem;
  }
  .gauge--sm .gauge__value {
    font-size: 1.15rem;
  }
  .gauge--sm .gauge__label {
    display: none;
  }
  .gauge--lg {
    --gauge-w: 10rem;
    flex-direction: column;
    gap: 0.6rem;
  }
  .gauge--lg .gauge__readout {
    justify-items: center;
    text-align: center;
  }
  .gauge--lg .gauge__value {
    font-size: 2.8rem;
  }
  .gauge--lg .gauge__label {
    font-size: 0.9rem;
    max-width: none;
  }
  /* Variante LED (listes compactes) */
  .leds {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    color: var(--tier);
  }
  .led {
    width: 5px;
    height: 14px;
    border-radius: 1.5px;
    background: var(--surface-3);
  }
  .led:nth-child(n + 4) {
    height: 15px;
  }
  .led:nth-child(n + 7) {
    height: 16px;
  }
  .led.is-on {
    background: currentColor;
    box-shadow: 0 0 5px color-mix(in srgb, currentColor 55%, transparent);
  }

  /* Raisons du match ------------------------------------------------------ */
  .reasons {
    display: grid;
    gap: 0.55rem;
    list-style: none;
    padding: 0;
  }
  .reason {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    gap: 0.45rem;
    align-items: start;
    font-size: 0.94rem;
    line-height: 1.4;
  }
  .reason__icon {
    font-size: 1.05rem;
    line-height: 1.3;
    text-align: center;
  }
  .reason--warn,
  .reason--note {
    color: var(--text-muted);
    font-size: 0.88rem;
  }
  .reason--note .reason__icon {
    color: var(--text-faint);
  }
  .reason--note .reason__icon .icon {
    width: 1rem;
    height: 1rem;
    vertical-align: -0.15em;
  }
  .reason__label {
    font-weight: 750;
    color: var(--text);
  }
  .reasons--compact .reason {
    font-size: 0.9rem;
  }

  /* Lecteur d'extrait ----------------------------------------------------- */
  .player-wrap {
    display: grid;
    gap: 0.4rem;
    margin: 0;
  }
  .player-wrap > figcaption {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-muted);
  }
  .player-wrap > figcaption q {
    font-style: italic;
    color: var(--text);
    quotes: '« ' ' »';
  }
  .player {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.8rem 0.45rem 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1px solid var(--line);
  }
  .player__native {
    grid-column: 1 / -1;
    width: 100%;
    height: 2.5rem;
  }
  .player__ui {
    display: contents;
  }
  .player:not(.is-enhanced) .player__ui {
    display: none;
  }
  .player.is-enhanced .player__native {
    display: none;
  }
  .player__btn {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 2px solid var(--ink);
    background: var(--accent);
    color: var(--on-accent);
    transition: background 0.12s, color 0.12s;
  }
  .player__btn:hover {
    background: var(--accent-hover);
  }
  .player__btn:active {
    background: var(--ink);
    color: var(--accent);
  }
  .player__btn .icon {
    width: 1.15rem;
    height: 1.15rem;
  }
  .player__btn .i-pause,
  .player.is-playing .player__btn .i-play {
    display: none;
  }
  .player.is-playing .player__btn .i-pause {
    display: block;
  }
  .player.is-loading .player__btn {
    animation: pulse-btn 1s ease-in-out infinite;
  }
  .player__wave {
    position: relative;
    height: 2.2rem;
    cursor: pointer;
    touch-action: none;
    border-radius: 4px;
  }
  .player__wave:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }
  .player__bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .player__bars i {
    flex: 1 1 0;
    min-width: 1.5px;
    height: calc(var(--h, 0.5) * 100%);
    border-radius: 2px;
    background: var(--line-strong);
  }
  .player__bars--played {
    clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0);
  }
  .player__bars--played i {
    background: var(--accent);
  }
  .player.is-playing .player__bars--played i {
    background: linear-gradient(to top, var(--accent), var(--vu));
  }
  .player__time {
    min-width: 2.6rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: right;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }
  .player.is-error .player__time {
    color: var(--danger-text);
  }

  /* Messages -------------------------------------------------------------- */
  .thread {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .msg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: min(82%, 34rem);
  }
  .msg + .msg:not(.msg--cont) {
    margin-top: 0.6rem;
  }
  .msg--mine {
    align-self: flex-end;
    align-items: flex-end;
  }
  .msg__author {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 750;
    color: var(--text-muted);
    margin: 0 0 0.2rem 0.4rem;
  }
  .bubble {
    padding: 0.6rem 0.9rem;
    border-radius: 18px 18px 18px 6px;
    background: var(--surface-3);
    color: var(--text);
    line-height: 1.45;
    white-space: pre-line;
    overflow-wrap: anywhere;
  }
  .msg--mine .bubble {
    border-radius: 18px 18px 6px 18px;
    background: var(--accent);
    color: var(--on-accent);
  }
  .msg--mine .bubble a {
    color: inherit;
  }
  .msg__time {
    font-size: 0.8125rem;
    color: var(--text-faint);
    margin: 0.2rem 0.5rem 0;
    font-variant-numeric: tabular-nums;
  }
  .msg--system {
    align-self: center;
    align-items: center;
    max-width: 100%;
    margin-block: 0.6rem;
    text-align: center;
  }
  .msg--system .bubble {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-muted);
    font-size: 0.9rem;
  }
  .msg--proposal {
    max-width: min(92%, 28rem);
  }
  .msg--proposal .bubble {
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    color: var(--text);
    border: 2px solid var(--accent);
    display: grid;
    gap: 0.6rem;
  }
  .msg--proposal .bubble__kicker {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    color: var(--accent-text);
  }

  /* Notifications, conversations ----------------------------------------- */
  .list-plain {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 2px;
  }
  .notif,
  .convo {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: start;
    padding: 0.85rem 0.9rem;
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s;
  }
  a.notif:hover,
  a.convo:hover {
    background: var(--surface-2);
  }
  .notif__icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--surface-3);
    font-size: 1.2rem;
    line-height: 1;
  }
  .notif__title,
  .convo__title {
    font-weight: 760;
    line-height: 1.3;
  }
  .notif__body,
  .convo__preview {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
  }
  .convo__preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .convo__preview em {
    font-style: italic;
  }
  .notif__time,
  .convo__time {
    font-size: 0.875rem;
    color: var(--text-faint);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .convo__side {
    display: grid;
    justify-items: end;
    gap: 0.35rem;
  }
  .notif.is-unread {
    background: var(--accent-soft);
  }
  .notif.is-unread .notif__time::after {
    content: '';
    display: block;
    width: 0.55rem;
    height: 0.55rem;
    margin: 0.45rem 0 0 auto;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
  }
  .convo.is-unread .convo__title {
    color: var(--text);
  }
  .convo.is-unread .convo__preview {
    color: var(--text);
    font-weight: 600;
  }
  .convo__kind {
    font-size: 0.9rem;
  }

  /* Pagination ------------------------------------------------------------ */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    list-style: none;
    padding: 0;
    margin-top: var(--s-6);
  }
  .pagination a,
  .pagination span {
    display: inline-grid;
    place-items: center;
    min-width: 2.6rem;
    height: 2.6rem;
    padding: 0 0.6rem;
    border-radius: var(--radius-btn);
    border: 2px solid var(--line-strong);
    color: var(--text);
    font-weight: 750;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
  }
  .pagination a:hover {
    border-color: var(--text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
  .pagination [aria-current='page'] {
    background: var(--accent);
    border-color: var(--ink);
    color: var(--on-accent);
  }
  .pagination .is-gap {
    border: 0;
    min-width: 1.5rem;
    color: var(--text-faint);
  }
  .pagination .is-disabled {
    opacity: 0.4;
  }

  /* En-tête de page ------------------------------------------------------- */
  .page-header {
    display: grid;
    gap: 0.6rem;
    padding-block: var(--s-5) var(--s-5);
  }
  .page-header__back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-muted);
    text-decoration: none;
  }
  .page-header__back:hover {
    color: var(--text);
  }
  .page-header__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
  }
  .page-header__title {
    font-size: clamp(1.75rem, 1.35rem + 2vw, 2.6rem);
    line-height: 1.05;
    text-transform: none;
    letter-spacing: -0.015em;
  }
  .page-header--calm .page-header__title {
    font-family: var(--font-body);
    font-weight: 850;
    font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
    letter-spacing: -0.025em;
    line-height: 1.1;
  }
  .page-header--poster .page-header__title {
    font-size: var(--fs-2xl);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.01em;
  }
  .page-header__lead {
    color: var(--text-muted);
    font-size: var(--fs-md);
    max-width: 42rem;
    line-height: 1.5;
  }
  .page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .kicker {
    display: inline-block;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    line-height: 1.2;
    color: var(--accent-text);
  }

  /* Texte long (pages légales, à propos) ---------------------------------- */
  .prose {
    max-width: 68ch;
    font-size: 1.04rem;
    line-height: 1.7;
  }
  .prose > * + * {
    margin-top: 1em;
  }
  .prose h2 {
    font-size: var(--fs-xl);
    margin-top: 2.2em;
  }
  .prose h3 {
    margin-top: 1.8em;
  }
  .prose h2 + *,
  .prose h3 + * {
    margin-top: 0.6em;
  }
  .prose ul,
  .prose ol {
    padding-left: 1.3em;
  }
  .prose li + li {
    margin-top: 0.35em;
  }
  .prose li::marker {
    color: var(--accent-text);
  }
  .prose blockquote {
    border-left: 4px solid var(--accent);
    padding-left: 1em;
    color: var(--text-muted);
    font-style: italic;
  }
  .prose table {
    width: 100%;
    font-size: 0.92rem;
  }
  .prose th,
  .prose td {
    text-align: left;
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
  }
  .prose th {
    color: var(--text);
    font-weight: 760;
  }
  .table-scroll {
    overflow-x: auto;
  }

  /* FAQ / détails --------------------------------------------------------- */
  .faq {
    display: grid;
    gap: 0.6rem;
  }
  .faq details {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }
  .faq summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    padding: 1rem 1.15rem;
    font-weight: 760;
    border-radius: var(--radius-lg);
  }
  .faq summary::-webkit-details-marker {
    display: none;
  }
  .faq summary::after {
    content: '+';
    font-family: var(--font-display);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--accent-text);
    transition: transform 0.2s var(--ease);
  }
  .faq details[open] summary::after {
    transform: rotate(45deg);
  }
  .faq details > div {
    padding: 0 1.15rem 1.1rem;
    color: var(--text-muted);
  }

  /* Indicateur htmx générique */
  .htmx-indicator {
    opacity: 0;
    transition: opacity 0.2s;
  }
  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator {
    opacity: 1;
  }
  .spinner {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2.5px solid currentColor;
    border-right-color: transparent;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
  }
  .htmx-swapping {
    opacity: 0;
    transition: opacity 0.25s ease-out;
  }
  [data-card].htmx-swapping {
    transform: scale(0.97);
    transition: opacity 0.25s, transform 0.25s;
  }
}

/* --------------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------------- */
@layer utilities {
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .muted {
    color: var(--text-muted);
  }
  .faint {
    color: var(--text-faint);
  }
  .small {
    font-size: var(--fs-sm);
  }
  .xsmall {
    font-size: var(--fs-xs);
  }
  .lead {
    font-size: var(--fs-md);
    line-height: 1.55;
    color: var(--text-muted);
  }
  .text-accent {
    color: var(--accent-text);
  }
  .text-vu {
    color: var(--vu-text);
  }
  .text-signal {
    color: var(--signal-text);
  }
  .text-danger {
    color: var(--danger-text);
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .nowrap {
    white-space: nowrap;
  }
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .tabular {
    font-variant-numeric: tabular-nums;
  }
  .pre-line {
    white-space: pre-line;
  }
  .w-full {
    width: 100%;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-0 {
    margin-top: 0 !important;
  }
  .mt-1 {
    margin-top: var(--s-2) !important;
  }
  .mt-2 {
    margin-top: var(--s-4) !important;
  }
  .mt-3 {
    margin-top: var(--s-6) !important;
  }
  .mt-4 {
    margin-top: var(--s-8) !important;
  }
  .mb-0 {
    margin-bottom: 0 !important;
  }
  .grain {
    position: relative;
    isolation: isolate;
  }
  .grain::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--grain);
    opacity: calc(var(--grain-opacity) * 1.6);
    pointer-events: none;
    z-index: 1;
  }
  html:not(.js) .js-only {
    display: none !important;
  }
  .js .no-js-only {
    display: none !important;
  }
  @media (max-width: 899px) {
    .hide-mobile {
      display: none !important;
    }
  }
  @media (min-width: 900px) {
    .hide-desktop {
      display: none !important;
    }
  }
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes needle-in {
  from {
    transform: rotate(-50deg);
  }
  to {
    transform: rotate(var(--a, 0deg));
  }
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}
@keyframes sheet-in {
  from {
    transform: translateY(100%);
  }
}
@keyframes pop-in {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
}
@keyframes bump {
  40% {
    transform: scale(1.35);
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent);
  }
  70% {
    box-shadow: 0 0 0 7px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes pulse-btn {
  50% {
    opacity: 0.6;
  }
}
@keyframes led {
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .topbar,
  .tabbar,
  .footer,
  .toasts,
  .skip-link {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  body::before {
    display: none;
  }
}

/* Cartes : ajustements de mise en page (en-tête compact, méta sur toute la largeur) */
@layer components {
  .match-card__meta {
    margin-top: calc(var(--s-2) * -1);
  }
  .match-card__name {
    overflow-wrap: anywhere;
  }
  .slot-card__band {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
  }
  .slot-card__band a {
    color: var(--text);
    font-weight: 780;
  }
  .gauge--sm {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
  .gauge--sm .gauge__readout {
    justify-items: center;
  }
  .gauge--sm .gauge__value {
    font-size: 1.05rem;
  }

  /* Cartes en mode visiteur·se (annonces, docs/PRODUCT.md §0.8) : fraîcheur, invitation à faire sa fiche,
     un seul bouton (« Ça m’intéresse », pas de « Pas pour moi »). */
  .card-fresh {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-sm, 0.875rem);
    color: var(--text-muted);
  }
  .card-compat {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    font-size: var(--fs-sm, 0.875rem);
    color: var(--text-muted);
  }
  .card-compat a {
    color: var(--accent-text);
    font-weight: 650;
  }
  .match-card--visitor .match-card__actions > .btn,
  .slot-card--visitor .match-card__actions > .btn {
    flex-basis: 100%;
  }

  /* Les lignes « le son · quand · âges » des cartes (ui.cardFacts) : serrées sous la ligne « où », un pictogramme
     en tête, le « · » des lignes de méta entre les morceaux. 2-3 lignes au plus avant le petit mot. */
  .card-facts {
    display: grid;
    gap: 0.3rem;
    margin-top: calc(var(--s-3) * -1);
  }
  .card-fact {
    color: var(--text-muted);
  }
  .card-fact .icon {
    margin-right: 0.2rem;
    color: var(--text-faint);
  }
  .card-fact--style {
    color: var(--text);
    font-weight: 600;
  }
  .band-card__body .card-facts {
    margin-top: calc(var(--s-1) * -1);
  }
  /* Une place libre dans un line-up : écrite en clair (« Batterie : place libre »), plus de « ? ». */
  .seat--open {
    white-space: normal;
  }
}