/* 
Theme Name: heral
Author: Lykope
Author URI: http://www.lykope.com
Description: Private theme for Heral Groupe
Requires at least: WordPress 6.1.x
Version: 1.1.2
Tags: Responsive Design - SEO - Flexbox
*/

/* FONTS
========================================================================== */
@font-face{font-family:'FiraReg';font-style:normal;font-weight:400;src: local(''), url('../fonts/fira-sans-v16-latin-regular.woff2') format('woff2'), url('../fonts/fira-sans-v16-latin-regular.woff') format('woff')}
@font-face{font-family:'FiraSemiBold';font-style:normal;font-weight:500;src: local(''), url('../fonts/fira-sans-v16-latin-500.woff2') format('woff2'), url('../fonts/fira-sans-v16-latin-500.woff') format('woff')}
@font-face{font-family:'FiraBold';font-style:normal;font-weight:600;src: local(''), url('../fonts/fira-sans-v16-latin-600.woff2') format('woff2'), url('../fonts/fira-sans-v16-latin-600.woff') format('woff')}
@font-face{font-family:'RobotoSlab';font-style:normal;font-weight:800;src: local(''), url('../fonts/roboto-slab-v23-latin-800.woff2') format('woff2'), url('../fonts/roboto-slab-v23-latin-800.woff') format('woff')}

