/*
 Theme Name:   L'Etang Neuf
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Blocksy Child Theme
 Author:       SLWD
 Author URI:   https://slwd.fr
 Template:     storefront
 Version:      1.0.0
*/


/* ======== THE SEASONS ======== */

@font-face {
    font-family: 'TheSeasons';
    src: url('/wp/wp-content/themes/storefront-child/assets/fonts/the-seasons-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'TheSeasons';
    src: url('/wp/wp-content/themes/storefront-child/assets/fonts/TheSeasons-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


/* ======== BIMBO ======== */

@font-face {
    font-family: 'Bimbo';
    src: url('assets/fonts/Bimbo-thin.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Bimbo';
    src: url('assets/fonts/Bimbo-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

:root {
    --primary-color: #6e8f6b;
    /* Vert Olive */
    --background-color: rgb(110, 143, 107, 0.25);
    /* Background color */
    --secondary-color: #f4f1ea;
    /* Beige */
    --primary-text-color: #130C00;
    /* Noir */
    --secondary-text-color: #fff;
    /* BLANC */

}

.site-content .content-area {
    width: 100% !important;
    margin: 0 auto;
}

.col-full {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.site-content .widget-area {
    display: none;
}

html {
    scroll-behavior: smooth;
    /* Animation de défilement fluide */
}

body {
    background-color: var(--secondary-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "the-seasons", sans-serif;
    color: var(--primary-text-color);
}


p {
    font-family: 'Arsenal';
}

h1 {
    font-size: 48px;
    font-weight: 600;
}

h2 {
    font-size: 38px;
    font-weight: 600;
}

h3 {
    font-size: 28px;
    font-weight: 600;
}

h4 {
    font-size: 24px;
    font-weight: 600;
}

p,
ul,
li {
    font-size: 16px;
    color: var(--primary-text-color);
}

a {
    text-decoration: none !important;
    transition: 0.3s;
    color: var(--primary-text-color);
}

a:focus,
button:focus {
    outline: none !important;
}

a:hover {
    color: var(--primary-text-color);
    cursor: pointer;
}

/* Masquer les titres uniquement sur les pages */
.page .entry-title {
    display: none;
}


.content-area {
    width: 100%;
}



/******* HEADER ******/
.site-header {
    padding-top: 0;
    background-color: var(--secondary-color);
    border: none;
}

header {
    width: 1300px;
    margin: 0 auto;
}

.container-header {
    display: flex;
    flex-wrap: inherit;
    justify-content: space-between;
    align-items: center;
}

.logo_header img {
    height: 100px !important;
    width: auto;
}

.header-right {
    display: flex;
    flex-direction: row;
    justify-content: end;
}


.navbar-nav {
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 50px;
    font-size: 15px;
    font-weight: 600;
    justify-content: end;
    align-items: baseline;
    margin: 0;

    li {
    padding-left: 0 !important;
    }

    ::before {
        content: "";
    }
}

nav ul li {
    float: left;
    width: auto;
    text-align: center;
    position: relative;
}

nav ul::after {
    content: "";
    display: table;
    clear: both;
}

nav a {
    display: block;
    text-decoration: none;
    color: var(--primary-color);
    text-transform: uppercase;
    font-family: 'Arsenal';
    font-weight: 400;
    letter-spacing: 1px;
    border-bottom: 2px solid transparent;
    padding: 10px 0px;
    transition: .3s;
}

.navbar-nav a:hover {
    border-bottom: 2px solid var(--primary-color);
    color: var(--primary-color);
}


.button-reservation a {
    background-color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    color: var(--secondary-color);
    transition: 0.5;
    text-transform: uppercase;
    font-size: 15px;
    border: 2px solid var(--primary-color);
}

.button-reservation a:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);

}


/***** ACCUEIL *****/

    ul {
        list-style: none;
        padding-left: 0;
        margin-left: 10px;
    }

    ul li {
        position: relative;
        padding-left: 20px;
        margin-bottom: 0;
        font-family: 'Arsenal';
    }

    ul li::before {
        content: "\f00c";
        /* Exemple : icône check-circle */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        /* nécessaire pour certaines icônes */
        position: absolute;
        left: 0;
        top: 0;
        color: var(--primary-text-color);
        /* ta couleur personnalisée */
    }

.hero-accueil {
    height: 80vh;
    margin-bottom: 0;
}


.bg-slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.bg-slider-container>.bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    animation: fadeSlide 18s infinite ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

.bg-slider-container .slide1 {
    background-image: url('https://www.letangneuf.fr/wp-content/uploads/2025/08/pancarte_1_-e1757938953144.webp');
    animation-delay: 0s;
}

.bg-slider-container .slide2 {
    background-image: url('https://www.letangneuf.fr/wp-content/uploads/2025/08/piscine-3-1.webp');
    animation-delay: 6s;
}

.bg-slider-container .slide3 {
    background-image: url('https://www.letangneuf.fr/wp-content/uploads/2025/08/photo-seminaire-1.webp');
    animation-delay: 12s;
}

@keyframes fadeSlide {
    0% {
        opacity: 0;
    }

    8.3% {
        opacity: 1;
    }

    33.3% {
        opacity: 1;
    }

    41.6% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

/* Zoom continu sans pause */
.bg-slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: -1;
    animation: zoomSlow 30s linear infinite;
}

/* Replique l'image de fond pour le ::before */
.bg-slider-container .slide1::before {
    background-image: url('https://www.letangneuf.fr/wp/wp-content/uploads/2025/08/Vue-du-drone.webp');
}

.bg-slider-container .slide2::before {
    background-image: url('https://www.letangneuf.fr/wp/wp-content/uploads/2025/08/Vrac-exterieur.webp');
}

.bg-slider-container .slide3::before {
    background-image: url('https://www.letangneuf.fr/wp/wp-content/uploads/2025/08/piscine-31.webp');
}

@keyframes zoomSlow {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
    }
}

/* Contenu Gutenberg au-dessus */
.bg-slider-container>*:not(.bg-slide) {
    position: relative;
    z-index: 2;
}

.hero-accueil h1 {
    color: var(--secondary-color);
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.hero-accueil p {
    color: var(--secondary-color);
    font-size: 16px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1) !important;
    width: 900px;
    margin: 0 auto;
}

.button-home a {
    background-color: var(--primary-color) !important;
    color: var(--secondary-color) !important;
    font-family: "Arsenal" !important;
    font-weight: 500 !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 10px !important;
    padding: 10px 35px !important;
    transition: 0.3s ease;
}

.button-home1 a {
    background-color: var(--primary-color) !important;
    color: var(--secondary-color) !important;
    font-family: "Arsenal" !important;
    font-weight: 400 !important;
    border-radius: 10px !important;
    padding: 10px 35px !important;
    transition: 0.3s ease;
}

.button-home a:hover,
.button-home1 a:hover {
    transform: scale(1.1);
}

.youtube-container h2 {
    padding-bottom: 20px !important;
}

.section-base {
    width: 1140px;
    margin: 60px auto;
}

.section-background {
    background-color: var(--background-color);
    padding: 60px 0;
}

.section-background p {
    font-size: 16px;
}

.child-container {
    width: 1140px;
    margin: 25px auto 10px auto;
}

.child-container div {
    background-color: var(--secondary-color);
    padding: 20px !important;
    border-radius: 10px;
    box-shadow: 0px 6px 10px -2px rgba(0, 0, 0, 0.25);
    margin-right: 25px !important;
    transition: 0.3s;
}

.child-container div:hover {
    box-shadow: 0px 6px 10px -2px rgba(0, 0, 0, 0.55);
}

.child-container h3 {
    line-height: 1.2;
}

.child-container p {
    font-size: 14px;
}

.avis {
    width: 1140px;
    margin: 0 auto;
}

.section-background .child {
    width: 1140px;
    margin: 0 auto;
}

.section-contact {
    width: 1000px;
    margin: 0 auto;
    background-color: var(--secondary-text-color);
    padding: 20px 30px;
    box-shadow: 0px 6px 10px -2px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}


.hero {
    background-color: var(--background-color);


}

.hero-container {
    height: 45vh;
    width: 1140px;
    margin: 0 auto;
}

.custom-shape-divider-bottom-1756067559 {
    position: inherit;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 1.4;
    transform: rotate(0deg);
}

.custom-shape-divider-bottom-1756067559 svg {
    position: relative;
    display: block;
    width: auto;
    transform: rotate(180deg);
    height: auto;
}

.custom-shape-divider-bottom-1756067559 .shape-fill {
    fill: var(--secondary-color);
}



.container-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wave-container {
    position: relative;
}

.wave-container::before {
    content: "";
    width: 100%;
    height: 150px;
    position: absolute;
    bottom: -0.3%;
    left: 0;
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 20vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  80' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 59L50 55C100 51 200 44 300 30C400 15 500 -6 600 1C700 8 800 44 900 59C1000 73 1100 66 1150 62L1200 59V80H1150C1100 80 1000 80 900 80C800 80 700 80 600 80C500 80 400 80 300 80C200 80 100 80 50 80H0V59Z' fill='%23f4f1ea'/></svg>");
}

@media(max-width:850px) {
    .wave-container::before {
        height: 52.5px
    }
}

.bg-slider-container h1,
.bg-slider-container p,
.bg-slider-container a {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp ease 1s forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


.breadcrumb {
    text-align: center;
    font-size: 16px;
    color: var(--primary-text-color);
    font-family: 'Arsenal';
    text-transform: capitalize;
}

.breadcrumb a {
    color: var(--primary-color);
}

.breadcrumb a:hover {
    color: var(--secondary-color);
}

.col-youtube {
    width: 800px;
    margin: 0 auto;
}





/****** SEMINAIRES ********/

.col-seminaire {
    background-color: var(--secondary-color);
    padding: 15px 20px;
    box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
}

.col-seminaire h3 {
    line-height: 1.2;
}

/**** PAGE SIMPLE *****/

.page-simple {
    width: 1140px;
    margin: 40px auto;
}


/**** ANIMATIONS ******/

/* FADE IN */
.bg-slider-container h1,
.bg-slider-container p,
.bg-slider-container a,
.container-column,
.contact {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact.show,
.container-column.show {
    animation: fadeInUp 2s ease forwards;
}




/* FADE IN RIGHT*/

.column-right {
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* FADE IN LEFT */

.column-left {
    opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.column-left.show {
    animation: fadeInLeft 2s ease forwards;
}

.column-right.show {
    animation: fadeInRight 2s ease forwards;
}

/* Calendrier de réservation */

.Chambre .Intitule {
    font-family: "the-seasons", sans-serif;
}

.OsProduit.api .OsProduitPlanning .OsPlanningForm,
.OsProduit.api .OsProduitPlanning .OsPlanningDatePicker {
    flex: auto;
}

.WidgetDirect,
.api .OsDatePicker.OsDatePickerInline.ui-datepicker .ui-datepicker-header,
.api .OsPlanningDatePicker .PlanningEntete,
.api .OsDatePicker.OsDatePickerInline.ui-datepicker .ui-datepicker-header .ui-state-hover,
.api .OsDatePicker.OsDatePickerInline.ui-datepicker thead,
.api .OsDatePicker.OsDatePickerInline.ui-datepicker,
.ui-widget.ui-datepicker thead {
    background-color: transparent !important;
}

#widget-produit-OSCH-132563 {
    width: 100%;
    max-width: none !important;
}



/******* FOOTER ******/

.site-footer {
    padding-bottom: 20px;
    background-color: var(--primary-color);
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 1140px;
    gap: 25px;
    margin: 0 auto;
}

.col-1 img {
    width: 75%;
}


.col-reseaux {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    padding-right: 100px;
}

.col-reseaux svg {
    width: 24px;
    height: 24px;
    fill: var(--secondary-color);
    transition: 0.3s;
}

.col-reseaux svg:hover {
    fill: var(--primary-text-color) !important;
}

.footer-widget h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--secondary-color);
}

.footer-widget .wp-block-list {
    list-style: none;
    padding-bottom: 8px;

    li {
    padding-left: 0 !important;
    }

    ::before {
        content: "";
    }
}


.footer-widget li a {
    font-family: 'Arsenal';
    text-decoration: none;
    color: var(--secondary-color) !important;
    /* Couleur du texte normal */
    transition: color 0.3s;
    /* Transition de couleur au survol */
}

.footer-widget li a:hover {
    color: var(--primary-text-color) !important;
    /* Couleur du texte au survol */
}


.footer-container ul {
    margin-left: 0;
}

.copyright {
    background-color: #FFF;
}

.copyright p {
    color: var(--primary-text-color);
    font-size: 12px;
    text-align: center;
    margin: 0;
    padding: 10px 0;
}

.copyright a {
    color: var(--primary-text-color);
    transition: 0.3s;
}

.copyright a:hover {
    color: var(--primary-color) !important;
}

/* ILLUSTRATIONS */

.col-illustration {
    background-image: url('https://www.letangneuf.fr/wp/wp-content/uploads/2025/08/3.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: left;
    background-position-y: bottom;
}

.col-illustration2 {
    background-image: url('https://www.letangneuf.fr/wp/wp-content/uploads/2025/08/2.png');
    background-size: 35%;
    background-repeat: no-repeat;
    background-position: left;
    background-position-y: bottom;
}

.illustration {
    background-image: url('https://www.letangneuf.fr/wp/wp-content/uploads/2025/08/2.png');
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: right;
    background-position-y: bottom;
}

.illustration2 {
    background-image: url('https://www.letangneuf.fr/wp/wp-content/uploads/2025/09/Design-sans-titre20.png');
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}

.illustration3 {
    background-image: url('https://www.letangneuf.fr/wp/wp-content/uploads/2025/08/3.png');
    background-size: 45%;
    background-repeat: no-repeat;
    background-position: right;
    background-position-y: center;
}

.illustration4 {
    background-image: url('https://www.letangneuf.fr/wp/wp-content/uploads/2025/09/Design-sans-titre21.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: right;
}

.illustration5 {
    background-image: url('https://www.letangneuf.fr/wp/wp-content/uploads/2025/08/2.png');
    background-size: 35%;
    background-repeat: no-repeat;
    background-position: left;
    background-position-y: bottom;
}


/* FORMULAIRE DE CONTACT */

.forminator-ui {
    margin: 0 !important;
}

.forminator-row {
    margin-bottom: 0 !important;
}

.forminator-input {
    padding-top: 0 !important;
}

.forminator-ui input::placeholder,
.forminator-ui textarea::placeholder {
    font-family: 'Arsenal', sans-serif !important;
    /* remplace par ta police */
    font-size: 14px;
    color: #999;
    /* gris clair */
}



/********************************/
/******* RESPONSIVE MOBILE ******/
/********************************/


/* Hamburger menu styles for mobile view */
.hamburger {
    display: none;
    cursor: pointer;
    font-size: 24px;
    /* Adjust size as needed */
    background: none;
    border: none;
}

/* Collapsible Menu for Mobile */
.collapse {
    display: flex;
    flex-direction: column;
}

.collapse.show {
    display: block;
}

/* Styles de base */
.hamburger {
    display: none;
    /* Le bouton hamburger est caché par défaut et s'affichera sur les mobiles */
    cursor: pointer;
    font-size: 30px;
    /* Taille du bouton hamburger */
}

#menu-toggle {
    display: none;
    /* La checkbox est cachée */
}


/* Styles spécifiques aux mobiles */
@media (max-width: 768px) {


    h1 {
        font-size: 36px;
        font-weight: 600;
    }

    h2 {
        font-size: 28px;
        font-weight: 600;
    }

    h3 {
        font-size: 24px;
        font-weight: 600;
    }

    h4 {
        font-size: 22px;
        font-weight: 600;
    }

    p {
        font-size: 15px;
    }

    /* HEADER */

    .site-header {
        padding-bottom: 0;
    }

    .logo_header {
        padding-left: 5px;
    }

    .logo_header img {
        width: 60% !important;
        height: auto !important;
    }

    .hamburger {
        display: block;
        /* Le bouton hamburger s'affiche sur les mobiles */
        position: absolute;
        font-size: 30px;
        right: 20px;
        /* Positionnement à droite */
        z-index: 2;
        /* S'assure que le hamburger est cliquable */
        stroke: var(--primary-text-color);
    }

    .navbar {
        padding: 0;
    }

    .navbar-collapse.collapse {
        display: none;
        /* Le menu est caché par défaut */
        position: absolute;
        /* Positionnement absolu pour s'afficher au-dessus du contenu */
        width: 100%;
        /* Largeur complète */
        z-index: 1;
        background-color: var(--secondary-color);
        /* Arrière-plan blanc, à ajuster selon le design */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        /* Ombre pour un effet visuel */
        top: 90px;
        /* Distance du haut, à ajuster en fonction de la hauteur de votre navbar */
    }

    #menu-toggle:checked~.navbar-collapse.collapse {
        display: block;
        /* Affiche le menu lorsque la checkbox est cochée */
    }

    .navbar-collapse.collapse .nav_menu li {
        display: block;
        /* Affiche les éléments du menu en bloc pour une disposition verticale */
        text-align: center;
        /* Centre le texte des éléments du menu */
    }

    .navbar-nav a:hover {
        border-bottom: none;
    }

    .navbar-nav {
        list-style: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-bottom: 0;
        gap: 0;
        align-items: flex-start;
        padding: 0;
        margin-top: 0;

    }

    .navbar-nav li {
        margin: 0;
        border-top: 1px solid var(--primary-color);
        width: 100%;
    }

    .navbar-nav a {
        padding: 10px 0;
    }

    /* PAGES */

    .infos-hero {
        margin: 0 30px !important;
    }

    .col-youtube {
        width: auto;
        margin: 0 10px;
    }

    .wp-block-embed iframe {
        height: 200px !important;
    }

    .child-container {
        width: auto;
        margin: 0 10px;
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .wp-block-columns.is-not-stacked-on-mobile {
        flex-wrap: wrap !important;
        justify-content: center;
    }

    .child-container div {
        margin-right: 0 !important;
    }

    .column-left,
    .column-right {
        flex-basis: 48% !important;

        h3 {
            font-size: 18px;
        }

        p {
            margin-top: 10px !important;
        }
    }

    .section-background {
        padding: 60px 10px !important;
    }

    .section-base {
        width: auto;
        margin: 40px 10px;
    }

    .avis {
        width: auto;
        margin: 0;
    }

    .section-background .child,
    .section-contact {
        width: auto;
        margin: 0 10px;
    }

    .hero-container {
        width: auto;
        margin: 0 20px;
    }

    .col-illustration,
    .col-illustration2,
    .illustration3 {
        margin-top: 30px !important;
    }

    .reverse {
        display: flex;
        flex-direction: column-reverse;

        .alignleft {
            margin-top: 0 !important;
        }
    }

    .lit img {
        margin-top: 30px !important;
    }

    .wp-block-image img {
        height: auto !important;
    }

    .page-simple {
        width: auto;
        margin: 40px 10px;
    }





    /* FOOTER */

    .footer-container {
        display: flex;
        flex-direction: column;
        width: auto;
        margin: 0 10px;
        align-items: center;

        h3 {
            text-align: center;
        }

        ul li {
            text-align: center;
        }
    }

    .col-1 img {
        width: 60%;
        margin: 0 auto;
    }



}