/* Charte graphique MNSPF — thème FRONT-OFFICE (uniquement). Servie par le module front-office
   via META-INF/resources à l'URL /resources/css/xtranets-fo.css. Logo et favicons sous /resources/img/.

   ⚠️ Split FO-only (cf. docs/CHARTE.md) : le back-office garde /resources/css/xtranets.css (module
   common, INCHANGÉ). Le front-office charge common PUIS cette feuille, qui — chargée en dernier —
   surcharge les classes partagées (.card, .btn-primary, .table, .conv-item, .chat-*, :root…) et ajoute
   les composants propres au FO (header 2 bandes, sections empilées, footer institutionnel, boutons
   inline, offcanvas mobile). Design repris de mnspf.fr (livrable UX/UI NTE, 2026-07). Le style des chips
   de pièces jointes (.chat-piece*) reste servi par common (non redéfini ici). */

/* =============================================================================
   Charte MNSPF (reprise de mnspf.fr) — sapeurs-pompiers : chrome BLANC, titres en
   BLEU MARINE, actions en ROUGE, angles très arrondis, ombres diffuses, typo sobre.
   On surcharge les variables de thème Bootstrap 5.3 → propagation sans toucher aux templates.
   ============================================================================= */
:root {
    --mnspf-bleu: #164271;
    --mnspf-bleu-fonce: #0f3258;
    --mnspf-bleu-moyen:#2267B0;
    --mnspf-bleu-light:#BAD5F2;
    --mnspf-bleu-gris: #E9EFF5;
    --mnspf-bleu-gris-light: #F4F7FA;
    --mnspf-rouge: #e32128;
    --mnspf-rouge-fonce: #a6191e;
    --mnspf-rose: #F6B6B8;
    --mnspf-rose-fonce : #dd6d70;
    --mnspf-rose-light: #F9E9E9;
    --mnspf-vert : #166534;
    --mnspf-vert-light : #e4f8ee;
    --w : #FFFFFF;
    --g50:        #F8FAFC;
    --g100:       #F1F5F9;
    --g200:       #E2E8F0;
    --g300:       #CBD5E1;
    --g400:       #94A3B8;
    --g500:       #64748B;

    /*Texte courant (labels, paragraphes, contenu de formulaire) en bleu marine (cf. charte web MNSPF)*/   
    --bs-primary: var(--mnspf-bleu);
    --bs-primary-rgb: 22, 66, 113;

    /* Accent / danger = rouge MNSPF. */
    --bs-danger: var(--mnspf-rouge);
    --bs-danger-rgb: 227, 33, 40;

    /* Liens */
    --bs-link-color: #2ea3f2;
    --bs-link-color-rgb: 46, 163, 242;
    --bs-link-hover-color: #2ea3f2;
    --bs-link-hover-color-rgb: 46, 163, 242;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    color: var(--mnspf-bleu);
    background: var(--mnspf-bleu-gris-light);
}

.page-section {
    flex: 0 0 auto;
}

main,
.page-section:last-of-type {
    flex: 1 0 auto;
}

h1 {
    font-weight: 700;
    font-size: 1.5rem;
}

a:not(.btn) {
    text-decoration: none;
    transition: font-weight 0.15s ease;
}

a:not(.btn):hover,
a:not(.btn):focus {
    font-weight: 600;
    text-decoration: none;
}

p {
    margin-bottom:0;
}

.alert {
    margin-top: 1rem;
    border-radius: 20px;
}

.alert-danger {
    color: var(--mnspf-rouge);
    background-color: var(--mnspf-rose-light);
    border: var(--mnspf-rose-light);
}

.alert-success {
    color: var(--mnspf-vert);
    background-color: var(--mnspf-vert-light);
    border: var(--mnspf-vert-light);
}

code {
    color: var(--g500);
}

/* Logo MNSPF sur la page de connexion */
.login-logo {
    max-height: 100px;
    width: auto;
}

/* Titre de marque de la page de connexion (h1 sémantique). Reprend l'esprit visuel de la charte web MNSPF. */
.login-title {
    text-align: center;
    text-transform: uppercase;
}

