/* Style sur-mesure : Design éditorial, chaleureux et universitaire */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;1,6..72,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Newsreader', Georgia, Cambria, "Times New Roman", serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Teintes chaudes & papier universitaire */
  --bg-page: #fbfaf8;
  --bg-card: #ffffff;
  --bg-subtle: #f5f3ef;
  --border-subtle: #e7e4de;
  --border-strong: #d5cfc5;

  /* Encre & contraste naturel */
  --text-main: #1c1917;
  --text-muted: #57534e;
  --text-faint: #857f77;

  /* Couleur institutionnelle : Bleu marine académique profond */
  --navy-900: #0f1c3f;
  --navy-800: #192a56;
  --navy-700: #233b7b;
  --navy-50: #f0f4fc;

  /* Touche d'accent chaleureuse : Terracotta / Cuir */
  --accent-terra: #b45309;
  --accent-olive: #2e5a36;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-page);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-serif {
  font-family: var(--font-serif);
}

code, kbd, pre, .font-mono {
  font-family: var(--font-mono);
}

/* Texture papier subtile */
.paper-card {
  background-color: #ffffff;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 4px 12px rgba(28, 25, 23, 0.02);
}

.paper-card:hover {
  border-color: #d1ccbf;
}

/* Typographie de lecture Markdown (Fiches de cours) */
.prose {
  color: #292524;
  line-height: 1.75;
  font-size: 0.965rem;
}

.prose h1, .prose h2, .prose h3 {
  font-family: var(--font-serif);
  color: #1c1917;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.prose h1 {
  font-size: 1.85rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.4rem;
}

.prose h2 {
  font-size: 1.4rem;
  margin-top: 1.8rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.3rem;
}

.prose h3 {
  font-size: 1.15rem;
  margin-top: 1.4rem;
  margin-bottom: 0.5rem;
}

.prose p {
  margin-bottom: 1rem;
}

.prose blockquote {
  border-left: 3px solid #78716c;
  padding-left: 1rem;
  font-style: italic;
  color: #44403c;
  background: #fbfaf7;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.prose code, code:not(pre code) {
  background-color: #f3efe6;
  color: #854d0e;
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  font-size: 0.875em;
  border: 1px solid #e7e2d6;
  font-family: var(--font-mono);
  vertical-align: baseline;
}

h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
  font-size: 0.82em;
  padding: 0.1rem 0.35rem;
  font-weight: 500;
  vertical-align: middle;
}

/* KaTeX Typographie Mathématique */
.katex {
  font-size: 1.05em;
  color: #1c1917;
}

/* ==============================================================================
   DIAGRAMMES MERMAID (DESIGN ÉDITORIAL & CENTRÉ)
   ============================================================================== */
.mermaid-wrapper {
  background-color: #ffffff;
}

.mermaid svg {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 0 auto;
}

.prose pre code {
  background: transparent;
  color: inherit;
  border: none;
  padding: 0;
}

/* ==============================================================================
   COLORATION SYNTAXIQUE (PYGMENTS ONE-DARK THEME)
   ============================================================================== */
.codehilite {
  background: #18181b !important;
  color: #f4f4f5 !important;
  font-family: var(--font-mono);
  font-size: 0.825rem;
  line-height: 1.6;
}

.codehilite pre {
  background: #18181b !important;
  color: #f4f4f5 !important;
  padding: 1rem 1.25rem !important;
  margin: 0 !important;
  overflow-x: auto;
  font-family: var(--font-mono);
}

.codehilite .c, .codehilite .ch, .codehilite .cm, .codehilite .cp, .codehilite .cpf, .codehilite .c1, .codehilite .cs {
  color: #71717a !important; /* Commentaires gris doux */
  font-style: italic;
}

.codehilite .k, .codehilite .kd, .codehilite .kn, .codehilite .kp, .codehilite .kr {
  color: #c084fc !important; /* Mots-clés violet (def, class, import, return, with, if) */
  font-weight: 600;
}

.codehilite .s, .codehilite .sa, .codehilite .sb, .codehilite .sc, .codehilite .dl, .codehilite .sd, .codehilite .s2, .codehilite .se, .codehilite .sh, .codehilite .si, .codehilite .sx, .codehilite .sr, .codehilite .s1, .codehilite .ss {
  color: #86efac !important; /* Chaînes de caractères vert émeraude doux */
}

