@charset "utf-8";


#main {width: 100%;}
@media (min-width:1900px){
  #main {max-width: 1905px; margin: 0 auto;} /* media imac*/
} 
#fullimg {height: 100%; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center;}
#fullimg {background-image: url(../../media/culture/joya-voyages4.jpg);}
#fullimg img {width: 30%; height: auto; margin-top: 200px;}
#fullimg h1, #fullimg h2 {color: white; font-size: 22px;text-shadow: black 0 0 5px;}
@media (max-width:950px){
  #fullimg img {width: 40%; height: auto; margin-top: 150px;}
  #fullimg h1, #fullimg h2 {font-size: 19px; padding: 0 20px}
  #fullimg h1 {padding-top: 10px}
}

@media (max-width:950px){ /* media tel */
  #carte, #carouselle {height: 350px; width: 100%;}
  .border {position: relative; width: 100%; height: 100%; border-bottom: 1px solid black}
  /* localisation - urgence - carrouselle tactile drag&drop */
}

@media (min-width:950px){ /* media tablette & desktop & imac */
  #carte, #carouselle {width: 50%; height: 400px; background-color: black;}
  .border {position: relative; top: 2px; height: calc(100% - 4px); background-color: white;}
  .bleft {left: 2px; width: calc(100% - 4px);}
  .bright {left: 0px; width: calc(100% - 2px);}
}

/* SECTION CARTE */ 
#carte { float: left;}
/* SECTION CAROUSELLE */ 
#carouselle {float: right; }
#carte .border{background-image: url(../../media/images/home/carte.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; }
    /* ----- Slider */
#slider { overflow: hidden; height: 100%;  float: left; }
#slider ul { position: relative; height: 100%; list-style: none;}
#slider {width:100%;}
#slider ul li { position: relative; display: block; float: left; margin: 0; /* js */padding: 0; width: 160px; height: 100%; 
  background: #ccc;background-repeat: no-repeat; background-position: center; text-align: center; line-height: 400px;}
#slider ul li a{display: block; width: 100%; height: 100%;}

@media (max-width:950px){
  .fleche{width: 70px;}
  #carousansfleche {width: calc(100% - 140px); float: left; height: 100%;}
}

@media (min-width:950px){
  .fleche{width: 40px;}
  #carousansfleche{width: calc(100% - 80px); float: left; height: 100%;}
}

