/* ===============================
   PAGE INDEX – SOMMAIRE RESPONSIVE
================================ */

body.index {
  background: var(--back-color);
  color: var(--text-color);
  font-family: "Labrada", serif;
  margin: 0;
}

/* ===============================
   HEADER
================================ */

body.index header {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1vw;
  text-align: center;
  background: var(--back-color);
}

body.index header h1 {
  font-family: "Blackout", sans-serif;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 1;
  margin: 0;
    color: var(--text-color);
}

/* Accent éditorial sous le titre */
body.index header h1 strong {
  position: relative;
  display: inline-block;
}

body.index header h1::after {
  content: "";
  display: block;
  width: 4ch;
  height: 0.05em;
  background: var(--accent-color);
  margin: 0.4em auto 0;
}

body.index header .subtitle {
  display: block;
  font-family: "Labrada", serif;
  font-size: 0.3em;
  font-weight: 300;
  margin-top: 0.8em;
  opacity: 0.8;
} 

/* ===============================
   CONTENU PRINCIPAL
================================ */
body.index main {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0em 2em;
}

/* ===============================
   TITRES DE SECTIONS
================================ */
body.index h2 {
  font-family: "Blackout", sans-serif;
  font-size: 2.2em;
  margin: 1.5em 0 0.5em;
}

body.index h3 {
  font-family: "Blackout", sans-serif;
  font-size: 1.6em;
  margin: 2.5em 0 0.8em;
}

/* ===============================
   LISTES (SOMMAIRE)
================================ */
.content ul {
  column-count: 3;
  column-gap: 3rem;
  margin: 2rem 0;
  padding-left: 0;
}

.content ul li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 0.6rem;
  list-style: none;
}

body.index ul {
  list-style: none;
  padding: 0;
  margin: 0 0 2em 0;
}

body.index li {
  margin-bottom: 0.6em;
}

body.index li a {
  text-decoration: none;
  color: var(--text-color);
  font-size: 1.05em;
  transition: color 0.2s ease, background 0.2s ease;
  display: inline-block; /* pour plus facile à cliquer */
  padding: 0.2em 0.4em; /* zone cliquable agrandie */
  border-radius: 3px;
}

body.index li span {
  display: block;
  font-size: 0.85em;
  opacity: 0.65;
  margin-top: 0.1em;
}

body.index li:hover a,
body.index li:hover span {
  color: red;
  cursor: pointer;
}

/* ===============================
   INTRO / OUTRO
================================ */
.intro,
.outro {
  max-width: 50rem;
  margin: 0 auto;
  padding: 1em;
}

.outro {
  margin-top: 4em;
}

/* ===============================
   LIEN THÈMES
================================ */
.tags-link {
  margin-top: 0.1em;
}

.tags-link a {
  font-size: 0.85em;
  opacity: 0.65;
  font-weight: normal;
  text-decoration: none;
  color: var(--text-color);
  display: inline-block;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.tags-link a:hover {
  color: red;
  font-weight: bold;

}



















/* ===============================
   RESPONSIVE – TABLETTES / MOBILES
================================ */
@media (max-width: 1024px) {
  .content ul {
    column-count: 2;
    column-gap: 2rem;
  }
}

@media (max-width: 768px) {

  body.index header {
    min-height: 35vh; /* moins haut sur mobile */
    padding: 3vw;     /* padding plus flexible */
  }

  
  body.index header h1 {
    font-size: clamp(1.8rem, 10vw, 4.5rem);
  }

  body.index header .top-nav {
    font-size: 1.6rem;
  }

  body.index header p {
    font-size: 0.9rem;
  }

  .content ul {
    column-count: 1;
    column-gap: 0;
  }

  .intro, .outro {
    max-width: 90%;
    padding: 0.5em;
  }

  body.index li a, .tags-link a {
    font-size: 1rem;
    padding: 0.3em 0.5em;
  }
}

@media (max-width: 480px) {
  body.index header h1 {
    font-size: clamp(1.5rem, 10vw, 3.5rem);
  }

  body.index header .top-nav {
    font-size: 1.4rem;
  }

  body.index header p {
    font-size: 0.85rem;
  }

  body.index li a, .tags-link a {
    font-size: 0.95rem;
    padding: 0.3em 0.6em;
  }

  .content ul {
    column-count: 1;
  }
}






/* ===============================
   DARK MODE – SOMMAIRE
================================ */
html[data-force-color-mode="dark"] {
  --back-color: #121212; /* fond sombre */
  --text-color: #0a454d; /* texte clair */
  --accent-color: #c3d8e1; /* couleur accent pour hover, liens, etc. */
}

/* UTILISATION */
body.index {
  background: var(--back-color);
  color: var( --accent-color);
}

body.index header {
  background: var(--back-color);
}

body.index header h1 {
  color: var(--text-color);
}

body.index blockquote {
  border-left: 3px solid var(--accent-color);
}

body.index header h1 strong::after {
  background: var(--accent-color);
}

body.index strong {
color: var( --accent-color);
}

body.index strong:hover {
  color: red;
}