/* =====================================================
   ABÉCÉDAIRE — STRUCTURE GÉNÉRALE
===================================================== */

.index-container {
  margin-top: 0;
}


/* =====================================================
   BLOC D'UNE LETTRE
===================================================== */

.index-letter-block {

  background: #ffffff;

  padding: 20px 28px 24px 28px;

  border-radius: 4px;

  margin-bottom: 40px;

}

/**.index-letter-block h2 {

  display: block;

  width: fit-content;

  margin: 0 auto 25px auto;   

  text-align: center;

  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  font-weight: 600;

}**/

/* =====================================================
   LETTRE TITRE (A, B, C...)
===================================================== */

.index-letter-title {

  text-align: center;

  margin-bottom: 20px;

}

.index-letter-title h2 {

  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  font-weight: 600;

  margin: 0;

}


/* =====================================================
   MOTS
===================================================== */

.index-words {

  text-align: left;

}

.index-words a {

  display: inline-block;

  margin: 6px 18px 6px 0;

  text-decoration: none;

  color: #2c2c2c;

  font-family: 'Merriweather', serif;
  font-size: 0.95rem;

  transition: opacity 0.2s ease;

}

.index-words a:hover {
  opacity: 0.6;
}


/* =====================================================
   BARRE ALPHABÉTIQUE SUPÉRIEURE
===================================================== */

.alphabet-top {

  display: flex;
  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;

  margin-bottom: 35px;

  padding: 15px;

  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);

  border-radius: 6px;

}


/* =====================================================
   BOUTONS LETTRES
===================================================== */

.alphabet-top a {

  display: flex;

  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  text-decoration: none;

  font-family: 'Merriweather', serif;
  font-weight: 600;

  font-size: 0.9rem;

  color: #2c2c2c;

  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;

  background: rgba(255,255,255,0.75);

  transition: all 0.2s ease;

}

.alphabet-top a:hover {

  background: #2c3e50;
  color: #ffffff;

}


/* =====================================================
   BOUTON RETOUR HAUT
===================================================== */

#scroll-top {

  position: fixed;

  right: 30px;
  bottom: 30px;

  width: 56px;
  height: 56px;

  display: none;

  align-items: center;
  justify-content: center;

  font-size: 26px;

}

/* =====================================================
   THESAURUS — CADRE INTERNE OPAQUE (page présentation)
===================================================== */

.thesaurus-intro {

  max-width: 750px;        /* largeur confortable de lecture */

  margin: 0 auto;          /* centre le bloc */

  padding: 30px 40px;

  background: #ffffff;     /* fond opaque */

  border-radius: 6px;

}


/* =====================================================
   TITRE PRINCIPAL
===================================================== */

.thesaurus-intro h1 {

  font-family: 'Cormorant Garamond', serif;

  font-size: 2.4rem;

  text-align: center;

  margin-bottom: 25px;

}


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

.thesaurus-intro p {

  font-family: 'Merriweather', serif;

  line-height: 1.7;

  margin-bottom: 16px;

}


/* =====================================================
   LISTE
===================================================== */

.thesaurus-intro ul {

  margin: 15px 0 20px 25px;

}


/* =====================================================
   THESAURUS — BARRE DES CATÉGORIES
===================================================== */

.category-bar {

  margin-bottom: 35px;

  padding: 15px;

  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);

  border-radius: 6px;

}

/* conteneur des boutons */

.category-nav {

  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  justify-content: center;

}


/* boutons catégories */

.category-nav a {

  display: inline-block;

  padding: 8px 16px;

  background: rgba(255,255,255,0.85);

  border: 1px solid rgba(0,0,0,0.15);

  border-radius: 4px;

  text-decoration: none;

  font-family: 'Merriweather', serif;
  font-size: 0.9rem;

  color: #2c2c2c;

  transition: all 0.2s ease;

}

.category-nav a:hover {

  background: #2c3e50;
  color: #ffffff;

}

/* =====================================================
   BLOCS CATÉGORIES
===================================================== */

.category-block {

  background: #ffffff;

  padding: 20px 28px;

  border-radius: 6px;

  margin-bottom: 35px;

}


/* titre catégorie */

.category-block h2 {

  font-family: 'Cormorant Garamond', serif;

  font-size: 2rem;

  margin-bottom: 15px;

}


/* =====================================================
   MOTS DANS UNE CATÉGORIE
===================================================== */

.category-block ul {

  list-style: none;

  padding: 0;
  margin: 0;

}

.category-block li {

  display: inline-block;

  margin: 6px 18px 6px 0;

}

.category-block a {

  text-decoration: none;

  font-family: 'Merriweather', serif;
  font-size: 0.95rem;

  color: #2c2c2c;

}

.category-block a:hover {

  opacity: 0.6;

}


/* =====================================================
   MOTS DANS UN GROUPE
===================================================== */

/* =====================================================
   GROUPES
===================================================== */

.group-block {

  margin-bottom: 12px;

  font-family: 'Merriweather', serif;
}


/* nom du groupe */

/* =====================================================
   TITRE DU GROUPE
===================================================== */

.group-title {

  font-weight: 600;

  margin-right: 18px;   /* même espace que les mots */

}



/* liste des mots */



.group-words a {

  text-decoration: none;

  margin-right: 18px;

  color: #2c2c2c;

}

.group-words a:hover {

  text-decoration: underline;

}


/* =====================================================
   COLONNES DES GROUPES
===================================================== */

/**.index-letter-block {

  column-count: 2;     

  column-gap: 40px;

}


/* chaque groupe doit rester intact */

.group-block {

  break-inside: avoid;

  margin-bottom: 14px;

}


/* =====================================================
   COLONNES DES GROUPES
===================================================== */

.groups-columns {

  column-count: 2;
  column-gap: 40px;

}

.group-block {

  break-inside: avoid;

}

/* =====================================================
   RESPONSIVE GROUPES
===================================================== */

@media (max-width: 1100px) {

  .index-letter-block {
    column-count: 1;
  }

}