/***** banner *****/
.banner                          {  position: relative; border-radius: 0 0 0 50px; overflow: hidden;}
/*.banner .img                     { }*/
.banner img                     { height: 80vh; max-height: 1200px; min-height: 720px; object-fit: cover; width: 100%; display: block; filter: brightness(0.5);}
.banner .titre_main             { color: #fff; font-size: 60px; line-height: 60px;}
.banner .sous_titre             { font: 700 18px/20px "barlow"; letter-spacing: 1.6px; text-transform: uppercase; color: #fff; margin-bottom: 5px;}
.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; border-radius: 50px 0 0 0;}
.banner .devis                   { position: relative; display: grid; align-items: center; padding-left: 110px; font: 700 20px/40px "barlow"; color: #000; height: 90px; }
.banner .devis::before           { content: ""; position: absolute; width: 90px; height: 90px; background:url(../images/link.svg) no-repeat center #186647; left: 0; top: 0; border-radius: 50%;}
.banner .devis b                { text-transform: uppercase; color: #c53f60; font-weight: 700; padding-right: 30px; background: url(../images/link_arrow_pink.svg) no-repeat center right; transition: all ease-in-out 400ms;}
.banner .icone:after            { content: ""; position: absolute; width: 100px; height: 100px; border-radius:0 0 40px; background: transparent; top: -100px; right: 0; box-shadow: 20px 20px #f7f2ec;}
.banner .icone:before            { content: ""; position: absolute; width: 100px; height: 60px; border-radius:0 0 40px; background: transparent; bottom: 0; left: -100px; box-shadow: 20px 20px #f7f2ec;}
@media (min-width:1200px) {
.banner .devis:hover:before     { background-color: #c53f60;}
.banner .devis:hover b          { background-image: url(../images/link_arrow_green.svg); color: #186647;}
}

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

}
@media (max-width:1000px) {
.banner .icone                  { width: 70%; }
.banner .devis                  { height: 70px; padding-left: 80px;}
.banner .devis::before          { width: 70px; height: 70px;}
.banner                         { border-radius: 0 0 0 30px;}
.banner .icone                  { border-radius: 40px 0 0; padding: 7px 0 0 7px ;}
.banner .icone:after            { border-radius: 0 0 20px;}
.banner .icone:before           { border-radius: 0 0 20px;}
.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; border-radius: 0 30px 30px;}
.banner_titre                   { display: none;}
.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: start;}
.intro .chapo                       { position: relative; margin-bottom: 15px;}
.intro_titre                        { padding-right: 50px;}
.intro_titre .link                  { display: none;}
@media (max-width:1000px) {
.intro                              { margin:50px 0; }
.intro .wrapper                     { display: block;}
.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_arrow.svg) no-repeat center right;}
}
    


/***** services *****/
.g_titre                                { font:700 300px/210px "Playfair display"; 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; border-radius: 40px 40px 0 40px; 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;}

.services  img                          { display: block; width: 100%; height: auto; object-fit: cover; /*filter: brightness(0.5);*/}
.services .icone                        { position: absolute;  bottom: -0.375rem;right: -0.375rem; width: 70px;height: 70px; background: #f7f2ec;border-top-left-radius: 50%; z-index: 10;}
.services .icone::before                { position: absolute; content: "";    bottom: 0.375rem;   left: -1.25rem;background: transparent;width: 1.25rem;height: 1.25rem;border-bottom-right-radius: 1.25rem;box-shadow: 0.313rem 0.313rem 0 0.313rem #f7f2ec;}
.services .icone::after                 { position: absolute;content: "";top: -1.25rem;right: 0.375rem;background: transparent; width: 1.25rem;height: 1.25rem;border-bottom-right-radius: 1.25rem; box-shadow: 0.313rem 0.313rem 0 0.313rem #f7f2ec;}
.services .arrow_link                   { position: absolute;inset: 10px;background: url(../images/link_arrow.svg) no-repeat center #c53f60;border-radius: 50%;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: #186647;}
}


@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: 70px;}
}
@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: 60px; height: 60px;}
  .services .arrow_link { inset: 10px; }
  .services .item { border-radius: 20px 20px 0 20px;}
  .services .content {padding: 10px;}
  .services .titre_main               { font-size: 14px; line-height: 24px; padding-left: 0px; left: 20px; }
}
@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: 30px; }
.services .item                     { border-radius: 30px 30px 0 30px; 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;}
.photo_grid .photo                      { position: relative; margin-left: 100px; border-radius: 30px; overflow: hidden;}
.photo_grid .photo img                  { display: block; width: 100%; object-fit: cover; height: auto;}
.photo_grid .photo .icone .since        { background-color: #186647; font: 700 30px/45px "Playfair Display"; color: #f7f2ec; text-align: center; border-radius: 30px 30px 0 30px; width: 270px; height: 125px; 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:  10px 0 0 10px ; border-radius: 40px 0 0 0; }
.photo_grid .icone:after            { content: ""; position: absolute; width: 100px; height: 100px; border-radius:0 0 30px; background: transparent; top: -100px; right: 0; box-shadow: 20px 20px #f7f2ec;}
.photo_grid .icone:before            { content: ""; position: absolute; width: 100px; height: 60px; border-radius:0 0 30px; background: transparent; bottom: 0; left: -100px; box-shadow: 20px 20px #f7f2ec;}

@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;}
}