/* ===================================================================
   PGCF — style.css
   Charte Renaissance Corporation : Bleu #09204f · Orange #ea580c · Blanc
   Typographies : Playfair Display (titres) · Inter (corps)
   =================================================================== */

:root {
    /* Bleu (primaire) */
    --bleu:          #09204f;
    --bleu-clair:    #1a4488;
    --bleu-fonce:    #061536;
    --bleu-nuit:     #040e26;
    /* Orange (accent) — variables --or* conservées pour compatibilité */
    --or:            #ea580c;
    --or-clair:      #fb923c;
    --or-fonce:      #c2410c;
    --champagne:     #ffedd5;
    /* Neutres lumineux */
    --ivoire:        #f6f9ff;
    --creme:         #ffffff;
    --gris-clair:    #eef3fb;
    --gris-bord:     #e1e8f2;
    --texte:         #1e293b;
    --texte-doux:    #64748b;
    /* Accents */
    --emeraude:      #09204f;
    --saphir:        #15407e;
    --corail:        #c2410c;
    --ambre:         #ea580c;
    --violet:        #0d2a5e;
    /* Effets */
    --ombre-douce:   0 18px 50px rgba(29, 78, 216, .12);
    --ombre-carte:   0 8px 26px rgba(29, 78, 216, .08);
    --ombre-or:      0 10px 24px rgba(234, 88, 12, .30);
    --rayon:         18px;
    --rayon-sm:      11px;
    --transition:    .28s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--texte);
    background:
        radial-gradient(900px 500px at 100% -5%, rgba(234, 88, 12, .10), transparent 55%),
        radial-gradient(800px 560px at -10% 110%, rgba(29, 78, 216, .10), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #eaf0fc 100%);
    background-attachment: fixed;
    margin: 0; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .font-titre {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--bleu-fonce);
    letter-spacing: .2px;
}

a { color: var(--bleu); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--or); }

html[dir="rtl"] body { text-align: right; }

.drapeau { border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.25); vertical-align: middle; height: auto; object-fit: cover; }

/* ===================================================================
   BOUTONS
   =================================================================== */
.btn { border-radius: var(--rayon-sm); font-weight: 600; transition: transform .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease; letter-spacing: .2px; }

.btn-or {
    background: linear-gradient(135deg, #fb923c 0%, var(--or) 55%, var(--or-fonce) 100%);
    color: #fff; border: none; box-shadow: var(--ombre-or);
}
.btn-or:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 14px 30px rgba(234, 88, 12, .42); }

