/* **************************************MOBILE******************************************* */
body {
  background: #646464;
  background-image: ;
  background-repeat: ; 
  font-family: Trebuchet MS, sans-serif; 
  color: #333333;
  text-align: justify;
  margin: 0px 0px 0px 0px; 
  padding: 0px 0px 0px 0px;
  grid-gap: 0px;
}
a {
  text-decoration: none; /* Les liens ne seront plus soulignés */
  color: #D27C00; /* liens */
}
a:hover {
  background-color: ; 
  color: coral;  /* liens */
}
h1 {
  font-size:200%; 
  margin: 0;
}
h2 {
  font-size:160%; 
  margin: 0;
  display: inline;
  padding:0;
}
h3 {
  font-size:120%; 
  margin: 0;
  display: inline;
  padding:0;
}
h4 {
  display: inline;
}
p {
  font-size:100%;
  line-height:20px;
  margin: 0;
}
.img-responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin-top:10px;
  margin-bottom:10px;
}
.img-responsive2 {
  width: 100%;
  max-width: 1280px;
  height: auto;
}

.rouge {
  color:#ac5858; 
  margin: 0;
}
.bleu {
  font-size:120%;
  color:#4893FF; 
  margin: 0;
}
.bleu-light {
  font-size:100%; 
  color:#4893FF; 
  font-weight: ;
  margin: 0;
}

/* **************************************MOBILE******************************************* */

.main-nav {
  background: #c3daeb;
  margin: 0px; 
  grid-area: nav;
}
.header-bas {
  background: #FAFA2F;
  color: white;
  font-size: 16px;
  text-align: center;
  grid-area: header-bas;
}
.banner {
  background: ;
  margin: ;
  padding: ;
  height: 100%;
  width: 100%;
  grid-area: banner;
}
.maincontent {
  background: #ffffff;
  font-size: 16px;
  margin: ;
  padding: 10px 10px 10px 10px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  grid-area: maincontent;
}
.content-modele {
  background: #ffffff;
  font-size: 16px;
  margin: ;
  padding: 10px 10px 10px 10px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  grid-area: content-modele;
}

.footer1 {
  background: #646464; /* style perso  */
  color: white;
  font-size: 80%;
  text-align: center;
  line-height:30px;
  margin: 0px 0px 0px 0px;
  grid-area: footer1;
}
.footer1 a {
  text-decoration: none; /* Les liens ne seront plus soulignés */
  color: #56B8ED ; /* liens */
}
.footer1 a:hover {
  background-color: ; 
  color: #f9ff7f ;  /* liens */
}

.footer-bas {
  background: #646464; /* style perso  */
  color: white;
  font-size: 80%;
  text-align: center;
  padding: 10px 10px 10px 10px;
  grid-area: footer-bas;
}
.footer-bas a {
  text-decoration: none; /* Les liens ne seront plus soulignés */
  color: #56B8ED ; /* liens */
}
.footer-bas a:hover {
  background-color: ; 
  color: #f9ff7f ;  /* liens */
}
.structure-index {
  background: #e6f6ff;
  display: grid;
  grid-gap: 0px;
  grid-template-areas: 
    "header"
    "nav"
	"header2"
    "banner"
    "maincontent"
    "footer1"
    "footer-bas"
    ;
}
.structure-modele {
  background: #e6f6ff;
  display: grid;
  grid-gap: 0px;
  grid-template-areas: 
    "header"
    "nav"
	"header2"
	"header-bas"
    "content-modele"
    "footer-haut"
    "footer1"
    "footer2"
    "footer3"
    "footer4"
    "footer-bas"
    ;
}

/*---------------- form contact ---------------*/
/* contact */

/* Add a background color and some padding around the form */
.container {
  background-color: #f2f2f2;
  border-radius: 5px;
  max-width: ;
  width: 95%;
  padding: 10px;
  margin: ;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

 /* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 95%; /* Full width */
  padding: 5px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin: 5px; /* Add a top margin */
  margin-top: 3px; /* Add a top margin */
  margin-bottom: 15px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 5px;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
  margin: 5px;
}

 label {
 margin-top: ;
 margin: 5px; /* Add a top margin */
 display:block;
 }
label.inline {
 display:inline;
 margin-right:25px;
 }

  
/* ******************dispo article/photos mobile********************* */
.article-photos {
  display: grid;
  grid-gap: 0px;
  grid-auto-rows: minmax(200px, auto);
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}
.article { 
  background: #ffffff;
  padding: 0px;
}
.photos {
  background: #ffffff;
  padding: 5px 5px 5px 5px;
  margin-top:10px;
  margin-bottom:10px;
  display: none ;
}
.photos-mob {
  display: block ;
}
.video-tab {
  display: none ;
}


/*** Photo enlarge***/
#thumbwrap {
	position:;
}
.thumb span { 
	position:absolute;
	visibility:hidden;
}
.thumb:hover, .thumb:hover span { 
	visibility:visible;
	top:10px;
	right:50px; 
	z-index:1;
}

/* ************************************TABLETTE***************************************** */
@media (min-width: 960px) {

  
    /* ******************dispo article/photos tablette********************* */
  
.photos-mob {
  display: none;
}
.article-photos {
  display: grid;
  grid-gap: 5px;
  grid-auto-rows: minmax(200px, auto);
  grid-template-columns: repeat(3, 1fr);
 }
.article { 
  grid-column: col-start 1 / span 2;
  grid-row: 1;
  padding-right: 5px;
 }
 .photos {
  grid-column: col-start 3 / span 1;
  grid-row: 1;
  display: inline;
 }
 
 .video-tab {
  display: block;
}

.container {
  max-width: 350px;
}

}
/* ********************************PC******************************************* */
@media (min-width: 1280px) {

  .main-nav {
    background: #646464;
    grid-area: nav;
  }
  .nav ul {
    display: flex;
    justify-content: space-between;
  }
    
  .structure-index {
  background: ;
    grid-template-columns: 10% 1fr 10%;
    grid-template-areas: 
      "header header header"
      "nav nav nav"
	  "header2 header2 header2"
      "banner banner banner "
      ". maincontent ."
      "footer1 footer1 footer1 "
      "footer-bas footer-bas footer-bas ";
  }
  
  .maincontent {
  	box-shadow: 0px 6px 5px black;
  }
  
  .structure-modele {
    background: ;
    grid-template-columns: 10% 1fr 10%;
    grid-template-areas: 
      "header header header"
      "nav nav nav"
	  "header2 header2 header2"
      ". content-modele ."
      "footer1 footer1 footer1"
      "footer-bas footer-bas footer-bas";
  }  
    
  .content-modele {
    min-width: 1080px;
  	box-shadow: 0px 6px 5px black;
  }

  /* ******************dispo article/photos pc********************* */
  
.photos-mob {
  display: none;
}
.article-photos {
  display: grid;
  grid-gap: 5px;
  grid-auto-rows: minmax(200px, auto);
  grid-template-columns: repeat(3, 1fr);
 }
.article { 
  grid-column: col-start 1 / span 2;
  grid-row: 1;
 }
 .photos {
  grid-column: col-start 3 / span 1;
  grid-row: 1;
  display: inline;
 }

}

/**************************** icons social *************************************/
/* Style all font awesome icons */
.fa {
  padding: 0px 15px 0px 10px;
  font-size: 10px;
  width: 15px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {

  color: white;
}

/* Instagram */
.fa-instagram {

  color: white;
}
/* Instagram */
.fa-envelope-o {

  color: white;
}
}