/* On réinitialise les marges par défaut du navigateur pour être sûr de notre mise en page */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* On donne un fond gris clair à toute la page */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Les polices standards et propres du web */
    background-color: #f3f4f6; 
    color: #1f2937;
    padding: 40px 20px; /* Un peu d'espace en haut et sur les côtés */
}

/* On crée la boîte blanche au centre de l'écran */
.container {
    background-color: #ffffff;
    max-width: 500px; /* Le site ne sera pas géant sur écran d'ordinateur, c'est plus lisible */
    margin: 0 auto; /* Cette astuce magique centre la boîte parfaitement */
    padding: 30px;
    border-radius: 8px; /* Les coins arrondis */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); /* Une ombre très légère pour donner de la profondeur */
}

/* Les titres */
h1 {
    font-size: 22px;
    margin-bottom: 8px;
}

p {
    font-size: 14px;
    color: #6b7280; /* Gris clair pour le sous-titre */
    margin-bottom: 24px;
}

/* Les groupes de menu déroulant */
.groupe {
    margin-bottom: 20px;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
}

/* Le style des menus déroulants eux-mêmes */
select {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 15px;
    background-color: white;
    cursor: pointer;
}

/* Le bouton de calcul */
button {
    width: 100%;
    padding: 12px;
    background-color: #2563eb; /* Bleu professionnel */
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
}

button:hover {
    background-color: #1d4ed8; /* Le bouton devient un peu plus foncé quand on passe la souris dessus */
}

/* La zone de résultat */
#resultat {
    margin-top: 24px;
    padding: 20px;
    background-color: #ecfdf5; /* Fond vert très pâle */
    border: 1px solid #a7f3d0; /* Bordure verte */
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
}

#resultat strong {
    font-size: 24px;
    color: #065f46; /* Vert foncé pour le chiffre final */
}

/* LE TRUC LE PLUS IMPORTANT ICI : */
/* Cette ligne dit au navigateur : "Si un élément a la classe 'cache', NE L'AFFICHE PAS DU TOUT" */
.cache {
    display: none;
}/* Le conteneur du formulaire d'affiliation */
.conteneur-lead {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #e5e7eb; /* Bordure grise très discrète */
    border-radius: 6px;
    background-color: #f9fafb; /* Fond gris très très clair */
}

.conteneur-lead h2 {
    font-size: 16px;
    margin-bottom: 6px;
    color: #374151;
}

.conteneur-lead p {
    font-size: 13px;
    margin-bottom: 0;
}