: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: "Open Sans", "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --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);
  --shadow-material:
    0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --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;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background-color: var(--color-background);
  border-bottom: 0.1rem solid var(--color-logo);
  padding: var(--space-sm);
}

.banner_menu::before {
  content: "";
  display: none;
}

.banner_menu ul {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
}

.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);
}

.phrase {
  font-weight: bolder;
}

/* 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-material);
  /* 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;
}

/* Gestion de l'attribut valign pour les lignes de tableau */
tr[valign="middle"],
tr[valign="middle"] td,
tr[valign="middle"] th {
  vertical-align: middle;
}

tr[valign="top"],
tr[valign="top"] td,
tr[valign="top"] th {
  vertical-align: top;
}

tr[valign="bottom"],
tr[valign="bottom"] td,
tr[valign="bottom"] th {
  vertical-align: bottom;
}

tr[valign] :where(td, th) {
  vertical-align: inherit;
}

/* 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 {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .banner_menu::before {
    content: "☰ Menu";
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background-color: var(--color-background);
    cursor: pointer;
  }

  .banner_menu ul {
    order: 2;
    flex-direction: column;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    margin-top: var(--space-xs);
    transition:
      max-height 0.3s ease,
      opacity 0.3s ease;
  }

  .banner_menu:hover ul,
  .banner_menu:focus-within ul {
    max-height: 32rem;
    opacity: 1;
    pointer-events: auto;
  }

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

  /* 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;
  }
}

/* En-têtes de tableaux contrastés */
th {
  background-color: #666 !important;
  color: #fff !important;
  font-weight: 600;
}

.navheader th,
.navfooter th {
  background: transparent !important;
  color: inherit !important;
  font-weight: 500 !important;
}

.qandaset tr.answer td:last-child {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

.qandaset tr.answer td:first-child {
  border-top: none !important;
  padding-top: 0;
}

.qandaset tr.answer > td > table th,
.qandaset tr.answer > td > table td {
  border: solid 0.1rem var(--color-border);
}

.qandaset .important table,
.qandaset .important tr,
.qandaset .important th,
.qandaset .important td,
.qandaset .note table,
.qandaset .note tr,
.qandaset .note th,
.qandaset .note td {
  border: none !important;
}