/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   /* ==========================================================================
   FONTS
   ========================================================================== */

@import url('../font/font.css');

/* ==========================================================================
   
   ========================================================================== */


html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  scroll-behavior: smooth;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

   /*
 * Global
  */

  

   :root {
    --mint: #D5FFEB;
    --mintforte: #00FF87;
    --mintsemiforte: #00D571;
    --white: #fff;
    --black: #060027;
    --lila: #E1DBFF;
    --darklila: #6755CC;
    --gray: #EFEFEF; 
    --backgroundblack: #181629; 
    --bleufonce: #0E0153;
    --bleucathedrale: #371DBF; 
    --bleu: #180389;  
    --jaune: #FFF612;  
  } 
   

   *{
    font-family: "montreal";
    box-sizing: border-box;
   }

   body{
    width: 100vw;
    max-width: 2000px;
    margin: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 0;
    animation: fadeInAnimation ease .5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
   }

   html{
    width: 100vw;
    overflow-x: hidden;
   }

   .blockscroll{
    height: 100vh !important;
    overflow-y: hidden !important;
   }

   @keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
  }

   h1{
    font-size: 15px;
   }

   h1 a{
    height: 100%;
    display: block;
   }

   h3{
    margin-bottom: 0;
   }

   .grid-x{
    margin: 0 10vw 0 5vw; 
   }

   h3, h3 p{
    font-family: "montreal";
    font-size: 29px;
    line-height: 39px;
   }

   h2, h2 p{
    font-family: "montreal";
    font-size: 55px;
    line-height: 65px;
   }

   p{
    font-family: "montreal";
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 15px;
   }

   a, a:visited, a:focus{
    color: var(--black);
    transition: all .2s ease-in-out;
   }
   a button h3, a button{
    color: var(--black);
    transition: all .2s ease-in-out;
   }
   a button h3:hover, a button:hover{
    color: var(--mintsemiforte);
    transition: all .2s ease-in-out;
   }
   .darkmode--activated a, .darkmode--activated a:visited, .darkmode--activated a:focus{
    color: var(--white);
   }
   .darkmode--activated a button h3, .darkmode--activated a button{
    color: var(--white);
   }
   .darkmode--activated a:hover button h3, .darkmode--activated a:hover button{
    color: var(--mintsemiforte);
   }

   a:hover, .darkmode--activated a:hover{
    color: var(--mintsemiforte);
    transition: all .2s ease-in-out;
   }

   .darkmode--activated p, .darkmode--activated h3, .darkmode--activated h2{
    color: var(--white);
   }

   button{
    border: 1px solid var(--mintforte);
    border-radius: 100px;
    padding: 4px 15px 6px 15px;
    font-size: 18px;
    cursor: pointer;
    transition: all .3s ease-in-out;
  }

  .darkmode--activated button{
    color: var(--white);
  }

  button:hover{
    color: var(--mintsemiforte);
    transition: all .3s ease-in-out;
  }

  section{
    padding: 100px 0;
  }

  ul{
    margin: 0;
    padding: 0;
  }

  .darkmode-layer, .darkmode-toggle {
    z-index: -100;
  }

  .default #introduction{
    height: 70vh;
    margin-top: 50px;
  }

  .default a{
    text-decoration: underline;
  }

   /*
 * Header
  */

  header .topheader{
    position: absolute;
    left: 6vw;
    top: 10px;
    z-index: 5;
  }

  header h1 {
    z-index: 3;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  header h1 svg{
    width: 200px;
  }

  .darkmode--activated header h1 svg #Groupe_322{
    fill: var(--white);
  }
  
  header #sidebar{
    position: fixed;
    top: 0;
    right: 0;
    width: 70px;
    height: 100vh;
    background: var(--white);
    z-index: 3;
  }

  header .menubutton{
    background: var(--backgroundblack);
    width: 100%;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  header .menubutton span{
    width: 40px;
    height: 1px;
    display: block;
    background: var(--white);
    transform-origin: center;
    transition: all .3s ease-out;
  }

  header .menubutton:hover span{
    width: 35px;
    transition: all .3s ease-out;
  }

  header .menubutton span:first-child{
    margin-bottom: 10px;
  }

  .firstgo{
    transform: rotate(45deg) translate(8px, 8px);
  }

  .lastgo{
    transform: rotate(-45deg) translate(8px, -8px);
  }

  header .menubutton span:nth-child(3){
    margin-top: 10px;
  }

  header .headerinfos{
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  header .soustitre{
    height: 50vh;
  }

  header .soustitre h3, header button{
    transform: rotate(90deg);
    transform-origin: bottom left;
  }

  header .soustitre h3{
    position: absolute;
    width: 100vh;
    left: 50%;
    margin-left: -20px;
  }
  .darkmode--activated header .soustitre h3{
    color: var(--black) !important;
  }

  header .contactbutton{
    position: absolute;
    left: 50%;
    bottom: 150px;
    margin-left: -15px;
  }

  header button a{
    color: var(--black);
  }
  .darkmode--activated header button a{
    color: var(--black);
  }
  .darkmode--activated header button:hover a{
    color: var(--mintsemiforte);
  }
  
  header #hiddennav{
    z-index: 2;
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    opacity: 0;
    left: 100vw;
    background: var(--mint);
    transition: left .8s ease-out, opacity .1s ease-out;
  }
  .darkmode--activated header #hiddennav{
    background: var(--bleu);
  }

  .shownav{
    left: 0 !important;
    opacity: 1 !important;
    transition: left .8s ease-out, opacity .1s ease-out 1s;
  }

  header #hiddennav nav{
    width: 30%;
  }

  header #hiddennav nav ul li{
    list-style-type: none;
    font-size: 30px;
    line-height: 39px;
    border-bottom: 1px solid var(--mintsemiforte);
    padding-bottom: 15px;
    margin-bottom: 15px;
    transition: all .3s ease-out;
  }
  header #hiddennav nav ul li:last-child{
    display: none;
  }
  .darkmode--activated header #hiddennav nav ul li{
    border-bottom: 1px solid var(--white);
  }
  header #hiddennav nav ul li:hover{
    border-bottom: 1px solid var(--mintsemiforte);
    transition: all .3s ease-out;
  }
  .darkmode--activated header #hiddennav nav ul li:hover{
    border-bottom: 1px solid var(--mintsemiforte);
  }
  header #hiddennav nav ul li a{
    color: var(--black);
  }
  .darkmode--activated header #hiddennav nav ul li a{
    color: var(--white);
  }
  .darkmode--activated header #hiddennav nav ul li:hover a{
    color: var(--mintforte);
  }
  header #hiddennav nav ul .active{
    color: var(--mintforte) !important;
  }
  .darkmode--activated header #hiddennav nav ul .active{
    color: var(--mintforte) !important;
  }

  .dark-toggle {
    cursor: pointer;
    position: absolute;
    display: inline-block;
    z-index: 501;
    left: 43%;
    top: 24px;
  }
  .dark-toggle:hover .dark-toggle-checkbox{
    border: #8171DD 1px solid;
    transition: all ease-in-out .3s;
  }
  .dark-toggle:hover .dark-toggle-switch{
    background: #8171DD;
    transition: all ease-in-out .3s;
  }
  .dark-toggle:hover .dark-toggle-text{
    color: #8171DD;
    transition: all ease-in-out .3s;
  }
  .dark-toggle:hover .dark-toggle-text::after{
    color: #8171DD;
    transition: all ease-in-out .3s;
  }
  .darkmode--activated .dark-toggle:hover .dark-toggle-checkbox{
    border: #B0A6EA 1px solid;
    transition: all ease-in-out .3s;
  }
  .darkmode--activated .dark-toggle:hover .dark-toggle-switch{
    background: #B0A6EA;
    transition: all ease-in-out .3s;
  }
  .darkmode--activated .dark-toggle:hover .dark-toggle-text{
    color: #B0A6EA;
    transition: all ease-in-out .3s;
  }
  .darkmode--activated .dark-toggle:hover .dark-toggle-text::after{
    color: #B0A6EA;
    transition: all ease-in-out .3s;
  }
  .dark-toggle-checkbox {
    width: 50px;
    height: 25px;
    position: relative;
    border: #B0A6EA 1px solid;
    border-radius: 100px;
    float: left;
    transition: all ease-in-out .3s;
  }
  .darkmode--activated .dark-toggle-checkbox {
    border: #B0A6EA 1px solid; 
    transition: all ease-in-out .3s;
  }
  .dark-toggle-switch {
    background: #B0A6EA;
    border-radius: 100px;
    width: 19px;
    height: 19px;
    top: 2px;
    left: 4px;
    position: absolute;
    vertical-align: middle;
    transition: all ease-in-out .3s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .darkmode--activated .dark-toggle-switch {
    left: 26px;
    background: #8171DD; 
    transition: all ease-in-out .3s;
  }
  .dark-toggle-text{
    display: inline-block;
    color: #B0A6EA;
    font-size: 15px;
    margin-left: 7px;
    margin-bottom: 0;
    transition: all ease-in-out .3s;
  }
  .darkmode--activated .dark-toggle-text{
    color: #6755CC;
    transition: all ease-in-out .3s;
  }
  .dark-toggle-text::after{
    content: "désactivé";
    color: #B0A6EA;
    transition: all ease-in-out .3s;
  }
  .darkmode--activated .dark-toggle-text::after{
    content: "activé";
    color: #6755CC;
    transition: all ease-in-out .3s;
  }
  
  .dark-toggle svg{
    position: absolute;
    transition: all .2s ease-in-out;
  }

  .dark-toggle svg:nth-child(1){
    opacity: 1;
  }
  .darkmode--activated .dark-toggle svg:nth-child(1){
    opacity: 0;
  }

  .dark-toggle svg:nth-child(2){
    opacity: 0;
  }
  .darkmode--activated .dark-toggle svg:nth-child(2){
    opacity: 1;
  }

   /*
 * Header animation logo
  */

  .trace_7go{
    animation: boule7 3s linear forwards;
    transition: all ease-out;
  }

  @keyframes boule7 {
    0% {
      transform:translate(-11.243px, -1.879px);
    }
    25% {
      transform:translate(-5px, -6px);
     }
    50% {
      transform:translate(2px, 6px);
     }
    75% {
      transform:translate(-2px, 0px);
     }
    100% {
      transform:translate(-11.243px, -1.879px);
     }
}

.trace_8go{
  animation: boule8 3s linear forwards;
  transition: all ease-out;
}

@keyframes boule8 {
  0% {
    transform:translate(-15.618px, -2.063px);
  }
  25% {
    transform:translate(-18px, -4px);
   }
  50% {
    transform:translate(-10px, -2px);
   }
  75% {
    transform:translate(-8px, -4px);
   }
  100% {
    transform:translate(-15.618px, -2.063px);
   }
}

.trace_9go{
  animation: boule9 3s linear forwards;
  transition: all ease-out;
}

@keyframes boule9 {
  0% {
    transform:translate(-15.618px, 0px);
  }
  25% {
    transform:translate(-10px, -6px);
   }
  50% {
    transform:translate(-4px, 5px);
   }
  75% {
    transform:translate(-11px, 2px);
   }
  100% {
    transform:translate(-15.618px, 0px);
   }
}

.trace_11go{
  animation: boule11 3s linear forwards;
  transition: all ease-out;
}

@keyframes boule11 {
  0% {
    transform:translate(-12.294px, -0.843px);
  }
  25% {
    transform:translate(-15px, -8px);
   }
  50% {
    transform:translate(-8px, -10px);
   }
  75% {
    transform:translate(-10px, -5px);
   }
  100% {
    transform:translate(-12.294px, -0.843px);
   }
}

.trace_12go{
  animation: boule12 3s linear forwards;
  transition: all ease-out;
}

@keyframes boule12 {
  0% {
    transform:translate(-13.449px, -1.979px);
  }
  25% {
    transform:translate(-8px, 2px);
   }
  50% {
    transform:translate(-2px, 5px);
   }
  75% {
    transform:translate(-9px, 1px);
   }
  100% {
    transform:translate(-13.449px, -1.979px);
   }
}

.trace_13go{
  animation: boule13 3s linear forwards;
  transition: all ease-out;
}

@keyframes boule13 {
  0% {
    transform:translate(-14.572px, -1.026px);
  }
  25% {
    transform:translate(-18px, -3px);
   }
  50% {
    transform:translate(-20px, -5px);
   }
  75% {
    transform:translate(-9px, -2px);
   }
  100% {
    transform:translate(-14.572px, -1.026px);
   }
}
  

     /*
 * Homepage
  */

  body.homepage{
    background: var(--gray);
  }

  .darkmode--activated .darkmode-background{
    background: var(--backgroundblack) !important;
  }

  .homepage #hautdepage{
    height: 100vh;
    min-height: 800px;
    padding: 0;
    position: relative;
  }

  #animation{
    height: 60vh;
  }

  .homepage #homeback1{
    position: absolute;
    width: 40%;
    height: 100vh;
    top: 0;
    min-height: 800px;
    z-index: -1;
  }

  .homepage #homeback1 h2{
    opacity: 0;
    animation: fadeInAnimationh2 ease .5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }

  @keyframes fadeInAnimationh2 {
    0% {
      transform:translateX(-50vw);
      opacity: 0;
    }
    100% {
      transform:translateX(0);
      opacity: 1;
     }
}

  .comeh2{
    transform:translateX(0) !important;
    opacity: 1 !important;
    transition: all .5s ease-in-out;
  }

  .homepage #jaugelongue{
    width: 25px;
    height: 100vh;
    left: 40%;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
    position: absolute;
    background: var(--jaune);
    transition: height 12s ease-out;
  }

  .homepage #jaugelongue p{
    transform: rotate(-90deg);
    position: absolute;
    top: 10px;
    left: -4px;
    color: var(--darklila);
  }
  
  .jaugejauneheight{
    height: 0 !important;
    transition: height 12s ease-out;
  }

  .homepage #homeback2{
    position: absolute;
    width: 57%;
    height: 100vh;
    min-height: 800px;
    right: 3%;
    bottom: 0;
    background: var(--lila);
    z-index: -1;
    overflow: hidden;
  }

  .darkmode--activated #homeback2{
    background: var(--bleufonce) !important;
  }
  
  .homepage .containeranim1 video{
    min-height: 460px;
    isolation: isolate;
  }

  .homepage h2{
    z-index: 2;
    margin-top: 75px;
    margin-left: calc(5vw + .9375rem);
  }

  .homepage .illustrationinteractive img{
    width: 100%;
  }

  .homepage .containeranim1{
    position: relative;
    background: var(--mint);
    display: flex;
    justify-content: center;
  }

  .darkmode--activated .containeranim1{
    background: var(--bleu) !important;
  }

  .homepage #compterebour{
    position: absolute;
    bottom: 5%;
    color: var(--mintsemiforte);
    font-size: 18px;
  }

  .homepage #homeback2 #animation2{
    max-width: 80%;
    max-height: 100%;
    position: absolute;
    /* vertical centering */
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;

    /* horizontal centering */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
  }




       /*
 * Illustration interactive
  */

  #introduction{
    padding-top: 100px;
    position: relative;
  }

  #introduction .grid-x{
    position: relative;
  }

  #introduction button{
    border: 1px solid var(--mintsemiforte);
  }

  #introduction .illustrationinteractive{
    margin-top: -100px;
    position: relative;
  }

  #introduction .illustrationinteractive .infoillu .illubouton{
    position: absolute;
  }
  #introduction .illustrationinteractive .infoillu .infoillutext{
    position: absolute;
  }

  #introduction .illustrationinteractive .infoillutext{
    width: 400px;
    /* max-height: 300px; */
    background: var(--lila);
    padding: 30px;
    position: relative;
    display: none;
    transition: all .3s ease-in-out;
    z-index: 2;
  }
  .darkmode--activated #introduction .illustrationinteractive .infoillutext{
    background: var(--bleu);
  }

  #introduction .illustrationinteractive .illubouton{
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
  }
  #introduction .illustrationinteractive .illubouton div:first-child{
    width: 100%;
    height: 100%;
    border: var(--mintsemiforte) 1px solid;
    border-radius: 100px;
    transition: all .3s ease-in-out;
  }
  #introduction .illustrationinteractive .illubouton div:nth-child(2){
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    background: var(--mintsemiforte);
    border-radius: 100px;
    animation: animronds 1s ease-in-out infinite;
    transition: all .3s ease-in-out;
  }

  #introduction .illustrationinteractive .illubouton:hover div:first-child, .activeborder{
    border-color: var(--mintforte) !important;
    transition: all .3s ease-in-out;
  }

  #introduction .illustrationinteractive .illubouton:hover div:nth-child(2), .activeback{
    background: var(--mintforte) !important;
    transition: all .3s ease-in-out;
  }

  @keyframes animronds {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }

  #introduction .illustrationinteractive .infoillutext .fermer{
    width: 38px;
    height: 38px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
  }

  #introduction .illustrationinteractive .infoillutext .fermer div:first-child{
    width: 100%;
    height: 1px;
    background: var(--bleufonce);
    transform: translateY(20px) rotate(-45deg);
  }
  #introduction .illustrationinteractive .infoillutext .fermer div:nth-child(2){
    width: 100%;
    height: 1px;
    background: var(--bleufonce);
    transform: translateY(20px) rotate(45deg);
  }

  .darkmode--activated .illustrationinteractive .fermer div{
    background: var(--white) !important;
  }

  #introduction .entrepriseillu .infoillutext{
    top: 43%;
    left: 45%;
  }

  #introduction .maisonimm .infoillutext{
    top: 30%;
    left: -3%;
  }

  #introduction .t-ventil-entreprise .illubouton{
    top: 34%;
    left: 19%;
  }
  #introduction .t-chaleur-entreprise .illubouton{
    top: 54%;
    left: 4%;
  }
  #introduction .t-lum-entreprise .illubouton{
    top: 49%;
    left: 19%;
  }
  #introduction .t-management-entreprise .illubouton{
    top: 61%;
    left: 29%;
  }
  #introduction .t-distance-entreprise .illubouton{
    top: 83%;
    left: 26%;
  }
  #introduction .t-solaire-entreprise .illubouton{
    top: 29%;
    left: 47%;
  }
  #introduction .t-solaire-maison .illubouton{
    top: 45%;
    left: 55%;
  }
  #introduction .t-solaire-imm .illubouton{
    top: 2%;
    left: 80%;
  }
  #introduction .t-fenetre-imm .illubouton{
    top: 32%;
    left: 69%;
  }
  #introduction .t-fenetre-maison .illubouton{
    top: 60%;
    left: 47%;
  }
  #introduction .t-voiture-imm .illubouton{
    top: 73%;
    left: 87%;
  }
  #introduction .t-voiture-maison .illubouton{
    top: 87%;
    left: 41%;
  }
  #introduction .t-plafond-imm .illubouton{
    top: 65%;
    left: 80%;
  }
  #introduction .t-plafond-maison .illubouton{
    top: 75%;
    left: 55%;
  }
  #introduction .t-toiture-imm .illubouton{
    top: 14%;
    left: 61%;
  }
  #introduction .t-toiture-maison .illubouton{
    top: 57%;
    left: 56%;
  }
  #introduction .t-facade-imm .illubouton{
    top: 36%;
    left: 80%;
  }
  #introduction .t-facade-maison .illubouton{
    top: 62%;
    left: 66%;
  }
  #introduction .t-chaleur-imm .illubouton{
    top: 77%;
    left: 95%;
  }
  #introduction .t-chaleur-maison .illubouton{
    top: 75%;
    left: 66%;
  }

  #introduction .swithillu{
    display: none;
  }

  .infoilluappear{
    display: block !important;
    opacity: 1;
    animation: display-none-transition ease-in-out .3s both;
    transition: all .3s ease-in-out;
  }

  @keyframes display-none-transition {
    0% {
      opacity: 0;
    }
  }

  .infoillushine{
    fill:var(--lila) !important;
    transition: all .3s ease-in-out;
  }

  .darkmode--activated .infoillushine{
    fill:var(--bleu) !important;
    transition: all .3s ease-in-out;
  }

   /*
 * Formulaire
  */

  #Form{
    width: 83%;
    height: auto;
    background: #D5FFEB;
    margin-left:  5vw;
    position: absolute;
    z-index: 2;
    padding: 50px;
    top: 5vw;
    left: -100vw;
    transition: all .5s ease-out;
  }

  .darkmode--activated #Form{
    background: var(--bleu);
    color: var(--white);
  }

  .darkmode--activated #Form input, .darkmode--activated #Form textarea, .darkmode--activated #Form label{
    color: var(--white);
  }

  .goform{
    left: 0 !important;
    transition: all .5s ease-out;
  }

  .encours{
   content: ', en cours...';
  }
  
  #Form #closeform{
    z-index: 1;
  }

  #Form .grid-x{
    margin: 0;
  }

  #Form .formintro{
    margin-bottom: 15px;
    pointer-events: none;
  }

  #Form input, #Form textarea{
    border: 1px solid var(--mintsemiforte);
    border-radius: 100px;
    background: none;
    margin-top: 10px;
  }

  #Form textarea{
    padding: 30px;
  }

  #Form .question, #Form .interetcela, #Form .etcela{
    padding-top: 20px;
  }

  #Form label{
    font-size: 18px;
    line-height: 22px;
  }

  #Form .themes label{
    padding-left: 30px;
  }

  #Form .battype, #Form .interetcela, #Form .etcela{
    margin-bottom: 10px;
  }
  
  #Form .SelectTheme{
    position: relative;
    cursor: pointer;
    margin-bottom: 10px;
  }

  #Form .themes /* Hide the browser's default radio button */
  .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  /* Create a custom radio button */
  #Form .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: none;
  border-radius: 50%;
  border: 1px solid var(--mintsemiforte);
}

