/* CSS Document 
Cyan :      #00b2ff
Magenta :   #b800c7
Jaune :     #ffba00

Gris foncé : #1f1f1f
Gris clair : #c7c7c7
*/

@font-face {
    font-family:"poppins_regular";
    src: url('fonts/Poppins-Regular.ttf');
}

@font-face {
    font-family:"poppins_italic";
    src: url('fonts/Poppins-LightItalic.ttf');
}

@font-face {
    font-family:"poppins_bold";
    src: url('fonts/Poppins-Bold.ttf');
}

*{box-sizing:border-box;}

body {
	margin:0px;
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color:#c7c7c7;
	}

#div_login{
    width:400px;
    margin:auto;
    padding:30px;
    background-color:#1f1f1f;
    text-align:center;
    font-family:"poppins_regular", Arial, Helvetica, sans-serif;
    color:#ffffff;
}

#div_login img{
    width:100%;  
}

#div_login input[type=text], #div_login input[type=password]{
    padding:5px;
    margin:5px;
    text-align:center;
    font-size:20px;
    font-weight: bold;;
}

#div_login input[type=submit]{
    padding:10px 20px;
    text-align:center;
    font-size:20px;
    font-weight: bold;
}

.erreur{
    display:block;
    width:100%;
    margin:20px auto;
    color:#990000;
    font-weight:bold;
    text-align:center;
}

#barre{
    width:100%;
    min-height:70px;
    overflow: hidden;
    background-color:#000000;
    color:#ffffff;
    z-index:10;
    position: fixed;
}

#barre_menu{
    height:70px;
    width:70px;
    float:left;
}

#barre_menu:hover{
    background-color:#1f1f1f;
}

#barre_menu img{
    height:100%;
}

#img_barre_menu{
    position: relative;
    -webkit-animation-duration: 1s;
    -webkit-animation-name: hamburger;
    animation-duration: 1s;
    animation-name: hamburger;
}

@keyframes hamburger {
    from {
      top:-100px;
    }
    to {
        top:0px;
         }
  }

#welc{
    position: relative;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-name: welc_span;
    animation-duration: 0.7s;
    animation-name: welc_span;}

@keyframes welc_span {
        from {
        top:-20px;
        opacity: 0;
        }
        to {
        top:0px;
        opacity: 1;
             }
      }   

#barre_date{
    float:left;
    line-height:70px;
    font-family:"poppins_regular", Arial, Helvetica, sans-serif;
    font-size:2vw;
    padding: 0 20px;
    width: calc(100% - 550px);
    }

#barre_rech{
    float:left;
    line-height:70px;
    height:70px;
    text-align:center;
    }

#barre_rech input[type=text]{
    padding:1vh;
    width:12vw;
    height:4vh;
    display:block;
    margin-top:15px;
}

#barre_liens{
    float:left;
    line-height:70px;
    width:220px;
    height:70px;
    text-align:right;
    }

#barre_liens img{
    width:auto;
    height:100%;
}

#div_menu{
    display:none;
    z-index:20;
    width:100%;
    background-color:#1f1f1f;
    clear:both;
}

#content{
    top:70px;
    width:100%;
    height:100%;
    z-index:1;
    position:relative;
    overflow:visible;
}

#main_logo{
    width:90%;
    max-width:1200px;
    text-align:left;
    margin:auto;
    
    }

 /* Idem waterfall mais mais permet de ne pas avoir de souci entre le float et le javascript*/
  
 .wrapper{
    width:90%;
    max-width:1200px;
    padding:0px;
    max-height:100%;
    margin:1% auto;
 }   

#waterfall{
    width:90%;
    max-width:1200px;
    padding:0px;
    max-height:100%;
    margin:0 auto 10%;
    }

#filtre_welcome{
    width:98%;
    margin:0;
    background-color: #aaa;
    padding:.5%;
    font-size: 1.2rem;
    }

#filtre_welcome select{
    font-size: 1.1rem;
    }

#publier_statut{
    width: 48%;
    margin:2% 2% 0 0;
    padding:0px;
    text-align:justify;
    float:left;
    -webkit-animation: anim .5s ease-in-out;
    animation: anim .5s ease-in-out;
    border:2px solid black;
    background-color:#000;
   }

#publier_statut img{
    width: 100px;
    height:100px;
    float:left;  
   }

