@import url("../css/style02.css");

@font-face {
   font-family: "UbuntuCondensed";
   src: url("../fonts/UbuntuCondensed-Regular.ttf");
  font-display: auto;}

@font-face {

    /*font-family: "ElectroShackle";
    src: url("asset/ElectroShackle.otf");*/
}
/*_ General ___________________________________________________*/
   :root {
      font-size:16px;
      font-family: "UbuntuCondensed";
      margin: 0px; 
      background-color:#333;
      --grey1: #1b1b1b;
       --grey2: #2f2f2f;
       --grey3: #444444;
       --grey4: #7d7d7d;
       --grey5: #bcbcbc;
   }

   html {
        overflow: hidden;
   }

   body {
      margin: 0px;
      box-sizing: content-box;
      display: block;
      user-select: none; 
   }

   header {
      width: 90%;
      height: 5%;
      margin: auto;
     display: flex;
     justify-content: space-between;
   }

   main {
      display: block;
      width: 90%;
      height:80%;
      margin:  auto ;
      overflow: auto;
   }

   aside{ 
      display: inline;
   }

  section {

      height: 100%;
      background-color: #666;        
      overflow: hidden;
   }

   article {
      height: 90%;
      align-content: center;
   }

   p {
       display: block;
       margin-block-start: 0.5em;
       margin-block-end: 0.5em;
       margin-inline-start: 0px;
       margin-inline-end: 0px;
       unicode-bidi: isolate;
   }

   .center3{
      margin: auto 0;
      width: 100%;
   }

   /*_ Header ____________________________________________________*/
header .dropbtn {
   box-shadow: inset 1px 1px 2px #1b1b1b, -1px -1px 2px #6d6d6d;
   text-decoration: none;
  font-size: 22px;
  cursor: pointer;
  padding: 10px;
  color: white;
    background-color: #222;
    border-radius: 50px;
}

header .dropdown {
  position: relative;
  display: inline-block;
}

header .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  right: 10px;
}

header .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
width: 200px;




}

header .dropdown-content a:hover {background-color: #aaa}

header .dropdown:hover .dropdown-content {
  display: block;  
}

header .dropdown:hover .dropbtn {
  background-color: #444;
}



   /*_ Formulaire _____________*/
   form p {
      font-size: 15px;
      color: #444;
   }

   form div {
      margin-top: 2px;
   }

   form input,
  form textarea,
  form button {
         width: 100%;
   
         border-radius: 50px;
         box-shadow: inset 4px 4px 10px #bcbcbc, inset -4px -4px 10px #ffffff;
         color: #black;
         cursor: pointer;
         font-size: 10px;
         padding: 5px 20px;
         transition: all 0.2s ease-in-out;
         border: 2px solid rgb(206, 206, 206);
   }

  form input:hover,
  form textarea:hover,
  form button:hover {
  box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
}

form input[type="submit"]{
      margin: 4px 2px;

}

   .btn_popup {
      height: 30px;
      width: 30px;
      display: block;
      background: url("../img/bouton_contact1.png") no-repeat;
      z-index: 5;
   }

   .modalDialog {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgb(0, 0, 0, 0.9);
      z-index: 9;
      opacity: 0;
      transition: opacity 400ms ease-in;
      pointer-events: none;
   }

   .modalDialog:target {
      opacity: 1;
      pointer-events: auto;
   }

   .modalDialog  form {
      width: 485px;
      height: 540px;
      position: relative;
      margin: 2% auto;
      padding: 5px 20px 13px 20px;
      background: #444;
      border-radius: 5px;
      min-width: 300px;
      box-shadow: 5px 5px 5px #888888;
   }

   .close {
      background: #606061;
      color: #ffffff;
      line-height: 25px;
      position: absolute;
      right: -12px;
      text-align: center;
      top: -10px;
      width: 24px;
      text-decoration: none;
      font-weight: bold;
      border-radius: 12px;
      box-shadow: 1px 1px 3px #000;
   }

   .close:hover {
      background: #aaaaaa;
   }

   #form {

   }

   #form h3 {
      color: #27748a;
      font-size: 25px;
      margin: 0;
   }

   #form p {
      font-size: 15px;
      color: #222222;
   }

   #form div {
      margin-top: 10px;
   }

   #form textarea,
   button {
      width: 100%;
      border: #888888 solid 2px;
      padding: 3px 5px;
   }

   #form label {
     
      font-size: 16px;
      color: white;
   }

   .required {
      color: #ff0000;
   }