/* On mouse-over, add a grey background color */
#Form .container:hover input ~ .checkmark {
  background-color: var(--mintsemiforte);
  transition: all .3s ease-out;
}

/* When the radio button is checked, add a blue background */
#Form .container input:checked ~ .checkmark {
  background-color: var(--mintsemiforte);
}

#Form .etcela{
  color: var(--mint);
}

#Form .submit{
  display: flex;
  justify-content: end;
  align-items: end;
}

#Form .submit input{
  cursor: pointer;
  padding: 0 10px;
  transition: all .3s ease-out;
  font-size: 18px;
  height: 35px;
}

#Form .submit input:hover{
  color: var(--mintsemiforte);
}

#Form .avantageplus{
  top: 15px;
  right: 15px;
  transform: rotate(45deg);
}

#form-feedback{
  position: absolute;
  top: 0;
  width: 100%;
  animation: feedback 8s linear forwards;
}

#form-feedback .success, #form-feedback .error, #form-feedback .alert{
  background: var(--mint);
  border: none;
}

.darkmode--activated #form-feedback .success, .darkmode--activated #form-feedback .error, .darkmode--activated #form-feedback .alert{
  background: var(--bleu);
  color: var(--white);
}

@keyframes feedback {
  0% { opacity: 1;}
  80% { opacity: 1;}
  100% { opacity: 0;}
}

