/* --- Styles Généraux --- */
body {
  background-image: url(../../../site/fondgris.jpg);
  margin: 0;
  padding: 15px;
  font-family: Arial, Helvetica, sans-serif;
}

.gallerytitle {
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 24px;
  font-weight: bold;
}

.thumbnailtitle {
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 13px;
  text-decoration: none;
  color: #000000;
}

.thumbnail {
  margin-bottom: 5px;
  text-align: center;
}

.thumbnail_title {
  text-align: center;
}

/* Style propre pour le bouton retour */
input[type="button"] {
  padding: 10px 20px;
  font-size: 15px;
  margin-top: 20px;
  cursor: pointer;
}

/* --- ADAPTATION MOBILE ET TABLETTE --- */
/* Si l'écran fait moins de 1200px de large (smartphones et tablettes) */
@media screen and (max-width: 1200px) {
  
  /* On force les grands tableaux extérieurs à prendre toute la largeur sans bloquer */
  table, tbody, tr, td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* On transforme le tableau des vignettes en une liste fluide */
  .index_table {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .index_table tr {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* Chaque vignette devient un bloc indépendant */
  td.index_table_cell {
    display: inline-block !important;
    width: 45% !important; /* Affiche 2 vignettes côte à côte sur mobile */
    min-width: 140px !important;
    max-width: 270px !important;
    margin: 8px 4px !important;
    padding: 0 !important;
    vertical-align: top !important;
  }

  /* On force les images à rétrécir proportionnellement pour ne pas déborder */
  .thumbnail img {
    width: 100% !important;
    height: auto !important;
    max-width: 270px !important;
    border: none !important;
  }

  /* On fait disparaître complètement les cases vides de fin de tableau */
  td.index_table_cell:empty {
    display: none !important;
  }
}