@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

/* Style pour la fenêtre modale */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /*background-color: rgb(0,0,0);*/
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #d49494;/*#d07474*/
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    opacity: 1;
}

.close {
    color: #ff0000;  /* Changer la couleur en rouge pour une meilleure visibilité */
    float: right;
    font-size: 32px;  /* Augmenter la taille de la croix */
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #000000;  /* Au survol, la couleur devient noire pour un contraste fort */
    text-decoration: none;
    transform: scale(1.2);  /* Ajouter un effet de zoom au survol */
}

/* Bandeau latéral */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #333;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    z-index: 1000;
}
.sidebar a {
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: horizontal-tb;
    transform: none;
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    padding: 15px 90px;
    border-radius: 5px;
    background-color: #444;
    transition: background-color 0.3s;
    margin: 5px 0;
}
/*VALEUR ORIGINALE
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sidebar a {
    display: flex;
    align-items: center; 
    justify-content: center;
    writing-mode: vertical-rl; 
    transform: rotate(180deg); 
    text-align: center;
    text-decoration: none;
    color: white;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 5px 0;
    height: 22vh;
    padding: 25px 10px;
    border-radius: 5px;
    background-color: #444;
    transition: background-color 0.3s;
}
*/


/*.sidebar .qbar {
    margin-bottom: 20px;
}*/

.sidebar .rbar:hover {
    background-color: #8fd2f1;
}
.sidebar .dbar:hover {
    background-color: #f69fda;
}
.sidebar .abar:hover {
    background-color: #ac96fb;
}
.sidebar .qbar:hover {
    background-color: #4caf50;
}

.sidebar .bbar:hover {
    background-color: #f2f476;
}

/* Bouton "Simuler" */
/*.sidebar .simulate-button {
    display: flex; 
    align-items: center; 
    justify-content: center;
    writing-mode: vertical-rl; 
    text-align: center;
    text-decoration: none;
    color: white;
    font-size: 20px; 
    margin: 5px 0;
    padding: 40px 10px;
    border-radius: 5px;
    background-color: #444;
    transition: background-color 0.3s;
    box-sizing: border-box;
}

.sidebar .simulate-button:hover {
    background-color: #4caf50;
}*/

/* Contenu principal */
.main-content {
    /*margin-left: 100px;*/ 
    padding: 20px;
    margin-top: 15px; 
}

/* Arrière-plan par défaut (si aucune classe n’est définie) */
body {
    background-color: #f5f5f5; /* Exemple : gris clair */
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

/* Arrière-plan pour la page recettes */
body.index {
    background-color: #c1e2f3; /* #8fd2f1 */
}

/* Arrière-plan pour la page dépenses */
body.depenses {
    background-color: #f5c4e5; /* #f69fda */
}

/* Arrière-plan pour la page analyse */
body.analyse {
    background-color: #c8bafa; /* #ac96fb */
}
body.questionnaire {
    background-color: #4caf50; /* Exemple : rose clair */
}

body.budgets {
    background-color: #f2f476;
}

#recettesAPUChart {
    max-width: 400px;
    max-height: 400px;
}
#depensesAPUChart {
    max-width: 400px;
    max-height: 400px;
}

/*boutons*/
#changerTVA, #validerTVA, #changerCS, #changerIR, #validerCS, #validerIR,#addTranche,#removeTranche,#changerCP, #validerCP,#closeModalButton, #changerIP, #validerIP, #changerDIE, #validerDIE,#changerSante,#validerSante,#changerPS,#validerPS,#changerAU,#changerAE,#validerAE,#validerAU {
    font-family: 'Poppins', sans-serif; /* Correspond à la police globale */
    font-weight: 600;
    font-size: 16px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px; /* Coins arrondis pour un look moderne */
    background-color: #007BFF; /* Bleu moderne */
    color: #ffffff; /* Texte blanc */
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre subtile */
    transition: all 0.3s ease; /* Transition douce */
}

/* Effet au survol */
#changerTVA:hover, #validerTVA:hover, #changerCS:hover, #changerIR:hover, #validerCS:hover, #validerIR:hover,#addTranche:hover,#removeTranche:hover,#changerCP:hover, #validerCP:hover,#closeModalButton:hover, #changerIP:hover, #validerIP:hover, #changerDIE:hover, #validerDIE:hover,#changerSante:hover,#validerSante:hover,#changerPS:hover,#validerPS:hover,#changerAU:hover,#changerAE:hover,#validerAE:hover,#validerAU:hover {
    background-color: #0056b3; /* Bleu plus foncé au survol */
    transform: translateY(-2px); /* Légère élévation */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Accentuation de l'ombre */
}

