/* styles.css */

@media (max-width: 768px) { 
    .leaderline-hidden {
        display: none;
    }
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.blink {
	animation: blink 2s infinite;
}



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

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

@font-face {
    font-family: 'Poppins';
    src: url('../../assets/fonts/poppins/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../assets/fonts/poppins/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../assets/fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../assets/fonts/poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

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

ul.gallery{
	list-style-type: none;
}

.ff-HelveticaCondensedRegular {
    font-family: 'HelveticaCondensedRegular', sans-serif;
}


.cfw-normal {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.cfw-light {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

.cfw-extra-light {
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
}

.cfw-extra-bold {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
}

.cfw-semi-bold {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.cfw-bold {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.fs-075{
	font-size: 0.75rem;
}

/* Général */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.light-grey-bg{
    background: #EEEEED !important;
}

a.nav-link.blue-link, span.blue-link{
    color: #2A4D8A;
}

a.nav-link.blue-link:hover, span.blue-link:hover{
    color: #F0481F;
}

/* En-tête */
.header-container {
    background-color: #002e5d;
    color: #ffffff;
}

.header-container .logo img {
    max-height: 50px;
}

.header-container nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.header-container nav ul li {
    display: inline;
}

li.is-active a{
    border-bottom: solid 4px #F0481F;
}

.header-container nav ul li a {
    text-decoration: none;
    color: #ffffff;
    padding: 10px;
}

.header-container .language a {
    text-decoration: none;
    color: #ffffff;
    margin-left: 10px;
}

.menu-item {
    position: relative;
    padding-right: 30px; /* Add some padding to make space for the arrow */
}

.dropdown-toggle::after {
    content: '\f078'; /* Font Awesome down arrow */
    font-family: 'Font Awesome 5 Free'; /* Ensure to use the right font family */
    font-weight: 990; /* Ensure the font weight is bold to match Font Awesome's solid icons */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #2A4D8A; /* Change color to match your design */
    border: 0;
}

.dropdown-menu{
    border-radius: 0px;
    background-color: #F0481F;
    min-width: 14rem;
   margin-top: 0rem !important; margin-top: -10px;
}

.dropdown-menu a.nav-link.blue-link{
    color:white;
    font-size: 0.85rem;
    font-weight: 300;
}

header.bg-light-grey{
    background: #DEDDDE !important;
    z-index: 999;
    position: relative;
}

.border-5{
    height: 5px;
}

.border-15{
    height: 15px;
}

.dark-blue-bg{
    /* background-color: #2A4D8A; */
    background-color: #0A4A7F;
}

.orange-bg{
    background-color: #F0481F;
}

.orange-bg-txt{
            background-color: #F0481F;
            color: white; /* Change text color if needed */
            padding: 10px; /* Add padding if you want */
            display: inline-block; /* Ensure the background only covers the text */
}
 
.orange{
    color: #F0481F;
}

  #particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    /*pointer-events: none;  Ensure particles are not interactive */
    background: transparent; /* transparent background */
    overflow: hidden; /* ensure contents don't overflow */
  }

  #particles-js-orange {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 30%;
    z-index: 1;
    pointer-events: none; /* Ensure particles are not interactive */
  }
  

  .main-content{
    position: relative;
    
    
  }
  
  .main-content-page h2{
      color: #F0481F;
      text-transform: uppercase;
      font-size: 2.5rem;
      font-weight: lighter;
      margin-bottom: 1rem;
  }
  
    .main-content-page h3{
      text-transform: uppercase;
      font-size: 1rem !important;
      font-weight: bold;
      margin-bottom: 1rem;
  }
  
    .main-content-page ul li,  .main-content-page p, .main-content-page a{

      font-weight: lighter;
  }
  
  .main-content-page a{
      color: #F0481F;
      text-decoration: none;
  }
  
    .main-content-page a:hover{
      text-decoration: underline;
      transition-duration: 500ms;
  }

  .carousel-inner {
    position: relative;
    z-index: 0;
  }
  .carousel-item img {
    height: 95vh;
    object-fit: cover;
  }
  .overlay-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff;
    width: 100%;
    height: 100%;
  }

  .top-left-lg{
    position: absolute;
    top: 50px;
    left: 0;
  }

    .top-right-lg{
    position: absolute;
    top: 100px;
    right: 0;
  }

  .bottom-left-lg{
    position: absolute;
    bottom: 50px;
    left: 0;
  }

  .bottom-middle-lg{
    position: absolute;
    bottom: 75px;
    left: 50%;
    transform: translateX(-50%);

  }



 .border-radius-20{
    border-radius: 20px;
 } 


 .card.post{
    border: 0;
    color: #2A4D8A;
 }

/* Section Hero */
.hero {
    background-color: #e6f2ff;
    text-align: center;
    padding: 50px 20px;
}

.hero h1 {
    margin: 0 0 20px 0;
    font-size: 2.5em;
    color: #002e5d;
}

.hero-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.hero-content img {
    max-width: 300px;
}

.hero-content ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hero-content ul li {
    margin-bottom: 10px;
    font-size: 1.2em;
    color: #333;
}

.hero-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #002e5d;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2em;
}

/* Section News */
.news {
    padding: 50px 20px;
    background-color: #f9f9f9;
}

.news h2 {
    text-align: center;
    color: #002e5d;
    margin-bottom: 30px;
}

.news-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.news-item {
    background-color: #ffffff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    max-width: 300px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.news-item h3 {
    margin-top: 0;
    font-size: 1.5em;
    color: #002e5d;
}

.news-item time {
    display: block;
    margin: 10px 0;
    font-size: 0.9em;
    color: #666;
}

.news-item p {
    font-size: 1em;
    color: #333;
}

.news-item a {
    display: inline-block;
    margin-top: 10px;
    color: #002e5d;
    text-decoration: none;
    font-weight: bold;
}

/* Section Formulaire de Contact */
.contact-form {
    background-color: #002e5d;
    color: #ffffff;
    padding: 50px 20px;
    text-align: center;
}

.contact-form h2 {
    margin-top: 0;
    font-size: 2em;
}

.contact-form p {
    margin: 20px 0;
}

.contact-form form {
    display: grid;
    gap: 20px;
    justify-content: center;
}

.contact-form .form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 400px;
    margin: 0 auto;
}

.contact-form .form-group label {
    margin-bottom: 5px;
    font-weight: bold;
}

.contact-form .form-group input,
.contact-form .form-group select,
.contact-form .form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
}

.contact-form .form-group input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
}

