/* style.css - Mise à jour pour ressembler au style de Shine.fr */

body {
    font-family: 'Marianne', sans-serif; /* Police de caractères principale, inspirée de Shine */
    background-color: #f9fbfc; /* Fond très clair, presque blanc cassé */
    color: #333; /* Couleur de texte principale, gris foncé */
    line-height: 1.6;
    margin: 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrer le contenu horizontalement */
}

h1 {
    font-size: 2.5em;
    color: #007bff; /* Bleu principal de Shine (à ajuster si nécessaire) */
    margin-bottom: 20px;
    text-align: center; /* Centrer le titre */
    font-weight: bold; /* Titres en gras */
}

h2 {
    font-size: 2em;
    color: #007bff;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: bold; /* Sous-titres en gras */
}

h3 {
    font-size: 1.5em;
    color: #555;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold; /* Titres de sections en gras */
}

p {
    margin-bottom: 15px;
}

.simulator-container {
    width: 90%; /* Ajuster la largeur du conteneur principal */
    max-width: 960px; /* Largeur maximale pour les grands écrans */
    padding: 30px;
    background-color: #fff; /* Fond blanc pour le conteneur */
    border-radius: 10px; /* Bords arrondis pour le conteneur */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Ombre légère */
    margin-bottom: 30px;
    border: 1px solid #eee; /* Bordure très légère */
}

.input-section, .result-section, .repartition-section, .auto-entrepreneur-section {
    margin-bottom: 25px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
    background-color: #fefefe; /* Fond légèrement grisé pour les sections */
}

.input-section h3, .result-section h3, .repartition-section h3, .auto-entrepreneur-section h3 {
    color: #007bff; /* Titres de sections en bleu */
    margin-top: 0;
    margin-bottom: 15px;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #555; /* Labels en gris moyen */
    font-weight: bold; /* Labels en gras */
}

.form-group input[type="number"],
.form-group input[type="checkbox"],
.form-group select {
    padding: 12px 15px;
    border: 1px solid #ccc; /* Bordure grise pour les inputs */
    border-radius: 6px;
    width: calc(100% - 32px); /* Ajuster la largeur pour tenir compte du padding et de la bordure */
    margin-bottom: 5px;
    font-size: 1em;
    color: #444;
    background-color: #fff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); /* Légère ombre interne */
}

.form-group input[type="checkbox"] {
    width: auto; /* Ajuster largeur pour checkbox */
    margin-right: 10px;
    vertical-align: middle;
}

.form-group input[type="number"]:focus,
.form-group select:focus {
    border-color: #007bff; /* Bordure bleue au focus */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.06); /* Ombre au focus */
    outline: none; /* Supprimer l'outline par défaut au focus */
}

button {
    padding: 12px 30px;
    font-size: 1.1em;
    color: white;
    background-color: #007bff; /* Bouton bleu principal */
    border: none;
    border-radius: 8px; /* Bords arrondis pour les boutons */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transition douce au survol */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Ombre légère pour les boutons */
}

button:hover {
    background-color: #0056b3; /* Bleu plus foncé au survol */
}

button:focus {
    outline: none; /* Supprimer l'outline au focus */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* Ombre plus marquée au focus */
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.results-table th, .results-table td {
    border: 1px solid #ddd; /* Bordure légère pour le tableau */
    padding: 10px;
    text-align: left;
}

.results-table th {
    background-color: #f0f0f0; /* En-tête du tableau légèrement grisé */
    font-weight: bold;
    color: #555;
}

.results-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Lignes paires du tableau légèrement grisées */
}

.result-value {
    font-weight: bold;
    color: #007bff; /* Valeurs importantes en bleu */
}

.important-result {
    font-size: 1.2em;
    color: #00aaff; /* Bleu plus vif pour les résultats clés */
    margin-top: 20px;
    font-weight: bold;
    text-align: center; /* Centrer les résultats importants */
}

.auto-entrepreneur-possible {
    color: #28a745; /* Vert pour statut auto-entrepreneur possible */
    font-weight: bold;
}

.auto-entrepreneur-impossible {
    color: #dc3545; /* Rouge pour statut auto-entrepreneur impossible */
    font-weight: bold;
}

.auto-entrepreneur-section {
    background-color: #f0f8ff; /* Fond bleu très clair pour la section auto-entrepreneur */
    border-color: #b0e0e6; /* Bordure bleu clair pour la section auto-entrepreneur */
}

.auto-entrepreneur-section h3 {
    color: #008b8b; /* Titre section auto-entrepreneur en bleu-vert */
}

/* Style pour la répartition mensuelle nette (graphique) - Si vous l'implémentez */
/* Vous pouvez ajouter des styles ici pour personnaliser l'apparence du graphique */

/* Ajout de la police Marianne (police utilisée par l'état et ressemblant à Shine) */
@font-face {
    font-family: 'Marianne';
    src: url('Marianne-Regular.woff2') format('woff2'),
         url('Marianne-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Marianne';
    src: url('Marianne-Bold.woff2') format('woff2'),
         url('Marianne-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}


/* Responsive design (pour les écrans plus petits) */
@media screen and (max-width: 768px) {
    body {
        margin: 10px; /* Marges réduites sur petits écrans */
    }
    .simulator-container {
        width: 100%; /* Conteneur prend toute la largeur sur petits écrans */
        padding: 20px;
        margin-bottom: 20px;
    }
    h1 {
        font-size: 2em; /* Titres plus petits sur petits écrans */
        margin-bottom: 15px;
    }
    h2 {
        font-size: 1.7em; /* Sous-titres plus petits */
        margin-top: 25px;
        margin-bottom: 10px;
    }
    .form-group label {
        margin-bottom: 5px; /* Espacement réduit pour les labels */
    }
    .form-group input[type="number"],
    .form-group input[type="checkbox"],
    .form-group select {
        padding: 10px 12px; /* Padding réduit pour les inputs */
        font-size: 0.95em; /* Taille de police réduite pour les inputs */
    }
    button {
        padding: 10px 25px; /* Padding réduit pour les boutons */
        font-size: 1em; /* Taille de police réduite pour les boutons */
    }
    .results-table th, .results-table td {
        padding: 8px; /* Padding réduit pour le tableau */
        font-size: 0.9em; /* Taille de police réduite pour le tableau */
    }
    .important-result {
        font-size: 1.1em; /* Résultats importants plus petits */
        margin-top: 15px;
    }
}