/** Shopify CDN: Minification failed

Line 879:2 All "@import" rules must come first

**/


@media screen and (max-width: 1400px){

}  

@media screen and (max-width: 1100px){
 
}   
@media screen and (max-width: 950px){
  .wrapper-left-cryo {
    width: 100% !important;
  }
  .wrapper-right-cryo {
    width: 100% !important;
  }
 .flex-absolute {
    flex-direction: column-reverse;
  } 
  .wrapper-left-cryo {
    padding-top: 45px;
  }
  .wrapper-left-cryo div {
      width: 100%;
  }
}
.accordion-tab {
  border-bottom: 1px solid;
 /* border-radius: 4px;*/
  margin-bottom: 10px;
}

.accordion-title {
  padding: 10px;
  cursor: pointer;
  background: #000f9f;
  color: white;
}

.accordion-content {
  padding-top:10px;
  padding: 0 10px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  max-height: 0;
}

.accordion-tab.active .accordion-content {
  max-height: 1000px;
  transition: max-height 0.35s ease-in;
}
.main-wrapper-cryo{
  width: 80%;
  margin: 58px auto;
} 
.wrapper-right-cryo {
  width: 50%;
}
.wrapper-left-cryo{
  width: 50%;
}   
.flex-absolute{
  display:flex;
}  
.wrapper-accordions{
  padding-top: 25px; width: 80%;
}    
.title-bottom-img{
  text-align: center;
  padding-top: 42px;
  display: flex; flex-direction: row; align-items: center;width: 100%;
}  
.title-bottom-img.zoomed-top {
 padding-top: 62px;
 transition: transform 0.5s ease-in-out;
}    
.adn-synapse {
  margin: 0 10px; flex: 1;
}  
.adn-synapse {
  width: 20%;
  position: relative;
  height: 2px;
}  
.adn-o{
  background: #000F9F; border-radius: 44px; height: 9px; width: 9px;display: block !important;
}  
.image-container {
  border: 2px solid;
  margin-bottom: -16px;
  margin-top: -18px;
}

.image-container img {
  display: block;
  height: auto;
  transition: transform 0.5s ease-in-out; /* Ajout de la propriété transition avec une durée de 0.5s et une courbe de transition en "ease-in-out" pour un effet de zoom doux */
}

.image-container img.zoomed {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2);
  transition: transform 0.5s ease-in-out; /* Ajout de la propriété transition avec une durée de 0.5s et une courbe de transition en "ease-in-out" pour un effet de zoom doux */
}

.image-container img.zoomed-max {
  -ms-transform: scale(1.3); /* IE 9 */
  -webkit-transform: scale(1.3); /* Safari 3-8 */
  transform: scale(1.3);
  transition: transform 0.5s ease-in-out; /* Ajout de la propriété transition avec une durée de 0.5s et une courbe de transition en "ease-in-out" pour un effet de zoom doux */
}





@media screen and (max-width: 750px){
  .wrapper-synapse-adn {
    width: 390px !important;
  }
  .size {
    width: 105px !important;
  }
  .size-text {
    width: 175px !important;
  }
  .rounded{
   width:12px !important;
   height:12px !important;
  }
  .eighth {
    top: 21px !important;
    left: 266px !important;
  }
  
.first{
  top: 64px !important;
  left: 12px !important;
}
.second{
  left: 5px !important;
  top: 87px !important;
}
.third{
  left: 91px !important;
  top: 87px !important;
}
.fourth{
 top: 108px !important;
 left: 93px !important;
}
.fifth{
 top: 157px !important;
 left: 47px !important;
}
.sixth {
  top: -66px !important;
  left: 123px !important;
}
.seventh{
 bottom: 22px !important;
 left: 270px !important; 
}

.ninth{
  top: -137px !important;
  left: 178px !important;
}
.ninth-2{
  /*! bottom: 55px !important; */
  left: 364px !important;
  top: -207px !important;
}
.tenth {
  left: 277px !important;
  bottom: 186px !important;
}
.eleventh {
  left: 181px !important;
  bottom: 159px !important;
}
.twelfth {
  bottom: 166px !important;
  left: 279px !important;
}
.thirteenth{
  top: -1px !important; 
  left: 4px;
}
.fourteenth {
  left: 93px !important;
  top: -14px !important;
}
.under-sixth{
  left: 361px !important;top: 18px !important;
}    
}  


