/*
Theme Name: Thème tel
Theme URI: 
Author: AA 
Author URI: 
Description: Thème pour tel rose
Version: 1.0
License: Privée, toute reproduction interdite
License URI: 


*/




html, body {
  
  position:relative;
  width:100%;
  min-height:100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
  
  background: #222222;  
  color:#ffffff;

  text-align:center;
  font-family: 'Open Sans', sans-serif;

}


header, .corps, #menu, footer {

  width:100%;

  padding-left:calc(50% - 600px) !important;
  padding-right:calc(50% - 600px) !important;

  margin:0;
  box-sizing:border-box;

}


a {
  
  text-decoration:none;
  color:inherit;
  font-weight: bold;

}

.rall {

  position:relative;
  clear:both;
  width:100%;
  margin:10px 0;
  padding:0;
  height:0;
  border:0;

}

.rond {

  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;

}

header {

  position:relative;
  padding-top:0;
  padding-bottom:0;

  overflow:hidden;
  height:auto;
  text-align: center !important;
  background:transparent;
  z-index:80;

}


#logo {

  position:relative; 
  display:block;
  max-width: 100%;
  max-height: 600px;
  margin:0 auto;
  padding:0;
 
}


#logo img {

  position:relative;
  max-height:100%;
  max-width: 100%;
  display:block;
  margin:0 auto;
  padding:0;
 
}



#menu {

  position:relative;
  list-style: none;
  padding-top:0;
  padding-bottom:0;
  height : 50px;
  line-height:50px;

  font-size:14px;
  text-align: center;
  font-weight:bold;
  font-style: italic;
  text-transform: uppercase;
 

}


#menu li {

  position:relative;
  display:inline-block;
  width:auto;
  padding:0;
  margin:0 22px;
 
}


#menu li a {

  position:relative;
  display:block; 

}

#menu li:hover {

  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);

}

#menu li a img, #menu li a svg {

  position:relative;
  float:left;
  display:block;
  margin:10px 10px 0 0;
  width:auto;
  height:30px;
  
}


#menu li ul {

  position:absolute;
  width:calc(100% + 100px);
  top:100%;
  left:-50px;
  margin:0;
  padding:0;
  overflow:hidden;
  list-style:none;
  z-index:89;

  max-height:0;
  background-color:rgba(0,0,0, 0.5);
    
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;

}



#menu li:hover ul {

  max-height:666px;
  
}



#menu li ul li{

  position:relative;
  width:calc(100% - 20px);
  padding:10px;
  margin:0;
  float:none;

  line-height:20px;
  font-size:12px;
  color:#ffffff;
}
 
 


 




#menu li ul li a img, #menu li ul li a svg {

  display:inline-block !important;
  float:none;

  margin:0 10px 0 0; 
  
}




#btn_menu_mobile {

  display:none;

  position:absolute;
  top:0;
  right:2.5%;
  width:50px;
  height:50px;
  line-height:50px;
  font-size:50px;
  cursor: pointer;

}


#menu_mobile {

  position:fixed;
  z-index:98;
  left:-100%;
  width:calc(90% - 60px);
  height:calc(100% - 100px);
  margin:0;
  padding:50px 30px;
  top:0;
  overflow:hidden;

  list-style:none;
  text-align:left;

}

#menu_mobile #fermer_menu{

  position:relative;
  width:100%;
  height:30px;
  line-height:30px;
  font-size:20px;
  font-weight: bold;
  margin:0;
  padding:0;
  cursor: pointer;


}


#menu_mobile #fermer_menu .dashicons{

  height:30px;
  line-height:30px;
  font-size:20px;
  margin:0 10px 0 0;
  padding:0;

}


#menu_mobile li {

  margin:10px 0 0 0;
  padding:10px 0;
  width:100%;
  line-height:20px; 
}


#menu_mobile ul {

  margin:0 0 20px 5%;
  padding:0;
  list-style:none;
  width:95%; 

}


#menu_mobile li a{
  
  display:block;
  text-decoration: none;

}

#menu_mobile li img, #menu_mobile li svg {
  
  position:relative;
  display:block;
  text-decoration: none;
  float:left;
  margin:0 10px 0 0;
  width:20px;
  height:20px;

}


 




#image_numero {

  position: relative;
  display: block;
  margin:20px auto;
  padding:0;

  width:auto;
  max-width: 100% ;
  height:auto;

}


#bandeau_numero {

  position: relative;
  width:600px;
  max-width: 100%;
  margin:22px auto;
  padding:0;
  display: block;
  overflow:hidden;

  border-width: 1px;
  border-style: solid;

  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;

}


