:root {
  /* Couleurs */
  --color-primary: #a01;
  --color-secondary: #d04;
  --color-text: #333;
  --color-link: #666; /* Un ton plus clair que le texte */
  --color-link-hover: var(--color-text);
  --color-link-hover-bg: var(
    --color-text
  ); /* Nouvelle variable pour le fond au survol */
  --color-link-hover-text: var(
    --color-background
  ); /* Nouvelle variable pour le texte au survol */
  --color-background: #fff;
  --color-border: #999;

  --color-logo: rgba(168, 0, 48, 0.9);
  --color-overlay: rgba(255, 255, 255, 0.98);

  /* Typographie */
  --font-primary: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "DejaVu Sans Mono", monospace;
  /* Ajout d'une variable pour le texte serif si nécessaire */
  --font-serif: "IBM Plex Serif", Georgia, serif;
  --font-size-base: 16px;
  --line-height: 1.5;

  /* Espacement */
  --space-xs: 0.33rem;
  --space-sm: 0.66rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  /* Mise en page */
  --content-width: 80vw;
  --sidebar-width: 17vw;

  /* Effets */
  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;

  /* Ajout des couleurs pour le mode sombre */
  --color-dark-text: #1a1a1a;
  --color-dark-link: var(--color-text);
  --color-dark-link-hover: var(--color-text);
  --color-dark-border: #e5e5e5;
}

/* Reset & base */
html {
  font-size: var(--font-size-base);
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-background);
}

.container {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: var(--space-lg);
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-sm);
  min-height: 100vh; /* Hauteur minimale pour éviter les sauts */
}

#links {
  width: var(--sidebar-width);
}

#content {
  width: 100%;
  padding-top: var(--space-lg); /* Ajoute de l'espace pour le contenu */
  max-width: calc(
    var(--content-width) - var(--sidebar-width) - var(--space-lg)
  );
}

/* Menu - Base styles */
.banner_menu {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-background);
  border-bottom: 0.1rem solid var(--color-logo);
  padding: var(--space-sm);
}

.banner_menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
}

.banner_menu a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  transition: var(--transition);
}

.banner_menu ul li a:hover {
  background-color: var(--color-primary);
  color: var(--color-background);
}

/* Typographie */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: var(--space-md) 0 var(--space-sm);
  line-height: 1.2;
}

p {
  margin: var(--space-sm) 0;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  transition: var(--transition);
  padding: 0.2em 0; /* Ajoute un peu d'espace autour du texte pour le fond */
}

a:hover {
  color: var(--color-link-hover-text);
  background-color: var(--color-link-hover-bg);
  text-decoration: underline;
}

/* Exception pour les liens du menu */
.banner_menu ul li a:hover {
  text-decoration: none;
  background-color: var(--color-primary);
  color: var(--color-background);
}

/* Code & Pre */
pre,
.screen,
.literallayout {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.4;
  background-color: #f3f3f3;
  padding: var(--space-sm);
  margin: var(--space-md) 0;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  /* Gestion du débordement */
  width: 100%;
  max-width: calc(
    var(--content-width) - var(--sidebar-width) - (4 * var(--space-lg))
  );
  overflow-x: auto;
  white-space: pre;
}

/* Style pour les prompts */
.screen .prompt {
  color: var(--color-prompt);
  user-select: none; /* Rend le prompt non sélectionnable */
}

/* Style pour les commandes */
.screen code {
  color: var(--color-command);
  font-weight: 500;
}

/* Style pour l'emphase */
.screen .emphasis {
  color: var(--color-emphasis);
  text-decoration: underline;
}

/* Style pour la sortie standard */
.screen {
  color: var(--color-output);
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

/* Listes */
ul,
ol {
  margin: var(--space-sm) 0;
  padding-left: var(--space-lg);
}

ul li,
ol li {
  margin-bottom: var(--space-xs);
}

/* Style spécifique pour les listes imbriquées */
ul ul,
ul ol,
ol ul,
ol ol {
  margin: var(--space-xs) 0;
}

/* Bordure au-dessus de titlepage dans simplesect */
.simplesect .titlepage {
  border-top: 2px solid var(--color-border);
  padding-top: var(--space-md);
  margin-top: var(--space-lg);
}

/* Ajustement pour les listes dans le contenu principal */
article ul,
article ol {
  line-height: var(--line-height);
}

/* Exception pour le menu de navigation */
.banner_menu ul {
  padding-left: 0;
  margin: 0;
}

.banner_menu ul li {
  margin-bottom: 0;
}

/* Tables des matières */
dl {
  margin: var(--space-sm) 0;
}

dl dt {
  margin-bottom: var(--space-xs);
}

/* Indentation pour les sections de niveau 2 */
dl .sect2 {
  display: block;
  padding-left: var(--space-lg);
}

/* Style des liens dans la table des matières */
dl .sect2 a {
  display: inline-block;
  line-height: var(--line-height);
  /* Garde la même couleur que le texte */
  color: var(--color-text);
}

dl .sect2 a:hover {
  color: var(--color-link-hover-text);
  background-color: var(--color-link-hover-bg);
  text-decoration: underline;
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-md) 0;
  border: 0.1rem solid var(--color-border);
  max-width: calc(
    var(--content-width) - var(--sidebar-width) - var(--space-lg)
  );
}

th,
td {
  padding: var(--space-xs) var(--space-sm);
  border: 0.1rem solid var(--color-border);
  text-align: left;
}

