/* (Optionnel) Fonts — enlève si tu self-host */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Exo+2:wght@600;700&display=swap");

:root {
  /* =========================
     Palette
  ========================= */
  --rx-blue: #202a5a;          /* FOND + NAVBAR (plus sombre qu'avant) */
  --rx-blue-deep: #1b2452;     /* Surfaces avant-plan (sidebar/toc/cards) */
  --rx-blue-deeper: #141b3f;   /* Surfaces encore plus profondes */
  --rx-panel: #27326a;         /* Bloc central (bleu plus clair, type bandeau logo) */
  --rx-cream: #F5F0EB;
  --rx-yellow: #f7ba12;
  --rx-red: #fc3d21;
  --rx-sky: #c2cce8;

  /* Texte */
  --rx-text: rgba(245, 240, 235, 0.92);
  --rx-text-muted: rgba(245, 240, 235, 0.82);

  /* Surfaces / borders / shadows */
  --rx-surface: var(--rx-blue-deep);
  --rx-surface-2: var(--rx-blue-deeper);
  --rx-border: rgba(255, 255, 255, 0.10);
  --rx-border-2: rgba(255, 255, 255, 0.14);
  --rx-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);

  /* Tricolor stacked bar (3 bandes) — UNIQUEMENT pour la navbar */
  --rx-tricolor-stacked: linear-gradient(
    to bottom,
    var(--rx-yellow) 0%,
    var(--rx-yellow) 33.333%,
    var(--rx-red) 33.333%,
    var(--rx-red) 66.666%,
    var(--rx-sky) 66.666%,
    var(--rx-sky) 100%
  );

  /* =========================
     Docusaurus / Infima
  ========================= */
  --ifm-font-family-base: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --ifm-heading-font-family: "Exo 2", Inter, system-ui, sans-serif;

  --ifm-color-primary: var(--rx-sky);

  --ifm-background-color: var(--rx-blue);
  --ifm-background-surface-color: var(--rx-surface);

  --ifm-font-color-base: var(--rx-text);
  --ifm-heading-color: #ffffff;

  --ifm-navbar-background-color: var(--rx-blue);
  --ifm-navbar-link-color: rgba(255, 255, 255, 0.92);
  --ifm-navbar-link-hover-color: #ffffff;

  --ifm-footer-background-color: var(--rx-blue);
  --ifm-footer-color: rgba(255, 255, 255, 0.90);
  --ifm-footer-link-color: rgba(255, 255, 255, 0.90);
  --ifm-footer-link-hover-color: #ffffff;

  --ifm-global-radius: 16px;
  --ifm-card-border-radius: 18px;
  --ifm-global-shadow-lw: var(--rx-shadow);
}

/* -----------------------------
   1) Fond général + texte
------------------------------ */
html,
body,
.main-wrapper {
  background: var(--rx-cream); /*--rx-blue);*/
}

body {
  color: var(--rx-text);
}

.theme-doc-markdown,
.theme-doc-markdown p,
.theme-doc-markdown li {
  color: var(--rx-text-muted);
}

/* Liens */
.theme-doc-markdown a {
  color: var(--rx-sky);
}
.theme-doc-markdown a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Largeur contenu */
.markdown {
  max-width: 1040px;
}

/* -----------------------------
   2) Navbar : bleu plus sombre + TRICOLORE (3 bandes)
------------------------------ */
.navbar,
.footer {
  position: relative;
  overflow: visible;
}

/* Navbar background */
.navbar {
  background: var(--rx-blue);
  box-shadow: var(--rx-shadow);
}

/* Ligne tricolore (3 bandes superposées) sous la navbar */
.navbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 9px; /* 3 x 3px */
  background: var(--rx-tricolor-stacked);
  pointer-events: none;
  z-index: 3;
}

.navbar__title {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.navbar__link {
  font-weight: 650;
  letter-spacing: 0.02em;
}

/* -----------------------------
   3) Footer : accent JAUNE (pas tricolore)
------------------------------ */
.footer {
  background: var(--rx-blue);
}

/* Fine ligne jaune en haut du footer */
.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 6px;
  background: var(--rx-yellow);
  pointer-events: none;
  z-index: 3;
  opacity: 0.95;
}

/* -----------------------------
   4) Surfaces : avant-plan plus sombre, bloc central plus clair
------------------------------ */