#bandeau_numero div:nth-child(1n){

  position: relative;
  display: block;
  width:calc(50% - 20px);
  max-width:calc(50% - 20px);
  float:left;
  margin:0;
  padding:10px;
  overflow:hidden;

  line-height: 60px;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 1px; 

}


#bandeau_numero div:nth-child(2n){

  position: absolute;
  overflow: visible;
  top:calc(50% - 15px);
  left:50%;
  padding:0;
  margin:0;
  z-index:39;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0 15px 20px;
  border-color: transparent transparent transparent #ffffff;

}


#bandeau_numero div:nth-child(3n){

  position: relative;
  display: block;
  width:calc(50% - 50px);
  max-width:calc(50% - 50px);
  float:right;
  margin:0;
  padding:10px 25px;
  overflow:hidden;

}

#bandeau_numero div:nth-child(3n) p{

  display: block;
  width:100%;
  line-height: 30px !important;
  font-size: 14px;
  font-weight: bold;
  margin:0;
  padding:0;

}



.corps {

  position:relative;
  padding-top:40px;
  padding-bottom:50px;
  z-index:20;
   
}


.corps .titre {
  
  position:relative;
  font-style: italic;
  width:96%;
  margin:0 auto 50px auto;
  line-height: 40px;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;

}


.corps .titre img, .corps .titre svg {
  
  position:relative;
  display:inline-block;
  margin:0 10px 0 0;
  width:auto;
  height:25px;

} 


.corps .titre .dashicons {
  
  position:relative;
  display:inline-block;
  margin:0 10px 0 0;
  width:auto;
  line-height: inherit;
  font-size: inherit;

} 

.souligne:after {
    
  position:absolute;
  display: block;
  content: '';
  width:250px;
  bottom:-15px;
  left:calc(50% - 125px);
  height:5px;

  background-color:rgba(0,0,0,0.25);  
  
  
}



.accueil .texte, .archive .texte {

  position:relative;
  max-height:100px;
  overflow:hidden;
  width:100%;
  max-width: 100%;
  margin:44px auto 22px auto;
  padding:0;

  line-height: 25px;
  font-size: 14px;

  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;

}


.accueil .texte p , .archive .texte p {

  position:relative;
  display:block;
  width:100%;
  margin:0 0 25px 0;
  padding:0;

}


.texte.agrandi {

  max-height: 1111px !important;

}


.agrandir_texte {

  position:relative;
  display:inline-block;
  width:auto;
  margin:10px 0;
  padding:0 20px;
  line-height: 30px;

  text-align:center;
  cursor:pointer;
  font-style:italic;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing: 1px;
  font-size:12px;

  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  

}

.agrandir_texte .dashicons {

  position:relative;
  display:inline-block;
  line-height:30px;
  height:30px;

  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}


.agrandir_texte .dashicons.tourner {

  transform: rotate(180deg);

}


.posts {

  position:relative;
  width:100%;
  margin:20px auto;
  padding:0;
  list-style:none;
  overflow:hidden; 
  
  display: grid;
  grid-template-columns: 18% 18% 18% 18% 18%;
  grid-column-gap: 2.5%; 

}


.posts li {

  position:relative;
  width:100%;
  margin:0 0 33px 0;
  padding:0;
  overflow: hidden;
 
  background: rgba(0, 0, 0, 0.05);
  
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;

  -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.25); 
  box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.25);

}


.posts li .thumb {

  position:relative;
  display:block;
  overflow:hidden;
  width:100%;
  margin:0 0 10px 0;
  padding:0;
  cursor:pointer;

}


.posts li .thumb:after{

  position:relative;
  padding: 133.33% 0% 0% 0%;  
  margin:0;
  display:block;
  content:'';
  overflow:hidden;

}


.posts li .thumb img, 
.posts li .thumb .defaut {

  position:absolute;
  display:block;
  width:100%;
  height:100%;
  top:0;
  left:0;
  
    
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;

  background-color:rgba(0, 0, 0, 0.22);

}

.posts li .thumb .defaut .dashicons {

  position: absolute;
  top:calc(50% - 20px);
  left:calc(50% - 20px);
  height:40px;
  line-height: 40px;
  font-size:22px;
  width:40px;

  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}


.posts li:hover .thumb .defaut .dashicons {
  
  top:55%;
  opacity:0;
  
}


.posts li:hover .thumb img {

  transform: scale(1.2);
  
}