#publier_statut textarea{
    background-color:#000;
    border:0px;
    width: calc(100% - 100px);
    height:70px;
    color:#fff;
    padding:2%;
    margin:0;
    font-size: 1rem;
   }

#publier_statut textarea:focus{
    outline: none !important;
}

#publier_statut textarea::placeholder{
    color:#fff;
    font-size: 1rem;   
}

#publier_statut input[type=submit]{
    display:block;
    height:25px;
    width: calc(100% - 110px);
    margin:auto auto;
    background-color:#000;
    border:none;
    color:#666;
    font-size:1rem;
    border:1px solid #666;
}

#publier_statut input[type=submit]:hover{
    border:1px solid #ccc;
    cursor: pointer;
    background-color:#ccc;
    color:#000;
}

#waterfall article{
    width: 48%;
    margin:2% 2% 0 0;
    text-align:justify;
    float:left;
    -webkit-animation: anim .5s ease-in-out;
    animation: anim .5s ease-in-out;
    }

#waterfall article .Instalive, #waterfall article .Collaborateurs, #waterfall article .Recrutement, #waterfall article .Actus, #waterfall article .Photos, #waterfall article .Telechargements, #waterfall article .Statut, #waterfall article .Article, #waterfall article .Video {
  width:100%;
  background-color:#fff;
  float:left;
  padding:4% 4% 1% 4%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.fil_commenter{
    width:100%;
    background-color:#fff;
    float:left;
    padding:1% 4% 4% 4%;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }

  .fil_commenter form{
      display:inline-block;
      width:80%;
      margin-right:5%
  }

  .fil_commenter img{
    height:30px;
}

  .fil_commenter input[type=text] {
    padding:1%;
    width:100%;
    font-size:0.8rem;
    background-color:#c7c7c7;
    border:1px solid #fff;
}

.fil_commenter input[type=text]:focus{
    outline: none !important;
}

.fil_commenter input[type=text]::placeholder{
    color:#000;  
}

.fil_commenter input:hover{
    background-color:#c7c7c7;
    border:1px solid #1f1f1f;
}

  .fil_commentaires, .fil_likes{
    width:100%;
    background-color:#aaa;
    float:left;
    padding:2%;
  }

  .fil_commentaires img, .fil_likes img {
    float:left;
    height:40px;
    border-radius:20px;
    margin-right:10px;
}

.fil_likes img:first-of-type{
    border-radius:0;
}

.fil_likes img {
    margin:1%;
}

.fil_commentaires p{
    width:100%;
    float:left;
    margin:10px 0 0 0;
    font-size:0.8rem;
    line-height:1rem;
}

#waterfall article:hover{
    filter:drop-shadow(5px 5px 20px black)
}

@-webkit-keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

article h2{
    font-family:"poppins_bold",Arial, Helvetica, sans-serif;
    font-size:1.5rem;
    margin:0px 0px 2% 0px ;
    padding:0px;
    text-transform: uppercase;
    }

article h4{
    font-family:"poppins_regular",Arial, Helvetica, sans-serif;
    font-size:1.1rem;
    margin:0; 
    }

article .lien_fil{
    display:block;
    font-weight:bold;
    text-align:right;
    color:#000;
    text-decoration:none;
    font-size: 1rem;
    margin-top:2%;
}

article .lien_fil:hover{
    text-decoration:underline;
    }

article p{
    font-size:0.9rem;
    line-height:1.5rem;
    margin:0px;
    }

#waterfall article .anniv{
  width:100%;
  background-color:#fff;
  float:left;
  padding:4%;
  border-radius: 20px;
}

.anniv img{
    width: 100px; 
    margin-right:2%;
    border-radius:50px;
    float:left;
   }

.anniv p{
    float:left;
    line-height:1rem;
    padding-top:2rem;
   }

.Instalive img, .Actus img, .Photos img, .Article img, .Video img{
    width: 100%; 
    height:250px;
    object-fit: cover; 
    margin-bottom:2%;
}

.Telechargements img{
    width: 50px; 
    float:left;
    margin-right:2%;
   }

.Statut img{
    width: 100px; 
    float:left;
    margin-right:10px;
    margin-bottom:10px;
    border-radius:20px;
}

.Collaborateurs img{
    width:50%; 
    float:left;
    margin-bottom:2%;
    }