/* Bloc central : bleu plus clair (comme le bandeau logo) */
.theme-doc-markdown {
  background: var(--rx-panel);
  border: 1px solid var(--rx-border);
  border-radius: 18px;
  box-shadow: var(--rx-shadow);

  /* Padding demandé : le texte ne colle plus aux bords */
  padding: 22px 24px;
}

/* Responsive padding */
@media (max-width: 996px) {
  .theme-doc-markdown {
    padding: 16px 16px;
  }
}

/* Autres blocs : plus sombres */
.card,
.pagination-nav__link,
.theme-doc-sidebar-container,
.theme-doc-toc-desktop {
  background: var(--rx-surface);
  border: 1px solid var(--rx-border);
  border-radius: 18px;
  box-shadow: var(--rx-shadow);
}

/* Sidebar/TOC un cran plus dense */
.theme-doc-sidebar-container,
.theme-doc-toc-desktop {
  background: var(--rx-surface-2);
  border-color: var(--rx-border-2);
}

/* Ensure the mobile/inline Table of Contents keeps the same "panel" styling
   as the desktop sidebar so it remains readable when moved above content. */
.theme-doc-toc,
.theme-doc-toc-mobile,
.theme-doc-toc-mobile .menu,
.theme-doc-toc .menu {
  background: var(--rx-surface-2);
  border: 1px solid var(--rx-border-2);
  border-radius: 14px;
  box-shadow: var(--rx-shadow);
  color: var(--rx-text);
}

.theme-doc-toc a,
.theme-doc-toc-mobile a,
.theme-doc-toc .menu__link,
.theme-doc-toc-mobile .menu__link {
  color: var(--rx-text-muted);
}

.theme-doc-toc .menu__link--active,
.theme-doc-toc-mobile .menu__link--active {
  background: rgba(195, 208, 236, 0.12);
}

/* Sidebar active */
.menu__link {
  border-radius: 12px;
}
.menu__link--active {
  background: rgba(195, 208, 236, 0.14);
}

/* -----------------------------
   5) Accents : JAUNE uniquement (hors navbar)
   - sous les H2/H3
   - sur les HR
   - rappel dans sidebar/toc
------------------------------ */

/* Sous-titres */
.theme-doc-markdown h2,
.theme-doc-markdown h3 {
  position: relative;
  padding-bottom: 10px;
  color: #ffffff;
}

.theme-doc-markdown h2::after,
.theme-doc-markdown h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 150px;
  height: 6px;
  border-radius: 999px;
  background: var(--rx-yellow);
  opacity: 0.95;
}

/* HR (séparateur) */
.theme-doc-markdown hr {
  border: none;
  height: 6px;
  border-radius: 999px;
  background: var(--rx-yellow);
  opacity: 0.9;
  margin: 26px 0;
}

/* Rappel jaune dans sidebar / toc */
.theme-doc-sidebar-container,
.theme-doc-toc-desktop {
  position: relative;
}

.theme-doc-sidebar-container::before,
.theme-doc-toc-desktop::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  height: 1px;
  border-radius: 999px;
  background: var(--rx-yellow);
  opacity: 0.9;
}

/* -----------------------------
   6) Boutons / CTA
------------------------------ */
.button--primary {
  background: var(--rx-yellow);
  border-color: var(--rx-yellow);
  color: var(--rx-blue);
  font-weight: 850;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 22px rgba(248, 187, 18, 0.22);
}
.button--primary:hover {
  transform: translateY(-1px);
  filter: brightness(0.98);
}

.button--secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.60);
  color: #ffffff;
  font-weight: 750;
}
.button--secondary:hover {
  border-color: rgba(255, 255, 255, 0.85);
}

/* -----------------------------
   7) Admonitions — “Attention” gris + texte blanc (conservé)
------------------------------ */
.admonition {
  border-radius: 18px;
  box-shadow: var(--rx-shadow);

  /* padding interne (meilleur confort) */
  padding: 14px 16px;
}

/* INFO (sobre, lisible sur bleu) */
.alert--info {
  background: rgba(195, 208, 236, 0.12);
  border: 1px solid rgba(195, 208, 236, 0.22);
  border-left: 8px solid var(--rx-sky);
  color: #ffffff;
}
.alert--info a {
  color: #ffffff;
  text-decoration: underline;
}