.posts li .thumb .statut {

  position: absolute;
  display: block;
  top:5px;
  left:5px;
  padding:2px 12px;

  line-height: 22px;
  font-size: 13px;
 
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.posts li .thumb .statut.vert {

  background-color:#00FF9B;
  color:#222222;

}


.posts li .thumb .statut.orange {

  background-color:#FFC900; 
  color:#222222;

}



.posts li .thumb .masque {

  position:absolute;
  display:block;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-color:rgba(0, 0, 0, 0.5);
  opacity:0;
      
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  
}


.posts li:hover .thumb .masque {

  opacity: 1;
  
}


.posts li .thumb .masque .dashicons {

  position:absolute;
  display:block;
  width:20px;
  height:20px;
  top:55%;
  left:calc(50% - 10px);

  line-height:20px;
  font-size:20px;
  color:#ffffff;

  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  
}

.posts li:hover .thumb .masque .dashicons {

  top:calc(50% - 10px);
  
}


.posts li h3 {

  position:relative;
  display:block;
  width:90%;
  margin:0 auto 5px auto;
  padding:0;
  min-height:20px;
  max-height:20px;
  line-height:20px;
  overflow:hidden;

  font-size:14px;
  text-transform: uppercase;
  font-style: italic;

}


.posts li p {

  position:relative;
  display:block;
  width:90%;
  margin:0 auto 15px auto;
  padding:0;
  min-height:20px;
  max-height:20px;
  line-height:20px;
  overflow:hidden;

  font-size: 12px;

}


.posts li .bouton {

  position:relative;
  display:inline-block;
  width:calc(95% - 20px);
  margin:5px 0;
  padding:2px 10px;

  line-height:30px;
  font-size:16px;
  font-weight: bold;
  cursor:pointer;

  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;

}




.posts li .bouton .dashicons {

  position:relative;
  display:inline-block;
  line-height:30px !important;
  font-size: 12px !important;
  margin-top:-1px;
  width:0;
  overflow:hidden;
    
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;

}


.posts li .bouton:hover .dashicons {

  width:20px;

}


.corps.single {

  display: grid;
  grid-template-columns: 25% 70%;
  grid-column-gap: 5%;

}

.single .image {

  position:relative;
  width:100%;

}

.single .image img{

  position:relative;
  width:100%;
  height:auto;
  margin:0 0 20px 0;
  padding:0;
  
}

.single .image .bouton{

  position:relative;
  display:block;
  width:calc( 100% - 20px );
  margin:0 0 20px 0;
  padding:5px 10px;

  line-height: 30px;
  cursor:pointer;

  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.single .image .bouton .dashicons {

  line-height: inherit;
  font-size:14px;
}

.single .cadre  {

  position:relative;
  margin:0;
  padding:0;

  line-height: 34px;
  font-size: 16px;
  text-align: left;

 
}

.single .cadre h1, 
.single .cadre h2 {

  position:relative;
  width:100%;
  margin:0;
  padding:0;

  line-height: 30px;
  font-size:24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-style: italic;
  
 
} 

.single .cadre h2 {

  margin:55px 0 11px 0;

}

.single .cadre .details{

  position:relative;
  width:calc( 100% - 22px );
  margin:25px 0;
  padding:0 0 0 20px;

  border-width:0 0 0 2px;
  border-style:solid;
  
}


.single .cadre .details p{

  position:relative;
  display:block;
  width:100%;
  margin:0 0 4px 0;
  padding:0;
  
  line-height:30px;
  font-size:14px;
  
}


.single .cadre .details p .dashicons {

  position:relative;
  display: inline-block;
  line-height:inherit;
  margin:0 5px 0 0;
  font-size:20px;

}


.single .cadre .details p a {

  text-decoration: underline;


}

.single .cadre .posts{
  
  display: grid;
  grid-template-columns: 22% 22% 22% 22%;
  grid-column-gap: 4%; 

  text-align: center;

}

.single img  {

  position:relative;
  display:block;
  max-width: 100% !important;
  height:auto !important;
 
}

 



.page {

  line-height: 34px;
  font-size: 16px;
  

}


.popup {

  display: none;
  position: fixed;
  z-index: 99;
  width:600px;
  padding:20px 50px 50px 50px;
  max-width: calc( 90% - 66px );
  max-height: calc( 90% - 66px );
  box-sizing: border-box;
  height: auto;
  overflow: auto;
  left:calc( 50% - 300px );
  border-width: 3px;
  border-style:solid;

  background-color: inherit;


  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}



.popup h5 {

  position: relative;
  display: block;
  width:calc( 100% - 20px );
  max-width:calc( 100% - 20px );
  margin:0 10px 10px 10px;
  padding:0 10px;
  
  text-transform: uppercase;
  line-height: 20px;
  font-size: 16px;

}


.popup span.fermer {

  position: absolute;
  display: block;
  z-index: 99;
  top:0;
  right:0;
  width:30px;
  height:30px;
  padding:5px; 
  overflow: none;
  cursor:pointer;

}

.popup p.fermer {

  position: relative;
  display: block;
  z-index: 99;
  width:auto;
  line-height: 14px;
  font-size: 12px;
  font-style:italic;
  cursor:pointer;
  text-align: left;

}

footer {

  position:relative;
  padding-top:50px;
  padding-bottom:10px;
  
}


footer aside{

  position:relative;
  margin:0 0 30px 0;
  padding:0;
  
}

footer aside h4 {

  position:relative;
  margin:0 0 10px 0;
  padding:0;
  
}


 
#masque {

  display: none;
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:95;
  background: rgba(0, 0, 0, 0.88);
}








@media all and (min-width:0px) and (max-width:1200px) {

  header, .corps, #menu, footer {

    width:95%;
    padding-left:2.5%;
    padding-right:2.5%;

  }


  #menu li {
    
    display:none;
  
  }


  #btn_menu_mobile {

    display:block;
  
  }

  .corps .titre {

    line-height: 22px;
    font-size: 18px;

  }

  
