@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: flex;
   }

  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 {
      box-shadow: inset 1px 1px 2px #1b1b1b, -1px -1px 2px #6d6d6d;
      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;
   }

   nav a:hover {
      background: #555;
   }

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

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

   .emoji{
      font-size: 2em;
   }

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

   .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 ________________________*/
   .Photo {
      height: 100%;
   }

   .grid2 {
      display: grid;
      grid-template-areas: 'Photo Perso' 'Photo Perso'  'Info Info';
       grid-auto-rows: auto;
   }

   .grid2item1 {
      grid-area: Photo;
      margin: 2%;
   }

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

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


.img-comp-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 400px; /* adjust if needed */
  overflow: hidden;
}

.img-comp-img {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.img-comp-img img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  vertical-align: middle;
}

.img-comp-slider {
  position: absolute;
  z-index: 9;
  cursor: ew-resize;
  width: 40px;
  height: 40px;
  background-color: #2196F3;
  opacity: 0.7;
  border-radius: 50%;
}


   dd {
      direction: rtl;
   }

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

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

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

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


   /*_ 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 ________________________*/
   .flex5 {
      width: 100%;
      display: flex;
      margin:  auto;
   }

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

   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;
    }

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

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

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

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

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

   .item5_li{

      margin: auto;
      text-align: center;
   }

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


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

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

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

   .item5_ul_li{

   }

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

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

.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;
}