/* ACC-133 — Syne (display/brand) + DM Sans (UI), self-hosted */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/syne-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/syne-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/syne-latin-800.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-700.woff2") format("woff2");
}

/* Thèmes CryptoServer — sombre (défaut), clair */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #05080e;
  --navy: #0b1420;
  --panel: #121c28;
  --panel-2: #162233;
  --line: rgba(141, 169, 196, 0.2);
  --line-strong: rgba(141, 169, 196, 0.38);
  --silver: #8da9c4;
  --muted: #6b7f90;
  --text: #f5f7fa;
  --text-strong: #ffffff;
  --orange: #ff8c00;
  --orange-2: #ffaa3c;
  --accent-text: #ffaa3c;
  --ok: #3dcf8e;
  --btn-line-fg: #ffffff;
  --btn-white-bg: #ffffff;
  --btn-white-fg: #0a1018;
  --page-bg:
    radial-gradient(ellipse 70% 55% at 50% 8%, rgba(40, 90, 150, 0.28), transparent 58%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(255, 140, 0, 0.1), transparent 50%),
    linear-gradient(180deg, #0a1220 0%, var(--ink) 45%, #04060a 100%);
  --page-bg-vps:
    radial-gradient(ellipse 65% 50% at 40% 0%, rgba(40, 90, 150, 0.22), transparent 55%),
    linear-gradient(180deg, #0e1622 0%, var(--ink) 50%, #05080c 100%);
  --page-bg-order:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(40, 90, 150, 0.2), transparent 55%),
    linear-gradient(180deg, #0d1520 0%, var(--ink) 42%, #05080c 100%);
  --nav-bg: rgba(10, 14, 20, 0.92);
  --nav-line: rgba(141, 169, 196, 0.22);
  --nav-silver: #8da9c4;
  --nav-orange: #ff8c00;
  --nav-orange-2: #ffaa3c;
  --nav-panel: #121c28;
  --nav-text: #f3f6fa;
  --nav-hover: rgba(255, 255, 255, 0.06);
  --nav-shadow: 0 10px 36px rgba(0, 0, 0, 0.35);
  --dd-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  --plan-hot-bg: linear-gradient(180deg, rgba(255, 140, 0, 0.12), transparent 42%), var(--panel);
  --chip-bg: rgba(18, 32, 46, 0.5);
  --badge-bg: rgba(255, 140, 0, 0.16);
  --was: #8a9aad;
  --table-head: rgba(18, 28, 40, 0.9);
  --font: "DM Sans", "Segoe UI", "Ubuntu", Tahoma, Geneva, Verdana, sans-serif;
  --font-display: "Syne", "DM Sans", "Segoe UI", sans-serif;
}

/* Clair — fond clair, contraste doux, orange inchangé */
html[data-theme="light"] {
  color-scheme: light;
  --ink: #f4f6f9;
  --navy: #e8eef5;
  --panel: #ffffff;
  --panel-2: #f0f4f8;
  --line: rgba(30, 55, 80, 0.14);
  --line-strong: rgba(30, 55, 80, 0.28);
  --silver: #3d556c;
  --muted: #5a7085;
  --text: #15202b;
  --text-strong: #0a121a;
  --orange: #e67a00;
  --orange-2: #ff8c00;
  --accent-text: #b35500;
  --ok: #1a9e63;
  --btn-line-fg: #15202b;
  --btn-white-bg: #15202b;
  --btn-white-fg: #ffffff;
  --page-bg:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 140, 0, 0.08), transparent 55%),
    linear-gradient(180deg, #eef3f8 0%, #f7f9fc 40%, #ffffff 100%);
  --page-bg-vps:
    radial-gradient(ellipse 60% 45% at 30% 0%, rgba(40, 90, 150, 0.08), transparent 50%),
    linear-gradient(180deg, #eef3f8 0%, #f7f9fc 50%, #ffffff 100%);
  --page-bg-order:
    linear-gradient(180deg, #eef3f8 0%, #f7f9fc 42%, #ffffff 100%);
  --nav-bg: rgba(255, 255, 255, 0.92);
  --nav-line: rgba(30, 55, 80, 0.14);
  --nav-silver: #3d556c;
  --nav-orange: #e67a00;
  --nav-orange-2: #ff8c00;
  --nav-panel: #ffffff;
  --nav-text: #15202b;
  --nav-hover: rgba(20, 40, 70, 0.06);
  --nav-shadow: 0 10px 28px rgba(20, 40, 70, 0.1);
  --dd-shadow: 0 16px 36px rgba(20, 40, 70, 0.12);
  --plan-hot-bg: linear-gradient(180deg, rgba(255, 140, 0, 0.1), transparent 42%), var(--panel);
  --chip-bg: #e8eef5;
  --badge-bg: rgba(230, 122, 0, 0.14);
  --was: #5a7085;
  --table-head: #eef3f8;
}

body {
  color: var(--text);
  background: var(--page-bg);
  font-family: var(--font);
}

/* Adaptations nav / boutons selon thème */
.ac-nav-link:hover,
.ac-nav-link[aria-current="page"],
.ac-nav-btn:hover,
.ac-nav-item.is-open > .ac-nav-btn {
  color: var(--nav-text) !important;
  background: var(--nav-hover) !important;
}
.ac-dd a { color: var(--nav-text) !important; }
.ac-dd a:hover { background: var(--badge-bg) !important; }
.ac-lang-opt { color: var(--nav-text) !important; }
.ac-lang-opt:hover,
.ac-lang-opt.is-on { background: var(--badge-bg) !important; }
.ac-btn-line,
.ac-burger {
  color: var(--nav-text) !important;
}
.ac-mobile a:hover { color: var(--nav-text) !important; background: var(--nav-hover) !important; }
.ac-mobile .ac-mob-label { color: var(--nav-text) !important; }

.ac-flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}
.ac-lang-btn .ac-flag { margin-right: 0; }

.ac-theme {
  position: relative;
}
.ac-theme-btn {
  min-width: auto;
  padding: 0 6px;
  font-size: 0.82rem;
  gap: 4px;
}
.ac-theme-dd {
  min-width: 140px;
  right: 0;
  left: auto;
  padding: 4px;
}
.ac-theme-opt {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--nav-text);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}
.ac-theme-opt:hover,
.ac-theme-opt.is-on { background: var(--badge-bg); }
.ac-theme-ico {
  width: 14px;
  text-align: center;
  opacity: 0.85;
  flex-shrink: 0;
}


