*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Montserrat;
background:white;
color:#111;
}

/* HEADER */

.header{
text-align:center;
padding:25px;
border-bottom:1px solid #eee;
}

.logo{
font-family:Montserrat;
font-size:40px;
letter-spacing:4px;
margin-bottom:15px;
}

.menu{
display:flex;
justify-content:center;
gap:30px;
}

.menu a{
text-decoration:none;
color:black;
font-size:14px;
font-weight:500;
text-transform:uppercase;
}

.menu a:hover{
color:#e6005c;
}

.header{
    text-align: center;
    padding: 20px 0;
}

/* Logo */
.logo img{
    width: 180px; /* taille du logo */
    height: auto;
    display: block;
    margin: 0 auto 15px auto;
}

/* Menu */
.menu ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu li{
    display: inline-block;
    margin: 0 15px;
}

.menu a{
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: black;
    font-weight: 500;
}

/* HERO */

.hero{
position:relative;
width:100%;
height:500px;
overflow:hidden;
}

.hero img{
width:120%;
height:100%;
object-fit:cover;
}

.hero-text{
position:absolute;
bottom:40px;
left:40px;
color:white;
max-width:500px;
}

.hero-text h1{
font-family:Playfair Display;
font-size:40px;
margin-bottom:10px;
}

/* ARTICLES GRID */

.articles{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

padding:40px;
max-width:1200px;
margin:auto;

}

.card{
cursor:pointer;
}

.card img{

width:70%;
height:300px;
object-fit:cover;

transition:0.3s;

}

.card:hover img{
transform:scale(1.05);
}

.card h2{

margin-top:10px;
font-size:15px;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

/* FOOTER */

footer{
text-align:center;
padding:30px;
background:#cdfaf6;
color:black;
}

.category{

max-width:1200px;
margin:auto;
padding:40px;

}

.category h1{

font-family:Playfair Display;
font-size:40px;
margin-bottom:30px;

}

.footer{
    background:white;
    color:black;
    text-align:center;
    padding:20px;
}

.social{
    margin-bottom:10px;
}

.social a{
    color:black;
    margin:0 10px;
    text-decoration:none;
    font-weight:500;
}

.social a:hover{
    color:#ff4d6d;
}

/* RESPONSIVE */

@media(max-width:900px){

.articles{
grid-template-columns:repeat(2,1fr);
}

.hero{
height:400px;
}

}

@media(max-width:600px){

.menu{
flex-wrap:wrap;
gap:15px;
}

.articles{
grid-template-columns:1fr;
padding:20px;
}

.hero{
height:300px;
}

.hero-text h1{
font-size:26px;
}

}

/* HERO CONTACT */
.hero-contact {
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('images/night.jpg') center/cover no-repeat;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero-contact h1 {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    margin-bottom: 10px;
}

.hero-contact p {
    font-size: 18px;
    color: #f0f0f0;
}

/* FORMULAIRE CONTACT */
.contact {
    max-width: 700px;
    margin: -60px auto 80px; /* remonte un peu le formulaire sur le Hero */
    padding: 50px 30px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.contact form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact input,
.contact textarea {
    padding: 15px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.contact input:focus,
.contact textarea:focus {
    outline: none;
    border-color: #e6005c;
    box-shadow: 0 0 10px rgba(230,0,92,0.2);
}

.contact textarea {
    min-height: 150px;
    resize: vertical;
}

.contact button {
    padding: 15px;
    background: #111;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.3s ease;
}

.contact button:hover {
    background: #e6005c;
}

.social{
margin-bottom:15px;
}

.social a{
color:black;
font-size:22px;
margin:0 12px;
transition:0.3s;
}

.social a:hover{
color:#e6005c;
transform:scale(1.2);
}

/* RESPONSIVE */
@media(max-width:900px){
    .hero-contact {
        height: 250px;
    }
    .hero-contact h1 {
        font-size: 36px;
    }
}

@media(max-width:600px){
    .hero-contact {
        height: 200px;
    }
    .hero-contact h1 {
        font-size: 28px;
    }
    .contact {
        margin: -40px 15px 60px;
        padding: 30px 20px;
    }
}