/**** Banner ****/
.banner 								{ padding-top: 120px; position: relative;}
.banner::before                         { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: calc(50% - 60px); background: #e5f9f8;}
.banner .img                            { background: url(../images/banner.webp) 50% / cover no-repeat; height: 85vh; min-height: 400px; max-height: 900px; border-radius: 30px;}
.banner .content                        { position: absolute; left: 90px; bottom: 80px;}
.banner .titre_main                     { margin-bottom: 30px; color: #fff; font-size: 42px; letter-spacing: 1px}
.banner .titre_main span                { display: block; font-size: 40px; line-height: 52px; font: italic 400 40px/52px "PT Serif"; letter-spacing: 0.6px; text-transform: initial;}

@media (max-width:1200px) {
.banner                                 { padding-top: 90px;}
.banner .content                        { left: 40px; bottom: 40px;}
.banner .titre_main                     { font-size: 38px; line-height: 48px;}
.banner .titre_main span                { font-size: 35px; line-height: 45px;}
}
@media (max-width:1000px) {
.banner::before                         { display: none;}
.banner .wrapper                        { width: 100%; max-width: initial;}
.banner .img                            { border-radius: 0;}
.banner .titre_main                     { font-size: 32px; line-height: 42px;}
.banner .titre_main span                { font-size: 30px; line-height: 40px;}
}
@media (max-width:700px) {
.banner .img                            { background-image: url(../images/banner_mobile.webp); height: 70vw; min-height: 330px; max-height: 600px;}
.banner .content                        { position: static; width: 90vw; margin: 45px auto 50px;}
.banner .titre_main                     { color: #02c7ba; text-align: center; margin-bottom: 35px;}
.banner .titre_main span                { font-size: 24px; line-height: 30px;}
.banner .link                           { width: 100%;}
.banner .titre_main                     { font-size: 25px; line-height: 35px;}
.banner .titre_main span                { font-size: 22px; line-height: 32px;}
}




/***** intro *****/
.intro                              { position: relative; padding-right: 275px; margin: 100px 0;}
.intro img                          { position: absolute; right: 0; top: 0;}

.link-moins,.link-plus              { cursor:pointer; color: #02c7ba; border-bottom: 1px solid transparent;}
.textMore                           { display: none; margin-top: 40px;}
.textMore p:not(:first-of-type)     { margin-top: 15px;}

@media (min-width: 1201px) {
.link-moins:hover,
.link-plus:hover                    { color: #02c7ba; border-color: #02c7ba;}
}

@media (max-width: 1200px) {
.morecontent                        { margin-top: 70px;}
}
@media (max-width:1000px) {
.intro                              { padding: 0; margin: 80px 0;}
.intro img                          { position: static; display: block; margin: 0 auto 45px;}
}
@media (max-width: 700px) {
.intro                              { margin: -5px 0 30px;}
.intro img                          { width: 145px;  margin: 0 auto 20px;}
}



/***** services *****/
.services                               { display: grid; grid-template-columns: 1fr 1fr; gap: 40px;}
.services .item                         { position: relative;  overflow: hidden; padding: 70px 60px 60px; background: #e5f9f8; border-radius: 20px;}
.services .icone_titre                  { display: grid; align-items: center; grid-template-columns: auto 1fr; gap: 40px; margin-bottom: 5px;}
.services .sous_titre                   { color: #333; }
.services .titre_main                   { font-size: 24px; line-height: 30px; margin-bottom: 0;}
.services .titre_main span              { display: block; text-transform: initial; margin-bottom: 0;}
.services p                             { margin-bottom: 15px;}
.services p a                           { color: #02c7ba; border-bottom: 1px solid transparent;}
.services .link                         { margin-top: 15px;}

@media (min-width:1201px) {
.services p a:hover                     { border-color: #02c7ba;}
}
@media (max-width:1000px) {
.services                               { grid-template-columns: 1fr; gap: 30px;}
.services .item                         { padding: 40px;}
.services .icone_titre img              { width: 85px;}
}
@media (max-width:700px) {
.services                               { gap: 10px;}
.services .item                         { padding: 0 70px 0 15px; border-radius: 10px;}
.services .icone_titre img              { width: 100%; height: auto;}
.services .icone_titre                  { grid-template-columns: 65px auto; gap: 20px; min-height: 85px;}
.services .titre_main span              { font-size: 16px; line-height: 24px;}
.services .titre_main                   { font-size: 14px; line-height: 24px;}
.services p                             { display: none;}
.services .item                         { background: url(../images/arrow_right_blue.svg) right 30px center no-repeat #e5f9f8;}
.services .link                         { margin: 0; height: auto; position: absolute; inset: 0; opacity: 0;}
}



/***** atout *****/
.atout                                  { display: grid; grid-template-columns: 420px auto; align-items: center; gap: 80px; margin: 100px 0;}
.atout .photo img                       { width: 100%; height: auto; border-radius: 20px; display: block;}
.atout .table_plus                      { margin: 0;}
.atout .table_plus .titre_plus          { font-size: 17px; font-weight: 700; text-transform: uppercase;}
.atout .sous_titre                      { color: #333; }

@media (max-width:1200px) {
.atout                                  { gap: 40px;}
}
@media (max-width:1000px) {
.atout                                  { margin: 80px 0; gap: 40px; grid-template-columns: 1fr;}
.atout .texte                           { padding-top: 0;}
.atout .photo                           { width: 60%; margin: 0 auto;}
}
@media (max-width:700px) {
.atout                                  { margin: 45px 0 50px;}
.atout .photo                           { width: 100%; max-width: 265px;}
.atout .photo img                       { border-radius: 10px;}
}