.fleche{ height: 100%; background-color: #dbdbdb; float: left; background-repeat: no-repeat; background-position: center;}
#next{ background-image: url(../../media/images/home/fleche1.png);}
#prev{ background-image: url(../../media/images/home/fleche2.png);}
.fleche:hover{ cursor: pointer;  background-color: #d0d0d0;}
    /* ------ Slider Fin */
/* SECTION MAGAZINE */ 
#magazine { height:530px; width: calc(100% - 4px); padding-bottom: 30px; border-left: 2px solid black;  border-right: 2px solid black; clear: both; overflow: hidden; }
#magazine {display: flex; flex-wrap: wrap;  justify-content: space-between; flex-direction: row;}
#magazine>* {height: 500px;}
#magazine>div:not(.interarticlelong) {margin-top: 30px;}
#magazine article {margin-top: 24px;}
.interarticlelong {margin-top: 0; height:560px !important}
article {width: 280px;}
article * {font-style:italic;}
article>div{width: 240px; height: calc(100% - 22px); margin: 0 auto; overflow: hidden; cursor: pointer;}
article h3 {margin-bottom: 20px; font-size: 32px; line-height: 32px; font-weight: normal;} /* color: #292929; line-height: 16px; */
article:not(:first-of-type) h3 {max-height: 66px; overflow: hidden;}
article p {font-size: 21px; height: 121px; text-overflow: ellipsis; overflow: hidden;}
article:first-of-type p {font-size: 21px; overflow: visible; height: auto;}
article:first-of-type div {cursor: initial; overflow: visible;}
article img {width: 100%; margin: 0 0 10px 0;; height: 160px;}
article .date {width: 100%; height: 90px; margin: 10px 0; font-style: normal; display: flex; justify-content: space-between; }
article .date time {line-height: 90px;  font-size: 110px;}
article .date .interarticle {height: 72px; margin-top: 10px;}
article .date .moisan {line-height: 47px; margin-top: -6px; height: 100%; width: 100px; font-size: 45px; text-align: center;}
article .date * {font-family: "Times New Roman", Times, serif !important;}
.ariane {display: block; margin: 8px auto 0 auto; font-size: 18px; width: 240px; height: 22px; text-align: center; letter-spacing: 1.1;}
article a{color: black; text-decoration: none;}
a:hover{color: #b00000; }
.interarticle {width: 2px; background-color: black; }


#newsletter {background-image: url(../../media/culture/newsletter.jpg); background-position: left; background-repeat: no-repeat; background-size: cover; 
  width: 450px; font-family: 'averia'; color: black; font-size: 22px; letter-spacing: 1px;}
#newsletter p {padding: 0 5px; margin-top: -5px; font-size: 19px; text-align: left;}
#newsletter a {display: block; height: 30px; width: 130px; text-align: center; border-radius: 15px;
    line-height: 30px; background-color: black; color: white; text-decoration: none; margin-top: 10px}
@media (max-width:950px){
.interarticlelong:first-of-type {display: none;}
}
@media (max-width:580px){ /* media mobile */
#magazine {height:1080px; justify-content: center;}
#magazine article { border-bottom: 2px solid black; padding-bottom: 20px;}
#magazine>.interarticle {display: none;}
}
/* SECTION EXTRA */ 

@media (min-width:850px){#extra{ height: 140px;}}
@media (max-width:850px){#extra{ height: 120px;}}

@media (min-width:850px){}
@media (min-width:320px) AND (max-width:850px) {}
@media (max-width:320px){}

@media (max-width:600px) {
  #social, #nous, #jeux  {width:100%;} 
  #nous #nousbull{font-size: 26px;}
  #social>div {top: 2px; left: 0; height: calc(100% - 4px); width: 100%;}
  #nous>div {height: 100%; width: 100%; left:0; top: 0;}
  #jeux>div {height: calc(100% - 4px); width:100%; left: 0; top: 2px;}
}

@media (min-width:600px) AND (max-width:1200px){ #social, #nous{width:50%;} #jeux {width:100%;}
  #nous #nousbull{font-size: 25px;}
  #social>div {top: 2px; left: 2px; height: calc(100% - 2px); width: calc(100% - 2px);}
  #nous>div {height: calc(100% - 2px); width: calc(100% - 4px); left: 2px; top: 2px;}
  #jeux>div {height: calc(100% - 4px); width: calc(100% - 4px); left: 2px; top: 2px;}
}

@media (min-width:600px) AND (max-width:800px){
  #nous #nousbull{font-size: 20px;}
}

@media (min-width:1200px) {
  #social, #nous {width:30%;} #jeux {width:40%;}
  #nous #nousbull{font-size: 24px;}
  #social>div {top: 2px; left: 2px; height: calc(100% - 4px); width: calc(100% - 4px);}
  #nous>div {height: calc(100% - 4px); width: 100%; left: 0; top: 2px;}
  #jeux>div {height: calc(100% - 4px); width: calc(100% - 4px); left: 2px; top: 2px;}
}

@media (min-width:1500px) {
  #nous #nousbull{font-size: 28px;}
}


#jeux, #social, #nous {background-color: black;}


#extra>div {height: 100%; float: left;}


#social>div {background-color: #e6e6e6; display:flex; justify-content: space-around; 
   position: relative; }

#social a {height: 35%; top: 35%; position: relative;}
#social img {height: 100%;}

#jeux>div {background-position: center; background-repeat: no-repeat; background-size: auto 100% ;
  background-color: #fedf22; background-image: url(../../media/culture/quizz.jpg); position: relative;}


#nous>div {background-image: url(../../media/culture/joya-voyage-black.jpg); position: relative;
  background-size: cover ; background-position: center; 
}

#nous>div:hover{cursor: pointer; color: #522307; background-image: url(../../media/culture/joya-voyage-color.jpg);}


#nous #nousbull{ font-family: 'averia', verdana; text-align: center; line-height: 60px;
 height: 60px; width: 70%; border-radius: 30px; border: 1.5px solid black;
  background-color: white; top: calc(50% - 30px); margin: auto; position: relative;}

/* SECTION TOOLS */ 


@media (min-width:950px) {
  #tools>div {width: 50%}
  #preparatifs>div, #trotter>div {left: 2px; top: 0; width: calc(100% - 4px); height: calc(100% - 2px);}
  #bording>div, #outils>div {left: 0; top: 0; width: calc(100% - 2px); height: calc(100% - 2px);}
}
@media (max-width:950px) {
  #tools>div {width: 100%}
  #preparatifs>div, #trotter>div {left: 0; top: 0; width: 100%; height: 100% ;}
  #bording>div, #outils>div {left: 0; top: 2px; width:100%; height: calc(100% - 4px);}
}


#tools{ height: 270px;}
#tools>div {height: 100%; float: left;}
#tools>div>div {position: relative;}

#bording, #preparatifs, #trotter, #outils {background-color: black}

#preparatifs>div {background-image: url(../../media/culture/preparatifs-voyage.jpg); background-size: auto 100% ; background-position: center; background-repeat: no-repeat; background-color: #121212;}

#preparatifs div p {color: #000;  font-size: 27px; position: absolute; bottom: 0; left: 0; 
  text-align: center; padding-right: 20px;
  width: 60%; height: 90px; line-height: 122px; background-size: cover;
  text-shadow: 0 0 5px #141414; 
  background-image: url(../../media/images/home/preparbull.png); 
  background-repeat: no-repeat;}
#preparatifs div p a {color: #000; text-decoration: none; }
#preparatifs div p a:hover {color: #000;}
#preparatifs div p a:visited {color: #000;}

#bording>div {background-image: url(../../media/culture/journal-de-voyage.jpg); 
  background-color: white; background-position: center; background-repeat: no-repeat; }


 {background-color: brown}
#trotter>div {background-color: brown}
#outils>div {background-color: white}






/* media tablette (nobebook) */

@media (min-width:950px) AND (max-width:1300px){

}

/* media desktop */

@media (min-width:1300px) AND (max-width:1900px){

}