/* html, body, #main {
  height:100%;
} */

html {
  /* height: 100%;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  overflow: hidden; */
}

html, body {
  height:100%;
}
a { 
  text-decoration: none;
  color: inherit;
}

body {
  -webkit-tap-highlight-color: transparent;
    /* Sacramento */
    overflow: hidden;
    background: rgb(17,18,63);
    
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
      monospace;
  }


  .isDesktop {
    display: block;
}
.isDesktopFlex {
    display: inline-flex;
}
.isMobile {
    display: none;
}
.isMobileFlex {
    display: none;
}



.comte-auteur {
  color: #E8CA7D;
  display: flex;
  justify-content: end;
}


.podmielle {
  display: none;
}
#podmielle {
  display: none;
}

.traitPeintureAcr {
  position: relative;
  height: 1px;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);

  background: -webkit-linear-gradient(left, rgb(90 90 90 / 0%) 0%, #e8ca7da9 50%, rgb(90 90 90 / 0%) 100%);
}




.subTitle {

  color: #ffffff;
  /* background: -webkit-linear-gradient(#ffffff, rgb(246, 250, 255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  font-family: 'Montserrat Alternates', sans-serif;

  margin-block-start: 0;
  /* margin-block-end: 1.8em; */
  margin: 0;

  font-weight: 900;
  font-size: 1.6em;
}

.subTitle span {
  
}


#modalPreviewDescription {
  max-width: 80%;
}


.burger-arbrePng {
  width: 100%;
  bottom: 50px;
  position: absolute !important;
  z-index: 5;
}


.subTitleSectionWrapper {
  font-size: 1.2em;

  padding: 9px 0px;
  margin-bottom: 45px;

  background: rgb(0,0,0);
  background: -moz-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(252,218,130,0.2455357142857143) 50%, rgba(0,0,0,0) 100%);
  background: -webkit-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(252,218,130,0.2455357142857143) 50%, rgba(0,0,0,0) 100%);
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(252,218,130,0.2455357142857143) 50%, rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);

  cursor: pointer;
  transition: all 0.5s;
}
.subTitleSectionWrapper:hover {
  opacity: 0.85;
  transform: translateX(-4px);
}
.subTitleSectionWrapper:hover .acryliqueBackBtn {
  transform: translateX(-10px);
}

.subTitleSection {
  color: #ffffff;
  background: -webkit-linear-gradient(#ffffff, rgb(246, 250, 255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Montserrat Alternates', sans-serif;

  margin-block-start: 0;
  /* margin-block-end: 1.8em; */
  margin: 0;

  font-weight: 300;
  font-size: 1.7em;

  margin-left: 30px;
}


.subSubTitle {
  cursor: pointer;
  /* color: #fff2d1; */
  color: #fff8e6;
  font-size: 1.9em;
  margin-block-start: 0;
  text-align: left;
  transition: all 0.5s;
}
.subSubTitle:hover {
  transform: translateX(10px);

  /* GARDER UN DES 2 au moins  */
  /* filter: drop-shadow(2px 4px 6px black); */
  /* filter: invert(1); */
  /* filter: drop-shadow(2px 4px 6px black) invert(1); */

  /* color: #fbfbfb; */
  color: #edeae1;
  opacity: 0.9;
  /* text-shadow: 1px 1px 2px white !important; */
}





.homepageDivider {
  height:1px; 
  width:0%; 
  margin: 0 auto;
  background-color:white;

  animation: dividerGrowth 1s 0.5s forwards ease, shink 1s 3.5s forwards ease;
}
@keyframes dividerGrowth {
  from {
    width: 0%;
  }
  to {
    width:25%; 
  }
}
@keyframes shink {
  from {
    width:25%;
  }
  to {
    width:0%;
  }
}


.wrapperOverflow {
  overflow: hidden;
  width: 100%;
  height: 100%;
}


.ongletWrapper {
  width: fit-content;
}
.underline {
  width: 0%;
  /* height: 2px; */
  height: 1px;
  background-color: white;
  transition: 0.4s;
}

.ongletsLine {
  display: flex;
  justify-content: center;

  width: 50%;
  margin: 0 auto;
  flex-flow: wrap;
}

#ceinture {
  transition: all 0.5s;
}
/* .logo-Container {
  transition: all 0.4s;
}
.logo-Container:hover .logoImage1 {
  animation: revertSun 1s ease !important;
}
@keyframes revertSun {
  from {
    transform: translateY(370px) rotate3d(1, 1, 1, 190deg);
  }
  to {
    transform: translateY(0px) rotate3d(1, 1, 1, 0deg);
  }
} */

.toggle2dLogo {
  animation: click2dLogo1 2.5s ease forwards normal !important;
  /* transform: translateY(370px) rotate3d(1, 1, 1, 0deg); */
}
.toggle3dLogo {
  animation: click3dLogo1 2.5s ease forwards normal !important;
  /* transform: translateY(370px) rotate3d(1, 1, 1, 0deg); */
}
@keyframes click2dLogo1 {
  from {
    transform: translateY(0px) rotate3d(1, 1, 1, 190deg);
  }
  to {
    transform: translateY(0px) rotate3d(1, 1, 1, 0deg);
  }
}
@keyframes click3dLogo1 {
  from {
    transform: translateY(0px) rotate3d(1, 1, 1, 0deg);
  }
  to {
    transform: translateY(0px) rotate3d(1, 1, 1, 190deg);
  }
}

#bodyAquarelle {
  overflow: hidden;
  position: relative;

  background: rgb(55, 133, 120);
  background: -moz-linear-gradient(180deg, rgb(20 21 55) 0%, rgb(54 138 151) 100%);
  background: -webkit-linear-gradient(180deg, rgb(20 21 55) 0%, rgb(54 138 151) 100%);
  background: linear-gradient(180deg, rgb(20 21 55) 0%, rgb(54 138 151) 100%);

  transition: all 1.5s;
}

#bgStars {
  transition: all 3.2s;
}




    /* RAJOUT sur la div wrapper bgStars: Les étoiles filantes => */
    .bgStars span{

      position: absolute;
      top:15%;
      left:50%;
      width: 4px;
      height: 4px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(255,255,255,0.1),0 0 0 8px rgba(255,255,255,0.1),0 0 20px rgba(255,255,255,0.1);

      opacity: 0.5;
      animation: etoileFilante 12s 0s linear infinite;

  }
  .bgStars span::before{
      content:'';
      position: absolute;
      top: 15%;
      transform: translateY(-15%);
      width: 170px;
      height: 1px;
      background: linear-gradient(90deg,#fff,transparent);
  }
  @keyframes etoileFilante
  {
      0% {
        opacity: 0;
      }
      89% {
        opacity: 0;
      }
      90% {
        transform: rotate(315deg) translateX(0);
        opacity: 0;
      }
      93% {
        opacity: 1;
      }
      97% {
        opacity: 0;
      }
      100% {
        transform: rotate(315deg) translateX(-1000px);
        opacity: 0;
      }

      /* 0% {
        opacity: 0;
      }
      79% {
        opacity: 0;
      }
      80% {
        transform: rotate(315deg) translateX(0);
        opacity: 1;
      }
      94% {
        opacity: 1;
      }
      100% {
        transform: rotate(315deg) translateX(-1000px);
        opacity: 0;
      } */

  }


  .etoileFilanteBurger {
    position: absolute;

    bottom: 502px;
    left: 120%;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.1),0 0 0 8px rgba(255,255,255,0.2),0 0 20px rgba(255,255,255,0.1);

    opacity: 1;
    animation: etoileFilanteBurger 12s 0s linear infinite;

  }
  .etoileFilanteBurger::before {
    content:'';
    position: absolute;
    top: 15%;
    transform: translateY(-15%);
    width: 130px;
    height: 1px;
    background: linear-gradient(90deg,#fff,transparent);
  }

  
  @keyframes etoileFilanteBurger
  {

      0% {
        transform: rotate(320deg) translateX(0px);
        opacity: 0;
      }
      3% {
        opacity: 0;
      }
      7% {
        opacity: 1;
      }
      10% {
        transform: rotate(320deg) translateX(-770px);
        opacity: 0;
      }
      11% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
  }



  #burgerActif-shadePage {
    background-color: #00000000;
    /* background-color: #000000b8; */
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* z-index: 9; */

    transition: all 0.7s;
  }
  .shadePage-active {
    background-color: #00000059 !important;
    z-index: 999999 !important;
  }