@media screen and (max-width: 450px){
  .wrapper-synapse-adn {
    width: 390px !important;
      height: 230px !important;

  }
  .size {
    width: 33px !important;
  }
  .size-text {
    width: 175px !important;
  }
  .rounded{
   width:8px !important;
   height:8px !important;
  }
  .eighth {
    top: -14px !important;
    left: 176px !important;
  }
  
.first{
  top: 75px !important;
  left: 109px !important;
}
.second{
  left: 111px !important;
  top: 82px !important;
}
.third{
  left: 138px !important;
  top: 80px !important;
}
.fourth{
 top: 87px !important;
 left: 135px !important;
}
.fifth{
 top: 100px !important;
 left: 122px !important;
}
.sixth {
  top: -52px !important;
  left: 123px !important;
}
.seventh{
 bottom: 44px !important;
 left: 228px !important; 
}

.ninth{
  top: -118px !important;
  left: 165px !important;
}
.ninth-2{
  /*! bottom: 55px !important; */
  left: 228px !important;
  top: -145px !important;
}
.tenth {
  left: 202px !important;
  bottom: 140px !important;
}
.eleventh {
  left: 173px !important;
  bottom: 133px !important;
}
.twelfth {
  bottom: 139px !important;
  left: 200px !important;
}
.thirteenth{
  top: -76px !important; 
  left: 29px;
}
.fourteenth {
  left: 134px !important;
  top: -87px !important;
}
.under-sixth{
  left: 254px !important;top: -29px !important;
}    
}  
  
.wrapper-synapse-adn {
  width: 556px;
  margin: 0 auto;
    margin-bottom: 0px;
  height: 433px;
  margin-bottom: 32px;
}
.size {
  position: relative;
  width: 145px;
  height: 2px;
  background: #000F9F;
  display: block !important;
}
.size-text {
  position: relative;
  width:245px;
  text-align:center;
}
.rotate90{
  transform: rotate(90deg);
}
.size:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  width: 45%;
  height: 2px;
  background: linear-gradient(to right, transparent, aqua);
  animation: move 1s linear infinite;
  
}

