/* Colours, fonts and shapes of the 7 styles (light and dark), shared by index.html and mentions-legales.html.
   The style chosen in the "Style" panel is restored by the small script at the top of each page. */
@font-face { font-family: "Inter"; src: url("fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Anton"; src: url("fonts/anton-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* =====================================================================
   THEMES — every colour, font and shape comes from these variables.
   .alt sections switch to the theme's alternate palette.
   ===================================================================== */
:root {
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --anton: "Anton", "Impact", "Arial Narrow", sans-serif;
  --instrument: "Instrument Serif", Georgia, serif;
  --rounded: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", "Varela Round", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --max: 1280px;
  --fs: 1; --space: 1;
  /* default theme: Nuit */
  --bg: #07080c; --bg-2: #0d0f16; --ink: #f4f1ec; --ink-2: #aab0bc; --ink-3: #737a88;
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .17); --card: rgba(255, 255, 255, .035); --card-2: rgba(255, 255, 255, .07);
  --a1: #ff6a55; --a2: #ffb58c; --a3: #8391ff; --on-a1: #0b0c10; --lab: var(--a1);
  --grad: linear-gradient(100deg, var(--a1), var(--a2) 45%, var(--a3));
  --btn: var(--ink); --on-btn: #0b0c10;
  --display: var(--serif); --display-w: 600; --display-tt: none; --display-ls: -.035em; --display-lh: .95;
  --acc-font: var(--serif); --acc-style: normal; --acc-fill: var(--grad);
  --body: var(--sans);
  --r: 22px; --bw: 1px; --shadow: none; --glow: none;
  --blob1: #1b1f4a; --blob2: #ff6a55; --blob3: #8391ff;
}
html[data-theme="circuit"] {
  --bg: #f2f1ea; --bg-2: #e8e7dd; --ink: #16180f; --ink-2: #4f5343; --ink-3: #7d8170;
  --line: rgba(22, 24, 15, .12); --line-2: rgba(22, 24, 15, .24); --card: rgba(255, 255, 255, .55); --card-2: #fff;
  --a1: #d2ff00; --a2: #b7e000; --a3: #282c20; --on-a1: #16180f; --lab: #5f7a00;
  --grad: linear-gradient(100deg, #282c20, #4b5a12);
  --btn: #d2ff00; --on-btn: #16180f;
  --display: var(--anton); --display-w: 400; --display-tt: uppercase; --display-ls: 0; --display-lh: .9;
  --acc-font: var(--instrument); --acc-style: italic; --acc-fill: linear-gradient(#5f7a00, #5f7a00);
  --r: 14px;
  --blob1: #282c20; --blob2: #d2ff00; --blob3: #f2f1ea;
}
html[data-theme="circuit"] .alt { --bg: #282c20; --bg-2: #22261b; --ink: #f2f1ea; --ink-2: #c7c9b8; --ink-3: #8e917f; --line: rgba(242, 241, 234, .12); --line-2: rgba(242, 241, 234, .24); --card: rgba(255, 255, 255, .04); --card-2: rgba(255, 255, 255, .08); --acc-fill: linear-gradient(#d2ff00, #d2ff00); --lab: #d2ff00; }
html[data-theme="suisse"] {
  --bg: #ffffff; --bg-2: #f3f3f1; --ink: #0a0a0a; --ink-2: #3c3c3c; --ink-3: #7a7a7a;
  --line: rgba(0, 0, 0, .12); --line-2: rgba(0, 0, 0, .9); --card: #fff; --card-2: #f6f6f4;
  --a1: #e30613; --a2: #e30613; --a3: #0a0a0a; --on-a1: #fff; --lab: #e30613;
  --grad: linear-gradient(#e30613, #e30613);
  --btn: #0a0a0a; --on-btn: #fff;
  --display: var(--sans); --display-w: 800; --display-tt: none; --display-ls: -.055em; --display-lh: .92;
  --acc-font: var(--sans); --acc-style: normal; --acc-fill: linear-gradient(#e30613, #e30613);
  --r: 0px;
  --blob1: #d9d9d6; --blob2: #e30613; --blob3: #ffffff;
}
html[data-theme="suisse"] .alt { --bg: #f3f3f1; }
html[data-theme="luxe"] {
  --bg: #f4efe6; --bg-2: #ebe4d7; --ink: #15130f; --ink-2: #5a5247; --ink-3: #8f8676;
  --line: rgba(168, 131, 74, .28); --line-2: rgba(168, 131, 74, .6); --card: rgba(255, 255, 255, .4); --card-2: #fffaf1;
  --a1: #a8834a; --a2: #c9a86a; --a3: #15130f; --on-a1: #fff; --lab: #a8834a;
  --grad: linear-gradient(100deg, #8a6a35, #c9a86a 50%, #8a6a35);
  --btn: #15130f; --on-btn: #f4efe6;
  --display: var(--instrument); --display-w: 400; --display-tt: none; --display-ls: -.02em; --display-lh: .92;
  --acc-font: var(--instrument); --acc-style: italic; --acc-fill: var(--grad);
  --r: 20px;
  --blob1: #3a2e1c; --blob2: #c9a86a; --blob3: #fff3dc;
}
html[data-theme="luxe"] .alt { --bg: #15130f; --bg-2: #1d1a15; --ink: #f4efe6; --ink-2: #c9bfae; --ink-3: #8f8676; --card: rgba(255, 255, 255, .03); --card-2: rgba(255, 255, 255, .06); --btn: #c9a86a; --on-btn: #15130f; --lab: #c9a86a; }
html[data-theme="brutal"] {
  --bg: #fffdf0; --bg-2: #fff6b8; --ink: #000; --ink-2: #1c1c1c; --ink-3: #555;
  --line: #000; --line-2: #000; --card: #fff; --card-2: #fff;
  --a1: #ffe500; --a2: #ff3b30; --a3: #0047ff; --on-a1: #000; --lab: #0047ff;
  --grad: linear-gradient(#0047ff, #0047ff);
  --btn: #ffe500; --on-btn: #000;
  --display: var(--mono); --display-w: 400; --display-tt: uppercase; --display-ls: -.04em; --display-lh: .95;
  --acc-font: var(--mono); --acc-style: normal; --acc-fill: linear-gradient(#0047ff, #0047ff);
  --r: 0px; --bw: 3px; --shadow: 6px 6px 0 #000;
  --blob1: #0047ff; --blob2: #ffe500; --blob3: #ff3b30;
}
html[data-theme="brutal"] .alt { --bg: #fff6b8; }
html[data-theme="neon"] {
  --bg: #0d0221; --bg-2: #160636; --ink: #f7f0ff; --ink-2: #c3b3e6; --ink-3: #8a79b3;
  --line: rgba(45, 226, 230, .18); --line-2: rgba(255, 42, 157, .45); --card: rgba(255, 255, 255, .04); --card-2: rgba(255, 255, 255, .08);
  --a1: #ff2a9d; --a2: #2de2e6; --a3: #f6c90e; --on-a1: #0d0221; --lab: #2de2e6;
  --grad: linear-gradient(100deg, #ff2a9d, #b537f2 50%, #2de2e6);
  --btn: #2de2e6; --on-btn: #0d0221;
  --display: var(--anton); --display-w: 400; --display-tt: uppercase; --display-ls: 0; --display-lh: .92;
  --acc-font: var(--instrument); --acc-style: italic; --acc-fill: var(--grad);
  --r: 18px; --glow: 0 0 18px rgba(255, 42, 157, .55), 0 0 42px rgba(45, 226, 230, .25);
  --blob1: #2a0a5e; --blob2: #ff2a9d; --blob3: #2de2e6;
}
html[data-theme="neon"] .alt { --bg: #160636; }
html[data-theme="nuit"] .alt { --bg: #0c0e15; }
html[data-theme="girly"] {
  --bg: #fff1f8; --bg-2: #ffe3f1; --ink: #3b0f4a; --ink-2: #7b4a8c; --ink-3: #a07bb0;
  --line: rgba(255, 62, 165, .18); --line-2: rgba(255, 62, 165, .4); --card: rgba(255, 255, 255, .72); --card-2: #fff;
  --a1: #ff3ea5; --a2: #c77dff; --a3: #1ed99a; --on-a1: #fff; --lab: #e0218a;
  --grad: linear-gradient(100deg, #ff3ea5, #c77dff 55%, #1ed99a);
  --btn: #ff3ea5; --on-btn: #fff;
  --display: var(--rounded); --display-w: 800; --display-tt: none; --display-ls: -.035em; --display-lh: .95;
  --acc-font: var(--instrument); --acc-style: italic; --acc-fill: linear-gradient(100deg, #ff3ea5, #c77dff);
  --r: 28px; --shadow: 0 12px 30px -14px rgba(255, 62, 165, .45);
  --blob1: #ffb3dc; --blob2: #ff3ea5; --blob3: #d9c2ff;
}
/* ---------- light and dark variants: each style has both ---------- */
html[data-mode="light"][data-theme="nuit"] { --bg: #f7f5f1; --bg-2: #eeebe5; --ink: #12131a; --ink-2: #4b505e; --ink-3: #7c8190; --line: rgba(18, 19, 26, .1); --line-2: rgba(18, 19, 26, .2); --card: rgba(255, 255, 255, .75); --card-2: #fff; --btn: #12131a; --on-btn: #fff; --on-a1: #fff; --lab: #e2513d; --blob1: #c9cdf2; }
html[data-mode="light"][data-theme="nuit"] .alt { --bg: #eeebe5; }
html[data-mode="light"][data-theme="neon"] { --bg: #fdf3ff; --bg-2: #f6e6ff; --ink: #2a0a4a; --ink-2: #6a3f8f; --ink-3: #9a7ab8; --line: rgba(181, 55, 242, .18); --line-2: rgba(255, 42, 157, .45); --card: rgba(255, 255, 255, .7); --card-2: #fff; --btn: #ff2a9d; --on-btn: #fff; --glow: none; --lab: #d4148a; --blob1: #ffc2e6; }
html[data-mode="light"][data-theme="neon"] .alt { --bg: #f6e6ff; }
html[data-mode="dark"][data-theme="circuit"] { --bg: #1b1e14; --bg-2: #23271b; --ink: #f2f1ea; --ink-2: #c7c9b8; --ink-3: #8e917f; --line: rgba(242, 241, 234, .12); --line-2: rgba(242, 241, 234, .26); --card: rgba(255, 255, 255, .04); --card-2: rgba(255, 255, 255, .08); --acc-fill: linear-gradient(#d2ff00, #d2ff00); --lab: #d2ff00; --blob1: #0f110b; }
html[data-mode="dark"][data-theme="circuit"] .alt { --bg: #11130c; --bg-2: #181a11; }
html[data-mode="dark"][data-theme="suisse"] { --bg: #0a0a0a; --bg-2: #151515; --ink: #f5f5f3; --ink-2: #c2c2c2; --ink-3: #8a8a8a; --line: rgba(255, 255, 255, .14); --line-2: rgba(255, 255, 255, .85); --card: #111; --card-2: #1a1a1a; --btn: #f5f5f3; --on-btn: #0a0a0a; --blob1: #2a2a2a; --blob3: #1a1a1a; }
html[data-mode="dark"][data-theme="suisse"] .alt { --bg: #151515; }
html[data-mode="dark"][data-theme="luxe"] { --bg: #15130f; --bg-2: #1d1a15; --ink: #f4efe6; --ink-2: #c9bfae; --ink-3: #8f8676; --card: rgba(255, 255, 255, .03); --card-2: rgba(255, 255, 255, .06); --btn: #c9a86a; --on-btn: #15130f; --lab: #c9a86a; --blob1: #1d1a15; }
html[data-mode="dark"][data-theme="luxe"] .alt { --bg: #0e0c09; --bg-2: #15130f; }
html[data-mode="dark"][data-theme="brutal"] { --bg: #0b0b0b; --bg-2: #1c1a00; --ink: #fffdf0; --ink-2: #e6e3cf; --ink-3: #a8a58f; --line: #fffdf0; --line-2: #fffdf0; --card: #141414; --card-2: #1b1b1b; --shadow: 6px 6px 0 #ffe500; --lab: #ffe500; --acc-fill: linear-gradient(#6b95ff, #6b95ff); }
html[data-mode="dark"][data-theme="brutal"] .alt { --bg: #1c1a00; }
html[data-mode="dark"][data-theme="girly"] { --bg: #240a33; --bg-2: #321046; --ink: #ffeaf6; --ink-2: #e8b9dd; --ink-3: #b98fc0; --line: rgba(255, 255, 255, .12); --line-2: rgba(255, 124, 198, .4); --card: rgba(255, 255, 255, .05); --card-2: rgba(255, 255, 255, .1); --lab: #ff7cc6; --acc-fill: linear-gradient(100deg, #ff7cc6, #c9a7ff); --blob1: #5a1f78; }
html[data-mode="dark"][data-theme="girly"] .alt { --bg: #180623; --bg-2: #240a33; }
html[data-theme="girly"] .alt { --bg: #2b0d3d; --bg-2: #3a1552; --ink: #ffeaf6; --ink-2: #e8b9dd; --ink-3: #b98fc0; --line: rgba(255, 255, 255, .12); --line-2: rgba(255, 124, 198, .4); --card: rgba(255, 255, 255, .05); --card-2: rgba(255, 255, 255, .1); --lab: #ff7cc6; --acc-fill: linear-gradient(100deg, #ff7cc6, #c9a7ff); }

/* Font override (after the themes) */
html[data-font="serif"] { --display: var(--serif); --display-w: 600; --display-tt: none; --display-ls: -.035em; --display-lh: .95; --acc-font: var(--serif); --acc-style: normal; }
html[data-font="grotesk"] { --display: var(--sans); --display-w: 800; --display-tt: none; --display-ls: -.055em; --display-lh: .92; --acc-font: var(--sans); --acc-style: normal; }
html[data-font="mono"] { --display: var(--mono); --display-w: 400; --display-tt: uppercase; --display-ls: -.04em; --display-lh: .95; --acc-font: var(--mono); --acc-style: normal; --body: var(--mono); }
html[data-font="display"] { --display: var(--anton); --display-w: 400; --display-tt: uppercase; --display-ls: .005em; --display-lh: .9; --acc-font: var(--instrument); --acc-style: italic; }
/* Format */
html[data-radius="square"] { --r: 0px; }
html[data-radius="round"] { --r: 16px; }
html[data-radius="pill"] { --r: 34px; }
html[data-scale="lg"] { --fs: 1.12; }
html[data-scale="xl"] { --fs: 1.26; }
html[data-density="compact"] { --space: .6; }