/*
 * Thème « Cyber Neon Arcade » de romkade.com appliqué à Material for MkDocs.
 * Valeurs reprises de src/styles/tokens.css du site : les modifier aux deux endroits.
 */

@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/archivo-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next Variable";
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --rk-bg: #071326;
  --rk-bg-deep: #040b18;
  --rk-surface: #0a1c33;
  --rk-surface-2: #10243e;
  --rk-line: #1f3c5c;
  --rk-line-strong: #2d5279;
  --rk-ink: #f6f8ff;
  --rk-ink-2: #acbcd0;
  --rk-ink-3: #8a9fb8;
  --rk-cyan: #12ddf7;
  --rk-magenta: #ff3fa8;
  --rk-violet: #8154ff;
  --rk-lime: #a4ee50;
  --rk-amber: #f5b84a;
  --rk-danger: #f56a84;
  --rk-on-cyan: #03141f;

  --md-text-font: "Atkinson Hyperlegible Next Variable", system-ui, sans-serif;
  --md-code-font: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

[data-md-color-scheme="slate"] {
  --md-hue: 215;
  --md-default-bg-color: var(--rk-bg);
  --md-default-fg-color: var(--rk-ink);
  --md-default-fg-color--light: var(--rk-ink-2);
  --md-default-fg-color--lighter: var(--rk-ink-3);
  --md-default-fg-color--lightest: var(--rk-line);
  --md-typeset-color: var(--rk-ink);
  --md-typeset-a-color: var(--rk-cyan);

  --md-primary-fg-color: var(--rk-bg-deep);
  --md-primary-fg-color--light: var(--rk-surface);
  --md-primary-fg-color--dark: var(--rk-bg-deep);
  --md-primary-bg-color: var(--rk-ink);
  --md-primary-bg-color--light: var(--rk-ink-2);
  --md-accent-fg-color: var(--rk-magenta);
  --md-accent-fg-color--transparent: rgb(255 63 168 / 0.12);
  --md-accent-bg-color: var(--rk-ink);

  --md-code-bg-color: var(--rk-surface);
  --md-code-fg-color: #dbe6f5;
  --md-code-hl-color: rgb(18 221 247 / 0.15);
  --md-code-hl-keyword-color: var(--rk-magenta);
  --md-code-hl-string-color: var(--rk-lime);
  --md-code-hl-number-color: var(--rk-amber);
  --md-code-hl-function-color: var(--rk-cyan);
  --md-code-hl-comment-color: var(--rk-ink-3);

  --md-footer-bg-color: var(--rk-bg-deep);
  --md-footer-bg-color--dark: #02070f;
  --md-typeset-table-color: var(--rk-line);
  --md-typeset-kbd-color: var(--rk-surface-2);
  --md-typeset-kbd-accent-color: var(--rk-line-strong);
  --md-typeset-kbd-border-color: var(--rk-line);
  --md-admonition-bg-color: var(--rk-surface);
  --md-shadow-z1: none;
}