/* WARNING 
========================================================================== */
.browsehappy{margin:0.2em 0;background:#ccc;color:#1a1a1a;padding:0.2em 0}
.browsehappy a{text-decoration:none;cursor:pointer;color:#db0525}

/* BASE
========================================================================== */
html,body{font-size:62.5%;height:100%;background:#fff}
body{font-size:1.5rem;line-height:1.4em;color:#252525;font-family:'FiraReg', sans-serif;font-weight:400;overflow-x:hidden}
a{text-decoration:none;cursor:pointer;color:inherit}
a:hover,a:active,a:focus{outline:0;outline:none;cursor:pointer;text-decoration:none}
::selection{background:rgba(0,72,123,0.9);color:#fff;text-shadow:none}
::-moz-selection{background:rgba(0,72,123,0.9);color:#fff;text-shadow:none}
a[href^=tel],a[href^=sms]{color:inherit;cursor:default;text-decoration:none}
img[data-sizes="auto"]{display:block;width:100%;height:auto}
.lazyload{opacity:0}
.lazyloading{opacity:1;transition:opacity 0.3s}
img.lazyload:not([src]){visibility:hidden}
img{text-align:center;font-family:'FiraReg', sans-serif;font-weight:400;font-size:1.1rem;line-height:12px}
strong{font-family:'FiraSemiBold', sans-serif;font-weight:500}
.ripple{background-repeat:no-repeat;background-image:url('img/svg/ripple.svg');background-size:40px 40px;background-position:center center}

.gris{color:#f8f9f9}
.bleu{color:#00487b}
.rouge{color:#bd1c26}

/* HEADER 
========================================================================== */
header{position:fixed;z-index:998;top:0;left:0;width:100%;height:90px;background:#fff;color:#00487b;box-shadow:0px 1px 10px rgba(10, 10, 10, 0.2);transition:height ease 0.3s;overflow:hidden}
header.stuck{width:100%;height:68px;transition:height ease 0.3s}
	.wrapperHeader{width:100%;height:90px;max-width:1312px;margin:0 auto;padding:0 16px;transition:height ease 0.3s}
		.flexiHeader{display:flex;height:100%;flex-flow:row nowrap}
			.itemLogo{flex:0 1 160px;padding:0 16px;align-self:center;transition:flex-basis ease 0.3s}
			.itemMenu{flex:1 1 auto;padding:0 0 0 16px;align-self:center}
			.itemMenu a{font-family:'FiraBold', sans-serif;font-weight:600;font-size:2.0rem;text-transform:uppercase}
				.flexiMenu{display:flex;flex-flow:row nowrap;justify-content:flex-end}
					.flexiMenu li{flex:0 0 auto;padding:22px 0 0 0}
					.flexiMenu li:before{content:"|";color:#ccc}
					.flexiMenu li:first-child:before{content:""}
					.flexiMenu li a{display:inline-block;text-align:center;padding:8px 16px;text-transform:uppercase;font-family:'FiraSemiBold', sans-serif;font-weight:500;transition:color ease 0.3s}
					.flexiMenu li.current_page_item a, .flexiMenu li a:hover{color:#bd1c26;transition:color ease 0.3s}
			}
			.itemHambi{display:none}
header.stuck .wrapperHeader{height:68px;transition:height ease 0.3s}
header.stuck .itemLogo{flex:0 1 140px;align-self:center;transition:flex-basis ease 0.3s}
header.stuck .flexiMenu li{padding:17px 0 0 0}
.bulk{display:block;background:#000;height:89px;transition:height ease 0.3s}
.bulk.stick{display:block;height:67px;transition:height ease 0.3s}

/* MAIN 
========================================================================== */
.tetiere{background-color:#fff;height:480px;width:100%;overflow:hidden;margin-bottom:50px}
	#wrapperTetiere{position:relative;width:100%;max-width:1312px;height:480px;margin:0 auto}
	#imgTetiere{position:relative;height:100%;width:100%;min-width:100%;min-height:100%;background-position:center center;background-repeat:no-repeat;background-size:cover}
		.encartFixe{width:100%;max-width:600px;padding:32px;position:absolute;left:0;top:45%;transform:translateY(-50%)}
			.miniTi{display:block;padding-bottom:8px;font-size:1.7rem;color:#bd1c26;text-transform:uppercase;font-family:'RobotoSlab', serif;font-weight:800}
			.encartFixe h1{display:block;color:#00487b;padding-bottom:16px;font-size:3.4rem;line-height:1.05em;font-family:'FiraBold', sans-serif;font-weight:600}
			.encartFixe p{display:block}
/* Multiplebkg  */
.wibkg01{position:absolute;transform:rotate(-5deg);top:0;left:0px;width:100%;max-width:610px;height:100%;max-height:440px;border-radius:25px;background-color:rgba(255, 255, 255, 0.5)}
.wibkg02{position:absolute;transform:rotate(-3deg);top:-32px;left:0px;width:100%;max-width:580px;height:100%;max-height:460px;border-radius:25px;background-color:rgba(255, 255, 255, 0.5)}
.wibkg03{position:absolute;transform:rotate(-6deg);top:-16px;left:16px;width:100%;max-width:580px;height:100%;max-height:480px;border-radius:25px;background-color:rgba(255, 255, 255, 0.6)}
/* HOME */
.wrapperMain{position:relative;width:100%;max-width:1312px;margin:0 auto;padding:50px 16px 34px 16px}
	.inWrapp{padding-left:16px;padding-right:16px}
	h2{display:block;padding-left:16px;color:#00487b;padding-bottom:16px;font-size:2.8rem;line-height:1.071428em;font-family:'FiraBold', sans-serif;font-weight:600}
	.intro p{display:block;font-size:1.7rem;font-family:'FiraReg', sans-serif;font-weight:400;padding:0 16px 16px 16px;max-width:800px}
	.prezDev p{display:block;padding:0 16px 16px 16px}
	.flexiPrez{display:flex;flex-flow:row nowrap;gap:16px;position:relative;padding:16px 0 32px 0}
		.flexiPrez li{flex:0 1 25%;position:relative;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:12px;box-shadow:0 1px 8px rgba(10, 10, 10, 0.3);overflow:hidden}
			.boxGradient{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(0deg, rgba(18,18,18,1) 0%, rgba(18,18,18,0.1) 35%);opacity:0;transition:opacity ease 0.3s}
			.boxGradient a{position:absolute;bottom:-300px;left:0;display:block;transition:bottom ease 0.9s}
				div.logoFili{display:block;padding:16px}
				div.logoFili img{display:block;max-height:50px}
				div.nomFili{display:block;padding:0 16px;color:#fff;text-transform:uppercase;font-size:1.6rem;line-height:1em;font-family:'FiraBold', sans-serif;font-weight:600}
				div.tagFili{display:block;padding:4px 16px 16px 16px;line-height:1.1;font-size:1.4rem;color:#fff;font-family:'FiraSemiBold', sans-serif;font-weight:500}
		.flexiPrez li:hover .boxGradient{opacity:1;transition:opacity ease 0.3s}
		.flexiPrez li:hover .boxGradient a{bottom:0;transition:bottom ease 0.3s}
.fondGris{background-color:#f8f9f9}
.wrapperFull{width:100%;max-width:1312px;margin:0 auto;padding:34px 0 18px 0}
	.boxVal{display:flex;flex-flow:row nowrap}
		.primeVal{flex:0 0 416px;padding:16px}
			.cta16{display:inline-block;margin:16px;text-transform:uppercase;border-radius:4px;overflow:hidden;color:#fff;font-size:1.4rem;line-height:1.142857em;font-family:'FiraSemiBold', sans-serif;font-weight:500}
			.cta16 a{display:block;padding:8px 16px;text-align:center}
			.colorBlue{background-color:#00487b;transition:background-color ease 0.3s}
			.colorBlanc{background-color:#fff;color:#00487b;transition:background-color ease 0.3s}
			.cta16:hover{background-color:#bd1c26;transition:background-color ease 0.3s}
			.cta16.colorBlanc:hover{color:#fff}
		.secondVal{flex:1 1 auto;padding:16px 16px 0 16px}
			.flexiVal{columns:2 auto;column-gap:16px}
			.flexiVal li.parcolo{display:inline-block;padding:0 16px 16px 16px}
			.flexiVal li.parcolo p{display:block;padding:0 0 16px 0}
			h3{display:block;color:#00487b;text-transform:uppercase;padding-bottom:8px;font-size:1.8rem;line-height:1.111111em;font-family:'FiraBold', sans-serif;font-weight:600}
.boxVideo{padding:50px 16px;margin:16px 0;background-color:#f8f9f9;border-radius:12px;box-shadow:0 1px 8px rgba(10, 10, 10, 0.2)}
.bloc_video{width:100%;max-width:604px;margin:0 auto}
.bloc_video .video{width:100%;height:auto}
.video_youtube{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%} 
.video_youtube iframe, .video_youtube object, .video_youtube embed{position:absolute;top:0;left:0;width:100%;height:100%}
.paravid{display:block;text-align:center;padding:16px 16px 0 16px;font-size:1.4rem;font-style:italic}
.boxMiniRef{display:flex;flex-flow:row wrap;gap:8px}
	.boxMiniRef li{flex:1 1 30%;padding:16px 8px;margin:0 8px;border-bottom:1px solid #999}
		.boxMiniRef h2{display:block;color:#121212;padding-left:0;padding-bottom:8px;font-size:1.8rem;line-height:1.111111em;font-family:'FiraSemiBold', sans-serif;font-weight:500}
		.boxMiniRef span{display:block;color:#00487b;padding-bottom:8px;font-size:1.4rem;line-height:1.142857em;font-family:'FiraBold', sans-serif;font-weight:600}
		.boxMiniRef p{font-size:1.4rem;line-height:1.142857em}
/* Groupe */
.texteCol{columns:2;column-gap:48px;padding:0 16px}
	.texteCol p{display:block;padding:0 0 16px 0}
	.texteCol.forcePara p{display:inline-block}
	.texteCol.forcePara a{font-size:1.8rem;text-transform:uppercase;font-family:'FiraBold', sans-serif;font-weight:600;color:#00487b;}
.flexiTerview{display:flex;flex-flow:row wrap;gap:16px}
.flexiTerview li{flex:0 1 calc(50% - 8px);padding:0;margin:32px 0 16px 0;position:relative;border-radius:12px;box-shadow:0 1px 8px rgba(10, 10, 10, 0.3);overflow:hidden}
.flexiCle{display:flex;flex-flow:row wrap;gap:16px;padding:16px 0;justify-content:center;margin:24px 0 16px 0}
	.flexiCle li{flex:0 1 auto;padding:32px;background:#00487b;text-align:center;color:#fff;box-shadow:0 1px 8px rgba(10, 10, 10, 0.3);border-radius:4px;overflow:hidden}
	.flexiCle li:nth-child(even){background:#dad9df;color:#00487b}
		.boxCle{font-family:'RobotoSlab', serif;font-weight:800;font-size:4.4rem}
		.boxCle span{display:inline-block}
		.boxInfo{padding:32px 0 0 0;width:100%;max-width:160px;font-size:1.4rem;line-height:1.142857em}
#thePush{padding:16px 0;background-position:center center;background-repeat:no-repeat;background-size:cover;background-color:#012345}
	.centragePush{width:100%;max-width:800px;padding:50px 32px;margin:0 auto;color:#fff}
	.centragePush h3{display:block;text-align:center;padding-bottom:8px;color:#fff;font-size:2.8rem;text-transform:unset;line-height:1.1em;font-family:'FiraBold', sans-serif;font-weight:600}
	.centragePush p{display:block;text-align:center;padding-bottom:0}
/* filiales */
.fily{display:flex;flex-flow:row nowrap;gap:16px;align-items:center}
	.filyImg{flex:0 0 64px;padding:0}
		.filyImg img{display:block;width:100%;max-width:64px;height:auto}
	.filyH3{flex:1 1 auto}
.flexiFiliale{display:flex;flex-flow:row wrap;gap:16px;padding:16px 0}
	.flexiFiliale li{flex:0 1 calc(50% - 8px);padding:0 16px}
		.fondfili{width:100%;padding:32px 0;margin-bottom:16px;background:#f9f9f9;box-shadow:0 1px 8px rgba(10, 10, 10, 0.1);border-radius:12px;overflow:hidden}
			.fondfili div.logoFili{padding:0 16px}
		.infofili{color:#121212}
		.infofili p{padding:0 16px 16px 16px}
		.infofili span{font-size:1.5rem;padding:16px 16px 0 16px}
		.infofili a{color:#00487b;font-family:'FiraSemiBold', sans-serif;font-weight:500}
			.nomForFili{display:block;padding:0 16px;text-transform:uppercase;color:#00487b;font-size:2.4rem;line-height:1;font-family:'FiraBold', sans-serif;font-weight:600}
			.tagForFili{display:block;padding:4px 16px 16px 16px;line-height:1.1;font-size:1.7rem;color:#00487b;font-family:'FiraSemiBold', sans-serif;font-weight:500}




/* FOOTER 
========================================================================== */
.h3prefooter{display:block;color:#00487b;text-align:center;text-transform:uppercase;padding-bottom:8px;font-size:1.8rem;line-height:1.111111em;font-family:'RobotoSlab', sans-serif;font-weight:800}
.introPrefoo{display:block;text-align:center;padding:0 16px 16px 16px;max-width:800px;margin:0 auto}
.introPrefoo a{text-decoration:underline}
.flexiPrefoo{display:flex;flex-flow:row wrap;padding-top:16px;justify-content:center}
	.flexiPrefoo li{flex:0 0 33.333333%;position:relative;padding:16px 16px 64px 16px}
		.ctaPreFoo{position:absolute;left:112px;bottom:0;display:inline-block;padding:8px 16px;margin:16px;text-transform:uppercase;text-align:center;border-radius:4px;overflow:hidden;color:#fff;font-size:1.4rem;line-height:1.142857em;font-family:'FiraSemiBold', sans-serif;font-weight:500;transition:background-color ease 0.3s}
		.ctaPreFoo:hover{background-color:#bd1c26;transition:background-color ease 0.3s}
		.flexiPre{display:flex;flex-flow:row nowrap}
			.preCol01{flex:0 0 96px;padding:0 16px 0 0}
				.preCol01{max-width:96px;margin:0 auto}
			.preCol02{flex:1 1 auto}
				.preCol02 h4{display:block;color:#00487b;padding-left:16px;padding-bottom:8px;font-size:1.8rem;line-height:1.111111em;font-family:'FiraSemiBold', sans-serif;font-weight:500}
				.preCol02 p{display:block;padding-left:16px}
#theBigFooter{padding:50px 32px;background-position:center center;background-repeat:no-repeat;background-size:cover;background-color:#012345}
	.fooAdress{display:block;width:100%;max-width:400px;padding:0 16px 24px 16px;margin:0 auto;text-align:center;color:#fff;font-size:1.4rem;line-height:1.142857em;font-family:'FiraRegular', sans-serif;font-weight:400}
		.fooLogo{max-width:132px;margin:0 auto 16px auto}
	.linkExt{display:block;text-align:center;padding:24px 16px 0 16px}
	.linkExt li{display:inline-block;color:#fff}
	.linkExt li a{color:#fff;display:block;padding:0 2px;text-transform:uppercase;font-family:'FiraSemiBold', sans-serif;font-weight:500}
	.linkExt li a:hover{color:#bd1c26}
.postFooter{text-align:center;padding:16px;background:#012345;color:#fff;text-decoration:none;font-size:1.4rem;line-height:1.142857em;font-family:'FiraSemiBold', sans-serif;font-weight:500}






/* MEDIA QUERIES
========================================================================== */

/* max 1024px */
@media screen and (max-width:64em){
/*header{background:lightsalmon}*/
.primeVal{flex:0 0 33.333333%}
.secondVal{flex:0 0 66.666666%}
#flexiReaImg{flex:0 0 40%}
.flexiReaTxt{flex:0 0 60%}
.ctaPreFoo{left:70px}
.preCol01{flex:0 0 64px}
.preCol02{flex:1 1 auto}
.preCol02 h4{font-size:1.7rem;line-height:1.117647em}
.preCol02 p{font-size:1.5rem;line-height:1.133333em}
.imgMet{flex:0 0 calc(40% - 8px)}
.imgMet img{min-width:unset}
.txtMet{flex:1 1 auto}
}
/* max 960px */
@media screen and (max-width:60em){
/*header{background:pink}*/
.flexiMenu li a{padding:8px}
header.stuck .flexiMenu li{padding:17px 0 0 0}
.boxVal{flex-flow:row wrap}
.primeVal,.secondVal{flex:0 0 100%}
.primeVal .intro p{max-width:1200px}
.flexiVal{columns:3 auto}
.flexiPrefoo{justify-content:center}
.flexiPrefoo li{flex:0 0 100%}
.ctaPreFoo{left:50%;margin:16px 0;transform:translateX(-50%)}
.flexiPre{flex-flow:row wrap}
.preCol01{flex:0 0 100%;padding:16px}
.preCol02{flex:0 0 100%}
.preCol02 h4{text-align:center;padding:0 16px 8px 16px}
.preCol02 p{max-width:400px;margin:0 auto;text-align:center;padding:0 16px}	
.texteCol{columns:1;column-gap:unset}
.texteCol p{display:block;padding:0 0 16px 0}
.flexiTerview{display:flex;flex-flow:row wrap;gap:unset}
.flexiTerview li{flex:0 0 100%;padding:0;margin:16px 0}
.flexiFiliale{gap:unset}
.flexiFiliale li{flex:0 0 100%;padding:16px}
.flexiMise li{flex:0 1 calc(50% - 8px)}
.boxdesrefe li{flex:0 1 calc(50% - 8px)}
}
/* max 800px */
@media screen and (max-width:50em){
/*header{background:yellow}*/
.flexiPrez{flex-flow:row wrap}
.flexiPrez li{flex:0 1 calc(50% - 8px)}
.flexiPrez li .boxGradient{opacity:1;transition:opacity ease 0.3s}
.flexiPrez li .boxGradient a{bottom:0;transition:bottom ease 0.3s}
.flexiVal{columns:2 auto}
.boxMiniRef{flex-flow:row wrap;gap:unset}
.boxMiniRef li{flex:0 0 100%;padding:16px 8px;border-bottom:1px solid #999}
.rea01,.rea02{flex:0 0 100%}
.rea02{padding-left:0}
#flexiReaImg{flex:0 0 30%}
.flexiReaTxt{flex:0 0 60%}
.flexiCle li{flex:0 0 calc(50% - 8px)}
.boxInfo{max-width:unset}
.boxMet{flex-flow:row wrap;gap:unset}
.imgMet,.txtMet{flex:0 0 100%}
.txtMet{padding:32px 0 16px 0}
.flexiVali{gap:unset}
.flexiVali li{flex:0 0 100%}
.flexiVali li:last-child{padding-top:32px}
}
/* max 768px */
@media screen and (max-width:48em){
/*header{background:peru}*/
.lockscroll{overflow:hidden}
#menutech{z-index:997;display:block}
header,.wrapperHeader{height:68px}
.bulk,.bulk.stick{height:67px;transition:height ease 0.3s}
header.stuck .itemLogo, .itemLogo{flex:0 1 124px;padding:0 16px 0 0;transition:flex-basis ease 0.3s}
.flexiMenu li{padding:17px 8px 0 8px}

.itemHambi{display:initial;flex:1 1 auto;padding:2px 0 0 16px;align-self:center}
#theburger{float:right}
.tetiere{margin-bottom:100px}
.tetiere,#wrapperTetiere{height:auto;overflow:initial}
#imgTetiere{position:relative;height:auto;width:100%;min-width:100%;min-height:initial;background-position:top center;background-repeat:no-repeat;background-size:130%}
.wibkg01,.wibkg02,.wibkg03{display:none}
.encartFixe{width:calc(100% - 32px);margin:0 16px;max-width:none;padding:32px 16px;position:relative;z-index:900;left:calc(50% - 16px);bottom:-150px;transform:translateX(-50%);border-radius:25px;background-color:#fff}
.encartFixe h1{font-size:calc(2rem + 2vw);line-height:1}
}
/* max 678px */
@media screen and (max-width:42em){
/*header{background:bisque}*/
.boxVideo{padding:32px 16px}
.flexiMise li{flex:0 0 100%}
.exoInfo{position:relative;padding:16px 16px 0 16px;left:unset;top:unset}
.exoInfo h3,.exoInfo span{color:#121212}
.infoReff{padding:8px 16px 16px 16px}
.boxdesrefe li{flex:0 0 100%}
}
@media screen and (max-width:37em){
/*header{background:teal}*/
.encartFixe{bottom:-125px}
.flexiVal{columns:1 auto}
.secondVal{padding-top:0}
#flexiReaImg{flex:0 0 40%}
.flexiReaTxt{flex:0 0 60%}
.flexiCle{gap:unset}
.flexiCle li{flex:0 0 100%;margin-bottom:16px}
.flexiCle li:last-child{margin-bottom:0}
.flexiImageVal{gap:unset;padding:0}
.flexiImageVal li{flex:0 0 100%;padding:16px 0}		
}
/* max 512px */
@media screen and (max-width:32em){
/*header{background:orange}*/
.flexiPrez{flex-flow:row wrap;justify-content:center}
.flexiPrez li{flex:0 0 88%}
}