.Recrutement img{
    width: 100%; 
    margin-bottom:2%;
}

q {
    quotes: '"' '"' "'" "'";
  }
  q::before {
      content: open-quote;
  }
  q::after {
      content: close-quote;
  }

H1{
    font-family:"poppins_regular",Arial, Helvetica, sans-serif;
    font-size:40px;
    margin:0;
    display:block;
    }

h2{
    margin: auto;
}

h1.navette-form {
  display: flex;
    justify-content: space-between;
    align-items: baseline;
    line-height: 40px;
}

h1.navette-form div span {
    position: relative;
    font-size: 1.5rem;
    font-style: italic;
    padding-left: 25px;
}

.navette-form-direction {
    font-size: 1.2rem;
    display: block;
}

.navette-form-direction i span {
    color: #8f8f8f;
    font-size: 0.9rem;
}


.navette-form-notice {
    font-size: 0.8rem;
    font-style: italic;
    color: #555;
    padding: 0;
    list-style: none;
}

.navette-form-notice li {
    margin-bottom: 10px;
}

.navette-form-direction sup { font-size: 12px; }

h1.navette-form > span { flex: 1 0 auto; }

#sens-trajet-aller,
#sens-trajet-retour {
    flex: 0 1 auto;
    margin-left: 6%;
    display: flex;
    flex-direction: column;
}

#sens-trajet-aller button,
#sens-trajet-retour button {
    cursor: pointer;
    border-radius: 5px;
    padding: 5px 10px;
    color: white;
    background-color: white;
    font-style: italic;
    padding-left: 35px;
}

#sens-trajet-aller span,
#sens-trajet-retour button,
#demandes-annulables .aller .demande-date i::before { color: #05c31d; }
#sens-trajet-retour span,
#sens-trajet-aller button,
#demandes-annulables .retour .demande-date i::before{ color: #f32222; }

#sens-trajet-aller button { border: 1px solid #f32222; }
#sens-trajet-retour button { border: 1px solid #05c31d; }

#sens-trajet-retour button:hover,
#sens-trajet-aller button:hover { color: white; }

#sens-trajet-aller button:hover { background-color:  #f32222; }
#sens-trajet-retour button:hover { background-color: #05c31d; }

#sens-trajet-aller span::before,
#sens-trajet-retour span::before,
#sens-trajet-aller button::before,
#sens-trajet-retour button::before,
#demandes-annulables .aller .demande-date i::before,
#demandes-annulables .retour .demande-date i::before {
    content: "\27A4";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    font-style: normal;
}

#sens-trajet-aller button::before,
#sens-trajet-retour button::before {
    left: 15px;
    top: 12px;
    font-size: 0.8rem;
}

#sens-trajet-retour button::before { top: 10px; }

#sens-trajet-retour > span::before,
#demandes-annulables .retour .demande-date i::before { color: #f32222; }

#sens-trajet-aller button,
#sens-trajet-retour button { position: relative; }

#sens-trajet-retour > span::before,
#sens-trajet-aller button::before,
#demandes-annulables .retour .demande-date i::before {
    transform: translate(0,-50%) rotateZ(180deg);
}

.evidence{
    font-size: 13px;
}
@keyframes slidein {
    from {
      top:-20px;
      color:#c7c7c7;
    }
  
    to {
        top:0px;
        color:#000000;
    }
  }

  .liens{
    display:inline-block;
    height:50px;  
    min-width:18%;
    margin:10px; 
    text-decoration:none;
    color:#ffffff;
    
    }

.liens img{
    display:inline-block;
    height:50px;  
    background-color:#ffffff;
    }
     
.liens p{
    display:inline-block;
    line-height:1px;
    vertical-align: top;
    margin-left:10px;
    font-family:"poppins_italic", Arial, Helvetica, sans-serif;
    font-size:1.2vw;
}

#menu_liens_mobile{display:none;}
    
.mobile{
    display:none;
    }
    
    .defaut{
        border-left:15px solid #00b2ff;
        }
    
    .specifique{
        border-left:15px solid #b800c7;
        }
        
    .admin{
        border-left:15px solid #ffba00;
        }
    
.liens:hover, .admin:hover, .defaut:hover, .specifique:hover{
    background-color: #c7c7c7;
    color:#000000;
    font-family: "poppins_bold", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    }
    