.modalcolumn{
     column-count: 2;
}



/*_ Navigation ____________________________________________________*/
   nav {
      width: 90%;
      height: 5%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: #444;
      border-radius: 50px 50px 0 0;
      margin: auto ;
     }

   nav a {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      padding-top: 5px;
      border-radius: 32px;
      text-align: center;
      cursor: pointer;
      width: 100px;
      background: #444;
      color: white;
      text-decoration: none;
      box-shadow: 4px 4px 8px #3a3a3a,              -4px -4px 8px #4e4e4e;
      transition: all 0.2s ease-in-out;
      font-size: 1.1rem;
   }

   nav a:hover {
      background: #555;
   }


   nav a:active {
    box-shadow: inset 2px 2px 4px #1b1b1b, inset -2px -2px 4px #6d6d6d;
}




   #section1,
   #section2,
   #section3,
   #section4,
   #section5,
   #section6 {
      display: none;
   }

/*_ Main ______________________________________________________*/
   main .heading{
      display: flex;
      justify-content: space-between;
      height: 10%;
   }

   main .emoji{
      font-size: 2em;
   }

   main .title {
      font-weight: bold;
      font-size: 2em;
      margin : 0 auto 0 auto;
   }

   main .hr{ 
      height: 0px; 
      margin:0px;
   }


/*_ section0 ________________________*/
   .imgstart{
   display: flex;
    justify-content: center;
    align-items: center;

   }

/*_ section1 ________________________*/
   article video {

   }

   article .grid1 {
      display: grid;
      justify-content:center;
      align-items:center;
      justify-items: center;
       grid-auto-rows: auto;
          text-align:center;   
   }

   article .grid1item1 {

   }

   article .grid1item2  { 

    }


/*_ section2 ________________________*/
   article .Photo {
      height: 100%;
   }

   article .grid2 {
     height: 95%;
     width: 100%;
     display: grid;
     grid-template-columns: 0.5fr 1.5fr;
     grid-template-rows: 1fr;
     gap: 5px;
     grid-template-areas: "Photo Perso" "Info Perso";
   }

   article .grid2item1 {
     grid-area: Photo;
     height: 90%;
     margin: 2%;
     display: flex;
     margin: auto;
   }

   article .grid2item2 {
     grid-area: Perso;
     height: 370px;
     line-height: 2rem;
     font-size: 1.5em;
   }

   article .grid2item3 {
     grid-area: Info;
     margin-left: 50px;
     height: 110px;
   }

   article .image-slider {
     position: relative;
     display: inline-block;
     line-height: 0;
     margin: 5px auto;
   }
   /* Could use a pseudo-element, but they’re currently
      super buggy */
   article .image-slider > div {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     width: 25px;
     max-width: 100%;
     overflow: hidden;
     resize: horizontal;
   }

   /* Cross-browser resizer styling */
   article .image-slider > div:before {
     content: '';
     position: absolute;
     right: 0;
     bottom: 0;
     width: 13px;
     height: 13px;
     padding: 5px;
     background: linear-gradient(-45deg, white 50%, transparent 0);
     background-clip: content-box;
     cursor: ew-resize;
     -webkit-filter: drop-shadow(0 0 2px black);
     filter: drop-shadow(0 0 2px black);
   }

   article .image-slider img {
     user-select: none;
     max-width: 400px;
   }

   dd {
      direction: rtl;
   }

   /*_ section3 ________________________*/
   article .grid3{
   	display: grid;
      margin: auto;
      grid-auto-rows: auto;
   }

   article .grid3item3_1 {
      line-height: 1.5em;
      font-size: 1.5em;
      text-align: center;
      
       /*  margin: 10% 0 10% 0;*/
   }

   article .grid3item3_2 {
      line-height: 1.5em;
      font-size: 1.5em;
      background-color: #fdedec;
      border: #ddd solid 5px;
      transition: 0.3s ease;
      text-align: center;
   }

   article .grid3item3_2:hover {
      background-color: #fadbd8;
      border: #aaa solid 5px;
    }

   article .grid3item3_2_span {
      font-weight: bold;
      color: #472424 ;
    }



   /*_ section4 ________________________*/
   article .flex4 {
      display: flex;
      flex-direction: column;
   }

   article .grid4 {
      display: grid;
      width: 40%;
      margin: auto;
      grid-auto-rows: auto;
   }

   article .grid4item4 {
      display: none;
      padding: 01%;

   }

   article .arrow{
        display: flex;
        padding: 01%;
         justify-content: space-around;
   }

   article .legend{
   display: flex;
   margin: auto;
   padding: 01%;
   font-size: 1.4em;
   justify-content: space-around;
   }


   article .grid4_img {
      margin: 03px;
      min-height: 100px;
      max-height: 100px;
   }

   article ul.item4_1{
      display: flex;
      align-items: center;
      justify-content: center;
   }

   article ul.item4_2 {
      width: 100%;
      text-align: center;
   }

   article ul.item4_3 {
    width: 100%;

   }

   article .h3 {

      font-size: 1.1em;
     font-weight: 600;

   }   


   article .step {
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      cursor: pointer;
      width: 10px;
      margin: 0 1px;
      display: block;
      transition: background-color 3s ease;
   }


   article .step[name="black"] {
      border-left: 10px solid black;
   }





   article progress {
      float: right;
      width: 30%;
      height: 5%;
   }


   article .pulse {
      box-shadow: 0 0 0 0 rgb(0, 0, 0, 1);
      transform: scale(1);
      animation: pulse-black 2s infinite;
   }

   @keyframes pulse-black {
      0% {
         transform: scale(0.97);
         box-shadow: 0 0 0 0 rgb(0, 0, 0, 0);   
      }

      70% {
         transform: scale(1);
         box-shadow: 0 0 0 2px rgb(0, 0, 0, 0.1);   
      }

      100% {
         transform: scale(0.97);
         box-shadow: 0 0 0 0 rgb(0, 0, 0, 0);    

   }

   @keyframes fade {
      from {
         opacity: 0.4;
      }

      to {
         opacity: 1;
      }
   }

  }

