/* 
Theme Name: Céline Duchateau - Avocate
Author: Solis Rea
Version: 1.0.3
*/

/* FONTS
========================================================================== */
@font-face{font-display:swap;font-family:'Crimson Pro';font-style:normal;font-weight:500;src:url('../fonts/crimson-pro-v28-latin-500.woff2') format('woff2'), url('../fonts/crimson-pro-v28-latin-500.ttf') format('truetype')}
@font-face{font-display:swap;font-family:'Roboto';font-style:normal;font-weight:400;src:url('../fonts/roboto-v50-latin-regular.woff2') format('woff2'), url('../fonts/roboto-v50-latin-regular.ttf') format('truetype')}
@font-face{font-display:swap;font-family:'Roboto';font-style:normal;font-weight:600;src:url('../fonts/roboto-v50-latin-600.woff2') format('woff2'), url('../fonts/roboto-v50-latin-600.ttf') format('truetype')}
@font-face{font-display:swap;font-family:'Roboto';font-style:normal;font-weight:800;src:url('../fonts/roboto-v50-latin-800.woff2') format('woff2'), url('../fonts/roboto-v50-latin-800.ttf') format('truetype')}
/* ROOT
========================================================================== */
:root {
	--system-ui: system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--fs-14-16: clamp(0.875rem, 0.8313rem + 0.1864vw, 1rem); 
	--fs-15-17: clamp(0.9375rem, 0.8938rem + 0.1864vw, 1.0625rem); 
	--fs-16-18: clamp(1rem, 0.9563rem + 0.1864vw, 1.125rem); 
	--fs-26-38: clamp(1.625rem, 1.3629rem + 1.1184vw, 2.375rem); 
	--fs-18-22: clamp(1.125rem, 1.0376rem + 0.3728vw, 1.375rem); 
	--fs-30-48: clamp(1.875rem, 1.4818rem + 1.6775vw, 3rem); 
	--space-8: clamp(0.5rem, 0.5rem + 0vw, 0.5rem);
	--space-12: clamp(0.6875rem, 0.6657rem + 0.0932vw, 0.75rem);
	--space-16: clamp(0.9375rem, 0.9157rem + 0.0932vw, 1rem);
	--space-24: clamp(1.4375rem, 1.4157rem + 0.0932vw, 1.5rem);
	--space-32: clamp(1.875rem, 1.8313rem + 0.1864vw, 2rem);
	--space-48: clamp(2.8125rem, 2.747rem + 0.2796vw, 3rem);
	--space-64: clamp(3.75rem, 3.6626rem + 0.3728vw, 4rem);
	--space-96:	clamp(5.625rem, 5.4939rem + 0.5592vw, 6rem);
	--colNoir: rgb(10, 40, 51); 
	--colBlanc: rgb(255, 255, 255); 
	--colBlancAlpha: rgba(255, 255, 255, 0.4);
	--colBeige: rgb(244, 242, 239); 
	--colBeigeSousMenu: rgb(239, 235, 229); 
	--colBeigeBorder: rgb(229, 223, 205); 
	--colVertHome: rgb(18, 50, 65); 
	--colVerCta: rgb(180, 173, 138); 
	--colVerCall: rgb(53, 80, 92); 
	--colPichy: rgb(209, 137, 66); 
	--colGrid: rgb(76, 93, 88); 
	--rowA1: calc( ( 100% - ( 11 * var(--space-16) ) ) / 12 );
	--rowA2: calc( (var(--rowA1) * 2) + (var(--space-16) * 1));
	--rowA3: calc( (var(--rowA1) * 3) + (var(--space-16) * 2));
	--rowA4: calc( (var(--rowA1) * 4) + (var(--space-16) * 3));
	--rowA5: calc( (var(--rowA1) * 5) + (var(--space-16) * 4));
	--rowA6: calc( (var(--rowA1) * 6) + (var(--space-16) * 5));
	--rowA7: calc( (var(--rowA1) * 7) + (var(--space-16) * 6));
	--rowA8: calc( (var(--rowA1) * 8) + (var(--space-16) * 7));
	--rowA9: calc( (var(--rowA1) * 9) + (var(--space-16) * 8));
	--rowA10: calc( (var(--rowA1) * 10) + (var(--space-16) * 9));
	--rowA11: calc( (var(--rowA1) * 11) + (var(--space-16) * 10));
	--rowA12: 100%;
	--wrapperBase: 1448px;
	--paddSpace: 128px;
	--navHeight: 74px;
	--imgRadius: 24px;
	--radiusBtn: 4px;
}
/* BASE
========================================================================== */
@-moz-document url-prefix(){html{scrollbar-width:none}}
html,body{height:100%}
body{line-height:normal;color:var(--colNoir);font-size:var(--fs-15-17);font-family:'Roboto';font-style:normal;font-weight:400;background-color: var(--colBeige);scrollbar-width:none;overflow-x:hidden}
body::-webkit-scrollbar{width:0px;background:transparent}
::-webkit-scrollbar{display:none}
a{cursor:pointer;color:inherit;text-decoration:none}
a:hover,a:active,a:focus{outline:0;outline:none;cursor:pointer;text-decoration:none}
::selection{background:var(--colVertHome);color:var(--colBeige);text-shadow:none}
a[href^=tel],a[href^=sms]{color:inherit;cursor:default;text-decoration:none}
img{text-align:center;font-size:11px;line-height:1;font-weight:400}
.ripple{background-position:center center;background-repeat:no-repeat;background-image:url('../img/svg/ui-ripple.svg');background-size:40px 40px}
noscript{position:fixed;z-index:9999;display:flex;justify-content:center;align-items:center;top:0;left:0;right:0;bottom:0;text-align:center;background:var(--colVertHome);overflow:hidden}
noscript p{width:300px;padding:var(--space-24);text-transform:uppercase;font-size:var(--fs-15-17);text-align:center;color:var(--colBeige)}
hr{display:block;width:32px;height:1px;border:0;margin:0;border-top:2px solid var(--colPichy)}
strong{font-weight:800}
.menuIn{display:none}
h1,h2,h3,h4{text-wrap:balance}
p.justip{text-align:justify}
.paddTop96{padding-top:var(--space-96)} 	.paddBot96{padding-bottom:var(--space-96)}
.paddTop64{padding-top:var(--space-64)}		.paddBot64{padding-bottom:var(--space-64)}
.paddTop32{padding-top:var(--space-32)} 	.paddBot32{padding-bottom:var(--space-32)}
.paddTop16{padding-top:var(--space-16)} 	.paddBot16{padding-bottom:var(--space-16)}
/* HEADER
========================================================================== */
header{width:100%;height:100vh;height:100dvh;background-color:var(--colVertHome);position:relative}
	.flexFondHeader{position:relative;display:flex;flex-flow:row nowrap;width:100%;height:100%;justify-content:flex-start;align-items:stretch}
		.fondHeaderImg{flex:0 0 45%}
		.fondHeaderImg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
	.cadreWrapper{position:absolute;display:block;width:100%;max-width:1448px;height:100%;top:0;left:50%;transform:translateX(-50%);padding-left:16px;padding-right:16px}
		.flexBarreNav{display:flex;flex-flow:row nowrap;height:60px;width:100%;align-items:stretch;margin:16px 0;position:relative;z-index:999}
			.barreNavSpace{flex:1 0 auto}
			.barreNav01{flex:0 1 auto}
				.flexMenu01{display:flex;flex-flow:row nowrap;gap:8px;align-items:center}
					.menu01Logo{flex:0 0 auto;padding-right:16px}
					.menu01Content{flex:1 0 auto}
						nav.topNav{display:flex;flex-flow:row nowrap;gap:8px;justify-content:space-between;align-items:center}
						nav.topNav li{flex:0 0 auto}
						nav.topNav li a{display:block;padding:2px 4px 4px 4px;font-weight:var(--fs-14-16);text-transform:uppercase;color:var(--colBlanc);position:relative}
						nav.topNav li a::after{position:absolute;top:calc(100% + 2px);left:0;width:100%;height:1px;background-color:var(--colPichy);content:'';opacity:0;transform:translateY(+4px);transition:height 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out}
						nav.topNav li a:hover::after{height:2px;opacity:1;transform:translateY(0px)}
						.topMenuBurger{display:none}
		.flexCadre{display:flex;flex-flow:row nowrap;width:100%;height:calc(100% - 92px);align-items:stretch;justify-content:center;padding:0 0 var(--space-16) 0}
			.cadreSpace{flex:0 0 45%}
			.cadreContent{flex:0 0 55%}
				.headerMessage{display:flex;flex-flow:column nowrap;height:100%;width:100%;justify-content:center;align-items:center;position:relative}
				.aniMouse{position:absolute;left:8px;bottom:0}
					.messageTexte{flex:0 0 auto;padding:var(--space-32) var(--space-32) var(--space-32) 100px;color:var(--colBlanc)}
						.messageTexte h1{display:block;font-family:'Crimson Pro';font-weight:500;font-size:var(--fs-30-48);line-height:1.2;padding-bottom:var(--space-16)}
						.messageTexte h1:after{content:"\00a0__";color:var(--colPichy);font-size:var(--fs-30-48)}
						.messageTexte p{display: block;line-height:1.4}
