.s4-engagement .image {
border-radius: 100%;
overflow: hidden;
height: 380px;
width: 380px;
position: absolute;
right: 0;
top: -155px;
}
.s4-engagement .image .img {
object-fit: cover;
height: 100%;
width: 100%;
}
.s4-engagement .carre {
background-color: #f7f7f7;
border-radius: 20px;
padding: 79px 90px;
width: 545px;
display: flex;
gap: 25px 0;
margin-top: 145px;
margin-left: 0;
}
.s4-engagement .carre .item {
display: flex;
flex-direction: column;
align-items: center;
height: 145px;
justify-content: end;
}
.s4-engagement .carre .item.active .gris {
opacity: 0;
transition: all 0.2s ease-in-out;
}
.s4-engagement .carre .item.active .jaune {
opacity: 1;
transition: all 0.2s ease-in-out;
}
.s4-engagement .carre .item .contour {
border-radius: 100%;
height: 110px;
width: 110px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
}
.s4-engagement .carre .item .gris {
background-color: #e6e245;
opacity: 1;
}
.s4-engagement .carre .item .jaune {
background-color: #58595b;
opacity: 0;
}
.s4-engagement .carre .item .titre {
font-weight: 600;
color: #58595b;
}
.s4-engagement .rond {
position: absolute;
bottom: 364px;
right: 0;
}
.s4-engagement .rond .cercle {
position: absolute;
top: 0;
right: 0;
background-color: #e6e245;
color: #58595b;
border-radius: 100%;
height: 298px;
width: 298px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 25px;
opacity: 0;
transition: all 0.2s ease-in-out;
}
.s4-engagement .rond .cercle.active {
opacity: 1;
}
.s4-engagement .rond .cercle .texte {
font-weight: 300;
margin-top: 15px;
}
@media (max-width: 1670px) {
.s4-engagement .carre {
margin-left: 9px;
}
}
@media (max-width: 1549px) {
.s4-engagement .carre {
background-color: #f7f7f7;
border-radius: 20px;
padding: 39px 38px;
width: 390px;
display: flex;
gap: 18px 0;
margin-top: 70px;
margin-left: 0px;
}
.s4-engagement .rond {
bottom: 266px;
}
.s4-engagement .rond .cercle {
height: 238px;
width: 238px;
}
.s4-engagement .image {
right: 0;
top: -109px;
height: 284px;
width: 283px;
right: 59px;
}
}
@media (max-width: 1199px) {
.s4-engagement {
width: 68%;
margin: 0 auto;
}
}
@media (max-width: 991px) {
.s4-engagement {
width: 95%;
}
}
@media (max-width: 767px) {
.s4-engagement .carre {
width: 163px;
gap: 18px 0;
margin-top: 0;
padding: 20px 18px;
}
.s4-engagement .carre .item {
height: 80px;
}
.s4-engagement .carre .item .contour {
height: 57px;
width: 58px;
}
.s4-engagement .carre .item .contour img {
height: 31px;
}
.s4-engagement .image {
top: -7px;
right: 38px;
}
.s4-engagement .rond {
bottom: 273px;
right: 43px;
}
.s4-engagement .rond .cercle {
height: 265px;
width: 267px;
}
}
@media (max-width: 767px) {
.s4-engagement .carre {
width: 163px;
gap: 18px 0;
margin-top: 0;
padding: 20px 18px;
}
.s4-engagement .carre .item {
height: 80px;
}
.s4-engagement .carre .item .contour {
height: 57px;
width: 58px;
}
.s4-engagement .carre .item .contour img {
height: 31px;
}
.s4-engagement .image {
top: -7px;
right: 38px;
}
.s4-engagement .rond {
bottom: 273px;
right: 43px;
}
.s4-engagement .rond .cercle {
height: 265px;
width: 267px;
}
}
@media (max-width: 575px) {
.s4-engagement .carre {
width: 124px;
padding: 10px;
}
.s4-engagement .carre .item {
padding-right: 0;
padding-left: 0;
}
.s4-engagement .rond {
bottom: 225px;
right: -19px;
}
.s4-engagement .rond .cercle {
height: 238px;
width: 236px;
}
.s4-engagement .image {
height: 238px;
width: 236px;
top: 5px;
right: -20px;
}
}.s4-carousel-jaune {
margin: 0 0 100px;
}
.s4-carousel-jaune .item {
background: #f7f7f7;
transition: all 0.2s ease-in-out;
height: 350px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: start;
justify-content: end;
padding: 40px;
color: black;
}
.s4-carousel-jaune .item .titre {
font-weight: 600;
max-width: 70%;
}
.s4-carousel-jaune .item .texte {
height: 0;
opacity: 0;
transition: all 0.8s;
overflow: hidden;
}
.s4-carousel-jaune .item:hover {
background: #e6e245;
color: black;
}
.s4-carousel-jaune .item:hover .texte {
height: 100px;
opacity: 1;
padding-top: 15px;
}
.buttonBorder {
position: absolute;
bottom: 0;
right: 0;
}
.buttonBorder .Button_Button__vVAZK {
display: inline-flex;
justify-content: center;
align-items: center;
outline: 0;
text-decoration: none;
color: #000;
cursor: pointer;
}
.buttonBorder .Button_Button__vVAZK > span {
display: flex;
align-items: center;
width: 100%;
height: 100%;
z-index: 1;
transition: 0.15s;
}
.buttonBorder .Button_ArrowCont__WrhN_ {
background-color: #fff;
padding: 10px;
border-radius: 50% 0 0 0;
margin: 0 -10px -10px 0;
}
.buttonBorder .Button_ArrowCont__WrhN_ > svg {
display: block;
width: 20px;
position: absolute;
top: -20px;
right: 10px;
transform: rotate(180deg) scale(1.01);
}
.buttonBorder .Button_ArrowCont__WrhN_ > svg:last-of-type {
top: auto;
bottom: 10px;
right: auto;
left: -20px;
}
.buttonBorder .Button_Arrow__LawjV {
width: 50px;
height: 50px;
background-color: #58595b;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.buttonBorder .Button_Arrow__LawjV > svg {
display: block;
width: 21px;
height: 14px;
transition: 0.3s;
}
@media (max-width: 1199px) {
.s4-carousel-jaune {
margin: 0 0 100px 0;
}
.s4-carousel-jaune .item:hover .texte {
height: 100%;
}
}
@media (max-width: 991px) {
.s4-carousel-jaune .item .titre {
max-width: 100%;
}
}
@media (max-width: 575px) {
.s4-carousel-jaune .item {
background: #e6e245;
color: black;
height: fit-content;
}
.s4-carousel-jaune .item .titre {
padding-bottom: 10px;
}
.s4-carousel-jaune .item .texte {
height: 100%;
opacity: 1;
}
}.s4-carrousel {
margin: 100px 0;
}
.s4-carrousel .item {
color: #ffffff !important;
position: relative;
}
.s4-carrousel .item.lien {
text-decoration: none;
}
.s4-carrousel .item .background {
height: 420px;
position: relative;
}
.s4-carrousel .item .background .img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 20px;
z-index: 1;
}
.s4-carrousel .item .background:after {
content: "";
position: absolute;
left: 0;
top: 0;
border-radius: 20px;
background: rgba(0, 0, 0, 0.24);
mix-blend-mode: multiply;
width: 100%;
height: 100%;
z-index: 2;
}
.s4-carrousel .item .background .content {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 3;
display: flex;
flex-direction: column;
justify-content: end;
padding: 30px;
}
.s4-carrousel .item .content .titre {
font-weight: 600;
}
.s4-carrousel .item .content .texte {
font-weight: 300;
}
@media (max-width: 575px) {
.s4-carrousel .item .background {
height: 336px;
}
}.block-back-office {
padding: 50px;
background: white;
color: black;
font-size: 20px;
border: 2px solid black;
}.block-back-office {
padding: 50px;
background: white;
color: black;
font-size: 20px;
border: 2px solid black;
}