/* @charset "UTF-8"; */
/* document css de index.html */
/* document html & css _Baltazar Design Alsace_ */

/*@font-face {
  font-family: 'Roboto';
  src: url("../font/roboto/roboto-medium.ttf") format("truetype");
}*/

/* HTML */
html{font-family: 'Roboto', sans-serif;}
/* général */
.row{margin-right:0; margin-left:0;}

  /*//////////////:////////*/
 /*//    index pages    //*/
/*//////////////:////////*/

h1{
  padding: 10px 20px;
  font-size: 3rem;
  font-weight: 600;
  position: relative;
  top: 20px;
  color:#000;
  text-align: center;
}

h2{margin-bottom: 15px;font-weight: 400;}

.btnlink {border-radius: 0.5rem !important;
          text-transform: none;
          font-size: 1rem;}
#head .btnlink {font-weight:400;}
#head .btnlink span{font-style: italic;
                    font-weight: bolder;
                    text-transform: uppercase;}

.padding{
  padding-bottom: 15px;
  padding-top: 15px;
}

  /* h-100 = 100% de la taille de la fenetre  */
  /* avec en plus le vh pour prendre tout les support */
.h-100{height: 100vh!important;}

.cover{
  -webkit-background-size: cover!important;
     -moz-background-size: cover!important;
       -o-background-size: cover!important;
          background-size: cover!important;
}

/* icone a gauche */
.logo{
  width: 44px;
  margin-left: 3px;
  margin-right: 10px;
}

/* fleche */
.abcen{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3%;}

/* .img_scroll{width: 40px;} */
.img_scroll2{width: 40px;}
.arrow_down {display: inline-block; color: red; border-style: solid; border-width: 2px; border-radius: 40px; width: 40px; height: 40px;}
.arrow_down p{font-size: 1.5em; line-height: 34px;}
/*.btn-danger {background-image: linear-gradient(to right top, #0071bc, #3a62b0, #5252a1, #61428e, #6b3079, #772871, #811e68, #8a115e, #9d0e5f, #b00c5f, #c20e5d, #d4145a);}*/

/* NAV BARRE */
/*-- icone menu --*/
.btn-menu {
  position: relative;
  left: 10px;
  width: 30px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* survol de la zone on voit qu'il est cliquable */
  cursor: pointer;
  z-index: 999;
}
/* MENU BURGER */
/* bouton a la taille même de son contenant */
.btn-menu__trait {
  background-color: #000;
  height: 2px;
  border-radius: 2px;
  }

.btn-menu--open .btn-menu__trait{
  background-color: #000;
  transition: .3s ease;
}

.btn-menu--open .btn-menu-burger__trait2{ display: none;}

/* en X */
.btn-menu--open .btn-menu-burger__trait1{
  transform: translateX(10px) rotate(45deg) translateY(14px) ;

}

.btn-menu--open .btn-menu-burger__trait3{
  transform: translateX(7.5px) rotate(-45deg) translateY(-11px);
}

/* faire disparaitre le menu */
.menu-principal{
  display: flex;
  position: fixed;
  top:0;
  bottom:0;
  right:0;
  left:0;
  transform: translateX(100%);
  width: 100%;
  opacity: 0;
  transition: transform .4s ease;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.65);
}

/* sticky__nav */
#sticky__nav{z-index: 1000 !important;}

/* title */
.entreprise{
  font-weight: 400;
  margin-top: 9px;
  font-size: x-large;
  line-height: 1;
  color: #000;} important!

.entreprise span {text-transform: uppercase; font-weight: bolder;}

.entreprise em {
  font-style: italic;
  font-weight: 300;
}

.hidden-title2 {font-weight:400;}

/* choix langue */
.btn-group{margin-left: 5px;}

#hidden2 {
  color: #fff;
  list-style-type: none;
  /* display: none !important; */
}

.dropdown-menu img,li img{
  height: 20px;
  display: inline-block;
  margin-right: 5px;
}

.dropdown-menu{
  min-width: 6rem !important;
}

.btn-group .btn, .btn-group button{padding: 8px 12px!important;}

.logo:hover,.btn-menu:hover,li a:hover{opacity: 0.4;}

/* presentation */
#presentation em {text-decoration: underline;}
#presentation q{font-style: italic;}