.btn-bleu { background: linear-gradient(135deg, var(--bleu-clair), var(--bleu)); color: #fff; border: none; box-shadow: 0 8px 20px rgba(29,78,216,.30); }
.btn-bleu:hover { color: #fff; transform: translateY(-2px); }

.btn-outline-or { color: var(--or-fonce); border: 1.5px solid var(--or); background: rgba(255,255,255,.7); }
.btn-outline-or:hover { background: linear-gradient(135deg, var(--or-clair), var(--or)); color: #fff; border-color: transparent; }

.btn-outline-bleu { color: var(--bleu); border: 1.5px solid var(--bleu-clair); background: rgba(255,255,255,.7); }
.btn-outline-bleu:hover { background: var(--bleu); color: #fff; border-color: transparent; }

.btn-light { background: rgba(255,255,255,.9); border: none; color: var(--bleu); font-weight: 600; }
.btn-light:hover { background: #fff; }

/* ===================================================================
   CARTES & SURFACES
   =================================================================== */
.carte { background: var(--creme); border: 1px solid var(--gris-bord); border-radius: var(--rayon); box-shadow: var(--ombre-carte); transition: transform .2s ease; padding: 20px 22px; }
.carte:hover { box-shadow: var(--ombre-douce); transform: translateY(-4px); }
.surface { background: var(--creme); border-radius: var(--rayon); box-shadow: var(--ombre-carte); }
.liseré-or { border-top: 4px solid var(--or); }

/* ===================================================================
   PAGE DE CONNEXION
   =================================================================== */
.login-wrapper {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(1100px 600px at 82% -12%, rgba(234, 88, 12, .30), transparent 58%),
        radial-gradient(800px 600px at 10% 110%, rgba(59, 130, 246, .30), transparent 55%),
        linear-gradient(155deg, var(--bleu) 0%, var(--bleu-nuit) 100%);
    padding: 20px; position: relative;
}
.login-card {
    width: 100%; max-width: 440px; background: rgba(255,255,255,.98);
    border: 1px solid rgba(255,255,255,.6); border-radius: 24px; padding: 44px 40px;
    box-shadow: 0 40px 90px rgba(0,0,0,.40); animation: monteeDouce .35s ease-out; position: relative; z-index: 1;
}
.login-card .logo {
    width: 96px; height: 96px; display: block; margin: 0 auto 16px; object-fit: contain;
    border-radius: 50%; padding: 8px; background: #fff;
    box-shadow: 0 0 0 3px var(--champagne), 0 0 0 4px var(--or), 0 10px 24px rgba(0,0,0,.18);
}
.login-card h1 { text-align: center; font-size: 1.65rem; margin: 0 0 2px; }
.login-card .slogan { text-align: center; color: var(--or-fonce); font-style: italic; font-size: .85rem; margin-bottom: 28px; letter-spacing: .4px; }
.form-control, .form-select { border-radius: 11px; border: 1.4px solid var(--gris-bord); padding: .6rem .85rem; background: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--bleu-clair); box-shadow: 0 0 0 .22rem rgba(59,130,246,.25); }

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

/* ===================================================================
   SIDEBAR + CONTENU
   =================================================================== */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 268px; flex-shrink: 0; color: #dbe6fb; padding: 24px 16px;
    background:
        radial-gradient(420px 220px at 50% -8%, rgba(234,88,12,.22), transparent 60%),
        linear-gradient(180deg, var(--bleu) 0%, var(--bleu-nuit) 100%);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    border-right: 1px solid rgba(234, 88, 12, .18);
}
.sidebar .marque { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 0 6px; }
.sidebar .marque img { width: 46px; height: 46px; object-fit: contain; background: #fff; border-radius: 12px; padding: 4px; box-shadow: 0 0 0 2px var(--or); }
.sidebar .marque .nom { font-family: 'Playfair Display', serif; color: #fff; font-size: 1.2rem; font-weight: 700; }
.sidebar .role-tag {
    font-size: .7rem; text-transform: uppercase; letter-spacing: 1.6px; color: #fff;
    margin: 0 6px 20px; display: inline-block;
    background: linear-gradient(135deg, var(--or-clair), var(--or)); padding: 3px 12px; border-radius: 20px; font-weight: 700;
}
.sidebar a.nav-item { display: flex; align-items: center; gap: 13px; color: #cdddf7; padding: 11px 14px; border-radius: var(--rayon-sm); margin-bottom: 4px; font-size: .94rem; transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.sidebar a.nav-item i { width: 20px; text-align: center; color: var(--or-clair); }
.sidebar a.nav-item:hover { background: rgba(255,255,255,.10); color: #fff; transform: translateX(3px); }
.sidebar a.nav-item.actif { background: linear-gradient(135deg, rgba(234,88,12,.32), rgba(234,88,12,.06)); color: #fff; box-shadow: inset 3px 0 0 var(--or); }
.sidebar a.nav-item.actif i { color: #fff; }
.sidebar .section-label { font-size: .67rem; text-transform: uppercase; letter-spacing: 1.6px; color: #93aee0; margin: 18px 10px 6px; }

.contenu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    background: #fff; border-bottom: 1px solid var(--gris-bord);
    padding: 14px 30px; display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 4px 18px rgba(29,78,216,.05); position: sticky; top: 0; z-index: 20;
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--or), transparent); opacity: .6; }
.topbar .titre-page { margin: 0; font-size: 1.35rem; }
.topbar .user-chip { display: flex; align-items: center; gap: 10px; }
.topbar .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--or-clair), var(--or-fonce)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; box-shadow: 0 4px 12px rgba(234,88,12,.4); }
.zone-contenu { padding: 30px; flex: 1; }

html[dir="rtl"] .sidebar a.nav-item.actif { box-shadow: inset -3px 0 0 var(--or); }
html[dir="rtl"] .sidebar a.nav-item:hover { transform: translateX(-3px); }

/* ===================================================================
   TABLEAUX
   =================================================================== */
.table-pgcf { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-pgcf thead th { background: linear-gradient(180deg, #e8f0fe, var(--gris-clair)); color: var(--bleu-fonce); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .6px; padding: 14px 16px; border-bottom: 2px solid var(--or); }
.table-pgcf tbody td { padding: 13px 16px; border-bottom: 1px solid var(--gris-bord); font-size: .92rem; }
.table-pgcf tbody tr { transition: background .15s; }
.table-pgcf tbody tr:hover { background: #f3f7ff; }

.badge { font-weight: 600; padding: .42em .75em; border-radius: 30px; font-size: .73rem; letter-spacing: .2px; }

.badge-langue { display: inline-flex; align-items: center; gap: 7px; padding: .32em .72em .32em .42em; border-radius: 30px; font-size: .77rem; font-weight: 600; color: #fff; line-height: 1; box-shadow: 0 3px 9px rgba(0,0,0,.12); }
.badge-langue .drapeau { box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.badge-langue.lang-Anglais  { background: linear-gradient(135deg, #1a4488, #09204f); }
.badge-langue.lang-Francais { background: linear-gradient(135deg, #1a4488, #0d2a5e); }
.badge-langue.lang-Allemand { background: linear-gradient(135deg, #fb923c, #ea580c); }
.badge-langue.lang-Italien  { background: linear-gradient(135deg, #fb923c, #c2410c); }
.badge-langue.lang-Russe    { background: linear-gradient(135deg, #2c5ca0, #15407e); }

.prix-pill { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--champagne), #fed7aa); color: var(--or-fonce); font-weight: 700; font-size: .95rem; padding: .35em .85em; border-radius: 30px; border: 1px solid rgba(234,88,12,.35); }

/* ===================================================================
   FORMULAIRES & DIVERS
   =================================================================== */
.form-label { font-weight: 600; color: var(--bleu-fonce); font-size: .9rem; margin-bottom: .3rem; }
.page-titre { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.page-titre .barre { width: 6px; height: 32px; border-radius: 5px; background: linear-gradient(180deg, var(--or-clair), var(--or-fonce)); }

.muted { color: var(--texte-doux); }
.text-or { color: var(--or-fonce) !important; }
.text-bleu { color: var(--bleu) !important; }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 992px) {
    /* Ouverture du menu par transform (animée par le GPU, sans recalcul de mise en page) */
    .sidebar { position: fixed; left: 0; top: 0; z-index: 1000; transform: translateX(-100%); transition: transform .22s ease-out; }
    .sidebar.ouverte { transform: none; box-shadow: 0 0 60px rgba(0,0,0,.5); }
    html[dir="rtl"] .sidebar { right: 0; left: auto; transform: translateX(100%); }
    html[dir="rtl"] .sidebar.ouverte { transform: none; }
    .overlay-sidebar { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999; }
    .overlay-sidebar.visible { display: block; }
    .btn-burger { display: inline-flex !important; }
    .zone-contenu { padding: 20px 16px; }
}
.btn-burger { display: none; border: none; background: transparent; font-size: 1.4rem; color: var(--bleu); }

/* ===================================================================
   SURCHARGE DES COULEURS SÉMANTIQUES → CHARTE (bleu / orange / blanc)
   Positif & neutre = bleu · Attention/négatif = orange
   =================================================================== */
.bg-success      { background: var(--bleu) !important; color: #fff !important; }
.bg-info         { background: var(--bleu-clair) !important; color: #fff !important; }
.bg-secondary    { background: var(--bleu-fonce) !important; color: #fff !important; }
.bg-warning      { background: var(--or) !important; color: #fff !important; }
.bg-danger       { background: var(--or-fonce) !important; color: #fff !important; }
.bg-primary      { background: var(--bleu) !important; color: #fff !important; }
.bg-light        { background: var(--gris-clair) !important; }

.text-success    { color: var(--bleu) !important; }
.text-info       { color: var(--bleu-clair) !important; }
.text-warning    { color: var(--or) !important; }
.text-danger     { color: var(--or-fonce) !important; }
.text-primary    { color: var(--bleu) !important; }

.alert-success   { background: #eff4ff; border-color: #bcd3ff; color: var(--bleu-fonce); }
.alert-info      { background: #eef3fb; border-color: #cfe0f7; color: var(--bleu-fonce); }
.alert-warning   { background: #fff1e3; border-color: #fdba74; color: var(--or-fonce); }
.alert-danger    { background: #fff1e8; border-color: #fbc9a8; color: var(--or-fonce); }

.btn-outline-danger  { color: var(--or-fonce); border-color: var(--or-fonce); }
.btn-outline-danger:hover { background: var(--or-fonce); color: #fff; }
.btn-outline-success { color: var(--bleu); border-color: var(--bleu); }
.btn-outline-success:hover { background: var(--bleu); color: #fff; }

/* ===================================================================
   MODE NUIT  (html.nuit) — fond sombre, accents bleu/orange conservés
   =================================================================== */
html.nuit {
    --creme:     #141d33;
    --ivoire:    #0f1830;
    --gris-clair:#1b2645;
    --gris-bord: #2a3552;
    --texte:     #e7ecf6;
    --texte-doux:#9fb0c8;
    --bleu-clair:#2c5ca0;
    --ombre-carte: 0 8px 26px rgba(0,0,0,.45);
    --ombre-douce: 0 18px 50px rgba(0,0,0,.55);
}
html.nuit body {
    background:
        radial-gradient(900px 500px at 100% -5%, rgba(234,88,12,.10), transparent 55%),
        radial-gradient(800px 560px at -10% 110%, rgba(44,92,160,.16), transparent 55%),
        linear-gradient(180deg, #0c1426 0%, #090f1d 100%);
    color: var(--texte);
}
html.nuit h1, html.nuit h2, html.nuit h3, html.nuit h4, html.nuit h5, html.nuit .font-titre { color: #dbe6fb; }
html.nuit a { color: #7aa2e3; }
html.nuit a:hover { color: var(--or-clair); }

html.nuit .topbar { background: #0f1830; border-bottom-color: var(--gris-bord); }
html.nuit .topbar .titre-page { color: #dbe6fb; }

html.nuit .carte, html.nuit .panneau, html.nuit .kpi-card, html.nuit .carte-cours, html.nuit .surface {
    background: var(--creme); border-color: var(--gris-bord);
}
html.nuit .kpi-card .kpi-valeur { color: #dbe6fb; }

html.nuit .table-pgcf thead th { background: linear-gradient(180deg, #1c2848, #141d33); color: #cdddf7; }
html.nuit .table-pgcf tbody td { border-bottom-color: var(--gris-bord); }
html.nuit .table-pgcf tbody tr:hover { background: #1b2645; }

html.nuit .form-control, html.nuit .form-select { background: #0f1830; border-color: var(--gris-bord); color: var(--texte); }
html.nuit .form-control::placeholder { color: #6b7da0; }
html.nuit .form-control:focus, html.nuit .form-select:focus { border-color: var(--bleu-clair); box-shadow: 0 0 0 .22rem rgba(44,92,160,.30); }

html.nuit .bg-light { background: #1b2645 !important; color: #dbe6fb !important; }
html.nuit .text-dark { color: #dbe6fb !important; }
html.nuit .btn-light { background: #1b2645; color: #dbe6fb; }
html.nuit .btn-bleu { background: linear-gradient(135deg, #3568b5, var(--bleu-clair)); }
html.nuit .btn-outline-bleu { color: #7aa2e3; border-color: #2c5ca0; background: transparent; }
html.nuit .btn-outline-bleu:hover { background: #2c5ca0; color: #fff; }

html.nuit .dropdown-menu { background: var(--creme); border-color: var(--gris-bord); }
html.nuit .dropdown-item { color: #cdddf7; }
html.nuit .dropdown-item:hover, html.nuit .dropdown-item.active { background: #1b2645; color: #fff; }
html.nuit .dropdown-item-text { color: var(--texte-doux); }

html.nuit .alert-info { background: #13203b; border-color: #2c5ca0; color: #bcd3ff; }
html.nuit .alert-success { background: #122036; border-color: #2c5ca0; color: #bcd3ff; }
html.nuit .alert-warning, html.nuit .alert-danger { background: #2a1a10; border-color: var(--or-fonce); color: #fed7aa; }

html.nuit .progress-pgcf { background: #1b2645; }
html.nuit footer { border-top-color: var(--gris-bord) !important; }
html.nuit .prix-pill { background: linear-gradient(135deg, #3a2a12, #4a3414); border-color: rgba(234,88,12,.4); color: var(--or-clair); }


/* ===================================================================
   PERFORMANCE & FLUIDITÉ
   =================================================================== */
/* Transition douce entre les pages (navigateurs Chromium récents ; ignorée ailleurs) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
/* Bouton en cours d'envoi (anti double-clic) */
.btn.en-cours { pointer-events: none; opacity: .75; }
.btn.en-cours::after {
    content: ""; display: inline-block; width: .85em; height: .85em; margin-inline-start: .5em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    vertical-align: -.1em; animation: pgcf-rotation .6s linear infinite;
}
@keyframes pgcf-rotation { to { transform: rotate(360deg); } }
/* Respect du réglage « réduire les animations » du système */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    @view-transition { navigation: none; }
}

/* ===================================================================
   AFFICHAGE SUR TRÈS PETITS ÉCRANS (téléphones)
   =================================================================== */
@media (max-width: 576px) {
    .zone-contenu { padding: 16px 12px; }

    /* Tableaux : défilement horizontal au lieu d'un débordement de page. */
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .table-responsive > .table { min-width: 560px; }

    .card { border-radius: 14px; }
    .card-body { padding: 16px 14px; }

    h1, .h1 { font-size: 1.45rem; }
    h2, .h2 { font-size: 1.25rem; }

    /* Boutons d'action empilés et pleinement cliquables. */
    .barre-outils, .d-flex.gap-2.flex-wrap { gap: .5rem !important; }
    .barre-outils .btn { flex: 1 1 auto; }

    .topbar .titre-page { font-size: 1rem; }
    .dropdown-menu { position: absolute; }
}

@media (max-width: 400px) {
    .zone-contenu { padding: 14px 10px; }
    .table-responsive > .table { font-size: .85rem; }
}

/* Aucun débordement horizontal (sans casser les éléments collants). */
html, body { max-width: 100%; }
.zone-contenu { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
canvas { max-width: 100%; }

/* En-tête toujours visible pendant le défilement, sur tous les appareils. */
.topbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 900;
}

@media (max-width: 992px) {
    .topbar { padding: 10px 14px; gap: 10px; }
    .topbar .titre-page {
        font-size: 1.05rem;
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .topbar .btn { padding: .3rem .55rem; }
}

@media print {
    .topbar { position: static; }
    .zone-contenu { overflow: visible; }
}

/* ===================================================================
   CHAMP MOT DE PASSE — bouton « afficher / masquer »
   =================================================================== */
.champ-mdp { position: relative; display: block; }
.champ-mdp input { padding-right: 46px; }
.oeil-mdp {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--bleu, #09204f);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.oeil-mdp:hover { background: rgba(9, 32, 79, .08); }
.oeil-mdp.actif { color: var(--or, #ea580c); }
html.nuit .oeil-mdp { color: #9fb6e0; }
html.nuit .oeil-mdp:hover { background: rgba(255, 255, 255, .08); }

/* ===================================================================
   MODE NUIT — compléments (Direction, classes, profil, tableaux)
   =================================================================== */
html.nuit .table-pgcf { color: var(--texte); }
html.nuit .table-pgcf tbody td { color: #cdddf7; }
html.nuit .table-pgcf tbody tr:nth-child(even) { background: rgba(255, 255, 255, .02); }
html.nuit .form-label { color: #cdddf7; }
html.nuit .muted, html.nuit .small.muted { color: #8ba1c6 !important; }
html.nuit .page-titre h2 { color: #dbe6fb; }
html.nuit .badge.bg-info { background: #2c5ca0 !important; color: #eaf2ff !important; }
html.nuit .badge.bg-success { background: #15803d !important; }
html.nuit .badge.bg-danger { background: #b91c1c !important; }
html.nuit .badge.bg-secondary { background: #475569 !important; }
html.nuit .badge.bg-warning { background: #b45309 !important; color: #fff7ed !important; }
html.nuit .btn-outline-danger { color: #fca5a5; border-color: #7f1d1d; }
html.nuit .btn-outline-danger:hover { background: #7f1d1d; color: #fff; }
html.nuit .btn-outline-or { color: var(--or-clair); border-color: #9a3412; }
html.nuit .btn-outline-or:hover { background: #9a3412; color: #fff; }
html.nuit .alert-danger { background: #2a1214; border-color: #7f1d1d; color: #fecaca; }
html.nuit .alert-success { background: #0f2419; border-color: #166534; color: #bbf7d0; }
html.nuit .table-responsive { background: transparent; }
html.nuit .panneau h3 { color: #dbe6fb; }

/* ===================================================================
   MESSAGERIE INTERNE ET NOTIFICATIONS
   =================================================================== */
#btnNotifs { position: relative; }
#btnNotifs.a-des-messages { border-color: var(--or); color: var(--or); }
@keyframes rc-sonne {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-14deg); }
    40% { transform: rotate(12deg); }
    60% { transform: rotate(-8deg); }
    80% { transform: rotate(6deg); }
}
#btnNotifs.sonne i { display: inline-block; animation: rc-sonne .7s ease 2; }

.badge-notif {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fb923c, #ea580c);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(234, 88, 12, .5);
}

.liste-messages { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; }

.msg-item {
    position: relative;
    display: block;
    border: 1px solid var(--gris-bord);
    border-radius: 12px;
    padding: 12px 42px 12px 14px;
    text-decoration: none;
    color: inherit;
    transition: background .15s, border-color .15s, transform .15s;
}
.msg-item:hover { background: #f3f7ff; transform: translateX(2px); }
.msg-item.actif { border-color: var(--or); background: #fff7ed; }
.msg-item.non-lu { border-left: 4px solid var(--or); font-weight: 600; }
.msg-haut { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; }
.msg-sujet { font-size: .95rem; margin-top: 2px; }
.msg-extrait { margin-top: 2px; }
.pastille-non-lu {
    position: absolute;
    top: 12px;
    right: 12px;
    min-width: 20px;
    height: 20px;
    border-radius: 12px;
    background: var(--or);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    padding: 0 6px;
}

.fil-messages { display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.bulle { border-radius: 14px; padding: 12px 16px; max-width: 88%; }
.bulle.autre { background: #eef3fb; align-self: flex-start; border-bottom-left-radius: 4px; }
.bulle.moi { background: linear-gradient(135deg, #fff1e3, #ffe4cc); align-self: flex-end; border-bottom-right-radius: 4px; }
.bulle-entete { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; margin-bottom: 4px; }
.bulle-corps { font-size: .95rem; line-height: 1.6; overflow-wrap: anywhere; }

html.nuit .msg-item { border-color: var(--gris-bord); }
html.nuit .msg-item:hover { background: #1b2645; }
html.nuit .msg-item.actif { background: #241a12; border-color: var(--or); }
html.nuit .bulle.autre { background: #17223d; }
html.nuit .bulle.moi { background: #2a1d12; }

@media (max-width: 576px) {
    .liste-messages { max-height: none; }
    .bulle { max-width: 100%; }
}

/* ---- Messagerie : sélection, épingle, pièces jointes ---- */
.barre-lot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    background: var(--gris-clair, #eef3fb);
    border-radius: 12px;
    padding: 10px 12px;
}
.barre-lot .form-select { max-width: 230px; }

.msg-item { display: flex; align-items: flex-start; gap: 10px; }
.msg-item .case-fil { margin-top: 5px; flex: 0 0 auto; }
.msg-item .msg-lien { flex: 1; text-decoration: none; color: inherit; min-width: 0; }
.msg-item .msg-sujet, .msg-item .msg-extrait { overflow: hidden; text-overflow: ellipsis; }

.bulle-actions { display: flex; gap: 14px; margin-top: 8px; }
.lien-action {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: .8rem;
    color: var(--texte-doux, #64748b);
    cursor: pointer;
}
.lien-action:hover { color: var(--or, #ea580c); }
.zone-modif { margin-top: 10px; }

.piece-jointe {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px dashed var(--or, #ea580c);
    border-radius: 10px;
    background: rgba(234, 88, 12, .07);
    text-decoration: none;
    color: inherit;
    font-size: .86rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.piece-jointe:hover { background: rgba(234, 88, 12, .14); }

html.nuit .barre-lot { background: #17223d; }
html.nuit .piece-jointe { background: rgba(234, 88, 12, .14); color: #f3e2d3; }

@media (max-width: 576px) {
    .barre-lot .form-select { max-width: none; width: 100%; }
    .barre-lot .btn { flex: 1 1 auto; }
}

/* ---- Situation des versements ---- */
.kpi-mini {
    background: var(--gris-clair, #eef3fb);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
}
.kpi-mini strong { font-size: 1.1rem; }

.tableau-versements tr.ligne-paye    { background: rgba(21, 128, 61, .06); }
.tableau-versements tr.ligne-avance  { background: rgba(234, 88, 12, .07); }
.tableau-versements tr.ligne-non_paye{ background: rgba(185, 28, 28, .05); }
.tableau-versements tfoot td { border-top: 2px solid var(--gris-bord); }
.ligne-edition > td { background: rgba(9, 32, 79, .04); }

html.nuit .kpi-mini { background: #17223d; }
html.nuit .tableau-versements tr.ligne-paye    { background: rgba(21, 128, 61, .14); }
html.nuit .tableau-versements tr.ligne-avance  { background: rgba(234, 88, 12, .14); }
html.nuit .tableau-versements tr.ligne-non_paye{ background: rgba(185, 28, 28, .14); }
html.nuit .ligne-edition > td { background: rgba(255, 255, 255, .04); }

@media (max-width: 768px) {
    .tableau-versements { min-width: 640px; }
}