/***** banner *****/
.banner  						          { position: relative; display: grid; grid-template-columns: 475px 100%; align-items: center; column-gap: 80px;}
.banner .photos   						{ position: relative; z-index: 5; }
.banner .photos img  					{ width: 100%; height: auto; object-fit: cover; display: block;}

.banner .texte 							  { position: relative;}
.banner .texte .titre_main 		{ max-width: 11em;}
.banner .texte .chapo 			  { max-width: 26.7em;}

@media (min-width: 1001px) {
.banner                         { width: 100%; margin-right: 0;}
.banner .photos img                     { border-radius: var(--border-radius) 0 0 var(--border-radius);}
}

@media (max-width:1200px) {
.banner  						             { column-gap: 40px; grid-template-columns: 400px 100%;}
}

@media (max-width:1000px) {
.banner  						            { grid-template-columns: 1fr; grid-gap: 45px; width: 100%;}
.banner .texte 							    { grid-area: 2; max-width: 750px; width: 90vw; margin-inline: auto;}
.banner .photos img             { border-radius: var(--border-radius);}
.banner .texte .chapo 			    { margin-bottom: 20px; max-width: 100%;}
.banner .texte .titre_main 		  { max-width: 100%;}
}
@media (max-width:700px) {
.banner  						            { grid-template-columns: 1fr; grid-gap: 20px;}
.banner .texte 							    { width: 85vw;}
.banner .devis                  { text-align: left; line-height: 50px; height: 50px; width: 100vw; margin-left: -7.5vw; border-radius: 0; padding-inline: 7.5vw; }

}

@media (max-width: 400px) {
.banner .devis span             { margin-right: 40px; }
}





/***** services *****/
.services                               { position: relative; display: grid; grid-template-columns: 37.15fr repeat(2, 31.4fr); grid-gap: 20px; margin: 80px 0 92px;}
.services .item                         { position: relative;}
.services .row                         	{ position: relative; height: 100%; padding: 40px 50px; border-radius: var(--border-radius); background: var(--second-color); transition: all 400ms ease-in-out;}
.services-item__header                  { display: flex; align-items: center; gap: 40px;}
.services-item__img                     { height: 82px; width: auto;}
.services .row .sous_titre              { color: var(--text-color); font-size: 20px; line-height: 1.4; font-weight: 500; margin-bottom: 0;}
.services .row .sous_titre span         { color: var(--main-color);}
.services .row p                  		  { font-size: 16px; line-height: 1.5;}
.services-item__link                   	{ margin-left: auto; display: block; transition: all .3s ease-in-out; width: 100px; height: 45px; text-align: right; }
.services-item__link img                { scale(1.2); }
.services .photo                        { grid-row: span 4; padding: 0 40px 0 0; background: none; border: none;}
.services .photo .mini_titre            { margin-bottom: 0;}
.services .photo img                    { width: 100%; border-radius: var(--border-radius); margin-block: 55px 24px; height: auto;}
.services .devis                        { height: auto; font-size: 26px; line-height: 1.4; text-align: center; text-transform: none; padding-block: 40px; width: 100%; border-radius: var(--border-radius);}
.services .devis:after                  { content: ''; display: block; background: url("../images/arrow_link.svg") 50% / contain no-repeat; width: 54px; height: 18px;}
.services .devis span                   { text-align: center; display: inline-block; max-width: 14em;}

@media (min-width:1001px) {
.services-item__header                  { margin-bottom: 30px;}
.services-item__link                   	{ margin-top: 30px;}
.services-item__link:hover              { margin-right: -10px;}
.services .item--demenagement img       { margin-left: -10px;}
}
@media screen and (min-width: 1201px) {
.services .devis                        { flex-direction: column;}
.services .devis:after                  { margin: 15px auto 0;}
}

