.bandeau-informatif {
display: flex;
flex-direction: row;
gap: 56px;
align-items: center;
margin: 32px 0;
}
.bandeau-informatif .containerLeft {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 40%;
gap: 26px;
overflow: hidden;
box-sizing: border-box;
}
.bandeau-informatif .containerLeft h2{
color: var(--Principal, #174A42);
font-family: Pontiac;
font-size: 24px;
font-style: normal;
font-weight: 900;
line-height: 32px; text-transform: uppercase;
width: 100%;
margin: 0;
}
.bandeau-informatif .containerLeft img {
width: 100%;
max-width: 100%;
max-height: 500px;
object-fit: cover;
display: block;
}
.bandeau-informatif .containerRight {
color: var(--Principal, #174A42);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
align-self: stretch;
width: 60%;
gap: 26px;
}
.bandeau-informatif .containerRight .introduction p {
color: var(--Principal, #174A42); font-family: Pontiac;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 32px; }
.bandeau-informatif .containerRight .texte {
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
}
.bandeau-informatif .containerRight .bandeau-bouton {
display: flex;
padding: 12px 24px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 24px;
background: var(--Principal, #174A42);
color: var(--Blanc, #FFF);
text-align: center;
font-family: Pontiac;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px; text-transform: uppercase;
border: 1px solid var(--Principal, #174A42);
}
.bandeau-informatif .containerRight .bandeau-bouton:hover {
background-color: #ffffff; 
color: var(--Principal, #174A42);
border: 1px solid var(--Principal, #174A42);
}
.bandeau-informatif .containerRight a {
color: var(--Principal, #174A42);
text-decoration: none;
}
.bandeau-informatif .containerRight a:hover {
text-decoration: underline;
} @media screen and (min-width: 1281px) {
.bandeau-informatif {
padding-left: calc((100vw - 1280px) / 2);
padding-right: calc((100vw - 1280px) / 2);
}
}
@media screen and (min-width: 1025px) and (max-width: 1280px) {
.bandeau-informatif {
padding-left: calc((100vw - 1024px) / 2);
padding-right: calc((100vw - 1024px) / 2);
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.bandeau-informatif {
padding-left: 20px;
padding-right: 20px;
}
}
@media screen and (max-width: 767px) {
.bandeau-informatif {
padding-left: 20px;
padding-right: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
.bandeau-informatif .containerLeft {
width: 100%;
}
.bandeau-informatif .containerLeft img {
max-height: 350px;
}
.bandeau-informatif .containerRight {
width: 100%;
align-items: center;
}
.bandeau-informatif .containerRight .introduction p {
font-size: 16px;
line-height: 24px; 
}
.bandeau-informatif .containerRight .texte {
font-size: 14px;
}
.bandeau-informatif .containerRight .bandeau-bouton {
font-size: 12px;
}
}