#Form .submit svg{
  width: 35px;
  margin-right: 10px;
  opacity: 0;
}

.gowait{
  animation: feedback 5s linear forwards;
}

     /*
 * Prestations teasing
  */

  #prestationsteasing{
    background: var(--white);
    position: relative;
  }

  .darkmode--activated #prestationsteasing {
    background: var(--bleufonce);
  }
  

  #prestationsteasing .prestatitre{
    background: var(--lila);
    aspect-ratio: 1/1;
    border-radius: 500px;
    padding: 20px;
    margin-top: -100px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: relative;
    -moz-transform: translateY(-35%);
    -ms-transform: translateY(-35%);
    -webkit-transform: translateY(-35%);
    transform: translateY(-35%);
    transition: all .5s cubic-bezier(.69,.08,.29,.81);
  }

  .darkmode--activated #prestationsteasing .prestatitre{
    background: var(--bleu);
  }

  #prestationsteasing .presta h3{
    margin-top: 10px;
  }

  #prestationsteasing .presta h3 span{
    display: inline;
  }

  #prestationsteasing .prestaanimation{
    width: 100%;
    border: 1px solid var(--bleu);
    aspect-ratio: 1/1;
    border-radius: 500px;
    overflow: hidden;
    position: relative;
    -moz-transform: translateY(35.5%);
    -ms-transform: translateY(35.5%);
    -webkit-transform: translateY(35.5%);
    transform: translateY(35.5%);
    transition: all .5s cubic-bezier(.69,.08,.29,.81);
  }

  .darkmode--activated #prestationsteasing .prestaanimation{
    border: 1px solid var(--white);
  }

  #prestationsteasing .prestaanimation .animpresta{
    margin-top: -10px;
    transform: scale(1.25);
  }

  #prestationsteasing button{
    font-size: 30px;
    padding: 9px 20px 11px 20px;
  }

  #prestationsteasing .prestabutton{
    display: flex;
    justify-content: center;
    margin-top: 100px;
  }

  #prestationsteasing .animpresta video{
    transform-origin: center;
    transform: scale(.85) translateX(10px) translateY(15px);
  }

  #prestationsteasing .animpresta .animpresta4{
    transform-origin: center;
    transform: scale(.75) translateX(10px) translateY(-5px);
  }

  .prestamove{
    -moz-transform: translateY(0%) !important;
    -ms-transform: translateY(0%) !important;
    -webkit-transform: translateY(0%) !important;
    transform: translateY(0%) !important;
    opacity: 1 !important;
    transition: all .5s cubic-bezier(.69,.08,.29,.81);
  } 

  .darkmode--activated #introduction svg .st3{
    fill:var(--backgroundblack);
  }
  .darkmode--activated #introduction svg .st8{
    fill:var(--backgroundblack);
  }
  .darkmode--activated #introduction svg .st2{
    fill:var(--backgroundblack);
  }

     /*
 * A propos teasing
  */

  #apropteasing{
    background: linear-gradient(90deg, #f0f0f0 50%, #fff 50%);
  }
  .darkmode--activated #apropteasing{
    background: linear-gradient(90deg, var(--backgroundblack) 50%, var(--bleufonce) 50%);
  }

  #apropteasing .avantagestitre{
    margin-bottom: 50px;
  }
  .darkmode--activated #apropteasing .avantagestitre{
    color: var(--white);
  }

  #apropteasing .avantage{
    border-bottom: 1px solid var(--black);
    padding: 40px 0 30px 0;
    position: relative;
  }
  .darkmode--activated #apropteasing .avantage{
    border-bottom: 1px solid var(--white);
  }

  #apropteasing .avantageinfos{
    display: none;
    margin-top: 30px;
  }

  .avantageplus{
    width: 50px;
    height: 50px;
    top: 33px;
    right: 0;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 200px;
    border: 1px solid var(--mintsemiforte);
    cursor: pointer;
  }

  .avantageplus:hover span{
    width: 25px;
  }

  .darkmode--activated .avantageplus span{
    background: var(--white);
  }
  .avantageplus span{
    background: var(--black);
    display: block;
    width: 30px;
    height: 1px;
    transform-origin: center;
    position: absolute;
    transition: all .3s ease-out;
  }

  .avantageplus span:first-child{
    transform: rotate(90deg);
    transition: all .3s ease-out;
  }

  #apropteasing .apropbutton{
    margin-left: 0;
    margin-top: 100px;
  }

  #apropteasing h2{
    margin: 95px 0 40px 0;
  }

  .lineback{
    transform: rotate(0) !important;
    transition: all .3s ease-out;
  }

  .textcome{
    display: block !important;
  }

     /*
 * Prestations
  */

  #prestations{
    background: var(--gray);
  }
  #prestations.darkmode--activated{
    background: var(--backgroundblack);
  }
  #prestations .darkmode-background{
    background: var(--gray);
  }

  #prestations .dark-toggle {
    left: 50%;
  }

  #prestations #hautdepage{
    height: 36vh;
    min-height: 300px;
  }

  #prestations #homeback1{
    position: absolute;
    top: 0;
    width: 48%;
    height: 36vh;
    min-height: 300px;
    background: var(--lila);
    z-index: -1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .darkmode--activated .homeback1presta{
    background: var(--bleufonce) !important;
  }

  #prestations #homeback1 h2{
    margin-left: calc(5vw + .9375rem);
  }

  #prestations #skillsIllu{
    background: var(--mint);
    position: fixed;
    width: 49%;
    height: 100vh;
    left: 48%;
    bottom: 0;
    z-index: -1;
    display: flex;
    align-items: center;
  }
  .darkmode--activated #skillsIllu{
    background: var(--bleu) !important;
  }

  #prestations #skillsIllu #illuskill{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #prestations #skillsIllu #illuskill svg{
    position: absolute;
    width: 60%;
    transform: translateX(110vw);
    transition: all .5s ease-out .5s;
  }

  .skillactive{
    transform: translateX(0)  !important;
    transition: all .5s cubic-bezier(.69,.08,.29,.81) .5s;
  }

  #skillsIllu .roundanim{
    border: var(--mintsemiforte) .5px solid;
    animation: border 5s ease-out infinite, borderrotate 6s linear infinite;
    position: absolute;
    width: 70%;
    aspect-ratio: 1/1;
    margin-left: 15%;
    transition: all .5s ease-out;
   }
   #skillsIllu .roundanim2{
    border: var(--mintsemiforte) .5px solid;
    animation: border2 5s ease-out infinite, borderrotate2 5s linear infinite;
    position: absolute;
    width: 70%;
    aspect-ratio: 1/1;
    margin-left: 15%;
    transition: all .5s ease-out;
   }
   #skillsIllu .roundanim3{
    border: var(--mintsemiforte) .5px solid;
    animation: border3 5s ease-out infinite, borderrotate3 5s linear infinite;
    position: absolute;
    width: 70%;
    aspect-ratio: 1/1;
    margin-left: 15%;
    transition: all .5s ease-out;
   }


 @keyframes border {
  0% { border-radius: 43% 50% 40% 42%; transform: rotate(0);}
  30% {border-radius: 50% 40% 45% 48%; }
  66% {border-radius: 43% 46% 50% 50%;}
  66% {border-radius: 48% 50% 42% 50%;}
  100% { border-radius: 43% 50% 40% 42%;transform: rotate(360deg);  }
} 
@keyframes borderrotate {
  0% { transform: rotate(0);}
  100% { transform: rotate(360deg);  }
}

