/* =======================================================
                  VARIABLES GLOBALES
======================================================= */

:root {
    --primary: #156875;
    --secondary: #1AB5A0;
    --success: #5CD750;
    --danger: #5E452F;
    --warning: #fd7e14;
    --info: #37c9c9;
    --light: #F7F2E6;
    --dark: #10303E;
    --bs-nav-link-color: var(--primary);
    --bs-link-color: var(--primary);
    --bs-link-hover-color: var(--secondary);
  }



  /* =======================================================
                  GLOBALES
======================================================= */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}


  /* =======================================================
                  POLICES
======================================================= */

body{
    font-family: "Poppins", sans-serif;
    font-weight: 400;
  }

h1,
h2,
h3 {
    font-family: "Anton", sans-serif !important;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.1rem;
}
  
h1 {
    color: var(--primary);
}
h2, h3, h6 {
    color: var(--secondary);
}

a{
    font-family: "Poppins", sans-serif !important;
    text-decoration: none;
    color: inherit;
}

p{
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.btn {
    font-family: "Poppins", sans-serif !important;
}

.text-content h1,   
.text-content h2, 
.text-content h3, 
.text-content h4, 
.text-content h5, 
.text-content h6, 
.text-content p {
    margin-bottom: 2rem;
}


/* =======================================================
                  BOUTONS
======================================================= */

  .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--secondary);
    --bs-btn-hover-border-color: var(--secondary);
    --bs-btn-focus-shadow-rgb: 21, 104, 117;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--success);
    --bs-btn-active-border-color: var(--success);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #AABAC2;
    --bs-btn-disabled-border-color: #8899A6;
  }
  
  .btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--secondary);
    --bs-btn-border-color: var(--secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #01FCFB;
    --bs-btn-hover-border-color: var(--secondary);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #37c9c9;
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #4f4f4f;
    --bs-btn-disabled-border-color: #343434;
  }
  
  .btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary);
    --bs-gradient: none;
  }

  .nav-pills {
    --bs-nav-pills-border-radius: 0.375rem;
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: var(--primary);
  }
  
  

/* =======================================================
                  NAVIGATION - GENERAL
======================================================= */

.navbar {
  background-color: white;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.navbar-nav {
    display: flex;
    gap: 1.5rem;
}

.navbar .nav-link {
  color: var(--primary) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 18px;
  font-weight: 200;
  position: relative;
  transition: color 0.3s ease, font-size 0.3s ease;
}

/* Soulignement animé hover */
  .navbar .nav-link::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 2px;
    background-color: var(--primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
  }

  .navbar .nav-link:hover::after {
  transform: scaleX(1);
}

/* menu burger */
.navbar-toggler {
    border: none !important;
    box-shadow: none;
    color: var(--primary) !important;
  }

  .navbar-toggler:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  @media (max-width: 991.98px) {
    .navbar-collapse {
      text-align: center;
    }
  }


/* =======================================================
                  NAVIGATION - HOMEPAGE - Transparent
======================================================= */

.navbar-scroll {
    background-color: transparent;
    transition: background-color 0.3s ease, bax-shadow 0.3s ease;
    box-shadow: none;
}

.navbar-scroll .nav-link,
.navbar-scroll .btn {
    color: white !important;
}


.navbar-scroll .nav-link {
    position: relative;
    font-family: "Poppins", sans-serif !important;
    font-size: 18px;
    font-weight: 200;
    transition: color 0.3s ease, font-size 0.3s ease;
  }

/* menu burger */
.navbar-scroll .navbar-toggler {
  color: white !important;
}


.navbar-scroll .navbar-collapse.show .nav-link {
  color: var(--primary) !important;
}




/* =======================================================
                  NAVIGATION - HOMEPAGE - Scrolled
======================================================= */

.navbar-scroll.scrolled {
    background-color: white;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  }


/* liens et boutons */

  .navbar-scroll.scrolled .nav-link,
  .navbar-scroll.scrolled .btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
  }


  /* btn primary : bouton droite */
  .navbar-scroll.scrolled .btn-primary {
    color: white !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
  }

  .navbar-scroll.scrolled .btn-primary:hover {
    color: white !important;
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
  }


  /* btn outline primary : bouton gauche */
   .navbar-scroll.scrolled .btn-outline-primary:hover {
    color: white !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
  }

  /* menu burger */
