/*
CSS by Manu LECHAT
https://e-lechat.com
*/


/*

  /^^
  /^^                                                                                                       /^^
/^/^ /^     /^^   /^^     /^ /^^          /^^            /^^        /^ /^^^        /^^         /^ /^^       /^^          /^^   /^^
  /^^        /^^ /^^      /^  /^^       /^^  /^^       /^^  /^^      /^^         /^^  /^^      /^  /^^      /^ /^         /^^ /^^
  /^^          /^^^       /^   /^^     /^^    /^^     /^^   /^^      /^^        /^^   /^^      /^   /^^     /^^  /^^        /^^^
  /^^           /^^       /^^ /^^       /^^  /^^       /^^  /^^      /^^        /^^   /^^      /^^ /^^      /^   /^^         /^^
   /^^         /^^        /^^             /^^              /^^      /^^^          /^^ /^^^     /^^          /^^  /^^        /^^
             /^^          /^^                           /^^                                    /^^                        /^^

 */


 @font-face {
  font-family: "Lato";
  src: url("/javax.faces.resource/custom-front-espritvillage/fonts/Lato/Lato-Bold.ttf.xhtml") format('truetype')
} 


 @font-face {
  font-family: "Rockwell";
  src: url("/javax.faces.resource/custom-front-espritvillage/fonts/Rockwell/Rockwell.ttf.xhtml") format('truetype')
}
 @font-face {
  font-family: "Rockwell_Bold";
  src: url("/javax.faces.resource/custom-front-espritvillage/fonts/Rockwell/Rockwell_Bold.ttf.xhtml") format('truetype')
}




 @font-face {
  font-family: "Oswald-Medium";
  src: url("/javax.faces.resource/custom-front-espritvillage/fonts/Oswald/Oswald-Medium.ttf.xhtml") format('truetype')
}


 @font-face {
  font-family: "font_4";
  src: url("/javax.faces.resource/custom-front-espritvillage/fonts/Oswald/Oswald-Regular.ttf.xhtml") format('truetype')
}








/*

/^^     /^^        /^^         /^ /^^^      /^^^^
 /^^   /^^       /^^  /^^       /^^        /^^
  /^^ /^^       /^^   /^^       /^^          /^^^
   /^/^^        /^^   /^^       /^^            /^^
    /^^           /^^ /^^^     /^^^        /^^

*/