@keyframes scroll { 0% {transform: translateY(10px);} 30% {transform: translateY(100px);}}
svg #wheel{animation: scroll ease 1.5s infinite}
/* MAIN 
========================================================================== */
#mainContent{padding:0;background-image:url('../img/bkg01.png');background-repeat:repeat-y;background-size:clamp(320px, 100%, 1448px);background-position:center center}
section, .wrapper{position:relative;display:block;width:100%;max-width:1448px;margin:0 auto;padding-left:16px;padding-right:16px}
.naviMain{position:relative;top:0;display:block;width:100%;height:95px;z-index:-1;opacity:0;transform:translateY(20px);transition:transform 0.3s ease, opacity 0.3s ease}
.naviMain.navUp{position:sticky;z-index:988;opacity:1;transform:translateY(0);transition:transform 0.3s ease, opacity 0.3s ease}
	.naviMainTube{display:block;width:100%;height:92px;padding:16px;border-top:1px solid var(--colBeigeBorder);border-bottom:1px solid var(--colBeigeBorder);background-color:var(--colBeige);box-shadow: rgba(43, 45, 48, 0.18) 0px 10px 10px -10px}																																										  
		.flexNaviMain{display:flex;width:100%;max-width:1416px;margin:0 auto;padding:0;flex-flow:row nowrap;justify-content:flex-end;align-items:center;gap:8px}
			.flexNaviMain div{flex:0 0 auto}
				.menuImg{padding-right:16px}
				.flexNaviMain div a{display:block;padding:2px 4px 4px 4px;font-weight:var(--fs-14-16);text-transform:uppercase;position:relative}
				.flexNaviMain div a::after{position:absolute;top:calc(100% + 2px);left:0;width:100%;height:1px;background-color:var(--colPichy);content:'';opacity:0;transform:translateY(+4px);transition:height 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out}
				.flexNaviMain div a:hover::after{height:2px;opacity:1;transform:translateY(0px)}