#rech_annu h1{
    color:#fff;
    }

#rech_annu input, #rech_annu select, .autocomplete input{
    padding:5%;
    margin:5% auto;
    width:100%;
    float:left;
}

.annuaire, #rech_annu{
    padding:2%;
    width:23%;
    min-height:480px;
    background-color: #fff;
    float:left;
    text-align:center;
    margin:0 2% 2% 0 ;
    font-family: calibri, Arial, Helvetica, sans-serif;
    font-size:1.1rem;
    border-radius:20px;
    }

.annuaire input[type=image]:hover{
    border:0px;
    background-color: none;
    border-radius : 20px;
}

#rech_annu{
    background-color:#1f1f1f;
    }

.annuaire:hover{
    filter:drop-shadow(5px 5px 20px black)
}

.annuaire img:nth-child(1){
    width:100%;
    border-radius:20%;
    }
  
.ann_nom{
    font-family: "poppins_bold", Arial, Helvetica, sans-serif;
    font-size:1.2rem;
    line-height:18px;
    height:40px;
    display:block;
    margin-top:20px;
    }

.ann_poste{
    display:block;
    }
    
    /*.autocomplete {
        the container must be positioned relative:
        position: relative;
        display: inline-block;
     }*/
    
      .autocomplete-items {
        position: absolute;
        border: 1px solid #d4d4d4;
        border-bottom: none;
        border-top: none;
        z-index: 1;
        /*position the autocomplete items to be the same width as the container:
        top: 100%;
        left: 0;
        right: 0;*/
        margin-top:50px;
        width:80%;
        text-align:left;
      }
      .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
        max-width:200px;
      }
      .autocomplete-items div:hover {
        /*when hovering an item:*/
        background-color: #e9e9e9;
      }
      .autocomplete-active {
        /*when navigating through the items using the arrow keys:*/
        background-color: DodgerBlue !important;
        color: #ffffff;
      }

.emploi_txt{
    font-size:1rem; 
    text-align:justify;
    margin-bottom:2%;
       }
    
    .offres_emploi{
    float:left;
    background-color: #ffffff;
    padding:2%;
    width:23%;
    color: #000000;
    margin:0 2% 2% 0 ;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size:1rem;
    border-radius:20px;
    }
    
    .offres_emploi H2{
    font-family: "poppins_bold", Arial, Helvetica, sans-serif;    
    display:inline-block;
    margin:0;
    font-size:1.1rem;
    }

    .offres_emploi:hover{
    filter:drop-shadow(5px 5px 20px black)
    }
    
    .offres_emploi img{
    width:100%;
    height: 8em; 
    object-fit: cover;  
}

#offre{
    width:66%;
    padding:2%;
    max-height:100%;
    margin:5% auto;
    background-color:#ffffff;
    font-size:1rem;
    border-radius: 20px;
    filter:drop-shadow(5px 5px 20px black)
    }

#offre img{
    width:100%;
    }

#offre H2{
    display:block;
    background-color: #1f1f1f;
    color:#ffffff;
    padding:1%;
        }

#offre form{
    width:100%;
    text-align:center;
        }


#offre input[type=submit]{
    padding:1% 2%;
    font-size: 1.5rem;
    border-radius: 10px;    
    background-color:#c7c7c7;
    color:#000000;
    border:1px solid black;
     }
    
#offre input[type=submit]:hover{
    cursor: pointer;
    border:1px solid white;
    background-color:#1f1f1f;
    color:#ffffff;
    }

.mainbloc_100 H2, .mainbloc_66 H2, .mainbloc50 H2{
    font-size: 1.2rem; 
    border-bottom: 2px solid #000000;
    text-transform: uppercase;
    margin:2% 0 0 0;
}

.mainbloc_100{
    width:100%;
    padding:2%;
    min-height:10%;
    max-height:10%;
    overflow: auto;
    margin:2% auto 5%;
    background-color:#ffffff;
    font-size:1rem;
    border-radius: 20px;
    filter:drop-shadow(5px 5px 20px black);
 }

.mainbloc_66{
    width:66%;
    padding:2%;
    min-height:10%;
    max-height:10%;
    overflow: auto;
    margin:2% auto 10%;
    background-color:#ffffff;
    font-size:1rem;
    border-radius: 20px;
    filter:drop-shadow(5px 5px 20px black)
                }

