/* ---- MODE CLAIR (par défaut) ---- */
:root {
  --header-bg: #ffffff;
  --header-fg: #222;
  --link-color: #2aa9e0;
}

/* ---- MODE SOMBRE ---- */
[data-md-color-scheme="slate"] {
  --header-bg: #1e1e1e;
  --header-fg: #e6e6e6;
  --link-color: #79d4ff;
}


/* Améliore le confort de lecture */
.md-typeset {
  font-size: 17px;
  line-height: 1.65;
}

/* Titres plus élégants */
.md-typeset h1 {
  font-weight: 600;
  font-size: 2.2rem;
}
.md-typeset h2 {
  margin-top: 2.2rem;
  font-weight: 600;
}

/* Tableau d'accueil plus clean */
.md-typeset table {
  width: 100%;
  border-collapse: collapse;
}
.md-typeset table td, .md-typeset table th {
  padding: 12px 10px;
  border-bottom: 1px solid #E5E7EB;
}

/* Liens plus pro */
.md-typeset a {
  color: #2aa9e0;
  text-decoration: none;
}
.md-typeset a:hover {
  text-decoration: underline;
}

.md-typeset p {
  text-align: left;
}

.md-footer {
  background: #ffffff !important;
  padding: 1.2rem 2rem !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Liens précédents / suivants */
.md-footer__link {
  background: var(--md-default-bg-color);
  padding: 0.75rem 1.25rem;
  font-size: 0.95rem;
  transition: 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.6em;
  color: var(--md-default-fg-color) !important;
  text-decoration: none !important;
}

.md-footer__link--prev {
  justify-content: flex-start;
}

/* Suivant (aligné à droite) */
.md-footer__link--next {
  justify-content: flex-end;
}

/* Survol : effet bouton */
.md-footer__link:hover {
  border-color: #4a6cf7;
  color: #4a6cf7 !important;
  transform: translateY(-1px);
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.08);
}

/* Flèche plus fine et élégante */
.md-footer__link svg {
  transform: scale(1.15);
}

/* Espacement du texte */
.md-footer__title {
  font-weight: 600;
  opacity: 0.9;
}


/* Gestion de la navigation précédent/suivant */
/* Par défaut on cache tout le footer */
.md-footer {
  display: none ;
}

/* Mais on réactive le footer de navigation pour les pages Python */
/* TEST — Change couleur de fond pour être sûr */
body.route-python .md-footer { display: flex; }


/* Style du footer de navigation */


/* On garde caché le bas du footer avec les crédits */


body.python-root .md-footer__link--prev {
  display: none !important;
}

/* Small responsive tweaks */
@media (max-width: 768px) {
  .md-content { padding: 1rem; }
}

/* Masquer le bouton "remonter en haut" */
.md-copyright, .md-footer-meta__inner {
  display: none !important;
}

/* Barre claire */

/* Titre du site, plus discret */
.md-header__title {
  font-weight: 600 !important;
  font-size: 1rem !important;
  opacity: 0.85 !important;
}

/* Logo + titre rapprochés */
.md-header__button.md-logo {
  margin-right: 0.4rem !important;
}

/* Icônes (menu / recherche) plus fines */
.md-header__button,
.md-search__form {
  color: #444 !important;
}

/* Hover doux */
.md-header__button:hover,
.md-search__form:hover {
  color: #4a6cf7 !important;
}

.md-tabs, .md-header{
    background:#ffffff;
    color: black;
    box-shadow: none
}

.md-top{
  display: none;
}



/* Application des variables */
.md-header,
.md-tabs {
  background: var(--md-default-bg-color) !important;
  color: var(--header-fg) !important;
  box-shadow: none !important;
}

.md-footer {
  background: var(--md-default-bg-color) !important;
}

.md-typeset a {
  color: var(--link-color) !important;
}

/* --- HERO BANNER --- */
.hero {
  text-align: center;
  padding: 4rem 1.5rem;
  margin: 0 auto 3rem auto;
  max-width: 800px;
}

.hero h1 {
  font-size: 2.4rem;     /* ↓ était 2.6 */
  font-weight: 700;
  letter-spacing: -0.5px; /* rend plus premium */
  margin-bottom: 0.8rem;
  color: var(--md-default-fg-color); /* force contraste auto clair/sombre */
}

.hero p {
  font-size: 1.15rem;
  opacity: 0.92; /* un poil plus visible */
  margin-bottom: 2rem;
}

.hero-button {
  background: var(--md-default-bg-color);
  padding: 0.75rem 1.25rem;
  font-size: 0.95rem;
  transition: 0.25s ease;
  align-items: center;
  display: inline-block;
  gap: 0.6em;
  color: var(--md-default-fg-color) !important;
  text-decoration: none !important;
}

.hero-button:hover {
  border-color: #4a6cf7;
  color: #4a6cf7 !important;
  transform: translateY(-1px);
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.08);
}

/* Sombre : tout s’adapte automatiquement grâce aux variables Material */