/*!
Theme Name: TontineWeb
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tontineweb
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

TontineWeb is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
/* Importation de la police Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   VARIABLES DE THÈME (LIGHT MODE PAR DÉFAUT)
   ========================================================================== */
:root {
    --bg-primary: #f8fafc;
    --bg-surface: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --brand-color: #4f46e5; /* Violet moderne */
    --brand-hover: #4338ca;
    --status-success: #22c55e;
    --status-success-bg: #f0fdf4;
    --status-muted: #94a3b8;
    --status-muted-bg: #f1f5f9;
    --border-color: #e2e8f0;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --radius: 12px;
    --toggle-bg: #e2e8f0;
}

/* ==========================================================================
   VARIABLES DE THÈME (DARK MODE)
   ========================================================================== */
[data-theme="dark"] {
    --bg-primary: #0f172a;       /* Arrière-plan sombre ardoise */
    --bg-surface: #1e293b;       /* Surface des cartes et en-tête */
    --text-main: #f8fafc;        /* Texte principal clair */
    --text-muted: #94a3b8;       /* Texte secondaire estompé */
    --brand-color: #6366f1;      /* Violet légèrement plus contrasté pour le dark */
    --brand-hover: #4f46e5;
    --status-success: #4ade80;
    --status-success-bg: rgba(74, 222, 128, 0.1);
    --status-muted: #64748b;
    --status-muted-bg: #334155;
    --border-color: #334155;     /* Bordures plus sombres */
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --toggle-bg: #334155;
}

/* ==========================================================================
   STYLES GÉNÉRAUX
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-main);
    line-height: 1.5;
    padding-bottom: 40px;
}

/* Header */
.app-header {
    background-color: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    padding: 16px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo {
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--brand-color);
    letter-spacing: -0.5px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Bouton Theme Toggle */
.theme-toggle {
    background-color: var(--toggle-bg);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
}

.theme-toggle:hover {
    opacity: 0.9;
}

.theme-toggle .sun-icon { display: none; }
.theme-toggle .moon-icon { display: block; }

[data-theme="dark"] .theme-toggle .sun-icon { display: block; }
[data-theme="dark"] .theme-toggle .moon-icon { display: none; }

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--brand-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.user-role {
    font-size: 0.75rem;
    background-color: var(--status-success-bg);
    color: var(--status-success);
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 500;
}

/* Main Container */
.container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Section Actions */
.hub-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.welcome-text h1 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.welcome-text p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Boutons */
.btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 0.95rem;
}

.btn-primary {
    background-color: var(--brand-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--brand-hover);
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

.btn-secondary:hover {
    background-color: var(--bg-surface);
}

/* Grille de cartes */
.tontine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

/* Composant Carte */
.tontine-card {
    background-color: var(--bg-surface);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    padding: 24px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    position: relative;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-main);
    max-width: 70%;
}

.badge {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
}

.badge-active {
    background-color: var(--status-success-bg);
    color: var(--status-success);
}

.badge-closed {
    background-color: var(--status-muted-bg);
    color: var(--status-muted);
}

.card-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.metric-box {
    display: flex;
    flex-direction: column;
}

.metric-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
}

/* Barre de progression */
.progress-container {
    margin-bottom: 24px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.progress-bar-bg {
    background-color: var(--bg-primary);
    height: 6px;
    border-radius: 10px;
    width: 100%;
    overflow: hidden;
}

.progress-bar-fill {
    background-color: var(--brand-color);
    height: 100%;
    border-radius: 10px;
}

.card-action {
    margin-top: auto;
}

.btn-card {
    width: 100%;
    justify-content: center;
    background-color: var(--bg-primary);
    color: var(--brand-color);
    border: 1px solid var(--border-color);
}

.btn-card:hover {
    background-color: var(--brand-color);
    color: white;
}

/* --- Formulaire de Création --- */
.form-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    background-color: var(--bg-surface);
    padding: 32px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    margin-top: 24px;
}

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

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text-main);
}