@keyframes border2 {
  0% { border-radius: 50% 35% 42% 40%; transform: rotate(0);}
  30% {border-radius: 40% 50% 30% 43%; }
  66% {border-radius: 48% 43% 48% 50%;}
  66% {border-radius: 42% 48% 46% 35%;}
  100% { border-radius: 50% 35% 42% 40%;transform: rotate(-360deg);  }
} 
@keyframes borderrotate2 {
  0% { transform: rotate(0);}
  100% { transform: rotate(360deg);  }
}

@keyframes border3 {
  0% { border-radius: 40% 45% 30% 50%; transform: rotate(0);}
  30% {border-radius: 30% 45% 50% 35%; }
  66% {border-radius: 45% 35% 30% 45%;}
  66% {border-radius: 50% 40% 35% 48%;}
  100% { border-radius: 40% 45% 30% 50%;transform: rotate(-360deg);  }
} 
@keyframes borderrotate3 {
  0% { transform: rotate(0);}
  100% { transform: rotate(360deg);  }
}

  #prestations #skills{
    width: 48%;
    padding: 0 40px 0 calc(5vw + .9375rem);
  }

  #prestations .skill{
    background: var(--white);
    min-height: 500px;
    padding: 35px;
    margin-top: 75px;
    position: relative;
  }
  .darkmode--activated #skills .skill{
    background: var(--bleu) !important;
  }

  #prestations .skill:last-child{
    margin-bottom: 75px !important;
  }

  #prestations .skilltitre{
    border-bottom: 1px solid var(--black);
  }
  .darkmode--activated #skills .skilltitre{
    border-bottom: 1px solid var(--white) !important;
  }

  #prestations .skillinfos{
    margin-top: 25px;
  }

  #prestations #skills .skilldetails li{
    list-style-type: none;
    margin: 25px 0 20px 0;
  }

  #prestations #skills .skilldetails li:hover .skillplus span{
    width: 25px;
    transition: all .3s ease-out;
  }

  #prestations #skills .skilldetails li .skilldetail{
    position: relative;
    cursor: pointer;
  }

  #prestations #skills .skilldetails li .skilldetail h3{
    margin-left: 45px;
  }

  #prestations #skills .skilldetails{
    margin-top: 35px;
  }

  #prestations #skills .skillplus{
    width: 30px;
    height: 30px;
    top: 6px;
    left: 0;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  #prestations #skills .skillplus span{
    background: var(--black);
    display: block;
    width: 30px;
    height: 1px;
    transform-origin: center;
    position: absolute;
    transition: all .3s ease-out;
  }
  .darkmode--activated #skills .skillplus span{
    background: var(--white) !important;
  }

  #prestations #skills .skillplus span:first-child{
    transform: rotate(90deg);
    transition: all .3s ease-out;
  }

  #prestations .skilldetailinfos{
    display: none;
  }

  .darkmode--activated #illuskill2 #Groupe_328 rect, .darkmode--activated #illuskill2 #Groupe_328 path {
    fill: var(--bleu) !important;
  }
  .darkmode--activated #illuskill3 #Groupe_329 #Tracé_274, .darkmode--activated #illuskill3 #Groupe_329 #Tracé_271, .darkmode--activated #illuskill3 #Groupe_329 #Tracé_275, .darkmode--activated #illuskill3 #Groupe_329 #Tracé_277, .darkmode--activated #illuskill3 #Groupe_329 #Tracé_279{
    fill: var(--bleu) !important;
  }
  .darkmode--activated #illuskill4 #Tracé_390, .darkmode--activated #illuskill4 #Tracé_392, .darkmode--activated #illuskill4 #Tracé_394, .darkmode--activated #illuskill4 #Tracé_402, .darkmode--activated #illuskill4 #Tracé_400{
    fill: var(--bleu) !important;
  }

  #trigger{
    position: absolute;
    top: 10%;
  }

  #prestations footer{
    margin-top: 150px;
  }

  #prestations .skillnumber{
    position: absolute;
    width: 45px;
    height: 45px;
    background: var(--lila);
    text-align: center;
    border-radius: 100px;
    top: -22px;
    left: -22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .darkmode--activated .skillnumber{
    background: var(--mintsemiforte) !important;
  }

       /*
 * Entreprise
  */

  #entreprise #hautdepage{
    background: var(--white);
    padding: 0;
    position: relative;
  }
  .darkmode--activated .hautdepageentreprise{
    background: var(--bleu) !important;
  }

  #entreprise #animationville{
    display: flex;
  }

  #entreprise video{
    width: 97%;
  }

  #entreprise #introentreprise{
    position: relative;
    padding: 75px 0;
    margin-top: -25px;
    background: var(--lila);
  }
  .darkmode--activated #introentreprise{
    background: var(--bleufonce) !important;
  }

  #entreprise #introentreprise .grid-x{
    height: 100%;
    align-items: center;
  }

  #entreprise #equipe{
    background: var(--gray);
  }
  .darkmode--activated #equipe{
    background: var(--backgroundblack) !important;
  }

  #entreprise #equipe img{
    width: 100%;
  }

  #entreprise #equipe .info{
    padding: 20px 30px 30px 30px;
  }

  #entreprise #equipe .info h3{
    border-bottom: 1px solid var(--black);
  }
  .darkmode--activated #equipe .info h3{
    border-bottom: 1px solid var(--white) !important;
  }

  #entreprise #equipe .info .fonction{
    margin-top: 25px;
  }

  .flip-card {
    width: 100%;
    aspect-ratio: 2/3.08;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    position: relative;
  }

  .flip-card h2{
    font-size: 32px;
    line-height: 36px; 
    margin-top: 20px; 
    font-family: 'diglu-Medium', sans-serif;
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: var(--white);
    color: var(--black);
  }
  .darkmode--activated .flip-card-front {
    background-color: var(--bleu);
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color:var(--lila);
    transform: rotateY(180deg);
  }
  .darkmode--activated .flip-card-back {
    background-color:var(--bleu);
  }

  .card2{
    margin-top: -300px !important;
  }

  .flip-card .turn {
    width: 50px;
    height: 50px;
    bottom: 35px;
    right: 35px;
    border-radius: 200px;
    border: 1px solid var(--mintsemiforte);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2;
  }

  #entreprise #equipe .turn div{
    background: var(--black);
    display: block;
    width: 30px;
    height: 1px;
    transform-origin: center;
    position: absolute;
    transition: all .3s ease-out;
  }
  .darkmode--activated #equipe .turn div{
    background: var(--white) !important;
  }

  #entreprise #equipe .turn div:first-child{
    transform: rotate(90deg);
    transition: all .3s ease-out;
  }

  #entreprise #equipe .turn:hover div{
    width: 25px;
    transition: all .3s ease-out;
  }

  #entreprise #equipe p{
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    }

  .turnclose{
    transform: rotate(45deg) !important;
    transition: all .3s ease-out;
  }
  .fliptouch {
    transform: rotateY(180deg) !important;
  }

   /*
 * Informations FAQ
  */

  #informations #sidebar{
    background: var(--lila);
  }

  #informations .titelinfopage{
    margin-top: 130px;
    margin-bottom: 25px;
  }

  #informations #infosection{
    background: var(--gray);
    position: relative;
    z-index: -2;
  }
  .darkmode--activated #infosection{
    background: var(--bleufonce) !important;
  }

  #informations #faqsection .avantage{
    padding-right: 20px;
    margin-bottom: 50px;

  }

  #informations #faqsection .avantagetitre{
    border-bottom:var(--mintsemiforte) solid 1px;
    padding-bottom: 10px;
    margin-bottom: 15px; 
  }

  #informations #infosection a{
    color: #000;
  }

  #informations #infosection .avantage{
    min-height: 400px;
    position: relative;
    padding: 35px 55px 35px 45px;
    z-index: 2;
  }

  #informations #infosection .textcontainer{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #informations #infosection .line{
    position: absolute;
    width: 100vw;
    bottom: 0;
    left: -6vw;
    height: 1px;
    background: var(--mintsemiforte);
    z-index: -1;
  }

  #informations #infosection .linev1{
    position: absolute;
    width: 1px;
    top: 35px;
    left: 0;
    min-height: 500px;
    background: var(--mintsemiforte);
    z-index: -1;
  }

  #informations #infosection .linev2{
    position: absolute;
    width: 1px;
    top: 35px;
    right: -1px;
    min-height: 500px;
    background: var(--mintsemiforte);
    z-index: -1;
  }

  #informations .detailbutton{
    width: 48px;
    height: 48px;
    position: absolute;
    background: var(--lila);
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    left: -24px;
    top: 29px;
  }
  .darkmode--activated .detailbutton{
    background: var(--mintsemiforte) !important;
  }

  #informations img{
    transition: all .3s ease-in-out;
  }

  #informations .avantage:hover img{
    transform: rotate(45deg);
    transition: all .3s ease-in-out;
  }

  #informations .infodetails{
    padding-top: 100px;
    min-height: 80vh;
  }

  #informations .infodetails h2{
    margin-bottom: 40px;
  }

  #informations .infodetails .block-type-heading{
    margin: 25px 0 40px 0;
  }

  #informations .infodetails .block-type-text{
    margin: 25px 0;
  }

  #informations .infodetails .block-type-image{
    margin: 25px 0;
  }

  #informations .infodetails .block-type-video{
    margin: 40px 0;
  }

  #informations .infodetailpage .detailbutton{
    position: relative;
    transform: translateX(24px) rotate(-135deg);
    margin-top: 70px;
  }

  #informations #bloglibre{
    position: relative;
  }

  #informations #bloglibre .block-type-video span iframe{
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  #informations #bloglibre a{
    color: var(--mintsemiforte);
    text-decoration: underline;
  }
  #informations #bloglibre a:hover{
    text-decoration: none;
  }

  .impressum{
    background: var(--gray);
  }
  .darkmode--activated .impressum{
    background: var(--bleufonce);
  }

  .impressum .infodetails .datenschutz{
    margin-top: 80px;
  }

   /*
 * Footer
  */

  footer{
    padding: 150px 0 50px 0;
    position: relative;
    z-index: 1;
    background: var(--white);
  }
  .darkmode--activated footer{
    background: var(--backgroundblack);
  }

  .footerinfos{
    margin-top: 50px;
    z-index: 1;
  }

  footer .date{
    margin-bottom: 0;
  }

  footer #cath{
    z-index: -1;
    position: absolute;
    height: 300px;
    bottom: 0;
    stroke-width: 2px;
    left: 32%;
  }
  .darkmode--activated footer #cath .cls-1{
    stroke: var(--bleucathedrale) !important;
  }

  .darkmode--activated footer .logofoot #Groupe_322{
    fill: var(--white);
  }