/* En-tête et onglets : verre sombre et liseré, comme le site */
.md-header {
  background: rgb(7 19 38 / 0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgb(31 60 92 / 0.7);
}
.md-tabs {
  background: var(--rk-bg-deep);
  box-shadow: 0 1px 0 var(--rk-line);
}
.md-tabs__link { font-weight: 600; opacity: 1; color: var(--rk-ink-2); }
.md-tabs__link:hover, .md-tabs__item--active .md-tabs__link { color: var(--rk-ink); }
.md-tabs__item--active .md-tabs__link { box-shadow: inset 0 -2px 0 var(--rk-cyan); }

/* Logo ROMKADE Manager en toutes lettres : plus large que l'icône carrée prévue par Material. Le logo porte déjà
   le nom : le titre texte du site est masqué dans l'en-tête (le titre de la page, affiché au défilement, reste). */
.md-header__button.md-logo { margin-right: 0.6rem; }
.md-header__button.md-logo img { height: 2.1rem; width: auto; }
/* Le logo suffit : pas de titre à côté (ni le nom du site, ni celui de la page au défilement). La place reste
   occupée pour garder la recherche à droite. */
.md-header__title { visibility: hidden; }
.md-nav__title .md-nav__button.md-logo img { height: 2.4rem; width: auto; }

/* Titres en Archivo */
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-header__topic, .md-nav__title {
  font-family: "Archivo Variable", system-ui, sans-serif;
  letter-spacing: -0.01em;
}
.md-typeset h1 {
  font-weight: 800;
  color: var(--rk-ink);
  background: linear-gradient(90deg, var(--rk-cyan), var(--rk-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  width: fit-content;
}
.md-typeset h2 { font-weight: 750; color: var(--rk-ink); }
.md-typeset h3 { font-weight: 700; color: var(--rk-ink); }

/* Liens */
.md-typeset a { text-underline-offset: 0.18em; }
.md-typeset a:hover { color: var(--rk-magenta); }
.md-nav__link--active, .md-nav__link:is(:focus, :hover) { color: var(--rk-cyan); }

/* Code et touches */
.md-typeset code { border-radius: 6px; }
.md-typeset pre > code { border: 1px solid var(--rk-line); border-radius: 12px; }

/* Tableaux */
.md-typeset table:not([class]) {
  border: 1px solid var(--rk-line);
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.72rem;
}
.md-typeset table:not([class]) th { background: var(--rk-surface-2); color: var(--rk-ink); }
.md-typeset table:not([class]) tr:hover { background: rgb(18 221 247 / 0.04); box-shadow: none; }

/* Encarts aux couleurs du site */
.md-typeset .admonition, .md-typeset details {
  border-radius: 12px;
  border-width: 1px;
  border-left-width: 4px;
  background: var(--rk-surface);
  font-size: 0.74rem;
}
.md-typeset :is(.note, .info) { border-color: var(--rk-cyan); }
.md-typeset :is(.note, .info) > :is(.admonition-title, summary) { background: rgb(18 221 247 / 0.1); }
.md-typeset :is(.note, .info) > :is(.admonition-title, summary)::before { background-color: var(--rk-cyan); }
.md-typeset :is(.tip, .success) { border-color: var(--rk-lime); }
.md-typeset :is(.tip, .success) > :is(.admonition-title, summary) { background: rgb(164 238 80 / 0.1); }
.md-typeset :is(.tip, .success) > :is(.admonition-title, summary)::before { background-color: var(--rk-lime); }
.md-typeset .warning { border-color: var(--rk-amber); }
.md-typeset .warning > :is(.admonition-title, summary) { background: rgb(245 184 74 / 0.1); }
.md-typeset .warning > :is(.admonition-title, summary)::before { background-color: var(--rk-amber); }
.md-typeset .danger { border-color: var(--rk-danger); }
.md-typeset .danger > :is(.admonition-title, summary) { background: rgb(245 106 132 / 0.1); }
.md-typeset .danger > :is(.admonition-title, summary)::before { background-color: var(--rk-danger); }
.md-typeset .abstract { border-color: var(--rk-violet); }
.md-typeset .abstract > :is(.admonition-title, summary) { background: rgb(129 84 255 / 0.12); }
.md-typeset .abstract > :is(.admonition-title, summary)::before { background-color: var(--rk-violet); }

/* Boutons (liens .md-button) */
.md-typeset .md-button {
  border-radius: 10px;
  border: 1px solid var(--rk-line-strong);
  color: var(--rk-ink);
  font-weight: 700;
}
.md-typeset .md-button--primary {
  background: var(--rk-cyan);
  border-color: var(--rk-cyan);
  color: var(--rk-on-cyan);
}
.md-typeset .md-button:hover { border-color: var(--rk-magenta); background: var(--rk-magenta); color: var(--rk-on-cyan); }

/* Cartes de la page d'accueil */
.md-typeset .grid.cards > ul > li, .md-typeset .grid > .card {
  border: 1px solid var(--rk-line);
  border-radius: 14px;
  background: var(--rk-surface);
}
.md-typeset .grid.cards > ul > li:hover { border-color: var(--rk-cyan); box-shadow: 0 0 0 1px rgb(18 221 247 / 0.35), 0 0 24px rgb(18 221 247 / 0.12); }

/* Statuts de compatibilité */
.md-typeset .status { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; white-space: nowrap; }
.md-typeset .status--tested { background: rgb(164 238 80 / 0.14); color: var(--rk-lime); box-shadow: inset 0 0 0 1px rgb(164 238 80 / 0.45); }
.md-typeset .status--experimental { background: rgb(245 184 74 / 0.12); color: var(--rk-amber); box-shadow: inset 0 0 0 1px rgb(245 184 74 / 0.45); }
.md-typeset .status--untested { background: rgb(138 159 184 / 0.12); color: var(--rk-ink-2); box-shadow: inset 0 0 0 1px var(--rk-line-strong); }

/* Recherche */
.md-search__form { background: var(--rk-surface); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rk-line); }
.md-search__form:hover { background: var(--rk-surface-2); }

/* Le lien permanent du titre principal ne sert à rien et casse le dégradé */
.md-typeset h1 .headerlink { display: none; }