.navbar-scroll.scrolled .navbar-toggler {
  color: var(--primary) !important;
}
  


  

  /* =======================================================
                  SEARCH BAR
======================================================= */

  .search-bar input::placeholder {
  color: #000;
 }

 .search-bar input, 
 .search-bar select {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
 }

 .search-bar {
  border-radius: 1rem;
 }

 .search-bar .btn{
  font-weight: 500;
  font-size: 1rem;
 }

  /* =======================================================
                 CARDS HOMEPAGE
======================================================= */
.card-accueil {
    position: relative;
    min-height: 400px;
    cursor: pointer;
    overflow: hidden;
  }

     .card-accueil .card-text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 1;
  }

  .card-accueil:hover .card-text{
    opacity: 1;
    transform: translateY(0);
  }

  .card-accueil h3 {
    transition: transform 0.4s ease;
    position: relative;
    z-index: 2;
  }

    .card:hover h3{
    transform: translateY(-20px);
  }


   .cardtest1{
    background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(/assets/images/image\ \(16\).jpg);
    background-position: center;
    background-size: cover;
  }
  .cardtest2{
    background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(/assets/images/image\ \(12\).jpg);
    background-position: center;
    background-size: cover;
  }
  .cardtest3{
    background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(/assets/images/image\ \(8\).jpg);
    background-position: center;
    background-size: cover;
  }


  @media (max-width: 991.98px) {
    .card-accueil .card-text {
      opacity: 1 !important;
      transform: translateY(0) !important;
      position: relative;
      bottom: auto;
      left: auto;
      right: auto;
    }
  }
 



  /* =======================================================
                  CARTES & HOVER
======================================================= */
  
.card-title {
    color: var(--primary);
  }

.card-img-top {
    width: 100%;
    height: 15vw;
    object-fit: cover;
}
  
.hover-animate {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-animate:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

  
   .card-header {
    font-family: "Anton", sans-serif;
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
  }
  
  .card-header i {
    font-size: 3rem;
  }
  
  .card-body ul i {
    color: var(--primary);
  }
 

/* =======================================================
                  FORMULAIRES
======================================================= */

 
  .form-signin,
  .form-listing {
    max-width: 700px;
    padding: 1rem;
  }


  .form-container{
    background: white;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  }

.form-switch-lg .form-check-input {
  width: 3rem;
  height: 1.5rem;
}

.form-switch-lg .form-check-input:checked {
  background-position: right center;
}

/* =======================================================
                  IMAGES & SECTION
======================================================= */

 .bgimage{
    width: 100%;
    height: 90vh;
    background-image: linear-gradient(rgba(4, 9, 30, 0.5), rgba(4, 9, 30, 0.5)), url(/assets/images/imageBG.jpg);
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    position: relative;
  }

.bgimage2{
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(/assets/images/jumbotron.jpg);
    background-position: center;
    background-size: cover;
    height: 60vh;
  }

  img.section-image {
    font-family: "object-fit: cover;";
    object-fit: cover;
  }

  .section-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .bg-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }


  /* =======================================================
                  COMPOSANTS (avatar, icônes...)
======================================================= */

.avatar {
    display: inline-block;
    position: relative;
    width: 3rem;
    height: 3 rem;
    text-align: center;
    border: #dee2e6;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
  }

  .avatar.avatar-xl {
    width: 7rem;
    height: 7rem;
    line-height: 7rem;
  }


   .date-tile {
    display: flex;
    width: 5.5rem;
    height: 5.5rem;
    text-align: center;
    color: #fff;
    border-radius: 0.4rem;
    background: var(--primary);
    align-items: center;
    justify-content: center;
  }


  
 .icon {
  margin-bottom: 0.5rem;
 }

 .fa-elec {
  font-size: 35px;
  color: var(--primary);
}

.link-update {
  color: var(--primary) !important;
  font-family: "Anton", sans-serif !important;
}

/* =======================================================
                 FOOTER
======================================================= */

.bg-footer {
  background-color: var(--primary) !important;
}



/* =======================================================
                 COULEURS
======================================================= */

#lien-inscription{
  color: var(--secondary) !important;
}



/* =======================================================
                 CONTACT
======================================================= */


  .hero {
    position: relative;
    text-align: center;
    background: #00714B;
    box-shadow: 0 0.05rem 0.3rem rgba(0, 0, 0, 0.1);
    height: 40vh;

  }

  .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

 img.bg-image {
  font-family: "object-fit: cover;";
  object-fit: cover;
 }




/* =======================================================
                 RESPONSIVE
======================================================= */


 @media (max-width: 576px) {
  .hero-heading {
    font-size: 2rem;
  }

  h1, h2, h3 {
    font-size: 1.5rem;
  }

  .display-3,
  .display-4,
  .display-5 {
    font-size: 2rem;
  }

  .py-5 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .btn {
    font-size: 1.1rem;
    padding: 0.9rem 1.4rem;
  }
}




@media (max-width: 991px) {
  .navbar-collapse {
    background: white;
    padding: 1rem;
  }

  .navbar-nav .nav-item {
    margin-bottom: 0.5rem;
  }

  .navbar-nav .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
}


















  

 

 









/* ????? */

  
  
 
  
  form i {
    color: var(--primary);
  }
  
 
  

.dark-overlay {
  position: relative;
}

.dark-overlay .overlay-content {
  position: relative;
  z-index: 20;
}
  .card-img-overlay-bottom {
    position: absolute;
    right: 1.2rem;
    bottom: 1.2rem;
    left: 1.2rem;
  }

  .card-img-overlay-top {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    left: 1.2rem;
  }