{
box-sizing: border-box;
}

html,
body {
margin: 0;
padding: 0;
width: 100%;
}

body {
font-family: Arial, Helvetica, sans-serif;
background-color: #f2f5f8;
color: #263238;
line-height: 1.6;
}

header {
width: 100%;
background-color: #123b5d;
color: white;
text-align: center;
padding: 35px 20px;
}

header h1 {
margin: 0;
font-size: 2.5rem;
}

header p {
margin: 5px 0 0;
font-size: 1.1rem;
}

.conteneur {
display: flex;
width: 100%;
min-height: 600px;
margin: 0;
}

nav {
width: 220px;
background-color: #0b2940;
padding: 30px 20px;
flex-shrink: 0;
}

nav h2 {
color: white;
font-size: 1.3rem;
margin-top: 0;
}

nav ul {
list-style: none;
padding: 0;
margin: 0;
}

nav li {
margin-bottom: 10px;
}

nav a {
display: block;
color: white;
text-decoration: none;
padding: 12px;
border-radius: 5px;
}

nav a:hover {
background-color: #1d628f;
}

main {
flex: 1;
width: 100%;
background-color: white;
padding: 45px;
}

main h2 {
color: #123b5d;
margin-top: 0;
}

.hero {
display: flex;
align-items: center;
gap: 40px;
margin-bottom: 55px;
}

.hero > div {
flex: 1;
}

.hero img {
width: 45%;
max-height: 300px;
object-fit: cover;
border-radius: 10px;
}

.hero h2 {
font-size: 2rem;
}

.bouton {
display: inline-block;
background-color: #168aad;
color: white;
text-decoration: none;
padding: 12px 22px;
border-radius: 5px;
margin-top: 10px;
}

.bouton:hover {
background-color: #116f8c;
}

.cartes {
display: flex;
gap: 20px;
margin-top: 25px;
}

.cartes article {
flex: 1;
background-color: #eef5f8;
border-left: 4px solid #168aad;
padding: 22px;
border-radius: 5px;
}

.cartes h3 {
color: #123b5d;
margin-top: 0;
}

.prix {
font-weight: bold;
color: #168aad;
}

.contact {
margin-top: 45px;
padding: 25px;
background-color: #eef5f8;
border-radius: 5px;
}

footer {
width: 100%;
background-color: #123b5d;
color: white;
text-align: center;
padding: 25px 20px;
}

footer p {
margin: 5px;
}

@media (max-width: 750px) {
.conteneur {
flex-direction: column;
}

nav {
    width: 100%;
}

nav ul {
    display: flex;
    gap: 10px;
}

nav li {
    margin: 0;
}

main {
    padding: 25px;
}

.hero {
    flex-direction: column;
}

.hero img {
    width: 100%;
}

.cartes {
    flex-direction: column;
}


}