@charset "utf-8";
@font-face {
  font-family: 'Roboto-Light';
  font-weight: normal;
  font-style: normal;
  src: local('Roboto Light'),
	  url('../font/Roboto/Roboto-Light.woff2') format('woff2'),
	  url('../font/Roboto/Roboto-Light.woff') format('woff'),
	  url('../font/Roboto/Roboto-Light.ttf') format('ttf'),
	  url('../font/Roboto/Roboto-Light.eot') format('eot');
}
@font-face {
    font-family: 'RobotoMedium';
    src: url('../font/Roboto/RobotoMedium.eot');
    src: url('../font/Roboto/RobotoMedium.eot') format('embedded-opentype'),
         url('../font/Roboto/RobotoMedium.woff2') format('woff2'),
         url('../font/Roboto/RobotoMedium.woff') format('woff'),
         url('../font/Roboto/RobotoMedium.ttf') format('truetype'),
}
@font-face {
  font-family: 'fontello';
  font-weight: normal;
  font-style: normal;
  src: url('../font/icone/fontello.eot?71072230');
  src: url('../font/icone/fontello.eot?71072230#iefix') format('embedded-opentype'),
      url('../font/icone/fontello.woff2?71072230') format('woff2'),
      url('../font/icone/fontello.woff?71072230') format('woff'),
      url('../font/icone/fontello.ttf?71072230') format('truetype'),
      url('../font/icone/fontello.svg?71072230#fontello') format('svg');
}
/*...................................................*/
[class^="icon-"]::before, [class*="icon-"]::before,[class^="icon-"]::after, [class*="icon-"]::after{
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never; 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .3em;
  margin-right: .3em;
}
.icon-pharma:before { content: '\e801'; }
.icon-random:before { content: '\e802'; } 
.icon-econsent:before { content: '\e803'; } 
.icon-eol:before { content: '\e800'; } 
.icon-epro:before { content: '\e805'; } 
.icon-on:before { content: '\f075';color: var(--couleur-bleu2);font-size: 2.4rem;}
.icon-off:before { content: '\e80c';color: var(--couleur-bleu2);font-size: 2.4rem;}
.icon-quote-g:before { content: '\e804';transform: rotate(180deg); margin-left: 0;}
.icon-quote-d:after { content: '\e804';}
.icon-cloture:before { content: '\e806'; }
.icon-concept:before { content: '\e807'; }
.icon-devis:before { content: '\e808';color:var(--couleur-lila)}
.icon-mains:before { content: '\e809'; }
.icon-production:before { content: '\e80a'; }
.icon-ecouteur:before { content: '\e80b';color:var(--couleur-lila)}  
.icon-tel:before { content: '\e81a';color:var(--couleur-lila)} 
.icon-arobas:before { content: '\e80d';color:var(--couleur-lila)}
.icon-calc:before { content: '\e80e';color:var(--couleur-lila)}
.icon-lock-alt:before { content: '\f075';color:var(--couleur-lila)}
.icon-icon-medsharing:before { content: '\e80f';vertical-align: middle;}
/*...................................................*/
:root{
--couleur-bleu:#0e6efe;/*bleu*/
--couleur-bleu2:#02437b;/*bleu foncé*/
--couleur-bleu3:#aeb1bb;/*bleu gris*/
--couleur-lila:#5a81c1;/*lila*/
--couleur-lila2:#c4d1e6;/*lila claire*/
--couleur-orange:#FF5807;/*orange*/
--transition-bouton:all .5s;
--transition-couleur:background .7s;
--marge-globale:5rem 10%;
--font-family-m: 'RobotoMedium', sans-serif;
--font-family-l:  'Roboto-Light', sans-serif;
}
.orange.icon-eol:before {
	color:var(--couleur-orange);
}
/*...............................................................................................................*/
html {
    font-size:62.5%;
	margin: 0;
    padding: 0;
	scrollbar-color: #CCC #f1f1f1;    
    scroll-behavior: smooth;
}
body{
	font-family:Arial,Helvetica,sans-serif;
	background:var(--couleur-bleu2);
	max-width: 1920px;
    font-size:1.7rem;
	margin:0 auto;
	padding:0;
}
/*.................................a bouton.*/
*, *:before, *:after {
	 -webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box; 
			 box-sizing: border-box; 
}
a{
	text-decoration:none;
	color:var(--couleur-orange);
	-webkit-transition: width .5s ease;
	-o-transition: width .5s ease;
	transition: width .5s ease;
}
a:hover{
	color:var(--couleur-bleu);
}
::selection {
  background:var(--couleur-bleu2);
  color: #FFFFFF;
}
.bouton,.bouton2{
	background-color: var(--couleur-orange);
	-webkit-transition:var(--transition-bouton);
	-o-transition:var(--transition-bouton);
	transition:var(--transition-bouton);
}
.bouton2{
	background-color: var(--couleur-orange);
	position: relative;
	color: #fff;
	padding: 1rem;
	border-radius: 2rem;
	border: .2rem #fff solid;
	display: inline-block;
	margin-top: 1rem;
	font-size: 1.8rem;
	line-height: 2rem;
}
.bouton:hover,.bouton2:hover{
	background-color: var(--couleur-bleu2);
}
.bouton2:hover{
   background-color: var(--couleur-bleu2); 
   color: #fff;
}
.deco-ul{
	list-style-type:none;
	padding: 0;
}
.contact .deco-ul{
	font-size:2.5rem;
	font-family: var(--font-family-m);
	line-height:2.8rem;
}
/*.....................................................................titre h*/
h2{
	text-align:left;
	margin:0 0 4.5rem 0;
}
.spanT1{
	border-left:.6rem var(--couleur-orange) solid;
	padding-left:.8rem;
	display: inline-block;
	padding-right: .8rem;
}
.spanT2{
	font-family:var(--font-family-m);
    font-size: 2.5rem;
	color:var(--couleur-bleu2);
	display: inline-block;
}
.h-col{
	font-family: var(--font-family-l);
	color:var(--couleur-bleu2);
	text-align: left;
	font-size: 2.5rem;	
	margin: 0;
	margin: 0;
	margin-bottom: 2rem;
}
.h-col span[class^="icon-"]::before{
	font-size:5rem;
	margin-left:0;
	color: var(--couleur-lila);
}
/*.....................................................................................................header*/
header{
	position:relative;
    width: 100%;
	height:8rem;
	background:rgba(255,255,255,.9);
	z-index:3;
	padding:0 2%;
	top: 0;
	display: -ms-grid;
	display: grid;
    -ms-grid-columns: 80% auto;
    grid-template-columns: 80% auto;
    template-columns: 80% auto;
}
.nav-is-stuck header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	-webkit-animation: stickAnim .3s;
	        animation: stickAnim .3s;
	max-width: 1920px;
	margin: 0 auto;
}
@-webkit-keyframes stickAnim {
	0% {
		-webkit-transform: translateY(-86px);
		        transform: translateY(-86px);
	}
	100% {
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
}
@keyframes stickAnim {
	0% {
		-webkit-transform: translateY(-86px);
		        transform: translateY(-86px);
	}
	100% {
		-webkit-transform: translateY(0);
		        transform: translateY(0);
	}
}
/*.........................................logo*/
.bouton-logo{
	width:200px;
	height:auto;
	display: flex;
    align-items: center;	
}
.logo{
	width:100%
}
/*...................................................................................................langue*/
.langue a{
	color:#fff;
	position:relative;
	top:0;
	opacity:1
}
.langue a:hover{
	opacity:.6;
}
.langue:hover::after{
	content:"English version";
	display: block;
	position: absolute;
	right: auto;
	left: 10rem;
	top: 14.85rem;
	border-radius: .5rem;
	-webkit-box-shadow: 0 .1rem 1.2rem 0 rgba(0,0,0,.2);
	box-shadow: 0 .1rem .6rem .1rem rgba(0,0,0,.2);
	background-color: #fff;
	padding: .5rem 1rem;
	color: var(--couleur-bleu2);
	font-size: 1.3rem;
	line-height: 1.5rem;
	z-index: 4;	;
}
.langue img{
	border-radius: 2rem;
	margin-left: .7rem;
}
.langue a:hover img{
	animation: rota-langue 5s linear infinite;
}
@-webkit-keyframes rota-langue {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rota-langue {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/*....................................................................................................connection*/
.connection{
	background:none;
	display:block;
	padding:0;
}
.connection a{
	color:#fff !important
}
.connection-conteneur1-bouton{
    font-size:1.63rem;
	font-weight:bold;
	padding:.7rem .35rem .9rem .35rem;    
	border-radius:4rem;
}
.connection-conteneur2{
	position: absolute;
	z-index:3;
	font-size:0.7em;
	line-height:1.2em;
	width:20rem;
	background-color:#fff;
	border: .1rem var(--couleur-bleu2) solid;
	border-radius:.7rem;	
	padding:.2rem 1rem;
	top:-15rem;
	right:0;
	webkit-transition:all 0.8s ease 0.1s;
	  -moz-transition:all 0.8s ease 0.1s;
	  -mst-transition:all 0.8s ease 0.1s;
	    -o-transition:all 0.8s ease 0.1s;
	       transition:all 0.8s ease 0.1s;
	text-align: left;
	left: 11rem;
}
.connection-conteneur2--anim{
	top:4.5rem;
}
/*...........................*/
.connection-input{
	width:15rem;
	padding:.2rem .8rem;
	margin-bottom:.5rem;
	background-color:#fff;
	border: .1rem var(--couleur-bleu2) solid;        
	border-radius: .7rem;
}
.connection-input:focus{
	background-color:#fff;
	border-color:#fff;
	outline:.1rem var(--couleur-orange) solid; 
}
.connection-label{
	display:inline-block;
	padding:.2rem .2rem .2rem .8rem;
}
.connection-label-block{
	display:block;
}
.connection-submit{
	cursor:pointer;
	color:#fff;
	border:none;
	padding:.4rem 0;
    border-radius:3rem;
	width: 2.4rem;
}
.connection-submit:hover,.connection-submit:focus{
	color:#fff;	
}
.connection-span{
	display:inline-block;
	padding:5px 0	
}
/*..............................................*/
.menu .connection a::after,.menu .langue a::after{
	display:none 
}
/*....................................................................................................déconnection / espace clients*/
.deconnection-bt{
	position: absolute;
	top: 2.7rem;
	right: 2%;
}
a:hover.icon-off::before{
	color:var(--couleur-bleu)
}
.client{
	display: flex;
	align-items: start;
	justify-content: flex-end;
}
.client-conteneur{
	display: inline-block;
	font-size: 1.1em;
	line-height: 1.2em;
	background-color: #fff;
	border: .1rem var(--couleur-bleu2) solid;
	border-radius: .7rem;
	padding:1rem;
	-webkit-box-shadow: 0px 1px 12px -3px rgba(0,0,0,0.40); 
	        box-shadow: 0px 1px 12px -3px rgba(0,0,0,0.40);		
}
.client p{
	font-family:var(--font-family-l);
	margin:.5rem 0;
}
.client p:first-child{
	font-family:var(--font-family-m);
	color:var(--couleur-bleu2)
}
/*.........................................................................................................menu*/
.menu {	
    opacity:0;
/*................................*/
	-webkit-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	        transform: translateX(100%);
	-webkit-transition:-webkit-transform 0.5s cubic-bezier(.76,.32,.05,1);
	transition:-webkit-transform 0.5s cubic-bezier(.76,.32,.05,1);
	-o-transition:transform 0.5s cubic-bezier(.76,.32,.05,1);
	transition:transform 0.5s cubic-bezier(.76,.32,.05,1);
	transition:transform 0.5s cubic-bezier(.76,.32,.05,1), -webkit-transform 0.5s cubic-bezier(.76,.32,.05,1);
	position: fixed;
	width: 100vw;
	height:calc(100% + 2rem);
	background-color: #fff;
	list-style-type: none;
	box-shadow: -2px 5px 8px 3px rgba(31, 51, 83, 0.2);
	-webkit-box-shadow: -2px 5px 8px 3px rgba(31, 51, 83, 0.2);
	-moz-box-shadow: -2px 5px 8px 3px rgba(31, 51, 83, 0.2);
	top: -2rem;
	right:0;
	overflow-y: auto;
	border-left: .1rem #9ba7bdde solid;
	padding: 10rem 3rem 3rem 3rem;
	z-index: 1;
}
/*................................................ menu input */
.burger-input {
    display: none;
}
.burger-input:checked ~ .menu {
	opacity:1;
	/*................................*/	
    -webkit-transform: translateX(0);	
        -ms-transform: translateX(0);	
            transform: translateX(0);
}
/* .................................................menu label */
.burger-label {
    cursor: pointer;
    display: inline-block;
	position: absolute;
	  -moz-user-select: none;
	  -webkit-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	padding: 1.8rem .9rem;
	z-index: 2;
	top: 1.8rem;
	background: var(--couleur-bleu2);
	border-radius: 2rem;
	right: 2%;
}
.menu li{
	margin-left:2rem;
	margin-bottom: 2rem; 
}
.ligne-trai{
   border-bottom: .1rem #d6e4f0 solid;
}
.menu a{
	color:var(--couleur-bleu2);
	-webkit-transition:var(--transition-bouton);
	-o-transition:var(--transition-bouton);
	transition:var(--transition-bouton);
	position:relative;
	font-size: 2.2rem;
}
.menu a::after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 0;
	bottom: -.15rem;
	width: 0;
	height: .2rem;
	background: var(--couleur-orange);
	-webkit-transition: width .5s ease;
	-o-transition: width .5s ease;
	transition: width .5s ease;
}
.ligne-trai a{
	display:block;
}
.menu2 a{
	display: inline-block;
}
.menu a:hover,.menu a:hover::before{
	color:var(--couleur-bleu);
}
.menu a:hover::after, .menu2-li a:hover::after {
    width: 100%;
}
.menu .bt-devis a::after{
	display:none
}
.bt-devis a{
	background:var(--couleur-orange);
	border-radius:2rem;	
	color:#fff;
	padding:.2rem 1rem;	
}
.bt-devis a:hover{
	color:#fff;	
	background:var(--couleur-bleu);	
}
/*.............................sélect*/
a[data-select='1']{
	color:var(--couleur-bleu);
}
.bt-devis a[data-select='1']{
	color:#fff;	
	background:var(--couleur-bleu);	
}
a[data-select='1']::after{
	 width: 100%;
}
/*.....................................................................................................burger*/
.burger-label.burger-fixe{
	position:fixed
}
.burger {
	background: #fff;
	display: block;
	height: .2rem;
	position: relative;
	-webkit-transition: background .2s ease-out;
	-o-transition: background .2s ease-out;
	transition: background .2s ease-out;
    width: 2rem;
}
.burger:before,.burger:after {
	content: '';
	position: absolute;
	display: block;
	height: 100%;
	background: #fff;
	-webkit-transition: all .2s ease-out;
	-o-transition: all .2s ease-out;
	transition: all .2s ease-out;
	width: 100%;
}
.burger:before {
    top: .7rem;
}
.burger:after {
    top: -.7rem;
}
.burger-input:checked ~ .burger-label .burger {
    background: transparent;
}
.burger-input:checked ~ .burger-label .burger:before {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.burger-input:checked ~ .burger-label .burger:after {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
.burger-input:checked ~ .burger-label:not(.steps) .burger:before,
.burger-input:checked ~ .burger-label:not(.steps) .burger:after {
    top: 0;
}
.menu2 {
	display: block;
	list-style-type: none;
	font-weight: normal;
	font-size: 1.6rem;
	margin: 1.5rem 0 0 -2rem;
}
/*............................................................triangle*/
.triangle {
	position: relative;
	font-size: 1.2rem;
	top: .1rem;
	display: inline-block;
	color: var(--couleur-orange);
	margin-left: .2rem;
	rotate: 0deg;
	-webkit-transition: rotate .2s linear;
	-o-transition: rotate .2s linear;
	transition: rotate .2s linear;
	top: 0rem;
	right: -.2rem;
}
.triangle-2 {
    rotate: 180deg;
}
/*..........................................................................................................main*/
main{
	width:100%;
	height:auto;
	overflow:hidden
}
.main-plan {
	display:none;
	position: fixed;
	top: 8.5rem;
	right: .5rem;
	width:2rem;
	padding: .3rem 0 .5rem .1rem;
	border-radius:1rem;
	-webkit-box-shadow: 0 .1rem 1.2rem 0 rgba(0,0,0,.2);
	box-shadow: 0 .1rem .6rem .1rem rgba(0,0,0,.2);
	z-index: 4;
	-webkit-backdrop-filter: blur(.5rem);
	backdrop-filter: blur(.5rem);
	background: rgba(255, 255, 255, .85);
}
.main-plan .dot {
	display:block;
	cursor: pointer;
	font-size: 2.5rem;
	margin: 0;
	padding: 0;
	line-height: 2.5rem;
	color:var(--couleur-orange);
	left: .2rem;
}
.main-plan .dot:hover {
	color:var(--couleur-bleu);
}
.main-plan .dot[data-descr] {
	position: relative;
}
.main-plan .dot[data-descr]:hover::after  {
	content: attr(data-descr);
	display: inline;
	position: absolute;
	right:3rem;
	top:0;
	border-radius:.5rem;
	-webkit-box-shadow: 0 .1rem 1.2rem 0 rgba(0,0,0,.2);
	box-shadow: 0 .1rem .6rem .1rem rgba(0,0,0,.2);
	background-color: #fff;
	padding:.5rem 1rem;
	color: var(--couleur-bleu2);
	font-size:1.3rem;
	line-height:1.5rem;
	z-index:4;
	max-width: 20rem;
	min-width: 15rem;
}
.main-plan .dot.active {
	color:var(--couleur-bleu);
}
.main-plan .dot.active::before{	
	position: absolute;
	left: -.15rem;
	top: .6rem;
	display: inline-block;
	outline: .1rem solid var(--couleur-bleu);
	background: none;
	width: 1.8rem;
	height: 1.8rem;
	content: "";
	border-radius: 50%;
	-webkit-animation: eclat .8s infinite;
	        animation: eclat .8s infinite;
	z-index:2
}
@-webkit-keyframes eclat{
    0% {
        outline-offset:0rem;
    }
    50% {
        outline-offset:.3rem;
		opacity:0
    }
    100% {
        outline-offset:0rem);
		opacity:1
    }
}
@keyframes eclat{
    0% {
        outline-offset:0rem;
    }
    50% {
        outline-offset:.3rem;
		opacity:0
    }
    100% {
        outline-offset:0rem);
		opacity:1
    }
}
/*......................................................................section col*/
.section-couleur{
	background:var(--couleur-lila2) !important;
}
section,.div-section{
	background:#fff;
	padding:var(--marge-globale);
	overflow: hidden;
	margin: 0;
}
.div-section{
	padding-top:3rem;
	padding-bottom:0
}
.section-nul{
	background:#fff;
	padding:0;
	overflow: hidden;
	margin: 0;
}
.sect-col-accuiel{
	display: -ms-grid;
	display: grid;
	column-gap:2rem;	
	min-height:1vh;
	margin-top: 0rem;
	padding:0 0 0 2%;
}
.sect-col-page{
    padding: 8rem calc(2% + 2rem);
}
.col-3,.col-4{
	display: -ms-grid;
	display: grid;
	gap:2rem;		
	margin-bottom: 8rem;
}
.col-2,.col-2-texte{
	padding-bottom:8rem;	
	display: -ms-grid;
	display: grid;
	grid-gap: 5rem;	
}
.col-2-texte{
	padding-bottom:0;	
}
.conteneur .col-2{
	grid-gap:2rem;
	padding-bottom:3rem;		
}
formulaire-calc .col-3{
	padding-bottom:8rem;	
	display: -ms-grid;
	display: grid;
	grid-gap:2rem;	
}
.col-4-conteur{
	-ms-grid-columns:repeat(2, 1fr);
    grid-template-columns:repeat(2, 1fr);
    template-columns:repeat(2, 1fr);
}
/*......................................*/
.sec-100{
	min-height:auto;	
}
/*......................................*/
.section-100{
	padding:0;
}
.section-image0,.section-image1{
	margin:5rem 0;
	background: url(../images/fond-timeline.webp) no-repeat;
	background-position: 50% center;
	background-size: cover; 	
	padding: 0 10%;
}
.section-image0{
	background: var(--couleur-lila2);
}
.section-image5{
	background: url(../images/fond-404.webp) no-repeat;
	background-position: top center;
	background-size: cover;
	margin-right: -.2rem;
}
/*...............................................................................................titre page accueil*/
.titre-accueil,.titre-page{
	background:var(--couleur-bleu2);
}
/*.....................................................images linteau*/
.titre-page-img1{
    background: url(../images/page1.webp) no-repeat;	
}
.titre-page-img2{
    background: url(../images/page2.webp) no-repeat;	
}
.titre-page-img3{
    background: url(../images/page3.webp) no-repeat;	
}
.titre-page-img4{
    background: url(../images/page4.webp) no-repeat;	
}
.titre-page-img5{
    background: url(../images/page5.webp) no-repeat;	
}
.titre-page-img6{
    background: url(../images/page6.webp) no-repeat;	
}
.titre-page-img7{
    background: url(../images/page7.webp) no-repeat;	
}
.titre-page-img8{
    background: url(../images/page8.webp) no-repeat;	
}
.titre-page-img9{
    background: url(../images/page9.webp) no-repeat;	
}
.titre-page-img10{
    background: url(../images/page10.webp) no-repeat;	
}
.titre-page-img11{
    background: url(../images/page11.webp) no-repeat;	
}
.titre-page-img12{
    background: url(../images/page12.webp) no-repeat;	
}
.titre-page-img13{
    background: url(../images/page13.webp) no-repeat;	
}
.titre-page-img14{
    background: url(../images/page14.webp) no-repeat;	
}
.titre-page-img15{
    background: url(../images/page15.webp) no-repeat;	
}
/*..................................................................*/
.titre-page{
	background-position:65% center;
    background-size: cover;
	background-repeat: no-repeat;
}
.titre-accueil-conteneur,.titre-page-conteneur{
	overflow: hidden;
	padding:2rem;
	color:#fff;
	margin-top: 0;
}
.titre-page-conteneur{
	padding:2rem 0;
}
.titre-accueil-h1,.titre-page-h1{
	font-family:var(--font-family-m);
	font-size: 4rem;
    font-size:7.5vw;
	line-height:8vw;	
	border-left: .65rem var(--couleur-orange) solid;
	padding-left: 1.6rem;
	margin: 0 0 -2rem 0;
}
.titre-page-h1{
	margin: 0;
}
.titre-page-conteneur p{
	border-left: .65rem var(--couleur-orange) solid;
	padding-left: 1.6rem;
	margin: 0;
	font-family: var(--font-family-l);
	font-size: 5.7vw;
	line-height: 6vw;
}
/*..............................................................slider titre accueil*/
.slideTexte{
	width:100%;
	height:auto;
	border-left: .65rem var(--couleur-orange) solid;
	padding-left: 1.6rem;
	overflow:hidden;
}
.slideTexte-conteneur{
	position: relative;
	width: 900%; /*9 éléments - div 9x plus large = 900% */
	margin: 0;
	padding-top:4rem;
	font-size: 0;
	text-align: left;
	opacity:1;
	animation: 48s anim-SlideTexte infinite;	
}
.slideTexte-conteneur_div{
	display:inline-block;
	width: calc(100% / 9);  /*100% / par le nombre d'éléments*/
	height:auto;
}
.slideTexte-conteneur_p{
    font-family: var(--font-family-l);	
	vertical-align: top;    /*corection d'alignement pour le texte*/
    display: inline-block;  /*corection d'alignement pour le texte*/
	color:#fff;
	padding:.5rem 2rem .5rem .5rem;
	font-size: 5.7vw;
	line-height: 6vw;
	margin-top: 0;
}
@-webkit-keyframes anim-SlideTexte{
	0%, 8.32% {
		transform: translate(0,0);
	}
	12.5%, 20.82% {
		transform: translate(-11.11%,0);
	}
	24.5%, 32.82%{
		transform: translate(-22.22%,0);
	}
	37%, 45.82%{
		transform: translate(-33.33%,0);
	}
	49.5%, 57.82%{
		transform: translate(-44.44%,0);  
	}
	61.5%, 69.82%{
		transform: translate(-55.55%,0); 
	}
	74%, 82.82% {
		transform: translate(-66.66%,0);
	}
	86.5%, 94.82%{
		transform: translate(-77.77%,0);
	}
	100% {
		transform: translate(-88.88%,0);
	}
}
/*pour 8 images/textes
temps de pause par image/texte 4 secondes
temps de déplacement d'une image/texte à la suivante 2 secondes
soit 8 images, on ne tient pas compte de l'image/texte de fin  
la durée de l'animation est de 48 secondes - 4s x 2s x 8images/texte
une seconde représente 100% / 48 = 2.08% de l'animation
translateX = 100 / 9 = 11.11%
*/
@keyframes anim-SlideTexte {
	0%, 8.32% {
		transform: translate(0,0);
	}
	12.5%, 20.82% {
		transform: translate(-11.11%,0);
	}
	24.5%, 32.82%{
		transform: translate(-22.22%,0);
	}
	37%, 45.82%{
		transform: translate(-33.33%,0);
	}
	49.5%, 57.82%{
		transform: translate(-44.44%,0);  
	}
	61.5%, 69.82%{
		transform: translate(-55.55%,0); 
	}
	74%, 82.82% {
		transform: translate(-66.66%,0);
	}
	86.5%, 94.82%{
		transform: translate(-77.77%,0);
	}
	100% {
		transform: translate(-88.88%,0);
	}
}
.slider-conteneur-bt{
    margin-bottom: 4.8rem;
}
/*...................................anim fleche.*/
.slider-conteneur-bt::after {
	content: "↓";
	position: absolute;
	top: 4.2rem;
	font-size: 4rem;
	left: 41.5%;
	-webkit-animation:.8s fleche-anim infinite linear;
		animation:.8s fleche-anim infinite linear;
}
@-webkit-keyframes fleche-anim {
0% {
    -webkit-transform: translatey(0);
            transform: translatey(0);
}
50% {
    -webkit-transform: translatey(1rem);
            transform: translatey(1rem);
}
100% {
    -webkit-transform: translatey(0);
            transform: translatey(0);
    }
}
@keyframes fleche-anim {
0% {
    -webkit-transform: translatey(0);
            transform: translatey(0);
}
50% {
    -webkit-transform: translatey(1rem);
            transform: translatey(1rem);
}
100% {
    -webkit-transform: translatey(0);
            transform: translatey(0);
    }
}
/*.....................................................................slider images accueil*/
.slide-conteneur,.slide {
     height:100%;
}
.slide-conteneur{
	display:none;
	border-right:none;
	overflow: hidden;
	background:var(--couleur-bleu2) no-repeat;
}
.slide-conteneur img{
    object-position: 55% 50%;
    width: 100%;
	max-width:1000px;
    height: 100%;
    object-fit: cover;
	border-right: .1rem var(--couleur-lila) solid;
    border-left: .1rem var(--couleur-lila) solid;
}
.efface{
	-webkit-animation: efface 1.5s;
	animation: efface 1.5s;
}
@-webkit-keyframes efface{
from {
    opacity: 0.4;
}
to {
    opacity: 1;
	}
}
@keyframes efface{
from {
    opacity: 0.4;
}
to {
    opacity: 1;
}
}
/*..................................................................icon card*/
.icon-carde{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;	
	position:relative;
	width:100%;
	text-align:center;
	font-size:2.5rem;
	padding:3rem;
	background:#fff;
	border-radius:5rem;
	-webkit-box-shadow: 0 .1rem 1.2rem 0 rgba(0,0,0,.2);
	box-shadow: 0 .1rem .6rem .1rem rgba(0,0,0,.2);	  
}
.icon-carde-titre{
	width:100%;
	display:block;
	font-family:var(--font-family-m);
	color: var(--couleur-bleu2);
	padding:.5rem;
}
.icon-carde-icon::before {
   display: block;
   font-size: 6rem;
   margin: 0 auto 2rem auto;
}
.bouton2.icon-carde-a,input[type="submit"]{
/*	display:block;*/
	cursor:pointer;
}
.icon-carde-p {
	font-family:var(--font-family-l);
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	font-size: 1.8rem;
	text-align:left;
	background:#fff;
	color:#000;
	margin-bottom: 1rem;
}
.bouton2.icon-carde-a::after{
	content:"⇒";
	display:none;
    font-size:3rem;
	-webkit-animation:.5s fleche2-anim infinite linear;
		animation:.5s fleche2-anim infinite linear;
	position: absolute;
	margin-left: -.1rem;
	margin-top: -.6rem;
}
/*...................................anim*/
.icon-carde:hover .icon-carde-icon::before {
	transform:translateY(1rem) rotateY(180deg);
	color: var(--couleur-lila);
}
.icon-carde:hover .icon-carde-titre{
	color: var(--couleur-lila);
}
.icon-carde:hover .icon-carde-p {
    color: var(--couleur-lila);
	transform:translateY(-1rem);
}
.icon-carde:hover .bouton2.icon-carde-a::after{
	display: inline-block;
}
.icon-carde-titre,.icon-carde-icon::before,.icon-carde-p{
	transition: var(--transition-bouton);
}
@-webkit-keyframes fleche2-anim {
0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
50% {
    -webkit-transform: translateX(.1rem);
            transform: translateX(.1rem);
}
100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    }
}
@keyframes fleche2-anim {
0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
}
50% {
    -webkit-transform: translateX(1rem);
            transform: translateX(1rem);
}
100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    }
}
/*.............................................................................................conteur*/
.conteur{
	text-align:center;
	font-family:var(--font-family-m);
	padding:1.5rem;
	background:var(--couleur-bleu2);	
	border-radius:5rem;
	border-left-width: .5rem;
	-webkit-hyphens: auto;
	hyphens: auto;
	-webkit-box-shadow: 0px .1rem 1.2rem 0px rgba(0,0,0,.4);
	box-shadow: 0px .1rem 1.2rem 0px rgba(0,0,0,.4);
	border-radius: 5rem;
}
.counteur-nombre,.counteur-signe{
	font-size:8vw;
	color:#fff;
}
.counteur-signe {
	color: #fff;
	font-size:6vw;
	vertical-align:top;
}
.counteur-signe2{;
	display:block
}
.counteur-texte{
	display:block;
	font-size:4vw;
	color:#fff;
	margin: 0 0 2.5rem 0;
}
/*............................................................................................................................article*/
.padding-bas{
	padding-bottom:2rem;
}
strong{
	color:var(--couleur-bleu2)
}
/*Positionne les éléments de grille (inversion)*/
.col-g1{
	grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start:2;	
}
.col-g2{
	grid-column-start:1;
    grid-column-end: 4;
    grid-row-start:1;
}
/*..........................*/
.certification-flex{
	display:flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content:space-evenly;
	margin-bottom:1.5rem;
}
.certification-flex img{
	margin:1rem;
	max-width: 12.6rem;
	width: auto;
}
/*..........................*/
article p,article ul{
	font-family:var(--font-family-l);
	margin:0 0 2rem 0;
	font-size: 1.9rem;
	line-height: 2.8rem;
	text-align:left;
}
article ul.saut li,article ul li{
	margin-bottom:.9rem
}
article img:not(.certification-flex img,.carde-client blockquote img){
	width:100%;
	border-radius:4rem; 
}
/*article .ombre{
	width:100%; 
	border:.1rem #d3e7f6 solid; 
	-webkit-box-shadow: 0px 1px 12px -3px rgba(0,0,0,0.7); 
	        box-shadow: 0px 1px 12px -3px rgba(0,0,0,0.7);
}*/
article.bouton2{
    font-size:2.3rem; 
	padding:.5rem 1.5rem;
}
/*.................................................carde-client*/
.carde-client{
	background:#fff;
	padding:2rem;
	border-radius:3rem;
	-ebkit-box-shadow: 0px .1rem 1.2rem 0px rgba(0,0,0,.4);
	box-shadow: 0px .1rem 1.2rem 0px rgba(0,0,0,.4);
	overflow: hidden;
	-webkit-box-shadow: 0 .1rem 1.2rem 0 rgba(0,0,0,.2);
	box-shadow: 0 .1rem .6rem .1rem rgba(0,0,0,.2);
}
.carde-client h2{
	font-family:var(--font-family-m);
	font-size:2.3rem;
	text-align:left;
	color:var(--couleur-bleu2);
	margin-bottom:3rem;
}
.carde-client blockquote{
	font-family: var(--font-family-l);
/*	background:var(--couleur-bleu2);*/
	border-radius:2rem;
	color:#000;
	padding:0 1rem;
	margin:0 0 0 0;
}
.carde-client blockquote img{
	width:14.6rem;
	margin:0 1rem 1rem 0;
	border-radius: 0;
	border:.1rem #fff solid;
}
.carde-client .bouton2{
	font-size:1.7rem;
	padding:.2rem 1rem;
}
.carde-client:hover .bouton2{
	-webkit-animation: .6s fleche2-anim infinite linear;
	animation: .6s fleche2-anim infinite linear;
}
.carde-client .bouton2:hover{
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
	animation-play-state:paused;
}
.carde-client .icon-quote-g::before,.carde-client .icon-quote-d::after{
	color: var(--couleur-bleu);
	font-size:2.5rem;
}
/*.......................................................clients*/
.scroll-client{
	width:100%;
	overflow: hidden;
	padding:2rem 0 1.5rem 0;
}
.scroll-client-item{ 
    background-size: cover;
	background-image: url("../images/logos-clients.webp");
	background-repeat: repeat-x;
	width:100%;
	height:11.9rem;
	background-position:0 0;
	-webkit-animation: defilement 100s infinite linear;
	        animation: defilement 100s infinite linear;
}
.scroll-client-item:hover{
	-webkit-animation-play-state:paused;
	-moz-animation-play-state:paused;
	animation-play-state:paused;
}
@-webkit-keyframes defilement{
	from {
		background-position: 0px 0px}
	to {
		background-position: -10436px 0px}
}
@keyframes defilement{
	from {
		background-position: 0px 0px}
	to {
		background-position: -10436px 0px}
}
/*...........................................timeline*/
.section-100 h2{
	  padding: 0;
	  margin: 3rem 0 0 0;
}
.timeline {
	list-style: none;
	padding: 2rem 0 1rem 0;
	position: relative;
	font-family: var(--font-family-l);
	font-size: 1.8rem;
}
.timeline:before {
	  top: 0;
	  bottom: 0;
	  position: absolute;
	  content: " ";
	  width: .4rem;
	  background-color: #fff;
	  left: 50%;
      margin-left: -.15rem;
}
.timeline-etiquette {
	  display: block;
	  width: 7rem;
	  background: #fff;
	  color: var(--couleur-bleu2);
	  margin: 0 auto;
	  padding: .3rem 0;
	  font-weight: bold;
	  text-align: center;
	  -webkit-box-shadow: 0px .1rem 1.2rem 0px rgba(0,0,0,.4);
	          box-shadow: 0px .1rem 1.2rem 0px rgba(0,0,0,.4);
	  border-radius: 2rem;
	  border: .2rem var(--couleur-bleu2) solid;
	  font-size: 2rem;
}
.timeline li {
	  margin-bottom: 2.5rem;
	  position: relative;
}
.timeline li:after {
    clear: both;
}
.timeline li:before, .timeline li:after {
	  content: " ";
	  display: table;
}
/* timeline conteneur*/
.timeline li .timeline-conteneur {
	  width: 42%;
	  float: left;
	  background: #fff;
	  padding: 1rem;
	  position: relative;
	  border-radius: .8rem;
	  -webkit-box-shadow: 0px .1rem 1.2rem 0px rgba(0,0,0,.4);
			  box-shadow: 0px .1rem 1.2rem 0px rgba(0,0,0,.4);
}
/* timeline cercle*/
.timeline li .timeline-cercle {
	  position: absolute;
	  top: 2.3rem;
	  left: calc(50% - .2rem);
	  text-align: center;
	  background: var(--couleur-bleu);
	  color: #fff;
	  width:3.5rem;
	  height:3.5rem;
	  line-height:3.5rem;
	  margin-left: -1.6rem;
	  border-top-right-radius: 50%;
	  border-top-left-radius: 50%;
	  border-bottom-right-radius: 50%;
	  border-bottom-left-radius: 50%;
	  z-index:2;
	  outline: .4rem solid #fff;
}
/*timeline titre*/
h3 {
	  margin: 0 0 1rem 0;
	  color: var(--couleur-bleu2);
	  font-family: var(--font-family-l);
	  font-size: 2.5rem;
}
.timeline-titre h3 {
	  color: var(--couleur-bleu);
	  font-family: var(--font-family-m);
	  margin: 0;
	  font-size: 2rem;
}
.timeline-titre i{
	  font-size:3rem;
	  margin-right:1rem;
}
.timeline-texte p, .timeline-texte ul {
     margin: .5rem 0 0 0;
}
/*trangle*/
.timeline li .timeline-conteneur:before {
	position: absolute;
	top: 2.6rem;
	right: -1.5rem;
	display: inline-block;
	border-top: 1.5rem solid transparent;
	border-left: 1.5rem solid #ccc;
	border-right: 0 solid #ccc;
	border-bottom: 1.5rem solid transparent;
	content: " ";
}
.timeline li .timeline-conteneur:after {
	position: absolute;
	top: 2.7rem;
	right: -1.4rem;
	display: inline-block;
	border-top: 1.4rem solid transparent;
	border-left: 1.4rem solid #fff;
	border-right: 0 solid #fff;
	border-bottom: 1.4rem solid transparent;
	content: " ";
}
.timeline div.timeline-droite .timeline-conteneur {
    float: right;
}
.timeline div.timeline-droite .timeline-conteneur:before {
	border-left-width: 0;
	border-right-width: 1.5rem;
	left: -1.5rem;
	right: auto;
}
.timeline div.timeline-droite .timeline-conteneur:after {
	border-left-width: 0;
	border-right-width: 1.4rem;
	left: -1.4rem;
	right: auto;
}
.timeline-titre h3.vert,.timeline-vert{
	color:#20d206
}
.timeline li .timeline-cercle.vert{
	background:#20d206
}
.timeline-titre h3.rouge,.timeline-rouge{
	color:#fe0e0e
}
.timeline li .timeline-cercle.rouge{
	background:#fe0e0e
}
.timeline-titre h3.jaune,.timeline-jaune{
	color:#feac0e
}
.timeline li .timeline-cercle.jaune{
	background:#feac0e
}
.timeline-titre h3.violet,.timeline-violet{
	color:#ff51ec
}
.timeline li .timeline-cercle.violet{
	background:#ff51ec
}
.timeline-bleu,.icon-devis.timeline-bleu::before{
	color:var(--couleur-bleu);
}
/*...................................................................formulaire*/
.formulaire-cont{
	font-family:var(--font-family-m);
	font-size:2rem;	
	overflow: ;
}
.formulaire-cont .conteneur,.formulaire-calc .conteneur{
	/*! margin:3rem 0; */
	padding:3rem 1rem;
	-webkit-backdrop-filter: blur(.5rem);
	backdrop-filter: blur(.5rem);
	background: rgba(255, 255, 255, .6);
	/*! border-radius: 5rem; */
	-webkit-box-shadow: 0 .1rem 1.2rem 0 rgba(0,0,0,.2);
	box-shadow: 0 .1rem .6rem .1rem rgba(0,0,0,.2);		
}
.formulaire-cont-span{
	display:block;
}
.formulaire-cont-span label{
	color:var(--couleur-bleu2);
	position: relative;
	padding-left: .6rem;
}
.formulaire-cont-span label.etoile::after,.formulaire-calc .etoile::after{
	content:"*";
	color:#F00;
	margin-left:.2rem;
	font-size:2.5rem;
	position: absolute;
	top: -1rem;
	right: -1rem;
}
@layer layer1{
	.formulaire-cont-span .input-texte,.formulaire-cont-span textarea{
		display: block;
		width:100%;
		font-size:2rem;
		font-family:var(--font-family-l);
		font-weight: normal;
		padding: .4rem .8rem;
		margin-top: .4rem;
		background:#fff;
		border: .1rem var(--couleur-bleu2) solid;
		border-radius: .7rem;
	}
	.formulaire-cont-span select{
		display:block;
		width:16rem;
		height:3rem;
		margin-top: .4rem;
		margin-bottom: .5rem;
		border:.1rem var(--couleur-bleu2) solid;
		font-size: 1.8rem;
		color:var(--couleur-bleu2);
		background:var(--couleur-lila2);
		border-radius: 1rem;
		-webkit-box-shadow: 0px .1rem 1.2rem 0px rgba(0,0,0,.4);
		box-shadow: 0 .1rem .5rem 0 rgba(0,0,0,.6);
	}	
}
.formulaire-cont-span .input-texte:focus,.formulaire-cont-span textarea:focus,.formulaire-calc [type="text"]:focus,.formulaire-cont-span select:focus,.resultat-input:focus{
	border-color:var(--couleur-orange);
	outline: .1rem var(--couleur-orange) solid;
}
.formulaire-cont-span select:hover{
	color: #fff;
	background:var(--couleur-bleu2);
}
.formulaire-cont .bouton2{
	margin-top:3rem
}
@layer layer2 {	
	[data-alerte='1'] input,[data-alerte='1'] textarea,[data-alerte='1'] select, [data-alerte='1'] .radio-label{
		background:#FCC;
	}	
}
/*.......................resultat  captcha*/
.resultat{
	margin-top:4rem;	
}
.resulta-label{
	display:inline-block

}
.resultat-img{
    width: 15rem !important;
	border-radius: .5rem !important;
	display: inline-block;
	padding: 0;
	margin: 0;
	vertical-align: bottom;
}
.resultat-input{
	display: inline-block;
	padding: 0.5rem;
	width: 5rem;
	text-align: center;
}
/*.................................................................video*/
.video{
	background:#FFF;
	width: 100%;
	height: auto;
	max-width: 72.9rem;
}
/*.............................................................formulaire calc*/
.formulaire-calc .h-col{
	margin-bottom:3rem;
}
.formulaire-calc fieldset{
	border:none;
	-webkit-backdrop-filter: blur(.6rem);
	backdrop-filter: blur(.6rem);
	background: rgba(255, 255, 255, .6);
}
.formulaire-calc label{
	position:relative;
	margin-left: .5rem;
}
.formulaire-calc .radio label{
	border-bottom:.1rem #a8afb5 solid;
	-webkit-box-shadow: 0rem .3rem .4rem .1rem rgba(0,0,0,.2);
	box-shadow: 0rem .3rem .4rem .1rem rgba(0,0,0,.2);
}
.formulaire-calc .fieldset{
	border:.1rem var(--couleur-bleu2) solid	;
	border-radius:.5rem;
	background:#fff;
	padding: 1rem;
	margin-bottom: 2rem;
}
.formulaire-calc .legend{
	position:relative;
	font-family:var(--font-family-m);
	font-size: 1.9rem;
	color: var(--couleur-bleu2);
	background: rgba(255, 255, 255);
	padding: .8rem 1rem .5rem .5rem;
	border-radius: .5rem .5rem 0 0;
	border: .1rem var(--couleur-bleu2) solid;
	margin: 0 .5rem;
	display: block;
	border-bottom: none;
	top: .1rem;
}
.formulaire-calc .etoile::after{
	right:0;
	top: -.2rem;
	font-size: 2rem;
}
.formulaire-calc i.etoile::after{
	top: -.3em;
	left: 2.7rem;
	font-size: 2rem;
	position: relative; 
	margin-left: -2rem;
	font-style: normal;
}
.formulaire-calc label.etoile::after,.formulaire-calc .light::after{
	top: -.5rem;
	right: -1rem;
}
.formulaire-calc [type="text"]{
	font-size:1.7rem;
	padding:.5rem;
	width:100%;
	border:.1rem var(--couleur-bleu2) solid;
	border-radius:.5rem;
	margin-top: .5rem;
}
.formulaire-calc .input-centre{
    margin-top: -.6rem;
}
.formulaire-calc .valide{
	margin-top:2rem
}
.formulaire-calc [type="button"]{
	cursor:pointer;
	margin-right:1rem
}
.col-old [type="text"]{
	display:block;
	width:50%;
	margin:.5rem 0;
}
.ajout{
	background: #dfe1e3;	
	border: .1rem var(--couleur-bleu2) solid;
	padding: .5rem;
	margin-top: 3rem;
}
.blanc{
	background:#fff;
	padding:.5rem;
	border-radius:.5rem
}
.fond-texte{
	-webkit-backdrop-filter: blur(.6rem);
	backdrop-filter: blur(.6rem);
	background: rgba(255, 255, 255, .8);
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	padding:4rem 2rem 2rem 2rem;
	margin:0;
}
/*..........................................................................bouton radio*/
@layer layer1 {	
	.radio-label{
		position:relative;
		display:block;
		cursor:pointer;	        
		border-radius:.6rem; 	
		background:var(--couleur-lila2);
		padding:.5rem .5rem .5rem 3.4rem;
		margin:0 0 .4rem 0;
		-webkit-transition:var(--transition-bouton);
		-o-transition:var(--transition-bouton);
		transition:var(--transition-bouton); 
	}
}
.radio-input:checked+.radio-label,.formulaire-calc .radio label:hover{
	background-color:var(--couleur-lila);
	color: #fff;	
}
.radio-input{
	display:none 
}
.radio-label::before {
  position: absolute;
  left: .7rem;
  top: .6rem;
  vertical-align: middle;
  display: inline-block;
  outline: .2rem solid var(--couleur-bleu2);
  background: var(--couleur-lila2);
  width: 1.8rem;
  height: 1.8rem;
  content: "";
  border: .3rem var(--couleur-lila2) solid;
  border-radius: 50%;
}
.radio-input:checked+.radio-label::before{	
    background:var(--couleur-bleu2);	
    outline-color: var(--couleur-bleu2); 
	animation: eclat .8s;
	z-index:3
}
@-webkit-keyframes eclat{
    0% {
        outline-offset:.2rem;
    }
    50% {
        outline-offset:1.3rem;
		outline-color: rgba(81, 92, 99, .15);
    }
    100% {
        outline-offset:.2rem;
		outline-color: var(--couleur-bleu2);
    }
}
@keyframes eclat{
    0% {
        outline-offset:.2rem;
    }
    50% {
        outline-offset:1.3rem;
		outline-color: rgba(81, 92, 99, .15);
    }
    100% {
        outline-offset:.2rem;
		outline-color: var(--couleur-bleu2);
    }
}
/*..........................................................................cases à cocher*/
.casesAcocher-label{
	position:relative;
	color:var(--couleur-1);
	display:block;
	cursor:pointer;
	background:var(--couleur-0);
	padding:.5rem .5rem .5rem 3.4rem;
	margin:.8rem 0 .4rem 0;
}
.casesAcocher-input{
    display:none;
}
.casesAcocher-label::before{
	position:absolute;
	left:.7rem;
	top:.4rem;
	vertical-align:middle;
	display:inline-block;
	background:var(--couleur-lila2);
	width:2rem;
	height:2rem;
    content: "";
	outline: .2rem solid var(--couleur-bleu2);
}
.casesAcocher-input:checked+.casesAcocher-label{
	background-color:var(--couleur-2);

}
.casesAcocher-input:checked+.casesAcocher-label::before{
	background-color:var(--couleur-lila);	
	outline-color: var(--couleur-bleu2); 
	animation: eclat .8s
}
/*............icone*/
.icon-ok-1::before {
  content: '✓';
  font-size:2.6rem;
  font-weight: bold;
  color: var(--couleur-bleu2);
  font-family: Verdana, Arial, Helvetica, sans-serif;
  left: -.6rem;
  position: relative;
  top: -.2rem;
}
.casesAcocher-icon{
	display:none
}
.casesAcocher-input:checked+label .casesAcocher-icon{
	position:absolute;
	top:-.3rem;
	left:.8rem;
	display:inline-block;
	font-size:1.3rem;
	color:var(--couleur-2);
	transform:var(--rotation);
}
/*.........................................................................*/
/*....................................................................p light*/
.light{
	font-size:1.5rem;
	position: relative;
	display: inline-block;
}
.formulaire-cont .light::after{
	content: "*";
	color: #F00;
	margin-left: .2rem;
	font-size: 2rem;
	position: absolute;
	top: -.5rem;
	right: -1rem;	
}
footer .light::before {
	content: "© 2025";
	padding-right:.4rem;
}
/*.......................................................................pied*/
.chercheur{
	margin: 0;
	padding: 0 0 0 2%;
	display: block;
	height: auto;
	background: #fff;
}
.chercheur img {
	max-width:20rem;
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	bottom: -.5rem;
}
footer{
	position:relative;
	padding: 2rem 0 0 0;
	z-index:2;
	min-height:10rem;
	background:var(--couleur-bleu2);
	color: #fff;
}
footer .col-3{
	font-family:'Roboto Ligh', sans-serif;		
	margin-bottom:0;
	padding:3rem calc(2% + 2rem);
	font-size: 1.9rem;
	line-height: 3rem;
}
footer .big{
    font-family:var(--font-family-m);
    border-bottom:.1rem var(--couleur-orange) solid;
    font-size: 2.2rem;
    margin-top: .9rem;
    display: inline-block;
}
footer a{
	color:#FFF
}
footer ul{
	list-style:none;
	padding-left: 0;
	padding-top: 0;
	margin-top: 0;
}
footer a:hover{
	color:var(--couleur-bleu)
}
.hautPage{
	position:fixed;
	z-index:3; 
	display:none; 
	bottom:2.6rem;
	margin: 0;
    padding: 0;
    width:2.9rem;
    height:2.9rem;
	right:.7rem;
    cursor: pointer;
	border-radius:2rem;
}
.hautPage span{
	position:relative;
	color:#fff;
	font-size:1.8rem;
	top:.25rem;
	left:.58rem;
}
/*............................................................................404*/
.div-404.titre-page{
	background:#fff;
	padding: 2rem calc(2% + 2rem) 0 calc(2% + 2rem);
}
.div-404 .titre-page-conteneur{
	color:var(--couleur-bleu2)
}
.div-404 section,.div-404 .chercheur{
	background:none;
	/*! padding: 0; */
}
.div-404 section .col-g1{
	padding:2.5rem 1rem;
	border-radius:5rem;
	-webkit-backdrop-filter: blur(.5rem);
	backdrop-filter: blur(.5rem);
	background: rgba(255, 255, 255, .5);
}
/*............................................................................*/
@media (min-width: 400px){	
}
@media (min-width: 500px){
.bouton-logo {
    width: 265px;
}
.titre-accueil-h1,.titre-page-h1{ 
    font-size:5.5vw;
	line-height:6vw;
	margin-top:0;	
}
.slideTexte-conteneur_p,.titre-page-conteneur p {
  font-size: 3.5vw;
  line-height:4vw;	
}
article p,article ul{
	text-align: justify
}
}
@media (max-width: 680px){
ul.timeline:before {
    left: 4rem;
} 
.timeline-etiquette {
}  
ul.timeline li .timeline-conteneur {
	width: calc(100% - 9rem);
	width: -moz-calc(100% - 9rem);
	width: -webkit-calc(100% - 9rem);
} 
ul.timeline li .timeline-cercle {
	top: 2.2rem;
	left: 2.2rem;
	margin-left: 0;
}
ul.timeline > li > .timeline-etiquette {
    margin: 0;
}
ul.timeline > li > .timeline-conteneur {
	float: right;
	left: 2rem;
}
ul.timeline > li > .timeline-conteneur:before {
	border-left-width: 0;
	border-right-width: 1.5rem;
	left: -1.5rem;
	right: auto; 
}
ul.timeline > li > .timeline-conteneur:after {
	border-left-width: 0;
	border-right-width:1.4rem;
	left: -1.4rem;
	right: auto; 
}	
}
@media (max-width: 900px){
/*...............................................................timeline*/	
.section-100 h2 {
    margin: 0 0 0 10%;
}
.timeline li .timeline-conteneur {
    width: 40%;
}	
}
@media (min-width: 900px){
/*.........................................h2*/
.titre-page-h1{
	margin: 0 0 -2rem 0;
}
h2{
    text-align:center;
}
.spanT2{
	font-size: 4rem;
}
.h-col{
    font-size: 3.2rem;
}
/*..........................................*/
.bouton2{
	font-size: 2rem;
    padding: .5rem 1.5rem;
	line-height: 3rem;
}
header {
    -ms-grid-columns: 30% auto;
    grid-template-columns: 30% auto;
    template-columns: 30% auto;	
}
/*.......................*/
.bouton-logo{
    width: 281px;
    position: relative;
}
/*......................................................................menu*/
.menu {
	opacity:1;
	/*................................*/
	position: relative;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
	-webkit-transform: translateX(0);
	    -ms-transform: translateX(0);
	        transform: translateX(0);
	width:auto;
	height:auto;	
	background: none;
	overflow-y:none;
    overflow: visible;
	border:none;
	box-shadow:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
    top: 5rem;
	padding: 0;
	margin: 0;
	text-align: right;
	z-index: 2;
}
.menu2 {
	position: absolute;
	background: #fff;
	margin: 0;
	padding: 1rem 1rem 1rem 0;
	text-align: left;
	width: 20rem;
	top: 2.5rem;
	-webkit-backdrop-filter: blur(.5rem);
		  backdrop-filter: blur(.5rem);
	background: rgba(255, 255, 255, .6);
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.burger-label {
	display:none
}
.menu a{
	font-size:1.7rem
}
.menu li {
	display: inline-block;
    margin-bottom:0;
}
.menu2 li{
	display:block;
	margin: .6rem 0 .6rem 2rem;
}
.menu a::after {
   height:.1rem;
}
.menu2 .ligne-trai a {
   display:block;
}
.ligne-trai{
    border-bottom: none;
}
/*...........................*/
.ligne-1,.ligne-2{
	position:absolute;
	top:-3.6rem;
	right: 0;
}
/*.....................................ligne1-connection*/
.connection-conteneur2--anim {
	top:0;
}
.connection-conteneur2{
	left:-19rem;
}
.menu .ligne-1 a{
    font-size: 1.8rem !important;
}
.ligne-1{
	right:-1.3rem;
	z-index: 3;
}
/*........................................ligne2-langue*/
.ligne-2{
	top:-3.8rem;
	right: 3.2rem;
}
.langue img {
    margin-left: 0;
    width: 2.8rem;
}
.langue:hover::after{
	display: inline;
	white-space: nowrap;
	position: absolute;
	right: 4rem;
	left: auto;
	top: .2rem;
}
/*...................................burger*/
.burger {
	display:none
}
/*.......................................................................section col*/
.sect-col-accuiel{
	-ms-grid-columns:repeat(2, 1fr);
    grid-template-columns:repeat(2, 1fr);
    template-columns:repeat(2, 1fr);
}
.sec-100{
	min-height:100vh;
	display: grid;
	place-items: center;		
}
.col-2,.col-2-texte{
	-ms-grid-columns:repeat(2, 1fr);
    grid-template-columns:repeat(2, 1fr);
    template-columns:repeat(2, 1fr);	
}
.conteneur .col-2{
	grid-gap:4rem;
	padding-bottom:4rem;		
}
formulaire-calc .col-3{
	-ms-grid-columns:repeat(3,1fr);
    grid-template-columns:repeat(3,1fr);
    template-columns:repeat(3,1fr);
}
.col-r{
	-ms-grid-columns:1fr 2fr;
    grid-template-columns:1fr 2fr;
    template-columns:1fr 2fr;	
}
.col-g{
	-ms-grid-columns: 2fr 1fr;
	grid-template-columns: 2fr 1fr;
	template-columns: 2fr 1fr;
}
.col-3{
	-ms-grid-columns:repeat(3, 1fr);
    grid-template-columns:repeat(3, 1fr);
    template-columns:repeat(3, 1fr);
}
.col-4{
	-ms-grid-columns:repeat(4, 1fr);
    grid-template-columns:repeat(4, 1fr);
    template-columns:repeat(4, 1fr);
}
/*......................................................accuiel slides titre accueil*/
.titre-accueil-h1,.titre-page-h1{ 
    font-size:3.5vw;
	line-height:4vw;
	margin-top:15%;	
}
.titre-page-h1{ 
	margin:0 0 0 0;	
}
.slideTexte-conteneur_p{
	font-size: 2.3vw;
	line-height: 2.5vw;
    margin-top: 0;
}
.slide-conteneur{
	display: block;
	height:100%;
    padding: 0 0 0 2rem;
}
.sect-col-accuiel {
    min-height:100vh;
}
.slider-conteneur-bt::after {
	top: 3.8rem;
}
.titre-page-conteneur p{
	font-size: 1.6vw;
	line-height: 1.8vw;
}
/*............................................*/
.titre-accueil__fond img {
    object-position: 50% 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*.......................................................................................icon card*/
.bouton2.icon-carde-a::after {
  margin-top: -.1rem;
}
/*.........................................................................................conteur*/
.conteur{	
}
.counteur-nombre,.counteur-signe{
	font-size:6vw;
}
.counteur-signe{
	font-size:4vw;
}
.counteur-texte{
	font-size:2vw;
	margin: 0 0 5rem 0;	
}
/*............................................................................................................................article*/
.main-plan {
	display:block
}
/*Positionne les éléments de grille (inversion)*/
.col-g1{
	grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;	
}
.col-g2{
	grid-column-start:2;
    grid-column-end: 4;
    grid-row-start:1;
}
/*............................................................................................................footer*/
.chercheur img{
  max-width: 30rem;
}
.div-centre{
	display: grid;
	place-items: start center;
	margin: 0;
	padding: 0;
}
footer ul{	
	padding-left:10rem;
}
.div-centre1{
    padding-left:7rem;
}
}
@media (min-width: 1024px){
.carde-client blockquote{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;	
}
@media (min-width: 1445px){

}