/* Sous-titre de section : pour bien distinguer la marque ("Espace organisme") de l'action ("Connexion"). */
.login-subtitle {
   font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Sections pleine largeur empilées (repris du principe mnspf.fr) : chaque section a son propre
   fond sur toute la largeur de l'écran. */
/* Titre de page : simple h1 dans une section dédiée à fond teinté, sans icône ni bloc encadré. */
.page-section {
    padding: 3rem 0;
}

.page-section-header {
    padding: 2rem 0;
    border-radius: 0 0 20px 20px;
}

.page-title-row {
    padding : 0 2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-title-row i {
    font-size: 1.25rem;
    color: var(--mnspf-bleu);
}

.page-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--mnspf-bleu);
    margin: 0;
}

.page-subtitle {
   padding : 0 2rem;
    margin-top: 0.35rem;
}

.page-section-bleu-gris {
     background-color: color-mix(in srgb, var(--mnspf-bleu-gris) 90%, var(--mnspf-bleu-moyen));
}

@media (max-width: 576px) {
    .page-header h1 {
        font-size: 1.25rem;
    }
    .page-section-header {
    border-radius: 0;
    }
}

/* Sous-titre de section pages */
.section-subtitle {
  font-size: 1.3rem;
  font-weight: 600;
  padding-left: 1rem;
  color: var(--mnspf-bleu-moyen);
}
.section-subtitle i {
    color: var(--mnspf-bleu-moyen);
}

@media (max-width: 576px) {
  .section-subtitle{
    font-size: 1.2rem;
  }
}

/* Cards : reprise de la charte MNSPF */
.card {
    background-color: var(--w);
    border-radius: 20px;
    overflow: hidden;
    border-width: 1px;
    border-color: var(--mnspf-bleu-light);
    padding-bottom: 20px;
    box-shadow: 0 4px 10px 0 rgba(56,133,160,0.1);
    color: var(--bs-primary);
}

.card-header {
  color: var(--mnspf-bleu);
  background-color: var(--mnspf-bleu-gris);
  border-bottom: 1px solid var(--g200);
  padding-top: 1em;
}

.card-title {
    font-size: 1.05rem;
    font-weight:600;
}

.card-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--mnspf-bleu);
    opacity: 0.85;
    display: block;
    margin-bottom: 0.4rem;
}

/* Modales : Bootstrap natif remis à la charte — mêmes formes que les cartes (20 px) et un entête posé
   sur le bleu-gris, comme un `.card-header`. Sans ces quatre règles, la première modale du front-office
   arrivait avec l'arrondi de 8 px et le blanc plat de Bootstrap, au milieu d'écrans en 20 et 30 px.
   Le style est GÉNÉRIQUE (aucun sélecteur d'écran) : la prochaine modale en hérite sans rien redéfinir. */
/* ⚠️ L'arrondi se règle par les VARIABLES de Bootstrap, pas par un `border-radius` sur `.modal-content` :
   les coins de l'entête et du pied sont calculés à partir de `--bs-modal-border-radius` moins l'épaisseur
   du bord. Forcer le rayon sur le seul conteneur laisse l'aplat de l'entête déborder en coins carrés. */
.modal {
    --bs-modal-border-radius: 20px;
    --bs-modal-border-width: 0;
}

.modal-header {
    color: var(--mnspf-bleu);
    background-color: var(--mnspf-bleu-gris);
    border-bottom: 1px solid var(--g200);
}

.modal-title {
    font-weight: 600;
}

.modal-footer {
    border-top: 1px solid var(--g200);
}

/* Formulaires : reprise de la charte MNSPF */
 .form-control, .form-select {
    border-radius: 20px;
    border: 1px solid var(--mnspf-bleu-light);
    padding: 0.6rem 1rem;
    color: var(--mnspf-bleu);
}

.form-select {
    cursor: pointer;
    /* 🚨 Rendre le padding DROIT que le raccourci `padding` ci-dessus a écrasé. Bootstrap en réserve
       2.25 rem sur `.form-select` — et rien d'autre — pour y poser le chevron, dessiné en image de
       fond à `right .75rem center` sur 16 px de large. Un raccourci qui redéfinit les quatre côtés le
       ramène à 1 rem, et le glyphe se pose alors SUR les derniers caractères de l'option la plus
       longue : « Tous les risques » et « Tous les statuts » barrés par la flèche sur la liste des
       sinistres (constaté en recette le 2026-09-04, présent depuis la refonte graphique du 17/07).
       ⚠️ La valeur n'est pas choisie : c'est celle de Bootstrap, pour que le dégagement suive le
       chevron si une version future le déplace. Les `.form-control` n'en ont pas besoin — pas de
       chevron —, d'où une règle qui ne vise QUE `.form-select`. */
    padding-right: 2.25rem;
}