/* === Theme-aware overrides (light) === */
html[data-theme="light"] .trust strong,
html[data-theme="light"] .plan .deal strong,
html[data-theme="light"] .plan li strong,
html[data-theme="light"] .compare th,
html[data-theme="light"] .compare td strong,
html[data-theme="light"] .note strong,
html[data-theme="light"] .pick a,
html[data-theme="light"] .pick a:hover,
html[data-theme="light"] .linkish:hover,
html[data-theme="light"] .more-toggle:hover,
html[data-theme="light"] .step.is-current,
html[data-theme="light"] .egg,
html[data-theme="light"] .egg:hover {
  color: var(--text-strong) !important;
}
html[data-theme="light"] .pick a,
html[data-theme="light"] .compare,
html[data-theme="light"] .summary,
html[data-theme="light"] .cross-card,
html[data-theme="light"] .hero-panel {
  background: var(--panel) !important;
  color: var(--text);
  box-shadow: 0 12px 28px rgba(20, 40, 70, 0.08);
}
html[data-theme="light"] .pick a {
  background: var(--panel-2) !important;
}
html[data-theme="light"] .ac-nav-link:hover,
html[data-theme="light"] .ac-nav-btn:hover,
html[data-theme="light"] .ac-dd a,
html[data-theme="light"] .ac-lang-opt,
html[data-theme="light"] .ac-btn-line,
html[data-theme="light"] .ac-burger {
  color: var(--nav-text) !important;
}
html[data-theme="light"] .plan.is-hot {
  background: var(--plan-hot-bg) !important;
}
html[data-theme="light"] .trust,
html[data-theme="light"] .app-chip,
html[data-theme="light"] .cross-linux {
  background: var(--chip-bg) !important;
  color: var(--silver);
  box-shadow: none;
}
html[data-theme="light"] .byol,
html[data-theme="light"] .cross-linux-cta strong,
html[data-theme="light"] .plan .tag {
  color: var(--accent-text) !important;
}
html[data-theme="light"] .plan {
  box-shadow: 0 10px 28px rgba(20, 40, 70, 0.08);
}
html[data-theme="light"] .os-card .os-icon,
html[data-theme="light"] .desk-panel .desk-head img,
html[data-theme="light"] .app-chip img,
html[data-theme="light"] .pay-strip img,
html[data-theme="light"] .feature img,
html[data-theme="light"] .logo-row img {
  background: #eef2f6;
  border-color: rgba(30, 55, 80, 0.18);
}
html[data-theme="light"] .scard.win,
html[data-theme="light"] .scard.linux {
  background: var(--panel) !important;
  color: var(--text);
  box-shadow: 0 12px 28px rgba(20, 40, 70, 0.08);
}
html[data-theme="light"] .scard.win p,
html[data-theme="light"] .scard.linux p {
  color: var(--silver);
}
.ac-brand-mark {
  line-height: 0;
}
.ac-brand-coin {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 10px;
  object-fit: contain;
}
html[data-theme="light"] .ac-brand-name {
  color: var(--text-strong);
}

/* Localisations (offer pages + home) */
.loc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.loc-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}
.loc-card:hover {
  border-color: rgba(255, 140, 0, 0.45);
  transform: translateY(-2px);
  color: inherit;
}
.loc-flag {
  flex: 0 0 28px;
  width: 28px;
  height: 20px;
  margin-top: 3px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.loc-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.loc-card strong {
  color: var(--text-strong);
  font-size: 0.95rem;
  font-weight: 650;
}
@media (max-width: 720px) {
  .loc-grid { grid-template-columns: 1fr; }
}