/* Blocs Argues */
section.padd96{padding:var(--space-96) 0}
.flexMono5, .flexBi35, .flexBi37{display:flex;flex-flow:row nowrap;justify-content:center;gap:var(--space-16)}
	.margeA1{flex:0 0 var(--rowA3)} .margeA2{flex:0 0 var(--rowA4)}
	.blocContentA{flex:0 0 var(--rowA5);background-color:var(--colBeige)}
	.margeB1{flex:0 0 var(--rowA3)} .margeB2{flex:0 0 var(--rowA1)}
	.blocImgB{flex:0 0 var(--rowA3);padding:0 var(--space-8)}
	.blocContentB{flex:0 0 var(--rowA5);background-color:var(--colBeige)}
	.margeC1{flex:0 0 0} .margeC2{flex:0 0 var(--rowA2)}
	.blocImgC{flex:0 0 var(--rowA3);padding:0 var(--space-8)}
	.blocContentC{flex:0 0 var(--rowA7);background-color:var(--colBeige);padding-top:0}
		.blocImgB img, .blocImgC img{display:block;width:100%;height:auto;border-bottom-right-radius:var(--imgRadius)}
		.titrageArgu{padding:8px}
			.titrageArgu h2{display:block;font-family:'Crimson Pro';font-weight:500;font-size:var(--fs-26-38);line-height:1}
			.titrageArgu h2:after{content:"\00a0__";color:var(--colPichy);font-size:var(--fs-26-38)}
		.contentTexte{padding:8px}
			.contentTexte p{display:block;padding-bottom:var(--space-16)}
			.contentTexte p a{text-decoration:underline}
			.contentTexte p strong{font-weight:800}
