/* =========================
RESET
========================= */

a{
     font-family:"Cormorant Garamond",serif;
}

h2{
     font-family:"Cormorant Garamond",serif;
}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode:normal!important;
}

*{
box-sizing:border-box;
margin:0;
padding:0;
}
html{
scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
	font-family: "Roboto Condensed", sans-serif;
letter-spacing:3px;
font-size:12px;
}


.site-header{
    width:100%;
    font-family:Arial;
}

/* TOP BAR */

.header-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 20px;
}

.logo-left img{
    height:170px;
    position:absolute;
	top:2rem;
}

.header-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.top-links a{
    text-decoration:none;
    color:#666;
    font-size:14px;
    margin-right:10px;
}

.top-icons span{
    font-size:18px;
    margin-right:10px;
}

/* BOUTON */

.btn-voyage{
    background:#c81f3c;
    color:white;
    padding:12px 20px;
    border-radius:4px;
    text-decoration:none;
    font-weight:bold;
}

/* NAV */

.main-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
    padding:15px;

    position:relative;
}

.main-nav ul{
    list-style:none;
    display:flex;
	margin-left: 8rem;
    gap:35px;
}

.main-nav a{
    text-decoration:none;
    color:#333;
    font-weight:600;
}

.logo-coeur{
    height:45px;
}

/* OUTILS */

.nav-tools{
    margin-left:30px;
}

/* =========================
RANGÉES DE VIGNES STYLE LOGO
========================= */

.header-wave{
    position:relative;
    height:150px;

    background:#a9262c;

    clip-path: polygon(
        0 40%,
        100% 10%,
        100% 100%,
        0% 100%
    );

    overflow:hidden;
}

/* illustration vignoble Salagou */

.header-wave::before{

content:"";

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background-image:url("https://les-vignobles-du-salagou.fr/wp-content/uploads/2026/03/illustration-salagou-2.png");

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

opacity:0.2; /* discret */

mix-blend-mode:soft-light;

pointer-events:none;

}



/* HAMBURGER */

.menu-toggle{
    display:none;
    width:40px;
    height:30px;
    background:none;
    border:none;
    cursor:pointer;

    flex-direction:column;
    justify-content:space-between;
}

.menu-toggle span{
    display:block;
    height:4px;
    width:100%;
    background:#a9262c;
    border-radius:2px;
}

.menu-toggle span{
    display:block;
    height:4px;
    width:100%;
    background:#a9262c;
    border-radius:2px;
    transition:0.3s;
}

/* animation croix */

.menu-toggle.active span:nth-child(1){
    transform:rotate(45deg) translate(6px,6px);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translate(6px,-6px);
}

/* MENU */

.nav-menu{
    display:flex;
}

.has-dropdown{
    position:relative;
}

.dropdown{
    position:absolute;
    top:100%;
    left:0;

    background:white;
    list-style:none;

    min-width:220px;
    padding:0;
    margin:0;

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:0.25s;
}

/* liens */

.dropdown li{
    border-bottom:1px solid #eee;
}

.dropdown a{
    display:block;
    padding:12px 15px;
    text-decoration:none;
    color:#333;
}

/* affichage */

.has-dropdown:hover .dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.nav-menu li{
    position:relative;
}

.has-dropdown{
    position:relative;
}

.dropdown{
    position:absolute;
    top:100%;
    left:0;

    background:white;
    list-style:none;

    min-width:200px;
    padding:5px 0;
    margin:0;

    display:block;

    border-radius:6px;
    box-shadow:0 10px 20px rgba(0,0,0,0.15);

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:0.2s;

    z-index:999;
}

.has-dropdown:hover .dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown li{
    border:none;
}

.dropdown a{
    display:block;
    padding:10px 18px;
    text-decoration:none;
    color:#333;
    font-size:14px;
}

.dropdown a:hover{
    background:#f5f5f5;
}

.main-nav{
    position:relative;
    z-index:10;
}
/* RESPONSIVE */

@media (max-width:900px){

  .header-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 20px;

    min-height:90px;

}

  .logo-left{

    position:relative;

    z-index:100;

}

