/* CSS personnalisé pour intégration parfaite ATAA */

/* Correction des boutons Adhérer/Connexion */
.siteNav-secondary__link--subscribe {
    background: #eb3b24 !important;
    color: white !important;
    padding: 10px 18px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 4px rgba(235, 59, 36, 0.2) !important;
}

.siteNav-secondary__link--subscribe:hover {
    background: #c50007 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(235, 59, 36, 0.3) !important;
}

.siteNav-secondary__link--login {
    color: #eb3b24 !important;
    border: 1px solid #eb3b24 !important;
    background: transparent !important;
    padding: 10px 18px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.siteNav-secondary__link--login:hover {
    background: #eb3b24 !important;
    color: white !important;
    transform: translateY(-1px) !important;
}

/* Correction des icônes de navigation */
.siteNav-primary__icon {
    width: 16px !important;
    height: 16px !important;
    opacity: 0.7 !important;
    transition: all 0.2s ease !important;
}

.siteNav-primary__link:hover .siteNav-primary__icon {
    opacity: 1 !important;
    transform: scale(1.05) !important;
}

/* Correction du calculateur pour s'intégrer parfaitement */
.calculator {
    background: white !important;
    margin: 20px auto !important;
    max-width: 1000px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
    position: relative !important;
}

.calculator::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #eb3b24, #c50007, #eb3b24) !important;
}

/* Mode selector */
.mode-selector {
    display: flex !important;
    background: #f9f6f5 !important;
    border-bottom: 1px solid #ddd0d0 !important;
}

.mode-btn {
    flex: 1 !important;
    padding: 16px 20px !important;
    border: none !important;
    background: transparent !important;
    color: #7f848a !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-bottom: 3px solid transparent !important;
    position: relative !important;
}

.mode-btn:hover {
    background: #f8f9fa !important;
    color: #eb3b24 !important;
}

.mode-btn.active {
    background: white !important;
    color: #eb3b24 !important;
    border-bottom-color: #eb3b24 !important;
    font-weight: 600 !important;
}

/* Contenu des modes */
.mode-content {
    display: none !important;
    padding: 40px !important;
    background: white !important;
}

.mode-content.active {
    display: block !important;
}

.mode-content h2 {
    color: #eb3b24 !important;
    font-size: 1.5rem !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #fecaca !important;
    padding-bottom: 12px !important;
}

.mode-description {
    color: #7f848a !important;
    margin-bottom: 30px !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    background: #fef2f2 !important;
    padding: 16px 20px !important;
    border-radius: 6px !important;
    border-left: 4px solid #eb3b24 !important;
}

/* Grille pour organiser les inputs */
.inputs-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    margin-bottom: 30px !important;
}

.inputs-grid .input-group {
    margin-bottom: 0 !important;
}

.inputs-grid .input-group.full-width {
    grid-column: 1 / -1 !important;
}

/* Groupes d'inputs */
.input-group {
    margin-bottom: 24px !important;
    display: flex !important;
    flex-direction: column !important;
}

.input-group label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: #eb3b24 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.input-group input,
.input-group select {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 6px !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
    background: white !important;
    color: #0b1116 !important;
}

.input-group input:focus,
.input-group select:focus {
    outline: none !important;
    border-color: #eb3b24 !important;
    box-shadow: 0 0 0 3px rgba(235, 59, 36, 0.1) !important;
    transform: translateY(-1px) !important;
}

.input-group input:hover,
.input-group select:hover {
    border-color: #9ca3af !important;
}

.input-group input:valid,
.input-group select:valid {
    border-color: #eb3b24 !important;
}

.input-group.optional {
    background: #fef2f2 !important;
    padding: 20px !important;
    border-radius: 8px !important;
    border-left: 4px solid #eb3b24 !important;
    border: 1px solid #fecaca !important;
}

.input-group.optional small {
    display: block !important;
    margin-top: 8px !important;
    color: #7f848a !important;
    font-size: 0.85rem !important;
    font-style: italic !important;
}