.contact-form button {
    padding: 10px 20px;
    background-color: #ffffff;
    color: #002e5d;
    border: none;
    border-radius: 5px;
    font-size: 1.2em;
    cursor: pointer;
}

.contact-form button:hover {
    background-color: #f0f0f0;
}

/* Pied de page */
.footer-container {
    background-color: #003366;
    color: #ffffff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.footer-container .contact-info p,
.footer-container .partners p {
    margin: 5px 0;
}

.map {
    text-align: center;
    margin: 20px 0;
}

.map img {
    max-width: 100%;
    height: auto;
}

.map-container {
    width: 100%;
    height: 300px; /* Fixed height */
    position: relative;
}

.map-container iframe,
.map-container .cmplz-placeholder-1,
.map-container .cmplz-placeholder-element {
    width: 100%;
    height: 100% !important;
    border: 0;
}

  .contact-section .info {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    padding-left: 20px;
  }


  h3.card-title {
    position: relative;
    padding-left: 20px; /* Ajoutez un espace pour le carré */
  }
  h3.card-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #ff5722; /* Couleur du carré */
  }
  
.image-map-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Ensures it does not interfere with carousel controls */
}

.map-image {
  width: 100%;
  display: block;
}

.point {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: 3px solid #FF4500;
  border-radius: 50%;
  cursor: pointer;
  box-sizing: content-box;
  pointer-events: auto; /* Allows interaction with the points */
      transition: background-color 1s, box-shadow 1s;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); /* Initialement sans ombrage */
}

.point:hover{
     background-color: #FF4500;
      background-color: #FF4500;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); /* Ajoutez l'ombre souhaitée */
}

.point:hover::before {
    background-color: white;
}

.point::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background-color: #FF4500;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.legend-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Ensures it does not interfere with carousel controls */
}