/* Effet lorsqu'un bouton est actif (cliqué) */
#changerTVA:active, #validerTVA:active, #changerCS:active, #changerIR:active, #validerCS:active, #validerIR:active,#addTranche:active,#removeTranche:active,#changerCP:active,#validerCP:active,#closeModalButton:active, #changerIP:active, #validerIP:active, #changerDIE:active, #validerDIE:active,#changerSante:active,#validerSante:active,#changerPS:active,#validerPS:active,#changerAU:active,#changerAE:active,#validerAE:active,#validerAU:active {
    transform: translateY(0); /* Retour à sa place initiale */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* Réduction de l'ombre */
}

/* Style désactivé */
#changerTVA:disabled, #validerTVA:disabled, #changerCS:disabled, #changerIR:disabled, #validerCS:disabled, #validerIR:disabled,#addTranche:disabled,#removeTranche:disabled,#closeModalButton:disabled,#changerPS:disabled,#validerPS:disabled {
    background-color: #cccccc; 
    color: #666666;
    cursor: not-allowed;
    box-shadow: none; 
}
#simuler, #refus, #simuler_depenses {
    font-family: 'Poppins', sans-serif; /* Correspond à la police globale */
    font-weight: 600;
    font-size: 16px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px; /* Coins arrondis pour un look moderne */
    
    background-color: #ff0000; /* Bleu moderne */
    color: #ffffff; /* Texte blanc */
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre subtile */
    transition: all 0.3s ease; /* Transition douce */
}
/* Effet au survol */
#simuler:hover, #refus:hover, #simuler_depenses:hover {
    background-color: #d50000; /* Bleu plus foncé au survol */
    transform: translateY(-2px); /* Légère élévation */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Accentuation de l'ombre */
}

/* Effet lorsqu'un bouton est actif (cliqué) */
#simuler:active, #refus:active, #simuler_depenses:active {
    transform: translateY(0); /* Retour à sa place initiale */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* Réduction de l'ombre */
}

/* Style désactivé */
#simuler:disabled {
    background-color: #cccccc; 
    color: #666666;
    cursor: not-allowed;
    box-shadow: none; 
}

#reset {
    font-family: 'Poppins', sans-serif; /* Correspond à la police globale */
    font-weight: 600;
    font-size: 16px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px; /* Coins arrondis pour un look moderne */
    
    background-color: #1eb018; /* Bleu moderne */
    color: #ffffff; /* Texte blanc */
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre subtile */
    transition: all 0.3s ease; /* Transition douce */
}
/* Effet au survol */
#reset:hover {
    background-color: #168d12; /* Bleu plus foncé au survol */
    transform: translateY(-2px); /* Légère élévation */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Accentuation de l'ombre */
}

/* Effet lorsqu'un bouton est actif (cliqué) */
#reset:active {
    transform: translateY(0); /* Retour à sa place initiale */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* Réduction de l'ombre */
}







/*pour les bulles d'informations*/
/*h2 {
    display: inline-flex;
    align-items: center; 
}*/

/* Conteneur pour le bouton d'information */
.info-container {
    display: inline-block;
    vertical-align: middle; /* Aligne le bouton avec le texte */
    margin-left: 5px; /* Réduit l'espace à 5px entre le texte et le bouton */
}

.help-icon {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    /*margin-left: 10px;*/
    border: 1px solid #cc0000; /* Rouge plus foncé pour la bordure */
    border-radius: 50%;
    background-color: #ff4d4d; /* Rouge vif pour le fond */
    color: #fff; /* Texte blanc */
    text-align: center;
    line-height: 32px;
    font-size: 21px;
    font-weight: bold;
    cursor: pointer;
}

.help-icon:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.tooltip {
    visibility: hidden;
    opacity: 0;
    width: 400px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 8px;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    transition: opacity 0.3s;
    font-size: 12px;
    line-height: 1.4;
}

.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* WOUHOU LES EVOLUTIONS */
.green {
    color: rgb(0, 107, 0);
}
.red {
    color: rgb(221, 0, 0);
}
.white {
    color: white;
}