#main {
  text-align: center; 

  /* Anim background SUNFLOWER */
  background-position: 0%;
  background-size: 200%;


  background: rgb(17,18,63);
  background: -moz-linear-gradient(59deg, rgba(17,18,63,1) 49%, rgba(255,186,49,0.2) 100%);
  background: -webkit-linear-gradient(59deg, rgba(17,18,63,1) 49%, rgba(255,186,49,0.2) 100%);
  background: linear-gradient(59deg, rgba(17,18,63,1) 49%, rgba(255,186,49,0.2) 100%);

  /* transition: all 2.5s; */
  transition: top 2.5s, transform 2.5s, filter 0.5s;
}
.main {
    animation: bgSunflower 3s 0s normal forwards ease-in-out; 
  }
  @keyframes bgSunflower {
    from {
      background-position: 0%;
      background-size: 200%;
    }
    to {
      background-position: 100%;
      background-size: 200%;
    }
  }

  #titlesDiv {
    transition: filter 0.5s;
  }

  .newGradient {
    animation: bgGradientChange 4s forwards ease; 
  }
  @keyframes bgGradientChange {
    from {
      background-position: 100%;
      background-size: 200%;
      /* background: linear-gradient(59deg, rgba(17,18,63,1) 49%, rgba(255,186,49,0.2) 100%); */
    }
    to {
      background-position: 0%;
      background-size: 200%;
      /* background: #040c0e; */

      background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
      /* background: linear-gradient(59deg, rgb(7, 7, 12) 49%, rgba(218, 163, 54, 0.2) 100%); */
    }
  }
  .newGradient2 {
    animation: bgGradientChange2 4s forwards ease; 
  }
  @keyframes bgGradientChange2 {
    from {
      background-position: 0%;
      background-size: 200%;
      background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    }
    to {
      background-position: 100%;
      background-size: 200%;
   
      /* background: linear-gradient(59deg, rgb(7, 7, 12) 49%, rgba(218, 163, 54, 0.2) 100%); */
    }
  }



  .logo-Container {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }



  .mainBgRotate {
    animation: gradientRotate 2.5s ease forwards normal !important;
  }
  @keyframes gradientRotate {
    from {
      transform: rotate(0deg);
      /* background: linear-gradient(59deg, rgba(17,18,63,1) 49%, rgba(255,186,49,0.2) 100%); */
    }
    to {
      transform: rotate(180deg);
      /* background: linear-gradient(219deg, rgba(17,18,63,1) 49%, rgba(255,186,49,0.2) 100%); */
    }
  }
  
  .main-logo {
    height: 40vmin;
    pointer-events: none;
  }
  
  @media (prefers-reduced-motion: no-preference) {
    .main-logo1 {
      width: 347px;
      height: 363px;
      animation: App-logo-spin infinite 50s linear;
      
    }
    .main-logo2 {
      animation: App-logo-spin2 infinite 78s linear;
    }
  }



  /* Commenté: animation logo1 et logo2 delayed  */
  .logoImage1 {
    transform: translateY(370px) rotate3d(1, 1, 1, 0deg);
    /* animation: slideLogo1 2.5s 2.2s ease forwards normal; */
    animation: slideLogo1 2.5s 1s ease forwards normal;
  }
  .logoImage2 {
    transform: translateY(0px);
    animation: slideLogo2 2.5s 1s ease forwards normal;
  }
  @keyframes slideLogo1 {
    from {
      transform: translateY(370px) rotate3d(1, 1, 1, 0deg);
    }
    to {
      transform: translateY(0px) rotate3d(1, 1, 1, 190deg);
    }
  }

  @keyframes slideLogo2 {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(-371px);
    }
  }

  .subContent {
    position: relative;
    transform: translateY(-250px);

    animation: slideSubContent 2.5s 1s ease forwards normal;
  }
  @keyframes slideSubContent {
    from {
      transform: translateY(-250px);
    }
    to {
      transform: translateY(0px);
    }
  }

  #gna {
    color: #ffba31;
    font-family: 'Montserrat Alternates', sans-serif;

    position: absolute;
    top: 20%;

    font-size: 0em;
    opacity: 0;
    animation: fadeIn 0.7s 3s forwards ease-in; 
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }


  .contactFormDisclaimer {
    color: #e7e7e7;
    font-style: italic;
    font-size: 0.9em;
    line-height: 1em;
    text-align: justify;

    width: 95%;
    margin: 0 auto;
  }


  .mentionsLegales-content {
    z-index: 999999; 
    margin: 40px auto;
  }



  .mentionsLegalesMain {
    z-index: 99999;
    position: relative;
    text-align: center;
    color: white;

    opacity: 0;

    animation: fadeIn 1.5s 1.2s ease forwards;
  }


  .contactContent-merci {
    /* margin-top: 60px; */
    position: relative;
    top: 25%;

    display: inline-flex;
    flex-direction: column;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
  }


  .mentionsLegale-backBtn {
    cursor: pointer;
    z-index: 99999999999;
    position: relative;
    padding: 8px 18px;

    background-color: #e8ca7d;
    color: #141537;
    border-radius: 3px;

    position: relative;
    top: 50px;

    border: 1px solid rgba(255, 255, 255, 0);

    transition: all 0.3s;
  }
  .mentionsLegale-backBtn:hover {
    background-color: #212353;
    color: #e8ca7d;
    border: 1px solid #e8ca7d;
  }


  .contactFormWrapper {
    width: 100%;
    margin: 20px auto;


    opacity: 0;
    animation: fadeIn 1.5s 1s ease forwards;
  }
  .contactForm {
    color: white;
    display: inline-flex;
    flex-direction: column;
    /* width: auto; */
    /* width: 40%; */
    width: 500px;

    position: relative;
    left: 50%;
    transform: translateX(-50%);

    padding: 20px 30px 30px 30px;
    /* background-color: #0b1e4f; */
    /* background-color: #0b1e4fc4; */
    /* border: 1px solid #e8ca7d; */
    /* box-shadow: 0px 0px 20px #e8ca7d9c; */
    border-radius: 20px;
  }
  .contactForm label {
    font-family: 'Montserrat Alternates', sans-serif;
    padding: 5px;
    margin-top: 3px;
  }
  .contactForm input, .contactForm textarea {
    border-radius: 6px;
    padding: 10px 7px;
    background-color: #e0dde3;
    color: black;
    border-color: #ffffff42;
  }

  .fieldInfo {
    font-style: italic;
    color: rgb(255 236 135);
    font-size: 80%;
  }

  .contactFormSubmitBtn {
    width: 32%;
    padding: 10px 10px !important;
    border-radius: 6px;
    background-color: #e8ca7d !important;
    margin: 50px auto 0px auto;
    font-size: 1.2em;
    font-family: 'Montserrat Alternates', sans-serif;
    cursor: pointer;
    font-weight: 600;
    color: #371837 !important;
    border: 2px solid #e8ca7d00;

    transition: all 0.4s;
  }
  .contactFormSubmitBtn:hover {
    background-color: #0b1e4fc4 !important;
    color: #e8ca7d !important;
    border: 2px solid #e8ca7d;
    letter-spacing: 1px;
  }


  .gallery-item-section1fix {
      height: 100px !important;
  }
  .gallery-item-section1fix img {
      width: 100px !important;
      height: 100px !important;
  }

  .gisf-haushka {
    height: 120px !important;
  }
  .gisf-haushka img {
    width: 120px !important;
    height: 120px !important;
  }

  .navBurgerDisabled {
    /* opacity: 0.37; */
    color: #888888 !important;
    pointer-events: none;
  }

  .formValidated-backBtn {
    color: black;
    padding: 15px 35px;
    background-color: #e8ca7d;
  }


  .formLinePc {
    width: 100%;
    gap: 30px;
    display: inline-flex;
    /* justify-content: space-between; */
    /* justify-content: flex-start; */
    justify-content: center;
  }
  .formLineElemPc {
    display: inline-flex;
    flex-direction: column;
  }
  
  
  .logo-Container {
    width: 347px;
    height: 372px;
    cursor: pointer;
  
    position: relative;
  }
  .logo-image {
    position: relative;
    /* position: absolute; */
  }

  
  .title {

    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 160%;
  
    /* font-family: 'Amatic SC', cursive;
    letter-spacing: 9px; */
  
    letter-spacing: 5px;
  
    /* font-family: 'Poiret One', cursive;
    letter-spacing: 6px; */
  
      /* font-family: 'Lato', sans-serif;  
    letter-spacing: 3px; */
  
    /* font-family: 'Zen Loop', cursive;
    letter-spacing: 6px; */
  
      /* font-family: 'Ms Madi', cursive;
    letter-spacing: 6px; */
  
    font-weight: 200;
  }
  
  .main-header {
    /* background-color: #11123f; */


    /* background-color: #282c34; */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;

  }
  @keyframes backgroundSlide {
    from {

    }
    to {

    }
  }

  .accueilLink {
    text-decoration: none;
    font-weight: 300;
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 0.9em;
    text-wrap: nowrap;

    transition: all 0.7s;
  }
  .accueilLink-1 {
    color: #ff4444;
  }
  .accueilLink-2 {
    color: #ff7d3d;
  }
  .accueilLink-3 {
    color: #e3cf2e;
  }
  .accueilLink-4 {
    color: #80cd38;
  }
  .accueilLink-5 {
    color: #41c5a9;
  }
  .accueilLink-6 {
    color: #3599f1;
  }
  .accueilLink-7 {
    color: #ed2fd4;
  }


  .accueilLink-1:hover {
    /* animation: linkHover1 0.4s 0s ease normal forwards; */
    color: #ff8383;
  }
  /* @keyframes linkHover1 {
    from {
      color: #ff4444;
    }
    to {
      color: #ff8383;
    }
  } */
  .accueilLink-1:hover + .underline {
    animation: underlineShow 1.1s 0.05s ease forwards;
    opacity: 0.55 !important;
  } 


  #svgAuroreBoreale {
    position: absolute;
    fill: none;
    stroke: #ffecbc;
    filter: blur(0px) drop-shadow(0px 0px 2px #ffecbc);
  }


  .accueilLink-2:hover {
    /* animation: linkHover2 0.4s 0s ease normal forwards; */
    color: #ffa97e;
  }
  /* @keyframes linkHover2 {
    from {
      color: #ff7d3d;
    }
    to {
      color: #ffa97e;
    }
  } */
  .accueilLink-2:hover + .underline {
    animation: underlineShow 0.6s 0.05s forwards ease;
    opacity: 0.7 !important;
  } 


  .accueilLink-3:hover {
    /* animation: linkHover3 0.4s 0s ease normal forwards; */
    color: #ebde82;
  }
  /* @keyframes linkHover3 {
    from {
      color: #e3cf2e;
    }
    to {
      color: #ebde82;
    }
  } */
  .accueilLink-3:hover + .underline {
    animation: underlineShow 1.1s 0.05s forwards ease;
    opacity: 0.7 !important;
  } 


  .accueilLink-4:hover {
    /* animation: linkHover4 0.4s 0s ease normal forwards; */
    color: #b1e482;
  }
  /* @keyframes linkHover4 {
    from {
      color: #80cd38;
    }
    to {
      color: #b1e482;
    }
  } */
  .accueilLink-4:hover + .underline {
    animation: underlineShow 0.6s 0.05s forwards ease;
    opacity: 0.7 !important;
  } 



  .accueilLink-5:hover {
    /* animation: linkHover5 0.4s 0s ease normal forwards; */
    color: #85ecd6;
  }
  /* @keyframes linkHover5 {
    from {
      color: #41c5a9;
    }
    to {
      color: #85ecd6;
    }
  } */
  .accueilLink-5:hover + .underline {
    animation: underlineShow 0.6s 0.05s forwards ease;
    opacity: 0.3 !important;
  } 



  .accueilLink-6:hover {
    /* animation: linkHover6 0.4s 0s ease normal forwards; */
    color: #7abbf5;
  }
  /* @keyframes linkHover6 {
    from {
      color: #3599f1;
    }
    to {
      color: #7abbf5;
    }
  } */
  .accueilLink-6:hover + .underline {
    animation: underlineShow 0.6s 0.05s forwards ease;
    opacity: 0.3 !important;
  } 



  .accueilLink-7:hover {
    /* animation: linkHover7 0.4s 0s ease normal forwards; */
    color: #f076e0;
  }
  /* @keyframes linkHover7 {
    from {
      color: #ed2fd4;
    }
    to {
      color: #f076e0;
    }
  } */
  .accueilLink-7:hover + .underline {
    animation: underlineShow 0.6s 0.05s forwards ease;
    opacity: 0.7 !important;
  } 



  .sideNavContact {
    /* background: rgb(63 17 59);
    background: -moz-linear-gradient(313deg, rgb(44 17 63) 0%, rgb(28 54 65) 100%);
    background: -webkit-linear-gradient(313deg, rgb(44 17 63) 0%, rgb(28 54 65) 100%);
    background: linear-gradient(313deg, rgb(44 17 63) 0%, rgb(28 54 65) 100%); */

    box-shadow: 0px 0px 56px #ffffff61 !important;

    background: rgb(43 110 125);
    background: -moz-linear-gradient(313deg, rgb(37 24 77) 0%, rgb(43 110 125) 100%);
    background: -webkit-linear-gradient(313deg, rgb(37 24 77) 0%, rgb(43 110 125) 100%);
    background: linear-gradient(313deg, rgb(37 24 77) 0%, rgb(43 110 125) 100%);
  }

  .sideNavHaikus {
    /* background: rgb(17 63 49);
    background: -moz-linear-gradient(310deg, rgb(0 61 42) 0%, rgb(56 99 107) 100%);
    background: -webkit-linear-gradient(310deg, rgb(0 61 42) 0%, rgb(56 99 107) 100%);
    background: linear-gradient(310deg, rgb(0 61 42) 0%, rgb(56 99 107) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#11123f",endColorstr="#18212f",GradientType=1); */

    /* background: rgb(29 71 89);
    background: -moz-linear-gradient(180deg, rgb(34 113 87) 0%, rgb(29 71 89) 80%);
    background: -webkit-linear-gradient(180deg, rgb(34 113 87) 0%, rgb(29 71 89) 80%);
    background: linear-gradient(180deg, rgb(34 113 87) 0%, rgb(29 71 89) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#11123f",endColorstr="#18212f",GradientType=1); */

    box-shadow: 0px 0px 56px #ffffff61 !important;

    background: rgb(34 117 103);
    background: -moz-linear-gradient(180deg, rgb(34 117 103) 0%, rgb(31 64 79) 80%);
    background: -webkit-linear-gradient(180deg, rgb(34 117 103) 0%, rgb(31 64 79) 80%);
    background: linear-gradient(180deg, rgb(34 117 103) 0%, rgb(31 64 79) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#11123f",endColorstr="#18212f",GradientType=1);

  }


  .sideNavHaushka {

    box-shadow: 0px 0px 56px #ffffff61 !important;

    background: rgb(50 46 81);
    background: -moz-linear-gradient(110deg, rgb(50 46 81) 0%, rgb(16 67 129) 100%);
    background: -webkit-linear-gradient(110deg, rgb(50 46 81) 0%, rgb(16 67 129) 100%);
    background: linear-gradient(110deg, rgb(50 46 81) 0%, rgb(16 67 129) 100%);
  }


  .sideNavPeintureAcr {
    /* background: rgb(66 87 91);
    background: -moz-linear-gradient(180deg, rgba(17,18,63,1) 0%, rgb(66 87 91) 100%);
    background: -webkit-linear-gradient(180deg, rgba(17,18,63,1) 0%, rgb(66 87 91) 100%);
    background: linear-gradient(180deg, rgba(17,18,63,1) 0%, rgb(66 87 91) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#11123f",endColorstr="#18212f",GradientType=1); */

    box-shadow: 0px 0px 56px #ffffff61 !important;

    background: rgb(46 100 111);
    background: -moz-linear-gradient(180deg, rgba(17,18,63,1) 0%, rgb(46 100 111) 100%);
    background: -webkit-linear-gradient(180deg, rgba(17,18,63,1) 0%, rgb(46 100 111) 100%);
    background: linear-gradient(180deg, rgba(17,18,63,1) 0%, rgb(46 100 111) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#11123f",endColorstr="#18212f",GradientType=1);

  }

  .sideNavMentionsAquarelle {

    box-shadow: 0px 0px 56px #ffffff96 !important;
    border-right: 1px solid #b7b7b7 !important;

    background: rgb(39 57 85);
    background: -moz-linear-gradient(180deg, rgb(20 21 55) 0%, rgb(89 83 68) 100%);
    background: -webkit-linear-gradient(180deg, rgb(20 21 55) 0%, rgb(89 83 68) 100%);
    background: linear-gradient(180deg, rgb(20 21 55) 0%, rgb(89 83 68) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#11123f",endColorstr="#18212f",GradientType=1);
  }


  .sideNavMentionsLegales {
    background: rgb(39 57 85);
    background: -moz-linear-gradient(310deg, rgb(23 24 63) 0%, rgb(41 104 115) 100%);
    background: -webkit-linear-gradient(310deg, rgb(23 24 63) 0%, rgb(41 104 115) 100%);
    background: linear-gradient(155deg, rgb(23 24 63) 0%, rgb(41 104 115) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#11123f",endColorstr="#18212f",GradientType=1);
  }








  .bodyHaushka {
    /* background: rgb(125 82 43);
    background: -moz-linear-gradient(180deg, rgb(125 82 43) 20%, rgb(16 73 97) 100%);
    background: -webkit-linear-gradient(180deg, rgb(125 82 43) 20%, rgb(16 73 97) 100%);
    background: linear-gradient(180deg, rgb(125 82 43) 20%, rgb(16 73 97) 100%); */

    /* filter: hue-rotate(0deg); */
    /* animation: bodyHaushka-animBg 30s 0s linear forwards infinite; */


    /* Technique pour transition Background : */
    /* Initial (links): */
    /* background-color: #be3c3c; */
    background-color: #1e3169;
    background-image: linear-gradient( rgba(0,0,0,0), rgb(20 21 55));

    transition: all 0.5s ease;
  }

  @keyframes bodyHaushka-animBg {
    0% {
      /* filter: hue-rotate(0deg); */  

    }
    100% {
      /* filter: hue-rotate(360deg); */
  
    }
  }

  .aquarelle-1-boxShadow {
    box-shadow: 0px 0px 30px #e56317 !important;
  }
  .aquarelle-2-boxShadow {
    box-shadow: 0px 0px 30px #17bfe5 !important;
  }


  .elfSvg {
    cursor: pointer;
    z-index: 9999999999999;
    /* transform: rotate(6deg) rotateY(180deg); */
    transform: rotate(-15deg) rotateY(180deg);
    position: absolute;
    /* bottom: 0; */
    right: 15px;

    opacity: 0;
    bottom: -400px;
    filter: drop-shadow(0px 0px 9px rgba(255, 255, 255, 0));
    transition: all 0.5s;
    animation: fadeInElf 4s 1s ease forwards, floatingElf 8s 5s ease-in-out infinite, glowingElf 2.5s 4s linear infinite;
  }
  @keyframes fadeInElf {
    from {
      bottom: -400px;
      opacity: 0;
      transform: rotate(-35deg) rotateY(180deg);
    }
    to {
      bottom: 0px;
      opacity: 1;
      transform: rotate(12deg) rotateY(180deg);
    }
  }
  /* Transition anim infinite  */
  @keyframes floatingElf {
    0% {
      transform: rotate(12deg) rotateY(180deg);
    }
    50% {
      bottom: -35px;
      transform: rotate(8deg) rotateY(180deg);
    }
    100% {
      transform: rotate(12deg) rotateY(180deg);
    }
  }
  @keyframes glowingElf {
    0% {
      filter: drop-shadow(0px 0px 9px rgba(255, 255, 255, 0));
    }
    33% {
      filter: drop-shadow(0px 0px 9px rgba(255, 255, 255, 0.7));
    }
    66% {
      filter: drop-shadow(0px 0px 9px rgba(255, 255, 255, 0.7));
    }
    100% {
      filter: drop-shadow(0px 0px 9px rgba(255, 255, 255, 0));
    }
  }

  .elfSvg:hover {
    /* filter: drop-shadow(1px 1px 10px rgb(232, 202, 125)); */
    filter: drop-shadow(1px 1px 10px rgb(0, 0, 0)) !important;
  }


  #aquarellePng {
    
    /* left: 50%;
    transform: translateX(-50%);
    height: 200px;
    bottom: 100px; */
    width: 150%;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 50%);

    position: absolute;
    object-fit: cover;
    overflow: visible;
    opacity: 0;
    transition: all 2s 0.2s ;
  }

  .aquarellePngFadeIn {
    width: 170% !important;
    /* height: 351px !important; */
    /* bottom: 60px !important; */
    opacity: 0.8 !important;

    /* animation: aquarellePngFadeIn-infinitePc 22s 4s linear infinite, aquarellePngFadeIn-infinitePc-movement 8s 5s ease-in-out infinite; */
    animation: aquarellePngFadeIn-infinitePc 22s 4s linear infinite;

  }
  @keyframes aquarellePngFadeIn-infinitePc {
    from {
      filter: hue-rotate(0deg);
    }
    to {
      filter: hue-rotate(360deg);
    }
  }
  @keyframes aquarellePngFadeIn-infinitePc-movement {
    0% {
      bottom: 50%;
      transform: translate(-50%, 50%) rotate(1deg);
    }
    50% {
      bottom: 55%;
      transform: translate(-50%, 50%) rotate(-1deg);
    }
    100% {
      bottom: 50%;
      transform: translate(-50%, 50%) rotate(1deg);
    }
  }

  .chatSvg {
    position: absolute;
    z-index: 99999;
    width: 90%;
    margin: 0 auto;
    height: auto;
    max-height: 35vh;
    bottom: 50px;
    opacity: 0.6;
    left: 50%;
    transform: translateX(-50%);

    animation: chatGrow 5s 0s ease-in-out infinite;
  }
  .chatSvg g {
    fill: #e7d5a4;
  }

  @keyframes chatGrow {
    0% {
      transform: translateX(-50%);
    }
    50% {
      transform: translateX(-50%) scale(1.05);
    }
    100% {
      transform: translateX(-50%);
    }
  }



  .burgerPcElem {
    position: relative;
    left: 35px;
    opacity: 0;
  }
  .burgerFadePc {
    animation: fadeSlideInBurgerPc 1s 0s ease forwards;
  }
  @keyframes fadeSlideInBurgerPc {
    from {
      opacity: 0;
      left: 35px;
    }
    to {
      opacity: 1;
      left: 0;
    }
  }



  .chatSvg-wrapper {
    width: auto;
    height: -webkit-fill-available;
  }


  .chat-z-div {
    position: absolute;
    right: 0;
  }

  .chat-z {
    font-size: 2.5em;
    color: #e7d5a4;
    position: relative;
  }

  .chat-z1 {
    opacity: 0;
    bottom: -20px;

    animation: chat-z-anim 2.5s 0s linear infinite;
  }
  .chat-z2 {
    opacity: 0;
    bottom: -20px;

    animation: chat-z-anim 2.5s 1s linear infinite;
  }
  .chat-z3 {
    opacity: 0;
    bottom: -20px;

    animation: chat-z-anim 2.5s 2s linear infinite;
  }

  @keyframes chat-z-anim {
    0% {
      opacity: 0;
      bottom: -20px;
    }
    50% {
      opacity: 1;
      bottom: 0px;
    }
    100% {
      opacity: 0;
      bottom: 20px;
    }
  }
  


  #chat-smile-div {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(353deg);
    color: rgb(245, 245, 245);

    opacity: 0;
    transition: all 0.6s;
  }
  .chat-smile {
    font-size: 2em;
    transition: all 0.6s;
  }


  .chatSvg-wrapper:hover #chat-smile-div {
    opacity: 1;
  }
  .chatSvg-wrapper:hover .chat-smile {
    font-size: 3em;
  }


  #elfSvg-g {
    transition: all 1.5s;
  }
  .elfSvg-g-color {
    fill: white !important;
  }


  .aquarelleBurgersPng {
    position: absolute;

    /* bottom: -30%;
    left: 50%;
    transform: translate(-50%, -30%);
    width: 160%; */
    bottom: -60%;
    left: 50%;
    transform: translate(-50%, -30%);
    height: 150%;

    opacity: 0.8;
  }

  #h1titleAquarelle {
    transition: all 0.5s;

    font-weight: 200 !important;
    -webkit-text-fill-color: #f3eeee;
    text-shadow: 0px 0px 6px black;
  }


  .aquarelle-item-border-lutin {
    border-color: #181818c7 !important;
  }


  .bodyContact {
    /* background: rgb(63 17 59);
    background: -moz-linear-gradient(313deg, rgb(44 17 63) 0%, rgb(28 54 65) 100%);
    background: -webkit-linear-gradient(313deg, rgb(44 17 63) 0%, rgb(28 54 65) 100%);
    background: linear-gradient(313deg, rgb(44 17 63) 0%, rgb(28 54 65) 100%); */

    background: rgb(43 110 125); 
    background: -moz-linear-gradient(129deg, rgb(37 24 77) 0%, rgb(43 110 125) 100%);
    background: -webkit-linear-gradient(129deg, rgb(37 24 77) 0%, rgb(43 110 125) 100%);
    background: linear-gradient(129deg, rgb(37 24 77) 0%, rgb(43 110 125) 100%);
  }


  .titlesDiv {
    position: absolute;
    z-index: 99999999;
    /* width: 50%; */
    width: fit-content;
    color: white;
    left: 25px;
    text-align: left;
    top: 0;

    opacity: 0;
    animation: fadeIn 2s 0.3s ease forwards;

}
.titlesDiv h1, .titlesDiv h2 {
    font-family: 'Montserrat Alternates', sans-serif;
    /* font-weight: 100; */
    letter-spacing: 1px;
}