.legend {
  position: absolute;
  background-color: transparent;
  border: solid 1px white;
  color: white;
  padding: 10px 15px;
  border-radius: 20px;
  display: none;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  font-size:0.75rem !important;
}

.lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.top-left-lg, .top-right-lg, .bottom-left-lg, .bottom-middle-lg {
  position: absolute;
  z-index: 10; /* Ensure they are above other elements */
}

        .sidebar-year {border-left: solid 2px #2A4D8A;}
        .sidebar-year div { margin-bottom: 10px; display: flex; align-items: center; }
        .sidebar-year div span { margin-left: 10px; }



/* Responsive */
@media (max-width: 767.98px) {
    .contact-section .info, .contact-section .partners {
        border-right: none;
    }
}

@media (max-width: 576px) {
	.custom-absolute-to-relative {
		position: relative !important;
		width:100% !important;
		padding-top: 1rem !important;
		margin-top: 1rem !important;
	}

	.menu-item-social{
		display: none;
	}
	
	.page-template-homepage h1{
		line-height: 1.5rem !important;
    	font-size: 1.5rem !important;
	}
	
	.page-template-homepage .carousel-inner .orange .fw-bolder{
		line-height: 1.5rem !important;
    	font-size: 1.5rem !important;
	}
	
	.page-template-homepage .image-map-container .point-1{
		top: 42% !important;
    	left: 14% !important;
	}
	
	.page-template-homepage .image-map-container .point-2{
		top: 50% !important;
    	left: 25% !important;
	}
	
	.page-template-homepage .image-map-container .point-3{
		top: 45% !important;
    	right: 40% !important;
	}
	
	.page-template-homepage .image-map-container .point-4{
		top: 47% !important;
    	right: 20% !important;
	}

}

.carousel-inner .active {
  opacity: 1;
  transition: opacity 3s ease-in-out;
}
/* End of fix */


.navbar-nav .nav-link {
  color: #fff;
}
.dropend .dropdown-toggle {
  color: salmon;
  margin-left: 1em;
}
.dropdown-item:hover {
  background-color: lightsalmon;
  color: #fff;
}
.dropdown .dropdown-menu {
  display: none;
}
.dropdown:hover > .dropdown-menu,
.dropend:hover > .dropdown-menu {
  display: block;
  margin-top: 0.125em;
  margin-left: 0.125em;
}


      .contact-card {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .contact-card h3{
            text-transform : capitalize;
            margin-bottom: 0rem;
        }
        
        .contact-card p{
            font-size: 0.85rem;
        }
        .contact-card img {

            object-fit: cover;
            margin-right: 20px;
        }
        .contact-info {
            flex-grow: 1;
        }
        .contact-info h5 {
            margin: 0;
            font-weight: bold;
        }
        .contact-info p {
            margin: 0;
        }
        .contact-info .email, .contact-info .phone {
            color: #555;
        }
        
        .contact-info .linkedin {
            color: white;
            text-decoration: none;
            background-color: #0077b5;
            padding: 5px 9px;
            border-radius: 20px;
        }
        
       .map-pin-block {
            display: flex;
            align-items: center;
            margin: 20px 0;
        }
        .map-pin-block .icon {
            font-size: 3rem;
            color: #E30613; /* Red color for the map pin */
            margin-right: 10px;
            position: relative;
        }
        .map-pin-block .icon::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            width: 20px;
            height: 5px;
            background-color: #ddd;
            border-radius: 50%;
            transform: translateX(-50%);
            z-index: -1;
        }
        .map-pin-block .text {
            font-size: 1rem;
            font-weight: bold;
        }
        
        .map-pin-block .text a{
        color: #212529;
        }

@media screen and (min-width: 769px) {
  .dropend:hover > .dropdown-menu {
    position: absolute;
    top: 0;
    left: 100%;
  }
  .dropend .dropdown-toggle {
    margin-left: 0.5em;
  }
}

@media screen and (max-width: 1650px) {
	#carouselExampleFade .container img{
		width: 40%;
	}
	
	#carouselExampleFade .container img.moto{
		width: 120px;
	}
	
}

.mh-card-title{
	 min-height: 30px;
}