.encadre-explication {
    background-color: #ffe0b3; /* Orange clair */
    border: 1px solid #ffc107; /* Bordure orange */
    padding: 10px;
    margin-bottom: 20px;
}

.nouveautes {
    background-color: #8fff87; /* Orange clair */
    border: 1px solid #48e215; /* Bordure orange */
    padding: 10px;
    margin-bottom: 20px;
}

.budget-card {
    border: 2px solid #ccc;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    background: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.budget-card h2 {
    margin-top: 0;
    color: #333;
}
.controls {
    background: #eee;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 8px;
}
.controls form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.controls select, .controls button {
    padding: 5px 10px;
}

.budget-content {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: stretch;
}

.budget-section {
    flex: 0 0 calc(33.33% - 10px);
}

.separator {
    flex: 0 0 2px; 
    width: 2px;
    background: #ccc;
    margin: 0 10px;
}


.interaction-row {
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
}

.comments-box {
    background: #f0f0f0;
    padding: 10px;
    margin-top: 0; /* collé au rectangle principal */
    border-radius: 0 0 10px 10px;
}

.comment {
    padding: 5px 0;
}

/* Modale pour commenter */
/*.modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 400px;
}*/

.close {
    float: right;
    cursor: pointer;
    font-size: 20px;
}

.like-btn.active, .dislike-btn.active {
    background-color: #4CAF50; /* vert par exemple */
    color: white;
}

.admin-comment-box {
    background-color: #fce4e4; /* Rouge très clair */
    border: 1px solid #ffcc00; /* Jaune */
    padding: 10px;
    border-radius: 8px;
    margin-top: 15px;
    width: 100%;
    box-sizing: border-box;
}

.budget-section {
    flex: 1;
    min-width: 0;           /* indispensable pour forcer le retour à la ligne */
    box-sizing: border-box;
    overflow-wrap: break-word; /* casse les mots trop longs */
    word-break: break-word;    /* force un retour si nécessaire */
}

/* Empêche tout dépassement dû aux chaînes longues */
.admin-comment-box,
.admin-comment-box p,
.admin-comment-box * {
    white-space: normal;
    overflow-wrap: anywhere;  /* casse même les mots très longs/URLs */
    word-break: break-word;
    hyphens: auto;            /* jolis césures (lang="fr" déjà présent) */
    max-width: 100%;
    /*max-width: 100px;*/
    box-sizing: border-box;
}

/* (optionnel) mêmes règles pour les autres zones de texte si besoin */
.comments-box,
.comments-box * {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}



/* Style général pour les petits écrans */
@media only screen and (max-width: 768px) {
    /* Bandeau latéral */

    h2 {
        font-size: 1em;
    }

    h3 {
        font-size: 0.8em;
    }

    p {
        font-size: 0.7em;
    }
    .sidebar {
        flex-direction: column;
        width: 30px;
        height: 100%;
        padding: 10px;
        top: 0;
        left: 0;
    }

    .sidebar a {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font-size: 16px;
        padding: 25px 10px;
        height: 22vh;
        margin: 5px 0;
    }
    /*
    .sidebar {
        width: 50px; 
        padding: 10px;
    }

    .sidebar a {
        font-size: 16px;
        padding: 30px 10px; 
    }*/

    .sidebar .bbar {
        margin-bottom: 20px;
    }

    .sidebar .simulate-button {
        font-size: 16px; /* Réduire la taille de police */
        padding: 30px 10px;
    }

    /* Contenu principal */
    .main-content {
        margin-left: 60px; /* Laisser un peu plus de place pour le bandeau */
        padding: 15px;
    }

    /* Fenêtre modale */
    .modal-content {
        margin-left: 60px;
        width: 70%; /* Réduire la taille de la fenêtre modale */
        padding: 10px;
    }

    /* Boutons */
    #changerTVA, #validerTVA, #changerCS, #changerIR, #validerCS, #validerIR,
    #addTranche, #removeTranche, #changerCP, #validerCP, #closeModalButton,
    #simuler, #reset, #changerIP, #validerIP,#validerIP, #changerDIE, #validerDIE,#changerSante,#validerSante,#changerPS,#validerPS,#simuler_depenses,#changerAD,#changerAE,#validerAE,#validerAD {
        font-size: 14px; /* Réduire la taille du texte pour les petits écrans */
        padding: 10px 15px; /* Ajuster la taille des boutons */
    }

    /* Boutons au survol */
    #changerTVA:hover, #validerTVA:hover, #changerCS:hover, #changerIR:hover,
    #validerCS:hover, #validerIR:hover, #addTranche:hover, #removeTranche:hover,
    #changerCP:hover, #validerCP:hover, #closeModalButton:hover, #simuler:hover, #reset:hover, #changerIP:hover, #validerIP:hover {
        transform: translateY(0); /* Retirer l'effet de translation sur les petits écrans */
    }

    /* Arrière-plan pour les pages */
    body.index {
        background-color: #8fd2f1; /* Bleu clair */
    }
    body.depenses {
        background-color: #f69fda; /* Jaune clair */
    }
    body.analyse {
        background-color: #ac96fb; /* Rose clair */
    }
    body.questionnaire {
        background-color: #ac96fb; /* Rose clair */
    }


    /* Ajustements pour les bulles d'informations */
    .info-container {
        margin-left: 0; /* Retirer l'espace supplémentaire */
    }

    .help-icon {
        width: 25px; /* Réduire la taille des icônes d'aide */
        height: 25px;
        font-size: 18px; /* Réduire la taille de la police */
    }

    /* Ajuster la taille de la tooltip */
    .tooltip {
        width: 300px; /* Réduire la largeur de l'infobulle */
        font-size: 10px; /* Réduire la taille de police de l'infobulle */
    }
    .budget-content {
        flex-direction: column;
    }

    .budget-section {
        flex: none;
        width: 100%;
    }

    .separator {
        width: 100%;
        height: 2px;
        margin: 10px 0;
    }

}

