/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*CSS général */
body {
  display : flex;
  flex-direction : row;
  height : 100vh;
  width : 100vw;
  background-color : white;
  color : black;
  font-family : "Courier New";
  justify-content: center;
  text-align : center;
}

/* CSS du Header (titre et menu principal) */
main-header {
  order : 1;
  height : 95%;
  width : 15%;
  text-align : left;
  padding : 10px;
}
details {
 user-select : none; 
}
details a {
  padding-left : 15px;
}
summary {
  display: flex;
  cursor: pointer;
  text-decoration : underline;
}
summary::-webkit-details-marker {
  display: none;
}
#nav_menu ul {
  list-style-type : none;
  padding : 0;
}

/* CSS pour le footer */
main-footer {
  height : 5%;
  width : 100%;
  text-align : center;
  font-size : xx-small;
}

/* CSS général pour la partie centrale du site*/
main {
  order : 2;
  height : 95%;
  width : 85%;
}
a {
  color : black;
}


/* CSS spécifique pour la page Index */
#header_index {
 max-width : 100vw; 
 text-align : left;
}
#nav_accueil details {
  font-size: xx-large; 
  text-decoration-thickness : 2px;
}
#nav_accueil details a {
  padding-left : 30px;
}
#nav_accueil a {
  font-size: xx-large;
  text-decoration-thickness : 2px;
}
#nav_accueil summary {
  text-decoration-thickness : 2px;
}
     
/* CCS pour le caroussel */
.carousel__wrapper {
  position : relative;
  overflow: hidden;
  width : 85%;
  height : 85%;
  padding-top: 10px;
  padding-bottom: 10px;
}
.carousel__wrapper * { /* que signifie l'étoile ???*/
  box-sizing: border-box;
}
.carousel {
  width : 85%;
  height: 85%;
  transform-style : preserve-3d;
  padding : 20px 20px;
}
.carousel img {
  max-width : 100%;
  max-height : 100%;
  object-fit : contain;
}
      
/* CCS pour le blog */
.blog {
  max-width : 100%;
  max-height : 100%;
  justify-content: center;
  text-align : center;
  overflow-y : scroll;
}
.blog_post {
  max-width: 50%;
  margin: 25px auto 25px auto;
  border-style: outset;
  padding: 10px;
}
.blog_post_date {
}
.blog_post_title {
  margin-bottom: 10px;
  font-size: x-large;
}
.blog_post_text {
  text-align : justify;
}
.blog_photo img {
 max-width : 20%;
}

/* CCS pour les publications */
.publication_wrapper {
  max-width : 85vw;
  max-height : 95vh;
  justify-content: center;
  text-align : center;
  overflow-y : scroll;
}
.publication {
  max-width: 50%;
  margin: 25px auto 25px auto;
  padding: 10px;
}
.publication_titre {
  margin-bottom: 10px;
  font-size: x-large;
}
.publication_texte {
  text-align : justify;
}  

/* CCS pour les films */
.film_wrapper {
  max-width : 85vw;
  max-height : 95vh;
  justify-content: center;
  text-align : center;
  overflow-y : scroll;
}
.film_post {
  max-width: 78%;
  margin: auto;
  padding: 10px;
}
.film_post_title {
  margin-bottom: 10px;
  font-size: x-large;
}
.film_post_text {
  text-align : justify;
}

/*CSS DES PAGES PORTFOLIO*/
/*Plusieurs parties : les galleries en grille puis l'affichage grand écran des photos après clic*/
/*PARTIE 1 : CSS pour les galleries photos*/
.gallerie {
  max-width : 82vw;
  max-height : 92vh;
  overflow-y : scroll;  
}
.gallerie_contenu {
  height : 500px;
  width : 500px;
  display: inline-block;
}
/*affiche l'image en carrée contenu dans le div gallerie_contenu*/
.gallerie_contenu img {
  object-fit : cover;
  width: 100%;
  height: 100%;
}
/* affiche l'image en entière et pas juste en carrée*/
.gallerie_contenu img:hover {
  object-fit : contain;
  width: 100%;
  height: 100%;
}

/* masque la description de l'image qui ne sera affichée qu'à ouverture du Modal*/
.description {
  display : none;
}

/* PARTIE 2 : l'affichage grand écran*/
/* The Modal (fonds noir qui s'affiche quand on clique) */
.modal {
  display: none; /* n'est pas affiché par défaut */
  position: fixed; /* fixe par défaut */
  z-index: 1; /* est coincé en haut */
  padding-top: 100px; /* Localisation de la box (rajoute une marge interne au Modal pour afficher le contenu */
  left: 0;
  top: 0;
  width: 100vw; /* s'affiche en full largeur */
  height: 100vh; /* s'affiche en full hauteur */
  overflow: auto; /* affiche le scroll si besoin */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
    
    /* Modal Content (image) */
    .modal-content {
      margin: auto;
      display: block;
      width: 80vw;
      max-height: 70vh;
      max-width: 700px;
      object-fit : contain;
    }
  
    /* Caption of Modal Image */
    #caption {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      text-align: center;
      color: #ccc;
      padding: 10px 0;
      height: 150px;
    }
    
    /* Add Animation */
    .modal-content, #caption {  
      -webkit-animation-name: zoom;
      -webkit-animation-duration: 0.6s;
      animation-name: zoom;
      animation-duration: 0.6s;
    }
    
    @-webkit-keyframes zoom {
      from {transform:scale(0)} 
      to {transform:scale(1)}
    }
    
    @keyframes zoom {
      from {transform:scale(0.1)} 
      to {transform:scale(1)}
    }
    
    /* The Close Button */
    .close {
      position: absolute;
      top: 15px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
    }
    
    .close:hover,
    .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    } 
    
    /* Responsive Columns */
    @media only screen and (max-width: 700px){
      .responsive {
        width: 49.99999%;
        margin: 6px 0;
      }
      .modal-content {
        width: 100%;
      }
    }
  
    @media only screen and (max-width: 500px){
      .responsive {
        width: 100%;
      }
    }
    
    /* Clear Floats */
    .clearfix:after {
      content: "";
      display: table;
      clear: both;
    }