/* Kassa — styles du site (concept « Grand livre de nuit »). Aucune étape de build. */
@layer reset, tokens, base, layout, components, utilities, pages;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, picture, video { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    --c-bg: #0A0D16; --c-s1: #121624; --c-s2: #1A2032; --c-s3: #242B40;
    --c-border: #2C3349; --c-control: #707A99;
    --c-text: #EFF2F9; --c-muted: #A3AABC;
    --c-lime: #C6F24E; --c-lime-text: #C6F24E; --c-on-lime: #0A0D16;
    --c-violet: #9B7EFF; --c-violet-soft: #B9A6FF; --c-violet-bg: #2A2346;
    --c-coral: #FF8A75; --c-amber: #E8C15A;
    --c-ok: #C6F24E;
    --series-momo: #73A40A; --series-om: #8663E6; --series-card: #1997CF; --series-cash: #CD5394;
    --c-header: rgb(10 13 22 / .82);
    --c-line: rgb(255 255 255 / .08);
    --c-halo: rgb(155 126 255 / .16);
    --font-sans: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    --fs-0: clamp(1rem, .97rem + .15vw, 1.125rem);
    --fs-sm: .875rem; --fs-xs: .8125rem;
    --fs-1: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
    --fs-2: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
    --fs-3: clamp(1.75rem, 1.4rem + 1.6vw, 2.625rem);
    --fs-4: clamp(2.125rem, 1.6rem + 2.4vw, 3.5rem);
    --fs-5: clamp(2.4rem, 1.6rem + 3.6vw, 4.5rem);
    --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem;
    --section: clamp(4rem, 3rem + 5vw, 7.5rem);
    --gutter: clamp(1rem, .5rem + 2vw, 2rem);
    --radius: 16px; --radius-sm: 10px; --radius-lg: 24px;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --dur-1: 120ms; --dur-2: 180ms; --dur-3: 280ms; --dur-4: 450ms;
    --header-h: 64px;
    --shadow-pop: 0 18px 50px rgb(0 0 0 / .45);
    --msd-accent: var(--c-lime); --msd-font: var(--font-sans);
  }
  :root[data-theme="light"] {
    color-scheme: light;
    --c-bg: #F5F6FA; --c-s1: #FFFFFF; --c-s2: #EEF0F6; --c-s3: #E3E6F0;
    --c-border: #D9DCE6; --c-control: #7A8196;
    --c-text: #0B0F1A; --c-muted: #4A5266;
    --c-lime: #C6F24E; --c-lime-text: #4B6B00; --c-on-lime: #0B0F1A;
    --c-violet: #5A3BD6; --c-violet-soft: #4A2FB8; --c-violet-bg: #E9E4FB;
    --c-coral: #B23A24; --c-amber: #8A5A00; --c-ok: #4B6B00;
    --series-momo: #5C8B00; --series-om: #6B40C9; --series-card: #0072A3; --series-cash: #B93780;
    --c-header: rgb(245 246 250 / .86);
    --c-line: rgb(11 15 26 / .1);
    --c-halo: rgb(90 59 214 / .1);
    --shadow-pop: 0 18px 50px rgb(11 15 26 / .18);
  }
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--header-h) + 24px); background: var(--c-bg); }
  body {
    font-family: var(--font-sans); font-size: var(--fs-0); line-height: 1.6;
    color: var(--c-text); background: var(--c-bg);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    min-block-size: 100dvh; overflow-x: clip;
  }
  h1, h2, h3, h4 { line-height: 1.12; font-weight: 650; text-wrap: balance; }
  h1 { font-size: var(--fs-5); font-weight: 700; letter-spacing: -.025em; }
  h2 { font-size: var(--fs-4); letter-spacing: -.022em; }
  h3 { font-size: var(--fs-2); letter-spacing: -.012em; }
  h4 { font-size: var(--fs-1); }
  p, li, dd { text-wrap: pretty; }
  p { max-inline-size: 70ch; }
  a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .2em; }
  a:hover { text-decoration-color: currentColor; }
  :focus-visible { outline: 2px solid var(--c-lime); outline-offset: 3px; border-radius: 4px; }
  :root[data-theme="light"] :focus-visible { outline-color: var(--c-violet); }
  ::selection { background: var(--c-lime); color: var(--c-on-lime); }
  strong { font-weight: 650; }
  code, kbd, .mono { font-family: var(--font-mono); font-size: .92em; }
  .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  .cur { font-size: .7em; color: var(--c-muted); font-weight: 500; white-space: nowrap; }
  .skip { position: absolute; inset-inline-start: 12px; inset-block-start: -80px; z-index: 3000; padding: .75rem 1rem; background: var(--c-lime); color: var(--c-on-lime); font-weight: 650; border-radius: 10px; text-decoration: none; transition: inset-block-start var(--dur-2); }
  .skip:focus { inset-block-start: 12px; }
  .matrix-wrap, .compare-scroll, .legal .scroll, .code-block, .chips-nav ul { position: relative; }
  .sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@layer layout {
  .wrap { inline-size: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }
  .wrap-narrow { inline-size: min(100% - 2 * var(--gutter), 780px); margin-inline: auto; }
  .section { padding-block: var(--section); position: relative; }
  .section:not(:first-child), .site-footer { content-visibility: auto; contain-intrinsic-size: auto 720px; }
  .section--tight { padding-block: calc(var(--section) * .6); }
  .hero--page + .section--tight { padding-block-start: var(--sp-4); }
  .section--alt { background: var(--c-s1); border-block: 1px solid var(--c-line); }
  .section-head { display: grid; gap: var(--sp-4); margin-block-end: var(--sp-7); max-inline-size: 46rem; }
  .section-head p { color: var(--c-muted); font-size: var(--fs-1); }
  .section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
  .grid { display: grid; gap: var(--sp-5); }
  .stack > * + * { margin-block-start: var(--stack, var(--sp-4)); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
  .split { display: grid; gap: var(--sp-7); align-items: center; grid-template-columns: minmax(0, 1fr); }
  .split > * { min-inline-size: 0; }
  @media (min-width: 56em) {
    .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
    .split--wide-l { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .split--wide-r { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .split--rev > :first-child { order: 2; }
  }
  .cols-2, .cols-3, .cols-4 { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 40em) { .cols-2, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
}

@layer components {
  /* ---------- Typographie d'appoint ---------- */
  .eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--c-lime-text); font-weight: 500; display: inline-flex; align-items: center; gap: .6em; }
  .eyebrow--violet { color: var(--c-violet); }
  .eyebrow::before { content: ""; inline-size: 18px; block-size: 1px; background: currentColor; opacity: .7; }
  .lead { font-size: var(--fs-1); color: var(--c-muted); line-height: 1.55; }
  .muted { color: var(--c-muted); }
  .small { font-size: var(--fs-sm); }
  .hl { color: var(--c-lime-text); }
  .hl-violet { color: var(--c-violet); }

  /* ---------- Boutons ---------- */
  .btn { --_bg: transparent; --_fg: var(--c-text); --_bd: var(--c-control);
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    min-block-size: 48px; padding: .6rem 1.35rem; border-radius: 999px; border: 1px solid var(--_bd);
    background: var(--_bg); color: var(--_fg); font-weight: 600; font-size: .98rem; line-height: 1.2; text-decoration: none; text-align: center;
    transition: transform var(--dur-1) var(--ease), background var(--dur-2), border-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2); }
  .btn:hover { --_bd: var(--c-text); background: var(--c-s2); }
  .btn:active { transform: translateY(1px) scale(.99); }
  .btn svg { inline-size: 18px; block-size: 18px; flex: none; }
  .btn--primary { --_bg: var(--c-lime); --_fg: var(--c-on-lime); --_bd: var(--c-lime); box-shadow: 0 0 0 0 rgb(198 242 78 / 0); }
  .btn--primary:hover { background: color-mix(in srgb, var(--c-lime) 88%, #fff); --_bd: transparent; box-shadow: 0 8px 28px -8px rgb(198 242 78 / .55); }
  .btn--violet { --_bg: var(--c-violet); --_fg: #0A0D16; --_bd: var(--c-violet); }
  :root[data-theme="light"] .btn--violet { --_fg: #fff; }
  .btn--violet:hover { background: color-mix(in srgb, var(--c-violet) 86%, #fff); }
  .btn--ghost { --_bd: transparent; }
  .btn--sm { min-block-size: 44px; padding: .4rem 1rem; font-size: .9rem; }
  .btn--block { inline-size: 100%; }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
  .link-arrow { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none; color: var(--c-lime-text); min-block-size: 44px; }
  .link-arrow svg { inline-size: 16px; transition: transform var(--dur-2) var(--ease); }
  .link-arrow:hover svg { transform: translateX(3px); }
  .link-arrow:hover { text-decoration: underline; }

  /* ---------- En-tête ---------- */
  .site-header { position: sticky; inset-block-start: 0; z-index: 100; background: var(--c-header); border-block-end: 1px solid var(--c-line); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
  .site-header__in { min-block-size: var(--header-h); display: flex; align-items: center; gap: var(--sp-4); }
  .logo { display: inline-flex; align-items: center; gap: .5rem; color: var(--c-text); text-decoration: none; font-weight: 700; font-size: 1.4rem; letter-spacing: -.03em; min-block-size: 44px; }
  .logo svg { inline-size: 30px; block-size: 30px; }
  .logo .seg-on { fill: var(--c-lime); }
  .logo .seg { fill: currentColor; }
  .main-nav { display: none; margin-inline-start: auto; }
  .main-nav ul { display: flex; gap: .25rem; list-style: none; padding: 0; }
  .main-nav a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: .8rem; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .95rem; color: var(--c-muted); transition: color var(--dur-2), background var(--dur-2); }
  .main-nav a:hover { color: var(--c-text); background: var(--c-s2); }
  .main-nav a[aria-current="page"] { color: var(--c-text); background: var(--c-s2); box-shadow: inset 0 -2px 0 var(--c-lime); }
  .header-actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
  .header-actions .hide-s { display: none; }
  .icon-btn { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--c-text); transition: background var(--dur-2), border-color var(--dur-2); position: relative; }
  .icon-btn:hover { background: var(--c-s2); border-color: var(--c-border); }
  .icon-btn svg { inline-size: 20px; block-size: 20px; }
  .theme-toggle .i-sun { display: none; }
  :root[data-theme="light"] .theme-toggle .i-sun { display: block; }
  :root[data-theme="light"] .theme-toggle .i-moon { display: none; }
  .lang-link { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: .6rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; color: var(--c-muted); text-decoration: none; border-radius: 999px; }
  .lang-link:hover { color: var(--c-text); background: var(--c-s2); }
  .menu-toggle .i-close { display: none; }
  .menu-toggle[aria-expanded="true"] .i-close { display: block; }
  .menu-toggle[aria-expanded="true"] .i-menu { display: none; }
  .menu-panel { position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; background: var(--c-bg); padding: var(--sp-6) var(--gutter) var(--sp-9); overflow-y: auto; border-block-start: 1px solid var(--c-line); }
  .menu-panel ul { list-style: none; padding: 0; }
  .menu-panel nav a { display: flex; align-items: center; justify-content: space-between; min-block-size: 56px; font-size: 1.35rem; font-weight: 600; text-decoration: none; border-block-end: 1px solid var(--c-line); letter-spacing: -.01em; }
  .menu-panel nav a[aria-current="page"] { color: var(--c-lime-text); }
  .menu-panel .menu-foot { margin-block-start: var(--sp-6); display: grid; gap: var(--sp-3); }
  @media (min-width: 56em) {
    .main-nav { display: block; }
    .header-actions { margin-inline-start: 0; }
    .header-actions .hide-s { display: inline-flex; }
    .menu-toggle, .menu-panel { display: none !important; }
  }
  @media (min-width: 56em) and (max-width: 75em) { .header-actions .hide-m { display: none; } }

  /* ---------- Pied de page ---------- */
  .site-footer { background: var(--c-s1); border-block-start: 1px solid var(--c-line); padding-block: var(--sp-9) var(--sp-7); font-size: var(--fs-sm); position: relative; overflow: hidden; }
  .footer-grid { display: grid; gap: var(--sp-7); grid-template-columns: minmax(0, 1fr); }
  .footer-brand p { color: var(--c-muted); margin-block: var(--sp-4); max-inline-size: 34ch; }
  .footer-brand .status-pill { max-inline-size: none; }
  .footer-cols { display: grid; gap: var(--sp-6) var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-cols h2 { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); font-weight: 500; margin-block-end: var(--sp-3); }
  .footer-cols ul { list-style: none; padding: 0; display: grid; gap: 0; }
  .footer-cols a { display: inline-flex; align-items: center; min-block-size: 36px; text-decoration: none; color: var(--c-text); }
  .footer-cols a:hover { color: var(--c-lime-text); text-decoration: underline; }
  .footer-support { display: grid; gap: var(--sp-2); }
  .footer-legal { margin-block-start: var(--sp-8); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--c-line); display: grid; gap: var(--sp-3); color: var(--c-muted); }
  .footer-legal p { max-inline-size: 80ch; }
  .footer-legal a { color: var(--c-text); }
  .site-footer { padding-block-end: 7rem; }
  @media (min-width: 40em) { .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .footer-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
  .status-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .8rem; border-radius: 999px; background: var(--c-s2); border: 1px solid var(--c-line); font-size: var(--fs-xs); font-weight: 500; }
  .status-pill::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--c-control); }
  .status-pill[data-state="open"]::before { background: var(--c-lime); box-shadow: 0 0 0 3px rgb(198 242 78 / .22); }
  :root[data-theme="light"] .status-pill[data-state="open"]::before { background: #5C8B00; }
  .status-pill[data-state="closed"]::before { background: var(--c-amber); }

  /* ---------- Cartes ---------- */
  .card { background: var(--c-s1); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-5); position: relative; }
  .card--s2 { background: var(--c-s2); }
  .card h3, .card h2 { font-size: var(--fs-1); margin-block-end: var(--sp-2); letter-spacing: -.01em; }
  .card p { color: var(--c-muted); font-size: var(--fs-sm); line-height: 1.6; }
  .icon-chip { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 12px; background: var(--c-s3); color: var(--c-lime-text); margin-block-end: var(--sp-4); }
  .icon-chip svg { inline-size: 22px; block-size: 22px; }
  .icon-chip--violet { color: var(--c-violet); background: var(--c-violet-bg); }
  .photo { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); background: var(--c-s2); }
  .photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .photo figcaption, .photo .cap { position: absolute; inset-inline-start: 10px; inset-block-end: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; padding: .25rem .55rem; border-radius: 999px; background: rgb(10 13 22 / .78); color: #EFF2F9; }
  .photo--r32 { aspect-ratio: 3 / 2; } .photo--r45 { aspect-ratio: 4 / 5; } .photo--r169 { aspect-ratio: 16 / 9; }
  .tag { display: inline-flex; align-items: center; gap: .4em; padding: .2rem .65rem; border-radius: 999px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; background: var(--c-s3); color: var(--c-text); border: 1px solid var(--c-line); }
  .tag--violet { background: var(--c-violet-bg); color: var(--c-violet-soft); border-color: transparent; }
  .tag--lime { background: var(--c-lime); color: var(--c-on-lime); border-color: transparent; font-weight: 600; }

  /* ---------- Motifs ---------- */
  .dots { background-image: radial-gradient(rgb(255 255 255 / .06) 1px, transparent 1px); background-size: 24px 24px; }
  :root[data-theme="light"] .dots { background-image: radial-gradient(rgb(11 15 26 / .08) 1px, transparent 1px); }
  .ticket { --_r: 7px; background: var(--c-s2); padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + 10px); position: relative;
    -webkit-mask: radial-gradient(circle var(--_r) at 50% 100%, #0000 98%, #000) 50% 100% / 18px 100% repeat-x, linear-gradient(#000 0 0);
    -webkit-mask-composite: source-out; mask: radial-gradient(circle var(--_r) at 50% 100%, #0000 98%, #000) 50% 100% / 18px 100% repeat-x, linear-gradient(#000 0 0); mask-composite: exclude; }
  .ticket { -webkit-mask: radial-gradient(circle 6px at 9px 100%, #0000 98%, #000) 0 100% / 18px 12px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 11px) no-repeat; mask: radial-gradient(circle 6px at 9px 100%, #0000 98%, #000) 0 100% / 18px 12px repeat-x, linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 11px) no-repeat; }
  .live-dot { display: inline-block; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--c-lime); position: relative; flex: none; }
  :root[data-theme="light"] .live-dot { background: #5C8B00; }
  .live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c-lime); opacity: 0; animation: pulse 1.6s var(--ease) infinite; }
  .is-paused .live-dot::after, .live-dot.is-static::after { animation: none; }
  @keyframes pulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
  .live-badge { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }

  /* ---------- Formulaires ---------- */
  .field { display: grid; gap: .4rem; align-content: start; }
  .field > label, .field > .label, fieldset > legend { font-weight: 600; font-size: var(--fs-sm); }
  .field .hint { color: var(--c-muted); font-size: var(--fs-xs); }
  .req { color: var(--c-lime-text); }
  .input, select.input, textarea.input { inline-size: 100%; min-block-size: 48px; padding: .6rem .9rem; border-radius: 12px; border: 1px solid var(--c-control); background: var(--c-s2); color: var(--c-text); font-size: 1rem; transition: border-color var(--dur-2), box-shadow var(--dur-2); }
  textarea.input { min-block-size: 120px; resize: vertical; line-height: 1.5; }
  .input::placeholder { color: color-mix(in srgb, var(--c-muted) 80%, transparent); }
  .input:hover { border-color: var(--c-text); }
  .input:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 1px; border-radius: 12px; }
  :root[data-theme="light"] .input { background: #fff; }
  .input[aria-invalid="true"] { border-color: var(--c-coral); }
  .error-msg { color: var(--c-coral); font-size: var(--fs-sm); display: flex; gap: .4rem; align-items: flex-start; }
  .error-msg:empty { display: none; }
  .error-msg::before { content: "!"; flex: none; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--c-coral); color: var(--c-bg); font-weight: 700; font-size: 12px; display: grid; place-items: center; margin-block-start: 2px; }
  .error-summary { border: 1px solid var(--c-coral); border-radius: 12px; padding: var(--sp-4) var(--sp-5); background: color-mix(in srgb, var(--c-coral) 10%, transparent); }
  .error-summary h2 { font-size: var(--fs-1); margin-block-end: var(--sp-2); }
  .error-summary ul { padding-inline-start: 1.2rem; }
  .error-summary a { color: var(--c-text); }
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  .check { display: flex; gap: .75rem; align-items: flex-start; min-block-size: 44px; padding-block: .4rem; cursor: pointer; }
  .check input { appearance: none; flex: none; inline-size: 22px; block-size: 22px; margin-block-start: 1px; border: 1.5px solid var(--c-control); border-radius: 6px; background: var(--c-s2); display: grid; place-items: center; cursor: pointer; transition: background var(--dur-1), border-color var(--dur-1); }
  .check input[type="radio"] { border-radius: 50%; }
  .check input:checked { background: var(--c-lime); border-color: var(--c-lime); }
  .check input[type="checkbox"]:checked::after { content: ""; inline-size: 11px; block-size: 6px; border: 2.5px solid var(--c-on-lime); border-block-start: 0; border-inline-end: 0; transform: rotate(-45deg) translate(1px, -1px); }
  .check input[type="radio"]:checked::after { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--c-on-lime); }
  .check span { line-height: 1.4; }
  .switch { appearance: none; flex: none; inline-size: 46px; block-size: 26px; border-radius: 999px; background: var(--c-s3); border: 1.5px solid var(--c-control); position: relative; cursor: pointer; transition: background var(--dur-2), border-color var(--dur-2); }
  .switch::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 16px; block-size: 16px; border-radius: 50%; background: var(--c-text); transition: transform var(--dur-2) var(--ease); }
  .switch:checked { background: var(--c-lime); border-color: var(--c-lime); }
  .switch:checked::after { transform: translateX(20px); background: var(--c-on-lime); }
  .seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--c-s2); border: 1px solid var(--c-line); gap: 2px; }
  .seg legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .seg label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; padding-inline: 1.1rem; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--c-muted); cursor: pointer; transition: background var(--dur-2), color var(--dur-2); white-space: nowrap; }
  .seg label:hover { color: var(--c-text); }
  .seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .seg label:has(input:checked) { background: var(--c-lime); color: var(--c-on-lime); }
  .seg label:has(input:focus-visible) { outline: 2px solid var(--c-text); outline-offset: 2px; }
  .range { appearance: none; inline-size: 100%; block-size: 28px; background: transparent; cursor: pointer; }
  .range::-webkit-slider-runnable-track { block-size: 6px; border-radius: 3px; background: var(--c-s3); }
  .range::-moz-range-track { block-size: 6px; border-radius: 3px; background: var(--c-s3); }
  .range::-webkit-slider-thumb { appearance: none; inline-size: 24px; block-size: 24px; margin-block-start: -9px; border-radius: 50%; background: var(--c-lime); border: 3px solid var(--c-bg); box-shadow: 0 0 0 1px var(--c-control); }
  .range::-moz-range-thumb { inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--c-lime); border: 3px solid var(--c-bg); }
  .form-panel { background: var(--c-s1); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 4vw, 2.5rem); }
  .form-grid { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 40em) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .span-2 { grid-column: 1 / -1; } }
  .success-panel { text-align: center; display: grid; justify-items: center; gap: var(--sp-4); padding-block: var(--sp-6); }
  .success-panel .big-check { inline-size: 64px; block-size: 64px; border-radius: 50%; background: var(--c-lime); color: var(--c-on-lime); display: grid; place-items: center; }
  .success-panel .big-check svg { inline-size: 32px; }
  .success-panel h2 { font-size: var(--fs-3); }
  .success-panel h2:focus { outline: none; }

  /* ---------- FAQ ---------- */
  .faq { display: grid; gap: var(--sp-3); }
  .faq details { background: var(--c-s1); border: 1px solid var(--c-line); border-radius: 14px; transition: border-color var(--dur-2), background var(--dur-2); }
  .faq details[open] { background: var(--c-s2); border-color: var(--c-border); }
  .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); min-block-size: 56px; padding: .8rem var(--sp-5); font-weight: 600; border-radius: 14px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: ""; flex: none; inline-size: 12px; block-size: 12px; border: 2px solid var(--c-lime-text); border-block-start: 0; border-inline-start: 0; transform: rotate(45deg); transition: transform var(--dur-3) var(--ease); margin-block-end: 4px; }
  .faq details[open] summary::after { transform: rotate(-135deg); margin-block-end: -4px; }
  .faq summary:hover { color: var(--c-lime-text); }
  .faq .answer { padding: 0 var(--sp-5) var(--sp-5); color: var(--c-muted); }
  .faq .answer p + p { margin-block-start: var(--sp-3); }
  .faq mark, mark { background: color-mix(in srgb, var(--c-lime) 35%, transparent); color: inherit; border-radius: 3px; padding-inline: 1px; }

  /* ---------- Ticket « ce que vous payez » ---------- */
  .ticket-lines { list-style: none; padding: 0; display: grid; gap: 0; margin-block: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-sm); }
  .ticket-lines li { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: .85rem; border-block-end: 1px dashed var(--c-control); }
  .ticket-lines li > span:first-child { font-family: var(--font-sans); max-inline-size: 38ch; }
  .ticket-lines small { display: block; color: var(--c-muted); font-size: var(--fs-xs); }
  .ticket-total { display: flex; justify-content: space-between; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-1); padding-block-start: var(--sp-3); }

  /* ---------- Pastille de défilement fil d'Ariane ---------- */
  .crumbs { font-size: var(--fs-sm); color: var(--c-muted); padding-block: var(--sp-5) 0; }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
  .crumbs li + li::before { content: "/"; margin-inline-end: .5rem; opacity: .5; }
  .crumbs a { color: var(--c-muted); }
  .crumbs a:hover { color: var(--c-text); }

  /* ---------- Apparition ---------- */
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-4) var(--ease), transform var(--dur-4) var(--ease); transition-delay: calc(var(--i, 0) * 50ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }

  .noscript-note { background: var(--c-violet-bg); color: var(--c-violet-soft); border-radius: 12px; padding: var(--sp-4); font-size: var(--fs-sm); }
  .js .noscript-note { display: none; }
  .js .no-js-only { display: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1; transform: none; }
  }
  /* ---------- Éléments partagés par le site et l’application (couche components : app.css peut les ajuster) ---------- */
  .site-header .btn { white-space: nowrap; }
  .chip-ch { inline-size: 28px; block-size: 28px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: #0A0D16; }
  .chip-ch--momo { background: var(--series-momo); } .chip-ch--om { background: color-mix(in srgb, var(--series-om) 75%, #fff); color: #0A0D16; } .chip-ch--card { background: var(--series-card); } .chip-ch--cash { background: var(--series-cash); }
  :root[data-theme="light"] .chip-ch--card, :root[data-theme="light"] .chip-ch--cash { color: #fff; }
  .mini-ring { inline-size: 64px; block-size: 64px; flex: none; }
  .mini-ring--lg { inline-size: 92px; block-size: 92px; }
  /* Calque de visite */
  .tour-layer { position: fixed; inset: 0; z-index: 2000; }
  .tour-layer svg.tour-mask { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
  .tour-hole { transition: all 250ms var(--ease); }
  .tour-ring { fill: none; stroke: var(--c-lime); stroke-width: 2; transition: all 250ms var(--ease); }
  .tour-pop { position: absolute; inline-size: min(340px, calc(100vw - 24px)); background: var(--c-s2); color: var(--c-text); border: 1px solid var(--c-border); border-radius: 18px; padding: var(--sp-5); box-shadow: var(--shadow-pop); display: grid; gap: var(--sp-3); transition: inset-block-start 250ms var(--ease), inset-inline-start 250ms var(--ease); }
  .tour-pop .step { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-lime-text); }
  .tour-pop h2 { font-size: var(--fs-1); }
  .tour-pop h2:focus { outline: none; }
  .tour-pop p { color: var(--c-muted); font-size: var(--fs-sm); }
  .tour-pop .acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
  .tour-pop .acts .btn { flex: 1 1 auto; }
  .tour-pop .quit { background: none; border: 0; color: var(--c-muted); text-decoration: underline; min-block-size: 44px; padding-inline: .5rem; font-size: var(--fs-xs); }
  @media (max-width: 39.99em) { .tour-pop { inset-inline: 12px !important; inline-size: auto; } }

  .calc__rows { display: grid; gap: 0; margin: 0; }
  .calc__rows > div { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: .7rem; border-block-end: 1px dashed var(--c-control); align-items: baseline; }
  .calc__rows dt { color: var(--c-muted); font-size: var(--fs-sm); }
  .calc__rows dd { font-family: var(--font-mono); font-weight: 600; text-align: end; }
  .calc__rows .balance dd { font-size: var(--fs-2); color: var(--c-lime-text); }
  .calc__rows .balance.neg dd { color: var(--c-amber); }
  .details-box { border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-s1); }
  .details-box summary { cursor: pointer; padding: var(--sp-4) var(--sp-5); font-weight: 600; min-block-size: 52px; display: flex; align-items: center; }
  .details-box > div { padding: 0 var(--sp-5) var(--sp-5); color: var(--c-muted); font-size: var(--fs-sm); display: grid; gap: var(--sp-3); }
  .details-box code { background: var(--c-s3); padding: .1rem .4rem; border-radius: 6px; color: var(--c-text); }
  .feature-row ul.ticks { list-style: none; padding: 0; display: grid; gap: .6rem; margin-block-start: var(--sp-4); }
  .feature-row ul.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: .6rem; color: var(--c-muted); }
  .feature-row ul.ticks svg { inline-size: 18px; color: var(--c-lime-text); margin-block-start: 4px; }
  .feature-row ul.ticks strong { color: var(--c-text); }
  .callout { border-inline-start: 3px solid var(--c-violet); background: var(--c-violet-bg); color: var(--c-text); padding: var(--sp-4) var(--sp-5); border-radius: 0 14px 14px 0; margin-block-start: var(--sp-5); font-size: var(--fs-sm); }
  :root[data-theme="light"] .callout { color: #1F1450; }
  .callout--lime { border-color: var(--c-lime); background: color-mix(in srgb, var(--c-lime) 10%, var(--c-s1)); }
  :root[data-theme="light"] .callout--lime { color: var(--c-text); }
  .filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: var(--sp-6); }
  .filter-btn { min-block-size: 44px; padding-inline: 1.2rem; border-radius: 999px; background: var(--c-s2); border: 1px solid var(--c-line); font-weight: 600; font-size: var(--fs-sm); transition: background var(--dur-2); }
  .filter-btn:hover { border-color: var(--c-text); }
  .filter-btn[aria-pressed="true"] { background: var(--c-lime); color: var(--c-on-lime); border-color: transparent; }
  .avatar { inline-size: 64px; block-size: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 1.15rem; background: var(--c-s3); color: var(--c-text); border: 2px solid var(--_c, var(--c-lime)); }
}

@layer pages {

  html:not(.js) .js-only { display: none; }
  /* ---------- Impression ---------- */
  @media print {
    .site-header, .site-footer, .msd-badge, .skip, .menu-panel, .chips-nav, .cta-final, .pause-btn { display: none !important; }
    body { background: #fff; color: #000; }
    .js .reveal { opacity: 1 !important; transform: none !important; }
    a { color: #000; }
  }
}

@layer utilities {
  .footer-hours { margin-block-start: var(--sp-6); }
  .only-l { display: none; }
  .only-s { display: block; }
  @media (min-width: 56em) { .only-l { display: block; } .only-s { display: none; } }
  .mt-s { margin-block-start: var(--sp-5); } .mt-m { margin-block-start: var(--sp-7); } .mb-m { margin-block-end: var(--sp-6); }
  .center { text-align: center; justify-items: center; margin-inline: auto; }
  .nowrap { white-space: nowrap; }
  .filter-link { display: inline-flex; align-items: center; text-decoration: none; }
  .t-1 { font-size: var(--fs-1); } .t-3 { font-size: var(--fs-3); } .tight { margin-block: 0 .5rem; }
  .grow { flex: 1 1 7rem; inline-size: auto; min-inline-size: 0; }
  .calc__how { grid-column: 1 / -1; }
  .flow-ring-c { inline-size: 100%; }
}