.mainbloc_50{
    width:50%;
    padding:2%;
    min-height:10%;
    max-height:10%;
    overflow: auto;
    margin:2% auto 10%;
    background-color:#ffffff;
    font-size:1rem;
    border-radius: 20px;
    filter:drop-shadow(5px 5px 20px black)
    }

.photo{
    width:100%;
    background-color:#ffffff;
    border-radius: 20px;
    border:10px solid white;
    margin:0;
    }

.photo:hover{      
    filter:drop-shadow(5px 5px 20px black);
        }

#photos_info{
    padding:2%;
    width:100%;    
    background-color: #ffffff;
    border-radius: 20px;
    text-align:center;
    margin-bottom : 2%;
    border:1px solid black;
    }
                
#photos_info span{
    font-family: "poppins_bold",Arial, Helvetica, sans-serif;
    font-size:1.2vw;
    display:block;
    margin-bottom : 1%;
    }

#photos_info p{
    font-size:0.8vw;
    text-align:justify;
    }
                
.photos_comment{
    margin:0 auto;
    width:50%; 
    height:auto;   
    background-color: #1f1f1f;
    color:#ffffff;
    padding:0%;
    border-radius: 0% 0% 20px 20px;
        }

.comment:nth-child(1n){
    width:90%;
    margin:0 auto;
    padding:0;
    text-align:left;
    padding:1% 0;
    }

.comment:nth-child(2n){
    width:90%;
    margin:0 auto;
    padding:0;
    text-align:right;
    padding:1% 0;
    }
 
.comment img{
    height:2rem;
    border-radius: 1rem;
    }

   
.comment p{
    font-size: 12px;
    display:inline-block;
    line-height:0.8rem;
    padding:0 1%;
    vertical-align: top;
    font-size:0.8rem;
    }
       

.photos_commenter{
    margin:0 auto 0 auto;
    width:40%;    
    background-color: #ffffff;
    color:#000000;
    padding:0.5%;
    margin-bottom: 3%;
    border-radius: 0% 0% 20px 20px;
    text-align:center;
    }
    
.photos_select{
    float:left;
    background-color: #ffffff;
    margin:1%;
    padding:2%;
    width:31%;
    height:30vh;
    border-radius:20px;
    color: #000000;
    text-align:center;
    }
                
.photos_select:hover{
    filter:drop-shadow(5px 5px 20px black)
    }
                
.photos_select img{
    width:100%;
    height: 15em; 
    max-height: 75%;
    object-fit: cover; 
    border-radius:20px 20px 0 0;
     }

.photos_select span{
    font-weight:bold;
    font-size:1rem;
    font-family: "poppins_bold", Arial, Helvetica, sans-serif;
    height:3rem;
    }

.dl_titre{
    width:100%;
    margin-top : 3%;
    font-size: 1.5rem; 
    font-family: "poppins_bold", Arial, Helvetica, sans-serif;
    color:#000000;
    text-transform: uppercase;
    border-bottom:2px solid #000000;
           }

.rech_dl{
    width:100%;
    text-align:center;
    clear:both;
    }

#rech_dl select, #rech_dl form{
    padding:0.5rem;
    margin:auto;
    float:left;
        }

.dl_lien {
    display:inline-block;
    border:1px solid black;
    padding:1% 4%;
    margin:1%;
    color:#000;
    font-family:"poppins_bold",Arial, Helvetica, sans-serif;
    font-size:1.2rem;
    text-decoration:none;
    background-color: #ccc;
}

.dl_lien:hover {
    background-color: #fff;
}
 
form[name="dl_filiale"], form[name="dl_type"], form[name="dl_soussection"]{
    width:33%;
    display:inline-block;
}

form[name="dl_filiale"] select, form[name="dl_type"] select, form[name="dl_soussection"] select{
    width:90%;
    border:1px solid black;
    padding:1% 4%;
    margin:2%;
    color:#000;
    font-family:"poppins_bold",Arial, Helvetica, sans-serif;
    font-size:1rem;
}

.telechargement{
    width:100%;
    margin:0% auto;
    padding:1%;
    font-size: 1rem;
    color:#000000;
    display: inline-block;
    border-bottom:1px solid #c7c7c7;
    }

.telechargement img{
    height: 2rem;
    display: inline-block;
    vertical-align: middle;
    margin-right:2%
}