.spoken{display:flex;flex-flow:row nowrap;align-items:center;gap:var(--space-16);font-size:var(--fs-16-18);font-weight:600}
	.spokenImg{flex:0 0 42px}
		.spokenImg img{width:100%;height:auto;max-width:100%}
	.spokenContent{flex:1 1 auto;max-width:380px}
/* Blocs Services */
.blocService{width:100%}
	.flexiServices{position:relative;display:flex;flex-flow:row nowrap;width:100%;justify-content:flex-start;align-items:stretch}
		.serviceImg{flex:0 0 45%;height:100vh;height:100dvh}
			.serviceImg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
		.serviceContent{flex:0 0 55%;max-width:830px;overflow:hidden}
		.servicesSpacer{height:90vh}
		.tubeFiches{display:flex;flex-flow:column nowrap;align-items:center;width:calc(100% - ( var(--space-96) * 2 ));margin:0 auto}
			.fiche{flex:0 0 auto;width:100%;padding:8px 8px 0 8px;margin-bottom:16px;overflow:hidden;background-color:var(--colBeige)}
				.fiche h2{display:block;font-family:'Crimson Pro';font-weight:500;font-size:var(--fs-26-38);line-height:1;padding-bottom:var(--space-8);border-bottom:1px solid var(--colNoir)}
				.serviceTxt, .lastTxt{padding-bottom:128px}
				.serviceTxt p, .lastTxt p{display:block;padding-top:var(--space-16)}
				.serviceTxt ul, .lastTxt ul{display:block;padding:var(--space-8) 0 0 0;position:relative}
				.serviceTxt li, .lastTxt li{display:block;padding:4px 0 4px 14px;position:relative;text-align:justify}
				.serviceTxt li:before, .lastTxt li:before{position:absolute;top:4px;left:2px;content:"•\00a0";font-weight:800}
		.contentTexte ul{display:block;padding:var(--space-8) 0 0 0;position:relative}
		.contentTexte li{display:block;padding:4px 0 4px 14px;position:relative;text-align:justify}
		.contentTexte li:before{position:absolute;top:4px;left:2px;content:"•\00a0";font-weight:800}
p.plessbot{padding-bottom:0}
/* Blocs Contacts */
.tempo{width:100%;min-height:16vh}
.flexEcho{display:flex;flex-flow:row nowrap;justify-content:center;align-items:flex-start;gap:var(--space-16)}
.margEcho1{flex:0 0 var(--rowA2)} 
.echoContent,.margEcho2{flex:0 0 var(--rowA5)}
	.echoContent{background-color:var(--colBeige);padding:var(--space-32) 0}
	.echoContent h2{display:block;font-family:'Crimson Pro';font-weight:500;font-size:var(--fs-26-38);line-height:1;padding-bottom:var(--space-16)}
	.echoContent h2:after{content:"\00a0__";color:var(--colPichy);font-size:var(--fs-26-38)}
	.echoContent span{display:block;font-weight:800;text-transform:uppercase;font-size:var(--fs-18-22)}
	.echoContent p{display:block;padding:0}
