@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

       :root {

           --sage: #bcc7b2;
           --sage-dark: #56624f;
           --cream: #f3eee7;
           --white: #ffffff;
           --text: #3d3d3d;

           --radius: 20px;
           --shadow: 0 10px 30px rgba(0, 0, 0, .08);
       }

       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
           font-family: "Lato", sans-serif !important;
           font-weight: 400;
           font-style: normal;
           font-size: 12px;
       }

       body {
           background-color: #f0f2f5;
       }

       /* Barre de menu */
       .top-menu {
           background-color: #e8eef2;
           padding: 8px 0;
           border-bottom: 1px solid #ddd;
           display: flex;
           gap: 20px;
           overflow-x: auto;
       }

       .menu-section {
           display: flex;
           gap: 15px;
           padding: 0 15px;
       }

       .menu-item {
           display: flex;
           flex-direction: column;
           align-items: center;
           gap: 4px;
           padding: 5px 10px;
           color: #333;
           font-size: 12px;
           text-decoration: none;
           white-space: nowrap;
       }

       .menu-item:hover {
           background-color: #d4dfe8;
           border-radius: 4px;
       }

       .active-menu {
           background-color: #0078d7;
           color: white;
           border-radius: 4px;
       }

       /* En-tête */
       .header {
           background: linear-gradient(135deg, #1e88e5, #0d47a1);
           color: white;
           padding: 15px 20px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
       }

       .header h1 {
           font-size: 28px;
           font-weight: bold;
           text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
       }

       .header-date {
           font-size: 14px;
           opacity: 0.9;
       }

       /* Contenu principal */
       .main-content {
           display: grid;
           grid-template-columns: 16% 58% 25%;
           gap: 20px;
           padding: 20px;
           max-width: 1600px;
           margin: 0 auto;
       }

       /* Situation financière */
       .financial-status {
           background: white;
           border-radius: 8px;
           padding: 15px;
           box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       }

       .financial-status h2 {
           color: #0078d7;
           font-size: 16px;
           margin-bottom: 15px;
           padding-bottom: 10px;
           border-bottom: 1px solid #eee;
       }

       .status-item {
           display: flex;
           justify-content: space-between;
           padding: 8px 0;
           border-bottom: 1px solid #f5f5f5;
       }

       .status-item:last-child {
           border-bottom: none;
           font-weight: bold;
           color: #d32f2f;
       }

       .status-value.negative {
           color: #d32f2f;
       }

       /* Légende */
       .legend {
           margin-top: 20px;
           padding-top: 15px;
           border-top: 1px solid #eee;
       }

       .legend-item {
           display: flex;
           align-items: center;
           gap: 8px;
           margin-bottom: 8px;
       }

       .legend-color {
           width: 20px;
           height: 12px;
           border-radius: 2px;
       }

       .legend-color.liquidities {
           background-color: #ff9800;
       }

       .legend-color.securities {
           background-color: #f44336;
       }

       .legend-color.loans {
           background-color: #4caf50;
       }

       .legend-color.assets {
           background-color: #2196f3;
       }

       /* Graphique */
       .chart-section {
           background: white;
           border-radius: 8px;
           padding: 15px;
           box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       }

       .chart-section h2 {
           color: #0078d7;
           font-size: 16px;
           margin-bottom: 15px;
       }

       .chart-controls {
           display: flex;
           gap: 15px;
           margin-bottom: 15px;
       }

       .chart-controls select {
           padding: 8px;
           border: 1px solid #ddd;
           border-radius: 4px;
       }

       .chart-options {
           display: flex;
           gap: 20px;
           margin-bottom: 15px;
           flex-wrap: wrap;
       }

       .chart-options label {
           display: flex;
           align-items: center;
           gap: 5px;
           font-size: 14px;
       }

       .chart-container {
           position: relative;
           height: 300px;
       }

       /* Mes comptes */
       .accounts-section {
           background: white;
           border-radius: 8px;
           padding: 15px;
           box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
       }

       .accounts-section h2 {
           color: #0078d7;
           font-size: 16px;
           margin-bottom: 15px;
       }

       .accounts-filter select {
           width: 100%;
           padding: 8px;
           border: 1px solid #ddd;
           border-radius: 4px;
           margin-bottom: 15px;
       }

       .accounts-table {
           width: 100%;
           border-collapse: collapse;
       }

       .accounts-table th,
       .accounts-table td {
           padding: 10px;
           text-align: left;
           border-bottom: 1px solid #eee;
       }

       .accounts-table th {
           background-color: #f5f5f5;
           font-size: 13px;
           color: #666;
       }

       .account-balance.negative {
           color: #d32f2f;
       }

       .accounts-total {
           margin-top: 15px;
           padding-top: 10px;
           border-top: 2px solid #0078d7;
           display: flex;
           justify-content: space-between;
           font-weight: bold;
       }

       .accounts-total .negative {
           color: #d32f2f;
       }

       /* Langues */

       .nav-lang {
           display: flex;
           align-items:center;
           gap: 8px;
           margin-left: auto !important;
       }

       .nav-lang img {
           width: 24px;
           height: 16px;
           border-radius: 2px;
           transition: transform .2s ease;
           cursor: pointer;
       }

       .nav-lang img:hover {
           transform: scale(1.15);
       }

       /* Responsive */
       @media (max-width: 1200px) {
           .main-content {
               grid-template-columns: 1fr;
           }
       }

       /* MODAL COMMUNUCATION */
       .communication-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.55);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}

.communication-modal {
    width: min(600px, 100%);
    background: #fff;
    border-radius: 16px;
    padding: 30px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
}

.communication-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.communication-header h2 {
    margin: 0;
}

.communication-icon {
    font-size: 28px;
}

.communication-content {
    font-size: 16px;
    line-height: 1.7;
    white-space: normal;
}

.communication-actions {
    margin-top: 30px;
    text-align: right;
}

#btn-comprendre-communication {
    border: 0;
    border-radius: 8px;
    padding: 11px 22px;
    cursor: pointer;

    background: #6f6048;
    color: #fff;
    font-size: 15px;
}