.telechargement span:nth-child(2){
    line-height: 1rem;
    display: inline-block;
    width:58%;
    font-weight:bold;
}

.telechargement span:nth-child(3){
    line-height: 1rem;
    display: inline-block;
    width:30%;
    text-align:center;
}
    
.telechargement:hover{
        background-color:#999;
        color:#fff;
        font-weight:bold;
        }

#sinistre{
    width:50%;
    margin:5% auto;
       }
        
#sinistre td{
     width:25%;
}

#sinistre td:first-child{
    width:25%;
}

#sinistre input,  #sinistre select,  #sinistre textarea{
    padding:3%;
    margin:1%;
    width:100%;
    font-size:1.2rem;
}

#sinistre input[type=date], #sinistre input[type=time] {
    padding:3%;
    margin:1%;
    width:60%;
    font-size:1.2rem;
}

#sinistre input:hover,  #sinistre select:hover,  #sinistre textarea:hover{
    background-color:#c7c7c7;
    border:1px solid #1f1f1f;
}

#sinistre input[type=submit]{
    padding:1% 2%;
    width:50%;
    margin-left:auto ;
    margin-right:auto ;
    display:block;
    font-size: 1.5rem;
    border-radius: 10px;    
    background-color:#c7c7c7;
    color:#000000;
    border:1px solid black;
     }
    
     #sinistre input[type=submit]:hover{
    cursor: pointer;
    border:1px solid white;
    background-color:#1f1f1f;
    color:#ffffff;
    }

    #decl_at{
        width:100%;
        margin:5% auto;
    }
            
    #decl_at td{
         width:70%;
    }
    
    #decl_at td:first-child{
        width:30%;
    }
    
    #decl_at input[type=text],  #decl_at select,  #decl_at textarea{
        padding:1%;
        margin:1%;
        width:50%;
        font-size:1.2rem;
    }
    
    #decl_at input[type=date]{
        padding:1px;
        margin:1%;
        width:20%;
        font-size:1.2rem;
    }
    
#decl_at input[type=time]{
        padding:1px;
        margin:1%;
        width:15%;
        font-size:1.2rem;
    }

    #decl_at input:hover,  #decl_at select:hover,  #decl_at textarea:hover{
        background-color:#c7c7c7;
        border:1px solid #1f1f1f;
    }
    
    #decl_at input[type=submit]{
        padding:1% 2%;
        width:50%;
        margin-left:auto ;
        margin-right:auto ;
        display:block;
        font-size: 1.5rem;
        border-radius: 10px;    
        background-color:#c7c7c7;
        color:#000000;
        border:1px solid black;
         }
        
     #decl_at input[type=submit]:hover{
        cursor: pointer;
        border:1px solid white;
        background-color:#1f1f1f;
        color:#ffffff;
        }

.tiers_uniques textarea{
    width:60%;
    margin:5% auto;
    font-size:1.1rem;
    display:block;
    text-align:center;
    padding:1%;
}

.tiers_uniques button{
    padding:1% 2%;
    width:40%;
    margin-left:auto ;
    margin-right:auto ;
    display:block;
    font-size: 1.2rem;
    border-radius: 10px;    
    background-color:#c7c7c7;
    color:#000000;
    border:1px solid black;
     }
    
.tiers_uniques button:hover{
    cursor: pointer;
    border:1px solid white;
    background-color:#1f1f1f;
    color:#ffffff;
    }

#up_photo input[type=submit], #up_photo2 input[type=submit], #suggestions input[type=submit]{
        padding:1% 2%;
        width:40%;
        margin-left:auto ;
        margin-right:auto ;
        display:block;
        font-size: 1.2rem;
        border-radius: 10px;    
        background-color:#c7c7c7;
        color:#000000;
        border:1px solid black;
         }

#up_photo input[type=submit]:hover, #up_photo2 input[type=submit]:hover, #suggestions input[type=submit]:hover{
        cursor: pointer;
        border:1px solid white;
        background-color:#1f1f1f;
        color:#ffffff;
            }

#up_photo2 input[type=text],  #up_photo2 textarea{
        padding:1%;
        width:100%;
        font-size:1.2rem;
        margin:2% auto;
        display:block;
            }

#up_photo2 input[type=text]:hover,  #up_photo2 textarea:hover{
        background-color:#c7c7c7;
        border:1px solid #1f1f1f;
            }