.posts li .bouton .dashicons { 
  width:20px;
}


  #bandeau_numero div:nth-child(1n){
    
    width:calc(100% - 20px);
    max-width:calc(100% - 20px);
    float:none;
  
  }
  
  
  #bandeau_numero div:nth-child(2n){


  position: absolute;
  overflow: visible;
  top:80px;
  left:calc(50% - 15px);
  padding:0;
  margin:0;
  z-index:39;
  width: 0;
  height: 0;
  border-style: solid; 
    border-width: 20px 15px 0 15px;
    border-color: #ffffff transparent transparent transparent !important;
 
    
  
  }
  
  
  #bandeau_numero div:nth-child(3n){
  
    position: relative;
    display: block;
    width:calc(100% - 20px);
    max-width:calc(100% - 20px);
    float:none;
    padding:20px 10px 10px 10px;
  
  }
  
  #bandeau_numero div:nth-child(3n) p{
  
    display: block;
    width:100%;
    line-height: 20px !important;
    font-size: 14px;
    font-weight: bold;
    margin:0;
    padding:0;
  
  }
  
  
  .popup {
    
    width:90%;
    max-width: 90%;
    left:5%;

}


}


@media all and (min-width:0px) and (max-width:900px) {
  
  .corps.single {
    
    grid-template-columns: 100%;
    grid-column-gap: 0%;
  
  }


.single .image {

  margin-bottom: 22px; 

}

.single .cadre {

  text-align: center !important;

}


.single .cadre .details {

  border-width: 1px 0 1px 0;
  padding:11px 0;
  
}


.single .cadre .posts{
  
  grid-template-columns: 48% 48%;

}

}



@media all and (min-width:900px) and (max-width:1200px) {

  .posts {

    display: grid;
    grid-template-columns: 22% 22% 22% 22%;
    grid-column-gap: 4%; 
  
  }


}




@media all and (min-width:700px) and (max-width:900px) {

  .posts {

    display: grid;
    grid-template-columns: 30% 30% 30%;
    grid-column-gap: 5%; 
  
  }


}



@media all and (min-width:0px) and (max-width:700px) {

  .posts {

    display: grid;
    grid-template-columns: 100%;
    grid-column-gap: 0; 
  
  }

}
 






@-webkit-keyframes clignote /* Safari and Chrome */ {
    
  from {
      
      -webkit-transform:  scale(0.95);
      -o-transform:  scale(0.95);
      transform:  scale(0.95);

  }

  50% {

      -webkit-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);

  }

  to {
      
      -webkit-transform:  scale(0.95);
      -o-transform:  scale(0.95);
      transform:  scale(0.95);
  }

}

@keyframes clignote {

  from {
      
      -ms-transform:  scale(0.95);
      -moz-transform: scale(0.95);
      -webkit-transform: scale(0.95);
      -o-transform:  scale(0.95);
      transform: scale(0.95);
  
  }

  50% {

      -ms-transform: scale(1);
      -moz-transform: scale(1);
      -webkit-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
       

  }

  to {
      
      -ms-transform: scale(0.95);
      -moz-transform: scale(0.95);
      -webkit-transform: scale(0.95);
      -o-transform: scale(0.95);
      transform: scale(0.95);
  
  }

}


.clignote {

  -webkit-animation: clignote 2000ms infinite ease-in-out  ;
  -moz-animation: clignote 2000ms infinite ease-in-out  ;
  -ms-animation: clignote 2000ms infinite ease-in-out  ;
  -o-animation: clignote 2000ms infinite ease-in-out  ;
  animation: clignote 2000ms infinite ease-in-out  ;


}