/* ==========================================================================
   Media queries
   ========================================================================== */

   /* Ultra Big desktop */
@media screen and (min-device-width: 2140px),
(min-width: 2140px) {
  #prestations #skillsIllu {
    max-width: 960px;
    left: 49%;
  }
  #prestations #homeback1{
    width: 60%;
}
#entreprise video{
  width: 100%;
}
.grid-x{
  margin: 0 2vw 0 2vw;
}
header .topheader{
  left: calc(2vw + .9375rem);
}
.homepage h2{
  margin-left: calc(2vw + .9375rem);
}
header #hiddennav nav{
  width: 31%;
}
#prestations #skills{
  padding: 0 40px 0 calc(2vw + .9375rem);
}
#prestations #homeback1 h2
{
  margin-left: calc(2vw + .9375rem);
}
}

/* Big desktop */
@media screen and (min-device-width: 1600px) and (max-device-width: 4000px),
(min-width: 1600px) and (max-width: 4000px) {
   .homepage #homeback2 #animation2 {
    max-width: 62%;
  }
}

/* Desktop */
@media screen and (min-device-width: 1024px) and (max-device-width: 1600px),
(min-width: 1024px) and (max-width: 1600px) {
   .homepage #homeback2 #animation2 {
    max-width: 80%;
  }