.logo-left img{

    position:static;

    display:block;

    height:90px;

    width:auto;

}

    .menu-toggle{
        display:flex;
    }

    .header-right{
        display:none;
    }

    .nav-tools{
        display:none;
    }

    .header-wave{
        display:none;
    }

    .main-nav{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    padding:0 20px 15px;

    background:#fff;

}

    /* MENU MOBILE */

    .nav-menu{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:white;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;

        max-height:0;
        overflow:hidden;
        transition:0.3s;

        text-align:center;
        padding-top:20px;
		z-index:100;
    }

    .nav-menu.open{
        max-height:100vh;
    }

    .nav-menu li{
        width:100%;
        border-bottom:1px solid #eee;
    }

    .nav-menu a{
        display:block;
        padding:18px;
        text-align:center;
    }

}

/* =========================
HERO VIDEO
========================= */

.hero{
position:relative;
height:70vh;
overflow:hidden;
}

.hero-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
}

.hero-video iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
}

.hero-overlay{
position:relative;
z-index:2;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:white;
text-align:center;
background:rgba(0,0,0,0.45);
padding:20px;
}

.hero h1{
font-size:48px;
margin-bottom:10px;
}

.hero p{
font-size:20px;
max-width:600px;
}

.hero-btn{
margin-top:20px;
background:#a80000;
color:white;
padding:12px 28px;
text-decoration:none;
border-radius:5px;
font-weight:500;
transition:0.2s;
}

.hero-btn:hover{
background:#7f0000;
}


/* =========================
CONTAINER
========================= */

.container{
max-width:1100px;
margin:auto;
padding:60px 20px;
}


/* =========================
INTRO
========================= */

.home-intro{
text-align:center;
background:#fafafa;
}

.home-intro h2{
font-size:32px;
margin-bottom:15px;
}

.home-intro p{
max-width:700px;
margin:auto;
font-size:18px;
}


/* =========================
GRID CARDS
========================= */

.home-grid{
background:#a9262c;
}

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

.home-card{
border:1px solid #eee;
padding:30px;
text-decoration:none;
color:#333;
border-radius:8px;
transition:0.25s;
background:white;
}

.home-card h3{
margin-bottom:10px;
font-size:22px;
}

.home-card p{
color:#666;
}

.home-card:hover{
box-shadow:0 5px 20px rgba(0,0,0,0.08);
transform:translateY(-3px);
}


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

.site-footer{
background:#222;
color:white;
text-align:center;
padding:30px 20px;
margin-top:60px;
}

/* =========================
FIX DROPDOWN MENU
========================= */

.nav-menu li.has-dropdown{
    position:relative;
}

/* dropdown propre */

.nav-menu li .dropdown{
    display:block !important;
    position:absolute;
    top:100%;
    left:0;

    background:white;
    list-style:none;

    min-width:220px;
    padding:8px 0;
    margin:0;

    border-radius:6px;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:0.2s;

    z-index:999;
}

/* affichage */

.nav-menu li.has-dropdown:hover .dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* items dropdown */

.nav-menu li .dropdown li{
    display:block;
    width:100%;
}

.nav-menu li .dropdown a{
    display:block;
    padding:12px 18px;
    font-size:16px;
    text-align:left;
}

.nav-menu li .dropdown a:hover{
    background:#f5f5f5;
}
/* =========================
RESPONSIVE
========================= */

@media(max-width:900px){



.home-grid .grid{
grid-template-columns:1fr;
}

.hero h1{
font-size:34px;
}

.hero p{
font-size:18px;
}

}


.salagou-footer{

background:#a9262c;
color:white;
margin-top:60px;
font-family:system-ui;

}

.footer-container{

width:95%;
margin:auto;
padding:50px 20px;

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:40px;

}

.footer-col h3,
.footer-col h4{

margin-bottom:15px;
color:#fff;

}

.footer-col p{

font-size:14px;
line-height:1.6;
color:#fff;

}

.footer-col ul{

list-style:none;
padding:0;
margin:0;

}

.footer-col ul li{

margin-bottom:8px;

}

.footer-col ul a{

color:#fff;
text-decoration:none;
font-size:14px;

}

.footer-col ul a:hover{

color:#4c7cff;

}

.social{

display:flex;
flex-direction:column;
gap:6px;

}

.social a{

color:#d1d5db;
text-decoration:none;
font-size:14px;

}

.social a:hover{

color:#fff;

}

.footer-bottom{

border-top:1px solid rgba(255,255,255,0.1);
text-align:center;
padding:20px;
font-size:13px;
color:#9ca3af;

}

.footer-gallery{

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

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

}

