:root, [data-bs-theme="light"] {
    --bs-primary: #1c4e80;
    --bs-primary-rgb: 28, 78, 128;
    --bs-body-bg: #f7f8fa;
    --ingridd-primary-dark: #123a5e;
    --ingridd-accent: #f2a03d;
    --ingridd-accent-dark: #d98a26;
    --ingridd-link: #1c4e80;
    --ingridd-surface: #ffffff;
    --ingridd-empty-icon: #d7dee6;
    --ingridd-border: rgba(28, 78, 128, 0.09);
    --ingridd-sidebar-bg: #ffffff;
}

[data-bs-theme="dark"] {
    --bs-primary: #5b9bd5;
    --bs-primary-rgb: 91, 155, 213;
    --bs-body-bg: #141a21;    /* gris-bleu foncé, pas noir pur */
    --bs-body-color: #e6e9ee;
    --ingridd-primary-dark: #0f2e4a;
    --ingridd-accent: #f5b660;
    --ingridd-accent-dark: #d99a3d;
    --ingridd-link: #7fb4e8;
    --ingridd-surface: #1c232c;
    --ingridd-empty-icon: #2a323b;
    --ingridd-border: rgba(255, 255, 255, 0.08);
    --ingridd-sidebar-bg: #1c232c;
}

body {
    background-color: var(--bs-body-bg);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    transition: background-color .2s ease, color .2s ease;
}

.ingridd-surface { background-color: var(--ingridd-surface) !important; }
a { color: var(--ingridd-link); }

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Titres de page principaux : petit soulignement dégradé bleu/orange pour plus de caractère */
h1.h3 {
    position: relative;
    padding-bottom: .55rem;
    margin-bottom: 1.1rem;
}
h1.h3::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 60px; height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #1c4e80, var(--ingridd-accent));
}