@media (max-width:1500px) {
.services .devis                        { font-size: 20px;}
}
@media (max-width:1400px) {
.services-item__img                     { height: 60px;}
.services .row                         	{  padding: 30px 30px;}

}
@media (max-width:1200px) {
.services                               { grid-template-columns: 1fr 1fr; margin: 80px 0;}
.services .photo,
.services .devis                        { grid-column: 1 / -1}
}
@media (max-width:1200px) {
.services                               { grid-template-columns: 1fr 1fr; margin: 80px 0;}
.services .photo,
.services .devis                        { grid-column: 1 / -1;}
.services .devis                        { gap: 30px; text-align: center; padding: 40px 60px;}
.services .devis:after                  { width: 27px; height: 10px; margin: 15px auto 0 auto;}
}
@media (max-width:1000px) {
.services                               { grid-template-columns: 1fr; margin: 60px 0;}
.services .photo .sous_titre            { margin-bottom: 0;}
.services .row,
.services-item__header                  { display: grid; gap: 20px; align-items: center;}
.services .row                          { grid-template-columns: 1fr 27px; }
.services-item__header                  { grid-template-columns: 101px 1fr;}
.services .row p                        { display: none;}
.services-item__link,
.services-item__link img                { width: 100%}
}
@media (max-width:700px) {
.services                               { grid-gap: 10px; margin-block: 35px;}
.services .row,
.services .devis                        { padding: 18px 26px; border-radius: 5px;}
.services-item__header                  { grid-template-columns: 68px 1fr;}
.services .row .sous_titre              { font-size: 14px;}
.services .row p                        { display: none;}
.services-item__img                     { height: 40px;}
.services .devis                        { padding-block: 28px; font-size: 15px; }
}




.quote 								                  { position: relative; text-align:center; font: italic 30px/40px var(--title-font-family); background: var(--second-color); padding-block:120px 420px; letter-spacing: 0.007em; margin-bottom: -340px;}
.quote p 							                  { max-width:16.9em; margin:0 auto;}

.quote_wrapper                          { position: relative; width: fit-content; margin: 0 auto; z-index: 2;}
.quote img                              { position: absolute; top: -40px; right: -60px;  }

.about_and_job                          { --white-space: 80px; margin-bottom: 100px; z-index: 1;}
.home-about__link                       { margin-top: 20px;}
.home-about__logo                       { position: absolute; bottom: 10px; right: 0; height: 90%; z-index: -1; display: block;}
.photo_texte.about_and_job > div.photo_texte__top_texte > div > img   { width: 50%;}
.jobs__link                             { margin-top: 20px;}
.photo_texte.about_and_job > div.photo_texte__bottom_texte.home_cta { margin-left: -60px; }
@media (min-width: 701px) {
.about_and_job                          { padding-top: var(--white-space);}
.about_and_job:before,
.about_and_job:after                    { content: ''; position: absolute; top: 0; width: 100vw; z-index: -2;}
.about_and_job:before                   { height: calc(260px + var(--white-space)); background-color: var(--second-color); left: 50%; transform: translateX(-50%);}
.about_and_job:after                    { height: 100%; left: 30%; background-color: #fff; border-top-left-radius: var(--border-radius);}
}
@media (max-width: 1300px) {
.photo_texte.about_and_job > div.photo_texte__bottom_texte.home_cta { margin-left: -40px; --img-surplus: 15%;}
.photo_texte__bottom_texte { font-size: 18px; }
}
@media (max-width:1200px) {
.quote 								    { font-size: 24px; line-height: 36px; background: var(--second-color); padding-block: 80px 380px;}
}
@media (max-width:700px) {
.about_and_job                          { margin-bottom: 0px;}
.photo_texte__top_texte                 { margin-bottom: 30px;}
}

@media (max-width: 700px) {
#homepage .show_hide                    { margin-bottom: 70px;  }
.photo_texte.about_and_job > div.photo_texte__bottom_texte.home_cta { margin: 0; width: 100%;}
}




/*.bloc_cadeau .photo .boncadeau          { position: absolute; max-width: 250px; width: 100%; height: auto; bottom: 30px; left: 30px;}*/
.bloc_cadeau .photo .boncadeau          { position: absolute; max-width: 250px; width: 100%; height: auto; bottom: 30px; left: 30px;}