/* 🚨 Rendre la variante COMPACTE que le même raccourci `padding` a écrasée, et pour la même raison
   qu'au-dessus : `.form-select-sm` (0,1,0) et `.form-control, .form-select` (0,1,0) pèsent le même
   poids, ce fichier est chargé en dernier, donc c'est lui qui gagne — `form-select-sm` était
   simplement INERTE. Le champ de recherche, lui, y échappait : dans un groupe, la règle qui le
   dimensionne est `.input-group-sm > .form-control` (0,2,0), qui passe devant. D'où la barre de
   filtres des sinistres avec une recherche de 31 px à côté de trois listes de 42 px, alignées en
   haut : ce n'était pas un défaut de centrage mais une différence de hauteur (retour d'écran du
   2026-09-16). ⚠️ Les valeurs sont celles de Bootstrap, pas un choix : on rend le raccourci, on ne
   redessine pas. Et `padding-right` n'est pas repris — le dégagement du chevron ci-dessus vaut pour
   les deux tailles. ⚠️ `.form-control-sm` est dans le même piège ; il n'est employé nulle part au
   front-office aujourd'hui, et une règle qu'aucun écran n'éprouve se périme sans qu'on le voie. */
.form-select-sm {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
}

/* 🚨 Rendre à un GROUPE l'arrondi de la charte — le même piège que ci-dessus, pris par l'autre bout.
   Bootstrap redessine les coins de tous les enfants d'un `.input-group-sm` par
   `.input-group-sm > .btn, … > .form-control, … > .form-select, … > .input-group-text` (0,2,0), à
   `var(--bs-border-radius-sm)`, soit 4 px. Les règles de la charte — `.form-control, .form-select` et
   `.btn`, ci-dessus — pèsent 0,1,0 : elles ne l'atteignent PAS, et aucun ordre de chargement n'y change
   rien. Au-dessus, le thème gagnait et neutralisait Bootstrap ; ici c'est l'inverse. D'où, sur la barre
   de filtres des sinistres, une recherche à 4 px posée à côté de trois listes à 20 px (retour d'écran du
   2026-09-16). ⚠️ Retirer le `-sm` ne réglerait rien : le groupe retomberait sur 6 px à gauche (l'icône,
   que la charte ne restyle pas) et 30 px à droite.

   Les coins visés sont les coins EXTÉRIEURS seulement. Les coins intérieurs sont mis à zéro par les
   règles de soudure de Bootstrap (0,6,0), hors d'atteinte d'ici — et c'est voulu : un groupe doit se
   lire comme un seul contrôle. ⚠️ D'où deux valeurs et non une : au front-office, les deux groupes
   existants ouvrent sur une icône (un habillage de champ, donc 20 px) et se ferment sur un bouton
   (30 px). À la hauteur compacte les deux dépassent la moitié de la hauteur et le navigateur les ramène
   à la même pilule ; l'écart ne se voit qu'en pleine taille, où il est celui de la charte.

   ⚠️ `.liste-filtrable` désoude ses propres groupes avec des sélecteurs de même poids (0,2,0) posés
   dans la feuille COMMUNE, donc chargés AVANT celle-ci : si ce composant venait un jour au front-office,
   ces deux règles-ci lui rendraient ses arrondis et casseraient son cadre. Il n'est employé qu'au
   back-office aujourd'hui, où cette feuille n'est pas servie. */
.input-group > :first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.input-group > :last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

/* Tables : surface BLANCHE sur le fond bleuté (la table ressort comme une carte), avec une
   alternance de lignes bleutée — lisible sur le blanc, au lieu du gris Bootstrap. */
.table {
    --bs-table-bg: #ffffff;
    --bs-table-striped-bg: #eef3f9;
    --bs-table-striped-color: inherit;
}

