/* style.css */

/* --- Couleurs principales (variables CSS) --- */
:root {
  --beige: #f6f2e8;
  --vert-sapin: #2f4f4f;
  --vert-sapin-clair: #3f655c;
  --texte: #1f1f1f;
  --lien: #2f4f4f;
  --lien-survol: #55796e;
}

/* --- Style global du corps de page --- */
body {
  margin: 0;
  padding: 0 3em; /* marge intérieure horizontale large sur desktop */
  font-family: 'Georgia', serif;
  background-color: var(--beige);
  color: var(--texte);
  line-height: 1.6;
  max-width: 1100px; /* largeur limitée pour confort de lecture */
  margin-left: auto;
  margin-right: auto;
  padding-top: 2em;
  padding-bottom: 2em;
  font-size: 18px;
}

/* --- Titres --- */
h1 {
  font-family: 'Cinzel', serif;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  color: var(--vert-sapin);
  transition: color 0.4s ease, letter-spacing 0.4s ease;
  letter-spacing: 0px;
  cursor: pointer;
}
h1:hover {
  letter-spacing: 7px;
}

h2, h3 {
  color: var(--vert-sapin);
  text-decoration: underline;
}

/* --- Navigation --- */
nav {
  background-color: var(--vert-sapin);
  padding: 1em;
  margin-bottom: 2em;
  text-align: center;
  border-radius: 8px;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  margin: 0 1em;
  font-weight: bold;
}

nav a:hover {
  color: #dddddd;
  text-decoration: underline;
}

/* --- Listes --- */
ul {
  padding-left: 1.5em;
}

ul li {
  margin-bottom: 0.6em;
}

/* --- Liens --- */
a {
  color: var(--lien);
  text-decoration: none;
}

a.active {
  font-weight: bold;
  text-decoration: underline;
}

a:hover {
  color: var(--lien-survol);
  text-decoration: underline;
}

/* --- Sections thématiques --- */
.theme {
  margin-bottom: 3em;
}

.theme h2 {
  color: var(--vert-sapin);
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.3em;
  margin-bottom: 1em;
}

/* --- Documents --- */
.document {
  margin-bottom: 1.5em;
}

.document a {
  font-weight: bold;
  font-size: 1.05em;
  text-decoration: none;
  color: var(--lien);
}

.document a:hover {
  text-decoration: underline;
  color: var(--lien-survol);
}

.document a::after {
  content: " 📃"; /* icône discrète */
  font-size: 0.9em;
  vertical-align: middle;
  color: var(--lien-survol);
}

/* --- Commentaires --- */
.commentaire, .com_lien {
  margin-top: 0.3em;
  margin-left: 1em;
  font-style: italic;
  color: #555;
}

/* --- Galerie d’images en flexbox --- */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px auto;
  gap: 10px;
  max-width: 100%;
}

.cell {
  flex: 1 0 150px; /* minimum 150px, flexible */
  max-width: 150px;
  text-align: center;
}

.cell img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* --- Pied de page --- */
footer {
  text-align: center;
  font-size: 0.9em;
  margin-top: 4em;
  color: #555;
  border-top: 1px solid #ccc;
  padding-top: 1em;
}

/* --- Adaptations pour petits écrans (smartphones, tablettes) --- */
@media screen and (max-width: 768px) {
  
  body {
    padding: 0 1em; /* moins d’espace horizontal */
    max-width: 100%;
    font-size: 16px;
  }

  h1 {
    font-size: 1.5em;
    letter-spacing: 2px;
  }
  h2, h3 {
    font-size: 1em;
  }

  nav {
    padding: 0.5em;
  }
  nav a {
    margin: 0 0.5em;
    font-size: 0.7em;
  }

  /* Galerie : images en pleine largeur et empilées verticalement */
  .gallery {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  .cell {
    flex: none;
    width: 60%;
    max-width: none;
  }
  .cell img {
    width: 60%;
  }

  /* Réduction des marges sur thèmes, documents, footer */
  .theme, .document, footer {
    margin-bottom: 1.5em;
  }
}