#homepage                               { padding-top: 180px;}
@media (max-width:1024px) {
    
}
@media (max-width:700px) {
#homepage                               { padding-top: 140px;}
}

/***** banner *****/
.banner                                 { position: relative; width: 90vw; max-width: 1800px; margin: 0 auto; padding: 100px 0; text-align: right; margin-bottom: 90px;}
.banner .texte                          { width: 620px; border-radius: 20px; color: #000; background: #fff; padding: 60px 60px 55px; order: 0; box-shadow: 0 0 60px 0 rgba(0,0,0,0.1); text-align: left; display: inline-block; vertical-align: top; position: relative; z-index: 1;}
.banner p                               { margin-bottom: 15px;}
.banner .img                            { height: 100%; border-radius: 20px; background: url("../images/banner_deramaixallard.webp") center / cover no-repeat; width: calc(100% - 510px); position: absolute; z-index: 1; left: 0; top: 0; order: 1;}
@media (max-width:1200px) {
.banner                                 { padding: 70px 0;}
.banner .img                            { width: 80%;}
.banner .texte                          { width: 580px; border-radius: 15px; padding: 45px 50px 45px; box-shadow: 0 0 40px 0 rgba(0,0,0,0.1);}
}
@media (max-width:1000px) {
.banner                                 { padding: 50px 0;}
.banner .img                            { width: 70%;}
.banner .texte                          { width: 450px; border-radius: 10px; padding: 35px 40px 35px; box-shadow: 0 0 30px 0 rgba(0,0,0,0.1);}
}
@media (max-width:800px) {
.banner                                 { padding: 0; margin-bottom: 30px; width: 85vw; }
.banner .img                            { display: block; width: 85vw; height: 65vw; position: static; border-radius: 10px; margin: 0 auto 20px;}
.banner p,
.banner .chapo                          { display: none;}
.banner .texte                          { box-shadow: none; padding: 0; width: auto; display: block;}
}




.services                               { position: relative; padding-bottom: 110px;}
.services .titre + .titre_main          { margin-bottom: 40px;}
.services::before                       { content: ""; display: block; position: absolute; top: 265px; bottom: 0; width: 100%; background: url(../images/bg_services.webp) center top / cover no-repeat; background-attachment: fixed;}
.services .grid 					    { display: grid; grid-template-columns: 1fr 1fr; gap: 30px;}
.services>.sous_titre                   { margin-bottom: 40px;}
.services .item      				    { position: relative; padding: 40px 50px 117px; box-shadow: 0 0 60px 0 rgba(0,0,0,0.1); background: #fff; border-radius: 10px;}
.services .item .link                   { text-align: center; width: 100%; max-width: 270px; margin-top: 20px; position: absolute; bottom: 45px;}
.services .item .sous_titre 			{ color: #000;}
.services .item img    				    { display: block; margin-bottom: 20px;}
.services .grid + .titre_main           { color: #fff; text-align: center; margin: 95px 0 0;}

@media (max-width:1200px) {
.services .item .link                   { height: 50px; display: grid; align-items: center; line-height: 20px; left: 40px; width: calc(100% - 90px);}    
}
@media (max-width:1000px) {
.services::before                       { display: none;}
.services                               { background: #171717; padding: 50px 0;}
.services .titre,
.services .titre + .titre_main          { color: #fff;}
.services .grid 	                    { grid-template-columns: 1fr;}
.services .item                         { padding: 10px 70px 10px 40px; display: grid; grid-template-columns: 120px auto; align-items: center; background: url(../images/chevron_right.svg) right 40px center no-repeat #fff;}
.services .item p                       { display: none;}
.services .item .link                   { position: absolute; inset: 0; height: auto; width: auto; max-width: initial; margin: 0; opacity: 0;}
.services .item .sous_titre,
.services .item img                     { margin: 0;}
}
@media (max-width:700px) {
.services .grid + .titre_main,
.services .titre                        { display: none;}
.services .item                         { padding: 0 60px 0 20px; background-position: right 20px center; height: 100px; grid-template-columns: 85px auto;}
.services .item .sous_titre             { font-size: 18px; line-height: 25px;}
.services .item img                     { transform: scale(0.7); width: 100%;}
.services .titre + .titre_main          { margin-bottom: 25px;}
.services                               { padding: 40px 0 50px;}
.services .grid                         { gap: 10px;}
}

/***** fonction *****/
.fonction                               { margin: 90px 0 100px;}
.fonction .titre_main                   { margin-bottom: 30px;}
.fonction .grid                         { display: grid; grid-template-columns: 1fr 1fr; align-items: center;}
.fonction ul                            { padding-right: 80px; position: relative; z-index: 1;}
.fonction li                            { position: relative;}
.fonction li:not(:last-child)           { margin-bottom: 10px;}
.fonction .description                  { position: absolute; top: 50%; transform: translateY(-50%); left: calc(100% + 40px); border-radius: 10px; box-shadow: 0 0 60px 0 rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transition: all ease 400ms; width: 78%; padding: 35px 40px; background: #fff;}
.fonction .description:before           { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 14px 14px 14px 0; border-color: transparent #fff transparent transparent; position: absolute; left: -14px; top: 50%; margin-top: -14px;}
.fonction .link                         { display: grid; align-items: center; position: relative; background-color: #f5f5f5; color: #000; padding: 0 50px 0 30px; height: 60px; line-height: 20px; text-transform: initial; font-size: 14px; font-weight: 400;}
.fonction .link::after                  { content: url(../images/chevron_right.svg); line-height: 0; position: absolute; top: 50%; transform: translateY(-50%); right: 30px;}
.fonction .photo                        { display: grid; gap: 30px;}
.fonction .photo img                    { width: 100%; height: auto; border-radius: 10px; display: block;}
.fonction .quote img                    { display: block; margin: 0 auto 20px;}
.fonction .quote                        { text-align: center; color: #000; margin-bottom: 0;}

@media (min-width:1201px) {
.fonction .link:hover                   { color: #fff; background-color: #000;}
.fonction .link:hover::after            { filter: brightness(0) invert(1);}
.fonction li:hover .description         { opacity: 1; visibility: visible;}
}
@media (max-width:1000px) {
.fonction .grid                         { display: block;}
.fonction .grid>div:last-of-type        { display: none;} 
.fonction ul                            { padding-right: 0;}
}
@media (max-width:700px) { 
.fonction                               { margin: 30px 0 50px;}
.fonction .titre                        { display: none;}
.fonction .titre_main                   { margin-bottom: 25px;}
.fonction .link                         { font-size: 12px; padding: 0 20px;}
.fonction .link::after                  { right: 20px;}
}

/***** bandeau *****/
.bandeau                                { text-align: center; background: url(../images/bg_services.webp) center bottom / cover no-repeat; background-attachment: fixed; padding: 90px 0 100px;}
.bandeau .titre                         { color: #fff;}
.bandeau .titre_main                    { color: #fff; margin-bottom: 30px;}
.bandeau .link                          { margin: 0 3px;}
@media (max-width:1200px) {
.bandeau                                { background-attachment: initial;}
}
@media (max-width:700px) { 
.bandeau                                { padding: 40px 0 50px; background: #171717;}
.bandeau .grid                          { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.bandeau .link                          { margin: 0; padding: 0 10px; white-space: nowrap;}
.bandeau span                          { display: block; text-align: center;}
.bandeau .link img                      { display: none;}
}


/***** texte more *****/
.textMore                                { margin: 80px 0; display: none;}
.link-moins,
.link-plus                               { cursor: pointer; color: #e53939;}
@media (max-width:700px) { 
.textMore                                { margin: 50px 0;}
}






.groupe                                  { display: grid; grid-template-columns: 170px 1fr; gap: 5px 40px; align-items: center; margin: clamp(40px, 4vw, 80px) auto;}
.groupe .logo_optimius img               { display: block; width: 100%; height: auto; }
.groupe .legende                         { margin-top: 20px; text-align: center; grid-area: 2 / 2 / 2 / 3;}
.groupe .grid_groupe                     { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; align-items: center;}
.groupe .grid_groupe .item               { height: 100%;}
.groupe .grid_groupe .noms               { text-align: center; padding: 25px; background-color: #eee; border-radius: 8px;}
.groupe .grid_groupe .noms .titre        { font-size: 14px; letter-spacing: 0.6px;}
.groupe .grid_groupe .noms .titre span   { text-transform: none;}
@media (max-width:1200px) { 
.groupe                                  { grid-template-columns: 170px 1fr; gap: 0 40px;}
.groupe .grid_groupe                     { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:1000px) { 

}
@media (max-width:700px) { 
.groupe                                  { grid-template-columns: 1fr; gap: 30px;}
.groupe .logo_optimius img               { max-width: 180px; margin: 0 auto; }
.groupe .grid_groupe                     { grid-template-columns: repeat(1, 1fr); }
.groupe .legende                         { grid-area: auto;}
.groupe .grid_groupe .noms               { padding: 15px; border-radius: 5px;}
}