/*
Theme Name: Vanessa Kysel Like
*/
@font-face {
    font-family: "zeitgrotesk";
    font-style: normal;
    font-weight: 400;
    src: url("./dinneuzeitgroteskltw01-_812426.other.woff2") format("woff2");
    unicode-range: U+02C7, U+2021, U+2030, U+E000, U+E002, U+E004, U+E006, U+E009, U+E00B, U+E011;
    font-display: swap;
}

@font-face {
    font-family: 'zeitgrotesk';
    font-style: normal;
    font-weight: 400;
    src: url('./dinneuzeitgroteskltw01-_812426.latin-ext.woff2') format('woff2');
    unicode-range: U+0160-0161, U+0178, U+017D-017E, U+0192, U+2020;
    font-display: swap;
}

@font-face {
    font-family: 'zeitgrotesk';
    font-style: normal;
    font-weight: 400;
    src: url('./dinneuzeitgroteskltw01-_812426.latin.woff2') format('woff2');
    unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122;
    font-display: swap;
}


:root { 
	--menu-bg: rgb(173, 159, 134); 
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: #1A1A1A;
    background: #FFFFFF;
}

body {
    background-color: var(--page-bg, #ffffff);
}
body.single-post {
	background-color: #D5B121;
}
body.single-post h1, body.single-post h2{
	background-color: #D5B121;
   font-family: zeitgrotesk,sans-serif;
   letter-spacing: 0em;
}

.font_0, .police-speleo {
                font-family: zeitgrotesk,sans-serif;
                letter-spacing: 0em;
            }
     
/* Bandeau supérieur */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 2rem;
    background: rgba(213, 177, 33, 1);
    font-family: zeitgrotesk, sans-serif;
}

.topbar .logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.topbar img {
    height: 60px;
}

.topbar .site-title {
/*    font-family: 'Playfair Display', serif;*/
    font-size: 1.8rem;
    letter-spacing: 0.05em;
}

/* Menu */
nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

nav a {
    text-decoration: none;
    color: #1A1A1A;
    font-weight: 600;
}


/* Conteneur du menu */
.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
}

/* Items du menu */
.menu > li {
    position: relative;
}

/* Sous-menu caché par défaut */
.menu .sub-menu {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 0.5rem 0;
    list-style: none;
    margin: 0;
    min-width: 180px;
    z-index: 999;
    flex-direction: column !important;
    transition: opacity 0.2s ease;
    gap: 0rem !important;
    background: rgb(173, 159, 134);
}

/* Affichage au survol */
.menu > li:hover > .sub-menu {
    display: flex !important;
    visibility: visible;
    opacity: 1;
}

.menu .sub-menu li {
    display: block !important;
}

/* Style des liens du sous-menu */
.menu .sub-menu li a {
    display: block;
    padding: 0.6rem 1rem;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
}


/* Slider */
.slider {
    position: relative;
    overflow: hidden;
    height: 70vh;
}

.slider .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    background-size: cover;
    background-position: center;
}

.slider .slide.active {
    opacity: 1;
}

.slider .slide .text-box {
    background: rgba(255,255,255,0.8);
    padding: 2rem;
    max-width: 700px;
    border-radius: 8px;
}

/* Sections */
.section {
    padding: 4rem 2rem;
    max-width: 1100px;
    margin: auto;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}

/* Bandeau de menu avec texte à droite */
.main-menu-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(173, 159, 134);
    padding: 1rem 2rem;
}

.main-menu-bar .menu-left ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.main-menu-bar .menu-left a {
    text-decoration: none;
    color: rgb(31, 31, 31);
    font-weight: 600;
}


.main-menu-bar .menu-right .menu-text {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(31, 31, 31);
    letter-spacing: 0.03em;
}

/* Slider full width */
.slider {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
}

/* Images */
.slider .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
    padding: 0;
}

.slider .slide.active {
    opacity: 1;
}

/* Texte superposé */
.slider .slider-text {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'zeitgrotesk', serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: rgb(213, 177, 33);
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    text-align: center;
    padding: 1rem 2rem;
    width: 8em;
}

.textzone {
    padding: 4rem 2rem;
    background: rgba(213, 177, 33, 1);
}

.textzone-inner {
    max-width: 900px;
    margin: 0 auto;
}

.textzone h2 {
    font-family: 'zeitgrotesk', serif;
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.textzone-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    text-align: center;
}


/* Section pleine largeur pour les image-cards */
.fullwidth-section {
    width: 99vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0;
}

.fullwidth-section.border {
    padding: 3rem;
    padding-right: 2rem;
}

/* Contenu interne en deux colonnes */
.fullwidth-section .wp-block-columns {
    max-width: 1400px; /* largeur max de la zone image-card */
    margin: 0 auto;
    gap: 2rem;
}

/* Footer global */
.site-footer {
    background: rgba(213, 177, 33, 1); /* ton jaune */
    padding: 3rem 2rem;
    margin-top: 0em;
    color: #000; /* texte noir pour bon contraste */
}

/* Conteneur centré */
.footer-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* Style des widgets */
.footer-widget {
    margin-bottom: 1.5rem;
}