/* Encadre la table comme une carte (bord + arrondi) pour bien la délimiter du fond. */
.table-responsive {
    border: none;
    border-radius: var(--bs-border-radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-striped > tbody > tr:nth-of-type(2n+1) > * {
  --bs-table-bg-type: var(--mnspf-bleu-gris-light);
}

.table thead th {
    color: var(--mnspf-bleu);
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: 2px solid var(--mnspf-bleu-gris);
}

.table tbody td {
    color: var(--mnspf-bleu);
}
.table tbody td code {
    font-size: 1rem;
}

@media (max-width: 768px) {
    .table,
    .table thead th,  
    .table tbody td code {
        font-size: 0.8rem;
    }

    .table td,
    .table th {
        padding: 0.5rem 0.4rem;
    }
}


/* RÈGLE DE CHARTE — boutons d'action dans une cellule de tableau.
   À poser sur le <td> d'actions : boutons alignés à droite, espacés, sur une seule ligne.
   Convention des libellés (boutons outline, compacts via .app .btn, avec icône Font Awesome) :
     · Consulter  -> .btn-outline-primary  + fa-eye
     · Modifier   -> .btn-outline-warning  + fa-pen-to-square
     · Supprimer  -> .btn-outline-danger   + fa-trash  (dans un <form> pour le POST + confirm)
   IMPORTANT : surtout PAS de `display:flex` sur le <td> — cela sort la cellule du modèle de tableau,
   elle ne prend alors plus la hauteur de la ligne (le striping et les bordures se cassent sur les
   lignes multi-lignes, les boutons « flottent »). On garde donc un vrai <td> et on dispose les
   actions en inline-block, centrées verticalement. */
.table-actions {
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

.table-actions > * {
    display: inline-block;
    vertical-align: middle;
}

.table-actions > * + * {
    margin-left: 0.4rem;
}

.table-actions form {
    margin: 0;
}

/* HEADER */

.mnspf-header-wrap {
    background-color: var(--w);
    box-shadow: 0px 8px 20px 0px rgba(56,133,160,0.1);
    position: relative;
    z-index: 10;
}

.mnspf-header {
    display: flex;
    align-items: stretch;   
}

.mnspf-header-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 1.5rem 0 0;
    text-decoration: none;
}

.mnspf-header-logo img {
    height: 92px;
    width: auto;
}

.mnspf-header-bands {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.mnspf-utility-bar {
    display: flex;
    align-items: center;
    padding: 0.35rem 1rem 0.35rem 0;
    border-bottom: 1px solid var(--g300);
}

.mnspf-header-title {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--mnspf-bleu);
}

.mnspf-utility-bar .dropdown-item {
    color: var(--mnspf-bleu);
}

.mnspf-utility-bar .dropdown-item:hover {
    background-color: var(--w);
    color: var(--mnspf-rouge);
}

/* Logo MNSPF dans la barre de navigation. */
.navbar-brand .brand-logo {
    height: 42px;
    width: auto;
}

/* Navbar conforme à la charte web MNSPF */
.mnspf-navbar {
    border-bottom: none;
    padding-right: 1rem;
}

.mnspf-navbar .nav-link,
.mnspf-utility-bar .nav-link {
    font-weight: 400;
    color: var(--mnspf-bleu);
    transition: color 0.15s ease;
}

.mnspf-navbar .nav-link.active {
    color: var(--mnspf-rouge) !important;
    font-weight: 500;
}

.mnspf-navbar .nav-link:hover,
.mnspf-navbar .nav-link:focus,
.mnspf-utility-bar .nav-link:hover,
.mnspf-utility-bar .nav-link:focus  {
    color: var(--mnspf-rouge);
    font-weight: 500; 
}

.dropdown-menu {
    border: none;
    border-radius: 0;
    box-shadow: 0 4px 10px 0 rgba(56,133,160,0.1);
}

/* Bouton hamburger : visible uniquement en dessous du breakpoint lg */
.mnspf-mobile-toggle {
    background: none;
    border: none;
    color: var(--mnspf-bleu);
    font-size: 1.5rem;
    padding: 0.5rem;
    margin-left: auto;
}

/* Panneau plein écran mobile, reprenant le principe mnspf.fr : logo + croix en haut, liens
   empilés en dessous, angles droits cohérents avec la charte. */
.mnspf-mobile-menu {
   --bs-offcanvas-width: min(90%, 400px);
}

.mnspf-mobile-menu .offcanvas-header {
    border-bottom: 1px solid var(--g200);
    padding: 1rem 1.25rem;
}

.mnspf-mobile-logo {
    height: 48px;
    width: auto;
}

.mnspf-mobile-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mnspf-mobile-nav li {
    border-bottom: 1px solid var(--g100);
}

.mnspf-mobile-nav a,
.mnspf-mobile-logout {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mnspf-bleu);
}

.mnspf-mobile-nav a:hover,
.mnspf-mobile-nav a:focus,
.mnspf-mobile-nav a:active,
.mnspf-mobile-logout:hover,
.mnspf-mobile-logout:focus,
.mnspf-mobile-logout:active  {
    color: var(--mnspf-rouge);
}

.mnspf-mobile-nav-sub .mnspf-mobile-logout {
    padding-left: 1.75rem;
}

.mnspf-mobile-nav-static span {
    display: block;
    width: 100%;
    padding: 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mnspf-bleu);
}

