/**
Theme Name: AseanSEO
Theme URI: https://wpastra.com/
Author: Vinz
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: Thème AseanSEO basé sur le thème Astra
Template: astra
Version: 4.6.10
Requires at least: 5.3
Tested up to: 6.5
Requires PHP: 5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: asean-seo
Domain Path: /languages
Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog
**/

body {
    font-family: 'space mono', sans-serif;
    margin: 0;
}

/*** Header ***/

.site__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff; /* Couleur de fond du header */
    height: 80px; /* Hauteur de votre header */
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  }

  .header_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    padding: 30px 0;
    margin: 0 auto;
  }

  .logo {
    width: 20%;
    height: auto;
    margin-left: 20px;
  }

  .title {
    width: 90%;
    text-align: center;
  }

  .title h1 {
    font-family: harriet;
    color: #492cdd;
    font-weight: bold;
  }

  .nav-links-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
  }  
  
  .site__header__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
  }
  
  .site__header__menu li {
    margin: 0 10px; /* Espace entre les liens */
  }
  
  .site__header__menu li a {
    text-decoration: none;
    color: #000000; /* Couleur de vos liens */
    font-size: 16px; /* Taille de police appropriée */
    font-weight: 400;
  }
  
  /* Ajoutez des styles pour :hover et :focus si nécessaire */
  .site__header__menu li a:hover,
  .site__header__menu li a:focus {
    color: #492cdd; /* Couleur au survol */
    font-weight: bold;
  }
  
/* Styles pour le bouton de menu hamburger */
.hamburger-button {
    display: none; /* Cachez par défaut */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    padding: 0;
  }
  
  .hamburger-button span {
    display: block;
    width: 100% !important;
    height: 2px !important;
    background-color: #000;
  }
  
  .close-button {
    display: none; /* cachez par défaut */
    position: absolute;
    /* top: 20px; */
    right: 20px;
    width: 30px;
    height: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    background-color: #ffffff;
    z-index: 1010; /* Assurez-vous que la croix est au-dessus du menu */
  }
  
  .close-button span {
    display: block;
    width: 30px;
    height: 2px;
    background-color: #000;
    position: absolute;
  }
  
  .close-button span:first-child {
    transform: rotate(45deg);
  }
  
  .close-button span:last-child {
    transform: rotate(-45deg);
  }
  
  /* Affichez le bouton de fermeture lorsque le menu est ouvert */
  .menu-open .close-button {
    display: flex;
  }
  
  /* Lorsque le menu est ouvert, empêchez le défilement de la page */
  .body-no-scroll {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
  }  

/*** Footer ***/

.site__footer {
    display: flex;
    justify-content: center; /* Centre les éléments horizontalement */
    flex-wrap: wrap;
    max-width: 1440px; /* Limite la largeur du footer à 1440px */
    margin: 0 auto; /* Ajoute une marge égale à gauche et à droite pour centrer le footer */
    height: 40px;
    border-top: 1px solid #000000; /* Ajoute une ligne en haut du footer */
}

.container {
    display: flex; /* Utilise Flexbox pour aligner les éléments horizontalement */
    align-items: center; /* Aligne les éléments verticalement au centre */
    justify-content: center; /* Répartit les éléments avec un espace égal entre eux */
    width: 620px;
    margin: 0 auto; /* Centre le conteneur horizontalement */
}

.menu-bas-de-page-container ul {
    display: flex; /* Ajoutez cette propriété */
    align-items: center; /* Facultatif : aligne les éléments verticalement au centre */
    padding: 0;
}

/* #menu-item-12 {
    margin-right: 40px; /* Ajoute une marge à droite pour séparer les éléments */
/* } */

.menu-item {
  margin-right: 40px;
}

.copyright-text {
    margin-left: 40px; /* Ajoute une marge à gauche pour séparer les éléments */
}

.site__footer ul {
    list-style: none; /* Supprime les puces des éléments de liste */
    text-decoration: none;
}

.site__footer a {
    text-decoration: none; /* Supprime le soulignement */
}

