@charset "UTF-8";
/*************************************************************************************************************************************/
/*************************************************************************************************************************************/
/*                                                  monarchie-france/galerie.css                                              	     */
/*                                                  ============================                                                     */
/*************************************************************************************************************************************/
/*************************************************************************************************************************************/
/*** Règles CSS particulières pour l'affichage de la galerie d'images pour la série "La monarchie en France" *************************/
/*** Définitions des variables *******************************************************************************************************/
/* Largeur prescrite de chaque image si largeur viewport est > délimitation définie ci-dessous */
/* Largeur de viewport pour délimiter la manière de déterminer la largeur d'image : 100% ou
* largeur prescrite indiquée ci-dessus
*/
/* Espacement intérieur dans chaque conteneur d'image */
/* Largeur de bordure pour chaque conteneur d'image */
/* Largeur de la barre de défilement du navigateur */
/*** Conteneur individuel d'image ****************************************************************************************************/
.cont-image {
  width: 406px;
  padding: 10px;
  border: solid 1px black;
}

/*** Image individuelle **************************************************************************************************************/
.image {
  width: 384px;
}

/*** Titre pour une image ************************************************************************************************************/
.titre-image {
  width: 384px;
}

/*** Règle média pour usage d'images avec largeur à 100% plutôt que celle prescrite **************************************************/
@media screen and (max-width: 420px) {
  #galerie-images {
    max-width: calc(100vw - 24px); /* Prendre en compte la largeur de la barre de défilement du navigateur */
  }
  .cont-image {
    width: 100%;
  }
  .image {
    width: 100%;
  }
  .titre-image {
    width: 100%;
  }
}