:root {
  --color-primary: #15470b; /* Couleur principale */
  --color-secondary: #357237; /* Couleur secondaire */
  --color-primary-bright: #257a13; 
  --color-secondary-bright: #5dc561; 

  --color-three: #3c78e7;

  --color-navbar-bottom: #0f3108;

  /* Ajoutez d'autres variables selon vos besoins */
  --color-text: #ffffff;
  --color-text-success: #43d373;
  --color-text-warning: #d34343;
  --color-navbar-text: #ffffff;

  --navbar-height: 56px;
}


/* FORMAT TABLETTE ET ORDINATEUR !! */

@media screen and (min-width: 768px)
{
  .bg
  {
    background-color: black;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
    overflow-x: hidden; 
  }

  .bg-image-contact
  {
    background-image: url('../backgrounds/leaf_background_landscape.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
    overflow-x: hidden;
  }

}


/* FORMAT MOBILE !! */

@media screen and (max-width: 767px) 
{
  .bg
  {
    background-color: black;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
    overflow-x: hidden;
  }

 .bg-image-contact 
 {
    background-image: url('../backgrounds/leaf_background_portrait.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
  overflow-x: hidden;
  }
}

/* FORMAT GLOBAL - S'applique à TOUS les appareils */

body
{
  background-color: black;
  color: var(--color-text);
}

/* CSS pour styliser la vidéo en background */
#background-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1; /* Assurez-vous que la vidéo est en arrière-plan en déplaçant son z-index en dessous du contenu */
  opacity: 0.6;
}

a
{
  color: var(--color-text) !important;
}

img
{
  border-radius: 20%;
  border: 5px solid rgb(30, 102, 36);
      width:100%;
      max-width:800px;
}

p
{
    font-size: x-large;
    backdrop-filter: blur(2px);
    text-align: justify;
    text-justify: inter-word;
}
h1
{
    margin: 5vh;
    color: var(--color-text);
    font-weight: bold;
}

h2
{
    margin: 5vh;
    color: var(--color-text);
    font-weight: bold;
}

h3
{
  color: var(--color-text);
  padding: 5px;
  background-color: var(--color-secondary);
  font-weight: bold;
  border-radius: 7px;
}

.custom-bg-primary
{
  background-color: var(--color-primary);
}

.custom-bg-secondary
{
  background-color: var(--color-secondary);
}

.custom-bg-secondary-2
{
  background-color: #408b43;
}

.custom-bg-primary:hover, .custom-bg-secondary:hover, .custom-bg-secondary-2:hover
{
  background-color: var(--color-secondary-bright);
}

.custom-bg-primary:focus, .custom-bg-secondary:focus, .custom-bg-secondary-2:focus
{
  background-color: var(--color-secondary-bright);
}


@media screen and (min-width: 1000px) {

    h1 {
      font-size: 80px;

    }

}

.custom_btn {
  min-width: 270px;
  padding: 10px 20px; /* Ajout d'un espace intérieur pour améliorer l'apparence */
  background: linear-gradient(to right, var(--color-secondary), var(--color-primary)); /* Utilisation d'un dégradé de couleurs */
  border: none;
  border-radius: 25px; /* Augmentation du rayon de la bordure pour des coins plus arrondis */
  color: var(--color-text);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Mise à jour de la police */
  font-size: 1.8em; /* Légère augmentation de la taille de la police */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Ajout d'une ombre subtile */
  text-decoration: none;
  transition: background-color 0.3s ease; /* Ajout d'une transition pour un effet de survol plus doux */
}

.custom_btn:hover
{
  cursor: pointer;
  text-decoration: none;
  font-weight: bold;
  background: linear-gradient(to right, var(--color-secondary-bright), var(--color-primary-bright));
}

.card
{
  background-color: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
}


.buttons_1

{
    margin-top: 15vh;
}

.buttons_2

{
    margin-top: 8vh;
}

a, button
{
  text-decoration: none;
}


.navbar.navbar-inverse {

  border: none;

}

.navbar .navbar-brand {

  padding-top: 0px;

}

.navbar .navbar-brand img {

  height: 50px;

}

.navbar-custom {
  background: linear-gradient(90deg, rgba(47,87,71,1) 0%, rgba(47,87,71,1) 10%, rgba(68,140,111,1) 25%, rgba(68,140,111,1) 50%, rgba(68,140,111,1) 90%, rgba(47,87,71,1) 100%);
  border-bottom: 2px solid #fff;
}

.navbar-light-custom
{
  background-color: #307457 !important;
}

.navbar_btn_custom
{
  background-color: #2f5747;
  color: var(--color-text);
}

.searchbar_custom
{
  outline: 3px solid #2f5747;
  background-color: #f0fff9;
}

.custom_send_btn
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  background: var(--color-secondary);
  padding: 5px;
  width: 80%;
  border: 2px solid var(--color-secondary);
  border-radius: 5px;
  color: var(--color-text);
}

.custom_send_btn:hover
{
  cursor: pointer;
  font-weight: bold;
  background-color: var(--color-secondary-bright);
  border: 2px solid white;
}

.custom_badge
{
  right: 0px;
}