.footer-gallery img{

width:100%;
height:120px;
object-fit:cover;
border-radius:8px;

transition:transform 0.3s;

}

.footer-gallery img:hover{

transform:scale(1.05);

}

/* responsive */

@media(max-width:700px){

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

}

@media(max-width:450px){

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

}

.social-gallery{
display:flex;
gap:25px;
align-items:flex-start;
}

.social{
display:flex;
flex-direction:column;
gap:12px;
min-width:110px;
}

.footer-gallery{
display:grid;
grid-template-columns:repeat(3,100px);
gap:10px;
margin-top: -3rem;
}

.footer-gallery img{
width:90px;
height:90px;
object-fit:cover;
border-radius:10px;
transition:transform .3s;
}

.footer-gallery img:hover{
transform:scale(1.08);
}


#lightbox{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.9);

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

opacity:0;
pointer-events:none;

transition:opacity .3s;

z-index:9999;

}

#lightbox.active{
opacity:1;
pointer-events:auto;
}

#lightbox img{

max-width:90%;
max-height:90%;

border-radius:10px;

transform:scale(0.8);
transition:transform .3s;

}

#lightbox.active img{
transform:scale(1);
}

#lightbox-close{

position:absolute;
top:30px;
right:40px;

font-size:30px;
color:white;

cursor:pointer;

}




.salagou-presentation{
padding:80px 20px;
background:#f7f7f7;
}

.presentation-container{
max-width:1200px;
margin:auto;
display:flex;
gap:60px;
align-items:center;
}

.presentation-text{
flex:1;
}

.presentation-text h1{
font-size:32px;
margin-bottom:20px;
}

.presentation-text p{
line-height:1.7;
margin-bottom:15px;
font-family:"Inter",sans-serif;
font-size: 18px;
    line-height: 1.7;
    margin-bottom: 18px;
    color: #444;
}

/* SLIDER */

.presentation-slider{
flex:1;
overflow:hidden;
}

.slider{
display:flex;
gap:10px;
transition:transform .5s ease;
}

.slider img{
width:260px;
height:320px;
object-fit:cover;
border-radius:12px;
flex-shrink:0;
}

/* DOTS */

.slider-dots{
display:flex;
justify-content:center;
gap:8px;
margin-top:15px;
}

.dot{
width:10px;
height:10px;
background:#ccc;
border-radius:50%;
cursor:pointer;
transition:.3s;
}

.dot.active{
background:#8b1f22;
transform:scale(1.3);
}

/* RESPONSIVE */

@media(max-width:900px){

.presentation-container{
flex-direction:column;
}

.presentation-slider{
width:100%;
}

.slider img{
width:220px;
height:260px;
}

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

}

.home-intro{

background-image:url("https://les-vignobles-du-salagou.fr/wp-content/uploads/2026/03/IMG_9454-rotated.jpeg");

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

background-attachment:fixed;

padding:120px 20px;

color:white;
text-align:center;

position:relative;

}

/* voile sombre pour lire le texte */

.home-intro::before{

content:"";

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.45);

}

.home-intro .container{
position:relative;
z-index:2;
}

.home-intro h2{
font-size:36px;
margin-bottom:20px;

}

.home-intro p{
max-width:700px;
margin:auto;
font-size:18px;
line-height:1.6;
}


.salagou-footer{
background:#a9262c;
color:white;
margin-top:60px;
font-family:system-ui;
position:relative;
overflow:hidden;
}

/* illustration lac du Salagou */

.salagou-footer::before{

content:"";

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background-image:url("https://les-vignobles-du-salagou.fr/wp-content/uploads/2026/03/illustration-lac-du-salagou.png");

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

opacity:0.08; /* discret */

pointer-events:none;

}

.footer-container,
.footer-bottom{
position:relative;
z-index:2;
}


.salagou-presentation{
padding:80px 20px;
background:#f7f7f7;
position:relative;
overflow:hidden;
}

/* illustration vignoble Salagou */

.salagou-presentation::before{

content:"";

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background-image:url("https://les-vignobles-du-salagou.fr/wp-content/uploads/2026/03/illustration-salagou-2.png");

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

opacity:0.08; /* discret */

mix-blend-mode:multiply;

pointer-events:none;

}

/* contenu au dessus */

.presentation-container{
position:relative;
z-index:2;
}


.salagou-map-explain{
padding:120px 20px;
color:#fff;
background:#a9262c;
}

/* CONTAINER */

.map-explain-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}