/* Boutons d'action = .btn-primary est le bouton d'action par défaut des écrans, conforme à la charte web MNSPF */
.btn-primary {
    --bs-btn-color: var(--w);
    --bs-btn-bg: var(--mnspf-rouge);
    --bs-btn-border-color: var(--mnspf-rouge);
    --bs-btn-hover-color: var(--w);
    --bs-btn-hover-bg: var(--mnspf-rouge-fonce);
    --bs-btn-hover-border-color: var(--mnspf-rouge-fonce);
    --bs-btn-active-color: var(--w);
    --bs-btn-active-bg: var(--mnspf-rouge-fonce);
    --bs-btn-active-border-color: var(--mnspf-rouge-fonce);
    --bs-btn-disabled-color: var(--mnspf-rouge);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--mnspf-rouge);
    font-weight: 600;
}

.btn-secondary {
    --bs-btn-color: var(--mnspf-rouge);
    --bs-btn-bg: var(--w);
    --bs-btn-border-color: var(--mnspf-rouge);
    --bs-btn-hover-color: var(--w);
    --bs-btn-hover-bg: var(--mnspf-rouge);
    --bs-btn-hover-border-color: var(--mnspf-rouge);
    --bs-btn-active-color: var(--w);
    --bs-btn-active-bg: var(--mnspf-rouge);
    --bs-btn-active-border-color: var(--mnspf-rouge);
    --bs-btn-disabled-color: var(--mnspf-rouge);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--mnspf-rouge);
    font-weight: 600;
}

.btn-secondary-blue {
    --bs-btn-color: var(--mnspf-bleu);
    --bs-btn-bg: var(--w);
    --bs-btn-border-color: var(--mnspf-bleu);
    --bs-btn-hover-color: var(--w);
    --bs-btn-hover-bg: var(--mnspf-bleu-moyen);
    --bs-btn-hover-border-color: var(--mnspf-bleu-moyen);
    --bs-btn-active-color: var(--w);
    --bs-btn-active-bg: var(--mnspf-bleu-moyen);
    --bs-btn-active-border-color: var(--mnspf-bleu-moyen);
    --bs-btn-disabled-color: var(--mnspf-bleu);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--mnspf-bleu);
    font-weight: 600;
}

.btn {
    border-radius: 30px;
    transition-duration: .2s;
    display: inline-block;
    padding: 0.6rem 1rem;
    white-space: nowrap;
}

/* Boutons "inline" : actions secondaires accolées à un titre (ex. Retour/Supprimer à côté du sujet
   d'une conversation).

   Ce sont des BOUTONS, clairs : fond blanc, contour fin, même arrondi que les autres. Ils étaient
   traités comme de simples liens (ni fond ni bord) et ne se lisaient pas comme cliquables — remonté à
   l'usage le 2026-08-13. La hiérarchie reste lisible sans les déguiser : l'action principale (Envoyer,
   Nouvelle conversation) est un aplat rouge, celles-ci un contour discret. */
.btn-inline {
    background: var(--w);
    border: 1px solid var(--mnspf-bleu-light);
    padding: 0.5rem 0.9rem;
    color: var(--mnspf-bleu);
    text-decoration: none;
    font-weight: 500;
}

