.montant-debit {
    color: #dc3545 !important;
}
body {
    background: #f8f9fa;
    transition: opacity 0.4s;
    opacity: 0;
}
body.page-loaded {
    opacity: 1;
}
/* Effet clignotant/pulse pour le badge de réservations en attente */
.badge-pulse {
    animation: badgePulse 1s infinite alternate;
}
@keyframes badgePulse {
    0% { box-shadow: 0 0 0 0 rgba(220,53,69,0.5); }
    100% { box-shadow: 0 0 0 8px rgba(220,53,69,0.08); }
}
/* Style pour le tableau des réservations commerciales (identique au registre) */
.table-reservations-commerciales {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.95rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.table-reservations-commerciales thead {
    background-color: #343a40;
    color: white;
}

.table-reservations-commerciales th,
.table-reservations-commerciales td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
    font-family: inherit;
    vertical-align: middle;
}

.table-reservations-commerciales tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.table-reservations-commerciales tbody tr:hover {
    background-color: #e2e6ea;
}

.table-reservations-commerciales .montant-col {
    text-align: right !important;
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

.table-reservations-commerciales .text-success { color: #28a745; }
.table-reservations-commerciales .text-danger { color: #dc3545; }

/* Echeancier: compacter et eviter les retours a la ligne */
#table-echeances {
    font-size: 0.85rem;
}

#table-echeances th,
#table-echeances td {
    padding: 10px 12px;
    white-space: nowrap;
}
/* Fichier : css/style.css
 
body {
    /* 1. LA CORRECTION DU HEADER FIXE
    /* On pousse le contenu vers le bas pour ne pas qu'il soit caché sous le header
    padding-top: 185px;
    
    /* 2. Style Global (Bonus)
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police moderne
    background-color: #f8f9fa; /* Fond gris très clair (reposant pour les yeux)
    margin: 0; /* Enlève les marges par défaut du navigateur
    color: #333; /* Texte gris foncé (plus doux que le noir pur)
 
}
 
/* On peut aussi ajuster le conteneur principal ici si besoin
.main-content {
    padding: 20px;
    max-width: 1200px; /* Évite que ça soit trop large sur grand écran
    margin: 0 auto; /* Centre le contenu
} */
 
/* Fichier : css/style.css */
 
/* 1. L'état normal de la page */
body {
    /* On dit au navigateur de surveiller ces propriétés pour les animer */
    transition: transform 7s ease, opacity 1s ease, filter 1s ease;
   
    /* Valeurs par défaut */
    transform: none;
    opacity: 1;
    filter: none;
}
 
/* 2. L'état quand on clique sur Déconnexion (ajouté par le JS) */
body.page-sortie {
    transform: scale(0.1); /* La page recule légèrement (effet de profondeur) */
    opacity: 0;             /* La page s'efface (fondu au noir/blanc) */
    filter: blur(10px);      /* La page devient floue */
    pointer-events: none;   /* Sécurité : on empêche de recliquer pendant l'anim */
}
 
.main-content {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}
 
 
/* === THEME VARIABLES & Boutons Annuler (thème-aware) === */
:root {
    /* Bouton Annuler (neutre clair pour tous les formulaires) */
    --annuler-bg: #d1d5db;
    --annuler-color: #333333;
    --annuler-border: #c7cbd1;
    --annuler-hover: #c0c4cc;
    --annuler-focus-ring: rgba(209,213,219,0.35);
}
 
/* Thème sombre : override variables (optionnel) */
body.theme-dark {
    --annuler-bg: #3c4047;
    --annuler-color: #f7f7f7;
    --annuler-border: #2f3238;
    --annuler-hover: #32353c;
    --annuler-focus-ring: rgba(60,64,71,0.45);
}
 
.btn-annuler {
    background: var(--annuler-bg);
    color: var(--annuler-color);
    border: 1px solid var(--annuler-border);
    padding: 10px 15px; /* aligner dimensions avec boutons principaux */
    border-radius: 4px;
    cursor: pointer;
    transition: background .12s ease, box-shadow .12s ease, transform .08s ease;
    font-size: 0.95rem;
    display: block; /* force le placement en dessous du bouton modifier */
    margin-top: 8px; /* espace sous le bouton modifier */
    width: 100%; /* largeur ajustée pour occuper toute la ligne du conteneur */
}
.btn-annuler:hover { background: var(--annuler-hover); }
.btn-annuler:active { transform: translateY(1px); }
.btn-annuler:focus { outline: none; box-shadow: 0 0 0 3px var(--annuler-focus-ring); }
 
/* Helper utility class to hide (used initially in HTML) */
.hidden { display: none !important; }
 
/* === Variantes par formulaire (couleurs dédiées) === */
/* Variantes harmonisées: toutes en gris clair */
.btn-annuler.btn-annuler--mad,
.btn-annuler.btn-annuler--repo,
.btn-annuler.btn-annuler--ib,
.btn-annuler.btn-annuler--bonds {
    --annuler-bg: #d1d5db;
    --annuler-color: #333333;
    --annuler-border: #c7cbd1;
    --annuler-hover: #c0c4cc;
    --annuler-focus-ring: rgba(209,213,219,0.35);
}

/* --- Unified button style for treasurer page --- */
body:not(.reservation-page) button {
    border-radius: 8px !important;
    font-weight: 700;
    letter-spacing: 0.01em;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

body:not(.reservation-page) button:hover,
body:not(.reservation-page) button:focus {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    filter: saturate(1.05);
}

body:not(.reservation-page) button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    filter: none;
}