/* ================= NAVBAR SIMPLE (auth, étudiant, profil) ================= */
.ingridd-navbar {
    background: linear-gradient(120deg, #1c4e80 0%, #123a5e 100%);
    box-shadow: 0 2px 12px rgba(18, 58, 94, 0.25);
}
.ingridd-navbar .nav-link { transition: color .15s ease, transform .15s ease; }
.ingridd-navbar .nav-link:hover { color: var(--ingridd-accent) !important; transform: translateY(-1px); }

/* ================= APP SHELL (sidebar + topbar, espace admin) ================= */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: 264px;
    flex-shrink: 0;
    background: var(--ingridd-sidebar-bg);
    border-right: 1px solid var(--ingridd-border);
    display: flex;
    flex-direction: column;
    transition: width .22s ease;
}
@media (min-width: 992px) {
    .app-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden; /* seul .sidebar-nav défile, pas la sidebar entière */
    }
}
.app-sidebar.is-collapsed { width: 82px; }
.app-sidebar.is-collapsed .sidebar-label,
.app-sidebar.is-collapsed .sidebar-group-label,
.app-sidebar.is-collapsed .sidebar-brand-text { display: none !important; }
.app-sidebar.is-collapsed .sidebar-link { justify-content: center; }

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.25rem 1.1rem;
    border-bottom: 1px solid var(--ingridd-border);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--bs-primary);
}
.sidebar-brand .brand-badge {
    width: 38px; height: 38px; border-radius: 10px;
    background: linear-gradient(135deg, #1c4e80, #123a5e);
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    flex-shrink: 0;
}

.sidebar-nav { flex: 1; overflow-y: auto; padding: .9rem .7rem; }
.sidebar-group-label {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
    color: #98a2b3; font-weight: 700; margin: 1.1rem .6rem .4rem;
}
.sidebar-group-label:first-child { margin-top: 0; }

.sidebar-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .58rem .75rem; border-radius: 10px;
    color: #45505f; font-weight: 600; font-size: .92rem;
    text-decoration: none; margin-bottom: .15rem;
    transition: background-color .15s ease, color .15s ease;
    white-space: nowrap;
}
[data-bs-theme="dark"] .sidebar-link { color: #c3ccd6; }
.sidebar-link i { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-link:hover { background: rgba(var(--bs-primary-rgb), 0.08); color: var(--bs-primary); }
.sidebar-link.active {
    background: linear-gradient(120deg, #1c4e80, #123a5e);
    color: #fff;
    box-shadow: 0 3px 10px rgba(28, 78, 128, .28);
}

.sidebar-link-toggle .sidebar-chevron { margin-left: auto; font-size: .7rem; transition: transform .15s ease; }
.sidebar-link-toggle[aria-expanded="true"] .sidebar-chevron { transform: rotate(180deg); }
.sidebar-sublink { padding-left: 2.35rem; font-weight: 500; font-size: .86rem; }
.app-sidebar.is-collapsed .sidebar-sublink,
.app-sidebar.is-collapsed .sidebar-link-toggle .sidebar-chevron { display: none; }

/* Badge "messages non lus" sur le lien Messagerie de la sidebar (voir
   layouts/gestion.blade.php) — même principe que .notif-dot de la cloche de
   notifications, mais en ligne (margin-left: auto) plutôt qu'en position
   absolue : .sidebar-link est une simple rangée flex, pas un petit bouton
   carré. */
.sidebar-link-badge {
    margin-left: auto;
    background: var(--ingridd-accent); color: #fff; font-size: .7rem; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 5px;
}
.app-sidebar.is-collapsed .sidebar-link-badge { display: none; }

.sidebar-footer { padding: .8rem 1rem; border-top: 1px solid var(--ingridd-border); }
.sidebar-collapse-btn {
    width: 100%; border: none; background: transparent; color: #98a2b3;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .5rem; border-radius: 8px; font-size: .85rem;
}
.sidebar-collapse-btn:hover { background: rgba(var(--bs-primary-rgb), 0.08); color: var(--bs-primary); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
    background: var(--ingridd-surface);
    border-bottom: 1px solid var(--ingridd-border);
    padding: .65rem 1.25rem;
    display: flex;
    align-items: center;
    gap: .85rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.topbar-search { flex: 1; max-width: 420px; }
.topbar-search .input-group-text { background: var(--bs-body-bg); border-color: var(--ingridd-border); }
.topbar-search input { background: var(--bs-body-bg); border-color: var(--ingridd-border); }

.topbar-icon-btn {
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ingridd-border);
    background: var(--ingridd-surface); color: #45505f;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; transition: all .15s ease;
}
[data-bs-theme="dark"] .topbar-icon-btn { color: #c3ccd6; }
.topbar-icon-btn:hover { background: rgba(var(--bs-primary-rgb), 0.08); color: var(--bs-primary); }
.topbar-icon-btn .notif-dot {
    position: absolute; top: -3px; right: -3px;
    background: var(--ingridd-accent); color: #fff; font-size: .65rem; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    padding: 0 4px; border: 2px solid var(--ingridd-surface);
}

/* Pastille de notification sur la cloche de resources/views/layouts/portail.blade.php
   (demande explicite du client, "le tableau de bord enseignant n'est pas
   assez riche") — MIROIR de .topbar-icon-btn .notif-dot ci-dessus, bordure
   assortie au fond sombre de .ingridd-navbar plutôt qu'au fond clair de la
   barre de layouts/gestion.blade.php. */
.ingridd-navbar .notif-dot {
    position: absolute; top: -4px; right: -4px;
    background: var(--ingridd-accent); color: #fff; font-size: .65rem; font-weight: 700;
    min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    padding: 0 4px; border: 2px solid #123a5e;
}

.app-content { padding: 1.5rem; flex: 1; }

/* ================= Boutons ================= */
.btn { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.10); }
.btn:active { transform: translateY(0); }

.btn-primary { background-color: #1c4e80; border-color: #1c4e80; }
.btn-primary:hover, .btn-primary:focus { background-color: #123a5e; border-color: #123a5e; }

.btn-warning { background-color: var(--ingridd-accent); border-color: var(--ingridd-accent); color: #fff; }
.btn-warning:hover { background-color: var(--ingridd-accent-dark); border-color: var(--ingridd-accent-dark); color: #fff; }

.btn.is-loading { pointer-events: none; opacity: .85; }

/* ================= Cartes ================= */
.card {
    border: 1px solid var(--ingridd-border);
    box-shadow: 0 3px 14px rgba(18, 58, 94, 0.07);
    transition: transform .18s ease, box-shadow .18s ease;
    border-radius: .8rem;
}
[data-bs-theme="dark"] .card { box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35); }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(18, 58, 94, 0.15); }

.card-cover {
    height: 140px;
    background: linear-gradient(135deg, #1c4e80, #123a5e);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 2.4rem;
    border-radius: .8rem .8rem 0 0;
}
.card-cover-img {
    height: 140px;
    width: 100%;
    object-fit: cover;
    border-radius: .8rem .8rem 0 0;
}

/* Cartes statistiques premium : liseré de couleur en haut */
.stat-card { position: relative; overflow: hidden; }
.stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #1c4e80, #123a5e);
}
.stat-card.accent::before { background: linear-gradient(90deg, var(--ingridd-accent), var(--ingridd-accent-dark)); }
/* Variantes success/info : même palette que .card-header.header-success/
   header-info (voir plus bas) — utilisées par exemple sur les compteurs de
   Paramètres > Verrouillage des documents. */
.stat-card.success::before { background: linear-gradient(90deg, #198754, #146c43); }
.stat-card.info::before { background: linear-gradient(90deg, #0f766e, #0b5c56); }

.stat-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    background: rgba(var(--bs-primary-rgb), 0.12); color: var(--bs-primary);
}
.stat-card.accent .stat-icon { background: rgba(242, 160, 61, 0.16); color: var(--ingridd-accent-dark); }
.stat-card.success .stat-icon { background: rgba(25, 135, 84, 0.14); color: #198754; }
.stat-card.info .stat-icon { background: rgba(15, 118, 110, 0.14); color: #0f766e; }
[data-bs-theme="dark"] .stat-card.success .stat-icon { background: rgba(25, 135, 84, .22); color: #6ee7b7; }
[data-bs-theme="dark"] .stat-card.info .stat-icon { background: rgba(94, 234, 212, .18); color: #5eead4; }

/* ================= En-têtes de section ================= */
.section-header {
    display: flex; align-items: center; gap: .65rem;
    margin: 2.1rem 0 1.1rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.13);
}
.section-header .icon-chip {
    width: 38px; height: 38px; min-width: 38px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
    background: rgba(var(--bs-primary-rgb), 0.14); color: var(--bs-primary);
}
.section-header .icon-chip.accent { background: rgba(242, 160, 61, 0.18); color: var(--ingridd-accent-dark); }
.section-header h2 { margin: 0; font-size: 1.15rem; }
.section-header .subtitle { font-size: .82rem; font-weight: 500; color: #6b7280; margin-left: .25rem; }

.summary-panel {
    background: var(--ingridd-surface);
    border: 1px solid var(--ingridd-border);
    border-radius: .8rem;
    padding: 1.5rem;
    box-shadow: 0 3px 14px rgba(18, 58, 94, 0.07);
    margin-bottom: 2rem;
}

/* ================= En-tête de page coloré (écrans de liste) =================
   Demande explicite du client ("et si le fond de la partie pv de soutenance
   exporter etc... était coloré"), étendue aux 14 écrans de liste qui
   partagent ce même bandeau titre + boutons d'action. Réutilise TEL QUEL le
   dégradé bleu foncé déjà en place sur .doc-hero (fiche document) plutôt
   qu'une nouvelle teinte, pour rester cohérent avec l'unique autre bandeau
   coloré de l'application. Appliqué en ajoutant simplement cette classe sur
   le <div class="d-flex flex-wrap justify-content-between..."> déjà présent
   sur chaque écran — titre, sous-titre et boutons à l'intérieur n'ont pas
   besoin d'être touchés, les règles ci-dessous les recolorent par
   descendance (y compris sur les 4 écrans à la structure plus simple, sans
   sous-titre ni wrapper de boutons : Utilisateurs, Sauvegardes,
   Notifications, Rôles). */
.page-header-hero {
    background: linear-gradient(120deg, #1c4e80 0%, #123a5e 100%);
    border-radius: .9rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 10px 26px rgba(18, 58, 94, 0.22);
}
.page-header-hero h1 { color: #fff; }
.page-header-hero p.text-muted { color: rgba(255, 255, 255, .78) !important; }

/* Boutons secondaires (Corbeille/Exporter/Importer/Retour...) : le gris
   habituel de .btn-outline-secondary serait quasi invisible sur un fond
   bleu foncé — passage à un contour blanc translucide. */
.page-header-hero .btn-outline-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}
.page-header-hero .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border-color: #fff;
}

/* Bouton d'action principal (Nouveau PV/Ajouter/Créer...) : même bleu que
   le dégradé de fond, donc invisible tel quel — inversé en pastille blanche
   pour qu'il ressorte comme le vrai point d'action de l'en-tête. */
.page-header-hero .btn-primary {
    background: #fff;
    border-color: #fff;
    color: #1c4e80;
}
.page-header-hero .btn-primary:hover {
    background: rgba(255, 255, 255, .88);
    border-color: rgba(255, 255, 255, .88);
    color: #123a5e;
}

/* ================= Formulaires =================
   Demande explicite du client sur resources/views/portail/profil.blade.php
   ("revoir les nomination(photo, email, nom, etc...) pour mettre en gras
   et/ou ameliorer") — Bootstrap n'alourdit PAS .form-label par défaut (même
   graisse que le texte normal), ce qui les rend peu lisibles au premier
   coup d'œil sur un formulaire. Règle PARTAGÉE (pas propre à un écran) :
   .form-label est du pur Bootstrap partout dans l'application, donc ce
   changement profite à TOUS les formulaires (gestion ET portail), même
   principe que les autres règles globales de ce fichier. */
.form-label { font-weight: 600; color: var(--bs-emphasis-color, var(--bs-body-color)); }

/* ================= Badges ================= */
.badge.bg-livre { background-color: #e8f0f8; color: #1c4e80; }
.badge.bg-memoire { background-color: #fdf1de; color: #a5690f; }
[data-bs-theme="dark"] .badge.bg-livre { background-color: #1c3348; color: #8fc1e8; }
[data-bs-theme="dark"] .badge.bg-memoire { background-color: #3a2c14; color: #f5b660; }

/* ================= PV de soutenance : repère de couleur par niveau =================
   Demande explicite du client ("il n'y a pas de point de repère, tout se
   ressemble") — voir App\Models\PvSoutenance::niveauBadgeClasse() et les
   onglets de resources/views/gestion/pv-soutenances/index.blade.php. Même
   style "pastille douce" que .badge.bg-livre/.bg-memoire ci-dessus plutôt
   que les badges Bootstrap pleins (text-bg-*), pour rester cohérent et
   moins criard sur une colonne entière de la liste. */
.badge.bg-niveau-bts { background-color: #e3f6f4; color: #0f766e; }
.badge.bg-niveau-dts { background-color: #f1ecfb; color: #6d28d9; }
.badge.bg-niveau-licence { background-color: #e8f0f8; color: #1c4e80; }
.badge.bg-niveau-master { background-color: #fdf1de; color: #a5690f; }
.badge.bg-niveau-doctorat { background-color: #fbe9ec; color: #9f1239; }
[data-bs-theme="dark"] .badge.bg-niveau-bts { background-color: #123634; color: #5eead4; }
[data-bs-theme="dark"] .badge.bg-niveau-dts { background-color: #2c2150; color: #c4b5fd; }
[data-bs-theme="dark"] .badge.bg-niveau-licence { background-color: #1c3348; color: #8fc1e8; }
[data-bs-theme="dark"] .badge.bg-niveau-master { background-color: #3a2c14; color: #f5b660; }
[data-bs-theme="dark"] .badge.bg-niveau-doctorat { background-color: #3a1620; color: #fb7185; }

/* ================= En-têtes de carte : fond coloré par section =================
   Deuxième itération, sur retour du client ("je préfère que tu ajoutes des
   couleurs sur le fond des titres") — remplace la petite puce d'icône
   (.card-header-icon, jugée trop discrète) par un bandeau d'en-tête
   entièrement teinté + texte en gras, dans la même palette douce que les
   badges ci-dessus. Un bandeau de couleur clairement visible par carte,
   plutôt qu'une icône isolée qu'on remarque à peine. */
.card-header.header-primary { background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); font-weight: 700; }
.card-header.header-accent { background: rgba(242, 160, 61, .18); color: var(--ingridd-accent-dark); font-weight: 700; }
.card-header.header-success { background: rgba(25, 135, 84, .12); color: #198754; font-weight: 700; }
.card-header.header-info { background: rgba(15, 118, 110, .12); color: #0f766e; font-weight: 700; }
/* .header-danger : réservé aux sections dont l'action est irréversible (ex.
   Administration > Paramètres > Corbeilles — purge automatique) — même
   principe que les autres variantes ci-dessus. */
.card-header.header-danger { background: rgba(220, 53, 69, .12); color: #dc3545; font-weight: 700; }
[data-bs-theme="dark"] .card-header.header-primary { background: rgba(var(--bs-primary-rgb), .22); color: #7fb4e8; }
[data-bs-theme="dark"] .card-header.header-accent { background: rgba(245, 182, 96, .2); color: #f5b660; }
[data-bs-theme="dark"] .card-header.header-success { background: rgba(25, 135, 84, .25); color: #6ee7b7; }
[data-bs-theme="dark"] .card-header.header-info { background: rgba(94, 234, 212, .18); color: #5eead4; }
[data-bs-theme="dark"] .card-header.header-danger { background: rgba(220, 53, 69, .25); color: #f1aeb5; }

/* ================= En-têtes de colonne triables (tableaux de listes) =================
   Demande explicite du client ("ajoute la fonctionnalité de trier sur les
   tableaux"), étendue à tous les tableaux de listes — voir
   App\Http\Controllers\Concerns\ListeTriable et
   resources/views/components/th-triable.blade.php. Flèche discrète au repos
   (bi-arrow-down-up, grisée), colonne active en bleu/gras avec une flèche
   pleine indiquant le sens courant. */
.th-triable {
    display: inline-flex; align-items: center; gap: .35rem;
    color: inherit; text-decoration: none; white-space: nowrap;
}
.th-triable:hover { color: var(--bs-primary); }
.th-triable-fleche { font-size: .7rem; color: #adb5bd; }
.th-triable.actif { color: var(--bs-primary); font-weight: 700; }
.th-triable.actif .th-triable-fleche { color: var(--bs-primary); }
[data-bs-theme="dark"] .th-triable-fleche { color: #5b6672; }

/* ================= Onglets de niveau (PV de soutenance) : pastilles pleines =================
   Deuxième itération, sur retour du client ("l'affichage des niveaux n'est
   pas joli, change la couleur du texte et le fond, et rendre gras") —
   remplace le simple lien Bootstrap + petit point coloré par un vrai
   bouton-pastille : fond teinté + texte en gras de la même couleur que le
   badge niveau correspondant (voir .badge.bg-niveau-* ci-dessus, mêmes
   teintes réutilisées), et un remplissage plein (fond saturé + texte blanc)
   pour l'onglet actif — repère immédiat de l'onglet actuellement affiché. */
.nav-tabs-niveaux { border-bottom: none; gap: .5rem; flex-wrap: wrap; }
.nav-tabs-niveaux .nav-item { margin-bottom: 0; }
.nav-tabs-niveaux .nav-link {
    border: none; border-radius: 999px; font-weight: 700; padding: .5rem 1.1rem;
    letter-spacing: .01em; transition: transform .15s ease, box-shadow .15s ease;
}
.nav-tabs-niveaux .nav-link:hover { transform: translateY(-1px); }
.nav-tabs-niveaux .nav-link.active { color: #fff; box-shadow: 0 4px 10px rgba(18, 58, 94, 0.18); }

.nav-tabs-niveaux .niveau-tab-tous { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .1); }
.nav-tabs-niveaux .niveau-tab-tous.active { background: var(--bs-primary); }

.nav-tabs-niveaux .niveau-tab-bts { color: #0f766e; background: #e3f6f4; }
.nav-tabs-niveaux .niveau-tab-bts.active { background: #0f766e; }

.nav-tabs-niveaux .niveau-tab-dts { color: #6d28d9; background: #f1ecfb; }
.nav-tabs-niveaux .niveau-tab-dts.active { background: #6d28d9; }

.nav-tabs-niveaux .niveau-tab-licence { color: #1c4e80; background: #e8f0f8; }
.nav-tabs-niveaux .niveau-tab-licence.active { background: #1c4e80; }

.nav-tabs-niveaux .niveau-tab-master { color: #a5690f; background: #fdf1de; }
.nav-tabs-niveaux .niveau-tab-master.active { background: #a5690f; }

.nav-tabs-niveaux .niveau-tab-doctorat { color: #9f1239; background: #fbe9ec; }
.nav-tabs-niveaux .niveau-tab-doctorat.active { background: #9f1239; }

[data-bs-theme="dark"] .nav-tabs-niveaux .niveau-tab-tous { color: #7fb4e8; background: rgba(var(--bs-primary-rgb), .18); }
[data-bs-theme="dark"] .nav-tabs-niveaux .niveau-tab-bts { color: #5eead4; background: #123634; }
[data-bs-theme="dark"] .nav-tabs-niveaux .niveau-tab-dts { color: #c4b5fd; background: #2c2150; }
[data-bs-theme="dark"] .nav-tabs-niveaux .niveau-tab-licence { color: #8fc1e8; background: #1c3348; }
[data-bs-theme="dark"] .nav-tabs-niveaux .niveau-tab-master { color: #f5b660; background: #3a2c14; }
[data-bs-theme="dark"] .nav-tabs-niveaux .niveau-tab-doctorat { color: #fb7185; background: #3a1620; }

/* Onglet "Tous" actif en mode sombre : fond fixe (pas var(--bs-primary), trop
   clair en sombre) pour garder un bon contraste avec le texte blanc — les
   autres onglets actifs réutilisent déjà des teintes saturées suffisamment
   sombres (#0f766e, #6d28d9, #1c4e80, #a5690f, #9f1239) dans les deux thèmes. */
[data-bs-theme="dark"] .nav-tabs-niveaux .niveau-tab-tous.active { background: #16416b; color: #fff; }

/* ================= PV de réunion : repère de couleur par année académique =================
   Demande explicite du client ("fait de même pour les PV de réunion pour
   les couleurs et pour le tableau fait par année académique"), même
   principe visuel que les onglets/badges par niveau ci-dessus — voir
   App\Models\AnneeAcademique::paletteIndex() et
   resources/views/gestion/reunions/index.blade.php. Contrairement à
   Niveau/Cycle (une poignée de valeurs fixes, une couleur dédiée à chacune),
   l'année académique est un référentiel OUVERT (une nouvelle valeur créée
   chaque année) : pas de couleur "dédiée" possible par valeur, donc une
   palette de 6 teintes (les 5 du bloc niveau ci-dessus + un vert) attribuée
   PAR ROTATION (palette-0 à palette-5) plutôt que par valeur. Classes
   génériques .bg-palette-N/.palette-tab-N (pas .bg-annee-N) : rien n'empêche
   de les réutiliser ailleurs pour un autre référentiel ouvert. Le repère
   "Tous" réutilise directement .niveau-tab-tous ci-dessus (déjà générique). */
.badge.bg-palette-0 { background-color: #e8f0f8; color: #1c4e80; }
.badge.bg-palette-1 { background-color: #e3f6f4; color: #0f766e; }
.badge.bg-palette-2 { background-color: #f1ecfb; color: #6d28d9; }
.badge.bg-palette-3 { background-color: #fdf1de; color: #a5690f; }
.badge.bg-palette-4 { background-color: #fbe9ec; color: #9f1239; }
.badge.bg-palette-5 { background-color: #e6f4ea; color: #198754; }
[data-bs-theme="dark"] .badge.bg-palette-0 { background-color: #1c3348; color: #8fc1e8; }
[data-bs-theme="dark"] .badge.bg-palette-1 { background-color: #123634; color: #5eead4; }
[data-bs-theme="dark"] .badge.bg-palette-2 { background-color: #2c2150; color: #c4b5fd; }
[data-bs-theme="dark"] .badge.bg-palette-3 { background-color: #3a2c14; color: #f5b660; }
[data-bs-theme="dark"] .badge.bg-palette-4 { background-color: #3a1620; color: #fb7185; }
[data-bs-theme="dark"] .badge.bg-palette-5 { background-color: #163b28; color: #6ee7b7; }

.nav-tabs-niveaux .palette-tab-0 { color: #1c4e80; background: #e8f0f8; }
.nav-tabs-niveaux .palette-tab-0.active { background: #1c4e80; }

.nav-tabs-niveaux .palette-tab-1 { color: #0f766e; background: #e3f6f4; }
.nav-tabs-niveaux .palette-tab-1.active { background: #0f766e; }

.nav-tabs-niveaux .palette-tab-2 { color: #6d28d9; background: #f1ecfb; }
.nav-tabs-niveaux .palette-tab-2.active { background: #6d28d9; }

.nav-tabs-niveaux .palette-tab-3 { color: #a5690f; background: #fdf1de; }
.nav-tabs-niveaux .palette-tab-3.active { background: #a5690f; }

.nav-tabs-niveaux .palette-tab-4 { color: #9f1239; background: #fbe9ec; }
.nav-tabs-niveaux .palette-tab-4.active { background: #9f1239; }

.nav-tabs-niveaux .palette-tab-5 { color: #198754; background: #e6f4ea; }
.nav-tabs-niveaux .palette-tab-5.active { background: #198754; }

[data-bs-theme="dark"] .nav-tabs-niveaux .palette-tab-0 { color: #8fc1e8; background: #1c3348; }
[data-bs-theme="dark"] .nav-tabs-niveaux .palette-tab-1 { color: #5eead4; background: #123634; }
[data-bs-theme="dark"] .nav-tabs-niveaux .palette-tab-2 { color: #c4b5fd; background: #2c2150; }
[data-bs-theme="dark"] .nav-tabs-niveaux .palette-tab-3 { color: #f5b660; background: #3a2c14; }
[data-bs-theme="dark"] .nav-tabs-niveaux .palette-tab-4 { color: #fb7185; background: #3a1620; }
[data-bs-theme="dark"] .nav-tabs-niveaux .palette-tab-5 { color: #6ee7b7; background: #163b28; }

/* ================= Recettes : onglets des 3 volets (écrans différents) =================
   Design aligné sur .nav-tabs-niveaux ci-dessus (pastilles arrondies, gras)
   — demande explicite du client ("fais de meme pour et recette et depense,
   etc.."), voir resources/views/gestion/recettes/_onglets.blade.php.
   Contrairement aux onglets Dépenses/Contrats (référentiel OUVERT, couleur
   PAR ROTATION, voir .palette-tab-N ci-dessus) et aux onglets Niveau/Cycle
   (filtrage au sein d'UN MÊME écran), ces 3 onglets sont un nombre FIXE
   menant chacun à un ÉCRAN DIFFÉRENT (Scolarité / Retrait diplôme / Frais de
   soutenance) : chacun reçoit donc sa PROPRE couleur dédiée, comme les
   onglets Niveau/Cycle, mais sous des classes dédiées — jamais les classes
   .niveau-tab-* elles-mêmes, sémantiquement réservées au niveau/cycle. */
.nav-tabs-niveaux .recette-tab-scolarite { color: #1c4e80; background: #e8f0f8; }
.nav-tabs-niveaux .recette-tab-scolarite.active { background: #1c4e80; }

.nav-tabs-niveaux .recette-tab-retrait-diplome { color: #0f766e; background: #e3f6f4; }
.nav-tabs-niveaux .recette-tab-retrait-diplome.active { background: #0f766e; }

.nav-tabs-niveaux .recette-tab-frais-soutenance { color: #a5690f; background: #fdf1de; }
.nav-tabs-niveaux .recette-tab-frais-soutenance.active { background: #a5690f; }

[data-bs-theme="dark"] .nav-tabs-niveaux .recette-tab-scolarite { color: #8fc1e8; background: #1c3348; }
[data-bs-theme="dark"] .nav-tabs-niveaux .recette-tab-retrait-diplome { color: #5eead4; background: #123634; }
[data-bs-theme="dark"] .nav-tabs-niveaux .recette-tab-frais-soutenance { color: #f5b660; background: #3a2c14; }

/* ================= Documents : onglets des familles de types (RETIRÉ) =================
   Les classes .famille-tab-*/.badge-famille-* qui occupaient cet
   emplacement ont été retirées (demande explicite du client, "je voulait
   suprimer ce qui peut être suprimer et laisser maintenant le type
   Autres... ne plus avoir besoin des onglet Diplome et attestation;
   gouvernance administratrif; RH/personnelle") : la page "Tous les
   documents" (resources/views/gestion/documents/index.blade.php) n'a plus
   d'onglets par famille ni de carte "Répartition par famille" à habiller,
   une fois les autres types vidés/retirés du référentiel (Administration >
   Référentiels > Types de documents) et "Autre" devenu le seul type
   générique restant. App\Support\FamillesDocument, qui fournissait ce
   regroupement, n'est lui non plus plus référencé nulle part — laissé sur
   le disque (contrainte technique : suppression de fichier impossible
   depuis cette session), même situation que BilanCoursLigne/
   BilanCoursLigneController documentée dans App\Support\TypesEcranDedie. */

/* ================= Onglets en défilement horizontal (PV de réunion) =================
   Sur retour du client ("si les années académiques s'accumulent ça sera
   vilain à voir sans scroller") : contrairement aux onglets Niveau/Cycle
   ci-dessus (nombre fixe, 4 à 6 au total, jamais plus), les onglets par
   année académique s'accumulent d'année en année (un nouveau référentiel
   créé chaque année, voir App\Models\AnneeAcademique::paletteIndex()) — au
   lieu de les laisser passer à la ligne (moche dès qu'il y en a beaucoup)
   ou de les limiter arbitrairement, ils restent sur UNE SEULE ligne qui
   défile horizontalement, comme des onglets de navigateur. Modificateur
   .nav-tabs-scroll appliqué EN PLUS de .nav-tabs-niveaux (jamais à sa
   place) : resources/views/gestion/reunions/index.blade.php l'utilise pour
   cette raison (nombre qui grandit). Les écrans Niveau/Cycle/Recettes
   (nombre borné ET compact, jamais de débordement en pratique) gardent
   leur comportement actuel inchangé ; resources/views/gestion/documents/
   index.blade.php l'utilisait aussi pour ses onglets par famille, retirés
   depuis (voir le commentaire ci-dessus). */
.nav-tabs-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .45rem;
    scrollbar-width: thin;
}
.nav-tabs-scroll .nav-item { flex-shrink: 0; }
.nav-tabs-scroll::-webkit-scrollbar { height: 6px; }
.nav-tabs-scroll::-webkit-scrollbar-track { background: transparent; }
.nav-tabs-scroll::-webkit-scrollbar-thumb { background: rgba(18, 58, 94, 0.18); border-radius: 999px; }
.nav-tabs-scroll::-webkit-scrollbar-thumb:hover { background: rgba(18, 58, 94, 0.3); }
[data-bs-theme="dark"] .nav-tabs-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }
[data-bs-theme="dark"] .nav-tabs-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

/* ================= Auth (pages sans app-shell) ================= */
.auth-card { max-width: 460px; margin: 3rem auto; animation: fadeInUp .5s ease both; }

.wave { display: inline-block; animation: wave 1.6s ease-in-out 1; transform-origin: 70% 70%; }
@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(0deg); }
}

/* ================= Animations (légères) ================= */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fadeInUp .4s ease both; }
.stagger > * { animation: fadeInUp .4s ease both; }
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .05s; }
.stagger > *:nth-child(3) { animation-delay: .09s; }
.stagger > *:nth-child(4) { animation-delay: .13s; }
.stagger > *:nth-child(5) { animation-delay: .17s; }
.stagger > *:nth-child(6) { animation-delay: .21s; }

/* ================= États vides ================= */
.empty-state { text-align: center; padding: 3rem 1rem; color: #6b7280; }
.empty-state i { font-size: 2.75rem; color: var(--ingridd-empty-icon); margin-bottom: .75rem; display: block; }

/* ================= Tableaux ================= */
.table-responsive {
    border-radius: .7rem;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid var(--ingridd-border);
    box-shadow: 0 3px 14px rgba(18, 58, 94, 0.06);
    max-height: 560px;
}

/* Scrollbars personnalisées (horizontale et verticale) */
.table-responsive::-webkit-scrollbar { width: 9px; height: 9px; }
.table-responsive::-webkit-scrollbar-track { background: transparent; }
.table-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(var(--bs-primary-rgb), 0.35);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.table-responsive::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--bs-primary-rgb), 0.55); }
.table-responsive { scrollbar-width: thin; scrollbar-color: rgba(28,78,128,0.35) transparent; }

table.table {
    font-size: .865rem;
    margin-bottom: 0;
}
table.table thead th,
table.table thead td {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #e8f0f8 !important;
    color: #123a5e !important;
    border: none !important;
    border-bottom: 2px solid rgba(28, 78, 128, 0.15) !important;
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding-top: .7rem;
    padding-bottom: .7rem;
}
[data-bs-theme="dark"] table.table thead th,
[data-bs-theme="dark"] table.table thead td {
    background-color: #23344a !important;
    color: #bcd8f2 !important;
    border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
table.table tbody td { padding-top: .55rem; padding-bottom: .55rem; vertical-align: middle; }
table.table tbody tr { transition: background-color .12s ease; }

/* ================= Bannière compacte (tableau de bord étudiant) ================= */
.banner-compact { border-radius: .8rem; overflow: hidden; box-shadow: 0 3px 14px rgba(18,58,94,0.1); min-height: 130px; }
.banner-compact-wrap { position: relative; height: 100%; }
.banner-compact-link {
    display: flex; align-items: stretch; height: 100%; min-height: 130px;
    text-decoration: none; position: relative;
    background: linear-gradient(120deg, #1c4e80, #123a5e);
}
.banner-compact-img {
    width: 40%; min-width: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.06);
}
.banner-compact-body { padding: 1rem 1.2rem; color: #fff; display: flex; flex-direction: column; justify-content: center; }
.banner-compact-body strong { font-size: 1.05rem; }
.banner-compact-arrow { position: absolute; top: 10px; right: 12px; color: rgba(255,255,255,0.85); font-size: 1.2rem; }
.banner-zoom-btn {
    position: absolute;
    bottom: 10px;
    right: 12px;
    z-index: 20;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
    text-decoration: none;
}
.banner-zoom-btn:hover { background: rgba(0,0,0,0.7); color: #fff; }

/* ================= Bannières (ancien format plein écran, conservé pour compatibilité) ================= */
.banner-frame {
    background: linear-gradient(135deg, #1c4e80, #123a5e);
    height: 320px; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.banner-frame img {
    max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
    animation: kenburns 9s ease-in-out infinite alternate;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.05); } }
.carousel-indicators [data-bs-target] { background-color: var(--ingridd-accent); }

/* ================= Fiche document : bandeau "hero" coloré ================= */
.doc-hero {
    display: flex;
    background: linear-gradient(120deg, #1c4e80 0%, #123a5e 100%);
    border-radius: .9rem;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(18, 58, 94, 0.22);
}
.doc-hero-cover {
    width: 180px;
    min-width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    font-size: 3.2rem;
    color: rgba(255,255,255,0.85);
}
.doc-hero-cover img { width: 100%; height: 100%; object-fit: cover; }
.doc-hero-body { padding: 1.5rem; flex: 1; }

.doc-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.15);
    color: #fff;
    padding: .3rem .7rem;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
}
.doc-chip-light {
    background: rgba(var(--bs-primary-rgb), 0.08);
    color: #1c4e80;
}
[data-bs-theme="dark"] .doc-chip-light { background: rgba(255,255,255,0.08); color: #e6e9ee; }

.info-pill {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: var(--ingridd-surface);
    border: 1px solid var(--ingridd-border);
    border-radius: .7rem;
    padding: .8rem 1rem;
    height: 100%;
}
.info-pill i { font-size: 1.3rem; }
.info-pill .label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: #98a2b3; }
.info-pill .value { display: block; font-weight: 700; }

@media (max-width: 575.98px) {
    .doc-hero { flex-direction: column; }
    .doc-hero-cover { width: 100%; height: 140px; }
}
@media (max-width: 991.98px) {
    .app-sidebar { position: fixed; z-index: 1045; height: 100vh; }
}

/* ================= Autocomplétion recherche documents ================= */
.autocomplete-liste {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--ingridd-surface);
    border: 1px solid var(--ingridd-border);
    border-radius: .6rem;
    box-shadow: 0 8px 20px rgba(18, 58, 94, 0.15);
    margin-top: .3rem;
    max-height: 320px;
    overflow-y: auto;
}
.autocomplete-item {
    display: flex;
    align-items: center;
    padding: .6rem .9rem;
    text-decoration: none;
    color: inherit;
    font-size: .9rem;
    border-bottom: 1px solid var(--ingridd-border);
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: rgba(var(--bs-primary-rgb), 0.07); }

/* Calendrier "Mon compte" du tableau de bord — voir DashboardController::calendrier(). */
.ingridd-calendrier th { font-weight: 600; color: var(--bs-secondary-color, #6c757d); font-size: .78rem; }
.ingridd-calendrier td { padding: .55rem .25rem; }
/* Pastille pleine (pas une simple teinte de fond sur la cellule, trop
   discrète — demande explicite du client, "j'aimerais que la date du jour
   soit remarquable, à coup d'oeil") : un disque de la couleur primaire,
   chiffre en blanc, même principe qu'un badge de notification — repérable
   en un coup d'oeil, contrairement à l'ancienne teinte à 14% d'opacité. */
.ingridd-calendrier-jour-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
}
.ingridd-calendrier-aujourdhui .ingridd-calendrier-jour-numero {
    background: var(--bs-primary);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18);
}
/* Week-ends teintés — demande explicite du client ("rends ça plus vivante
   [...] avec les couleurs"), repère visuel rapide dans la grille. La case
   "aujourd'hui" garde TOUJOURS la priorité sur la teinte week-end (voir
   :not() ci-dessous) : un samedi/dimanche "aujourd'hui" reste signalé par la
   couleur primaire, jamais noyé dans la teinte week-end plus discrète. */
.ingridd-calendrier th.ingridd-calendrier-weekend { color: var(--ingridd-accent-dark); }
.ingridd-calendrier td.ingridd-calendrier-weekend:not(.ingridd-calendrier-aujourdhui) {
    background: rgba(242, 160, 61, 0.09);
    border-radius: .4rem;
}

/* ================= Messagerie (boîte de réception façon chat) =================
   Administration > Messagerie — remplace l'ancien écran "Annonces" (demande
   explicite du client, "améliore la gestion des annonces pour que ça soit
   comme une messagerie"). Voir App\Http\Controllers\MessagerieController et
   resources/views/gestion/messagerie/. Deux colonnes façon application de
   chat : liste des conversations à gauche (administrateurs uniquement — un
   utilisateur non-admin n'a qu'une seule conversation, cette colonne reste
   masquée pour lui), fil de discussion à droite. */
.messagerie-shell {
    display: flex;
    height: calc(100vh - 220px);
    min-height: 420px;
    background: var(--ingridd-surface);
    border: 1px solid var(--ingridd-border);
    border-radius: .9rem;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(18, 58, 94, 0.08);
}

.messagerie-liste {
    width: 320px;
    flex-shrink: 0;
    border-right: 1px solid var(--ingridd-border);
    display: flex;
    flex-direction: column;
}
@media (max-width: 767.98px) {
    .messagerie-liste { width: 100%; }
    .messagerie-shell.a-une-conversation-active .messagerie-liste { display: none; }
}

/* Recherche par nom d'interlocuteur (demande explicite du client) + liste
   scrollable indépendamment du champ de recherche et de la pagination,
   tous deux fixes en haut/bas de la colonne. */
.messagerie-recherche { padding: .6rem .75rem; border-bottom: 1px solid var(--ingridd-border); flex-shrink: 0; }
.messagerie-liste-corps { flex: 1; overflow-y: auto; }
.messagerie-pagination { padding: .4rem .5rem; border-top: 1px solid var(--ingridd-border); flex-shrink: 0; }
.messagerie-pagination nav { display: flex; justify-content: center; }
.messagerie-pagination .pagination { margin-bottom: 0; }

.messagerie-conversation-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem 1rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--ingridd-border);
    transition: background-color .15s ease;
}
.messagerie-conversation-item:hover { background: rgba(var(--bs-primary-rgb), 0.06); }
.messagerie-conversation-item.active { background: rgba(var(--bs-primary-rgb), 0.1); }
.messagerie-conversation-item .messagerie-avatar {
    width: 2.6rem; height: 2.6rem; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1c4e80, var(--ingridd-accent));
    color: #fff; font-weight: 700; font-size: .95rem;
}
.messagerie-conversation-item .messagerie-conversation-infos { min-width: 0; flex: 1; }
.messagerie-conversation-item .messagerie-conversation-nom {
    font-weight: 600; font-size: .92rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.messagerie-conversation-item.non-lue .messagerie-conversation-nom { font-weight: 800; }
.messagerie-conversation-item .messagerie-conversation-apercu {
    font-size: .82rem; color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.messagerie-conversation-item.non-lue .messagerie-conversation-apercu { color: inherit; }
.messagerie-conversation-meta { text-align: right; flex-shrink: 0; }
.messagerie-conversation-heure { font-size: .72rem; color: var(--bs-secondary-color, #6c757d); display: block; }
.messagerie-point-non-lu {
    display: inline-block; width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--ingridd-accent); margin-top: .3rem;
}

.messagerie-fil { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.messagerie-fil-entete {
    padding: .85rem 1.1rem; border-bottom: 1px solid var(--ingridd-border);
    display: flex; align-items: center; gap: .6rem; flex-shrink: 0;
}
.messagerie-fil-corps { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.messagerie-fil-pied { border-top: 1px solid var(--ingridd-border); padding: .75rem 1.1rem; flex-shrink: 0; }

.msg-rangee { display: flex; margin-bottom: .6rem; }
.msg-rangee.mine { justify-content: flex-end; }
.msg-bloc { max-width: 72%; }
.msg-rangee.mine .msg-bloc { text-align: right; }
.msg-auteur { font-size: .74rem; font-weight: 600; color: var(--bs-secondary-color, #6c757d); margin-bottom: .15rem; }
.msg-bulle {
    display: inline-block; text-align: left; padding: .55rem .85rem;
    border-radius: .9rem; font-size: .9rem; white-space: pre-line; word-break: break-word;
    background: rgba(var(--bs-primary-rgb), 0.08);
    border-bottom-left-radius: .25rem;
}
.msg-rangee.mine .msg-bulle {
    background: var(--bs-primary); color: #fff;
    border-bottom-left-radius: .9rem; border-bottom-right-radius: .25rem;
}
.msg-bulle .msg-titre { display: block; font-weight: 700; margin-bottom: .2rem; }
.msg-heure { display: block; font-size: .7rem; color: var(--bs-secondary-color, #6c757d); margin-top: .2rem; }
.msg-rangee.mine .msg-heure { color: rgba(255, 255, 255, .75); }

/* Message supprimé (voir App\Http\Controllers\MessagerieController::supprimerMessage()) : bulle neutre, contenu remplacé par un texte de substitution. */
.msg-bulle-supprime {
    background: transparent !important;
    border: 1px dashed var(--ingridd-border);
    color: var(--bs-secondary-color, #6c757d);
}
.msg-rangee.mine .msg-bulle-supprime { color: var(--bs-secondary-color, #6c757d); }

/* Bouton "Supprimer" d'un message — discret, affiché sous la bulle. */
.msg-actions { margin-top: .15rem; }
.msg-action-supprimer {
    border: none; background: none; padding: 0; font-size: .72rem;
    color: var(--bs-secondary-color, #6c757d); cursor: pointer;
}
.msg-action-supprimer:hover { color: var(--bs-danger, #dc3545); text-decoration: underline; }