@charset "UTF-8";
/*
Theme Name: Halte-Camping Trépanier
Description: Thème pour la Halte-Camping Trépanier
Author: Oz Design
Author URI: https://ozdesign.ca
Version: 1.0
*/

@charset "UTF-8";


/* Général */
* {margin: 0; padding: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display: block;}

body {
	background-color: #FFF !important;
	font-family: "Poppins", sans-serif !important;
	font-weight: 400 !important;
	font-style: normal !important;
	font-size: 16px;
	color: #104643 !important;
	line-height: 26px !important;
	overflow-x: hidden !important;
}

.container-jaune {
	background-color: #FAF3E1; /* ou ta couleur personnalisée */
	border-radius: 5rem 5rem 0 0; /* coins arrondis seulement en haut */
	width: 95%;
	margin: 0 auto;
}

.container-jaune-plain {
  background-color: #FAF3E1;
  border-radius: 0;
  padding: 3rem 0;
  max-width: 95%;
  margin: 0 auto;
}

ul, li {list-style-type: none;}


/* Couleur de liens globale */
a,
a:visited {
  color: #C7513F; /* mets ta couleur */
  text-decoration: none; /* optionnel */
}

a:hover,
a:focus {
  color: #104643;
  transition: all .3s cubic-bezier(.43,.045,.1,.95);
  text-decoration: underline; /* optionnel */
}

.container-jaune-plain{
  --bs-link-color-rgb: 5, 7, 8;
  --bs-link-hover-color-rgb: 5, 7, 8;
}


p {margin-bottom: 10px;}

img {border: 0 none; vertical-align: middle;}

/* Couleurs */
.vert {color: #104643;}
.orange {color: #C7513F;}
.jaune {color: #FAF3E1;}
.blanc {color: #FFF;}

/* Titres */
h1, h2, h3, h4, h5, h6 {}

/* Séparateurs */
.wp-block-separator {border-top: 1px solid; border-color: #C7513F !important;}
hr {opacity: 1 !important;}

/* Header */
header {
    margin: 0;
    padding: 0;
}


/* Navigation */
.navbar-toggler {color: #104643 !important;}

#menu-haut {
	display: flex;
	flex-wrap: wrap; /* optionnel si tu veux que ça aille à la ligne en mobile */
    justify-content: flex-end;
    gap: 20px; /* Espace entre les liens, ajuste à ton goût */
    list-style: none;
    padding: 0;
    margin: 0;
}
#menu-haut a {
	color: #104643;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    display: block;
	}
#menu-haut li {display: inline-block;}
#menu-haut a:hover {color: #C7513F !important;}
ul.menu-haut li:not(:last-child) {margin-right: 20px;}

.link-fb a {color: #C7513F !important;}
.link-fb:hover {color: #104643 !important;}
.link-fb a > i {font-size: 1.75em; vertical-align: middle; margin-right: 5px;}

.menu-gauche ul li, .menu-droite ul li {padding: 10px 20px;}
.menu-gauche ul li > a, .menu-droite ul li > a {
	color: #104643;
	font-weight: 500;
	padding: 10px 0px;
	font-size: 20px;
	border-bottom: 3px solid #C7513F;
}

.menu-gauche ul li, .menu-droite ul li > a:hover {color: #C7513F;}
.menu-gauche ul li > a:hover, .menu-droite ul li > a:hover {transition: all .3s cubic-bezier(.43,.045,.1,.95);}

.menu-map a {
  text-align: center !important;
}

/* Icône de carte à gauche */
.menu-map a::before {
  content: "\f3c5"; /* fa-map */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  font-size: 1em;
  vertical-align: middle;
  color: #C7513F;
  margin-right: 10px;
}

/* Chevron à droite */
.menu-map a::after {
  content: "\f054"; /* fa-chevron-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  font-size: 0.85em;
  margin-left: 4px;
  vertical-align: middle;
}

/* Menu Sticky */
#menu-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
#menu-sticky.show { transform: translateY(0); opacity: 1; }
#menu-sticky.hide { transform: translateY(-100%); opacity: 0; }

@media (max-width: 1199px) {
  #menu-sticky { display: none !important; }
}

/* Conteneur principal : logo + menu */
#menu-sticky .sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo à gauche / menu à droite */
  padding: 12px 40px;
  gap: 60px;
}

/* --- LOGO --- */
#menu-sticky .sticky-logo img {
  height: 100px; /* garde ta taille actuelle */
  width: auto;
  display: block;
}

/* --- MENU À DROITE DU LOGO --- */
#menu-sticky .sticky-menu {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* --- LIENS DU MENU (en ligne) --- */
#menu-sticky .menu-sticky-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 40px !important;
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
}

/* --- LIENS STYLES --- */
#menu-sticky .menu-sticky-list a {
  display: inline-block;
  color: #104643;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 3px solid #C7513F;
  padding-bottom: 6px;
  background: transparent !important;
  box-shadow: none !important;
  transition: color 0.3s ease, border-color 0.3s ease;
}
#menu-sticky .menu-sticky-list a:hover {
  color: #C7513F;
}

/* --- BOUTON RÉSERVATION --- */
#menu-sticky .menu-reservation-btn {
  background-color: #C7513F !important;
  border-radius: 40px !important;
  padding: 6px 25px !important;
  text-transform: uppercase;
  box-shadow: none !important;
  border: none !important;
}
#menu-sticky .menu-reservation-btn a {
  color: #fff !important;
  border-bottom: none !important;
  text-decoration: none !important;
}
#menu-sticky .menu-reservation-btn:hover {
  background-color: #104643 !important;
  color: #fff !important;
}

