/* Design tokens — couleurs, typo, espacements, ombres, rayons */
@import url('tokens.css');

/*--------------------------------------------------------GENERAL SETTING----------------------------------------------------------------------*/
body
{
	max-width: 100%;
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	color: var(--color-gray-900);
}

h1, h2, h3, h4, h5, h6
{
	font-family: var(--font-heading);
	line-height: var(--leading-tight);
	font-weight: var(--weight-semibold);
}
.aboutUsBusiness, .ecoSpeech, .repairSpeech, .materialSpeech
{
	height: 600px;
	border-radius: var(--radius-md);
	line-height: var(--leading-normal);
	padding: var(--space-6);
	margin-top: var(--space-20);
}
.aboutUsWorker, .ecoAside, .repairAside, .materialAside
{
	height: 400px;
	border-radius: var(--radius-md);
	line-height: var(--leading-normal);
	padding: var(--space-6);
	margin-top: var(--space-20);
}


.mainContent
{
	margin-top: -20px;
}
/*--------------------------------------------------------PATTERN----------------------------------------------------------------------*/


.city,.navBanner a:hover,#topBtn,.mapFooter i:hover,.phoneFooter,.argumentFooter,.bannerMain i,.repairMain h1,.ecoMain h1
,.ecoArgument h2,.contactMain h1,.expertise,.aboutUsMain h1
{
	color: #ff6c00;  /*police couleur "ORANGé"*/
}
.price,.contactButton a,.contactButton a:hover
{
	background-color: #ff6c00; /*background couleur "ORANGé"*/
}
.contactOther  p,.menager,.repairPrice,.priceButton,#ecoLogo,#medal,.mapFooter i,.mapFooter
{
	color: #264379;/*police couleur "BLEUTé"*/
}
.contactContent h2,.classicPack h3, .secondPack h3,.labelSliderMain h3,.priceButton:hover,footer
{
	background-color: #264379; /*background couleur "BLEUTE"*/
}
footer,.bannerMainContent h1,.contactButton a:hover,.priceButton:hover,.labelSliderMain h3,
.classicPack h3, .secondPack h3,.contactContent h2,.phoneContact h3
{
	color: #fff; /*police couleur BLANC */
}
.aboutUsWorker,.ecoAside,.repairAside,.mapFooter,#stickyHeader,.ecoSpeech, .repairSpeech,.materialAside
{
	background-color:#fff;/*background couleur BLANC */
}
.logoSliderBox i,.icoSliderBox i,.formularyMessage,.contactOther h3,.contactContent label,.labelSliderMain,
.navBanner a,.aboutUsWorker, .ecoAside, .repairAside,.aboutUsBusiness, .ecoSpeech
{
	color: black;
}
.logoSliderBox i,.icoSliderBox i,.repairMain h2,.goodPrice,.bannerMainContent h1,.mapFooter i,.bannerMainContent h1.mapFooter i,
{
	font-size: 50px;	
}
.classicPack h3, .secondPack h3,.repairPrice,.labelSliderMain h3,.phoneFooter,.price h2,.side h3,.side h2,.eco h2
{	 
	font-size: 30px;	
}
.contactOther p,.contactContent button,.mapFooter,.navBanner li,.bannerMain i
{
	font-size: 25px;	
}
.green
{
	color: #32CD32;
}
.orange
{
	color: #ff6c00;
}
.yellow
{
	color: #fcc209;
}
.blue
{
	color: #264379;
}
.white
{
	color: #fff;
}
.black
{
	color: black;
}
/*--------------------------------------------------------HEADER — pages internes----------------------------------------------------------------------*/
.site-header-inner
{
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: var(--shadow-sm);
	border-bottom: 1px solid var(--color-gray-200);
}
/* Compatibilité ancienne règle header = sticky */
header
{
	font-family: var(--font-heading);
}
.navBanner ul
{
	display: flex;
	list-style-type: none;
	justify-content: flex-end;
	align-items: center;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
}
.navBanner a
{
	text-decoration: none;
}
/* Logo dans la nav pages internes */
.titleBlock
{
	display: flex;
	align-items: center;
	padding: var(--space-3) 0;
}
.titleBlock a img
{
	height: 46px;
	width: auto;
}
.test img
{
	width: 10%;
}
/*--------------------------------------------------------FOOTER----------------------------------------------------------------------*/
footer
{	
	border-top:2px solid black;
	height: 365px;
	position: relative;
}
footer li
{
	list-style-type: none;
}
#topBtn
{
	position: fixed;
	bottom: 150px;
    right: 5%;
    width: 50px;
    height: 50px;
    font-size: 75px;
    border: none;
    cursor: pointer;
    display: none;
}
.titleFooter
{
	font-size: 30px;
}
.templateFooter
{
	margin: 55px;
}
.mapFooter
{
	text-align: center;
}
.mapFooter img
{
	width: 40%
}
.mapFooter i
{

	padding-left: 18px;
    padding-right: 18px;

}
.mapFooter ul
{
	    padding: 20px;
}
.contactFooter
{
	border-left: 1px solid;
}
.contactFooter h2
{
	font-size: 35px;
	
	margin-bottom: 10px;
	margin-top: 0;
}

