:root { 

--vert-fonce:#2F5B2A; 
--vert-clair:#6FAE3E; 

--bleu-fonce:#123F55; 
--bleu-clair:#5CA6B8; 

--ocre:#B8A06A; 
--beige:#F3EEE3; 

--texte:#343A32; 

} 

body { 

margin:0; 
font-family:'Lato', sans-serif; 
color:var(--texte); 
line-height:1.7;
blackground:#F9F6EF;

} 

h1 { 
font-family:'Cormorant Garamond', serif; 
color:var(--texte); 
} 

h2 { 
font-family:'lato', sans-serif; 
color:var(--bleu-fonce); 
font-weight:700;
} 

h3 { 
font-family:'Lato', sans-serif; 
color:var(--bleu-fonce); 
font-weight:700; 
} 

h2 { 
font-size:46px; 
font-weight:700; 
margin-bottom:35px; 
letter-spacing:0.5px;
}

header {
padding:45px 15%; 
text-align:center; 
background:var(--beige);
} 

.logo-zone img {
width:600px; 
} 

.logo-zone h1 {
font-family: "Lato", sans-serif;
font-size:22px;
font-weight:400;
line-height:1.5;
color:var(--bleu-fonce);
margin-top:40px; 
} 

.logo-zone h1 span {
color:var(--ocre);
padding:0 10px;
}

.logo-zone p {
font-size:20px; 
max-width:800px; 
margin:auto; 
} 

section {

max-width:1000px; 
margin:auto; 
padding:70px 40px; 
} 

section p {
text-align: justify; 
margin-bottom: 18px; 
} 

.points { 
display:grid; 
grid-template-columns:repeat(2,1fr);
gap:25px;
} 

.points div {
padding:25px; 
background:#faf8f2;
border-left:4px solid var(--ocre); 
} 

.points h3 {
font-family:'Lato', sans-serif; 
font-size:19px; 
color:#5355E74; 
font-weight:700;
margin-bottom:8px; 
} 

.points p {
color :#666;
font-size:15px;
line-height:1.6;
}

.bloc-expertises {
background:white;
padding:30px; 
box-shadow:0 8px 25px rgba(0,0,0,0.08); 
border-radius:8px; 
border-top:5px solid var(--ocre);
margin-top:40px 0; 
margin-bottom:40px; 
}

.bloc-expertises h2 { 
color:var(--bleu-fonce);
text-align:justify;
margin-bottom:30px;
}

.expertise-item {
display:flex;
gap:30px;
padding:30px 0;
border-bottom:1px solid rgba(184,160,106,0.4);
}

.expertise-item:last-child {
border-bottom:none;
}

.numero {
font-family:'Cormorant Garamond', serif;
font-size:48px;
font-weight:700;
color:var(--ocre);
line-height:1;
width:70px;
flex-shrink:0;
text-align:center;
}

.expertise-item h3 {
font-family:'Lato', sans-serif;
color:var(--bleu-fonce);
font-size:26px;
margin:0 0 10px 0;
font-weight:700;
}

.expertise-item p {
text-align:left;
margin:0 0 10px 0;
}

.mots-cles {
font-size:15px;
color:var(--bleu-fonce);
opacity:0.75;
font-style:italic;
font-weight:550;
}

.experience {
display:flex;
gap:30px;
align-items:center;
} 

.texte-experience {
flex:1;
}

.texte-experience p {
texte-align:justify; 
margin-bottom:18px;

} 

.experience img {
width:320px; 
border-radius:10px;
} 

footer { 

background:var(--beige);
color:var(--vert-fonce); 
text-align:center; 
padding:50px; 

display:flex;
flex-direction:column;
align-items:center;

} 

footer img {
width:300px; 
margin-bottom:50px;
} 


@media(max-width:800px){

.experience{ 
flex-direction:column; 
} 

.ligne-terrain{ 
display:none; 
} 

} 

@media(max-width:900px){

.points {
flex-wrap:wrap;
} 

.points div {
min-width:250px;
} 

} 
.menu {
position:sticky;
top:0;

display:flex;
justify-content:center; 
gap:40px; 

background:rgba(255,255,255,0.95); 

padding:15px 20px; 

z-index:10; 

border-bottom:2px solid rgba(184,160,106,0.4); 
} 

.menu a {
text-decoration:none; 
color:var(--bleu-fonce);
font-weight:700; 
} 

.menu a:hover {
color:var(--ocre); 
} 

html {
scroll-behavior:smooth; 
} 




.bouton-contact {

display:inline-block;

margin-top:10px;

padding:14px 35px;

background:var(--ocre);

color:white;

text-decoration:none;

font-weight:700;

border-radius:30px;

font-size:18px;

transition:0.3s;

}


.bouton-contact:hover {

background:var(--bleu-fonce);


}

/* Version mobile */

@media (max-width: 700px) {


body {
    font-size:16px;
}


/* Menu */

.menu {

    gap:15px;
    padding:10px;

    flex-wrap:wrap;

}


.menu a {

    font-size:14px;

}


/* Bandeau haut */

header {

    padding:40px 20px;

}


.logo-zone img {

    width:280px;

}


.logo-zone h1 {

    font-size:20px;
    margin-top:25px;

}


.logo-zone p {

    font-size:16px;

}


/* Sections */

section {

    padding:40px 20px;

}


h2 {

    font-size:34px;

}



/* Les 4 blocs présentation */

.points {

    grid-template-columns:1fr;

}


/* Bloc expertise */

.bloc-expertises {

    padding:30px 20px;

}


.expertise-item {

    display:block;

}


.numero {

    margin-bottom:10px;

    font-size:40px;

}


/* Expérience */

.experience {

    flex-direction:column;

    gap:30px;

}


.experience img {

    width:80%;

}


/* Footer */

footer {

    padding:40px 20px;

}


footer img {

    width:220px;

}

}