:root {
    --bleu-roi : #4169E1;
    --bleu-clair : #DFF2FF;
    --orange-fonce : #cf5d28;
}


/* Page principale */
.modules-calcul {
    padding: 30px;
    text-align: center;
    display: flex;
    justify-content: space-evenly; /* Espace entre les éléments */
    align-items: center; /* Aligne verticalement au centre */
}

h1 {
    color: var(--orange-fonce);
    padding-bottom: 20px;
    background-color: #fff;
}

.intro {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-evenly;
}

p {
    font-size: 18px;
    color: #555;
}

.formulaire {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.formulaire_calc {
    display: flex;
    justify-content: center;
}

/* Formulaire */
#formulaire_calc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 500px;
    padding: 20px;
    background: var(--bleu-clair);
    border-radius: 8px; /* Bord arrondi */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre pour le bloc du formulaire */
    flex: 1; /* Le formulaire prend tout l'espace disponible */
    border: solid var(--orange-fonce) 3px;
}

.form-group {
    margin-bottom: 20px;
}

input {
    background: white;
    padding: 10px;
    font-size: 15px;
    margin-top: 5px;
}

input:focus {
    background: white;
}

.resultat {
    border: solid var(--orange-fonce) 3px;
    border-radius: 10px;
    padding: 8px;
}


/* Styles pour l'image */
.module-image {
    width: 700px;
    max-width: 100%;
    height: auto;
    margin-right: 70px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

select:focus {
    background: var(--bleu-clair);
    box-shadow: 0 0 6px rgba(242, 141, 53, 0.5);
}

/* Bouton de validation */
.btn-submit {
    background: #4169E1;
    color: #fff;
    padding: 10px 20px;
    font-size: 22px;
    border: none;
    cursor: pointer;
    border-radius: 15px;
}

.btn-submit:hover {
    background-color: var(--orange-fonce); /* Couleur de survol *!*/
    color: #ffffff; /* Change la couleur au survol */
    box-shadow: 7px 4px 10px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

.btn-submit:active {
    box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.3); /* Ombre intérieure pour clique */
    transform: scale(0.95); /*effet de réduction pour simuler un clic */
    transition: transform 0.1s ease-out, background-color 0.2s ease-out;
    border-radius: 25px;
}

select {
    width: 100%;
    padding: 10px 15px;
    font-size: 16px;
    border: 2px solid #cfcfcf; /* Couleur de la bordure */
    border-radius: 5px; /* Coins arrondis */
    background-color: #fff; /* Fond blanc */
    color: #000000; /* Couleur du texte */
    outline: none;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
}

select:focus {
    border-color: #ffffff; /* Couleur de bordure au focus */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8); /* Effet lumineux */
}

option {
    font-size: 16px;
    padding: 10px;
    background-color: #ffffff;  /* Fond blanc pour les options */
    color: #333; /* Couleur du texte */
}

/* Style pour le contenu texte */
.text-content {
    border: solid var(--orange-fonce) 3px;
    width: 33%;
    margin: 150px auto 100px auto;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
    padding: 10px;
}