/* overrides.css - Espace Doc Cyberflemme (lisibilite + diversite)
   A charger apres onelight.css + viewer.css
*/

/* Base: respiration + largeur de lecture */
#write{
  line-height: 1.7;
  letter-spacing: 0.01em; /* leger, optionnel */
  max-width: 78ch;        /* optionnel: lignes moins longues */
}

/* Paragraphes + listes: espace entre blocs */
#write p{
  line-height: 1.75;
  margin: 0.75rem 0;
}

#write li{
  line-height: 1.7;
  margin: 0.25rem 0;
}

#write ul,
#write ol{
  margin: 0.7rem 0 1rem;
  padding-left: 1.4rem;
}

/* Titres: respirent */
#write h1{ margin: 1.2rem 0 0.8rem; }
#write h2{ margin: 1.1rem 0 0.7rem; }
#write h3{ margin: 1.0rem 0 0.6rem; }

/* 1) Gras colore + lisible */
#write strong,
#write b{
  color: var(--main-yellow, #f9b03d);
  font-weight: 8000;
}

#write strong:hover,
#write b:hover{
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* 2) Blockquote (Markdown ">") plus net */
#write blockquote{
  margin: 1rem 0;
  padding: 0.85rem 1rem;
  border-left: 6px solid var(--theme-color, #166ff3);
  background: color-mix(in srgb, var(--code-bg-color, #3a3f4a) 70%, black);
  border-radius: var(--radius-small, 6px);
}

#write blockquote p{
  margin: 0.4rem 0;
  color: color-mix(in srgb, var(--text-color, #c3c3c3) 92%, white);
}

/* 3) Liens plus visibles */
#write a{
  color: var(--theme-color, #166ff3);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

#write a:hover{
  color: var(--main-green, #2ed573);
}

/* 4) Code inline mieux separe */
#write :not(pre) > code{
  padding: 0.12em 0.35em;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--tb-border-color, #393e49) 70%, black);
}

/* 5) Titres: un peu plus de contraste */
#write h1,
#write h2,
#write h3{
  color: color-mix(in srgb, var(--text-color, #c3c3c3) 85%, white);
}

/* 6) Liens des documents dans le menu de gauche : rouge */
.sidebar .nav-doc-link,
.sidebar .nav-doc-link.active-doc{
  color: #e45649;
}

/* 7) Titre du site plus grand ; sous-titre "documents" au même bleu */
.sidebar h1{
  font-size: 1.6rem;
}
.sidebar .sidebar-title-docs{
  color: #166ff3;
  font-size: 1.2rem;
  opacity: 1;
}

/* 8) Bouton clair/sombre, poussé tout en bas de la barre latérale */
.sidebar{
  display: flex;
  flex-direction: column;
}
.sidebar .theme-toggle-btn{
  position: static;
  display: block;
  width: 100%;
  margin-top: auto;        /* pousse le bouton tout en bas de la colonne */
  padding: 6px 10px;
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  color: inherit;
  background: transparent;
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.85;
}
.sidebar .theme-toggle-btn:hover{
  opacity: 1;
  background: rgba(128, 128, 128, 0.15);
}

/* 9) Images et vidéos des documents : adaptées à la largeur du contenu */
#write img,
#write video{
  max-width: 100%;
  height: auto;
}

/* 10) Logo animé en bas à droite : 2x plus petit, responsive, toujours au-dessus */
#mutou2-layer{
  width: clamp(45px, 7vw, 75px);
  height: clamp(45px, 7vw, 75px);
  z-index: 1000;        /* toujours au-dessus du contenu / du texte */
  pointer-events: none; /* mais laisse cliquer/sélectionner à travers */
}

/* 11) Responsive : sur téléphone/tablette, la barre passe en haut, le contenu dessous */
@media (max-width: 768px) {
  .layout {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  .sidebar .theme-toggle-btn {
    margin-top: 12px;     /* plus besoin de le coller tout en bas */
  }
  /* Sommaire interne masqué sur mobile pour aller droit au contenu */
  .sidebar-separator,
  .sidebar-subtitle:not(.sidebar-title-docs),
  #toc-list {
    display: none;
  }
  #write {
    margin: 12px;
    padding: 16px;
    max-width: none;
    overflow-wrap: break-word;   /* évite les débordements de mots/liens longs */
  }
}