/***** banner *****/
.banner                         {  position: relative; overflow: hidden;}
/*.banner .img                     { }*/
.banner img                     { height: 80vh; max-height: 1200px; min-height: 720px; object-fit: cover; width: 100%; display: block;}
.banner .titre_main             { color: #fff; font-size: 50px; line-height: 60px;}
.banner .sous_titre             { font: 700 14px/1.5 var(--font-family); letter-spacing: 1.6px; text-transform: uppercase; color: var(--second-color); background-color: var(--main-color); margin: 0 auto 12px; padding: 10px 26px; width: fit-content;}
.banner_titre                   { position: absolute; left: 0; top: 0; height: 100%; width: 100%; display: grid; justify-content: center; align-items: center; text-align: center;}
.banner .icone                  { position: absolute; bottom: 0; right: 0; background-color: #f7f2ec; width: 50%; padding: 10px 0 0 10px;}
.banner .devis                  { position: relative; z-index: 0; display: grid; align-items: center; padding-inline: 110px 36px; font: 700 20px/40px var(--font-family); color: var(--second-color); height: 90px; width: fit-content;}
.banner .devis::before          { content: ""; position: absolute; width: 90px; height: 90px; background:url(../images/link.svg) no-repeat center / 26px var(--second-color); left: 0; top: 0;}
.banner .devis::after           { content: ""; position: absolute; z-index: -1; width: 0; height: 100%; background: var(--second-color); left: 0; top: 0; transition: 400ms ease-in-out;}
.banner .devis b                { text-transform: uppercase; padding-right: 30px; background: url(../images/link_arrow_blue.svg) no-repeat center right; transition: all ease-in-out 400ms; font-weight: inherit;}
.banner .icone:after            { content: ""; position: absolute; width: 100px; height: 100px; background: transparent; top: -100px; right: 0; box-shadow: 20px 20px #f7f2ec;}
.banner .icone:before           { content: ""; position: absolute; width: 100px; height: 60px; background: transparent; bottom: 0; left: -100px; box-shadow: 20px 20px #f7f2ec;}
@media (min-width:1200px) {
.banner .devis:hover            { color: #FFF}
.banner .devis:hover:after      { width: 100%;}
.banner .devis:hover b          { background-image: url(../images/link_arrow_yellow.svg);}
}

@media (max-width:1200px) {
.banner                         { padding-top: 100px;}
.banner img                     { height: auto; min-height: auto; max-height: 550px; }

}
@media (max-width:1000px) {
.banner_titre                   { display: none;}
.banner .icone                  { width: 70%; }
.banner .devis                  { height: 70px; padding-left: 80px;}
.banner .devis::before          { width: 70px; height: 70px;}
.banner .icone                  { padding: 7px 0 0 7px ;}
.banner .titre_main             { font-size: 40px; line-height: 40px;}
.banner .sous_titre             { font-size: 16px; line-height: 18px;}
}
@media (max-width:700px) {
.banner img                     { filter: brightness(1); max-height: auto; }
.banner                         { padding-top: 60px;}
.banner .icone                  { display: none;}
}

/***** atout *****/ 
.intro                              { margin: 75px 0 0; position: relative; z-index: 1;}
.intro .wrapper                     { display: grid; grid-template-columns: 1fr 1fr;  align-items: center;}
.intro .chapo                       { position: relative; margin-bottom: 15px;}
.intro_titre                        { padding-right: 50px;}
.intro_titre .link                  { display: none;}
.intro .titre_bg                    { margin-bottom: 20px;}

@media (max-width:1000px) {
.intro                              { margin:50px 0; }
.intro .wrapper                     { display: block;}
.intro .titre_bg                    { margin-inline: auto;}
.intro_titre                        { text-align: center; max-width: 600px; margin: 0 auto; padding: 0;}
.intro .texte                       { display: none;}
}
@media (max-width:700px) {
.intro_titre .link                  { display: inline-block; margin-top: 20px;}
.intro_titre                        { max-width: 440px;}
.intro                              { margin: 30px 0 50px;}
}
@media (max-width:500px) {
.intro_titre .link                  { display: block;}
.intro_titre .link span             { display: block; background: url(../images/link.svg) no-repeat center left / 20px;}
}
    


/***** services *****/
.g_titre                                { font:700 300px/210px var(--title-font-family); color: #fff;}
.services                               { position: relative; margin: 0 0 120px;}
.services .grid                         { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px;}

.services .item                         { position: relative; overflow: hidden; height: fit-content;}

.services .item::after                  { content: ""; width: 100%; height: 100%; background-image: linear-gradient(to top,#000000cb 0%,transparent 70%, transparent 10%); position: absolute; top: 0; left: 0;}
.services .content                      { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); left: 0; top: 0; padding: 40px; display: grid; align-items: center; color: #fff; opacity: 0; transition: all ease-in-out 300ms;}
.services .content p                    { position: relative; z-index: 30;}
.services .titre_main                   { position: absolute; z-index: 20; left: 30px; bottom: 30px; color: #fff; font-size: 20px; line-height: 35px; margin: 0;  width: 250px; }

.services  img                          { display: block; width: 100%; height: auto; object-fit: cover;}
.services .icone                        { position: absolute;  bottom: 0;right: 0; width: 75px;height: 75px; background: #f7f2ec; z-index: 10;}
.services .arrow_link                   { position: absolute;inset: 0; margin-top: 5px; margin-left: 5px; background: url(../images/link_arrow_yellow.svg) no-repeat center var(--second-color);display: flex;justify-content: center;align-items: center;transition: all ease-in-out 0.3s;}
.texte .link_arrow                      { margin-top: 25px;}

.services .item .icone a                { height: 100%; width: 100%; display: block;}
.services .content > p > a              { display: inline; color: #fff; border-bottom: 1px solid #fff; }

.services .grid                         { padding-top: 250px;}
.services .grid .item:nth-child(1)      { grid-column: 1 / 2; grid-row: 1 / 2; } 
.services .grid .item:nth-child(2)      { grid-column: 2 / 3; grid-row: 1 / 2; margin-top: -295px; } 
.services .grid .item:nth-child(3)      { grid-column: 3 / 4; grid-row: 1 / 2; } 
.services .grid .item:nth-child(4)      { grid-column: 1 / 2; grid-row: 2 / 3;}
.services .grid .item:nth-child(5)      { grid-column: 2 / 3; grid-row: 2 / 3;margin-top: -295px; } 
.services .grid .item:nth-child(6)      { grid-column: 3 / 4; grid-row: 2 / 3;}
.services .grid .item:nth-child(7)      { grid-column: 2 / 3; grid-row: 3 / 4;margin-top: -295px; }


@media (min-width:1201px) {
.services .arrow_link:hover             { background-position: center;}
.services .cta .link:hover              { color: #fff;}
.services .item:hover .content          { opacity: 1;}
.services .item:hover .arrow_link       { background-color: var(--main-color); background-image: url(../images/link_arrow_blue.svg);}
}

@media (max-width:1300px) {
.services .grid                         { gap: 45px;}
}
@media (max-width:1200px) {
.services .grid                         { gap: 30px; padding-top: 200px;}
.services .g_titre                      { font-size: 200px;}
.services .grid .item:nth-child(2),
.services .grid .item:nth-child(5),
.services .grid .item:nth-child(7)      { margin-top: -240px;}
.services .titre_main                   { font-size: 18px; line-height: 30px; bottom: 20px; padding-right: 20px;}
}
@media (max-width:1000px) {
.services .g_titre                      { display: none;}
.services .grid                         { grid-template-columns: repeat(2, 1fr); padding: 0; gap: 30px;}
.services .grid .item:nth-child(1),
.services .grid .item:nth-child(2),
.services .grid .item:nth-child(3),
.services .grid .item:nth-child(4),
.services .grid .item:nth-child(5),
.services .grid .item:nth-child(6),
.services .grid .item:nth-child(7)      { grid-column: auto; grid-row: auto; margin: 0;}

.services                               { margin-bottom: 50px;}
}
@media (max-width: 700px) {
.services .icone                        { width: 65px; height: 65px;}
.services .content                      { padding: 10px;}
.services .titre_main                   { font-size: 14px; line-height: 24px; padding-left: 0px; left: 20px; width: 200px; }
.services .arrow_link                   { background-size: 13px;}
}
@media (max-width:600px) {
.services                               { margin-bottom: 40px;}
.services .grid                         { grid-template-columns: 1fr;}
.services .titre_main                   { font-size: 16px; line-height: 30px; padding-left: 0px; left: 20px;  width: 250px; }
.services .item                         { max-height: 450px;}
}
@media (max-width:500px) {
.services .item                         { max-height: 340px;}
.services                               { margin-bottom: 40px;}
}

.photo_grid                             { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin: 120px 0;}
.photo_grid                             { background: url(../images/bg_logo.svg) no-repeat right calc(50% + 120px) bottom; background-size: auto 66%;}
.photo_grid .photo                      { position: relative; margin-left: 100px; overflow: hidden;}
.photo_grid .photo img                  { display: block; width: 100%; object-fit: cover; height: auto;}
.photo_grid .photo .icone .since        { background-color: var(--main-color); font: 700 20px/50px var(--title-font-family); color: var(--second-color); text-align: center; width: 220px; height: 95px; display: grid; justify-content: center;  align-items: center; position: relative; left: 0; z-index: 20;}
.photo_grid .photo .icone               { position: absolute; bottom: 0; right: 0; background-color: #f7f2ec; padding: 5px 0 0 5px;}

@media (max-width:1200px) {
.photo_grid .photo                      { margin-left: 60px;}
}
@media (max-width:1000px) {
.photo_grid                             { background:none; margin: 60px 0;}
.photo_grid .photo .icone .since        { width: 170px; height: 80px; font-size: 20px;}
.photo_grid .icone:before,
.photo_grid .icone:after                { box-shadow: 10px 10px #f7f2ec;}
.photo_grid .photo                      { margin-left: 40px;}
}
@media (max-width:700px) {
.photo_grid                             { grid-template-columns: 1fr; gap: 50px; margin: 40px 0 50px;}
.photo_grid .photo                      { margin: 0;}
.photo_grid .photo img                  { max-height: 440px;}
.photo_grid .photo .icone .since        { width: 120px; height: 60px; font-size: 14px;}
} 
@media (min-width: 1001px) {
.photo_grid .texte                      { margin-left: auto; max-width: 600px;}
}


/***** faq *****/
.table_plus p a {border-bottom: 1px solid transparent;    padding-bottom: 2px;}

@media (min-width:1201px) {
.table_plus p a:hover					{ border-color: var(--main-color); color: var(--main-color);}
}