/*
Theme Name: manon-theme
Author: atypik-house
Description: Theme fait par Manon !
Requires at least: WordPress 5.0
Version: 1.0
*/


/* Importing fonts  */

@font-face {
    font-family: 'Hug Me Tight';
    src: url('src/HugMeTight.woff2') format('woff2'),
        url('src/HugMeTight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Glovbal fixes  */
.wp-block-columns..container.{.text-align:.center;.}.is-layout-flex.wp-container-core-columns-layout-1.wp-block-columns-is-layout-flex {
    justify-content: center;
}



h1,h2,h4,h5,h6{
     font-family: 'Hug Me Tight'!important;
}

h3 {
    font-family: 'Poppins', sans-serif;
    /* Autres styles de texte, comme la taille, la couleur, etc. */
}

/* Styles généraux pour le Header */
/* Styles le Header */
header {
  background-color: #1C5733;
  max-width: 100%;
  height: 80px;
  vertical-align: top;
}

img {
    max-width: 100%;
    height: 100;
}

nav {
  margin-top : -26px!important;
}


.navbar {
  display: block;
  padding: 0;
}

.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}


.navbar div {
  display:inline-block; 
  vertical-align: top;
}
.nav-menu .checkbox {
  display: none;
}
#menu-principal {
  text-align: center;
  margin-bottom: 0;
}
.menu-items {
}
.nav-menu ul {
  list-style-type: none;
}
.nav-menu ul li{
  display: inline-block;
  padding: 22px;
  font-size: 18px;
  text-align: center;
  margin: 0 auto;
}
.nav-menu a {
  text-decoration: none;
  font-size: 12px; /* Ajustez la valeur selon vos besoins */
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  padding: 13px 0px;
  border-radius: 5px;
  transition: background-color 0.3s ease;


}
.woocommerce.columns-3 {
    padding-left: 12px;
    padding-right: 12px;
}
.yith-wcbk-booking-search-form.yith-wcbk-booking-search-form-478.yith-wcbk-booking-search-form--horizontal-layout.show-results-shop {
    z-index: 1;
}
/* Un peu de Responsif maintenant */