.form-control {
    width: 100%;
    font-family: 'Poppins', sans-serif;
    padding: 10px 14px;
    font-size: 0.95rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-main);
}

.form-control:focus {
    outline: none;
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.selected-members-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.member-tag {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.member-tag-remove {
    cursor: pointer;
    color: var(--text-muted);
    font-weight: bold;
}

.member-tag-remove:hover {
    color: #ef4444;
}

.form-footer {
    grid-column: span 2;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    border-top: 1px solid var(--border-color);
    padding-top: 24px;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .form-layout { grid-template-columns: 1fr; }
    .form-footer { grid-column: span 1; }
    .hub-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ==========================================================================
   EXTENSION DE STYLE POUR LA PARTIE 2 (LAYOUT APP & MATRICE)
   ========================================================================== */

.app-layout {
    display: flex;
    min-height: calc(100vh - 73px);
}

/* Barre Latérale */
.sidebar {
    width: 260px;
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border-color);
    padding: 32px 16px;
    display: flex;
    flex-direction: column;
}

.sidebar-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 24px;
    padding-left: 12px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
}

.nav-link:hover, .nav-link.active {
    background-color: var(--bg-primary);
    color: var(--brand-color);
}

.back-hub-link {
    margin-top: auto;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    padding-left: 12px;
}

.back-hub-link:hover {
    color: var(--brand-color);
}

/* Contenu Principal */
.main-content {
    flex: 1;
    padding: 40px;
    background-color: var(--bg-primary);
}

/* Grille des Stats de Haut de page */
.stats-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card {
    background-color: var(--bg-surface);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    padding: 24px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-card.box-highlight {
    border-left: 4px solid var(--brand-color);
}

.stat-large-value {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 4px 0;
}

.stat-subtext {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.text-success { color: var(--status-success); }
.text-danger { color: #ef4444; }

.beneficiary-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

/* Mini Avatar réutilisable */
.mini-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--brand-color);
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Timeline Horizontale */
.timeline-quick-view {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    position: relative;
    padding: 0 10px;
}

.timeline-quick-view::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    height: 4px;
    background-color: var(--border-color);
    z-index: 1;
}

.timeline-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-step span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-surface);
    border: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.timeline-step p {
    font-size: 0.8rem;
    margin-top: 8px;
    font-weight: 500;
    color: var(--text-muted);
}

.timeline-step.passed span {
    background-color: var(--status-success-bg);
    border-color: var(--status-success);
    color: var(--status-success);
}

.timeline-step.current span {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
    color: white;
    box-shadow: 0 0 0 4px var(--status-success-bg);
}

.timeline-step.current p {
    color: var(--brand-color);
    font-weight: 600;
}

/* ==========================================================================
   STYLE DU COMPOSANT TABLEAU MATRICE
   ========================================================================== */
.table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.matrice-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.95rem;
}