.backGVert{background-color:var(--colVerCall)}
.flexIco{display:flex;flex-flow:row nowrap;justify-content:center;align-items:flex-start;gap:var(--space-16)}
	.icoLink{flex:0 0 var(--rowA3);color:var(--colBlanc)}
		.flexLink{display:flex;flex-flow:row nowrap;gap:var(--space-16)}
			.linkPicto{flex:0 0 45px}
				.linkPicto img{display:block;width:100%;height:auto;max-height:45px}
			.linkName{flex:1 0 auto}
				.linkName h3{display:block;text-transform:uppercase;color:var(--colBlanc);font-size:var(--fs-18-22)}
				.linkName a{display:inline-block;padding:10px;border-radius:var(--radiusBtn);background-color:var(--colVerCta);color:var(--colBlanc);font-size:var(--fs-16-18);transition:background-color 0.3s ease}
				.linkName a:hover{background-color:var(--colPichy);transition:background-color 0.3s ease}
/* FOOTER 
========================================================================== */
footer{background-color:var(--colBeige);padding:var(--space-96) 0}
	.flexSchema{display:flex;flex-flow:row nowrap;width:100%;justify-content:center;gap:var(--space-16)}
	.flexAdresse{display:flex;flex-flow:row nowrap;width:100%;justify-content:center;align-items:flex-end;gap:var(--space-16)}
		.col01, .col02, .col03, .col04{flex:0 0 var(--rowA4);font-weight:600}
		.col01, .col03{order:10}
		.col02, .col04{order:20}
		.col00{flex:0 0 var(--rowA8);font-weight:600}
			.sName{display:block;font-family:'Crimson Pro';font-weight:500;font-size:var(--fs-26-38)}
			.sPro{display:block;font-weight:800}
			.sLogo{display:block;width:100%;max-width:51px;max-height:60px}
			.sStreet{display:block}
			.sTel{display:block;padding:var(--space-8) 0 0 0}
			.sMail{display:block;padding:var(--space-8) 0 0 0}
			.sTel a:hover, .sMail a:hover{text-decoration:underline}
			.sCase{display:block}
			.sSiren{display:block}
			.sIntra{display:block}
		.mentions{font-size:15px;padding:var(--space-24) 0}
		.mentions a:hover{text-decoration:underline}
/* MENUMOBILE 
========================================================================== */
#menutech{z-index:-1;position:fixed;top:0;left:0;bottom:0;right:0;visibility:hidden;transform:scale(0.7);opacity:0;background:var(--colVertHome);transition:all 0.3s ease}
#menutech.open{position:fixed;opacity:1;visibility:visible;transform:scale(1);z-index:9999;transition:all 0.3s ease}
	#play{display:grid;grid-template-columns: minmax(16px, 1fr) minmax(auto, 760px) minmax(16px, 1fr);grid-template-rows: minmax(16px, 1fr) minmax(auto, 520px) minmax(16px, 1fr);grid-column-gap:0px;grid-row-gap:0px;width:100%;height:100%}
	.div1{grid-area: 1 / 1 / 2 / 2;border-bottom:1px solid var(--colGrid);border-right:1px solid var(--colGrid)}
	.div2{grid-area: 1 / 2 / 2 / 3;border-bottom:1px solid var(--colGrid);border-right:1px solid var(--colGrid)}
	.div3{grid-area: 1 / 3 / 2 / 4;border-bottom:1px solid var(--colGrid)}
	.div4{grid-area: 2 / 1 / 3 / 2;border-bottom:1px solid var(--colGrid);border-right:1px solid var(--colGrid)}
	.div5{grid-area: 2 / 2 / 3 / 3;border-bottom:1px solid var(--colGrid);border-right:1px solid var(--colGrid);position:relative}
	.div6{grid-area: 2 / 3 / 3 / 4;border-bottom:1px solid var(--colGrid)}
	.div7{grid-area: 3 / 1 / 4 / 2;border-right:1px solid var(--colGrid)}
	.div8{grid-area: 3 / 2 / 4 / 3;border-right:1px solid var(--colGrid)}
	.div9{grid-area: 3 / 3 / 4 / 4}
