:root{
  --couleur1: #d6d9d4;
  --couleur2:#6bb5ac;
  --couleur3:#008b9e;
  --couleur4:#007c8e;
  --borderRadius: 20px;
  --borderRadius2x: 40px;
  --bordure:#e3dfff;
  --background_gris:#F7F7F7;
  --background:#f9f5f7;
  --input_hover:#eee;
  --fond_erreur:#ffdddd;
  --erreur:red;
  --bordure_valide:#2ecc71;
  --couleur_claire:#CBEDD5;
  --couleurAction:#fb9e00;
  --couleurActionSombre:#d58600;
  --degrader:linear-gradient(0deg, rgba(67,154,151,0.7) 0%, rgba(67,154,151,0.7) 100%);
  
  --bk_chargement:linear-gradient(180deg,rgba(207, 65, 151, 0.4)5%,rgba(123, 66, 215, 0.4) 62%,rgba(91, 133, 230, 0.4));
}


@font-face {font-family: "font1";src: url("/fonts/itcavantgardestd-bk.otf");}

@font-face {
  font-family: 'titre';
  font-style: normal;
  font-weight: 900;
  src: url(/fonts/titre.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {font-family:font1, sans-serif; background:var(--background); font-size: 1.3em; }

body p{line-height: 1.7em }
h1, h2, h3, h4 { margin-bottom: 0; font-family: titre;}
h2,  .blog__blog h1 {margin: 0; font-size: 3em}
._faq h2{font-size: 2em}
.typewrite > .wrap { border-right: 0.08em solid #fff}

@media (max-width: 1024px)
{
  h2{font-size: 1.8em}
  body{position:relative; font-size: 1em}
}

h3{font-size: 1.3em}
h4{font-size: 1.2em}
a, .a { text-decoration: none; color: #fb9e00;}
.erreur {animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;}
.conteneur2{max-width: 90%; }
.stop_scroll {overflow: hidden!important;}
#retour {font-size: 2em;}
strong{font-size: 1.1em; }
.noselect
{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.legend .erreur {color: red;}
.legend .valider {text-decoration: line-through;}


  
#entete {width: 100%; padding: 0 10px;  padding: 10px; display: flex; justify-content: space-between;flex-wrap: wrap;align-items: center;background-image: var(--degrader);scroll-snap-align: start; position:absolute; z-index: 2;}
body:not(._entete_static) #entete{}
#entete a {color: var(--couleur_claire); text-decoration: none; display: block;}
#entete #logo svg {width: 200px;}
#logo svg #bmt54qd5aqym39hubne0qxmf path, #logo svg #txt path{fill:#fff!important; stroke:#fff!important}
#entete #bloc_menu a, #entete #bloc_menu_perso .c {font-size: 1.3em;}
#bloc_menu_perso .a {color: var(--couleur_claire);}
#menu_principal ul, #menu_principal li {list-style: none; margin: 0; padding: 0;}
#menu_principal ul li {display: inline-block;}

body{background: #edfff2}



#le_conteneur { transition: opacity .5s; padding-bottom: 100px; }
.pas_infolettre #le_conteneur{padding-bottom: 150px}
@media (max-width:768px)
{
  body:not(#_contact) #le_conteneur{padding-bottom: 0}
}
 #menu  {padding: 0px; width: 100%; display: flex; align-items: center; justify-content: space-between; background-image: var(--degrader);box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);border: 1px solid rgba(255, 255, 255, 0.3); z-index: 4; position: fixed; bottom: 0; transition: all .2s linear; transform: translateY(0); font-size:1.3em }
 
.masquer_menu #menu {display: none;}
#menu ul, #menu li {margin: 0; padding: 0; list-style: none;transition:all .2s linear;}
#menu ul {width: 100%;display: flex;justify-content: space-evenly;flex-wrap: wrap; align-content: center; align-items: center; margin: auto }
#menu li{display: flex;flex-grow: 1;}
.connecter #menu .m27 .menu_a {}
#menu .actif 
{box-shadow: 0px 0px 16px rgba(0,0,0,60%) inset;}

#menu .menu_a {color: #fff; transition:all .2s linear; padding:.3em; display: block; cursor: pointer; text-align: center; width:100%}
#menu .menu_a span {display: block; font-size: .5em; margin: 0}
#menu .menu_a span.user_photo { width: 32px; height: 32px; border-radius: 50%; background-color: var(--couleur_claire); background-size: cover; margin: auto;
}
.menu {position: fixed; z-index: 2; width: 100%; height: 100%; top: 100%; left: 0; }

.nav ul, .nav li {margin: 0; padding: 0; list-style: none;}
.nav {width: 90%;background-image: var(--degrader); backdrop-filter: blur( 5px );border: 1px solid rgba(255, 255, 255, .1);
-webkit-backdrop-filter: blur( 5px );bottom: 0px;border-radius: var(--borderRadius); padding-bottom:70px; border-bottom-right-radius:  0; border-bottom-left-radius: 0; overflow: hidden;
	left: 50%; transform:translate(-50%,200%); position: fixed;transition:all .3s linear; z-index:3
}
.nav a {color: var(--couleur_claire); display: block; padding: 10px 20px; border-bottom: 1px dashed rgba(255, 255, 255, .2)}
.nav a:hover 
{background: var(--couleur2); color: var(--couleur_claire);}


#input_menu_autre:checked ~ #site #menu_autre_nav
, #input_menu_perso:checked ~ #menu_perso_nav
, #input_menu_suivi:checked ~ #menu_suivi_nav 
{transform: translate(-50%, 0);}

#input_menu_perso:checked ~ #maitre #menu ul li label[for="input_menu_perso"] 
, #input_menu_suivi:checked ~ #maitre #menu ul li label[for="input_menu_suivi"] 
, #input_menu_autre:checked ~ #maitre #menu ul li label[for="input_menu_autre"] 
, #menu .menu_a:hover
{
	background: var(--couleur2);
}


.btn_push, .form .submit button, .form .button button {background:var(--couleurActionSombre);border-radius: var(--borderRadius);border: none;padding: 0;cursor: pointer;outline-offset: 4px; display: inline-block; margin-top:10px}
.form .submit button, .form .button button{width: 100%}
.btn_push .btn_push_txt, form .submit span, form .button span {display: block;padding: 8px 40px;border-radius: var(--borderRadius);font-size: 1.25rem;background: var(--couleurAction) ;color: #fff;transform: translateY(-6px);}
.btn_push:hover .btn_push_txt
, .form .submit button:hover span
, .form:invalid .submit button span
{transform: translateY(-4px);}

.btn_push:active .btn_push_txt
, .btn_push.actif .btn_push_txt
, form button:active span 
, #_cours_fiche #form_q .q input:checked + label .txt
{transform: translateY(-2px)!important;}


.btn{background: var(--couleurAction);
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  margin-bottom: 50px; 
  position: relative; 
  overflow: hidden;
  width: 100%;
  left:0;
  top:0;
  color:#fff;
  padding: 20px}

.btn_full{width: 100%; text-align: center; display: block}

@media (max-width:768px)
{
  .btn:not(.masquer){display: inline-block; text-align: center }
}
#p-lu_et_accepter {margin-top: 20px;}
video{background: #000; border-radius: var(--borderRadius)}


#msg{padding:20px}

#_contact #contacter{display:none}
#contacter a{position: fixed; right: 0; top:50%; color: #fff;  background: var(--couleurAction); z-index: 2; padding:10px; padding-left: 20px; color:#fff; border-top-left-radius: var(--borderRadius); border-bottom-left-radius: var(--borderRadius);  transition: all .2s linear; transform: translateX(10px); font-size: 2em}
@media (max-width:768px) {
    #contacter a{font-size: 1em; padding-left:10px}
}
#contacter a span{width:0; overflow: hidden; display: inline-block; transition: all .2s linear }
#contacter a:hover{transform: translateX(0)}
/*-----------------------------------------------------------------*/
/*														                         #main_aside */
#main_aside{display: grid; grid-template-columns: 2fr 1fr;  grid-gap: 1rem; }
#main_aside aside{ position: sticky; top :20px ;  align-self: start; }

@media (max-width: 750px) 
{
  #main_aside{display: block;width: 98%;margin:auto}
} 


/*-----------------------------------------------------------------*/
/*														                             bandeau */

#bandeau{color: #fff; background: radial-gradient(circle, rgba(0, 124, 142, 1) 70%, #024954); background: radial-gradient(circle, rgba(0, 61, 69, 1) 70%, #00282e) }
#bandeau_sombre{ width: 100%; height: 100%;text-align: center;  min-height: calc(100vh - 71px ) ;  display: flex; align-items: center; justify-content: center;  position: relative}
#bandeau h1{font-size: 2.5em}
@media (max-width:768px)
{ 
  #bandeau h1, #bandeau_sombre{font-size: 1em}
}

.interieur #bandeau {font-size: 1.5em}
#bandeau strong {color: inherit;}



.bandeau_ecriture #bandeau_contenu{font-size: 2.5em; }
@media (max-width:768px)
{
  .bandeau_ecriture #bandeau_contenu{font-size: 1.5em}
}

.bandeau_ecriture .typewrite > .wrap{margin-left: 10px; border-color:yellow;  animation: blink 1s infinite;}
.bandeau_ecriture .data-type{display: none}
.bandeau_ecriture canvas{position: absolute; width: 100%; height: 100%; top:0; left:0}


/* Définir l'animation */
@keyframes blink {
  0% {
    border-right-color: transparent;
  }
  50% {
    border-right-color: yellow;
  }
  100% {
    border-right-color: transparent;
  }
}

/* Appliquer l'animation */
.bandeau_ecriture .typewrite > .wrap{
  border-right: 3px solid transparent;
  animation: blink 0.5s infinite;
}








/*-----------------------------------------------------------------*/
/*														                              	accueil */

#_accueil main{padding: 20px 0}
.liste_centree{text-align: center;display: flex; align-items: center}
.liste_centree h2{margin-bottom: 20px}
.liste_centree ul, .liste_centree li{margin: 0;padding: 0}
.liste_centree ul{display: grid; grid-template-columns: repeat(3, 1fr); gap:2rem; align-items: center; margin-bottom: 40px}

#_accueil section:nth-child(odd) .section_2colonnes .img{order:2}
@media (max-width: 1278px) 
{
  .liste_centree ul{grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) 
{
  .liste_centree ul{grid-template-columns: repeat(1, 1fr); }
}
.liste_centree ul li{padding: 10px; list-style: none; margin-bottom: 0; text-align: left;transition: all .2S linear}
.liste_centree ul li i{background: var(--couleur2);color: #fff;border-radius: 50%;width: 50px;height: 50px;line-height: 50px;text-align: center;  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) inset; margin-right: 10px}
.liste_centree ul li:hover{background: var(--couleur3); color: #fff}
.liste_centree ul li a{display:block; color:inherit}

.section_2colonnes{display: grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); align-items: center }

@media (max-width: 768px) 
{
  .section_2colonnes{grid-template-columns: 1fr;}
}

#developpeur .img{order: 2}

@media (max-width: 768px) 
{
  #developpeur .img{order: 1}
  #developpeur .txt{order: 2}
  
}

#tarteaucitronRoot button{border-radius:20px!important}

.imgCard .img .card{background: #fff; width:100%; max-width: 300px; height: 500px; border-radius: var(--borderRadius); box-shadow:
  rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
  rgba(19, 26, 32, 0.08) 0px 35px 75px -35px; margin-left: auto;transform: perspective(400px) rotateY(-10deg) rotateZ(10deg); transition:all 1s ease-in-out;background-size: cover; background-position: center;margin:auto;overflow: hidden
}


.imgCard .img .card:hover{transform: perspective(400px) rotate(0deg);}

@media (max-width: 768px) 
{
 .imgCard .img .card{height: 200px; margin-bottom: 30px; transform:none}
  
}

.imgCard:nth-child(even) .img .card{transform: perspective(400px) rotateY(10deg) rotateZ(-10deg); }

.txt_list_verticale{ display: flex; align-items: center}
.txt_list_verticale .conteneur{display: grid;grid-template-columns: 1fr 1fr; overflow: hidden; align-items: center; height: 99%; position:relative }

@media (max-width: 768px) 
{
  .txt_list_verticale .conteneur{display: block  }
  #solutions .conteneur{padding-bottom: 200px}
      

}
.txt_list_verticale .txt{}
.txt_list_verticale .ul{height: 60%; overflow: hidden; position: relative; padding:30px; max-height: 100vh;}
.txt_list_verticale .ul:before, .txt_list_verticale .ul:after{content: " ";width: 100%;height: 100px;display: block;position: absolute;top: 0; left:0;z-index: 1; background: linear-gradient(-180deg, #f9f5f7, rgba(249, 245, 247, 0));}
.txt_list_verticale .ul:after{background: linear-gradient(0deg, #f9f5f7, rgba(249, 245, 247, 0)); top: initial; bottom: 0}
.txt_list_verticale ul{ padding:0; animation: vers_haut 15s linear infinite; margin: 0; transform: translateY(50%);}
.txt_list_verticale ul li{text-align: center; background: #fff; border-radius: 50px; transition:all 0.5s ease-in-out;}
.txt_list_verticale ul li:hover{background: var(--couleur3); color: #fff}

.txt_list_verticale .ul h3{background: none;   -webkit-background-clip: initial; -webkit-text-fill-color: initial; color:initial}
@keyframes vers_haut {

    0%{
        transform: translateY(50%);
    }

    100%{
        transform: translateY(-100%);
    }

}

@keyframes vers_droite {

    0%{
        transform: translateX(50%);
    }

    100%{
        transform: translateX(-1250%);
    }

}

@media (max-width: 768px) 
{
  .txt_list_verticale .ul{height:200px; font-size: .7em}
  .txt_list_verticale .ul:before, .txt_list_verticale .ul:after{display: none}
  .txt_list_verticale ul{  animation: vers_droite 30s linear infinite;  transform: translate(50%, 0); display: flex;}
  .txt_list_verticale ul li{min-width: 100%; margin-right: 40px}

  #solutions .ul{position: absolute;bottom: 0;left: 0;width: 100vw;}
    

}


#rgpd_animation {position:relative; display: block; width: 400px; height:400px} 
#rgpd_animation svg{width: 100%; height: auto; }
#rgpd_animation #rgpd_cadena{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
#rgpd_animation #rgpd_cadena svg{ width:50%; height:auto}
#rgpd_animation #rgpd_etoiles svg{animation: rotating 5s linear infinite;}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}



.pile_cards_verticale {position:relative; height: 100vh; overflow: hidden; overflow-y: scroll;  margin:0;padding:0; width:100%; padding-top:120px}


.pile_cards_verticale ul{padding:0}
.pile_cards_verticale .description{display: none}
.pile_cards_verticale .card {
  position: sticky;
  top: 0;
  background: white;
  padding: 1.5rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  height: 400px;
  width: 100%;
  margin:0;
  margin-bottom: 50vh;
  list-style: none;
  border-radius: var(--borderRadius2x); 
  display: flex; align-items: center
}

.pile_cards_verticale .card:nth-child(1) {
  top: 10%;
}

.pile_cards_verticale .card:nth-child(2) {
  top: 15%;
}

.pile_cards_verticale .card:nth-child(3) {
  top: 20%;
}

.pile_cards_verticale .card:nth-child(4) {
  top: 25%;
}

.pile_cards_verticale .card:nth-child(5) {
  top: 30%;
}

.pile_cards_verticale .card:nth-child(6) {
  top: 35%;
}

.pile_cards_verticale .card:last-child{margin: 0; visibility: hidden;height: 100px}


.pile_cards_verticale .card.actif{background: red}

.pile_cards_verticale .card h3{font-size: 2.5em; margin:0}
.pile_cards_verticale .card .imgs{position: relative;display: flex;align-items: center; }
.pile_cards_verticale .card .imgs .img{display: block;background: #ccc;height: 300px;width: 200px;border-radius: var(--borderRadius); position:absolute; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);}

.pile_cards_verticale .card .imgs .img:nth-child(1){left:10%}
.pile_cards_verticale .card .imgs .img:nth-child(2){left: 50%;top: 50%;transform: translate(-50%,-50%); z-index: 2}
.pile_cards_verticale .card .imgs .img:nth-child(3){right: 10%;width: 150px;height: 250px;top: 20%;}

.pile_cards_verticale .card .imgs .btn{display: none}
.pile_cards_verticale li i{color: var(--couleur2)}

.pile_cards_verticale ul ul li{list-style: none; padding: 10px 0; background: #fff; border-radius: var(--borderRadius)}
.pile_cards_verticale .centre {display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap:1rem}

#accompagnement .desc{ text-align: center}
@media (max-width: 768px) 
{
  #accompagnement .pile_cards_verticale{padding-top:0}
  .pile_cards_verticale .card h3{font-size: 1em}
  #accompagnement .pile_cards_verticale .centre{display:block}
  .pile_cards_verticale .card .imgs{display: block}
  #accompagnement .pile_cards_verticale .card .txt .btn{display: none}
  .pile_cards_verticale .card:nth-child(3) .btn{font-size: .8em}
  
  .pile_cards_verticale .card .imgs .btn{display: inline-block}
}

h2, h3, #bandeau h1,  .blog__blog h1{color: var(--couleur2);  background: #6BB5AC;
  background: linear-gradient(to bottom left, #6BB5AC 38%, #007C8E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animationH2 2s  ease-in-out infinite alternate;
  background-size: 200% auto;
}

@keyframes animationH2 {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}



.auto_scroll{scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  height: 100vh; 
  overflow: hidden;
  overflow-y: scroll;}
  
.section_auto_scroll  {scroll-snap-align: start;scroll-snap-stop: always;min-height: 100vh;display: flex; align-items: center; padding-bottom: 68px}

@media (max-width: 768px) 
{
  .auto_scroll{ scroll-snap-type: none}
  .section_auto_scroll{padding: 40px 0; }
}

.section_centrer{}
.section_centrer section{display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; height: 100vh}
.section_centrer .img {order:2; display: flex; align-items: center; justify-content: center;}
.section_centrer .img .card{border-radius: var(--borderRadius); width: 400px; height: 600px; background: var(--couleur1);  position: sticky; top:10px}
.section_centrer .txt{display: flex; align-items: center; height: 100vh}
    
    
    
    
    .scrolling-words-container {
      display: inline-flex;
      align-items: center;
      font-size: 2rem;
      font-weight: 600;
      color:#fff;
    }
    
    .scrolling-words-box {
      height: 3rem;
      margin: auto;
      overflow: hidden;
    }
    .scrolling-words-box .ul {
      margin: 0 0.625rem;
      padding: 0;
      animation: scrollUp 4s infinite;
      display: inline-block
    }
    .scrolling-words-box .ul .li {
      display: flex;
      align-items: center;
      justify-content: start;
      height: 3rem;
      list-style: none;
    }
    
    @keyframes scrollUp {
      15%, 25% {
        transform: translateY(-20%);
      }
      40%, 50% {
        transform: translateY(-40%);
      }
      65%, 75% {
        transform: translateY(-60%);
      }
      90%, 100% {
        transform: translateY(-80%);
      }
    }
    
    
#estimation {position: relative}
#estimation h2{font-size: 2em;}
@media (max-width:768px)
{
  #estimation h2{font-size: 1.5em}
}
.bg_animation{position: absolute; top: 0; left: 0; width: 100%; height: 100%;z-index: 1}
.bg_animation svg{width: 100%; height: 100%}
#estimation .bg_animation:after{content:"";position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background: rgba(255, 255, 255, 0.8);}

  
#estimation .conteneur{position: relative; z-index: 2; max-width: 70%}
@media (max-width:768px)
{
  #estimation .conteneur{max-width:100%}
}
#estimation .card, #estimation .cards_vide:before, #estimation .cards_vide:after{position: relative; z-index: 3;  background: rgba(255, 255, 255, 0.8);
  border-radius: 50px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  overflow: hidden;
  width: 100%;
  left:0;
  top:0;
  padding: 30px; } 
  
#estimation .cards_vide:before, #estimation .cards_vide:after{content: " "; position: absolute;  height: 100%; padding:0;transition:all .5s linear;}

#estimation .cards_vide:before{transform: rotate(4deg)}
#estimation .cards_vide:after{transform: rotate(-4deg)}
   
#estimation .conteneur:hover .cards_vide:before{transform: rotate(-4deg)}
#estimation .conteneur:hover .cards_vide:after{transform: rotate(4deg)}

#p-lu_et_accepter {margin-top: 20px;}
  
#estimation:before, #estimation:after{content: " ";width: 100%;height: 200px;display: block;position: absolute;top: 0;z-index: 5; background: linear-gradient(-180deg, #f9f5f7, rgba(249, 245, 247, 0));}
#estimation:before{top: -10px}
#estimation:after{background: linear-gradient(0deg, #f9f5f7, rgba(249, 245, 247, 0)); top: initial; bottom: 0}
  

@media (max-width: 768px) 
{
  #estimation{padding:120px 0}
  #estimation:before, #estimation:after{}
  #estimation .cards_vide{display: none}
  #accompagnement .pile_cards_verticale .card{ position: static; height: auto; margin-bottom: 40px; padding:40px; font-size: .8em}
  #accompagnement .pile_cards_verticale{height: auto}
  
}
  
#site_performant{position:relative;/* Created with https://www.css-gradient.com */
    background: rgba(87, 223, 95, 1.0); color:#fff;
    background: -webkit-radial-gradient(top left, rgba(87, 223, 95, 1.0), rgba(6, 26, 153, 1.0));
    background: -moz-radial-gradient(top left, rgba(87, 223, 95, 1.0), rgba(6, 26, 153, 1.0));
    background: radial-gradient(to bottom right, rgba(87, 223, 95, 1.0), rgba(6, 26, 153, 1.0));}
    
#site_performant:before{content: " ";width: 100%;height: 50vh;display: block;position: absolute;top: 0;z-index: 5; background: linear-gradient(-180deg, #f9f5f7, rgba(249, 245, 247, 0)); z-index: 1}
#site_performant:before{background: linear-gradient(0deg, #edfff2, rgba(249, 245, 247, 0)); top: initial; bottom: 0}
      
#site_performant .effet{position: absolute; top:0; color:#fff; z-index: 1}
#site_performant .conteneur,   #site_performant .txt{z-index: 2; position:relative}
#site_performant h2{background: none;   -webkit-text-fill-color: initial; color:#fff}
#site_performant.liste_centree ul li i{background: #fff; color:var(--couleur2);}

#site_performant .btn
, .service main section:last-child .btn
, #contact .btn
{box-shadow: 0 0px 10px var(--couleurAction); border: 1px solid rgba(255, 255, 255, 0.3); transition:all .2s linear; animation: neon 2s ease-in-out infinite;}


@keyframes neon {
    50%{box-shadow: 0 0px 40px var(--couleurAction);}
}
@media (max-width: 768px) 
{

  
  #liste_accompagnement .img{order:1}

}


  .glowing {
    position: relative;
    width: 100%;
    height: 550px;
    margin: -150px;
    transform-origin: right;
    animation: colorChange 5s linear infinite;
  }
  
  .glowing:nth-child(even) {
    transform-origin: left;
  }
  
  @keyframes colorChange {
    0% {
      filter: hue-rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      filter: hue-rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  .glowing span {
    position: absolute;
    top: calc(80px * var(--i));
    left: calc(80px * var(--i));
    bottom: calc(80px * var(--i));
    right: calc(80px * var(--i));
  }
  
  .glowing span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -8px;
    width: 15px;
    height: 15px;
    background: #f00;
    border-radius: 50%;
  }
  
  .glowing span:nth-child(3n + 1)::before {
    background: rgba(134,255,0,1);
    box-shadow: 0 0 20px rgba(134,255,0,1),
      0 0 40px rgba(134,255,0,1),
      0 0 60px rgba(134,255,0,1),
      0 0 80px rgba(134,255,0,1),
      0 0 0 8px rgba(134,255,0,.1);
  }
  
  .glowing span:nth-child(3n + 2)::before {
    background: rgba(255,214,0,1);
    box-shadow: 0 0 20px rgba(255,214,0,1),
      0 0 40px rgba(255,214,0,1),
      0 0 60px rgba(255,214,0,1),
      0 0 80px rgba(255,214,0,1),
      0 0 0 8px rgba(255,214,0,.1);
  }
  
  .glowing span:nth-child(3n + 3)::before {
    background: rgba(0,226,255,1);
    box-shadow: 0 0 20px rgba(0,226,255,1),
      0 0 40px rgba(0,226,255,1),
      0 0 60px rgba(0,226,255,1),
      0 0 80px rgba(0,226,255,1),
      0 0 0 8px rgba(0,226,255,.1);
  }
  
  .glowing span:nth-child(3n + 1) {
    animation: animate 10s alternate infinite;
  }
  
  .glowing span:nth-child(3n + 2) {
    animation: animate-reverse 3s alternate infinite;
  }
  
  .glowing span:nth-child(3n + 3) {
    animation: animate 8s alternate infinite; 
  }
  
  @keyframes animate {
    0% {
      transform: rotate(180deg);
    }
    50% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes animate-reverse {
    0% {
      transform: rotate(360deg);
    }
    
    50% {
      transform: rotate(180deg);
    }
    
    100% {
      transform: rotate(0deg);
    }
  }
  
#maintenance .txt{order: 1}
#maintenance .img{order: 2}

#creer{position: relative; }
#creer .btn{width: 500px; display: inline-block; animation: shake 5s infinite; }

@media (max-width: 768px) 
{
  #creer .btn{width: 90%; padding:10px}
  .scrolling-words-container{font-size: 1em}
}



.bulls{width: 80%}
.bulls li {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 3px;
  color: var(--couleur3);
  background-color: #ece5ce;
  padding: 50px;
  border-radius: 11px;
  position: relative;
  box-shadow: 20px 20px #83af9b;
 margin-bottom: 50px;
 list-style: none
}

@media (max-width:768px)
{
  .bulls{padding:0; width:100%}
  .bulls li{padding:20px}
}

.bulls li:nth-child(1){animation: float 8s ease-in-out infinite;}
.bulls li:nth-child(2){margin-left: 50px;  animation: float 3s ease-in-out infinite;}
.bulls li:nth-child(3){animation: float 5s ease-in-out infinite;}

.bulls li:after {
  transform: translatey(0px);
         animation: float2 5s ease-in-out infinite;
  content: ".";
  font-weight: bold;
  -webkit-text-fill-color: #ece5ce;
  text-shadow: 22px 22px #83af9b;
  text-align: left;
  font-size: 55px;
  width: 55px;
  height: 11px;
  line-height: 30px;
  border-radius: 11px;
  background-color: #ece5ce;
  position: absolute;
  display: block;
  bottom: -30px;
  left: 0;
  box-shadow: 22px 22px #83af9b;
  z-index: -2;
}

@-webkit-keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}

@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}
@-webkit-keyframes float2 {
  0% {
    line-height: 30px;
    transform: translatey(0px);
  }
  55% {
    transform: translatey(-20px);
  }
  60% {
    line-height: 10px;
  }
  100% {
    line-height: 30px;
    transform: translatey(0px);
  }
}
@keyframes float2 {
  0% {
    line-height: 30px;
    transform: translatey(0px);
  }
  55% {
    transform: translatey(-20px);
  }
  60% {
    line-height: 10px;
  }
  100% {
    line-height: 30px;
    transform: translatey(0px);
  }
}


/*-----------------------------------------------------------------*/
/*														                              	cards */
.cards {display: flex; scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;overflow: hidden;overflow-x: scroll;gap: 1rem; padding: 2rem}
.cards .card{scroll-snap-align: start;scroll-snap-stop: always;align-items: center; min-width: 400px; background: #f1f1f1; border-radius: var(--borderRadius); padding: 1rem}
.cards .card .img{min-height: 200px;background: #ccc; border-radius: var(--borderRadius); overflow: hidden}


/*-----------------------------------------------------------------*/
/*														              template_paire_impaire */

.template_paire_impaire:not(:has(.animationjs)) section.alterner .c
{display: grid; grid-template-columns: 1fr 2fr; gap:3rem; align-items: center }

.template_paire_impaire section.alterner .col:nth-child(1){display: flex; justify-content: center; align-items: center}
.template_paire_impaire section.alterner .col:nth-child(1) .img{height: 500px; width: 300px;border-radius: 50px}
._developper .template_paire_impaire section.alterner .col:nth-child(1) .img{ background: #F7F7F7; }
.template_paire_impaire section.alterner:nth-child(odd) .c {grid-template-columns: 2fr 1fr; }
.template_paire_impaire section.alterner:nth-child(odd) .col:nth-child(1){order:2; z-index: 2}
.template_paire_impaire section.alterner:nth-child(odd) .col:nth-child(2){order:1}

.template_paire_impaire section.centrer{text-align: center}


/*-----------------------------------------------------------------*/
/*														                              	blog */

#maitre{position: relative;z-index: 2}
@media (min-width: 768px) {
    body:not(.no_scroll_automatique):not(#_admin_admin) #maitre{scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    height: 100vh; 
    overflow: hidden;
    overflow-y: scroll;}
}


.voir_plus{text-align: center}
.voir_plus a{width: 100%}
.liste_blog{padding: 50px 0;background: #F7F7F7;}

.articles{width: 100%;display: block; margin: auto;}

  
.bloc
, .liste_idees li
, .mewtwo-flights--l.mewtwo-hotels--l
{/* From https://css.glass */
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--borderRadius);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  margin-bottom: 50px; 
  position: relative; 
  overflow: hidden;
  width: 100%;
  left:0;
  top:0;
  padding-bottom: 20px: 
}

.bloc.actif
{
  position: fixed;
  top:0;
  left:0;
  width: 100vw; height: 100vh; background: var(--couleur_claire);
  
}
  
  

.articles .liste article h2{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 6;-webkit-box-orient: vertical; margin-bottom: 20px; cursor: pointer; font-size: 2em} 
.articles article iframe, .etirer img{width: 100%;display:block; border-radius: var(--borderRadius)}
.articles article .youtube_player{height:100%}

.articles:not(main) header {position: relative;}
.articles:not(main) article .img, .landing .articles .diapo{width: 100%;position: relative; top: 0; left: 0;  z-index: 2;  }

.articles:not(main) article .img a {display: block;}


.articles article,  .articles #intro{padding: 30px}

.articles:not(main) .lien {margin-top: 0;}
.articles.article .txt img {border-radius: var(--borderRadius); border: 1px solid #ccc;}
.articles article .img_principale, .articles .img img, .articles article img{width: 100%; display: block; border-radius: var(--borderRadius)}

.articles article .haut{display: grid;grid-template-columns: 400px auto;grid-gap: 1rem; margin-bottom: 30px}
@media (max-width: 900px) 
{
  .articles article .haut{display: block;}
} 


#meme_categorie{margin-bottom: 40px; margin-top: 40px; } 




/*-----------------------------------------------------------------*/
/*														                             article */
#_blog__blog #bandeau {margin-bottom: 60px}
#_article #entete{position:relative}
.blog__blog .conteneur{max-width: 100%}
#_article h1{padding: 120px 0; margin:0; text-align: center}
#_article #intro .img{margin:0}
#_article .articles ul li {list-style: disc;}
#_article main article h2:not(:first-child) {margin-top: 60px;}
#_article main article .img {margin: 0;}
#_article .addthis_inline_share_toolbox{margin-top:20px}
#info {font-size: .8em; font-style: italic; }

.tags a{padding: .3em 1em; padding-bottom: 0; margin-bottom: 15px; display: inline-block; color: var(--couleur2);  border-radius: 20px; border:1px solid }
.tags a:hover{background: var(--couleur2); color:var(--couleur_claire)}

body#_article, body#_article main article {counter-reset: numerotation; }
#_article main h2, #_article .h2 {counter-reset: numerotation2;}
#_article main h2:not(.h2_warning)::before, #_article main .h2:not(.h2_warning)::before {counter-increment: numerotation;content:counter(numerotation);} 

#_article main h3::before, #_article .h3::before {counter-increment: numerotation2;content: counter(numerotation) "." counter(numerotation2);} 

#_article main h2:not(.no_numerotation)::before
, #_article main h3:not(.no_numerotation)::before
, #_article .h2:not(.no_numerotation)::before
, #_article .h3:not(.no_numerotation)::before
{height: 50px;width: 50px;display: inline-block;border-radius: 50%;line-height: 50px; color: #fff; background: var(--couleurAction);  -webkit-background-clip: initial;-webkit-text-fill-color: initial; margin-right: 10px; text-align: center; font-size:.7em; top: -5px;position: relative;}


#table_des_matieres {margin-bottom: 20px;}
#table_des_matieres label {cursor: pointer; margin: auto;text-align: center  min-width: 150px; text-align: center; margin-bottom: 20px; display: block;padding: 10px;}
#table_des_matieres label::after {content: "Sommaire";}
#table_des_matieres input:checked ~ div {display: block; }
#table_des_matieres input:checked ~ label {background-image: var(--degrader);}
#table_des_matieres input:checked ~ label::after {content: "Fermer";}
#table_des_matieres input:checked ~ label .fa-bars:before {content: "\f00d";}
#table_des_matieres #ul_table_matiere { margin-bottom: 20px;  max-height: 0;margin: 0; padding: 0 }
#table_des_matieres input:not(:checked) ~ #ul_table_matiere{background: none; border: none}
#table_des_matieres input:checked ~ #ul_table_matiere {max-height: 290px; overflow: auto; display: block; }
#table_des_matieres ul li{list-style: none!important; margin-left: 0!important}
#table_des_matieres ul li a{display: block; padding: 10px 50px; border-radius: var(--borderRadius); color:var(--couleur2)}
#table_des_matieres ul li a:hover{background: #F1F1F1; background-image: var(--degrader); color:#fff}
#table_des_matieres ul li:last-child a{border-bottom: none}

.hljs{border-radius: var(--borderRadius); position:relative}
.copier{cursor: copy; position: absolute; right:0; top:0; padding:10px; background: #000;border-bottom-left-radius:var(--borderRadius)}
.copier:hover{font-weight: 900}

#_article article .txt table {width: 100%; border-spacing: 0px;border-collapse: separate;border: 1px solid #ccc;}
#_article article .txt table th, #_article article .txt table td {padding: 10px;}
#_article article .txt table th {background: #F7F7F7;}
#_article article .txt table td, #_article article .txt table th {border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;}


.warning{background-image: linear-gradient(135deg,#f34079,#f65b69 50%,#fc8b4c); padding:20px; border-radius: var(--borderRadius); color:#fff}

#infolettre_aside{background-image: linear-gradient(15deg,var(--couleur3),50%,var(--couleur4)); border:none; color:var(--couleur_claire); padding:20px}
#infolettre_aside form h2{color:var(--couleur_claire); -webkit-background-clip: initial; -webkit-text-fill-color: initial; background: none; font-size: 2em}
#infolettre_aside .form .bloc_input{background:#fff}
#infolettre_aside .form .submit button{background: var(--couleur1_sombre);}
#infolettre_aside .form .submit button span{background: var(--couleurAction);}


#voir_tous_les_articles{text-align: center; margin-bottom: 60px}

/*-----------------------------------------------------------------*/
/*													                               compte */
#_compte #le_conteneur {padding: 0; }
#_compte #main { width: 100%; display: grid;  grid-template-columns: 70% 30%; padding:0}
#_compte main{box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);}
#_compte aside {  align-self: start; position: sticky; top: 0;}
#_compte h1 {text-align: center;}
#_compte aside ul, #_compte aside li { margin: 0; padding: 0;list-style: none;}
#_compte aside a { display: block; padding: 10px; border-bottom: 1px solid #ccc; color: inherit;}
#_compte aside a:hover {color: var(--couleur_claire); background: var(--couleur1);}

#_compte #p-image .range, #_compte #p-image input, #_compte #p-image .btn {display: none;}
#_compte .form .apercu {cursor: pointer;}







/*-----------------------------------------------------------------*/
/*													                            aviasales  */
.mewtwo-flights--l.mewtwo-hotels--l{overflow: hidden}

.mewtwo-flights--l.mewtwo-hotels--l .mewtwo-widget .mewtwo-flights
, .mewtwo-flights--l.mewtwo-hotels--l .mewtwo-widget--fc0c6a345bb208fb3e7432fbab724c88 .mewtwo-tabs-tabs_list__item.mewtwo-tabs-tabs_list__item--active
, .mewtwo-flights--l.mewtwo-hotels--l .mewtwo-widget--fc0c6a345bb208fb3e7432fbab724c88 .mewtwo-tabs-tabs_list__item:last-child
, .mewtwo-flights--l.mewtwo-hotels--l .mewtwo-widget--fc0c6a345bb208fb3e7432fbab724c88 .mewtwo-hotels
{border: none!important}

.mewtwo-flights--l.mewtwo-hotels--l .mewtwo-widget .mewtwo-tabs-tabs_list__item
, .mewtwo-flights--l.mewtwo-hotels--l .mewtwo-widget--fc0c6a345bb208fb3e7432fbab724c88 .mewtwo-flights-container input[type="text"]
, .mewtwo-flights--l.mewtwo-hotels--l .mewtwo-widget--fc0c6a345bb208fb3e7432fbab724c88 .mewtwo-flights-trip_class
{box-shadow: none!important}

 .mewtwo-flights--l.mewtwo-hotels--l .mewtwo-widget--fc0c6a345bb208fb3e7432fbab724c88 .mewtwo-flights-container input[type="text"]
, .mewtwo-flights--l.mewtwo-hotels--l .mewtwo-widget--fc0c6a345bb208fb3e7432fbab724c88 .mewtwo-flights-trip_class{border-radius: var(--borderRadius)!important; border-color: #dddddd!important}

.mewtwo-flights--l.mewtwo-hotels--l .mewtwo-widget .mewtwo-flights-dates:before{background: none!important}

body .mewtwo-widget--fc0c6a345bb208fb3e7432fbab724c88 .mewtwo-flights-submit_button button{border-radius: var(--borderRadius)!important}


/*-----------------------------------------------------------------*/
/*													                            connexion  */

._identification main h1{text-align: center; margin-bottom: -10px}
@media only screen and (min-width : 650px)
{	
  ._identification main{ position: fixed; left: 50%;top:50%; transform: translate(-50%, -50%); width: 80%; max-width: 500px;}
}

  #_connexion._identification main{ position: fixed; left: 50%;top:50%; transform: translate(-50%, -50%); width: 80%; max-width: 500px;}

._identification main fieldset {padding: 20px 20px;}
._identification main form + p {text-align: center; font-size: .8em}


/*-----------------------------------------------------------------*/
/*													                          edition blog */

/*-----------------------------------------------------------------*/
/*													                          edition blog */
#_compte__blog_editer #entete{display: none}
#_compte__blog_editer main{padding-bottom: 50px}

#_compte__blog_editer main form{display: grid;grid-template-columns: 70% auto;grid-auto-flow: dense; min-height: 100vh; width:100%; padding:0}
#_compte__blog_editer main form textarea:not(.cdx-input){height: 80vh}
#_compte__blog_editer main form fieldset{padding:0; padding-bottom: 80px}
#_compte__blog_editer main form #fieldset_edition{grid-column: 1; background: rgba(255, 255, 255, 0.2); padding: 0px 20px;box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); }
#_compte__blog_editer main form #fieldset_options{grid-column: 2; position: sticky; top :0 ;  align-self: start; overflow: scroll; max-height: calc(100vh - 60px) }
#_compte__blog_editer main form #fieldset_edition .bloc_input{border-radius: 0;border:none}

#_compte__blog_editer main #fieldset_options .afficher_section {display: none;}

#_compte__blog_editer #le_conteneur{margin-bottom: 0}

.codex-editor{padding:20px}
.image-tool--empty .image-tool__link, .image-tool--loading .image-tool__link {
	display: none;
}

textarea.ce-code__textarea{border-color: #ccc; background:#d4D4D4!important; padding:10px!important}

#_compte__blog_editer main #fieldset_options .label{background: var(--couleur1); color:var(--couleur_claire); cursor: pointer;padding: 10px; display: block; border-bottom:1px dotted var(--couleur_claire)}
#_compte__blog_editer main #fieldset_options section .contenu{}
#_compte__blog_editer main #fieldset_options section .contenu{max-height: 0; overflow: hidden; transition:all .2s linear;}
#_compte__blog_editer main #fieldset_options section:has(.input:checked) .contenu{max-height: 9999px;padding:20px; overflow: visible;}

#_compte__blog_editer main #fieldset_options #div_visible .bloc_input{justify-content: center}

#_compte__blog_editer #section_enregistrer .contenu{text-align:center}
#_compte__blog_editer.nouvel_article #date_modification, 
#_compte__blog_editer.nouvel_article #date_publication
{
  display: none
}
/*-----------------------------------------------------------------*/
/*													                            infolettre */
#infolettre_bas{background: #311242; padding-top: 50px; padding-bottom: 100px;  margin-top: 50px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);   }
   
   
   
   
#tarteaucitronRoot #tarteaucitronAlertBig {background: rgba(51, 51, 51, .7)!important; padding: 15px 0!important;}

.ce-inline-toolbar--left-oriented.ce-inline-toolbar--showed
, .ce-conversion-toolbar--showed
, .ce-popover--opened
, .ce-inline-toolbar__toggler-and-button-wrapper{color:#000}

.ce-block--selected .ce-block__content{color:#74279c}

.form div .bloc_input:before, .form div .bloc_input:after
, .form .champ input, .form .champ textarea, #i_recherche, .input_seul
{/*color:var(--couleur_claire)*/}

.form textarea:focus
, .form input:focus
, .form .champ:not(.select) .bloc_input:has(input:focus)
, .form .champ:not(.select) .bloc_input:has(textarea:focus)
, .form div .bloc_input:has(input:focus):before
, .form .champ .bloc_input:has(textarea:focus):before
{color:#74279c!important}


details:not(:has(summary)){display:none}

details { transition: 50ms; padding: 0 1rem; border-radius: var(--borderRadius); overflow: hidden; position:relative; background: var(--couleur2); margin:10px 0;}
details[open] {padding-bottom: 1em;}  

details:before{ content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, .9 ); }

details p{position: relative}
summary { padding: 1rem 2em 1rem 0; font-weight: bold; cursor: pointer; position:relative}


@keyframes animate 
{
    0%		{transform: translateY(0) rotate(0deg);opacity: 1;border-radius: 0;}
    100%	{transform: translateY(-1000px) rotate(720deg);opacity: 0;border-radius: 50%;}
}


.anim_cube{position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden; display: none}

.anim_cube li{position: absolute;display: block;list-style: none;width: 20px;height: 20px;background: rgba(107, 181, 172, 0.21);animation: animate 25s linear infinite;bottom: -150px;}

.anim_cube li:nth-child(1){left: 25%;width: 80px;height: 80px;animation-delay: 0s;background-size: contain;}


.anim_cube li:nth-child(2){left: 10%;width: 20px;height: 20px;animation-delay: 2s;animation-duration: 12s;}

.anim_cube li:nth-child(3){left: 70%;width: 20px;height: 20px;animation-delay: 4s;}
.anim_cube li:nth-child(4){left: 40%;width: 60px;height: 60px;animation-delay: 0s;animation-duration: 18s;}
.anim_cube li:nth-child(5){left: 65%;width: 20px;height: 20px;animation-delay: 0s;}
.anim_cube li:nth-child(6){left: 75%;width: 110px;height: 110px;animation-delay: 3s;}
.anim_cube li:nth-child(7){left: 35%;width: 150px;height: 150px;animation-delay: 7s;}
.anim_cube li:nth-child(8){left: 50%;width: 25px;height: 25px;animation-delay: 15s;animation-duration: 45s;}
.anim_cube li:nth-child(9){left: 20%;width: 15px;height: 15px;animation-delay: 2s;animation-duration: 35s;}
.anim_cube li:nth-child(10){left: 85%;width: 150px;height: 150px;animation-delay: 0s;animation-duration: 11s;}



@media only screen and (max-width : 650px)
{	
	
	
}




.context {
    width: 100%;
    position: fixed;
    top:50vh;
    
}

.context h1{
    text-align: center;
    color: #fff;
    font-size: 50px;
}


.area{
    width: 100%;
    height:100vh;
    position:fixed;    
    z-index: 1;
   
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: .3
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    background: url(/images/logo_swift.png) no-repeat;
    background-size: contain;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}



.waves {
  position:absolute;
  width: 100%;
  height:100vh;
  max-height:40vh;
  opacity: .4;
  bottom: 0;
}


.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}

@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }

}


.particule {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -.5rem 0 0 -.5rem;
  border: 1px solid currentColor;
  transform: scale(0);
}

._developper {background: #34496a; color: var(--couleur_claire)}
._developper .anim_cube{display: block}
._developper #bandeau{background: none}

._developper h2, ._developper h3{background: linear-gradient(to bottom left, #bcf0ea 38%, #007C8E 100%);  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animationH2 2s  ease-in-out infinite alternate;
  background-size: 200% auto;}

.service .template_paire_impaire section.alterner .col:nth-child(1) .img
, .service_categories .template_paire_impaire section.alterner .col:nth-child(1) .img
{transform: perspective(400px) rotateY(-10deg) rotateZ(10deg); transition:all .3s ease-in;}

.service .template_paire_impaire section.alterner .col:nth-child(1) .img{background: none; text-align: center }
.service .template_paire_impaire section.alterner .col:nth-child(1) .img img{width: 100%}
.service .template_paire_impaire section.alterner:nth-child(even) .col:nth-child(1) .img
, .service_categories .template_paire_impaire section.alterner:nth-child(even) .col:nth-child(1) .img
{transform: perspective(400px) rotateY(10deg) rotateZ(-10deg)}

.service section .img:hover
, .service_categories section .img:hover{transform: perspective(400px) rotateY(0deg) rotateZ(0deg)!important; }

@media (max-width:768px)
{
  .service .template_paire_impaire section.alterner .col:nth-child(1) .img img{height: 200px; width:auto;}
  .service .template_paire_impaire section.alterner .col .img
  , .service_categories .template_paire_impaire section.alterner .col .img
  {
    transform: none!important; height: 200px
  }
  
  .template_paire_impaire section.alterner .col:nth-child(1){margin-bottom:60px}
}

.animationjs{ height: 100vh; width: 100%; overflow: hidden; overflow-y: scroll; scroll-snap-type: y mandatory;}
.animationjs .section{height: 100vh; scroll-snap-align: start; scroll-snap-stop: always;}
.animationjs .section_0{position:sticky; top:0; display: grid;justify-content: center;align-items: center; gap:3rem}
@media (max-width:768px)
{
  .animationjs, .animationjs .section{height: auto; overflow:visible }
  .animationjs .section_0{display: block}
  .animationjs .section_0 .btn{display: block}
}
section.alterner .animationjs  .section_0{grid-template-columns: 2fr 1fr;}
.animationjs .slide{scroll-snap-align: start;scroll-snap-stop: always;}

.animationjs .section .btn{z-index: 3}

section.alterner:nth-child(even) .animationjs .section_0{grid-template-columns: 1fr 2fr;}
section.centrer .animationjs .section_0 .col:first-child{display: none}
#_developper_9 #section_1 .section_0 #svg_video{transform: matrix(2.39292, 0, 0, 2.39292, 0, -63.8892);}
#_developper_9 #section_1 .section_0 #svg_securite{transform: matrix(2.53132,0,0,2.53132,-1413.77,750)}
#_developper_9 #section_1 .section_0 #svg_recherche{opacity: 0}
#_developper_9 #section_1 .resumer ul, #section_1 .resumer li{margin: 0; padding: 0; list-style: none}
#_developper_9 #section_1 .resumer ul{display: flex; justify-content: space-between; gap: 2rem; text-align: center; align-items: center }
#_developper_9 #section_1 .resumer li{background: var(--couleur_claire); color: initial; min-height: 180px; padding:20px}

#_developper_9 #section_1 .resumer li strong{display: block; font-size: 1.3em}



body{transition:all .2s linear;}
.service:before
, #_accueil:before
{content: " ";
  background: radial-gradient(circle, rgba(36, 36, 110, 1), rgba(0, 0, 0, 1));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all 1s linear;
  opacity: 0;}
.service.derniere_section_actif:before
, #_accueil.derniere_section_actif:before{ opacity: 1}

.service.derniere_section_actif #menu
, #_accueil.derniere_section_actif #menu
{transform: translateY(110%)}

#_accueil.derniere_section_actif {color:var(--couleur_claire)}

.service section svg, .service_categories section svg{width:100%;height: 100%}
#svg_section_5{background: red}
#svg_section_5 #svg_robot{transform: matrix(-5.60596,0,0,5.49202,1187.84,-2014.8); animation: robot_flotte 2s linear infinite;}

 /* Vos styles CSS ici */

@keyframes robot_flotte {
    0 {transform: matrix(-5.60596,0,0,5.49202,1187.84,-2014.8);}
    50%{ transform: matrix(-5.60596,0,0,5.49202,1187.84,-2024.8)}
}



#_developper_9 #fenetre{transform: matrix(-5.60596,0,0,5.49202,1187.84,-2014.8); animation: fenetre_flotte 3s linear infinite;}

@keyframes fenetre_flotte {
    0 {transform: matrix(-5.60596,0,0,5.49202,1187.84,-2024.8)}
    50%{ transform: matrix(-5.60596,0,0,5.49202,1187.84,-2014.8)}
}

@media (min-width:768px)
{
  #_developper_9 #section_16 svg{width: 200%; transform:translateX(-50px)}
  #_developper_9 #section_16:nth-child(even) .img{transform: perspective(1000px) rotateY(45deg) rotateZ(0deg);}
}







.particle {
  position: absolute;
  border-radius: 50%;
}

@-webkit-keyframes particle-animation-1 {
  100% {
    transform: translate3d(43vw, 81vh, 29px);
  }
}

@keyframes particle-animation-1 {
  100% {
    transform: translate3d(43vw, 81vh, 29px);
  }
}
.particle:nth-child(1) {
  -webkit-animation: particle-animation-1 60s infinite;
          animation: particle-animation-1 60s infinite;
  opacity: 0.65;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
  transform: translate3d(41vw, 61vh, 7px);
  background: #d9265f;
}

@-webkit-keyframes particle-animation-2 {
  100% {
    transform: translate3d(54vw, 46vh, 66px);
  }
}

@keyframes particle-animation-2 {
  100% {
    transform: translate3d(54vw, 46vh, 66px);
  }
}
.particle:nth-child(2) {
  -webkit-animation: particle-animation-2 60s infinite;
          animation: particle-animation-2 60s infinite;
  opacity: 0.76;
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
  transform: translate3d(18vw, 10vh, 35px);
  background: #26d991;
}

@-webkit-keyframes particle-animation-3 {
  100% {
    transform: translate3d(24vw, 57vh, 66px);
  }
}

@keyframes particle-animation-3 {
  100% {
    transform: translate3d(24vw, 57vh, 66px);
  }
}
.particle:nth-child(3) {
  -webkit-animation: particle-animation-3 60s infinite;
          animation: particle-animation-3 60s infinite;
  opacity: 0.57;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
  transform: translate3d(66vw, 7vh, 98px);
  background: #2c26d9;
}

@-webkit-keyframes particle-animation-4 {
  100% {
    transform: translate3d(83vw, 11vh, 29px);
  }
}

@keyframes particle-animation-4 {
  100% {
    transform: translate3d(83vw, 11vh, 29px);
  }
}
.particle:nth-child(4) {
  -webkit-animation: particle-animation-4 60s infinite;
          animation: particle-animation-4 60s infinite;
  opacity: 0.09;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
  transform: translate3d(83vw, 82vh, 34px);
  background: #26a9d9;
}

@-webkit-keyframes particle-animation-5 {
  100% {
    transform: translate3d(12vw, 29vh, 60px);
  }
}

@keyframes particle-animation-5 {
  100% {
    transform: translate3d(12vw, 29vh, 60px);
  }
}
.particle:nth-child(5) {
  -webkit-animation: particle-animation-5 60s infinite;
          animation: particle-animation-5 60s infinite;
  opacity: 0.5;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
  transform: translate3d(77vw, 12vh, 4px);
  background: #d9c726;
}

@-webkit-keyframes particle-animation-6 {
  100% {
    transform: translate3d(61vw, 20vh, 50px);
  }
}

@keyframes particle-animation-6 {
  100% {
    transform: translate3d(61vw, 20vh, 50px);
  }
}
.particle:nth-child(6) {
  -webkit-animation: particle-animation-6 60s infinite;
          animation: particle-animation-6 60s infinite;
  opacity: 0.5;
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
  transform: translate3d(36vw, 61vh, 1px);
  background: #7dd926;
}

@-webkit-keyframes particle-animation-7 {
  100% {
    transform: translate3d(36vw, 68vh, 83px);
  }
}

@keyframes particle-animation-7 {
  100% {
    transform: translate3d(36vw, 68vh, 83px);
  }
}
.particle:nth-child(7) {
  -webkit-animation: particle-animation-7 60s infinite;
          animation: particle-animation-7 60s infinite;
  opacity: 0.83;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -1.4s;
          animation-delay: -1.4s;
  transform: translate3d(41vw, 38vh, 8px);
  background: #d93b26;
}

@-webkit-keyframes particle-animation-8 {
  100% {
    transform: translate3d(40vw, 44vh, 16px);
  }
}

@keyframes particle-animation-8 {
  100% {
    transform: translate3d(40vw, 44vh, 16px);
  }
}
.particle:nth-child(8) {
  -webkit-animation: particle-animation-8 60s infinite;
          animation: particle-animation-8 60s infinite;
  opacity: 0.38;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -1.6s;
          animation-delay: -1.6s;
  transform: translate3d(39vw, 59vh, 64px);
  background: #26d977;
}

@-webkit-keyframes particle-animation-9 {
  100% {
    transform: translate3d(88vw, 57vh, 4px);
  }
}

@keyframes particle-animation-9 {
  100% {
    transform: translate3d(88vw, 57vh, 4px);
  }
}
.particle:nth-child(9) {
  -webkit-animation: particle-animation-9 60s infinite;
          animation: particle-animation-9 60s infinite;
  opacity: 0.25;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
  transform: translate3d(35vw, 81vh, 23px);
  background: #26d9a0;
}

@-webkit-keyframes particle-animation-10 {
  100% {
    transform: translate3d(81vw, 88vh, 80px);
  }
}

@keyframes particle-animation-10 {
  100% {
    transform: translate3d(81vw, 88vh, 80px);
  }
}
.particle:nth-child(10) {
  -webkit-animation: particle-animation-10 60s infinite;
          animation: particle-animation-10 60s infinite;
  opacity: 0.75;
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
  transform: translate3d(15vw, 45vh, 27px);
  background: #65d926;
}

@-webkit-keyframes particle-animation-11 {
  100% {
    transform: translate3d(72vw, 53vh, 26px);
  }
}

@keyframes particle-animation-11 {
  100% {
    transform: translate3d(72vw, 53vh, 26px);
  }
}
.particle:nth-child(11) {
  -webkit-animation: particle-animation-11 60s infinite;
          animation: particle-animation-11 60s infinite;
  opacity: 0.95;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -2.2s;
          animation-delay: -2.2s;
  transform: translate3d(41vw, 59vh, 73px);
  background: #7126d9;
}

@-webkit-keyframes particle-animation-12 {
  100% {
    transform: translate3d(40vw, 26vh, 24px);
  }
}

@keyframes particle-animation-12 {
  100% {
    transform: translate3d(40vw, 26vh, 24px);
  }
}
.particle:nth-child(12) {
  -webkit-animation: particle-animation-12 60s infinite;
          animation: particle-animation-12 60s infinite;
  opacity: 0.63;
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
  transform: translate3d(28vw, 33vh, 83px);
  background: #d926d3;
}

@-webkit-keyframes particle-animation-13 {
  100% {
    transform: translate3d(15vw, 15vh, 42px);
  }
}

@keyframes particle-animation-13 {
  100% {
    transform: translate3d(15vw, 15vh, 42px);
  }
}
.particle:nth-child(13) {
  -webkit-animation: particle-animation-13 60s infinite;
          animation: particle-animation-13 60s infinite;
  opacity: 0.87;
  height: 8px;
  width: 8px;
  -webkit-animation-delay: -2.6s;
          animation-delay: -2.6s;
  transform: translate3d(81vw, 21vh, 97px);
  background: #268bd9;
}

@-webkit-keyframes particle-animation-14 {
  100% {
    transform: translate3d(11vw, 54vh, 78px);
  }
}

@keyframes particle-animation-14 {
  100% {
    transform: translate3d(11vw, 54vh, 78px);
  }
}
.particle:nth-child(14) {
  -webkit-animation: particle-animation-14 60s infinite;
          animation: particle-animation-14 60s infinite;
  opacity: 0.92;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -2.8s;
          animation-delay: -2.8s;
  transform: translate3d(15vw, 34vh, 24px);
  background: #26d9c4;
}

@-webkit-keyframes particle-animation-15 {
  100% {
    transform: translate3d(75vw, 38vh, 38px);
  }
}

@keyframes particle-animation-15 {
  100% {
    transform: translate3d(75vw, 38vh, 38px);
  }
}
.particle:nth-child(15) {
  -webkit-animation: particle-animation-15 60s infinite;
          animation: particle-animation-15 60s infinite;
  opacity: 0.02;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
  transform: translate3d(38vw, 60vh, 80px);
  background: #a626d9;
}

@-webkit-keyframes particle-animation-16 {
  100% {
    transform: translate3d(71vw, 34vh, 95px);
  }
}

@keyframes particle-animation-16 {
  100% {
    transform: translate3d(71vw, 34vh, 95px);
  }
}
.particle:nth-child(16) {
  -webkit-animation: particle-animation-16 60s infinite;
          animation: particle-animation-16 60s infinite;
  opacity: 0.45;
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -3.2s;
          animation-delay: -3.2s;
  transform: translate3d(88vw, 86vh, 47px);
  background: #2671d9;
}

@-webkit-keyframes particle-animation-17 {
  100% {
    transform: translate3d(48vw, 75vh, 53px);
  }
}

@keyframes particle-animation-17 {
  100% {
    transform: translate3d(48vw, 75vh, 53px);
  }
}
.particle:nth-child(17) {
  -webkit-animation: particle-animation-17 60s infinite;
          animation: particle-animation-17 60s infinite;
  opacity: 0.58;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -3.4s;
          animation-delay: -3.4s;
  transform: translate3d(14vw, 49vh, 13px);
  background: #82d926;
}

@-webkit-keyframes particle-animation-18 {
  100% {
    transform: translate3d(48vw, 35vh, 12px);
  }
}

@keyframes particle-animation-18 {
  100% {
    transform: translate3d(48vw, 35vh, 12px);
  }
}
.particle:nth-child(18) {
  -webkit-animation: particle-animation-18 60s infinite;
          animation: particle-animation-18 60s infinite;
  opacity: 0.56;
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -3.6s;
          animation-delay: -3.6s;
  transform: translate3d(17vw, 47vh, 58px);
  background: #26d9d0;
}

@-webkit-keyframes particle-animation-19 {
  100% {
    transform: translate3d(80vw, 62vh, 35px);
  }
}

@keyframes particle-animation-19 {
  100% {
    transform: translate3d(80vw, 62vh, 35px);
  }
}
.particle:nth-child(19) {
  -webkit-animation: particle-animation-19 60s infinite;
          animation: particle-animation-19 60s infinite;
  opacity: 1;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -3.8s;
          animation-delay: -3.8s;
  transform: translate3d(22vw, 11vh, 38px);
  background: #d9a026;
}

@-webkit-keyframes particle-animation-20 {
  100% {
    transform: translate3d(13vw, 79vh, 34px);
  }
}

@keyframes particle-animation-20 {
  100% {
    transform: translate3d(13vw, 79vh, 34px);
  }
}
.particle:nth-child(20) {
  -webkit-animation: particle-animation-20 60s infinite;
          animation: particle-animation-20 60s infinite;
  opacity: 0.33;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
  transform: translate3d(7vw, 50vh, 2px);
  background: #8ed926;
}

@-webkit-keyframes particle-animation-21 {
  100% {
    transform: translate3d(13vw, 44vh, 11px);
  }
}

@keyframes particle-animation-21 {
  100% {
    transform: translate3d(13vw, 44vh, 11px);
  }
}
.particle:nth-child(21) {
  -webkit-animation: particle-animation-21 60s infinite;
          animation: particle-animation-21 60s infinite;
  opacity: 0.8;
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -4.2s;
          animation-delay: -4.2s;
  transform: translate3d(74vw, 67vh, 76px);
  background: #26d6d9;
}

@-webkit-keyframes particle-animation-22 {
  100% {
    transform: translate3d(12vw, 79vh, 13px);
  }
}

@keyframes particle-animation-22 {
  100% {
    transform: translate3d(12vw, 79vh, 13px);
  }
}
.particle:nth-child(22) {
  -webkit-animation: particle-animation-22 60s infinite;
          animation: particle-animation-22 60s infinite;
  opacity: 0.17;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -4.4s;
          animation-delay: -4.4s;
  transform: translate3d(41vw, 59vh, 38px);
  background: #a3d926;
}

@-webkit-keyframes particle-animation-23 {
  100% {
    transform: translate3d(66vw, 86vh, 59px);
  }
}

@keyframes particle-animation-23 {
  100% {
    transform: translate3d(66vw, 86vh, 59px);
  }
}
.particle:nth-child(23) {
  -webkit-animation: particle-animation-23 60s infinite;
          animation: particle-animation-23 60s infinite;
  opacity: 0.69;
  height: 9px;
  width: 9px;
  -webkit-animation-delay: -4.6s;
          animation-delay: -4.6s;
  transform: translate3d(82vw, 59vh, 21px);
  background: #4426d9;
}

@-webkit-keyframes particle-animation-24 {
  100% {
    transform: translate3d(20vw, 78vh, 98px);
  }
}

@keyframes particle-animation-24 {
  100% {
    transform: translate3d(20vw, 78vh, 98px);
  }
}
.particle:nth-child(24) {
  -webkit-animation: particle-animation-24 60s infinite;
          animation: particle-animation-24 60s infinite;
  opacity: 0.6;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -4.8s;
          animation-delay: -4.8s;
  transform: translate3d(86vw, 33vh, 34px);
  background: #d9ca26;
}

@-webkit-keyframes particle-animation-25 {
  100% {
    transform: translate3d(68vw, 29vh, 67px);
  }
}

@keyframes particle-animation-25 {
  100% {
    transform: translate3d(68vw, 29vh, 67px);
  }
}
.particle:nth-child(25) {
  -webkit-animation: particle-animation-25 60s infinite;
          animation: particle-animation-25 60s infinite;
  opacity: 0.36;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -5s;
          animation-delay: -5s;
  transform: translate3d(88vw, 52vh, 60px);
  background: #26d959;
}

@-webkit-keyframes particle-animation-26 {
  100% {
    transform: translate3d(20vw, 5vh, 63px);
  }
}

@keyframes particle-animation-26 {
  100% {
    transform: translate3d(20vw, 5vh, 63px);
  }
}
.particle:nth-child(26) {
  -webkit-animation: particle-animation-26 60s infinite;
          animation: particle-animation-26 60s infinite;
  opacity: 0.56;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -5.2s;
          animation-delay: -5.2s;
  transform: translate3d(57vw, 16vh, 45px);
  background: #26d99d;
}

@-webkit-keyframes particle-animation-27 {
  100% {
    transform: translate3d(72vw, 56vh, 51px);
  }
}

@keyframes particle-animation-27 {
  100% {
    transform: translate3d(72vw, 56vh, 51px);
  }
}
.particle:nth-child(27) {
  -webkit-animation: particle-animation-27 60s infinite;
          animation: particle-animation-27 60s infinite;
  opacity: 0.24;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -5.4s;
          animation-delay: -5.4s;
  transform: translate3d(43vw, 12vh, 33px);
  background: #8ed926;
}

@-webkit-keyframes particle-animation-28 {
  100% {
    transform: translate3d(80vw, 50vh, 40px);
  }
}

@keyframes particle-animation-28 {
  100% {
    transform: translate3d(80vw, 50vh, 40px);
  }
}
.particle:nth-child(28) {
  -webkit-animation: particle-animation-28 60s infinite;
          animation: particle-animation-28 60s infinite;
  opacity: 0.66;
  height: 10px;
  width: 10px;
  -webkit-animation-delay: -5.6s;
          animation-delay: -5.6s;
  transform: translate3d(9vw, 47vh, 44px);
  background: #267dd9;
}

@-webkit-keyframes particle-animation-29 {
  100% {
    transform: translate3d(24vw, 38vh, 15px);
  }
}

@keyframes particle-animation-29 {
  100% {
    transform: translate3d(24vw, 38vh, 15px);
  }
}
.particle:nth-child(29) {
  -webkit-animation: particle-animation-29 60s infinite;
          animation: particle-animation-29 60s infinite;
  opacity: 0.84;
  height: 6px;
  width: 6px;
  -webkit-animation-delay: -5.8s;
          animation-delay: -5.8s;
  transform: translate3d(38vw, 34vh, 50px);
  background: #26d9ac;
}

@-webkit-keyframes particle-animation-30 {
  100% {
    transform: translate3d(20vw, 13vh, 52px);
  }
}

@keyframes particle-animation-30 {
  100% {
    transform: translate3d(20vw, 13vh, 52px);
  }
}

#particle-container{position: fixed; top:0; left: 0; width: 100%; height: :100%}
.particle:nth-child(30) {
  -webkit-animation: particle-animation-30 60s infinite;
          animation: particle-animation-30 60s infinite;
  opacity: 0.4;
  height: 7px;
  width: 7px;
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
  transform: translate3d(82vw, 8vh, 66px);
  background: #26a0d9;
}









._design:not(.derniere_section_actif) #particle-container
, ._accompagner:not(.derniere_section_actif) #particle-container

{display:none}

@media (max-width:768px)
{
  #particle-container{display: none}
}
._design main section{position:relative;}
._design main section:nth-child(odd){background: var(--couleur_claire)}
._design main section:nth-child(even):not(:last-child):before
{
  content: " ";position: absolute;left: 0;width: 100%;z-index: 2;height: 200px; background-size: cover;
}
._design main section:nth-child(odd):not(:first-child):before{top: 0;background-image: url(/images/curve-top.svg); }
._design main section:nth-child(even):before{top: 0;background-image: url(/images/curve-bottom.svg);}

@media (max-width:768px)
{
  ._design main section:nth-child(even):not(:last-child):before{height: 60px}
}

body:not(._developper).service main section:last-child{color: var(--couleur_claire)}




._accompagner main section{position:relative; overflow: hidden}
._accompagner main section:not(:last-child):nth-child(odd){background: #FFF}
._accompagner main section:not(:last-child):nth-child(even){background: var(--couleur_claire)}

._accompagner main section:not(:last-child):nth-child(odd):before{content:" "; position: absolute; background: var(--couleur_claire); width: 200%; height: 300%; top: 0; left: 50%; transform: rotate(45deg)}
._accompagner main section:not(:last-child):nth-child(even):before{content:" "; position: absolute; background: #FFF; width: 200%; height: 300%; top: 0; right: 50%; transform: rotate(45deg)}


#contact{text-align:center; }

#_estimation .zone h2{font-size: 2.7em}
#_estimation .zone{width: 80%;margin: auto;}
#_estimation .zone h2
, #_estimation .zone label
{text-align: center}

#_estimation .zone #div_creer_logo .bloc_input{justify-content: center}
#_estimation fieldset:first-child .grid{display: grid;grid-template-columns: 1fr 1fr;gap: 1rem;}
#_estimation fieldset:not(:last-child) .zone{background: url(/images/down-long-solid.svg) no-repeat; background-position: bottom center; background-size: 50px; padding-bottom: 50px}

@media (max-width:768px)
{
  #_estimation fieldset:first-child .grid{display:block}
  .form .champ textarea{height: 300px}
}


#_PLAN_DU_SITE #bandeau_sombre{min-height: 300px}
.plan_du_site li{list-style: none}


.grid2{display: grid;gap: 1em;grid-template-columns: 1fr 1fr;}
#contacter a span{width:0; overflow: hidden; display: inline-block; transition: all .2s linear }
#contacter a:hover{transform: translateX(0)}
#_contact .nopuce{padding-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap:1em}
.nopuce li{list-style: none}

#_contact .nopuce li{ }
#_contact .nopuce a{display: block; padding: 10px; border-radius: var(--borderRadius); border: 1px solid var(--couleur1); text-align: center}
#_contact .nopuce a:hover{background: var(--couleurAction); color: #fff}
#_contact .nopuce a i{color:var(--couleur2)}
#_contact .nopuce a:hover i{color:#fff}

.affiliation:after, .aff:after {font-family: "Font Awesome 5 Free";font-weight: 900;-webkit-font-smoothing: antialiased;display: inline-block;font-style: normal;font-variant: normal;text-rendering: auto;line-height: 1;content: "\f651"; margin-left: 5px; font-size: .8em;
}



blockquote{background:var(--couleur3);padding: 5px 20px;font-size: .8em; font-style: italic; position: relative; border-radius:var(--borderRadius); display: grid; grid-template-columns: 50px 1fr; gap: 1em; align-items: center; color:#fff; margin:20px 0}
blockquote:before{content: "\f05a";font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 3em;color: rgba(255, 255, 255, 1); font-style: normal;}


._faq .imgCard .img .card img{object-fit: cover; width: 100%; height: 100%}