.matrice-table th, .matrice-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.matrice-table th {
    background-color: var(--bg-surface);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.member-cell {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.row-beneficiary {
    background-color: rgba(234, 179, 8, 0.03);
}

/* Colonne Mette en valeur du cycle en cours */
.current-column {
    background-color: rgba(79, 70, 229, 0.02);
    border-left: 1px dashed rgba(79, 70, 229, 0.2);
    border-right: 1px dashed rgba(79, 70, 229, 0.2);
}

/* État des cellules */
.cell-status {
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 500;
    display: inline-block;
}

.status-done { background-color: var(--status-success-bg); color: var(--status-success); }
.status-pending { background-color: #fef3c7; color: #d97706; }
.status-alert { background-color: #fee2e2; color: #ef4444; }
.status-none { color: var(--status-muted); }

.admin-clickable {
    cursor: pointer;
    transition: transform 0.1s ease;
}
.admin-clickable:hover {
    transform: scale(1.05);
}

/* ==========================================================================
   TIROIR / MODALE ACTION ADMIN
   ========================================================================== */
.admin-drawer {
    position: fixed;
    top: 0;
    right: -400px; /* Masqué par défaut */
    width: 380px;
    height: 100vh;
    background-color: var(--bg-surface);
    box-shadow: -4px 0 15px rgb(0 0 0 / 0.1);
    z-index: 100;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 1px solid var(--border-color);
}

.admin-drawer.open {
    right: 0;
}

.drawer-content {
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
}

#close-drawer-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--text-muted);
}

/* Responsive mobile pour le Layout */
@media (max-width: 992px) {
    .app-layout { flex-direction: column; }
    .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border-color); padding: 20px; }
    .stats-summary-grid { grid-template-columns: 1fr; gap: 16px; }
    .main-content { padding: 20px; }
    .timeline-quick-view { display: none; } /* On cache la frise sur petit écran */
}


/* ==========================================================================
   STYLE DÉDIÉ À LA PAGE DE CONNEXION CUSTOM
   ========================================================================== */

/* Wrapper principal centré dans la page */
.login-wrapper {
    max-width: 420px;
    margin: 60px auto;
    padding: 32px;
    background-color: var(--bg-surface);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

.login-header h2 {
    font-size: 1.6rem;
    font-weight: 600;
    color: black;
    margin-bottom: 6px;
}

.login-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 24px;
}

/* Interception du formulaire WordPress natif */
#loginform-custom {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Blocs contenant les couples Label + Input */
#loginform-custom .login-username, 
#loginform-custom .login-password {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#loginform-custom label {
    font-size: 0.85rem;
    font-weight: 500;
    color: black;
}

/* Uniformisation des inputs text et password avec tes .form-control */
#loginform-custom input[type="text"], 
#loginform-custom input[type="password"] {
    width: 100%;
    font-family: 'Poppins', sans-serif;
    padding: 12px 14px;
    font-size: 0.95rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: white;
    color: black;
    outline: none;
}

#loginform-custom input[type="text"]:focus, 
#loginform-custom input[type="password"]:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Alignement de la case "Se souvenir de moi" */
#loginform-custom .login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: -4px;
}

#loginform-custom .login-remember input[type="checkbox"] {
    accent-color: var(--brand-color); /* Applique le violet à la case */
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Transformation du bouton submit classique en bouton .btn-primary */
#loginform-custom .login-submit {
    margin-top: 8px;
}

#loginform-custom input[type="submit"] {
    width: 100%;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    background-color: var(--brand-color);
    color: white;
    box-shadow: var(--shadow);
}

#loginform-custom input[type="submit"]:hover {
    background-color: var(--brand-hover);
}

/* --- Séparateur visuel "OU" --- */
.login-separator {
    text-align: center;
    margin: 24px 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    position: relative;
}

.login-separator span {
    background-color: var(--bg-surface);
    padding: 0 12px;
    position: relative;
    z-index: 1;
}

.login-separator hr {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 0;
    z-index: 0;
}

/* --- Intégration du Bouton Google Nextend --- */
.social-login-container {
    width: 100%;
}

