/* Charte minispace pour Material for MkDocs.
 *
 * Les valeurs viennent directement de `frontend-web/tailwind.config.ts`, la source de
 * vérité du design de l'application — pas d'un échantillonnage à l'œil. Si la palette
 * de l'app bouge, c'est là qu'il faut aller la relire.
 *
 * Material impose `primary: custom` / `accent: custom` dans mkdocs.yml pour que les
 * variables ci-dessous soient prises en compte. */

/* ---------- Clair ---------- */
[data-md-color-scheme="default"] {
  --ms-primary:        #4A6CF7;
  --ms-primary-light:  #7A96F9;
  --ms-primary-soft:   #E0E7FF;
  --ms-surface:        #FFFFFF;
  --ms-surface-soft:   #F5F7F8;
  --ms-ink:            #1E1F23;
  --ms-ink-secondary:  #6B7280;
  --ms-ink-muted:      #9CA3AF;
  --ms-border:         #E6E8EC;
  --ms-success:        #63D69E;
  --ms-warning:        #F5B266;
  --ms-info:           #8EC9F7;
  --ms-danger:         #FF6B6B;

  --md-default-fg-color:        var(--ms-ink);
  --md-default-fg-color--light: var(--ms-ink-secondary);
  --md-default-fg-color--lighter: var(--ms-ink-muted);
  --md-default-bg-color:        var(--ms-surface);
  --md-typeset-color:           var(--ms-ink);
  --md-typeset-a-color:         var(--ms-primary);
  --md-code-bg-color:           var(--ms-surface-soft);
  --md-footer-bg-color:         var(--ms-ink);
}

/* ---------- Sombre ---------- */
[data-md-color-scheme="slate"] {
  --ms-primary:        #7A96F9;   /* l'indigo clair porte mieux sur fond sombre */
  --ms-primary-light:  #A9BCFB;
  --ms-primary-soft:   #2A3557;
  --ms-surface:        #16181D;
  --ms-surface-soft:   #1E2128;
  --ms-ink:            #ECEDEF;
  --ms-ink-secondary:  #A8AEB8;
  --ms-ink-muted:      #7A828F;
  --ms-border:         #2A2E36;
  --ms-success:        #63D69E;
  --ms-warning:        #F5B266;
  --ms-info:           #8EC9F7;
  --ms-danger:         #FF6B6B;

  --md-default-fg-color:        var(--ms-ink);
  --md-default-fg-color--light: var(--ms-ink-secondary);
  --md-default-fg-color--lighter: var(--ms-ink-muted);
  --md-default-bg-color:        var(--ms-surface);
  --md-typeset-color:           var(--ms-ink);
  --md-typeset-a-color:         var(--ms-primary);
  --md-code-bg-color:           var(--ms-surface-soft);
}

/* ---------- Couleurs de marque (les deux schémas) ---------- */
[data-md-color-primary="custom"] {
  --md-primary-fg-color:        var(--ms-primary);
  --md-primary-fg-color--light: var(--ms-primary-light);
  --md-primary-fg-color--dark:  #3A57E0;  /* identique à --primary-dark du site vitrine */
  --md-primary-bg-color:        #FFFFFF;
  --md-primary-bg-color--light: rgba(255, 255, 255, .75);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color:             var(--ms-primary-light);
  --md-accent-fg-color--transparent: rgba(74, 108, 247, .1);
  --md-accent-bg-color:             #FFFFFF;
}

/* ---------- Typographie ---------- */
body,
.md-typeset {
  font-feature-settings: "kern", "liga";
}

.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ms-ink);
}

.md-typeset h2 {
  font-weight: 650;
  letter-spacing: -.01em;
  margin-top: 2.2em;
  padding-top: .4em;
  border-top: 1px solid var(--ms-border);
}

.md-typeset h3 {
  font-weight: 600;
  color: var(--ms-ink);
}

/* ---------- En-tête ---------- */
.md-header {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
}

/* Le logo est un portrait 399×442 : sans hauteur forcée, Material le rogne. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.7rem;
  width: auto;
}

.md-header__title {
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ---------- Tableaux : les guides en sont pleins ---------- */
.md-typeset table:not([class]) {
  border: 1px solid var(--ms-border);
  border-radius: 16px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
  font-size: .74rem;
}

.md-typeset table:not([class]) th {
  background: var(--ms-surface-soft);
  color: var(--ms-ink);
  font-weight: 600;
  border-bottom: 1px solid var(--ms-border);
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--ms-border);
}

.md-typeset table:not([class]) tr:first-child td {
  border-top: 0;
}

/* ---------- Encarts : reprendre les couleurs d'état de l'app ---------- */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--ms-border);
  border-left-width: 3px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
  font-size: .74rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 600;
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(142, 201, 247, .12);
}
.md-typeset .note { border-left-color: var(--ms-info); }
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before { background-color: var(--ms-info); }

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: rgba(99, 214, 158, .14);
}
.md-typeset .tip { border-left-color: var(--ms-success); }
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before { background-color: var(--ms-success); }

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(245, 178, 102, .16);
}
.md-typeset .warning { border-left-color: var(--ms-warning); }
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before { background-color: var(--ms-warning); }

.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
  background-color: rgba(255, 107, 107, .14);
}
.md-typeset .danger { border-left-color: var(--ms-danger); }
.md-typeset .danger > .admonition-title::before,
.md-typeset .danger > summary::before { background-color: var(--ms-danger); }

/* ---------- Onglets de contenu (=== "…") ---------- */
.md-typeset .tabbed-labels > label {
  font-weight: 600;
}

.md-typeset .tabbed-set > input:checked + label {
  color: var(--ms-primary);
  border-color: var(--ms-primary);
}

/* ---------- Navigation ---------- */
.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--ms-primary);
}

.md-nav__item .md-nav__link--active {
  font-weight: 600;
}

/* ---------- Code ---------- */
.md-typeset code,
.md-typeset pre > code {
  border-radius: 10px;
}

.md-typeset pre > code {
  border: 1px solid var(--ms-border);
}

/* ---------- Pied de page ---------- */
.md-footer-meta {
  background-color: var(--ms-ink);
}