/* ===== Base ===== */
html, body { height: 100%; }

body {
  font: 400 1em/1.5 Helvetica, Arial, sans-serif;
  color: rgba(0,0,0,.8);
  background: url("biblios.jpg");
  background-repeat: repeat;
  margin: 0;
}

/* ===== Container ===== */
#container {
  max-width: 1000px;
  margin: 0 auto;
  background: #E4CCA8;
  box-shadow: 0 0 10px #000;
}
#container p {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #555;
  text-align: center;
  margin: 0.5rem auto 0;
}
#container p a{
  font-size: 1.2rem;
  line-height: 1.5;
  color: #555;
  text-align: center;
  margin: 0.5rem auto 0;
}
#container p a:hover{
  color: #B33418;
}

/* ===== Header ===== */
#header {
  background: #171c1a;
  box-shadow: 0 5px 10px #000;
  text-align: center;
}
#header img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ===== Content (grille d’images + texte) ===== */
#content {
  display: grid;
  gap: 14px;
  padding: 0 0 1rem; /* petit espace avant le footer */
}

/* Liens d’images (cartes) */
#content a {
  display: block;
  overflow: hidden;
  align-self: start;
  text-decoration: none;
  padding: 7px;
}

/* Images de couverture */
#content a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* remplit proprement le cadre */
  transition: filter .2s ease;
}
#content a img:hover { filter: brightness(70%); }

/* Texte dans #content (ex: “Source : …”) */
#content p {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #555;
  text-align: center;
  margin: 0.5rem auto 0;
}

/* Image “Reading” alignée à droite, sans float */
.reading {
  display: block;
  margin: 2rem 0 0;
}
.reading img {
  display: block;
  max-width: 300px;
  height: auto;
  margin-left: auto;             /* pousse à droite */
}

/* Utilitaire */
.size-shadow { box-shadow: 0 4px 8px rgba(0,0,0,.3); }

/* ===== Footer ===== */
footer {
  background: #171c1a;
  color: #e7e5e4;
  text-align: center;
  padding: 1em;
}
.collection-links a {
  color: #e7e5e4;
  text-decoration: none;
  font-size: 1.2em;
}
.collection-links a:hover { text-decoration: underline; }

/* ===== Desktop (>= 641px) ===== */
@media (min-width: 641px) {
  /* grille fluide multi-colonnes */
  #content {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  /* hauteur visuelle cohérente (~300px) via ratio */
  #content a {
    aspect-ratio: 2 / 3;         /* adapte la hauteur au bloc */
  }
}

/* ===== Mobile (<= 640px) ===== */
@media (max-width: 640px) {
  #container { width: 100%; box-shadow: none; }

  /* une seule colonne, images pleine largeur */
  #content {
    grid-template-columns: 1fr;
    padding: 1em;
  }

  #content a { padding: 0; aspect-ratio: auto; }
  #content a img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Reading.png collée au bord droit aussi sur mobile */
  .reading { margin: 1.5rem 0 0; }
  .reading img { margin-left: auto; }
}