#entreprise #equipe .cv p{
  font-size: 16px;
  line-height: 23px;
  }
  #entreprise #equipe .info{
  padding: 15px 20px 20px 20px;
}
.flip-card
  {
      aspect-ratio: 2/3.5;
    }
}

/* Small desktop */
@media screen and (min-device-width: 1024px) and (max-device-width: 1300px),
(min-width: 1024px) and (max-width: 1300px) {
  .homepage h2, .homepage h2 p {
    font-size: 42px;
    line-height: 52px;
  }
  #introduction .maisonimm .infoillutext {
    top: 30%;
    left: -12%;
  }
  #entreprise video{
    margin-top: 25px;
  }
  #prestationsteasing .prestatitre {
    margin-top: -50px;
  }
  h3, h3 p{
    font-size: 25px;
    line-height: 34px;
   }
   #prestationsteasing .prestatitre {
    padding: 10px;
  }
  .flip-card
  {
      aspect-ratio: 2/5.2;
    }
}

/* mini desktop */
@media screen and (min-device-width: 1024px) and (max-device-width: 1100px),
(min-width: 1024px) and (max-width: 1100px) {
  .flip-card
  {
    aspect-ratio: 2/6;
  }
}

 /* IPAD Portrait and Landscape */
@media screen and (min-device-width: 768px) and (max-device-width: 1023px),
(min-width: 768px) and (max-width: 1023px) {
  h3, h3 p{
    font-size: 28px;
    line-height: 38px;
   }
   h2, h2 p{
    font-size: 50px;
    line-height: 60px;
   }
   p{
    font-size: 16px;
    line-height: 24px;
   }

   #entreprise video{
    margin-top: 50px;
  }

   .homepage #hautdepage {
    height: 70vh;
  }
  .homepage #homeback1 {
    height: 70vh;
  }
  .homepage #homeback2 {
    height: 70vh;
    width: 54%;
  }
  .homepage #homeback2 #animation2 {
    width: 100%;
  }
  .homepage #jaugelongue {
    height: 100%;
  }
  .homepage h2, .homepage h2 p {
    font-size: 30px;
    line-height: 39px;
  }
  header .soustitre h3 {
    top: 50px;
  }
  .homepage #homeback2 {
    right: 6%;
  }

   #introduction .illustrationinteractive{
    margin-top: 50px;
    margin-bottom: 150px;
  }
  #introduction .illustrationinteractive .illubouton{
    width: 34px;
    height: 34px;
  }

  #Form{
    padding: 35px;
  }

  #Form label, #Form .submit input{
    font-size: 16px;
    line-height: 22px;
  }

  #Form .interetcela, #Form .etcela {
    padding-top: 0;
    margin-bottom: 10px;
  }

  #introduction .maisonimm .infoillutext {
    top: 98%;
    left: 0%;
  }
  #introduction .illustrationinteractive .infoillutext {
    width: 350px;
  }
  #introduction .entrepriseillu .infoillutext {
    top: 55%;
    right: 0;
  }

  #prestationsteasing .presta{
    margin-bottom: 50px;
  }
  #prestationsteasing .prestabutton {
    margin-top: 50px;
  }
  #prestationsteasing .prestatitre h3, #prestationsteasing .prestatitre h3 p{
    font-size: 30px;
    line-height: 40px;
  }
  
  #apropteasing {
    background: none;
  }
  .darkmode--activated #apropteasing {
    background: none;
  }

  #prestations.darkmode--activated .darkmode-background {
    background: var(--bleu) !important;
  }

  #prestations #skills{
    width: 90%;
    height: 50%;
    padding: 0 40px 0 calc(5vw + .9375rem);
  }
  #prestations .skill{
    min-height: 450px;
    margin-top: 50px;
    margin-bottom: 600px;
  }
  #prestations .skill:last-child{
    margin-bottom: 600px;
  }
  #prestations #hautdepage {
    height: 25vh;
  }
  #prestations #homeback1 {
    height: 25vh;
  }
  #prestations #skillsIllu {
    width: 85%;
    height: 55vh;
    left: 0%;
    bottom: 40px;
  }
  #prestations #skillsIllu{
    background: none;
  }
  #prestations{
    background: var(--mint);
  }
  #prestations footer{
    margin-top: 600px;
  }
  .darkmode--activated #skills .skill{
    background: var(--bleufonce) !important;
  }

  #entreprise #introentreprise {
    position: relative;
    margin-top: 0;
  }
  #entreprise #hautdepage {
    height: auto;
    padding-bottom: 0;
  }
  #entreprise #equipe .flip-card {
    margin-bottom: 100px;
  }
  #entreprise #introentreprise h2, #entreprise #introentreprise h2 p{
    font-size: 28px;
    line-height: 38px;
   }
}

 /* Iphone Portrait and Landscape */
