.block-back-office {
padding: 50px;
background: white;
color: black;
font-size: 20px;
border: 2px solid black;
}.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-gris-image {
margin: 150px 0 200px;
}
.s4-gris-image .carre {
background-color: #58595b;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 616px;
border-radius: 20px;
}
.s4-gris-image .carre .texte {
max-width: 918px;
text-align: start;
color: white;
margin-bottom: 38px;
font-weight: 400;
font-size: 45px;
}
.s4-gris-image .carre .img {
width: 683px;
height: 371px;
border-radius: 274px;
position: absolute;
right: -240px;
bottom: -139px;
object-fit: cover;
}
@media (max-width: 1875px) {
.s4-gris-image .carre .img {
width: 557px;
height: 302px;
}
}
@media (max-width: 1670px) {
.s4-gris-image .carre .img {
width: 476px;
height: 251px;
right: -89px;
bottom: -96px;
}
}
@media (max-width: 1549px) {
.s4-gris-image .carre {
height: 534px;
}
.s4-gris-image .carre .img {
width: 475px;
height: 240px;
right: -200px;
bottom: -51px;
}
.s4-gris-image .carre .content {
padding: 104px;
}
.s4-gris-image .carre .content .texte {
font-size: 28px;
}
}
@media (max-width: 1199px) {
.s4-gris-image .carre {
height: fit-content;
}
.s4-gris-image .carre .img {
width: 314px;
height: 163px;
right: -68px;
bottom: -38px;
}
.s4-gris-image .carre .content {
padding: 112px 67px;
}
}
@media (max-width: 767px) {
.s4-gris-image {
margin: 43px 0 53px;
}
}
@media (max-width: 575px) {
.s4-gris-image .carre .content {
padding: 37px 27px;
}
.s4-gris-image .carre .content .texte {
font-size: 22px;
}
.s4-gris-image .carre .img {
display: none;
}
}.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;
}