.flexCont{display:flex;flex-flow:row nowrap;height:100%;align-items:center;justify-content:center;padding:var(--space-16)}
	.contLogo{flex:0 1 40%;padding:var(--space-16)}
		.contLogo img{display:block;width:100%;height:auto;max-width:145px;margin:0 auto}
	.contContent{flex:0 0 60%;padding:var(--space-16);color:var(--colBlanc)}
		ul.pageCont li{display:block;padding-bottom:var(--space-8)}
			.contTit{font-family:'Crimson Pro';font-weight:500;font-size:var(--fs-26-38)}
.menuClose{display:block;position:absolute;width:40px;height:40px;top:12px;right:12px;text-align:center}

#menuNavig{z-index:-1;position:fixed;top:0;left:0;bottom:0;right:0;visibility:hidden;transform:scale(0.7);opacity:0;background:var(--colBeige);transition:all 0.3s ease}
#menuNavig.open{position:fixed;opacity:1;visibility:visible;transform:scale(1);z-index:888;transition:all 0.3s ease}
	#playMenu{position:relative;top:92px;height:calc(100vh - 92px);height:calc(100dvh - 92px);padding:var(--space-16)}
	#mobiliNav{display:flex;flex-flow:column nowrap;height:94%;justify-content:center;align-content:center}
		#mobiliNav li{flex:0 0 auto;text-align:center}
			#mobiliNav li a{display:inline-block;padding:4px 0;font-size:var(--fs-30-48);color:var(--colNoir);font-weight:600;text-transform:uppercase}