#up_photo2 img{
        width:100%;
        margin:2% auto;
                    }
                
#suggestions input[type=text],  #suggestions textarea{
        padding:1%;
        width:100%;
        font-size:1.2rem;
        margin:2% auto;
        display:block;
        }

#collab input[type=text], #collab select, #collab input[type=email], #collab input[type=password] {
        display:inline-block;
        padding:3%;
        margin:1% auto;
        width:100%;
        font-size:1rem;
        border:1px solid #999;
        }

#collab input[type=submit]{
        padding:1% 2%;
        width:70%;
        margin:4% auto ;
        display:block;
        font-size: 1.2rem;
        border-radius: 10px;    
        background-color:#c7c7c7;
        color:#000000;
        border:1px solid #000000;    
        }
        
#collab input[type=submit]:hover{
        cursor: pointer;
        border:1px solid white;
        background-color:#1f1f1f;
        color:#ffffff;
        }

#collab img{
    display:block;
    border:1px solid black;
    width:300px;
    margin:10px auto;
}

#collab label{
        display:inline-block;
        width:45%;
        font-size:0.7rem;
        color:#555;
        font-weight: bold;
        margin:.5%;
        text-transform: uppercase;
        }

input:hover, select:hover, textarea:hover{
    background-color:#cccccc;
    border:1px solid black;
        }
.erreur{
    text-align:center;
}

#mega_rech option.value {
    display:none;
}

#mega_rech input[type=search] {
    display:inline-block;
    padding:3%;
    margin:1% auto;
    width:100%;
    font-size:1rem;
    border:1px solid #999;
}

.search_result{
    font-size: 1.5rem;
    font-family:"poppins_bold",Arial, Helvetica, sans-serif;
}

.search_result em{
    color:#555;
    text-decoration:underline;
}

.search_result_a{
    display:block;
    width:100%;
    padding:1%;
    margin:.2% 0;
    color:#000;
    background-color:#c7c7c7;
    text-decoration:none;
    font-weight:bold;
    }

.search_result_a:hover{
    background-color:#1f1f1f;
    color:#fff;
}

.navette_form select, .navette_form textarea, .navette_form input[type=text], .navette_form input[type=email], .navette_form input[type=date], .navette_form input[type=number] {
    display:inline-block;
    padding:12px;
    margin:1% auto;
    width:100%;
    font-size:1rem;
    border:1px solid #999;
    }

.navette_form input[name="plancher"] { border: 3px solid #999; }

#navette666 input[type=date]{
    display:inline-block;
    padding:3%;
    margin:1% auto;
    width:40%;
    font-size:1rem;
    border:1px solid #999;
}

#navette666 input[type=number]{
    display:inline-block;
    padding:3%;
    margin:1% auto;
    width:50%;
    font-size:1rem;
    border:1px solid #999;
}

.navette_form input[type=submit]{
    padding:1% 2%;
    width:70%;
    margin:4% auto ;
    display:block;
    font-size: 1.2rem;
    border-radius: 10px;    
    background-color:#c7c7c7;
    color:#000000;
    border:1px solid #000000;    
    }
    
.navette_form input[type=submit]:hover{
    cursor: pointer;
    border:1px solid white;
    background-color:#1f1f1f;
    color:#ffffff;
    }

.navette_form label{
    display:inline-block;
    width:100%;
    font-size:0.7rem;
    color:#555;
    font-weight: bold;
    margin-bottom:10px;
    text-transform: uppercase;
    }

    .lien_block{
        display:inline-block;
        padding:10px;
        margin:5px;
        background-color:#1f1f1f;
        color:#ffffff;
        border-radius:10px;
        text-decoration:none;
        font-family:"poppins_regular", Arial, Helvetica, sans-serif;
        font-size:.9rem;
        }
    
    .lien_block:hover{
        background-color:#c7c7c7;
        color:#000;
        filter:drop-shadow(2px 2px 5px black);
        }

/*card reverse css romain bousquie 22-06-2023*/
.scene {
    perspective: 3500px;
    max-width: 1200px;
    width: 100%;
}

.scene.split { position: relative; }

/* liste demande annulables */
.scene #demandes-annulables {
    position: absolute;
    max-width: 40%;
    width: 100%;
}