@media only screen and (max-width: 375px) {
  @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

  * {
    margin: 0;
    padding: 0 5px;
    box-sizing: border-box;
  }
  body {
    max-width: 100%;
  }
  header {
    height: auto;
  }

  /*On va definir l'affichage des produits de la Whishlist à UNE colonne*/
  li.add-to-wishlist-before_add_to_cart.product.type-product.post-416.status-publish.first.instock.product_cat-non-classe.product_cat-yourte.product_tag-amoureux.product_tag-chaleureux.product_tag-couple.product_tag-detente.product_tag-nature.product_tag-yourte.has-post-thumbnail.virtual.sold-individually.purchasable.product-type-booking {
      width: 100%;
  }
  h2.wp-block-heading.has-text-align-center.has-text-color.has-link-color.has-large-font-size.wp-elements-480a668001489c0c958b86130b95a164 {
      text-align: center;
  }
  .yith-wcbk-booking-search-form__row__content {
      margin-top: 7px;
  }

  .container-fluid {
    max-width: 100%;
    margin: auto;
  }
  .mainContent {
    padding:  0 5px;
    max-width: 100%;
    overflow: hidden;
  }
  .mainContent h1 {
    font-size: 18px;
  }
  .has-large-font-size {
    font-size: 20px !IMPORTANT;
  }
  .wp-block-columns {
    padding: 0;
  }
  .has-text-align-center {
    text-align: left;
}
  .navbar {
    width: 100%;
    box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
  }

  .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 62px;
    background-color: #1C5733 !IMPORTANT;
    z-index: 99;
  }
    ul#menu-menu-principal {
      background: #009281;
      z-index: 999;
  }

  .navbar .menu-items {
    display: flex;
  }

  .navbar .nav-container li {
    list-style: none;
  }

  .navbar .nav-container a {
    text-decoration: none;
    color: #0e2431;
    font-weight: 500;
    font-size: 1.2rem;
    padding: 0.7rem;
  }

  .navbar .nav-container a:hover{
      font-weight: bolder;
  }

  .nav-container {
    display: block;
    position: relative;
    height: 60px;
  }

  .nav-container .checkbox {
    position: absolute;
    display: block;
    height: 32px;
    width: 32px;
    top: 20px;
    left: 20px;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
  }

  .nav-container .hamburger-lines {
    display: block;
    height: 26px;
    width: 32px;
    position: absolute;
    top: 17px;
    left: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .nav-container .hamburger-lines .line {
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 10px;
    background: #0e2431;
  }

  .nav-container .hamburger-lines .line1 {
    transform-origin: 0% 0%;
    transition: transform 0.4s ease-in-out;
  }

  .nav-container .hamburger-lines .line2 {
    transition: transform 0.2s ease-in-out;
  }

  .nav-container .hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition: transform 0.4s ease-in-out;
  }

  .navbar .menu-items {
    padding-top: 120px;
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
    height: 100vh;
    width: 100%;
    transform: translate(-150%);
    display: flex;
    flex-direction: column;
    margin-left: -40px;
    padding-left: 50px;
    transition: transform 0.5s ease-in-out;
    text-align: center;
  }

  .navbar .menu-items li {
    margin-bottom: 1.2rem;
    font-size: 1.5rem;
    font-weight: 500;
  }

  .logo {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 1.2rem;
    color: #0e2431;
  }

  .nav-container input[type="checkbox"]:checked ~ .menu-items {
    transform: translateX(0);
  }

  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(45deg);
  }

  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
  }

  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-45deg);
  }

  .nav-container input[type="checkbox"]:checked ~ .logo{
    display: none;
  }

  ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
      width: 100%;
  }
  .product-column li {
    width: 100%;
  }
  .footer-elements .row {
    display: grid;
    grid-template-columns: 100% ;
    height: auto;
    margin: 2px 5px;
  }
  .footer-blocks {
    width: 100% !IMPORTANT;
  }
}
@media only screen and (max-width: 720px) {

  .footer-blocks {
    width: 100%;
  }
  body {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100%;
  }
  .column-3 {
    padding: 10px;
  }
  .menu-menu-principal li {
    margin: 0;
  }
} 



/* Styles pour le corps de la page */
body {
    font-family: Montserrat, sans-serif;
    margin: 0;
    padding: 0;
    max-width: 100%;
}
img {
    max-width: 100%;
}
/* Styles pour les titres */
h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

/* Styles pour le Header */


/*.footer-blocks {
  max-width : 25%;
  margin: 0 auto
}*/


/* Style des titres des colonnes */

footer {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  background-color: #DAC554;
}

.footer-elements {
 padding-left: 5%;
 padding-right: 5%;
  
}
.footer-blocks h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

/* Style des liens */
.footer-blocks ul {
  list-style: none;
  padding: 0;
}

.footer-blocks ul li {
  margin-bottom: 10px;
}