#menu-sticky {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* --- STICKY MOBILE (fixe au scroll) --- */
#menu-sticky-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
#menu-sticky-mobile.show { transform: translateY(0); opacity: 1; }
#menu-sticky-mobile.hide { transform: translateY(-100%); opacity: 0; }

@media (min-width: 1201px) {
  #menu-sticky-mobile { display: none !important; }
}
@media (max-width: 1200px) {
  #menu-sticky { display: none !important; }
  #menu-sticky-mobile { display: block !important; }
}


#menu-sticky-mobile .container { padding: 10px 20px; }
#menu-sticky-mobile .sticky-logo img { height: 100px; width: auto; }

/* --- BURGER STICKY MOBILE --- */
#menu-sticky-mobile .navbar-toggler {
  border: none;
  background: transparent;
}
#menu-sticky-mobile .navbar-toggler-icon {
  filter: invert(30%) sepia(60%) saturate(500%) hue-rotate(140deg);
  width: 30px;
  height: 30px;
}
#menu-sticky-mobile .navbar-collapse {padding: 15px 0;}

#menu-sticky-mobile .menu-sticky-mobile-list {
  list-style: none;
  margin: 0;
  padding: 15px 0;
}
#menu-sticky-mobile .menu-sticky-mobile-list a {
  color: #104643;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid #C7513F;
  padding: 10px 0;
  display: block;
  text-align: center;
  transition: color 0.3s ease;
}
#menu-sticky-mobile .menu-sticky-mobile-list a:hover { color: #C7513F; }


/* Bouton réservation mobile sticky */
#menu-sticky-mobile .menu-reservation-btn {
  background-color: #C7513F !important;
  border-radius: 40px !important;
  padding: 6px 25px !important;
  text-transform: uppercase;
  box-shadow: none !important;
  border: none !important;
}
#menu-sticky-mobile .menu-reservation-btn a {
  color: #fff !important;
  border-bottom: none !important;
  text-decoration: none !important;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  padding: 10px 0;
}
#menu-sticky-mobile .menu-reservation-btn:hover {
  background-color: #104643 !important;
  color: #fff !important;
}

/* Ne pas forcer display dans le CSS */
#menu-sticky { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; }
#menu-sticky-mobile { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; }

/* Pas de display:none ici — c’est géré par Bootstrap */


/* Content */

#wrap {
    position: relative; /* Garde le contenu sous `.nuages` */
    z-index: 1; /* Assure que le contenu reste en dessous de `.nuages` */
    margin-top: -200px; /* Ajuste la hauteur pour éviter le chevauchement */
    padding: 0 50px;
}
.zindex {z-index:999;}
.vc_btn3.vc_btn3-style-custom {background-image: none !important;}
.vc_btn3.vc_btn3-style-custom:hover {opacity: 0.8;}


