* {
    font-family: 'Poppins', sans-serif;
}

:root{ 

    --bodycolor: #FFFF;

    --bodytextcolor: #fff;


    --bodyTextColorDark:#151D22;
    --bodyTextColorLight:#d8e7f4;
    --bodyTextColorExtraLight:#fff;
    --LdsTextColor:#0065B5;

    --bodyDarkModeBackground:#192734;
    --bodyDarkAntraciteBackground:#182127;
    --bodyDarkModeBackground:var(--bodyDarkAntraciteBackground);
    
    /*https://www.color-hex.com/color-palette/99156*/

    --headerColor:#0065B5;
    --footerColor:#0065B5;
}

body{
    background-color: var(--bodycolor);
    color: var(--LdsTextColor);

}


header{

    background-color: var(--headerColor);
}

header h1{
    margin-bottom: 20px;
    font-weight: bold;
    text-shadow: 0px 0px 5px #05487b;
    font-size: 2.35rem;
    color: var(--bodyTextColorExtraLight);
}


header p{
  
    font-size: 20px;
    color: var(--bodytextcolor);

}


header .logo {
    image-rendering: -webkit-optimize-contrast; /* Améliore la netteté sur WebKit */
    image-rendering: crisp-edges; /* Peut fonctionner sur certains navigateurs */
    image-rendering: high-quality; /* Pour améliorer le rendu sur certains systèmes */    
    width: 290px; /* Largeur par défaut */
    max-width: 100%; /* Empêche le dépassement du conteneur */
    height: auto; /* Conserve les proportions de l'image */
    display: block; /* Évite les espaces indésirables sous l'image */
}

/* Responsive : Ajustement de la taille pour les petits écrans */
@media (max-width: 768px) {
    .logo {
        width: 200px; /* Réduction pour les écrans moyens */
    }
}

@media (max-width: 480px) {
    .logo {
        width: 150px; /* Encore plus petit pour les mobiles */
    }
}

.form-zone         h2 {
    display: flex;
    align-items: center;
    display: flex
;
    align-items: center;
    font-weight: bold;
    font-size: 24px;
  
}
.form-zone         h2 span {
    
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    min-height: 40px;
    width: 40px;
    height: 40px;
    background-color: blue;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    margin-right: 10px;
        background-color: #fe6b18;

        flex-shrink: 0;
}


.btn-white {
   /* background: linear-gradient(to right, #6EB8EF, #0E70BA);*/
    background: #fff;
    background-color: #fe6b18;
    border: none;
    color: white;
    color: #fff;
    font-weight: bold;
    
    
    /* Lueur basée sur la première couleur */
    transition: transform 0.3s ease;
}


.btn-white:hover {
    background: #113165;
    color:#E4EFF5;



}


.fixed-img {
    height: 150px; /* Hauteur fixe */
    object-fit: cover; /* Ajuste l'image sans la déformer */
    width: 100%; /* Prend toute la largeur de la carte */
}




 



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

.parent-div {
    animation: slideUp 0.3s ease-out;
}


    .map {

      filter: invert(80%) hue-rotate(200deg) saturate(50%) contrast(90%);
      filter: invert(10%) hue-rotate(270deg) saturate(70%) contrast(90%);

      filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
      /* Firefox 10+ */
      filter: gray;
      /* IE6-9 */
      -webkit-filter: grayscale(99%);
      /* Chrome 19+ & Safari 6+ */
      -webkit-backface-visibility: hidden;
      /* Fix for transition flickering */

    }


    .border-primary {
        --bs-border-opacity: 1;
        border-color: rgba(var(--bLdsTextColor), var(--bs-border-opacity)) !important;
    }


    /* Style du formulaire */
#reservationForm , #reservationFormLDS2 {
    background: #0065b5; /* Bleu */
    color: #fff; /* Texte blanc */
    padding: 35px;
    border-radius: 6px!important; /* Coins arrondis */
    margin: auto;
    
}

/* Style des labels */
#reservationForm .form-label ,  #reservationFormLDS2 .form-label{
    font-weight: normal;
    margin-bottom:10px
}

/* Style des champs input */
#reservationForm .form-control , #reservationFormLDS2  .form-control {
    background: rgba(255, 255, 255, 0.9); /* Fond blanc léger */
    color: #000;
    border: none;
    border-radius: 5px;
}

/* Icône du calendrier */
#reservationForm .input-group-text  , #reservationFormLDS2 .input-group-text {
    background: #004b87; /* Bleu plus foncé */
    color: #fff;
    border: none;
    cursor: pointer;
}




.footer{

    background-color: var(--footerColor);
    color: var(--bodyTextColorExtraLight);
}