/* Kassa — styles des pages intérieures (produit, solutions, sécurité, ressources, aide, entreprise, contact, connexion, légal). Chargée après styles.css ; même couche « pages ». */
@layer pages {
  /* ---------- Héros ---------- */
  .hero { position: relative; padding-block: clamp(2.5rem, 2rem + 4vw, 6rem) var(--section); overflow: clip; }
  .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 78% 20%, var(--c-halo), transparent 70%); pointer-events: none; }
  .hero .dots-bg { position: absolute; inset: 0; -webkit-mask: linear-gradient(#000, transparent 85%); mask: linear-gradient(#000, transparent 85%); pointer-events: none; }
  .hero__grid { position: relative; display: grid; gap: var(--sp-8); align-items: center; }
  .hero__text { display: grid; gap: var(--sp-5); justify-items: start; }
  .hero__text .lead { max-inline-size: 36rem; }
  .hero__proofs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: var(--fs-sm); color: var(--c-muted); }
  .hero__proofs li { display: inline-flex; align-items: center; gap: .5rem; }
  .hero__proofs svg { inline-size: 16px; color: var(--c-lime-text); flex: none; }
  .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
  @media (min-width: 64em) { .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-7); } }
  .hero--page { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
  .hero--page h1 { font-size: var(--fs-4); max-inline-size: 22ch; }
  .hero--page .lead { margin-block-start: var(--sp-4); max-inline-size: 42rem; }
  .hero-pause { position: relative; }

  /* ---------- Schéma des fonds ---------- */
  .flow { display: grid; gap: var(--sp-4); align-items: stretch; grid-template-columns: minmax(0, 1fr); }
  .flow__node { background: var(--c-s2); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-5); display: grid; gap: .4rem; justify-items: start; }
  .flow__node svg { inline-size: 28px; color: var(--c-lime-text); }
  .flow__node strong { font-size: var(--fs-1); }
  .flow__node span { color: var(--c-muted); font-size: var(--fs-sm); }
  .flow__arrow { display: grid; place-items: center; align-content: center; color: var(--c-lime-text); font-family: var(--font-mono); font-size: var(--fs-xs); text-align: center; gap: .25rem; }
  .flow__arrow svg { inline-size: 40px; transform: rotate(90deg); }
  .flow__note { max-inline-size: none; grid-column: 1 / -1; border: 1px dashed var(--c-violet); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); color: var(--c-violet-soft); font-size: var(--fs-sm); display: flex; gap: .75rem; align-items: center; }
  .flow__note svg { inline-size: 22px; flex: none; }
  .flow__node--kassa { border-color: var(--c-violet); background: var(--c-violet-bg); }
  .flow__node--kassa svg, .flow__node--kassa strong { color: var(--c-violet-soft); }
  .flow__node--kassa span { color: var(--c-text); opacity: .85; }
  @media (min-width: 56em) { .flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); } .flow__arrow svg { transform: none; } }
  .points4 { display: grid; gap: var(--sp-4); list-style: none; padding: 0; }
  .points4 li { display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-3); }
  .points4 svg { inline-size: 24px; color: var(--c-lime-text); margin-block-start: 3px; }
  .points4 strong { display: block; }
  .points4 span { color: var(--c-muted); font-size: var(--fs-sm); }
  @media (min-width: 40em) { .points4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ---------- Appel final ---------- */
  .cta-final { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--c-s2); border: 1px solid var(--c-border); padding: clamp(2rem, 6vw, 5rem); display: grid; gap: var(--sp-5); justify-items: start; isolation: isolate; }
  .cta-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 80% at 90% 0%, var(--c-halo), transparent); }
  .cta-final .ring-deco { position: absolute; inset-inline-end: -60px; inset-block-end: -60px; inline-size: 280px; opacity: .1; z-index: -1; }
  .cta-final h2 { max-inline-size: 18ch; }
  .cta-final p { color: var(--c-muted); font-size: var(--fs-1); }

  /* ---------- Produit ---------- */
  .chips-nav { position: sticky; inset-block-start: var(--header-h); z-index: 50; background: var(--c-header); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-block-end: 1px solid var(--c-line); }
  .chips-nav ul { list-style: none; padding: .5rem 0; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: thin; }
  .chips-nav a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 1rem; border-radius: 999px; background: var(--c-s2); border: 1px solid var(--c-line); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; transition: background var(--dur-2), color var(--dur-2); }
  .chips-nav a:hover, .chips-nav a[aria-current="true"] { background: var(--c-lime); color: var(--c-on-lime); border-color: transparent; }
  .feature-row { padding-block: var(--sp-8); border-block-end: 1px solid var(--c-line); }
  .feature-row:last-of-type { border: 0; }
  .feature-row h2 { font-size: var(--fs-3); margin-block: var(--sp-3) var(--sp-4); }
  .receipt { max-inline-size: 340px; font-family: var(--font-mono); font-size: 13px; }
  .receipt h3 { font-family: var(--font-sans); font-size: var(--fs-1); }
  .receipt dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin-block: var(--sp-3); }
  .receipt dd { text-align: end; }
  .receipt .big { font-size: 1.6rem; font-weight: 600; letter-spacing: -.04em; }
  .matrix-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius); }
  .matrix { inline-size: 100%; min-inline-size: 620px; font-size: var(--fs-sm); }
  .matrix th, .matrix td { padding: .75rem 1rem; border-block-end: 1px solid var(--c-line); text-align: center; }
  .matrix th:first-child, .matrix td:first-child { text-align: start; }
  .matrix thead th { background: var(--c-s2); }
  .matrix svg { inline-size: 18px; margin-inline: auto; color: var(--c-lime-text); }
  .code-block { background: #070A12; color: #EFF2F9; border: 1px solid var(--c-line); border-radius: 14px; padding: var(--sp-5); overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; }
  .code-block .k { color: #B9A6FF; } .code-block .s { color: #C6F24E; } .code-block .c { color: #A3AABC; }
  :root[data-theme="light"] .code-block { background: #0B0F1A; }
  .terrain-grid { display: grid; gap: var(--sp-3); }
  @media (min-width: 40em) { .terrain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .terrain-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  /* ---------- Solutions ---------- */
  .solution { padding-block: var(--sp-8); border-block-end: 1px solid var(--c-line); }
  .solution:last-of-type { border: 0; }
  .solution h2 { font-size: var(--fs-3); margin-block-end: var(--sp-4); }
  .solution h3 { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-lime-text); font-weight: 500; margin-block: var(--sp-5) var(--sp-2); }
  .solution ul.ticks { list-style: none; padding: 0; display: grid; gap: .6rem; }
  .solution ul.ticks li { padding-inline-start: 1.5rem; position: relative; color: var(--c-muted); }
  .solution ul.ticks li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .6em; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--c-lime); }
  .timeline { list-style: none; padding: 0; display: grid; gap: 0; border-inline-start: 1px dashed var(--c-control); margin-inline-start: 6px; }
  .timeline li { position: relative; padding: .45rem 0 .45rem var(--sp-5); font-size: var(--fs-sm); color: var(--c-muted); }
  .timeline li::before { content: ""; position: absolute; inset-inline-start: -5px; inset-block-start: 1em; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--c-bg); border: 2px solid var(--c-lime); }
  .timeline time { font-family: var(--font-mono); color: var(--c-text); margin-inline-end: .6rem; }
  .solution__offer { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin-block-start: var(--sp-5); }
  .solution .split { align-items: start; }
  @media (min-width: 56em) { .solution:nth-of-type(even) .split > :first-child { order: 2; } }

  /* ---------- Sécurité ---------- */
  .fund-diagram { background: var(--c-s1); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: clamp(1rem, 3vw, 2.5rem); }
  .fund-svg { inline-size: 100%; block-size: auto; max-inline-size: 960px; margin-inline: auto; }
  .fund-svg text { font-family: var(--font-sans); fill: var(--c-text); }
  .fund-svg .mono { font-family: var(--font-mono); fill: var(--c-muted); }
  .fund-svg .box { fill: var(--c-s2); stroke: var(--c-border); stroke-width: 1.5; }
  .fund-svg .box-k { fill: var(--c-violet-bg); stroke: var(--c-violet); stroke-width: 1.5; stroke-dasharray: 6 5; }
  .fund-svg .flow-l { stroke: var(--c-lime); stroke-width: 3; fill: none; }
  .fund-svg .flow-d { stroke: var(--c-violet); stroke-width: 2; fill: none; stroke-dasharray: 5 6; }
  .fund-svg .head { fill: var(--c-lime); }
  .fund-svg .head-v { fill: var(--c-violet); }
  .fund-svg .lbl { font-size: 13px; }
  .fund-svg .ttl { font-size: 16px; font-weight: 650; }
  .fund-svg .sub { font-size: 12.5px; fill: var(--c-muted); }
  .status-list { list-style: none; padding: 0; display: grid; gap: 0; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-s1); }
  .status-list li { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-5); border-block-end: 1px solid var(--c-line); }
  .status-list li:last-child { border: 0; }
  .ok { display: inline-flex; align-items: center; gap: .5rem; color: var(--c-lime-text); font-weight: 600; font-size: var(--fs-sm); }
  .ok svg { inline-size: 18px; }
  .uptime { display: flex; gap: 2px; block-size: 36px; margin-block: var(--sp-4) var(--sp-2); }
  .uptime i { flex: 1; background: var(--c-lime); border-radius: 2px; opacity: .85; }
  :root[data-theme="light"] .uptime i { background: #5C8B00; }
  .uptime i.warn { background: var(--c-amber); opacity: 1; }
  .incident { border-inline-start: 3px solid var(--c-amber); padding-inline-start: var(--sp-4); color: var(--c-muted); }
  .incident time { color: var(--c-text); font-weight: 600; }

  /* ---------- Ressources et articles ---------- */
  .article-card { display: flex; flex-direction: column; background: var(--c-s1); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; text-decoration: none; transition: border-color var(--dur-2), transform var(--dur-3) var(--ease); }
  .article-card:hover { border-color: var(--c-control); transform: translateY(-3px); }
  .article-card .cover { border-radius: 0; border: 0; }
  .cover { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); background: var(--c-s2); }
  .cover svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; }
  .cv-stop-a { stop-color: var(--c-violet-bg); } .cv-stop-b { stop-color: var(--c-s1); } .cv-dot { fill: var(--c-text); opacity: .07; }
  .cv-past { fill: var(--c-s3); } .cv-now { fill: var(--c-lime); } .cv-next { fill: none; stroke: var(--c-control); stroke-width: 3; }
  .cv-ini { font: 650 34px var(--font-sans); } .cv-past-t { fill: var(--c-muted); } .cv-now-t { fill: var(--c-on-lime); } .cv-next-t { fill: var(--c-text); }
  .cv-big { fill: var(--c-text); font: 650 78px var(--font-mono); letter-spacing: -.05em; } .cv-sub { fill: var(--c-muted); font: 500 40px var(--font-sans); }
  .cv-card { fill: var(--c-s1); stroke: var(--c-border); stroke-width: 2; } .cv-ok { fill: var(--c-lime); } .cv-warn { fill: var(--c-amber); }
  .cv-tick { fill: none; stroke: var(--c-on-lime); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; } .cv-bang { fill: none; stroke: #0A0D16; stroke-width: 8; stroke-linecap: round; }
  .cv-lbl { fill: var(--c-text); font: 600 36px var(--font-sans); } .cv-lbl2 { fill: var(--c-text); font: 650 48px var(--font-mono); letter-spacing: -.03em; }
  .cv-ticket { fill: var(--c-s3); } .cv-eyebrow { fill: var(--c-lime-text); font: 500 30px var(--font-mono); letter-spacing: .12em; }
  .cv-row { fill: var(--c-text); font: 500 44px var(--font-mono); letter-spacing: -.03em; } .cv-strong { font-weight: 600; font-size: 52px; }
  .cv-dash { stroke: var(--c-control); stroke-width: 3; stroke-dasharray: 10 12; }
  .cv-time { fill: var(--c-text); font: 600 120px var(--font-mono); letter-spacing: -.06em; } .cv-sub2 { fill: var(--c-muted); font: 500 34px var(--font-sans); }
  .cv-live { fill: var(--c-lime); } .cv-link { stroke: var(--c-lime); stroke-width: 6; stroke-dasharray: 4 18; stroke-linecap: round; }
  .cv-pill { fill: var(--c-lime); } .cv-pilltxt { fill: var(--c-on-lime); font: 650 50px var(--font-mono); letter-spacing: -.03em; }
  .article-card__body { padding: var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; flex: 1; }
  .article-card h3 { font-size: var(--fs-1); letter-spacing: -.01em; }
  .article-card p { color: var(--c-muted); font-size: var(--fs-sm); }
  .article-card .meta { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); font-family: var(--font-mono); font-size: 11.5px; color: var(--c-muted); }
  .changelog { list-style: none; padding: 0; display: grid; gap: 0; border-inline-start: 1px solid var(--c-border); }
  .changelog li { position: relative; padding: var(--sp-4) 0 var(--sp-5) var(--sp-6); }
  .changelog li::before { content: ""; position: absolute; inset-inline-start: -5px; inset-block-start: 1.7rem; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--c-lime); }
  .changelog .v { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-lime-text); font-weight: 600; }
  .changelog time { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); margin-inline-start: .75rem; }
  .changelog p { margin-block-start: .35rem; }
  .article-head { padding-block: var(--sp-6) var(--sp-6); }
  .article-head h1 { font-size: var(--fs-4); max-inline-size: 24ch; margin-block: var(--sp-4); }
  .article-meta { margin-block-start: var(--sp-4); display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-muted); }
  .article-body { display: grid; gap: var(--sp-7); padding-block: var(--sp-7) var(--sp-9); }
  .article-body .prose { max-inline-size: 70ch; }
  .prose h2 { font-size: var(--fs-3); margin-block: var(--sp-8) var(--sp-4); }
  .prose h2:first-child { margin-block-start: 0; }
  .prose p + p { margin-block-start: var(--sp-4); }
  .prose ul, .prose ol { padding-inline-start: 1.3rem; margin-block: var(--sp-4); display: grid; gap: .5rem; }
  .prose li::marker { color: var(--c-lime-text); }
  .toc { background: var(--c-s1); border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-5); font-size: var(--fs-sm); align-self: start; }
  .toc h2 { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); font-weight: 500; margin-block-end: var(--sp-3); }
  .toc ol { padding-inline-start: 1.2rem; display: grid; gap: .3rem; }
  .toc a { display: inline-flex; align-items: center; min-block-size: 32px; text-decoration: none; }
  .toc a:hover { color: var(--c-lime-text); text-decoration: underline; }
  @media (min-width: 64em) { .article-head, .wrap-narrow:has(> .cover--wide) { inline-size: min(100% - 2 * var(--gutter), 1200px); padding-inline-end: calc(260px + var(--sp-7)); } .article-head > *, .wrap-narrow:has(> .cover--wide) > * { max-inline-size: 820px; } }
  @media (min-width: 64em) { .article-body { grid-template-columns: minmax(0, 1fr) 260px; } .toc { position: sticky; inset-block-start: calc(var(--header-h) + 24px); order: 2; } }
  .related { display: grid; gap: var(--sp-4); }
  @media (min-width: 40em) { .related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ---------- Aide ---------- */
  .help-search { position: relative; max-inline-size: 640px; margin-block-start: var(--sp-5); }
  .help-search svg { position: absolute; inset-inline-start: 16px; inset-block-start: 50%; transform: translateY(-50%); inline-size: 20px; color: var(--c-muted); pointer-events: none; }
  .help-search .input { padding-inline-start: 3rem; min-block-size: 56px; border-radius: 999px; font-size: 1.05rem; }
  .help-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: var(--sp-6); }
  .help-cat { margin-block-end: var(--sp-8); }
  .help-cat h2 { font-size: var(--fs-3); margin-block-end: var(--sp-4); }
  .help-status { color: var(--c-muted); font-size: var(--fs-sm); min-block-size: 1.5em; margin-block-start: var(--sp-3); }
  .help-empty { padding: var(--sp-6); border: 1px dashed var(--c-control); border-radius: var(--radius); display: grid; gap: var(--sp-4); justify-items: start; }
  .contact-cards { display: grid; gap: var(--sp-4); }
  @media (min-width: 56em) { .contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .channel { display: grid; gap: .35rem; }
  .channel strong { font-size: var(--fs-1); }
  .channel a { color: var(--c-lime-text); font-weight: 600; text-decoration: none; min-block-size: 32px; display: inline-flex; align-items: center; }
  .channel a:hover { text-decoration: underline; }

  /* ---------- Entreprise ---------- */
  .never { display: grid; gap: var(--sp-4); }
  .never .card { display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-4); align-items: start; }
  .never .icon-chip { margin: 0; color: var(--c-coral); }
  .never h3 { margin-block-end: .25rem; }
  @media (min-width: 40em) { .never { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .never { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .story { font-size: var(--fs-1); line-height: 1.7; }
  .story p + p { margin-block-start: var(--sp-5); }
  .story p:first-child::first-letter { font-size: 3.4em; float: inline-start; line-height: .9; padding-inline-end: .12em; font-weight: 700; color: var(--c-lime-text); }
  .team { display: grid; gap: var(--sp-4); }
  .member { display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-4); align-items: center; padding: var(--sp-4); border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-s1); }
  .member strong { display: block; } .member span { color: var(--c-muted); font-size: var(--fs-sm); }
  @media (min-width: 40em) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .mini-plan { margin-block-start: var(--sp-5); border-radius: 14px; overflow: hidden; border: 1px solid var(--c-line); }
  .mini-plan svg { display: block; inline-size: 100%; block-size: auto; }
  .mp-bg { fill: var(--c-s1); } .mp-road { fill: none; stroke: var(--c-s3); stroke-width: 14; stroke-linecap: round; } .mp-road--s { stroke-width: 7; }
  .mp-rp { fill: var(--c-s1); stroke: var(--c-s3); stroke-width: 14; } .mp-route { fill: none; stroke: var(--c-lime); stroke-width: 3; stroke-dasharray: 7 7; }
  :root[data-theme="light"] .mp-route { stroke: var(--c-lime-text); } .mp-pin { fill: var(--c-lime); stroke: var(--c-bg); stroke-width: 3; } .mp-halo { fill: color-mix(in srgb, var(--c-lime) 22%, transparent); }
  .mp-t { font: 600 15px var(--font-sans); fill: var(--c-text); } .mp-t--lime { fill: var(--c-lime-text); } .mp-s { font: 500 13px var(--font-mono); fill: var(--c-muted); }

  /* ---------- Contact ---------- */
  .orient { display: grid; gap: var(--sp-4); margin-block-end: var(--sp-8); }
  .orient a { text-decoration: none; }
  .orient .card { transition: border-color var(--dur-2), transform var(--dur-3) var(--ease); block-size: 100%; }
  .orient a:hover .card { border-color: var(--c-lime); transform: translateY(-2px); }
  @media (min-width: 56em) { .orient { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .contact-layout { display: grid; gap: var(--sp-7); }
  @media (min-width: 64em) { .contact-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; } }
  .info-list { display: grid; gap: var(--sp-5); font-style: normal; }
  .info-list dt { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); }
  .info-list dd { margin-block-start: .2rem; }
  .info-list a { color: var(--c-lime-text); }
  .counter { text-align: end; font-size: var(--fs-xs); color: var(--c-muted); font-family: var(--font-mono); }

  /* ---------- Connexion ---------- */
  .auth-body { min-block-size: 100dvh; }
  .auth-bar { min-block-size: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
  .auth-layout { display: grid; min-block-size: calc(100dvh - var(--header-h)); }
  .auth-main { padding-block: var(--sp-6) var(--sp-9); display: grid; align-content: center; }
  .auth-card { inline-size: min(100% - 2 * var(--gutter), 460px); margin-inline: auto; display: grid; gap: var(--sp-5); }
  .auth-card h1 { font-size: var(--fs-3); }
  .demo-box { display: flex; gap: .75rem; padding: var(--sp-4); border-radius: 12px; background: var(--c-violet-bg); color: var(--c-text); font-size: var(--fs-sm); border: 1px solid color-mix(in srgb, var(--c-violet) 40%, transparent); }
  :root[data-theme="light"] .demo-box { color: #1F1450; }
  .demo-box svg { inline-size: 20px; flex: none; color: var(--c-violet); margin-block-start: 2px; }
  .tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--c-s2); border: 1px solid var(--c-line); }
  .tabs [role="tab"] { flex: 1; min-block-size: 44px; border-radius: 999px; border: 0; background: transparent; font-weight: 600; color: var(--c-muted); transition: background var(--dur-2), color var(--dur-2); }
  .tabs [role="tab"][aria-selected="true"] { background: var(--c-lime); color: var(--c-on-lime); }
  .tabs [role="tab"]:not([aria-selected="true"]):hover { color: var(--c-text); }
  .pw-wrap { position: relative; }
  .pw-wrap .input { padding-inline-end: 6.2rem; }
  .pw-toggle { position: absolute; inset-inline-end: 6px; inset-block-start: 50%; transform: translateY(-50%); min-block-size: 36px; padding-inline: .8rem; border-radius: 999px; border: 0; background: var(--c-s3); font-size: var(--fs-xs); font-weight: 600; }
  .pw-toggle:hover { background: var(--c-border); }
  .offer-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
  .offer-chips label { position: relative; min-block-size: 44px; display: inline-flex; flex-direction: column; justify-content: center; padding: .3rem 1rem; border-radius: 12px; border: 1px solid var(--c-control); cursor: pointer; font-weight: 600; font-size: var(--fs-sm); line-height: 1.25; }
  .offer-chips label small { font-weight: 400; color: var(--c-muted); font-size: 11.5px; }
  .offer-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .offer-chips label:has(input:checked) { background: color-mix(in srgb, var(--c-lime) 14%, var(--c-s2)); border-color: var(--c-lime); }
  .offer-chips label:has(input:focus-visible) { outline: 2px solid var(--c-lime); outline-offset: 2px; }
  .sms { display: flex; gap: .75rem; align-items: flex-start; padding: var(--sp-4); border-radius: 18px 18px 18px 4px; background: var(--c-s3); font-size: var(--fs-sm); border: 1px solid var(--c-border); }
  .sms svg { inline-size: 20px; flex: none; color: var(--c-lime-text); margin-block-start: 2px; }
  .sms b { font-family: var(--font-mono); font-size: 1.05em; color: var(--c-lime-text); letter-spacing: .06em; }
  .otp { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
  .otp input { position: absolute; inset: 0; opacity: 0; inline-size: 100%; block-size: 100%; cursor: text; font-size: 16px; }
  .otp i { display: grid; place-items: center; aspect-ratio: 1 / 1.15; border-radius: 12px; background: var(--c-s2); border: 1px solid var(--c-control); font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; font-style: normal; }
  .otp:focus-within i.cur-box { border-color: var(--c-lime); box-shadow: 0 0 0 2px var(--c-lime); }
  .otp[data-invalid="true"] i { border-color: var(--c-coral); }
  .auth-aside { display: none; position: relative; isolation: isolate; overflow: hidden; }
  .auth-aside img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -2; }
  .auth-aside::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(10 13 22 / .95), rgb(10 13 22 / .45) 55%, rgb(10 13 22 / .35)); }
  .auth-aside__text { position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--sp-8); color: #EFF2F9; display: grid; gap: var(--sp-3); }
  .auth-aside__text p { font-size: var(--fs-3); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; max-inline-size: 18ch; }
  @media (min-width: 56em) { .auth-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .auth-aside { display: block; } }
  .inline-panel { padding: var(--sp-4); border-radius: 12px; background: var(--c-s2); border: 1px solid var(--c-border); display: grid; gap: var(--sp-3); }

  /* ---------- Légal ---------- */
  .legal { padding-block: var(--sp-6) var(--sp-9); }
  .legal h1 { font-size: var(--fs-4); margin-block-end: var(--sp-5); }
  .legal h2 { font-size: var(--fs-2); margin-block: var(--sp-7) var(--sp-3); }
  .legal p, .legal li { color: var(--c-muted); }
  .legal ul { padding-inline-start: 1.3rem; margin-block: var(--sp-3); display: grid; gap: .4rem; }
  .legal a { color: var(--c-lime-text); }
  .legal table { inline-size: 100%; font-size: var(--fs-sm); margin-block: var(--sp-4); }
  .legal th, .legal td { text-align: start; padding: .6rem .8rem; border-block-end: 1px solid var(--c-line); vertical-align: top; }
  .legal th { color: var(--c-text); font-weight: 600; }
  .legal .scroll { overflow-x: auto; }

  /* ---------- 404 ---------- */
  .page-404 { min-block-size: 100dvh; display: grid; place-items: center; text-align: center; padding: var(--sp-7) var(--gutter); }

  /* ---------- 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; }
  }
}