.footer-blocks ul li a {
  text-decoration: none;
  color: black;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
/* Effet de soulignement au survol */



.footer-elements {
  
  padding-top: 30px;
}

.site_footer a {
  position: relative; /* Ajoutez cette ligne pour définir une position relative */
}

.site_footer a:hover::before {
  content: ""; /* Ajoutez un élément pseudo-élément pour créer le trait */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px; /* Hauteur du trait */
  background-color: #1C5733; /* Couleur du trait */
  transform: scaleX(0); /* Échelle horizontale initiale à zéro */
  transform-origin: bottom right; /* Point d'origine à droite pour l'effet de départ */
  transition: transform 0.3s ease; /* Transition de l'effet */
}

/* Effet de soulignement lors du survol */
.site_footer a:hover::before {
  transform: scaleX(1); /* Échelle horizontale à 100% pour afficher le trait */
  transform-origin: bottom left; /* Point d'origine à gauche pour l'effet de déplacement vers la droite */
}
/* Style pour la liste des médias sociaux */
.liste-media {
  padding: 0;
}

.liste-media li {
  display: inline-block; /* Affiche les icônes en ligne */
  margin-right: 10px; /* Ajoute une marge à droite pour l'espacement entre les icônes */
}


.liste-media img {
  margin-right: 10px;
}
.rs-icon {
    width: 50px;
    height: auto; /* Pour conserver les proportions originales */
    margin-right: 10px; /* Ajoutez une marge à droite pour l'espacement */
}
#menu-item-custom-icon-moncompte::before {
  content: url('<?php echo get_template_directory_uri(); ?>/medias/moncompte.svg');
  width: 16px; /* Ajustez la taille de l'icône selon vos préférences */
  height: 16px; /* Ajustez la taille de l'icône selon vos préférences */
  margin-right: 5px; /* Ajoutez de l'espacement entre l'icône et les autres éléments du menu */
}
/* CSS pour le formulaire de newsletter */
.newsletter-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Aligner à gauche */
  text-align: left;
  width: auto; /* Ajustez la largeur selon vos préférences */
}

.newsletter-form p {
  font-size: 18px;
}

/* Styles pour les champs de formulaire */
.newsletter-form input[type="email"] {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  width: auto; /* Ajustez la largeur selon vos besoins */
}

/* Styles pour le bouton "Je m'abonne" */
.newsletter-form input[type="submit"] {
  background-color: #1C5733; /* Couleur de fond verte */
  color: white; /* Couleur du texte en blanc */
  border: none;
  padding: 10px 20px;
  border-radius: 50px; /* Coins arrondis pour créer un bouton rond */
  width: auto; /* Laissez la largeur automatique pour s'adapter au contenu */
  line-height: normal; /* Réinitialisez la hauteur de ligne pour centrer le texte */
  text-align: center;
  font-size: 16px;
}
/* Styles pour chaque article */
.article {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  display: flex; /* Utilisez un conteneur flex pour aligner le contenu verticalement */
  flex-direction: column; /* Alignez le contenu en colonnes */
}



.article:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Styles pour l'image mise en avant */
.article-thumbnail {
  margin-bottom: 10px;
  flex-grow: 1; /* Laissez l'image occuper tout l'espace vertical disponible */
  display: flex; /* Utilisez un conteneur flex pour aligner l'image et son contenu */
  align-items: center; /* Centrez l'image verticalement */
  justify-content: center; /* Centrez l'image horizontalement */
}


.article-thumbnail img {
  max-width: 100%;
  height: auto;
  object-fit: cover; /* Cette propriété maintiendra les proportions de l'image tout en la faisant remplir complètement son conteneur */
}

/* Styles pour le titre de l'article */
.article-title {
  font-size: 20px;
  margin-top: 0;
  font-family: 'Hug Me Tight', sans-serif; /* Utilisez la police "Hug Me Tight" */
  font-size: 20px;
  margin-top: 0;
  color: #; /* Couleur bleue pour les titres */
}


/* Styles pour la métadonnée de l'article (date, auteur, commentaires) */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.article-meta-item {
  font-size: 14px;
  margin-right: 10px;
}

/* Styles pour l'extrait de l'article */
.article-excerpt {
  font-size: 16px;
  line-height: 1.6;
}

/* Styles pour le bouton "Lire la suite" */
.article-link {
  background-color: #1C5733;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  display: inline-block;
  margin-top: 10px;
  transition: background-color 0.3s ease;
}

.article-link:hover {
  background-color: #135125;
}


/* Styles pour la section des copyrights */
.copyright {
  background-color: #1C5733; /* Arrière-plan vert */
  color: white; /* Texte en blanc */
  text-align: center;
  padding: 10px 0;
}

/* Styles pour le texte des copyrights */
.copyright p {
  margin: 0;
  font-size: 14px;
}