/* Résultats */
.result {
    background: linear-gradient(135deg, #eb3b24, #c50007) !important;
    color: white !important;
    padding: 30px !important;
    border-radius: 8px !important;
    text-align: center !important;
    margin-top: 30px !important;
    box-shadow: 0 4px 20px rgba(235, 59, 36, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.result h3 {
    font-size: 1.1rem !important;
    margin-bottom: 15px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    opacity: 0.9 !important;
}

.result-value {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Mode comparaison */
.comparison-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    margin-bottom: 30px !important;
}

.scenario {
    background: #f9f6f5 !important;
    padding: 24px !important;
    border-radius: 8px !important;
    border: 1px solid #ddd0d0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

.scenario h3 {
    color: #eb3b24 !important;
    margin-bottom: 20px !important;
    font-size: 1.2rem !important;
    text-align: center !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #fecaca !important;
    padding-bottom: 12px !important;
}

.result-mini {
    background: white !important;
    padding: 20px !important;
    border-radius: 6px !important;
    text-align: center !important;
    margin-top: 20px !important;
    border: 2px solid #d1d5db !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

.comparison-result {
    background: linear-gradient(135deg, #eb3b24, #c50007) !important;
    color: white !important;
    padding: 30px !important;
    border-radius: 8px !important;
    text-align: center !important;
    box-shadow: 0 4px 20px rgba(235, 59, 36, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.comparison-result h3 {
    font-size: 1.2rem !important;
    margin-bottom: 25px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.comparison-details {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
}

.difference,
.percentage {
    background: rgba(255, 255, 255, 0.15) !important;
    padding: 20px !important;
    border-radius: 6px !important;
    text-align: center !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.difference .label,
.percentage .label {
    display: block !important;
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
    opacity: 0.9 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.difference .value,
.percentage .value {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

.interpretation {
    background: rgba(255, 255, 255, 0.15) !important;
    padding: 20px !important;
    border-radius: 6px !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    grid-column: 1 / -1 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    line-height: 1.5 !important;
}

/* Disclaimer */
.disclaimer {
    background: #fff8e1 !important;
    border: 2px solid #ffc107 !important;
    border-radius: 6px !important;
    padding: 20px !important;
    margin-top: 30px !important;
    text-align: center !important;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.1) !important;
}

.disclaimer p {
    color: #8a6d3b !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

/* Ajustement du header pour être plus compact - remonter le contenu */
.homeHeader {
    padding: 30px 0 20px !important;
    margin-top: 40px !important; /* Réduire l'espace depuis la navigation */
    position: relative !important;
    overflow: hidden !important; /* empêche l'image de dépasser */
}

.homeHeader-title__subtitle {
    margin-bottom: 8px !important;
}

.homeHeader-title__title {
    font-size: 2.2rem !important;
    margin-bottom: 12px !important;
}

.homeHeader-title__intro {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-top: 0 !important;
}

/* 1) Le conteneur doit être la "référence" */
.homeHeader-title {
    position: relative !important;
    overflow: hidden !important; /* évite que le motif dépasse */
}

/* 2) Le SVG devient un fond décoratif */
.homeHeader-title__bgHeader {
    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none !important;

    /* placement : plus haut + un peu à gauche */
    top: -8vh !important;      /* remonte selon la hauteur écran */
    left: -12vw !important;     /* décale selon la largeur écran */

    /* taille : plus grand sans étirer */
    width: 140vw !important;    /* grand, proportionnel à l'écran */
    height: auto !important;    /* IMPORTANT : pas d'étirement */
    object-fit: contain !important; /* pas de déformation */

    opacity: 0.18 !important;  /* discret */
}

/* 3) Tout le contenu doit passer devant */
.homeHeader-title > *:not(.homeHeader-title__bgHeader) {
    position: relative !important;
    z-index: 2 !important;
}

/* Le contenu doit passer devant */
.homeHeader__content {
    position: relative !important;
    z-index: 2 !important;
}

/* Section partenaires */
.partners {
    background: #f9f6f5 !important;
    padding: 30px 0 !important;
    text-align: center !important;
    margin-bottom: 0 !important;
    padding-bottom: 30px !important;
}

.partners__content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
}

.partners__title {
    font-size: 1.2rem !important;
    color: #7f848a !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

.partners__logos {
    display: flex !important;
    flex-direction: row !important;
    gap: 30px !important;
    align-items: center !important;
    justify-content: center !important;
}

.partners__logo {
    display: flex !important;
    align-items: center !important;
}

.partners__sacem,
.partners__scam {
    height: 40px !important;
    width: auto !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
}

.partners__sacem:hover,
.partners__scam:hover {
    opacity: 1 !important;
}

/* Ajustement du footer - forcer le fond rouge et supprimer la bande bleue */
.siteFooter {
    background: #dc2626 !important;
    background: linear-gradient(150deg, #c50007, #eb3b24) !important;
    background-color: #dc2626 !important;
    margin-top: 0 !important;
    padding: 30px 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Supprimer tout pseudo-élément qui pourrait créer une bande bleue */
.siteFooter::before,
.siteFooter::after {
    display: none !important;
    background: none !important;
}

/* S'assurer que la section calculator se connecte au footer */
.calculator-section {
    background: #dc2626 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .homeHeader {
        padding: 50px 0 30px !important;
    }
    
    .homeHeader-title__title {
        font-size: 1.8rem !important;
    }
    
    .calculator {
        margin: 15px auto !important;
    }
    
    .inputs-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .comparison-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .comparison-details {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .partners__logo {
        flex-direction: column !important;
        gap: 15px !important;
    }
}

@media (max-width: 480px) {
    .mode-content {
        padding: 20px 15px !important;
    }
    
    .result-value {
        font-size: 2rem !important;
    }
}

/* Animations */
.mode-content {
    animation: fadeIn 0.3s ease-in-out !important;
}

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

/* Focus visible pour l'accessibilité */
.mode-btn:focus,
.input-group input:focus,
.input-group select:focus {
    outline: 2px solid #eb3b24 !important;
    outline-offset: 2px !important;
}

/* Section contenu avec fond rouge et chevauchement */
.calculator-section {
    background: #dc2626 !important;
    padding-bottom: 60px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Wrapper pour faire remonter la calculatrice sur le hero */
.calculator-wrapper {
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    margin-top: -64px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Wrapper avec background SVG derrière la card */
.calculator-wrapper--with-bg {
    background-color: #dc2626 !important;
    overflow: hidden !important;
}

/* SVG en arrière-plan derrière la card (méthode background-image pour éviter l'étirement) */
.calculator-wrapper--with-bg::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: url('assets/svg/bannerHome.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center 65% !important; /* positionne plus bas derrière la card */
    background-size: 170% !important; /* agrandit sans étirement (pas de height forcée) */
    opacity: 0.15 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Responsive pour le chevauchement */
@media (max-width: 768px) {
    .calculator-wrapper {
        margin-top: -40px !important;
        padding: 0 15px !important;
    }
    
    .calculator-section {
        padding-bottom: 40px !important;
    }
}

/* Intégration de la calculatrice React avec le thème ATAA */
.calculator.react-app {
    background: white !important;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important; /* au-dessus du background SVG */
}

.calculator.react-app::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #eb3b24, #c50007, #eb3b24) !important;
    z-index: 10 !important;
}

/* Forcer le fond blanc pour l'application React */
.calculator.react-app #root,
.calculator.react-app #root > div {
    background: white !important;
    min-height: auto !important;
}

/* Surcharger le fond bleu foncé de Tailwind */
.calculator.react-app #root > div > div:first-child {
    background: white !important;
    background-image: none !important;
    color: #1e293b !important;
}

/* Ajuster les couleurs des cartes pour qu'elles soient claires */
.calculator.react-app [class*="bg-slate-950"],
.calculator.react-app [class*="bg-slate-900"],
.calculator.react-app [class*="from-slate-950"],
.calculator.react-app [class*="via-slate-900"],
.calculator.react-app [class*="to-slate-950"] {
    background: white !important;
    background-image: none !important;
}

.calculator.react-app [class*="bg-white/5"],
.calculator.react-app [class*="bg-slate-900/70"],
.calculator.react-app [class*="bg-slate-900/40"] {
    background: white !important;
    border: 1px solid #e5e7eb !important;
}

/* Conteneurs de scénarios dans la comparaison - fond clair */
.calculator.react-app [class*="rounded-lg"][class*="border"][class*="bg-slate-900/40"],
.calculator.react-app [class*="space-y-3"][class*="rounded-lg"][class*="border"] {
    background: white !important;
    border-color: #e5e7eb !important;
}

/* Ajuster les couleurs de texte */
.calculator.react-app [class*="text-slate-50"],
.calculator.react-app [class*="text-slate-100"],
.calculator.react-app [class*="text-slate-200"],
.calculator.react-app [class*="text-slate-300"] {
    color: #1e293b !important;
}

.calculator.react-app [class*="text-slate-400"] {
    color: #64748b !important;
}

/* Ajuster les bordures */
.calculator.react-app [class*="border-white/10"] {
    border-color: #e5e7eb !important;
}

/* Ajuster les badges */
.calculator.react-app [class*="bg-white/5"][class*="border-white/10"] {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #7f1d1d !important;
}

/* Ajuster les boutons pour utiliser la couleur ATAA */
.calculator.react-app [class*="bg-emerald-600"],
.calculator.react-app [class*="bg-emerald-500"] {
    background: #eb3b24 !important;
}

.calculator.react-app [class*="bg-emerald-600"]:hover,
.calculator.react-app [class*="bg-emerald-500"]:hover {
    background: #c50007 !important;
}

/* Ajuster les cartes de résultat avec fond vert émeraude */
.calculator.react-app [class*="bg-emerald-950/40"],
.calculator.react-app [class*="border-emerald-500/30"] {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}

.calculator.react-app [class*="text-emerald-200"],
.calculator.react-app [class*="text-emerald-100"] {
    color: #7f1d1d !important;
}

/* Masquer le header de la calculatrice React (déjà présent dans le hero) */
.calculator.react-app header {
    display: none !important;
}

/* =========================
   TABS - Fond rouge doux
   ========================= */

/* Container des tabs - fond rouge doux */
.calculator.react-app [role="tablist"],
.calculator.react-app [class*="TabsList"] {
    background: #fecaca !important;
    border-color: #fecaca !important;
}

/* Tous les onglets (inactifs par défaut) - fond rouge doux */
.calculator.react-app [role="tab"],
.calculator.react-app button[role="tab"] {
    background: #fecaca !important;
    color: #7f1d1d !important;
    border-color: #fecaca !important;
}

/* Onglet actif - fond blanc */
.calculator.react-app [role="tab"][data-state="active"],
.calculator.react-app button[role="tab"][data-state="active"] {
    background: white !important;
    color: #eb3b24 !important;
    border-color: white !important;
}

/* Ligne de soulignement de l'onglet actif */
.calculator.react-app [role="tab"][data-state="active"]::after,
.calculator.react-app button[role="tab"][data-state="active"]::after {
    background: #eb3b24 !important;
}

/* Cibler aussi via les classes Tailwind générées */
.calculator.react-app button[class*="px-4"][class*="py-3"][class*="text-base"]:not([data-state="active"]) {
    background: #fecaca !important;
    color: #7f1d1d !important;
}

.calculator.react-app button[class*="px-4"][class*="py-3"][class*="text-base"][data-state="active"] {
    background: white !important;
    color: #eb3b24 !important;
}

/* Cibler le conteneur parent des tabs */
.calculator.react-app [class*="flex"][class*="justify-center"] > div > div {
    background: #fecaca !important;
}

/* Ajuster les badges A et B - même couleur que les onglets (rouge doux) */
.calculator.react-app [class*="inline-flex"][class*="items-center"][class*="rounded-full"][class*="border"],
.calculator.react-app [class*="border-red-200"][class*="bg-red-50"],
.calculator.react-app [class*="text-red-800"] {
    background: #fecaca !important;
    border-color: #fecaca !important;
    color: #7f1d1d !important;
}

/* Cibler spécifiquement les badges avec bg-red-50 */
.calculator.react-app div[class*="bg-red-50"] {
    background: #fecaca !important;
    border-color: #fecaca !important;
    color: #7f1d1d !important;
}

/* Ajuster les inputs */
.calculator.react-app input,
.calculator.react-app select {
    background: white !important;
    color: #1e293b !important;
    border-color: #d1d5db !important;
}

.calculator.react-app input:focus,
.calculator.react-app select:focus {
    border-color: #eb3b24 !important;
    box-shadow: 0 0 0 3px rgba(235, 59, 36, 0.1) !important;
}

/* Ajuster les selects shadcn/ui (SelectTrigger) - fond clair */
.calculator.react-app [class*="SelectTrigger"],
.calculator.react-app button[class*="SelectTrigger"],
.calculator.react-app [role="combobox"] {
    background: white !important;
    color: #1e293b !important;
    border-color: #d1d5db !important;
}

.calculator.react-app [class*="SelectTrigger"]:hover,
.calculator.react-app button[class*="SelectTrigger"]:hover {
    background: white !important;
    border-color: #9ca3af !important;
}

.calculator.react-app [class*="SelectTrigger"]:focus,
.calculator.react-app button[class*="SelectTrigger"]:focus {
    background: white !important;
    border-color: #eb3b24 !important;
    box-shadow: 0 0 0 3px rgba(235, 59, 36, 0.1) !important;
}

/* SelectContent (dropdown) - fond clair */
.calculator.react-app [class*="SelectContent"],
.calculator.react-app [class*="PopoverContent"] {
    background: white !important;
    border-color: #d1d5db !important;
}

/* SelectItem - fond clair */
.calculator.react-app [class*="SelectItem"] {
    background: white !important;
    color: #1e293b !important;
}

.calculator.react-app [class*="SelectItem"]:hover {
    background: #f8f9fa !important;
    color: #1e293b !important;
}

/* Ajuster les labels */
.calculator.react-app label {
    color: #1e293b !important;
}

/* Ajuster les tableaux */
.calculator.react-app table {
    background: white !important;
}

.calculator.react-app th,
.calculator.react-app td {
    color: #1e293b !important;
    border-color: #e5e7eb !important;
}

/* Améliorer la visibilité des chiffres et valeurs monétaires - gris doux */
.calculator.react-app [class*="text-4xl"],
.calculator.react-app [class*="text-5xl"],
.calculator.react-app [class*="text-3xl"],
.calculator.react-app [class*="text-2xl"] {
    color: #475569 !important; /* Gris doux et visible */
    font-weight: 600 !important;
}

/* Cibler spécifiquement les valeurs monétaires (AnimatedNumberRandom) */
.calculator.react-app span[class*="flex"][class*="items-center"] > span,
.calculator.react-app [class*="font-semibold"]:not([class*="bg-emerald"]):not([class*="bg-red"]):not([class*="inline-flex"]) {
    color: #475569 !important; /* Gris doux */
}

/* Valeurs dans les cartes de résultat */
.calculator.react-app [class*="Card"] span:not([class*="bg-emerald"]):not([class*="bg-red"]):not([class*="inline-flex"]):not([class*="text-xs"]):not([class*="text-sm"]),
.calculator.react-app [class*="Card"] [class*="font-semibold"]:not([class*="text-slate-400"]):not([class*="text-xs"]):not([class*="text-sm"]) {
    color: #475569 !important; /* Gris doux pour les chiffres */
}

/* Textes secondaires (labels) - garder un gris plus clair */
.calculator.react-app [class*="text-slate-400"],
.calculator.react-app [class*="text-xs"] {
    color: #64748b !important; /* Gris moyen pour les labels */
}

/* Exception pour les badges de pourcentage (garder leur couleur blanche) */
.calculator.react-app [class*="bg-emerald-500"],
.calculator.react-app [class*="bg-emerald-600"],
.calculator.react-app [class*="bg-red-500"],
.calculator.react-app [class*="inline-flex"][class*="items-center"][class*="px-"] {
    color: white !important;
}

/* Cibler spécifiquement toutes les valeurs monétaires et chiffres */
.calculator.react-app * {
    color: inherit;
}

/* Forcer la couleur gris doux sur tous les chiffres et montants */
.calculator.react-app span:not([class*="bg-emerald"]):not([class*="bg-red"]):not([class*="inline-flex"]):not([class*="text-xs"]):not([class*="text-slate-400"]) {
    color: #475569 !important; /* Gris doux pour tous les chiffres */
}

/* Valeurs dans les sections de résultat */
.calculator.react-app [class*="CardContent"] span:not([class*="text-xs"]):not([class*="text-slate-400"]),
.calculator.react-app [class*="CardContent"] div:not([class*="bg-emerald"]):not([class*="bg-red"]):not([class*="text-xs"]):not([class*="text-slate-400"]) {
    color: #475569 !important;
}

/* Règle générale pour tous les textes de chiffres */
.calculator.react-app div:not([class*="bg-emerald"]):not([class*="bg-red"]):not([class*="text-xs"]):not([class*="text-slate-400"]) > span:not([class*="text-xs"]):not([class*="text-slate-400"]) {
    color: #475569 !important;
}

/* Règles supplémentaires pour forcer le thème clair */
.calculator.react-app .min-h-screen {
    min-height: auto !important;
    background: white !important;
    background-image: none !important;
}

.calculator.react-app .bg-gradient-to-b {
    background: white !important;
    background-image: none !important;
}

/* Cibler spécifiquement les divs avec les classes Tailwind */
.calculator.react-app div[class*="min-h-screen"],
.calculator.react-app div[class*="bg-gradient"],
.calculator.react-app div[class*="from-slate"],
.calculator.react-app div[class*="via-slate"],
.calculator.react-app div[class*="to-slate"] {
    background: white !important;
    background-image: none !important;
    color: #1e293b !important;
}

/* Forcer les textes à être sombres */
.calculator.react-app div[class*="text-slate-50"],
.calculator.react-app div[class*="text-slate-100"],
.calculator.react-app div[class*="text-slate-200"],
.calculator.react-app div[class*="text-slate-300"],
.calculator.react-app p[class*="text-slate-50"],
.calculator.react-app p[class*="text-slate-100"],
.calculator.react-app p[class*="text-slate-200"],
.calculator.react-app p[class*="text-slate-300"],
.calculator.react-app h1[class*="text-slate-50"],
.calculator.react-app h1[class*="text-slate-100"],
.calculator.react-app h1[class*="text-slate-200"],
.calculator.react-app h1[class*="text-slate-300"] {
    color: #1e293b !important;
}

/* Ajuster les cartes avec fond sombre */
.calculator.react-app div[class*="bg-slate-900"],
.calculator.react-app div[class*="bg-slate-950"],
.calculator.react-app div[class*="bg-white/5"] {
    background: #f8f9fa !important;
    border-color: #e5e7eb !important;
}

/* Ajuster les bordures blanches semi-transparentes */
.calculator.react-app [class*="border-white/10"] {
    border-color: #e5e7eb !important;
}

/* Ajuster les badges et éléments avec fond semi-transparent */
.calculator.react-app [class*="bg-white/5"] {
    background: #fef2f2 !important;
}

/* Ajuster les textes dans les badges */
.calculator.react-app [class*="text-slate-100"][class*="bg-white/5"],
.calculator.react-app [class*="text-slate-200"][class*="bg-white/5"] {
    color: #7f1d1d !important;
}