/* ===============================
   MODE: DARK (default)
   =============================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --mode: "dark";

  --bg: #0b0b0b;
  --ink: #f5f5f5;
  --muted: #bdbdbd;

  --line: #2a2a2a;
  --line2: #3a3a3a;

  --warn: #ffcc00;

  --max: 1120px;
  --pad: 16px;

  --font-ui: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --font-content: "Montserrat", sans-serif;
  --font-heading: var(--mono);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ===============================
   AUTO LIGHT MODE (system)
   =============================== */
@media (prefers-color-scheme: light) {
  :root {
    --mode: "light";

    --bg: #ffffff;
    --ink: #111111;
    --muted: #5a5a5a;

    --line: #e5e5e5;
    --line2: #d5d5d5;

    --warn: #d48a00;
  }
}

/* ===============================
   MANUAL OVERRIDE (optional future)
   =============================== */
:root[data-theme="dark"] {
  --mode: "dark";
  --bg: #0b0b0b;
  --ink: #f5f5f5;
  --muted: #bdbdbd;
  --line: #2a2a2a;
  --line2: #3a3a3a;
  --warn: #ffcc00;
}

:root[data-theme="light"] {
  --mode: "light";
  --bg: #ffffff;
  --ink: #111111;
  --muted: #5a5a5a;
  --line: #e5e5e5;
  --line2: #d5d5d5;
  --warn: #d48a00;
}

/* ===============================
   Global base
   =============================== */
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  line-height: 1.55;
}

* {
  border-radius: 0 !important;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:focus-visible {
  outline: 3px solid var(--warn);
  outline-offset: 3px;
}

/* Skip link */
.skip {
  position: absolute;
  left: -999px;
  top: 10px;
  padding: 10px 12px;
  border: 2px solid var(--warn);
  background: #000;
  color: var(--ink);
  z-index: 9999;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: 12px;
}

@media (prefers-color-scheme: light) {
  .skip {
    background: var(--bg);
    color: var(--ink);
  }
}

.skip:focus {
  left: 12px;
}

/* Typography */
.brand span,
header nav,
.heroMeta,
.btn,
.sectionHead h2,
.code,
.adHeader,
.small,
.footLinks {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .8px;
}

.brand strong,
.footLinks nav h2 {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .2px;
  text-transform: uppercase;
}

.brand span {
  font-size: 12px;
  color: var(--muted);
}

h1, .h1 {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -.2px;
  text-transform: uppercase;
}

/* Content typography */
.content-section {
  font-family: var(--font-content);
  line-height: 1.7;
  font-size: 1.0125rem; /* 16.2px / 16px */
  h1 {
    font-size: 1.8125rem; /* 29px / 16px */
    margin-top: 2ex;
  }
  h2 {
    margin-top: 2.6ex;
    margin-bottom: -0.1ex;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    line-height: 1.4;
  }
  h1,
  h2 {
    color: var(--warn);
  }
}

.lead {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 15px;
  max-width: 80ch;
}

.sectionHead h2 {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.sectionHead p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  max-width: 78ch;
}

.item h3 {
  margin: 0;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .2px;
}

.item p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  max-width: 90ch;
}

/* Borders / separators (Variante C) */
header {
  border-bottom: 2px solid var(--line2);
  background: var(--bg);
}

header nav {
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.heroBox {
  border: 2px solid var(--line2);
}

.heroMeta {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.heroMeta b {
  color: var(--ink);
  font-weight: 700;
}

.actions {
  border-top: 1px solid var(--line);
}

.sectionHead {
  border-top: 2px solid var(--line2);
  border-bottom: 1px solid var(--line);
}

.list {
  border: 2px solid var(--line2);
  border-top: 0;
}

.item {
  border-top: 1px solid var(--line);
}

.item:first-child {
  border-top: 0;
}

.code {
  border: 1px solid var(--line);
  padding: 6px 8px;
  font-size: 12px;
  color: var(--muted);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 2px solid var(--line2);
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.btn:hover {
  border-color: var(--warn);
  color: var(--warn);
  text-decoration: none;
}

.btn.primary {
  border-color: var(--warn);
  background: var(--warn);
  color: #000;
}

.btn.primary:hover {
  background: transparent;
  color: var(--warn);
}

/* Header CTA */
.topCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 2px solid var(--warn);
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.topCta:hover {
  background: var(--warn);
  color: #000;
  text-decoration: none;
}

/* Ad (PUBLICITÉ) */
.ad {
  border: 3px solid var(--warn);
  background: #000;
  color: var(--ink);
}

@media (prefers-color-scheme: light) {
  .ad {
    background: var(--bg);
    color: var(--ink);
  }
}

.adHeader {
  border-bottom: 1px solid rgba(255,204,0,.35);
  font-size: 12px;
}

.adHeader b {
  background: var(--warn);
  color: #000;
  padding: 6px 8px;
  font-weight: 800;
}

.adBody strong {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .2px;
}

.adBody p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  max-width: 80ch;
}

.adActions {
  border-top: 1px solid rgba(255,204,0,.25);
}

/* Footer */
footer {
  border-top: 2px solid var(--line2);
  color: var(--muted);
}

.small {
  font-size: 12px;
}

.footLinks a {
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  color: var(--muted);
}

.footLinks a:hover {
  color: var(--ink);
  border-bottom-color: var(--warn);
  text-decoration: none;
}