/* ============== General CSS ============ */
img {
    /* box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !; */
}

/* ========== RESET & VARIABLES ========== */

/* ========== BASE (mobile par défaut) ========== */
/* header, hero, footer... */



.header-container{
    padding: 10px 0px;
}



.page-hero {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* ✅ centre verticalement */
    align-items: center;       /* ✅ centre horizontalement */
    min-height: 650px;          /* occupe 80% de la hauteur de l’écran */
    text-align: center;
    overflow: hidden;
}



.page-hero__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-hero__title-image img {
    /* width: 220px; */
}

.page-hero__title {
    font-weight: 600;
    line-height: 44px;
    letter-spacing: 0%;
    text-align: center;
    color: #F8F8F8;
}

.page-hero__description {
    font-weight: 400;
    font-size: 19px;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFFB0;
}
/* ====== Animation Hero page ======  */
/* Animation simple, clean, ultra-light */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(0px);
  }
  to {
    opacity: 1;
    transform: translateY(20px);
  }
}

/* Applique l’animation au hero */
/* .page-hero {
  animation: fadeUp 0.6s ease-out forwards;
} */


.header-container {
  opacity: 0;
  animation: fadeUp 1s ease-out forwards;
  animation-delay: 0.15s;
}
/* Image du hero */
.page-hero-title-img {
  opacity: 0;
  animation: fadeUp 1s ease-out forwards;
  animation-delay: 0.15s;
}

/* Sous-titre */
.page-hero__title {
  opacity: 0;
  animation: fadeUp 1s ease-out forwards;
  animation-delay: 0.25s;
}

/* Description */
.page-hero__description {
  opacity: 0;
  animation: fadeUp 1s ease-out forwards;
  animation-delay: 0.35s;
}

/* ============== End =============  */

.section__title-image {
    width: 193px;
}

.layout_with_background_trick_right {
    background-image: url("/wp-content/uploads/2025/10/Frame-2-e1761750037477.png");
    background-position: top right;
    background-repeat: no-repeat;
    background-size: 60px auto;
}

.layout_with_background_trick_left {
  background-image: url("/wp-content/uploads/2025/10/Frame-1-e1761735353485.png");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 60px auto;
}



.footer-logo-link img {
    width: 54px;
}

.footer-links-col ul {
    display: flex;
    flex-direction: row-reverse;
    gap: 25px;
}

.footer-links-col ul li a {
    font-weight: 500;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
    text-decoration: none;
}



/* ========== Custom CSS ======== */

.contact_form_title p {
    margin-bottom: 5px !important;
}

.contact_form_field {
    background-color: #D9D9D938;
    border: none !important;
    border-radius: 8px;
}

.contact_form_field::placeholder {
	color: #0000007A;
	font-weight: 500;
}

.contact_form_input_simple , .contact_list_drop{
    height: 50px;
    margin: 5px 0px 0px 0px;
}

.contcat_text_area {
    margin: 7px 0px;
    padding: 15px 5px 5px 15px;
}

.contact_list_drop {
	color: #0000007A;
	font-weight: 500;
}



.conact_file {
    width: 100%;
    padding: 10px 0px 0px 10px;
}

.contact_form_submit  {
    background-color: #000;
    color: #fff;
    border: none;
    width: 100%;
    border-radius: 5px;
    height: 53px;
    margin-top: 15px;
}

.form_main_label {
    width: 100%;
	margin-bottom: 10px !important;
}

.form_main_label textarea {
	margin-top: 6px;
}

.contact-form p {
	margin-bottom: 5px; 
}


.box_simple_hover_simple:hover .image_to_hover img {
  opacity: 0;
}

.box_simple_hover_simple:hover .image_to_hover {
    background-size: contain  !important;
    background-position: center center;
  
}

.trp-language-item {
  padding: 7px 7px ;
}

.tp-flipbox__front .tp-flipbox__desc-back {
  color: #fff !important;
}

.tp-flipbox__front {
  align-items: end !important;
  -webkit-align-items: end !important;
}

/* Timeline */
.twae-wrapper .twae-icon svg {
  width: 100% !important;
  height: 100% !important;
}
/* End timline */

/* ============================= */


/* ========== COMPONENTS (mobile) ========== */

/* ========== MEDIA QUERIES (min-width) ========== */
@media (min-width: 576px) { /* petits écrans (portrait) */ }
@media (min-width: 768px) { /* tablettes */ 
    
}

@media (min-width: 992px) { /* desktop */ 

    .header-container{
        padding: 10px 15px;
    }
}

@media (max-width: 992px) { /* desktop */ 

	.wpgmp_map_parent .wpgmp_map  {
		width: 700px !important; 
	}
}

@media (max-width: 768px) { /* desktop */ 

	.wpgmp_map_parent .wpgmp_map  {
		width: 350px !important; 
	}
}

@media (min-width: 1200px) { /* grands écrans */ 


    .page-hero__title-image img {
        /* width: 320px; */
    }

    .page-hero__title-image {
        text-align: initial;
    }

    .page-hero__title {
        font-size: 60px;
        font-weight: 600;
        line-height: 70px;
        letter-spacing: 0%;
        text-align: initial;
        color: #F8F8F8;
    }

    .page-hero__description {
        font-weight: 400;
        font-size: 24px;
        line-height: 30px;
        letter-spacing: 0%;
        text-align: initial;
        color: #FFFFFFB0;
    }



    /* Body Style */
    .layout_with_background_trick_right {
        background-size: 120px auto;
    }

    .layout_with_background_trick_left {
    background-size: 120px auto;
    }

    .section__title-image {
        width: 100%;
    }
    /* End of body style */




    .footer-logo-link img {
        width: 75px;
    }

    .footer-links-col ul li a {
        font-weight: 500;
        font-size: 17px;
        line-height: 100%;
    }


}



/* Redéfinir la variable globalement */
:root {
  --tw-line-width: 20px; /* Remplace 20px par la valeur que tu veux */
}