/*--------------------------------------------------------MAIN----------------------------------------------------------------------*/
.bannerMain
{
	font-family: var(--font-heading);
	height: 755px;
	
	
	
}
.bannerMain::before
{
	content: '';
	background-image:url("../images/main.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 1px solid black;	
	position: absolute;
	height: 755px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 1.2;
}

.bannerMainContent h1
{
	margin-top: 33%;
	position: relative;
}



.logoBlock{
	text-align: center;
}
.secondBannerMain 
{
	font-family: var(--font-heading);
}
.bannerMainContent h1
{
	margin-top: 33%;
}
.secondBannerMain
{
	margin-top: 70px;
	height: 550px;
	max-width: 100%;
}
.navBanner nav
{
	padding: 32px;
}

.price
{
	width: 55%;
	height: 560px;
	border-radius: 6px;
	line-height: 50px;
	padding: 10px;
}
.price h3
{
	font-size: 15px;
	line-height: 30px;
	text-align: center;
	color:  #264379;
	margin:-10px;
}
.price ul 
{
	font-size: 20px;
	list-style-type: none;
}
.blockPrice
{
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
	margin-bottom: 10px;
}
.blockPrice img
{
	width: 30%;
	height: 170px;
}
.price h2
{
	text-align: center;
	color: #fff;
	margin-top: 10px;
}
.price i
{
    padding-right: 15px;
}
.blockPrice a
{
	color: #264379;
	margin-bottom: 20px;
	width: 300px;
    margin-left: 40px;
    margin-right: 40px;
}
.goodPrice
{
margin: 20px;
	text-align: center;
}
.conditions
{
	line-height: 10px;
	padding-left: 40px;
}
 .eco,.side
{
	height: 470px;
	border-radius: 6px;
	margin-top: 15px;
	line-height: 60px;
	padding: 35px;
	
}
	
#medal
{
	position:absolute;
	top: 0;
	right: 20px;
	font-size: 75px;
}
.side i
{
	padding-right: 15px;
}
.side ul
{
	font-size: 15px;
	list-style-type: none;
	padding: 0;
}

.side h3
{
	text-align: center;
	margin: 24px;
}
#ecoLogo
{
	position:absolute;
	top: 100px;
	right: 100px;
	font-size: 95px;
}
.eco h2
{
	text-align: center;
}
.eco ul
{
	margin-top: 110px;
	font-size: 15px;
	list-style-type: none;
	padding: 0;
}
.eco i
{
	padding-right: 15px;
}
.contactButton a
{
	font-size: 18px;
}
 .side, .eco, .navBanner li {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
 .side:hover, .eco:hover {
/* L'image est grossie de 25% */
-webkit-transform:scale(1.06); /* Safari et Chrome */
-moz-transform:scale(1.06); /* Firefox */
-ms-transform:scale(1.06); /* Internet Explorer 9 */
-o-transform:scale(1.06); /* Opera */
transform:scale(1.06);
}
.navBanner li:hover {
/* L'image est grossie de 25% */
-webkit-transform:scale(1.2); /* Safari et Chrome */
-moz-transform:scale(1.2); /* Firefox */
-ms-transform:scale(1.2); /* Internet Explorer 9 */
-o-transform:scale(1.2); /* Opera */
transform:scale(1.2);
}
.labelSliderMain
{
	height: 280px;
    border-radius: 6px;
    line-height: 50px;
    padding: 35px;
    margin-top: 30px;
    margin-bottom: 50px;
}
.labelSliderMain h3
{
	text-align: center;
	margin-top: 10px;
	border-radius: 26px;
	padding: 10px;
    margin: 28px;
}
.navBanner img
{
	padding: 25px;
}
.roundButton
{	bottom: -173px;
    right: 903px;
    width: 100px;
    height: 100px;
    border: 2px solid black;
    border-radius: 50%;
    position: absolute;
}

/*--------------------------------------------------------REPAIR----------------------------------------------------------------------*/
.repairMain
{
	height: 1360px;
	font-family: var(--font-heading);	
}
.repairBanner
{
	background-image:url("../images/repair.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	height: 600px;
	border-bottom: 1px solid black;
}
.repairMain h1
{
	text-align: right;
    font-size: var(--text-hero);
    padding-top: var(--space-10);
    padding-right: var(--space-10);
    font-weight: var(--weight-bold);
}
.repairMain h2
{
	text-align: center;
	margin-bottom: 1%;
	width: 75%;
}
.repairAside
{
	margin-top: -110px;
	height: 170px;
	padding: 1%;
	display: flex;
}
.repairAside p
{
	font-size: 20px;
}
#myForm
{
	    width: 20%;
    margin: 1%;
        border: 3px solid #ff6c00;
    padding: 1%;
    border-radius: 3%;
}
#myForm input
{
	width: 100%;
	margin-bottom: 5%;
}
#message
{
	font-size: 45px;
}
.repairPic i
{
	font-size: 75px;
	margin: 15px;
}
.repairPic
{
	text-align: center;
}

.repairSpeech
{	
	position: relative; 
    height: 630px;
    width: 100%;
    padding:35px;

	display: flex;
	justify-content: space-between;
}
#map
{
	width: 500px;
	height: 300px;
}
.repairContent nav
{
	white-space:nowrap;
}
.repairContent nav img
{
	width: 130px;
}
.repairMain h3
{
	text-align: center;
}
.repairAsideBlock
{
	display: flex;
	flex-direction: column;
}
.repairAsideBlock h2
{
	font-size: 30px;
	margin-top: 1%;
}
.repairAsideBlock input,.repairAsideBlock p
{
	width: 80%;
	margin-left: 10%
}
.repairAsideBlock input
{
	margin-bottom: 1%;
}
.repairAside h3
{
	margin-bottom: 30px;
	margin-top: 10px;
}
.rightAside img
{
	height: 160px; 
}
.leftAside
{
	width: 45%;
	height: 560px;
	text-align: center;
	line-height: initial;
	text-align: center;
	margin-right: 28px;
	position: relative;
}
.leftAside label
{
	font-size: 17px;
}
.leftAside input {
    height: 28px;
    margin: 10px 0px 10px 0px;
    width: 100%;
}
#price
{
	color: blue;
    font-size: 20px;
}


.priceMessage
{
	margin: 30px;
}
.classicPack
{
	width: 200px;
	height: 400px;
	border: 2px solid #264379;
	border-radius: 5px;
	padding: 0;
	text-align: center;
}
.classicPack h3, .secondPack h3
{
	margin: 0; 
	padding:10px;
}
.secondPack
{
	width: 200px;
	height: 400px;
	border: 2px solid #264379;
	border-radius: 5px;
	padding: 0;
	text-align: center;
}
.repairPrice
{
	
	font-weight: bold;
	padding: 35px;
}
.repairPics
{
	width: 100%;
	height:100px;
}
.repairPic1,.repairPic2,.repairPic3
{
	text-align: center;
	font-size: 20px;
}
.packBlock
{	
	padding: 15px;
}
.repairPic1 img
{
	width: 29%;
}
.repairPic2 img
{
	width: 51%;
}
.repairPic3 img
{
	width: 42%;
}
.priceBlock
{
	display: flex;

}
.blockButton
{

	    position: absolute;
	    left: 0;
	    bottom: 0;
	    width: 100%
}
.blockButton a,.blockButton p
{
	margin-top: 1%;
	margin-bottom: 1%;
}
.priceButton
{
	    text-align: center;
    width: 100%;
}
.newBlockPrice {
    margin-top: 5%;
}
.prestige {
    border: 1px solid;
    width: 80%;
    margin: 5%;
}
.prestigePrice h2
{
	    margin-bottom: 5px;
}

.prestigePrice
{
	line-height: 20px;
}
.prestigePrice ul
{
	font-size: 14px;
}

.priceBlockBis
{
	display: flex;
	justify-content: space-around;
	
    margin: 4% 12% 4% 14%;
}

.priceBis
{
	height: 400px;
	border-radius: 10px;
    margin-top: 50px;
        padding: 1%;
       line-height: 170%; 
}
.priceBis a
{
	margin-top: 5%;
}
.priceBis i
{
	margin-right: 2%;
}
.priceBis h2, .priceBis h3,.priceBis  h4
{
	margin-top: 10px;
    text-align: center;
    line-height: 45px;
}
.priceBis ul
{
	padding: 15px;
	list-style-type: none;
}
.glPrice

{
	background-color: #ff6c00;
	color: #fff;
}
.priceSpeech
{
	padding: 5%;
}
.hglPrice
{
	    background-color: #264379;
	color: #fff;
}
.prestigePrice
{
	    background-color: #264379;
	color: #fff;
}
.priceBis h4 {
    font-size: 40px;
}
.separation
{
    width: 80%;
    border: 1px solid grey;
    margin-left: 10%;
    margin-bottom: 5%;

}
/*--------------------------------------------------------ECO----------------------------------------------------------------------*/
.ecoBanner
{
	background-image:url("../images/eco.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	height: 600px;
	border-bottom: 1px solid black;	
}
.ecoBanner img
{
	width: 300px;
	float: left;
	margin-right: 30%;
	box-shadow: 10px;

}
.ecoMain
{
	height: 1500px;
	font-family: var(--font-heading);
}
.ecoMain h1
{
	
    font-size: var(--text-hero);
    padding-top: var(--space-10);
    padding-right: var(--space-10);
    font-weight: var(--weight-bold);
    color: #fff;
}
.ecoAside
{
	margin-top: -110px;
	height: 170px;
}
.ecoAside h2
{
	text-align: center;
	font-size: var(--text-2xl);
	line-height: var(--leading-snug);
}
.ecoSpeech
{
	display: flex;
	justify-content: space-between;

    padding: 20px;
}
.ecoArgument
{
	width: 51%;
	height: 560px;
	text-align: center;
	padding: 2%;
}
.ecoArgument p
{
    line-height: 25px;
    text-align: justify;

}
.ecoArgument li
{
	list-style-type: none;
	text-align: justify;
}
.ecoArgument ul
{
	padding: 0;
}
.ecoArgument h3 {
    margin-top: 10px;
    margin-bottom: 25px;
}
.ecoDesign
{
	width: 35%;
	height: 560px;
	background-image: url("../images/ecoAside.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	margin: 6%;
}
.ecoSystemBlock {
    height: 50%;
    width: 50%;
    margin-left: 50%;
}
/*--------------------------------------------------------MATERIAL---------------------------------------------------------------------*/
.materialBanner
{
	background-image:url("../images/material.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	height: 600px;
	border-bottom: 1px solid black;	
}
.materialBanner img
{
	width: 300px;
	float: left;
	margin-right: 30%;
	box-shadow: 10px;

}
.materialMain
{
	height: 1500px;
	font-family: var(--font-heading);
}
.materialMain h1
{
	
    font-size: var(--text-hero);
    padding-top: var(--space-10);
    padding-right: var(--space-10);
    font-weight: var(--weight-bold);
}
.materialAside
{
	margin-top: -110px;
	height: 170px;
}
.materialAside h2
{
	text-align: center;
	font-size: var(--text-2xl);
	line-height: var(--leading-snug);
}
.materialSpeech
{
	display: flex;
	justify-content: space-between;

    padding: 20px;
}
.materialArgument
{
	width: 51%;
	height: 560px;
	text-align: center;
	padding: 2%;
}
.materialArgument p
{
    line-height: 25px;
    text-align: justify;

}
.materialArgument li
{
	list-style-type: none;
	text-align: justify;
}
.materialArgument ul
{
	padding: 0;
}
.materialArgument h3
{
	margin-top: 15px;
    margin-bottom: 25px;
}
.materialDesign
{
	width: 48%;
	height: 560px;
	background-image: url("../images/materialAside.jpg");
	background-repeat: no-repeat;
	background-size: contain;
}
.materialMain h1 {
    height: 50%;
    width: 38%;
    margin-left: 62%;
}
/*--------------------------------------------------------ABOUT US----------------------------------------------------------------------*/
.aboutUsMain
{
	height: 1500px;
	position: relative;
	font-family: var(--font-heading);


}
.aboutUsBanner
{
	position: relative;	
	height: 600px;
	border-bottom: 1px solid black;	
	
}
.aboutUsBanner::before {    
      content: "";
      background-image: url("../images/aboutUs.jpg");
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
}

.aboutUsMain h1
{
	position: relative;
	text-align: right;
    font-size: var(--text-hero);
    padding-top: var(--space-10);
    padding-right: var(--space-10);
    font-weight: var(--weight-bold);	
}
.aboutUsWorker
{
	position: relative;
	margin-top: -110px;
	height: 170px;
}
.aboutUsWorker h2
{
	text-align: center;
	font-size: var(--text-2xl);
	line-height: var(--leading-snug);
}
.menager
{
	font-weight: bold;
}
.aboutUsBusiness
{
	position: relative; 
    height: 700px;
    width: 100%;
    

    padding: 20px;
	display: flex;
	justify-content: space-between;
}
.aboutUsArgument
{
	width: 51%;
	height: 560px;
	text-align: center;
	    padding: 2%;
}
.aboutUsArgument ul
{
	padding: 0;
}
.aboutUsArgument p
{
	line-height: 34px;
	line-height: 25px;
    text-align: justify;
}
.aboutUsArgument h3
{
	margin-top: 20px;
    margin-bottom: 25px;
}

.aboutUsArgument li
{
	list-style-type: none;
}
.aboutUsDesign
{
	width: 42%;
	height: 560px;
	background-image: url("../images/aboutUsAside.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	margin: 3%;
}
/*--------------------------------------------------------CONTACT----------------------------------------------------------------------*/
.contactBanner
{
	background-image:url("../images/join.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	height: 600px;
	border-bottom: 1px solid black;
}
.contactMain
{
	height: 1360px;
	font-family: var(--font-heading);
}
.contactMain h1
{
	text-align: right;
    font-size: var(--text-hero);
    padding-top: var(--space-10);
    padding-right: var(--space-10);
    font-weight: var(--weight-bold);
}

.contactContent h2
{
	padding: 25px;
	margin:0;
	text-align: center;
	border-radius: 10px 10px 0px 0px;
}
.contactOther
{
	height: 340px;
	border-radius: 6px;
	line-height: 50px;
	margin-top:60px; 
	padding: 0;
	text-align: center;
	border-radius: 0px 0px 10px 10px;
}
.contactOther img
{
	width: 97%;
	margin-top: 80px;
}
.contactFormulary
{
	height: 620px;
	border-radius: 6px;
	line-height: 50px;
	padding: 1px;
	margin-top:60px; 
	border-radius: 0px 0px 10px 10px;
}
.contactContent form
{
	padding: 35px;
}
.questionMail input
{
	width: 50%;
	margin-left: 20px;
}
.questionName input,.questionFirstName input
{
	width: 90%;
}
.questionPhone input
{
	width: 30%;
}
.questionBlock1
{
	display: flex;
	margin-bottom: 15px;
}
.questionContent textarea
{
	width: 100%;
}
.contactContent button
{
	margin-top: 20px;
	height: 60px;
	background-color: #ff6c00;
}
.contactOther  p
{
    line-height: 30px;
}
.contactOther h3
{

	font-size: 35px;
	margin-top: 45px;
}
.questionName
{
	width: 50%;
}
.questionFirstName
{
	width: 50%;
}
.questionMail 
{
	width: 50%
}
.questionPhone
{
	width: 50%
}
.questionMail input
{
	width: 90%;
	margin:0;
}
.questionPhone input
{
	width: 90%;
	margin:0;
}
.questionFirstName input
{
	width: 90%;
}
.contactContent button
{
	width: 100%;
}
.contactAdress
{
	margin-top: 70px;
}
.formularyMessage
{
    line-height: 24px;
}
#questionMessage
{
	font-size: 20px;
}
.contactContent
{
	display: flex;
}
/*--------------------------------------------SLIDER------------------------------------------------------------------------*/
.logoSlider, .icoSlider
{
	overflow: hidden;
	width: 1000px;
}
.logoSlider ul, .icoSlider ul
{
	width: 2000px;
}
.logoSlider img
{
	width: 118px;
}
.logoSlider li
{
	padding-right: 10px;
	padding-left: 10px;
}
.logoSliderBox,.icoSliderBox
{
	display: flex;
}

.icoSlider img
{
	width: 100px;
}
.icoSlider li
{
	padding-left: 20px;
	padding-right:20px;
}
.icoSliderBox i
{
	padding-top: 25px;
}
.carousel-control.left,.carousel-control.right  {background:none;width:25px;}
.carousel-control.left 
{
	left:-25px;
	color: black;
}
.carousel-control.right {
	right:-25px;
	color: black;
}

.zmin {
    z-index: 1;
}
.person-text {
    padding: 10px 0 0;
    text-align: center;
    z-index: 2;
}
.rel {
    position: relative;
}
.slide img
{
	width: 100px;
}
/*--------------------------------------------Recherche code postal------------------------------------------------------------------------*/

input[type="text"],input[type="email"],
select.form-control {
  background: transparent;
  border: none;
  border-bottom: 1px solid #000000;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
}
input[type="text"]:focus,input[type="email"]:focus,
select.form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}


@media screen and (min-width: 2000px) {

		footer {
    	height: 388px;
		}

}

@media screen and (min-width: 1312px) and (max-width: 1750px ){
	
		footer
		{
			height: 400px;
		}
		.contactButton a {
        font-size: 16px;
		}
	.mapFooter img {
    margin: 20px;
    min-width: 60%;

}
.priceBis {
    line-height: 135%;
}



}
@media screen and (min-width: 992px) and (max-width: 1311px ){
		.contactButton a{
   		 font-size: 12px;
   		 margin: 0;
		}
footer {
    height: 398px;
}
.contactFooter h2 {
    font-size: 24px;
    margin-bottom: 30px;
}
footer {
    height: 270px;
}
.templateFooter {
    margin: 15px;
}
.phoneFooter{
    font-size: 22px;
}
.price {
    line-height: 38px;
}
.contactContent form {
    padding: 15px;
}
.contactFormulary,.contactOther  {
    height: 600px;
}
.contactOther p{
    font-size: 16px;
}
.mapFooter img {
    margin: 10px;
    min-width: 60%;
}
.mapFooter
{
	font-size: 18px;
}
.prestigePrice {
    height: 510px;
}
.hglPrice {
    height: 510px;
}
.aboutUsBusiness {
    height: 820px;
}
.aboutUsMain {
    height: 1600px;
}
}	

@media screen and (min-width: 768px) and (max-width: 991px ){
    /* Règles nav supprimées (.templateMenu li, .templateMenu ul, .templateMenu img,
       .templateMenu nav, #navTitle) — conflit résolu avec .site-header */
    .aboutUsWorker h2 {
        font-size: 30px;
    }
    .contactFooter h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .templateFooter {
        margin: 16px;
    }
    .mapFooter img {
        margin: 5px;
        min-width: 85%;
    }
    footer {
        height: 294px;
    }
    .phoneFooter {
        font-size: 20px;
    }
    .mapFooter {
        font-size: 20px;
    }
    .blockPrice img {
        display: none;
    }
    .price ul {
        font-size: 17px;
        list-style-type: none;
        padding: 0;
    }
    .repairAside p {
        font-size: 14px;
    }
    .repairPic i {
        font-size: 60px;
    }
    #message {
        font-size: 32px;
    }
    .prestigePrice {
        height: 510px;
    }
    .priceBis {
        height: 600px;
    }
    .priceBis a {
        font-size: 13px;
    }
    .aboutUsBusiness {
        height: 855px;
    }
    .aboutUsMain {
        height: 1650px;
    }
    .materialMain h1 {
        height: 50%;
        width: 49%;
        margin-left: 51%;
        color: #fff;
    }
}


@media screen  and (max-width: 767px ){
	.repairBanner {
    background-image: url(../images/repair.jpg);
}
	.repairMain h1 {
    text-align: center;
    font-size: 39px;
    padding-right: 0; 
}
	.priceBlock {
    display: flex;
    flex-direction: column;
}
.leftAside,.price {
    width: 100%;
}
	.repairMain {
    height: 1800px;
    font-family: var(--font-heading);
}
.repairPicOff{
	display: none;
	}
.price{
	min-width: 100%;
    margin: 0;
    line-height: 40px;
}
.blockPrice img {
    display: none;
}
.price ul {
    font-size: 12px;
    list-style-type: none;
    padding: 0;
}
.conditions {
    line-height: 10px;
    padding-left: 13px;
    font-size: 10px;
	}
	.repairSpeech {
	    height: 1030px;
	}
		.templateFooter {
	    margin: 35px;
	}
	.contactFooter {
	    border-left: 0px solid;
	}
		footer {
	    height: 585px;
	}
	.mapFooter{
    font-size: 22px;
}
.mapFooter img {
	min-width: 65%;
    margin: 5px;
}
	.contactFooter ul{
		padding: 0;
	}
	.contactFooter h2 {
    font-size: 24px;
	}
		.phoneFooter{
	    font-size: 30px;
	}
	h4 {
    font-size: 15px;
	}
	.templateMenu li{
	    font-size: 8px;
	    margin: 0;
	}
	.templateMenu ul{
	    padding: 0;
	}
	.contactButton a {
	    font-size: 6px;
	}
	.templateMenu nav {
    padding: 2px 12px 2px 12px;
}
	.templateMenu {
	    padding: 2px;
	    height: 145px;
	}
	.titleBlock {
	    text-align: center;
	    margin: 15px;
	}
	#navTitle{
		font-size: 20px;
	}
	#navTitle p{
		font-size: 10px;
}
.priceButton {
    width: 92%;
}
.repairBanner {
    background-image: url(../images/repairResize.jpg);
}
.ecoSystemBlock {
    height: 50%;
    width: 100%;
    margin-left: 0;
    text-align: center;
}
.ecoMain h1 ,.aboutUsMain h1,.contactMain h1{
    font-size: 29px;
    padding-top: 40px;
     padding-right: 0px; 
    font-weight: bolder;
    text-align: center;
}
.ecoBanner img {
    width: 207px;
    float: inherit;
    margin-right: 0; 
}
.ecoBanner {
    background-image: url(../images/ecoresize.jpg);
}
.ecoAside h2,.aboutUsWorker h2 {
    font-size: 14px;
    margin: 0;
}
.ecoSpeech,.aboutUsBusiness {
     height: 1420px;
    border-radius: 6px;
    line-height: 50px;
    padding: 25px;
    margin-top: 80px;
    flex-direction: column;
}
.ecoArgument,.aboutUsArgument {
    width: 100%;
    height: 1030px;
}
.aboutUsMain {
    height: 2280px;
}
.ecoDesign,.aboutUsDesign {
    width: 100%;
}
.contactMain {
    height: 1800px;
}
.contactOther p{
    font-size: 18px;
}
.contactAdress {
    margin-top: 50px;
}
.contactFormulary {
	    height: 470px;
    margin-top: 180px;
    width: 92%;
    margin-left: 4%;
}
.contactOther img {
    width: 100%;
    margin-top: 18px;
}
.contactContent form {
    padding: 5px;
    line-height: 30px;
}
.contactOther {
    height: 400px;
    width: 92%;
    margin-left: 4%;
}
.contactContent{
	flex-direction: column;
}
#message {
    font-size: 20px;
}	
#myForm {
    width: 32%;
    margin: 3%;
}
.repairAside {
    padding: 6%;
}
.priceBlockBis {
    flex-direction: column-reverse;
}
.priceBis a {
    width: 100%;
}
.repairMain {
    height: 2155px;
}
.contactFooter {
    margin: 5% 0% 5% 0%;
    padding: 0;
}
.copyright
{
	margin: 2%;
}
.priceBis {
    height: 440px;
}
.materialMain h1 {
    height: 50%;
    width: 49%;
    margin-left: 51%;
    color: #fff;
}
.materialMain h1 {
    font-size: 30px;
    padding-right: 0px;
    color: #fff;
}
.materialAside h2 {
    font-size: 15px;
    line-height: 27px;
}
.materialSpeech {
    flex-direction: column;
}
.materialArgument {
    width: 100%;
    height: 740px;
}
.materialMain {
    height: 1900px;
}
.materialSpeech {
    height: 1040px;
    border-radius: 6px;
    line-height: 50px;
    padding: 25px;
    margin-top: 80px;
}
.materialDesign {
    width: 100%;
}
.materialBanner
{
	background-image: url(../images/materialResize.jpg);
}
.formulary
{
	font-size: 10px;
	padding: 2%;
}
.ecoSpeech {
    height: 1100px;
}
.ecoDesign
{
	margin: 0;
	height: 270px;
}
.ecoArgument
{
	height: 750px;
}
.ecoMain{
    height: 1920px;
}
/* ================================================================
   FOOTER — copyright et CTA (pages internes)
   ================================================================ */
.copyright {
    text-align: center;
    background-color: var(--color-blue-dark);
    padding: var(--space-4) var(--space-6);
}
.copyright p {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--text-sm);
}
.footer-cta-title a {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-white);
    text-decoration: none;
    margin-bottom: var(--space-4);
    line-height: var(--leading-snug);
}
.footer-cta-title a:hover {
    color: var(--color-orange);
}