/***** banner *****/
.banner                                { position: relative; padding-top: 160px; background: linear-gradient(to bottom, #fff 0%, #fff 60%, var(--mainColor1) 60%, var(--mainColor1) 100%);}

.banner .photo                         { display: grid; grid-template-columns: 5fr 6fr 5fr; align-items: center; gap: clamp(20px, 4vw, 60px);}
.banner .photo img                     { display: block; width: 100%; height: auto; }

@media (max-width:1200px) {

}
@media (max-width:1000px) {
    
}
@media (max-width:700px) {
.banner                                { padding-top: 130px; }
.banner .photo                         { grid-template-columns: 1fr 1fr; }
.banner .photo .item:last-of-type      { display: none; }

}



.intro                                  { margin: 0; padding: clamp(40px, 4vw, 80px) 0 clamp(40px, 5vw, 100px) 0;  }
.intro p                                { color: var(--mainColor2); }

.intro .titre_main                      { line-height: 40px; margin-bottom: clamp(20px, 4vw, 30px); }
.intro .titre_main span                 { line-height: 25px; }
.intro .infos_pratiques                 { display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: center; text-align: left; padding-top: 20px; }
.intro .infos_pratiques .item           { padding: 10px 60px; }
.intro .infos_pratiques .offre          { display: flex; align-items: center; gap: 20px;}
.intro .infos_pratiques .offre>*        { color: var(--mainColor2); font-size: 22px; }
.intro .infos_pratiques .offre .numero  { width: 50px; height: 50px; display: grid; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--mainColor2); font-weight: 600; }
.intro .infos_pratiques .offre .seance  { letter-spacing: 5px; text-transform: uppercase;}
.intro .infos_pratiques .offre .gratuite { letter-spacing: 1.5px; font-weight: 800; text-transform: uppercase;}
.intro .infos_pratiques .offre .demande { font-size: 18px;}
.intro .infos_pratiques .horaires       { font-weight: 500;}
.intro .infos_pratiques .horaires p     { margin-bottom: 0;}


.line                                   { display: inline-block; width: 1px; height: 60%; margin: auto; background-color: var(--mainColor2);  }
@media (max-width:1200px) {
.intro .infos_pratiques .item           { padding: 10px 50px; }

}
@media (max-width:1000px) {
.intro .infos_pratiques .item           { padding: 10px 40px; }
.intro .titre_main                      { line-height: 30px; }
.intro .titre_main span                 { line-height: 25px; }

}
@media (max-width:700px) {
.intro .infos_pratiques                 { grid-template-columns: auto; gap: 20px;}
.intro .infos_pratiques .item           { padding: 10px 0px; }
.intro .titre_main span                 { line-height: 10px; margin-top: 15px; }
}



/***** Expertise *****/
.expertise                              { display: grid; grid-template-columns: 35% 1fr; gap: 60px; margin: clamp(80px, 8vw, 220px) 0;}
.expertise img                          { display: block; width: 100%; height: auto;}
.expertise .services-item .row          { padding: 40px 30px;}
.expertise .services-item__body         { padding-left: 35px;}
.expertise_list                         { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 40px;}

@media (max-width: 1200px) {
.expertise                              { grid-template-columns: 1fr; gap: gap: clamp(20px, 4vw, 60px);}
.expertise .photo                       { display: none;}
.expertise .services-item .row          { padding: 35px 25px;}
.expertise_list                         { gap: 30px;}
}

@media (max-width: 1000px) {
.expertise .services-item .row          { padding: 30px 20px;}
}

@media (max-width: 700px) {
.expertise_list                         { grid-template-columns: 1fr; gap: 30px;}
.expertise .services-item .row          { padding: 0 20px;}
/*.expertise .photo-item                  { grid-area: 1; }*/
}




/***** Concept *****/
.concept                                { margin: clamp(80px, 10vw, 180px) 0; position: relative;}
.concept:after                          { content: ""; width: 50%; height: 100%; background-color: var(--mainColor1); display: block; position: absolute; top: 0; bottom: 0; right: 0; z-index: -1; }
.concept>*                              { color: #000; }
.concept .link                          { border-color: #000; color: #000;}
.concept .bg_beige                      { padding: var(--paddingTB) clamp(40px, 5vw, 80px); }

@media (max-width: 1400px) {
.concept .wrapper                       { width: 100%;}
}

@media (min-width: 1201px) {
.concept .link:hover                    { border-color: #000; color: var(--mainColor1); background-color: #000;}
}
@media (max-width: 1200px) {
.concept                                { margin-bottom: 0 ;}
}