.floating-img-in-row {
    animation: float-in-row 5s ease-in-out infinite; /* Ajoute une animation de flottement */
    pointer-events: none; /* Empêche les interactions avec l'image */
}

.responsive-heading {font-size: 80px; line-height: 70px;}

/* Animation pour l'effet de flottement */
@keyframes float-in-row {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px); /* Ajuste la hauteur du mouvement */
    }
}

/* Assure que la rangée permet la superposition */
.vc_row {
    position: relative; /* Nécessaire pour que l'image "absolute" soit contenue dans la rangée */
    overflow: visible; /* Permet à l'image de dépasser les limites de la rangée */
}

/* Footer */
.footer-site {
  background-color: #104643;
}

.footer-site a {
  text-decoration: none;
  color: #FAF3E1;
  border-bottom: 1px solid #C7513F;
  padding: 20px 0px;
}

.footer-site a:hover {
  color: #C7513F; /* exemple de survol doré, optionnel */
}

footer #copyright {
	color: #FFF;
	padding: 20px 0 3px 0;
	font-size: 10px;
	margin-bottom: -15px;
}
footer #copyright a {color: #FAF3E1 !important;  border: 0px !important;}
footer #copyright a:hover {color: #C7513F !important;}

.footer-widget.footer-adresse {
  font-size: 14px;
  line-height: 20px;
}

.footer-widget.footer-adresse strong {color: #FAF3E1; font-size: 16px;}
.footer-widget.footer-adresse .phone {font-size: 20px; font-weight: 600;}

.btn-reservation {
  padding: 0px 25px !important;
  background-color: #C7513F;
  color: #FFF !important;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none !important;
  border-radius: 40px;
  transition: background-color 0.3s ease;
  text-align: center;
  font-size: 20px;
}

.btn-reservation:hover {
  background-color: #FAF3E1; /* orange plus foncé au survol */
  color: #C7513F !important;
  text-decoration: none;
}


.btn-reservation a {border: 0px !important;}

.plan a {color: #C7513F !important;}
.plan a:hover {color: #FAF3E1 !important;}

.plan a::after {
  content: "\f054"; /* flèche droite */
  margin-left: 7px !important;
  font-family: "Font Awesome 6 Free"; /* ou "Font Awesome 5 Free", selon ce que tu as */
  font-weight: 900;
  display: inline-block;
}


.wp-block-list {margin-top:15px;}
.wp-block-list li {padding: 15px 0;}


/* Media Query */


/* ----------------------------
   Desktop ≥1400px
---------------------------- */
@media (min-width: 1400px) {
    #menu-desktop {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #menu-desktop .menu-gauche,
    #menu-desktop .menu-droite {
        flex: 1;
        display: flex;
        justify-content: center;
    }
    #menu-desktop .logo-centre {
        margin: 0 20px;
    }
}

/* ----------------------------
   Tablette 769px – 1399px
---------------------------- */
@media (max-width: 1399px) and (min-width: 769px) {
    #menu-tablette {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #menu-tablette .logo-centre {
        display: block;
        margin-bottom: 20px;
    }
    #menu-tablette .menu-ligne {
        display: flex;
        justify-content: center;
        gap: 20px;
        width: 100%;
    }
    #menu-tablette .menu-gauche > ul,
    #menu-tablette .menu-droite > ul {
        display: flex !important;
        flex-direction: row !important;
        margin: 0;
        padding: 0;
    }
}

/* ----------------------------
   Mobile ≤768px
---------------------------- */
@media (max-width: 768px) {
    #menu-mobile {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    /* Logo à gauche, burger à droite sur la même ligne */
    #menu-mobile .d-flex.logo-burger {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 10px;
    }

    /* Collapse full width */
    #menu-mobile .collapse.navbar-collapse {
        width: 100%;
    }

    #menu-mobile .menu-gauche > ul,
    #menu-mobile .menu-droite > ul {
        flex-direction: column !important;
        align-items: center;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #menu-mobile .navbar-nav li.nav-item {
        margin-bottom: 10px;
        width: 100%; /* items prennent toute la largeur */
        text-align: center;
    }

    #menu-mobile .navbar-toggler {
        margin-left: 0; /* burger reste à droite via flex container */
    }
}