/***** banner *****/
.banner                             { position: relative; z-index: 1; padding-top: 150px; color: #fff;}
.banner .img                        { height: 600px; position: relative; z-index: 1; border-radius: 20px; overflow: hidden;}
.banner video                       { width: 100%; height: 100%; object-fit: cover; display: block; position: relative;}
.banner::after                      { content: ""; display: block; position: absolute; left: 0; top: 0; height: calc(100% - 110px); width: 100%; background: #1b2a40;}
.banner .wrapper                    { max-width: 1600px; padding-left: 490px;}
.banner .content                    { position: absolute; left: 0; top: 135px; z-index: 2;}
.banner .ul_list                    { margin-bottom: 25px;}
.banner .titre_main                 { margin-bottom: 10px;}
.banner .slider                     { position: relative; z-index: 1;}
.banner .slider img                 { width: 100%; height: 710px; object-fit: cover; display: block;}

@media (max-width:1366px) {
.banner .wrapper                    { padding-left: 400px;}
}
@media (max-width:1200px) {
.banner                             { padding-top: 90px;}
.banner .wrapper                    { padding-left: 360px;}
.banner .content                    { top: 180px;}
}
@media (max-width:1000px) {
.banner                             { background: #1b2a40;}
.banner .wrapper                    { width: 100%; max-width: initial;}
.banner .img                        { position: static; height: 500px; min-height: 0; border-radius: 0;}
.banner::after                      { display: none;}
.banner .wrapper                    { padding: 0;}
.banner .content                    { position: static; width: 90vw; max-width: 750px; margin: 0 auto; padding: 40px 0;}

}
@media (max-width:700px) {
.banner                             { padding-top: 80px;}
.banner .img                        { height: 320px;}
.banner .titre_main                 { line-height: 35px; font-size: 25px; margin-bottom: 15px;}
.banner p                           { font-size: 16px; line-height: 28px;}
.banner .content                    { padding: 30px 0 60px;}
}




/***** intro *****/
.intro                              { margin: 85px 0 90px;}
@media (max-width:1000px) {
.intro                              { gap: 40px; padding: 0; margin: 70px 0;}
}
@media (max-width:700px) {
.intro                              { margin: 25px 0 40px;}
}



/***** services *****/
.services                           { position: relative; padding: 100px 0; background: #1b2a40;}
.services .texte                    { color: #fff; padding-right: 50px;}
.services .grid                     { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 60px 30px;}
.services .item                     { position: relative; overflow: hidden; border-radius: 10px; background: #fff;}
.services .item img                 { width: 100%; height: auto; display: block;}
.services .hide                     { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 60px); background: #fff; padding: 40px; display: grid; justify-content: center; align-items: center; opacity: 0;}
.services .item .link               { border-radius: 0 0 10px 10px; width: 100%; font-size: 18px; color: #1b2a40; background: #ffd822;}
.cta                                { display: grid; justify-content: center; align-items: center; border-radius: 10px; background: #324053; height: 100%; text-align: center; padding: 0 30px;}
.cta .titre                         { margin-bottom: 10px;}
.cta .link                          { width: 100%; max-width: 200px; margin-top: 10px;}

@media (min-width:1201px) {
.services .hide                     { transition: all ease-in-out 400ms;}
.services .item:hover .hide         { opacity: 1;}
}
@media (max-width:1200px) {
.services .texte                    { padding: 0;}
.services .hide                     { display: none;}
}
@media (max-width:1000px) {
.services                           { padding: 70px 0;}
.services .grid                     { grid-template-columns: 1fr 1fr; gap: 30px;}
.services .texte                    { grid-column: 1 / -1;}
.cta                                { grid-column: 1 / -1; padding: 30px;}
.cta .link                          { width: 100%; display: block; max-width: 420px; margin-left: auto; margin-right: auto;}
}
@media (max-width:700px) {
.services                           { padding: 40px 0 50px;}
.services .grid                     { gap: 30px 20px;}
.services .item                     { padding-top: 5px;}
.services .texte p                  { display: none;}
.services .titre_main               { margin-bottom: 0;}
.services .item .link               { font-size: 14px; padding: 0 10px; line-height: 18px; height: 60px; display: grid; justify-content: center; align-items: center;}
.services .item img                 { width: 160px; margin: 0 auto 5px;}
.cta                                { padding: 10px 0 0; background: none; display: block;}
.cta .link                          { max-width: initial;}
}


/***** apropos *****/
.apropos                            { margin: 120px 0 165px;}
.apropos .photo::before             { background: #eee;}

@media (max-width:1000px) {
.apropos                            { margin-bottom: 70px; gap: 30px;}
}
@media (max-width:1000px) {
.apropos                            { margin: 80px 0 140px; gap: 20px;}
}
@media (max-width:700px) {
.apropos                            { margin: 50px 0 110px; gap: 20px;}
.apropos .titre_main                { font-size: 20px;}
.apropos .sous_titre                { font-size: 16px; line-height: 26px;}
}




/***** table plus *****/
.table_plus                         { margin-top: 100px;}
.titre_plus                         { background: #ffd822;}

@media (max-width:1000px) {
.table_plus                         { margin: 80px 0;}
}
@media (max-width:1000px) {
.table_plus                         { margin: 50px 0;}
}