/* IMAGE GAUCHE */

.map-explain-image{

background-image:url("https://les-vignobles-du-salagou.fr/wp-content/uploads/2026/03/illustration-salagou-2.png");

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

height:600px;
border-radius:20px;

position:sticky;
top:120px;

opacity:0.9;
filter:contrast(0.9);

}

/* TEXTE */

.map-explain-text h2{
font-size:36px;
margin-bottom:25px;
}

.map-explain-text p{
font-size:18px;
line-height:1.7;
margin-bottom:18px;
color:#fff;
}

/* BOUTON */

.btn-carte{

display:inline-block;
margin-top:25px;

background:#a9262c;
color:white;

padding:14px 28px;

text-decoration:none;
border-radius:8px;

font-size:16px;
font-weight:600;

transition:0.25s;

}

.btn-carte:hover{

background:#7d1c20;
transform:translateY(-2px);

}

/* RESPONSIVE */

@media(max-width:900px){

.map-explain-container{
grid-template-columns:1fr;
gap:40px;
}

.map-explain-image{
height:320px;
position:relative;
top:auto;
}

.map-explain-text h2{
font-size:28px;
}

.map-explain-text p{
font-size:16px;
}

}

.geo-tooltip{
position:relative;
display:inline-block;
margin-top: 2rem;
}

.geo-tooltip img {
	width:100px;
}

.tooltip-text{

visibility:hidden;

position:absolute;
bottom:120%;
left:50%;

transform:translateX(-50%);

background:#333;
color:#fff;

padding:8px 12px;

border-radius:6px;

font-size:14px;
white-space:nowrap;

opacity:0;
transition:0.25s;

z-index:9999;   /* AJOUT IMPORTANT */

}

.geo-tooltip:hover .tooltip-text{
visibility:visible;
opacity:1;
}


.top-icons a{
font-size:20px;
margin-left:12px;
color:#333;
transition:0.2s;
}

.top-icons a:hover{
color:#a9262c;
transform:translateY(-2px);
}

[class^="ri-"], [class*=" ri-"]

 {
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 30px!important;
	color:#a9262c;
}

.top-icons a{
font-size:22px;
margin-left:14px;
color:#a9262c;
transition:0.2s;
}

.top-icons a:hover{
transform:translateY(-3px);
opacity:0.8;
}

.top-icons a{
text-decoration:none !important;
}

a {
    text-decoration: none;
}


/* ACTUALITES SALAGOU */

.salagou-actualites .actualites-container{
max-width:1200px;
margin:60px auto;
padding:0 20px;
}

.salagou-actualites .page-title{
font-size:38px;
font-weight:700;
margin-bottom:50px;
text-align:center;
}

.salagou-actualites .actualites-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
}

.salagou-actualites .actu-card{
background:white;
border-radius:14px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:all .25s ease;

}

.salagou-actualites .actu-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0,0,0,0.18);
}

.salagou-actualites .actu-card a{
text-decoration:none;
color:inherit;
display:block;
height:100%;
}

.salagou-actualites .actu-img img{
width:100%;
height:230px;
object-fit:cover;
display:block;
}

.salagou-actualites .actu-content{
padding:20px;
}

.salagou-actualites .actu-title{
font-size:22px;
font-weight:600;
margin-bottom:8px;
line-height:1.3;
}

.salagou-actualites .actu-date{
font-size:13px;
color:#888;
margin-bottom:10px;
}

.salagou-actualites .actu-excerpt{
font-size:15px;
line-height:1.6;
color:#444;
}

.salagou-actualites .pagination{
margin-top:60px;
text-align:center;
}

.salagou-actualites .pagination a,
.salagou-actualites .pagination span{
display:inline-block;
margin:4px;
padding:8px 14px;
border-radius:6px;
background:#f3f3f3;
text-decoration:none;
}

.salagou-actualites .pagination .current{
background:#c62828;
color:white;
}


.gallery-thumbs{
display:flex;
gap:8px;
margin-top:10px;
flex-wrap:wrap;
}

.gallery-thumbs img{
width:70px;
height:70px;
object-fit:cover;
border-radius:6px;
cursor:pointer;
opacity:0.7;
transition:.2s;
border:2px solid transparent;
}

.gallery-thumbs img:hover{
opacity:1;
transform:scale(1.05);
}

.gallery-thumbs img.active{
border-color:#a9262c;
opacity:1;
}