/* Page contact centré */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.woocommerce ul.products li.product .button {
    display: inline-block;
    margin-top: 1em;
    background-color: #1c5733; /* Arrière-plan vert */
}

    .woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {
padding: .5em 0;
margin: 0;
font-size: 1em;
color: #dac554;/* Arrière-plan jaune */
}

.uagb-block-962e8037 .uagb-tm__image img {
width: 2000;
max-width: 100;
}
    
.woocommerce ul.products li.product .price {
display: block;
font-weight: 400;
margin-bottom: .5em;
font-size: .857em;
color: 293c69;
}

.woocommerce ul.products li.product .button {
display: inline-block;
margin-top: 1em;
background-color: #1c5733;
color: white;
}

.woocommerce img, .woocommerce-page img {
max-width: 100%;
height: 100;
}

.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {
border: 1px solid #cfc8d8;
padding: 20px;
margin: 2em 0;
text-align: left;
border-radius: 5px;
margin-left: 170;
margin-right: 170;
}

p {
margin-top: 0;
margin-bottom: 1rem;
margin-left: 40;
margin-right: 40;
}


.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button {
font-size: 100%;
margin: 0;
line-height: 1;
cursor: pointer;
position: relative;
text-decoration: none;
overflow: visible;
padding: .618em 1em;
font-weight: 700;
border-radius: 3px;
left: auto;
color: #fff;
background-color: #293c69;
border: 0;
display: inline-block;
background-image: none;
box-shadow: none;
text-shadow: none;
}

.woocommerce .wishlist-title {
margin-bottom: 30px;
display: none;
}

.woocommerce-store-notice, p.demo_store {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
width: 100%;
font-size: 1em;
padding: 1em 0;
text-align: center;
background-color: #dac554;
color: #fff;
z-index: 99998;
box-shadow: 0 1px 1em rgba(0,0,0,.2);
display: none;
}

.woocommerce div.product div.images.woocommerce-product-gallery {
position: relative;
margin-left: 25;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
color: #293c69;
font-size: 1.25em;
}


.woocommerce div.product form.cart .button {
vertical-align: middle;
float: left;
background-color: #293C69;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt {
background-color: #DAC554;
color: #fff;
-webkit-font-smoothing: antialiased;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt {
background-color: #DAC554;
color: #fff;
-webkit-font-smoothing: antialiased;
}

.woocommerce div.product .woocommerce-tabs .panel {
margin: 30;
padding: 0;
}

.woocommerce .products ul, .woocommerce ul.products {
margin: 0 0 1em;
padding: 0;
list-style: none outside;
clear: both;
margin-left: 30;
}


.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
background-color: #293C69;
color: white;
z-index: 2;
border-bottom-color: #fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
color: #515151;
display: inline-block;
position: relative;
z-index: 0;
border-radius: 4px 4px 0 0;
margin: 0 -5px;
padding: 0 1em;
}

.woocommerce div.product {
margin-bottom: 0;
position: relative;
margin-top: 40;
}

.yith-wcbk-search-form-result-product-add-to-cart a {
padding: 10px 0;
font-size: 14px;
font-style: normal;
font-weight: 700;
text-align: center;
text-transform: uppercase;
display: block;
color: #dac554;
}

.woocommerce-info {
border-top-color: #1e85be;
margin-top: 45;
}

/* Pour les liens sans attribut href ni classe */
a:not([href]):not([class]) {
    color: #ffffff !important; /* Texte en blanc */
}

/* Pour les liens sans attribut href ni classe au survol */
a:not([href]):not([class]):hover {
    color: #ffffff !important; /* Texte en blanc au survol */
}


/* Modifier la couleur du texte en #1C5733 */
h1 {
    color: #1C5733;
}

/* Centrer les titres H1 */
h1 {
    text-align: center;
}

/* Ajouter une marge supérieure à vos titres H1 */
h1 {
    margin-top: 40px; /* Vous pouvez ajuster la valeur (en pixels) selon vos besoins */
}