/*_ section5 ________________________*/
   article .flex5 {
      width: 100%;
      display: flex;
      margin:  auto;
   }

   article .flex5item5 {
      width: 100%;
      margin:  auto;
   }

   article ul {
       display: block;
       list-style: none;
       margin-block-start: 0em;
       margin-block-end: 0em;
       margin-inline-start: 0px;
       margin-inline-end: 0px;
       padding-inline-start: 0px;
    }

   article .flex5item5 ul {
   	height: 0px;
   	overflow: hidden;
   	transition: 1s;}

   article .flex5item5 li:hover ul {
      height: 100px;
      width: 100%;}

   article .flex5item5 ul li a {
   	background: #d2d2d2;
   	width: 70%;
   	margin: 0px;
   	padding: 0px}

   article .flex5item5 ul li a:hover {
      background: #c1c1c1;}

   article .flex5item5 ul li a img {
      margin-right: 10px;}

   article .item5_li{

      margin: auto;
      text-align: center;
   }

   article .item5_p {
      font-weight: Bold;
      font-size: 1.3rem;


      margin-block-start: 1em;
      margin-block-end: 1em;
   }

   article .item5_p:hover {
      color: #2a7fffff;
   }

   article .item5_ul{
      margin: auto;
      display: inline-grid;
      align-items: center;
   }

   article .item5_ul_li{

   }

   /*_ section6 ______________________________*/
   article .flex6{ 
      display: flex;
      justify-content: center;
      height: 90%;
      align-items: center;
    }

   article .flex6item6_1 {  
      width: 800px;
      height: 400px;
      filter: grayscale(100%); 
      animation: kenburns 3s infinite;
   }

   article .flex6item6_2 {
      width: 100%;
    height: 400px;
      animation: kenburns 3s infinite;
   }


   @keyframes kenburns {
      0% {
         opacity: 0.3;
      }

      5% {
         opacity: 0.8;
      }

      95% {
         transform: scale3d(1.05, 1.05, 1.05) translate3d(-05px, -05px, 0);
         animation-timing-function: ease-in;
         opacity: 0.9;

      }

      100% {
         transform: scale3d(1.1, 1.1, 1.1) translate3d(-10px, -10px, 0);
         animation-timing-function: ease-in;
         opacity: 1;
         filter: grayscale(00%);
      }
   }





/*_ Footer ____________________________________________________*/
footer {
   display: flex;
   width: 90%;
   height: 5%;
   margin: auto;
   background: #444;
   border-radius: 0 0 50px 50px;
   justify-content: space-around;
   align-items: center;
   overflow: hidden;
}