/* WARNING = gris + blanc */
.alert--warning {
  background: rgba(120, 126, 145, 0.38); /* gris bleuté */
  border: 1px solid rgba(200, 205, 220, 0.22);
  border-left: 8px solid rgba(230, 233, 242, 0.60);
  color: #ffffff;
}
.alert--warning a {
  color: #ffffff;
  text-decoration: underline;
}

/* DANGER (rouge discret) */
.alert--danger {
  background: rgba(215, 52, 30, 0.14);
  border: 1px solid rgba(215, 52, 30, 0.26);
  border-left: 8px solid var(--rx-red);
  color: #ffffff;
}

/* Titres admonitions */
.admonition h5 {
  color: #ffffff;
  letter-spacing: 0.02em;
}

/* -----------------------------
   8) Tables / embeds
------------------------------ */
table {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  border: 1px solid var(--rx-border);
}

table th {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

table td {
  color: var(--rx-text-muted);
}

iframe,
.theme-doc-markdown iframe {
  border-radius: 18px;
  box-shadow: var(--rx-shadow);
}

/* -----------------------------
   9) “Bandeaux” réutilisables (MDX)
   <div class="rxBanner">...</div>
   -> accent jaune (pas tricolore)
------------------------------ */
.rxBanner {
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--rx-border);
  box-shadow: var(--rx-shadow);
  position: relative;
  overflow: hidden;
  margin: 18px 0;
  color: #ffffff;
}

/* Bande jaune en bas du bandeau */
.rxBanner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--rx-yellow);
  opacity: 0.95;
}

/* -----------------------------
   10) Petites finitions
------------------------------ */
.navbar__search-input {
  border-radius: 999px;
}

/* Helpers existants (si utilisés dans tes MDX) */

/* -----------------------------
   RocketriX: justify text on project pages
   Targets only docs whose html class contains "docs-doc-id-RocketriX"
------------------------------ */
html[class*="docs-doc-id-RocketriX"] .theme-doc-markdown p,
html[class*="docs-doc-id-RocketriX"] .theme-doc-markdown li,
html[class*="docs-doc-id-RocketriX"] .theme-doc-markdown blockquote,
html[class*="docs-doc-id-RocketriX"] .theme-doc-markdown td,
html[class*="docs-doc-id-RocketriX"] .theme-doc-markdown .rxBanner {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

.planning-table {
  width: 100%;
}
.planning-table td,
.planning-table th {
  vertical-align: top;
}
.planning-muted {
  opacity: 0.88;
  font-size: 0.95em;
  margin-top: 6px;
}

.masonry {
  column-count: 1;
  column-gap: 16px;
}
@media (min-width: 900px) {
  .masonry {
    column-count: 2;
  }
}
@media (min-width: 1200px) {
  .masonry {
    column-count: 3;
  }
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  border: 1px solid var(--rx-border);
  background: rgba(255, 255, 255, 0.06);
}

/* Tags (Docusaurus) — ensure high contrast on light page backgrounds
   We target the semantic attribute `rel="tag"` which is stable
   regardless of CSS-module hashed class names. */
a[rel="tag"] {
  display: inline-block;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--rx-blue);
  color: var(--rx-blue);
  background: transparent;
  font-size: 0.95em;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

a[rel="tag"]:hover,
a[rel="tag"]:focus {
  background: var(--rx-blue);
  color: var(--rx-cream);
  transform: translateY(-1px);
}

/* Make the "Tags:" label readable on light backgrounds.
   Use a parent selector to detect the tags list (ul[class*="tags"]) and
   style the preceding <b> label. :has() provides a robust selector; older
   browsers will still see tag links (above) with good contrast. */
.col:has(> ul[class*="tags"]) > b {
  color: var(--rx-blue);
  font-weight: 700;
  margin-right: 0.5rem;
}

/* Breadcrumbs / page position indicator — ensure visibility on cream background */
.breadcrumbs,
.breadcrumbs__item,
.breadcrumbs__link {
  color: var(--rx-blue) !important;
  opacity: 0.95;
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus {
  color: var(--rx-blue-deeper) !important;
  text-decoration: none;
}

/* Make SVG/home icon inherit the breadcrumb color */
.breadcrumbs__link svg,
.breadcrumbs__link .icon {
  color: var(--rx-blue);
  fill: currentColor;
}