/* competences */
#competences {
  padding-bottom: 20px;
  background: linear-gradient(#fff, #f5f5f5);
}

#competences button span{text-transform: uppercase;}

.icon{
  font-size: 45px;
  margin: 6px;
  display: inline-block;
}

.icon2{
  width: 55px;
  height: 55px;
  margin: 6px;
  display: inline-block;
}

.icon:hover, .icon2:hover{
    opacity:0.5;
    /* transition  */
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    /* rotation */
    -webkit-transform: scale(0.8) rotate3D(1,1,0,360deg);
    -moz-transform: scale(0.8) rotate3D(1,1,0,360deg);
    -ms-transform: scale(0.8) rotate3D(1,1,0,360deg);
    -o-transform: scale(0.8) rotate3D(1,1,0,360deg);
    transform: scale(0.8) rotate3D(1,1,0,360deg);

}

/* PROJETS */
#projets,#apropos,#questions {
  padding-top: 15px;
  padding-bottom: 15px;
}

/* A PROPOS */
#apropos h3, #questions h3{
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
}

#hidden{
  display: inline-block;
  width: 75%;
}

.box{
  display: flex;
  flex-direction: row;
}

.txtprofil{
  padding-top: 13px;
  text-align: left;
  /* max-width: 750px; */
}

abbr{ font-style: italic;}

/* CONFIANCE */
#confiance {
  padding-bottom: 20px;
  background: linear-gradient(#f5f5f5, #fff);
}

.slider {
    /* background-color: #e0e0e0; */
    padding: 30px;
    text-align: center;
}
.slide {
    transition: transform 0.6s;
    margin: 20px;
    display: flex!important;
    justify-content: center!important;
}

.slide:focus {outline: none;}

.slick-current {transform: scale(1.5);}

#confiance button{z-index: 100!important;}

/* CONTACT */
.subtitle{font-size: 1rem;
          text-transform: uppercase;
          margin-top: 1rem;}

#page_detail_contact a{display: block;
                       color: #000;
                       margin-bottom: 20px;}

#page_detail_contact a:hover{text-decoration: underline;}

#contact a, #page_detail_contact a { width: 180px; height: 40px;
  color: #000;
  margin-bottom: 1px;
  padding: 8px 20px;
  display: inline-block;
  text-transform: uppercase;}

/*#contact .fa-envelope {color: #4caf50;}*/
/*#contact .fa-facebook {color: #3b5998;}*/

#contact a:hover, #page_detail_contact a:hover{background-color: #4caf50; color: #fff;
  border-radius: 6px;}
#contact a.link_fb:hover, #page_detail_contact a.link_fb:hover{background-color: #4267b2; color: #fff;
  border-radius: 6px;}
#contact a.link_insta:hover, #page_detail_contact a.link_insta:hover{background: linear-gradient(45deg, rgba(253,249,29,1) 0%, rgba(253,29,29,1) 16%, rgba(225,48,108,1) 32%, rgba(193,53,132,1) 48%, rgba(131,58,180,1) 64%, rgba(88,81,219,1) 82%, rgba(64,93,230,1) 100%);}
#contact p, #page_detail_contact p{padding: 0 10px;}
#contact em, #page_detail_contact em{font-style: italic;}

.logo_like img {width: 40px;}
.logo_like {font-style: italic;}

/* SECTION footer */
footer {padding: 10px 10px 1px 10px;}

.footer {font-size: 1.25rem;}

   /*////////////////////////////*/
  /*//    direct_ambulance    //*/
 /*////////////////////////////*/

#main_page_detail .container-fluid{padding-right: 0px;}

#page_detail h1, #projets_info h1, #main_detail h1{font-size: 2.25rem; margin-bottom: 25px; font-weight: 400;}
.logo_detail {width: 60px; height: auto; margin: 0 0 20px 0;}
.logo_projet_baltazar_1{height: 40px; width: auto;}
#page_detail_contact h2, #page_detail h2{font-size: 1.75rem;}
#page_detail em{color: #20c997;}
#page_detail a{color: #000;}
#page_detail span{font-style: italic;}
#page_detail a:hover{text-decoration: underline;}
#page_detail .col{width: 50%;}
#page_detail .mockup{height: auto; width: 104%; overflow: hidden;}
#page_detail .imgmockup{padding-right: -15px; margin-bottom:
                        30px; overflow: hidden;} !important
