*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans",sans-serif;color:#172334;background:#fff}
a{text-decoration:none;color:inherit}

.header{
position:absolute;
z-index:10;
top:0;
left:0;
width:100%;
padding:22px 5%;
display:flex;
align-items:center;
justify-content:space-between;
color:#fff
}

.logo{display:flex;align-items:center;gap:10px}
.logo-mark{font-size:38px;color:#f27a18;transform:rotate(-12deg)}
.logo strong{display:block;font-family:"Playfair Display",serif;font-size:22px}
.logo small{display:block;font-size:8px;letter-spacing:4px}

.nav{
display:flex;
align-items:center;
gap:28px;
font-size:13px;
font-weight:600
}

.nav a{opacity:.95}
.nav-cta{background:#f47a17;padding:13px 22px;border-radius:30px}

.menu-btn{
display:none;
background:none;
border:0;
color:#fff;
font-size:28px
}


/* =========================
   BACKGROUND PRINCIPAL
   ========================= */

.hero{
min-height:720px;
position:relative;

background:
url("MERZ.jpg")
center center / cover no-repeat;

display:flex;
align-items:center;
padding:120px 7%;
color:#fff
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
90deg,
rgba(10,18,27,.72),
rgba(10,18,27,.12)
)
}

.hero-content{
position:relative;
max-width:700px
}

.eyebrow{
letter-spacing:3px;
font-size:12px;
font-weight:700
}

.hero h1{
font-family:"Playfair Display",serif;
font-size:64px;
line-height:1.04;
margin:15px 0
}

.hero h1 span{color:#ff8a20}

.hero-text{
font-size:17px;
line-height:1.7;
max-width:620px
}

.hero-actions{
display:flex;
gap:14px;
margin-top:30px
}

.btn{
display:inline-block;
border:0;
padding:15px 24px;
border-radius:30px;
font-weight:700;
cursor:pointer
}

.btn-primary{
background:#f47a17;
color:#fff
}

.btn-light{
background:#fff;
color:#172334
}

.scroll{
position:absolute;
bottom:28px;
left:7%;
font-size:12px;
letter-spacing:2px
}


/* =========================
   AVANTAGES
   ========================= */

.benefits{
display:grid;
grid-template-columns:repeat(4,1fr);
padding:38px 6%;
gap:20px;
text-align:center;
background:#fbf8f3
}

.benefits div{
padding:8px 25px;
border-right:1px solid #ddd
}

.benefits div:last-child{border:0}

.benefits span{
font-size:26px;
color:#a45420
}

.benefits h3{
font-size:15px;
margin:10px 0
}

.benefits p{
font-size:12px;
line-height:1.5;
color:#657080
}


/* =========================
   SECTIONS
   ========================= */

.section{
padding:85px 6%
}

.section-head{
display:flex;
justify-content:space-between;
align-items:end;
margin-bottom:35px
}

.section-head h2,
.about h2,
.contact h2{
font-family:"Playfair Display",serif;
font-size:42px;
margin:8px 0
}

.section-head p{
color:#68717c
}

.dark{color:#a65a22}

.outline-link{
border:1px solid #e77b26;
padding:12px 20px;
border-radius:25px;
color:#a5531b;
font-size:13px;
font-weight:700
}


/* =========================
   CIRCUITS
   ========================= */

.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px
}

.card{
border:1px solid #eee;
border-radius:8px;
overflow:hidden;
box-shadow:0 8px 22px rgba(0,0,0,.06);
background:#fff
}

.card img{
width:100%;
height:190px;
object-fit:cover
}

.card-body{padding:20px}

.tag{
display:inline-block;
background:#172334;
color:#fff;
border-radius:15px;
padding:5px 10px;
font-size:9px;
letter-spacing:1px
}

.card h3{
font-family:"Playfair Display",serif;
font-size:23px;
margin:14px 0 8px
}

.card p{
font-size:12px;
line-height:1.6;
color:#66717d;
min-height:58px
}

.card strong{font-size:12px}

.card a{
float:right;
color:#e66d12;
font-weight:700;
font-size:12px
}


/* =========================
   ABOUT
   ========================= */

.about{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:60px;
align-items:center;
background:#fbf8f3
}

.about-image img{
width:100%;
height:460px;
object-fit:cover;
border-radius:8px
}

.about-text p{
line-height:1.7;
color:#68717c
}

.about-text ul{
list-style:none;
padding:0;
line-height:2.2;
font-size:14px
}

.about-text li:before{
content:"✓";
color:#ed7518;
font-weight:bold;
margin-right:10px
}


/* =========================
   GALERIE
   ========================= */

.gallery{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:8px
}

.gallery img{
width:100%;
height:220px;
object-fit:cover;
border-radius:5px
}


/* =========================
   TEMOIGNAGES
   ========================= */

.testimonials{
padding:80px 6%;
background:
linear-gradient(
rgba(25,18,12,.8),
rgba(25,18,12,.9)
),
url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=2200&q=85")
center/cover;
color:#fff
}

.light{color:#fff}

.testimonial-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px
}

.testimonial-grid blockquote{
margin:0;
background:#fff;
color:#27313e;
padding:28px;
border-radius:7px
}

.testimonial-grid p{
font-size:14px;
line-height:1.7
}

.testimonial-grid strong{
display:block;
margin-top:20px
}

.testimonial-grid span{color:#ef7817}


/* =========================
   CONTACT
   ========================= */

.contact{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px
}

.contact-info{
margin-top:30px;
line-height:2;
color:#53606d
}

.contact form{
display:grid;
gap:12px
}

.contact input,
.contact select,
.contact textarea{
width:100%;
padding:15px;
border:1px solid #ddd;
border-radius:5px;
font:inherit
}


/* =========================
   FOOTER
   ========================= */

.footer{
background:#071827;
color:#dce3e9;
padding:55px 6%;
display:grid;
grid-template-columns:1.5fr 1fr 1fr 1fr;
gap:35px;
position:relative
}

.footer h4{
color:#fff;
margin-top:0
}

.footer a,
.footer p{
display:block;
color:#aab5bf;
font-size:12px;
line-height:1.8
}

.footer-logo{
font-family:"Playfair Display",serif;
font-size:24px;
color:#fff
}

.footer-logo span{
display:block;
font-family:"DM Sans",sans-serif;
text-transform:uppercase;
font-size:9px;
letter-spacing:4px;
color:#f47a17
}

.copyright{
grid-column:1/-1;
border-top:1px solid #203241;
padding-top:20px;
font-size:11px;
color:#788794
}


/* =========================
   TABLETTE
   ========================= */

@media(max-width:900px){

.nav{display:none}

.menu-btn{
display:block
}

.nav.open{
position:absolute;
display:flex;
flex-direction:column;
top:75px;
right:5%;
background:#071827;
padding:22px;
border-radius:10px;
gap:18px
}

.hero h1{font-size:47px}

.benefits,
.cards{
grid-template-columns:repeat(2,1fr)
}

.about,
.contact{
grid-template-columns:1fr
}

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

.testimonial-grid{
grid-template-columns:1fr
}

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

}


/* =========================
   MOBILE
   ========================= */

@media(max-width:560px){

.hero{
min-height:650px;
padding:110px 7% 70px
}

.hero h1{
font-size:39px
}

.hero-text{
font-size:14px
}

.hero-actions{
flex-direction:column;
align-items:flex-start
}

.benefits,
.cards{
grid-template-columns:1fr
}

.benefits div{
border-right:0;
border-bottom:1px solid #ddd
}

.section{
padding:60px 6%
}

.section-head{
display:block
}

.outline-link{
display:inline-block;
margin-top:15px
}

.gallery{
grid-template-columns:1fr
}

.gallery img{
height:250px
}

.about-image img{
height:330px
}

.footer{
grid-template-columns:1fr
}

.copyright{
grid-column:auto
}

}