.rotate146{
  transform: rotate(146deg);
}
.rotate216{
  transform: rotate(216deg);
}
.rotate36{
  transform: rotate(36deg)
}
.rounded {
  width: 12px;
  height: 12px;
  background: #000F9F;
  border-radius: 14px;
  position: relative;
  animation: blink 1s ease-in-out infinite alternate;
  display: block !important;
}
.first{
  top: 72px;
  left: 7px;
}
.second{
  top: 110px;
  left: 0px;
}
.third{
  left: 120px;
  top: 111px;
}
.fourth{
  left: 125px;
  top: 144px;
}
.fifth{
 top: 213px;
 left: 58px;
}
.sixth {
  top: 156px;
  left: 394px;
}
.seventh{
  left: 381px;
  bottom: 30px;
}
.eighth{
 top: -160px;
 left: 119px; 
}
.ninth{
 bottom: 252px;
 left: 512px; 
}
.ninth-2{
  top: -183px;
  left: 245px;
}
.tenth {
  bottom: 228px;
  left: 381px;
}
.eleventh {
  left: 252px;
  bottom: 191px;
}
.twelfth {
  bottom: 198px;
  left: 388px;
}
.thirteenth{
  top: 84px; 
}
.fourteenth {
  left: 124px;
  top: 17px;
}
.under-sixth{
  left: 503px;top: 17px;
}  
/*
@keyframes blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}
*/
@keyframes move {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@media screen and (min-width: 1400px){
  .wrapper-synapse-adn {
    width: 861px;
    padding-top: 50px;
  }
  .size {
    width: 242px;
  }
  .first {
    top: 43px;
    left: 16px;
  }
  .third {
    left: 197px;
    top: 111px;
  }
  .fourth {
    left: 213px;
    top: 168px;
  }
.seventh {
  left: 394px;
  bottom: -2px;
}
  .fifth {
    top: 281px;
    left: 98px;
  }
.sixth {
  top: 190px;
  left: 493px;
}
  .thirteenth {
  top: 176px;
  left: 91px;
}
.eleventh {
  left: 419px;
  bottom: 184px;
}
.twelfth {
  bottom: 191px;
  left: 413px;
}
.tenth {
  bottom: 249px;
  left: 640px;
}

  .fourteenth {
  left: 212px;
  top: 171px;
}
  .under-sixth{
    left: 605px;top: 78px;
  
  }
  .eighth {
  top: -168px;
  left: 294px;
}
  .ninth {
  bottom: 297px;
  left: 852px;
}
  .ninth-2 {
  top: -173px;
  left: 655px;
}
} 
  



/**Début style card animation **/  
@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

:root {
  --carte-anime-height: 65vh;
  --carte-anime-width: calc(var(--carte-anime-height) / 1.5);
}

.carte-anime {
  width: var(--carte-anime-width);
  height: var(--carte-anime-height);
  background-color: #000F9F;
  margin: 18px auto;
  border: 2px solid;
}



/***Fin animation, début css générale ***/
.flex{
  display:flex;
}  
.wrapper-carte-anime{
  width: 50%;
  display: flex;
  justify-content: center;
}
.wrapper-text-anime{
  /*border-left: 2px solid;*/
  width: 50%;
  padding: 0 2%;
}  
.wrapper-all-title div {
  font-size: 3rem !important;
}
  
@media screen and (max-width: 1200px){
  .wrapper-text-anime {
    width: 40% !important;
  }
  .wrapper-carte-anime {
    width: 60% !important;
  }  
  
}

@media screen and (max-width: 1100px){
  .wrapper-text-anime {
    width: 45% !important;
  }
  .wrapper-carte-anime {
    width: 55% !important;
  } 
  
}

@media screen and (max-width: 1000px){
  .wrapper-text-anime {
    width: 48% !important;
  }
  .wrapper-carte-anime {
    width: 54% !important;
  }  
  
}  
.anime-title-mobile {
  text-align: center;
  padding: 10px;
}
.anime-text-mobile {
    width: 70%;
    margin: 0 auto;
    padding-top: 32px;
    padding-bottom: 14px;
    border-bottom: 1px solid;
}  
.anime-title-mobile{
  display:none;
} 
  
.anime-text-mobile{
  display:none;
}   
  
@media screen and (max-width: 950px){
  .wrapper-text-anime {
    display: none !important;
  }
  .wrapper-carte-anime {
    width: 100% !important;
  }  
  .anime-title-mobile{
    display:block !important;
  } 
  .anime-text-mobile{
    display:block !important;
  }  
  .flex{
    display:unset !important;
  }
}
/**Fin style card animation **/    



/******* Début *********/

.wrapper-square {
  margin: 40px auto;
}
.square-left{
  width: 550px;
  position: relative;
  left: 22px;
  z-index: 0;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  border-bottom: 2px solid;
  border-right: 2px solid;  
}
.square-right{
  width: 550px;
  position: relative;
  z-index: 1;
}

.square-text {
  bottom: 0;
  right: 623px;
  z-index: 0;
  background-color: #ffffff;
  width: 540px;
  height: 92%;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

.square-image {
  width: 100%;
  border: 2px solid;
  padding: 5px;
  background: white;
}

.square-presentation{
  padding: 28px 0px 28px 50px;
}

.square-image div{
  border: 2px solid;
}  

.square-logo {
  position: absolute;right: 509px;width: 80px;top: 318px;z-index: 4;border: 2px solid;background: white;
}
.square-name {
  right: 38px;
  bottom: 36px; 
} 
.square-margin {
  width: 80%;
  line-height: 1;
  font-size: 6.5rem;
}
.margin45{
  margin-left:45px;
}

.content-square{
  padding-top: 8px;width: 88%;
}  
.square-presentation-mobile{
  text-align: center;
  padding: 110px;
  display:none;
}  
.square-margin-mobile{
  text-align: center;
  font-size: 3rem;
  line-height: 1;
  padding-bottom: 38px;
  display:none;
}  
.sub-square{
  display:flex
}  
@media screen and (min-width: 1400px){
  .wrapper-square {
    width: 1200px;
  }
}  

@media screen and (max-width: 1400px){
  .wrapper-square {
    width: 1132px;
  }
}  

@media screen and (max-width: 1100px){
  .wrapper-square {
    width: 800px;
  }  
  .square-margin{ 
    font-size: 4rem !important;
  }
  .square-logo {
    right: 365px;
    width: 62px;
    top: 223px;
  }
}   
@media screen and (max-width: 900px){
  .wrapper-square {
    width: 691px;
  }
  .square-margin{ 
    display:none;
  }
  .square-logo {
    right: 365px;
    width: 62px;
    top: 223px;
  }
  .square-presentation {
    padding: 48px 0px 0px 42px;
  }
 .square-margin-mobile{
    display:block !important;
  }  
  .content-square {
    height:100%;
    width:82%;
    padding-bottom: 20px;
  }
  .square-left {
    width: 380px;
    top: 0px;
  }
}   
@media screen and (max-width: 700px) {
  .square-presentation-mobile{
    display:block !important;
    padding: 34px !important;
  }  
  .wrapper-square {
    width: 450px;
  }
  .sub-square {
    flex-direction: column-reverse;
    width: 100%;
    margin: 0 auto;
  }
  .square-left {
    width: 80%;
    margin: 0 auto;
    top:0;
  }
  .square-presentation {
    display:none;
  }
  .square-logo {
    right: 0px;
    top: 250px;
  }
  .content-square {
    width: 85%;
  }
  .square-right {
    width: 450px;
  }
}  


/******* Fin *********/



.wrapper-etoile-filante{
  width:70%;
  margin:0 auto;
}  

.wrapper-etoile-filante div{
  text-align: center;font-size: 45px;
}  
  
.etoile-filante {
  position: relative;
  display:block !important;
  width: 245px;
  margin: 0 auto;
}

.etoile-filante:after {
  content: ""; 
  position: absolute; 
  top: -20px; /* Définir la position initiale de l'élément pseudo */
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, #000F9F); /* Définir un dégradé pour l'effet étoile filante */
  animation: move-etoile 2s linear infinite; /* Définir l'animation */
}

@keyframes move-etoile {
  from {
    transform: translateX(-100%); /* Définir la position de départ de l'élément pseudo */
  }
  to {
    transform: translateX(100%); /* Définir la position d'arrivée de l'élément pseudo */
  }
}
  


.wrapper-iac {
  display: flex;
  width: 80%;
  margin: 0 auto;
  padding-bottom: 45px;
}
.wrapper-sub-iac {
  width: 50%;
}
.wrapper-adn-text{
   padding:12px;
}
.wrapper-iac-img {
  border: 2px solid;
  padding: 10px;
}
.p-b{
  padding-bottom:14px;
}

@media screen and (min-width: 1400px){
  .wrapper-iac {
    margin: 205px auto;
  }
}  
@media screen and (max-width: 900px){
  .wrapper-iac {
    flex-direction: column;
  }
  .wrapper-iac div:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
  }
  .wrapper-sub-iac {
    width: 100%;
  }
  
}    


  .center{
    text-align: center;
  }
  .wrapper-verticale-title{
    width:100%;
  }  
  .wrapper-verticale-text-line {
    display:flex;
  }
  .wrapper-verticale-text-line div{
    width:50%;
  }  
  .wrapper-verticale-text-line div:nth-child(1){
    border-right:2px solid;
  }
@media screen and (max-width: 1200px){
  .wrapper-verticale-text-line div{
    padding:14px;
  }
}


  @import url(https://pro.fontawesome.com/releases/v5.11.2/css/all.css);
.main p , .sub p {
  margin:0;
}

body .credit {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: inherit;
}
body .options {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  min-width: 600px;
  max-width: 900px;
  width: calc(100% - 100px);
  height: 400px;
  margin: 52px auto;
}
@media screen and (max-width: 718px) {
  body .options {
    min-width: 520px;
  }
  body .options .option:nth-child(5) {
    display: none;
  }
}
@media screen and (max-width: 638px) {
  body .options {
    min-width: 440px;
  }
  body .options .option:nth-child(4) {
    display: none;
  }
}
@media screen and (max-width: 558px) {
  body .options {
    min-width: 360px;
  }
  body .options .option:nth-child(3) {
    display: none;
  }
}
@media screen and (max-width: 478px) {
  body .options {
    min-width: 280px;
  }
  body .options .option:nth-child(2) {
    display: none;
  }
}
body .options .option {
  position: relative;
  overflow: hidden;
  min-width: 60px;
  margin: 10px;
  background: var(--optionBackground, var(--defaultBackground, #e6e9ed));
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option:nth-child(1) {
  --defaultBackground: #ed5565;
}
body .options .option:nth-child(2) {
  --defaultBackground: #fc6e51;
}
body .options .option:nth-child(3) {
  --defaultBackground: #ffce54;
}
body .options .option:nth-child(4) {
  --defaultBackground: #2ecc71;
}
body .options .option:nth-child(5) {
  --defaultBackground: #5d9cec;
}
body .options .option:nth-child(6) {
  --defaultBackground: #ac92ec;
}
body .options .option.active {
  flex-grow: 10000;
  transform: scale(1);
  max-width: 600px;
  margin: 0px;
  border: 2px solid;
  /*border-radius: 40px;*/
  background-size: cover;
  /*&:active {
     transform:scale(0.9);
  }*/
}
body .options .option.active .shadow {
  box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
}
body .options .option.active .label {
  bottom: 20px;
  left: 20px;
}
body .options .option.active .label .info > div {
  left: 0px;
  opacity: 1;
}
body .options .option:not(.active) {
  flex-grow: 1;
  border-radius: 30px;
}
body .options .option:not(.active) .shadow {
  bottom: -40px;
  box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
}
body .options .option:not(.active) .label {
  bottom: 10px;
  left: 10px;
}
body .options .option:not(.active) .label .info > div {
  left: 20px;
  opacity: 0;
}
body .options .option .shadow {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 120px;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option .label {
  display: flex;
  position: absolute;
  right: 0px;
  height: 40px;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .options .option .label .icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: white;
  color: var(--defaultBackground);
}
body .options .option .label .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
  color: white;
  white-space: pre;
}
body .options .option .label .info > div {
  position: relative;
  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;
}
body .options .option .label .info .main {
  font-weight: bold;
  font-size: 1.2rem;
  color: #000F9F;
}
body .options .option .label .info .sub {
  transition-delay: 0.1s;
  color:#000F9F;
}


  .wrapper-verticale-line {
    display:flex;
  }
  .wrapper-verticale-line div{
    width:50%;
    height: 104px;
    display:block !important;
  }  
  .wrapper-verticale-line div:nth-child(1){
    border-right:2px solid;
  }
  .wrapper-verticale-line-desktop {
    display:flex;
  }
  .wrapper-verticale-line-desktop div{
    width:50%;
    height: 104px;
    display:block !important;
  }  
  .wrapper-verticale-line-desktop div:nth-child(1){
    border-right:2px solid;
  }
  .wrapper-verticale-line-mobile {
    display:flex;
  }
  .wrapper-verticale-line-mobile div{
    width:50%;
    height: 104px;
    display:block !important;
  }  
  .wrapper-verticale-line-mobile div:nth-child(1){
    border-right:2px solid;
  }
  .wrapper-verticale-line-mobile {
      display: none;
  } 
  .wrapper-verticale-line-desktop {
      display: none;
  }   
  @media screen and (max-width: 700px){
    .wrapper-verticale-line-mobile {
        display: flex !important;
    }   
  }
  @media screen and (min-width: 705px){
    .wrapper-verticale-line-desktop {
        display: flex !important;
    }   
  }