#fader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999999;
        pointer-events: none;
        background: white;
        animation-duration: 300ms;
        animation-timing-function: ease-in-out;
      }

      #fader:before {
        content: 'fade'
      }

      @keyframes fade-out {
        from { opacity: 1 }
        to { opacity: 0 }
      }

      @keyframes fade-in {
        from { opacity: 0 }
        to { opacity: 1 }
      }

      #fader.fade-out {
        opacity: 0;
        animation-name: fade-out;
      }

      #fader.fade-in {
        opacity: 1;
        animation-name: fade-in;
      }
     
@font-face {
    font-family: 'OpenSauce';
    src: url('open-sauce_sans-semi.woff2') format('woff2'),
        url('open-sauce_sans-semi.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenSauce';
    src: url('open-sauce_sans-regular.woff2') format('woff2'),
        url('open-sauce_sans-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


     html {  height:100%;   scroll-behavior: smooth;  }
       
        .text-spacer { clear:both;width:100%;height:.75rem; }
        .texte { font-size:.9rem;font-style:normal; text-align:left; width:90%;border-radius:1rem;padding:1rem;margin-left:auto;margin-right:auto;margin-top:1rem}
     h5 { display:inline-block;text-transform:uppercase;margin:0;margin-left:10%;margin-right:10%;width:80%;margin-top:.5rem;  font-weight:normal; font-size:.95rem;}
     h4 {margin:0; display: block; font-weight:bold; font-size:1.6rem; line-height:1.6rem;}  
     h3 { display:inline-block;text-transform:uppercase;margin:0;margin-left:10%;margin-right:10%;width:80%;margin-top:.5rem;  font-weight:normal; font-size:.85rem;}
     h2 {margin:0; display: block; font-weight:bold; font-size:1.4rem; line-height:1.4rem;}  
     h1 { display: block; margin-top:0rem;font-size:.85rem;text-transform:uppercase;line-height:1.1rem;font-weight:600; }
     .inside-col { display:block;color:white;text-decoration:none;width:90%;padding:5%;text-align:center; }
     .langue { text-decoration:none;display:inline-block;margin:7px;height:17px;box-shadow: 1px 1px black;  filter: grayscale(100%); }
     .langue:hover {  filter: grayscale(10%); transform: scale(1.1)}
     .langue-select {  filter: grayscale(0%); }
     
     .bouton { -webkit-transition: 0.2s ease; 
    -moz-transition: 0.2s ease; transition: 0.2s ease;margin:.35rem;background-color:#e36c8b; color:white; display: inline-block; text-decoration:none;border-radius:1rem;padding:.5rem .75rem;     }
     .bouton:hover, .bouton-neutre:hover  { box-shadow: 6px 6px 14px -11px rgba(0,0,0,0.4);
-webkit-box-shadow: 6px 6px 14px -11px rgba(0,0,0,0.4);
-moz-box-shadow: 6px 6px 14px -11px rgba(0,0,0,0.4);
     transform:scale(1.05)}
     .bouton-neutre { -webkit-transition: 0.2s ease; 
    -moz-transition: 0.2s ease; transition: 0.2s ease;margin:.35rem;background-color:black; color:white; display: inline-block; text-decoration:none;border-radius:1rem;padding:.5rem .75rem;     }
        
     
     .carre { color:white;text-decoration:none; -webkit-transition: 0.2s ease; 
    -moz-transition: 0.2s ease; transition: 0.2s ease;display:block;width:100%;height:22vh;padding:4vh 3%;text-align:center;overflow-y:hidden}
     .carre:hover { transform: scale(1.05) rotate(-1deg) translate(-3%)}
     .carre img {  -webkit-transition: 0.2s ease; 
    -moz-transition: 0.2s ease; transition: 0.2s ease; }
     .carre:hover img { transform: scale(0.8)}
     .icone-insta {  -webkit-transition: 0.2s ease; 
    -moz-transition: 0.2s ease; transition: 0.2s ease;position:absolute;top:3vh;right:3vh;height: 33px  }
     .icone-insta:hover { transform: rotate(-6deg) scale(1.3); box-shadow: 6px 6px 14px -11px rgba(0,0,0,0.4);
-webkit-box-shadow: 6px 6px 14px -11px rgba(0,0,0,0.4);
-moz-box-shadow: 6px 6px 14px -11px rgba(0,0,0,0.4);}
        .homepage { padding:.35rem .75rem; color:black;background:white;font-family:Monospace;font-size:.75rem;border-radius:.25rem; display:block; position:absolute; top:1rem; right:1rem;}
        .container { display:block;width:100%;min-height:82vh;padding:4vh 3%;text-align:center;  }
   
    
    
    .focus-shake:hover { animation: shake 0.62s cubic-bezier(.36, .07, .19, .67) both;
  transform: translate3d(0, 0, 0)  rotate(0deg);
  backface-visibility: hidden;
  perspective: 1000px; 
} 
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0) rotate(1.5deg); 
  }
  20%,
  80% {
    transform: translate3d(2px, 2px, 0) 
     rotate(-1.5deg); 
  }
  30%,
  50%,
  70% {
    transform: translate3d(-3px, -2px, 0) rotate(2deg); 
  }
  40%,
  60% {
    transform: translate3d(3px, -3px, 0) rotate(-2deg); 
  }
}    .focus-shake {  -webkit-transition: 0.3s ease; 
    -moz-transition: 0.3s ease; transition: 0.3s ease; }
      
             
.focus-popup { cursor:alias;
display:none;   z-index:2; position:fixed; min-width:66%;max-width:90%; top:5%;right:5%;
}  
  .focus-popup:focus {
display:none !important;
}
        
.focus-shake:focus + .focus-popup {
display:block;
}
        
        
.plus-popup { cursor:alias;
display:none;   z-index:2; position:fixed; min-width:66%;max-width:90%; top:5%;right:5%;
}  
  .plus-popup:focus {
display:none !important;
}
        
.plus-savoir:focus + .plus-popup {
display:block;
}
        
        .plus-popup { position:fixed; 
     left:35%;right:0;top:0;bottom:0;  margin:0;padding:0;
            background-color:white; background-color:rgb(255,255,255); /* fallback for IE 8 and below */
    background-color:rgba(255,255,255,0.7);
        }.inside-popup { margin-top:35%;width:65%;padding:5%;border-radius:1rem;margin-left:5%;margin-right:10% background:color:white; background-color:rgb(234,232,219); color:rgb(0,0,0); }