@font-face {
    font-family:'Karla' ;
    src: url('/Fonts/Karla-Regular.ttf');
}


*,::before,::after{
    box-sizing: border-box;
    margin: 1px;
    padding: 0;
    font-family: Karla, sans-serif;
    background: #213A8F;
}
.colonne1,
.colonne3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Pour centrer les images si besoin : */
  align-items: center;
}

.colonne1 img,
.colonne3 img {
  width: 75%;     /* Réduit la largeur à 50 % de celle du conteneur */
  height: auto;   /* Maintient le ratio de l'image */
  display: block; /* Permet de centrer l'image si vous ajoutez un margin auto */
  margin: 0 auto; /* Centre l'image horizontalement */
  object-fit: cover; /* Adapte l'image en conservant ses proportions */
  border-radius: 5%;
}
#Logo_svg{
    height: 15px;
    width: 15px;
}

.header {
    display: flex;
    align-items: center;   /* Centrer verticalement le logo et le titre */
    padding: 10px 20px; 
    justify-content: space-between;   /* Espacement autour de l'en-tête */
    /* background-color: #f8f8f8; /* Couleur de fond de l'en-tête */
    /* border-bottom: 1px solid #e0e0e0; /* Bordure en bas de l'en-tête */
}

/* Style du logo */
.logo {
    border-radius: 5px;
    height: 150px;          /* Ajuster la taille du logo */
    margin-right: 10px; 
    margin-top: 10px;   /* Espace entre le logo et le titre */
}
.circular-logo {
    width: 200px; /* Ajustez la taille selon vos besoins */
    height: 200px; /* Ajustez la taille selon vos besoins */
    /*border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;*/
  }
  .circular-logo img {
    width: 100%;
    height: 100%;
  }
/* Style du titre */
.titre {
    font-size: 70px;       /* Taille de la police du titre */
    /* color: #333;          /* Couleur du titre */
    margin: 0;    
    text-align: center;
    width: 100%;   
    margin-bottom: 1rem;
    font-weight: 400;
    font-weight: bold;
    letter-spacing: 2px;
    color:#FFFF;
    /* color: #ec1cce;*/
    padding: 1rem;      /* Supprimer la marge par défaut du titre */
}


.grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crée deux colonnes de largeur égale */
    
    gap: 0px;                               /*grid-template-rows: repeat(20,1fr); Espace entre les éléments */
}

.form{
    
    display: flex;
    flex-direction: column;   /* Empile verticalement les éléments du formulaire */
    gap: 1px;                /* Ajoutez un intervalle entre les éléments */
    padding: 5px;            /* Ajoutez un rembourrage autour du formulaire */
    text-align: left;
    width: 100%;
    background: #213A8F;
    
}

.harmonized {
    font-family: Karla;
    font-size: 15px; 
    font-weight: 100;
    border-radius: 5px; 
    height: 40px; /* Ajuste la hauteur */
    line-height: 40px; /* Alignement vertical du texte */
    background-color: #FFFF; /* Couleur de fond */
    color: #0c0c0c; /* Couleur du texte */
    border: 1px solid #aaa; /* Bordure */
    padding: 5px; /* Espacement intérieur */
    box-sizing: border-box; /* Inclure bordure et padding dans la hauteur totale */
    margin-bottom: 10px; /* Espacement entre les éléments */
    width: 100%; /* Largeur à 100% du conteneur parent */
}
.liste_modele {
    font-family: Karla;
    font-weight: 100;
    display: flex;
    /* text-align: center;display: flex;*/
    border-radius: 5px;
    height: 40px; /* Ajuste la hauteur */
    align-items: center;
    justify-content: space-between;
    border: 1px solid #FFFF; /* Bordure */
    /*background-color: #993366;  Couleur de fond violine */
    padding: 1px; /* Espacement intérieur */
    /* color: #fff; Couleur du texte */
    background-color: #FFFF;
    color:#0a0a0a;
    
    margin-bottom: 10px; /* Espacement entre les éléments */
}
.liste_modele label {
    /*flex: 1;*/
    background-color: #FFFF;
    margin-right: 10px; /* Espace entre le label et la zone déroulante */
    padding-left: 10px;
}
.liste_modele select {
    flex-grow: 1;
    background-color: #FFFF;
    width: auto;
   /* min-width: 40ch;
    flex: 2;*/
}

.mention{
    font-weight: bold;
    
    color: white;
}

input::placeholder {
    color:#0a0a0a;       
    opacity: 1;       
}


#submit-button {
   
    height: 50px; /* Change la hauteur du bouton */
    width: 200px; /* Change la largeur du bouton */
    font-size: 16px; /* Change la taille de la police du bouton */
    font-family: Arial, sans-serif; /* Change la police du bouton */
    display: block;
    margin: 0 auto; /* Centre le bouton horizontalement */
    background-color: #7030a0; /* Couleur de fond du bouton */
    color:white; /* Couleur du texte du bouton */
    border: none; /* Retire la bordure du bouton */
    border-radius: 5px; /* Arrondit les coins du bouton */
    cursor: pointer; /* Change le curseur au survol du bouton */
  }
  
#submit-button:hover {
    background-color: #45a049; /* Change la couleur au survol du bouton */
  }

  
input:invalid {
    
    border-color: #e74c3c; 
}
#bday{
    background-color:#FFFF;
    
}

#result{
    
    background-color:#FFFF;
  
}


fieldset {
    border: 2px solid #FFFF; /* Bordure de 2 pixels, solide, de couleur noire */
    padding: 10px; /* Espacement intérieur */
    border-radius: 5px; /* Coins arrondis */
    margin: 20px; /* Espace autour du fieldset */
}
  legend {
    color:#FFFF;
    font-weight: bold; /* Texte de la légende en gras */
  }
/*/* Media Queries pour rendre la page responsive */

/* Pour les écrans de bureau */
@media (min-width: 1024px) {
    .header {
        padding: 10px 20px;
    }
    .logo {
        height: 150px; /* Taille originale du logo */
    }
    .titre {
        font-size: 70px; /* Taille originale de la police du titre */
    }
    .grille {
        grid-template-columns: repeat(3, 1fr); /* Trois colonnes */
    }
}

/* Styles pour les tablettes (y compris iPad Air) */
@media screen and (min-width: 601px) and (max-width: 1280px) {
    .header {
        padding: 10px;
        flex-direction: column;
        align-items: flex-start;
    }
    .logo {
        height: 120px;
        display: block;
        margin: 0 auto;
        align-items: center;
    }
    .titre {
        font-size: 50px;
    }
    .grille {
        grid-template-columns: 1fr;
    }

    /* Masquer toutes les images de la colonne 3 */
    .colonne3 img {
        display: none !important;
    }

    /* Ne garder que la première image de la colonne 1 */
    .colonne1 img:nth-child(n+2) {
        display: none !important;
    }
}

/* Styles pour les téléphones (Portrait et Paysage) */
@media screen and (max-width: 600px) {
    .header {
        flex-direction: column;
        align-items: flex-start;
    }
    .logo {
        height: 100px;
        display: block;
        margin: 0 auto;
        align-items: center;
    }
    .titre {
        font-size: 40px;
    }
    .grille {
        grid-template-columns: 1fr;
    }

    /* Masquer toutes les images de la colonne 3 */
    .colonne3 img {
        display: none !important;
    }

    /* Ne garder que la première image de la colonne 1 */
    .colonne1 img:nth-child(n+2) {
        display: none !important;
    }
}