/* ===============================
   COUVERTURE — PAGE D’ACCUEIL
   Univers éditorial / livre
================================ */

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

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

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

/* ===============================
   AUTEURS / ÉDITEUR
================================ */

body.index .authors,
body.index main > p {
  max-width: 60ch;
  margin: 1.5em auto;
  text-align: center;
  font-size: 0.95em;
  opacity: 0.85;
}

/* ===============================
   TEXTE MANIFESTE
================================ */

body.index main {
  padding: 4em 6vw 6em;
}

body.index .declaration {
  max-width: 75ch;
  margin: 0 auto;
}

/* Citation */
body.index blockquote {
  margin: 0 0 3em;
  padding-left: 2em;
  border-left: 3px solid var(--accent-color);
  font-style: italic;
}

body.index blockquote p {
  margin-bottom: 1.2em;
}

body.index blockquote footer {
  margin-top: 1.5em;
  font-style: normal;
  font-size: 0.85em;
  opacity: 0.7;
}

/* Texte de dédicace */
body.index .declaration > p {
  margin-top: 3em;
  font-size: 1em;
  line-height: 1.6;
}

/* ===============================
   FOOTER / TOGGLE
================================ */

body.index footer {
  padding: 3em 1em;
  text-align: center;
}




/* ===============================
   DARK MODE GLOBAL
================================ */
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(--text-color);
}





.sommaire-btn {
  position: relative;
  font-family: "Labrada", serif;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 500;

  text-decoration: none;
  color: var(--text-color);

  padding: 0.2em 0.6em 0.5em;
  transition: color 0.25s ease;
}

.sommaire-btn-container {
  text-align: center;
  margin: 60px 0 40px;
}

.sommaire-btn::before {
  content: "→";
  margin-right: 0.5em;
  font-style: normal;
  opacity: 0.6;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.sommaire-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 55%;
  height: 2px;
  background: var(--accent-color);
  transform: translateX(-50%) scaleX(0.3);
  transition: transform 0.35s ease;
}

.sommaire-btn:hover {
  color: var(--accent-color);
}

.sommaire-btn:hover::before {
  transform: translateX(10em);
  opacity: 1;
}

.sommaire-btn:hover::after {
  transform: translateX(-50%) scaleX(1.7);
}

.sommaire-btn:hover {
  color: var(--accent-color);
}

html[data-force-color-mode="dark"] .sommaire-btn {
  color: var(--accent-color);
}




/* ===============================
   RESPONSIVE — COUVERTURE
================================ */

/* Pour les écrans <= 768px (tablettes / mobiles) */
@media (max-width: 768px) {
  
  /* HEADER */
  body.index header {
    min-height: 35vh; /* moins haut sur mobile */
    padding: 3vw;     /* padding plus flexible */
  }

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

  body.index header h1 strong::after {
    width: 2.5ch; /* barre plus courte */
    height: 0.12em;
  }

  body.index header .subtitle {
    font-size: 0.4em; /* légèrement plus grand pour lisibilité */
  }

  /* Auteurs / Éditeur */
  body.index .authors,
  body.index main > p {
    max-width: 90%; /* texte prend plus de largeur sur petit écran */
    margin: 1em auto;
    font-size: 0.9em;
  }

  /* TEXTE MANIFESTE */
  body.index main {
    padding: 2em 4vw 3em; /* moins de padding */
  }

  body.index .declaration {
    max-width: 95%; /* s'adapte aux petits écrans */
  }

  body.index blockquote {
    padding-left: 1.5em;
    margin-bottom: 2em;
    border-left-width: 2px;
  }

  body.index blockquote footer {
    font-size: 0.8em;
  }

  body.index .declaration > p {
    font-size: 0.95em;
  }

  /* BOUTON SOMMAIRE */
  .sommaire-btn-container {
    margin: 40px 0 30px;
    text-align: center;
  }

  .sommaire-btn {
    font-size: 1rem;
    padding: 0.4em 0.8em 0.5em;
  }

  .sommaire-btn::after {
    width: 70%; /* barre légèrement plus longue proportionnellement */
  }

  .sommaire-btn:hover::before {
    transform: translateX(5em); /* moins de mouvement sur mobile */
  }

  .sommaire-btn:hover::after {
    transform: translateX(-50%) scaleX(1.5);
  }

  /* FOOTER / DARK MODE TOGGLE */
  body.index footer {
    padding: 2em 1em;
  }

}

/* Pour très petits écrans <= 480px */
@media (max-width: 480px) {

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

  body.index .authors,
  body.index main > p {
    font-size: 0.85em;
  }

  .sommaire-btn {
    font-size: 0.95rem;
    padding: 0.35em 0.7em 0.45em;
  }

  .sommaire-btn:hover::before {
    transform: translateX(3em);
  }

}