:root { --night: #13112B; --night-2: #1D1A40; --night-3: #2C2961; --on-night: #EEEDFB; --on-night-muted: #B3B0D9; --lime: #C8F169; --lime-hover: #B7E64A; --paper: #F6F6FA; --surface: #FFFFFF; --ink: #17152E; --muted: #545470; --line: #DDDDE8; --indigo: #3B34B8;
      --font-head: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
      --funnel-rule: linear-gradient(90deg, var(--lime) 0 40%, rgba(200,241,105,.62) 40% 64%, rgba(200,241,105,.36) 64% 82%, rgba(200,241,105,.16) 82% 100%);
      --bars-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='16' viewBox='0 0 34 16'%3E%3Crect x='0' y='0' width='8' height='16' rx='1.5' fill='%233B34B8'/%3E%3Crect x='12' y='5' width='8' height='11' rx='1.5' fill='%233B34B8' fill-opacity='.62'/%3E%3Crect x='24' y='10' width='8' height='6' rx='1.5' fill='%233B34B8' fill-opacity='.32'/%3E%3C/svg%3E"); }
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; color: var(--ink); background: var(--paper); overflow-x: hidden; }
    a { color: var(--indigo); text-underline-offset: 3px; }
    :focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }
    .cadre { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 16px; }
    @media (min-width: 640px) { .cadre { padding: 0 24px; } }
    .toile-entete { position: sticky; top: 0; z-index: 10; background: var(--night); border-bottom: 1px solid var(--night-3); }
    .toile-entete .cadre { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; max-width: 1200px; }
    .toile-entete :focus-visible, .toile-colophon :focus-visible { outline-color: var(--lime); }
    .enseigne { display: inline-flex; align-items: center; gap: 10px; color: var(--on-night); text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; }
    .enseigne svg { width: 30px; height: 30px; flex: none; }
    .enseigne-tld { color: var(--lime); }
    .bouton-racine { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border-radius: 8px; background: var(--lime); color: var(--night); font-family: var(--font-head); font-weight: 700; font-size: .95rem; text-decoration: none; }
    .bouton-racine:hover { background: var(--lime-hover); }
    main.cadre { padding-top: 40px; padding-bottom: 64px; }
    main.cadre > h1 { font-family: var(--font-head); font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 20px; }
    main.cadre > h1::before { content: ""; display: block; width: 34px; height: 16px; margin-bottom: 16px; background: var(--bars-ink) no-repeat left center / contain; }
    h2 { font-family: var(--font-head); font-size: 1.3rem; line-height: 1.25; letter-spacing: -.01em; margin: 2em 0 .6em; padding-top: 1.2em; border-top: 1px solid var(--line); }
    p { margin: 0 0 1em; }
    .toile-colophon { position: relative; background: var(--night); color: var(--on-night-muted); padding: 30px 0 26px; font-size: .95rem; }
    .toile-colophon::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--funnel-rule); }
    .toile-colophon p { margin: 0; }
    .toile-colophon a { color: var(--on-night); }
    .toile-colophon a:hover { color: var(--lime); }