/* MENU BURGER 
========================================================================== */
.hamburger{z-index:1100;cursor:pointer;transition-property:opacity,filter;transition-duration:0.15s;transition-timing-function:linear;font:inherit;color:inherit;text-transform:none;background-color:transparent;border:0;margin:0;overflow:visible}
.hamburger-box{width:40px;height:42px;padding:0;display:inline-block;position:relative}
.hamburger-inner{display:block;top:50%}
.hamburger-inner,.hamburger-inner::before, .hamburger-inner::after{width:36px;height:2px;background-color:var(--colBlanc);position:absolute;transition:transform 0.15s ease}
.hamburger-inner::before,.hamburger-inner::after{content:"";display:block}
.hamburger-inner::before{top:-10px}
.hamburger-inner::after{bottom:-10px}
.hamburger--spin-r .hamburger-inner{transition-duration: 0.3s;transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)}
.hamburger--spin-r .hamburger-inner::before{transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in}
.hamburger--spin-r .hamburger-inner::after{transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19)}
.hamburger--spin-r.is-active .hamburger-inner{transform: rotate(-225deg);transition-delay: 0.14s;transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);background-color:var(--colBlanc)}
.hamburger--spin-r.is-active .hamburger-inner::before{top:0;opacity:0;transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out;background-color:var(--colBlanc)}
.hamburger--spin-r.is-active .hamburger-inner::after{bottom:0;transform: rotate(90deg);transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);background-color:var(--colBlanc)}
/* MEDIA QUERIES
========================================================================== */
@media screen and (max-width:85em){
.barreNavSpace{flex:1 1 auto}
nav.topNav{justify-content:flex-end}
}
@media screen and (max-width:80em){
.tubeFiches{width:calc(100% - ( var(--space-64) * 2 ))}
}
@media screen and (max-width:70em){
.margeA1{flex:0 0 var(--rowA2)} .margeA2{flex:0 0 var(--rowA2)}
.blocContentA{flex:0 0 var(--rowA8)}
.margeB1{flex:0 0 var(--rowA1)} .margeB2{flex:0 0 var(--rowA1)}
.blocImgB{flex:0 0 var(--rowA3)}
.blocContentB{flex:0 0 var(--rowA7)}
.margeC1{flex:0 0 var(--rowA1)} .margeC2{flex:0 0 var(--rowA1)}
.blocImgC{flex:0 0 var(--rowA3)}
.blocContentC{flex:0 0 var(--rowA7);padding-top:0}
}
/* ---------------------------------- 1024px */
@media screen and (max-width:64em){
.tubeFiches{width:calc(100% - ( var(--space-32) * 2 ))}
}
/* ---------------------------------- 960px */
@media screen and (max-width:60em){
.flexBarreNav{max-width:732px;margin:16px auto}
.flexNaviMain{max-width:732px}
.flexNaviMain .menuImg{flex:1 0 auto}
.barreNavSpace{display:none}
.barreNav01{flex:0 0 100%}
.aniMouse{display:none}
.fondHeaderImg{flex:0 0 100%}
.cadreSpace{flex:0 0 0} .cadreContent{flex:0 0 100%}
.headerMessage{justify-content:flex-end;padding:var(--space-96)}
.messageTexte{flex:0 0 auto;padding:var(--space-32);background-color:var(--colVertHome)}
.margeA1{flex:0 0 var(--rowA1)} .margeA2{flex:0 0 var(--rowA1)}
.blocContentA{flex:0 0 var(--rowA10)}
.flexBi35{flex-flow:row wrap}
.margeB1{display:none} .margeB2{display:none}
.blocImgB{flex:0 0 var(--rowA4)}
.blocContentB{flex:0 0 var(--rowA10)}
.flexBi37{flex-flow:row wrap}
.margeC1{display:none} .margeC2{display:none}
.blocImgC{flex:0 0 var(--rowA4)}
.blocContentC{flex:0 0 var(--rowA10)}
.flexiServices{flex-flow:row wrap}
.serviceImg{flex:0 0 100%;height:80vh;height:80dvh}
.serviceContent{flex:0 0 100%;max-width:960px}
.servicesSpacer{height:10vh}
.tubeFiches{width:calc( var(--rowA10) - var(--space-16) )}
.margEcho1,.margEcho2{display:none} 
.echoContent{flex:0 0 var(--rowA10);text-align:center}
.flexIco{gap:var(--space-32)}
.flexLink{flex-flow:row wrap}
.linkPicto{flex:0 0 100%}
.linkPicto img{margin:0 auto}
.linkName{flex:0 0 100%;text-align:center}
.flexSchema,.flexAdresse{flex-flow:row wrap}
.col01, .col02, .col03, .col04{flex:0 0 var(--rowA8)}
.col02{order:5}
.serviceTxt, .lastTxt{padding-bottom:64px}
.tempo{min-height:1vh}
}
/* ---------------------------------- max 800px */
@media screen and (max-width:50em){
.flexCont{flex-flow:row wrap;padding:var(--space-32)}
.flexCadre{padding:0}
.contLogo, .contContent{flex:0 0 100%;padding:0}
.contLogo img{max-width:60px}
.contContent{text-align:center}
}
/* ---------------------------------- 768px */
@media screen and (max-width:48em){
.headerMessage{padding:var(--space-32) var(--space-16)}
.flexMenu01{justify-content:space-between}
.menu01Content{flex:0 0 40px}
nav.topNav{display:none}

.flexNaviMain{justify-content:space-between}
.menuOut{display:none}
.menuIn{display:block}
.menuIn .hamburger{mix-blend-mode:difference}
.tempo.final{display:none}
footer{position:relative;padding:0;min-height:100vh}
footer .wrapper{position:absolute;top:50%;transform:translateY(-50%)}
}
/* ---------------------------------- 640px */
@media screen and (max-width:40em){
.col01, .col02, .col03, .col04,.col00{flex:0 0 var(--rowA10)}
.blocImgB{flex:0 0 var(--rowA5)}
.blocImgC{flex:0 0 var(--rowA5)}
.flexIco{flex-flow:row wrap;gap:var(--space-32)}
.icoLink{flex:0 0 var(--rowA6)}
}
/* ---------------------------------- max 540px */
@media screen and (max-width:33.75em){
.headerMessage{padding:0 var(--space-16)}
}