.h1title {
  font-size: 2.4em;
  width: max-content;
}

.titlesDiv h1 {
  background: -webkit-linear-gradient(white, #e8ca7d);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-weight: 300;

  margin-block-start: 0.5em;

  transition: all 0.4s;
}

.titlesDiv h1:hover {
  letter-spacing: 2px;
}


#burger-icon-desktop {
  transition: all 0.4s;
}


.titlesDiv h2 {
  position: relative;
  left: 15px;
  color: #ffd770;

  font-weight: 100;
}




  .disabledLink {
    opacity: 0.3;
    cursor: default;
    /* cursor: wait; */
    /* cursor: progress; */
  }


  #modalPreview {
    opacity: 0;
    display: none;

    position: absolute;
    z-index: 9999999999;
    width: 100%;
    height: 100%;

    /* Maj backgroundToile: */
    /* background-color: #151b35f0; */
    background-color: #151b35;

    transform: translateY(20px);
  }
  .fadeInModalPreview {
    animation: fadeInModalPreview 0.7s 0s ease forwards;
  }
  @keyframes fadeInModalPreview {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0px);
    }
  }

  /* Anim fadeOut JS depuis peinture.html (JS global) */
  .fadeOutModalPreview {
    animation: fadeOutModalPreview 0.7s 0s ease forwards;
  }
  @keyframes fadeOutModalPreview {
    from {
      opacity: 1;
      transform: translateY(0px);
    }
    to {
      opacity: 0;
      transform: translateY(20px);
    }
  }

  .closeModalPreview {
    position: absolute;
    
    top: 15px;
    right: 15px;

    color: #e8ca7d;
    font-size: 2em;
    cursor: pointer;

    transition: all 0.4s;
  }
  .closeModalPreview:hover {
    color: white;
  }

  .modalPreviewContent-Haushka {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 60px;
  }

  .modalPreviewContent {
    text-align: center;
    width: 70%;
    margin: 0 auto;
    margin-top: 60px;

    width: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .modalPreviewContent h2 {
    color: #e8ca7d;
    background: -webkit-linear-gradient(white, #e8ca7d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 200;
  }
  #modalPreviewImg {
    width: 50%;
    height: 53vh;
    object-fit: contain;
  }
  .modalPreviewContent p {
    color: white;

    height: 5vh;
  }

  .modalPreview-contes .modalPreviewContent p {
    height: auto;
    text-align: justify;
  }

  .modalPreviewNavContainer {
    display: inline-flex;
  }

  .previewImg-slideLeft1 {
    animation: previewImg-slideLeft1 0.3s 0s ease forwards;
  }
  @keyframes previewImg-slideLeft1 {
    from {
      transform: translateX(0px);
      opacity: 1;
    }
    to {
      transform: translateX(-30px);
      opacity: 0;    }
  }

  .previewImg-slideLeft2 {
    animation: previewImg-slideLeft2 0.3s 0s ease forwards;
  }
  @keyframes previewImg-slideLeft2 {
    from {
      transform: translateX(30px);
      opacity: 0;
    }
    to {
      transform: translateX(0px);
      opacity: 1;    }
  }



  #modalPreviewPaginationDiv {
    margin-bottom: 55px;
  }

  .modalPreview-contes {
    overflow-y: scroll;
  }


  
  .previewImg-slideRight1 {
    animation: previewImg-slideRight1 0.3s 0s ease forwards;
  }
  @keyframes previewImg-slideRight1 {
    from {
      transform: translateX(0px);
      opacity: 1;
    }
    to {
      transform: translateX(30px);
      opacity: 0;    }
  }

  .previewImg-slideRight2 {
    animation: previewImg-slideRight2 0.3s 0s ease forwards;
  }
  @keyframes previewImg-slideRight2 {
    from {
      transform: translateX(-30px);
      opacity: 0;
    }
    to {
      transform: translateX(0px);
      opacity: 1;    }
  }


  #modalPreviewPrevious, #modalPreviewNext {
    cursor: pointer;
    padding: 15px;
    transition: all 0.4s;
  }

  #modalPreviewPreviousG {
    fill: #E8CA7D;
    transition: all 0.4s;
  }
  #modalPreviewPrevious:hover {
    opacity: 0.6;
    transform: translateX(-5px);
  }
  #modalPreviewNextG {
    fill: #E8CA7D;
    transition: all 0.4s;
  }
  #modalPreviewNext:hover {
    opacity: 0.6;
    transform: translateX(5px);
  }

  #modalPreviewPaginationDiv {
    display: inline-flex;
      width: 100%;
      justify-content: center;
      /* gap: 5px; */
  }

  .paginationPuce {
    color: #4d4d4d;
    cursor: pointer;
    padding: 5px;
    transition: all 0.4s;
  }
  .selectedPagination {
    color: #E8CA7D;
  }


  .haikuNbr {
    /* color: white; */
    margin-right: 5px;
    color: #7bd9ff;
  }

  .haikuTitleText {
    /* text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 10px;
    text-decoration-color: #ffffff7a; */
  }


  #svgArbreGroup {
    transform: translate(0px, 968px) scale(0.1, -0.1);
  }
  .svgArbreGroup-rubrique1 {
    /* transform: translate(50px, 936px) scale(0.12, -0.12) !important; */
    /* Nouveau svg Mont Saint Michel: */
    transform: translate(51px, 936px) scale(0.045, -0.045) !important;
  }
  .svgArbreGroup-rubrique2 {
    transform: translate(0px, 1076px) scale(0.1, -0.1) !important;
  }

  .svgArbreGroup-rubrique-7ciels {
    transform: translate(110px, 920px) scale(0.1, -0.1) !important;
  }


  .svgBurgerObj {
    /* position: absolute;
    bottom: 125px; */

    position: relative;
    top: 25px;
    opacity: 0.7;
  }



  .acryliqueSectionList {
    font-family: 'Montserrat Alternates', sans-serif;

    display: inline-flex;
    flex-direction: column;
    gap: 0.2vh;
  }

  #link-section1 {
    border-radius: 7px;

    text-shadow: 1px 1px 2px black;
    padding: 6px 25px 10px 16px;
    
    /* background: 
    linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)),
    url("./toiles/toilesButtonBg/gradient/gradient-global/esprit_et_epouse-min.png"); */

    background-size: cover;
    background-position-y: center;
  }

  #link-section2 {
    border-radius: 7px;

    text-shadow: 1px 1px 2px black;
    padding: 6px 25px 10px 16px;
    
    /* background: 
    linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)),
    url("./toiles/toilesButtonBg/gradient/gradient-global/flute_enchantee-min.png"); */
    background-size: cover;
    background-position-y: center;
  }

  #link-section3 {
    border-radius: 7px;

    text-shadow: 1px 1px 2px black;
    padding: 6px 25px 10px 16px;
    
    /* background: 
    linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)),
    url("./toiles/toilesButtonBg/gradient/gradient-global/licorne-min.png"); */
    background-size: cover;
    background-position-y: center;
  }

  #link-section4 {
    border-radius: 7px;

    text-shadow: 1px 1px 2px black;
    padding: 6px 25px 10px 16px;
    
    /* background: 
    linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)),
    url("./toiles/toilesButtonBg/gradient/gradient-global/3contes-min.png"); */
    background-size: cover;
    background-position-y: center;
  }

  #link-section5 {
    border-radius: 7px;

    text-shadow: 1px 1px 2px black;
    padding: 6px 25px 10px 16px;
    
    /* background: 
    linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)),
    url("./toiles/toilesButtonBg/gradient/gradient-global/arbre_de_vie-min.png"); */
    background-size: cover;
    background-position-y: center;
  }


  #link-section6 {
    border-radius: 7px;

    text-shadow: 1px 1px 2px black;
    padding: 6px 25px 10px 16px;
    
    /* background: 
    linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)),
    url("./toiles/toilesButtonBg/gradient/gradient-global/arbre_de_vie-min.png"); */
    background-size: cover;
    background-position-y: center;
  }


  .linkSectionStrong {
    color: #ffdc84;
    font-weight: 400;
  }


  #acryliqueBackBtnAccueil:hover #acryliqueBackBtn {
    opacity: 0.65;
  }

  .acryliqueBackBtn {
    padding: 10px;

    color: #e8ca7d;
    font-size: 1.8em;
    position: relative;
    /* left: 22px;
    top: 36px; */
    cursor: pointer;

    transition: all 0.4s;
  }
  .acryliqueBackBtn:hover {
    color: whitesmoke;
    opacity: 0.8;
  }

  #acryliqueBackBtn {
    transition: all 0.4s;
  }
  /* #acryliqueBackBtn:hover {
    color: whitesmoke;
    opacity: 0.8;
  } */


  /* .mainPeinturesAcry {
    background: rgb(0,0,0);
    background: -moz-radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(255,220,132,0.041053921568627416) 30%, rgba(253,218,130,0.23993347338935578) 40%, rgba(252,218,130,0.49763655462184875) 50%, rgba(251,217,130,0.25674019607843135) 60%, rgba(250,216,129,0.04385504201680668) 70%, rgba(0,0,0,0) 100%);
    background: -webkit-radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(255,220,132,0.041053921568627416) 30%, rgba(253,218,130,0.23993347338935578) 40%, rgba(252,218,130,0.49763655462184875) 50%, rgba(251,217,130,0.25674019607843135) 60%, rgba(250,216,129,0.04385504201680668) 70%, rgba(0,0,0,0) 100%);
    background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(255,220,132,0.041053921568627416) 30%, rgba(253,218,130,0.23993347338935578) 40%, rgba(252,218,130,0.49763655462184875) 50%, rgba(251,217,130,0.25674019607843135) 60%, rgba(250,216,129,0.04385504201680668) 70%, rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
  } */
  

  .acryliqueBackBtnAccueil {
    z-index: 9999;
    color: #e8ca7d;
    font-size: 2.3em;
    position: absolute;

    right: 0;
    top: 0;

    padding: 17px 35px;

    cursor: pointer;

    opacity: 1;
    display: block;

    opacity: 0;
    animation: fadeIn 1.5s 1.5s ease forwards;


    transition: all 0.4s;
  }
  .acryliqueBackBtnAccueil:hover {
    transform: translateX(-7px);
  }


  .acrylique-content-fade {
    opacity: 0;
    animation: fadeInAcryliqueContent 0.5s 0s ease forwards;
  }
  @keyframes fadeInAcryliqueContent {
    from {
      opacity: 0;
    } 
    to {
      opacity: 1;
    }
  }

  .acrylique-content-fadeOut {
    opacity: 1;
    animation: fadeOutAcryliqueContent 0.5s 0s ease forwards;
  }
  @keyframes fadeOutAcryliqueContent {
    from {
      opacity: 1;
    } 
    to {
      opacity: 0;
    }
  }


  #linksSectionAcrylique, #contentSectionAcrylique {
    transition: opacity 0.5s;
  }
  
  /* #contentSectionAcrylique {
    flex-wrap: nowrap;
    display: flex;
  } */



  .svgFadeOut {
    animation: svgFadeOut 0.7s 0s ease forwards;
  }
  @keyframes svgFadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  .svgFadeIn {
    animation: svgFadeIn 0.7s 0s ease forwards;
  }
  @keyframes svgFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }


  .titleImage {
    display: none;
  }
  .descriptionImage {
    display: none;
  }
  .indexImage {
    display: none;
  }



  .main-link {
    text-decoration: none;
    font-weight: 300;
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 0.9em;
    color: #c59941;
  }
  .haikuLink {
    text-decoration: none;
    font-weight: 300;
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 0.9em;
    color: #41b9c5;
  }
  .haikuLink:hover {
    animation: linkHover1 0.4s ease 0s normal forwards running;
  }
  /* @keyframes linkHover1 {
    from {
      color: #41b9c5;
    }
    to {
      color: #b6eff4;
    }
  } */
  .main-link:hover {
    animation: linkHover2 0.4s ease 0s normal forwards running;
  }
  /* @keyframes linkHover2 {
    from {
      color: #c59941;
    }
    to {
      color: #fdf99e;
    }
  } */

  .main-link:hover + .underline {
    animation: underlineShow 0.5s forwards ease;
    opacity: 1 !important;
  } 
  .haikuLink:hover + .underline {
    animation: underlineShow 0.5s forwards ease;
    opacity: 1 !important;
  } 
  @keyframes underlineShow {
    from {
      width: 0%;
    }
    to {
      width: 100%;
    }
  }





  
  @keyframes App-logo-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes App-logo-spin2 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
  }


  /* SINON fade In une image from bottom to top avec un mask au dessus https://stackoverflow.com/questions/21621837/fading-an-image-from-top-to-bottom */

  .box {
    --mask:
    radial-gradient(45.22px at calc(100% + 40.00px) 50%,#0000 calc(99% - 1px),#000 calc(101% - 1px) 99%,#0000 101%) calc(50% - 10.5px + .5px) calc(50% - 40px)/ 21px 80px  repeat-y,
    radial-gradient(45.22px at -40px 50%,#0000 calc(99% - 1px),#000 calc(101% - 1px) 99%,#0000 101%) calc(50% + 10.5px) 50%/21px 80px  repeat-y;
  -webkit-mask: var(--mask);
          mask: var(--mask);

    position: absolute;
    bottom: 50px;
    height: 0px;
    width: 100px;

    /* Transition durant l'anim de la couleur (from green -> jaune, avec fadePng en bas de la tige, Idee: flash final) */
    /* background-color: #16eb67; */
    background: rgb(22,235,103);
    background: -moz-linear-gradient(180deg, rgba(22,235,103,1) 85%, rgba(22,235,103,0) 100%);
    background: -webkit-linear-gradient(180deg, rgba(22,235,103,1) 85%, rgba(22,235,103,0) 100%);
    background: linear-gradient(180deg, rgba(22,235,103,1) 85%, rgba(22,235,103,0) 100%);
    
    animation: pousse1 3s 0.7s normal forwards ease-in-out;
  }

    /*  https://css-generators.com/wavy-shapes/ */
    /* (from 1 / 40 to 6 / 40) (input range au max)*/
    @keyframes pousse1 {
      0% {
          --mask:
          radial-gradient(89.94px at calc(100% + 80.00px) 50%,#0000 calc(99% - 1px),#000 calc(101% - 1px) 99%,#0000 101%) calc(50% - 20.5px + .5px) calc(50% - 80px)/ 41px 160px  repeat-y,
          radial-gradient(89.94px at -80px 50%,#0000 calc(99% - 1px),#000 calc(101% - 1px) 99%,#0000 101%) calc(50% + 20.5px) 50%/41px 160px  repeat-y;
          -webkit-mask: var(--mask);
                mask: var(--mask);

          /* background-color: #16eb67; */
          /* Pour le fadePNG en bas de la tige: ATTENTION LA TRANSIOTION DE COULEUR NEST PLUS SMOOTH A CAUSE DU GRADIENT PNG */
          background: rgb(22,235,103);
          background: -moz-linear-gradient(180deg, rgba(22,235,103,1) 85%, rgba(22,235,103,0) 100%);
          background: -webkit-linear-gradient(180deg, rgba(22,235,103,1) 85%, rgba(22,235,103,0) 100%);
          background: linear-gradient(180deg, rgba(22,235,103,1) 85%, rgba(22,235,103,0) 100%);

          height: 0px;
      }
      20% {
          --mask:
          radial-gradient(90.44px at calc(100% + 80.00px) 50%,#0000 calc(99% - 2px),#000 calc(101% - 2px) 99%,#0000 101%) calc(50% - 21px + .5px) calc(50% - 80px)/ 42px 160px  repeat-y,
          radial-gradient(90.44px at -80px 50%,#0000 calc(99% - 2px),#000 calc(101% - 2px) 99%,#0000 101%) calc(50% + 21px) 50%/42px 160px  repeat-y;
          -webkit-mask: var(--mask);
                mask: var(--mask);
      }
      40% {
          --mask:
          radial-gradient(90.94px at calc(100% + 80.00px) 50%,#0000 calc(99% - 3px),#000 calc(101% - 3px) 99%,#0000 101%) calc(50% - 21.5px + .5px) calc(50% - 80px)/ 43px 160px  repeat-y,
          radial-gradient(90.94px at -80px 50%,#0000 calc(99% - 3px),#000 calc(101% - 3px) 99%,#0000 101%) calc(50% + 21.5px) 50%/43px 160px  repeat-y;
          -webkit-mask: var(--mask);
                mask: var(--mask);
      }
      60% {
          --mask:
          radial-gradient(91.44px at calc(100% + 80.00px) 50%,#0000 calc(99% - 4px),#000 calc(101% - 4px) 99%,#0000 101%) calc(50% - 22px + .5px) calc(50% - 80px)/ 44px 160px  repeat-y,
          radial-gradient(91.44px at -80px 50%,#0000 calc(99% - 4px),#000 calc(101% - 4px) 99%,#0000 101%) calc(50% + 22px) 50%/44px 160px  repeat-y;
          -webkit-mask: var(--mask);
                mask: var(--mask);

          /* Temporisation du changement de couleur (OK) */
          /* background-color: #16eb67; */
          /* Pour le fadePNG en bas de la tige: ATTENTION LA TRANSIOTION DE COULEUR NEST PLUS SMOOTH A CAUSE DU GRADIENT PNG */
          background: rgb(22,235,103);
          background: -moz-linear-gradient(180deg, rgba(22,235,103,1) 85%, rgba(22,235,103,0) 100%);
          background: -webkit-linear-gradient(180deg, rgba(22,235,103,1) 85%, rgba(22,235,103,0) 100%);
          background: linear-gradient(180deg, rgba(22,235,103,1) 85%, rgba(22,235,103,0) 100%);
      }
      80% {
          --mask:
          radial-gradient(91.94px at calc(100% + 80.00px) 50%,#0000 calc(99% - 5px),#000 calc(101% - 5px) 99%,#0000 101%) calc(50% - 22.5px + .5px) calc(50% - 80px)/ 45px 160px  repeat-y,
          radial-gradient(91.94px at -80px 50%,#0000 calc(99% - 5px),#000 calc(101% - 5px) 99%,#0000 101%) calc(50% + 22.5px) 50%/45px 160px  repeat-y;
          -webkit-mask: var(--mask);
                mask: var(--mask);

          /* Temporisation du changement de couleur (OK) */
          /* background-color: #16eb67; */
      }
      100% {
          --mask:
          radial-gradient(92.44px at calc(100% + 80.00px) 50%,#0000 calc(99% - 6px),#000 calc(101% - 6px) 99%,#0000 101%) calc(50% - 23px + .5px) calc(50% - 80px)/ 46px 160px  repeat-y,
          radial-gradient(92.44px at -80px 50%,#0000 calc(99% - 6px),#000 calc(101% - 6px) 99%,#0000 101%) calc(50% + 23px) 50%/46px 160px  repeat-y;
          -webkit-mask: var(--mask);
                mask: var(--mask);

          /* background-color: #ffba31; */
          /* Pour le fadePNG en bas de la tige: ATTENTION LA TRANSITION DE COULEUR NEST PLUS SMOOTH A CAUSE DU GRADIENT PNG */
          /* Plus fadeGreen au dessus du transparency */
          background: rgb(255,186,49);
          background: -moz-linear-gradient(180deg, rgba(255,186,49,1) 50%, rgba(146,209,74,1) 85%, rgba(22,235,103,0) 100%);
          background: -webkit-linear-gradient(180deg, rgba(255,186,49,1) 50%, rgba(146,209,74,1) 85%, rgba(22,235,103,0) 100%);
          background: linear-gradient(180deg, rgba(255,186,49,1) 50%, rgba(146,209,74,1) 85%, rgba(22,235,103,0) 100%);

          height: 42%;
      }
    
    }


    #leafRight {
      position: absolute;
      bottom: 4%;
      width: 0px;
      opacity: 0;

      animation: leafPousse1 3s 0.7s normal forwards ease-in-out;
    }
    @keyframes leafPousse1 {
      0% {
        bottom: 4%;
        width: 0px;
        opacity: 0;
      }
      100% {
        transform: translate(62px, 7px);
        width: 90px;
        opacity: 1;
      }
    }


    /* NE PAS SUPPRIMER **********************/
    /* LEAF de gauche: ANIM ROTATE STYLEE */
    /* #leafLeft {
      position: absolute;
      bottom: 4%;
      width: 0px;
      opacity: 0;

      transform: rotateZ('279deg');

      animation: leafPousse2 4s 1.5s normal forwards ease-in-out;
    }
    @keyframes leafPousse2 {
      0% {
        bottom: 4%;
        width: 0px;
        opacity: 0;
      }
      100% {
        transform: rotateZ(279deg) translate(26px, -69px);
        width: 112px;
        opacity: 1;
      }
    } */

    /* LEAF de gauche: SANS ANIM ROTATE: */
    #leafLeft {
      position: absolute;
      bottom: 4%;
      width: 0px;
      opacity: 0;

      transform: rotateZ(279deg);

      animation: leafPousse2 3s 0.7s normal forwards ease-in-out;
    }
    @keyframes leafPousse2 {
      0% {
        bottom: 4%;
        width: 0px;
        opacity: 0;
      }
      100% {
        width: 136px;
        opacity: 1;
        transform: rotateZ(279deg) translate(21px, -82px);

      }
    }



    #sunflower {
      position: absolute;
      /* Fleur qui suit la tige: pas beau */
      /* bottom: 5%; */

      width: 0px;
      opacity: 0;

      animation: sunflower 3s 0.7s normal forwards ease-in-out;
    }
    @keyframes sunflower {
      0% {
        /* Fleur qui suit la tige: pas beau */
        /* bottom: 5%; */

        width: 0;
        opacity: 0;
      }
      100% {
        /* Fleur qui suit la tige: pas beau */
        /* bottom: 39%; */

        opacity: 1;
        width: 220px;
        transform: rotate(120deg);
      }
    }








    #smile {
      position: relative;

      /* width: 0px; */
      width: 135px;
      opacity: 0;
      right: 9px;

      animation: fadeInSmile 0.7s 3s normal forwards ease-in-out;
    }
    @keyframes fadeInSmile {
      from {
        /* width: 0px; */
        opacity: 0;
      }
      to {
        /* width: 135px; */
        opacity: 1;
      }
    }



    .titleDiv-Peinture {
      position: relative;
      z-index: 999999999999;
      left: 0;
    }
    .titleDiv-Peinture .h1title {
      margin: 0;
      padding: 20px 35px;
      z-index: 99999999999;
      position: relative;
    }

    .titleDiv-Haikus {
      position: relative;
      z-index: 999999999999;
      left: 0;
    }
    .titleDiv-Haikus .h1title {
      margin: 0;
      padding: 15px 25px;
      z-index: 99999999999;
      position: relative;
    }

    .titleDiv-Contact {
      position: relative;
      z-index: 999999999999;
      left: 0;
    }
    .titleDiv-Contact .h1title {
      margin: 0;
      padding: 25px 35px;
      z-index: 99999999999;
      position: relative;
    }


    /* SideNav DESKTOP */
    .sidenav-desktop {
      height: 100%;
      width: 360px;
      position: fixed;
      z-index: 1;
      top: 0;
      left: -370px;
      /* Anims: */
      background-color: #ffecbc;
      /* border-right: 1px solid #e8ca7d3d; */
      border-right: 1px solid #ffffff63;
  
      border-top-right-radius: 6px;
  
      font-family: 'Montserrat Alternates', sans-serif;
      
      padding-top: 60px;
      z-index: 999999999999;


      overflow: hidden;

      /* box-shadow: 0px 0px 56px #00000096; */
      box-shadow: 0px 0px 56px #e5e5e596;
  
      opacity: 0;

      transition: left 0.5s ease, opacity 0.5s ease;
    }
  
    /* Sidenav menu links */
    .sidenav-desktop a {
      padding: 15px 8px 15px 32px;
      text-decoration: none;
      font-size: 25px;

      /* color: #e7d5a4; */
      color: #f3f2ed;

      display: block;

      text-shadow: 0px 0px 4px black;

      transition: 0.5s;
    }

    .sidenav-desktop a:hover {
      color: #e7d5a4;
      background-color: #e7d5a426;

      padding: 15px 8px 15px 38px;
    }

    .mentionsLegalesDiv a:hover {
      padding: 10px 8px 10px 8px !important;
    }

    .sidenav-desktop ul {
      list-style-type: none;
      padding: 0;
      margin: 0;

      z-index: 9999999;
      position: relative;

      margin-top: 35px;
    }


    #modalPreviewImgBackground {
      position: absolute;
      z-index: -5;
      height: 100%;
      width: 100%;
      object-fit: cover;

      opacity: 0.055;
    }


    .modalPreviewImgBackground-aquarelle {

      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      overflow: visible !important;
      height: auto !important;
      width: 150% !important;
      opacity: 0.4 !important;
    }



    .bgToile-fadeIn {
      animation: bgToile-fadeIn 0.3s 0s ease forwards;
    }
    @keyframes bgToile-fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 0.025;
      }
    }
    .bgToile-fadeOut {
      animation: bgToile-fadeOut 0.3s 0s ease forwards;
    }
    @keyframes bgToile-fadeOut {
      from {
        opacity: 0.025;
      }
      to {
        opacity: 0;
      }
    }

    .fadeOutChevalet {
      animation: fadeOut 1s 0s ease forwards !important;
    }
    .fadeInChevalet {
      animation: fadeIn 1s 0s ease forwards !important;
    }


    /* MAJ pour wrapper (pour onClick changer toiles) */
    .chevaletWrapper {
      position: absolute;
      z-index: 9999;
      cursor: pointer;
      height: 72%;
      bottom: 50%;
      left: 25%;
      transform: translateX(-25%) translateY(50%);
      width: fit-content;

      animation: chevaletWrapper-glowing 3s 0s linear infinite;
      filter: drop-shadow(1px 2px 8px #ffdc8461);
    }
    @keyframes chevaletWrapper-glowing {
      0% {
        filter: drop-shadow(1px 2px 15px #ffdc8461);
      }
      33.33% {
        filter: drop-shadow(1px 2px 15px #ffdc8400);
      }
      66.67% {
        filter: drop-shadow(1px 2px 15px #ffdc8400);
      }
      100% {
        filter: drop-shadow(1px 2px 15px #ffdc8461);
      }
    }



    .closeModalPreview-aquarelle {
      text-shadow: 0px 0px 2px rgb(12, 12, 12);
      color: #fbf9f9;
    }

    .svgArbrePNG {
      /* MAJ pour wrapper (pour onClick changer toiles) */
      height: 100%;
      /* position: absolute; */
      position: relative;
      z-index: 9999;

      /* bottom: 50%; */
      /* left: 23%; */
      /* transform: translateX(-23%) translateY(50%); */
      /* height: 72vh; */
      /* width: auto; */

      filter: drop-shadow(1px 2px 8px #ffdc8461);
      cursor: pointer;


      opacity: 0;
      animation: fadeInSvgArbre 2s 0.3s ease forwards;

      transition: all 0.4s;
  }

  .chevaletWrapper:hover .svgArbrePNG {
      /* filter: drop-shadow(1px 2px 8px #ffdc8461) saturate(0.4); */
      filter: drop-shadow(1px 2px 20px #ffdc8461);
      transform: rotate(1deg);
  }

  .chevaletWrapper:hover #chevalet2Toile-div {
    transform: translate(-47%) rotate(1deg);
    filter: sepia(0.2) drop-shadow(2px -1px 1px black); 
  }


  #chevalet2Toile-div {
    position: absolute;

    /* oskour #1 */
    width: 74%;

    z-index: 9999;
    top: 0px;
    left: 47%;
    transform: translate(-47%);
    transition: all 0.4s;

    opacity: 0;
  }
  #chevalet2Toile-img {
    /* oskour #2 */
    /* width: 215px; */
    width: 100%;

    filter: sepia(0.2) drop-shadow(2px 0px 1px black);

    transition: 0.4s;

    /* Toile1:  */
    /* transform: translateX(-1px) translateY(82px); */
    transform: translateX(-1px) translateY(25%) rotate(-1deg);
  }


  .fadeInFast {
    animation: fadeIn 0.5s 0s ease forwards;
  }
  .fadeOutFast {
    animation: fadeOut 0.5s 0s ease forwards;
  }


  .svgArbrePNG2 {
      position: absolute;
      z-index: 9998;

      bottom: 0%;
      left: 0%;
      height: 100%;

      filter: drop-shadow(1px 2px 8px #ffdc8461);
      cursor: pointer;

      opacity: 0;

      transition: all 0.4s;
  }
  .chevaletWrapper:hover .svgArbrePNG2 {
    /* filter: drop-shadow(1px 2px 8px #ffdc8461) saturate(0.4); */
    filter: drop-shadow(1px 2px 20px #ffdc8461);
    transform: rotate(1deg);
  }

  .chevaletWrapper:hover #chevalet2Toile-img {
    /* transform: translateX(-2px) translateY(82px) rotate(1deg);

    filter: saturate(0.7) drop-shadow(2px -1px 1px black); */
  }


  .haushkaIntroTxt {
    color: white;
    width: 50%;
    margin: 10px auto 45px auto;
  }

  .mainHaushka {
    width: 80%;
    margin: 0 auto;
  }

  .haushkaStrong {
    text-shadow: 1px 1px black;
    font-weight: 500;
    font-size: 1em;
  }


    .burgerOngletActif-desktop {

      color: #010125 !important;
      font-weight: bold;

      /* background-color: #e7d5a4; */
      background: rgb(231,213,164);
      background: -moz-linear-gradient(90deg, rgba(231,213,164,1) 50%, rgba(0,0,0,0) 100%);
      background: -webkit-linear-gradient(90deg, rgba(231,213,164,1) 50%, rgba(0,0,0,0) 100%);
      background: linear-gradient(90deg, rgba(231,213,164,1) 50%, rgba(0,0,0,0) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e7d5a4",endColorstr="#000000",GradientType=1);
  
      border-left: 1px solid #00000045;
  
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
  
      transform: translateX(-6px);
      /* width: 295px; */
      width: 308px;

      text-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;

      /* padding: 12px 0px 12px 50px !important; */
      /* padding: 12px 8px 12px 36px !important; */
      padding: 20px 8px 20px 36px !important;
    }

    .burgerOngletActif-desktop:hover {
      /* background-color: #e7d5a49f !important; */
      background-color: #fff4d59f !important;
      padding: 20px 13px 20px 45px !important;
    }


    .burgerOngletActif-desktop-mentions {

      color: #010125 !important;
      font-weight: bold;
      background-color: #e7d5a4;
      border-top: 1px solid #0000002b;
      border-bottom: 1px solid #0000002b;
  
      /* filter: drop-shadow(4px 3px 0px black); */
      border-left: 1px solid #00000045;
  
      box-shadow: 0px 0px 10px #e7d5a47a;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
  
      /* transform: translateX(-6px); */

      width: 100%;
      padding: 12px 0px 12px 0px !important;
    }
    .burgerOngletActif-desktop-mentions:hover {
      background-color: #e7d5a49f !important;
    }

    #shapeDetection-navBarre-desktop {
      height: 100%;
      /* width: 75px; */
      width: 135px;
      position: absolute;
      left: 0;
      top: 0;

      z-index: 999999999;

      /* background-color: rgba(255, 255, 255, 0); */
      background: rgb(231,213,164);
      background: -moz-linear-gradient(90deg, rgb(231 213 164 / 14%) 0%, rgba(0,0,0,0) 50%);
      background: -webkit-linear-gradient(90deg, rgb(231 213 164 / 14%) 0%, rgba(0,0,0,0) 50%);
      background: linear-gradient(90deg, rgb(231 213 164 / 14%) 0%, rgba(0,0,0,0) 50%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e7d5a4",endColorstr="#000000",GradientType=1);
    }


    .toile2-fix {
      transform: translateX(0px) translateY(30px) !important;
    }



    /* Sidenav menu (MOBILE) */
  .sidenav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    right: -260px;
    /* Anims: */
    background-color: #ffecbc;

    border-top-left-radius: 6px;

    font-family: 'Montserrat Alternates', sans-serif;
    
    padding-top: 60px;
    z-index: 999999999999;

    opacity: 0;

    transition: right 0.5s ease, box-shadow 0.4s 0.1s ease, opacity 0.5s ease;
  }

  /* Sidenav menu links */
  .sidenav a {
    padding: 11px 8px 11px 32px;
    text-decoration: none;
    font-size: 23px;

    /* color: #e7d5a4; */
    color: #f3f2ed;

    display: block;
    transition: 0.3s;

    text-shadow: 0px 0px 3px black;
  }

  .sidenav a:hover {
    color: #111;
  }

  .sidenav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  /* Active class */
  .sidenav.active {
    border-left: 1px solid #e7d5a44a;
    /* TEST RAM MOBILE: */
    /* box-shadow: 0px 0px 65px #e7d5a457; */
    right: 0;
    opacity: 1;

    /* TEST RAM MOBILE: */
    /* animation: navBurgerColorAnim 0.5s 0s ease forwards; */
  }
  @keyframes navBurgerColorAnim {
    from {
      background-color: #ffecbc;
    }
    to {
      background-color: #0b1e4f;
    }
  }

  .closeBurgerColorAnimated {
    animation: closeBurgerColorAnimated 0.8s 0s ease forwards;
  }
  @keyframes closeBurgerColorAnimated {
    from {
      background-color: #0b1e4f;
    }
    to {
      background-color: #ffecbc;
    }
  }

  /* Close btn */
  .sidenav .close {
    position: absolute;
    top: 0;
    right: 18px;
    font-size: 39px;
    color: #e7d5a4;
  }

  /* Icône burger MOBILE*/
  .burger-icon span {
    display: block;
    width: 35px;
    height: 3px;
    background-color: #ffecbc;
    border-radius: 2px;
    margin: 8px 0;
  }

    /* Icône burger DESKTOP*/
    .burger-icon-desktop span {
      display: block;
      width: 35px;
      height: 3px;
      background-color: #ffecbc;
      border-radius: 2px;
      margin: 8px 0;
    }


    .h1titleBurgerDesktop {
      display: inline-flex;
      align-items: center;
      gap: 25px;
    }


  #openBtn {
    position: absolute;
    right: 1px;
    padding: 8px 15px;
    top: 0px;
    z-index: 99999998;

    opacity: 0;
    animation: fadeIn 0.5s 0.5s ease forwards;
  }


  .burgerOngletActif {

    padding: 13px 8px 13px 32px !important;
    margin: 10px auto;

    color: #010125 !important;
    font-weight: bold;

    /* background-color: #e7d5a4; */
    background: rgb(231,213,164);
    background: -moz-linear-gradient(90deg, rgba(231,213,164,1) 50%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(231,213,164,1) 50%, rgba(0,0,0,0) 100%);
    background: linear-gradient(90deg, rgba(231,213,164,1) 50%, rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e7d5a4",endColorstr="#000000",GradientType=1);



    /* border-top: 1px solid #0000002b;
    border-bottom: 1px solid #0000002b; */

    /* filter: drop-shadow(4px 3px 0px black); */
    border-left: 1px solid #00000045;

    /* box-shadow: 0px 0px 10px #e7d5a47a; */
    /* border-top-left-radius: 3px;
    border-bottom-left-radius: 3px; */

    text-shadow: 0px 0px 0px black !important;

    transform: translateX(-1px);
    width: 100%;
  }


  #nextHaikuDivDesktop {
      position: absolute;
      font-size: 4em;
      color: #ffecbc;
      /* right: 5vw; */
      right: 8%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 999999999;
      padding: 15px 25px;
      cursor: pointer;

      opacity: 0;
      animation: fadeIn 0.4s 1s ease forwards;

      transition: all 0.3s ease;
  }

  #previousHaikuDivDesktop {
      position: absolute;
      font-size: 4em;
      color: #ffecbc;
      /* left: 5vw; */
      left: 8%;
      top: 50%;
      transform: translateY(-50%);
      z-index: 999999999;
      padding: 15px 25px;
      cursor: pointer;

      opacity: 0;
      animation: fadeIn 0.4s 1s ease forwards;

      transition: all 0.3s ease;
  }



  .haikuWord {
    opacity: 0;
    position: relative;
    bottom: 5px;

  }

  @keyframes wordAnim {
    from {
      opacity: 0;
      bottom: 15px;
      filter: blur(4px);
    }
    to {
      opacity: 1;
      bottom: 0px;
      filter: blur(0px);
    }
  }


  /* HAIKU 1 */
  .haiku1-haikuWord1 {
    animation: wordAnim 1.5s 0.5s ease forwards;
  }
  .haiku1-haikuWord2 {
    animation: wordAnim 1.5s 0.8s ease forwards;
  }
  .haiku1-haikuWord3 {
    animation: wordAnim 1.5s 1.1s ease forwards;
  }

  .haiku1-haikuWord4 {
    animation: wordAnim 1.5s 1.7s ease forwards;
  }
  .haiku1-haikuWord5 {
    animation: wordAnim 1.5s 2s ease forwards;
  }
  .haiku1-haikuWord6 {
    animation: wordAnim 1.5s 2.3s ease forwards;
  }

  .haiku1-haikuWord7 {
    animation: wordAnim 1.5s 2.9s ease forwards;
  }
  .haiku1-haikuWord8 {
    animation: wordAnim 1.5s 3.2s ease forwards;
  }
  .haiku1-haikuWord9 {
    animation: wordAnim 1.5s 3.5s ease forwards;
  }




  /* HAIKU 2*/
  .haiku2-haikuWord1 {
    animation: wordAnim 1.5s 0.5s ease forwards;
  }
  .haiku2-haikuWord2 {
    animation: wordAnim 1.5s 0.8s ease forwards;
  }
  .haiku2-haikuWord3 {
    animation: wordAnim 1.5s 1.1s ease forwards;
  }

  .haiku2-haikuWord4 {
    animation: wordAnim 1.5s 1.7s ease forwards;
  }
  .haiku2-haikuWord5 {
    animation: wordAnim 1.5s 2s ease forwards;
  }
  .haiku2-haikuWord6 {
    animation: wordAnim 1.5s 2.3s ease forwards;
  }

  .haiku2-haikuWord7 {
    animation: wordAnim 1.5s 2.9s ease forwards;
  }
  .haiku2-haikuWord8 {
    animation: wordAnim 1.5s 3.2s ease forwards;
  }
  .haiku2-haikuWord9 {
    animation: wordAnim 1.5s 3.5s ease forwards;
  }

  .haiku2-haikuWord10 {
    animation: wordAnim 1.5s 4.1s ease forwards;
  }
  .haiku2-haikuWord11 {
    animation: wordAnim 1.5s 4.4s ease forwards;
  }
  .haiku2-haikuWord12 {
    animation: wordAnim 1.5s 4.7s ease forwards;
  }




  /* HAIKU 3*/
  .haiku3-haikuWord1 {
    animation: wordAnim 1.5s 0.5s ease forwards;
  }
  .haiku3-haikuWord2 {
    animation: wordAnim 1.5s 0.8s ease forwards;
  }
  .haiku3-haikuWord3 {
    animation: wordAnim 1.5s 1.1s ease forwards;
  }

  .haiku3-haikuWord4 {
    animation: wordAnim 1.5s 1.7s ease forwards;
  }
  .haiku3-haikuWord5 {
    animation: wordAnim 1.5s 2s ease forwards;
  }
  .haiku3-haikuWord6 {
    animation: wordAnim 1.5s 2.3s ease forwards;
  }

  .haiku3-haikuWord7 {
    animation: wordAnim 1.5s 2.9s ease forwards;
  }
  .haiku3-haikuWord8 {
    animation: wordAnim 1.5s 3.2s ease forwards;
  }
  .haiku3-haikuWord9 {
    animation: wordAnim 1.5s 3.5s ease forwards;
  }







  /* HAIKU 4*/
  .haiku4-haikuWord1 {
    animation: wordAnim 1.5s 0.5s ease forwards;
  }
  .haiku4-haikuWord2 {
    animation: wordAnim 1.5s 0.8s ease forwards;
  }
  .haiku4-haikuWord3 {
    animation: wordAnim 1.5s 1.1s ease forwards;
  }

    


  /* HAIKU 5*/
  .haiku5-haikuWord1 {
    animation: wordAnim 1.5s 0.5s ease forwards;
  }
  .haiku5-haikuWord2 {
    animation: wordAnim 1.5s 0.8s ease forwards;
  }
  .haiku5-haikuWord3 {
    animation: wordAnim 1.5s 1.1s ease forwards;
  }



  /* HAIKU 6*/
  .haiku6-haikuWord1 {
    animation: wordAnim 1.5s 0.5s ease forwards;
  }
  .haiku6-haikuWord2 {
    animation: wordAnim 1.5s 0.8s ease forwards;
  }
  .haiku6-haikuWord3 {
    animation: wordAnim 1.5s 1.1s ease forwards;
  }



  .chevaletPeinturesBg {
    width: 50%;
    position: absolute;
    bottom: 0;
    left: 15%;
    opacity: 0.3;
    transform: translateX(-15%);

    filter: drop-shadow(2px 4px 6px black);
  }


  .lettersContactBg {
    width: 100%;
    position: absolute;
    bottom: 69px;
    left: 0%;
    opacity: 0.2;
    transform: translateX(-0%);

    filter: drop-shadow(2px 4px 6px black);
  }


  .heronHaikuBg {
    position: absolute;
    width: 40%;
    bottom: 57px;
    left: 4px;
    opacity: 0.4;

    filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.5));

}




  .fadeOutHaikuImg {
    animation: fadeOut 0.5s 0s ease forwards;
  }
  .fadeOutHaikuContent {
    animation: fadeOut 0.5s 0s ease forwards;
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  .fadeInHaikuImg {
    animation: fadeIn 0.5s 0s ease forwards;
  }
  .fadeOutHaikuContent {
    animation: fadeIn 0.5s 0s ease forwards;
  }



  #nextHaikuDivDesktop:hover {
    transform: translate(5px, -50%) scale(1.05);
    /* opacity: 0.6; */
    color: #ffffff61;
  }
  #previousHaikuDivDesktop:hover {
    transform: translate(-5px, -50%) scale(1.05);
    /* opacity: 0.6; */
    color: #ffffff61;
  }

  #nextHaikuDivDesktop img, #previousHaikuDivDesktop img {
    width: 90px;
    transition: all 0.4s;
  }
  #nextHaikuDivDesktop:hover img, #previousHaikuDivDesktop:hover img {
    opacity: 0.6;
  }

  .mentionsLegalesDiv {
    position: absolute;
    bottom: 75px;
    width: 100%;

    text-shadow: 2px 2px 2px black;
    z-index: 99999;
  }
  .mentionsLegalesDiv a {
    font-size: 0.92em;
    text-align: center;
    padding: 10px 0px;
  }



  .linkBurgerHomeBtn {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 0px !important;
    height: 54px;
  }
  .svgBurgerHomeBtn {
    width: 50px;
    height: 50px;
    padding: 2px 9px;

    filter: drop-shadow(1px 1px 0px black);
  }
  .svgBurgerHomeBtn g {
    fill: #e7d5a4;
  }




  #nextRubriqueBtn, #prevRubriqueBtn {
    padding: 5px 15px;
    font-size: 0.9em;
    cursor: pointer;

    color: #e8ca7d;
    -webkit-text-fill-color: #e8ca7d;

    padding: 8px 16px;
    border-radius: 6px;
    border: 0px solid #e8ca7d21;
    background-color: #e8ca7d0d;

    transition: all 0.4s ease;
  }
  #nextRubriqueBtn:hover {
    transform: scale(1.1);
    -webkit-text-fill-color: #fff6df;
    transform: translateX(7px);
  }
  #prevRubriqueBtn:hover {
    transform: scale(1.1);
    -webkit-text-fill-color: #fff6df;
    transform: translateX(-7px);
  }


  .subTitleAcryliqueLinks {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    margin-bottom:27px;

    position: relative;
    right: 86px;
  }
  .subTitleAcrylique {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    margin-bottom:35px;
    width: 100%;
  }

  .subTitleRubrique {
    display: inline-flex;
    align-items: center;

    justify-content: space-between;
    width: 100%;
  }





























    /* Haikus.html */

    .haikusContentContainer {
      position: relative;
      padding: 0 60px;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 100px;

      flex-direction: row;

      margin-top: 35px;
    }


    .haikusContentDescriptionDiv {
      color: whitesmoke;
      text-align: left;
      line-height: 1.7em;
    }


    .traitHaiku {
      position: relative;
      height: 1px;
      width: 30%;
      left: 50%;
      transform: translateX(-50%);

      background: -webkit-linear-gradient(left, rgb(90 90 90 / 0%) 0%, rgb(255 255 255 / 52%) 50%, rgb(90 90 90 / 0%) 100%);
  }


  .traitAquarelle {
    position: relative;
    height: 1px;
    width: 0%;
    left: 50%;
    transform: translateX(-50%);

    background: -webkit-linear-gradient(left, rgb(90 90 90 / 0%) 0%, rgb(255 255 255 / 62%) 50%, rgb(90 90 90 / 0%) 100%);

    animation: fadeIn-traitAquarelle 2s 1s ease forwards;
  }
  @keyframes fadeIn-traitAquarelle {
    from {
      width: 0%;
    }
    to {
      width: 30%;
    }
  }

  .traitHaushka {
    position: relative;
    height: 1px;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);

    background: -webkit-linear-gradient(left, rgb(90 90 90 / 0%) 0%, rgb(255 255 255 / 52%) 50%, rgb(90 90 90 / 0%) 100%);

  }


    .haikusContentImg {
      cursor: pointer;
      height: 55vh;

      /* légendraire doré: */
      filter: drop-shadow(0px 0px 47px #e8ca7d);

      /* Bleu ciel: */
      filter: drop-shadow(0px 0px 47px #7bd9ff);

      transition: all 0.6s ease;
    }
    .haikusContentImg:hover {
      /* opacity: 0.8 !important; */
      transform: scale(1.06) rotateZ(-1deg);

      /* légendraire doré: */
      filter: drop-shadow(0px 0px 47px #e8ca7d);
    }


    .blueGlowFix-haikus {
      filter: drop-shadow(0px 0px 47px #7bd9ff) !important;
      height: 86vh !important;
    }


    .traitPeintureAcr-rubrique {
      /* position: relative;
      height: 1px;
      width: 90%;
      left: 50%;
      transform: translateX(-50%);

      background: -webkit-linear-gradient(left, rgb(90 90 90 / 0%) 0%, #e8ca7da9 50%, rgb(90 90 90 / 0%) 100%); */

      position: relative;
    height: 1px;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    background: -webkit-linear-gradient(left, rgb(90 90 90 / 0%) 0%, #e8ca7db3 50%, rgb(90 90 90 / 0%) 100%);
  }


    .haikusSubTitle {
      font-family: 'Montserrat Alternates', sans-serif;
      color: white;
      margin-block-start: 0em;
      margin-block-end: 0.7em;
      font-size: 2em;
      font-weight: 200;

      text-shadow: 2px 2px black;
    }


    .aquarelleSubTitle {
      font-family: 'Montserrat Alternates', sans-serif;
      color: white;
      margin-block-start: 0em;

      margin-bottom: 0;
      padding-bottom: 0.6em;

      /* font-size: 2em; */
      font-size: 2.1em;
      font-weight: 200;
      /* text-shadow: 2px 2px black; */
      text-shadow: 0px 0px 3px black;

      opacity: 0;
      transform: translateY(60px);
      animation: aquarelleSubTitle-slideIn 1.4s 1.6s ease forwards;
    }
    @keyframes aquarelleSubTitle-slideIn {
      from {
        opacity: 0;
        transform: translateY(60px);
      }
      to {
        opacity: 1;
        transform: translateY(0px);
      }
    }

    

    .haushkaSubTitle {
      width: fit-content;
      margin: 0 auto;
      display: inline-flex;
      align-items: center;

      font-family: 'Montserrat Alternates', sans-serif;
      color: white;
      margin-block-start: 0em;
      margin-block-end: 0.2em;
      font-size: 2em;
      font-weight: 200;

      text-shadow: 2px 2px black;
    }


    #haushkaBackIcon {
      opacity: 0;
      margin-right: 20px;

      transition: all 0.4s ease;
    }


    .subTitle {
      font-family: 'Montserrat Alternates', sans-serif;
      color: white;
      margin-block-start: 0em;
      margin-block-end: 0em;
      font-size: 2em;
      font-weight: 200;

      text-shadow: 2px 2px black;
    }


    .haikusContentDescriptionDiv h3 {
      font-family: 'Montserrat Alternates', sans-serif;
      color: #e8ca7d;


      margin-block-end: 1.5em;
      font-size: 1.3em;
      transform: translateX(-15px);

      text-shadow: 1px 1px black;
    }





















    /* Contact.html */
    .contactSubTitle {
      margin: 0;
      text-align: center;
      font-family: 'Montserrat Alternates', sans-serif;
      color: #e8ca7d;

      align-items: center;
      display: inline-flex;
      margin: 0 auto;
      left: 50%;
      position: relative;
      transform: translateX(-50%);

      text-shadow: 2px 2px black;

      opacity: 0;
      animation: fadeIn 1.5s 1s ease forwards;
  }
  .contactSubTitle-2 {
    margin: 15px auto;
    font-family: 'Montserrat Alternates', sans-serif;
    color: #e8ca7d;

    opacity: 0;
    animation: fadeIn 1.2s 2s ease forwards;
  }

  .contactFormIconTitle {
    margin-right: 21px;
    font-size: 2em;
  }

  #plz-form-c50d7ff1-e8c3-4e7e-b889-f6fc24999c54 {
      width: 50% !important;
      margin: 10px auto !important;
      background-color: rgba(255, 255, 255, 0) !important;
  }
  #plz-form-c50d7ff1-e8c3-4e7e-b889-f6fc24999c54 input.plezi-submit-btn {
      background: #e8ca7d !important;
  }



  #haushkaSubTitleDiv {
    width: fit-content;
    margin: 0 auto;
    z-index: 999999;
    position: relative;

    cursor: pointer;
    transition: all 0.4s;
  }
  #haushkaSubTitleDiv:hover {
    opacity: 0.8;
    letter-spacing: 1px;
  }


  .hauska-img-bleu {
    box-shadow: 0px 0px 30px #7de3e885;
  }
  .hauska-img-jaune {
    box-shadow: 0px 0px 30px #fbfbb3;
  }
  .hauska-img-rouge {
    box-shadow: 0px 0px 30px #ffb1b1;
  }
  .hauska-img-orange {
    box-shadow: 0px 0px 30px #fedb99;
  }
  .hauska-img-vert {
    box-shadow: 0px 0px 30px #a1e3a2;
  }
  .hauska-img-violet {
    box-shadow: 0px 0px 30px #eb8bec;
  }

  /* #bodyHaushka {
    transition: all 0.4s;
  } */



  .bodyHaushka-yellow {
    /* background: rgb(255 217 16 / 30%);
    background: -moz-linear-gradient(180deg, rgb(255 217 16 / 30%) 20%, rgb(16 73 97) 100%);
    background: -webkit-linear-gradient(180deg, rgb(255 217 16 / 30%) 20%, rgb(16 73 97) 100%);
    background: linear-gradient(180deg, rgb(255 217 16 / 30%) 20%, rgb(16 73 97) 100%); */
    background-color: rgb(255 217 16 / 30%) !important;
  }
  .bodyHaushka-purple {
    /* background: rgb(121 43 125 / 30%);
    background: -moz-linear-gradient(180deg, rgb(121 43 125) 20%, rgb(16 73 97) 100%);
    background: -webkit-linear-gradient(180deg, rgb(121 43 125) 20%, rgb(16 73 97) 100%);
    background: linear-gradient(180deg, rgb(121 43 125) 20%, rgb(16 73 97) 100%); */
    background-color: rgb(121 43 125 / 30%) !important;
  }
  .bodyHaushka-red {
    /* background: rgb(221 28 28 / 30%);
    background: -moz-linear-gradient(180deg, rgb(221 28 28 / 30%) 20%, rgb(16 73 97) 100%);
    background: -webkit-linear-gradient(180deg, rgb(221 28 28 / 30%) 20%, rgb(16 73 97) 100%);
    background: linear-gradient(180deg, rgb(221 28 28 / 30%) 20%, rgb(16 73 97) 100%); */
    background-color: rgb(221 28 28 / 30%) !important;
  }
  .bodyHaushka-blue {
    /* background: rgb(0 11 97 / 30%);
    background: -moz-linear-gradient(180deg, rgb(0 11 97 / 30%) 20%, rgb(16 73 97) 100%);
    background: -webkit-linear-gradient(180deg, rgb(0 11 97 / 30%) 20%, rgb(16 73 97) 100%);
    background: linear-gradient(180deg, rgb(0 11 97 / 30%) 20%, rgb(16 73 97) 100%); */
    background-color: rgb(0 11 97 / 30%) !important;
  }
  .bodyHaushka-orange {
    /* background: rgb(255 120 0 / 30%);
    background: -moz-linear-gradient(180deg, rgb(255 120 0 / 30%) 20%, rgb(16 73 97) 100%);
    background: -webkit-linear-gradient(180deg, rgb(255 120 0 / 30%) 20%, rgb(16 73 97) 100%);
    background: linear-gradient(180deg, rgb(255 120 0 / 30%) 20%, rgb(16 73 97) 100%); */
    background-color: rgb(255 120 0 / 30%) !important;
  }
  .bodyHaushka-green {
    /* background: rgb(0 255 128 / 30%);
    background: -moz-linear-gradient(180deg, rgb(0 255 128 / 30%) 20%, rgb(16 73 97) 100%);
    background: -webkit-linear-gradient(180deg, rgb(0 255 128 / 30%) 20%, rgb(16 73 97) 100%);
    background: linear-gradient(180deg, rgb(0 255 128 / 30%) 20%, rgb(16 73 97) 100%); */
    background-color: rgb(0 255 128 / 30%) !important;
  }




  .haushkaSection-header {
    margin: 37px auto;
  }

  .haushkaSection-content {

    margin: 5px auto;

    width: 100%;
    display: inline-flex;
    flex-flow: wrap;
    justify-content: center;
  }

  .hauskaContent section h3 {
    font-family: 'Montserrat Alternates', sans-serif;
    color: #e8ca7d;
    text-shadow: 1px 1px black;
    font-weight: 300;
  }

  .hauskaContent section ul {
    display: inline-flex;
    color: white;
    list-style-type: none;
    padding-inline-start: 0;
  }

  .hauskaContent section ul li {
    position: relative;
    margin: 0 16px;
    padding: 15px 50px;
    border-radius: 5px;
    cursor: pointer;

    overflow: visible;


    transition: all 0.4s;
  }

  .hauskaContent section ul .liShrinked {
    position: relative;
    margin: 7px 10px;
    padding: 6px 65px;
    border-radius: 5px;
    cursor: pointer;

    overflow: visible;


    transition: all 0.4s;
  }


  .hauskaContent section ul li span {
    /* color: #161616; */
    color: white;
    font-weight: 400;

    z-index: 9999999;
    position: relative;

    font-family: 'Montserrat Alternates', sans-serif;
  }


  .haushkaSectionTitleTxt {
    /* color: #161616; */
    color: white;
    text-shadow: 1px 1px #ffffff47;
    /* font-weight: 600; */
    font-weight: 300;

    font-size: 1.6em;

    z-index: 9999999;
    position: relative;

    font-family: 'Montserrat Alternates', sans-serif;
  }

  .fontBlack {
    color: black;
  }


  .bgHoverDesktop {
    position: absolute;
    z-index: -10;
    opacity: 0;

    width: 380px;
    height: 380px;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    transition: all 0.35s;
  }

  .hauskaContent section ul li:hover .bgHoverDesktop {
    opacity: 0.4;
  }


  .bgHoverDesktop-yellow {
    background: rgba(183, 183, 66, 0.5);
    background: -moz-radial-gradient(circle, rgba(183, 183, 66, 0.5) 0%, rgba(0,0,0,0) 70%);
    background: -webkit-radial-gradient(circle, rgba(183, 183, 66, 0.5) 0%, rgba(0,0,0,0) 70%);
    background: radial-gradient(circle, rgba(183, 183, 66, 0.5) 0%, rgba(0,0,0,0) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbfbb3",endColorstr="#000000",GradientType=1);
  }

  .bgHoverDesktop-red {
    background: rgba(201, 57, 57, 0.5);
    background: -moz-radial-gradient(circle, rgba(201, 57, 57, 0.5) 0%, rgba(0,0,0,0) 70%);
    background: -webkit-radial-gradient(circle, rgba(201, 57, 57, 0.5) 0%, rgba(0,0,0,0) 70%);
    background: radial-gradient(circle, rgba(201, 57, 57, 0.5) 0%, rgba(0,0,0,0) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbfbb3",endColorstr="#000000",GradientType=1);
  }

  .bgHoverDesktop-blue {
    background: rgb(163, 163, 233);
    background: -moz-radial-gradient(circle, rgba(163, 163, 233, 0.4) 0%, rgba(0,0,0,0) 70%);
    background: -webkit-radial-gradient(circle, rgba(163, 163, 233, 0.4) 0%, rgba(0,0,0,0) 70%);
    background: radial-gradient(circle, rgba(163, 163, 233, 0.4) 0%, rgba(0,0,0,0) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbfbb3",endColorstr="#000000",GradientType=1);
  }



  .bgHoverDesktop-orange {
    background: rgb(254, 219, 153);
    background: -moz-radial-gradient(circle, rgba(254, 219, 153, 0.4) 0%, rgba(0,0,0,0) 70%);
    background: -webkit-radial-gradient(circle, rgba(254, 219, 153, 0.4) 0%, rgba(0,0,0,0) 70%);
    background: radial-gradient(circle, rgba(254, 219, 153, 0.4) 0%, rgba(0,0,0,0) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbfbb3",endColorstr="#000000",GradientType=1);
  }

  .bgHoverDesktop-green {
    background: rgb(165, 232, 165);
    background: -moz-radial-gradient(circle, rgba(165, 232, 165, 0.4) 0%, rgba(0,0,0,0) 70%);
    background: -webkit-radial-gradient(circle, rgba(165, 232, 165, 0.4) 0%, rgba(0,0,0,0) 70%);
    background: radial-gradient(circle, rgba(165, 232, 165, 0.4) 0%, rgba(0,0,0,0) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbfbb3",endColorstr="#000000",GradientType=1);
  }

  .bgHoverDesktop-purple {
    background: rgb(235, 139, 236);
    background: -moz-radial-gradient(circle, rgba(235, 139, 236, 0.4) 0%, rgba(0,0,0,0) 70%);
    background: -webkit-radial-gradient(circle, rgba(235, 139, 236, 0.4) 0%, rgba(0,0,0,0) 70%);
    background: radial-gradient(circle, rgba(235, 139, 236, 0.4) 0%, rgba(0,0,0,0) 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbfbb3",endColorstr="#000000",GradientType=1);
  }



  .haushkaSection-header {
    margin-top: 50px;
  }

.haushkaSectionTitle {
  position: relative;

  height: 75px;
  align-items: center;
  display: flex;
  justify-content: center;
}


  .haushka-brushStroke {
    position: absolute;
    width: 142px;
    opacity: 1;
    top: -14px;
    left: 1px;

    filter: blur(0px);

    transition: all 0.65s;
  }

  .haushka-brushStroke-shrinked {
    position: absolute;
    width: 97px;
    opacity: 1;
    top: -4px;
    left: 8px;

    transition: all 0.7s;
  }

  .haushka-brushStroke-central {
    position: absolute;
    opacity: 1;

    width: 180px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    transition: all 0.7s;
  }

  .haushkaLi:hover .haushka-brushStroke {
    z-index: 9;
    /* filter: hue-rotate(359deg); */
    transform: scale(1.2) rotate(5deg) translate(2px, -1px);
    opacity: 0.8;

    filter: blur(12px);
  }

  /* .haushkaLi  span {
    transition: all 0.5s;
  }

  .haushkaLi:hover span {
    letter-spacing: 1px;
  } */


  /* .hausha-jaune {
    background-color: yellow;
  }
  .hausha-rouge {
    background-color: red;
  }
  .hausha-bleu {
    background-color: blue;
  }

  .hausha-orange {
    background-color: orange;
  }
  .hausha-vert {
    background-color: green;
  }
  .hausha-violet {
    background-color: purple;
  } */