@media screen and (max-device-width: 768px), (max-width: 768px) {
  .grid-x {
    margin: 0 5vw 0 5vw;
  }
  h3, h3 p{
    font-size: 22px;
    line-height: 32px;
   }
   h2, h2 p{
    font-size: 22px;
    line-height: 32px;
   }
   p{
    font-size: 16px;
    line-height: 24px;
   }
   section {
    padding: 75px 0;
  }
  header .topheader {
    top: 5px;
  }

  header #sidebar {
    width: 60px;
    background: none;
    height: 10vh;
  }
  header .soustitre, header .contactbutton{
    display: none;
  }
  header .topheader{
    left: calc(4vw + .9375rem);
  }
  header h1{
    margin-top: 0;
  }
  header h1 svg{
    width: 150px;
  }
  header #hiddennav nav {
    width: 85%;
  }
  .homepage #homeback2 {
    width: 60%;
    right: 0;
  }
  .dark-toggle-text{
    display: none;
  }
  .dark-toggle {
    right: 80px;
    top: 23px;
  }
  .dark-toggle-checkbox {
    position: absolute;
    right: 0;
  }
  #introduction {
    padding-top: 50px;
  }
  #introduction .illustrationinteractive {
    margin: 120px 0 100px 0;
  }
  #introduction .illustrationinteractive .illubouton {
    width: 25px;
    height: 25px;
  }
  
  #introduction .grid-margin-x > .cell {
    width: 100%;
  }
  #introduction .grid-margin-x > .introtxt {
    width: 90%;
  }
  #introduction .illustrationinteractive .infoillutext {
    width: 100%;
    max-height: 300px;
    padding: 15px;
    overflow: visible;
    height: auto;
    max-height:max-content;
  }
  #introduction .illustrationinteractive .infoillutext h3{
    padding-right: 28px;
  }

         
  #Form{
    padding: 15px 30px 15px 15px;
    width: 79vw;
  }

  #Form .formintro{
    padding-right: 45px;
  }

  #Form .formintro div{
    display: none;
  }

  #Form label, #Form .submit input{
    font-size: 16px;
    line-height: 22px;
  }
  #Form input, #Form textarea {
    margin-top: 0;
  }

  #Form textarea {
    border-radius: 20px;
  }
  #Form .question {
    padding-top: 0;
  }

  #Form .themes{
    display: none;
  }

  #Form textarea {
    padding: 15px;
  }

  #apropteasing {
    background: none;
  }
  .darkmode--activated #apropteasing {
    background: none;
  }
  #prestations h2, #prestations h2 p {
    font-size: 35px;
    line-height: 45px;
  }
  #prestations .dark-toggle {
    left: 60%;
  }
  #prestations.darkmode--activated .darkmode-background {
    background: var(--bleu) !important;
  }
  #prestations #skills{
    width: 100%;
    height: 50%;
    padding: 0 30px 0 calc(4vw + .9375rem);
  }
  #prestations .skill{
    min-height: 450px;
    margin-top: 50px;
    margin-bottom: 450px;
    padding: 20px;
  }
  .darkmode--activated #skills .skill{
    background: var(--bleufonce) !important;
  }
  #prestations #homeback1 h2 {
    margin-left: calc(4vw + .9375rem);
  }
  #prestations .skill:last-child{
    margin-bottom: 350px;
  }
  #prestations #hautdepage {
    height: 10vh;
    min-height: 200px;
  }
  #prestations #homeback1 {
    min-height: 200px;
    width: 100%;
    height: 10vh;
  }
  #prestations #skillsIllu {
    width: 100%;
    height: 55vh;
    left: 0%;
    bottom: 50px;
  }
  #prestations #skillsIllu{
    background: none;
  }
  .darkmode--activated #skillsIllu{
    background: none !important;
  }
  #prestations{
    background: var(--mint);
  }
  #prestationsteasing .prestatitre {
    margin-top: -45px;
    padding: 10px;
  }
  #prestationsteasing .presta4 .animpresta {
    margin-top: 0;
  }
  #prestationsteasing .prestatitre h3 p {
    font-size: 16px;
    line-height: 24px;
  }
  #prestationsteasing .presta{
    margin-bottom: 50px;
  }
  #prestationsteasing .prestabutton {
    margin-top: 50px;
  }
  #prestations footer{
    margin-top: 450px;
  }

  #entreprise #introentreprise {
    position: relative;
    margin-top: 0;
    padding: 50px 0;
    height: auto;
  }
  #entreprise #hautdepage {
    height: auto;
    padding-bottom: 0;
  }
  #entreprise #equipe .flip-card {
    margin-bottom: 75px;
  }
  #entreprise #introentreprise h2, #entreprise #introentreprise h2 p{
    font-size: 28px;
    line-height: 38px;
   }
   #entreprise video{
    margin-top: 100px;
    width: 100%;
  }
  #entreprise .flip-card {
    aspect-ratio: 2/3.9;
  }
  #entreprise #equipe .info {
    padding: 20px 20px 20px 20px;
  }
  #entreprise .flip-card-back {
    padding: 0;
  }
  #entreprise .qr {
    display: none;
  }
  #informations #sidebar{
  background: none;
  }

  .footerinfos {
    margin-top: 50px;
  }
  footer #cath {
    left: 41%;
  }
  
}

 /* Iphone Portrait */
 @media screen and (max-device-width: 600px), (max-width: 600px) {
  .homepage #homeback1 {
    position: relative;
    width: 100vw;
    height: auto;
    min-height: 45vh;
  }
  .homepage #homeback1 h2{
    position: relative;
    margin-top: 15px;
  }
  .homepage #jaugelongue {
    display: none;
  }
  .homepage #hautdepage {
    height: auto;
    min-height: 500px;
  }
  .homepage .containeranim1 video {
    min-height: 240px;
    width: 65%;
  }
  .homepage #compterebour {
    text-align: center;
    font-size: 15px;
  }
  .homepage #homeback2 {
    position: relative;
    width: 100vw;
    height: auto;
    min-height: 350px;
    left: 0;
    bottom: 0;
  }
  .homepage #homeback2 #animation2 {
    max-width: 70%;
  }
  #homeback1 h2 {
    z-index: 2;
    position: absolute;
    bottom: 0;
    margin-left: calc(2vw + .9375rem);
  }

  #introduction .t-ventil-entreprise .illubouton {
    top: 18%;
    left: 8%;
  }
  #introduction .t-chaleur-entreprise .illubouton {
    top: 72%;
    left: -1%;
  }
  #introduction .t-lum-entreprise .illubouton {
    top: 47%;
    left: 19%;
  }
  #introduction .t-distance-entreprise .illubouton {
    top: 91%;
    left: 22%;
  }
  #introduction .t-solaire-entreprise .illubouton {
    top: 13%;
    left: 40%;
  }
  #introduction .t-management-entreprise .illubouton {
    top: 67%;
    left: 24%;
  }
  #introduction .t-solaire-imm .illubouton {
    top: -5%;
    left: 86%;
  }
  #introduction .t-solaire-maison .illubouton {
    display: none;
  }
  #introduction .t-fenetre-imm .illubouton {
    display: none;
  }
  #introduction .t-voiture-imm .illubouton {
    display: none;
  }
  #introduction .t-voiture-maison .illubouton {
    top: 92%;
    left: 41%;
  }
  #introduction .t-plafond-imm .illubouton {
    top: 75%;
    left: 78%;
  }
  #introduction .t-plafond-maison .illubouton {
    display: none;
  }
  #introduction .t-toiture-maison .illubouton {
    display: none;
  }
  #introduction .t-toiture-imm .illubouton {
    top: 0%;
    left: 54%;
  }
  #introduction .t-facade-maison .illubouton {
    display: none;
  }
  #introduction .t-facade-imm .illubouton {
    top: 26%;
    left: 79%;
  }
  #introduction .t-chaleur-maison .illubouton {
    top: 96%;
    left: 61%;
  }
  #introduction .t-chaleur-imm .illubouton {
    display: none;
  }
  #prestationsteasing .animpresta video{
  transform: scale(.85) translateX(5px) translateY(15px);
}


 }

  /* Iphone Portrait illuswitch */
  @media screen and (max-width: 500px), (max-device-width: 500px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
  /*
 * Illustration interactive Mobile zooming
  */
  #introduction .entrepriseillu .infoillutext {
    top: -37px;
    left: -20%;
  }
  #introduction .maisonimm .infoillutext {
    top: -37px;
    left: -20%;
  }
  #introduction{
    width: 100vw;
    overflow-x: hidden;
  }
  .switchindustriel{
    transform: scale(1.7) translateX(20%);
    transition: all .5s ease-out;
  }
  .switchmaison{
    transform: scale(1.7) translateX(0);
    transition: all .5s ease-out;
  }
  .switchimm{
    transform: scale(1.7) translateX(-20%);
    transition: all .5s ease-out;
  }
  #introduction .infoillutext{
    transform: scale(0.6);
  }
  #introduction .swithillu{
    display: block;
    z-index: 1;
    width: 90%;
  }
  #introduction .swithillu button {
    margin-bottom: 15px;
  }
  #introduction #comeform{
    margin-top: 30px;
  }

  .switchtxtindustriel{
    left: -20% !important;
  }
  .switchtxtmaison{
    left: 0 !important;
  }
  .switchtxtimm{
    left: 20% !important;
  }

  .iluuswithbuttonactive{
    color: var(--mintsemiforte) !important;
  }
  }

 /* general height */
 @media screen and (max-device-height: 600px), (max-height: 600px) {
  #sidebar h3{
    color: var(--gray) !important;
  }
 }

  /* Iphone Portrait minimini */
  @media screen and (max-device-width: 388px), (max-width: 388px) {
 #entreprise .flip-card {
  aspect-ratio: 2/6;
}
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}