/*** Portfolio ***/

#lightbox-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1050;
    /* display: flex; */
    justify-content: center;
    align-items: center;
}

#lightbox-close {
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 30px;
    color: #fff;
}

#lightbox-image {
    display: flex;
    max-width: 90%;
    max-height: 90%;
    margin: auto; /* Centrer l'image verticalement et horizontalement */
    margin-top: 50px;
}


/* Agrandissement de l'image et de l'overlay */
.image-wrapper:hover img,
.image-wrapper:hover .custom-overlay {
  transform: scale(1.1); /* Assurez-vous que l'overlay s'agrandit avec l'image */
}

/* Transition fluide pour l'image et l'overlay */
.image-wrapper img,
.image-wrapper .custom-overlay {
  transition: transform 0.7s ease;
}

/* Agrandissement de l'icône œil indépendamment */
.custom-overlay img {
  transition: transform 1s ease;
}

.custom-overlay:hover img {
  transform: scale(1.3); /* Agrandissement de l'icône œil au survol de l'overlay */
}


/* Media query pour les écrans jusqu'à 600px de large */
@media screen and (max-width: 600px) {
    .hamburger-button {
      display: flex; /* Affichez le bouton hamburger sur les petits écrans */
      border: none;
      background-color: #ffffff;
    }
  
    .nav-links-container {
      position: fixed;
      right: -100%; /* Cacher le menu hors de l'écran */
      top: 0;
      bottom: 0;
      width: 100%;
      background: linear-gradient(to bottom, #FFFFFF 100px, #7451eb 60px);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: right 0.5s;
      z-index: 1000; /* S'assure que le menu est au-dessus de tout */
    }
  
    .site__header__menu {
      flex-direction: column;
      align-items: center;
    }
  
    .site__header__menu li {
      margin: 20px 0; /* Plus d'espace entre les liens sur mobile */
    }
  
    .site__header {
      height: auto; /* Hauteur auto pour gérer la taille variable du menu hamburger */
      padding-top: 20px; /* Ajoutez de l'espace au-dessus du logo */
      padding-inline: 16px;
    }
  
    /* Assurez-vous que le logo et le titre est aussi visible */
    .logo {
    z-index: 1010; /* Plus élevé que nav-links-container pour être au-dessus */
    }

    .title {
      z-index: 1010;
    }
  
    /* Modifiez le style de la croix pour la rendre visible sur le fond rouge */
      .close-button span {
        background-color: black; /* Black pour qu'il soit visible sur le fond rouge */
    }
  
    /* Styles pour les liens du menu pour qu'ils soient blancs */
      .site__header__menu li a {
        color: #ffffff; /* Couleur de texte blanche */
        font-size: 44px;
    }

    #contactModal {
      z-index: 1020;
    }
  
    .wpcf7-form {
      width: 70%;
    }
}

.ma-classe-perso .wp-block-media-text__content {
  display: block;
  /* transform: translateY(-20%); */
  animation: show 1s ease-in-out 0.3s forwards;
}

.ma-classe-perso .wp-block-media-text__media {
  display: block;
 /* transform: translateY(-20%); */
  animation: show 1s ease-in-out 0.3s forwards;
}

@keyframes show {
  0% {
    filter: blur(5px);
    transform: translateY(calc(+50% + 75px));
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

#services {
  padding-top: 100px !important;
}

.wp-block-button:hover .wp-element-button {
	animation: squish-in 0.5s forwards;
}
@keyframes squish-in {
	60% {
		transform: scale(0.5, 1.6);
		border-radius: 45% 45% 45% 45% / 40% 40% 40% 40%;
	}
	70% {
		transform: scale(1.5, 0.7);
		border-radius: 15px;
	}
	80% {
		transform: scale(0.9, 1.3);
		border-radius: 25% 25% 25% 25% / 20% 20% 20% 20%;
	}
	85% {
		transform: scale(1.2, 0.9);
		border-radius: 15px;
	}
	90% {
		transform: scale(1, 1.1);
		border-radius: 15px;
	}
}