/* Liens */
.site-footer a {
    color: #000;
    text-decoration: none;
    font-weight: 600;
}

.site-footer a:hover {
    text-decoration: underline;
}

/* Titre éventuel */
.footer-title {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    font-weight: 700;
}



.content-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    padding-top : 0em;
    text-align: center;
}


.texte-jaune {
	color: rgb(213, 177, 33);
}
.texte-blanc {
	color: rgb(255, 255, 255);
}



.content-inner p,
.content-inner h1 {
    margin: 2em;
}
.wp-block-buttons>.wp-block-button {
    margin: 2em;
}




.vkl-contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 500px;
}

.vkl-contact-form input,
.vkl-contact-form textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.vkl-contact-form button {
    padding: 12px;
    background: #333;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}




/* -------------------------------------------------- */
/*  RESPONSIVE GLOBAL                                  */
/* -------------------------------------------------- */

/* Images fluides */
img {
    max-width: 100%;
    height: auto;
}

/* Conteneurs */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Colonnes flex */
.row {
    display: flex;
    gap: 20px;
}

@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }
}

/* -------------------------------------------------- */
/*  MENU MOBILE – BASE (desktop hidden)                */
/* -------------------------------------------------- */

/* Cacher le menu mobile sur desktop */
#mobile-menu,
.mobile-menu-toggle {
    display: none;
}
/* Masquer la flèche en desktop */
.submenu-toggle {
    display: none;
}

/* -------------------------------------------------- */
/*  MENU MOBILE – STYLE                                */
/* -------------------------------------------------- */
@media (max-width: 768px) {

    /* Cacher le menu desktop */
    .main-menu-bar {
        display: none !important;
    }

    /* Bouton hamburger */
    .mobile-menu-toggle {
        display: block;
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 20000;
    }

    #menu-open {
        font-size: 32px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--menu-color, #000);
    }

    /* Menu mobile plein écran */
    .mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--menu-bg, #fff);
        color: var(--menu-color, #000);
        transform: translateX(100%);
        transition: transform 0.3s ease;
        z-index: 9999;
        padding: 80px 30px 30px;
        overflow-y: auto;
    }

    .mobile-menu.open {
        transform: translateX(0);
    }

    /* Bouton fermer */
    #menu-close {
        position: absolute;
        top: 20px;
        right: 75px;
        font-size: 32px;
        background: none;
        border: none;
        color: inherit;
        cursor: pointer;
        z-index: 30000;
        display: block !important;
    }

    /* Liste du menu mobile */
    .mobile-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-menu-list li {
        margin-bottom: 20px;
    }

    .mobile-menu-list a {
        color: inherit;
        text-decoration: none;
        font-size: 22px;
        display: block;
        width: 100%;
    }

    #mobile-menu {
        display: block;
    }

    /* Cacher le hamburger quand le menu est ouvert */
    #menu-open.hidden,
    .mobile-menu-toggle.hidden {
        display: none !important;
    }

    /* Forcer le menu mobile en vertical */
    .mobile-menu-list,
    .mobile-menu-list > li {
        display: block !important;
        width: 100%;
    }

	/* -------------------------------------------------- */
	/*  SOUS-MENUS MOBILE – VERSION CLEAN                 */
	/* -------------------------------------------------- */
/* Afficher la flèche uniquement en mobile */
/* Mobile : flèche visible */
.submenu-toggle {
    display: inline-block;
    margin-left: 10px;
    cursor: pointer;
    font-size: 20px;
    flex-shrink: 0;
    transform: translateY(2px);
}

	
	/* Le LI reste un bloc classique */
	.mobile-menu-list .menu-item-has-children {
	    display: block;
	}
	
	/* Wrapper lien + flèche sur une ligne */
	.mobile-menu-list .menu-item-has-children > .menu-item-header {
	    /*display: flex;*/
	    align-items: center;
	    justify-content: space-between;
	    width: 100%;
	}
	
	/* Le lien ne prend pas 100% de la largeur */
	.mobile-menu-list .menu-item-has-children > .menu-item-header > a {
	    flex: 1 1 auto;
	    display: inline-block; /* block */
	    width: auto;
	}
	
	/* Flèche */
	.mobile-menu-list .menu-item-has-children > .menu-item-header > .submenu-toggle {
	    margin-left: 10px;
	    cursor: pointer;
	    font-size: 20px;
	    flex-shrink: 0;
	    display: inline-block;
	    transform: translateY(2px);
	}
	
	/* Sous-menu caché par défaut */
	.mobile-menu-list .menu-item-has-children > .sub-menu {
	    display: none;
	    padding-left: 20px;
	    margin-top: 10px;
	}
	
	/* Sous-menu ouvert */
	.mobile-menu-list .menu-item-has-children.open > .sub-menu {
	    display: block;
	}
	
	/* Flèche tournée quand ouvert */
	.mobile-menu-list .menu-item-has-children.open > .menu-item-header > .submenu-toggle {
	    transform: rotate(90deg) translateY(2px);
	}


}