.btn-inline:hover,
.btn-inline:focus {
    background: var(--mnspf-bleu-gris-light);
    border-color: var(--mnspf-bleu-moyen);
    color: var(--mnspf-bleu);
}

/* Variante pour les actions destructrices (ex. Supprimer) : même forme, couleur d'alerte. La classe
   s'emploie SEULE (sans .btn-inline), elle porte donc tout le style. */
.btn-inline-danger {
    background: var(--w);
    border: 1px solid var(--mnspf-rouge);
    padding: 0.5rem 0.9rem;
    color: var(--mnspf-rouge);
    text-decoration: none;
    font-weight: 500;
}

.btn-inline-danger:hover,
.btn-inline-danger:focus {
    background: var(--mnspf-rouge);
    border-color: var(--mnspf-rouge);
    color: var(--w);
}

@media (max-width: 576px) {
    .message-subject-actions {
       width: 100%;
        justify-content: flex-end;
    }
}

/* Action secondaire à côté d'un bouton principal de formulaire (ex. Annuler à côté d'Envoyer) —
   même traitement visuel que .btn-inline, mais nommé séparément car le
   contexte d'usage est différent (formulaire, pas titre de page). */
.btn-form-secondary {
    background: none;
    border: none;
    padding: 0.5rem 0.75rem;
    color: var(--bs-link-color);
    text-decoration: none;
    font-weight: 500;
}

.btn-form-secondary:hover,
.btn-form-secondary:focus {
    color: var(--bs-link-hover-color);
    font-weight: 600;
}

.btn-sm {
    --bs-btn-font-size: 0.85rem;
}

.btn-lg {
     --bs-btn-font-size: 1.1rem;
}

.text-muted {
    color: var(--g500) !important;
    margin-bottom: 1rem !important;
}

/* Accent rouge sous un titre mis en évidence (ex. titre de la page de connexion). */
.mnspf-title-accent {
    width: 48px;
    height: 3px;
    background-color: var(--mnspf-rouge);
    margin: 0 auto;
    border-radius: 2px;
}

/* Badge « aucun service » par défaut */
.badge {
    color: var(--g500);
    background-color: var(--g200);
    font-weight: 600;
}

/* Badge « service » discret et sur charte */
.badge-service {
    background-color: color-mix(in srgb, var(--mnspf-bleu-light) 70%, transparent);
    color: var(--mnspf-bleu);
}

/* Footer institutionnel (repris du principe mnspf.fr)  */
.mnspf-footer {
    background-color: var(--mnspf-bleu);
    color: #ffffff;
    padding: 2.5rem 0 1.5rem;
    flex-shrink: 0;
    margin-top: 3rem;
}

.mnspf-footer-top {
    display: flex;
    gap: 3rem;
    margin-bottom: 2rem;
}

.mnspf-footer-col {
    flex: 0 0 auto;
}
.mnspf-footer-logo {
    height: 70px;
    width: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 1.5rem 0 0;
}

.mnspf-footer-col h4 {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.mnspf-footer-col a {
    display: block;
    color: var(--w);
    font-weight: 400;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.mnspf-footer-divider {
    border: none;
    border-top: 1px solid var(--mnspf-bleu-gris);
    margin: 1.5rem 0;
}

.mnspf-footer-legal {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mnspf-footer-legal a {
    color: var(--w);
    font-weight: 400;
    font-size: 1rem;
    text-decoration: none;
}

.mnspf-footer-col a:hover,
.mnspf-footer-col a:active,
.mnspf-footer-col a:focus,
.mnspf-footer-legal a:hover,
.mnspf-footer-legal a:active,
.mnspf-footer-legal a:focus {
    color: var(--w);
    font-weight: 400;
    text-decoration: underline !important;
}

@media (max-width: 768px) {
    .mnspf-footer-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
    }

    .mnspf-footer-logo {
        padding: 0;
    }
}

/* =============================================================================
   Messagerie — liste des conversations (cartes lisibles, accent non-lu)
   ============================================================================= */
.conv-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.conv-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background-color: var(--w);
    border: 1px solid var(--mnspf-bleu-light);
    border-radius: 20px;
    padding: 0.8rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

.conv-item:hover {
    background: var(--mnspf-bleu-gris-light);
    font-weight: 400 !important;
}

/* Le filet rouge du non-lu est retiré (retour MOA du 2026-08-12, FO n° 6) : il est porté par l'icône
   pleine, le sujet en gras et ce fond teinté. La règle commune ne le pose plus non plus. */
.conv-item.unread {
    background-color: #fbfdff;
}

.conv-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--mnspf-bleu-gris);
    color: var(--mnspf-bleu-moyen);
    display: flex;
    align-items: center;
    justify-content: center;
}