ul#demandes-annulables { padding: 0; }

ul#demandes-annulables li {
    position: relative;
    padding: 0;
    border-radius: 20px;
    filter: drop-shadow(5px 5px 20px black);
    background-color: white;
    padding: 10px;
    list-style: none;
    margin-bottom: 40px;
    top: 0;
    opacity: 1;
    transition: all 0.5s ease-in-out;
}

ul#demandes-annulables li.hidden {
    top: -20px;
    opacity: 0;

}

ul#demandes-annulables i.info {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid grey;
    font-style: normal;
    color: grey;
    font-weight: bold;
    cursor: default;
}

ul#demandes-annulables li .demande-delete {
    position: absolute;
    right: 15px;
    top: 15px;
}

ul#demandes-annulables li .demande-delete img {
    width: 20px;
}

ul#demandes-annulables li > span,
ul#demandes-annulables li > span .demande-valeur {
    display: flex;
    align-items: center;
}

ul#demandes-annulables li > span {
    padding: 3px 9%;
    min-height: 28px;
    justify-content: space-between;
}

ul#demandes-annulables li > span:nth-child(odd) {
    background-color: #f3f3f3;
    border-radius: 5px;
}
ul#demandes-annulables .demande-infos {
    padding: 0 9%;
    margin: 15px 0 5px;
    display: flex;
}

ul#demandes-annulables .demande-infos > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-basis: 100%;
}

ul#demandes-annulables .demande-infos > span:nth-child(2),
ul#demandes-annulables .demande-infos > span:nth-child(3) {
    border-left: 1px solid #999;
}

ul#demandes-annulables .demande-infos .demande-label {
    margin: 0 0 5px;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #999;
}

ul#demandes-annulables .demande-date {
    font-size: 1.2rem;
    font-style: italic;
    background-color: #ededed;
    border-radius: 15px !important;
    padding: 10px 20px 10px 15px;
    margin-bottom: 10px;
    display: inline-flex;
}

ul#demandes-annulables .demande-date span {
    position: relative;
    padding-left: 25px;
}

ul#demandes-annulables .aller .demande-date span i::before { top: 40%; }
ul#demandes-annulables .retour .demande-date span i::before { top: 52%; }

.demande-picto {
    font-size: 1.2rem;
    color: #999;
    margin: 0 10px;
}

ul#demandes-annulables .demande-label {
    display: inline-block;
    font-size: 0.75rem;
    color: #555;
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 10px;
}

ul#demandes-annulables li > span .demande-valeur {
    font-size: 0.9rem;
}

.scene .card {
    flex: 1 0 60%;
    max-width: 600px;
    width: 100%;
    margin-left: 25%;
    margin-right: 25%;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: bottom center;
}

.scene .card.flip-slide { animation: flip 1s ease-in-out, slide 0.5s ease-in-out 1.1s; }
.scene .card.slide { animation: slide 0.5s ease-in-out; }
.scene .card.flip { animation: flip 1s ease-in-out; }

.scene .card.is-flipped {
    transform: rotateY(-180deg);
}

.scene .card.right-side {
    margin-left: 50%;
    margin-right: 0%;
}


@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(-180deg);
    }
}
@keyframes slide {
    0% {
        margin-left: 25%;
        margin-right: 25%;
    }
    100% {
        margin-left: 50%;
        margin-right: 0%;
    }
}


.scene .card__face {
  position: absolute;
  backface-visibility: hidden;
}

.scene .card__face--back {
  transform: rotateY(180deg);
}
#champ_retour {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0 35px;
}

#champ_retour span {
    font-size: 0.7rem;
    color: #555;
    font-weight: bold;
    text-transform: uppercase;
}

#champ_retour input {
    visibility: hidden;
    position: absolute;
}

#champ_retour input + label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #999;
    border-radius: 50%;
    cursor: pointer;
}

#champ_retour input + label::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 11px;
    transform-origin: center;
    transform: translate(-50%,-50%);
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    transition: all ease-in-out 0.2s;
}

#champ_retour input:checked + label::after {
    width: 12px;
    height: 12px;
    background-color: #000;
}

#champ_retour label {
    display: flex;
    align-items: center;
    margin-right: 30px;
    margin-bottom: 0;
    padding-left: 30px;
    position: relative;
}
#champ_retour div {
    display: flex;
    align-items: center;
}