/***** banner *****/
.sous_titre                     { font-weight: 500;}
.banner                         { position: relative; padding-top: 140px;  display: grid; grid-template-columns: 640px auto; gap: 20px;}
.banner .titre_main             { color: #fff;}
.banner .sous_titre             { color: #fff; margin: 0; }
.banner .texte                  { padding: 95px 80px; background-color: #b18f75; display: grid; align-items: center;}
.banner_texte                   { display: grid; gap: 20px;}
.banner .link_contact           { display: inline-block; background-color: #022e66; font-size: 30px; line-height: 45px; padding: 40px 80px; color: #fff; font-weight: 500; height: 100%; min-height: 200px; display: grid; align-items: center;}
.banner_image                   { position: relative;}
.banner_image img               { display: block; width: 100%; object-fit: cover; max-height: 680px; height: 100%;}
.banner .link_contact span span { padding-right: 80px; display: inline-block; background: url(../images/link.svg) no-repeat center right 20px;}

@media (min-width:1200px) {
.banner .link_contact:hover      { background-color: #1b6bb8;}
.banner .link_contact:hover span { background-position: center right;}
}

@media (max-width:1400px) {
.banner .texte                  { padding: 90px 40px;}
.banner                         { grid-template-columns: 1fr 1fr;}
.banner .link_contact           { padding: 40px;}
}

@media (max-width:1200px) {
.banner                         { padding-top: 90px;}
.banner_image img               { max-height: initial;}
.banner .sous_titre             { font-size: 25px; line-height: 35px;}
.banner .titre_main             { font-size: 35px; line-height: 45px; margin-bottom: 20px;}
.banner .link_contact           { font-size: 25px; line-height: 35px;}
}

@media (max-width:1000px) {
.banner                         { grid-template-columns: 1fr; gap: 0;}
.banner_content                 { max-width: 100% ; width: 100%;}
.banner_image                   { grid-area: 1;}
.banner .texte                  { padding: 40px 7.5vw; }
.banner .link_contact           { padding: 20px 7.5vw;  background: #022e66; min-width: initial; min-height: 100px;}
.banner .link_contact span      { display: block; background: url(../images/link.svg) no-repeat center right;}
.banner .link_contact span span { display: none;}
.banner_texte                   { gap: 0;}
}
@media (max-width:700px) {
.banner                         { padding-top: 80px;}
.banner .titre_main br          {display: none;}
.banner_image img               { min-height: 320px;}
.banner .titre_main             { font-size: 30px; line-height: 40px; margin-bottom: 10px; }
.banner .sous_titre             { font-size: 16px; line-height: 30px;}
.banner .texte                  { padding: 35px 7.5vw;}
.banner .link_contact           { font-size: 16px; line-height: 26px; padding: 15px 7.5vw; background-position: center right 7.5vw; min-height: 80px;}
.banner .link_contact span      { background-size: 25px;}
}

/***** atout *****/ 
.intro                              { display: grid; grid-template-columns: 1fr 440px; gap: 80px; margin: 80px 0; align-items: center;}
.intro .titre_main                  { font-size: 40px; line-height: 50px;}

.intro_list                         { padding: 50px 60px 70px; background: url(../images/logo_part.svg) right bottom no-repeat #b18f75;}
.ul_list  li                        { color: #fff; padding-left: 35px; background: url(../images/list.svg) no-repeat center left; font-size: 18px; line-height: 45px;}
.intro_list .sous_titre             { font-size: 35px; line-height: 45px; color: #fff;}

@media (max-width:1200px) {
.intro                              { gap: 50px; grid-template-columns: 1fr 380px;}
.intro .titre_main                  { font-size: 32px; line-height: 42px;}
.intro_list .sous_titre             { font-size: 30px; line-height: 40px;}  
.intro_list                         { padding: 50px 40px 60px;}
}
@media (max-width:1000px) {
.intro                              { grid-template-columns: 1fr; gap: 30px; margin: 50px 0;}
.intro_list                         { padding: 40px;}
}
@media (max-width:700px) {
.intro p,
.intro .chapo,
.intro .texte_more                  { display: none;}
.intro                              { gap: 10px; margin: 35px 0 50px;}
.intro_list .sous_titre             { font-size: 18px; line-height: 30px; margin-bottom: 5px;}
.ul_list  li                        { font-size: 15px; line-height: 40px;}
.intro_list                         { padding: 30px 40px ;}
.intro .titre_main                  { font-size: 18px; line-height: 30px; margin-bottom: 10px;}
}



/***** services *****/
.services                               { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 50px; margin: 110px 0;}
.services .item                         { position: relative; padding: 60px;  background: #eee;}
.services .titre_icone                  { display: grid; grid-template-columns: auto 1fr; grid-gap: 25px; align-items: center; margin-bottom: 20px;}
.services .item .icone                  { display: grid; align-items: center; justify-content: center; background: #fff; width: 90px; height: 90px;}
.services .titre_icone img              { width: auto; display: block;}
.services .sous_titre                   { margin: 0;}
.services .link                   		{ margin: 25px 0 0 0;}
.services .photo                        { grid-row: span 2; background: none; padding: 0;}
.services .photo img                    { width: 100%; height: 70%; height: auto; object-fit: cover; display: block;}
.services .decouvre 				    { background: #b18f75; text-align: center; color: #fff; font-size: 25px; line-height: 35px; font-weight: 500;padding: 50px 90px; display: grid; align-content: center;}
.services .decouvre .link               { max-width: fit-content; margin: 25px auto 0; background-image: linear-gradient(to top, #ffffff 0% 50%, #113c4b 50% 100%); color: #b18f75;}

@media (min-width:1201px) {
.services .decouvre .link:hover         { color: #fff;}
}
@media (max-width:1600px) {
.services .decouvre                     { padding:50px 60px;}
.services .item                         { padding: 60px 50px;}
.services                               { gap: 30px;}
}
@media (max-width:1200px) {
.services                               { grid-template-columns: 1fr 1fr; grid-gap: 30px; margin: 80px 0;}
.services .photo img                    { height: 100%;}
.services .item                         { padding: 50px;}
}
@media (max-width:1000px) {
.services                               { grid-template-columns: 1fr; grid-gap: 20px; margin: 60px 0;}
.services .item                         { padding: 40px 50px;}
.services .photo img                    { max-height: 600px;}
.services .item br                      { display: none;}
}
@media (max-width:600px) {
.services                               { gap: 45px; margin: 40px 0;}
.services .item                         { background-color: transparent; padding: 0; margin-bottom: 0;}
.services .photo img                    { height: 320px;}
.services .titre_icone img              { width: 60px;}
.services .item .icone                  { width: auto; height: auto; display: block;}
.services .titre_icone                  { gap: 20px;}
.services .sous_titre                   { font-size: 18px;}
.services .link                         { margin: 20px 0 0;}
.services .decouvre                     { display: block; margin: 10px 0 0;}
.services .decouvre_content             { background-color: #1e596a; padding: 30px 35px; font-size: 18px; line-height: 28px;}
.services .decouvre .link               { background: #b18f75; color: #fff; max-width: 100%; margin: 0;}
}


/***** about *****/
.about                                  { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 120px 0 100px;}
.about .titre_main                      { color: #fff;}
.about .texte                           { background-color: #b18f75; display: grid; align-items: center; padding: 50px 80px; color: #fff; position: relative; overflow: hidden;}
.about .link                            { margin-top: 20px;  background-image: linear-gradient(to top, #ffffff 0% 50%, #1b6bb8 50% 100%); color: #1b6bb8;}
.about .photo img                       { display: block; width: 100%; object-fit: cover; height: 100%;}
.about .since                           { padding: 100px 200px 20px; background-color: #113c4b; position: absolute; top: -55px; right: -200px; color: #fff; transform: rotate(45deg); font-size: 18px; line-height: 25px; text-align: center;} 
.about .sous_titre                      { font-size: 40px; line-height: 50px; color: #fff;}
.about p>a                              { color: #ffffff; border-bottom: 1px solid #ffffff;}
@media (min-width:1200px) {
.about .link:hover                      { color: #fff;}
.about p>a:hover                        { color: #ffffff; border-bottom: 1px solid #ffffff00;}
}
@media (max-width:1600px) {
.about .texte                           { padding: 50px;}
}

@media (max-width:1200px) {
.about                                  { margin: 80px 0; gap: 15px;}
.about .since                           { padding: 90px 200px 10px;top: -59px;right: -215px;font-size: 15px; line-height: 20px;}
.about .texte                           { padding: 30px 40px;}
}
@media (max-width:1000px) {
.about                                  { grid-template-columns: 1fr; gap: 20px;}
.about .texte                           { grid-area: 2; padding: 0; background-color: transparent; color: #000;}
.about .since                           { display: none;}
.about .link                            { background:#022e66; color: #fff;}
.about .sous_titre                      { color: #000; font-size: 18px; line-height: 30px; margin-bottom: 10px;}
.about p>a                              { color: #b18f75; border-bottom: 1px solid #b18f75;}
}
@media (max-width:700px) {
.about                                  { margin: 50px 0 10px;}
.about .photo img                       { height: 320px;}
}