/* Forcer Nextend à s'adapter à la largeur et à tes variables */
.social-login-container .nsl-container {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

.social-login-container .nsl-container-button-layout .nsl-button {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    min-height: 46px !important;
    border-radius: var(--radius) !important;
    border: 1px solid var(--border-color) !important;
    background-color: var(--bg-primary) !important;
    color: var(--text-main) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

.social-login-container .nsl-container-button-layout .nsl-button:hover {
    background-color: var(--bg-surface) !important;
    border-color: var(--text-muted) !important;
}

.social-login-container .nsl-container-button-layout .nsl-button-svg-container {
    margin-right: 12px !important;
}

/* --- Messages d'erreurs customisés --- */
.login-error {
    background-color: #fee2e2;
    color: #ef4444;
    border: 1px solid #fca5a5;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
}

/* Adaptation en Dark Mode pour l'erreur */
[data-theme="dark"] .login-error {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

/* Responsive mobile */
@media (max-width: 480px) {
    .login-wrapper {
        margin: 20px 15px;
        padding: 24px 20px;
    }
}

/* ==========================================================================
   MIS EN PAGE DU RÈGLEMENT INTÉRIEUR
   ========================================================================== */
.document-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 992px) {
    .document-layout {
        grid-template-columns: 1fr;
    }
}

.document-paper {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 40px;
    box-shadow: var(--shadow);
}

.document-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--status-success-bg);
    color: var(--status-success);
    padding: 8px 16px;
    border-radius: 99px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 32px;
}

/* Style interne du texte de l'éditeur WordPress */
.document-wysiwyg-content h2 {
    font-size: 1.35rem;
    color: var(--text-main);
    margin-top: 28px;
    margin-bottom: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.document-wysiwyg-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.document-wysiwyg-content strong {
    color: var(--text-main);
    font-weight: 600;
}

/* Carte d'information latérale */
.info-card {
    background: linear-gradient(135deg, var(--brand-color), var(--brand-hover));
    color: #ffffff;
    padding: 24px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.info-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.info-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.9;
}

/* ==========================================================================
   OPTIMISATION RESPONSIVE MOBILE : HISTORIQUE DES FLUX
   ========================================================================== */
@media (max-width: 768px) {
    /* On masque les en-têtes du tableau devenus inutiles sur mobile */
    .advanced-history-box table.matrice-table thead {
        display: none;
    }

    /* On transforme le corps du tableau en conteneur flexible */
    .advanced-history-box table.matrice-table tbody {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 4px;
    }

    /* Chaque ligne du tableau devient une carte indépendante */
    .advanced-history-box table.matrice-table tr {
        display: grid;
        grid-template-columns: 1fr;
        background-color: var(--bg-surface);
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        padding: 16px;
        box-shadow: var(--shadow);
        position: relative;
        gap: 10px;
    }

    /* On réorganise le comportement des cellules */
    .advanced-history-box table.matrice-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 !important;
        border: none !important;
        width: 100% !important;
        text-align: left !important;
    }

    /* --- AJOUT DE LABELS AVANT LE CONTENU --- */
    /* Pour que l'utilisateur sache à quoi correspond chaque donnée */
    .advanced-history-box table.matrice-table td:nth-child(1)::before {
        content: "Date :";
        font-weight: 600;
        color: var(--text-main);
        font-size: 0.85rem;
    }

    .advanced-history-box table.matrice-table td:nth-child(3)::before {
        content: "Libellé :";
        font-weight: 600;
        color: var(--text-main);
        font-size: 0.85rem;
    }

    /* --- AJUSTEMENTS DE MISE EN PAGE SPÉCIFIQUES --- */
    
    /* Cellule du membre : on pousse le badge et le nom à droite */
    .advanced-history-box table.matrice-table td.member-cell {
        justify-content: flex-start;
        gap: 8px;
        border-bottom: 1px solid var(--border-color) !important;
        padding-bottom: 10px !important;
        margin-bottom: 4px;
    }

    /* Cellule du montant : on retire le label avant pour laisser le badge seul et bien visible à droite */
    .advanced-history-box table.matrice-table td:nth-child(4) {
        justify-content: flex-end;
        margin-top: 4px;
    }

    /* Cellule du bouton de reçu : on l'étire sur toute la largeur en bas de la carte */
    .advanced-history-box table.matrice-table td:nth-child(5) {
        justify-content: center;
        margin-top: 8px;
        padding-top: 10px !important;
        border-top: 1px solid var(--border-color) !important;
    }

    .advanced-history-box .view-receipt-btn {
        width: 100%;
        justify-content: center;
        padding: 10px !important;
    }
}