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

body{
font-family:'Open Sans', sans-serif;
background:#f5f2eb;
color:#222;
overflow-x:hidden;
}
.about{
padding:60px 0;
background:#f5f2eb;
text-align:center;
}
.about h2{
font-family:'Cormorant Garamond',serif;
font-size:55px;
margin-bottom:40px;
color:#4a4725;
}
.about p{font-size:22px;
line-height:1.8;
max-width:1100px;
margin:20px auto;
}

.hero{

height:100vh;

background:
linear-gradient(rgba(0,0,0,0.45),
rgba(0,0,0,0.45)),
url("images/fond.PNG");
background-repeat:no-repeat;
background-size:cover;
background-position:center top;
background-attachment:fixed;

color:white;
}

.hero-elevage{

height:100vh;

background:
linear-gradient(rgba(0,0,0,0.45),
rgba(0,0,0,0.45)),
url("images/chien-fond.jpeg");

background-size:cover;
background-position:center;

color:white;
}
.elevage img{
width:400px;
height:auto;
max-width:100%;
}

nav{
...
}

nav{

display:flex;
justify-content:space-between;
align-items:center;

padding:30px 60px;
}

.top-title{

font-family:'Cormorant Garamond', serif;
font-size:28px;
line-height:1.2;
letter-spacing:2px;
}

nav ul{

display:flex;
list-style:none;
gap:50px;
}

nav a{

color:white;
text-decoration:none;
font-size:20px;
font-weight:400;
transition:0.3s;
}

nav a:hover,
.active{

color:#c8b27a;
}

.hero-content{

height:85vh;

display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
text-align:left;
width:100%
max-width:100%;
margin:auto;
}
.accueil h1,
.accueil h2,
.accueil h3,
.accueil p{
text-align:center;
}

.hero-content h1{

font-family:'Cormorant Garamond', serif;

font-size:60px;
font-weight:300;
line-height:1.1;
letter-spacing:2px;
margin-bottom:20px;
}
.hero-content h1,
.hero-content h2,
.hero-content h3{
text-align:center:}

.hero-content h2{

font-family:'Cormorant Garamond', serif;

font-size:40px;
font-weight:300;
letter-spacing:2px;
margin-bottom:20px;

}

.hero-content h3{

font-family:'Cormorant Garamond', serif;

font-size:22px;
font-weight:300;

margin-top:10px;
}
.accueil{
text-align:center;
width:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding-top:120px;
}

.elevage{
text-align:left;
align-items:flex-start;
}
.accueil h1{
font-size:90px;
}

.accueil h2{
font-size:60px;
}

.accueil h3{
font-size:30px;
}

.elevage h1{
font-size:60px;
}

.elevage h2{
font-size:40px;
}

.elevage h3{
font-size:22px;
}

.separator{

display:flex;
align-items:center;
gap:20px;

margin-top:20px;
}

.separator span{

display:block;

width:150px;
height:1px;

background:white;
}

.btn{

margin-top:40px;

padding:18px 50px;

background:#6d6a2d;

color:white;

text-decoration:none;

font-size:22px;
letter-spacing:1px;

transition:0.3s;
}

.btn:hover{

background:#8b8740;
}

.presentation{

padding:100px 15%;

text-align:center;
background:#f5f2eb;
}

.presentation h2{

font-family:'Cormorant Garamond', serif;

font-size:55px;
font-weight:400;

margin-bottom:40px;

color:#4a4725;
}

.presentation p{

font-size:22px;
line-height:1.8;

max-width:1100px;
margin:20px auto;
}
.services{

display:grid;
grid-template-columns:repeat(4,1fr);

gap:30px;
max-width:1200px;
margin:80px auto;

padding:0 40px;
}

.services{

display:grid;

grid-template-columns:repeat(4, 1fr);

gap:30px;

max-width:1200px;

margin:80px auto;

padding:0 40px;
}

.service-box{

background:#f8f5ee;

padding:40px 25px;

text-align:center;

border-radius:8px;

min-height:260px;

display:flex;

flex-direction:column;

justify-content:center;

transition:0.3s;
}
.service img{

width:80px;

height:80px;

object-fit:cover;

margin:0 auto 20px;

border-radius:8px;
}

.service h3{

font-size:32px;

margin-bottom:15px;

font-family:'Cormorant Garamond', serif;
}

.service p{

font-size:18px;

line-height:1.6;
}

.service-box:hover{

transform:translateY(-5px);
}

.service-box img{

width:80px;

height:80px;

object-fit:cover;

margin:0 auto 20px;

border-radius:8px;
}

.service-box h3{

font-size:32px;

margin-bottom:15px;

font-family:'Cormorant Garamond', serif;
}