/* Pour les très petits écrans (smartphones en portrait) */
@media only screen and (max-width: 480px) {
    /* Réduire la taille de la police et les marges pour les petites résolutions */
    .sidebar a, .sidebar .simulate-button {
        font-size: 14px; /* Réduire la taille du texte */
        height: 22vh;
        padding: 25px 8px; /* Ajuster l'espace autour du texte */
    }

    /* Réduire la largeur des boutons */
    #changerTVA, #validerTVA, #changerCS, #changerIR, #validerCS, #validerIR,
    #addTranche, #removeTranche, #changerCP, #validerCP, #closeModalButton,
    #simuler, #reset, #changerIP, #validerIP,#validerIP, #changerDIE, #validerDIE,#changerSante,#validerSante,#changerPS,#validerPS,#simuler_depenses,#changerAU,#changerAE,#validerAE,#validerAU,#refus {
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Contenu principal */
    .main-content {
        padding: 10px; /* Ajouter un peu de padding */
        margin-left: 60px;
    }

    /* Fenêtre modale */
    .modal-content {
        width: 65%; /* Prendre presque toute la largeur */
        padding: 15px;
        margin-left: 60px;
    }

    /* Ajuster la taille des graphiques */
    #recettesAPUChart, #depensesAPUChart {
        max-width: 100%; /* Permettre aux graphiques de s'adapter à la largeur de l'écran */
        max-height: 300px;
    }

    /* Enlever les bordures des bulles d'aide pour gagner de l'espace */
    .help-icon {
        width: 20px;
        height: 20px;
        font-size: 16px;
    }

    /* Ajuster les tooltips pour les petites tailles */
    .tooltip {
        width: 250px;
        font-size: 9px;
    }
    h2 {
        font-size: 1em;
    }

    h3 {
        font-size: 0.8em;
    }

    p {
        font-size: 0.7em;
    }

    li {
        font-size: 0.7em;
    }

    input[type=number] {
        width: 20%;
    }
    #TVA_normal {
        width: 20%;
    }


    .help-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px; /* Ajuste selon le design */
        width: 20px; /* Ajuste la largeur */
        height: 20px; /* Ajuste la hauteur */
        border-radius: 50%;
        background-color: #ddd; /* Optionnel, pour un effet visuel */
        text-align: center;
        position: relative;
        cursor: pointer;
    }

    .tooltip {
        display: none;
        position: absolute;
        bottom: 120%; /* Ajuste la position du tooltip */
        left: 50%;
        transform: translateX(-50%);
        width: 220px; /* Ajuste la largeur */
        background-color: #333;
        color: #fff;
        text-align: left;
        padding: 10px;
        border-radius: 5px;
        font-size: 14px;
    }

    .help-icon:hover .tooltip {
        display: block;
    }

    .admin-comment-box {
        max-width: 100%;
    }

}