th {
  background-color: #f5f5f5;
  font-weight: 500;
}

/* Style alterné des lignes pour une meilleure lisibilité */
tr:nth-child(even) {
  background-color: #fafafa;
}

/* Tables */
.menu table,
.menu td,
.menu th,
.menu tr,
.calloutlist table,
.calloutlist td,
.calloutlist tr,
.important table,
.important td,
.important th,
.important tr,
.note table,
.note td,
.note th,
.note tr,
.warning table,
.warning td,
.warning th,
.warning tr,
.informaltable table,
.qandaset table,
.navfooter table,
.navheader table,
.abstract table {
  border: none;
  background: transparent;
  margin: var(--space-md) 0;
  vertical-align: top;
}

.informaltable td {
  border: none;
  padding: 0;
  vertical-align: top;
}

.qandaset td,
.qandaset th,
.navfooter td,
.navfooter th,
.navheader td,
.navheader th,
.abstract td {
  border: none;
  padding: var(--space-xs) var(--space-sm);
  vertical-align: top;
}

/* Suppression du fond alterné pour les lignes QandASet */
.qandaset tr:nth-child(even),
.navfooter th:nth-child(even),
.navfooter tr:nth-child(even),
.navheader th:nth-child(even),
.navheader tr:nth-child(even),
.abstract tr:nth-child(even) {
  background-color: transparent;
}

/* Ajustement pour les blocs de code dans les réponses */
.qandaset .screen {
  margin: var(--space-xs) 0;
}

/* Style spécifique pour les liens de navigation */
.navfooter a,
.navheader a {
  text-decoration: none;
  padding: var(--space-xs) 0;
}

.navfooter a:hover,
.navheader a:hover {
  text-decoration: underline;
}

/* Ajustement des marges pour la navigation */
.navfooter,
.navheader {
  margin: var(--space-lg) 0;
  width: 100%;
  max-width: calc(
    var(--content-width) - var(--sidebar-width) - var(--space-sm)
  );
}

.navfooter table,
.navheader table {
  width: 100%;
  max-width: calc(
    var(--content-width) - var(--sidebar-width) - var(--space-lg)
  );
}

.logo {
  display: block;
  width: min(var(--sidebar-width), 100%); /* Largeur dynamique */
  margin: 0 auto var(--space-md);
}

.logo a {
  color: var(--color-logo);
  background-color: transparent;
  text-decoration: none;
  display: block;
}

.sidetitle {
  text-align: center;
  border-bottom: 0.1rem solid var(--color-border);
  padding-top: var(--space-xs);
}

/* Images en ligne */
.inlinemediaobject {
  min-width: 7rem; /* Largeur minimale */
  display: inline-block;
  vertical-align: middle;
  margin: 0 var(--space-xs);
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.inlinemediaobject img {
  height: auto;
  width: auto;
  vertical-align: middle;
}

/* Adaptation des balises de blocs */
dt:not(.toc dt) {
  padding-top: var(--space-md);
  font-size: larger;
}

.variablelist dt .term {
  font-weight: bold;
  display: inline; /* Changé de block à inline */
  margin-right: var(--space-xs); /* Ajoute un espace entre les éléments */
}

.blog .item .date {
  border-top: 0.2rem solid var(--color-border);
  font-size: 1rem; /* Même taille que les paragraphes */
  font-weight: normal;
  padding-top: var(--space-xs);
}

h2.date {
  font-size: 1rem; /* Même taille que les paragraphes */
  font-weight: normal;
  margin: var(--space-sm) 0;
}

.posted {
  color: var(--color-emphasis);
}

/* Légendes des objets media */
.mediaobject .caption {
  margin-top: var(--space-xs);
  font-size: 0.9rem;
}

/* Vue mobile */
@media screen and (max-width: 767px) {
  /* Configuration racine */
  :root {
    --content-width: 100vw;
    --font-size-base: 14px;
  }

  /* Layout */
  .container {
    grid-template-columns: 1fr;
  }

  #links.mobile-hide {
    display: none !important;
  }

  #content {
    width: 100%;
    max-width: calc(var(--content-width) - var(--space-sm));
    padding: var(--space-xs);
  }

  /* Navigation */
  .banner_menu ul {
    flex-direction: column;
  }

  .banner_menu a {
    width: 100%;
    text-align: center;
  }

  /* Logo */
  .logo {
    width: 20%;
    min-width: 96px;
  }

  /* Tables responsives */
  .qandaset td,
  .qandaset th,
  .informaltable td,
  .informaltable th,
  table {
    width: 100%;
    max-width: calc(var(--content-width) - 10 * var(--space-sm));
  }

  /* Ajustements divers */
  .navfooter,
  .navheader {
    margin: var(--space-sm) 0;
    table-layout: fixed;
    width: 100%;
    max-width: calc(var(--content-width) - var(--space-sm));
  }

  .navfooter td,
  .navheader td {
    vertical-align: top;
    padding: var(--space-xs);
    width: 33.33%;
  }

  /* Ajustements texte et code */
  pre,
  .screen,
  .literallayout {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: calc(var(--content-width) - 2 * var(--space-sm));
  }

  .informaltable td {
    display: inline-flex;
    flex-direction: column;
  }

  /* Ajustements tables et navigation en pleine largeur */
  .navfooter,
  .navheader {
    width: 100%;
    margin-left: calc(-1 * var(--space-sm));
    margin-right: calc(-1 * var(--space-sm));
    padding: 0;
    position: relative;
    left: 0;
  }
}