.service-box p{

font-size:18px;

line-height:1.6;
}

.service:hover{

transform:translateY(-5px);

box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.service h3{

font-family:'Cormorant Garamond', serif;

font-size:35px;

margin-bottom:20px;

color:#4a4725;
}

.service p{

font-size:18px;
line-height:1.7;
}

.position{

max-width:900px;

margin:0 auto;

text-align:center;
}

.position img{

width:100%;

max-width:500px;

display:block;

margin:0 auto 30px;
}

.position p{

font-size:22px;

line-height:1.8;

margin-bottom:20px;
}
.accueil-bloc{

display:flex;

align-items:center;

justify-content:center;

gap:60px;

max-width:1200px;

margin:80px auto;

padding:0 40px;

flex-wrap:wrap;
}

.video-box video{

width:500px;

border-radius:10px;
}

.texte-box{

max-width:450px;

text-align:left;
}

.texte-box img{

width:220px;

display:block;

margin-bottom:25px;
}

.texte-box p{

font-size:24px;

line-height:1.8;

margin-bottom:20px;
}

.texte-box a{

font-size:24px;

font-weight:bold;

text-decoration:none;

color:#222;
}

.compteur{

margin-top:30px;
}
.accueil-section{

max-width:1200px;

margin:80px auto;

padding:0 20px;
}

.media-row{

display:flex;

align-items:center;

justify-content:center;

gap:40px;

margin-bottom:50px;

flex-wrap:nowrap;
}

.video-box video{

width:500px;
height:320px;
object-fit:cover;
border-radius:12px;
display:block;
box-shadow: 0 5px 15px rgba (0,0,0,0.2);
}

.image-box img{

width:500px;
height:320px;
object-fit:cover;
border-radius:12px;
display:block;
box-shadow: 0 5px 15px rgba (0,0,0,0.2);
}

.texte-accueil{

text-align:center;

max-width:900px;

margin:0 auto;
}

.texte-accueil p{

font-size:24px;

line-height:1.8;

margin-bottom:20px;
}

.texte-accueil a{

font-size:24px;

font-weight:bold;

text-decoration:none;

color:#222;
}
.contact-buttons{
display:flex;
justify-content:center;
gap:25px;
margin-top:40px;
flex-wrap:wrap;
}

.btn-contact{
background:#c8a550;
color:white;
padding:15px 35px;
border-radius:50px;
text-decoration:none;
font-family:'Montserrat', sans-serif;
font-size:16px;
font-weight:600;
transition:0.3s;
}

.btn-contact:hover{
background:#a6843f;
transform:translateY(-3px);
}
 @media screen and (max-width:768px){

html,body{
overflow-x:hidden;
width:100%;
}

/* MENU */

nav{
flex-direction:column;
align-items:center;
padding:20px;
}

nav ul{
flex-direction:column;
gap:20px;
align-items:center;
padding:0;
}

/* HERO */

.hero,
.hero-elevage,
.hero-parc,
.hero-contact,
.hero-collier{

min-height:100vh;
padding:40px 20px;

background-size:cover;
background-position:center center;
background-repeat:no-repeat;
}

/* TITRES */

.hero-content h1{
font-size:42px !important;
line-height:1.1;
text-align:center;
word-break:break-word;
}

.hero-content p{
font-size:20px;
text-align:center;
}

/* BLOCS */

.container,
.cards,
.services,
.features,
.grid{
display:flex;
flex-direction:column;
align-items:center;
width:100%;
gap:30px;
}

/* CARTES */

.card,
.service,
.feature{
width:100% !important;
max-width:100%;
}

/* IMAGES */

img{
max-width:100%;
height:auto;
display:block;
}

/* VIDEOS */

video,
iframe{
width:100% !important;
height:auto !important;
}

/* TEXTE */

h2{
font-size:40px !important;
text-align:center;
}

p{
font-size:20px;
line-height:1.6;
}

/* CONTACT */

.contact-card{
width:100%;
padding:30px 20px;
}

}
/* ============================= */
/* VERSION MOBILE - ELEVAGE      */
/* ============================= */

@media screen and (max-width: 768px) {

    .hero-elevage {
        height: 75vh;
        min-height: 600px;
    }

    .hero-content.elevage {
        padding: 80px 20px 40px;
        width: 100%;
        box-sizing: border-box;
    }

    .elevage h1 {
        font-size: 36px;
        line-height: 1.15;
        margin: 20px 0;
    }

    .elevage h2 {
        font-size: 28px;
        line-height: 1.2;
        margin: 20px 0;
    }

    .elevage h3 {
        font-size: 20px;
        line-height: 1.3;
    }
}