#page_detail .txt{padding-top: 2rem; padding-bottom: 2rem;}
#page_detail h3{font-size: 0.75rem; text-transform: uppercase; font-weight: bold;}
#page_detail .color_icone{flex-direction: row;}
#page_detail .vignette_color{display: inline-block;
                             width: 25px; height: 25px;
                             border: 1px solid #000; border-radius: 2px;
                             margin: 10px;}

  /*///////////////////////////*/
 /* les vignettes de couleurs */
/*///////////////////////////*/

.color1{background-color: #2c7abc;}
.color2{background-color: #424242;}
.color3{background-color: #ffffff;}
.color4{background-color: #e00002;}
.color5{background-color: green; margin-bottom: 30px;}
.color1:hover,.color2:hover,.color3:hover,.color4:hover,.color5:hover{filter: brightness(0.5);}

  /*///////////////*/
 /*//    CGM    //*/
/*///////////////*/

#page_detail .vignette_color1{display: inline-block;
                               width: 25px; height: 25px;
                               border: 1px solid #BBB; border-radius: 2px;
                               margin: 10px;}
.color11{background-color: #f5f5f5;}
.color12{background-color: #FFFFFF;}
.color13{background-color: #f7f5f5;}
.color14{background-color: #6c757d;}
.color15{background-color: #bdbdbd222;}
.color16{background-color: #32383e; margin-bottom: 30px;}
.color11:hover,.color12:hover,.color13:hover,.color14:hover,.color15:hover,.color16:hover{filter: brightness(0.5);}

  /*///////////////////*/
 /*//    Bisamme    //*/
/*///////////////////*/

.color21{background-color: #f90501;}
.color22{background-color: #FFFFFF;}
.color23{background-color: #000000;}
.color24{background-color: #eeeeee; margin-bottom: 30px;}
.color21:hover,.color22:hover,.color23:hover,.color24:hover{filter: brightness(0.5);}

  /*///////////////*/
 /*//    CTS    //*/
/*///////////////*/

.color31{background-color: #ff002a;}
.color32{background-color: #f5f0f0;}
.color33{background-color: #2b2b2b;}
.color34{background-color: #ffffff; margin-bottom: 30px;}
.color31:hover,.color32:hover,.color33:hover,.color34:hover{filter: brightness(0.5);}

  /*//////////////////*/
 /*//    EFFETS    //*/
/*//////////////////*/

/* HOVER projets*/
.fig_projet{
  /* taille max */
  max-width: 680px;
  /* rayon */
  border-radius: .25rem;
  /* petit rayon */
  position:relative; /* ma figure est en position relative pour placer son enfant en absolu */
  width:100%;
  overflow:hidden; /* tout ce qui dépace de ma figure est caché */
  margin: 0 auto 1rem;
}

.fig_projet a img{/* de base, mes images auront une taille de 120%  */
  -webkit-transform: scale(1.2);
     -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
       -o-transform: scale(1.2);
          transform: scale(1.2);
  }

.figcap_projet{
  background:rgba(100,100,255,0);
  padding:20px;
  color:#fff;
}

.figcap_projet{
  /* mon figcaption est en position absolue, et occupe tout l'espace de son parent relatif (figure) grâce aux propriétés top, right, bottom et left à 0 */
  position:absolute;top:0;right:0;bottom:0;left:0;

  pointer-events:none; /* on désactive les actions du pointeur sur figcaption
  pour éviter qu'il nous empéche de cliquer sur le lien de l'image  */
}

.figcap_projet h3{
  font-weight:normal;
  font-size:2em;
  border:2px solid #fff;
  padding: 10px 30px 50px 30px ;
  display:inline-block;
  text-transform:uppercase;
}

.figcap_projet strong{
  text-transform: none;
  font-size:0.8em;
}

.figcap_projet p{
  text-align:right;
  border:2px solid #fff;
  padding: 10px 10px 30px 50px;
  position:absolute;
  /* mon paragraphe est en position abolsue  */
  right:120px;
  bottom:70px;
  opacity:0; /* de base, il sera transparent pour pouvoir le passer en opaque au survol */
}

/* ___________________ J'APPLIQUE MES TRANSITION POUR LE CHANGEMENT D'ETAT SURVOL __________________*/
.figcap_projet, .figcap_projet h3, .figcap_projet, .figcap_projet p, .fig_projet a img,.overlay img{
  /* je rajoute mes transitions sur les 4 éléments listés ci-dessus pour obtenir
     l'effet au survol */
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
      -ms-transition: all 1s ease;
       -o-transition: all 1s ease;
          transition: all 1s ease;
}

/* ___________________ J'APPLIQUE MES EFFETS DE SURVOL __________________*/
  /* au survol, mon fond passe du bleu/violet transparent au transparent à 50% */
.figcap_projet{background:rgba(0,0,0,0.5);}

  /* au survol, le paragraphe passe du transparent à l'opaque */
.fig_projet:hover figcaption p{opacity:1;
  -webkit-transform: translateX(50px) translateY(50px);
     -moz-transform: translateX(50px) translateY(50px);
      -ms-transform: translateX(50px) translateY(50px);
       -o-transform: translateX(50px) translateY(50px);
          transform: translateX(50px) translateY(50px);
}

.fig_projet:hover figcaption h3{
  -webkit-transform: translateX(-10px) translateY(-10px);
     -moz-transform: translateX(-10px) translateY(-10px);
      -ms-transform: translateX(-10px) translateY(-10px);
       -o-transform: translateX(-10px) translateY(-10px);
          transform: translateX(-10px) translateY(-10px);
}

.fig_projet:hover a img{
  /* au survol, l'échelle de l'image passe à 110% */
  -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
       -o-transform: scale(1.1);
          transform: scale(1.1);
}

  /*////////////////// */
 /*//     RWD      // */
/*////////////////// */

@media screen and (max-width: 767px) {

  .entreprise{margin-right: 28px;}

  #menu{
    position: fixed;
    top:0px;
    height: 100%;
    width: 100%;
    right:-200px;
    transform: translateX(-200px);
    transition: margin .5s ease;
    z-index: 900;
    background: rgba(255, 255, 255, 1);
    display: none;
  }

  #menu ul{
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    list-style: none;
  }

  #menu a{
    color: #000;
    text-decoration: none;
    padding: 20px;
    display: inline-block;
    font-size: 24px;
  }

  #menu a:hover{
    text-decoration: none;
    display: block;
    background-color: rgba( 0, 0, 0, 0.5);
  }

  #presentation {padding: 20px 40px 5px 40px;}
  #presentation p{text-align: justify;}


  #competences .row{
    flex-wrap: nowrap;
    width: 33.33%;
  }


  #hidden, .btn-group{display: none;}

  #hidden2, .hidden2{ display: none;}

  .hidden-title2{display:none;}

  /*IMG*/
  /* img pleine page */
  .img-intro{
    background:url("../img/intro_gif_light.gif")
    no-repeat top 0px center fixed;
  }
  /* PARALLAX */
  .img-parallax{
    background:url('../img/illustration_web_light.jpg')
    no-repeat top center fixed;
    height:300px;
    /* filter: brightness(80%); */
    opacity: 0.6;
  }

  /*////////////////////////////*/
 /*//    direct_ambulance    //*/
/*////////////////////////////*/

  .mockup img{width: 75%;}


  /*///////////////////////////*/
 /*//     ecran youtube     //*/
/*///////////////////////////*/
  iframe {width:375px; height:210px;}
}

@media screen and (min-width: 767px){

  #presentation {padding: 20px 100px 5px 100px;}
  #presentation p{text-align: center;}

  .hidden-title1{display: none;}

  #hidden2{ display: none;}

  /*IMG*/
  /* img pleine page */
  .img-intro{
    background:url("../img/intro_gif.gif")
    no-repeat top 0px center fixed;
  }
  /* PARALLAX */
  .img-parallax{
    background:url('../img/illustration_web.jpg')
    no-repeat top center fixed;
    height:300px;
    /* filter: brightness(80%); */
    opacity: 0.6;
  }
  /*///////////////////////////*/
 /*//     ecran youtube     //*/
/*///////////////////////////*/
  iframe {width:500px; height:280;}
}

/* faire apparaitre le menu */
/* grace au .js */
.collapse.show{
  display: flex!important;
  margin-right:0!important;
  transition: margin .4s ease;
}