.conv-item.unread .conv-icon {
    background-color: var(--mnspf-bleu);
    color: var(--w);
}

.conv-subject {
    color: var(--mnspf-bleu);
    font-weight: 600;
}

.conv-item.unread .conv-subject {
    font-weight: 700;
}

.conv-meta {
    font-size: 0.85rem;
}

.message-header-text {
    min-width: 0;
}

/* min-width:0 pour autoriser le text-truncate dans un conteneur flex. */
.min-w-0 {
    min-width: 0;
}

/* =============================================================================
   Messagerie — fil de discussion (bulles de chat contrastées + avatars)
   ============================================================================= */
.chat {
    background-color: var(--w);
    border: 1px solid var(--g200);
    border-radius: 20px;
    padding: 2rem 1rem;
}

.chat-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    align-items: flex-end;
}

.chat-row.me {
    flex-direction: row-reverse;
}

.chat-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.chat-avatar.them {
    background-color: #eef2f7;
    color: var(--mnspf-bleu);
}

.chat-avatar.me {
    background-color: var(--mnspf-bleu);
    color: #ffffff;
}

.chat-bubble {
    max-width: 72%;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
}

.chat-bubble .chat-head {
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
}

.chat-bubble .chat-body {
    white-space: pre-wrap;
    word-break: break-word;
}

.bubble-them {
    background-color: var(--mnspf-bleu-gris);
    color: var(--mnspf-bleu);
    border-bottom-left-radius: 2px;
}

.bubble-them .chat-head {
    color: var(--mnspf-bleu);
}

.bubble-me {
    background-color: var(--mnspf-bleu);
    color: #ffffff;
    border-bottom-right-radius: 2px;
}

.bubble-me .chat-head {
    color: rgba(255, 255, 255, 0.75);
}

/* Note interne (inter-service MNSPF) : pleine largeur, ton ambré, bordure pointillée — jamais
   transmise à l'organisme. Volontairement très distincte des bulles de message. */
.chat-note {
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.85rem;
    background-color: #fff8e6;
    border: 1px dashed #e0a800;
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: 8px;
    color: #5c4600;
}

.chat-note-head {
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
    color: #8a6d00;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.chat-note-body {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Composer à onglets de la messagerie BO. Les onglets INACTIFS sont remplis (gris bleuté) et bordés
   pour bien se distinguer du fond clair de la page — sinon ils « flottent » sans affordance d'onglet.
   L'onglet ACTIF ressort : blanc pour « Répondre », ambré pour « Note interne » (palette .chat-note),
   et fusionne avec la zone de contenu (blanche / ambrée) via sa bordure basse. */
.composer-tabs {
    border-bottom-color: #cdd8e5;
}

.composer-tabs .nav-link {
    background-color: #e4ebf3;
    border-color: #cdd8e5;
    color: var(--mnspf-bleu);
}

.composer-tabs .nav-link:hover {
    background-color: #d9e2ee;
    border-color: #cdd8e5;
}

.composer-tabs .nav-link.active {
    background-color: #ffffff;
    border-color: #cdd8e5 #cdd8e5 #ffffff;
    color: var(--mnspf-bleu);
}

.composer-tabs + .tab-content {
    background-color: #ffffff;
    border-color: #cdd8e5;
}

.composer-tabs .nav-link-note {
    color: #8a6d00;
}

.composer-tabs .nav-link-note.active {
    background-color: #fff8e6;
    color: #5c4600;
    border-color: #e0a800 #e0a800 #fff8e6;
}

.composer-pane-note {
    background-color: #fff8e6;
}

.xd-container {
    min-height: 60vh;
    margin-top: 2.5rem;
}

/* Lisibilité du fragment de statut du check de liaison (back-office). */
#liaison-result .alert {
    margin-bottom: 0;
}