:root {
  --Lato : "Lato";
  --Rockwell : "Rockwell";
  --Rockwell_Bold : "Rockwell_Bold";
  --Oswald-Medium : "Oswald-Medium";
  --font_4 : "font_4";
  --container : 1400px;
  --grid_unit: calc(100vw / 24);
  --grid_unit_v: 80px;
  --w_wrapper: calc( var(--grid_unit) * 16 );
  --mozaic_unit: calc( var(--grid_unit) * 3 );
  --fontSize_unit: 1px;
  --color_txt2 :  #5f666c;
  --color_txt3 :  #9ED51E;
  --color_txt :  #333536;
  --vert : #9ED51E;
  --vert2 : #9ED51E;
  --bleu : #1ba9e8;
  --color_bg: white; 
  --color-br-grey : #f6f9fc;
  --gradient_1 :  linear-gradient( 45deg, #ffff65 0, #feff65 10%, #ace66b 70%, #90d86c 80%,  #5cbd6f 100%);
  --gradient_2 :  linear-gradient( 45deg, #ffff65 0, #feff65 10%, #e4fa67 20%, #c8f169 30%, #ace66b 40%, #90d86c 50%, #75ca6d 60%, #5cbd6f 70%, #44b271 80%, #29a873 90%, #00a177 100%);
  --gradient_3 : linear-gradient(280deg, #b9b9b9 0%,  #ffffff 100%);
  --swiper-theme-color: #9ED51E;
}



/*

  /^^                                    /^^
/^                                       /^^
/^/^ /^        /^^         /^^ /^^       /^/^ /^      /^^^^
/^^        /^^  /^^       /^^  /^^       /^^       /^^
/^^       /^^    /^^      /^^  /^^       /^^         /^^^
/^^        /^^  /^^       /^^  /^^       /^^           /^^
/^^          /^^         /^^^  /^^        /^^      /^^ /^^

                                                           */



/* titles */

.txt_s { font-size: calc( var(--fontSize_unit) * 12); }
.txt_m { font-size: calc( var(--fontSize_unit) * 16); }
.txt_18 { font-size: calc( var(--fontSize_unit) * 18); }
.txt_20 { font-size: calc( var(--fontSize_unit) * 20); }
.txt_24 { font-size: calc( var(--fontSize_unit) * 24); }
.txt_l { font-size: calc( var(--fontSize_unit) * 28); }
.txt_36 { font-size: calc( var(--fontSize_unit) * 36); }
.txt_xl { font-size: calc( var(--fontSize_unit) * 46); }
.txt_xxl { font-size: calc( var(--fontSize_unit) * 65); }
.txt_xxxl{ font-size: calc( var(--fontSize_unit) * 92); }

.font1{ font-family: var(--Lato); }
.rockwell{ font-family: var(--Rockwell); }
.Rockwell_Bold{ font-family: var(--Rockwell_Bold); }
.Oswald-Medium{ font-family: var(--Oswald-Medium); }
.Oswald{ font-family: var(--font_4); }

.txt_vert{ color: var(--vert) ; }
.center{ text-align: center; }
strong{  font-family: var(--Lato);  }
.maj{ text-transform: uppercase;   }
.italic{ font-style:italic }

/*

 /^^                                                                /^^
 /^^                                                                /^^
 /^^        /^^         /^^   /^^        /^^         /^^  /^^     /^/^ /^
 /^^      /^^  /^^       /^^ /^^       /^^  /^^      /^^  /^^       /^^
 /^^     /^^   /^^         /^^^       /^^    /^^     /^^  /^^       /^^
 /^^     /^^   /^^          /^^        /^^  /^^      /^^  /^^       /^^
/^^^       /^^ /^^^        /^^           /^^           /^^/^^        /^^
                         /^^
*/


::selection {  background-color: rgba(0,0,0,0.2);  text-shadow: none; }
* {  box-sizing: border-box; outline: none;   }

/* *{ border:1px dotted cyan } */

.bold{ font-weight: bold; }

html{  top:0; left: 0; margin: 0; padding: 0; width:100%;-webkit-font-smoothing: antialiased;   box-sizing: border-box;  position: relative;  text-rendering: optimizeLegibility;  }
body{ font-size: calc( var(--fontSize_unit) * 16); line-height: 1.35em; overflow-x: hidden;  background-color: var(--color_bg);  font-family: var(--Lato); width: 100vw; overflow-x: hidden; color: var(--color_txt); margin: 0; padding: 0; top:0; left: 0; }
/* background-image: url("../images/bg.png"); background-attachment: fixed; background-size: cover; background-position: right; background-repeat: no-repeat; display: fixed;  */
.bg{  z-index: -1; width:100vw; height: 100vh;  position: fixed; top:0; left: 0;   }
.bg img{  width:100%; height: 100%;  object-fit: cover; opacity: 0.5;  }
.bg svg{ width:auto; height: 100vh; min-width: 100vw}
.bg svg path{ fill: var(--color_txt);  opacity: 0.03;}

.underline{ text-decoration: underline; }

.page_fadeIn{ opacity: 0;  animation: anim_page_fadeIn 1s cubic-bezier(0.17, 0.9, 0.46, 1) .2s  1 normal forwards}

body.shownav{ overflow: hidden; }
body.loading{ overflow: hidden;  }
body.slider_on{ overflow: hidden; }

div, 
figure{  position: relative; display: block;  }
header, 
section, 
main{  margin: 0; padding: 0; width: 100%; max-width: 100vw; display: block; position: relative;  overflow-x: hidden;  z-index: 2}

img{ max-width: 100%; height: auto; display: block; }
ul{ margin: 0; display: block; text-align: left; padding: 0;}
li{ font-weight: 600; margin: 0em 0;  list-style: none; min-height:1.6em; padding-left: 0px; background-repeat:  no-repeat; background-size: 16px; background-position: 0 3px; padding-bottom: 0px; }
ul.icon_check li{  font-size: calc( var(--fontSize_unit) * 18); background-position: 0 5px; margin-bottom: 10px; background-image: url('/javax.faces.resource/custom-front-espritvillage/images/icon_check.png.xhtml'); background-size: 16px auto; padding: 0px 24px; }

a{ display: inline-block; color: var(--color_txt) !important;  text-align: left; text-decoration: none;  }
a:hover{ cursor: pointer;  opacity: 1;text-decoration: none }
a.ensavoirplus{ color: var(--vert); text-decoration: underline; margin: 1em 0; }

h1,h2,h3,h4{   display: block; width: auto; clear: both; break-after: always;  margin:  0 ; line-height: 1.15em;  font-weight: 400 } 


p{ font-size: calc( var(--fontSize_unit) * 16);  clear: both; display: block; padding: 0; margin: 0; font-weight: lighter; position: relative;  line-height: 1.35em;   }


.container{ display: block; height: fit-content; }





/* elements */

/* buttons */

.bt_vert{  margin: 10px;  font-family: var(--Rockwell); box-shadow: 0px 0px 10px 0px rgba(158,213,30,0.75); 
   display: block; font-size: calc( var(--fontSize_unit) * 14);  background: var(--vert); border: none;  
   border-radius: 3px;  padding:0.8em 1.6em ; text-transform: uppercase; color: white; }

/* burger */
.burger{ display: none; }

a.over_underline{  width: fit-content;}
a.over_underline:after{ content:""; position: absolute; bottom:0; left: 0; transition: all .1s cubic-bezier(.17,.67,.68,1.01); width:0%; height: 2px; background: var(--color_txt); }
a.over_underline:hover:after{ width:100%;  }
 
.pad_blc{ background: white; border-radius: 5px; }
.banner_video {  padding: var(--grid_unit);  }
.banner_video .pad_blc{ display: flex; justify-content: center; width: 72%; padding: calc( var(--grid_unit) * 2); text-align: center;  }
.banner_video video{ z-index: -1; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }

.titre_line{ width:100%; height: auto; margin: var(--grid_unit)  0;; display: flex ; justify-content: center;    align-items: center;}
.titre_line:after{ width:100%; content: ""; background: var(--gradient_1); z-index: 1; height: 4px; display: block; position: absolute; top: 50%; transform: translateY(-50%); }
.titre_line .titre{  font-family: var(--Rockwell_Bold); letter-spacing: 0.05em; z-index: 2; padding: 0 1em; background: white;  text-transform: uppercase;  font-size: calc( var(--fontSize_unit) * 28); text-align: center; margin-top: -5px;   }

.banner_titre{ z-index: 2; text-align: center;  overflow: hidden; background: var(--gradient_2); height: 280px; display: flex; align-items: center; }
.banner_titre .titre{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 11;   animation: anim_banner_titre 1.5s cubic-bezier(.17,.67,.66,1.06) .5s  1 normal forwards; opacity: 0;   text-align: center;  margin: auto; text-transform: uppercase; color: #fff; text-shadow: 0px 0px 8px #617342; }
.banner_titre img{     opacity: 0.3;  filter: grayscale(100%) contrast(1.5);  mix-blend-mode: multiply; position: absolute; top:50%;  transform: translateY(-50%) ; left: 0; width:100%; height: 100%; object-fit: cover; }

.gradient_bg{  text-align: center; color: rgba(0,0,0,0.8); padding: var(--grid_unit_v)  0;  background: var(--gradient_1);   display: flex; justify-content: center; align-items: center;  align-content: center;  flex-direction: column; }
.gradient_bg .titre{ font-family: var(--Oswald-Medium); }
.gradient_bg .bt_white{ box-shadow: 0px 4px 4px rgba(43, 112, 112, 0.25); background: white; padding: 0.5em 1em; border-radius: 3px; color: var(--vert2);  }
.gradient_bg .intro{ max-width: 800px; padding: calc( var(--grid_unit_v)  * 0.5 ) var(--grid_unit)   ; }

/* main layout */
.container{ width: 100%;  max-width: var(--container ); margin: auto; }
.main_wrapper{ padding-top: 95px;  min-height: 100vh ; margin:0 auto; position: relative; display: block; width: 100%;   }
.fit_container{ padding:  calc( var(--grid_unit) * 1) ; width: 100%; max-width: var(--w_wrapper); margin: 0 auto; }

/* screen_loader */
.loading .screen_loader{  display: flex; animation: screen_loader .5s cubic-bezier(.17,.67,.66,1.06) 2.5s  1 normal forwards; z-index: 100; width: 100%; height: 100vh; top:0; left: 0; position: fixed;  background: black;  flex-direction: column; text-align: center; justify-content: center; }
.loading .screen_loader .loading_content{  text-transform: uppercase; line-height: 1.26em; animation: screen_loader_content 3s cubic-bezier(.58,.28,.6,.96) 0s  1 normal forwards; color: white;  }

/* maintenance_wrapper */
.maintenance_wrapper {  display: flex; z-index: 100; width: 100%; height: 100vh; top:0; left: 0; position: fixed;  background: black;  flex-direction: column; text-align: center; justify-content: center; }
.maintenance_wrapper .maintenance_content{ opacity: 0; text-transform: uppercase; line-height: 1.26em; animation: fadeIn 3s cubic-bezier(.58,.28,.6,.96) 0s  1 normal forwards; color: white;  }


/* navbar */

.navbar{box-shadow: 0 0 10px rgb(0 0 0 / 10%);  z-index: 90; top: 0; background: white;  position: fixed;  width: 100%; overflow: hidden; border-bottom: 4px solid #D9D9D9; height:auto; width: 100%; }
.navbar .container{ display: flex;  justify-content: space-between; align-items: center;  height:95px }
.navbar .container:before,
.navbar .container:after{ display: none; }
.navbar .logo{ width: 145px;  }
.navbar .container .navbar-brand{ height: auto; margin:0;  }
.navbar .main_nav{ height: auto;   }
.navbar .main_nav a{ font-family: var(--font_4); font-size: calc( var(--fontSize_unit) * 16); text-transform: uppercase; margin: 0 10px; text-decoration: none; }
.navbar .main_nav a:hover{ color: var(--color_1); }
.navbar .main_nav a.active{ color: var(--vert) !important;}
.navbar .main_nav .bouton{ color: #fff; width: fit-content; background: var(--vert); border-radius: 40px; padding:5px 20px }
.navbar .main_nav .bouton:hover{ color: #000; }
.navbar .main_nav .bouton.active{  color:#fff; }
.navbar .main_nav .icon_home{ width: 18px; height: auto; }



/* page_intro */

.page_intro{ display: flex;  padding: var(--grid_unit_v)  20px; margin: auto; justify-content: center; align-items: center; }
.page_intro p{  font-size: calc( var(--fontSize_unit) * 24);  margin-left: 80px; font-family: var(--Rockwell);   font-weight: normal ;  max-width: 730px;   }

.page_intro img{ width: 33%; margin: 0 calc( var(--grid_unit) * 0.5)  }
.logiciel_template .page_intro p{ transform: translateY(-70px); }

.village_content{ display: flex;  padding: 0  20px; margin: auto; justify-content: center; align-items: center; }
.village_content img{ width: 33%; margin: 0 calc( var(--grid_unit) * 0.5)  }


/* paragraphes */

.paragraphe_wrapper{ display: flex; margin: calc(var(--grid_unit)) 0 ; }
.paragraphe_wrapper .col_txt{  width: 50%;  display: flex;  justify-content: flex-start;  align-items: center;    }
.paragraphe_wrapper.left .col_txt{ justify-content: flex-end;  }
.paragraphe_wrapper .paragraphe{ width: calc(var(--grid_unit) * 7); margin: 0 var(--grid_unit) ;  }
.paragraphe_wrapper.left  .paragraphe{ padding-left: 100px; }
.paragraphe_wrapper .paragraphe .titre{ font-family: var(--Rockwell_Bold); text-transform: uppercase;  font-size: calc( var(--fontSize_unit) * 32);   }
.paragraphe_wrapper .paragraphe .titre-sm{ margin-top: 20px;   }
.paragraphe_wrapper .paragraphe .surtitre{  margin-bottom: 0.5em; color: var(--vert);  text-transform: uppercase;  font-size: calc( var(--fontSize_unit) * 16); letter-spacing: 0.05em;   }
.paragraphe_wrapper .col_img{ width: 50%; display: flex;  flex-direction: column;  justify-content: center; }
.paragraphe_wrapper .col_img img{  width: 100%;   height: 400px; object-fit: cover; }
.paragraphe_wrapper .intro{ font-size: calc( var(--fontSize_unit) * 24); font-weight: bold;  line-height: 1.25em; }
.paragraphe_wrapper .intro-sm{ font-size: calc( var(--fontSize_unit) * 19); font-weight: bold;  line-height: 1.25em; padding-top: 0px !important; }
.paragraphe_wrapper p{ padding-top: 1em; }
.paragraphe_wrapper .drawbg{ position: absolute; background: -1; width: 220px; left: 0; top: 50%; }
.paragraphe_wrapper.right .drawbg{ left: auto; right: 0; }


/* template_materiel */

.template_materiel .container.materiel{ justify-content: center; display: flex; flex-wrap: wrap;   }
.template_materiel .materiel_item{ border-radius: 5px; overflow:hidden; width: 300px; margin: 40px 20px; background: white;  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15); }
.template_materiel .materiel_item .visuel{ width: 100%; height: 280px; }
.template_materiel .materiel_item .visuel img{ width: 100%; height: 100%; object-fit: cover; }
.template_materiel .materiel_item .txt{ padding: 2em; text-align: center; }
.template_materiel .materiel_item .titre{ color: var(--vert2); margin-bottom: 0.5em;  text-transform: uppercase; font-family: var(--Oswald-Medium); }
.template_materiel .materiel_item .descriptif{ opacity: 0.7; margin-top: 1em; }

/* offre_template */

.offre_template{  }
.offre_template .offre3{ padding-bottom: var(--grid_unit);}
.offre_template .page_intro{ padding-bottom: 0; padding-top: 0; }
.offre_container{ display: flex; justify-content: space-evenly; align-items: center;  margin: 10px 0; }
.offre_container .col{ width:100% }
.offre_container .col.tarif{ padding-left: 200px;  }
.offre_container .col.bt{ padding-left: 40px;  }
.offre_container .tarif sup{ font-size: 0.3em; font-family: 'lato'; top: -1.5em; margin-left: 0.3em; }
.offre_container .tarif span{ height: auto;  line-height: 1.1em; }

.offre_template .calculateur_wrapper{  margin-top: 30px; }

.offre_template .calculateur_line{ width: 100%;  display: flex; margin-top: 30px; }
.offre_template .calculateur_line .white_container{ background: white; color: var(--color_txt); width: 100%;  margin: 0 20px; height: 80px;   display: flex;  border-radius: 40px; align-items: center;  justify-content: center; }
.offre_template .calculateur_line .white_container .icon{ width:auto ; height: 40px; margin-right:20px; }
.offre_template .calculateur .white_container .sup{ line-height: 1.3em; margin-left: 1em;  }

.balance_plus { border:2px solid black; width: 1.5em; height:  1.5em; margin-left: 20px; align-items: center;  justify-content: center; padding: 0 10px; border-radius: 24px;   
   display: flex; background: white; color: var(--color_txt); margin: 20px 5px; display: flex;  }
.balance_plus:hover{ cursor: pointer; color: var(--vert);; }
.balance_moins { border:2px solid black; width:  1.5em; height:  1.5em; align-items: center;  justify-content: center; padding: 0 10px; border-radius: 24px;  display: flex; 
    background: white; color: var(--color_txt); margin: 20px 5px; display: flex;  }
.balance_moins:hover{ cursor: pointer; color: var(--vert); }

.offre_template .zone_calculateur .add_shop{margin: 20px; display: flex; color: black; align-items: center;  width: fit-content; }
.offre_template .zone_calculateur .add_shop:hover{ color: white; cursor: pointer;}
.offre_template .zone_calculateur .add_shop .plus{ width: 1em; height: 1em; align-items: center;  justify-content: center; padding: 10px; border-radius: 24px;  display: flex; background: white; color: var(--color_txt); margin: 20px 10px; display: flex;  }
.offre_template .zone_calculateur .sup{margin-left: 5px; line-height: 1.3em; }
.offre_template .zone_calculateur .txt{ min-width: 6em; }
.offre_template .zone_calculateur .calculateur_clone{  display: none; opacity: 0.3;  }


/* logiciel_template */

.logiciel_template{  }
.logiciel_template .page_intro{ padding-bottom: 0; }
.logiciel_template .fonctionalites{ display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 40px; }
.logiciel_template .fonctionalites .item{ align-items: center; width: 27%; margin: 10px 2% 60px 2% ; display: flex; flex-direction: column;  }
.logiciel_template .fonctionalites .item .visuel{  width: calc( var(--grid_unit) * 1.6); height: calc( var(--grid_unit) * 1.6);   }
.logiciel_template .fonctionalites .item .visuel img{ transform: scale(0); transition: all .3s ease-in-out .3s ; width: 100%; height: 100%; object-fit: contain; }
.logiciel_template .fonctionalites .item:nth-child(4n+1) .visuel img{ transition: all .3s cubic-bezier(0.42, 0, 0.46, 1.4) .3s ; }
.logiciel_template .fonctionalites .item:nth-child(4n+2) .visuel img{ transition: all .3s cubic-bezier(0.42, 0, 0.46, 1.4) .2s ; }
.logiciel_template .fonctionalites .item:nth-child(4n+3) .visuel img{ transition: all .3s cubic-bezier(0.42, 0, 0.46, 1.4) .5s ; }
.logiciel_template .fonctionalites .item:nth-child(4n+4) .visuel img{ transition: all .3s cubic-bezier(0.42, 0, 0.46, 1.4) .4s ; }
.logiciel_template .fonctionalites .item .visuel.appear img{ transform: scale(1); }
.logiciel_template .fonctionalites .item .titre{ text-align: center;  text-transform: uppercase;  color: var(--color_txt); margin-bottom: 0.8em;  font-weight: bold; position: relative;  text-align: center; margin: 10px auto 40px auto;  font-family: var(--Oswald-Medium); }
.logiciel_template .fonctionalites .item .titre:before{ width: 20px; height: 3px; content: ""; background: black; position: absolute; bottom: -23px; left: calc( 50% - 10px ); }
.logiciel_template .fonctionalites .item .txt{ margin: 10px auto; width: 100%; text-align: center; }
.logiciel_template .fonctionalites .item .txt p{ margin: 10px auto;   text-align: center;  padding: 0 40px;  opacity: 0.6;  }

.logiciel_template .zone_argu{ background: white;height: 400px;    }
.logiciel_template .zone_argu .swiper{  height: auto;   overflow:hidden; margin: calc( var(--grid_unit_v) * 0.5) 0;  padding:0 var(--grid_unit_v) ;}
.logiciel_template .zone_argu .swiper .swiper-wrapper{ width:100%; height: auto;  }
.logiciel_template .zone_argu .swiper .swiper-slide{ height: auto;  display: flex; justify-content: center; }
.logiciel_template .zone_argu .swiper .title{ padding: 0 3em; color: var(--color_txt3); position: relative; margin-bottom: 40px; text-transform: uppercase; font-family: var(--Oswald-Medium); }
.logiciel_template .zone_argu .swiper .title:before{ width: 20px; height: 3px; content: ""; background: var(--vert2); position: absolute; bottom: -23px; left: calc( 50% - 10px ); }
.logiciel_template .zone_argu .swiper article{ text-align: center; width: 320px; margin: calc( var(--grid_unit_v) * 0.5) 0 calc( var(--grid_unit_v) * 1) 0; }
.logiciel_template .zone_argu .swiper p{ padding: 0 3em; opacity: 0.6; }
.logiciel_template .zone_visite_guidee .slidePlay{  justify-content: center;  align-items: center; z-index: 10; position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: flex; }
.logiciel_template .zone_visite_guidee .slidePlay .icon{ width: 150px; height: auto; }
.logiciel_template .zone_visite_guidee .slidePlay .icon svg *{  fill: var(--vert);   }
.logiciel_template .zone_visite_guidee .slidePlay .icon:hover svg *{  fill: white; cursor: pointer; }
.logiciel_template .zone_visite_guidee  .swiper-button-next,
.logiciel_template .zone_visite_guidee  .swiper-button-prev{opacity:0; }
.logiciel_template .zone_visite_guidee{ padding: var(--grid_unit); margin-top: 100px; }
.logiciel_template .zone_visite_guidee .viewer{ margin-top: 60px; width:1000px;border-radius: 40px;  background: rgba(255,255,255,0.8); max-width: 90%; height: 600px;  overflow: hidden; color:var(--vert2);  line-height: 1.3em;  }
.logiciel_template .zone_visite_guidee .swiper-slide{ display: flex; flex-direction: column; justify-content: flex-start;  }
.logiciel_template .zone_visite_guidee .swiper-slide img{ border-radius: 10px; margin: 0px 80px 60px 80px; border: 10px solid white; box-shadow: 0px 0px 10px 0px rgba(158,158,158,0.75); }
.logiciel_template .zone_visite_guidee .legende{ border-radius: 40px; margin-top: 40px;   justify-content: center;  font-size: calc( var(--fontSize_unit) * 28 );   display: flex; flex-direction: column;  
  height: 100%; text-align: center;  padding: 0 100px 40px 100px; line-height: 1.3em;  }
.logiciel_template .zone_visite_guidee .legende_fullscreen{  width: 90%; margin: 0 5%;  justify-content: center; font-size: calc( var(--fontSize_unit) * 52 ); line-height: 1.3em;   display: flex; flex-direction: column;  height: 100%;  text-align: center;  padding: 0 100px 20px 100px; }
.logiciel_template .zone_visite_guidee .swiper-button-next {    right: 20px; }
.logiciel_template .zone_visite_guidee .swiper-button-prev {    left: 20px; }
.logiciel_template .zone_visite_guidee .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 20px; }
.logiciel_template .zone_visite_guidee .legende{ opacity: 0; transform: scale(1.1); transition: all .3s .5s; }
.logiciel_template .zone_visite_guidee .swiper-slide-active .legende{ opacity: 1;  transform: scale(1); }
.logiciel_template .zone_visite_guidee .legende_fullscreen{ opacity: 0; transition: all .6s .6s; transform: scale(1.1);  }
.logiciel_template .zone_visite_guidee .swiper-slide-active .legende_fullscreen{ opacity: 1; transform: scale(1); }


/* cgv template */

.cgv_template{}
.cgv_template .titre{
    margin-top: 60px;
    margin-bottom: 10px;
}

/* village_template */

.village_template .page_intro {  text-align: center; }
.village_template .page_intro .bt_vert{ margin: var(--grid_unit_v) auto;  margin-left: 110px;}


/* article_template */
.article_template{
    background-color : var(--color-br-grey);
    padding-bottom: 50px;
    padding-top: 120px;
}

/* footer */

.main_footer{ background: #3C4248; }
.main_footer .wrapper{ display: flex;  flex-wrap: nowrap;  align-content: center;  justify-content: center;  align-items: center; color: white; }
.main_footer .wrapper .col{width: 100%; padding: var(--grid_unit_v)  20px;  }
.main_footer .wrapper a{  color: white; }
.main_footer .main_footer_logo{ width: 132px; }
.main_footer .footer_links{ display: flex; flex-direction: column; }
.main_footer .footer_links a{ padding: 0.2em 0; }
.sub_footer{  background-color: #1d2124; padding: 10px; text-align: center; }

/* home_template */


.home_template .page_intro_container {   overflow: initial; }
/* .home_template .page_intro {  align-items: flex-start; } */
/* .home_template .page_intro img{ transform: translateY(-30px); z-index: 11; width: 40%; } */
.home_template .page_intro p{  font-size: calc( var(--fontSize_unit) * 22); margin-left: 0; }
.home_template .page_intro .paragraphe_wrapper { margin-top: 20px; }

.home_template .page_intro{  align-items: flex-start; } 
.home_template .page_intro .paragraphe_wrapper .paragraphe .surtitre{ color: var(--color_txt);   margin-bottom: 0.8em;  font-family: var(--Rockwell_Bold); }
 .village_container{ padding-bottom: var(--grid_unit_v) ; }

/*


/^^^^^^^                                                                        
/^^    /^^                                                                      
/^^    /^^          /^^          /^^^^      /^ /^^        /^^^^      /^^     /^^
/^ /^^            /^   /^^      /^^         /^  /^^      /^^          /^^   /^^ 
/^^  /^^         /^^^^^ /^^       /^^^      /^   /^^       /^^^        /^^ /^^  
/^^    /^^       /^                 /^^     /^^ /^^          /^^        /^/^^   
/^^      /^^       /^^^^        /^^ /^^     /^^          /^^ /^^         /^^    
                                            /^^                                 


*/



@media ( max-width: 840px){


  :root {  
      --fontSize_unit: .7px;    
      --grid_unit_v: 40px;
  }
  .txt_24 { font-size: calc( var(--fontSize_unit) * 18); }
  .txt_36 { font-size: calc( var(--fontSize_unit) * 28); }
  .txt_xxxl { font-size: calc( var(--fontSize_unit) * 62); }
  p br{  display: contents; }
  p{ font-size: calc( var(--fontSize_unit) * 18); }y
  .bt_vert,
  .bt_white{ font-size: calc( var(--fontSize_unit) * 21); }
  /* .txt_m { font-size: calc( var(--fontSize_unit) * 18); } */
  .home_template .banner_titre{}

  .burger{ display: block; z-index: 91;   position: fixed; top:35px; left: calc( 100vw - 60px ); width: 30px; height: 30px; }
  .burger .line{ position: absolute;  transform-origin:50% 50%; left: 50%; top:50%; transition:all .3s; content:''; width:30px; height: 2px; background: var(--color_txt); transition: all .3s; }
  .burger:hover{ cursor: pointer; }
  .burger .line1{ transform : translateX(-50%) translateY(-7px)  rotate(0deg);   }
  .burger .line2{ transform : translateX(-50%) translateY(7px) rotate(0deg);  }
  body.shownav{ overflow-y: hidden; }
  .shownav .burger .line1{  transform : translateX(-50%) translateY(0) rotate(45deg); transition:all .3s; }
  .shownav .burger .line2{  transform : translateX(-50%) translateY(0)  rotate(-45deg); transition:all .3s .1s; }
  .navbar .logo { width: 95px; }
  .navbar .main_nav{ position: fixed; z-index: 1000; left: 120vw;   display: flex;  flex-direction: column; align-content: flex-start; justify-content: center; top: 0; width: 100vw; height: 100vh; overflow-y: auto; overflow-x: hidden; background: white; }
  .navbar .main_nav a {  font-size: calc( var(--fontSize_unit) * 32); margin: 0.5em 0;  } 
  .shownav .main_nav{  left: 0; padding: 10vw;  }
  .navbar .main_nav a{  transition: all 0s; letter-spacing: .1em; line-height: 1.5em; opacity: 0; transform: translateX(.5em);  margin: 0.3em 0;  }
    .shownav .navbar{  height: 100vh; position: fixed; }
     .shownav .navbar .container{  height: 100vh; position: fixed; }
  .shownav .navbar .main_nav a:nth-child(1){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .1s ; }
  .shownav .navbar .main_nav a:nth-child(2){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .2s; }
  .shownav .navbar .main_nav a:nth-child(3){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .3s; }
  .shownav .navbar .main_nav a:nth-child(4){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .4s; }
  .shownav .navbar .main_nav a:nth-child(5){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .5s; }
  .shownav .navbar .main_nav a:nth-child(6){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .6s; }
  .shownav .navbar .main_nav a:nth-child(7){ transition: all .6s cubic-bezier(0.17, 0.67, 0.46, 1.05) .7s; }
  .shownav .navbar .main_nav a{ transform: translateX(0); opacity: 1; letter-spacing: 0;  }

  .page_intro {  flex-direction: column; }
  .page_intro p {  font-size: calc( var(--fontSize_unit) * 24); }
  .page_intro img {  width: 60%; margin: 20px auto; }
  .paragraphe_wrapper {  flex-direction: column-reverse; }
  .paragraphe_wrapper.right{  flex-direction: column; }
.paragraphe_wrapper.left .paragraphe { padding-left: 0; }
  .paragraphe_wrapper .col_img{  width: 100%; }
  .paragraphe_wrapper .col_img img{ height: 40vw; }
  .paragraphe_wrapper .col_txt{ padding: var(--grid_unit); width: 100%; }
  .paragraphe_wrapper .paragraphe{ width: 100%; margin: 0; }

  .main_footer .wrapper { flex-direction: column; }
  .main_footer .wrapper .col{ text-align: center; padding: 20px; }
  .main_footer .footer_links a{ text-align: center; }
  .main_footer .main_footer_logo{ margin: 40px auto 0 auto; }

  .logiciel_template .page_intro p{ transform: none; }
  .logiciel_template .fonctionalites .item{ width: 48%; margin: 0; }
  .logiciel_template .fonctionalites .item .visuel{ width: 80px; height: 80px; }
  .template_materiel .materiel_item{ width: 40vw; margin: 2vw; } 
  .template_materiel .materiel_item .visuel {    height: 30vw; }
  .template_materiel .materiel_item .descriptif{ font-size: calc( var(--fontSize_unit) * 14); }


  .page_intro p {   margin: 20px auto; text-align: center; } 

  .offre_template .page_intro img { width: 85%; margin-right: 15vw; }
  .offre_template .container{  margin-top: 40px; } 

  .offre_template .calculateur_line {    flex-direction: column; }
  .offre_template .calculateur_line .white_container{ width: 90%; margin: 5px 5%; }

  .offre_container{  margin: 30px 0; flex-direction: column;  }
  .offre_container .col.tarif{ padding: 20px auto;  --fontSize_unit: 1px;  padding-left: 90px;  }
  .offre_container .col{ padding: 20px 40px;  }
  .offre_container .col.bt .bt_vert { margin: auto; }
  .offre_container ul {  margin: auto; width: fit-content; margin-top: 10px; }
  .offre_container .col{ padding: 10px 40px; }

  .home_template .page_intro img{ width: 80%;  transform: translateY(0%); }
  .banner_video .pad_blc {  width: 90%; }

.logiciel_template .zone_visite_guidee .swiper-slide img{ margin: 0; }
.logiciel_template .zone_visite_guidee .viewer{ max-width: 96%; height: 80vw; margin: auto; }
.logiciel_template .zone_argu .swiper .title{ font-size: calc( var(--fontSize_unit) * 32); }
  .logiciel_template .zone_visite_guidee .screen{ font-size: 5vw; padding: 4em;}
.logiciel_template .zone_visite_guidee .legende{ padding: 20px 20px 60px 20px; margin: 0px; font-size: calc( var(--fontSize_unit) * 18);   }
  .navbar .main_nav .bouton { margin: 1em 0; }
  .village_content { flex-direction: column; }
  .village_content img { width:63% }
  

 }



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

@keyframes fadeIn{
    to { opacity: 1; }
}

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



@keyframes anim_banner_img{
    from {    opacity: 0; }
    to {   opacity: 0.3; }
}