.codehilite .m, .codehilite .mb, .codehilite .mf, .codehilite .mh, .codehilite .mi, .codehilite .mo, .codehilite .il {
  color: #fde047 !important; /* Nombres & scalaires jaune ambre */
}

.codehilite .kc, .codehilite .kt, .codehilite .nb, .codehilite .bp {
  color: #fb923c !important; /* Constantes et types natifs (True, False, None, int, str, dict) */
}

.codehilite .nf, .codehilite .fm {
  color: #60a5fa !important; /* Noms de fonctions bleu ciel */
  font-weight: 600;
}

.codehilite .nc {
  color: #facc15 !important; /* Noms de classes jaune vif */
  font-weight: 600;
}

.codehilite .nd {
  color: #38bdf8 !important; /* Décorateurs (@patch, @property) */
}

.codehilite .na, .codehilite .nt, .codehilite .nv, .codehilite .vc, .codehilite .vg, .codehilite .vi, .codehilite .vm {
  color: #f87171 !important; /* Variables & attributs rose saumon */
}

.codehilite .o, .codehilite .ow {
  color: #2dd4bf !important; /* Opérateurs (+, -, *, =, in, not) cyan */
}

.codehilite .p {
  color: #a1a1aa !important; /* Ponctuation et séparateurs */
}

/* Interrupteur tactile humain */
.human-toggle {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scrollbar discrète */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #d6d3d1;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a8a29e;
}

/* ==============================================================================
   OPTIMISATIONS IMPRESSION ACADÉMIQUE & EXPORT PDF (PROPOSITION 4)
   ============================================================================== */
@media print {
  header, footer, nav, .top-academic-stripe, .no-print, button, .copy-btn, [x-cloak] {
    display: none !important;
  }
  
  body {
    background-color: #ffffff !important;
    color: #111111 !important;
    font-size: 10.5pt !important;
    line-height: 1.5 !important;
  }

  main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  .prose {
    color: #111111 !important;
    max-width: 100% !important;
  }

  .prose h1 {
    font-size: 1.6rem !important;
    margin-top: 1rem !important;
    page-break-after: avoid;
  }

  .prose h2 {
    font-size: 1.25rem !important;
    margin-top: 1.2rem !important;
    page-break-after: avoid;
  }

  .prose h3 {
    font-size: 1.1rem !important;
    page-break-after: avoid;
  }

  .codehilite, pre {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    white-space: pre-wrap !important;
    page-break-inside: avoid;
  }

  .codehilite pre {
    color: #0f172a !important;
  }

  .mermaid-wrapper {
    border: 1px solid #cbd5e1 !important;
    page-break-inside: avoid;
    box-shadow: none !important;
  }

  table {
    page-break-inside: avoid;
    border-collapse: collapse !important;
  }

  th, td {
    border: 1px solid #cbd5e1 !important;
    padding: 4px 8px !important;
  }

  a {
    color: #1e3a8a !important;
    text-decoration: none !important;
  }

  .border-l-2 {
    page-break-inside: avoid;
  }
}

/* Cadre et hauteur contrôlée pour les diagrammes Mermaid */
.mermaid-wrapper {
  max-width: 100%;
}
.mermaid-wrapper .mermaid svg,
.mermaid svg {
  max-height: 560px !important;
  width: 100% !important;
  max-width: 860px !important;
  height: auto !important;
  margin: 0 auto !important;
}

.diagram-badge-icon {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  display: inline-block !important;
  margin: 0 !important;
  vertical-align: middle;
}

/* Tableaux académiques équilibrés, aérés et sans effets de bord */
.prose table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

.prose table th,
.prose table td {
  padding: 0.65rem 0.9rem !important;
  vertical-align: top !important;
}

.prose table th {
  background-color: #fcfbf9 !important;
  border-bottom: 2px solid #e7e5e4 !important;
  font-weight: 600 !important;
  color: #1c1917 !important;
  white-space: nowrap !important;
}

.prose table td {
  border-bottom: 1px solid #f5f5f4 !important;
  color: #44403c !important;
  line-height: 1.6 !important;
}

.prose table tr:hover td {
  background-color: #faf9f6 !important;
}

/* Empêcher tout saut de ligne sur les cellules métriques/centrées */
.prose table th.text-center,
.prose table td.text-center {
  text-align: center !important;
  white-space: nowrap !important;
  min-width: 120px !important;
}

.prose table td.text-center strong {
  white-space: nowrap !important;
}